Explorar el Código

增加点击事件

YaolongHan hace 6 años
padre
commit
0faab90522

+ 3 - 6
package.json

@@ -10,12 +10,9 @@
         "build": "node build/build.js"
     },
     "dependencies": {
-<<<<<<< HEAD
-=======
-        "@sybotan-web/base": "^2.0.42",
-        "@sybotan-web/draw": "^2.0.49",
-        "@sybotan-web/graphy": "^2.0.57",
->>>>>>> c764c27108df9d02d952526c79bcabdf4c678a60
+        "@sybotan-web/base": "2.0.51",
+        "@sybotan-web/draw": "2.0.91",
+        "@sybotan-web/graphy": "2.0.73",
         "axios": "^0.18.0",
         "echarts": "^4.1.0",
         "element-ui": "^2.6.1",

+ 0 - 0
src/assets/graphy/SGraphy/dataType.js


+ 164 - 0
src/assets/graphy/SGraphy/mainScene.js

@@ -0,0 +1,164 @@
+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 { SGraphyPolygonItem } from './newItems/SGraphyPolygonItem.js';
+import { SGraphyScene } from "@sybotan-web/graphy";
+/**
+ * @name mainScene
+ * @time 2019-07.07;
+ * 添加所有item的场景到scene中
+ */
+var mainScene = /** @class */ (function (_super) {
+    __extends(mainScene, _super);
+    /**
+     * @param data 绘制空间地图得所有参数
+     */
+    function mainScene(data) {
+        var _this_1 = _super.call(this) || this;
+        _this_1._isShowSpace = true; // 是否显示空间;
+        _this_1._isShowWallList = true; //是否展示墙体;
+        _this_1._isShowEquipmentList = true; //是否展示设备;
+        _this_1._isShowVrtualWallList = true; //是否展示虚拟墙
+        _this_1.data = data;
+        _this_1.addAllItemList(data);
+        return _this_1;
+    }
+    Object.defineProperty(mainScene.prototype, "isShowSpace", {
+        // 设置是否显示空间
+        get: function () {
+            return this._isShowSpace;
+        },
+        set: function (b) {
+            this._isShowSpace = b;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(mainScene.prototype, "isShowWallList", {
+        // 设置是否显示墙
+        get: function () {
+            return this._isShowWallList;
+        },
+        set: function (b) {
+            this._isShowWallList = b;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(mainScene.prototype, "isShowEquipmentList", {
+        // 设置是否显示设备
+        get: function () {
+            return this._isShowEquipmentList;
+        },
+        set: function (b) {
+            this._isShowEquipmentList = b;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(mainScene.prototype, "isShowVrtualWallList", {
+        // 设置是否显示虚拟墙
+        get: function () {
+            return this._isShowVrtualWallList;
+        },
+        set: function (b) {
+            this._isShowVrtualWallList = b;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    // 以下是绘制方法
+    /**
+     * 增添所有绘制item(地图);
+    */
+    mainScene.prototype.addAllItemList = function (data) {
+        var space = data.SpaceList;
+        this.addSpaceList(space); //绘制空间
+    };
+    /**
+     * 添加所有空间到scene 中
+     * @param space 空间list
+     */
+    mainScene.prototype.addSpaceList = function (space) {
+        if (space && space.length) {
+            for (var i = 0; i < space.length; i++) {
+                if (space[i].Paths[1] && space[i].Paths[1].length >= 2) {
+                    this.addItem(this.constructeItem({
+                        parent: null,
+                        space: space[i]
+                    }));
+                }
+            }
+            for (var i = 0; i < space.length; i++) {
+                if (space[i].Paths[0] && space[i].Paths[0].length >= 2 && !space[i].Paths[1]) {
+                    this.addItem(this.constructeItem({
+                        parent: null,
+                        space: space[i]
+                    }));
+                }
+            }
+        }
+    };
+    // 绘制墙体
+    mainScene.prototype.addWallList = function () {
+    };
+    // 绘制设备
+    mainScene.prototype.addEquipmentList = function () {
+    };
+    // 绘制柱体
+    mainScene.prototype.addColumnListList = function () {
+    };
+    // 绘制虚拟墙
+    mainScene.prototype.addVrtualWallList = function () {
+    };
+    /**
+     * 产生item实例
+     */
+    mainScene.prototype.constructeItem = function (PolygonItemInterfaceData) {
+        return new SGraphyPolygonItem(PolygonItemInterfaceData);
+    };
+    // 鼠标交互类事件
+    // 点击
+    mainScene.prototype.click = function (_this, fn) {
+        console.log('xxxxxxxxxxx', fn);
+        this.root.children.forEach(function (item) {
+            item.connect("click", _this, fn);
+        });
+    };
+    // 双击
+    mainScene.prototype.dbclick = function (_this, fn) {
+        this.root.children.forEach(function (item) {
+            item.connect("doubleClick", _this, fn);
+        });
+    };
+    // 按下
+    mainScene.prototype.mouseDown = function (_this, fn) {
+        this.root.children.forEach(function (item) {
+            item.connect("mouseDown", _this, fn);
+        });
+    };
+    //移动
+    mainScene.prototype.mouseMove = function (_this, fn) {
+        this.root.children.forEach(function (item) {
+            item.connect("mouseMove", _this, fn);
+        });
+    };
+    // 点解结束
+    mainScene.prototype.mouseUp = function (_this, fn) {
+        this.root.children.forEach(function (item) {
+            item.connect("mouseUp", _this, fn);
+        });
+    };
+    return mainScene;
+}(SGraphyScene));
+export default mainScene;

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

@@ -1,9 +1,9 @@
 
 import { SRect, SSize, SPoint } from "@sybotan-web/base";
-import { SGraphyPolygonItem } from './newItems/SGraphyPolygonItem'
+import { SGraphyPolygonItem } from './newItems/SGraphyPolygonItem.js'
 import { SGraphyScene, SMouseEvent } from "@sybotan-web/graphy";
 import { SPen, SPainter, SColor } from "@sybotan-web/draw";
-import { dataItemPath, dataItem, dataSpaceItem, dataInterface, PolygonItemInterface } from './dataType'   //传入参数的参数接口类型
+import { dataItemPath, dataItem, dataSpaceItem, dataInterface, PolygonItemInterface } from './dataType.js'   //传入参数的参数接口类型
 
 /**
  * @name mainScene

+ 68 - 0
src/assets/graphy/SGraphy/newItems/SGraphyCircleItem.js

@@ -0,0 +1,68 @@
+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";
+import { SColor } from "@sybotan-web/draw";
+/**
+ * 圆Item类
+ *
+ */
+var SGraphyCircleItem = /** @class */ (function (_super) {
+    __extends(SGraphyCircleItem, _super);
+    /**
+     * 构造函数
+     *
+     * @param r          圆半径
+     * @param width      圆线的宽度
+     * @param color      圆线的颜色
+     * @param fillColor  圆填充的颜色
+     * @param parent
+     */
+    function SGraphyCircleItem(parent, r, fillColor, color, width) {
+        if (fillColor === void 0) { fillColor = SColor.White; }
+        if (color === void 0) { color = SColor.Black; }
+        if (width === void 0) { width = 1; }
+        var _this = _super.call(this, parent) || this;
+        _this.fillColor = SColor.White;
+        _this.color = SColor.Black;
+        _this.width = 1;
+        _this.r = r;
+        _this.color = color;
+        _this.fillColor = fillColor;
+        _this.width = width;
+        return _this;
+    } // Constructor()
+    /**
+     * Item对象边界区域
+     *
+     * @return SRect
+     */
+    SGraphyCircleItem.prototype.boundingRect = function () {
+        return new SRect(-this.r, -this.r, 2 * this.r, 2 * this.r);
+    }; // Function boundingRect()
+    /**
+     * Item绘制操作
+     *
+     * @param   painter       painter对象
+     * @param   rect          绘制区域
+     */
+    SGraphyCircleItem.prototype.onDraw = function (painter, rect) {
+        // painter.pen = new SPen(new SColor("#FF0000"), 22);
+        painter.pen.color = this.color;
+        painter.brush.color = this.fillColor;
+        painter.drawCircle(0, 0, this.r);
+    };
+    return SGraphyCircleItem;
+}(SGraphyItem)); // Class SGraphyCircleItem
+export { SGraphyCircleItem };

+ 0 - 4
src/assets/graphy/SGraphy/newItems/SGraphyCircleItem.ts

@@ -56,11 +56,7 @@ export class SGraphyCircleItem extends SGraphyItem {
      * @param   painter       painter对象
      * @param   rect          绘制区域
      */
-<<<<<<< HEAD
     onDraw(painter: SPainter, rect?: SRect): void {
-=======
-    onDraw(painter: SPainter, rect: SRect): void {
->>>>>>> c764c27108df9d02d952526c79bcabdf4c678a60
         // painter.pen = new SPen(new SColor("#FF0000"), 22);
         painter.pen.color = this.color;
         painter.brush.color = this.fillColor;

+ 191 - 0
src/assets/graphy/SGraphy/newItems/SGraphyPolygonItem.js

@@ -0,0 +1,191 @@
+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, SPoint } from "@sybotan-web/base";
+import { SColor } from "@sybotan-web/draw";
+/**
+ * 不规则多边形Item类
+ *
+ */
+var SGraphyPolygonItem = /** @class */ (function (_super) {
+    __extends(SGraphyPolygonItem, _super);
+    // actived: boolean = false; 				//是否激活
+    /**
+     * 构造函数
+     *
+     * @param pointArr									点坐标list
+     * @param width											边框的宽度
+     * @param color											边框的颜色
+     * @param fillColor   							多边形填充的颜色
+     * @param businessId								空间id
+     * @param businessName							空间名称
+     * @param centerOfGravityPoint			 中心点
+     * @param isBusiness						状态
+     * @param parent
+     */
+    function SGraphyPolygonItem(PolygonItemData) {
+        var _this = _super.call(this, PolygonItemData.parent) || this;
+        _this.fillColor = SColor.White;
+        _this.color = SColor.Black;
+        _this.width = 100;
+        _this.isBusiness = 1;
+        // 修改绘制路径格式
+        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 = SColor.White;
+        // 边框色
+        PolygonItemData.color ? _this.color = PolygonItemData.color : _this.color = SColor.Black;
+        //边框宽度
+        PolygonItemData.width ? _this.width = PolygonItemData.width : _this.width = _this.scale * 100;
+        //中心点
+        _this.centerOfGravityPoint = {
+            x: PolygonItemData.space.LocationPoint.X,
+            y: PolygonItemData.space.LocationPoint.Y
+        };
+        //业务空间类型
+        PolygonItemData.isBusiness ? _this.isBusiness = PolygonItemData.isBusiness : _this.isBusiness = 1;
+        //业务空间id
+        PolygonItemData.businessId ? _this.businessId = PolygonItemData.businessId : _this.businessId = null;
+        //业务空间名称
+        _this.businessName = PolygonItemData.space.Name;
+        // 空间id
+        _this.id = PolygonItemData.space.id;
+        return _this;
+    }
+    /**
+     * Item对象边界区域
+     *
+     * @return SRect
+     */
+    SGraphyPolygonItem.prototype.boundingRect = function () {
+        var minX = this.pointArr[0].x;
+        var maxX = minX;
+        var minY = this.pointArr[0].y;
+        var maxY = minY;
+        for (var i = 1; i < this.pointArr.length; i++) {
+            if (this.pointArr[i].x < minX) {
+                minX = this.pointArr[i].x;
+            }
+            if (this.pointArr[i].y < minY) {
+                minY = this.pointArr[i].y;
+            }
+            if (this.pointArr[i].x > maxX) {
+                maxX = this.pointArr[i].x;
+            }
+            if (this.pointArr[i].y > maxY) {
+                maxY = this.pointArr[i].y;
+            }
+        }
+        return new SRect(minX, minY, maxX - minX, maxY - minY);
+    }; // Function boundingRect()
+    /**
+     * 判断点是否在区域内
+     *
+     * @param x
+     * @param y
+     */
+    SGraphyPolygonItem.prototype.contains = function (x, y) {
+        var nCross = 0, point = [x, y], APoints = this.pointArr, length = APoints.length, p1, p2, i, xinters;
+        p1 = APoints[0];
+        for (i = 1; i <= length; i++) {
+            p2 = APoints[i % length];
+            if (point[0] > Math.min(p1.x, p2.x) &&
+                point[0] <= Math.max(p1.x, p2.x)) {
+                if (point[1] <= Math.max(p1.y, p2.y)) {
+                    if (p1.x != p2.x) {
+                        //计算位置信息
+                        xinters = (point[0] - p1.x) * (p2.y - p1.y) / (p2.x - p1.x) + p1.y;
+                        if (p1.y == p2.y || point[1] <= xinters) {
+                            nCross++;
+                        }
+                    }
+                }
+            }
+            p1 = p2;
+        }
+        return nCross % 2 === 1;
+    };
+    /**
+     * Item绘制操作
+     *
+     * @param   painter       painter对象
+     * @param   rect          绘制区域
+     */
+    SGraphyPolygonItem.prototype.onDraw = function (painter, rect) {
+        if (this.pointArr.length) {
+            painter.pen.color = this.color;
+            painter.brush.color = this.fillColor;
+            painter.pen.lineWidth = this.width;
+            painter.drawPolygon(this.pointArr);
+            var text = '';
+            if (this.businessName || this.businessId) {
+                text = '👇   ' + this.businessName;
+            }
+            else {
+                text = '⬇️   ' + this.businessName;
+            }
+            painter.font.size = this.scale * 200;
+            painter.drawText(text, this.centerOfGravityPoint.x, this.centerOfGravityPoint.y);
+        }
+    };
+    SGraphyPolygonItem.prototype.onClick = function (event) {
+        this.$emit('click', { item: this, event: event });
+        return true;
+    }; // Function onClick()
+    /**
+  * 鼠标双击事件
+  *
+  * @param   event   保存事件参数
+  * @return  boolean
+  */
+    SGraphyPolygonItem.prototype.onDoubleClick = function (event) {
+        this.$emit('doubleClick', { item: this, event: event });
+        return true;
+    };
+    /**
+  * 鼠标按下事件
+  *
+  * @param   event   保存事件参数
+  * @return  boolean
+  */
+    SGraphyPolygonItem.prototype.onMouseDown = function (event) {
+        this.$emit('mouseDown', { item: this, event: event });
+        return true;
+    }; // Function onMouseDown()
+    /**
+     * 鼠标移动事件
+     *
+     * @param   event   保存事件参数
+     * @return  boolean
+     */
+    SGraphyPolygonItem.prototype.onMouseMove = function (event) {
+        this.$emit('mouseMove', { item: this, event: event });
+        return true;
+    }; // Function onMouseMove()
+    /**
+     * 释放鼠标事件
+     *
+     * @param   event   保存事件参数
+     * @return  boolean
+     */
+    SGraphyPolygonItem.prototype.onMouseUp = function (event) {
+        this.$emit('mouseUp', { item: this, event: event });
+        return true;
+    };
+    return SGraphyPolygonItem;
+}(SGraphyItem)); // Class SGraphyPolygonItem
+export { SGraphyPolygonItem };

+ 74 - 0
src/assets/graphy/SGraphy/newItems/SGraphyRectItem.js

@@ -0,0 +1,74 @@
+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";
+import { SColor } from "@sybotan-web/draw";
+/**
+ * 矩形Item类
+ *
+ */
+var SGraphyRectItem = /** @class */ (function (_super) {
+    __extends(SGraphyRectItem, _super);
+    /**
+     * 构造函数
+     *
+     * @param startX      线的起始x坐标
+   * @param startY      线的起始y坐标
+   * @param width       矩形的宽度
+   * @param height      矩形的宽度
+     * @param color       矩形边框的颜色
+     * @param fillColor   矩形填充的颜色
+     * @param parent
+   * @param isVirtual   是否为虚线
+     */
+    function SGraphyRectItem(parent, startX, startY, width, height, fillColor, color, isVirtual) {
+        if (fillColor === void 0) { fillColor = SColor.White; }
+        if (color === void 0) { color = SColor.Black; }
+        if (isVirtual === void 0) { isVirtual = false; }
+        var _this = _super.call(this, parent) || this;
+        _this.fillColor = SColor.White;
+        _this.color = SColor.Black;
+        _this.isVirtual = false;
+        _this.startX = startX;
+        _this.startY = startY;
+        _this.width = width;
+        _this.height = height;
+        _this.color = color;
+        _this.fillColor = fillColor;
+        _this.isVirtual = isVirtual;
+        return _this;
+    } // Constructor()
+    /**
+     * Item对象边界区域
+     *
+     * @return SRect
+     */
+    SGraphyRectItem.prototype.boundingRect = function () {
+        return new SRect(this.startX, this.startY, this.width, this.height);
+    }; // Function boundingRect()
+    /**
+     * Item绘制操作
+     *
+     * @param   painter       painter对象
+     * @param   rect          绘制区域
+     */
+    SGraphyRectItem.prototype.onDraw = function (painter, rect) {
+        // painter.pen = new SPen(this.color, this.width);
+        painter.pen.color = this.color;
+        painter.brush.color = this.fillColor;
+        painter.drawRect(this.startX, this.startY, this.width, this.height);
+    };
+    return SGraphyRectItem;
+}(SGraphyItem)); // Class SGraphyRectItem
+export { SGraphyRectItem };

+ 0 - 4
src/assets/graphy/SGraphy/newItems/SGraphyRectItem.ts

@@ -67,11 +67,7 @@ export class SGraphyRectItem extends SGraphyItem {
 	 * @param   painter       painter对象
 	 * @param   rect          绘制区域
 	 */
-<<<<<<< HEAD
   onDraw(painter: SPainter, rect?: SRect): void {
-=======
-  onDraw(painter: SPainter, rect: SRect): void {
->>>>>>> c764c27108df9d02d952526c79bcabdf4c678a60
     // painter.pen = new SPen(this.color, this.width);
     painter.pen.color = this.color;
     painter.brush.color = this.fillColor;

+ 92 - 0
src/assets/graphy/SGraphy/newItems/SGraphyWallItem.js

@@ -0,0 +1,92 @@
+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";
+import { SColor } from "@sybotan-web/draw";
+/**
+ * 墙Item类
+ *
+ */
+var SGraphyWallItem = /** @class */ (function (_super) {
+    __extends(SGraphyWallItem, _super);
+    /**
+     * 构造函数
+     *
+     * @param pointArr  		点坐标list
+     * @param isVirtual 		墙类型(实体墙-虚拟墙)
+     * @param color  				墙的颜色
+     * @param fillColor  		墙的填充颜色
+     * @param width   			墙的宽度
+     * @param parent
+     */
+    function SGraphyWallItem(parent, pointArr, isVirtual, fillColor, color, width) {
+        if (isVirtual === void 0) { isVirtual = false; }
+        if (fillColor === void 0) { fillColor = SColor.White; }
+        if (color === void 0) { color = SColor.Black; }
+        if (width === void 0) { width = 1; }
+        var _this = _super.call(this, parent) || this;
+        _this.isVirtual = false;
+        _this.fillColor = SColor.White;
+        _this.color = SColor.Black;
+        _this.width = 1;
+        _this.isVirtual = isVirtual;
+        _this.pointArr = pointArr;
+        _this.color = color;
+        _this.fillColor = fillColor;
+        _this.width = width;
+        return _this;
+    } // Constructor()
+    /**
+     * Item对象边界区域
+     *
+     * @return SRect
+     */
+    SGraphyWallItem.prototype.boundingRect = function () {
+        var minX = this.pointArr[0].x;
+        var maxX = minX;
+        var minY = this.pointArr[0].y;
+        var maxY = minY;
+        for (var i = 1; i < this.pointArr.length; i++) {
+            if (this.pointArr[i].x < minX) {
+                minX = this.pointArr[i].x;
+            }
+            if (this.pointArr[i].y < minY) {
+                minY = this.pointArr[i].y;
+            }
+            if (this.pointArr[i].x > maxX) {
+                maxX = this.pointArr[i].x;
+            }
+            if (this.pointArr[i].y > maxY) {
+                maxY = this.pointArr[i].y;
+            }
+        }
+        return new SRect(minX, minY, maxX - minX, maxY - minY);
+    }; // Function boundingRect()
+    /**
+     * Item绘制操作
+     *
+     * @param   painter       painter对象
+     * @param   rect          绘制区域
+     */
+    SGraphyWallItem.prototype.onDraw = function (painter, rect) {
+        if (this.pointArr.length) {
+            // painter.pen = new SPen(this.color, this.width);
+            painter.pen.color = this.color;
+            painter.brush.color = this.fillColor;
+            painter.drawPolyline(this.pointArr);
+        }
+    };
+    return SGraphyWallItem;
+}(SGraphyItem)); // Class SGraphyPolygonItem
+export { SGraphyWallItem };

+ 0 - 4
src/assets/graphy/SGraphy/newItems/SGraphyWallItem.ts

@@ -78,11 +78,7 @@ export class SGraphyWallItem extends SGraphyItem {
 	 * @param   painter       painter对象
 	 * @param   rect          绘制区域
 	 */
-<<<<<<< HEAD
 	onDraw(painter: SPainter, rect?: SRect): void {
-=======
-	onDraw(painter: SPainter, rect: SRect): void {
->>>>>>> c764c27108df9d02d952526c79bcabdf4c678a60
 		if (this.pointArr.length) {
 			// painter.pen = new SPen(this.color, this.width);
 			painter.pen.color = this.color;

+ 2 - 2
src/assets/graphy/index.js

@@ -9,5 +9,5 @@ import SGraphyImageItem from './SGraphy/items/SGraphyImageItem'
 import SGraphyPillarItems from './SGraphy/items/SGraphyPillarItems'
 import SGraphyTextItems from './SGraphy/items/SGraphyTextItems'
 import SGraphyVirtualItem from './SGraphy/items/SGraphyVirtualItem'
-
-export { SGraphyView, SGraphyScene, SGraphyClockItem, SGraphyRectItem, SGraphyLineItem, SGraphyPolygonItem, SGraphyCircleItem, SGraphyImageItem, SGraphyPillarItems, SGraphyTextItems, SGraphyVirtualItem }
+import mainScene from './SGraphy/mainScene.js'
+export {mainScene,SGraphyView, SGraphyScene, SGraphyClockItem, SGraphyRectItem, SGraphyLineItem, SGraphyPolygonItem, SGraphyCircleItem, SGraphyImageItem, SGraphyPillarItems, SGraphyTextItems, SGraphyVirtualItem }

+ 175 - 131
src/components/business_space/graphy/business.vue

@@ -137,16 +137,19 @@
     import axios from "axios";
     //引擎的引用
     import {
-        SGraphyView,
+        // SGraphyView,
         SGraphyScene,
         SGraphyRectItem,
         SGraphyLineItem,
         SGraphyPolygonItem,
         SGraphyVirtualItem,
         SGraphyImageItem,
-        SGraphyPillarItems
+        SGraphyPillarItems,
+        mainScene
     } from "@/assets/graphy";
     import pako from '@/assets/pako/pako'
+    import { SGraphyView } from "@sybotan-web/graphy";
+    import { SPen, SPainter, SColor } from "@sybotan-web/draw";
     //ele动画组件
     import tools from "@/utils/scan/tools";
     let data = "";
@@ -200,19 +203,19 @@
     // colorArr = colorArr.map(item => {
     //   return hexify(item)
     // })
-    class MainScene extends SGraphyScene {
-        constructor() {
-            super();
-            //资产id
-        } // Function constructor()
-        /**
-         * 绘制背景
-         *
-         * @param   canvas      画布
-         * @param   rect        更新绘制区域
-         */
-        // drawBackground(canvas, rect) {}
-    }
+    // class MainScene extends SGraphyScene {
+    //     constructor() {
+    //         super();
+    //         //资产id
+    //     } // Function constructor()
+    //     /**
+    //      * 绘制背景
+    //      *
+    //      * @param   canvas      画布
+    //      * @param   rect        更新绘制区域
+    //      */
+    //     // drawBackground(canvas, rect) {}
+    // }
     import {
         formBIMToPri, // 将bimId转换成物理世界id
         createBusiness, //添加业务空间
@@ -242,7 +245,7 @@
             return {
                 view: "",
                 num: "",
-                mainScene: new MainScene(),
+                mainScene: null,
                 dataMax: "", //最大值最小值数据
                 scene: {
                     x: 0,
@@ -552,7 +555,7 @@
                     this.view = null;
                 }
                 this.view = new SGraphyView(this.canvasId + "canvas", this.mainScene);
-                this.view.onDraw();
+                // this.view.onDraw();
                 // this.view.canvasView.addEventListener("mouseup", this.dataChange);
                 // this.view.canvasView.addEventListener("mousemove", this.canvasMove);
             },
@@ -570,81 +573,88 @@
             //实例化视图
             initGraphy(data) {
                 this.resetSize();
-                this.view.pos.x = this.view.pos.y = -50;
-                let equip = data.EquipmentList,
-                    wall = data.WallList,
-                    virtual = data.VirtualWallList,
-                    space = data.SpaceList,
-                    column = data.ColumnList,
-                    spaceStr;
-                //空间
-                if (space && space.length) {
-                    for (let i = 0; i < space.length; i++) {
-                        if (space[i].Paths[1] && space[i].Paths[1].length >= 2) {
-                            spaceStr = new SGraphyPolygonItem(
-                                space[i].Paths[0],
-                                1,
-                                "rgba(111,111,111,0.5)",
-                                "#fff",
-                                space[i].id, {
-                                    x: space[i].LocationPoint.X,
-                                    y: space[i].LocationPoint.Y * -1
-                                },
-                                space[i].Name,
-                                space[i].Paths
-                            );
-                            this.mainScene.addItem(spaceStr);
-                        }
-                    }
-                    for (let i = 0; i < space.length; i++) {
-                        if (space[i].Paths[0] && space[i].Paths[0].length >= 2 && !!!space[i].Paths[1]) {
-                            spaceStr = new SGraphyPolygonItem(
-                                space[i].Paths[0],
-                                1,
-                                "rgba(111,111,111,0.5)",
-                                "#fff",
-                                space[i].id, {
-                                    x: space[i].LocationPoint.X,
-                                    y: space[i].LocationPoint.Y * -1
-                                },
-                                space[i].Name
-                            );
-                            this.mainScene.addItem(spaceStr);
-                        }
-                    }
-                }
-                //获取中心点
-                let rect = this.view.scene.worldRect();
-                //初始化画布缩放比例
-                this.view.scale = 1;
-                //计算缩放比例
-                this.view.scale = Math.min(
-                    this.view.width / (rect.width * 1.2),
-                    this.view.height / (rect.height * 1.2)
-                );
-                this.view.minScale = this.view.scale / 10
-                this.view.maxScale = this.view.scale * 10
-                // 移动画布
-                this.view.pos.x =
-                    (-(rect.right + rect.left) / 2) * this.view.scale + this.view.width / 2;
-                this.view.pos.y =
-                    (-(rect.bottom + rect.top) / 2) * this.view.scale +
-                    this.view.height / 2;
-                //点击事件
-                this.view.canvasView.addEventListener("click", this.checkSpace);
+                this.$nextTick(()=>{
+                    this.mainScene = new mainScene(data);
+                    this.view.scene = this.mainScene;
+                    this.view.fitSceneToView();
+                    this.mainScene.click(this,this.checkSpace)
+                })
+                // this.view.pos.x = this.view.pos.y = -50;
+                // let equip = data.EquipmentList,
+                //     wall = data.WallList,
+                //     virtual = data.VirtualWallList,
+                //     space = data.SpaceList,
+                //     column = data.ColumnList,
+                //     spaceStr;
+                // //空间
+                // if (space && space.length) {
+                //     for (let i = 0; i < space.length; i++) {
+                //         if (space[i].Paths[1] && space[i].Paths[1].length >= 2) {
+                //             spaceStr = new SGraphyPolygonItem(
+                //                 space[i].Paths[0],
+                //                 1,
+                //                 "rgba(111,111,111,0.5)",
+                //                 "#fff",
+                //                 space[i].id, {
+                //                     x: space[i].LocationPoint.X,
+                //                     y: space[i].LocationPoint.Y * -1
+                //                 },
+                //                 space[i].Name,
+                //                 space[i].Paths
+                //             );
+                //             this.mainScene.addItem(spaceStr);
+                //         }
+                //     }
+                //     for (let i = 0; i < space.length; i++) {
+                //         if (space[i].Paths[0] && space[i].Paths[0].length >= 2 && !!!space[i].Paths[1]) {
+                //             spaceStr = new SGraphyPolygonItem(
+                //                 space[i].Paths[0],
+                //                 1,
+                //                 "rgba(111,111,111,0.5)",
+                //                 "#fff",
+                //                 space[i].id, {
+                //                     x: space[i].LocationPoint.X,
+                //                     y: space[i].LocationPoint.Y * -1
+                //                 },
+                //                 space[i].Name
+                //             );
+                //             this.mainScene.addItem(spaceStr);
+                //         }
+                //     }
+                // }
+                // //获取中心点
+                // let rect = this.view.scene.worldRect();
+                // //初始化画布缩放比例
+                // this.view.scale = 1;
+                // //计算缩放比例
+                // this.view.scale = Math.min(
+                //     this.view.width / (rect.width * 1.2),
+                //     this.view.height / (rect.height * 1.2)
+                // );
+                // this.view.minScale = this.view.scale / 10
+                // this.view.maxScale = this.view.scale * 10
+                // // 移动画布
+                // this.view.pos.x =
+                //     (-(rect.right + rect.left) / 2) * this.view.scale + this.view.width / 2;
+                // this.view.pos.y =
+                //     (-(rect.bottom + rect.top) / 2) * this.view.scale +
+                //     this.view.height / 2;
+                // //点击事件
+                // this.view.canvasView.addEventListener("click", this.checkSpace);
+                //这里说是点击事件`
                 this.getGraphy();
             },
             /** canvas事件------------------------------------------------------------------------------------*/
             //点击元空间
             checkSpace(e) {
-                let item = tools.mouseInElement(this.view, e);
-                console.log(item)
+                // let item = tools.mouseInElement(this.view, e);
+                // console.log(item)
+                let item = e ;
                 let items = this.mainScene.root.children;
                 //点击业务空间
                 if (
-                    item.falg &&
-                    item.item.businessId &&
-                    (item.item.isBusiness == 2 || item.item.isBusiness == 7)
+                    item.businessId &&
+                    (item.isBusiness == 2 || item.isBusiness == 7)
                 ) {
                     // console.log("点击不可点击的业务空间", item);
                     if (this.type == 2) {
@@ -667,20 +677,21 @@
                         if (i.isBusiness == 6) {
                             i.isBusiness = 2;
                         }
-                        if (i.businessId == item.item.businessId) {
+                        if (i.businessId == item.businessId) {
                             i.isBusiness = 6;
                         }
                     });
-                    this.idList.push({
-                        id: item.item.businessId,
-                        name: item.item.businessName || item.item.name
-                    });
+                    //测试//////////
+                    // this.idList.push({
+                    //     id: item.businessId,
+                    //     name: item.businessName || item.name
+                    // });
+                    /////////////
                 }
                 //点击没有业务空间的元空间
                 if (
-                    item.falg &&
-                    !item.item.businessId &&
-                    (item.item.isBusiness == 4 || item.item.isBusiness == 1) &&
+                    !item.businessId &&
+                    (item.isBusiness == 4 || item.isBusiness == 1) &&
                     this.type != 5
                 ) {
                     // console.log("点击的是没有业务空间的元空间", item);
@@ -696,43 +707,76 @@
                         // console.log("清空", this.idList);
                     }
                     this.type = 3;
-                    item.item.isBusiness = 3;
-                    this.idList.push({
-                        id: item.item.id,
-                        name: item.item.businessName || item.item.name
-                    });
+                    item.isBusiness = 3;
+                    //////////测试
+                    // this.idList.push({
+                    //     id: item.id,
+                    //     name: item.businessName || item.name
+                    // });
+                    /////////////////
                 }
                 //在重新编辑业务空间状态
                 if (
                     this.type == 5 &&
-                    item.falg &&
-                    !item.item.businessId &&
-                    (item.item.isBusiness == 4 || item.item.isBusiness == 1)
+                    !item.businessId &&
+                    (item.isBusiness == 4 || item.isBusiness == 1)
                 ) {
-                    item.item.isBusiness = 3;
-                    this.idList.push({
-                        id: item.item.id,
-                        name: item.item.businessName || item.item.name
-                    });
+                    item.isBusiness = 3;
+                    // this.idList.push({
+                    //     id: item.id,
+                    //     name: item.businessName || item.name
+                    // });
                 }
                 //在重新编辑时的提示
                 if (
-                    item.falg &&
-                    item.item.businessId &&
-                    (item.item.isBusiness == 4 || item.item.isBusiness == 1)
+                    item.businessId &&
+                    (item.isBusiness == 4 || item.isBusiness == 1)
                 ) {
                     // console.log("44444");
-                    item.item.isBusiness = 3;
-                    this.idList.push({
-                        id: item.item.id,
-                        name: item.item.businessName || item.item.name,
-                        parentId: item.item.businessId
-                    });
+                    item.isBusiness = 3;
+                    // this.idList.push({
+                    //     id: item.id,
+                    //     name: item.businessName || item.name,
+                    //     parentId: item.businessId
+                    // });
                 }
-                if (item.falg && item.item.isBusiness == 5) {
+                if (item.isBusiness == 5) {
                     this.$message("该空间为业务空间,请勿点击");
+                };
+                // 点击之后对所有色块重新着色
+                items.forEach((a)=>{
+                   this.isBusinessToColor(item)
+                })
+            },
+            //isbusiness转换相应的颜色
+            /**
+             * @param item item类
+             */
+            isBusinessToColor(item){
+                if (item.isBusiness == 1) {
+                    item.color = item.color || new SColor('#000');
+                } else if (this.isBusiness == 2) {
+                    //已有id 的业务空间
+                    item.color = item.color || new SColor('#000');
+                    item.fillColor = item.fillColor || new SColor('#fff')
+                } else if (this.isBusiness == 3) {
+                    //被选择的元空间
+                    item.color = item.color || new SColor('#000');
+                    item.width = 800;
+                    item.fillColor =new SColor('#1abc9c')
+                } else if (item.isBusiness == 4) {
+                    item.color =  new SColor(251,226,1,.8) || new SColor('#000');
+                    item.fillColor = item.fillColor || new SColor('#fff');
+                } else if (item.isBusiness == 5) {
+                    item.fillColor = new SColor(11,12,12,.2) || new SColor('#fff')
+                } else if (item.isBusiness == 6) {
+                    item.color = new SColor(68,161,140,.4) || new SColor('#000');
+                    item.width = 800;
+                    item.fillColor =new SColor('#1abc9c');
+                } else if (item.isBusiness == 7) {
+                    item.color = item.color || new SColor('#000')
+                    item.fillColor = item.fillColor || new SColor('#fff')
                 }
-                // if(item.falg && item.item.businessId)
             },
             /**  搜索 ------------------------------------------------------------------------------ */
             querySearch(queryString, cb) {
@@ -820,19 +864,19 @@
             },
             //给canvas的items渲染色彩
             getColor(list) {
-                let items = this.mainScene.root.children;
-                list.map(item => {
-                    if (item.children && item.children.length) {
-                        item.children.map(space => {
-                            items.map(canvas => {
-                                if (canvas.id == space) {
-                                    canvas.businessId = item.id;
-                                    canvas.businessName = item.name;
-                                }
-                            });
-                        });
-                    }
-                });
+                // let items = this.mainScene.root.children;
+                // list.map(item => {
+                //     if (item.children && item.children.length) {
+                //         item.children.map(space => {
+                //             items.map(canvas => {
+                //                 if (canvas.id == space) {
+                //                     canvas.businessId = item.id;
+                //                     canvas.businessName = item.name;
+                //                 }
+                //             });
+                //         });
+                //     }
+                // });
                 this.applyColor(list);
             },
             //渲染业务空间色彩
@@ -841,7 +885,7 @@
                 items.map(item => {
                     item.businessId = null;
                     item.businessName = null;
-                    item.businessColor = "rgba(0,0,0,0)";
+                    item.fillColor = new SColor(0,0,0,0);
                     item.isBusiness = 1;
                 });
                 list.map((item, index) => {
@@ -851,7 +895,7 @@
                                 if (canvas.id == space) {
                                     canvas.businessId = item.id;
                                     canvas.businessName = item.name;
-                                    canvas.businessColor = colorArr[index % 10];
+                                    canvas.fillColor = new SColor(colorArr[index % 10]);
                                     canvas.isBusiness = 2;
                                     //判断相邻代码
                                     if (!item.isAbut) {