先提交一部分

src/assets/main.css

@@ -14,6 +14,23 @@ a, .green {
   }
 }
 
+.AppSelect .el-input__inner {
+  background: linear-gradient(180deg, rgba(12, 53, 111, 0) 0%, #0C356F 100%);
+  border: 1px solid #1760AE;
+  border-radius: 0;
+  color: #fff;
+}
+
+
+.el-table:before, .el-table:after {
+  background: transparent;
+}
+
+.el-table .gutter {
+  background-color: transparent !important;
+  border-color: transparent !important;
+}
+
 .flex {
   display: flex;
 }
@@ -33,10 +50,11 @@ a, .green {
   grid-template-columns: repeat(4, 1fr);
 }
 
-.mb-8{
+.mb-8 {
   margin-bottom: 8px;
 }
 
-.mr-8{
+.mr-8 {
   margin-right: 8px;
 }
+

src/views/AppHourCount.vue

@@ -17,17 +17,17 @@ export default {
       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: "hour"}]}]},
+        {label: "日期", width: 100, children: [{label: '总计', children: [{label: '品类', prop: "categoryName"}]}]},
         {
           label: compareDate, width: 137, align: 'center', children: [
-            {label: compareSaleAmt, align: 'center', children: [{label: "总销售额", prop: "compareSaleAmt", align: 'center'}]},
+            {label: `${compareSaleAmt}`, align: 'right', children: [{label: "总销售额", prop: "compareSaleAmt", align: 'right'}]},
-            {label: compareHourTotalAmt, align: 'center', children: [{label: "时段销售额", prop: "compareHourTotalAmt", align: 'center'}]},
+            {label: `${compareHourTotalAmt}`, align: 'right', children: [{label: "时段销售额", prop: "compareHourTotalAmt", align: 'right'}]},
           ]
         },
         {
           label: currentDate, width: 137, align: 'center', children: [
-            {label: currentHourTotalAmt, align: 'center', children: [{label: "时段销售额", prop: "currentHourTotalAmt", align: 'center'}]},
+            {label: `${currentHourTotalAmt}`, align: 'right', children: [{label: "时段销售额", prop: "currentHourTotalAmt", align: 'right'}]},
-            {label: saleGrowthRate, align: 'center', children: [{label: "销售增长率", prop: "saleGrowthRate", align: 'center'}]},
+            {label: `${saleGrowthRate}`, align: 'right', children: [{label: "销售增长率", prop: "saleGrowthRate", align: 'right'}]},
           ]
         }
       ]
@@ -63,7 +63,7 @@ export default {
 
 <template>
   <section class="AppHourCount">
-    <el-table :data="tableData" size="mini" header-cell-class-name="tableHeader" cell-class-name="tableCell" max-height="440px" stripe :header-row-class-name="getHeaderClass">
+    <el-table :data="tableData" size="mini" header-cell-class-name="tableHeader" cell-class-name="tableCell" max-height="242px" stripe :header-row-class-name="getHeaderClass">
       <table-column v-for="(column,i) in columns" :key="i" :column="column"/>
     </el-table>
   </section>

src/views/AppStoreMonitor.vue

@@ -14,11 +14,13 @@ export default {
         {label: "门店现烤报损额", prop: "bakeBsAmt"},
         {label: "门店现烤领用额", prop: "bakeLyAmt"},
         {label: "门店现烤惜食", prop: "bakeXsSaleAmt"},
-      ]
+      ],
+      filter: ""
     }
   },
   computed: {
-    search: v => v.$marketBoard.search
+    search: v => v.$marketBoard.search,
+    list: v => v.tableData.filter(e => !v.filter || e.supervisorName == v.filter) || []
   },
   methods: {
     getTableData() {
@@ -32,9 +34,9 @@ export default {
       })
     }
   },
-  watch:{
+  watch: {
     search: {
-      immediate:true,deep:true,handler(){
+      immediate: true, deep: true, handler() {
         this.getTableData()
       }
     }
@@ -44,7 +46,13 @@ export default {
 
 <template>
   <section class="AppStoreMonitor">
-    <el-table :data="tableData" size="mini" header-cell-class-name="tableHeader" cell-class-name="tableCell" max-height="440px" show-summary stripe>
+    <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-select>
+    </div>
+    <el-table :data="list" size="mini" header-cell-class-name="tableHeader" cell-class-name="tableCell" max-height="334px" show-summary stripe>
       <table-column v-for="(column,i) in columns" :key="i" :column="column"/>
     </el-table>
   </section>
@@ -107,13 +115,7 @@ export default {
   background-color: rgba(255, 255, 255, .1) !important;
 }
 
-.AppStoreMonitor .subTitle {
+.AppStoreMonitor .el-select {
-  line-height: 20px;
+  width: 120px;
-  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>