Merge branch 'master' of http://git.cc-lotus.info/service-platform/web-test

src/views/dynamic/parts/map.vue

@@ -5,10 +5,12 @@
 </template>
 
 <script>
+import _ from 'lodash';
 import { mapState, createNamespacedHelpers } from 'vuex';
 import echarts from 'echarts/lib/echarts';
 import 'echarts/map/js/china.js';
 import 'echarts/map/js/province/jilin.js';
+import jlJson from 'echarts/map/json/province/jilin';
 import 'echarts/lib/component/title';
 import 'echarts/lib/component/legend';
 import 'echarts/lib/component/toolbox';
@@ -23,55 +25,92 @@ export default {
       myChart: null,
     };
   },
-  created() {
+  mounted() {
     this.init();
   },
   methods: {
     async init() {
+      let newJson = this.setPos(_.cloneDeep(jlJson));
+      console.log(newJson);
+      let city = jlJson.features.map(i => {
+        let object = {};
+        object.name = _.get(i.properties, 'name');
+        object.value = Math.ceil(Math.random() * 100);
+        return object;
+      });
       let option = {
-        title: '',
+        title: {
+          text: '吉林省',
+          left: 'center',
+        },
+        tooltip: {
+          trigger: 'item',
+        },
         geo: {
-          map: '吉林市',
+          type: 'map',
+          map: '吉林',
           label: {
-            emphasis: {
-              show: false,
-            },
+            show: true,
+            color: '#fff',
+            position: 'top',
+            emphasis: { show: true },
           },
           itemStyle: {
-            normal: {
-              areaColor: '#058bd2',
-              borderColor: '#111',
-            },
             emphasis: {
-              areaColor: '#1e67b2',
+              areaColor: '#b6f884',
             },
           },
         },
         visualMap: {
           //颜色轴，可以根据数据点的值大小，展示不同的颜色，或用来展示地图块的不同颜色
           min: 0,
-          max: 200,
+          max: 100,
           calculable: true,
           inRange: {
-            color: ['#3dda8e', '#eac736', '#d94e5d'],
+            color: ['#8dc5f4', '#266bce'],
           },
           textStyle: {
-            color: '#fff',
+            color: '#ccc',
           },
         },
         series: [
           {
-            name: '吉林',
-            geoIndex: 0,
+            name: '吉林省',
             type: 'map',
-            mapType: 'jilin',
-            data: [1],
+            map: 'jilin',
+            emphasis: {
+              label: {
+                show: true,
+              },
+            },
+            // 文本位置修正
+            textFixed: {
+              Alaska: [20, 120],
+            },
+            data: city,
           },
         ],
       };
+      //用$echarts是因为上面注册使用的 Vue.prototype.$echarts
+      echarts.registerMap('jilin', newJson);
       this.myChart = echarts.init(document.getElementById('chartMap'));
       this.myChart.setOption(option);
     },
+    setPos(data) {
+      data.features.map(i => {
+        if (i.id == '220100') i.properties.cp = [125.3245, 44.3];
+        if (i.id == '220200') i.properties.cp = [126.8, 43.6];
+        if (i.id == '220300') i.properties.cp = [124.370785, 43.57];
+        if (i.id == '220400') i.properties.cp = [125.255349, 42.902692];
+        if (i.id == '220500') i.properties.cp = [125.736501, 41.821177];
+        if (i.id == '220600') i.properties.cp = [127.227839, 42.142505];
+        if (i.id == '220700') i.properties.cp = [124.223608, 44.818243];
+        if (i.id == '220800') i.properties.cp = [122.941114, 45.319026];
+        if (i.id == '222400') i.properties.cp = [129.313228, 43.204823];
+        return i;
+      });
+      return data;
+    },
   },
   computed: {
     ...mapState(['user']),

src/views/hall/dock/dockDetail.vue

@@ -84,13 +84,6 @@ export default {
     if (this.$route.query.id) {
       this.searchInfo();
     }
-    //http://localhost:8001/direct?id=5eb52b8263be753d982dabc7
-  },
-  mounted() {
-    window.addEventListener('beforeunload', e => {
-      event.preventDefault();
-      this.killTalk();
-    });
   },
   methods: {
     ...mapProduct(['fetch']),
@@ -162,6 +155,9 @@ export default {
   metaInfo() {
     return { title: this.$route.meta.title };
   },
+  beforeDestroy() {
+    this.killTalk();
+  },
   beforeRouteLeave(to, from, next) {
     this.killTalk();
     next();