From 4f7889ff60b6625d9e8dffc7a6c9cb6d85a80e0d Mon Sep 17 00:00:00 2001
From: lb <liubin_9396@163.com>
Date: Sun, 8 Oct 2023 15:53:38 +0800
Subject: [PATCH] done time sequence demo

---
 .../equipment/timing-diagram/status/demo.html | 839 ++++++++++--------
 1 file changed, 456 insertions(+), 383 deletions(-)
diff --git a/src/views/equipment/timing-diagram/status/demo.html b/src/views/equipment/timing-diagram/status/demo.html
index 466c8865..8cfe523b 100644
--- a/src/views/equipment/timing-diagram/status/demo.html
+++ b/src/views/equipment/timing-diagram/status/demo.html
@@ -1,26 +1,26 @@
 <!DOCTYPE html>
 <html lang="en">
-	<head>
-		<meta charset="UTF-8" />
-		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<title>Document</title>
-	</head>
-	<body>
-		<div
-			id="app"
-			style="width: 100vw; height: 80vh; background: #ccc3; margin: 24px"></div>
 
-		<script src="./echarts.js"></script>
-		<script>
-			function getStartTime(timestamp) {
-				return new Date(new Date(timestamp).toLocaleDateString()).getTime();
-			}
+<head>
+	<meta charset="UTF-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+	<title>Document</title>
+</head>
 
