Skip to content

V
vue-gojs
Commit 112d3fb3 by 吴斌
Options

update：增加 编辑 只读 模式切换。数据模拟功能。

parent 5521dc82
Showing with 126 additions and 71 deletions
src/App.vue
<template> <template>
<div class="w-full h-full flex flex-col"> <div class="w-full h-full flex flex-col">
<div id="tool-bar" class="pl-1 pr-1 bg-white h-10 flex items-center space-x-1 border-0.5 border-gray-500 border-solid rounded-t-[8px] p-1"> <div id="tool-bar" class="pl-1 pr-1 bg-white h-10 flex items-center space-x-1 border-0.5 border-gray-500 border-solid rounded-t-[8px] p-1">
<el-button text size="small" :disabled="!diagramConfig.canUndo">
<template #icon>
<i class="icon-undo"></i>
</template>
</el-button>
<el-button text :disabled="!diagramConfig.canRedo">
<template #icon>
<i class="icon-redo"></i>
</template>
</el-button>
<el-button text icon="Setting"></el-button> <el-button text icon="Setting"></el-button>
<div class="flex-1"></div> <div class="flex-1"></div>
<!-- <el-switch v-model="ifRealTimeData"> 模拟实时数据</el-switch>--> <el-radio-group v-model="diagramConfig.mode" @change="diagramModeChanged">
<el-button icon="Refresh" @click="changeData">数据变化</el-button> <el-radio-button label="readonly">
<template #default>
<el-icon>
<View/>
</el-icon>
</template>
</el-radio-button>
<el-radio-button label="edit">
<template #default>
<el-icon>
<Edit/>
</el-icon>
</template>
</el-radio-button>
</el-radio-group>
<div class="flex-1"></div>
<el-switch v-model="ifRealTimeData" active-text="模拟实时数据"></el-switch>
<el-button icon="Refresh" @click="changeDeviceData">数据变化</el-button>
<el-button icon="Download" @click="importData">导入</el-button> <el-button icon="Download" @click="importData">导入</el-button>
<el-button type="primary" icon="Upload" @click="exportData">导出</el-button> <el-button type="primary" icon="Upload" @click="exportData">导出</el-button>
<el-button class="mr-2" type="success" icon="CircleCheck" @click="saveData"></el-button> <el-button class="mr-2" type="success" icon="CircleCheck" @click="saveData"></el-button>
</div> </div>
<div class="flex-1 flex border-1 border-t-0 border-solid border-gray-500 rounded-b-[8px]"> <div class="flex-1 flex border-1 border-t-0 border-solid border-gray-500 rounded-b-[8px]">
<div id="sourceCollapse" class="w-[200px] rounded-bl-[8px] bg-white flex flex-col items-center p-2 space-y-1"> <div id="sourceCollapse" class="w-[200px] rounded-bl-[8px] bg-white flex flex-col items-center p-2 space-y-1">
<!-- 看情况要不要加--> <!-- <el-input-->
<!-- <el-input--> <!-- v-model="inputSearchNode"-->
<!-- v-model="inputSearchNode"--> <!-- class="w-9/10"-->
<!-- class="w-9/10"--> <!-- placeholder="搜索图形"-->
<!-- placeholder="搜索图形"--> <!-- :prefix-icon="Search"-->
<!-- :prefix-icon="Search"--> <!-- />-->
<!-- />-->
<div class="w-full" :style="{height: nodeAreaHeight}"> <div class="w-full" :style="{height: nodeAreaHeight}">
<el-scrollbar :max-height="nodeAreaHeight"> <el-scrollbar :max-height="nodeAreaHeight">
<SourceNodeCollection></SourceNodeCollection> <SourceNodeCollection></SourceNodeCollection>
</el-scrollbar> </el-scrollbar>
</div> </div>
<el-divider></el-divider> <el-divider></el-divider>
<el-button type="primary" icon="Plus">添加图形</el-button> <el-row>
<el-button type="primary" icon="edit">分类</el-button>
<el-button type="primary" icon="plus">模型</el-button>
</el-row>
</div> </div>
<div id="myDiagram" class="flex-1 border-0.5 border-solid border-gray-500 border-t-0 "></div> <div id="myDiagram" class="flex-1 border-0.5 border-solid border-gray-500 border-t-0 "></div>
<div id="info-panel" class="w-[200px] rounded-br-[8px]"> <div id="info-panel" class="w-[200px] rounded-br-[8px]">
...@@ -47,7 +56,7 @@ ...@@ -47,7 +56,7 @@
<div id="inspector-property"></div> <div id="inspector-property"></div>
<el-divider direction="horizontal"></el-divider> <el-divider direction="horizontal"></el-divider>
</div> </div>
<div v-show="ifSelectNode"> <div v-show="ifSelectNode" class="flex flex-col w-full">
<div class="text-[16px] font-bold text-black">端口</div> <div class="text-[16px] font-bold text-black">端口</div>
<div v-for="port in nodePortArray"> <div v-for="port in nodePortArray">
<div class="flex flex-row space-x-0" @mouseenter="highlightPort(port['portId'], true)" @mouseleave="highlightPort(port['portId'], false)"> <div class="flex flex-row space-x-0" @mouseenter="highlightPort(port['portId'], true)" @mouseleave="highlightPort(port['portId'], false)">
...@@ -62,10 +71,12 @@ ...@@ -62,10 +71,12 @@
</div> </div>
</div> </div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="参数"> <el-tab-pane label="分析">
<el-empty description="未选择节点" v-if="!ifSelectNode"></el-empty> <div class="space-y-1 p-2 flex flex-col">
<div class="space-y-1 p-2 flex flex-col" v-show="ifSelectNode"> <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>
</div> </div>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
...@@ -129,7 +140,7 @@ ...@@ -129,7 +140,7 @@
import {onMounted, ref, triggerRef} from "vue"; import {onMounted, ref, triggerRef} from "vue";
import SourceNodeCollection from "./components/source/source-node-collection.vue"; import SourceNodeCollection from "./components/source/source-node-collection.vue";
import go from "gojs"; import go from "gojs";
import {GO} from "./kit/GOJSKit.ts"; import {getSelectedNodes, GO} from "./kit/GOJSKit.ts";
import {createRotatingTool, makeDiagramNodeTemplate} from "./kit/NodeTemplateKit.ts"; import {createRotatingTool, makeDiagramNodeTemplate} from "./kit/NodeTemplateKit.ts";
import {GuidedDraggingTool} from "./kit/extensions/GuidedDraggingTool.ts"; import {GuidedDraggingTool} from "./kit/extensions/GuidedDraggingTool.ts";
import {PortShiftingTool} from "./kit/extensions/PortShiftingTool.ts"; import {PortShiftingTool} from "./kit/extensions/PortShiftingTool.ts";
...@@ -137,15 +148,14 @@ import {ArrowLink, FlowLink} from "./kit/LinkTemplateKit.ts"; ...@@ -137,15 +148,14 @@ import {ArrowLink, FlowLink} from "./kit/LinkTemplateKit.ts";
import {Inspector} from "./kit/extensions/DataInspector.ts"; import {Inspector} from "./kit/extensions/DataInspector.ts";
import {uuid} from "vue3-uuid"; import {uuid} from "vue3-uuid";
import {SnapLinkReshapingTool} from "./kit/extensions/SnapLinkReshapingTool.ts"; import {SnapLinkReshapingTool} from "./kit/extensions/SnapLinkReshapingTool.ts";
import {Edit, View} from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";
const diagramConfig = ref({ const diagramConfig = ref({
// 图表是否可以进行撤销操作 mode: "edit",
canUndo: false,
// 图表是否可以进行重做操作
canRedo: false
}) })
// const ifRealTimeData = ref(false) const ifRealTimeData = ref(false)
let myDiagram:any = null let myDiagram:any = null
let inspector:any = null let inspector:any = null
...@@ -190,6 +200,7 @@ onMounted(()=>{ ...@@ -190,6 +200,7 @@ onMounted(()=>{
initDiagram() initDiagram()
listenDiagram() listenDiagram()
initInspector() initInspector()
changeDataRealTime()
}) })
// 为了在页面大小变化时，让节点区域的滚动条区域高度自适应 // 为了在页面大小变化时，让节点区域的滚动条区域高度自适应
...@@ -198,6 +209,20 @@ function getNodeSourceScrollAreaHeight(){ ...@@ -198,6 +209,20 @@ function getNodeSourceScrollAreaHeight(){
nodeAreaHeight.value = window.innerHeight - 144 + 'px' nodeAreaHeight.value = window.innerHeight - 144 + 'px'
} }
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
}
}
function exportData(){ function exportData(){
console.log(myDiagram.model.toJson()) console.log(myDiagram.model.toJson())
...@@ -227,27 +252,27 @@ function importData(){ ...@@ -227,27 +252,27 @@ 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} {"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": [ "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":-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":"燃料气"}, {"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":"氨产品"}, {"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]}, {"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]}, {"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]}, {"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":""}, {"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]}, {"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]}, {"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]}, {"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]}, {"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.786697850832525,-44.375,19.786697850832525,-72.5,19.786697850832525,-82.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,-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]}, {"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]}, {"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]}, {"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]}, {"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]}, {"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]}, {"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.4255937500008,295.7129562500003,-600.4255937500008,285.7129562500003,-600.4255937500008]}, {"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":-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":-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], 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]} {"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"}
]} ]}
myDiagram.model = go.Model.fromJson(json) myDiagram.model = go.Model.fromJson(json)
} }
...@@ -257,17 +282,6 @@ function saveData(){ ...@@ -257,17 +282,6 @@ function saveData(){
console.log(selectedNode.value) console.log(selectedNode.value)
} }
function changeData(){
let nodeDataArray = myDiagram.model.nodeDataArray
nodeDataArray.forEach((item:any)=>{
if(item.portArray){
item.portArray.forEach((port:any)=>{
myDiagram.model.setDataProperty(port, 'background', port['background'] === 'black'?'red':'black')
})
}
})
}
// diagram 部分 // diagram 部分
function initDiagram(){ function initDiagram(){
myDiagram = GO(go.Diagram, "myDiagram", { myDiagram = GO(go.Diagram, "myDiagram", {
...@@ -324,7 +338,7 @@ function initDiagram(){ ...@@ -324,7 +338,7 @@ function initDiagram(){
myDiagram.model.copiesArrays = true; myDiagram.model.copiesArrays = true;
myDiagram.model.copiesArrayObjects = true; myDiagram.model.copiesArrayObjects = true;
//多种类型的连接线 //多种类型的连接线
myDiagram.linkTemplateMap.add('', ArrowLink) myDiagram.linkTemplateMap.add('Arrow', ArrowLink)
myDiagram.linkTemplateMap.add('Flow', FlowLink) myDiagram.linkTemplateMap.add('Flow', FlowLink)
//多种类型的节点 //多种类型的节点
...@@ -339,8 +353,8 @@ function listenDiagram(){ ...@@ -339,8 +353,8 @@ function listenDiagram(){
}) })
myDiagram.addDiagramListener('Modified', ()=>{ myDiagram.addDiagramListener('Modified', ()=>{
}) })
//监听选中时间，用于右侧info-panel，展示选中节点的信息
myDiagram.addDiagramListener('ChangedSelection', ()=>{ myDiagram.addDiagramListener('ChangedSelection', ()=>{
console.log(myDiagram.selection.first())
let currentSelected = myDiagram.selection.first() let currentSelected = myDiagram.selection.first()
if (currentSelected === null) { if (currentSelected === null) {
ifSelectNode.value = false ifSelectNode.value = false
...@@ -356,6 +370,24 @@ function listenDiagram(){ ...@@ -356,6 +370,24 @@ function listenDiagram(){
freshSelectionLink() freshSelectionLink()
} }
}) })
// 监听连线事件，为所有新添加的线默认加上 "Arrow" 类别
myDiagram.addDiagramListener("LinkDrawn", function(e:go.DiagramEvent) {
let link = e.subject;
let linkDataArray = myDiagram.model.linkDataArray
linkDataArray.forEach((item:any)=>{
if (item === link.data && !item.category){
myDiagram.model.set(item, "category", "Arrow")
}
})
});
//拖入部件赋予大小
myDiagram.addDiagramListener("ExternalObjectsDropped", function(e:go.DiagramEvent) {
let part = e.subject.first()
if(part instanceof go.Node){
console.log(part.data)
console.log(part.width)
}
});
} }
function freshSelectionNode(){ function freshSelectionNode(){
...@@ -401,14 +433,13 @@ function initInspector(){ ...@@ -401,14 +433,13 @@ function initInspector(){
} }
} }
) )
console.log(inspector.properties)
} }
function confirmAddPort(){ function confirmAddPort(){
myDiagram.startTransaction("addPort"); myDiagram.startTransaction("addPort");
let node = myDiagram.findNodeForData(selectedNode.value.data) as go.Node let node = myDiagram.findNodeForData(selectedNode.value.data) as go.Node
if(!node.data.portArray) { if(!node.data.portArray) {
node.data.portArray = [] myDiagram.model.setDataProperty(node.data, 'portArray', [])
} }
let newPort = { let newPort = {
name: addPortForm.value.name, name: addPortForm.value.name,
...@@ -422,9 +453,7 @@ function confirmAddPort(){ ...@@ -422,9 +453,7 @@ function confirmAddPort(){
toSpot: addPortForm.value.type, toSpot: addPortForm.value.type,
} }
let portArray = node.data.portArray let portArray = node.data.portArray
portArray.push(newPort) myDiagram.model.insertArrayItem(portArray, -1, newPort)
myDiagram.model.setDataProperty(node.data, 'portArray', portArray)
node.updateTargetBindings('portArray')
freshSelectionNode() freshSelectionNode()
myDiagram.commitTransaction("addPort"); myDiagram.commitTransaction("addPort");
showAddPortDialog.value = false showAddPortDialog.value = false
...@@ -503,15 +532,41 @@ function highlightPort(portId:string, highlight:boolean){ ...@@ -503,15 +532,41 @@ function highlightPort(portId:string, highlight:boolean){
myDiagram.commitTransaction("highlight"); myDiagram.commitTransaction("highlight");
} }
function changeDeviceData(){
let model = myDiagram.model
let nodeDataArray = myDiagram.model.nodeDataArray
nodeDataArray.forEach((item:any)=>{
if (item.nodeCollection === "ammonia"){
model.set(item, "press", Math.floor(Math.random()*100))
model.set(item, "thick", Math.random().toFixed(2))
model.set(item, "temperature", Math.floor(Math.random()*10))
}
})
}
function changeDataRealTime(){
setInterval(()=>{
if(ifRealTimeData.value){
changeDeviceData()
}
}, 5000)
}
function analyzeData(){
let selectedNodes = getSelectedNodes(myDiagram)
if(selectedNodes.length !== 2){
ElMessage.error('请选择两个设备节点')
}
console.log(selectedNodes)
}
// 浏览器大小变化时 // 浏览器大小变化时
window.onresize = function (){ window.onresize = function (){
getNodeSourceScrollAreaHeight() getNodeSourceScrollAreaHeight()
} }
</script> </script>
<style> <style>
/* info-panel */ /* info-panel */
......
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