Преглед изворни кода

升级graphy静态文件夹

YaolongHan пре 5 година
родитељ
комит
bddd30a8ae

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


+ 63 - 0
src/assets/graphy/SGraphy/dataType.ts

@@ -0,0 +1,63 @@
+import { SPen, SPainter, SColor } from "@sybotan-web/draw";
+import  SGraphyPolygonItem from './newItems/SGraphyPolygonItem'
+/**
+ * 接口类型
+ * @param
+ * 传入绘制地图参数的数据类型
+ */
+//path 和paths 的接口类型
+interface dataItemPath {
+    X: number,
+    Y: number,
+    Z: number
+}
+// 一个空间item中的数据类型 
+//包括ColumnList EquipmentList,VirtualWallList,WallList
+interface dataItem {
+    Id: string,
+    Path?: dataItemPath[],
+    PointList: dataItemPath[],
+    BimId?: string,
+    LocationPoint?: dataItemPath,
+    Name?: string,
+    Paths?: dataItemPath[][],
+}
+// 一个空间item中的接口类型 
+// 包括SpaceList
+interface dataSpaceItem {
+    Id: string,
+    // PointList: dataItemPath[],
+    BimId: string,
+    LocationPoint: dataItemPath,
+    Name: string,
+    Paths: dataItemPath[][],
+    id:string
+}
+// 传入的data 的接口类型 
+interface dataInterface {
+    ColumnList: dataItem[],  //柱体
+    EquipmentList: dataItem[], //设备
+    SpaceList: dataSpaceItem[], //空间
+    VirtualWallList: dataItem[], //虚拟墙
+    WallList: dataItem[],    //墙
+}
+//获取绑定空间的接口
+interface businessDataInterface {
+    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
+}
+export {dataItemPath,dataItem,dataSpaceItem,dataInterface,businessDataInterface,PolygonItemInterface}

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

