# 基于vue的网架图插件

## 安装 & 使用

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


注册:

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

Vue.component('VueNetRack', VueNetRack)
```

### Props

#### nodeValue
Type: `Array`<br>
Required: `false`<br>
Default: `[]`

节点数据

#### lineValue
Type: `Array`<br>
Required: `false`<br>
Default: `[]`

线路数据

#### node
Type: `Object`<br>
Required: `true`<br>
Default: `{}`

网架节点

#### line
Type: `Object`<br>
Required: `true`<br>
Default: `{}`

网架线路

#### selectTime
Type: `String`<br>
Required: `false`<br>
Default: ``

当前时刻

#### canvasWidth
Type: `Number`<br>
Required: `false`<br>
Default: `1920`

网架图宽

#### canvasHeight
Type: `Number`<br>
Required: `false`<br>
Default: `920`

网架图高

#### isRange
Type: `Boolean`<br>
Required: `false`<br>
Default: `false`

是否显示色阶图

#### rangeKey
Type: `String`<br>
Required: `false`<br>
Default: ``

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

#### range
Type: `Object`<br>
Required: `false`<br>
Default: `{
          min: 0,
          max: 0
        }`

色阶图范围

#### isArea
Type: `Boolean`<br>
Required: `false`<br>
Default: `false`

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

#### highLightLines
Type: `Array`<br>
Required: `false`<br>
Default: `[]`

高亮线路

#### highLightNodes
Type: `Array`<br>
Required: `false`<br>
Default: `[]`

高亮节点

#### areaData500
Type: `Object`<br>
Required: `false`<br>
Default: `{}`

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

#### showTimeSelect
Type: `Boolean`<br>
Required: `false`<br>
Default: `true`

是否显示时间轴

#### showRuler
Type: `Boolean`<br>
Required: `false`<br>
Default: `false`

是否显示标尺

#### nodeDragable
Type: `Boolean`<br>
Required: `false`<br>
Default: `false`

是否节点可拖拽

#### interval
Type: `Number`<br>
Required: `false`<br>
Default: `1`

标尺间距

#### mapDragable
Type: `Boolean`<br>
Required: `false`<br>
Default: `true`

是否网架图可拖拽

#### scaleValue
Type: `Number`<br>
Required: `false`<br>
Default: `50`

缩放级别 0-100

#### nodeIconsSvg
Type: `Object`<br>
Required: `false`<br>
Default: `{}`

自定义图标。svg格式：
```javascript
{
  testIcon: {
    width: 1024,
    height: 1024,
    paths: [{
      style: 'fill:#ECE52C;',
      d: ''
    }, {
      style: 'fill:#ECE52C',
      d: ''
    }]
  }
}
```

#### nodeIconsName
Type: `Array`<br>
Required: `false`<br>
Default: `[]`

自定义图标的名称，类型，大小。
```javascript
 [
  {
    type: 1, // 对应节点数据里的type字段
    name: 'testIcon', // 对应svg格式里的键名
    size: 16
  }
]

```

---
### Events

#### hover-shape

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

mouseenter节点触发

#### out-shape

Required: `false`<br>

mouseout节点触发

#### down-shape

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

mousedown节点触发

#### click-shape

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

单击节点触发

#### dbclick-shape

Required: `false`<br>
Parameters1: `Ojbect` // '节点的详情'

双击节点触发

#### select-node

Required: `false`<br>
Parameters: `String` // '选中的节点名称'

双击节点触发

#### node-drag

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

#### node-drag-end

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

拖拽节点过程中触发

#### go-back

Required: `false`<br>
Parameters: -

返回500kv

#### select-high-light-lines

Required: `false`<br>
Parameters: `Array`

设置高亮线路

#### select-new-time

Required: `false`<br>
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

``` bash
# 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
``` bash
# install dependencies
npm install

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

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

- 1：准备图标配置文件nodeIcons.js
  ```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：在插件调用处传参
  ```js
  import { svgSource, iconName } from 'nodeIcons.js'
  // vue的data添加
  data () {
    svgSource,
    iconName,
    nodeValue
  }
  ```
  ```html
  <net-back-canvas
    :node-icons-svg="svgSource"
    :node-icons-name="iconName"
    :node-value="nodeValue" 
    ...other props
  ></net-back-canvas>
  ```
- 3：为nodeValue对象添加iconType属性
  ```js
  [
    {
      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包公有化