大提交一版

package.json

@@ -7,6 +7,7 @@
     "preview": "vite preview --port 4173"
   },
   "dependencies": {
+    "@jiaminghi/data-view": "^2.10.0",
     "axios": "^1.7.2",
     "element-ui": "^2.15.14",
     "vue": "^2.7.7",

src/App.vue

@@ -2,7 +2,7 @@
   <div id="app">
     <div class="flex">
       <apps-nav/>
-      <router-view class="fill components"/>
+      <router-view class="components"/>
     </div>
   </div>
 </template>
@@ -15,6 +15,10 @@ html, body, #app {
   overflow: hidden;
 }
 
+#app > .flex {
+  height: 100%;
+}
+
 .components {
   background: #07193D;
 }

src/assets/main.css

@@ -58,3 +58,55 @@ a, .green {
   margin-right: 8px;
 }
 
+.dv-scroll-board {
+  overflow: hidden;
+}
+
+.dv-scroll-board .header {
+  align-items: center;
+  padding: 6px 0;
+}
+
+.dv-scroll-board .header-item, .tableHead .item {
+  height: initial !important;
+  line-height: 17px !important;
+  font-weight: bold;
+}
+
+.dv-scroll-board .ceil {
+  padding: 6px 10px !important;
+}
+
+.dv-scroll-board .row-item {
+  overflow: hidden;
+}
+
+.dv-scroll-board .ceil, .dv-scroll-board .header-item {
+  text-wrap: unset !important;
+  word-break: break-all;
+  font-size: 12px;
+  line-height: 17px
+}
+
+.summary {
+  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%);
+}
+
+.tableHead {
+  height: 30px;
+  align-items: center;
+  background-color: rgba(13, 48, 99, 0.6);
+}
+
+.summary .item, .tableHead .item {
+  font-size: 12px;
+  font-weight: bold;
+  padding: 0 10px;
+  align-items: center;
+  box-sizing: border-box;
+  line-height: 17px;
+  flex-shrink: 0;
+}

src/main.js

@@ -5,10 +5,10 @@ import './assets/main.css'
 import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
 import inject from './utils/inject'
-
+import dataV from '@jiaminghi/data-view'
 
 Vue.use(ElementUI);
