联调数据清洗页面 绘制终端运行评价页面

src/api/auth.ts

@@ -12,3 +12,11 @@ export function dictDataCache() {
         url: '/system-boot/dictType/dictDataCache'
     })
 }
+//查询所有类型大类节点
+export function queryFirstNode(params: any) {
+    return createAxios({
+        url: '/system-boot/dictTree/queryFirstNode',
+        method: 'get',
+        params
+    })
+}

src/api/device-boot/dataVerify.ts

@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+
+// 异常-更新按钮-获取异常数据列表
+export function getMonitorVerifyDay(data:any) {
+    return request({
+        url: '/device-boot/dataVerify/getMonitorVerifyDay',
+        method: 'post',
+        data
+    })
+}

src/assets/font/demo_index.html

@@ -54,6 +54,24 @@
       <div class="content unicode" style="display: block;">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+              <span class="icon iconfont">&#xe70e;</span>
+                <div class="name">电压合格率</div>
+                <div class="code-name">&amp;#xe70e;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7c2;</span>
+                <div class="name">在线率报表</div>
+                <div class="code-name">&amp;#xe7c2;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe60d;</span>
+                <div class="name">wzlfx</div>
+                <div class="code-name">&amp;#xe60d;</div>
+              </li>
+          
             <li class="dib">
               <span class="icon iconfont">&#xe638;</span>
                 <div class="name">首页-待评价</div>
