Browse Source

Merge branch 'infoPoint' of http://39.106.8.246:3003/web/ibms into infoPoint

YaolongHan 5 years ago
parent
commit
1c0e803040

+ 18 - 16
src/assets/graphy/SGraphy/dataType.ts

@@ -1,5 +1,5 @@
 import { SPen, SPainter, SColor } from "@sybotan-web/draw";
-import  SGraphyPolygonItem from './newItems/SGraphyPolygonItem'
+import SGraphyPolygonItem from './newItems/SGraphyPolygonItem'
 /**
  * 接口类型
  * @param
@@ -31,7 +31,14 @@ interface dataSpaceItem {
     LocationPoint: dataItemPath,
     Name: string,
     Paths: dataItemPath[][],
-    id:string
+    id: string,
+    type: number,                  //item类型
+    businessId?: string | null,  //绑定的业务id
+    isBusiness?: number,        //业务类型
+    fillColor?: SColor,         //填充颜色
+    color?: SColor,             //边框颜色
+    businessName?: string | null,  //业务名称
+    width?: number
 }
 // 传入的data 的接口类型 
 interface dataInterface {
@@ -43,21 +50,16 @@ interface dataInterface {
 }
 //获取绑定空间的接口
 interface businessDataInterface {
-    id:string,
-    name:string,
-    children:string[],
-    isAdjacent:boolean,
-    isAbut:boolean
+    id: string,
+    name: string,
+    children: string[],
+    isAdjacent: boolean,
+    isAbut: boolean
 }
 // 多边形传入的参数接口
 interface PolygonItemInterface {
-    parent:SGraphyPolygonItem|null //父类
-    space:dataSpaceItem,       //传入的item 参数
-    businessId?:string | null,  //绑定的业务id
-    isBusiness?:number,        //业务类型
-    fillColor?:SColor,         //填充颜色
-    color?:SColor,             //边框颜色
-    businessName?:string|null,  //业务名称
-    width?:number
+    parent: SGraphyPolygonItem | null //父类
+    space: dataSpaceItem,       //传入的item 参数
+    businessType?: string
 }
-export {dataItemPath,dataItem,dataSpaceItem,dataInterface,businessDataInterface,PolygonItemInterface}
+export { dataItemPath, dataItem, dataSpaceItem, dataInterface, businessDataInterface, PolygonItemInterface }

+ 4 - 2
src/assets/graphy/SGraphy/mainScene.js

@@ -158,7 +158,8 @@ var mainScene = /** @class */ (function (_super) {
                 if (space[i].Paths[1] && space[i].Paths[1].length >= 2) {
                     this.addItem(this.constructeItem({
                         parent: null,
-                        space: space[i]
+                        space: space[i],
+                        businessType: 'space'
                     }));
                 }
             }
@@ -166,7 +167,8 @@ var mainScene = /** @class */ (function (_super) {
                 if (space[i].Paths[0] && space[i].Paths[0].length >= 2 && !space[i].Paths[1]) {
                     this.addItem(this.constructeItem({
                         parent: null,
-                        space: space[i]
+                        space: space[i],
+                        businessType: 'space'
                     }));
                 }
             }

+ 4 - 2
src/assets/graphy/SGraphy/mainScene.ts

@@ -145,7 +145,8 @@ export default class mainScene extends SGraphyScene {
                     this.addItem(this.constructeItem(
                         {
                             parent: null,
-                            space: space[i]
+                            space: space[i],
+                            businessType:'space'
                         }));
                 }
             }
@@ -154,7 +155,8 @@ export default class mainScene extends SGraphyScene {
                     this.addItem(this.constructeItem(
                         {
                             parent: null,
-                            space: space[i]
+                            space: space[i],
+                            businessType:'space'
                         }));
                 }
             }

+ 111 - 0
src/assets/graphy/SGraphy/newItems/SGraphyImgItem.js

