Skip to content

G
gojs-project
Commit 24f53b99 by jlc
Options

update：代码完善和控制台bug修改

parent bb04c09c
Showing with 136 additions and 349 deletions
src/stageAchievements/imageNode.vue
......@@ -77,6 +77,94 @@ const showAlarmVisible = ref(true)
const showRiskVisible = ref(true)
const showDamageVisible = ref(true)
// 端口模板
const portPanel = $(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'),
)
)
// 标定点模板
const markPanel = $(go.Panel,
{
portId: "mark",
cursor: 'pointer',
alignment: new go.Spot(0.5, 0.3),
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"
},
)
)
// 切换添加端口/标定点的形式
function toggleDivs(value: boolean) {
changeModel.value = value;
......@@ -114,94 +202,12 @@ function initDiagram() {
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'),
)
),
itemTemplate: portPanel,
},
$(go.Panel, 'Spot',
// 标定点模板
new go.Binding('itemArray', 'markArray'), {
itemTemplate: $(go.Panel,
{
portId: "mark",
cursor: 'pointer',
alignment: new go.Spot(0.5, 0.2),
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"
},
)
)
itemTemplate: markPanel
},
$(go.Panel, 'Spot',
$(go.Shape, "RoundedRectangle",
......@@ -236,7 +242,7 @@ function initDiagram() {
$("ContextMenuButton",
$(go.TextBlock, "Cut", { font: "bold 12px sans-serif", width: 100, textAlign: "center" }),
{
click: (e) => e.diagram.commandHandler.cutSelection(),
click: (e: any) => e.diagram.commandHandler.cutSelection(),
"ButtonBorder.fill": "white",
"_buttonFillOver": "skyblue",
}
......@@ -244,7 +250,7 @@ function initDiagram() {
$("ContextMenuButton",
$(go.TextBlock, "Copy", { font: "bold 12px sans-serif", width: 100, textAlign: "center" }),
{
click: (e) => e.diagram.commandHandler.copySelection(),
click: (e: any) => e.diagram.commandHandler.copySelection(),
"ButtonBorder.fill": "white",
"_buttonFillOver": "skyblue",
}
......@@ -270,93 +276,12 @@ function initDiagram() {
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'),
)
),
itemTemplate: portPanel,
},
$(go.Panel, 'Spot',
// 标定点模板
new go.Binding('itemArray', 'markArray'), {
itemTemplate: $(go.Panel,
{
portId: "mark",
cursor: 'pointer',
alignment: new go.Spot(0.9, 0.2),
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"
},
))
itemTemplate: markPanel
},
$(go.Panel, 'Spot',
$(go.Shape, "RoundedRectangle",
......@@ -392,7 +317,7 @@ function initDiagram() {
$("ContextMenuButton",
$(go.TextBlock, "Cut", { font: "bold 12px sans-serif", width: 100, textAlign: "center" }),
{
click: (e) => e.diagram.commandHandler.cutSelection(),
click: (e: any) => e.diagram.commandHandler.cutSelection(),
"ButtonBorder.fill": "white",
"_buttonFillOver": "skyblue",
}
......@@ -400,7 +325,7 @@ function initDiagram() {
$("ContextMenuButton",
$(go.TextBlock, "Copy", { font: "bold 12px sans-serif", width: 100, textAlign: "center" }),
{
click: (e) => e.diagram.commandHandler.copySelection(),
click: (e: any) => e.diagram.commandHandler.copySelection(),
"ButtonBorder.fill": "white",
"_buttonFillOver": "skyblue",
}
......@@ -431,93 +356,12 @@ function initDiagram() {
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'),
)
),
},
itemTemplate: portPanel,
},
$(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"
},
))
itemTemplate: markPanel
},
$(go.Panel, 'Spot',
$(go.Shape, "RoundedRectangle",
......@@ -572,65 +416,8 @@ function initDiagram() {
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'),
)
),
},
itemTemplate: portPanel,
},
$(go.Panel, "Spot",
$(go.Panel, "Auto",
$(go.Shape, { fill: '#f4f4f4', stroke: 'black', strokeWidth: 1 }), // 设置最外层边框
......@@ -667,7 +454,7 @@ function initDiagram() {
)
},
new go.Binding('fill', 'color'),
new go.Binding('visible', '', (data, obj) => {
new go.Binding('visible', '', (data: any, obj: any) => {
const nodeData = obj.part.data;
return nodeData.riskVisible !== false;
})
......@@ -708,7 +495,7 @@ function initDiagram() {
},
new go.Binding('text', 'unit')
),
new go.Binding('visible', '', (data, obj) => {
new go.Binding('visible', '', (data: any, obj: any) => {
const nodeData = obj.part.data;
return nodeData.dcsVisible !== false;
})
......@@ -716,28 +503,28 @@ function initDiagram() {
}
),
// 告警数据
$(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: 2, column: 0 },
// {
// defaultColumnSeparatorStroke: 'black',
// defaultRowSeparatorStroke: 'black'
// },
// new go.Binding('itemArray', 'alarmArray'),
// {
// itemTemplate: $(go.Panel, "TableColumn",
// $(go.TextBlock,
// {
// stroke: 'black',
// margin: 4
// },
// new go.Binding('text', 'alarmName')
// ),
// new go.Binding('visible', '', (data: any, obj: any) => {
// const nodeData = obj.part.data;
// return nodeData.alarmVisible !== false;
// })
// )
// }
// ),
// 损伤数据
$(go.Panel, "Table", { row: 3, column: 0 },
{
......@@ -764,7 +551,7 @@ function initDiagram() {
},
new go.Binding('text', 'damageValue')
),
new go.Binding('visible', '', (data, obj) => {
new go.Binding('visible', '', (data: any, obj: any) => {
const nodeData = obj.part.data;
return nodeData.damageVisible !== false;
})
......@@ -842,8 +629,8 @@ function initDiagram() {
$("ContextMenuButton",
$(go.TextBlock, "New Node", { font: "bold 12px sans-serif", width: 100, textAlign: "center" }),
{
click: function(e) {
e.diagram.commit(function(d) {
click: function(e: any) {
e.diagram.commit(function(d: any) {
var data = {
key: "new node",
color: 'aqua',
......@@ -867,7 +654,7 @@ function initDiagram() {
$("ContextMenuButton",
$(go.TextBlock, "Paste", { font: "bold 12px sans-serif", width: 100, textAlign: "center" }),
{
click: (e) => e.diagram.commandHandler.pasteSelection(e.diagram.toolManager.contextMenuTool.mouseDownPoint),
click: (e: any) => e.diagram.commandHandler.pasteSelection(e.diagram.toolManager.contextMenuTool.mouseDownPoint),
"ButtonBorder.fill": "white",
"_buttonFillOver": "skyblue",
}
......@@ -876,11 +663,11 @@ function initDiagram() {
$("ContextMenuButton",
$(go.TextBlock, "Undo", { font: "bold 12px sans-serif", width: 100, textAlign: "center" }),
{
click: function(e) { e.diagram.commandHandler.undo(); },
click: function(e: any) { e.diagram.commandHandler.undo(); },
"ButtonBorder.fill": "white",
"_buttonFillOver": "skyblue",
},
new go.Binding("visible", "", function(o) { // 根据是否有可撤销的操作来决定是否可见
new go.Binding("visible", "", function(o: any) { // 根据是否有可撤销的操作来决定是否可见
if (o && o.diagram) {
return o.diagram.commandHandler.canUndo(); // 可以撤销返回true，否则返回false
}
......@@ -890,11 +677,11 @@ function initDiagram() {
$("ContextMenuButton",
$(go.TextBlock, "Redo", { font: "bold 12px sans-serif", width: 100, textAlign: "center" }),
{
click: function(e) { e.diagram.commandHandler.redo(); },
click: function(e: any) { e.diagram.commandHandler.redo(); },
"ButtonBorder.fill": "white",
"_buttonFillOver": "skyblue",
},
new go.Binding("visible", "", function(o) { // 根据是否有可重做的操作来决定是否可见
new go.Binding("visible", "", function(o: any) { // 根据是否有可重做的操作来决定是否可见
if (o && o.diagram) {
return o.diagram.commandHandler.canRedo(); // 可以重做返回true，否则返回false
}
......@@ -915,9 +702,9 @@ function initDiagram() {
});
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"}] },
{ key: "add2", color: "lightblue", loc: new go.Point(100, 50), category: "zhaChi", portArray: [{portId: "bottom0", portKey: "bottom"}] },
{ key: "add3", color: "lightblue", loc: new go.Point(300, 150), category: "zhaChi", portArray: [{portId: "bottom0", portKey: "bottom"}] },
{ 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: [] },
{ key: "add2", color: "lightblue", loc: new go.Point(100, 50), category: "zhaChi", portArray: [{portId: "bottom0", portKey: "bottom"}], markArray: [] },
{ key: "add3", color: "lightblue", loc: new go.Point(300, 150), category: "zhaChi", portArray: [{portId: "bottom0", portKey: "bottom"}], markArray: [] },
{ key: "pipe1", color: "gray", loc: new go.Point(0, 100), category: "pipe", portArray: [{portId: "top0", portKey: "top"}], markArray: [{portId: "mark0"}]},
{ key: "pipe1信息面板", color: "red", loc: new go.Point(-80, -120), portArray: [{portId: "top0", portKey: "top"}, {portId: "left0", portKey: "left"}, {portId: "right0", portKey: "right"}, {portId: "bottom0", portKey: "bottom"}], DCSArray: [{name: "流速", value: "20", unit: "m/s"}, {name: "温度", value: "30", unit: "℃"}], damageArray: [{damageName: "盐酸腐蚀", damageValue: "100%"}], alarmArray: [{alarmName: "警报"}], riskData: "高风险", category: "infoPanel"}
];
......
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