修好页面ui

src/assets/font/demo_index.html

@@ -54,6 +54,18 @@
       <div class="content unicode" style="display: block;">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+              <span class="icon iconfont">&#xe82f;</span>
+                <div class="name">综合评价</div>
+                <div class="code-name">&amp;#xe82f;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe608;</span>
+                <div class="name">综合评价</div>
+                <div class="code-name">&amp;#xe608;</div>
+              </li>
+          
             <li class="dib">
               <span class="icon iconfont">&#xe70e;</span>
                 <div class="name">电压合格率</div>
@@ -222,9 +234,9 @@
 <pre><code class="language-css"
 >@font-face {
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1743573122508') format('woff2'),
+  src: url('iconfont.woff2?t=1744179175277') format('woff2'),
-       url('iconfont.woff?t=1743573122508') format('woff'),
+       url('iconfont.woff?t=1744179175277') format('woff'),
-       url('iconfont.ttf?t=1743573122508') format('truetype');
+       url('iconfont.ttf?t=1744179175277') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -250,6 +262,24 @@
       <div class="content font-class">
         <ul class="icon_lists dib-box">
           
+          <li class="dib">
+            <span class="icon iconfont icon-zonghepingjia1"></span>
+            <div class="name">
+              综合评价
+            </div>
+            <div class="code-name">.icon-zonghepingjia1
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-zonghepingjia"></span>
+            <div class="name">
+              综合评价
+            </div>
+            <div class="code-name">.icon-zonghepingjia
+            </div>
+          </li>
+          
           <li class="dib">
             <span class="icon iconfont icon-dianyahegeshuai"></span>
             <div class="name">
@@ -502,6 +532,22 @@
       <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-zonghepingjia1"></use>
+                </svg>
+                <div class="name">综合评价</div>
+                <div class="code-name">#icon-zonghepingjia1</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-zonghepingjia"></use>
+                </svg>
+                <div class="name">综合评价</div>
+                <div class="code-name">#icon-zonghepingjia</div>
+            </li>
+          
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-dianyahegeshuai"></use>

src/assets/font/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 3482754 */
-  src: url('iconfont.woff2?t=1743573122508') format('woff2'),
+  src: url('iconfont.woff2?t=1744179175277') format('woff2'),
-       url('iconfont.woff?t=1743573122508') format('woff'),
+       url('iconfont.woff?t=1744179175277') format('woff'),
-       url('iconfont.ttf?t=1743573122508') format('truetype');
+       url('iconfont.ttf?t=1744179175277') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,14 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-zonghepingjia1:before {
+  content: "\e82f";
+}
+
+.icon-zonghepingjia:before {
+  content: "\e608";
+}
+
 .icon-dianyahegeshuai:before {
   content: "\e70e";
 }

src/assets/font/iconfont.json

@@ -5,6 +5,20 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "32402696",
+      "name": "综合评价",
+      "font_class": "zonghepingjia1",
+      "unicode": "e82f",
+      "unicode_decimal": 59439
+    },
+    {
+      "icon_id": "35737077",
+      "name": "综合评价",
+      "font_class": "zonghepingjia",
+      "unicode": "e608",
+      "unicode_decimal": 58888
+    },
     {
       "icon_id": "11708319",
       "name": "电压合格率",

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

@@ -201,8 +201,8 @@ const alarmDetailsRef = ref()
 const dictData = useDictData()
 //字典获取监督对象类型
 const objTypeList: any = ref([])
-const pageHeight = mainHeight(157)
+const pageHeight = mainHeight(97)
-const indicatorHeight = mainHeight(462)
+const indicatorHeight = mainHeight(402)
 
 const monitoringPoints = ref({
     runNum: 0,
@@ -222,7 +222,7 @@ const tableStore = new TableStore({
     method: 'POST',
     showPage: false,
     filename: '稳态告警统计',
-    publicHeight: 530,
+    publicHeight: 470,
     column: [],
     beforeSearchFun: () => {
         loading.value = true

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

@@ -28,11 +28,16 @@
                             <span>{{ (pageNum - 1) * pageSize + rowIndex + 1 }}</span>
                         </template>
                     </vxe-column>
-                    <vxe-column field="time" title="时间" width="150px"></vxe-column>
+                    <vxe-column field="time" title="时间" :formatter="formatter" width="150px"></vxe-column>
-                    <vxe-column field="targetName" title="指标类型" min-width="100px"></vxe-column>
+                    <vxe-column
+                        field="targetName"
+                        title="指标类型"
+                        min-width="100px"
+                        :formatter="formatter"
+                    ></vxe-column>
                     <vxe-column field="phaseType" title="相别" width="60px"></vxe-column>
 
-                    <vxe-column field="type" title="数据类型" width="105px" :formatter="formatter1"></vxe-column>
+                    <vxe-column field="type" title="数据类型" width="105px" :formatter="formatter"></vxe-column>
                     <vxe-column field="val" title="值" width="85px" :formatter="formatter"></vxe-column>
                 </vxe-table>
                 <div class="table-pagination">
@@ -51,11 +56,13 @@
 </template>
 <script lang="ts" setup>
 import { ref, inject } from 'vue'
-import { reactive } from 'vue'
+import { useDictData } from '@/stores/dictData'
 import { defaultAttribute } from '@/components/table/defaultAttribute'
 import { ElMessage } from 'element-plus'
 import { monitorLimitTable, monitorLimitTableDetail } from '@/api/device-boot/dataVerify'
 import { mainHeight } from '@/utils/layout'
+const dictData = useDictData()
+const StatisList = dictData.getBasicData('Steady_Statis')
 const dialogVisible = ref(false)
 const height1 = mainHeight(-110, 2)
 const height = mainHeight(10, 2)
@@ -68,6 +75,7 @@ const pageNum = ref(1)
 const pageSize = ref(20)
 const numKey = ref(0)
 const targetKey = ref('')
+const clickRow = ref({})
 const open = (data: anyObj, time: string[], num: number) => {
     // title.value = (num == 0 ? data.targetName : data.monitorName) + '_告警详情展示'
     title.value = '告警监测点详情'
@@ -88,11 +96,11 @@ const open = (data: anyObj, time: string[], num: number) => {
 }
 const currentChangeEvent = () => {
     loading1.value = true
-    let data = tableRef.value.getCurrentRecord()
+    clickRow.value = tableRef.value.getCurrentRecord()
     TableData1.value = []
     monitorLimitTableDetail({
-        monitorIds: [data.monitorId],
+        monitorIds: [clickRow.value.monitorId],
-        searchBeginTime: data.date,
+        searchBeginTime: clickRow.value.date,
         targetKey: numKey.value == 0 ? targetKey.value : ''
     })
         .then(res => {
@@ -104,11 +112,16 @@ const currentChangeEvent = () => {
             loading1.value = false
         })
 }
-const formatter1 = (row: any) => {
-    return row.cellValue == null ? '/' : row.cellValue
-}
 const formatter = (row: any) => {
-    return row.cellValue == null ? '/' : (row.cellValue - 0).toFixed(2)
+    if (row.column.field == 'time') {
+        return clickRow.value.date + ' ' + row.cellValue
+    } else if (row.column.field == 'targetName') {
+        return StatisList.filter(item => item.code == row.cellValue)[0].name
+    } else if (row.column.field == 'type') {
+        return row.cellValue === 'null' ? '/' : row.cellValue
+    } else {
+        return row.cellValue == null ? '/' : (row.cellValue - 0).toFixed(2)
+    }
 }
 defineExpose({ open })
 </script>

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

@@ -0,0 +1,20 @@
+<template>
+    <div class="default-main">
+        <!-- <el-tabs type="border-card" v-model="activeName"> -->
+            <!-- <el-tab-pane label="异常数据统计" name="1"><abnormal v-if="activeName == '1'" /></el-tab-pane> -->
+            <!-- <el-tab-pane label="稳态告警统计" name="2"><alarm v-if="activeName == '2'" /></el-tab-pane> -->
+        <!-- </el-tabs> -->
+         <alarm/>
+    </div>
+</template>
+
+<script setup lang="ts">
+defineOptions({
+    name: 'runManage/alarmCleaning'
+})
+// 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/cleaning/components/abnormal.vue

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

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

@@ -1,17 +1,19 @@
 <template>
     <div class="default-main">
-        <el-tabs type="border-card" v-model="activeName">
+        <!-- <el-tabs type="border-card" v-model="activeName"> -->
-            <el-tab-pane label="异常数据统计" name="1"><abnormal v-if="activeName == '1'" /></el-tab-pane>
+            <!-- <el-tab-pane label="异常数据统计" name="1"><abnormal v-if="activeName == '1'" /></el-tab-pane> -->
-            <el-tab-pane label="稳态告警统计" name="2"><alarm v-if="activeName == '2'" /></el-tab-pane>
+            <abnormal />
-        </el-tabs>
+            <!-- <el-tab-pane label="稳态告警统计" name="2"><alarm v-if="activeName == '2'" /></el-tab-pane> -->
+        <!-- </el-tabs> -->
     </div>
 </template>
+
 <script setup lang="ts">
 defineOptions({
-    name: 'runManage/cleaning'
+    name: 'runManage/alarmCleaning'
 })
 import abnormal from './components/abnormal.vue'
-import alarm from './components/alarm.vue'
+// import alarm from './components/alarm.vue'
 import { ref, reactive } from 'vue'
 const activeName = ref(`1`)
 </script>

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

@@ -72,12 +72,12 @@ const info = () => {
                     itemStyle: {
                         color: function (params) {
                             return params.value >= 90
-                                ? '#009900'
+                                ? '#00b07d'
                                 : params.value >= 80
-                                ? '#77DA63'
+                                ? '#2b7fd3'
                                 : params.value >= 70
-                                ? '#FFCC00'
+                                ? '#ffcc33'
-                                : '#CC0000'
+                                : '#97017e'
                         }
                     },
                     markLine: {

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

@@ -0,0 +1,110 @@
+<template>
+    <el-dialog v-model="dialogVisible" title="区域终端运行评价详情" width="50%" draggable>
+        <el-form :inline="true" :model="formInline">
+            <el-form-item label="所在地市">
+                <el-select v-model="formInline.value" style="width: 240px">
+                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+                </el-select>
+            </el-form-item>
+            <el-form-item label="运行状态">
+                <el-select v-model="formInline.value1" style="width: 240px">
+                    <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
+                </el-select>
+            </el-form-item>
+            <el-form-item style="position: absolute; right: 0">
+                <el-button type="primary" icon="el-icon-Search">查询</el-button>
+            </el-form-item>
+        </el-form>
+        <vxe-table v-bind="defaultAttribute" ref="vxeRef" height="500px" :data="tableData">
+            <vxe-column field="num" title="终端名称" />
+            <vxe-column field="num1" title="所在地市" />
+            <vxe-column field="num2" title="所属变电站" />
+            <vxe-column field="num3" title="终端型号" />
+            <vxe-column field="num4" title="完整率(%)" />
+            <vxe-column field="num4" title="在线率(%)" />
+            <vxe-column field="num4" title="合格率(%)" />
+            <vxe-column field="num5" title="运行状态">
+                <template #default="{ row }">
+                    <el-tag v-if="row.num5 == 1" effect="dark" type="success">在运</el-tag>
+                    <el-tag v-if="row.num5 == 2" effect="dark" type="error">停运</el-tag>
+                </template>
+            </vxe-column>
+        </vxe-table>
+    </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import { defaultAttribute } from '@/components/table/defaultAttribute'
+const dialogVisible = ref(false)
+const radio1 = ref('1')
+const tableData = ref([
+    {
+        num: '测试终端1',
+        num1: '张家口',
+        num2: '测试变电站1',
+        num3: 'npqs_571_1',
+        num4: '100',
+        num5: 1
+    },
+    {
+        num: '测试终端2',
+        num1: '张家口',
+        num2: '测试变电站2',
+        num3: 'npqs_571_2',
+        num4: '100',
+        num5: 1
+    },
+    {
+        num: '测试终端3',
+        num1: '张家口',
+        num2: '测试变电站3',
+        num3: 'npqs_571_3',
+        num4: '100',
+        num5: 1
+    }
+])
+const formInline = reactive({
+    value: '',
+    value1: '',
+})
+
+const options = [
+    {
+        value: '1',
+        label: '张家口'
+    },
+    {
+        value: '2',
+        label: '承德'
+    },
+    {
+        value: '3',
+        label: '唐山'
+    },
+    {
+        value: '4',
+        label: '秦皇岛'
+    },
+    {
+        value: '5',
+        label: '廊坊'
+    }
+]
+const options1 = [
+    {
+        value: '1',
+        label: '在运'
+    },
+    {
+        value: '2',
+        label: '停运'
+    },
+   
+]
+const open = () => {
+    dialogVisible.value = true
+}
+defineExpose({ open })
+</script>
+<style lang="scss" scoped></style>

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

@@ -8,28 +8,28 @@
 
             <span>完整率</span>
             <span style="color: #00cc00">98分</span>
-            <span style="color: #00cc00">优</span>
+            <span style="color: #00b07d">优</span>
         </div>
         <div class="appraise">
             <div class="iconfont icon-zaixianshuaibaobiao0"></div>
 
             <span>在线率</span>
             <span style="color: #00cc00">98分</span>
-            <span style="color: #00cc00">优</span>
+            <span style="color: #00b07d">优</span>
         </div>
         <div class="appraise">
             <div class="iconfont icon-dianyahegeshuai"></div>
 
             <span>合格率</span>
             <span style="color: #00cc00">98分</span>
-            <span style="color: #00cc00">优</span>
+            <span style="color: #00b07d">优</span>
         </div>
         <div class="appraise">
-            <div class="iconfont icon-dianyahegeshuai"></div>
+            <div class="iconfont icon-zonghepingjia1"></div>
 
             <span>综合评价</span>
             <span style="color: #00cc00">98分</span>
-            <span style="color: #00cc00">优</span>
+            <span style="color: #00b07d">优</span>
             <!-- <div class="right">
                 <span>综合评价</span>
                 <span>优</span>

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

@@ -0,0 +1,60 @@
+<template>
+    <el-dialog v-model="dialogVisible" title="终端统计详情" width="50%" draggable>
+        <el-tabs type="border-card">
+            <el-tab-pane label="在运">
+                <vxe-table v-bind="defaultAttribute" ref="vxeRef" height="500px" :data="tableData">
+                    <vxe-column field="num" title="终端名称" />
+                    <vxe-column field="num1" title="所在地市" />
+                    <vxe-column field="num2" title="所属变电站" />
+                    <vxe-column field="num3" title="终端型号" />
+                    <vxe-column field="num4" title="在线率(%)" />
+                    <vxe-column field="num5" title="运行状态">
+                        <template #default="{ row }">
+                            <el-tag v-if="row.num5 == 1" effect="dark" type="success">在运</el-tag>
+                            <el-tag v-if="row.num5 == 2" effect="dark" type="error">停运</el-tag>
+                        </template>
+                    </vxe-column>
+                </vxe-table>
+            </el-tab-pane>
+            <el-tab-pane label="停运">Config</el-tab-pane>
+        </el-tabs>
+    </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import { defaultAttribute } from '@/components/table/defaultAttribute'
+const dialogVisible = ref(false)
+const radio1 = ref('1')
+const tableData = ref([
+    {
+        num: '测试终端1',
+        num1: '张家口',
+        num2: '测试变电站1',
+        num3: 'npqs_571_1',
+        num4: '100',
+        num5: 1
+    },
+    {
+        num: '测试终端2',
+        num1: '张家口',
+        num2: '测试变电站2',
+        num3: 'npqs_571_2',
+        num4: '100',
+        num5: 1
+    },
+    {
+        num: '测试终端3',
+        num1: '张家口',
+        num2: '测试变电站3',
+        num3: 'npqs_571_3',
+        num4: '100',
+        num5: 1
+    }
+])
+const open = () => {
+    dialogVisible.value = true
+}
+defineExpose({ open })
+</script>
+<style lang="scss" scoped></style>

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

@@ -29,11 +29,11 @@
                     {{ leftVisible ? '隐藏' : '显示' }}
                 </el-button>
 
-                <el-tooltip    placement="left-start">
+                <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 style="font-size: 16px" class="mt10 mb10">
                             <div>终端在线率</div>
                             <div class="em1">定义：终端在指定时间段内处于在线状态的时间比例。</div>
                             <div class="em1">计算方法：在线率=终端在线时间/总监测时间×100%</div>
@@ -138,6 +138,8 @@
                     <div class="title">
                         <span class="iconfont icon-zhongduantongji-xian"></span>
                         终端统计
+
+                        <!-- <el-button link icon="el-icon-View" @click="endpointStatistics">详情</el-button> -->
                     </div>
                     <statistics />
                 </BorderBox13>
@@ -151,6 +153,7 @@
                     <div class="title">
                         <span class="iconfont icon-daipingjia"></span>
                         终端运行评价
+                        <!-- <el-button link icon="el-icon-View">详情</el-button> -->
                     </div>
                     <run />
                 </BorderBox13>
@@ -164,6 +167,7 @@
                     <div class="title">
                         <span class="iconfont icon-a-qushi1"></span>
                         终端运行评价详情
+                        <!-- <el-button link icon="el-icon-View">详情</el-button> -->
                     </div>
                     <terminalOperation />
                 </BorderBox13>
@@ -181,6 +185,7 @@
                     <div class="title">
                         <span class="iconfont icon-a-ziyuan118"></span>
                         区域终端运行评价
+                        <el-button link icon="el-icon-View" @click="regionEvaluation">详情</el-button>
                     </div>
                     <region />
                 </BorderBox13>
@@ -220,6 +225,10 @@
                 </BorderBox13>
             </div>
         </transition>
+        <!-- 终端统计弹框 -->
+        <statisticsPopUpBox ref="statisticsPopUpBoxRef" />
+        <!-- 区域详情 -->
+        <regionDetails ref="regionDetailsRef" />
     </div>
 </template>
 <script setup lang="ts">
@@ -238,6 +247,8 @@ import week from './components/week.vue'
 import terminalDetails from './components/terminalDetails.vue'
 import statistics from './components/statistics.vue'
 import run from './components/run.vue'
+import statisticsPopUpBox from './components/statisticsPopUpBox.vue'
+import regionDetails from './components/regionDetails.vue'
 defineOptions({
     name: 'runManage/runEvaluate'
 })
@@ -283,12 +294,22 @@ provide('tableStore', tableStore)
 const leftVisible = ref(true)
 const rightVisible = ref(true)
 const centerVisible = ref(true)
+const statisticsPopUpBoxRef = ref(true)
+const regionDetailsRef = ref(true)
 
 const toggle = () => {
     leftVisible.value = !leftVisible.value
     rightVisible.value = !rightVisible.value
     centerVisible.value = !centerVisible.value
 }
+// 终端统计详情
+const endpointStatistics = () => {
+    statisticsPopUpBoxRef.value.open()
+}
+// 区域详情
+const regionEvaluation = () => {
+    regionDetailsRef.value.open()
+}
 
 onMounted(() => {
     // 加载数据
@@ -346,6 +367,10 @@ onMounted(() => {
         font-size: 22px;
         margin: 0 5px 0 10px;
     }
+    button {
+        margin-left: auto;
+        margin-right: 10px;
+    }
 }
 .toggle-btn {
     position: absolute;
@@ -388,4 +413,10 @@ onMounted(() => {
     margin-top: 5px;
     text-indent: 2em;
 }
+:deep(.title > .el-button.is-link) {
+    color: #fff;
+    &:hover {
+        color: #ccc;
+    }
+}
 </style>