src/views/monitoring/equipmentProcessAmount/index.vue

@@ -10,16 +10,24 @@
 		<div
 			class="app-container"
 			style="margin-right: 12px; border-radius: 8px; background: #fff">
-			<div class="factory-list__selector" style="" title="点击切换工厂">
+			<div
+				class="factory-list__selector"
+				style=""
+				title="点击切换工厂"
+				@mouseenter="factoryListOpen = true"
+				@mouseleave="factoryListOpen = false">
 				{{ currentFactory || '工厂名称' }}
-				<div class="factory-list__wrapper">
+				<div class="factory-list__wrapper" :class="{ open: factoryListOpen }">
-					<ul class="factory-list">
+					<ul class="factory-list" v-if="factoryList.length" @click.prevent="factoryChangeHandler">
 						<li
 							v-for="fc in factoryList"
 							:key="fc.id"
-							@click="factoryChangeHandler"
+							:value="fc.value"
-							class="factory-list__item"></li>
+							class="factory-list__item">
+							{{ fc.name }}
+						</li>
 					</ul>
+					<div v-else style="color: #0008; width: 128px; text-align: center;">- 无 -</div>
 				</div>
 			</div>
 			<!-- side bar  -->
@@ -95,6 +103,16 @@ export default {
 	props: {},
 	data() {
 		return {
+			factoryListOpen: false,
+			currentFactory: null,
+			factoryList: [
+				{ name: '1', value: 1 },
+				{ name: '2', value: 2 },
+				{ name: '3', value: 3 },
+				{ name: '4', value: 4 },
+				{ name: '5', value: 5 },
+				{ name: '6', value: 6 },
+			],
 			sidebarContent: [
 				// {
 				// 	id: 'fc1',
@@ -295,6 +313,11 @@ export default {
 			console.log('handle tab click: ', tab, event);
 		},
 
+		factoryChangeHandler(event) {
+			console.log('clicked factory change.......');
+			this.factoryListOpen = false;
+		},
+
 		handleSidebarItemClick({ label, id, type }) {
 			console.log('lable clicked!', label, id, type);
 			switch (type) {
@@ -420,4 +443,51 @@ export default {
 	/* cursor: pointer; */
 	border-left-color: #0008;
 }
+
+.factory-list__wrapper {
+	visibility: hidden;
+	position: absolute;
+	background: #fff;
+	box-shadow: 0 0 32px 10px #0002;
+	border-radius: 8px;
+	top: 36px;
+	left: 90px;
+	/* max-width: 128px; */
+	height: auto;
+	padding: 8px;
+	overflow: hidden;
+	/* transition: all 0.3s ease-out; */
+	z-index: 1000;
+}
+
+.factory-list__wrapper.open {
+	visibility: visible;
+}
+
+ul,
+li {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+.factory-list {
+	padding: 1px;
+	color: #0008;
+	max-height: 240px;
+	overflow-y: auto;
+}
+
+.factory-list__item {
+	border-radius: 4px;
+	font-size: 16px;
+	line-height: 1;
+	padding: 8px 4px;
+	min-width: 64px;
+}
+
+.factory-list__item:hover {
+	background: #ccc6;
+	color: #000e;
+}
 </style>