admin-sjzx/src/views/pqs/qualityInspeection/panorama/components/mapR.vue

<template>
    <div :class="show ? 'show' : 'noshow'">
        <div class="boxLeft" :style="height">
            <!-- 综合评估 -->
            <div style="height: 110px">
                <div class="title">
                    <span>
                        综合评估
                        <el-popover placement="right" :width="150" trigger="hover">
                            <template #reference>
                                <WarningFilled class="WarningFilled" />
                            </template>
                            <div class="text">
                                <span style="color: #00b07d">优质：(4.5 , 5]</span>
                                <br />
                                <span style="color: #2b7fd3">良好：(4 , 4.5]</span>
                                <br />
                                <span style="color: #ffcc33">合格：(3 , 4]</span>
                                <br />
                                <span style="color: #97017e">较差：(2 , 3]</span>
                                <br />
                                <span style="color: #cc0000">极差：[1 , 2]</span>
                            </div>
                        </el-popover>
                    </span>
                    <span class="info" @click="open(0)">
                        详情
                        <ArrowRight style="width: 12px" />
                    </span>
                </div>
                <div style="display: flex" class="mt2">
                    <img src="@/assets/img/FGX.png" />
                </div>
                <div class="mt10 TJTop">
                    <img src="@/assets/img/TJ.png" />
                    综合评估得分：
                    <span
                        :style="{
                            color:
                                assessList.score == 3.14159
                                    ? ''
                                    : assessList.score > 4.5
                                    ? '#339966'
                                    : assessList.score > 4
                                    ? '#2b7fd3'
                                    : assessList.score > 3
                                    ? '#ffcc33'
                                    : assessList.score > 2
                                    ? '#97017e'
                                    : assessList.score > 0
                                    ? '#cc0000'
                                    : ''
                        }"
                    >
                        {{ assessList.level }}
                    </span>
                </div>
                <div class="evaluate">
                    <div v-for="item in assessList.children" style="min-width: 50px">
                        <div>
                            <span class="line"></span>
                            {{ item.name }}
                        </div>
                        <div
                            style="margin-top: 5px"
                            :style="{
                                color:
                                    item.score == 3.14159
                                        ? ''
                                        : item.score > 4.5
                                        ? '#339966'
                                        : item.score > 4
                                        ? '#2b7fd3'
                                        : item.score > 3
                                        ? '#ffcc33'
                                        : item.score > 2
                                        ? '#97017e'
                                        : item.score > 0
                                        ? '#cc0000'
                                        : ''
                            }"
                        >
                            {{ item.level }}
                        </div>
                    </div>
                </div>
            </div>
            <!-- 稳态电能质量水平评估 -->
            <div>
                <div class="title">
                    <span>稳态电能质量水平评估</span>
                    <span class="info" @click="open(1)">
                        详情
                        <ArrowRight style="width: 12px" />
                    </span>
                </div>
                <div style="display: flex" class="mt2">
                    <img src="@/assets/img/FGX.png" />
                </div>
                <div :style="boxHeight" class="boxR">
                    <div class="top">
                        <div class="TJTop">
                            <img src="@/assets/img/TJ.png" />
                            监测点越限占比：
                            <span class="num">
                                {{ harmonicLineRatio == 3.14159 ? '0' : harmonicLineRatio + '%' }}
                            </span>
                        </div>

                        <el-select v-model="harmonicType" style="width: 120px" @change="harmonicChange" size="small">
                            <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </div>
                    <!-- <MyEChart :style="EchHeight" :options="harmonicList" /> -->
                    <div :style="EchHeight" class="harmonic mt5">
                        <div class="progress" v-for="item in harmonicList">
                            <span class="text">{{ item.deptName }}</span>
                            <el-progress :percentage="item.ratio" />
                        </div>
                    </div>
                </div>
            </div>
            <!-- 暂态电能质量水平评估 -->
            <div>
                <div class="title">
                    <span>暂态电能质量水平评估</span>
                    <span class="info" @click="open(2)">
                        详情
                        <ArrowRight style="width: 12px" />
                    </span>
                </div>
                <div style="display: flex" class="mt2">
                    <img src="@/assets/img/FGX.png" />
                </div>
                <div :style="boxHeight" class="boxR">
                    <div class="top">
                        <div>
                            <div class="TJTop">
                                <img src="@/assets/img/TJ.png" />
                                <span>暂降严重度:</span>
                            </div>
                            <div class="ml22" style="font-size: 12px">
                                <span>
                                    幅值低于90%:
                                    <span class="num">{{ transientNum[0] }} 　</span>
                                    幅值低于50%:
                                    <span class="num">{{ transientNum[1] }}</span>
                                </span>
                            </div>
                        </div>

                        <el-select v-model="value" style="width: 120px" size="small" @change="transientChange">
                            <el-option v-for="item in options1" :key="item.id" :label="item.name" :value="item.id" />
                        </el-select>
                    </div>
                    <!-- <MyEChart :style="EchHeight" :options="WTList" /> -->
                    <div :style="EchHeight" class="harmonic mt5">
                        <div class="progress" v-for="item in WTList">
                            <span class="text">{{ item.orgName }}</span>
                            <el-progress :percentage="item.count" :format="format" />
                        </div>
                    </div>
                </div>
            </div>
            <!-- 技术监督管理 -->
            <div>
                <div class="title">
                    <span>技术监督管理</span>
                    <span class="info" @click="open(3)">
                        详情
                        <ArrowRight style="width: 12px" />
                    </span>
                </div>
                <div style="display: flex" class="mt2">
                    <img src="@/assets/img/FGX.png" />
                </div>
                <div style="height: 150px" class="boxR">
                    <div class="evaluate bottom">
                        <div v-for="item in JDlist" style="width: 80px">
                            <div>{{ item.name }}</div>
                            <div style="margin-top: 5px; font-weight: 550">{{ item.value }}</div>
                        </div>
                    </div>
                    <el-row
                        style="height: calc(100% - 45px); display: flex; justify-content: space-around"
                        class="ml10 mr10 mt5"
                    >
                        <el-col :span="11" class="col pt10">
                            <div>
                                <span>异常问题总数：</span>
                                <span style="color: #2dcd28">0个</span>
                            </div>
                            <div>
                                <span style="width: 120px">已关联工单数：</span>
                                <span style="color: #81b337">0个</span>
                            </div>
                            <div>
                                <span style="width: 120px">　工单转换率：</span>
                                <span style="color: #338dff">0%</span>
                            </div>
                        </el-col>
                        <el-col :span="11" class="col pt10" :offset="0.5">
                            <div>
                                <span>异常问题总数：</span>
                                <span style="color: #2dcd28">0个</span>
                            </div>
                            <div>
                                <span style="width: 120px">已关联工单数：</span>
                                <span style="color: #81b337">0个</span>
                            </div>
                            <div>
                                <span style="width: 120px">　工单转换率：</span>
                                <span style="color: #338dff">0%</span>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </div>
        <img
            class="imgR"
            :style="show ? 'transform: rotate(180deg);' : 'transform: rotate(0deg);'"
            @click="show = !show"
            src="@/assets/img/QH.png"
        />
        <div class="legeng">
            <div v-for="item in legengList">
                <span :style="`background-color: ${item.color};`"></span>
                <span>{{ item.title }}</span>
            </div>
        </div>
        <!-- 评估 -->
        <Evaluate ref="evaluateRef" />
        <!-- 稳态 -->
        <steadyState ref="steadyStateRef" />
        <!-- 暂态 -->
        <temporaryState ref="temporaryStateRef" />
        <!-- 技术 -->
        <technique ref="techniqueRef" />
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, provide } from 'vue'
import MyEChart from '@/components/echarts/MyEchart.vue'
import { useDictData } from '@/stores/dictData'
import { mainHeight } from '@/utils/layout'
import { WarningFilled } from '@element-plus/icons-vue'
import { ArrowRight } from '@element-plus/icons-vue'
import Evaluate from './details/evaluate.vue'
import steadyState from './details/steadyState.vue'
import temporaryState from './details/temporaryState.vue'
import technique from './details/technique.vue'
import { getAssessOverview, getEvaluationOverview, getEventLevelEvaluation } from '@/api/device-boot/panorama'
const dictData = useDictData()
const show = ref(false)
const height = mainHeight(30)
const boxHeight: any = mainHeight(420, 2)
const EchHeight: any = mainHeight(490, 2)
const evaluateRef = ref()
const steadyStateRef = ref()
const formRow: any = ref({})
const temporaryStateRef = ref()
const techniqueRef = ref()
const mun = ref(0)
const options = ref([
    {
        label: '全指标',
        value: '0'
    },
    {
        label: '电压偏差',
        value: '1'
    },
    {
        label: '频率偏差',
        value: '2'
    },
    {
        label: '电压总谐波畸变率',
        value: '3'
    },
    {
        label: '电压闪变',
        value: '4'
    },
    {
        label: '三相电压不平衡度',
        value: '5'
    }
])
const harmonicType = ref('0')
const transientNum = ref([0, 0])
const options1: any = dictData.getBasicData('Event_Statis').filter(item => {
    if (item.code == 'Voltage_Dip' || item.code == 'Voltage_Rise' || item.code == 'Short_Interruptions') {
        return item
    }
})
const legengList = [
    {
        color: '#00b07d',
        title: '优质'
    },
    {
        color: '#3399ff',
        title: '良好'
    },
    {
        color: '#ffcc33',
        title: '合格'
    },
    {
        color: '#db0887',
        title: '较差'
    },
    {
        color: '#ff0000',
        title: '极差'
    }
]
const assessList: any = ref([])
const JDlist = ref([
    {
        name: '技术监督计划',
        value: 0
    },
    {
        name: '在线监测',
        value: 0
    },
    {
        name: '用户投诉',
        value: 0
    },
    {
        name: '谐波普测',
        value: 0
    }
])
const harmonicList: any = ref([])
const harmonicLineRatio: any = ref(0)
const WTList: any = ref([])

