bonus-ui/src/views/screen/cityScreen/components/countryMap/index.vue

<template>
    <div class="centerTopPage">
        <div class="top-btns">
            <div class="btn" :class="{ active: btnIndex == 1 }" @click="">装备总数</div>
        </div>
        <div class="store-equip"
            >仓库装备：<span class="cont">{{ warehouseEquipmentNum }}</span> 台</div
        >
        <div class="out-city-equip">{{ outCityEquipmentNum }}</div>
        <div class="mapBox">
            <div id="mapEcharts"></div>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts'
import { mapDataApi } from '@/api/screen/cityScreen'
import anhui from '@/utils/mapJson/anhui.json'
import hefeiJson from '@/utils/mapJson/hefei.json'
import wuhuJson from '@/utils/mapJson/wuhu.json'
import bengbuJson from '@/utils/mapJson/bengbu.json'
import maanshanJson from '@/utils/mapJson/maanshan.json'
import huaibeiJson from '@/utils/mapJson/huaibei.json'
import huainanJson from '@/utils/mapJson/huainan.json'
import tonglingJson from '@/utils/mapJson/tongling.json'
import anqingJson from '@/utils/mapJson/anqing.json'
import huangshanJson from '@/utils/mapJson/huangshan.json'
import chuzhouJson from '@/utils/mapJson/chuzhou.json'
import fuyangJson from '@/utils/mapJson/fuyang.json'
import suzhouJson from '@/utils/mapJson/suzhou.json'
import liuanJson from '@/utils/mapJson/liuan.json'
import bozhouJson from '@/utils/mapJson/bozhou.json'
import chizhouJson from '@/utils/mapJson/chizhou.json'
import xuanchenJson from '@/utils/mapJson/xuanchen.json'

