修改异常数据页面、修改有功功率趋势分析页面接口

package.json

@@ -12,7 +12,6 @@
   },
   "dependencies": {
     "@ant-design/colors": "^7.0.2",
-
     "@element-plus/icons-vue": "^2.3.1",
     "@form-create/designer": "^3.1.3",
     "@form-create/element-ui": "^3.1.24",
@@ -39,7 +38,7 @@
     "echarts-gl": "^2.0.9",
     "echarts-liquidfill": "^3.1.0",
     "echarts4": "npm:echarts@^4.9.0",
-    "element-plus": "^2.7.2",
+    "element-plus": "^2.8.7",
     "exceljs": "^4.4.0",
     "file-saver": "^2.0.5",
     "html2canvas": "^1.4.1",

src/api/device-boot/dataVerify.ts

@@ -8,3 +8,43 @@ export function getMonitorVerifyDay(data:any) {
         data
     })
 }
+// 异常-弹框-获取异常监测点列表
+export function monitorAbnormalTable(data:any) {
+    return request({
+        url: '/device-boot/dataVerify/monitorAbnormalTable',
+        method: 'post',
+        data
+    })
+}
+// 弹框-获取异常监测点列表详情
+export function monitorAbnormalTableDetail(data:any) {
+    return request({
+        url: '/device-boot/dataVerify/monitorAbnormalTableDetail',
+        method: 'post',
+        data
+    })
+}
+// 更新按钮-获取稳态告警数据
+export function getMonitorLimitDataDay(data:any) {
+    return request({
+        url: '/device-boot/dataVerify/getMonitorLimitDataDay',
+        method: 'post',
+        data
+    })
+}
+// 弹框-获取稳态告警监测点列表
+export function monitorLimitTable(data:any) {
+    return request({
+        url: '/device-boot/dataVerify/monitorLimitTable',
+        method: 'post',
+        data
+    })
+}
+// 弹框-获取稳态告警监测点列表详情
+export function monitorLimitTableDetail(data:any) {
+    return request({
+        url: '/device-boot/dataVerify/monitorLimitTableDetail',
+        method: 'post',
+        data
+    })
+}

src/api/harmonic-boot/pollution.ts

@@ -7,3 +7,10 @@ export function getSteadyData(data: any) {
         data: data
     })
 }
+export function getTargetByTime(data: any) {
+    return request({
+        url: '/harmonic-boot/powerStatistics/getTargetByTime',
+        method: 'post',
+        data: data
+    })
+}

src/components/echarts/color.ts

@@ -8,7 +8,7 @@ export let color = [
     '#FF9100',
     '#5B6E96',
     '#66FFCC',
-    '#B3B3B3'
+    '#B3B'
 ]
 export const gradeColor3 = ['#339966', '#FFCC33', '#CC0000']
-export const gradeColor5 = ['#00CC00', '#99CC99', '#FF9900','#996600','#CC0000']
+export const gradeColor5 = ['#00CC00', '#99CC99', '#FF9900', '#996600', '#CC0000']

src/components/table/index.vue

@@ -170,10 +170,5 @@ defineExpose({
     border-bottom: 1px solid #e4e7e9;
 }
 
-:deep(.el-pagination__sizes) {
-    .el-select {
-        min-width: 128px;
-    }
-}
 </style>
 <!-- @/components/table/column/GroupColumn.vue@/components/table/column/GroupColumn.vue -->

src/components/tree/pqs/bearingTree.vue

@@ -80,15 +80,34 @@ const loadData = () => {
                         item4.icon = 'el-icon-OfficeBuilding'
                         item4.color = config.getColorVal('elementUiPrimary')
                         item4.children.forEach((item5: anyObj) => {
-                            item5.alias = `${item.name}>${item2.name}>${item3.name}>${item4.name}>${item5.name}`
+                            if (item5.level == 7) {
-                            item5.icon = 'fa-solid fa-location-dot'
+                                item5.icon = 'el-icon-DataAnalysis'
-                            item5.color = config.getColorVal('elementUiPrimary')
+                                item5.color = config.getColorVal('elementUiPrimary')
-                            if (item5.comFlag === 0) {
+                                item5.children.forEach((item6: anyObj) => {
-                                item5.color = 'red !important'
+                                    item6.alias = `${item.name}>${item2.name}>${item3.name}>${item4.name}>${item5.name}>${item6.name}`
-                            } else if (item5.comFlag === 1) {
+                                    item6.pid = item4.id
-                                item5.color = '#00f93b !important'
+                                    item6.icon = 'fa-solid fa-location-dot'
-                            } else if (item5.comFlag === 2) {
+                                    item6.color = config.getColorVal('elementUiPrimary')
-                                item5.color = '#8c8c8c !important'
+                                    if (item6.comFlag == 0) {
+                                        item6.color = 'red !important'
+                                    } else if (item6.comFlag == 1) {
+                                        item6.color = '#00f93b !important'
+                                    } else if (item6.comFlag == 2) {
+                                        item6.color = '#8c8c8c !important'
+                                    }
+                                })
+                            } else {
+                                item5.alias = `${item.name}>${item2.name}>${item3.name}>${item4.name}>${item5.name}`
+                                item5.pid = item4.id
+                                item5.icon = 'fa-solid fa-location-dot'
+                                item5.color = config.getColorVal('elementUiPrimary')
+                                if (item5.comFlag == 0) {
+                                    item5.color = 'red !important'
+                                } else if (item5.comFlag == 1) {
+                                    item5.color = '#00f93b !important'
+                                } else if (item5.comFlag == 2) {
+                                    item5.color = '#8c8c8c !important'
+                                }
                             }
                         })
                     })

src/components/tree/pqs/pointTree.vue

@@ -1,9 +1,18 @@
 <template>
     <div class="point-tree">
-        <el-select v-model="formData.statisticalType" placeholder="请选择" style="min-width: unset; padding: 10px 10px 0"
+        <el-select
-            @change="loadData" v-if="props.showSelect">
+            v-model="formData.statisticalType"
-            <el-option v-for="item in classificationData" :key="item.id" :label="item.name"
+            placeholder="请选择"
-                :value="item.id"></el-option>
+            style="min-width: unset; padding: 10px 10px 0"
+            @change="loadData"
+            v-if="props.showSelect"
+        >
+            <el-option
+                v-for="item in classificationData"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+            ></el-option>
         </el-select>
         <div style="flex: 1; overflow: hidden">
             <Tree ref="treeRef" :data="tree" style="width: 100%; height: 100%" :canExpand="false" v-bind="$attrs" />
@@ -24,13 +33,9 @@ defineOptions({
 })
 interface Props {
     showSelect?: boolean
-
-
 }
 const props = withDefaults(defineProps<Props>(), {
-    showSelect: true,
+    showSelect: true
-
-
 })
 const emit = defineEmits(['init'])
 const attrs = useAttrs()
@@ -82,16 +87,34 @@ const loadData = () => {
                         item4.icon = 'el-icon-OfficeBuilding'
                         item4.color = config.getColorVal('elementUiPrimary')
                         item4.children.forEach((item5: anyObj) => {
-                            item5.alias = `${item.name}>${item2.name}>${item3.name}>${item4.name}>${item5.name}`
+                            if (item5.level == 7) {
-                            item5.pid= item4.id
+                                  item5.icon = 'el-icon-DataAnalysis'
-                            item5.icon = 'fa-solid fa-location-dot'
+                                  item5.color = config.getColorVal('elementUiPrimary')
-                            item5.color = config.getColorVal('elementUiPrimary')
+                                item5.children.forEach((item6: anyObj) => {
-                            if (item5.comFlag === 0) {
+                                    item6.alias = `${item.name}>${item2.name}>${item3.name}>${item4.name}>${item5.name}>${item6.name}`
-                                item5.color = 'red !important'
+                                    item6.pid = item4.id
-                            } else if (item5.comFlag === 1) {
+                                    item6.icon = 'fa-solid fa-location-dot'
-                                item5.color = '#00f93b !important'
+                                    item6.color = config.getColorVal('elementUiPrimary')
-                            } else if (item5.comFlag === 2) {
+                                    if (item6.comFlag == 0) {
-                                item5.color = '#8c8c8c !important'
+                                        item6.color = 'red !important'
+                                    } else if (item6.comFlag == 1) {
+                                        item6.color = '#00f93b !important'
+                                    } else if (item6.comFlag == 2) {
+                                        item6.color = '#8c8c8c !important'
+                                    }
+                                })
+                            } else {
+                                item5.alias = `${item.name}>${item2.name}>${item3.name}>${item4.name}>${item5.name}`
+                                item5.pid = item4.id
+                                item5.icon = 'fa-solid fa-location-dot'
+                                item5.color = config.getColorVal('elementUiPrimary')
+                                if (item5.comFlag == 0) {
+                                    item5.color = 'red !important'
+                                } else if (item5.comFlag == 1) {
+                                    item5.color = '#00f93b !important'
+                                } else if (item5.comFlag == 2) {
+                                    item5.color = '#8c8c8c !important'
+                                }
                             }
                         })
                     })

src/styles/element.scss

@@ -218,3 +218,8 @@
 .el-drawer__header {
     margin-bottom: 0 !important;
 }
+.el-pagination__sizes {
+    .el-select {
+        min-width: 128px;
+    }
+}

src/styles/vxeTable.scss

@@ -77,8 +77,8 @@
 .vxe-table--body .vxe-body--row:nth-child(even) {
     background-color: #f9f9f9;
     // background-color: var(--el-color-primary-light-9);
-  }
+}
 
-  .vxe-table--body .vxe-body--row:nth-child(odd) {
+.vxe-table--body .vxe-body--row:nth-child(odd) {
     background-color: #ffffff;
-  }
+}

src/views/LN/newEnergy/highAndLowPressure/index.vue

@@ -298,7 +298,7 @@ const tabulation = (e: any) => {
     voltageRideThroughEventQueryPage({
         ...tableStore.table.params,
         areaId: e.data.id,
-        frequencyType: e.seriesName == '高压' ? 1 : 2
+        frequencyType: e.seriesName == '高压' ? 'Voltage_Rise' : 'Voltage_Dip'
     })
         .then(res => {
             distributionData.value = res.data

src/views/LN/newEnergy/newEnergyAnalysis/components/detail.vue

@@ -6,21 +6,54 @@
             <vxe-colgroup title="最小值">
                 <vxe-column field="minphaseA" title="A">
                     <template #default="{ row }">
-                        <span :style="{ color: row.limit < row.minphaseA ? 'red' : '' }">
+                        <span
+                            :style="{
+                                color:
+                                    anotherName == '电压偏差(%)'
+                                        ? tableData[0].limit < row.minphaseA || tableData[1].limit > row.minphaseA
+                                            ? 'red'
+                                            : ''
+                                        : row.limit < row.minphaseA
+                                        ? 'red'
+                                        : ''
+                            }"
+                        >
                             {{ row.minphaseA || '/' }}
                         </span>
                     </template>
                 </vxe-column>
                 <vxe-column field="minphaseB" title="B">
                     <template #default="{ row }">
-                        <span :style="{ color: row.limit < row.minphaseB ? 'red' : '' }">
+                        <span
+                            :style="{
+                                color:
+                                    anotherName == '电压偏差(%)'
+                                        ? tableData[0].limit < row.minphaseB || tableData[1].limit > row.minphaseB
+                                            ? 'red'
+                                            : ''
+                                        : row.limit < row.minphaseB
+                                        ? 'red'
+                                        : ''
+                            }"
+                        >
                             {{ row.minphaseB || '/' }}
                         </span>
                     </template>
                 </vxe-column>
                 <vxe-column field="minphaseC" title="C">
                     <template #default="{ row }">
-                        <span :style="{ color: row.limit < row.minphaseC ? 'red' : '' }">
+                        <span
+                            :style="{
+                                color:
+                                    anotherName == '电压偏差(%)'
+                                        ? tableData[0].limit < row.minphaseC || tableData[1].limit > row.minphaseC
+                                            ? 'red'
+                                            : ''
+                                        : row.limit < row.minphaseC
+                                        ? 'red'
+                                        : ''
+                            }"
+                        >
                             {{ row.minphaseC || '/' }}
                         </span>
                     </template>
@@ -29,21 +62,54 @@
             <vxe-colgroup title="最大值">
                 <vxe-column field="maxphaseA" title="A">
                     <template #default="{ row }">
-                        <span :style="{ color: row.limit < row.maxphaseA ? 'red' : '' }">
+                        <span
+                            :style="{
+                                color:
+                                    anotherName == '电压偏差(%)'
+                                        ? tableData[0].limit < row.maxphaseA || tableData[1].limit > row.maxphaseA
+                                            ? 'red'
+                                            : ''
+                                        : row.limit < row.maxphaseA
+                                        ? 'red'
+                                        : ''
+                            }"
+                        >
                             {{ row.maxphaseA || '/' }}
                         </span>
                     </template>
                 </vxe-column>
                 <vxe-column field="maxphaseB" title="B">
                     <template #default="{ row }">
-                        <span :style="{ color: row.limit < row.maxphaseB ? 'red' : '' }">
+                        <span
+                            :style="{
+                                color:
+                                    anotherName == '电压偏差(%)'
+                                        ? tableData[0].limit < row.maxphaseB || tableData[1].limit > row.maxphaseB
+                                            ? 'red'
+                                            : ''
+                                        : row.limit < row.maxphaseB
+                                        ? 'red'
+                                        : ''
+                            }"
+                        >
                             {{ row.maxphaseB || '/' }}
                         </span>
                     </template>
                 </vxe-column>
                 <vxe-column field="maxphaseC" title="C">
                     <template #default="{ row }">
-                        <span :style="{ color: row.limit < row.maxphaseC ? 'red' : '' }">
+                        <span
+                            :style="{
+                                color:
+                                    anotherName == '电压偏差(%)'
+                                        ? tableData[0].limit < row.maxphaseC || tableData[1].limit > row.maxphaseC
+                                            ? 'red'
+                                            : ''
+                                        : row.limit < row.maxphaseC
+                                        ? 'red'
+                                        : ''
+                            }"
+                        >
                             {{ row.maxphaseC || '/' }}
                         </span>
                     </template>
@@ -52,21 +118,54 @@
             <vxe-colgroup title="平均值">
                 <vxe-column field="avgphaseA" title="A">
                     <template #default="{ row }">
-                        <span :style="{ color: row.limit < row.avgphaseA ? 'red' : '' }">
+                        <span
+                            :style="{
+                                color:
+                                    anotherName == '电压偏差(%)'
+                                        ? tableData[0].limit < row.avgphaseA || tableData[1].limit > row.avgphaseA
+                                            ? 'red'
+                                            : ''
+                                        : row.limit < row.avgphaseA
+                                        ? 'red'
+                                        : ''
+                            }"
+                        >
                             {{ row.avgphaseA || '/' }}
                         </span>
                     </template>
                 </vxe-column>
                 <vxe-column field="avgphaseB" title="B">
                     <template #default="{ row }">
-                        <span :style="{ color: row.limit < row.avgphaseB ? 'red' : '' }">
+                        <span
+                            :style="{
+                                color:
+                                    anotherName == '电压偏差(%)'
+                                        ? tableData[0].limit < row.avgphaseB || tableData[1].limit > row.avgphaseB
+                                            ? 'red'
+                                            : ''
+                                        : row.limit < row.avgphaseB
+                                        ? 'red'
+                                        : ''
+                            }"
+                        >
                             {{ row.avgphaseB || '/' }}
                         </span>
                     </template>
                 </vxe-column>
                 <vxe-column field="avgphaseC" title="C">
                     <template #default="{ row }">
-                        <span :style="{ color: row.limit < row.avgphaseC ? 'red' : '' }">
+                        <span
+                            :style="{
+                                color:
+                                    anotherName == '电压偏差(%)'
+                                        ? tableData[0].limit < row.avgphaseC || tableData[1].limit > row.avgphaseC
+                                            ? 'red'
+                                            : ''
+                                        : row.limit < row.avgphaseC
+                                        ? 'red'
+                                        : ''
+                            }"
+                        >
                             {{ row.avgphaseC || '/' }}
                         </span>
                     </template>
@@ -75,21 +174,54 @@
             <vxe-colgroup title="cp95值">
                 <vxe-column field="cp95PhaseA" title="A">
                     <template #default="{ row }">
-                        <span :style="{ color: row.limit < row.cp95PhaseA ? 'red' : '' }">
+                        <span
+                            :style="{
+                                color:
+                                    anotherName == '电压偏差(%)'
+                                        ? tableData[0].limit < row.cp95PhaseA || tableData[1].limit > row.cp95PhaseA
+                                            ? 'red'
+                                            : ''
+                                        : row.limit < row.cp95PhaseA
+                                        ? 'red'
+                                        : ''
+                            }"
+                        >
                             {{ row.cp95PhaseA || '/' }}
                         </span>
                     </template>
                 </vxe-column>
                 <vxe-column field="cp95PhaseB" title="B">
                     <template #default="{ row }">
