需求变更-5

src/assets/main.css

@@ -92,7 +92,8 @@ a, .green {
     height: 30px;
     align-items: center;
     color: #66FFFF;
-    background-image: linear-gradient(90deg, rgba(1, 196, 236, 0.5) 0%, rgba(1, 196, 236, 0.01) 100%);
+    background-image: linear-gradient(90deg, rgba(1, 196, 236, 0.5) 0%, rgba(1, 196, 236, 0.01) 100%) !important;
+    background-size: 100% 100% !important;
 }
 
 .tableHead {
@@ -111,6 +112,10 @@ a, .green {
     flex-shrink: 0;
 }
 
+.summary .tableCell {
+    color: #66FFFF !important;
+}
+
 .summary .item {
     white-space: wrap;
     word-break: break-all;

src/views/AppHourSale.vue

@@ -117,27 +117,42 @@ export default {
           summary.saleGrowthRate = summary.saleGrowthRate.toFixed(2) + "%"
         }
       })
-      this.hourSummary = v.tableColumns.map((column, i) => {
+      const summaryRow = {}
-        const isNumber = v => /^-?\d+(\.\d+)?%?$/.test(v)
+      v.tableColumns.forEach(({prop}, i) => {
-        const style = {textAlign: column.align}
+        summaryRow[prop] = i == 0 ? "时段合计" : (summary[prop] || '')
-        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"
+      v.tableData.splice(rowIndex, 0, summaryRow)
+      // this.hourSummary = v.tableColumns.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")
+    },
+    handleRowStyle({row}) {
+      if (row.hour == '时段合计') return 'summary'
+      return ''
+    },
+    handleMouseout() {
+      // this.hourSummaryStyle = {display: 'none'}
+      console.log('handleMouseout')
+      const i = this.tableData.findIndex(e => e.hour == '时段合计')
+      this.tableData.splice(i, 1)
+      // this.$refs.table.doLayout()
     }
   },
   watch: {
@@ -152,7 +167,7 @@ export default {
 
 <template>
   <section class="AppHourSale" @mousemove="handleMouseOver">
-    <scroll-table :table-data="tableData" :columns="columns" @click="handleSta" @mouseout.native="hourSummaryStyle={display:'none'}"/>
+    <scroll-table :table-data="tableData" :columns="columns" @click="handleSta" @mouseout.native="handleMouseout" :config="{rowClassName:handleRowStyle}"/>
     <!--<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"/>