gz-att-web/src/views/map.vue

<template> 
    <div class="mapBox">
        <CountryMap
            :send-geo="geoData"
        ></CountryMap>
    </div>
</template>

<script>
import { getMapData } from '@/api/map'
import CountryMap from './components/countryMap.vue'
export default {
    name: 'map',
    components: {
        CountryMap
    },
    data() {
        return {
            geoData: undefined, 
        }
    },
    created() {
       
    },
    mounted() {
        // this.geoData = [
        //     { name: '北京市', projName: '王府井工程', itemStyle: { normal: { areaColor: '#7DDEFF' } }, value: [116.407526, 39.90403] },
        //     { name: '上海市', projName: '外滩工程', itemStyle: { normal: { areaColor: '#7DDEFF' } }, value: [121.473701, 31.230416] },
        //     { name: '云南省', projName: '香格里拉工程', itemStyle: { normal: { areaColor: '#7DDEFF' } }, value: [102.103365, 24.235567] },
        //     { name: '陕西省', projName: '大雁塔工程', itemStyle: { normal: { areaColor: '#7DDEFF' } }, value: [108.551244, 34.150234] },
        //     // { name: '新疆维吾尔自治区', projName: '喀什工程', itemStyle: { normal: { areaColor: '#7DDEFF' } }, value: [87.627704, 43.793026] },
        // ]
        // this.getInitData()
        this.getInitData()
        // setInterval(() => {
        //     this.getInitData()
        // }, 1000 * 60)
    },
    methods: { 
        async getInitData() {
            await getMapData().then(response => {
                console.log(response)
                this.geoData = response.data.map((item) => {
                console.log(item)
                    return {
                        name: item.orgName,
                        personNum: item.personNum,
                        orgId: item.orgId,
                        orgName: item.orgName,
                        province: item.province,
                        itemStyle: {
                            normal: {
                                areaColor: '#D1EBFE',
                            },
                        },
                        value: [Number(item.lon), Number(item.lat)]
                    }
                })
            });
        }, 
    },
}
</script>

<style lang="scss" scoped>
.mapBox {
    width: 100%;
    height: 820px; 
    z-index: 1000;
    background: url("../assets/img/mapBg.png") no-repeat center;
    background-size: 100% 100%;
}
</style>