-                        <span :style="{ color: row.limit < row.cp95PhaseB ? 'red' : '' }">
+                        <span
+                            :style="{
+                                color:
+                                    anotherName == '电压偏差(%)'
+                                        ? tableData[0].limit < row.cp95PhaseB || tableData[1].limit > row.cp95PhaseB
+                                            ? 'red'
+                                            : ''
+                                        : row.limit < row.cp95PhaseB
+                                        ? 'red'
+                                        : ''
+                            }"
+                        >
                             {{ row.cp95PhaseB || '/' }}
                         </span>
                     </template>
                 </vxe-column>
                 <vxe-column field="cp95PhaseC" title="C">
                     <template #default="{ row }">
-                        <span :style="{ color: row.limit < row.cp95PhaseC ? 'red' : '' }">
+                        <span
+                            :style="{
+                                color:
+                                    anotherName == '电压偏差(%)'
+                                        ? tableData[0].limit < row.cp95PhaseC || tableData[1].limit > row.cp95PhaseC
+                                            ? 'red'
+                                            : ''
+                                        : row.limit < row.cp95PhaseC
+                                        ? 'red'
+                                        : ''
+                            }"
+                        >
                             {{ row.cp95PhaseC || '/' }}
                         </span>
                     </template>
@@ -104,12 +236,25 @@
 <script setup lang="ts">
 import { ref, reactive } from 'vue'
 import { defaultAttribute } from '@/components/table/defaultAttribute'
+import { getTargetByTime } from '@/api/harmonic-boot/pollution'
 const dialogVisible = ref(false)
 const title = ref('')
+const anotherName = ref('')
 const tableData: any = ref([])
 const open = (row: any) => {
     title.value = row.title + ' - ' + row.row.time + ' - 越限详情'
-    tableData.value = row.row[row.key]
+    anotherName.value = row.title
+    console.log('🚀 ~ detailClick ~ row:', row)
+    getTargetByTime({
+        field: row.field,
+        lineId: row.lineId,
+        searchBeginTime: row.row.time,
+        searchEndTime: row.row.time,
+        statisticalId: row.key == '2' ? 2 : row.key == '3' ? 3 : row.key == '4' ? 4 : 1,
+        code: row.key == '2' ? '' : row.key == '3' ? '' : row.key == '4' ? '' : row.key //row.key
+    }).then((res: any) => {
+        tableData.value = res.data
+    })
     dialogVisible.value = true
 }
 defineExpose({ open })

src/views/LN/newEnergy/newEnergyAnalysis/index.vue

@@ -14,239 +14,251 @@
                         <el-button icon="el-icon-Download" type="primary" @click="exportData">导出区间数据</el-button>
                     </template>
                 </TableHeader>
-
+                <div style="display: flex; height: calc(100vh - 195px)" class="pt10">
-                <div class="container pd10">
+                    <el-segmented
-                    <el-card class="cardBox">
+                        v-model="value1"
-                        <div class="mb5" style="display: flex; justify-content: space-between">
+                        :options="[...powerList1, ...powerList2]"
-                            <h3>功率区间</h3>
+                        direction="vertical"
-                            <div>
+                        @change="analyseList"
-                                <span>稳态越限图例:　</span>
+                    >
-                                <span style="color: red">越限　</span>
+                        <template #default="scope">
-                                <span style="color: green">合格</span>
+                            <div class="flex flex-col items-center gap-2 p-2">
-                            </div>
-                        </div>
-                        <el-card class="card-top">
-                            <div
-                                v-for="(item, index) in powerList1"
-                                class="pd10"
-                                style="cursor: pointer"
-                                :class="flag == item.label ? 'hoverBox' : ''"
-                                @click="analyseList(item.label, index)"
-                            >
                                 <div style="font-size: 24px; font-weight: 700">
-                                    <span :style="{ color: item.crossTheLine > 0 ? 'red' : 'green' }">
+                                    <span :style="{ color: scope.item.crossTheLine > 0 ? 'red' : 'green' }">
-                                        {{ item.quantity }}
+                                        {{ scope.item.quantity }}
                                     </span>
                                     <span style="font-size: 14px; font-weight: 500">个</span>
                                 </div>
                                 <div>
-                                    {{ item.label }}
+                                    {{ scope.item.label }}
                                 </div>
                             </div>
-                        </el-card>
+                        </template>
+                    </el-segmented>
+                    <div class="container">
+                        <el-card class="box ml10 mr10" style="flex: 1">
+                            <template #header>
+                                <div class="card-header" style="display: flex; justify-content: space-between">
+                                    <span>功率区间稳态越限详情</span>
+                                    <div>
+                                        <span style="font-size: 14px">稳态越限图例:　</span>
+                                        <span style="color: red">越限　</span>
+                                        <span style="color: green">合格</span>
+                                    </div>
+                                </div>
+                            </template>
+                            <!-- <h3>功率区间稳态越限详情</h3> -->
+                            <div :style="heightA" style="overflow-y: auto">
+                                <vxe-table
+                                    v-bind="defaultAttribute"
+                                    ref="vxeRef"
+                                    height="auto"
+                                    :data="tableData"
+                                    v-loading="loading"
+                                >
+                                    <vxe-column field="time" title="时间" width="180px">
+                                        <template #default="{ row }">
+                                            <el-link
+                                                type="primary"
+                                                :underline="false"
+                                                class="percentage"
+                                                @click="timeClick(row)"
+                                            >
+                                                {{ row.time }}
+                                            </el-link>
+                                        </template>
+                                    </vxe-column>
+                                    <vxe-column field="voltageOffset" title="电压偏差(%)" min-width="110px">
+                                        <template #default="{ row }">
+                                            <el-link
+                                                :type="row.voltageOffset == '1' ? 'danger' : 'success'"
+                                                :class="row.voltageOffset == '1' ? 'percentage' : ''"
+                                                @click="
+                                                    row.voltageOffset == '1'
+                                                        ? detailClick(row, '电压偏差(%)', 'Dev')
+                                                        : ''
+                                                "
+                                            >
+                                                {{ row.voltageOffset == '1' ? '越限' : '合格' }}
+                                            </el-link>
+                                        </template>
+                                    </vxe-column>
+                                    <vxe-column field="vtimes" title="谐波电压(%)" min-width="110px">
+                                        <template #default="{ row }">
+                                            <el-link
+                                                :type="row.vtimes == '1' ? 'danger' : 'success'"
+                                                :class="row.vtimes == '1' ? 'percentage' : ''"
+                                                @click="
+                                                    row.vtimes == '1'
+                                                        ? detailClick(row, '谐波电压(%)', '2')
+                                                        : ''
+                                                "
+                                            >
+                                                {{ row.vtimes == '1' ? '越限' : '合格' }}
+                                            </el-link>
+                                        </template>
+                                    </vxe-column>
+                                    <vxe-column field="itimes" title="谐波电流(A)" min-width="110px">
+                                        <template #default="{ row }">
+                                            <el-link
+                                                :type="row.itimes == '1' ? 'danger' : 'success'"
+                                                :class="row.itimes == '1' ? 'percentage' : ''"
+                                                @click="
+                                                    row.itimes == '1'
+                                                        ? detailClick(row, '谐波电流(A)', '3')
+                                                        : ''
+                                                "
+                                            >
+                                                {{ row.itimes == '1' ? '越限' : '合格' }}
+                                            </el-link>
+                                        </template>
+                                    </vxe-column>
+                                    <vxe-column field="ubalance" title="三相电压不平衡度(%)" min-width="150px">
+                                        <template #default="{ row }">
+                                            <el-link
+                                                :type="row.ubalance == '1' ? 'danger' : 'success'"
+                                                :class="row.ubalance == '1' ? 'percentage' : ''"
+                                                @click="
+                                                    row.ubalance == '1'
+                                                        ? detailClick(row, '三相电压不平衡度(%)', 'Unbalance')
+                                                        : ''
+                                                "
+                                            >
+                                                {{ row.ubalance == '1' ? '越限' : '合格' }}
+                                            </el-link>
+                                        </template>
+                                    </vxe-column>
+                                    <!-- <vxe-column field="voltageFluctuation" title="电压波动(%)" min-width="110px">
+                                        <template #default="{ row }">
+                                            <el-link
+                                                :type="row.voltageFluctuation == '1' ? 'danger' : 'success'"
+                                                :class="row.voltageFluctuation == '1' ? 'percentage' : ''"
+                                                @click="
+                                                    row.voltageFluctuation == '1'
+                                                        ? detailClick(row, '电压波动(%)', 'voltageFluctuationList')
+                                                        : ''
+                                                "
+                                            >
+                                                {{ row.voltageFluctuation == '1' ? '越限' : '合格' }}
+                                            </el-link>
+                                        </template>
+                                    </vxe-column> -->
+                                    <vxe-column field="flicker" title="长时闪变" min-width="110px">
+                                        <template #default="{ row }">
+                                            <el-link
+                                                :type="row.flicker == '1' ? 'danger' : 'success'"
+                                                :class="row.flicker == '1' ? 'percentage' : ''"
+                                                @click="
+                                                    row.flicker == '1'
+                                                        ? detailClick(row, '长时闪变', 'plt')
+                                                        : ''
+                                                "
+                                            >
+                                                {{ row.flicker == '1' ? '越限' : '合格' }}
+                                            </el-link>
+                                        </template>
+                                    </vxe-column>
+                                    <vxe-column field="interHarmonic" title="间谐波电压含有率(%)" min-width="150px">
+                                        <template #default="{ row }">
+                                            <el-link
+                                                :type="row.interHarmonic == '1' ? 'danger' : 'success'"
+                                                :class="row.interHarmonic == '1' ? 'percentage' : ''"
+                                                @click="
+                                                    row.interHarmonic == '1'
+                                                        ? detailClick(row, '间谐波电压含有率(%)', '4')
+                                                        : ''
+                                                "
+                                            >
+                                                {{ row.interHarmonic == '1' ? '越限' : '合格' }}
+                                            </el-link>
+                                        </template>
+                                    </vxe-column>
+                                    <vxe-column
+                                        field="sequenceCurrentUnbalance"
+                                        title="电流不平衡度(%)"
+                                        min-width="130px"
+                                    >
+                                        <template #default="{ row }">
+                                            <el-link
+                                                :type="row.sequenceCurrentUnbalance == '1' ? 'danger' : 'success'"
+                                                :class="row.sequenceCurrentUnbalance == '1' ? 'percentage' : ''"
+                                                @click="
+                                                    row.sequenceCurrentUnbalance == '1'
+                                                        ? detailClick(
+                                                              row,
+                                                              '电流不平衡度(%)',
+                                                              'iNeg'
+                                                          )
+                                                        : ''
+                                                "
+                                            >
+                                                {{ row.sequenceCurrentUnbalance == '1' ? '越限' : '合格' }}
+                                            </el-link>
+                                        </template>
+                                    </vxe-column>
 
-                        <el-card class="card-top mt15">
+                                    <vxe-column field="num3" fixed="right" title="操作" width="80">
-                            <div
+                                        <template #default="{ row }">
-                                v-for="(item, index) in powerList2"
+                                            <el-button type="primary" link @click="addTo(row)">添加</el-button>
-                                class="pd10"
+                                        </template>
-                                style="cursor: pointer"
+                                    </vxe-column>
-                                :class="flag == item.label ? 'hoverBox' : ''"
+                                </vxe-table>
-                                @click="analyseList(item.label, index + 5)"
-                            >
-                                <div style="font-size: 24px; font-weight: 700">
-                                    <span :style="{ color: item.crossTheLine > 0 ? 'red' : 'green' }">
-                                        {{ item.quantity }}
-                                    </span>
-                                    <span style="font-size: 14px; font-weight: 500">个</span>
-                                </div>
-                                <div>
-                                    {{ item.label }}
-                                </div>
                             </div>
                         </el-card>
-                    </el-card>
+                        <div style="padding: 0px 10px 10px 0; width: 450px">
-                    <el-card class="echart">
+                            <el-card class="echart">
-                        <h3>有功率区间占比</h3>
+                                <template #header>
-                        <my-echart :options="options" style="height: 212px" />
+                                    <div class="card-header">
-                    </el-card>
+                                        <span>有功率区间占比</span>
-                </div>
+                                    </div>
-                <div class="container" style="padding: 0px 10px 10px">
+                                </template>
-                    <el-card class="box">
+                                <my-echart :options="options" style="height: 212px" />
-                        <h3>功率区间稳态越限详情</h3>
+                            </el-card>
-                        <div :style="`height:calc(${heightB.height} - 25px)`" style="overflow-y: auto">
+                            <el-card class="box mt10">
-                            <vxe-table
+                                <template #header>
-                                v-bind="defaultAttribute"
+                                    <div style="display: flex; justify-content: space-between">
-                                ref="vxeRef"
+                                        <div class="card-header">
-                                height="auto"
+                                            <span>报告参数</span>
-                                :data="tableData"
+                                        </div>
-                                v-loading="loading"
+                                        <el-button
-                            >
+                                            icon="el-icon-Download"
-                                <vxe-column field="time" title="时间" width="180px">
+                                            size="small"
-                                    <template #default="{ row }">
-                                        <el-link
                                             type="primary"
-                                            :underline="false"
+                                            @click="generateReports"
-                                            class="percentage"
-                                            @click="timeClick(row)"
                                         >
-                                            {{ row.time }}
+                                            生成报表
-                                        </el-link>
+                                        </el-button>
-                                    </template>
+                                    </div>
-                                </vxe-column>
+                                </template>
-                                <vxe-column field="voltageOffset" title="电压偏差(%)">
-                                    <template #default="{ row }">
-                                        <el-link
-                                            :type="row.voltageOffset == '1' ? 'danger' : 'success'"
-                                            :class="row.voltageOffset == '1' ? 'percentage' : ''"
-                                            @click="
-                                                row.voltageOffset == '1'
-                                                    ? detailClick(row, '电压偏差(%)', 'voltageOffsetList')
-                                                    : ''
-                                            "
-                                        >
-                                            {{ row.voltageOffset == '1' ? '越限' : '合格' }}
-                                        </el-link>
-                                    </template>
-                                </vxe-column>
-                                <vxe-column field="vtimes" title="谐波电压(%)">
-                                    <template #default="{ row }">
-                                        <el-link
-                                            :type="row.vtimes == '1' ? 'danger' : 'success'"
-                                            :class="row.vtimes == '1' ? 'percentage' : ''"
-                                            @click="
-                                                row.vtimes == '1' ? detailClick(row, '谐波电压(%)', 'vtimesList') : ''
-                                            "
-                                        >
-                                            {{ row.vtimes == '1' ? '越限' : '合格' }}
-                                        </el-link>
-                                    </template>
-                                </vxe-column>
-                                <vxe-column field="itimes" title="谐波电流(A)">
-                                    <template #default="{ row }">
-                                        <el-link
-                                            :type="row.itimes == '1' ? 'danger' : 'success'"
-                                            :class="row.itimes == '1' ? 'percentage' : ''"
-                                            @click="
-                                                row.itimes == '1' ? detailClick(row, '谐波电流(A)', 'itimestList') : ''
-                                            "
-                                        >
-                                            {{ row.itimes == '1' ? '越限' : '合格' }}
-                                        </el-link>
-                                    </template>
-                                </vxe-column>
-                                <vxe-column field="ubalance" title="三相电压不平衡度(%)">
-                                    <template #default="{ row }">
-                                        <el-link
-                                            :type="row.ubalance == '1' ? 'danger' : 'success'"
-                                            :class="row.ubalance == '1' ? 'percentage' : ''"
-                                            @click="
-                                                row.ubalance == '1'
-                                                    ? detailClick(row, '三相电压不平衡度(%)', 'ubalanceList')
-                                                    : ''
-                                            "
-                                        >
-                                            {{ row.ubalance == '1' ? '越限' : '合格' }}
-                                        </el-link>
-                                    </template>
-                                </vxe-column>
-                                <vxe-column field="voltageFluctuation" title="电压波动(%)">
-                                    <template #default="{ row }">
-                                        <el-link
-                                            :type="row.voltageFluctuation == '1' ? 'danger' : 'success'"
-                                            :class="row.voltageFluctuation == '1' ? 'percentage' : ''"
-                                            @click="
-                                                row.voltageFluctuation == '1'
-                                                    ? detailClick(row, '电压波动(%)', 'voltageFluctuationList')
-                                                    : ''
-                                            "
-                                        >
-                                            {{ row.voltageFluctuation == '1' ? '越限' : '合格' }}
-                                        </el-link>
-                                    </template>
-                                </vxe-column>
-                                <vxe-column field="flicker" title="长时闪变">
-                                    <template #default="{ row }">
-                                        <el-link
-                                            :type="row.flicker == '1' ? 'danger' : 'success'"
-                                            :class="row.flicker == '1' ? 'percentage' : ''"
-                                            @click="
-                                                row.flicker == '1' ? detailClick(row, '长时闪变', 'flickerList') : ''
-                                            "
-                                        >
-                                            {{ row.flicker == '1' ? '越限' : '合格' }}
-                                        </el-link>
-                                    </template>
-                                </vxe-column>
-                                <vxe-column field="interHarmonic" title="间谐波电压含有率(%)">
-                                    <template #default="{ row }">
-                                        <el-link
-                                            :type="row.interHarmonic == '1' ? 'danger' : 'success'"
-                                            :class="row.interHarmonic == '1' ? 'percentage' : ''"
-                                            @click="
-                                                row.interHarmonic == '1'
-                                                    ? detailClick(row, '间谐波电压含有率(%)', 'interHarmonicList')
-                                                    : ''
-                                            "
-                                        >
-                                            {{ row.interHarmonic == '1' ? '越限' : '合格' }}
-                                        </el-link>
-                                    </template>
-                                </vxe-column>
-                                <vxe-column field="sequenceCurrentUnbalance" title="电流不平衡度(%)">
-                                    <template #default="{ row }">
-                                        <el-link
-                                            :type="row.sequenceCurrentUnbalance == '1' ? 'danger' : 'success'"
-                                            :class="row.sequenceCurrentUnbalance == '1' ? 'percentage' : ''"
-                                            @click="
-                                                row.sequenceCurrentUnbalance == '1'
-                                                    ? detailClick(
-                                                          row,
-                                                          '电流不平衡度(%)',
-                                                          'sequenceCurrentUnbalanceList'
-                                                      )
-                                                    : ''
-                                            "
-                                        >
-                                            {{ row.sequenceCurrentUnbalance == '1' ? '越限' : '合格' }}
-                                        </el-link>
-                                    </template>
-                                </vxe-column>
 