@@ -0,0 +1,226 @@
+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";
+import Axios from 'axios';
+import pako from "./until/pako.js";
+import tools from "./until/tool.js";
+/**
+ * @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;
+        if (_this_1.data != null) {
+            _this_1.addAllItemList(_this_1.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
+    });
+    //获取参数
+    mainScene.prototype.urlGetData = function (url) {
+        var _this_1 = this;
+        var that = this;
+        return new Promise(function (relove, reject) {
+            Axios({
+                method: 'get',
+                url: url,
+                data: {},
+                responseType: 'blob',
+            }).then(function (res) {
+                var blob = res.data;
+                _this_1.zipToJson(blob).then(function (jsonData) {
+                    that.addAllItemList(jsonData);
+                    relove();
+                }).catch(function (error) {
+                    console.log(error);
+                });
+                // console.log(reader)
+            }).catch(function (res) {
+                console.log(res);
+            });
+        });
+    };
+    // 压缩包变为json格式数据
+    mainScene.prototype.zipToJson = function (blob) {
+        var data = null;
+        var reader = new FileReader();
+        reader.readAsBinaryString(blob);
+        var _this = this;
+        return new Promise(function (resolve) {
+            reader.onload = function (readerEvt) {
+                var binaryString = readerEvt.target.result;
+                //解压数据
+                var base64Data = btoa(binaryString);
+                var unGzipData = pako.unzip(base64Data);
+                data = unGzipData;
+                if (data.WallList && data.WallList.length) {
+                    tools.changeMap(data.WallList, -1, "PointList");
+                }
+                if (data.SpaceList && data.SpaceList.length) {
+                    tools.changeMap(data.SpaceList, -1, "Paths");
+                }
+                if (data.ColumnList && data.ColumnList.length) {
+                    tools.changeMap(data.ColumnList, -1, "Path");
+                }
+                if (data.VirtualWallList && data.VirtualWallList.length) {
+                    tools.changeMap(data.VirtualWallList, -1, "PointList");
+                }
+                if (data.EquipmentList && data.EquipmentList.length) {
+                    tools.changeMap(data.EquipmentList, -1, "PointList");
+                }
+                resolve(data);
+            };
+        });
+    };
+    // 以下是绘制方法
+    /**
+     * 增添所有绘制item(地图);
+    */
+    mainScene.prototype.addAllItemList = function (data) {
+        var space = data.SpaceList;
+        // let wall:
+        this.addSpaceList(space); //绘制空间
+        this.addWallList(); //绘制墙
+    };
+    /**
+     * 添加所有空间到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) {
+        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;

+ 215 - 0
src/assets/graphy/SGraphy/mainScene.ts

@@ -0,0 +1,215 @@
+
+import { SRect, SSize, SPoint } from "@sybotan-web/base";
+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 Axios from 'axios';
+import pako from "./until/pako.js"
+import tools from "./until/tool.js"
+/**
+ * @name mainScene
+ * @time 2019-07.07;
+ * 添加所有item的场景到scene中
+ */
+
+export default class mainScene extends SGraphyScene {
+
+    data: dataInterface | null;
+
+    private _isShowSpace: boolean = true;  // 是否显示空间;
+    private _isShowWallList: boolean = true;  //是否展示墙体;
+    private _isShowEquipmentList: boolean = true; //是否展示设备;
+    private _isShowVrtualWallList: boolean = true; //是否展示虚拟墙
+
+    // 设置是否显示空间
+    get isShowSpace(): boolean {
+        return this._isShowSpace
+    }
+    set isShowSpace(b: boolean) {
+        this._isShowSpace = b
+    }
+
+    // 设置是否显示墙
+    get isShowWallList(): boolean {
+        return this._isShowWallList
+    }
+    set isShowWallList(b: boolean) {
+        this._isShowWallList = b
+    }
+
+    // 设置是否显示设备
+    get isShowEquipmentList(): boolean {
+        return this._isShowEquipmentList
+    }
+    set isShowEquipmentList(b: boolean) {
+        this._isShowEquipmentList = b
+    }
+
+    // 设置是否显示虚拟墙
+    get isShowVrtualWallList(): boolean {
+        return this._isShowVrtualWallList
+    }
+    set isShowVrtualWallList(b: boolean) {
+        this._isShowVrtualWallList = b
+    }
+
+    /**
+     * @param data 绘制空间地图得所有参数
+     */
+
+    constructor(data: dataInterface | null) {
+        super()
+        this.data = data;
+        if (this.data != null) {
+            this.addAllItemList(this.data);
+        }
+    }
+    //获取参数
+    urlGetData(url: string) {
+        let that = this;
+        return new Promise((relove, reject) => {
+            Axios({
+                method: 'get',
+                url: url,
+                data: {},
+                responseType: 'blob',
+                // contentType: "charset=utf-8"
+            }).then(res => {
+                var blob = res.data;
+                this.zipToJson(blob).then((jsonData:any)=>{
+                    that.addAllItemList(jsonData)
+                    relove()
+                }).catch((error:any)=>{
+                    console.log(error)
+                });
+                // console.log(reader)
+            }).catch(res=>{
+                console.log(res)
+            })
+        })
+
+    }
+    // 压缩包变为json格式数据
+    zipToJson(blob:any):any{
+           let data = null;
+           var reader = new FileReader();
+           reader.readAsBinaryString(blob);
+           let _this = this;
+           return new Promise((resolve)=>{
+            reader.onload = function (readerEvt: any) {
+                var binaryString = readerEvt.target.result;
+                //解压数据
+                let base64Data = btoa(binaryString)
+                let unGzipData = pako.unzip(base64Data)
+                data = unGzipData;
+                if (data.WallList && data.WallList.length) {
+                    tools.changeMap(data.WallList, -1, "PointList");
+                }
+                if (data.SpaceList && data.SpaceList.length) {
+                    tools.changeMap(data.SpaceList, -1, "Paths");
+                }
+                if (data.ColumnList && data.ColumnList.length) {
+                    tools.changeMap(data.ColumnList, -1, "Path");
+                }
+                if (data.VirtualWallList && data.VirtualWallList.length) {
+                    tools.changeMap(data.VirtualWallList, -1, "PointList");
+                }
+                if (data.EquipmentList && data.EquipmentList.length) {
+                    tools.changeMap(data.EquipmentList, -1, "PointList");
+                }
+                resolve(data)
+            };
+           })
+    }
+    // 以下是绘制方法
+
+    /** 
+     * 增添所有绘制item(地图);
+    */
+    addAllItemList(data: dataInterface) {
+        let space: dataSpaceItem[] = data.SpaceList;
+        // let wall:
+        this.addSpaceList(space) //绘制空间
+        this.addWallList()       //绘制墙
+    }
+
+    /**
+     * 添加所有空间到scene 中
+     * @param space 空间list
+     */
+    addSpaceList(space: dataSpaceItem[]): void {
+        if (space && space.length) {
+            for (let 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 (let 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]
+                        }));
+                }
+            }
+        }
+    }
+    // 绘制墙体
+    addWallList(): void {
+
+    }
+    // 绘制设备
+    addEquipmentList() {
+    }
+    // 绘制柱体
+    addColumnListList(): void {
+    }
+    // 绘制虚拟墙
+    addVrtualWallList(): void {
+    }
+    /**
+     * 产生item实例
+     */
+    constructeItem(PolygonItemInterfaceData: PolygonItemInterface): SGraphyPolygonItem {
+        return new SGraphyPolygonItem(PolygonItemInterfaceData)
+    }
+    // 鼠标交互类事件
+
+    // 点击
+    click(_this: any, fn: any): void {
+        this.root.children.forEach(item => {
+            item.connect("click", _this, fn);
+        });
+    }
+    // 双击
+    dbclick(_this: any, fn: any): void {
+        this.root.children.forEach(item => {
+            item.connect("doubleClick", _this, fn);
+        });
+    }
+    // 按下
+    mouseDown(_this: any, fn: any) {
+        this.root.children.forEach(item => {
+            item.connect("mouseDown", _this, fn);
+        });
+    }
+    //移动
+    mouseMove(_this: any, fn: any) {
+        this.root.children.forEach(item => {
+            item.connect("mouseMove", _this, fn);
+        });
+    }
+    // 点解结束
+    mouseUp(_this: any, fn: any) {
+        this.root.children.forEach(item => {
+            item.connect("mouseUp", _this, fn);
+        });
+    }
+
+} 