-
+Vue.use(dataV)
 
 inject.then(() => {
   new Vue({

src/utils/inject.js

@@ -55,6 +55,7 @@ window.$waitFor = (target, t = 500) => new Promise(resolve => {
     resolve(target)
   }
 })
+window.evenRowBGC = (color = "#09265B") => `transparent;background-image: linear-gradient(-45deg, ${color} 0, ${color} 10%, transparent 10%, transparent 50%,${color} 50%, ${color} 60%, transparent 60%, transparent);background-size: 10px 10px;`
 
 Vue.prototype.$marketBoard = Vue.observable({
   search: {"groupCodeList": ["20011061"], "currentDate": "20240701", "compareDate": "20240630", "hourNum": "18"}

src/views/AppGroupMonitorTable.vue

@@ -6,22 +6,48 @@ export default {
     return {
       tableData: [],
       columns: [
-        {label: "课区", prop: "groupName",width:50,align:'center'},
+        {label: "课区", prop: "groupName", width: 50, align: 'center'},
-        {label: "课长", prop: "supervisorName",width:50,align:'center'},
+        {label: "课长", prop: "supervisorName", width: 60, align: 'center'},
-        {label: "销售额", prop: "saleAmt",width:60},
+        {label: "销售额", prop: "saleAmt", width: 60, align: 'right'},
-        {label: "外卖销售额", prop: "deliverySaleAmt",width:60},
+        {label: "外卖销售额", prop: "deliverySaleAmt", width: 60, align: 'right'},
-        {label: "有效订单数", prop: "validOrderNum",width:60},
+        {label: "有效订单数", prop: "validOrderNum", width: 60, align: 'right'},
-        {label: "客单价", prop: "customerUnitPrice",width:58},
+        {label: "客单价", prop: "customerUnitPrice", width: 58, align: 'right'},
-        {label: "蛋糕销售额", prop: "cakeSaleAmt",width:60},
+        {label: "蛋糕销售额", prop: "cakeSaleAmt", width: 60, align: 'right'},
-        {label: "西点销售额", prop: "westSaleAmt",width:60},
+        {label: "西点销售额", prop: "westSaleAmt", width: 60, align: 'right'},
-        {label: "现烤销售额", prop: "bakeSaleAmt",width:60},
+        {label: "现烤销售额", prop: "bakeSaleAmt", width: 60, align: 'right'},
-        {label: "现烤损货比", prop: "lossAmtRate",width:60},
+        {label: "现烤损货比", prop: "lossAmtRate", width: 60, align: 'right'},
-        {label: "环比(目标完成比)",prop: "targetRate"},
+        {label: "环比(目标完成比)", prop: "targetRate", align: 'right'},
-      ]
+      ],
+      summary: {}
     }
   },
   computed: {
-    search: v => v.$marketBoard.search
+    search: v => v.$marketBoard.search,
+    tableConfig: v => {
+      return {
+        headerBGC: 'rgba(13, 48, 99, 0.6)',
+        oddRowBGC: window.evenRowBGC(), evenRowBGC: "transparent",
+        header: v.columns.map(e => e.label),
+        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.groupName : ""
+      }
+    })
   },
   methods: {
     getTableData() {
@@ -30,14 +56,15 @@ export default {
         ...this.search, limit: 999
       })).then(res => {
         if (res?.data) {
+          this.summary = res.data.total
           this.tableData = res.data?.page?.records || []
         }
       })
     }
   },
-  watch:{
+  watch: {
     search: {
-      immediate:true,deep:true,handler(){
+      immediate: true, deep: true, handler() {
         this.getTableData()
       }
     }
@@ -47,9 +74,10 @@ export default {
 
 <template>
   <section class="AppGroupMonitorTable">
-    <el-table :data="tableData" size="mini" header-cell-class-name="tableHeader" cell-class-name="tableCell" max-height="440px" show-summary stripe>
+    <dv-scroll-board :config="tableConfig" @click=""/>
-      <table-column v-for="(column,i) in columns" :key="i" :column="column"/>
+    <div class="summary flex">
-    </el-table>
+      <div class="item" v-for="(col,i) in summaryRow" :key="i" v-text="col.value" :style="col.style"/>
+    </div>
   </section>
 </template>
 
@@ -59,64 +87,7 @@ export default {
   box-sizing: border-box;
 }
 
-.AppGroupMonitorTable .tableHeader {
+.AppGroupMonitorTable .dv-scroll-board {
-  background: rgba(13, 48, 99, 0.6) !important;
+  height: calc(100% - 30px) !important;
-  color: #fff;
-  border-color: transparent !important;
-}
-
-.AppGroupMonitorTable .el-table tr {
-  background-color: transparent !important;
-}
-
-.AppGroupMonitorTable .el-table {
-  background: transparent;
-  border-color: transparent;
-}
-
-.AppGroupMonitorTable .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%);
-}
-
-.AppGroupMonitorTable .el-table .el-table__footer-wrapper .is-leaf {
-  color: #66FFFF;
-  background: transparent;
-  border-color: transparent;
-}
-
-.AppGroupMonitorTable .el-table:before {
-  background: transparent;
-}
-
-.AppGroupMonitorTable .tableCell {
-  color: #fff;
-  border-color: transparent !important;
-}
-
-.AppGroupMonitorTable .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;
-}
-
-.AppGroupMonitorTable .el-table tr.el-table__row--striped .tableCell {
-  background-color: transparent !important;
-}
-
-.AppGroupMonitorTable .el-table tr:hover > .tableCell {
-  background-color: rgba(255, 255, 255, .1) !important;
-}
-
-.AppGroupMonitorTable .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;
 }
 </style>

src/views/AppHourCount.vue

@@ -11,26 +11,59 @@ export default {
   computed: {
     search: v => v.$marketBoard.search,
     columns: v => {
+      return [
+        {label: '品类', prop: "categoryName", width: 100},
+        {label: "总销售额", prop: "compareSaleAmt", align: 'right'},
+        {label: "时段销售额", prop: "compareHourTotalAmt", align: 'right'},
+        {label: "时段销售额", prop: "currentHourTotalAmt", align: 'right'},
+        {label: "销售增长率", prop: "saleGrowthRate", align: 'right'},
+      ]
+    },
+    tableConfig: v => {
+      return {
+        headerBGC: 'rgba(13, 48, 99, 0.6)',
+        // headerBGC: '#003B51',
+        oddRowBGC: window.evenRowBGC(), evenRowBGC: "transparent",
+        header: v.columns.map(e => e.label),
+        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.categoryName : ""
+      }
+    }),
+    specialRow: v => {
       let {currentDate, compareDate} = v.search
-      const {compareSaleAmt = 0, compareHourTotalAmt = 0, currentHourTotalAmt = 0, saleGrowthRate = 0} = v.summary
       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: '总计', children: [{label: '品类', prop: "categoryName"}]}]},
+        {value: "日期", width: 100},
-        {
+        {value: compareDate, align: 'center',},
-          label: compareDate, width: 137, align: 'center', children: [
+        {value: currentDate, align: 'center',},
-            {label: `${compareSaleAmt}`, align: 'right', children: [{label: "总销售额", prop: "compareSaleAmt", align: 'right'}]},
+      ].map(column => {
-            {label: `${compareHourTotalAmt}`, align: 'right', children: [{label: "时段销售额", prop: "compareHourTotalAmt", align: 'right'}]},
+        const style = {textAlign: column.align}
-          ]
+        if (column.width > 0) {
-        },
+          style.width = `${column.width}px`
-        {
+        } else {
-          label: currentDate, width: 137, align: 'center', children: [
+          style.flex = 1
-            {label: `${currentHourTotalAmt}`, align: 'right', children: [{label: "时段销售额", prop: "currentHourTotalAmt", align: 'right'}]},
+          style.minWidth = 0
-            {label: `${saleGrowthRate}`, align: 'right', children: [{label: "销售增长率", prop: "saleGrowthRate", align: 'right'}]},
-          ]
         }
-      ]
+        return {style, value: column.value}
+      })
     }
   },
   methods: {
@@ -45,11 +78,6 @@ export default {
         }
       })
     },
