merge

2023-10-13 17:09:07 +08:00
parent 11ee0d6541 98b3237c9a
commit 4a67e226e1
18 changed files with 1009 additions and 686 deletions
--- a/src/views/equipment/analysis/quality/components/lineChart.vue
+++ b/src/views/equipment/analysis/quality/components/lineChart.vue
@@ -43,7 +43,7 @@ export default {
 					eq.okQuantity,
 					eq.nokQuantity,
 					eq.totalQuantity,
-					eq.passRate.toFixed(4),
+					eq.passRate?.toFixed(4),
 				]);
 			});
 			return {
--- a/src/views/equipment/analysis/quality/index.vue
+++ b/src/views/equipment/analysis/quality/index.vue
@@ -29,7 +29,10 @@
 							@emitFun="handleEmitFun"></base-table>
 					</el-tab-pane>
 					<el-tab-pane :label="'\u3000柱状图\u3000'" name="graph">
-						<div v-if="activeName == 'graph'" class="graph" style="height: 40vh; display: flex; flex-direction: column;">
+						<div
+							v-if="activeName == 'graph'"
+							class="graph"
+							style="height: 40vh; display: flex; flex-direction: column">
 							<div class="blue-title">各设备加工数量</div>
 							<LineChart v-if="list && list.length" :list="list" />
 							<div v-else class="no-data-bg"></div>
@@ -87,6 +90,7 @@ export default {
 					rangeSeparator: '-',
 					startPlaceholder: '开始日期',
 					endPlaceholder: '结束日期',
+					defaultTime: ['00:00:00', '23:59:59'],
 					param: 'recordTime',
 					defaultSelect: [
 						new Date(y, m, d)
@@ -246,7 +250,9 @@ export default {
 	created() {
 		this.fillLineOptions();
 		this.fillProductOptions();
-		this.getList();
+	},
+	mounted() {
+		this.$refs['search-bar'].headBtnClick('search');
 	},
 	methods: {
 		handleTabClick(tab, event) {
@@ -307,12 +313,16 @@ export default {
 		},

 		handleSearchBarBtnClick(btn) {
-			console.log('handleSearchBarBtnClick', btn);
+			// debugger;
 			switch (btn.btnName) {
 				case 'search':
 					this.queryParams.lineId = btn.lineId;
 					this.queryParams.productId = btn.productId;
-					this.queryParams.recordTime = btn.recordTime ? btn.recordTime.map(time => moment(new Date(time)).format('YYYY-MM-DD HH:mm:ss')) : null;
+					this.queryParams.recordTime = btn.recordTime
+						? btn.recordTime.map((time) =>
+								moment(new Date(time)).format('YYYY-MM-DD HH:mm:ss')
+						  )
+						: null;
 					this.$nextTick(() => {
 						this.getList();
 					});
@@ -388,7 +398,7 @@ export default {
 	font-size: 14px;

 	&::before {
-		content: "";
+		content: '';
 		position: absolute;
 		left: 0;
 		top: 6px;
@@ -398,5 +408,4 @@ export default {
 		background: #0b58ff;
 	}
 }
-
 </style>
--- a/src/views/equipment/timing-diagram/output/index.vue
+++ b/src/views/equipment/timing-diagram/output/index.vue
@@ -74,7 +74,7 @@

 <script>
 import LineChart from './components/lineChart.vue';
-import response from './response.json';
+// import response from './response.json';

 export default {
 	name: 'SGProduction',
--- a/src/views/equipment/timing-diagram/status/demo.html
+++ b/src/views/equipment/timing-diagram/status/demo.html
@@ -1,497 +0,0 @@
-<!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: #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},
-                    api.value0: ${api.value(0)}
-                    api.value1: ${api.value(1)}
-                    api.value2: ${api.value(2)}
-                    params.coordSys: ${JSON.stringify(params.coordSys)}
-                    api.size: ${api.size([0, 1])}
-                    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(),
-				}
-			);
-		}
-
-		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' },
-		];
-
-		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,
-				},
-				// {
-				// 	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(':');
-						},
-					},
-					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,
-					},
-					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轴
-				{
-					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 },
-				},
-				// 辅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,
-					},
-					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: [
-				{
-					// 沉默的背景
-					xAxisIndex: 0,
-					yAxisIndex: 0,
-					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: '设备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);
-
-		console.log('mychart', myChart);
-		myChart.setOption(option);
-	</script>
-</body>
-
-</html>