vue 使用 gojs

vue create gojs-vue
npm i -S element-ui

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

引入gojs

npm install gojs --saveimport gojs from 'gojs'
Vue.prototype.go = gojs

页面代码

<template><div><el-col :span="4"><el-card>数据对象</el-card><div class="palettezone" style=" width: 110px;margin-left: 15px"><div class="draggable" draggable="true" data-category="powerGridData" data-objid="57"data-icon="diaokongquyu"><span class="icon iconfont icon-quyuguanli"></span>&nbsp;调控区域</div><div class="draggable" draggable="true" data-category="powerGridData" data-objid="60"data-icon="changzhan"><span class="icon iconfont icon-xingzhuang2"></span>&nbsp;厂站</div><div class="draggable" draggable="true" data-category="powerGridData" data-objid="67"data-icon="dianlibianyaqi"><span class="icon iconfont icon-bianyaqiyunhangpingjia"></span>&nbsp;电力变压器</div><div class="draggable" draggable="true" data-category="powerGridData" data-objid="68"data-icon="dianlibianyaqiraozu"><span class="icon iconfont icon-bianyaqi1"></span>&nbsp;电力变压器绕组</div><div class="draggable" draggable="true" data-category="powerGridData" data-objid="69"data-icon="busbar"><span class="icon iconfont icon-dituleixianlu"></span>&nbsp;母线</div><div class="draggable" draggable="true" data-category="powerGridData" data-objid="70"data-icon="jiaoliuxianduan"><span class="icon iconfont icon-gongjiaoxianlu"></span>&nbsp;交流线段</div><div class="draggable" draggable="true" data-category="powerGridData" data-objid="71"data-icon="jiaoliuxianluduandian"><span class="icon iconfont icon-xianlu"></span>&nbsp;交流线路端点</div><div class="draggable" draggable="true" data-category="powerGridData" data-objid="72"data-icon="dianlifuhexianlu"><span class="icon iconfont icon-fuhefenxi"></span>&nbsp;电力负荷线路</div><div class="draggable" draggable="true" data-category="powerGridData" data-objid="77"data-icon="fadianjizu"><span class="icon iconfont icon-fadianji"></span>&nbsp;发电机组</div><div class="draggable" draggable="true" data-category="powerGridData" data-objid="75"data-icon="binglianbuchangqi"><span class="icon iconfont icon-lianjie_"></span>&nbsp;并联补偿器</div><div class="draggable" draggable="true" data-category="powerGridData" data-objid="76"data-icon="chuanlianbuchangqi"><span class="icon iconfont icon-dibudaohanglan-"></span>&nbsp;串联补偿器</div><div class="draggable" draggable="true" data-category="powerGridData" data-objid="80"data-icon="xitongliangce"><span class="icon iconfont icon-celiang"></span>&nbsp;系统量测</div></div></el-col><el-col :span="20" :lg="20" :xl="20" style="padding-left: 10px;float: left"><el-tabs v-model="activeName"><el-tab-pane label="GOJS画布" name="first"><el-card><el-button size="small" icon="el-icon-circle-plus-outline">新建任务</el-button><el-cardstyle="z-index: 100;height: 370px"ref="topTable"><div :id="idName" class="myDiagram"></div></el-card></el-card></el-tab-pane></el-tabs></el-col></div>
</template><script>export default {data() {return {activeName: 'first',idName: "myDiagramDiv1",myDiagram: {}, //画布对象nodeObjTemp: {},keyValueFalg: 0,}},mounted() {//初始化画布this.init();},components: {},methods: {nodeDoubleClick(e, obj) {var part = obj.part;},newNode(category, loc, text, color, objid, classId, gid, className, pkCol, geo) {this.keyValueFalg++;if (category == "powerGridData") {//创建分组节点this.nodeObjTemp = {fromKey: "",category: category,objid: objid,text: text,loc: loc.x + " " + loc.y,key: this.keyValueFalg,color: color,isGroup: true,queryFields: "",queryFieldsTemp: [],isFilter: false,queryCondition: "",queryConditionTemp: {powerGrid: [],dataObject: {isGroup: false,objid: "",key: "",text: "数据对象",fromKey: "",isFilter: false,group: this.keyValueFalg,category: "Conditional",queryCondition: "",queryConditionTemp: {checkFlag: false,paramFlag: false,querySql: '',startTime: "",endTime: '',startField: "",endField: "",startParam: "",timeInterval: '',selectedtimeInterval: '',endParam: "",condition: [],sort: {field: "",type: ""}},queryFieldsTemp: [],queryFields: ""}},geo: geo //"earth"  "envelope"}//新增分组this.myDiagram.startTransaction("new group");this.myDiagram.model.addNodeData(this.nodeObjTemp);this.myDiagram.commitTransaction("new group");//新增电网对象this.keyValueFalg++let region = {text: "调控区域", group: this.nodeObjTemp.key, isGroup: false,key: this.keyValueFalg, objid: 57,queryConditionTemp: {isFilter: true, condition: [], xiandiaoConditionList: [],},queryCondition: "",queryFields: "region_name,gid",tabFlag: 1, category: "Data", querySql: '',}this.keyValueFalg++let subarea = {text: "子控制区", group: this.nodeObjTemp.key, isGroup: false,key: this.keyValueFalg, objid: 82,queryConditionTemp: {isFilter: true, condition: []},queryCondition: "",queryFields: "name,gid",tabFlag: 1, category: "Data", querySql: '',}this.keyValueFalg++let bvSubstation = {text: "厂站基准电压", group: this.nodeObjTemp.key, isGroup: false,key: this.keyValueFalg, objid: 58,queryConditionTemp: {isFilter: true, condition: []},queryCondition: "",queryFields: "bv_name,bv_gid",tabFlag: 1, category: "Data", querySql: '',}this.keyValueFalg++let substation = {text: "厂站", group: this.nodeObjTemp.key, isGroup: false,key: this.keyValueFalg, objid: 60,queryConditionTemp: {isFilter: false, condition: [],},queryCondition: "",queryFields: "substation_name,substation_gid",tabFlag: 1, category: "Data", querySql: '',}this.keyValueFalg++let powerTransformer = {text: "变压器", group: this.nodeObjTemp.key, isGroup: false,key: this.keyValueFalg, objid: 67, queryCondition: "",queryConditionTemp: {isFilter: false, condition: []},queryFields: "",tabFlag: 1, category: "Data", querySql: '',}this.keyValueFalg++let transformerWinding = {text: "变压器绕组", group: this.nodeObjTemp.key, isGroup: false,key: this.keyValueFalg, objid: 68, queryCondition: "",queryConditionTemp: {isFilter1: true,condition1: ["高压侧", "中压侧", "低压侧"],isFilter: false,condition: []},queryFields: "",tabFlag: 1, category: "Data", querySql: ''}this.keyValueFalg++let generatingUnit = {text: "发电机组",group: this.nodeObjTemp.key, isGroup: false,key: this.keyValueFalg,objid: 77,queryCondition: "",queryConditionTemp: {isFilter: false, condition: []},queryFields: "",tabFlag: 1, category: "Data",querySql: '',}this.keyValueFalg++let busbarSection = {text: "母线",group: this.nodeObjTemp.key, isGroup: false,key: this.keyValueFalg,objid: 69,queryCondition: "",queryConditionTemp: {isFilter: false, condition: []},queryFields: "",tabFlag: 1, category: "Data",querySql: '',}this.keyValueFalg++let aClineSegment = {text: "交流线段",group: this.nodeObjTemp.key, isGroup: false,key: this.keyValueFalg,objid: 70,queryCondition: "",queryConditionTemp: {isFilter: false, condition: []},queryFields: "aclinesegment_gid,aclinesegment_name",tabFlag: 1, category: "Data",querySql: '',}this.keyValueFalg++let aCLineEnd = {text: "交流线路端点",group: this.nodeObjTemp.key, isGroup: false,key: this.keyValueFalg,objid: 71,queryCondition: "",queryConditionTemp: {isFilter: false, condition: []},queryFields: "",tabFlag: 1, category: "Data",querySql: '',}this.keyValueFalg++let energyConsumer = {text: "电力负荷线路",group: this.nodeObjTemp.key, isGroup: false,key: this.keyValueFalg,objid: 72,queryCondition: "",queryConditionTemp: {isFilter: false, condition: []},queryFields: "",tabFlag: 1, category: "Data",querySql: '',}this.keyValueFalg++let compensator_P = {text: "并联补偿器",group: this.nodeObjTemp.key, isGroup: false,key: this.keyValueFalg,objid: 75,queryCondition: "",queryConditionTemp: {isFilter: false, condition: []},queryFields: "",tabFlag: 1, category: "Data",querySql: '',}this.keyValueFalg++let compensator_S = {text: "串联补偿器",group: this.nodeObjTemp.key, isGroup: false,key: this.keyValueFalg,objid: 76,queryCondition: "",queryConditionTemp: {isFilter: false, condition: []},queryFields: "",tabFlag: 1, category: "Data",querySql: '',}this.keyValueFalg++let systemMeasurement = {text: "系统量测", group: this.nodeObjTemp.key, isGroup: false,key: this.keyValueFalg,objid: 80,queryConditionTemp: {isFilter: false, condition: []},queryCondition: "",queryFields: "",tabFlag: 1, category: "Data", querySql: '',}this.myDiagram.startTransaction("new node");//开始生成节点//创建数据节点this.keyValueFalg++this.nodeObjTemp.queryConditionTemp.dataObject.key = this.keyValueFalgthis.myDiagram.model.addNodeData(this.nodeObjTemp.queryConditionTemp.dataObject);if (objid == 57) { // 调控区域this.nodeObjTemp.queryConditionTemp.powerGrid.push(region)this.myDiagram.model.addNodeData(region);this.nodeObjTemp.fromKey = region.key}if (objid == 80) { // 系统量测this.nodeObjTemp.queryConditionTemp.powerGrid.push(region)this.nodeObjTemp.queryConditionTemp.powerGrid.push(systemMeasurement)this.myDiagram.model.addNodeData(region);this.myDiagram.model.addNodeData(systemMeasurement);this.myDiagram.model.addLinkData({"from": region.key, "to": systemMeasurement.key});this.nodeObjTemp.fromKey = systemMeasurement.key}if (objid == 60) { // 厂站this.nodeObjTemp.queryConditionTemp.powerGrid.push(region)this.nodeObjTemp.queryConditionTemp.powerGrid.push(subarea)this.nodeObjTemp.queryConditionTemp.powerGrid.push(bvSubstation)this.nodeObjTemp.queryConditionTemp.powerGrid.push(substation)this.myDiagram.model.addNodeData(region);this.myDiagram.model.addNodeData(subarea);this.myDiagram.model.addNodeData(bvSubstation);this.myDiagram.model.addNodeData(substation);this.myDiagram.model.addLinkData({"from": region.key, "to": subarea.key});this.myDiagram.model.addLinkData({"from": subarea.key, "to": substation.key});this.myDiagram.model.addLinkData({"from": bvSubstation.key, "to": substation.key});this.nodeObjTemp.fromKey = substation.key}if (objid == 77) { // 发电机组this.nodeObjTemp.queryConditionTemp.powerGrid.push(region)this.nodeObjTemp.queryConditionTemp.powerGrid.push(subarea)this.nodeObjTemp.queryConditionTemp.powerGrid.push(bvSubstation)this.nodeObjTemp.queryConditionTemp.powerGrid.push(substation)this.nodeObjTemp.queryConditionTemp.powerGrid.push(generatingUnit)this.myDiagram.model.addNodeData(region);this.myDiagram.model.addNodeData(subarea);this.myDiagram.model.addNodeData(bvSubstation);this.myDiagram.model.addNodeData(substation);this.myDiagram.model.addNodeData(generatingUnit);this.myDiagram.model.addLinkData({"from": region.key, "to": subarea.key});this.myDiagram.model.addLinkData({"from": subarea.key, "to": substation.key});this.myDiagram.model.addLinkData({"from": bvSubstation.key, "to": substation.key});this.myDiagram.model.addLinkData({"from": substation.key, "to": generatingUnit.key});this.nodeObjTemp.fromKey = generatingUnit.key}if (objid == 69) { //母线this.keyValueFalg++let bvAClineSegment = {text: "母线基准电压", group: this.nodeObjTemp.key, isGroup: false,key: this.keyValueFalg, objid: 58,queryConditionTemp: {isFilter: true, condition: []},queryCondition: "",queryFields: "bv_name,bv_gid",tabFlag: 1, category: "Data", querySql: '',}this.nodeObjTemp.queryConditionTemp.powerGrid.push(region)this.nodeObjTemp.queryConditionTemp.powerGrid.push(subarea)this.nodeObjTemp.queryConditionTemp.powerGrid.push(bvSubstation)this.nodeObjTemp.queryConditionTemp.powerGrid.push(substation)this.nodeObjTemp.queryConditionTemp.powerGrid.push(bvAClineSegment)this.nodeObjTemp.queryConditionTemp.powerGrid.push(busbarSection)this.myDiagram.model.addNodeData(region);this.myDiagram.model.addNodeData(subarea);this.myDiagram.model.addNodeData(bvSubstation);this.myDiagram.model.addNodeData(substation);this.myDiagram.model.addNodeData(bvAClineSegment);this.myDiagram.model.addNodeData(busbarSection);this.myDiagram.model.addLinkData({"from": region.key, "to": subarea.key});this.myDiagram.model.addLinkData({"from": subarea.key, "to": substation.key});this.myDiagram.model.addLinkData({"from": bvSubstation.key, "to": substation.key});this.myDiagram.model.addLinkData({"from": bvAClineSegment.key, "to": busbarSection.key});this.myDiagram.model.addLinkData({"from": substation.key, "to": busbarSection.key});this.nodeObjTemp.fromKey = busbarSection.key}if (objid == 70) { //交流线段this.keyValueFalg++let bvAClineSegment = {text: "线路基准电压", group: this.nodeObjTemp.key, isGroup: false,key: this.keyValueFalg, objid: 58,queryConditionTemp: {isFilter: true, condition: []},queryCondition: "",queryFields: "bv_name,bv_gid",tabFlag: 1, category: "Data", querySql: '',}this.nodeObjTemp.queryConditionTemp.powerGrid.push(region)this.nodeObjTemp.queryConditionTemp.powerGrid.push(subarea)this.nodeObjTemp.queryConditionTemp.powerGrid.push(bvSubstation)this.nodeObjTemp.queryConditionTemp.powerGrid.push(substation)this.nodeObjTemp.queryConditionTemp.powerGrid.push(bvAClineSegment)this.nodeObjTemp.queryConditionTemp.powerGrid.push(aClineSegment)this.myDiagram.model.addNodeData(bvAClineSegment);this.myDiagram.model.addNodeData(region);this.myDiagram.model.addNodeData(subarea);this.myDiagram.model.addNodeData(bvSubstation);this.myDiagram.model.addNodeData(substation);this.myDiagram.model.addNodeData(aClineSegment);this.myDiagram.model.addLinkData({"from": bvAClineSegment.key, "to": aClineSegment.key});this.myDiagram.model.addLinkData({"from": region.key, "to": subarea.key});this.myDiagram.model.addLinkData({"from": subarea.key, "to": substation.key});this.myDiagram.model.addLinkData({"from": bvSubstation.key, "to": substation.key});this.myDiagram.model.addLinkData({"from": substation.key, "to": aClineSegment.key});this.nodeObjTemp.fromKey = aClineSegment.key}if (objid == 67 || objid == 68) { //变压器和变压器绕组this.nodeObjTemp.queryConditionTemp.powerGrid.push(region)this.nodeObjTemp.queryConditionTemp.powerGrid.push(subarea)this.nodeObjTemp.queryConditionTemp.powerGrid.push(bvSubstation)this.nodeObjTemp.queryConditionTemp.powerGrid.push(substation)this.nodeObjTemp.queryConditionTemp.powerGrid.push(powerTransformer)this.myDiagram.model.addNodeData(region);this.myDiagram.model.addNodeData(subarea);this.myDiagram.model.addNodeData(bvSubstation);this.myDiagram.model.addNodeData(substation);this.myDiagram.model.addNodeData(powerTransformer);this.myDiagram.model.addLinkData({"from": region.key, "to": subarea.key});this.myDiagram.model.addLinkData({"from": subarea.key, "to": substation.key});this.myDiagram.model.addLinkData({"from": bvSubstation.key, "to": substation.key});this.myDiagram.model.addLinkData({"from": substation.key, "to": powerTransformer.key});this.nodeObjTemp.fromKey = powerTransformer.key}if (objid == 68) {// 变压器绕组this.nodeObjTemp.queryConditionTemp.powerGrid.push(transformerWinding)this.myDiagram.model.addNodeData(transformerWinding);this.myDiagram.model.addLinkData({"from": powerTransformer.key, "to": transformerWinding.key});this.nodeObjTemp.fromKey = transformerWinding.key}if (objid == 71) { // 交流线路端点this.keyValueFalg++let bvAClineSegment = {text: "线路基准电压", group: this.nodeObjTemp.key, isGroup: false,key: this.keyValueFalg, objid: 58,queryConditionTemp: {isFilter: true, condition: []},queryCondition: "",queryFields: "bv_name,bv_gid",tabFlag: 1, category: "Data", querySql: '',}this.nodeObjTemp.queryConditionTemp.powerGrid.push(region)this.nodeObjTemp.queryConditionTemp.powerGrid.push(subarea)this.nodeObjTemp.queryConditionTemp.powerGrid.push(bvSubstation)this.nodeObjTemp.queryConditionTemp.powerGrid.push(substation)this.nodeObjTemp.queryConditionTemp.powerGrid.push(bvAClineSegment)this.nodeObjTemp.queryConditionTemp.powerGrid.push(aClineSegment)this.nodeObjTemp.queryConditionTemp.powerGrid.push(aCLineEnd)this.myDiagram.model.addNodeData(region);this.myDiagram.model.addNodeData(subarea);this.myDiagram.model.addNodeData(bvSubstation);this.myDiagram.model.addNodeData(substation);this.myDiagram.model.addNodeData(aCLineEnd);this.myDiagram.model.addNodeData(bvAClineSegment);this.myDiagram.model.addNodeData(aClineSegment);this.myDiagram.model.addLinkData({"from": region.key, "to": subarea.key});this.myDiagram.model.addLinkData({"from": subarea.key, "to": substation.key});this.myDiagram.model.addLinkData({"from": bvSubstation.key, "to": substation.key});this.myDiagram.model.addLinkData({"from": bvAClineSegment.key, "to": aClineSegment.key});this.myDiagram.model.addLinkData({"from": aClineSegment.key, "to": aCLineEnd.key});this.myDiagram.model.addLinkData({"from": substation.key, "to": aCLineEnd.key});this.nodeObjTemp.fromKey = aCLineEnd.key}if (objid == 72) { // 电力负荷线路this.keyValueFalg++let bvAClineSegment = {text: "电力负荷电压", group: this.nodeObjTemp.key, isGroup: false,key: this.keyValueFalg, objid: 58,queryConditionTemp: {isFilter: true, condition: []},queryCondition: "",queryFields: "bv_name,bv_gid",tabFlag: 1, category: "Data", querySql: '',}this.nodeObjTemp.queryConditionTemp.powerGrid.push(region)this.nodeObjTemp.queryConditionTemp.powerGrid.push(subarea)this.nodeObjTemp.queryConditionTemp.powerGrid.push(bvSubstation)this.nodeObjTemp.queryConditionTemp.powerGrid.push(substation)this.nodeObjTemp.queryConditionTemp.powerGrid.push(bvAClineSegment)this.nodeObjTemp.queryConditionTemp.powerGrid.push(energyConsumer)this.myDiagram.model.addNodeData(region);this.myDiagram.model.addNodeData(subarea);this.myDiagram.model.addNodeData(bvSubstation);this.myDiagram.model.addNodeData(substation);this.myDiagram.model.addNodeData(bvAClineSegment);this.myDiagram.model.addNodeData(energyConsumer);this.myDiagram.model.addLinkData({"from": region.key, "to": subarea.key});this.myDiagram.model.addLinkData({"from": subarea.key, "to": substation.key});this.myDiagram.model.addLinkData({"from": bvSubstation.key, "to": substation.key});this.myDiagram.model.addLinkData({"from": bvAClineSegment.key, "to": energyConsumer.key});this.myDiagram.model.addLinkData({"from": substation.key, "to": energyConsumer.key});this.nodeObjTemp.fromKey = energyConsumer.key}if (objid == 75) { //并联补偿器this.keyValueFalg++let bvCompensator_P = {text: "补偿器电压", group: this.nodeObjTemp.key, isGroup: false,key: this.keyValueFalg, objid: 58,queryConditionTemp: {isFilter: true, condition: []},queryCondition: "",queryFields: "bv_name,bv_gid",tabFlag: 1, category: "Data", querySql: '',}this.nodeObjTemp.queryConditionTemp.powerGrid.push(region)this.nodeObjTemp.queryConditionTemp.powerGrid.push(subarea)this.nodeObjTemp.queryConditionTemp.powerGrid.push(bvSubstation)this.nodeObjTemp.queryConditionTemp.powerGrid.push(substation)this.nodeObjTemp.queryConditionTemp.powerGrid.push(bvCompensator_P)this.nodeObjTemp.queryConditionTemp.powerGrid.push(compensator_P)this.myDiagram.model.addNodeData(region);this.myDiagram.model.addNodeData(subarea);this.myDiagram.model.addNodeData(bvSubstation);this.myDiagram.model.addNodeData(substation);this.myDiagram.model.addNodeData(bvCompensator_P);this.myDiagram.model.addNodeData(compensator_P);this.myDiagram.model.addLinkData({"from": region.key, "to": subarea.key});this.myDiagram.model.addLinkData({"from": subarea.key, "to": substation.key});this.myDiagram.model.addLinkData({"from": bvSubstation.key, "to": substation.key});this.myDiagram.model.addLinkData({"from": bvCompensator_P.key, "to": compensator_P.key});this.myDiagram.model.addLinkData({"from": substation.key, "to": compensator_P.key});this.nodeObjTemp.fromKey = compensator_P.key}if (objid == 76) { //串联补偿器this.keyValueFalg++let bvCompensator_S = {text: "补偿器电压", group: this.nodeObjTemp.key, isGroup: false,key: this.keyValueFalg, objid: 58,queryConditionTemp: {isFilter: true, condition: []},queryCondition: "",queryFields: "bv_name,bv_gid",tabFlag: 1, category: "Data", querySql: '',}this.nodeObjTemp.queryConditionTemp.powerGrid.push(region)this.nodeObjTemp.queryConditionTemp.powerGrid.push(subarea)this.nodeObjTemp.queryConditionTemp.powerGrid.push(bvSubstation)this.nodeObjTemp.queryConditionTemp.powerGrid.push(substation)this.nodeObjTemp.queryConditionTemp.powerGrid.push(bvCompensator_S)this.nodeObjTemp.queryConditionTemp.powerGrid.push(compensator_S)this.myDiagram.model.addNodeData(region);this.myDiagram.model.addNodeData(subarea);this.myDiagram.model.addNodeData(bvSubstation);this.myDiagram.model.addNodeData(substation);this.myDiagram.model.addNodeData(bvCompensator_S); //补偿器电压this.myDiagram.model.addNodeData(compensator_S);  //串联补偿器this.myDiagram.model.addLinkData({"from": region.key, "to": subarea.key});this.myDiagram.model.addLinkData({"from": subarea.key, "to": substation.key});this.myDiagram.model.addLinkData({"from": bvSubstation.key, "to": substation.key});this.myDiagram.model.addLinkData({"from": bvCompensator_S.key, "to": compensator_S.key});this.myDiagram.model.addLinkData({"from": substation.key, "to": compensator_S.key});this.nodeObjTemp.fromKey = compensator_S.key}this.myDiagram.model.addLinkData({"from": this.nodeObjTemp.fromKey,"to": this.nodeObjTemp.queryConditionTemp.dataObject.key});this.myDiagram.commitTransaction("new node");//打开设置窗口this.settingPowerGridDataVisible = true;this.$nextTick(() => {});} else if (category == "Table") {//数据库表this.keyValueFalg++let node = {category: category,loc: loc.x + " " + loc.y,text: text,key: this.keyValueFalg,color: color,objid: objid,outFieldsAll: "",queryCondition: "",querySql: "",queryFields: "",flowId: this.updateModel.id,geo: "table" //"alarm"};//创建单个节点this.myDiagram.startTransaction("new node");this.myDiagram.model.addNodeData(node);this.myDiagram.commitTransaction("new node");} else if (category == "oClassTree") {//拖拽电网对象树this.nodeObjTemp = {fromKey: "",category: category,objid: objid,text: text + " 数据对象",loc: loc.x + " " + loc.y,key: this.keyValueFalg,color: color,isGroup: true,queryFields: "",queryFieldsTemp: [],isFilter: false,queryCondition: "",queryConditionTemp: {powerGrid: [],dataObject: {isGroup: false,objid: "",key: "",text: "数据对象",fromKey: "",isFilter: false,group: this.keyValueFalg,category: "Conditional",queryCondition: "",queryConditionTemp: {checkFlag: false,querySql: '',startTime: "",endTime: '',startField: "",endField: "",condition: [],sort: {field: "",type: ""}},queryFieldsTemp: [],queryFields: "",}},geo: "table" //"html5"}//新增分组this.myDiagram.startTransaction("new group");this.myDiagram.model.addNodeData(this.nodeObjTemp);this.myDiagram.commitTransaction("new group");this.myDiagram.startTransaction("new node");//开始生成节点this.keyValueFalg++;var pwg = {}//拖拽系统量测节点if (objid == 80) {pwg = {text: className,//拖拽的电网对象的名称，如华东.莲都/1000kV.都榕I线objName: text,objGid: gid,group: this.nodeObjTemp.key, isGroup: false,key: this.keyValueFalg,objid: classId,queryCondition: pkCol + "= '" + gid + "'",queryConditionTemp: {isFilter: true, condition: []},queryFields: "",tabFlag: 1, category: "Data",querySql: '',}} else {pwg = {text: className,//拖拽的电网对象的名称，如华东.莲都/1000kV.都榕I线objName: text,objGid: gid,group: this.nodeObjTemp.key, isGroup: false,key: this.keyValueFalg,objid: classId,queryCondition: pkCol + "=" + gid,queryConditionTemp: {isFilter: true, condition: []},queryFields: "",tabFlag: 1, category: "Data",querySql: '',}}this.nodeObjTemp.queryConditionTemp.powerGrid.push(pwg)this.myDiagram.model.addNodeData(pwg);this.nodeObjTemp.fromKey = pwg.key//创建数据节点this.keyValueFalg++this.nodeObjTemp.queryConditionTemp.dataObject.key = this.keyValueFalgthis.myDiagram.model.addNodeData(this.nodeObjTemp.queryConditionTemp.dataObject);this.myDiagram.model.addLinkData({"from": this.nodeObjTemp.fromKey,"to": this.nodeObjTemp.queryConditionTemp.dataObject.key});this.myDiagram.commitTransaction("new node");this.settingOClassTreeVisible = truethis.$nextTick(() => {});} else {//数据处理节点let node = {category: category,loc: loc.x + " " + loc.y,text: text,key: this.keyValueFalg,color: color,objid: objid,queryFields: "",flowId: this.updateModel.id,geo: geo //"arrow-up-right"};//创建单个节点this.myDiagram.startTransaction("new node");this.myDiagram.model.addNodeData(node);this.myDiagram.commitTransaction("new node");}},init() {var _this = this;var $ = go.GraphObject.make;let myDiagram = $(go.Diagram,_this.idName, //为DIV HTML元素创建一个图表{"commandHandler.archetypeGroupData": {isGroup: true, category: "powerGridData"},//"draggingTool.dragsLink": true,"draggingTool.isGridSnapEnabled": true,allowDrop: true, //必须为true才能拖拽 对象进来"undoManager.isEnabled": true// 启用撤销和重做});this.myDiagram = myDiagram;window.PIXELRATIO = myDiagram.computePixelRatio(); //确定画布上鼠标坐标所需的常量  // 右键按钮// 创建按钮function makeButton(text, action, visiblePredicate) {return $("ContextMenuButton",$(go.TextBlock, text),{click: action},// 不要使用绑定GraphObject。如果没有谓词，就可以看到visiblePredicate? new go.Binding("visible", "", function (o, e) {return o.diagram ? visiblePredicate(o, e) : false;}).ofObject(): {});}myDiagram.groupTemplateMap.add("powerGridData",$(go.Group, "Table",{layout: $(go.TreeLayout, {angle: 90,arrangement: go.TreeLayout.ArrangementHorizontal,isRealtime: false}),// 定义组的内部布局isSubGraphExpanded: false,// 分组 初始化是否扩大;// 当展开分组时，如果它不包含任何部分，则在其中生成子图subGraphExpandedChanged: function (group) {if (group.memberParts.count === 0) {randomGroup(group.data.key);}}},{isShadowed: false},//是否开启阴影nodeStyle(),{computesBoundsAfterDrag: true,handlesDragDropForMembers: true,},$(go.Panel, "Auto",$(go.Panel, "Vertical",$(go.Panel, "Auto",$(go.Shape,{margin: 0, fill: '#3D6480', strokeWidth: 0, width: 44, height: 44},new go.Binding("geometry", "geo", geoFunc),new go.Binding("fill", "color", bgcColor),),),$(go.Panel, "Horizontal",//文本显示$(go.TextBlock,textStyle(),{column: 1,margin: new go.Margin(8, 5, 8, 5),maxSize: new go.Size(80, NaN),wrap: go.TextBlock.WrapFit,alignment: go.Spot.TopRight},new go.Binding("text").makeTwoWay()),),),{// 这个工具提示装饰由所有节点共享toolTip: $(go.Adornment,"Auto",$(go.Shape, {fill: "#FFFFCC"}),$(go.TextBlock,{margin: 8}, //工具提示显示了调用nodeInfo（data）的结果new go.Binding("text", "", nodeInfo))),// 这个上下文菜单装饰由所有节点共享contextMenu: partContextMenu}),makePort("T", go.Spot.Top, go.Spot.Top, false, true),makePort("L", go.Spot.Left, go.Spot.Left, true, true),makePort("R", go.Spot.Right, go.Spot.Right, true, true),makePort("B", go.Spot.Bottom, go.Spot.Bottom, true, false)));//电网树部分myDiagram.groupTemplateMap.add("oClassTree",$(go.Group, "Table",{layout: $(go.TreeLayout, {angle: 90,arrangement: go.TreeLayout.ArrangementHorizontal,isRealtime: false}),// 定义组的内部布局isSubGraphExpanded: false,// 分组 初始化是否扩大;// 当展开分组时，如果它不包含任何部分，则在其中生成子图subGraphExpandedChanged: function (group) {if (group.memberParts.count === 0) {randomGroup(group.data.key);}}},{isShadowed: false},//是否开启阴影nodeStyle(),{computesBoundsAfterDrag: true,handlesDragDropForMembers: true,},$(go.Panel, "Auto",/*$(go.Shape,"RoundedRectangle",{fill: "rgba(0,0,0,0)", strokeWidth: 0},new go.Binding("fill", "color"),),*/ // title above Placeholder$(go.Panel, "Vertical",// wup add on 2019-9-24 新增8行$(go.Panel, "Auto",/*$(go.Shape, "RoundedRectangle",{ fill: "#DAE4E4", strokeWidth: 1, stroke: "#3D6480", width: 50, height: 50 }),*/$(go.Shape,{margin: 0, strokeWidth: 0, width: 48, height: 48},new go.Binding("geometry", "geo", geoFunc),new go.Binding("fill", "color", bgcColor)),),$(go.Panel, "Horizontal",/*$("SubGraphExpanderButton",{alignment: go.Spot.Right, margin: 5}),*/$(go.TextBlock,textStyle(),{column: 1,margin: new go.Margin(8, 5, 8, 5),maxSize: new go.Size(80, NaN),wrap: go.TextBlock.WrapFit,alignment: go.Spot.TopRight},new go.Binding("text").makeTwoWay()),$(go.Placeholder, {padding: 1,}),//  {stretch: go.GraphObject.Horizontal, background: "#00A9A2"})),{// 这个工具提示装饰由所有节点共享toolTip: $(go.Adornment,"Auto",$(go.Shape, {fill: "#FFFFCC"}),$(go.TextBlock,{margin: 8}, //工具提示显示了调用nodeInfo（data）的结果new go.Binding("text", "", nodeInfo))),// 这个上下文菜单装饰由所有节点共享contextMenu: partContextMenu}),makePort("T", go.Spot.Top, go.Spot.Top, false, true),makePort("L", go.Spot.Left, go.Spot.Left, true, true),makePort("R", go.Spot.Right, go.Spot.Right, true, true),makePort("B", go.Spot.Bottom, go.Spot.Bottom, true, false)));//定义一个Node模板myDiagram.nodeTemplate = $(go.Node,"Table",{isShadowed: false},nodeStyle(),new go.Binding("location"),$(go.Panel,"Auto",$(go.Panel, "Vertical",$(go.Panel, "Auto",$(go.Shape,{margin: 0, fill: "#3D6480", strokeWidth: 0, width: 44, height: 44},new go.Binding("geometry", "geo", geoFunc),),),$(go.Panel,"Horizontal",$(go.TextBlock,textStyle(),{column: 1,margin: new go.Margin(8, 2, 8, 2),maxSize: new go.Size(80, NaN),wrap: go.TextBlock.WrapFit,alignment: go.Spot.TopRight},new go.Binding("text").makeTwoWay()))),{// 这个工具提示装饰由所有节点共享toolTip: $(go.Adornment,"Auto",$(go.Shape, {fill: "#FFFFCC"}),$(go.TextBlock,{margin: 8}, //工具提示显示了调用nodeInfo（data）的结果new go.Binding("text", "", nodeInfo))),// 这个上下文菜单装饰由所有节点共享contextMenu: partContextMenu}),makePort("T", go.Spot.Top, go.Spot.Top, false, true),makePort("L", go.Spot.Left, go.Spot.Left, true, true),makePort("R", go.Spot.Right, go.Spot.Right, true, true),makePort("B", go.Spot.Bottom, go.Spot.Bottom, true, false));//定义连接线模板myDiagram.linkTemplate = $(go.Link, // the whole link panel{isShadowed: false}, //阴影{relinkableFrom: true, relinkableTo: true, reshapable: true},{routing: go.Link.AvoidsNodes,curve: go.Link.JumpOver,corner: 5,toShortLength: 4},new go.Binding("points").makeTwoWay(),$(go.Shape, // the link path shape{isPanelMain: true, strokeWidth: 3}),$(go.Shape, // the arrowhead{toArrow: "Standard", stroke: null}),$(go.Panel,"Auto",new go.Binding("visible", "isSelected").ofObject(),$(go.Shape,"RoundedRectangle", // the link shape{fill: "#919191", stroke: null}),$(go.TextBlock,{font: "10pt helvetica, arial, sans-serif",stroke: "#F8F8F8",margin: 2,editable: true,wrap: go.TextBlock.WrapFit,alignment: go.Spot.TopRight},new go.Binding("text").makeTwoWay())));function findHeadShot(category) {if (category == "Data" || category == "powerGridData" || category == "oClassTree") {return window.SITE_CONFIG.cdnUrl + "/static/images/dian.png"} else if (category == "Conditional") {return window.SITE_CONFIG.cdnUrl + "/static/images/lishishuju.png"} else {return window.SITE_CONFIG.cdnUrl + "/static/images/chulizhong.png"}}//节点 文字样式function textStyle() {return {font: "bold 11pt Helvetica, Arial, sans-serif",stroke: "#00A9A2" //"whitesmoke"};}//节点对象的 Tooltip 信息function nodeInfo(d) {let typeName = "";let flag = false;if (d.category == "Data") {typeName = "电网对象";} else if (d.category == "Table") {typeName = "数据表";} else if (d.category == "Conditional") {typeName = "数据对象";} else {typeName = "处理对象";flag = true;}var str = "节点类型: " + typeName + "\n";if (d.queryFields != null && !flag) {str += "查询字段: " + d.queryFields + "\n";}if (d.queryCondition != null && !flag) {str += "查询条件: " + d.queryCondition + "\n";}return str;}function nodeStyle() {return [{doubleClick: _this.nodeDoubleClick},new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),{locationSpot: go.Spot.Center}];}function makePort(name, align, spot, output, input) {var horizontal =align.equals(go.Spot.Top) || align.equals(go.Spot.Bottom);// 这个端口基本上就是一个透明的矩形，它沿着节点的一侧延伸，// 当鼠标经过时，它就变成了颜色return $(go.Shape, {fill: "transparent", // 在mouseEnter事件处理程序中更改为颜色strokeWidth: 0, // no strokewidth: horizontal ? NaN : 8, // 如果不是水平拉伸，只有8宽height: !horizontal ? NaN : 8, // 如果不是垂直拉伸，就是8高alignment: align, // 将端口对齐到主形状上stretch: horizontal? go.GraphObject.Horizontal: go.GraphObject.Vertical,portId: name, // 将这个对象声明为一个“端口”fromSpot: spot, // 声明链接可以在这个端口上连接fromLinkable: output, // 声明用户是否可以从这里获取链接toSpot: spot, // 声明链接可以在这个端口上连接toLinkable: input, // 声明用户是否可以在这里画链接cursor: "pointer", // 显示一个不同的光标来指示潜在的链接点mouseEnter: function (e, port) {// 端口参数是这个形状if (!e.diagram.isReadOnly) port.fill = "rgba(255,0,255,0.5)";},mouseLeave: function (e, port) {port.fill = "transparent";}});}//“图标”在icons .js中定义, wup add on 2019-9-26(geoFunc)function geoFunc(geoname) {var geo = icons[geoname];if (geo === undefined) {geo = icons["heart"]};  // use this for an unknown icon name 对未知的图标名称使用此名称if (typeof geo === "string") {geo = icons[geoname] = go.Geometry.parse(geo, true);  // fill each geometry 填满每个几何图形}// console.log('mmmmmmm',geo);return geo;}function bgcColor(color) {let iconColor = color;switch (color) {case 'rgba(0,0,0,0)':iconColor = '#3D6480';break;case '#00A9A2':iconColor = '#3D6480';break;case '#3D6480':iconColor = '#3D6480';break;default:iconColor = color;break;}// console.log('bgcColor',iconColor,go);return iconColor;}var dragged = null; // 对当前被拖动元素的引用// 在外部拖放到图表function highlight(node) {// 可能为nullvar oldskips = myDiagram.skipsUndoManager;myDiagram.skipsUndoManager = true;myDiagram.startTransaction("highlight");if (node !== null) {myDiagram.highlight(node);} else {myDiagram.clearHighlighteds();}myDiagram.commitTransaction("highlight");myDiagram.skipsUndoManager = oldskips;}//此事件应仅触发拖动目标。//不是找到每个拖动目标，//我们可以将事件添加到文档中并忽略//所有不属于“draggable”类的元素document.addEventListener("dragstart",function (event) {if (event.target.className !== "draggable") return;//必须设置一些数据以允许拖动event.dataTransfer.setData("text", "");//存储对拖动元素的引用_this.dragged = event.target;//拖动时的对象将有一个边框event.target.style.border = "2px solid #00A9A2";},false);//此事件在拖动完成后成功重置样式（成功与否）document.addEventListener("dragend",function (event) {//重置拖动元素的边框if (_this.dragged.style != "undefined") {_this.dragged.style.border = "";}highlight(null);},false);//接下来，用于放置目标的事件 -  Diagram divvar div = document.getElementById(this.idName);div.addEventListener("dragenter",function (event) {//这里你也可以在图上设置效果，//例如更改背景颜色以指示可接受的拖放区//某些浏览器的要求，例如Internet Explorerevent.preventDefault();},false);div.addEventListener("dragover",function (event) {//调用preventDefault来允许删除//但是对于已经包含元素的div，//我们要禁止删除if (this === myDiagram.div) {var can = event.target;var pixelratio = window.PIXELRATIO;//如果目标不是画布，我们可能会有麻烦，所以只需退出：if (!(can instanceof HTMLCanvasElement)) return;var bbox = can.getBoundingClientRect();var bbw = bbox.width;if (bbw === 0) bbw = 0.001;var bbh = bbox.height;if (bbh === 0) bbh = 0.001;var mx = event.clientX - bbox.left * (can.width / pixelratio / bbw);var my = event.clientY - bbox.top * (can.height / pixelratio / bbh);var point = myDiagram.transformViewToDoc(new go.Point(mx, my));var curnode = myDiagram.findPartAt(point, true);if (curnode instanceof go.Node) {highlight(curnode);} else {highlight(null);}}if (event.target.className === "dropzone") {//在调用preventDefault之前通过返回来禁止删除：return;}//允许删除其他所有内容event.preventDefault();},false);div.addEventListener("dragleave",function (event) {//重置潜在放置目标的背景if (event.target.className == "dropzone") {event.target.style.background = "";}highlight(null);},false);//处理用户选项以从Palette拖动的项目div.addEventListener("drop",function (event) {// console.log(event.dataTransfer.getData("Text"))//阻止默认操作//（在某些浏览器中打开某些元素的链接）event.preventDefault();//拖动到一个Diagramif (this === myDiagram.div) {var can = event.target;var pixelratio = window.PIXELRATIO;//如果目标不是画布，退出：if (!(can instanceof HTMLCanvasElement)) return;var bbox = can.getBoundingClientRect();var bbw = bbox.width;if (bbw === 0) bbw = 0.001;var bbh = bbox.height;if (bbh === 0) bbh = 0.001;var mx = event.clientX - bbox.left * (can.width / pixelratio / bbw);var my = event.clientY - bbox.top * (can.height / pixelratio / bbh);var point = myDiagram.transformViewToDoc(new go.Point(mx, my));//校验 拖拽对象是否是数据表if (_this.dragged.getAttribute("data-category") == "Table") {if (_this.dragged.getAttribute("data-objid") == null) {_this.$message.error("请拖拽数据表");return;}} else if (_this.dragged.getAttribute("data-category") == "oClassTree") {if (_this.dragged.getAttribute("data-objid") == 0) {_this.$message.error("请拖拽电网对象");return;}}if (_this.dragged.getAttribute("data-category") == "Custom") {API.flowInfo.getNodeAndRelationByFlowID(parseInt(_this.dragged.getAttribute("data-objid"))).then(({data}) => {_this.nodeDataArray = data.data.flowNodeEntityList;let arr = new Array();for (let i = 0; i < _this.nodeDataArray.length; i++) {_this.nodeDataArray[i].isGroup = false;_this.nodeDataArray[i].group = "";arr.push(_this.nodeDataArray[i].key);}_this.keyValueFalg = Math.max.apply(null, arr);_this.linkDataArray = data.data.flowRelationEntityList;// console.log('aaaaaaaaaaaaaaaaa',data.data.flowRelationEntityList);_this.myDiagram.model = new go.GraphLinksModel(_this.nodeDataArray,_this.linkDataArray);});} else {_this.newNode(_this.dragged.getAttribute("data-category"),point,_this.dragged.textContent.trim(),"#3D6480",_this.dragged.getAttribute("data-objid"),_this.dragged.getAttribute("data-class"),_this.dragged.getAttribute("data-gid"),_this.dragged.getAttribute("data-classname"),_this.dragged.getAttribute("data-pkcol"),_this.dragged.getAttribute("data-icon") //wup add on 2019-9-29,新增一行);}}},false);var partContextMenu = $(go.Adornment,"Vertical",makeButton("剪切",function (e, obj) {e.diagram.commandHandler.cutSelection();//复制被选中的节点信息，进行新建var part = obj.part_this.copyNodeObjTemp = {}_this.copyNodeObjTemp = JSON.parse(JSON.stringify(part.data))},function (o) {return o.diagram.commandHandler.canCutSelection();}),makeButton("复制",function (e, obj) {//复制被选中的节点信息，进行新建var part = obj.part_this.copyNodeObjTemp = {}_this.copyNodeObjTemp = JSON.parse(JSON.stringify(part.data))console.log("make button CTRL + C")e.diagram.commandHandler.copySelection();},function (o) {return o.diagram.commandHandler.canCopySelection();}),makeButton("粘贴",function (e, obj) {// var contextmenu = obj.part; // the Button is in the context menu Adornment// var part = contextmenu.adornedPart.data;//lcs zhushi// e.diagram.commandHandler.pasteSelection(//   e.diagram.lastInput.documentPoint// );//新建节点完成粘贴_this.copyNewNode()},function (o) {return o.diagram.commandHandler.canPasteSelection();}),makeButton("删除",function (e, obj) {e.diagram.commandHandler.deleteSelection();},function (o) {return o.diagram.commandHandler.canDeleteSelection();}),makeButton("取消",function (e, obj) {e.diagram.commandHandler.undo();},function (o) {return o.diagram.commandHandler.canUndo();}),makeButton("撤销",function (e, obj) {e.diagram.commandHandler.redo();},function (o) {return o.diagram.commandHandler.canRedo();}),// makeButton(//   "分组",//   function (e, obj) {//     e.diagram.commandHandler.groupSelection();//   },//   function (o) {//     return o.diagram.commandHandler.canGroupSelection();//   }// ),// makeButton(//   "取消分组",//   function (e, obj) {//     e.diagram.commandHandler.ungroupSelection();//   },//   function (o) {//     return o.diagram.commandHandler.canUngroupSelection();//   }// ));},}}
</script><style scoped>/* cursor属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状 */.draggable {width: 140px;height: 22px;font-size: 14px;text-align: left;cursor: move;line-height: 22px;color: #018883;}.myDiagram {width: 100%;height: 370px;background-color: #DAE4E4;}
</style>

vue 使用 gojs相关推荐

vue中 gojs 的使用及去除水印
描述: GoJS是一个用于构建交互式图表和图形的JavaScript和TypeScript库.GoJS允许你为你的用户建立各种各样的图表和图形,从简单的流程图和组织图到高度具体的工业图,SCADA和B ...
vue 使用gojs绘制简单的流程图
在vue项目中需要展示工作流进度,可以使用的流程图插件很多 flowchart.js http://adrai.github.io/flowchart.js/ , 基于SVG创建Flow Chart ...
记录--VUE使用GOJS（操作数据、消除水印、导出图片等）
因为GOJS属于不能免费商用的插件,后改用antv X6来实现流程图效果,使用方法可查看我另一篇记录 GOJS官网首先引入GOJSnpm install gojs --save 文件中引入impor ...
GoJS去除水印方法
最近使用 Vue + VueSuperFlow + GoJS V2.1 做一个拖拽模块组成流程图的项目,需要去掉GoJS的左上角水印. 去水印过程如下: 在node_moudels依赖包中找到 ...
vue+gojs 绘制鱼骨图(因果图)
最近查找js相关的鱼骨图组件,找了半天都没有合适的,自己参考gojs官网demo简单的实现了下,效果如下. 废话少说,直接上代码. 引入gojs npm install gojs --save 整合到 ...
在Vue项目中使用Gojs
文章目录前言 1. Gojs的安装 2. 在vue项目中的引用 3. js导入 4. 画布初始化画布基础配置主画布layout配置右侧画布配置 5. 连接线的配置 6. 节点的配置 7. 节点 ...
Vue+Gojs实现流程图demo
第一步:引入package.json引入gojs依赖包-- "gojs": "^2.0.3", (npm install gojs --save) 第二步:运行 ...
vue项目中gojs最新V2.2.5版本去除水印
在node_modules/gojs/release/go-module.js中搜索String.fromCharCode(a.charCodeAt 此时可以看到String.fromCharCode ...
Vue + gojs 绘制鱼骨图
效果图: 引入gojs npm install gojs --save 在git地址拉下代码 ,地图组件地址是 src\components\fishboneDiagram git地址开源不易多多 ...

vue 使用 gojs

页面代码

vue 使用 gojs相关推荐

最新文章

热门文章