-                                <vxe-column field="num3" title="操作" width="80">
+                                <div :style="heightB" style="overflow-y: auto">
-                                    <template #default="{ row }">
+                                    <div>
-                                        <el-button type="primary" link @click="addTo(row)">添加</el-button>
+                                        <el-tree
-                                    </template>
+                                            style="max-width: 600px"
-                                </vxe-column>
+                                            :data="dataSource"
-                            </vxe-table>
+                                            node-key="id"
+                                            default-expand-all
+                                        >
+                                            <template #default="{ node, data }">
+                                                <span class="custom-tree-node">
+                                                    <span
+                                                        :style="data.level != 0 ? 'color: var(--el-color-primary)' : ''"
+                                                    >
+                                                        {{ data.time }}
+                                                    </span>
+                                                    <Close
+                                                        v-if="data.level != 0"
+                                                        style="margin-left: 5px; height: 14px"
+                                                        @click="remove(node, data)"
+                                                    />
+                                                </span>
+                                            </template>
+                                        </el-tree>
+                                    </div>
+                                </div>
+                            </el-card>
                         </div>
-                    </el-card>
+                    </div>
-
-                    <el-card class="box">
-                        <div :style="heightB" style="overflow-y: auto">
-                            <div style="display: flex; justify-content: space-between">
-                                <span style="font-size: 16px; font-weight: 700">报告参数</span>
-                                <el-button icon="el-icon-Download" size="small" type="primary" @click="generateReports">
-                                    生成报表
-                                </el-button>
-                            </div>
-                            <div>
-                                <el-tree style="max-width: 600px" :data="dataSource" node-key="id" default-expand-all>
-                                    <template #default="{ node, data }">
-                                        <span class="custom-tree-node">
-                                            <span :style="data.level != 0 ? 'color: var(--el-color-primary)' : ''">
-                                                {{ data.time }}
-                                            </span>
-                                            <Close
-                                                v-if="data.level != 0"
-                                                style="margin-left: 5px; height: 14px"
-                                                @click="remove(node, data)"
-                                            />
-                                        </span>
-                                    </template>
-                                </el-tree>
-                            </div>
-                        </div>
-                    </el-card>
                 </div>
             </pane>
         </splitpanes>
@@ -288,9 +300,23 @@ defineOptions({
 })
 const timePopUpBox = ref<anyObj | null>(null)
 const flag = ref('0%~10%')
+const value1 = ref('0%~10%')
 
+const options1 = [
+    '0%~10%',
+    '10%~20%',
+    '20%~30%',
+    '30%~40%',
+    '40%~50%',
+    '50%~60%',
+    '60%~70%',
+    '70%~80%',
+    '80%~90%',
+    '90%~100%'
+]
 const height = mainHeight(20)
-const heightB = mainHeight(385)
+const heightB = mainHeight(448)
+const heightA = mainHeight(180)
 const size = ref(0)
 const TableHeaderRef = ref()
 const detailRef = ref()
@@ -668,7 +694,7 @@ const tableStore = new TableStore({
             }
         ]
 
-        analyseList(flag.value, index.value)
+        analyseList(flag.value)
     }
 })
 // 导出区间数据
@@ -727,10 +753,12 @@ const timeClick = (row: any) => {
 }
 // 点击越限
 const detailClick = (row: any, title: string, key: string) => {
-    console.log('🚀 ~ detailClick ~ row:', row)
+
     detailRef.value.open({
         row: row,
         title: title,
+        field: index.value,
+        lineId: dotList.value.id ,
         key: key
     })
 }
