diff --git a/src/components/content/fanInfo/FanInfo.vue b/src/components/content/fanInfo/FanInfo.vue index d0d3ab0..94c1306 100644 --- a/src/components/content/fanInfo/FanInfo.vue +++ b/src/components/content/fanInfo/FanInfo.vue @@ -2,30 +2,30 @@
风机
-
+
-
+
-
一号风机
+
{{index+1}}号风机
-
-
+
+
- 状态:{{ stateOne ? '运行' : '故障' }} + 状态:{{ item.breakdown ? '运行' : '故障' }}
启动
停止
@@ -33,8 +33,8 @@
- - 自动 + + 自动{{item.autoMode}} 手动
@@ -44,107 +44,13 @@ >
-
- -
- -
二号风机
- -
-
-
-
- 状态:{{ stateTwo ? '运行' : '故障' }} -
-
-
- 启动 -
-
- 停止 -
-
-
-
-
- - 自动 - 手动 - -
-
- 当前功率 - -
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
@@ -190,13 +96,13 @@ watch(() => props.list, (now) => { socketData.value.forEach(item => { now.forEach(newItem => { if (item.equipmentId === newItem.equipmentId) { - if(newItem.frequencyFeedback){ - item.frequencyFeedback= newItem.frequencyFeedback + console.log('newItem',item,newItem) + if(newItem.frequencyFeedback&&item.frequencyFeedback){ + // item.frequencyFeedback= newItem.frequencyFeedback } } }) }) - // socketData.value=now }, {deep: true}); const stateIconOne = computed(() => stateOne.value @@ -208,8 +114,12 @@ const stateIconTwo = computed(() => ? "blue-state-icon.png" : "red-state-icon.png" ); -onMounted(() => { - handleOnMounted() +onMounted(async () => { + setTimeout(() => { + nextTick(()=>{ + handleOnMounted() + }) + }, 100); }); const getBasicData = (data) => { let tranObj = {} @@ -219,135 +129,133 @@ const getBasicData = (data) => { equipmentId: item.equipmentId, autoMode: item.autoMode,//自动模式 breakdown: item.breakdown,//故障 - manualMode: item.manualMode,//手动模式 running: item.running,//启动, frequencyFeedback: item.frequencyFeedback//当前功率 } tranArr.push(tranObj) }) socketData.value = tranArr - powerOne.value = socketData.value[0].frequencyFeedback - powerTwo.value = socketData.value[1].frequencyFeedback - stateOne.value = socketData.value[0].breakdown - stateTwo.value = socketData.value[1].breakdown - isStartOne.value = socketData.value[0].running - isStartTwo.value = socketData.value[1].running - handleOnMounted() } const handleOnMounted = () => { - Echarts_info1 = echarts.init(info1.value); - fan01_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 - } + 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 = { + series: [ + { + type: "gauge", + startAngle: -120, + endAngle: -420, + pointer: { + show: false, }, - }, - max: 1000, - splitLine: { - show: false, - }, - axisTick: { - show: true, - splitNumber: 1, - length: 10, - }, - axisLabel: { - show: false, - }, - data: [ - { - value: powerOne.value, - fontSize: 2100, - detail: { - valueAnimation: true, - offsetCenter: ["0%", "0%"], - fontSize: 40, - color: "white", + 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 + } }, }, - ], - axisLine: { - lineStyle: { - width: 3, - color: [[1, "#155F7C"]], + max: 1000, + splitLine: { + show: false, + }, + axisTick: { + show: true, + splitNumber: 1, + length: 10, + }, + axisLabel: { + show: false, + }, + data: [ + { + value: socketData.value[i].frequencyFeedback, + 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}", }, }, - detail: { - width: 100, - height: 14, - fontSize: 26, - color: "inherit", - formatter: "{value}", - }, - }, - ], + ], + } + fan01_option && Echarts_info1.setOption(fan01_option); } - Echarts_info1.setOption(fan01_option); + + // 挂载二号风机实例 Echarts_info2 = echarts.init(info2.value); fan02_option = {