const value = ref(options1[0].id)
const open = (e: number) => {
    if (e == 0) {
        evaluateRef.value.open(formRow.value)
    } else if (e == 1) {
        steadyStateRef.value.open(formRow.value)
    } else if (e == 2) {
        temporaryStateRef.value.open(formRow.value)
    } else if (e == 3) {
        techniqueRef.value.open(formRow.value)
    }
}
const info = (row: any) => {
    let form = {
        ...row,
        id: row.orgNo,
        deptIndex: row.orgNo,
        orgId: row.orgNo,
        ids: [],
        statisticalType: dictData.getBasicData('Statistical_Type', ['Report_Type'])[0],
        isUpToGrid: row.isUpToGrid,
        monitorFlag: row.isUpToGrid == 0 ? null : row.isUpToGrid
    }
    formRow.value = form

    // 稳态电能质量水平评估概览数据
    harmonicChange()
    // 暂态统计详情
    transientChange()
    // 综合评估
    setTimeout(() => {
        getAssessOverview(form).then(res => {
            assessList.value = res.data
        })
    }, 300)
}
const harmonicChange = () => {
    getEvaluationOverview({ ...formRow.value, harmonicType: harmonicType.value }).then(res => {
        harmonicLineRatio.value = res.data.lineRatio
        harmonicList.value = res.data.childrenList.map((item: any) => {
            item.ratio = item.ratio == 3.14159 ? 0 : item.ratio
            return item
        })
    })
}
const transientChange = () => {
    getEventLevelEvaluation({ ...formRow.value, ids: [value.value] }).then(res => {
        let data = []
        transientNum.value = [0, 0]
        if (formRow.value.isUpToGrid == 0) {
            data = res.data.info
            transientNum.value = res.data.data
        } else {
            transientNum.value = res.data.gwData
            data = res.data.gwInfo
        }
        WTList.value = []
        mun.value = Math.max(...data.map((item: any) => item.count)) - 0
        data.forEach((item: any) => {
            item.count = item.count == 0 ? 0 : Number(((item.count / mun.value) * 100).toFixed(2))
        })
        WTList.value = data
    })
}
const format = (percentage: any) => (Math.round(percentage * mun.value) / 100).toFixed(0) + '条'

