From fdf0635d145941288edd4cfaa6da68324fa5129a Mon Sep 17 00:00:00 2001 From: zjj <3272660260@qq.com> Date: 星期二, 23 九月 2025 18:31:17 +0800 Subject: [PATCH] ## --- Monitor-APP/pages/home/home.vue | 1840 ++++++++++++++++++++++++++++++++--------------------------- 1 files changed, 997 insertions(+), 843 deletions(-) diff --git a/Monitor-APP/pages/home/home.vue b/Monitor-APP/pages/home/home.vue index 79655c0..873f6a1 100644 --- a/Monitor-APP/pages/home/home.vue +++ b/Monitor-APP/pages/home/home.vue @@ -3,10 +3,11 @@ <uni-transition :duration="duration" :mode-class="homeMode" :show="homeViewShow"> <view class="home-view"> <view class="head"> - <text>鑷姩浠撳簱WCS鐩戞帶骞冲彴</text> + <text>鏅鸿兘澶у睆鏄剧ず绯荤粺</text> </view> <!-- 鏃ュ巻 --> - <view class="time-tools">{{calendar}}</view> + <view class="time-tools">{{ calendar }}</view> + <view class="version">V:{{ version }}</view> <view class="button-left" @click="ejected()"></view> <view class="button-right" @click="ejected()"></view> <!-- 涓昏鍥� --> @@ -15,86 +16,45 @@ <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> + <text class="item-title">鏅鸿兘澶у睆鏄剧ず绯荤粺</text> + <text class="item-subTitle">Intelligent LargeScreen Display System</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: 5vw;;font-size: 2vw;">{{baseInfo.xDistance}}</view> - <view style="position: absolute;bottom: 0;left: 7vw;">m</view> - </view> - <view style="height: 100%;text-align: left;text-indent: 2em;">绱璧拌璺濈(绫�)</view> - </view> + <view style="width: 100%; display: flex" v-for="(item, i) in locList" :key="i"> + <view style="display: flex; justify-content: center; align-items: center; width: 48%; font-size: 1.3vw">鐗╂枡鐮�: {{ item.matnr }}</view> + <view style="display: flex; justify-content: center; align-items: center; width: 48%; font-size: 1.3vw">鏁伴噺: {{ item.matnrCount }}</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: 5vw;;font-size: 2vw;">{{baseInfo.yDistance}}</view> - <view style="position: absolute;bottom: 0;left: 7vw;">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: 5vw;;font-size: 2vw;">{{baseInfo.xDuration}}</view> - <view style="position: absolute;bottom: 0;left: 7vw;">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: 5vw;;font-size: 2vw;">{{baseInfo.yDuration}}</view> - <view style="position: absolute;bottom: 0;left: 7vw;">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-row" style="width: 100%"> <!-- 宸︿晶 --> - <view class="flex-col" style="align-items: flex-start;justify-content: flex-start;"> + <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 style="margin-left: auto"> <!-- 鐧惧垎姣� --> - <view class="flex-col" style="align-items: flex-end;justify-content: flex-end;" > + <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> + <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-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 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 style="position: absolute; bottom: 0; right: 0; font-size: 2.5vw; color: #ff5722"> + {{ baseInfo.used }} + </view> </view> </view> </view> @@ -103,121 +63,133 @@ </view> <view class="mian-item"> <view class="mian-item-box"> - <view style="width: 100%;height: 100%;"> - <view style="height: 35%;"> + <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-row" style="width: 100%"> <!-- 宸︿晶 --> - <view class="flex-col" style="align-items: flex-start;justify-content: flex-start;"> + <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 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 class="flex-col" style="align-items: flex-end; justify-content: flex-end"></view> </view> </view> <view class="charts-box"> - <qiun-data-charts type="line" :chartData="chartsDataLine1" :echartsH5="true" :echartsApp="true"/> + <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%;"> + <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;"> + <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> + <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="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"/> + <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;">10000</view> + <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/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;">10000</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/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;">10000</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鐩戞帶骞冲彴 - </view> - </y-box> + <view style="height: 2%"></view> + <view style="height: 18%; display: flex; justify-content: space-around; align-items: center"> + <view style="height: 50%"> + <image style="height: 100%" src="../../static/img/logo-bai.png" mode="aspectFit"></image> + </view> </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> + <text>{{ infoText.title }}</text> </view> <!-- 鏃ュ巻 --> - <view class="time-tools">{{calendar}}</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"> <y-box> - <view class="info-box-text"> - <view class="flex-col info-box-text-item">鐩爣绔欙細{{infoText.staNo}}</view> - <view class="flex-col info-box-text-item">鍟嗗搧缂栧彿锛歿{infoText.matnr}}</view> - <view class="flex-col info-box-text-item">鍟嗗搧鍚嶇О锛歿{infoText.maknx}}</view> - <view class="flex-col info-box-text-item">鍟嗗搧瑙勬牸锛歿{infoText.specs}}</view> - <view class="flex-col info-box-text-item">鏁伴噺锛歿{infoText.count}}</view> + <!-- 鏂囨湰瀹瑰櫒 --> + <view class="text-content"> + <!-- head --> + <view class="swiper-head"> + <view style="width: 30%">鎵樼洏鐮�: {{ infoText.barcode }}</view> + <view style="width: 20%">宸ヤ綔鍙�: {{ infoText.workNo }}</view> + <view style="width: 30%">婧愬簱浣�: {{ infoText.sourceLocNo }}</view> + <view style="width: 20%">鐩爣绔�: {{ infoText.staNo }}</view> + </view> + <!-- body --> + <view class="swiper-body"> + <swiper class="swiper-body-main" vertical="true" display-multiple-items="1" circular="true" :autoplay="true" :interval="3000" :duration="2000"> + <swiper-item class="swiper-item" v-for="(item, i) in swiperList" :key="i"> + <view style="width: 100%">{{ i + 1 }} / {{ swiperList.length }}</view> + <view style="width: 50%; font-size: 3vw">鐗╂枡缂栫爜: {{ item.matnr }}</view> + <view style="width: 50%; font-size: 3vw">鍚嶇О: {{ item.maknx }}</view> + <view style="width: 50%; font-size: 3vw">瑙勬牸: {{ item.specs }}</view> + <view style="width: 50%; font-size: 3vw">鎵规: {{ item.batch }}</view> + <view style="width: 50%; font-size: 3vw">閿�鍞崟鍙�: {{ item.orderNo }}</view> + <view style="width: 50%; font-size: 3vw">瀹㈡埛鍚嶇О: {{ item.customer }}</view> + <view style="width: 33%; font-size: 3vw">鏁伴噺: {{ item.count }}</view> + </swiper-item> + </swiper> + </view> </view> </y-box> </view> @@ -228,63 +200,66 @@ <uni-transition :duration="duration" :mode-class="errorInfoMode" :show="errorInfoViewShow"> <view class="error-info-view"> <view class="head"> - <text>{{infoText.title}}</text> + <text>{{ infoText.title }}</text> </view> <!-- 鏃ュ巻 --> - <view class="time-tools">{{calendar}}</view> + <view class="time-tools">{{ calendar }}</view> <view class="button-left"></view> <view class="button-right"></view> <!-- 涓讳綋 --> - <view class="info-main" > + <view class="info-main"> <view class="info-box"> <y-box> <view class="info-box-text"> - <view class="flex-col info-box-text-item">{{infoText.error}}</view> + <view class="flex-col info-box-text-item">{{ infoText.error }}</view> </view> </y-box> </view> </view> </view> </uni-transition> - <!-- 鑷畾涔夊脊鍑哄眰 --> <view class="eject-mask" v-show="ejectShow"> <view class="eject"> - <!-- 寮瑰嚭title --> <view class="eject-title">淇敼 / 閰嶇疆</view> - <!-- input --> - <view class="eject-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"> + <input type="text" v-model="baseIP" /> </view> </view> <view class="item"> - <view class="desc">port锛�</view> + <view class="desc">Wcsport锛�</view> <view class="input"> - <input type="text" v-model="basePort"> + <input type="text" v-model="basePort" /> + </view> + </view> + <view class="item"> + <view class="desc">WcsUrl锛�</view> + <view class="input"> + <input type="text" v-model="baseUrl" /> + </view> + </view> + <view class="item"> + <view class="desc">Wmsport锛�</view> + <view class="input"> + <input type="text" v-model="wmsPort" /> + </view> + </view> + <view class="item"> + <view class="desc">WmsUrl锛�</view> + <view class="input"> + <input type="text" v-model="wmsUrl" /> </view> </view> <view class="item"> <view class="desc">ledId锛�</view> <view class="input"> - <input type="text" v-model="baseLedId"> + <input type="text" v-model="baseLedId" /> </view> </view> - <view class="item"> - <view class="desc">CrnId锛�</view> - <view class="input"> - <input type="text" v-model="baseCrnId"> - </view> - </view> - <view class="item"> - <view class="desc">Url锛�</view> - <view class="input"> - <input type="text" v-model="baseUrl"> - </view> - </view> - </view> + </scroll-view> <!-- button --> <view class="eject-button"> <view class="button-item" @click="ejectClose">鍙� 娑�</view> @@ -292,730 +267,909 @@ </view> </view> </view> + <view> + <!-- 鎻愮ず绐楃ず渚� --> + <uni-popup ref="upVersion" type="dialog"> + <uni-popup-dialog :type="msgType" title="閫氱煡" :content="dialogContent" @confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog> + </uni-popup> + </view> + <view style="color: #fff; position: fixed; bottom: 10px; left: 10px" v-show="timeOut">杩炴帴瓒呮椂锛屾鍦ㄩ噸鏂板缓绔嬮摼鎺�:: {{ times }}</view> </view> </template> - <script> - import demodata from '@/mockdata/demodata.json'; - import ycqdata from '@/pages/index/data.json'; - export default { - data() { - return { - series: [], - homeViewShow: true, - infoViewShow: false , - errorInfoViewShow: false, - homeMode: [], - infoMode: [], - errorInfoMode: [], - baseInfo: { - xDistance: 1, - yDistance: 2, - xDuration: 3, - yDuration: 4, - usedPr: 50, - used: 3537 +import WebSocketUtil from './uniWebSocket'; +export default { + data() { + return { + 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: [] }, - chartsData: { - "Line": { - "categories": [], - "series": [] - }, - "Pie": { - "series": [{ - "data": [] - }] - }, - }, - duration: 1000, - calendar: '', - ringOpts:{}, - chartsDataLine1: {}, - chartsDataPie2: {}, - fontSize: '', - height: '', - showCharts: false, - ejectShow: false, - baseIP: '', - basePort: '', - baseLedId: '', - baseCrnId: '', - baseUrl: '', - info: null, - error: null, - infoType: 0, - text: '', - infoText: { - title: '鍏ㄦ澘鍑哄簱', - staNo: "200", - matnr: "300", - maknx: "400", - specs: "500", - count: "600", - error: "鍒╃敤绔嬩綋浠撳簱璁惧鍙疄鐜颁粨搴撻珮灞傚悎鐞嗗寲銆佸瓨鍙栬嚜鍔ㄥ寲銆佹搷浣滅畝渚垮寲锛涖��" - }, - - - + Pie: { + series: [ + { + data: [] + } + ] + } + }, + duration: 300, + calendar: '', + ringOpts: {}, + chartsDataLine1: {}, + chartsDataPie2: {}, + ejectShow: false, + baseIP: '', + basePort: '', + baseLedId: '', + baseUrl: '', + infoType: 0, + infoText: { + title: '', + staNo: '', + matnr: '', + maknx: '', + specs: '', + count: '', + error: '', + barcode: '' + }, + swiperList: [], + timeOut: false, + times: 0, + currDate: '', + locList: [], + oldHours: '', + oldMin: '', + socketClient: null, + version: '', + socketUrl: '', + msgType: 'success', + filename: '', + dialogContent: '', + wmsUrl: '', + wmsPort: '', + switchDebounceTimer: null, + viewSwitchInProgress: false + }; + }, + onShow() { + // 闅愯棌鏃堕棿,鐢甸噺,淇″彿绛� + // #ifdef APP-PLUS + plus.navigator.setFullscreen(true); + // #endif + this.getVersion(); + var ip = this.getIp(); + console.log(ip); + }, + 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 WMSURL = uni.getStorageSync('wmsUrl'); + const WMSPORT = uni.getStorageSync('wmsPort'); + that.baseUrl = PROJ; + that.baseIP = BaseIP; + that.baseLedId = BaseLedId; + that.basePort = BasePort; + that.baseCrnId = BaseCrnId; + that.wmsUrl = WMSURL; + that.wmsPort = WMSPORT; + }, + created() { + 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 WMSURL = uni.getStorageSync('wmsUrl'); + const WMSPORT = uni.getStorageSync('wmsPort'); + that.baseUrl = PROJ; + that.baseIP = BaseIP; + that.baseLedId = BaseLedId; + that.basePort = BasePort; + that.baseCrnId = BaseCrnId; + that.wmsUrl = WMSURL; + that.wmsPort = WMSPORT; + that.uniWebSocket(); + // that.webSockerInit() + }, + onLoad() { + setInterval(() => { + this.getServerData(); + this.controller(); + }, 1000); + + setInterval(() => { + setTimeout(() => { + plus.runtime.restart(); + }, 100); + }, 1000 * 60 * 60 * 4); + + // 姣忓皬鏃惰Е鍙戜竴娆″瀮鍦惧洖鏀� + const memoryCleanerId = setInterval(() => { + if (plus.os.name.toLowerCase() === 'android') { + // 寮哄埗瑙﹀彂 GC + plus.android.importClass('java.lang.System'); + plus.android.invoke('java.lang.System', 'gc'); + console.log('鎵嬪姩瑙﹀彂 GC'); + } + // 娓呯悊涓嶅啀闇�瑕佺殑澶у瀷鏁版嵁瀵硅薄 + if (this.oldData && this.oldData.length > 100) { + this.oldData = []; + } + }, 30000 * 10); // 姣忓皬鏃舵墽琛屼竴娆� + }, + methods: { + getIp() { + var ip = null; + if (plus.os.name === 'Android') { + try { + const InetAddress = plus.android.importClass('java.net.InetAddress'); + const NetworkInterface = plus.android.importClass('java.net.NetworkInterface'); + const Collections = plus.android.importClass('java.util.Collections'); + + let interfaces = NetworkInterface.getNetworkInterfaces(); + let en = Collections.list(interfaces); // Java ArrayList + let ipEth = null; // 鏈夌嚎 + let ipWifi = null; // Wi-Fi + let ipOther = null; // 鍏滃簳 + let size = plus.android.invoke(en, 'size'); + for (let i = 0; i < size; i++) { + let intf = plus.android.invoke(en, 'get', i); + let name = plus.android.invoke(intf, 'getName'); // eth0 / wlan0 / lo 绛� + let enumIpAddr = plus.android.invoke(intf, 'getInetAddresses'); + let enumList = Collections.list(enumIpAddr); + let listSize = plus.android.invoke(enumList, 'size'); + for (let j = 0; j < listSize; j++) { + let inetAddress = plus.android.invoke(enumList, 'get', j); + if (!plus.android.invoke(inetAddress, 'isLoopbackAddress')) { + let hostAddress = plus.android.invoke(inetAddress, 'getHostAddress'); + // 鍙彇 IPv4 + if (hostAddress.indexOf(':') === -1) { + if (name.startsWith('eth') && !ipEth) { + ipEth = hostAddress; + } else if (name.startsWith('wlan') && !ipWifi) { + ipWifi = hostAddress; + } else if (!ipOther) { + ipOther = hostAddress; + } + } + } + } + } + ip = ipEth || ipWifi || ipOther || null; + return ip; + } catch (e) { + console.log('鑾峰彇IP澶辫触锛�', e); + return ip; + } + } else { + return ip; } }, - onShow() { - // 闅愯棌鏃堕棿,鐢甸噺,淇″彿绛� - // #ifdef APP-PLUS - plus.navigator.setFullscreen(true) - // #endif + uniWebSocket() { + let that = this; + that.commonUrl = that.baseIP + ':' + that.basePort + '/' + that.baseUrl; + that.socketUrl = 'ws://' + that.commonUrl + '/led/' + that.baseLedId; + // 鍒涘缓WebSocket瀹炰緥 + that.socketClient = new WebSocketUtil(that.socketUrl, { + // 蹇冭烦闂撮殧锛岄粯璁�30绉� + heartbeatInterval: 30000, + // 閲嶈繛闂撮殧锛岄粯璁�3绉� + reconnectInterval: 3000, + // 鏈�澶ч噸杩炴鏁帮紝-1琛ㄧず鏃犻檺閲嶈繛 + maxReconnectAttempts: -1, + // 娑堟伅鍥炶皟 + onMessage: (res) => { + try { + const data = JSON.parse(res.data); + that.showDate(data); + // 澶勭悊娑堟伅... + } catch (e) { + console.error('瑙f瀽娑堟伅澶辫触', e); + } + }, + // 杩炴帴鎵撳紑鍥炶皟 + onOpen: (res) => { + that.timeOut = false; + that.times = 0; + console.log('WebSocket宸茶繛鎺�', res); + }, + // 杩炴帴閿欒鍥炶皟 + onError: (error) => { + console.error('WebSocket閿欒', error); + }, + // 杩炴帴鍏抽棴鍥炶皟 + onClose: (res) => { + that.timeOut = true; + that.times = that.times + 1; + that.infoType = 0; + console.log('WebSocket宸插叧闂�', res); + }, + // 閲嶈繛鍥炶皟 + onReconnect: (info) => { + console.log(`WebSocket閲嶈繛(${info.attempts}/${info.maxAttempts})`); + } + }); + + // 寤虹珛杩炴帴 + that.socketClient.connect(); }, - 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'); - that.baseUrl = PROJ - that.baseIP = BaseIP - that.baseLedId = BaseLedId - that.basePort = BasePort - that.baseCrnId = BaseCrnId - this.getUrl() - console.log(that.commonUrl); - }, - onLoad() { - this.getServerData() - this.getDate() - setInterval(()=>{ - this.getDate() - this.getInfo() - this.getError() - // 娴嬭瘯鐢� - // this.getInfo2() - // this.getError2() - this.controller() - },1000) - setInterval(()=>{ - // this.controller() - },2000) - }, - methods: { - getUrl() { - this.commonUrl = this.baseHttp + this.baseIP + ':' +this.basePort + "/" +this.baseUrl - }, - getServerData() { - this.chartsDataLine1=JSON.parse(JSON.stringify(demodata.Line)) - this.chartsDataPie2=JSON.parse(JSON.stringify(demodata.PieA)) - }, - // 鑾峰彇閿欒淇℃伅 - getInfo2() { - let that = this - var result = ycqdata.dataInfo2 - var res = result.data - if (res.data && res.data !== "") { + showDate(data) { + const that = this; + if (data.type === 'default') { + that.chartsData.Pie.series[0].data = data.pie; + that.baseInfo.stockCount = data.stockCunt; + that.baseInfo.emptyCount = data.emptyCount; + that.baseInfo.noneCount = data.noneCount; + that.baseInfo.used = data.used; + that.baseInfo.usedPr = data.usedPr; + + that.chartsData.Line.categories = [ + that.getDateFormat(-11), + that.getDateFormat(-10), + that.getDateFormat(-9), + that.getDateFormat(-8), + that.getDateFormat(-7), + that.getDateFormat(-6), + that.getDateFormat(-5), + that.getDateFormat(-4), + that.getDateFormat(-3), + that.getDateFormat(-2), + that.getDateFormat(-1), + that.getDateFormat(0) + ]; + that.chartsData.Line.series = data.rows; + that.calendar = data.year + '骞�' + data.month + '鏈�' + data.day + '鏃� ' + data.hour + ':' + data.minute + ':' + data.second + ' ' + data.week; + that.currDate = data.year + '/' + data.month + '/' + data.day; + that.locList = data.inventoryData; + that.oldHours = data.hour; + that.oldMin = data.minute; + } else if (data.type === 'error') { + if (data.errMsg && data.errMsg !== '') { + var errorInfo = data.errMsg; + if (that.infoType == 1) { + that.infoType = 3; + that.infoText.title = '鍏朵粬淇℃伅'; + // that.infoText.title = "寮傚父" + that.infoText.error = errorInfo; + return; + } + that.infoType = 2; + that.infoText.title = '鍏朵粬淇℃伅'; + // that.infoText.title = "寮傚父" + that.infoText.error = errorInfo; + } else { + if (that.infoType == 1) { + return; + } + that.infoType = 0; + } + } else if (data.type === 'task') { + if (data.taskList && data.taskList !== '' && data.taskList.length != 0) { if (that.infoType == 2 || that.infoType == 3) { return; } // infoType1:鍙湁鎷f枡绛変俊鎭� - that.infoType = 1 - if (res.data[0].ioType === 101) { - that.infoText.title = '鍏ㄦ澘鍑哄簱' - } else if(res.data[0].ioType === 103) { - that.infoText.title = '妫�鏂欏嚭搴�' + that.infoType = 1; + if (data.taskList[0].ioType === 101) { + that.infoText.title = '鍏ㄦ澘鍑哄簱'; + } else if (data.taskList[0].ioType === 103) { + that.infoText.title = '鎷f枡鍑哄簱'; + } else if (data.taskList[0].ioType === 107) { + that.infoText.title = '鐩樼偣鍑哄簱'; + } else if (data.taskList[0].ioType === 1) { + that.infoText.title = '鍏ュ簱'; + } else if (data.taskList[0].ioType === 10) { + that.infoText.title = '绌烘墭鍏ュ簱'; + } else if (data.taskList[0].ioType === 110) { + that.infoText.title = '绌烘墭鍑哄簱'; + } else if (data.taskList[0].ioType === 104) { + that.infoText.title = '骞舵澘鍑哄簱'; + } else if (data.taskList[0].ioType === 54) { + that.infoText.title = '骞舵澘鍏ュ簱'; } - that.infoText.staNo = res.data[0].staNo - that.infoText.specs = res.data[0].matDtos[0].specs - that.infoText.maknx = res.data[0].matDtos[0].maknx - that.infoText.count = res.data[0].matDtos[0].count + that.infoText.barcode = data.taskList[0].barcode; + that.infoText.workNo = data.taskList[0].workNo; + that.infoText.sourceLocNo = data.taskList[0].sourceLocNo; + that.infoText.staNo = data.taskList[0].staNo; + that.swiperList = data.taskList[0].matDtos; } else { if (that.infoType == 2 || that.infoType == 3) { return; } - that.infoType = 0 + that.infoType = 0; } - }, - getError2 () { - let that = this - let result = ycqdata.dataError2 - var res = result.data - if (res.data && res.data !== "") { - var errorInfo = res.data - if (that.infoType == 1) { - that.infoType = 3 - that.infoText.title = "寮傚父" - that.infoText.error = errorInfo - return + } + }, + getDateFormat(value) { + var date = new Date(this.currDate); // 鑾峰彇褰撳墠鏃堕棿 + date.setDate(date.getDate() + value); // 璁剧疆澶╂暟 -1 澶� + var m = date.getMonth() + 1; + var d = date.getDate(); + var newDate = m + '-' + d; + return newDate; + }, + + getServerData() { + this.chartsDataLine1 = JSON.parse(JSON.stringify(this.chartsData.Line)); + this.chartsDataPie2 = JSON.parse(JSON.stringify(this.chartsData.Pie)); + }, + // 鎺у埗鍣� + controller() { + // 闃叉姈澶勭悊锛岄伩鍏嶉绻佸垏鎹� + if (this.switchDebounceTimer) { + clearTimeout(this.switchDebounceTimer); + } + this.switchDebounceTimer = setTimeout(() => { + this.performViewSwitch(); + }, 100); + }, + + performViewSwitch() { + // 浣跨敤鐘舵�佹満妯″紡绠�鍖栬鍥惧垏鎹� + const viewStates = { + 0: () => this.showHomeView(), + 1: () => this.showInfoView(), + 2: () => this.showErrorView(), + 3: () => this.showErrorView() + }; + const switchAction = viewStates[this.infoType]; + if (switchAction && !this.viewSwitchInProgress) { + this.viewSwitchInProgress = true; + switchAction(); + // 缁熶竴鐨勫垏鎹㈠畬鎴愬鐞� + setTimeout(() => { + this.viewSwitchInProgress = false; + }, this.duration + 100); + } + }, + + showHomeView() { + this.infoViewShow = false; + this.errorInfoViewShow = false; + this.infoMode = ['fade', 'slide-bottom']; + this.errorInfoMode = ['fade', 'slide-bottom']; + setTimeout(() => { + this.homeViewShow = true; + this.homeMode = ['fade', 'slide-bottom']; + }, this.duration); + }, + + showInfoView() { + this.homeViewShow = false; + this.errorInfoViewShow = false; + this.homeMode = ['fade', 'slide-bottom']; + this.errorInfoMode = ['fade', 'slide-bottom']; + setTimeout(() => { + this.infoViewShow = true; + this.infoMode = ['fade', 'slide-bottom']; + }, this.duration); + }, + + showErrorView() { + this.homeViewShow = false; + this.infoViewShow = false; + this.homeMode = ['fade', 'slide-bottom']; + this.infoMode = ['fade', 'slide-bottom']; + setTimeout(() => { + this.errorInfoViewShow = true; + this.errorInfoMode = ['fade', 'slide-bottom']; + }, this.duration); + }, + // 閰嶇疆 + 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('wmsUrl', this.wmsUrl); + uni.setStorageSync('wmsPort', this.wmsPort); + + this.ejectShow = false; + }, + //妫�娴嬪綋鍓嶅钩鍙帮紝濡傛灉鏄畨鍗撳垯鍚姩瀹夊崜鏇存柊 + getVersion() { + let that = this; + uni.getSystemInfo({ + success: (res) => { + if (res.platform == 'android') { + that.AndroidCheckUpdate(); } - that.infoType = 2 - that.infoText.title = "寮傚父" - that.infoText.error = errorInfo - } else { - if (that.infoType == 1) { - return - } - that.infoType = 0 } - }, - getInfo() { - let that = this - uni.request({ - url: that.commonUrl + "/monitor/led", - method:"GET", - data: {ledId:that.baseLedId}, - success(result) { - var res = result.data - if (res.data && res.data !== "") { - if (that.infoType == 2 || that.infoType == 3) { - return; - } - // infoType1:鍙湁鎷f枡绛変俊鎭� - that.infoType = 1 - if (res.data[0].ioType === 101) { - that.infoText.title = '鍏ㄦ澘鍑哄簱' - } else if(res.data[0].ioType === 103) { - that.infoText.title = '妫�鏂欏嚭搴�' - } - that.infoText.staNo = res.data[0].staNo - that.infoText.specs = res.data[0].matDtos[0].specs - that.infoText.maknx = res.data[0].matDtos[0].maknx - that.infoText.count = res.data[0].matDtos[0].count - } else { - if (that.infoType == 2 || that.infoType == 3) { - return; - } - that.infoType = 0 - } + }); + }, + // 鑾峰彇褰撳墠鐗堟湰鍙� + AndroidCheckUpdate() { + let that = this; + plus.runtime.getProperty(plus.runtime.appid, (wgtinfo) => { + that.version = wgtinfo.version; //瀹㈡埛绔増鏈彿 + }); + setTimeout(() => { + that.getUpdateVersion(); + }, 100); + }, + // 鏍¢獙鐗堟湰 + getUpdateVersion() { + let that = this; + let type = 1; + if (that.baseUrl == 'http://undefined:undefined/undefined') { + return; + } + const wms = 'http://' + that.baseIP + ':' + that.wmsPort + '/' + that.wmsUrl; + console.log(wms); + let url = wms + '/appVersion/checkUpdate/' + that.version + '/' + type; + uni.request({ + url: url, + method: 'GET', + success(res) { + console.log(res); + var res = res.data; + if (res.data) { + that.filename = res.data.path; + that.dialogContent = '鍙戠幇鏂扮増鏈�:' + res.data.version + ', 鏄惁绔嬪嵆鏇存柊'; + that.$refs.upVersion.open(); + } else { + uni.showToast({ + title: res.msg, + icon: 'none', + position: 'top' + }); } - }) - - }, - getError() { - let that = this - uni.request({ - url: that.commonUrl + "/monitor/led/error", - method:"GET", - success(result) { - var res = result.data - if (res.data && res.data !== "") { - var errorInfo = res.data - if (that.infoType == 1) { - that.infoType = 3 - that.infoText.title = "寮傚父" - that.infoText.error = errorInfo - return - } - that.infoType = 2 - that.infoText.title = "寮傚父" - that.infoText.error = errorInfo - } else { - if (that.infoType == 1) { - return - } - that.infoType = 0 - } - } - }) - - }, - // 鎺у埗鍣� - controller() { - switch(this.infoType) { - // 鏈変俊鎭� 浣� 娌℃湁閿欒淇℃伅 - case 1: - if (this.homeViewShow) { - this.homeViewShow = false - this.homeMode = ['fade', 'slide-bottom'] - setTimeout(()=>{ - this.infoViewShow = true - this.infoMode = ['fade', 'slide-bottom'] - },1000) - } else if (this.errorInfoViewShow) { - this.errorInfoViewShow = false - this.errorInfoMode = ['fade', 'slide-bottom'] - setTimeout(()=>{ - this.infoViewShow = true - this.infoMode = ['fade', 'slide-bottom'] - },1000) - } - - return; - // 鏈変俊鎭� 涓� 鏈夐敊璇俊鎭� - case 2: - if (this.homeViewShow) { - this.homeViewShow = false - this.homeMode = ['fade', 'slide-bottom'] - setTimeout(()=>{ - this.errorInfoViewShow = true - this.errorInfoMode = ['fade', 'slide-bottom'] - },1000) - } else if (this.infoViewShow) { - this.infoViewShow = false - this.infoMode = ['fade', 'slide-bottom'] - setTimeout(()=>{ - this.errorInfoViewShow = true - this.errorInfoMode = ['fade', 'slide-bottom'] - },1000) - } - return; - // 鏈変俊鎭� 涓� 鏈夐敊璇俊鎭� - case 3: - if (this.homeViewShow) { - this.homeViewShow = false - this.homeMode = ['fade', 'slide-bottom'] - setTimeout(()=>{ - this.errorInfoViewShow = true - this.errorInfoMode = ['fade', 'slide-bottom'] - },1000) - } else if (this.infoViewShow) { - this.infoViewShow = false - this.infoMode = ['fade', 'slide-bottom'] - setTimeout(()=>{ - this.errorInfoViewShow = true - this.errorInfoMode = ['fade', 'slide-bottom'] - },1000) - } - return; - default : - if (this.errorInfoViewShow) { - this.errorInfoViewShow = false - this.errorInfoMode = ['fade', 'slide-bottom'] - setTimeout(()=>{ - this.homeViewShow = true - this.homeMode = ['fade', 'slide-bottom'] - },1000) - } else if (this.infoViewShow) { - this.infoViewShow = false - this.infoMode = ['fade', 'slide-bottom'] - setTimeout(()=>{ - this.homeViewShow = true - this.homeMode = ['fade', 'slide-bottom'] - },1000) - } - return; } - - }, - // 涓诲睆骞� - 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); - this.getUrl() - this.ejectShow = false - }, - // 鏃ュ巻 - getDate() { - var dt = new Date(); - var year,month,day,hours,minutes,seconds,weeks - year = dt.getFullYear(); - month = (dt.getMonth()+1) < 10 ? '0'+ (dt.getMonth()+1) : (dt.getMonth()+1); - day = dt.getDate() < 10 ? '0'+dt.getDate() : dt.getDate(); - hours = dt.getHours() < 10 ? '0' + dt.getHours() : dt.getHours(); - minutes = dt.getMinutes() < 10 ? '0' + dt.getMinutes() : dt.getMinutes(); - seconds = dt.getSeconds() < 10 ? '0' + dt.getSeconds() : dt.getSeconds(); - weeks = dt.getDay(); - switch (weeks) { - case 0: weeks = "鏄熸湡鏃�"; break; - case 1: weeks = "鏄熸湡涓�"; break; - case 2: weeks = "鏄熸湡浜�"; break; - case 3: weeks = "鏄熸湡涓�"; break; - case 4: weeks = "鏄熸湡鍥�"; break; - case 5: weeks = "鏄熸湡浜�"; break; - default : weeks = "鏄熸湡鍏�"; - } - this.calendar = year + "骞�" + month + "鏈�" + day + "鏃� " + hours + ":" + minutes + ":" + seconds + " " + weeks - }, - getDateFormat(value) { - var date = new Date();// 鑾峰彇褰撳墠鏃堕棿 - date.setDate(date.getDate() + value);// 璁剧疆澶╂暟 -1 澶� - var m = date.getMonth() + 1 - var d = date.getDate() - var newDate = m + '-' + d - return newDate - }, - /*************** 鎶樼嚎鍥� *****************************************************************************************************/ - initlineChart() { - let that = this - uni.request({ - url: that.commonUrl + "/monitor/line/charts", - method:'GET', - success(result) { - var res = result.data - if (res.code === 200) { - that.chartsData.Line.categories = [ - that.getDateFormat(-11),that.getDateFormat(-10),that.getDateFormat(-9),that.getDateFormat(-8), - that.getDateFormat(-7),that.getDateFormat(-6),that.getDateFormat(-5),that.getDateFormat(-4), - that.getDateFormat(-3),that.getDateFormat(-2),that.getDateFormat(-1),that.getDateFormat(0),] - that.chartsData.Line.series = res.data.rows - } + }); + }, + dialogConfirm() { + this.$refs.upVersion.close(); + this.downWgt(); + }, + dialogClose() { + this.$refs.upVersion.close(); + }, + downWgt() { + let that = this; + const wms = 'http://' + that.baseIP + ':' + that.wmsPort + '/' + that.wmsUrl; + const downloadUrl = wms + '/appVersion/downloadApp/' + that.filename; + uni.showLoading({ + title: '鏇存柊涓�︹��' + }); + const downloadTask = uni.downloadFile({ + //鎵ц涓嬭浇 + url: downloadUrl, //涓嬭浇鍦板潃 + timeout: 1000 * 30, //30绉掕秴鏃舵椂闂� + success: (downloadResult) => { + //涓嬭浇鎴愬姛 + console.log(downloadResult); + that.showdownLine = false; + uni.hideLoading(); + if (downloadResult.statusCode == 200) { + uni.showModal({ + title: '', + content: '鏇存柊鎴愬姛锛岀‘瀹氱幇鍦ㄩ噸鍚悧锛�', + confirmText: '閲嶅惎', + confirmColor: '#EE8F57', + success: function (res) { + if (res.confirm == true) { + plus.runtime.install( + //瀹夎 + downloadResult.tempFilePath, + { + force: true + }, + function (res) { + utils.showToast('鏇存柊鎴愬姛锛岄噸鍚腑'); + plus.runtime.restart(); + } + ); } - }) - }, - /*************** 楗煎浘 *****************************************************************************************************/ - initPieChart() { - let that = this - uni.request({ - url: that.commonUrl + "/monitor/loc/rep", - method:'GET', - success(result) { - var res = result.data - if (res.code === 200) { - that.chartsData.Pie.series[0].data = res.data.pie - that.stockCount = res.data.stockCunt - that.emptyCount = res.data.emptyCount - that.noneCount = res.data.noneCount - that.used = res.data.used - that.usedPr = res.data.usedPr - } - } - }) - }, - getOther() { - let that = this - uni.request({ - // http://10.10.0.222:9090/jkwcs/monitor/led?ledId=186 - url: that.commonUrl + "/monitor/other", - data: { - crnId: that.baseCrnId, - ledId: that.baseLedId, - }, - success(result) { - console.log(result); - var res = result.data - if (res.code === 200) { - that.xDistance = res.data.xDistance - that.yDistance = res.data.yDistance - that.xDuration = res.data.xDuration - that.yDuration = res.data.yDuration - } else if (res.code === 403) { - - } else { - - } - } - }) - }, + } + }); + } else { + uni.hideLoading(); + that.showdownLine = false; + uni.showToast({ + title: '璇峰厛涓婁紶瀹夎鍖�', + icon: 'error' + }); + } + }, + fail: (err) => { + uni.hideLoading(); + that.showdownLine = false; + that.$u.toast(downloadResult.errMsg); + }, + complete: (com) => { + console.log(com); + } + }); + + // 涓嬭浇杩涘害 + downloadTask.onProgressUpdate((res) => { + that.downloadNum = res.progress; + console.log('涓嬭浇杩涘害' + that.downloadNum); + }); } - } +}; </script> <style> - /* @import url("../../static/css/common.css"); */ - /* 鍒� */ - .flex-col { - display: flex; - flex-direction: column; +@import url('home.css'); + +/* 鍒� */ +.flex-col { + display: flex; + flex-direction: column; +} + +/* 琛� */ +.flex-row { + display: flex; + flex-direction: row; +} + +.container { + width: 100vw; + min-height: 100vh; + background-color: #00163e; + color: #fff; + text-align: center; +} + +/* 涓昏鍥� */ +.home-view { + width: 100vw; + min-height: 100vh; + 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 { + height: 23vw; + 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: 60%; + height: 24vh; + /* background-color: #00ffff; */ +} + +.sub-info { + font-size: 1.5vw; +} + +.sub-info image { + width: 3.5vw; + height: 3.5vw; +} + +/* 鍏辩敤 */ +.main { + width: 100vw; + height: 88vh; + margin-top: 1vh; + display: flex; +} + +.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; +} + +.version { + position: absolute; + left: 1%; + top: 1%; + font-size: 1vw; + transform: scale(0.8); +} + +.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-view { + width: 100vw; + min-height: 100vh; + 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-view { + width: 100vw; + min-height: 100vh; + 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: 45vw; + height: 45vh; + 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; } - /* 琛� */ - .flex-row { - display: flex; - flex-direction: row; - } - - .container{ - width: 100vw; - min-height: 100vh; - background-color: #00163E; - color: #fff; - text-align: center; - - } - /* 涓昏鍥� */ - .home-view { - width: 100vw; - min-height: 100vh; - 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; - } - - - - - /* 鍏辩敤 */ - .main { - width: 100vw; - height: 88vh; - margin-top: 1vh; - display: flex; - - } - .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-view { - width: 100vw; - min-height: 100vh; - 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-view { - width: 100vw; - min-height: 100vh; - 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 { - - } - .item { - display: flex; - align-items: center; - margin: 2vh 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; - } -</style> \ No newline at end of file +} + +.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; +} +</style> -- Gitblit v1.9.1