动态树形步骤图trees

最新推荐文章于 2025-02-26 01:55:09 发布
转载 最新推荐文章于 2025-02-26 01:55:09 发布 · 108 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：https://juejin.im/post/5ccf9598e51d453a8f348bb9

该博客内容为转载，原文链接为https://juejin.im/post/5ccf9598e51d453a8f348bb9 ，但未明确具体关于动态树形步骤图trees的详细信息。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<template>
    <div>
        <div class="box clrfix">
            <!--开始-->
            <div class="start">
                <em></em>
                <p>{{sysTitle}}</p>
            </div>
            <!--已有模块-->
            <div class="model" v-for="(item,k) in obj" :key="k">
                <small title="点击查看" :class="item.isSuccess == 1?'success':item.isSuccess == 2?'active':item.isSuccess == 3?'error':''" @click="selectFun(item.jenkinsurl)"></small>
                <p>{{item.id}}</p>
                <div class="already" v-for="(list,index) in item.arr" :key="index">
                    <p>{{list.name}}</p>
                    <span title="点击查看" @click="selectFun(list.jenkinsurl)" :class="item.selected[index] == 1?'success':item.selected[index] == 2?'active':item.selected[index] == 3?'error':''"></span>
                </div>
                <!-- <div class="add-model" :class="{'new-add':!item.arr.length}">
                    <p>{{item.id+'-'+(item.arr.length+1)}}</p>
                    <span class="add" @click="addBox(k)"></span>
                </div> -->
            </div>
            <!--添加一列-->
            <!-- <div class="end">
                <em class="add" @click="addModel"></em>
            </div> -->
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            obj: [{
                id: '编译完成',
                isSuccess: -1,
				selected: [],
                arr: [],
                jobname:'',
                tag: '',
                jenkinsurl:''
			},
			// {
            //     id: 'ST-1',
            //     isSuccess: -1,
			// 	selected: [],
			// 	arr: []
			// },
			// {
            //     id: '完成',
            //     isSuccess: -1,
			// 	selected: [],
			// 	arr: []
			// }
        ],
        sysTitle: ''
        }
    },
    created() {
        this.init()
    },
    watch: {
        'dataList': function(newVal) {
            // console.log(newVal)
            this.init()
        }
    },
    methods: {
        init() {
            this.obj = [{id: '编译完成',isSuccess: '-1',selected: [],arr: [],jenkinsurl:''}]
            let num = this.dataList.jobname.indexOf('-')
            this.sysTitle = this.dataList.jobname.substr(0,this.dataList.jobname.indexOf('-',num+1))
            // console.log(this.dataList.status)
            this.obj[0].jobname = this.dataList.jobname
            this.obj[0].tag = this.dataList.tag
            this.obj[0].jenkinsurl = this.dataList.jenkinsurl
            if(this.dataList.status == 'PROCESSING') {
                this.obj[0].isSuccess = 2
                this.obj[0].id = '正在编译中'
                return
            }else if(this.dataList.status == 'ABORTED') {
                this.obj[0].isSuccess = 3
                this.obj[0].id = '编译已取消'
                return
            }else if(this.dataList.status == 'FAILURE') {
                this.obj[0].isSuccess = 3
                this.obj[0].id = '编译失败'
                return    
            }else if(this.dataList.status == 'SUCCESS' && this.dataList.target == '') {
                this.obj[0].isSuccess = 1
                this.obj[0].id = '编译成功'
                this.obj.push({id:'结束',isSuccess:'1',selected:[],arr:[]})//最后一步预先添加
                return    
            }else if(this.dataList.status == 'SUCCESS'){
                this.obj.push({id:'',isSuccess:'-1',selected:[],arr:[],jobname:this.dataList.jobname,jenkinsurl:''})//成功后添加下一步
                this.obj.push({id:'结束',isSuccess:'-1',selected:[],arr:[]})//最后一步预先添加
                this.obj[0].isSuccess = 1
                let targetList = this.dataList.target.split(',')//有多少目标环境
                if(targetList.length == 1) {
                    this.obj[1].id = targetList[0]
                }else {
                    this.obj[1].id = targetList[0]
                    targetList.map((n,i) => {//多个目标
                        if(i) {
                            this.obj[1].arr.push({name:n,jenkinsurl:false})
                        }
                    })
                    
                }
                targetList.map((m,j) => {//判断目标环境各个状态
                    if(this.dataList.deploy) {
                        let nowStatus = 2
                        let statusOne = 2
                        this.dataList.deploy.map((n,i) => {//成功的目标环境
                            if(m == n.target) {
                                if(j == 0) {//第一个目标环境完成
                                    if(n.status == 'ABORTED') {
                                        statusOne = 3
                                        this.obj[1].jenkinsurl = n.jenkinsurl
                                        // this.obj[1].isSuccess = 3
                                        return
                                    }else if(n.status == 'SUCCESS') {
                                        statusOne = 1
                                        this.obj[1].jenkinsurl = n.jenkinsurl
                                        // this.obj[1].isSuccess = 1
                                        return
                                    }else if(n.status == 'FAILURE') {
                                        statusOne = 3
                                        this.obj[1].jenkinsurl = n.jenkinsurl
                                        // this.obj[1].isSuccess = 3
                                        return
                                    }else {
                                        statusOne = -1
                                        // this.obj[1].isSuccess = -1
                                        return
                                    }
                                }else {
                                    if(n.status == 'ABORTED') {
                                        nowStatus = 3
                                        this.obj[1].arr[j-1].jenkinsurl = n.jenkinsurl
                                        return
                                        // this.obj[1].selected[j] = 3
                                    }else if(n.status == 'SUCCESS') {
                                        nowStatus = 1
                                        this.obj[1].arr[j-1].jenkinsurl = n.jenkinsurl
                                        return
                                        // this.obj[1].selected[j] = 1
                                    }else if(n.status == 'FAILURE') {
                                        nowStatus = 3
                                        this.obj[1].arr[j-1].jenkinsurl = n.jenkinsurl
                                        return
                                        // this.obj[1].selected[j] = 3
                                    }else {
                                        nowStatus = -1
                                        return
                                        // this.obj[1].selected[j] = -1
                                    }
                                }
                            }
                        })
                        if(j != 0) {
                            // console.log('哈哈哈',nowStatus,this.obj[1].selected)
                            this.obj[1].selected[j-1] = nowStatus
                        }else {
                            this.obj[1].isSuccess = statusOne
                        }
                        // console.log(this.obj[1].selected)
                    }else {//一个都没完成
                        this.obj[1].isSuccess = 2
                        targetList.map((n,i) => {
                            this.obj[1].selected[n] = 2
                        })
                    }
                })
                if(this.dataList.deploy) {
                    if(this.dataList.deploy.length == targetList.length) {//全部完成
                        this.obj[2].isSuccess = 1
                    }
                }
            }
        
        },
		//加一列
		addModel() {
			var l = this.obj.length
			if (l > 7) {
				alert('再加，自动换行会变形的！！！！！！！')
			} else {
				var nullModel = {
					id: l + 1,
					selected: -1,
					arr: []
				}
				this.obj.push(nullModel)
			}
		},
		//加一行
		// addBox(k) {
		// 	var num = this.obj[k].arr.length + 1;
		// 	this.obj[k].arr.push(num)
		// },
		//选中当前列中的数据
		selectFun(jenkinsurl) {
           if(jenkinsurl) {
               window.open(jenkinsurl)
           }
		}
    },
    props:['dataList']
}
</script>
<style scoped>
* {
    margin: 0;
    padding: 0;
    box-sizing: content-box;
}
:after, :before {
    box-sizing: content-box;
}
.clrfix {
    zoom: 1;
}

