update

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));

src/views/equipment/timing-diagram/status/index.vue

@@ -47,7 +47,7 @@
 					</div>
 				</el-col>
 			</el-row>
-			<div class="main-area" style="flex: 1; background: lightyellow; display: flex; flex-direction: column">
+			<div class="main-area" style="flex: 1; display: flex; flex-direction: column">
 				<div class="graphs" v-show="graphList.length" id="status-chart" style="height: 1px; flex: 1"></div>
 				<h2 v-if="!graphList || graphList.length == 0" class="no-data-bg"></h2>
 			</div>
@@ -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',