src/views/monitoring/equipmentProcessAmount/index.vue

@@ -16,18 +16,23 @@
 				title="点击切换工厂"
 				@mouseenter="factoryListOpen = true"
 				@mouseleave="factoryListOpen = false">
-				{{ currentFactory || '工厂名称' }}
+				{{ currentFactory?.label || '工厂名称' }}
 				<div class="factory-list__wrapper" :class="{ open: factoryListOpen }">
-					<ul class="factory-list" v-if="factoryList.length" @click.prevent="factoryChangeHandler">
+					<ul
+						class="factory-list"
+						v-if="sidebarContent.length"
+						@click.prevent="factoryChangeHandler">
 						<li
-							v-for="fc in factoryList"
+							v-for="fc in sidebarContent"
 							:key="fc.id"
-							:value="fc.value"
+							:data-value="fc.id"
 							class="factory-list__item">
-							{{ fc.name }}
+							{{ fc.label }}
 						</li>
 					</ul>
-					<div v-else style="color: #0008; width: 128px; text-align: center;">- 无 -</div>
+					<div v-else style="color: #0008; width: 128px; text-align: center">
+						- 无 -
+					</div>
 				</div>
 			</div>
 			<!-- side bar  -->
@@ -35,7 +40,8 @@
 				class="side-bar__left"
 				style="width: 240px; padding: 12px; height: 100%">
 				<el-tree
-					:data="sidebarContent"
+					v-if="currentFactory"
+					:data="currentFactory?.children"
 					:props="treeProps"
 					@node-click="handleSidebarItemClick" />
 			</div>
@@ -314,12 +320,15 @@ export default {
 		},
 
 		factoryChangeHandler(event) {
-			console.log('clicked factory change.......');
 			this.factoryListOpen = false;
+			const fcId = event.target.dataset.value;
+			console.log('fc id', fcId);
+			this.handleSidebarItemClick({ id: fcId, type: '工厂' });
+			this.currentFactory = this.sidebarContent.find((item) => item.id == fcId);
 		},
 
 		handleSidebarItemClick({ label, id, type }) {
-			console.log('lable clicked!', label, id, type);
+			console.log('label clicked!', label, id, type);
 			switch (type) {
 				case '设备':
 					this.queryParams.equipmentId = id;
@@ -424,10 +433,10 @@ export default {
 }
 
 .factory-list__selector::after {
-	content: '';
+	/* content: ''; */
 	position: absolute;
 	top: 16px;
-	left: 100px;
+	right: 12px;
 	display: inline-block;
 	width: 8px;
 	height: 8px;
@@ -482,7 +491,7 @@ li {
 	border-radius: 4px;
 	font-size: 16px;
 	line-height: 1;
-	padding: 8px 4px;
+	padding: 8px 32px 8px 8px;
 	min-width: 64px;
 }