update：连线样式修改

src/App.vue

@@ -68,7 +68,7 @@ import {
     nodeResizeAdornmentTemplate, nodeRotateAdornmentTemplate,
     nodeSelectionAdornmentTemplate
 } from "./kit/NodeTemplateKit.ts";
-import {linkSelectionAdornmentTemplate, MultiArrowLink} from "./kit/LinkTemplateKit.ts";
+import {animateFlow, FlowLink, linkSelectionAdornmentTemplate} from "./kit/LinkTemplateKit.ts";
 import {Inspector} from "./kit/DataInspector.ts";
 import {ElMessage} from "element-plus";
 
@@ -195,7 +195,8 @@ function initDiagram() {
     );
 
     //多箭头连接线
-    myDiagram.linkTemplate = GO(MultiArrowLink,
+    myDiagram.linkTemplateMap.add("Arrow",
+        GO(go.Link,
             {selectable: true, selectionAdornmentTemplate: linkSelectionAdornmentTemplate},
             {relinkableFrom: true, relinkableTo: true, reshapable: true},
             {routing: go.Link.AvoidsNodes, curve: go.Link.JumpGap, toShortLength: 4},
@@ -205,6 +206,7 @@ function initDiagram() {
                 new go.Binding("stroke", "color").makeTwoWay(),
                 new go.Binding("fill", "color"),
             ),
+            GO(go.Shape, { toArrow: "Standard", stroke: null }),
             GO(go.TextBlock,
                 { segmentIndex: 0, segmentOffset: new go.Point(NaN, NaN), segmentOrientation: go.Link.OrientUpright, editable:true, text:""},
                 new go.Binding("text", "from_text").makeTwoWay()
@@ -217,7 +219,9 @@ function initDiagram() {
                 { segmentIndex: -1, segmentOffset: new go.Point(NaN, NaN), segmentOrientation: go.Link.OrientUpright, editable:true, text:"" },
                 new go.Binding("text", "to_text").makeTwoWay()
             ),
+        )
     );
+    myDiagram.linkTemplateMap.add("Flow", FlowLink);
 }
 
 function initInfo() {
@@ -229,12 +233,12 @@ function initInfo() {
                 "key": {show: Inspector.showIfPresent},
                 "name": {show: Inspector.showIfNode,  name:'名称'},
                 //连接线基本信息
-                "color": {show: Inspector.showIfLink, type:'color', name:"颜色"},
                 "from":{show: Inspector.showIfLink, name:"源", readOnly:true},
                 "to":{show: Inspector.showIfLink, name:"目的", readOnly:true},
                 "from_text": {show:Inspector.showIfLink, name:"源标签"},
                 "middle_text": {show:Inspector.showIfLink, name:"中间标签"},
                 "to_text": {show:Inspector.showIfLink, name:"目的标签"},
+                "category": {show:Inspector.showIfLink, name:"类别", type: "select", choices: ["Arrow", "Flow"]},
 
                 "thick":{show: Inspector.showIfNode, name:"厚度", unit:"mm"},
                 "temperature":{show: Inspector.showIfNode, name:"温度", unit:"℃"},
@@ -263,33 +267,33 @@ function importData() {
     myDiagram.model = go.Model.fromJson(
         { "class": "GraphLinksModel",
             "nodeDataArray": [
-                {"name":"压缩机","picture_category":"ammonia","img":"src/assets/models/ammonia/压缩机.svg","key":-7,"loc":"-460 120","angle":90,"img_size":"50 50"},
-                {"name":"冷却器-2","picture_category":"ammonia","img":"src/assets/models/ammonia/冷却器-2.svg","key":-6,"loc":"-310 120","img_size":"70 70","angle":180},
-                {"name":"换热器","picture_category":"ammonia","img":"src/assets/models/ammonia/换热器.svg","key":-3,"loc":"-170 130","img_size":"60 60"},
-                {"name":"换热器","picture_category":"ammonia","img":"src/assets/models/ammonia/换热器.svg","key":-4,"loc":"-170 250","img_size":"60 60","thick":0.9,"press":15,"temperature":20,"thing":""},
-                {"name":"氨分离罐","picture_category":"ammonia","img":"src/assets/models/ammonia/氨分离罐.svg","key":-1,"loc":"-170 370","angle":180,"img_size":"70 70","thick":0.88,"press":10,"temperature":20,"thing":""},
-                {"name":"冷却器-2","picture_category":"ammonia","img":"src/assets/models/ammonia/冷却器-2.svg","key":-8,"loc":"-170 0","img_size":"50 50","angle":270},
-                {"name":"冷却器","picture_category":"ammonia","img":"src/assets/models/ammonia/冷却器.svg","key":-5,"loc":"-300 -50","img_size":"60 72"},
-                {"name":"氨分离罐","picture_category":"ammonia","img":"src/assets/models/ammonia/氨分离罐.svg","key":-9,"loc":"-460 -50","angle":270,"img_size":"90 90"},
-                {"name":"合成塔","picture_category":"ammonia","img":"src/assets/models/ammonia/合成塔.svg","key":-2,"loc":"-20 20","img_size":"240 240"},
-                {"name":"开工炉","picture_category":"ammonia","img":"src/assets/models/ammonia/开工炉.svg","key":-10,"loc":"200 20","thick":0.88,"press":10,"temperature":20,"thing":""}
+                {"name":"压缩机","picture_category":"ammonia","img":"src/assets/models/ammonia/压缩机.svg","key":-7,"loc":"-460 120","angle":90,"img_size":"50 50","press":39,"thick":"0.86","temperature":9},
+                {"name":"冷却器-2","picture_category":"ammonia","img":"src/assets/models/ammonia/冷却器-2.svg","key":-6,"loc":"-310 120","img_size":"70 70","angle":180,"press":41,"thick":"0.46","temperature":5},
+                {"name":"换热器","picture_category":"ammonia","img":"src/assets/models/ammonia/换热器.svg","key":-3,"loc":"-170 130","img_size":"60 60","press":91,"thick":"0.85","temperature":2},
+                {"name":"换热器","picture_category":"ammonia","img":"src/assets/models/ammonia/换热器.svg","key":-4,"loc":"-170 250","img_size":"60 60","thick":"0.48","press":91,"temperature":7,"thing":""},
+                {"name":"氨分离罐","picture_category":"ammonia","img":"src/assets/models/ammonia/氨分离罐.svg","key":-1,"loc":"-170 370","angle":180,"img_size":"70 70","thick":"0.91","press":14,"temperature":9,"thing":""},
+                {"name":"冷却器-2","picture_category":"ammonia","img":"src/assets/models/ammonia/冷却器-2.svg","key":-8,"loc":"-170 0","img_size":"50 50","angle":270,"press":15,"thick":"0.35","temperature":0},
+                {"name":"冷却器","picture_category":"ammonia","img":"src/assets/models/ammonia/冷却器.svg","key":-5,"loc":"-300 -50","img_size":"60 72","press":27,"thick":"0.10","temperature":9},
+                {"name":"氨分离罐","picture_category":"ammonia","img":"src/assets/models/ammonia/氨分离罐.svg","key":-9,"loc":"-460 -50","angle":270,"img_size":"90 90","press":89,"thick":"0.93","temperature":2},
+                {"name":"合成塔","picture_category":"ammonia","img":"src/assets/models/ammonia/合成塔.svg","key":-2,"loc":"-20 20","img_size":"240 240","press":6,"thick":"0.62","temperature":0},
+                {"name":"开工炉","picture_category":"ammonia","img":"src/assets/models/ammonia/开工炉.svg","key":-10,"loc":"200 20","thick":"0.70","press":61,"temperature":0,"thing":""}
             ],
             "linkDataArray": [
-                {"from":-7,"to":-6,"points":[-435,120,-425,120,-390,120,-390,120,-355,120,-345,120],"from_text":"","to_text":"","middle_text":""},
-                {"to":-7,"points":[-581,120,-571,120,-533,120,-533,120,-495,120,-485,120],"from_text":"原料气","middle_text":"","to_text":""},
-                {"from":-1,"to":-4,"points":[-170,335,-170,325,-170,307.5,-170,307.5,-170,290,-170,280]},
-                {"from":-6,"to":-1,"points":[-310,155,-310,165,-310,370,-262.5,370,-215,370,-205,370]},
-                {"from":-3,"to":-7,"points":[-200,130,-210,130,-212,130,-212,164,-356,164,-356,120,-425,120,-435,120]},
-                {"from":-8,"to":-3,"points":[-170,25,-170,35,-170,62.5,-170,62.5,-170,90,-170,100]},
-                {"from":-3,"to":-5,"points":[-200,130,-210,130,-235,130,-235,-50,-260,-50,-270,-50]},
-                {"from":-5,"to":-9,"points":[-330,-50,-340,-50,-372.5,-50,-372.5,-50,-405,-50,-415,-50]},
-                {"from":-9,"points":[-460,-95,-460,-105,-460,-117,-508,-117,-556,-117,-566,-117],"from_text":"","middle_text":"","to_text":"燃料气"},
-                {"from":-9,"points":[-460,-5,-460,5,-460,19,-513,19,-566,19,-576,19],"from_text":"","middle_text":"","to_text":"氨产品"},
-                {"from":-4,"to":-10,"points":[-140,250,-130,250,200,250,200,165,200,80,200,70]},
-                {"from":-4,"to":-2,"points":[-170,220,-170,210,-170,197,-20,197,-20,150,-20,140]},
-                {"from":-10,"to":-2,"points":[150,20,140,20,125,20,125,20,110,20,100,20]},
-                {"from":-8,"to":-2,"points":[-170,-25,-170,-35,-170,-166,-20,-166,-20,-110,-20,-100]},
-                {"from":-1,"points":[-135,370,-125,370,-97.3671875,370,-97.3671875,370,-69.734375,370,-59.734375,370]}
+                {"from":-7,"to":-6,"points":[-435,120,-425,120,-390,120,-390,120,-355,120,-345,120],"from_text":"","to_text":"","middle_text":"","category":"Arrow"},
+                {"to":-7,"points":[-581,120,-571,120,-533,120,-533,120,-495,120,-485,120],"from_text":"原料气","middle_text":"","to_text":"","category":"Arrow"},
+                {"from":-1,"to":-4,"points":[-170,335,-170,325,-170,307.5,-170,307.5,-170,290,-170,280],"category":"Arrow"},
+                {"from":-6,"to":-1,"points":[-310,155,-310,165,-310,370,-262.5,370,-215,370,-205,370],"category":"Arrow"},
+                {"from":-3,"to":-7,"points":[-170,160,-170,170,-460,170,-460,162.5,-460,155,-460,145],"category":"Arrow"},
+                {"from":-8,"to":-3,"points":[-170,25,-170,35,-170,62.5,-170,62.5,-170,90,-170,100],"category":"Arrow"},
+                {"from":-3,"to":-5,"points":[-200,130,-210,130,-235,130,-235,-50,-260,-50,-270,-50],"category":"Arrow"},
+                {"from":-5,"to":-9,"points":[-330,-50,-340,-50,-372.5,-50,-372.5,-50,-405,-50,-415,-50],"category":"Arrow"},
+                {"from":-9,"points":[-460,-95,-460,-105,-460,-117,-508,-117,-556,-117,-566,-117],"from_text":"","middle_text":"","to_text":"燃料气","category":"Arrow"},
+                {"from":-9,"points":[-460,-5,-460,5,-460,19,-513,19,-566,19,-576,19],"from_text":"","middle_text":"","to_text":"氨产品","category":"Arrow"},
+                {"from":-4,"to":-10,"points":[-140,250,-130,250,200,250,200,165,200,80,200,70],"category":"Arrow"},
+                {"from":-4,"to":-2,"points":[-170,220,-170,210,-170,197,-20,197,-20,150,-20,140],"category":"Arrow"},
+                {"from":-10,"to":-2,"points":[150,20,140,20,125,20,125,20,110,20,100,20],"category":"Flow"},
+                {"from":-8,"to":-2,"points":[-170,-25,-170,-35,-170,-166,-20,-166,-20,-110,-20,-100],"category":"Flow"},
+                {"from":-1,"points":[-135,370,-125,370,-97.3671875,370,-97.3671875,370,-69.734375,370,-59.734375,370],"category":"Arrow"}
             ]}
     );
 }
@@ -432,6 +436,7 @@ onMounted(() => {
     initInfo();
     importData();
     changeData();
+    animateFlow(myDiagram);
 })
 
 </script>

src/kit/LinkTemplateKit.ts

 import {GO} from './GOJSKit'
 import go from 'gojs'
+import {log} from "util";
 
 export var linkSelectionAdornmentTemplate =
 GO(go.Adornment, "Link",
   GO(go.Shape,
     // isPanelMain declares that this Shape shares the Link.geometry
     { isPanelMain: true, fill: null, stroke: "deepskyblue", strokeWidth: 1 },
-      new go.Binding("stroke").makeTwoWay()
   )  // use selection object's strokeWidth
  );
 
 
 export function MultiArrowLink() {
     go.Link.call(this);
+    // return GO(go.Link, {stroke:"red"})
 }
 go.Diagram.inherit(MultiArrowLink, go.Link);
 MultiArrowLink.prototype.makeGeometry = function() {
@@ -55,3 +56,32 @@ MultiArrowLink.prototype.makeGeometry = function() {
     }
     return geo;
 };
+
+export var FlowLink =
+    GO(go.Link,{
+            routing: go.Link.AvoidsNodes,
+            curve: go.Link.JumpGap,
+            corner: 5,
+            toShortLength: 4,
+            relinkableFrom: true,
+            relinkableTo: true,
+            reshapable: true,
+            // resegmentable: true,
+        },
+        new go.Binding("points", "points").makeTwoWay(),
+        GO(go.Shape, { isPanelMain:true, strokeWidth: 5, stroke: 'red'}),
+        GO(go.Shape, { isPanelMain:true, strokeWidth: 5, stroke: 'green',name:"FLOW", strokeDashArray: [10, 10]}),
+        GO(go.Shape, { toArrow: "Standard", stroke: null })
+    );
+
+export function animateFlow(myDiagram:go.Diagram){
+    // if (myAnimation) myAnimation.stop();
+    // Animate the flow in the pipes
+    let myAnimation = new go.Animation();
+    myAnimation.easing = go.Animation.EaseLinear;
+    myDiagram.links.each(link => link.findObject("FLOW")?myAnimation.add(link.findObject("FLOW"), "strokeDashOffset", 20, 0): null);
+    myDiagram.links.each(link => console.log(link))
+    // Run indefinitely
+    myAnimation.runCount = Infinity;
+    myAnimation.start();
+}
\ No newline at end of file