.clrfix:after {
    content: '';
    display: block;
    height: 0;
    clear: both;
}

.box {
    margin-left: 100px;
    margin-top: 60px;
    font-size: 14px;
}

.box .model {
    float: left;
    width: 144px;
    border-top: 2px solid #999;
    position: relative;
    z-index: 2;
}

.start {
    float: left;
    position: relative;
}

.start em {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #999;
    position: absolute;
    top: -7px;
    left: -8px;
}

.start p {
    position: absolute;
    left: -50px;
    top: -30px;
    white-space:nowrap;
}

.end {
    float: left;
    position: relative;
    width: 120px;
    border-top: 2px solid #ddd;
    z-index: 0;
}

.end em {
    position: absolute;
    top: -12px;
    right: 0;
}

.add {
    width: 20px;
    height: 20px;
    border: 2px solid #ddd;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
}

.add:after {
    content: '';
    position: absolute;
    width: 12px;
    height: 2px;
    background: #ddd;
    top: 50%;
    margin-top: -1px;
    left: 50%;
    margin-left: -6px;
}

.add:before {
    content: '';
    position: absolute;
    width: 2px;
    height: 12px;
    background: #ddd;
    top: 50%;
    margin-top: -6px;
    left: 50%;
    margin-left: -1px;
}

.model small {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid #999;
    right: -2px;
    background: #fff;
    border-radius: 50%;
    margin-top: -12px;
    cursor: pointer;
}

.model>p {
    position: absolute;
    width: 144px;
    text-align: center;
    left: 50%;
    margin-left: -12px;
    top: -38px;
}

