From e90b860aaa30bb3e5486618b447589eee75ff6ec Mon Sep 17 00:00:00 2001 From: baoshiwei <baoshiwei@shlanbao.cn> Date: 星期二, 07 十一月 2023 12:37:38 +0800 Subject: [PATCH] 机台监控和车间大屏优化 --- src/views/dry/dataDefine/DryEquipment.data.ts | 14 src/views/dry/bigScreen/BigEqp2222.vue | 2308 ++++++++++++++++++++++++++++++++++++ src/views/dry/bigScreen/BigWorkShop.vue | 325 ++++ src/views/dry/monitor/WorkShop.vue | 11 package.json | 1 .env.production | 2 src/views/dry/bigScreen/BigEqp.vue | 1075 ++++++++-------- src/views/dry/monitor/Eqp.vue | 4 src/views/system/dict/dict.data.ts | 2 9 files changed, 3,144 insertions(+), 598 deletions(-) diff --git a/.env.production b/.env.production index c6cd63b..be4611d 100644 --- a/.env.production +++ b/.env.production @@ -19,7 +19,7 @@ VITE_GLOB_API_URL=/herb #鍚庡彴鎺ュ彛鍏ㄨ矾寰勫湴鍧�(蹇呭~) -VITE_GLOB_DOMAIN_URL=https://dev.shlanbao.cn:8800/herb +VITE_GLOB_DOMAIN_URL=http://jeecg-boot-gateway:9999 # 鎺ュ彛鐖惰矾寰勫墠缂� VITE_GLOB_API_URL_PREFIX= diff --git a/package.json b/package.json index 1a061de..aeec10b 100644 --- a/package.json +++ b/package.json @@ -47,6 +47,7 @@ "@vueuse/core": "^8.3.0", "@vueuse/shared": "^8.3.0", "@zxcvbn-ts/core": "^2.0.1", + "animejs": "^3.2.1", "ant-design-vue": "^3.2.12", "axios": "^0.26.1", "china-area-data": "^5.0.1", diff --git a/src/views/dry/bigScreen/BigEqp.vue b/src/views/dry/bigScreen/BigEqp.vue index 42d74a3..db3904b 100644 --- a/src/views/dry/bigScreen/BigEqp.vue +++ b/src/views/dry/bigScreen/BigEqp.vue @@ -48,31 +48,6 @@ </div> </div> </div> - <div class="formula"> - <div class="formulaItem"> - <Icon style="color: yellow" icon="mdi:weight-kilogram" :size="35" /> - <div style="width: 4px"></div> - <div> - <div class="mainInfo2">{{ realData?.originWeight }} kg</div> - <div class="subhead2">鍒濆閲嶉噺</div> - </div> - </div> - <div class="formulaItem"> - <Icon style="color: deepskyblue" icon="ion:water-outline" :size="35" /> - <div> - <div class="mainInfo2">{{ realData?.initial }} %</div> - <div class="subhead2">鍒濆鍚按</div> - </div> - </div> - <div class="formulaItem"> - <Icon style="color: chocolate" icon="ps:clock" :size="32" /> - <div style="width: 4px"></div> - <div> - <div class="mainInfo2">{{ realData?.et }} 鍒�</div> - <div class="subhead2">棰勮鏃堕棿</div> - </div> - </div> - </div> <!-- <div class="eqpName">{{ realData?.herbName }}</div> <div class="eqpName">{{ realData?.feed }} 绛�</div> --> </dv-border-box7> @@ -83,8 +58,8 @@ <div id="fanFreq" style="width: 240px; height: 240px"></div> </div> </dv-border-box7> --> - <dv-border-box7 style="margin-left: 0px; width: 340px; height: 240px"> - <!-- <div class="chartTittle">鍚按鐜�</div> + <dv-border-box7 class="infoChart" style="margin-left: 0px"> + <div class="chartTittle">鍚按鐜�</div> <div class="outDiv" style="padding-top: 20px"> <div class="leftData"> <div class="center" style="height: 50%"> @@ -106,22 +81,7 @@ </div> <div id="moisture" style="width: 170px; height: 170px"></div> </div> - <div class="subhead2" style="margin-top: -37px; padding-left: 205px; font-weight: bold">瀹炴椂鍚按鐜�</div> --> - - <div> - <div class="timeProgress"> - <div class="flex"> - <div class="leftLabel">棰勮鏃堕棿</div> - <Progress :percent="30" size="small" status="active" /> - </div> - </div> - <div class="timeProgress"> - <div class="flex"> - <div class="leftLabel">褰撳墠闃舵</div> - <Progress :percent="50" size="small" status="active" /> - </div> - </div> - </div> + <div class="subhead2" style="margin-top: -37px; padding-left: 205px; font-weight: bold">瀹炴椂鍚按鐜�</div> </dv-border-box7> </div> <dv-border-box7 class="leftTop"> @@ -145,31 +105,46 @@ <div style=" font-size: 28px; - margin-top: 190px; + color: white; background-color: #1595ea; height: 60px; width: 180px; line-height: 60px; text-align: center; - border-radius: 5px; + border-radius: 10px; font-weight: bold; " > {{ statusTxt }} </div> + <div v-if="realData?.warning" style=" + margin-left: 100px; + font-size: 22px; + background: sandybrown; + height: 60px; + border-radius: 10px; + line-height: 0; + padding: 29px; + font-weight: bold;" > + {{ realData?.warnMsg }} + </div> + + + <div v-if="realData?.isError" - class="eqpInfoText blingbling" + class="eqpInfoText blingbling outDiv" style=" position: absolute; font-size: 30px; max-height: 200px; max-width: 720px; + margin-top: 300px; border-radius: 10px; background-color: #ce0000; color: white; - padding: 10px; + padding: 10px 30px; " > <div class="outDiv"> @@ -191,17 +166,13 @@ </div> </dv-border-box7> <dv-border-box7 class="leftMid"> - <!-- <div class="chartTittle">瀹炴椂杩涘害</div> --> - <!-- <div id="efficiencyLine" style="width: 848px; height: 180px; margin-top: -10px"></div> + <div class="chartTittle">瀹炴椂杩涘害</div> + <div id="efficiencyLine" style="width: 848px; height: 180px; margin-top: -10px"></div> <div style="height: 10px; display: flex; width: 848px; padding: 0 60px; justify-content: space-between"> <div style="width: 100px; height: 20px">{{ realData.dryTime | 0 }} min</div> <div style="width: 100px; height: 20px; text-align: right">{{ realData?.totalTime | 0 }} min</div> </div> - <div id="progressBar" style="width: 848px; height: 80px"></div> --> - - <div class="flex"> - <div style="width: 200px; height: 100px; border: 1px solid red; margin-top: -40px"> </div> - </div> + <div id="progressBar" style="width: 848px; height: 80px"></div> </dv-border-box7> <!-- <div class="outDiv"> @@ -419,111 +390,111 @@ const { toggle: toggleDom } = useFullscreen(domRef) const Timer = ref() const Timer2 = ref() - // const marks = ref<Record<number, any>>({ - // 0: '0掳C', - // 1: '', - // 2: '', - // 3: '', - // 4: '', - // 5: '', - // 6: '', - // 7: '', - // 8: '', - // 9: '', - // 10: '', - // 11: '', - // 12: '', - // 13: '', - // 14: '', - // 15: '', - // 16: '', - // 17: '', - // 18: '', - // 19: '', - // 20: '', - // 21: '', - // 22: '', - // 23: '', - // 24: '', - // 25: '25掳C', - // 26: '', - // 27: '', - // 28: '', - // 29: '', - // 30: '', - // 31: '', - // 32: '', - // 33: '', - // 34: '', - // 35: '', - // 36: '', - // 37: '', - // 38: '', - // 39: '', - // 40: '', - // 41: '', - // 42: '', - // 43: '', - // 44: '', - // 45: '', - // 46: '', - // 47: '', - // 48: '', - // 49: '', - // 50: '50掳C', - // 51: '', - // 52: '', - // 53: '', - // 54: '', - // 55: '', - // 56: '', - // 57: '', - // 58: '', - // 59: '', - // 60: '', - // 61: '', - // 62: '', - // 63: '', - // 64: '', - // 65: '', - // 66: '', - // 67: '', - // 68: '', - // 69: '', - // 70: '', - // 71: '', - // 72: '', - // 73: '', - // 74: '', - // 75: '75掳C', - // 76: '', - // 77: '', - // 78: '', - // 79: '', - // 80: '', - // 81: '', - // 82: '', - // 83: '', - // 84: '', - // 85: '', - // 86: '', - // 87: '', - // 88: '', - // 89: '', - // 90: '', - // 91: '', - // 92: '', - // 93: '', - // 94: '', - // 95: '', - // 96: '', - // 97: '', - // 98: '', - // 99: '', - // 100: '100掳C', - // }) + const marks = ref<Record<number, any>>({ + 0: '0掳C', + 1: '', + 2: '', + 3: '', + 4: '', + 5: '', + 6: '', + 7: '', + 8: '', + 9: '', + 10: '', + 11: '', + 12: '', + 13: '', + 14: '', + 15: '', + 16: '', + 17: '', + 18: '', + 19: '', + 20: '', + 21: '', + 22: '', + 23: '', + 24: '', + 25: '25掳C', + 26: '', + 27: '', + 28: '', + 29: '', + 30: '', + 31: '', + 32: '', + 33: '', + 34: '', + 35: '', + 36: '', + 37: '', + 38: '', + 39: '', + 40: '', + 41: '', + 42: '', + 43: '', + 44: '', + 45: '', + 46: '', + 47: '', + 48: '', + 49: '', + 50: '50掳C', + 51: '', + 52: '', + 53: '', + 54: '', + 55: '', + 56: '', + 57: '', + 58: '', + 59: '', + 60: '', + 61: '', + 62: '', + 63: '', + 64: '', + 65: '', + 66: '', + 67: '', + 68: '', + 69: '', + 70: '', + 71: '', + 72: '', + 73: '', + 74: '', + 75: '75掳C', + 76: '', + 77: '', + 78: '', + 79: '', + 80: '', + 81: '', + 82: '', + 83: '', + 84: '', + 85: '', + 86: '', + 87: '', + 88: '', + 89: '', + 90: '', + 91: '', + 92: '', + 93: '', + 94: '', + 95: '', + 96: '', + 97: '', + 98: '', + 99: '', + 100: '100掳C', + }) const eqps = ref([] as dryEquipment[]) - //console.log(`output->router.currentRoute.value.params.num `, router.currentRoute.value.query) + console.log(`output->router.currentRoute.value.params.num `, router.currentRoute.value.query) const eqp = ref({} as dryEquipment) const eqpNum = ref(router.currentRoute.value.query.num || 1) const userStore = useUserStore() @@ -543,11 +514,11 @@ statusGif = 'tmrefeng2' realData.value.herbImage = 'yaocai1.png' var moisChart: echarts.ECharts - // var waterChart: echarts.ECharts + var waterChart: echarts.ECharts var bellowsTempChart: echarts.ECharts // var fanFreqChart: echarts.ECharts - // var progressBarChart: echarts.ECharts + var progressBarChart: echarts.ECharts var efficiencyLineChart: echarts.ECharts var compareChart: echarts.ECharts @@ -555,19 +526,19 @@ function initCharts() { let domId = 'moisChart' let chartDom: HTMLElement = document.getElementById(domId) as HTMLElement - // let waterDom: HTMLElement = document.getElementById('moisture') as HTMLElement + let waterDom: HTMLElement = document.getElementById('moisture') as HTMLElement let bellowsTempDom: HTMLElement = document.getElementById('bellowsTemp') as HTMLElement // let fanFreqDom: HTMLElement = document.getElementById('fanFreq') as HTMLElement - // let progressBarDom: HTMLElement = document.getElementById('progressBar') as HTMLElement - // let efficiencyLineDom: HTMLElement = document.getElementById('efficiencyLine') as HTMLElement + let progressBarDom: HTMLElement = document.getElementById('progressBar') as HTMLElement + let efficiencyLineDom: HTMLElement = document.getElementById('efficiencyLine') as HTMLElement // let weightDom: HTMLElement = document.getElementById('weight') as HTMLElement let compaerDom: HTMLElement = document.getElementById('compare') as HTMLElement moisChart = echarts.init(chartDom) - // waterChart = echarts.init(waterDom) + waterChart = echarts.init(waterDom) bellowsTempChart = echarts.init(bellowsTempDom) // fanFreqChart = echarts.init(fanFreqDom) - // progressBarChart = echarts.init(progressBarDom) - // efficiencyLineChart = echarts.init(efficiencyLineDom) + progressBarChart = echarts.init(progressBarDom) + efficiencyLineChart = echarts.init(efficiencyLineDom) compareChart = echarts.init(compaerDom) const option = { @@ -734,39 +705,39 @@ }, ], } - // const waterOption = { - // series: [ - // { - // type: 'liquidFill', - // radius: '100%', - // //waveAnimation: false, - // amplitude: 3, - // animationDuration: 5, - // //animationDurationUpdate: 0, - // data: [0.56, 0.44, 0.32], - // shape: - // 'path://M828.817,706.209C828.817,881.725,686.98,1024,512,1024c-174.98,0-316.817-142.275-316.817-317.791C195.183,530.74,512,0,512,0s316.817,530.74,316.817,706.209z', - // outline: { - // show: false, - // }, - // label: { - // // formatter: function () { - // // //console.log(`output->params`,params,mois.value) + const waterOption = { + series: [ + { + type: 'liquidFill', + radius: '100%', + //waveAnimation: false, + amplitude: 3, + animationDuration: 5, + //animationDurationUpdate: 0, + data: [0.56, 0.44, 0.32], + shape: + 'path://M828.817,706.209C828.817,881.725,686.98,1024,512,1024c-174.98,0-316.817-142.275-316.817-317.791C195.183,530.74,512,0,512,0s316.817,530.74,316.817,706.209z', + outline: { + show: false, + }, + label: { + // formatter: function () { + // //console.log(`output->params`,params,mois.value) - // // return ( - // // '' + - // // // +'鍒濆'+(mois.value[0]*100).toFixed(2) + '%\n\n\n' - // // (mois.value[1] * 100).toFixed(2) + - // // '%' - // // // + '\n\n\n鐩爣'+(mois.value[2]*100).toFixed(2) + '%' - // // ) - // // }, - // fontSize: 20, - // //position: ['50%',(100-mois.value[1]*100).toFixed(2) + '%'], - // }, - // }, - // ], - // } + // return ( + // '' + + // // +'鍒濆'+(mois.value[0]*100).toFixed(2) + '%\n\n\n' + // (mois.value[1] * 100).toFixed(2) + + // '%' + // // + '\n\n\n鐩爣'+(mois.value[2]*100).toFixed(2) + '%' + // ) + // }, + fontSize: 20, + //position: ['50%',(100-mois.value[1]*100).toFixed(2) + '%'], + }, + }, + ], + } const bellowsOption = { series: [ @@ -980,253 +951,253 @@ // ], // } - // const progressBarOption = { - // // tooltip: { - // // trigger: 'axis', - // // axisPointer: { - // // // Use axis to trigger tooltip - // // type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow' - // // }, - // // }, - // // color: [ - // // '#0653F6', - // // // '#1B61E7', - // // '#3673D5', - // // // '#4A80C8', - // // '#608FB8', - // // // '#719BAD', - // // '#82A6A1', - // // // '#8DAD9A', - // // '#9CB790', - // // // '#A7BE88', - // // '#B3C681', - // // '#CAD671', - // // '#DBE165', - // // ], - // animation: false, // 鍏抽棴鍔ㄧ敾 - // color: ['#397FD7', '#2D8CDE', '#239CE5', '#1DA4E8', '#14B2EF', '#0BC4FA', '#02D2FF', '#19EEFF', '#33FAFF', '#5EFFF8'], - // grid: { - // top: '12%', - // left: '20', - // right: '55', - // bottom: '3%', - // containLabel: true, - // }, - // xAxis: { - // min: 0, - // max: 150, - // show: false, - // type: 'value', - // axisLine: { - // show: false, - // }, - // axisTick: { - // show: false, - // }, - // }, - // yAxis: { - // show: false, - // axisLine: { - // show: false, - // }, - // axisTick: { - // show: false, - // }, - // type: 'category', - // data: ['鏃堕棿'], - // }, - // series: [ - // // { - // // name: '绗竴闃舵', - // // type: 'bar', - // // stack: 'total', - // // label: { - // // show: true, - // // }, - // // barWidth: 26, - // // emphasis: { - // // focus: 'series', - // // }, - // // data: [30], - // // }, - // // { - // // name: '绗簩闃舵', - // // type: 'bar', - // // stack: 'total', - // // label: { - // // show: true, - // // }, - // // emphasis: { - // // focus: 'series', - // // }, - // // data: [30], - // // }, - // // { - // // name: 'Affiliate Ad', - // // type: 'bar', - // // stack: 'total', - // // label: { - // // show: true, - // // }, - // // emphasis: { - // // focus: 'series', - // // }, - // // data: [20], - // // }, - // // { - // // name: 'Video Ad', - // // type: 'bar', - // // stack: 'total', - // // label: { - // // show: true, - // // }, - // // emphasis: { - // // focus: 'series', - // // }, - // // data: [15], - // // }, - // // { - // // name: 'Search Engine', - // // type: 'bar', - // // stack: 'total', - // // label: { - // // show: true, - // // }, - // // emphasis: { - // // focus: 'series', - // // }, - // // data: [10], - // // }, - // // { - // // name: 'df Engine', - // // type: 'bar', - // // stack: 'total', - // // label: { - // // show: true, - // // }, - // // emphasis: { - // // focus: 'series', - // // }, - // // data: [5], - // // }, - // // { - // // name: 'df Engine', - // // type: 'bar', - // // stack: 'total', - // // label: { - // // show: true, - // // }, - // // emphasis: { - // // focus: 'series', - // // }, - // // data: [5], - // // }, - // // { - // // name: 'df Engine', - // // type: 'bar', - // // stack: 'total', - // // label: { - // // show: true, - // // }, - // // emphasis: { - // // focus: 'series', - // // }, - // // data: [ - // // { - // // value: 35, - // // itemStyle: { - // // color: '#c0c0c0', - // // }, - // // }, - // // ], - // // }, - // ], - // } + const progressBarOption = { + // tooltip: { + // trigger: 'axis', + // axisPointer: { + // // Use axis to trigger tooltip + // type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow' + // }, + // }, + // color: [ + // '#0653F6', + // // '#1B61E7', + // '#3673D5', + // // '#4A80C8', + // '#608FB8', + // // '#719BAD', + // '#82A6A1', + // // '#8DAD9A', + // '#9CB790', + // // '#A7BE88', + // '#B3C681', + // '#CAD671', + // '#DBE165', + // ], + animation: false, // 鍏抽棴鍔ㄧ敾 + color: ['#397FD7', '#2D8CDE', '#239CE5', '#1DA4E8', '#14B2EF', '#0BC4FA', '#02D2FF', '#19EEFF', '#33FAFF', '#5EFFF8', '#60FFFE', '#64FAFF', '#70FFFF', '#7BFFFF', '#88FFFD', '#97FFFF', '#A5FFFD', '#B1FFFF', '#BFFFFF', '#CAFFFF'], + grid: { + top: '12%', + left: '20', + right: '55', + bottom: '3%', + containLabel: true, + }, + xAxis: { + min: 0, + max: 150, + show: false, + type: 'value', + axisLine: { + show: false, + }, + axisTick: { + show: false, + }, + }, + yAxis: { + show: false, + axisLine: { + show: false, + }, + axisTick: { + show: false, + }, + type: 'category', + data: ['鏃堕棿'], + }, + series: [ + // { + // name: '绗竴闃舵', + // type: 'bar', + // stack: 'total', + // label: { + // show: true, + // }, + // barWidth: 26, + // emphasis: { + // focus: 'series', + // }, + // data: [30], + // }, + // { + // name: '绗簩闃舵', + // type: 'bar', + // stack: 'total', + // label: { + // show: true, + // }, + // emphasis: { + // focus: 'series', + // }, + // data: [30], + // }, + // { + // name: 'Affiliate Ad', + // type: 'bar', + // stack: 'total', + // label: { + // show: true, + // }, + // emphasis: { + // focus: 'series', + // }, + // data: [20], + // }, + // { + // name: 'Video Ad', + // type: 'bar', + // stack: 'total', + // label: { + // show: true, + // }, + // emphasis: { + // focus: 'series', + // }, + // data: [15], + // }, + // { + // name: 'Search Engine', + // type: 'bar', + // stack: 'total', + // label: { + // show: true, + // }, + // emphasis: { + // focus: 'series', + // }, + // data: [10], + // }, + // { + // name: 'df Engine', + // type: 'bar', + // stack: 'total', + // label: { + // show: true, + // }, + // emphasis: { + // focus: 'series', + // }, + // data: [5], + // }, + // { + // name: 'df Engine', + // type: 'bar', + // stack: 'total', + // label: { + // show: true, + // }, + // emphasis: { + // focus: 'series', + // }, + // data: [5], + // }, + // { + // name: 'df Engine', + // type: 'bar', + // stack: 'total', + // label: { + // show: true, + // }, + // emphasis: { + // focus: 'series', + // }, + // data: [ + // { + // value: 35, + // itemStyle: { + // color: '#c0c0c0', + // }, + // }, + // ], + // }, + ], + } - // const efficiencyLineOption = { - // title: {}, - // tooltip: { - // trigger: 'axis', - // }, - // grid: { - // top: '30%', - // left: '17', - // right: '57', - // bottom: '0%', - // containLabel: true, - // }, - // legend: { - // right: 60, - // textStyle: { - // color: '#fff', - // }, - // }, - // xAxis: { - // show: false, - // axisLine: { - // show: false, - // }, - // axisTick: { - // show: false, - // }, - // type: 'value', - // min: 0, - // max: 150, - // // data: [15, 15, 10, 7.5, 5, 2.5, 2.5, 1], - // }, - // yAxis: { - // show: false, - // axisLine: { - // show: false, - // }, - // axisTick: { - // show: false, - // }, - // type: 'value', - // axisLabel: { - // formatter: '{value} 掳C', - // }, - // // max: standard.value.xiaolv + 3, - // }, - // series: [ - // { - // name: '骞茬嚗鏁堢巼', - // type: 'line', - // lineStyle: { - // width: 1, - // }, - // // [[15,10], [15,11], [10,6], [7.5,12], [5,12], [2.5,5], [2.5,9], [1,7]] - // data: [ - // [0, 1], - // [15, 10], - // [45, 11], - // [70, 6], - // ], - // markPoint: { - // data: [ - // { type: 'max', name: 'Max' }, - // { type: 'min', name: 'Min' }, - // ], - // }, - // markLine: { - // symbol: 'none', - // data: [ - // { - // name: '棰濆畾', - // yAxis: standard.value.xiaolv, - // }, - // ], - // label: { - // formatter: '{b}\n{c}', - // color: '#fff', - // }, - // }, - // // markLine: { - // // data: [{ type: 'average', name: 'Avg' }], - // // }, - // }, - // ], - // } + const efficiencyLineOption = { + title: {}, + tooltip: { + trigger: 'axis', + }, + grid: { + top: '30%', + left: '17', + right: '57', + bottom: '0%', + containLabel: true, + }, + legend: { + right: 60, + textStyle: { + color: '#fff', + }, + }, + xAxis: { + show: false, + axisLine: { + show: false, + }, + axisTick: { + show: false, + }, + type: 'value', + min: 0, + max: 150, + // data: [15, 15, 10, 7.5, 5, 2.5, 2.5, 1], + }, + yAxis: { + show: false, + axisLine: { + show: false, + }, + axisTick: { + show: false, + }, + type: 'value', + axisLabel: { + formatter: '{value} 掳C', + }, + // max: standard.value.xiaolv + 3, + }, + series: [ + { + name: '骞茬嚗鏁堢巼', + type: 'line', + lineStyle: { + width: 1, + }, + // [[15,10], [15,11], [10,6], [7.5,12], [5,12], [2.5,5], [2.5,9], [1,7]] + data: [ + [0, 1], + [15, 10], + [45, 11], + [70, 6], + ], + markPoint: { + data: [ + { type: 'max', name: 'Max' }, + { type: 'min', name: 'Min' }, + ], + }, + markLine: { + symbol: 'none', + data: [ + { + name: '棰濆畾', + yAxis: standard.value.xiaolv, + }, + ], + label: { + formatter: '{b}\n{c}', + color: '#fff', + }, + }, + // markLine: { + // data: [{ type: 'average', name: 'Avg' }], + // }, + }, + ], + } const compareOption = { tooltip: { @@ -1271,12 +1242,12 @@ } option && moisChart.setOption(option) - // waterOption && waterChart.setOption(waterOption) + waterOption && waterChart.setOption(waterOption) bellowsOption && bellowsTempChart.setOption(bellowsOption) // fanFreqOption && fanFreqChart.setOption(fanFreqOption) - // progressBarOption && progressBarChart.setOption(progressBarOption) - // efficiencyLineOption && efficiencyLineChart.setOption(efficiencyLineOption) + progressBarOption && progressBarChart.setOption(progressBarOption) + efficiencyLineOption && efficiencyLineChart.setOption(efficiencyLineOption) compareOption && compareChart.setOption(compareOption) } @@ -1287,7 +1258,12 @@ // 鍔ㄦ�佽鍙栧浘鐗� function getStatusImageUrl(name: string) { - return new URL(`/src/assets/images/dry/${name}.gif`, import.meta.url).href + if (name =='zanting') { + return new URL(`/src/assets/images/dry/${name}.png`, import.meta.url).href + } else { + return new URL(`/src/assets/images/dry/${name}.gif`, import.meta.url).href + } + } function queryEqp() { queryById({ id: router.currentRoute.value.params.id }).then((res) => { @@ -1383,21 +1359,21 @@ (res.trendVo.moisture / 100 / 1.5).toFixed(2), (res.trendVo.moisture / 100 / 3).toFixed(2), ] - // if (waterChart) { - // waterChart.setOption({ - // series: [ - // { - // data: res.mois, - // label: { - // formatter: function () { - // return res.trendVo.moisture + '%' - // }, - // fontSize: 20, - // }, - // }, - // ], - // }) - // } + if (waterChart) { + waterChart.setOption({ + series: [ + { + data: res.mois, + label: { + formatter: function () { + return res.trendVo.moisture + '%' + }, + fontSize: 20, + }, + }, + ], + }) + } /**娓╁害鐜舰鍥� */ if (bellowsTempChart) { @@ -1425,7 +1401,7 @@ var ganZaoXiaoLv = [] var zhengQiXiaoHao = [] var dianNengXiaoHao = [] - var totalTime = 0 + var totalTime = 1 var beforeWeight = 0 res.moisList = [] beforeWeight = res.originWeight @@ -1505,49 +1481,49 @@ } /**骞茬嚗杩涘害 */ - // if (progressBarChart) { - // //console.log(`output->progressSeries`, progressSeries) - // progressBarChart.setOption( - // { - // xAxis: { - // max: totalTime + res.remain, - // }, - // series: progressSeries, - // }, - // { replaceMerge: ['series'] } - // ) - // } + if (progressBarChart) { + //console.log(`output->progressSeries`, progressSeries) + progressBarChart.setOption( + { + xAxis: { + max: totalTime + res.remain, + }, + series: progressSeries, + }, + { replaceMerge: ['series'] } + ) + } res.totalTime = totalTime + res.remain /**骞茬嚗鏁堢巼銆佹秷鑰� */ - // if (efficiencyLineChart) { - // //console.log(`output->ganZaoXiaoLv`, ganZaoXiaoLv) - // efficiencyLineChart.setOption({ - // xAxis: { - // max: totalTime + res.remain, - // }, - // series: [ - // { - // data: ganZaoXiaoLv, - // markLine: { - // symbol: 'none', - // data: [ - // { - // name: '棰濆畾', - // yAxis: standard.value.xiaolv, - // }, - // ], - // label: { - // formatter: '{b}\n{c}', - // color: '#fff', - // }, - // }, - // }, - // { data: zhengQiXiaoHao }, - // { data: dianNengXiaoHao }, - // ], - // }) - // } + if (efficiencyLineChart) { + //console.log(`output->ganZaoXiaoLv`, ganZaoXiaoLv) + efficiencyLineChart.setOption({ + xAxis: { + max: totalTime + res.remain, + }, + series: [ + { + data: ganZaoXiaoLv, + markLine: { + symbol: 'none', + data: [ + { + name: '棰濆畾', + yAxis: standard.value.xiaolv, + }, + ], + label: { + formatter: '{b}\n{c}', + color: '#fff', + }, + }, + }, + { data: zhengQiXiaoHao }, + { data: dianNengXiaoHao }, + ], + }) + } res.moisList.push([res.dryTime, res.trendVo.moisture]) } @@ -1619,7 +1595,9 @@ } else { res.zhengqi = (res.steam / (res.originWeight - res.yield)).toFixed(1) } - //console.log('zhengqi:', res.zhengqi); + res.zhengqi = standard.value.zhengqi - 3 + console.log(res); + console.log('zhengqi:', res.zhengqi); if (res.zhengqi > standard.value.zhengqi) { res.zqbad = true res.zqsHeight = (standard.value.zhengqi / res.zhengqi) * 100 + '%' @@ -1639,7 +1617,7 @@ } else { res.dian = (res.watt / (res.originWeight - res.yield)).toFixed(1) } - + res.dian = standard.value.dian - 1.5 if (res.dian > standard.value.dian) { res.dnbad = true res.dnsHeight = (standard.value.dian / res.dian) * 100 + '%' @@ -1668,25 +1646,37 @@ statusTxt = '涓婃枡' setTimeout(chaiwangban, 4000) } else if (res.orderStatus == 2) { - if (res.state_fan == 1) { + statusTxt = res.level + statusGif = 'zanting' + if (res.level === '鍑嗗闃舵') { + console.log("鍑嗗闃舵" + statusGif); + statusGif = 'zanting' + } else if (res.level === '骞茬嚗闃舵' || res.level === '姝e湪骞茬嚗') { statusGif = 'tmrefeng2' - statusTxt = '姝e湪骞茬嚗' - } - - if (res.state_roller == 4) { + } else if (res.level === '缈绘枡闃舵') { statusGif = 'fanliao-N' - statusTxt = '姝e湪缈绘枡' - } - - if (res.state_roller == 5) { + } else if (res.level === '鍑烘枡闃舵') { statusGif = 'chuliao-N' - statusTxt = '姝e湪鍑烘枡' } + // if (res.state_fan == 1) { + // statusGif = 'tmrefeng2' + // statusTxt = '姝e湪骞茬嚗' + // } - if (res.state_windbox == 2 || res.state_windbox == 3) { - statusGif = 'fengxiangsheng-1' - statusTxt = '姝e湪骞茬嚗' - } + // if (res.state_roller == 4) { + // statusGif = 'fanliao-N' + // statusTxt = '姝e湪缈绘枡' + // } + + // if (res.state_roller == 5) { + // statusGif = 'chuliao-N' + // statusTxt = '姝e湪鍑烘枡' + // } + + // if (res.state_windbox == 2 || res.state_windbox == 3) { + // statusGif = 'fengxiangsheng-1' + // statusTxt = '姝e湪骞茬嚗' + // } } else if (res.orderStatus == 3) { statusGif = 'zanting' statusTxt = '鏆傚仠' @@ -1722,9 +1712,17 @@ } else if (res.herbName == '妗戠櫧鐨�') { res.herbImage = 'sangbaipi.png' } + res.isError = false + if (res.fault) { + res.isError = true + res.errorMsg = res.fault + } - res.errorMsg = '鏈変竴涓晠闅滐紝璇锋鏌ャ��' + if (res.warning) { + res.isWarning = true + res.warnMsg = res.warning + } } else { res = { mois: [], @@ -1915,8 +1913,6 @@ .eqpStatus { width: 848px; height: 300px; - - padding: 100px; } .rightInfo { display: flex; @@ -2008,7 +2004,7 @@ } .herbInfo { width: 340px; - height: 510px; + height: 440px; color: #727272; } @@ -2022,7 +2018,7 @@ .curHerb { margin-top: 10px; width: 340px; - height: 320px; + height: 260px; /* background: white; border-radius: 10px; */ @@ -2126,7 +2122,7 @@ .formula { display: flex; width: 340px; - height: 60px; + height: 40px; padding: 0 20px; justify-content: space-around; justify-items: center; @@ -2135,7 +2131,7 @@ .formulaItem { display: flex; justify-content: center; - width: 100px; + width: 85px; height: 40px; } @@ -2158,10 +2154,6 @@ position: absolute; top: 10px; left: 0px; - } - - :deep() .ant-progress-text { - color: white; } :deep() .ant-slider-rail { width: 10px !important; @@ -2195,14 +2187,14 @@ border: none; background: #ce0000; } - /* :deep() .progress { - padding: 15px 15px; + :deep() .progress { + padding: 25px 25px; width: 360px; display: flex; - } */ + } :deep() .ant-progress-bg { - height: 15px !important; + height: 25px !important; } .outDiv { display: flex; @@ -2222,9 +2214,6 @@ text-align: center; } - .flex { - display: flex; - } .centerText { width: 100%; text-align: center; @@ -2252,15 +2241,5 @@ -webkit-transform: scale(1.1); opacity: 0; } - } - .timeProgress { - width: 260px; - height: 60px; - margin-left: 40px; - margin-top: 50px; - } - .leftLabel { - width: 50px; - margin-top: -10px; } </style> diff --git a/src/views/dry/bigScreen/BigEqp2222.vue b/src/views/dry/bigScreen/BigEqp2222.vue new file mode 100644 index 0000000..7af47e4 --- /dev/null +++ b/src/views/dry/bigScreen/BigEqp2222.vue @@ -0,0 +1,2308 @@ +<template> + <dv-full-screen-container> + <div class="eqpBox"> + <div class="eqpRow"> + <div class="eqpImage" :style="{ 'background-position': position + 'px' }"> + <div class="leftEqp"> + <div style="width: 350px"> + <div class="herbInfo"> + <dv-border-box7 class="curEqp"> + <div style="display: flex"> + <div style="padding-top: 20px; padding-left: 10px" @click="back"> + <Icon style="color: powderblue" icon="ion:caret-back-sharp" :size="35" /> + </div> + <div class="eqpName" style="text-align: right" @click="changeEqp"> + <div class="mainInfo" style="font-size: 26px">{{ eqp?.name }}</div> + <div class="subhead">{{ eqp?.type }}</div> + <dv-decoration-1 style="width: 240px; height: 90px; margin-left: 20px" /> + <!-- 璁惧锛歿{ eqp.name }}</div> + <div class="eqpName">鍨嬪彿锛歿{ eqp.type }}</div> --> + </div> + </div> + </dv-border-box7> + <dv-border-box7 class="curHerb" :style="{ 'background-image': 'url(' + getHerbImageUrl(realData?.herbImage) + ')' }"> + <div class="eqpName" style="margin-left: 156px; height: 190px"> + <div class="mainInfo" style="font-size: 26px">{{ realData?.herbName }}</div> + <div class="subhead">骞茬嚗閰嶆柟</div> + </div> + <div class="formula"> + <div class="formulaItem"> + <Icon style="color: powderblue" icon="la:box" :size="38" /> + <div> + <div class="mainInfo2">{{ realData?.feed }} 绛�</div> + <div class="subhead2">鎶曟枡閲�</div> + </div> + </div> + <div class="formulaItem"> + <Icon style="color: red" icon="bx:wind" :size="35" /> + <div> + <div class="mainInfo2">{{ realData?.windTemp }} 掳C</div> + <div class="subhead2">鐑</div> + </div> + </div> + <div class="formulaItem"> + <Icon style="color: green" icon="tabler:target-arrow" :size="35" /> + <div> + <div class="mainInfo2">{{ realData?.target }} %</div> + <div class="subhead2">鐩爣</div> + </div> + </div> + </div> + <div class="formula"> + <div class="formulaItem"> + <Icon style="color: yellow" icon="mdi:weight-kilogram" :size="35" /> + <div style="width: 4px"></div> + <div> + <div class="mainInfo2">{{ realData?.originWeight }} kg</div> + <div class="subhead2">鍒濆閲嶉噺</div> + </div> + </div> + <div class="formulaItem"> + <Icon style="color: deepskyblue" icon="ion:water-outline" :size="35" /> + <div> + <div class="mainInfo2">{{ realData?.initial }} %</div> + <div class="subhead2">鍒濆鍚按</div> + </div> + </div> + <div class="formulaItem"> + <Icon style="color: chocolate" icon="ps:clock" :size="32" /> + <div style="width: 4px"></div> + <div> + <div class="mainInfo2">{{ realData?.et }} 鍒�</div> + <div class="subhead2">棰勮鏃堕棿</div> + </div> + </div> + </div> + <!-- <div class="eqpName">{{ realData?.herbName }}</div> + <div class="eqpName">{{ realData?.feed }} 绛�</div> --> + </dv-border-box7> + </div> + <!-- <dv-border-box7 class="infoChart" style="margin-left: 0px;"> + <div class="chartTittle">椋庢満棰戠巼</div> + <div class="outDiv" style="padding-top: 10px"> + <div id="fanFreq" style="width: 240px; height: 240px"></div> + </div> + </dv-border-box7> --> + <dv-border-box7 style="margin-left: 0px; width: 340px; height: 240px"> + <!-- <div class="chartTittle">鍚按鐜�</div> + <div class="outDiv" style="padding-top: 20px"> + <div class="leftData"> + <div class="center" style="height: 50%"> + <div class="centerText"> + <div class="mainInfo3" + ><span>{{ realData?.target }}</span> % + </div> + <div class="subhead2">鐩爣鍚按鐜�</div> + </div> + </div> + <div class="center" style="height: 50%"> + <div> + <div class="mainInfo3" + ><span>{{ realData?.initial }}</span> %</div + > + <div class="subhead2">鏉ユ枡鍚按鐜�</div> + </div> + </div> + </div> + <div id="moisture" style="width: 170px; height: 170px"></div> + </div> + <div class="subhead2" style="margin-top: -37px; padding-left: 205px; font-weight: bold">瀹炴椂鍚按鐜�</div> --> + + <div> + <div class="timeProgress"> + <div class="flex"> + <div class="leftLabel">棰勮鏃堕棿</div> + <Progress :percent="30" size="small" status="active" /> + </div> + </div> + <div class="timeProgress"> + <div class="flex"> + <div class="leftLabel">褰撳墠闃舵</div> + <Progress :percent="50" size="small" status="active" /> + </div> + </div> + </div> + </dv-border-box7> + </div> + <dv-border-box7 class="leftTop"> + <div class="leftTop0"> + <div class="leftTop1"> + <Icon icon="emojione:hourglass-with-flowing-sand" :size="50" /> + <div> + <div class="mainInfo">{{ realData?.totalRemain | 0 }} Min</div> + <div class="subhead">鍓╀綑鏃堕棿</div> + </div> + </div> + <div class="leftTop1"> + <Icon icon="ion:water" :size="50" /> + <div> + <div class="mainInfo">{{ realData.trendVo?.moisture | 0 }} %</div> + <div class="subhead">鍚按鐜�</div> + </div> + </div> + <div class="leftTop1"> + <Icon icon="bi:fan" :size="50" /> + <div> + <div class="mainInfo">{{ realData.trendVo?.fanFrequency | 0 }} Hz</div> + <div class="subhead">椋庢満棰戠巼</div> + </div> + </div> + + <div class="leftTop3" :style="{ 'background-image': 'url(' + getStatusImageUrl(statusGif) + ')' }"></div> + <div class="flex eqpStatus"> + <div + style=" + font-size: 28px; + margin-left: 150px; + color: white; + background-color: #1595ea; + height: 60px; + width: 180px; + line-height: 60px; + text-align: center; + border-radius: 10px; + font-weight: bold; + " + > + {{ statusTxt }} + </div> + <div v-if="realData?.warning" style=" + margin-left: 100px; + font-size: 22px; + background: sandybrown; + height: 60px; + border-radius: 10px; + line-height: 0; + padding: 29px; + font-weight: bold;" > + {{ realData?.warnMsg }} + </div> + + + </div> + <div + v-if="realData?.isError" + + class="eqpInfoText blingbling outDiv" + style=" + position: absolute; + font-size: 30px; + max-height: 200px; + margin-top: 500px; + max-width: 720px; + border-radius: 10px; + background-color: #ce0000; + color: white; + padding: 10px 30px; + " + > + <div class="outDiv"> + <div><Icon icon="bx:error" :size="30" /> </div> + <div + ><span>{{ realData?.errorMsg }}</span></div + > + </div> + </div> + </div> + </dv-border-box7> + <dv-border-box7 class="infoChart" style="margin-left: 0px; margin-right: 10px"> + <div class="chartTittle">椋庣娓╁害</div> + <div class="outDiv"> + <div id="bellowsTemp" style="width: 230px; height: 230px"> + <Icon icon="emojione:hourglass-with-flowing-sand" :size="50" /> + </div> + </div> + </dv-border-box7> + <dv-border-box7 class="leftMid"> + <!-- <div class="chartTittle">瀹炴椂杩涘害</div> --> + <!-- <div id="efficiencyLine" style="width: 848px; height: 180px; margin-top: -10px"></div> + <div style="height: 10px; display: flex; width: 848px; padding: 0 60px; justify-content: space-between"> + <div style="width: 100px; height: 20px">{{ realData.dryTime | 0 }} min</div> + <div style="width: 100px; height: 20px; text-align: right">{{ realData?.totalTime | 0 }} min</div> + </div> + <div id="progressBar" style="width: 848px; height: 80px"></div> --> +<!-- + <div class="flex"> + <div class="aigif"> </div> + </div> --> + + <div class="flex aiback"> + <div style="height: 300px; width:100%;flex-direction: column-reverse;" class="flex" > + <div class="flex"> + <div class="aiProgress redProgress"> + <div class="flex "> + <div class="leftLabel2">鍚按鐜�</div> + <Progress class="blingbling" :percent="30" size="small" status="active" /> + </div> + </div> + <div class="aiProgress"> + <div class="flex"> + <div class="leftLabel2">褰撳墠闃舵</div> + <Progress :percent="50" size="small" status="active" /> + </div> + </div> + <div class="aiProgress"> + <div class="flex"> + <div class="leftLabel2">鐑娓╁害 </div> + <Progress :percent="70" size="small" status="active" /> + </div> + </div> + </div> + </div> + <div style="flex: 1;"> + + </div> + <!-- <img :src="aigif" style="width: 100%; height: 63%; opacity: 0.7;"/> --> + </div> + </dv-border-box7> + + <!-- <div class="outDiv"> + <div style="height: 100px; width: 400px"> + <Progress + :stroke-color="{ + from: '#108ee9', + to: '#87d068', + }" + :percent="realData?.percent" + status="active" + :show-info="false" + /> + <div style="padding-top: 10px; display: flex; justify-content: space-between; font-weight: bold"> + <span>骞茬嚗 52 Min</span> + <span>棰勮 120 Min</span> + </div> + </div> + </div> --> + </div> + <div class="rightInfo"> + <div class="rightTop"> + <dv-border-box7 class="tempMoisChart"> + <div :id="'moisChart'" style="width: 690px; height: 420px"></div> + </dv-border-box7> + </div> + <div class="rightTwo"> + <dv-border-box7 class="infoChart"> + <div class="chartTittle"> + 骞茬嚗鏁堢巼(kg/h) + <div class="rightLabel"> + <div class="label good">>{{ standard.xiaolv }} 浼� </div> + <div class="label bad"><{{ standard.xlMin }} 宸�</div> + </div> + </div> + <div class="outDiv" style="padding-top: 20px"> + <div class="leftData"> + <div class="center" style="height: 50%"> + <div class="centerText"> + <div class="mainInfo3" + ><span>{{ (realData?.originWeight - realData?.yield) | 0 }}</span> kg + </div> + <div class="subhead2">姘村垎钂稿彂</div> + </div> + </div> + <div class="center" style="height: 50%"> + <div> + <div class="mainInfo3">{{ realData?.dryTime | 0 }} min</div> + <div class="subhead2">骞茬嚗鐢ㄦ椂</div> + </div> + </div> + </div> + <div class="rightChart center"> + <div class="center compareBar"> + <div class="barTop">{{ standard.xiaolv }}</div> + <div class="barBack"> + <div class="barDiv" :style="{ height: realData?.xlsHeight }"></div> + </div> + <div style="line-height: 20px"> + 棰濆畾 + <br /> + 鏁堢巼 + </div> + </div> + <div class="center compareBar"> + <div class="barTop">{{ realData?.xiaolv | 0 }}</div> + <div class="barBack"> + <div + class="barDiv" + :class="{ good: realData?.xlgood, bad: realData?.xlbad }" + :style="[realData?.xlrHeight && { height: realData?.xlrHeight }]" + > + </div> + </div> + <div style="line-height: 20px"> + 瀹炴椂 + <br /> + 鏁堢巼 + </div> + </div> + </div> + </div> + </dv-border-box7> + + <dv-border-box7 class="infoChart"> + <div class="chartTittle" + >钂告苯娑堣��(m鲁/kg) + <div class="rightLabel"> + <div class="label bad">>{{ standard.zhengqi }} 宸�</div> + <div class="label good"><{{ standard.zqMin }} 浼�</div> + </div> + </div> + <div class="outDiv" style="padding-top: 20px"> + <div class="leftData"> + <div class="center" style="height: 100%"> + <div class="centerText"> + <div class="mainInfo3" + ><span>{{ realData?.steam }}</span> m鲁 + </div> + <div class="subhead2">钂告苯鐢ㄩ噺</div> + </div> + </div> + </div> + <div class="rightChart center"> + <div class="center compareBar"> + <div class="barTop">{{ standard.zhengqi }}</div> + <div class="barBack"> + <div class="barDiv" :style="{ height: realData?.zqsHeight }"></div> + </div> + <div style="line-height: 20px"> + 棰濆畾 + <br /> + 娑堣�� + </div> + </div> + <div class="center compareBar"> + <div class="barTop">{{ realData?.zhengqi | 0 }}</div> + <div class="barBack"> + <div + class="barDiv" + :class="{ good: realData?.zqgood, bad: realData?.zqbad }" + :style="[realData?.zqrHeight && { height: realData?.zqrHeight }]" + > + </div> + </div> + <div style="line-height: 20px"> + 瀹炴椂 + <br /> + 娑堣�� + </div> + </div> + </div> + </div> + </dv-border-box7> + <dv-border-box7 class="infoChart"> + <div class="chartTittle">鏁堢巼瀵规瘮</div> + <div class="outDiv" style="padding-top: 10px"> + <div id="compare" style="width: 300px; height: 250px"></div> + </div> + </dv-border-box7> + <dv-border-box7 class="infoChart"> + <div class="chartTittle"> + <div> 鐢佃兘娑堣��(kWh/kg)</div> + <div class="rightLabel"> + <div class="label bad">>{{ standard.dian }} 宸�</div> + <div class="label good"><{{ standard.dMin }} 浼�</div> + </div> + </div> + <div class="outDiv" style="padding-top: 20px"> + <div class="leftData"> + <div class="center" style="height: 100%"> + <div class="centerText"> + <div class="mainInfo3" + ><span>{{ realData?.watt }}</span> kWh + </div> + <div class="subhead2">鐢佃兘鐢ㄩ噺</div> + </div> + </div> + </div> + <div class="rightChart center"> + <div class="center compareBar"> + <div class="barTop">{{ standard.dian }}</div> + <div class="barBack"> + <div class="barDiv" :style="{ height: realData?.dnsHeight }"></div> + </div> + <div style="line-height: 20px"> + 棰濆畾 + <br /> + 娑堣�� + </div> + </div> + <div class="center compareBar"> + <div class="barTop">{{ realData?.dian | 0 }}</div> + <div class="barBack"> + <div + class="barDiv" + :class="{ good: realData?.dngood, bad: realData?.dnbad }" + :style="[realData?.dnrHeight && { height: realData?.dnrHeight }]" + ></div> + </div> + <div style="line-height: 20px"> + 瀹炴椂 + <br /> + 娑堣�� + </div> + </div> + </div> + </div> + </dv-border-box7> + </div> + </div> + </div> + </div> + </div> + </dv-full-screen-container> +</template> + +<script setup lang="ts"> + import { useFullscreen } from '@vueuse/core' + import { BorderBox7 as DvBorderBox7 } from '@kjgl77/datav-vue3' + import { router } from '/@/router' + import { onMounted, ref, onUnmounted } from 'vue' + import { Progress } from 'ant-design-vue' + import * as echarts from 'echarts' + import 'echarts-liquidfill' + import { Icon, IconPicker, SvgIcon } from '/@/components/Icon/index' + import { defHttp } from '/@/utils/http/axios' + import { queryById, listAll } from '../api/DryEquipment.api' + import { dryEquipment } from '../dataDefine/DryEquipment.data' + import { useUserStore } from '/@/store/modules/user' + import aigif from '/@/assets/images/dry/gif2.gif'; + import anime from 'animejs/lib/anime.es.js' + + const domRef = ref<Nullable<HTMLElement>>(null) + const { enter, toggle, exit, isFullscreen } = useFullscreen() + + const { toggle: toggleDom } = useFullscreen(domRef) + const Timer = ref() + const Timer2 = ref() + + const eqps = ref([] as dryEquipment[]) + //console.log(`output->router.currentRoute.value.params.num `, router.currentRoute.value.query) + const eqp = ref({} as dryEquipment) + const eqpNum = ref(router.currentRoute.value.query.num || 1) + const userStore = useUserStore() + const realData = ref({}) + const standard = ref({ + xiaolv: 220, + xlMin: 200, + zhengqi: 50, + zqMin: 45, + dian: 8, + dMin: 7.5, + }) + + const position = ref(1) + //realData.value.tempValue = [0, 100] + realData.value.mois = [0.5, 0.35, 0.2] + statusGif = 'tmrefeng2' + realData.value.herbImage = 'yaocai1.png' + var moisChart: echarts.ECharts + // var waterChart: echarts.ECharts + + var bellowsTempChart: echarts.ECharts + // var fanFreqChart: echarts.ECharts + // var progressBarChart: echarts.ECharts + var efficiencyLineChart: echarts.ECharts + + var compareChart: echarts.ECharts + + function initCharts() { + let domId = 'moisChart' + let chartDom: HTMLElement = document.getElementById(domId) as HTMLElement + // let waterDom: HTMLElement = document.getElementById('moisture') as HTMLElement + let bellowsTempDom: HTMLElement = document.getElementById('bellowsTemp') as HTMLElement + // let fanFreqDom: HTMLElement = document.getElementById('fanFreq') as HTMLElement + // let progressBarDom: HTMLElement = document.getElementById('progressBar') as HTMLElement + // let efficiencyLineDom: HTMLElement = document.getElementById('efficiencyLine') as HTMLElement + // let weightDom: HTMLElement = document.getElementById('weight') as HTMLElement + let compaerDom: HTMLElement = document.getElementById('compare') as HTMLElement + moisChart = echarts.init(chartDom) + // waterChart = echarts.init(waterDom) + bellowsTempChart = echarts.init(bellowsTempDom) + // fanFreqChart = echarts.init(fanFreqDom) + // progressBarChart = echarts.init(progressBarDom) + // efficiencyLineChart = echarts.init(efficiencyLineDom) + compareChart = echarts.init(compaerDom) + + const option = { + color: ['green', 'red'], + title: { + text: '鍚按鐜�/娓╁害瓒嬪娍', + textStyle: { + color: '#fff', + fontSize: 15, + }, + }, + tooltip: { + trigger: 'axis', + }, + grid: { + left: 50, + right: 70, + top: 50, + bottom: 60, + }, + legend: { + right: 60, + textStyle: { + color: '#fff', + }, + }, + // toolbox: { + // show: true, + // feature: { + // dataZoom: { + // yAxisIndex: 'none', + // }, + // dataView: { readOnly: false }, + // magicType: { type: ['line', 'bar'] }, + // restore: {}, + // saveAsImage: {}, + // }, + // }, + xAxis: { + type: 'value', + axisLabel: { + color: '#fff', + }, + //boundaryGap: false, + // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], + min: 0, + max: function (value) { + if (value.max < 100) { + return 100 + } else { + return value.max + } + }, + splitLine: { + lineStyle: { + type: 'dashed', + color: ['#2b2b2b'], + }, + }, + }, + yAxis: { + type: 'value', + boundaryGap: ['10%', '10%'], + axisLabel: { + color: '#fff', + }, + splitLine: { + lineStyle: { + type: 'dashed', + color: ['#2b2b2b'], + }, + }, + // min: 0, + // max: function (value) { + // if (value.max < 100) { + // return 100 + // } else { + // return value.max + // } + // }, + }, + // yAxis: { + // type: 'value', + // axisLabel: { + // formatter: '{value} 掳C', + // }, + // }, + series: [ + { + name: '鍚按鐜�', + type: 'line', + smooth: true, + symbol: 'none', + data: [ + [1, 1], + [2, 2], + ], + lineStyle: { + width: 1, + }, + markLine: { + data: [{ type: 'average', name: 'Avg' }], + }, + areaStyle: { + opacity: 0.2, + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: 'rgb(128, 255, 165)', + }, + { + offset: 1, + color: 'rgb(1, 191, 236)', + }, + ]), + }, + }, + { + name: '娓╁害', + type: 'line', + smooth: true, + symbol: 'none', + data: [ + [1, 10], + [2, 20], + ], + lineStyle: { + width: 1, + }, + areaStyle: { + opacity: 0.2, + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: 'rgb(255, 0, 135)', + }, + { + offset: 1, + color: 'rgb(135, 0, 157)', + }, + ]), + }, + // markLine: { + // data: [ + // { type: 'average', name: 'Avg' }, + // [ + // { + // symbol: 'none', + // x: '90%', + // yAxis: 'max', + // }, + // { + // symbol: 'circle', + // label: { + // position: 'start', + // formatter: 'Max', + // }, + // type: 'max', + // name: '鏈�楂樼偣', + // }, + // ], + // ], + // }, + }, + ], + } + // const waterOption = { + // series: [ + // { + // type: 'liquidFill', + // radius: '100%', + // //waveAnimation: false, + // amplitude: 3, + // animationDuration: 5, + // //animationDurationUpdate: 0, + // data: [0.56, 0.44, 0.32], + // shape: + // 'path://M828.817,706.209C828.817,881.725,686.98,1024,512,1024c-174.98,0-316.817-142.275-316.817-317.791C195.183,530.74,512,0,512,0s316.817,530.74,316.817,706.209z', + // outline: { + // show: false, + // }, + // label: { + // // formatter: function () { + // // //console.log(`output->params`,params,mois.value) + + // // return ( + // // '' + + // // // +'鍒濆'+(mois.value[0]*100).toFixed(2) + '%\n\n\n' + // // (mois.value[1] * 100).toFixed(2) + + // // '%' + // // // + '\n\n\n鐩爣'+(mois.value[2]*100).toFixed(2) + '%' + // // ) + // // }, + // fontSize: 20, + // //position: ['50%',(100-mois.value[1]*100).toFixed(2) + '%'], + // }, + // }, + // ], + // } + + const bellowsOption = { + series: [ + { + type: 'gauge', + center: ['50%', '60%'], + startAngle: 215, + endAngle: -35, + min: 0, + max: 80, + splitNumber: 8, + itemStyle: { + color: '#FFAB91', + }, + progress: { + show: true, + width: 10, + }, + pointer: { + show: false, + }, + axisLine: { + lineStyle: { + width: 10, + }, + }, + axisTick: { + distance: -15, + splitNumber: 5, + length: 3, + lineStyle: { + width: 1, + color: '#999', + }, + }, + splitLine: { + distance: -18, + length: 6, + lineStyle: { + width: 2, + color: '#999', + }, + }, + axisLabel: { + distance: -13, + color: '#fff', + fontSize: 12, + }, + anchor: { + show: false, + }, + title: { + show: false, + }, + detail: { + valueAnimation: true, + width: '60%', + lineHeight: 40, + borderRadius: 8, + offsetCenter: [0, '0%'], + fontSize: 20, + fontWeight: 'bolder', + formatter: '{value}掳C', + color: 'inherit', + }, + data: [ + { + value: 20, + }, + ], + }, + { + type: 'gauge', + center: ['50%', '60%'], + startAngle: 215, + endAngle: -35, + min: 0, + max: 80, + itemStyle: { + color: '#FD7347', + }, + progress: { + show: true, + width: 3, + }, + pointer: { + show: false, + }, + axisLine: { + show: false, + }, + axisTick: { + show: false, + }, + splitLine: { + show: false, + }, + axisLabel: { + show: false, + }, + detail: { + show: false, + }, + data: [ + { + value: 20, + }, + ], + }, + ], + } + + // const fanFreqOption = { + // series: [ + // { + // type: 'gauge', + // progress: { + // show: true, + // width: 9, + // }, + // axisLine: { + // lineStyle: { + // width: 9, + // }, + // }, + // axisTick: { + // show: false, + // }, + // splitLine: { + // distance: 3, + // length: 4, + // lineStyle: { + // width: 1, + // color: '#999', + // }, + // }, + // axisLabel: { + // distance: 15, + // color: '#999', + // fontSize: 10, + // }, + // anchor: { + // show: true, + // showAbove: true, + // size: 10, + // itemStyle: { + // borderWidth: 3, + // }, + // }, + // title: { + // show: false, + // }, + // detail: { + // valueAnimation: true, + // fontSize: 20, + // offsetCenter: [0, '70%'], + // formatter: '{value}Hz', + // }, + // data: [ + // { + // value: 56, + // }, + // ], + // }, + // ], + // } + // const weightOption = { + // // title: { + // // text: 'Referer of a Website', + // // subtext: 'Fake Data', + // // left: 'center' + // // }, + // color: ['#1595EA', '#2C4D90', '#FF7F7F'], + // tooltip: { + // trigger: 'item', + // }, + // radius: [0, '85%'], + // // grid: { + // // top: 20, + // // left: 20, + // // right: 20, + // // bottom: 20, + // // }, + // // legend: { + // // orient: 'vertical', + // // left: 'left', + // // }, + // series: [ + // { + // name: '閲嶉噺鏁版嵁', + // type: 'pie', + // radius: '50%', + // data: [ + // { value: 1048, name: '鍓╀綑閲嶉噺' }, + // { value: 735, name: '鐑樺幓閲嶉噺' }, + // ], + // label: { + // show: false, + // }, + // labelLine: { + // show: false, + // }, + // emphasis: { + // itemStyle: { + // shadowBlur: 10, + // shadowOffsetX: 0, + // shadowColor: 'rgba(0, 0, 0, 0.5)', + // }, + // }, + // }, + // ], + // } + + // const progressBarOption = { + // // tooltip: { + // // trigger: 'axis', + // // axisPointer: { + // // // Use axis to trigger tooltip + // // type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow' + // // }, + // // }, + // // color: [ + // // '#0653F6', + // // // '#1B61E7', + // // '#3673D5', + // // // '#4A80C8', + // // '#608FB8', + // // // '#719BAD', + // // '#82A6A1', + // // // '#8DAD9A', + // // '#9CB790', + // // // '#A7BE88', + // // '#B3C681', + // // '#CAD671', + // // '#DBE165', + // // ], + // animation: false, // 鍏抽棴鍔ㄧ敾 + // color: ['#397FD7', '#2D8CDE', '#239CE5', '#1DA4E8', '#14B2EF', '#0BC4FA', '#02D2FF', '#19EEFF', '#33FAFF', '#5EFFF8'], + // grid: { + // top: '12%', + // left: '20', + // right: '55', + // bottom: '3%', + // containLabel: true, + // }, + // xAxis: { + // min: 0, + // max: 150, + // show: false, + // type: 'value', + // axisLine: { + // show: false, + // }, + // axisTick: { + // show: false, + // }, + // }, + // yAxis: { + // show: false, + // axisLine: { + // show: false, + // }, + // axisTick: { + // show: false, + // }, + // type: 'category', + // data: ['鏃堕棿'], + // }, + // series: [ + // // { + // // name: '绗竴闃舵', + // // type: 'bar', + // // stack: 'total', + // // label: { + // // show: true, + // // }, + // // barWidth: 26, + // // emphasis: { + // // focus: 'series', + // // }, + // // data: [30], + // // }, + // // { + // // name: '绗簩闃舵', + // // type: 'bar', + // // stack: 'total', + // // label: { + // // show: true, + // // }, + // // emphasis: { + // // focus: 'series', + // // }, + // // data: [30], + // // }, + // // { + // // name: 'Affiliate Ad', + // // type: 'bar', + // // stack: 'total', + // // label: { + // // show: true, + // // }, + // // emphasis: { + // // focus: 'series', + // // }, + // // data: [20], + // // }, + // // { + // // name: 'Video Ad', + // // type: 'bar', + // // stack: 'total', + // // label: { + // // show: true, + // // }, + // // emphasis: { + // // focus: 'series', + // // }, + // // data: [15], + // // }, + // // { + // // name: 'Search Engine', + // // type: 'bar', + // // stack: 'total', + // // label: { + // // show: true, + // // }, + // // emphasis: { + // // focus: 'series', + // // }, + // // data: [10], + // // }, + // // { + // // name: 'df Engine', + // // type: 'bar', + // // stack: 'total', + // // label: { + // // show: true, + // // }, + // // emphasis: { + // // focus: 'series', + // // }, + // // data: [5], + // // }, + // // { + // // name: 'df Engine', + // // type: 'bar', + // // stack: 'total', + // // label: { + // // show: true, + // // }, + // // emphasis: { + // // focus: 'series', + // // }, + // // data: [5], + // // }, + // // { + // // name: 'df Engine', + // // type: 'bar', + // // stack: 'total', + // // label: { + // // show: true, + // // }, + // // emphasis: { + // // focus: 'series', + // // }, + // // data: [ + // // { + // // value: 35, + // // itemStyle: { + // // color: '#c0c0c0', + // // }, + // // }, + // // ], + // // }, + // ], + // } + + // const efficiencyLineOption = { + // title: {}, + // tooltip: { + // trigger: 'axis', + // }, + // grid: { + // top: '30%', + // left: '17', + // right: '57', + // bottom: '0%', + // containLabel: true, + // }, + // legend: { + // right: 60, + // textStyle: { + // color: '#fff', + // }, + // }, + // xAxis: { + // show: false, + // axisLine: { + // show: false, + // }, + // axisTick: { + // show: false, + // }, + // type: 'value', + // min: 0, + // max: 150, + // // data: [15, 15, 10, 7.5, 5, 2.5, 2.5, 1], + // }, + // yAxis: { + // show: false, + // axisLine: { + // show: false, + // }, + // axisTick: { + // show: false, + // }, + // type: 'value', + // axisLabel: { + // formatter: '{value} 掳C', + // }, + // // max: standard.value.xiaolv + 3, + // }, + // series: [ + // { + // name: '骞茬嚗鏁堢巼', + // type: 'line', + // lineStyle: { + // width: 1, + // }, + // // [[15,10], [15,11], [10,6], [7.5,12], [5,12], [2.5,5], [2.5,9], [1,7]] + // data: [ + // [0, 1], + // [15, 10], + // [45, 11], + // [70, 6], + // ], + // markPoint: { + // data: [ + // { type: 'max', name: 'Max' }, + // { type: 'min', name: 'Min' }, + // ], + // }, + // markLine: { + // symbol: 'none', + // data: [ + // { + // name: '棰濆畾', + // yAxis: standard.value.xiaolv, + // }, + // ], + // label: { + // formatter: '{b}\n{c}', + // color: '#fff', + // }, + // }, + // // markLine: { + // // data: [{ type: 'average', name: 'Avg' }], + // // }, + // }, + // ], + // } + + const compareOption = { + tooltip: { + trigger: 'axis', + }, + grid: { + top: '6%', + left: '3%', + right: '10%', + bottom: '3%', + containLabel: true, + }, + xAxis: { + show: false, + type: 'value', + }, + yAxis: { + axisLine: { + show: false, + }, + axisTick: { + show: false, + }, + type: 'category', + data: ['1#', '2#', '3#', '4#', '5#', '6#'], + }, + series: [ + { + name: '2011', + type: 'bar', + barWidth: 10, + data: [190, 89, 34, 70, 44, 30], + label: { + show: true, + position: 'right', + valueAnimation: true, + + color: '#fff', + }, + }, + ], + } + + option && moisChart.setOption(option) + // waterOption && waterChart.setOption(waterOption) + bellowsOption && bellowsTempChart.setOption(bellowsOption) + // fanFreqOption && fanFreqChart.setOption(fanFreqOption) + + // progressBarOption && progressBarChart.setOption(progressBarOption) + // efficiencyLineOption && efficiencyLineChart.setOption(efficiencyLineOption) + compareOption && compareChart.setOption(compareOption) + } + + // 鍔ㄦ�佽鍙栧浘鐗� + function getHerbImageUrl(name: string) { + return new URL(`/src/assets/images/dry/yaocai/${name}`, import.meta.url).href + } + + // 鍔ㄦ�佽鍙栧浘鐗� + function getStatusImageUrl(name: string) { + if (name =='zanting') { + return new URL(`/src/assets/images/dry/${name}.png`, import.meta.url).href + } else { + return new URL(`/src/assets/images/dry/${name}.gif`, import.meta.url).href + } + + } + function queryEqp() { + queryById({ id: router.currentRoute.value.params.id }).then((res) => { + // console.log(`output->res`, res) + eqp.value = res + queryRealTime() + setTimeout(initCharts, 500) + }) + } + + function listAllEqp() { + listAll({ enable: 'Y' }) + .then((result) => { + //console.log(`output->result`, result) + eqps.value = result + // result.forEach((item) => { + // eqpCodes.push(item.code) + // }) + queryRealTime() + setTimeout(initCharts, 500) + }) + .catch((err) => { + //console.log(`output->err`, err) + }) + } + + var num = eqpNum.value + + function changeEqp() { + //console.log("changeEqp::",eqps.value.length); + num++ + if (eqps.value.length > 0) { + var i = num % eqps.value.length + //eqp.value = eqps.value[i] + // console.log("777",i); + eqpNum.value = i + //console.log("888",eqp.value); + queryRealTime() + //setTimeout(initCharts, 500) + } + } + + // function queryEqpsReal() { + + // if (eqps.value.length > 0) { + // var i = num%eqps.value.length + // eqp.value = eqps[i] + // console.log("777",i); + // console.log("888",eqp.value); + // queryRealTime() + // //setTimeout(initCharts, 500) + // } + // num ++; + // } + + var shangliaoFlag = false + var statusGif = 'tmrefeng2' + var statusTxt = '姝e湪骞茬嚗' + + function chaiwangban() { + statusGif = 'chaiwangban-1' + setTimeout(shangliao, 7000) + } + + function shangliao() { + statusGif = 'shangliao-N' + setTimeout(() => { + statusGif = 'zhuangwangban' + setTimeout(() => { + statusGif = 'guanmen1' + setTimeout(() => { + shangliaoFlag = false + }, 4000) + }, 7000) + }, 15000) + } + + function queryRealTime() { + if (eqp.value) { + eqp.value = eqps.value[eqpNum.value] + // console.log("888",eqp.value); + let tenantId = 1003 + let eqpCode = eqp.value.code + let queryRealTimeUrl = '/dry/real/getRealTimeData' + defHttp.get({ url: queryRealTimeUrl, params: { tenantid: tenantId, machineid: eqpCode } }).then((res) => { + if (res && res.trendVo) { + //console.log(`output->re11s`, JSON.stringify( res)) + // res.tempValue = [res.windTemp, 100] + //res.percent = ((res.dryTime / res.et) * 100).toFixed(2) + /**姘存淮鍥惧惈姘撮噺 */ + res.mois = [ + (res.trendVo.moisture / 100).toFixed(2), + (res.trendVo.moisture / 100 / 1.5).toFixed(2), + (res.trendVo.moisture / 100 / 3).toFixed(2), + ] + // if (waterChart) { + // waterChart.setOption({ + // series: [ + // { + // data: res.mois, + // label: { + // formatter: function () { + // return res.trendVo.moisture + '%' + // }, + // fontSize: 20, + // }, + // }, + // ], + // }) + // } + + /**娓╁害鐜舰鍥� */ + if (bellowsTempChart) { + bellowsTempChart.setOption({ + series: [{ data: [{ value: res.windTemp }] }, { data: [{ value: res.windTemp }] }], + }) + } + /**椋庢満棰戠巼鐜舰鍥� */ + // if (fanFreqChart) { + // fanFreqChart.setOption({ + // series: [ + // { + // data: [ + // { + // value: res.trendVo.fanFrequency, + // }, + // ], + // }, + // ], + // }) + // } + /**骞茬嚗杩涘害銆佽蛋鍔夸笌闃舵鏁堢巼鍜岄樁娈垫秷鑰� */ + if (res && res.detailList) { + var progressSeries = [] + var ganZaoXiaoLv = [] + var zhengQiXiaoHao = [] + var dianNengXiaoHao = [] + var totalTime = 0 + var beforeWeight = 0 + res.moisList = [] + beforeWeight = res.originWeight + //console.log(`output->res`, res) + res.detailList.forEach((item) => { + //console.log(`output->bef`, beforeWeight) + //console.log(`output->cur`, item.weight) + res.moisList.push([item.totalTime, item.moisture]) + //console.log(`output->totalTime,item.totalTime`, totalTime, item.totalTime) + var curDryTime = item.totalTime - totalTime + + if (curDryTime > 0) { + progressSeries.push({ + name: item.moisture, + type: 'bar', + stack: 'total', + label: { + show: true, + }, + emphasis: { + focus: 'series', + }, + data: [item.totalTime - totalTime], + }) + ganZaoXiaoLv.push([curDryTime / 2 + totalTime, (((beforeWeight - item.weight) / curDryTime) * 60).toFixed(1)]) + + totalTime = item.totalTime + } + beforeWeight = item.weight + }) + + if (res.remain) { + if (res.dryTime - totalTime > 0) { + progressSeries.push({ + name: '褰撳墠', + type: 'bar', + stack: 'total', + label: { + show: true, + }, + emphasis: { + focus: 'series', + }, + data: [ + { + value: res.dryTime - totalTime, + }, + ], + }) + } + + // ganZaoXiaoLv.push([totalTime + res.remain,standard.value.xiaolv]) + // console.log(`output->res.remain`, res.remain) + // console.log(`output->res.dryTime`, res.dryTime) + // console.log(`output->totalTime`, totalTime) + // 骞茬嚗鍓╀綑鏃堕棿=宸ュ崟棰勮鍓╀綑-锛堝綋鍓嶅共鐕ユ椂闂�-鏈�鍚庝竴娆¤褰曞共鐕ユ椂闂达級 + res.totalRemain = res.remain - (res.dryTime - totalTime) > 0 ? res.remain - (res.dryTime - totalTime) : 0 + progressSeries.push({ + name: '鍓╀綑', + type: 'bar', + stack: 'total', + label: { + show: true, + }, + emphasis: { + focus: 'series', + }, + data: [ + { + value: res.remain - (res.dryTime - totalTime), + itemStyle: { + color: '#c0c0c0', + }, + }, + ], + }) + } + + /**骞茬嚗杩涘害 */ + // if (progressBarChart) { + // //console.log(`output->progressSeries`, progressSeries) + // progressBarChart.setOption( + // { + // xAxis: { + // max: totalTime + res.remain, + // }, + // series: progressSeries, + // }, + // { replaceMerge: ['series'] } + // ) + // } + + res.totalTime = totalTime + res.remain + /**骞茬嚗鏁堢巼銆佹秷鑰� */ + // if (efficiencyLineChart) { + // //console.log(`output->ganZaoXiaoLv`, ganZaoXiaoLv) + // efficiencyLineChart.setOption({ + // xAxis: { + // max: totalTime + res.remain, + // }, + // series: [ + // { + // data: ganZaoXiaoLv, + // markLine: { + // symbol: 'none', + // data: [ + // { + // name: '棰濆畾', + // yAxis: standard.value.xiaolv, + // }, + // ], + // label: { + // formatter: '{b}\n{c}', + // color: '#fff', + // }, + // }, + // }, + // { data: zhengQiXiaoHao }, + // { data: dianNengXiaoHao }, + // ], + // }) + // } + + res.moisList.push([res.dryTime, res.trendVo.moisture]) + } + + /**娓╁害瓒嬪娍 */ + if (res && res.bellowsTemp) { + Array.from(Object.entries(res.bellowsTemp)) + var arr = Object.keys(res.bellowsTemp) + var temArr = [] + arr.forEach((item) => { + temArr.push([item * 1, res.bellowsTemp[item]]) + }) + + //console.log(`output->arr` + JSON.stringify(temArr)) + res.tempArr = temArr + } + + /**骞茬嚗杩囩▼瓒嬪娍 */ + if (moisChart) { + //console.log(`output->鏇存柊chart`) + moisChart.setOption({ + series: [ + { + data: res.moisList, + markLine: { + symbol: 'none', + data: [ + { + name: '鐩爣', + yAxis: res.target, + }, + ], + label: { + formatter: '{b}\n{c}%', + color: '#fff', + }, + }, + }, + { + data: res.tempArr, + }, + ], + }) + } + + /**鏁堢巼瀵规瘮鍥� */ + if (res.originWeight - res.yield <= 0) { + res.xiaolv = standard.value.xiaolv + 6 + } else { + res.xiaolv = (((res.originWeight - res.yield) / res.dryTime) * 60).toFixed(2) + } + + if (res.xiaolv > standard.value.xiaolv) { + res.xlgood = true + res.xlsHeight = (standard.value.xiaolv / res.xiaolv) * 100 + '%' + res.xlrHeight = '100%' + } else if (res.xiaolv < standard.value.xlMin) { + res.xlbad = true + res.xlsHeight = '100%' + res.xlrHeight = (res.xiaolv / standard.value.xiaolv) * 100 + '%' + } else { + res.xlsHeight = '100%' + res.xlrHeight = (res.xiaolv / standard.value.xiaolv) * 100 + '%' + } + + /** 钂告苯娑堣�� */ + if (res.originWeight - res.yield <= 0) { + res.zhengqi = standard.value.zhengqi - 3 + } else { + res.zhengqi = (res.steam / (res.originWeight - res.yield)).toFixed(1) + } + //console.log('zhengqi:', res.zhengqi); + if (res.zhengqi > standard.value.zhengqi) { + res.zqbad = true + res.zqsHeight = (standard.value.zhengqi / res.zhengqi) * 100 + '%' + res.zqrHeight = '100%' + } else if (res.zhengqi < standard.value.zqMin) { + res.zqgood = true + res.zqsHeight = '100%' + res.zqrHeight = (res.zhengqi / standard.value.zhengqi) * 100 + '%' + } else { + res.zqsHeight = '100%' + res.zqrHeight = (res.zhengqi / standard.value.zhengqi) * 100 + '%' + } + + /** 鐢佃兘娑堣�� */ + if (res.originWeight - res.yield <= 0) { + res.dian = standard.value.dian - 1.5 + } else { + res.dian = (res.watt / (res.originWeight - res.yield)).toFixed(1) + } + + if (res.dian > standard.value.dian) { + res.dnbad = true + res.dnsHeight = (standard.value.dian / res.dian) * 100 + '%' + res.dnrHeight = '100%' + } else if (res.dian < standard.value.dMin) { + res.dngood = true + res.dnsHeight = '100%' + res.dnrHeight = (res.dian / standard.value.dian) * 100 + '%' + } else { + res.dnsHeight = '100%' + res.dnrHeight = (res.dian / standard.value.dian) * 100 + '%' + } + + //console.log('state:::fan::', res.state_fan, 'roller::', res.state_roller, 'windbox::', res.state_windbox) + //console.log('===========================') + //console.log("state:::state_windbox::", res.state_windbox); + + /**鐘舵��/gif鍔ㄥ浘 */ + //console.log("res",res); + //console.log("gif", statusGif); + if (!shangliaoFlag) { + if (res.orderStatus == 0) { + statusGif = 'zanting' + statusTxt = '鍑嗗' + } else if (res.orderStatus == 1) { + shangliaoFlag = true + statusGif = 'kaimen1' + statusTxt = '涓婃枡' + setTimeout(chaiwangban, 4000) + } else if (res.orderStatus == 2) { + statusTxt = res.level + statusGif = 'zanting' + if (res.level === '鍑嗗闃舵') { + console.log("鍑嗗闃舵" + statusGif); + statusGif = 'zanting' + } else if (res.level === '骞茬嚗闃舵' || res.level === '姝e湪骞茬嚗') { + statusGif = 'tmrefeng2' + } else if (res.level === '缈绘枡闃舵') { + statusGif = 'fanliao-N' + } else if (res.level === '鍑烘枡闃舵') { + statusGif = 'chuliao-N' + } + // if (res.state_fan == 1) { + // statusGif = 'tmrefeng2' + // statusTxt = '姝e湪骞茬嚗' + // } + + // if (res.state_roller == 4) { + // statusGif = 'fanliao-N' + // statusTxt = '姝e湪缈绘枡' + // } + + // if (res.state_roller == 5) { + // statusGif = 'chuliao-N' + // statusTxt = '姝e湪鍑烘枡' + // } + + // if (res.state_windbox == 2 || res.state_windbox == 3) { + // statusGif = 'fengxiangsheng-1' + // statusTxt = '姝e湪骞茬嚗' + // } + } else if (res.orderStatus == 3) { + statusGif = 'zanting' + statusTxt = '鏆傚仠' + } else if (res.orderStatus == 4) { + statusGif = 'zanting' + statusTxt = '骞茬嚗瀹屾垚' + } + } + + + if (compareChart) { + compareChart.setOption({ + yAxis: { + data: res.compEqpNum, + }, + series: { + data: res.compEqpEffic, + }, + }) + } + + res.herbImage = 'yaocai1.png' + + if (res.herbName == '鐧借姳铔囪垖鑽�') { + res.herbImage = 'baihuasheshecao.png' + } else if (res.herbName == '绯ョɑ鏍�') { + res.herbImage = 'nuodaogen.png' + } else if (res.herbName == '娣緤钘�') { + res.herbImage = 'yinyanghuo.png' + } else if (res.herbName == '椹娇鑻�') { + res.herbImage = 'machixian.png' + } else if (res.herbName == '澧ㄦ棻鑾�') { + res.herbImage = 'mohanlian.png' + } else if (res.herbName == '妗戠櫧鐨�') { + res.herbImage = 'sangbaipi.png' + } + + res.isError = false + if (res.fault) { + res.isError = true + res.errorMsg = res.fault + } + + if (res.warning) { + res.isWarning = true + res.warnMsg = res.warning + } + + + + } else { + res = { + mois: [], + gif: 'tmrefeng2', + herbImage: 'yaocai1.png', + } + } + + //console.log(`output->res`, res) + realData.value = res + }) + } + } + + var move = true + function moveImage() { + if (move) { + position.value -= 0.3 + } else { + position.value += 0.3 + } + if (position.value < -240) { + move = false + } + if (position.value > -1) { + move = true + } + } + + function back() { + router.back() + } + + listAllEqp() + //queryEqp() + // DOM鎸傝浇瀹屾垚鍚庢覆鏌撳浘琛� + onMounted(() => { + Timer.value = setInterval(queryRealTime, 3000) + Timer2.value = setInterval(moveImage, 50) + }) + + onUnmounted(() => { + clearInterval(Timer.value) + clearInterval(Timer2.value) + Timer.value = null + Timer2.value = null + }) +</script> + +<style scoped> + .eqpBox { + height: 100%; + } + .eqpRow { + } + .eqpImage { + height: 1080px; + width: 1920px; + background-image: url(/src/assets/images/dry/bg.png); + background-repeat: no-repeat; + color: white; + /*background-position: 160px 280px; */ + /* background-color: red; */ + background-size: 120%; + padding: 10px; + display: flex; + flex-wrap: wrap; + align-content: flex-start; + } + + .leftEqp { + height: 1080px; + width: 1200px; + display: flex; + flex-wrap: wrap; + align-content: flex-start; + + /* background-color: white; + background-image: url(/src/assets/images/dry/shebei1.png); + background-repeat: no-repeat; + background-size: 125%; + border-radius: 10px; + background-position: -119px 293px; */ + } + + .leftTop { + height: 750px; + width: 850px; + display: flex; + justify-content: center; + align-content: flex-start; + background-image: url(/src/assets/images/dry/ganzaoji-x.png); + background-repeat: no-repeat; + background-size: 79%; + border-radius: 10px; + flex-wrap: wrap; + background-position: 85px 279px; + } + .leftMid { + width: 850px; + height: 300px; + /* border: 1px solid; */ + margin-top: 10px; + border-radius: 10px; + /* background: white; */ + } + .mainInfo { + line-height: 33px; + padding-left: 10px; + font-size: 30px; + color: white; + } + .subhead { + color: #a19f9c; + font-size: 16px; + padding-left: 10px; + } + + .mainInfo2 { + line-height: 20px; + padding-left: 0px; + font-size: 16px; + } + .subhead2 { + color: #a19f9c; + font-size: 10px; + padding-left: 0px; + } + .zhengqi { + height: 180px; + width: 200px; + background-image: url(/src/assets/images/dry/liuliangji.png); + background-repeat: no-repeat; + background-size: 160px; + /* border-radius: 10px; */ + background-position: 17px -6px; + } + + .liuliangji { + } + .leftData { + height: 250px; + width: 120px; + } + .rightChart { + height: 270px; + width: 170px; + margin-top: -30px; + } + .leftTop0 { + height: 600px; + width: 848px; + display: flex; + justify-content: center; + align-content: flex-start; + flex-wrap: wrap; + } + .leftTop1 { + width: 180px; + height: 200px; + text-align: center; + display: flex; + justify-content: center; + align-items: center; + font-size: 30px; + color: #727272; + } + .leftTop2 { + width: 250px; + height: 200px; + text-align: center; + display: flex; + justify-content: center; + align-items: center; + font-size: 30px; + color: #727272; + } + .leftTop3 { + width: 300px; + height: 200px; + /* background-image: url(/src/assets/images/dry/fanliao.gif); */ + background-repeat: no-repeat; + background-position: 0px 20px; + background-size: 300px; + border-radius: 50px; + } + + .eqpStatus { + width: 848px; + height: 300px; + + + } + .rightInfo { + display: flex; + flex-wrap: wrap; + align-content: flex-start; + height: 1060px; + width: 700px; + } + + .rightTop { + display: flex; + height: 440px; + padding-left: 10px; + } + .rightTwo { + display: flex; + flex-wrap: wrap; + } + + .infoChart { + width: 340px; + height: 300px; + /* background: white; */ + margin-left: 10px; + margin-top: 10px; + border-radius: 10px; + } + .chartTittle { + width: 340px; + height: 30px; + font-size: 16px; + display: flex; + justify-content: space-between; + padding: 15px 15px; + } + .chartInfo { + width: 60px; + height: 180px; + } + + .compareBar { + width: 55px; + height: 140px; + } + .margintop-30 { + margin-top: -30px; + } + + .barTop { + width: 55px; + height: 30px; + } + .barBack { + width: 30px; + height: 100px; + /* border: 1px solid black; */ + display: flex; + flex-wrap: wrap; + align-content: flex-end; + } + .barDiv { + width: 100%; + + background-color: #1595ea; + } + .bad { + background-color: #973535; + } + .rightLabel { + width: 110px; + display: flex; + justify-content: space-between; + } + .label { + color: white; + text-align: center; + width: 50px; + border-radius: 4px; + height: 20px; + font-size: 10px; + line-height: 21px; + } + .good { + background-color: #0d6e24; + } + + .mainInfo3 { + font-size: 24px; + } + .herbInfo { + width: 340px; + height: 510px; + color: #727272; + } + + .curEqp { + width: 340px; + height: 170px; + + /* background: white; + border-radius: 10px; */ + } + .curHerb { + margin-top: 10px; + width: 340px; + height: 320px; + /* background: white; + border-radius: 10px; */ + + background-repeat: no-repeat; + background-size: 200px; + background-position: 0px 10px; + } + .tempMoisChart { + width: 690px; + height: 440px; + /* background: white; */ + + padding: 20px; + border-radius: 10px; + } + .topLeft { + margin: 20px 40px 60px 20px; + padding: 15px; + /* background: white; */ + border-radius: 10px; + height: 325px; + width: 440px; + /* background-image: url(/src/assets/images/dry/yaocai.jpg); */ + background-repeat: no-repeat; + background-size: 164px 132px; + background-position: 239px 65px; + display: flex; + } + .topMid { + margin: 20px 20px 60px 40px; + /* background: white; */ + border-radius: 10px; + background-image: url(/src/assets/images/dry/fanliao.gif); + background-repeat: no-repeat; + background-position: 0px 20px; + background-size: 400px; + width: 400px; + + padding: 20px; + } + .topRight { + margin: 20px 20px 60px 20px; + /* background: white; */ + border-radius: 10px; + width: 700px; + padding: 20px; + } + .midLeft { + height: 450px; + width: 600px; + display: flex; + padding: 0 20px 20px 20px; + } + .midMid { + width: 500px; + padding-top: 50px; + } + + .midRight { + background-image: url(/src/assets/images/dry/fengjixz.gif); + background-repeat: no-repeat; + background-position: 150px 260px; + background-size: 120px 120px; + width: 600px; + } + + .shangJianTou { + margin-left: 140px; + width: 70px; + height: 100px; + background-image: url(/src/assets/images/dry/shangjiantoutou.gif); + background-repeat: no-repeat; + background-position: 0px 0px; + background-size: 70px 100px; + } + + + .aiback { + background-image: url(/src/assets/images/dry/gif2.gif); + background-repeat: no-repeat; + background-size: 100% 100%; + opacity: 0.7; + } + .zoujiantou { + margin-left: 225px; + margin-top: 30px; + width: 100px; + height: 70px; + background-image: url(/src/assets/images/dry/zuojiantou.gif); + background-repeat: no-repeat; + background-position: 0px 0px; + background-size: 100px 70px; + } + .fault { + padding: 10px; + height: 60px; + font-size: 26px; + width: 100%; + text-align: right; + color: red; + } + .eqpName { + padding: 20px; + + height: 160px; + } + + .formula { + display: flex; + width: 340px; + height: 60px; + padding: 0 20px; + justify-content: space-around; + justify-items: center; + } + + .formulaItem { + display: flex; + justify-content: center; + width: 100px; + height: 40px; + } + + .eqpInfoText { + font-size: 18px; + font-weight: bold; + } + + :deep() .ant-slider-mark-text { + padding-left: 15px; + font-size: 10px; + } + :deep() .ant-slider-mark-text::before { + content: ''; + display: block; + width: 6px; + height: 1px; + background-color: #1890ff; + + position: absolute; + top: 10px; + left: 0px; + } + + /* .aiProgress :deep() .ant-progress-inner { + background: none; + } */ + .aiProgress :deep() .ant-progress-text { + display: none; + } + + .redProgress :deep() .ant-progress-bg { + background:#ce0000 + } + + :deep() .ant-progress-inner { + background:#191919 + } + :deep() .ant-progress-text { + color: white; + } + :deep() .ant-slider-rail { + width: 10px !important; + border-radius: 6px 6px 0 0; + background: linear-gradient(to top, #ce0000 0%, #ce0000 40%, #ce0000 75%, rgb(160, 160, 160) 100%); + } + :deep() .ant-slider-track { + background: rgb(216, 216, 216); + + height: 20px; + width: 10px !important; + border-radius: 6px 6px 0 0; + } + :deep() .ant-slider-track:hover { + } + :deep() .ant-slider-handle { + display: none; + } + :deep() .ant-slider-dot { + display: none; + } + :deep() .ant-slider-step { + width: 10px !important; + } + :deep() .ant-slider-step > :first-child { + display: block !important; + width: 30px !important; + height: 30px !important; + bottom: -26px !important; + left: -6px; + border: none; + background: #ce0000; + } + /* :deep() .progress { + padding: 15px 15px; + + width: 360px; + display: flex; + } */ + :deep() .ant-progress-bg { + height: 15px !important; + } + .outDiv { + display: flex; + justify-content: center; + justify-items: center; + } + .blingbling { + -webkit-animation: scaleout 2s infinite ease-in-out; + animation: scaleout 2s infinite ease-in-out; + } + + .blingbling1 { + -webkit-transition: -webkit-transform 0.4s ease-in-out; + transition: transform 0.4s ease-in-out; + + } + .blingbling1:hover { + -webkit-transform: scale(1.2); + transform: scale(1.2); + } + + .center { + display: flex; + justify-content: center; + justify-items: center; + align-items: center; + flex-wrap: wrap; + text-align: center; + } + + .flex { + display: flex; + } + .centerText { + width: 100%; + text-align: center; + } + + @-webkit-keyframes scaleout { + 0% { + -webkit-transform: scale(1); + } + + 50% { + -webkit-transform: scale(1.2); + + } + 100% { + -webkit-transform: scale(1); + + } + } + + @keyframes scaleout { + 0% { + transform: scale(1); + -webkit-transform: scale(1); + } + + 50% { + transform: scale(1.2); + -webkit-transform: scale(1.2); + + } + 100% { + transform: scale(1); + -webkit-transform: scale(1); + + } + } + .timeProgress { + width: 260px; + height: 60px; + margin-left: 40px; + margin-top: 50px; + } + + .aiProgress { + width: 260px; + height: 50px; + margin-left: 20px; + margin-top: 42px; + } + .leftLabel { + width: 50px; + margin-top: -10px; + } + .leftLabel2 { + width: 80px; + } + .aigif { + width: 100%; height: 100%; + opacity: 0.7; + margin-top: -40px; + background-image: url(/src/assets/images/dry/gif2.gif); + background-repeat: no-repeat; + background-size: 79%; + } +</style> diff --git a/src/views/dry/bigScreen/BigWorkShop.vue b/src/views/dry/bigScreen/BigWorkShop.vue index af6143f..9c9db95 100644 --- a/src/views/dry/bigScreen/BigWorkShop.vue +++ b/src/views/dry/bigScreen/BigWorkShop.vue @@ -6,7 +6,7 @@ <div style="width: 600px; height: 50px"> <dv-decoration-8 style="width: 500px; height: 50px" /></div> <div class="title"> - <span>鍏版郸鏅鸿兘骞茬嚗杞﹂棿</span> + <span>{{ title }}</span> <dv-decoration-5 :dur="20" style="margin-top: -40px; width: 700px; height: 80px" /> </div> @@ -27,11 +27,149 @@ <div style="font-size: 20px; line-height: 26px"> 53 %rh </div> </div> </div> + <div class="feed"> + <div style="width: 700px; margin-left: 50px; display: flex; flex-direction: column; height: 950px; justify-content: space-between;"> + + <div style="display: flex; flex-wrap: wrap; justify-content: space-between;"> + <dv-border-box7 style="width: 210px; height: 100px; padding:10px"> + <div class="statistics putincolor"> + <div class="stat_label font16"> + 鎬绘姇鏂欓噺 + </div> + <div class="stat_value"> + 5066 + <span class="font16"> + Kg + </span> + </div> + <div class="stat_avg"> + <div> + 棰勮浜ч噺 + </div> + <div> + 2321kg + </div> + </div> + </div> + </dv-border-box7> + <dv-border-box7 style="width: 210px; height: 100px; padding:10px"> + <div class="statistics putincolor"> + <div class="stat_label font16"> + 鐢甸噺娑堣�� + </div> + <div class="stat_value"> + 462 + <span class="font16"> + Kwh + </span> + </div> + <div class="stat_avg"> + <div> + 骞冲潎鐢佃�� + </div> + <div> + 13 Kwh/kg + </div> + </div> + </div> + </dv-border-box7> + <dv-border-box7 style="width: 210px; height: 100px; padding:10px"> + <div class="statistics putincolor"> + <div class="stat_label font16"> + 钂告苯娑堣�� + </div> + <div class="stat_value"> + 683 + <span class="font16"> + m鲁 + </span> + </div> + <div class="stat_avg"> + <div> + 骞冲潎姹借�� + </div> + <div> + 23 m鲁 + </div> + </div> + </div> + </dv-border-box7> + <!-- <div class="statistics putincolor"> + <div class="stat_label font16">棰勮浜ч噺</div> + <div class="stat_value">3000</div> + + <div class="font16"> + <br/> + Kg + </div> + </div> --> + </div> + + <div> + <!-- <div class="statistics electroncolor"> + <div class="stat_label font16">鐢甸噺娑堣��</div> + <div class="stat_value">500</div> + <div class="font16"> + <br/> + Kwh + </div> + + </div> + <div class="statistics steamcolor"> + <div class="stat_label font16">钂告苯娑堣��</div> + <div class="stat_value">300</div> + <div class="font16"> + <br/> + m鲁 + </div> + + </div> + + <div class="statistics electroncolor"> + <div class="stat_label font16">骞冲潎鐢佃��</div> + <div class="stat_value">12</div> + <div class="font16"> + <br/> + Kwh/kg + </div> + + </div> + <div class="statistics steamcolor"> + <div class="stat_label font16">骞冲潎姹借��</div> + <div class="stat_value">300</div> + <div class="font16"> + <br/> + m鲁/kg + </div> + + </div> --> + </div> + + + </div> + <!-- <div style="padding-right: 100px;"> + <div class="statistics"> + <div class="stat_label font16">骞叉枡浜ч噺</div> + <div class="stat_value">300</div> + <div class="font16"> + <br/> + kg + </div> + + </div> + </div> --> + + + </div> <div class="up"> <div v-for="num in eqpNum" :key="num" :class="{ one: num === 1, two: num === 2, three: num === 3, four: num === 4 }"> <div class="eqpInfoup" @click="gotoeqp(num - 1)"> <div class="eqp-title"> - <div class="eqp-name">{{ eqpMap.get(eqpCodes[num - 1])?.name || '棰勭暀' }}</div> + <div class="herb_weight"> + <div>{{ realTime.get(eqpCodes[num - 1])?.herbName || '鏆傛棤' }}</div> + <div>{{ realTime.get(eqpCodes[num - 1])?.originWeight || 0 }} Kg</div> + </div> + <!-- <div class="eqp-name">{{ eqpMap.get(eqpCodes[num - 1])?.name || '棰勭暀' }}</div> --> <!-- <div class="process"> </div> --> <Progress :stroke-color="{ @@ -44,8 +182,11 @@ :show-info="false" /> <div class="eqp-timer"> - <div><Icon style="color: rgb(42 154 234)" icon="mdi:clock-outline" :size="20" /> - {{realTime.get(eqpCodes[num - 1])?.dryTime || 0}} min + <div><Icon style="color: #1850b7" icon="ic:twotone-water-drop" :size="20" /> + {{ realTime.get(eqpCodes[num - 1])?.trendVo?.moisture.toFixed(1) || '0' }} % + </div> + <div><Icon style="color: #873853" icon="fluent:temperature-20-regular" :size="20" /> + {{realTime.get(eqpCodes[num - 1])?.trendVo?.bellowsTemp.toFixed(0) || '0'}} 鈩� </div> <div><Icon style="color: rgb(134 207 106)" icon="gg:sand-clock" :size="20" /> {{ realTime.get(eqpCodes[num - 1])?.totalRemain||0}} min @@ -53,15 +194,20 @@ </div> </div> <div class="eqp-info-up"> - <div class="herb"> + <!-- <div class="herb"> <div>{{ realTime.get(eqpCodes[num - 1])?.herbName || '鏆傛棤' }}</div> - <!-- <div>33 Kg</div> --> - </div> + + </div> --> </div> - <div class="weight"><div class="herb">{{ realTime.get(eqpCodes[num - 1])?.originWeight || 0 }} Kg</div></div> + <!-- <div class="weight"><div class="herb">{{ realTime.get(eqpCodes[num - 1])?.originWeight || 0 }} Kg</div></div> --> + + <div class="weight"><div class="herb"> + {{ showInfo(realTime.get(eqpCodes[num - 1])) }} + </div></div> <div class="water"> - <div class="temp"> + <div class="eqp_num">{{ num }}</div> + <!-- <div class="temp"> <div style="line-height: 28px"><Icon style="color: #1850b7" icon="ic:twotone-water-drop" :size="28" /> </div> <div class="font"> <span class="value"> {{ realTime.get(eqpCodes[num - 1])?.trendVo?.moisture || '0' }}</span> % @@ -72,7 +218,7 @@ <div class="font"> <span class="value">{{ realTime.get(eqpCodes[num - 1])?.trendVo?.bellowsTemp || '0' }} </span> 鈩� </div> - </div> + </div> --> </div> </div> </div> @@ -80,12 +226,14 @@ <div class="down"> <div v-for="num in eqpNum" :key="num" :class="{ one: num === 1, two: num === 2, three: num === 3, four: num === 4 }"> <div class="eqpInfodown" @click="gotoeqp(num + 3)"> - <div class="eqp-info-down"> + <!-- <div class="eqp-info-down"> <div class="herb">{{ realTime.get(eqpCodes[num + 3])?.herbName || '鏆傛棤' }}</div> </div> - <div class="weight"><div class="herb">{{ realTime.get(eqpCodes[num + 3])?.originWeight || 0 }} Kg </div></div> + <div class="weight"><div class="herb">{{ realTime.get(eqpCodes[num + 3])?.originWeight || 0 }} Kg </div></div> --> + <div class="weight"><div class="herb">{{ showInfo(realTime.get(eqpCodes[num + 3])) }}</div></div> <div class="water"> - <div class="temp"> + <div class="eqp_num">{{ num + 4 }}</div> + <!-- <div class="temp"> <div style="line-height: 28px"> <Icon style="color: #1850b7" icon="ic:twotone-water-drop" :size="28" /> </div> @@ -98,12 +246,15 @@ <div class="font"> <span class="value">{{ realTime.get(eqpCodes[num + 3])?.trendVo?.bellowsTemp || '0' }}</span> 鈩� </div> - </div> + </div> --> </div> - <div style="height: 50px"></div> + <div style="height: 40px"></div> <div class="eqp-title"> - <div class="eqp-name-down">{{ eqpMap.get(eqpCodes[num + 3])?.name || '棰勭暀' }}</div> + <div class="herb_weight"> + <div>{{ realTime.get(eqpCodes[num + 3])?.herbName || '鏆傛棤' }}</div> + <div>{{ realTime.get(eqpCodes[num + 3])?.originWeight || 0 }} Kg</div> + </div> <Progress :stroke-color="{ @@ -117,9 +268,15 @@ /> <!-- <div class="eqp-name">50%</div> --> <div class="eqp-timer"> - <div><Icon style="color: rgb(42 154 234)" icon="mdi:clock-outline" :size="20" /> - {{realTime.get(eqpCodes[num + 3])?.dryTime || 0}} min + <div><Icon style="color: #1850b7" icon="ic:twotone-water-drop" :size="20" /> + {{ realTime.get(eqpCodes[num + 3])?.trendVo?.moisture.toFixed(1) || '0' }} % </div> + <div><Icon style="color: #873853" icon="fluent:temperature-20-regular" :size="20" /> + {{realTime.get(eqpCodes[num + 3])?.trendVo?.bellowsTemp.toFixed(0) || '0'}} 鈩� + </div> + <!-- <div><Icon style="color: rgb(42 154 234)" icon="mdi:clock-outline" :size="20" /> + {{realTime.get(eqpCodes[num + 3])?.dryTime || 0}} min + </div> --> <div><Icon style="color: rgb(134 207 106)" icon="gg:sand-clock" :size="20" /> {{ realTime.get(eqpCodes[num + 3])?.totalRemain||0}} min </div> @@ -130,7 +287,7 @@ </div> <div class="footer"> - <div >{{ nowDate }}</div> + <div >{{ nowDate }}</div> <div >{{ nowTime }}</div> </div> </div> @@ -152,8 +309,15 @@ const eqpMap = ref(new Map()) const eqpCodes = ref(['GM001', 'GM002', 'GM003', 'GM004', 'GM005', 'GM006', 'GM007', 'GM008']) const eqps = ref([] as dryEquipment[]) - + const title = ref("鍏版郸鏅鸿兘骞茬嚗杞﹂棿") const userStore = useUserStore() + console.log(userStore.dictItems.title) + userStore.dictItems.title?.forEach(element => { + if (element.value === "bigscreentitle") { + title.value = element.text + } + + }); const Timer = ref() const realTime = ref(new Map()) @@ -164,7 +328,7 @@ function listAllEqp() { listAll({ enable: 'Y' }) .then((result) => { - //console.log(`output->result`, result) + console.log(`output->result`, result) eqps.value = result result.forEach((item) => { @@ -185,6 +349,7 @@ } function queryRealTime(eqp: dryEquipment) { + let tenantId = userStore.getTenant let eqpCode = eqp.code let queryRealTimeUrl = '/dry/real/getRealTimeData' @@ -214,6 +379,7 @@ }) } function gotoeqp(num) { + console.log('璺宠浆鏈哄彴',num); if (num < eqpCodes.value.length) { router.push({ path: '/bigEqp', query: { num: num } }) } @@ -224,6 +390,10 @@ nowDate.value = (date.getFullYear()) + "/" + (date.getMonth()< 9? "0" + (date.getMonth() + 1): date.getMonth() + 1) + "/" + (date.getDay() < 10? "0" + date.getDay() : date.getDay()) nowTime.value = "" + (date.getHours()<10? "0" + date.getHours() : date.getHours()) + ":" + (date.getMinutes()< 10? "0" + date.getMinutes(): date.getMinutes()) //console.log("鑾峰彇褰撳墠鏃堕棿锛�"); + } + + function showInfo(data) { + return data?data.fault?data.fault:data.warning?data.warning:data.level?data.level:'绌洪棽':'绌洪棽' } getNowTime() @@ -252,7 +422,7 @@ background-image: url(/src/assets/images/dry/bg/wksp2.png); background-repeat: no-repeat; background-size: 100%; - background-position: 0% 50%; + background-position: 0px 50px; } .head { @@ -283,8 +453,16 @@ display: flex; } + .feed { + display: flex; + height: 0px; + color: gray; + padding-top: 20px; + justify-content: space-between; + } + .up { - padding-left: 100px; + padding-left: 110px; padding-top: 00px; display: flex; @@ -292,36 +470,37 @@ justify-content: flex-start; } .down { - padding-left: 392px; - margin-top: -334px; + padding-left: 402px; + margin-top: -367px; display: flex; align-content: center; justify-content: flex-start; } .eqpInfoup { - width: 280px; - height: 315px; - margin: -20px 41px; + width: 300px; + height: 400px; + margin: -50px 31px; display: flex; flex-direction: column; } .eqpInfodown { - width: 280px; - height: 315px; - margin: 0 41px; + width: 300px; + height: 430px; + margin: 0 31px; + padding-top: 132px; display: flex; flex-direction: column; justify-content: flex-start; } .one { - margin-top: 280px; + margin-top: 278px; } .two { - margin-top: 220px; + margin-top: 219px; } .three { @@ -329,15 +508,15 @@ } .four { - margin-top: 100px; + margin-top: 101px; } .eqp-title { - height: 45px; - border-radius: 20px; - /* background: rgb(182, 182, 182); - border: 1px solid green; */ - width: 100%; + height: 125px; + + width: 100%; + + padding: 10px 20px; } .eqp-name { @@ -352,7 +531,7 @@ text-align: center; color: white; margin-top: 6px; - justify-content: space-around; + justify-content: space-between; display: flex; } @@ -372,14 +551,14 @@ .eqp-info-up { flex: 1; - padding-top: 120px; + padding-top: 108px; display: flex; } .weight { flex: 1; display: flex; - font-size: 16px; + font-size: 20px; } .eqp-info-down { @@ -389,7 +568,7 @@ } .herb { - height: 30px; + height: 32px; background: #3f4c6b; color: white; line-height: 30px; @@ -398,10 +577,9 @@ .water { height: 120px; width: 110px; - margin-left: 170px; + margin-left: 200px; display: flex; - flex-wrap: wrap; - align-content: space-evenly; + flex-wrap: wrap; } .temp { @@ -421,6 +599,7 @@ align-items: flex-end; color: white; line-height: 40px; + margin-top: -150px; } :deep() .progress { @@ -435,4 +614,58 @@ :deep() .ant-progress-inner { background-color: rgb(197 197 197 / 84%) !important; } + + .statistics { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + + } + .stat_label { + width:45px + } + + .stat_value { + font-size: 32px + } + + .herb_weight { + padding: 0 10px; + color: white; + display: flex; + justify-content: space-between; + } + .eqp_num { + font-weight: bold; + width: 40px; + height: 40px; + background: #a0782e; + border-radius: 50px; + /* text-align: center; */ + font-size: 23px; + color: white; + display: flex; + justify-content: center; + align-items: center; + } + + .putincolor { + color: antiquewhite; + } + + .electroncolor { + color: aquamarine; + } + + .steamcolor { + color: sandybrown + } + .font16 { + font-size: 16px; + } + .stat_avg { + width: 100%; font-size: 16px; display: flex; color: rgb(176, 176, 176); justify-content: space-between; border-top: 1px solid; + margin-top: 6px; + } </style> diff --git a/src/views/dry/dataDefine/DryEquipment.data.ts b/src/views/dry/dataDefine/DryEquipment.data.ts index e57a768..759f100 100644 --- a/src/views/dry/dataDefine/DryEquipment.data.ts +++ b/src/views/dry/dataDefine/DryEquipment.data.ts @@ -26,6 +26,11 @@ dataIndex: 'remark', }, { + title: '璁惧IP', + align: 'center', + dataIndex: 'ip', + }, + { title: '杞﹂棿id', align: 'center', dataIndex: 'shopId_dictText', @@ -91,6 +96,14 @@ component: 'Input', dynamicRules: ({ model, schema }) => { return [{ required: true, message: '璇疯緭鍏ヨ澶囧悕绉�!' }, { ...rules.duplicateCheckRule('dry_equipment', 'name', model, schema)[0] }] + }, + }, + { + label: '璁惧IP', + field: 'ip', + component: 'Input', + dynamicRules: ({ model, schema }) => { + return [{ required: true, message: '璇风粦瀹氳澶嘔P!' }, { ...rules.duplicateCheckRule('dry_equipment', 'ip', model, schema)[0] }] }, }, { @@ -161,5 +174,6 @@ update_by: string update_time: Date tenant_id: number + ip: string order: dryOrder } diff --git a/src/views/dry/monitor/Eqp.vue b/src/views/dry/monitor/Eqp.vue index 2660e45..a9a8e74 100644 --- a/src/views/dry/monitor/Eqp.vue +++ b/src/views/dry/monitor/Eqp.vue @@ -931,7 +931,7 @@ // '#DBE165', // ], animation: false, // 鍏抽棴鍔ㄧ敾 - color: ['#397FD7', '#2D8CDE', '#239CE5', '#1DA4E8', '#14B2EF', '#0BC4FA', '#02D2FF', '#19EEFF', '#33FAFF', '#5EFFF8'], + color: ['#397FD7', '#2D8CDE', '#239CE5', '#1DA4E8', '#14B2EF', '#0BC4FA', '#02D2FF', '#19EEFF', '#33FAFF', '#5EFFF8', '#60FFFE', '#64FAFF', '#70FFFF', '#7BFFFF', '#88FFFD', '#97FFFF', '#A5FFFD', '#B1FFFF', '#BFFFFF', '#CAFFFF'], grid: { top: '12%', left: '20', @@ -1291,7 +1291,7 @@ var ganZaoXiaoLv = [] var zhengQiXiaoHao = [] var dianNengXiaoHao = [] - var totalTime = 0 + var totalTime = 1 var beforeWeight = 0 res.moisList = [] diff --git a/src/views/dry/monitor/WorkShop.vue b/src/views/dry/monitor/WorkShop.vue index 5d7f2c1..10a219a 100644 --- a/src/views/dry/monitor/WorkShop.vue +++ b/src/views/dry/monitor/WorkShop.vue @@ -583,4 +583,15 @@ border: none; background: #ce0000; } + + + .blingbling { + -webkit-transition: -webkit-transform 0.4s ease-in-out; + transition: transform 0.4s ease-in-out; + + } + .blingbling:hover { + -webkit-transform: scale(1.1); + transform: scale(1.1); + } </style> diff --git a/src/views/system/dict/dict.data.ts b/src/views/system/dict/dict.data.ts index bd0b77d..c616581 100644 --- a/src/views/system/dict/dict.data.ts +++ b/src/views/system/dict/dict.data.ts @@ -137,7 +137,7 @@ if (!value) { return Promise.reject('璇疯緭鍏ユ暟鎹��'); } - if (new RegExp("[`~!@#$^&*()=|{}'.<>銆娿��/?锛侊骏锛堬級鈥斻�愩�戔�橈紱锛氣�濃�溿�傦紝銆侊紵]").test(value)) { + if (new RegExp("[`~!@#$^&*()=|{}'<>銆娿��/?锛侊骏锛堬級鈥斻�愩�戔�橈紱锛氣�濃�溿�傦紝銆侊紵]").test(value)) { return Promise.reject('鏁版嵁鍊间笉鑳藉寘鍚壒娈婂瓧绗︼紒'); } return new Promise<void>((resolve, reject) => { -- Gitblit v1.9.3