串联和并联卡片实现

并联和串联通过字段区分

<div v-for="action in stage.actions" :key="action.jobId">
    <action-card
        v-if="action.type === 'serial'"
        :path="[stageIdx, action.index]"
        :action="action" />
    <ActionCardParallel
        v-if="action.type === 'parallel'"
        style="margin-bottom: 8px;"
        :stage-idx="stageIdx"
        :actions="action.action" />
</div>

设置初始化时的状态值

setInitActiveAction() {
        const status = this.taskDetail.status;
        // 初始值默认为第一阶段第一个组件
        let newActiveAction = get(this, 'taskDetail.stages.0.actions.0', {});
        const setInitStatus = ['RUNNING', 'STOPPED', 'FAIL'];
        let path = [0, 0];
        // 查找status匹配的stages;
        const stages = find(this.taskDetail.stages, { status: status });
        let actions = [];
        // 拿到当前stages下的actions
        if (stages) actions = stages.actions || [];
        // 查找目标action
        newActiveAction = this.getTargetAction(actions, status);
        // 拿到初始值为运行中，中止和失败的jobid作为path；
        if (setInitStatus.includes(status)) {
            path = this.getServicePath(newActiveAction.jobId);
        }
        // 将activeAction存储到store里
        this.$store.commit(SET_ACTIVE_ACTION, {
            ...newActiveAction,
            path: path
        });
    }

获取目标节点

getTargetAction(actions, status) {
        let action = {};
        for (let i = 0; i < actions.length; i++) {
            // 拿到组件串联执行下的场景
            if (actions[i].type === 'serial') {
                if (actions[i].status === status) {
                    action = actions[i];
                    break;
                }
            } else {
                // 并联场景下的action
                for (let k = 0; k < actions[i]?.action?.length; k++) {
                    if (actions[i].action[k].status === status) {
                        action = actions[i].action[k];
                        break;
                    }
                }
            }
        }
        return action;
    }

获取服务path

getServicePath(jobId) {
        let rtn = [0, 0];
        const stages = this.taskDetail.stages;
        // 遍历stages
        for (let i = 0; i < stages.length; i++) {
            // 拿到stages里的actions
            const { actions } = stages[i];
            // 两层循环遍历actions
            for (let k = 0; k < actions.length; k++) {
                if (actions[k].action) { // 并联的情况
                    for (let t = 0; t < actions[k].action.length; t++) {
                        if (actions[k].action[t].jobId === jobId) {
                            rtn = [i, t];
                            break;
                        }
                    }
                } else {
                    if (actions[k].jobId === jobId) {
                        // 找到某个阶段下合适的action的Path并返回
                        rtn = [i, k];
                        break;
                    }
                }
            }
        }
        return rtn;
    }

串并联数据处理

// 对拿到的actions增加并行和串行的type
export const dataSrcFunction = dataSrc => {
    const result = [];
    // 增加index字段
    dataSrc = dataSrc.map((item, index) => {
        return {
            ...item,
            index
        };
    });
    for (let i = 0; i < dataSrc.length; i++) {
        const current = dataSrc[i];
        const tempList = [current];
        // 截取当前值后面的数据
        const dataLeft = dataSrc.slice(i + 1);
        dataLeft.every((item) => {
            // 如果后面值的runOrder和当前值相同，表示并联执行
            if (item.runOrder === current.runOrder) {
                tempList.push(item);
                i++;
                return true;
            } else {
                return false;
            }
        });

        if (tempList.length === 1) {
            // 如果只有一个说明是串联执行的
            result.push({
                type: 'serial',
                ...tempList[0]
            });
        } else {
            // 如果有多个说明是并联执行的
            result.push({
                type: 'parallel',
                action: tempList
            });
        }
    }
    return result;
};