修好页面ui

2025-04-10 11:29:58 +08:00
parent 9a7a1ff46a
commit 02053ac58f
17 changed files with 369 additions and 54 deletions
--- a/src/assets/font/demo_index.html
+++ b/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'),
-       url('iconfont.woff?t=1743573122508') format('woff'),
-       url('iconfont.ttf?t=1743573122508') format('truetype');
+  src: url('iconfont.woff2?t=1744179175277') format('woff2'),
+       url('iconfont.woff?t=1744179175277') format('woff'),
+       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>
--- a/src/assets/font/iconfont.css
+++ b/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'),
-       url('iconfont.woff?t=1743573122508') format('woff'),
-       url('iconfont.ttf?t=1743573122508') format('truetype');
+  src: url('iconfont.woff2?t=1744179175277') format('woff2'),
+       url('iconfont.woff?t=1744179175277') format('woff'),
+       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";
 }
--- a/src/assets/font/iconfont.js
+++ b/src/assets/font/iconfont.js
--- a/src/assets/font/iconfont.json
+++ b/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": "电压合格率",
--- a/src/assets/font/iconfont.ttf
+++ b/src/assets/font/iconfont.ttf
--- a/src/assets/font/iconfont.woff
+++ b/src/assets/font/iconfont.woff
--- a/src/assets/font/iconfont.woff2
+++ b/src/assets/font/iconfont.woff2
--- a/src/views/pqs/runManage/alarmCleaning/components/alarm.vue
+++ b/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 indicatorHeight = mainHeight(462)
+const pageHeight = mainHeight(97)
+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
--- a/src/views/pqs/runManage/alarmCleaning/components/alarmDetails.vue
+++ b/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="targetName" title="指标类型" min-width="100px"></vxe-column>
+                    <vxe-column field="time" title="时间" :formatter="formatter" width="150px"></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],
-        searchBeginTime: data.date,
+        monitorIds: [clickRow.value.monitorId],
+        searchBeginTime: clickRow.value.date,
        targetKey: numKey.value == 0 ? targetKey.value : ''
    })
        .then(res => {
@@ -104,12 +112,17 @@ const currentChangeEvent = () => {
            loading1.value = false
        })
 }
-const formatter1 = (row: any) => {
-    return row.cellValue == null ? '/' : row.cellValue
-}
 const formatter = (row: any) => {
+    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>
 <style lang="scss" scoped>
--- a/src/views/pqs/runManage/alarmCleaning/index.vue
+++ b/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>
--- a/src/views/pqs/runManage/cleaning/components/abnormal.vue
+++ b/src/views/pqs/runManage/cleaning/components/abnormal.vue
@@ -69,7 +69,7 @@
                        <el-segmented style="height: 100%" v-model="segmented" :options="segmentedList" block>
                            <template #default="scope">
                                <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 indicatorHeight = mainHeight(507)
+const pageHeight = mainHeight(97)
+const indicatorHeight = mainHeight(447)
 const monitoringPoints = ref({
    runNum: 0,
    abnormalNum: 0
@@ -224,41 +224,52 @@ const loading = ref(false)
 const TableHeaderRef = ref()
 const abnormal: any = ref([])
 const mapList: any = ref([])
-const segmented = ref(1)
+const segmented = ref('base')
 const time = ref(['', ''])
-const segmentedList = [
+const segmentedList = ref([
    {
        label: '基础指标',
-        value: 1
+        value: 'base',
+        num: 0
    },
    {
        label: '稳态指标',
-        value: 2
+        value: 'harmonic',
+        num: 0
    },
    {
        label: '暂态指标',
-        value: 3
+        value: 'event',
+        num: 0
    }
-]
+])
 const tableStore = new TableStore({
    url: '/device-boot/dataVerify/getMonitorVerifyData',
    method: 'POST',
    showPage: false,
    filename: '异常数据统计',
-    publicHeight: 530,
+    publicHeight: 470,
    column: [],
    beforeSearchFun: () => {
        loading.value = true
        time.value = [tableStore.table.params.startTime, tableStore.table.params.endTime]
    },
    loadCallback: () => {
-        // console.log('🚀 ~   abnormal.value:', tableStore.table.data)
+        segmentedList.value[0].num = 0
+        segmentedList.value[1].num = 0
+        segmentedList.value[2].num = 0
        monitoringPoints.value.runNum = tableStore.table.data.runNum //总数
        monitoringPoints.value.abnormalNum = tableStore.table.data.abnormalNum //异常测点数
        abnormal.value = tableStore.table.data.targetList
        mapList.value = tableStore.table.data.mapList
        tableStore.table.allData = tableStore.table.data.monitorAlarmInfo
        tableStore.table.data = tableStore.table.data.monitorAlarmInfo
+        abnormal.value.forEach(item => {
+            const { remark, ids } = item
+            if (remark === 'base') segmentedList.value[0].num += ids.length
+            else if (remark === 'harmonic') segmentedList.value[1].num += ids.length
+            else if (remark === 'event') segmentedList.value[2].num += ids.length
+        })

        echart()
        loading.value = false
@@ -619,7 +630,7 @@ provide('tableStore', tableStore)
 }
 :deep(.el-segmented__item, ) {
    clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
-    position: relative
+    position: relative;
 }
 :deep(.el-segmented) {
    clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%);
--- a/src/views/pqs/runManage/cleaning/index.vue
+++ b/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-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>
+        <!-- <el-tabs type="border-card" v-model="activeName"> -->
+            <!-- <el-tab-pane label="异常数据统计" name="1"><abnormal v-if="activeName == '1'" /></el-tab-pane> -->
+            <abnormal />
+            <!-- <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>
--- a/src/views/pqs/runManage/runEvaluate/components/region.vue
+++ b/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'
-                                : '#CC0000'
+                                ? '#ffcc33'
+                                : '#97017e'
                        }
                    },
                    markLine: {
--- a/src/views/pqs/runManage/runEvaluate/components/regionDetails.vue
+++ b/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>
--- a/src/views/pqs/runManage/runEvaluate/components/run.vue
+++ b/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>
--- a/src/views/pqs/runManage/runEvaluate/components/statisticsPopUpBox.vue
+++ b/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>
--- a/src/views/pqs/runManage/runEvaluate/index.vue
+++ b/src/views/pqs/runManage/runEvaluate/index.vue
@@ -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>