From 06fa7d40b3af3989586497bf2a267b418b284380 Mon Sep 17 00:00:00 2001
From: lb <liubin_9396@163.com>
Date: Thu, 21 Sep 2023 17:03:07 +0800
Subject: [PATCH] =?UTF-8?q?update=20=E8=AE=BE=E5=A4=87=E5=8A=A0=E5=B7=A5?=
 =?UTF-8?q?=E6=95=B0=E9=87=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../equipmentProcessAmount/index.vue          | 64 ++++++++++++++++---
 1 file changed, 56 insertions(+), 8 deletions(-)

diff --git a/src/views/monitoring/equipmentProcessAmount/index.vue b/src/views/monitoring/equipmentProcessAmount/index.vue
index 8cef3c05..75f2c1b1 100644
--- a/src/views/monitoring/equipmentProcessAmount/index.vue
+++ b/src/views/monitoring/equipmentProcessAmount/index.vue
@@ -9,10 +9,15 @@
 	<div style="flex: 1; display: flex; background: #f2f4f9">
 		<div
 			class="app-container"
-			style="margin-right: 12px; border-radius: 8px; background: #fff">
+			style="
+				margin-right: 12px;
+				border-radius: 8px;
+				background: #fff;
+				padding: 0;
+			">
 			<div
 				class="factory-list__selector"
-				style=""
+				style="margin: 12px"
 				title="点击切换工厂"
 				@mouseenter="factoryListOpen = true"
 				@mouseleave="factoryListOpen = false">
@@ -37,14 +42,19 @@
 				</div>
 			</div>
 			<!-- side bar  -->
-			<div
-				class="side-bar__left"
-				style="width: 240px; padding: 12px; height: 100%">
+			<div class="side-bar__left" style="width: 240px; height: 100%">
 				<el-tree
-					v-if="currentFactory"
+					class="custom-tree-class"
 					:data="currentFactory?.children"
 					:props="treeProps"
-					@node-click="handleSidebarItemClick" />
+					:empty-text="' - 暂无数据 - '"
+					icon-class="custom-icon-class"
+					@node-click="handleSidebarItemClick">
+					<!-- <div class="custom-tree-node" slot-scope="{ node, data }">
+						<span class="icon"></span>
+						<span>{{ node.label }}</span>
+					</div> -->
+				</el-tree>
 			</div>
 		</div>
 		<div
@@ -385,6 +395,7 @@ export default {
 
 <style scoped>
 .side-bar__left >>> .is-current {
+	padding: 0;
 	color: #111;
 	background: #f2f4f7;
 }
@@ -464,6 +475,8 @@ export default {
 	left: 90px;
 	/* max-width: 128px; */
 	height: auto;
+	width: auto;
+	white-space: nowrap;
 	overflow: hidden;
 	/* transition: all 0.3s ease-out; */
 	z-index: 1000;
@@ -501,11 +514,46 @@ li {
 }
 
 .factory-list__item.is-current::after {
-	content: "√";
+	content: '√';
 	position: absolute;
 	top: 8px;
 	right: 16px;
 	font-weight: bold;
+}
 
+.custom-tree-class >>> .el-tree-node__content {
+	height: auto !important;
+	padding: 8px 12px !important;
+}
+
+.custom-tree-class >>> .el-tree-node__children .el-tree-node__content {
+	padding: 8px 18px !important;
+}
+
+.custom-tree-class >>> .el-tree-node__children .el-tree-node__children .el-tree-node__content {
+	padding: 8px 24px !important;
+}
+</style>
+
+<style>
+.custom-icon-class {
+	margin-right: 8px;
+	width: 20px;
+	height: 24px;
+	background: url('../../../assets/images/tree-icon-1.png') 100% / contain
+		no-repeat;
+}
+
+.custom-icon-class.el-tree-node__expand-icon.expanded {
+	transform: unset;
+}
+
+.el-tree-node__children .custom-icon-class {
+	background: url('../../../assets/images/tree-icon-2.png') 100% / contain
+		no-repeat;
+}
+
+.el-tree-node__children .el-tree-node__children .custom-icon-class {
+	background: unset;
 }
 </style>