From 34ff338ff4d6575f9a25457286b3a5aad6b8823b Mon Sep 17 00:00:00 2001 From: baoshiwei <baoshiwei@shlanbao.cn> Date: 星期三, 07 六月 2023 14:47:25 +0800 Subject: [PATCH] 增加车间监控和设备监控 --- src/views/dry/dataDefine/DryEquipment.data.ts | 1 src/assets/images/dry/shebei1.png | 0 src/assets/images/dry/chaiwangban.gif | 0 src/assets/images/dry/chuliao.gif | 0 src/views/dry/monitor/WorkShop copy.vue | 516 +++++++ src/assets/images/dry/liuliangji.png | 0 src/assets/images/dry/fanliao.gif | 0 src/views/dry/monitor/WorkShop.vue | 536 ++++--- src/assets/images/dry/shangjiantoutou.gif | 0 src/assets/images/dry/fengjixuanzhuan - 副本.psd | 0 src/assets/images/dry/kaimen.gif | 0 src/assets/images/dry/fengjixuanzhuan.psd | 0 src/views/dry/api/DryEquipment.api.ts | 8 src/views/dry/monitor/Eqp.vue | 1770 ++++++++++++++++++++++++++ src/assets/images/dry/fengjixuanzhuan.gif | 0 src/assets/images/dry/zuojiantou.gif | 0 src/views/system/usersetting/UserSetting.data.ts | 261 +- src/assets/images/dry/fengji.png | 0 src/assets/images/dry/refeng.gif | 0 src/views/dry/monitor/Eqp copy 2.vue | 763 +++++++++++ src/assets/images/dry/guanmen.gif | 0 src/assets/images/dry/yaocai.jpg | 0 src/assets/images/dry/shangjiantou.gif | 0 src/assets/images/dry/fengxiangsheng.gif | 0 src/views/dry/api/DryOrder.api.ts | 70 src/assets/images/dry/zhuangwangban.gif | 0 src/assets/images/dry/fengjixz.gif | 0 src/assets/images/dry/refeng2.gif | 0 src/assets/images/dry/shangliao.gif | 0 src/views/dry/monitor/Eqp copy.vue | 106 + src/assets/images/dry/chuliao1.gif | 0 31 files changed, 3,635 insertions(+), 396 deletions(-) diff --git a/src/assets/images/dry/chaiwangban.gif b/src/assets/images/dry/chaiwangban.gif new file mode 100644 index 0000000..65a6368 --- /dev/null +++ b/src/assets/images/dry/chaiwangban.gif Binary files differ diff --git a/src/assets/images/dry/chuliao.gif b/src/assets/images/dry/chuliao.gif new file mode 100644 index 0000000..f14834f --- /dev/null +++ b/src/assets/images/dry/chuliao.gif Binary files differ diff --git a/src/assets/images/dry/chuliao1.gif b/src/assets/images/dry/chuliao1.gif new file mode 100644 index 0000000..9a145ce --- /dev/null +++ b/src/assets/images/dry/chuliao1.gif Binary files differ diff --git a/src/assets/images/dry/fanliao.gif b/src/assets/images/dry/fanliao.gif new file mode 100644 index 0000000..5e5017f --- /dev/null +++ b/src/assets/images/dry/fanliao.gif Binary files differ diff --git a/src/assets/images/dry/fengji.png b/src/assets/images/dry/fengji.png new file mode 100644 index 0000000..fa3bbc0 --- /dev/null +++ b/src/assets/images/dry/fengji.png Binary files differ diff --git "a/src/assets/images/dry/fengjixuanzhuan - \345\211\257\346\234\254.psd" "b/src/assets/images/dry/fengjixuanzhuan - \345\211\257\346\234\254.psd" new file mode 100644 index 0000000..eb1fa81 --- /dev/null +++ "b/src/assets/images/dry/fengjixuanzhuan - \345\211\257\346\234\254.psd" Binary files differ diff --git a/src/assets/images/dry/fengjixuanzhuan.gif b/src/assets/images/dry/fengjixuanzhuan.gif new file mode 100644 index 0000000..d1b1a25 --- /dev/null +++ b/src/assets/images/dry/fengjixuanzhuan.gif Binary files differ diff --git a/src/assets/images/dry/fengjixuanzhuan.psd b/src/assets/images/dry/fengjixuanzhuan.psd new file mode 100644 index 0000000..0f4b5ed --- /dev/null +++ b/src/assets/images/dry/fengjixuanzhuan.psd Binary files differ diff --git a/src/assets/images/dry/fengjixz.gif b/src/assets/images/dry/fengjixz.gif new file mode 100644 index 0000000..02cfa55 --- /dev/null +++ b/src/assets/images/dry/fengjixz.gif Binary files differ diff --git a/src/assets/images/dry/fengxiangsheng.gif b/src/assets/images/dry/fengxiangsheng.gif new file mode 100644 index 0000000..fdb7b14 --- /dev/null +++ b/src/assets/images/dry/fengxiangsheng.gif Binary files differ diff --git a/src/assets/images/dry/guanmen.gif b/src/assets/images/dry/guanmen.gif new file mode 100644 index 0000000..6bd04b0 --- /dev/null +++ b/src/assets/images/dry/guanmen.gif Binary files differ diff --git a/src/assets/images/dry/kaimen.gif b/src/assets/images/dry/kaimen.gif new file mode 100644 index 0000000..2e9890c --- /dev/null +++ b/src/assets/images/dry/kaimen.gif Binary files differ diff --git a/src/assets/images/dry/liuliangji.png b/src/assets/images/dry/liuliangji.png new file mode 100644 index 0000000..8b44d89 --- /dev/null +++ b/src/assets/images/dry/liuliangji.png Binary files differ diff --git a/src/assets/images/dry/refeng.gif b/src/assets/images/dry/refeng.gif new file mode 100644 index 0000000..c7654c1 --- /dev/null +++ b/src/assets/images/dry/refeng.gif Binary files differ diff --git a/src/assets/images/dry/refeng2.gif b/src/assets/images/dry/refeng2.gif new file mode 100644 index 0000000..b0be798 --- /dev/null +++ b/src/assets/images/dry/refeng2.gif Binary files differ diff --git a/src/assets/images/dry/shangjiantou.gif b/src/assets/images/dry/shangjiantou.gif new file mode 100644 index 0000000..75e8458 --- /dev/null +++ b/src/assets/images/dry/shangjiantou.gif Binary files differ diff --git a/src/assets/images/dry/shangjiantoutou.gif b/src/assets/images/dry/shangjiantoutou.gif new file mode 100644 index 0000000..03871b3 --- /dev/null +++ b/src/assets/images/dry/shangjiantoutou.gif Binary files differ diff --git a/src/assets/images/dry/shangliao.gif b/src/assets/images/dry/shangliao.gif new file mode 100644 index 0000000..e7b6585 --- /dev/null +++ b/src/assets/images/dry/shangliao.gif Binary files differ diff --git a/src/assets/images/dry/shebei1.png b/src/assets/images/dry/shebei1.png new file mode 100644 index 0000000..442bc2a --- /dev/null +++ b/src/assets/images/dry/shebei1.png Binary files differ diff --git a/src/assets/images/dry/yaocai.jpg b/src/assets/images/dry/yaocai.jpg new file mode 100644 index 0000000..8e95bf7 --- /dev/null +++ b/src/assets/images/dry/yaocai.jpg Binary files differ diff --git a/src/assets/images/dry/zhuangwangban.gif b/src/assets/images/dry/zhuangwangban.gif new file mode 100644 index 0000000..e2e1e55 --- /dev/null +++ b/src/assets/images/dry/zhuangwangban.gif Binary files differ diff --git a/src/assets/images/dry/zuojiantou.gif b/src/assets/images/dry/zuojiantou.gif new file mode 100644 index 0000000..0b5091b --- /dev/null +++ b/src/assets/images/dry/zuojiantou.gif Binary files differ diff --git a/src/views/dry/api/DryEquipment.api.ts b/src/views/dry/api/DryEquipment.api.ts index 4294d0b..f335966 100644 --- a/src/views/dry/api/DryEquipment.api.ts +++ b/src/views/dry/api/DryEquipment.api.ts @@ -5,6 +5,7 @@ enum Api { list = '/dry/dryEquipment/list', + queryById = '/dry/dryEquipment/queryById', listAll = '/dry/dryEquipment/listAll', save = '/dry/dryEquipment/add', edit = '/dry/dryEquipment/edit', @@ -29,6 +30,13 @@ export const list = (params) => defHttp.get({ url: Api.list, params }) /** + * 鏍规嵁ID鏌ヨ鏈哄彴 + * @param params + * @returns + */ +export const queryById = (params) => defHttp.get({ url: Api.queryById, params }) + +/** * 鎵�鏈夋満鍙� * @param params */ diff --git a/src/views/dry/api/DryOrder.api.ts b/src/views/dry/api/DryOrder.api.ts index 4d0f310..ddc95dd 100644 --- a/src/views/dry/api/DryOrder.api.ts +++ b/src/views/dry/api/DryOrder.api.ts @@ -1,64 +1,70 @@ -import { useMessage } from "/@/hooks/web/useMessage"; -import { defHttp } from '/@/utils/http/axios'; +import { useMessage } from '/@/hooks/web/useMessage' +import { defHttp } from '/@/utils/http/axios' -const { createConfirm } = useMessage(); +const { createConfirm } = useMessage() enum Api { - list = '/dry/dryOrder/list', - save='/dry/dryOrder/add', - edit='/dry/dryOrder/edit', - deleteOne = '/dry/dryOrder/delete', - deleteBatch = '/dry/dryOrder/deleteBatch', - importExcel = '/dry/dryOrder/importExcel', - exportXls = '/dry/dryOrder/exportXls', + list = '/dry/dryOrder/list', + queryByEqp = 'dry/dry/queryByEqp', + save = '/dry/dryOrder/add', + edit = '/dry/dryOrder/edit', + deleteOne = '/dry/dryOrder/delete', + deleteBatch = '/dry/dryOrder/deleteBatch', + importExcel = '/dry/dryOrder/importExcel', + exportXls = '/dry/dryOrder/exportXls', } /** * 瀵煎嚭api * @param params */ -export const getExportUrl = Api.exportXls; +export const getExportUrl = Api.exportXls /** * 瀵煎叆api */ -export const getImportUrl = Api.importExcel; +export const getImportUrl = Api.importExcel /** * 鍒楄〃鎺ュ彛 * @param params */ -export const list = (params) => - defHttp.get({url: Api.list, params}); +export const list = (params) => defHttp.get({ url: Api.list, params }) + +/** + * 鏌ヨ鏈哄彴褰撳墠宸ュ崟 + * @param params + */ +export const queryByEqp = (params) => defHttp.get({ url: Api.queryByEqp, params }) /** * 鍒犻櫎鍗曚釜 */ -export const deleteOne = (params,handleSuccess) => { - return defHttp.delete({url: Api.deleteOne, params}, {joinParamsToUrl: true}).then(() => { - handleSuccess(); - }); +export const deleteOne = (params, handleSuccess) => { + return defHttp.delete({ url: Api.deleteOne, params }, { joinParamsToUrl: true }).then(() => { + handleSuccess() + }) } /** * 鎵归噺鍒犻櫎 * @param params */ export const batchDelete = (params, handleSuccess) => { - createConfirm({ - iconType: 'warning', - title: '纭鍒犻櫎', - content: '鏄惁鍒犻櫎閫変腑鏁版嵁', - okText: '纭', - cancelText: '鍙栨秷', - onOk: () => { - return defHttp.delete({url: Api.deleteBatch, data: params}, {joinParamsToUrl: true}).then(() => { - handleSuccess(); - }); - } - }); + createConfirm({ + iconType: 'warning', + title: '纭鍒犻櫎', + content: '鏄惁鍒犻櫎閫変腑鏁版嵁', + okText: '纭', + cancelText: '鍙栨秷', + onOk: () => { + return defHttp.delete({ url: Api.deleteBatch, data: params }, { joinParamsToUrl: true }).then(() => { + handleSuccess() + }) + }, + }) } /** * 淇濆瓨鎴栬�呮洿鏂� * @param params */ export const saveOrUpdate = (params, isUpdate) => { - let url = isUpdate ? Api.edit : Api.save; - return defHttp.post({url: url, params}); + const url = isUpdate ? Api.edit : Api.save + return defHttp.post({ url: url, params }) } diff --git a/src/views/dry/dataDefine/DryEquipment.data.ts b/src/views/dry/dataDefine/DryEquipment.data.ts index 1fb349f..e57a768 100644 --- a/src/views/dry/dataDefine/DryEquipment.data.ts +++ b/src/views/dry/dataDefine/DryEquipment.data.ts @@ -152,6 +152,7 @@ code: string name: string type: string + type_dictText: string remark: string shop_id: string enable: string diff --git a/src/views/dry/monitor/Eqp copy 2.vue b/src/views/dry/monitor/Eqp copy 2.vue new file mode 100644 index 0000000..783b657 --- /dev/null +++ b/src/views/dry/monitor/Eqp copy 2.vue @@ -0,0 +1,763 @@ +<template> + <div class="eqpBox"> + <div class="eqpRow"> + <div class="eqpImage"> + <div class="topLeft"> + <div class="eqpName">璁惧锛歿{ eqp.name }}</div> + <div class="eqpName">鍨嬪彿锛歿{ eqp.type }}</div> + <div class="eqpName">鑽潗锛歿{ realData?.herbName }}</div> + <div class="eqpName">鎶曟枡锛歿{ realData?.feed }} 绛�</div> + <div class="eqpName">閲嶉噺锛歿{ realData?.originWeight }} Kg</div> + </div> + <div class="topMid"> + <div class="shangJianTou"></div> + <div class="zoujiantou"></div> + <div class="eqpInfoText" style="padding-top: 40px; text-align: center">鐑鐑樺共涓�</div> + </div> + <div class="topRight"> + <div :id="'moisChart'" style="width: 660px; height: 285px"></div> + </div> + <div class="midLeft"> + <div style="width: 300px; background: white; border-radius: 10px; padding: 30px 50px"> + <div style="height: 1px; font-size: 18px; text-align: center; margin-top: 10px; margin-bottom: -10px" + >鍒濆锛歿{ (realData?.mois[0] * 100).toFixed(2) }}%</div + > + <div id="moisture" style="width: 200px; height: 300px"></div> + <div style="height: 1px; font-size: 18px; text-align: center; margin-top: -25px">鐩爣锛歿{ (realData?.mois[2] * 100).toFixed(2) }}%</div> + <div style="width: 200px; font-size: 18px; text-align: center; margin-top: 60px; font-weight: bold">鍚按鐜�</div> + </div> + <div style="width: 260px; padding-left: 60px"> + <div style="width: 200px; height: 100px; padding-top: 60px; padding-left: 10px"> + <div style="display: flex; line-height: 40px; align-items: baseline"> + <div style="width: 10px; margin-right: 10px; height: 10px; background-color: #2c4d90"> </div> 鐑樺幓閲嶉噺锛�<span class="eqpInfoText" + >40</span + > + Kg</div + > + <div style="display: flex; line-height: 40px; align-items: baseline"> + <div style="width: 10px; margin-right: 10px; height: 10px; background-color: #1595ea"> </div> 鍓╀綑閲嶉噺锛�<span class="eqpInfoText" + >151</span + > + Kg + </div> + </div> + <div id="weight" style="width: 200px; height: 300px"></div> + </div> + </div> + <div class="midMid"> + <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 class="outDiv eqpStatus"> + <div + style=" + font-size: 28px; + margin-top: 80px; + color: white; + background-color: #1595ea; + height: 60px; + width: 180px; + line-height: 60px; + text-align: center; + border-radius: 5px; + font-weight: bold; + " + >姝e湪骞茬嚗</div + > + <!-- <div + class="eqpInfoText blingbling" + style=" + position: absolute; + max-height: 130px; + max-width: 360px; + border-radius: 10px; + background-color: #ce0000; + color: white; + padding: 10px; + " + > + <div class="outDiv"> + <div><Icon icon="bx:error" :size="30" /> </div> + <div><span> 鏈変竴涓晠闅滐紝璇锋鏌ユ満鍣ㄣ��</span></div> + </div> + </div> --> + <!-- <div class="eqpInfoText blingbling"> + <div><Icon icon="bx:error" :size="30" /> </div> + <div><span style="font-size: 20px">姝e湪鐑樺共</span></div> + </div> --> + </div> + </div> + <div class="midRight"> + <div style="display: flex"> + <div style="height: 210px; width: 360px"> + <div style="height: 150px; padding: 0 20px 0 90px; display: flex"> + <div style="max-height: 150px; width: 220px"> + <div style="width: 10px; height: 35px; margin-top: -1px; background-color: #ff1515"></div> + <div style="width: 10px; height: 35px; background-color: yellow"></div> + <div style="width: 10px; height: 35px; background-color: rgb(0, 219, 48)"></div> + </div> + <div> </div> + </div> + <div style="padding-left: 150px; padding-top: 20px"> + <div class="eqpInfoText">鐑娓╁害锛�70 掳C</div> + <div class="eqpInfoText">椋庢満棰戠巼锛�56 Hz</div> + </div> + </div> + <div style="height: 430px; width: 220px; padding: 20px 20px; background: white; border-radius: 10px"> + <div style="text-align: center; margin-top: 10px; font-size: 18px; font-weight: bold">{{ realData.windTemp }} 掳C</div> + <div style="height: 230px; width: 220px; margin-top: 30px; margin-left: 55px"> + <a-slider v-model:value="realData.tempValue" :min="0" range :max="100" :marks="marks" vertical /> + </div> + <div style="text-align: center; margin-top: 55px; font-size: 18px; font-weight: bold">椋庣娓╁害</div> + </div> + </div> + </div> + <!-- <div class="fault">鏈哄櫒鏁呴殰锛氭満鍣ㄨ矊浼兼湁涓�鐐圭偣鏁呴殰</div> + <div class="eqpName">{{ eqp.name }}</div> --> + </div> + </div> + </div> +</template> + +<script setup lang="ts"> + 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 } from '../api/DryEquipment.api' + import { dryEquipment } from '../dataDefine/DryEquipment.data' + import { useUserStore } from '/@/store/modules/user' + const Timer = 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 eqp = ref({} as dryEquipment) + const userStore = useUserStore() + const realData = ref({}) + realData.value.tempValue = [0, 100] + realData.value.mois = [0, 0, 0] + var moisChart: echarts.ECharts + var waterChart: echarts.ECharts + var weightChart: echarts.ECharts + function initCharts() { + let domId = 'moisChart' + let chartDom: HTMLElement = document.getElementById(domId) as HTMLElement + let waterDom: HTMLElement = document.getElementById('moisture') as HTMLElement + let weightDom: HTMLElement = document.getElementById('weight') as HTMLElement + moisChart = echarts.init(chartDom) + waterChart = echarts.init(waterDom) + weightChart = echarts.init(weightDom) + + const option = { + color: ['#2C4D90', '#CE0000'], + title: { + text: '鍚按鐜囨俯搴﹁秼鍔�', + }, + tooltip: { + trigger: 'axis', + }, + grid: { + left: 30, + right: 35, + top: 50, + bottom: 30, + }, + legend: { + right: 20, + }, + // toolbox: { + // show: true, + // feature: { + // dataZoom: { + // yAxisIndex: 'none', + // }, + // dataView: { readOnly: false }, + // magicType: { type: ['line', 'bar'] }, + // restore: {}, + // saveAsImage: {}, + // }, + // }, + xAxis: { + type: 'value', + //boundaryGap: false, + // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], + }, + yAxis: { + type: 'value', + }, + // yAxis: { + // type: 'value', + // axisLabel: { + // formatter: '{value} 掳C', + // }, + // }, + series: [ + { + name: '鍚按鐜�', + type: 'line', + smooth: true, + symbol: 'none', + data: [ + [1, 1], + [2, 2], + ], + markLine: { + data: [{ type: 'average', name: 'Avg' }], + }, + }, + { + name: '娓╁害', + type: 'line', + smooth: true, + symbol: 'none', + data: [ + [1, 10], + [2, 20], + ], + // 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: realData.value.mois, + 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: 18, + //position: ['50%',(100-mois.value[1]*100).toFixed(2) + '%'], + }, + }, + ], + } + + 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)', + }, + }, + }, + ], + } + + option && moisChart.setOption(option) + waterOption && waterChart.setOption(waterOption) + weightOption && weightChart.setOption(weightOption) + } + + function queryEqp() { + queryById({ id: router.currentRoute.value.params.id }).then((res) => { + // console.log(`output->res`, res) + eqp.value = res + queryRealTime() + setTimeout(initCharts, 500) + }) + } + + function queryRealTime() { + let tenantId = userStore.getTenant + let eqpCode = eqp.value.code + let queryRealTimeUrl = '/dry/real/getRealTimeData' + defHttp.get({ url: queryRealTimeUrl, params: { tenantid: tenantId, machineid: eqpCode } }).then((res) => { + console.log(`output->res`, res) + if (res && res.trendVo) { + res.tempValue = [res.windTemp, 100] + res.percent = ((res.dryTime / res.et) * 100).toFixed(2) + res.mois = [(res.initial / 100).toFixed(2), (res.trendVo.moisture / 100).toFixed(2), (res.target / 100).toFixed(2)] + + if (waterChart) { + waterChart.setOption({ + series: [ + { + data: res.mois, + label: { + formatter: function () { + return res.trendVo.moisture + '%' + }, + fontSize: 10, + }, + }, + ], + }) + } + + if (weightChart) { + weightChart.setOption({}) + } + if (res && res.detailList) { + res.moisList = [] + res.detailList.forEach((item) => { + res.moisList.push([item.totalTime, item.moisture]) + }) + // for (var i = res.detailList.length - 1; i > 0; i--) { + // console.log(`output->res.detailList[i]`, res.detailList[i]) + // res.moisList.push([res.detailList[i].totalTime, res.detailList[i].moisture]) + // } + console.log(`output->res.moisList` + JSON.stringify(res.moisList)) + } + + if (res && res.bellowsTemp) { + // let map = new Map(Object.entries(res.bellowsTemp)) + // console.log(`output->map`, map) + 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}%', + }, + }, + }, + { + data: res.tempArr, + }, + ], + }) + } + } else { + res = { + tempValue: [0, 100], + percent: 0, + mois: [], + } + } + realData.value = res + }) + } + + queryEqp() + // DOM鎸傝浇瀹屾垚鍚庢覆鏌撳浘琛� + onMounted(() => { + Timer.value = setInterval(queryRealTime, 3000) + }) + + onUnmounted(() => { + clearInterval(Timer.value) + Timer.value = null + }) +</script> + +<style scoped> + .eqpBox { + height: 100%; + } + .eqpRow { + } + .eqpImage { + height: 850px; + width: 1700px; + background-image: url(/src/assets/images/dry/ganzaoji-z.png); + background-repeat: no-repeat; + + background-position: 200px 235px; + /* background-color: red; */ + + display: flex; + flex-wrap: wrap; + align-content: flex-start; + } + .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; + } + .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; + } + + .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; + font-size: 18px; + font-weight: bold; + height: 40px; + width: 236px; + } + + .eqpInfoText { + font-size: 18px; + font-weight: bold; + } + + .eqpStatus { + height: 200px; + + /* background-image: url(/src/assets/images/dry/fengjixz.gif); + background-repeat: no-repeat; + background-position: 0px 0px; + background-size: 100px 70px; */ + } + :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; + } + :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: 25px 25px; + + width: 360px; + display: flex; + } + :deep() .ant-progress-bg { + height: 25px !important; + } + .outDiv { + display: flex; + justify-content: center; + } + .blingbling { + -webkit-animation: scaleout 1.5s infinite ease-in-out; + animation: scaleout 1.5s infinite ease-in-out; + } + + @-webkit-keyframes scaleout { + 0% { + -webkit-transform: scale(1); + } + + 100% { + -webkit-transform: scale(1.1); + opacity: 0; + } + } + + @keyframes scaleout { + 0% { + transform: scale(1); + -webkit-transform: scale(1); + } + + 100% { + transform: scale(1.1); + -webkit-transform: scale(1.1); + opacity: 0; + } + } +</style> diff --git a/src/views/dry/monitor/Eqp copy.vue b/src/views/dry/monitor/Eqp copy.vue new file mode 100644 index 0000000..4e0ea32 --- /dev/null +++ b/src/views/dry/monitor/Eqp copy.vue @@ -0,0 +1,106 @@ +<template> + <div class="eqpBox"> + <div class="eqpRow"> + <div class="eqpImage"> + <div class="fault">鏈哄櫒鏁呴殰锛氭満鍣ㄨ矊浼兼湁涓�鐐圭偣鏁呴殰</div> + <div class="eqpName">{{ eqp.name }}</div> + </div> + <div class="progress"></div> + + <div class="realData"></div> + <div class="realChart"></div> + </div> + </div> +</template> + +<script setup lang="ts"> + import { router } from '/@/router' + import { ref } from 'vue' + // import { Progress } from 'ant-design-vue' + // import * as echarts from 'echarts' + import { defHttp } from '/@/utils/http/axios' + import { queryById } from '../api/DryEquipment.api' + import { dryEquipment } from '../dataDefine/DryEquipment.data' + import { useUserStore } from '/@/store/modules/user' + + const eqp = ref({} as dryEquipment) + const userStore = useUserStore() + function queryEqp() { + queryById({ id: router.currentRoute.value.params.id }).then((res) => { + // console.log(`output->res`, res) + eqp.value = res + queryRealTime() + }) + } + + function queryRealTime() { + let tenantId = userStore.getTenant + let eqpCode = eqp.value.code + let queryRealTimeUrl = '/dry/real/getRealTimeData' + defHttp.get({ url: queryRealTimeUrl, params: { tenantid: tenantId, machineid: eqpCode } }).then((res) => { + console.log(`output->res`, res) + }) + } + + queryEqp() +</script> + +<style scoped> + .eqpBox { + height: 100%; + } + .eqpRow { + display: flex; + flex-wrap: wrap; + } + .eqpImage { + height: 420px; + width: 800px; + + background-image: url('../../../assets/images/dry/ganzaoji-z.png'); + background-repeat: no-repeat; + background-size: 100% 100%; + background-position: 20px 0px; + flex-grow: 0; + flex-shrink: 0; + } + .progress { + height: 420px; + width: 800px; + background: salmon; + flex-grow: 0; + flex-shrink: 0; + } + .realData { + width: 800px; + height: 420px; + background: lawngreen; + flex-grow: 0; + flex-shrink: 0; + } + .realChart { + width: 800px; + height: 420px; + background: gold; + flex-grow: 0; + flex-shrink: 0; + } + + .fault { + padding: 10px; + height: 60px; + font-size: 26px; + width: 100%; + text-align: right; + color: red; + } + .eqpName { + text-align: center; + font-size: 26px; + font-weight: bold; + height: 40px; + width: 236px; + margin-top: 80px; + margin-left: 249px; + } +</style> diff --git a/src/views/dry/monitor/Eqp.vue b/src/views/dry/monitor/Eqp.vue new file mode 100644 index 0000000..688c6c9 --- /dev/null +++ b/src/views/dry/monitor/Eqp.vue @@ -0,0 +1,1770 @@ +<template> + <div class="eqpBox"> + <div class="eqpRow"> + <div class="eqpImage"> + <div class="leftEqp"> + <div class="leftTop"> + <div class="leftTop1"> + <Icon icon="emojione:hourglass-with-flowing-sand" :size="50" /> + <div> + <div class="mainInfo">{{ realData?.remain | 0 }}min</div> + <div class="subhead">鍓╀綑鏃堕棿</div> + </div> + </div> + <div class="leftTop1"> + <!-- <Icon icon="mdi:chart-finance" :size="50" /> + <div> + <div class="mainInfo">98 %</div> + <div class="subhead">骞茬嚗鏁堢巼</div> + </div> --> + </div> + <div class="leftTop3" :style="{ 'background-image': 'url(/src/assets/images/dry/' + realData?.gif + '.gif)' }"></div> + <div class="outDiv eqpStatus"> + <div + style=" + font-size: 28px; + margin-top: 60px; + color: white; + background-color: #1595ea; + height: 60px; + width: 180px; + line-height: 60px; + text-align: center; + border-radius: 5px; + font-weight: bold; + " + > + 姝e湪骞茬嚗 + </div> + <!-- <div + class="eqpInfoText blingbling" + style=" + position: absolute; + + max-height: 130px; + max-width: 360px; + border-radius: 10px; + background-color: #ce0000; + color: white; + padding: 10px; + " + > + <div class="outDiv"> + <div><Icon icon="bx:error" :size="30" /> </div> + <div><span> 鏈変竴涓晠闅滐紝璇锋鏌ユ満鍣ㄣ��</span></div> + </div> + </div> --> + </div> + </div> + <div class="leftMid"> + <div id="efficiencyLine" style="width: 780px; height: 150px"></div> + <div style="height: 0px; display: flex; width: 780px; padding: 0 60px; justify-content: space-between"> + <div style="width: 100px; height: 20px">0 min</div> + <div style="width: 100px; height: 20px; text-align: right">{{ realData?.totalTime | 0 }} min</div> + </div> + <div id="progressBar" style="width: 780px; height: 80px"></div> + </div> + <!-- <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"> + <div class="herbInfo"> + <div class="curEqp"> + <div class="eqpName"> + <div class="mainInfo" style="font-size: 26px">{{ eqp.name }}</div> + <div class="subhead">{{ eqp.type }}</div> + <!-- 璁惧锛歿{ eqp.name }}</div> + <div class="eqpName">鍨嬪彿锛歿{ eqp.type }}</div> --> + </div> + </div> + <div class="curHerb"> + <div class="eqpName" style="margin-left: 100px"> + <div class="mainInfo" style="font-size: 26px">{{ realData?.herbName }}</div> + <div class="subhead">骞茬嚗閰嶆柟</div> + </div> + <div class="formula"> + <div class="formulaItem"> + <Icon icon="icon-park-twotone:box" :size="35" /> + <div> + <div class="mainInfo2">{{ realData?.feed }}绛�</div> + <div class="subhead2">鎶曟枡閲�</div> + </div> + </div> + <div class="formulaItem"> + <Icon icon="bx:wind" :size="35" /> + <div> + <div class="mainInfo2">{{ realData?.windTemp }}掳C</div> + <div class="subhead2">鐑</div> + </div> + </div> + <div class="formulaItem"> + <Icon icon="tabler:target-arrow" :size="35" /> + <div> + <div class="mainInfo2">{{ realData?.target }}%</div> + <div class="subhead2">鐩爣</div> + </div> + </div> + </div> + <!-- <div class="eqpName">{{ realData?.herbName }}</div> + <div class="eqpName">{{ realData?.feed }} 绛�</div> --> + </div> + </div> + <div class="tempMoisChart"> + <div :id="'moisChart'" style="width: 550px; height: 320px"></div> + </div> + </div> + <div class="rightTwo"> + <div class="infoChart"> + <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: 133px"></div> + </div> + <div class="subhead2" style="margin-top: -37px; padding-left: 172px">瀹炴椂鍚按鐜�</div> + </div> + <div class="infoChart"> + <div class="chartTittle">椋庣娓╁害</div> + <div class="outDiv"> + <div id="bellowsTemp" style="width: 220px; height: 200px"> + <Icon icon="emojione:hourglass-with-flowing-sand" :size="50" /> + </div> + </div> + </div> + <div class="infoChart"> + <div class="chartTittle">椋庢満棰戠巼</div> + <div class="outDiv" style="padding-top: 10px"> + <div id="fanFreq" style="width: 220px; height: 200px"></div> + </div> + </div> + <div class="infoChart"> + <div class="chartTittle"> + 骞茬嚗鏁堢巼(kg/h) + <div style="width: 120px; display: flex; justify-content: space-between"> + <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: 18px"> + 棰濆畾 + <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: 18px"> + 瀹炴椂 + <br /> + 鏁堢巼 + </div> + </div> + </div> + </div> + </div> + <div class="infoChart"> + <div class="chartTittle" + >钂告苯娑堣��(m鲁/kg) + <div style="width: 120px; display: flex; justify-content: space-between"> + <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>45</span>m鲁 </div> + <div class="subhead2">钂告苯鐢ㄩ噺</div> + </div> + </div> + </div> + <div class="rightChart center"> + <div class="center compareBar"> + <div class="barTop">25</div> + <div class="barBack"> + <div class="barDiv" id="zhengqiS"></div> + </div> + <div style="line-height: 18px"> + 棰濆畾 + <br /> + 娑堣�� + </div> + </div> + <div class="center compareBar"> + <div class="barTop">26</div> + <div class="barBack"> + <div class="barDiv" id="zhengqiR"> </div> + </div> + <div style="line-height: 18px"> + 瀹炴椂 + <br /> + 娑堣�� + </div> + </div> + </div> + </div> + </div> + <div class="infoChart"> + <div class="chartTittle"> + <div> 鐢佃兘娑堣�楋紙kw/h/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>45</span>kw/h </div> + <div class="subhead2">鐢佃兘鐢ㄩ噺</div> + </div> + </div> + </div> + <div class="rightChart center"> + <div class="center compareBar"> + <div class="barTop">12</div> + <div class="barBack"> + <div class="barDiv" id="dianS"></div> + </div> + <div style="line-height: 18px"> + 棰濆畾 + <br /> + 娑堣�� + </div> + </div> + <div class="center compareBar"> + <div class="barTop">10</div> + <div class="barBack"> + <div class="barDiv" id="dianR"></div> + </div> + <div style="line-height: 18px"> + 瀹炴椂 + <br /> + 娑堣�� + </div> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + </div> +</template> + +<script setup lang="ts"> + 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 } from '../api/DryEquipment.api' + import { dryEquipment } from '../dataDefine/DryEquipment.data' + import { useUserStore } from '/@/store/modules/user' + const Timer = 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 eqp = ref({} as dryEquipment) + const userStore = useUserStore() + const realData = ref({}) + const standard = ref({ + xiaolv: 220, + xlMin: 200, + zhengqi: 50, + zqMin: 45, + dian: 8, + dMin: 7.5, + }) + //realData.value.tempValue = [0, 100] + realData.value.mois = [0, 0, 0] + var moisChart: echarts.ECharts + var waterChart: echarts.ECharts + + var bellowsTempChart: echarts.ECharts + var fanFreqChart: echarts.ECharts + var progressBarChart: echarts.ECharts + var efficiencyLineChart: 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 + moisChart = echarts.init(chartDom) + waterChart = echarts.init(waterDom) + bellowsTempChart = echarts.init(bellowsTempDom) + fanFreqChart = echarts.init(fanFreqDom) + progressBarChart = echarts.init(progressBarDom) + efficiencyLineChart = echarts.init(efficiencyLineDom) + + const option = { + color: ['#2C4D90', '#CE0000'], + title: { + text: '鍚按鐜囨俯搴﹁秼鍔�', + }, + tooltip: { + trigger: 'axis', + }, + grid: { + left: 50, + right: 50, + top: 50, + bottom: 40, + }, + legend: { + right: 20, + }, + // toolbox: { + // show: true, + // feature: { + // dataZoom: { + // yAxisIndex: 'none', + // }, + // dataView: { readOnly: false }, + // magicType: { type: ['line', 'bar'] }, + // restore: {}, + // saveAsImage: {}, + // }, + // }, + xAxis: { + type: 'value', + //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 + } + }, + }, + yAxis: { + type: 'value', + boundaryGap: ['10%', '10%'], + // 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' }], + }, + }, + { + name: '娓╁害', + type: 'line', + smooth: true, + symbol: 'none', + data: [ + [1, 10], + [2, 20], + ], + lineStyle: { + width: 1, + }, + // 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: realData.value.mois, + 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: '#999', + fontSize: 9, + }, + 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: '20%', + left: '17', + right: '57', + bottom: '0%', + containLabel: true, + }, + legend: {}, + 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', + }, + }, + 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: { + // data: [{ type: 'average', name: 'Avg' }], + // }, + }, + ], + } + + option && moisChart.setOption(option) + waterOption && waterChart.setOption(waterOption) + bellowsOption && bellowsTempChart.setOption(bellowsOption) + fanFreqOption && fanFreqChart.setOption(fanFreqOption) + + progressBarOption && progressBarChart.setOption(progressBarOption) + efficiencyLineOption && efficiencyLineChart.setOption(efficiencyLineOption) + } + + function queryEqp() { + queryById({ id: router.currentRoute.value.params.id }).then((res) => { + // console.log(`output->res`, res) + eqp.value = res + queryRealTime() + setTimeout(initCharts, 500) + }) + } + + function queryRealTime() { + let tenantId = userStore.getTenant + let eqpCode = eqp.value.code + let queryRealTimeUrl = '/dry/real/getRealTimeData' + defHttp.get({ url: queryRealTimeUrl, params: { tenantid: tenantId, machineid: eqpCode } }).then((res) => { + //console.log(`output->res`, res) + if (res && res.trendVo) { + // 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 = [] + + res.detailList.forEach((item) => { + console.log(`output->item`, item) + 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, + }, + ], + }) + } + + 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 }, { 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}%', + }, + }, + }, + { + data: res.tempArr, + }, + ], + }) + } + + /**鏁堢巼瀵规瘮鍥� */ + 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 + '%' + } + + /**gif鍔ㄥ浘 */ + res.gif = 'refeng2' + } else { + res = { + mois: [], + } + } + console.log(`output->res`, res) + realData.value = res + }) + } + + queryEqp() + // DOM鎸傝浇瀹屾垚鍚庢覆鏌撳浘琛� + onMounted(() => { + Timer.value = setInterval(queryRealTime, 3000) + }) + + onUnmounted(() => { + clearInterval(Timer.value) + Timer.value = null + }) +</script> + +<style scoped> + .eqpBox { + height: 100%; + } + .eqpRow { + } + .eqpImage { + height: 860px; + width: 1800px; + background-image: url(/src/assets/images/dry/ganzaoji-x.png); + background-repeat: no-repeat; + + background-position: 160px 280px; + /* background-color: red; */ + padding: 10px; + display: flex; + flex-wrap: wrap; + align-content: flex-start; + } + + .leftEqp { + height: 840px; + width: 780px; + /* 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: 600px; + display: flex; + justify-content: center; + align-content: flex-start; + background-color: white; + background-image: url(/src/assets/images/dry/shebei1.png); + background-repeat: no-repeat; + background-size: 110%; + border-radius: 10px; + flex-wrap: wrap; + background-position: -78px 119px; + } + .leftMid { + padding-top: 10px; + width: 780px; + height: 230px; + /* border: 1px solid; */ + margin-top: 10px; + border-radius: 10px; + background: white; + } + .mainInfo { + line-height: 33px; + padding-left: 10px; + font-size: 30px; + } + .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: 180px; + width: 120px; + } + .rightChart { + height: 180px; + width: 170px; + margin-top: -30px; + } + .leftTop1 { + width: 220px; + 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: 340px; + 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: 780px; + height: 300px; + + padding: 100px; + } + .rightInfo { + display: flex; + flex-wrap: wrap; + align-content: flex-start; + height: 850px; + width: 900px; + } + + .rightTop { + display: flex; + height: 360px; + padding-left: 10px; + } + .rightTwo { + display: flex; + flex-wrap: wrap; + } + + .infoChart { + width: 290px; + height: 230px; + background: white; + margin-left: 10px; + margin-top: 10px; + border-radius: 10px; + } + .chartTittle { + width: 290px; + 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: #fdcb6e; + } + .rightLabel { + width: 120px; + display: flex; + justify-content: space-between; + } + .label { + text-align: center; + width: 50px; + border-radius: 4px; + height: 20px; + font-size: 10px; + line-height: 21px; + } + .good { + background-color: #75f94d; + } + + .mainInfo3 { + font-size: 24px; + } + .herbInfo { + width: 290px; + height: 360px; + color: #727272; + } + + .curEqp { + width: 290px; + height: 120px; + background: white; + border-radius: 10px; + } + .curHerb { + margin-top: 10px; + width: 290px; + height: 230px; + background: white; + border-radius: 10px; + background-image: url(/src/assets/images/dry/yaocai.jpg); + background-repeat: no-repeat; + background-size: 110px 90px; + background-position: 10px 10px; + } + .tempMoisChart { + width: 590px; + height: 360px; + background: white; + margin-left: 10px; + 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; + } + + .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: 290px; + height: 40px; + padding: 0 20px; + justify-content: space-around; + justify-items: center; + } + + .formulaItem { + display: flex; + width: 85px; + 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; + } + :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: 25px 25px; + + width: 360px; + display: flex; + } + :deep() .ant-progress-bg { + height: 25px !important; + } + .outDiv { + display: flex; + justify-content: center; + justify-items: center; + } + .blingbling { + -webkit-animation: scaleout 1.5s infinite ease-in-out; + animation: scaleout 1.5s infinite ease-in-out; + } + .center { + display: flex; + justify-content: center; + justify-items: center; + align-items: center; + flex-wrap: wrap; + text-align: center; + } + + .centerText { + width: 100%; + text-align: center; + } + + @-webkit-keyframes scaleout { + 0% { + -webkit-transform: scale(1); + } + + 100% { + -webkit-transform: scale(1.1); + opacity: 0; + } + } + + @keyframes scaleout { + 0% { + transform: scale(1); + -webkit-transform: scale(1); + } + + 100% { + transform: scale(1.1); + -webkit-transform: scale(1.1); + opacity: 0; + } + } +</style> diff --git a/src/views/dry/monitor/WorkShop copy.vue b/src/views/dry/monitor/WorkShop copy.vue new file mode 100644 index 0000000..9dc59a9 --- /dev/null +++ b/src/views/dry/monitor/WorkShop copy.vue @@ -0,0 +1,516 @@ +<template> + <div class="workshop"> + <div class="eqp-row"> + <div v-for="(item, index) in eqps" :key="index"> + <div class="eqp-card"> + <div class="eqp-content"> + <div class="chart"> + <div> + <div class="progress"> + <div style=""> + <div>鍔犵儹</div> + <div></div> + <span class="info-text">36</span> 鍒嗛挓 + </div> + + <div style=" padding: 0 10px;width: 200px;height: 40px;"> + + <div style="padding-top: 10px"> + <Progress + :stroke-color="{ + from: '#108ee9', + to: '#87d068', + }" + :percent="55.9" + status="active" + :show-info="false"> + </Progress> + </div> + + </div> + + <div> + <div>棰勮 </div> + <div><span class="info-text">90</span> 鍒嗛挓 + </div> + </div> + </div> + <div style="height:50px; text-align: left; padding-left: 25px; display: flex;"> + <div class="herbInfo"> + <div>鑽潗锛�<span class="info-text">褰撳綊</span></div> + <div>鎶曟枡锛�<span class="info-text">16</span> 绛�</div> + </div> + <div class="herbInfo"> + <div>鍘熷閲嶉噺锛�<span class="info-text">160</span> Kg</div> + <div>瀹炴椂閲嶉噺锛�<span class="info-text">70</span> Kg</div> + </div> + + </div> + </div> + + <div class="eqpStatus"> + <div > <span class="info-text">缈绘枡</span> </div> + </div> + + </div> + <!-- <div :id="'chartDom' + item.id" class="chart"> </div> --> + <div class="info"> + <div class="leftInfo" @click="gotoEqp(item.id)"> + <!-- <div class="herbName"> 褰撳綊 </div> --> + <div class="eqpName">{{ item.name }}</div> + </div> + <div class="rightInfo"> + <div style="width: 120px" > + <div style=" height: 1px; + font-size: 10px; + text-align: center; + margin-top: 10px; + margin-bottom: -10px; ">鍒濆锛歿{ (mois[0] * 100).toFixed(2) }}%</div> + <div :id="'moisture' + item.id" style="width: 110px; height: 187px"></div> + <div style="height: 1px; + font-size: 10px; + text-align: center; + margin-top: -25px;">鐩爣锛歿{ (mois[2] * 100).toFixed(2) }}%</div> + <div style=" width: 110px; + text-align: center; + margin-top: 23px;">鍚按鐜�</div> + </div> + + <div class="tempChart" style="pointer-events: none; cursor: none;" :id="'tempDom' + item.id"> + <a-slider v-model:value="tempValue" + + :min="0" range :max="100" :marks="marks" vertical /> + <div>鐑锛�<span class="info-text">{{ tempValue[0] }}</span> 掳C</div> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + </div> +</template> + +<script setup lang="ts"> + import { onMounted, ref } from 'vue' + import { Progress } from 'ant-design-vue' + import * as echarts from 'echarts' + import 'echarts-liquidfill' + import { listAll } from '../api/DryEquipment.api' + import { dryEquipment } from '../dataDefine/DryEquipment.data' + import { router } from '/@/router'; + const eqps = ref([] as dryEquipment[]) + const mois = ref([0.3939,0.2112,0.11]) + + const tempValue = ref(<Record<number, number>>([70, 100])) + + 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', + }) + function listAllEqp() { + listAll({ enable: 'Y' }) + .then((result) => { + console.log(`output->result`, result) + eqps.value = result + setTimeout(initCharts, 1000) + }) + .catch((err) => { + console.log(`output->err`, err) + }) + } + + // var wetCharts: Map<string, echarts.ECharts> = new Map() + + var moistureCharts: Map<String, echarts.ECharts> = new Map() + + function initCharts() { + // console.log(`output->initChart`) + eqps.value.forEach((item) => { + // console.log(`output->item.id`, item.id) + let domId = 'moisture' + item.id + // console.log(`output->domId`, domId) + var chartDom: HTMLElement = document.getElementById(domId) as HTMLElement + // console.log(`output->chartDom`, chartDom) + let myChart = echarts.init(chartDom) + // var option +// option = { +// grid: { +// left: 30, +// top: 15, +// bottom: 13, +// right: 45 +// }, +// xAxis: { +// type: 'category', +// show: false, +// data: ['鍚按鐜�'], +// axisLine: { +// show: false, +// }, +// axisTick: { +// show: false, +// } +// }, +// yAxis: { +// type: 'value', + +// axisLine: { +// show: false, +// }, +// min: 0, +// max: 100, +// axisTick: { +// show: true, +// }, +// splitLine: { +// show: false +// } +// }, +// series: [ +// { +// data: [20], +// type: 'bar', +// showBackground: true, +// backgroundStyle: { +// color: 'rgba(180, 180, 180, 0.2)' +// }, +// label: { +// show: true, +// }, +// barWidth: 20, +// markLine: { +// symbol: 'none', +// data: [ +// {symbol: 'none', +// xAxis:0, +// x:60, +// yAxis:60, + +// lineStyle:{ +// color: '#000', +// width:1, + +// }, +// label: { +// formatter: '鍒濆\n'+ '{c}%' +// } +// }, +// {symbol: 'none', +// xAxis:0, +// x:60, +// yAxis:11, + +// lineStyle:{ +// color: '#000', +// width:1, + +// }, +// label: { +// formatter: '鐩爣\n'+ '{c}%' +// } +// }, + + +// // {yAxis: 0}, +// // {yAxis: 100} +// ] +// } +// }, + +// ] +// }; +const option = { + + series: [{ + type: 'liquidFill', + radius: '100%', + //waveAnimation: false, + amplitude: 3, + animationDuration: 5, + //animationDurationUpdate: 0, + data: mois.value, + 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(params) { + 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: 10, + position: ['50%',(100-mois.value[1]*100).toFixed(2) + '%'], + + } + }] +}; + + option && myChart.setOption(option) + moistureCharts.set(item.id, myChart) + }) + } + + function gotoEqp(id: string) { + router.push('/dashboard/eqp/'+id) + } + + + listAllEqp() + // DOM鎸傝浇瀹屾垚鍚庢覆鏌撳浘琛� + onMounted(() => {}) +</script> + +<style> + .workshop { + } + .eqp-row { + display: flex; + flex-wrap: wrap; + } + + .eqp-card { + width: 566px; + height: 400px; + padding: 6px 6px; + } + + .eqp-content { + height: 100%; + background-color: white; + background-image: url('../../../assets/images/dry/ganzaoji-x.png'); + background-repeat: no-repeat; + background-size: 60% 60%; + background-position: 10px 150px; + border-radius: 8px; + } + + .chart { + width: 550px; + height: 160px; + + display: flex; + text-align: center; + } + .progress { + padding:25px 25px; + + width: 360px; + display: flex; + } + .ant-progress-bg { + height: 25px !important; + } + .eqpStatus { + width:170px; + background-position: 0 -10px; + background-image: url('../../../assets/images/dry/ganzaoji.gif'); + background-size: 100% 100%; + display: inline-flex; + flex-direction: column-reverse; + padding: 15px; + + } + .info { + display: flex; + } + .leftInfo { + width: 335px; + /* background: gray; */ + } + .rightInfo { + flex: 1; + height: 210px; + display: flex; + } + + .info-text { + font-size: 16px; + font-weight: bold; + } + .herbName { + margin-top: -10px; + width: 180px; + height: 35px; + background: rgb(56, 56, 56); + margin-left: 120px; + text-align: center; + color: white; + font-size: 16px; + font-weight: bold; + line-height: 35px; + } + .eqpName { + margin-top: 68px; + margin-left: 174px; + width: 95px; + font-weight: bold; + text-align: center; + background-color: white; + } + + .tempChart { + padding-top: 10px; + + + height: 150px; + width: 100px; + } + + .herbInfo { + width: 160px; + } + .ant-slider-mark-text { + padding-left: 15px; + font-size: 10px; + } + .ant-slider-mark-text::before { + content: ''; + display: block; + width: 6px; + height: 1px; + background-color: #1890ff; + + position: absolute; + top: 10px; + left: 0px; + } + .ant-slider-rail { + width: 6px !important; + border-radius: 6px 6px 0 0; + background: linear-gradient(to top, #ce0000 0%, #ce0000 40%, #ce0000 75%, rgb(160, 160, 160) 100%); + } + .ant-slider-track { + background: rgb(175, 175, 175); + + height: 20px; + width: 6px !important; + border-radius: 6px 6px 0 0; + } + .ant-slider-track:hover { + } + .ant-slider-handle { + display: none; + } + .ant-slider-dot { + display: none; + } + .ant-slider-step { + width: 10px !important; + } + .ant-slider-step > :first-child { + display: block !important; + width: 22px !important; + height: 22px !important; + bottom: -17px !important; + left: -4px; + border: none; + background: #ce0000; + } +</style> diff --git a/src/views/dry/monitor/WorkShop.vue b/src/views/dry/monitor/WorkShop.vue index 7ec7ae1..3781483 100644 --- a/src/views/dry/monitor/WorkShop.vue +++ b/src/views/dry/monitor/WorkShop.vue @@ -1,87 +1,92 @@ <template> <div class="workshop"> <div class="eqp-row"> - <div v-for="(item, index) in eqps" :key="index"> - <div class="eqp-card"> - <div class="eqp-content"> - <div class="chart"> - <div> - <div class="progress"> - <div style=""> - <div>鍔犵儹</div> - <div></div> - <span class="info-text">36</span> 鍒嗛挓 - </div> - - <div style=" padding: 0 10px;width: 200px;height: 40px;"> - - <div style="padding-top: 10px"> - <Progress - :stroke-color="{ - from: '#108ee9', - to: '#87d068', - }" - :percent="55.9" - status="active" - :show-info="false"> - </Progress> - </div> - - </div> - - <div> - <div>棰勮 </div> - <div><span class="info-text">90</span> 鍒嗛挓 - </div> - </div> - </div> - <div style="height:50px; text-align: left; padding-left: 25px; display: flex;"> - <div class="herbInfo"> - <div>鑽潗锛�<span class="info-text">褰撳綊</span></div> - <div>鎶曟枡锛�<span class="info-text">16</span> 绛�</div> + <div class="eqp-card" v-for="(item, index) in eqps" :key="index"> + <div class="eqp-content"> + <div class="chart"> + <div> + <div class="progress"> + <div style=""> + <div>鍔犵儹</div> + <div></div> + <span class="info-text">{{ realTime.get(item.id)?.dryTime | 0 }}</span> 鍒嗛挓 </div> - <div class="herbInfo"> - <div>鍘熷閲嶉噺锛�<span class="info-text">160</span> Kg</div> - <div>瀹炴椂閲嶉噺锛�<span class="info-text">70</span> Kg</div> - </div> - - </div> - </div> - - <div class="eqpStatus"> - <div > <span class="info-text">杩愯</span> </div> - </div> - </div> - <!-- <div :id="'chartDom' + item.id" class="chart"> </div> --> - <div class="info"> - <div class="leftInfo"> - <!-- <div class="herbName"> 褰撳綊 </div> --> - <div class="eqpName">{{ item.name }}</div> + <div style="padding: 0 10px; width: 200px; height: 40px"> + <div style="padding-top: 10px"> + <Progress + :stroke-color="{ + from: '#108ee9', + to: '#87d068', + }" + :percent="realTime.get(item.id)?.percent" + status="active" + :show-info="false" + /> + </div> + </div> + + <div> + <div>棰勮 </div> + <div + ><span class="info-text">{{ (realTime.get(item.id)?.dryTime + realTime.get(item.id)?.remain) | 0 }}</span> 鍒嗛挓 + </div> + </div> </div> - <div class="rightInfo"> - <div style="width: 120px" > - <div style=" height: 1px; - font-size: 10px; - text-align: center; - margin-top: 10px; - margin-bottom: -10px; ">鍒濆锛歿{ (mois[0] * 100).toFixed(2) }}%</div> - <div :id="'moisture' + item.id" style="width: 110px; height: 187px"></div> - <div style="height: 1px; - font-size: 10px; - text-align: center; - margin-top: -25px;">鐩爣锛歿{ (mois[2] * 100).toFixed(2) }}%</div> - <div style=" width: 110px; - text-align: center; - margin-top: 23px;">鍚按鐜�</div> + <div style="height: 50px; text-align: left; padding-left: 25px; display: flex"> + <div class="herbInfo"> + <div + >鑽潗锛�<span class="info-text">{{ realTime.get(item.id)?.herbName }}</span></div + > + <div + >鎶曟枡锛�<span class="info-text">{{ realTime.get(item.id)?.feed | 0 }}</span> 绛�</div + > </div> - - <div class="tempChart" style="pointer-events: none; cursor: none;" :id="'tempDom' + item.id"> - <a-slider v-model:value="tempValue" - - :min="0" range :max="100" :marks="marks" vertical /> - <div>鐑锛�<span class="info-text">{{ tempValue[0] }}</span> 掳C</div> + <div class="herbInfo"> + <div + >鍘熷閲嶉噺锛�<span class="info-text">{{ realTime.get(item.id)?.originWeight | 0 }}</span> Kg</div + > + <div + >瀹炴椂閲嶉噺锛�<span class="info-text">{{ realTime.get(item.id)?.yield | 0 }}</span> Kg</div + > </div> + </div> + </div> + + <div class="eqpStatus"> + <div> <span class="info-text">缈绘枡</span> </div> + </div> + </div> + <!-- <div :id="'chartDom' + item.id" class="chart"> </div> --> + <div class="info"> + <div class="leftInfo"> + <div style="width: 120px"> + <div style="height: 1px; font-size: 10px; text-align: center; margin-top: 10px; margin-bottom: -10px" + >鍒濆锛歿{ realTime.get(item.id)?.initial }}%</div + > + <div :id="'moisture' + item.id" style="width: 110px; height: 187px"></div> + <div style="height: 1px; font-size: 10px; text-align: center; margin-top: -25px">鐩爣锛歿{ realTime.get(item.id)?.target }}%</div> + <div style="width: 110px; text-align: center; margin-top: 23px">鍚按鐜�</div> + </div> + <!-- <div class="herbName"> 褰撳綊 </div> --> + <div style="flex: 1" @click="gotoEqp(item.id)" + ><div class="eqpName">{{ item.name }}</div></div + > + </div> + <div class="rightInfo"> + <div class="tempChart" style="pointer-events: none; cursor: none" :id="'tempDom' + item.id"> + <a-slider + v-if="realTime.get(item.id)" + v-model:value="realTime.get(item.id).tempValue" + :min="0" + range + :max="100" + :marks="marks" + vertical + /> + <div + >鐑锛�<span class="info-text">{{ realTime.get(item.id)?.windTemp | 0 }}</span> 掳C</div + > </div> </div> </div> @@ -92,17 +97,22 @@ </template> <script setup lang="ts"> - import { onMounted, ref } from 'vue' + import { onMounted, ref, onUnmounted } from 'vue' import { Progress } from 'ant-design-vue' import * as echarts from 'echarts' import 'echarts-liquidfill' import { listAll } from '../api/DryEquipment.api' import { dryEquipment } from '../dataDefine/DryEquipment.data' + import { router } from '/@/router' + import { defHttp } from '/@/utils/http/axios' + import { useUserStore } from '/@/store/modules/user' const eqps = ref([] as dryEquipment[]) - const mois = ref([0.3939,0.2112,0.11]) + const mois = ref([0, 0, 0]) + const userStore = useUserStore() + const Timer = ref() - const tempValue = ref(<Record<number, number>>([70, 100])) + const realTime = ref(new Map()) const marks = ref<Record<number, any>>({ 0: '0掳C', @@ -212,7 +222,8 @@ .then((result) => { console.log(`output->result`, result) eqps.value = result - setTimeout(initCharts, 1000) + setTimeout(initCharts, 500) + updateRealTime() }) .catch((err) => { console.log(`output->err`, err) @@ -221,150 +232,206 @@ // var wetCharts: Map<string, echarts.ECharts> = new Map() - var moistureCharts: Map<String, echarts.ECharts> = new Map() + var moistureCharts: Map<String, echarts.ECharts> = new Map() - function initCharts() { - // console.log(`output->initChart`) - eqps.value.forEach((item) => { - // console.log(`output->item.id`, item.id) - let domId = 'moisture' + item.id - // console.log(`output->domId`, domId) - var chartDom: HTMLElement = document.getElementById(domId) as HTMLElement - // console.log(`output->chartDom`, chartDom) - let myChart = echarts.init(chartDom) - // var option -// option = { -// grid: { -// left: 30, -// top: 15, -// bottom: 13, -// right: 45 -// }, -// xAxis: { -// type: 'category', -// show: false, -// data: ['鍚按鐜�'], -// axisLine: { -// show: false, -// }, -// axisTick: { -// show: false, -// } -// }, -// yAxis: { -// type: 'value', - -// axisLine: { -// show: false, -// }, -// min: 0, -// max: 100, -// axisTick: { -// show: true, -// }, -// splitLine: { -// show: false -// } -// }, -// series: [ -// { -// data: [20], -// type: 'bar', -// showBackground: true, -// backgroundStyle: { -// color: 'rgba(180, 180, 180, 0.2)' -// }, -// label: { -// show: true, -// }, -// barWidth: 20, -// markLine: { -// symbol: 'none', -// data: [ -// {symbol: 'none', -// xAxis:0, -// x:60, -// yAxis:60, - -// lineStyle:{ -// color: '#000', -// width:1, - -// }, -// label: { -// formatter: '鍒濆\n'+ '{c}%' -// } -// }, -// {symbol: 'none', -// xAxis:0, -// x:60, -// yAxis:11, - -// lineStyle:{ -// color: '#000', -// width:1, - -// }, -// label: { -// formatter: '鐩爣\n'+ '{c}%' -// } -// }, + function initCharts() { + // console.log(`output->initChart`) + eqps.value.forEach((item) => { + // console.log(`output->item.id`, item.id) + let domId = 'moisture' + item.id + // console.log(`output->domId`, domId) + var chartDom: HTMLElement = document.getElementById(domId) as HTMLElement + // console.log(`output->chartDom`, chartDom) + let myChart = echarts.init(chartDom) + // var option + // option = { + // grid: { + // left: 30, + // top: 15, + // bottom: 13, + // right: 45 + // }, + // xAxis: { + // type: 'category', + // show: false, + // data: ['鍚按鐜�'], + // axisLine: { + // show: false, + // }, + // axisTick: { + // show: false, + // } + // }, + // yAxis: { + // type: 'value', - -// // {yAxis: 0}, -// // {yAxis: 100} -// ] -// } -// }, - -// ] -// }; -const option = { + // axisLine: { + // show: false, + // }, + // min: 0, + // max: 100, + // axisTick: { + // show: true, + // }, + // splitLine: { + // show: false + // } + // }, + // series: [ + // { + // data: [20], + // type: 'bar', + // showBackground: true, + // backgroundStyle: { + // color: 'rgba(180, 180, 180, 0.2)' + // }, + // label: { + // show: true, + // }, + // barWidth: 20, + // markLine: { + // symbol: 'none', + // data: [ + // {symbol: 'none', + // xAxis:0, + // x:60, + // yAxis:60, - series: [{ - type: 'liquidFill', - radius: '100%', - //waveAnimation: false, - amplitude: 3, - animationDuration: 5, - //animationDurationUpdate: 0, - data: mois.value, - 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: { - + // lineStyle:{ + // color: '#000', + // width:1, - formatter: function(params) { - console.log(`output->params`,params,mois.value) + // }, + // label: { + // formatter: '鍒濆\n'+ '{c}%' + // } + // }, + // {symbol: 'none', + // xAxis:0, + // x:60, + // yAxis:11, - 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) + '%' - ; + // lineStyle:{ + // color: '#000', + // width:1, + + // }, + // label: { + // formatter: '鐩爣\n'+ '{c}%' + // } + // }, + + // // {yAxis: 0}, + // // {yAxis: 100} + // ] + // } + // }, + + // ] + // }; + const option = { + series: [ + { + type: 'liquidFill', + radius: '100%', + //waveAnimation: false, + amplitude: 3, + animationDuration: 5, + //animationDurationUpdate: 0, + data: mois.value, + 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: 10, + //position: ['50%',(100-mois.value[1]*100).toFixed(2) + '%'], + }, }, - fontSize: 10, - position: ['50%',(100-mois.value[1]*100).toFixed(2) + '%'], - + ], + } + + option && myChart.setOption(option) + moistureCharts.set(item.id, myChart) + }) + } + + function gotoEqp(id: string) { + router.push('/dashboard/eqp/' + id) + } + + function updateRealTime() { + console.log(`output->瀹氭椂鍒锋柊鏁版嵁`) + eqps.value.forEach((item) => { + queryRealTime(item) + }) + } + + function queryRealTime(eqp: dryEquipment) { + let tenantId = userStore.getTenant + let eqpCode = eqp.code + let queryRealTimeUrl = '/dry/real/getRealTimeData' + defHttp.get({ url: queryRealTimeUrl, params: { tenantid: tenantId, machineid: eqpCode } }).then((res) => { + console.log(`output->res`, res) + if (res && res.trendVo) { + 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), + ] + moistureCharts.get(eqp.id)?.setOption({ + series: [ + { + data: res.mois, + label: { + formatter: function () { + return res.trendVo.moisture + '%' + }, + fontSize: 10, + //position: ['50%',(100- res.trendVo.moisture)+ '%'], + }, + }, + ], + }) + } else { + res = { + tempValue: [0, 100], + percent: 0, + mois: [], } - }] -}; + } - option && myChart.setOption(option) - moistureCharts.set(item.id, myChart) - }) - } - - + realTime.value.set(eqp.id, res) + }) + } listAllEqp() // DOM鎸傝浇瀹屾垚鍚庢覆鏌撳浘琛� - onMounted(() => {}) + onMounted(() => { + Timer.value = setInterval(updateRealTime, 3000) + }) + + onUnmounted(() => { + clearInterval(Timer.value) + Timer.value = null + }) </script> -<style> +<style scoped> .workshop { } .eqp-row { @@ -376,6 +443,8 @@ width: 566px; height: 400px; padding: 6px 6px; + flex-grow: 0; + flex-shrink: 0; } .eqp-content { @@ -384,7 +453,7 @@ background-image: url('../../../assets/images/dry/ganzaoji-x.png'); background-repeat: no-repeat; background-size: 60% 60%; - background-position: 10px 150px; + background-position: 105px 150px; border-radius: 8px; } @@ -395,30 +464,31 @@ display: flex; text-align: center; } - .progress { - padding:25px 25px; + :deep() .progress { + padding: 25px 25px; width: 360px; display: flex; } - .ant-progress-bg { + :deep() .ant-progress-bg { height: 25px !important; } .eqpStatus { - width:170px; - background-position: 0 -10px; - background-image: url('../../../assets/images/dry/ganzaoji.gif'); - background-size: 100% 100%; + width: 170px; + background-position: 0 0px; + background-image: url('../../../assets/images/dry/refeng2.gif'); + background-size: 180px; + background-repeat: no-repeat; display: inline-flex; flex-direction: column-reverse; padding: 15px; - } .info { display: flex; } .leftInfo { - width: 335px; + width: 445px; + display: flex; /* background: gray; */ } .rightInfo { @@ -445,29 +515,29 @@ } .eqpName { margin-top: 68px; - margin-left: 174px; + margin-left: 150px; width: 95px; font-weight: bold; text-align: center; background-color: white; + height: 22px; } .tempChart { padding-top: 10px; - height: 150px; width: 100px; } .herbInfo { - width: 160px; + width: 160px; } - .ant-slider-mark-text { + :deep() .ant-slider-mark-text { padding-left: 15px; font-size: 10px; } - .ant-slider-mark-text::before { + :deep() .ant-slider-mark-text::before { content: ''; display: block; width: 6px; @@ -478,30 +548,30 @@ top: 10px; left: 0px; } - .ant-slider-rail { + :deep() .ant-slider-rail { width: 6px !important; border-radius: 6px 6px 0 0; background: linear-gradient(to top, #ce0000 0%, #ce0000 40%, #ce0000 75%, rgb(160, 160, 160) 100%); } - .ant-slider-track { + :deep() .ant-slider-track { background: rgb(175, 175, 175); height: 20px; width: 6px !important; border-radius: 6px 6px 0 0; } - .ant-slider-track:hover { + :deep() .ant-slider-track:hover { } - .ant-slider-handle { + :deep() .ant-slider-handle { display: none; } - .ant-slider-dot { + :deep() .ant-slider-dot { display: none; } - .ant-slider-step { + :deep() .ant-slider-step { width: 10px !important; } - .ant-slider-step > :first-child { + :deep() .ant-slider-step > :first-child { display: block !important; width: 22px !important; height: 22px !important; diff --git a/src/views/system/usersetting/UserSetting.data.ts b/src/views/system/usersetting/UserSetting.data.ts index ae4f034..f0c83f4 100644 --- a/src/views/system/usersetting/UserSetting.data.ts +++ b/src/views/system/usersetting/UserSetting.data.ts @@ -1,146 +1,145 @@ -import { FormSchema } from '/@/components/Form/index'; -import { rules } from '/@/utils/helper/validator'; +import { FormSchema } from '/@/components/Form/index' +import { rules } from '/@/utils/helper/validator' export interface ListItem { - key: string; - title: string; - description: string; - extra?: string; - avatar?: string; - color?: string; + key: string + title: string + description: string + extra?: string + avatar?: string + color?: string } // tab鐨刲ist export const settingList = [ - { - key: '1', - name: '涓汉淇℃伅', - component: 'BaseSetting', - icon:'ant-design:user-outlined' - }, - { - key: '2', - name: '鎴戠殑绉熸埛', - component: 'TenantSetting', - icon:'ant-design:team-outlined' - }, - { - key: '3', - name: '璐﹀彿瀹夊叏', - component: 'AccountSetting', - icon:'ant-design:lock-outlined' - }, - { - key: '4', - name: '绗笁鏂笰PP', - component: 'WeChatDingSetting', - icon: 'ant-design:contacts-outlined', - }, -]; - + { + key: '1', + name: '涓汉淇℃伅', + component: 'BaseSetting', + icon: 'ant-design:user-outlined', + }, + // { + // key: '2', + // name: '鎴戠殑绉熸埛', + // component: 'TenantSetting', + // icon:'ant-design:team-outlined' + // }, + // { + // key: '3', + // name: '璐﹀彿瀹夊叏', + // component: 'AccountSetting', + // icon:'ant-design:lock-outlined' + // }, + // { + // key: '4', + // name: '绗笁鏂笰PP', + // component: 'WeChatDingSetting', + // icon: 'ant-design:contacts-outlined', + // }, +] /** * 鐢ㄦ埛琛ㄥ崟 */ export const formSchema: FormSchema[] = [ - { - field: 'realname', - component: 'Input', - label: '濮撳悕', - colProps: { span: 24 }, - required:true - }, - { - field: 'birthday', - component: 'DatePicker', - label: '鐢熸棩', - colProps: { span: 24 }, - componentProps:{ - showTime:false, - valueFormat:"YYYY-MM-DD", - getPopupContainer: () => document.body, - }, - }, - { - field: 'sex', - component: 'RadioGroup', - label: '鎬у埆', - colProps: { span: 24 }, - componentProps:{ - options: [ - { - label: '鐢�', - value: 1, - }, - { - label: '濂�', - value: 2, - }, - ], - } - }, - { - field: 'relTenantIds', - component: 'JDictSelectTag', - label: '绉熸埛', - colProps: { span: 24 }, - componentProps:{ - mode:'multiple', - dictCode:'sys_tenant,name,id', - disabled:true - } - }, - { - field: 'post', - component: 'JDictSelectTag', - label: '鑱屼綅', - colProps: { span: 24 }, - componentProps:{ - mode:'multiple', - dictCode:'sys_position,name,code', - disabled:true - } - }, - { - label: '', - field: 'id', - component: 'Input', - show: false, - }, + { + field: 'realname', + component: 'Input', + label: '濮撳悕', + colProps: { span: 24 }, + required: true, + }, + { + field: 'birthday', + component: 'DatePicker', + label: '鐢熸棩', + colProps: { span: 24 }, + componentProps: { + showTime: false, + valueFormat: 'YYYY-MM-DD', + getPopupContainer: () => document.body, + }, + }, + { + field: 'sex', + component: 'RadioGroup', + label: '鎬у埆', + colProps: { span: 24 }, + componentProps: { + options: [ + { + label: '鐢�', + value: 1, + }, + { + label: '濂�', + value: 2, + }, + ], + }, + }, + { + field: 'relTenantIds', + component: 'JDictSelectTag', + label: '绉熸埛', + colProps: { span: 24 }, + componentProps: { + mode: 'multiple', + dictCode: 'sys_tenant,name,id', + disabled: true, + }, + }, + { + field: 'post', + component: 'JDictSelectTag', + label: '鑱屼綅', + colProps: { span: 24 }, + componentProps: { + mode: 'multiple', + dictCode: 'sys_position,name,code', + disabled: true, + }, + }, + { + label: '', + field: 'id', + component: 'Input', + show: false, + }, ] //瀵嗙爜寮圭獥 export const formPasswordSchema: FormSchema[] = [ - { - label: '鐢ㄦ埛璐﹀彿', - field: 'username', - component: 'Input', - componentProps: { readOnly: true }, - }, - { - label: '鏃у瘑鐮�', - field: 'oldpassword', - component: 'InputPassword', - required: true, - }, - { - label: '鏂板瘑鐮�', - field: 'password', - component: 'StrengthMeter', - componentProps: { - placeholder: '璇疯緭鍏ユ柊瀵嗙爜', - }, - rules: [ - { - required: true, - message: '璇疯緭鍏ユ柊瀵嗙爜', - }, - ], - }, - { - label: '纭鏂板瘑鐮�', - field: 'confirmpassword', - component: 'InputPassword', - dynamicRules: ({ values }) => rules.confirmPassword(values, true), - }, -]; + { + label: '鐢ㄦ埛璐﹀彿', + field: 'username', + component: 'Input', + componentProps: { readOnly: true }, + }, + { + label: '鏃у瘑鐮�', + field: 'oldpassword', + component: 'InputPassword', + required: true, + }, + { + label: '鏂板瘑鐮�', + field: 'password', + component: 'StrengthMeter', + componentProps: { + placeholder: '璇疯緭鍏ユ柊瀵嗙爜', + }, + rules: [ + { + required: true, + message: '璇疯緭鍏ユ柊瀵嗙爜', + }, + ], + }, + { + label: '纭鏂板瘑鐮�', + field: 'confirmpassword', + component: 'InputPassword', + dynamicRules: ({ values }) => rules.confirmPassword(values, true), + }, +] -- Gitblit v1.9.3