Skip to content

G
gojs-project
Commit 675bc2f3 by jlc
Options

update：管道和展示面板的初步设计

parent ac1a3ef4
Showing with 473 additions and 6 deletions
src/stageAchievements/imageNode.vue
...@@ -6,9 +6,19 @@ ...@@ -6,9 +6,19 @@
<img id="svg_zhaChi" src="./pid_node/渣池.svg"> <img id="svg_zhaChi" src="./pid_node/渣池.svg">
</div> </div>
<div id="html" style="background-color: aqua; width: 100px; height: 100px; margin-left: auto; margin-right: auto;" draggable="true" @dragstart="dragstart">html元素</div> <div id="html" style="background-color: aqua; width: 100px; height: 100px; margin-left: auto; margin-right: auto;" draggable="true" @dragstart="dragstart">html元素</div>
<div class="pipeClass">
<span style="margin: 5px;">管道</span>
<div id="pipe" style="background-color: gray; width: 30px; height: 30px; margin: 5px;" draggable="true" @dragstart="dragstart"></div>
</div>
</div> </div>
<div id="diagramDiv" class="layout-main" @dragover="event => event.preventDefault()" <div id="diagramDiv" class="layout-main" @dragover="event => event.preventDefault()"
@dragenter="event => event.preventDefault()" @drop="drop"></div> @dragenter="event => event.preventDefault()" @drop="drop"></div>
<div id="operationDiv" class="layout-right">
<button class="btnClass" @click="dcsDataShow">DCS数据</button>
<button class="btnClass" @click="alarmDataShow">设备告警</button>
<button class="btnClass" @click="riskDataShow">风险预警</button>
<button class="btnClass" @click="damageDataShow">损伤分布</button>
</div>
</div> </div>
</div> </div>
<div> <div>
...@@ -54,6 +64,12 @@ const changeModel = ref(true) ...@@ -54,6 +64,12 @@ const changeModel = ref(true)
const dragStartOffsetX = ref() const dragStartOffsetX = ref()
const dragStartOffsetY = ref() const dragStartOffsetY = ref()
// 控制展示面板内容展示和隐藏的参数
const showDcsVisible = ref(true)
const showAlarmVisible = ref(true)
const showRiskVisible = ref(true)
const showDamageVisible = ref(true)
// 切换添加端口/标定点的形式 // 切换添加端口/标定点的形式
function toggleDivs(value: boolean) { function toggleDivs(value: boolean) {
changeModel.value = value; changeModel.value = value;
...@@ -235,7 +251,6 @@ function initDiagram() { ...@@ -235,7 +251,6 @@ function initDiagram() {
), ),
), ),
// SVG图片节点模板 // SVG图片节点模板
myDiagram.nodeTemplateMap.add('zhaChi', myDiagram.nodeTemplateMap.add('zhaChi',
$(go.Node, "Spot", $(go.Node, "Spot",
...@@ -392,6 +407,365 @@ function initDiagram() { ...@@ -392,6 +407,365 @@ function initDiagram() {
) )
); );
// 管道模板
myDiagram.nodeTemplateMap.add('pipe',
$(go.Node, 'Spot',
{
resizable: true,
rotatable: true,
cursor: 'move',
_isLinkLabel: true,
},
new go.Binding("location", "loc"),
new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
new go.Binding('itemArray', 'portArray'), {
itemTemplate: $(go.Panel,
{
portId: "Top",
fromSpot: go.Spot.Top,
toSpot: go.Spot.Top,
fromLinkable: true,
toLinkable: true,
cursor: 'pointer',
alignment: go.Spot.Top,
visible: true,
contextMenu:
$("ContextMenu",
$("ContextMenuButton",
$(go.TextBlock, "Remove Port", { font: "bold 12px sans-serif", width: 100, textAlign: "center" }),
{
click: (e: any, obj: any) => removePort(obj.part.adornedObject),
"ButtonBorder.fill": "white",
"_buttonFillOver": "skyblue"
}
)
),
},
new go.Binding('portId', 'portId'),
new go.Binding('alignment', 'portKey', (portKey: string) => {
switch(portKey) {
case "top": return go.Spot.Top;
case "bottom": return go.Spot.Bottom;
case "left": return go.Spot.Left;
case "right": return go.Spot.Right;
default: return go.Spot.Top;
}
}),
new go.Binding('fromSpot', 'portKey', (portKey: string) => {
switch(portKey) {
case "top": return go.Spot.Top;
case "bottom": return go.Spot.Bottom;
case "left": return go.Spot.Left;
case "right": return go.Spot.Right;
default: return go.Spot.Top;
}
}),
new go.Binding('toSpot', 'portKey', (portKey: string) => {
switch(portKey) {
case "top": return go.Spot.Top;
case "bottom": return go.Spot.Bottom;
case "left": return go.Spot.Left;
case "right": return go.Spot.Right;
default: return go.Spot.Top;
}
}),
$(go.Shape, 'Rectangle',
{
strokeWidth: 1,
desiredSize: new go.Size(6, 6),
},
new go.Binding('visible', 'visible'),
)
),
},
$(go.Panel, 'Spot',
// 标定点模板
new go.Binding('itemArray', 'markArray'), {
itemTemplate: $(go.Panel,
{
portId: "mark",
cursor: 'pointer',
alignment: new go.Spot(0.5, 0.7),
contextMenu:
$("ContextMenu",
$("ContextMenuButton",
$(go.TextBlock, "Remove Mark", { font: "bold 12px sans-serif", width: 100, textAlign: "center" }),
{
click: (e: any, obj: any) => removeMark(obj.part.adornedObject),
"ButtonBorder.fill": "white",
"_buttonFillOver": "skyblue"
}
)
),
},
new go.Binding('portId', 'markId'),
$(go.Shape, 'Rectangle',
{
strokeWidth: 1,
desiredSize: new go.Size(6, 6),
fill: "red"
},
))
},
$(go.Panel, 'Spot',
$(go.Shape, "RoundedRectangle",
{
geometry: go.Geometry.parse("XF M 0 0 L 30 0 L 30 30 L 0 30 Z"),
stroke: "black",
fill: "gray",
strokeWidth: 1.5,
width: 30,
height: 30
},
new go.Binding('fill', 'color'),
),
$(go.TextBlock,
{
margin: 10,
textAlign: 'center',
font: 'bold 14px Segoe UI,sans-serif',
stroke: '#484848',
editable: true,
_isNodeLabel: true,
cursor: "move"
},
// new go.Binding('text', 'key').makeTwoWay(),
),
{
toolTip: // 定义节点工具提示
$("ToolTip",
$(go.TextBlock, { margin: 4 },
new go.Binding("text", "key")) // 绑定节点的颜色信息
)
},
{
doubleClick : function(){ // 在节点中鼠标左键双击打开添加节点端口弹出框
dialogVisible.value = true;
}
}
)
)
)
);
// 数据展示面板模板
myDiagram.nodeTemplateMap.add('infoPanel',
$(go.Node, "Spot",
{
resizable: true,
rotatable: true,
cursor: 'move',
_isLinkLabel: true,
},
new go.Binding("location", "loc"),
new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
new go.Binding('itemArray', 'portArray'), {
itemTemplate: $(go.Panel,
{
portId: "Top",
fromSpot: go.Spot.Top,
toSpot: go.Spot.Top,
fromLinkable: true,
toLinkable: true,
cursor: 'pointer',
alignment: go.Spot.Top,
visible: true,
contextMenu:
$("ContextMenu",
$("ContextMenuButton",
$(go.TextBlock, "Remove Port", { font: "bold 12px sans-serif", width: 100, textAlign: "center" }),
{
click: (e: any, obj: any) => removePort(obj.part.adornedObject),
"ButtonBorder.fill": "white",
"_buttonFillOver": "skyblue"
}
)
),
},
new go.Binding('portId', 'portId'),
new go.Binding('alignment', 'portKey', (portKey: string) => {
switch(portKey) {
case "top": return go.Spot.Top;
case "bottom": return go.Spot.Bottom;
case "left": return go.Spot.Left;
case "right": return go.Spot.Right;
default: return go.Spot.Top;
}
}),
new go.Binding('fromSpot', 'portKey', (portKey: string) => {
switch(portKey) {
case "top": return go.Spot.Top;
case "bottom": return go.Spot.Bottom;
case "left": return go.Spot.Left;
case "right": return go.Spot.Right;
default: return go.Spot.Top;
}
}),
new go.Binding('toSpot', 'portKey', (portKey: string) => {
switch(portKey) {
case "top": return go.Spot.Top;
case "bottom": return go.Spot.Bottom;
case "left": return go.Spot.Left;
case "right": return go.Spot.Right;
default: return go.Spot.Top;
}
}),
$(go.Shape, 'Rectangle',
{
strokeWidth: 1,
desiredSize: new go.Size(6, 6),
},
new go.Binding('visible', 'visible'),
)
),
},
$(go.Panel, "Spot",
$(go.Panel, "Auto",
$(go.Shape, { fill: '#f4f4f4', stroke: 'black', strokeWidth: 1 }), // 设置最外层边框
$(go.Panel, "Table",
// 设置内部边框
$(go.RowColumnDefinition, { row: 0, separatorStroke: 'black' }),
$(go.RowColumnDefinition, { row: 1, separatorStroke: 'black' }),
$(go.RowColumnDefinition, { row: 2, separatorStroke: 'black' }),
$(go.RowColumnDefinition, { row: 3, separatorStroke: 'black' }),
$(go.Panel, "Table",
$(go.TextBlock,
{
stroke: 'black',
margin: 4,
row: 0,
column: 0,
},
new go.Binding('text','key')
),
// 报警标志样式模板
$(go.Shape, "Triangle",
{
desiredSize: new go.Size(20, 20),
stroke: 'black',
row: 0,
column: 1,
margin: 4
},
{
toolTip: // 定义节点工具提示
$("ToolTip",
$(go.TextBlock, { margin: 4 },
new go.Binding("text", "riskData")) // 绑定设备的风险信息
)
},
new go.Binding('fill', 'color'),
new go.Binding('visible', '', (data, obj) => {
const nodeData = obj.part.data;
return nodeData.riskVisible !== false;
})
)
),
// DCS面板
$(go.Panel, "Table", { row: 1, column: 0 },
{
defaultColumnSeparatorStroke: 'black',
defaultRowSeparatorStroke: 'black'
},
new go.Binding('itemArray', 'DCSArray'),
{
itemTemplate: $(go.Panel, "TableRow",
// 参数名模板
$(go.TextBlock,
{
stroke: 'black',
margin: 4
},
new go.Binding('text', 'name')
),
// value模板
$(go.TextBlock,
{
stroke: 'black',
column: 1,
margin: 4
},
new go.Binding('text', 'value')
),
// 单位模板
$(go.TextBlock,
{
stroke: 'black',
column: 2,
margin: 4,
},
new go.Binding('text', 'unit')
),
new go.Binding('visible', '', (data, obj) => {
const nodeData = obj.part.data;
return nodeData.dcsVisible !== false;
})
)
}
),
// 告警数据
$(go.Panel, "Table", { row: 2, column: 0 },
{
defaultColumnSeparatorStroke: 'black',
defaultRowSeparatorStroke: 'black'
},
new go.Binding('itemArry', 'alarmArray'),
{
itemTemplate: $(go.Panel, "TableColumn",
$(go.TextBlock,
{
stroke: 'black',
margin: 4
},
new go.Binding('text', 'alarmName')
),
new go.Binding('visible', '', (data, obj) => {
const nodeData = obj.part.data;
return nodeData.alarmVisible !== false;
})
)
}
),
// 损伤数据
$(go.Panel, "Table", { row: 3, column: 0 },
{
defaultColumnSeparatorStroke: 'black',
defaultRowSeparatorStroke: 'black'
},
new go.Binding('itemArray', 'damageArray'),
{
itemTemplate: $(go.Panel, "TableRow",
// 损伤名模板
$(go.TextBlock,
{
stroke: 'black',
margin: 4
},
new go.Binding('text', 'damageName')
),
// value模板
$(go.TextBlock,
{
stroke: 'black',
column: 1,
margin: 4
},
new go.Binding('text', 'damageValue')
),
new go.Binding('visible', '', (data, obj) => {
const nodeData = obj.part.data;
return nodeData.damageVisible !== false;
})
)
}
),
)
)
)
)
)
// 节点间的连线模板
myDiagram.linkTemplate = myDiagram.linkTemplate =
$(go.Link, $(go.Link,
{ {
...@@ -433,6 +807,24 @@ function initDiagram() { ...@@ -433,6 +807,24 @@ function initDiagram() {
) )
); );
// 数据面板的连线模板
myDiagram.linkTemplateMap.add('infoPanelLink',
$(go.Link,
{
selectable: true,
resegmentable: true,
routing: go.Routing.AvoidsNodes,
curve: go.Curve.JumpGap,
toShortLength: 2,
adjusting: go.LinkAdjusting.End
},
new go.Binding("points"),
$(go.Shape, { isPanelMain: true, strokeWidth: 2, stroke: 'gray' }),
$(go.Shape, { isPanelMain: true, strokeWidth: 2, stroke: 'black', name: "FLOW", strokeDashArray: [10, 10] }),
)
)
// 画布提示工具函数 // 画布提示工具函数
function diagramInfo(model: any) { function diagramInfo(model: any) {
return "Model:\n" + model.nodeDataArray.length + " nodes, " + model.linkDataArray.length + " links"; return "Model:\n" + model.nodeDataArray.length + " nodes, " + model.linkDataArray.length + " links";
...@@ -511,13 +903,15 @@ function initDiagram() { ...@@ -511,13 +903,15 @@ function initDiagram() {
}).ofObject()) }).ofObject())
); );
const nodeDataArray = [ const nodeDataArray = [
{ key: "add1", color: "lightyellow", loc: new go.Point(-150, 200), portArray: [{portId: "top0", portKey: "top"}, {portId: "left0", portKey: "left"}, {portId: "right0", portKey: "right"}, {portId: "bottom0", portKey: "bottom"}], markArray: [{markId: "mark0"}] }, { key: "add1", color: "lightyellow", loc: new go.Point(-150, 200), portArray: [{portId: "top0", portKey: "top"}, {portId: "left0", portKey: "left"}, {portId: "right0", portKey: "right"}, {portId: "bottom0", portKey: "bottom"}] },
{ key: "add2", color: "lightblue", loc: new go.Point(100, 50), category: "zhaChi", portArray: [{portId: "bottom0", portKey: "bottom"}], markArray: [{markId: "mark0"}] }, { key: "add2", color: "lightblue", loc: new go.Point(100, 50), category: "zhaChi", portArray: [{portId: "bottom0", portKey: "bottom"}] },
{ key: "pipe1", color: "gray", loc: new go.Point(0, 100), category: "pipe", portArray: [{portId: "top0", portKey: "top"}], markArray: [{portId: "mark0"}]},
{ key: "管道信息面板", color: "red", loc: new go.Point(-80, -120), portArray: [{portId: "bottom0", portKey: "bottom"}], DCSArray: [{name: "流速", value: "20", unit: "m/s"}, {name: "温度", value: "30", unit: "℃"}], damageArray: [{damageName: "盐酸腐蚀", damageValue: "100%"}], alarmArray: [{alarmName: "警报"}], riskData: "高风险", category: "infoPanel"}
]; ];
const linkDataArray = [ const linkDataArray = [
{ from: "add1", fromPort: "top0", to: "add2", toPort: "bottom0", text: "1->2" }, { from: "add1", fromPort: "top0", to: "add2", toPort: "bottom0", text: "1->2" },
{ from: "管道信息面板", fromPort: "bottom0", to: "pipe1", toPort: "top0", category: "infoPanelLink"}
]; ];
myDiagram.model = myDiagram.model =
...@@ -549,6 +943,8 @@ function dragstart(event: any){ ...@@ -549,6 +943,8 @@ function dragstart(event: any){
event.dataTransfer.setData("node-type", "zhaChi"); event.dataTransfer.setData("node-type", "zhaChi");
} else if (target.id === "html") { } else if (target.id === "html") {
event.dataTransfer.setData("node-type", "html"); event.dataTransfer.setData("node-type", "html");
} else if (target.id === "pipe") {
event.dataTransfer.setData("node-type", "pipe");
} }
} }
...@@ -574,14 +970,20 @@ function drop(event: any) { ...@@ -574,14 +970,20 @@ function drop(event: any) {
// 获取拖动数据 // 获取拖动数据
let nodeType = event.dataTransfer.getData("node-type"); let nodeType = event.dataTransfer.getData("node-type");
let category = ""; let category = "";
let color = 'aqua';
let key = "html元素"; let key = "html元素";
if (nodeType === "zhaChi") { if (nodeType === "zhaChi") {
category = "zhaChi"; category = "zhaChi";
key = "渣池"; key = "渣池";
} }
if (nodeType === "pipe"){
category = "pipe";
color = 'gray';
key = "30x30 管道"
}
const newData = { const newData = {
key: key, key: key,
color: 'aqua', color: color,
loc: new go.Point(point.x, point.y), loc: new go.Point(point.x, point.y),
portArray: [], portArray: [],
markArray: [], markArray: [],
...@@ -695,6 +1097,54 @@ function toggleEditMode() { ...@@ -695,6 +1097,54 @@ function toggleEditMode() {
myDiagram.commitTransaction("changeModel"); myDiagram.commitTransaction("changeModel");
} }
// DCS数据在展示面板中的显示/隐藏
function dcsDataShow() {
myDiagram.startTransaction("changeDcsShowModel");
showDcsVisible.value = !showDcsVisible.value;
if(myDiagram){
myDiagram.nodes.each((node: go.Node) => {
myDiagram.model.setDataProperty(node.data, 'dcsVisible', showDcsVisible.value)
})
}
myDiagram.commitTransaction("changeDcsShowModel");
}
// 告警数据在展示面板中的显示/隐藏
function alarmDataShow() {
myDiagram.startTransaction("changeAlarmShowModel");
showAlarmVisible.value = !showAlarmVisible.value;
if(myDiagram){
myDiagram.nodes.each((node: go.Node) => {
myDiagram.model.setDataProperty(node.data, 'alarmVisible', showAlarmVisible.value)
})
}
myDiagram.commitTransaction("changeAlarmShowModel");
}
// 风险数据在展示面板中的显示/隐藏
function riskDataShow(){
myDiagram.startTransaction("changeRiskShowModel");
showRiskVisible.value = !showRiskVisible.value;
if(myDiagram){
myDiagram.nodes.each((node: go.Node) => {
myDiagram.model.setDataProperty(node.data, 'riskVisible', showRiskVisible.value)
})
}
myDiagram.commitTransaction("changeRiskShowModel");
}
// 损伤数据在展示面板中的显示/隐藏
function damageDataShow() {
myDiagram.startTransaction("changeDamageShowModel");
showDamageVisible.value = !showDamageVisible.value;
if(myDiagram){
myDiagram.nodes.each((node: go.Node) => {
myDiagram.model.setDataProperty(node.data, 'damageVisible', showDamageVisible.value)
})
}
myDiagram.commitTransaction("changeDamageShowModel");
}
onMounted(() => { onMounted(() => {
initDiagram() initDiagram()
}); });
...@@ -718,11 +1168,22 @@ onMounted(() => { ...@@ -718,11 +1168,22 @@ onMounted(() => {
} }
.layout-main { .layout-main {
width: 90%; width: 85%;
height: 900px; height: 900px;
background-color: #DAE4E4; background-color: #DAE4E4;
} }
.layout-right {
width: 5%;
height: 900px;
}
.btnClass {
width: 80px;
height: 80px;
margin: 10px;
}
.svg_class { .svg_class {
width: 100px; width: 100px;
height: 100px; height: 100px;
...@@ -736,4 +1197,10 @@ onMounted(() => { ...@@ -736,4 +1197,10 @@ onMounted(() => {
margin-bottom: 10px; margin-bottom: 10px;
margin-top: 10px; margin-top: 10px;
} }
.pipeClass {
margin-left: 5px;
margin-top: 15px;
margin-right: 5px;
border: 1px solid #000;
}
</style> </style>
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