Skip to content

V
vue-gojs
Commit e5012b0e by 吴斌
Options

update：路径寻找的UI显示

parent 0c3502c8
Showing with 163 additions and 152 deletions
src/App.vue
......@@ -62,8 +62,8 @@
<div class="flex flex-row space-x-0" @mouseenter="highlightPort(port['portId'], true)" @mouseleave="highlightPort(port['portId'], false)">
<el-text>{{port['name']}}</el-text>
<div class="flex-1"></div>
<el-button text icon="edit" class="w-5" @click="editPort(port['portId'])"></el-button>
<el-button text icon="delete" class="w-5" type="danger" @click="deletePort(port['portId'])"></el-button>
<el-button text icon="edit" class="w-5" @click="editPort(port['portId'])" :disabled="diagramConfig.mode === 'readonly'"></el-button>
<el-button text icon="delete" class="w-5" type="danger" @click="deletePort(port['portId'])" :disabled="diagramConfig.mode === 'readonly'"></el-button>
</div>
</div>
<el-button icon="CirclePlusFilled" type="primary" @click="()=>showAddPortDialog=true">添加端口</el-button>
......@@ -76,6 +76,31 @@
<el-button type="primary" @click="analyzeData">数据分析</el-button>
<el-empty description="选择两个设备进行分析" v-if="!ifSelectNode && !ifSelectLink"></el-empty>
<div class="space-y-1 p-2 flex flex-col" v-show="ifSelectNode || ifSelectLink">
<div v-if="analyzePathsName.length > 0">
<div>线路结果</div>
<el-scrollbar max-height="400px">
<el-collapse>
<el-collapse-item
class="m-2"
v-for="( path, index) in analyzePathsName"
:title="'线路' + Number(index +1)"
@mouseenter="highlightPath(index)"
@mouseleave="cancelHighlightPath(index)"
>
<el-form>
<el-form-item label="路线：">{{spliceListMapWithKey(path, 'nodeName', '->')}}</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">确定</el-button>-->
<!-- </div>-->
</el-collapse-item>
</el-collapse>
</el-scrollbar>
</div>
</div>
</div>
</el-tab-pane>
......@@ -140,7 +165,15 @@
import {onMounted, ref, triggerRef} from "vue";
import SourceNodeCollection from "./components/source/source-node-collection.vue";
import go from "gojs";
import {findNodesAllWayBetween, getSelectedNodes, GO} from "./kit/GOJSKit.ts";
import {
GO,
getMapData,
getSelectedNodes,
findNodesAllWayBetween,
highlightLink,
cancelHighlightLink,
spliceListMapWithKey,
} from "./kit/GOJSKit.ts";
import {createRotatingTool, makeDiagramNodeTemplate} from "./kit/NodeTemplateKit.ts";
import {GuidedDraggingTool} from "./kit/extensions/GuidedDraggingTool.ts";
import {PortShiftingTool} from "./kit/extensions/PortShiftingTool.ts";
......@@ -151,21 +184,31 @@ import {SnapLinkReshapingTool} from "./kit/extensions/SnapLinkReshapingTool.ts";
import {Edit, View} from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";
// 图表配置
const diagramConfig = ref({
mode: "edit",
mode: "readonly",
})
// 是否模拟实时数据
const ifRealTimeData = ref(false)
let myDiagram:any = null
let inspector:any = null
// let inspector:any = null
//是否选中了节点
const ifSelectNode = ref(false)
// 选中的节点
const selectedNode = ref()
// 是否选中了连接线
const ifSelectLink = ref(false)
// 选中的连接线
const selectedLink = ref()
// 选中的节点的端口数组，需要在添加或者删除端口后更新
const nodePortArray = ref([])
// 显示添加端口弹窗
const showAddPortDialog = ref(false)
// 添加端口表单
const addPortForm = ref({
name: "端口1",
type: "0 0.5",
......@@ -174,7 +217,10 @@ const addPortForm = ref({
fromMaxLinks:999,
toMaxLinks:999,
})
// 显示修改端口弹窗
const showEditPortDialog = ref(false)
// 修改端口表单
const editPortForm = ref({
portId:"",
name:"端口1",
......@@ -183,6 +229,7 @@ const editPortForm = ref({
fromMaxLinks:999,
toMaxLinks:999,
})
// 端口类型列表
const portTypeList =[
{label:'左侧', value:"0 0.5"},
{label:'上方', value:"0.5 0"},
......@@ -190,7 +237,8 @@ const portTypeList =[
{label:'下方', value:"0.5 1"},
]
const analyzePath = ref([])
// 线路分析结果的名称
const analyzePathsName = ref<Record<string, any>[][]>([])
// 源节点搜索
// let inputSearchNode = ref('')
......@@ -215,14 +263,8 @@ function diagramModeChanged(){
let mode = diagramConfig.value.mode
if (mode === 'readonly'){
myDiagram.isReadOnly = true
myDiagram.linkingTool.isEnabled = false
myDiagram.relinkingTool.isEnabled = false
myDiagram.draggingTool.isEnabled = false
}else if(mode === 'edit'){
myDiagram.isReadOnly = false
myDiagram.linkingTool.isEnabled = true
myDiagram.relinkingTool.isEnabled = true
myDiagram.draggingTool.isEnabled = true
}
}
......@@ -254,33 +296,32 @@ function importData(){
{"name":"三头","nodeCollection":"pipe","geometry":"F1 M0 0 L60 0 60 20 50 20 Q40 20 40 30 L40 40 20 40 20 30 Q20 20 10 20 L0 20z","fill":"rgba(128, 128, 128, 0.5)","category":"geometry","portArray":[{"name":"端口1","portId":"854f9c8e-0652-44aa-9705-95dc825ad577","alignment":"0 0.25 0 0","fromLinkable":true,"toLinkable":true,"fromMaxLinks":999,"toMaxLinks":999,"fromSpot":"0 0.5 0 0","toSpot":"0 0.5 0 0","isHighlighted":false},{"name":"端口2","portId":"9c6c8565-d1f4-46fa-b67b-db673fd127aa","alignment":"1 0.25 0 0","fromLinkable":true,"toLinkable":true,"fromMaxLinks":999,"toMaxLinks":999,"fromSpot":"1 0.5 0 0","toSpot":"1 0.5 0 0","isHighlighted":false},{"name":"端口3","portId":"d88aaad3-7e10-47ab-81ec-0040f3c21cf7","alignment":"0.5 1 0 0","fromLinkable":true,"toLinkable":true,"fromMaxLinks":999,"toMaxLinks":999,"fromSpot":"0.5 1 0 0","toSpot":"0.5 1 0 0","isHighlighted":false}],"key":-15,"loc":"357.5 -620","angle":0}
],
"linkDataArray": [
{"from":-5,"to":-1,"fromPort":"51b9d16b-8eea-4c4e-92a2-5bb9d99d294f","toPort":"11c8ba71-e7cc-41ee-b7d3-cd2814e26f0f","points":[-301.3888888888889,-330,-311.3888888888889,-330,-311.3888888888889,-330,-311.3888888888889,-401.1228164268244,-408.10975857377355,-401.1228164268244,-418.10975857377355,-401.1228164268244],"category":"Arrow"},
{"from":-1,"fromPort":"256b782d-5870-4e05-94ff-34f130c5060e","toPort":"","points":[-450,-507.47237569060775,-450,-517.4723756906078,-450,-547.6190476190478,-519.0476190476192,-547.6190476190478,-588.0952380952383,-547.6190476190478,-598.0952380952383,-547.6190476190478],"from_text":"","middle_text":"","to_text":"燃料气","category":"Arrow"},
{"from":-1,"fromPort":"dcd15cc2-ec1b-4a35-b861-377b6f75d0b9","toPort":"","points":[-450,-292.5276243093923,-450,-282.5276243093923,-450,-248.57142857142867,-519.0476190476192,-248.57142857142867,-588.0952380952383,-248.57142857142867,-598.0952380952383,-248.57142857142867],"from_text":"","middle_text":"","to_text":"氨产品","category":"Arrow"},
{"from":-7,"to":-6,"fromPort":"3f0de33c-e4c4-4187-b7bf-d8192b0708d9","toPort":"0be6a460-df3a-423f-be3d-b38a4adead36","points":[-415,-60,-405,-60,-370,-60,-370,-102.8125,-301.14268500612275,-102.8125,-301.14268500612275,-92.8125],"category":"Arrow"},
{"from":-2,"to":-5,"fromPort":"d88aaad3-7e10-47ab-81ec-0040f3c21cf7","toPort":"a8e9572b-53fb-4791-a173-e272c28bc8af","points":[-180,-221.75,-180,-231.75,-180,-330,-184.30555555555557,-330,-188.61111111111114,-330,-198.61111111111114,-330],"category":"Arrow"},
{"from":-2,"to":-7,"fromPort":"9c6c8565-d1f4-46fa-b67b-db673fd127aa","toPort":"4226d10a-0eb2-4c7a-b839-287003f573ff","points":[-213,-188.5,-223,-188.5,-455.89285714285734,-188.5,-455.89285714285734,-143.83333333333331,-455.89285714285734,-99.16666666666663,-455.89285714285734,-89.16666666666663],"category":"Arrow"},
{"to":-7,"fromPort":"","toPort":"55950fe5-ebe1-4d75-b6b4-30da5e97af17","points":[-599.2109634992121,-61.18966252420353,-589.2109634992121,-61.18966252420353,-550,-61.18966252420353,-550,-60,-510,-60,-500,-60],"from_text":"原料气","middle_text":"","to_text":"","category":"Arrow"},
{"from":-6,"to":-9,"fromPort":"0d7b8599-993d-4474-9fb7-a1f1425cbe32","toPort":"d17eb676-1f01-43f1-b658-b16fde8e4159","points":[-301.14268500612275,-47.8125,-301.14268500612275,-37.8125,-301.14268500612275,100,-64.19634250306137,100,172.75,100,182.75,100],"category":"Arrow"},
{"from":-9,"to":-8,"fromPort":"d5501d1f-5fa8-4d71-8a77-37c64482de72","toPort":"17fac662-e52f-43de-8c27-d24452d9ed2a","points":[251.25,70.5,251.25,60.5,251.25,12.155062499999984,175.1293103448276,12.155062499999984,99.00862068965517,12.155062499999984,89.00862068965517,12.155062499999984],"category":"Arrow"},
{"from":-9,"fromPort":"96dee2d1-babb-4b4d-b5cb-0bafad3131d9","toPort":"","points":[251.25,129.5,251.25,139.5,251.25,208.17973750000021,251.60979375000034,208.17973750000021,251.60979375000034,276.85947500000043,251.60979375000034,286.85947500000043],"category":"Arrow"},
{"from":-3,"to":-2,"fromPort":"e8cd7aef-9139-480c-ade2-1ef79cc4261d","toPort":"854f9c8e-0652-44aa-9705-95dc825ad577","points":[-50.258620689655174,-100.88701875000004,-60.258620689655174,-100.88701875000004,-98.62931034482759,-100.88701875000004,-98.62931034482759,-188.5,-137,-188.5,-147,-188.5],"category":"Arrow"},
{"from":-8,"to":-3,"fromPort":"fdc201ee-d40d-4d87-bd11-df445f3f976d","toPort":"2b860c7b-eafc-49b2-90ba-d32d007a2e7b","points":[18.75,-6.25,18.75,-16.25,18.75,-44.375,19,-44.375,19,-72.5,19,-82.5],"category":"Arrow"},
{"from":-10,"to":-3,"fromPort":"16d8e009-b1b1-45c2-a94f-1a90943ee090","toPort":"fdc201ee-d40d-4d87-bd11-df445f3f976d","points":[18.75,-316.75,18.75,-306.75,18.75,-217.125,19.786697850832525,-217.125,19.786697850832525,-127.5,19.786697850832525,-117.5],"category":"Arrow"},
{"from":-3,"to":-12,"fromPort":"17fac662-e52f-43de-8c27-d24452d9ed2a","toPort":"9c6c8565-d1f4-46fa-b67b-db673fd127aa","points":[90.25862068965517,-102.10252500000001,100.25862068965517,-102.10252500000001,263.62931034482756,-102.10252500000001,263.62931034482756,-103.0625,427,-103.0625,437,-103.0625],"category":"Arrow"},
{"from":-12,"to":-4,"fromPort":"d88aaad3-7e10-47ab-81ec-0040f3c21cf7","toPort":"3a24769a-5f3a-49e6-953d-a5e1fce7e8be","points":[470,-136.3125,470,-146.3125,470,-204.65625,470,-204.65625,470,-263,470,-273],"category":"Arrow"},
{"from":-12,"to":-13,"fromPort":"854f9c8e-0652-44aa-9705-95dc825ad577","toPort":"9c6c8565-d1f4-46fa-b67b-db673fd127aa","points":[503,-103.0625,513,-103.0625,691.5,-103.0625,691.5,-150.03125,691.5,-197,691.5,-207],"category":"Arrow"},
{"from":-13,"to":-11,"fromPort":"d88aaad3-7e10-47ab-81ec-0040f3c21cf7","toPort":"415f271d-1dd7-415f-ab4f-d5a7221b095a","points":[658.25,-240,648.25,-240,481.0977750000001,-240,481.0977750000001,-238.20473125000035,313.94555000000025,-238.20473125000035,303.94555000000025,-238.20473125000035],"category":"Arrow"},
{"from":-4,"to":-15,"fromPort":"58c1fc66-36b0-4e21-af4f-85e52828ac76","toPort":"d88aaad3-7e10-47ab-81ec-0040f3c21cf7","points":[419.2806687500005,-498.35756250000065,409.2806687500005,-498.35756250000065,412,-498.35756250000065,412,-498.35756250000065,357.5,-498.35756250000065,357.5,-588.25,357.5,-598.25],"category":"Arrow"},
{"from":-15,"to":-11,"fromPort":"854f9c8e-0652-44aa-9705-95dc825ad577","toPort":"ab215031-702e-4d22-9663-8c4f631c19ed","points":[324.5,-631.5,314.5,-631.5,314.5,-631.5,314.5,-600,295,-600,285,-600],"category":"Arrow"},
{"from":-13,"to":-15,"fromPort":"854f9c8e-0652-44aa-9705-95dc825ad577","toPort":"9c6c8565-d1f4-46fa-b67b-db673fd127aa","points":[691.5,-273,691.5,-283,691.5,-631.5,546,-631.5,400.5,-631.5,390.5,-631.5],"category":"Arrow"},
{"from":-11,"to":-10,"fromPort":"ec58dcb4-39fb-400e-bb0e-018ecee51d56","toPort":"ba564564-2ac8-48da-a430-3af06ea4997d","category":"Arrow","points":[220,-733.25,220,-743.25,92.125,-743.25,92.125,-401.25,58.25,-401.25,48.25,-401.25]}
{"from":-5,"to":-1,"fromPort":"51b9d16b-8eea-4c4e-92a2-5bb9d99d294f","toPort":"11c8ba71-e7cc-41ee-b7d3-cd2814e26f0f","points":[-301.3888888888889,-330,-311.3888888888889,-330,-311.3888888888889,-330,-311.3888888888889,-401.1228164268244,-408.10975857377355,-401.1228164268244,-418.10975857377355,-401.1228164268244],"category":"Arrow", 'highlightColor':'red', 'color':'black'},
{"from":-1,"fromPort":"256b782d-5870-4e05-94ff-34f130c5060e","toPort":"","points":[-450,-507.47237569060775,-450,-517.4723756906078,-450,-547.6190476190478,-519.0476190476192,-547.6190476190478,-588.0952380952383,-547.6190476190478,-598.0952380952383,-547.6190476190478],"from_text":"","middle_text":"","to_text":"燃料气","category":"Arrow", 'highlightColor':'red', 'color':'black'},
{"from":-1,"fromPort":"dcd15cc2-ec1b-4a35-b861-377b6f75d0b9","toPort":"","points":[-450,-292.5276243093923,-450,-282.5276243093923,-450,-248.57142857142867,-519.0476190476192,-248.57142857142867,-588.0952380952383,-248.57142857142867,-598.0952380952383,-248.57142857142867],"from_text":"","middle_text":"","to_text":"氨产品","category":"Arrow", 'highlightColor':'red', 'color':'black'},
{"from":-7,"to":-6,"fromPort":"3f0de33c-e4c4-4187-b7bf-d8192b0708d9","toPort":"0be6a460-df3a-423f-be3d-b38a4adead36","points":[-415,-60,-405,-60,-370,-60,-370,-102.8125,-301.14268500612275,-102.8125,-301.14268500612275,-92.8125],"category":"Arrow", 'highlightColor':'red', 'color':'black'},
{"from":-2,"to":-5,"fromPort":"d88aaad3-7e10-47ab-81ec-0040f3c21cf7","toPort":"a8e9572b-53fb-4791-a173-e272c28bc8af","points":[-180,-221.75,-180,-231.75,-180,-330,-184.30555555555557,-330,-188.61111111111114,-330,-198.61111111111114,-330],"category":"Arrow", 'highlightColor':'red', 'color':'black'},
{"from":-2,"to":-7,"fromPort":"9c6c8565-d1f4-46fa-b67b-db673fd127aa","toPort":"4226d10a-0eb2-4c7a-b839-287003f573ff","points":[-213,-188.5,-223,-188.5,-455.89285714285734,-188.5,-455.89285714285734,-143.83333333333331,-455.89285714285734,-99.16666666666663,-455.89285714285734,-89.16666666666663],"category":"Arrow", 'highlightColor':'red', 'color':'black'},
{"to":-7,"fromPort":"","toPort":"55950fe5-ebe1-4d75-b6b4-30da5e97af17","points":[-599.2109634992121,-61.18966252420353,-589.2109634992121,-61.18966252420353,-550,-61.18966252420353,-550,-60,-510,-60,-500,-60],"from_text":"原料气","middle_text":"","to_text":"","category":"Arrow", 'highlightColor':'red', 'color':'black'},
{"from":-6,"to":-9,"fromPort":"0d7b8599-993d-4474-9fb7-a1f1425cbe32","toPort":"d17eb676-1f01-43f1-b658-b16fde8e4159","points":[-301.14268500612275,-47.8125,-301.14268500612275,-37.8125,-301.14268500612275,100,-64.19634250306137,100,172.75,100,182.75,100],"category":"Arrow", 'highlightColor':'red', 'color':'black'},
{"from":-9,"to":-8,"fromPort":"d5501d1f-5fa8-4d71-8a77-37c64482de72","toPort":"17fac662-e52f-43de-8c27-d24452d9ed2a","points":[251.25,70.5,251.25,60.5,251.25,12.155062499999984,175.1293103448276,12.155062499999984,99.00862068965517,12.155062499999984,89.00862068965517,12.155062499999984],"category":"Arrow", 'highlightColor':'red', 'color':'black'},
{"from":-9,"fromPort":"96dee2d1-babb-4b4d-b5cb-0bafad3131d9","toPort":"","points":[251.25,129.5,251.25,139.5,251.25,208.17973750000021,251.60979375000034,208.17973750000021,251.60979375000034,276.85947500000043,251.60979375000034,286.85947500000043],"category":"Arrow", 'highlightColor':'red', 'color':'black'},
{"from":-3,"to":-2,"fromPort":"e8cd7aef-9139-480c-ade2-1ef79cc4261d","toPort":"854f9c8e-0652-44aa-9705-95dc825ad577","points":[-50.258620689655174,-100.88701875000004,-60.258620689655174,-100.88701875000004,-98.62931034482759,-100.88701875000004,-98.62931034482759,-188.5,-137,-188.5,-147,-188.5],"category":"Arrow", 'highlightColor':'red', 'color':'black'},
{"from":-8,"to":-3,"fromPort":"fdc201ee-d40d-4d87-bd11-df445f3f976d","toPort":"2b860c7b-eafc-49b2-90ba-d32d007a2e7b","points":[18.75,-6.25,18.75,-16.25,18.75,-44.375,19,-44.375,19,-72.5,19,-82.5],"category":"Arrow", 'highlightColor':'red', 'color':'black'},
{"from":-10,"to":-3,"fromPort":"16d8e009-b1b1-45c2-a94f-1a90943ee090","toPort":"fdc201ee-d40d-4d87-bd11-df445f3f976d","points":[18.75,-316.75,18.75,-306.75,18.75,-217.125,19.786697850832525,-217.125,19.786697850832525,-127.5,19.786697850832525,-117.5],"category":"Arrow", 'highlightColor':'red', 'color':'black'},
{"from":-3,"to":-12,"fromPort":"17fac662-e52f-43de-8c27-d24452d9ed2a","toPort":"9c6c8565-d1f4-46fa-b67b-db673fd127aa","points":[90.25862068965517,-102.10252500000001,100.25862068965517,-102.10252500000001,263.62931034482756,-102.10252500000001,263.62931034482756,-103.0625,427,-103.0625,437,-103.0625],"category":"Arrow", 'highlightColor':'red', 'color':'black'},
{"from":-12,"to":-4,"fromPort":"d88aaad3-7e10-47ab-81ec-0040f3c21cf7","toPort":"3a24769a-5f3a-49e6-953d-a5e1fce7e8be","points":[470,-136.3125,470,-146.3125,470,-204.65625,470,-204.65625,470,-263,470,-273],"category":"Arrow", 'highlightColor':'red', 'color':'black'},
{"from":-12,"to":-13,"fromPort":"854f9c8e-0652-44aa-9705-95dc825ad577","toPort":"9c6c8565-d1f4-46fa-b67b-db673fd127aa","points":[503,-103.0625,513,-103.0625,691.5,-103.0625,691.5,-150.03125,691.5,-197,691.5,-207],"category":"Arrow", 'highlightColor':'red', 'color':'black'},
{"from":-13,"to":-11,"fromPort":"d88aaad3-7e10-47ab-81ec-0040f3c21cf7","toPort":"415f271d-1dd7-415f-ab4f-d5a7221b095a","points":[658.25,-240,648.25,-240,481.0977750000001,-240,481.0977750000001,-238.20473125000035,313.94555000000025,-238.20473125000035,303.94555000000025,-238.20473125000035],"category":"Arrow", 'highlightColor':'red', 'color':'black'},
{"from":-4,"to":-15,"fromPort":"58c1fc66-36b0-4e21-af4f-85e52828ac76","toPort":"d88aaad3-7e10-47ab-81ec-0040f3c21cf7","points":[419.2806687500005,-498.35756250000065,409.2806687500005,-498.35756250000065,412,-498.35756250000065,412,-498.35756250000065,357.5,-498.35756250000065,357.5,-588.25,357.5,-598.25],"category":"Arrow", 'highlightColor':'red', 'color':'black'},
{"from":-15,"to":-11,"fromPort":"854f9c8e-0652-44aa-9705-95dc825ad577","toPort":"ab215031-702e-4d22-9663-8c4f631c19ed","points":[324.5,-631.5,314.5,-631.5,314.5,-631.5,314.5,-600,295,-600,285,-600],"category":"Arrow", 'highlightColor':'red', 'color':'black'},
{"from":-13,"to":-15,"fromPort":"854f9c8e-0652-44aa-9705-95dc825ad577","toPort":"9c6c8565-d1f4-46fa-b67b-db673fd127aa","points":[691.5,-273,691.5,-283,691.5,-631.5,546,-631.5,400.5,-631.5,390.5,-631.5],"category":"Arrow", 'highlightColor':'red', 'color':'black'},
{"from":-11,"to":-10,"fromPort":"ec58dcb4-39fb-400e-bb0e-018ecee51d56","toPort":"ba564564-2ac8-48da-a430-3af06ea4997d","category":"Arrow", 'highlightColor':'red', 'color':'black',"points":[220,-733.25,220,-743.25,92.125,-743.25,92.125,-401.25,58.25,-401.25,48.25,-401.25]}
]}
myDiagram.model = go.Model.fromJson(json)
}
function saveData(){
// console.log('nodeCount', nodeCount.count)
console.log(selectedNode.value)
}
......@@ -379,6 +420,9 @@ function listenDiagram(){
linkDataArray.forEach((item:any)=>{
if (item === link.data && !item.category){
myDiagram.model.set(item, "category", "Arrow")
myDiagram.model.set(item, "highlight", false)
myDiagram.model.set(item, "highlightColor", "red")
myDiagram.model.set(item, "color", "black")
}
})
});
......@@ -403,9 +447,26 @@ function freshSelectionLink(){
ifSelectLink.value = selectedLink.value !== null;
}
function highlightPath(pathIndex:number){
let path: any[] = spliceListMapWithKey(analyzePathsName.value[pathIndex], 'nodeKey') as []
for (let i = 0; i < path.length-1; i++) {
highlightLink(path[i], path[i+1], myDiagram)
}
}
function cancelHighlightPath(pathIndex:number){
let path: any[] = spliceListMapWithKey(analyzePathsName.value[pathIndex], 'nodeKey') as []
for (let i = 0; i < path.length-1; i++) {
cancelHighlightLink(path[i], path[i+1], myDiagram)
}
}
// 右侧info-panel相关函数
function initInspector(){
inspector = new Inspector('inspector-property', myDiagram,
// inspector =
new Inspector('inspector-property', myDiagram,
{
includesOwnProperties: false,
properties: {
......@@ -509,7 +570,6 @@ function deletePort(portId:string){
}
function highlightPort(portId:string, highlight:boolean){
myDiagram.startTransaction("highlight");
let model = myDiagram.model
let nodeDataArray = model.nodeDataArray
nodeDataArray.forEach((item:any)=>{
......@@ -523,7 +583,6 @@ function highlightPort(portId:string, highlight:boolean){
})
}
})
myDiagram.commitTransaction("highlight");
}
function changeDeviceData(){
......@@ -547,18 +606,30 @@ function changeDataRealTime(){
}
function analyzeData(){
let analyzePaths = []
analyzePathsName.value = []
let selectedNodes = getSelectedNodes(myDiagram)
if(selectedNodes.length !== 2){
ElMessage.error('请选择两个设备节点')
}
console.log(selectedNodes)
let startNodeKey = selectedNodes[0].key
let endNodeKey = selectedNodes[1].key
console.log(startNodeKey, endNodeKey)
analyzePath.value = findNodesAllWayBetween(startNodeKey, endNodeKey, myDiagram)
if (analyzePath.value.length === 0){
analyzePaths = findNodesAllWayBetween(startNodeKey, endNodeKey, myDiagram)
if (analyzePaths.length === 0){
ElMessage.error('选择的两个节点直接不存在可达到的路径')
}
let nodeMap = getMapData(myDiagram)
for(let path of analyzePaths){
let pathName = []
for(let pathNodeKey of path){
pathName.push({
nodeName:nodeMap[pathNodeKey]['data']['name'],
weight:1,
nodeKey:pathNodeKey,
})
}
analyzePathsName.value.push(pathName)
}
}
// 浏览器大小变化时
......
src/components/info/analyze-data.vue deleted 100644 → 0
<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 = [
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment