qichexitong/car-shop-admin-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

7.25(维修模块

Browse Source
This commit is contained in:
Hong
2024-07-26 18:45:23 +08:00
parent f8c3a58e03
commit 283b8c47ca
5 changed files with 1921 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
src/views/statistics/components/accessoryEcharts.vue Normal file
View File

@@ -0,0 +1,94 @@
<template>
<div>
<el-row :gutter="24">
<el-col :xs="24" :sm="24" :md="24" :lg="24">
<el-card class="box-card2">
<div :id="id" style="width: 100%; height: 350px; padding-top: 25px"></div>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script>
import * as echarts from 'echarts';
import { brokenLineApi } from '@/api/dashboard';
export default {
name: 'accessoryEcharts',
props: ['id', 'title'],
data() {
return {
lineData: [],
};
},
mounted() {
this.inits();
},
methods: {
goTarget(href) {
window.open(href, '_blank');
},
inits() {
brokenLineApi().then((res) => {
// console.log(res, '数据---111');
this.lineData = res;
let myChart = echarts.init(document.getElementById(this.id));
let option = {
title: {
text: this.title,
left: 'center'
},
toolbox: {
feature: {
saveAsImage: {},
},
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: '50%',
data: [
{ value: 1048, name: '北汽EU5' },
{ value: 735, name: '启辰D60' },
{ value: 580, name: '东风E70' },
{ value: 484, name: '别克蔚蓝6' },
{ value: 300, name: '特斯拉' },
{ value: 450, name: '广汽' },
{ value: 900, name: '吉利帝豪' },
{ value: 600, name: 'NAT' },
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)',
}
}
}
]
};
myChart.setOption(option);
myChart.resize({
// width: myChart.getWidth() * 0.5,
// height: myChart.getHeight() * 0.5
});
//建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
window.addEventListener('resize', function () {
myChart.resize();
});
});
},
},
};
</script>
<style scoped lang="scss"></style>

81
src/views/statistics/components/consumeEcharts.vue Normal file
View File

@@ -0,0 +1,81 @@
<template>
<div>
<el-row :gutter="24">
<el-col :xs="24" :sm="24" :md="24" :lg="24">
<el-card class="box-card2">
<div :id="id" style="width: 100%; height: 350px; padding-top: 25px"></div>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script>
import * as echarts from 'echarts';
import { brokenLineApi } from '@/api/dashboard';
export default {
name: 'consumeEcharts',
props: ['id', 'title'],
data() {
return {
lineData: [],
};
},
mounted() {
this.inits();
},
methods: {
goTarget(href) {
window.open(href, '_blank');
},
inits() {
brokenLineApi().then((res) => {
this.lineData = res;
let myChart = echarts.init(document.getElementById(this.id));
let option = {
title: {
text: this.title,
left: 'center'
},
color: ['#37A2FF'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985',
},
},
},
toolbox: {
feature: {
saveAsImage: {},
},
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri',]
},
yAxis: {
type: 'value'
},
series: [
{
data: [200, 150, 130, 120, 110],
type: 'bar',
barWidth: 20 // 设置宽度为类目宽度的50%
}
]
};
myChart.setOption(option);
//建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
window.addEventListener('resize', function () {
myChart.resize();
});
});
},
},
};
</script>
<style scoped lang="scss"></style>

582
src/views/statistics/maintenance/accident.vue Normal file
View File

