UP

src/views/template/svgmap/index.vue

@@ -15,13 +15,37 @@
 					<el-input placeholder="输入关键字进行过滤" v-model="filterText" clearable></el-input>
 				</el-header>
 				<el-main class="nopadding">
-					tree
+					<el-tree ref="tree" class="menu" node-key="id" :data="treeList" :highlight-current="true" :expand-on-click-node="false" :filter-node-method="treeFilterNode">
+					</el-tree>
 				</el-main>
 			</el-container>
 		</el-aside>
 		<el-main class="nopadding" style="background: #f6f8f9;" v-loading="svgLoading">
 			<scEcharts ref="map" :option="option"></scEcharts>
 		</el-main>
+		<el-aside width="340px" style="border-left: 1px solid #e6e6e6;border-right: 0;padding:15px;">
+			<el-descriptions title="computer-c1" :column="1" border>
+				<el-descriptions-item label="name">c1</el-descriptions-item>
+				<el-descriptions-item label="category">computer</el-descriptions-item>
+				<el-descriptions-item label="state"><em class="state state-1 status-processing"></em></el-descriptions-item>
+			</el-descriptions>
+			<el-collapse style="margin-top: 15px;">
+				<el-collapse-item title="screen" name="1">
+					<div class="screen" style="background: #000;height:180px;color: #999;text-align: center;">
+						<i class="el-icon-menu" style="font-size: 40px;margin-top: 50px;"></i>
+						<p>windows 10</p>
+					</div>
+				</el-collapse-item>
+				<el-collapse-item title="user" name="2">
+					<div>
+						<el-avatar> S </el-avatar>
+					</div>
+				</el-collapse-item>
+				<el-collapse-item title="network log" name="3">
+					<el-empty description="NO DATA" :image-size="60"></el-empty>
+				</el-collapse-item>
+			</el-collapse>
+		</el-aside>
 	</el-container>
 </template>
 
@@ -37,9 +61,35 @@
 			return {
 				svgLoading: false,
 				filterText: "",
+				treeList: [
+					{
+						label: 'computer',
+						children: [
+							{label: 'c1'},
+							{label: 'c2'},
+							{label: 'c3'},
+							{label: 'c4'},
+							{label: 'c5'},
+							{label: '...'}
+						]
+					},
+					{
+						label: 'network',
+						children: [
+							{label: 'W1'},
+							{label: 'W2'}
+						]
+					}
+				],
+				info: {},
 				option: {}
 			}
 		},
+		watch: {
+			filterText(val) {
+				this.$refs.tree.filter(val);
+			}
+		},
 		mounted() {
 			this.getSvg()
 		},
@@ -90,8 +140,8 @@
 							tooltip: 2
 						},
 						data: [
-							[329.0704991641723, 202.9464925472316, 100],
+							[137.01938166540623, 51.93905433869099],
-							[254.6904486027168, 623.9059276397206, 50]
+							[192.73843670517726, 52.00025351818228]
 						]
 					}
 				}
@@ -109,10 +159,35 @@
 					    console.log(dataPoint);
 
 				});
-			}
+			},
+			//树过滤
+			treeFilterNode(value, data){
+				if (!value) return true;
+				var targetText = data.label;
+				return targetText.indexOf(value) !== -1;
+			},
 		}
 	}
 </script>
 
-<style>
+<style scoped>
+	.state {width:8px;height:8px;background: #ddd;display: inline-block;border-radius: 50%;vertical-align: middle;}
+	.state-1 {background: #409EFF;}
+	.state-2 {background: #F56C6C;}
+	.status-processing {position: relative;}
+	.status-processing:after {position: absolute;top:0px;left:0px;width: 100%;height: 100%;border-radius: 50%;background: inherit;content: '';animation: warn 1.2s ease-in-out infinite;}
+
+	@keyframes warn {
+		0% {
+			transform: scale(0.5);
+			opacity: 1;
+		}
+		30% {
+			opacity: 1;
+		}
+		100% {
+			transform: scale(2);
+			opacity: 0;
+		}
+	}
 </style>