From c984f7be5b2e7eaa208b095bdcd9dd706b4a5f4a Mon Sep 17 00:00:00 2001 From: admin <2077599564@qq.com> Date: Fri, 15 Dec 2023 10:10:11 +0800 Subject: [PATCH] =?UTF-8?q?=E9=82=93=E6=B4=81=20:=20=E9=A3=8E=E6=9C=BA?= =?UTF-8?q?=E6=8E=A5=E5=8F=A3=E5=AF=B9=E6=8E=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/content/fanInfo/FanInfo.vue | 193 ++++----------------- 1 file changed, 32 insertions(+), 161 deletions(-) diff --git a/src/components/content/fanInfo/FanInfo.vue b/src/components/content/fanInfo/FanInfo.vue index 94c1306..e9f67d8 100644 --- a/src/components/content/fanInfo/FanInfo.vue +++ b/src/components/content/fanInfo/FanInfo.vue @@ -6,13 +6,13 @@
-
{{index+1}}号风机
+
{{changeNum(index+1)}}号风机
-
-
-
- 状态:{{ item.breakdown ? '运行' : '故障' }} +
+
+
+ 状态:{{ item.breakdown ? '故障':'运行' }}
- 自动{{item.autoMode}} - 手动 + 自动 + 手动
@@ -45,7 +45,7 @@ type="number" min="0" v-model="item.frequencyFeedback" - :disabled="isSAuto1 === 'true'" + :disabled="item.autoMode" />
@@ -62,58 +62,26 @@ const props = defineProps({ list: Array, fanData: Array }); -//当前功率 -const powerOne = ref() -const powerTwo = ref() -const powerThree = ref(555) -//状态 -const stateOne = ref() -const stateTwo = ref() -// 一号风机启动停止按钮 -const isStartOne = ref(true); -const isStartTwo = ref(true); -// 功率是否自动 -let isSAuto1 = ref("false"); -let isSAuto2 = ref("false"); const socketData = ref() -// 一号风机echarts实例 -const info1 = ref(null); let Echarts_info1 = null; -// 二号风机实例 -const info2 = ref(null); -let Echarts_info2 = null; -const info3 = ref(null); -let Echarts_info3 = null; let fan01_option = reactive(); -let fan02_option = reactive(); -let fan03_option = reactive(); watch(() => props.fanData, (now) => { getBasicData(now.frequencyChangerList) }, {deep: true}); watch(() => props.list, (now) => { - console.log('socketDatawatch------------', now) socketData.value.forEach(item => { now.forEach(newItem => { if (item.equipmentId === newItem.equipmentId) { - console.log('newItem',item,newItem) - if(newItem.frequencyFeedback&&item.frequencyFeedback){ - // item.frequencyFeedback= newItem.frequencyFeedback + if(newItem.frequencyFeedback){ + item.frequencyFeedback= newItem.frequencyFeedback } } }) }) + handleOnMounted() }, {deep: true}); -const stateIconOne = computed(() => - stateOne.value - ? "blue-state-icon.png" - : "red-state-icon.png" -); -const stateIconTwo = computed(() => - stateTwo.value - ? "blue-state-icon.png" - : "red-state-icon.png" -); + onMounted(async () => { setTimeout(() => { nextTick(()=>{ @@ -121,6 +89,24 @@ onMounted(async () => { }) }, 100); }); +const getImage = (type) => { + switch (type) { + case false: + return "blue-state-icon.png"; + case true: + return "red-state-icon.png"; + } +} +const changeNum=(index)=>{ + switch (index) { + case 1: + return '一'; + case 2: + return '二'; + case 3: + return '三'; + } +} const getBasicData = (data) => { let tranObj = {} let tranArr = [] @@ -139,7 +125,6 @@ const getBasicData = (data) => { const handleOnMounted = () => { const chart = document.getElementsByClassName('echart'); - console.log('chart',chart) for(let i = 0; i < chart.length; i++ ){ Echarts_info1 = echarts.init(chart[i]); fan01_option = { @@ -254,125 +239,11 @@ const handleOnMounted = () => { } fan01_option && Echarts_info1.setOption(fan01_option); } - - - // 挂载二号风机实例 - Echarts_info2 = echarts.init(info2.value); - fan02_option = { - series: [ - { - type: "gauge", - startAngle: -120, - endAngle: -420, - pointer: { - show: false, - }, - progress: { - show: true, - overlap: false, - roundCap: true, - clip: false, - itemStyle: { - borderWidth: 10, - borderColor: { - type: "linear", - x: 0, - y: 1, - x2: 0, - y2: 0, - colorStops: [ - { - offset: 0, - color: "#4BB10E", // 0% 处的颜色 - }, - { - offset: 0.25, - color: "#B1AD0E", // 100% 处的颜色 - }, - { - offset: 0.75, - color: "#B1880E", // 100% 处的颜色 - }, - { - offset: 1, - color: "#D77E01", // 100% 处的颜色 - }, - ], - global: false, // 缺省为 false - }, - color: { - type: "linear", - x: 0, - y: 1, - x2: 0, - y2: 0, - colorStops: [ - { - offset: 0, - color: "#4BB10E", // 0% 处的颜色 - }, - { - offset: 0.25, - color: "#B1AD0E", // 100% 处的颜色 - }, - { - offset: 0.75, - color: "#B1880E", // 100% 处的颜色 - }, - { - offset: 1, - color: "#D77E01", // 100% 处的颜色 - }, - ], - global: false, // 缺省为 false - } - }, - }, - max: 1000, - splitLine: { - show: false, - }, - axisTick: { - show: true, - splitNumber: 1, - length: 10, - }, - axisLabel: { - show: false, - }, - data: [ - { - value: powerTwo.value, - fontSize: 2100, - detail: { - valueAnimation: true, - offsetCenter: ["0%", "0%"], - fontSize: 40, - color: "white", - }, - }, - ], - axisLine: { - lineStyle: { - width: 3, - color: [[1, "#155F7C"]], - }, - }, - detail: { - width: 100, - height: 14, - fontSize: 26, - color: "inherit", - formatter: "{value}", - }, - }, - ], - } - Echarts_info2.setOption(fan02_option); } const getImageUrl = (name) => { - return new URL(`../../../assets/images/fanInfo/${name}`, import.meta.url).href + let icon=getImage(name) + return new URL(`../../../assets/images/fanInfo/${icon}`, import.meta.url).href }