diff --git a/src/views/equipment/timing-diagram/status/demo.js b/src/views/equipment/timing-diagram/status/demo.js index 134173e6..633a7f58 100644 --- a/src/views/equipment/timing-diagram/status/demo.js +++ b/src/views/equipment/timing-diagram/status/demo.js @@ -90,18 +90,23 @@ export default class GanttGraph { yAxis = [] series = [] - constructor(data, startTime) { - this.gridIndex = 0; - this.currentXaxisId = null; - this.currentYaxisId = null; - // this.startTime = new Date(startTime); - this.startTime = new Date(new Date().toLocaleDateString()); + constructor(el, startTime) { + this.el = el; + this.gridIndex = -1; + this.currentGraphIndex = -2; + this.startTime = new Date(startTime); + // this.startTime = new Date(new Date('2023/10/8').toLocaleDateString()); console.log('<> Gantt Created', this.startTime); - this.grid.push(this.makeGrid()) - this.xAxis.push(...this.makeXaxis()) - this.yAxis.push(...this.makeYaxis("设备1")) - this.series.push(...this.makeSeries({ equipmentName: "设备1" })) + // this.grid.push(this.makeGrid()) + // this.xAxis.push(...this.makeXaxis()) + // this.yAxis.push(...this.makeYaxis("设备1")) + // this.series.push(...this.makeSeries({ equipmentName: "设备1" })) + + // this.grid.push(this.makeGrid()) + // this.xAxis.push(...this.makeXaxis()) + // this.yAxis.push(...this.makeYaxis("设备2")) + // this.series.push(...this.makeSeries({ equipmentName: "设备2" })) } @@ -110,8 +115,10 @@ export default class GanttGraph { this.gridIndex++; return { id: 'GRID_' + this.gridIndex, - top: 12 + 64 * (this.gridIndex - 1), - right: 64, + // top: 12 + 128 * this.gridIndex, + top: 12 + 104 * this.gridIndex, + right: 48, + left: 88, height: 56 } } @@ -119,11 +126,10 @@ export default class GanttGraph { // 构造一个 xAxis makeXaxis() { const [id1, id2] = ['' + Math.random(), '' + Math.random()] - this.currentXaxisId = id1; return [ { id: id1, - gridIndex: 'GRID_' + this.gridIndex, + gridIndex: this.gridIndex, axisTick: { alignWithLabel: true, inside: true, @@ -147,7 +153,7 @@ export default class GanttGraph { }, { id: id2, - gridIndex: 'GRID_' + this.gridIndex, + gridIndex: this.gridIndex, axisLabel: { show: false }, axisLine: { show: false }, }, @@ -158,20 +164,19 @@ export default class GanttGraph { // 构造一个 yAxis makeYaxis(equipmentName) { const [id1, id2] = ['' + Math.random(), '' + Math.random()] - this.currentYaxisId = id1; return [ // 主y轴 { id: id1, - gridIndex: 'GRID_' + this.gridIndex, + gridIndex: this.gridIndex, type: 'value', splitLine: { show: false }, name: equipmentName, nameLocation: 'center', - nameGap: 56, + nameGap: 14, nameRotate: 0, nameTextStyle: { - fontSize: 18, + fontSize: 16, }, axisLine: { show: true, @@ -183,7 +188,7 @@ export default class GanttGraph { // 辅y轴 { id: id2, - gridIndex: 'GRID_' + this.gridIndex, + gridIndex: this.gridIndex, type: 'value', splitLine: { show: false }, axisLabel: { show: false }, @@ -193,15 +198,15 @@ export default class GanttGraph { } // 构造一个 series - makeSeries({ equipmentName }) { - const { currentXaxisId: xAxisIndex, currentYaxisId: yAxisIndex } = this; + makeSeries({ equipmentName, arr }) { + this.currentGraphIndex += 2; const bgStartTime = this.startTime.getTime(); const bgEndTime = bgStartTime + 3600 * 24 * 1000; return [ // 沉默的背景 { - xAxisIndex, - yAxisIndex, + xAxisIndex: this.currentGraphIndex, + yAxisIndex: this.currentGraphIndex, type: 'custom', renderItem: renderItem, silent: true, @@ -226,8 +231,8 @@ export default class GanttGraph { }, { name: equipmentName, - xAxisIndex, - yAxisIndex, + xAxisIndex: this.currentGraphIndex, + yAxisIndex: this.currentGraphIndex, type: 'custom', renderItem: renderItem, itemStyle: { @@ -237,83 +242,34 @@ export default class GanttGraph { x: [1, 2], y: 0, }, - data: [ - // 暂时先静态数据 - { - name: '运行', - value: [0, 1696694400000, 1696699400000, 0], - itemStyle: { - - color: types[0].color, - - }, - }, - { - name: '运行', - value: [0, 1696730000000, 1696734040450, 0], - itemStyle: { - - color: types[0].color, - - }, - }, - { - name: '故障', - value: [0, 1696737040000, 1696754040450, 0], - itemStyle: { - - color: types[1].color, - - }, - }, - { - name: '计划停机', - value: [0, 1696755000000, 1696759000000, 0], - itemStyle: { - - color: types[2].color, - - }, - }, - { - name: '运行', - value: [0, 1696759000000, 1696769000000, 0], - itemStyle: { - - color: types[0].color, - - }, - }, - { - name: '计划停机', - value: [0, 1696769400000, 1696779000000, 0], - itemStyle: { - - color: types[2].color, - - }, - }, - ], + data: arr.map(item => ({ + name: ['运行', '故障', '计划停机'][item.status], + value: [0, item.startTime, item.startTime + item.duration * 60 * 1000, 0], + itemStyle: { + color: types[item.status].color, + } + })), }, ] } - init(el) { - if (typeof el == 'string') { - el = document.querySelector(el); + init(data) { + if (!this.el) throw new Error('没有可供echarts初始化的容器') + if (typeof this.el == 'string') { + this.el = document.querySelector(this.el); } - this.chart = echarts.init(el); + this.chart = echarts.init(this.el); + this.handleProps(data); setTimeout(() => { - console.log("init....", this.chart, this.option); - debugger; + // debugger; this.chart.setOption(this.option); }, 200); } update(data) { - // todo , handle data - this.chart.setOption(this.option); + this.clear(); + this.init(data); } resize() { @@ -330,6 +286,32 @@ export default class GanttGraph { } } + // 每次 graphList 刷新都会重新渲染整个所有图表 + // 可以改进的地方：添加一个 handleAdd() 方法，一次添加一个新的 + handleProps(props) { + // props 是父组件的 graphList + console.log('props: ', props); + props.forEach(eqArr => { + this.grid.push(this.makeGrid()); + this.xAxis.push(...this.makeXaxis()); + this.yAxis.push(...this.makeYaxis(eqArr.key)); + this.series.push(...this.makeSeries({ equipmentName: eqArr.key, arr: eqArr })) + }); + } + + // handleAdd + handleAdd() { } + + clear() { + this.grid = []; + this.xAxis = []; + this.yAxis = []; + this.series = []; + this.currentGraphIndex = -2; + this.gridIndex = -1; + this.chart.dispose(); + } + // print option print() { console.log(JSON.stringify(this.option, null, 2)); diff --git a/src/views/equipment/timing-diagram/status/index.vue b/src/views/equipment/timing-diagram/status/index.vue index d20550d4..0eb330ff 100644 --- a/src/views/equipment/timing-diagram/status/index.vue +++ b/src/views/equipment/timing-diagram/status/index.vue @@ -47,7 +47,7 @@ -
+

@@ -126,6 +126,7 @@ export default { recordTime: null, }, graphList: [], + existingEquipments: [], open: false, eqList: [], startTime: null, @@ -165,12 +166,9 @@ export default { handler(val) { if (val && val.length) { this.$nextTick(() => { - // if (!this.chart) this.initChart(); - // this.setInitialConfig(); - // this.handleGraphList(); if (!this.gantt) { - this.gantt = new Gantt(null, this.startTime); - this.gantt.init('#status-chart'); + this.gantt = new Gantt('#status-chart', this.startTime); + this.gantt.init(val); return; } this.gantt.update(val); @@ -184,43 +182,6 @@ export default { }, }, methods: { - setInitialConfig() { - console.log('in setInitialConfig', this.chartOption); - this.chart.setOption(this.chartOption); - }, - - handleGraphList() { - console.log('in handleGraphList:', this.graphList); - return; - const min = this.queryParams.recordTime - ? new Date(this.queryParams.recordTime).getTime() - : this.findMin(); - - console.log('min is', min); - this.chartOption.xAxis.min = getStartTime(min); - this.chartOption.xAxis.max = getStartTime(min + 3600 * 24 * 1000); - this.graphList.forEach((arr) => { - this.chartOption.yAxis[0].data.push(arr.key); - arr.forEach((item) => { - this.chartOption.series[0].data.push({ - name: ['运行', '故障', '计划停机'][item.status], - value: [ - 0, - item.startTime, - item.startTime + item.duration * 60 * 1000, - item.duration * 60 * 1000, - ], - itemStyle: { - normal: { - color: types[item.status].color, - }, - }, - }); - }); - console.log('chartOptions', this.chartOption); - }); - }, - findMin() { let min = 0; this.graphList.forEach((arr) => { @@ -231,12 +192,6 @@ export default { return min; }, - initChart() { - const el = document.getElementById('status-chart'); - this.gantt = new Gantt(el); - this.gantt.init(); - }, - /** 重置查询条件 */ initQuery() { this.queryParams.lineId = null; @@ -261,8 +216,8 @@ export default { params: this.queryParams, }); if (code == 0) { + this.existingEquipments = Object.values(data).map((eq) => eq[0].equipmentId); this.graphList = this.objectToArray(data); - console.log('graph list', this.graphList); } }, @@ -348,8 +303,7 @@ export default { return; } - this.startTime = new Date(payload.recordTime).getTime(); - console.log("startTime", new Date(payload.recordTime).getTime()); + this.startTime = new Date(payload.recordTime) this.queryParams.lineId = payload.lineId || null; this.queryParams.sectionId = payload.sectionId || null; this.queryParams.equipmentId = payload.equipmentId || null; @@ -379,6 +333,10 @@ export default { }, async submitForm() { + if (this.existingEquipments.indexOf(this.queryParams.equipmentId) >= 0) { + this.$message.error('该设备已存在'); + return; + } const { code, data } = await this.$axios({ url: '/analysis/equipment-analysis/status', method: 'get',