From f497a3a6584946e77657236ff7a43642db9b7ecc Mon Sep 17 00:00:00 2001
From: yanran200730 <yanran200830@163.com>
Date: Mon, 27 Mar 2023 18:02:05 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=A7=E5=B1=8F=E5=9C=B0=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/AiDvMap.vue                | 253 ++++++++++++++++++++++++++
 components/AiDvRender.vue             |   5 +-
 packages/bigscreen/designer/config.js |  28 +++
 vue.config.js                         |   8 +
 4 files changed, 293 insertions(+), 1 deletion(-)
 create mode 100644 components/AiDvMap.vue

diff --git a/components/AiDvMap.vue b/components/AiDvMap.vue
new file mode 100644
index 00000000..63d7a30d
--- /dev/null
+++ b/components/AiDvMap.vue
@@ -0,0 +1,253 @@
+<template>
+  <div class="AiDvMap" v-resize="onDomResize">
+    <div class="chart-map" :class="v" style="width: 800px; height: 600px"></div>
+  </div>
+</template>
+
+<script>
+  import * as echarts from 'echarts'
+  import http from "dui/lib/js/request";
+  export default {
+    name: '',
+
+    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
+          }
+          el.__vueSetInterval__ = setInterval(isReize, 300)
+        },
+
+        unbind(el) {
+          clearInterval(el.__vueSetInterval__)
+        }
+      }
+    },
+    mounted () {
+      this.$nextTick(() => {
+        this.initChart()
+      })
+    },
+
+    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)
+
+            let option = {
+              geo: [
+                {
+                  map: "滨海县",
+                  aspectScale: 1,
+                  zoom: 0.65,
+                  layoutCenter: ["50%", "50%"],
+                  layoutSize: "180%",
+                  show: true,
+                  roam: false,
+                  emphasis: {
+                    show: true,
+                      label: {
+                      textStyle: {
+                        color: "#FFFFFF"
+                      },
+                    },
+                    itemStyle: {
+                      // areaColor: '#fff'
+                    }
+                  },
+                  label: {
+                    normal: {
+                      show: false,
+                      color: '#fff',
+                      fontSize: '20'
+                    }
+                  },
+                  itemStyle: {
+                    normal: {
+                      borderColor: "rgba(2, 198, 220, 1)",
+                      borderWidth: 2,
+                      shadowColor: "rgba(2, 198, 220, 0.1)",
+                      shadowOffsetY: 10,
+                      shadowBlur: 120,
+                      areaColor: "#163c56",
+                    },
+                  }
+                },
+                // 重影
+                {
+                  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)",
+                    },
+                  },
+                },
+                {
+                  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
+                      },
+                      b: {
+                        backgroundColor: {
+                          // image: require('@/assets/images/point.png')
+                        },
+                        color: '#fff',
+                        height: 56,
+                        align: 'center',
+                        width: 50,
+                        fontSize: 16
+                      }
+                    }
+                  },
+                  data: []
+                }
+              ]
+            }
+            this.chart.setOption(option)
+          }
+        })
+      },
+
+      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%;
+  }
+</style>
diff --git a/components/AiDvRender.vue b/components/AiDvRender.vue
index 254b9bfb..612265db 100644
--- a/components/AiDvRender.vue
+++ b/components/AiDvRender.vue
@@ -47,6 +47,7 @@
         :subType="data.subType"
         :data="values">
       </AiRanking>
+      <AiDvMap v-else-if="data.type === 'AiDvMap'" style="width: 100%; height: 100%" :ref="'chart' + index" :key="`AiDvMap${index}`" :theme="theme"></AiDvMap>
       <ai-map v-else-if="data.type=='map'" :mask="data.mask === '1'" :areaId="data.areaId" :is3d="data.is3d==1" :is3dAround="data.is3dAround === '1'"
               :map-style="`amap://styles/${data.mapStyle}`" :pulseLines="data.pulseLines==1" :map.sync="map" :lib.sync="lib" :onlyShowArea="data.limitArea==1"/>
       <ai-monitor :src="data.src" v-else-if="data.type === 'monitor'" :type="data.monitorType"/>
@@ -63,6 +64,7 @@ import {mapState} from 'vuex'
 import AiSwiper from './AiSwiper.vue'
 import chartList from './AiEchart/echartTpls'
 import AiMonitor from "./AiMonitor/AiMonitor";
+import AiDvMap from "./AiDvMap";
 import AiDvPanel from "./layout/AiDvPanel/AiDvPanel";
 import AiDvDisplay from "./layout/AiDvDisplay/AiDvDisplay";
 import AiDvSummary from "./layout/AiDvSummary/AiDvSummary";
@@ -80,7 +82,8 @@ export default {
     AiDvDisplay,
     AiDvPanel,
     AiMonitor,
-    AiSwiper
+    AiSwiper,
+    AiDvMap
   },
   data() {
     return {
diff --git a/packages/bigscreen/designer/config.js b/packages/bigscreen/designer/config.js
index 87298cee..18a51c76 100644
--- a/packages/bigscreen/designer/config.js
+++ b/packages/bigscreen/designer/config.js
@@ -610,6 +610,34 @@ const components = [
             thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/map.png',
             is3dAround: '0',
             limitArea: '0',
+          },
+          {
+            type: 'AiDvMap',
+            label: '地图',
+            display: 'map',
+            width: 840,
+            height: 534,
+            left: 0,
+            top: 0,
+            mask: '2',
+            pulseLines: '1',
+            mapStyle: "e51987628aee5206d4c9ca8c6e98b4f7",
+            areaId: '',
+            zIndex: 1,
+            apiData: [],
+            dataType: 'staticData',
+            dynamicData: [],
+            staticData: [
+              {
+                label: '中卫慧通',
+                lng: 117.1339399,
+                lat: 36.7190487,
+              }
+            ],
+            api: '',
+            thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/map.png',
+            is3dAround: '0',
+            limitArea: '0',
           }
         ]
       },
diff --git a/vue.config.js b/vue.config.js
index 4accafdc..52a5f168 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -126,6 +126,14 @@ module.exports = {
           //地址重写
           '^/qxn': '/'
         }
+      },
+      '/map': {
+        target: 'https://geo.datav.aliyun.com',
+        changeOrigin: true,
+        pathRewrite: {
+          //地址重写
+          '^/map': '/'
+        }
       }
     },
     disableHostCheck: true