update：路径寻找的UI显示

src/components/info/analyze-data.vue

-<template>
-    <div>
-        <div v-show="paths.length === 0">暂无分析数据</div>
-        <div v-show="paths.length > 0" >
-            <div class="mb-2 mt-0 text-xl font-medium leading-tight text-primary">线路结果</div>
-            <el-scrollbar max-height="200px">
-                <el-collapse>
-                    <el-collapse-item class="m-2" v-for="(value, key) in pathNodesMap" :title="'线路' + key ">
-                        <el-form>
-                            <el-form-item label="路线">{{value.nodesName}}</el-form-item>
-                            <el-form-item label="权重">
-                                <el-input v-model="value.weight"></el-input>
-                            </el-form-item>
-                        </el-form>
-                        <div class="flex justify-center">
-                            <el-checkbox @change="highlightPath(key)" v-model="value.highlight">高亮</el-checkbox>
-                            <el-button type="primary" @click="analyzeCompute" class="ml-4">确定</el-button>
-                        </div>
-                    </el-collapse-item>
-                </el-collapse>
-            </el-scrollbar>
-            <div class="w-full h-32 bg-red-200">
-                <div class="mb-2 mt-0 text-xl font-medium leading-tight text-primary">分析结果</div>
-<!--                <div>{{analyzeResult}}</div>-->
-                <div v-for="(value, key) in analyzeResult" class="flex">
-                    <div>{{nodeMap[key].data.name}}: {{value}}</div>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup lang="ts">
-
-import {ref, watch} from "vue";
-import {highlightLink, cancelHighlightLink, computeData} from "../../kit/GOJSKit";
-
-const props = defineProps({
-    paths: {
-        type: Array,
-        default: []
-    },
-    nodeMap:{
-        type: Object,
-        default: {}
-    },
-    myDiagram:{
-        type: Object,
-    }
-})
-
-let pathNodesMap = ref<Record<string, any>>({})
-let analyzeResult = ref<any>(null)
-
-watch(()=>props.paths, (newValue) => {
-    pathNodesMap.value = {}
-    newValue.forEach((path:any) => {
-        let pathNode:any[] = []
-        let pathNodeName:string[] = []
-        path.forEach((node:any) => {
-            pathNode.push(props.nodeMap[node])
-            pathNodeName.push(props.nodeMap[node].data.name)
-        })
-        pathNodesMap.value[newValue.indexOf(path)+1] = {
-            'nodeKeys':path, 'nodesName': pathNodeName, "nodes": pathNode, 'highlight': false, 'weight': 1/props.paths.length
-        }
-    })
-    analyzeCompute()
-});
-
-function analyzeCompute(){
-    computeData(pathNodesMap.value, analyzeResult)
-}
-
-
-function highlightPath(pathIndex:string){
-    let path:number[] = pathNodesMap.value[pathIndex].nodeKeys
-    cancelHighlightLink(props.myDiagram)
-    for (let i = 0; i < path.length-1; i++) {
-        if (pathNodesMap.value[pathIndex].highlight) {
-            highlightLink(path[i], path[i+1], props.myDiagram)
-        }
-    }
-}
-</script>
\ No newline at end of file

src/kit/GOJSKit.ts