@@ -743,7 +771,10 @@ const detailClick = (row: any, title: string, key: string) => {
 //     }).then(res => {})
 // }
 // 功率列表
-const analyseList = (e: string, i: number) => {
+const analyseList = (e: string) => {
+    const i = [...powerList1.value, ...powerList2.value].findIndex(item => item.value === e)
+    console.log(index)
+
     flag.value = e
     index.value = i
     loading.value = true
@@ -795,9 +826,9 @@ const handleNodeClick = (data: any, node: any) => {
     }
 }
 .container {
-    display: grid;
+    width: calc(100% - 80px);
-    grid-template-columns: 5fr 2.5fr;
+    display: flex;
-    gap: 10px;
+    flex: 1;
     .card-top {
         background-color: var(--el-color-primary-light-9);
         // color: #fff;
@@ -832,3 +863,20 @@ const handleNodeClick = (data: any, node: any) => {
     text-underline-offset: 0.1em;
 }
 </style>
+<style lang="scss" scoped>
+:deep(.el-card__header) {
+    padding: 10px;
+}
+.card-header {
+    span {
+        font-weight: 600;
+        font-size: 16px;
+    }
+}
+:deep(.el-segmented__item-selected) {
+    background: var(--el-color-primary-light-5) !important;
+}
+:deep(.el-segmented__item.is-selected, .el-segmented__item.is-selected.is-disabled) {
+    color: #000 !important;
+}
+</style>

src/views/LN/newEnergy/newEnergyAnalysis/test.vue

@@ -0,0 +1,875 @@
+<template>
+    <div class="default-main" :style="height">
+        <splitpanes style="height: 100%" class="default-theme" id="navigation-splitpanes">
+            <pane :size="size">
+                <PointTree
+                    :default-expand-all="false"
+                    @node-click="handleNodeClick"
+                    @init="handleNodeClick"
+                ></PointTree>
+            </pane>
+            <pane :style="height" style="background: #fff">
+                <TableHeader ref="TableHeaderRef" datePicker>
+                    <template #operation>
+                        <el-button icon="el-icon-Download" type="primary" @click="exportData">导出区间数据</el-button>
+                    </template>
+                </TableHeader>
+
+                <div class="container pd10">
+                    <el-card class="cardBox">
+                        <template #header>
+                            <div class="card-header" style="display: flex; justify-content: space-between">
+                                <span>功率区间</span>
+                                <div>
+                                    <span style="font-size: 14px">稳态越限图例:　</span>
+                                    <span style="color: red">越限　</span>
+                                    <span style="color: green">合格</span>
+                                </div>
+                            </div>
+                        </template>
+                  
+                        <el-card class="card-top mt5">
+                            <div
+                                v-for="(item, index) in powerList1"
+                                class="pd10"
+                                style="cursor: pointer"
+                                :class="flag == item.label ? 'hoverBox' : ''"
+                                @click="analyseList(item.label, index)"
+                            >
+                                <div style="font-size: 24px; font-weight: 700">
+                                    <span :style="{ color: item.crossTheLine > 0 ? 'red' : 'green' }">
+                                        {{ item.quantity }}
+                                    </span>
+                                    <span style="font-size: 14px; font-weight: 500">个</span>
+                                </div>
+                                <div>
+                                    {{ item.label }}
+                                </div>
+                            </div>
+                        </el-card>
+
+                        <el-card class="card-top mt15">
+                            <div
+                                v-for="(item, index) in powerList2"
+                                class="pd10"
+                                style="cursor: pointer"
+                                :class="flag == item.label ? 'hoverBox' : ''"
+                                @click="analyseList(item.label, index + 5)"
+                            >
+                                <div style="font-size: 24px; font-weight: 700">
+                                    <span :style="{ color: item.crossTheLine > 0 ? 'red' : 'green' }">
+                                        {{ item.quantity }}
+                                    </span>
+                                    <span style="font-size: 14px; font-weight: 500">个</span>
+                                </div>
+                                <div>
+                                    {{ item.label }}
+                                </div>
+                            </div>
+                        </el-card>
+                    </el-card>
+                    <el-card class="echart">
+                        <template #header>
+                            <div class="card-header">
+                                <span>有功率区间占比</span>
+                            </div>
+                        </template>
+                        <my-echart :options="options" style="height: 212px" />
+                    </el-card>
+                </div>
+                <div class="container" style="padding: 0px 10px 10px">
+                    <el-card class="box">
+                        <template #header>
+                            <div class="card-header">
+                                <span>功率区间稳态越限详情</span>
+                            </div>
+                        </template>
+                        <!-- <h3>功率区间稳态越限详情</h3> -->
+                        <div :style="`height:calc(${heightB.height} - 25px)`" style="overflow-y: auto">
+                            <vxe-table
+                                v-bind="defaultAttribute"
+                                ref="vxeRef"
+                                height="auto"
+                                :data="tableData"
+                                v-loading="loading"
+                            >
+                                <vxe-column field="time" title="时间" width="180px">
+                                    <template #default="{ row }">
+                                        <el-link
+                                            type="primary"
+                                            :underline="false"
+                                            class="percentage"
+                                            @click="timeClick(row)"
+                                        >
+                                            {{ row.time }}
+                                        </el-link>
+                                    </template>
+                                </vxe-column>
+                                <vxe-column field="voltageOffset" title="电压偏差(%)" min-width="110px">
+                                    <template #default="{ row }">
+                                        <el-link
+                                            :type="row.voltageOffset == '1' ? 'danger' : 'success'"
+                                            :class="row.voltageOffset == '1' ? 'percentage' : ''"
+                                            @click="
+                                                row.voltageOffset == '1'
+                                                    ? detailClick(row, '电压偏差(%)', 'voltageOffsetList')
+                                                    : ''
+                                            "
+                                        >
+                                            {{ row.voltageOffset == '1' ? '越限' : '合格' }}
+                                        </el-link>
+                                    </template>
+                                </vxe-column>
+                                <vxe-column field="vtimes" title="谐波电压(%)" min-width="110px">
+                                    <template #default="{ row }">
+                                        <el-link
+                                            :type="row.vtimes == '1' ? 'danger' : 'success'"
+                                            :class="row.vtimes == '1' ? 'percentage' : ''"
+                                            @click="
+                                                row.vtimes == '1' ? detailClick(row, '谐波电压(%)', 'vtimesList') : ''
+                                            "
+                                        >
+                                            {{ row.vtimes == '1' ? '越限' : '合格' }}
+                                        </el-link>
+                                    </template>
+                                </vxe-column>
+                                <vxe-column field="itimes" title="谐波电流(A)" min-width="110px">
+                                    <template #default="{ row }">
+                                        <el-link
+                                            :type="row.itimes == '1' ? 'danger' : 'success'"
+                                            :class="row.itimes == '1' ? 'percentage' : ''"
+                                            @click="
+                                                row.itimes == '1' ? detailClick(row, '谐波电流(A)', 'itimestList') : ''
+                                            "
+                                        >
+                                            {{ row.itimes == '1' ? '越限' : '合格' }}
+                                        </el-link>
+                                    </template>
+                                </vxe-column>
+                                <vxe-column field="ubalance" title="三相电压不平衡度(%)" min-width="150px">
+                                    <template #default="{ row }">
+                                        <el-link
+                                            :type="row.ubalance == '1' ? 'danger' : 'success'"
+                                            :class="row.ubalance == '1' ? 'percentage' : ''"
+                                            @click="
+                                                row.ubalance == '1'
+                                                    ? detailClick(row, '三相电压不平衡度(%)', 'ubalanceList')
+                                                    : ''
+                                            "
+                                        >
+                                            {{ row.ubalance == '1' ? '越限' : '合格' }}
+                                        </el-link>
+                                    </template>
+                                </vxe-column>
+                                <vxe-column field="voltageFluctuation" title="电压波动(%)" min-width="110px">
+                                    <template #default="{ row }">
+                                        <el-link
+                                            :type="row.voltageFluctuation == '1' ? 'danger' : 'success'"
+                                            :class="row.voltageFluctuation == '1' ? 'percentage' : ''"
+                                            @click="
+                                                row.voltageFluctuation == '1'
+                                                    ? detailClick(row, '电压波动(%)', 'voltageFluctuationList')
+                                                    : ''
+                                            "
+                                        >
+                                            {{ row.voltageFluctuation == '1' ? '越限' : '合格' }}
+                                        </el-link>
+                                    </template>
+                                </vxe-column>
+                                <vxe-column field="flicker" title="长时闪变" min-width="110px">
+                                    <template #default="{ row }">
+                                        <el-link
+                                            :type="row.flicker == '1' ? 'danger' : 'success'"
+                                            :class="row.flicker == '1' ? 'percentage' : ''"
+                                            @click="
+                                                row.flicker == '1' ? detailClick(row, '长时闪变', 'flickerList') : ''
+                                            "
+                                        >
+                                            {{ row.flicker == '1' ? '越限' : '合格' }}
+                                        </el-link>
+                                    </template>
+                                </vxe-column>
+                                <vxe-column field="interHarmonic" title="间谐波电压含有率(%)" min-width="150px">
+                                    <template #default="{ row }">
+                                        <el-link
+                                            :type="row.interHarmonic == '1' ? 'danger' : 'success'"
+                                            :class="row.interHarmonic == '1' ? 'percentage' : ''"
+                                            @click="
+                                                row.interHarmonic == '1'
+                                                    ? detailClick(row, '间谐波电压含有率(%)', 'interHarmonicList')
+                                                    : ''
+                                            "
+                                        >
+                                            {{ row.interHarmonic == '1' ? '越限' : '合格' }}
+                                        </el-link>
+                                    </template>
+                                </vxe-column>
+                                <vxe-column field="sequenceCurrentUnbalance" title="电流不平衡度(%)" min-width="130px">
+                                    <template #default="{ row }">
+                                        <el-link
+                                            :type="row.sequenceCurrentUnbalance == '1' ? 'danger' : 'success'"
+                                            :class="row.sequenceCurrentUnbalance == '1' ? 'percentage' : ''"
+                                            @click="
+                                                row.sequenceCurrentUnbalance == '1'
+                                                    ? detailClick(
+                                                          row,
+                                                          '电流不平衡度(%)',
+                                                          'sequenceCurrentUnbalanceList'
+                                                      )
+                                                    : ''
+                                            "
+                                        >
+                                            {{ row.sequenceCurrentUnbalance == '1' ? '越限' : '合格' }}
+                                        </el-link>
+                                    </template>
+                                </vxe-column>
+
+                                <vxe-column field="num3" fixed="right" title="操作" width="80">
+                                    <template #default="{ row }">
+                                        <el-button type="primary" link @click="addTo(row)">添加</el-button>
+                                    </template>
+                                </vxe-column>
+                            </vxe-table>
+                        </div>
+                    </el-card>
+
+                    <el-card class="box">
+                        <template #header>
+                            <div style="display: flex; justify-content: space-between">
+                                <div class="card-header">
+                                    <span>报告参数</span>
+                                </div>
+                                <el-button icon="el-icon-Download" size="small" type="primary" @click="generateReports">
+                                    生成报表
+                                </el-button>
+                            </div>
+                        </template>
+
+                        <div :style="heightB" style="overflow-y: auto">
+                            <div>
+                                <el-tree style="max-width: 600px" :data="dataSource" node-key="id" default-expand-all>
+                                    <template #default="{ node, data }">
+                                        <span class="custom-tree-node">
+                                            <span :style="data.level != 0 ? 'color: var(--el-color-primary)' : ''">
+                                                {{ data.time }}
+                                            </span>
+                                            <Close
+                                                v-if="data.level != 0"
+                                                style="margin-left: 5px; height: 14px"
+                                                @click="remove(node, data)"
+                                            />
+                                        </span>
+                                    </template>
+                                </el-tree>
+                            </div>
+                        </div>
+                    </el-card>
+                </div>
+            </pane>
+        </splitpanes>
+        <!-- 时间弹框 -->
+        <timePopUpBox
+            v-if="timePopUpBox"
+            ref="timePopUpBoxRef"
+            :timePopUpBox="timePopUpBox"
+            @close="timePopUpBox = null"
+        />
+        <!-- 越限详情 -->
+        <detail ref="detailRef" />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, provide } from 'vue'
+import 'splitpanes/dist/splitpanes.css'
+import { Splitpanes, Pane } from 'splitpanes'
+import TableStore from '@/utils/tableStore'
+import PointTree from '@/components/tree/pqs/pointTree.vue'
+import TableHeader from '@/components/table/header/index.vue'
+import { useDictData } from '@/stores/dictData'
+import { mainHeight } from '@/utils/layout'
+import { defaultAttribute } from '@/components/table/defaultAttribute'
+import MyEchart from '@/components/echarts/MyEchart.vue'
+import TimePopUpBox from './components/timePopUpBox.vue'
+import { ElMessage } from 'element-plus'
+import {
+    getDataByLineId,
+    getTargetLimitById,
+    exportExcelRangTemplate,
+    exportExcelListTemplate
+} from '@/api/harmonic-boot/newEnergyAnalysis'
+import detail from './components/detail.vue'
+import { Close } from '@element-plus/icons-vue'
+defineOptions({
+    name: 'newEnergy/newEnergyAnalysis'
+})
+const timePopUpBox = ref<anyObj | null>(null)
+const flag = ref('0%~10%')
+const value1 = ref('0%~10%')
+
+const options1 = [
+    '0%~10%',
+    '10%~20%',
+    '20%~30%',
+    '30%~40%',
+    '40%~50%',
+    '50%~60%',
+    '60%~70%',
+    '70%~80%',
+    '80%~90%',
+    '90%~100%'
+]
+const height = mainHeight(20)
+const heightB = mainHeight(445)
+const size = ref(0)
+const TableHeaderRef = ref()
+const detailRef = ref()
+const dotList: any = ref({})
+const loading = ref(false)
+const timePopUpBoxRef = ref()
+const index = ref(0)
+const treeList = ref([])
+const powerList1: any = ref([
+    {
+        label: '0%~10%',
+        quantity: '0',
+        percentage: '10%',
+        crossTheLine: '越限',
+        value: '0%~10%'
+    },
+    {
+        label: '10%~20%',
+        quantity: '0',
+        percentage: '10%',
+        crossTheLine: '合格',
+        value: '10%~20%'
+    },
+    {
+        label: '20%~30%',
+        quantity: '0',
+        percentage: '10%',
+        crossTheLine: '合格',
+        value: '20%~30%'
+    },
+    {
+        label: '30%~40%',
+        quantity: '0',
+        percentage: '10%',
+        crossTheLine: '合格',
+        value: '30%~40%'
+    },
+    {
+        label: '40%~50%',
+        quantity: '0',
+        percentage: '10%',
+        crossTheLine: '合格',
+        value: '40%~50%'
+    }
+])
+const powerList2: any = ref([
+    {
+        label: '50%~60%',
+        quantity: '0',
+        percentage: '10%',
+        crossTheLine: '合格',
+        value: '50%~60%'
+    },
+    {
+        label: '60%~70%',
+        quantity: '0',
+        percentage: '10%',
+        crossTheLine: '合格',
+        value: '60%~70%'
+    },
+    {
+        label: '70%~80%',
+        quantity: '0',
+        percentage: '10%',
+        crossTheLine: '合格',
+        value: '70%~80%'
+    },
+    {
+        label: '80%~90%',
+        quantity: '0',
+        percentage: '10%',
+        crossTheLine: '越限',
+        value: '80%~90%'
+    },
+    {
+        label: '90%~100%',
+        quantity: '20',
+        percentage: '10%',
+        crossTheLine: '越限',
+        value: '90%~100%'
+    }
+])
+
+const tableData: any = ref([])
+const dataSource: any = ref([
+    {
+        id: 1,
+        level: 0,
+        time: '0%~10%',
+        children: []
+    },
+    {
+        id: 2,
+        level: 0,
+        time: '10%~20%',
+        children: []
+    },
+    {
+        id: 3,
+        level: 0,
+        time: '20%~30%',
+        children: []
+    },
+    {
+        id: 4,
+        level: 0,
+        time: '30%~40%',
+        children: []
+    },
+    {
+        id: 5,
+        level: 0,
+        time: '40%~50%',
+        children: []
+    },
+    {
+        id: 6,
+        level: 0,
+        time: '50%~60%',
+        children: []
+    },
+    {
+        id: 7,
+        level: 0,
+        time: '60%~70%',
+        children: []
+    },
+    {
+        id: 8,
+        level: 0,
+        time: '70%~80%',
+        children: []
+    },
+    {
+        id: 9,
+        level: 0,
+        time: '80%~90%',
+        children: []
+    },
+    {
+        id: 10,
+        level: 0,
+        time: '90%~100%',
+        children: []
+    }
+])
+// 添加树
+const addTo = (row: any) => {
+    // console.log("🚀 ~ addTo ~ uniqueObjectsByJSON([...dataSource.value[index.value].children, row]):", uniqueObjectsByJSON([...dataSource.value[index.value].children, row])[0].time)
+    let list = JSON.parse(JSON.stringify(dataSource.value[index.value].children))
+    dataSource.value[index.value].children = uniqueObjectsByJSON([...list, row])
+}
+// 树去重
+const uniqueObjectsByJSON = (arr: any) => {
+    const seen = new Set()
+    return arr.filter((item: any) => {
+        const str = JSON.stringify(item)
+        if (!seen.has(str)) {
+            seen.add(str)
+            return true
+        }
+        return false
+    })
+}
+
+// 树删除
+const remove = (node: any, data: any) => {
+    const parent = node.parent
+    const children = parent.data.children || parent.data
+    const index = children.findIndex(d => d.id === data.id)
+    children.splice(index, 1)
+    dataSource.value = [...dataSource.value]
+}
+const options = ref({})
+const tableStore = new TableStore({
+    url: '/harmonic-boot/powerStatistics/getDataByLineId',
+    method: 'POST',
+    column: [],
+    beforeSearchFun: () => {
+        treeList.value = dotList.value
+
+        tableStore.table.params.lineId = dotList.value.id
+        tableStore.table.params.searchBeginTime = TableHeaderRef.value.datePickerRef.timeValue[0]
+        tableStore.table.params.searchEndTime = TableHeaderRef.value.datePickerRef.timeValue[1]
+    },
+    loadCallback: () => {
+        let res = tableStore.table.data
+
+        powerList1.value = [
+            {
+                label: '0%~10%',
+                quantity: res.minsNum0,
+                percentage: res.proportion0 + '%',
+                crossTheLine: res.isOrNot0,
+                value: '0%~10%'
+            },
+            {
+                label: '10%~20%',
+                quantity: res.minsNum1,
+                percentage: res.proportion1 + '%',
+                crossTheLine: res.isOrNot1,
+                value: '10%~20%'
+            },
+            {
+                label: '20%~30%',
+                quantity: res.minsNum2,
+                percentage: res.proportion2 + '%',
+                crossTheLine: res.isOrNot2,
+                value: '20%~30%'
+            },
+            {
+                label: '30%~40%',
+                quantity: res.minsNum3,
+                percentage: res.proportion3 + '%',
+                crossTheLine: res.isOrNot3,
+                value: '30%~40%'
+            },
+            {
+                label: '40%~50%',
+                quantity: res.minsNum4,
+                percentage: res.proportion4 + '%',
+                crossTheLine: res.isOrNot4,
+                value: '40%~50%'
+            }
+        ]
+        powerList2.value = [
+            {
+                label: '50%~60%',
+                quantity: res.minsNum5,
+                percentage: res.proportion5 + '%',
+                crossTheLine: res.isOrNot5,
+                value: '50%~60%'
+            },
+            {
+                label: '60%~70%',
+                quantity: res.minsNum6,
+                percentage: res.proportion6 + '%',
+                crossTheLine: res.isOrNot6,
+                value: '60%~70%'
+            },
+            {
+                label: '70%~80%',
+                quantity: res.minsNum7,
+                percentage: res.proportion7 + '%',
+                crossTheLine: res.isOrNot7,
+                value: '70%~80%'
+            },
+            {
+                label: '80%~90%',
+                quantity: res.minsNum8,
+                percentage: res.proportion8 + '%',
+                crossTheLine: res.isOrNot8,
+                value: '80%~90%'
+            },
+            {
+                label: '90%~100%',
+                quantity: res.minsNum9,
+                percentage: res.proportion9 + '%',
+                crossTheLine: res.isOrNot9,
+                value: '90%~100%'
+            }
+        ]
+        options.value = {
+            legend: {
+                show: false
+            },
+            tooltip: {},
+            xAxis: {
+                show: false
+            },
+            yAxis: {
+                show: false
+            },
+
+            dataZoom: { show: false },
+
+            options: {
+                series: [
+                    {
+                        type: 'pie',
+                        center: ['50%', '52%'],
+                        selectedOffset: 30,
+                        label: {
+                            show: true,
+                            color: '#96A2B5',
+                            lineHeight: 8,
+                            minMargin: 10,
+                            formatter: function (e) {
+                                return '{name|' + e.name + '}{percent|' + e.data.percentage + '}'
+                            },
+                            rich: {
+                                name: {
+                                    fontSize: 12
+                                },
+
+                                percent: {
+                                    fontSize: 14,
+                                    color: '#000',
+                                    padding: [0, 0, 0, 5]
+                                }
+                            }
+                        },
+                        data: [
+                            ...powerList1.value.map(item => {
+                                return { value: item.quantity, name: item.label, percentage: item.percentage }
+                            }),
+                            ...powerList2.value.map(item => {
+                                return { value: item.quantity, name: item.label, percentage: item.percentage }
+                            })
+                        ]
+                    }
+                ]
+            }
+        }
+        dataSource.value = [
+            {
+                id: 1,
+                level: 0,
+                time: '0%~10%',
+                children: []
+            },
+            {
+                id: 2,
+                level: 0,
+                time: '10%~20%',
+                children: []
+            },
+            {
+                id: 3,
+                level: 0,
+                time: '20%~30%',
+                children: []
+            },
+            {
+                id: 4,
+                level: 0,
+                time: '30%~40%',
+                children: []
+            },
+            {
+                id: 5,
+                level: 0,
+                time: '40%~50%',
+                children: []
+            },
+            {
+                id: 6,
+                level: 0,
+                time: '50%~60%',
+                children: []
+            },
+            {
+                id: 7,
+                level: 0,
+                time: '60%~70%',
+                children: []
+            },
+            {
+                id: 8,
+                level: 0,
+                time: '70%~80%',
+                children: []
+            },
+            {
+                id: 9,
+                level: 0,
+                time: '80%~90%',
+                children: []
+            },
+            {
+                id: 10,
+                level: 0,
+                time: '90%~100%',
+                children: []
+            }
+        ]
+
+        analyseList(flag.value, index.value)
+    }
+})
+// 导出区间数据
+const exportData = () => {
+    ElMessage('正在下载中,请稍等...')
+    exportExcelRangTemplate({
+        lineId: dotList.value.id,
+        searchValue: treeList.value?.name + ' 0%-100% 区间数据',
+        searchBeginTime: tableStore.table.params.searchBeginTime,
+        searchEndTime: tableStore.table.params.searchEndTime
+    }).then((res: any) => {
+        let blob = new Blob([res], {
+            type: 'application/vnd.ms-excel'
+        })
+
+        const url = window.URL.createObjectURL(blob)
+        const link = document.createElement('a') // 创建a标签
+        link.href = url
+        link.download = treeList.value?.name + ' 0%-100% 区间数据' // 设置下载的文件名
+        document.body.appendChild(link)
+        link.click() //执行下载
+        document.body.removeChild(link)
+    })
+}
+// 导出报告参数
+const generateReports = () => {
+    let data: any = {
+        lineId: dotList.value.id,
+        searchValue: treeList.value?.name + ' 报告',
+        searchBeginTime: tableStore.table.params.searchBeginTime,
+        searchEndTime: tableStore.table.params.searchEndTime
+    }
+    dataSource.value.forEach((item: any, i: number) => {
+        // item.children
+        data[`time${i}`] = item.children.map((it: any) => it.time)
+    }),
+        exportExcelListTemplate(data).then((res: any) => {
+            let blob = new Blob([res], {
+                type: 'application/vnd.ms-excel'
+            })
+
+            const url = window.URL.createObjectURL(blob)
+            const link = document.createElement('a') // 创建a标签
+            link.href = url
+            link.download = treeList.value?.name + ' 报告' // 设置下载的文件名
+            document.body.appendChild(link)
+            link.click() //执行下载
+            document.body.removeChild(link)
+        })
+}
+
+// 点击时间
+const timeClick = (row: any) => {
+    let data = { ...row, field: index.value, lineId: dotList.value.id }
+    timePopUpBox.value = data
+}
+// 点击越限
+const detailClick = (row: any, title: string, key: string) => {
+    console.log('🚀 ~ detailClick ~ row:', row)
+    detailRef.value.open({
+        row: row,
+        title: title,
+        key: key
+    })
+}
+// // 获取有功功率趋势分析数据
+// const analyse = (e: any) => {
+//     getDataByLineId({
+//         lineId: e.id,
+//         searchBeginTime: tableStore.table.params.searchBeginTime,
+//         searchEndTime: tableStore.table.params.searchEndTime
+//     }).then(res => {})
+// }
+// 功率列表
+const analyseList = (e: string, i: number) => {
+    flag.value = e
+    index.value = i
+    loading.value = true
+    getTargetLimitById({
+        lineId: dotList.value.id,
+        searchBeginTime: tableStore.table.params.searchBeginTime,
+        searchEndTime: tableStore.table.params.searchEndTime,
+        field: i
+    })
+        .then(res => {
+            loading.value = false
+            tableData.value = res.data
+        })
+        .catch(() => {
+            loading.value = false
+        })
+}
+
+provide('tableStore', tableStore)
+
+onMounted(() => {
+    const dom = document.getElementById('navigation-splitpanes')
+    if (dom) {
+        size.value = Math.round((180 / dom.offsetHeight) * 100)
+    }
+})
+
+const handleNodeClick = (data: any, node: any) => {
+    console.log('🚀 ~ handleNodeClick ~ data:', data)
+    if (data.level == 6) {
+        dotList.value = data
+        // dotList.value.id = '6469e77fda42db12c7ca6620a092f03c1'
+        tableStore.index()
+    }
+}
+</script>
+<style lang="scss">
+.splitpanes.default-theme .splitpanes__pane {
+    background: #eaeef1;
+}
+.cardBox {
+    .el-card__body {
+        padding: 5px 10px 10px;
+    }
+}
+.box {
+    .el-card__body {
+        padding: 10px;
+    }
+}
+.container {
+    display: grid;
+    grid-template-columns: 5fr 2.5fr;
+    gap: 10px;
+    .card-top {
+        background-color: var(--el-color-primary-light-9);
+        // color: #fff;
+        .el-card__body {
+            display: grid; /* 使用 Grid 布局 */
+            grid-template-columns: repeat(5, 1fr); /* 每行5列，每列占1份空间 */
+            text-align: center;
+            gap: 20px;
+            padding: 10px;
+            .img {
+                vertical-align: middle;
+                height: 16px;
+            }
+        }
+    }
+    .echart {
+        .el-card__body {
+            padding: 5px;
+        }
+    }
+}
+.el-card {
+    border-radius: 10px;
+}
+
+.hoverBox {
+    background-color: var(--el-color-primary-light-5);
+    border-radius: 10px;
+}
+.percentage {
+    text-decoration: underline;
+    text-underline-offset: 0.1em;
+}
+</style>
+<style lang="scss" scoped>
+:deep(.el-card__header) {
+    padding: 10px;
+}
+.card-header {
+    span {
+        font-weight: 600;
+        font-size: 16px;
+    }
+}
+</style>

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

@@ -1,4 +1,3 @@
-<!--业务用户管理界面-->
 <template>
     <div>
         <TableHeader date-picker ref="TableHeaderRef">
@@ -22,7 +21,7 @@
 
             <template v-slot:operation></template>
         </TableHeader>
-        <div class="card-list pt10">
+        <div class="card-list pt10" v-loading="loading">
             <div class="monitoringPoints">
                 <el-card style="height: 200px">
                     <template #header>
@@ -38,9 +37,9 @@
                                 <span class="divBox_num" style="color: #57bc6e">{{ monitoringPoints.runNum }}</span>
                             </div>
                             <div class="divBox" style="width: 200px">
-                                <span class="iconfont icon-igw-f-warning-data" style="color: #fca955"></span>
+                                <span class="iconfont icon-igw-f-warning-data" style="color: #ff6600"></span>
                                 <span class="divBox_title">异常测点数</span>
-                                <span class="divBox_num" style="color: #fca955">
+                                <span class="divBox_num" style="color: #ff6600">
                                     {{ monitoringPoints.abnormalNum }}
                                 </span>
                             </div>
@@ -67,7 +66,14 @@
                         </div>
                     </template>
                     <div class="mb5" style="height: 40px">
-                        <el-segmented style="height: 100%" v-model="segmented" :options="segmentedList" block />
+                        <el-segmented style="height: 100%" v-model="segmented" :options="segmentedList" block>
+                            <template #default="scope">
+                                <div >
+                                    <div class="segmentedIcon">0</div>
+                                    <div>{{ scope.item.label }}</div>
+                                </div>
+                            </template>
+                        </el-segmented>
                     </div>
                     <div class="header">
                         <span style="width: 170px; text-align: left">指标名称</span>
@@ -77,7 +83,7 @@
                     <div :style="indicatorHeight" style="overflow-y: auto">
                         <div v-for="o in abnormal" class="abnormal mb10">
                             <span style="width: 170px; height: 24px" class="iconDiv">
-                                <div :style="{ backgroundColor: o.ids.length > 0 ? '#ff9800' : '' }"></div>
+                                <div :style="{ backgroundColor: o.ids.length > 0 ? '#FF9100' : '' }"></div>
                                 {{ o.targetName }}
                             </span>
                             <span style="flex: 1; text-align: center">
@@ -86,9 +92,10 @@
                             </span>
                             <span style="width: 90px; text-align: center">
                                 <span
-                                    style="color: #ff9800; cursor: pointer; text-decoration: underline"
+                                    style="color: #388e3c"
+                                    :class="` ${o.ids.length > 0 ? 'text-red' : ''}`"
                                     class="text"
-                                    @click="quantityClick(o)"
+                                    @click="quantityClick(o, 0)"
                                 >
                                     {{ o.ids.length }}
                                 </span>
@@ -130,7 +137,58 @@
                     </el-form-item>
                 </el-form>
                 <!--表格-->
-                <Table ref="tableRef"></Table>
+                <div :style="{ height: tableStore.table.height }" v-loading="tableStore.table.loading">
+                    <vxe-table height="auto" :data="tableStore.table.data" v-bind="defaultAttribute" ref="tableRef">
+                        <vxe-column type="seq" title="序号" width="80px">
+                            <template #default="{ rowIndex }">
+                                <span>
+                                    {{
+                                        (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize +
+                                        rowIndex +
+                                        1
+                                    }}
+                                </span>
+                            </template>
+                        </vxe-column>
+                        <vxe-column field="monitorName" title="监测点名称">
+                            <template #default="{ row }">
+                                <span class="table_name">
+                                    {{ row.monitorName }}
+                                </span>
+                            </template>
+                        </vxe-column>
+                        <vxe-column field="devName" title="所属终端名称">
+                            <template #default="{ row }">
+                                <span class="table_name">
+                                    {{ row.devName }}
+                                </span>
+                            </template>
+                        </vxe-column>
+                        <vxe-column field="stationName" title="所属电站">
+                            <template #default="{ row }">
+                                <span class="table_name">
+                                    {{ row.stationName }}
+                                </span>
+                            </template>
+                        </vxe-column>
+                        <vxe-column field="objType" title="监测对象类型" :formatter="formatter"></vxe-column>
+                        <vxe-column field="objName" title="监测对象名称" :formatter="formatter"></vxe-column>
+                        <vxe-column field="voltageLevel" title="电压等级"></vxe-column>
+                        <vxe-column field="abnormalDay" title="异常天数">
+                            <template #default="{ row }">
+                                <span class="table_name" @click="quantityClick(row, 1)">
+                                    {{ row.abnormalDay }}
+                                </span>
+                            </template>
+                        </vxe-column>
+                        <vxe-column field="abnormalDay" title="严重度">
+                            <template #default="{ row }">
+                                <el-tag type="warning" v-if="row.severity == 0">预警</el-tag>
+                                <el-tag type="danger" v-if="row.severity == 1">告警</el-tag>
+                            </template>
+                        </vxe-column>
+                    </vxe-table>
+                </div>
             </el-card>
         </div>
         <anomalyDetails ref="anomalyDetailsRef" />
@@ -142,6 +200,7 @@ import TableStore from '@/utils/tableStore'
 import Table from '@/components/table/index.vue'
 import TableHeader from '@/components/table/header/index.vue'
 import { onMounted, provide, ref } from 'vue'
+import { defaultAttribute } from '@/components/table/defaultAttribute'
 import { useDictData } from '@/stores/dictData'
 import { mainHeight } from '@/utils/layout'
 import MyEchart from '@/components/echarts/MyEchart.vue'
@@ -153,30 +212,31 @@ const anomalyDetailsRef = ref()
 const dictData = useDictData()
 //字典获取监督对象类型
 const objTypeList: any = ref([])
-const pageHeight = mainHeight(155)
+const pageHeight = mainHeight(157)
 const indicatorHeight = mainHeight(507)
-const tableRef = ref()
 const monitoringPoints = ref({
     runNum: 0,
     abnormalNum: 0
 })
-
+const tableRef = ref()
 const percentage = ref({})
+const loading = ref(false)
 const TableHeaderRef = ref()
 const abnormal: any = ref([])
 const mapList: any = ref([])
 const segmented = ref(1)
+const time = ref(['', ''])
 const segmentedList = [
     {
-        label: '基础数据',
+        label: '基础指标',
         value: 1
     },
     {
-        label: '稳态数据',
+        label: '稳态指标',
         value: 2
     },
     {
-        label: '暂态数据',
+        label: '暂态指标',
         value: 3
     }
 ]
@@ -184,87 +244,13 @@ const tableStore = new TableStore({
     url: '/device-boot/dataVerify/getMonitorVerifyData',
     method: 'POST',
     showPage: false,
-    filename: '异常数据',
+    filename: '异常数据统计',
     publicHeight: 530,
-    column: [
+    column: [],
-        {
+    beforeSearchFun: () => {
-            title: '序号',
+        loading.value = true
-            width: 80,
+        time.value = [tableStore.table.params.startTime, tableStore.table.params.endTime]
-            formatter: (row: any) => {
+    },
-                return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
-            }
-        },
-        {
-            title: '监测点名称',
-            field: 'monitorName',
-            type: 'html',
-            formatter: (row, column) => {
-                return `<div class="table_name">${row.cellValue}</div>`
-            }
-        },
-        {
-            title: '所属终端名称',
-            field: 'devName',
-            type: 'html',
-            formatter: (row, column) => {
-                return `<div class="table_name">${row.cellValue}</div>`
-            }
-        },
-        {
-            title: '所属电站',
-            field: 'stationName',
-            type: 'html',
-            formatter: (row, column) => {
-                return `<div class="table_name">${row.cellValue}</div>`
-            }
-        },
-        {
-            title: '监测对象类型',
-            field: 'objType'
-        },
-        {
-            title: '监测对象名称',
-            field: 'objName'
-        },
-        { title: '电压等级', field: 'voltageLevel' },
-        {
-            title: '异常天数',
-            field: 'abnormalDay',
-            type: 'html',
-            formatter: (row, column) => {
-                return `<div class="table_name">${row.cellValue}</div>`
-            }
-        },
-        {
-            title: '严重度',
-            field: 'severity',
-            render: 'tag',
-            custom: {
-                0: 'warning',
-                1: 'danger'
-            },
-
-            replaceValue: {
-                0: '预警',
-                1: '告警'
-            }
-        },
-        // {
-        //     title: '操作',
-        //     width: '120',
-        //     render: 'buttons',
-        //     buttons: [
-        //         {
-        //             name: 'edit',
-        //             title: '工单',
-        //             type: 'primary',
-        //             icon: 'el-icon-Plus',
-        //             render: 'basicButton',
-        //             click: row => {}
-        //         }
-        //     ]
-        // }
-    ],
     loadCallback: () => {
         // console.log('🚀 ~   abnormal.value:', tableStore.table.data)
         monitoringPoints.value.runNum = tableStore.table.data.runNum //总数
@@ -275,13 +261,14 @@ const tableStore = new TableStore({
         tableStore.table.data = tableStore.table.data.monitorAlarmInfo
 
         echart()
+        loading.value = false
     }
 })
 
 const options = ref({})
 const echart = () => {
     percentage.value = {
-        color: ['#ff9800'],
+        color: ['#FF9100'],
         options: {
             dataZoom: null,
             toolbox: {
@@ -312,13 +299,42 @@ const echart = () => {
 
             series: [
                 {
-                    name: '异常占比',
+                    name: '异常总数',
                     type: 'bar',
                     barWidth: 12,
-                    data: [((monitoringPoints.value.abnormalNum / monitoringPoints.value.runNum) * 100).toFixed(2)],
+                    data: [100],
+                    z: 0,
+                    zlevel: 0,
+                    itemStyle: {
+                        normal: {
+                            color: {
+                                type: 'linear',
+                                x: 0,
+                                y: 0,
+                                x2: 1,
+                                y2: 0,
+                                colorStops: [
+                                    {
+                                        offset: 1,
+                                        color: '#57bc6e' // 100% 处的颜色
+                                    }
+                                ],
+                                global: false // 缺省为 false
+                            }
+                        }
+                    }
+                },
+                {
+                    name: '异常占比',
+                    type: 'bar',
+                    barWidth: 13,
+                    data: [
+                        (monitoringPoints.value.abnormalNum / monitoringPoints.value.runNum) * 100 == 0
+                            ? ''
+                            : ((monitoringPoints.value.abnormalNum / monitoringPoints.value.runNum) * 100).toFixed(2)
+                    ],
                     z: 0,
                     zlevel: 0,
-
                     itemStyle: {
                         normal: {
                             color: {
@@ -330,11 +346,11 @@ const echart = () => {
                                 colorStops: [
                                     {
                                         offset: 0,
-                                        color: '#FD6E6A' // 0% 处的颜色
+                                        color: '#FF9100' // 0% 处的颜色
                                     },
                                     {
                                         offset: 1,
-                                        color: '#ff9800' // 100% 处的颜色
+                                        color: '#FF9100' // 100% 处的颜色
                                     }
                                 ],
                                 global: false // 缺省为 false
@@ -353,7 +369,7 @@ const echart = () => {
                     // symbolMargin: 300,
                     symbol: 'rect',
                     symbolClip: true,
-                    symbolSize: [2, 15],
+                    symbolSize: [2, 20],
                     symbolPosition: 'start',
                     symbolOffset: [0, 0],
                     data: [100],
@@ -361,9 +377,9 @@ const echart = () => {
                     zlevel: 0
                 },
                 {
-                    name: '机器故障率',
+                    name: '',
                     type: 'bar',
-                    barGap: '-125%',
+                    barGap: '-110%',
                     data: [100],
                     barWidth: 18,
 
@@ -381,7 +397,7 @@ const echart = () => {
     }
     options.value = {
         title: {
-            text: `监测点异常情况(${mapList.value[0].time} ~ ${mapList.value[mapList.value.length - 1].time})`
+            text: `监测点异常统计(${mapList.value[0].time} ~ ${mapList.value[mapList.value.length - 1].time})`
         },
         xAxis: {
             name: '时间',
@@ -405,7 +421,7 @@ const echart = () => {
             name: '数量' // 给X轴加单位
         },
         grid: {},
-
+        color: ['#FF9100'],
         options: {
             series: [
                 {
@@ -426,8 +442,9 @@ tableStore.table.params.objType = ''
 tableStore.table.params.alarmDayLimit = 5
 tableStore.table.params.warnDayLimit = 1
 
-const quantityClick = (e: any) => {
+const quantityClick = (e: any, num: number) => {
-    anomalyDetailsRef.value.open(e)
+    if (num == 0 && e.ids?.length == 0) return
+    anomalyDetailsRef.value.open(e, time.value, num)
 }
 // 更新
 const MonitorVerify = () => {
@@ -438,9 +455,25 @@ const MonitorVerify = () => {
         tableStore.table.loading = false
     })
 }
+const formatter = (row: any) => {
+    return row.cellValue || '/'
+}
 // 导出
 const onExport = () => {
-    tableStore.table.allFlag = true
+    tableRef.value?.exportData({
+        filename: tableStore.table.filename, // 文件名字
+        sheetName: 'Sheet1',
+        type: 'xlsx', //导出文件类型 xlsx 和 csv
+        useStyle: true,
+        data: tableStore.table.data, // 数据源 // 过滤那个字段导出
+        columnFilterMethod: function (column: any) {
+            return !(
+                column.column.title === undefined ||
+                column.column.title === '序号' ||
+                column.column.title === '操作'
+            )
+        }
+    })
 }
 onMounted(() => {
     TableHeaderRef.value.setDatePicker([
@@ -577,7 +610,7 @@ provide('tableStore', tableStore)
     font-weight: 600;
     div:nth-child(2) {
         font-size: 16px;
-        color: #fca955;
+        color: #ff6600;
     }
 }
 
@@ -586,8 +619,26 @@ provide('tableStore', tableStore)
 }
 :deep(.el-segmented__item, ) {
     clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
+    position: relative
 }
 :deep(.el-segmented) {
     clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%);
 }
+.text-red {
+    color: #ff9100 !important;
+    cursor: pointer;
+    text-decoration: underline;
+}
+.segmentedIcon {
+    position: absolute;
+    top: 1px;
+    left: 100px;
+    height: 18px !important;
+    line-height: 19px;
+    padding:  0 4px;
+    font-size: 12px;
+    background: #ff9100;
+    color: #fff;
+    border-radius: 8px;
+}
 </style>

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

@@ -1,7 +1,6 @@
-<!--业务用户管理界面-->
 <template>
     <div>
-        <TableHeader date-picker>
+        <TableHeader date-picker ref="TableHeaderRef">
             <template v-slot:select>
                 <el-form-item label="对象类型">
                     <el-select
@@ -22,7 +21,7 @@
 
             <template v-slot:operation></template>
         </TableHeader>
-        <div class="card-list pt10">
+        <div class="card-list pt10" v-loading="loading">
             <div class="monitoringPoints">
                 <el-card style="height: 200px">
                     <template #header>
@@ -38,9 +37,9 @@
                                 <span class="divBox_num" style="color: #57bc6e">{{ monitoringPoints.runNum }}</span>
                             </div>
                             <div class="divBox" style="width: 200px">
-                                <span class="iconfont icon-yichang" style="color: #ff0000"></span>
+                                <span class="iconfont icon-yichang" style="color: #FFBF00"></span>
                                 <span class="divBox_title">告警测点数</span>
-                                <span class="divBox_num" style="color: #ff0000">
+                                <span class="divBox_num" style="color: #FFBF00">
                                     {{ monitoringPoints.abnormalNum }}
                                 </span>
                             </div>
@@ -66,9 +65,7 @@
                             <span>告警指标统计</span>
                         </div>
                     </template>
-                    <div class="mb5" style="height: 40px">
+
-                        <el-segmented style="height: 100%" v-model="segmented" :options="segmentedList" block />
-                    </div>
                     <div class="header">
                         <span style="flex: 1; text-align: left">指标名称</span>
 
@@ -77,15 +74,16 @@
                     <div :style="indicatorHeight" style="overflow-y: auto">
                         <div v-for="o in abnormal" class="abnormal mb10">
                             <span style="flex: 1; height: 24px" class="iconDiv">
-                                <div :style="{ backgroundColor: o.ids.length > 0 ? '#ff9800' : '' }"></div>
+                                <div :style="{ backgroundColor: o.ids.length > 0 ? '#FFBF00' : '' }"></div>
                                 {{ o.targetName }}
                             </span>
 
                             <span style="width: 110px; text-align: center">
                                 <span
-                                    style="color: #ff9800; cursor: pointer; text-decoration: underline"
+                                    style="color: #388e3c"
+                                    :class="` ${o.ids.length > 0 ? 'text-red' : ''}`"
                                     class="text"
-                                    @click="quantityClick(o)"
+                                    @click="quantityClick(o, 0)"
                                 >
                                     {{ o.ids.length }}
                                 </span>
@@ -122,12 +120,64 @@
                         />
                     </el-form-item>
                     <el-form-item class="form_but">
-                        <el-button type="primary" icon="el-icon-Refresh">更新</el-button>
+                        <el-button type="primary" @click="MonitorVerify" icon="el-icon-Refresh">更新</el-button>
-                        <el-button type="primary" icon="el-icon-Download">导出</el-button>
+                        <el-button type="primary" @click="onExport" icon="el-icon-Download">导出</el-button>
                     </el-form-item>
                 </el-form>
                 <!--表格-->
-                <Table ref="tableRef"></Table>
+                <div :style="{ height: tableStore.table.height }" v-loading="tableStore.table.loading">
+                    <vxe-table height="auto" :data="tableStore.table.data" v-bind="defaultAttribute" ref="tableRef">
+                        <vxe-column type="seq" title="序号" width="80px">
+                            <template #default="{ rowIndex }">
+                                <span>
+                                    {{
+                                        (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize +
+                                        rowIndex +
+                                        1
+                                    }}
+                                </span>
+                            </template>
+                        </vxe-column>
+                        <vxe-column field="monitorName" title="监测点名称">
+                            <template #default="{ row }">
+                                <span class="table_name">
+                                    {{ row.monitorName }}
+                                </span>
+                            </template>
+                        </vxe-column>
+                        <vxe-column field="devName" title="所属终端名称">
+                            <template #default="{ row }">
+                                <span class="table_name">
+                                    {{ row.devName }}
+                                </span>
+                            </template>
+                        </vxe-column>
+                        <vxe-column field="stationName" title="所属电站">
+                            <template #default="{ row }">
+                                <span class="table_name">
+                                    {{ row.stationName }}
+                                </span>
+                            </template>
+                        </vxe-column>
+                        <vxe-column field="objType" title="监测对象类型" :formatter="formatter"></vxe-column>
+                        <vxe-column field="objName" title="监测对象名称" :formatter="formatter"></vxe-column>
+                        <vxe-column field="voltageLevel" title="电压等级"></vxe-column>
+                        <vxe-column field="abnormalDay" title="告警天数">
+                            <template #default="{ row }">
+                                <span class="table_name" @click="quantityClick(row, 1)">
+                                    {{ row.abnormalDay }}
+                                </span>
+                            </template>
+                        </vxe-column>
+                        <vxe-column field="abnormalDay" title="严重度">
+                            <template #default="{ row }">
+                                <el-tag type="warning" v-if="row.severity == 0">预警</el-tag>
+                                <el-tag type="danger" v-if="row.severity == 1">告警</el-tag>
+                            </template>
+                        </vxe-column>
+                    </vxe-table>
+                </div>
+                <!-- <Table ref="tableRef"></Table> -->
             </el-card>
         </div>
         <alarmDetails ref="alarmDetailsRef" />
@@ -139,178 +189,63 @@ import TableStore from '@/utils/tableStore'
 import Table from '@/components/table/index.vue'
 import TableHeader from '@/components/table/header/index.vue'
 import { onMounted, provide, ref } from 'vue'
+import { defaultAttribute } from '@/components/table/defaultAttribute'
 import { useDictData } from '@/stores/dictData'
 import { mainHeight } from '@/utils/layout'
 import MyEchart from '@/components/echarts/MyEchart.vue'
 import alarmDetails from './alarmDetails.vue'
-import { useConfig } from '@/stores/config'
+import { getMonitorLimitDataDay } from '@/api/device-boot/dataVerify'
 import { queryFirstNode } from '@/api/auth'
 
 const alarmDetailsRef = ref()
 const dictData = useDictData()
 //字典获取监督对象类型
 const objTypeList: any = ref([])
-const pageHeight = mainHeight(155)
+const pageHeight = mainHeight(157)
-const indicatorHeight = mainHeight(507)
+const indicatorHeight = mainHeight(462)
-const tableRef = ref()
+
 const monitoringPoints = ref({
     runNum: 0,
     abnormalNum: 0
 })
-
+const tableRef = ref()
 const percentage = ref({})
+const loading = ref(false)
+const TableHeaderRef = ref()
 const abnormal: any = ref([])
+const mapList: any = ref([])
 const segmented = ref(1)
-const segmentedList = [
+const time = ref(['', ''])
-    {
+
-        label: '基础数据',
-        value: 1
-    },
-    {
-        label: '稳态数据',
-        value: 2
-    },
-    {
-        label: '暂态数据',
-        value: 3
-    }
-]
 const tableStore = new TableStore({
-    url: '/device-boot/dataVerify/getMonitorVerifyData',
+    url: '/device-boot/dataVerify/getMonitorLimitData',
     method: 'POST',
     showPage: false,
-    publicHeight: 480,
+    filename: '稳态告警统计',
-    column: [
+    publicHeight: 530,
-        {
+    column: [],
-            title: '序号',
+    beforeSearchFun: () => {
-            width: 80,
+        loading.value = true
-            formatter: (row: any) => {
+        time.value = [tableStore.table.params.startTime, tableStore.table.params.endTime]
-                return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
+    },
-            }
-        },
-        {
-            title: '监测点名称',
-            field: 'monitorName',
-            type: 'html',
-            formatter: (row, column) => {
-                return `<div class="table_name">${row.cellValue}</div>`
-            }
-        },
-        {
-            title: '所属终端名称',
-            field: 'devName',
-            type: 'html',
-            formatter: (row, column) => {
-                return `<div class="table_name">测试终端</div>`
-                // `<div class="table_name">${row.cellValue}</div>`
-            }
-        },
-        {
-            title: '所属电站',
-            field: 'stationName',
-            type: 'html',
-            formatter: (row, column) => {
-                return `<div class="table_name">${row.cellValue}</div>`
-            }
-        },
-        {
-            title: '监测对象类型',
-            field: 'objType',
-            formatter: (row, column) => {
-                return `测试光伏电站`
-            }
-        },
-        {
-            title: '监测对象名称',
-            field: 'objName',
-            formatter: (row, column) => {
-                return `测试对象`
-            }
-        },
-        { title: '电压等级', field: 'voltageLevel' },
-        {
-            title: '告警天数',
-            field: 'abnormalDay',
-            type: 'html',
-            formatter: (row, column) => {
-                return `<div class="table_name">${row.cellValue}</div>`
-            }
-        },
-        {
-            title: '严重度',
-            field: 'severity',
-            render: 'tag',
-            custom: {
-                0: 'warning',
-                1: 'danger'
-            },
-
-            replaceValue: {
-                0: '预警',
-                1: '告警'
-            }
-        },
-        {
-            title: '操作',
-            width: '120',
-            render: 'buttons',
-            buttons: [
-                {
-                    name: 'edit',
-                    title: '工单',
-                    type: 'primary',
-                    icon: 'el-icon-Plus',
-                    render: 'basicButton',
-                    click: row => {}
-                }
-            ]
-        }
-    ],
     loadCallback: () => {
-        console.log('🚀 ~   abnormal.value:', tableStore.table.data)
+        // console.log('🚀 ~   abnormal.value:', tableStore.table.data)
         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
+
         echart()
+        loading.value = false
     }
 })
 
-const options = ref({
+const options = ref({})
-    title: {
-        text: '监测点告警情况(2025-03-01~2025-03-10)'
-    },
-    legend: {
-        show: false
-    },
-    xAxis: {
-        name: '时间',
-
-        axisLine: {
-            show: true
-        },
-
-        data: ['03-01', '03-02', '03-03', '03-04', '03-05', '03-06', '03-07', '03-08', '03-09', '03-10']
-    },
-    yAxis: {
-        name: '数量' // 给X轴加单位
-    },
-    grid: {},
-
-    options: {
-        series: [
-            {
-                name: '告警监测点数量',
-                type: 'bar',
-
-                data: [11, 11, 11, 11, 0, 0, 0, 0, 0, 0]
-            }
-        ]
-    }
-})
 const echart = () => {
     percentage.value = {
-        color: ['#ff9800'],
+        color: ['#FFBF00'],
         options: {
             dataZoom: null,
             toolbox: {
@@ -318,8 +253,8 @@ const echart = () => {
             },
             grid: {
                 top: '0%',
-                left: '2%',
+                left: '0%',
-                right: '2%',
+                right: '0%',
                 bottom: '0%'
             },
             tooltip: {
@@ -340,11 +275,41 @@ const echart = () => {
             ],
 
             series: [
+            {
+                    name: '告警总数',
+                    type: 'bar',
+                    barWidth: 12,
+                    data: [100],
+                    z: 0,
+                    zlevel: 0,
+                    itemStyle: {
+                        normal: {
+                            color: {
+                                type: 'linear',
+                                x: 0,
+                                y: 0,
+                                x2: 1,
+                                y2: 0,
+                                colorStops: [
+                                    {
+                                        offset: 1,
+                                        color: '#57bc6e' // 100% 处的颜色
+                                    }
+                                ],
+                                global: false // 缺省为 false
+                            }
+                        }
+                    }
+                },
                 {
                     name: '告警占比',
                     type: 'bar',
                     barWidth: 12,
-                    data: [((monitoringPoints.value.abnormalNum / monitoringPoints.value.runNum) * 100).toFixed(2)],
+                    data: [
+                        ((monitoringPoints.value.abnormalNum / monitoringPoints.value.runNum) * 100) == 0
+                            ? ''
+                            : ((monitoringPoints.value.abnormalNum / monitoringPoints.value.runNum) * 100).toFixed(2)
+                    ],
                     z: 0,
                     zlevel: 0,
 
@@ -359,11 +324,11 @@ const echart = () => {
                                 colorStops: [
                                     {
                                         offset: 0,
-                                        color: '#ff0007' // 0% 处的颜色
+                                        color: '#FFBF00' // 0% 处的颜色
                                     },
                                     {
                                         offset: 1,
-                                        color: '#E22331' // 100% 处的颜色
+                                        color: '#FFBF00' // 100% 处的颜色
                                     }
                                 ],
                                 global: false // 缺省为 false
@@ -382,7 +347,7 @@ const echart = () => {
                     // symbolMargin: 300,
                     symbol: 'rect',
                     symbolClip: true,
-                    symbolSize: [2, 15],
+                    symbolSize: [2, 20],
                     symbolPosition: 'start',
                     symbolOffset: [0, 0],
                     data: [100],
@@ -390,9 +355,9 @@ const echart = () => {
                     zlevel: 0
                 },
                 {
-                    name: '机器故障率',
+                    name: '',
                     type: 'bar',
-                    barGap: '-125%',
+                    barGap: '-110%',
                     data: [100],
                     barWidth: 18,
 
@@ -408,16 +373,92 @@ const echart = () => {
             ]
         }
     }
+    options.value = {
+        title: {
+            text: `监测点告警统计(${mapList.value[0].time} ~ ${mapList.value[mapList.value.length - 1].time})`
+        },
+        xAxis: {
+            name: '时间',
+            axisLine: {
+                show: true
+            },
+            data: mapList.value.map(item => item.time),
+            axisLabel: {
+                formatter: function (value) {
+                    let time = ''
+                    if (value.slice(-2) == '01') {
+                        time = value
+                    } else {
+                        time = value.slice(5, 10)
+                    }
+                    return time
+                }
+            }
+        },
+        yAxis: {
+            name: '数量' // 给X轴加单位
+        },
+        grid: {},
+        color: ['#FFBF00'],
+        options: {
+            series: [
+                {
+                    name: '告警监测点数量',
+                    type: 'bar',
+
+                    data: mapList.value.map(item => item.val)
+                    // mapList.value.map(item => ({
+                    //     value: [item.time, item.val]
+                    // }))
+                }
+            ]
+        }
+    }
 }
 tableStore.table.params.deptId = dictData.state.area[0].id
 tableStore.table.params.objType = ''
 tableStore.table.params.alarmDayLimit = 5
 tableStore.table.params.warnDayLimit = 1
 
-const quantityClick = (e: any) => {
+const quantityClick = (e: any, num: number) => {
-    alarmDetailsRef.value.open(e)
+    if (num == 0 && e.ids?.length == 0) return
+    alarmDetailsRef.value.open(e, time.value, num)
+}
+// 更新
+const MonitorVerify = () => {
+    tableStore.table.loading = true
+    getMonitorLimitDataDay(tableStore.table.params).then(res => {
+        tableStore.table.data = res.data
+        tableStore.table.allData = res.data
+        tableStore.table.loading = false
+    })
+}
+const formatter = (row: any) => {
+    return row.cellValue || '/'
+}
+// 导出
+const onExport = () => {
+    tableRef.value?.exportData({
+        filename: tableStore.table.filename, // 文件名字
+        sheetName: 'Sheet1',
+        type: 'xlsx', //导出文件类型 xlsx 和 csv
+        useStyle: true,
+        data: tableStore.table.data, // 数据源 // 过滤那个字段导出
+        columnFilterMethod: function (column: any) {
+            return !(
+                column.column.title === undefined ||
+                column.column.title === '序号' ||
+                column.column.title === '操作'
+            )
+        }
+    })
 }
 onMounted(() => {
+    TableHeaderRef.value.setDatePicker([
+        { label: '年份', value: 1 },
+        { label: '季度', value: 2 },
+        { label: '月份', value: 3 }
+    ])
     queryFirstNode({ type: 0 }).then(res => {
         objTypeList.value = res.data
     })
@@ -437,8 +478,9 @@ provide('tableStore', tableStore)
         .statistics {
             display: flex;
             flex-wrap: wrap;
+            justify-content: space-between;
+            margin-bottom: 10px;
             .divBox {
-                margin: 0 10px 10px 0;
                 width: 200px;
                 height: 70px;
                 padding: 10px;
@@ -464,7 +506,7 @@ provide('tableStore', tableStore)
                     background-color: #eef8f0;
                 }
                 &:nth-child(2) {
-                    background-color: #ffd7d7;
+                    background-color: #fff6ed;
                 }
                 &:nth-child(3) {
                     background-color: #e5f8f6;
@@ -546,7 +588,7 @@ provide('tableStore', tableStore)
     font-weight: 600;
     div:nth-child(2) {
         font-size: 16px;
-        color: #ff0000;
+        color: #FFBF00;
     }
 }
 
@@ -559,4 +601,9 @@ provide('tableStore', tableStore)
 :deep(.el-segmented) {
     clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%);
 }
+.text-red {
+    color: #FFBF00 !important;
+    cursor: pointer;
+    text-decoration: underline;
+}
 </style>

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

@@ -1,37 +1,51 @@
 <template>
-    <el-dialog draggable width="1300px" class="cn-operate-dialog" v-model="dialogVisible" :title="title">
+    <el-dialog draggable width="1200px" class="cn-operate-dialog" v-model="dialogVisible" :title="title">
         <div style="display: flex">
+            <div :style="height1" class="mr10 box" style="width: 450px">
+                <vxe-table
+                    height="auto"
+                    :data="TableData"
+                    v-bind="defaultAttribute"
+                    ref="tableRef"
+                    :row-config="{ isCurrent: true, isHover: true }"
+                    @current-change="currentChangeEvent"
+                >
+                    <vxe-column type="seq" title="序号" width="60px"></vxe-column>
+                    <vxe-column field="date" title="日期"></vxe-column>
+                    <vxe-column field="monitorName" title="监测点名称" width="120px"></vxe-column>
+                    <vxe-column field="timeSum" title="告警时间(分钟)" width="80px"></vxe-column>
+                </vxe-table>
+            </div>
 
-                    <div :style="height1" class="mr10" style="width: 450px">
+            <div :style="height" style="width: 720px" v-loading="loading1">
-                        <vxe-table  height="auto" :data="TableData" v-bind="defaultAttribute">
+                <vxe-table
-                            <vxe-column type="seq" title="序号" width="60px"></vxe-column>
+                    height="auto"
-                            <vxe-column field="time" title="日期">
+                    :data="TableData1.slice((pageNum - 1) * pageSize, pageNum * pageSize)"
-                                <template #default="{ row }">
+                    v-bind="defaultAttribute"
-                                    <span class="time">{{ row.time }}</span>
+                >
-                                </template>
+                    <vxe-column type="seq" title="序号" width="80px">
-                            </vxe-column>
+                        <template #default="{ rowIndex }">
-                            <vxe-column field="name" title="监测点名称" width="120px"></vxe-column>
+                            <span>{{ (pageNum - 1) * pageSize + rowIndex + 1 }}</span>
-                            <vxe-column field="fz" title="告警时间(分钟)" width="80px"></vxe-column>
+                        </template>
-                        </vxe-table>
+                    </vxe-column>
-                    </div>
+                    <vxe-column field="time" title="时间" width="150px"></vxe-column>
+                    <vxe-column field="targetName" title="指标类型" min-width="100px"></vxe-column>
+                    <vxe-column field="phaseType" title="相别" width="60px"></vxe-column>
 
-            <el-tabs v-model="activeName" type="border-card" style="width: 820px">
+                    <vxe-column field="type" title="数据类型" width="105px" :formatter="formatter1"></vxe-column>
-                <el-tab-pane :label="`变电站1 > 测试监测点1_告警指标详情`" name="first">
+                    <vxe-column field="val" title="值" width="85px" :formatter="formatter"></vxe-column>
-                    <div :style="height">
+                </vxe-table>
-                        <vxe-table height="auto" :data="TableData1" v-bind="defaultAttribute">
+                <div class="table-pagination">
-                            <vxe-column type="seq" title="序号" width="60px"></vxe-column>
+                    <el-pagination
-                            <vxe-column field="time" title="时间" min-width="120px"></vxe-column>
+                        v-model:currentPage="pageNum"
-                            <vxe-column field="indexType" title="指标类型" min-width="100px"></vxe-column>
+                        v-model:page-size="pageSize"
-                            <vxe-column field="phase" title="相别" width="60px"></vxe-column>
+                        :page-sizes="[10, 20, 50, 100, 200]"
-                            <vxe-column field="range" title="合理范围" min-width="60px"></vxe-column>
+                        background
-                            <vxe-column field="max" title="最大" width="60px"></vxe-column>
+                        layout="sizes,total, ->, prev, pager, next, jumper"
-                            <vxe-column field="min" title="最小" width="60px"></vxe-column>
+                        :total="TableData1.length"
-                            <vxe-column field="average" title="平均" width="60px"></vxe-column>
+                    ></el-pagination>
-                            <vxe-column field="cp95" title="CP95" width="60px"></vxe-column>
+                </div>
-                        </vxe-table>
+            </div>
-                    </div>
-                </el-tab-pane>
-            </el-tabs>
         </div>
     </el-dialog>
 </template>
@@ -40,139 +54,79 @@ import { ref, inject } from 'vue'
 import { reactive } from 'vue'
 import { defaultAttribute } from '@/components/table/defaultAttribute'
 import { ElMessage } from 'element-plus'
-import TableStore from '@/utils/tableStore' // 若不是列表页面弹框可删除
+import { monitorLimitTable, monitorLimitTableDetail } from '@/api/device-boot/dataVerify'
 import { mainHeight } from '@/utils/layout'
 const dialogVisible = ref(false)
 const height1 = mainHeight(-110, 2)
 const height = mainHeight(10, 2)
+const tableRef = ref()
 const title = ref('')
-const activeName = 'first'
+const loading1 = ref(false)
-const TableData = ref([
+const TableData = ref([])
-    {
+const TableData1 = ref([])
-        time: '2025-01-01',
+const pageNum = ref(1)
-        name: '测试监测点1',
+const pageSize = ref(20)
-        fz: 100
+const numKey = ref(0)
-    },
+const targetKey = ref('')
-    {
+const open = (data: anyObj, time: string[], num: number) => {
-        time: '2025-01-01',
+    // title.value = (num == 0 ? data.targetName : data.monitorName) + '_告警详情展示'
-        name: '测试监测点2',
+    title.value = '告警监测点详情'
-        fz: 100
+    numKey.value = num
-    },
+    targetKey.value = data.key
-    {
+    TableData.value = []
-        time: '2025-01-01',
+    monitorLimitTable({
-        name: '测试监测点3',
+        monitorIds: num == 0 ? data.ids : [data.monitorId],
-        fz: 100
+        targetKey: num == 0 ? data.key : '',
-    },
+        searchBeginTime: time[0],
-    {
+        searchEndTime: time[1]
-        time: '2025-01-01',
+    }).then(res => {
-        name: '测试监测点4',
+        TableData.value = res.data
-        fz: 100
+        tableRef.value.setCurrentRow(TableData.value[0])
-    }
+        currentChangeEvent()
-])
+    })
-const TableData1 = ref([
-    {
-        num: 1,
-        time: '2025/01/01 11:10:00',
-        indexType: '频率',
-        phase: 'T',
-        range: '42.5~57.5',
-        max: '/',
-        min: '/',
-        average: 60,
-        cp95: '/'
-    },
-    {
-        num: 2,
-        time: '2025/01/01 11:20:00',
-        indexType: '频率',
-        phase: 'T',
-        range: '42.5~57.5',
-        max: '/',
-        min: '/',
-        average: 60,
-        cp95: '/'
-    },
-    {
-        num: 3,
-        time: '2025/01/01 11:30:00',
-        indexType: '频率',
-        phase: 'T',
-        range: '42.5~57.5',
-        max: 65,
-        min: 60,
-        average: 62,
-        cp95: 61
-    },
-    {
-        num: 4,
-        time: '2025/01/01 11:40:00',
-        indexType: '频率',
-        phase: 'T',
-        range: '42.5~57.5',
-        max: 65,
-        min: 60,
-        average: 62,
-        cp95: 61
-    },
-    {
-        num: 5,
-        time: '2025/01/01 11:50:00',
-        indexType: '相电压',
-        phase: 'A',
-        range: '42.5~57.5',
-        max: '/',
-        min: 290,
-        average: '/',
-        cp95: '/'
-    },
-    {
-        num: 6,
-        time: '2025/01/01 12:10:00',
-        indexType: '相电压',
-        phase: 'B',
-        range: '42.5~57.5',
-        max: 220,
-        min: 290,
-        average: 220,
-        cp95: 220
-    },
-    {
-        num: 7,
-        time: '2025/01/01 12:20:00',
-        indexType: '相电压',
-        phase: 'C',
-        range: '42.5~57.5',
-        max: '/',
-        min: 290,
-        average: '/',
-        cp95: '/'
-    },
-    {
-        num: 8,
-        time: '2025/01/01 12:30:00',
-        indexType: '相电压',
-        phase: 'A',
-        range: '42.5~57.5',
-        max: 220,
-        min: 290,
-        average: 220,
-        cp95: 220
-    }
-])
-
-const open = (data: anyObj) => {
-    title.value = data.targetName + '_告警详情展示'
     dialogVisible.value = true
 }
-
+const currentChangeEvent = () => {
+    loading1.value = true
+    let data = tableRef.value.getCurrentRecord()
+    TableData1.value = []
+    monitorLimitTableDetail({
+        monitorIds: [data.monitorId],
+        searchBeginTime: data.date,
+        targetKey: numKey.value == 0 ? targetKey.value : ''
+    })
+        .then(res => {
+            TableData1.value = res.data
+            loading1.value = false
+            pageNum.value = 1
+        })
+        .catch(() => {
+            loading1.value = false
+        })
+}
+const formatter1 = (row: any) => {
+    return row.cellValue == null ? '/' : row.cellValue
+}
+const formatter = (row: any) => {
+    return row.cellValue == null ? '/' : (row.cellValue - 0).toFixed(2)
+}
 defineExpose({ open })
 </script>
 <style lang="scss" scoped>
-.time {
+.table-pagination {
-    color: var(--el-color-primary);
+    height: 58px;
-    cursor: pointer;
+    box-sizing: border-box;
-    text-decoration: underline;
+    width: 100%;
-    text-underline-offset: 4px;
+    max-width: 100%;
+    background-color: var(--ba-bg-color-overlay);
+    padding: 13px 15px;
+    border-left: 1px solid #e4e7e9;
+    border-right: 1px solid #e4e7e9;
+    border-bottom: 1px solid #e4e7e9;
+}
+:deep(.box) {
+    .row--current {
+        background-color: var(--el-color-primary-light-8) !important;
+    }
 }
-
 </style>

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

@@ -1,37 +1,53 @@
 <template>
-    <el-dialog draggable width="1300px" class="cn-operate-dialog" v-model="dialogVisible" :title="title">
+    <el-dialog draggable width="1400px" class="cn-operate-dialog" v-model="dialogVisible" :title="title">
         <div style="display: flex">
+            <div :style="height1" class="mr10 box" style="width: 450px">
+                <vxe-table
+                    height="auto"
+                    :data="TableData"
+                    v-bind="defaultAttribute"
+                    ref="tableRef"
+                    :row-config="{ isCurrent: true, isHover: true }"
+                    @current-change="currentChangeEvent"
+                >
+                    <vxe-column type="seq" title="序号" width="60px"></vxe-column>
+                    <vxe-column field="date" title="日期"></vxe-column>
+                    <vxe-column field="monitorName" title="监测点名称" width="120px"></vxe-column>
+                    <vxe-column field="timeSum" title="异常时间(分钟)" width="80px"></vxe-column>
+                </vxe-table>
+            </div>
 
-                    <div :style="height1" class="mr10" style="width: 450px">
+            <div :style="height" style="width: 920px" v-loading="loading1">
-                        <vxe-table  height="auto" :data="TableData" v-bind="defaultAttribute">
+                <vxe-table
-                            <vxe-column type="seq" title="序号" width="60px"></vxe-column>
+                    height="auto"
-                            <vxe-column field="time" title="日期">
+                    :data="TableData1.slice((pageNum - 1) * pageSize, pageNum * pageSize)"
-                                <template #default="{ row }">
+                    v-bind="defaultAttribute"
-                                    <span class="time">{{ row.time }}</span>
+                >
-                                </template>
+                    <vxe-column type="seq" title="序号" width="80px">
-                            </vxe-column>
+                        <template #default="{ rowIndex }">
-                            <vxe-column field="name" title="监测点名称" width="120px"></vxe-column>
+                            <span>{{ (pageNum - 1) * pageSize + rowIndex + 1 }}</span>
-                            <vxe-column field="fz" title="异常时间(分钟)" width="80px"></vxe-column>
+                        </template>
-                        </vxe-table>
+                    </vxe-column>
-                    </div>
+                    <vxe-column field="time" title="时间" width="150px"></vxe-column>
-        
+                    <vxe-column field="targetName" title="指标类型" min-width="100px"></vxe-column>
-            <el-tabs v-model="activeName" type="border-card" style="width: 820px">
+                    <vxe-column field="phaseType" title="相别" width="60px"></vxe-column>
-                <el-tab-pane :label="`变电站1 > 测试监测点1_异常指标详情`" name="first">
+                    <vxe-column field="rangeDesc" title="合理范围" min-width="60px"></vxe-column>
-                    <div :style="height">
+                    <vxe-column field="max" title="最大" width="85px" :formatter="formatter"></vxe-column>
-                        <vxe-table height="auto" :data="TableData1" v-bind="defaultAttribute">
+                    <vxe-column field="min" title="最小" width="85px" :formatter="formatter"></vxe-column>
-                            <vxe-column type="seq" title="序号" width="60px"></vxe-column>
+                    <vxe-column field="avg" title="平均" width="85px" :formatter="formatter"></vxe-column>
-                            <vxe-column field="time" title="时间" min-width="120px"></vxe-column>
+                    <vxe-column field="cp95" title="CP95" width="85px" :formatter="formatter"></vxe-column>
-                            <vxe-column field="indexType" title="指标类型" min-width="100px"></vxe-column>
+                </vxe-table>
-                            <vxe-column field="phase" title="相别" width="60px"></vxe-column>
+                <div class="table-pagination">
-                            <vxe-column field="range" title="合理范围" min-width="60px"></vxe-column>
+                    <el-pagination
-                            <vxe-column field="max" title="最大" width="60px"></vxe-column>
+                        v-model:currentPage="pageNum"
-                            <vxe-column field="min" title="最小" width="60px"></vxe-column>
+                        v-model:page-size="pageSize"
-                            <vxe-column field="average" title="平均" width="60px"></vxe-column>
+                        :page-sizes="[10, 20, 50, 100, 200]"
-                            <vxe-column field="cp95" title="CP95" width="60px"></vxe-column>
+                        background
-                        </vxe-table>
+                        layout="sizes,total, ->, prev, pager, next, jumper"
-                    </div>
+                        :total="TableData1.length"
-                </el-tab-pane>
+                    ></el-pagination>
-            </el-tabs>
+                </div>
+            </div>
         </div>
     </el-dialog>
 </template>
@@ -40,139 +56,76 @@ import { ref, inject } from 'vue'
 import { reactive } from 'vue'
 import { defaultAttribute } from '@/components/table/defaultAttribute'
 import { ElMessage } from 'element-plus'
-import TableStore from '@/utils/tableStore' // 若不是列表页面弹框可删除
+import { monitorAbnormalTable, monitorAbnormalTableDetail } from '@/api/device-boot/dataVerify'
 import { mainHeight } from '@/utils/layout'
 const dialogVisible = ref(false)
 const height1 = mainHeight(-110, 2)
 const height = mainHeight(10, 2)
+const tableRef = ref()
 const title = ref('')
-const activeName = 'first'
+const loading1 = ref(false)
-const TableData = ref([
+const TableData = ref([])
-    {
+const TableData1 = ref([])
-        time: '2025-01-01',
+const pageNum = ref(1)
-        name: '测试监测点1',
+const pageSize = ref(20)
-        fz: 100
+const numKey = ref(0)
-    },
+const targetKey = ref('')
-    {
+const open = (data: anyObj, time: string[], num: number) => {
-        time: '2025-01-01',
+    // title.value = (num == 0 ? data.targetName : data.monitorName) + '_异常监测点详情'
-        name: '测试监测点2',
+    title.value ='异常监测点详情'
-        fz: 100
+    TableData.value = []
-    },
+    numKey.value = num
-    {
+    targetKey.value = data.key
-        time: '2025-01-01',
+    monitorAbnormalTable({
-        name: '测试监测点3',
+        monitorIds: num == 0 ? data.ids : [data.monitorId],
-        fz: 100
+        targetKey: num == 0 ? data.key : '',
-    },
+        searchBeginTime: time[0],
-    {
+        searchEndTime: time[1]
-        time: '2025-01-01',
+    }).then(res => {
-        name: '测试监测点4',
+        TableData.value = res.data
-        fz: 100
+        tableRef.value.setCurrentRow(TableData.value[0])
-    }
+        currentChangeEvent()
-])
+    })
-const TableData1 = ref([
-    {
-        num: 1,
-        time: '2025/01/01 11:10:00',
-        indexType: '频率',
-        phase: 'T',
-        range: '42.5~57.5',
-        max: '/',
-        min: '/',
-        average: 60,
-        cp95: '/'
-    },
-    {
-        num: 2,
-        time: '2025/01/01 11:20:00',
-        indexType: '频率',
-        phase: 'T',
-        range: '42.5~57.5',
-        max: '/',
-        min: '/',
-        average: 60,
-        cp95: '/'
-    },
-    {
-        num: 3,
-        time: '2025/01/01 11:30:00',
-        indexType: '频率',
-        phase: 'T',
-        range: '42.5~57.5',
-        max: 65,
-        min: 60,
-        average: 62,
-        cp95: 61
-    },
-    {
-        num: 4,
-        time: '2025/01/01 11:40:00',
-        indexType: '频率',
-        phase: 'T',
-        range: '42.5~57.5',
-        max: 65,
-        min: 60,
-        average: 62,
-        cp95: 61
-    },
-    {
-        num: 5,
-        time: '2025/01/01 11:50:00',
-        indexType: '相电压',
-        phase: 'A',
-        range: '42.5~57.5',
-        max: '/',
-        min: 290,
-        average: '/',
-        cp95: '/'
-    },
-    {
-        num: 6,
-        time: '2025/01/01 12:10:00',
-        indexType: '相电压',
-        phase: 'B',
-        range: '42.5~57.5',
-        max: 220,
-        min: 290,
-        average: 220,
-        cp95: 220
-    },
-    {
-        num: 7,
-        time: '2025/01/01 12:20:00',
-        indexType: '相电压',
-        phase: 'C',
-        range: '42.5~57.5',
-        max: '/',
-        min: 290,
-        average: '/',
-        cp95: '/'
-    },
-    {
-        num: 8,
-        time: '2025/01/01 12:30:00',
-        indexType: '相电压',
-        phase: 'A',
-        range: '42.5~57.5',
-        max: 220,
-        min: 290,
-        average: 220,
-        cp95: 220
-    }
-])
-
-const open = (data: anyObj) => {
-    title.value = data.targetName + '_异常详情展示'
     dialogVisible.value = true
 }
-
+const currentChangeEvent = () => {
+    loading1.value = true
+    let data = tableRef.value.getCurrentRecord()
+    TableData1.value = []
+    monitorAbnormalTableDetail({
+        monitorIds: [data.monitorId],
+        searchBeginTime: data.date,
+        targetKey: numKey.value == 0 ? targetKey.value : ''
+    })
+        .then(res => {
+            TableData1.value = res.data
+            loading1.value = false
+            pageNum.value = 1
+        })
+        .catch(() => {
+            loading1.value = false
+        })
+}
+const formatter = (row: any) => {
+    return row.cellValue == null ? '/' : (row.cellValue - 0).toFixed(2)
+}
 defineExpose({ open })
 </script>
 <style lang="scss" scoped>
-.time {
+.table-pagination {
-    color: var(--el-color-primary);
+    height: 58px;
-    cursor: pointer;
+    box-sizing: border-box;
-    text-decoration: underline;
+    width: 100%;
-    text-underline-offset: 4px;
+    max-width: 100%;
+    background-color: var(--ba-bg-color-overlay);
+    padding: 13px 15px;
+    border-left: 1px solid #e4e7e9;
+    border-right: 1px solid #e4e7e9;
+    border-bottom: 1px solid #e4e7e9;
+}
+:deep(.box) {
+    .row--current {
+        background-color: var(--el-color-primary-light-8) !important;
+    }
 }
-
 </style>

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

@@ -0,0 +1,562 @@
+<!--业务用户管理界面-->
+<template>
+    <div>
+        <TableHeader date-picker>
+            <template v-slot:select>
+                <el-form-item label="对象类型">
+                    <el-select
+                        v-model="tableStore.table.params.objType"
+                        clearable
+                        style="width: 100%"
+                        placeholder="请选择对象类型"
+                    >
+                        <el-option
+                            v-for="item in objTypeList"
+                            :key="item.id"
+                            :label="item.name"
+                            :value="item.id"
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+            </template>
+
+            <template v-slot:operation></template>
+        </TableHeader>
+        <div class="card-list pt10">
+            <div class="monitoringPoints">
+                <el-card style="height: 200px">
+                    <template #header>
+                        <div class="card-header">
+                            <span>监测点统计</span>
+                        </div>
+                    </template>
+                    <div>
+                        <div class="statistics">
+                            <div class="divBox">
+                                <span class="iconfont icon-qiyezongshu" style="color: #57bc6e"></span>
+                                <span class="divBox_title">监测点总数</span>
+                                <span class="divBox_num" style="color: #57bc6e">{{ monitoringPoints.runNum }}</span>
+                            </div>
+                            <div class="divBox" style="width: 200px">
+                                <span class="iconfont icon-yichang" style="color: #ff0000"></span>
+                                <span class="divBox_title">告警测点数</span>
+                                <span class="divBox_num" style="color: #ff0000">
+                                    {{ monitoringPoints.abnormalNum }}
+                                </span>
+                            </div>
+                        </div>
+                        <div class="echartTitle">
+                            <div>告警占比</div>
+                            <div>
+                                {{
+                                    isNaN((monitoringPoints.abnormalNum / monitoringPoints.runNum) * 100)
+                                        ? 0
+                                        : ((monitoringPoints.abnormalNum / monitoringPoints.runNum) * 100).toFixed(2)
+                                }}%
+                            </div>
+                        </div>
+                        <div style="height: 30px">
+                            <MyEchart :options="percentage"></MyEchart>
+                        </div>
+                    </div>
+                </el-card>
+                <el-card class="mt10">
+                    <template #header>
+                        <div class="card-header">
+                            <span>告警指标统计</span>
+                        </div>
+                    </template>
+                    <div class="mb5" style="height: 40px">
+                        <el-segmented style="height: 100%" v-model="segmented" :options="segmentedList" block />
+                    </div>
+                    <div class="header">
+                        <span style="flex: 1; text-align: left">指标名称</span>
+
+                        <span style="width: 110px">告警测点数</span>
+                    </div>
+                    <div :style="indicatorHeight" style="overflow-y: auto">
+                        <div v-for="o in abnormal" class="abnormal mb10">
+                            <span style="flex: 1; height: 24px" class="iconDiv">
+                                <div :style="{ backgroundColor: o.ids.length > 0 ? '#ff9800' : '' }"></div>
+                                {{ o.targetName }}
+                            </span>
+
+                            <span style="width: 110px; text-align: center">
+                                <span
+                                    style="color: #ff9800; cursor: pointer; text-decoration: underline"
+                                    class="text"
+                                    @click="quantityClick(o)"
+                                >
+                                    {{ o.ids.length }}
+                                </span>
+                            </span>
+                        </div>
+                    </div>
+                </el-card>
+            </div>
+            <el-card class="detail ml10" :style="pageHeight">
+                <template #header>
+                    <div class="card-header">
+                        <span>告警详情统计</span>
+                    </div>
+                </template>
+                <div style="height: 350px">
+                    <MyEchart :options="options"></MyEchart>
+                </div>
+                <el-form :inline="true" class="form">
+                    <el-form-item label="告警持续天数"></el-form-item>
+                    <el-form-item label="告警阀值(天)">
+                        <el-input-number
+                            v-model="tableStore.table.params.alarmDayLimit"
+                            :min="0"
+                            :step="1"
+                            step-strictly
+                        />
+                    </el-form-item>
+                    <el-form-item label="预警阀值(天)">
+                        <el-input-number
+                            v-model="tableStore.table.params.warnDayLimit"
+                            :min="0"
+                            :step="1"
+                            step-strictly
+                        />
+                    </el-form-item>
+                    <el-form-item class="form_but">
+                        <el-button type="primary" icon="el-icon-Refresh">更新</el-button>
+                        <el-button type="primary" icon="el-icon-Download">导出</el-button>
+                    </el-form-item>
+                </el-form>
+                <!--表格-->
+                <Table ref="tableRef"></Table>
+            </el-card>
+        </div>
+        <alarmDetails ref="alarmDetailsRef" />
+    </div>
+</template>
+
+<script setup lang="ts">
+import TableStore from '@/utils/tableStore'
+import Table from '@/components/table/index.vue'
+import TableHeader from '@/components/table/header/index.vue'
+import { onMounted, provide, ref } from 'vue'
+import { useDictData } from '@/stores/dictData'
+import { mainHeight } from '@/utils/layout'
+import MyEchart from '@/components/echarts/MyEchart.vue'
+import alarmDetails from './alarmDetails.vue'
+import { useConfig } from '@/stores/config'
+import { queryFirstNode } from '@/api/auth'
+
+const alarmDetailsRef = ref()
+const dictData = useDictData()
+//字典获取监督对象类型
+const objTypeList: any = ref([])
+const pageHeight = mainHeight(155)
+const indicatorHeight = mainHeight(507)
+const tableRef = ref()
+const monitoringPoints = ref({
+    runNum: 0,
+    abnormalNum: 0
+})
+
+const percentage = ref({})
+const abnormal: any = ref([])
+const segmented = ref(1)
+const segmentedList = [
+    {
+        label: '基础数据',
+        value: 1
+    },
+    {
+        label: '稳态数据',
+        value: 2
+    },
+    {
+        label: '暂态数据',
+        value: 3
+    }
+]
+const tableStore = new TableStore({
+    url: '/device-boot/dataVerify/getMonitorVerifyData',
+    method: 'POST',
+    showPage: false,
+    publicHeight: 480,
+    column: [
+        {
+            title: '序号',
+            width: 80,
+            formatter: (row: any) => {
+                return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
+            }
+        },
+        {
+            title: '监测点名称',
+            field: 'monitorName',
+            type: 'html',
+            formatter: (row, column) => {
+                return `<div class="table_name">${row.cellValue}</div>`
+            }
+        },
+        {
+            title: '所属终端名称',
+            field: 'devName',
+            type: 'html',
+            formatter: (row, column) => {
+                return `<div class="table_name">测试终端</div>`
+                // `<div class="table_name">${row.cellValue}</div>`
+            }
+        },
+        {
+            title: '所属电站',
+            field: 'stationName',
+            type: 'html',
+            formatter: (row, column) => {
+                return `<div class="table_name">${row.cellValue}</div>`
+            }
+        },
+        {
+            title: '监测对象类型',
+            field: 'objType',
+            formatter: (row, column) => {
+                return `测试光伏电站`
+            }
+        },
+        {
+            title: '监测对象名称',
+            field: 'objName',
+            formatter: (row, column) => {
+                return `测试对象`
+            }
+        },
+        { title: '电压等级', field: 'voltageLevel' },
+        {
+            title: '告警天数',
+            field: 'abnormalDay',
+            type: 'html',
+            formatter: (row, column) => {
+                return `<div class="table_name">${row.cellValue}</div>`
+            }
+        },
+        {
+            title: '严重度',
+            field: 'severity',
+            render: 'tag',
+            custom: {
+                0: 'warning',
+                1: 'danger'
+            },
+
+            replaceValue: {
+                0: '预警',
+                1: '告警'
+            }
+        },
+        {
+            title: '操作',
+            width: '120',
+            render: 'buttons',
+            buttons: [
+                {
+                    name: 'edit',
+                    title: '工单',
+                    type: 'primary',
+                    icon: 'el-icon-Plus',
+                    render: 'basicButton',
+                    click: row => {}
+                }
+            ]
+        }
+    ],
+    loadCallback: () => {
+        console.log('🚀 ~   abnormal.value:', tableStore.table.data)
+        monitoringPoints.value.runNum = tableStore.table.data.runNum //总数
+        monitoringPoints.value.abnormalNum = tableStore.table.data.abnormalNum //告警测点数
+        abnormal.value = tableStore.table.data.targetList
+        tableStore.table.data = tableStore.table.data.monitorAlarmInfo
+        echart()
+    }
+})
+
+const options = ref({
+    title: {
+        text: '监测点告警情况(2025-03-01~2025-03-10)'
+    },
+    legend: {
+        show: false
+    },
+    xAxis: {
+        name: '时间',
+
+        axisLine: {
+            show: true
+        },
+
+        data: ['03-01', '03-02', '03-03', '03-04', '03-05', '03-06', '03-07', '03-08', '03-09', '03-10']
+    },
+    yAxis: {
+        name: '数量' // 给X轴加单位
+    },
+    grid: {},
+
+    options: {
+        series: [
+            {
+                name: '告警监测点数量',
+                type: 'bar',
+
+                data: [11, 11, 11, 11, 0, 0, 0, 0, 0, 0]
+            }
+        ]
+    }
+})
+const echart = () => {
+    percentage.value = {
+        color: ['#ff9800'],
+        options: {
+            dataZoom: null,
+            toolbox: {
+                show: false
+            },
+            grid: {
+                top: '0%',
+                left: '2%',
+                right: '2%',
+                bottom: '0%'
+            },
+            tooltip: {
+                show: false
+            },
+            legend: {
+                show: false
+            },
+            yAxis: {
+                show: false,
+                data: ['']
+            },
+            xAxis: [
+                {
+                    show: false,
+                    type: 'value'
+                }
+            ],
+
+            series: [
+                {
+                    name: '告警占比',
+                    type: 'bar',
+                    barWidth: 12,
+                    data: [((monitoringPoints.value.abnormalNum / monitoringPoints.value.runNum) * 100).toFixed(2)],
+                    z: 0,
+                    zlevel: 0,
+
+                    itemStyle: {
+                        normal: {
+                            color: {
+                                type: 'linear',
+                                x: 0,
+                                y: 0,
+                                x2: 1,
+                                y2: 0,
+                                colorStops: [
+                                    {
+                                        offset: 0,
+                                        color: '#ff0007' // 0% 处的颜色
+                                    },
+                                    {
+                                        offset: 1,
+                                        color: '#E22331' // 100% 处的颜色
+                                    }
+                                ],
+                                global: false // 缺省为 false
+                            }
+                        }
+                    }
+                },
+                {
+                    type: 'pictorialBar',
+                    itemStyle: {
+                        normal: {
+                            color: '#fff'
+                        }
+                    },
+                    symbolRepeat: 50,
+                    // symbolMargin: 300,
+                    symbol: 'rect',
+                    symbolClip: true,
+                    symbolSize: [2, 15],
+                    symbolPosition: 'start',
+                    symbolOffset: [0, 0],
+                    data: [100],
+                    z: 1,
+                    zlevel: 0
+                },
+                {
+                    name: '机器故障率',
+                    type: 'bar',
+                    barGap: '-125%',
+                    data: [100],
+                    barWidth: 18,
+
+                    itemStyle: {
+                        normal: {
+                            color: 'transparent',
+                            barBorderColor: 'rgb(148,217,249)',
+                            barBorderWidth: 1
+                        }
+                    },
+                    z: 2
+                }
+            ]
+        }
+    }
+}
+tableStore.table.params.deptId = dictData.state.area[0].id
+tableStore.table.params.objType = ''
+tableStore.table.params.alarmDayLimit = 5
+tableStore.table.params.warnDayLimit = 1
+
+const quantityClick = (e: any) => {
+    alarmDetailsRef.value.open(e)
+}
+onMounted(() => {
+    queryFirstNode({ type: 0 }).then(res => {
+        objTypeList.value = res.data
+    })
+    // 加载数据
+    tableStore.index()
+})
+
+tableStore.table.params.name = ''
+provide('tableStore', tableStore)
+</script>
+<style lang="scss" scoped>
+.card-list {
+    display: flex;
+    .monitoringPoints {
+        width: 440px;
+        position: relative;
+        .statistics {
+            display: flex;
+            flex-wrap: wrap;
+            .divBox {
+                margin: 0 10px 10px 0;
+                width: 200px;
+                height: 70px;
+                padding: 10px;
+                display: flex;
+
+                .iconfont {
+                    font-size: 40px;
+                    margin-right: 5px;
+                }
+                .divBox_title {
+                    font-weight: 550;
+                }
+                .divBox_num {
+                    font-size: 20px;
+                    font-weight: 550;
+                    margin-left: auto;
+                    font-family: AlimamaDongFangDaKai;
+                }
+                align-items: center;
+                // text-align: center;
+                border-radius: 5px;
+                &:nth-child(1) {
+                    background-color: #eef8f0;
+                }
+                &:nth-child(2) {
+                    background-color: #ffd7d7;
+                }
+                &:nth-child(3) {
+                    background-color: #e5f8f6;
+                }
+            }
+        }
+    }
+    .detail {
+        flex: 1;
+    }
+    .abnormal {
+        width: 100%;
+        background-color: #f3f6f9;
+        border-radius: 5px;
+        display: flex;
+        // justify-content: space-between;
+        align-items: center;
+        padding: 5px 0px 5px 10px;
+        .iconDiv {
+            display: flex;
+            align-items: center;
+            div {
+                width: 4px;
+                height: 18px;
+                margin-right: 5px;
+                background-color: var(--el-color-primary);
+            }
+        }
+        .text {
+            font-weight: 700;
+            font-size: 16px;
+            font-family: 'Source Code Pro', monospace;
+
+            // font-feature-settings: 'tnum';
+        }
+    }
+}
+.header {
+    display: flex;
+    text-align: center;
+
+    font-weight: 700;
+    padding: 5px;
+}
+:deep(.el-card__header) {
+    padding: 10px;
+    span {
+        font-weight: 600;
+    }
+}
+:deep(.el-card__body) {
+    padding: 10px;
+}
+.iconFont {
+    font-size: 18px;
+    display: inline-block;
+    vertical-align: middle;
+}
+.form {
+    position: relative;
+    .form_but {
+        position: absolute;
+        right: -22px;
+    }
+}
+.card-header {
+    font-size: 16px;
+}
+:deep(.table_name) {
+    color: var(--el-color-primary);
+    cursor: pointer;
+    text-decoration: underline;
+    text-underline-offset: 4px;
+}
+.echartTitle {
+    display: flex;
+    justify-content: space-between;
+    font-size: 14px;
+    font-weight: 600;
+    div:nth-child(2) {
+        font-size: 16px;
+        color: #ff0000;
+    }
+}
+
+:deep(.el-segmented__item-selected, ) {
+    clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
+}
+:deep(.el-segmented__item, ) {
+    clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
+}
+:deep(.el-segmented) {
+    clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%);
+}
+</style>

src/views/pqs/runManage/cleaning/index.vue

@@ -1,8 +1,8 @@
 <template>
     <div class="default-main">
         <el-tabs type="border-card" v-model="activeName">
-            <el-tab-pane label="异常数据统计" name="1"><abnormal v-if="activeName == '1'"/></el-tab-pane>
+            <el-tab-pane label="异常数据统计" name="1"><abnormal v-if="activeName == '1'" /></el-tab-pane>
-            <el-tab-pane label="稳态告警统计" name="2"><alarm v-if="activeName == '2'"/></el-tab-pane>
+            <el-tab-pane label="稳态告警统计" name="2"><alarm v-if="activeName == '2'" /></el-tab-pane>
         </el-tabs>
     </div>
 </template>

src/views/pqs/runManage/runEvaluate/components/region.vue

@@ -29,6 +29,7 @@ const info = () => {
     options.value = {
         xAxis: {
             type: 'value',
+            data:[10,100,200,300,400,500,600,700,800,900,1000],
             axisLabel: {
                 show: true,
                 textStyle: {
@@ -43,7 +44,8 @@ const info = () => {
             },
             axisLine: {
                 show: true
-            }
+            },
+           
         },
         grid: {
             top: '10'
@@ -60,7 +62,8 @@ const info = () => {
                 },
                 splitLine: {
                     show: false
-                }
+                },
+                
             },
             dataZoom: null,
             series: [
@@ -70,11 +73,11 @@ const info = () => {
                         color: function (params) {
                             return params.value >= 90
                                 ? '#009900'
-                                : params.value >= 60
+                                : params.value >= 80
+                                ? '#77DA63'
+                                : params.value >= 70
                                 ? '#FFCC00'
-                                : params.value > 0
+                                : '#CC0000'
-                                ? '#CC0000'
-                                : '#CCC'
                         }
                     },