---
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图纸及绘制图形等工具

$3

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

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

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

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={
{//}
{
console.log('业务功能，点击显示弹窗或获取文件');
}}>变更底图
}
// 右侧扩展内容
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的状态
}
}}

>
`


$3

展示已绘制的建筑底图与设备图层，对已绑定设备可做点击等操作
#### 用法
`
import {PlanarEditor} from 'fan-planar-viewer'
或 import PlanarEditor from 'fan-planar-viewer/dist/planarEditor.js'

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)=> {}}
>
`

组态编辑器

> 绘制与展示设备组态图


$3

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




$3


`
import { GraphicPreview } from 'fan-planar-viewer/dist/graphic.js';
或 import { GraphicPreview } from 'fan-planar-viewer';

``

插件参考

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