This commit is contained in:
Sliverber 2024-07-20 16:48:45 +08:00
parent 87f77925dc
commit 4f0efb7034
3 changed files with 618 additions and 83 deletions

View File

@ -38,7 +38,14 @@ export function getArealist() {
})
}
// 获取首页统计
export function getAdminStatistics() {
return request({
url: '/index/admim/statistics',
method: 'get',
})
}
// 修改运营区
export function updateArea(data) {
return request({

View File

@ -1,99 +1,621 @@
<template>
<div class="app-container home">
<div v-if="userName != 'admin' " >
<span>可用余额: </span><span style="color: red;font-weight: 700">{{balance}}</span>
<div class="page">
<div class="info_li">
<div class="card1">
<div class="txt">运营商数</div>
<div class="num">{{StatisticsInfo.operatorCount }}</div>
<div class="txt1">独立小程序{{StatisticsInfo.appCount }}</div>
<img src="https://lxnapi.ccttiot.com/bike/img/static/uZdZtiQN8BGMcSEamOmj" alt="">
</div>
<div class="card1" style="background: linear-gradient( 270deg, #A6A6E7 0%, rgba(166,166,231,0.44) 100%);">
<div class="txt">商户总余额</div>
<div class="num">{{StatisticsInfo.totalBalance }}</div>
<div class="txt1">已提现金额{{ StatisticsInfo.withdrawn }}</div>
<img src="https://lxnapi.ccttiot.com/bike/img/static/uy7fzOouY8czRqSuh76D" alt=""
style="width: 6.42rem;height: 7rem;">
</div>
<div class="card1" style="background: linear-gradient( 270deg, #64B6A7 0%, rgba(100,182,167,0.44) 100%);">
<div class="txt">运营区数</div>
<div class="num">{{StatisticsInfo.areaCount }}</div>
<div class="txt1">已提现金额{{StatisticsInfo.otalOrderCount }}</div>
<img src="https://lxnapi.ccttiot.com/bike/img/static/uErTaNSlejRXjjzHAdym" alt="">
</div>
<div class="card1" style="background: linear-gradient( 270deg, #60ADFD 0%, rgba(148,198,250,0.5) 100%), #FFFFFF;">
<div class="txt">车辆总数</div>
<div class="num">{{StatisticsInfo.vehicleVo.allNum }}</div>
<div class="txt1">车辆型号{{StatisticsInfo.modelCount }}</div>
<img src="https://lxnapi.ccttiot.com/bike/img/static/uTBhrhUajBERKs81lJSe" alt=""
style="width: 7.33rem;height: 6.08rem;">
</div>
<div class="card1"
style="background: linear-gradient( 270deg, #FFB2B2 0%, rgba(255,178,178,0.36) 100%), #FFFFFF;">
<div class="txt">用户总数</div>
<div class="num">{{StatisticsInfo.userCount }}</div>
<div class="txt1">今日新增{{StatisticsInfo.todayUserCount }}</div>
<img src="https://lxnapi.ccttiot.com/bike/img/static/uyqanVA0Qi2ZWg0cNmwg" alt=""
style="width: 7.33rem;height: 7.42rem;">
</div>
</div>
<div class="info_li" style="margin-top: 1.25rem;">
<div class="card2">
<div class="txt">今日订单数</div>
<div class="num">{{StatisticsInfo.todayOrderCount }}</div>
<div class="txt1">总订单数{{StatisticsInfo.totalOrderCount }}</div>
<img src="https://lxnapi.ccttiot.com/bike/img/static/uNs2VyDSLLmF11ydeaFN" alt="">
</div>
<div class="card2">
<div class="txt">今日订单金额</div>
<div class="num">{{StatisticsInfo.todayOrderFee }}</div>
<div class="txt1">订单总金额{{StatisticsInfo.totalOrderFee }}</div>
<img src="https://lxnapi.ccttiot.com/bike/img/static/uxbM4kTP9Jdzi4suo83W" alt="">
</div>
<div class="card2">
<div class="txt">今日退款金额</div>
<div class="num">{{StatisticsInfo.todayRefundFee }}</div>
<div class="txt1">总退款金额{{StatisticsInfo.totalRefundFee }}</div>
<img src="https://lxnapi.ccttiot.com/bike/img/static/uwJ6enKaUs6qMMXC7xEt" alt="">
</div>
<div class="card2">
<div class="txt">待付款订单金额</div>
<div class="num">{{StatisticsInfo.unpaidOrderFee }}</div>
<div class="txt1">待付款订单数{{StatisticsInfo.unpaidOrderCount }}</div>
<img src="https://lxnapi.ccttiot.com/bike/img/static/un9hBy1mNXjAsRnrSt14" alt="">
</div>
<div class="card2">
<div class="txt">待审核还车押金扣款</div>
<div class="num">{{StatisticsInfo.returnOrderDeductFee }}</div>
<div class="txt1">还车待审核订单数:{{StatisticsInfo.returnOrderCount }}</div>
<img src="https://lxnapi.ccttiot.com/bike/img/static/uBV6yOFFWUvTValGnmfw" alt="">
</div>
</div>
<div class="cont_box">
<div class="echart_box">
<div class="tit"> 营收统计</div>
<div class="echarts_cont">
<div id="myChart" style="width: 100%;height: 100%;"></div>
</div>
</div>
<div class="right_box">
<div class="right_box_top">
<div class="info_li">
<div class="card2">
<div class="txt">今日支付手续费</div>
<div class="num">{{StatisticsInfo.todayHandlingFee }}</div>
<div class="txt1">总支付手续费{{StatisticsInfo.totalHandlingFee }}</div>
<img src="https://lxnapi.ccttiot.com/bike/img/static/uNs2VyDSLLmF11ydeaFN" alt="">
</div>
<div class="card2">
<div class="txt">今日服务费</div>
<div class="num">{{StatisticsInfo.todayServiceFee }}</div>
<div class="txt1">总服务费{{StatisticsInfo.totalServiceFee }}</div>
<img src="https://lxnapi.ccttiot.com/bike/img/static/uxbM4kTP9Jdzi4suo83W" alt="">
</div>
</div>
</div>
<div class="car_info_box">
<div class="tit">车辆统计</div>
<div class="info_li">
<div class="info_cont">
<div class="info_cont_top">
<img src="https://lxnapi.ccttiot.com/bike/img/static/uUSztvtXXdRtxHzQVWgH" alt="">投放中
</div>
<div class="info_cont_txt">
{{ StatisticsInfo.vehicleVo.inOperation }}
</div>
</div>
<div class="info_cont">
<div class="info_cont_top">
<img src="https://lxnapi.ccttiot.com/bike/img/static/uUAe2gRT4blxwsIKs0id" alt="">骑行中
</div>
<div class="info_cont_txt">
{{ StatisticsInfo.vehicleVo.ridingNum }}
</div>
</div>
<div class="info_cont">
<div class="info_cont_top">
<img src="https://lxnapi.ccttiot.com/bike/img/static/uAoVo6LxxZ4PthTHZtiH" alt="">仓库中
</div>
<div class="info_cont_txt">
{{ StatisticsInfo.vehicleVo.inStashNum }}
</div>
</div>
</div>
<div class="info_li">
<div class="info_cont">
<div class="info_cont_top">
<img src="https://lxnapi.ccttiot.com/bike/img/static/uxx6Ajx0ne7Ho6LH8Bfg" alt="">禁用中
</div>
<div class="info_cont_txt">
{{ StatisticsInfo.vehicleVo.disabledNum }}
</div>
</div>
<div class="info_cont">
<div class="info_cont_top">
<img src="https://lxnapi.ccttiot.com/bike/img/static/uUgJO8VOMNI48H7ab5yU" alt="">调度中
</div>
<div class="info_cont_txt">
{{ StatisticsInfo.vehicleVo.dispatchNum }}
</div>
</div>
<div class="info_cont">
<div class="info_cont_top">
<img src="https://lxnapi.ccttiot.com/bike/img/static/uAKVUuosyqvFJx5Ynjbp" alt="">离线
</div>
<div class="info_cont_txt">
{{ StatisticsInfo.vehicleVo.offlineNum }}
</div>
</div>
</div>
</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>
<div class="cont_li_bot">
{{ StatisticsInfo.operationVo.failedUnlockCount }}
</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.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 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>
</div>
</div>
</div>
</div>
</template>
<script>
import { getBalance } from '@/api/system/dept'
import { getAdminStatistics } from '@/api/system/area'
import * as echarts from 'echarts';
export default {
name: "Index",
data() {
return {
//
version: "3.8.7",
balance: null,
userName: null
StatisticsInfo: {},
chartInstance:null
};
},
created() {
this.userName = this.$store.state.user.name;
getBalance().then(response => {
this.balance = response.data;
});
},
mounted() {
this.AdminStatistics();
window.addEventListener('resize', this.handleResize);
},
beforeDestroy() {
window.removeEventListener('resize', this.handleResize);
if (this.chartInstance) {
this.chartInstance.dispose();
}
},
methods: {
goTarget(href) {
window.open(href, "_blank");
AdminStatistics() {
getAdminStatistics().then(response => {
this.StatisticsInfo = response.data;
this.StatisticsInfo.incomeVoList.reverse();
setTimeout(() => {
this.drawLine()
}, 1000);
console.log("areaOptions", this.areaOptions);
});
},
drawLine() {
this.chartInstance = echarts.init(document.getElementById("myChart"));
//
this.chartInstance.setOption({
grid: {
left: 60,
right: 50,
top: 10,
bottom: 20,
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['订单金额', '订单']
},
xAxis: {
type: 'category',
boundaryGap: false,
data: this.StatisticsInfo.incomeVoList.map(item => item.day)
},
yAxis: [
{
type: 'value',
name: '订单金额',
position: 'left',
axisLine: {
lineStyle: {
color: '#5470C6'
}
},
axisLabel: {
formatter: '{value} 元'
}
},
{
type: 'value',
name: '订单',
position: 'right',
axisLine: {
lineStyle: {
color: '#91CC75'
}
},
axisLabel: {
formatter: '{value}'
}
}
],
series: [
{
name: '订单金额',
type: 'line',
data: this.StatisticsInfo.incomeVoList.map(item => item.orderFee),
yAxisIndex: 0,
itemStyle: {
color: '#5470C6'
},
smooth: true
},
{
name: '订单',
type: 'line',
data: this.StatisticsInfo.incomeVoList.map(item => item.orderNum),
yAxisIndex: 1,
itemStyle: {
color: '#91CC75'
},
smooth: true
}
]
});
}
}
};
</script>
<style scoped lang="scss">
.home {
blockquote {
padding: 10px 20px;
margin: 0 0 20px;
font-size: 17.5px;
border-left: 5px solid #eee;
}
hr {
margin-top: 20px;
margin-bottom: 20px;
border: 0;
border-top: 1px solid #eee;
}
.col-item {
margin-bottom: 20px;
.page {
padding: 1.92rem;
background: #F7F8FA;
width: 100%;
// height: 100vh;
display: flex;
flex-direction: column;
.cont_box {
width: 100%;
margin-top: 1.33rem;
display: flex;
flex-wrap: nowrap;
.echart_box {
padding: 1.08rem;
margin-right: 1.17rem;
width: 59%;
height: 31.83rem;
background: #FFFFFF;
border-radius: 0rem 0rem 0rem 0rem;
.echarts_cont {
width: 100%;
height: 27.17rem;
/* 可以设置为百分比或视口单位 */
}
.tit {
font-weight: 500;
font-size: 1.33rem;
color: #1D252F;
}
}
.right_box {
display: flex;
width: 39%;
flex-wrap: wrap;
.right_box_top {
width: 100%;
.info_li {
width: 100%;
display: flex;
flex-wrap: nowrap;
// justify-content: space-between;
height: 10.42rem;
.card2:last-child {
margin-right: 0;
}
.card2 {
margin-right: 3%;
padding: 1.42rem 1.75rem 1.33rem;
position: relative;
width: 49%;
height: 10.42rem;
background: #fff;
border-radius: 0rem 0rem 0rem 0rem;
.txt {
font-weight: 500;
font-size: 1.33rem;
color: #1D252F;
}
.num {
margin-top: 1.08rem;
margin-bottom: 0.44rem;
font-weight: 500;
font-size: 2rem;
color: #1D252F;
}
.txt1 {
font-size: 1.17rem;
color: #1D252F;
line-height: 1.58rem;
}
img {
position: absolute;
right: 2.75rem;
top: 1.42rem;
width: 4.5rem;
height: 4.5rem;
}
}
}
}
.car_info_box {
margin-top: 1.17rem;
padding: 0.75rem 1.67rem;
width: 100%;
height: 20.25rem;
background: #FFFFFF;
border-radius: 0rem 0rem 0rem 0rem;
.tit {
font-weight: 500;
font-size: 1.33rem;
color: #1D252F;
}
.info_li {
margin-top: 1.25rem;
display: flex;
flex-wrap: nowrap;
width: 100%;
height: 40%;
.info_cont {
width: 33%;
.info_cont_top {
img {
width: 1.33rem;
height: 1.33rem;
margin-right: 0.58rem;
}
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
width: 100%;
font-weight: 500;
font-size: 1.33rem;
color: #757575;
}
.info_cont_txt {
margin-top: 0.33rem;
width: 100%;
text-align: center;
font-weight: 500;
font-size: 2rem;
color: #3D3D3D;
}
}
}
}
}
}
ul {
padding: 0;
margin: 0;
}
.bot_box {
margin-bottom: 2rem;
padding: 1.08rem;
margin-top: 1.33rem;
width: 100%;
height: 12.42rem;
background: #FFFFFF;
border-radius: 0rem 0rem 0rem 0rem;
font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
color: #676a6c;
overflow-x: hidden;
.tit {
width: 100%;
font-weight: 500;
font-size: 1.33rem;
color: #1D252F;
}
ul {
list-style-type: none;
}
.cont_box {
width: 100%;
height: 5.67rem;
h4 {
margin-top: 0px;
}
.cont_li {
width: 16.6%;
height: 5.67rem;
border-right: 1px solid #D8D8D8;
h2 {
margin-top: 10px;
font-size: 26px;
font-weight: 100;
}
.cont_li_top {
width: 100%;
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
p {
margin-top: 10px;
img {
margin-right: 0.83rem;
width: 1.29rem;
height: 1.13rem;
}
b {
font-weight: 700;
font-weight: 700;
font-size: 1.33rem;
color: #3D3D3D;
}
.cont_li_bot {
margin-top: 1.17rem;
width: 100%;
text-align: center;
font-weight: 500;
font-size: 1.67rem;
color: #3D3D3D;
}
}
}
}
.update-log {
ol {
display: block;
list-style-type: decimal;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0;
margin-inline-end: 0;
padding-inline-start: 40px;
.info_li {
display: flex;
flex-wrap: nowrap;
// justify-content: space-between;
height: 10.42rem;
.card2 {
margin-right: 1%;
padding: 1.42rem 1.75rem 1.33rem;
position: relative;
width: 20%;
height: 10.42rem;
background: #fff;
border-radius: 0rem 0rem 0rem 0rem;
.txt {
font-weight: 500;
font-size: 1.33rem;
color: #1D252F;
}
.num {
margin-top: 1.08rem;
margin-bottom: 0.44rem;
font-weight: 500;
font-size: 2rem;
color: #1D252F;
}
.txt1 {
font-size: 1.17rem;
color: #1D252F;
line-height: 1.58rem;
}
img {
position: absolute;
right: 2.75rem;
top: 1.42rem;
width: 4.5rem;
height: 4.5rem;
}
}
.card1 {
margin-right: 1%;
padding: 1.42rem 1.75rem 1.33rem;
position: relative;
width: 20%;
height: 10.42rem;
background: linear-gradient(270deg, #60ADFD 0%, rgba(148, 198, 250, 0.5) 100%);
border-radius: 0rem 0rem 0rem 0rem;
.txt {
font-weight: 500;
font-size: 1.33rem;
color: #FFFFFF;
}
.num {
margin-top: 1.08rem;
margin-bottom: 0.44rem;
font-weight: 500;
font-size: 2rem;
color: #FFFFFF;
}
.txt1 {
font-size: 1.17rem;
color: #FFFFFF;
line-height: 1.58rem;
}
img {
position: absolute;
right: 0;
bottom: 0;
width: 7rem;
height: 7.25rem;
}
}
}
}
</style>

View File

@ -60,7 +60,7 @@
<!-- 代付款订单数 -->
<div class="top_cont">
<div class="cont_left">
<div class="cont_left_top">付款订单数</div>
<div class="cont_left_top">付款订单数</div>
<div class="cont_left_cent">{{StatisticsInfo.unpaidOrderCount}}</div>
<div class="cont_left_bot">待付款订单金额{{StatisticsInfo.unpaidOrderFee}}</div>
</div>
@ -117,12 +117,14 @@
<div class="echart_box">
<div class="tit"> 营收统计</div>
<div class="echarts_cont">
<div id="myChart" style="width: 65rem;height: 19.17rem;"></div>
<div id="myChart" style="width: 100%;height: 19.17rem;"></div>
</div>
</div>
<div class="car_info_box">
<div class="tit">车辆统计</div>
<div class="info_li">
<!-- <div class="tit">车辆统计</div> -->
<div class="tit" style="margin-top: 1rem;font-weight: 700;">仓库中的车辆: {{StatisticsInfo.vehicleVo.inStashNum}}</div>
<div class="tit" style="margin-top: 1.5rem;font-weight: 700;">投放中{{StatisticsInfo.vehicleVo.inOperation}} <span style="color: #ccc;">(含离线 {{StatisticsInfo.vehicleVo.offlineNum}})</span></div>
<!-- <div class="info_li">
<div class="info_cont">
<div class="info_cont_top">
<img src="https://lxnapi.ccttiot.com/bike/img/static/uwDG51FnJQGuEXLn2SYQ" alt="" style="height: 1rem;">车辆总数
@ -147,7 +149,7 @@
{{StatisticsInfo.vehicleVo.disabledNum}}
</div>
</div>
</div>
</div> -->
<div class="info_li">
<div class="info_cont">
<div class="info_cont_top">
@ -185,18 +187,18 @@
</div>
<div class="info_cont">
<div class="info_cont_top">
<img src="https://lxnapi.ccttiot.com/bike/img/static/uAKVUuosyqvFJx5Ynjbp" alt="">离线
<img src="https://lxnapi.ccttiot.com/bike/img/static/uxx6Ajx0ne7Ho6LH8Bfg" alt="">禁用中
</div>
<div class="info_cont_txt">
{{StatisticsInfo.vehicleVo.offlineNum}}
{{StatisticsInfo.vehicleVo.disabledNum}}
</div>
</div>
<div class="info_cont">
<div class="info_cont_top">
<img src="https://lxnapi.ccttiot.com/bike/img/static/uAoVo6LxxZ4PthTHZtiH" alt="">仓库中
<img src="https://lxnapi.ccttiot.com/bike/img/static/uwDG51FnJQGuEXLn2SYQ" alt="" style="height: 1rem;">车辆总数
</div>
<div class="info_cont_txt">
{{StatisticsInfo.vehicleVo.inStashNum}}
{{StatisticsInfo.vehicleVo.allNum}}
</div>
</div>
</div>
@ -307,7 +309,7 @@ export default {
this.StatisticsInfo.incomeVoList.reverse();
setTimeout(() => {
this.drawLine()
}, 800);
}, 1000);
console.log("areaOptions", this.areaOptions);
});
@ -317,7 +319,7 @@ export default {
//
myChart.setOption({
grid: {
left: 50,
left: 60,
right: 50,
top: 10,
bottom: 20,
@ -344,7 +346,7 @@ export default {
}
},
axisLabel: {
formatter: '{value} K'
formatter: '{value} '
}
},
{
@ -487,7 +489,9 @@ export default {
height: 23.17rem;
background: #FFFFFF;
border-radius: 0rem 0rem 0rem 0rem;
.echarts_cont{
width: 100%;
}
.tit {
font-weight: 500;
font-size: 1.33rem;
@ -510,14 +514,15 @@ export default {
}
.info_li {
margin-top: 1.25rem;
display: flex;
flex-wrap: nowrap;
width: 100%;
// height: 30%;
.info_cont {
width: 33%;
margin-top: 1rem;
.info_cont_top {
img {
width: 1.33rem;
@ -527,7 +532,7 @@ export default {
display: flex;
flex-wrap: nowrap;
justify-content: center;
// justify-content: center;
align-items: center;
width: 100%;
font-weight: 500;
@ -536,9 +541,9 @@ export default {
}
.info_cont_txt {
margin-top: 0.33rem;
margin-top: 0.53rem;
width: 100%;
text-align: center;
// text-align: center;
font-weight: 500;
font-size: 2rem;
color: #3D3D3D;
@ -692,13 +697,14 @@ export default {
.tops_right_bot_cont_left {
.tit {
font-weight: 500;
font-weight: 700;
font-size: 1.33rem;
color: #1D252F;
}
.txt {
font-weight: 500;
margin-top: 0.5rem;
font-weight:500;
font-size: 2rem;
color: #1D2129;
}