@@ -204,9 +222,9 @@
 <pre><code class="language-css"
 >@font-face {
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1742987095628') format('woff2'),
+  src: url('iconfont.woff2?t=1743573122508') format('woff2'),
-       url('iconfont.woff?t=1742987095628') format('woff'),
+       url('iconfont.woff?t=1743573122508') format('woff'),
-       url('iconfont.ttf?t=1742987095628') format('truetype');
+       url('iconfont.ttf?t=1743573122508') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -232,6 +250,33 @@
       <div class="content font-class">
         <ul class="icon_lists dib-box">
           
+          <li class="dib">
+            <span class="icon iconfont icon-dianyahegeshuai"></span>
+            <div class="name">
+              电压合格率
+            </div>
+            <div class="code-name">.icon-dianyahegeshuai
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-zaixianshuaibaobiao0"></span>
+            <div class="name">
+              在线率报表
+            </div>
+            <div class="code-name">.icon-zaixianshuaibaobiao0
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-wanzhengshuaifenxi2"></span>
+            <div class="name">
+              wzlfx
+            </div>
+            <div class="code-name">.icon-wanzhengshuaifenxi2
+            </div>
+          </li>
+          
           <li class="dib">
             <span class="icon iconfont icon-daipingjia"></span>
             <div class="name">
@@ -457,6 +502,30 @@
       <div class="content symbol">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-dianyahegeshuai"></use>
+                </svg>
+                <div class="name">电压合格率</div>
+                <div class="code-name">#icon-dianyahegeshuai</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-zaixianshuaibaobiao0"></use>
+                </svg>
+                <div class="name">在线率报表</div>
+                <div class="code-name">#icon-zaixianshuaibaobiao0</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-wanzhengshuaifenxi2"></use>
+                </svg>
+                <div class="name">wzlfx</div>
+                <div class="code-name">#icon-wanzhengshuaifenxi2</div>
+            </li>
+          
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-daipingjia"></use>

src/assets/font/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 3482754 */
-  src: url('iconfont.woff2?t=1742987095628') format('woff2'),
+  src: url('iconfont.woff2?t=1743573122508') format('woff2'),
-       url('iconfont.woff?t=1742987095628') format('woff'),
+       url('iconfont.woff?t=1743573122508') format('woff'),
-       url('iconfont.ttf?t=1742987095628') format('truetype');
+       url('iconfont.ttf?t=1743573122508') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,18 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-dianyahegeshuai:before {
+  content: "\e70e";
+}
+
+.icon-zaixianshuaibaobiao0:before {
+  content: "\e7c2";
+}
+
+.icon-wanzhengshuaifenxi2:before {
+  content: "\e60d";
+}
+
 .icon-daipingjia:before {
   content: "\e638";
 }

src/assets/font/iconfont.json

@@ -5,6 +5,27 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "11708319",
+      "name": "电压合格率",
+      "font_class": "dianyahegeshuai",
+      "unicode": "e70e",
+      "unicode_decimal": 59150
+    },
+    {
+      "icon_id": "31920601",
+      "name": "在线率报表",
+      "font_class": "zaixianshuaibaobiao0",
+      "unicode": "e7c2",
+      "unicode_decimal": 59330
+    },
+    {
+      "icon_id": "42089357",
+      "name": "wzlfx",
+      "font_class": "wanzhengshuaifenxi2",
+      "unicode": "e60d",
+      "unicode_decimal": 58893
+    },
     {
       "icon_id": "2545172",
       "name": "首页-待评价",

src/components/table/header/index.vue

@@ -203,7 +203,7 @@ const onExport = () => {
     tableStore.onTableAction('export', { showAllFlag: true })
 }
 
-defineExpose({ onComSearch, areaRef, setDatePicker, setTheDate, datePickerRef, showSelectChange,computedSearchRow })
+defineExpose({ onComSearch, areaRef, setDatePicker, setTheDate, datePickerRef, showSelectChange,computedSearchRow,onExport })
 </script>
 
 <style scoped lang="scss">

src/components/tree/pqs/assessTree.vue

@@ -53,7 +53,7 @@ const loadData = () => {
 
         res.data = [
             {
-                name: '国网xx供电公司',
+                name: '张家口供电公司',
                 level: -1,
                 id: 0,
                 children: [

src/views/pqs/harmonicMonitoring/harmonicGovern/index.vue

@@ -384,7 +384,7 @@ function calcSag() {
 <style scoped>
 
 .divider {
-    font-family: AlimamaDongFangDaKai;
+    /* font-family: AlimamaDongFangDaKai; */
 }
 
 @keyframes colorChange {

src/views/pqs/runManage/assessment/components/assess/index.vue

@@ -82,7 +82,7 @@ const handleNodeClick = (data: any, node: any) => {
 }
 
 :deep(.el-collapse-item__header) {
-    font-family: AlimamaDongFangDaKai;
+    // font-family: AlimamaDongFangDaKai;
     font-size: 20px;
     &::before {
         content: '▍'; /* 添加星号 */

src/views/pqs/runManage/assessment/components/assess/outcome.vue

@@ -96,6 +96,7 @@
                         <vxe-column title="国标限值(%)" field="name3" />
                         <vxe-column title="判断">
                             <template #default="{ row }">
+                                
                                 <el-tag v-if="row.name2 > row.name3" type="warning">不合格</el-tag>
                                 <el-tag v-else type="success">合格</el-tag>
                             </template>
@@ -119,8 +120,9 @@
                             <vxe-column title="国标限值(A)" field="name3" />
                             <vxe-column title="判断">
                                 <template #default="{ row }">
+                                    <!-- <span v-if="row.name2 == null"></span>
                                     <el-tag v-if="row.name2 > row.name3" type="warning">不合格</el-tag>
-                                    <el-tag v-else type="success">合格</el-tag>
+                                    <el-tag v-else type="success">合格</el-tag> -->
                                 </template>
                             </vxe-column>
                         </vxe-table>
@@ -282,6 +284,7 @@ onMounted(() => {
     for (let i = 2; i < 51; i++) {
         harmonicVoltage.value.push({
             name: i
+            
         })
         harmonicCurrents.value.push({
             name: i

src/views/pqs/runManage/assessment/components/uese/form.vue

@@ -157,7 +157,7 @@ import { defaultAttribute } from '@/components/table/defaultAttribute'
 import addform from './addform.vue'
 const activeNames = ref([1, 2, 3, 4, 5, 6, 7])
 const dictData = useDictData()
-const pageHeight = mainHeight(90)
+const pageHeight = mainHeight(70)
 const areaOptionList = dictData.getBasicData('jibei_area')
 const addformRef = ref()
 const form: any = ref({
@@ -381,7 +381,7 @@ const edit = (item: any,row: any) => {
     justify-content: end;
 }
 :deep(.el-collapse-item__header) {
-    font-family: AlimamaDongFangDaKai;
+    // font-family: AlimamaDongFangDaKai;
     font-size: 20px;
     &::before {
         content: '▍'; /* 添加星号 */

src/views/pqs/runManage/assessment/components/uese/index.vue

@@ -71,6 +71,9 @@ import TableHeader from '@/components/table/header/index.vue'
 import { useDictData } from '@/stores/dictData'
 import { ElMessage, ElMessageBox, ElDatePicker } from 'element-plus'
 import { useRouter } from 'vue-router'
+defineOptions({
+    name: 'runManage/addUser'
+})
 const { push } = useRouter()
 const dictData = useDictData()
 const areaOptionList = dictData.getBasicData('jibei_area')
@@ -81,20 +84,38 @@ const tableStore: any = new TableStore({
     method: 'GET',
     publicHeight: 65,
     column: [
-        { field: 'timerName', title: '所属地市' },
+    {
-        { field: 'timerName', title: '用户名称' },
+            width: '60',
-        { field: 'timerName', title: '接入变电站' },
+            type: 'checkbox'
-        { field: 'timerName', title: '电站电压等级' },
+        },
-        { field: 'timerName', title: '接入母线' },
+        {
-        { field: 'timerName', title: '接入电压等级' },
+            title: '序号',
-        { field: 'timerName', title: '供电设备容量(MVA)' },
+            width: 80,
-        { field: 'timerName', title: '最小短路容量(MVA)' },
+            field: 'name',
-        { field: 'timerName', title: '用户协议容量(MVA)' },
+            formatter: (row: any) => {
+                return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
+            }
+        },
+        { field: 'name', title: '所属地市', minWidth: 100 },
+        { field: 'name1', title: '用户名称', minWidth: 180 },
+        { field: 'name2', title: '接入变电站', minWidth: 180 },
+        { field: 'name3', title: '电站电压等级', minWidth: 180 },
+        { field: 'name4', title: '接入母线', minWidth: 180 },
+        { field: 'name5', title: '接入电压等级', minWidth: 180 },
+        { field: 'name6', title: '供电设备容量(MVA)', minWidth: 180 },
+        { field: 'name7', title: '最小短路容量(MVA)', minWidth: 180 },
+        { field: 'name8', title: '用户协议容量(MVA)', minWidth: 180 },
+        { field: 'name9', title: 'PCC点名称', minWidth: 180 },
+        { field: 'name10', title: 'PCC电网电阻', minWidth: 180 },
+        { field: 'name11', title: '长度', minWidth: 180 },
+        { field: 'name12', title: '回路数', minWidth: 180 },
+        { field: 'name13', title: '导线类型', minWidth: 180 },
 
         {
             title: '操作',
             width: '220',
             render: 'buttons',
+            fixed: 'right',
             buttons: [
                 {
                     name: 'edit',
@@ -120,7 +141,25 @@ const tableStore: any = new TableStore({
 
     loadCallback: () => {
         // 格式化 cron 表达式
-        tableStore.table.data = []
+        tableStore.table.data = [
+            {
+                name: '张家口',
+                name1: '特种钢厂',
+                name2: '220kV石门变',
+                name3: '220kV', 
+                name4: '110kV 母线',
+                name5: '110kV',
+                name6: '90',
+                name7: '100',
+                name8: '40',
+                name9: '测试名称',
+                name10: '10',
+                name11: '12',
+                name12: '13',
+                name13: '14',
+                name14: '15'
+            }
+        ]
     }
 })
 tableStore.table.params.searchValue = ''

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

@@ -15,6 +15,6 @@ import Dictionary from '@/views/pqs/runManage/assessment/components/dictionary/i
 defineOptions({
     name: 'runManage/assessment'
 })
-const activeName = ref('3')
+const activeName = ref('1')
 </script>
 <style lang="scss" scoped></style>

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

@@ -1,17 +1,17 @@
 <!--业务用户管理界面-->
 <template>
     <div>
-        <TableHeader date-picker>
+        <TableHeader date-picker ref="TableHeaderRef">
             <template v-slot:select>
                 <el-form-item label="对象类型">
                     <el-select
-                        v-model="tableStore.table.params.supvObjType"
+                        v-model="tableStore.table.params.objType"
                         clearable
                         style="width: 100%"
                         placeholder="请选择对象类型"
                     >
                         <el-option
-                            v-for="item in supvObjTypeList"
+                            v-for="item in objTypeList"
                             :key="item.id"
                             :label="item.name"
                             :value="item.id"
@@ -24,7 +24,7 @@
         </TableHeader>
         <div class="card-list pt10">
             <div class="monitoringPoints">
-                <el-card style="height: 390px">
+                <el-card style="height: 200px">
                     <template #header>
                         <div class="card-header">
                             <span>监测点统计</span>
@@ -34,21 +34,28 @@
                         <div class="statistics">
                             <div class="divBox">
                                 <span class="iconfont icon-qiyezongshu" style="color: #57bc6e"></span>
-                                <span class="divBox_title">总数</span>
+                                <span class="divBox_title">监测点总数</span>
-                                <span class="divBox_num" style="color: #57bc6e">400</span>
+                                <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="divBox_title">异常测点数</span>
-                                <span class="divBox_num" style="color: #fca955">200</span>
+                                <span class="divBox_num" style="color: #fca955">
+                                    {{ monitoringPoints.abnormalNum }}
+                                </span>
                             </div>
-                            <!-- <div class="divBox">
-                                <span class="iconfont icon-shouruzhanbi" style="color: #06b6a9"></span>
-                                <span class="divBox_title">占比</span>
-                                <span class="divBox_num" style="color: #06b6a9">50%</span>
-                            </div> -->
                         </div>
-                        <div class="mt10" style="height: 240px">
+                        <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>
@@ -59,33 +66,31 @@
                             <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="width: 180px; text-align: left">指标名称</span>
+                        <span style="width: 170px; text-align: left">指标名称</span>
                         <span style="flex: 1">合理范围</span>
-                        <span style="width: 100px">异常测点数</span>
+                        <span style="width: 90px">异常测点数</span>
                     </div>
                     <div :style="indicatorHeight" style="overflow-y: auto">
                         <div v-for="o in abnormal" class="abnormal mb10">
-                            <span style="width: 180px; height: 24px" class="iconDiv">
+                            <span style="width: 170px; height: 24px" class="iconDiv">
-                                <!-- <span
+                                <div :style="{ backgroundColor: o.ids.length > 0 ? '#ff9800' : '' }"></div>
-                                    class="iconFont iconfont icon-yichang"
+                                {{ o.targetName }}
-                                   
-                                ></span> -->
-                                <div  :style="{  backgroundColor: o.quantity > 0 ? '#ff9800' : '' }"></div>
-                                {{ o.name }}
                             </span>
                             <span style="flex: 1; text-align: center">
                                 <!-- 合理范围： -->
-                                <span style="color: #388e3c" class="text">{{ o.range }}</span>
+                                <span style="color: #388e3c" class="text">{{ o.rangeDesc }}</span>
-                                {{ o.unit }}
                             </span>
-                            <span style="width: 100px; text-align: center">
+                            <span style="width: 90px; text-align: center">
                                 <span
                                     style="color: #ff9800; cursor: pointer; text-decoration: underline"
                                     class="text"
                                     @click="quantityClick(o)"
                                 >
-                                    {{ o.quantity }}
+                                    {{ o.ids.length }}
                                 </span>
                             </span>
                         </div>
@@ -102,21 +107,26 @@
                     <MyEchart :options="options"></MyEchart>
                 </div>
                 <el-form :inline="true" class="form">
-                    <el-form-item label="告警持续天数"></el-form-item>
+                    <el-form-item label="异常持续天数"></el-form-item>
-                    <el-form-item label="告警阀值(天)">
+                    <el-form-item label="异常阀值(天)">
-                        <el-input-number v-model="tableStore.table.params.alarm" :min="0" :step="1" step-strictly />
+                        <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.earlyWarning"
+                            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" @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>
                 <!--表格-->
@@ -131,174 +141,62 @@
 import TableStore from '@/utils/tableStore'
 import Table from '@/components/table/index.vue'
 import TableHeader from '@/components/table/header/index.vue'
-import { deleteDeploy } from '@/api/process-boot/bpm'
 import { onMounted, provide, ref } from 'vue'
 import { useDictData } from '@/stores/dictData'
-import { ElMessage } from 'element-plus'
-import { CaretRight } from '@element-plus/icons-vue'
 import { mainHeight } from '@/utils/layout'
 import MyEchart from '@/components/echarts/MyEchart.vue'
 import anomalyDetails from './anomalyDetails.vue'
-import { useConfig } from '@/stores/config'
+import { getMonitorVerifyDay } from '@/api/device-boot/dataVerify'
-const config = useConfig()
+import { queryFirstNode } from '@/api/auth'
+
 const anomalyDetailsRef = ref()
 const dictData = useDictData()
 //字典获取监督对象类型
-const supvObjTypeList = dictData.getBasicData('supv_obj_type')
+const objTypeList: any = ref([])
 const pageHeight = mainHeight(155)
-const indicatorHeight = mainHeight(652)
+const indicatorHeight = mainHeight(507)
 const tableRef = ref()
-const abnormal = ref([
+const monitoringPoints = ref({
+    runNum: 0,
+    abnormalNum: 0
+})
+
+const percentage = ref({})
+const TableHeaderRef = ref()
+const abnormal: any = ref([])
+const mapList: any = ref([])
+const segmented = ref(1)
+const segmentedList = [
     {
-        name: '频率',
+        label: '基础数据',
-        range: '42.5~57.5',
+        value: 1
-        unit: '',
-        quantity: 11
     },
     {
-        name: '频率偏差',
+        label: '稳态数据',
-        range: '-7.5~7.5',
+        value: 2
-        unit: '',
-        quantity: 0
     },
     {
-        name: '相（线）电压有效值',
+        label: '暂态数据',
-        range: '0~150%U',
+        value: 3
-        unit: '',
-        quantity: 0
-    },
-    {
-        name: '电压偏差',
-        range: '-20%~20%',
-        unit: '',
-        quantity: 0
-    },
-    {
-        name: '电流有效值',
-        range: '大于CT一次变比',
-        unit: '',
-        quantity: 0
-    },
-    {
-        name: '单相功率因数',
-        range: '-1~1',
-        unit: '',
-        quantity: 0
-    },
-    {
-        name: '单相基波功率因数',
-        range: '-1~1',
-        unit: '',
-        quantity: 0
-    },
-    {
-        name: '三相功率因数',
-        range: '-1~1',
-        unit: '',
-        quantity: 0
-    },
-    {
-        name: '基波功率因数',
-        range: '-1~1',
-        unit: '',
-        quantity: 0
-    },
-    {
-        name: '电压总谐波畸变率',
-        range: '0~30%',
-        unit: '',
-        quantity: 0
-    },
-    {
-        name: '相（线）电压基波有效值',
-        range: '0~150%U',
-        unit: '',
-        quantity: 0
-    },
-    {
-        name: '相（线）电压基波相角',
-        range: '-180~180',
-        unit: '',
-        quantity: 0
-    },
-    {
-        name: '谐波电压含有率',
-        range: '0~30%',
-        unit: '',
-        quantity: 0
-    },
-    {
-        name: '谐波电压相角',
-        range: '-180~180',
-        unit: '',
-        quantity: 0
-    },
-    {
-        name: '间谐波电压含有率',
-        range: '0~30%',
-        unit: '',
-        quantity: 0
-    },
-    {
-        name: '正序、负序和零序电压',
-        range: '0~150%U',
-        unit: '',
-        quantity: 0
-    },
-    {
-        name: '负序电压不平衡度',
-        range: '0~40%',
-        unit: '',
-        quantity: 0
-    },
-    {
-        name: '零序电压不平衡度',
-        range: '0~40%',
-        unit: '',
-        quantity: 0
-    },
-    {
-        name: '电压波动',
-        range: '0~40%',
-        unit: '',
-        quantity: 0
-    },
-    {
-        name: '短时间闪变值',
-        range: '0~20',
-        unit: '',
-        quantity: 0
-    },
-    {
-        name: '长时间闪变值',
-        range: '0~20',
-        unit: '',
-        quantity: 0
-    },
-    {
-        name: '电压暂降特征幅值',
-        range: '0~90%',
-        unit: '',
-        quantity: 0
-    },
-    {
-        name: '电压暂升特征幅值',
-        range: '110%~180%',
-        unit: '',
-        quantity: 0
     }
-])
+]
 const tableStore = new TableStore({
-    url: '/user-boot/user/getAllUserSimpleList',
+    url: '/device-boot/dataVerify/getMonitorVerifyData',
-    method: 'GET',
+    method: 'POST',
-    isWebPaging: true,
     showPage: false,
-    publicHeight: 480,
+    filename: '异常数据',
+    publicHeight: 530,
     column: [
-        { title: '序号', width: 80 },
+        {
+            title: '序号',
+            width: 80,
+            formatter: (row: any) => {
+                return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
+            }
+        },
         {
             title: '监测点名称',
-            field: 'name',
+            field: 'monitorName',
             type: 'html',
             formatter: (row, column) => {
                 return `<div class="table_name">${row.cellValue}</div>`
@@ -306,7 +204,7 @@ const tableStore = new TableStore({
         },
         {
             title: '所属终端名称',
-            field: 'name1',
+            field: 'devName',
             type: 'html',
             formatter: (row, column) => {
                 return `<div class="table_name">${row.cellValue}</div>`
@@ -314,18 +212,24 @@ const tableStore = new TableStore({
         },
         {
             title: '所属电站',
-            field: 'name2',
+            field: 'stationName',
             type: 'html',
             formatter: (row, column) => {
                 return `<div class="table_name">${row.cellValue}</div>`
             }
         },
-        { title: '监测对象类型', field: 'name3' },
+        {
-        { title: '监测对象名称', field: 'name4' },
+            title: '监测对象类型',
-        { title: '电压等级', field: 'name5' },
+            field: 'objType'
+        },
+        {
+            title: '监测对象名称',
+            field: 'objName'
+        },
+        { title: '电压等级', field: 'voltageLevel' },
         {
             title: '异常天数',
-            field: 'name6',
+            field: 'abnormalDay',
             type: 'html',
             formatter: (row, column) => {
                 return `<div class="table_name">${row.cellValue}</div>`
@@ -333,7 +237,7 @@ const tableStore = new TableStore({
         },
         {
             title: '严重度',
-            field: 'name7',
+            field: 'severity',
             render: 'tag',
             custom: {
                 0: 'warning',
@@ -345,113 +249,157 @@ const tableStore = new TableStore({
                 1: '告警'
             }
         },
-        {
+        // {
-            title: '操作',
+        //     title: '操作',
-            width: '120',
+        //     width: '120',
-            render: 'buttons',
+        //     render: 'buttons',
-            buttons: [
+        //     buttons: [
-                {
+        //         {
-                    name: 'edit',
+        //             name: 'edit',
-                    title: '工单',
+        //             title: '工单',
-                    type: 'primary',
+        //             type: 'primary',
-                    icon: 'el-icon-Plus',
+        //             icon: 'el-icon-Plus',
-                    render: 'basicButton',
+        //             render: 'basicButton',
-                    click: row => {}
+        //             click: row => {}
-                }
+        //         }
-            ]
+        //     ]
-        }
+        // }
     ],
     loadCallback: () => {
-        tableStore.table.data = [
+        // console.log('🚀 ~   abnormal.value:', tableStore.table.data)
-            {
+        monitoringPoints.value.runNum = tableStore.table.data.runNum //总数
-                name: '测试监测点1',
+        monitoringPoints.value.abnormalNum = tableStore.table.data.abnormalNum //异常测点数
-                name1: '025875',
+        abnormal.value = tableStore.table.data.targetList
-                name2: '测试变电站',
+        mapList.value = tableStore.table.data.mapList
-                name3: '测试光伏电站',
+        tableStore.table.allData = tableStore.table.data.monitorAlarmInfo
-                name4: '测试光伏电站',
+        tableStore.table.data = tableStore.table.data.monitorAlarmInfo
-                name5: '110',
+
-                name6: '1',
+        echart()
-                name7: '0'
-            },
-            {
-                name: '测试监测点1',
-                name1: '025875',
-                name2: '测试变电站',
-                name3: '测试光伏电站',
-                name4: '测试光伏电站',
-                name5: '110',
-                name6: '1',
-                name7: '0'
-            },
-            {
-                name: '测试监测点1',
-                name1: '025875',
-                name2: '测试变电站',
-                name3: '测试光伏电站',
-                name4: '测试光伏电站',
-                name5: '110',
-                name6: '1',
-                name7: '0'
-            },
-            {
-                name: '测试监测点1',
-                name1: '025875',
-                name2: '测试变电站',
-                name3: '测试光伏电站',
-                name4: '测试光伏电站',
-                name5: '110',
-                name6: '1',
-                name7: '0'
-            },
-            {
-                name: '测试监测点1',
-                name1: '025875',
-                name2: '测试变电站',
-                name3: '测试光伏电站',
-                name4: '测试光伏电站',
-                name5: '110',
-                name6: '1',
-                name7: '0'
-            },
-            {
-                name: '测试监测点1',
-                name1: '025875',
-                name2: '测试变电站',
-                name3: '测试光伏电站',
-                name4: '测试光伏电站',
-                name5: '110',
-                name6: '1',
-                name7: '1'
-            },
-            {
-                name: '测试监测点1',
-                name1: '025875',
-                name2: '测试变电站',
-                name3: '测试光伏电站',
-                name4: '测试光伏电站',
-                name5: '110',
-                name6: '1',
-                name7: '1'
-            }
-        ]
     }
 })
 
-const options = ref({
+const options = ref({})
-    title: {
+const echart = () => {
-        text: '监测点异常情况(2025-03-01~2025-03-10)'
+    percentage.value = {
+        color: ['#ff9800'],
+        options: {
+            dataZoom: null,
+            toolbox: {
+                show: false
+            },
+            grid: {
+                top: '0%',
+                left: '0%',
+                right: '0%',
+                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: '#FD6E6A' // 0% 处的颜色
+                                    },
+                                    {
+                                        offset: 1,
+                                        color: '#ff9800' // 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
+                }
+            ]
+        }
+    }
+    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),
-        data: ['03-01', '03-02', '03-03', '03-04', '03-05', '03-06', '03-07', '03-08', '03-09', '03-10']
+            axisLabel: {
+                formatter: function (value) {
+                    let time = ''
+                    if (value.slice(-2) == '01') {
+                        time = value
+                    } else {
+                        time = value.slice(5, 10)
+                    }
+                    return time
+                }
+            }
         },
         yAxis: {
             name: '数量' // 给X轴加单位
@@ -461,239 +409,48 @@ const options = ref({
         options: {
             series: [
                 {
-                name: '告警监测点数量',
+                    name: '异常监测点数量',
                     type: 'bar',
 
-                data: [11, 11, 11, 11, 0, 0, 0, 0, 0, 0]
+                    data: mapList.value.map(item => item.val)
+                    // mapList.value.map(item => ({
+                    //     value: [item.time, item.val]
+                    // }))
                 }
             ]
         }
-})
-
-const percentage = ref({
-    // options: {
-    //     tooltip: {
-    //         show: false
-    //     },
-    //     grid: {
-    //         left: 50
-    //     },
-    //     toolbox: {
-    //         show: false
-    //     },
-    //     legend: {
-    //         show: false
-    //     },
-    //     dataZoom: null,
-    //     xAxis: {
-    //         max: 100,
-    //         splitLine: {
-    //             show: false
-    //         },
-    //         axisLine: {
-    //             show: false
-    //         },
-    //         axisLabel: {
-    //             show: false
-    //         },
-    //         axisTick: {
-    //             show: false
-    //         }
-    //     },
-
-    //     yAxis: [
-    //         {
-    //             type: 'category',
-    //             inverse: false,
-    //             data: ['占比'],
-    //             axisLine: {
-    //                 show: false
-    //             },
-    //             axisTick: {
-    //                 show: false
-    //             },
-    //             axisLabel: {
-    //                 show: false
-    //             }
-    //         }
-    //     ],
-    //     series: [
-    //         {
-    //             //内
-    //             type: 'bar',
-    //             barWidth: 18,
-
-    //             legendHoverLink: false,
-    //             silent: true,
-    //             itemStyle: {
-    //                 color: '#06b6a9'
-    //             },
-    //             label: {
-    //                 normal: {
-    //                     show: true,
-    //                     position: 'left',
-    //                     formatter: '{b}',
-    //                     textStyle: {
-    //                         color: '#000',
-    //                         fontSize: 14,
-    //                         fontWeight: 'bold'
-    //                     }
-    //                 }
-    //             },
-    //             data: [50],
-    //             z: 1,
-    //             animationEasing: 'elasticOut'
-    //         },
-    //         {
-    //             //分隔
-    //             type: 'pictorialBar',
-    //             itemStyle: {
-    //                 color: '#e4e7ed'
-    //             },
-    //             symbolRepeat: 'fixed',
-    //             symbolMargin: 4,
-    //             symbol: 'rect',
-    //             symbolClip: true,
-    //             symbolSize: [2, 21],
-    //             symbolPosition: 'start',
-    //             symbolOffset: [0, 0],
-    //             symbolBoundingData: 100,
-    //             data: [50],
-    //             z: 2,
-    //             animationEasing: 'elasticOut'
-    //         },
-    //         {
-    //             //外边框
-    //             type: 'pictorialBar',
-    //             symbol: 'rect',
-    //             symbolBoundingData: 100,
-    //             itemStyle: {
-    //                 normal: {
-    //                     color: 'none'
-    //                 }
-    //             },
-    //             label: {
-    //                 normal: {
-    //                     show: true,
-    //                     formatter: '{c}%',
-    //                     position: 'right',
-    //                     offset: [0, 0], //设置右边数据位置
-    //                     textStyle: {
-    //                         color: '#06b6a9',
-    //                         fontSize: 16,
-    //                         fontWeight: 600
-    //                     }
-    //                 }
-    //             },
-    //             data: [50],
-    //             z: 0,
-    //             animationEasing: 'elasticOut'
-    //         },
-    //         {
-    //             name: '外框',
-    //             type: 'bar',
-    //             barGap: '-100%', //设置外框粗细
-    //             data: [100],
-    //             barWidth: 26,
-    //             itemStyle: {
-    //                 normal: {
-    //                     color: '#e4e7ed', //填充色
-    //                     barBorderColor: '#e4e7ed', //边框色
-    //                     barBorderWidth: 1, //边框宽度
-    //                     // barBorderRadius: 0, //圆角半径
-    //                     label: {
-    //                         //标签显示位置
-    //                         show: false,
-    //                         position: 'top' //insideTop 或者横向的 insideLeft
-    //                     }
-    //                 }
-    //             },
-    //             z: 0
-    //         }
-    //     ]
-    // }
-    options: {
-        toolbox: {
-            show: false
-        },
-        legend: {
-            show: false
-        },
-        dataZoom: null,
-        title: {
-            text: `{t|占比}
-  {v|50%}`,
-            x: 'center',
-            y: 'center',
-            textStyle: {
-                color: config.layout.elementUiPrimary[0],
-
-                rich: {
-                    v: {
-                        fontSize: 28,
-                        fontWeight: '550',
-                        color: config.layout.elementUiPrimary[0]
-                    },
-
-                    t: {
-                        lineHeight: 28,
-                        fontSize: 16
     }
-                }
+}
-            }
+tableStore.table.params.deptId = dictData.state.area[0].id
-        },
+tableStore.table.params.objType = ''
-        color: ['#ccc'],
+tableStore.table.params.alarmDayLimit = 5
-        series: [
+tableStore.table.params.warnDayLimit = 1
-            {
-                name: 'Line 1',
-                type: 'pie',
-                clockWise: true,
-                radius: ['63%', '80%'],
-                itemStyle: {
-                    normal: {
-                        label: {
-                            show: false
-                        },
-                        labelLine: {
-                            show: false
-                        }
-                    }
-                },
-                hoverAnimation: false,
-                data: [
-                    {
-                        value: 80,
-                        name: '01',
-                        itemStyle: {
-                            normal: {
-                                color: config.layout.elementUiPrimary[0],
-                                label: {
-                                    show: false
-                                },
-                                labelLine: {
-                                    show: false
-                                }
-                            }
-                        }
-                    },
-                    {
-                        name: '02',
-                        value: 20
-                    }
-                ]
-            }
-        ]
-    }
-})
-
-tableStore.table.params.radio = '1'
-tableStore.table.params.alarm = 5
-tableStore.table.params.earlyWarning = 1
 
 const quantityClick = (e: any) => {
     anomalyDetailsRef.value.open(e)
 }
+// 更新
+const MonitorVerify = () => {
+    tableStore.table.loading = true
+    getMonitorVerifyDay(tableStore.table.params).then(res => {
+        tableStore.table.data = res.data
+        tableStore.table.allData = res.data
+        tableStore.table.loading = false
+    })
+}
+// 导出
+const onExport = () => {
+    tableStore.table.allFlag = true
+}
 onMounted(() => {
+    TableHeaderRef.value.setDatePicker([
+        { label: '年份', value: 1 },
+        { label: '季度', value: 2 },
+        { label: '月份', value: 3 }
+    ])
+    queryFirstNode({ type: 0 }).then(res => {
+        objTypeList.value = res.data
+    })
     // 加载数据
     tableStore.index()
 })
@@ -710,8 +467,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;
@@ -812,4 +570,24 @@ provide('tableStore', tableStore)
     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: #fca955;
+    }
+}
+
+: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/components/alarm.vue

@@ -5,13 +5,13 @@
             <template v-slot:select>
                 <el-form-item label="对象类型">
                     <el-select
-                        v-model="tableStore.table.params.supvObjType"
+                        v-model="tableStore.table.params.objType"
                         clearable
                         style="width: 100%"
                         placeholder="请选择对象类型"
                     >
                         <el-option
-                            v-for="item in supvObjTypeList"
+                            v-for="item in objTypeList"
                             :key="item.id"
                             :label="item.name"
                             :value="item.id"
@@ -24,7 +24,7 @@
         </TableHeader>
         <div class="card-list pt10">
             <div class="monitoringPoints">
-                <el-card style="height: 390px">
+                <el-card style="height: 200px">
                     <template #header>
                         <div class="card-header">
                             <span>监测点统计</span>
@@ -34,21 +34,28 @@
                         <div class="statistics">
                             <div class="divBox">
                                 <span class="iconfont icon-qiyezongshu" style="color: #57bc6e"></span>
-                                <span class="divBox_title">总数</span>
+                                <span class="divBox_title">监测点总数</span>
-                                <span class="divBox_num" style="color: #57bc6e">400</span>
+                                <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-yichang" style="color: #ff0000"></span>
                                 <span class="divBox_title">告警测点数</span>
-                                <span class="divBox_num" style="color: #fca955">200</span>
+                                <span class="divBox_num" style="color: #ff0000">
+                                    {{ monitoringPoints.abnormalNum }}
+                                </span>
                             </div>
-                            <!-- <div class="divBox">
-                                <span class="iconfont icon-shouruzhanbi" style="color: #06b6a9"></span>
-                                <span class="divBox_title">占比</span>
-                                <span class="divBox_num" style="color: #06b6a9">50%</span>
-                            </div> -->
                         </div>
-                        <div class="mt10" style="height: 240px">
+                        <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>
@@ -59,29 +66,28 @@
                             <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: 100px">告警测点数</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">
-                                <!-- <span
+                                <div :style="{ backgroundColor: o.ids.length > 0 ? '#ff9800' : '' }"></div>
-                                    class="iconFont iconfont icon-yichang"
+                                {{ o.targetName }}
-                                   
-                                ></span> -->
-                                <div  :style="{  backgroundColor: o.quantity > 0 ? '#ff9800' : '' }"></div>
-                                {{ o.name }}
                             </span>
 
-                            <span style="width: 100px; text-align: center">
+                            <span style="width: 110px; text-align: center">
                                 <span
                                     style="color: #ff9800; cursor: pointer; text-decoration: underline"
                                     class="text"
                                     @click="quantityClick(o)"
                                 >
-                                    {{ o.quantity }}
+                                    {{ o.ids.length }}
                                 </span>
                             </span>
                         </div>
@@ -100,11 +106,16 @@
                 <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.alarm" :min="0" :step="1" step-strictly />
+                        <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.earlyWarning"
+                            v-model="tableStore.table.params.warnDayLimit"
                             :min="0"
                             :step="1"
                             step-strictly
@@ -127,174 +138,59 @@
 import TableStore from '@/utils/tableStore'
 import Table from '@/components/table/index.vue'
 import TableHeader from '@/components/table/header/index.vue'
-import { deleteDeploy } from '@/api/process-boot/bpm'
 import { onMounted, provide, ref } from 'vue'
 import { useDictData } from '@/stores/dictData'
-import { ElMessage } from 'element-plus'
-import { CaretRight } from '@element-plus/icons-vue'
 import { mainHeight } from '@/utils/layout'
 import MyEchart from '@/components/echarts/MyEchart.vue'
 import alarmDetails from './alarmDetails.vue'
 import { useConfig } from '@/stores/config'
-const config = useConfig()
+import { queryFirstNode } from '@/api/auth'
+
 const alarmDetailsRef = ref()
 const dictData = useDictData()
 //字典获取监督对象类型
-const supvObjTypeList = dictData.getBasicData('supv_obj_type')
+const objTypeList: any = ref([])
 const pageHeight = mainHeight(155)
-const indicatorHeight = mainHeight(652)
+const indicatorHeight = mainHeight(507)
 const tableRef = ref()
-const abnormal = ref([
+const monitoringPoints = ref({
+    runNum: 0,
+    abnormalNum: 0
+})
+
+const percentage = ref({})
+const abnormal: any = ref([])
+const segmented = ref(1)
+const segmentedList = [
     {
-        name: '频率',
+        label: '基础数据',
-        range: '42.5~57.5',
+        value: 1
-        unit: '',
-        quantity: 11
     },
     {
-        name: '频率偏差',
+        label: '稳态数据',
-        range: '-7.5~7.5',
+        value: 2
-        unit: '',
-        quantity: 0
     },
     {
-        name: '相（线）电压有效值',
+        label: '暂态数据',
-        range: '0~150%U',
+        value: 3
-        unit: '',
-        quantity: 0
-    },
-    {
-        name: '电压偏差',
-        range: '-20%~20%',
-        unit: '',
-        quantity: 0
-    },
-    {
-        name: '电流有效值',
-        range: '大于CT一次变比',
-        unit: '',
-        quantity: 0
-    },
-    {
-        name: '单相功率因数',
-        range: '-1~1',
-        unit: '',
-        quantity: 0
-    },
-    {
-        name: '单相基波功率因数',
-        range: '-1~1',
-        unit: '',
-        quantity: 0
-    },
-    {
-        name: '三相功率因数',
-        range: '-1~1',
-        unit: '',
-        quantity: 0
-    },
-    {
-        name: '基波功率因数',
-        range: '-1~1',
-        unit: '',
-        quantity: 0
-    },
-    {
-        name: '电压总谐波畸变率',
-        range: '0~30%',
-        unit: '',
-        quantity: 0
-    },
-    {
-        name: '相（线）电压基波有效值',
-        range: '0~150%U',
-        unit: '',
-        quantity: 0
-    },
-    {
-        name: '相（线）电压基波相角',
-        range: '-180~180',
-        unit: '',
-        quantity: 0
-    },
-    {
-        name: '谐波电压含有率',
-        range: '0~30%',
-        unit: '',
-        quantity: 0
-    },
-    {
-        name: '谐波电压相角',
-        range: '-180~180',
-        unit: '',
-        quantity: 0
-    },
-    {
-        name: '间谐波电压含有率',
-        range: '0~30%',
-        unit: '',
-        quantity: 0
-    },
-    {
-        name: '正序、负序和零序电压',
-        range: '0~150%U',
-        unit: '',
-        quantity: 0
-    },
-    {
-        name: '负序电压不平衡度',
-        range: '0~40%',
-        unit: '',
-        quantity: 0
-    },
-    {
-        name: '零序电压不平衡度',
-        range: '0~40%',
-        unit: '',
-        quantity: 0
-    },
-    {
-        name: '电压波动',
-        range: '0~40%',
-        unit: '',
-        quantity: 0
-    },
-    {
-        name: '短时间闪变值',
-        range: '0~20',
-        unit: '',
-        quantity: 0
-    },
-    {
-        name: '长时间闪变值',
-        range: '0~20',
-        unit: '',
-        quantity: 0
-    },
-    {
-        name: '电压暂降特征幅值',
-        range: '0~90%',
-        unit: '',
-        quantity: 0
-    },
-    {
-        name: '电压暂升特征幅值',
-        range: '110%~180%',
-        unit: '',
-        quantity: 0
     }
-])
+]
 const tableStore = new TableStore({
-    url: '/user-boot/user/getAllUserSimpleList',
+    url: '/device-boot/dataVerify/getMonitorVerifyData',
-    method: 'GET',
+    method: 'POST',
-    isWebPaging: true,
     showPage: false,
     publicHeight: 480,
     column: [
-        { title: '序号', width: 80 },
+        {
+            title: '序号',
+            width: 80,
+            formatter: (row: any) => {
+                return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
+            }
+        },
         {
             title: '监测点名称',
-            field: 'name',
+            field: 'monitorName',
             type: 'html',
             formatter: (row, column) => {
                 return `<div class="table_name">${row.cellValue}</div>`
@@ -302,26 +198,39 @@ const tableStore = new TableStore({
         },
         {
             title: '所属终端名称',
-            field: 'name1',
+            field: 'devName',
             type: 'html',
             formatter: (row, column) => {
-                return `<div class="table_name">${row.cellValue}</div>`
+                return `<div class="table_name">测试终端</div>`
+                // `<div class="table_name">${row.cellValue}</div>`
             }
         },
         {
             title: '所属电站',
-            field: 'name2',
+            field: 'stationName',
             type: 'html',
             formatter: (row, column) => {
                 return `<div class="table_name">${row.cellValue}</div>`
             }
         },
-        { title: '监测对象类型', field: 'name3' },
+        {
-        { title: '监测对象名称', field: 'name4' },
+            title: '监测对象类型',
-        { title: '电压等级', field: 'name5' },
+            field: 'objType',
+            formatter: (row, column) => {
+                return `测试光伏电站`
+            }
+        },
+        {
+            title: '监测对象名称',
+            field: 'objName',
+            formatter: (row, column) => {
+                return `测试对象`
+            }
+        },
+        { title: '电压等级', field: 'voltageLevel' },
         {
             title: '告警天数',
-            field: 'name6',
+            field: 'abnormalDay',
             type: 'html',
             formatter: (row, column) => {
                 return `<div class="table_name">${row.cellValue}</div>`
@@ -329,7 +238,7 @@ const tableStore = new TableStore({
         },
         {
             title: '严重度',
-            field: 'name7',
+            field: 'severity',
             render: 'tag',
             custom: {
                 0: 'warning',
@@ -358,78 +267,12 @@ const tableStore = new TableStore({
         }
     ],
     loadCallback: () => {
-        tableStore.table.data = [
+        console.log('🚀 ~   abnormal.value:', tableStore.table.data)
-            {
+        monitoringPoints.value.runNum = tableStore.table.data.runNum //总数
-                name: '测试监测点1',
+        monitoringPoints.value.abnormalNum = tableStore.table.data.abnormalNum //告警测点数
-                name1: '025875',
+        abnormal.value = tableStore.table.data.targetList
-                name2: '测试变电站',
+        tableStore.table.data = tableStore.table.data.monitorAlarmInfo
-                name3: '测试光伏电站',
+        echart()
-                name4: '测试光伏电站',
-                name5: '110',
-                name6: '1',
-                name7: '0'
-            },
-            {
-                name: '测试监测点1',
-                name1: '025875',
-                name2: '测试变电站',
-                name3: '测试光伏电站',
-                name4: '测试光伏电站',
-                name5: '110',
-                name6: '1',
-                name7: '0'
-            },
-            {
-                name: '测试监测点1',
-                name1: '025875',
-                name2: '测试变电站',
-                name3: '测试光伏电站',
-                name4: '测试光伏电站',
-                name5: '110',
-                name6: '1',
-                name7: '0'
-            },
-            {
-                name: '测试监测点1',
-                name1: '025875',
-                name2: '测试变电站',
-                name3: '测试光伏电站',
-                name4: '测试光伏电站',
-                name5: '110',
-                name6: '1',
-                name7: '0'
-            },
-            {
-                name: '测试监测点1',
-                name1: '025875',
-                name2: '测试变电站',
-                name3: '测试光伏电站',
-                name4: '测试光伏电站',
-                name5: '110',
-                name6: '1',
-                name7: '0'
-            },
-            {
-                name: '测试监测点1',
-                name1: '025875',
-                name2: '测试变电站',
-                name3: '测试光伏电站',
-                name4: '测试光伏电站',
-                name5: '110',
-                name6: '1',
-                name7: '1'
-            },
-            {
-                name: '测试监测点1',
-                name1: '025875',
-                name2: '测试变电站',
-                name3: '测试光伏电站',
-                name4: '测试光伏电站',
-                name5: '110',
-                name6: '1',
-                name7: '1'
-            }
-        ]
     }
 })
 
@@ -465,231 +308,119 @@ const options = ref({
         ]
     }
 })
-
+const echart = () => {
-const percentage = ref({
+    percentage.value = {
-    // options: {
+        color: ['#ff9800'],
-    //     tooltip: {
-    //         show: false
-    //     },
-    //     grid: {
-    //         left: 50
-    //     },
-    //     toolbox: {
-    //         show: false
-    //     },
-    //     legend: {
-    //         show: false
-    //     },
-    //     dataZoom: null,
-    //     xAxis: {
-    //         max: 100,
-    //         splitLine: {
-    //             show: false
-    //         },
-    //         axisLine: {
-    //             show: false
-    //         },
-    //         axisLabel: {
-    //             show: false
-    //         },
-    //         axisTick: {
-    //             show: false
-    //         }
-    //     },
-
-    //     yAxis: [
-    //         {
-    //             type: 'category',
-    //             inverse: false,
-    //             data: ['占比'],
-    //             axisLine: {
-    //                 show: false
-    //             },
-    //             axisTick: {
-    //                 show: false
-    //             },
-    //             axisLabel: {
-    //                 show: false
-    //             }
-    //         }
-    //     ],
-    //     series: [
-    //         {
-    //             //内
-    //             type: 'bar',
-    //             barWidth: 18,
-
-    //             legendHoverLink: false,
-    //             silent: true,
-    //             itemStyle: {
-    //                 color: '#06b6a9'
-    //             },
-    //             label: {
-    //                 normal: {
-    //                     show: true,
-    //                     position: 'left',
-    //                     formatter: '{b}',
-    //                     textStyle: {
-    //                         color: '#000',
-    //                         fontSize: 14,
-    //                         fontWeight: 'bold'
-    //                     }
-    //                 }
-    //             },
-    //             data: [50],
-    //             z: 1,
-    //             animationEasing: 'elasticOut'
-    //         },
-    //         {
-    //             //分隔
-    //             type: 'pictorialBar',
-    //             itemStyle: {
-    //                 color: '#e4e7ed'
-    //             },
-    //             symbolRepeat: 'fixed',
-    //             symbolMargin: 4,
-    //             symbol: 'rect',
-    //             symbolClip: true,
-    //             symbolSize: [2, 21],
-    //             symbolPosition: 'start',
-    //             symbolOffset: [0, 0],
-    //             symbolBoundingData: 100,
-    //             data: [50],
-    //             z: 2,
-    //             animationEasing: 'elasticOut'
-    //         },
-    //         {
-    //             //外边框
-    //             type: 'pictorialBar',
-    //             symbol: 'rect',
-    //             symbolBoundingData: 100,
-    //             itemStyle: {
-    //                 normal: {
-    //                     color: 'none'
-    //                 }
-    //             },
-    //             label: {
-    //                 normal: {
-    //                     show: true,
-    //                     formatter: '{c}%',
-    //                     position: 'right',
-    //                     offset: [0, 0], //设置右边数据位置
-    //                     textStyle: {
-    //                         color: '#06b6a9',
-    //                         fontSize: 16,
-    //                         fontWeight: 600
-    //                     }
-    //                 }
-    //             },
-    //             data: [50],
-    //             z: 0,
-    //             animationEasing: 'elasticOut'
-    //         },
-    //         {
-    //             name: '外框',
-    //             type: 'bar',
-    //             barGap: '-100%', //设置外框粗细
-    //             data: [100],
-    //             barWidth: 26,
-    //             itemStyle: {
-    //                 normal: {
-    //                     color: '#e4e7ed', //填充色
-    //                     barBorderColor: '#e4e7ed', //边框色
-    //                     barBorderWidth: 1, //边框宽度
-    //                     // barBorderRadius: 0, //圆角半径
-    //                     label: {
-    //                         //标签显示位置
-    //                         show: false,
-    //                         position: 'top' //insideTop 或者横向的 insideLeft
-    //                     }
-    //                 }
-    //             },
-    //             z: 0
-    //         }
-    //     ]
-    // }
         options: {
+            dataZoom: null,
             toolbox: {
                 show: false
             },
+            grid: {
+                top: '0%',
+                left: '2%',
+                right: '2%',
+                bottom: '0%'
+            },
+            tooltip: {
+                show: false
+            },
             legend: {
                 show: false
             },
-        dataZoom: null,
+            yAxis: {
-        title: {
+                show: false,
-            text: `{t|占比}
+                data: ['']
-  {v|50%}`,
-            x: 'center',
-            y: 'center',
-            textStyle: {
-                color: config.layout.elementUiPrimary[0],
-
-                rich: {
-                    v: {
-                        fontSize: 28,
-                        fontWeight: '550',
-                        color: config.layout.elementUiPrimary[0]
             },
+            xAxis: [
+                {
+                    show: false,
+                    type: 'value'
+                }
+            ],
 
-                    t: {
-                        lineHeight: 28,
-                        fontSize: 16
-                    }
-                }
-            }
-        },
-        color: ['#ccc'],
             series: [
                 {
-                name: 'Line 1',
+                    name: '告警占比',
-                type: 'pie',
+                    type: 'bar',
-                clockWise: true,
+                    barWidth: 12,
-                radius: ['63%', '80%'],
+                    data: [((monitoringPoints.value.abnormalNum / monitoringPoints.value.runNum) * 100).toFixed(2)],
-                itemStyle: {
+                    z: 0,
-                    normal: {
+                    zlevel: 0,
-                        label: {
-                            show: false
-                        },
-                        labelLine: {
-                            show: false
-                        }
-                    }
-                },
-                hoverAnimation: false,
-                data: [
-                    {
-                        value: 80,
-                        name: '01',
-                        itemStyle: {
-                            normal: {
-                                color: config.layout.elementUiPrimary[0],
-                                label: {
-                                    show: false
-                                },
-                                labelLine: {
-                                    show: false
-                                }
-                            }
-                        }
-                    },
-                    {
-                        name: '02',
-                        value: 20
-                    }
-                ]
-            }
-        ]
-    }
-})
 
-tableStore.table.params.radio = '1'
+                    itemStyle: {
-tableStore.table.params.alarm = 5
+                        normal: {
-tableStore.table.params.earlyWarning = 1
+                            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()
 })
@@ -733,7 +464,7 @@ provide('tableStore', tableStore)
                     background-color: #eef8f0;
                 }
                 &:nth-child(2) {
-                    background-color: #fff6ed;
+                    background-color: #ffd7d7;
                 }
                 &:nth-child(3) {
                     background-color: #e5f8f6;
@@ -808,4 +539,24 @@ provide('tableStore', tableStore)
     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/components/alarmDetails.vue

@@ -1,9 +1,8 @@
 <template>
     <el-dialog draggable width="1300px" class="cn-operate-dialog" v-model="dialogVisible" :title="title">
         <div style="display: flex">
-            <el-tabs v-model="activeName" type="border-card" class="mr10" style="width: 450px">
+            
-                <el-tab-pane label="告警监测点详情" name="first">
+                    <div :style="height1" class="mr10" style="width: 450px">
-                    <div :style="height">
                         <vxe-table  height="auto" :data="TableData" v-bind="defaultAttribute">
                             <vxe-column type="seq" title="序号" width="60px"></vxe-column>
                             <vxe-column field="time" title="日期">
@@ -15,8 +14,7 @@
                             <vxe-column field="fz" title="告警时间(分钟)" width="80px"></vxe-column>
                         </vxe-table>
                     </div>
-                </el-tab-pane>
+        
-            </el-tabs>
             <el-tabs v-model="activeName" type="border-card" style="width: 820px">
                 <el-tab-pane :label="`变电站1 > 测试监测点1_告警指标详情`" name="first">
                     <div :style="height">
@@ -45,6 +43,7 @@ import { ElMessage } from 'element-plus'
 import TableStore from '@/utils/tableStore' // 若不是列表页面弹框可删除
 import { mainHeight } from '@/utils/layout'
 const dialogVisible = ref(false)
+const height1 = mainHeight(-110, 2)
 const height = mainHeight(10, 2)
 const title = ref('')
 const activeName = 'first'
@@ -162,7 +161,7 @@ const TableData1 = ref([
 ])
 
 const open = (data: anyObj) => {
-    title.value = data.name + '_告警详情展示'
+    title.value = data.targetName + '_告警详情展示'
     dialogVisible.value = true
 }
 

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

@@ -1,9 +1,8 @@
 <template>
     <el-dialog draggable width="1300px" class="cn-operate-dialog" v-model="dialogVisible" :title="title">
         <div style="display: flex">
-            <el-tabs v-model="activeName" type="border-card" class="mr10" style="width: 450px">
+            
-                <el-tab-pane label="异常监测点详情" name="first">
+                    <div :style="height1" class="mr10" style="width: 450px">
-                    <div :style="height">
                         <vxe-table  height="auto" :data="TableData" v-bind="defaultAttribute">
                             <vxe-column type="seq" title="序号" width="60px"></vxe-column>
                             <vxe-column field="time" title="日期">
@@ -15,8 +14,7 @@
                             <vxe-column field="fz" title="异常时间(分钟)" width="80px"></vxe-column>
                         </vxe-table>
                     </div>
-                </el-tab-pane>
+        
-            </el-tabs>
             <el-tabs v-model="activeName" type="border-card" style="width: 820px">
                 <el-tab-pane :label="`变电站1 > 测试监测点1_异常指标详情`" name="first">
                     <div :style="height">
@@ -45,6 +43,7 @@ import { ElMessage } from 'element-plus'
 import TableStore from '@/utils/tableStore' // 若不是列表页面弹框可删除
 import { mainHeight } from '@/utils/layout'
 const dialogVisible = ref(false)
+const height1 = mainHeight(-110, 2)
 const height = mainHeight(10, 2)
 const title = ref('')
 const activeName = 'first'
@@ -162,7 +161,7 @@ const TableData1 = ref([
 ])
 
 const open = (data: anyObj) => {
-    title.value = data.name + '_异常详情展示'
+    title.value = data.targetName + '_异常详情展示'
     dialogVisible.value = true
 }
 

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

@@ -1,8 +1,8 @@
 <template>
     <div class="default-main">
-        <el-tabs type="border-card">
+        <el-tabs type="border-card" v-model="activeName">
-            <el-tab-pane label="异常数据清洗"><abnormal /></el-tab-pane>
+            <el-tab-pane label="异常数据统计" name="1"><abnormal v-if="activeName == '1'"/></el-tab-pane>
-            <el-tab-pane label="稳态告警统计"><alarm /></el-tab-pane>
+            <el-tab-pane label="稳态告警统计" name="2"><alarm v-if="activeName == '2'"/></el-tab-pane>
         </el-tabs>
     </div>
 </template>
@@ -13,5 +13,6 @@ defineOptions({
 import abnormal from './components/abnormal.vue'
 import alarm from './components/alarm.vue'
 import { ref, reactive } from 'vue'
+const activeName = ref(`1`)
 </script>
 <style lang="scss" scoped></style>

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

@@ -0,0 +1,124 @@
+<template>
+    <div class="mt10 mr5 btnsBox">
+        <el-radio-group v-model="radio2">
+            <el-radio-button label="区域" value="1" />
+            <el-radio-button label="变电站" value="2" />
+            <el-radio-button label="用户" value="3" />
+        </el-radio-group>
+    </div>
+    <div :style="height">
+        <MyEChart :options="options" />
+    </div>
+</template>
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+import MyEChart from '@/components/echarts/MyEchart.vue'
+import { mainHeight } from '@/utils/layout'
+const radio2 = ref('1')
+const height = mainHeight(300, 1.5)
+const options = ref({})
+const info = () => {
+    let dataSource = [
+        { value: '90',  name: '张家口' },
+        { value: '80',  name: '廊坊' },
+        { value: '70',  name: '秦皇岛' },
+        { value: '60',  name: '唐山' },
+        { value: '50',  name: '承德' },
+    
+    ]
+    options.value = {
+        xAxis: {
+            type: 'value',
+            axisLabel: {
+                show: true,
+                textStyle: {
+                    color: '#FFF'
+                }
+            },
+            splitLine: {
+                show: false
+            },
+            axisTick: {
+                show: false
+            },
+            axisLine: {
+                show: true
+            }
+        },
+        grid: {
+            top: '10'
+        },
+        toolbox: {
+            show: false
+        },
+        options: {
+            yAxis: {
+                type: 'category',
+                data: dataSource.map(item => item.name),
+                axisLabel: {
+                    color: '#fff'
+                },
+                splitLine: {
+                    show: false
+                }
+            },
+            dataZoom: null,
+            series: [
+                {
+                    type: 'bar',
+                    itemStyle: {
+                        color: function (params) {
+                            return params.value >= 90
+                                ? '#009900'
+                                : params.value >= 60
+                                ? '#FFCC00'
+                                : params.value > 0
+                                ? '#CC0000'
+                                : '#CCC'
+                        }
+                    },
+
+                    data: dataSource.map(item => item.value)
+                }
+            ]
+        }
+    }
+}
+onMounted(() => {
+    info()
+})
+</script>
+<style lang="scss" scoped>
+.btnsBox {
+    display: flex;
+    justify-content: end;
+}
+::v-deep .el-radio-button__inner {
+    padding: 8px 18px;
+    background: var(--el-color-primary);
+    border: 1px solid #00fff4;
+    border-radius: 0;
+    font-weight: normal;
+    color: #ffffff;
+    text-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.73);
+    opacity: 0.52;
+}
+::v-deep .el-radio-button:last-child .el-radio-button__inner {
+    border-radius: 0;
+}
+::v-deep .el-radio-button:first-child .el-radio-button__inner {
+    border-radius: 0;
+    border-left: 1px solid #00fff4;
+}
+::v-deep .is-active {
+    border: 1px solid #00fff4;
+    opacity: 1 !important;
+    color: #ffffff;
+    background: var(--el-color-primary);
+    
+    .el-radio-button__inner{
+        opacity: 1 !important;
+        border-left: 1px solid #00fff4 !important;
+    }
+}
+</style>

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

@@ -0,0 +1,138 @@
+<template>
+    <div :style="height">
+        <MyEChart :options="options" />
+    </div>
+    <div class="boxBG">
+        <div class="appraise">
+            <div class="iconfont icon-wanzhengshuaifenxi2"></div>
+            <div class="right">
+                <span>完整率</span>
+                <span>优</span>
+            </div>
+        </div>
+        <div class="appraise">
+            <div class="iconfont icon-zaixianshuaibaobiao0"></div>
+            <div class="right">
+                <span>在线率</span>
+                <span>优</span>
+            </div>
+        </div>
+        <div class="appraise">
+            <div class="iconfont icon-dianyahegeshuai"></div>
+            <div class="right">
+                <span>合格率</span>
+                <span>优</span>
+            </div>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+import MyEChart from '@/components/echarts/MyEchart.vue'
+import { mainHeight } from '@/utils/layout'
+
+const options = ref({})
+const height = mainHeight(650, 1.5)
+
+const info = () => {
+    options.value = {
+        xAxis: {
+            axisLabel: {
+                show: true,
+                textStyle: {
+                    color: '#FFF'
+                }
+            },
+            splitLine: {
+                show: false
+            },
+            axisTick: {
+                show: false
+            },
+            axisLine: {
+                show: true
+            },
+            data: ['运行', '调试', '停运']
+        },
+
+        grid: {
+            top: '30'
+        },
+        toolbox: {
+            show: false
+        },
+        yAxis: {
+            axisLine: {
+                show: true
+            },
+            axisLabel: {
+                color: '#fff'
+            },
+            splitLine: {
+                show: false
+            }
+        },
+
+        options: {
+            dataZoom: null,
+
+            series: [
+                {
+                    type: 'bar',
+                    data: [45, 5, 1],
+                    itemStyle: {
+                        color: function (params) {
+                            // 根据索引返回不同颜色
+                            var colorList = ['#00CC00', '#FF9900', '#CC0000']
+                            return colorList[params.dataIndex]
+                        }
+                    }
+                }
+            ]
+        }
+    }
+}
+
+onMounted(() => {
+    info()
+})
+</script>
+<style lang="scss" scoped>
+.boxBG {
+    display: flex;
+    justify-content: space-around;
+    .appraise {
+        width: 30%;
+        background-image: url('@/assets/imgs/bg02.png');
+        background-size: 100% 100%;
+        display: inline-block;
+        height: 80px;
+        color: #fff;
+        display: flex;
+        justify-content: center;
+        .right {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            font-size: 14px;
+            span:nth-child(2) {
+                font-size: 20px;
+                font-weight: 600;
+                margin-top: 5px;
+                color: #00cc00;
+            }
+        }
+        .iconfont {
+            width: 50px;
+            height: 50px;
+            background-color: var(--el-color-primary);
+            font-size: 30px;
+            text-align: center;
+            line-height: 50px;
+            border-radius: 10px;
+            margin: 15px 10px 15px 0;
+        }
+    }
+}
+</style>

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

@@ -0,0 +1,61 @@
+<template>
+    <div style="height:150px" class="box">
+        <div class="boxDiv">
+            <div style="color: #07ccca">300</div>
+            <img src="@/assets/imgs/ditu.png" />
+            <div class="mt10 divBot">总数</div>
+        </div>
+        <div class="boxDiv">
+            <div style="color: #339900">250</div>
+            <img src="@/assets/imgs/ditu.png" />
+            <div class="mt10 divBot">在运</div>
+        </div>
+        <div class="boxDiv">
+            <div style="color: #cc0000">50</div>
+            <img src="@/assets/imgs/ditu.png" />
+            <div class="mt10 divBot">停运</div>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+import MyEChart from '@/components/echarts/MyEchart.vue'
+import { mainHeight } from '@/utils/layout'
+import { color } from '@/components/echarts/color'
+const height = mainHeight(330, 3)
+
+const info = () => {}
+onMounted(() => {
+    info()
+})
+</script>
+<style lang="scss" scoped>
+.box {
+    display: flex;
+    align-items: center;
+    
+    .boxDiv {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        position: relative;
+        margin-top: 20px;
+        img {
+            width: 80%;
+        }
+        div:nth-child(1) {
+            position: absolute;
+            font-size: 30px;
+            top: -10px;
+            font-weight: 700;
+        }
+        .divBot {
+            font-size: 16px;
+            position: absolute;
+            top: -45px;
+        }
+        color: #fff;
+    }
+}
+</style>

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

@@ -0,0 +1,82 @@
+<template>
+    <div :style="height" class="mt10">
+        <vxe-table height="auto" v-bind="defaultAttribute" :data="tableData">
+            <vxe-column type="seq" title="序号"></vxe-column>
+            <vxe-column field="a" title="终端名称"></vxe-column>
+            <vxe-column field="b" title="所属电站"></vxe-column>
+            <vxe-column field="c" title="完整性"></vxe-column>
+            <vxe-column field="d" title="在线率"></vxe-column>
+            <vxe-column field="e" title="合格率"></vxe-column>
+        </vxe-table>
+    </div>
+</template>
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+import { mainHeight } from '@/utils/layout'
+import { defaultAttribute } from '@/components/table/defaultAttribute'
+const tableData = ref([
+    {
+        a: '025875',
+        b: '测试变电站1',
+        c: '60',
+        d: '95',
+        e: '66'
+    },
+    {
+        a: '025876',
+        b: '测试变电站2',
+        c: '60',
+        d: '95',
+        e: '66'
+    }
+])
+const height = mainHeight(360, 3)
+
+const info = () => {}
+onMounted(() => {
+    info()
+})
+</script>
+<style lang="scss" scoped>
+// :deep(.vxe-header--row) {
+//     background: #071de2 !important;
+//     color: #fff !important;
+// }
+
+/*调整表格 单元格背景颜色*/
+:deep(.vxe-table .vxe-table--body-wrapper, .vxe-table .vxe-table--footer-wrapper) {
+    background: #ffffff00 !important;
+}
+:deep(.vxe-table--render-wrapper) {
+    background-color: #ffffff00 !important;
+}
+:deep(.vxe-table--body .vxe-body--row) {
+    background-color:#ffffff2e !important;
+}
+
+:deep(.vxe-table--render-default .vxe-table--body-wrapper table) {
+    background-color: #00000000 !important;
+    color: #fff;
+}
+:deep(
+        .vxe-table--render-default.border--full .vxe-body--column,
+        .vxe-table--render-default.border--full .vxe-footer--column,
+        .vxe-table--render-default.border--full .vxe-header--column,
+
+    ) {
+    background-image: linear-gradient(#00fff4, #00fff4), linear-gradient(#00fff4, #00fff4);
+}
+:deep(
+
+        .vxe-table--render-default.border--full .vxe-header--column
+    ) {
+    background-image: linear-gradient(#00fff4, #00fff4), linear-gradient(#00fff4, #00fff4) !important;
+}
+:deep(.vxe-table--render-default .vxe-table--border-line){
+    border: var(--vxe-table-border-width) solid #00fff4;
+}
+:deep(.vxe-header--row) {
+    background: var(--el-color-primary);
+    color:#fff;
+}
+</style>

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

@@ -0,0 +1,122 @@
+<template>
+    <div>
+        <div :style="height" style="width: 100%" ref="chartRef"></div>
+    </div>
+</template>
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+import echarts from '@/components/echarts/echarts'
+import { useDictData } from '@/stores/dictData'
+import { color } from '@/components/echarts/color'
+import { mainHeight } from '@/utils/layout'
+
+
+const height = mainHeight(330, 3)
+const chartRef = ref<HTMLDivElement>()
+const info = () => {
+    let chart = echarts.init(chartRef.value as HTMLDivElement)
+    let option = {
+        toolbox: {
+            show: false
+        },
+        tooltip: {
+            trigger: 'item',
+            axisPointer: {
+                type: 'shadow',
+                label: {
+                    color: '#fff',
+                    fontSize: 14
+                }
+            },
+            textStyle: {
+                color: '#fff',
+                fontStyle: 'normal',
+                opacity: 0.35,
+                fontSize: 14
+            },
+            backgroundColor: 'rgba(0,0,0,0.55)',
+            borderWidth: 0,
+            confine: true
+        },
+
+        radar: {
+            shape: 'circle',
+            center: ['50%', '55%'],
+            name: {
+                textStyle: {
+                    color: '#fff',
+                    fontSize: 14
+                }
+            },
+            indicator: [
+                {
+                    text: '完整率',
+                    min: 0,
+                    max: 100
+                },
+                {
+                    text: '合格率',
+                    min: 0,
+                    max: 100
+                },
+                {
+                    text: '在线率',
+                    min: 0,
+                    max: 100
+                }
+            ],
+            splitArea: {
+                // 坐标轴在 grid 区域中的分隔区域，默认不显示。
+                show: true,
+                areaStyle: {
+                    // 分隔区域的样式设置。
+                    color: ['rgba(27, 50, 66, 0.4)']
+                }
+            },
+            axisLine: {
+                //指向外圈文本的分隔线样式
+                lineStyle: {
+                    color: '#5aa3d0'
+                }
+            },
+            splitLine: {
+                lineStyle: {
+                    color: 'rgba(99,192,251,0.2)', // 分隔线颜色
+                    width: 2 // 分隔线线宽
+                }
+            }
+        },
+        series: {
+            name: '',
+            type: 'radar',
+            symbolSize: 8,
+            itemStyle: {
+                borderColor: color[1],
+                borderWidth: 2
+            },
+            areaStyle: {
+                normal: {
+                    width: 1,
+                    opacity: 0.3
+                }
+            },
+            data: [
+                {
+                    itemStyle: {
+                        normal: {
+                            color: color[1]
+                        }
+                    },
+                    value: [20, 33, 80]
+                }
+            ]
+        }
+    }
+
+    chart.setOption(option)
+}
+onMounted(() => {
+    info()
+})
+</script>
+<style lang="scss" scoped></style>

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

@@ -0,0 +1,119 @@
+<template>
+    <div :style="height">
+        <MyEChart :options="options" />
+    </div>
+</template>
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+import MyEChart from '@/components/echarts/MyEchart.vue'
+import { mainHeight } from '@/utils/layout'
+import { yMethod } from '@/utils/echartMethod'
+const options = ref({})
+const height = mainHeight(330, 3)
+
+const info = () => {
+    let [min, max] = yMethod([80, 99])
+    options.value = {
+        xAxis: {
+            axisLabel: {
+                show: true,
+                textStyle: {
+                    color: '#FFF'
+                }
+            },
+            splitLine: {
+                show: false
+            },
+            axisTick: {
+                show: false
+            },
+            axisLine: {
+                show: true
+            },
+            data: ['03-24', '03-25', '03-26', '03-27', '03-28', '03-29', '03-30']
+        },
+        legend: {
+            textStyle: {
+                color: '#fff'
+            }
+        },
+        grid: {
+            top: '50',
+            left: '20',
+            right: '20'
+        },
+        toolbox: {
+            show: false
+        },
+        yAxis: {
+            min: min,
+            max: 100,
+            axisLine: {
+                show: true
+            },
+            axisLabel: {
+                color: '#fff'
+            },
+            splitLine: {
+                show: false
+            }
+        },
+        // color: [color[1]],
+        // ['承德', '唐山', '秦皇岛', '廊坊', '张家口']
+        options: {
+            dataZoom: null,
+            series: [
+                {
+                    name: '承德',
+                    type: 'line',
+                    symbol: 'circle',
+                    smooth: true,
+                    showSymbol: false,
+
+                    data: [80, 82, 90, 92, 97,100,100]
+                },
+                {
+                    name: '唐山',
+                    type: 'line',
+                    symbol: 'circle',
+                    smooth: true,
+                    showSymbol: false,
+
+                    data: [83, 84, 91, 93, 98,100,100]
+                },
+                {
+                    name: '秦皇岛',
+                    type: 'line',
+                    symbol: 'circle',
+                    smooth: true,
+                    showSymbol: false,
+
+                    data: [84, 82, 90, 90, 95,100,100]
+                },
+                {
+                    name: '廊坊',
+                    type: 'line',
+                    symbol: 'circle',
+                    smooth: true,
+                    showSymbol: false,
+
+                    data: [87, 82, 90, 94, 97,100,100]
+                },
+                {
+                    name: '张家口',
+                    type: 'line',
+                    symbol: 'circle',
+                    smooth: true,
+                    showSymbol: false,
+
+                    data: [90, 92, 95, 97, 100,100,100]
+                }
+            ]
+        }
+    }
+}
+onMounted(() => {
+    info()
+})
+</script>
+<style lang="scss" scoped></style>

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

@@ -20,9 +20,108 @@
             </template>
 
             <template v-slot:operation>
-                <el-button type="primary" class="ml10" @click="toggle" :icon="leftVisible ? 'el-icon-Hide' : 'el-icon-View'">
+                <el-button
+                    type="primary"
+                    class="ml10"
+                    @click="toggle"
+                    :icon="leftVisible ? 'el-icon-Hide' : 'el-icon-View'"
+                >
                     {{ leftVisible ? '隐藏' : '显示' }}
                 </el-button>
+
+                <el-tooltip    placement="left-start">
+                    <InfoFilled style="height: 20px" class="ml10" />
+                    <!-- <el-button circle icon="el-icon-InfoFilled" /> -->
+                    <template #content>
+                        <div style="font-size: 16px " class="mt10 mb10">
+                            <div>终端在线率</div>
+                            <div class="em1">定义：终端在指定时间段内处于在线状态的时间比例。</div>
+                            <div class="em1">计算方法：在线率=终端在线时间/总监测时间×100%</div>
+                            <div class="em1">评价标准：</div>
+                            <div class="em2">
+                                <span style="color: #00b07d">优秀</span>
+                                　在线率 ≥ 95%
+                            </div>
+                            <div class="em2">
+                                <span style="color: #2b7fd3">良好</span>
+                                　90% ≤ 在线率 < 95
+                            </div>
+                            <div class="em2">
+                                <span style="color: #ffcc33">一般</span>
+                                　80% ≤ 在线率 < 90%
+                            </div>
+                            <div class="em2">
+                                <span style="color: #97017e">较差</span>
+                                　在线率 < 80%
+                            </div>
+
+                            <div class="mt10">数据完整性</div>
+                            <div class="em1">定义：终端上传数据的完整性和连续性</div>
+                            <div class="em1">计算方法：数据完整性=实际上传数据量/预期上传数据量×100%</div>
+                            <div class="em1">评价标准：</div>
+                            <div class="em2">
+                                <span style="color: #00b07d">优秀</span>
+                                　完整性 ≥ 98%
+                            </div>
+                            <div class="em2">
+                                <span style="color: #2b7fd3">良好</span>
+                                　95% ≤ 完整性 < 98%
+                            </div>
+                            <div class="em2">
+                                <span style="color: #ffcc33">一般</span>
+                                　90% ≤ 完整性 < 95%
+                            </div>
+                            <div class="em2">
+                                <span style="color: #97017e">较差</span>
+                                　完整性 < 90%
+                            </div>
+
+                            <div class="mt10">数据合格率</div>
+                            <div class="em1">定义：终端上传数据的合格率(以谐波电压为代表)。</div>
+                            <div class="em1">计算方法：合格率=合格数据量/总数据量×100%</div>
+                            <div class="em1">评价标准：</div>
+                            <div class="em2">
+                                <span style="color: #00b07d">优秀</span>
+                                　完整性 ≥ 98%
+                            </div>
+                            <div class="em2">
+                                <span style="color: #2b7fd3">良好</span>
+                                　95% ≤ 完整性 < 98%
+                            </div>
+                            <div class="em2">
+                                <span style="color: #ffcc33">一般</span>
+                                　90% ≤ 完整性 < 95%
+                            </div>
+                            <div class="em2">
+                                <span style="color: #97017e">较差</span>
+                                　完整性 < 90%
+                            </div>
+                            <div class="mt10">综合评价方法</div>
+                            <div class="em1">权重分配:根据各维度的重要性，分配不同的权重。例如:</div>
+                            <div class="em2">终端在线率:20%</div>
+                            <div class="em2">数据完整性:50%</div>
+                            <div class="em2">数据合格率:30%</div>
+                            <div class="em1">综合评分:综合评分=∑(单项评分x权重)</div>
+                            <div class="em1">评价等级:</div>
+                            <div class="em2">
+                                <span style="color: #00b07d">优秀</span>
+                                　综合评分 ≥ 90
+                            </div>
+                            <div class="em2">
+                                <span style="color: #2b7fd3">良好</span>
+                                　80 ≤ 综合评分 < 90
+                            </div>
+                            <div class="em2">
+                                <span style="color: #ffcc33">一般</span>
+                                　70 ≤ 综合评分 < 80
+                            </div>
+                            <div class="em2">
+                                <span style="color: #97017e">较差</span>
+                                　综合评分 < 70
+                            </div>
+                        </div>
+                    </template>
+                </el-tooltip>
             </template>
         </TableHeader>
         <Map />
@@ -30,6 +129,7 @@
         <transition name="slide-left">
             <div class="left" :style="height" v-if="leftVisible">
                 <BorderBox13
+                    style="height: 200px"
                     :color="[color[0], color[0]]"
                     class="box"
                     :backgroundColor="`${color[0]}24`"
@@ -39,10 +139,12 @@
                         <span class="iconfont icon-zhongduantongji-xian"></span>
                         终端统计
                     </div>
+                    <statistics />
                 </BorderBox13>
                 <BorderBox13
                     :color="[color[0], color[0]]"
                     class="box"
+                    style="flex: 1"
                     :backgroundColor="`${color[0]}24`"
                     title="终端运行评价"
                 >
@@ -50,8 +152,10 @@
                         <span class="iconfont icon-daipingjia"></span>
                         终端运行评价
                     </div>
+                    <run />
                 </BorderBox13>
                 <BorderBox13
+                    :style="height3"
                     :color="[color[0], color[0]]"
                     class="box"
                     :backgroundColor="`${color[0]}24`"
@@ -61,6 +165,7 @@
                         <span class="iconfont icon-a-qushi1"></span>
                         最近一周终端评价趋势
                     </div>
+                    <week />
                 </BorderBox13>
             </div>
         </transition>
@@ -77,8 +182,11 @@
                         <span class="iconfont icon-a-ziyuan118"></span>
                         区域终端运行评价
                     </div>
+                    <region />
                 </BorderBox13>
+                <div :style="height3">
                     <BorderBox13
+                        style="height: 100%"
                         :color="[color[0], color[0]]"
                         class="box"
                         :backgroundColor="`${color[0]}24`"
@@ -88,8 +196,10 @@
                             <span class="iconfont icon-yunhangxiangqing"></span>
                             终端运行评价详情
                         </div>
+                        <terminalOperation />
                     </BorderBox13>
                 </div>
+            </div>
         </transition>
 
         <transition name="slide-bottom">
@@ -104,6 +214,8 @@
                         <span class="iconfont icon-yichangxiangqing-xian"></span>
                         异常终端详情
                     </div>
+                    <terminalDetails />
+                    <table />
                 </BorderBox13>
             </div>
         </transition>
@@ -118,6 +230,13 @@ import { mainHeight } from '@/utils/layout'
 import Map from './components/map.vue'
 import { BorderBox13 } from '@kjgl77/datav-vue3'
 import { useConfig } from '@/stores/config'
+import terminalOperation from './components/terminalOperation.vue'
+import region from './components/region.vue'
+import { InfoFilled } from '@element-plus/icons-vue'
+import week from './components/week.vue'
+import terminalDetails from './components/terminalDetails.vue'
+import statistics from './components/statistics.vue'
+import run from './components/run.vue'
 const config = useConfig()
 const color = config.layout.elementUiPrimary
 const dictData = useDictData()
@@ -257,4 +376,12 @@ onMounted(() => {
     transform: translateY(100%);
     opacity: 0;
 }
+.em1 {
+    margin-top: 5px;
+    text-indent: 1em;
+}
+.em2 {
+    margin-top: 5px;
+    text-indent: 2em;
+}
 </style>