persagy_map

这是一个平面图组件；方便展示楼层平面图，业务空间，设备等并做相关的前端交互

how to use?

1按照依赖包

//1.将npm指向npm-saga
npm config set registry http://dev.dp.sagacloud.cn:8082/repository/npm-saga/

//2.登陆npmsaga(会自动弹出username;Password ；均输入:saga)
npm login --registry = http://dev.dp.sagacloud.cn:8082/repository/npm-saga/

//3 Email: (this IS public) [e-mail]

// 下载相关依赖包

npm install --save "persagy-map"

2引入相关组件

将组件包扔到你的项目assert文件夹中

import floorMap from '@/assert/persagy_map' //取决与你存放的路径

3 输入平面图资源的key值；

注：该key值必须在相应的资源服务器上存在对应的资源，否则无法绘制图形

<floorMap :datakey="132465.jsonp"></floorMap>

Options

Property	Description	type	default
datakey	底图对应的key;当展示空间详情时，为非必填选项	string	true
canvasKey	同一页面多次使用该组件间要用canvasKey区分	string	false
show_base_tooltip	是否展示浮动tooltips(针对底图)	boolean	false
show_space_tooltip	是否展示浮动tooltips(针对业务空间)	boolean	false
show_eq_tooltip	是否展示浮动tooltips(针对设备)	boolean	false
hasMapNav	是否展示楼层导航	boolean	true
floorList	楼层信息（hasMapNav=ture 为必填选项)配置看下方	array	[]
hasShowContro	是否展示控制器	boolean	true
hasShowContro	默认选中的楼层(当hasMapNav==true时此为必选)	string	''
isSpaceDetail	是否单独展示空间详情	boolean	false
outline	空间详情轮廓线 (isSpaceDetail==true 该值为必选) 详情数据在下方	Array	true
businessList	空间轮廓线 (isSpaceDetail==false 该值为必选) 详情数据在下方	Array	true
equipmentList	空间轮廓线 (isSpaceDetail==false 该值为必选) 详情数据在下方	Array	true
isModal	若该组件用做弹框需要设置该参数为true用于改变回调参数状态	Boolean	false
errMsg	当无法回去数据或者数据错误时展示的报错文案	string	''
selectSpace	需要高亮的空间，数组内的类型为string(对应的id)	Array	[]

outline 配置

ouline 是isSpaceDetail = ture 需要展示空间详情时的必选选项 outline为数组 以下为数组中item对象的配置

Property	Description	type	default
outLine	轮廓线数组	Array	true
spaceName	空间id	string	""
spaceId	空间名称	string	""
borderColor	边框颜色	string	""
bacColor	空间类型颜色	string	""
selectBorderColo	选中（或hover）边框颜色	string	""
selectBacColor	选中（或hover）空间类型颜色	string	""

注：罗廓线 outLine 对象中是后端传过来的轮廓参数，此轮廓参数为string类型，需要经过JSON.parse() 之后对其遍历后的item则为我们需要的outLine

示例代码

      //this.Ichnography 为接口返回的罗廓线参数需要json.parse()转换为数组
      const outLineList = JSON.parse(this.Ichnography)
      // outline 为需要传入的数组
      let outline = [];
      //需要轮廓线数组进行循环（注：一个空间内可能由数个小空间组成）
      outLineLIst.forEach((res) => {
        outline = [
          {
            outLine: res,
            spaceId: this.baseSpacedata.spaceName,
            spaceName: '', // 本地名称
            bacColor: "#F0F3F7", // 背景颜色
            borderColor: "#E4E5E7", // 边框颜色
          },
        ];
      });
      // outline为轮廓线想要的参数
    },

floorList 配置

floorList 当hasMapNav = ture 需要展示空间详情时的必选选项 floorList 以下为数组中item对象的配置

Property	Description	type	default	require
flloroName	楼层名称	string	''	true
floorId	楼层id	string	""	true
floorMap	空间底图key	string	""	true

businessList 配置

ouline 是isSpaceDetail = ture 需要展示空间详情时的必选选项 outline为数组 以下为数组中item对象的配置

Property	Description	type	default
outLine	轮廓线数组	Array	true
spaceName	空间id	string	""
spaceId	空间名称	string	""
borderColor	边框颜色	string	""
bacColor	空间类型颜色	string	""
selectBacColor	高亮的背景颜色	string	''
selectBorderColor	高亮的边框颜色	string	''
注：罗廓线 outLine 对象中是后端传过来的轮廓参数，此轮廓参数为string类型，需要经过JSON.parse()

equipmentList 配置

ouline 是isSpaceDetail = ture 需要展示空间详情时的必选选项 outline为数组 以下为数组中item对象的配置

Property	Description	type	default
imgSource	图标logo 引入方式 require(url)	string	''
spaceId	空间id	string	""
spaceName	空间名称	string	""
borderColor	边框颜色	string	""
bacColor	空间类型颜色	string	""
bimLocation	坐标点 （"32077.11,28320.9,53800.0"）	string	""
注：坐标点 bimLocation是后端传过来的坐标参数，此参数为string类型；

Functions

Function Name	Description
setFloorItem	点击楼层的回调函数，返回该楼层的 id;mapkey等所有信息
suitbalScale	点击打开弹窗 返回参数为 ture/false
clickSpaceItem	点击业务空间的回调函数，返回所有该空间的参数（在data中）
clickEquipItem	点击设备空间的回调函数，返回所有该空间的参数（在data中）
getrrmsg	当接口报错，或资源有误等无法展示数据时的回调函数用于报错的回调处理