admin-govern/src/views/Event-boot/Region/distribution.vue

<template>
    <div class="default-main">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="区域">
                <Area v-model="formInline.deptIndex" ref="area" />
            </el-form-item>
            <el-form-item label="统计类型:">
                <el-select
                    v-model="formInline.statisticalType"
                    value-key="id"
                    placeholder="请选择统计类型"
                    size="large"
                >
                    <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item" />
                </el-select>
                <!-- <el-input v-model="formInline.statisticalType" placeholder="请选择区域" clearable /> -->
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>
        <div v-loading="loading">
            <el-row :gutter="20">
                <el-col :span="12">
                    <MyEchartMap
                        ref="EchartMap"
                        :options="echartMapList"
                        class="map"
                        @eliminate="eliminate"
                        @getRegionByRegion="getRegionByRegion"
                    />
                </el-col>
                <el-col :span="12">
                    <my-echart class="tall" :options="echartList" />
                    <el-table class="tall" stripe :data="distributionData" border>
                        <el-table-column
                            prop="qy"
                            :label="
                                titleA == '电压等级'
                                    ? '电压等级'
                                    : titleA == '终端厂家'
                                    ? '终端厂家'
                                    : titleA == '干扰源类型'
                                    ? '干扰源类型'
                                    : titleA == '电网拓扑'
                                    ? '区域'
                                    : ''
                            "
                            align="center"
                            show-overflow-tooltip
                        ></el-table-column>
                        <el-table-column prop="jcd" label="监测点数(个数)" align="center"></el-table-column>
                        <el-table-column prop="zc" label="通讯正常(个数)" sortable align="center"></el-table-column>
                        <el-table-column prop="zd" label="通讯中断(个数)" sortable align="center"></el-table-column>
                    </el-table>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script setup lang="ts">
import Area from '@/components/form/area/index.vue'
import { getAreaLineDetail } from '@/api/Region'
import { useDictData } from '@/stores/dictData'
import MyEchartMap from '@/components/echarts/MyEchartMap.vue'
import MyEchart from '@/components/echarts/MyEchart.vue'
import { ref, reactive, onMounted, provide } from 'vue'

defineOptions({
    name: 'Region/distribution'
})
const EchartMap = ref()
const dictData = useDictData()
const options = dictData.getBasicData('Statistical_Type', 'Report_Type')
const echartMapList = ref({})
const echartList = ref({})
const titleA = ref('')
const distributionData = ref([])
const area = ref()
const loading = ref(true)

const formInline = reactive({
    deptIndex: dictData.state.area[0].id,
    monitorFlag: 2,
    powerFlag: 2,
    serverName: 'event-boot',
    statisticalType: dictData.getBasicData('Statistical_Type', 'Report_Type')[0]
})

const onSubmit = () => {
    loading.value = true
    titleA.value = formInline.statisticalType.name
    getAreaLineDetail(formInline).then(res => {
        area.value.change()
        // 处理地图数据
        map(res)
        tabulation(res)
        histogram(res)

        EchartMap.value.GetEchar(area.value.areaName)
        loading.value = false
    })
}

