7.26(成本分析
This commit is contained in:
Hong
@@ -16,4 +16,42 @@ export function analysisLineChart(data) {
|
||||
method: 'post',
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 成本分析 格子数据 api/admin/platform/monthly/analysis/lattice
|
||||
*/
|
||||
export function monthlyAnalysisLattice(data) {
|
||||
return request({
|
||||
url: '/admin/platform/monthly/analysis/lattice',
|
||||
method: 'post',
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
//成本分析 /api/admin/platform/monthly/analysis/pie/chart
|
||||
export function monthlyAnalysisPieChart(data) {
|
||||
return request({
|
||||
url: '/admin/platform/monthly/analysis/pie/chart',
|
||||
method: 'post',
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
//成本分析 采购TOP20 //api/admin/platform/monthly/analysis/purchase
|
||||
export function monthlyAnalysisPiePurchase(data) {
|
||||
return request({
|
||||
url: '/admin/platform/monthly/analysis/purchase',
|
||||
method: 'post',
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
//维修类型月度分析格子图 /api/admin/platform/monthly/maintenance/analysis/lattice
|
||||
export function maintenanceAnalysisLattice(data) {
|
||||
return request({
|
||||
url: '/admin/platform/monthly/maintenance/analysis/lattice',
|
||||
method: 'post',
|
||||
data,
|
||||
});
|
||||
}
|
||||
@@ -16,7 +16,7 @@
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="11">
|
||||
<el-form-item label="车系" prop="name">
|
||||
<el-form-item label="适用车系" prop="name">
|
||||
<el-select v-model="user.modelId" style="width: 200px;" filterable remote reserve-keyword placeholder="选择车系"
|
||||
:loading="loading" clearable :remote-method="remoteMethod">
|
||||
<el-option v-for="(item, index) in modelList" :key="index" :label="item.name" :value="item.id">
|
||||
|
||||
@@ -1,14 +1,12 @@
|
||||
<template>
|
||||
<div class="foldline">
|
||||
<div class="divBox" style="padding-top: 0">
|
||||
<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>
|
||||
<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>
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24">
|
||||
<el-card class="box-card2">
|
||||
<div id="accessory-echarts" style="width: 500px; height: 500px; padding-top: 25px"></div>
|
||||
<div id="accessory-echarts" style="width: 100%; height: 500px; padding-top: 25px"></div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@@ -17,6 +17,7 @@ import * as echarts from 'echarts';
|
||||
import { brokenLineApi } from '@/api/dashboard';
|
||||
export default {
|
||||
name: 'accessoryEcharts',
|
||||
props:['pie'],
|
||||
data() {
|
||||
return {
|
||||
lineData: [],
|
||||
@@ -57,16 +58,7 @@ export default {
|
||||
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' },
|
||||
],
|
||||
data: this.pie,
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24">
|
||||
<el-card class="box-card2">
|
||||
<div id="consume-echarts" style="width: 1000px; height: 500px; padding-top: 25px"></div>
|
||||
<div id="consume-echarts" style="width: 100%; height: 500px; padding-top: 25px"></div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@@ -17,6 +17,7 @@ import * as echarts from 'echarts';
|
||||
import { brokenLineApi } from '@/api/dashboard';
|
||||
export default {
|
||||
name: 'consumeEcharts',
|
||||
props:['quantity'],
|
||||
data() {
|
||||
return {
|
||||
lineData: [],
|
||||
@@ -34,6 +35,10 @@ export default {
|
||||
this.lineData = res;
|
||||
let myChart = echarts.init(document.getElementById('consume-echarts'));
|
||||
let option = {
|
||||
title: {
|
||||
text: '配件消耗数量TOP10',
|
||||
left: 'center'
|
||||
},
|
||||
color: ['#37A2FF'],
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
@@ -51,15 +56,16 @@ export default {
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Gro', 'Bll', 'Red',]
|
||||
data: this.quantity.titArr
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [200, 150, 130, 120, 110, 96, 80, 70, 18, 12],
|
||||
type: 'bar'
|
||||
data: this.quantity.numArr,
|
||||
type: 'bar',
|
||||
barWidth: 30 // 设置宽度为类目宽度的50%
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
@@ -20,6 +20,7 @@ import * as echarts from 'echarts';
|
||||
import { brokenLineApi } from '@/api/dashboard';
|
||||
export default {
|
||||
name: 'foldline',
|
||||
props:['top20'],
|
||||
data() {
|
||||
return {
|
||||
lineData: [],
|
||||
@@ -41,102 +42,37 @@ export default {
|
||||
let option = {
|
||||
color: ['#80FFA5', '#37A2FF', '#FF0087'],
|
||||
title: {
|
||||
text: '营业额成本利润趋势',
|
||||
text: '配件采购金额TOP20',
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
label: {
|
||||
backgroundColor: '#6a7985',
|
||||
},
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
data: ['总营业额', '总成本', '利润'],
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
saveAsImage: {},
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['1月', '2月', '3月', '4月', '5月','6月','7月','8月',"9月","11月","12月"],
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '总营业额',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
data: [
|
||||
this.lineData[0].data.workOrderNum,
|
||||
this.lineData[0].data.driverNum,
|
||||
this.lineData[0].data.carRentalOrderNum,
|
||||
this.lineData[0].data.carSellOrderNum,
|
||||
this.lineData[0].data.cardOrderNum,
|
||||
this.lineData[2].data.workOrderNum,
|
||||
this.lineData[2].data.driverNum,
|
||||
this.lineData[2].data.carRentalOrderNum,
|
||||
this.lineData[2].data.carSellOrderNum,
|
||||
this.lineData[2].data.workOrderNum,
|
||||
this.lineData[2].data.driverNum,
|
||||
this.lineData[2].data.carRentalOrderNum,
|
||||
],
|
||||
},
|
||||
{
|
||||
name: '总成本',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
data: [
|
||||
this.lineData[1].data.workOrderNum,
|
||||
this.lineData[2].data.workOrderNum,
|
||||
this.lineData[2].data.driverNum,
|
||||
this.lineData[2].data.carRentalOrderNum,
|
||||
this.lineData[2].data.carSellOrderNum,
|
||||
this.lineData[2].data.workOrderNum,
|
||||
this.lineData[2].data.driverNum,
|
||||
this.lineData[2].data.carRentalOrderNum,
|
||||
this.lineData[1].data.driverNum,
|
||||
this.lineData[1].data.carRentalOrderNum,
|
||||
this.lineData[1].data.carSellOrderNum,
|
||||
this.lineData[1].data.cardOrderNum,
|
||||
],
|
||||
},
|
||||
{
|
||||
name: '利润',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
data: [
|
||||
this.lineData[2].data.workOrderNum,
|
||||
this.lineData[2].data.driverNum,
|
||||
this.lineData[2].data.carRentalOrderNum,
|
||||
this.lineData[2].data.workOrderNum,
|
||||
this.lineData[2].data.driverNum,
|
||||
this.lineData[2].data.carRentalOrderNum,
|
||||
this.lineData[2].data.carSellOrderNum,
|
||||
this.lineData[2].data.workOrderNum,
|
||||
this.lineData[2].data.driverNum,
|
||||
this.lineData[2].data.carRentalOrderNum,
|
||||
this.lineData[2].data.cardOrderNum,
|
||||
this.lineData[2].data.workOrderNum,
|
||||
],
|
||||
},
|
||||
],
|
||||
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%
|
||||
}
|
||||
]
|
||||
};
|
||||
myChart.setOption(option);
|
||||
//建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
|
||||
|
||||
@@ -1,180 +1,351 @@
|
||||
<template>
|
||||
<div class="divBox">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<div class="grid-content bg-purple">
|
||||
<div class="price"> ￥34500元</div>
|
||||
<div class="title">总成本</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>
|
||||
环比
|
||||
<el-card class="box-card">
|
||||
<div style="display: flex;align-items: center;">
|
||||
<div>
|
||||
<el-select v-model="tableFrom.merId" style="width: 200px;" @change="merChange" filterable remote
|
||||
reserve-keyword placeholder="选择维修店" :loading="loading" clearable :remote-method="remoteMethod">
|
||||
<el-option v-for="(item, index) in merchantList" :key="index" :label="item.name" :value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<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"> ￥{{ totalCostVo.currentData }}元</div>
|
||||
<div class="title">进店总台词</div>
|
||||
<div class="percentage">
|
||||
<div :class="[totalCostVo.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
|
||||
<p>
|
||||
<i :class="[totalCostVo.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
|
||||
style="font-weight: 700;"></i>
|
||||
{{ totalCostVo.yearOnYear }}%
|
||||
</p>
|
||||
同比
|
||||
</div>
|
||||
<div :class="[totalCostVo.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
|
||||
<p>
|
||||
<i :class="[totalCostVo.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
|
||||
style="font-weight: 700;"></i>
|
||||
{{ totalCostVo.linkRelativeRatio }}%
|
||||
</p>
|
||||
环比
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="grid-content bg-purple">
|
||||
<div class="price"> ￥34500元</div>
|
||||
<div class="title">只供配件</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>
|
||||
环比
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="grid-content bg-purple">
|
||||
<div class="price"> ￥{{ directSupplyVo.currentData }}元</div>
|
||||
<div class="title">维保产值</div>
|
||||
<div class="percentage">
|
||||
<div :class="[directSupplyVo.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
|
||||
<p>
|
||||
<i :class="[directSupplyVo.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
|
||||
style="font-weight: 700;"></i>
|
||||
{{ directSupplyVo.yearOnYear }}%
|
||||
</p>
|
||||
同比
|
||||
</div>
|
||||
<div :class="[directSupplyVo.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
|
||||
<p>
|
||||
<i :class="[directSupplyVo.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
|
||||
style="font-weight: 700;"></i>
|
||||
{{ directSupplyVo.linkRelativeRatio }}%
|
||||
</p>
|
||||
环比
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="grid-content bg-purple">
|
||||
<div class="price"> ￥34500元</div>
|
||||
<div class="title">外采配件</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>
|
||||
环比
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="grid-content bg-purple">
|
||||
<div class="price"> ￥{{ procureVo.currentData }}元</div>
|
||||
<div class="title">维保成本</div>
|
||||
<div class="percentage">
|
||||
<div :class="[procureVo.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
|
||||
<p>
|
||||
<i :class="[procureVo.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
|
||||
style="font-weight: 700;"></i>
|
||||
{{ procureVo.yearOnYear }}%
|
||||
</p>
|
||||
同比
|
||||
</div>
|
||||
<div :class="[procureVo.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
|
||||
<p>
|
||||
<i :class="[procureVo.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
|
||||
style="font-weight: 700;"></i>
|
||||
{{ procureVo.linkRelativeRatio }}%
|
||||
</p>
|
||||
环比
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="grid-content bg-purple">
|
||||
<div class="price"> 34.4%</div>
|
||||
<div class="title">成本率</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>
|
||||
环比
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="grid-content bg-purple">
|
||||
<div class="price"> ￥{{ costRate.currentData }}元</div>
|
||||
<div class="title">成本率</div>
|
||||
<div class="percentage">
|
||||
<div :class="[costRate.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
|
||||
<p>
|
||||
<i :class="[costRate.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
|
||||
style="font-weight: 700;"></i>
|
||||
{{ costRate.yearOnYear }}%
|
||||
</p>
|
||||
同比
|
||||
</div>
|
||||
<div :class="[costRate.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
|
||||
<p>
|
||||
<i :class="[costRate.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
|
||||
style="font-weight: 700;"></i>
|
||||
{{ costRate.linkRelativeRatio }}%
|
||||
</p>
|
||||
环比
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div style="display: flex;">
|
||||
<AccessoryEcharts></AccessoryEcharts>
|
||||
<ConsumeEcharts></ConsumeEcharts>
|
||||
</div>
|
||||
|
||||
<FoldLine></FoldLine>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<AccessoryEcharts :pie="pie"></AccessoryEcharts>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<ConsumeEcharts :quantity="quantity"></ConsumeEcharts>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<FoldLine :top20="top20"></FoldLine>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { merchantListApi } from "@/api/merchant"
|
||||
import { monthlyAnalysisLattice, monthlyAnalysisPieChart, monthlyAnalysisPiePurchase } from "@/api/statistics.js"
|
||||
import FoldLine from './components/foldline';
|
||||
import AccessoryEcharts from './components/accessoryEcharts';
|
||||
import ConsumeEcharts from './components/consumeEcharts';
|
||||
export default {
|
||||
name: 'Dashboard',
|
||||
components: { FoldLine,AccessoryEcharts,ConsumeEcharts },
|
||||
components: { FoldLine, AccessoryEcharts, ConsumeEcharts },
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
fromList: this.$constants.fromList,
|
||||
time1: [],
|
||||
tableFrom: {
|
||||
page: 1,
|
||||
dateLimit: ''
|
||||
},
|
||||
//总成本
|
||||
totalCostVo: {},
|
||||
//直供配件
|
||||
directSupplyVo: {},
|
||||
//外采配件
|
||||
procureVo: {},
|
||||
//成本率
|
||||
costRate: {},
|
||||
//维修店列表
|
||||
merchantList: [],
|
||||
//饼图
|
||||
pie: [],
|
||||
quantity: {
|
||||
titArr: [],
|
||||
numArr: []
|
||||
},
|
||||
//采购前20
|
||||
top20:{}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.remoteMethod()
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
//top20
|
||||
monthlyAnalysisPiePurchaseFn() {
|
||||
monthlyAnalysisPiePurchase(this.tableFrom).then(res => {
|
||||
if (res) {
|
||||
console.log(res);
|
||||
this.top20=res
|
||||
}
|
||||
})
|
||||
},
|
||||
//获取图表数据
|
||||
monthlyAnalysisPieChartFn() {
|
||||
monthlyAnalysisPieChart(this.tableFrom).then(res => {
|
||||
if (res) {
|
||||
this.pie = res.pie
|
||||
let arr3 = []
|
||||
let arr4 = []
|
||||
res.quantity.forEach(item => {
|
||||
arr3.push(item.name)
|
||||
arr4.push(item.value)
|
||||
})
|
||||
this.quantity.titArr = arr3
|
||||
this.quantity.numArr = arr4
|
||||
console.log(this.quantity);
|
||||
}
|
||||
})
|
||||
},
|
||||
//获取数据
|
||||
monthlyAnalysisLatticeFn() {
|
||||
monthlyAnalysisLattice(this.tableFrom).then(res => {
|
||||
// console.log(res);
|
||||
if (res) {
|
||||
//总成本
|
||||
this.totalCostVo = res.totalCostVo
|
||||
//直供配件
|
||||
this.directSupplyVo = res.directSupplyVo
|
||||
//外采配件
|
||||
this.procureVo = res.procureVo
|
||||
//成本率
|
||||
this.costRate = res.costRate
|
||||
}
|
||||
})
|
||||
// console.log(this.$refs);
|
||||
},
|
||||
//年月日
|
||||
selectChange(e) {
|
||||
// console.log(e);
|
||||
this.tableFrom.dateLimit = e;
|
||||
this.timeVal = [];
|
||||
|
||||
},
|
||||
init() {
|
||||
this.monthlyAnalysisLatticeFn()
|
||||
this.monthlyAnalysisPieChartFn()
|
||||
this.monthlyAnalysisPiePurchaseFn()
|
||||
},
|
||||
//选择确认
|
||||
merChange(e) {
|
||||
// console.log(e);
|
||||
this.tableFrom.merId = e
|
||||
this.init()
|
||||
},
|
||||
//监听选择
|
||||
async remoteMethod(query) {
|
||||
// console.log(query);
|
||||
this.loading = true;
|
||||
await merchantListApi({
|
||||
keywords: query,
|
||||
page: 1,
|
||||
limit: 1000,
|
||||
}).then(res => {
|
||||
this.loading = false
|
||||
this.merchantList = res.list
|
||||
this.tableFrom.merId = this.merchantList[0].id
|
||||
this.init()
|
||||
})
|
||||
},
|
||||
//时间选择监听
|
||||
timeChange(e) {
|
||||
// console.log(e);
|
||||
if (e) {
|
||||
this.tableFrom.dateLimit = e.join(',')
|
||||
} else {
|
||||
this.tableFrom.dateLimit = ''
|
||||
}
|
||||
this.init()
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
<style scoped lang="scss">
|
||||
.price {
|
||||
font-size: 26px;
|
||||
color: rgb(102, 154, 177);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.price{
|
||||
font-size: 26px;
|
||||
color: rgb(102, 154, 177);
|
||||
font-weight: 700;
|
||||
}
|
||||
.title {
|
||||
font-size: 18px;
|
||||
color: #333333;
|
||||
margin-top: 14px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.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{
|
||||
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;
|
||||
}
|
||||
|
||||
.percentage-s {
|
||||
p {
|
||||
color: green;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.el-row {
|
||||
margin-bottom: 20px;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
.percentage-j {
|
||||
p {
|
||||
color: red;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
}
|
||||
.el-col {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.bg-purple-dark {
|
||||
background: #ffffff;
|
||||
}
|
||||
.bg-purple {
|
||||
background: #ffffff;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,198 +1,428 @@
|
||||
<template>
|
||||
<div class="divBox">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<div class="grid-content bg-purple">
|
||||
<div class="price"> ￥34500元</div>
|
||||
<div class="title">进店总台次</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>
|
||||
<el-card class="box-card">
|
||||
<div style="display: flex;align-items: center;">
|
||||
<div>
|
||||
<el-select v-model="tableFrom.merId" style="width: 200px;" @change="merChange" filterable remote
|
||||
reserve-keyword placeholder="选择维修店" :loading="loading" clearable :remote-method="remoteMethod">
|
||||
<el-option v-for="(item, index) in merchantList" :key="index" :label="item.name" :value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="grid-content bg-purple">
|
||||
<div class="price"> ￥34500元</div>
|
||||
<div class="title">维保产值</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 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>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="grid-content bg-purple">
|
||||
<div class="price"> ￥34500元</div>
|
||||
<div class="title">维保成本</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 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>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="grid-content bg-purple">
|
||||
<div class="price"> 34.4%</div>
|
||||
<div class="title">维保利润</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>
|
||||
<!-- 四 -->
|
||||
<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>
|
||||
</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>
|
||||
环比
|
||||
</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>
|
||||
</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>
|
||||
环比
|
||||
</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>
|
||||
</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>
|
||||
环比
|
||||
</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>
|
||||
</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-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 {
|
||||
@@ -200,13 +430,88 @@ export default {
|
||||
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.remoteMethod()
|
||||
},
|
||||
methods: {
|
||||
|
||||
// 初始化
|
||||
init() {
|
||||
this.maintenanceAnalysisLatticeFn()
|
||||
},
|
||||
//年月日
|
||||
selectChange(e) {
|
||||
// console.log(e);
|
||||
this.tableFrom.dateLimit = e;
|
||||
this.timeVal = [];
|
||||
this.init()
|
||||
},
|
||||
//远程搜索
|
||||
remoteMethod(query) {
|
||||
this.loading = true;
|
||||
merchantListApi({
|
||||
keywords: query,
|
||||
page: 1,
|
||||
limit: 1000,
|
||||
}).then(res => {
|
||||
this.loading = false
|
||||
this.merchantList = res.list
|
||||
this.tableFrom.merId = this.merchantList[0].id
|
||||
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>
|
||||
@@ -267,7 +572,8 @@ export default {
|
||||
}
|
||||
|
||||
.bg-purple {
|
||||
background: #ffffff;
|
||||
background: #f5f5f5;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.bg-purple-light {
|
||||
|
||||
@@ -164,7 +164,6 @@ export default {
|
||||
//获取数据
|
||||
analysisLatticeFn() {
|
||||
analysisLattice(this.tableFrom).then(res => {
|
||||
// console.log(res);
|
||||
//成本
|
||||
this.accessoryCostVo = res.accessoryCostVo
|
||||
//总营业额
|
||||
@@ -174,8 +173,7 @@ export default {
|
||||
//利润
|
||||
this.turnoverVo = res.turnoverVo
|
||||
})
|
||||
console.log(this.$refs);
|
||||
|
||||
// console.log(this.$refs);
|
||||
},
|
||||
//年月日
|
||||
selectChange(e) {
|
||||
@@ -193,7 +191,6 @@ export default {
|
||||
},
|
||||
//监听选择
|
||||
remoteMethod(query) {
|
||||
// console.log(query);
|
||||
this.loading = true;
|
||||
merchantListApi({
|
||||
keywords: query,
|
||||
@@ -297,7 +294,8 @@ export default {
|
||||
}
|
||||
|
||||
.bg-purple {
|
||||
background: #ffffff;
|
||||
background: #f5f5f5;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.bg-purple-light {
|
||||
@@ -313,6 +311,6 @@ export default {
|
||||
|
||||
.row-bg {
|
||||
padding: 10px 0;
|
||||
background-color: #ffffff;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user