persagy_2d

persagy_2d

安装依赖(已安装过可跳过)

1.安装ts支持
npm install --save-dev typescript
npm install --save-dev @vue/cli-plugin-typescript
把tsconfig.json拷贝到项目根目录，注意修改paths和include里的路径(默认配置里的packages文件夹是在项目根目录下)

2.安装persagy-web绘图引擎
2.1.设置npm指向
npm config set registry http://dev.dp.sagacloud.cn:8082/repository/npm-saga/
2.2.安装依赖
npm install @persagy-web/base
npm install @persagy-web/big
npm install @persagy-web/draw
npm install @persagy-web/graph

使用

1.在项目入口js里添加以下代码
	import 'persagy_2d/persagy_2d.css'
	import persagy2d from 'persagy_2d'
	Vue.use(persagy2d)
2.在要使用persagy_2d的组件内加入以下代码
	<persagy2d :vmId="vmId"></persagy2d>
3.在需要绘图的地方执行绘图命令：
	this._persagy2d.drawStart(this.vmId,{});
	drawStart	见下述_persagy2d内的drawStart方法说明

组件的props说明

1.vmId	组件的ID，同一个html内不可重复
2.drawFinishedCall 图形绘制完成后的回调
3.mapClickCall	平面图内的点击事件的回调，说明如下：
	/**
	* 地图上点击时或者关联项点击时的回调，会传入两个参数：
	*  参数一为选择项，具有的属性如下：
		id: '空间或设备ID',
		name: '空间或设备名称',
		inSpaceId: '空间或设备对应的spaceId',
		type: 1,	1 空间；	2 设备
		classCode: '',
		isSelItem: true,是否是选择项
		isRelation: false,是否是关联项
		isMain: false,是否是重点设备或空间
		left: 111,	bimLocation所对应的页面上的像素位置距离图形区域边界的left数值
		top: 111,	bimLocation所对应的页面上的像素位置距离图形区域边界的top数值
	*  参数二为状态：0 代表原始状态(即退出选中状态)；	2 代表选中状态	
	*/
4.exitRelationViewCall 退出关联关系查看状态的回调
5.zoomChangeCall	缩放事件的回调。第一个参数为缩放的比例(除完一百后的浮点数)

_persagy2d内属性和方法说明

drawStart(vmId,drawData) 方法：画图。参数如下：

1.vmId 即绑定在组件上的vmId
2.drawData 格式如下(drawData里面的项不需要重复传入，如第一次画图时传入了spaceArr，那么在进行筛选时只需要传入：mapState:2,mapFilterArr:[]即可):
	* {
	*  mapState: 0,  图形状态：0 普通状态；1 查看关联关系状态；2 筛选状态；默认零
	*  coordSpaceArr:[40,31], 空间的最小间距，第一项为宽(像素值)，第二项为高(像素值)；文本距离或者图标距离小于等于第一项并且小于等于第二项时则后面的不显示
	*  isShowZoomIcon  是否要右下角的放大缩小图标，默认true
	*  spaceArr(基础数据空间数组):[{
	*    spaceId:'空间ID，必传，用以区分每一块空间',
	*    spaceName:'空间名称',
	*    spaceType:1 空间类型，默认1；1 物业空间  2 租户空间 ,
	*    roomFuncType:'最后一级的空间类型编码',
	*    outLineArr:[[[{X:111,Y:222}]]],
	*    classCode:'数据字典最大类编码',
	*    bimLocation:[1,2],
	*    isMain:false 是否是重点空间，默认false,
	*    iconSvgStr:'空间默认状态下的图标，svg字符串',
	*    iconHoverSvgStr:'空间鼠标悬浮状态下的图标，svg字符串',
	*    iconSelSvgStr:'空间选中中间状态下的图标，svg字符串',
	*  }],
	*  equipmentArr: 只有在previewType为2时才有效
	*  [{
	*    eqId:'设备ID',
	*    eqName:'设备名称',
	*    inSpaceId:'所在的空间ID',
	*    classCode:'数据字典最大类编码',
	*    isMain:false 是否是重点设备，默认false,
	*    iconSvgStr:'空间默认状态下的图标，svg字符串',
	*    iconHoverSvgStr:'空间鼠标悬浮状态下的图标，svg字符串',
	*    iconSelSvgStr:'设备选中中间状态下的图标，svg字符串',
	*	 bimLocation:[1,2]
	*  }],
	*  columnArr(柱子):[{
	*    outLineArr:[[[{X:111,Y:222}]]],
	*  }],
	*  wallArr(墙):[{
	*    outLineArr:[[[{X:111,Y:222}]]],
	*  }],
	*  relationArr(关联关系数组): [{
	*    id:'设备或空间的ID',
	*    name:'空间或设备名称',
	*    inSpaceId:'所在的空间ID，空间时等于id，设备时即设备所在的空间ID',
	*    type:1, 1 空间  2 设备
	*    classCode:'数据字典最大类编码',用于给设备加图标
	*    isSelItem:true, 是否是选择项
	*    isRelation:false  是否还有自己的关联关系
	*    isMain:false 是否是重点空间或重点设备，默认false,
	*	 bimLocation:[1,2],
	*    iconSelfSvgStr:'选择项的图标，svg字符串',
	*    iconSvgStr:'关联项默认状态下的图标，svg字符串',、
	*    iconSvgHoverStr:'关联项hover状态下的图标，svg字符串',
	*    iconSvgSelStr:'关联项选中中间态下的图标，svg字符串',
	*  }],
	*  mapFilterArr(筛选出的空间或设备数组):[{
	*    spaceId:'空间的ID',
	*    eqId:'设备ID，有此属性时，代表搜索的是设备',
	*  }],
	*  showLabelOfArr(显示label的空间或设备数组):[{spaceId: "空间ID",eqId:'设备ID，有此属性时，代表控制的是设备',}]
	*  conduitArr(管道数组):[{
	*	 id:'管道ID',
	*    name:'管道名称',
	*    funcType:'管道类型编码，没有可不传',
	*    color:'#ffffff 管道(线)的颜色',
	*    lineWidth:1,  管道(线)的宽，默认4
	*    conduitDataArr(管道数据数组):[{
	*      startPoint(线的开始点坐标):{
	*        X:111,Y:111
	*      },
	*      endPoint(线的结束点坐标):{
	*        X:111,Y:111
	*      }
	*    }],
	*    connectorArr(管件数组):[{
	*      location(用它去和connectPoints里的每一项逐一连接组成线):{X:111,Y:111},
	*      connectPoints:[{X:111,Y:111}]
	*    }]
	*  }]
	* }

