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 | 1125 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++--- 1 files changed, 1,067 insertions(+), 58 deletions(-) diff --git a/Monitor-APP/pages/home/home.vue b/Monitor-APP/pages/home/home.vue index e11b002..a310e11 100644 --- a/Monitor-APP/pages/home/home.vue +++ b/Monitor-APP/pages/home/home.vue @@ -1,66 +1,1075 @@ <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> - <!-- 鍏ㄦ澘/鎷f枡淇℃伅 --> - <view class="info"> - + <view class="container"> + <!-- 鍏ㄦ澘/鎷f枡淇℃伅 --> + <uni-transition :duration="duration" :mode-class="infoMode" :show="infoViewShow"> + <view class="home-view"> + <view class="head"> + <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="info-main"> + <view class="info-box"> + <y-box> + <!-- 鏂囨湰瀹瑰櫒 --> + <view class="text-content"> + <!-- head --> + <view class="swiper-head"> + <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"> + <!-- swiper 涓�浜涜鏄� + circular 鏄惁閲囩敤琛旀帴婊戝姩锛屽嵆鎾斁鍒版湯灏惧悗閲嶆柊鍥炲埌寮�澶� + vertical 婊戝姩鏂瑰悜鏄惁涓虹旱鍚� + display-multiple-items 鍚屾椂鏄剧ず鐨勬粦鍧楁暟閲� --> + <swiper class="swiper-body-main" vertical="true" + 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> + </view> + </y-box> + </view> + </view> + </view> + </uni-transition> + <!-- 寮傚父淇℃伅 --> + <uni-transition :duration="duration" :mode-class="errorInfoMode" :show="errorInfoViewShow"> + <view class="error-info-view"> + <view class="head"> + <text>{{infoText.title}}</text> + </view> + <!-- 鏃ュ巻 --> + <view class="time-tools">{{calendar}}</view> + <view class="button-left"></view> + <view class="button-right"></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.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"> + <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">ledId锛�</view> + <view class="input"> + <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> + <!-- button --> + <view class="eject-button"> + <view class="button-item" @click="ejectClose">鍙� 娑�</view> + <view class="button-item" @click="ejectConfirm">纭� 璁�</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 class="error-info"></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> - 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)' + import demodata from '@/mockdata/demodata.json'; + import ycqdata from '@/pages/index/data.json'; + export default { + data() { + return { + type: 'center', + msgType: 'success', + messageType: 'success', + messageText: '杩欐槸涓�鏉℃垚鍔熸彁绀�', + dialogTitle: '', + value: '', + dialogContent: '纭寮�濮嬭绗旇ˉ璐х墿鏂欙紵', + matnr: '', + dialogType: 0, + series: [], + homeViewShow: false, + infoViewShow: true , + 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: '', + basePort: '', + baseLedId: '', + baseCrnId: '', + baseUrl: '', + info: null, + error: null, + infoType: 0, + text: '', + infoText: { + title: '', + staNo: "", + matnr: "", + maknx: "", + specs: "", + count: "", + error: "" + }, + swiperList: [ + + ], + inspect: 'inspectRed' + } + }, + 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'); + that.baseUrl = PROJ + that.baseIP = BaseIP + that.baseLedId = BaseLedId + that.basePort = BasePort + that.baseCrnId = BaseCrnId + this.getUrl() + }, + onLoad() { + setInterval(()=>{ + // this.getServerData() + // this.getDate2() + // this.getUrl() + // this.getInfo() + // this.getError() + // this.getInfo2() + // this.getError2() + this.getInfo3() + // this.getInfo4() + // this.controller() + },1000) + + // setInterval(()=>{ + // this.changeErrorShow() + // },5000) + + // setInterval(()=>{ + // this.getServerData() + // this.initlineChart() + // this.initPieChart() + // this.getOther() + // },600000) + }, + methods: { + // 鏃ュ巻 鏈嶅姟鍣� + getDate2() { + let that = this + if(that.commonUrl == 'undefined') { + return } - } - } + uni.request({ + url: that.commonUrl + "/monitor/date", + method:"GET", + success(result) { + // console.log(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) { + } + + }) + }, + // 寮�濮嬫寜閽� + 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() { + 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)) + }, + // 鑾峰彇閿欒淇℃伅 + getInfo2() { + let that = this + var result = ycqdata.dataInfo2 + 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.swiperList = res.data[0].matDtos + // that.infoText.matnr = res.data[0].matDtos[0].matnr + // 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 + } + }, + 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 + 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 + } + }, + getInfo() { + let that = this + uni.request({ + url: that.commonUrl + "/monitor/led", + method:"GET", + data: {ledId:that.baseLedId}, + success(result) { + // console.log(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 = '妫�鏂欏嚭搴�' + } else if(res.data[0].ioType === 107) { + that.infoText.title = '鐩樼偣鍑哄簱' + } + that.infoText.staNo = res.data[0].staNo + that.swiperList = res.data[0].matDtos + // that.infoText.matnr = res.data[0].matDtos[0].matnr + // 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 + } + } + }) + + }, + getError() { + let that = this + uni.request({ + url: that.commonUrl + "/monitor/led/error", + data: {ledId:that.baseLedId}, + method:"GET", + success(result) { + console.log(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.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 + } + } + }) + + }, + // 鎺у埗鍣� + 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 + } + } + }) + }, + /*************** 楗煎浘 *****************************************************************************************************/ + 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.baseInfo.stockCount = res.data.stockCunt + that.baseInfo.emptyCount = res.data.emptyCount + that.baseInfo.noneCount = res.data.noneCount + that.baseInfo.used = res.data.used + that.baseInfo.usedPr = res.data.usedPr + } + } + }) + }, + getOther() { + let that = this + uni.request({ + url: that.commonUrl + "/monitor/other", + data: { + crnId: that.baseCrnId, + ledId: that.baseLedId, + }, + success(result) { + var res = result.data + if (res.code === 200) { + that.baseInfo.xDistance = res.data.xDistance + that.baseInfo.yDistance = res.data.yDistance + that.baseInfo.xDuration = res.data.xDuration + that.baseInfo.yDuration = res.data.yDuration + } else if (res.code === 403) { + + } else { + + } + } + }) + }, + } + + } +</script> + +<style> + /* @import url("../../static/css/common.css"); */ + @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: #083870; + color: #fff; + text-align: center; + + } + /* 涓昏鍥� */ + .home-view { + width: 100vw; + min-height: 100vh; + /* background-image: url(../../static/head.png); + background-size: 50vw 10vh; + background-repeat: no-repeat; */ + } + .home-right { + width: 50vw; + height: 89vh; + /* background-color: cadetblue; */ + } + .home-right-box { + width: 98%; + height: 98%; + } + .head { + width: 100vw; + height: 11vh; + font-size:3vw; + font-weight: 700; + 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%; + top: 2%; + font-size:1vw; + transform: scale(0.8); + } + .button-left { + position: absolute; + background-image: url(../../static/headleft.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%; + background-color: #032246; + } + /* 寮傚父淇℃伅 */ + .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; + } + .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 { } -</script> - -<style> - .container{ - width: 100vw; - min-height: 100vh; - background-color: blue; - display: flex; - flex-direction: column; - } - /* 涓昏鍥� */ - .home-view { - width: 100vw; - min-height: 100vh; - background-color: black; - } - /* 鍏ㄦ澘/鎷f枡淇℃伅 */ - .info { - width: 100vw; - min-height: 100vh; - background-color: #666666; - } - /* 寮傚父淇℃伅 */ - .error-info { - width: 100vw; - min-height: 100vh; - background-color: #00ffff; - } -</style> \ No newline at end of file +</style> -- Gitblit v1.9.1