equipment_manage.vue

<template>
	<div>
	  <!-- 外层内容 -->
	  <div class="leftBox">
		  <div class="titles">分析设备列表</div>
		  <div class="treeBox">
			  <el-tree
				:data="treeData"
				:props="defaultProps"
				accordion
				highlight-current
				:expand-on-click-node=false
				@node-click="handleNodeClick">
			  </el-tree>
		  </div>
	  </div>
	  <div class="rightBox">
	  </div>
	  <div style="clear: both;"></div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				treeData: [],
				 defaultProps: {
				  children: 'childs',
				  label: 'device_name'
				},
				dev_unid:sessionStorage.getItem('dev_unid')
			}
		},
		mounted(){
			console.log(this.setvisible)
		},
		methods:{
			getTree(){
				this.$api.resource.getDevsName({
					is_leaf: 0
				},this.dev_unid).then(res=>{
					this.treeData=res.list_data;
					this.treeData.forEach(item=>{
						this.getChild(item.device_id)
					})
				})
			},
			getChild(id){
				this.$api.resource.getDevsName({
					limit: 9999,
					offset: 0,
					parent_id: id,
				},this.dev_unid).then((res)=>{
					this.treeData.forEach(item=>{
						if(item.device_id==id){
							this.treeData.childs=res.list_data
						}
					})
				}).catch((error)=>{
					
				})
				
			},
			 handleNodeClick(data) {
				console.log(data);
			  },
		}
	}
</script>

<style scoped="scoped" lang="scss">
	.bofangIcon{
		cursor: pointer;
		color:#cccccc;
		font-size:16px;
		margin-left: 26px;
	}
	.moveIcon{
		cursor: pointer;
		color:#34b3a2;
		font-size:16px;
	}
	.delIcon{
		cursor: pointer;
		color:#f2365a;
		font-size:16px;
	}
	.leftBox{
		width: 233px;
		height: 630px;
		border:1px solid rgba(229,229,229,1);
		float: left;
	}
	.titles{
		height: 30px;
		line-height: 30px;
		padding-left: 13px;
		background: $title-backgroud;
		font-size: 14px;
		color: $title-color;
	}
	.treeBox{
		padding: 6px;
	}
	.rightBox{
		float: left;
		margin-left: 14px;
	}
	.imgBox{
		width: 587px;
		height: 330px;
		border:1px solid #444444;
		margin-bottom: 14px;
	}
</style>