Skip to content

V
vue-gojs
Commit 5eabe37e by 吴斌
Options

update：点击导入显示示例组态。

parent a095925c
Showing with 156 additions and 62 deletions
src/App.vue
......@@ -40,22 +40,26 @@
<div id="info-panel" class="w-[200px] rounded-br-[8px]">
<el-tabs type="border-card" class="info-tabs w-full h-full">
<el-tab-pane label="节点">
<el-empty description="未选择节点" v-if="!ifSelectNode"></el-empty>
<div class="space-y-1 p-2 flex flex-col" v-show="ifSelectNode">
<div class="text-[16px] font-bold text-black">属性</div>
<div id="inspector-property"></div>
<el-divider direction="horizontal"></el-divider>
<div class="text-[16px] font-bold text-black">端口</div>
<div v-for="port in nodePortArray">
<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-empty description="未选择节点或连接线" v-if="!ifSelectNode && !ifSelectLink"></el-empty>
<div class="space-y-1 p-2 flex flex-col" v-show="ifSelectNode || ifSelectLink">
<div>
<div class="text-[16px] font-bold text-black">属性</div>
<div id="inspector-property"></div>
<el-divider direction="horizontal"></el-divider>
</div>
<div v-show="ifSelectNode">
<div class="text-[16px] font-bold text-black">端口</div>
<div v-for="port in nodePortArray">
<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>
</div>
</div>
<el-button icon="CirclePlusFilled" type="primary" @click="()=>showAddPortDialog=true">添加端口</el-button>
<el-divider direction="horizontal"></el-divider>
</div>
<el-button icon="CirclePlusFilled" type="primary" @click="()=>showAddPortDialog=true">添加端口</el-button>
<el-divider direction="horizontal"></el-divider>
</div>
</el-tab-pane>
<el-tab-pane label="参数">
......@@ -85,8 +89,11 @@
<el-form-item label="允许进入">
<el-checkbox v-model="addPortForm.toLinkable"></el-checkbox>
</el-form-item>
<el-form-item label="最大连接">
<el-input v-model="addPortForm.maxLinks"></el-input>
<el-form-item label="最大流出连接数">
<el-input v-model="addPortForm.fromMaxLinks" placeholder="不填默认是999"></el-input>
</el-form-item>
<el-form-item label="最大流入连接数">
<el-input v-model="addPortForm.toMaxLinks" placeholder="不填默认是999"></el-input>
</el-form-item>
</el-form>
<template #footer>
......@@ -105,8 +112,11 @@
<el-form-item label="允许进入">
<el-checkbox v-model="editPortForm.toLinkable"></el-checkbox>
</el-form-item>
<el-form-item label="最大连接">
<el-input v-model="editPortForm.maxLinks"></el-input>
<el-form-item label="最大流出连接数" placeholder="不填默认是999">
<el-input v-model="editPortForm.fromMaxLinks"></el-input>
</el-form-item>
<el-form-item label="最大流入连接数" placeholder="不填默认是999">
<el-input v-model="editPortForm.toMaxLinks"></el-input>
</el-form-item>
</el-form>
<template #footer>
......@@ -141,23 +151,27 @@ let myDiagram: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',
name: "端口1",
type: "0 0.5",
toLinkable:true,
fromLinkable:true,
maxLinks: 1,
toLinkable:true,
fromMaxLinks:999,
toMaxLinks:999,
})
const showEditPortDialog = ref(false)
const editPortForm = ref({
portId:'',
name: '端口1',
portId:"",
name:"端口1",
toLinkable:true,
fromLinkable:true,
maxLinks: 1,
fromMaxLinks:999,
toMaxLinks:999,
})
const portTypeList =[
{label:'左侧', value:"0 0.5"},
......@@ -197,11 +211,44 @@ function importData(){
"linkFromPortIdProperty": "fromPort",
"linkToPortIdProperty": "toPort",
"nodeDataArray": [
{"name":"电脑","nodeCollection":"computer","img":"src/assets/models/computer/电脑.svg","category":"svg","key":-1,"loc":"-220 0","portArray":[{"portId":"port1","name":"输入1","alignment":"0 0.5","fromLinkable":true,"toLinkable":true,"fromSpot":"0 0.5","toSpot":"0 0.5","background":"black","isHighlighted":false,"maxLinks":"1"},{"portId":"port2","name":"输入2","alignment":"1 0.5","fromLinkable":true,"toLinkable":true,"fromSpot":"1 0.5","toSpot":"1 0.5","background":"black","isHighlighted":false,"maxLinks":"1"},{"name":"端口1","portId":"0b897516-0022-4797-82ce-e8899dc189ea","alignment":"0.5 0","fromLinkable":true,"toLinkable":true,"maxLinks":1,"fromSpot":"0.5 0","toSpot":"0.5 0","background":"black","isHighlighted":false}]},
{"name":"电脑","node_category":"computer","img":"src/assets/models/computer/电脑.svg","category":"svg","key":-2,"loc":"120 -180","portArray":[{"portId":"port1","name":"输入1","alignment":"0 0.5","fromLinkable":true,"toLinkable":true,"fromSpot":"0 0.5","toSpot":"0 0.5","background":"black","isHighlighted":false,"maxLinks":"1"}]}
{"name":"氨分离罐","nodeCollection":"ammonia","img":"src/assets/models/ammonia/氨分离罐.svg","category":"svg","key":-1,"loc":"-450 -400","size":"100 209.94475138121547","portArray":[{"name":"端口1","portId":"11c8ba71-e7cc-41ee-b7d3-cd2814e26f0f","alignment":"0.7939024142622645 0.4946518480722313 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":"端口2","portId":"256b782d-5870-4e05-94ff-34f130c5060e","alignment":"0.5 0 0 0","fromLinkable":true,"toLinkable":true,"fromMaxLinks":999,"toMaxLinks":999,"fromSpot":"0.5 0 0 0","toSpot":"0.5 0 0 0","isHighlighted":false},{"name":"端口3","portId":"dcd15cc2-ec1b-4a35-b861-377b6f75d0b9","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"}]},
{"name":"冷却器","nodeCollection":"ammonia","img":"src/assets/models/ammonia/冷却器.svg","category":"svg","key":-5,"loc":"-250 -330","size":"97.77777777777777 40","portArray":[{"name":"端口1","portId":"51b9d16b-8eea-4c4e-92a2-5bb9d99d294f","alignment":"0 0.5 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":"a8e9572b-53fb-4791-a173-e272c28bc8af","alignment":"1 0.5 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":"压缩机","nodeCollection":"ammonia","img":"src/assets/models/ammonia/压缩机.svg","category":"svg","key":-7,"loc":"-457.5 -60","size":"80 65.625","portArray":[{"name":"端口1","portId":"55950fe5-ebe1-4d75-b6b4-30da5e97af17","alignment":"0 0.5 0 0","fromLinkable":true,"toLinkable":true,"fromMaxLinks":"0","toMaxLinks":"1","fromSpot":"0 0.5 0 0","toSpot":"0 0.5 0 0","isHighlighted":false},{"name":"端口2","portId":"4226d10a-0eb2-4c7a-b839-287003f573ff","alignment":"0.5200892857142833 0.09365079365079423 0 0","fromLinkable":true,"toLinkable":true,"fromMaxLinks":999,"toMaxLinks":999,"fromSpot":"0.5 0 0 0","toSpot":"0.5 0 0 0","isHighlighted":false},{"name":"端口3","portId":"3f0de33c-e4c4-4187-b7bf-d8192b0708d9","alignment":"1 0.5 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":"冷却器-2","nodeCollection":"ammonia","img":"src/assets/models/ammonia/冷却器-2.svg","category":"svg","key":-6,"loc":"-263 -70.3125","size":"100 40","portArray":[{"name":"端口1","portId":"0be6a460-df3a-423f-be3d-b38a4adead36","alignment":"0.11857314993877253 0 0 0","fromLinkable":true,"toLinkable":true,"fromMaxLinks":999,"toMaxLinks":999,"fromSpot":"0.5 0 0 0","toSpot":"0.5 0 0 0","isHighlighted":false},{"name":"端口2","portId":"0d7b8599-993d-4474-9fb7-a1f1425cbe32","alignment":"0.11857314993877253 1 0 0","fromLinkable":true,"toLinkable":true,"fromMaxLinks":999,"toMaxLinks":999,"fromSpot":"0.5 1 0 0","toSpot":"0.5 1 0 0"}]},
{"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":-2,"loc":"-180 -200","angle":180},
{"name":"换热器","nodeCollection":"ammonia","img":"src/assets/models/ammonia/换热器.svg","category":"svg","key":-3,"loc":"20 -100","size":"135.51724137931035 30.000000000000004","portArray":[{"name":"端口1","portId":"e8cd7aef-9139-480c-ade2-1ef79cc4261d","alignment":"0 0.47043270833333206 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":"fdc201ee-d40d-4d87-bd11-df445f3f976d","alignment":"0.4984260146753545 0 0 0","fromLinkable":true,"toLinkable":true,"fromMaxLinks":999,"toMaxLinks":999,"fromSpot":"0.5 0 0 0","toSpot":"0.5 0 0 0","isHighlighted":false},{"name":"端口3","portId":"17fac662-e52f-43de-8c27-d24452d9ed2a","alignment":"1 0.4299158333333329 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":"端口4","portId":"2b860c7b-eafc-49b2-90ba-d32d007a2e7b","alignment":"0.4984260146753545 1 0 0","fromLinkable":true,"toLinkable":true,"fromMaxLinks":999,"toMaxLinks":999,"fromSpot":"0.5 1 0 0","toSpot":"0.5 1 0 0"}]},
{"name":"换热器","nodeCollection":"ammonia","img":"src/assets/models/ammonia/换热器.svg","category":"svg","key":-8,"loc":"20 10","size":"135.51724137931035 30.000000000000004","portArray":[{"name":"端口2","portId":"fdc201ee-d40d-4d87-bd11-df445f3f976d","alignment":"0.5 0 0 0","fromLinkable":true,"toLinkable":true,"fromMaxLinks":999,"toMaxLinks":999,"fromSpot":"0.5 0 0 0","toSpot":"0.5 0 0 0","isHighlighted":false},{"name":"端口3","portId":"17fac662-e52f-43de-8c27-d24452d9ed2a","alignment":"1 0.5301687499999994 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":"冷却器","nodeCollection":"ammonia","img":"src/assets/models/ammonia/冷却器.svg","category":"svg","key":-9,"loc":"250 100","portArray":[{"name":"端口1","portId":"d5501d1f-5fa8-4d71-8a77-37c64482de72","alignment":"0.5 0 0 0","fromLinkable":true,"toLinkable":true,"fromMaxLinks":999,"toMaxLinks":999,"fromSpot":"0.5 0 0 0","toSpot":"0.5 0 0 0","isHighlighted":false},{"name":"端口2","portId":"d17eb676-1f01-43f1-b658-b16fde8e4159","alignment":"0 0.5 0 0","fromLinkable":true,"toLinkable":true,"fromMaxLinks":999,"toMaxLinks":999,"fromSpot":"0 0.5 0 0","toSpot":"0 0.5 0 0"},{"name":"端口3","portId":"96dee2d1-babb-4b4d-b5cb-0bafad3131d9","alignment":"0.5 1 0 0","fromLinkable":true,"toLinkable":true,"fromMaxLinks":"1","toMaxLinks":"0","fromSpot":"0.5 1 0 0","toSpot":"0.5 1 0 0","isHighlighted":false}]},
{"name":"冷却器-2","nodeCollection":"ammonia","img":"src/assets/models/ammonia/冷却器-2.svg","category":"svg","key":-10,"loc":"20 -400","portArray":[{"name":"端口1","portId":"16d8e009-b1b1-45c2-a94f-1a90943ee090","alignment":"1 0.5 0 0","fromLinkable":true,"toLinkable":true,"fromMaxLinks":999,"toMaxLinks":999,"fromSpot":"1 0.5 0 0","toSpot":"1 0.5 0 0"},{"name":"端口2","portId":"ba564564-2ac8-48da-a430-3af06ea4997d","alignment":"0.5 0 0 0","fromLinkable":true,"toLinkable":true,"fromMaxLinks":999,"toMaxLinks":999,"fromSpot":"0.5 0 0 0","toSpot":"0.5 0 0 0"}],"angle":90},
{"name":"合成塔","nodeCollection":"ammonia","img":"src/assets/models/ammonia/合成塔.svg","category":"svg","key":-11,"loc":"220 -460","portArray":[{"name":"端口1","portId":"415f271d-1dd7-415f-ab4f-d5a7221b095a","alignment":"0.9735206395348852 0.9054140969669111 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":"端口2","portId":"ab215031-702e-4d22-9663-8c4f631c19ed","alignment":"0.8675171875000016 0.23956692325367507 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":"ec58dcb4-39fb-400e-bb0e-018ecee51d56","alignment":"0.5 0 0 0","fromLinkable":true,"toLinkable":true,"fromMaxLinks":999,"toMaxLinks":999,"fromSpot":"0.5 0 0 0","toSpot":"0.5 0 0 0","isHighlighted":false}]},
{"name":"开工炉","nodeCollection":"ammonia","img":"src/assets/models/ammonia/开工炉.svg","category":"svg","key":-4,"loc":"470 -441.25","portArray":[{"name":"端口1","portId":"3a24769a-5f3a-49e6-953d-a5e1fce7e8be","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"},{"name":"端口2","portId":"58c1fc66-36b0-4e21-af4f-85e52828ac76","alignment":"0.19673376572327342 0.33276178892215375 0 0","fromLinkable":true,"toLinkable":true,"fromMaxLinks":999,"toMaxLinks":999,"fromSpot":"0 0.5 0 0","toSpot":"0 0.5 0 0"}]},
{"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":-12,"loc":"470 -114.5625","angle":180},
{"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":-13,"loc":"680 -240","angle":90},
{"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":-2,"to":-1,"fromPort":"port1","toPort":"0b897516-0022-4797-82ce-e8899dc189ea","points":[67.5,-180,57.5,-180,-220,-180,-220,-121.25,-220,-62.5,-220,-52.5]}]
}
"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]},
{"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":"燃料气"},
{"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":"氨产品"},
{"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]},
{"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]},
{"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]},
{"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":""},
{"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]},
{"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]},
{"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]},
{"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]},
{"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.786697850832525,-44.375,19.786697850832525,-72.5,19.786697850832525,-82.5]},
{"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]},
{"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]},
{"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]},
{"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]},
{"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]},
{"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]},
{"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.4255937500008,295.7129562500003,-600.4255937500008,285.7129562500003,-600.4255937500008]},
{"from":-10,"to":-11,"fromPort":"ba564564-2ac8-48da-a430-3af06ea4997d","toPort":"ec58dcb4-39fb-400e-bb0e-018ecee51d56","points":[48.25,-401.25,58.25,-401.25,92.125,-401.25,92.125,-743.25,220,-743.25,220,-733.25]},
{"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]}
]}
myDiagram.model = go.Model.fromJson(json)
}
......@@ -293,7 +340,21 @@ function listenDiagram(){
myDiagram.addDiagramListener('Modified', ()=>{
})
myDiagram.addDiagramListener('ChangedSelection', ()=>{
freshSelectionNode()
console.log(myDiagram.selection.first())
let currentSelected = myDiagram.selection.first()
if (currentSelected === null) {
ifSelectNode.value = false
ifSelectLink.value = false
return
}
// 存在 key 说明是节点
if(currentSelected.data.key){
freshSelectionNode()
}
// 存在 points 说明是连接线
else if(currentSelected.data.points){
freshSelectionLink()
}
})
}
......@@ -310,6 +371,12 @@ function freshSelectionNode(){
triggerRef(nodePortArray)
}
function freshSelectionLink(){
let selectedLinkData = myDiagram.selection.first()?.data
selectedLink.value = myDiagram.findLinkForData(selectedLinkData)
ifSelectLink.value = selectedLink.value !== null;
}
// 右侧info-panel相关函数
function initInspector(){
inspector = new Inspector('inspector-property', myDiagram,
......@@ -342,7 +409,6 @@ function confirmAddPort(){
let node = myDiagram.findNodeForData(selectedNode.value.data) as go.Node
if(!node.data.portArray) {
node.data.portArray = []
// node.updateTargetBindings('portArray')
}
let newPort = {
name: addPortForm.value.name,
......@@ -350,14 +416,14 @@ function confirmAddPort(){
alignment:addPortForm.value.type,
fromLinkable: addPortForm.value.fromLinkable,
toLinkable: addPortForm.value.toLinkable,
maxLinks: addPortForm.value.maxLinks,
fromMaxLinks: addPortForm.value.fromMaxLinks?addPortForm.value.fromMaxLinks:999,
toMaxLinks: addPortForm.value.toMaxLinks?addPortForm.value.toMaxLinks:999,
fromSpot: addPortForm.value.type,
toSpot: addPortForm.value.type,
}
let portArray = node.data.portArray
portArray.push(newPort)
// myDiagram.model.insertArrayItem(portArray, -1, newPort);
myDiagram.model.setDataProperty(node.data, 'portArray', portArray)
myDiagram.model.setDataProperty(node.data, 'portArray', portArray)
node.updateTargetBindings('portArray')
freshSelectionNode()
myDiagram.commitTransaction("addPort");
......@@ -374,7 +440,8 @@ function editPort(portId:string){
name:port.name,
toLinkable: port.toLinkable,
fromLinkable: port.fromLinkable,
maxLinks: port.maxLinks
fromMaxLinks: port.fromMaxLinks?port.fromMaxLinks:999,
toMaxLinks: port.toMaxLinks?port.toMaxLinks:999,
}
}
})
......@@ -390,7 +457,8 @@ function confirmEditPort(){
myDiagram.model.setDataProperty(port, 'name', editPortForm.value.name)
myDiagram.model.setDataProperty(port, 'toLinkable', editPortForm.value.toLinkable)
myDiagram.model.setDataProperty(port, 'fromLinkable', editPortForm.value.fromLinkable)
myDiagram.model.setDataProperty(port, 'maxLinks', editPortForm.value.maxLinks)
myDiagram.model.setDataProperty(port, 'fromMaxLinks', editPortForm.value.fromMaxLinks)
myDiagram.model.setDataProperty(port, 'toMaxLinks', editPortForm.value.toMaxLinks)
}
})
myDiagram.commitTransaction('commitPortInfo')
......@@ -482,7 +550,7 @@ window.onresize = function (){
}
.inspector select {
background-color: #424242;
background-color: white;
}
.el-tabs--border-card > .el-tabs__content {
......
src/assets/models/ammonia/冷却器-2.svg
<svg width="265" height="260" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" overflow="hidden"><g transform="translate(-1002 -119)"><path d="M1046.33 203.5 1181.95 203.5 1222.67 203.5 1264.5 203.5 1264.5 244.5 1264.5 285.5 1222.67 285.5 1181.95 285.5 1046.33 285.5C1023.23 285.5 1004.5 267.145 1004.5 244.5 1004.5 221.855 1023.23 203.5 1046.33 203.5Z" stroke="#000000" stroke-width="4.58333" stroke-linejoin="round" stroke-miterlimit="10" fill="#FFFFFF" fill-rule="evenodd"/><path d="M1222.5 203.5 1222.5 286" stroke="#000000" stroke-width="4.58333" stroke-linejoin="round" stroke-miterlimit="10" fill="#FFFFFF" fill-rule="evenodd"/></g></svg>
<svg width="164" height="54" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" overflow="hidden"><g transform="translate(-728 -451)"><path d="M755.063 452 864.938 452C879.331 452 891 463.641 891 478 891 492.359 879.331 504 864.938 504L755.063 504C740.669 504 729 492.359 729 478 729 463.641 740.669 452 755.063 452Z" stroke="#000000" stroke-width="2.29167" stroke-miterlimit="8" fill="#FFFFFF" fill-rule="evenodd"/><rect x="729" y="452" width="31.9999" height="51.9999" stroke="#000000" stroke-width="2.29167" stroke-miterlimit="8" fill="#FFFFFF"/></g></svg>
<svg width="265" height="260" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" overflow="hidden"><g transform="translate(-1002 -119)"><path d="M1046.33 203.5 1181.95 203.5 1222.67 203.5 1264.5 203.5 1264.5 244.5 1264.5 285.5 1222.67 285.5 1181.95 285.5 1046.33 285.5C1023.23 285.5 1004.5 267.145 1004.5 244.5 1004.5 221.855 1023.23 203.5 1046.33 203.5Z" stroke="#000000" stroke-width="4.58333" stroke-linejoin="round" stroke-miterlimit="10" fill="#FFFFFF" fill-rule="evenodd"/><path d="M1222.5 203.5 1222.5 286" stroke="#000000" stroke-width="4.58333" stroke-linejoin="round" stroke-miterlimit="10" fill="#FFFFFF" fill-rule="evenodd"/></g></svg>
\ No newline at end of file
<svg width="164" height="54" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" overflow="hidden"><g transform="translate(-728 -451)"><path d="M755.063 452 864.938 452C879.331 452 891 463.641 891 478 891 492.359 879.331 504 864.938 504L755.063 504C740.669 504 729 492.359 729 478 729 463.641 740.669 452 755.063 452Z" stroke="#000000" stroke-width="2.29167" stroke-miterlimit="8" fill="#FFFFFF" fill-rule="evenodd"/><rect x="729" y="452" width="31.9999" height="51.9999" stroke="#000000" stroke-width="2.29167" stroke-miterlimit="8" fill="#FFFFFF"/></g></svg>
\ No newline at end of file
src/assets/models/ammonia/冷却器.svg
<svg width="265" height="259" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" overflow="hidden"><g transform="translate(-562 -107)"><path d="M606.329 204.5 782.671 204.5C805.773 204.5 824.5 222.185 824.5 244 824.5 265.815 805.773 283.5 782.671 283.5L606.329 283.5C583.227 283.5 564.5 265.815 564.5 244 564.5 222.185 583.227 204.5 606.329 204.5Z" stroke="#1C334E" stroke-width="4.58333" stroke-linejoin="round" stroke-miterlimit="10" fill="#FFFFFF" fill-rule="evenodd"/></g></svg>
<svg width="132" height="54" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" overflow="hidden"><g transform="translate(-473 -451)"><path d="M494.914 452 583.086 452C594.636 452 604 463.641 604 478 604 492.359 594.636 504 583.086 504L494.914 504C483.364 504 474 492.359 474 478 474 463.641 483.364 452 494.914 452Z" stroke="#000000" stroke-width="2.29167" stroke-miterlimit="8" fill="#FFFFFF" fill-rule="evenodd"/></g></svg>
<svg width="265" height="259" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" overflow="hidden"><g transform="translate(-562 -107)"><path d="M606.329 204.5 782.671 204.5C805.773 204.5 824.5 222.185 824.5 244 824.5 265.815 805.773 283.5 782.671 283.5L606.329 283.5C583.227 283.5 564.5 265.815 564.5 244 564.5 222.185 583.227 204.5 606.329 204.5Z" stroke="#1C334E" stroke-width="4.58333" stroke-linejoin="round" stroke-miterlimit="10" fill="#FFFFFF" fill-rule="evenodd"/></g></svg>
\ No newline at end of file
<svg width="132" height="54" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" overflow="hidden"><g transform="translate(-473 -451)"><path d="M494.914 452 583.086 452C594.636 452 604 463.641 604 478 604 492.359 594.636 504 583.086 504L494.914 504C483.364 504 474 492.359 474 478 474 463.641 483.364 452 494.914 452Z" stroke="#000000" stroke-width="2.29167" stroke-miterlimit="8" fill="#FFFFFF" fill-rule="evenodd"/></g></svg>
\ No newline at end of file
src/assets/models/ammonia/压缩机.svg
<svg width="265" height="265" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" overflow="hidden"><g transform="translate(-94 -117)"><path d="M96.5001 379.5 161.5 119.5 291.5 119.5 356.5 379.5Z" stroke="#000000" stroke-width="4.58333" stroke-linejoin="round" stroke-miterlimit="10" fill="#FFFFFF" fill-rule="evenodd"/></g></svg>
<svg width="128" height="105" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" overflow="hidden"><g transform="translate(-1014 -420)"><path d="M1015 523 1015 422 1141 442.2 1141 502.8Z" stroke="#000000" stroke-width="2.29167" stroke-miterlimit="8" fill="#FFFFFF" fill-rule="evenodd"/></g></svg>
<svg width="265" height="265" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" overflow="hidden"><g transform="translate(-94 -117)"><path d="M96.5001 379.5 161.5 119.5 291.5 119.5 356.5 379.5Z" stroke="#000000" stroke-width="4.58333" stroke-linejoin="round" stroke-miterlimit="10" fill="#FFFFFF" fill-rule="evenodd"/></g></svg>
\ No newline at end of file
<svg width="128" height="105" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" overflow="hidden"><g transform="translate(-1014 -420)"><path d="M1015 523 1015 422 1141 442.2 1141 502.8Z" stroke="#000000" stroke-width="2.29167" stroke-miterlimit="8" fill="#FFFFFF" fill-rule="evenodd"/></g></svg>
\ No newline at end of file
src/assets/models/ammonia/合成塔.svg
<svg width="649" height="655" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" overflow="hidden"><g transform="translate(-57 -761)"><path d="M382 763.5C414.65 763.5 441.116 781.152 441.116 802.922L441.116 939.913 447.138 942.102C478.127 956.116 498.5 979.849 498.5 1006.76L498.5 1335.52C498.5 1378.58 446.345 1413.5 382 1413.5 317.655 1413.5 265.5 1378.58 265.5 1335.52L265.5 1006.76C265.5 979.849 285.873 956.116 316.862 942.101L322.883 939.914 322.883 802.922C322.883 781.152 349.349 763.5 382 763.5Z" stroke="#000000" stroke-width="4.58333" stroke-linejoin="round" stroke-miterlimit="10" fill="#FFFFFF" fill-rule="evenodd"/><rect x="339.5" y="818.5" width="82.9998" height="165" stroke="#000000" stroke-width="4.58333" stroke-linejoin="round" stroke-miterlimit="10" fill="#FFFFFF"/><path d="M458.5 1018.44 458.5 1219.26 458.5 1279.56 458.5 1341.5 380.5 1341.5 302.5 1341.5 302.5 1279.56 302.5 1219.26 302.5 1018.44C302.5 984.235 337.419 956.5 380.5 956.5 423.58 956.5 458.5 984.235 458.5 1018.44Z" stroke="#000000" stroke-width="4.58333" stroke-linejoin="round" stroke-miterlimit="10" fill="#FFFFFF" fill-rule="evenodd"/><rect x="302.5" y="1148.5" width="156" height="156" stroke="#000000" stroke-width="4.58333" stroke-linejoin="round" stroke-miterlimit="10" fill="#FFFFFF"/><path d="M302.5 1148.5 458.405 1304.41" stroke="#000000" stroke-width="4.58333" stroke-linejoin="round" stroke-miterlimit="10" fill="#FFFFFF" fill-rule="evenodd"/><path d="M0 0 155.905 155.906" stroke="#000000" stroke-width="4.58333" stroke-linejoin="round" stroke-miterlimit="10" fill="#FFFFFF" fill-rule="evenodd" transform="matrix(1 0 0 -1 302.5 1304.41)"/><rect x="302.5" y="1072.5" width="156" height="62.9999" stroke="#000000" stroke-width="4.58333" stroke-linejoin="round" stroke-miterlimit="10" fill="#FFFFFF"/><path d="M302.5 1072.5 458.405 1135.51" stroke="#000000" stroke-width="4.58333" stroke-linejoin="round" stroke-miterlimit="10" fill="#FFFFFF" fill-rule="evenodd"/><path d="M0 0 155.905 63.0114" stroke="#000000" stroke-width="4.58333" stroke-linejoin="round" stroke-miterlimit="10" fill="#FFFFFF" fill-rule="evenodd" transform="matrix(1 0 0 -1 302.5 1135.51)"/><rect x="302.5" y="1011.5" width="156" height="45.9997" stroke="#000000" stroke-width="4.58333" stroke-linejoin="round" stroke-miterlimit="10" fill="#FFFFFF"/><path d="M302.5 1011.5 458.405 1057.41" stroke="#000000" stroke-width="4.58333" stroke-linejoin="round" stroke-miterlimit="10" fill="#FFFFFF" fill-rule="evenodd"/><path d="M0 0 155.905 45.9055" stroke="#000000" stroke-width="4.58333" stroke-linejoin="round" stroke-miterlimit="10" fill="#FFFFFF" fill-rule="evenodd" transform="matrix(1 0 0 -1 302.5 1057.41)"/></g></svg>
<svg width="172" height="544" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" overflow="hidden"><g transform="translate(-2038 -129)"><path d="M2124 130C2145.43 130 2162.8 142.406 2162.8 157.707L2162.8 245.134 2184.1 256.974C2199.49 269.655 2209 287.173 2209 306.521L2209 601.929C2209 640.624 2170.95 672 2124 672 2077.05 672 2039 640.624 2039 601.929L2039 306.521C2039 287.173 2048.51 269.655 2063.9 256.974L2085.2 245.134 2085.2 157.707C2085.2 142.406 2102.57 130 2124 130Z" stroke="#000000" stroke-width="2.29167" stroke-miterlimit="8" fill="#FFFFFF" fill-rule="evenodd"/><rect x="2097" y="156" width="55" height="147" stroke="#000000" stroke-width="2.29167" stroke-miterlimit="8" fill="#FFFFFF"/><path d="M2124.5 251C2162.89 251 2194 282.85 2194 322.129L2194 621.999 2194 622 2194 620.875 2055 620.875 2055 322.129C2055 282.85 2086.11 251 2124.5 251Z" stroke="#000000" stroke-width="2.29167" stroke-miterlimit="8" fill="#FFFFFF" fill-rule="evenodd"/><rect x="2055" y="494" width="139" height="110" stroke="#000000" stroke-width="2.29167" stroke-miterlimit="8" fill="#FFFFFF"/><path d="M2055 494 2193.75 603.258" stroke="#000000" stroke-width="2.29167" stroke-miterlimit="8" fill="none" fill-rule="evenodd"/><path d="M0 0 138.753 109.543" stroke="#000000" stroke-width="2.29167" stroke-miterlimit="8" fill="none" fill-rule="evenodd" transform="matrix(1 0 0 -1 2055 603.543)"/><rect x="2055" y="437" width="139" height="39.0002" stroke="#000000" stroke-width="2.29167" stroke-miterlimit="8" fill="#FFFFFF"/><path d="M2055 437 2193.75 475.792" stroke="#000000" stroke-width="2.29167" stroke-miterlimit="8" fill="none" fill-rule="evenodd"/><path d="M0 0 138.753 38.8927" stroke="#000000" stroke-width="2.29167" stroke-miterlimit="8" fill="none" fill-rule="evenodd" transform="matrix(1 0 0 -1 2055 475.893)"/><rect x="2055" y="381" width="139" height="38.0002" stroke="#000000" stroke-width="2.29167" stroke-miterlimit="8" fill="#FFFFFF"/><path d="M2055 381 2193.75 419.791" stroke="#000000" stroke-width="2.29167" stroke-miterlimit="8" fill="none" fill-rule="evenodd"/><path d="M0 0 138.753 38.8927" stroke="#000000" stroke-width="2.29167" stroke-miterlimit="8" fill="none" fill-rule="evenodd" transform="matrix(1 0 0 -1 2055 419.893)"/><rect x="2055" y="324" width="139" height="38.9998" stroke="#000000" stroke-width="2.29167" stroke-miterlimit="8" fill="#FFFFFF"/><path d="M2055 324 2193.75 362.792" stroke="#000000" stroke-width="2.29167" stroke-miterlimit="8" fill="none" fill-rule="evenodd"/><path d="M0 0 138.753 38.8927" stroke="#000000" stroke-width="2.29167" stroke-miterlimit="8" fill="none" fill-rule="evenodd" transform="matrix(1 0 0 -1 2055 362.893)"/></g></svg>
<svg width="649" height="655" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" overflow="hidden"><g transform="translate(-57 -761)"><path d="M382 763.5C414.65 763.5 441.116 781.152 441.116 802.922L441.116 939.913 447.138 942.102C478.127 956.116 498.5 979.849 498.5 1006.76L498.5 1335.52C498.5 1378.58 446.345 1413.5 382 1413.5 317.655 1413.5 265.5 1378.58 265.5 1335.52L265.5 1006.76C265.5 979.849 285.873 956.116 316.862 942.101L322.883 939.914 322.883 802.922C322.883 781.152 349.349 763.5 382 763.5Z" stroke="#000000" stroke-width="4.58333" stroke-linejoin="round" stroke-miterlimit="10" fill="#FFFFFF" fill-rule="evenodd"/><rect x="339.5" y="818.5" width="82.9998" height="165" stroke="#000000" stroke-width="4.58333" stroke-linejoin="round" stroke-miterlimit="10" fill="#FFFFFF"/><path d="M458.5 1018.44 458.5 1219.26 458.5 1279.56 458.5 1341.5 380.5 1341.5 302.5 1341.5 302.5 1279.56 302.5 1219.26 302.5 1018.44C302.5 984.235 337.419 956.5 380.5 956.5 423.58 956.5 458.5 984.235 458.5 1018.44Z" stroke="#000000" stroke-width="4.58333" stroke-linejoin="round" stroke-miterlimit="10" fill="#FFFFFF" fill-rule="evenodd"/><rect x="302.5" y="1148.5" width="156" height="156" stroke="#000000" stroke-width="4.58333" stroke-linejoin="round" stroke-miterlimit="10" fill="#FFFFFF"/><path d="M302.5 1148.5 458.405 1304.41" stroke="#000000" stroke-width="4.58333" stroke-linejoin="round" stroke-miterlimit="10" fill="#FFFFFF" fill-rule="evenodd"/><path d="M0 0 155.905 155.906" stroke="#000000" stroke-width="4.58333" stroke-linejoin="round" stroke-miterlimit="10" fill="#FFFFFF" fill-rule="evenodd" transform="matrix(1 0 0 -1 302.5 1304.41)"/><rect x="302.5" y="1072.5" width="156" height="62.9999" stroke="#000000" stroke-width="4.58333" stroke-linejoin="round" stroke-miterlimit="10" fill="#FFFFFF"/><path d="M302.5 1072.5 458.405 1135.51" stroke="#000000" stroke-width="4.58333" stroke-linejoin="round" stroke-miterlimit="10" fill="#FFFFFF" fill-rule="evenodd"/><path d="M0 0 155.905 63.0114" stroke="#000000" stroke-width="4.58333" stroke-linejoin="round" stroke-miterlimit="10" fill="#FFFFFF" fill-rule="evenodd" transform="matrix(1 0 0 -1 302.5 1135.51)"/><rect x="302.5" y="1011.5" width="156" height="45.9997" stroke="#000000" stroke-width="4.58333" stroke-linejoin="round" stroke-miterlimit="10" fill="#FFFFFF"/><path d="M302.5 1011.5 458.405 1057.41" stroke="#000000" stroke-width="4.58333" stroke-linejoin="round" stroke-miterlimit="10" fill="#FFFFFF" fill-rule="evenodd"/><path d="M0 0 155.905 45.9055" stroke="#000000" stroke-width="4.58333" stroke-linejoin="round" stroke-miterlimit="10" fill="#FFFFFF" fill-rule="evenodd" transform="matrix(1 0 0 -1 302.5 1057.41)"/></g></svg>
\ No newline at end of file
<svg width="172" height="544" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" overflow="hidden"><g transform="translate(-2038 -129)"><path d="M2124 130C2145.43 130 2162.8 142.406 2162.8 157.707L2162.8 245.134 2184.1 256.974C2199.49 269.655 2209 287.173 2209 306.521L2209 601.929C2209 640.624 2170.95 672 2124 672 2077.05 672 2039 640.624 2039 601.929L2039 306.521C2039 287.173 2048.51 269.655 2063.9 256.974L2085.2 245.134 2085.2 157.707C2085.2 142.406 2102.57 130 2124 130Z" stroke="#000000" stroke-width="2.29167" stroke-miterlimit="8" fill="#FFFFFF" fill-rule="evenodd"/><rect x="2097" y="156" width="55" height="147" stroke="#000000" stroke-width="2.29167" stroke-miterlimit="8" fill="#FFFFFF"/><path d="M2124.5 251C2162.89 251 2194 282.85 2194 322.129L2194 621.999 2194 622 2194 620.875 2055 620.875 2055 322.129C2055 282.85 2086.11 251 2124.5 251Z" stroke="#000000" stroke-width="2.29167" stroke-miterlimit="8" fill="#FFFFFF" fill-rule="evenodd"/><rect x="2055" y="494" width="139" height="110" stroke="#000000" stroke-width="2.29167" stroke-miterlimit="8" fill="#FFFFFF"/><path d="M2055 494 2193.75 603.258" stroke="#000000" stroke-width="2.29167" stroke-miterlimit="8" fill="none" fill-rule="evenodd"/><path d="M0 0 138.753 109.543" stroke="#000000" stroke-width="2.29167" stroke-miterlimit="8" fill="none" fill-rule="evenodd" transform="matrix(1 0 0 -1 2055 603.543)"/><rect x="2055" y="437" width="139" height="39.0002" stroke="#000000" stroke-width="2.29167" stroke-miterlimit="8" fill="#FFFFFF"/><path d="M2055 437 2193.75 475.792" stroke="#000000" stroke-width="2.29167" stroke-miterlimit="8" fill="none" fill-rule="evenodd"/><path d="M0 0 138.753 38.8927" stroke="#000000" stroke-width="2.29167" stroke-miterlimit="8" fill="none" fill-rule="evenodd" transform="matrix(1 0 0 -1 2055 475.893)"/><rect x="2055" y="381" width="139" height="38.0002" stroke="#000000" stroke-width="2.29167" stroke-miterlimit="8" fill="#FFFFFF"/><path d="M2055 381 2193.75 419.791" stroke="#000000" stroke-width="2.29167" stroke-miterlimit="8" fill="none" fill-rule="evenodd"/><path d="M0 0 138.753 38.8927" stroke="#000000" stroke-width="2.29167" stroke-miterlimit="8" fill="none" fill-rule="evenodd" transform="matrix(1 0 0 -1 2055 419.893)"/><rect x="2055" y="324" width="139" height="38.9998" stroke="#000000" stroke-width="2.29167" stroke-miterlimit="8" fill="#FFFFFF"/><path d="M2055 324 2193.75 362.792" stroke="#000000" stroke-width="2.29167" stroke-miterlimit="8" fill="none" fill-rule="evenodd"/><path d="M0 0 138.753 38.8927" stroke="#000000" stroke-width="2.29167" stroke-miterlimit="8" fill="none" fill-rule="evenodd" transform="matrix(1 0 0 -1 2055 362.893)"/></g></svg>
\ No newline at end of file
src/assets/models/ammonia/开工炉.svg
<svg width="390" height="394" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" overflow="hidden"><g transform="translate(-809 -899)"><path d="M943.521 901.5 1064.48 901.5 1064.48 1004.3 1066.33 1004.3 1097.5 1035.45 1097.5 1290.5 910.5 1290.5 910.5 1035.45 941.667 1004.3 943.521 1004.3Z" stroke="#1C334E" stroke-width="4.58333" stroke-linejoin="round" stroke-miterlimit="10" fill="#FFFFFF" fill-rule="evenodd"/><path d="M931.5 1033.36 1066.2 1032.5 938.364 1103.64 1072.21 1097.64 941.796 1172.21 1076.5 1169.64 940.938 1233.93 1071.35 1229.64 993.275 1290.5" stroke="#1C334E" stroke-width="4.58333" stroke-linejoin="round" stroke-miterlimit="10" fill="none" fill-rule="evenodd"/></g></svg>
<svg width="159" height="334" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" overflow="hidden"><g transform="translate(-1768 -191)"><path d="M1815.49 192 1879.51 192 1879.51 285.908 1880.1 285.908 1926 337.357 1926 523 1769 523 1769 337.357 1814.9 285.908 1815.49 285.908Z" stroke="#000000" stroke-width="2.29167" stroke-miterlimit="8" fill="#FFFFFF" fill-rule="evenodd"/><path d="M1799 304 1815.69 334 1896 331 1815.69 369 1888.7 367 1820.9 409 1883.48 408 1829.25 451 1879.31 449 1819.86 481 1894.96 479 1846.98 522 1846.98 521 1846.98 521" stroke="#172C51" stroke-width="2.29167" stroke-miterlimit="8" fill="none" fill-rule="evenodd"/></g></svg>
<svg width="390" height="394" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" overflow="hidden"><g transform="translate(-809 -899)"><path d="M943.521 901.5 1064.48 901.5 1064.48 1004.3 1066.33 1004.3 1097.5 1035.45 1097.5 1290.5 910.5 1290.5 910.5 1035.45 941.667 1004.3 943.521 1004.3Z" stroke="#1C334E" stroke-width="4.58333" stroke-linejoin="round" stroke-miterlimit="10" fill="#FFFFFF" fill-rule="evenodd"/><path d="M931.5 1033.36 1066.2 1032.5 938.364 1103.64 1072.21 1097.64 941.796 1172.21 1076.5 1169.64 940.938 1233.93 1071.35 1229.64 993.275 1290.5" stroke="#1C334E" stroke-width="4.58333" stroke-linejoin="round" stroke-miterlimit="10" fill="none" fill-rule="evenodd"/></g></svg>
\ No newline at end of file
<svg width="159" height="334" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" overflow="hidden"><g transform="translate(-1768 -191)"><path d="M1815.49 192 1879.51 192 1879.51 285.908 1880.1 285.908 1926 337.357 1926 523 1769 523 1769 337.357 1814.9 285.908 1815.49 285.908Z" stroke="#000000" stroke-width="2.29167" stroke-miterlimit="8" fill="#FFFFFF" fill-rule="evenodd"/><path d="M1799 304 1815.69 334 1896 331 1815.69 369 1888.7 367 1820.9 409 1883.48 408 1829.25 451 1879.31 449 1819.86 481 1894.96 479 1846.98 522 1846.98 521 1846.98 521" stroke="#172C51" stroke-width="2.29167" stroke-miterlimit="8" fill="none" fill-rule="evenodd"/></g></svg>
\ No newline at end of file
src/assets/models/ammonia/换热器.svg
<svg width="265" height="260" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" overflow="hidden"><g transform="translate(-1387 -114)"><rect x="1389.5" y="202.5" width="260" height="83.0002" stroke="#1C334E" stroke-width="4.58333" stroke-linejoin="round" stroke-miterlimit="10" fill="#FFFFFF"/><rect x="1418.5" y="202.5" width="201" height="83.0002" stroke="#1C334E" stroke-width="4.58333" stroke-linejoin="round" stroke-miterlimit="10" fill="#FFFFFF"/></g></svg>
<svg width="262" height="58" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" overflow="hidden"><g transform="translate(-1208 -447)"><rect x="1209" y="448" width="27.0001" height="56" stroke="#000000" stroke-width="2.29167" stroke-miterlimit="8" fill="#FFFFFF"/><rect x="1441" y="448" width="27.9999" height="56" stroke="#000000" stroke-width="2.29167" stroke-miterlimit="8" fill="#FFFFFF"/><rect x="1236" y="448" width="205" height="56" stroke="#000000" stroke-width="2.29167" stroke-miterlimit="8" fill="#FFFFFF"/></g></svg>
<svg width="265" height="260" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" overflow="hidden"><g transform="translate(-1387 -114)"><rect x="1389.5" y="202.5" width="260" height="83.0002" stroke="#1C334E" stroke-width="4.58333" stroke-linejoin="round" stroke-miterlimit="10" fill="#FFFFFF"/><rect x="1418.5" y="202.5" width="201" height="83.0002" stroke="#1C334E" stroke-width="4.58333" stroke-linejoin="round" stroke-miterlimit="10" fill="#FFFFFF"/></g></svg>
\ No newline at end of file
<svg width="262" height="58" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" overflow="hidden"><g transform="translate(-1208 -447)"><rect x="1209" y="448" width="27.0001" height="56" stroke="#000000" stroke-width="2.29167" stroke-miterlimit="8" fill="#FFFFFF"/><rect x="1441" y="448" width="27.9999" height="56" stroke="#000000" stroke-width="2.29167" stroke-miterlimit="8" fill="#FFFFFF"/><rect x="1236" y="448" width="205" height="56" stroke="#000000" stroke-width="2.29167" stroke-miterlimit="8" fill="#FFFFFF"/></g></svg>
\ No newline at end of file
src/assets/models/ammonia/氨分离罐.svg
<svg width="265" height="260" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" overflow="hidden"><g transform="translate(-1744 -119)"><path d="M1784.15 203.5 1906.2 203.5 1942.85 203.5 1980.5 203.5 1980.5 244.5 1980.5 285.5 1942.85 285.5 1906.2 285.5 1784.15 285.5C1763.36 285.5 1746.5 267.145 1746.5 244.5 1746.5 221.855 1763.36 203.5 1784.15 203.5Z" stroke="#000000" stroke-width="4.58333" stroke-linejoin="round" stroke-miterlimit="10" fill="#FFFFFF" fill-rule="evenodd"/><rect x="1980.5" y="175.5" width="26.0001" height="138" stroke="#000000" stroke-width="4.58333" stroke-linejoin="round" stroke-miterlimit="10" fill="#FFFFFF"/><path d="M1784.5 203.5 1784.5 286" stroke="#000000" stroke-width="4.58333" stroke-linejoin="round" stroke-miterlimit="10" fill="#FFFFFF" fill-rule="evenodd"/></g></svg>
<svg width="181" height="380" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" overflow="hidden"><g transform="translate(-154 -129)"><rect x="155" y="130" width="179" height="48.0001" stroke="#000000" stroke-width="2.29167" stroke-miterlimit="8" fill="#FFFFFF"/><path d="M194 457.5C194 429.61 216.609 407 244.5 407 272.39 407 295 429.61 295 457.5 295 485.39 272.39 508 244.5 508 216.609 508 194 485.39 194 457.5Z" stroke="#000000" stroke-width="2.29167" stroke-miterlimit="8" fill="#FFFFFF" fill-rule="evenodd"/><rect x="194" y="178" width="101" height="274" stroke="#000000" stroke-width="2.29167" stroke-miterlimit="8" fill="#FFFFFF"/></g></svg>
<svg width="265" height="260" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" overflow="hidden"><g transform="translate(-1744 -119)"><path d="M1784.15 203.5 1906.2 203.5 1942.85 203.5 1980.5 203.5 1980.5 244.5 1980.5 285.5 1942.85 285.5 1906.2 285.5 1784.15 285.5C1763.36 285.5 1746.5 267.145 1746.5 244.5 1746.5 221.855 1763.36 203.5 1784.15 203.5Z" stroke="#000000" stroke-width="4.58333" stroke-linejoin="round" stroke-miterlimit="10" fill="#FFFFFF" fill-rule="evenodd"/><rect x="1980.5" y="175.5" width="26.0001" height="138" stroke="#000000" stroke-width="4.58333" stroke-linejoin="round" stroke-miterlimit="10" fill="#FFFFFF"/><path d="M1784.5 203.5 1784.5 286" stroke="#000000" stroke-width="4.58333" stroke-linejoin="round" stroke-miterlimit="10" fill="#FFFFFF" fill-rule="evenodd"/></g></svg>
\ No newline at end of file
<svg width="181" height="380" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" overflow="hidden"><g transform="translate(-154 -129)"><rect x="155" y="130" width="179" height="48.0001" stroke="#000000" stroke-width="2.29167" stroke-miterlimit="8" fill="#FFFFFF"/><path d="M194 457.5C194 429.61 216.609 407 244.5 407 272.39 407 295 429.61 295 457.5 295 485.39 272.39 508 244.5 508 216.609 508 194 485.39 194 457.5Z" stroke="#000000" stroke-width="2.29167" stroke-miterlimit="8" fill="#FFFFFF" fill-rule="evenodd"/><rect x="194" y="178" width="101" height="274" stroke="#000000" stroke-width="2.29167" stroke-miterlimit="8" fill="#FFFFFF"/></g></svg>
\ No newline at end of file
src/kit/ModelData.ts
......@@ -15,7 +15,7 @@ export const SourceNodeCategory: { key: string; name: string; type: string }[] =
]
export const SourceNodeModel = [
//{name: 节点名称, nodeCollection: 节点类别, img: 节点图片路径, geometry: 节点形状, ports: 端口}
//{name: 节点名称, nodeCollection: 节点分类, img: 节点图片路径, geometry: 节点形状, ports: 端口, category: 节点类型}
//svg
//computer
{ name: "电脑", nodeCollection: "computer", img: "src/assets/models/computer/电脑.svg", category:'svg'},
......@@ -42,5 +42,30 @@ export const SourceNodeModel = [
{name:"矩形", nodeCollection: "shape", shape: "Rectangle", fill: "white", stroke:"black", category: 'shape'},
//geometry
{name:"弯头", nodeCollection: "pipe", geometry: "F1 M0 40 L0 30 Q0 0 30 0 L40 0 40 20 30 20 Q20 20 20 30 L20 40z", fill: "rgba(128, 128, 128, 0.5)", category: 'geometry'},
{name:"弯头", nodeCollection: "pipe", geometry: "F1 M0 40 L0 30 Q0 0 30 0 L40 0 40 20 30 20 Q20 20 20 30 L20 40z", fill: "rgba(128, 128, 128, 0.5)", category: 'geometry',
portArray:[
{"name":"端口1","portId":"7b1d1bec-3674-4960-9bd1-901c28940f34","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"},
{"name":"端口2","portId":"4062f627-9bee-4ca5-b00d-cc6b39c566d9","alignment":"0.25 1 0 0","fromLinkable":true,"toLinkable":true,"fromMaxLinks":999, "toMaxLinks":999, "fromSpot":"0.5 1 0 0","toSpot":"0.5 1 0 0"}
]
},
{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},
]
},
{
name: "四头",
nodeCollection: "pipe",
geometry: "F1 M0 0 L20 0 20 20 0 20z",
fill: "rgba(128, 128, 128, 0.5)",
category: 'geometry',
portArray:[
{"name":"端口1","portId":"f0438186-a2ab-43cc-b365-9a7e6dfcdfde","alignment":"0 0.5 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":"5ebe28be-db70-4b3b-873d-0a24211de76a","alignment":"0.5 0 0 0","fromLinkable":true,"toLinkable":true,"fromMaxLinks":999, "toMaxLinks":999, "fromSpot":"0.5 0 0 0","toSpot":"0.5 0 0 0","isHighlighted":false},
{"name":"端口3","portId":"a82cf436-c76d-4643-be62-6215c831abc2","alignment":"1 0.5 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":"端口4","portId":"630c547b-eb8c-4907-97c1-f7721c58a4df","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}
]
}
]
src/kit/NodeTemplateKit.ts
......@@ -118,7 +118,7 @@ export var nodeRotateAdornment = GO(go.Adornment,
// 节点选中效果 装饰器
export var nodeSelectionAdornment = GO(go.Adornment, "Auto",
GO(go.Shape, { fill: null, stroke: "deepskyblue", strokeWidth: 1.5, strokeDashArray: [4, 2] }),
GO(go.Shape, { fill: null, stroke: "deepskyblue", strokeWidth: 0.5, strokeDashArray: [4, 2] }),
GO(go.Placeholder)
);
......@@ -138,14 +138,15 @@ export var nodeResizeAdornment = GO(go.Adornment, "Spot",
);
export var nodePortTemplate = GO(go.Panel, "Spot",
{background: "black", desiredSize: new go.Size(10, 10), cursor:"pointer"},
{background: "black", desiredSize: new go.Size(5, 5), cursor:"pointer"},
new go.Binding("portId", "portId"),
new go.Binding("alignment", "alignment", go.Spot.parse).makeTwoWay(go.Spot.stringify),
new go.Binding("fromLinkable", "fromLinkable"),
new go.Binding("toLinkable", "toLinkable"),
new go.Binding("fromSpot", "fromSpot", go.Spot.parse).makeTwoWay(go.Spot.stringify),
new go.Binding("toSpot", "toSpot", go.Spot.parse).makeTwoWay(go.Spot.stringify),
new go.Binding('maxLinks', 'maxLinks'),
new go.Binding('fromMaxLinks', 'fromMaxLinks'),
new go.Binding('toMaxLinks', 'toMaxLinks'),
new go.Binding('background', '', (data)=>{
return data['isHighlighted']? 'yellow': 'black'
}),
......
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