问题修改

src/components/alarm-badge/index.vue

@@ -136,6 +136,7 @@ export default {
       displaySetting: false,
       seriousWarning: false,
       audioElement: null,
+      timer: null
     };
   },
   computed: {
@@ -154,65 +155,75 @@ export default {
     },
   },
   created() {
-    this.getAlarmConfig();
-    this.x = 80;
-    this.y = 80;
-    let requestResult = [];
-    this.requestAlarmHistoryParams.forEach(({ alarmType, deviceType }) => {
-      requestResult.push(this.getAlarmHistory(alarmType, deviceType));
-    });
-
-    Promise.all(requestResult)
-      .then((promiseResult) => {
-        promiseResult.forEach(({ data }) => {
-          data?.ls?.forEach((ele) => {
-            this.pushALarmItem(ele);
-          });
-        });
-        this.dialogList.sort((a, b) => {
-          return b.ts - a.ts;
-        });
-        this.realList.sort((a, b) => {
-          return b.ts - a.ts;
-        });
-        this.$store.commit("changeAlarmlist", this.alarmList);
-        this.$store.commit("setWarning", this.dialogList);
-        this.$store.commit("setWarningList", this.realList);
-        if (!this.socketLeaveFlag1) {
-          // 没有离开——重连
-          // websocket重连
-          this.socketReconnect1();
-        }
-      })
-      .catch(() => {
-        requestResult.forEach((ele, index) => {
-          ele
-            .then(({ data }) => {
-              data?.ls?.forEach((ele) => {
-                this.pushALarmItem(ele);
-              });
-            })
-            .catch((error) => {
-              ElNotification({
-                type: "error",
-                title: "查询历史未处理报警请求出错！",
-                dangerouslyUseHTMLString: true,
-                message: `<div class="currentRequestErrorNotification">
-                                <p><span>主要参数：</p>
-                                <p style="color:var(--el-color-primary)"><span class="errorTitle">alarmType:</span><span class="errorDesc">"${this.requestAlarmHistoryParams[index].alarmType}"</span></p>
-                                <p style="color:var(--el-color-primary)"><span class="errorTitle">deviceType:</span><span class="errorDesc">"${this.requestAlarmHistoryParams[index].deviceType}"</span></p>
-                                <p style="color:var(--el-color-danger)"><span class="errorTitle">错误正文:</span><span class="errorDesc">${error}</span></p>
-                             </div>`,
-              });
-            });
-        });
-      });
+    
+  },
+  mounted() {
+    this.wsinit();
+    // this.timer = setInterval(() => {
+    //   this.wsinit();
+    // }, 2000);
   },