-    getHeaderClass({rowIndex}) {
-      if (rowIndex === 1) {
-        return "summaryHeader"
-      }
-    }
   },
   watch: {
     search: {
@@ -63,9 +91,13 @@ export default {
 
 <template>
   <section class="AppHourCount">
-    <el-table :data="tableData" size="mini" header-cell-class-name="tableHeader" cell-class-name="tableCell" max-height="242px" stripe :header-row-class-name="getHeaderClass">
+    <div class="tableHead flex">
-      <table-column v-for="(column,i) in columns" :key="i" :column="column"/>
+      <div class="item" v-for="(col,i) in specialRow" :key="i" v-text="col.value" :style="col.style"/>
-    </el-table>
+    </div>
+    <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"/>
   </section>
 </template>
 
@@ -75,68 +107,7 @@ export default {
   box-sizing: border-box;
 }
 
-.AppHourCount .tableHeader {
+.AppHourCount .dv-scroll-board {
-  background: rgba(13, 48, 99, 0.6) !important;
+  height: calc(100% - 60px);
-  color: #fff;
-  border-color: transparent !important;
-}
-
-.AppHourCount .el-table tr {
-  background-color: transparent !important;
-}
-
-.AppHourCount .el-table {
-  background: transparent;
-  border-color: transparent;
-}
-
-.AppHourCount .el-table .el-table__footer-wrapper tr, .AppHourCount .el-table .summaryHeader {
-  background: linear-gradient(90deg, rgba(1, 196, 236, 0.5) 0%, rgba(1, 196, 236, 0.01) 100%);
-}
-
-.AppHourCount .summaryHeader .tableHeader {
-  background: transparent !important;
-}
-
-.AppHourCount .el-table .summaryHeader .cell {
-  color: #66FFFF;
-}
-
-.AppHourCount .el-table .el-table__footer-wrapper .is-leaf {
-  color: #66FFFF;
-  background: transparent;
-  border-color: transparent;
-}
-
-.AppHourCount .tableCell {
-  color: #fff;
-  border-color: transparent !important;
-}
-
-.AppHourCount .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;
-}
-
-.AppHourCount .el-table tr.el-table__row--striped .tableCell {
-  background-color: transparent !important;
-}
-
-.AppHourCount .el-table tr:hover > .tableCell {
-  background-color: rgba(255, 255, 255, .1) !important;
-}
-
-.AppHourCount .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;
 }
 </style>

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"}]},
+        {value: "日期", width: 100},
-        {
+        {value: compareDate, align: 'center'},
-          label: compareDate, width: 137, align: 'center', children: [
+        {value: currentDate, align: 'center'},
-            {label: "销售额", prop: "compareSaleAmt", align: 'center'},
+        {width: 80},
-            {label: "有效订单数", prop: "compareValidOrderNum", align: 'center'},
+      ].map(column => {
-          ]
+        const style = {textAlign: column.align}
-        },
+        if (column.width > 0) {
-        {
+          style.width = `${column.width}px`
-          label: currentDate, width: 137, align: 'center', children: [
+        } else {
-            {label: "销售额", prop: "currentSaleAmt", align: 'center'},
+          style.flex = 1
-            {label: "有效订单数", prop: "currentValidOrderNum", align: 'center'},
+          style.minWidth = 0
-          ]
+        }
-        },
+        return {style, value: column.value}
-        {label: "销售增长率", width: 70, align: 'center', prop: "saleGrowthRate"},
+      })
-      ]
     }
   },
   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>