// 地图点击事件
const getRegionByRegion = (list: any) => {
    formInline.deptIndex = list.id
    onSubmit()
}
// 消除点
const eliminate = (name: string) => {
    echartMapList.value.options.series = []
    EchartMap.value.GetEchar(name)
}
// 地图数处理
const map = (res: any) => {
    echartMapList.value = {
        name: '',
        title: {
            text: '监测网分布' //+ "(" + _this.titles + ")",
        },
        tooltip: {
            formatter: function (params: any) {
                //console.log(params)
                var tips = ''
                if (params.value == 0) {
                    tips = "<font style='color: #000'>暂无数据</font><br/>"
                } else {
                    tips +=
                        "<font style='color: #000'> " +
                        params.name +
                        '</font><br/>区域暂降评估' +
                        "<font style='color: #000'>:" +
                        params.value +
                        '</font><br/>'
                }
                return tips
            }
        },
        color: ['green', 'red'],
        legend: {
            data: [
                {
                    name: '正常'
                },
                {
                    name: '中断'
                }
            ]
        },
        options: {
            series: []
        }
    }
    let mapList = [[], [], []]
    if (res.data.substationDetailVOList != null) {
        res.data.substationDetailVOList.forEach((item: any) => {
            if (item.color == 'green') {
                mapList[0].push(item)
            } else if (item.color == 'red') {
                mapList[1].push(item)
            }
        })
    }
    mapList.forEach((item, ind) => {
        echartMapList.value.options.series.push({
            type: 'scatter',
            mapName: 'china',
            name: ind == 0 ? '正常' : ind == 1 ? '中断' : '变电站',
            coordinateSystem: 'geo',
            geoIndex: 0,
            animation: false, //坐标点是否显示动画
            roam: true,
            symbol: 'pin',
            symbolSize: function () {
                //坐标点大小
                return 30
            },
            label: {
                normal: {
                    show: false
                },
                emphasis: {
                    show: false
                }
            },
            data: item.map(function (itemOpt: any) {
                // console.log(itemOpt);
                return {
                    name: itemOpt.srbName,
                    value: [
                        parseFloat(itemOpt.coordY), //经度
                        parseFloat(itemOpt.coordX) //维度
                    ],

                    itemStyle: {
                        //地图区域的多边形
                        normal: {
                            color: itemOpt.color, //坐标点颜色
                            shadowBlur: 0, // 图形阴影的模糊大小
                            shadowOffsetX: 0 // 阴影水平方向上的偏移距离。
                        }
                    },
                    tooltip: {
                        //仅在 options中最外层的 tooltip.trigger 为 'item'时有效
                        position: 'bottom', //提示框位置,仅在 options中最外层的 tooltip.trigger 为 'item'时有效
                        formatter: function (params: any, ticket: any, callback: any) {
                            var strHtml = '<div>变电站:' + itemOpt.subName + '<br/>' + '监测点:' + itemOpt.srbName

                            strHtml += '</div>'
                            return strHtml
                        }
                    }
                }
            })
        })
    })
}

// 表格数据处理
const tabulation = (res: any) => {
    distributionData.value = []
    for (var i = 0; i < res.data.areaValue.length; i++) {
        distributionData.value.push({
            qy: res.data.areaValue[i][0],
            jcd: res.data.areaValue[i][1],
            zc: res.data.areaValue[i][2],
            zd: res.data.areaValue[i][3]
        })
    }
}
// 柱状图数据处理
const histogram = (res: any) => {
    echartList.value = {
        title: {
            text:
                titleA.value == '电压等级'
                    ? '电压等级'
                    : titleA.value == '终端厂家'
                    ? '终端厂家'
                    : titleA.value == '干扰源类型'
                    ? '干扰源类型'
                    : titleA.value == '电网拓扑'
                    ? area.value.areaName
                    : '' // 给X轴加单位
        },
        tooltip: {
            formatter: function (params) {
                // console.log(params);
                var tips = ''
                for (var i = 0; i < params.length; i++) {
                    tips += params[i].name + '</br/>'
                    tips += '监测点数' + ':' + '&nbsp' + '&nbsp' + params[i].value + '</br/>'
                }
                return tips
            }
        },

        xAxis: {
            name:
                titleA.value == '电压等级'
                    ? '(电压\n等级)'
                    : titleA.value == '终端厂家'
                    ? '(终端\n厂家)'
                    : titleA.value == '干扰源类型'
                    ? '(干扰\n源类型)'
                    : titleA.value == '电网拓扑'
                    ? '(区域)'
                    : '', // 给X轴加单位
            data: distributionData.value.map(item => item.qy)
        },
        yAxis: {
            name: '监测点数（个）' // 给X轴加单位
        },
        options: {
            series: [
                {
                    //   name: '暂降次数',
                    type: 'bar',
                    data: distributionData.value.map(item => item.jcd),
                    barMaxWidth: 30,
                    itemStyle: {
                        normal: {
                            color: '#07CCCA'
                        }
                    },
                    label: {
                        show: true,
                        position: 'top',
                        textStyle: {
                            //数值样式
                            color: '#000'
                        },
                        fontSize: 12
                    }
                }
            ]
        }
    }
}

onMounted(() => {
    onSubmit()
})
</script>
<style lang="scss" scoped>
.map {
    height: calc(100vh - 120px);
}
.tall {
    height: calc((100vh - 120px) / 2);
}
</style>