export default {
    name: 'centerTopPage',
    props: {
        sendHeight: {
            type: String,
            default: '100%',
        },
        sendMapColor: {
            type: String,
            default: '#17A1F1',
        },
        sendGeo: {
            type: Array,
            default: null,
        },
        sendNumber: {
            type: Number,
        },
        showLine: {
            type: Boolean,
            default: false,
        },
        sendProjSpin: {
            type: Array | Object,
        },
    },
    data() {
        return {
            type: 1,
            zoom: 1,
            zoom2: 1,
            mapEcharts: null,
            mapEcharts2: null,
            mapJson: null,
            pointArea: this.sendProjSpin,
            pointAll: [],
            companyList: [],
            companyAreaList: [],
            isCity: 0,
            cityCount: [],
            gozoom: 1,
            geoVal: [],
            cityName: '合肥',
            btnIndex: 1,
            warehouseEquipmentNum: null, // 仓库装备数
            outCityEquipmentNum: null, // 市外装备数
        }
    },
    created() {},
    mounted() {
        console.log('🚀 ~ mounted ~ .cityName:', this.$router.currentRoute.query.cityName)
        this.cityName = this.$router.currentRoute.query.cityName || '合肥'
        this.getCityJson()
    },
    methods: {
        getCityJson() {
            if (this.cityName.indexOf('合肥') > -1) {
                this.mapJson = hefeiJson
            } else if (this.cityName.indexOf('芜湖') > -1) {
                this.mapJson = wuhuJson
            } else if (this.cityName.indexOf('蚌埠') > -1) {
                this.mapJson = bengbuJson
            } else if (this.cityName.indexOf('淮南') > -1) {
                this.mapJson = huainanJson
            } else if (this.cityName.indexOf('马鞍山') > -1) {
                this.mapJson = maanshanJson
            } else if (this.cityName.indexOf('淮北') > -1) {
                this.mapJson = huaibeiJson
            } else if (this.cityName.indexOf('铜陵') > -1) {
                this.mapJson = tonglingJson
            } else if (this.cityName.indexOf('安庆') > -1) {
                this.mapJson = anqingJson
            } else if (this.cityName.indexOf('黄山') > -1) {
                this.mapJson = huangshanJson
            } else if (this.cityName.indexOf('滁州') > -1) {
                this.mapJson = chuzhouJson
            } else if (this.cityName.indexOf('阜阳') > -1) {
                this.mapJson = fuyangJson
            } else if (this.cityName.indexOf('宿州') > -1) {
                this.mapJson = suzhouJson
            } else if (this.cityName.indexOf('六安') > -1) {
                this.mapJson = liuanJson
            } else if (this.cityName.indexOf('亳州') > -1) {
                this.mapJson = bozhouJson
            } else if (this.cityName.indexOf('池州') > -1) {
                this.mapJson = chizhouJson
            } else if (this.cityName.indexOf('宣城') > -1) {
                this.mapJson = xuanchenJson
            } else if (this.cityName.indexOf('安徽送变电') > -1) {
                this.mapJson = anhui
            }
            console.log(this.mapJson)
            this.getMapData()
        },
        getMapData() {
            // 获取地区中心坐标
            var mapFeatures = this.mapJson.features.map((item) => {
                let obj = {
                    name: item.properties.name,
                    value: item.properties.center,
                }
                return obj
            })
            console.log(mapFeatures)
            let param = { companyId: sessionStorage.getItem('companyId'), city: this.cityName }
            mapDataApi(param).then((response) => {
                console.log(response, 'mapDataApi--> 大屏地图数据')
                // response.data.proList.forEach(item=>{
                //     let obj = Object.assign({},item)
                //     obj.name = item.county;
                //     let index = mapFeatures.findIndex(v=>v.name==item.county)
                //     if(index>-1){
                //         obj.value = mapFeatures[index].value
                //     }
                //     this.geoVal.push(obj)
                // })
                this.warehouseEquipmentNum = response.data.warehouseEquipmentNum
                this.outCityEquipmentNum = response.data.outCityEquipmentNum
                if (response.data.proList.length > 0) {
                    this.geoVal = response.data.proList.map((item) => {
                        return {
                            ...item,
                            value: [item.lon, item.lat],
                        }
                    })
                }
                this.getInitData()
            })
        },
        getInitData() {
            this.mapEcharts = echarts.init(document.getElementById('mapEcharts'))
            echarts.registerMap('dishi', this.mapJson)
            this.setMapOption()
        },
        setMapOption() {
            this.mapEcharts.clear()
            console.log(this.geoVal)
            let that = this
            let imgUrl = require('../../../../../assets/cityScreen/mapBg2.png')
            let echartOption = {
                geo: [
                    {
                        show: true,
                        map: 'dishi',
                        type: 'map',
                        aspectScale: 1,
                        zoom: 1,
                        roam: false, // 是否允许缩放
                        animationDurationUpdate: 0,
                        layoutSize: '60%',
                        layoutCenter: ['50%', '56%'],
                        itemStyle: {
                            normal: {
                                label: {
                                    show: false,
                                },
                                areaColor: this.sendMapColor, //地图颜色
                                opacity: 0.5,
                                borderColor: '#7ef638', //地图边框颜色
                                borderWidth: 1, //地图边框宽度
                                shadowColor: 'none',
                                shadowBlur: 10,
                                color: '#fff',
                                // 设置扇形的阴影
                            },
                            emphasis: {
                                //选中省份的颜色
                                areaColor: '#061E3D',
                                label: {
                                    show: true,
                                },
                            },
                        },
                        label: {
                            normal: {
                                show: false,
                                fontSize: 12,
                                fontWeight: 500,
                                color: 'rgba(255,255,255,0.5)',
                            },
                            emphasis: {
                                show: true,
                                areaColor: '#061E3D',
                                color: '#fff',
                            },
                        },
                        zlevel: 1,
                        regions: null,
                        tooltip: {
                            show: false,
                        },
                    },
                    {
                        map: 'dishi',
                        aspectScale: 1,
                        roam: false, // 是否允许缩放
                        animationDurationUpdate: 0,
                        zoom: 1,
                        layoutSize: '60%',
                        layoutCenter: ['50%', '58%'],
                        itemStyle: {
                            areaColor: '#5785AE',
                            borderColor: '#5785AE',
                            borderWidth: 1,
                            opacity: 0.5,
                            color: '#fff',
                        },
                        zlevel: -1,
                        silent: true,
                        tooltip: {
                            show: false,
                        },
                    },
                ],
                visualMap: {
                    show: false,
                    top: 'top',
                    min: 0,
                    max: 2,
                    seriesIndex: 0,
                    calculable: true,
                    inRange: {
                        color: ['#998f74', '#04a4f6', '#00943e', '#dae07b', '#b62022'],
                    },
                },
                tooltip: {},
                series: [
                    {
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        zlevel: 10,
                        symbol: 'circle',
                        symbolSize: 15,
                        colorBy: null,
                        itemStyle: {
                            color: '#409EFF',
                        },
                        label: {
                            show: true,
                            position: 'top',
                            formatter: function (params) {
                                // 第一行装备数量，第二行工程名称
                                return `{equip|${params.data.useNum}}\n{proj|${params.data.projectName}}`
                            },
                            rich: {
                                equip: {
                                    color: '#fff',
                                    fontSize: 14,
                                    fontWeight: 'bold',
                                    align: 'center',
                                    verticalAlign: 'middle',
                                    backgroundColor: '#409EFF', // 蓝色背景
                                    borderRadius: 10, // 圆角（如果宽高相等就是圆形）
                                    padding: [2, 6], // 内边距控制大小
                                    lineHeight: 20, // 高度
                                },
                                proj: {
                                    color: '#fff',
                                    fontSize: 12,
                                    lineHeight: 16,
                                },
                            },
                        },
                        data: this.geoVal,
                    },
                ],
            }
            this.mapEcharts.setOption(echartOption)
            this.mapEcharts.on('click', function (params) {
                if (params.componentSubType === 'scatter') {
                    // console.log(params)
                    let option = that.mapEcharts.getOption() //获得option对象
                    // 点击变黄
                    option.series[0].data.forEach((item) => {
                        if (params.data.name !== item.name) {
                            if (item.isActive) {
                                item.isActive = false
                            }
                        } else {
                            item.isActive = true
                        }
                    })
                    that.mapEcharts.setOption(option)
                    that.$emit('closeMap', { value: params.data })
                }
            })
        },
    },
}
</script>

