需求变更-5 优化体验

src/views/AppHourSale.vue

@@ -1,4 +1,5 @@
 <script>
+let timer
 export default {
   name: "AppHourSale",
   label: "市场看板-全门店时段销售",
@@ -100,6 +101,7 @@ export default {
       const summary = {
         compareSaleAmt: 0, compareValidOrderNum: 0, currentSaleAmt: 0, currentValidOrderNum: 0, saleGrowthRate: 0
       }
+
       console.log(rowIndex)
       v.tableData.forEach((e, i) => {
         if (i <= rowIndex) {
@@ -121,7 +123,8 @@ export default {
       v.tableColumns.forEach(({prop}, i) => {
         summaryRow[prop] = i == 0 ? "时段合计" : (summary[prop] || '')
       })
-      v.tableData.splice(rowIndex, 0, summaryRow)
+      this.handleMouseout()
+      v.tableData.splice(rowIndex + 1, 0, summaryRow)
       // this.hourSummary = v.tableColumns.map((column, i) => {
       //   const isNumber = v => /^-?\d+(\.\d+)?%?$/.test(v)
       //   const style = {textAlign: column.align}
@@ -139,20 +142,15 @@ export default {
       // })
       // this.hourSummaryStyle.display = "flex"
     },
-    handleMouseOver(evt) {
-      const getTop = e => e.offsetParent ? getTop(e.offsetParent) + e.offsetTop : e.offsetTop
-      const top = getTop(this.$el)
-    },
     handleRowStyle({row}) {
       if (row.hour == '时段合计') return 'summary'
       return ''
     },
     handleMouseout() {
       // this.hourSummaryStyle = {display: 'none'}
-      console.log('handleMouseout')
       const i = this.tableData.findIndex(e => e.hour == '时段合计')
+      if (i == -1) return;
       this.tableData.splice(i, 1)
-      // this.$refs.table.doLayout()
     }
   },
   watch: {
@@ -161,17 +159,24 @@ export default {
         this.getTableData()
       }
     }
+  },
+  mounted() {
+    document.addEventListener('click', evt => {
+      if (!this.$el.contains(evt.target)) {
+        this.handleMouseout()
+      }
+    })
   }
 }
 </script>
 
 <template>
-  <section class="AppHourSale" @mousemove="handleMouseOver">
-    <scroll-table :table-data="tableData" :columns="columns" @click="handleSta" @mouseout.native="handleMouseout" :config="{rowClassName:handleRowStyle}"/>
+  <section class="AppHourSale">
+    <scroll-table :table-data="tableData" :columns="columns" @click="handleSta" @click.native.stop :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"/>
-    </div>
+    <!--    <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>