7.22(经营分析,成本分享
This commit is contained in:
Hong
@@ -34,6 +34,7 @@ import community from './modules/community';
|
|||||||
import coupon from './modules/coupon';
|
import coupon from './modules/coupon';
|
||||||
import car from './modules/car';
|
import car from './modules/car';
|
||||||
import divide from './modules/divide';
|
import divide from './modules/divide';
|
||||||
|
import statistics from "./modules/statistics"
|
||||||
/**
|
/**
|
||||||
* Note: sub-menu only appear when route children.length >= 1
|
* Note: sub-menu only appear when route children.length >= 1
|
||||||
* Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
|
* Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
|
||||||
@@ -63,6 +64,8 @@ import divide from './modules/divide';
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
export const constantRoutes = [
|
export const constantRoutes = [
|
||||||
|
//统计
|
||||||
|
statistics,
|
||||||
// 商品
|
// 商品
|
||||||
productRouter,
|
productRouter,
|
||||||
// 意向合作
|
// 意向合作
|
||||||
|
|||||||
27
src/router/modules/statistics.js
Normal file
27
src/router/modules/statistics.js
Normal file
@@ -0,0 +1,27 @@
|
|||||||
|
import Layout from '@/layout';
|
||||||
|
|
||||||
|
const accessoryRouter = {
|
||||||
|
path: '/statistics',
|
||||||
|
component: Layout,
|
||||||
|
redirect: '/statistics/',
|
||||||
|
name: 'statistics',
|
||||||
|
meta: {
|
||||||
|
title: '统计',
|
||||||
|
icon: 'statistics',
|
||||||
|
},
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: 'operate',
|
||||||
|
component: () => import('@/views/statistics/operate'),
|
||||||
|
name: 'operate',
|
||||||
|
meta: { title: '经营分析', icon: '' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'cost',
|
||||||
|
component: () => import('@/views/statistics/cost'),
|
||||||
|
name: 'cost',
|
||||||
|
meta: { title: '成本分析', icon: '' },
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
export default accessoryRouter;
|
||||||
91
src/views/statistics/cost/components/accessoryEcharts.vue
Normal file
91
src/views/statistics/cost/components/accessoryEcharts.vue
Normal 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="accessory-echarts" style="width: 500px; 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: 'accessoryEcharts',
|
||||||
|
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('accessory-echarts'));
|
||||||
|
let option = {
|
||||||
|
title: {
|
||||||
|
text: '配件车型占比',
|
||||||
|
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/cost/components/consumeEcharts.vue
Normal file
77
src/views/statistics/cost/components/consumeEcharts.vue
Normal 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>
|
||||||
152
src/views/statistics/cost/components/foldline.vue
Normal file
152
src/views/statistics/cost/components/foldline.vue
Normal file
@@ -0,0 +1,152 @@
|
|||||||
|
<template>
|
||||||
|
<div class="foldline">
|
||||||
|
<!-- <el-card class="box-card">
|
||||||
|
<div id="chart_example" style="width: 100%; height: 500px; padding-top: 25px"></div>
|
||||||
|
</el-card> -->
|
||||||
|
<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-card">
|
||||||
|
<div id="chart_example" style="width: 100%; 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: 'foldline',
|
||||||
|
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('chart_example'));
|
||||||
|
let option = {
|
||||||
|
color: ['#80FFA5', '#37A2FF', '#FF0087'],
|
||||||
|
title: {
|
||||||
|
text: '营业额成本利润趋势',
|
||||||
|
},
|
||||||
|
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,
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
myChart.setOption(option);
|
||||||
|
//建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
|
||||||
|
window.addEventListener('resize', function () {
|
||||||
|
myChart.resize();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss"></style>
|
||||||
180
src/views/statistics/cost/index.vue
Normal file
180
src/views/statistics/cost/index.vue
Normal file
@@ -0,0 +1,180 @@
|
|||||||
|
<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></AccessoryEcharts>
|
||||||
|
<ConsumeEcharts></ConsumeEcharts>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<FoldLine></FoldLine>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import FoldLine from './components/foldline';
|
||||||
|
import AccessoryEcharts from './components/accessoryEcharts';
|
||||||
|
import ConsumeEcharts from './components/consumeEcharts';
|
||||||
|
export default {
|
||||||
|
name: 'Dashboard',
|
||||||
|
components: { FoldLine,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>
|
||||||
5
src/views/statistics/index.vue
Normal file
5
src/views/statistics/index.vue
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<router-view />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
152
src/views/statistics/operate/components/foldline.vue
Normal file
152
src/views/statistics/operate/components/foldline.vue
Normal file
@@ -0,0 +1,152 @@
|
|||||||
|
<template>
|
||||||
|
<div class="foldline">
|
||||||
|
<!-- <el-card class="box-card">
|
||||||
|
<div id="chart_example" style="width: 100%; height: 500px; padding-top: 25px"></div>
|
||||||
|
</el-card> -->
|
||||||
|
<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-card">
|
||||||
|
<div id="chart_example" style="width: 100%; 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: 'foldline',
|
||||||
|
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('chart_example'));
|
||||||
|
let option = {
|
||||||
|
color: ['#80FFA5', '#37A2FF', '#FF0087'],
|
||||||
|
title: {
|
||||||
|
text: '营业额成本利润趋势',
|
||||||
|
},
|
||||||
|
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,
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
myChart.setOption(option);
|
||||||
|
//建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
|
||||||
|
window.addEventListener('resize', function () {
|
||||||
|
myChart.resize();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss"></style>
|
||||||
173
src/views/statistics/operate/index.vue
Normal file
173
src/views/statistics/operate/index.vue
Normal file
@@ -0,0 +1,173 @@
|
|||||||
|
<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"> ￥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-row>
|
||||||
|
<fold-line></fold-line>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import foldLine from './components/foldline';
|
||||||
|
export default {
|
||||||
|
name: 'Dashboard',
|
||||||
|
components: { foldLine },
|
||||||
|
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>
|
||||||
Reference in New Issue
Block a user