@@ -0,0 +1,111 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import { SGraphyItem } from '@sybotan-web/graphy';
+import { SRect } from "@sybotan-web/base";
+/**
+ * 图形Item类  todo
+ *
+ */
+var SGraphyImgItem = /** @class */ (function (_super) {
+    __extends(SGraphyImgItem, _super);
+    /**
+     * 构造函数
+     *
+     * @param width        		图片宽度
+     * @param height   				图片高度
+     * @param imgSource     	图片源
+     * @param X        				图片向x轴的偏移量
+     * @param Y        				图片向y轴的偏移量
+     * @param parent   				指向父元素
+     */
+    function SGraphyImgItem(parent, imgSource, X, Y, width, height) {
+        var _this = _super.call(this, parent) || this;
+        _this.width = 0;
+        _this.height = 0;
+        _this.imgSource = imgSource;
+        _this.X = X;
+        _this.Y = Y;
+        _this.width = width;
+        _this.height = height;
+        _this.img = new Image();
+        _this.img.src = _this.imgSource;
+        return _this;
+    } // Constructor()
+    /**
+     * Item对象边界区域
+     *
+     * @return SRect
+     */
+    SGraphyImgItem.prototype.boundingRect = function () {
+        return new SRect(this.X, this.Y, this.width, this.height);
+    }; // Function boundingRect()
+    // contains(x: number, y: number): boolean {
+    // 	return this.boundingRect().contains(x - this.X, y - this.Y);
+    // }
+    SGraphyImgItem.prototype.onClick = function (event) {
+        this.$emit('click', event);
+        return true;
+    }; // Function onClick()
+    /**
+  * 鼠标双击事件
+  *
+  * @param   event   保存事件参数
+  * @return  boolean
+  */
+    SGraphyImgItem.prototype.onDoubleClick = function (event) {
+        this.$emit('doubleClick', event);
+        return true;
+    };
+    /**
+  * 鼠标按下事件
+  *
+  * @param   event   保存事件参数
+  * @return  boolean
+  */
+    SGraphyImgItem.prototype.onMouseDown = function (event) {
+        this.$emit('mouseDown', event);
+        return true;
+    }; // Function onMouseDown()
+    /**
+     * 鼠标移动事件
+     *
+     * @param   event   保存事件参数
+     * @return  boolean
+     */
+    SGraphyImgItem.prototype.onMouseMove = function (event) {
+        this.$emit('mouseMove', event);
+        return true;
+    }; // Function onMouseMove()
+    /**
+     * 释放鼠标事件
+     *
+     * @param   event   保存事件参数
+     * @return  boolean
+     */
+    SGraphyImgItem.prototype.onMouseUp = function (event) {
+        this.$emit('mouseUp', event);
+        return true;
+    };
+    /**
+     * Item绘制操作
+     *
+     * @param   painter       painter对象
+     * @param   rect          绘制区域
+     */
+    SGraphyImgItem.prototype.onDraw = function (painter, rect) {
+        painter.drawImage(this.img, this.X, this.Y, this.width, this.height);
+    };
+    return SGraphyImgItem;
+}(SGraphyItem)); // Class SGraphyImgItem
+export { SGraphyImgItem };

+ 116 - 0
src/assets/graphy/SGraphy/newItems/SGraphyImgItem.ts