@@ -0,0 +1,582 @@
<template>
<div class="divBox">
<el-card class="box-card">
<div style="display: flex;align-items: center;">
<div style="margin-left: 12px;">
<el-radio-group v-model="tableFrom.dateLimit" size="small" @change="selectChange(tableFrom.dateLimit)">
<el-radio-button v-for="(itemn, indexn) in fromList.fromTxt" :key="indexn" :label="itemn.val">{{
itemn.text
}}</el-radio-button>
</el-radio-group>
</div>
<div style="margin-left: 12px;">
<el-date-picker v-model="time1" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期"
:default-time="['00:00:00', '23:59:59']" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss"
@change="timeChange">
</el-date-picker>
</div>
</div>
<!-- 四 -->
<el-row :gutter="20">
<el-col :span="6">
<div class="grid-content bg-purple">
<div class="price"> ￥{{ frequency.currentData }}元</div>
<div class="title">总营业额</div>
<div class="percentage">
<div :class="[frequency.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i :class="[frequency.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ frequency.yearOnYear }}%
</p>
同比
</div>
<div :class="[frequency.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i :class="[frequency.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ frequency.linkRelativeRatio }}%
</p>
环比
</div>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="grid-content bg-purple">
<div class="price"> ￥{{ money.currentData }}元</div>
<div class="title">总成本</div>
<div class="percentage">
<div :class="[money.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i :class="[money.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ money.yearOnYear }}%
</p>
同比
</div>
<div :class="[money.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i :class="[money.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ money.linkRelativeRatio }}%
</p>
环比
</div>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="grid-content bg-purple">
<div class="price"> ￥{{ accessory.currentData }}元</div>
<div class="title">总利润</div>
<div class="percentage">
<div :class="[accessory.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i :class="[accessory.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ accessory.yearOnYear }}%
</p>
同比
</div>
<div :class="[accessory.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i :class="[accessory.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ accessory.linkRelativeRatio }}%
</p>
环比
</div>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="grid-content bg-purple">
<div class="price"> ￥{{ profit.currentData }}元</div>
<div class="title">总营业额</div>
<div class="percentage">
<div :class="[profit.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i :class="[profit.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ profit.yearOnYear }}%
</p>
同比
</div>
<div :class="[profit.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i :class="[profit.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ profit.linkRelativeRatio }}%
</p>
环比
</div>
</div>
</div>
</el-col>
</el-row>
<!-- 四 -->
<el-row :gutter="20">
<el-col :span="6">
<AccessoryEcharts :id="'pie1'" :title="'进店台次分车型占比'"></AccessoryEcharts>
</el-col>
<el-col :span="6">
<AccessoryEcharts :id="'pie2'" :title="'进店台次分所属公司占比'"></AccessoryEcharts>
</el-col>
<el-col :span="6">
<AccessoryEcharts :id="'pie3'" :title="'维保产值按车型占比'"></AccessoryEcharts>
</el-col>
<el-col :span="6">
<AccessoryEcharts :id="'pie4'" :title="'维保产值按所属公司占比'"></AccessoryEcharts>
</el-col>
</el-row>
<!-- 三 -->
<el-row :gutter="20">
<el-col :span="8">
<div class="grid-content bg-purple">
<div class="price"> ￥34500元</div>
<div class="title flex space-between">
<div>维保单车产值</div>
<div>平均单车</div>
</div>
<div class="percentage">
<div class="percentage-s">
<p>
<i class="el-icon-top" style="font-weight: 700;"></i>
34.5%
</p>
同比
</div>
<div class="percentage-j">
<p>
<i class="el-icon-bottom" style="font-weight: 700;"></i>
34.5%
</p>
环比
</div>
</div>
</div>
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple">
<div class="price"> ￥34500元</div>
<div class="title flex space-between">
<div>维保单车产值</div>
<div>按照车型分</div>
</div>
<div class="percentage">
<div class="percentage-s">
<p>
<i class="el-icon-top" style="font-weight: 700;"></i>
34.5%
</p>
同比
</div>
<div class="percentage-j">
<p>
<i class="el-icon-bottom" style="font-weight: 700;"></i>
34.5%
</p>
环比
</div>
</div>
</div>
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple">
<div class="price"> ￥34500元</div>
<div class="title flex space-between">
<div>维保单车产值</div>
<div>按照所属公司分</div>
</div>
<div class="percentage">
<div class="percentage-s">
<p>
<i class="el-icon-top" style="font-weight: 700;"></i>
34.5%
</p>
同比
</div>
<div class="percentage-j">
<p>
<i class="el-icon-bottom" style="font-weight: 700;"></i>
34.5%
</p>
环比
</div>
</div>
</div>
</el-col>
</el-row>
<!-- 二 -->
<el-row :gutter="20">
<el-col :span="12">
<ConsumeEcharts :id="'pie5'" :title="'维保产值TOP5车型'"></ConsumeEcharts>
</el-col>
<el-col :span="12">
<ConsumeEcharts :id="'pie6'" :title="'维保产值TOP5公司'"></ConsumeEcharts>
</el-col>
</el-row>
<!-- 二 -->
<el-row :gutter="20">
<el-col :span="12">
<AccessoryEcharts :id="'pie7'" :title="'维保成本按车型占比'"></AccessoryEcharts>
</el-col>
<el-col :span="12">
<AccessoryEcharts :id="'pie8'" :title="'维保成本按所属公司占比'"></AccessoryEcharts>
</el-col>
</el-row>
<!-- 三 -->
<el-row :gutter="20">
<el-col :span="8">
<div class="grid-content bg-purple">
<div class="price"> ￥34500元</div>
<div class="title flex space-between">
<div>维保单车成本</div>
<div>平均单车</div>
</div>
<div class="percentage">
<div class="percentage-s">
<p>
<i class="el-icon-top" style="font-weight: 700;"></i>
34.5%
</p>
同比
</div>
<div class="percentage-j">
<p>
<i class="el-icon-bottom" style="font-weight: 700;"></i>
34.5%
</p>
环比
</div>
</div>
</div>
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple">
<div class="price"> ￥34500元</div>
<div class="title flex space-between">
<div>维保单车成本</div>
<div>按照车型分</div>
</div>
<div class="percentage">
<div class="percentage-s">
<p>
<i class="el-icon-top" style="font-weight: 700;"></i>
34.5%
</p>
同比
</div>
<div class="percentage-j">
<p>
<i class="el-icon-bottom" style="font-weight: 700;"></i>
34.5%
</p>
环比
</div>
</div>
</div>
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple">
<div class="price"> ￥34500元</div>
<div class="title flex space-between">
<div>维保单车成本</div>
<div>按照所属公司分</div>
</div>
<div class="percentage">
<div class="percentage-s">
<p>
<i class="el-icon-top" style="font-weight: 700;"></i>
34.5%
</p>
同比
</div>
<div class="percentage-j">
<p>
<i class="el-icon-bottom" style="font-weight: 700;"></i>
34.5%
</p>
环比
</div>
</div>
</div>
</el-col>
</el-row>
<!-- 二 -->
<el-row :gutter="20">
<el-col :span="12">
<ConsumeEcharts :id="'pie9'" :title="'维保成本TOP10'"></ConsumeEcharts>
</el-col>
<el-col :span="12">
<ConsumeEcharts :id="'pie10'" :title="'维保成本配件使用数量TOP10'"></ConsumeEcharts>
</el-col>
</el-row>
<!-- 二 -->
<el-row :gutter="20">
<el-col :span="12">
<AccessoryEcharts :id="'pie11'" :title="'维保利润按车型占比'"></AccessoryEcharts>
</el-col>
<el-col :span="12">
<AccessoryEcharts :id="'pie12'" :title="'维保利润按所属公司占比'"></AccessoryEcharts>
</el-col>
</el-row>
<!-- 三 -->
<el-row :gutter="20">
<el-col :span="8">
<div class="grid-content bg-purple">
<div class="price"> ￥34500元</div>
<div class="title flex space-between">
<div>维保单车利润</div>
<div>平均单车</div>
</div>
<div class="percentage">
<div class="percentage-s">
<p>
<i class="el-icon-top" style="font-weight: 700;"></i>
34.5%
</p>
同比
</div>
<div class="percentage-j">
<p>
<i class="el-icon-bottom" style="font-weight: 700;"></i>
34.5%
</p>
环比
</div>
</div>
</div>
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple">
<div class="price"> ￥34500元</div>
<div class="title flex space-between">
<div>维保单车利润</div>
<div>按照车型分</div>
</div>
<div class="percentage">
<div class="percentage-s">
<p>
<i class="el-icon-top" style="font-weight: 700;"></i>
34.5%
</p>
同比
</div>
<div class="percentage-j">
<p>
<i class="el-icon-bottom" style="font-weight: 700;"></i>
34.5%
</p>
环比
</div>
</div>
</div>
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple">
<div class="price"> ￥34500元</div>
<div class="title flex space-between">
<div>维保单车利润</div>
<div>按照所属公司分</div>
</div>
<div class="percentage">
<div class="percentage-s">
<p>
<i class="el-icon-top" style="font-weight: 700;"></i>
34.5%
</p>
同比
</div>
<div class="percentage-j">
<p>
<i class="el-icon-bottom" style="font-weight: 700;"></i>
34.5%
</p>
环比
</div>
</div>
</div>
</el-col>
</el-row>
<!-- 二 -->
<el-row :gutter="20">
<el-col :span="12">
<ConsumeEcharts :id="'pie13'" :title="'维保利润TOP5车型'"></ConsumeEcharts>
</el-col>
<el-col :span="12">
<ConsumeEcharts :id="'pie14'" :title="'维保利润TOP5公司'"></ConsumeEcharts>
</el-col>
</el-row>
</el-card>
</div>
</template>
<script>
import { merchantListApi } from "@/api/merchant"
import { maintenanceAnalysisLattice } from "@/api/statistics.js"
import AccessoryEcharts from '../components/accessoryEcharts';
import ConsumeEcharts from '../components/consumeEcharts';
export default {
name: 'Dashboard',
components: { AccessoryEcharts, ConsumeEcharts },
data() {
return {
//维修店列表
merchantList: [],
loading: false,
fromList: this.$constants.fromList,
time1: [],
tableFrom: {
page: 1,
dateLimit: '',
type:2
},
//进店总台次
frequency: {},
//维保产值
money: {},
//维保成本
accessory: {},
//维保利润
profit: {},
};
},
mounted() {
},
created() {
this.init()
},
methods: {
// 初始化
init() {
this.maintenanceAnalysisLatticeFn()
},
//年月日
selectChange(e) {
// console.log(e);
this.tableFrom.dateLimit = e;
this.timeVal = [];
this.init()
},
//选择确认
merChange(e) {
// console.log(e);
this.tableFrom.merId = e
this.init()
},
//时间选择监听
timeChange(e) {
// console.log(e);
if (e) {
this.tableFrom.dateLimit = e.join(',')
} else {
this.tableFrom.dateLimit = ''
}
this.init()
},
//顶部四个格子
maintenanceAnalysisLatticeFn() {
maintenanceAnalysisLattice(this.tableFrom).then(res => {
//进店总台次
this.frequency = res.frequency
//维保产值
this.money = res.money
//维保成本
this.accessory = res.accessory
//维保利润
this.profit = res.profit
})
}
}
};
</script>
<style scoped lang="scss">
.price {
font-size: 26px;
color: rgb(102, 154, 177);
font-weight: 700;
}
.title {
font-size: 18px;
color: #333333;
margin-top: 14px;
margin-bottom: 6px;
}
.percentage {
background-color: #f5f5f5;
padding: 12px 8px;
display: flex;
justify-content: space-between;
text-align: center;
color: #333333;
font-size: 16px;
.percentage-s {
p {
color: green;
margin-bottom: 4px;
}
}
.percentage-j {
p {
color: red;
margin-bottom: 4px;
}
}
}
.el-row {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
}
.el-col {
border-radius: 4px;
}
.bg-purple-dark {
background: #ffffff;
}
.bg-purple {
background: #f5f5f5;
margin-top: 12px;
}
.bg-purple-light {
background: #ffffff;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
padding: 24px 18px 8px 24px;
border-radius: 12px 12px 12px 12px;
}
.row-bg {
padding: 10px 0;
background-color: #ffffff;
}
.flex {
display: flex;
}
.space-between {
justify-content: space-between
}
</style>

