@fan-z/viewers v1.0.5

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

基于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 API(组态图基础结构信息)

dataList API(绑定设备值)

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

usePlanarEvent 组件内容常用事件 API