因设计要求这种样式,最后一层横着显示,着实把我难到了。本来想从网上找现成的插件,可是都没有这种样式的。Canvas要计算,我这种懒人想出以下这种方式,但是只做出了3层。如有大神能不吝赐教,我感激不尽。
效果:
代码:时间紧张,代码写的比较粗糙。
<template>
<div style="position:relative;width:100%;height:150px;overflow:auto;margin-bottom:20px;">
<div ref="firstDiv" class="first-Div">
<div class="head-div">
{{deviceData.devName}}
</div>
<img src="../../../../static/img/devicetree/first-line.png" v-if="deviceData.children.length>0" style="margin-left:40px;"/>
</div>
<div class="second-Div">
<div v-for="(second,index) in deviceData.children" style="height:50px;display:-webkit-box;">
<div style="float:left;height:100%;position:relative;" v-if="deviceData.children.length==1">
<img src="../../../../static/img/devicetree/one-line.png" style="margin-top:15px;position:absolute;"/>
</div>
<div v-else style="float:left;height:100%;position:relative;">
<img src="../../../../static/img/devicetree/road-first.png" style="margin-top:13px;position:absolute;bottom:0;" v-if="index==0"/>
<img src="../../../../static/img/devicetree/road-third.png" style="position:absolute;bottom:0;top:0;" v-else-if="index==deviceData.children.length-1"/>
<img src="../../../../static/img/devicetree/road-second.png" style="position:absolute;top:0;" v-else/>
</div>
<div class="road-div-text">
{{second.devName}}
</div>
<div class="road-line-after">
</div>
<div v-for="(third,index) in second.children" style="position:relative;left:40px;">
<div v-if="index!=0" class="device-point3">...</div>
<el-tooltip placement="right" :disabled="third.errors.length==0">
<div slot="content">
<div v-for="err in third.errors">{{err.errorInfo}} {{err.errorTime}}</div>
</div>
<div class="device-div">
<img src="../../../../static/img/DQHZ/warn.gif" v-if="third.IsError==1"/>
<img src="../../../../static/img/DQHZ/fault.gif" v-if="third.IsError==2"/>
<img src="../../../../static/img/DQHZ/fAndw.gif" v-if="third.IsError==3"/>
<img src="../../../../static/img/DQHZ/normal.gif" v-if="third.IsError==0"/>
{{third.devTy}}
</div>
</el-tooltip>
</div>
</div>
</div>
</div>
</template>
<script>
export default{
props:["devId"],
data(){
return{
deviceData:{
devName:"主机",
devTy:"JB",
children:[
{devName:"回路1",devTy:"",
children:[
{devName:"设备1",devTy:"JB001",
children:[],IsError:0,
errors:[],
},
{devName:"设备2",devTy:"JB002",children:[],IsError:2,errors:[
{errorInfo:'提示信息1',errorTime:'2018-09-03 09:10:10'},
{errorInfo:'提示信息2',errorTime:'2018-09-03 10:10:10'}
]},
{devName:"设备3",devTy:"JB003",children:[],IsError:1,
errors:[
{errorInfo:'提示信息1',errorTime:'2018-09-03 09:10:10'},
{errorInfo:'提示信息2',errorTime:'2018-09-03 10:10:10'}
]},
]},
{devName:"回路2",devTy:"",
children:[
{devName:"设备1",devTy:"JB004",
children:[],IsError:0,
errors:[],
},
{devName:"设备2",devTy:"JB005",children:[],IsError:2,errors:[
{errorInfo:'提示信息1',errorTime:'2018-09-03 09:10:10'},
{errorInfo:'提示信息2',errorTime:'2018-09-03 10:10:10'}
]},
{devName:"设备3",devTy:"JB006",children:[],IsError:1,
errors:[
{errorInfo:'提示信息1',errorTime:'2018-09-03 09:10:10'},
{errorInfo:'提示信息2',errorTime:'2018-09-03 10:10:10'}
]},
]}
]
}
}
},
mounted() {
//this.getDeviceData();
},
methods:{
//从接口获取数据
getDeviceData(){
var _this=this;
_this.common.doAction(_this.common.DQHZtree,{"devId":_this.devId},function(result){
_this.deviceData=result.row;
},1);
}
},
}
</script>
<style scoped>
div{color:#fff;}
.first-Div{width:80px;overflow:hidden;float:left;position:absolute;left:5px;top:5px;}
.head-div{background-color:#7dcef2;width:80px;height:30px;line-height:30px;border-radius:6px;}
.first-line{width:2px;height:40px;}
.firstline-x{background-color:#7dcef2;width:40px;height:2px;float:right;margin-top:40px;}
.firstline-y{border-right:2px solid #7dcef2;width:2px;float:right;}
.second-Div{margin-top:46px;position:absolute;left:80px;top:5px;}
.road-div-text{background-color:#abd797;
width:110px;height:30px;line-height:30px;
border-radius: 6px;float:left;
position: relative;left:40px;}
.road-line-before{width:40px;height:2px;background-color:#7dcef2;float:left;}
.road-line-after{background-color:#abd797;width:40px;height:2px;float:left;margin-top:15px;position:relative;left:40px;}
.device-point3{float:left;height:30px;line-height:26px;padding:0 6px;color:#000;}
.device-div{float:left;padding:0 4px;cursor: pointer;
background:#fff;border-radius:6px;border:1px solid green;
height:30px;line-height:30px;min-width:40px;color:#000;
}
.device-div img{height:25px;vertical-align:middle;margin-top:-10%;}
</style>