基于vue的网架图插件

安装 & 使用

   $ npm install --save @hd-fe/vue-net-rack

注册:

import Vue from 'vue'
import VueNetRack from '@hd-fe/vue-net-rack'

Vue.component('VueNetRack', VueNetRack)

Props

nodeValue

Type: Array Required: false Default: []

节点数据

lineValue

Type: Array Required: false Default: []

线路数据

node

Type: Object Required: true Default: {}

网架节点

line

Type: Object Required: true Default: {}

网架线路

selectTime

Type: String Required: false Default: ``

当前时刻

canvasWidth

Type: Number Required: false Default: 1920

网架图宽

canvasHeight

Type: Number Required: false Default: 920

网架图高

isRange

Type: Boolean Required: false Default: false

是否显示色阶图

rangeKey

Type: String Required: false Default: ``

色阶图的显示类型：'price' 价格；'loadValue' 负荷

range

Type: Object Required: false Default: { min: 0, max: 0 }

色阶图范围

isArea

Type: Boolean Required: false Default: false

是否220kv区域。如需500和220切换，则需 required: true

highLightLines

Type: Array Required: false Default: []

高亮线路

highLightNodes

Type: Array Required: false Default: []

高亮节点

areaData500

Type: Object Required: false Default: {}

500kv节点数据。如需显示线路潮流，则需 required: true

showTimeSelect

Type: Boolean Required: false Default: true

是否显示时间轴

showRuler

Type: Boolean Required: false Default: false

是否显示标尺

nodeDragable

Type: Boolean Required: false Default: false

是否节点可拖拽

interval

Type: Number Required: false Default: 1

标尺间距

mapDragable

Type: Boolean Required: false Default: true

是否网架图可拖拽

scaleValue

Type: Number Required: false Default: 50

缩放级别 0-100

nodeIconsSvg

Type: Object Required: false Default: {}

自定义图标。svg格式：

{
  testIcon: {
    width: 1024,
    height: 1024,
    paths: [{
      style: 'fill:#ECE52C;',
      d: ''
    }, {
      style: 'fill:#ECE52C',
      d: ''
    }]
  }
}

nodeIconsName

Type: Array Required: false Default: []

自定义图标的名称，类型，大小。

 [
  {
    type: 1, // 对应节点数据里的type字段
    name: 'testIcon', // 对应svg格式里的键名
    size: 16
  }
]

Events

hover-shape

Required: false Parameters1: Ojbect // '节点的详情' Parameters2: Ojbect // '鼠标点击位置'

mouseenter节点触发

out-shape

Required: false

mouseout节点触发

down-shape

Required: false Parameters1: Ojbect // '节点的详情' Parameters2: Ojbect // '鼠标点击位置'

mousedown节点触发

click-shape

Required: false Parameters1: Ojbect // '节点的详情' Parameters2: Ojbect // '鼠标点击位置'

单击节点触发

dbclick-shape

Required: false Parameters1: Ojbect // '节点的详情'

双击节点触发

select-node

Required: false Parameters: String // '选中的节点名称'

双击节点触发

node-drag

Required: false Parameters1: Ojbect // '节点的位置' Parameters2: String // '节点名称'

node-drag-end

Required: false Parameters1: Ojbect // '节点的位置' Parameters2: String // '节点名称'

拖拽节点过程中触发

go-back

Required: false Parameters: -

返回500kv

select-high-light-lines

Required: false Parameters: Array

设置高亮线路

select-new-time

Required: false Parameters: String

设置当前时刻

目前只在仿真云使用（20191203）

目录结构说明

demo 示例
dist 最终打包后的文件存放位置
    index.js 打包后的插件文件
src 插件源码
    components 插件使用到的组件
        svgIcon 用于svg图标
    config 插件的一些配置
    directives 插件使用到的自定义指令
    icon 插件使用到的图标
    utils 工具函数
    index.js 入口文件
    Index.vue 插件入口
    MapHover.vue 鼠标相关的操作
    MapLine.vue 渲染线路
    MapPoint.vue 渲染节点
    MapRuler.vue 标尺
    NetRackMap.vue 调用MapHover.vue、MapLine.vue、MapPoint.vue、MapRuler.vue

Build Setup

# install dependencies
npm install

# build for production with minification
npm run build 打包到dist/index.js

demo 目录结构说明：

service 模拟后端返回数据
Index.vue demo调用示例
main.js 入口

demo Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8081
npm run dev

自定义图标功能使用(version >= 1.0.8)

• 1：准备图标配置文件nodeIcons.js

  export const svgSource = {
    myGenerator: {
      width: 1024,
      height: 1024,
      paths: [{
        style: 'fill="#10ECF9;opacity:.08',
        d: 'M512 517.12m-460.8 0a460.8 460.8 0 1 0 921.6 0 460.8 460.8 0 1 0-921.6 0Z'
      }]
    },
    ...other svg icon
  }
  
  export const iconName = [
    {
      type: 1, // 该值跟第3步配置的iconType匹配成功，则节点使用该图标
      name: 'myGenerator',
      size: 26
    },
    ...other iconName
  ]
  

• 2：在插件调用处传参

  import { svgSource, iconName } from 'nodeIcons.js'
  // vue的data添加
  data () {
    svgSource,
    iconName,
    nodeValue
  }

  <net-back-canvas
    :node-icons-svg="svgSource"
    :node-icons-name="iconName"
    :node-value="nodeValue" 
    ...other props
  ></net-back-canvas>

• 3：为nodeValue对象添加iconType属性

  [
    {
      name: "博罗",
      iconType: 1 // 添加该属性
    },
    ...other key-value
  ]

版本说明

1.0.4 完成功能，发布 1.0.5 错误版本，勿使用 1.0.6 错误版本，勿使用 1.0.7 添加了点击线时，返回线的对象全部信息 lineAllValue 字段 1.0.8 优化自定义图标功能 1.0.9 npm包公有化