+ 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(500, 500, this.r);
+    };
+    return SGraphyCircleItem;
+}(SGraphyItem)); // Class SGraphyCircleItem
+export default SGraphyCircleItem;

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

@@ -0,0 +1,65 @@
+
+import { SGraphyItem } from '@sybotan-web/graphy';
+import { SRect, SSize } from "@sybotan-web/base";
+import { SPen, SPainter, SColor } from "@sybotan-web/draw";
+
+/**
+ * 圆Item类
+ *
+ */
+export default class SGraphyCircleItem extends SGraphyItem {
+    r: number;
+    fillColor: SColor = SColor.White;
+    color: SColor = SColor.Black;
+    width: number = 1;
+
+    /**
+     * 构造函数
+     *
+     * @param r          圆半径
+     * @param width      圆线的宽度
+     * @param color      圆线的颜色
+     * @param fillColor  圆填充的颜色
+     * @param parent    
+     */
+    constructor(
+        parent: SGraphyItem | null,
+        r: number,
+        fillColor: SColor = SColor.White,
+        color: SColor = SColor.Black,
+        width: number = 1
+    ) {
+        super(parent);
+        this.r = r;
+        this.color = color;
+        this.fillColor = fillColor;
+        this.width = width;
+    } // Constructor()
+
+    /**
+     * Item对象边界区域
+     * 
+     * @return SRect
+     */
+    boundingRect(): SRect {
+        return new SRect(
+            -this.r,
+            -this.r,
+            2 * this.r,
+            2 * this.r
+        );
+    } // Function boundingRect()
+
+    /**
+     * Item绘制操作
+     *
+     * @param   painter       painter对象
+     * @param   rect          绘制区域
+     */
+    onDraw(painter: SPainter, rect?: SRect): void {
+        // painter.pen = new SPen(new SColor("#FF0000"), 22);
+        painter.pen.color = this.color;
+        painter.brush.color = this.fillColor;
+        painter.drawCircle(500, 500, this.r);
+    }
+} // Class SGraphyCircleItem

+ 70 - 0
src/assets/graphy/SGraphy/newItems/SGraphyPointItem.js

@@ -0,0 +1,70 @@
+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";
+/**
+ * 坐标点
+ *
+ */
+var SGraphyPointItem = /** @class */ (function (_super) {
+    __extends(SGraphyPointItem, _super);
+    /**
+     * 构造函数
+     *
+     * @param r          圆半径
+     * @param width      圆线的宽度
+     * @param color      圆线的颜色
+     * @param fillColor  圆填充的颜色
+     * @param parent
+     */
+    function SGraphyPointItem(parent, width, point, color, fillColor) {
+        if (width === void 0) { width = 100; }
+        if (point === void 0) { point = new SPoint(0, 0); }
+        if (color === void 0) { color = new SColor('#F56C6C'); }
+        if (fillColor === void 0) { fillColor = new SColor('#F56C6C'); }
+        var _this = _super.call(this, parent) || this;
+        _this.width = 100;
+        _this.width = width;
+        _this.point = point;
+        _this.color = color;
+        _this.fillColor = fillColor;
+        return _this;
+    } // Constructor()
+    /**
+     * Item对象边界区域
+     *
+     * @return SRect
+     */
+    SGraphyPointItem.prototype.boundingRect = function () {
+        var minX = this.point.x;
+        var miny = this.point.y;
+        var maxX = this.point.x + this.width;
+        var maxY = this.point.y + this.width;
+        return new SRect(minX, miny, maxX, maxY);
+    }; // Function boundingRect()
+    /**
+     * Item绘制操作
+     *
+     * @param   painter       painter对象
+     * @param   rect          绘制区域
+     */
+    SGraphyPointItem.prototype.onDraw = function (painter, rect) {
+        painter.pen.color = this.color;
+        painter.brush.color = this.fillColor;
+        painter.drawRect(this.point.x, this.point.y, this.width, this.width);
+    };
+    return SGraphyPointItem;
+}(SGraphyItem)); // Class SGraphyCircleItem
+export default SGraphyPointItem;

+ 67 - 0
src/assets/graphy/SGraphy/newItems/SGraphyPointItem.ts

