Skip to content

V
vue-gojs
Commit d2ec894d by 吴斌
Options

update：氨气合成装置拓扑图示例

parent c3433f26
Showing with 298 additions and 64 deletions
src/App.vue
...@@ -9,15 +9,47 @@ ...@@ -9,15 +9,47 @@
</el-collapse> </el-collapse>
</div> </div>
<div id="myDiagram" class="w-full h-full border-1 border-black rounded border-solid"></div> <div id="myDiagram" class="w-full h-full border-1 border-black rounded border-solid"></div>
<div class="w-[400px] h-full border-1 border-black rounded border-solid flex-col"> <div class="w-[400px] h-full border-1 border-black rounded border-solid flex-col text-center">
<div id="myInfo"> </div> <div id="myInfo" class="p-4 inspector"></div>
<div class="text-center m-4">
<el-button @click="showAddPropertyDialog">添加监听属性</el-button>
</div>
</div> </div>
</div> </div>
<div class="flex"> <div class="flex">
<div class="w-full"></div> <div class="w-full"></div>
<el-button @click="importData">导入</el-button> <el-button @click="importData">导入</el-button>
<el-button type="primary">导出</el-button> <el-button type="primary" @click="exportData">导出</el-button>
</div> </div>
<el-dialog v-model="addProperty" title="添加监听属性">
<el-form :model="propertyForm">
<el-form-item label="监听属性：">
<el-select v-model="propertyForm.key">
<el-option v-for="item in propertyForm.propertyList" :label="item" :value="item"></el-option>
</el-select>
</el-form-item>
<el-form-item label="显示名称：">
<el-input v-model="propertyForm.name"></el-input>
</el-form-item>
<el-form-item label="显示方式：">
<el-select v-model="propertyForm.showIfPresent">
<el-option label="总是显示" value="false"></el-option>
<el-option label="存在时显示" value="true"></el-option>
</el-select>
</el-form-item>
<el-form-item label="是否只读：">
<el-checkbox v-model="propertyForm.readOnly"></el-checkbox>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="addProperty = false">Cancel</el-button>
<el-button type="primary" @click="addInspector">
Confirm
</el-button>
</template>
</el-dialog>
</div> </div>
</template> </template>
...@@ -33,15 +65,35 @@ import { ...@@ -33,15 +65,35 @@ import {
nodeResizeAdornmentTemplate, nodeRotateAdornmentTemplate, nodeResizeAdornmentTemplate, nodeRotateAdornmentTemplate,
nodeSelectionAdornmentTemplate nodeSelectionAdornmentTemplate
} from "./kit/NodeTemplateKit.ts"; } from "./kit/NodeTemplateKit.ts";
import {linkSelectionAdornmentTemplate} from "./kit/LinkTemplateKit.ts"; import {linkSelectionAdornmentTemplate, MultiArrowLink} from "./kit/LinkTemplateKit.ts";
import {Inspector} from "./kit/DataInspector.ts"; import {Inspector} from "./kit/DataInspector.ts";
import {ElMessage} from "element-plus";
// import {drawSvg, svg_xml} from "./kit/parseXMLtoSVG.ts";
const categoryList: any = ref(null) const categoryList: any = ref(null)
let myDiagram: any = null; let myDiagram: any = null;
let inspector: any = null
let inspector2: any = null
let changeTimer: any = null let inspector:any=null;
const addProperty = ref(false)
let propertyForm:any =ref(null);
function showAddPropertyDialog(){
let node = myDiagram.selection.first();
if (node === null){
ElMessage.error("请先选择一个节点")
}
console.log(node.data)
propertyForm.value = {
key:'',
propertyList: Object.keys(node.data),
name: '',
showIfPresent: '',
readOnly: false,
}
console.log(propertyForm.value)
addProperty.value = true
}
function initPalette() { function initPalette() {
categoryList.value = picCategory categoryList.value = picCategory
...@@ -63,11 +115,13 @@ function initDiagram() { ...@@ -63,11 +115,13 @@ function initDiagram() {
"rotatingTool.snapAngleMultiple": 15, "rotatingTool.snapAngleMultiple": 15,
"rotatingTool.snapAngleEpsilon": 15, "rotatingTool.snapAngleEpsilon": 15,
//连接线相关 //连接线相关
//连线是否可以不和节点连接。
"draggingTool.dragsLink": true, "draggingTool.dragsLink": true,
"draggingTool.isGridSnapEnabled": true, "draggingTool.isGridSnapEnabled": true,
"draggingTool.isComplexRoutingRealtime": false,
//连线是否可以不和节点连接。
"linkingTool.isUnconnectedLinkValid": true, "linkingTool.isUnconnectedLinkValid": true,
"linkingTool.portGravity": 20, "linkingTool.portGravity": 20,
//连线是否可以不和节点连接。
"relinkingTool.isUnconnectedLinkValid": true, "relinkingTool.isUnconnectedLinkValid": true,
"relinkingTool.portGravity": 20, "relinkingTool.portGravity": 20,
"relinkingTool.fromHandleArchetype": "relinkingTool.fromHandleArchetype":
...@@ -89,11 +143,13 @@ function initDiagram() { ...@@ -89,11 +143,13 @@ function initDiagram() {
{resizable: true, resizeObjectName: "view", resizeAdornmentTemplate: nodeResizeAdornmentTemplate}, {resizable: true, resizeObjectName: "view", resizeAdornmentTemplate: nodeResizeAdornmentTemplate},
{rotatable: true, rotateAdornmentTemplate: nodeRotateAdornmentTemplate, locationSpot: go.Spot.Center}, {rotatable: true, rotateAdornmentTemplate: nodeRotateAdornmentTemplate, locationSpot: go.Spot.Center},
new go.Binding('angle').makeTwoWay(), new go.Binding('angle').makeTwoWay(),
GO(go.Picture, {name: "view", cursor: "pointer", width: 100, height: 100, imageStretch: go.GraphObject.Fill}, GO(go.Picture, {name: "view", cursor: "pointer", width: 100, height: 100, imageStretch: go.GraphObject.Fill, isPanelMain:true},
new go.Binding("source", "img")), new go.Binding("source", "img"),
// GO(go.TextBlock, {margin: 4, text: "", editable: true}, new go.Binding('desiredSize', "img_size", go.Size.parse).makeTwoWay(go.Size.stringify)
// new go.Binding("text", "name").makeTwoWay(), ),
// ), GO(go.TextBlock, {margin: 4, text: "", editable: true, alignment: go.Spot.Top},
new go.Binding("text", "name").makeTwoWay(),
),
GO(go.TextBlock, {margin: 4, text: "", editable: true}, GO(go.TextBlock, {margin: 4, text: "", editable: true},
new go.Binding("text", "press"), new go.Binding("text", "press"),
new go.Binding("stroke", "", new go.Binding("stroke", "",
...@@ -108,41 +164,38 @@ function initDiagram() { ...@@ -108,41 +164,38 @@ function initDiagram() {
{ // handle mouse enter/leave events to show/hide the ports { // handle mouse enter/leave events to show/hide the ports
mouseEnter: function (_e, node) { mouseEnter: function (_e, node) {
showSmallPorts(node, true); showSmallPorts(node, true);
console.log(myDiagram.model.toJson())
}, },
mouseLeave: function (_e, node) { mouseLeave: function (_e, node) {
showSmallPorts(node, false); showSmallPorts(node, false);
}, },
}, },
{ {
toolTip:GO("ToolTip", GO(go.TextBlock, {margin: 4}, new go.Binding("text", "press"))) toolTip:GO("ToolTip", GO(go.TextBlock, {margin: 4}, new go.Binding("text", "name")))
} }
); );
myDiagram.linkTemplate = GO(go.Link,
//多箭头连接线
myDiagram.linkTemplate = GO(MultiArrowLink,
{selectable: true, selectionAdornmentTemplate: linkSelectionAdornmentTemplate}, {selectable: true, selectionAdornmentTemplate: linkSelectionAdornmentTemplate},
{relinkableFrom: true, relinkableTo: true, reshapable: true}, {relinkableFrom: true, relinkableTo: true, reshapable: true},
{routing: go.Link.AvoidsNodes, corner: 10, curve: go.Link.JumpOver, toShortLength: 4}, {routing: go.Link.AvoidsNodes, curve: go.Link.JumpGap, toShortLength: 4},
new go.Binding("points").makeTwoWay(), new go.Binding("points", "points").makeTwoWay(),
new go.Binding("stroke").makeTwoWay(), new go.Binding("stroke", "stroke").makeTwoWay(),
GO(go.Shape, // the link path shape GO(go.Shape, // the link path shape
{isPanelMain: true, strokeWidth: 2}), {isPanelMain: true, strokeWidth: 2},
GO(go.Shape, // the arrowhead ),
{toArrow: "Standard", stroke: null}), GO(go.TextBlock,
GO(go.Panel, "Auto", { segmentIndex: 0, segmentOffset: new go.Point(NaN, NaN), segmentOrientation: go.Link.OrientUpright, editable:true, text:""},
// new go.Binding("visible", "isSelected").ofObject(), new go.Binding("text", "from_text").makeTwoWay()
GO(go.Shape, "RoundedRectangle", // the link shape ),
{fill: "transparent", stroke: null}), GO(go.TextBlock,
GO(go.TextBlock, {segmentOffset: new go.Point(NaN, NaN), editable:true, text:""},
{ new go.Binding("text", "middle_text").makeTwoWay()
textAlign: "center", ),
font: "10pt", GO(go.TextBlock,
stroke: "#000000", { segmentIndex: -1, segmentOffset: new go.Point(NaN, NaN), segmentOrientation: go.Link.OrientUpright, editable:true, text:"" },
margin: 2, new go.Binding("text", "to_text").makeTwoWay()
minSize: new go.Size(10, NaN), ),
editable: true
}
)
)
); );
} }
...@@ -151,46 +204,85 @@ function initInfo() { ...@@ -151,46 +204,85 @@ function initInfo() {
{ {
includesOwnProperties: false, includesOwnProperties: false,
properties: { properties: {
"name":{show:Inspector.showIfPresent, readOnly:true}, "press": {show: Inspector.showIfNode, readOnly: true, name:"压力", unit:'MPa'},
"press":{show:Inspector.showIfPresent, readOnly:true}, "name": {show: Inspector.showIfNode, name:'名称'},
"img":{show:Inspector.showIfPresent, readOnly:true}, "stroke": {show: Inspector.showIfPresent, type:'color', name:"颜色"},
"category":{show:Inspector.showIfPresent, readOnly:true}, "from":{show: Inspector.showIfPresent, name:"源", readOnly:true},
"loc": {show: Inspector.showIfPresent}, "to":{show: Inspector.showIfPresent, name:"目的", readOnly:true},
"pressLimit": {show: Inspector.showIfPresent}, "from_text": {show:Inspector.showIfLink, name:"源标签"},
"middle_text": {show:Inspector.showIfLink, name:"中间标签"},
"to_text": {show:Inspector.showIfLink, name:"目的标签"},
} }
}); });
}
function addInspector(){
let value = propertyForm.value
inspector.properties[value.key] = {}
console.log(value)
if (value.showIfPresent === "true"){
inspector.properties[value.key].show = Inspector.showIfPresent
}
if (value.readOnly){
inspector.properties[value.key].readOnly = true
}
if (value.name){
inspector.properties[value.key].name = value.name
}
addProperty.value = false
} }
function importData() { function importData() {
myDiagram.model = go.Model.fromJson( myDiagram.model = go.Model.fromJson(
{ "class": "GraphLinksModel", { "class": "GraphLinksModel",
"nodeDataArray": [ "nodeDataArray": [
{"name":"valve2","category":"valve","img":"src/assets/models/valve/阀-2.svg","key":-1,"press":"120", "pressLimit": 50}, {"name":"压缩机","category":"ammonia","img":"src/assets/models/ammonia/压缩机.svg","key":-7,"loc":"-460 120","angle":90,"img_size":"50 50"},
{"name":"valve3","category":"valve","img":"src/assets/models/valve/阀-2.svg","key":-2,"press":"121", "pressLimit": 50}, {"name":"冷却器-2","category":"ammonia","img":"src/assets/models/ammonia/冷却器-2.svg","key":-6,"loc":"-320 120","img_size":"50 50","angle":180},
{"name":"valve4","category":"valve","img":"src/assets/models/valve/阀-2.svg","key":-3,"press":"122", "pressLimit": 50}, {"name":"换热器","category":"ammonia","img":"src/assets/models/ammonia/换热器.svg","key":-3,"loc":"-170 130","img_size":"50 50"},
{"name":"valve5","category":"valve","img":"src/assets/models/valve/阀-2.svg","key":-4,"press":"123", "pressLimit": 50}, {"name":"换热器","category":"ammonia","img":"src/assets/models/ammonia/换热器.svg","key":-4,"loc":"-170 230","img_size":"50 50"},
], {"name":"氨分离罐","category":"ammonia","img":"src/assets/models/ammonia/氨分离罐.svg","key":-1,"loc":"-170 340","angle":180,"img_size":"70 70"},
"linkDataArray": [ {"name":"冷却器-2","category":"ammonia","img":"src/assets/models/ammonia/冷却器-2.svg","key":-8,"loc":"-170 0","img_size":"50 50","angle":270},
{'from': -1, 'to': -2}, {"name":"冷却器","category":"ammonia","img":"src/assets/models/ammonia/冷却器.svg","key":-5,"loc":"-310 -50","img_size":"50 60"},
{'from': -1, 'to': -3}, {"name":"氨分离罐","category":"ammonia","img":"src/assets/models/ammonia/氨分离罐.svg","key":-9,"loc":"-460 -50","angle":270,"img_size":"90 90"},
{'from': -1, 'to': -4}, {"name":"合成塔","category":"ammonia","img":"src/assets/models/ammonia/合成塔.svg","key":-2,"loc":"-20 20","img_size":"240 240"},
]} {"name":"开工炉","category":"ammonia","img":"src/assets/models/ammonia/开工炉.svg","key":-10,"loc":"200 20"}
],
"linkDataArray": [
{"from":-7,"to":-6,"points":[-435,120,-425,120,-390,120,-390,120,-355,120,-345,120],"from_text":"","to_text":"","middle_text":""},
{"to":-7,"points":[-581.747192056346,119.72004490817523,-571.747192056346,119.72004490817523,-533.373596028173,119.72004490817523,-533.373596028173,120,-495,120,-485,120],"from_text":"原料气","middle_text":"","to_text":""},
{"from":-4,"to":-3,"points":[-170,205,-170,195,-170,180,-170,180,-170,165,-170,155]},
{"from":-1,"to":-4,"points":[-170,305,-170,295,-170,280,-170,280,-170,265,-170,255]},
{"from":-6,"to":-1,"points":[-320,145,-320,155,-320,340,-267.5,340,-215,340,-205,340]},
{"from":-3,"to":-7,"points":[-195,130,-205,130,-204.734375,130,-204.734375,42,-460,42,-460,85,-460,95]},
{"from":-8,"to":-3,"points":[-170,25,-170,35,-170,65,-170,65,-170,95,-170,105]},
{"from":-3,"to":-5,"points":[-195,130,-205,130,-240,130,-240,-50,-275,-50,-285,-50]},
{"from":-5,"to":-9,"points":[-335,-50,-345,-50,-375,-50,-375,-50,-405,-50,-415,-50]},
{"from":-9,"points":[-460,-95,-460,-105,-460,-117.26241947147004,-508.11212269269544,-117.26241947147004,-556.2242453853909,-117.26241947147004,-566.2242453853909,-117.26241947147004],"from_text":"","middle_text":"","to_text":"燃料气"},
{"from":-9,"points":[-460,-5,-460,5,-460,19.188395913513318,-513.4422326686713,19.188395913513318,-566.8844653373427,19.188395913513318,-576.8844653373427,19.188395913513318],"from_text":"","middle_text":"","to_text":"氨产品"},
{"from":-4,"to":-10,"points":[-145,230,-135,230,200,230,200,155,200,80,200,70]},
{"from":-4,"to":-2,"points":[-145,230,-135,230,-20,230,-20,190,-20,150,-20,140]},
{"from":-10,"to":-2,"points":[150,20,140,20,125,20,125,20,110,20,100,20]},
{"from":-8,"to":-2,"points":[-170,-25,-170,-35,-170,-166.1718594375002,-20,-166.1718594375002,-20,-110,-20,-100]},
{"from":-1,"points":[-170,375,-170,385,-170,386.3945578231293,-130.69586167800455,386.3945578231293,-91.3917233560091,386.3945578231293,-81.3917233560091,386.3945578231293]}
]}
); );
} }
function exportData() { function exportData() {
console.log(myDiagram.model.toJson()) console.log(myDiagram.model.toJson())
console.log(myDiagram.position)
// console.log(inspector.properties)
} }
function changePress(){ function changePress(){
let model = myDiagram.model let model = myDiagram.model
changeTimer = setInterval(()=>{ setInterval(()=>{
let nodeDataArray = myDiagram.model.nodeDataArray let nodeDataArray = myDiagram.model.nodeDataArray
nodeDataArray.forEach((item:any)=>{ nodeDataArray.forEach((item:any)=>{
model.set(item, "press", Math.floor(Math.random()*100)) if (item.category === "valve"){
model.set(item, "press", Math.floor(Math.random()*100))
}
}) })
console.log(myDiagram.model.nodeDataArray)
},1000) },1000)
} }
...@@ -201,7 +293,43 @@ onMounted(() => { ...@@ -201,7 +293,43 @@ onMounted(() => {
initInfo(); initInfo();
importData(); importData();
changePress(); changePress();
// changePress2();
}) })
</script> </script>
\ No newline at end of file
<style>
.inspector {
display: inline-block;
font: bold 14px helvetica, sans-serif;
background-color: #212121; /* Grey 900 */
color: #F5F5F5; /* Grey 100 */
cursor: default;
}
.inspector table {
border-collapse: separate;
border-spacing: 2px;
}
.inspector td, th {
padding:2px;
}
.inspector input {
background-color: #424242; /* Grey 800 */
color: #F5F5F5; /* Grey 100 */
font: bold 12px helvetica, sans-serif;
border:0px;
border-radius: 2px;
padding: 2px;
}
.inspector input:disabled {
background-color: #BDBDBD; /* Grey 400 */
color: #616161; /* Grey 700 */
}
.inspector select {
background-color: #424242;
}
</style>
\ No newline at end of file
src/assets/models/ammonia/冷却器-2.svg 0 → 100644
<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="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
src/assets/models/ammonia/冷却器.svg 0 → 100644
<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="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
src/assets/models/ammonia/压缩机.svg 0 → 100644
<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="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
src/assets/models/ammonia/合成塔.svg 0 → 100644
<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="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
src/assets/models/ammonia/开工炉.svg 0 → 100644
<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="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
src/assets/models/ammonia/换热器.svg 0 → 100644
<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="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
src/assets/models/ammonia/氨分离罐.svg 0 → 100644
<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="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
src/assets/models/valve/阀 - 副本.xml 0 → 100644
<?xml version="1.0" encoding="utf-8"?>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="90px" height="50px" viewBox="0 0 90 50" enable-background="new 0 0 90 50" xml:space="preserve">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="45" y1="1.044341e-005" x2="45" y2="50">
<stop offset="0.0056" style="stop-color:#717071"/>
<stop offset="0.1763" style="stop-color:#9E9E9F"/>
<stop offset="0.3483" style="stop-color:#C8C9CA"/>
<stop offset="0.5219" style="stop-color:#FFFFFF"/>
<stop offset="0.6946" style="stop-color:#DBDCDC"/>
<stop offset="0.7395" style="stop-color:#D7D8D8"/>
<stop offset="0.7841" style="stop-color:#CBCCCC"/>
<stop offset="0.8284" style="stop-color:#B8B8B9"/>
<stop offset="0.836" style="stop-color:#B4B4B5"/>
<stop offset="1" style="stop-color:#6B6A6A"/>
</linearGradient>
<path fill="url(#SVGID_1_)" stroke="#C8C9CA" stroke-width="0.1877" stroke-miterlimit="10" d="M87.442,0.224L45.738,23.568
c-0.371,0.208-0.609,0.522-0.738,0.867c-0.129-0.345-0.366-0.659-0.738-0.867L2.558,0.224C1.421-0.412,0,0.383,0,1.656v46.688
c0,1.273,1.421,2.068,2.558,1.432l41.704-23.344c0.371-0.208,0.609-0.522,0.738-0.867c0.129,0.345,0.366,0.659,0.738,0.867
l41.704,23.344C88.579,50.412,90,49.617,90,48.344V1.656C90,0.383,88.579-0.412,87.442,0.224z"/>
</svg>
src/kit/DataInspector.ts
...@@ -114,7 +114,7 @@ export class Inspector { ...@@ -114,7 +114,7 @@ export class Inspector {
this.inspectOnModelChanged = (e: go.ChangedEvent) => { this.inspectOnModelChanged = (e: go.ChangedEvent) => {
if (e.isTransactionFinished) self.inspectObject(); if (e.isTransactionFinished) self.inspectObject();
}; };
this.inspectOnSelectionChanged = (e: go.DiagramEvent) => { self.inspectObject(); }; this.inspectOnSelectionChanged = (_e: go.DiagramEvent) => { self.inspectObject(); };
this._diagram.addModelChangedListener(this.inspectOnModelChanged); this._diagram.addModelChangedListener(this.inspectOnModelChanged);
if (this._inspectSelection) { if (this._inspectSelection) {
this._diagram.addDiagramListener('ChangedSelection', this.inspectOnSelectionChanged); this._diagram.addDiagramListener('ChangedSelection', this.inspectOnSelectionChanged);
...@@ -606,6 +606,14 @@ export class Inspector { ...@@ -606,6 +606,14 @@ export class Inspector {
} }
tr.appendChild(td2); tr.appendChild(td2);
//td3 显示单位
const td3 = document.createElement('td');
const decProp2 = this._properties[propertyName];
if (decProp2 && decProp2.unit !== undefined){
td3.textContent = decProp2.unit;
tr.appendChild(td3);
}
this.inspectedProperties[propertyName] = input; this.inspectedProperties[propertyName] = input;
return tr; return tr;
} }
......
src/kit/LinkTemplateKit.ts
...@@ -8,4 +8,50 @@ GO(go.Adornment, "Link", ...@@ -8,4 +8,50 @@ GO(go.Adornment, "Link",
{ isPanelMain: true, fill: null, stroke: "deepskyblue", strokeWidth: 1 }, { isPanelMain: true, fill: null, stroke: "deepskyblue", strokeWidth: 1 },
new go.Binding("stroke").makeTwoWay() new go.Binding("stroke").makeTwoWay()
) // use selection object's strokeWidth ) // use selection object's strokeWidth
); );
\ No newline at end of file
export function MultiArrowLink() {
go.Link.call(this);
}
go.Diagram.inherit(MultiArrowLink, go.Link);
MultiArrowLink.prototype.makeGeometry = function() {
// get the Geometry created by the standard behavior
let geo = go.Link.prototype.makeGeometry.call(this);
if (geo.type !== go.Geometry.Path || geo.figures.length === 0) return geo;
let mainfig = geo.figures.elt(0); // assume there's just one PathFigure
let mainsegs = mainfig.segments;
let arrowLen = 8; // length for each arrowhead
let arrowWid = 3; // actually half-width of each arrowhead
let fx = mainfig.startX;
let fy = mainfig.startY;
for (let i = 0; i < mainsegs.length; i++) {
let a = mainsegs.elt(i);
// assume each arrowhead is a simple triangle
let ax = a.endX;
let ay = a.endY;
let bx = ax;
let by = ay;
let cx = ax;
let cy = ay;
if (fx < ax - arrowLen) {
bx -= arrowLen; by += arrowWid;
cx -= arrowLen; cy -= arrowWid;
} else if (fx > ax + arrowLen) {
bx += arrowLen; by += arrowWid;
cx += arrowLen; cy -= arrowWid;
} else if (fy < ay - arrowLen) {
bx -= arrowWid; by -= arrowLen;
cx += arrowWid; cy -= arrowLen;
} else if (fy > ay + arrowLen) {
bx -= arrowWid; by += arrowLen;
cx += arrowWid; cy += arrowLen;
}
geo.add(new go.PathFigure(ax, ay, true)
.add(new go.PathSegment(go.PathSegment.Line, bx, by))
.add(new go.PathSegment(go.PathSegment.Line, cx, cy).close()));
fx = ax;
fy = ay;
}
return geo;
};
\ No newline at end of file
src/kit/ModelData.ts
...@@ -3,6 +3,7 @@ export const picCategory = [ ...@@ -3,6 +3,7 @@ export const picCategory = [
{key:"valve",name:"阀门"}, {key:"valve",name:"阀门"},
{key:"pump",name:"泵"}, {key:"pump",name:"泵"},
{key:"computer",name:"计算机"}, {key:"computer",name:"计算机"},
{key:"ammonia", name:"氨气合成装置"}
] ]
export const picModel = [ export const picModel = [
...@@ -15,4 +16,11 @@ export const picModel = [ ...@@ -15,4 +16,11 @@ export const picModel = [
{name: "pump2", category: "pump", img: "src/assets/models/pump/卧式泵.svg"}, {name: "pump2", category: "pump", img: "src/assets/models/pump/卧式泵.svg"},
{name: "pump3", category: "pump", img: "src/assets/models/pump/旋转泵.svg"}, {name: "pump3", category: "pump", img: "src/assets/models/pump/旋转泵.svg"},
{name: "pump4", category: "pump", img: "src/assets/models/pump/油池泵.svg"}, {name: "pump4", category: "pump", img: "src/assets/models/pump/油池泵.svg"},
{name:"氨分离罐", category:"ammonia", img:"src/assets/models/ammonia/氨分离罐.svg"},
{name:"合成塔", category:"ammonia", img:"src/assets/models/ammonia/合成塔.svg"},
{name:"换热器", category:"ammonia", img:"src/assets/models/ammonia/换热器.svg"},
{name:"开工炉", category:"ammonia", img:"src/assets/models/ammonia/开工炉.svg"},
{name:"冷却器", category:"ammonia", img:"src/assets/models/ammonia/冷却器.svg"},
{name:"冷却器-2", category:"ammonia", img:"src/assets/models/ammonia/冷却器-2.svg"},
{name:"压缩机", category:"ammonia", img:"src/assets/models/ammonia/压缩机.svg"},
] ]
vite.config.ts
...@@ -7,7 +7,7 @@ export default defineConfig({ ...@@ -7,7 +7,7 @@ export default defineConfig({
plugins: [vue(), UnoCss()], plugins: [vue(), UnoCss()],
server:{ server:{
host:'0.0.0.0' ,//ip地址 host:'0.0.0.0' ,//ip地址
port: 2345, // 设置服务启动端口号 port: 23445, // 设置服务启动端口号
open: true, // 设置服务启动时是否自动打开浏览器 open: true, // 设置服务启动时是否自动打开浏览器
} }
}) })
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