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

7.26(添加维修模块

Browse Source
This commit is contained in:
Hong
2024-07-26 16:31:15 +08:00
parent 8dbb424c6c
commit b9b62a8e19
3 changed files with 1218 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/router/modules/statistics.js
View File

@@ -28,6 +28,18 @@ const accessoryRouter = {
name: 'maintenance',
meta: { title: '维保月度分析', icon: '' },
},
{
path: 'accident',
component: () => import('@/views/statistics/maintenance/accident'),
name: 'cost',
meta: { title: '事故月度分析', icon: '' },
},
{
path: 'return_cat',
component: () => import('@/views/statistics/maintenance/return_cat'),
name: 'cost',
meta: { title: '退车月度分析', icon: '' },
},
],
};
export default accessoryRouter;

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

@@ -0,0 +1,603 @@
<template>
<div class="divBox">
<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"> ￥{{ frequency.currentData }}元</div>
<div class="title">总营业额</div>
<div class="percentage">
<div :class="[frequency.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i :class="[frequency.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ frequency.yearOnYear }}%
</p>
同比
</div>
<div :class="[frequency.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i :class="[frequency.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ frequency.linkRelativeRatio }}%
</p>
环比
</div>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="grid-content bg-purple">
<div class="price"> ￥{{ money.currentData }}元</div>
<div class="title">总成本</div>
<div class="percentage">
<div :class="[money.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i :class="[money.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ money.yearOnYear }}%
</p>
同比
</div>
<div :class="[money.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i :class="[money.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ money.linkRelativeRatio }}%
</p>
环比
</div>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="grid-content bg-purple">
<div class="price"> ￥{{ accessory.currentData }}元</div>
<div class="title">总利润</div>
<div class="percentage">
<div :class="[accessory.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i :class="[accessory.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ accessory.yearOnYear }}%
</p>
同比
</div>
<div :class="[accessory.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i :class="[accessory.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ accessory.linkRelativeRatio }}%
</p>
环比
</div>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="grid-content bg-purple">
<div class="price"> ￥{{ profit.currentData }}元</div>
<div class="title">总营业额</div>
<div class="percentage">
<div :class="[profit.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i :class="[profit.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ profit.yearOnYear }}%
</p>
同比
</div>
<div :class="[profit.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i :class="[profit.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ profit.linkRelativeRatio }}%
</p>
环比
</div>
</div>
</div>
</el-col>
</el-row>
<!-- 四 -->
<el-row :gutter="20">
<el-col :span="6">
<AccessoryEcharts :id="'pie1'" :title="'进店台次分车型占比'"></AccessoryEcharts>
</el-col>
<el-col :span="6">
<AccessoryEcharts :id="'pie2'" :title="'进店台次分所属公司占比'"></AccessoryEcharts>
</el-col>
<el-col :span="6">
<AccessoryEcharts :id="'pie3'" :title="'维保产值按车型占比'"></AccessoryEcharts>
</el-col>
<el-col :span="6">
<AccessoryEcharts :id="'pie4'" :title="'维保产值按所属公司占比'"></AccessoryEcharts>
</el-col>
</el-row>
<!-- 三 -->
<el-row :gutter="20">
<el-col :span="8">
<div class="grid-content bg-purple">
<div class="price"> ￥34500元</div>
<div class="title flex space-between">
<div>维保单车产值</div>
<div>平均单车</div>
</div>
<div class="percentage">
<div class="percentage-s">
<p>
<i class="el-icon-top" style="font-weight: 700;"></i>
34.5%
</p>
同比
</div>
<div class="percentage-j">
<p>
<i class="el-icon-bottom" style="font-weight: 700;"></i>
34.5%
</p>
环比
</div>
</div>
</div>
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple">
<div class="price"> ￥34500元</div>
<div class="title flex space-between">
<div>维保单车产值</div>
<div>按照车型分</div>
</div>
<div class="percentage">
<div class="percentage-s">
<p>
<i class="el-icon-top" style="font-weight: 700;"></i>
34.5%
</p>
同比
</div>
<div class="percentage-j">
<p>
<i class="el-icon-bottom" style="font-weight: 700;"></i>
34.5%
</p>
环比
</div>
</div>
</div>
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple">
<div class="price"> ￥34500元</div>
<div class="title flex space-between">
<div>维保单车产值</div>
<div>按照所属公司分</div>
</div>
<div class="percentage">
<div class="percentage-s">
<p>
<i class="el-icon-top" style="font-weight: 700;"></i>
34.5%
</p>
同比
</div>
<div class="percentage-j">
<p>
<i class="el-icon-bottom" style="font-weight: 700;"></i>
34.5%
</p>
环比
</div>
</div>
</div>
</el-col>
</el-row>
<!-- 二 -->
<el-row :gutter="20">
<el-col :span="12">
<ConsumeEcharts :id="'pie5'" :title="'维保产值TOP5车型'"></ConsumeEcharts>
</el-col>
<el-col :span="12">
<ConsumeEcharts :id="'pie6'" :title="'维保产值TOP5公司'"></ConsumeEcharts>
</el-col>
</el-row>
<!-- 二 -->
<el-row :gutter="20">
<el-col :span="12">
<AccessoryEcharts :id="'pie7'" :title="'维保成本按车型占比'"></AccessoryEcharts>
</el-col>
<el-col :span="12">
<AccessoryEcharts :id="'pie8'" :title="'维保成本按所属公司占比'"></AccessoryEcharts>
</el-col>
</el-row>
<!-- 三 -->
<el-row :gutter="20">
<el-col :span="8">
<div class="grid-content bg-purple">
<div class="price"> ￥34500元</div>
<div class="title flex space-between">
<div>维保单车成本</div>
<div>平均单车</div>
</div>
<div class="percentage">
<div class="percentage-s">
<p>
<i class="el-icon-top" style="font-weight: 700;"></i>
34.5%
</p>
同比
</div>
<div class="percentage-j">
<p>
<i class="el-icon-bottom" style="font-weight: 700;"></i>
34.5%
</p>
环比
</div>
</div>
</div>
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple">
<div class="price"> ￥34500元</div>
<div class="title flex space-between">
<div>维保单车成本</div>
<div>按照车型分</div>
</div>
<div class="percentage">
<div class="percentage-s">
<p>
<i class="el-icon-top" style="font-weight: 700;"></i>
34.5%
</p>
同比
</div>
<div class="percentage-j">
<p>
<i class="el-icon-bottom" style="font-weight: 700;"></i>
34.5%
</p>
环比
</div>
</div>
</div>
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple">
<div class="price"> ￥34500元</div>
<div class="title flex space-between">
<div>维保单车成本</div>
<div>按照所属公司分</div>
</div>
<div class="percentage">
<div class="percentage-s">
<p>
<i class="el-icon-top" style="font-weight: 700;"></i>
34.5%
</p>
同比
</div>
<div class="percentage-j">
<p>
<i class="el-icon-bottom" style="font-weight: 700;"></i>
34.5%
</p>
环比
</div>
</div>
</div>
</el-col>
</el-row>
<!-- 二 -->
<el-row :gutter="20">
<el-col :span="12">
<ConsumeEcharts :id="'pie9'" :title="'维保成本TOP10'"></ConsumeEcharts>
</el-col>
<el-col :span="12">
<ConsumeEcharts :id="'pie10'" :title="'维保成本配件使用数量TOP10'"></ConsumeEcharts>
</el-col>
</el-row>
<!-- 二 -->
<el-row :gutter="20">
<el-col :span="12">
<AccessoryEcharts :id="'pie11'" :title="'维保利润按车型占比'"></AccessoryEcharts>
</el-col>
<el-col :span="12">
<AccessoryEcharts :id="'pie12'" :title="'维保利润按所属公司占比'"></AccessoryEcharts>
</el-col>
</el-row>
<!-- 三 -->
<el-row :gutter="20">
<el-col :span="8">
<div class="grid-content bg-purple">
<div class="price"> ￥34500元</div>
<div class="title flex space-between">
<div>维保单车利润</div>
<div>平均单车</div>
</div>
<div class="percentage">
<div class="percentage-s">
<p>
<i class="el-icon-top" style="font-weight: 700;"></i>
34.5%
</p>
同比
</div>
<div class="percentage-j">
<p>
<i class="el-icon-bottom" style="font-weight: 700;"></i>
34.5%
</p>
环比
</div>
</div>
</div>
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple">
<div class="price"> ￥34500元</div>
<div class="title flex space-between">
<div>维保单车利润</div>
<div>按照车型分</div>
</div>
<div class="percentage">
<div class="percentage-s">
<p>
<i class="el-icon-top" style="font-weight: 700;"></i>
34.5%
</p>
同比
</div>
<div class="percentage-j">
<p>
<i class="el-icon-bottom" style="font-weight: 700;"></i>
34.5%
</p>
环比
</div>
</div>
</div>
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple">
<div class="price"> ￥34500元</div>
<div class="title flex space-between">
<div>维保单车利润</div>
<div>按照所属公司分</div>
</div>
<div class="percentage">
<div class="percentage-s">
<p>
<i class="el-icon-top" style="font-weight: 700;"></i>
34.5%
</p>
同比
</div>
<div class="percentage-j">
<p>
<i class="el-icon-bottom" style="font-weight: 700;"></i>
34.5%
</p>
环比
</div>
</div>
</div>
</el-col>
</el-row>
<!-- 二 -->
<el-row :gutter="20">
<el-col :span="12">
<ConsumeEcharts :id="'pie13'" :title="'维保利润TOP5车型'"></ConsumeEcharts>
</el-col>
<el-col :span="12">
<ConsumeEcharts :id="'pie14'" :title="'维保利润TOP5公司'"></ConsumeEcharts>
</el-col>
</el-row>
</el-card>
</div>
</template>
<script>
import { merchantListApi } from "@/api/merchant"
import { maintenanceAnalysisLattice } from "@/api/statistics.js"
import AccessoryEcharts from '../components/accessoryEcharts';
import ConsumeEcharts from '../components/consumeEcharts';
export default {
name: 'Dashboard',
components: { AccessoryEcharts, ConsumeEcharts },
data() {
return {
//维修店列表
merchantList: [],
loading: false,
fromList: this.$constants.fromList,
time1: [],
tableFrom: {
page: 1,
dateLimit: '',
type:1
},
//进店总台次
frequency: {},
//维保产值
money: {},
//维保成本
accessory: {},
//维保利润
profit: {},
};
},
mounted() {
},
created() {
this.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>
<style scoped lang="scss">
.price {
font-size: 26px;
color: rgb(102, 154, 177);
font-weight: 700;
}
.title {
font-size: 18px;
color: #333333;
margin-top: 14px;
margin-bottom: 6px;
}
.percentage {
background-color: #f5f5f5;
padding: 12px 8px;
display: flex;
justify-content: space-between;
text-align: center;
color: #333333;
font-size: 16px;
.percentage-s {
p {
color: green;
margin-bottom: 4px;
}
}
.percentage-j {
p {
color: red;
margin-bottom: 4px;
}
}
}
.el-row {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
}
.el-col {
border-radius: 4px;
}
.bg-purple-dark {
background: #ffffff;
}
.bg-purple {
background: #f5f5f5;
margin-top: 12px;
}
.bg-purple-light {
background: #ffffff;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
padding: 24px 18px 8px 24px;
border-radius: 12px 12px 12px 12px;
}
.row-bg {
padding: 10px 0;
background-color: #ffffff;
}
.flex {
display: flex;
}
.space-between {
justify-content: space-between
}
</style>

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

@@ -0,0 +1,603 @@
<template>
<div class="divBox">
<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"> ￥{{ frequency.currentData }}元</div>
<div class="title">总营业额</div>
<div class="percentage">
<div :class="[frequency.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i :class="[frequency.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ frequency.yearOnYear }}%
</p>
同比
</div>
<div :class="[frequency.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i :class="[frequency.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ frequency.linkRelativeRatio }}%
</p>
环比
</div>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="grid-content bg-purple">
<div class="price"> ￥{{ money.currentData }}元</div>
<div class="title">总成本</div>
<div class="percentage">
<div :class="[money.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i :class="[money.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ money.yearOnYear }}%
</p>
同比
</div>
<div :class="[money.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i :class="[money.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ money.linkRelativeRatio }}%
</p>
环比
</div>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="grid-content bg-purple">
<div class="price"> ￥{{ accessory.currentData }}元</div>
<div class="title">总利润</div>
<div class="percentage">
<div :class="[accessory.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i :class="[accessory.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ accessory.yearOnYear }}%
</p>
同比
</div>
<div :class="[accessory.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i :class="[accessory.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ accessory.linkRelativeRatio }}%
</p>
环比
</div>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="grid-content bg-purple">
<div class="price"> ￥{{ profit.currentData }}元</div>
<div class="title">总营业额</div>
<div class="percentage">
<div :class="[profit.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i :class="[profit.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ profit.yearOnYear }}%
</p>
同比
</div>
<div :class="[profit.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i :class="[profit.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ profit.linkRelativeRatio }}%
</p>
环比
</div>
</div>
</div>
</el-col>
</el-row>
<!-- 四 -->
<el-row :gutter="20">
<el-col :span="6">
<AccessoryEcharts :id="'pie1'" :title="'进店台次分车型占比'"></AccessoryEcharts>
</el-col>
<el-col :span="6">
<AccessoryEcharts :id="'pie2'" :title="'进店台次分所属公司占比'"></AccessoryEcharts>
</el-col>
<el-col :span="6">
<AccessoryEcharts :id="'pie3'" :title="'维保产值按车型占比'"></AccessoryEcharts>
</el-col>
<el-col :span="6">
<AccessoryEcharts :id="'pie4'" :title="'维保产值按所属公司占比'"></AccessoryEcharts>
</el-col>
</el-row>
<!-- 三 -->
<el-row :gutter="20">
<el-col :span="8">
<div class="grid-content bg-purple">
<div class="price"> ￥34500元</div>
<div class="title flex space-between">
<div>维保单车产值</div>
<div>平均单车</div>
</div>
<div class="percentage">
<div class="percentage-s">
<p>
<i class="el-icon-top" style="font-weight: 700;"></i>
34.5%
</p>
同比
</div>
<div class="percentage-j">
<p>
<i class="el-icon-bottom" style="font-weight: 700;"></i>
34.5%
</p>
环比
</div>
</div>
</div>
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple">
<div class="price"> ￥34500元</div>
<div class="title flex space-between">
<div>维保单车产值</div>
<div>按照车型分</div>
</div>
<div class="percentage">
<div class="percentage-s">
<p>
<i class="el-icon-top" style="font-weight: 700;"></i>
34.5%
</p>
同比
</div>
<div class="percentage-j">
<p>
<i class="el-icon-bottom" style="font-weight: 700;"></i>
34.5%
</p>
环比
</div>
</div>
</div>
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple">
<div class="price"> ￥34500元</div>
<div class="title flex space-between">
<div>维保单车产值</div>
<div>按照所属公司分</div>
</div>
<div class="percentage">
<div class="percentage-s">
<p>
<i class="el-icon-top" style="font-weight: 700;"></i>
34.5%
</p>
同比
</div>
<div class="percentage-j">
<p>
<i class="el-icon-bottom" style="font-weight: 700;"></i>
34.5%
</p>
环比
</div>
</div>
</div>
</el-col>
</el-row>
<!-- 二 -->
<el-row :gutter="20">
<el-col :span="12">
<ConsumeEcharts :id="'pie5'" :title="'维保产值TOP5车型'"></ConsumeEcharts>
</el-col>
<el-col :span="12">
<ConsumeEcharts :id="'pie6'" :title="'维保产值TOP5公司'"></ConsumeEcharts>
</el-col>
</el-row>
<!-- 二 -->
<el-row :gutter="20">
<el-col :span="12">
<AccessoryEcharts :id="'pie7'" :title="'维保成本按车型占比'"></AccessoryEcharts>
</el-col>
<el-col :span="12">
<AccessoryEcharts :id="'pie8'" :title="'维保成本按所属公司占比'"></AccessoryEcharts>
</el-col>
</el-row>
<!-- 三 -->
<el-row :gutter="20">
<el-col :span="8">
<div class="grid-content bg-purple">
<div class="price"> ￥34500元</div>
<div class="title flex space-between">
<div>维保单车成本</div>
<div>平均单车</div>
</div>
<div class="percentage">
<div class="percentage-s">
<p>
<i class="el-icon-top" style="font-weight: 700;"></i>
34.5%
</p>
同比
</div>
<div class="percentage-j">
<p>
<i class="el-icon-bottom" style="font-weight: 700;"></i>
34.5%
</p>
环比
</div>
</div>
</div>
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple">
<div class="price"> ￥34500元</div>
<div class="title flex space-between">
<div>维保单车成本</div>
<div>按照车型分</div>
</div>
<div class="percentage">
<div class="percentage-s">
<p>
<i class="el-icon-top" style="font-weight: 700;"></i>
34.5%
</p>
同比
</div>
<div class="percentage-j">
<p>
<i class="el-icon-bottom" style="font-weight: 700;"></i>
34.5%
</p>
环比
</div>
</div>
</div>
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple">
<div class="price"> ￥34500元</div>
<div class="title flex space-between">
<div>维保单车成本</div>
<div>按照所属公司分</div>
</div>
<div class="percentage">
<div class="percentage-s">
<p>
<i class="el-icon-top" style="font-weight: 700;"></i>
34.5%
</p>
同比
</div>
<div class="percentage-j">
<p>
<i class="el-icon-bottom" style="font-weight: 700;"></i>
34.5%
</p>
环比
</div>
</div>
</div>
</el-col>
</el-row>
<!-- 二 -->
<el-row :gutter="20">
<el-col :span="12">
<ConsumeEcharts :id="'pie9'" :title="'维保成本TOP10'"></ConsumeEcharts>
</el-col>
<el-col :span="12">
<ConsumeEcharts :id="'pie10'" :title="'维保成本配件使用数量TOP10'"></ConsumeEcharts>
</el-col>
</el-row>
<!-- 二 -->
<el-row :gutter="20">
<el-col :span="12">
<AccessoryEcharts :id="'pie11'" :title="'维保利润按车型占比'"></AccessoryEcharts>
</el-col>
<el-col :span="12">
<AccessoryEcharts :id="'pie12'" :title="'维保利润按所属公司占比'"></AccessoryEcharts>
</el-col>
</el-row>
<!-- 三 -->
<el-row :gutter="20">
<el-col :span="8">
<div class="grid-content bg-purple">
<div class="price"> ￥34500元</div>
<div class="title flex space-between">
<div>维保单车利润</div>
<div>平均单车</div>
</div>
<div class="percentage">
<div class="percentage-s">
<p>
<i class="el-icon-top" style="font-weight: 700;"></i>
34.5%
</p>
同比
</div>
<div class="percentage-j">
<p>
<i class="el-icon-bottom" style="font-weight: 700;"></i>
34.5%
</p>
环比
</div>
</div>
</div>
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple">
<div class="price"> ￥34500元</div>
<div class="title flex space-between">
<div>维保单车利润</div>
<div>按照车型分</div>
</div>
<div class="percentage">
<div class="percentage-s">
<p>
<i class="el-icon-top" style="font-weight: 700;"></i>
34.5%
</p>
同比
</div>
<div class="percentage-j">
<p>
<i class="el-icon-bottom" style="font-weight: 700;"></i>
34.5%
</p>
环比
</div>
</div>
</div>
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple">
<div class="price"> ￥34500元</div>
<div class="title flex space-between">
<div>维保单车利润</div>
<div>按照所属公司分</div>
</div>
<div class="percentage">
<div class="percentage-s">
<p>
<i class="el-icon-top" style="font-weight: 700;"></i>
34.5%
</p>
同比
</div>
<div class="percentage-j">
<p>
<i class="el-icon-bottom" style="font-weight: 700;"></i>
34.5%
</p>
环比
</div>
</div>
</div>
</el-col>
</el-row>
<!-- 二 -->
<el-row :gutter="20">
<el-col :span="12">
<ConsumeEcharts :id="'pie13'" :title="'维保利润TOP5车型'"></ConsumeEcharts>
</el-col>
<el-col :span="12">
<ConsumeEcharts :id="'pie14'" :title="'维保利润TOP5公司'"></ConsumeEcharts>
</el-col>
</el-row>
</el-card>
</div>
</template>
<script>
import { merchantListApi } from "@/api/merchant"
import { maintenanceAnalysisLattice } from "@/api/statistics.js"
import AccessoryEcharts from '../components/accessoryEcharts';
import ConsumeEcharts from '../components/consumeEcharts';
export default {
name: 'Dashboard',
components: { AccessoryEcharts, ConsumeEcharts },
data() {
return {
//维修店列表
merchantList: [],
loading: false,
fromList: this.$constants.fromList,
time1: [],
tableFrom: {
page: 1,
dateLimit: '',
type:1
},
//进店总台次
frequency: {},
//维保产值
money: {},
//维保成本
accessory: {},
//维保利润
profit: {},
};
},
mounted() {
},
created() {
this.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>
<style scoped lang="scss">
.price {
font-size: 26px;
color: rgb(102, 154, 177);
font-weight: 700;
}
.title {
font-size: 18px;
color: #333333;
margin-top: 14px;
margin-bottom: 6px;
}
.percentage {
background-color: #f5f5f5;
padding: 12px 8px;
display: flex;
justify-content: space-between;
text-align: center;
color: #333333;
font-size: 16px;
.percentage-s {
p {
color: green;
margin-bottom: 4px;
}
}
.percentage-j {
p {
color: red;
margin-bottom: 4px;
}
}
}
.el-row {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
}
.el-col {
border-radius: 4px;
}
.bg-purple-dark {
background: #ffffff;
}
.bg-purple {
background: #f5f5f5;
margin-top: 12px;
}
.bg-purple-light {
background: #ffffff;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
padding: 24px 18px 8px 24px;
border-radius: 12px 12px 12px 12px;
}
.row-bg {
padding: 10px 0;
background-color: #ffffff;
}
.flex {
display: flex;
}
.space-between {
justify-content: space-between
}
</style>