修好页面ui

src/views/pqs/runManage/cleaning/components/abnormal.vue

@@ -68,8 +68,8 @@
                     <div class="mb5" style="height: 40px">
                         <el-segmented style="height: 100%" v-model="segmented" :options="segmentedList" block>
                             <template #default="scope">
-                                <div >
-                                    <div class="segmentedIcon">0</div>
+                                <div>
+                                    <div class="segmentedIcon">{{ scope.item.num }}</div>
                                     <div>{{ scope.item.label }}</div>
                                 </div>
                             </template>
@@ -81,7 +81,7 @@
                         <span style="width: 90px">异常测点数</span>
                     </div>
                     <div :style="indicatorHeight" style="overflow-y: auto">
-                        <div v-for="o in abnormal" class="abnormal mb10">
+                        <div v-for="o in abnormal.filter(item => item.remark == segmented)" class="abnormal mb10">
                             <span style="width: 170px; height: 24px" class="iconDiv">
                                 <div :style="{ backgroundColor: o.ids.length > 0 ? '#FF9100' : '' }"></div>
                                 {{ o.targetName }}
@@ -212,8 +212,8 @@ const anomalyDetailsRef = ref()
 const dictData = useDictData()
 //字典获取监督对象类型
 const objTypeList: any = ref([])
-const pageHeight = mainHeight(157)
-const indicatorHeight = mainHeight(507)
+const pageHeight = mainHeight(97)
+const indicatorHeight = mainHeight(447)
 const monitoringPoints = ref({
     runNum: 0,
     abnormalNum: 0
@@ -224,41 +224,52 @@ const loading = ref(false)
 const TableHeaderRef = ref()
 const abnormal: any = ref([])
 const mapList: any = ref([])
-const segmented = ref(1)
+const segmented = ref('base')
 const time = ref(['', ''])
-const segmentedList = [
+const segmentedList = ref([
     {
         label: '基础指标',
-        value: 1
+        value: 'base',
+        num: 0
     },
     {
         label: '稳态指标',
-        value: 2
+        value: 'harmonic',
+        num: 0
     },
     {
         label: '暂态指标',
-        value: 3
+        value: 'event',
+        num: 0
     }
-]
+])
 const tableStore = new TableStore({
     url: '/device-boot/dataVerify/getMonitorVerifyData',
     method: 'POST',
     showPage: false,
     filename: '异常数据统计',
-    publicHeight: 530,
+    publicHeight: 470,
     column: [],
     beforeSearchFun: () => {
         loading.value = true
         time.value = [tableStore.table.params.startTime, tableStore.table.params.endTime]
     },
     loadCallback: () => {
-        // console.log('🚀 ~   abnormal.value:', tableStore.table.data)
+        segmentedList.value[0].num = 0
+        segmentedList.value[1].num = 0
+        segmentedList.value[2].num = 0
         monitoringPoints.value.runNum = tableStore.table.data.runNum //总数
         monitoringPoints.value.abnormalNum = tableStore.table.data.abnormalNum //异常测点数
         abnormal.value = tableStore.table.data.targetList
         mapList.value = tableStore.table.data.mapList
         tableStore.table.allData = tableStore.table.data.monitorAlarmInfo
         tableStore.table.data = tableStore.table.data.monitorAlarmInfo
+        abnormal.value.forEach(item => {
+            const { remark, ids } = item
+            if (remark === 'base') segmentedList.value[0].num += ids.length
+            else if (remark === 'harmonic') segmentedList.value[1].num += ids.length
+            else if (remark === 'event') segmentedList.value[2].num += ids.length
+        })
 
         echart()
         loading.value = false
@@ -619,7 +630,7 @@ provide('tableStore', tableStore)
 }
 :deep(.el-segmented__item, ) {
     clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
-    position: relative
+    position: relative;
 }
 :deep(.el-segmented) {
     clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%);
@@ -635,7 +646,7 @@ provide('tableStore', tableStore)
     left: 100px;
     height: 18px !important;
     line-height: 19px;
-    padding:  0 4px;
+    padding: 0 4px;
     font-size: 12px;
     background: #ff9100;
     color: #fff;