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="区域">
                <el-input v-model="deptIndex" placeholder="请选择区域" clearable />
            </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>
            <el-row :gutter="20">
                <el-col :span="12">
                    <MyEchartMap :options="echartList" class="map" />
                </el-col>
                <el-col :span="12">1231</el-col>
            </el-row>
        </div>
    </div>
</template>
<script setup lang="ts">
import { getAreaLineDetail } from '@/api/Region'
import { useDictData } from '@/stores/dictData'
import MyEchartMap from '@/components/echarts/MyEchartMap.vue'
import { ref, reactive, onMounted, provide } from 'vue'
const options = ref<object[]>([])
const echartList = ref({})
const deptIndex = ref<string>('')

const DictData = useDictData()
const formInline = reactive({
    deptIndex: '5699e5916a18a6381e1ac92da5bd2628',
    monitorFlag: 2,
    powerFlag: 2,
    serverName: 'event-boot',
    statisticalType: {}
})
const info = () => {
    options.value = DictData.getBasicData('Statistical_Type')
    formInline.statisticalType = options.value[0]
}

const onSubmit = () => {
    getAreaLineDetail(formInline).then(res => {
        echartList.value = {
            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) => {
            echartList.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
                            }
                        }
                    }
                })
            })
        })
    })
}

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