From 48603515cfe1fd1173086385a97635b1291fcc20 Mon Sep 17 00:00:00 2001 From: 18650502300 <18650502300@163.com> Date: Tue, 4 Mar 2025 15:58:33 +0800 Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E5=A2=9E=E5=8A=A0=E6=8A=BC?= =?UTF-8?q?=E9=87=91=E7=BB=9F=E8=AE=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/index.vue | 245 ++++++++++++++++++++++++++++++-------------- 1 file changed, 168 insertions(+), 77 deletions(-) diff --git a/src/views/index.vue b/src/views/index.vue index 5d50f69..778a80e 100644 --- a/src/views/index.vue +++ b/src/views/index.vue @@ -86,10 +86,10 @@
-
待付款订单金额
-
{{ StatisticsInfo.unpaidOrderFee }}
+
今日订单金额
+
{{ StatisticsInfo.todayOrderFee }}
- 待付款订单数：{{ StatisticsInfo.unpaidOrderCount }} + 订单总金额：{{ StatisticsInfo.totalOrderFee }}
-
-
运维状态
-
-
-
- 4g解锁失败 +
+
+
押金统计
+
+
+
+
+
+
运维状态
+
+
+
+ 4g解锁失败 +
+
+ {{ StatisticsInfo.operationVo.failedUnlockCount }} +
-
- {{ StatisticsInfo.operationVo.failedUnlockCount }} +
+
+ 蓝牙解锁数 +
+
+ {{ StatisticsInfo.operationVo.bluetoothUnlockCount }} +
+
+
+
+ 设备离线率 +
+
+ {{ StatisticsInfo.operationVo.deviceOfflineRate }}% +
-
-
- 蓝牙解锁数 +
+
+
+ 异常排查车辆 +
+
+ {{ StatisticsInfo.operationVo.faultOrderCount }} +
-
- {{ StatisticsInfo.operationVo.bluetoothUnlockCount }} +
+
+ 待换电 +
+
+ {{ StatisticsInfo.operationVo.replacementOrderCount }} +
-
-
-
- 设备离线率 -
-
- {{ StatisticsInfo.operationVo.deviceOfflineRate }}% -
-
-
-
- 异常排查车辆 -
-
- {{ StatisticsInfo.operationVo.faultOrderCount }} -
-
-
-
- 待换电 -
-
- {{ StatisticsInfo.operationVo.replacementOrderCount }} -
-
-
-
- 待维修 -
-
- {{ StatisticsInfo.operationVo.repairCount }} +
+
+ 待维修 +
+
+ {{ StatisticsInfo.operationVo.repairCount }} +
@@ -434,6 +444,10 @@ export default { if (chartInstance2) { chartInstance2.resize(); } + const chartInstance3 = echarts.init(document.getElementById("myChart3")); + if (chartInstance3) { + chartInstance3.resize(); + } }, drawLine() { this.chartInstance = echarts.init(document.getElementById("myChart")); @@ -611,6 +625,82 @@ export default { }, ], }); + // 初始化第三个图表 + const chartInstance3 = echarts.init(document.getElementById("myChart3")); + chartInstance3.setOption({ + grid: { + left: 60, + right: 50, + top: 10, + bottom: 20, + }, + tooltip: { + trigger: "axis", + }, + legend: { + data: ["押金充值", "押金退款", "押金抵扣", "押金盈余", "押金余额"], + }, + xAxis: { + type: "category", + boundaryGap: false, + inverse: true, // x 轴反转 + data: this.StatisticsInfo.depositList.map((item) => item.day), + }, + yAxis: { + type: "value", + name: "金额", + axisLabel: { + formatter: "{value} 元", + }, + }, + series: [ + { + name: "押金充值", + type: "line", + data: this.StatisticsInfo.depositList.map((item) => item.pay || 0), + itemStyle: { + color: "#FAC858", + }, + smooth: true, + }, + { + name: "押金退款", + type: "line", + data: this.StatisticsInfo.depositList.map((item) => item.refund || 0), + itemStyle: { + color: "#52e30d", + }, + smooth: true, + }, + { + name: "押金抵扣", + type: "line", + data: this.StatisticsInfo.depositList.map((item) => item.deduction || 0), + itemStyle: { + color: "#7dc1da", + }, + smooth: true, + }, + { + name: "押金盈余", + type: "line", + data: this.StatisticsInfo.depositList.map((item) => item.surplus || 0), + itemStyle: { + color: "#c1e871", + }, + smooth: true, + }, + { + name: "押金余额", + type: "line", + data: this.StatisticsInfo.depositList.map((item) => item.balance || 0), + itemStyle: { + color: "#9a4abd", + }, + smooth: true, + }, + ], + }); }, }, }; @@ -786,7 +876,7 @@ export default { width: 78%; .cont_box { width: 100%; - margin-top: 1.33rem; + margin-top: 1.83rem; display: flex; flex-wrap: nowrap; @@ -800,7 +890,7 @@ export default { .echarts_cont { width: 100%; - height: 27.17rem; + height: 17rem; /* 可以设置为百分比或视口单位 */ } @@ -928,11 +1018,10 @@ export default { } .bot_box { - margin-bottom: 2rem; padding: 1.08rem; - margin-top: 1.33rem; - width: 100%; - height: 12.42rem; + margin-right: 1.17rem; + width: 50%; + height: auto; background: #ffffff; border-radius: 0rem 0rem 0rem 0rem; @@ -947,10 +1036,12 @@ export default { width: 100%; height: 5.67rem; + .br1{ + border-right: 1px solid #D8D8D8; + } .cont_li { - width: 16.6%; + width: 33.3%; height: 5.67rem; - border-right: 1px solid #d8d8d8; .cont_li_top { width: 100%; @@ -965,8 +1056,8 @@ export default { height: 1.13rem; } - font-weight: 700; - font-size: 1.33rem; + font-weight: 600; + font-size: 1rem; color: #3d3d3d; } @@ -974,8 +1065,8 @@ export default { margin-top: 1.17rem; width: 100%; text-align: center; - font-weight: 500; - font-size: 1.67rem; + font-weight: 600; + font-size: 1rem; color: #3d3d3d; } }