@@ -78,8 +78,8 @@ export function findNodesAllWayBetween(startKey:number, endKey:number, myDiagram
             if (nextNode.length ==0){
                 continue
             }
-            // 如果只有一个节点，则将下一个节点直接加入当前路径
-            if (nextNode.length ==1 ){
+            // 如果只有一个节点且这个节点不在路线内，则将下一个节点直接加入当前路径
+            if (nextNode.length ==1 && path.indexOf(nextNode[0]) == -1){
                 path.push(nextNode[0])
             }
             // 如果有多个节点，则将当前路径分裂为多个路径
@@ -118,18 +118,20 @@ export function findNodesAllWayBetween(startKey:number, endKey:number, myDiagram
 export function highlightLink(from:number, to:number, myDiagram:any){
     let model = myDiagram.model
     let linkDataArray = model.linkDataArray
-    linkDataArray.forEach((item:any)=>{
-        if (item.from == from && item.to == to){
-            model.set(item, "color", "red")
+    linkDataArray.forEach((link:any)=>{
+        if (link.from == from && link.to == to){
+            model.setDataProperty(link, "highlight", true)
         }
     })
 }
 
-export function cancelHighlightLink(myDiagram:any){
+export function cancelHighlightLink(from:number, to:number, myDiagram:any){
     let model = myDiagram.model
     let linkDataArray = model.linkDataArray
-    linkDataArray.forEach((item:any)=>{
-        model.set(item, "color", "black")
+    linkDataArray.forEach((link:any)=>{
+        if(link.from == from && link.to == to){
+            model.setDataProperty(link, "highlight", false)
+        }
     })
 }
 
@@ -179,3 +181,16 @@ export function computeData(pathNodesMap:any, analyzeResult:any){
     console.log(analyzeResult.value)
     return nodesDataMap
 }
+
+export function spliceListMapWithKey(list:any, key:string, spliceKey?:string){
+    let spliceList = []
+    for (let item of list){
+        spliceList.push(item[key])
+    }
+    if(spliceKey){
+        return spliceList.join(spliceKey)
+    }else{
+        return spliceList
+    }
+
+}

src/kit/LinkTemplateKit.ts

@@ -70,21 +70,6 @@ export var FlowLink =
         GO(go.Shape, { isPanelMain:true, strokeWidth: 5, stroke: 'black',name:"FLOW", strokeDashArray: [10, 10]}),
     );
 
-export var ArrowLink =
-    GO(go.Link,
-        {selectable: true, selectionAdornmentTemplate: linkSelectionAdornmentTemplate},
-        {relinkableFrom: true, relinkableTo: true, reshapable: true},
-        {routing: go.Link.AvoidsNodes, curve: go.Link.JumpGap, toShortLength: 4},
-        new go.Binding("points", "points").makeTwoWay(),
-        GO(go.Shape,  // the link path shape
-            {isPanelMain: true, strokeWidth: 2},
-            new go.Binding("stroke", "color").makeTwoWay(),
-            new go.Binding("fill", "color"),
-        ),
-        GO(go.Shape, { toArrow: "Standard", stroke: null }, new go.Binding("fill", "color")),
-        makeLinkLabel()
-    )
-
 export function animateFlow(myDiagram:go.Diagram){
     // if (myAnimation) myAnimation.stop();
     // Animate the flow in the pipes
@@ -102,6 +87,24 @@ export function animateFlow(myDiagram:go.Diagram){
     myAnimation.start();
 }
 
+
+export var ArrowLink =
+    GO(go.Link,
+        {selectable: true, selectionAdornmentTemplate: linkSelectionAdornmentTemplate},
+        {relinkableFrom: true, relinkableTo: true, reshapable: true},
+        {routing: go.Link.AvoidsNodes, curve: go.Link.JumpGap, toShortLength: 4},
+        new go.Binding("points", "points").makeTwoWay(),
+        GO(go.Shape,  // the link path shape
+            {isPanelMain: true, strokeWidth: 2},
+            new go.Binding("stroke", "", data => linkColorBind(data)),
+            new go.Binding("fill", "", data => linkColorBind(data)),
+        ),
+        GO(go.Shape, { toArrow: "Standard", stroke: null },
+            new go.Binding("fill", "", (data)=>linkColorBind(data)),
+        ),
+        makeLinkLabel()
+    )
+
 //在 link 上添加 开始 中间 结束 三个位置的文本。
 export function makeLinkLabel(){
     return [
@@ -119,3 +122,11 @@ export function makeLinkLabel(){
         ),
     ]
 }
+//根据数据中的 highlight 字段来判断是否高亮
+function linkColorBind (data:any){
+    if (data['highlight']){
+        return data['highlightColor']
+    }
+    else
+        return data['color']
+}

src/kit/ModelData.ts

@@ -8,10 +8,10 @@
 export const SourceNodeCategory: { key: string; name: string; type: string }[] = [
     {key:"valve",name:"阀门", type:"svg"},
     {key:"pump",name:"泵", type:"svg"},
-    {key:"computer",name:"计算机", type:"svg"},
+    // {key:"computer",name:"计算机", type:"svg"},
     {key:"ammonia", name:"氨气合成装置", type:"svg"},
     {key:"pipe", name:"管道", type:"geometry"},
-    {key:"shape", name:"形状", type:"shape"},
+    // {key:"shape", name:"形状", type:"shape"},
 ]
 
 export const SourceNodeModel = [