update time sequence status

src/views/equipment/timing-diagram/status/demo.html

@@ -42,12 +42,14 @@
 						width: end[0] - start[0],
 						height: height,
 					},
+					// {x: 0, y: 0, width: 2000, height: 60 } // <== 也行...
 					// 截取矩形
 					{
 						// 截取掉grid以外的部分，实质是计算方块的偏移量
 						x: params.coordSys.x, // {number} grid rect 的 x
 						// y: params.coordSys.y, // {number} grid rect 的 y
 						y: params.coordSys.y - 16, // {number} grid rect 的 y，并多减掉 16 个单位
+						// width: end[0] - start[0],
 						width: params.coordSys.width, // {number} grid rect 的 width
 						height: params.coordSys.height, // {number} grid rect 的 height
 					}
@@ -94,7 +96,7 @@
 
 			const option = {
 				tooltip: {
-					trigger: 'axis',
+					trigger: 'item',
 					axisPointer: {
 						type: 'none',
 						// label: {
@@ -110,9 +112,13 @@
                         //     <span>${params[0].name}</span>
                         // </div>
                         // `
+						console.log(params)
                         return `
-                        <h1 style="font-size: 18px; font-weight: 600; letter-spacing: 1px;">${params[0].name} <span style="display: inline-block; margin-left: 8px; width: 12px; height: 12px; border-radius: 50%; background: ${params[0].color} "></span></h1>
+						<div style="display: flex; align-items: center; justify-content: space-between">
-                        <div>${new Date(params[0].value[1]).toLocaleString()} ~ ${new Date(params[0].value[2]).toLocaleString()}</div>
+						<h1 style="font-size: 18px; font-weight: 600;">${params.seriesName}</h1>
+                        <h2 style="font-size: 18px; font-weight: 400; letter-spacing: 1px;">${params.name} <span style="display: inline-block; margin-left: 8px; width: 12px; height: 12px; border-radius: 50%; background: ${params.color} "></span></h2>
+                        </div>
+						<div>${new Date(params.value[1]).toLocaleString()} ~ ${new Date(params.value[2]).toLocaleString()}</div>
                         `
                     }
 				},
@@ -129,10 +135,18 @@
 					// 	top: 80,
 					// 	height: 56,
 					// },
+					// ***************** 添加第二个grid *****************
+					{
+						id: 1,
+						top: 180,
+						left: 128,
+						right: 64,
+						height: 56
+					}
 				],
 				xAxis: [
 					{
-						id: 0,
+						id: 'asdf',
 						gridIndex: 0,
 						axisTick: {
 							alignWithLabel: true,
@@ -157,11 +171,43 @@
 						// data: getXaxisRange(getTodayStart(new Date())),
 					},
 					{
-						id: 1,
+						id: 'asdff',
 						gridIndex: 0,
 						axisLabel: { show: false },
 						axisLine: { show: false },
 					},
+					// ***************** 添加第二个 xAxis *****************
+					{
+						id: 'asdfjk',
+						gridIndex: 1,
+						axisTick: {
+							alignWithLabel: true,
+							inside: true,
+						},
+						type: 'time',
+						min: getTodayStart(new Date()), // <===
+						max: getStartTime(new Date().getTime() + 3600 * 24 * 1000), // <===
+						splitNumber: 10,
+						axisLabel: {
+							margin: 12,
+							// rotate: -15,
+							formatter: function (val) {
+								return new Date(val)
+									.toLocaleTimeString()
+									.split(':')
+									.slice(0, 2)
+									.join(':');
+							},
+						},
+						boundaryGap: false,
+						// data: getXaxisRange(getTodayStart(new Date())),
+					},
+					{
+						id: 'fjkd',
+						gridIndex: 1,
+						axisLabel: { show: false },
+						axisLine: { show: false },
+					},
 				],
 				yAxis: [
 					// 主y轴
@@ -193,6 +239,35 @@
 						axisLabel: { show: false },
 						axisTick: { show: false },
 					},
+					// ***************** 添加第二个 yAxis *****************
+					{
+						id: 2,
+						gridIndex: 1,
+						type: 'value',
+						splitLine: { show: false },
+						name: '设备1',
+						nameLocation: 'center',
+						nameGap: 56,
+						nameRotate: 0,
+						nameTextStyle: {
+							fontSize: 18,
+						},
+						axisLine: {
+							show: true,
+							lineStyle: {},
+						},
+						axisLabel: { show: false },
+						axisTick: { show: false },
+					},
+					// 辅y轴
+					{
+						id: 3,
+						gridIndex: 1,
+						type: 'value',
+						splitLine: { show: false },
+						axisLabel: { show: false },
+						axisTick: { show: false },
+					},
 				],
 				series: [
 					{
@@ -208,13 +283,87 @@
 							x: [1, 2],
 							y: 0,
 						},
-						//function getTimestamp(point) {
-						// const t = new Date();
-						// const [y,m,d] = [t.getFullYear(),t.getMonth(),t.getDate()]
-						// const [h,M] = point.split(':')
-						// return new Date(y,m,d,h,M,0,0).getTime()
-						//}
 						data: [
+							{ 
+								name: '运行',
+								value: [0, 1696694400000, 1696699400000, 0],
+								itemStyle: {
+									normal: {
+										color: types[0].color,
+									},
+								},
+							},
+							{ 
+								name: '运行',
+								value: [0, 1696730000000, 1696734040450, 0],
+								itemStyle: {
+									normal: {
+										color: types[0].color,
+									},
+								},
+							},
+							{ 
+								name: '故障',
+								value: [0, 1696737040000, 1696754040450, 0],
+								itemStyle: {
+									normal: {
+										color: types[1].color,
+									},
+								},
+							},
+							{ 
+								name: '计划停机',
+								value: [0, 1696755000000, 1696759000000, 0],
+								itemStyle: {
+									normal: {
+										color: types[2].color,
+									},
+								},
+							},
+							{ 
+								name: '运行',
+								value: [0, 1696759000000, 1696769000000, 0],
+								itemStyle: {
+									normal: {
+										color: types[0].color,
+									},
+								},
+							},
+							{ 
+								name: '计划停机',
+								value: [0, 1696769400000, 1696779000000, 0],
+								itemStyle: {
+									normal: {
+										color: types[2].color,
+									},
+								},
+							},
+						],
+					},
+					// ***************** 添加第二个设备 *****************
+					{
+                        name: '设备2',
+						xAxisIndex: 2,
+						yAxisIndex: 2,
+						type: 'custom',
+						renderItem: renderItem,
+						itemStyle: {
+							opacity: 0.8,
+						},
+						encode: {
+							x: [1, 2],
+							y: 0,
+						},
+						data: [
+							{ 
+								name: '运行',
+								value: [0, 1696694400000, 1696699400000, 0],
+								itemStyle: {
+									normal: {
+										color: types[0].color,
+									},
+								},
+							},
 							{ 
 								name: '运行',
 								value: [0, 1696730000000, 1696734040450, 0],