表单组件化
This commit is contained in:
parent
a1b3533204
commit
73523009fb
|
|
@ -0,0 +1,244 @@
|
|||
<template >
|
||||
<div>
|
||||
<div style="display: flex;align-items: center;">
|
||||
<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>
|
||||
<p v-if='interval' style="margin: 0 10px;">(数据每 {{interval}} 分钟刷新一次)</p>
|
||||
</div>
|
||||
|
||||
<div :id="id" v-if="isShowCustomChart" style="width: 95%;height: 500px;margin: 20px auto 0;"></div>
|
||||
<div class="loading-box" v-else style="width: 95%;height: 500px;margin: 20px auto 0;display: flex;align-items: center;justify-content: center;">
|
||||
<a-icon type="loading" spin style="font-size: 50px;color: #122ed1;margin-left: 10px;" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
// import BASE_URL from '@/services/Middle/transport/Custom/api.js';
|
||||
// 从父组件中获取数据，id是echarts专属id，同个页面需要传不同id，actions是请求数据的接口，type是图表类型 bar条形图 line折线图，title是图表标题
|
||||
export default {
|
||||
name: 'MyStatistics',
|
||||
props: {
|
||||
id:{
|
||||
type:String
|
||||
},
|
||||
actions:{
|
||||
type:String
|
||||
},
|
||||
type:{
|
||||
type:String
|
||||
},
|
||||
title:{
|
||||
type:String
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isShowCustomChart: false,
|
||||
interval:null,
|
||||
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')
|
||||
},
|
||||
methods: {
|
||||
//选中日期后，创建图表
|
||||
onSearch(e) {
|
||||
this.isShowCustomChart = false;
|
||||
this.createChart(e.target.value);
|
||||
},
|
||||
createChart(name){
|
||||
let searchData = this.options[name];
|
||||
if(this.type == 'bar'){
|
||||
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:res.data.label[0],
|
||||
type: 'category',
|
||||
data:res.data.items?res.data.items.map(item => item.name):[],
|
||||
left: '0',
|
||||
top: '60',
|
||||
orient: 'vertical',
|
||||
textStyle: {
|
||||
fontSize: 15,
|
||||
}
|
||||
},
|
||||
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)
|
||||
}, 100);
|
||||
|
||||
})
|
||||
|
||||
}else if(this.type == 'line'){
|
||||
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,
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data:res.data.items?res.data.items.map(item => item.name):[],
|
||||
left: '0',
|
||||
top: '60',
|
||||
orient: 'vertical',
|
||||
textStyle: {
|
||||
fontSize: 15,
|
||||
}
|
||||
},
|
||||
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)
|
||||
}, 100);
|
||||
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="">
|
||||
|
||||
</style>
|
||||
|
|
@ -3,62 +3,16 @@
|
|||
<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>
|
||||
<myStatistics id="mychart1" :actions="actions.CustomBalance" :type="'bar'" title='客户结余统计'></myStatistics>
|
||||
<myStatistics id="mychart2" :actions="actions.CustomNumber" :type="'line'" title='客户交易次数统计'></myStatistics>
|
||||
<myStatistics id="mychart3" :actions="actions.CustomTon" :type="'line'" title='客户交易吨数统计'></myStatistics>
|
||||
</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>
|
||||
<myStatistics id="mychart4" :actions="actions.SupplierBalance" :type="'bar'" title='供应商结余统计'></myStatistics>
|
||||
<myStatistics id="mychart5" :actions="actions.SupplierNumber" :type="'line'" title='供应商交易次数统计'></myStatistics>
|
||||
<myStatistics id="mychart6" :actions="actions.SupplierTon" :type="'line'" title='供应商交易吨数统计'></myStatistics>
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
|
|
@ -66,13 +20,14 @@
|
|||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
import BASE_URL from '@/services/Middle/transport/Custom/api.js';
|
||||
import myStatistics from '../../../../components/statistics/myStatistics.vue';
|
||||
export default {
|
||||
components:{
|
||||
myStatistics
|
||||
},
|
||||
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`, // 客户交易次数统计
|
||||
|
|
@ -82,332 +37,10 @@ export default {
|
|||
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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue