问题修改

src/components/windDetail/index.vue

@@ -245,10 +245,9 @@
         </div>
       </div>
       <div class="part-info">
+          <!-- v-if="partDInfos.length > 0"  style="max-height: 25vh"-->
         <div
           class="part-body"
-          style="max-height: 25vh"
-          v-if="partDInfos.length > 0"
         >
           <div class="monitoring-item">
             <div class="point point-left bottom"></div>
@@ -265,14 +264,13 @@
               <div class="table-item" v-for="(item, ind) in val" :key="ind">
                 <div>{{ item.name }}</div>
                 <div
-                  class="table-value"
-                  :class="item.value == 1 ? 'round-red' : 'round'"
-                ></div>
+                  class="table-value-di"
+                ><span :class="item.value == 1 ? 'round-red' : 'round'">{{item.value == 1 ? '触发' : '未触发'}}</span></div>
               </div>
             </div>
           </div>
         </div>
-        <div
+        <!-- <div
           class="part-body"
           style="max-height: 25vh"
           v-if="partAInfos.length > 0"
@@ -307,6 +305,43 @@
               </div>
             </div>
           </div>
+        </div> -->
+      </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>
+            </div>
         </div>
       </div>
     </div>
@@ -435,6 +470,16 @@ export default {
             value: 14.5,
             valueUnit: "%",
           },
+          {
+            name: "AI值6",
+            value: 54.5,
+            valueUnit: "%",
+          },
+          {
+            name: "AI值7",
+            value: 14.5,
+            valueUnit: "%",
+          },
         ],
       ],
       partDInfos: [
@@ -459,6 +504,14 @@ export default {
             name: "DI值5",
             value: 14.5,
           },
+          {
+            name: "DI值6",
+            value: 54.5,
+          },
+          {
+            name: "DI值7",
+            value: 14.5,
+          }
         ],
       ],
       uniformcodesA: [],
@@ -1266,8 +1319,8 @@ export default {
 
   .parts {
     // width: calc(100% - 600px - 20px);
-    // width: calc(70vw - 20px);
-    width: calc(99vw - 20px);
+    width: calc(68vw - 20px);
+    // width: calc(99vw - 20px);
     margin-right: 20px;
     height: 100%;
     display: flex;
@@ -1278,6 +1331,7 @@ export default {
     .part-top {
       flex: 1;
       width: 100%;
+      height: 70vh;
     }
     .part-title {
       width: 100%;
@@ -1327,10 +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;
       }
@@ -1355,7 +1410,8 @@ export default {
         .part {
           width: 100%;
           display: flex;
-          flex-direction: row;
+        //   flex-direction: row;
+          flex-wrap: wrap;
           margin-top: 5px;
           font-size: 13px;
           font-family: Source Han Sans SC;
@@ -1364,7 +1420,7 @@ export default {
           padding: 0 10px;
 
           .table-item {
-            width: 25%;
+            width: 20%;
             font-size: 12px;
 
             .table-value {
@@ -1407,6 +1463,96 @@ export default {
     }
   }
 
+  .problemsAI{
+    width: 32vw;
+    // background: rgba(96, 103, 105, 0.2);
+    border-radius: 5px;
+    padding: 10px;
+    .part-info-ai {
+      width: 100%;
+      height: 100%;
+      bottom: 0px;
+      display: flex;
+      flex-direction: column-reverse;
+      [v-cloak] {
+        display: none;
+      }
+      .part-body-ai {
+        width: 100%;
+        height: 100%;
+        padding-bottom: 20px;
+        // background: rgba(11, 12, 12, 0.45);
+        background: rgba(96, 103, 105, 0.2);
+        border-radius: 5px;
+        margin-top: 10px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding: 10px 0;
+
+        .part-item-ai {
+          width: 100%;
+        //   height: calc(100% - 42px);
+          height: 100%;
+          overflow-y: scroll;
+        }
+
+        .part-ai {
+          width: 100%;
+          display: flex;
+        //   flex-direction: row;
+          flex-wrap: wrap;
+          margin-top: 5px;
+          font-size: 13px;
+          font-family: Source Han Sans SC;
+          font-weight: 400;
+          color: #959595;
+          padding: 0 10px;
+
+          .table-item-ai {
+            width: 50%;
+            font-size: 12px;
+
+            .table-value-ai {
+              display: flex;
+              flex-direction: row;
+              align-items: baseline;
+
+              .unit-ai {
+                font-size: 12px;
+                font-family: Source Han Sans SC;
+                font-weight: 400;
+                color: #817c7c;
+                margin-left: 5px;
+                width: 40px;
+              }
+
+              &.round {
+                width: 8px;
+                height: 8px;
+                border-radius: 50%;
+                background-color: rgba(0, 70, 199, 0.48);
+                margin-right: 90px;
+              }
+
+              &.round-red {
+                width: 8px;
+                height: 8px;
+                border-radius: 50%;
+                background-color: red;
+                margin-right: 90px;
+              }
+            }
+          }
+
+          &.active {
+            background-color: rgba(83, 89, 104, 0.15);
+          }
+        }
+      }
+    }
+  }
+
   .problems {
     width: 30vw;
     background: rgba(96, 103, 105, 0.2);
@@ -1660,7 +1806,7 @@ export default {
   }
 }
 
-.table-item {
+.table-item, .table-item-ai {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -1673,11 +1819,30 @@ export default {
   color: #b3b3b3;
   padding: 0 0px;
 
-  .table-value {
+  .table-value, .table-value-ai {
     font-family: Arial;
     font-weight: 400;
     color: rgb(15, 120, 240);
     margin-right: 25px;
   }
+  .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-red {
+        width: 30px;
+        height: 18px;
+        color: red;
+        margin-right: 90px;
+        }
+  }
 }
 </style>

src/views/IntegratedAlarm/DetailMatrix/index.vue

@@ -1142,11 +1142,11 @@ export default {
   },
 
   mounted() {
-    this.changeData(true, dataJson.data);
-    // this.requestData(true);
-    // this.timmer = setInterval(() => {
-    //     this.requestData(true);
-    // }, 5000);
+    // this.changeData(true, dataJson.data);
+    this.requestData(true);
+    this.timmer = setInterval(() => {
+        this.requestData(true);
+    }, 5000);
   },
   unmounted() {
     clearInterval(this.timmer);