diff --git a/src/views/modules/monitoring/equipmentTimesequence.vue b/src/views/modules/monitoring/equipmentTimesequence.vue index 15a859e..69074c4 100644 --- a/src/views/modules/monitoring/equipmentTimesequence.vue +++ b/src/views/modules/monitoring/equipmentTimesequence.vue @@ -32,8 +32,8 @@ id="time-chart__inner" ref="time-chart__inner" class="time-chart__inner" - style="width: 100%; min-height: 50vh;" - :style="{ height: autoHeight + 'px' }" + style="min-height: 50vh;" + :style="{ height: autoHeight + 'px', width: '100%' }" />
请先查询数据
@@ -112,6 +112,9 @@ class ChartOption { show: true, alignWithLabel: true }, + splitLine: { + show: true + }, axisLine: { show: true }, @@ -188,7 +191,7 @@ export default { rawTime: new Date(), dataForm: { wsId: null, - productlines: [], + productlines: null, startTime: null, entTime: null }, @@ -215,6 +218,14 @@ export default { this.getWorksetionList() }) }, + mounted() { + this.$nextTick(() => { + this.initChart() + }) + }, + updated() { + if (this.chart) this.chart.resize() + }, watch: { timeType() { // 防止切换日期类型时报错 @@ -279,7 +290,7 @@ export default { dataList.map(item => { if (equipments[item.eqId]) { // 如果设备已存在 - equipments[item.eqId].name = item.eqName + // equipments[item.eqId].name = item.eqName equipments[item.eqId].status.push({ startTime: +new Date(item.startTime), endTime: +new Date(item.endTime), @@ -298,7 +309,7 @@ export default { } } }) - // console.log('items --- ', equipments) + console.log('created equipments --- ', equipments) return equipments }, // 把分组好的设备数据转换为echarts需要的series数据 @@ -324,16 +335,26 @@ export default { getDataList() { let startTime = this.rawTime ? moment(this.rawTime) - .set({ date: 1, hour: 0, minute: 0, second: 0, millisecond: 0 }) + .set({ hour: 0, minute: 0, second: 0, millisecond: 0 }) .format('YYYY-MM-DDTHH:mm:ss') : '' let endTime = startTime ? moment(startTime) - .add(1, 'M') + .add(1, 'd') .format('YYYY-MM-DDTHH:mm:ss') : '' + const productlines = this.dataForm.productlines ? [this.dataForm.productlines] : [] + const wsId = this.dataForm.wsId || '' + + /** keep a copy of query conditions */ + this.$set(this.queryBuffer, 'productlines', productlines) + this.$set(this.queryBuffer, 'wsId', wsId) + this.$set(this.queryBuffer, 'startTime', startTime) + this.$set(this.queryBuffer, 'endTime', endTime) this.dataListLoading = true + + /** fetch data */ this.$http({ url: this.$http.adornUrl('/monitoring/eqAnalysis/timeAndStatus'), method: 'post', @@ -346,15 +367,64 @@ export default { }).then(({ data: res }) => { if (res.code === 500) { this.dataList.splice(0) + this.equipments = {} // 关闭 echarts 的显示 this.$message.error(res.msg) } else { - this.dataList = res.data + /** handle actual data */ + this.dataList = res.data + + /** test data */ + // this.dataList = [ + // { + // eqId: 'eq-001', + // eqName: 'A1预热机', + // startTime: '2022-05-04T00:30:34', + // endTime: '2022-05-04T08:30:34', + // status: 0 + // }, + // { + // eqId: 'eq-001', + // eqName: 'A1预热机', + // startTime: '2022-05-04T08:30:34', + // endTime: '2022-05-04T09:30:34', + // status: 1 + // }, + // { + // eqId: 'eq-001', + // eqName: 'A1预热机', + // startTime: '2022-05-04T09:30:34', + // endTime: '2022-05-04T11:30:34', + // status: 2 + // }, + // { + // eqId: 'eq-001', + // eqName: 'A1预热机', + // startTime: '2022-05-04T11:30:34', + // endTime: '2022-05-04T13:30:34', + // status: 1 + // } + // ] + + this.equipments = this.transformDataToEquipments(this.dataList) + this.chartOption.setYAxis(Object.keys(this.equipments).map(eId => this.equipments[eId].name)) + console.log('(((set x axis))): ', this.dataList[0].startTime) + this.chartOption.setXAxis(this.dataList[0].startTime) + this.chartOption.setData(this.transformEquipmentsToSeries(this.equipments)) + + this.$nextTick(() => { + this.renderChart() + }) } }) }, handleProductLineChange(val) { this.getWorksetionList() }, + // 渲染 echarts + renderChart() { + console.log('>>> chart configs: ', this.chartOption) + this.chart.setOption(this.chartOption) + }, // 每页数 sizeChangeHandle(val) { this.pageSize = val @@ -383,3 +453,9 @@ export default { } } + +