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

7.23(月度分析

Browse Source
This commit is contained in:
Hong
2024-07-23 18:37:28 +08:00
parent fa014fffb5
commit 3ed3edf6b6
7 changed files with 647 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.env.development
View File

@@ -4,11 +4,11 @@ ENV = 'development'
# base api
# VUE_APP_BASE_API = '/dev-api'
# 线上
VUE_APP_BASE_API = 'https://cms.diyouzhijia.com/car_admin_api'
# VUE_APP_BASE_API = 'https://cms.diyouzhijia.com/car_admin_api'
# 花花
# VUE_APP_BASE_API = 'http://192.168.31.16:8080/car_admin_api'
# 薛磊
# VUE_APP_BASE_API = 'http://192.168.31.226:8080/car_admin_api'
VUE_APP_BASE_API = 'http://192.168.31.229:8080/car_admin_api'
# vue-cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable,
# to control whether the babel-plugin-dynamic-import-node plugin is enabled.
# It only does one thing by converting all import() to require().

11
src/api/statistics.js Normal file
View File

@@ -0,0 +1,11 @@
import request from '@/utils/request';
/**
* 经营分析 数据
*/
export function analysisLattice(data) {
return request({
url: '/admin/platform/business/analysis/lattice',
method: 'post',
data,
});
}

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

@@ -22,6 +22,12 @@ const accessoryRouter = {
name: 'cost',
meta: { title: '成本分析', icon: '' },
},
{
path: 'maintenance',
component: () => import('@/views/statistics/maintenance'),
name: 'maintenance',
meta: { title: '维保月度分析', icon: '' },
},
],
};
export default accessoryRouter;

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

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

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

@@ -0,0 +1,77 @@
<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="consume-echarts" style="width: 1000px; height: 500px; padding-top: 25px"></div>
</el-card>
</el-col>
</el-row>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts';
import { brokenLineApi } from '@/api/dashboard';
export default {
name: 'consumeEcharts',
data() {
return {
lineData: [],
};
},
mounted() {
this.inits();
},
methods: {
goTarget(href) {
window.open(href, '_blank');
},
inits() {
brokenLineApi().then((res) => {
this.lineData = res;
let myChart = echarts.init(document.getElementById('consume-echarts'));
let option = {
color: ['#37A2FF'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985',
},
},
},
toolbox: {
feature: {
saveAsImage: {},
},
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Gro', 'Bll', 'Red',]
},
yAxis: {
type: 'value'
},
series: [
{
data: [200, 150, 130, 120, 110, 96, 80, 70, 18, 12],
type: 'bar'
}
]
};
myChart.setOption(option);
//建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
window.addEventListener('resize', function () {
myChart.resize();
});
});
},
},
};
</script>
<style scoped lang="scss"></style>

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

@@ -0,0 +1,182 @@
<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>
</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>
</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>
</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>
</div>
</div>
</el-col>
</el-row>
<div style="display: flex;">
<AccessoryEcharts :id="'pie1'" :title="'进店台次分车型占比'"></AccessoryEcharts>
<AccessoryEcharts :id="'pie2'" :title="'进店台次分所属公司占比'"></AccessoryEcharts>
<AccessoryEcharts :id="'pie3'" :title="'维保产值按车型占比'"></AccessoryEcharts>
<AccessoryEcharts :id="'pie4'" :title="'维保产值按所属公司占比'"></AccessoryEcharts>
</div>
<div>
<!-- <ConsumeEcharts></ConsumeEcharts> -->
</div>
</div>
</template>
<script>
import AccessoryEcharts from '../components/accessoryEcharts';
import ConsumeEcharts from '../components/consumeEcharts';
export default {
name: 'Dashboard',
components: { AccessoryEcharts,ConsumeEcharts },
data() {
return {
};
},
mounted() {
},
methods: {
}
};
</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: #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;
}
</style>

413
src/views/statistics/operate/index.vue
View File