@@ -0,0 +1,116 @@
+import { SGraphyItem, SMouseEvent } from '@sybotan-web/graphy'
+import { SRect, SSize } from "@sybotan-web/base";
+import { SPen, SPainter, SColor } from "@sybotan-web/draw";
+
+/**
+ * 图形Item类  todo
+ *
+ */
+export class SGraphyImgItem extends SGraphyItem {
+	imgSource: string; //可以为url,base64
+	X: number;
+	Y: number;
+	width: number = 0;
+	height: number = 0;
+	img: CanvasImageSource
+
+	/**
+	 * 构造函数
+	 * 
+	 * @param width        		图片宽度
+	 * @param height   				图片高度
+	 * @param imgSource     	图片源
+	 * @param X        				图片向x轴的偏移量
+	 * @param Y        				图片向y轴的偏移量
+	 * @param parent   				指向父元素
+	 */
+	constructor(
+		parent: SGraphyItem | null,
+		imgSource: string,
+		X: number,
+		Y: number,
+		width: number,
+		height: number,
+	) {
+		super(parent);
+		this.imgSource = imgSource;
+		this.X = X;
+		this.Y = Y;
+		this.width = width;
+		this.height = height;
+		this.img = new Image();
+		this.img.src = this.imgSource;
+	} // Constructor()
+
+	/**
+	 * Item对象边界区域
+	 * 
+	 * @return SRect
+	 */
+	boundingRect(): SRect {
+		return new SRect(
+			this.X,
+			this.Y,
+			this.width,
+			this.height
+		);
+	} // Function boundingRect()
+	// contains(x: number, y: number): boolean {
+	// 	return this.boundingRect().contains(x - this.X, y - this.Y);
+	// }
+	onClick(event: SMouseEvent): boolean {
+		this.$emit('click', event);
+		return true;
+	} // Function onClick()
+	/**
+  * 鼠标双击事件
+  *
+  * @param   event   保存事件参数
+  * @return  boolean
+  */
+	onDoubleClick(event: SMouseEvent): boolean {
+		this.$emit('doubleClick', event);
+		return true;
+	}
+	/**
+  * 鼠标按下事件
+  *
+  * @param   event   保存事件参数
+  * @return  boolean
+  */
+	onMouseDown(event: SMouseEvent): boolean {
+		this.$emit('mouseDown', event);
+		return true;
+	} // Function onMouseDown()
+
+	/**
+	 * 鼠标移动事件
+	 *
+	 * @param   event   保存事件参数
+	 * @return  boolean
+	 */
+	onMouseMove(event: SMouseEvent): boolean {
+		this.$emit('mouseMove', event);
+		return true;
+	} // Function onMouseMove()
+
+	/**
+	 * 释放鼠标事件
+	 *
+	 * @param   event   保存事件参数
+	 * @return  boolean
+	 */
+	onMouseUp(event: SMouseEvent): boolean {
+		this.$emit('mouseUp', event);
+		return true;
+	}
+	/**
+	 * Item绘制操作
+	 *
+	 * @param   painter       painter对象
+	 * @param   rect          绘制区域
+	 */
+	onDraw(painter: SPainter, rect?: SRect): void {
+		painter.drawImage(this.img, this.X, this.Y, this.width, this.height);
+	}
+} // Class SGraphyImgItem

+ 11 - 8
src/assets/graphy/SGraphy/newItems/SGraphyPolygonItem.js