defineExpose({ info, show })
</script>

<style lang="scss" scoped>
.boxLeft {
    background-color: #fff;
    width: 100%;
    padding: 10px 10px 10px 10px;
    font-size: 13px;
    overflow: hidden;
    border-radius: 5px;
}

.title {
    // height: ;
    display: flex;
    justify-content: space-between;
    font-size: 15px;
    line-height: 23px;
    padding-left: 5px;
    width: 100%;
    font-weight: 550;

    .info {
        font-weight: normal;
        display: flex;
        font-size: 12px;
        cursor: pointer;
        color: #757575;
    }
    .WarningFilled {
        width: 12px;
        font-weight: 500;
        cursor: pointer;
    }
}
.TJTop {
    display: flex;
    img {
        height: 1.2rem;
        width: 1.2rem;
        margin-right: 5px;
    }
}
.evaluate {
    margin: 10px 0;
    display: flex;
    justify-content: space-around;
    text-align: center;
    overflow-x: auto;
    overflow-y: hidden;
    .line {
        display: inline-block;
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 0.25rem;
        background: var(--el-color-primary);
        margin-right: 2px;
        margin-bottom: 1px;
    }
}
.boxR {
    margin: 10px 0 0 0;

    .num {
        color: #2478f2;
    }
    .top {
        display: flex;
        justify-content: space-between;
    }
    .bottom {
        margin: 0;
        border: 0px;
    }

    .harmonic {
        display: grid;
        overflow-y: auto;
        .progress {
            display: flex;
            align-items: center;

            .text {
                width: 50px;
                font-size: 12px;
            }
            .el-progress {
                flex: 1;
            }
        }
    }
}
:deep(.el-select) {
    min-width: 120px;
}
.col {
    display: grid;
    grid-template-columns: 1fr;
    border-radius: 10px;
    text-align: center;
    align-items: center;
    background-color: #edededc0;
}
.imgR {
    position: absolute;
    padding: 10px;
    top: calc(50% - 80px);
    left: -23px;

    height: 200px;
    cursor: pointer;
}
.legeng {
    position: absolute;
    padding: 5px;
    bottom: 0;
    left: -75px;
    width: 70px;
    font-size: 12px;
    height: 120px;
    background: #fff;
    border-radius: 5px;
    display: grid;
    line-height: 22px;
    grid-template-rows: auto;
    div {
        display: flex;
        align-items: center;
        justify-content: center;
        span:nth-child(1) {
            display: inline-block;
            height: 10px;
            border-radius: 2px;
            width: 15px;
            margin-right: 5px;
        }
    }
}
.show {
    width: 0px;
    transition: all 0.1s ease;
    .boxLeft {
        padding: 0;
    }
}
.noshow {
    width: 25%;
    transition: all 0.3s ease;
    .boxLeft {
        padding: 10px 10px 10px 10px;
    }
}
:deep(.el-progress__text) {
    font-size: 0.8rem !important    ;
}
:deep(.el-dialog__body) {
    max-height: none !important;
}
</style>