<template>
<div>
<div style="width:100%">
<div id="myDiagramDiv"
style=" width: 100%; height: 550px; display: inline-block; vertical-align: top; position: relative; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); cursor: auto;">
<canvas tabindex="0" width="632" height="548"
style="position: absolute; top: 0px; left: 0px; z-index: 2; user-select: none; width: 632px; height: 548px; cursor: auto;">This
text is displayed if your browser does not support the Canvas HTML element.</canvas>
<div style="position: absolute; overflow: auto; width: 632px; height: 548px; z-index: 1;">
<div style="position: absolute; width: 1px; height: 1px;"></div>
</div>
</div>
<div id="infobox" style="display: inline-block; vertical-align: top;"><img id="Image" width="216" alt="" src="">
<h3 id="Title"></h3>
<!-- <p id="Description">Select a node to see more information.</p> -->
</div>
</div>
<div style="display: none;">
<p>This process flow diagram partially simulates the production process for gas and oil byproducts into their end
products.</p>
<p>Below is the JSON data for the model:</p>
<textarea id="mySavedModel">
{"class": "go.GraphLinksModel",
"nodeDataArray": [
{
"key":1, "pos":"-530 -400", "icon":"pyrolysis", "iconWidth": 100, "iconHeight": 100, "color":"orange",
"text":"蒽油1",
"imgsrc":"https://upload.wikimedia.org/wikipedia/commons/6/6c/Guelph.jpg"
},
{
"key":3, "pos":"500 -400", "icon":"finishedgas", "iconWidth": 100, "iconHeight": 100, "color":"red",
"text":"油罐",
"imgsrc":"https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/LPG_Truck.jpg/256px-LPG_Truck.jpg"
},
{
"key":4, "pos":"-630 -10", "icon":"polymerization", "iconWidth": 100, "iconHeight": 100, "portHeight": 12, "color":"#1B78FF",
"text":"辗泥机1",
"imgsrc":"https://upload.wikimedia.org/wikipedia/commons/thumb/4/4c/Plastics_engineering-Polymer_products.jpg/256px-Plastics_engineering-Polymer_products.jpg"
},
{
"key":5, "pos":"-330 -10", "icon":"polymerization", "iconWidth": 100, "iconHeight": 100, "portHeight": 12, "color":"#1B78FF",
"text":"辗泥机2",
"imgsrc":"https://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Lego_Color_Bricks.jpg/256px-Lego_Color_Bricks.jpg"
},
{
"key":2, "pos":"200 -200", "icon":"pyrolysis", "iconWidth": 100, "iconHeight": 100, "color":"orange",
"text":"蒽油",
"imgsrc":"https://upload.wikimedia.org/wikipedia/commons/6/6c/Guelph.jpg"
},
{
"key":6, "pos":"-80 -10", "icon":"polymerization", "iconWidth": 100, "iconHeight": 100, "portHeight": 12, "color":"#1B78FF",
"text":"辗泥机3",
"imgsrc":"https://upload.wikimedia.org/wikipedia/commons/thumb/4/4c/Plastics_engineering-Polymer_products.jpg/256px-Plastics_engineering-Polymer_products.jpg"
},
{
"key":7, "pos":"400 -10", "icon":"polymerization", "iconWidth": 100, "iconHeight": 100, "portHeight": 12, "color":"#1B78FF",
"text":"辗泥机4",
"imgsrc":"https://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Lego_Color_Bricks.jpg/256px-Lego_Color_Bricks.jpg"
},
{
"key":8, "pos":"-280 -420", "icon":"natgas", "iconWidth": 40, "iconHeight": 30, "portHeight": 12, "color":"black",
"text":"阀门"
},
{
"key":9, "pos":"300 -340", "icon":"natgas", "iconWidth": 40, "iconHeight": 30, "portHeight": 12, "color":"black",
"text":"阀门"
},
{
"key":10, "pos":"-630 -300", "icon":"natgas", "iconWidth": 40, "iconHeight": 30, "portHeight": 12, "color":"black",
"text":"阀门"
},
{
"key":11, "pos":"-330 -300", "icon":"natgas", "iconWidth": 40, "iconHeight": 30, "portHeight": 12, "color":"black",
"text":"阀门"
},
{
"key":12, "pos":"-80 -200", "icon":"natgas", "iconWidth": 40, "iconHeight": 30, "portHeight": 12, "color":"black",
"text":"阀门"
},
{
"key":13, "pos":"400 -200", "icon":"natgas", "iconWidth": 40, "iconHeight": 30, "portHeight": 12, "color":"black",
"text":"阀门"
}
],
"linkDataArray": [
{"from":3, "to":8, "toSpot":"right", "fromSpot":"left", "color":"red", "text1": "流速 20", "text2": "温度 30℃"},
{"from":8, "to":1, "toSpot":"right", "fromSpot":"left", "color":"red", "text1": "流速 20", "text2": "温度 30℃"},
{"from":3, "to":9, "toSpot":"right", "fromSpot":"bottom", "color":"red", "text1": "流速 20", "text2": "温度 30℃" },
{"from":1, "to":10,"toSpot":"right", "fromSpot":"bottom", "color":"orange" },
{"from":1, "to":11,"toSpot":"left", "fromSpot":"bottom", "color":"orange" , "text1": "流速 20", "text2": "温度 30℃" },
{"from":10, "to":4,"toSpot":"top", "fromSpot":"left", "color":"orange" , "text1": "流速 20", "text2": "温度 30℃" },
{"from":11, "to":5,"toSpot":"top", "fromSpot":"right", "color":"orange" },
{"from":9, "to":2 ,"toSpot":"top","fromSpot":"left", "color":"red"},
{"from":2, "to":12,"toSpot":"right", "fromSpot":"left", "color":"orange" , "text1": "流速 20", "text2": "温度 30℃" },
{"from":12, "to":6,"toSpot":"top", "fromSpot":"left", "color":"orange" },
{"from":2, "to":13 ,"toSpot":"left", "color":"orange", "text1": "流速 20", "text2": "温度 30℃"},
{"from":13, "to":7 ,"toSpot":"top", "color":"orange"}
]} </textarea>
</div>
</div>
</template>
<script>
import go from 'gojs'
export default {
data () {
return {
opacity: 1,
down: true,
myDiagram: null
}
},
methods: {
init () {
if (window.goSamples) goSamples(); // init for these samples -- you don't need to call this
var colors = {
'red': '#be4b15',
'green': '#52ce60',
'blue': '#6ea5f8',
'lightred': '#fd8852',
'lightblue': '#afd4fe',
'lightgreen': '#b9e986',
'pink': '#faadc1',
'purple': '#d689ff',
'orange': '#fdb400',
'black': '#000000'
}
// Icons derived from SVG paths designed by freepik: http://www.freepik.com/
var icons = {};
icons.natgas =
"M928 448h-128v-32c0-35.296-28.704-64-64-64h-133.344V288H736c35.296 0 64-28.704 64-64V192c0-35.296-28.704-64-64-64H320c-35.296 0-64 28.704-64 64v32c0 35.296 28.704 64 64 64h122.656v64H320c-35.296 0-64 28.704-64 64v32H96c-35.296 0-64 28.704-64 64v320c0 35.296 28.704 64 64 64h832c35.296 0 64-28.704 64-64V512c0-35.296-28.704-64-64-64zM320 192h416l0.032 32H320V192z m186.656 96h32v64h-32V288zM320 416h416v32H320v-32zM96 832V512h38.432v320H96z m102.432 0V512h640.224v320H198.432z m704.224 0V512H928l0.064 320h-25.408z";
icons.oil =
"F M190.761,109.999c-3.576-9.132-8.076-22.535,7.609-37.755c0.646,13.375,14.067,13.99,11.351,36.794\
c6.231-2.137,6.231-2.137,9.188-3.781c17.285-9.612,20.39-25.205,7.64-42.896c-7.316-10.153-11.945-20.58-10.927-33.23\
c-4.207,4.269-5.394,9.444-6.744,17.129c-5.116-3.688,3.067-41.28-22.595-46.26c5.362,13.836,7.564,25.758-2.607,40.076\
c-0.667-5.422-3.255-12.263-8.834-17.183c-0.945,16.386,0.97,23.368-9.507,44.682c-2.945,8.902-5.02,17.635,0.533,26.418\
C171.354,102.673,180.555,108.205,190.761,109.999z\
M330.738,371.614h-15.835v-61.829l-74.409-78.541v-21.516c0-6.073-4.477-11.087-10.309-11.957v-82.156h-63.632v82.156\
c-5.831,0.869-10.308,5.883-10.308,11.957v21.516l-74.409,78.541v61.829H66l-25.124,25.123h314.984L330.738,371.614z\
M166.554,371.614h-61.717v-29.782h61.717V371.614z M166.554,319.956h-61.717v-1.007l51.471-54.329\
c0.555,5.513,4.813,9.919,10.246,10.729V319.956L166.554,319.956z M291.903,371.614h-61.718v-29.782h61.718V371.614z\
M291.903,319.956h-61.718V275.35c5.435-0.811,9.691-5.217,10.246-10.729l51.472,54.329V319.956z"
icons.pyrolysis =
"F M226.46,198.625v-75.5h-87.936v-19.391h-14.304V92.319h-5.079l-3.724-82.777H91.766l-3.724,82.777h-6.18v11.415H68.535\
V92.319h-5.079L59.731,9.542H36.08l-3.724,82.777h-6.18v11.415H11.872v94.891H0v35.167h243.333v-35.167H226.46z M61.355,191.792h-28\
v-69.333h28V191.792z M117.041,191.792h-28v-69.333h28V191.792z M168.46,198.625h-29.936v-17.5h29.936V198.625z M206.46,198.625h-18\
v-37.5h-49.936v-18h67.936V198.625z";
icons.fractionation =
"F M224.609,218.045l-5.24-173.376h9.172V18.297h-9.969L218.019,0h-32.956l-0.553,18.297h-9.969v26.372h9.171l-2.475,81.878\
h-39.196l-1.833-52.987h8.998V47.188h-9.91l-0.633-18.297h-32.913l-0.633,18.297h-9.911V73.56h8.999l-1.833,52.987H62.081\
l-0.974-24.097h8.767V76.079h-9.833l-0.74-18.298H26.446l-0.739,18.298h-9.832v26.371h8.766L19.97,218.045H3.041v26.371h238.333\
v-26.371z M144.536,198.667h34.522l-0.586,19.378h-33.267L144.536,198.667z M143.624,172.296l-0.67-19.378h37.487\
l-0.586,19.378H143.624z M100.792,172.296H63.93l-0.783-19.378h38.315L100.792,172.296z M99.88,198.667l-0.67,19.378h-33.43\
l-0.783-19.378H99.88z";
icons.gasprocessing =
"F M242.179,212.635V58.634h-80.936v40.877h-13.465l-1.351-33.828h5.284V45.247h-6.1l-0.415-10.382h6.515V14.431h-46.927\
v20.435h6.515l-0.415,10.382h-6.1v20.436h5.284l-2.8,70.125H96.186V95.007H10.642v117.628H0v25.755h252.82v-25.755H242.179z\
M73.501,135.808H51.714v76.827H33.327v-94.942h40.174V135.808z M137.797,213.516h-19.099v-88h19.099V213.516z M219.494,212.635\
h-18.316v-51.411h18.316V212.635z M219.494,138.539h-18.316V99.511h-17.25V81.319h35.566V138.539z";
icons.polymerization =
"F M399.748,237.029 L363.965,174.401 345.094,174.401 343.113,155.463 326.566,155.463 322.797,29.385 290.486,29.385\
286.715,155.463 270.17,155.463 261.634,237.029 242.029,237.029 242.029,190.314 192.029,190.314 192.029,230.587 109.84,187.329\
109.84,230.486 27.84,187.329 27.84,237.029 0,237.029 0,394.674 424.059,394.674 424.059,237.029z";
icons.finishedgas =
"F M422.504,346.229v-68.306h-16.678v-24.856c0-21.863-16.199-39.935-37.254-42.882v-0.798\
c0-26.702-21.723-48.426-48.426-48.426h-1.609c-26.699,0-48.426,21.724-48.426,48.426v87.633h-23.641v-93.169\
c0-6.083-3.248-11.394-8.096-14.333c5.662-1.667,9.799-6.896,9.799-13.098c0-7.544-6.117-13.661-13.662-13.661h-10.981v-12.727h-17\
v12.727h-10.984c-7.545,0-13.66,6.116-13.66,13.661c0,6.202,4.137,11.431,9.799,13.098c-4.848,2.94-8.098,8.25-8.098,14.333v93.169\
h-23v-85.596c0-4.458-3.613-8.071-8.07-8.071h-16.412v-87.591c0-16.03-13.041-29.071-29.07-29.071v-1.267\
c0-23.608-19.139-42.748-42.748-42.748S21.54,61.817,21.54,85.425v260.805H0v55.139h444.045v-55.139H422.504z M286.256,209.387\
c0-17.801,14.48-32.284,32.281-32.284h1.609c17.803,0,32.285,14.483,32.285,32.284v1.559\
c-19.059,4.545-33.232,21.673-33.232,42.124v24.855h-16.676v19.098h-16.27v-87.635H286.256z M302.525,313.162v33.067h-16.27\
v-33.067H302.525z M270.113,313.162v33.067h-23.641v-33.067H270.113z M144.447,219.496v85.596c0,4.458,3.613,8.071,8.07,8.071\
h31.07v33.068h-47.482V219.496H144.447z M107.035,102.834c7.129,0,12.93,5.8,12.93,12.929v87.591h-12.93V102.834z M107.035,219.496\
h12.93v126.733h-12.93V219.496z";
icons.valve =
"M928 448h-128v-32c0-35.296-28.704-64-64-64h-133.344V288H736c35.296 0 64-28.704 64-64V192c0-35.296-28.704-64-64-64H320c-35.296 0-64 28.704-64 64v32c0 35.296 28.704 64 64 64h122.656v64H320c-35.296 0-64 28.704-64 64v32H96c-35.296 0-64 28.704-64 64v320c0 35.296 28.704 64 64 64h832c35.296 0 64-28.704 64-64V512c0-35.296-28.704-64-64-64zM320 192h416l0.032 32H320V192z m186.656 96h32v64h-32V288zM320 416h416v32H320v-32zM96 832V512h38.432v320H96z m102.432 0V512h640.224v320H198.432z m704.224 0V512H928l0.064 320h-25.408z";
var $ = go.GraphObject.make; // for conciseness in defining templates
this.myDiagram = $(go.Diagram, "myDiagramDiv", // create a Diagram for the DIV HTML element
{
maxSelectionCount: 1, // users can select only one part at a time
"toolManager.hoverDelay": 10, // how quickly tooltips are shown
initialAutoScale: go.Diagram.Uniform, // scale to show all of the contents
"ChangedSelection": this.onSelectionChanged, // view additional information
});
function infoString (obj) {
var part = obj.part;
if (part instanceof go.Adornment) part = part.adornedPart;
var msg = "";
if (part instanceof go.Link) {
msg = "";
} else if (part instanceof go.Node) {
// msg = part.data.text + ":\n\n" + part.data.description;
}
return msg;
}
// A data binding conversion function. Given an name, return the Geometry.
// If there is only a string, replace it with a Geometry object, which can be shared by multiple Shapes.
function geoFunc (geoname) {
var geo = icons[geoname];
if (typeof geo === "string") {
geo = icons[geoname] = go.Geometry.parse(geo, true);
}
return geo;
}
this.myDiagram.nodeTemplate =
$(go.Node, "Spot",
{
locationObjectName: 'main',
locationSpot: go.Spot.Center,
// toolTip:
// $("ToolTip",
// $(go.TextBlock, { margin: 4, width: 140 },
// new go.Binding("text", "", infoString).ofObject())
// )
},
new go.Binding("location", "pos", go.Point.parse).makeTwoWay(go.Point.stringify),
$(go.Panel, "Vertical",
$(go.Panel, "Horizontal",
$(go.TextBlock, new go.Binding("text", "name")),
$(go.TextBlock, new go.Binding("text", "", function (data) {
// return "wen " + "dfgsgsdf";
}))
),
$(go.Shape, {
name: 'icon',
width: 1, height: 1,
stroke: null, strokeWidth: 0,
fill: colors.blue,
},
new go.Binding("fill", "color", function (c) { return colors[c]; }),
new go.Binding("width", "iconWidth"),
new go.Binding("height", "iconHeight"),
new go.Binding("geometry", "icon", geoFunc)),
$(go.Shape, {
name: 'main',
width: 40, height: 30,
margin: new go.Margin(-1, 0, 0, 0),
portId: "",
stroke: null, strokeWidth: 0,
fill: colors.blue,
},
new go.Binding("fill", "color", function (c) { return colors[c]; }),
new go.Binding("width", "portWidth"),
new go.Binding("height", "portHeight"))
),
$(go.TextBlock, {
font: "Bold 14px Lato, sans-serif",
textAlign: "left",
margin: 3,
maxSize: new go.Size(100, NaN),
alignment: go.Spot.Left,
alignmentFocus: go.Spot.BottomCenter
},
new go.Binding("text"))
);
// Some links need a custom to or from spot
function spotConverter (dir) {
if (dir === "left") return go.Spot.LeftSide;
if (dir === "right") return go.Spot.RightSide;
if (dir === "top") return go.Spot.TopSide;
if (dir === "bottom") return go.Spot.BottomSide;
if (dir === "rightsingle") return go.Spot.Right;
}
this.myDiagram.linkTemplate =
$(go.Link, {
toShortLength: -2,
fromShortLength: -2,
layerName: "Background",
routing: go.Link.Orthogonal,
corner: 15,
fromSpot: go.Spot.RightSide,
toSpot: go.Spot.LeftSide,
relinkableFrom: true,
relinkableTo: true,
reshapable: true,
curviness: 15,
},
new go.Binding("fromSpot", "fromSpot", function (d) { return spotConverter(d); }),
new go.Binding("toSpot", "toSpot", function (d) { return spotConverter(d); }),
new go.Binding("points").makeTwoWay(),
$(go.Panel, "Vertical",
$(go.TextBlock, {
name: "text1Block",
alignment: new go.Spot(0.5, 0, 0, 10),
font: "10pt sans-serif",
stroke: "black",
margin: 2,
}),
$(go.Shape, { width: 300, height: 50, fill: null, strokeWidth: 0, }),
$(go.TextBlock, {
name: "text2Block",
alignment: new go.Spot(0.5, 1, 0, -10),
font: "10pt sans-serif",
stroke: "black",
margin: 2,
})
),
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
new go.Binding("text", "", function (data, node) {
node.findObject("text1Block").text = data.text1;
node.findObject("text2Block").text = data.text2;
return "";
}),
// $(go.Panel, "Vertical",
// $(go.TextBlock, { text: "text1", alignment: new go.Spot(0.5, 0, 0, 10) }),
// $(go.Shape, { width: 300, height: 50, fill: null, strokeWidth: 0, }),
// $(go.TextBlock, { text: "text2", alignment: new go.Spot(0.5, 1, 0, -10) })
// ),
$(go.Shape, { isPanelMain: true, stroke: colors.lightblue, strokeWidth: 10 },
new go.Binding("stroke", "color", function (c) { return colors[c]; })),
$(go.Shape, { isPanelMain: true, stroke: "white", strokeWidth: 3, name: "PIPE", strokeDashArray: [20, 40] })
);
// console.log(document.getElementById("mySavedModel").value);
this.myDiagram.model = go.Model.fromJson(document.getElementById("mySavedModel").value);
this.loop();
},
loop () {
var diagram = this.myDiagram;
let than = this
setTimeout(function () {
var oldskips = diagram.skipsUndoManager;
diagram.skipsUndoManager = true;
diagram.links.each(function (link) {
var shape = link.findObject("PIPE");
var off = shape.strokeDashOffset - 3;
// animate (move) the stroke dash
shape.strokeDashOffset = (off <= 0) ? 60 : off;
// animte (strobe) the opacity:
// if (than.down) than.opacity = than.opacity - 0.01;
// else than.opacity = than.opacity + 0.003;
if (than.opacity <= 0) { than.down = !than.down; than.opacity = 1 }
if (than.opacity > 1) { than.down = !than.down; than.opacity = 1; }
shape.opacity = than.opacity;
});
diagram.skipsUndoManager = oldskips;
than.loop();
}, 50);
},
onSelectionChanged (e) {
console.log(e);
var node = e.diagram.selection.first();
if (!(node instanceof go.Node)) return;
var data = node.data;
var image = document.getElementById('Image');
var title = document.getElementById('Title');
// var description = document.getElementById('Description');
if (data.imgsrc) {
image.src = data.imgsrc;
image.alt = data.caption;
} else {
image.src = "";
image.alt = "";
}
title.textContent = data.text
// description.textContent = data.description
}
},
mounted () {
if (window.init) { init(); }
this.init()
},
}
</script>
<style></style>在gojs加了一些修改
参考gojs的案列https://jshare.com.cn/new/gojs
扫一扫
2076
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
