2023-03-14 fix

1. fix 矩阵不出来的问题

src/components/allMatrices.vue

@@ -729,8 +729,11 @@ export default {
         let wswind = JSON.parse(window.sessionStorage.getItem('wind'))
         let pv = JSON.parse(window.sessionStorage.getItem('pv'))
         let msg = {}
-        if (wswind && pv) {
-            msg = {...wswind, ...pv}
+        if (wswind || pv) {
+            msg = {...wswind}
+            if(pv) {
+              msg = {...msg, ...pv}
+            }
             let stationArr = [];
             for (const key in this.stationObj) {
                 this.stationObj[key] = [];
@@ -744,9 +747,9 @@ export default {
                 //风机
                 if (val.stationId) {
                     if (val.lockValue === 9) {
-                    val.lockValues = this.lockValues.filter(
-                        (item) => val.windturbineId === item.windturbineID
-                    )[0]?.value;
+                      val.lockValues = this.lockValues.filter(
+                          (item) => val.windturbineId === item.windturbineID
+                      )[0]?.value;
                     }
                     this.chooseList.forEach((item) => {
                         if (item.windturbineId === val.windturbineId) {
@@ -754,11 +757,11 @@ export default {
                         }
                     });
                     if (this.current === "all") {
-                    this.stationObj[val.stationId]?.push(val);
+                      this.stationObj[val.stationId]?.push(val);
                     } else {
-                    if (this.current === val.stationId) {
-                        this.stationObj[val.stationId]?.push(val);
-                    }
+                      if (this.current === val.stationId) {
+                          this.stationObj[val.stationId]?.push(val);
+                      }
                     }
                 }
                 // 光伏

src/components/check/areaCard.vue

@@ -1,39 +1,87 @@
 /* 自定义tabs */
 <template>
-  <!-- <transition>
-        <div :class='areaClass' @mouseover="hover = false" @mouseleave="hover = false" onselectstart="return false">
-            <div :class="headerClass">
-                <div :class='circleClass'></div>
-                <span class="gy-card-title">{{ title }}</span>
-                <img class="gy-card-decoration01" src="../../assets/img/controlcenter/decoration01.png">
-                <img class="gy-card-decoration02" src="../../assets/img/controlcenter/decoration02.png">
+  <div>
+    <div class="body" :style="style">
+      <img class="logo" src="../../assets/img/logo.png" alt="" />
+      <div class="title">
+        <div>{{ title }}</div>
+        <div style="display: flex; flex-direction: row; align-items: center">
+          <div v-for="(item, index) in controlTypeList" :key="index">
+            <div
+              v-if="!item.type"
+              :class="
+                index === 0
+                  ? 'controlTypesLeft'
+                  : index === controlTypeList.length - 1
+                  ? 'controlTypesRight'
+                  : 'controlTypes'
+              "
+              @click="handleTypeChange(item)"
+            >
+              {{ item.name }}
             </div>
-            <div :class='contentClass'>
-                <el-scrollbar style="height: 100%">
-                    <slot></slot>
-                </el-scrollbar>
+            <div
+              v-if="item.type"
+              :class="
+                index === 0
+                  ? 'onControlTypesLeft'
+                  : index === controlTypeList.length - 1
+                  ? 'onControlTypesRight'
+                  : 'onControlTypes'
+              "
+              @click="handleTypeChange(item)"
+            >
+              {{ item.name }}
             </div>
+          </div>
         </div>
-    </transition> -->
-  <div class="body">
-    <img class="logo" src="../../assets/img/logo.png" alt="" />
-    <div class="title">{{ title }}</div>
-    <!-- <div class="record" @click="showRecord">校验记录</div> -->
-    <div style="margin-top: 50px; margin-left: 20px; height: 80%">
-      <el-scrollbar>
-        <div class="scoll" style="margin-left: 5px">
-          <MatrixBlock
-            @on-click="handleClick"
-            :dataList="showList"
-          ></MatrixBlock>
+      </div>
+      <div style="margin-top: 50px; height: 85%" @contextmenu="contextmenu">
+        <div class="scoll">
+          <div class="currentScroll" style="height: 100%; overflow-y: scroll">
+            <div class="matrix" v-if="startList.length > 0">
+              <div class="problemTitle titleSty">启动</div>
+              <MatrixBlock
+                @on-click="handleDetial"
+                @choose-click="handleClick"
+                :dataList="startList"
+              >
+              </MatrixBlock>
+            </div>
+            <div class="matrix" v-if="stopList.length > 0">
+              <div class="problemTitle titleSty">停机</div>
+              <MatrixBlock
+                @on-click="handleDetial"
+                @choose-click="handleClick"
+                :dataList="stopList"
+              >
+              </MatrixBlock>
+            </div>
+            <div class="matrix" v-if="maintainList.length > 0">
+              <div class="problemTitle titleSty">维护</div>
+              <MatrixBlock
+                @on-click="handleDetial"
+                @choose-click="handleClick"
+                :dataList="maintainList"
+              >
+              </MatrixBlock>
+            </div>
+            <div class="matrix" v-if="unMaintainList.length > 0">
+              <div class="problemTitle titleSty">取消维护</div>
+              <MatrixBlock
+                @on-click="handleDetial"
+                @choose-click="handleClick"
+                :dataList="unMaintainList"
+              >
+              </MatrixBlock>
+            </div>
+          </div>
         </div>
-      </el-scrollbar>
+      </div>
+      <div v-if="current == 1" class="send" @click="handleSend">发送</div>
+      <!-- <div v-if="current == 1" class="sends">发送</div> -->
     </div>
-    <OperationRecords
-      ref="records"
-      v-model="display"
-      @closed="closed()"
-    ></OperationRecords>
+
     <WindturbineDetailPages
       v-model="dialogVisible"
       @close="handleClose"
@@ -41,18 +89,44 @@
     >
     </WindturbineDetailPages>
   </div>
+  <StationSvgDetailPages
+    v-model="svgVisible"
+    :stationName="stationName"
+    :currentStation="svgWeb"
+    @close="handleClose"
+  >
+  </StationSvgDetailPages>
 </template>
 
 <script>
 import BackgroundData from "utils/BackgroundData";
-import MatrixBlock from "../matrixBlock.vue";
-import OperationRecords from "./operationRecords.vue";
 import WindturbineDetailPages from "../WindturbineDetailPages.vue";
+import MatrixBlock from "../matrixBlock.vue";
+import MessageBridge from "utils/MessageBridge";
+import api from "api/index";
+import { debounce } from "lodash";
+import StationSvgDetailPages from "../stationSvgDetailPages.vue";
 export default {
+  name: "gy-card",
+  components: {
+    MatrixBlock,
+    WindturbineDetailPages,
+    StationSvgDetailPages,
+  },
+  created: function () {
+    this.initData();
+    this.suggestion();
+    this.getControlType();
+    this.handleWindturbineChange();
+    this.intervals = setInterval(this.handleWindturbineChange, 3000);
+    this.suggestion();
+    this.sugIntervals = setInterval(this.suggestion, 15000);
+  },
+  emits: ["parentRun"],
   props: {
     title: {
       type: String,
-      default: "校验区",
+      default: "",
       required: true,
     },
     height: {
@@ -60,82 +134,687 @@ export default {
       default: 200,
     },
   },
-  components: {
-    MatrixBlock,
-    OperationRecords,
-    WindturbineDetailPages,
-  },
   data() {
     return {
-      showList: [],
-      arr: [],
-      display: false,
-      dialogVisible: false,
-      currentWindturbine: {},
       intervals: null,
+      sugIntervals: null,
+      windturbineList: {},
+      current: 1,
+      titleList: [],
+      startList: [],
+      stopList: [],
+      maintainList: [],
+      unMaintainList: [],
+      chooseList: [],
+      sendList: [],
+      currentWindturbine: {},
+      dialogVisible: false,
+      // svgVisible: false,
+      svgWeb: "",
+      // stationName: "",
+      // 定时器
+      // timer: "",
+      controlTypeList: [],
+      controlErorCodes: [
+        "控制成功",
+        "控制命令发送失败",
+        "无效的控制地址",
+        "被控设备异常",
+        "无效的控制功能",
+        "网络连接错误,检查场站通信",
+        "控制结果读取超时",
+        "未知错误",
+        "控制命令错误",
+        "收到无法识别数据",
+        "未读取到数据包",
+        "未知错误",
+        "风机操作过频繁",
+        "风机被挂牌",
+        "风机操作与风机状态不符",
+        "需要登录",
+      ],
+      indexsss: 0,
     };
   },
-  created() {
-    this.dataDeal();
-    this.intervals = setInterval(this.dataDeal, 1000);
-    this.arr = BackgroundData.getInstance().checkouts;
+  computed: {
+    style() {
+      return `width: 100%; height: ${this.height}vh;`;
+    },
   },
   methods: {
-    dataDeal() {
-      if (this.arr.length > 0) {
-        let flag = false;
-        let showList = [];
-        let arr = [];
-        let checks = BackgroundData.getInstance().checkouts;
-        console.log(this.$store.state.windturbinelist);
-        checks.forEach((item) => {
-          if (item.status === this.$store.state.windturbinelist[item.windturbineId].status) {
-            showList.push(this.$store.state.windturbinelist[item.windturbineId]);
-          } else {
-            BackgroundData.getInstance().removeCheckouts(item);
+    getControlType() {
+      api.getControlType().then((res) => {
+        if (res) {
+          this.controlTypeList = res.data;
+        }
+      });
+    },
+    control(current) {
+      this.current = current === 0 ? current : current === 1 ? current : 1;
+      this.suggestion();
+    },
+    initData: function () {
+      let mb = MessageBridge.getInstance();
+      let vss = [
+        { key: "/topic/voice-control", action: this.windturbineMessage },
+      ];
+      mb.register(vss);
+    },
+    suggestion() {
+      api.recommendation().then((res) => {
+        if (res.data) {
+          this.titleList = res.data;
+          if (this.current === 0) {
+            let dateList = [];
+            this.titleList.forEach((item) => {
+              let status = this.controlTypeList.filter(
+                (val) =>
+                  val.stationId ===
+                  this.windturbinelist[item.windturbineId].stationId
+              )[0].type;
+              if (status) {
+                let arr = Object.keys(this.windturbinelist).sort();
+                this.windturbinelist =
+                  arr.length !== 0
+                    ? this.windturbinelist
+                    : this.$store.state.windturbinelist;
+                switch (item.operateStyle) {
+                  case "Start":
+                    this.windturbinelist[item.windturbineId].controlType = 1;
+                    break;
+                  case "Stop":
+                    this.windturbinelist[item.windturbineId].controlType = 2;
+                    break;
+                  case "Maintain":
+                    this.windturbinelist[item.windturbineId].controlType = 6;
+                    break;
+                  case "UnMaintain":
+                    this.windturbinelist[item.windturbineId].controlType = 8;
+                    break;
+                }
+                dateList.push(this.windturbinelist[item.windturbineId]);
+              }
+            });
+            let mss = {};
+            mss.type = "send";
+            mss.deviceType = "Auto";
+            setTimeout(() => {
+              if (dateList.length > 0) {
+                this.sendCommand(mss, dateList);
+              }
+            }, 3000);
           }
-          if (new Date().getTime() - item.checkTime > 120000) {
-            BackgroundData.getInstance().removeCheckouts(item);
-            arr.push(item.windturbineId);
-            flag = true;
+        }
+      });
+    },
+    windturbineMessage(msg) {
+      if (this.$store.state.current === 1 || this.$store.state.current === 0) {
+        let arr = [];
+        if (msg === "CLOSE") {
+          arr.push(msg);
+        } else {
+          arr = msg.split("-");
+        }
+        this.dialogVisible = false;
+        this.svgVisible = false;
+        this.svgWeb = "";
+        if (arr[0] === "OPEN_FJ") {
+          this.currentWindturbine = this.windturbinelist[arr[1]];
+          setTimeout(() => {
+            this.dialogVisible = true;
+          }, 500);
+        } else if (arr[0] === "CLOSE") {
+          this.dialogVisible = false;
+          this.svgVisible = false;
+        }  else if (
+          arr[0] === "CONTROL_START" ||
+          arr[0] === "CONTROL_STOP" ||
+          arr[0] === "CONTROL_MAINTAIN" ||
+          arr[0] === "CONTROL_UNMAINTAIN"
+        ) {
+          let windControlList = [];
+          let mss = {};
+          arr.forEach((item) => {
+            if (
+              item ===
+              (this.windturbinelist[item]
+                ? this.windturbinelist[item].windturbineId
+                : "")
+            ) {
+              switch (arr[0]) {
+                case "CONTROL_START":
+                  this.windturbinelist[item].controlType = "1";
+                  break;
+                case "CONTROL_STOP":
+                  this.windturbinelist[item].controlType = "2";
+                  break;
+                case "CONTROL_MAINTAIN":
+                  this.windturbinelist[item].controlType = "6";
+                  break;
+                case "CONTROL_UNMAINTAIN":
+                  this.windturbinelist[item].controlType = "8";
+                  break;
+              }
+              windControlList.push(this.windturbinelist[item]);
+            }
+          });
+          mss.type = "send";
+          this.sendCommand(mss, windControlList);
+        } else if (
+          arr[0] === "CONTROL_LOCK_OVERHAUL" ||
+          arr[0] === "CONTROL_LOCK_MAINTAIN" ||
+          arr[0] === "CONTROL_LOCK_LNVOLVED_OVERHAUL" ||
+          arr[0] === "CONTROL_LOCK_LNVOLVED_MAINTAIN" ||
+          arr[0] === "CONTROL_LOCK_LNVOLVED_PG" ||
+          arr[0] === "CONTROL_LOCK_LNVOLVED_WEATHER" ||
+          arr[0] === "CONTROL_UNLOCK"
+        ) {
+          let windturbine = this.windturbinelist[arr[1]];
+          switch (arr[0]) {
+            case "CONTROL_LOCK":
+              this.sendLock({ value: "Lock" }, windturbine);
+              break;
+            case "CONTROL_LOCK_OVERHAUL":
+              this.sendLock({ value: "CheckLock" }, windturbine);
+              break;
+            case "CONTROL_LOCK_MAINTAIN":
+              this.sendLock({ value: "FaultLock" }, windturbine);
+              break;
+            case "CONTROL_LOCK_LNVOLVED_OVERHAUL":
+              this.sendLock({ value: "StationCheckLock" }, windturbine);
+              break;
+            case "CONTROL_LOCK_LNVOLVED_MAINTAIN":
+              this.sendLock({ value: "StationFaulLock" }, windturbine);
+              break;
+            case "CONTROL_LOCK_LNVOLVED_PG":
+              this.sendLock({ value: "StationPowerLineLock" }, windturbine);
+              break;
+            case "CONTROL_LOCK_LNVOLVED_WEATHER":
+              this.sendLock({ value: "StationWeatherLock" }, windturbine);
+              break;
+            case "CONTROL_UNLOCK":
+              this.sendLock({ value: "UnLock" }, windturbine);
+              break;
           }
-        });
-        this.showList = showList;
-        if (flag) {
-          let mss = arr.join(",") + "风机超时未响应，已移除";
-          this.$notify({
-            title: "控制",
-            message: mss,
-            type: "warning",
-            position: "bottom-right",
-            offset: 60,
-            duration: 3000,
+        } else if (arr[0] === "CONTROL_SART_RECOMMENDATION") {
+          let mss = {};
+          mss.type = "send";
+          this.startList.forEach((item) => {
+            item.controlType = "1";
+          });
+          this.sendCommand(mss, this.startList);
+        } else if (arr[0] === "CONTROL_STOP_RECOMMENDATION") {
+          let mss = {};
+          mss.type = "send";
+          this.stopList.forEach((item) => {
+            item.controlType = "2";
+          });
+          this.sendCommand(mss, this.stopList);
+        } else if (arr[0] === "CONTROL_RECOMMENDATION_ALL") {
+          let windControlList = [];
+          let mss = {};
+          mss.type = "send";
+          this.startList.forEach((item) => {
+            item.controlType = "1";
+            windControlList.push(item);
+          });
+          this.stopList.forEach((item) => {
+            item.controlType = "2";
+            windControlList.push(item);
+          });
+          this.maintainList.forEach((item) => {
+            item.controlType = "6";
+            windControlList.push(item);
           });
-          flag = false;
+          this.unMaintainList.forEach((item) => {
+            item.controlType = "8";
+            windControlList.push(item);
+          });
+          this.sendCommand(mss, windControlList);
         }
-      }else{
-        this.showList = [];
       }
     },
-    showRecord() {
-      this.display = true;
-      this.$refs.records.dataDeal();
-    },
-    closed() {
-      this.display = false;
+    handleClick(values) {
+      if (values.active) {
+        let showIndex = null;
+        this.chooseList.forEach((item, index) => {
+          if (item.windturbineId === values.windturbineId) {
+            showIndex = index;
+          }
+        });
+        this.chooseList.splice(showIndex, 1);
+      } else {
+        this.chooseList.push(values);
+      }
+      this.startList.forEach((item) => {
+        if (item.windturbineId === values.windturbineId) {
+          item.active = !item.active;
+        }
+      });
+      this.stopList.forEach((item) => {
+        if (item.windturbineId === values.windturbineId) {
+          item.active = !item.active;
+        }
+      });
+      this.maintainList.forEach((item) => {
+        if (item.windturbineId === values.windturbineId) {
+          item.active = !item.active;
+        }
+      });
+      this.unMaintainList.forEach((item) => {
+        if (item.windturbineId === values.windturbineId) {
+          item.active = !item.active;
+        }
+      });
     },
-    handleClick(itm) {
+    handleDetial(itm) {
       this.dialogVisible = true;
       this.currentWindturbine = itm;
     },
     handleClose() {
       this.dialogVisible = false;
+      // this.svgVisible = false;
+    },
+    handleSend() {
+      if (this.chooseList.length > 0) {
+        this.chooseList.forEach((item) => {
+          if (item.operateStyle === "Start") {
+            item.controlType = 1;
+          } else if (item.operateStyle === "Stop") {
+            item.controlType = 2;
+          } else if (item.operateStyle === "Maintain") {
+            item.controlType = 6;
+          } else if (item.operateStyle === "UnMaintain") {
+            item.controlType = 8;
+          }
+        });
+        let mss = {};
+        mss.type = "send";
+        mss.deviceType = "Recommend";
+        this.sendCommand(mss, this.chooseList);
+      }
+    },
+    /* 右键菜单 */
+    contextmenu() {
+      const { remote } = require("electron");
+      let that = this;
+      const menuTemplate = [
+        {
+          label: "发送",
+          click() {
+            that.handleSend();
+          },
+        },
+        {
+          label: "挂牌",
+          submenu: [
+            {
+              label: "检修",
+              click() {
+                that.sendLock({ value: "CheckLock" });
+              },
+            },
+            {
+              label: "故障维修",
+              click() {
+                that.sendLock({ value: "FaultLock" });
+              },
+            },
+            {
+              label: "场内受累检修",
+              click() {
+                that.sendLock({ value: "StationCheckLock" });
+              },
+            },
+            {
+              label: "场内受累故障",
+              click() {
+                that.sendLock({ value: "StationFaulLock" });
+              },
+            },
+            {
+              label: "场外受累电网",
+              click() {
+                that.sendLock({ value: "StationPowerLineLock" });
+              },
+            },
+            {
+              label: "场外受累天气",
+              click() {
+                that.sendLock({ value: "StationWeatherLock" });
+              },
+            },
+          ],
+        },
+      ];
+      const menu = remote.Menu.buildFromTemplate(menuTemplate);
+
+      menu.popup(remote.getCurrentWindow());
+    },
+    sendCommand(msg, windturbine) {
+      let bd = BackgroundData.getInstance();
+      if (!bd.LoginUser) {
+        this.$notify({
+          title: "请登录",
+          message: "控制风机需要先登录！",
+          type: "warning",
+          position: "bottom-right",
+          offset: 60,
+          duration: 3000,
+        });
+        return;
+      }
+      let sendList = windturbine;
+      if (sendList.length > 0) {
+        bd.checkout(sendList);
+        this.chooseList = [];
+        let pairs = {};
+        sendList.forEach((item) => {
+          let ct = {
+            windturbineId: item.windturbineId,
+            stationId: item.stationId,
+            projectId: item.projectId,
+            modelId: item.modelId,
+            controlType: item.controlType,
+            lockType: item.lockType,
+            userName: `system_${bd.LoginUser.name}`,
+            userId: 0,
+            auto: this.current === 0 ? true : false,
+            deviceType: msg.deviceType,
+          };
+          pairs[ct.windturbineId] = ct;
+        });
+        api.windturbControl(pairs).then((res) => {
+          if (res) {
+            this.controlSuccess(res);
+          }
+        });
+      }
+    },
+    sendLock(msg, windturbine) {
+      let bd = BackgroundData.getInstance();
+      if (!bd.LoginUser) {
+        this.$notify({
+          title: "请登录",
+          message: "控制风机需要先登录！",
+          type: "warning",
+          position: "bottom-right",
+          offset: 60,
+          duration: 3000,
+        });
+        return;
+      }
+      let sendList = [];
+      if (windturbine) {
+        windturbine.lockType = msg.value;
+        sendList.push(windturbine);
+      } else {
+        this.chooseList.forEach((item) => {
+          item.lockType = msg.value;
+        });
+        sendList = this.chooseList;
+      }
+      if (sendList.length > 0) {
+        this.chooseList = [];
+        let pairs = {};
+        sendList.forEach((item) => {
+          let ct = {
+            windturbineId: item.windturbineId,
+            stationId: item.stationId,
+            projectId: item.projectId,
+            modelId: item.modelId,
+            controlType: item.controlType,
+            lockType: item.lockType,
+            userName: `system_${bd.LoginUser.name}`,
+            userId: 0,
+          };
+          pairs[ct.windturbineId] = ct;
+        });
+        api.windturbControlLock(pairs).then((res) => {
+          if (res) {
+            this.controlSuccess(res);
+          }
+        });
+      }
+    },
+    clearSelected() {
+      this.startList.forEach((item) => {
+        item.active = false;
+      });
+      this.stopList.forEach((item) => {
+        item.active = false;
+      });
+      this.chooseList = [];
+    },
+    removeList(mk) {
+      let indx = -1;
+      for (let id in this.titleList) {
+        if (this.titleList[id].windturbineId == mk.windturbineId) {
+          indx = id;
+          break;
+        }
+      }
+      if (indx < 0) return;
+      this.titleList.splice(indx, 1);
+    },
+    /* 控制成功 */
+    controlSuccess(msg) {
+      let bd = BackgroundData.getInstance();
+      for (let id in msg.data) {
+        let val = msg.data[id];
+        if (val.errorCode !== "0") {
+          bd.removeCheckouts(val);
+          this.removeList(val);
+        }
+      }
+      if (msg.data || msg.data !== {}) {
+        let mss = ""; // 信息
+        let iserror = false; // 是否有控制错误的风机
+        for (let v in msg.data) {
+          let val = msg.data[v];
+          if (val.errorCode > 0) {
+                    iserror = true;
+                    mss += `${val.windturbineId}  ${this.controlErorCodes[val.errorCode]
+                        }\n`;
+          } else {
+              mss += `${val.windturbineId}\n`;
+          }
+        }
+        let tp = iserror ? "warning" : "success";
+        this.$notify({
+          title: "控制",
+          message: mss,
+          type: tp,
+          position: "bottom-right",
+          offset: 60,
+          duration: 3000,
+        });
+      } else {
+        this.$notify({
+          title: "控制出现错误",
+          message: "控制失败，请重试",
+          type: "warning",
+          position: "bottom-right",
+          offset: 60,
+          duration: 3000,
+        });
+      }
+    },
+
+    /* 控制失败 */
+    controlError(err) {
+      this.$notify({
+        title: "控制出现错误",
+        message: err.message,
+        type: "warning",
+        position: "bottom-right",
+        offset: 60,
+        duration: 3000,
+      });
+    },
+    handleTypeChange(val) {
+      let bd = BackgroundData.getInstance();
+      if (!bd.LoginUser) {
+        this.$notify({
+          title: "请登录",
+          message: "控制风机需要先登录！",
+          type: "warning",
+          position: "bottom-right",
+          offset: 60,
+          duration: 3000,
+        });
+        return;
+      }
+      api
+        .uodateControlType({
+          stationid: val.stationId,
+          type: !val.type,
+          userName: bd.LoginUser.name,
+        })
+        .then((res) => {
+          if (res.data === "success") {
+            this.getControlType();
+          }
+        });
+    },
+    handleWindturbineChange() {
+      api.getWindturbine().then((res) => {
+        let json = res.data;
+        this.$store.commit("windturbinelist", json);
+        this.windturbinelist = json;
+        let arr = Object.keys(json).sort();
+        let stopList = [];
+        let startList = [];
+        let maintainList = [];
+        let unMaintainList = [];
+        for (let id of arr) {
+          let val = json[id];
+          this.chooseList.forEach((item) => {
+            if (item.windturbineId === val.windturbineId) {
+              val.active = true;
+            }
+          });
+          this.titleList.forEach((item) => {
+            if (item.windturbineId === val.windturbineId) {
+              val.operateStyle = item.operateStyle;
+              if (item.operateStyle === "Start" && val.status === 2) {
+                startList.push(val);
+              } else if (item.operateStyle === "Stop" && val.status === 4) {
+                if (item.reasonType === "ElectricityRestrictions") {
+                  val.reasonType = item.reasonType;
+                }
+                stopList.push(val);
+              } else if (item.operateStyle === "Maintain" && val.status === 2) {
+                maintainList.push(val);
+              } else if (
+                item.operateStyle === "UnMaintain" &&
+                val.status === 6
+              ) {
+                unMaintainList.push(val);
+              }
+            }
+          });
+        }
+        let checkoutList = BackgroundData.getInstance().checkouts;
+        checkoutList.forEach((item) => {
+          let starIndex = null;
+          let stopIndex = null;
+          let maintainIndex = null;
+          let unMaintainIndex = null;
+          let starFlag = false;
+          let stopFlag = false;
+          let maintainFlag = false;
+          let unMaintainFlag = false;
+          startList.forEach((param, index) => {
+            if (item.windturbineId === param.windturbineId) {
+              starIndex = index;
+              starFlag = true;
+            }
+          });
+          stopList.forEach((param, index) => {
+            if (item.windturbineId === param.windturbineId) {
+              stopIndex = index;
+              stopFlag = true;
+            }
+          });
+          maintainList.forEach((param, index) => {
+            if (item.windturbineId === param.windturbineId) {
+              maintainIndex = index;
+              maintainFlag = true;
+            }
+          });
+          unMaintainList.forEach((param, index) => {
+            if (item.windturbineId === param.windturbineId) {
+              unMaintainIndex = index;
+              unMaintainFlag = true;
+            }
+          });
+          starFlag ? startList.splice(starIndex, 1) : "";
+          stopFlag ? stopList.splice(stopIndex, 1) : "";
+          maintainFlag ? maintainList.splice(maintainIndex, 1) : "";
+          unMaintainFlag ? unMaintainList.splice(unMaintainIndex, 1) : "";
+        });
+        this.stopList = stopList;
+        this.startList = startList;
+        this.maintainList = maintainList;
+        this.unMaintainList = unMaintainList;
+      });
     },
   },
   unmounted() {
     clearInterval(this.intervals);
+    clearInterval(this.sugIntervals);
+    this.sugIntervals = null;
     this.intervals = null;
   },
+  watch: {
+    "$store.getters.current": {
+      handler: function (json) {
+        this.current = json;
+        this.getControlType();
+        if (json === 0) {
+          let dateList = [];
+          this.titleList.forEach((item) => {
+            let status = this.controlTypeList.filter(
+              (val) =>
+                val.stationId ===
+                this.windturbinelist[item.windturbineId].stationId
+            )[0].type;
+            if (status) {
+              let arr = Object.keys(this.windturbinelist).sort();
+              this.windturbinelist =
+                arr.length !== 0
+                  ? this.windturbinelist
+                  : this.$store.state.windturbinelist;
+              switch (item.operateStyle) {
+                case "Start":
+                  this.windturbinelist[item.windturbineId].controlType = 1;
+                  break;
+                case "Stop":
+                  this.windturbinelist[item.windturbineId].controlType = 2;
+                  break;
+                case "Maintain":
+                  this.windturbinelist[item.windturbineId].controlType = 6;
+                  break;
+                case "UnMaintain":
+                  this.windturbinelist[item.windturbineId].controlType = 8;
+                  break;
+              }
+              dateList.push(this.windturbinelist[item.windturbineId]);
+            }
+          });
+          let mss = {};
+          mss.type = "send";
+          mss.deviceType = "Auto";
+          setTimeout(() => {
+            if (dateList.length > 0) {
+              this.sendCommand(mss, dateList);
+            }
+          }, 3000);
+        }
+      },
+    },
+  },
 };
 </script>
 
@@ -144,8 +823,7 @@ export default {
   border: 1px solid #373737;
   width: 100%;
   margin-left: 15px;
-  margin-top: 10px;
-  height: 25vh;
+  margin-top: 20px;
 }
 
 .body .scoll {
@@ -162,6 +840,8 @@ export default {
   width: 29vw;
   height: 50px;
   display: flex;
+  flex-direction: row;
+  justify-content: space-between;
   align-items: center;
   position: absolute;
   background-color: #000000;
@@ -179,23 +859,136 @@ export default {
   border-radius: 50%;
 }
 
-.record {
+.logo {
+  position: absolute;
+  top: 12px;
+  left: 12px;
+}
+
+.matrix {
+  margin-left: 20px;
+  /* margin-right: 10px; */
+  padding-bottom: 20px;
+  border-bottom: 1px solid rgba(31, 31, 31, 1);
+}
+
+.problemTitle {
+  /* font-size: 12px; */
+  color: #bfbfbf;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  margin-left: 12px;
+}
+
+.send {
+  width: 86px;
+  height: 26px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(84, 183, 90, 1);
+  color: #ffffff;
+  font-size: 14px;
   position: absolute;
+  bottom: 20px;
+  right: 10px;
+}
+.sends {
+  width: 86px;
+  height: 26px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #999999;
   color: #ffffff;
   font-size: 14px;
-  right: 0;
-  top: 23px;
+  position: absolute;
+  bottom: 20px;
+  right: 10px;
+}
+.success {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 250px;
+  height: 48px;
+  position: absolute;
+  bottom: 20px;
+  right: 20%;
+  border: 1px solid rgba(55, 55, 55, 1);
+  border-radius: 10px;
+  color: #ffffff;
+  font-size: 14px;
+}
+
+.controlTypes {
   width: 80px;
   height: 30px;
   display: flex;
   align-items: center;
   justify-content: center;
+  border: 1px solid rgba(51, 51, 51, 1);
+}
+.controlTypesLeft {
+  width: 80px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid rgba(51, 51, 51, 1);
+  border-top-left-radius: 15px;
+  border-bottom-left-radius: 15px;
+}
+.controlTypesRight {
+  width: 80px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid rgba(51, 51, 51, 1);
+  border-top-right-radius: 15px;
+  border-bottom-right-radius: 15px;
+}
+.onControlTypes {
+  width: 80px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid rgba(51, 51, 51, 1);
+  background-color: rgba(37, 116, 219, 1);
+}
+.onControlTypesLeft {
+  width: 80px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* border: 1px solid rgba(37, 116, 219, 1); */
+  border-top-left-radius: 15px;
+  border-bottom-left-radius: 15px;
+  background-color: rgba(37, 116, 219, 1);
+}
+.onControlTypesRight {
+  width: 80px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* border: 1px solid rgba(37, 116, 219, 1); */
+  border-top-right-radius: 15px;
+  border-bottom-right-radius: 15px;
   background-color: rgba(37, 116, 219, 1);
 }
+</style>
 
-.logo {
-  position: absolute;
-  top: 2px;
-  left: 12px;
+<style lang="less">
+.currentScroll{
+    .matrix{
+        .titleSty {
+            font-size: 14px;
+            font-weight: bold;
+        }
+    }
 }
 </style>

src/components/stationSvgDetailPages.vue

@@ -21,7 +21,7 @@
             "
             @click="handleTypeChange(item)"
           >
-            {{ item.stationName ||  item.name }}
+            {{ item.name }}
           </div>
           <div
             v-else
@@ -34,46 +34,55 @@
             "
             @click="handleTypeChange(item)"
           >
-            {{ item.stationName ||  item.name  }}
+            {{ item.name }}
           </div>
         </div>
       </div>
     </template>
     <div>
-      <Cl
-        ref="svgRef"
-        v-if="currentStation == 'CL_FDC' || currentStation == 'CL_SYZ'"
-      />
-      <KB
-        ref="svgRef"
-        v-if="currentStation == 'KB_FDC' || currentStation == 'KB_SYZ'"
-      />
-      <DX
-        ref="svgRef"
-        v-if="currentStation == 'DX_FDC' || currentStation == 'DX_SYZ'"
-      />
-      <SY
-        ref="svgRef"
-        v-if="currentStation == 'SY_FDC' || currentStation == 'SY_SYZ'"
-      />
+      <nss ref="svgRef" v-if="currentStation=='NSS_FDC'||currentStation=='NSS_SYZ'" />
+			<mhs ref="svgRef" v-if="currentStation=='MHS_FDC'||currentStation=='MHS_SYZ'" />
+			<qs ref="svgRef" v-if="currentStation=='QS_FDC'||currentStation=='QS_SYZ'" />
+			<sbq ref="svgRef" v-if="currentStation=='SBQ_FDC'||currentStation=='SBQ_SYZ'" />
+			<xs ref="svgRef" v-if="currentStation=='XS_FDC'||currentStation=='XS_SYZ'" />
+			<pl1 ref="svgRef" v-if="currentStation=='PL1_GDC'||currentStation=='PL_SYZ'" />
+			<pl2 ref="svgRef" v-if="currentStation=='PL2_GDC'||currentStation=='PL2_SYZ'" />
+			<dwk ref="svgRef" v-if="currentStation=='DWK_GDC'||currentStation=='DWK_SYZ'" />
+			<mch ref="svgRef" v-if="currentStation=='MCH_GDC'||currentStation=='MCH_SYZ'" />
+			<xh ref="svgRef" v-if="currentStation=='XH_GDC'||currentStation=='XH_SYZ'" />
+			<sbdl ref="svgRef" v-if="currentStation=='QS3_FDC'||currentStation=='QS3_SYZ'" />
     </div>
   </el-dialog>
 </template>
 
 <script>
-import Cl from "./BoosterStation/cl.vue";
-import KB from "./BoosterStation/kb.vue";
-import DX from "./BoosterStation/dx.vue";
-import SY from "./BoosterStation/sy.vue";
+	import Dwk from "./BoosterStation/dwk.vue";
+	import Sbdl from "./BoosterStation/sbdl.vue";
+	import Nss from "./BoosterStation/nss.vue";
+	import Mhs from "./BoosterStation/mhs.vue";
+	import Qs from "./BoosterStation/qs.vue";
+	import Pl1 from "./BoosterStation/pl1.vue";
+	import Pl2 from "./BoosterStation/pl2.vue";
+	import Mch from "./BoosterStation/mch.vue";
+	import Xs from "./BoosterStation/xs.vue";
+	import Xh from "./BoosterStation/xh.vue";
+	import Sbq from "./BoosterStation/sbq.vue";
 export default {
   components: {
-    Cl,
-    KB,
-    DX,
-    SY,
+    Dwk,
+			Sbdl,
+			Nss,
+			Mhs,
+			Qs,
+			Pl1,
+			Pl2,
+			Mch,
+			Xs,
+			Xh,
+			Sbq
   },
   props: {
-    svgWeb: {
+    currentStation: {
       type: String,
       default: "",
     },
@@ -82,7 +91,7 @@ export default {
     return {
       BasicInfo: {},
       line: "",
-      currentStation: "",
+      // currentStation: "",
       alarmTime: "",
       alarmContent: "",
       alarms: [],
@@ -103,10 +112,10 @@ export default {
       //clearInterval(this.refreshTimer);
     },
     opened() {
-      this.currentStation = this.svgWeb?this.svgWeb:this.$store.state.stationList[0].id;
+      // this.currentStation = this.currentStation?this.currentStation:this.$store.state.stationList[0].id;
       this.stationList = this.$store.state.stationList;
 	  this.$nextTick(() => {
-           this.$refs.svgRef.opened();
+          //  this.$refs.svgRef.opened();
         });
     },
     dbClicks(value) {