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

7.30(维修分析=>维保产值

Browse Source
This commit is contained in:
Hong
2024-07-30 18:35:51 +08:00
parent e499b26662
commit eed6812d24
10 changed files with 1352 additions and 477 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/api/statistics.js
View File

@@ -109,6 +109,25 @@ export function yieldModelandcompany(data) {
//维保成本占比车型/所属公司饼图 /api/admin/platform/monthly/maintenance/analysis/cost/modelandcompany/histogram
export function costModelandcompany(data) {
return request({
url: '/admin/platform/monthly/maintenance/analysis/cost/modelandcompany',
method: 'post',
data,
});
}
//维保成本(第三栏格子图) /api/admin/platform/monthly/maintenance/analysis/cost/lattice
export function analysisCostLattice(data) {
return request({
url: '/admin/platform/monthly/maintenance/analysis/cost/lattice',
method: 'post',
data,
});
}
//维保成本top10和维保使用配件数量top10公司柱状图
//api/admin/platform/monthly/maintenance/analysis/cost/modelandcompany/histogram
export function modelandcompanyHistogram(data) {
return request({
url: '/admin/platform/monthly/maintenance/analysis/cost/modelandcompany/histogram',
method: 'post',
@@ -116,3 +135,28 @@ export function costModelandcompany(data) {
});
}
// 维保成本车型占比,所属公司占比 api/admin/platform/monthly/maintenance/analysis/profit/modelandcompany
export function profitModelandcompany(data) {
return request({
url: '/admin/platform/monthly/maintenance/analysis/profit/modelandcompany',
method: 'post',
data,
});
}
//维保利润(第四栏格子图) /api/admin/platform/monthly/maintenance/analysis/profit/lattice
export function analysisProfitLattice(data) {
return request({
url: '/admin/platform/monthly/maintenance/analysis/profit/lattice',
method: 'post',
data,
});
}
// 维保利润(柱状图) api/admin/platform/monthly/maintenance/analysis/profit/modelandcompany/histogram
export function profitHistogram(data) {
return request({
url: '/admin/platform/monthly/maintenance/analysis/profit/modelandcompany/histogram',
method: 'post',
data,
});
}

85
src/views/statistics/components/accessoryEcharts.vue
View File

@@ -12,69 +12,64 @@
<script>
import * as echarts from 'echarts';
import { brokenLineApi } from '@/api/dashboard';
export default {
name: 'accessoryEcharts',
props: ['id', 'title','pieData'],
props: ['id', 'title', 'pieData'],
data() {
return {
lineData: [],
};
},
mounted() {
this.inits();
// 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'
let myChart = echarts.init(document.getElementById(this.id));
let option = {
title: {
text: this.title,
left: 'center'
},
toolbox: {
feature: {
saveAsImage: {},
},
toolbox: {
feature: {
saveAsImage: {},
},
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [
{
type: 'pie',
radius: '50%',
data: this.pieData,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)',
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [
{
type: 'pie',
radius: '50%',
data: this.pieData,
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();
});
}
]
};
myChart.setOption(option);
myChart.resize({
// width: myChart.getWidth() * 0.5,
// height: myChart.getHeight() * 0.5
});
//建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
window.addEventListener('resize', function () {
myChart.resize();
});
},
},

79
src/views/statistics/components/consumeEcharts.vue
View File

@@ -35,56 +35,53 @@ export default {
};
},
mounted() {
this.inits();
// 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',
},
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: {},
},
},
toolbox: {
feature: {
saveAsImage: {},
},
xAxis: {
type: 'category',
data: this.barData.labels
},
yAxis: {
type: 'value'
},
series: [
{
data: this.barData.values,
type: 'bar',
barWidth: 20 // 设置宽度为类目宽度的50%
}
]
};
myChart.setOption(option);
//建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
window.addEventListener('resize', function () {
myChart.resize();
});
},
xAxis: {
type: 'category',
data: this.barData.labels
},
yAxis: {
type: 'value'
},
series: [
{
data: this.barData.values,
type: 'bar',
barWidth: 20 // 设置宽度为类目宽度的50%
}
]
};
myChart.setOption(option);
//建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
window.addEventListener('resize', function () {
myChart.resize();
});
},
},

7
src/views/statistics/cost/components/accessoryEcharts.vue
View File

@@ -31,11 +31,7 @@ export default {
window.open(href, '_blank');
},
inits() {
brokenLineApi().then((res) => {
// console.log(res, '数据---111');
this.lineData = res;
let myChart = echarts.init(document.getElementById('accessory-echarts'));
let myChart = echarts.init(document.getElementById('accessory-echarts'));
let option = {
title: {
text: '配件车型占比',
@@ -74,7 +70,6 @@ export default {
window.addEventListener('resize', function () {
myChart.resize();
});
});
},
},
};

80
src/views/statistics/cost/components/consumeEcharts.vue
View File

@@ -17,7 +17,7 @@ import * as echarts from 'echarts';
import { brokenLineApi } from '@/api/dashboard';
export default {
name: 'consumeEcharts',
props:['quantity'],
props: ['quantity'],
data() {
return {
lineData: [],
@@ -31,49 +31,47 @@ export default {
window.open(href, '_blank');
},
inits() {
brokenLineApi().then((res) => {
this.lineData = res;
let myChart = echarts.init(document.getElementById('consume-echarts'));
let option = {
title: {
text: '配件消耗数量TOP10',
left: 'center'
},
color: ['#37A2FF'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985',
},
console.log(this.quantity);
let myChart = echarts.init(document.getElementById('consume-echarts'));
let option = {
title: {
text: '配件消耗数量TOP10',
left: 'center'
},
color: ['#37A2FF'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985',
},
},
toolbox: {
feature: {
saveAsImage: {},
},
},
toolbox: {
feature: {
saveAsImage: {},
},
xAxis: {
type: 'category',
data: this.quantity.titArr
},
yAxis: {
type: 'value'
},
series: [
{
data: this.quantity.numArr,
type: 'bar',
barWidth: 30 // 设置宽度为类目宽度的50%
}
]
};
myChart.setOption(option);
//建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
window.addEventListener('resize', function () {
myChart.resize();
});
},
xAxis: {
type: 'category',
data: this.quantity.titArr
},
yAxis: {
type: 'value'
},
series: [
{
data: this.quantity.numArr,
type: 'bar',
barWidth: 30 // 设置宽度为类目宽度的50%
}
]
};
myChart.setOption(option);
//建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
window.addEventListener('resize', function () {
myChart.resize();
});
},
},

65
src/views/statistics/cost/components/foldline.vue
View File

@@ -20,7 +20,7 @@ import * as echarts from 'echarts';
import { brokenLineApi } from '@/api/dashboard';
export default {
name: 'foldline',
props:['top20'],
props: ['top20'],
data() {
return {
lineData: [],
@@ -34,52 +34,47 @@ export default {
window.open(href, '_blank');
},
inits() {
brokenLineApi().then((res) => {
// console.log(res, '数据---111');
this.lineData = res;
let myChart = echarts.init(document.getElementById('chart_example'));
let myChart = echarts.init(document.getElementById('chart_example'));
let option = {
color: ['#80FFA5', '#37A2FF', '#FF0087'],
title: {
text: '配件采购金额TOP20',
},
color: ['#37A2FF'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985',
},
},
},
toolbox: {
feature: {
saveAsImage: {},
},
},
xAxis: {
type: 'category',
data: this.top20.labels
},
yAxis: {
type: 'value'
},
series: [
{
data: this.top20.values,
type: 'bar',
barWidth: 20 // 设置宽度为类目宽度的50%
}
]
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985',
},
},
},
toolbox: {
feature: {
saveAsImage: {},
},
},
xAxis: {
type: 'category',
data: this.top20.labels
},
yAxis: {
type: 'value'
},
series: [
{
data: this.top20.values,
type: 'bar',
barWidth: 20 // 设置宽度为类目宽度的50%
}
]
};
myChart.setOption(option);
//建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
window.addEventListener('resize', function () {
myChart.resize();
});
});
},
},
};

32
src/views/statistics/cost/index.vue
View File

