单店完成

src/assets/main.css

@@ -112,13 +112,13 @@ a, .green {
 }
 
 .dialogTable {
-    position: fixed;
+    position: fixed !important;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
-    width: 600px;
+    width: 600px!important;
     height: 300px;
     z-index: 9999;
     background-color: #07193D;
-    box-shadow: #fff 0 0 20px;
+    box-shadow: #66FFFF 0 0 20px;
 }

src/utils/inject.js

@@ -64,6 +64,9 @@ Vue.prototype.$multipleStoreBoard = Vue.observable({
   search: {"groupCodeList": [], "hourNum": "", type: "1"}
 })
 Vue.prototype.$storeBoard = Vue.observable({
+  currentDate: "20240705",
+  dialog: false,
+  aroundStock: [],
   query: {},
   search: {}
 })

src/views/AppCarouselList.vue

@@ -1,4 +1,5 @@
 <script>
+const currentDate = "20240705"
 export default {
   name: "AppCarouselList",
   label: "分柜监控",
@@ -52,12 +53,20 @@ export default {
           {label: "前四周日军销售额", prop: "avg4WeekSaleAmt", width: 70},
         ],
         重点单品情况: [
-          {label: "重点单品", prop: "name"},
+          {label: "重点单品", prop: "goodsName"},
           {label: "当日目标", prop: "targetNum", width: 70},
           {label: "销售数量", prop: "saleNum", width: 70},
           {label: "库存数量", prop: "stockNum", width: 70},
           {label: "剩余时间预计销售数量", prop: "preSaleNum"},
           {label: "提醒", custom: 1, width: 70, align: 'center', prop: "remind"},
+        ],
+        周边库存情况: [
+          {label: "门店名称", prop: "storeName"},
+          {label: "直线距离", prop: "distance", width: 70},
+          {label: "库存数量", prop: "stockNum", width: 70},
+          {label: "销售数量", prop: "saleNum", width: 70},
+          {label: "剩余时间预计销售数量", prop: "preSaleNum", width: 70},
+          {label: "店长姓名/电话", prop: "shopMangerName", format: v => v.shopMangerName ? `${v.shopMangerName}(${v.shopownerPhone})` : ""},
         ]
       },
     }
@@ -76,10 +85,11 @@ export default {
               {label: "现烤柜", value: "108"},
               {label: "蛋糕柜", value: "109"},
             ].map(({label, value: categoryId}) => {
-              const {storeCameraVOList = []} = this.cameras.find(e => e.storeCode == this.search.storeCode) || {}
+              const {storeCameraVOList = [], longitude, latitude, storeCode, storeName} = this.cameras.find(e => e.storeCode == this.search.storeCode) || {}
-              const keyGoods = this.storeKeyGoods.filter(e => e.categoryId == categoryId) || []
+              this.$storeBoard.store = {longitude, latitude, storeCode, storeName}
+              const keyGoods = this.storeKeyGoods.filter(e => e.goodsCategoryId == categoryId) || []
               const categorySale = this.categorySales.filter(e => e.secondCategoryId == categoryId) || []
-              return {categoryId, label, camera: storeCameraVOList.filter(e => e.cameraType == categoryId).map(e => e.cameraUrl), keyGoods, categorySale}
+              return {longitude, latitude, categoryId, label, camera: storeCameraVOList.filter(e => e.cameraType == categoryId).map(e => e.cameraUrl), keyGoods, categorySale}
             }) || []
           })
     },
