From 5bb7cf9fe664549b382da52e15069ff2bd980151 Mon Sep 17 00:00:00 2001 From: whycq <913841844@qq.com> Date: 星期六, 02 三月 2024 07:57:52 +0800 Subject: [PATCH] # --- Monitor-APP/pages/home/home.vue | 348 ++++++++++++++++----------------------------------------- 1 files changed, 100 insertions(+), 248 deletions(-) diff --git a/Monitor-APP/pages/home/home.vue b/Monitor-APP/pages/home/home.vue index ac80de9..0799f07 100644 --- a/Monitor-APP/pages/home/home.vue +++ b/Monitor-APP/pages/home/home.vue @@ -1,210 +1,11 @@ <template> <view class="container"> - <!-- 瀹佹尝鎹蜂赴椤圭洰 --> - <uni-transition :duration="duration" :mode-class="homeMode" :show="homeViewShow"> - <view class="home-view"> - <view class="head"> - <text>鑷姩浠撳簱WCS鐩戞帶骞冲彴</text> - </view> - <!-- 鏃ュ巻 --> - <view class="time-tools">{{calendar}}</view> - <view class="button-left" @click="ejected()"></view> - <view class="button-right" @click="ejected()"></view> - <!-- 涓昏鍥� --> - <view class="main"> - <view class="mian-item"> - <view class="mian-item-box"> - <y-box> - <view class="box-item"> - <text class="item-title">鑷姩鍖栫珛浣撲粨搴�</text> - <text class="item-subTitle">Automatic Storageand Retrieval System</text> - <text class="item-text" style="text-align: left;">鍒╃敤绔嬩綋浠撳簱璁惧鍙疄鐜颁粨搴撻珮灞傚悎鐞嗗寲銆佸瓨鍙栬嚜鍔ㄥ寲銆佹搷浣滅畝渚垮寲锛涜嚜鍔ㄥ寲绔嬩綋浠撳簱鏄綋鍓嶆妧鏈按骞宠緝楂樼殑褰㈠紡銆傝嚜鍔ㄥ寲绔嬩綋浠撳簱鐨勪富浣撶敱璐ф灦銆佸贩閬撳紡鍫嗗灈璧烽噸鏈恒�佸叆锛堝嚭锛夊簱宸ヤ綔鍙板拰鑷姩杩愯繘锛堝嚭锛夊強鎿嶄綔鎺у埗绯荤粺缁勬垚銆傝揣鏋舵槸閽㈢粨鏋勬垨閽㈢瓔娣峰嚌鍦熺粨鏋勭殑寤虹瓚鐗╂垨缁撴瀯浣擄紝璐ф灦鍐呮槸鏍囧噯灏哄鐨勮揣浣嶇┖闂达紝宸烽亾鍫嗗灈璧烽噸鏈虹┛琛屼簬璐ф灦涔嬮棿鐨勫贩閬撲腑锛屽畬鎴愬瓨銆佸彇璐х殑宸ヤ綔銆傜鐞嗕笂閲囩敤璁$畻鏈哄強鏉″舰鐮佹妧鏈��</text> - </view> - <view class="box-item"> - <text class="item-title">浠撳簱鏁版嵁</text> - <text class="item-subTitle">warehouse data</text> - <view class="img-box"> - - <view class="item-img"> - <image src="../../static/a1.png" mode="aspectFit"></image> - <view class="flex-col" style="width: calc(100% - 5vw);"> - <view class="flex-row" style="position: relative;" > - <view style="width: 2vw;padding-left: 2vw;;font-size: 2vw;">{{baseInfo.xDistance}}</view> - <view style="position: absolute;bottom: 0;left: 10vw;">m</view> - </view> - <view style="height: 100%;text-align: left;text-indent: 2em;">绱璧拌璺濈(绫�)</view> - </view> - </view> - - <view class="item-img"> - <image src="../../static/b1.png" mode="aspectFit"></image> - <view class="flex-col" style="width: calc(100% - 5vw);"> - <view class="flex-row" style="position: relative;" > - <view style="width: 2vw;padding-left: 2vw;;font-size: 2vw;">{{baseInfo.yDistance}}</view> - <view style="position: absolute;bottom: 0;left: 10vw;">m</view> - </view> - <view style="height: 100%;text-align: left;text-indent: 2em;">绱鍗囬檷璺濈(绫�)</view> - </view> - </view> - - <view class="item-img"> - <image src="../../static/c1.png" mode="aspectFit"></image> - <view class="flex-col" style="width: calc(100% - 5vw);"> - <view class="flex-row" style="position: relative;" > - <view style="-width: 2vw;padding-left: 2vw;;font-size: 2vw;">{{baseInfo.xDuration}}</view> - <view style="position: absolute;bottom: 0;left: 10vw;">s</view> - </view> - <view style="height: 100%;text-align: left;text-indent: 2em;">绱璧拌鏃堕暱(绉�)</view> - </view> - </view> - - <view class="item-img"> - <image src="../../static/d1.png" mode="aspectFit"></image> - <view class="flex-col" style="width: calc(100% - 5vw);"> - <view class="flex-row" style="position: relative;" > - <view style="width: 2vw;padding-left: 2vw;;font-size: 2vw;">{{baseInfo.yDuration}}</view> - <view style="position: absolute;bottom: 0;left: 10vw;">s</view> - </view> - <view style="height: 100%;text-align: left;text-indent: 2em;">绱鍗囬檷鏃堕暱(绉�)</view> - </view> - </view> - - </view> - </view> - <view class="box-item"> - <view class="flex-row" style="width: 100%;"> - <!-- 宸︿晶 --> - <view class="flex-col" style="align-items: flex-start;justify-content: flex-start;"> - <text class="item-title">搴撲綅浣跨敤鐜�</text> - <text class="item-subTitle">EQUIPMENT USAGE THIS MONTH</text> - </view> - <!-- 鍙充晶 --> - <view style="margin-left: auto;"> - <!-- 鐧惧垎姣� --> - <view class="flex-col" style="align-items: flex-end;justify-content: flex-end;" > - <!-- style="justify-content: flex-end;position: absolute;top: 0;right: 1vw;text-align: right;" --> - <text class="item-title">{{baseInfo.usedPr}}%</text> - <text class="item-subTitle">鍚屾瘮涓婃湀 + 5%</text> - </view> - </view> - </view> - - <view class="flex-col" style="width: 100%;align-items: flex-start;position: relative;font-size: 1vw"> - <!-- 杩涘害鏉� --> - <view class="flex-row" style="width: 100%;position: relative;margin-top: 5%;"> - <view class="progressBar" style="width: 80%;height: 2vw;"> - <view class="progress" :style="'width:'+ baseInfo.usedPr + '%'"></view> - </view> - <view style="position: absolute;bottom: 0;right: 0;font-size: 2.5vw;color: #FF5722;;">{{baseInfo.used}}</view> - </view> - </view> - </view> - </y-box> - </view> - </view> - <view class="mian-item"> - <view class="mian-item-box"> - <view style="width: 100%;height: 100%;"> - <view style="height: 35%;"> - <!-- 鎶樼嚎鍥� --> - <y-box> - <view class="box-item"> - <view class="flex-row" style="width: 100%;"> - <!-- 宸︿晶 --> - <view class="flex-col" style="align-items: flex-start;justify-content: flex-start;"> - <text class="item-title">鍏ュ嚭搴撶粺璁�</text> - <text class="item-subTitle">ORDER STATISTICS</text> - </view> - <!-- 鍙充晶 --> - <view style="margin-left: auto;"> - <!-- 鐧惧垎姣� --> - <view class="flex-col" style="align-items: flex-end;justify-content: flex-end;" > - <!-- style="justify-content: flex-end;position: absolute;top: 0;right: 1vw;text-align: right;" --> - <text class="item-title">31</text> - <text class="item-subTitle">浠婃棩璁㈠崟鏁�</text> - </view> - </view> - </view> - <view class="charts-box"> - <qiun-data-charts type="line" :chartData="chartsDataLine1" :echartsH5="true" :echartsApp="true"/> - </view> - </view> - </y-box> - </view> - - - <!-- null --> - <view style="height: 2%;"></view> - - - <view style="height: 43%;"> - <y-box> - <view class="box-item"> - <view class="flex-row" style="width: 100%;"> - <!-- 宸︿晶 --> - <view class="flex-col" style="align-items: flex-start;justify-content: flex-start;"> - <text class="item-title">搴撳瓨绫诲瀷</text> - <text class="item-subTitle">INCOME DATE</text> - </view> - <!-- 鍙充晶 --> - <view style="margin-left: auto;"> - <!-- 鐧惧垎姣� --> - <view class="flex-col" style="align-items: flex-end;justify-content: flex-end;" > - <text class="item-title">浠婂ぉ</text> - <text class="item-subTitle">Today</text> - </view> - </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> - <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> - <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> - <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> - </view> - </view> - </view> - - </y-box> - </view> - <view style="height: 2%;"></view> - <view style="height: 18%;"> - <y-box> - <view class="flex-col" style="width: 100%;height: 100%;font-size: 4vh;justify-content: center;letter-spacing: 1vh;"> - <!-- 鍢夊杽杈归攱鏈烘鑲′唤鏈夐檺鍏徃 --> - 鑷姩浠撳簱WCS鐩戞帶骞冲彴 - <!-- <image src="../../static/ruiyun.jpg" mode="" style="width: 100%;"></image> --> - </view> - </y-box> - </view> - </view> - </view> - </view> - </view> - - </view> - </uni-transition> <!-- 鍏ㄦ澘/鎷f枡淇℃伅 --> <uni-transition :duration="duration" :mode-class="infoMode" :show="infoViewShow"> <view class="home-view"> <view class="head"> - <text>{{infoText.title}}</text> + <image src="../../static/head.png" mode="" class="head-image"></image> + <text style="z-index: 999;">鍏ュ簱灞�</text> </view> <!-- 鏃ュ巻 --> <view class="time-tools">{{calendar}}</view> @@ -218,11 +19,13 @@ <view class="text-content"> <!-- head --> <view class="swiper-head"> - <view style="width: 20%;">鐩爣绔欙細{{infoText.staNo}}</view> - <view style="width: 30%;">鍟嗗搧缂栧彿</view> - <view style="width: 20%;">鍟嗗搧鍚嶇О</view> - <view style="width: 20%;">瑙勬牸</view> - <view style="width: 10%;">鏁伴噺</view> + <view style="width: 10%;">搴忓彿</view> + <view style="width: 25%;">鍝佺暘</view> + <view style="width: 15%;">寰呰ˉ璐ф暟閲�</view> + <view style="width: 15%;">宸茶ˉ璐ф暟閲�</view> + <view style="width: 15%;">琛ヨ揣鐘舵��</view> + <view style="width: 10%;">宸ュ崟鍒涘缓鏃堕棿</view> + <view style="width: 10%;">棰勮瀹屾垚鏃堕棿</view> </view> <!-- body --> <view class="swiper-body"> @@ -233,12 +36,21 @@ <swiper class="swiper-body-main" vertical="true" display-multiple-items="8" circular="true" :autoplay="true" :interval="3000" :duration="1000"> - <swiper-item class="swiper-item" v-for="(item,i) in swiperList" :key="i"> - <view style="width: 20%;">No:{{i+1}}</view> - <view style="width: 30%;">{{item.matNo}}</view> - <view style="width: 20%;">{{item.maknx}}</view> - <view style="width: 20%;">{{item.specs}}</view> - <view style="width: 10%;">{{item.count}}</view> + <swiper-item :class="item.inspectSts" class="swiper-item" v-for="(item,i) in swiperList" :key="i"> + <view style="width: 10%;">{{i+1}}</view> + <view style="width: 25%;">{{item.maktx}}</view> + <view style="width: 15%;">{{item.storeReplenishment}}</view> + <view style="width: 15%;color: chartreuse;">{{item.storeAdd}}</view> + <view style="width: 15%;"> + <text class="beBatch1" v-if="item.beBatch == 2"> + {{item.beBatch$}} + </text> + <text class="beBatch2" v-if="item.beBatch != 2"> + {{item.beBatch$}} + </text> + </view> + <view style="width: 10%;">{{item.appeTime$}}</view> + <view style="width: 10%;">{{item.overTime$ ? item.overTime$ : '--'}}</view> </swiper-item> </swiper> </view> @@ -326,8 +138,8 @@ data() { return { series: [], - homeViewShow: true, - infoViewShow: false , + homeViewShow: false, + infoViewShow: true , errorInfoViewShow: false, homeMode: [], infoMode: [], @@ -381,7 +193,17 @@ count: "", error: "" }, - swiperList: [] + swiperList: [ + { + maktx: 1, + storeReplenishment: '123123', + storeAdd: '123123', + beBatch$: '123', + appeTime$: '2024骞�3鏈�1鏃� 21鐐�14鍒�', + overTime$: '2024骞�3鏈�1鏃� 21鐐�14鍒�' + } + ], + inspect: 'inspectRed' } }, onShow() { @@ -403,47 +225,30 @@ that.basePort = BasePort that.baseCrnId = BaseCrnId this.getUrl() - setTimeout(()=>{ - this.getServerData() - this.initlineChart() - this.initPieChart() - this.getOther() - setTimeout(()=>{ - this.getServerData() - this.initlineChart() - this.initPieChart() - this.getOther() - setTimeout(()=>{ - this.getServerData() - this.initlineChart() - this.initPieChart() - this.getOther() - },500) - },500) - },500) }, onLoad() { setInterval(()=>{ - this.getServerData() - this.getDate2() - this.getUrl() - this.getInfo() - this.getError() + // this.getServerData() + // this.getDate2() + // this.getUrl() + // this.getInfo() + // this.getError() // this.getInfo2() // this.getError2() - this.controller() + // this.getInfo3() + // this.controller() },1000) // setInterval(()=>{ // this.changeErrorShow() // },5000) - setInterval(()=>{ - this.getServerData() - this.initlineChart() - this.initPieChart() - this.getOther() - },600000) + // setInterval(()=>{ + // this.getServerData() + // this.initlineChart() + // this.initPieChart() + // this.getOther() + // },600000) }, methods: { // 鏃ュ巻 鏈嶅姟鍣� @@ -502,6 +307,25 @@ that.infoType = 0 } }, + getInfo3() { + let that = this + uni.request({ + url: that.commonUrl + "/open/loc/query/auth/v1", + method:"GET", + data: {ledId:that.baseLedId}, + success(result) { + var res = result.data + for (let k of res.data) { + if (k.inspect == 1) { + k['inspectSts'] = 'inspectWhite' + } else { + k['inspectSts'] = 'inspectRed' + } + } + that.swiperList = res.data + } + }) + }, getError2 () { let that = this let result = ycqdata.dataError2 @@ -826,8 +650,9 @@ .home-view { width: 100vw; min-height: 100vh; - background-image: url(../../static/background.png); - background-size: 100vw 100vh; + /* background-image: url(../../static/head.png); + background-size: 50vw 10vh; + background-repeat: no-repeat; */ } .home-right { width: 50vw; @@ -848,6 +673,11 @@ justify-content: center; transform: scale(0.7); } + .head-image { + width: 80%; + position: absolute; + z-index: 1; + } .time-tools { position: absolute; right: 2%; @@ -857,7 +687,7 @@ } .button-left { position: absolute; - background-image: url(../../static/right.png); + background-image: url(../../static/headleft.png); background-size: 100% 100%; top: 1.8%; left: 21.3%; @@ -1097,4 +927,26 @@ height: 20%;font-size: 8vh; justify-content: center; } + .beBatch1 { + padding: 18rpx; + background-color: #fec652; + height: 60rpx; + text-align: center; + line-height: 60rpx; + border-radius: 10rpx; + } + .beBatch2 { + padding: 18rpx; + background-color: #60b86b; + height: 60rpx; + text-align: center; + line-height: 60rpx; + border-radius: 10rpx; + } + .inspectRed { + background-color: rgba(235, 104, 84, .6); + } + .inspectWhite { + background-color: rgba(255, 255, 255, .4); + } </style> -- Gitblit v1.9.1