风机矩阵新增光伏场站

.env.development

@@ -1,5 +1,5 @@
-VUE_APP_API=http://18.6.30.63:8099
-VUE_APP_SHARDINGURL=http://18.6.30.63:8075
-VUE_APP_ADAPTERURL=http://18.6.30.63:8011
-VUE_APP_APIS=18.6.30.63:8099
-VUE_APP_ADAPTERURLS=18.6.30.63:8011
+VUE_APP_API=http://192.168.10.18:8099
+VUE_APP_SHARDINGURL=http://192.168.10.18:8075
+VUE_APP_ADAPTERURL=http://192.168.10.18:8011
+VUE_APP_APIS=192.168.10.18:8099
+VUE_APP_ADAPTERURLS=192.168.10.18:8011

src/App.vue

@@ -166,12 +166,13 @@ export default {
     },
     getStation() {
       api.getStation().then((res) => {
-        let stationList = [];
-        res.data.forEach((item) => {
-          if (item.type === 1) {
-            stationList.push(item);
-          }
-        });
+        // let stationList = [];
+        let stationList = res.data;
+        // res.data.forEach((item) => {
+        //   if (item.type === 1) {
+        //     stationList.push(item);
+        //   }
+        // });
         this.$store.commit("stationList", stationList);
         let syzArray = [];
         stationList.forEach((item) => {

src/components/allMatrices.vue

@@ -14,7 +14,32 @@
           </div>
         </div>
 
-        <div style="display: flex; flex-direction: row;margin-right: 90px;width: 800px;">
+        <div class="infoMsg">
+            <div class="infoTitle">
+                <span>欠发电量</span>
+            </div>
+            <div class="infoMain" :class="
+              data.num1 === 5
+                ? 'item9'
+                : data.num1 === 4
+                  ? 'item8'
+                  : data.num1 === 3
+                    ? 'item7'
+                    : data.num1 === 2
+                      ? 'item6'
+                      : data.num1 === 1
+                        ? 'item5'
+                        : '' " v-for="(data, index) of panel2Data.datas" :key="index">
+                <div class="infoMain_top">
+                    <span class="whiteBox"></span>
+                    <span class="infoMainMsg">×{{ data.num1 }}</span>
+                </div>
+                <div class="infoMain_bot">
+                    <span>{{ data.num3 }}</span>
+                </div>
+            </div>
+        </div>
+        <!-- <div style="display: flex; flex-direction: row;margin-right: 90px;width: 800px;">
           <div class="item2" v-for="(data, index) of panel2Data.datas" :key="index">
             <div :class="
               data.num1 === 5
@@ -35,78 +60,176 @@
               <div class="num3">{{ data.num3 }}</div>
             </div>
           </div>
-        </div>
+        </div> -->
       </div>
       <div class="content">
         <box-select node=".box" @selectList="selectList">
           <div class="windStation" v-for="(item, index) in stationArr" :key="index">
-            <div class="stationTitle">
+            <div class="stationTitle" v-if="item[0].stationId">
               <div class="stationName">
-                {{
-                    stationList.filter((val) => item[0].stationId === val.id)[0]
-                      ?.name
-                }}
+                {{getStationName(item)}}
               </div>
               <div class="num">
                 <div class="jrts">接入台数</div>
-                <div class="jrts_num">{{ item.length }}</div>
+                <!-- <div class="jrts_num">{{ item.length }}</div> -->
+                <div class="jrts_num">{{ getStatus(item, 'jr') }}</div>
               </div>
               <div class="num">
                 <div class="djts">待机台数</div>
                 <div class="djts_num">
-                  {{ item.filter((val) => val.status === 2)?.length }}
+                  <!-- {{ item.filter((val) => val.status === 2)?.length }} -->
+                  <div class="jrts_num">{{ getStatus(item, 'dj') }}</div>
                 </div>
               </div>
               <div class="num">
                 <div class="bwts">并网台数</div>
                 <div class="bwts_num">
-                  {{ item.filter((val) => val.status === 4)?.length }}
+                  <!-- {{ item.filter((val) => val.status === 4)?.length }} -->
+                  <div class="jrts_num">{{ getStatus(item, 'bw') }}</div>
                 </div>
               </div>
               <div class="num">
                 <div class="gzts">故障台数</div>
                 <div class="gzts_num">
-                  {{ item.filter((val) => val.status === 5)?.length }}
+                  <!-- {{ item.filter((val) => val.status === 5)?.length }} -->
+                  <div class="jrts_num">{{ getStatus(item, 'gz') }}</div>
                 </div>
               </div>
               <div class="num">
                 <div class="jxts">检修台数</div>
                 <div class="jxts_num">
-                  {{ item.filter((val) => val.status === 6)?.length }}
+                  <!-- {{ item.filter((val) => val.status === 6)?.length }} -->
+                  <div class="jrts_num">{{ getStatus(item, 'jx') }}</div>
                 </div>
               </div>
               <div class="num">
                 <div class="lxts">离线台数</div>
                 <div class="lxts_num">
-                  {{ item.filter((val) => val.status === 7)?.length }}
+                  <!-- {{ item.filter((val) => val.status === 7)?.length }} -->
+                  <div class="jrts_num">{{ getStatus(item, 'lx') }}</div>
+                </div>
+              </div>
+
+              <div class="stationInfo">
+                <div class="name">实时功率</div>
+                <div class="nums">
+                  <!-- {{
+                      $store.state.titleInfo.stationOverviewInfos[
+                        item[0].stationId
+                      ]?.realTimePower?.value.toFixed(2)
+                  }}MW -->
+                  {{getseeting($store.state.titleInfo.stationOverviewInfos, item[0], 'power')}}MW
+                </div>
+              </div>
+              <div class="stationInfo">
+                <div class="name">平均风速</div>
+                <div class="nums">
+                  <!-- {{
+                      $store.state.titleInfo.stationOverviewInfos[
+                        item[0].stationId
+                      ]?.averageWindSpeed?.value.toFixed(2)
+                  }}m/s -->
+                  {{getseeting($store.state.titleInfo.stationOverviewInfos, item[0], 'wind')}}m/s
+                </div>
+              </div>
+            </div>
+            <div class="stationTitle" v-else>
+              <div class="stationName">
+                {{getStationName(item)}}
+              </div>
+              <div class="num">
+                <div class="jrts">接入台数</div>
+                <!-- <div class="jrts_num">{{ item.length }}</div> -->
+                <div class="jrts_num">{{ getStatus(item, 'jr') }}</div>
+              </div>
+              <div class="num">
+                <div class="djts">待机台数</div>
+                <div class="djts_num">
+                  <!-- {{ item.filter((val) => val.status === 2)?.length }} -->
+                  <div class="jrts_num">{{ getStatus(item, 'dj') }}</div>
+                </div>
+              </div>
+              <div class="num">
+                <div class="bwts">并网台数</div>
+                <div class="bwts_num">
+                  <!-- {{ item.filter((val) => val.status === 4)?.length }} -->
+                  <div class="jrts_num">{{ getStatus(item, 'bw') }}</div>
+                </div>
+              </div>
+              <div class="num">
+                <div class="gzts">故障台数</div>
+                <div class="gzts_num">
+                  <!-- {{ item.filter((val) => val.status === 5)?.length }} -->
+                  <div class="jrts_num">{{ getStatus(item, 'gz') }}</div>
+                </div>
+              </div>
+              <div class="num">
+                <div class="jxts">离线台数</div>
+                <div class="jxts_num">
+                  <!-- {{ item.filter((val) => val.status === 6)?.length }} -->
+                  <div class="jrts_num">{{ getStatus(item, 'lx') }}</div>
+                </div>
+              </div>
+              <div class="num">
+                <div class="lxts">维护台数</div>
+                <div class="lxts_num">
+                  <!-- {{ item.filter((val) => val.status === 7)?.length }} -->
+                  <div class="jrts_num">{{ getStatus(item, 'wh') }}</div>
+                </div>
+              </div>
+              <div class="num">
+                <div class="gzts">限电台数</div>
+                <div class="gzts_num">
+                  <!-- {{ item.filter((val) => val.status === 7)?.length }} -->
+                  <div class="jrts_num">{{ getStatus(item, 'xd') }}</div>
+                </div>
+              </div>
+              <div class="num">
+                <div class="gzts">限电停机台数</div>
+                <div class="gzts_num">
+                  <!-- {{ item.filter((val) => val.status === 5)?.length }} -->
+                  <div class="jrts_num">{{ getStatus(item, 'xdtj') }}</div>
+                </div>
+              </div>
+              <div class="num">
+                <div class="lxts">未知台数</div>
+                <div class="lxts_num">
+                  <!-- {{ item.filter((val) => val.status === 6)?.length }} -->
+                  <div class="jrts_num">{{ getStatus(item, 'wz') }}</div>
                 </div>
               </div>
 
               <div class="stationInfo">
                 <div class="name">实时功率</div>
                 <div class="nums">
-                  {{
+                  <!-- {{
                       $store.state.titleInfo.stationOverviewInfos[
                         item[0].stationId
                       ]?.realTimePower?.value.toFixed(2)
-                  }}MW
+                  }}MW -->
+                  {{getseeting($store.state.titleInfo.stationOverviewInfos, 'power')}}MW
                 </div>
               </div>
               <div class="stationInfo">
                 <div class="name">平均风速</div>
                 <div class="nums">
-                  {{
+                  <!-- {{
                       $store.state.titleInfo.stationOverviewInfos[
                         item[0].stationId
                       ]?.averageWindSpeed?.value.toFixed(2)
-                  }}m/s
+                  }}m/s -->
+                  {{getseeting($store.state.titleInfo.stationOverviewInfos, 'wind')}}m/s
                 </div>
               </div>
             </div>
-            <div class="block">
+            <div class="block" v-if="showWh(item)">
               <UnpaidMatrixBlock @on-click="handleDetial" @choose-click="handleClick" :dataList="item">
               </UnpaidMatrixBlock>
             </div>
+            <div class="block" v-else>
+              <UnpaidMatrixBlockPv @on-click="handleDetial" @choose-click="handleClick" :dataList="item">
+              </UnpaidMatrixBlockPv>
+            </div>
           </div>
         </box-select>
       </div>
@@ -119,13 +242,16 @@
 <script>
 import BackgroundData from "utils/BackgroundData";
 import UnpaidMatrixBlock from "components/unpaidMatrixBlock.vue";
+import UnpaidMatrixBlockPv from "components/unpaidMatrixBlockPv.vue";
 import WindturbineDetailPages from "components/WindturbineDetailPages.vue";
 import boxSelect from "components/boxSelect.vue";
 import ParametersContrast from "./control/parametersContrast.vue";
+import MessageBridge from "../utils/MessageBridge";
 import api from "api/index";
 export default {
   components: {
     UnpaidMatrixBlock,
+    UnpaidMatrixBlockPv,
     WindturbineDetailPages,
     boxSelect,
     ParametersContrast,
@@ -184,23 +310,99 @@ export default {
   },
   mounted() { },
   methods: {
+    showWh(item) {
+        let show = false
+        if (item[0].stationId) {
+            show = true
+        }
+        return show
+    },
+    getStatus(item, type) {
+        let num = 0
+        if (item[0].stationId) {
+            if (type === 'jr') {
+                num = item.length
+            } else if (type === 'dj') {
+                num = item.filter((val) => val.status === 2)?.length
+            } else if (type === 'bw') {
+                num = item.filter((val) => val.status === 4)?.length
+            } else if (type === 'gz') {
+                num = item.filter((val) => val.status === 5)?.length
+            } else if (type === 'jx') {
+                num = item.filter((val) => val.status === 6)?.length
+            } else if (type === 'lx') {
+                num = item.filter((val) => val.status === 7)?.length
+            }
+        } else {
+            if (type === 'jr') {
+                num = item.length
+            } else if (type === 'dj') {
+                num = item.filter((val) => val.status === 0)?.length
+            } else if (type === 'bw') {
+                num = item.filter((val) => val.status === 1)?.length
+            } else if (type === 'gz') {
+                num = item.filter((val) => val.status === 2)?.length
+            } else if (type === 'lx') {
+                num = item.filter((val) => val.status === 3)?.length
+            } else if (type === 'wh') {
+                num = item.filter((val) => val.status === 4)?.length
+            } else if (type === 'xd') {
+                num = item.filter((val) => val.status === 5)?.length
+            } else if (type === 'xdtj') {
+                num = item.filter((val) => val.status === 6)?.length
+            } else if (type === 'wz') {
+                num = item.filter((val) => val.status === -1)?.length
+            }
+        }
+        return num
+    },
+    getStationName(item) {
+        let name = ''
+        if (item[0]) {
+            this.stationList.forEach(val =>{
+                if (item[0].stationId) {
+                    if (item[0].stationId === val.id) {
+                        name = val.name
+                    }
+                } else if (item[0].station) {
+                    if (item[0].station === val.id) {
+                        name = val.name
+                    }
+                }
+            })
+        }
+        return name
+    },
+    getseeting(arr, item, type) {
+        let num = ''
+        if (arr[item.stationId]) {
+            if (arr[item.stationId].realTimePower) {
+                if (type === 'power') {
+                    num = arr[item.stationId].realTimePower.value.toFixed(2)
+                } else {
+                    num = arr[item.stationId].averageWindSpeed.value.toFixed(2)
+                }
+            }
+        }
+        return num
+    },
     opened() {
       let stationList = [
         {
           id: "all",
-          name: "全部风机",
+          name: "全部",
         },
       ];
       let stations = this.$store.state.stationList;
       stations.forEach((item) => {
-        if (item.id.indexOf("FDC") != -1) {
+        if (item.id.indexOf("FDC") != -1 || item.id.indexOf("GDC") != -1) {
           stationList.push(item);
           this.stationObj[item.id] = [];
         }
       });
       this.stationList = stationList;
       this.handleWindturbineChange();
-      this.intervals = setInterval(this.handleWindturbineChange, 3000);
+    //   this.intervals = setInterval(this.handleWindturbineChange, 3000);
     },
     closed() {
       this.chooseList = [];
@@ -214,7 +416,7 @@ export default {
       let stations = this.$store.state.stationList;
       stations.forEach((item) => {
         if (val === "all") {
-          if (item.id.indexOf("FDC") != -1) {
+          if (item.id.indexOf("FDC") != -1 || item.id.indexOf("GDC") != -1) {
             stationObj[item.id] = [];
           }
         } else if (item.id === val) {
@@ -516,44 +718,137 @@ export default {
         this.parametersDisplay = true;
       }
     },
-    handleWindturbineChange() {
-      api.getWindturbine().then((res) => {
-        if (res.data) {
-          let stationArr = [];
-          for (const key in this.stationObj) {
-            this.stationObj[key] = [];
-          }
-          this.windterbin = res.data;
-          let arr = Object.keys(res.data).sort();
-          for (const id of arr) {
-            let val = res.data[id];
-            if (val.lockValue === 9) {
-              val.lockValues = this.lockValues.filter(
-                (item) => val.windturbineId === item.windturbineID
-              )[0]?.value;
+    getPvMsg(msg) {
+        window.sessionStorage.removeItem('pv')
+        // let jsonMsg = JSON.parse(msg)
+        window.sessionStorage.setItem('pv', msg)
+        this.changeData()
+    },
+    getWindMsg(msg) {
+        window.sessionStorage.removeItem('wind')
+        // let jsonMsg = JSON.parse(msg)
+        window.sessionStorage.setItem('wind', msg)
+        this.changeData()
+    },
+    changeData() {
+        let wswind = JSON.parse(window.sessionStorage.getItem('wind'))
+        let pv = JSON.parse(window.sessionStorage.getItem('pv'))
+        let msg = {}
+        if (wswind && pv) {
+            msg = {...wswind, ...pv}
+            let stationArr = [];
+            for (const key in this.stationObj) {
+                this.stationObj[key] = [];
             }
-            this.chooseList.forEach((item) => {
-              if (item.windturbineId === val.windturbineId) {
-                val.active = true;
-              }
-            });
-            if (this.current === "all") {
-              this.stationObj[val.stationId]?.push(val);
-            } else {
-              if (this.current === val.stationId) {
-                this.stationObj[val.stationId]?.push(val);
-              }
+            this.windterbin = msg;
+            let arr = Object.keys(msg).sort();
+            for (const id of arr) {
+                let val = msg[id];
+                
+                //风机
+                if (val.stationId) {
+                    if (val.lockValue === 9) {
+                    val.lockValues = this.lockValues.filter(
+                        (item) => val.windturbineId === item.windturbineID
+                    )[0]?.value;
+                    }
+                    this.chooseList.forEach((item) => {
+                    if (item.windturbineId === val.windturbineId) {
+                        val.active = true;
+                    }
+                    });
+                    if (this.current === "all") {
+                    this.stationObj[val.stationId]?.push(val);
+                    } else {
+                    if (this.current === val.stationId) {
+                        this.stationObj[val.stationId]?.push(val);
+                    }
+                    }
+                }
+                // 光伏
+                if(val.station) {
+                    if (this.current === "all") {
+                    this.stationObj[val.station]?.push(val);
+                    } else {
+                    if (this.current === val.station) {
+                        this.stationObj[val.station]?.push(val);
+                    }
+                    }
+                }
             }
-          }
-          this.current === "all" &&
-            (this.cache = JSON.parse(JSON.stringify(this.stationObj)));
-          let list = Object.keys(this.stationObj).sort();
-          for (const id of list) {
-            stationArr.push(this.stationObj[id]);
-          }
-          this.stationArr = stationArr;
+            this.current === "all" &&
+                (this.cache = JSON.parse(JSON.stringify(this.stationObj)));
+            let list = Object.keys(this.stationObj).sort();
+            for (const id of list) {
+                stationArr.push(this.stationObj[id]);
+            }
+            // this.stationArr = stationArr;
+            this.stationArr = this.sortStarionArr(stationArr);
         }
-      });
+    },
+    // 按照场站排序
+    sortStarionArr(arr) {
+        let newArr = []
+        for (let i = 0; i<this.stationList.length; i++) {
+            let item = this.stationList[i]
+            for (let j = 0; j<arr.length; j++) {
+                let itn = arr[j]
+                if (itn[0].stationId && itn[0].stationId === item.id) {
+                    newArr.push(itn)
+                } else if (itn[0].station && itn[0].station === item.id) {
+                    newArr.push(itn)
+                }
+            }
+        }
+        return newArr
+    },
+    handleWindturbineChange() {
+        let ws = MessageBridge.getInstance();
+        let wind = [
+            { key: "/topic/windturbine", action: this.getWindMsg },
+        ];
+        let guangfu = [
+            { key: "/topic/pv", action: this.getPvMsg },
+        ];
+        ws.register(wind);
+        ws.register(guangfu);
+    //   api.getWindturbine().then((res) => {
+    //     if (res.data) {
+    //       let stationArr = [];
+    //       for (const key in this.stationObj) {
+    //         this.stationObj[key] = [];
+    //       }
+    //       this.windterbin = res.data;
+    //       let arr = Object.keys(res.data).sort();
+    //       for (const id of arr) {
+    //         let val = res.data[id];
+    //         if (val.lockValue === 9) {
+    //           val.lockValues = this.lockValues.filter(
+    //             (item) => val.windturbineId === item.windturbineID
+    //           )[0]?.value;
+    //         }
+    //         this.chooseList.forEach((item) => {
+    //           if (item.windturbineId === val.windturbineId) {
+    //             val.active = true;
+    //           }
+    //         });
+    //         if (this.current === "all") {
+    //           this.stationObj[val.stationId]?.push(val);
+    //         } else {
+    //           if (this.current === val.stationId) {
+    //             this.stationObj[val.stationId]?.push(val);
+    //           }
+    //         }
+    //       }
+    //       this.current === "all" &&
+    //         (this.cache = JSON.parse(JSON.stringify(this.stationObj)));
+    //       let list = Object.keys(this.stationObj).sort();
+    //       for (const id of list) {
+    //         stationArr.push(this.stationObj[id]);
+    //       }
+    //       this.stationArr = stationArr;
+    //     }
+    //   });
     },
   },
 };
@@ -583,9 +878,68 @@ export default {
   margin-left: 3vw;
   padding-top: 8px;
   position: absolute;
-  width: 100%;
+  width: 96%;
   background-color: #000000;
   padding-bottom: 10px;
+  .infoMsg{
+    display: flex;
+    background: #fff;
+    border-radius: 10px;
+    height: 34px;
+    padding: 0 10px;
+    margin-right: 20px;
+    .infoTitle{
+        position: relative;
+        top: 7px;
+        color: #000;
+        font-weight: 600;
+        padding: 0 10px;
+        span{
+            margin-right: 10px;
+        }
+    }
+    .infoMain{
+        padding: 0 20px;
+        color: #fff;
+        .infoMain_top{
+            display: flex;
+            justify-content: end;
+            .whiteBox{
+                display: inline-block;
+                width: 15px;
+                height: 5px;
+                background: #fff;
+                position: relative;
+                top: 5px;
+            }
+            .infoMainMsg{
+            }
+        }
+        .infoMain_bot{
+            position: relative;
+            top: -3px;
+        }
+    }
+    .item9 {
+        background-color: rgba(05, 187, 76, 1);
+    }
+
+    .item8 {
+        background-color: #0ec7dc;
+    }
+
+    .item7 {
+        background-color: rgba(75, 85, 174, 1);
+    }
+
+    .item6 {
+        background-color: rgba(225, 125, 36, 1);
+    }
+
+    .item5 {
+        background-color: rgba(186, 50, 55, 1);
+    }
+  }
 }
 
 .title {
@@ -613,9 +967,9 @@ export default {
 }
 
 .content {
-  display: flex;
-  flex-direction: column;
-  margin-top: 65px;
+    display: flex;
+    flex-direction: column;
+    margin-top: 50px;
 }
 
 .block {
@@ -775,43 +1129,5 @@ export default {
   }
 }
 
-.item9 {
-  background-color: #57cf3a;
-  flex: 1;
-  display: flex;
-  width: 20%;
-  flex-wrap: wrap;
-}
 
-.item8 {
-  background-color: #0ec7dc;
-  flex: 1;
-  display: flex;
-  width: 20%;
-  flex-wrap: wrap;
-}
-
-.item7 {
-  background-color: #1974ff;
-  flex: 1;
-  display: flex;
-  width: 20%;
-  flex-wrap: wrap;
-}
-
-.item6 {
-  background-color: #cd4cdd;
-  flex: 1;
-  display: flex;
-  width: 20%;
-  flex-wrap: wrap;
-}
-
-.item5 {
-  background-color: #ff3c80;
-  flex: 1;
-  display: flex;
-  width: 20%;
-  flex-wrap: wrap;
-}
 </style>

src/components/focus/syzDetails.vue

@@ -90,209 +90,222 @@ import Xh from "../BoosterStation/xh.vue";
 
 import CurrentWarningCard from "./currentWarningCard.vue";
 export default {
-   props: {
-    activeTabStation: {
-      type: String,
-      default: "",
+    props: {
+        activeTabStation: {
+        type: String,
+        default: "",
+        },
     },
-  },
-  components: {
-    Mhs,
-    Nss,
-    Qs,
-    Sbq,
-    Xs,
-    Dwk,
-    Sbdl,
-    Pl1,
-    Pl2,
-    Mch,
-    Xh,
-    CurrentWarningCard,
-  },
-  data() {
-    return {
-      activeTab: this.$store.state.activeTab,
-      svgVisible: true,
-      audio: null,
-      timmer: null,
-      syzArray: this.$store.getters.syzArray || [],
-      pageshowMode: 0,
-    };
-  },
-  created() {},
-  mounted() {},
-  updated() {},
-  methods: {
-    // 初始化第一次报警并判断是否播放声音
-    initAlarm() {
-      let syzAlarmArray = this.$store.getters.syzAlarmArray;
-
-      const firstAlarmItem = syzAlarmArray.find((ele) => {
-        return !ele.isConfirm && ele.rank === this.$store.state.syzAlarmRank;
-      });
-
-      firstAlarmItem &&
-        this.audioPlay(this.getSound(firstAlarmItem.soundSource));
-
-      firstAlarmItem &&
-        this.$store.getters.syzAlarmArray.forEach((ele) => {
-          if (ele.stationId === firstAlarmItem.stationId) {
-            ele.isConfirm = true;
-          }
+    components: {
+        Mhs,
+        Nss,
+        Qs,
+        Sbq,
+        Xs,
+        Dwk,
+        Sbdl,
+        Pl1,
+        Pl2,
+        Mch,
+        Xh,
+        CurrentWarningCard,
+    },
+    data() {
+        return {
+        activeTab: this.$store.state.activeTab,
+        svgVisible: true,
+        audio: null,
+        timmer: null,
+        syzArray: [],
+        pageshowMode: 0,
+        };
+    },
+    created() {
+        this.changeArr()
+    },
+    mounted() {},
+    updated() {},
+    methods: {
+        // 处理数组
+        changeArr() {
+            let arr = this.$store.getters.syzArray
+            arr.forEach((item, index) =>{
+                if (item.id === 'WIND_ALL' || item.id === 'PV_ALL') {
+                    arr.splice(index, 1)
+                }
+            })
+            this.syzArray = arr
+            console.log('arr', arr)
+        },
+        // 初始化第一次报警并判断是否播放声音
+        initAlarm() {
+        let syzAlarmArray = this.$store.getters.syzAlarmArray;
+
+        const firstAlarmItem = syzAlarmArray.find((ele) => {
+            return !ele.isConfirm && ele.rank === this.$store.state.syzAlarmRank;
         });
 
-      this.activeTab = 
-        this.activeTabStation ||
-        firstAlarmItem?.stationId ||
-        syzAlarmArray.find((ele) => {
-          return ele.rank === this.$store.state.syzAlarmRank;
-        })?.stationId ||
-        this.$store.getters.syzArray[0].id;
-
-      syzAlarmArray.forEach((ele) => {
-        if (ele.stationId === firstAlarmItem?.stationId) {
-          ele.isConfirm = true;
-          this.clearWarningTag(ele.stationId);
-        } else if (
-          !ele.isConfirm &&
-          ele.stationId !== firstAlarmItem?.stationId
-        ) {
-          this.renderWarningTag(ele.stationId);
-        }
-      });
+        firstAlarmItem &&
+            this.audioPlay(this.getSound(firstAlarmItem.soundSource));
 
-      this.$store.commit("syzAlarmArray", syzAlarmArray);
-    },
+        firstAlarmItem &&
+            this.$store.getters.syzAlarmArray.forEach((ele) => {
+            if (ele.stationId === firstAlarmItem.stationId) {
+                ele.isConfirm = true;
+            }
+            });
+
+        this.activeTab = 
+            this.activeTabStation ||
+            firstAlarmItem?.stationId ||
+            syzAlarmArray.find((ele) => {
+            return ele.rank === this.$store.state.syzAlarmRank;
+            })?.stationId ||
+            this.$store.getters.syzArray[0].id;
+
+        syzAlarmArray.forEach((ele) => {
+            if (ele.stationId === firstAlarmItem?.stationId) {
+            ele.isConfirm = true;
+            this.clearWarningTag(ele.stationId);
+            } else if (
+            !ele.isConfirm &&
+            ele.stationId !== firstAlarmItem?.stationId
+            ) {
+            this.renderWarningTag(ele.stationId);
+            }
+        });
 
-    // 定时器循环数据判断小红点渲染及是否播放声音
-    renderAlarm(stationId = "", playSound = true) {
-      let syzAlarmArray = this.$store.getters.syzAlarmArray;
+        this.$store.commit("syzAlarmArray", syzAlarmArray);
+        },
 
-      syzAlarmArray.forEach((ele) => {
-        if (ele.stationId === stationId) {
-          ele.isConfirm = true;
-          this.clearWarningTag(ele.stationId);
-        } else if (!ele.isConfirm && ele.stationId !== stationId) {
-          this.renderWarningTag(ele.stationId);
-        }
-      });
+        // 定时器循环数据判断小红点渲染及是否播放声音
+        renderAlarm(stationId = "", playSound = true) {
+        let syzAlarmArray = this.$store.getters.syzAlarmArray;
 
-      const res = syzAlarmArray.find((ele) => {
-        return !ele.isConfirm;
-      });
+        syzAlarmArray.forEach((ele) => {
+            if (ele.stationId === stationId) {
+            ele.isConfirm = true;
+            this.clearWarningTag(ele.stationId);
+            } else if (!ele.isConfirm && ele.stationId !== stationId) {
+            this.renderWarningTag(ele.stationId);
+            }
+        });
 
-      if (playSound) {
-        // this.audioPlay("./static/sound/syz.mp3");
-      }
+        const res = syzAlarmArray.find((ele) => {
+            return !ele.isConfirm;
+        });
 
-      this.$store.commit("syzAlarmArray", syzAlarmArray);
-    },
+        if (playSound) {
+            // this.audioPlay("./static/sound/syz.mp3");
+        }
 
-    // 返回音频文件路径
-    getSound(fileName) {
-      return `./static/sound/${fileName}.mp3`;
-    },
+        this.$store.commit("syzAlarmArray", syzAlarmArray);
+        },
 
-    // 播放音频
-    audioPlay(audioPath) {
-      let soundMuteSelf = [];
-      let soundMuteOther = [];
+        // 返回音频文件路径
+        getSound(fileName) {
+        return `./static/sound/${fileName}.mp3`;
+        },
 
-      this.$store.getters.syzAlarmArray.forEach((ele) => {
-        if (ele.stationId === this.activeTab) {
-          soundMuteSelf.push(ele);
-        } else {
-          soundMuteOther.push(ele);
-        }
-      });
+        // 播放音频
+        audioPlay(audioPath) {
+        let soundMuteSelf = [];
+        let soundMuteOther = [];
+
+        this.$store.getters.syzAlarmArray.forEach((ele) => {
+            if (ele.stationId === this.activeTab) {
+            soundMuteSelf.push(ele);
+            } else {
+            soundMuteOther.push(ele);
+            }
+        });
 
-      let alarmSelfLock = soundMuteSelf.some((ele) => {
-        return !ele.isConfirm;
-      });
+        let alarmSelfLock = soundMuteSelf.some((ele) => {
+            return !ele.isConfirm;
+        });
 
-      let alarmOtherLock = soundMuteOther.some((ele) => {
-        return !ele.isConfirm;
-      });
+        let alarmOtherLock = soundMuteOther.some((ele) => {
+            return !ele.isConfirm;
+        });
 
-      if (alarmOtherLock) {
-        this.audio = new Audio(audioPath);
-        this.audio.play();
-      } else if (alarmSelfLock) {
-        this.$store.getters.syzArray.forEach((ele) => {
-          if (ele.stationId === this.activeTab) {
-            ele.isMute = false;
+        if (alarmOtherLock) {
             this.audio = new Audio(audioPath);
             this.audio.play();
-          }
-        });
-      } else if (!alarmSelfLock) {
-        this.$store.getters.syzArray.forEach((ele) => {
-          if (ele.stationId === this.activeTab) {
-            if (!ele.isMute) {
-              this.audio = new Audio(audioPath);
-              this.audio.play();
+        } else if (alarmSelfLock) {
+            this.$store.getters.syzArray.forEach((ele) => {
+            if (ele.stationId === this.activeTab) {
+                ele.isMute = false;
+                this.audio = new Audio(audioPath);
+                this.audio.play();
             }
-          }
-        });
-      }
-    },
-
-    // 显示某个小红点
-    renderWarningTag(stationId = "") {
-      this.$store.getters.syzArray.forEach((ele) => {
-        if (ele.id === stationId) {
-          ele.isWarning = "1";
+            });
+        } else if (!alarmSelfLock) {
+            this.$store.getters.syzArray.forEach((ele) => {
+            if (ele.stationId === this.activeTab) {
+                if (!ele.isMute) {
+                this.audio = new Audio(audioPath);
+                this.audio.play();
+                }
+            }
+            });
         }
-      });
-      this.pageshowMode++;
-    },
+        },
 
-    // 清除某个小红点
-    clearWarningTag(stationId = "") {
-      this.$store.getters.syzArray.forEach((ele) => {
-        if (ele.id === stationId) {
-          ele.isWarning = "0";
-        }
-      });
-      this.pageshowMode++;
-    },
-
-    // 切换报警声音开关
-    switchAlarmSound(index) {
-      this.$store.getters.syzArray[index].isMute =
-        !this.$store.getters.syzArray[index].isMute;
-    },
-
-    opened() {
-      this.initAlarm();
-      this.timmer = setInterval(() => {
-        this.renderAlarm();
-      }, 3000);
-    },
-
-    closed() {
-      this.$refs.svgRef[0].closed()
-      this.$refs.svgRef[1].closed()
-      this.$refs.svgRef[2].closed()
-      this.$refs.svgRef[3].closed()
-      this.$refs.svgRef[4].closed()
-      clearInterval(this.timmer);
-      this.timmer = null;
-      this.$store.commit("activeTab", "");
-      this.$store.commit("syzDialogShow", false);
-    },
+        // 显示某个小红点
+        renderWarningTag(stationId = "") {
+        this.$store.getters.syzArray.forEach((ele) => {
+            if (ele.id === stationId) {
+            ele.isWarning = "1";
+            }
+        });
+        this.pageshowMode++;
+        },
 
-    tabClick(res) {
-      this.$store.commit("activeTab", res.props.name);
-      this.renderAlarm(res.props.name, false);
+        // 清除某个小红点
+        clearWarningTag(stationId = "") {
+        this.$store.getters.syzArray.forEach((ele) => {
+            if (ele.id === stationId) {
+            ele.isWarning = "0";
+            }
+        });
+        this.pageshowMode++;
+        },
+
+        // 切换报警声音开关
+        switchAlarmSound(index) {
+        this.$store.getters.syzArray[index].isMute =
+            !this.$store.getters.syzArray[index].isMute;
+        },
+
+        opened() {
+        this.initAlarm();
+        this.timmer = setInterval(() => {
+            this.renderAlarm();
+        }, 3000);
+        },
+
+        closed() {
+        this.$refs.svgRef[0].closed()
+        this.$refs.svgRef[1].closed()
+        this.$refs.svgRef[2].closed()
+        this.$refs.svgRef[3].closed()
+        this.$refs.svgRef[4].closed()
+        clearInterval(this.timmer);
+        this.timmer = null;
+        this.$store.commit("activeTab", "");
+        this.$store.commit("syzDialogShow", false);
+        },
+
+        tabClick(res) {
+        this.$store.commit("activeTab", res.props.name);
+        this.renderAlarm(res.props.name, false);
+        },
     },
-  },
-  watch: {
-    "$store.state.syzArray"(res) {
-      this.syzArray = res;
+    watch: {
+        "$store.state.syzArray"(res) {
+        this.syzArray = res;
+        },
     },
-  },
 };
 </script>
 

src/components/unpaidMatrixBlock.vue

@@ -102,7 +102,9 @@ export default {
   mounted() {
     // this.getWindturbineFdc();
   },
-  updated() {},
+  created() {
+    console.log('dataList1', this.dataList)
+  },
   methods: {
     onSelectHandler(values) {
       this.$emit("choose-click", values);

src/components/unpaidMatrixBlockPv.vue

@@ -0,0 +1,625 @@
+<template>
+  <div>
+    <div class="box">
+      <div
+        :class="item.active ? 'box-' + item.status : 'unbox-' + item.status"
+        :id="item.id"
+        v-for="(item, index) in dataList"
+        :key="index"
+        @click="onSelectHandler(item)"
+        @dblclick="sendMsg(item)"
+      >
+        <div class="info">
+          <div
+            :class="
+              item.active ? 'left-' + item.status : 'unleft-' + item.status
+            "
+          >
+            <div>{{ getName(item, 'top') }}</div>
+            <div>{{ getName(item, 'bot') }}</div><!-- item.id.slice(5) -->
+
+            <!-- <div>{{ item.windturbineId.slice(0, 2) }}</div>
+            <div>{{ item.code }}</div> -->
+          </div>
+          <div
+            :class="
+              item.active ? 'right-' + item.status : 'unright-' + item.status
+            "
+          >
+            <div class="rightrow">{{ item.i.toFixed(2) }} A</div>
+
+            <div class="rightrow">{{ item.u.toFixed(2) }} V</div>
+
+            <div class="rightrow">{{ item.p.toFixed(2) }} kw</div>
+
+            
+          </div>
+          <div class="locks" v-if="item.lockValue > 0">
+            <el-popover
+              placement="bottom-start"
+              :width="150"
+              trigger="hover"
+              class="popoverBack"
+              :show-arrow="false"
+            >
+              <template #reference>
+                <img class="lock" src="../assets/img/type/lock.png" alt="" />
+              </template>
+              <input
+                class="lock_input"
+                type="text"
+                placeholder=""
+                :value="
+                  item.lockValue === 9
+                    ? item.lockValues
+                    : options[item.lockValue]
+                "
+                disabled
+              />
+            </el-popover>
+          </div>
+        </div>
+        <div :class="'unpaid-' + item.status">
+          <div
+            v-if="item.status === 1"
+            class="progress"
+            :style="`width: ${((item.power / item.powerProduction) * 100 >= 100
+              ? 100
+              : (item.power / item.powerProduction) * 100
+            ).toFixed(2)}%;background-color: ${
+              unpaidColor[item.undeliveredStatus]
+            };height: 50%;`"
+          ></div>
+        </div>
+      </div>
+    </div>
+    <WindturbineDetailPages
+      v-model="dialogVisible"
+      :showSvg="showSvg"
+      @close="handleClose"
+      :windturbine="currentWindturbine"
+    ></WindturbineDetailPages>
+  </div>
+</template>
+<script>
+import WindturbineDetailPages from "./WindturbineDetailPages.vue";
+export default {
+  components: {
+    WindturbineDetailPages,
+  },
+  props: {
+    dataList: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  mounted() {
+    // this.getWindturbineFdc();
+  },
+  created() {
+    console.log('dataList', this.dataList)
+  },
+  methods: {
+    getName(item, type) {
+        let name = ''
+        if (item.id) {
+            if (type === 'top') {
+                name = item.id.slice(0, item.id.indexOf('_'))
+            } else {
+                name = item.id.slice(item.id.indexOf('_'))
+            }
+        }
+        return name
+    },
+    onSelectHandler(values) {
+      this.$emit("choose-click", values);
+    },
+    sendMsg: function (itm) {
+      // this.dialogVisible = true;
+      this.$emit("on-click", itm);
+      // this.currentWindturbine = itm;
+    },
+    handleClose() {
+      this.dialogVisible = false;
+      this.showSvg = false;
+    },
+  },
+  data() {
+    return {
+      dialogVisible: false,
+      showSvg: false,
+      currentWindturbine: {},
+      showVlaues: "",
+      // station: [],
+      options: {
+        8: "检修",
+        7: "故障维修",
+        2: "场内受累检修",
+        3: "场内受累故障",
+        4: "场外受累电网",
+        5: "场外受累天气",
+      },
+      unpaidColor: {
+        0: "#57cf3a",
+        1: "#0ec7dc",
+        2: "#1974ff",
+        3: "#cd4cdd",
+        3: "#ff3c80",
+      },
+    };
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.info {
+  display: flex;
+  flex-direction: row;
+  height: 50px;
+  width: 100%;
+  justify-content: space-between;
+}
+.box-0 {
+  width: 135px;
+  height: 60px;
+  color: #ffffff;
+  border: 1px solid rgba(05, 187, 76, 1);
+  background-color: rgba(05, 187, 76, 0.05);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-right: 10px;
+  margin-top: 10px;
+  box-shadow: 0px 0px 6px #09e45e;
+}
+
+.unbox-0 {
+  width: 135px;
+  height: 60px;
+  color: #ffffff;
+  border: 1px solid rgba(05, 187, 76, 1);
+  background-color: rgba(05, 187, 76, 0.2);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-right: 10px;
+  margin-top: 10px;
+}
+.unpaid-0 {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 10px;
+  border-top: 1px solid rgba(05, 187, 76, 1);
+}
+.left-0 {
+  width: 35%;
+  height: 100%;
+  font-size: 12px;
+  color: rgba(05, 187, 76, 1);
+  font-weight: 600;
+  line-height: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.unleft-0 {
+  width: 37%;
+  height: 100%;
+  font-size: 12px;
+  color: rgba(05, 187, 76, 1);
+  font-weight: 600;
+  line-height: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.right-0 {
+  width: 69%;
+  height: 100%;
+  font-size: 12px;
+  color: rgba(05, 187, 76, 1);
+  line-height: 15px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.unright-0 {
+  width: 69%;
+  height: 100%;
+  font-size: 12px;
+  color: rgba(05, 187, 76, 1);
+  line-height: 15px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.box-1 {
+  width: 135px;
+  height: 60px;
+  color: #ffffff;
+  border: 1px solid rgba(75, 85, 174, 1);
+  background-color: rgba(75, 85, 174, 0.05);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-right: 10px;
+  margin-top: 10px;
+  box-shadow: 0px 0px 6px #6876f2;
+}
+
+.unbox-1 {
+  width: 135px;
+  height: 60px;
+  color: #ffffff;
+  border: 1px solid rgba(75, 85, 174, 1);
+  background-color: rgba(75, 85, 174, 0.2);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-right: 10px;
+  margin-top: 10px;
+}
+.unpaid-1 {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 10px;
+  border-top: 1px solid rgba(75, 85, 174, 1);
+}
+.left-1 {
+  width: 35%;
+  height: 100%;
+  font-size: 12px;
+  color: rgba(75, 85, 174, 1);
+  font-weight: 600;
+  line-height: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.unleft-1 {
+  width: 37%;
+  height: 100%;
+  font-size: 12px;
+  color: rgba(75, 85, 174, 1);
+  font-weight: 600;
+  line-height: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.right-1 {
+  width: 69%;
+  height: 100%;
+  font-size: 12px;
+  color: rgba(75, 85, 174, 1);
+  line-height: 15px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.unright-1 {
+  width: 65%;
+  height: 100%;
+  font-size: 12px;
+  color: rgba(75, 85, 174, 1);
+  line-height: 15px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.box-2, .box-4, .box-5 {
+  width: 135px;
+  height: 60px;
+  color: #ffffff;
+  border: 1px solid rgba(186, 50, 55, 1);
+  background-color: rgba(186, 50, 55, 0.05);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-right: 10px;
+  margin-top: 10px;
+  box-shadow: 0px 0px 6px #ff1313;
+}
+
+.unbox-2, .unbox-4, .unbox-5 {
+  width: 135px;
+  height: 60px;
+  color: #ffffff;
+  border: 1px solid rgba(186, 50, 55, 1);
+  background-color: rgba(186, 50, 55, 0.2);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-right: 10px;
+  margin-top: 10px;
+}
+
+.unpaid-2, .unpaid-4, .unpaid-5 {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 10px;
+  border-top: 1px solid rgba(186, 50, 55, 1);
+}
+
+.left-2, .left-4, .left-5 {
+  width: 35%;
+  height: 100%;
+  font-size: 12px;
+  color: rgba(186, 50, 55, 1);
+  font-weight: 600;
+  line-height: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.unleft-2, .unleft-4, .unleft-5 {
+  width: 37%;
+  height: 100%;
+  font-size: 12px;
+  color: rgba(186, 50, 55, 1);
+  font-weight: 600;
+  line-height: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.right-2, .right-4, .right-5 {
+  width: 69%;
+  height: 100%;
+  font-size: 12px;
+  color: rgba(186, 50, 55, 1);
+  line-height: 15px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.unright-2, .unright-4, .unright-5 {
+  width: 69%;
+  height: 100%;
+  font-size: 12px;
+  color: rgba(186, 50, 55, 1);
+  line-height: 15px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.box-3 {
+  width: 135px;
+  height: 60px;
+  color: #ffffff;
+  border: 1px solid rgba(225, 125, 36, 1);
+  background-color: rgba(225, 125, 36, 0.05);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-right: 10px;
+  margin-top: 10px;
+  box-shadow: 0px 0px 6px #f28627;
+}
+
+.unbox-3 {
+  width: 135px;
+  height: 60px;
+  color: #ffffff;
+  border: 1px solid rgba(225, 125, 36, 1);
+  background-color: rgba(225, 125, 36, 0.2);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-right: 10px;
+  margin-top: 10px;
+}
+
+.unpaid-3 {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 10px;
+  border-top: 1px solid rgba(225, 125, 36, 1);
+}
+
+.left-3 {
+  width: 35%;
+  height: 100%;
+  font-size: 12px;
+  color: rgba(225, 125, 36, 1);
+  font-weight: 600;
+  line-height: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.unleft-3 {
+  width: 37%;
+  height: 100%;
+  font-size: 12px;
+  color: rgba(225, 125, 36, 1);
+  font-weight: 600;
+  line-height: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.right-3 {
+  width: 69%;
+  height: 100%;
+  font-size: 12px;
+  color: rgba(225, 125, 36, 1);
+  line-height: 15px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.unright-3 {
+  width: 69%;
+  height: 100%;
+  font-size: 12px;
+  color: rgba(225, 125, 36, 1);
+  line-height: 15px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.box-4 {
+  width: 135px;
+  height: 60px;
+  color: #ffffff;
+  border: 1px solid rgba(75, 85, 174, 1);
+  background-color: rgba(75, 85, 174, 0.05);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-right: 10px;
+  margin-top: 10px;
+  box-shadow: 0px 0px 6px #6876f2;
+}
+
+.box-5, .box-6 {
+  width: 135px;
+  height: 60px;
+  color: #ffffff;
+  border: 1px solid rgba(186, 50, 55, 1);
+  background-color: rgba(186, 50, 55, 0.05);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-right: 10px;
+  margin-top: 10px;
+  box-shadow: 0px 0px 6px #ff1313;
+}
+
+.unbox-5, .unbox-6 {
+  width: 135px;
+  height: 60px;
+  color: #ffffff;
+  border: 1px solid rgba(186, 50, 55, 1);
+  background-color: rgba(186, 50, 55, 0.2);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-right: 10px;
+  margin-top: 10px;
+}
+
+
+.unpaid-5, .unpaid-6 {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 10px;
+  border-top: 1px solid rgba(186, 50, 55, 1);
+}
+
+.left-5, .left-6 {
+  width: 35%;
+  height: 100%;
+  font-size: 12px;
+  color: rgba(186, 50, 55, 1);
+  font-weight: 600;
+  line-height: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.unleft-5, .unleft-6 {
+  width: 37%;
+  height: 100%;
+  font-size: 12px;
+  color: rgba(186, 50, 55, 1);
+  font-weight: 600;
+  line-height: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.right-5, .right-6 {
+  width: 69%;
+  height: 100%;
+  font-size: 12px;
+  color: rgba(186, 50, 55, 1);
+  line-height: 15px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.unright-5, .unright-6 {
+  width: 69%;
+  height: 100%;
+  font-size: 12px;
+  color: rgba(186, 50, 55, 1);
+  line-height: 15px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.lock {
+  width: 10px;
+  height: 10px;
+  position: relative;
+  right: 4px;
+}
+
+.lock-on {
+  width: 0px;
+  height: 0px;
+  opacity: 0;
+}
+
+.locks:hover .lock-on {
+  position: fixed;
+  display: flex;
+  align-items: center;
+  width: 80px;
+  height: 30px;
+  border: 1px solid #999999;
+  background-color: #999999;
+  opacity: 1;
+  color: #ffffff;
+  z-index: 999;
+}
+
+.lock_input {
+  width: 140px;
+  background-color: #292929;
+  height: 40px;
+  color: #ffffff;
+}
+</style>

src/utils/MessageBridge.js

@@ -5,7 +5,7 @@ import store from '../store/index'
 export default class MessageBridge {
   observers;// 观察者
   calcSocket;// 后台websocket
-  // adapterSocket;// 适配器websocket
+  adapterSocket;// 适配器websocket
   flag;
   windFlag;
   flagArr;
@@ -21,7 +21,7 @@ export default class MessageBridge {
     // this.reconnect()
     this.calcSocket = new WebSocket(`ws://${process.env.VUE_APP_APIS}/wisdom_service`, this.onmessage, ["/topic/voice-control","/topic/attention","/topic/temperature-count"]);
       // "/topic/title-info","/topic/suggestion","/topic/fault-popup",
-    // this.adapterSocket = new WebSocket(`ws://${process.env.VUE_APP_ADAPTERURLS}/wisdom`, this.onmessage, ["/topic/windturbine", "/topic/pv"]);
+    this.adapterSocket = new WebSocket(`ws://${process.env.VUE_APP_ADAPTERURLS}/wisdom`, this.onmessage, ["/topic/windturbine", "/topic/pv"]);
   }
 
   /* 单例 */