临时提交，未完成统计

src/components/StatisticsCard/index.vue

@@ -23,7 +23,7 @@
 </template>
 
 <script>
-import CountTo from 'vue-count-to'
+import CountTo from 'vue-count-to';
 export default {
   name: 'StatisticsCard',
   components: {
@@ -201,7 +201,7 @@ export default {
       z-index: 1;
       
       i {
-        opacity: 0.15;
+        opacity: 0.25;
         transition: all 0.3s ease;
       }
     }
@@ -209,7 +209,7 @@ export default {
 
   &:hover {
     .icon-wrapper i {
-      opacity: 0.25;
+      opacity: 0.35;
       transform: scale(1.2) rotate(10deg);
     }
   }

src/views/bst/index/AdminIndex.vue

@@ -13,22 +13,40 @@
           </div> 
         </el-row>
 
-        <!-- 统计信息 -->
+        <el-row style="margin-bottom:12px">
-        <admin-stat :stat="stat" :today-stat="todayStat" />
-
-        <!-- 设备统计信息 -->
-        <device-stat :stat="stat"/>
-
-        <el-row :gutter="gutter" style="margin-top:12px">
           <el-col :sm="24" :md="16">
-            <el-card header="每日流水统计" shadow="never">
+            <!-- 统计信息 -->
-              <order-daily-stat style="width:100%"/>
+            <admin-stat :stat="stat" :today-stat="todayStat" />
-            </el-card>
           </el-col>
           <el-col :sm="24" :md="8">
-            <order-stat :stat="stat"/>
+            <!-- 设备统计信息 -->
+            <device-stat :stat="stat"/>
           </el-col>
         </el-row>
+
+        
+        <el-card class="mb10" shadow="never">
+          <el-tabs>
+            <el-tab-pane lazy label="每日流水">
+              <order-daily-stat style="width:100%"/>
+            </el-tab-pane>
+            <el-tab-pane lazy label="每周流水">
+              <order-daily-stat style="width:100%"/>
+            </el-tab-pane>
+            <el-tab-pane lazy label="每月流水">
+              <order-daily-stat style="width:100%"/>
+            </el-tab-pane>
+          </el-tabs>
+        </el-card>
+
+        <el-card class="mb10" shadow="never">
+          <el-tabs>
+            <el-tab-pane lazy label="每日提现">
+              <order-daily-stat style="width:100%"/>
+            </el-tab-pane>
+          </el-tabs>
+        </el-card>
+
       </el-col>
       <el-col :sm="24" :md="6">
         <!-- 待办事项 -->
@@ -43,14 +61,14 @@
 
 <script>
 import { getStat } from '@/api/dashboard/dashboard'
+import { getLastDateStr } from '@/utils'
 import { StatKeys } from '@/utils/enums'
 import AdminStat from '@/views/bst/index/components/AdminStat'
 import DeviceStat from '@/views/bst/index/components/DeviceStat'
-import TodoList from '@/views/bst/index/components/TodoList'
-import { getLastDateStr } from '@/utils'
 import OrderDailyStat from '@/views/bst/index/components/OrderDailyStat'
 import OrderRank from '@/views/bst/index/components/OrderRank'
 import OrderStat from '@/views/bst/index/components/OrderStat'
+import TodoList from '@/views/bst/index/components/TodoList'
 
 export default {
   name: 'AdminIndex',

src/views/bst/index/components/AdminStat.vue

@@ -21,6 +21,18 @@
       sub-label="今日订单数量"
       :sub-value="todayStat.order.count"
     />
+    <statistics-card
+      class="stat-card"
+      :value="stat.user.balance"
+      label="商户余额"
+      icon="el-icon-wallet"
+      start-color="#FA709A"
+      end-color="#FEE140"
+      sub-label="累计提现"
+      :sub-value="stat.withdraw.successAmount"
+      :show-value-change="false"
+      :precision="2"
+    />
     <statistics-card
       class="stat-card"
       :value="stat.device.count"
@@ -39,19 +51,8 @@
       icon="el-icon-map-location"
       start-color="#FF6B95"
       end-color="#FFA674"
-      sub-label="店铺数量"
+      sub-label="运营商"
-      :sub-value="0"
+      :sub-value="stat.userAgent.mchCount"
-      :show-value-change="false"
-    />
-    <statistics-card
-      class="stat-card"
-      :value="stat.areaJoin.joinCount"
-      label="加盟商"
-      icon="el-icon-office-building"
-      start-color="#FFB199"
-      end-color="#FF0844"
-      sub-label="合伙人"
-      :sub-value="stat.areaJoin.partnerCount"
       :show-value-change="false"
     />
     <statistics-card
@@ -64,34 +65,11 @@
       sub-label="今日新增"
       :sub-value="todayStat.userAgent.count"
     />
-    <statistics-card
-      class="stat-card"
-      :value="stat.userAgent.mchCount"
-      label="运营商"
-      icon="el-icon-s-custom"
-      start-color="#4FACFE"
-      end-color="#00F2FE"
-      sub-label="代理商"
-      :sub-value="stat.userAgent.agentCount"
-      :show-value-change="false"
-    />
-    <statistics-card
-      class="stat-card"
-      :value="stat.user.balance"
-      label="商户余额"
-      icon="el-icon-wallet"
-      start-color="#FA709A"
-      end-color="#FEE140"
-      sub-label="累计提现"
-      :sub-value="stat.withdraw.successAmount"
-      :show-value-change="false"
-      :precision="2"
-    />
   </div>
 </template>
 
 <script>
-import StatisticsCard from '@/components/StatisticsCard'
+import StatisticsCard from '@/components/StatisticsCard';
 export default {
   name: 'Stat',
   components: {
@@ -120,9 +98,8 @@ export default {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
-  margin-bottom: 10px;
   .stat-card {
-    flex: 0 1 calc(25% - 10px);
+    flex: 0 1 calc(33% - 10px);
   }
 }
 </style>

src/views/bst/index/components/DeviceStat.vue

@@ -3,7 +3,7 @@
     <el-col :span="24">
       <el-card class="box-card" shadow="never">
         <el-row :gutter="20">
-          <el-col :span="3" v-for="dict in dict.type.device_status" :key="dict.value">
+          <el-col :span="8" v-for="dict in dict.type.device_status" :key="dict.value">
             <el-statistic 
               class="statistic" 
               group-separator="," 
@@ -17,7 +17,7 @@
             </el-statistic>
           </el-col>
           
-          <el-col :span="3" v-for="status in ['1', '0']" :key="`online-${status}`">
+          <el-col :span="8" v-for="status in ['1', '0']" :key="`online-${status}`">
             <el-statistic 
               class="statistic" 
               group-separator="," 
@@ -100,3 +100,9 @@ export default {
   }
 }
 </script>
+
+<style lang="scss" scoped>
+.statistic {
+  margin: 15px 0;
+}
+</style>

src/views/bst/index/components/OrderDailyStat.vue

@@ -104,19 +104,81 @@ export default {
 
       const option = {
         color: [
-          '#5B8FF9', // 柔和蓝 - 订单数量
+          {
-          '#61DDAA', // 柔和绿 - 订单金额
+            type: 'linear',
-          '#F6BD16', // 柔和黄 - 订单退款
+            x: 0, y: 0, x2: 0, y2: 1,
-          '#6DC8EC', // 淡青 - 订单实收
+            colorStops: [{
-          '#9270CA', // 淡紫 - 分成金额
+              offset: 0, color: '#36D1DC'
-          '#E8684A', // 柔和橙 - 分成退款
+            }, {
-          '#FF9D4D'  // 柔和橙红 - 分成实收
+              offset: 1, color: '#5B86E5'
+            }]
+          },
+          {
+            type: 'linear',
+            x: 0, y: 0, x2: 0, y2: 1,
+            colorStops: [{
+              offset: 0, color: '#FF9966'
+            }, {
+              offset: 1, color: '#FF5E62'
+            }]
+          },
+          {
+            type: 'linear',
+            x: 0, y: 0, x2: 0, y2: 1,
+            colorStops: [{
+              offset: 0, color: '#834d9b'
+            }, {
+              offset: 1, color: '#d04ed6'
+            }]
+          },
+          {
+            type: 'linear',
+            x: 0, y: 0, x2: 0, y2: 1,
+            colorStops: [{
+              offset: 0, color: '#11998e'
+            }, {
+              offset: 1, color: '#38ef7d'
+            }]
+          },
+          {
+            type: 'linear',
+            x: 0, y: 0, x2: 0, y2: 1,
+            colorStops: [{
+              offset: 0, color: '#f46b45'
+            }, {
+              offset: 1, color: '#eea849'
+            }]
+          },
+          {
+            type: 'linear',
+            x: 0, y: 0, x2: 0, y2: 1,
+            colorStops: [{
+              offset: 0, color: '#8E2DE2'
+            }, {
+              offset: 1, color: '#4A00E0'
+            }]
+          },
+          {
+            type: 'linear',
+            x: 0, y: 0, x2: 0, y2: 1,
+            colorStops: [{
+              offset: 0, color: '#00b4db'
+            }, {
+              offset: 1, color: '#0083b0'
+            }]
+          }
         ],
         tooltip: {
           trigger: 'axis',
           axisPointer: {
             type: 'shadow'
           },
+          backgroundColor: 'rgba(255, 255, 255, 0.9)',
+          borderColor: '#ccc',
+          borderWidth: 1,
+          textStyle: {
+            color: '#333'
+          },
           formatter: function(params) {
             let result = params[0].axisValueLabel + '<br/>';
             params.forEach(param => {
@@ -135,6 +197,9 @@ export default {
         legend: {
           data: ['订单数量', '支付金额', '支付退款', '支付实收', '分成金额', '分成退款', '分成实收'],
           top: 8,
+          textStyle: {
+            color: '#666'
+          },
           selected: {
             '订单数量': true,
             '支付金额': false,
@@ -158,6 +223,12 @@ export default {
           axisLabel: {
             interval: 'auto',
             fontSize: 12,
+            color: '#666'
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#ddd'
+            }
           },
           boundaryGap: true
         },
@@ -169,6 +240,17 @@ export default {
             axisLabel: {
               formatter: value => {
                 return value.toFixed(2) + ' 元'
+              },
+              color: '#666'
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#ddd'
+              }
+            },
+            splitLine: {
+              lineStyle: {
+                color: '#eee'
               }
             }
           },  
@@ -177,7 +259,16 @@ export default {
             name: '订单数量',
             position: 'right',
             axisLabel: {
-              formatter: '{value}'
+              formatter: '{value}',
+              color: '#666'
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#ddd'
+              }
+            },
+            splitLine: {
+              show: false
             }
           }
         ],
@@ -188,9 +279,11 @@ export default {
             yAxisIndex: 1,
             data: orderCounts,
             itemStyle: {
-              opacity: 0.6
+              opacity: 0.6,
+              borderRadius: [4, 4, 0, 0]
             },
-            barWidth: '20%'
+            barWidth: '30%',
+            z: 1
           },
           {
             name: '支付金额',
@@ -199,9 +292,16 @@ export default {
             data: orderAmounts,
             smooth: true,
             symbol: 'circle',
-            symbolSize: 5,
+            symbolSize: 6,
+            areaStyle: {
+              opacity: 0.1,
+              shadowColor: 'rgba(0,0,0,0.05)',
+              shadowBlur: 3
+            },
             lineStyle: {
-              width: 2
+              width: 3,
+              shadowColor: 'rgba(0,0,0,0.1)',
+              shadowBlur: 5
             }
           },
           {
@@ -211,9 +311,16 @@ export default {
             data: orderRefunds,
             smooth: true,
             symbol: 'circle',
-            symbolSize: 5,
+            symbolSize: 6,
+            areaStyle: {
+              opacity: 0.1,
+              shadowColor: 'rgba(0,0,0,0.05)',
+              shadowBlur: 3
+            },
             lineStyle: {
-              width: 2
+              width: 3,
+              shadowColor: 'rgba(0,0,0,0.1)',
+              shadowBlur: 5
             }
           },
           {
@@ -223,9 +330,16 @@ export default {
             data: orderNetAmounts,
             smooth: true,
             symbol: 'circle',
-            symbolSize: 6,
+            symbolSize: 7,
+            areaStyle: {
+              opacity: 0.1,
+              shadowColor: 'rgba(0,0,0,0.05)',
+              shadowBlur: 3
+            },
             lineStyle: {
-              width: 2
+              width: 3,
+              shadowColor: 'rgba(0,0,0,0.1)',
+              shadowBlur: 5
             }
           },
           {
@@ -235,9 +349,16 @@ export default {
             data: bonusAmounts,
             smooth: true,
             symbol: 'circle',
-            symbolSize: 5,
+            symbolSize: 6,
+            areaStyle: {
+              opacity: 0.1,
+              shadowColor: 'rgba(0,0,0,0.05)',
+              shadowBlur: 3
+            },
             lineStyle: {
-              width: 2
+              width: 3,
+              shadowColor: 'rgba(0,0,0,0.1)',
+              shadowBlur: 5
             }
           },
           {
@@ -247,9 +368,16 @@ export default {
             data: bonusRefunds,
             smooth: true,
             symbol: 'circle',
-            symbolSize: 5,
+            symbolSize: 6,
+            areaStyle: {
+              opacity: 0.1,
+              shadowColor: 'rgba(0,0,0,0.05)',
+              shadowBlur: 3
+            },
             lineStyle: {
-              width: 2
+              width: 3,
+              shadowColor: 'rgba(0,0,0,0.1)',
+              shadowBlur: 5
             }
           },
           {
@@ -259,9 +387,16 @@ export default {
             data: bonusNetAmounts,
             smooth: true,
             symbol: 'circle',
-            symbolSize: 6,
+            symbolSize: 7,
+            areaStyle: {
+              opacity: 0.1,
+              shadowColor: 'rgba(0,0,0,0.05)',
+              shadowBlur: 3
+            },
             lineStyle: {
-              width: 2
+              width: 3,
+              shadowColor: 'rgba(0,0,0,0.1)',
+              shadowBlur: 5
             }
           }
         ]

src/views/bst/index/components/OrderRank.vue

@@ -29,7 +29,7 @@
           <area-link :id="d.row.areaId" :text="d.row.areaName" size="mini"/>
         </template>
       </el-table-column>
-      <el-table-column label="金额" prop="actualAmount" align="center" sortable :sort-orders="orderSorts">
+      <el-table-column label="实收" prop="actualAmount" align="center" sortable :sort-orders="orderSorts">
         <template slot-scope="d">{{d.row.actualAmount | fix2 | dv}}</template>
       </el-table-column>
       <el-table-column label="数量" prop="count" align="center" sortable :sort-orders="orderSorts">
@@ -45,9 +45,9 @@
 
 <script>
 import { getOrderRank } from '@/api/dashboard/dashboardOrder'
+import AreaLink from '@/components/Business/Area/AreaLink.vue'
 import { getLastDateStr } from '@/utils'
 import { DatePickerOptions } from '@/utils/constants'
-import AreaLink from '@/components/Business/Area/AreaLink.vue'
 
 // 默认排序字段
 const defaultSort = {