调整table滚动兼顾使用滚动条

2024-08-05 03:28:19 +08:00
parent 1d8d0a05e5
commit 5fc5146d01
10 changed files with 81 additions and 55 deletions
--- 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;
--- 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 {
--- 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>
--- 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>
--- 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 {
--- 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>

--- 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/>
--- 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>

--- 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;
 }

--- 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 {