Tx-topo NPM | npm.io

tx-topo 拓扑

在vue中使用tx-topo

1. 安装tx-topo

yarn add tx-topo --registry=http://npm.txiiot.cn/

需要通过私有npm仓库安装, 如果未登录私有npm，需要先登录

npm adduser --registry http://npm.txiiot.cn
#username: admin
#password: AAbb123456

3. 在组件中引入tx-topo

import { TopoInstance } from 'tx-topo/dist/txTopo.js'

如果使用编辑器版本，需要引入另外一个js

import { TopoInstance } from 'tx-topo/dist/txTopo.edit.js'

4. 初始化拓扑图

创建canvas容器

<template>
  <div class="content">
    <canvas id="canvas"></canvas>
  </div>
</template>

注意： 1. 必须使用cavas元素，使用其他元素（eg. div）会报错 2. 只能使用id, 作为dom选择器，fabric初始化只接受id

创建Topo对象实例

const mode = 'show' // 模式 show: 展示模式 edit：编辑模式
const theme = 'light' // 主题，目前只支持light和dark
this.topo = TopoInstance('canvas', mode, theme)

5. 渲染静态拓扑图

设置画布样式

const setting = {
  width: 1920, // 画布宽度
  height: 1080, // 画布高度
  fill: '#000000'
}
const fitting = true // 画布是否自适应容器
const width = 1920 // 容器宽度
const height = 1080 // 容器高度
this.topo.setCanvas({ ...setting }, fitting, width, height)

绘制元素

const list = [{
  index: 0,
  type: 'text',
  label: '文本',
  left: 100,
  top: 100,
  fontSize: 14,
  fill: '#000'
}, {
  index: 1,
  type: 'image'
  left: 200,
  top: 200,
  width: 50,
  height: 50,
  url: './src/assets/logo.png'
}]

this.topo.draw(list)

6. 更新拓扑图

update接口可以接受一个数组，可以更新一条或多条元素

const list = [{
  index: 0,
  type: 'text',
  label: '文本1',
  left: 100,
  top: 100,
  fontSize: 14,
  fill: '#000'
}]
this.topo.update(list) //会更新index为0的文本元素为新的文本元素

7. 监听事件

this.topo.canvas.on('mouse:over', function (e) {
  const target = e.target // 当前鼠标悬浮在的元素对象
})

this.topo.canvas.on('mouse:down', function (e) {
  const target = e.target
})

this.topo.canvas.on('mouse:up', function (e) {
  const target = e.target
})

fabric事件列表

object:modified
object:rotated
object:scaled
object:moved
object:skewed
object:rotating
object:scaling
object:moving
object:skewing
object:selected this event is deprecated.event: use selection:created
before:transform
before:selection:cleared
selection:cleared
selection:updated
selection:created
path:created
mouse:down
mouse:move
mouse:up
mouse:down:before
mouse:move:before
mouse:up:before
mouse:over
mouse:out
mouse:dblclick
event:dragover
event:dragenter
event:dragleave
event:drop

topo json结构说明

整体结构

{
    // 画布属性
    "setting": {
        width: 1017, //svg画布宽度
        height: 612, //svg画布高度
        margin: {top: 0, right: 0, bottom: 0, left: 0}, //svg画布外边距
        url: '', // 画布背景图片地址
        fill: "#000" // 画布背景颜色
    },
    // 元素列表
    "elements": []
}

子元素类型

基础元素

Text
Image
Circle
Rect
Polyline
Polygon
Path
IText
Ellipse
Line

widget元素组

SwitchHight 高压开关
SwitchLow 低压开关
Belt 皮带
Lift ( progress ) 提升/进度条
Scaffold 采煤机支架
CoalCutter 采煤机摆臂
DrillTrack 掘进截割头轨迹

layer层元素

Video 视频
Report 报表
Chart 图表

