bodyCenterLeft.vue
3.74 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<template>
<div class="dv-content-body-center-list-left">
<div id="main"></div>
</div>
</template>
<script>
export default {
data() {
return {
optionTwoLine: window.inventoryInformation_body,
myChart: null,
}
},
methods: {
// 库位使用情况
getData(data) {
try {
const dom = document.getElementById('main')
if (!dom) return
if (!this.myChart) {
this.myChart = this.$echarts.init(dom)
}
if (!data || !Array.isArray(data)) {
// 数据为空时显示空图表
if (this.myChart) {
this.optionTwoLine.xAxis.data = []
this.optionTwoLine.series[0].data = []
this.myChart.clear()
this.myChart.setOption(this.optionTwoLine)
}
return
}
// 过滤无效数据
const validData = data.filter(item => item && item.day && item.count)
if (validData.length === 0) {
if (this.myChart) {
this.optionTwoLine.xAxis.data = []
this.optionTwoLine.series[0].data = []
this.myChart.clear()
this.myChart.setOption(this.optionTwoLine)
}
return
}
const dates = validData.map(item => item.day);
const quantities = validData.map(item => parseInt(item.count) || 0);
this.optionTwoLine.xAxis.data = this.monthDayDates(dates)
this.optionTwoLine.series[0].data = quantities
this.optionTwoLine.title.text = '入库趋势图'
this.optionTwoLine.series[0].lineStyle.color = 'hsl(36.1deg 100% 49.22%)'
this.myChart.clear()
this.myChart.setOption(this.optionTwoLine)
} catch (error) {
console.error('bodyCenterLeft getData error:', error)
// 出错时清空图表
if (this.myChart) {
try {
this.optionTwoLine.xAxis.data = []
this.optionTwoLine.series[0].data = []
this.myChart.clear()
this.myChart.setOption(this.optionTwoLine)
} catch (e) {
console.error('清空图表时出错:', e)
}
}
}
},
monthDayDates(data) {
return data.map(date => {
const [year, month, day] = date.split('-');
return `${month}-${day}`;
});
},
setWarehouselocation() {
let listData = []
this.sysData.forEach((item) => {
let bgan = `${item.unHaveContainerNum}/${item.haveContainerNum}`
listData.push([item.roadWay, item.sumNum, bgan, item.usagerate])
})
this.initWarehouselocationTable(listData)
},
setWarehouselocationDuanzi() {
let listData = []
this.sysData.forEach((item) => {
listData.push([item.roadWay, item.sumNum, item.haveContainerNum, item.usagerate])
})
this.initWarehouselocationTable(listData)
},
initWarehouselocationTable(s) {
this.WarehouselocationTable = {
header: this.optTableWarehouse.header,
data: s,
columnWidth: [150, 150, 190, 150],
align: this.optTableWarehouse.align,
headerBGC: '#201e1e', //表头
oddRowBGC: '#021c66',
evenRowBGC: '#65,105,225',
rowNum: 4,
headerHeight: 25,
carousel: 'page',
waitTime: 8000,
}
},
ajaxSuccessDataBefore(res, title) {
if (res.data.result == null || res.data.result.length == 0) {
''.Log(title + '无数据', 'getData')
this.initWarehouselocationTable([])
return false
}
return true
},
},
mounted() {
// this.getData()
//eslint-disable-next-line no-debugger
// debugger
this.resizeHandler = () => {
this.myChart && this.myChart.resize();
};
window.addEventListener('resize', this.resizeHandler);
},
beforeDestroy() {
// 移除事件监听
window.removeEventListener('resize', this.resizeHandler);
// 销毁 ECharts 实例
if (this.myChart) {
this.myChart.dispose();
this.myChart = null;
}
},
}
</script>
<style lang="less" scoped>
.dv-content-body-center-list-left {
width: 49%;
height: 95%;
border: 1.5px solid hsl(208.57deg 51.22% 40.2%);
}
#main {
width: 100%;
height: 100%;
}
</style>