二维地图与组态图预览工具

基于react,通过SVG（snapsvg.js）展示cad二维地图与组态图

 npm install @fan-z/viewers

GraphicViewer组态图

用法

import { GraphicViewer } from '@fan-z/viewers'
// 或 import GraphicViewer from '@fan-z/viewers/dist/graphic-viewer.js'

export const PageGraphicDemo = () => {
  import React, {useState} from 'react'
  const [designInfo, setDesignInfo] = useState({
    title: '标题',
    template: '',
  });
  return <div style={{ width: '100%', height: '100vh' }}>
    <GraphicViewer designInfo={designInfo}
                        absPath={'http://xxx:8181/spms-ibms/download/'}
                        dataList={[]} 
                        onCompClick={(data) => console.log('点击组件', data)}/>
    </div>
}

GraphicViewer API

| 参数 | 说明 | 类型 | 默认值 | |----------|------------------------------------------|-------------|-------| | designInfo | 组态图基础结构信息 | Object | {title: '', template: ''} 参考[designInfo API] | | dataList | 画布内的控件相关绑定设备值 | Array | 参考[dataList API]| | loading | 画布展示状态 | Boolean | false | | onCompClick | 画布上控件点击事件 | Function(compData) | 参数为当前点击控件的基础配置及设备绑定等完整数据 | | absPath | 画布上资源文件(如图片)路径源 | String | - |

designInfo API(组态图基础结构信息)

| 参数字段 | 说明 | 类型 |必选项| 参考值| |----------|------|-------------|------|------| | title | 组件标题 | String| 是 | | | template | 组件模板 | JOSN.String | 是 |参考[template.canvasConfig等 API] "{ canvasConfig:Object, compSymbols: Array,componentList: Array, curActivedId: String<"当前选中控件ID">}" |

dataList API(绑定设备值)

| 参数字段 | 说明 | 类型 |必选项| 参考值| |----------|------|-------------|------|------| |attId|属性ID|string|是|-| |name|控件名称|string|是|-| |value|属性值，用于开关、单列面板等，column值格式 "1:start,2:normal,3:manual,4:6"|string|是|-| |color|属性颜色，用于显示绑定后的状态颜色值|string|是|-| |scadaComponentId|控件ID|string|是|-| |path|图片路径|string|是|-| |label|用于设置显示“键值对”的键值，针对组件：键值对(名称 + 值)|string|是|-| |uuid|图层UUID|string|是|-| |attOption||string|否|-| |deviceId|预留，可弃用|string|否|-| |optionId|选项ID，用于获取开关默认的展示值（将从colors内去过滤 ）|string|是|-| |designDetailId|组态ID|string|否|-| |serialNumber|-|number|否|-|

PlanarViewer二维地图

使用时，如果已绑定对应的设备图标，需要另外引入相应的图标库文件,使用iconFontJs

用法

import React, {useState} from 'react'
import { PlanarViewer } from '@fan-z/viewers'
// 或 import PlanarViewer from '@fan-z/viewers/dist/planar-viewer.js'

export const PagePlanarDemo = () => {

  const handleHoverSticky = (nodeData, callUpdate, e, node) => {
    const [planarEvent, setPlanarEvent] = useState({});
    console.log('浮层经过事件', nodeData)
    callUpdate({
      deviceBrand: '通用送风品牌',
      deviceDesc: '大厦-1层- -一楼会议室送风机',
      deviceId: '84ff20cd-14a5-11ea-af93-0050568cb502',
      deviceModel: '通用送风型号',
      deviceName: '一楼会议室送风机',
      deviceSubType: '送风机',
      deviceSubTypeNo: 'blower',
      deviceTypeNo: 'supplyAirSystem',
      uuid: '1e0c2048-d329-43aa-8851-e9d6f001acdc',
      widgetUuid: '1e0c2048-d329-43aa-8851-e9d6f001acdc',
    }, e, nodeData, node);
  };
  const handleClickSticky = (nodeData) => {
    console.log('展示模式下点击事件', nodeData);
  };
  return <div style={{ width: '100%', height: '100vh' }}>
    <PlanarViewer id="pViewerId"
                  layerFile={editorComponentsList}
                  planarGraphFile={'http://xxx/map/layout/20191118142438207_23.svg'}
                  iconFontJs={'http://xxx/iconFont/75ae892f-1f57-11eb-b61f-0050568cb502.js'}
                  usePlanarEvent={(evnts) => setPlanarEvent(evnts)}
                  onHoverSticky={handleHoverSticky}
                  onClickSticky={handleClickSticky}
                  //  用renderPopover方法返回自定义浮层内容结果
                  /* renderPopover={(data,nodeData)=> {
                     return <>
                       <div className='device-name'>{data?.deviceDesc || '-'}</div>
                       <div className='device-params'><label>设备类型：</label> {data?.deviceSubType || '-'}</div>
                       <div className='device-params'><label>设备品牌：</label> {data?.deviceBrand || '-'}</div>
                       <div className='device-params'><label>设备型号：</label> {data?.deviceModel || '-'} </div>
                       <div className='device-params'><label>UUID：</label> {nodeData?.widgetUuid || '-'} </div>
                     </>
                   }}*/
    />
  </div>
}

PlanarViewer API

| 参数 | 说明 | 类型 | 默认值 | 参考值 | |----------|------------------------------------------|-------------|-------|-------| | planarGraphFile | 图纸文件(.svg文件)| String | - |- | | layerFile | 设备图层文件| Array（参考layerFileArray API）/File/String | - | - | | onHoverSticky | 鼠标经过图形控件事件 | Function(nodeData, callUpdate, e, node) | - | callUpdate()调用显示浮层可与renderPopover结合使用 | | onClickSticky | 鼠标点击图形控件事件 | Function(item) | - | | | extraEmpty |暂无图纸时显示 | ReactNode | - |- | | renderPopover |自定义鼠标经过时浮层显示内容结构 | Function(deviceData, nodeData)/ReactNode | - |- | | iconFontJs |图标库源文件(url地址) | String | - |- | | usePlanarEvent | 获取当前组件内部事件| Function(events) | - | 参考 usePlanarEvent API |

usePlanarEvent 组件内容常用事件 API

| 参数字段 | 说明 | 类型 |参考值| |----------|------|-------------|------| | setWidgetHighLight | 设置指定控件高亮 |Function(uuids)| - | | clearWidgetHighLight | 清空或移除控件高亮 | Function(keys) | keys为string且值为'all'表未全部清空 ，keys 为数组时，表示指定清空相关的uuid高亮状态 | | setIconConnection | 绘制指定图标之间的连线（有箭头动画） | Function(list, setting) | list=[{id: 'xxx', group: ['uuid','uuid', ...], setting: { fillColor: '#f00'}]: 多条，每条都是一个数组 | | removeIconConnection | 移除绘制连线 | Function(type, groupId) | type 'all'全部移除, 'single'指定groupId移除, groupId 传String时，只移除单个, Array可移除指定多个groupId | | updateWidgetStatus | 更新指定控件状态 | Function(option, status) | 单个：option为string用status是有值，多个：option为数组<{uuid: 'xxx', status:'danger'}> |