@@ -1,173 +1,316 @@
<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"> ￥{{ cashierVo.currentData }}元</div>
<div class="title">总营业额</div>
<div class="percentage">
<div :class="[cashierVo.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i :class="[cashierVo.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ cashierVo.yearOnYear }}%
</p>
同比
</div>
<div :class="[cashierVo.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i :class="[cashierVo.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ cashierVo.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"> ￥{{ accessoryCostVo.currentData }}元</div>
<div class="title">总成本</div>
<div class="percentage">
<div :class="[accessoryCostVo.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i :class="[accessoryCostVo.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ accessoryCostVo.yearOnYear }}%
</p>
同比
</div>
<div :class="[accessoryCostVo.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i :class="[accessoryCostVo.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ accessoryCostVo.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"> ￥{{ turnoverVo.currentData }}元</div>
<div class="title">总利润</div>
<div class="percentage">
<div :class="[turnoverVo.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i :class="[turnoverVo.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ turnoverVo.yearOnYear }}%
</p>
同比
</div>
<div :class="[turnoverVo.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i :class="[turnoverVo.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ turnoverVo.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"> ￥{{ accessoryCostVo.currentData }}元</div>
<div class="title">总营业额</div>
<div class="percentage">
<div :class="[singleQuantityVo.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i :class="[singleQuantityVo.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ singleQuantityVo.yearOnYear }}%
</p>
同比
</div>
<div :class="[singleQuantityVo.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
<p>
<i :class="[singleQuantityVo.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
style="font-weight: 700;"></i>
{{ singleQuantityVo.linkRelativeRatio }}%
</p>
环比
</div>
</div>
</div>
</div>
</el-col>
</el-row>
<fold-line></fold-line>
</el-col>
</el-row>
<fold-line></fold-line>
</el-card>
</div>
</template>
<script>
import { merchantListApi } from "@/api/merchant"
import { analysisLattice } from "@/api/statistics.js"
import foldLine from './components/foldline';
export default {
name: 'Dashboard',
components: { foldLine },
data() {
return {
loading: false,
fromList: this.$constants.fromList,
time1: [],
tableFrom: {
page: 1,
dateLimit: ''
},
//成本
accessoryCostVo: {},
//总营业额
cashierVo: {},
//总台次
singleQuantityVo: {},
//营业额
turnoverVo: {},
//维修店列表
merchantList: []
};
},
mounted() {
},
created() {
this.remoteMethod()
this.analysisLatticeFn()
},
methods: {
//获取数据
analysisLatticeFn() {
analysisLattice(this.tableFrom).then(res => {
console.log(res);
//成本
this.accessoryCostVo = res.accessoryCostVo
//总营业额
this.cashierVo = res.cashierVo
//总台次
this.singleQuantityVo = res.singleQuantityVo
//利润
this.turnoverVo = res.turnoverVo
})
},
//年月日
selectChange(e) {
// console.log(e);
this.tableFrom.dateLimit = e;
this.timeVal = [];
this.analysisLatticeFn()
},
//选择确认
merChange(e){
// console.log(e);
this.tableFrom.merId=e
this.analysisLatticeFn()
},
//监听选择
remoteMethod(query) {
// console.log(query);
this.loading = true;
merchantListApi({
keywords: query,
page: 1,
limit: 1000,
}).then(res => {
this.loading = false
this.merchantList = res.list
})
},
//时间选择监听
timeChange(e) {
// console.log(e);
if (e) {
this.tableFrom.dateLimit = e.join(',')
} else {
this.tableFrom.dateLimit = ''
}
this.analysisLatticeFn()
}
}
};
</script>
<style scoped lang="scss">
<style scoped lang="scss">
.tab-yue {
width: 240px;
height: 36px;
line-height: 36px;
border: 1px solid #dcdfe6;
border-radius: 6px;
display: flex;
align-items: center;
.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;
.tab-bj {
width: 80px;
height: 36px;
line-height: 36px;
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;
.tab-act {
background-color: #1890ff;
border-radius: 6px;
color: #ffffff;
}
}
.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;
}
}
.el-col {
border-radius: 4px;
.percentage-j {
p {
color: red;
margin-bottom: 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: #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;
}
</style>