@@ -0,0 +1,67 @@
+
+import { SGraphyItem } from '@sybotan-web/graphy';
+import { SRect, SSize, SPoint } from "@sybotan-web/base";
+import { SPen, SPainter, SColor } from "@sybotan-web/draw";
+/**
+ * 坐标点
+ *
+ */
+export default class SGraphyPointItem extends SGraphyItem {
+    width: number = 100;
+    point: SPoint;
+    color: SColor;
+    fillColor: SColor;
+
+    /**
+     * 构造函数
+     *
+     * @param r          圆半径
+     * @param width      圆线的宽度
+     * @param color      圆线的颜色
+     * @param fillColor  圆填充的颜色
+     * @param parent    
+     */
+    constructor(
+        parent: SGraphyItem | null,
+        width: number = 100,
+        point: SPoint = new SPoint(0, 0),
+        color: SColor = new SColor('#F56C6C'),
+        fillColor: SColor = new SColor('#F56C6C')
+    ) {
+        super(parent);
+        this.width = width;
+        this.point = point;
+        this.color = color;
+        this.fillColor = fillColor;
+   
+    } // Constructor()
+
+    /**
+     * Item对象边界区域
+     * 
+     * @return SRect
+     */
+    boundingRect(): SRect {
+        let minX = this.point.x;
+        let miny = this.point.y;
+        let maxX = this.point.x + this.width;
+        let maxY = this.point.y + this.width;
+        return new SRect(
+            minX,
+            miny,
+            maxX, maxY
+        );
+    } // Function boundingRect()
+
+    /**
+     * Item绘制操作
+     *
+     * @param   painter       painter对象
+     * @param   rect          绘制区域
+     */
+    onDraw(painter: SPainter, rect?: SRect): void {
+        painter.pen.color = this.color;
+        painter.brush.color = this.fillColor;
+        painter.drawRect(this.point.x,this.point.y,this.width,this.width)
+    }
+} // Class SGraphyCircleItem

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

