新增图表
This commit is contained in:
parent
a3e8a7e71d
commit
0f3622de4b
|
|
@ -1,6 +1,6 @@
|
||||||
<template >
|
<template >
|
||||||
<div>
|
<div>
|
||||||
<div style="display: flex;align-items: center;" v-if="type == 'line'">
|
<div style="display: flex;align-items: center;" v-if="type != 'bar'">
|
||||||
<a-radio-group default-value="month" size="large" button-style="solid" @change="onSearch">
|
<a-radio-group default-value="month" size="large" button-style="solid" @change="onSearch">
|
||||||
<a-radio-button value="year">
|
<a-radio-button value="year">
|
||||||
按年份
|
按年份
|
||||||
|
|
@ -180,6 +180,59 @@ export default {
|
||||||
|
|
||||||
})
|
})
|
||||||
|
|
||||||
|
}else if(this.type == 'bar2'){
|
||||||
|
this.$mk.post({
|
||||||
|
url: this.actions,
|
||||||
|
data: searchData
|
||||||
|
}).then(res => {
|
||||||
|
this.isShowCustomChart = true;
|
||||||
|
this.interval = res.data.interval;
|
||||||
|
setTimeout(() => {
|
||||||
|
let myChart = echarts.init(document.getElementById(this.id));
|
||||||
|
let option = {
|
||||||
|
title:{
|
||||||
|
text:this.title,
|
||||||
|
left: 'left',
|
||||||
|
textStyle:{
|
||||||
|
fontSize: 20,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
name:'日期',
|
||||||
|
type: 'category',
|
||||||
|
data:res.data.label,
|
||||||
|
left: '0',
|
||||||
|
top: '60',
|
||||||
|
orient: 'vertical',
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 15,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
name:'金额',
|
||||||
|
type: 'value'
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
data:res.data.items.map(item => item.data[0]),
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: '30px' // 设置为类目宽度的50%
|
||||||
|
}
|
||||||
|
],
|
||||||
|
tooltip:{
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'cross',
|
||||||
|
label: {
|
||||||
|
backgroundColor: '#6a7985'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
myChart.setOption(option)
|
||||||
|
}, 100);
|
||||||
|
|
||||||
|
})
|
||||||
}else if(this.type == 'line'){
|
}else if(this.type == 'line'){
|
||||||
this.$mk.post({
|
this.$mk.post({
|
||||||
url: this.actions,
|
url: this.actions,
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,31 @@
|
||||||
|
<template>
|
||||||
|
<div class="page-body">
|
||||||
|
<div class="chart-container">
|
||||||
|
<myStatistics id="mychart1" :actions="actions.mileage" :type="'line'" title='司机运输公里数统计'></myStatistics>
|
||||||
|
<myStatistics id="mychart2" :actions="actions.number" :type="'line'" title='司机运输次数统计'></myStatistics>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import BASE_URL from '@/services/Middle/transport/Custom/api.js';
|
||||||
|
import myStatistics from '../../../../components/statistics/myStatistics.vue';
|
||||||
|
export default {
|
||||||
|
components:{
|
||||||
|
myStatistics
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
actions:{
|
||||||
|
mileage: `${BASE_URL.BASE_URL}/DriverWages/v1/driver/wages/statistics/mileage`, // 客户结余统计
|
||||||
|
number: `${BASE_URL.BASE_URL}/DriverWages/v1/driver/wages/statistics/number`, // 利润统计
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="">
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,35 @@
|
||||||
|
<template>
|
||||||
|
<div class="page-body">
|
||||||
|
<div class="chart-container">
|
||||||
|
<myStatistics id="mychart1" :actions="actions.amount" :type="'line'" title='油耗金额统计'></myStatistics>
|
||||||
|
<myStatistics id="mychart2" :actions="actions.number" :type="'line'" title='油耗次数统计'></myStatistics>
|
||||||
|
<myStatistics id="mychart3" :actions="actions.litre" :type="'line'" title='油耗升数统计'></myStatistics>
|
||||||
|
<myStatistics id="mychart4" :actions="actions.hundred" :type="'line'" title='车辆油耗百公里平均统计'></myStatistics>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import BASE_URL from '@/services/Middle/transport/Custom/api.js';
|
||||||
|
import myStatistics from '../../../../components/statistics/myStatistics.vue';
|
||||||
|
export default {
|
||||||
|
components:{
|
||||||
|
myStatistics
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
actions:{
|
||||||
|
amount: `${BASE_URL.BASE_URL}/OilConsumption/v1/oil/consumption/amount`, // 油耗金额统计
|
||||||
|
hundred: `${BASE_URL.BASE_URL}/OilConsumption/v1/oil/consumption/hundred`, // 车辆油耗百公里平均统计
|
||||||
|
litre: `${BASE_URL.BASE_URL}/OilConsumption/v1/oil/consumption/litre`, // 油耗升数统计
|
||||||
|
number: `${BASE_URL.BASE_URL}/OilConsumption/v1/oil/consumption/number`, // 油耗次数统计
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="">
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,39 @@
|
||||||
|
<template>
|
||||||
|
<div class="page-body">
|
||||||
|
<div class="chart-container">
|
||||||
|
<myStatistics id="mychart1" :actions="actions.number" :type="'bar'" title='车辆出车次数统计'></myStatistics>
|
||||||
|
<myStatistics id="mychart2" :actions="actions.mileage" :type="'bar'" title='车辆出车公里数统计'></myStatistics>
|
||||||
|
<myStatistics id="mychart3" :actions="actions.miantenance" :type="'bar'" title='车辆维修次数统计'></myStatistics>
|
||||||
|
<myStatistics id="mychart4" :actions="actions.oil" :type="'bar'" title='车辆加油次数统计'></myStatistics>
|
||||||
|
<myStatistics id="mychart5" :actions="actions.litre" :type="'bar'" title='车辆加油总升数统计'></myStatistics>
|
||||||
|
<myStatistics id="mychart6" :actions="actions.tire" :type="'bar'" title='车辆轮胎更换次数统计'></myStatistics>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import BASE_URL from '@/services/Middle/transport/Custom/api.js';
|
||||||
|
import myStatistics from '../../../../components/statistics/myStatistics.vue';
|
||||||
|
export default {
|
||||||
|
components:{
|
||||||
|
myStatistics
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
actions:{
|
||||||
|
miantenance: `${BASE_URL.BASE_URL}//Truck/v1/statistics/miantenance`, // 车辆维修次数统计
|
||||||
|
mileage: `${BASE_URL.BASE_URL}/Truck/v1/statistics/mileage`, // 车辆出车公里数统计
|
||||||
|
number: `${BASE_URL.BASE_URL}/Truck/v1/statistics/number`, // 车辆出车次数统计
|
||||||
|
oil: `${BASE_URL.BASE_URL}//Truck/v1/statistics/oil`, // 车辆加油次数统计
|
||||||
|
litre: `${BASE_URL.BASE_URL}/Truck/v1/statistics/oil/litre`, // 车辆加油总升数统计
|
||||||
|
tire: `${BASE_URL.BASE_URL}/Truck/v1/statistics/tire`, // 车辆轮胎更换次数统计
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="">
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -18,7 +18,6 @@
|
||||||
</div>
|
</div>
|
||||||
</a-tab-pane>
|
</a-tab-pane>
|
||||||
</a-tabs>
|
</a-tabs>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,50 @@
|
||||||
|
<template>
|
||||||
|
<div class="page-body">
|
||||||
|
<a-tabs default-active-key="1" size="large">
|
||||||
|
<a-tab-pane key="1" tab="维修项目" :forceRender="true">
|
||||||
|
<div class="chart-container">
|
||||||
|
<myStatistics id="mychart1" :actions="actions.MaintenanceNumber" :type="'line'" title='维修次数统计'></myStatistics>
|
||||||
|
<myStatistics id="mychart2" :actions="actions.MaintenanceAmount" :type="'line'" title='维修金额统计'></myStatistics>
|
||||||
|
<myStatistics id="mychart3" :actions="actions.MaintenanceAmountRanking" :type="'bar'" title='车辆维修金额排行'></myStatistics>
|
||||||
|
<myStatistics id="mychart4" :actions="actions.MaintenanceAmountItemRanking" :type="'bar'" title='维修项目排行'></myStatistics>
|
||||||
|
</div>
|
||||||
|
</a-tab-pane>
|
||||||
|
<a-tab-pane key="2" tab="其他项目" :forceRender="true">
|
||||||
|
<div class="chart-container">
|
||||||
|
<myStatistics id="mychart5" :actions="actions.OtherNumber" :type="'line'" title='其他费用统计'></myStatistics>
|
||||||
|
<myStatistics id="mychart6" :actions="actions.OtherAmountRanking" :type="'bar'" title='车辆其他费用排行'></myStatistics>
|
||||||
|
<myStatistics id="mychart7" :actions="actions.OtherAmountItemRanking" :type="'bar'" title='其他费用项目排行'></myStatistics>
|
||||||
|
</div>
|
||||||
|
</a-tab-pane>
|
||||||
|
</a-tabs>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import BASE_URL from '@/services/Middle/transport/Custom/api.js';
|
||||||
|
import myStatistics from '../../../../components/statistics/myStatistics.vue';
|
||||||
|
export default {
|
||||||
|
components:{
|
||||||
|
myStatistics
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
actions:{
|
||||||
|
MaintenanceNumber: `${BASE_URL.BASE_URL}/Maintenance/v1/Maintenance/number`, // 维修次数统计
|
||||||
|
MaintenanceAmount: `${BASE_URL.BASE_URL}/Maintenance/v1/maintenance/amount`, // 维修金额统计
|
||||||
|
MaintenanceAmountRanking: `${BASE_URL.BASE_URL}/Maintenance/v1/maintenance/amount/ranking`, // 车辆维修金额排行
|
||||||
|
MaintenanceAmountItemRanking: `${BASE_URL.BASE_URL}//Maintenance/v1/maintenance/amount/item/ranking`, // 维修项目排行
|
||||||
|
|
||||||
|
OtherNumber: `${BASE_URL.BASE_URL}/Maintenance/v1/other/expenses/amount`, // 其他费用统计
|
||||||
|
OtherAmountRanking: `${BASE_URL.BASE_URL}/Maintenance/v1/other/expenses/amount/ranking`, // 车辆其他费用排行
|
||||||
|
OtherAmountItemRanking: `${BASE_URL.BASE_URL}/Maintenance/v1/other/expenses/amount/item/ranking`, // 其他费用项目排行
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="">
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,33 @@
|
||||||
|
<template>
|
||||||
|
<div class="page-body">
|
||||||
|
<div class="chart-container">
|
||||||
|
<myStatistics id="mychart1" :actions="actions.amount" :type="'line'" title='轮胎金额统计'></myStatistics>
|
||||||
|
<myStatistics id="mychart2" :actions="actions.brand" :type="'line'" title='轮胎维修次数统计'></myStatistics>
|
||||||
|
<myStatistics id="mychart3" :actions="actions.number" :type="'line'" title='轮胎品牌使用公里数统计'></myStatistics>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import BASE_URL from '@/services/Middle/transport/Custom/api.js';
|
||||||
|
import myStatistics from '../../../../components/statistics/myStatistics.vue';
|
||||||
|
export default {
|
||||||
|
components:{
|
||||||
|
myStatistics
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
actions:{
|
||||||
|
amount: `${BASE_URL.BASE_URL}/Tire/v1/statistics/amount`, // 轮胎金额统计
|
||||||
|
brand: `${BASE_URL.BASE_URL}/Tire/v1/statistics/brand`, // 轮胎品牌使用公里数统计
|
||||||
|
number: `${BASE_URL.BASE_URL}/Tire/v1/statistics/number`, // 轮胎维修统计
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="">
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,31 @@
|
||||||
|
<template>
|
||||||
|
<div class="page-body">
|
||||||
|
<div class="chart-container">
|
||||||
|
<myStatistics id="mychart1" :actions="actions.freightRevenue" :type="'line'" title='各车辆运费收入统计'></myStatistics>
|
||||||
|
<myStatistics id="mychart2" :actions="actions.profit" :type="'bar2'" title='利润统计'></myStatistics>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import BASE_URL from '@/services/Middle/transport/Custom/api.js';
|
||||||
|
import myStatistics from '../../../../components/statistics/myStatistics.vue';
|
||||||
|
export default {
|
||||||
|
components:{
|
||||||
|
myStatistics
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
actions:{
|
||||||
|
freightRevenue: `${BASE_URL.BASE_URL}/TrainNumber/v1/train/number/statistics/freight/revenue`, // 客户结余统计
|
||||||
|
profit: `${BASE_URL.BASE_URL}/TrainNumber/v1/train/number/statistics/profit`, // 利润统计
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="">
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -40,6 +40,78 @@ const BaseWorkplaceRouterMap = {
|
||||||
permission: ["BaseWorkplace", "BaseWorkplace-All", "BaseWorkplace-List"],
|
permission: ["BaseWorkplace", "BaseWorkplace-All", "BaseWorkplace-List"],
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
BaseWorkplaceTrainNumberStat: {
|
||||||
|
name: '车次统计',
|
||||||
|
icon: 'idcard',
|
||||||
|
path: '/BaseWorkplace/TrainNumberStat',
|
||||||
|
meta: {
|
||||||
|
invisible: false, // 不在菜单中显示
|
||||||
|
},
|
||||||
|
component: () => import('@/pages/Middle/BaseWorkplace/trainNumber/statistics'),
|
||||||
|
authority: {
|
||||||
|
permission: ["BaseWorkplace", "BaseWorkplace-All", "BaseWorkplace-List"],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
BaseWorkplaceDriverWagesStat: {
|
||||||
|
name: '司机/工资统计',
|
||||||
|
icon: 'idcard',
|
||||||
|
path: '/BaseWorkplace/BaseWorkplaceDriverWagesStat',
|
||||||
|
meta: {
|
||||||
|
invisible: false, // 不在菜单中显示
|
||||||
|
},
|
||||||
|
component: () => import('@/pages/Middle/BaseWorkplace/DriverWage/statistics'),
|
||||||
|
authority: {
|
||||||
|
permission: ["BaseWorkplace", "BaseWorkplace-All", "BaseWorkplace-List"],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
BaseWorkplaceMaintenanceStat: {
|
||||||
|
name: '维修/费用统计',
|
||||||
|
icon: 'idcard',
|
||||||
|
path: '/BaseWorkplace/BaseWorkplaceMaintenanceStat',
|
||||||
|
meta: {
|
||||||
|
invisible: false, // 不在菜单中显示
|
||||||
|
},
|
||||||
|
component: () => import('@/pages/Middle/BaseWorkplace/maintenance/statistics'),
|
||||||
|
authority: {
|
||||||
|
permission: ["BaseWorkplace", "BaseWorkplace-All", "BaseWorkplace-List"],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
BaseWorkplaceOilConsumptionStat: {
|
||||||
|
name: '油耗统计',
|
||||||
|
icon: 'idcard',
|
||||||
|
path: '/BaseWorkplace/BaseWorkplaceOilConsumptionStat',
|
||||||
|
meta: {
|
||||||
|
invisible: false, // 不在菜单中显示
|
||||||
|
},
|
||||||
|
component: () => import('@/pages/Middle/BaseWorkplace/OliConsumption/statistics'),
|
||||||
|
authority: {
|
||||||
|
permission: ["BaseWorkplace", "BaseWorkplace-All", "BaseWorkplace-List"],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
BaseWorkplaceTireStat: {
|
||||||
|
name: '油耗统计',
|
||||||
|
icon: 'idcard',
|
||||||
|
path: '/BaseWorkplace/BaseWorkplaceTireStat',
|
||||||
|
meta: {
|
||||||
|
invisible: false, // 不在菜单中显示
|
||||||
|
},
|
||||||
|
component: () => import('@/pages/Middle/BaseWorkplace/tire/statistics'),
|
||||||
|
authority: {
|
||||||
|
permission: ["BaseWorkplace", "BaseWorkplace-All", "BaseWorkplace-List"],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
BaseWorkplaceTruckStat: {
|
||||||
|
name: '车辆数据统计',
|
||||||
|
icon: 'idcard',
|
||||||
|
path: '/BaseWorkplace/BaseWorkplaceTruckStat',
|
||||||
|
meta: {
|
||||||
|
invisible: false, // 不在菜单中显示
|
||||||
|
},
|
||||||
|
component: () => import('@/pages/Middle/BaseWorkplace/Truck/statistics'),
|
||||||
|
authority: {
|
||||||
|
permission: ["BaseWorkplace", "BaseWorkplace-All", "BaseWorkplace-List"],
|
||||||
|
}
|
||||||
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
export default BaseWorkplaceRouterMap
|
export default BaseWorkplaceRouterMap
|
||||||
Loading…
Reference in New Issue