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

<template>
    <!-- 监测点详情 -->
    <el-dialog draggable title="监测点详情" v-model="dialogVisible" width="1400px" :before-close="handleClose">
        <el-row style="height: 300px" :gutter="20">
            <el-col :span="12">
                <div class="title">
                    <span>趋势分析</span>
                    <el-select v-model="time" style="width: 80px; margin-right: 80px" @change="analysis">
                        <el-option label="年" value="1" />
                        <el-option label="月" value="3" />
                    </el-select>
                </div>
                <MyEChart style="height: 260px" :options="trendEChart" />
            </el-col>
            <el-col :span="12">
                <div class="title">
                    <span>分布统计</span>
                    <el-select
                        v-model="statisticalType"
                        value-key="id"
                        style="width: 120px; margin-right:  80px"
                        @change="statiStics"
                    >
                        <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item" />
                    </el-select>
                </div>
                <div class="pie">
                    <MyEChart style="height: 260px" :options="picEChart" />
                </div>
            </el-col>
        </el-row>
        <div>
            <div class="title">
                <span>监测点详细列表</span>
            </div>
            <vxe-table v-bind="defaultAttribute" ref="vxeRef" height="300px" :data="tableData">
                <vxe-column field="lineName" title="监测点名称" />
                <vxe-column field="areaName" title="所属区域" />
                <vxe-column field="subName" title="所属变电站" />
                <vxe-column field="voltageScale" title="电压等级" :formatter="formatter" />
                <vxe-column field="loadType" title="负荷类型" :formatter="formatter" />
                <vxe-column field="comFlag" title="通讯状态">
                    <template #default="scope">
                        <el-tag type="success" v-if="scope.row.comFlag == 1">正常</el-tag>
                        <el-tag type="danger" v-else>中断</el-tag>
                    </template>
                </vxe-column>
                <vxe-column field="onlineRate" title="在线率(%)" />
                <vxe-column field="integrityData" title="数据完整性(%)" />
            </vxe-table>
        </div>
    </el-dialog>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import MyEChart from '@/components/echarts/MyEchart.vue'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import { useDictData } from '@/stores/dictData'
import { getGridDiagramLineTendency, getGridDiagramLineData, getHalfReport } from '@/api/device-boot/panorama'
const dictData = useDictData()
const dialogVisible: any = ref(false)

const Voltage = dictData.getBasicData('Dev_Voltage_Stand')
const tableData: any = ref([])
const options = dictData.getBasicData('Statistical_Type', ['Report_Type'])
const time = ref('1')
const statisticalType = ref(options[0])
const loadTypeArr = dictData.getBasicData('Interference_Source')

const rowList: any = ref({})
const trendEChart: any = ref()

const picEChart = ref()
const open = async (row: any) => {
    rowList.value = {
        deviceInfoParam: {
            ...row
        },
        pageNum: 1,
        pageSize: 1000,
        ...row
    }
    analysis(1)
    // 统计
    statiStics()
    // 监测点列表
    getHalfReport(rowList.value).then((res: any) => {
        tableData.value = res.data.records
    })

    dialogVisible.value = true
}
// 分析
const analysis = (e: any) => {
    let time = rowList.value.searchBeginTime.slice(0, 4) + `-01-01`
    // 分析
    getGridDiagramLineTendency({ ...rowList.value, searchBeginTime: time, type: e }).then(res => {
        let name = []
        let data = []
        for (let k in res.data) {
            name.push(k)
            data.push(res.data[k])
        }

        trendEChart.value = {
            title: {
                text: '监测点数量'
            },
            xAxis: {
                name: '时间',
                data: name
            },
            legend: {
                show: false
            },
            yAxis: {
                name: '个'
            },

            options: {
                dataZoom: null,
                series: [
                    {
                        name: '接入',
                        type: 'line',
                        data: data,
                        smooth: true,

                        label: {
                            show: true,
                            position: 'top',
                            fontSize: 12
                        }
                    }
                ]
            }
        }
    })
}
// 统计
const statiStics = () => {
    getGridDiagramLineData({ ...rowList.value, statisticalType: statisticalType.value }).then(res => {
        picEChart.value = {
            title: {
                text: ''
            },
            xAxis: {
             
                data: res.data.map((item: any) => item.orgName)
            },
            yAxis: {
                name: '',
                min: 0,
                max: 100
            },
            options: {
                series: [
                    {
                        name: '数据完整性',
                        type: 'bar',

                        data: res.data.map((item: any) => item.integrityRate),
                        label: {
                            show: true,
                            position: 'top',
                            fontSize: 12
                        }
                    },
                    {
                        name: '在线率',
                        type: 'bar',
                        data: res.data.map((item: any) => item.onLineRate),
                        label: {
                            show: true,
                            position: 'top',
                            fontSize: 12
                        }
                    },
                    {
                        name: '超标监测点占比',
                        type: 'bar',
                        data: res.data.map((item: any) => item.outOfStandardRate),
                        label: {
                            show: true,
                            position: 'top',
                            fontSize: 12
                        }
                    }
                ]
            }
        }
    })
}
const formatter = (row: any) => {
    if (row.column.field == 'loadType') {
        return loadTypeArr.filter((item: any) => item.id == row.cellValue)[0]?.name
    } else if (row.column.field == 'voltageScale') {
        return Voltage.filter((item: any) => item.id == row.cellValue)[0]?.name
    } else {
        return row.cellValue
    }
}
const handleClose = () => {
    tableData.value = []
    dialogVisible.value = false
}

defineExpose({ open })
</script>
<style lang="scss" scoped>
:deep(.el-select) {
    min-width: 80px;
}
.title {
    display: flex;
    justify-content: space-between;
    margin: 10px;
    span {
        font-weight: 550;
        font-size: 18px;
    }
}
.pie {
    display: flex;
    justify-content: space-around;
}
:deep(.el-table thead) {
    color: #000;
}
</style>