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

基于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'}>