@@ -0,0 +1,209 @@
+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 = new SColor('#F2F6FC');
+        _this.color = SColor.Black;
+        _this.width = 200;
+        _this.viewText = ''; //绘出的文案
+        _this.isBusiness = 1;
+        _this.cacheColor = SColor.Black; //需要缓存的边框
+        _this.cacheFillColor = new SColor('#F2F6FC'); //需要缓存的填充色
+        _this.cacheWidth = 100;
+        // 修改绘制路径格式
+        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');
+        // 边框色
+        PolygonItemData.color ? _this.color = PolygonItemData.color : _this.color = SColor.Black;
+        //边框宽度
+        PolygonItemData.width ? _this.width = PolygonItemData.width : _this.width = 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;
+        _this.initName = PolygonItemData.space.Name;
+        // 空间id
+        _this.id = PolygonItemData.space.id;
+        _this.viewText = PolygonItemData.space.Name;
+        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;
+    };
+    /**
+     *
+     * @param text 修改的文字
+     * @param centerOfGravityPoint 文字的坐标
+     */
+    SGraphyPolygonItem.prototype.addText = function (text, centerOfGravityPoint) {
+        this.viewText = text;
+        if (centerOfGravityPoint) {
+            this.centerOfGravityPoint = centerOfGravityPoint;
+        }
+    };
+    /**
+     * 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);
+            // let text = ''
+            // if (this.businessName || this.businessId) {
+            // 	text = '👇   ' + this.businessName
+            // } else {
+            // 	text = '⬇️   ' + this.initName
+            // }
+            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);
+        }
+    };
+    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 default SGraphyPolygonItem;

+ 217 - 0
src/assets/graphy/SGraphy/newItems/SGraphyPolygonItem.ts

@@ -0,0 +1,217 @@
+
+import { SGraphyItem, SMouseEvent } from '@sybotan-web/graphy'
+import { SRect, SSize, SPoint } from "@sybotan-web/base";
+import { SPen, SPainter, SColor, SFont } from "@sybotan-web/draw";
+import { dataItemPath, dataItem, dataSpaceItem, dataInterface, PolygonItemInterface } from './../dataType'   //传入参数的参数接口类型
+/**
+ * 不规则多边形Item类
+ *
+ */
+export default class SGraphyPolygonItem extends SGraphyItem {
+	pointArr: SPoint[];
+	fillColor: SColor =new SColor('#F2F6FC');
+	color: SColor = SColor.Black;
+	width: number =200;
+	businessId: string | null;
+	id: string | null;
+	centerOfGravityPoint: { x: number, y: number };
+	businessName: null | string | undefined;    //业务空间名字
+	initName: null | string | undefined;        //空间名字
+	viewText:string = ''                        //绘出的文案
+	isBusiness: number = 1;
+	cacheColor:SColor= SColor.Black             //需要缓存的边框
+	cacheFillColor:SColor =	 new SColor('#F2F6FC');        //需要缓存的填充色
+	cacheWidth:number = 100;
+	// actived: boolean = false; 				//是否激活
+	/**
+	 * 构造函数
+	 *
+	 * @param pointArr									点坐标list
+	 * @param width											边框的宽度
+	 * @param color											边框的颜色
+	 * @param fillColor   							多边形填充的颜色 
+	 * @param businessId								空间id
+	 * @param businessName							空间名称
+	 * @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)
+		});
+		this.pointArr = newSpacePaths;
+		// // 填充色
+		PolygonItemData.fillColor ? this.fillColor = PolygonItemData.fillColor : this.fillColor = new SColor('#F2F6FC');
+		// 边框色
+		PolygonItemData.color ? this.color = PolygonItemData.color : this.color = SColor.Black;
+		//边框宽度
+		PolygonItemData.width ? this.width = PolygonItemData.width : this.width = 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;
+		this.initName =  PolygonItemData.space.Name;
+		// 空间id
+		this.id = PolygonItemData.space.id;
+		this.viewText = PolygonItemData.space.Name;
+	}
+
+	/**
+	 * Item对象边界区域
+	 * 
+	 * @return SRect
+	 */
+	boundingRect(): SRect {
+		let minX = this.pointArr[0].x;
+		let maxX = minX;
+		let minY = this.pointArr[0].y;
+		let maxY = minY;
+		for (let 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 
+	 */
+	contains(x: number, y: number): boolean {
+		let 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
+	}
+	/**
+	 * 
+	 * @param text 修改的文字
+	 * @param centerOfGravityPoint 文字的坐标
+	 */
+	addText(text:string,centerOfGravityPoint?:{ x: number, y: number }){
+		 this.viewText = text;
+		 if(centerOfGravityPoint){
+			 this.centerOfGravityPoint = centerOfGravityPoint
+		 }
+	}
+	/**
+	 * Item绘制操作
+	 *
+	 * @param   painter       painter对象
+	 * @param   rect          绘制区域
+	 */
+	onDraw(painter: SPainter, rect?: SRect): void {
+		if (this.pointArr.length) {
+			painter.pen.color = this.color;
+			painter.brush.color = this.fillColor;
+			painter.pen.lineWidth = this.width;
+			painter.drawPolygon(this.pointArr)
+			// let text = ''
+			// if (this.businessName || this.businessId) {
+			// 	text = '👇   ' + this.businessName
+			// } else {
+			// 	text = '⬇️   ' + this.initName
+			// }
+			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)
+		}
+	}
+	onClick(event: SMouseEvent): boolean {
+		this.$emit('click', { item: this, event: event });
+		return true;
+	} // Function onClick()
+	/**
+  * 鼠标双击事件
+  *
+  * @param   event   保存事件参数
+  * @return  boolean
+  */
+	onDoubleClick(event: SMouseEvent): boolean {
+		this.$emit('doubleClick', { item: this, event: event });
+		return true;
+	}
+	/**
+  * 鼠标按下事件
+  *
+  * @param   event   保存事件参数
+  * @return  boolean
+  */
+	onMouseDown(event: SMouseEvent): boolean {
+		this.$emit('mouseDown', { item: this, event: event });
+		return true;
+	} // Function onMouseDown()
+
+    /**
+     * 鼠标移动事件
+     *
+     * @param   event   保存事件参数
+     * @return  boolean
+     */
+	onMouseMove(event: SMouseEvent): boolean {
+		this.$emit('mouseMove', { item: this, event: event });
+		return true;
+	} // Function onMouseMove()
+
+    /**
+     * 释放鼠标事件
+     *
+     * @param   event   保存事件参数
+     * @return  boolean
+     */
+	onMouseUp(event: SMouseEvent): boolean {
+		this.$emit('mouseUp', { item: this, event: event });
+		return true;
+	}
+
+} // Class 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 default SGraphyRectItem;

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

@@ -0,0 +1,76 @@
+
+import { SGraphyItem } from '@sybotan-web/graphy'
+import { SRect, SSize, SPoint } from "@sybotan-web/base";
+import { SPen, SPainter, SColor } from "@sybotan-web/draw";
+
+/**
+ * 矩形Item类
+ *
+ */
+export default class SGraphyRectItem extends SGraphyItem {
+  startX: number;
+  startY: number;
+  width: number;
+  height: number;
+  fillColor: SColor = SColor.White;
+  color: SColor = SColor.Black;
+  isVirtual: boolean = false;
+	/**
+	 * 构造函数
+	 *
+	 * @param startX      线的起始x坐标
+   * @param startY      线的起始y坐标
+   * @param width       矩形的宽度
+   * @param height      矩形的宽度
+	 * @param color       矩形边框的颜色 
+	 * @param fillColor   矩形填充的颜色 
+	 * @param parent    
+   * @param isVirtual   是否为虚线
+	 */
+  constructor(
+    parent: SGraphyItem | null,
+    startX: number,
+    startY: number,
+    width: number,
+    height: number,
+    fillColor: SColor = SColor.White,
+    color: SColor = SColor.Black,
+    isVirtual: boolean = false
+  ) {
+    super(parent);
+    this.startX = startX
+    this.startY = startY
+    this.width = width;
+    this.height = height
+    this.color = color;
+    this.fillColor = fillColor;
+    this.isVirtual = isVirtual;
+  } // Constructor()
+
+	/**
+	 * Item对象边界区域
+	 * 
+	 * @return SRect
+	 */
+  boundingRect(): SRect {
+    return new SRect(
+      this.startX,
+      this.startY,
+      this.width,
+      this.height
+    );
+  } // Function boundingRect()
+
+	/**
+	 * Item绘制操作
+	 *
+	 * @param   painter       painter对象
+	 * @param   rect          绘制区域
+	 */
+  onDraw(painter: SPainter, rect?: SRect): void {
+    // 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)
+  }
+} // Class SGraphyRectItem

+ 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 default SGraphyWallItem;

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

@@ -0,0 +1,89 @@
+
+import { SGraphyItem } from '@sybotan-web/graphy'
+import { SRect, SSize, SPoint } from "@sybotan-web/base";
+import { SPen, SPainter, SColor } from "@sybotan-web/draw";
+
+/**
+ * 墙Item类
+ *
+ */
+export default class SGraphyWallItem extends SGraphyItem {
+	pointArr: SPoint[];
+	isVirtual: boolean = false;
+	fillColor: SColor = SColor.White;
+	color: SColor = SColor.Black;
+	width: number = 1;
+	/**
+	 * 构造函数
+	 *
+	 * @param pointArr  		点坐标list
+	 * @param isVirtual 		墙类型(实体墙-虚拟墙)
+	 * @param color  				墙的颜色
+	 * @param fillColor  		墙的填充颜色
+	 * @param width   			墙的宽度
+	 * @param parent    
+	 */
+	constructor(
+		parent: SGraphyItem | null,
+		pointArr: SPoint[],
+		isVirtual: boolean = false,
+		fillColor: SColor = SColor.White,
+		color: SColor = SColor.Black,
+		width: number = 1,
+	) {
+		super(parent);
+		this.isVirtual = isVirtual;
+		this.pointArr = pointArr;
+		this.color = color;
+		this.fillColor = fillColor;
+		this.width = width;
+	} // Constructor()
+
+	/**
+	 * Item对象边界区域
+	 * 
+	 * @return SRect
+	 */
+	boundingRect(): SRect {
+		let minX = this.pointArr[0].x;
+		let maxX = minX;
+		let minY = this.pointArr[0].y;
+		let maxY = minY;
+		for (let 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          绘制区域
+	 */
+	onDraw(painter: SPainter, rect?: SRect): void {
+		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)
+		}
+	}
+} // Class SGraphyPolygonItem

+ 25 - 0
src/assets/graphy/SGraphy/until/pako.js

@@ -0,0 +1,25 @@
+// import pako from 'pako'
+var pako = require('pako');
+var funcTo = atob;
+console.log(funcTo);
+var pakoObj = {
+    unzip: function unzip(b64Data) {
+        // console.log(b64Data)
+        var strData = funcTo(b64Data);
+        // Convert binary string to character-number array
+        var charData = strData.split('').map(function (x) { return x.charCodeAt(0); });
+        // console.log("charData", charData)
+        // Turn number array into byte-array
+        var binData = new Uint8Array(charData);
+        // // unzip
+        var data = pako.inflate(binData, { to: 'string' });
+        return eval("(" + data + ")");
+    },
+    // 压缩
+    zip: function (str) {
+        //escape(str)  --->压缩前编码,防止中午乱码
+        var binaryString = pako.gzip(escape(str), { to: 'string' });
+        return binaryString;
+    }
+};
+export default pakoObj;

+ 27 - 0
src/assets/graphy/SGraphy/until/pako.ts

@@ -0,0 +1,27 @@
+// import pako from 'pako'
+let pako = require('pako');
+let funcTo = atob
+console.log(funcTo)
+
+const pakoObj = {
+    unzip: function unzip(b64Data:any) {
+        // console.log(b64Data)
+        var strData = funcTo(b64Data);
+        // Convert binary string to character-number array
+        var charData = strData.split('').map(function(x) { return x.charCodeAt(0); });
+        // console.log("charData", charData)
+        // Turn number array into byte-array
+        var binData = new Uint8Array(charData);
+        // // unzip
+        var data = pako.inflate(binData, { to: 'string' });
+        return eval("(" + data + ")");
+    },
+    // 压缩
+    zip: function(str:any) {
+        //escape(str)  --->压缩前编码,防止中午乱码
+        var binaryString = pako.gzip(escape(str), { to: 'string' });
+        return binaryString;
+    }
+}
+
+export default pakoObj

+ 22 - 0
src/assets/graphy/SGraphy/until/tool.js

@@ -0,0 +1,22 @@
+var tools = {
+    changeMap: function (arr, k, name) {
+        var data = arr.map(function (items) {
+            if (items[name] && items[name].length) {
+                items[name].map(function (children) {
+                    if (Array.isArray(children)) {
+                        return children.map(function (res) {
+                            res.Y = res.Y * k;
+                            return res;
+                        });
+                    }
+                    else {
+                        children.Y = children.Y * k;
+                        return children;
+                    }
+                });
+            }
+        });
+        return data;
+    }
+};
+export default tools;

+ 21 - 0
src/assets/graphy/SGraphy/until/tool.ts

@@ -0,0 +1,21 @@
+let tools = {
+    changeMap(arr: any, k: any, name: any) {
+        let data = arr.map((items: any) => {
+            if (items[name] && items[name].length) {
+                items[name].map((children: any) => {
+                    if (Array.isArray(children)) {
+                        return children.map(res => {
+                            res.Y = res.Y * k
+                            return res
+                        })
+                    } else {
+                        children.Y = children.Y * k
+                        return children
+                    }
+                })
+            }
+        })
+        return data
+    }
+}
+export default tools

+ 8 - 7
src/assets/graphy/index.js

@@ -1,13 +1,14 @@
-import SGraphyView from './SGraphy/SGraphyView'
-import SGraphyScene from './SGraphy/SGraphyScene'
-import SGraphyClockItem from './SGraphy/items/SGraphyClockItem'
-import SGraphyRectItem from './SGraphy/items/SGraphyRectItem'
-import SGraphyLineItem from './SGraphy/items/SGraphyLineItem'
-import SGraphyPolygonItem from './SGraphy/items/SGraphyPolygonItem'
+
+import SGraphyPolygonItem from './SGraphy/newItems/SGraphyPolygonItem.js'
 import SGraphyCircleItem from './SGraphy/items/SGraphyCircleItem'
 import SGraphyImageItem from './SGraphy/items/SGraphyImageItem'
 import SGraphyPillarItems from './SGraphy/items/SGraphyPillarItems'
 import SGraphyTextItems from './SGraphy/items/SGraphyTextItems'
 import SGraphyVirtualItem from './SGraphy/items/SGraphyVirtualItem'
+import mainScene from './SGraphy/mainScene.js'
+import SGraphyRectItem from './SGraphy/newItems/SGraphyRectItem.js' 
 
-export { SGraphyView, SGraphyScene, SGraphyClockItem, SGraphyRectItem, SGraphyLineItem, SGraphyPolygonItem, SGraphyCircleItem, SGraphyImageItem, SGraphyPillarItems, SGraphyTextItems, SGraphyVirtualItem }
+import SGraphyView from './SGraphy/SGraphyView';
+import SGraphyScene from './SGraphy/SGraphyScene'
+import SGraphyLineItem from './SGraphy/items/SGraphyLineItem'
+export {SGraphyView,SGraphyScene,SGraphyLineItem,mainScene,SGraphyRectItem, SGraphyPolygonItem, SGraphyCircleItem, SGraphyImageItem, SGraphyPillarItems, SGraphyTextItems, SGraphyVirtualItem }

+ 36 - 17
src/views/ready/buildfloor/drawGraphy/checkGraphy.vue

@@ -16,10 +16,21 @@
         ></el-option>
       </el-select>
       <div>
-        或<el-button type="text">上传图片</el-button>
+        或
+        <el-button type="text">上传图片</el-button>
       </div>
       <!-- 展示框 -->
-      <div class="showBox"></div>
+      <div class="showBox">
+        <drawFloor
+          ref="drawFloor"
+          :findGraphyItemId="findGraphyItemId"
+          :cadWidth="cadWidth"
+          :cadHeight="cadHeight"
+          :dataKey="dataKey"
+          :point="point"
+          :pointWidth="pointWidth"
+        ></drawFloor>
+      </div>
     </div>
     <span slot="footer" class="dialog-footer">
       <el-button @click="handleClose">取 消</el-button>
@@ -28,9 +39,13 @@
   </el-dialog>
 </template>
 <script>
+import drawFloor from "./drawFloor";
 export default {
-  props:{
-      checkGraphyVisible:Boolean
+  components: {
+    drawFloor
+  },
+  props: {
+    checkGraphyVisible: Boolean
   },
   data() {
     return {
@@ -57,28 +72,32 @@ export default {
         }
       ],
       value: "",
-      dialogVisible:false
+      // graphy测试
+      cadWidth: 1700, // cad宽;
+      cadHeight: 450, //cad 高;
+      dataKey:  "/image-service/common/file_get/Fl4201050001c72ff970d2ba11e8a57543fa3e79672520181120041440bim.jsonz?systemId=revit", // key
+      point: [40703.54760591985, 42678.14510522981], //坐标
+      pointWidth: 2000,
+      findGraphyItemId: "" //高亮的id
     };
   },
   methods: {
-      handleClose(){
-        this.$emit('handleCloseCGraphy')
-      },
-      // 绑定图片
-      bindGraphy(){
- 
-      }
+    handleClose() {
+      this.$emit("handleCloseCGraphy");
+    },
+    // 绑定图片
+    bindGraphy() {}
   }
 };
 </script>
 <style lang="less">
 #checkGraphy {
   .bodys {
-      .showBox{
-          width: 100%;
-          height: 300px;
-          border:1px #ccc solid
-      }
+    .showBox {
+      width: 100%;
+      height: 300px;
+      border: 1px #ccc solid;
+    }
   }
 }
 </style>