-  mounted() {},
   unmounted() {
     console.log("离开标记", this.socketLeaveFlag);
+    // clearInterval(this.timer);
+    // this.timer = null;
   },
   methods: {
+    wsinit() {
+        this.getAlarmConfig();
+        this.x = 80;
+        this.y = 80;
+        let requestResult = [];
+        this.requestAlarmHistoryParams.forEach(({ alarmType, deviceType }) => {
+        requestResult.push(this.getAlarmHistory(alarmType, deviceType));
+        });
+
+        Promise.all(requestResult)
+        .then((promiseResult) => {
+            promiseResult.forEach(({ data }) => {
+            data?.ls?.forEach((ele) => {
+                this.pushALarmItem(ele);
+            });
+            });
+            this.dialogList.sort((a, b) => {
+            return b.ts - a.ts;
+            });
+            this.realList.sort((a, b) => {
+            return b.ts - a.ts;
+            });
+            this.$store.commit("changeAlarmlist", this.alarmList);
+            this.$store.commit("setWarning", this.dialogList);
+            this.$store.commit("setWarningList", this.realList);
+            if (!this.socketLeaveFlag1) {
+            // 没有离开——重连
+            // websocket重连
+            this.socketReconnect1();
+            }
+        })
+        .catch(() => {
+            requestResult.forEach((ele, index) => {
+            ele
+                .then(({ data }) => {
+                data?.ls?.forEach((ele) => {
+                    this.pushALarmItem(ele);
+                });
+                })
+                .catch((error) => {
+                ElNotification({
+                    type: "error",
+                    title: "查询历史未处理报警请求出错！",
+                    dangerouslyUseHTMLString: true,
+                    message: `<div class="currentRequestErrorNotification">
+                                    <p><span>主要参数：</p>
+                                    <p style="color:var(--el-color-primary)"><span class="errorTitle">alarmType:</span><span class="errorDesc">"${this.requestAlarmHistoryParams[index].alarmType}"</span></p>
+                                    <p style="color:var(--el-color-primary)"><span class="errorTitle">deviceType:</span><span class="errorDesc">"${this.requestAlarmHistoryParams[index].deviceType}"</span></p>
+                                    <p style="color:var(--el-color-danger)"><span class="errorTitle">错误正文:</span><span class="errorDesc">${error}</span></p>
+                                </div>`,
+                });
+                });
+            });
+        });
+    },
     setting() {
       this.displaySetting = true;
     },

src/components/deligoAlarmList/index.vue

@@ -153,10 +153,16 @@ export default {
   mounted() {},
   computed: {
     warnNum() {
-      return this.$store.state.warnList.length;
+    //   return this.$store.state.warnList.length;
+    return this.$store.state.warnList.filter((it) => {
+        return !it.endts > 0;
+      }).length;
     },
     list() {
       return this.$store.state.warnList;
+    // return this.$store.state.warnList.filter((it) => {
+    //     return !it.endts > 0;
+    //   });
     },
   },
 

src/components/windDetail/index.vue

@@ -245,10 +245,8 @@
         </div>
       </div>
       <div class="part-info">
-          <!-- v-if="partDInfos.length > 0"  style="max-height: 25vh"-->
-        <div
-          class="part-body"
-        >
+        <!-- v-if="partDInfos.length > 0"  style="max-height: 25vh"-->
+        <div class="part-body">
           <div class="monitoring-item">
             <div class="point point-left bottom"></div>
             <div class="point point-right bottom"></div>
@@ -263,9 +261,11 @@
             >
               <div class="table-item" v-for="(item, ind) in val" :key="ind">
                 <div>{{ item.name }}</div>
-                <div
-                  class="table-value-di"
-                ><span :class="item.value == 1 ? 'round-red' : 'round'">{{item.value == 1 ? '触发' : '未触发'}}</span></div>
+                <div class="table-value-di">
+                  <span :class="item.value == 1 ? 'round-red' : 'round'">{{
+                    item.value == 1 ? "触发" : "未触发"
+                  }}</span>
+                </div>
               </div>
             </div>
           </div>
@@ -309,39 +309,39 @@
       </div>
     </div>
     <div class="problemsAI" style="color: #fff">
-        <div class="part-info-ai">
-          <!-- v-if="partAInfos.length > 0" -->
-            <div class="part-body-ai" >
-            <div class="monitoring-item">
-                <div class="point point-left bottom"></div>
-                <div class="point point-right bottom"></div>
-                遥测值
-            </div>
-            <div class="part-item-ai">
-                <div
-                class="part-ai"
-                :class="{ active: index % 2 === 1 }"
-                v-for="(val, index) in partAInfos"
-                :key="index"
-                >
-                <div class="table-item-ai" v-for="(item, ind) in val" :key="ind">
-                    <div>{{ item.name }}</div>
-                    <div class="table-value-ai">
-                    {{
-                        item.name.includes("状态")
-                        ? item.value
-                        : item.name == "总发电量"
-                        ? (item.value / 10000).toFixed(2)
-                        : Number(item.value).toFixed(2)
-                    }}
-                    <div v-if="item.valueUnit != 'NULL'" class="unit-ai">
-                        {{ item.valueUnit }}
-                    </div>
-                    <div v-else class="unit-ai"></div>
-                    </div>
-                </div>
+      <div class="part-info-ai">
+        <!-- v-if="partAInfos.length > 0" -->
+        <div class="part-body-ai">
+          <div class="monitoring-item">
+            <div class="point point-left bottom"></div>
+            <div class="point point-right bottom"></div>
+            遥测值
+          </div>
+          <div class="part-item-ai">
+            <div
+              class="part-ai"
+              :class="{ active: index % 2 === 1 }"
+              v-for="(val, index) in partAInfos"
+              :key="index"
+            >
+              <div class="table-item-ai" v-for="(item, ind) in val" :key="ind">
+                <div>{{ item.name }}</div>
+                <div class="table-value-ai">
+                  {{
+                    item.name.includes("状态")
+                      ? item.value
+                      : item.name == "总发电量"
+                      ? (item.value / 10000).toFixed(2)
+                      : Number(item.value).toFixed(2)
+                  }}
+                  <div v-if="item.valueUnit != 'NULL'" class="unit-ai">
+                    {{ item.valueUnit }}
+                  </div>
+                  <div v-else class="unit-ai"></div>
                 </div>
+              </div>
             </div>
+          </div>
         </div>
       </div>
     </div>
@@ -511,7 +511,7 @@ export default {
           {
             name: "DI值7",
             value: 14.5,
-          }
+          },
         ],
       ],
       uniformcodesA: [],