highLightToSpace(vmId,highLightObj) 方法：高亮某个空间。参数如下：

1.vmId 即绑定在组件上的vmId
2.highLightObj 格式如下：
	{
		spaceId:'空间时空间ID，设备时设备所在的空间ID',
		type:0 取消高亮  1 高亮
	}

drawSize(vmId,sizeObj) 方法：重置画布大小时使用。参数如下：

1.vmId 即绑定在组件上的vmId
2.sizeObj 格式如下(宽高的单位均为像素，不需要加px)：
	{
		width:100,
		height:100
	}

drawWall(vmId,wallObj) 方法：往图形上添加墙，适用的场景：已绘制出图形，在图形上添加墙。参数如下：

1.vmId 即绑定在组件上的vmId
2.wallObj:
	{
		wallArr(墙):[{
		}],
		isShowZoomIcon:true  是否要右下角的放大缩小图标，默认true
	}

drawColumn(vmId,columnObj) 方法：往图形上添加柱子，适用的场景：已绘制出图形，在图形上添加柱子。参数如下：

1.vmId 即绑定在组件上的vmId
2.columnObj:
	{
		columnArr(柱子):[{
			outLineArr:[[[{X:111,Y:222}]]],
		}],
		isShowZoomIcon:true  是否要右下角的放大缩小图标，默认true
	}

drawConduit(vmId,conduitObj) 方法：往图形上添加管道，适用的场景：已绘制出图形，在图形上添加管道。参数如下：

1.vmId 即绑定在组件上的vmId
2.conduitObj
	{
		conduitArr(管道数组)[{
			id:'管道ID',
			name:'管道名称',
			funcType:'管道类型编码，没有可不传',
			color:'#ffffff 管道(线)的颜色',
			lineWidth:1,  管道(线)的宽，默认1
			conduitDataArr(管道数据数组):[{
				startPoint(线的开始点坐标):{
				X:111,Y:111
				},
				endPoint(线的结束点坐标):{
				X:111,Y:111
				}
			}],
			connectorArr(管件数组):[{
				location(用它去和connectPoints里的每一项逐一连接组成线):{X:111,Y:111},
				connectPoints:[{X:111,Y:111}]
			}]
		}]
	}

clearConduit(vmId,conduitObj) 方法：清除管道。参数如下：

1.vmId 即绑定在组件上的vmId
2.conduitObj
	{
		conduitId:'1', 管道ID，不传时将清除所有的管道,
		isShowZoomIcon:true  是否要右下角的放大缩小图标，默认true
	}

getPxByLocation(vmId,locations)方法

方法说明：把位置坐标转为页面上的像素值,坐标X对应left、坐标y对应top。left、top分别为坐标点距图形区域边界的数值
参数说明：
	1.vmId 即绑定在组件上的vmId
	2.locations 坐标数组，第一项为x坐标，第二项为y坐标，例:[111,121]
返回说明：return {left:1,top:1}

setSpaceOrEquipState(vmId,_obj) 方法：设置某个空间或设备的状态。参数如下：

1.vmId 即绑定在组件上的vmId
2._obj
	{
		id:'设备或空间ID',
		type:1,   	//1 空间；  2 设备
		state:1,		//0 原始状态；  1 hover状态； 2 选中状态
		mapState:0   //0 普通状态，此时设置的选中或悬浮状态为图形块或者设备框的； 1 关联关系状态，此时设置的选中或悬浮状态为关联关系弹框的。默认零
	}

备注