修好页面ui

2025-04-10 11:29:58 +08:00
parent 9a7a1ff46a
commit 02053ac58f
17 changed files with 369 additions and 54 deletions
--- 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
@@ -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>