<style lang="scss" scoped>
.centerTopPage {
    width: 100%;
    //height: var(--send-height);
    height: 100%;
    // background:palegoldenrod;
    margin-bottom: 2%;
    padding: 0 10px;
    position: relative;
    box-sizing: border-box;
    .iconMap {
        display: block !important;
        visibility: visible !important;
        opacity: 1;
    }
    .buttonTop {
        width: 100%;
        display: flex;
        justify-content: flex-start;
    }
    .buttom1 {
        width: 110px;
        height: 32px;
        text-align: center;
        line-height: 32px;
        border-radius: 4px;
        color: #55f3fb;
        // background: url(../../assets/img/checked.png) no-repeat center;
        background-size: 110px 32px;
        margin-right: 12px;
        cursor: pointer;
    }
    .buttom1.on {
        color: #0095ff;
        // background: url(../../assets/img/checked_on.png) no-repeat center;
        background-size: 110px 32px;
    }
    .mapBox {
        margin-top: -90px;
        width: 100%;
        height: 97%;
        display: flex;
        position: relative;
        // 放大1.2倍
        transform: scale(1.3);
        #mapEcharts {
            width: 90%;
            height: 90%;
        }
        #mapEcharts2 {
            width: 100%;
            height: 100%;
        }
        z-index: 1000;
    }
    .label-box {
        position: absolute;
        bottom: 0px;
        left: 40px;
        // background: url('../../assets/img/home/labelBg.png') no-repeat;
        background-size: 100% 100%;
        padding: 10px 15px;
        .item {
            font-size: 14px;
            line-height: 22px;
            color: #fff;
            position: relative;
            padding-left: 15px;
            font-size: 16px;
        }
        .item:before {
            content: '';
            width: 10px;
            height: 10px;
            background: #06bbf2;
            position: absolute;
            top: 6px;
            left: 0px;
        }
        .itemColor1:before {
            background: #06bbf2;
        }
        .itemColor2:before {
            background: #2df0fe;
        }
        .itemColor3:before {
            background: #10e0a5;
        }
        .itemColor4:before {
            background: #dcef4e;
        }
        .itemColor5:before {
            background: #f48413;
        }
        .itemColor6:before {
            background: #fc5403;
        }
    }
}
</style>

<style lang="scss" scoped>
.top-btns {
    margin-top: 60px;
    display: flex;
    justify-content: center;
    /* position: absolute;
  top: 10px; */
    .btn:not(:last-child) {
        margin-right: 80px;
    }

    .btn {
        font-size: 15px;
        text-align: center;
        padding: 6px 15px;
        font-family: DS-TITLE;
        color: #ccc;
        background-image: url('../../../wsScreen/img/btn.png');
        background-size: 100% 100%;
        cursor: pointer;
    }

    .active {
        background-image: url('../../../wsScreen/img/btn-active.png');
        background-size: 100% 100%;
    }
}
.store-equip {
    position: absolute;
    top: 30px;
    left: 50px;
    width: 116px;
    height: 75px;
    color: #ccc;
    font-size: 11px;
    padding-top: 4px;
    background: url('../../../../../assets/cityScreen/mapBg1.png');
    background-size: 100% 100%;
    text-align: center;
    .cont {
        color: #fff;
        font-size: 16px;
    }
}
.out-city-equip {
    position: absolute;
    top: 366px;
    right: 55px;
    width: 40px;
    height: 52px;
    color: #fff;
    font-size: 16px;
    background: url('../../../../../assets/cityScreen/position.png');
    background-size: 100% 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.scrollTooltip::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
.scrollTooltip::-webkit-scrollbar-thumb {
    background-color: #1653a6;
    border-radius: 10px;
    -webkit-box-shadow: inset 1px 1px 0 #1653a6;
}
.itemColor {
    position: relative;
    padding-left: 15px;
    line-height: 22px;
}
.itemColor:before {
    content: '';
    width: 10px;
    height: 10px;
    background: #06bbf2;
    position: absolute;
    top: 6px;
    left: 0px;
}
.itemColor1:before {
    background: #06bbf2;
}
.itemColor2:before {
    background: #2df0fe;
}
.itemColor3:before {
    background: #10e0a5;
}
.itemColor4:before {
    background: #dcef4e;
}
.itemColor5:before {
    background: #f48413;
}
.itemColor6:before {
    background: #fc5403;
}
</style>