Merge remote-tracking branch 'origin/main'

# Conflicts:
#	src/views/AppMultipleStoreBoardFilter.vue

src/assets/main.css

@@ -249,3 +249,20 @@ a, .green {
 .AppSubTitle .el-select {
     width: 120px;
 }
+
+@keyframes flashOpacity {
+    0%, 100% {
+        opacity: 1; /* 完全不透明 */
+    }
+    50% {
+        opacity: 0; /* 完全透明 */
+    }
+}
+
+/* 应用动画到元素 */
+.flash-opacity {
+    .cell > span {
+        animation: flashOpacity 1s infinite; /* 动画名称、持续时间、重复次数 */
+        color: red
+    }
+}

src/utils/inject.js

@@ -65,19 +65,20 @@ window.evenRowBGC = (color = "#09265B") => `transparent;background-image: linear
 
 Vue.prototype.$marketBoard = Vue.observable({
   screenId: '5b1849ac-4fc3-451a-844c-3362b47341ef',
-  goodsCategoryId: "",
-  search: {"groupCodeList": [], "currentDate": "20240701", "compareDate": "20240630", "hourNum": "18"}
+  thirdGoods: {},
+  saleHour: undefined,
+  search: {"groupCodeList": [], "currentDate": "20240701", "compareDate": "20240630", "hourNum": "18", t: null}
 })
 Vue.prototype.$multipleStoreBoard = Vue.observable({
   carouselIndex: 0,
-  search: {"groupCodeList": [], "hourNum": "", type: "1"}
+  search: {"groupCodeList": [], "hourNum": "", type: "1", t: null}
 })
 Vue.prototype.$storeBoard = Vue.observable({
   currentDate: "20240705",
   dialog: false,
   aroundStock: [],
   query: {},
-  search: {}
+  search: {t: null}
 })
 Vue.component("HlsPlayer", {
   render: (h) => h('div', {style: {width: '100%', height: '100%'}}),
@@ -134,6 +135,10 @@ Vue.component("scrollTable", {
     return h('el-table', {
         props: {
           headerCellClassName: 'tableHeader', cellClassName: 'tableCell', stripe: !0, height: '100%',
+          rowClassName({row}) {
+            const item = columns.find(e => e.flash == 1)
+            return item?.prop && row[item.prop] <= 0 ? 'flash-opacity' : ''
+          },
           ...config, data: tableData,
         }, class: 'scrollTable',
         on: {

src/views/AppCarouselList.vue

@@ -23,7 +23,7 @@ export default {
           {label: "昨日销售数量", prop: "yesterdaySaleNum", width: 70},
           {label: "上周同天销售数量", prop: "lastWeekSaleNum", width: 70},
           {label: "今日销售数量", prop: "saleNum", width: 70},
-          {label: "现在库存数量", prop: "stockNum", width: 70},
+          {label: "现在库存数量", prop: "stockNum", width: 70, flash: 1},
           {label: "剩余时间预计销售数量", prop: "preSaleNum"},
           // {label: "提醒", custom: 1, width: 70, align: 'center', prop: "remind"},
         ],

src/views/AppHourCount.vue

@@ -11,6 +11,7 @@ export default {
   },
   computed: {
     search: v => v.$marketBoard.search,
+    saleHour: v => v.$marketBoard.saleHour,
     columns: v => {
       return [
         {label: '品类', prop: "categoryName", width: 100},
@@ -70,8 +71,9 @@ export default {
   methods: {
     getTableData() {
       const {$http, $waitFor} = window
+      const {saleHour: hourNum} = this
       $waitFor($http).then(() => $http.post("/data-boot/la/screen/marketBoard/hourCount", {
-        ...this.search, limit: 999
+        ...this.search, limit: 999, hourNum
       })).then(res => {
         if (res?.data) {
           this.tableData = res.data?.page?.records?.sort((a, b) => sort.indexOf(a.categoryId) - sort.indexOf(b.categoryId)) || []
@@ -85,6 +87,9 @@ export default {
       immediate: true, deep: true, handler() {
         this.getTableData()
       }
+    },
+    saleHour() {
+      this.getTableData()
     }
   }
 }

src/views/AppHourSale.vue

@@ -97,6 +97,8 @@ export default {
     },
     handleSta({hour}) {
       this.handleMouseout()
+      const hourNum = Number(hour?.substring(0, 2) || -2) + 1
+      this.$set(this.$marketBoard, 'saleHour', hourNum < this.search.hourNum ? hourNum : undefined)
       const rowIndex = this.tableData.findIndex(e => e.hour == hour)
       const v = this
       const summary = {

src/views/AppKeyGoods.vue

@@ -8,7 +8,7 @@ export default {
       columns: [
         {label: "重点单品", prop: "goodsName"},
         {label: "销售数量", prop: "saleNum", width: 70},
-        {label: "库存数量", prop: "stockNum", width: 70},
+        {label: "库存数量", prop: "stockNum", width: 70, flash: 1},
         {label: "销售目标", prop: "targetSaleNum", width: 70},
         {label: "销售达成", prop: "saleAchieveRate"},
       ],
@@ -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,32 +6,45 @@ 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())
+        this.getData().then(() => this.refreshData("watch search"))
       }
-    }
+    },
+    thirdGoods: {
+      deep: true, handler() {
+        this.getData().then(() => this.refreshData("watch thirdGoods"))
+      }
+    },
   },
   methods: {
     loadLib() {
+      const {$loadScript} = window
       return Promise.all([
         '/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 || []
@@ -52,67 +65,71 @@ export default {
       })
     },
     initMap() {
-      const {echarts, turf} = window
+      const {echarts, turf, $waitFor} = 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'},
-        ]
-      }
-      const label = {
-        show: true,
-        backgroundColor: {type: 'linear', x: 0, y: 0, x2: 1, y2: 0, colorStops: [{offset: 0, color: 'rgba(9,63,107,0.79)'}, {offset: 1, color: 'rgba(13,58,99,0.03)'}]},
-        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}}`
-        },
-        rich: {
-          a: {color: '#fff', fontSize: 12, lineHeight: 14}
+      $waitFor(this.$el).then(() => {
+        this.map = echarts.init(this.$el)
+        if (!this.map) return setTimeout(() => this.initMap(), 500)
+        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'}, label},
-          {type: 'effectScatter', coordinateSystem: 'geo', itemStyle: {color: '#FFD15C'}, label}
-        ],
-        tooltip: {
-          trigger: 'item', formatter: params => {
-            const {name, marker, value: [x, y, bakeStockAmt = 0, preSaleNum = 0]} = params
-            return `${marker} ${name}<br/>现烤库存金额：${bakeStockAmt}<br/>现烤销售机会：${preSaleNum}`
+        const label = {
+          show: true,
+          backgroundColor: {type: 'linear', x: 0, y: 0, x2: 1, y2: 0, colorStops: [{offset: 0, color: 'rgba(9,63,107,0.79)'}, {offset: 1, color: 'rgba(13,58,99,0.03)'}]},
+          borderRadius: 2,
+          padding: 8,
+          position: 'right',
+          formatter: (params) => {
+            const {name, value} = params
+            return `{a|${name}\n${this.getContent(value).join("\n")}}`
           },
-        },
-      })
-      this.map.on('click', evt => {
-        const storeCode = evt.data.storeCode
-        if (storeCode) {
-          this.$storeBoard.search.storeCode = storeCode
-          this.$marketBoard.screenId = 'a90522ef-869b-40ea-8542-d1fc9674a1e8'
+          rich: {
+            a: {color: '#fff', fontSize: 12, lineHeight: 14}
+          }
         }
+        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'}, label},
+            {type: 'effectScatter', coordinateSystem: 'geo', itemStyle: {color: '#FFD15C'}, label}
+          ],
+          tooltip: {
+            trigger: 'item', formatter: params => {
+              const {name, marker, value} = params
+              return `${marker} ${name}<br/>${this.getContent(value).join("<br/>")}`
+            },
+          },
+        })
+        this.map.on('click', evt => {
+          const storeCode = evt.data.storeCode
+          if (storeCode) {
+            this.$storeBoard.search.storeCode = storeCode
+            this.$marketBoard.screenId = 'a90522ef-869b-40ea-8542-d1fc9674a1e8'
+          }
+        })
+        this.refreshData("initMap")
       })