582
src/views/statistics/maintenance/index.vue Normal file
View File

@@ -0,0 +1,582 @@
<template>
<div class="divBox">
<el-card class="box-card">
<div style="display: flex;align-items: center;">
<div style="margin-left: 12px;">
<el-radio-group v-model="tableFrom.dateLimit" size="small" @change="selectChange(tableFrom.dateLimit)">
<el-radio-button v-for="(itemn, indexn) in fromList.fromTxt" :key="indexn" :label="itemn.val">{{
itemn.text
}}</el-radio-button>
</el-radio-group>
</div>
<div style="margin-left: 12px;">
<el-date-picker v-model="time1" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期"
:default-time="['00:00:00', '23:59:59']" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss"
@change="timeChange">
</el-date-picker>
</div>
</div>
<!-- 四 -->
<el-row :gutter="20">
<el-col :span="6">
<div class="grid-content bg-purple">
<div class="price"> ￥{{ frequency.currentData }}元</div>
<div class="title">总营业额</div>
<div class="percentage">
<div :class="[frequency.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i :class="[frequency.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ frequency.yearOnYear }}%
</p>
同比
</div>
<div :class="[frequency.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i :class="[frequency.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ frequency.linkRelativeRatio }}%
</p>
环比
</div>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="grid-content bg-purple">
<div class="price"> ￥{{ money.currentData }}元</div>
<div class="title">总成本</div>
<div class="percentage">
<div :class="[money.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i :class="[money.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ money.yearOnYear }}%
</p>
同比
</div>
<div :class="[money.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i :class="[money.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ money.linkRelativeRatio }}%
</p>
环比
</div>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="grid-content bg-purple">
<div class="price"> ￥{{ accessory.currentData }}元</div>
<div class="title">总利润</div>
<div class="percentage">
<div :class="[accessory.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i :class="[accessory.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ accessory.yearOnYear }}%
</p>
同比
</div>
<div :class="[accessory.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i :class="[accessory.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ accessory.linkRelativeRatio }}%
</p>
环比
</div>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="grid-content bg-purple">
<div class="price"> ￥{{ profit.currentData }}元</div>
<div class="title">总营业额</div>
<div class="percentage">
<div :class="[profit.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i :class="[profit.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ profit.yearOnYear }}%
</p>
同比
</div>
<div :class="[profit.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i :class="[profit.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ profit.linkRelativeRatio }}%
</p>
环比
</div>
</div>
</div>
</el-col>
</el-row>
<!-- 四 -->
<el-row :gutter="20">
<el-col :span="6">
<AccessoryEcharts :id="'pie1'" :title="'进店台次分车型占比'"></AccessoryEcharts>
</el-col>
<el-col :span="6">
<AccessoryEcharts :id="'pie2'" :title="'进店台次分所属公司占比'"></AccessoryEcharts>
</el-col>
<el-col :span="6">
<AccessoryEcharts :id="'pie3'" :title="'维保产值按车型占比'"></AccessoryEcharts>
</el-col>
<el-col :span="6">
<AccessoryEcharts :id="'pie4'" :title="'维保产值按所属公司占比'"></AccessoryEcharts>
</el-col>
</el-row>
<!-- 三 -->
<el-row :gutter="20">
<el-col :span="8">
<div class="grid-content bg-purple">
<div class="price"> ￥34500元</div>
<div class="title flex space-between">
<div>维保单车产值</div>
<div>平均单车</div>
</div>
<div class="percentage">
<div class="percentage-s">
<p>
<i class="el-icon-top" style="font-weight: 700;"></i>
34.5%
</p>
同比
</div>
<div class="percentage-j">
<p>
<i class="el-icon-bottom" style="font-weight: 700;"></i>
34.5%
</p>
环比
</div>
</div>
</div>
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple">
<div class="price"> ￥34500元</div>
<div class="title flex space-between">
<div>维保单车产值</div>
<div>按照车型分</div>
</div>
<div class="percentage">
<div class="percentage-s">
<p>
<i class="el-icon-top" style="font-weight: 700;"></i>
34.5%
</p>
同比
</div>
<div class="percentage-j">
<p>
<i class="el-icon-bottom" style="font-weight: 700;"></i>
34.5%
</p>
环比
</div>
</div>
</div>
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple">
<div class="price"> ￥34500元</div>
<div class="title flex space-between">
<div>维保单车产值</div>
<div>按照所属公司分</div>
</div>
<div class="percentage">
<div class="percentage-s">
<p>
<i class="el-icon-top" style="font-weight: 700;"></i>
34.5%
</p>
同比
</div>
<div class="percentage-j">
<p>
<i class="el-icon-bottom" style="font-weight: 700;"></i>
34.5%
</p>
环比
</div>
</div>
</div>
</el-col>
</el-row>
<!-- 二 -->
<el-row :gutter="20">
<el-col :span="12">
<ConsumeEcharts :id="'pie5'" :title="'维保产值TOP5车型'"></ConsumeEcharts>
</el-col>
<el-col :span="12">
<ConsumeEcharts :id="'pie6'" :title="'维保产值TOP5公司'"></ConsumeEcharts>
</el-col>
</el-row>
<!-- 二 -->
<el-row :gutter="20">
<el-col :span="12">
<AccessoryEcharts :id="'pie7'" :title="'维保成本按车型占比'"></AccessoryEcharts>
</el-col>
<el-col :span="12">
<AccessoryEcharts :id="'pie8'" :title="'维保成本按所属公司占比'"></AccessoryEcharts>
</el-col>
</el-row>
<!-- 三 -->
<el-row :gutter="20">
<el-col :span="8">
<div class="grid-content bg-purple">
<div class="price"> ￥34500元</div>
<div class="title flex space-between">
<div>维保单车成本</div>
<div>平均单车</div>
</div>
<div class="percentage">
<div class="percentage-s">
<p>
<i class="el-icon-top" style="font-weight: 700;"></i>
34.5%
</p>
同比
</div>
<div class="percentage-j">
<p>
<i class="el-icon-bottom" style="font-weight: 700;"></i>
34.5%
</p>
环比
</div>
</div>
</div>
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple">
<div class="price"> ￥34500元</div>
<div class="title flex space-between">
<div>维保单车成本</div>
<div>按照车型分</div>
</div>
<div class="percentage">
<div class="percentage-s">
<p>
<i class="el-icon-top" style="font-weight: 700;"></i>
34.5%
</p>
同比
</div>
<div class="percentage-j">
<p>
<i class="el-icon-bottom" style="font-weight: 700;"></i>
34.5%
</p>
环比
</div>
</div>
</div>
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple">
<div class="price"> ￥34500元</div>
<div class="title flex space-between">
<div>维保单车成本</div>
<div>按照所属公司分</div>
</div>
<div class="percentage">
<div class="percentage-s">
<p>
<i class="el-icon-top" style="font-weight: 700;"></i>
34.5%
</p>
同比
</div>
<div class="percentage-j">
<p>
<i class="el-icon-bottom" style="font-weight: 700;"></i>
34.5%
</p>
环比
</div>
</div>
</div>
</el-col>
</el-row>
<!-- 二 -->
<el-row :gutter="20">
<el-col :span="12">
<ConsumeEcharts :id="'pie9'" :title="'维保成本TOP10'"></ConsumeEcharts>
</el-col>
<el-col :span="12">
<ConsumeEcharts :id="'pie10'" :title="'维保成本配件使用数量TOP10'"></ConsumeEcharts>
</el-col>
</el-row>
<!-- 二 -->
<el-row :gutter="20">
<el-col :span="12">
<AccessoryEcharts :id="'pie11'" :title="'维保利润按车型占比'"></AccessoryEcharts>
</el-col>
<el-col :span="12">
<AccessoryEcharts :id="'pie12'" :title="'维保利润按所属公司占比'"></AccessoryEcharts>
</el-col>
</el-row>
<!-- 三 -->
<el-row :gutter="20">
<el-col :span="8">
<div class="grid-content bg-purple">
<div class="price"> ￥34500元</div>
<div class="title flex space-between">
<div>维保单车利润</div>
<div>平均单车</div>
</div>
<div class="percentage">
<div class="percentage-s">
<p>
<i class="el-icon-top" style="font-weight: 700;"></i>
34.5%
</p>
同比
</div>
<div class="percentage-j">
<p>
<i class="el-icon-bottom" style="font-weight: 700;"></i>
34.5%
</p>
环比
</div>
</div>
</div>
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple">
<div class="price"> ￥34500元</div>
<div class="title flex space-between">
<div>维保单车利润</div>
<div>按照车型分</div>
</div>
<div class="percentage">
<div class="percentage-s">
<p>
<i class="el-icon-top" style="font-weight: 700;"></i>
34.5%
</p>
同比
</div>
<div class="percentage-j">
<p>
<i class="el-icon-bottom" style="font-weight: 700;"></i>
34.5%
</p>
环比
</div>
</div>
</div>
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple">
<div class="price"> ￥34500元</div>
<div class="title flex space-between">
<div>维保单车利润</div>
<div>按照所属公司分</div>
</div>
<div class="percentage">
<div class="percentage-s">
<p>
<i class="el-icon-top" style="font-weight: 700;"></i>
34.5%
</p>
同比
</div>
<div class="percentage-j">
<p>
<i class="el-icon-bottom" style="font-weight: 700;"></i>
34.5%
</p>
环比
</div>
</div>
</div>
</el-col>
</el-row>
<!-- 二 -->
<el-row :gutter="20">
<el-col :span="12">
<ConsumeEcharts :id="'pie13'" :title="'维保利润TOP5车型'"></ConsumeEcharts>
</el-col>
<el-col :span="12">
<ConsumeEcharts :id="'pie14'" :title="'维保利润TOP5公司'"></ConsumeEcharts>
</el-col>
</el-row>
</el-card>
</div>
</template>
<script>
import { merchantListApi } from "@/api/merchant"
import { maintenanceAnalysisLattice } from "@/api/statistics.js"
import AccessoryEcharts from '../components/accessoryEcharts';
import ConsumeEcharts from '../components/consumeEcharts';
export default {
name: 'Dashboard',
components: { AccessoryEcharts, ConsumeEcharts },
data() {
return {
//维修店列表
merchantList: [],
loading: false,
fromList: this.$constants.fromList,
time1: [],
tableFrom: {
page: 1,
dateLimit: '',
type:1
},
//进店总台次
frequency: {},
//维保产值
money: {},
//维保成本
accessory: {},
//维保利润
profit: {},
};
},
mounted() {
},
created() {
this.init()
},
methods: {
// 初始化
init() {
this.maintenanceAnalysisLatticeFn()
},
//年月日
selectChange(e) {
// console.log(e);
this.tableFrom.dateLimit = e;
this.timeVal = [];
this.init()
},
//选择确认
merChange(e) {
// console.log(e);
this.tableFrom.merId = e
this.init()
},
//时间选择监听
timeChange(e) {
// console.log(e);
if (e) {
this.tableFrom.dateLimit = e.join(',')
} else {
this.tableFrom.dateLimit = ''
}
this.init()
},
//顶部四个格子
maintenanceAnalysisLatticeFn() {
maintenanceAnalysisLattice(this.tableFrom).then(res => {
//进店总台次
this.frequency = res.frequency
//维保产值
this.money = res.money
//维保成本
this.accessory = res.accessory
//维保利润
this.profit = res.profit
})
}
}
};
</script>
<style scoped lang="scss">
.price {
font-size: 26px;
color: rgb(102, 154, 177);
font-weight: 700;
}
.title {
font-size: 18px;
color: #333333;
margin-top: 14px;
margin-bottom: 6px;
}
.percentage {
background-color: #f5f5f5;
padding: 12px 8px;
display: flex;
justify-content: space-between;
text-align: center;
color: #333333;
font-size: 16px;
.percentage-s {
p {
color: green;
margin-bottom: 4px;
}
}
.percentage-j {
p {
color: red;
margin-bottom: 4px;
}
}
}
.el-row {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
}
.el-col {
border-radius: 4px;
}
.bg-purple-dark {
background: #ffffff;
}
.bg-purple {
background: #f5f5f5;
margin-top: 12px;
}
.bg-purple-light {
background: #ffffff;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
padding: 24px 18px 8px 24px;
border-radius: 12px 12px 12px 12px;
}
.row-bg {
padding: 10px 0;
background-color: #ffffff;
}
.flex {
display: flex;
}
.space-between {
justify-content: space-between
}
</style>