+ 159 - 0
src/views/ready/buildfloor/drawGraphy/drawFloor.vue

@@ -0,0 +1,159 @@
+<template>
+  <div id="drawFloor">
+    <canvas id="canvas" :width="cadWidth" :height="cadHeight"></canvas>
+  </div>
+</template>
+
+<script>
+import {
+  SGraphyView,
+  SGraphyScene,
+  SGraphyClockItem
+} from "@sybotan-web/graphy/lib";
+import axios from "axios";
+import { SPoint } from "@sybotan-web/base/lib";
+import { SPen, SPainter, SColor } from "@sybotan-web/draw";
+import { mainScene, SGraphyRectItem } from "@/assets/graphy/index.js";
+export default {
+  props: {
+    cadWidth: {
+      type: Number,
+      default: 1000,
+      required: false
+    },
+    cadHeight: {
+      type: Number,
+      default: 800,
+      required: false
+    },
+    dataKey: {
+      type: String,
+      default: "",
+      required: true
+    },
+    point: {
+      type: Array,
+      default: [0, 0],
+      required: false
+    },
+    pointWidth: {
+      type: Number,
+      default: 2000,
+      required: false
+    },
+    initColor: {
+      type: Array,
+      default: function() {
+        return [
+          "#F9C3C3",
+          "#FFD1BF",
+          "#FFF3BF",
+          "#D8F7C6",
+          "#C6F2F6",
+          "#DCE3C0",
+          "#FAE6C9",
+          "#E3D7F7",
+          "#C4CBF8",
+          "#DEC3F6"
+        ];
+      },
+      required: false
+    },
+    findGraphyItemId: {
+      //高亮的id
+      type: String,
+      default: "",
+      required: false
+    },
+    highlightColor: {
+      //高亮的color
+      type: String,
+      default: "#1abc9c",
+      required: false
+    }
+  },
+  data() {
+    return {
+      drawMainScene: null
+    };
+  },
+  mounted() {
+    this.initGraphy();
+  },
+  methods: {
+    // // 请求获取地图的压缩包
+    // getMapBlob() {
+    //   return new Promise((resolve, reject) => {
+    //     this.$http
+    //       .fetchImageFile({
+    //         key: this.dataKey
+    //       })
+    //       .then(res => {
+    //         resolve(res);
+    //       })
+    //       .catch(err => {
+    //         console.log(err);
+    //       });
+    //   });
+    // },
+    //clickItem
+    clickItem(item) {
+      this.$emit("clickGraphyItem", item);
+    },
+    // 单个个体绘制颜色
+    drawItemColor(item, color) {
+      item.fillColor = new SColor(color); //需要缓存的边框
+      item.cacheFillColor = new SColor(color); //需要
+    },
+    // 绘制所有的item
+    drawAllItemColor() {
+      this.drawMainScene.root.children.forEach((item, index) => {
+        let color = this.initColor[index % 10];
+        this.drawItemColor(item, color);
+      });
+    },
+    initGraphy() {
+      if (!this.dataKey) {
+        return;
+      }
+      this.drawMainScene = null;
+      // 初始化view类
+      let view = new SGraphyView("canvas");
+      this.drawMainScene = new mainScene(null);
+      this.drawMainScene
+        .urlGetData(
+          "/image-service/common/file_get/Fl4201050001c72ff970d2ba11e8a57543fa3e79672520181120041440bim.jsonz?systemId=revit"
+        )
+        .then(() => {
+          //  将场景赋给view对图进行绘制
+          view.scene = this.drawMainScene;
+          // 自动缩放比例
+          view.fitSceneToView();
+          // 绘制地图颜色
+          this.drawAllItemColor();
+          // this.drawMainScene.click(this, this.clickItem);
+        });
+    },
+    // 单个item 高亮
+    heightLightitem(item, highlightColor) {
+      this.drawItemColor(item, highlightColor);
+    }
+  },
+  watch: {
+    dataKey(str) {
+      if (str) {
+        this.initGraphy();
+      }
+    },
+    findGraphyItemId(str) {
+      if (str) {
+        this.heightLightitem();
+      }
+    }
+  }
+};
+</script>
+<style scoped>
+/* #drawFloor {
+} */
+</style>