vue 使用 gojs

最新推荐文章于 2024-07-16 07:48:55 发布
最新推荐文章于 2024-07-16 07:48:55 发布
阅读量1.6k 收藏 2
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43805387/article/details/104654964
版权
本文介绍了如何使用Vue创建一个项目并集成GoJS库。通过`vue create`初始化Vue项目，接着安装Element UI，然后引入GoJS，实现页面代码中图形编辑功能。
摘要由CSDN通过智能技术生成
  • 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 --save

import 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-card
                                style="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.keyVa
最低0.47元/天 解锁文章
weixin_43805387
关注
GoJS 在 Vue 中的简单实现
老司机的后备箱
05-28 1264
GoJS 在 Vue 中的简单实现 介绍与引入 简述： GoJS 是一个用于实现交互式图表的 JavaScript 库 在 vue 中使用 安装： npm install gojs --save gojs import gojs from 'gojs' // 在 main.js 中引入 Vue.prototype.go = gojs // 挂载 1. 创建一个空图像 结构部分（template） <div class="flowChart" id="flowChart">
vue中go.js的使用教学（一）
Blue54的博客
02-21 1513
(如果报错：arg Argument starts with non-ascii dash, this is probably invalid: –save，请手动输入npm i gojs)npm i gojs。
GoJS炫酷的流程图效果
热门推荐
书生的博客
12-26 1万+
最近公司要用到知识图谱，所以需要一个类似于流程图的UI来与后台交互，能够方便客户使用。 非常感谢懒得安分写的博客，给了我很大的帮助。 原文地址 http://www.cnblogs.com/landeanfen/p/7910530.html为什么我要转载呢？ 因为我怕哪天博主把帖子删了。。。。 写在前面：我只是为了记代码，所以建议你们去看原文。。。一、初次接触 GoJS简介 GoJS是一
Vue+GoJS使用初步（1）
最新发布
qdwyj的专栏
07-16 188
今天开始打卡GoJS，用他创建一个物流调度平台。在此记录一下使用过程中遇到的坑。
在Vue项目中使用Gojs
CH_Y的博客
08-25 4842
使用GOJS在vue项目中实现拖拉拽的图形化需求，记录了常用功能的实现，需要完整使用的可以去官方文档查看。至此，就能在vue项目中使用Gojs实现简单的双画布托拉拽雪花图需求。
【GoJS使用】GoJS在vue中的入门使用教程
庞囧的博客
02-20 7498
文章目录前言安装和引入Go.js画板初始化画板配置基础配置树结构配置连接线的配置鼠标框选配置节点选中时边框的配置全局缩略图的配置其他配置线段吸附网格节点有关节点初始化节点内容分类节点成员的布局方式 前言 此使用教程的内容只是个人制作产品时，根据需要实现功能进行文档记录，需要完整的使用文档需要自行去官方文档查看。 安装和引入Go.js 先安装 npm I gojs –save 使用时要在html中用个dom容器来渲染图像 <div id="chart-wrap"> <div i
gojs在vue中实现画布流程
monthover的博客
09-23 1310
GoJS 是一个用于实现交互式图表的 JavaScript 库，详情可查看根据官网实现以下demo。
vue中使用gojs/jointjs
weixin_33810006的博客
08-23 613
博客文章地址：https://lry1994.github.io/stu...---------------------------------------------更新 2018/8/30----------------------------------------------------------经过一番实践，我觉得jointj...
VUE+GOJS，链路拓扑绘制
05-25
基于vue和gojs的设备链路拓扑图绘制，可以动态增减接口，可以以拖拽的形式将设备添加到链路拓扑图中，动态显示数据流，选中设备时可以高亮显示整条链路。
vue中使用gojs/jointjs的示例代码
10-18
从给定的文件信息来看，我们需要了解的知识点包括如何在Vue项目中使用GoJS和jointjs两种JavaScript库，以及如何实现交互式的流程图绘制。接下来我将详细介绍这些内容。 ### Vue中使用GoJS GoJS是一个功能强大的...
GOJS+VUE实现流程图效果
10-17
主要为大家详细介绍了GOJS+VUE实现流程图效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue 结合gojs的流程设计器
03-09
将go.js 流程图 流程设计与vue框架结合使用 未去水印版本
记录一下在VUE 使用 gojs实现物联网设备运行效果（1）
weixin_44519188的博客
11-11 4686
关于gojs 介绍需要自行，英文水平有限。 官方文档 、 gojs部分中文的文档 1、安装依赖 npm install gojs --save npm安装参考 2、开始使用 创建一个div,gojs渲染的图层 <div id="myDiagramDiv" style=" width: 100%; height: 100%; cursor: pointer;"></div> 3、创建画布 一定要在 mounted() 中使用 var $ = go.GraphObject.m
vue-gojs-初学笔记-从简单完整案例剖析开始
竹了的博客
06-18 696
vue gojs
vue项目里引用 gojs 流程图
weixin_43478305的博客
07-02 4838
gojs 要实现的需求调研了多种可拖拽流程图的技术，如：bpmn.js,gojs等 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 今天先讲一下gojs 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 全新的界面设计 ，将会带来全新的写作体验； 在创作中心设置你喜爱的代码高亮样式，Mar
Vue中使用GOJS绘制拓扑图（项目实践）
weixin_62456663的博客
08-31 3054
Vue中使用gojs绘画拓扑图
初探gojs
Riven的博客
01-19 635
话不多说直接上代码 HTML js外链地址 //引入的内容js如有需求请私聊我 //gojs <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta content="a1z51.23600852" name="spm-id" /> <title> demo </title> <script src="../../lib/
Vue中使用GoJS/JointJS实现流程图示例
"这篇文章主要展示了如何在Vue项目中使用GoJS和JointJS这两个图形库来绘制流程图。作者在寻找前端流程图插件的过程中，对比了不同的解决方案，最终选择了GoJS和JointJS，并提供了相关的示例代码。" 在Vue应用程序中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值