-      this.refreshData()
     },
     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)
@@ -120,14 +137,16 @@ export default {
       })
       return Object.values(result).map(data => ({data}))
     },
-    refreshData() {
-      this.map.setOption({series: this.convertData(this.layers)})
-    }
+    refreshData(from) {
+      console.log("refreshData调用位置:", from)
+      const {thirdGoods: {goodsName}} = this
+      const title = {left: 20, top: 20, text: goodsName ? `{sub|选择产品：}${goodsName}` : '', textStyle: {color: "#fff", rich: {sub: {color: "#fff", fontSize: 16}}}}
+      if (!this.map) return this.initMap()
+      this.map?.setOption({title, series: this.convertData(this.layers)})
+    },
   },
   mounted() {
-    this.loadLib().then(() => Promise.all([
-      this.getData(),
-    ])).then(() => this.initMap())
+    this.loadLib().then(() => this.getData()).then(() => this.initMap())
   }
 }
 </script>

src/views/AppMultipleStoreBoardFilter.vue

@@ -24,6 +24,13 @@ export default {
         }
       })
     },
+    reset() {
+      $http.post("/data-boot/la/screen/multipleStoreBoard/move").then(res => {
+        if (res?.data) {
+          this.$message.success("已重置")
+        }
+      })
+    }
   },
   watch: {
     'form.interval'(v) {
@@ -41,7 +48,8 @@ export default {
       setTimeout(() => {
         const {dayjs} = window
         const hourNum = new Date().getHours()+1, groupCodeList = "", interval = 60000
-        const currentDate = dayjs().subtract(7, 'day').format("YYYYMMDD")
+        // const currentDate = dayjs().subtract(7, 'day').format("YYYYMMDD")
+        const currentDate = dayjs().format("YYYYMMDD")
         this.form = {hourNum, groupCodeList, type: "1", changeWay: "1", currentDate, interval}
         this.$set(this.$multipleStoreBoard, 'search', {hourNum, groupCodeList: [], type: "1", changeWay: "1", categoryId: "", currentDate, interval})
       }, 500)
@@ -52,6 +60,9 @@ export default {
 
 <template>
   <el-form class="AppMultipleStoreBoardFilter flex" size="small" label-width="70px">
+    <el-form-item label-width="0">
+      <el-button @click="reset">一键归位</el-button>
+    </el-form-item>
     <el-form-item label="品类">
       <el-select v-model="form.categoryId" @change="v=>$multipleStoreBoard.search.categoryId=v" clearable placeholder="全部">
         <el-option v-for="item in dicts.品类" :key="item.value" :label="item.label" :value="item.value"/>

src/views/AppNavbar.vue

@@ -1,14 +1,14 @@
 <script>
 const screens = [
-  {id: '5b1849ac-4fc3-451a-844c-3362b47341ef', label: '市场看板', bg: 'http://10.0.97.209/img/kengee/kengee16.png'},
-  {id: '7d26854c-769d-418b-9bae-5c1105e716a9', label: '多店监控', bg: 'http://10.0.97.209/img/kengee/kengee17.png'},
-  {id: 'a90522ef-869b-40ea-8542-d1fc9674a1e8', label: '单店监控', bg: 'http://10.0.97.209/img/kengee/kengee18.png'},
+  {id: '5b1849ac-4fc3-451a-844c-3362b47341ef', label: '市场看板', bg: 'http://10.0.97.209/img/kengee/kengee16.png', ob: '$marketBoard'},
+  {id: '7d26854c-769d-418b-9bae-5c1105e716a9', label: '多店监控', bg: 'http://10.0.97.209/img/kengee/kengee17.png', ob: '$multipleStoreBoard'},
+  {id: 'a90522ef-869b-40ea-8542-d1fc9674a1e8', label: '单店监控', bg: 'http://10.0.97.209/img/kengee/kengee18.png', ob: '$storeBoard'},
 ]
 export default {
   name: "AppNavbar",
   label: "标题栏",
   data() {
-    return {screens}
+    return {screens, timer: null}
   },
   computed: {
     groupId: v => v.$marketBoard.screenId,
@@ -26,6 +26,16 @@ export default {
         }
       }
     },
+  },
+  created() {
+    this.timer = setInterval(() => {
+      const screen = this.screens.find(e => e.id === this.groupId)
+      this.$set(this[screen.ob].search, 't', Date.now())
+      console.log(screen.ob, this[screen.ob].search.t)
+    }, 5000)
+  },
+  destroyed() {
+    this.timer && clearInterval(this.timer)
   }
 }
 </script>

src/views/AppStoreKeyGoods.vue

@@ -9,7 +9,7 @@ export default {
         {label: "重点单品", prop: "goodsName"},
         {label: "当日目标", prop: "targetNum", width: 70},
         {label: "销售数量", prop: "saleNum", width: 70},
-        {label: "库存数量", prop: "stockNum", width: 70},
+        {label: "库存数量", prop: "stockNum", width: 70, flash: 1},
         {label: "预计销售数量", prop: "preSaleNum", width: 70},
         {label: "提醒", custom: 1, width: 70, align: 'center', prop: "remind"},
       ]

src/views/AppStoresTable.vue

@@ -1,4 +1,14 @@
 <script>
+function throttle(func, limit = 500) {
+  let timer;
+  return function () {
+    if (timer) {
+      clearTimeout(timer)
+    }
+    timer = setTimeout(func, limit);
+  }
+}
+
 export default {
   name: "AppStoresTable",
   label: "多店监控",
@@ -26,7 +36,7 @@ export default {
           {label: "昨日销售数量", prop: "yesterdaySaleNum", width: 70},
           {label: "上周同天销售数量", prop: "lastWeekSaleNum", width: 70},
           {label: "今日销售数量", prop: "saleNum", width: 70},
-          {label: "现在库存数量", prop: "stockNum", width: 70},
+          {label: "现在库存数量", prop: "stockNum", width: 70, flash: 1},
           {label: "剩余时间预计销售数量", prop: "preSaleNum"},
           // {label: "提醒", custom: 1, width: 70, align: 'center', prop: "remind"},
         ],
@@ -44,7 +54,12 @@ export default {
     }
   },
   computed: {
-    search: v => v.$multipleStoreBoard.search,
+    search: v => {
+      const search = JSON.parse(JSON.stringify(v.$multipleStoreBoard.search))
+      delete search.t
+      return search
+    },
+    refreshTimer: v => v.search.t,
     storeList: v => {
       const list = []
       let group = []
@@ -72,6 +87,15 @@ export default {
           }
         })
       }
+    },
+    refreshTimer() {
+      console.log("刷新")
+      this.refreshData().then(() => {
+        const v = this.search
+        if (v.interval > 0 && v.changeWay == '1') {
+          this.$refs.carousel?.$forceUpdate()
+        }
+      })
     }
   },
   methods: {
@@ -108,21 +132,27 @@ export default {
       })
     },
     getStoreKeyGoods() {
-      return $http.post("/data-boot/la/screen/multipleStoreBoard/storeKeyGoods", {
-        type: "1", ...this.search,
-      }).then(res => {
-        if (res?.data) {
-          this.storeKeyGoods = res.data
-        }
+      return new Promise(resolve => {
+        throttle(() => $http.post("/data-boot/la/screen/multipleStoreBoard/storeKeyGoods", {
+          type: "1", ...this.search,
+        }).then(res => {
+          if (res?.data) {
+            this.storeKeyGoods = res.data
+            resolve()
+          }
+        }))()
       })
     },
     getCategorySales() {
-      return $http.post("/data-boot/la/screen/multipleStoreBoard/categorySale", {
-        type: "1", ...this.search,
-      }).then(res => {
-        if (res?.data) {
-          this.categorySales = res.data
-        }
+      return new Promise(resolve => {
+        throttle(() => $http.post("/data-boot/la/screen/multipleStoreBoard/categorySale", {
+          type: "1", ...this.search,
+        }).then(res => {
+          if (res?.data) {
+            this.categorySales = res.data
+            resolve()
+          }
+        }))()
       })
     },
     gotoDetail(store, i) {
@@ -164,6 +194,14 @@ export default {
       } else if (e.code == "ArrowRight") {
         this.$refs.carousel.next()
       }
+    },
+    async refreshData() {
+      return Promise.all([this.getStoreKeyGoods(), this.getCategorySales()]).then(() => {
+        this.stores.map(store => {
+          store.keyGoods = this.storeKeyGoods.filter(e => e.storeCode == store.storeCode) || []
+          store.categorySale = this.categorySales.filter(e => e.storeCode == store.storeCode) || []
+        })
+      })
     }
   },
   mounted() {