大提交一版

src/views/AppHourSale.vue

@@ -4,32 +4,67 @@ export default {
   label: "市场看板-全门店时段销售",
   data() {
     return {
+      summary: {},
       tableData: []
     }
   },
   computed: {
     search: v => v.$marketBoard.search,
-    columns: v => {
+    columns: () => {
+      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: "销售增长率", width: 80, align: 'center', prop: "saleGrowthRate"},
+      ]
+    },
+    tableConfig: v => {
+      return {
+        headerBGC: 'rgba(13, 48, 99, 0.6)',
+        oddRowBGC: window.evenRowBGC(), evenRowBGC: "transparent",
+        header: v.columns.map(e => e.label), rowNum: 16,
+        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])),
+      }
+    },
+    summaryRow: v => v.columns.map((column, i) => {
+      const isNumber = v => /^-?\d+(\.\d+)?%?$/.test(v)
+      const style = {textAlign: column.align}
+      if (column.width > 0) {
+        style.width = `${column.width}px`
+      } else {
+        style.flex = 1
+        style.minWidth = 0
+      }
+      return {
+        style,
+        value: isNumber(v.summary[column.prop]) ? v.summary[column.prop] :
+            i == 0 ? v.summary.hour : ""
+      }
+    }),
+    specialRow: 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, children: [{label: '时段', prop: "hour"}]},
-        {
-          label: compareDate, width: 137, align: 'center', children: [
-            {label: "销售额", prop: "compareSaleAmt", align: 'center'},
-            {label: "有效订单数", prop: "compareValidOrderNum", align: 'center'},
-          ]
-        },
-        {
-          label: currentDate, width: 137, align: 'center', children: [
-            {label: "销售额", prop: "currentSaleAmt", align: 'center'},
-            {label: "有效订单数", prop: "currentValidOrderNum", align: 'center'},
-          ]
-        },
-        {label: "销售增长率", width: 70, align: 'center', prop: "saleGrowthRate"},
-      ]
+        {value: "日期", width: 100},
+        {value: compareDate, align: 'center'},
+        {value: currentDate, align: 'center'},
+        {width: 80},
+      ].map(column => {
+        const style = {textAlign: column.align}
+        if (column.width > 0) {
+          style.width = `${column.width}px`
+        } else {
+          style.flex = 1
+          style.minWidth = 0
+        }
+        return {style, value: column.value}
+      })
     }
   },
   methods: {
@@ -39,7 +74,8 @@ export default {
         ...this.search, limit: 999
       })).then(res => {
         if (res?.data) {
-          this.tableData = res.data?.page?.records?.map(e => ({...e, hour: `${`${e.hour-1}`.padStart(2, '0')}:00-${e.hour.padStart(2, '0')}:00`})) || []
+          this.summary = res.data.total
+          this.tableData = res.data?.page?.records?.map(e => ({...e, hour: `${`${e.hour - 1}`.padStart(2, '0')}:00-${e.hour.padStart(2, '0')}:00`})) || []
         }
       })
     }
@@ -56,9 +92,13 @@ export default {
 
 <template>
   <section class="AppHourSale">
-    <el-table :data="tableData" size="mini" header-cell-class-name="tableHeader" cell-class-name="tableCell" max-height="440px" show-summary stripe>
-      <table-column v-for="(column,i) in columns" :key="i" :column="column"/>
-    </el-table>
+    <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"/>
+    <div class="summary flex">
+      <div class="item" v-for="(col,i) in summaryRow" :key="i" v-text="col.value" :style="col.style"/>
+    </div>
   </section>
 </template>
 
@@ -67,65 +107,7 @@ export default {
   color: #fff;
   box-sizing: border-box;
 }
-
-.AppHourSale .tableHeader {
-  background: rgba(13, 48, 99, 0.6) !important;
-  color: #fff;
-  border-color: transparent !important;
-}
-
-.AppHourSale .el-table tr {
-  background-color: transparent !important;
-}
-
-.AppHourSale .el-table {
-  background: transparent;
-  border-color: transparent;
-}
-
-.AppHourSale .el-table .el-table__footer-wrapper tr {
-  background: linear-gradient(90deg, rgba(1, 196, 236, 0.5) 0%, rgba(1, 196, 236, 0.01) 100%);
-}
-
-.AppHourSale .el-table .el-table__footer-wrapper .is-leaf {
-  color: #66FFFF;
-  background: transparent;
-  border-color: transparent;
-}
-
-.AppHourSale .el-table:before {
-  background: transparent;
-}
-
-.AppHourSale .tableCell {
-  color: #fff;
-  border-color: transparent !important;
-}
-
-.AppHourSale .el-table tr.el-table__row--striped {
-  --odd-bg: #09265B;
-  background-color: #081F48;
-  background-image: linear-gradient(
-      -45deg, var(--odd-bg) 0, var(--odd-bg) 10%, transparent 10%, transparent 50%,
-      var(--odd-bg) 50%, var(--odd-bg) 60%, transparent 60%, transparent);
-  background-size: 10px 10px;
-}
-
-.AppHourSale .el-table tr.el-table__row--striped .tableCell {
-  background-color: transparent !important;
-}
-
-.AppHourSale .el-table tr:hover > .tableCell {
-  background-color: rgba(255, 255, 255, .1) !important;
-}
-
-.AppHourSale .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;
+.AppHourSale .dv-scroll-board {
+  height: calc(100% - 60px);
 }
 </style>