nav: title: 指南 order: 1 title: 安装使用 order: 1

📦 安装

$ npm install fan-planar-viewer --save

或

$ yarn add fan-planar-viewer

版本依赖说明

• 对应组件库版本antd@5.x,fan-standard-comp@4.x
• 适用范围：最新IOT项目

其他版本文档

v2.x

• 适用范围：嘉里、丰田等使用antd4.0的项目
• 对应组件库版本antd@4.23.6,fan-standard-comp@3.x

• 文档。

v2.x-down

• 适用范围：所有产品版本IBMS等
• 对应组件库版本antd@3.x,fan-standard-comp@1.x

• 文档。

二维地图工具

用于展示SVG图纸及绘制图形等工具

编辑功能

1、将CAD转换成.svg文件的建筑底图展示在画布中，并在其基础上绘制添加新的形状与设备图层

2、形状绘制涉及的功能有：移动、修改相关属性、复制、删除等功能

用法

import {PlanarEditor} from 'fan-planar-viewer'
或 import PlanarEditor from 'fan-planar-viewer/dist/planarEditor.js'

<PlanarEditor id="planarEditorID"
                    defaultConfig={{icons: []}}
                    layerFile={[]}
                    planarGraphFile={'/download/map/layout/20191118142438207_23.svg'}
                    displayMode={'edit'}
                    usePlanarEvent={(evnts) => console.log(evnts)}
                    usePlanarState={(state) => console.log(state)}
                    onSave={(list) => {
                      console.log('当前需要保存的控件数量：', list.length, list);
                    }}
                    onDeleteSticky={(data, callback) => {
                      // TODO   如果已绑定在数据库中，即 data.id有值，则需要调用删除接口，成功返回则调用回调,需要过滤对应包含ID的数据
                      message.success('删除成功（如果已绑定在数据库中，即 data.id有值，则需要调用删除接口，成功返回则调用回调）');
                      console.log('删除的数据值：', data)
                      // 单个删除为字符串，多个值为数组
                      callback(Array.isArray(data) ? data.map(child => child.widgetUuid) : data.widgetUuid);
                    }}
                    deviceDataInfo={{
                      placeId: currentPlaceId, // 楼层ID
                      deviceTypeId: currentSysType, // 设备一级分类ID(系统类别)
                      placeTreeList, // 楼层数据
                      deviceTypeList: deviceTypeTreeList, // 系统类别select列表数据
                      deviceSubTypeList: activeSubDeviceType, // 设备类别select列表数据
                      deviceList, // 当前设备类别下的所有设备
                    }}
                    onSelectSticky={handleSelectSticky}
                    // 回路组合相关配置
                    loopConfig={{
                      loopList: [],
                      loopOnSave: ()=> {},
                      loopOnUpdate: ()=> {},
                      loopOnDelete: ()=> {}
                    }}
                    // 设备组合相关配置
                    equipConfig={{
                      equipList:  [],
                      equipOnSave: ()=> {},
                      equipOnUpdate: ()=> {},
                      equipOnDelete: ()=> {}
                    }}
                    // 左侧顶部扩展内容
                    extraSide={renderSideExtraPlace()} 
                    // 顶部靠右扩展内容
                    extraTool={<Space>
                      {/*<Switch  checkedChildren="锁定" unCheckedChildren="解锁" defaultChecked/>*/}
                      <Button type="primary" ghost onClick={() => {
                        console.log('业务功能，点击显示弹窗或获取文件');
                      }}>变更底图</Button>
                    </Space>}
                    // 右侧扩展内容
                    extraRight={renderRightExtraStatic()}
                    onClickBinding={(data, deviceId, type, callSuccess) => {
                      console.log('点击绑定事件，TODO需要加入接口调用，并且对于未保存的控件，在绑定成功时，将同时保存至数据库中，不需要操作画布中的“保存”', type)
                      // type = 'binding' 代表绑定操作，type = 'unbinding'代表解绑操作
                      if (type === 'binding') {
                        const responseParams = {
                          ...data,
                          deviceId
                        } // 可能会当前绑定的ID等其他参数[至少包含deviceId跟widgetUuid]也有可能返回当前控件所属的ID值
                        callSuccess(responseParams) // 如果绑定成功，则调用回调,绑定失败则不调用，即不会更新当前控件设备ID的状态
                      }
                      if (type === 'unbinding') {
                        callSuccess({ ...data, deviceId:undefined }) // 如果解绑成功，则调用回调,绑定失败则不调用，即不会更新当前控件设备ID的状态
                      }
                    }}

      ></PlanarEditor>

展示功能

展示已绘制的建筑底图与设备图层，对已绑定设备可做点击等操作

用法

import {PlanarEditor} from 'fan-planar-viewer'
或 import PlanarEditor from 'fan-planar-viewer/dist/planarEditor.js'

<PlanarEditor id="planarEditorShow"
                    defaultConfig={{icons: []}}
                    layerFile={[]}
                    planarGraphFile={'/download/map/layout/20191118142438207_23.svg'}
                    displayMode={'show'}
                    usePlanarEvent={(evnts) => console.log(evnts)}
                    usePlanarState={(state) => console.log(state)}
                    onHoverSticky={(nodeData, callUpdate, e, node)=>{} }
                    onClickSticky={(nodeData)=> {}}
      ></PlanarEditor>

组态编辑器

绘制与展示设备组态图

编辑用法

import { GraphicEditor } from 'fan-planar-viewer/dist/graphic.js';
或 import { GraphicEditor } from 'fan-planar-viewer';
  <GraphicEditor designInfo={designInfo} additionalTools={additionalTools} absPath={absPath}
                    modelListData={modelListData}
                    attributionsList={currentAttributions}
                    updateFetching={updateFetching} // 更新请求数据
                    comImageGroup={currentCompImageGroup}
                    uploaderBgImage={doUploaderImage}
     />

预览用法

import { GraphicPreview } from 'fan-planar-viewer/dist/graphic.js';
或 import { GraphicPreview } from 'fan-planar-viewer';
 <GraphicPreview designInfo={designInfo} additionalTools={additionalTools} />

插件参考

拖放组件： https://react-dnd.github.io/react-dnd/docs/api/use-drag