客户/供应商列表
This commit is contained in:
parent
7b2bbb9083
commit
a1b3533204
|
|
@ -22,6 +22,7 @@
|
|||
"clipboard": "^2.0.6",
|
||||
"core-js": "^3.6.5",
|
||||
"date-fns": "^2.14.0",
|
||||
"echarts": "^5.5.0",
|
||||
"enquire.js": "^2.1.6",
|
||||
"file-saver": "^2.0.5",
|
||||
"hevue-img-preview": "^6.1.0",
|
||||
|
|
|
|||
|
|
@ -147,8 +147,7 @@ export default {
|
|||
|
||||
.page-content {
|
||||
position: relative;
|
||||
padding: 24px 0 0;
|
||||
|
||||
// padding: 24px 0 0;
|
||||
&.side {
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,416 @@
|
|||
<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>
|
||||
|
|
@ -31,11 +31,11 @@ const BaseWorkplaceRouterMap = {
|
|||
BaseWorkplaceCustomStat: {
|
||||
name: '货车列表',
|
||||
icon: 'idcard',
|
||||
path: '/BaseWorkplace/BaseWorkplaceList',
|
||||
path: '/BaseWorkplace/CustomStat',
|
||||
meta: {
|
||||
invisible: false, // 不在菜单中显示
|
||||
},
|
||||
component: () => import('@/pages/Middle/transport/Truck/Truck/List'),
|
||||
component: () => import('@/pages/Middle/BaseWorkplace/custom/statistics'),
|
||||
authority: {
|
||||
permission: ["BaseWorkplace", "BaseWorkplace-All", "BaseWorkplace-List"],
|
||||
}
|
||||
|
|
|
|||
70
yarn.lock
70
yarn.lock
|
|
@ -990,6 +990,56 @@
|
|||
resolved "https://registry.npmmirror.com/@claviska/jquery-minicolors/-/jquery-minicolors-2.3.6.tgz"
|
||||
integrity sha512-8Ro6D4GCrmOl41+6w4NFhEOpx8vjxwVRI69bulXsFDt49uVRKhLU5TnzEV7AmOJrylkVq+ugnYNMiGHBieeKUQ==
|
||||
|
||||
"@form-create/ant-design-vue@^2.5.34":
|
||||
version "2.5.35"
|
||||
resolved "https://registry.npmmirror.com/@form-create/ant-design-vue/-/ant-design-vue-2.5.35.tgz#d541ef9b3b209abdbd1c7c4b63d0137ed147859e"
|
||||
integrity sha512-XFABph6+utkXaQrCT2pMZWWAZ7T0S4ehRw8qArYUe9hQ22CAnJBgTtGb4QeUehP21qFfB8vSxHBthaeNxQ4Wmg==
|
||||
dependencies:
|
||||
"@form-create/component-antdv-frame" "^2.5.35"
|
||||
"@form-create/component-antdv-group" "^2.5.35"
|
||||
"@form-create/component-antdv-upload" "^2.5.35"
|
||||
"@form-create/component-subform" "^2.5.25"
|
||||
"@form-create/core" "^2.5.35"
|
||||
"@form-create/utils" "^2.5.35"
|
||||
|
||||
"@form-create/component-antdv-frame@^2.5.35":
|
||||
version "2.5.35"
|
||||
resolved "https://registry.npmmirror.com/@form-create/component-antdv-frame/-/component-antdv-frame-2.5.35.tgz#b07180f76754cf929c97cbe325ef786877fb565d"
|
||||
integrity sha512-RTjrRqq1pEmbTRad48lDp+A+hCfFtLT8qoe7SFgDvChs16etl00ZZCllQK6q9iOY+jkBfUmtCSiGs4jS3hgq4A==
|
||||
dependencies:
|
||||
"@form-create/utils" "^2.5.35"
|
||||
|
||||
"@form-create/component-antdv-group@^2.5.35":
|
||||
version "2.5.35"
|
||||
resolved "https://registry.npmmirror.com/@form-create/component-antdv-group/-/component-antdv-group-2.5.35.tgz#9a3d40ed45051406bcdfbf06dcfb49cae5bae54e"
|
||||
integrity sha512-fxY3bmRmzlvod1xm0LwBCHLjD6PngwUQJu8uhRAQNdYilWG4Q4XoAEskVuk6t/WEaFRp+rnRaoksPkQEXqDk8g==
|
||||
dependencies:
|
||||
"@form-create/utils" "^2.5.35"
|
||||
|
||||
"@form-create/component-antdv-upload@^2.5.35":
|
||||
version "2.5.35"
|
||||
resolved "https://registry.npmmirror.com/@form-create/component-antdv-upload/-/component-antdv-upload-2.5.35.tgz#f2bd9f8ef66344a7631f521beab43854b44586ab"
|
||||
integrity sha512-bcgzSv+vKOKyH7QOwnLwofBHzA1meg9FUUsmVv8lWO3xcMDJTemEPOTh8HHsk7iCkJlxTgNEZDNvqBUd7o105A==
|
||||
dependencies:
|
||||
"@form-create/utils" "^2.5.35"
|
||||
|
||||
"@form-create/component-subform@^2.5.25":
|
||||
version "2.5.25"
|
||||
resolved "https://registry.npmmirror.com/@form-create/component-subform/-/component-subform-2.5.25.tgz#92c8cfa7435edd16bb031a2d1ca407d2569fe391"
|
||||
integrity sha512-puGWWxSOeII4y4mCNxrKF/eH4nY1AQAx87VchzErLmemwF6TtNBLBsJLCCmFAVLYn1koYU5nNu5Y2yG9s2CKlQ==
|
||||
|
||||
"@form-create/core@^2.5.35":
|
||||
version "2.5.35"
|
||||
resolved "https://registry.npmmirror.com/@form-create/core/-/core-2.5.35.tgz#6e7c52268b9cb0e07af195d263024d24d37b1a0b"
|
||||
integrity sha512-yAnV+kTURBHu+OR0xO2yWRDhFe+xA4ZTfdeOOjN/h9mMgDTZe4ebcAOgwL1ByV3RFnKC9bEjgtZVE52nBawZgg==
|
||||
dependencies:
|
||||
"@form-create/utils" "^2.5.35"
|
||||
|
||||
"@form-create/utils@^2.5.35":
|
||||
version "2.5.35"
|
||||
resolved "https://registry.npmmirror.com/@form-create/utils/-/utils-2.5.35.tgz#236baea325a8f99e5b83b97aae3a2814ad7e57a3"
|
||||
integrity sha512-uQcUGV0iBYHRX6Q9cZT5jLZmN6tn5d3MzzpSv4WD7hegzj0aDaLj7VTL+8F/xLFSjW0Yg+oo5TcHfFLjzqtlLA==
|
||||
|
||||
"@hapi/address@2.x.x":
|
||||
version "2.1.4"
|
||||
resolved "https://registry.npm.taobao.org/@hapi/address/download/@hapi/address-2.1.4.tgz?cache=0&sync_timestamp=1584145510980&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40hapi%2Faddress%2Fdownload%2F%40hapi%2Faddress-2.1.4.tgz"
|
||||
|
|
@ -4208,6 +4258,14 @@ ecc-jsbn@~0.1.1:
|
|||
jsbn "~0.1.0"
|
||||
safer-buffer "^2.1.0"
|
||||
|
||||
echarts@^5.5.0:
|
||||
version "5.5.0"
|
||||
resolved "https://registry.npmmirror.com/echarts/-/echarts-5.5.0.tgz#c13945a7f3acdd67c134d8a9ac67e917830113ac"
|
||||
integrity sha512-rNYnNCzqDAPCr4m/fqyUFv7fD9qIsd50S6GDFgO1DxZhncCsNsG7IfUlAlvZe5oSEQxtsjnHiUuppzccry93Xw==
|
||||
dependencies:
|
||||
tslib "2.3.0"
|
||||
zrender "5.5.0"
|
||||
|
||||
ee-first@1.1.1, ee-first@~1.1.1:
|
||||
version "1.1.1"
|
||||
resolved "https://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz"
|
||||
|
|
@ -10344,6 +10402,11 @@ ts-pnp@^1.1.6:
|
|||
resolved "https://registry.npm.taobao.org/ts-pnp/download/ts-pnp-1.2.0.tgz"
|
||||
integrity sha1-pQCtCEsHmPHDBxrzkeZZEshrypI=
|
||||
|
||||
tslib@2.3.0:
|
||||
version "2.3.0"
|
||||
resolved "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz#803b8cdab3e12ba581a4ca41c8839bbb0dacb09e"
|
||||
integrity sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==
|
||||
|
||||
tslib@^1.10.0, tslib@^1.9.0:
|
||||
version "1.13.0"
|
||||
resolved "https://registry.npm.taobao.org/tslib/download/tslib-1.13.0.tgz?cache=0&sync_timestamp=1589411820927&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ftslib%2Fdownload%2Ftslib-1.13.0.tgz"
|
||||
|
|
@ -11476,3 +11539,10 @@ zepto@^1.2.0:
|
|||
version "1.2.0"
|
||||
resolved "https://registry.npm.taobao.org/zepto/download/zepto-1.2.0.tgz"
|
||||
integrity sha1-4Se9nmb9hGvl6rSME5SIL3wOT5g=
|
||||
|
||||
zrender@5.5.0:
|
||||
version "5.5.0"
|
||||
resolved "https://registry.npmmirror.com/zrender/-/zrender-5.5.0.tgz#54d0d6c4eda81a96d9f60a9cd74dc48ea026bc1e"
|
||||
integrity sha512-O3MilSi/9mwoovx77m6ROZM7sXShR/O/JIanvzTwjN3FORfLSr81PsUGd7jlaYOeds9d8tw82oP44+3YucVo+w==
|
||||
dependencies:
|
||||
tslib "2.3.0"
|
||||
|
|
|
|||
Loading…
Reference in New Issue