From 2e2e3388e99a6ac5db426b84c1fb76da3dec31aa Mon Sep 17 00:00:00 2001 From: whycq <913841844@qq.com> Date: 星期四, 07 三月 2024 09:27:59 +0800 Subject: [PATCH] # --- Monitor-APP/pages/home/home.vue | 495 ++++++++++++++++++++++++++---------------------------- 1 files changed, 235 insertions(+), 260 deletions(-) diff --git a/Monitor-APP/pages/home/home.vue b/Monitor-APP/pages/home/home.vue index ac80de9..a310e11 100644 --- a/Monitor-APP/pages/home/home.vue +++ b/Monitor-APP/pages/home/home.vue @@ -1,215 +1,19 @@ <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> + <view class="head-left" @click="ejected()"></view> + <view class="head-mid"> + <text style="z-index: 999;">琛ヨ揣鍗曞垪琛�</text> + </view> + <view class="head-right"></view> </view> <!-- 鏃ュ巻 --> - <view class="time-tools">{{calendar}}</view> - <view class="button-left" @click="ejected()"></view> - <view class="button-right" @click="ejected()"></view> + <!-- <view class="time-tools">{{calendar}}</view> --> + <!-- <view class="button-left" @click="ejected()"></view> --> + <!-- <view class="button-right" @click="ejected()"></view> --> <!-- 涓讳綋 --> <view class="info-main"> <view class="info-box"> @@ -218,11 +22,14 @@ <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 class="item-box1" style="width: 5%;">搴忓彿</view> + <view class="item-box1" style="width: 20%;">鍝佺暘</view> + <view class="item-box1" style="width: 15%;">寰呰ˉ璐ф暟閲�</view> + <view class="item-box1" style="width: 15%;">宸茶ˉ璐ф暟閲�</view> + <view class="item-box1" style="width: 15%;">琛ヨ揣鐘舵��</view> + <view class="item-box1" style="width: 10%;">鍒涘缓鏃堕棿</view> + <view class="item-box1" style="width: 10%;">棰勮瀹屾垚鏃堕棿</view> + <view class="item-box1" style="width: 9.5%;">鎿嶄綔</view> </view> <!-- body --> <view class="swiper-body"> @@ -231,14 +38,34 @@ vertical 婊戝姩鏂瑰悜鏄惁涓虹旱鍚� display-multiple-items 鍚屾椂鏄剧ず鐨勬粦鍧楁暟閲� --> <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> + display-multiple-items="10" + circular="true" :autoplay="true" :interval="3000" :duration="1000" disable-touch='true'> + <swiper-item :class="item.inspectSts" class="swiper-item" v-for="(item,i) in swiperList" :key="i"> + <view class="item-box" style="width: 5%;" >{{i+1}}</view> + <view class="item-box" style="width: 20%;">{{item.maktx}}</view> + <view class="item-box" style="width: 15%;">{{item.storeReplenishment}}</view> + <view class="item-box" style="width: 15%;"> + + <text style="color: #25E51E ;" v-if="item.inspectSts == 'inspectWhite'">{{item.storeAdd}}</text> + <text v-if="item.inspectSts == 'inspectRed'">{{item.storeAdd}}</text> + </view> + <view class="item-box" 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> + <!-- <text class="beBatch3" v-if="item.inspectSts != 'inspectWhite'"> + {{item.beBatch$}} + </text> --> + </view> + <view class="item-box" style="width: 10%;">{{item.appeTime$}}</view> + <view class="item-box" style="width: 10%;">{{item.appeTime$}}</view> + <view class="item-box" style="width: 9.5%;"> + <button class="start-btn" size="mini" v-if="item.beBatch == 1" @click="complete(item.matnr)">寮�濮�</button> + <button class="end-btn" size="mini" v-if="item.beBatch == 2" @click="cancel(item.matnr)">瀹屾垚</button> + </view> </swiper-item> </swiper> </view> @@ -316,7 +143,21 @@ </view> </view> </view> - </view> + <!-- 纭鏄惁鎿嶄綔 --> + <view> + <uni-popup ref="inputDialog" type="dialog"> + <uni-popup-dialog :type="msgType" :title="dialogTitle" :content="dialogContent" @confirm="dialogConfirm" + @close="dialogClose"></uni-popup-dialog> + </uni-popup> + </view> + <!-- 鎿嶄綔鎴愬姛澶辫触寮圭獥 --> + <view> + <!-- 鎻愮ず淇℃伅寮圭獥 --> + <uni-popup ref="message" type="message"> + <uni-popup-message :type="messageType" :message="messageText" :duration="3000"></uni-popup-message> + </uni-popup> + </view> + </view> </template> <script> @@ -325,9 +166,18 @@ export default { data() { return { + type: 'center', + msgType: 'success', + messageType: 'success', + messageText: '杩欐槸涓�鏉℃垚鍔熸彁绀�', + dialogTitle: '', + value: '', + dialogContent: '纭寮�濮嬭绗旇ˉ璐х墿鏂欙紵', + matnr: '', + dialogType: 0, series: [], - homeViewShow: true, - infoViewShow: false , + homeViewShow: false, + infoViewShow: true , errorInfoViewShow: false, homeMode: [], infoMode: [], @@ -381,7 +231,10 @@ count: "", error: "" }, - swiperList: [] + swiperList: [ + + ], + inspect: 'inspectRed' } }, onShow() { @@ -403,47 +256,31 @@ 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.getInfo4() + // 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: { // 鏃ュ巻 鏈嶅姟鍣� @@ -464,6 +301,48 @@ fail(res) { } + }) + }, + // 寮�濮嬫寜閽� + complete(matnr) { + this.matnr = matnr + this.dialogTitle = `鍝佺暘锛�${matnr}` + this.dialogType = 1 + this.dialogContent = '纭寮�濮嬭绗旇ˉ璐х墿鏂欙紵' + this.$refs.inputDialog.open() + }, + // 缁撴潫鎸夐挳 + cancel(matnr) { + this.matnr = matnr + this.dialogTitle = `鍝佺暘锛�${matnr}` + this.dialogType = 2 + this.dialogContent = '纭瀹屾垚璇ョ瑪琛ヨ揣鐗╂枡锛�' + this.$refs.inputDialog.open() + }, + // 寮圭獥鍙栨秷 + dialogClose() { + this.$refs.inputDialog.close() + }, + // 寮圭獥纭 + dialogConfirm() { + let that = this + uni.request({ + url: that.commonUrl + "/LocDetlReplenishmentController/hand/control/re", + method:"GET", + data: {matnr:that.matnr,type: that.dialogType}, + success(result) { + console.log(result); + var res = result.data + if (res.code === 200) { + that.messageType = 'success' + that.messageText = `鎿嶄綔鎴愬姛` + that.$refs.message.open() + } else { + that.messageType = 'error' + that.messageText = res.msg + that.$refs.message.open() + } + } }) }, getUrl() { @@ -502,6 +381,39 @@ 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) { + // console.log(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 + } + }) + }, + getInfo4() { + let result = ycqdata.dataError3 + var res = result.data + for (let k of res.data) { + if (k.inspect == 1) { + k['inspectSts'] = 'inspectWhite' + } else { + k['inspectSts'] = 'inspectRed' + + } + } + this.swiperList = res.data + }, getError2 () { let that = this let result = ycqdata.dataError2 @@ -817,7 +729,7 @@ .container{ width: 100vw; min-height: 100vh; - background-color: #00163E; + background-color: #083870; color: #fff; text-align: center; @@ -826,8 +738,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; @@ -841,13 +754,27 @@ .head { width: 100vw; height: 11vh; - font-size:4vw; + font-size:3vw; font-weight: 700; - display: flex; - align-items: center; - justify-content: center; - transform: scale(0.7); + display: grid; + grid-template-columns: 1fr 1fr 1fr; } + .head-mid { + height: 10vh; + background-image: url(../../static/head.png); + background-size: 100% 100%; + } + .head-left { + height: 6vh; + background-image: url(../../static/headleft.png); + background-size: 110% 100%; + transform: scaleX(-1); + } + .head-right { + height: 6vh; + background-image: url(../../static/headleft.png); + background-size: 110% 100%; + } .time-tools { position: absolute; right: 2%; @@ -857,7 +784,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%; @@ -993,6 +920,7 @@ .info-box { width: 98%; height: 98%; + background-color: #032246; } /* 寮傚父淇℃伅 */ .error-info-view { @@ -1097,4 +1025,51 @@ height: 20%;font-size: 8vh; justify-content: center; } + .beBatch1 { + color: #ffba02; + padding: 4rpx 10rpx; + background-color: #fff8e6; + font-weight: bold; + border-radius: 2rpx; + } + .beBatch2 { + color: #ff5454; + padding: 4rpx 10rpx; + background-color: #ffeded; + font-weight: bold; + border-radius: 2rpx; + } + .inspectRed { + color: #F10F0F; + } + .inspectWhite { + color: #FFF; + } + .item-box1 { + height: 98%; + display: flex; + align-items: center; + justify-content: center; + border-left: 1px solid #7db2f7; + } + .item-box { + height: 98%; + display: flex; + align-items: center; + justify-content: center; + border: 1px solid #074a9a; + } + .start-btn { + color: #FFF; + background-color: #13ce66; + transform: scale(0.7); + } + .end-btn { + color: #FFF; + background-color: #1890ff; + transform: scale(0.7); + } + .popup { + + } </style> -- Gitblit v1.9.1