From e16b6f8ec415cd1ed53b3ec5ab7d4719223d5223 Mon Sep 17 00:00:00 2001
From: lb <liubin_9396@163.com>
Date: Tue, 5 Sep 2023 16:07:50 +0800
Subject: [PATCH] =?UTF-8?q?update=20=E8=AE=BE=E5=A4=87=E7=8A=B6=E6=80=81?=
 =?UTF-8?q?=E6=97=B6=E5=BA=8F=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../equipment/timing-diagram/status/index.vue | 384 +++++++++++++++++-
 1 file changed, 372 insertions(+), 12 deletions(-)

diff --git a/src/views/equipment/timing-diagram/status/index.vue b/src/views/equipment/timing-diagram/status/index.vue
index a3fe9e47..9ab4bcfa 100644
--- a/src/views/equipment/timing-diagram/status/index.vue
+++ b/src/views/equipment/timing-diagram/status/index.vue
@@ -6,24 +6,384 @@
 -->
 
 <template>
-    <div class="app-container">
-        设备状态时序图
-    </div>
+	<div class="app-container">
+		<h1>设备状态时序图</h1>
+		<!-- 搜索工作栏 -->
+		<SearchBar
+			:formConfigs="searchBarFormConfig"
+			ref="search-bar"
+			@headBtnClick="handleSearchBarBtnClick" />
+
+		<div class="main-area">
+			<div class="legend-row">
+				<div class="legend">
+					<div class="icon running"></div>
+					<div>运行中</div>
+				</div>
+				<div class="legend">
+					<div class="icon waiting"></div>
+					<div>待机</div>
+				</div>
+				<div class="legend">
+					<div class="icon fault"></div>
+					<div>故障</div>
+				</div>
+				<div class="legend">
+					<div class="icon lack"></div>
+					<div>缺料</div>
+				</div>
+				<div class="legend">
+					<div class="icon full"></div>
+					<div>满料</div>
+				</div>
+				<div class="legend">
+					<div class="icon stop"></div>
+					<div>停止运行</div>
+				</div>
+			</div>
+			<div class="graphs" v-if="graphList.length">
+				<!-- <div class="graph">
+					<h2 class="graph-title">设备1</h2>
+					<div class="graph-item running tick" data-time="00:00"></div>
+					<div class="graph-item running"></div>
+					<div class="graph-item running"></div>
+					<div class="graph-item lack tick" data-time="03:00"></div>
+					<div class="graph-item full tick" data-time="04:00"></div>
+					<div class="graph-item waiting tick" data-time="05:00"></div>
+					<div class="graph-item running tick" data-time="06:00"></div>
+					<div class="graph-item running"></div>
+					<div class="graph-item fault tick" data-time="08:00"></div>
+					<div class="graph-item waiting tick" data-time="09:00"></div>
+					<div class="graph-item running tick" data-time="10:00"></div>
+					<div class="graph-item running"></div>
+					<div class="graph-item running"></div>
+					<div class="graph-item lack tick" data-time="13:00"></div>
+					<div class="graph-item full tick" data-time="14:00"></div>
+					<div class="graph-item running tick" data-time="15:00"></div>
+					<div class="graph-item running"></div>
+					<div class="graph-item running"></div>
+					<div class="graph-item fault tick" data-time="18:00"></div>
+					<div class="graph-item running tick" data-time="19:00"></div>
+					<div class="graph-item running"></div>
+					<div class="graph-item running"></div>
+					<div class="graph-item running"></div>
+					<div class="graph-item stop tick" data-time="23:00"></div>
+				</div> -->
+				<div class="graph" v-for="eq in graphList" :key="eq.key">
+					<h2 class="graph-title">{{ eq.key }}</h2>
+					<div
+						v-for="blc in eq"
+						:key="blc.startTime"
+						class="graph-item-fixed tick"
+						:class="{
+							running: blc.status == 0,
+							fault: blc.status == 2,
+							stop: blc.status == 1,
+						}"
+						:style="{ width: blc.duration * 2 + 'px' }"
+						:data-time="new Date(blc.startTime).toLocaleTimeString()"></div>
+				</div>
+				<!-- <div class="graph">
+					<h2 class="graph-title">设备3</h2>
+					<div class="graph-item"></div>
+					<div class="graph-item"></div>
+					<div class="graph-item"></div>
+					<div class="graph-item"></div>
+					<div class="graph-item"></div>
+					<div class="graph-item"></div>
+					<div class="graph-item"></div>
+					<div class="graph-item"></div>
+					<div class="graph-item"></div>
+					<div class="graph-item"></div>
+					<div class="graph-item"></div>
+					<div class="graph-item"></div>
+					<div class="graph-item"></div>
+					<div class="graph-item"></div>
+					<div class="graph-item"></div>
+					<div class="graph-item"></div>
+					<div class="graph-item"></div>
+					<div class="graph-item"></div>
+					<div class="graph-item"></div>
+					<div class="graph-item"></div>
+					<div class="graph-item"></div>
+					<div class="graph-item"></div>
+					<div class="graph-item"></div>
+					<div class="graph-item"></div>
+				</div> -->
+			</div>
+			<h2 v-else>请添加设备</h2>
+		</div>
+	</div>
 </template>
 
 <script>
 export default {
-name: "SGStatus",
-components: {},
-props: {},
-data() {
-    return {}
-},
-computed: {},
-methods: {},
-}
+	name: 'SGStatus',
+	components: {},
+	props: {},
+	data() {
+		return {
+			searchBarFormConfig: [
+				{
+					type: 'select',
+					label: '产线',
+					placeholder: '请选择产线',
+					selectOptions: [],
+					param: 'lineId',
+				},
+				{
+					type: 'select',
+					label: '工段',
+					placeholder: '请选择工段',
+					selectOptions: [],
+					param: 'sectionId',
+				},
+				// 时间段
+				{
+					type: 'datePicker',
+					label: '时间段',
+					dateType: 'daterange', // datetimerange
+					// format: 'yyyy-MM-dd HH:mm:ss',
+					format: 'yyyy-MM-dd',
+					valueFormat: 'yyyy-MM-dd HH:mm:ss',
+					// valueFormat: 'timestamp',
+					rangeSeparator: '-',
+					startPlaceholder: '开始日期',
+					endPlaceholder: '结束日期',
+					defaultTime: ['00:00:00', '23:59:59'],
+					param: 'recordTime',
+				},
+				{
+					type: 'button',
+					btnName: '查询',
+					name: 'search',
+					color: 'primary',
+				},
+				{
+					type: 'separate',
+				},
+				{
+					type: 'button',
+					btnName: '设备对比',
+					name: 'compare',
+					color: 'warning',
+					plain: true,
+				},
+			],
+			queryParams: {
+				lineId: null,
+				sectionId: null,
+				recordTime: [],
+			},
+			graphList: [],
+			// demo: [
+			// 	[
+			// 		{
+			// 			equipmentName: '下片机',
+			// 			duration: 30,
+			// 			relativeDuration: 0.6,
+			// 			status: 0,
+			// 			startPos: 0,
+			//             startTime: 1691568181000,
+			// 		},
+			// 		{
+			// 			equipmentName: '下片机',
+			// 			duration: 20,
+			// 			relativeDuration: 0.4,
+			// 			status: 2,
+			// 			startPos: 30,
+			//             startTime: 1691569981000
+			// 		},
+			// 	],
+			// ],
+		};
+	},
+	computed: {},
+	created() {
+		this.initProductline();
+		this.initWorksection();
+		this.getList();
+	},
+	methods: {
+		/** 重置查询条件 */
+		initQuery() {
+			this.queryParams.lineId = null;
+			this.queryParams.sectionId = null;
+			this.queryParams.recordTime = [];
+		},
+
+		/** 对象到数组的转换 */
+		objectToArray(obj) {
+			return Object.keys(obj).map((key) => {
+				obj[key].sort((a, b) => a.startTime - b.startTime);
+				obj[key].key = key;
+				return obj[key];
+			});
+		},
+
+		async getList() {
+			const { code, data } = await this.$axios({
+				url: '/analysis/equipment-analysis/status',
+				method: 'get',
+				params: this.queryParams,
+			});
+			if (code == 0) {
+				this.graphList = this.objectToArray(data);
+				console.log('graph list', this.graphList);
+			}
+		},
+
+		/** 准备产线数据 */
+		async initProductline() {
+			const { code, data } = await this.$axios({
+				url: '/base/production-line/listAll',
+				method: 'get',
+			});
+			if (code == 0) {
+				this.searchBarFormConfig[0].selectOptions = data.map((item) => {
+					return {
+						name: item.name,
+						id: item.id,
+					};
+				});
+			}
+		},
+
+		/** 准备工段数据 */
+		async initWorksection() {
+			const { code, data } = await this.$axios({
+				url: '/base/workshop-section/listAll',
+				method: 'get',
+			});
+			if (code == 0) {
+				this.searchBarFormConfig[1].selectOptions = data.map((item) => {
+					return {
+						name: item.name,
+						id: item.id,
+					};
+				});
+			}
+		},
+
+		handleSearchBarBtnClick({ btnName, ...payload }) {
+			switch (btnName) {
+				case 'search':
+					this.queryParams.lineId = payload.lineId || null;
+					this.queryParams.sectionId = payload.sectionId || null;
+					this.queryParams.recordTime = payload.recordTime || null;
+					this.getList();
+					break;
+                case 'compare':
+                    this.$message.info('暂未实现该接口')
+                    break;
+			}
+		},
+	},
+};
 </script>
 
 <style scoped lang="scss">
