Merge pull request 'dev' (#109) from dev into master

Reviewed-on: http://git.feashow.cn/clay/tunnel-cloud-web/pulls/109

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="state " :class="{ 'blue-state': isStartOne }">
-            <div :class="{ stopColor: !isStart }">
+            <div :class="{ stopColor: !stateOne }">
-              <div :style="{ backgroundImage: 'url(' +getImageUrl(stateIcon1)+')' }" class="state-icon"></div>
+              <div :style="{ backgroundImage: 'url(' +getImageUrl(stateIconOne)+')' }" class="state-icon"></div>
-              状态：{{ state }}
+              状态：{{ stateOne ? '运行' : '故障' }}
             </div>
             <div class="switch">
               <div
                   id="auto"
-                  :class="{ active: isStart }"
+                  :class="{ active: isStartOne }"
-                  @click="isStart = true"
+                  @click="isStartOne = true"
               >
                 启动
               </div>
               <div
                   id="stop"
-                  :class="{ active: !isStart }"
+                  :class="{ active: !isStartOne }"
-                  @click="isStart = false"
+                  @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="state" :class="{ 'blue-state': isStartTwo }">
-            <div :class="{ stopColor: !isStart2 }">
+            <div :class="{ stopColor: !stateTwo }">
-              <div :style="{ backgroundImage: 'url(' +getImageUrl(stateIcon2)+')' }" class="state-icon"></div>
+              <div :style="{ backgroundImage: 'url(' +getImageUrl(stateIconTwo)+')' }" class="state-icon"></div>
-              状态：{{ state2 }}
+              状态：{{ stateTwo ? '运行' : '故障' }}
             </div>
             <div class="switch">
               <div
-                  :class="{ active: isStart2 }"
+                  :class="{ active: isStartTwo }"
-                  @click="isStart2 = true"
+                  @click="isStartTwo = true"
               >
                 启动
               </div>
               <div
-                  :class="{ active: !isStart2 }"
+                  :class="{ active: !isStartTwo }"
-                  @click="isStart2 = false"
+                  @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,287 +104,314 @@
 
 <script setup>
 import * as echarts from "echarts";
-import {ref, reactive, onMounted, computed, watch} from "vue";
+
 const props = defineProps({
-  list: Array
+  list: 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()
-watch(() => props.list, (now, old) => {
-  // console.log('socketDatawatch', now, old)
-  // socketData.value=now
-}, {deep: true});
-
-onMounted(handleOnMounted);
-
 // 一号风机echarts实例
 const info1 = ref(null);
 let Echarts_info1 = null;
 // 二号风机实例
 const info2 = ref(null);
 let Echarts_info2 = null;
-const option = {
+let fan01_option = reactive();
-  series: [
+let fan02_option = reactive();
-    {
-      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);
+watch(() => props.fanData, (now) => {
-const fan02_option = reactive(option2);
+  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) {
+        if(newItem.frequencyFeedback){
+          item.frequencyFeedback= newItem.frequencyFeedback
+        }
+      }
+    })
+  })
+  // socketData.value=now
+}, {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(() => {
+  handleOnMounted()
+});
+const getBasicData = (data) => {
+  let tranObj = {}
+  let tranArr = []
+  data.map(item => {
+    tranObj = {
+      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()
+}
 
-function 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);
 }
 
-watch(fan01_option, () => {
-  Echarts_info1.setOption(fan01_option);
-});
-watch(fan02_option, () => {
-  Echarts_info2.setOption(fan02_option);
-});
-
-// 一号风机启动停止按钮
-const isStart = ref(true);
-let state = computed(() => {
-  return isStart.value ? "运行" : "故障";
-  // return socketData[0].running ? "运行" : "故障";
-});
-const stateIcon1 = computed(() =>
-    isStart.value
-        ? "blue-state-icon.png"
-        : "red-state-icon.png"
-);
-
-const isStart2 = ref(false);
-let state2 = computed(() => {
-  return isStart2.value ? "运行" : "故障";
-});
-const stateIcon2 = computed(() =>
-    isStart2.value
-        ? "blue-state-icon.png"
-        : "red-state-icon.png"
-);
-// 功率是否自动
-let isSAuto1 = ref("false");
-let isSAuto2 = ref("false");
 const getImageUrl = (name) => {
   return new URL(`../../../assets/images/fanInfo/${name}`, import.meta.url).href
 }
@@ -610,9 +637,8 @@ input[type="number"] {
 
 .units::after {
   content: "Hz";
-
   position: absolute;
-  right: 20px;
+  right: 6px;
   top: 50%;
   transform: translateY(-50%);
   font-size: 28px;

src/components/content/transducerList/TransducerList.vue

@@ -23,7 +23,7 @@
         <div class="info">
           <div class="name-state">
             <div class="name">{{item.equipmentName}}</div>
-            <div class="state" v-if="item.phaseCurrentB>'100'">
+            <div class="state" v-if="stateA||stateB||stateC">
               <img src="@/assets/images/transducer/sp_icon_yc.png" alt=""/>
               <span style="color: red">异常</span>
             </div>
@@ -33,9 +33,9 @@
             </div>
           </div>
           <div class="one-item">
-            <div>A相电流:{{ item.phaseCurrentA }}A</div>
+            <div :style="{'color':stateA?'red':''}">A相电流:{{ item.phaseCurrentA }}A</div>
-            <div :style="{'color':item.phaseCurrentB>'100'?'red':''}">B相电流:{{ item.phaseCurrentB }}A</div>
+            <div :style="{'color':stateB?'red':''}">B相电流:{{ item.phaseCurrentB }}A</div>
-            <div>C相电流:{{ item.phaseCurrentC }}A</div>
+            <div :style="{'color':stateC?'red':''}">C相电流:{{ item.phaseCurrentC }}A</div>
           </div>
         </div>
       </div>
@@ -96,7 +96,9 @@ watch(() => props.list, (now) => {
     })
   })
 }, {deep: true});
-
+const stateA=ref(false)
+const stateB=ref(false)
+const stateC=ref(false)
 const getBasicData = (data) => {
   let tranObj = {}
   let tranArr = []
@@ -105,11 +107,17 @@ const getBasicData = (data) => {
       equipmentId: item.equipmentId,
       equipmentName:item.equipmentName,
       phaseCurrentA: item.phaseCurrentA,
+      phaseCurrentAThreshold: item.phaseCurrentAThreshold,
       phaseCurrentB: item.phaseCurrentB,
+      phaseCurrentBThreshold: item.phaseCurrentBThreshold,
       phaseCurrentC: item.phaseCurrentC,
+      phaseCurrentCThreshold: item.phaseCurrentCThreshold,
       frequencySetting: item.frequencySetting,
       frequencyFeedback: item.frequencyFeedback,
     }
+    stateA.value=item.phaseCurrentA>item.phaseCurrentAThreshold
+    stateB.value=item.phaseCurrentB>item.phaseCurrentBThreshold
+    stateC.value=item.phaseCurrentC>item.phaseCurrentCThreshold
     tranArr.push(tranObj)
   })
   transducerData.value = tranArr

src/views/tunnel/index.vue

@@ -48,15 +48,13 @@
       <div class="arrow" @click="previousBtn"></div>
       <el-carousel height="150px" type="card" ref="tunnelBtn" :autoplay="false">
         <div class="btn">
-          <el-carousel-item v-for="(item, index) in tunnelList" :key="item.value">
+          <el-carousel-item v-for="item in tunnelList" :key="item.value">
             {{ item.name }}
           </el-carousel-item>
         </div>
       </el-carousel>
       <div class="arrow right" @click="nextBtn"></div>
     </div>
-
-
   </div>
 </template>