更换地图

2024-08-25 16:18:49 +08:00
parent df2c352223
commit 3644e68d4a
4 changed files with 158 additions and 2 deletions
--- a/index.html
+++ b/index.html
@@ -4,7 +4,8 @@
    <meta charset="UTF-8"/>
    <link rel="icon" href="/favicon.ico"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-    <title>Vite App</title>
+    <script src="/cdn/echarts.min.js"></script>
+    <title>仟吉大屏</title>
 </head>
 <body>
 <div id="app"></div>
--- a/public/cdn/echarts.min.js
+++ b/public/cdn/echarts.min.js
--- a/src/App.vue
+++ b/src/App.vue
@@ -53,7 +53,6 @@ export default {
  },
  mounted() {
    this.scaleByAspect()
-    window.onresize = () => this.scaleByAspect()
  }
 }
 </script>
--- a/src/views/AppMap.vue
+++ b/src/views/AppMap.vue
@@ -0,0 +1,111 @@
+<script>
+export default {
+  name: "AppMap",
+  label: "地图",
+  data() {
+    return {
+      map: null,
+      layers: [],
+      geoJson: null
+    }
+  },
+  computed: {
+    search: v => v.$marketBoard.search
+  },
+  watch: {
+    search: {
+      deep: true, handler() {
+        this.getData().then(() => this.map.refreshData())
+      }
+    }
+  },
+  methods: {
+    loadLib() {
+      return Promise.all([
+        '/presource/datascreen/js/turf.min.js',
+      ].map(e => $loadScript('js', e)))
+    },
+    getData() {
+      const {$http, $waitFor} = window
+      const {groupCodeList, currentDate, hourNum} = this.search
+      return $waitFor($http).then(() => Promise.all([
+        $http.post("/data-boot/la/screen/marketBoard/storeReport", {
+          groupCodeList, currentDate, hourNum
+        }).then(res => {
+          if (res?.data) {
+            return this.layers = res.data || []
+          }
+        }),
+        axios.get('http://10.0.97.209/blade-visual/map/data?id=1456').then(res => {
+          if (res?.data) {
+            return this.geoJson = res.data
+          }
+        })
+      ]))
+    },
+    initMap() {
+      const {echarts, turf} = window
+      const boundary = turf.union(this.geoJson)
+      boundary.properties.name = "boundary"
+      this.geoJson.features.unshift(boundary)
+      echarts.registerMap('zhengzhou', this.geoJson)
+      this.map = echarts.init(this.$el)
+      const areaColor = {
+        type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [
+          {offset: 0, color: 'rgba(61,127,255,0.35)'},
+          {offset: 1, color: '#09E2F8'},
+        ]
+      }
+      this.map.setOption({
+        geo: {
+          map: 'zhengzhou', roam: true, emphasis: {disabled: true},
+          itemStyle: {areaColor: "transparent", borderColor: '#97CAE6'},
+          silent: true,
+          label: {show: true, color: '#fff'},
+          regions: [
+            {name: "boundary", itemStyle: {areaColor, shadowColor: "#1A80BF", shadowOffsetY: 2}, label: {show: false}}
+          ],
+        },
+        series: [
+          {type: 'scatter', coordinateSystem: 'geo', itemStyle: {color: '#66FFFF'}},
+          {type: 'effectScatter', coordinateSystem: 'geo', itemStyle: {color: '#FFD15C'}}
+        ],
+        tooltip: {
+          trigger: 'item', formatter: params => {
+            const {name, marker, value: [x, y, bakeStockAmt = 0, preSaleNum = 0]} = params
+            return `${marker} ${name}<br/>现烤库存金额：${bakeStockAmt}<br/>现烤销售机会：${preSaleNum}`
+          }
+        },
+      })
+      this.refreshData()
+    },
+    convertData(layers) {
+      const result = {normal: [], abnormal: []}
+      layers.forEach(e => {
+        const item = {name: e.storeName, value: [e.longitude, e.latitude, e.bakeStockAmt, e.preSaleNum]}
+        if (e.bakeStockAmt > 0) {
+          result.normal.push(item)
+        } else {
+          result.abnormal.push(item)
+        }
+      })
+      return Object.values(result).map(data => ({data}))
+    },
+    refreshData() {
+      this.map.setOption({series: this.convertData(this.layers)})
+    }
+  },
+  mounted() {
+    this.loadLib().then(() => Promise.all([
+      this.getData(),
+    ])).then(() => this.initMap())
+  }
+}
+</script>
+
+<template>
+  <div class="AppMap"/>
+</template>
+
+<style>
+</style>