修改冀北现场问题

src/views/pqs/qualityInspeection/panorama/components/mapL.vue

@@ -61,10 +61,10 @@
                     </div>
                 </div>
             </div>
-            <!-- 监测点指标统计 -->
+            <!-- 资产性质 -->
             <div :style="`height:calc(${boxHeight.height} + 50px)`">
                 <div class="title">
-                    <span>监测点指标统计</span>
+                    <span>资产性质</span>
                 </div>
                 <div style="display: flex" class="mt2">
                     <img src="@/assets/img/FGX.png" />
@@ -97,33 +97,48 @@
 
                                 <div>
                                     数据完整性:
-                                    <span style="color: #2b7fd3; cursor: text">{{ val.integrityRate }}%</span>
+                                    <span style="color: #2b7fd3; cursor: text">{{ val.integrityRate || 0 }}%</span>
                                 </div>
                                 <div>
                                     在线率:
-                                    <span style="color: #2b7fd3; cursor: text">{{ val.integrityRate }}%</span>
+                                    <span style="color: #2dcd28; cursor: text">{{ val.onLineRate || 0 }}%</span>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
-            <!-- 监测点指标统计 -->
+            <!-- 资产性质 -->
             <div :style="`height:calc(${boxHeight.height} - 55px)`">
                 <div class="title">
                     <span>监测运行统计</span>
+                    <div class="titleNum">
+                        ( 合格:
+                        <span class="mr10" style="color: #2dcd28" @click="LookMap(linList[0].lineListOne, [], 0)">
+                            {{ linList[0].lineNumOne || 0 }}
+                        </span>
+                        告警:
+                        <span style="color: #a52a2a" @click="LookMap(linList[0].lineListOne, [], 0)">
+                            {{ linList[0].lineNumTwo || 0 }}
+                        </span>
+                        )
+                    </div>
                 </div>
                 <div style="display: flex" class="mt2">
                     <img src="@/assets/img/FGX.png" />
                 </div>
 
                 <div :style="`height:calc(${boxHeight.height} - 100px);overflow-y: auto;`" class="BoxA mt10">
-                    <div class="card-Box" v-for="item in linList">
-                        <div>
+                    <div class="card-Box" v-for="item in linList.slice(1)">
+                        <!-- <div>
                             <span class="line"></span>
                             <span class="vol">{{ item.title[0] }}</span>
-                        </div>
-                        <div class="num">
+                        </div> -->
+                        <div class="num num2">
+                            <div style="text-align: left">
+                                <span class="line"></span>
+                                <i class="vol">{{ item.title[0] }}</i>
+                            </div>
                             <div>
                                 {{ item.title[1] }}:
                                 <span style="color: #2dcd28" @click="LookMap(item.lineListOne, [], 0)">
@@ -148,12 +163,12 @@
             @click="show = !show"
             src="@/assets/img/QH.png"
         />
-        <div class="legeng">
+        <!-- <div class="legeng">
             <div v-for="item in legengList">
                 <span :style="`background-color: ${item.color};`"></span>
                 <span>{{ item.title }}</span>
             </div>
-        </div>
+        </div> -->
 
         <!-- 变电站详情 -->
         <stand ref="standRef" />
@@ -305,9 +320,10 @@ const countList: any = ref([
                 title: '电网侧监测点',
                 num: 0,
                 onLineNum: 0,
-                integrityRate: 0
+                integrityRate: 0,
+                onLineRate: 0
             },
-            { title: '非电网侧监测点', num: 0, onLineNum: 0, integrityRate: 0 }
+            { title: '非电网侧监测点', num: 0, onLineNum: 0, integrityRate: 0, onLineRate: 0 }
         ]
     }
     // {
@@ -409,7 +425,7 @@ const info = async (row: any) => {
             numOneList: []
         })
     })
-    // 监测点指标统计
+    // 资产性质
     getGridDiagramStatistics(form).then(res => {
         countList.value[0].children[0] = { title: '电网侧监测点', ...res.data.data[0] }
         countList.value[0].children[1] = { title: '非电网侧监测点', ...res.data.data[1] }
@@ -549,13 +565,13 @@ defineExpose({ info, show })
     // grid-template-rows: 1fr 1fr;
     display: flex;
     flex-direction: column;
-    justify-content: space-evenly;
+    justify-content: space-around;
     // align-items: center;
     margin: 0 5px 5px;
     padding: 10px;
     background-color: #edededc0;
     border-radius: 10px;
-    min-height: 60px;
+    min-height: 40px;
     // max-height: 120px;
 
     .line {
@@ -581,10 +597,11 @@ defineExpose({ info, show })
             font-weight: 550;
         }
     }
+
     .num1 {
         grid-template-columns: 1fr 1fr; /* 核心：改为2列，均分宽度 */
         grid-template-rows: auto auto;
-        gap: 8px; /* 可选：子元素间距，提升美观度 */
+        gap: 15px; /* 可选：子元素间距，提升美观度 */
         div {
             display: flex;
             padding-left: 20px;
@@ -594,12 +611,16 @@ defineExpose({ info, show })
             }
         }
     }
+    .num2 {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr !important;
+    }
 }
 
 .BoxA {
     display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-template-rows: 1fr 1fr;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr 1fr 1fr;
 
     // grid-template-rows: 80px;
     .num {
@@ -655,7 +676,7 @@ defineExpose({ info, show })
     position: absolute;
     padding: 5px;
     bottom: 0;
-    right: -75px;
+    right: -78px;
     width: 70px;
     font-size: 12px;
     height: 120px;
@@ -679,4 +700,13 @@ defineExpose({ info, show })
         }
     }
 }
+.titleNum {
+    font-size: 13px;
+    font-weight: normal;
+    margin-left: 5px;
+    span {
+        font-weight: 600;
+        cursor: pointer;
+    }
+}
 </style>