单店处理了

src/utils/inject.js

@@ -64,6 +64,7 @@ Vue.prototype.$multipleStoreBoard = Vue.observable({
   search: {"groupCodeList": [], "hourNum": "", type: "1"}
 })
 Vue.prototype.$storeBoard = Vue.observable({
+  query: {},
   search: {}
 })
 Vue.component("tableColumn", {

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: "currentSaleAmt", width: 70},
-          {label: "库存金额", prop: "currentStockAmt", width: '80px'},
+          {label: "库存金额", prop: "currentStockAmt", width: 80},
-          {label: "同/环比销售额", prop: "compareSaleAmt", width: '70px'},
+          {label: "同/环比销售额", prop: "compareSaleAmt", width: 70},
-          {label: "同/环比库存金额", prop: "compareStockAmt", width: '70px'},
+          {label: "同/环比库存金额", prop: "compareStockAmt", width: 70},
-          {label: "前四周日军销售额", prop: "avg4WeekSaleAmt", width: '70px'},
+          {label: "前四周日军销售额", prop: "avg4WeekSaleAmt", width: 70},
         ],
         重点单品情况: [
           {label: "重点单品", prop: "name"},
-          {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"},
           {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">
+        <dv-scroll-board :config="getTableData(store, '品类销售情况')"/>
-          <el-table-column v-for="column in columns.品类销售情况" v-bind="column" :key="column.prop"/>
-        </el-table>
         <div class="subTitle" v-text="'重点单品情况'"/>
-        <el-table :data="store.keyGoods" size="mini" header-cell-class-name="tableHeader" cell-class-name="tableCell" max-height="275px">
+        <dv-scroll-board :config="getTableData(store, '重点单品情况')" @click="getNearbyStores"/>
-          <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>
       </div>
     </div>
   </section>
@@ -154,31 +169,11 @@ export default {
   box-sizing: border-box;
 }
 
-.tableHeader {
+.AppCarouselList .dv-scroll-board {
-  background: rgba(13, 48, 99, 0.6) !important;
+  height: 200px;
-  color: #fff;
-  border-color: transparent !important;
 }
 
-.AppCarouselList .el-table tr {
+.AppCarouselList .headerTitle {
-  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 {
   height: 48px;
   padding: 8px 0 8px 38px;
   margin-bottom: 24px;

src/views/AppStoreBoard.vue

@@ -0,0 +1,40 @@
+<script>
+import AppMultipleStoreBoardFilter from "@/views/AppMultipleStoreBoardFilter.vue";
+import AppStoresTable from "@/views/AppStoresTable.vue";
+import AppNavbar from "@/views/AppNavbar.vue";
+import AppStoreBoardFilter from "@/views/AppStoreBoardFilter.vue";
+import AppCarouselList from "@/views/AppCarouselList.vue";
+import AppSubTitle from "@/views/AppSubTitle.vue";
+import AppRealtimePanel from "@/views/AppRealtimePanel.vue";
+import AppStoreKeyGoods from "@/views/AppStoreKeyGoods.vue";
+
+export default {
+  name: "AppStoreBoard",
+  components: {AppStoreKeyGoods, AppRealtimePanel, AppSubTitle, AppCarouselList, AppStoreBoardFilter, AppNavbar, AppStoresTable, AppMultipleStoreBoardFilter},
+  label: "单店看板"
+}
+</script>
+
+<template>
+  <section class="AppStoreBoard">
+    <app-navbar/>
+    <app-store-board-filter/>
+    <div class="flex">
+      <app-carousel-list class="fill"/>
+      <div>
+        <app-sub-title/>
+        <app-realtime-panel/>
+        <app-store-key-goods/>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.AppStoreBoard {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+</style>

src/views/AppStoreBoardFilter.vue

@@ -0,0 +1,104 @@
+<script>
+export default {
+  name: "AppStoreBoardFilter",
+  label: "单店看板-筛选条",
+  data() {
+    return {
+      form: {},
+      options: [],
+      dateOptions: Array(24).fill(0).map((v, i) => ({label: `${++i}:00`, value: i}))
+    }
+  },
+  computed: {
+    dicts: v => window.$dicts || {},
+    storeName: v => v.options.find(e => e.storeCode == v.form.storeCode)?.storeName
+  },
+  methods: {
+    getOptions() {
+      return $http.get(`/data-boot/ca/screen/scStoreInfo/listStore`).then(res => {
+        if (res?.data) {
+          return this.options = res.data
+        }
+      })
+    },
+  },
+  created() {
+    this.getOptions().then(() => {
+      setTimeout(() => {
+        const hourNum = new Date().getHours(),
+            storeCode = this.$storeBoard.search.storeCode || this.options?.[0].storeCode
+        this.form = {hourNum, storeCode, type: "1"}
+        this.$set(this.$storeBoard, 'search', {hourNum, storeCode, type: "1", categoryId: ''})
+      }, 500)
+    })
+  },
+}
+</script>
+
+<template>
+  <el-form class="AppStoreBoardFilter flex" size="small" label-width="70px">
+    <el-form-item label="品类">
+      <el-select v-model="form.categoryId" @change="v=>$storeBoard.search.categoryId=v" clearable placeholder="全部">
+        <el-option v-for="item in dicts.品类" :key="item.value" :label="item.label" :value="item.value"/>
+      </el-select>
+    </el-form-item>
+    <el-form-item label="类型">
+      <el-select v-model="form.type" @change="v=>$storeBoard.search.type=v" clearable placeholder="全部">
+        <el-option v-for="item in dicts.类型" :key="item.value" :label="item.label" :value="item.value"/>
+      </el-select>
+    </el-form-item>
+    <div class="fill" v-text="storeName"/>
+    <el-form-item label="门店">
+      <el-select v-model="form.storeCode" @change="v=>$storeBoard.search.storeCode=v" clearable placeholder="全部" class="storeSelect" filterable>
+        <el-option v-for="item in options" :key="item.storeCode" :label="item.storeName" :value="item.storeCode"/>
+      </el-select>
+    </el-form-item>
+    <el-form-item label="时段">
+      <el-select v-model="form.hourNum" size="small" format="HH:mm" value-format="H" @change="v=>$storeBoard.search.hourNum=v" clearable placeholder="全部">
+        <el-option v-for="item in dateOptions" :key="item.value" :label="item.label" :value="item.value"/>
+      </el-select>
+    </el-form-item>
+  </el-form>
+</template>
+
+<style>
+.AppStoreBoardFilter {
+  width: 100%;
+  color: #fff;
+  align-items: center;
+  height: 60px;
+}
+
+.AppStoreBoardFilter .el-form-item {
+  margin-bottom: 0 !important;
+}
+
+.AppStoreBoardFilter .el-input__inner {
+  background: linear-gradient(180deg, rgba(12, 53, 111, 0) 0%, #0C356F 100%);
+  border: 1px solid #1760AE;
+  border-radius: 0;
+  color: #fff;
+  min-width: 100px;
+  width: 120px;
+}
+
+.storeSelect .el-input__inner {
+  width: 210px;
+}
+
+.AppStoreBoardFilter > .fill {
+  text-align: center;
+  font-weight: bold;
+  font-size: 24px;
+}
+
+.AppStoreBoardFilter .el-input {
+  width: 100%;
+}
+
+.AppStoreBoardFilter .el-form-item__label {
+  white-space: nowrap;
+  color: #fff;
+  font-size: 14px;
+}
+</style>

src/views/AppStoreKeyGoods.vue

@@ -0,0 +1,56 @@
+<script>
+export default {
+  name: "AppStoreKeyGoods",
+  label: "表格",
+  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: "提醒", 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)',
+        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])),
+      }
+    },
+  },
+}
+</script>
+
+<template>
+  <section class="AppStoreKeyGoods">
+    <div class="subTitle" v-text="'重点单品情况'"/>
+    <dv-scroll-board :config="tableConfig" @click=""/>
+  </section>
+</template>
+
+<style>
+.AppStoreKeyGoods {
+  color: #fff;
+  box-sizing: border-box;
+}
+
+.AppStoreKeyGoods .subTitle {
+  line-height: 20px;
+  width: fit-content;
+  margin: 24px auto 12px;
+  background-image: url("http://10.0.97.209/img/kengee/kengee5.png");
+  background-repeat: no-repeat;
+  background-size: 100% 2px;
+  background-position: center bottom;
+}
+</style>

src/views/AppStoresTable.vue

@@ -142,6 +142,7 @@ export default {
       const sid = "9f299712-5549-413b-a93b-7c3e3b5bfadb"
       $glob.group = sid
       this.$storeBoard.query.storeCode = sid
+      this.$router.push("/apps/AppStoreBoard")
     },
     getTableData(item, tag) {
       const v = this