chuangte/bick_back
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

运营报表

Browse Source
This commit is contained in:
Sliverber 2024-07-19 18:03:18 +08:00
parent 51a68735bd
commit 510f071599
4 changed files with 686 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.env.development
View File

@ -6,7 +6,7 @@ ENV = 'development'
# 共享电动车管理系统/开发环境
# VUE_APP_BASE_API = 'https://dche.ccttiot.com/prod-api'
VUE_APP_BASE_API = 'http://localhost:8080'
VUE_APP_BASE_API = 'http://192.168.2.189:8080'
# 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true

7
src/api/system/area.js
View File

@ -16,7 +16,12 @@ export function getArea(areaId) {
method: 'get'
})
}
export function getStatistics(areaId) {
return request({
url: '/index/statistics?areaId=' + areaId,
method: 'get'
})
}
// 新增运营区
export function addArea(data) {
return request({

2
src/main.js
View File

@ -4,6 +4,8 @@ import Cookies from 'js-cookie'
import Element from 'element-ui'
import './assets/styles/element-variables.scss'
// import * as echarts from 'echarts'
// Vue.prototype.$echarts = echarts;
import '@/assets/styles/index.scss' // global css
import '@/assets/styles/ruoyi.scss' // ruoyi css

738
src/views/statistics/index.vue
View File

@ -1,97 +1,713 @@
<template>
<div class="app-container home">
1111111111111111111
<div class="page">
<div class="area-options">
<span style="margin-right: .625rem;">切换运营区</span>
<el-select v-model="areaId" placeholder="请选择运营区" clearable @change="handleAreaChange" size="medium">
<el-option v-for="item in areaOptions" :key="item.areaId" :label="item.areaName"
:value="item.areaId"></el-option>
</el-select>
</div>
<div class="top_box">
<div class="tops_left">
<div class="left_top">
<div class="left_top_left">
<div class="txt">余额</div>
<div class="txt1" style="margin-top: 1.33rem;">{{StatisticsInfo.balance}}</div>
</div>
<div class="left_top_right">
<img src="https://lxnapi.ccttiot.com/bike/img/static/u97bA2ZACCPZRdxICy1g" alt="">
</div>
</div>
<div class="txt_li" style="margin-top: 0.33rem;">已提现：{{StatisticsInfo.withdraw}}</div>
<div class="txt_li" style="margin-top: 1.17rem;">待结算金额：{{StatisticsInfo.settlementAmount}}</div>
<div class="bot_btn">提现</div>
</div>
<div class="tops_right">
<div class="tops_right_top">
<!-- 应收 -->
<div class="top_cont">
<div class="cont_left">
<div class="cont_left_top">今日营收</div>
<div class="cont_left_cent">{{StatisticsInfo.todayIncome}}</div>
<div class="cont_left_bot">总营收：{{StatisticsInfo.totalIncome}}</div>
</div>
<div class="cont_right">
<img src=" https://lxnapi.ccttiot.com/bike/img/static/usXmq54bfhrZiw7uPNlq" alt="" style="width: 4.5rem;height: 4.5rem;">
</div>
</div>
<!-- 订单数 -->
<div class="top_cont">
<div class="cont_left">
<div class="cont_left_top">今日订单数</div>
<div class="cont_left_cent">{{StatisticsInfo.todayOrderCount}}</div>
<div class="cont_left_bot">总订单数：{{StatisticsInfo.totalOrderCount}}</div>
</div>
<div class="cont_right">
<img src="https://lxnapi.ccttiot.com/bike/img/static/ut2C20sHoYYfYRPeAA98" alt="">
</div>
</div>
<!-- 今日订单金额 -->
<div class="top_cont">
<div class="cont_left">
<div class="cont_left_top">今日订单金额</div>
<div class="cont_left_cent">{{StatisticsInfo.todayOrderFee}}</div>
<div class="cont_left_bot">总订单金额：{{StatisticsInfo.totalOrderFee}}</div>
</div>
<div class="cont_right">
<img src="https://lxnapi.ccttiot.com/bike/img/static/uXBNkOdtF7dtD3w9XGEi" alt="" >
</div>
</div>
<!-- 代付款订单数 -->
<div class="top_cont">
<div class="cont_left">
<div class="cont_left_top">代付款订单数</div>
<div class="cont_left_cent">{{StatisticsInfo.unpaidOrderCount}}</div>
<div class="cont_left_bot">待付款订单金额：{{StatisticsInfo.unpaidOrderFee}}</div>
</div>
<div class="cont_right">
<img src="https://lxnapi.ccttiot.com/bike/img/static/uoHknV3fcQXweSPhfoOA" alt="" style="width: 4.5rem;height:4.5rem;">
</div>
</div>
</div>
<div class="tops_right_bot">
<!-- 还车待审核 -->
<div class="tops_right_bot_cont">
<div class="tops_right_bot_cont_left">
<div class="tit">还车待审核订单</div>
<div class="txt">{{StatisticsInfo.returnOrderCount}}</div>
</div>
<div class="tops_right_bot_cont_right">
<img src="https://lxnapi.ccttiot.com/bike/img/static/u62zTL6AjOvYLENgVHGF" alt="">
</div>
</div>
<!-- 还车待审核 -->
<div class="tops_right_bot_cont">
<div class="tops_right_bot_cont_left">
<div class="tit">骑行中的订单</div>
<div class="txt">{{StatisticsInfo.ridingOrder}}</div>
</div>
<div class="tops_right_bot_cont_right">
<img src="https://lxnapi.ccttiot.com/bike/img/static/uFyc6DIDXlp386JSqAOY" alt="">
</div>
</div>
<!-- 还车待审核 -->
<div class="tops_right_bot_cont">
<div class="tops_right_bot_cont_left">
<div class="tit">今日退款金额</div>
<div class="txt">{{StatisticsInfo.todayRefundFee}}</div>
</div>
<div class="tops_right_bot_cont_right">
<img src="https://lxnapi.ccttiot.com/bike/img/static/uBygxYBgvflSl9847t12" alt="">
</div>
</div>
<!-- 还车待审核 -->
<div class="tops_right_bot_cont">
<div class="tops_right_bot_cont_left">
<div class="tit">待审核故障</div>
<div class="txt">{{StatisticsInfo.faultOrderCount}}</div>
</div>
<div class="tops_right_bot_cont_right">
<img src="https://lxnapi.ccttiot.com/bike/img/static/uiaGJviCF6Bp7j3QVVsU" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="cont_box">
<div class="echart_box">
<div class="tit"> 营收统计</div>
<div class="echarts_cont">
<div id="myChart" style="width: 65rem;height: 19.17rem;"></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/uwDG51FnJQGuEXLn2SYQ" alt="" style="height: 1rem;">车辆总数（辆）
</div>
<div class="info_cont_txt">
{{StatisticsInfo.vehicleVo.allNum}}
</div>
</div>
<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/uxx6Ajx0ne7Ho6LH8Bfg" alt="">禁用中（辆）
</div>
<div class="info_cont_txt">
{{StatisticsInfo.vehicleVo.disabledNum}}
</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/uHMz8QKu5gM27BvYmwqS" alt="">待租（辆）
</div>
<div class="info_cont_txt">
{{StatisticsInfo.vehicleVo.normalNum}}
</div>
</div>
<div class="info_cont">
<div class="info_cont_top">
<img src="https://lxnapi.ccttiot.com/bike/img/static/uXQ75ZwqEV0kErjs9Jvt" alt="">预约中（辆）
</div>
<div class="info_cont_txt">
{{StatisticsInfo.vehicleVo.inAppointmentNum}}
</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>
<div class="info_li">
<div class="info_cont">
<div class="info_cont_top">
<img src="https://lxnapi.ccttiot.com/bike/img/static/uvfMxL94fPWnZ1RTVTyx" alt="">临时锁车（辆）
</div>
<div class="info_cont_txt">
{{StatisticsInfo.vehicleVo.temporarilyLockNum}}
</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 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>
</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/uTicws9tIsCpsqj8buxT" 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/uTicws9tIsCpsqj8buxT" alt="">调度工单
</div>
<div class="cont_li_bot">
{{StatisticsInfo.operationVo.dispatchCount}}
</div>
</div>
<div class="cont_li">
<div class="cont_li_top">
<img src="https://lxnapi.ccttiot.com/bike/img/static/uTicws9tIsCpsqj8buxT" alt="">维修工单
</div>
<div class="cont_li_bot">
{{StatisticsInfo.operationVo.repairCount}}
</div>
</div>
<div class="cont_li">
<div class="cont_li_top">
<img src="https://lxnapi.ccttiot.com/bike/img/static/uTicws9tIsCpsqj8buxT" alt="">已完成换电
</div>
<div class="cont_li_bot">
{{StatisticsInfo.operationVo.completedReplacementOrderCount}}
</div>
</div>
<div class="cont_li">
<div class="cont_li_top">
<img src="https://lxnapi.ccttiot.com/bike/img/static/uTicws9tIsCpsqj8buxT" alt="">已完成调度
</div>
<div class="cont_li_bot">
{{StatisticsInfo.operationVo.completedDispatchCount}}
</div>
</div>
<div class="cont_li">
<div class="cont_li_top">
<img src="https://lxnapi.ccttiot.com/bike/img/static/uTicws9tIsCpsqj8buxT" alt="">已完成维修
</div>
<div class="cont_li_bot">
{{StatisticsInfo.operationVo.completedRepairCount}}
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { getBalance } from '@/api/system/dept'
import { listArea, getStatistics, optionselect as getAreaOptionselect } from '@/api/system/area'
// import { getStatistics } from '@/api/system/area'
import * as echarts from 'echarts';
export default {
name: "Index",
data() {
return {
// 版本号
version: "3.8.7",
balance: null,
userName: null
areaOptions: [],
areaId: 14,
StatisticsInfo: {}
};
},
created() {
this.userName = this.$store.state.user.name;
getBalance().then(response => {
this.balance = response.data;
});
this.getAreaOptions();
},
mounted() {
this.getAreastatistics()
},
methods: {
goTarget(href) {
window.open(href, "_blank");
handleAreaChange(newAreaId) {
console.log('newAreaId:', newAreaId);
this.areaId = newAreaId;
// this.getAreaList(this.areaId);
this.getAreastatistics()
},
getAreaOptions() {
getAreaOptionselect().then(response => {
this.areaOptions = response.data;
console.log("areaOptions", this.areaOptions);
});
},
getAreastatistics() {
getStatistics(this.areaId).then(response => {
this.StatisticsInfo = response.data;
this.StatisticsInfo.incomeVoList.reverse();
setTimeout(() => {
this.drawLine()
}, 800);
console.log("areaOptions", this.areaOptions);
});
},
drawLine() {
let myChart = echarts.init(document.getElementById("myChart"));
// 设置图表的配置项和数据
myChart.setOption({
grid: {
left: 50,
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} K'
}
},
{
type: 'value',
name: '订单',
position: 'right',
axisLine: {
lineStyle: {
color: '#91CC75'
}
},
axisLabel: {
formatter: '{value}'
}
}
],
series: [
{
name: '营收',
type: 'line',
data:this.StatisticsInfo.incomeVoList.map(item => item.income),
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;
.area-options {
width: 100%;
font-weight: 700;
font-size: 1.5rem;
color: #3D3D3D;
display: flex;
flex-direction: row;
margin-bottom: 1rem;
}
ul {
padding: 0;
margin: 0;
::v-deep .el-select .el-input__inner {
font-size: 1.2rem; // 调整此处以修改文字大小
}
font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
color: #676a6c;
overflow-x: hidden;
ul {
list-style-type: none;
::v-deep .el-option {
font-size: 1.2rem; // 调整此处以修改下拉选项的文字大小
}
h4 {
margin-top: 0px;
}
.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;
h2 {
margin-top: 10px;
font-size: 26px;
font-weight: 100;
}
.tit {
width: 100%;
font-weight: 500;
font-size: 1.33rem;
color: #1D252F;
}
p {
margin-top: 10px;
.cont_box {
width: 100%;
height: 5.67rem;
b {
font-weight: 700;
.cont_li {
width: 16.6%;
height: 5.67rem;
border-right: 1px solid #D8D8D8;
.cont_li_top {
width: 100%;
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
img {
margin-right: 0.83rem;
width: 1.29rem;
height: 1.13rem;
}
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;
.cont_box {
width: 100%;
margin-top: 1.33rem;
display: flex;
flex-wrap: nowrap;
.echart_box {
padding: 1.08rem;
margin-right: 1.17rem;
width: 60%;
height: 23.17rem;
background: #FFFFFF;
border-radius: 0rem 0rem 0rem 0rem;
.tit {
font-weight: 500;
font-size: 1.33rem;
color: #1D252F;
}
}
.car_info_box {
padding: 0.75rem 1.67rem;
width: 39%;
height: 23.17rem;
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%;
.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;
}
}
}
}
}
.top_box {
display: flex;
flex-direction: row;
justify-content: space-between;
.tops_left {
padding: 1.33rem 2.08rem 1.08rem 1.83rem;
background: #FFFFFF;
margin-right: 1rem;
flex: 1;
display: flex;
max-width: 30rem;
flex-direction: column;
.left_top {
display: flex;
justify-content: space-between;
margin-bottom: 1rem;
.left_top_left {
.txt {
font-weight: 500;
font-size: 1.5rem;
color: #1D252F;
}
.txt1 {
font-weight: 500;
font-size: 2rem;
color: #1D2129;
}
}
.left_top_right {
width: 5.83rem;
height: 6.5rem;
img {
width: 5.83rem;
height: 6.5rem;
}
}
}
.txt_li {
font-weight: 400;
font-size: 1.17rem;
color: #1D2129;
margin-top: 0.5rem;
}
.bot_btn {
margin-top: auto;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 3.33rem;
background: #A6A6E7;
border-radius: 0.42rem;
font-weight: 700;
font-size: 1.33rem;
color: #FFFFFF;
}
}
.tops_right {
display: flex;
flex-direction: column;
flex: 2;
.tops_right_top {
display: flex;
margin-bottom: 1rem;
.top_cont {
display: flex;
justify-content: space-between;
padding: 1.33rem;
background: #FFFFFF;
border-radius: 0.25rem;
flex: 1;
margin-right: 1rem;
&:last-child {
margin-right: 0;
}
.cont_right {
width: 5rem;
height: 5rem;
img {
width: 3.93rem;
height: 4.37rem;
}
}
.cont_left {
display: flex;
flex-direction: column;
justify-content: center;
.cont_left_top {
font-weight: 700;
font-size: 1.33rem;
color: #1D252F;
}
.cont_left_cent {
margin-top: 1.33rem;
font-weight: 700;
font-size: 2rem;
color: #1D2129;
}
.cont_left_bot {
margin-top: 0.5rem;
font-weight: 400;
font-size: 1.17rem;
color: #1D2129;
}
}
}
}
.tops_right_bot {
display: flex;
.tops_right_bot_cont {
display: flex;
justify-content: space-between;
padding: 1.33rem;
background: #FFFFFF;
border-radius: 0.25rem;
flex: 1;
margin-right: 1rem;
&:last-child {
margin-right: 0;
}
.tops_right_bot_cont_left {
.tit {
font-weight: 500;
font-size: 1.33rem;
color: #1D252F;
}
.txt {
font-weight: 500;
font-size: 2rem;
color: #1D2129;
}
}
.tops_right_bot_cont_right {
width: 4.5rem;
height: 4.5rem;
img {
width: 4.5rem;
height: 4.5rem;
}
}
}
}
}
}
}
</style>