需求完成

src/utils/inject.js

@@ -65,7 +65,7 @@ window.evenRowBGC = (color = "#09265B") => `transparent;background-image: linear
 
 Vue.prototype.$marketBoard = Vue.observable({
   screenId: '5b1849ac-4fc3-451a-844c-3362b47341ef',
-  goodsCategoryId: "",
+  thirdGoods: {},
   search: {"groupCodeList": [], "currentDate": "20240701", "compareDate": "20240630", "hourNum": "18"}
 })
 Vue.prototype.$multipleStoreBoard = Vue.observable({

src/views/AppKeyGoods.vue

@@ -41,6 +41,9 @@ export default {
           this.tableData = res.data?.records || []
         }
       })
+    },
+    relevanceMapData(selectGoods) {
+      this.$set(this.$marketBoard, 'thirdGoods', selectGoods)
     }
   },
   watch: {
@@ -49,6 +52,17 @@ export default {
         this.getTableData()
       }
     }
+  },
+  mounted() {
+    document.addEventListener('click', evt => {
+      const mapElement = document.querySelector('.AppMap')
+      if (!this.$el.contains(evt.target) && !mapElement.contains(evt.target)) {
+        this.relevanceMapData()
+      }
+    })
+  },
+  beforeDestroy() {
+    document.removeEventListener('click', this.relevanceMapData)
   }
 }
 </script>
@@ -62,7 +76,7 @@ export default {
         </el-select>
       </template>
     </app-sub-title>
-    <scroll-table :table-data="tableData" :columns="columns"/>
+    <scroll-table :table-data="tableData" :columns="columns" @click="relevanceMapData" @click.native.stop/>
     <!--<dv-scroll-board :config="tableConfig"/>-->
   </section>
 </template>
@@ -72,6 +86,7 @@ export default {
   color: #fff;
   box-sizing: border-box;
 }
+
 .AppKeyGoods .dv-scroll-board, .AppKeyGoods .scrollTable {
   height: calc(100% - 60px) !important;
 }

src/views/AppMap.vue

@@ -6,18 +6,24 @@ export default {
     return {
       map: null,
       layers: [],
-      geoJson: null
+      geoJson: null,
     }
   },
   computed: {
-    search: v => v.$marketBoard.search
+    search: v => v.$marketBoard.search,
+    thirdGoods: v => v.$marketBoard.thirdGoods || {}
   },
   watch: {
     search: {
       deep: true, handler() {
         this.getData().then(() => this.refreshData())
       }
-    }
+    },
+    thirdGoods: {
+      deep: true, handler() {
+        this.getData().then(() => this.refreshData())
+      }
+    },
   },
   methods: {
     loadLib() {
@@ -25,13 +31,19 @@ export default {
         '/presource/datascreen/js/turf.min.js',
       ].map(e => $loadScript('js', e)))
     },
+    getContent([x, y, bakeStockAmt = 0, preSaleNum = 0, stockNum = 0] = []) {
+      if (this.thirdGoods.thirdGoodsCode) {
+        return [`库存数量：${stockNum}`]
+      }
+      return [`现烤库存金额：${bakeStockAmt}`, `现烤销售机会：${preSaleNum}`]
+    },
     getData() {
       const {$http, $waitFor} = window
-      const {groupCodeList, currentDate, hourNum} = this.search
+      const {search: {groupCodeList, currentDate, hourNum}, thirdGoods: {thirdGoodsCode}} = this
       const maps = []
       return $waitFor($http).then(() => Promise.all([
         $http.post("/data-boot/la/screen/marketBoard/storeReport", {
-          groupCodeList, currentDate, hourNum
+          groupCodeList, currentDate, hourNum, thirdGoodsCode
         }).then(res => {
           if (res?.data) {
             return this.layers = res.data || []
@@ -70,9 +82,9 @@ export default {
         borderRadius: 2,
         padding: 8,
         position: 'right',
-        formatter: params => {
-          const {name, value: [x, y, bakeStockAmt = 0, preSaleNum = 0]} = params
-          return `{a|${name}\n现烤库存金额：${bakeStockAmt}\n现烤销售机会：${preSaleNum}}`
+        formatter: (params) => {
+          const {name, value} = params
+          return `{a|${name}\n${this.getContent(value).join("\n")}}`
         },
         rich: {
           a: {color: '#fff', fontSize: 12, lineHeight: 14}
@@ -94,8 +106,8 @@ export default {
         ],
         tooltip: {
           trigger: 'item', formatter: params => {
-            const {name, marker, value: [x, y, bakeStockAmt = 0, preSaleNum = 0]} = params
-            return `${marker} ${name}<br/>现烤库存金额：${bakeStockAmt}<br/>现烤销售机会：${preSaleNum}`
+            const {name, marker, value} = params
+            return `${marker} ${name}<br/>${this.getContent(value).join("<br/>")}`
           },
         },
       })
@@ -111,8 +123,9 @@ export default {
     convertData(layers) {
       const result = {normal: [], abnormal: []}
       layers.forEach(e => {
-        const item = {name: e.storeName, storeCode: e.storeCode, value: [e.longitude, e.latitude, e.bakeStockAmt, e.preSaleNum]}
-        if (e.bakeStockAmt > 0) {
+        const item = {name: e.storeName, storeCode: e.storeCode, value: [e.longitude, e.latitude, e.bakeStockAmt, e.preSaleNum, e.stockNum]}
+        // 有库存或者有现烤库存金额 就算正常
+        if (e.bakeStockAmt > 0 || e.stockNum > 0) {
           result.normal.push(item)
         } else {
           result.abnormal.push(item)
@@ -121,8 +134,10 @@ export default {
       return Object.values(result).map(data => ({data}))
     },
     refreshData() {
-      this.map.setOption({series: this.convertData(this.layers)})
-    }
+      const {thirdGoods: {goodsName}} = this
+      const title = {left: 20, top: 20, text: goodsName ? `{sub|选择产品：}${goodsName}` : '', textStyle: {color: "#fff", rich: {sub: {color: "#fff", fontSize: 16}}}}
+      this.map.setOption({title, series: this.convertData(this.layers)})
+    },
   },
   mounted() {
     this.loadLib().then(() => Promise.all([