fan-planar-viewer
v2.3.30
Published
display svg node in planar files
Downloads
119
Readme
二维地图工具
用于展示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
注:antd 版本不能使用超过[email protected]
若安装[email protected]以上版本,在弹窗上使用二维地图则会报错