单店完成

2024-07-08 18:53:50 +08:00
parent 7acc025d8d
commit 31586c2b00
4 changed files with 75 additions and 26 deletions
--- a/src/assets/main.css
+++ b/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;
 }
--- a/src/utils/inject.js
+++ b/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: {}
 })
--- a/src/views/AppCarouselList.vue
+++ b/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 keyGoods = this.storeKeyGoods.filter(e => e.categoryId == categoryId) || []
+              const {storeCameraVOList = [], longitude, latitude, storeCode, storeName} = this.cameras.find(e => e.storeCode == this.search.storeCode) || {}
+              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",
-        品类销售情况: "categorySale",
+        重点单品情况: item.keyGoods,
+        品类销售情况: 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) {
-      console.log(evt)
+    openNearbyStores({rowIndex}, store) {
+      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>

--- a/src/views/AppStoreKeyGoods.vue
+++ b/src/views/AppStoreKeyGoods.vue
@@ -5,36 +5,50 @@ export default {
  data() {
    return {
      columns: [
-        {label: "重点单品", prop: "name"},
-        {label: "当日目标", prop: "targetNum", width: "70px"},
-        {label: "销售数量", prop: "saleNum", width: "70px"},
-        {label: "库存数量", prop: "stockNum", width: "70px"},
-        {label: "预计销售数量", prop: "preSaleNum", width: "70px"},
+        {label: "重点单品", prop: "goodsName"},
+        {label: "当日目标", prop: "targetNum", width: 70},
+        {label: "销售数量", prop: "saleNum", width: 70},
+        {label: "库存数量", prop: "stockNum", width: 70},
+        {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>