@@ -27,7 +27,7 @@
<el-col :span="6">
<div class="grid-content bg-purple">
<div class="price"> ￥{{ totalCostVo.currentData }}元</div>
<div class="title">进店总台词</div>
<div class="title">总成本</div>
<div class="percentage">
<div :class="[totalCostVo.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
@@ -51,7 +51,7 @@
<el-col :span="6">
<div class="grid-content bg-purple">
<div class="price"> ￥{{ directSupplyVo.currentData }}元</div>
<div class="title">维保产值</div>
<div class="title">直供配件</div>
<div class="percentage">
<div :class="[directSupplyVo.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
@@ -75,7 +75,7 @@
<el-col :span="6">
<div class="grid-content bg-purple">
<div class="price"> ￥{{ procureVo.currentData }}元</div>
<div class="title">维保成本</div>
<div class="title">外采配件</div>
<div class="percentage">
<div :class="[procureVo.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
@@ -123,13 +123,13 @@
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<AccessoryEcharts :pie="pie"></AccessoryEcharts>
<AccessoryEcharts ref="pie" :pie="pie"></AccessoryEcharts>
</el-col>
<el-col :span="12">
<ConsumeEcharts :quantity="quantity"></ConsumeEcharts>
<ConsumeEcharts ref="quantity" :quantity="quantity"></ConsumeEcharts>
</el-col>
<el-col :span="24">
<FoldLine :top20="top20"></FoldLine>
<FoldLine ref="top20" :top20="top20"></FoldLine>
</el-col>
</el-row>
@@ -186,17 +186,20 @@ export default {
//top20
monthlyAnalysisPiePurchaseFn() {
monthlyAnalysisPiePurchase(this.tableFrom).then(res => {
console.log('top20',res);
if (res) {
console.log(res);
this.top20=res
}
setTimeout(() => {
this.$refs.top20.inits()
}, 200);
})
},
//获取图表数据
monthlyAnalysisPieChartFn() {
monthlyAnalysisPieChart(this.tableFrom).then(res => {
if (res) {
this.pie = res.pie
console.log('占比/top10',res);
if (res.quantity.length) {
let arr3 = []
let arr4 = []
res.quantity.forEach(item => {
@@ -205,14 +208,19 @@ export default {
})
this.quantity.titArr = arr3
this.quantity.numArr = arr4
console.log(this.quantity);
}
if (res.pie.length) {
this.pie = res.pie
}
setTimeout(() => {
this.$refs.quantity.inits()
this.$refs.pie.inits()
}, 200);
})
},
//获取数据
monthlyAnalysisLatticeFn() {
monthlyAnalysisLattice(this.tableFrom).then(res => {
// console.log(res);
if (res) {
//总成本
this.totalCostVo = res.totalCostVo
@@ -231,7 +239,7 @@ export default {
// console.log(e);
this.tableFrom.dateLimit = e;
this.timeVal = [];
this.init()
},
init() {
this.monthlyAnalysisLatticeFn()

523
src/views/statistics/maintenance/accident.vue
View File

@@ -123,39 +123,41 @@
<!-- 四 -->
<el-row :gutter="20">
<el-col :span="6">
<AccessoryEcharts :id="'pie1'" :title="'进店台次分车型占比'" :pieData="pieData1"></AccessoryEcharts>
<AccessoryEcharts :id="'pie1'" ref="pie1" :title="'进店台次分车型占比'" :pieData="pieData1"></AccessoryEcharts>
</el-col>
<el-col :span="6">
<AccessoryEcharts :id="'pie2'" :title="'进店台次分所属公司占比'" :pieData="pieData2"></AccessoryEcharts>
<AccessoryEcharts :id="'pie2'" ref="pie2" :title="'进店台次分所属公司占比'" :pieData="pieData2"></AccessoryEcharts>
</el-col>
<el-col :span="6">
<AccessoryEcharts :id="'pie3'" :title="'维保产值按车型占比'" :pieData="pieData3"></AccessoryEcharts>
<AccessoryEcharts :id="'pie3'" ref="pie3" :title="'维保产值按车型占比'" :pieData="pieData3"></AccessoryEcharts>
</el-col>
<el-col :span="6">
<AccessoryEcharts :id="'pie4'" :title="'维保产值按所属公司占比'" :pieData="pieData4"></AccessoryEcharts>
<AccessoryEcharts :id="'pie4'" ref="pie4" :title="'维保产值按所属公司占比'" :pieData="pieData4"></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="price"> ￥{{ average.currentData }}元</div>
<div class="title flex space-between">
<div>维保单车产值</div>
<div>平均单车</div>
</div>
<div class="percentage">
<div class="percentage-s">
<div :class="[average.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i class="el-icon-top" style="font-weight: 700;"></i>
34.5%
<i :class="[average.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ average.yearOnYear }}%
</p>
同比
</div>
<div class="percentage-j">
<div :class="[average.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i class="el-icon-bottom" style="font-weight: 700;"></i>
34.5%
<i :class="[average.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ average.linkRelativeRatio }}%
</p>
环比
</div>
@@ -164,23 +166,28 @@
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple">
<div class="price"> ￥34500元</div>
<div class="price"> ￥{{ averageModelData.currentData }}元</div>
<div class="title flex space-between">
<div>维保单车产值</div>
<div>按照车型分</div>
<el-select v-model="modelName" placeholder="按照车型分" @change="changeAverageModelFn">
<el-option v-for="item in averageModel" :key="item.id" :label="item.name" :value="item.name">
</el-option>
</el-select>
</div>
<div class="percentage">
<div class="percentage-s">
<div :class="[averageModelData.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i class="el-icon-top" style="font-weight: 700;"></i>
34.5%
<i :class="[averageModelData.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ averageModelData.yearOnYear }}%
</p>
同比
</div>
<div class="percentage-j">
<div :class="[averageModelData.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i class="el-icon-bottom" style="font-weight: 700;"></i>
34.5%
<i :class="[averageModelData.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ averageModelData.linkRelativeRatio }}%
</p>
环比
</div>
@@ -189,23 +196,28 @@
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple">
<div class="price"> ￥34500元</div>
<div class="price"> ￥{{ averageCompanyData.currentData }}元</div>
<div class="title flex space-between">
<div>维保单车产值</div>
<div>按照所属公司分</div>
<el-select v-model="companyName" placeholder="按照所属公司分" @change="changeAverageCompanyFn">
<el-option v-for="item in averageCompany" :key="item.id" :label="item.name" :value="item.name">
</el-option>
</el-select>
</div>
<div class="percentage">
<div class="percentage-s">
<div :class="[averageCompanyData.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i class="el-icon-top" style="font-weight: 700;"></i>
34.5%
<i :class="[averageCompanyData.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ averageCompanyData.yearOnYear }}%
</p>
同比
</div>
<div class="percentage-j">
<div :class="[averageCompanyData.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i class="el-icon-bottom" style="font-weight: 700;"></i>
34.5%
<i :class="[averageCompanyData.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ averageCompanyData.linkRelativeRatio }}%
</p>
环比
</div>
@@ -216,42 +228,44 @@
<!-- 二 -->
<el-row :gutter="20">
<el-col :span="12">
<ConsumeEcharts :id="'pie5'" :title="'维保产值TOP5车型'"></ConsumeEcharts>
<ConsumeEcharts :id="'pie5'" ref="topOne" :title="'维保产值TOP5车型'" :barData="topOne"></ConsumeEcharts>
</el-col>
<el-col :span="12">
<ConsumeEcharts :id="'pie6'" :title="'维保产值TOP5公司'"></ConsumeEcharts>
<ConsumeEcharts :id="'pie6'" ref="topTwo" :title="'维保产值TOP5公司'" :barData="topTwo"></ConsumeEcharts>
</el-col>
</el-row>
<!-- 二 -->
<el-row :gutter="20">
<el-col :span="12">
<AccessoryEcharts :id="'pie7'" :title="'维保成本按车型占比'"></AccessoryEcharts>
<AccessoryEcharts :id="'pie7'" ref="pie5" :title="'维保成本按车型占比'" :pieData="pieData5"></AccessoryEcharts>
</el-col>
<el-col :span="12">
<AccessoryEcharts :id="'pie8'" :title="'维保成本按所属公司占比'"></AccessoryEcharts>
<AccessoryEcharts :id="'pie8'" ref="pie6" :title="'维保成本按所属公司占比'" :pieData="pieData6"></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="price"> ￥{{ costAverage.currentData }}元</div>
<div class="title flex space-between">
<div>维保单车成本</div>
<div>平均单车</div>
</div>
<div class="percentage">
<div class="percentage-s">
<div :class="[costAverage.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i class="el-icon-top" style="font-weight: 700;"></i>
34.5%
<i :class="[costAverage.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ costAverage.yearOnYear }}%
</p>
同比
</div>
<div class="percentage-j">
<div :class="[costAverage.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i class="el-icon-bottom" style="font-weight: 700;"></i>
34.5%
<i :class="[costAverage.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ costAverage.linkRelativeRatio }}%
</p>
环比
</div>
@@ -260,23 +274,28 @@
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple">
<div class="price"> ￥34500元</div>
<div class="price"> ￥{{ costAverageModelData.currentData }}元</div>
<div class="title flex space-between">
<div>维保单车成本</div>
<div>按照车型分</div>
<el-select v-model="costModelName" placeholder="按照车型分" @change="costModelFn">
<el-option v-for="item in costAverageModel" :key="item.id" :label="item.name" :value="item.name">
</el-option>
</el-select>
</div>
<div class="percentage">
<div class="percentage-s">
<div :class="[costAverageModelData.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i class="el-icon-top" style="font-weight: 700;"></i>
34.5%
<i :class="[costAverageModelData.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ costAverageModelData.yearOnYear }}%
</p>
同比
</div>
<div class="percentage-j">
<div :class="[costAverageModelData.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i class="el-icon-bottom" style="font-weight: 700;"></i>
34.5%
<i :class="[costAverageModelData.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ costAverageModelData.linkRelativeRatio }}%
</p>
环比
</div>
@@ -285,23 +304,28 @@
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple">
<div class="price"> ￥34500元</div>
<div class="price"> ￥{{ costAverageCompanyData.currentData }}元</div>
<div class="title flex space-between">
<div>维保单车成本</div>
<div>按照所属公司分</div>
<el-select v-model="costCompanyName" placeholder="按照所属公司分" @change="costCompanyFn">
<el-option v-for="item in costAverageCompany" :key="item.id" :label="item.name" :value="item.name">
</el-option>
</el-select>
</div>
<div class="percentage">
<div class="percentage-s">
<div :class="[costAverageCompanyData.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i class="el-icon-top" style="font-weight: 700;"></i>
34.5%
<i :class="[costAverageCompanyData.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ costAverageCompanyData.yearOnYear }}%
</p>
同比
</div>
<div class="percentage-j">
<div :class="[costAverageCompanyData.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i class="el-icon-bottom" style="font-weight: 700;"></i>
34.5%
<i :class="[costAverageCompanyData.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ costAverageCompanyData.linkRelativeRatio }}%
</p>
环比
</div>
@@ -312,42 +336,44 @@
<!-- 二 -->
<el-row :gutter="20">
<el-col :span="12">
<ConsumeEcharts :id="'pie9'" :title="'维保成本TOP10'"></ConsumeEcharts>
<ConsumeEcharts :id="'pie9'" ref="barOne" :title="'维保成本TOP10'" :barData="barOne"></ConsumeEcharts>
</el-col>
<el-col :span="12">
<ConsumeEcharts :id="'pie10'" :title="'维保成本配件使用数量TOP10'"></ConsumeEcharts>
<ConsumeEcharts :id="'pie10'" ref="barTwo" :title="'维保成本配件使用数量TOP10'" :barData="barTwo"></ConsumeEcharts>
</el-col>
</el-row>
<!-- 二 -->
<el-row :gutter="20">
<el-col :span="12">
<AccessoryEcharts :id="'pie11'" :title="'维保利润按车型占比'"></AccessoryEcharts>
<AccessoryEcharts :id="'pie11'" ref="pie7" :title="'维保利润按车型占比'" :pieData="pieData7"></AccessoryEcharts>
</el-col>
<el-col :span="12">
<AccessoryEcharts :id="'pie12'" :title="'维保利润按所属公司占比'"></AccessoryEcharts>
<AccessoryEcharts :id="'pie12'" ref="pie8" :title="'维保利润按所属公司占比'" :pieData="pieData8"></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="price"> ￥{{ profitAverage.currentData }}元</div>
<div class="title flex space-between">
<div>维保单车利润</div>
<div>平均单车</div>
</div>
<div class="percentage">
<div class="percentage-s">
<div :class="[profitAverage.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i class="el-icon-top" style="font-weight: 700;"></i>
34.5%
<i :class="[profitAverage.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ profitAverage.yearOnYear }}%
</p>
同比
</div>
<div class="percentage-j">
<div :class="[profitAverage.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i class="el-icon-bottom" style="font-weight: 700;"></i>
34.5%
<i :class="[profitAverage.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ profitAverage.linkRelativeRatio }}%
</p>
环比
</div>
@@ -356,23 +382,28 @@
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple">
<div class="price"> ￥34500元</div>
<div class="price"> ￥{{ profitAverageModelData.currentData }}元</div>
<div class="title flex space-between">
<div>维保单车利润</div>
<div>按照车型分</div>
<el-select v-model="profitModelName" placeholder="按照车型分" @change="profitModelFn">
<el-option v-for="item in profitAverageModel" :key="item.id" :label="item.name" :value="item.name">
</el-option>
</el-select>
</div>
<div class="percentage">
<div class="percentage-s">
<div :class="[profitAverageModelData.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i class="el-icon-top" style="font-weight: 700;"></i>
34.5%
<i :class="[profitAverageModelData.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ profitAverageModelData.yearOnYear }}%
</p>
同比
</div>
<div class="percentage-j">
<div :class="[profitAverageModelData.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i class="el-icon-bottom" style="font-weight: 700;"></i>
34.5%
<i :class="[profitAverageModelData.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ profitAverageModelData.linkRelativeRatio }}%
</p>
环比
</div>
@@ -381,23 +412,28 @@
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple">
<div class="price"> ￥34500元</div>
<div class="price"> ￥{{ profitAverageCompanyData.currentData }}元</div>
<div class="title flex space-between">
<div>维保单车利润</div>
<div>按照所属公司分</div>
<el-select v-model="profitCompanyName" placeholder="按照所属公司分" @change="profitCompanyFn">
<el-option v-for="item in profitAverageCompany" :key="item.id" :label="item.name" :value="item.name">
</el-option>
</el-select>
</div>
<div class="percentage">
<div class="percentage-s">
<div :class="[profitAverageCompanyData.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i class="el-icon-top" style="font-weight: 700;"></i>
34.5%
<i :class="[profitAverageCompanyData.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ profitAverageCompanyData.yearOnYear }}%
</p>
同比
</div>
<div class="percentage-j">
<div :class="[profitAverageCompanyData.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i class="el-icon-bottom" style="font-weight: 700;"></i>
34.5%
<i :class="[profitAverageCompanyData.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ profitAverageCompanyData.linkRelativeRatio }}%
</p>
环比
</div>
@@ -408,10 +444,10 @@
<!-- 二 -->
<el-row :gutter="20">
<el-col :span="12">
<ConsumeEcharts :id="'pie13'" :title="'维保利润TOP5车型'"></ConsumeEcharts>
<ConsumeEcharts :id="'pie13'" ref="profitOne" :title="'维保利润TOP5车型'" :barData="profitOne"></ConsumeEcharts>
</el-col>
<el-col :span="12">
<ConsumeEcharts :id="'pie14'" :title="'维保利润TOP5公司'"></ConsumeEcharts>
<ConsumeEcharts :id="'pie14'" ref="profitTwo" :title="'维保利润TOP5公司'" :barData="profitTwo"></ConsumeEcharts>
</el-col>
</el-row>
</el-card>
@@ -420,7 +456,7 @@
<script>
import { merchantListApi } from "@/api/merchant"
import { maintenanceAnalysisLattice, maintenanceAnalysisModelRatio, maintenanceAnalysisCompany, maintenanceAnalysisYieldModel, maintenanceAnalysisYieldCompany } from "@/api/statistics.js"
import { maintenanceAnalysisLattice, maintenanceAnalysisModelRatio, maintenanceAnalysisCompany, maintenanceAnalysisYieldModel, maintenanceAnalysisYieldCompany, yieldModelandcompany, analysisAvgLattice, costModelandcompany, analysisCostLattice, analysisProfitLattice, modelandcompanyHistogram, profitModelandcompany, profitHistogram } from "@/api/statistics.js"
import AccessoryEcharts from '../components/accessoryEcharts';
import ConsumeEcharts from '../components/consumeEcharts';
export default {
@@ -447,14 +483,79 @@ export default {
//维保利润
profit: {},
//饼图1
pieData1:[],
pieData1: [],
//饼图2
pieData2:[],
pieData2: [],
//饼图3
pieData3:[],
pieData3: [],
//饼图4
pieData4:[],
pieData4: [],
//饼图5
pieData5: [],
//饼图6
pieData6: [],
//饼图7
pieData7: [],
//饼图8
pieData8: [],
//z柱图1
topOne: {
labels: ['一', '二', '三', '四'],
values: [10, 20, 30, 40]
},
topTwo: {
labels: ['一', '二', '三', '四'],
values: [10, 20, 30, 40]
},
//维保成本top10
barOne: {
labels: ['一', '二', '三', '四'],
values: [10, 20, 30, 40]
},
barTwo: {
labels: ['一', '二', '三', '四'],
values: [10, 20, 30, 40]
},
//维保利润柱状图top5
profitOne: {
labels: ['一', '二', '三', '四'],
values: [10, 20, 30, 40]
},
profitTwo: {
labels: ['一', '二', '三', '四'],
values: [10, 20, 30, 40]
},
//第二栏选择
//维保单车产值
average: {},
//车型
averageModel: [],
averageModelData: {},
modelName: '',
//所属公司
averageCompany: [],
averageCompanyData: {},
companyName: '',
//维保成本格子图 //////////////////////////////
costAverage: {},
//所属公司
costAverageCompany: [],
costAverageCompanyData: {},
costCompanyName: '',
//车型
costAverageModel: [],
costAverageModelData: {},
costModelName: '',
//维保利润格子图
profitAverage: {},
//所属公司
profitAverageCompany: [],
profitAverageCompanyData: {},
profitCompanyName: '',
//车型
profitAverageModel: [],
profitAverageModelData: {},
profitModelName: '',
};
},
mounted() {
@@ -471,6 +572,20 @@ export default {
this.maintenanceAnalysisCompanyFn()
this.maintenanceAnalysisYieldModelFn()
this.maintenanceAnalysisYieldCompanyFn()
this.yieldModelandcompanyFn()
//二栏格子
this.analysisAvgLatticeFn()
//成本饼图
this.costModelandcompanyFn()
//三栏格子图
this.analysisCostLatticeFn()
this.modelandcompanyHistogramFn()
//维保成本饼图
this.profitModelandcompanyFn()
//四栏格子图
this.analysisProfitLatticeFn()
//维保利润柱状图
this.profitHistogramFn()
},
//年月日
selectChange(e) {
@@ -513,43 +628,249 @@ export default {
maintenanceAnalysisLatticeFn() {
maintenanceAnalysisLattice(this.tableFrom).then(res => {
//进店总台次
this.frequency = res.frequency
if (res.frequency) {
this.frequency = res.frequency
}
//维保产值
this.money = res.money
if (res.money) {
this.money = res.money
}
//维保成本
this.accessory = res.accessory
if (res.accessory) {
this.accessory = res.accessory
}
//维保利润
this.profit = res.profit
if (res.profit) {
this.profit = res.profit
}
})
},
//第二栏三个格子
analysisAvgLatticeFn() {
analysisAvgLattice(this.tableFrom).then(res => {
if (res.average) {
this.average = res.average
}
if (res.averageCompany.length) {
this.averageCompany = res.averageCompany
this.averageCompanyData = this.averageCompany[0]
this.companyName = this.averageCompany[0].name
}
if (res.averageModel.length) {
this.averageModel = res.averageModel
this.averageModelData = this.averageModel[0]
this.modelName = this.averageModel[0].name
}
})
},
//选择车型(产值)
changeAverageModelFn(e) {
this.averageModel.forEach(item => {
if (item.name == e) {
this.averageModelData = item
}
})
},
//选择所属公司
changeAverageCompanyFn(e) {
// console.log(e);
this.averageCompany.forEach(item => {
if (item.name == e) {
this.averageCompanyData = item
}
})
},
//进店台次分车型占比
maintenanceAnalysisModelRatioFn() {
maintenanceAnalysisModelRatio(this.tableFrom).then(res => {
this.pieData1=res
console.log(1, res);
if (res.length) {
this.pieData1 = res
}
setTimeout(() => {
this.$refs.pie1.inits()
}, 200);
})
},
//进店台次分所属公司占比
maintenanceAnalysisCompanyFn() {
maintenanceAnalysisCompany(this.tableFrom).then(res => {
console.log(2, res);
this.pieData2=res
if (res.length) {
this.pieData2 = res
}
setTimeout(() => {
this.$refs.pie2.inits()
}, 200);
})
},
//维保产值按车型占比
maintenanceAnalysisYieldModelFn() {
maintenanceAnalysisYieldModel(this.tableFrom).then(res => {
console.log(3, res);
this.pieData3=res
if (res.length) {
this.pieData3 = res
}
setTimeout(() => {
this.$refs.pie3.inits()
}, 200);
})
},
//维保产值按所属公司占比
maintenanceAnalysisYieldCompanyFn() {
maintenanceAnalysisYieldCompany(this.tableFrom).then(res => {
console.log(4, res);
this.pieData4=res
if (res.length) {
this.pieData4 = res
}
setTimeout(() => {
this.$refs.pie4.inits()
}, 200);
})
},
//top5车型,公司
yieldModelandcompanyFn() {
yieldModelandcompany(this.tableFrom).then(res => {
console.log('1111111111', res);
if (res.topOne) {
this.topOne = res.topOne
this.topTwo = res.topTwo
}
setTimeout(() => {
this.$refs.topOne.inits()
this.$refs.topTwo.inits()
}, 200);
})
},
// 维保成本占比车型/所属公司饼图
costModelandcompanyFn() {
costModelandcompany(this.tableFrom).then(res => {
if (res.companyPie) {
this.pieData6 = res.companyPie
}
if (res.modelPie) {
this.pieData5 = res.modelPie
}
setTimeout(() => {
this.$refs.pie5.inits()
this.$refs.pie6.inits()
}, 200);
})
},
//第三栏格子图 维保成本
analysisCostLatticeFn() {
analysisCostLattice(this.tableFrom).then(res => {
if (res.average) {
this.costAverage = res.average
}
if (res.averageCompany.length) {
// console.log(1, true);
this.costAverageCompany = res.averageCompany
this.costAverageCompanyData = this.costAverageCompany[0]
this.costCompanyName = this.costAverageCompany[0].name
}
if (res.averageModel.length) {
// console.log(true);
this.costAverageModel = res.averageModel
this.costAverageModelData = this.costAverageModel[0]
this.costModelName = this.costAverageModel[0].name
}
})
},
//选择车型(成本)
costModelFn(e) {
this.costAverageModel.forEach(item => {
if (item.name == e) {
this.costAverageModelData = item
}
})
},
//选择所属公司(成本)
costCompanyFn(e) {
this.costAverageCompany.forEach(item => {
if (item.name == e) {
this.costAverageCompanyData = item
}
})
},
//维保成本top10和维保使用配件数量top10公司柱状图
modelandcompanyHistogramFn() {
modelandcompanyHistogram(this.tableFrom).then(res => {
console.log('top10', res);
if (res.topOne) {
this.barOne = res.topOne
this.barTwo = res.topTwo
}
setTimeout(() => {
this.$refs.barOne.inits()
this.$refs.barTwo.inits()
}, 200);
})
},
//维保成本饼图
profitModelandcompanyFn() {
profitModelandcompany(this.tableFrom).then(res => {
// console.log('饼图', res);
if (res.companyPie) {
this.pieData8 = res.companyPie
}
if (res.modelPie) {
this.pieData7 = res.modelPie
}
setTimeout(() => {
this.$refs.pie7.inits()
this.$refs.pie8.inits()
}, 200);
})
},
//第四栏格子图 维保利润
analysisProfitLatticeFn() {
analysisProfitLattice(this.tableFrom).then(res => {
// console.log('撒结婚登记卡死', res);
this.profitAverage = res.average
if (res.company.length) {
this.profitAverageCompany = res.company
this.profitAverageCompanyData = this.profitAverageCompany[0]
this.profitCompanyName = this.profitAverageCompany[0].name
}
if (res.model.length) {
this.profitAverageModel = res.model
this.profitAverageModelData = this.profitAverageModel[0]
this.profitModelName = this.profitAverageModel[0].name
}
})
},
//选择车型(利润)
profitModelFn(e) {
this.profitAverageModel.forEach(item => {
if (item.name == e) {
this.profitAverageModelData = item
}
})
},
//选择所属公司(利润)
profitCompanyFn(e) {
this.profitAverageCompany.forEach(item => {
if (item.name == e) {
this.profitAverageCompanyData = item
}
})
},
//维保利润(柱状图)
profitHistogramFn() {
profitHistogram(this.tableFrom).then(res => {
console.log(res);
if (res.topOne) {
this.profitOne = res.topOne
this.profitTwo = res.topTwo
}
setTimeout(() => {
this.$refs.profitOne.inits()
this.$refs.profitTwo.inits()
}, 200);
})
}
}
};
</script>

391
src/views/statistics/maintenance/index.vue
View File

@@ -123,16 +123,16 @@
<!-- 四 -->
<el-row :gutter="20">
<el-col :span="6">
<AccessoryEcharts :id="'pie1'" :title="'进店台次分车型占比'" :pieData="pieData1"></AccessoryEcharts>
<AccessoryEcharts :id="'pie1'" ref="pie1" :title="'进店台次分车型占比'" :pieData="pieData1"></AccessoryEcharts>
</el-col>
<el-col :span="6">
<AccessoryEcharts :id="'pie2'" :title="'进店台次分所属公司占比'" :pieData="pieData2"></AccessoryEcharts>
<AccessoryEcharts :id="'pie2'" ref="pie2" :title="'进店台次分所属公司占比'" :pieData="pieData2"></AccessoryEcharts>
</el-col>
<el-col :span="6">
<AccessoryEcharts :id="'pie3'" :title="'维保产值按车型占比'" :pieData="pieData3"></AccessoryEcharts>
<AccessoryEcharts :id="'pie3'" ref="pie3" :title="'维保产值按车型占比'" :pieData="pieData3"></AccessoryEcharts>
</el-col>
<el-col :span="6">
<AccessoryEcharts :id="'pie4'" :title="'维保产值按所属公司占比'" :pieData="pieData4"></AccessoryEcharts>
<AccessoryEcharts :id="'pie4'" ref="pie4" :title="'维保产值按所属公司占比'" :pieData="pieData4"></AccessoryEcharts>
</el-col>
</el-row>
<!-- 三 -->
@@ -228,42 +228,44 @@
<!-- 二 -->
<el-row :gutter="20">
<el-col :span="12">
<ConsumeEcharts :id="'pie5'" :title="'维保产值TOP5车型'" :barData="topOne"></ConsumeEcharts>
<ConsumeEcharts :id="'pie5'" ref="topOne" :title="'维保产值TOP5车型'" :barData="topOne"></ConsumeEcharts>
</el-col>
<el-col :span="12">
<ConsumeEcharts :id="'pie6'" :title="'维保产值TOP5公司'" :barData="topTwo"></ConsumeEcharts>
<ConsumeEcharts :id="'pie6'" ref="topTwo" :title="'维保产值TOP5公司'" :barData="topTwo"></ConsumeEcharts>
</el-col>
</el-row>
<!-- 二 -->
<el-row :gutter="20">
<el-col :span="12">
<AccessoryEcharts :id="'pie7'" :title="'维保成本按车型占比'" :pieData="pieData"></AccessoryEcharts>
<AccessoryEcharts :id="'pie7'" ref="pie5" :title="'维保成本按车型占比'" :pieData="pieData5"></AccessoryEcharts>
</el-col>
<el-col :span="12">
<AccessoryEcharts :id="'pie8'" :title="'维保成本按所属公司占比'" :pieData="pieData"></AccessoryEcharts>
<AccessoryEcharts :id="'pie8'" ref="pie6" :title="'维保成本按所属公司占比'" :pieData="pieData6"></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="price"> ￥{{ costAverage.currentData }}元</div>
<div class="title flex space-between">
<div>维保单车成本</div>
<div>平均单车</div>
</div>
<div class="percentage">
<div class="percentage-s">
<div :class="[costAverage.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i class="el-icon-top" style="font-weight: 700;"></i>
34.5%
<i :class="[costAverage.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ costAverage.yearOnYear }}%
</p>
同比
</div>
<div class="percentage-j">
<div :class="[costAverage.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i class="el-icon-bottom" style="font-weight: 700;"></i>
34.5%
<i :class="[costAverage.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ costAverage.linkRelativeRatio }}%
</p>
环比
</div>
@@ -272,23 +274,28 @@
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple">
<div class="price"> ￥34500元</div>
<div class="price"> ￥{{ costAverageModelData.currentData }}元</div>
<div class="title flex space-between">
<div>维保单车成本</div>
<div>按照车型分</div>
<el-select v-model="costModelName" placeholder="按照车型分" @change="costModelFn">
<el-option v-for="item in costAverageModel" :key="item.id" :label="item.name" :value="item.name">
</el-option>
</el-select>
</div>
<div class="percentage">
<div class="percentage-s">
<div :class="[costAverageModelData.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i class="el-icon-top" style="font-weight: 700;"></i>
34.5%
<i :class="[costAverageModelData.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ costAverageModelData.yearOnYear }}%
</p>
同比
</div>
<div class="percentage-j">
<div :class="[costAverageModelData.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i class="el-icon-bottom" style="font-weight: 700;"></i>
34.5%
<i :class="[costAverageModelData.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ costAverageModelData.linkRelativeRatio }}%
</p>
环比
</div>
@@ -297,23 +304,28 @@
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple">
<div class="price"> ￥34500元</div>
<div class="price"> ￥{{ costAverageCompanyData.currentData }}元</div>
<div class="title flex space-between">
<div>维保单车成本</div>
<div>按照所属公司分</div>
<el-select v-model="costCompanyName" placeholder="按照所属公司分" @change="costCompanyFn">
<el-option v-for="item in costAverageCompany" :key="item.id" :label="item.name" :value="item.name">
</el-option>
</el-select>
</div>
<div class="percentage">
<div class="percentage-s">
<div :class="[costAverageCompanyData.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i class="el-icon-top" style="font-weight: 700;"></i>
34.5%
<i :class="[costAverageCompanyData.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ costAverageCompanyData.yearOnYear }}%
</p>
同比
</div>
<div class="percentage-j">
<div :class="[costAverageCompanyData.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i class="el-icon-bottom" style="font-weight: 700;"></i>
34.5%
<i :class="[costAverageCompanyData.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ costAverageCompanyData.linkRelativeRatio }}%
</p>
环比
</div>
@@ -324,42 +336,44 @@
<!-- 二 -->
<el-row :gutter="20">
<el-col :span="12">
<ConsumeEcharts :id="'pie9'" :title="'维保成本TOP10'" :barData="topOne"></ConsumeEcharts>
<ConsumeEcharts :id="'pie9'" ref="barOne" :title="'维保成本TOP10'" :barData="barOne"></ConsumeEcharts>
</el-col>
<el-col :span="12">
<ConsumeEcharts :id="'pie10'" :title="'维保成本配件使用数量TOP10'" :barData="topOne"></ConsumeEcharts>
<ConsumeEcharts :id="'pie10'" ref="barTwo" :title="'维保成本配件使用数量TOP10'" :barData="barTwo"></ConsumeEcharts>
</el-col>
</el-row>
<!-- 二 -->
<el-row :gutter="20">
<el-col :span="12">
<AccessoryEcharts :id="'pie11'" :title="'维保利润按车型占比'" :pieData="pieData"></AccessoryEcharts>
<AccessoryEcharts :id="'pie11'" ref="pie7" :title="'维保利润按车型占比'" :pieData="pieData7"></AccessoryEcharts>
</el-col>
<el-col :span="12">
<AccessoryEcharts :id="'pie12'" :title="'维保利润按所属公司占比'" :pieData="pieData"></AccessoryEcharts>
<AccessoryEcharts :id="'pie12'" ref="pie8" :title="'维保利润按所属公司占比'" :pieData="pieData8"></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="price"> ￥{{ profitAverage.currentData }}元</div>
<div class="title flex space-between">
<div>维保单车利润</div>
<div>平均单车</div>
</div>
<div class="percentage">
<div class="percentage-s">
<div :class="[profitAverage.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i class="el-icon-top" style="font-weight: 700;"></i>
34.5%
<i :class="[profitAverage.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ profitAverage.yearOnYear }}%
</p>
同比
</div>
<div class="percentage-j">
<div :class="[profitAverage.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i class="el-icon-bottom" style="font-weight: 700;"></i>
34.5%
<i :class="[profitAverage.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ profitAverage.linkRelativeRatio }}%
</p>
环比
</div>
@@ -368,23 +382,28 @@
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple">
<div class="price"> ￥34500元</div>
<div class="price"> ￥{{ profitAverageModelData.currentData }}元</div>
<div class="title flex space-between">
<div>维保单车利润</div>
<div>按照车型分</div>
<el-select v-model="profitModelName" placeholder="按照车型分" @change="profitModelFn">
<el-option v-for="item in profitAverageModel" :key="item.id" :label="item.name" :value="item.name">
</el-option>
</el-select>
</div>
<div class="percentage">
<div class="percentage-s">
<div :class="[profitAverageModelData.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i class="el-icon-top" style="font-weight: 700;"></i>
34.5%
<i :class="[profitAverageModelData.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ profitAverageModelData.yearOnYear }}%
</p>
同比
</div>
<div class="percentage-j">
<div :class="[profitAverageModelData.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i class="el-icon-bottom" style="font-weight: 700;"></i>
34.5%
<i :class="[profitAverageModelData.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ profitAverageModelData.linkRelativeRatio }}%
</p>
环比
</div>
@@ -393,23 +412,28 @@
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple">
<div class="price"> ￥34500元</div>
<div class="price"> ￥{{ profitAverageCompanyData.currentData }}元</div>
<div class="title flex space-between">
<div>维保单车利润</div>
<div>按照所属公司分</div>
<el-select v-model="profitCompanyName" placeholder="按照所属公司分" @change="profitCompanyFn">
<el-option v-for="item in profitAverageCompany" :key="item.id" :label="item.name" :value="item.name">
</el-option>
</el-select>
</div>
<div class="percentage">
<div class="percentage-s">
<div :class="[profitAverageCompanyData.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i class="el-icon-top" style="font-weight: 700;"></i>
34.5%
<i :class="[profitAverageCompanyData.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ profitAverageCompanyData.yearOnYear }}%
</p>
同比
</div>
<div class="percentage-j">
<div :class="[profitAverageCompanyData.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i class="el-icon-bottom" style="font-weight: 700;"></i>
34.5%
<i :class="[profitAverageCompanyData.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ profitAverageCompanyData.linkRelativeRatio }}%
</p>
环比
</div>
@@ -420,10 +444,10 @@
<!-- 二 -->
<el-row :gutter="20">
<el-col :span="12">
<ConsumeEcharts :id="'pie13'" :title="'维保利润TOP5车型'" :barData="topOne"></ConsumeEcharts>
<ConsumeEcharts :id="'pie13'" ref="profitOne" :title="'维保利润TOP5车型'" :barData="profitOne"></ConsumeEcharts>
</el-col>
<el-col :span="12">
<ConsumeEcharts :id="'pie14'" :title="'维保利润TOP5公司'" :barData="topOne"></ConsumeEcharts>
<ConsumeEcharts :id="'pie14'" ref="profitTwo" :title="'维保利润TOP5公司'" :barData="profitTwo"></ConsumeEcharts>
</el-col>
</el-row>
</el-card>
@@ -432,7 +456,7 @@
<script>
import { merchantListApi } from "@/api/merchant"
import { maintenanceAnalysisLattice, maintenanceAnalysisModelRatio, maintenanceAnalysisCompany, maintenanceAnalysisYieldModel, maintenanceAnalysisYieldCompany, yieldModelandcompany, analysisAvgLattice, costModelandcompany } from "@/api/statistics.js"
import { maintenanceAnalysisLattice, maintenanceAnalysisModelRatio, maintenanceAnalysisCompany, maintenanceAnalysisYieldModel, maintenanceAnalysisYieldCompany, yieldModelandcompany, analysisAvgLattice, costModelandcompany, analysisCostLattice, analysisProfitLattice, modelandcompanyHistogram, profitModelandcompany, profitHistogram } from "@/api/statistics.js"
import AccessoryEcharts from '../components/accessoryEcharts';
import ConsumeEcharts from '../components/consumeEcharts';
export default {
@@ -466,20 +490,14 @@ export default {
pieData3: [],
//饼图4
pieData4: [],
//饼图默认数据
pieData: [{
name: '一',
value: 10
}, {
name: '二',
value: 20
}, {
name: '三',
value: 30
}, {
name: '四',
value: 40
}],
//饼图5
pieData5: [],
//饼图6
pieData6: [],
//饼图7
pieData7: [],
//饼图8
pieData8: [],
//z柱图1
topOne: {
labels: ['一', '二', '三', '四'],
@@ -489,6 +507,24 @@ export default {
labels: ['一', '二', '三', '四'],
values: [10, 20, 30, 40]
},
//维保成本top10
barOne: {
labels: ['一', '二', '三', '四'],
values: [10, 20, 30, 40]
},
barTwo: {
labels: ['一', '二', '三', '四'],
values: [10, 20, 30, 40]
},
//维保利润柱状图top5
profitOne: {
labels: ['一', '二', '三', '四'],
values: [10, 20, 30, 40]
},
profitTwo: {
labels: ['一', '二', '三', '四'],
values: [10, 20, 30, 40]
},
//第二栏选择
//维保单车产值
average: {},
@@ -499,7 +535,27 @@ export default {
//所属公司
averageCompany: [],
averageCompanyData: {},
companyName: ''
companyName: '',
//维保成本格子图 //////////////////////////////
costAverage: {},
//所属公司
costAverageCompany: [],
costAverageCompanyData: {},
costCompanyName: '',
//车型
costAverageModel: [],
costAverageModelData: {},
costModelName: '',
//维保利润格子图
profitAverage: {},
//所属公司
profitAverageCompany: [],
profitAverageCompanyData: {},
profitCompanyName: '',
//车型
profitAverageModel: [],
profitAverageModelData: {},
profitModelName: '',
};
},
mounted() {
@@ -521,6 +577,15 @@ export default {
this.analysisAvgLatticeFn()
//成本饼图
this.costModelandcompanyFn()
//三栏格子图
this.analysisCostLatticeFn()
this.modelandcompanyHistogramFn()
//维保成本饼图
this.profitModelandcompanyFn()
//四栏格子图
this.analysisProfitLatticeFn()
//维保利润柱状图
this.profitHistogramFn()
},
//年月日
selectChange(e) {
@@ -563,37 +628,43 @@ export default {
maintenanceAnalysisLatticeFn() {
maintenanceAnalysisLattice(this.tableFrom).then(res => {
//进店总台次
this.frequency = res.frequency
if (res.frequency) {
this.frequency = res.frequency
}
//维保产值
this.money = res.money
if (res.money) {
this.money = res.money
}
//维保成本
this.accessory = res.accessory
if (res.accessory) {
this.accessory = res.accessory
}
//维保利润
this.profit = res.profit
if (res.profit) {
this.profit = res.profit
}
})
},
//第二栏三个格子
analysisAvgLatticeFn() {
analysisAvgLattice(this.tableFrom).then(res => {
console.log('二蓝壳子', res);
if (res.average) {
this.average = res.average
}
if (res.averageCompany) {
if (res.averageCompany.length) {
this.averageCompany = res.averageCompany
this.averageCompanyData = this.averageCompany[0]
this.companyName = this.averageCompany[0].name
}
if (res.averageModel) {
if (res.averageModel.length) {
this.averageModel = res.averageModel
this.averageModelData = this.averageModel[0]
this.modelName = this.averageModel[0].name
}
})
},
//选择车型
//选择车型(产值)
changeAverageModelFn(e) {
console.log(e);
this.averageModel.forEach(item => {
if (item.name == e) {
this.averageModelData = item
@@ -602,7 +673,7 @@ export default {
},
//选择所属公司
changeAverageCompanyFn(e) {
console.log(e);
// console.log(e);
this.averageCompany.forEach(item => {
if (item.name == e) {
this.averageCompanyData = item
@@ -614,9 +685,10 @@ export default {
maintenanceAnalysisModelRatio(this.tableFrom).then(res => {
if (res.length) {
this.pieData1 = res
} else {
this.pieData1 = this.pieData
}
setTimeout(() => {
this.$refs.pie1.inits()
}, 200);
})
},
//进店台次分所属公司占比
@@ -624,9 +696,11 @@ export default {
maintenanceAnalysisCompany(this.tableFrom).then(res => {
if (res.length) {
this.pieData2 = res
} else {
this.pieData2 = this.pieData
}
setTimeout(() => {
this.$refs.pie2.inits()
}, 200);
})
},
//维保产值按车型占比
@@ -634,9 +708,11 @@ export default {
maintenanceAnalysisYieldModel(this.tableFrom).then(res => {
if (res.length) {
this.pieData3 = res
} else {
this.pieData3 = this.pieData
}
setTimeout(() => {
this.$refs.pie3.inits()
}, 200);
})
},
//维保产值按所属公司占比
@@ -644,30 +720,155 @@ export default {
maintenanceAnalysisYieldCompany(this.tableFrom).then(res => {
if (res.length) {
this.pieData4 = res
} else {
this.pieData4 = this.pieData
}
setTimeout(() => {
this.$refs.pie4.inits()
}, 200);
})
},
//top5车型,公司
yieldModelandcompanyFn() {
yieldModelandcompany(this.tableFrom).then(res => {
console.log('1111111111', res);
if (res.topOne) {
this.topOne = res.topOne
this.topTwo = res.topTwo
}
setTimeout(() => {
this.$refs.topOne.inits()
this.$refs.topTwo.inits()
}, 200);
})
},
// 维保成本占比车型/所属公司饼图
costModelandcompanyFn() {
costModelandcompany(this.tableFrom).then(res => {
console.log('撒结婚登记卡死', res);
if (res.companyPie) {
this.pieData6 = res.companyPie
}
if (res.modelPie) {
this.pieData5 = res.modelPie
}
setTimeout(() => {
this.$refs.pie5.inits()
this.$refs.pie6.inits()
}, 200);
})
},
//第三栏格子图 维保成本
analysisCostLatticeFn() {
analysisCostLattice(this.tableFrom).then(res => {
if (res.average) {
this.costAverage = res.average
}
if (res.averageCompany.length) {
// console.log(1, true);
this.costAverageCompany = res.averageCompany
this.costAverageCompanyData = this.costAverageCompany[0]
this.costCompanyName = this.costAverageCompany[0].name
}
if (res.averageModel.length) {
// console.log(true);
this.costAverageModel = res.averageModel
this.costAverageModelData = this.costAverageModel[0]
this.costModelName = this.costAverageModel[0].name
}
})
},
//选择车型(成本)
costModelFn(e) {
this.costAverageModel.forEach(item => {
if (item.name == e) {
this.costAverageModelData = item
}
})
},
//选择所属公司(成本)
costCompanyFn(e) {
this.costAverageCompany.forEach(item => {
if (item.name == e) {
this.costAverageCompanyData = item
}
})
},
//维保成本top10和维保使用配件数量top10公司柱状图
modelandcompanyHistogramFn() {
modelandcompanyHistogram(this.tableFrom).then(res => {
console.log('top10', res);
if (res.topOne) {
this.barOne = res.topOne
this.barTwo = res.topTwo
}
setTimeout(() => {
this.$refs.barOne.inits()
this.$refs.barTwo.inits()
}, 200);
})
},
//维保成本饼图
profitModelandcompanyFn() {
profitModelandcompany(this.tableFrom).then(res => {
// console.log('饼图', res);
if (res.companyPie) {
this.pieData8 = res.companyPie
}
if (res.modelPie) {
this.pieData7 = res.modelPie
}
setTimeout(() => {
this.$refs.pie7.inits()
this.$refs.pie8.inits()
}, 200);
})
},
//第四栏格子图 维保利润
analysisProfitLatticeFn() {
analysisProfitLattice(this.tableFrom).then(res => {
// console.log('撒结婚登记卡死', res);
this.profitAverage = res.average
if (res.company.length) {
this.profitAverageCompany = res.company
this.profitAverageCompanyData = this.profitAverageCompany[0]
this.profitCompanyName = this.profitAverageCompany[0].name
}
if (res.model.length) {
this.profitAverageModel = res.model
this.profitAverageModelData = this.profitAverageModel[0]
this.profitModelName = this.profitAverageModel[0].name
}
})
},
//选择车型(利润)
profitModelFn(e) {
this.profitAverageModel.forEach(item => {
if (item.name == e) {
this.profitAverageModelData = item
}
})
},
//选择所属公司(利润)
profitCompanyFn(e) {
this.profitAverageCompany.forEach(item => {
if (item.name == e) {
this.profitAverageCompanyData = item
}
})
},
//维保利润(柱状图)
profitHistogramFn() {
profitHistogram(this.tableFrom).then(res => {
console.log(res);
if (res.topOne) {
this.profitOne = res.topOne
this.profitTwo = res.topTwo
}
setTimeout(() => {
this.$refs.profitOne.inits()
this.$refs.profitTwo.inits()
}, 200);
})
}
}

523
src/views/statistics/maintenance/return_cat.vue
View File

@@ -123,39 +123,41 @@
<!-- 四 -->
<el-row :gutter="20">
<el-col :span="6">
<AccessoryEcharts :id="'pie1'" :title="'进店台次分车型占比'" :pieData="pieData1"></AccessoryEcharts>
<AccessoryEcharts :id="'pie1'" ref="pie1" :title="'进店台次分车型占比'" :pieData="pieData1"></AccessoryEcharts>
</el-col>
<el-col :span="6">
<AccessoryEcharts :id="'pie2'" :title="'进店台次分所属公司占比'" :pieData="pieData2"></AccessoryEcharts>
<AccessoryEcharts :id="'pie2'" ref="pie2" :title="'进店台次分所属公司占比'" :pieData="pieData2"></AccessoryEcharts>
</el-col>
<el-col :span="6">
<AccessoryEcharts :id="'pie3'" :title="'维保产值按车型占比'" :pieData="pieData3"></AccessoryEcharts>
<AccessoryEcharts :id="'pie3'" ref="pie3" :title="'维保产值按车型占比'" :pieData="pieData3"></AccessoryEcharts>
</el-col>
<el-col :span="6">
<AccessoryEcharts :id="'pie4'" :title="'维保产值按所属公司占比'" :pieData="pieData4"></AccessoryEcharts>
<AccessoryEcharts :id="'pie4'" ref="pie4" :title="'维保产值按所属公司占比'" :pieData="pieData4"></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="price"> ￥{{ average.currentData }}元</div>
<div class="title flex space-between">
<div>维保单车产值</div>
<div>平均单车</div>
</div>
<div class="percentage">
<div class="percentage-s">
<div :class="[average.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i class="el-icon-top" style="font-weight: 700;"></i>
34.5%
<i :class="[average.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ average.yearOnYear }}%
</p>
同比
</div>
<div class="percentage-j">
<div :class="[average.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i class="el-icon-bottom" style="font-weight: 700;"></i>
34.5%
<i :class="[average.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ average.linkRelativeRatio }}%
</p>
环比
</div>
@@ -164,23 +166,28 @@
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple">
<div class="price"> ￥34500元</div>
<div class="price"> ￥{{ averageModelData.currentData }}元</div>
<div class="title flex space-between">
<div>维保单车产值</div>
<div>按照车型分</div>
<el-select v-model="modelName" placeholder="按照车型分" @change="changeAverageModelFn">
<el-option v-for="item in averageModel" :key="item.id" :label="item.name" :value="item.name">
</el-option>
</el-select>
</div>
<div class="percentage">
<div class="percentage-s">
<div :class="[averageModelData.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i class="el-icon-top" style="font-weight: 700;"></i>
34.5%
<i :class="[averageModelData.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ averageModelData.yearOnYear }}%
</p>
同比
</div>
<div class="percentage-j">
<div :class="[averageModelData.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i class="el-icon-bottom" style="font-weight: 700;"></i>
34.5%
<i :class="[averageModelData.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ averageModelData.linkRelativeRatio }}%
</p>
环比
</div>
@@ -189,23 +196,28 @@
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple">
<div class="price"> ￥34500元</div>
<div class="price"> ￥{{ averageCompanyData.currentData }}元</div>
<div class="title flex space-between">
<div>维保单车产值</div>
<div>按照所属公司分</div>
<el-select v-model="companyName" placeholder="按照所属公司分" @change="changeAverageCompanyFn">
<el-option v-for="item in averageCompany" :key="item.id" :label="item.name" :value="item.name">
</el-option>
</el-select>
</div>
<div class="percentage">
<div class="percentage-s">
<div :class="[averageCompanyData.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i class="el-icon-top" style="font-weight: 700;"></i>
34.5%
<i :class="[averageCompanyData.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ averageCompanyData.yearOnYear }}%
</p>
同比
</div>
<div class="percentage-j">
<div :class="[averageCompanyData.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i class="el-icon-bottom" style="font-weight: 700;"></i>
34.5%
<i :class="[averageCompanyData.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ averageCompanyData.linkRelativeRatio }}%
</p>
环比
</div>
@@ -216,42 +228,44 @@
<!-- 二 -->
<el-row :gutter="20">
<el-col :span="12">
<ConsumeEcharts :id="'pie5'" :title="'维保产值TOP5车型'"></ConsumeEcharts>
<ConsumeEcharts :id="'pie5'" ref="topOne" :title="'维保产值TOP5车型'" :barData="topOne"></ConsumeEcharts>
</el-col>
<el-col :span="12">
<ConsumeEcharts :id="'pie6'" :title="'维保产值TOP5公司'"></ConsumeEcharts>
<ConsumeEcharts :id="'pie6'" ref="topTwo" :title="'维保产值TOP5公司'" :barData="topTwo"></ConsumeEcharts>
</el-col>
</el-row>
<!-- 二 -->
<el-row :gutter="20">
<el-col :span="12">
<AccessoryEcharts :id="'pie7'" :title="'维保成本按车型占比'"></AccessoryEcharts>
<AccessoryEcharts :id="'pie7'" ref="pie5" :title="'维保成本按车型占比'" :pieData="pieData5"></AccessoryEcharts>
</el-col>
<el-col :span="12">
<AccessoryEcharts :id="'pie8'" :title="'维保成本按所属公司占比'"></AccessoryEcharts>
<AccessoryEcharts :id="'pie8'" ref="pie6" :title="'维保成本按所属公司占比'" :pieData="pieData6"></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="price"> ￥{{ costAverage.currentData }}元</div>
<div class="title flex space-between">
<div>维保单车成本</div>
<div>平均单车</div>
</div>
<div class="percentage">
<div class="percentage-s">
<div :class="[costAverage.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i class="el-icon-top" style="font-weight: 700;"></i>
34.5%
<i :class="[costAverage.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ costAverage.yearOnYear }}%
</p>
同比
</div>
<div class="percentage-j">
<div :class="[costAverage.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i class="el-icon-bottom" style="font-weight: 700;"></i>
34.5%
<i :class="[costAverage.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ costAverage.linkRelativeRatio }}%
</p>
环比
</div>
@@ -260,23 +274,28 @@
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple">
<div class="price"> ￥34500元</div>
<div class="price"> ￥{{ costAverageModelData.currentData }}元</div>
<div class="title flex space-between">
<div>维保单车成本</div>
<div>按照车型分</div>
<el-select v-model="costModelName" placeholder="按照车型分" @change="costModelFn">
<el-option v-for="item in costAverageModel" :key="item.id" :label="item.name" :value="item.name">
</el-option>
</el-select>
</div>
<div class="percentage">
<div class="percentage-s">
<div :class="[costAverageModelData.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i class="el-icon-top" style="font-weight: 700;"></i>
34.5%
<i :class="[costAverageModelData.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ costAverageModelData.yearOnYear }}%
</p>
同比
</div>
<div class="percentage-j">
<div :class="[costAverageModelData.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i class="el-icon-bottom" style="font-weight: 700;"></i>
34.5%
<i :class="[costAverageModelData.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ costAverageModelData.linkRelativeRatio }}%
</p>
环比
</div>
@@ -285,23 +304,28 @@
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple">
<div class="price"> ￥34500元</div>
<div class="price"> ￥{{ costAverageCompanyData.currentData }}元</div>
<div class="title flex space-between">
<div>维保单车成本</div>
<div>按照所属公司分</div>
<el-select v-model="costCompanyName" placeholder="按照所属公司分" @change="costCompanyFn">
<el-option v-for="item in costAverageCompany" :key="item.id" :label="item.name" :value="item.name">
</el-option>
</el-select>
</div>
<div class="percentage">
<div class="percentage-s">
<div :class="[costAverageCompanyData.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i class="el-icon-top" style="font-weight: 700;"></i>
34.5%
<i :class="[costAverageCompanyData.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ costAverageCompanyData.yearOnYear }}%
</p>
同比
</div>
<div class="percentage-j">
<div :class="[costAverageCompanyData.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i class="el-icon-bottom" style="font-weight: 700;"></i>
34.5%
<i :class="[costAverageCompanyData.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ costAverageCompanyData.linkRelativeRatio }}%
</p>
环比
</div>
@@ -312,42 +336,44 @@
<!-- 二 -->
<el-row :gutter="20">
<el-col :span="12">
<ConsumeEcharts :id="'pie9'" :title="'维保成本TOP10'"></ConsumeEcharts>
<ConsumeEcharts :id="'pie9'" ref="barOne" :title="'维保成本TOP10'" :barData="barOne"></ConsumeEcharts>
</el-col>
<el-col :span="12">
<ConsumeEcharts :id="'pie10'" :title="'维保成本配件使用数量TOP10'"></ConsumeEcharts>
<ConsumeEcharts :id="'pie10'" ref="barTwo" :title="'维保成本配件使用数量TOP10'" :barData="barTwo"></ConsumeEcharts>
</el-col>
</el-row>
<!-- 二 -->
<el-row :gutter="20">
<el-col :span="12">
<AccessoryEcharts :id="'pie11'" :title="'维保利润按车型占比'"></AccessoryEcharts>
<AccessoryEcharts :id="'pie11'" ref="pie7" :title="'维保利润按车型占比'" :pieData="pieData7"></AccessoryEcharts>
</el-col>
<el-col :span="12">
<AccessoryEcharts :id="'pie12'" :title="'维保利润按所属公司占比'"></AccessoryEcharts>
<AccessoryEcharts :id="'pie12'" ref="pie8" :title="'维保利润按所属公司占比'" :pieData="pieData8"></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="price"> ￥{{ profitAverage.currentData }}元</div>
<div class="title flex space-between">
<div>维保单车利润</div>
<div>平均单车</div>
</div>
<div class="percentage">
<div class="percentage-s">
<div :class="[profitAverage.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i class="el-icon-top" style="font-weight: 700;"></i>
34.5%
<i :class="[profitAverage.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ profitAverage.yearOnYear }}%
</p>
同比
</div>
<div class="percentage-j">
<div :class="[profitAverage.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i class="el-icon-bottom" style="font-weight: 700;"></i>
34.5%
<i :class="[profitAverage.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ profitAverage.linkRelativeRatio }}%
</p>
环比
</div>
@@ -356,23 +382,28 @@
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple">
<div class="price"> ￥34500元</div>
<div class="price"> ￥{{ profitAverageModelData.currentData }}元</div>
<div class="title flex space-between">
<div>维保单车利润</div>
<div>按照车型分</div>
<el-select v-model="profitModelName" placeholder="按照车型分" @change="profitModelFn">
<el-option v-for="item in profitAverageModel" :key="item.id" :label="item.name" :value="item.name">
</el-option>
</el-select>
</div>
<div class="percentage">
<div class="percentage-s">
<div :class="[profitAverageModelData.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i class="el-icon-top" style="font-weight: 700;"></i>
34.5%
<i :class="[profitAverageModelData.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ profitAverageModelData.yearOnYear }}%
</p>
同比
</div>
<div class="percentage-j">
<div :class="[profitAverageModelData.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i class="el-icon-bottom" style="font-weight: 700;"></i>
34.5%
<i :class="[profitAverageModelData.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ profitAverageModelData.linkRelativeRatio }}%
</p>
环比
</div>
@@ -381,23 +412,28 @@
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple">
<div class="price"> ￥34500元</div>
<div class="price"> ￥{{ profitAverageCompanyData.currentData }}元</div>
<div class="title flex space-between">
<div>维保单车利润</div>
<div>按照所属公司分</div>
<el-select v-model="profitCompanyName" placeholder="按照所属公司分" @change="profitCompanyFn">
<el-option v-for="item in profitAverageCompany" :key="item.id" :label="item.name" :value="item.name">
</el-option>
</el-select>
</div>
<div class="percentage">
<div class="percentage-s">
<div :class="[profitAverageCompanyData.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i class="el-icon-top" style="font-weight: 700;"></i>
34.5%
<i :class="[profitAverageCompanyData.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ profitAverageCompanyData.yearOnYear }}%
</p>
同比
</div>
<div class="percentage-j">
<div :class="[profitAverageCompanyData.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i class="el-icon-bottom" style="font-weight: 700;"></i>
34.5%
<i :class="[profitAverageCompanyData.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ profitAverageCompanyData.linkRelativeRatio }}%
</p>
环比
</div>
@@ -408,10 +444,10 @@
<!-- 二 -->
<el-row :gutter="20">
<el-col :span="12">
<ConsumeEcharts :id="'pie13'" :title="'维保利润TOP5车型'"></ConsumeEcharts>
<ConsumeEcharts :id="'pie13'" ref="profitOne" :title="'维保利润TOP5车型'" :barData="profitOne"></ConsumeEcharts>
</el-col>
<el-col :span="12">
<ConsumeEcharts :id="'pie14'" :title="'维保利润TOP5公司'"></ConsumeEcharts>
<ConsumeEcharts :id="'pie14'" ref="profitTwo" :title="'维保利润TOP5公司'" :barData="profitTwo"></ConsumeEcharts>
</el-col>
</el-row>
</el-card>
@@ -420,7 +456,7 @@
<script>
import { merchantListApi } from "@/api/merchant"
import { maintenanceAnalysisLattice, maintenanceAnalysisModelRatio, maintenanceAnalysisCompany, maintenanceAnalysisYieldModel, maintenanceAnalysisYieldCompany } from "@/api/statistics.js"
import { maintenanceAnalysisLattice, maintenanceAnalysisModelRatio, maintenanceAnalysisCompany, maintenanceAnalysisYieldModel, maintenanceAnalysisYieldCompany, yieldModelandcompany, analysisAvgLattice, costModelandcompany, analysisCostLattice, analysisProfitLattice, modelandcompanyHistogram, profitModelandcompany, profitHistogram } from "@/api/statistics.js"
import AccessoryEcharts from '../components/accessoryEcharts';
import ConsumeEcharts from '../components/consumeEcharts';
export default {
@@ -447,14 +483,79 @@ export default {
//维保利润
profit: {},
//饼图1
pieData1:[],
pieData1: [],
//饼图2
pieData2:[],
pieData2: [],
//饼图3
pieData3:[],
pieData3: [],
//饼图4
pieData4:[],
pieData4: [],
//饼图5
pieData5: [],
//饼图6
pieData6: [],
//饼图7
pieData7: [],
//饼图8
pieData8: [],
//z柱图1
topOne: {
labels: ['一', '二', '三', '四'],
values: [10, 20, 30, 40]
},
topTwo: {
labels: ['一', '二', '三', '四'],
values: [10, 20, 30, 40]
},
//维保成本top10
barOne: {
labels: ['一', '二', '三', '四'],
values: [10, 20, 30, 40]
},
barTwo: {
labels: ['一', '二', '三', '四'],
values: [10, 20, 30, 40]
},
//维保利润柱状图top5
profitOne: {
labels: ['一', '二', '三', '四'],
values: [10, 20, 30, 40]
},
profitTwo: {
labels: ['一', '二', '三', '四'],
values: [10, 20, 30, 40]
},
//第二栏选择
//维保单车产值
average: {},
//车型
averageModel: [],
averageModelData: {},
modelName: '',
//所属公司
averageCompany: [],
averageCompanyData: {},
companyName: '',
//维保成本格子图 //////////////////////////////
costAverage: {},
//所属公司
costAverageCompany: [],
costAverageCompanyData: {},
costCompanyName: '',
//车型
costAverageModel: [],
costAverageModelData: {},
costModelName: '',
//维保利润格子图
profitAverage: {},
//所属公司
profitAverageCompany: [],
profitAverageCompanyData: {},
profitCompanyName: '',
//车型
profitAverageModel: [],
profitAverageModelData: {},
profitModelName: '',
};
},
mounted() {
@@ -471,6 +572,20 @@ export default {
this.maintenanceAnalysisCompanyFn()
this.maintenanceAnalysisYieldModelFn()
this.maintenanceAnalysisYieldCompanyFn()
this.yieldModelandcompanyFn()
//二栏格子
this.analysisAvgLatticeFn()
//成本饼图
this.costModelandcompanyFn()
//三栏格子图
this.analysisCostLatticeFn()
this.modelandcompanyHistogramFn()
//维保成本饼图
this.profitModelandcompanyFn()
//四栏格子图
this.analysisProfitLatticeFn()
//维保利润柱状图
this.profitHistogramFn()
},
//年月日
selectChange(e) {
@@ -513,43 +628,249 @@ export default {
maintenanceAnalysisLatticeFn() {
maintenanceAnalysisLattice(this.tableFrom).then(res => {
//进店总台次
this.frequency = res.frequency
if (res.frequency) {
this.frequency = res.frequency
}
//维保产值
this.money = res.money
if (res.money) {
this.money = res.money
}
//维保成本
this.accessory = res.accessory
if (res.accessory) {
this.accessory = res.accessory
}
//维保利润
this.profit = res.profit
if (res.profit) {
this.profit = res.profit
}
})
},
//第二栏三个格子
analysisAvgLatticeFn() {
analysisAvgLattice(this.tableFrom).then(res => {
if (res.average) {
this.average = res.average
}
if (res.averageCompany.length) {
this.averageCompany = res.averageCompany
this.averageCompanyData = this.averageCompany[0]
this.companyName = this.averageCompany[0].name
}
if (res.averageModel.length) {
this.averageModel = res.averageModel
this.averageModelData = this.averageModel[0]
this.modelName = this.averageModel[0].name
}
})
},
//选择车型(产值)
changeAverageModelFn(e) {
this.averageModel.forEach(item => {
if (item.name == e) {
this.averageModelData = item
}
})
},
//选择所属公司
changeAverageCompanyFn(e) {
// console.log(e);
this.averageCompany.forEach(item => {
if (item.name == e) {
this.averageCompanyData = item
}
})
},
//进店台次分车型占比
maintenanceAnalysisModelRatioFn() {
maintenanceAnalysisModelRatio(this.tableFrom).then(res => {
this.pieData1=res
console.log(1, res);
if (res.length) {
this.pieData1 = res
}
setTimeout(() => {
this.$refs.pie1.inits()
}, 200);
})
},
//进店台次分所属公司占比
maintenanceAnalysisCompanyFn() {
maintenanceAnalysisCompany(this.tableFrom).then(res => {
console.log(2, res);
this.pieData2=res
if (res.length) {
this.pieData2 = res
}
setTimeout(() => {
this.$refs.pie2.inits()
}, 200);
})
},
//维保产值按车型占比
maintenanceAnalysisYieldModelFn() {
maintenanceAnalysisYieldModel(this.tableFrom).then(res => {
console.log(3, res);
this.pieData3=res
if (res.length) {
this.pieData3 = res
}
setTimeout(() => {
this.$refs.pie3.inits()
}, 200);
})
},
//维保产值按所属公司占比
maintenanceAnalysisYieldCompanyFn() {
maintenanceAnalysisYieldCompany(this.tableFrom).then(res => {
console.log(4, res);
this.pieData4=res
if (res.length) {
this.pieData4 = res
}
setTimeout(() => {
this.$refs.pie4.inits()
}, 200);
})
},
//top5车型,公司
yieldModelandcompanyFn() {
yieldModelandcompany(this.tableFrom).then(res => {
console.log('1111111111', res);
if (res.topOne) {
this.topOne = res.topOne
this.topTwo = res.topTwo
}
setTimeout(() => {
this.$refs.topOne.inits()
this.$refs.topTwo.inits()
}, 200);
})
},
// 维保成本占比车型/所属公司饼图
costModelandcompanyFn() {
costModelandcompany(this.tableFrom).then(res => {
if (res.companyPie) {
this.pieData6 = res.companyPie
}
if (res.modelPie) {
this.pieData5 = res.modelPie
}
setTimeout(() => {
this.$refs.pie5.inits()
this.$refs.pie6.inits()
}, 200);
})
},
//第三栏格子图 维保成本
analysisCostLatticeFn() {
analysisCostLattice(this.tableFrom).then(res => {
if (res.average) {
this.costAverage = res.average
}
if (res.averageCompany.length) {
// console.log(1, true);
this.costAverageCompany = res.averageCompany
this.costAverageCompanyData = this.costAverageCompany[0]
this.costCompanyName = this.costAverageCompany[0].name
}
if (res.averageModel.length) {
// console.log(true);
this.costAverageModel = res.averageModel
this.costAverageModelData = this.costAverageModel[0]
this.costModelName = this.costAverageModel[0].name
}
})
},
//选择车型(成本)
costModelFn(e) {
this.costAverageModel.forEach(item => {
if (item.name == e) {
this.costAverageModelData = item
}
})
},
//选择所属公司(成本)
costCompanyFn(e) {
this.costAverageCompany.forEach(item => {
if (item.name == e) {
this.costAverageCompanyData = item
}
})
},
//维保成本top10和维保使用配件数量top10公司柱状图
modelandcompanyHistogramFn() {
modelandcompanyHistogram(this.tableFrom).then(res => {
console.log('top10', res);
if (res.topOne) {
this.barOne = res.topOne
this.barTwo = res.topTwo
}
setTimeout(() => {
this.$refs.barOne.inits()
this.$refs.barTwo.inits()
}, 200);
})
},
//维保成本饼图
profitModelandcompanyFn() {
profitModelandcompany(this.tableFrom).then(res => {
// console.log('饼图', res);
if (res.companyPie) {
this.pieData8 = res.companyPie
}
if (res.modelPie) {
this.pieData7 = res.modelPie
}
setTimeout(() => {
this.$refs.pie7.inits()
this.$refs.pie8.inits()
}, 200);
})
},
//第四栏格子图 维保利润
analysisProfitLatticeFn() {
analysisProfitLattice(this.tableFrom).then(res => {
// console.log('撒结婚登记卡死', res);
this.profitAverage = res.average
if (res.company.length) {
this.profitAverageCompany = res.company
this.profitAverageCompanyData = this.profitAverageCompany[0]
this.profitCompanyName = this.profitAverageCompany[0].name
}
if (res.model.length) {
this.profitAverageModel = res.model
this.profitAverageModelData = this.profitAverageModel[0]
this.profitModelName = this.profitAverageModel[0].name
}
})
},
//选择车型(利润)
profitModelFn(e) {
this.profitAverageModel.forEach(item => {
if (item.name == e) {
this.profitAverageModelData = item
}
})
},
//选择所属公司(利润)
profitCompanyFn(e) {
this.profitAverageCompany.forEach(item => {
if (item.name == e) {
this.profitAverageCompanyData = item
}
})
},
//维保利润(柱状图)
profitHistogramFn() {
profitHistogram(this.tableFrom).then(res => {
console.log(res);
if (res.topOne) {
this.profitOne = res.topOne
this.profitTwo = res.topTwo
}
setTimeout(() => {
this.$refs.profitOne.inits()
this.$refs.profitTwo.inits()
}, 200);
})
}
}
};
</script>