From 43c5532866e0c37c48fc8d7760ae6f4f27050daa Mon Sep 17 00:00:00 2001
From: dengj <209192278@qq.com>
Date: Wed, 13 Dec 2023 16:57:53 +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=E9=83=A8=E5=88=86=E6=95=B0=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/content/fanInfo/FanInfo.vue | 559 +++++++++++----------
 1 file changed, 285 insertions(+), 274 deletions(-)

diff --git a/src/components/content/fanInfo/FanInfo.vue b/src/components/content/fanInfo/FanInfo.vue
index 325e9bb..c009a4d 100644
--- a/src/components/content/fanInfo/FanInfo.vue
+++ b/src/components/content/fanInfo/FanInfo.vue
@@ -9,23 +9,23 @@
         <div class="fan-name">一号风机</div>
         <!-- 功能 -->
         <div class="option-nav">
-          <div class="state " :class="{ 'blue-state': isStart }">
-            <div :class="{ stopColor: !isStart }">
-              <div :style="{ backgroundImage: 'url(' +getImageUrl(stateIcon1)+')' }" class="state-icon"></div>
-              状态：{{ state }}
+          <div class="state " :class="{ 'blue-state': isStartOne }">
+            <div :class="{ stopColor: !stateOne }">
+              <div :style="{ backgroundImage: 'url(' +getImageUrl(stateIconOne)+')' }" class="state-icon"></div>
+              状态：{{ stateOne ? '运行' : '故障' }}
             </div>
             <div class="switch">
               <div
                   id="auto"
-                  :class="{ active: isStart }"
-                  @click="isStart = true"
+                  :class="{ active: isStartOne }"
+                  @click="isStartOne = true"
               >
                 启动
               </div>
               <div
                   id="stop"
-                  :class="{ active: !isStart }"
-                  @click="isStart = false"
+                  :class="{ active: !isStartOne }"
+                  @click="isStartOne = false"
               >
                 停止
               </div>
@@ -44,7 +44,7 @@
               ><input
                   type="number"
                   min="0"
-                  v-model="fan01_option.series[0].data[0].value"
+                  v-model="powerOne"
                   :disabled="isSAuto1 === 'true'"
               /></span>
             </div>
@@ -58,21 +58,21 @@
         <div class="fan-name">二号风机</div>
         <!-- 功能 -->
         <div class="option-nav">
-          <div class="state" :class="{ 'blue-state': isStart2 }">
-            <div :class="{ stopColor: !isStart2 }">
-              <div :style="{ backgroundImage: 'url(' +getImageUrl(stateIcon2)+')' }" class="state-icon"></div>
-              状态：{{ state2 }}
+          <div class="state" :class="{ 'blue-state': isStartTwo }">
+            <div :class="{ stopColor: !stateTwo }">
+              <div :style="{ backgroundImage: 'url(' +getImageUrl(stateIconTwo)+')' }" class="state-icon"></div>
+              状态：{{ stateTwo ? '运行' : '故障' }}
             </div>
             <div class="switch">
               <div
-                  :class="{ active: isStart2 }"
-                  @click="isStart2 = true"
+                  :class="{ active: isStartTwo }"
+                  @click="isStartTwo = true"
               >
                 启动
               </div>
               <div
-                  :class="{ active: !isStart2 }"
-                  @click="isStart2 = false"
+                  :class="{ active: !isStartTwo }"
+                  @click="isStartTwo = false"
               >
                 停止
               </div>
@@ -91,7 +91,7 @@
               ><input
                   type="number"
                   min="0"
-                  v-model="fan02_option.series[0].data[0].value"
+                  v-model="powerTwo"
                   :disabled="isSAuto2 === 'true'"
               /></span>
             </div>
@@ -104,10 +104,23 @@
 
 <script setup>
 import * as echarts from "echarts";
+
 const props = defineProps({
   list: Array,
-  fanData:Array
+  fanData: Array
 });
+//当前功率
+const powerOne = ref()
+const powerTwo = ref()
+//状态
+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);
@@ -115,269 +128,36 @@ let Echarts_info1 = null;
 // 二号风机实例
 const info2 = ref(null);
 let Echarts_info2 = null;
-const 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: 50,
-          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}",
-      },
-    },
-  ],
-};
-const option2 = {
-  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: 500,
-          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}",
-      },
-    },
-  ],
-};
-const fan01_option = reactive(option);
-const fan02_option = reactive(option2);
-// 一号风机启动停止按钮
-const isStart = ref(true);
-const isStart2 = ref(false);
-// 功率是否自动
-let isSAuto1 = ref("false");
-let isSAuto2 = ref("false");
+let fan01_option = reactive();
+let fan02_option = reactive();
+
 watch(() => props.fanData, (now) => {
   getBasicData(now.frequencyChangerList)
 }, {deep: true});
 watch(() => props.list, (now) => {
-  console.log('socketDatawatch', now, old)
+  console.log('socketDatawatch------------', now)
+  socketData.value.forEach(item => {
+    now.forEach(newItem => {
+      if (item.equipmentId === newItem.equipmentId) {
+        if(newItem.frequencyFeedback){
+          item.frequencyFeedback= newItem.frequencyFeedback
+        }
+      }
+    })
+  })
   // socketData.value=now
 }, {deep: true});
-
-watch(fan01_option, () => {
-  Echarts_info1.setOption(fan01_option);
-});
-watch(fan02_option, () => {
-  Echarts_info2.setOption(fan02_option);
-});
-
-let state = computed(() => {
-  return isStart.value ? "运行" : "故障";
-  // return socketData[0].running ? "运行" : "故障";
-});
-const stateIcon1 = computed(() =>
-    isStart.value
+const stateIconOne = computed(() =>
+    stateOne.value
         ? "blue-state-icon.png"
         : "red-state-icon.png"
 );
-
-let state2 = computed(() => {
-  return isStart2.value ? "运行" : "故障";
-});
-const stateIcon2 = computed(() =>
-    isStart2.value
+const stateIconTwo = computed(() =>
+    stateTwo.value
         ? "blue-state-icon.png"
         : "red-state-icon.png"
 );
-
-onMounted(()=>{
+onMounted(() => {
   handleOnMounted()
 });
 const getBasicData = (data) => {
@@ -385,18 +165,250 @@ const getBasicData = (data) => {
   let tranArr = []
   data.map(item => {
     tranObj = {
-      equipmentId: item.equipmentId
+      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=()=> {
+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
+            }
+          },
+        },
+        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",
+            },
+          },
+        ],
+        axisLine: {
+          lineStyle: {
+            width: 3,
+            color: [[1, "#155F7C"]],
+          },
+        },
+        detail: {
+          width: 100,
+          height: 14,
+          fontSize: 26,
+          color: "inherit",
+          formatter: "{value}",
+        },
+      },
+    ],
+  }
   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);
 }
 
@@ -625,9 +637,8 @@ input[type="number"] {
 
 .units::after {
   content: "Hz";
-
   position: absolute;
-  right: 20px;
+  right: 6px;
   top: 50%;
   transform: translateY(-50%);
   font-size: 28px;