From c53155e371dccc1bd0cd5ed9adcc136bbecb9398 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A3=B7=E5=8F=B6?=
 <14103883+leaf-phos@user.noreply.gitee.com>
Date: Sun, 6 Apr 2025 18:20:25 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=9F=E8=AE=A1=E6=95=B0=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/dashboard/dashboardOrder.js           |  14 ++
 src/assets/icons/svg/down.svg                 |   1 +
 src/assets/icons/svg/up.svg                   |   1 +
 src/components/StatisticsCard/index.vue       |  67 ++++-
 src/utils/enums.js                            |   7 +-
 src/views/bst/index/components/DeviceStat.vue | 102 ++++++++
 .../bst/index/components/OrderDailyStat.vue   |  35 +++
 src/views/bst/index/components/Stat.vue       |  80 ++++++
 src/views/bst/index/components/TodoList.vue   | 101 ++++++++
 src/views/bst/index/index.vue                 | 229 ++++--------------
 10 files changed, 439 insertions(+), 198 deletions(-)
 create mode 100644 src/api/dashboard/dashboardOrder.js
 create mode 100644 src/assets/icons/svg/down.svg
 create mode 100644 src/assets/icons/svg/up.svg
 create mode 100644 src/views/bst/index/components/DeviceStat.vue
 create mode 100644 src/views/bst/index/components/OrderDailyStat.vue
 create mode 100644 src/views/bst/index/components/Stat.vue
 create mode 100644 src/views/bst/index/components/TodoList.vue

diff --git a/src/api/dashboard/dashboardOrder.js b/src/api/dashboard/dashboardOrder.js
new file mode 100644
index 0000000..ea53779
--- /dev/null
+++ b/src/api/dashboard/dashboardOrder.js
@@ -0,0 +1,14 @@
+import request from '@/utils/request'
+
+/**
+ * 获取统计数据
+ * @param {Object} query 查询参数
+ * @returns {Promise} 返回统计数据
+ */
+export function getOrderDailyAmount(query) {
+  return request({
+    url: '/dashboard/order/dailyAmount',
+    method: 'get',
+    params: query
+  })
+}
diff --git a/src/assets/icons/svg/down.svg b/src/assets/icons/svg/down.svg
new file mode 100644
index 0000000..b0ce6ca
--- /dev/null
+++ b/src/assets/icons/svg/down.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="12" height="12" viewBox="0 0 12 12"><defs><clipPath id="master_svg0_0_7134"><rect x="0" y="12" width="12" height="12" rx="0"/></clipPath></defs><g transform="matrix(1,0,0,-1,0,24)" clip-path="url(#master_svg0_0_7134)"><g><path d="M6.016670023841858,12.2998046875C6.016670023841858,12.2998046875,10.683330023841858,18.3227646875,10.683330023841858,18.3227646875C10.683330023841858,18.3227646875,7.620220023841858,17.6377646875,7.620220023841858,17.6377646875C7.620220023841858,17.6377646875,7.571000023841858,17.6587346875,7.571000023841858,17.6587346875C7.571000023841858,17.6587346875,7.532860023841858,17.9395546875,7.532860023841858,17.9395546875C7.091520023841858,20.761944687499998,5.262260023841858,23.0130046875,2.908160023841858,23.6776046875C3.657010023841858,22.6032046875,3.9502300238418577,22.3181046875,4.222270023841858,20.790864687499997C4.403620023841858,19.7726946875,4.486390023841858,18.7275246875,4.470570023841858,17.6553546875C4.470570023841858,17.6553546875,4.553000023841857,17.6544746875,4.553000023841857,17.6544746875C4.553000023841857,17.6544746875,4.515530023841858,17.6377646875,4.515530023841858,17.6377646875C4.515530023841858,17.6377646875,1.350000023841858,18.3227646875,1.350000023841858,18.3227646875C1.350000023841858,18.3227646875,6.016670023841858,12.2998046875,6.016670023841858,12.2998046875C6.016670023841858,12.2998046875,6.016670023841858,12.2998046875,6.016670023841858,12.2998046875Z" fill-rule="evenodd" fill="#00B42A" fill-opacity="1"/></g></g></svg>
diff --git a/src/assets/icons/svg/up.svg b/src/assets/icons/svg/up.svg
new file mode 100644
index 0000000..6dc7d58
--- /dev/null
+++ b/src/assets/icons/svg/up.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="12" height="12" viewBox="0 0 12 12"><defs><clipPath id="master_svg0_0_7191"><rect x="0" y="0" width="12" height="12" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_0_7191)"><g><path d="M6.016670023841858,0.2998046875C6.016670023841858,0.2998046875,10.683330023841858,6.3227646875,10.683330023841858,6.3227646875C10.683330023841858,6.3227646875,7.620220023841858,5.6377646875,7.620220023841858,5.6377646875C7.620220023841858,5.6377646875,7.571000023841858,5.6587346875,7.571000023841858,5.6587346875C7.571000023841858,5.6587346875,7.532860023841858,5.9395546875,7.532860023841858,5.9395546875C7.091520023841858,8.7619446875,5.262260023841858,11.0130046875,2.908160023841858,11.6776046875C3.657010023841858,10.6032046875,3.9502300238418577,10.3181046875,4.222270023841858,8.7908646875C4.403620023841858,7.7726946875,4.486390023841858,6.7275246875,4.470570023841858,5.6553546875C4.470570023841858,5.6553546875,4.553000023841857,5.6544746875,4.553000023841857,5.6544746875C4.553000023841857,5.6544746875,4.515530023841858,5.6377646875,4.515530023841858,5.6377646875C4.515530023841858,5.6377646875,1.350000023841858,6.3227646875,1.350000023841858,6.3227646875C1.350000023841858,6.3227646875,6.016670023841858,0.2998046875,6.016670023841858,0.2998046875C6.016670023841858,0.2998046875,6.016670023841858,0.2998046875,6.016670023841858,0.2998046875Z" fill-rule="evenodd" fill="#F53F3F" fill-opacity="1"/></g></g></svg>
diff --git a/src/components/StatisticsCard/index.vue b/src/components/StatisticsCard/index.vue
index 7579795..df8479f 100644
--- a/src/components/StatisticsCard/index.vue
+++ b/src/components/StatisticsCard/index.vue
@@ -2,9 +2,18 @@
   <div class="statistics-card" :style="cardStyle">
     <div class="card-content">
       <div class="info">