-			function renderItem(params, api) {
-				var categoryIndex = api.value(0);
-				var start = api.coord([api.value(1), categoryIndex]);
-				var end = api.coord([api.value(2), categoryIndex]);
-				console.log(`
+<body>
+	<div id="app" style="width: 100vw; height: 80vh; background: #fff; margin: 24px"></div>
+
+	<script src="./echarts.js"></script>
+	<script>
+		function getStartTime(timestamp) {
+			return new Date(new Date(timestamp).toLocaleDateString()).getTime();
+		}
+
+		function renderItem(params, api) {
+			var categoryIndex = api.value(0);
+			var start = api.coord([api.value(1), categoryIndex]);
+			var end = api.coord([api.value(2), categoryIndex]);
+			console.log(`
                     categoryIndex: ${categoryIndex},
                     start: ${start},
                     end: ${end},
@@ -32,393 +32,466 @@
                     api.style(): ${JSON.stringify(api.style())}
                 `);
 
-				var height = api.size([0, 1])[1] * 2;
-				// 用一个矩形去截取另一个矩形
-				var rectShape = echarts.graphic.clipRectByRect(
-					// 被截取矩形
-					{
-						x: start[0],
-						y: start[1] - height / 2,
-						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
-					}
-				);
-                console.log(`------------- ${JSON.stringify(rectShape)} -------------- `)
-				return (
-					rectShape && {
-						type: 'rect',
-						transition: ['shape'],
-						shape: rectShape,
-						style: api.style(),
-					}
-				);
-			}
+			var height = api.size([0, 1])[1] * 2;
+			// 用一个矩形去截取另一个矩形
+			var rectShape = echarts.graphic.clipRectByRect(
+				// 被截取矩形
+				{
+					x: start[0],
+					y: start[1] - height / 2,
+					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
+				}
+			);
+			console.log(`------------- ${JSON.stringify(rectShape)} -------------- `)
+			return (
+				rectShape && {
+					type: 'rect',
+					transition: ['shape'],
+					shape: rectShape,
+					style: api.style(),
+				}
+			);
+		}
 
-			function getXaxisRange(startTime) {
-				return Array(24)
-					.fill(startTime)
-					.map((item, index) => {
-						return new Date(item + index * 3600 * 1000)
-							.toLocaleTimeString()
-							.split(':')
-							.slice(0, 2)
-							.join(':');
-					});
-			}
+		function getXaxisRange(startTime) {
+			return Array(24)
+				.fill(startTime)
+				.map((item, index) => {
+					return new Date(item + index * 3600 * 1000)
+						.toLocaleTimeString()
+						.split(':')
+						.slice(0, 2)
+						.join(':');
+				});
+		}
 
-			function getTodayStart(today) {
-				const [y, m, d] = [
-					today.getFullYear(),
-					today.getMonth(),
-					today.getDate(),
-				];
-				return new Date(y, m, d).getTime();
-			}
-
-			/** 颜色配置 */
-			const types = [
-				{ name: '运行', color: '#288AFF' },
-				{ name: '故障', color: '#FC9C91' },
-				{ name: '计划停机', color: '#FFDC94' },
-				{ name: '空白', color: '#F2F4F9' },
+		function getTodayStart(today) {
+			const [y, m, d] = [
+				today.getFullYear(),
+				today.getMonth(),
+				today.getDate(),
 			];
+			return new Date(y, m, d).getTime();
+		}
 
-			const option = {
-				tooltip: {
-					trigger: 'item',
-					axisPointer: {
-						type: 'none',
-						// label: {
-						// 	backgroundColor: '#6a7985',
-						// },
-					},
-                    formatter: (params) => {
-                        // console.log('formatter', params)
-                        // return `
-                        // <div>${new Date(params[0].value[1]).toLocaleString()} ~ ${new Date(params[0].value[2]).toLocaleString()}</div>
-                        // <div style="display: flex; justify-content: space-between; min-width: 128px; align-items: center;">
-                        //     <span>${params[0].seriesName}</span>
-                        //     <span>${params[0].name}</span>
-                        // </div>
-                        // `
-						console.log(params)
-                        return `
+		/** 颜色配置 */
+		const types = [
+			{ name: '运行', color: '#288AFF' },
+			{ name: '故障', color: '#FC9C91' },
+			{ name: '计划停机', color: '#FFDC94' },
+			{ name: '空白', color: '#F2F4F9' },
+		];
+
+		const option = {
+			tooltip: {
+				trigger: 'item',
+				axisPointer: {
+					type: 'none',
+					// label: {
+					// 	backgroundColor: '#6a7985',
+					// },
+				},
+				formatter: (params) => {
+					// console.log('formatter', params)
+					// return `
+					// <div>${new Date(params[0].value[1]).toLocaleString()} ~ ${new Date(params[0].value[2]).toLocaleString()}</div>
+					// <div style="display: flex; justify-content: space-between; min-width: 128px; align-items: center;">
+					//     <span>${params[0].seriesName}</span>
+					//     <span>${params[0].name}</span>
+					// </div>
+					// `
+					return `
 						<div style="display: flex; align-items: center; justify-content: space-between">
 						<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>
                         `
-                    }
+				}
+			},
+			grid: [
+				{
+					id: 0,
+					top: 10,
+					left: 128,
+					right: 64,
+					height: 56,
 				},
-				grid: [
-					{
-						id: 0,
-						top: 10,
-                        left: 128,
-                        right: 64,
-						height: 56, 
+				// {
+				// 	id: 1,
+				// 	top: 80,
+				// 	height: 56,
+				// },
+				// ***************** 添加第二个grid *****************
+				{
+					id: 1,
+					top: 180,
+					left: 128,
+					right: 64,
+					height: 56
+				}
+			],
+			xAxis: [
+				{
+					id: 'asdf',
+					gridIndex: 0,
+					axisTick: {
+						alignWithLabel: true,
+						inside: true,
 					},
-					// {
-					// 	id: 1,
-					// 	top: 80,
-					// 	height: 56,
-					// },
-					// ***************** 添加第二个grid *****************
-					{
-						id: 1,
-						top: 180,
-						left: 128,
-						right: 64,
-						height: 56
-					}
-				],
-				xAxis: [
-					{
-						id: 'asdf',
-						gridIndex: 0,
-						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(':');
 						},
-						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: 'asdff',
-						gridIndex: 0,
-						axisLabel: { show: false },
-						axisLine: { show: false },
+					boundaryGap: false,
+					// data: getXaxisRange(getTodayStart(new Date())),
+				},
+				{
+					id: 'asdff',
+					gridIndex: 0,
+					axisLabel: { show: false },
+					axisLine: { show: false },
+				},
+				// ***************** 添加第二个 xAxis *****************
+				{
+					id: 'asdfjk',
+					gridIndex: 1,
+					axisTick: {
+						alignWithLabel: true,
+						inside: true,
 					},
-					// ***************** 添加第二个 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(':');
 						},
-						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 },
+					boundaryGap: false,
+					// data: getXaxisRange(getTodayStart(new Date())),
+				},
+				{
+					id: 'fjkd',
+					gridIndex: 1,
+					axisLabel: { show: false },
+					axisLine: { show: false },
+				},
+			],
+			yAxis: [
+				// 主y轴
+				{
+					id: 0,
+					gridIndex: 0,
+					type: 'value',
+					splitLine: { show: false },
+					name: '设备1',
+					nameLocation: 'center',
+					nameGap: 56,
+					nameRotate: 0,
+					nameTextStyle: {
+						fontSize: 18,
 					},
-				],
-				yAxis: [
-					// 主y轴
-					{
-						id: 0,
-						gridIndex: 0,
-						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 },
+					axisLine: {
+						show: true,
+						lineStyle: {},
 					},
-					// 辅y轴
-					{
-						id: 1,
-						gridIndex: 0,
-						type: 'value',
-						splitLine: { show: false },
-						axisLabel: { show: false },
-						axisTick: { show: false },
+					axisLabel: { show: false },
+					axisTick: { show: false },
+				},
+				// 辅y轴
+				{
+					id: 1,
+					gridIndex: 0,
+					type: 'value',
+					splitLine: { show: false },
+					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,
 					},
-					// ***************** 添加第二个 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 },
+					axisLine: {
+						show: true,
+						lineStyle: {},
 					},
-					// 辅y轴
-					{
-						id: 3,
-						gridIndex: 1,
-						type: 'value',
-						splitLine: { show: false },
-						axisLabel: { show: false },
-						axisTick: { show: false },
+					axisLabel: { show: false },
+					axisTick: { show: false },
+				},
+				// 辅y轴
+				{
+					id: 3,
+					gridIndex: 1,
+					type: 'value',
+					splitLine: { show: false },
+					axisLabel: { show: false },
+					axisTick: { show: false },
+				},
+			],
+			series: [
+				{
+					// 沉默的背景
+					xAxisIndex: 0,
+					yAxisIndex: 0,
+					type: 'custom',
+					renderItem: renderItem,
+					silent: true,
+					itemStyle: {
+						opacity: 0.8,
 					},
-				],
-				series: [
-					{
-                        name: '设备1',
-						xAxisIndex: 0,
-						yAxisIndex: 0,
-						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],
-								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,
-									},
-								},
-							},
-						],
+					encode: {
+						x: [1, 2],
+						y: 0,
 					},
