From d7c5867c0aa486baaff63154303a29b354e98c56 Mon Sep 17 00:00:00 2001 From: whycq <913841844@qq.com> Date: 星期五, 04 八月 2023 08:10:42 +0800 Subject: [PATCH] # --- Monitor-APP/pages/home/home.vue | 84 +++++++++++++++++++++++++++++++----------- 1 files changed, 62 insertions(+), 22 deletions(-) diff --git a/Monitor-APP/pages/home/home.vue b/Monitor-APP/pages/home/home.vue index 99ff35b..7366f87 100644 --- a/Monitor-APP/pages/home/home.vue +++ b/Monitor-APP/pages/home/home.vue @@ -135,9 +135,9 @@ <!-- null --> <view style="height: 2%;"></view> + - - <view style="height: 43%;"> + <view style="height: 51%;"> <y-box> <view class="box-item"> <view class="flex-row" style="width: 100%;"> @@ -156,35 +156,60 @@ </view> </view> <view class="flex-row" style="width: 100%;"> - <!-- 宸� --> - <view class="charts-box-ring"> - <qiun-data-charts type="ring" :opts="{legend:{position:'bottom'}}" :eopts="ringOpts" :chartData="chartsDataPie2" :echartsH5="true" :echartsApp="true"/> - </view> - <!-- 鍙� --> - <view> + <!-- 搴撲綅浣跨敤鎯呭喌 --> + <!-- left --> + <view style="margin-left: 5%;"> <view class="flex-row sub-info"> <image src="../../static/g1.png" mode="aspectFit"></image> - <view style="width: 8vw;height: 4vw;line-height: 4vw;">鍦ㄥ簱</view> - <view style="width: 8vw;height: 4vw;line-height: 4vw;font-size: 2vw;">{{baseInfo.stockCount}}</view> + <view style="width: 8vw;height: 4vw;line-height: 4vw;">闀挎�诲簱浣�</view> + <view style="width: 8vw;height: 4vw;line-height: 4vw;font-size: 2vw;">{{baseInfo.longAllLoc}}</view> </view> - <view class="flex-row sub-info" style="margin-top: 2vh;"> - <image src="../../static/f1.png" mode="aspectFit"></image> - <view style="width: 8vw;height: 4vw;line-height: 4vw;">绌哄簱</view> - <view style="width: 8vw;height: 4vw;line-height: 4vw;font-size: 2vw;">{{baseInfo.emptyCount}}</view> + <view class="flex-row sub-info"> + <image src="../../static/g1.png" mode="aspectFit"></image> + <view style="width: 8vw;height: 4vw;line-height: 4vw;">浣跨敤搴撲綅</view> + <view style="width: 8vw;height: 4vw;line-height: 4vw;font-size: 2vw;">{{baseInfo.longUseLoc}}</view> </view> - <view class="flex-row sub-info" style="margin-top: 2vh;"> - <image src="../../static/e1.png" mode="aspectFit"></image> - <view style="width: 8vw;height: 4vw;line-height: 4vw;">閿佸畾</view> - <view style="width: 8vw;height: 4vw;line-height: 4vw;font-size: 2vw;">{{baseInfo.noneCount}}</view> + <view class="flex-row sub-info"> + <image src="../../static/g1.png" mode="aspectFit"></image> + <view style="width: 8vw;height: 4vw;line-height: 4vw;">绌哄簱浣�</view> + <view style="width: 8vw;height: 4vw;line-height: 4vw;font-size: 2vw;">{{baseInfo.longEmptyLoc}}</view> + </view> + <view class="flex-row sub-info"> + <image src="../../static/g1.png" mode="aspectFit"></image> + <view style="width: 8vw;height: 4vw;line-height: 4vw;">绂佺敤搴撲綅</view> + <view style="width: 8vw;height: 4vw;line-height: 4vw;font-size: 2vw;">{{baseInfo.longXLoc}}</view> </view> </view> + <view style="margin-left: 5%;"> + <view class="flex-row sub-info"> + <image src="../../static/g1.png" mode="aspectFit"></image> + <view style="width: 8vw;height: 4vw;line-height: 4vw;">鐭�诲簱浣�</view> + <view style="width: 8vw;height: 4vw;line-height: 4vw;font-size: 2vw;">{{baseInfo.shortAllLoc}}</view> + </view> + <view class="flex-row sub-info"> + <image src="../../static/g1.png" mode="aspectFit"></image> + <view style="width: 8vw;height: 4vw;line-height: 4vw;">浣跨敤搴撲綅</view> + <view style="width: 8vw;height: 4vw;line-height: 4vw;font-size: 2vw;">{{baseInfo.shortUseLoc}}</view> + </view> + <view class="flex-row sub-info"> + <image src="../../static/g1.png" mode="aspectFit"></image> + <view style="width: 8vw;height: 4vw;line-height: 4vw;">绌哄簱浣�</view> + <view style="width: 8vw;height: 4vw;line-height: 4vw;font-size: 2vw;">{{baseInfo.shortEmptyLoc}}</view> + </view> + <view class="flex-row sub-info"> + <image src="../../static/g1.png" mode="aspectFit"></image> + <view style="width: 8vw;height: 4vw;line-height: 4vw;">绂佺敤搴撲綅</view> + <view style="width: 8vw;height: 4vw;line-height: 4vw;font-size: 2vw;">{{baseInfo.shortXLoc}}</view> + </view> + </view> + </view> </view> </y-box> </view> <view style="height: 2%;"></view> - <view style="height: 18%;"> + <view style="height: 10%;"> <y-box> <view class="flex-col" style="width: 100%;height: 100%;font-size: 4vh;justify-content: center;letter-spacing: 1vh;"> <!-- 鍢夊杽杈归攱鏈烘鑲′唤鏈夐檺鍏徃 --> @@ -342,6 +367,14 @@ stockCount: '', emptyCount: '', noneCount: '', + longAllLoc: '', + shortAllLoc: '', + longEmptyLoc: '', + shortEmptyLoc: '', + longUseLoc: '', + shortUseLoc: '', + longXLoc: '', + shortXLoc: '', }, chartsData: { "Line": { @@ -719,10 +752,16 @@ success(result) { var res = result.data if (res.code === 200) { + console.log(res.data.pie); that.chartsData.Pie.series[0].data = res.data.pie - that.baseInfo.stockCount = res.data.stockCunt - that.baseInfo.emptyCount = res.data.emptyCount - that.baseInfo.noneCount = res.data.noneCount + that.baseInfo.longAllLoc = res.data.longAllLoc + that.baseInfo.shortAllLoc = res.data.shortAllLoc + that.baseInfo.longEmptyLoc = res.data.longEmptyLoc + that.baseInfo.shortEmptyLoc = res.data.shortEmptyLoc + that.baseInfo.longUseLoc = res.data.longUseLoc + that.baseInfo.shortUseLoc = res.data.shortUseLoc + that.baseInfo.longXLoc = res.data.longXLoc + that.baseInfo.shortXLoc = res.data.shortXLoc that.baseInfo.used = res.data.used that.baseInfo.usedPr = res.data.usedPr } @@ -880,6 +919,7 @@ /* background-color: #00ffff; */ } .sub-info { + margin-top: 1vh; font-size: 1.5vw; } .sub-info image { -- Gitblit v1.9.1