Prechádzať zdrojové kódy

'处理图例位置相关问题'

zhangyu 4 rokov pred
rodič
commit
342d194f42

+ 4 - 4
package.json

@@ -9,11 +9,11 @@
     },
     "dependencies": {
         "@mapbox/geojson-merge": "^1.1.1",
-        "@saga-web/base": "2.1.22",
-        "@saga-web/big": "1.0.80",
-        "@saga-web/draw": "2.1.100",
+        "@saga-web/base": "2.1.25",
+        "@saga-web/big": "1.0.86",
+        "@saga-web/draw": "2.1.102",
         "@saga-web/feng-map": "1.0.23",
-        "@saga-web/graph": "2.1.108",
+        "@saga-web/graph": "2.1.112",
         "ant-design-vue": "^1.4.10",
         "axios": "^0.19.2",
         "core-js": "^3.4.4",

+ 13 - 3
src/components/Legend/src/legend.vue

@@ -14,7 +14,9 @@
                         <lengend-view @changeSwitch='handleSwich' :remarksText='remarksText' ref='viewLengend' :systemName='systemName'></lengend-view>
                     </div>
                     <div class='legend-table' v-else>
-                        <lengend-view @changeSwitch='handleSwich' :remarksText='remarksText' ref='viewLengend' :systemName='systemName'></lengend-view>
+                        <div>
+                            <lengend-view @changeSwitch='handleSwich' :remarksText='remarksText' ref='viewLengend' :systemName='systemName'></lengend-view>
+                        </div>
                     </div>
                 </div>
             </el-collapse-transition>
@@ -536,13 +538,14 @@ export default {
 @red: rgb(255, 0, 0); //红色
 .legend-container {
     position: relative;
-    top: -23px;
+    // top: -23px;
     .legend {
         text-align: center;
         line-height: 44px;
         width: 44px;
         height: 44px;
         font-size: 14px;
+        margin-bottom: 8px;
         font-family: MicrosoftYaHei;
         color: rgba(2, 91, 170, 1);
         background: rgba(255, 255, 255, 1);
@@ -557,6 +560,7 @@ export default {
         cursor: pointer;
         width: 44px;
         height: 44px;
+        margin-bottom: 8px;
         background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
         border-radius: 2px;
         font-size: 14px;
@@ -570,7 +574,8 @@ export default {
         right: 47px;
         .legend-table {
             padding: 16px;
-            height: 460px;
+            // height: 460px;
+            max-height: 768px;
             width: 385px;
             // width: 420px;
             overflow: auto;
@@ -788,6 +793,11 @@ export default {
         }
     }
 }
+@media screen and (max-width:1600px){
+    .legend-container .legend-tab .legend-table {
+        max-height: 546px;
+    }
+}
 </style>
 <style lang="less">
 .legend-container {

+ 2 - 5
src/components/editLengend.vue

@@ -260,16 +260,13 @@ export default {
 </script>
 <style lang="less" scoped>
 .view {
-    position: relative;
+    // position: relative;
     .legend-tab2 {
         position: absolute;
-        top: -44px;
+        top: 0;
         right: 47px;
         width: 385px;
-        // width: 420px;
         height: 460px;
-        // min-width: 350px;
-        // width: auto;
         background: rgba(255, 255, 255, 1);
         box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.06);
         border-radius: 2px;

+ 2 - 6
src/components/floorList.vue

@@ -11,7 +11,7 @@
                 <img v-show='parseInt(marginTop) !== 0' v-repeat-click='increase' src='@/assets/imgs/iconBlackTop.png' alt />
                 <img class='disabled' v-show='parseInt(marginTop) === 0' src='@/assets/imgs/iconLightTop.png' alt />
             </div>
-            <div class='floor-out' :style='{ maxHeight:conHeight + "px",height:conHeight + "px" }'>
+            <div class='floor-out' :style='{ maxHeight:conHeight + "px;" }'>
                 <!--  放开marginTop样式  -->
                 <div class='floor-center' :style='{ marginTop : marginTop }'>
                     <div
@@ -69,7 +69,7 @@ export default {
         floorsArr: {
             type: Array,
             default: () => {
-                ;[]
+                [];
             }
         }
     },
@@ -223,10 +223,6 @@ export default {
 </script>
 <style lang="less" scoped>
 .floor-box {
-    position: fixed;
-    right: 32px;
-    top: 172px;
-    z-index: 99;
     .floor-list {
         width: 44px;
         // height: 212px;

+ 1 - 1
src/components/floorMap/canvasFun.vue

@@ -8,7 +8,7 @@
                     </i>
                     <el-dropdown-menu slot='dropdown'>
                         <el-dropdown-item command='savePng'>保存为png</el-dropdown-item>
-                        <el-dropdown-item command='saveSvg'>保存为svg</el-dropdown-item>
+                        <!-- <el-dropdown-item command='saveSvg'>保存为svg</el-dropdown-item> -->
                     </el-dropdown-menu>
                 </el-dropdown>
             </div>

+ 2 - 1
src/components/floorMap/index.vue

@@ -305,7 +305,8 @@ export default {
         },
         // 保存为png
         savePng() {
-            this.view.saveImage(`${this.loadName}.png`, 'png')
+            // this.view.saveImage(`${this.loadName}.png`, 'png')
+            this.view.saveImageSize(`${this.loadName}.png`, 'png', 1920*2, 1080*2)
             //console.log(`${this.loadName}.png`)
         },
         // 保存为svg

+ 112 - 91
src/lib/items/SFHFQZoneLegendItem.ts

@@ -1,33 +1,33 @@
-import { SGraphItem, SLineStyle } from '@saga-web/graph/lib'
+import { SGraphItem, SLineStyle, STextOrigin } from '@saga-web/graph/lib'
 import { Legend } from '../types/Legend'
 import { SPainter, SColor, SFont, SPoint, SLineCapStyle } from '@saga-web/draw'
 import { STextItem } from '@saga-web/graph/lib'
 import { hexify } from '@/components/mapClass/until'
 import { SItemStatus, ItemOrder, SPolygonItem } from '@saga-web/big/lib'
 /**
- *图例节点Item(区域类型 --防火分区)
+ * 图例节点Item(区域类型 --防火分区)
  *
  * * @author  张宇(taohuzy@163.com)
  */
 export class SFHFQZoneLegendItem extends SPolygonItem {
     /** 图例节点对象数据 */
-    data: Legend
+    data: Legend;
 
     /** text item   */
-    textItem: STextItem = new STextItem(this)
+    textItem: STextItem = new STextItem(this);
 
     get text(): string {
-        return this.textItem.text
+        return this.textItem.text;
     }
     set text(v: string) {
-        this.textItem.text = v
-        this.update()
+        this.textItem.text = v;
+        this.update();
     }
     get color(): SColor {
-        return this.textItem.color
+        return this.textItem.color;
     }
     set color(v: SColor) {
-        this.textItem.color = v
+        this.textItem.color = v;
     }
     get font(): SFont {
         return this.textItem.font
@@ -37,62 +37,77 @@ export class SFHFQZoneLegendItem extends SPolygonItem {
     }
 
     get status(): SItemStatus {
-        return this._status
+        return this._status;
     }
     // 编辑当前状态
     set status(value: SItemStatus) {
-        this._status = value
+        this._status = value;
         // 如果状态为show则需清栈
         if (value == SItemStatus.Normal) {
             // 切换显示状态显示文本
-            this.showText = true
+            this.showText = true;
             // 切换显示状态不可移动文本
-            this.textItem.moveable = false
+            this.textItem.moveable = false;
 
             if (this.undoStack) {
-                this.undoStack.clear()
+                this.undoStack.clear();
             }
         } else if (value == SItemStatus.Edit) {
             // 切换编辑状态显示文本
-            this.showText = true
+            this.showText = true;
             // 切换编辑状态可移动文本
-            this.textItem.moveable = true
+            this.textItem.moveable = true;
         } else if (value == SItemStatus.Create) {
             // 切换创建状态不显示文本
-            this.showText = false
+            this.showText = false;
             // 切换创建状态不可移动文本
-            this.textItem.moveable = false
+            this.textItem.moveable = false;
         }
-        this.update()
-    }
+        this.update();
+    };
+
+    /** 是否激活  */
+    _isActive: boolean = false;
+    get isActive(): boolean {
+        return this._isActive;
+    } // Get isActive
+    set isActive(v: boolean) {
+        this._isActive = v;
+        if (v) {
+            this.cursor = "pointer";
+        } else {
+            this.cursor = "auto";
+        }
+        this.update();
+    } // Set isActive
 
     /** 是否显示文字  */
-    _showText: boolean = true
+    _showText: boolean = true;
     get showText(): boolean {
-        return this._showText
+        return this._showText;
     }
     set showText(v: boolean) {
         if (v === this._showText) {
             return
         }
-        this._showText = v
+        this._showText = v;
         if (v) {
-            this.textItem.show()
+            this.textItem.show();
         } else {
-            this.textItem.hide()
+            this.textItem.hide();
         }
     }
 
     /** 是否蒙版遮罩  */
-    _maskFlag: boolean = false
+    _maskFlag: boolean = false;
     get maskFlag(): boolean {
-        return this._maskFlag
+        return this._maskFlag;
     }
     set maskFlag(v: boolean) {
         if (v === this._maskFlag) {
             return
         }
-        this._maskFlag = v
+        this._maskFlag = v;
         this.update()
     }
 
@@ -103,105 +118,113 @@ export class SFHFQZoneLegendItem extends SPolygonItem {
      * @param data      图例节点对象数据
      */
     constructor(parent: SGraphItem | null, data: Legend) {
-        super(parent)
-        this.textItem.isTransform = false
-        this.zOrder = ItemOrder.polygonOrder
-        this.data = data
-        this.id = data.ID
-        this.name = data.Name
-        this.text = data.Name
+        super(parent);
+        this.textItem.originPosition = STextOrigin.Centrum;
+        this.textItem.isTransform = false;
+        this.zOrder = ItemOrder.polygonOrder - 0.00005;
+        this.data = data;
+        this.id = data.ID;
+        this.name = data.Name;
+        this.text = data.Name;
         if (data) {
-            this.setPointList = []
-            let setPointList: SPoint[]
+            this.setPointList = [];
+            let setPointList: SPoint[];
             if (data.OutLine) {
                 if (data.OutLine[0] instanceof SPoint) {
-                    this.setPointList = data.OutLine
+                    this.setPointList = data.OutLine;
                 } else {
-                    setPointList = data.OutLine.map((i) => {
-                        return new SPoint(i.X, i.Y)
+                    setPointList = data.OutLine.map(i => {
+                        return (new SPoint(i.X, i.Y))
                     })
-                    this.setPointList = setPointList
+                    this.setPointList = setPointList;
                 }
             }
+            if (data.Properties.Zorder) {
+                this.zOrder = data.Properties.Zorder;
+            }
             // 设置线宽
             if (data.Properties.LineWidth) {
-                this.lineWidth = data.Properties.LineWidth
+                this.lineWidth = data.Properties.LineWidth;
             }
             if (data.Properties.StrokeColor) {
-                this.strokeColor = data.Properties.StrokeColor.includes('#')
-                    ? new SColor(data.Properties.StrokeColor)
-                    : new SColor(hexify(data.Properties.StrokeColor))
+                this.strokeColor = data.Properties.StrokeColor.includes('#') ? new SColor(data.Properties.StrokeColor) : new SColor(hexify(data.Properties.StrokeColor));
             }
             if (data.Properties.FillColor) {
-                this.fillColor = data.Properties.FillColor.includes('#')
-                    ? new SColor(data.Properties.FillColor)
-                    : new SColor(hexify(data.Properties.FillColor))
+                this.fillColor = data.Properties.FillColor.includes('#') ? new SColor(data.Properties.FillColor) : new SColor(hexify(data.Properties.FillColor));
             }
             if (data.Properties.TextPos) {
-                this.textItem.moveTo(data.Properties.TextPos.X, data.Properties.TextPos.Y)
+                this.textItem.moveTo(data.Properties.TextPos.X, data.Properties.TextPos.Y);
             }
             if (data.Properties.color) {
-                this.color = new SColor(data.Properties.color)
+                this.color = new SColor(data.Properties.color);
             }
             if (data.Properties.font) {
-                this.font = new SFont('sans-serif', data.Properties.font)
+                this.font = new SFont("sans-serif", data.Properties.font);
+            }
+            if (data.Properties && data.Properties.IsActive) {
+                this.isActive = data.Properties.IsActive;
+            }
+            if (data.AttachObjectIds && data.AttachObjectIds.length) {
+                this.isActive = true;
             }
             switch (data.Properties.LineDash) {
-                case 'solid':
-                    this.lineStyle = SLineStyle.Solid
-                    break
-                case 'dotted':
-                    this.lineStyle = SLineStyle.Dotted
-                    break
-                case 'dashed':
-                    this.lineStyle = SLineStyle.Dashed
-                    break
+                case "solid":
+                    this.lineStyle = SLineStyle.Solid;
+                    break;
+                case "dotted":
+                    this.lineStyle = SLineStyle.Dotted;
+                    break;
+                case "dashed":
+                    this.lineStyle = SLineStyle.Dashed;
+                    break;
                 default:
-                    this.lineStyle = SLineStyle.Solid
+                    this.lineStyle = SLineStyle.Solid;
             }
         }
         // 监听多边形创建完成事件,并动态计算文本位置
-        this.connect('finishCreated', this, () => {
+        this.connect("finishCreated", this, () => {
             // 计算文本位置
             let x: number = this.getPointList.reduce((pre, cur, index, arr) => {
-                    return pre + cur.x / arr.length
-                }, 0),
+                return pre + (cur.x / arr.length)
+            }, 0),
                 y: number = this.getPointList.reduce((pre, cur, index, arr) => {
-                    return pre + cur.y / arr.length
-                }, 0)
-            this.textItem.moveTo(x, y)
+                    return pre + (cur.y / arr.length)
+                }, 0);
+            this.textItem.moveTo(x, y);
         })
     }
 
     toData(): any {
-        this.data.Pos = { X: this.x, Y: this.y }
-        this.data.Name = this.name
-        this.data.Properties.FillColor = this.fillColor.value
-        this.data.Properties.StrokeColor = this.strokeColor.value
-        this.data.Properties.LineWidth = this.lineWidth
+        this.data.Pos = { X: this.x, Y: this.y };
+        this.data.Name = this.name;
+        this.data.Properties.Zorder = this.zOrder;
+        this.data.Properties.FillColor = this.fillColor.value;
+        this.data.Properties.StrokeColor = this.strokeColor.value;
+        this.data.Properties.LineWidth = this.lineWidth;
         switch (this.lineStyle) {
             case SLineStyle.Solid:
-                this.data.Properties.LineDash = 'solid'
-                break
+                this.data.Properties.LineDash = "solid";
+                break;
             case SLineStyle.Dotted:
-                this.data.Properties.LineDash = 'dotted'
-                break
+                this.data.Properties.LineDash = "dotted";
+                break;
             case SLineStyle.Dashed:
-                this.data.Properties.LineDash = 'dashed'
-                break
+                this.data.Properties.LineDash = "dashed";
+                break;
             default:
-                this.data.Properties.LineDash = 'solid'
+                this.data.Properties.LineDash = "solid";
         }
-        this.data.OutLine = this.getPointList.map((pos) => {
+        this.data.OutLine = this.getPointList.map(pos => {
             return {
                 X: pos.x,
-                Y: pos.y,
+                Y: pos.y
             }
-        })
-        this.data.Properties.TextPos = { X: this.textItem.x, Y: this.textItem.y }
-        this.data.Properties.font = this.font.size
-        this.data.Properties.color = this.color.value
-        return this.data
+        });
+        this.data.Properties.TextPos = {X: this.textItem.x, Y: this.textItem.y};
+        this.data.Properties.font =  this.font.size;
+        this.data.Properties.color =  this.color.value;
+        this.data.Properties.IsActive = this.isActive;
+        return this.data;
     }
 
     onDraw(painter: SPainter) {
@@ -214,7 +237,6 @@ export class SFHFQZoneLegendItem extends SPolygonItem {
             painter.pen.lineCapStyle = SLineCapStyle.Square
             painter.pen.lineWidth = painter.toPx(this._lineWidth)
             painter.brush.color = brushcolor
-
             if (this.selected) {
                 painter.pen.lineWidth = painter.toPx(this.lineWidth * 2);
                 painter.shadow.shadowBlur = 10;
@@ -222,11 +244,10 @@ export class SFHFQZoneLegendItem extends SPolygonItem {
                 painter.shadow.shadowOffsetX = 5;
                 painter.shadow.shadowOffsetY = 5;
             }
-
             // @ts-ignore
-            painter.drawPolygon([...this.pointList])
+            painter.drawPolygon([...this.pointList]);
         } else {
-            super.onDraw(painter)
+            super.onDraw(painter);
         }
     }
-} // Class SZoneLegendItem
+} // Class SFHFQZoneLegendItem

+ 112 - 90
src/lib/items/SSCPZZoneLegendItem.ts

@@ -1,4 +1,4 @@
-import { SGraphItem, SLineStyle } from '@saga-web/graph/lib'
+import { SGraphItem, SLineStyle, STextOrigin } from '@saga-web/graph/lib'
 import { Legend } from '../types/Legend'
 import { SPainter, SColor, SFont, SPoint, SLineCapStyle } from '@saga-web/draw'
 import { STextItem } from '@saga-web/graph/lib'
@@ -11,23 +11,23 @@ import { SItemStatus, ItemOrder, SPolygonItem } from '@saga-web/big/lib'
  */
 export class SSCPZZoneLegendItem extends SPolygonItem {
     /** 图例节点对象数据 */
-    data: Legend
+    data: Legend;
 
     /** text item   */
-    textItem: STextItem = new STextItem(this)
+    textItem: STextItem = new STextItem(this);
 
     get text(): string {
-        return this.textItem.text
+        return this.textItem.text;
     }
     set text(v: string) {
-        this.textItem.text = v
-        this.update()
+        this.textItem.text = v;
+        this.update();
     }
     get color(): SColor {
-        return this.textItem.color
+        return this.textItem.color;
     }
     set color(v: SColor) {
-        this.textItem.color = v
+        this.textItem.color = v;
     }
     get font(): SFont {
         return this.textItem.font
@@ -37,62 +37,77 @@ export class SSCPZZoneLegendItem extends SPolygonItem {
     }
 
     get status(): SItemStatus {
-        return this._status
+        return this._status;
     }
     // 编辑当前状态
     set status(value: SItemStatus) {
-        this._status = value
+        this._status = value;
         // 如果状态为show则需清栈
         if (value == SItemStatus.Normal) {
             // 切换显示状态显示文本
-            this.showText = true
+            this.showText = true;
             // 切换显示状态不可移动文本
-            this.textItem.moveable = false
+            this.textItem.moveable = false;
 
             if (this.undoStack) {
-                this.undoStack.clear()
+                this.undoStack.clear();
             }
         } else if (value == SItemStatus.Edit) {
             // 切换编辑状态显示文本
-            this.showText = true
+            this.showText = true;
             // 切换编辑状态可移动文本
-            this.textItem.moveable = true
+            this.textItem.moveable = true;
         } else if (value == SItemStatus.Create) {
             // 切换创建状态不显示文本
-            this.showText = false
+            this.showText = false;
             // 切换创建状态不可移动文本
-            this.textItem.moveable = false
+            this.textItem.moveable = false;
         }
-        this.update()
-    }
+        this.update();
+    };
+
+    /** 是否激活  */
+    _isActive: boolean = false;
+    get isActive(): boolean {
+        return this._isActive;
+    } // Get isActive
+    set isActive(v: boolean) {
+        this._isActive = v;
+        if (v) {
+            this.cursor = "pointer";
+        } else {
+            this.cursor = "auto";
+        }
+        this.update();
+    } // Set isActive
 
     /** 是否显示文字  */
-    _showText: boolean = true
+    _showText: boolean = true;
     get showText(): boolean {
-        return this._showText
+        return this._showText;
     }
     set showText(v: boolean) {
         if (v === this._showText) {
             return
         }
-        this._showText = v
+        this._showText = v;
         if (v) {
-            this.textItem.show()
+            this.textItem.show();
         } else {
-            this.textItem.hide()
+            this.textItem.hide();
         }
     }
 
     /** 是否蒙版遮罩  */
-    _maskFlag: boolean = false
+    _maskFlag: boolean = false;
     get maskFlag(): boolean {
-        return this._maskFlag
+        return this._maskFlag;
     }
     set maskFlag(v: boolean) {
         if (v === this._maskFlag) {
             return
         }
-        this._maskFlag = v
+        this._maskFlag = v;
         this.update()
     }
 
@@ -111,105 +126,114 @@ export class SSCPZZoneLegendItem extends SPolygonItem {
      * @param data      图例节点对象数据
      */
     constructor(parent: SGraphItem | null, data: Legend) {
-        super(parent)
-        this.textItem.isTransform = false
-        this.zOrder = ItemOrder.polygonOrder
-        this.data = data
-        this.id = data.ID
-        this.name = data.Name
-        this.text = data.Name
+        super(parent);
+        this.textItem.originPosition = STextOrigin.Centrum;
+        this.textItem.isTransform = false;
+        this.zOrder = ItemOrder.polygonOrder - 0.0005;
+        this.data = data;
+        this.id = data.ID;
+        this.name = data.Name;
+        this.text = data.Name;
         if (data) {
-            this.setPointList = []
-            let setPointList: SPoint[]
+            this.setPointList = [];
+            let setPointList: SPoint[];
             if (data.OutLine) {
                 if (data.OutLine[0] instanceof SPoint) {
-                    this.setPointList = data.OutLine
+                    this.setPointList = data.OutLine;
                 } else {
-                    setPointList = data.OutLine.map((i) => {
-                        return new SPoint(i.X, i.Y)
+                    setPointList = data.OutLine.map(i => {
+                        return (new SPoint(i.X, i.Y))
                     })
-                    this.setPointList = setPointList
+                    this.setPointList = setPointList;
                 }
             }
+            if (data.Properties.Zorder) {
+                this.zOrder = data.Properties.Zorder;
+            }
             // 设置线宽
             if (data.Properties.LineWidth) {
-                this.lineWidth = data.Properties.LineWidth
+                this.lineWidth = data.Properties.LineWidth;
             }
             if (data.Properties.StrokeColor) {
-                this.strokeColor = data.Properties.StrokeColor.includes('#')
-                    ? new SColor(data.Properties.StrokeColor)
-                    : new SColor(hexify(data.Properties.StrokeColor))
+                this.strokeColor = data.Properties.StrokeColor.includes('#') ? new SColor(data.Properties.StrokeColor) : new SColor(hexify(data.Properties.StrokeColor));
             }
             if (data.Properties.FillColor) {
-                this.fillColor = data.Properties.FillColor.includes('#')
-                    ? new SColor(data.Properties.FillColor)
-                    : new SColor(hexify(data.Properties.FillColor))
+                this.fillColor = data.Properties.FillColor.includes('#') ? new SColor(data.Properties.FillColor) : new SColor(hexify(data.Properties.FillColor))
             }
             if (data.Properties.TextPos) {
-                this.textItem.moveTo(data.Properties.TextPos.X, data.Properties.TextPos.Y)
+                this.textItem.moveTo(data.Properties.TextPos.X, data.Properties.TextPos.Y);
             }
             if (data.Properties.color) {
-                this.color = new SColor(data.Properties.color)
+                this.color = new SColor(data.Properties.color);
             }
             if (data.Properties.font) {
-                this.font = new SFont('sans-serif', data.Properties.font)
+                this.font = new SFont("sans-serif", data.Properties.font);
+            }
+            if (data.Properties && data.Properties.IsActive) {
+                this.isActive = data.Properties.IsActive;
+            }
+            if (data.AttachObjectIds && data.AttachObjectIds.length) {
+                this.isActive = true;
             }
             switch (data.Properties.LineDash) {
-                case 'solid':
-                    this.lineStyle = SLineStyle.Solid
-                    break
-                case 'dotted':
-                    this.lineStyle = SLineStyle.Dotted
-                    break
-                case 'dashed':
-                    this.lineStyle = SLineStyle.Dashed
-                    break
+                case "solid":
+                    this.lineStyle = SLineStyle.Solid;
+                    break;
+                case "dotted":
+                    this.lineStyle = SLineStyle.Dotted;
+                    break;
+                case "dashed":
+                    this.lineStyle = SLineStyle.Dashed;
+                    break;
                 default:
-                    this.lineStyle = SLineStyle.Solid
+                    this.lineStyle = SLineStyle.Solid;
             }
         }
         // 监听多边形创建完成事件,并动态计算文本位置
-        this.connect('finishCreated', this, () => {
+        this.connect("finishCreated", this, () => {
             // 计算文本位置
             let x: number = this.getPointList.reduce((pre, cur, index, arr) => {
-                    return pre + cur.x / arr.length
-                }, 0),
+                return pre + (cur.x / arr.length)
+            }, 0),
                 y: number = this.getPointList.reduce((pre, cur, index, arr) => {
-                    return pre + cur.y / arr.length
-                }, 0)
-            this.textItem.moveTo(x, y)
+                    return pre + (cur.y / arr.length)
+                }, 0);
+            this.textItem.moveTo(x, y);
         })
     }
 
     toData(): any {
-        this.data.Pos = { X: this.x, Y: this.y }
-        this.data.Name = this.name
-        this.data.Properties.FillColor = this.fillColor.value
-        this.data.Properties.StrokeColor = this.strokeColor.value
-        this.data.Properties.LineWidth = this.lineWidth
+        this.data.Pos = { X: this.x, Y: this.y };
+        this.data.Name = this.name;
+        console.log(this.zOrder);
+        this.data.Properties.Zorder = this.zOrder;
+        this.data.Properties.FillColor = this.fillColor.value;
+        this.data.Properties.StrokeColor = this.strokeColor.value;
+        this.data.Properties.LineWidth = this.lineWidth;
         switch (this.lineStyle) {
             case SLineStyle.Solid:
-                this.data.Properties.LineDash = 'solid'
-                break
+                this.data.Properties.LineDash = "solid";
+                break;
             case SLineStyle.Dotted:
-                this.data.Properties.LineDash = 'dotted'
-                break
+                this.data.Properties.LineDash = "dotted";
+                break;
             case SLineStyle.Dashed:
-                this.data.Properties.LineDash = 'dashed'
-                break
+                this.data.Properties.LineDash = "dashed";
+                break;
             default:
-                this.data.Properties.LineDash = 'solid'
+                this.data.Properties.LineDash = "solid";
         }
-        this.data.OutLine = this.getPointList.map((pos) => {
+        this.data.OutLine = this.getPointList.map(pos => {
             return {
                 X: pos.x,
-                Y: pos.y,
+                Y: pos.y
             }
-        })
-        this.data.Properties.TextPos = { X: this.textItem.x, Y: this.textItem.y }
-        this.data.Properties.font = this.font.size
-        this.data.Properties.color = this.color.value
-        return this.data
+        });
+        this.data.Properties.TextPos = {X: this.textItem.x, Y: this.textItem.y};
+        this.data.Properties.font =  this.font.size;
+        this.data.Properties.color =  this.color.value;
+        this.data.Properties.IsActive = this.isActive;
+        return this.data;
     }
 
     onDraw(painter: SPainter) {
@@ -222,7 +246,6 @@ export class SSCPZZoneLegendItem extends SPolygonItem {
             painter.pen.lineCapStyle = SLineCapStyle.Square
             painter.pen.lineWidth = painter.toPx(this._lineWidth)
             painter.brush.color = brushcolor
-
             if (this.selected) {
                 painter.pen.lineWidth = painter.toPx(this.lineWidth * 2);
                 painter.shadow.shadowBlur = 10;
@@ -230,11 +253,10 @@ export class SSCPZZoneLegendItem extends SPolygonItem {
                 painter.shadow.shadowOffsetX = 5;
                 painter.shadow.shadowOffsetY = 5;
             }
-
             // @ts-ignore
-            painter.drawPolygon([...this.pointList])
+            painter.drawPolygon([...this.pointList]);
         } else {
-            super.onDraw(painter)
+            super.onDraw(painter);
         }
     }
-} // Class SZoneLegendItem
+} // Class SSCPZZoneLegendItem

+ 112 - 92
src/lib/items/SZoneLegendItem.ts

@@ -1,10 +1,9 @@
-import { SGraphItem, SLineStyle } from '@saga-web/graph/lib'
+import { SGraphItem, SLineStyle, STextOrigin } from '@saga-web/graph/lib'
 import { Legend } from '../types/Legend'
 import { SPainter, SColor, SFont, SPoint, SLineCapStyle } from '@saga-web/draw'
 import { STextItem } from '@saga-web/graph/lib'
 import { hexify } from '@/components/mapClass/until'
 import { SItemStatus, ItemOrder, SPolygonItem } from '@saga-web/big/lib'
-import { SMouseEvent } from '@saga-web/base/lib'
 /**
  * 图例节点Item(区域类型)
  *
@@ -12,88 +11,103 @@ import { SMouseEvent } from '@saga-web/base/lib'
  */
 export class SZoneLegendItem extends SPolygonItem {
     /** 图例节点对象数据 */
-    data: Legend
+    data: Legend;
 
     /** text item   */
-    textItem: STextItem = new STextItem(this)
+    textItem: STextItem = new STextItem(this);
 
     get text(): string {
-        return this.textItem.text
+        return this.textItem.text;
     }
     set text(v: string) {
-        this.textItem.text = v
-        this.update()
+        this.textItem.text = v;
+        this.update();
     }
     get color(): SColor {
-        return this.textItem.color
+        return this.textItem.color;
     }
     set color(v: SColor) {
-        this.textItem.color = v
+        this.textItem.color = v;
     }
     get font(): SFont {
-        return this.textItem.font
+        return this.textItem.font;
     }
     set font(v: SFont) {
-        this.textItem.font = v
+        this.textItem.font = v;
     }
 
     get status(): SItemStatus {
-        return this._status
+        return this._status;
     }
     // 编辑当前状态
     set status(value: SItemStatus) {
-        this._status = value
+        this._status = value;
         // 如果状态为show则需清栈
         if (value == SItemStatus.Normal) {
             // 切换显示状态显示文本
-            this.showText = true
+            this.showText = true;
             // 切换显示状态不可移动文本
-            this.textItem.moveable = false
+            this.textItem.moveable = false;
 
             if (this.undoStack) {
-                this.undoStack.clear()
+                this.undoStack.clear();
             }
         } else if (value == SItemStatus.Edit) {
             // 切换编辑状态显示文本
-            this.showText = true
+            this.showText = true;
             // 切换编辑状态可移动文本
-            this.textItem.moveable = true
+            this.textItem.moveable = true;
         } else if (value == SItemStatus.Create) {
             // 切换创建状态不显示文本
-            this.showText = false
+            this.showText = false;
             // 切换创建状态不可移动文本
-            this.textItem.moveable = false
+            this.textItem.moveable = false;
         }
-        this.update()
-    }
+        this.update();
+    };
+
+    /** 是否激活  */
+    _isActive: boolean = false;
+    get isActive(): boolean {
+        return this._isActive;
+    } // Get isActive
+    set isActive(v: boolean) {
+        this._isActive = v;
+        if (v) {
+            this.cursor = "pointer";
+        } else {
+            this.cursor = "auto";
+        }
+        this.update();
+    } // Set isActive
 
     /** 是否显示文字  */
-    _showText: boolean = true
+    _showText: boolean = true;
     get showText(): boolean {
-        return this._showText
+        return this._showText;
     }
     set showText(v: boolean) {
         if (v === this._showText) {
             return
         }
-        this._showText = v
+        this._showText = v;
         if (v) {
-            this.textItem.show()
+            this.textItem.show();
         } else {
-            this.textItem.hide()
+            this.textItem.hide();
         }
     }
 
     /** 是否蒙版遮罩  */
-    _maskFlag: boolean = false
+    _maskFlag: boolean = false;
     get maskFlag(): boolean {
-        return this._maskFlag
+        return this._maskFlag;
     }
     set maskFlag(v: boolean) {
         if (v === this._maskFlag) {
             return
         }
-        this._maskFlag = v
+        this._maskFlag = v;
         this.update()
     }
 
@@ -104,106 +118,114 @@ export class SZoneLegendItem extends SPolygonItem {
      * @param data      图例节点对象数据
      */
     constructor(parent: SGraphItem | null, data: Legend) {
-        super(parent)
-        this.textItem.isTransform = false
-        this.zOrder = ItemOrder.polygonOrder
-        this.data = data
-        this.id = data.ID
-        this.name = data.Name
-        this.text = data.Name
+        super(parent);
+        this.textItem.originPosition = STextOrigin.Centrum;
+        this.textItem.isTransform = false;
+        this.zOrder = ItemOrder.polygonOrder;
+        this.data = data;
+        this.id = data.ID;
+        this.name = data.Name;
+        this.text = data.Name;
         if (data) {
-            this.setPointList = []
-            let setPointList: SPoint[]
+            this.setPointList = [];
+            let setPointList: SPoint[];
             if (data.OutLine) {
                 if (data.OutLine[0] instanceof SPoint) {
                     // @ts-ignore
-                    this.setPointList = data.OutLine
+                    this.setPointList = data.OutLine;
                 } else {
-                    setPointList = data.OutLine.map((i) => {
-                        return new SPoint(i.X, i.Y)
+                    setPointList = data.OutLine.map(i => {
+                        return (new SPoint(i.X, i.Y))
                     })
-                    this.setPointList = setPointList
+                    this.setPointList = setPointList;
                 }
             }
+            if (data.Properties.Zorder) {
+                this.zOrder = data.Properties.Zorder;
+            }
             // 设置线宽
             if (data.Properties.LineWidth) {
-                this.lineWidth = data.Properties.LineWidth
+                this.lineWidth = data.Properties.LineWidth;
             }
             if (data.Properties.StrokeColor) {
-                this.strokeColor = data.Properties.StrokeColor.includes('#')
-                    ? new SColor(data.Properties.StrokeColor)
-                    : new SColor(hexify(data.Properties.StrokeColor))
+                this.strokeColor = data.Properties.StrokeColor.includes('#') ? new SColor(data.Properties.StrokeColor) : new SColor(hexify(data.Properties.StrokeColor));
             }
             if (data.Properties.FillColor) {
-                this.fillColor = data.Properties.FillColor.includes('#')
-                    ? new SColor(data.Properties.FillColor)
-                    : new SColor(hexify(data.Properties.FillColor))
+                this.fillColor = data.Properties.FillColor.includes('#') ? new SColor(data.Properties.FillColor) : new SColor(hexify(data.Properties.FillColor))
             }
             if (data.Properties.TextPos) {
-                this.textItem.moveTo(data.Properties.TextPos.X, data.Properties.TextPos.Y)
+                this.textItem.moveTo(data.Properties.TextPos.X, data.Properties.TextPos.Y);
             }
             if (data.Properties.color) {
-                this.color = new SColor(data.Properties.color)
+                this.color = new SColor(data.Properties.color);
             }
             if (data.Properties.font) {
-                this.font = new SFont('sans-serif', data.Properties.font)
+                this.font = new SFont("sans-serif", data.Properties.font);
+            }
+            if (data.Properties && data.Properties.IsActive) {
+                this.isActive = data.Properties.IsActive;
+            }
+            if (data.AttachObjectIds && data.AttachObjectIds.length) {
+                this.isActive = true;
             }
             switch (data.Properties.LineDash) {
-                case 'solid':
-                    this.lineStyle = SLineStyle.Solid
-                    break
-                case 'dotted':
-                    this.lineStyle = SLineStyle.Dotted
-                    break
-                case 'dashed':
-                    this.lineStyle = SLineStyle.Dashed
-                    break
+                case "solid":
+                    this.lineStyle = SLineStyle.Solid;
+                    break;
+                case "dotted":
+                    this.lineStyle = SLineStyle.Dotted;
+                    break;
+                case "dashed":
+                    this.lineStyle = SLineStyle.Dashed;
+                    break;
                 default:
-                    this.lineStyle = SLineStyle.Solid
+                    this.lineStyle = SLineStyle.Solid;
             }
         }
         // 监听多边形创建完成事件,并动态计算文本位置
-        this.connect('finishCreated', this, () => {
+        this.connect("finishCreated", this, () => {
             // 计算文本位置
             let x: number = this.getPointList.reduce((pre, cur, index, arr) => {
-                    return pre + cur.x / arr.length
-                }, 0),
+                return pre + (cur.x / arr.length)
+            }, 0),
                 y: number = this.getPointList.reduce((pre, cur, index, arr) => {
-                    return pre + cur.y / arr.length
-                }, 0)
-            this.textItem.moveTo(x, y)
+                    return pre + (cur.y / arr.length)
+                }, 0);
+            this.textItem.moveTo(x, y);
         })
     }
 
     toData(): any {
-        this.data.Pos = { X: this.x, Y: this.y }
-        this.data.Name = this.name
-        this.data.Properties.FillColor = this.fillColor.value
-        this.data.Properties.StrokeColor = this.strokeColor.value
-        this.data.Properties.LineWidth = this.lineWidth
+        this.data.Pos = { X: this.x, Y: this.y };
+        this.data.Name = this.name;
+        this.data.Properties.Zorder = this.zOrder;
+        this.data.Properties.FillColor = this.fillColor.value;
+        this.data.Properties.StrokeColor = this.strokeColor.value;
+        this.data.Properties.LineWidth = this.lineWidth;
         switch (this.lineStyle) {
             case SLineStyle.Solid:
-                this.data.Properties.LineDash = 'solid'
-                break
+                this.data.Properties.LineDash = "solid";
+                break;
             case SLineStyle.Dotted:
-                this.data.Properties.LineDash = 'dotted'
-                break
+                this.data.Properties.LineDash = "dotted";
+                break;
             case SLineStyle.Dashed:
-                this.data.Properties.LineDash = 'dashed'
-                break
+                this.data.Properties.LineDash = "dashed";
+                break;
             default:
-                this.data.Properties.LineDash = 'solid'
+                this.data.Properties.LineDash = "solid";
         }
-        this.data.OutLine = this.getPointList.map((pos) => {
+        this.data.OutLine = this.getPointList.map(pos => {
             return {
                 X: pos.x,
-                Y: pos.y,
+                Y: pos.y
             }
-        })
-        this.data.Properties.TextPos = { X: this.textItem.x, Y: this.textItem.y }
-        this.data.Properties.font = this.font.size
-        this.data.Properties.color = this.color.value
-        return this.data
+        });
+        this.data.Properties.TextPos = {X: this.textItem.x, Y: this.textItem.y};
+        this.data.Properties.font =  this.font.size;
+        this.data.Properties.color =  this.color.value;
+        this.data.Properties.IsActive = this.isActive;
+        return this.data;
     }
 
     onDraw(painter: SPainter) {
@@ -216,7 +238,6 @@ export class SZoneLegendItem extends SPolygonItem {
             painter.pen.lineCapStyle = SLineCapStyle.Square
             painter.pen.lineWidth = painter.toPx(this._lineWidth)
             painter.brush.color = brushcolor
-
             if (this.selected) {
                 painter.pen.lineWidth = painter.toPx(this.lineWidth * 2);
                 painter.shadow.shadowBlur = 10;
@@ -224,11 +245,10 @@ export class SZoneLegendItem extends SPolygonItem {
                 painter.shadow.shadowOffsetX = 5;
                 painter.shadow.shadowOffsetY = 5;
             }
-            
             // @ts-ignore
-            painter.drawPolygon([...this.pointList])
+            painter.drawPolygon([...this.pointList]);
         } else {
-            super.onDraw(painter)
+            super.onDraw(painter);
         }
     }
 } // Class SZoneLegendItem

+ 42 - 33
src/views/equipment/index.vue

@@ -27,6 +27,7 @@
                         </div>
                     </div>
                     <div class='eq-content'>
+                        <floorMap ref='floorMap' :id='"equip"' :loadName='loadName' :type='"system"'></floorMap>
                         <div class='legend-boxs'>
                             <Legend
                                 :key='keyLd'
@@ -35,26 +36,26 @@
                                 type='1'
                                 :editTips='`编辑${floorInfo.code}层${systemName}平面图`'
                             ></Legend>
-                        </div>
-                        <floorMap ref='floorMap' :id='"equip"' :loadName='loadName' :type='"system"'></floorMap>
-                        <div class='additional-box' v-if='fqPic.length>0'>
-                            <div class='additional2' @click='additionalColl' v-if='showView===3'>
-                                <img src='../../assets/imgs/bg2.png' alt />
-                            </div>
-                            <div class='additional' @click='additionalColl' v-else>
-                                <img src='../../assets/imgs/bg.png' alt />
-                            </div>
-                            <el-collapse-transition>
-                                <div v-if='showView===3' class='add-img-container'>
-                                    <div class='add-img'>
-                                        <img :src='fqPic[0].url' alt />
-                                    </div>
+                            <!-- 楼层切换组件 -->
+                            <floor-list :key='keyFL' v-if='floorsArr.length>0' :floorsArr='floorsArr' @emitFloor='emitFloor' id='system'></floor-list>
+
+                            <div class='additional-box' ref="additionalBox" v-if='fqPic.length>0'>
+                                <div class='additional2' @click='additionalColl' v-if='showView===3'>
+                                    <img src='../../assets/imgs/bg2.png' alt />
+                                </div>
+                                <div class='additional' @click='additionalColl' v-else>
+                                    <img src='../../assets/imgs/bg.png' alt />
                                 </div>
-                            </el-collapse-transition>
+                                <el-collapse-transition>
+                                    <div v-show='showView===3' class='add-img-container' ref="addImgContainer" :style="`bottom: ${bottomOffset}px;`">
+                                        <div class='add-img' ref="addImg">
+                                            <img :src='fqPic[0].url' alt />
+                                        </div>
+                                    </div>
+                                </el-collapse-transition>
+                            </div>
                         </div>
                     </div>
-                    <!-- 楼层切换组件 -->
-                    <floor-list :key='keyFL' v-if='floorsArr.length>0' :floorsArr='floorsArr' @emitFloor='emitFloor' id='system'></floor-list>
                 </div>
             </div>
         </div>
@@ -92,6 +93,7 @@ export default {
             loadName: '',
             type: '',
             objCount: [],
+            bottomOffset: 0,
             keyFL: 'keyFL' + new Date().getTime(),
             keyLd: 'keyLd_' + new Date().getTime(),
             ShowDialog: false //是否显示弹窗
@@ -189,6 +191,16 @@ export default {
         additionalColl() {
             if (this.showView != 3) {
                 this.$store.commit('SETSHOWVIEW', 3)
+                this.$nextTick(() => {
+                    let p = this.$refs.additionalBox.offsetTop;
+                    let d = this.$refs.addImgContainer.offsetHeight;
+                    let bottomOffset = p + 44 - d;
+                    if (bottomOffset >= 0) {
+                        this.bottomOffset = 0;
+                    } else {
+                        this.bottomOffset = bottomOffset;
+                    }
+                })
             } else {
                 this.$store.commit('SETSHOWVIEW', 0)
             }
@@ -340,7 +352,6 @@ export default {
         }
         .li-style {
             margin-left: 28px;
-            // padding: 9px 6px;
             cursor: pointer;
             .circle {
                 width: 6px;
@@ -408,15 +419,12 @@ export default {
                     }
                     .additional-box {
                         position: relative;
+                        margin-top: 8px;
                         .additional,
                         .additional2 {
                             width: 44px;
                             height: 44px;
                             border-radius: 2px;
-                            position: fixed;
-                            right: 32px;
-                            top: 528px;
-                            z-index: 2;
                             display: flex;
                             justify-content: center;
                             align-items: center;
@@ -436,28 +444,26 @@ export default {
                         }
                         .add-img-container {
                             width: 560px;
-                            height: 360px;
-                            // max-height: calc(100% - 60px);
-                            // height: calc(100% - 60px);
-                            overflow: auto;
+                            max-height: 768px;
+                            overflow-y: auto;
                             background: #ffffff;
                             -webkit-box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.06);
                             box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.06);
                             border-radius: 2px;
                             border: 1px solid #e4e5e7;
                             position: absolute;
-                            right: 77px;
-                            bottom: 325px;
-                            z-index: 2;
+                            right: 48px;
+                            bottom: 0;
                             padding: 20px;
+                            &::-webkit-scrollbar {
+                                display: none;
+                            }
                             .add-img {
-                                // padding: 0;
                                 width: 100%;
                                 height: 100%;
-                                overflow: scroll;
+                                overflow: hidden;
                                 img {
                                     width: 100%;
-                                    // max-height: 100%;
                                     display: block;
                                     margin: 0 auto;
                                 }
@@ -469,11 +475,14 @@ export default {
         }
     }
 }
-@media screen and (max-width: 1366px) {
+@media screen and (max-width: 1600px) {
     /*当屏幕尺寸小于1366px时,应用下面的CSS样式*/
     .eq-top {
         margin-left: 0 !important;
     }
+    #equipment .eq-bottom .eq-right .eq-right-bottom .eq-content .additional-box .add-img-container {
+        max-height: 546px;
+    }
 }
 </style>
 <style lang="less">

+ 2 - 2
src/views/floorFunc/index.vue

@@ -3,12 +3,12 @@
         <div class='lcgn-title'>
             <span class='span1'>{{floorInfo.code}}</span>
         </div>
+        <floorMap ref='floorMap' :loadName='loadName' :type='"floor"'></floorMap>
         <!-- 图例 -->
         <div class='legend-boxs'>
             <Legend :floors='floorsArr' type='1' :editTips='`编辑${floorInfo.code}层楼层功能平面图`'></Legend>
+            <floor-list v-if='floorsArr.length>0' :floorsArr='floorsArr' :type='1' @emitFloor='emitFloor' :id='"floor"'></floor-list>
         </div>
-        <floor-list v-if='floorsArr.length>0' :floorsArr='floorsArr' :type='1' @emitFloor='emitFloor' :id='"floor"'></floor-list>
-        <floorMap ref='floorMap' :loadName='loadName' :type='"floor"'></floorMap>
     </div>
 </template>
 <script>