<template>
|
<div class="home-index-module-b-compontent">
|
<div class="module-box">
|
<div class="top-title">出入库统计</div>
|
<div class="action-row">
|
<a-radio-group v-model:value="chartType" size="small" @change="onChangeChartType">
|
<a-radio-button :value="1">近7天</a-radio-button>
|
<a-radio-button :value="2">近1个月</a-radio-button>
|
<a-radio-button :value="3">近3个月</a-radio-button>
|
</a-radio-group>
|
</div>
|
<div class="line-chart-block">
|
<div style="height: 100%;" :id="chartid"></div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import * as echarts from 'echarts';
|
import { markRaw } from 'vue'
|
import { GeInOutTaskNumber} from '@/api/modular/system/homeManage'
|
export default {
|
name:'homeIndexModuleBCompontent',
|
data(){
|
return {
|
chartType:1,
|
chartid:'',
|
chart:null,
|
dataSource:[],
|
defaultOption:{
|
tooltip: {
|
trigger: 'axis'
|
},
|
legend:{
|
show:true
|
},
|
grid: {
|
left: 30,
|
right: 10,
|
bottom: 70
|
},
|
xAxis: {
|
data: []
|
},
|
yAxis: {},
|
dataZoom: [
|
{
|
startValue: '2014-06-01',
|
type: 'slider'
|
}
|
],
|
series: [
|
{name:'入库',type:'line',data:[],smooth: true},
|
{name:'出库',type:'line',data:[],smooth: true}
|
]
|
}
|
}
|
},
|
methods:{
|
init(){
|
setTimeout(()=>{
|
this.getData()
|
},200)
|
},
|
onChangeChartType(){
|
this.getData()
|
},
|
createChart(){
|
if (!this.chart) {
|
this.chart = markRaw(echarts.init(window.document.getElementById(this.chartid)))
|
}
|
},
|
getData(){
|
let params = {LookType:this.chartType}
|
GeInOutTaskNumber(params).then((d)=>{
|
this.dataSource = d.data || []
|
this.drawChart()
|
}).catch(()=>{
|
|
})
|
},
|
drawChart(){
|
if (this.dataSource.length<=0) return false;
|
let opt = JSON.parse(JSON.stringify(this.defaultOption))
|
if (this.dataSource.length<=8) {
|
opt.grid.bottom = 30
|
delete opt.dataZoom;
|
} else {
|
opt.dataZoom[0].startValue = this.dataSource[0].dateStr;
|
}
|
for (let i=0;i<this.dataSource.length;i++) {
|
opt.xAxis.data.push(this.dataSource[i].dateStr)
|
opt.series[0].data.push(this.dataSource[i].rukuNum)
|
opt.series[1].data.push(this.dataSource[i].chukuNum)
|
}
|
this.destoryChart()
|
this.createChart()
|
this.chart.setOption(opt)
|
},
|
destoryChart(){
|
try{
|
this.chart.dispose();
|
window.document.getElementById(this.chartid).innerHTML = '';
|
this.chart = null;
|
}catch(e){
|
//TODO handle the exception
|
}
|
}
|
},
|
created() {
|
this.chartid = 'chart-'+new Date().getTime();
|
},
|
beforeDestroy() {
|
this.destoryChart()
|
},
|
mounted() {
|
this.init()
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.home-index-module-b-compontent{
|
height:100%;
|
box-sizing: border-box;
|
padding-top: 24px;
|
.module-box{
|
background-color: #fff;
|
border-radius: 10px;
|
height:100%;
|
overflow: hidden;
|
display: flex;
|
flex-direction: column;
|
.top-title,.action-row{
|
flex-shrink: 0;
|
}
|
.top-title{
|
background-color: #fff;
|
padding:8px 16px;
|
font-size: 18px;
|
}
|
.action-row{
|
padding: 0 20px 12px 50px;
|
}
|
.line-chart-block{
|
flex-grow:1;
|
}
|
}
|
}
|
</style>
|