-        <div class="value" :style="valueStyle">{{ value }}</div>
-        <div class="label" :style="labelStyle">{{ label }}</div>
-        <div v-if="subtitle" class="subtitle" :style="subtitleStyle">{{ subtitle }}</div>
+        <div class="label" :style="labelStyle">{{ label | dv}}</div>
+        <div class="value" :style="valueStyle">
+          <count-to :start-val="0" :end-val="value" :duration="3000" :decimals="precision"/>
+        </div>
+        <div v-if="subLabel" class="subtitle" :style="subtitleStyle">
+          <span class="sub-label">{{ subLabel | dv}}</span>
+          <span class="sub-value" :class="{ 'up': subValue >= 0, 'down': subValue < 0 }">
+            <count-to :start-val="0" :end-val="subValue" :duration="3000" :decimals="precision"/>
+            <svg-icon v-if="showValueChange && subValue >= 0" icon-class="up" />
+            <svg-icon v-else-if="showValueChange && subValue < 0" icon-class="down" />
+          </span>
+        </div>
       </div>
       <div class="icon-wrapper">
         <i :class="icon" :style="iconStyle"></i>
@@ -14,20 +23,28 @@
 </template>
 
 <script>
+import CountTo from 'vue-count-to'
 export default {
   name: 'StatisticsCard',
+  components: {
+    CountTo
+  },
   props: {
     value: {
-      type: [Number, String],
+      type: Number,
       default: null,
     },
     label: {
       type: String,
       required: true
     },
-    subtitle: {
+    subLabel: {
       type: String,
-      default: ''
+      default: null
+    },
+    subValue: {
+      type: Number,
+      default: null
     },
     icon: {
       type: String,
@@ -48,6 +65,16 @@ export default {
     height: {
       type: [Number, String],
       default: 120
+    },
+    // 是否显示值变化
+    showValueChange: {
+      type: Boolean,
+      default: true
+    },
+    // 小数位数
+    precision: {
+      type: Number,
+      default: 0
     }
   },
   computed: {
@@ -65,7 +92,7 @@ export default {
       return {
         value: Math.max(16, Math.round(28 * scale)),
         label: Math.max(12, Math.round(16 * scale)),
-        subtitle: Math.max(10, Math.round(12 * scale)),
+        subtitle: Math.max(10, Math.round(14 * scale)),
         icon: Math.max(32, Math.round(64 * scale))
       };
     },
@@ -113,10 +140,10 @@ export default {
   transition: all 0.3s ease;
   backdrop-filter: blur(5px);
   box-sizing: border-box;
+  cursor: pointer;
   
   &:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 4px 12px 0 rgba(0,0,0,.15);
+    transform: translateY(-4px);
   }
   
   .card-content {
@@ -144,8 +171,24 @@ export default {
       }
 
       .subtitle {
-        color: #909399;
-        opacity: 0.8;
+        display: flex;
+        align-items: flex-end;
+        .sub-label {
+          color: #333;
+          opacity: 0.8;
+          margin-right: 4px;
+        }
+        .sub-value {
+          color: #333;
+          opacity: 0.8;
+          &.up {
+            color: #dc3545;
+          }
+          &.down {
+            color: #198754;
+          }
+        }
+        
       }
     }
     
@@ -165,7 +208,7 @@ export default {
   &:hover {
     .icon-wrapper i {
       opacity: 0.25;
-      transform: scale(1.05) rotate(5deg);
+      transform: scale(1.2) rotate(10deg);
     }
   }
 }
diff --git a/src/utils/enums.js b/src/utils/enums.js
index 8ea9d8c..d93b167 100644
--- a/src/utils/enums.js
+++ b/src/utils/enums.js
@@ -196,16 +196,11 @@ export const StatKeys = {
   ORDER_USER_COUNT: "order_user_count", // 累计订单用户
   ORDER_COUNT: "order_count", // 订单数量
   ORDER_PAY_AMOUNT: "order_pay_amount", // 订单支付金额
-  ORDER_REFUNDED_AMOUNT: "order_refunded_amount", // 订单已退款金额
-  ORDER_REFUNDING_AMOUNT: "order_refunding_amount", // 订单退款中金额
-  ORDER_TODAY_PAY_AMOUNT: "order_today_pay_amount", // 订单今日支付金额
-  ORDER_TODAY_REFUND_AMOUNT: "order_today_refund_amount", // 订单今日退款金额
-  ORDER_TODAY_REFUNDING_AMOUNT: "order_today_refunding_amount", // 订单今日退款中金额
+  ORDER_REFUND_AMOUNT: "order_refund_amount", // 订单退款金额
   BONUS_COUNT: "bonus_count", // 分成数量
   BONUS_AMOUNT: "bonus_amount", // 分成总金额
   BONUS_REFUND_AMOUNT: "bonus_refund_amount", // 分成总退款
   USER_COUNT: "user_count", // 用户数量
-  USER_TODAY_COUNT: "user_today_count", // 今日新增用户数量
   USER_BALANCE: "user_balance", // 用户余额
   DEVICE_COUNT: "device_count", // 设备数量
   DEVICE_STATUS_COUNT: "device_status_count", // 设备状态数量
diff --git a/src/views/bst/index/components/DeviceStat.vue b/src/views/bst/index/components/DeviceStat.vue
new file mode 100644
index 0000000..7c44059
--- /dev/null
+++ b/src/views/bst/index/components/DeviceStat.vue
@@ -0,0 +1,102 @@
+<template>
+  <el-row :gutter="20">
+    <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-statistic 
+              class="statistic" 
+              group-separator="," 
+              :value="stat.device.statusCount[dict.value] || 0"  
+              :title="getDeviceStatusLabel(dict.value)"
+              suffix="辆"
+              >
+              <template #prefix>
+                <el-icon :class="statusMap[dict.value].icon" :style="{ color: statusMap[dict.value].color }" font-size="20px"/>
+              </template>
+            </el-statistic>
+          </el-col>
+          
+          <el-col :span="3" v-for="status in ['1', '0']" :key="`online-${status}`">
+            <el-statistic 
+              class="statistic" 
+              group-separator="," 
+              :value="stat.device.onlineStatusCount[status] || 0"  
+              :title="status == 1 ? '在线' : '离线'"
+              suffix="辆"
+              >
+              <template #prefix>
+                <el-icon :class="onlineMap[status].icon" :style="{ color: onlineMap[status].color }" font-size="20px"/>
+              </template>
+            </el-statistic>
+          </el-col>
+        </el-row>
+      </el-card>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import { dictLabel } from '@/utils'
+import { DeviceStatus } from '@/utils/enums'
+
+export default {
+  name: 'DeviceStat',
+  dicts: ['device_status'],
+  props: {
+    stat: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      statusMap: {
+        [DeviceStatus.STORAGE]: {
+          icon: 'el-icon-box',
+          color: '#13C2C2'  // 青色,表示在仓库
+        },
+        [DeviceStatus.AVAILABLE]: {
+          icon: 'el-icon-bicycle', 
+          color: '#52C41A'  // 绿色,表示可用
+        },
+        [DeviceStatus.RESERVED]: {
+          icon: 'el-icon-timer',
+          color: '#722ED1'  // 紫色,表示预约中
+        },
+        [DeviceStatus.IN_USE]: {
+          icon: 'el-icon-user-solid',
+          color: '#73D13D'  // 浅绿色,表示使用中
+        },
+        [DeviceStatus.TEMP_LOCKED]: {
+          icon: 'el-icon-lock',
+          color: '#EB2F96'  // 粉色,表示锁定
+        },
+        [DeviceStatus.DISPATCHING]: {
+          icon: 'el-icon-position',
+          color: '#FF7A45'  // 橙色,表示调度中
+        },
+        [DeviceStatus.DISABLED]: {
+          icon: 'el-icon-warning-outline',
+          color: '#FF4D4F'  // 红色,表示禁用
+        }
+      },
+      onlineMap: {
+        '1': {
+          icon: 'el-icon-success',
+          color: '#52C41A'  // 绿色,表示在线
+        },
+        '0': {
+          icon: 'el-icon-error',
+          color: '#FF4D4F'  // 红色,表示离线
+        }
+      }
+    }
+  },
+  methods: {
+    getDeviceStatusLabel(value) {
+      return dictLabel(this.dict.type.device_status, value)
+    }
+  }
+}
+</script>
diff --git a/src/views/bst/index/components/OrderDailyStat.vue b/src/views/bst/index/components/OrderDailyStat.vue
new file mode 100644
index 0000000..6e83123
--- /dev/null
+++ b/src/views/bst/index/components/OrderDailyStat.vue
@@ -0,0 +1,35 @@
+<template>
+  <el-card header="订单统计" shadow="never">
+
+  </el-card>
+</template>
+
+<script>
+import { getOrderDailyAmount } from '@/api/dashboard/dashboardOrder'
+
+export default {
+  name: "OrderDailyStat",
+  data() {
+    return {
+      loading: false,
+      orderDailyAmount: [],
+      queryParams: {},
+    }
+  },
+  created() {
+    this.getOrderDailyAmount();
+  },
+  methods: {
+    getOrderDailyAmount() {
+      this.loading = true;
+      getOrderDailyAmount(this.orderQueryParams).then(res => {
+        this.orderDailyAmount = res.data;
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/bst/index/components/Stat.vue b/src/views/bst/index/components/Stat.vue
new file mode 100644
index 0000000..af69456
--- /dev/null
+++ b/src/views/bst/index/components/Stat.vue
@@ -0,0 +1,80 @@
+<template>
+  <el-row :gutter="10">
+    <el-col :span="span">
+      <statistics-card
+        :value="stat.order.payAmount - stat.orderRefund.amount"
+        label="订单实收"
+        icon="el-icon-money"
+        start-color="#FF4D4F"
+        end-color="#FF7A45"
+        sub-label="今日订单实收"
+        :sub-value="todayStat.order.payAmount - todayStat.orderRefund.amount"
+        :precision="2"
+      />
+    </el-col>
+    <el-col :span="span">
+      <statistics-card
+        :value="stat.device.count"
+        label="车辆总数"
+        icon="el-icon-bicycle"
+        start-color="#52C41A"
+        end-color="#73D13D"
+        sub-label="车型总数"
+        :sub-value="stat.model.count"
+        :show-value-change="false"
+      />
+    </el-col>
+    <el-col :span="span">
+      <statistics-card
+        :value="stat.user.count"
+        label="用户总数"
+        icon="el-icon-user"
+        start-color="#722ED1"
+        end-color="#EB2F96"
+        sub-label="今日新增"
+        :sub-value="todayStat.user.count"
+      />
+    </el-col>
+    <el-col :span="span">
+      <statistics-card
+        :value="stat.area.count"
+        label="运营区数量"
+        icon="el-icon-location"
+        start-color="#13C2C2"
+        end-color="#52C41A"
+        sub-label="商户余额"
+        :sub-value="stat.user.balance"
+        :show-value-change="false"
+      />
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import StatisticsCard from '@/components/StatisticsCard'
+export default {
+  name: 'Stat',
+  components: {
+    StatisticsCard
+  },
+  props: {
+    stat: {
+      type: Object,
+      required: true
+    },
+    todayStat: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      span: 6
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/bst/index/components/TodoList.vue b/src/views/bst/index/components/TodoList.vue
new file mode 100644
index 0000000..6c573fb
--- /dev/null
+++ b/src/views/bst/index/components/TodoList.vue
@@ -0,0 +1,101 @@
+<template>
+  <el-card class="todo-list" v-loading="loading" shadow="never" header="待办事项">
+    <div class="todo-item" @click="$router.push('/money/withdraw?status=11')">
+      <div class="label"><i class="el-icon-wallet"/> 提现申请</div>
+      <div class="value">
+        <count-to :start-val="0" :end-val="stat.withdrawCount" :duration="3000"/>
+      </div>
+      <div class="unit">条</div>
+    </div>
+    <div class="todo-item" @click="$router.push('/money/withdraw?status=11')">
+      <div class="label"><i class="el-icon-refresh"/> 还车审核</div>
+      <div class="value">
+        <count-to :start-val="0" :end-val="stat.withdrawCount" :duration="3000"/>
+      </div>
+      <div class="unit">条</div>
+    </div>
+    <div class="todo-item" @click="$router.push('/complaint/mchApply?status=0')">
+      <div class="label"><i class="el-icon-office-building"/> 商家加盟</div>
+      <div class="value">
+        <count-to :start-val="0" :end-val="stat.mchApplyCount" :duration="3000"/>
+      </div>
+      <div class="unit">条</div>
+    </div>
+    <div class="todo-item" @click="$router.push('/complaint/abnormal?status=1')">
+      <div class="label"><i class="el-icon-warning-outline"/> 待处理故障信息</div>
+      <div class="value">
+        <count-to :start-val="0" :end-val="stat.abnormalCount" :duration="3000"/>
+      </div>
+      <div class="unit">条</div>
+    </div>
+  </el-card>
+</template>
+
+<script>
+import CountTo from 'vue-count-to'
+
+export default {
+  name: 'TodoList',
+  components: {
+    CountTo
+  },
+  props: {
+    stat: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      loading: false,
+    }
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.todo-list {
+  position: relative;
+  width: 100%;
+}
+.todo-item {
+  position: relative;
+  width: 100%;
+  display: flex;
+  transition: .25s;
+  padding: 0.55em 1em;
+  cursor: pointer;
+  border-radius: 16px;
+  vertical-align: bottom;
+  background: #fff;
+  .value {
+    display: inline-block;
+    width: fit-content;
+    margin-left: 1em;
+    color: #165DFF;
+    font-size: 20px;
+  }
+  .label {
+    display: flex;
+    align-items: center;
+    color: #1D252F;
+    flex: 1;
+    i {
+      color: #165DFF;
+      font-size: 20px;
+      margin-right: 0.3em;
+    }
+  }
+  .unit {
+    display: inline-block;
+    margin-left: 0.5em;
+    font-size: 14px;
+  }
+}
+.todo-item:hover {
+  background: linear-gradient(180deg, #F2F9FE -3%, #E6F4FE 100%);
+}
+.todo-item:nth-child(n + 2) {
+  margin-top: 8px;
+}
+</style>
diff --git a/src/views/bst/index/index.vue b/src/views/bst/index/index.vue
index 285e9ec..319a2d5 100644
--- a/src/views/bst/index/index.vue
+++ b/src/views/bst/index/index.vue
@@ -1,127 +1,32 @@
 <template>
   <div class="app-container" style="min-height: 600px;" v-loading="loading">
-    <el-row :gutter="20" v-if="stat">
+    <el-row :gutter="gutter" v-if="stat">
       <el-col :span="18">
-        <el-row :gutter="10">
-          <!-- 用户相关统计 -->
-          <el-col :span="span">
-            <statistics-card
-              :value="stat.user.balance"
-              label="用户总余额"
-              icon="el-icon-wallet"
-              start-color="#1890FF"
-              end-color="#36CBCB"
-            />
-          </el-col>
-          <el-col :span="span">
-            <statistics-card
-              :value="stat.user.count"
-              label="用户总数"
-              icon="el-icon-user"
-              start-color="#722ED1"
-              end-color="#EB2F96"
-            />
-          </el-col>
-          <el-col :span="span">
-            <statistics-card
-              :value="stat.user.todayCount"
-              label="今日新增用户"
-              icon="el-icon-user-plus"
-              start-color="#FA541C"
-              end-color="#FAAD14"
-            />
-          </el-col>
-          <el-col :span="span">
-            <statistics-card
-              :value="stat.area.count"
-              label="运营区数量"
-              icon="el-icon-location"
-              start-color="#13C2C2"
-              end-color="#52C41A"
-            />
-          </el-col>
-        </el-row>
-        <el-row :gutter="10" style="margin-top: 10px;">
-          <!-- 订单相关统计 -->
-          <el-col :span="span">
-            <statistics-card
-              :value="formatAmount(stat.order.payAmount - (stat.order.refundingAmount) - (stat.order.refundedAmount))"
-              label="订单总收入"
-              icon="el-icon-money"
-              start-color="#FF4D4F"
-              end-color="#FF7A45"
-            />
-          </el-col>
-          <el-col :span="span">
-            <statistics-card
-              :value="formatAmount(stat.order.todayPayAmount - (stat.order.todayRefundingAmount) - (stat.order.todayRefundedAmount))"
-              label="今日订单收入"
-              icon="el-icon-date"
-              start-color="#2F54EB"
-              end-color="#597EF7"
-            />
-          </el-col>
-          <el-col :span="span">
-            <statistics-card
-              :value="stat.device.count"
-              label="车辆总数"
-              icon="el-icon-bicycle"
-              start-color="#52C41A"
-              end-color="#73D13D"
-            />
-          </el-col>
-          <el-col :span="span">
-            <statistics-card
-              :value="stat.model.count"
-              label="车型总数"
-              icon="el-icon-menu"
-              start-color="#722ED1"
-              end-color="#85A5FF"
-            />
-          </el-col>
-        </el-row>
-      
-      <!-- 车辆状态统计 -->
-        <el-row :gutter="20" style="margin-top: 20px;">
-          <el-col :span="24">
-            <el-card class="box-card">
-              <div slot="header" class="clearfix">
-                <span>车辆状态统计</span>
-              </div>
-              <el-row :gutter="20">
-                <el-col :span="4" v-for="status in deviceStatusList" :key="status">
-                  <div class="status-item">
-                    <div class="status-count">{{ stat.device.statusCount[status] || 0 }}</div>
-                    <div class="status-label">{{ getDeviceStatusLabel(status) }}</div>
-                  </div>
-                </el-col>
-              </el-row>
-            </el-card>
-          </el-col>
-        </el-row>
+        <!-- 统计信息 -->
+        <stat :stat="stat" :today-stat="todayStat" />
+        
+        <!-- 设备统计信息 -->
+        <device-stat :stat="stat" style="margin-top: 12px;"/>
 
-        <!-- 车辆在线状态统计 -->
-        <el-row :gutter="20" style="margin-top: 20px;">
-          <el-col :span="24">
-            <el-card class="box-card">
-              <div slot="header" class="clearfix">
-                <span>车辆在线状态统计</span>
-              </div>
-              <el-row :gutter="20">
-                <el-col :span="12" v-for="status in ['1', '0']" :key="status">
-                  <div class="status-item">
-                    <div class="status-count">{{ stat.device.onlineStatusCount[status] || 0 }}</div>
-                    <div class="status-label">{{ status === '1' ? '在线' : '离线' }}</div>
-                  </div>
-                </el-col>
-              </el-row>
+        <el-row :gutter="gutter" style="margin-top:12px">
+          <el-col :span="16">
+            <order-daily-stat/>
+          </el-col>
+          <el-col :span="8">
+            <el-card header="提现" shadow="never">
+              待实现
             </el-card>
           </el-col>
         </el-row>
       </el-col>
-
-
       <el-col :span="6">
+        <!-- 待办事项 -->
+        <todo-list :stat="stat"/>
+
+        <el-card style="margin-top: 12px;" header="订单排行" shadow="never">
+          待实现
+        </el-card>
+
       </el-col>
 
     </el-row>
@@ -132,42 +37,36 @@
 <script>
 import { getStat } from '@/api/dashboard/dashboard'
 import { StatKeys } from '@/utils/enums'
-import { DeviceStatus } from '@/utils/enums'
-import StatisticsCard from '@/components/StatisticsCard'
+import Stat from '@/views/bst/index/components/Stat'
+import DeviceStat from '@/views/bst/index/components/DeviceStat'
+import TodoList from '@/views/bst/index/components/TodoList'
+import { getLastDateStr } from '@/utils'
+import OrderDailyStat from './components/OrderDailyStat.vue'
 
 export default {
   name: 'Index',
   components: {
-    StatisticsCard
+    Stat,
+    DeviceStat,
+    TodoList,
+    OrderDailyStat,
   },
   data() {
     return {
       span: 6,
+      gutter: 12,
       loading: false,
       stat: null,
-      deviceStatusList: [
-        DeviceStatus.STORAGE,      // 仓库中
-        DeviceStatus.AVAILABLE,    // 待骑行
-        DeviceStatus.RESERVED,     // 预约中
-        DeviceStatus.IN_USE,       // 骑行中
-        DeviceStatus.TEMP_LOCKED,  // 临时锁车
-        DeviceStatus.DISPATCHING,  // 调度中
-        DeviceStatus.DISABLED      // 禁用
-      ],
+      todayStat: null,
       queryParams: {
         keys: [
           StatKeys.ORDER_COUNT,
           StatKeys.ORDER_PAY_AMOUNT,
-          StatKeys.ORDER_REFUNDED_AMOUNT,
-          StatKeys.ORDER_REFUNDING_AMOUNT,
-          StatKeys.ORDER_TODAY_PAY_AMOUNT,
-          StatKeys.ORDER_TODAY_REFUND_AMOUNT,
-          StatKeys.ORDER_TODAY_REFUNDING_AMOUNT,
+          StatKeys.ORDER_REFUND_AMOUNT,
           StatKeys.BONUS_COUNT,
           StatKeys.BONUS_AMOUNT,
           StatKeys.BONUS_REFUND_AMOUNT,
           StatKeys.USER_COUNT,
-          StatKeys.USER_TODAY_COUNT,
           StatKeys.USER_BALANCE,
           StatKeys.DEVICE_COUNT,
           StatKeys.DEVICE_STATUS_COUNT,
@@ -179,7 +78,8 @@ export default {
     }
   },
   created() {
-    this.getStat()
+    this.getStat();
+    this.getTodayStat();
   },
   methods: {
     getStat() {
@@ -190,52 +90,21 @@ export default {
         this.loading = false;
       })
     },
-    formatAmount(amount) {
-      return Number(amount).toFixed(2)
-    },
-    getDeviceStatusLabel(status) {
-      const statusMap = {
-        [DeviceStatus.STORAGE]: '仓库中',
-        [DeviceStatus.AVAILABLE]: '待骑行',
-        [DeviceStatus.RESERVED]: '预约中',
-        [DeviceStatus.IN_USE]: '骑行中',
-        [DeviceStatus.TEMP_LOCKED]: '临时锁车',
-        [DeviceStatus.DISPATCHING]: '调度中',
-        [DeviceStatus.DISABLED]: '禁用'
-      }
-      return statusMap[status] || '未知状态'
+    getTodayStat() {
+      getStat({
+        keys:[
+          StatKeys.USER_COUNT,
+          StatKeys.ORDER_PAY_AMOUNT,
+          StatKeys.ORDER_REFUND_AMOUNT,
+        ],
+        dateRange: [
+          getLastDateStr(0),
+          getLastDateStr(0)
+        ]
+      }).then(res => {
+        this.todayStat = res.data
+      })
     }
   }
 }
-</script>
-
-<style lang="scss" scoped>
-.el-row {
-  margin-bottom: 20px;
-  &:last-child {
-    margin-bottom: 0;
-  }
-}
-
-.box-card {
-  .status-item {
-    text-align: center;
-    padding: 15px;
-    background: #f5f7fa;
-    border-radius: 4px;
-    margin-bottom: 10px;
-
-    .status-count {
-      font-size: 24px;
-      font-weight: bold;
-      color: #303133;
-      margin-bottom: 8px;
-    }
-
-    .status-label {
-      font-size: 14px;
-      color: #606266;
-    }
-  }
-}
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file