<template>
|
<div class="home-page-compontent-b" v-loading="loading">
|
<div class="top-header">
|
<span class="pannel-title">出入库统计分析</span>
|
<!-- <el-radio-group class="chart-type-radios radio-types-a" v-model="chartType" size="small">
|
<el-radio-button label="1">数 量</el-radio-button>
|
<el-radio-button label="2">节 拍</el-radio-button>
|
</el-radio-group> -->
|
<div class="chart-params-form" @click.stop="">
|
<div class="default-date-range-btns">
|
<div class="btn-item" :class="[btnActiveValue==='week'?'active':'']" @click.stop="onChangeTemplateDateRange('week')">本周</div>
|
<div class="btn-item" :class="[btnActiveValue==='month'?'active':'']" @click.stop="onChangeTemplateDateRange('month')">本月</div>
|
<div class="btn-item" :class="[btnActiveValue==='year'?'active':'']" @click.stop="onChangeTemplateDateRange('year')">全年</div>
|
</div>
|
<el-date-picker type="daterange" size="small" v-model="formDateRange" :clearable="false" value-format="YYYY-MM-DD" placeholder="日期区间" class="default-form-width" @change="onChangeDateRange" />
|
</div>
|
</div>
|
|
<div class="chart-box" :id="chartid"></div>
|
</div>
|
</template>
|
|
<script>
|
import * as echarts from 'echarts';
|
import { markRaw } from 'vue'
|
export default {
|
name:'homePageCompontentB',
|
data(){
|
return {
|
chartType:'',
|
formDateRange:'',
|
btnActiveValue:'week',
|
loading:false,
|
dataSource:[],
|
chartid:'',
|
chart:null,
|
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: []
|
}
|
}
|
},
|
created() {
|
this.chartid = 'chart-'+new Date().getTime();
|
},
|
beforeDestroy() {
|
this.destoryChart()
|
},
|
mounted() {
|
this.init()
|
},
|
methods:{
|
init(){
|
this.getWeekData()
|
},
|
createChart(){
|
if (!this.chart) {
|
this.chart = markRaw(echarts.init(window.document.getElementById(this.chartid)))
|
}
|
},
|
getWeekData(){
|
let _today = this.$utils.project.dayjs();
|
let weekNum = _today.day();
|
if (weekNum===0) {
|
this.getData([
|
_today.subtract(6, 'day').format('YYYY-MM-DD'),
|
_today.format('YYYY-MM-DD')
|
])
|
} else {
|
this.getData([
|
_today.day(1).format('YYYY-MM-DD'),
|
_today.format('YYYY-MM-DD')
|
])
|
}
|
},
|
getMonthData(){
|
let _today = this.$utils.project.dayjs();
|
this.getData([
|
_today.date(1).format('YYYY-MM-DD'),
|
_today.format('YYYY-MM-DD')
|
])
|
},
|
getYearData(){
|
let _today = this.$utils.project.dayjs();
|
this.getData([
|
_today.year()+'-01-01',
|
_today.format('YYYY-MM-DD')
|
])
|
},
|
onChangeTemplateDateRange(type){
|
if (type==='btnActiveValue') return false;
|
this.btnActiveValue = type;
|
if (this.btnActiveValue==='week') {
|
this.getWeekData()
|
} else if (this.btnActiveValue==='month') {
|
this.getMonthData()
|
} else if (this.btnActiveValue==='year') {
|
this.getYearData()
|
}
|
},
|
onChangeDateRange(val){
|
if (!val || val.length<2) return false;
|
this.getDataByDateRange(val)
|
},
|
getDataByDateRange(val){
|
this.btnActiveValue = ''
|
this.getData(val)
|
},
|
getData(params,isDateRange=false){
|
this.loading = true;
|
if (!isDateRange) {
|
this.formDateRange = params
|
}
|
let iParams = {
|
StartTime:params[0] + ' 00:00:00',
|
EndTime:params[1] + ' 23:59:59'
|
}
|
this.$api.get('TaskStatistics',iParams,{block:'home'}).then((d)=>{
|
this.dataSource = d || []
|
this.drawChart()
|
this.loading = false;
|
}).catch(()=>{
|
this.loading = false;
|
})
|
},
|
drawChart(){
|
if (this.dataSource.length<=0) return false;
|
let opt = JSON.parse(JSON.stringify(this.defaultOption))
|
let seriesArr = [];
|
if (this.dataSource.length<=7) {
|
opt.grid.bottom = 20
|
delete opt.dataZoom;
|
} else {
|
opt.dataZoom[0].startValue = this.$utils.project.parseTimeStr(this.dataSource[0].Time,'YYYY-MM-DD')
|
}
|
this.dataSource[0].data.forEach((curentItem)=>{
|
seriesArr.push({name:curentItem.Name,type:'line',data:[],smooth: true})
|
})
|
for (let i=0;i<this.dataSource.length;i++) {
|
opt.xAxis.data.push(this.$utils.project.parseTimeStr(this.dataSource[i].Time,'YYYY-MM-DD'))
|
for (let j=0;j<this.dataSource[i].data.length;j++) {
|
seriesArr[j].data.push(this.dataSource[i].data[j].Count)
|
}
|
}
|
opt.series = seriesArr;
|
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
|
}
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.home-page-compontent-b{
|
padding: 24px;
|
padding-top: 20px;
|
box-sizing: border-box;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
.top-header{
|
display: flex;
|
align-items: center;
|
position: relative;
|
min-height: 40px;
|
flex-shrink: 0;
|
.chart-type-radios{
|
margin-left: 32px;
|
}
|
.chart-params-form{
|
position: absolute;
|
top:0;
|
right: 0;
|
display: flex;
|
align-items: center;
|
justify-content: flex-end;
|
}
|
.default-date-range-btns{
|
display: flex;
|
margin-right: 16px;
|
.btn-item{
|
height: 24px;
|
display: flex;
|
align-items: center;
|
padding: 0 12px;
|
border-radius: 3px;
|
cursor: pointer;
|
&.active{
|
background-color: $color-primary;
|
color: #FFFFFF;
|
cursor: default;
|
}
|
}
|
}
|
}
|
.chart-box{
|
flex: 1;
|
}
|
}
|
</style>
|
<style lang="scss">
|
.home-page-compontent-b{
|
.radio-types-a{
|
.el-radio-button__original-radio{
|
&:checked{
|
&+.el-radio-button__inner{
|
background-color: #FFFFFF !important;
|
color: $color-primary !important;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
