From 24b91cde32383c18533e516d7241e880d993d63c Mon Sep 17 00:00:00 2001 From: whycq <10027870+whycq@user.noreply.gitee.com> Date: 星期五, 17 十一月 2023 09:55:51 +0800 Subject: [PATCH] # --- Monitor-APP/pages/home/home.vue | 799 ++++++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 files changed, 768 insertions(+), 31 deletions(-) diff --git a/Monitor-APP/pages/home/home.vue b/Monitor-APP/pages/home/home.vue index e11b002..50c2982 100644 --- a/Monitor-APP/pages/home/home.vue +++ b/Monitor-APP/pages/home/home.vue @@ -1,66 +1,803 @@ <template> <view class="container"> - <!-- 涓昏鍥� --> - <!-- <view class=""> - - </view> --> - <uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :styles="homeView" - :show="show"><text class="text">绀轰緥鍏冪礌</text></uni-transition> + <uni-transition :duration="duration" :mode-class="homeMode" :show="homeViewShow"> + <view class="home-view"> + <!-- <view class="head"> + <text>鑷姩浠撳簱鐩戞帶骞冲彴</text> + </view> --> + <!-- 鏃ュ巻 --> + <!-- <view class="time-tools">{{calendar}}</view> + <view class="button-left" @click="ejected()"></view> + <view class="button-right" @click="ejected()"></view> --> + <view v-if="locs.length==0"><button size="mini" @click="ejected()" >閰嶇疆</button></view> + <view class="main" v-if="locs" > + <view class="main-b" v-for="item in locs" :class="item.color"> + <view class="flex-col" style="width: 100%;font-size: 24rpx;"> + <view class="flex-row"> + <view style="flex: 1;" @click="ejected()">{{item.devNo}}</view> + <view style="flex: 1;">{{item.locSts$}}</view> + </view> + <view class="flex-row"> + <view style="flex: 1;" v-if="item.agvWrkMast">宸ヤ綔鍙凤細{{item.agvWrkMast.wrkNo}}</view> + <view style="flex: 1;" v-if="item.agvWrkMast" >{{item.agvWrkMast.wrkSts$}}</view> + </view> + <view class="flex-row"> + <view style="flex: 1;" v-if="item.agvWaitPakin">鏂欑鐮�: {{item.agvWaitPakin.suppCode}}</view> + <view style="flex: 1;" v-if="item.agvWrkDetl">鏂欑鐮侊細{{item.agvWrkDetl.suppCode}}</view> + <view style="flex: 1;" v-if="!item.agvWaitPakin && !item.agvWrkDetl"></view> + + <view style="flex: 1;" v-if="item.agvWrkMast">{{item.agvWrkMast.ioType$}}</view> + <view style="flex: 1;" v-if="!item.agvWrkMast"></view> + </view> + <view class="flex-row"> + <view style="flex: 1;" ></view> + <view style="flex: 1;" ></view> + </view> + </view> + + <view class="flex-col" style="width: 100%;" v-if="item.agvWaitPakin"> + <view class="flex-row" style="background-color: #007aff;"> + <view style="flex: 3;">璁㈠崟鍙�</view> + <view style="flex: 3;">鐗╂枡鍙�</view> + <view style="flex: 1;">鏁伴噺</view> + <view style="flex: 1;">缁撲綑</view> + </view> + <view class="flex-row" v-for="k in item.agvWaitPakin.orderNo"> + <view style="flex: 3;">{{k.orderNo}}</view> + <view style="flex: 3;">{{item.agvWaitPakin.matnr}}</view> + <view style="flex: 1;">{{k.anfme}}</view> + <view style="flex: 1;">{{item.agvWaitPakin.volume}}</view> + </view> + </view> + + <view class="flex-col" style="width: 100%;" v-if="item.agvWrkDetl"> + <view class="flex-row" style="background-color: #007aff;"> + <view style="flex: 3;">璁㈠崟鍙�</view> + <view style="flex: 3;">鐗╂枡鍙�</view> + <view style="flex: 1;">鏁伴噺</view> + <view style="flex: 1;">缁撲綑</view> + </view> + <view class="flex-row" v-for="k in item.agvWrkDetl.orderNo"> + <view style="flex: 3;">{{k.orderNo}}</view> + <view style="flex: 3;">{{item.agvWrkDetl.matnr}}</view> + <view style="flex: 1;">{{k.anfme}}</view> + <view style="flex: 1;">{{item.agvWrkDetl.volume}}</view> + </view> + </view> + <view style="align-self: center;margin-top: auto;width: 100%;display: flex;align-items: center;justify-content: center;" v-if="item.agvWrkMast && item.agvWrkMast.ioType == 103 && item.agvWrkDetl"> + <view style="width: 60%;background-color: #007aff;height: 3vh;display: flex;align-items: center;justify-content: center;font-size: 24rpx; + border-radius: 8rpx;" @click="pickIn(item.devNo)">鎷f枡鍥炲簱</view> + </view> + + <view style="align-self: center;margin-top: auto;width: 100%;display: flex;align-items: center;justify-content: center;" v-if="item.agvWrkMast && item.agvWrkMast.ioType == 107 && item.agvWrkDetl"> + <view style="width: 60%;background-color: #007aff;height: 3vh;display: flex;align-items: center;justify-content: center;font-size: 24rpx; + border-radius: 8rpx;" @click="pickIn(item.devNo)">鐩樼偣鍥炲簱</view> + </view> + + <view style="align-self: center;margin-top: auto;width: 100%;display: flex;align-items: center;justify-content: center;" v-if="item.agvWrkMast && item.agvWrkMast.ioType == 101 && item.agvWrkDetl"> + <view style="width: 60%;background-color: #007aff;height: 3vh;display: flex;align-items: center;justify-content: center;font-size: 24rpx; + border-radius: 8rpx;" @click="containerMoveOut(item.devNo)">瀹瑰櫒绂诲満</view> + </view> + + </view> + </view> + + + </view> + </uni-transition> <!-- 鍏ㄦ澘/鎷f枡淇℃伅 --> - <view class="info"> - + + <!-- 鑷畾涔夊脊鍑哄眰 --> + <view class="eject-mask" v-show="ejectShow"> + <view class="eject"> + <!-- 寮瑰嚭title --> + <view class="eject-title">淇敼 / 閰嶇疆</view> + <!-- input --> + <scroll-view scroll-y class="eject-input"> + <view class="item"> + <view class="desc">ip锛�</view> + <view class="input"> + <input type="text" v-model="baseIP"> + </view> + </view> + <view class="item"> + <view class="desc">port锛�</view> + <view class="input"> + <input type="text" v-model="basePort"> + </view> + </view> + + <view class="item"> + <view class="desc">Url锛�</view> + <view class="input"> + <input type="text" v-model="baseUrl"> + </view> + </view> + + + <view class="item"> + <view class="desc">妤煎眰锛�</view> + <radio-group @change="floor"> + <label> + <radio :checked="ck1" style="margin-left: 50rpx;"/><text>1妤�</text> + </label> + <label> + <radio :checked="ck2" style="margin-left: 50rpx;"/><text>3妤�</text> + </label> + </radio-group> + </view> + + <view class="item"> + <view class="desc">缂撳瓨璐ф灦锛�</view> + <radio-group @change="radioChange" > + <label v-for="(item, index) in rows" :key="item.value"> + <radio style="margin-left: 50rpx;" :value="item.value" :checked="index === current" />{{item.name}} + </label> + </radio-group> + </view> + + </scroll-view> + <!-- button --> + <view class="eject-button"> + <view class="button-item" @click="ejectClose">鍙� 娑�</view> + <view class="button-item" @click="ejectConfirm">纭� 璁�</view> + </view> + </view> </view> - <!-- 寮傚父淇℃伅 --> - <view class="error-info"></view> + <view style="color: #FFF;position: fixed;bottom: 10px;left: 10px;" v-show="timeOut"> + 杩炴帴瓒呮椂: {{times}} s + </view> </view> </template> - +<!-- {"msg":"鎿嶄綔鎴愬姛","code":200,"data":[{"title":"鍏ㄦ澘鍑哄簱","workNo":7460,"staNo":110,"sourceStaNo":null,"locNo":null,"sourceLocNo":"0807102","matDtos":[{"matNo":"50460834","maknx":"200x60妗岄潰","count":26.0}],"emptyMk":false,"ioType":101}]} --> <script> + import demodata from '@/mockdata/demodata.json'; + import ycqdata from '@/pages/index/data.json'; export default { data() { return { - show: true, - modeClass: ['fade', 'slide-top'], - homeView: { - justifyContent: 'center', - alignItems: 'center', - width: '100vw', - height: '100vh', - borderRadius: '5px', - textAlign: 'center', - backgroundColor: '#4cd964', - boxShadow: '0 0 5px 1px rgba(0,0,0,0.2)' - } + locs: [ + // {devNo:'CS-309-005-03@3',locSts$:'O.绌哄簱浣�', + // agvWrkMast:{wrkNo:23879,wrkSts$: "205.宸ヤ綔瀹屾垚"}, + // agvWaitPakin: {} + // }, + ], + floors: [{value: 1,name:'1妤�'},{value:2,name:'3妤�'}], + rows: [{value: 'cs-101',name:'101'},{value: 'cs-102',name:'102'}], + ck1: true, + ck2: false, + current: 'cs-101', + series: [], + homeViewShow: true, + infoViewShow: false , + errorInfoViewShow: false, + homeMode: [], + infoMode: [], + errorInfoMode: [], + baseInfo: { + xDistance: 1, + yDistance: 2, + xDuration: 3, + yDuration: 4, + usedPr: 50, + used: 3537, + stockCount: '', + emptyCount: '', + noneCount: '', + }, + chartsData: { + "Line": { + "categories": [], + "series": [] + }, + "Pie": { + "series": [{ + "data": [] + }] + }, + }, + duration: 1000, + calendar: '', + ringOpts:{}, + chartsDataLine1: {}, + chartsDataPie2: {}, + fontSize: '', + height: '', + showCharts: false, + ejectShow: false, + baseIP: '10.10.10.40', + basePort: '8081', + baseLedId: '', + baseCrnId: '', + baseUrl: 'tzskwms', + floor1: true, + floor2: false, + row: '', + info: null, + error: null, + infoType: 0, + text: '', + infoText: { + title: '', + staNo: "", + matnr: "", + maknx: "", + specs: "", + count: "", + error: "", + barcode: "", + orderNo: '', + batch: '', + doneOfTray: '', + totalOfTray: '', + doneOfUnit: '', + totalOfUnit: '', + ctnNo: '1' + }, + swiperList: [], + timeOut: false, + times: 0, + currDate: '', + textred: 'textred', + result: '', + color: '' } + }, + onShow() { + // 闅愯棌鏃堕棿,鐢甸噺,淇″彿绛� + // #ifdef APP-PLUS + plus.navigator.setFullscreen(true) + // #endif + }, + mounted() { + let that = this + const BaseIP = uni.getStorageSync('BaseIp'); + const BaseLedId = uni.getStorageSync('BaseLedId'); + const BasePort = uni.getStorageSync('BasePort'); + const BaseCrnId = uni.getStorageSync('BaseCrnId'); + const PROJ = uni.getStorageSync('UPROJ'); + const CURRENT = uni.getStorageSync('current'); + that.baseUrl = PROJ + that.baseIP = BaseIP + that.baseLedId = BaseLedId + that.basePort = BasePort + that.baseCrnId = BaseCrnId + that.current = CURRENT + this.getUrl() + this.getVisualized() + + }, + onLoad() { + setInterval(()=>{ + // this.getDate2() + // this.getInfo() + // this.getError() + // this.getInfo2() + // this.getError2() + // this.getUrl() + // this.controller() + this.getVisualized() + },1000) + setTimeout(()=>{ + console.log(this.result); + },3000) + }, + methods: { + // 鎷f枡/鐩樼偣鍏ュ簱 + pickIn(e) { + let _this = this + uni.request({ + url: `${_this.commonUrl}/agv/basDevp/visualized/container/pickIn`, + data: {devNo: e}, + method: 'POST', + success(res) { + } + }) + }, + // 瀹瑰櫒绂诲満 + containerMoveOut(e) { + let _this = this + let devNo = {devNo:[e]} + // console.log(JSON.stringify(devNo)); + uni.request({ + url: `${_this.commonUrl}/agv/basDevp/visualized/container/moveOut`, + data: JSON.stringify(devNo), + method: 'POST', + success(res) { + + } + }) + }, + floor() { + var temp = this.ck1 + this.ck1 = this.ck2 + this.ck2 = temp + if (this.ck1) { + this.rows = [{value: 'cs-101',name:'101'},{value: 'cs-102',name:'102'}] + } else { + this.rows = [{value: 'CS-305',name:'305'},{value: 'CS-306',name:'306'},{value: 'CS-307',name:'307'},{value: 'CS-308',name:'308'},{value: 'CS-309',name:'309'}] + } + }, + radioChange(evt) { + for (let i = 0; i < this.rows.length; i++) { + if (this.rows[i].value === evt.detail.value) { + this.current = evt.detail.value; + break; + } + } + }, + getVisualized() { + let that = this + let param = {stationCode: `${that.current}`} + uni.request({ + url: `${that.commonUrl}/agv/basDevp/visualized/list/auth`, + header: { + 'Access-Control-Allow-Origin': '*', + 'Access-Control-Allow-Methods': 'GET,POST,OPTIONS', + 'Access-Control-Allow-Headers': 'X-Request-with,Content-Type', + }, + sslVerify: false, + withCredentials: true, + method: 'POST', + data: JSON.stringify(param), + success(res) { + res = res.data + that.result = res + if (res.code === 200 && res.data.body.length>0) { + that.locs = []; + for (let k of res.data.body) { + for (let i of k.loc) { + if (i.agvWrkDetl) { + let a = i.agvWrkDetl.orderNo + if (RegExp(/{/).test(a)) { + i.agvWrkDetl.orderNo = JSON.parse(a) + } else { + i.agvWrkDetl.orderNo = [] + // console.log(i.agvWrkDetl); + i.agvWrkDetl.orderNo.push({anfme:i.agvWrkDetl.anfme,orderNo:a}) + } + } + if (i.agvWaitPakin) { + let a = i.agvWaitPakin.orderNo + if (RegExp(/{/).test(a)) { + i.agvWaitPakin.orderNo = JSON.parse(a) + } else { + i.agvWaitPakin.orderNo = [] + // console.log(i.agvWrkDetl); + i.agvWaitPakin.orderNo.push({anfme:i.agvWaitPakin.anfme,orderNo:a}) + } + } + if(i.locSts == 'F') { + i['color'] = 'pakin' + } + that.locs.push(i) + } + } + } + } + }) + }, + timeOuts() { + console.log(this.times); + }, + getUrl() { + this.commonUrl = this.baseHttp + this.baseIP + ':' +this.basePort + "/" +this.baseUrl + }, + getServerData() { + this.chartsDataLine1=JSON.parse(JSON.stringify(this.chartsData.Line)) + this.chartsDataPie2=JSON.parse(JSON.stringify(this.chartsData.Pie)) + }, + // 涓诲睆骞� + handle(type) { + this.homeViewShow = !this.homeViewShow + this.modeClass = type + }, + // 鎷f枡 + handle1(type) { + this.infoViewShow = !this.infoViewShow + this.modeClass = type + }, + // 寮傚父 + handle2(type) { + this.errorInfoViewShow = !this.errorInfoViewShow + this.modeClass = type + }, + // 閰嶇疆 + ejected () { + this.ejectShow = true + }, + // 鍙栨秷閰嶇疆 + ejectClose() { + this.ejectShow = false + }, + // 纭閰嶇疆 + ejectConfirm() { + uni.setStorageSync('BaseIp', this.baseIP); + uni.setStorageSync('BaseLedId', this.baseLedId); + uni.setStorageSync('BasePort',this.basePort); + uni.setStorageSync('BaseCrnId',this.baseCrnId); + uni.setStorageSync('UPROJ',this.baseUrl); + uni.setStorageSync('current',this.current); + this.getUrl() + this.ejectShow = false + }, + // 鏃ュ巻 鏈嶅姟鍣� + getDate2() { + let that = this + if(that.commonUrl == 'undefined') { + return + } + uni.request({ + url: that.commonUrl + "/monitor/date", + method:"GET", + success(result) { + var res = result.data.data + that.calendar = res.year + "骞�" + res.month + "鏈�" + res.day + "鏃� " + res.hour + ":" + res.minute + ":" + res.second + " " + res.week + that.currDate = res.year + "/" + res.month + "/" + res.day + }, + fail(res) { + console.log(res); + } + + }) + }, + } } </script> <style> + /* @import url("../../static/css/common.css"); */ + @import url("home.css"); + + .main-y { + font-size: 22rpx; + /* background-color: rgba(255, 255, 255, .05); */ + background-color: rgba(0, 189, 47, 0.3); + width:19vw; + height: 28vh; + margin-top: 4px; + backdrop-filter: blur(3px); + display: flex; + flex-direction: column; + align-items: stretch; + justify-content: center; + /* text-align: left; */ + } + + .main-b { + font-size: 24rpx; + background-color: rgba(255, 255, 255, .05); + /* background-color: rgba(0, 189, 47, 0.3); */ + width:19.8vw; + height: 33vh; + /* margin-top: 4px; */ + backdrop-filter: blur(3px); + display: flex; + flex-direction: column; + align-items: flex-start; + /* align-items: stretch; */ + /* justify-content: center; */ + } + .pakin { + background-color: rgba(0, 189, 47, 0.3); + } + + .y-it { + display: flex; + /* background-color: #FF5722; */ + } + .y-it-desc { + text-align: right; + /* background-color: #FF5722; */ + } + .margin { + margin-left: 10rpx; + } + + /* 鍒� */ + .flex-col { + display: flex; + flex-direction: column; + } + /* 琛� */ + .flex-row { + display: flex; + flex-direction: row; + } + .container{ width: 100vw; min-height: 100vh; - background-color: blue; - display: flex; - flex-direction: column; + background-color: #00163E; + color: #fff; + text-align: center; + } /* 涓昏鍥� */ .home-view { width: 100vw; min-height: 100vh; - background-color: black; + /* background-image: url(../../static/background.png); */ + background-size: 100vw 100vh; } + .home-right { + width: 50vw; + height: 89vh; + /* background-color: cadetblue; */ + } + .home-right-box { + width: 98%; + height: 98%; + } + .head { + width: 100vw; + height: 11vh; + font-size:4vw; + font-weight: 700; + display: flex; + align-items: center; + justify-content: center; + transform: scale(0.7); + } + .time-tools { + position: absolute; + right: 2%; + top: 2%; + font-size:1vw; + transform: scale(0.8); + } + .button-left { + position: absolute; + background-image: url(../../static/right.png); + background-size: 100% 100%; + top: 1.8%; + left: 21.3%; + width: 13.5%; + height: 8.5%; + transform: scaleX(-1); + } + .button-right { + position: absolute; + background-image: url(../../static/right.png); + background-size: 100% 100%; + top: 1.8%; + left: 65%; + width: 13.5%; + height: 8.5%; + } + .img-box { + width: 100%; + /* background-color: #666666; */ + display: flex; + flex-direction: row; + justify-content: flex-start; + flex-wrap: wrap; + font-size: 1vw; + } + .item-img { + width: 50%; + margin-top: 5%; + display: flex; + flex-direction: row; + /* background-color: #00ffff; */ + justify-content: flex-start; + align-items: flex-start; + } + .distance { + + } + .item-img image { + height: 5vw; + width: 5vw; + } + .progressBar { + margin-top: 9%; + /* width: 100%; */ + height: 20%; + background-color: #233751; + border-radius: 5vw; + } + .progress { + /* width: 90%; */ + height: 100%; + background-color: #FF5722; + border-radius: 5vw; + } + .charts-box { + width: 80%; + height: 24vh; + margin-left: 10%; + } + .charts-box-ring { + width: 50%; + height: 24vh; + /* background-color: #00ffff; */ + } + .sub-info { + font-size: 1.5vw; + } + .sub-info image { + width: 3.5vw; + height: 3.5vw; + } + .red{ + color: red + } + + + + + /* 鍏辩敤 */ + .main { + height: 100vh; + display: flex; + flex-wrap: wrap; + justify-content: space-around; + position: relative; + } + .mian-item { + width: 50%; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + } + .mian-item-box { + width: 98%; + height: 98%; + } + .box-item { + width: 100%; + margin-top: 4%; + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: flex-start; + } + .item-title { + font-size:1.5vw; + font-weight: 700; + } + .item-subTitle { + font-size:0.5vw; + text-indent: 0em; + } + .item-text { + font-size: 1vw; + text-indent: 2em; + letter-spacing: 1px; + line-height: 3vh; + } + /* 鍏ㄦ澘/鎷f枡淇℃伅 */ - .info { + .info-view { width: 100vw; min-height: 100vh; - background-color: #666666; + background-image: url(../../static/background.png); + background-size: 100vw 100vh; + } + .info-main { + width: 100vw; + height: 88vh; + display: flex; + justify-content: center; + align-items: center; + } + .info-box { + width: 98%; + height: 98%; } /* 寮傚父淇℃伅 */ - .error-info { + .error-info-view { width: 100vw; min-height: 100vh; - background-color: #00ffff; + background-image: url(../../static/background.png); + background-size: 100vw 100vh; + } + + /* 寮瑰嚭:閰嶇疆鍖哄煙 */ + .eject-mask { + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + position: fixed; + top: 0; + left: 0; + z-index: 999; + display: flex; + align-items: center; + justify-content: center; + } + .eject{ + position: relative; + width: 40vw; + height: 40vh; + background-color: #fff; + border-radius: 2rem; + } + .eject-title { + width: 100%; + height: 5vh; + line-height: 6vh; + font-size: 3vh; + font-weight: 700; + color: #606266; + text-align: center; + } + .eject-input { + margin-top: 2vh; + height: 25vh; + /* background-color: #00163E; */ + ::-webkit-scrollbar{display:none} + } + .item { + display: flex; + align-items: center; + margin: 1vh 0 0 0; + font-size: 1.5vw; + color: #363636; + } + .desc { + display: inline-block; + width: 40%; + text-align: right; + color: #606266; + + } + .input { + display: flex; + align-items: center; + padding-left: 5px; + padding-right: 5px; + width: 100%; + height: 3vh; + border: 0.1vh solid #cfd4dc; + margin-right: 20%; + text-align: start; + } + .eject-input input { + width: 100%; + height: 3vh; + font-size: 1vw; + + + } + .eject-button { + display: flex; + align-items: center; + position: absolute; + bottom: 0; + height: 6vh; + line-height: 6vh; + width: 100%; + border-top: 1px solid #ccc; + } + .button-item { + width: 50%; + height: 100%; + font-size: 1.5vw; + font-weight: bold; + text-align: center; + color: #909399; + } + .button-item:last-child { + color: #67C23A; + + border-left: 1px solid #ccc; + } + .info-box-text { + width: 100%;height: 100%; + display: flex;flex-direction: column;align-items: center;justify-content: center; + } + .info-box-text-item { + height: 20%;font-size: 8vh; + justify-content: center; + white-space: pre-line; + } + .textred{ + color: red; } </style> \ No newline at end of file -- Gitblit v1.9.1