提交一版

src/views/AppHourSale.vue

@@ -5,7 +5,9 @@ export default {
   data() {
     return {
       summary: {},
-      tableData: []
+      tableData: [],
+      hourSummary: [],
+      hourSummaryStyle: {display: 'none'}
     }
   },
   computed: {
@@ -65,7 +67,7 @@ export default {
         }
         return {style, value: column.value}
       })
-    }
+    },
   },
   methods: {
     getTableData() {
@@ -78,6 +80,49 @@ export default {
           this.tableData = res.data?.page?.records?.map(e => ({...e, hour: `${`${e.hour - 1}`.padStart(2, '0')}:00-${e.hour.padStart(2, '0')}:00`})) || []
         }
       })
+    },
+    handleSta({rowIndex}) {
+      const v = this
+      const summary = {
+        compareSaleAmt: 0, compareValidOrderNum: 0, currentSaleAmt: 0, currentValidOrderNum: 0, saleGrowthRate: 0
+      }
+      v.tableData.forEach((e, i) => {
+        if (i <= rowIndex) {
+          summary.compareSaleAmt += Number(e.compareSaleAmt || 0)
+          summary.compareValidOrderNum += Number(e.compareValidOrderNum || 0)
+          summary.currentSaleAmt += Number(e.currentSaleAmt || 0)
+          summary.currentValidOrderNum += Number(e.currentValidOrderNum || 0)
+          summary.saleGrowthRate += Number(e.saleGrowthRate.replace("%", "") || 0)
+        }
+        if (i == rowIndex) {
+          summary.compareSaleAmt = summary.compareSaleAmt.toFixed(2)
+          summary.compareValidOrderNum = summary.compareValidOrderNum.toFixed(2)
+          summary.currentSaleAmt = summary.currentSaleAmt.toFixed(2)
+          summary.currentValidOrderNum = summary.currentValidOrderNum.toFixed(2)
+          summary.saleGrowthRate = summary.saleGrowthRate.toFixed(2) + "%"
+        }
+      })
+      this.hourSummary = 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(summary[column.prop]) ? summary[column.prop] :
+              i == 0 ? "时段合计" : ""
+        }
+      })
+      this.hourSummaryStyle.display = "flex"
+    },
+    handleMouseOver(evt) {
+      const getTop = e => e.offsetParent ? getTop(e.offsetParent) + e.offsetTop : e.offsetTop
+      const top = getTop(this.$el)
+      // this.$set(this.hourSummaryStyle, "top", (evt.clientY - top + 10) + "px")
     }
   },
   watch: {
@@ -91,11 +136,14 @@ export default {
 </script>
 
 <template>
-  <section class="AppHourSale">
+  <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"/>
+    <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>
     <div class="summary flex">
       <div class="item" v-for="(col,i) in summaryRow" :key="i" v-text="col.value" :style="col.style"/>
     </div>
@@ -106,8 +154,17 @@ export default {
 .AppHourSale {
   color: #fff;
   box-sizing: border-box;
+  position: relative;
 }
+
 .AppHourSale .dv-scroll-board {
   height: calc(100% - 60px);
 }
+
+.hourSummary {
+  width: 100%;
+  background-color: #07193D;
+  position: absolute;
+  left: 0;
+}
 </style>