|
@@ -1,5 +1,13 @@
|
|
<template>
|
|
<template>
|
|
- <div class="chart" :id="id"></div>
|
|
|
|
|
|
+ <div class="chart-box">
|
|
|
|
+ <div class="title-top">
|
|
|
|
+ <span>订单发货状态</span>
|
|
|
|
+ <el-select v-model="dateValue" size="mini" class="select" placeholder="请选择" @change="dateChange">
|
|
|
|
+ <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
|
|
|
+ </el-select>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="chart" :id="id"></div>
|
|
|
|
+ </div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script lang="ts">
|
|
<script lang="ts">
|
|
@@ -10,9 +18,19 @@ type EChartsOption = echarts.EChartsOption;
|
|
@Component
|
|
@Component
|
|
export default class Rose extends Vue {
|
|
export default class Rose extends Vue {
|
|
id=this.randomString();
|
|
id=this.randomString();
|
|
-
|
|
|
|
|
|
+ dateValue=30
|
|
|
|
+ options:Array<any>=[{
|
|
|
|
+ label:'今日',
|
|
|
|
+ value:1
|
|
|
|
+ },{
|
|
|
|
+ label:'7天',
|
|
|
|
+ value:7
|
|
|
|
+ },{
|
|
|
|
+ label:'30日',
|
|
|
|
+ value:30
|
|
|
|
+ }]
|
|
mounted(){
|
|
mounted(){
|
|
- this.init()
|
|
|
|
|
|
+ this.getData()
|
|
}
|
|
}
|
|
|
|
|
|
randomString(){
|
|
randomString(){
|
|
@@ -23,16 +41,18 @@ export default class Rose extends Vue {
|
|
return result;
|
|
return result;
|
|
}
|
|
}
|
|
|
|
|
|
- init(){
|
|
|
|
|
|
+ initChart(data:Array<any>){
|
|
let chartDom:any = document.getElementById(this.id);
|
|
let chartDom:any = document.getElementById(this.id);
|
|
let myChart = echarts.init(chartDom);
|
|
let myChart = echarts.init(chartDom);
|
|
let option: EChartsOption;
|
|
let option: EChartsOption;
|
|
-
|
|
|
|
|
|
+ let _data=[]
|
|
|
|
+ for(const item of data) {
|
|
|
|
+ _data.push({
|
|
|
|
+ name: item.status,
|
|
|
|
+ value:item.total
|
|
|
|
+ })
|
|
|
|
+ }
|
|
option = {
|
|
option = {
|
|
- title: {
|
|
|
|
- text: '月订单状态',
|
|
|
|
- left: 'center'
|
|
|
|
- },
|
|
|
|
legend: {
|
|
legend: {
|
|
top: 'bottom'
|
|
top: 'bottom'
|
|
},
|
|
},
|
|
@@ -47,7 +67,6 @@ export default class Rose extends Vue {
|
|
},
|
|
},
|
|
series: [
|
|
series: [
|
|
{
|
|
{
|
|
- name: 'Nightingale Chart',
|
|
|
|
type: 'pie',
|
|
type: 'pie',
|
|
radius: [30, 120],
|
|
radius: [30, 120],
|
|
center: ['50%', '50%'],
|
|
center: ['50%', '50%'],
|
|
@@ -55,28 +74,57 @@ export default class Rose extends Vue {
|
|
itemStyle: {
|
|
itemStyle: {
|
|
borderRadius: 8
|
|
borderRadius: 8
|
|
},
|
|
},
|
|
- data: [
|
|
|
|
- { value: 40, name: '待付款' },
|
|
|
|
- { value: 38, name: '等待供应商|外仓发货' },
|
|
|
|
- { value: 32, name: '已付款待审核' },
|
|
|
|
- { value: 30, name: '已客审待财审' },
|
|
|
|
- { value: 28, name: '发货中' },
|
|
|
|
- { value: 26, name: '已发货' },
|
|
|
|
- { value: 22, name: '取消订单' },
|
|
|
|
- { value: 18, name: '订单异常' }
|
|
|
|
- ]
|
|
|
|
|
|
+ data: _data
|
|
}
|
|
}
|
|
]
|
|
]
|
|
};
|
|
};
|
|
|
|
|
|
option && myChart.setOption(option);
|
|
option && myChart.setOption(option);
|
|
}
|
|
}
|
|
|
|
+ dateChange(){
|
|
|
|
+ this.getData()
|
|
|
|
+ }
|
|
|
|
+ getData() {
|
|
|
|
+ (this as any).$request({
|
|
|
|
+ url:'/omsOrder/report/sendCount',
|
|
|
|
+ method: 'GET',
|
|
|
|
+ params:{
|
|
|
|
+ days:this.dateValue
|
|
|
|
+ }
|
|
|
|
+ }).then((res:any) => {
|
|
|
|
+ if(res.data) {
|
|
|
|
+ this.initChart(res.data)
|
|
|
|
+ }
|
|
|
|
+ }).catch(() =>{})
|
|
|
|
+ }
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
-.chart{
|
|
|
|
|
|
+.chart-box{
|
|
height: 100%;
|
|
height: 100%;
|
|
width: 100%;
|
|
width: 100%;
|
|
|
|
+ .title-top{
|
|
|
|
+ height: 40px;
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ align-items: center;
|
|
|
|
+ position: relative;
|
|
|
|
+ width: 100%;
|
|
|
|
+ >span{
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ font-weight: 700;
|
|
|
|
+ }
|
|
|
|
+ .select{
|
|
|
|
+ width: 100px;
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 6px;
|
|
|
|
+ right: 0;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+.chart{
|
|
|
|
+ height: calc(100% - 40px);
|
|
|
|
+ width: 100%;
|
|
}
|
|
}
|
|
</style>
|
|
</style>
|