.model .already:first-of-type {
    height: 50px;
    margin-top: 10px;
}

.already {
    width: 120px;
    position: relative;
    height: 72px;
    margin-top: -22px;
    border: 2px solid #999;
    left: 72px;
    border-top: 0;
    border-radius: 0 0 20px 20px;
}

.model .already:first-of-type:after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #999;
    border-color: transparent #999 transparent transparent;
    transform: rotate(-45deg);
    top: -12px;
    left: -24px;
}

.model .already:first-of-type:before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #999;
    border-color: transparent #999 transparent transparent;
    transform: rotate(-135deg);
    top: -12px;
    right: -24px;
}

.model .already:first-of-type p {
    padding-top: 12px;
}

.already p {
    text-align: center;
    padding-top: 42px
}

.already span {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid #999;
    bottom: -12px;
    left: 50%;
    margin-left: -12px;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
    z-index: 2;
}

.already span.active,
.model small.active {
    border-color: #ff9900;
}
.already span.success,
.model small.success {
    border-color: #19be6b;
}
.already span.error,
.model small.error {
    border-color: #ed4014;
}

.already span.active:before,
.model small.active:before {
    content: '';
    width: 14px;
    height: 14px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    background: #ff9900;
    transform: translate(-50%, -50%);
    animation: twinkling 1s infinite ease-in-out;
}
.already span.success:before,
.model small.success:before {
    content: '';
    width: 14px;
    height: 14px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    background: #19be6b;
    transform: translate(-50%, -50%);
    /* animation: twinkling 1s infinite ease-in-out; */
}
.already span.error:before,
.model small.error:before {
    content: '';
    width: 14px;
    height: 14px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    background: #ed4014;
    transform: translate(-50%, -50%);
    /* animation: twinkling 1s infinite ease-in-out; */
}
@keyframes twinkling {
    0%{
        opacity:0; 
    }
    50%{
        opacity:1; 
    }
    100%{
        opacity:0; 
    }
}

.add-model {
    width: 60px;
    height: 84px;
    position: relative;
    left: 72px;
    border: 2px solid #ddd;
    top: -14px;
    border-color: transparent transparent #ddd #ddd;
    border-radius: 0 0 0 20px;
}

.add-model span {
    position: absolute;
    bottom: -12px;
    right: -12px;
}

.add-model p {
    width: 120px;
    text-align: center;
    padding-top: 32px
}

.new-add.add-model {
    height: 68px;
    top: 10px;
}

.new-add.add-model:before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #ddd;
    border-color: transparent #ddd transparent transparent;
    transform: rotate(-45deg);
    top: -13px;
    left: -24px;
}

.new-add.add-model p {
    padding-top: 10px;
}
</style>

复制代码

转载于:https://juejin.im/post/5ccf9598e51d453a8f348bb9