Text

    {
        name: '原煤仓', // 元素名称
        index: 1, // 元素层级
        key: '03389D', //动态文字绑定的点
        left: 508, //文字x坐标
        top: 40,  //文字y坐标
        textAlign: 'middle', //坐标相对文字位置： start， middle， end，默认为：start
        lineHeight: 1, //文字行高
        fontSize: '21px', //字体大小，默认大小： 14px
        fontWeight: 'bold', //字体粗细： normal，bold，默认为： normal
        fill: '#262C66', //字体颜色， 默认： #444444
        label: '', //文字内容
        angle: 90, // 文字旋转角度
        value: null, // value默认为null，会
        // 开关量 根据value取对应的config
        config: [{
          label: '',
          fill: '',
          fontSize: ''
        }, {
          label: '',
          fill: ''
          fontSize: ''
        }]
    }

image attrs 图片

{
    name: '1#闸门', //名称，没有特殊用途只是一个标记
    key: 'TF_ZM1_KDW', //绑点，只有动态元素里面需要
    left: 308, //x坐标
    top: 108, //y坐标
    width: 108, //图片宽度
    height: 94, //图片高度
    angle: 90, //围绕图片的中心，顺时针旋转90度
    url: require('@/assets/img/vent/gate-motor-up-off.png'), //图片地址
    // 动态图片列表： 和key配合使用，实现动态切换图片（只有动态元素里面需要）
    // 目前只支持0， 1，即true，false的状态切换，根据key的值，取对应位置的图片
    // 0：数组0位置放停止状态图片
    // 1: 数据1位置放运行状态图片
    config: [{
        x: 268,
        y: 230,
        width: 90,
        height: 100,
        url: require('@/assets/img/vent/gate-motor-up-off.png'),
    }, {
        x: 268,
        y: 230,
        width: 90,
        height: 100,
        url: require('@/assets/img/vent/gate-motor-up-on.png'),
    }],
    // 图片动画
    // 该属性只有图片在animateImages列表中有效
    anime: {
        type: 'rotate', //动画类型：直线偏移（目前只支持平移动画）
        duration: 3000, //偏移时间，默认3000毫秒
    },
    // 更具key的值，判断图片显示还是隐藏
    // 该属性只有图片在animateImages列表中有效
    isShow: false
}

switch attrs 开关

{
    name: 'Ⅰ回总开关', //名称，没有特殊用途只是一个标记
    key: 'ZYGY_HE_ZT1', //绑点
    x: 64, //x坐标
    y: 100, //y坐标
    textTop: '', //顶部描述文字 
    textMid: '1#', //中间描述文字
    textBottom: 'Ⅰ回总开关', //底部描述文字
    width: 40, //开关宽度
    height: 120, //开关高度
    fontSize: "12px", //字体大小
    fill: '#6B7DB8', //字体颜色
    letterSpacing: 'normal', //字间距
    cursor: 'pointer', //鼠标样式，默认default
    url: require('@/assets/img/power/switch_off.png'), //当前开关图片地址
    images: [{
        url: require('@/assets/img/power/switch_off.png')
    }, {
        url: require('@/assets/img/power/switch_on.png')
    }],
    type: 'LV', //开关类型 （LV: 低压开关， HV: 高压开关）
    clickable: true, //是否可以点击
    hover: true, //是否可以hover
    rotate: 90, //旋转角度
}

事件：

{
  events: {
    type: 'click', // ['click', 'hover']
    action: 'modal', // ['modal', 'poptip', 'topo', 'video', 'control']
    config: {
      // modal
      // poptip
      // topo
      // video
      // control
      
    }
  }
}

控制

hoverEnable  => evnet.type
clickEnable  => event.type

eventAction  => event.action

plusData     => event.plusData
topoId
modalConfig
control
videoAddr

control: {
  type: 0, //[0: , 1: ]
  pointId: '', // 单点控制的控制点id
  code: 1, // 单点控制的控制指令
  // 脉冲控制
  isPulse: true //是否为脉冲控制
  // 多点控制
  isMulti: true, // 是否为开关量切换控制
  run: '',  //启动点
  stop: '', //停止点
  runCode: 1, //启动指令
  stopCode: 1, //停止指令
}

core-js vue

@infinitebrahmanuniverse/nolb-tx @everything-registry/sub-chunk-2991

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago