首页增加押金统计
This commit is contained in:
parent
c4b650b36d
commit
48603515cf
|
|
@ -86,10 +86,10 @@
|
|||
</div>
|
||||
<div class="info_li" style="margin-top: 0.8rem">
|
||||
<div class="card2">
|
||||
<div class="txt">待付款订单金额</div>
|
||||
<div class="num">{{ StatisticsInfo.unpaidOrderFee }}</div>
|
||||
<div class="txt">今日订单金额</div>
|
||||
<div class="num">{{ StatisticsInfo.todayOrderFee }}</div>
|
||||
<div class="txt1">
|
||||
待付款订单数：{{ StatisticsInfo.unpaidOrderCount }}
|
||||
订单总金额：{{ StatisticsInfo.totalOrderFee }}
|
||||
</div>
|
||||
<img
|
||||
src="https://lxnapi.ccttiot.com/bike/img/static/un9hBy1mNXjAsRnrSt14"
|
||||
|
|
@ -171,73 +171,83 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bot_box">
|
||||
<div class="tit">运维状态</div>
|
||||
<div class="cont_box">
|
||||
<div class="cont_li">
|
||||
<div class="cont_li_top">
|
||||
<img
|
||||
src="https://lxnapi.ccttiot.com/bike/img/static/uDOL2U9faZ5ku81NTPnU"
|
||||
alt=""
|
||||
/>4g解锁失败
|
||||
<div class="cont_box">
|
||||
<div class="echart_box">
|
||||
<div class="tit">押金统计</div>
|
||||
<div class="echarts_cont">
|
||||
<div id="myChart3" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bot_box">
|
||||
<div class="tit">运维状态</div>
|
||||
<div class="cont_box">
|
||||
<div class="cont_li br1">
|
||||
<div class="cont_li_top">
|
||||
<img
|
||||
src="https://lxnapi.ccttiot.com/bike/img/static/uDOL2U9faZ5ku81NTPnU"
|
||||
alt=""
|
||||
/>4g解锁失败
|
||||
</div>
|
||||
<div class="cont_li_bot">
|
||||
{{ StatisticsInfo.operationVo.failedUnlockCount }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="cont_li_bot">
|
||||
{{ StatisticsInfo.operationVo.failedUnlockCount }}
|
||||
<div class="cont_li br1">
|
||||
<div class="cont_li_top">
|
||||
<img
|
||||
src="https://lxnapi.ccttiot.com/bike/img/static/uuCZPQA3uCAJsAqca8Bv"
|
||||
alt=""
|
||||
/>蓝牙解锁数
|
||||
</div>
|
||||
<div class="cont_li_bot">
|
||||
{{ StatisticsInfo.operationVo.bluetoothUnlockCount }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="cont_li">
|
||||
<div class="cont_li_top">
|
||||
<img
|
||||
src="https://lxnapi.ccttiot.com/bike/img/static/uwGblBABW5uKSVzW4FjE"
|
||||
alt=""
|
||||
/>设备离线率
|
||||
</div>
|
||||
<div class="cont_li_bot">
|
||||
{{ StatisticsInfo.operationVo.deviceOfflineRate }}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cont_li">
|
||||
<div class="cont_li_top">
|
||||
<img
|
||||
src="https://lxnapi.ccttiot.com/bike/img/static/uuCZPQA3uCAJsAqca8Bv"
|
||||
alt=""
|
||||
/>蓝牙解锁数
|
||||
<div class="cont_box">
|
||||
<div class="cont_li br1">
|
||||
<div class="cont_li_top">
|
||||
<img
|
||||
src="https://lxnapi.ccttiot.com/bike/img/static/uDOL2U9faZ5ku81NTPnU"
|
||||
alt=""
|
||||
/>异常排查车辆
|
||||
</div>
|
||||
<div class="cont_li_bot">
|
||||
{{ StatisticsInfo.operationVo.faultOrderCount }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="cont_li_bot">
|
||||
{{ StatisticsInfo.operationVo.bluetoothUnlockCount }}
|
||||
<div class="cont_li br1">
|
||||
<div class="cont_li_top">
|
||||
<img
|
||||
src="https://lxnapi.ccttiot.com/bike/img/static/uuCZPQA3uCAJsAqca8Bv"
|
||||
alt=""
|
||||
/>待换电
|
||||
</div>
|
||||
<div class="cont_li_bot">
|
||||
{{ StatisticsInfo.operationVo.replacementOrderCount }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cont_li">
|
||||
<div class="cont_li_top">
|
||||
<img
|
||||
src="https://lxnapi.ccttiot.com/bike/img/static/uwGblBABW5uKSVzW4FjE"
|
||||
alt=""
|
||||
/>设备离线率
|
||||
</div>
|
||||
<div class="cont_li_bot">
|
||||
{{ StatisticsInfo.operationVo.deviceOfflineRate }}%
|
||||
</div>
|
||||
</div>
|
||||
<div class="cont_li">
|
||||
<div class="cont_li_top">
|
||||
<img
|
||||
src="https://lxnapi.ccttiot.com/bike/img/static/uDOL2U9faZ5ku81NTPnU"
|
||||
alt=""
|
||||
/>异常排查车辆
|
||||
</div>
|
||||
<div class="cont_li_bot">
|
||||
{{ StatisticsInfo.operationVo.faultOrderCount }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="cont_li">
|
||||
<div class="cont_li_top">
|
||||
<img
|
||||
src="https://lxnapi.ccttiot.com/bike/img/static/uuCZPQA3uCAJsAqca8Bv"
|
||||
alt=""
|
||||
/>待换电
|
||||
</div>
|
||||
<div class="cont_li_bot">
|
||||
{{ StatisticsInfo.operationVo.replacementOrderCount }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="cont_li">
|
||||
<div class="cont_li_top">
|
||||
<img
|
||||
src="https://lxnapi.ccttiot.com/bike/img/static/uwGblBABW5uKSVzW4FjE"
|
||||
alt=""
|
||||
/>待维修
|
||||
</div>
|
||||
<div class="cont_li_bot">
|
||||
{{ StatisticsInfo.operationVo.repairCount }}
|
||||
<div class="cont_li">
|
||||
<div class="cont_li_top">
|
||||
<img
|
||||
src="https://lxnapi.ccttiot.com/bike/img/static/uwGblBABW5uKSVzW4FjE"
|
||||
alt=""
|
||||
/>待维修
|
||||
</div>
|
||||
<div class="cont_li_bot">
|
||||
{{ StatisticsInfo.operationVo.repairCount }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user