From 928258e509ad6ea39750683a030380b3a65490c5 Mon Sep 17 00:00:00 2001
From: lb <liubin_9396@163.com>
Date: Wed, 20 Sep 2023 11:28:41 +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

---
 src/views/base/equipmentBindGroup/index.vue   |   2 +-
 src/views/base/equipmentGroup/index.vue       |   2 +-
 .../equipment/timing-diagram/status/index.vue | 277 ++++++++++--------
 .../equipmentStatusAndParams/index.vue        |   2 +-
 4 files changed, 165 insertions(+), 118 deletions(-)

diff --git a/src/views/base/equipmentBindGroup/index.vue b/src/views/base/equipmentBindGroup/index.vue
index f830291f..33477279 100644
--- a/src/views/base/equipmentBindGroup/index.vue
+++ b/src/views/base/equipmentBindGroup/index.vue
@@ -98,7 +98,7 @@ export default {
 							return h(
 								'el-button',
 								{
-									props: { type: 'text', size: 'mini' },
+									props: { type: 'text' },
 									on: {
 										click: function () {
 											console.log('inejctdata', _this.injectData);
diff --git a/src/views/base/equipmentGroup/index.vue b/src/views/base/equipmentGroup/index.vue
index 42afbd26..24d248fe 100644
--- a/src/views/base/equipmentGroup/index.vue
+++ b/src/views/base/equipmentGroup/index.vue
@@ -98,7 +98,7 @@ export default {
 							return h(
 								'el-button',
 								{
-									props: { type: 'text', size: 'mini' },
+									props: { type: 'text' },
 									on: {
 										click: function () {
 											console.log('inejctdata', _this.injectData);
diff --git a/src/views/equipment/timing-diagram/status/index.vue b/src/views/equipment/timing-diagram/status/index.vue
index 2aafc1c6..ac4769a9 100644
--- a/src/views/equipment/timing-diagram/status/index.vue
+++ b/src/views/equipment/timing-diagram/status/index.vue
@@ -6,29 +6,51 @@
 -->
 
 <template>
-	<div class="app-container">
-		<h1>设备状态时序图</h1>
-		<!-- 搜索工作栏 -->
-		<SearchBar
-			:formConfigs="searchBarFormConfig"
-			ref="search-bar"
-			@headBtnClick="handleSearchBarBtnClick" />
+	<div class="status-timegraph-container" style="background: #f2f4f9; flex: 1">
+		<el-row
+			class=""
+			style="
+				margin-bottom: 12px;
+				background: #fff;
+				padding: 16px 16px 0;
+				border-radius: 8px;
+			">
+			<div class="blue-title">生产节拍时序图</div>
+			<!-- <h1>设备状态时序图</h1> -->
+			<!-- 搜索工作栏 -->
+			<SearchBar
+				:formConfigs="searchBarFormConfig"
+				ref="search-bar"
+				:remove-blue="true"
+				@headBtnClick="handleSearchBarBtnClick" />
+		</el-row>
 
-		<div class="main-area">
-			<div class="legend-row">
-				<div class="legend">
-					<div class="icon running"></div>
-					<div>运行中</div>
-				</div>
-				<!-- <div class="legend">
+		<el-row
+			class=""
+			style="
+				margin-bottom: 12px;
+				background: #fff;
+				padding: 16px 16px 32px;
+				border-radius: 8px;
+			">
+			<el-row :gutter="20">
+				<el-col :span="6">
+					<div class="blue-title">设备状态时序图</div>
+				</el-col>
+				<el-col :span="18" 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="legend">
+						<div class="icon fault"></div>
+						<div>故障</div>
+					</div>
+					<!-- <div class="legend">
 					<div class="icon lack"></div>
 					<div>缺料</div>
 				</div>
@@ -36,83 +58,51 @@
 					<div class="icon full"></div>
 					<div>满料</div>
 				</div> -->
-				<div class="legend">
-					<div class="icon stop"></div>
-					<div>计划停机</div>
+					<div class="legend">
+						<div class="icon stop"></div>
+						<div>计划停机</div>
+					</div>
+				</el-col>
+			</el-row>
+			<div class="main-area">
+				<div class="graphs" v-if="graphList.length">
+					<div class="graph" v-for="eq in graphList" :key="eq.key">
+						<h2 class="graph-title">{{ eq.key }}</h2>
+
+						<div class="graph-content">
+							<el-popover
+								trigger="hover"
+								v-for="blc in eq"
+								:key="blc.startTime"
+								:title="
+									blc.status == 0
+										? '运行'
+										: blc.status == 2
+										? '故障'
+										: '计划停机'
+								"
+								placement="top"
+								:content="new Date(blc.startTime).toLocaleTimeString()">
+								<div
+									slot="reference"
+									:key="blc.startTime + '__div'"
+									class="graph-item-fixed tick"
+									:class="{
+										running: blc.status == 0,
+										fault: blc.status == 2,
+										stop: blc.status == 1,
+									}"
+									:style="{ height: '32px', width: blc.duration * 2 + 'px' }"
+									:data-time="
+										new Date(blc.startTime).toLocaleTimeString()
+									"></div>
+							</el-popover>
+						</div>
+					</div>
 				</div>
+				<h2 v-else>请添加设备</h2>
 			</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>
+		</el-row>
 
 		<!-- 对话框(添加 / 修改) -->
 		<base-dialog
@@ -185,9 +175,9 @@ export default {
 				},
 				{
 					type: 'button',
-					btnName: '设备对比',
+					btnName: '添加对比',
 					name: 'compare',
-					color: 'warning',
+					color: 'primary',
 					plain: true,
 				},
 			],
@@ -344,26 +334,52 @@ export default {
 
 <style scoped lang="scss">
 .graph {
-	border: 1px solid #ccc;
-	padding: 12px 12px 28px 12px;
-	margin: 64px 0;
+	// 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;
+	// position: absolute;
+	// top: -64px;
+	// left: -1px;
+	// padding: 8px 18px;
+	padding: 0 12px;
+	font-size: 14px;
 	line-height: 1;
 }
 
+.graph-content {
+	display: flex;
+	flex: 1;
+	padding: 22px 12px;
+	border: 1px solid #ccc;
+	border-bottom-width: 2px;
+	border-top: none;
+	position: relative;
+}
+
+.graph-content::after,
+.graph-content::before {
+	content: '';
+	position: absolute;
+	width: 3px;
+	height: 80%;
+	background: #fff;
+	right: -1px;
+	top: 0;
+}
+
+.graph-content::before {
+	right: unset;
+	left: -1px;
+}
+
 .graph-item,
 .graph-item-fixed {
-	height: 88px;
+	// height: 88px;
 	// width: 24px;
 	flex: 1;
 	// border: 1px solid #ccc;
@@ -405,32 +421,40 @@ export default {
 }
 
 .running {
-	background-color: #84f04e;
+	background-color: #5ad8a6;
+	// background-color: #84f04e;
 }
 
 .waiting {
-	background-color: #409eff;
+	background-color: #5ad8a6;
+	// background-color: #409eff;
 }
 
 .fault {
-	background-color: #ea5b5b;
+	// background-color: #ea5b5b;
+	background-color: #fc9c91;
 }
 
 .full {
-	background-color: #e6a23c;
+	// background-color: #e6a23c;
+	background-color: #598fff;
 }
 
 .lack {
-	background-color: #a69c8d;
+	// background-color: #a69c8d;
+	background-color: #7585a2;
 }
 
 .stop {
-	background-color: #000c;
+	background-color: #000;
 }
 
 .legend-row {
-	margin: 12px 0;
+	margin: 6px 0;
+	padding-right: 12px;
 	display: flex;
+	justify-content: flex-end;
+
 	> .legend:not(:last-child) {
 		margin-right: 12px;
 	}
@@ -441,9 +465,32 @@ export default {
 	}
 
 	.icon {
-		width: 16px;
+		width: 8px;
+		height: 8px;
+		border-radius: 2px;
+		margin-right: 4px;
+		margin-top: 1px;
+	}
+}
+
+.blue-title {
+	position: relative;
+	padding: 4px 0;
+	padding-left: 12px;
+	font-size: 14px;
+	color: #606266;
+	font-weight: 700;
+	margin-bottom: 12px;
+
+	&::before {
+		content: '';
+		position: absolute;
+		left: 0;
+		top: 6px;
 		height: 16px;
-		margin-right: 8px;
+		width: 4px;
+		border-radius: 1px;
+		background: #0b58ff;
 	}
 }
 </style>
diff --git a/src/views/monitoring/equipmentStatusAndParams/index.vue b/src/views/monitoring/equipmentStatusAndParams/index.vue
index 0e4e1dc3..63e7e6eb 100644
--- a/src/views/monitoring/equipmentStatusAndParams/index.vue
+++ b/src/views/monitoring/equipmentStatusAndParams/index.vue
@@ -124,7 +124,7 @@ export default {
 							return h(
 								'el-button',
 								{
-									props: { type: 'text', size: 'mini' },
+									props: { type: 'text' },
 									on: {
 										click: function () {
 											console.log('inejctdata', _this.injectData);