admin-sjzx/src/views/pqs/runManage/runEvaluate/index.vue

<template>
    <div class="default-main" style="position: relative">
        <TableHeader date-picker >
            <template v-slot:select>
                <el-form-item label="对象类型">
                    <el-select
                        v-model="tableStore.table.params.supvObjType"
                        clearable
                        style="width: 100%"
                        placeholder="请选择对象类型"
                    >
                        <el-option
                            v-for="item in supvObjTypeList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </template>

            <template v-slot:operation>
                <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>

        <!-- <div class="mapBox" >
            <el-form :inline="true" class="demo-form-inline">
                <el-form-item>
                    <Area ref="areaRef" :show-all-levels="false" v-model="tableStore.table.params.orgNo" style="width: 100px"
                        />
                </el-form-item>
                
            </el-form>
        </div> -->



        <Map />

        <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`"
                    title="终端统计"
                >
                    <div class="title">
                        <span class="iconfont icon-zhongduantongji-xian"></span>
                        终端统计

                        <!-- <el-button link icon="el-icon-View" @click="endpointStatistics">详情</el-button> -->
                    </div>
                    <statistics />
                </BorderBox13>
                <BorderBox13
                    :color="[color[0], color[0]]"
                    class="box"
                    style="flex: 1"
                    :backgroundColor="`${color[0]}24`"
                    title="终端运行评价"
                >
                    <div class="title">
                        <span class="iconfont icon-daipingjia"></span>
                        终端运行评价
                        <el-button link icon="el-icon-View" @click="endpointStatistics">详情</el-button>
                    </div>
                    <run />
                </BorderBox13>
                <BorderBox13
                    :style="height3"
                    :color="[color[0], color[0]]"
                    class="box"
                    :backgroundColor="`${color[0]}24`"
                    title="终端运行评价详情"
                >
                    <div class="title">
                        <span class="iconfont icon-a-qushi1"></span>
                        终端运行评价详情
                        <!-- <el-button link icon="el-icon-View">详情</el-button> -->
                    </div>
                    <terminalOperation />
                </BorderBox13>
            </div>
        </transition>

        <transition name="slide-right">
            <div class="right" :style="height" v-if="rightVisible">
                <BorderBox13
                    :color="[color[0], color[0]]"
                    class="box box-2"
                    :backgroundColor="`${color[0]}24`"
                    title="区域终端运行评价"
                >
                    <div class="title">
                        <span class="iconfont icon-a-ziyuan118"></span>
                        区域终端运行评价
                        <el-button link icon="el-icon-View" @click="regionEvaluation">详情</el-button>
                    </div>
                    <region />
                </BorderBox13>
                <div :style="height3">
                    <BorderBox13
                        style="height: 100%"
                        :color="[color[0], color[0]]"
                        class="box"
                        :backgroundColor="`${color[0]}24`"
                        title="最近一周终端评价趋势"
                    >
                        <div class="title">
                            <span class="iconfont icon-yunhangxiangqing"></span>
                            最近一周终端评价趋势
                        </div>

                        <week />
                    </BorderBox13>
                </div>
            </div>
        </transition>

        <transition name="slide-bottom">
            <div class="center" :style="height3" v-if="centerVisible">
                <BorderBox13
                    :color="[color[0], color[0]]"
                    class="box"
                    :backgroundColor="`${color[0]}24`"
                    title="异常终端详情"
                >
                    <div class="title">
                        <span class="iconfont icon-yichangxiangqing-xian"></span>
                        异常终端详情
                    </div>
                    <terminalDetails />
                    <table />
                </BorderBox13>
            </div>
        </transition>
        <!-- 终端统计弹框 -->
        <statisticsPopUpBox ref="statisticsPopUpBoxRef" />
        <!-- 区域详情 -->
        <regionDetails ref="regionDetailsRef" />
    </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, provide } from 'vue'
import TableHeader from '@/components/table/header/index.vue'
import TableStore from '@/utils/tableStore'
import { useDictData } from '@/stores/dictData'
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'
import statisticsPopUpBox from './components/statisticsPopUpBox.vue'
import regionDetails from './components/regionDetails.vue'
defineOptions({
    name: 'runManage/runEvaluate'
})
const config = useConfig()
const color = config.layout.elementUiPrimary
const dictData = useDictData()
const height = mainHeight(115)
const height3 = mainHeight(115, 3)
//字典获取监督对象类型
const supvObjTypeList = dictData.getBasicData('supv_obj_type')
const tableStore = new TableStore({
    url: '/user-boot/user/getAllUserSimpleList',
    method: 'GET',
    isWebPaging: true,
    showPage: false,
    publicHeight: 480,
    column: [
        { title: '序号', width: 80 },
        { title: '监测对象类型', field: 'name3' },
        { title: '监测对象名称', field: 'name4' },
        { title: '电压等级', field: 'name5' },
        {
            title: '操作',
            width: '120',
            render: 'buttons',
            buttons: [
                {
                    name: 'edit',
                    title: '工单',
                    type: 'primary',
                    icon: 'el-icon-Plus',
                    render: 'basicButton',
                    click: row => {}
                }
            ]
        }
    ],
    loadCallback: () => {
        tableStore.table.data = []
    }
})

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(() => {
    // 加载数据
    tableStore.index()
})
</script>
<style lang="scss" scoped>
.left,
.right {
    display: flex;
    position: absolute;
    top: 80px;
    width: 450px;
    flex-direction: column;
    z-index: 99;
    transition: all 0.3s ease;
}
.left {
    left: 15px;
}
.right {
    right: 15px !important;
    .box {
        flex: 1; /* 占2份高度 */
    }
    .box-2 {
        flex: 2; /* 占2份高度 */
    }
}
.box {
    padding: 20px 10px 10px;
}
.center {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 950px);
    min-width: 480px;
    .box {
        flex: 1; /* 占2份高度 */
        padding: 20px 10px 10px;
    }
    transition: all 0.3s ease;
}
.title {
    // padding: 5px 5px 5px 10px;
    background: linear-gradient(to right, var(--el-color-primary), #ffffff00);
    font-size: 16px;
    // font-weight: bold;
    color: #fff;
    display: flex;
    align-items: center;
    .iconfont {
        font-size: 22px;
        margin: 0 5px 0 10px;
    }
    button {
        margin-left: auto;
        margin-right: 10px;
    }
}
.toggle-btn {
    position: absolute;
    z-index: 100;
    padding: 5px 10px;
    cursor: pointer;
}
.slide-left-enter-active,
.slide-left-leave-active {
    transition: all 0.3s ease;
}
.slide-left-enter-from,
.slide-left-leave-to {
    transform: translateX(-100%);
    opacity: 0;
}
.slide-right-enter-active,
.slide-right-leave-active {
    transition: all 0.3s ease;
}
.slide-right-enter-from,
.slide-right-leave-to {
    transform: translateX(100%);
    opacity: 0;
}
.slide-bottom-enter-active,
.slide-bottom-leave-active {
    transition: all 0.3s ease;
}
.slide-bottom-enter-from,
.slide-bottom-leave-to {
    transform: translateY(100%);
    opacity: 0;
}
.em1 {
    margin-top: 5px;
    text-indent: 1em;
}
.em2 {
    margin-top: 5px;
    text-indent: 2em;
}
:deep(.title > .el-button.is-link) {
    color: #fff;
    &:hover {
        color: #ccc;
    }
}
:deep(.mapBox) {
    position: absolute;
    top: 80px;
    left: calc(50% + 45px);

    z-index: 1;

    .el-select {
        min-width: 100px;

        .el-select__wrapper {
            height: 46px !important;
            border-radius: 8px;
        }
    }

    .Icon {
        height: 46px;
        width: 46px;
        background-color: #fff;
        border-radius: 8px;
        text-align: center;
        line-height: 50px;
        cursor: pointer;

        .fa-refresh {
            color: var(--el-color-primary) !important;
        }
    }

    .el-input__wrapper {
        height: 46px;
        border-radius: 8px;
    }

    .el-form-item {
        margin-right: 15px;
    }
}
</style>