fan-planar-viewer

    2.1.10 • Public • Published

    二维地图工具

    用于展示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} />
    

    Install

    npm i fan-planar-viewer

    DownloadsWeekly Downloads

    11

    Version

    2.1.10

    License

    ISC

    Unpacked Size

    8.27 MB

    Total Files

    8

    Last publish

    Collaborators

    • shomychen