企业数量

src/main/data-center/src/components/mapChart.vue

@@ -1,5 +1,18 @@
 <template>
-    <div ref="chart" id="map-chart"></div>
+    <div class="map">
+        <div id="baiduMap" v-if="chooseMenu === 0"></div>
+        <div ref="chart" id="map-chart" v-else></div>
+
+        <div class="box" v-if="showBox">
+            <div class="title">
+                <img :src="chooseInfo.logo" alt="" />
+                <span> {{ chooseInfo.orgName }}</span>
+            </div>
+            <div class="text">{{ chooseInfo.parentOrg }} {{ chooseInfo.orgType }}</div>
+            <div class="text">企业介绍:{{ chooseInfo.intro }}</div>
+            <div class="text">地 址:{{ chooseInfo.addressDetail }}</div>
+        </div>
+    </div>
 </template>
 
 <script>
@@ -23,7 +36,7 @@ export default {
     mixins: [menuOptions],
     props: {
         valueInfo: {
-            type: Object,
+            type: [Object, Array],
             default: () => {
                 return {};
             },
@@ -40,6 +53,24 @@ export default {
             desc: 1000,
             sndStat: {},
             showLables: [],
+            map: null,
+            chooseInfo: {
+                address: '江西上饶',
+                addressDetail: '江西省上饶市信州区茶圣东路文创中心2号楼3楼',
+                contactName: '林必利 ',
+                id: 11836,
+                intro:
+                    '上饶市饶东现代产业发展有限公司成立于2017-02-21，法定代表人为林必利，注册资本为100000万元人民币，统一社会信用代码为91361100MA35Q7G85K，企业地址位于江西省上饶市信州区茶圣东路文创中心2号楼3楼，所属行业为商务服务业，经营范围包含：现代农业服务；节能环保产业服务；信息技术产业服务；智慧城市开发建设和运营管理。',
+                location: '116.309983,39.983965\r',
+                logo: 'https://image.qcc.com/auto/1658389f6237d1dc73c3281f589d0753.jpg',
+                orgName: '上饶市饶东现代产业发展有限公司',
+                orgType: '小微企业',
+                parentOrg: '商务服务业',
+                publicCompany: false,
+                status: 'PASS',
+                userId: 11835,
+            },
+            showBox: false,
         };
     },
     computed: {
@@ -76,15 +107,32 @@ export default {
             if (this.timeData) {
                 clearTimeout(this.timeData);
             }
-            if (!this.myChart) {
-                var chartDom = document.getElementById('map-chart');
-                this.myChart = echarts.init(chartDom);
+            this.showBox = false;
+
+            if (this.chooseMenu == 0) {
+                if (this.map) {
+                    this.map.destroy();
+                    this.map = null;
+                }
             } else {
-                this.myChart.dispose();
+                if (!this.myChart) {
+                    let chartDom = document.getElementById('map-chart');
+                    if (chartDom.style) {
+                        chartDom.style.backgroundImage = '';
+                    }
+                    this.myChart = echarts.init(chartDom);
+                } else if (this.myChart) {
+                    let chartDom = document.getElementById('map-chart');
+                    if (chartDom.style) {
+                        chartDom.style.backgroundImage = '';
+                    }
+
+                    this.myChart.dispose();
+                }
             }
         },
         init() {
-            // this.clearDom();
+            this.clearDom();
             this.$nextTick(() => {
                 console.log(this.chooseMenu);
                 if (this.chooseMenu === 0) {
@@ -105,7 +153,7 @@ export default {
         initBaidu() {
             var map = initMap(
                 {
-                    tilt: 30,
+                    tilt: 50,
                     heading: 0,
                     center: [115.853087, 28.689709],
                     zoom: 9,
@@ -117,13 +165,61 @@ export default {
                         'rgba(186, 211, 252, 1)',
                     ],
                 },
-                'map-chart'
+                'baiduMap'
             );
 
+            map.setMinZoom(8);
+            map.setMaxZoom(20);
+
+            map.enableScrollWheelZoom();
+            var bd = new BMapGL.Boundary();
+            bd.get('江西省', function (rs) {
+                var count = rs.boundaries.length; //行政区域的点有多少个
+                var pointArray = [];
+                for (let i = 0; i < count; i++) {
+                    let path = [];
+                    let str = rs.boundaries[i].replace(' ', '');
+                    let points = str.split(';');
+                    for (let j = 0; j < points.length; j++) {
+                        let lng = points[j].split(',')[0];
+                        let lat = points[j].split(',')[1];
+                        path.push(new BMapGL.Point(lng, lat));
+                    }
+                    let prism = new BMapGL.Prism(path, 5000, {
+                        topFillColor: '#5679ea',
+                        topFillOpacity: 0.2,
+                        sideFillColor: '#5679ea',
+                        sideFillOpacity: 0.5,
+                    });
+                    map.addOverlay(prism);
+                }
+            });
+
+            this.map = map;
+            this.initCity();
+        },
+        initCity() {
             var data = [];
+            var data2 = [];
 
             var citys = ['南昌', '景德镇', '萍乡', '九江', '新余', '鹰潭', '赣州', '吉安', '宜春', '抚州', '上饶'];
             var randomCount = citys.length;
+            var values = [...this.valueInfo].filter((item) => {
+                let pos = item.location.split(',');
+                return pos.length == 2;
+            });
+            let nums = {};
+            values.forEach((item) => {
+                console.log(item);
+                let address = item.address.replace(/江西/, '');
+                if (citys.includes(address)) {
+                    let _num = nums[address] || 0;
+                    _num++;
+                    nums[address] = _num;
+                }
+            });
+
+            console.log(nums);
 
             // 构造数据
             while (randomCount--) {
@@ -135,7 +231,7 @@ export default {
                         coordinates: [cityCenter.lng, cityCenter.lat],
                     },
                     properties: {
-                        text: cityName + '\n' + cityCenter.lng + '，' + cityCenter.lat,
+                        text: cityName + '\n' + (nums[cityName] || 0),
                         // textColor: '#fff',
                         // borderColor: ['#0f0', '#f00', '#00f'][randomCount % 3],
                         // backgroundColor: ['#0f0', '#f00', '#00f'][randomCount % 3],
@@ -143,10 +239,28 @@ export default {
                 });
             }
 
+            data2 = values.map((item) => {
+                let pos = item.location.split(',');
+                return {
+                    geometry: {
+                        type: 'Point',
+                        coordinates: [pos[0], pos[1]],
+                    },
+                    properties: {
+                        text: item.orgName,
+                        // textColor: '#fff',
+                        // borderColor: ['#0f0', '#f00', '#00f'][randomCount % 3],
+                        // backgroundColor: ['#0f0', '#f00', '#00f'][randomCount % 3],
+                    },
+                };
+            });
+
             var view = new mapvgl.View({
-                map: map,
+                map: this.map,
             });
 
+            let _this = this;
+
             var layer = new mapvgl.LabelLayer({
                 textAlign: 'center',
                 textColor: '#fc0',
@@ -160,11 +274,35 @@ export default {
                 enablePicked: true,
                 onClick: (e) => {
                     // 点击事件
-                    console.log('click', e);
+                    let _zoom = 11;
+                    let zoom = this.map.getZoom();
+                    console.log(this.map.getZoom());
+                    if (zoom > 10) {
+                        console.log(values[e.dataIndex]);
+                        _this.chooseInfo = values[e.dataIndex];
+                        _zoom = 18;
+                        setTimeout(() => {
+                            _this.showBox = true;
+                        }, 500);
+                    }
+                    if (e.dataItem) {
+                        let location = e.dataItem.geometry.coordinates;
+                        this.map.centerAndZoom(new BMapGL.Point(location[0], location[1]), _zoom);
+                    }
                 },
             });
             view.addLayer(layer);
             layer.setData(data);
+            this.map.addEventListener('zoomstart', (e) => {
+                this.showBox = false;
+            });
+            this.map.addEventListener('zoomend', (e) => {
+                if (e.currentTarget.zoomLevel > 9) {
+                    layer.setData(data2);
+                } else {
+                    layer.setData(data);
+                }
+            });
         },
         init3D() {
             var chartDom = document.getElementById('map-chart');
@@ -623,8 +761,45 @@ export default {
 </script>
 
 <style lang="less" scoped>
-#map-chart {
+#map-chart,
+#baiduMap {
+    width: 100%;
+    height: 100%;
+}
+.map {
     width: 100%;
     height: 100%;
 }
+@prim: #3cbef2;
+.box {
+    padding: 15px;
+    width: 500px;
+    box-sizing: border-box;
+    position: fixed;
+    top: 200px;
+    z-index: 999;
+    background-color: rgba(0, 0, 0, 0.5);
+    left: 50%;
+    transform: translateX(-50%);
+    color: @prim;
+    border-radius: 8px;
+    .title {
+        .flex();
+        img {
+            width: 40px;
+            height: 40px;
+            border-radius: 100px;
+        }
+        span {
+            font-size: 16px;
+            font-weight: bold;
+            margin-left: 6px;
+        }
+    }
+
+    .text {
+        font-size: 14px;
+        margin-top: 12px;
+    }
+}
 </style>

src/main/data-center/src/views/Home.vue

@@ -105,22 +105,44 @@ export default {
     },
     methods: {
         getData() {
-            this.$http
-                .get('/statDataCenter/cityData', {
-                    categoryId: this.menus[this.chooseMenu].id,
-                })
-                .then((res) => {
-                    this.valueInfo = {
-                        labels: res.map((item) => {
-                            return item.city;
-                        }),
-                        data: res.map((item) => {
-                            return item.num;
-                        }),
-                    };
-                    // this.valueInfo = res;
-                    this.$refs.mapChart.init();
-                });
+            if (this.chooseMenu == 0) {
+                this.$http
+                    .get('/orgInfo/all', {
+                        size: 99,
+                    })
+                    .then((res) => {
+                        console.log(res);
+                        this.valueInfo = res.content;
+
+                        // this.valueInfo = {
+                        //     labels: res.map((item) => {
+                        //         return item.city;
+                        //     }),
+                        //     data: res.map((item) => {
+                        //         return item.num;
+                        //     }),
+                        // };
+                        // // this.valueInfo = res;
+                        this.$refs.mapChart.init();
+                    });
+            } else {
+                this.$http
+                    .get('/statDataCenter/cityData', {
+                        categoryId: this.menus[this.chooseMenu].id,
+                    })
+                    .then((res) => {
+                        this.valueInfo = {
+                            labels: res.map((item) => {
+                                return item.city;
+                            }),
+                            data: res.map((item) => {
+                                return item.num;
+                            }),
+                        };
+                        // this.valueInfo = res;
+                        this.$refs.mapChart.init();
+                    });
+            }
         },
         goSearch() {
             this.$router.push('/search');