From 5fc5146d01d7b87fa52857546a544ebe97bffa26 Mon Sep 17 00:00:00 2001
From: Kubbo <390378816@qq.com>
Date: Mon, 5 Aug 2024 03:28:19 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4table=E6=BB=9A=E5=8A=A8?=
 =?UTF-8?q?=E5=85=BC=E9=A1=BE=E4=BD=BF=E7=94=A8=E6=BB=9A=E5=8A=A8=E6=9D=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/main.css                |  2 +-
 src/views/AppCarouselList.vue      | 25 ++++++++--------
 src/views/AppGroupMonitorTable.vue | 23 ++++++++-------
 src/views/AppHourCount.vue         |  6 ++--
 src/views/AppHourSale.vue          | 46 +++++++++++++++++++-----------
 src/views/AppKeyGoods.vue          |  3 +-
 src/views/AppStoreBoard.vue        |  2 +-
 src/views/AppStoreKeyGoods.vue     |  8 +++---
 src/views/AppStoreMonitor.vue      |  6 ++--
 src/views/AppStoresTable.vue       | 15 ++++++----
 10 files changed, 81 insertions(+), 55 deletions(-)

diff --git a/src/assets/main.css b/src/assets/main.css
index 114fff5..6bc07f6 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -104,7 +104,7 @@ a, .green {
 .summary .item, .tableHead .item {
   font-size: 12px;
   font-weight: bold;
-  padding: 0 10px;
+  padding: 0 6px;
   align-items: center;
   box-sizing: border-box;
   line-height: 17px;
diff --git a/src/views/AppCarouselList.vue b/src/views/AppCarouselList.vue
index 08bd095..3f69194 100644
--- a/src/views/AppCarouselList.vue
+++ b/src/views/AppCarouselList.vue
@@ -1,5 +1,4 @@
 <script>
-const currentDate = "20240705"
 export default {
   name: "AppCarouselList",
   label: "分柜监控",
@@ -71,7 +70,7 @@ export default {
     },
     getStoreKeyGoods() {
       return $http.post("/data-boot/la/screen/singleStoreBoard/singStoreKeyGoodsSale", {
-        type: "1", ...this.search, currentDate
+        type: "1", ...this.search,
       }).then(res => {
         if (res?.data) {
           this.storeKeyGoods = res.data
@@ -105,16 +104,14 @@ export default {
             column.format ? column.format(e) : e[column.prop])) || [],
       }
     },
-    openNearbyStores({rowIndex}, store) {
-      const {thirdGoodsCode} = this.storeKeyGoods[rowIndex],
-          {longitude, latitude} = store
+    openNearbyStores({thirdGoodsCode}, store) {
+      const {longitude, latitude} = store
       return $http.post("/data-boot/la/screen/multipleStoreBoard/aroundStock", {
-        type: "1", ...this.search, longitude, latitude, thirdGoodsCode, currentDate
+        type: "1", ...this.search, longitude, latitude, thirdGoodsCode,
       }).then(res => {
         if (res?.data) {
           this.$storeBoard.aroundStock = res.data
           this.$nextTick(() => this.$storeBoard.dialog = true)
-          console.log(this.$storeBoard)
         }
       })
     }
@@ -152,12 +149,16 @@ export default {
           </el-carousel-item>
         </el-carousel>
         <div class="subTitle" v-text="'品类销售情况'"/>
-        <dv-scroll-board :config="getTableData(store, '品类销售情况')"/>
+        <scroll-table :table-data="store.categorySale" :columns="columns['品类销售情况']"/>
+        <!--<dv-scroll-board :config="getTableData(store, '品类销售情况')"/>-->
         <div class="subTitle" v-text="'重点单品情况'"/>
-        <dv-scroll-board :config="getTableData(store, '重点单品情况')" @click="v=>openNearbyStores(v,store)" @click.native.stop/>
+        <scroll-table :table-data="store.keyGoods" :columns="columns['重点单品情况']" @click="v=>openNearbyStores(v,store)" @click.native.stop/>
+        <!--<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/>
+    <div class="dialogTable" v-if="$storeBoard.dialog"  @click.stop>
+      <scroll-table :table-data="$storeBoard.aroundStock" :columns="columns['周边库存情况']"/>
+    </div>
   </section>
 </template>
 
@@ -167,8 +168,8 @@ export default {
   box-sizing: border-box;
 }
 
-.AppCarouselList .dv-scroll-board {
-  height: 200px;
+.AppCarouselList .dv-scroll-board, .AppCarouselList .scrollTable {
+  height: 200px !important;
 }
 
 .AppCarouselList .headerTitle {
diff --git a/src/views/AppGroupMonitorTable.vue b/src/views/AppGroupMonitorTable.vue
index 42fc1fb..3196b02 100644
--- a/src/views/AppGroupMonitorTable.vue
+++ b/src/views/AppGroupMonitorTable.vue
@@ -8,15 +8,15 @@ export default {
       columns: [
         {label: "课区", prop: "groupName", width: 50, align: 'center'},
         {label: "课长", prop: "supervisorName", width: 60, align: 'center'},
-        {label: "销售额", prop: "saleAmt", width: 60, align: 'right'},
-        {label: "外卖销售额", prop: "deliverySaleAmt", width: 60, align: 'right'},
-        {label: "有效订单数", prop: "validOrderNum", width: 60, align: 'right'},
-        {label: "客单价", prop: "customerUnitPrice", width: 58, align: 'right'},
-        {label: "蛋糕销售额", prop: "cakeSaleAmt", width: 60, align: 'right'},
-        {label: "西点销售额", prop: "westSaleAmt", width: 60, align: 'right'},
-        {label: "现烤销售额", prop: "bakeSaleAmt", width: 60, align: 'right'},
-        {label: "现烤损货比", prop: "lossAmtRate", width: 60, align: 'right'},
-        {label: "环比(目标完成比)", prop: "targetRate", align: 'right'},
+        {label: "销售额", prop: "saleAmt", width: 60, align: 'right', headerAlign: 'left'},
+        {label: "外卖销售额", prop: "deliverySaleAmt", width: 60, align: 'right', headerAlign: 'left'},
+        {label: "有效订单数", prop: "validOrderNum", width: 60, align: 'right', headerAlign: 'left'},
+        {label: "客单价", prop: "customerUnitPrice", width: 58, align: 'right', headerAlign: 'left'},
+        {label: "蛋糕销售额", prop: "cakeSaleAmt", width: 60, align: 'right', headerAlign: 'left'},
+        {label: "西点销售额", prop: "westSaleAmt", width: 60, align: 'right', headerAlign: 'left'},
+        {label: "现烤销售额", prop: "bakeSaleAmt", width: 60, align: 'right', headerAlign: 'left'},
+        {label: "现烤损货比", prop: "lossAmtRate", width: 60, align: 'right', headerAlign: 'left'},
+        {label: "环比(目标完成比)", prop: "targetRate", align: 'right', headerAlign: 'left'},
       ],
       summary: {}
     }
@@ -74,7 +74,8 @@ export default {
 
 <template>
   <section class="AppGroupMonitorTable">
-    <dv-scroll-board :config="tableConfig" @click=""/>
+    <!--<dv-scroll-board :config="tableConfig"/>-->
+    <scroll-table :table-data="tableData" :columns="columns"/>
     <div class="summary flex">
       <div class="item" v-for="(col,i) in summaryRow" :key="i" v-text="col.value" :style="col.style"/>
     </div>
@@ -87,7 +88,7 @@ export default {
   box-sizing: border-box;
 }
 
-.AppGroupMonitorTable .dv-scroll-board {
+.AppGroupMonitorTable .dv-scroll-board, .AppGroupMonitorTable .scrollTable {
   height: calc(100% - 30px) !important;
 }
 </style>
diff --git a/src/views/AppHourCount.vue b/src/views/AppHourCount.vue
index 0e28f28..190d966 100644
--- a/src/views/AppHourCount.vue
+++ b/src/views/AppHourCount.vue
@@ -97,7 +97,8 @@ export default {
     <div class="summary flex">
       <div class="item" v-for="(col,i) in summaryRow" :key="i" v-text="col.value" :style="col.style"/>
     </div>
-    <dv-scroll-board :config="tableConfig"/>
+    <scroll-table :tableData="tableData" :columns="columns"/>
+    <!--<dv-scroll-board :config="tableConfig"/>-->
   </section>
 </template>
 
@@ -105,9 +106,10 @@ export default {
 .AppHourCount {
   color: #fff;
   box-sizing: border-box;
+  min-width: 480px;
 }
 
-.AppHourCount .dv-scroll-board {
+.AppHourCount .dv-scroll-board,.AppHourCount .scrollTable{
   height: calc(100% - 60px);
 }
 </style>
diff --git a/src/views/AppHourSale.vue b/src/views/AppHourSale.vue
index 0f1298b..fbc81e7 100644
--- a/src/views/AppHourSale.vue
+++ b/src/views/AppHourSale.vue
@@ -12,16 +12,29 @@ export default {
   },
   computed: {
     search: v => v.$marketBoard.search,
-    columns: () => {
+    columns: v => {
+      let {currentDate, compareDate} = v.search
+      const {dayjs} = window
+      currentDate = currentDate ? dayjs(currentDate).format("YYYY-MM-DD") : ""
+      compareDate = compareDate ? dayjs(compareDate).format("YYYY-MM-DD") : ""
       return [
-        {label: "时段", width: 100, prop: "hour"},
-        {label: "销售额", prop: "compareSaleAmt", align: 'center'},
-        {label: "有效订单数", prop: "compareValidOrderNum", align: 'center'},
-        {label: "销售额", prop: "currentSaleAmt", align: 'center'},
-        {label: "有效订单数", prop: "currentValidOrderNum", align: 'center'},
+        {label: "日期", children: [{label: "时段", width: 100, prop: "hour"}]},
+        {
+          label: compareDate, align: 'center', children: [
+            {label: "销售额", prop: "compareSaleAmt", align: 'center'},
+            {label: "有效订单数", prop: "compareValidOrderNum", align: 'center'},
+          ]
+        },
+        {
+          label: currentDate, align: 'center', children: [
+            {label: "销售额", prop: "currentSaleAmt", align: 'center'},
+            {label: "有效订单数", prop: "currentValidOrderNum", align: 'center'},
+          ]
+        },
         {label: "销售增长率", width: 80, align: 'center', prop: "saleGrowthRate"},
       ]
     },
+    tableColumns: v => v.columns.map(e => e.children || e).flat(),
     tableConfig: v => {
       return {
         headerBGC: 'rgba(13, 48, 99, 0.6)',
@@ -32,7 +45,7 @@ export default {
         data: v.tableData.map(e => v.columns.map(column => e[column.prop])),
       }
     },
-    summaryRow: v => v.columns.map((column, i) => {
+    summaryRow: v => v.tableColumns.map((column, i) => {
       const isNumber = v => /^-?\d+(\.\d+)?%?$/.test(v)
       const style = {textAlign: column.align}
       if (column.width > 0) {
@@ -77,15 +90,17 @@ export default {
       })).then(res => {
         if (res?.data) {
           this.summary = res.data.total
-          this.tableData = res.data?.page?.records?.map(e => ({...e, hour: `${e.hour.padStart(2, '0')}:00-${`${Number(e.hour)+1}`.padStart(2, '0')}:00`})) || []
+          this.tableData = res.data?.page?.records?.map(e => ({...e, hour: `${e.hour.padStart(2, '0')}:00-${`${Number(e.hour) + 1}`.padStart(2, '0')}:00`})) || []
         }
       })
     },
-    handleSta({rowIndex}) {
+    handleSta({hour}) {
+      const rowIndex = this.tableData.findIndex(e => e.hour == hour)
       const v = this
       const summary = {
         compareSaleAmt: 0, compareValidOrderNum: 0, currentSaleAmt: 0, currentValidOrderNum: 0, saleGrowthRate: 0
       }
+      console.log(rowIndex)
       v.tableData.forEach((e, i) => {
         if (i <= rowIndex) {
           summary.compareSaleAmt += Number(e.compareSaleAmt || 0)
@@ -102,7 +117,7 @@ export default {
           summary.saleGrowthRate = summary.saleGrowthRate.toFixed(2) + "%"
         }
       })
-      this.hourSummary = v.columns.map((column, i) => {
+      this.hourSummary = v.tableColumns.map((column, i) => {
         const isNumber = v => /^-?\d+(\.\d+)?%?$/.test(v)
         const style = {textAlign: column.align}
         if (column.width > 0) {
@@ -137,10 +152,8 @@ export default {
 
 <template>
   <section class="AppHourSale" @mousemove="handleMouseOver">
-    <div class="tableHead flex">
-      <div class="item" v-for="(col,i) in specialRow" :key="i" v-text="col.value" :style="col.style"/>
-    </div>
-    <dv-scroll-board :config="tableConfig" @mouseover="handleSta" @mouseout.native="hourSummaryStyle={display:'none'}"/>
+    <scroll-table :table-data="tableData" :columns="columns" @click="handleSta" @mouseout.native="hourSummaryStyle={display:'none'}"/>
+    <!--<dv-scroll-board :config="tableConfig" @mouseover="handleSta" @mouseout.native="hourSummaryStyle={display:'none'}"/>-->
     <div class="summary flex hourSummary" :style="hourSummaryStyle">
       <div class="item" v-for="(col,i) in hourSummary" :key="i" v-text="col.value" :style="col.style"/>
     </div>
@@ -157,8 +170,9 @@ export default {
   position: relative;
 }
 
-.AppHourSale .dv-scroll-board {
-  height: calc(100% - 60px);
+.AppHourSale .dv-scroll-board, .AppHourSale .scrollTable {
+  height: calc(100% - 60px) !important;
+  border-color: transparent;
 }
 
 .hourSummary {
diff --git a/src/views/AppKeyGoods.vue b/src/views/AppKeyGoods.vue
index f27384b..4b44cee 100644
--- a/src/views/AppKeyGoods.vue
+++ b/src/views/AppKeyGoods.vue
@@ -52,7 +52,8 @@ export default {
 
 <template>
   <section class="AppKeyGoods">
-    <dv-scroll-board :config="tableConfig"/>
+    <scroll-table :table-data="tableData" :columns="columns"/>
+    <!--<dv-scroll-board :config="tableConfig"/>-->
   </section>
 </template>
 
diff --git a/src/views/AppStoreBoard.vue b/src/views/AppStoreBoard.vue
index 4e94005..64ad6e0 100644
--- a/src/views/AppStoreBoard.vue
+++ b/src/views/AppStoreBoard.vue
@@ -21,7 +21,7 @@ export default {
     <app-store-board-filter/>
     <div class="flex">
       <app-carousel-list class="fill"/>
-      <div>
+      <div style="width: 480px;">
         <app-sub-title/>
         <app-realtime-panel/>
         <app-store-key-goods/>
diff --git a/src/views/AppStoreKeyGoods.vue b/src/views/AppStoreKeyGoods.vue
index e84070a..176d91c 100644
--- a/src/views/AppStoreKeyGoods.vue
+++ b/src/views/AppStoreKeyGoods.vue
@@ -36,9 +36,8 @@ export default {
     }
   },
   methods: {
-    openNearbyStores({rowIndex}) {
-      const {thirdGoodsCode} = this.tableData[rowIndex],
-          {storeCode, longitude, latitude} = this.$storeBoard.store
+    openNearbyStores({thirdGoodsCode}) {
+      const {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 => {
@@ -55,7 +54,8 @@ export default {
 <template>
   <section class="AppStoreKeyGoods">
     <div class="subTitle" v-text="'重点单品情况'"/>
-    <dv-scroll-board :config="tableConfig" @click="openNearbyStores" @click.native.stop/>
+    <scroll-table :table-data="tableData" :columns="columns" @click="openNearbyStores" @click.native.stop/>
+    <!--<dv-scroll-board :config="tableConfig" @click="openNearbyStores" @click.native.stop/>-->
   </section>
 </template>
 
diff --git a/src/views/AppStoreMonitor.vue b/src/views/AppStoreMonitor.vue
index 9bcf135..f52b3c1 100644
--- a/src/views/AppStoreMonitor.vue
+++ b/src/views/AppStoreMonitor.vue
@@ -81,7 +81,8 @@ export default {
         <el-option v-for="(name,i) in options" :key="i" :label="name" :value="name"/>
       </el-select>
     </div>
-    <dv-scroll-board :config="tableConfig"/>
+    <scroll-table :table-data="tableData" :columns="columns"/>
+    <!--<dv-scroll-board :config="tableConfig"/>-->
     <div class="summary flex">
       <div class="item" v-for="(col,i) in summaryRow" :key="i" v-text="col.value" :style="col.style"/>
     </div>
@@ -93,9 +94,10 @@ export default {
   flex-shrink: 0 !important;
   color: #fff;
   box-sizing: border-box;
+  width: 660px;
 }
 
-.AppStoreMonitor .dv-scroll-board {
+.AppStoreMonitor .dv-scroll-board,.AppStoreMonitor .scrollTable{
   height: calc(100% - 30px - 55px) !important;
 }
 
diff --git a/src/views/AppStoresTable.vue b/src/views/AppStoresTable.vue
index 68c6e7a..e6d9864 100644
--- a/src/views/AppStoresTable.vue
+++ b/src/views/AppStoresTable.vue
@@ -169,14 +169,19 @@ export default {
               </el-carousel-item>
             </el-carousel>
             <div class="subTitle" v-text="'品类销售情况'"/>
-            <dv-scroll-board :config="getTableData(store, '品类销售情况')"/>
+            <scroll-table :table-data="store.categorySale" :columns="columns['品类销售情况']"/>
+            <!--<dv-scroll-board :config="getTableData(store, '品类销售情况')"/>-->
             <div class="subTitle" v-text="'重点单品情况'"/>
-            <dv-scroll-board :config="getTableData(store, '重点单品情况')" @click="v=>openNearbyStores(v,store)" @click.native.stop/>
+            <scroll-table :table-data="store.keyGoods" :columns="columns['重点单品情况']" @click="v=>openNearbyStores(v,store)" @click.native.stop/>
+            <!--<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/>
+    <div class="dialogTable" v-if="dialog" @click.stop>
+      <scroll-table :table-data="aroundStock" :columns="columns['周边库存情况']"/>
+    </div>
+    <!--<dv-scroll-board v-if="dialog" class="dialogTable" :config="getTableData({}, '周边库存情况',5)" @click.native.stop/>-->
   </section>
 </template>
 
@@ -188,8 +193,8 @@ export default {
   position: relative;
 }
 
-.AppStoresTable .dv-scroll-board {
-  height: 130px;
+.AppStoresTable .dv-scroll-board, .AppStoresTable .scrollTable {
+  height: 130px !important;
 }
 
 .AppStoresTable .headerTitle {