决策树(Decision Trees) 原理与代码实例讲解
AI天才研究院
05-31 780
1.背景介绍 在机器学习领域中，决策树是一种非常直观且易于理解的模型。它通过构建一个树形结构来表示数据集中的关系和模式。决策树的强大之处在于其能够处理非数值型数据，并且能够以人类可读的形式输出结果。然而，随着数据集的复杂性增加，传统的决策树方法可能无法满足需求，这就催生了集成学习方法的出现，例如随机森林（Random Forest）和梯度提升机（Gra
Element UI Tree树形结构节点过长时-换行显示
weixin_57246351的博客
04-24 4649
换行显示 <template> <div> <div class="tree"> <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" :default-expand-all="true" ></el-tree> </div> </div> </template> <script
请用ionic3写一个树形步骤条（注：依靠ionic而并非纯css）。
王铁柱666的博客
12-21 236
在Ionic 3中创建一个树形步骤条（Tree Stepper）组件，需要借助Ionic的组件和指令，并结合Angular的数据绑定和结构指令来实现。现在你应该能在浏览器中看到一个简单的树形步骤条组件，可以通过“Previous”和“Next”按钮来导航步骤。注意，这个示例是一个基本版本，你可以根据需要扩展功能和样式。在父组件的TypeScript文件（例如。目录下创建一个新的组件，例如。在父组件的模块中（例如。
动态生成树形图目录
程序羊的博客
01-18 2822
我们平时看到的树形图都是固定的目录，而且大多数是利用JavaScript（简称JS）来实现的效果，了解JavaScript的人都不陌生，JavaScript是一种直译式脚本语言，是一种动态类型、基于原型的语言，内置支持类。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML网页上使用，用来给HTML网页增加动态功能。那么，当我们想自己增加多一个目录...
FLEX3 树形图结构
bark_ice的专栏
03-11 494
用FLEX3从数据库接受数据形成树形图步骤： 1.封装一个名为Node的as类，包括编号，名称，子节点和一个构造方法。 package common{     import mx.collections.ArrayCollection;         public class Node{                public var id:int;             
语言学句法分析树形图怎么画_哇,好大一棵树! 如何优雅地画句法树形图 丨语言学午餐...
weixin_39586526的博客
12-20 6641
原标题：哇,好大一棵树! 如何优雅地画句法树形图 丨语言学午餐相信很多语言学、非语言学学生，在看到句法学的书上、论文上、试卷上出现这样的东西—— 你想的第一个问题可能是——这XX是什么？ 当你知道这是句法树形图之后，你想的第二个问题可能是：教科书上那些树是怎么画出来的！？！？ 小编今天就给大家简单讲解一下该如何使用软件来 “画树”，是不是很兴奋？！ 当然如果你是 LaTex高级玩家，这篇文章不适合...
数据结构之美-深入了解树形结构
架构师日记
09-13 2073
从线性结构到二叉树，是树形结构的一次飞跃。二叉树使得数据结构可以呈现层级关系，大大简化了数据组织的复杂性。平衡树在此基础上，通过平衡操作保持树的深度在可接受范围内，从而在插入、删除等操作时能保持较好的性能。多路搜索树如B树、B+树等，进一步扩展了树形结构的应用范围。它们允许节点有多个子节点，从而在保持树的平衡性方面更加灵活。多维树则将树形结构从一维扩展到多维，使得数据结构能够更好地适应复杂数据类型和多维数据关系。在应用方面，树形结构被广泛应用人工智能、图形学、网络协议等众多领域。
《Learning to Reconstruct Botanical Trees from Single Images》学习从单幅图像重建植物树
行秋的博客
02-13 904
然后，逐步分割该体积，以生成具有2层和2个扇区(级别2，4个值)、4层和4个扇区(级别3，16个值)、8层和8个扇区(级别4，64个值)的RBV，以及具有16个扇区的16层(级别5，256个值)。然后，使用预测的语义掩码、估计的RBV和选择的物种参数值来计算具有与输入图像相对应的视觉特征的3D树模型的生长。（2）提出了一个由三个神经网络组成的管道，允许检测和分割照片中的树木，估计它的 3D基于径向边界体积的结构，并识别树物种；在图像嵌入(a)的基础上，使用密集层的级联来预测具有四种不同分辨率的RBV。
BSP树 | BSP Trees
欢迎来到《技术探索》，这是一个专注于游戏开发技术的博客。在这里，我们将深入探讨游戏引擎、图形渲染、人工智能、物理模拟等领域的最新技术和最佳实践。无论您是初学者还是经验丰富的开发者，我们都希望为您提供有价值的见解和实用的技巧。
02-26 851
构造BSP树的核心在于通过递归地将空间划分为前向和背向两个部分，并将面片分类到相应的子树中。通过这种方式，BSP树能够有效地管理场景中的几何体，为后续的可见性判定和渲染提供支持。尽管构建过程可能会比较复杂，但一旦构建完成，BSP树在处理可见性和渲染顺序方面具有显著的优势。BSP树的遍历方法通过判断视点与分割平面的前后关系，能够有效地控制渲染顺序，实现从后向前的渲染。这种方法在处理透明物体和复杂场景时尤为重要，能够确保正确的可见性和渲染效果。通过递归遍历BSP树，可以高效地管理和渲染场景中的几何体。
【行为树】py_trees 学习笔记
墨门
08-30 4584
在一个行为树中，Action 是一个叶节点（Leaf Node），它实际执行某种行为或任务，并返回成功、失败或运行中的状态。
C++树形图绘制算法实现及代码用例解析
绘制算法是指用来在计算机图形界面上生成树形图表示的一系列步骤和操作。一个高效的绘制算法不仅能够准确地将树形结构展现出来，还应该考虑美观性和可读性，例如，尽量减少节点之间的交叉、平衡子树的布局以及提供...
基于Java医院药品管理系统论文
最新发布
08-12
基于Java医院药品管理系统论文
Kafka消息队列架构及高可用配置实战.doc
08-12
Kafka消息队列架构及高可用配置实战.doc
springboot基于Java的宠物用品系统的设计与实现.doc
08-12
springboot基于Java的宠物用品系统的设计与实现
接口逻辑电平标准.pptx
08-12
电路设计+接口逻辑电路+各种接口电平+学习和交流
JAVA某店POS积分管理系统(源代码+论文)
08-12
java
基于精英版开发板的示波器程序
08-12
基于精英版开发板的示波器程序
windows 版 marvell raid 阵列 驱动
08-12
windows 版 marvell raid 阵列 驱动
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值