@@ -1381,11 +1381,11 @@ export default {
 
     .part-info {
       width: 100%;
-    //   max-height: 50vh;
+      //   max-height: 50vh;
       height: 30vh;
       bottom: 0px;
       display: flex;
-    //   flex-direction: column-reverse;
+      //   flex-direction: column-reverse;
       [v-cloak] {
         display: none;
       }
@@ -1410,7 +1410,7 @@ export default {
         .part {
           width: 100%;
           display: flex;
-        //   flex-direction: row;
+          //   flex-direction: row;
           flex-wrap: wrap;
           margin-top: 5px;
           font-size: 13px;
@@ -1420,7 +1420,7 @@ export default {
           padding: 0 10px;
 
           .table-item {
-            width: 20%;
+            width: 25%;
             font-size: 12px;
 
             .table-value {
@@ -1463,7 +1463,7 @@ export default {
     }
   }
 
-  .problemsAI{
+  .problemsAI {
     width: 32vw;
     // background: rgba(96, 103, 105, 0.2);
     border-radius: 5px;
@@ -1492,7 +1492,7 @@ export default {
 
         .part-item-ai {
           width: 100%;
-        //   height: calc(100% - 42px);
+          //   height: calc(100% - 42px);
           height: 100%;
           overflow-y: scroll;
         }
@@ -1500,7 +1500,7 @@ export default {
         .part-ai {
           width: 100%;
           display: flex;
-        //   flex-direction: row;
+          //   flex-direction: row;
           flex-wrap: wrap;
           margin-top: 5px;
           font-size: 13px;
@@ -1806,7 +1806,8 @@ export default {
   }
 }
 
-.table-item, .table-item-ai {
+.table-item,
+.table-item-ai {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -1819,30 +1820,32 @@ export default {
   color: #b3b3b3;
   padding: 0 0px;
 
-  .table-value, .table-value-ai {
+  .table-value,
+  .table-value-ai {
     font-family: Arial;
     font-weight: 400;
     color: rgb(15, 120, 240);
     margin-right: 25px;
   }
-  .table-value-di{
+  .table-value-di {
     font-family: Arial;
     font-weight: 400;
     color: rgb(15, 120, 240);
     margin-right: 25px;
-    &.round {
-        width: 30px;
-        height: 18px;
-        color: rgba(0, 70, 199, 0.48);
-        margin-right: 90px;
-        }
+    .round {
+      width: 30px;
+      height: 18px;
+    //   color: rgba(0, 70, 199, 0.88);
+    color: rgb(15, 120, 240);
+      margin-right: 90px;
+    }
 
-        &.round-red {
-        width: 30px;
-        height: 18px;
-        color: red;
-        margin-right: 90px;
-        }
+    .round-red {
+      width: 30px;
+      height: 18px;
+      color: red;
+      margin-right: 90px;
+    }
   }
 }
 </style>