Merge pull request #355 from dataease/pr@dev@perf_地图前端缓存

perf: 地图坐标json使用缓存

frontend/src/store/getters.js

@@ -26,6 +26,7 @@ const getters = {
   licMsg: state => state.lic.licMsg,
   uiInfo: state => state.user.uiInfo,
   conditions: state => state.conditions.conditions,
-  msgTypes: state => state.msg.msgTypes
+  msgTypes: state => state.msg.msgTypes,
+  geoMap: state => state.map.geoMap
 }
 export default getters

frontend/src/store/index.js

@@ -12,6 +12,7 @@ import panel from './modules/panel'
 import application from './modules/application'
 import lic from './modules/lic'
 import msg from './modules/msg'
+import map from './modules/map'
 import animation from '@/components/canvas/store/animation'
 import compose from '@/components/canvas/store/compose'
 import contextmenu from '@/components/canvas/store/contextmenu'
@@ -185,7 +186,8 @@ const data = {
     panel,
     application,
     lic,
-    msg
+    msg,
+    map
   },
   getters
 }

frontend/src/store/modules/map.js

@@ -0,0 +1,25 @@
+const state = {
+  geoMap: {}
+}
+
+const mutations = {
+
+  SET_GEO: (state, { key, value }) => {
+    state.geoMap[key] = value
+  }
+
+}
+
+const actions = {
+  setGeo({ commit }, data) {
+    commit('SET_GEO', data)
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}
+

frontend/src/views/chart/components/ChartComponent.vue

@@ -35,7 +35,8 @@ export default {
   data() {
     return {
       myChart: {},
-      chartId: uuid.v1()
+      chartId: uuid.v1(),
+      currentGeoJson: null
     }
   },
   watch: {
@@ -100,22 +101,33 @@ export default {
         const customAttr = JSON.parse(chart.customAttr)
         if (!customAttr.areaCode) return
 
-        let areaJson
-        if ((areaJson = localStorage.getItem('areaJson' + customAttr.areaCode)) !== null) {
-          this.initMapChart(areaJson, chart)
+        if (this.currentGeoJson) {
+          this.initMapChart(this.currentGeoJson, chart)
           return
         }
+
+        if (this.$store.getters.geoMap[customAttr.areaCode]) {
+          this.currentGeoJson = this.$store.getters.geoMap[customAttr.areaCode]
+          this.initMapChart(this.currentGeoJson, chart)
+          return
+        }
+
         geoJson(customAttr.areaCode).then(res => {
           this.initMapChart(res.data, chart)
-          // localStorage最大容量只有5M，先取消缓存
-          // localStorage.setItem('areaJson' + customAttr.areaCode, res.data)
+
+          this.$store.dispatch('map/setGeo', {
+            key: customAttr.areaCode,
+            value: res.data
+          })
+          this.currentGeoJson = res.data
         })
         return
       }
       this.myEcharts(chart_option)
     },
     initMapChart(geoJson, chart) {
-      this.$echarts.registerMap('HK', geoJson)
+      // this.$echarts.registerMap('HK', geoJson)
+      this.$echarts.getMap('HK') || this.$echarts.registerMap('HK', geoJson)
       const base_json = JSON.parse(JSON.stringify(BASE_MAP))
       const chart_option = baseMapOption(base_json, chart)
       this.myEcharts(chart_option)