单店处理了

src/views/AppCarouselList.vue

@@ -38,11 +38,6 @@ export default {
   data() {
     return {
       height: '600px',
-      search: {
-        type: '1',
-        storeCode: 'K230QTD081',
-        hourNum: "18"
-      },
       list: [],
       cameras: [],
       storeKeyGoods: [],
@@ -50,23 +45,26 @@ export default {
       columns: {
         品类销售情况: [
           {label: "品类", prop: "secondCategoryName"},
-          {label: "销售额", prop: "currentSaleAmt", width: '70px'},
-          {label: "库存金额", prop: "currentStockAmt", width: '80px'},
-          {label: "同/环比销售额", prop: "compareSaleAmt", width: '70px'},
-          {label: "同/环比库存金额", prop: "compareStockAmt", width: '70px'},
-          {label: "前四周日军销售额", prop: "avg4WeekSaleAmt", width: '70px'},
+          {label: "销售额", prop: "currentSaleAmt", width: 70},
+          {label: "库存金额", prop: "currentStockAmt", width: 80},
+          {label: "同/环比销售额", prop: "compareSaleAmt", width: 70},
+          {label: "同/环比库存金额", prop: "compareStockAmt", width: 70},
+          {label: "前四周日军销售额", prop: "avg4WeekSaleAmt", width: 70},
         ],
         重点单品情况: [
           {label: "重点单品", prop: "name"},
-          {label: "当日目标", prop: "targetNum", width: "70px"},
-          {label: "销售数量", prop: "saleNum", width: "70px"},
-          {label: "库存数量", prop: "stockNum", width: "70px"},
+          {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"},
         ]
       },
     }
   },
+  computed: {
+    search: v => v.$storeBoard.search,
+  },
   methods: {
     getData() {
       const {$waitFor, $http} = window
@@ -87,10 +85,11 @@ export default {
     },
     getCameras() {
       return $http.post("/data-boot/la/screen/multipleStoreBoard/storeCamera", {
-        ...this.search,
+        // ...this.search,
       }).then(res => {
         if (res?.data) {
           this.cameras = res.data?.records?.filter(e => e.storeCameraVOList?.length > 0) || []
+          console.log(this.cameras.map(e=>e.storeName))
         }
       })
     },
@@ -100,6 +99,7 @@ export default {
       }).then(res => {
         if (res?.data) {
           this.storeKeyGoods = res.data
+          this.$storeBoard.storeKeyGoods = res.data
         }
       })
     },
@@ -112,10 +112,34 @@ export default {
         }
       })
     },
+    getTableData(item, tag) {
+      const v = this
+      const datasource = {
+        重点单品情况: "keyGoods",
+        品类销售情况: "categorySale",
+      }
+      return {
+        headerBGC: 'rgba(13, 48, 99, 0.6)',
+        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])),
+      }
+    },
+    getNearbyStores(evt) {
+      console.log(evt)
+    }
+  },
+  watch: {
+    search: {
+      immediate: true, deep: true, handler() {
+        this.getData()
+      }
+    }
   },
   mounted() {
     this.height = `${this.$el.clientHeight}px`
-    this.getData()
   }
 }
 </script>
@@ -124,25 +148,16 @@ export default {
   <section class="AppCarouselList">
     <div class="layout">
       <div class="store" v-for="store in list" :key="store.storeCode">
-        <div class="header" v-text="store.label"/>
+        <div class="headerTitle" v-text="store.label"/>
         <el-carousel indicator-position="none" height="250px">
           <el-carousel-item v-for="(url,i) in store.camera" :key="i">
             <hls-player :url="url"/>
           </el-carousel-item>
         </el-carousel>
         <div class="subTitle" v-text="'品类销售情况'"/>
-        <el-table :data="store.categorySale" size="mini" header-cell-class-name="tableHeader" cell-class-name="tableCell" max-height="275px">
-          <el-table-column v-for="column in columns.品类销售情况" v-bind="column" :key="column.prop"/>
-        </el-table>
+        <dv-scroll-board :config="getTableData(store, '品类销售情况')"/>
         <div class="subTitle" v-text="'重点单品情况'"/>
-        <el-table :data="store.keyGoods" size="mini" header-cell-class-name="tableHeader" cell-class-name="tableCell" max-height="275px">
-          <el-table-column v-for="column in columns.重点单品情况" v-bind="column" :key="column.prop">
-            <template v-slot="{row}">
-              <div v-if="column.custom" :style="{color: row.preSaleNum > row.stockNum ? 'red' : '#fff'}" v-text="'周边库存情况'"/>
-              <span v-else v-text="row[column.prop] || ''"/>
-            </template>
-          </el-table-column>
-        </el-table>
+        <dv-scroll-board :config="getTableData(store, '重点单品情况')" @click="getNearbyStores"/>
       </div>
     </div>
   </section>
@@ -154,31 +169,11 @@ export default {
   box-sizing: border-box;
 }
 
-.tableHeader {
-  background: rgba(13, 48, 99, 0.6) !important;
-  color: #fff;
-  border-color: transparent !important;
+.AppCarouselList .dv-scroll-board {
+  height: 200px;
 }
 
-.AppCarouselList .el-table tr {
-  background: transparent;
-}
-
-.AppCarouselList .el-table {
-  background: transparent;
-  border-color: transparent;
-}
-
-.AppCarouselList .el-table:before {
-  background: transparent;
-}
-
-.tableCell {
-  color: #fff;
-  border-color: transparent !important;
-}
-
-.AppCarouselList .header {
+.AppCarouselList .headerTitle {
   height: 48px;
   padding: 8px 0 8px 38px;
   margin-bottom: 24px;