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) [email protected]

// 下载相关依赖包

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 | 当接口报错，或资源有误等无法展示数据时的回调函数用于报错的回调处理