修好页面ui

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>
@@ -196,7 +201,7 @@
                             <span class="iconfont icon-yunhangxiangqing"></span>
                             最近一周终端评价趋势
                         </div>
-                    
+
                         <week />
                     </BorderBox13>
                 </div>
@@ -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>