582
src/views/statistics/maintenance/return_cat.vue Normal file
View File

@@ -0,0 +1,582 @@
<template>
<div class="divBox">
<el-card class="box-card">
<div style="display: flex;align-items: center;">
<div style="margin-left: 12px;">
<el-radio-group v-model="tableFrom.dateLimit" size="small" @change="selectChange(tableFrom.dateLimit)">
<el-radio-button v-for="(itemn, indexn) in fromList.fromTxt" :key="indexn" :label="itemn.val">{{
itemn.text
}}</el-radio-button>
</el-radio-group>
</div>
<div style="margin-left: 12px;">
<el-date-picker v-model="time1" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期"
:default-time="['00:00:00', '23:59:59']" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss"
@change="timeChange">
</el-date-picker>
</div>
</div>
<!-- 四 -->
<el-row :gutter="20">
<el-col :span="6">
<div class="grid-content bg-purple">
<div class="price"> ￥{{ frequency.currentData }}元</div>
<div class="title">总营业额</div>
<div class="percentage">
<div :class="[frequency.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i :class="[frequency.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ frequency.yearOnYear }}%
</p>
同比
</div>
<div :class="[frequency.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i :class="[frequency.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ frequency.linkRelativeRatio }}%
</p>
环比
</div>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="grid-content bg-purple">
<div class="price"> ￥{{ money.currentData }}元</div>
<div class="title">总成本</div>
<div class="percentage">
<div :class="[money.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i :class="[money.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ money.yearOnYear }}%
</p>
同比
</div>
<div :class="[money.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i :class="[money.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ money.linkRelativeRatio }}%
</p>
环比
</div>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="grid-content bg-purple">
<div class="price"> ￥{{ accessory.currentData }}元</div>
<div class="title">总利润</div>
<div class="percentage">
<div :class="[accessory.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i :class="[accessory.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ accessory.yearOnYear }}%
</p>
同比
</div>
<div :class="[accessory.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i :class="[accessory.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ accessory.linkRelativeRatio }}%
</p>
环比
</div>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="grid-content bg-purple">
<div class="price"> ￥{{ profit.currentData }}元</div>
<div class="title">总营业额</div>
<div class="percentage">
<div :class="[profit.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i :class="[profit.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ profit.yearOnYear }}%
</p>
同比
</div>
<div :class="[profit.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i :class="[profit.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ profit.linkRelativeRatio }}%
</p>
环比
</div>
</div>
</div>
</el-col>
</el-row>
<!-- 四 -->
<el-row :gutter="20">
<el-col :span="6">
<AccessoryEcharts :id="'pie1'" :title="'进店台次分车型占比'"></AccessoryEcharts>
</el-col>
<el-col :span="6">
<AccessoryEcharts :id="'pie2'" :title="'进店台次分所属公司占比'"></AccessoryEcharts>
</el-col>
<el-col :span="6">
<AccessoryEcharts :id="'pie3'" :title="'维保产值按车型占比'"></AccessoryEcharts>
</el-col>
<el-col :span="6">
<AccessoryEcharts :id="'pie4'" :title="'维保产值按所属公司占比'"></AccessoryEcharts>
</el-col>
</el-row>
<!-- 三 -->
<el-row :gutter="20">
<el-col :span="8">
<div class="grid-content bg-purple">
<div class="price"> ￥34500元</div>
<div class="title flex space-between">
<div>维保单车产值</div>
<div>平均单车</div>
</div>
<div class="percentage">
<div class="percentage-s">
<p>
<i class="el-icon-top" style="font-weight: 700;"></i>
34.5%
</p>
同比
</div>
<div class="percentage-j">
<p>
<i class="el-icon-bottom" style="font-weight: 700;"></i>
34.5%
</p>
环比
</div>
</div>
</div>
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple">
<div class="price"> ￥34500元</div>
<div class="title flex space-between">
<div>维保单车产值</div>
<div>按照车型分</div>
</div>
<div class="percentage">
<div class="percentage-s">
<p>
<i class="el-icon-top" style="font-weight: 700;"></i>
34.5%
</p>
同比
</div>
<div class="percentage-j">
<p>
<i class="el-icon-bottom" style="font-weight: 700;"></i>
34.5%
</p>
环比
</div>
</div>
</div>
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple">
<div class="price"> ￥34500元</div>
<div class="title flex space-between">
<div>维保单车产值</div>
<div>按照所属公司分</div>
</div>
<div class="percentage">
<div class="percentage-s">
<p>
<i class="el-icon-top" style="font-weight: 700;"></i>
34.5%
</p>
同比
</div>
<div class="percentage-j">
<p>
<i class="el-icon-bottom" style="font-weight: 700;"></i>
34.5%
</p>
环比
</div>
</div>
</div>
</el-col>
</el-row>
<!-- 二 -->
<el-row :gutter="20">
<el-col :span="12">
<ConsumeEcharts :id="'pie5'" :title="'维保产值TOP5车型'"></ConsumeEcharts>
</el-col>
<el-col :span="12">
<ConsumeEcharts :id="'pie6'" :title="'维保产值TOP5公司'"></ConsumeEcharts>
</el-col>
</el-row>
<!-- 二 -->
<el-row :gutter="20">
<el-col :span="12">
<AccessoryEcharts :id="'pie7'" :title="'维保成本按车型占比'"></AccessoryEcharts>
</el-col>
<el-col :span="12">
<AccessoryEcharts :id="'pie8'" :title="'维保成本按所属公司占比'"></AccessoryEcharts>
</el-col>
</el-row>
<!-- 三 -->
<el-row :gutter="20">
<el-col :span="8">
<div class="grid-content bg-purple">
<div class="price"> ￥34500元</div>
<div class="title flex space-between">
<div>维保单车成本</div>
<div>平均单车</div>
</div>
<div class="percentage">
<div class="percentage-s">
<p>
<i class="el-icon-top" style="font-weight: 700;"></i>
34.5%
</p>
同比
</div>
<div class="percentage-j">
<p>
<i class="el-icon-bottom" style="font-weight: 700;"></i>
34.5%
</p>
环比
</div>
</div>
</div>
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple">
<div class="price"> ￥34500元</div>
<div class="title flex space-between">
<div>维保单车成本</div>
<div>按照车型分</div>
</div>
<div class="percentage">
<div class="percentage-s">
<p>
<i class="el-icon-top" style="font-weight: 700;"></i>
34.5%
</p>
同比
</div>
<div class="percentage-j">
<p>
<i class="el-icon-bottom" style="font-weight: 700;"></i>
34.5%
</p>
环比
</div>
</div>
</div>
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple">
<div class="price"> ￥34500元</div>
<div class="title flex space-between">
<div>维保单车成本</div>
<div>按照所属公司分</div>
</div>
<div class="percentage">
<div class="percentage-s">
<p>
<i class="el-icon-top" style="font-weight: 700;"></i>
34.5%
</p>
同比
</div>
<div class="percentage-j">
<p>
<i class="el-icon-bottom" style="font-weight: 700;"></i>
34.5%
</p>
环比
</div>
</div>
</div>
</el-col>
</el-row>
<!-- 二 -->
<el-row :gutter="20">
<el-col :span="12">
<ConsumeEcharts :id="'pie9'" :title="'维保成本TOP10'"></ConsumeEcharts>
</el-col>
<el-col :span="12">
<ConsumeEcharts :id="'pie10'" :title="'维保成本配件使用数量TOP10'"></ConsumeEcharts>
</el-col>
</el-row>
<!-- 二 -->
<el-row :gutter="20">
<el-col :span="12">
<AccessoryEcharts :id="'pie11'" :title="'维保利润按车型占比'"></AccessoryEcharts>
</el-col>
<el-col :span="12">
<AccessoryEcharts :id="'pie12'" :title="'维保利润按所属公司占比'"></AccessoryEcharts>
</el-col>
</el-row>
<!-- 三 -->
<el-row :gutter="20">
<el-col :span="8">
<div class="grid-content bg-purple">
<div class="price"> ￥34500元</div>
<div class="title flex space-between">
<div>维保单车利润</div>
<div>平均单车</div>
</div>
<div class="percentage">
<div class="percentage-s">
<p>
<i class="el-icon-top" style="font-weight: 700;"></i>
34.5%
</p>
同比
</div>
<div class="percentage-j">
<p>
<i class="el-icon-bottom" style="font-weight: 700;"></i>
34.5%
</p>
环比
</div>
</div>
</div>
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple">
<div class="price"> ￥34500元</div>
<div class="title flex space-between">
<div>维保单车利润</div>
<div>按照车型分</div>
</div>
<div class="percentage">
<div class="percentage-s">
<p>
<i class="el-icon-top" style="font-weight: 700;"></i>
34.5%
</p>
同比
</div>
<div class="percentage-j">
<p>
<i class="el-icon-bottom" style="font-weight: 700;"></i>
34.5%
</p>
环比
</div>
</div>
</div>
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple">
<div class="price"> ￥34500元</div>
<div class="title flex space-between">
<div>维保单车利润</div>
<div>按照所属公司分</div>
</div>
<div class="percentage">
<div class="percentage-s">
<p>
<i class="el-icon-top" style="font-weight: 700;"></i>
34.5%
</p>
同比
</div>
<div class="percentage-j">
<p>
<i class="el-icon-bottom" style="font-weight: 700;"></i>
34.5%
</p>
环比
</div>
</div>
</div>
</el-col>
</el-row>
<!-- 二 -->
<el-row :gutter="20">
<el-col :span="12">
<ConsumeEcharts :id="'pie13'" :title="'维保利润TOP5车型'"></ConsumeEcharts>
</el-col>
<el-col :span="12">
<ConsumeEcharts :id="'pie14'" :title="'维保利润TOP5公司'"></ConsumeEcharts>
</el-col>
</el-row>
</el-card>
</div>
</template>
<script>
import { merchantListApi } from "@/api/merchant"
import { maintenanceAnalysisLattice } from "@/api/statistics.js"
import AccessoryEcharts from '../components/accessoryEcharts';
import ConsumeEcharts from '../components/consumeEcharts';
export default {
name: 'Dashboard',
components: { AccessoryEcharts, ConsumeEcharts },
data() {
return {
//维修店列表
merchantList: [],
loading: false,
fromList: this.$constants.fromList,
time1: [],
tableFrom: {
page: 1,
dateLimit: '',
type:3
},
//进店总台次
frequency: {},
//维保产值
money: {},
//维保成本
accessory: {},
//维保利润
profit: {},
};
},
mounted() {
},
created() {
this.init()
},
methods: {
// 初始化
init() {
this.maintenanceAnalysisLatticeFn()
},
//年月日
selectChange(e) {
// console.log(e);
this.tableFrom.dateLimit = e;
this.timeVal = [];
this.init()
},
//选择确认
merChange(e) {
// console.log(e);
this.tableFrom.merId = e
this.init()
},
//时间选择监听
timeChange(e) {
// console.log(e);
if (e) {
this.tableFrom.dateLimit = e.join(',')
} else {
this.tableFrom.dateLimit = ''
}
this.init()
},
//顶部四个格子
maintenanceAnalysisLatticeFn() {
maintenanceAnalysisLattice(this.tableFrom).then(res => {
//进店总台次
this.frequency = res.frequency
//维保产值
this.money = res.money
//维保成本
this.accessory = res.accessory
//维保利润
this.profit = res.profit
})
}
}
};
</script>
<style scoped lang="scss">
.price {
font-size: 26px;
color: rgb(102, 154, 177);
font-weight: 700;
}
.title {
font-size: 18px;
color: #333333;
margin-top: 14px;
margin-bottom: 6px;
}
.percentage {
background-color: #f5f5f5;
padding: 12px 8px;
display: flex;
justify-content: space-between;
text-align: center;
color: #333333;
font-size: 16px;
.percentage-s {
p {
color: green;
margin-bottom: 4px;
}
}
.percentage-j {
p {
color: red;
margin-bottom: 4px;
}
}
}
.el-row {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
}
.el-col {
border-radius: 4px;
}
.bg-purple-dark {
background: #ffffff;
}
.bg-purple {
background: #f5f5f5;
margin-top: 12px;
}
.bg-purple-light {
background: #ffffff;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
padding: 24px 18px 8px 24px;
border-radius: 12px 12px 12px 12px;
}
.row-bg {
padding: 10px 0;
background-color: #ffffff;
}
.flex {
display: flex;
}
.space-between {
justify-content: space-between
}
</style>