因設計要求這種樣式，最後一層橫著顯示，著實把我難到了。本來想從網上找現成的外掛，可是都沒有這種樣式的。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>