|
@@ -11,10 +11,10 @@
|
|
|
</select>
|
|
|
</div>
|
|
|
<div class="tree-cont-wrap" ref="treeWrapRef">
|
|
|
- <StepTree :data="items[activeNdx].steps" :margin="[85, 85]" lineColor="#89beb2">
|
|
|
+ <StepTree :data="treeData" :margin="[25, 25]" lineColor="#89beb2">
|
|
|
<template #step="{ data, start }">
|
|
|
<Step
|
|
|
- :item="data"
|
|
|
+ :item="newData.find(({ raw }) => raw.name === data.name)?.raw || data"
|
|
|
:start="start"
|
|
|
@click="stepClickHandler(data)"
|
|
|
@clickHost="stepHostClickHandler"
|
|
@@ -36,13 +36,43 @@ import data6 from "./data/6.json";
|
|
|
import data7 from "./data/7.json";
|
|
|
import data8 from "./data/8.json";
|
|
|
import data9 from "./data/9.json";
|
|
|
-import { ref, nextTick, toRefs, watchEffect } from "vue";
|
|
|
+import { flatSteps } from "../helper-v2";
|
|
|
+import { ref, nextTick, toRaw, toRefs, watchEffect, computed, watch } from "vue";
|
|
|
import { useRouter } from "vue-router";
|
|
|
|
|
|
const treeWrapRef = ref();
|
|
|
const $router = useRouter();
|
|
|
const items = [data1, data2, data3, data4, data5, data6, data7, data8, data9];
|
|
|
const activeNdx = ref("8");
|
|
|
+const treeData = computed(() => items[activeNdx.value].steps);
|
|
|
+
|
|
|
+const newData = ref();
|
|
|
+watch(
|
|
|
+ treeData,
|
|
|
+ () => {
|
|
|
+ newData.value = flatSteps(
|
|
|
+ JSON.parse(JSON.stringify(items[activeNdx.value].steps))
|
|
|
+ ).steps;
|
|
|
+ },
|
|
|
+ { immediate: true }
|
|
|
+);
|
|
|
+
|
|
|
+const status = ["success", "error", "running", "waiting"];
|
|
|
+watch(
|
|
|
+ newData,
|
|
|
+ (newData, _, onCleanup) => {
|
|
|
+ let c = 0;
|
|
|
+ const interval = setInterval(() => {
|
|
|
+ const s = status[c];
|
|
|
+ for (let i = 0; i < newData.length; i++) {
|
|
|
+ newData[i].raw.status = s;
|
|
|
+ }
|
|
|
+ c = (c + 1) % status.length;
|
|
|
+ }, 1000);
|
|
|
+ onCleanup(() => clearInterval(interval));
|
|
|
+ },
|
|
|
+ { immediate: true }
|
|
|
+);
|
|
|
|
|
|
const stepClickHandler = (step) => {
|
|
|
if (step.type === "startEnd") return;
|