-					// ***************** 添加第二个设备 *****************
-					{
-                        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],
-								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,
-									},
-								},
-							},
-						],
+					data: [
+						{
+							name: '无数据',
+							value: [0, 1696694400000, 1696780800000, 0],
+							tooltip: { show: false },
+							// silent: true,
+							// animation: false,
+							// universalTransition: { enable: false },
+							// hoverAnimation: false,
+							// selectMode: true,
+							// select: { disabled: true },
+							// emphasis: { disabled: false, focus: 'none', itemStyle: { opacity: 0 } },
+							// z: 0,
+							// zlevel: 0,
+							// emphasis: { disabled: true },
+							itemStyle: {
+								color: '#ccc',
+								opacity: 0.3,
+							}
+						}
+					]
+				},
+				{
+					name: '设备1',
+					xAxisIndex: 0,
+					yAxisIndex: 0,
+					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],
+							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,
+								},
+							},
+						},
+					],
+				},
+				// ***************** 添加第二个设备 *****************
+				{
+					// 沉默的背景
+					xAxisIndex: 2,
+					yAxisIndex: 2,
+					type: 'custom',
+					renderItem: renderItem,
+					silent: true,
+					itemStyle: {
+						opacity: 0.8,
+					},
+					encode: {
+						x: [1, 2],
+						y: 0,
+					},
+					data: [
+						{
+							name: '无数据',
+							value: [0, 1696694400000, 1696780800000, 0],
+							tooltip: { show: false },
+							// silent: true,
+							// animation: false,
+							// universalTransition: { enable: false },
+							// hoverAnimation: false,
+							// selectMode: true,
+							// select: { disabled: true },
+							// emphasis: { disabled: false, focus: 'none', itemStyle: { opacity: 0 } },
+							// z: 0,
+							// zlevel: 0,
+							// emphasis: { disabled: true },
+							itemStyle: {
+								color: '#ccc',
+								opacity: 0.3,
+							}
+						}
+					]
+				},
+				{
+					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,
+								},
+							},
+							// showBackground: true,
+						},
+						{
+							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,
+								},
+							},
+						},
+					],
+				},
+			],
+		};
 
-			const el = document.getElementById('app');
-			const myChart = echarts.init(el);
+		const el = document.getElementById('app');
+		const myChart = echarts.init(el);
 
-			console.log('mychart', myChart);
-			myChart.setOption(option);
-		</script>
-	</body>
-</html>
+		console.log('mychart', myChart);
+		myChart.setOption(option);
+	</script>
+</body>
+
+</html>
\ No newline at end of file
