邓洁 : 首屏修改

src/components/content/fanInfo/FanInfo.vue

@@ -2,30 +2,30 @@
   <div id="fan_info">
     <div class="title">风机</div>
     <div class="fans">
-      <div class="fan-item">
+      <div class="fan-item" v-for="(item,index) in socketData" :key="item.equipmentId">
         <!-- echarts -->
-        <div class="echart" ref="info1"></div>
+        <div class="echart"></div>
         <!-- 风机名 -->
-        <div class="fan-name">一号风机</div>
+        <div class="fan-name">{{index+1}}号风机</div>
         <!-- 功能 -->
         <div class="option-nav">
-          <div class="state " :class="{ 'blue-state': isStartOne }">
+          <div class="state " :class="{ 'blue-state': item.breakdown }">
-            <div :class="{ stopColor: !stateOne }">
+            <div :class="{ stopColor: !item.breakdown }">
               <div :style="{ backgroundImage: 'url(' +getImageUrl(stateIconOne)+')' }" class="state-icon"></div>
-              状态：{{ stateOne ? '运行' : '故障' }}
+              状态：{{ item.breakdown ? '运行' : '故障' }}
             </div>
             <div class="switch">
               <div
                   id="auto"
-                  :class="{ active: isStartOne }"
+                  :class="{ active: item.running }"
-                  @click="isStartOne = true"
+                  @click="item.running = true"
               >
                 启动
               </div>
               <div
                   id="stop"
-                  :class="{ active: !isStartOne }"
+                  :class="{ active: !item.running }"
-                  @click="isStartOne = false"
+                  @click="item.running = false"
               >
                 停止
               </div>
@@ -33,8 +33,8 @@
           </div>
           <div class="power">
             <div class="check-box">
-              <el-radio-group v-model="isSAuto1" class="radio-group">
+              <el-radio-group v-model="item.autoMode" class="radio-group">
-                <el-radio label="true">自动</el-radio>
+                <el-radio label="true">自动</el-radio>{{item.autoMode}}
                 <el-radio label="false">手动</el-radio>
               </el-radio-group>
             </div>
@@ -44,107 +44,13 @@
               ><input
                   type="number"
                   min="0"
-                  v-model="powerOne"
+                  v-model="item.frequencyFeedback"
                   :disabled="isSAuto1 === 'true'"
               /></span>
             </div>
           </div>
         </div>
       </div>
-      <div class="fan-item">
-        <!-- echarts -->
-        <div class="echart" ref="info2"></div>
-        <!-- 风机名称 -->
-        <div class="fan-name">二号风机</div>
-        <!-- 功能 -->
-        <div class="option-nav">
-          <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: isStartTwo }"
-                  @click="isStartTwo = true"
-              >
-                启动
-              </div>
-              <div
-                  :class="{ active: !isStartTwo }"
-                  @click="isStartTwo = false"
-              >
-                停止
-              </div>
-            </div>
-          </div>
-          <div class="power">
-            <div class="check-box">
-              <el-radio-group v-model="isSAuto2" class="radio-group">
-                <el-radio label="true">自动</el-radio>
-                <el-radio label="false">手动</el-radio>
-              </el-radio-group>
-            </div>
-            <div class="edit-power">
-              <span style="color: white">当前功率</span>
-              <span class="units"
-              ><input
-                  type="number"
-                  min="0"
-                  v-model="powerTwo"
-                  :disabled="isSAuto2 === 'true'"
-              /></span>
-            </div>
-          </div>
-        </div>
-      </div>
-<!--      <div class="fan-item">-->
-<!--        &lt;!&ndash; echarts &ndash;&gt;-->
-<!--        <div class="echart" ref="info3"></div>-->
-<!--        &lt;!&ndash; 风机名称 &ndash;&gt;-->
-<!--        <div class="fan-name">三号风机</div>-->
-<!--        &lt;!&ndash; 功能 &ndash;&gt;-->
-<!--        <div class="option-nav">-->
-<!--          <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: isStartTwo }"-->
-<!--                  @click="isStartTwo = true"-->
-<!--              >-->
-<!--                启动-->
-<!--              </div>-->
-<!--              <div-->
-<!--                  :class="{ active: !isStartTwo }"-->
-<!--                  @click="isStartTwo = false"-->
-<!--              >-->
-<!--                停止-->
-<!--              </div>-->
-<!--            </div>-->
-<!--          </div>-->
-<!--          <div class="power">-->
-<!--            <div class="check-box">-->
-<!--              <el-radio-group v-model="isSAuto2" class="radio-group">-->
-<!--                <el-radio label="true">自动</el-radio>-->
-<!--                <el-radio label="false">手动</el-radio>-->
-<!--              </el-radio-group>-->
-<!--            </div>-->
-<!--            <div class="edit-power">-->
-<!--              <span style="color: white">当前功率</span>-->
-<!--              <span class="units"-->
-<!--              ><input-->
-<!--                  type="number"-->
-<!--                  min="0"-->
-<!--                  v-model="powerThree"-->
-<!--                  :disabled="isSAuto2 === 'true'"-->
-<!--              /></span>-->
-<!--            </div>-->
-<!--          </div>-->
-<!--        </div>-->
-<!--      </div>-->
     </div>
   </div>
 </template>