+    <div class="tableHead flex">
-      <table-column v-for="(column,i) in columns" :key="i" :column="column"/>
+      <div class="item" v-for="(col,i) in specialRow" :key="i" v-text="col.value" :style="col.style"/>
-    </el-table>
+    </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 .dv-scroll-board {
-.AppHourSale .tableHeader {
+  height: calc(100% - 60px);
-  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;
 }
 </style>

src/views/AppKeyGoods.vue

@@ -7,21 +7,32 @@ export default {
       tableData: [],
       columns: [
         {label: "重点单品", prop: "goodsCategoryName"},
-        {label: "销售额", prop: "saleNum", width: "70px"},
+        {label: "销售额", prop: "saleNum", width: 70},
-        {label: "库存数量", prop: "stockNum", width: "70px"},
+        {label: "库存数量", prop: "stockNum", width: 70},
-        {label: "销售目标", prop: "targetSaleNum", width: "70px"},
+        {label: "销售目标", prop: "targetSaleNum", width:70},
         {label: "销售达成", prop: "saleAchieveRate"},
       ]
     }
   },
   computed: {
-    search: v => v.$marketBoard.search
+    search: v => v.$marketBoard.search,
+    tableConfig: v => {
+      return {
+        headerBGC: 'rgba(13, 48, 99, 0.6)',
+        // headerBGC: '#003B51',
+        oddRowBGC: window.evenRowBGC(), evenRowBGC: "transparent",
+        header: v.columns.map(e => e.label),
+        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])),
+      }
+    },
   },
   methods: {
     getTableData() {
       const {$http, $waitFor} = window
       $waitFor($http).then(() => $http.post("/data-boot/la/screen/marketBoard/marketKeyGoods", {
-        ...this.search, limit: 999
+        // ...this.search, limit: 999
       })).then(res => {
         if (res?.data) {
           this.tableData = res.data?.records || []
@@ -41,9 +52,7 @@ export default {
 
 <template>
   <section class="AppKeyGoods">
-    <el-table :data="tableData" size="mini" header-cell-class-name="tableHeader" cell-class-name="tableCell" max-height="440px" stripe>
+    <dv-scroll-board :config="tableConfig" @click=""/>
-      <table-column v-for="(column,i) in columns" :key="i" :column="column"/>
-    </el-table>
   </section>
 </template>
 
@@ -52,65 +61,4 @@ export default {
   color: #fff;
   box-sizing: border-box;
 }
-
-.AppKeyGoods .tableHeader {
-  background: rgba(13, 48, 99, 0.6) !important;
-  color: #fff;
-  border-color: transparent !important;
-}
-
-.AppKeyGoods .el-table tr {
-  background-color: transparent !important;
-}
-
-.AppKeyGoods .el-table {
-  background: transparent;
-  border-color: transparent;
-}
-
-.AppKeyGoods .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%);
-}
-
-.AppKeyGoods .el-table .el-table__footer-wrapper .is-leaf {
-  color: #66FFFF;
-  background: transparent;
-  border-color: transparent;
-}
-
-.AppKeyGoods .el-table:before {
-  background: transparent;
-}
-
-.AppKeyGoods .tableCell {
-  color: #fff;
-  border-color: transparent !important;
-}
-
-.AppKeyGoods .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;
-}
-
-.AppKeyGoods .el-table tr.el-table__row--striped .tableCell {
-  background-color: transparent !important;
-}
-
-.AppKeyGoods .el-table tr:hover > .tableCell {
-  background-color: rgba(255, 255, 255, .1) !important;
-}
-
-.AppKeyGoods .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;
-}
 </style>

src/views/AppMarketBoardFilter.vue

@@ -22,7 +22,7 @@ export default {
     this.getOptions().then(() => {
       const {dayjs} = window
       setTimeout(() => {
-        const compareDate = dayjs().subtract(1, "day").format("YYYYMMDD"),
+        const compareDate = dayjs().subtract(7, "day").format("YYYYMMDD"),
             currentDate = dayjs().format("YYYYMMDD"),
             hourNum = new Date().getHours(),
             groupCodeList = this.options?.[0].value

src/views/AppStoreMonitor.vue

@@ -15,12 +15,40 @@ export default {
         {label: "门店现烤领用额", prop: "bakeLyAmt"},
         {label: "门店现烤惜食", prop: "bakeXsSaleAmt"},
       ],
-      filter: ""
+      filter: "",
+      summary: {}
     }
   },
   computed: {
     search: v => v.$marketBoard.search,
-    list: v => v.tableData.filter(e => !v.filter || e.supervisorName == v.filter) || []
+    list: v => v.tableData.filter(e => !v.filter || e.supervisorName == v.filter) || [],
+    options: v => [...new Set(v.tableData.map(e => e.supervisorName))],
+    tableConfig: v => {
+      return {
+        headerBGC: 'rgba(13, 48, 99, 0.6)',
+        // headerBGC: '#003B51',
+        oddRowBGC: window.evenRowBGC(), evenRowBGC: "transparent",
+        header: v.columns.map(e => e.label),
+        columnWidth: v.columns.map(e => e.width || "0;flex:1;min-width:0;"),
+        align: v.columns.map(e => e.align || "left"),
+        data: v.list.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.groupName : ""
+      }
+    })
   },
   methods: {
     getTableData() {
@@ -29,6 +57,7 @@ export default {
         ...this.search, limit: 999
       })).then(res => {
         if (res?.data) {
+          this.summary = res.data.total
           this.tableData = res.data?.page?.records || []
         }
       })
@@ -49,70 +78,25 @@ export default {
     <div class="flex" style="margin-bottom: 22px">
       <div class="fill"/>
       <el-select placeholder="全部" v-model="filter" size="small" clearable class="AppSelect">
-        <el-option v-for="(item,i) in tableData" :key="i" :label="item.supervisorName" :value="item.supervisorName"/>
+        <el-option v-for="(name,i) in options" :key="i" :label="name" :value="name"/>
       </el-select>
     </div>
-    <el-table :data="list" size="mini" header-cell-class-name="tableHeader" cell-class-name="tableCell" max-height="334px" show-summary stripe>
+    <dv-scroll-board :config="tableConfig"/>
-      <table-column v-for="(column,i) in columns" :key="i" :column="column"/>
+    <div class="summary flex">
-    </el-table>
+      <div class="item" v-for="(col,i) in summaryRow" :key="i" v-text="col.value" :style="col.style"/>
+    </div>
   </section>
 </template>
 
 <style>
 .AppStoreMonitor {
+  flex-shrink: 0 !important;
   color: #fff;
   box-sizing: border-box;
 }
 
-.AppStoreMonitor .tableHeader {
+.AppStoreMonitor .dv-scroll-board {
-  background: rgba(13, 48, 99, 0.6) !important;
+  height: calc(100% - 30px - 55px) !important;
-  color: #fff;
-  border-color: transparent !important;
-}
-
-.AppStoreMonitor .el-table tr {
-  background-color: transparent !important;
-}
-
-.AppStoreMonitor .el-table {
-  background: transparent;
-  border-color: transparent;
-}
-
-.AppStoreMonitor .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%);
-}
-
-.AppStoreMonitor .el-table .el-table__footer-wrapper .is-leaf {
-  color: #66FFFF;
-  background: transparent;
-  border-color: transparent;
-}
-
-.AppStoreMonitor .el-table:before {
-  background: transparent;
-}
-
-.AppStoreMonitor .tableCell {
-  color: #fff;
-  border-color: transparent !important;
-}
-
-.AppStoreMonitor .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;
-}
-
-.AppStoreMonitor .el-table tr.el-table__row--striped .tableCell {
-  background-color: transparent !important;
-}
-
-.AppStoreMonitor .el-table tr:hover > .tableCell {
-  background-color: rgba(255, 255, 255, .1) !important;
 }
 
 .AppStoreMonitor .el-select {

src/views/AppThreeMap.vue

@@ -322,7 +322,7 @@ export default {
          * @desc 创建控制器
          * */
         setControl() {
-          this.controls = new THREE.OrbitControls(this.camera);
+          this.controls = new THREE.OrbitControls(this.camera,rootEl);
           this.controls.enableRotate = false
           this.camera.position.set(this.cameraPosition.x, this.cameraPosition.y, this.cameraPosition.z);
         }
@@ -394,8 +394,8 @@ export default {
             }
 
             if (raycaster) {
-              const intersects = raycaster.intersectObject(_this.markers);
+              const intersects = raycaster.intersectObjects(_this.markers);
-              // console.log('select group', intersects)
+              console.log(intersects)
               if (intersects.length > 0) {
                 const res = intersects.filter(function (res) {
                   return res && res.object;
@@ -411,7 +411,7 @@ export default {
           const onClick = evt => {
             // 创建一个射线投射器
             raycaster.setFromCamera(this.mouse, this.camera);
-            console.log(raycaster.intersectObject(this.markers, true))
+            console.log(raycaster.intersectObjects(this.markers))
             const marker = this.markers.find(e => raycaster.intersectObject(e, true).length > 0)
             if (marker) {
               console.log("选取的点:", marker)

vite.config.js

@@ -15,6 +15,25 @@ export default defineConfig({
       additionalLegacyPolyfills: ['regenerator-runtime/runtime']
     })
   ],
+  optimizeDeps: {
+    include: [
+      "@jiaminghi/c-render",
+      "@jiaminghi/c-render/lib/plugin/util",
+      "@jiaminghi/charts/lib/util/index",
+      "@jiaminghi/charts/lib/util",
+      "@jiaminghi/charts/lib/extend/index",
+      "@jiaminghi/charts",
+      "@jiaminghi/color",
+    ],
+  },
+  build: {
+    // 打包时需要另外处理的commonjs规范的包
+    commonjsOptions: {
+      include: [
+        /node_modules/, // 必须包含
+      ],
+    },
+  },
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url))