416 lines
16 KiB
Vue
416 lines
16 KiB
Vue
<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">
|
|
<!-- 搜索区 -->
|
|
<!-- <vxe-form :data="searchFormData" :items="searchFormItems" titleColon @submit="onSearch"></vxe-form> -->
|
|
<a-radio-group default-value="month" size="large" button-style="solid" @change="onSearch">
|
|
<a-radio-button value="year">
|
|
按年份
|
|
</a-radio-button>
|
|
<a-radio-button value="month">
|
|
按月份
|
|
</a-radio-button>
|
|
<a-radio-button value="day">
|
|
按本月
|
|
</a-radio-button>
|
|
<a-radio-button value="week">
|
|
按本周
|
|
</a-radio-button>
|
|
<a-radio-button value="day7">
|
|
最近7天
|
|
</a-radio-button>
|
|
<a-radio-button value="day30">
|
|
最近30天
|
|
</a-radio-button>
|
|
</a-radio-group>
|
|
<!-- <h3>客户结余统计</h3> -->
|
|
<div id="myChart" v-if="isShowCustomChart" style="width: 95%;height: 500px;margin: 20px auto 0;"></div>
|
|
<div id="myChart2" v-if="isShowCustomChart" style="width: 95%;height: 500px;margin: 20px auto 0;"></div>
|
|
<div id="myChart3" v-if="isShowCustomChart" style="width: 95%;height: 500px;margin: 20px auto 0;"></div>
|
|
</div>
|
|
</a-tab-pane>
|
|
<a-tab-pane key="2" tab="供应商" :forceRender="true">
|
|
<div class="chart-container">
|
|
<!-- 搜索区 -->
|
|
<!-- <vxe-form :data="searchFormData" :items="searchFormItems" titleColon @submit="onSearch"></vxe-form> -->
|
|
<a-radio-group default-value="month" size="large" button-style="solid" @change="onSearch1">
|
|
<a-radio-button value="year">
|
|
按年份
|
|
</a-radio-button>
|
|
<a-radio-button value="month">
|
|
按月份
|
|
</a-radio-button>
|
|
<a-radio-button value="day">
|
|
按本月
|
|
</a-radio-button>
|
|
<a-radio-button value="week">
|
|
按本周
|
|
</a-radio-button>
|
|
<a-radio-button value="day7">
|
|
最近7天
|
|
</a-radio-button>
|
|
<a-radio-button value="day30">
|
|
最近30天
|
|
</a-radio-button>
|
|
</a-radio-group>
|
|
<!-- <h3>客户结余统计</h3> -->
|
|
<div id="myChart4" v-if="isShowCustomChart1" style="width: 95%;height: 500px;margin: 20px auto 0;"></div>
|
|
<div id="myChart5" v-if="isShowCustomChart1" style="width: 95%;height: 500px;margin: 20px auto 0;"></div>
|
|
<div id="myChart6" v-if="isShowCustomChart1" style="width: 95%;height: 500px;margin: 20px auto 0;"></div>
|
|
</div>
|
|
</a-tab-pane>
|
|
</a-tabs>
|
|
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import * as echarts from 'echarts';
|
|
import BASE_URL from '@/services/Middle/transport/Custom/api.js';
|
|
export default {
|
|
data() {
|
|
return {
|
|
isShowCustomChart:false,
|
|
isShowCustomChart1:false,
|
|
actions:{
|
|
CustomBalance: `${BASE_URL.BASE_URL}/Custom/v1/Custom/balance`, // 客户结余统计
|
|
CustomNumber: `${BASE_URL.BASE_URL}/Custom/v1/Custom/number`, // 客户交易次数统计
|
|
CustomTon: `${BASE_URL.BASE_URL}/Custom/v1/Custom/ton`, // 客户交易吨数统计
|
|
|
|
SupplierBalance: `${BASE_URL.BASE_URL}/Custom/v1/Supplier/balance`, // 供应商结余统计
|
|
SupplierNumber: `${BASE_URL.BASE_URL}/Custom/v1/Supplier/number`, // 供应商交易次数统计
|
|
SupplierTon: `${BASE_URL.BASE_URL}/Custom/v1/Supplier/ton`, // 供应商交易吨数统计
|
|
},
|
|
options:{
|
|
year:{
|
|
cycle: 'year',
|
|
span: 0,
|
|
recently:false,
|
|
},
|
|
month:{
|
|
cycle:'month',
|
|
span: 0,
|
|
recently:false,
|
|
},
|
|
day:{
|
|
cycle: 'day',
|
|
span: 0,
|
|
recently:false,
|
|
},
|
|
week:{
|
|
cycle: 'week',
|
|
span: 0,
|
|
recently:false,
|
|
},
|
|
day7:{
|
|
cycle: 'day',
|
|
span: 7,
|
|
recently:true,
|
|
},
|
|
day30:{
|
|
cycle: 'day',
|
|
span: 30,
|
|
recently:true,
|
|
},
|
|
//搜索区
|
|
searchFormData: {
|
|
cycle: 'day',
|
|
span: 7,
|
|
recently:true,
|
|
},
|
|
searchFormItems: [
|
|
{field: 'cycle', title: '类型', span: 5, itemRender: {name: '$select', props: {placeholder: '请输入名称',
|
|
options:[
|
|
{label: '按日', value: 'day'},
|
|
{label: '按周', value: 'week'},
|
|
{label: '按月', value:'month'},
|
|
]
|
|
}}},
|
|
{field: 'span', title: '条数', span: 5, itemRender: {name: '$input', props: {type:'number'}}},
|
|
{field: 'recently', title: '从今天开始', span: 5, itemRender: {name: '$radio', options:[
|
|
{label: '是', value: true},
|
|
{label: '否', value: false}
|
|
]
|
|
}},
|
|
{
|
|
align: 'right', span: 4, itemRender: {
|
|
name: '$buttons', children: [{props: {type: 'submit', content: '筛选', status: 'primary'}},
|
|
{props: {type: 'reset', content: '重置'}}]
|
|
}
|
|
}
|
|
],
|
|
}
|
|
}
|
|
},
|
|
created() {
|
|
this.createChart('month');
|
|
this.createChart1('month');
|
|
},
|
|
methods: {
|
|
createChart(name){
|
|
this.isShowCustomChart = true;
|
|
let searchData = this.options[name];
|
|
this.$mk.post({
|
|
url: this.actions.CustomBalance,
|
|
data: searchData
|
|
}).then(res => {
|
|
console.log(res)
|
|
let myChart = echarts.init(document.getElementById('myChart'));
|
|
let option = {
|
|
title:{
|
|
text: '客户结余统计',
|
|
left: 'left',
|
|
textStyle:{
|
|
fontSize: 20,
|
|
}
|
|
},
|
|
xAxis: {
|
|
name:res.data.label[0],
|
|
type: 'category',
|
|
data: res.data.items.map(item => item.name)
|
|
},
|
|
yAxis: {
|
|
name:res.data.label[1],
|
|
type: 'value'
|
|
},
|
|
series: [
|
|
{
|
|
data:res.data.items?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)
|
|
})
|
|
this.$mk.post({
|
|
url: this.actions.CustomNumber,
|
|
data: searchData
|
|
}).then(res => {
|
|
let myChart = echarts.init(document.getElementById('myChart2'));
|
|
let option = {
|
|
title:{
|
|
text: '客户交易次数统计',
|
|
left: 'left',
|
|
textStyle:{
|
|
fontSize: 20,
|
|
}
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: res.data.label
|
|
},
|
|
yAxis: {
|
|
type: 'value'
|
|
},
|
|
series:res.data.items? res.data.items.map((item) => {
|
|
return {
|
|
name:item.name,
|
|
data: item.data,
|
|
type: 'line',
|
|
}
|
|
}, ):{},
|
|
tooltip:{
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'cross',
|
|
label: {
|
|
backgroundColor: '#6a7985'
|
|
}
|
|
}
|
|
}
|
|
};
|
|
myChart.setOption(option)
|
|
})
|
|
this.$mk.post({
|
|
url: this.actions.CustomTon,
|
|
data: searchData
|
|
}).then(res => {
|
|
let myChart = echarts.init(document.getElementById('myChart3'));
|
|
let option = {
|
|
title:{
|
|
text: '客户交易吨数统计',
|
|
left: 'left',
|
|
textStyle:{
|
|
fontSize: 20,
|
|
}
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: res.data.label
|
|
},
|
|
yAxis: {
|
|
type: 'value'
|
|
},
|
|
series:res.data.items?res.data.items.map((item) => {
|
|
return {
|
|
name:item.name,
|
|
data: item.data,
|
|
type: 'line',
|
|
}
|
|
}
|
|
):{},
|
|
tooltip:{
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'cross',
|
|
label: {
|
|
backgroundColor: '#6a7985'
|
|
}
|
|
}
|
|
}
|
|
};
|
|
myChart.setOption(option)
|
|
})
|
|
|
|
},
|
|
createChart1(name){
|
|
this.isShowCustomChart1 = true;
|
|
let searchData = this.options[name];
|
|
this.$mk.post({
|
|
url: this.actions.SupplierBalance,
|
|
data: searchData
|
|
}).then(res => {
|
|
console.log(res)
|
|
let myChart = echarts.init(document.getElementById('myChart4'));
|
|
let option = {
|
|
title:{
|
|
text: '供应商结余统计',
|
|
left: 'left',
|
|
textStyle:{
|
|
fontSize: 20,
|
|
}
|
|
},
|
|
xAxis: {
|
|
name:res.data.label[0],
|
|
type: 'category',
|
|
data: res.data.items.map(item => item.name)
|
|
},
|
|
yAxis: {
|
|
name:res.data.label[1],
|
|
type: 'value'
|
|
},
|
|
series: [
|
|
{
|
|
data:res.data.items?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)
|
|
})
|
|
this.$mk.post({
|
|
url: this.actions.SupplierNumber,
|
|
data: searchData
|
|
}).then(res => {
|
|
let myChart = echarts.init(document.getElementById('myChart5'));
|
|
let option = {
|
|
title:{
|
|
text: '供应商交易次数统计',
|
|
left: 'left',
|
|
textStyle:{
|
|
fontSize: 20,
|
|
}
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: res.data.label
|
|
},
|
|
yAxis: {
|
|
type: 'value'
|
|
},
|
|
series:res.data.items? res.data.items.map((item) => {
|
|
return {
|
|
name:item.name,
|
|
data: item.data,
|
|
type: 'line',
|
|
}
|
|
}, ):{},
|
|
tooltip:{
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'cross',
|
|
label: {
|
|
backgroundColor: '#6a7985'
|
|
}
|
|
}
|
|
}
|
|
};
|
|
myChart.setOption(option)
|
|
})
|
|
this.$mk.post({
|
|
url: this.actions.SupplierTon,
|
|
data: searchData
|
|
}).then(res => {
|
|
let myChart = echarts.init(document.getElementById('myChart6'));
|
|
let option = {
|
|
title:{
|
|
text: '供应商交易吨数统计',
|
|
left: 'left',
|
|
textStyle:{
|
|
fontSize: 20,
|
|
}
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: res.data.label
|
|
},
|
|
yAxis: {
|
|
type: 'value'
|
|
},
|
|
series:res.data.items?res.data.items.map((item) => {
|
|
return {
|
|
name:item.name,
|
|
data: item.data,
|
|
type: 'line',
|
|
}
|
|
}
|
|
):{},
|
|
tooltip:{
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'cross',
|
|
label: {
|
|
backgroundColor: '#6a7985'
|
|
}
|
|
}
|
|
}
|
|
};
|
|
myChart.setOption(option)
|
|
})
|
|
|
|
},
|
|
onSearch(e) {
|
|
this.isShowCustomChart = false;
|
|
this.createChart(e.target.value);
|
|
},
|
|
onSearch1(e) {
|
|
this.isShowCustomChart1 = false;
|
|
this.createChart1(e.target.value);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="">
|
|
|
|
</style> |