多店完成

src/assets/main.css

@@ -110,3 +110,15 @@ a, .green {
     line-height: 17px;
     flex-shrink: 0;
 }
+
+.dialogTable {
+    position: fixed;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 600px;
+    height: 300px;
+    z-index: 9999;
+    background-color: #07193D;
+    box-shadow: #fff 0 0 20px;
+}

src/views/AppStoresTable.vue

@@ -1,4 +1,5 @@
 <script>
+const currentDate = "20240705"
 export default {
   name: "AppStoresTable",
   label: "多店监控",
@@ -42,6 +43,8 @@ export default {
       cameras: [],
       storeKeyGoods: [],
       categorySales: [],
+      aroundStock: [],
+      dialog: false,
       columns: {
         品类销售情况: [
           {label: "品类", prop: "secondCategoryName"},
@@ -58,8 +61,17 @@ export default {
           {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.shopownerPhone})`},
         ]
       },
+
     }
   },
   computed: {
@@ -95,10 +107,10 @@ export default {
           .then(codes => Promise.all([this.getCameras(), this.getStoreKeyGoods(), this.getCategorySales()]).then(() => codes))
           .then((codes = []) => {
             this.stores = codes?.map(storeCode => {
-              const {storeCameraVOList = [], storeName} = this.cameras.find(e => e.storeCode == storeCode) || {}
+              const {storeCameraVOList = [], storeName, longitude, latitude} = this.cameras.find(e => e.storeCode == storeCode) || {}
               const keyGoods = this.storeKeyGoods.filter(e => e.storeCode == storeCode) || []
               const categorySale = this.categorySales.filter(e => e.storeCode == storeCode) || []
-              return {storeCode, storeName, camera: storeCameraVOList.map(e => e.cameraUrl), keyGoods, categorySale}
+              return {storeCode, storeName, longitude, latitude, camera: storeCameraVOList.map(e => e.cameraUrl), keyGoods, categorySale}
             }).filter(e => !!e.storeName) || []
           })
     },
@@ -121,7 +133,7 @@ export default {
     },
     getStoreKeyGoods() {
       return $http.post("/data-boot/la/screen/multipleStoreBoard/storeKeyGoods", {
-        type: "1", ...this.search,
+        type: "1", ...this.search, currentDate
       }).then(res => {
         if (res?.data) {
           this.storeKeyGoods = res.data
@@ -144,23 +156,34 @@ export default {
       this.$storeBoard.query.storeCode = sid
       this.$router.push("/apps/AppStoreBoard")
     },
-    getTableData(item, tag) {
+    getTableData(item = {}, tag) {
       const v = this
       const datasource = {
-        重点单品情况: "keyGoods",
-        品类销售情况: "categorySale",
+        重点单品情况: item.keyGoods,
+        品类销售情况: item.categorySale,
+        周边库存情况: v.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) {
-      console.log(evt)
+    openNearbyStores({rowIndex}, store) {
+      const {thirdGoodsCode} = this.storeKeyGoods[rowIndex],
+          {storeCode, longitude, latitude} = store
+      return $http.post("/data-boot/la/screen/multipleStoreBoard/aroundStock", {
+        type: "1", ...this.search, storeCode, longitude, latitude, thirdGoodsCode, currentDate
+      }).then(res => {
+        if (res?.data) {
+          this.aroundStock = res.data
+          this.$nextTick(() => this.dialog = true)
+        }
+      })
     }
   },
   mounted() {
@@ -170,7 +193,7 @@ export default {
 </script>
 
 <template>
-  <section class="AppStoresTable">
+  <section class="AppStoresTable" @click="dialog=false">
     <el-carousel indicator-position="none" :height="height" :autoplay="search.changeWay==1">
       <el-carousel-item v-for="(group,i) in storeList" :key="i">
         <div class="layout">
@@ -184,11 +207,12 @@ 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>
       </el-carousel-item>
     </el-carousel>
+    <dv-scroll-board v-if="dialog" class="dialogTable" :config="getTableData({}, '周边库存情况',5)" @click.native.stop/>
   </section>
 </template>
 
@@ -197,34 +221,11 @@ export default {
   width: 100%;
   color: #fff;
   box-sizing: border-box;
+  position: relative;
 }
 
 .AppStoresTable .dv-scroll-board {
-  height: 200px;
-}
-
-.tableHeader {
-  background: rgba(13, 48, 99, 0.6) !important;
-  color: #fff;
-  border-color: transparent !important;
-}
-
-.AppStoresTable .el-table tr {
-  background: transparent;
-}
-
-.AppStoresTable .el-table {
-  background: transparent;
-  border-color: transparent;
-}
-
-.AppStoresTable .el-table:before {
-  background: transparent;
-}
-
-.tableCell {
-  color: #fff;
-  border-color: transparent !important;
+  height: 130px;
 }
 
 .AppStoresTable .headerTitle {