From d0ed795da2011ac450e889c732d551dd956dea52 Mon Sep 17 00:00:00 2001
From: aixianling <aixianling@sinoecare.com>
Date: Wed, 29 Mar 2023 14:43:34 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E7=BB=84=E4=BB=B6=E7=BC=BA?=
 =?UTF-8?q?=E5=B0=91=E5=90=8D=E5=AD=97=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/AiDvMap.vue | 430 +++++++++++++++++++++--------------------
 components/index.js    |   1 -
 2 files changed, 216 insertions(+), 215 deletions(-)

diff --git a/components/AiDvMap.vue b/components/AiDvMap.vue
index 63d7a30d..f9db8e6e 100644
--- a/components/AiDvMap.vue
+++ b/components/AiDvMap.vue
@@ -5,249 +5,251 @@
 </template>
 
 <script>
-  import * as echarts from 'echarts'
-  import http from "dui/lib/js/request";
-  export default {
-    name: '',
+import * as echarts from 'echarts'
+import http from "dui/lib/js/request";
 
-    data () {
-      return {
-        timer: null,
-        v: `AiDvMap-${new Date().getTime()}`,
-        chart: null
-      }
-    },
-    directives:{
-      resize: {
-        bind(el, binding) {
-          let width = ''
-          let height = ''
-          function isReize() {
-            const style = document.defaultView.getComputedStyle(el)
-            if (width !== style.width || height !== style.height) {
-              binding.value({
-                width: style.width,
-                height:style.height
-              })
-            }
-            width = style.width
-            height = style.height
+export default {
+  name: 'AiDvMap',
+  data() {
+    return {
+      timer: null,
+      v: `AiDvMap-${new Date().getTime()}`,
+      chart: null
+    }
+  },
+  directives: {
+    resize: {
+      bind(el, binding) {
+        let width = ''
+        let height = ''
+
+        function isReize() {
+          const style = document.defaultView.getComputedStyle(el)
+          if (width !== style.width || height !== style.height) {
+            binding.value({
+              width: style.width,
+              height: style.height
+            })
           }
-          el.__vueSetInterval__ = setInterval(isReize, 300)
-        },
-
-        unbind(el) {
-          clearInterval(el.__vueSetInterval__)
+          width = style.width
+          height = style.height
         }
+
+        el.__vueSetInterval__ = setInterval(isReize, 300)
+      },
+
+      unbind(el) {
+        clearInterval(el.__vueSetInterval__)
       }
-    },
-    mounted () {
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+
+  methods: {
+    onDomResize() {
       this.$nextTick(() => {
-        this.initChart()
+        this.chart.resize()
       })
     },
 
-    methods: {
-      onDomResize () {
-        this.$nextTick(() => {
-          this.chart.resize()
-        })
-      },
+    initChart() {
+      this.chart = echarts.init(document.querySelector(`.${this.v}`))
+      this.getData().then(res => {
+        if (res.code === 0) {
+          echarts.registerMap('滨海县', res.data)
 
-      initChart () {
-        this.chart = echarts.init(document.querySelector(`.${this.v}`))
-        this.getData().then(res => {
-          if (res.code === 0) {
-            echarts.registerMap('滨海县', res.data)
-
-            let option = {
-              geo: [
-                {
-                  map: "滨海县",
-                  aspectScale: 1,
-                  zoom: 0.65,
-                  layoutCenter: ["50%", "50%"],
-                  layoutSize: "180%",
+          let option = {
+            geo: [
+              {
+                map: "滨海县",
+                aspectScale: 1,
+                zoom: 0.65,
+                layoutCenter: ["50%", "50%"],
+                layoutSize: "180%",
+                show: true,
+                roam: false,
+                emphasis: {
                   show: true,
-                  roam: false,
-                  emphasis: {
-                    show: true,
-                      label: {
-                      textStyle: {
-                        color: "#FFFFFF"
-                      },
-                    },
-                    itemStyle: {
-                      // areaColor: '#fff'
-                    }
-                  },
                   label: {
-                    normal: {
-                      show: false,
-                      color: '#fff',
-                      fontSize: '20'
-                    }
+                    textStyle: {
+                      color: "#FFFFFF"
+                    },
                   },
                   itemStyle: {
-                    normal: {
-                      borderColor: "rgba(2, 198, 220, 1)",
-                      borderWidth: 2,
-                      shadowColor: "rgba(2, 198, 220, 0.1)",
-                      shadowOffsetY: 10,
-                      shadowBlur: 120,
-                      areaColor: "#163c56",
-                    },
+                    // areaColor: '#fff'
                   }
                 },
-                // 重影
-                {
-                  type: "map",
-                  map: "滨海县",
-                  zlevel: -1,
-                  aspectScale: 1,
-                  zoom: 0.65,
-                  layoutCenter: ["50%", "51%"],
-                  layoutSize: "180%",
-                  roam: false,
-                  silent: true,
-                  itemStyle: {
-                    normal: {
-                      borderWidth: 1,
-                      // borderColor:"rgba(17, 149, 216,0.6)",
-                      borderColor: "rgba(2, 198, 220, 0.6)",
-                      shadowColor: "rgba(2, 198, 220, 0.6)",
-                      shadowOffsetY: 5,
-                      shadowBlur: 15,
-                      areaColor: "rgba(5,21,35,0.1)",
-                    },
-                  },
+                label: {
+                  normal: {
+                    show: false,
+                    color: '#fff',
+                    fontSize: '20'
+                  }
                 },
-                {
-                  type: "map",
-                  map: "滨海县",
-                  zlevel: -2,
-                  aspectScale: 1,
-                  zoom: 0.65,
-                  layoutCenter: ["50%", "52%"],
-                  layoutSize: "180%",
-                  roam: false,
-                  silent: true,
-                  itemStyle: {
-                    normal: {
-                      borderWidth: 1,
-                      // borderColor: "rgba(57, 132, 188,0.4)",
-                      borderColor: "rgba(2, 198, 220, 0.4)",
-                      shadowColor: "rgba(2, 198, 220, 0.4)",
-                      shadowOffsetY: 5,
-                      shadowBlur: 15,
-                      areaColor: "transpercent",
-                    },
-                  },
-                },
-                {
-                  type: "map",
-                  map: "滨海县",
-                  zlevel: -3,
-                  aspectScale: 1,
-                  zoom: 0.65,
-                  layoutCenter: ["50%", "53%"],
-                  layoutSize: "180%",
-                  roam: false,
-                  silent: true,
-                  itemStyle: {
-                    normal: {
-                      borderWidth: 1,
-                      // borderColor: "rgba(11, 43, 97,0.8)",
-                      borderColor: "rgba(2, 198, 220, 0.2)",
-                      shadowColor: "rgba(2, 198, 220, 0.2)",
-                      shadowOffsetY: 15,
-                      shadowBlur: 10,
-                      areaColor: "transpercent",
-                    },
+                itemStyle: {
+                  normal: {
+                    borderColor: "rgba(2, 198, 220, 1)",
+                    borderWidth: 2,
+                    shadowColor: "rgba(2, 198, 220, 0.1)",
+                    shadowOffsetY: 10,
+                    shadowBlur: 120,
+                    areaColor: "#163c56",
                   },
                 }
-              ],
-              series: [
-                {
-                  type: 'scatter',
-                  coordinateSystem: 'geo',
-                  z: 3,
-                  zlevel: 3,
-                  // symbol: 'none',
-                  symbolSize: 16,
-                  rippleEffect: {
-                    period: 2,
-                    scale: 4,
-                    brushType: 'fill'
+              },
+              // 重影
+              {
+                type: "map",
+                map: "滨海县",
+                zlevel: -1,
+                aspectScale: 1,
+                zoom: 0.65,
+                layoutCenter: ["50%", "51%"],
+                layoutSize: "180%",
+                roam: false,
+                silent: true,
+                itemStyle: {
+                  normal: {
+                    borderWidth: 1,
+                    // borderColor:"rgba(17, 149, 216,0.6)",
+                    borderColor: "rgba(2, 198, 220, 0.6)",
+                    shadowColor: "rgba(2, 198, 220, 0.6)",
+                    shadowOffsetY: 5,
+                    shadowBlur: 15,
+                    areaColor: "rgba(5,21,35,0.1)",
                   },
-                  label: {
-                    show: true,
-                    formatter: e => {
-                      const name = e.data[3]
-                      const value = e.data[2]
-                      return `{a|${name}}\n{b|${value}}`
+                },
+              },
+              {
+                type: "map",
+                map: "滨海县",
+                zlevel: -2,
+                aspectScale: 1,
+                zoom: 0.65,
+                layoutCenter: ["50%", "52%"],
+                layoutSize: "180%",
+                roam: false,
+                silent: true,
+                itemStyle: {
+                  normal: {
+                    borderWidth: 1,
+                    // borderColor: "rgba(57, 132, 188,0.4)",
+                    borderColor: "rgba(2, 198, 220, 0.4)",
+                    shadowColor: "rgba(2, 198, 220, 0.4)",
+                    shadowOffsetY: 5,
+                    shadowBlur: 15,
+                    areaColor: "transpercent",
+                  },
+                },
+              },
+              {
+                type: "map",
+                map: "滨海县",
+                zlevel: -3,
+                aspectScale: 1,
+                zoom: 0.65,
+                layoutCenter: ["50%", "53%"],
+                layoutSize: "180%",
+                roam: false,
+                silent: true,
+                itemStyle: {
+                  normal: {
+                    borderWidth: 1,
+                    // borderColor: "rgba(11, 43, 97,0.8)",
+                    borderColor: "rgba(2, 198, 220, 0.2)",
+                    shadowColor: "rgba(2, 198, 220, 0.2)",
+                    shadowOffsetY: 15,
+                    shadowBlur: 10,
+                    areaColor: "transpercent",
+                  },
+                },
+              }
+            ],
+            series: [
+              {
+                type: 'scatter',
+                coordinateSystem: 'geo',
+                z: 3,
+                zlevel: 3,
+                // symbol: 'none',
+                symbolSize: 16,
+                rippleEffect: {
+                  period: 2,
+                  scale: 4,
+                  brushType: 'fill'
+                },
+                label: {
+                  show: true,
+                  formatter: e => {
+                    const name = e.data[3]
+                    const value = e.data[2]
+                    return `{a|${name}}\n{b|${value}}`
+                  },
+                  fontSize: 16,
+                  rich: {
+                    a: {
+                      width: '100%',
+                      color: '#fff',
+                      lineHeight: 20,
+                      fontSize: 16
                     },
-                    fontSize: 16,
-                    rich: {
-                      a: {
-                        width: '100%',
-                        color: '#fff',
-                        lineHeight: 20,
-                        fontSize: 16
+                    b: {
+                      backgroundColor: {
+                        // image: require('@/assets/images/point.png')
                       },
-                      b: {
-                        backgroundColor: {
-                          // image: require('@/assets/images/point.png')
-                        },
-                        color: '#fff',
-                        height: 56,
-                        align: 'center',
-                        width: 50,
-                        fontSize: 16
-                      }
+                      color: '#fff',
+                      height: 56,
+                      align: 'center',
+                      width: 50,
+                      fontSize: 16
                     }
-                  },
-                  data: []
-                }
-              ]
-            }
-            this.chart.setOption(option)
+                  }
+                },
+                data: []
+              }
+            ]
           }
-        })
-      },
-
-      convertData (data) {
-        return data.map(v => {
-          return [this.qqMapTransBMap(v.point[1], v.point[0]).lng, this.qqMapTransBMap(v.point[1], v.point[0]).lat, v.value, v.name]
-        })
-      },
-
-      qqMapTransBMap (lng, lat) {
-        const x_pi = 3.14159265358979324 * 3000.0 / 180.0
-        var x = lng
-        var y = lat
-        var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi)
-        var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi)
-
-        return {
-          lng: z * Math.cos(theta) + 0.0065,
-          lat: z * Math.sin(theta) + 0.006
+          this.chart.setOption(option)
         }
-      },
+      })
+    },
 
-      getData () {
-        return http.post(`/app/appdvcpconfig/apiForward?url=${encodeURIComponent(`https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=${this.$store.state.user.info.areaId.substr(0, 6)}`)}`, )
+    convertData(data) {
+      return data.map(v => {
+        return [this.qqMapTransBMap(v.point[1], v.point[0]).lng, this.qqMapTransBMap(v.point[1], v.point[0]).lat, v.value, v.name]
+      })
+    },
+
+    qqMapTransBMap(lng, lat) {
+      const x_pi = 3.14159265358979324 * 3000.0 / 180.0
+      var x = lng
+      var y = lat
+      var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi)
+      var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi)
+
+      return {
+        lng: z * Math.cos(theta) + 0.0065,
+        lat: z * Math.sin(theta) + 0.006
       }
+    },
+
+    getData() {
+      return http.post(`/app/appdvcpconfig/apiForward?url=${encodeURIComponent(`https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=${this.$store.state.user.info.areaId.substr(0, 6)}`)}`,)
     }
   }
+}
 </script>
 
 <style lang="scss" scoped>
-  .AiDvMap {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-  }
+.AiDvMap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
 </style>
diff --git a/components/index.js b/components/index.js
index 1567ee06..7cca617a 100644
--- a/components/index.js
+++ b/components/index.js
@@ -18,7 +18,6 @@ const install = function (Vue) {
   let contexts = require.context('.', true, /[\\\/]Ai([^\\\/]+)\.vue$/);
   if (contexts) {
     contexts.keys().map((e) => {
-      console.log(e)
       components.push(contexts(e).default);
       Vue.component(contexts(e).default.name, contexts(e).default);
     });