+.graph {
+	border: 1px solid #ccc;
+	padding: 12px 12px 28px 12px;
+	margin: 64px 0;
+	position: relative;
+	display: flex;
+}
 
+.graph-title {
+	position: absolute;
+	top: -64px;
+	left: -1px;
+	padding: 8px 18px;
+	background: #ccc;
+	font-size: 18px;
+	line-height: 1;
+}
+
+.graph-item,
+.graph-item-fixed {
+	height: 88px;
+	// width: 24px;
+	flex: 1;
+	// border: 1px solid #ccc;
+	position: relative;
+}
+
+.graph-item-fixed {
+	flex: unset;
+}
+
+.graph-item::before,
+.graph-item-fixed::before {
+	position: absolute;
+	bottom: -16px;
+	left: 0;
+	content: attr(data-time);
+	// font-size - js
+	// rotate - js
+	// color - js, default:
+	color: #777;
+	transform-origin: left top;
+	transform: rotate(12deg);
+}
+
+.graph-item-fixed::after,
+.graph-item::after {
+	content: '';
+	position: absolute;
+	left: 0;
+	bottom: -3px;
+	display: inline-block;
+}
+
+.graph-item.tick::after,
+.graph-item-fixed.tick::after {
+	width: 1px;
+	height: 6px;
+	border-left: 1px solid #777;
+}
+
+.running {
+	background-color: #84f04e;
+}
+
+.waiting {
+	background-color: #409eff;
+}
+
+.fault {
+	background-color: #ea5b5b;
+}
+
+.full {
+	background-color: #e6a23c;
+}
+
+.lack {
+	background-color: #a69c8d;
+}
+
+.stop {
+	background-color: #000c;
+}
+
+.legend-row {
+	margin: 12px 0;
+	display: flex;
+	> .legend:not(:last-child) {
+		margin-right: 12px;
+	}
+
+	.legend {
+		display: flex;
+		align-items: center;
+	}
+
+	.icon {
+		width: 16px;
+		height: 16px;
+		margin-right: 8px;
+	}
+}
 </style>