@@ -190,13 +96,13 @@ watch(() => props.list, (now) => {
   socketData.value.forEach(item => {
     now.forEach(newItem => {
       if (item.equipmentId === newItem.equipmentId) {
-        if(newItem.frequencyFeedback){
+        console.log('newItem',item,newItem)
-          item.frequencyFeedback= newItem.frequencyFeedback
+        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(() => {
+onMounted(async () => {
-  handleOnMounted()
+  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);
+  const chart = document.getElementsByClassName('echart');
-  fan01_option = {
+  console.log('chart',chart)
-    series: [
+  for(let i = 0; i < chart.length; i++ ){
-      {
+    Echarts_info1 = echarts.init(chart[i]);
-        type: "gauge",
+    fan01_option = {
-        startAngle: -120,
+      series: [
-        endAngle: -420,
+        {
-        pointer: {
+          type: "gauge",
-          show: false,
+          startAngle: -120,
-        },
+          endAngle: -420,
-        progress: {
+          pointer: {
-          show: true,
+            show: false,
-          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
-            }
           },
-        },
+          progress: {
-        max: 1000,
+            show: true,
-        splitLine: {
+            overlap: false,
-          show: false,
+            roundCap: true,
-        },
+            clip: false,
-        axisTick: {
+            itemStyle: {
-          show: true,
+              borderWidth: 10,
-          splitNumber: 1,
+              borderColor: {
-          length: 10,
+                type: "linear",
-        },
+                x: 0,
-        axisLabel: {
+                y: 1,
-          show: false,
+                x2: 0,
-        },
+                y2: 0,
-        data: [
+                colorStops: [
-          {
+                  {
-            value: powerOne.value,
+                    offset: 0,
-            fontSize: 2100,
+                    color: "#4BB10E", // 0% 处的颜色
-            detail: {
+                  },
-              valueAnimation: true,
+                  {
-              offsetCenter: ["0%", "0%"],
+                    offset: 0.25,
-              fontSize: 40,
+                    color: "#B1AD0E", // 100% 处的颜色
-              color: "white",
+                  },
+                  {
+                    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,
-        axisLine: {
+          splitLine: {
-          lineStyle: {
+            show: false,
-            width: 3,
+          },
-            color: [[1, "#155F7C"]],
+          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,
+    fan01_option &&  Echarts_info1.setOption(fan01_option);
-          fontSize: 26,
-          color: "inherit",
-          formatter: "{value}",
-        },
-      },
-    ],
   }
-  Echarts_info1.setOption(fan01_option);
+
+
   //  挂载二号风机实例
   Echarts_info2 = echarts.init(info2.value);
   fan02_option = {