@@ -88,13 +98,13 @@ export default {
         type: "1", ...this.search,
       }).then(res => {
         if (res?.data) {
-          this.cameras = res.data?.records?.filter(e => e.storeCameraVOList?.length > 0) || []
+          this.cameras = res.data?.records || []
         }
       })
     },
     getStoreKeyGoods() {
       return $http.post("/data-boot/la/screen/singleStoreBoard/singStoreKeyGoodsSale", {
-        type: "1", ...this.search,
+        type: "1", ...this.search, currentDate
       }).then(res => {
         if (res?.data) {
           this.storeKeyGoods = res.data
@@ -111,23 +121,35 @@ export default {
         }
       })
     },
-    getTableData(item, tag) {
+    getTableData(item = {}, tag) {
       const v = this
       const datasource = {
-        重点单品情况: "keyGoods",
+        重点单品情况: item.keyGoods,
-        品类销售情况: "categorySale",
+        品类销售情况: item.categorySale,
+        周边库存情况: v.$storeBoard.aroundStock,
       }
       return {
-        headerBGC: 'rgba(13, 48, 99, 0.6)',
+        headerBGC: 'rgba(13, 48, 99, 0.6)', rowNum: arguments?.[2] || 2,
         oddRowBGC: window.evenRowBGC(), evenRowBGC: "transparent",
         header: v.columns[tag].map(e => e.label),
         columnWidth: v.columns[tag].map(e => e.width || "0;flex:1;min-width:0;"),
         align: v.columns[tag].map(e => e.align || "left"),
-        data: item[datasource[tag]].map(e => v.columns[tag].map(column => column.custom == 1 ? `<div style="color:${e.preSaleNum > e.stockNum ? 'red' : '#fff'}">周边库存情况</div>` : e[column.prop])),
+        data: datasource[tag]?.map(e => v.columns[tag].map(column => column.custom == 1 ? `<div class="pointer" style="color:${e.preSaleNum > e.stockNum ? 'red' : '#fff'}">周边库存</div>` :
+            column.format ? column.format(e) : e[column.prop])) || [],
       }
     },
-    getNearbyStores(evt) {
+    openNearbyStores({rowIndex}, store) {
-      console.log(evt)
+      const {thirdGoodsCode} = this.storeKeyGoods[rowIndex],
+          {longitude, latitude} = store
+      return $http.post("/data-boot/la/screen/multipleStoreBoard/aroundStock", {
+        type: "1", ...this.search, longitude, latitude, thirdGoodsCode, currentDate
+      }).then(res => {
+        if (res?.data) {
+          this.$storeBoard.aroundStock = res.data
+          this.$nextTick(() => this.$storeBoard.dialog = true)
+          console.log(this.$storeBoard)
+        }
+      })
     }
   },
   watch: {
@@ -138,8 +160,17 @@ export default {
     }
   },
   mounted() {
+    window.addEventListener("click", () => {
+      this.$storeBoard.dialog = false
+    })
     this.height = `${this.$el.clientHeight}px`
+  },
+  beforeDestroy() {
+    window.removeEventListener("click", () => {
+      this.$storeBoard.dialog = false
+    })
   }
+
 }
 </script>
 
@@ -156,9 +187,10 @@ export default {
         <div class="subTitle" v-text="'品类销售情况'"/>
         <dv-scroll-board :config="getTableData(store, '品类销售情况')"/>
         <div class="subTitle" v-text="'重点单品情况'"/>
-        <dv-scroll-board :config="getTableData(store, '重点单品情况')" @click="getNearbyStores"/>
+        <dv-scroll-board :config="getTableData(store, '重点单品情况')" @click="v=>openNearbyStores(v,store)" @click.native.stop/>
       </div>
     </div>
+    <dv-scroll-board v-if="$storeBoard.dialog" class="dialogTable" :config="getTableData({}, '周边库存情况',5)" @click.native.stop/>
   </section>
 </template>
 

src/views/AppStoreKeyGoods.vue

@@ -5,36 +5,50 @@ export default {
   data() {
     return {
       columns: [
-        {label: "重点单品", prop: "name"},
+        {label: "重点单品", prop: "goodsName"},
-        {label: "当日目标", prop: "targetNum", width: "70px"},
+        {label: "当日目标", prop: "targetNum", width: 70},
-        {label: "销售数量", prop: "saleNum", width: "70px"},
+        {label: "销售数量", prop: "saleNum", width: 70},
-        {label: "库存数量", prop: "stockNum", width: "70px"},
+        {label: "库存数量", prop: "stockNum", width: 70},
-        {label: "预计销售数量", prop: "preSaleNum", width: "70px"},
+        {label: "预计销售数量", prop: "preSaleNum", width: 70},
         {label: "提醒", custom: 1, width: 70, align: 'center', prop: "remind"},
       ]
     }
   },
   computed: {
-    refs: v => v.$parent.getItemRefs(),
     tableData: v => v.$storeBoard.storeKeyGoods || [],
     tableConfig: v => {
       return {
-        headerBGC: 'rgba(13, 48, 99, 0.6)',
+        headerBGC: 'rgba(13, 48, 99, 0.6)', rowNum: 9,
         oddRowBGC: window.evenRowBGC(), evenRowBGC: "transparent",
         header: v.columns.map(e => e.label),
         columnWidth: v.columns.map(e => e.width || "0;flex:1;min-width:0;"),
         align: v.columns.map(e => e.align || "left"),
-        data: v.tableData.map(e => v.columns.map(column => e[column.prop])),
+        data: v.tableData.map(e => v.columns.map(column => column.custom == 1 ? `<div class="pointer" style="color:${e.preSaleNum > e.stockNum ? 'red' : '#fff'}">周边库存</div>` :
+            column.format ? column.format(e) : e[column.prop])) || [],
       }
     },
   },
+  methods: {
+    openNearbyStores({rowIndex}) {
+      const {thirdGoodsCode} = this.tableData[rowIndex],
+          {storeCode, longitude, latitude} = this.$storeBoard.store
+      return $http.post("/data-boot/la/screen/multipleStoreBoard/aroundStock", {
+        type: "1", ...this.search, storeCode, longitude, latitude, thirdGoodsCode,
+      }).then(res => {
+        if (res?.data) {
+          this.$storeBoard.aroundStock = res.data
+          this.$nextTick(() => this.$storeBoard.dialog = true)
+        }
+      })
+    }
+  }
 }
 </script>
 
 <template>
   <section class="AppStoreKeyGoods">
     <div class="subTitle" v-text="'重点单品情况'"/>
-    <dv-scroll-board :config="tableConfig" @click=""/>
+    <dv-scroll-board :config="tableConfig" @click="openNearbyStores" @click.native.stop/>
   </section>
 </template>