二维地图与组态图预览工具
基于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'}> |