@@ -30,8 +30,8 @@ var SGraphyPolygonItem = /** @class */ (function (_super) {
      * @param fillColor   							多边形填充的颜色
      * @param businessId								空间id
      * @param businessName							空间名称
-     * @param centerOfGravityPoint			 中心点
-     * @param isBusiness						状态
+     * @param centerOfGravityPoint			中心点
+     * @param isBusiness								状态
      * @param parent
      */
     function SGraphyPolygonItem(PolygonItemData) {
@@ -44,32 +44,35 @@ var SGraphyPolygonItem = /** @class */ (function (_super) {
         _this.cacheColor = SColor.Black; //需要缓存的边框
         _this.cacheFillColor = new SColor('#F2F6FC'); //需要缓存的填充色
         _this.cacheWidth = 100;
+        _this.businessType = ''; //类型
         // 修改绘制路径格式
         var newSpacePaths = PolygonItemData.space.Paths[0].map(function (item) {
             return new SPoint(item.X, item.Y);
         });
         _this.pointArr = newSpacePaths;
-        // // 填充色
-        PolygonItemData.fillColor ? _this.fillColor = PolygonItemData.fillColor : _this.fillColor = new SColor('#F2F6FC');
+        // 填充色
+        _this.fillColor = PolygonItemData.space.fillColor ? PolygonItemData.space.fillColor : new SColor('#F2F6FC');
         // 边框色
-        PolygonItemData.color ? _this.color = PolygonItemData.color : _this.color = SColor.Black;
+        _this.color = PolygonItemData.space.color ? PolygonItemData.space.color : SColor.Black;
         //边框宽度
-        PolygonItemData.width ? _this.width = PolygonItemData.width : _this.width = 100;
+        _this.width = PolygonItemData.space.width ? PolygonItemData.space.width : 100;
         //中心点
         _this.centerOfGravityPoint = {
             x: PolygonItemData.space.LocationPoint.X,
             y: -PolygonItemData.space.LocationPoint.Y
         };
         //业务空间类型
-        PolygonItemData.isBusiness ? _this.isBusiness = PolygonItemData.isBusiness : _this.isBusiness = 1;
+        _this.isBusiness = PolygonItemData.space.isBusiness ? PolygonItemData.space.isBusiness : 1;
         //业务空间id
-        PolygonItemData.businessId ? _this.businessId = PolygonItemData.businessId : _this.businessId = null;
+        _this.businessId = PolygonItemData.space.businessId ? PolygonItemData.space.businessId : null;
         //业务空间名称
         _this.businessName = PolygonItemData.space.Name;
         _this.initName = PolygonItemData.space.Name;
         // 空间id
         _this.id = PolygonItemData.space.id;
         _this.viewText = PolygonItemData.space.Name;
+        //类型
+        _this.businessType = PolygonItemData.businessType ? PolygonItemData.businessType : '';
         return _this;
     }
     /**

+ 38 - 35
src/assets/graphy/SGraphy/newItems/SGraphyPolygonItem.ts

@@ -9,19 +9,20 @@ import { dataItemPath, dataItem, dataSpaceItem, dataInterface, PolygonItemInterf
  */
 export default class SGraphyPolygonItem extends SGraphyItem {
 	pointArr: SPoint[];
-	fillColor: SColor =new SColor('#F2F6FC');
+	fillColor: SColor = new SColor('#F2F6FC');
 	color: SColor = SColor.Black;
-	width: number =200;
+	width: number = 200;
 	businessId: string | null;
 	id: string | null;
 	centerOfGravityPoint: { x: number, y: number };
 	businessName: null | string | undefined;    //业务空间名字
 	initName: null | string | undefined;        //空间名字
-	viewText:string = ''                        //绘出的文案
+	viewText: string = ''                        //绘出的文案
 	isBusiness: number = 1;
-	cacheColor:SColor= SColor.Black             //需要缓存的边框
-	cacheFillColor:SColor =	 new SColor('#F2F6FC');        //需要缓存的填充色
-	cacheWidth:number = 100;
+	cacheColor: SColor = SColor.Black             //需要缓存的边框
+	cacheFillColor: SColor = new SColor('#F2F6FC');        //需要缓存的填充色
+	cacheWidth: number = 100;
+	businessType: string = ''													//类型
 	// actived: boolean = false; 				//是否激活
 	/**
 	 * 构造函数
@@ -32,38 +33,40 @@ export default class SGraphyPolygonItem extends SGraphyItem {
 	 * @param fillColor   							多边形填充的颜色 
 	 * @param businessId								空间id
 	 * @param businessName							空间名称
-	 * @param centerOfGravityPoint			 中心点
-	 * @param isBusiness						状态
+	 * @param centerOfGravityPoint			中心点
+	 * @param isBusiness								状态
 	 * @param parent    
 	 */
 	constructor(PolygonItemData: PolygonItemInterface) {
 		super(PolygonItemData.parent);
 		// 修改绘制路径格式
 		let newSpacePaths: SPoint[] = PolygonItemData.space.Paths[0].map(item => {
-			return new SPoint(item.X,item.Y)
+			return new SPoint(item.X, item.Y)
 		});
 		this.pointArr = newSpacePaths;
-		// // 填充色
-		PolygonItemData.fillColor ? this.fillColor = PolygonItemData.fillColor : this.fillColor = new SColor('#F2F6FC');
+		// 填充色
+		this.fillColor = PolygonItemData.space.fillColor ? PolygonItemData.space.fillColor : new SColor('#F2F6FC');
 		// 边框色
-		PolygonItemData.color ? this.color = PolygonItemData.color : this.color = SColor.Black;
+		this.color = PolygonItemData.space.color ? PolygonItemData.space.color : SColor.Black;
 		//边框宽度
-		PolygonItemData.width ? this.width = PolygonItemData.width : this.width = 100;
+		this.width = PolygonItemData.space.width ? PolygonItemData.space.width : 100;
 		//中心点
 		this.centerOfGravityPoint = {
 			x: PolygonItemData.space.LocationPoint.X,
 			y: -PolygonItemData.space.LocationPoint.Y
 		};
 		//业务空间类型
-		PolygonItemData.isBusiness ? this.isBusiness = PolygonItemData.isBusiness : this.isBusiness = 1;
+		this.isBusiness = PolygonItemData.space.isBusiness ? PolygonItemData.space.isBusiness : 1;
 		//业务空间id
-		PolygonItemData.businessId ? this.businessId = PolygonItemData.businessId : this.businessId = null;
+		this.businessId = PolygonItemData.space.businessId ? PolygonItemData.space.businessId : null
 		//业务空间名称
 		this.businessName = PolygonItemData.space.Name;
-		this.initName =  PolygonItemData.space.Name;
+		this.initName = PolygonItemData.space.Name;
 		// 空间id
 		this.id = PolygonItemData.space.id;
 		this.viewText = PolygonItemData.space.Name;
+		//类型
+		this.businessType = PolygonItemData.businessType ? PolygonItemData.businessType : ''
 	}
 
 	/**
@@ -137,11 +140,11 @@ export default class SGraphyPolygonItem extends SGraphyItem {
 	 * @param text 修改的文字
 	 * @param centerOfGravityPoint 文字的坐标
 	 */
-	addText(text:string,centerOfGravityPoint?:{ x: number, y: number }){
-		 this.viewText = text;
-		 if(centerOfGravityPoint){
-			 this.centerOfGravityPoint = centerOfGravityPoint
-		 }
+	addText(text: string, centerOfGravityPoint?: { x: number, y: number }) {
+		this.viewText = text;
+		if (centerOfGravityPoint) {
+			this.centerOfGravityPoint = centerOfGravityPoint
+		}
 	}
 	/**
 	 * Item绘制操作
@@ -161,10 +164,10 @@ export default class SGraphyPolygonItem extends SGraphyItem {
 			// } else {
 			// 	text = '⬇️   ' + this.initName
 			// }
-			painter.font.size = this.scale*200;
+			painter.font.size = this.scale * 200;
 			painter.brush.color = SColor.Black;
 			// painter.drawText(text,this.centerOfGravityPoint.x,this.centerOfGravityPoint.y)
-			painter.drawText(this.viewText,this.centerOfGravityPoint.x,this.centerOfGravityPoint.y)
+			painter.drawText(this.viewText, this.centerOfGravityPoint.x, this.centerOfGravityPoint.y)
 		}
 	}
 	onClick(event: SMouseEvent): boolean {
@@ -192,23 +195,23 @@ export default class SGraphyPolygonItem extends SGraphyItem {
 		return true;
 	} // Function onMouseDown()
 
-    /**
-     * 鼠标移动事件
-     *
-     * @param   event   保存事件参数
-     * @return  boolean
-     */
+	/**
+	 * 鼠标移动事件
+	 *
+	 * @param   event   保存事件参数
+	 * @return  boolean
+	 */
 	onMouseMove(event: SMouseEvent): boolean {
 		this.$emit('mouseMove', event);
 		return true;
 	} // Function onMouseMove()
 
-    /**
-     * 释放鼠标事件
-     *
-     * @param   event   保存事件参数
-     * @return  boolean
-     */
+	/**
+	 * 释放鼠标事件
+	 *
+	 * @param   event   保存事件参数
+	 * @return  boolean
+	 */
 	onMouseUp(event: SMouseEvent): boolean {
 		this.$emit('mouseUp', event);
 		return true;