fix: 1

src/util/index.ts

@@ -75,7 +75,7 @@ export const toDegrees = (val: number, retain = 4) => {
   const m = temps[0];
   const s = round(temps[1] * 60, retain);
 
-  return `${d}°${m}'${s}"`;
+  return `${d}°${m}′${s}"`;
 };
 
 export const copyText = async (

src/view/step-tree-v2/example/example.vue

@@ -11,10 +11,10 @@
     </select>
   </div>
   <div class="tree-cont-wrap" ref="treeWrapRef">
-    <StepTree :data="items[activeNdx].steps" :margin="[25, 25]" 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;

src/view/step-tree-v2/example/step.vue

@@ -53,9 +53,9 @@ const colorMap = {
   running: "#ecf752",
   waiting: "#89beb2",
 };
-const currentColor = computed(() =>
-  props.item.status in colorMap ? colorMap[props.item.status] : defaultColor
-);
+const currentColor = computed(() => {
+  return props.item.status in colorMap ? colorMap[props.item.status] : defaultColor;
+});
 </script>
 
 <style scoped lang="scss">