guoxiaohuan 5 년 전
부모
커밋
c0fec334d7

BIN
src/components/Rotation/src/3440.jpg


+ 4 - 4
src/components/Rotation/src/rotation.vue

@@ -4,13 +4,14 @@
 *@info:图片轮播
 */
 <template>
-    <div class='rotation' :class='{rotationFull:type}'>
+    <div :class='[type?"rotationFull":"rotation"]'>
         <div v-if='rotationImg.length==1' class='rotationCon'>
             <!-- <img
                 src='https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1592807833&di=5adf17cda9f46c37696da5b1d0aec9dc&src=http://a3.att.hudong.com/14/75/01300000164186121366756803686.jpg'
                 alt
             />-->
             <img :src='rotationImg[0].url' alt />
+            <!-- <img src='./3440.jpg' alt /> -->
         </div>
         <el-carousel v-else trigger='click' style='height:100%' :interval='5000' arrow='always'>
             <el-carousel-item v-for='(item,index) in rotationImg' :key='index'>
@@ -57,7 +58,7 @@ export default {
 .rotationFull {
     width: 100%;
     height: 100%;
-    overflow: hidden;
+    overflow: auto;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -71,8 +72,7 @@ export default {
         // max-height: 100%;
         // display: block;
         // margin: auto;
-        width: 100%;
-        height: 100%;
+        min-width: 100%;
     }
 }
 </style>

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

@@ -108,6 +108,7 @@ export default {
                         this.fParser.parseData(res)
                         this.fParser.spaceList.forEach(t => {
                             this.scene.addItem(t)
+                            t.nameSize = 16
                             if (t.data.Name && this.bunkObj[t.data.Name]) {
                                 t.name = this.bunkObj[t.data.Name].detailtype
                             } else {

+ 93 - 94
src/lib/items/SFHFQZoneLegendItem.js

@@ -1,7 +1,7 @@
-import { 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 { 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(区域类型 --防火分区)
  *
@@ -15,174 +15,173 @@ export class SFHFQZoneLegendItem extends SPolygonItem {
      * @param data      图例节点对象数据
      */
     constructor(parent, data) {
-        super(parent);
+        super(parent)
         /** text item   */
-        this.textItem = new STextItem(this);
+        this.textItem = new STextItem(this)
         /** 是否显示文字  */
-        this._showText = true;
+        this._showText = true
         /** 是否蒙版遮罩  */
-        this._maskFlag = false;
-        this.textItem.isTransform = false;
-        this.zOrder = ItemOrder.polygonOrder;
-        this.data = data;
-        this.id = data.ID;
-        this.name = data.Name;
-        this.text = data.Name;
+        this._maskFlag = false
+        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;
+            this.setPointList = []
+            let setPointList
             if (data.OutLine) {
                 if (data.OutLine[0] instanceof SPoint) {
-                    this.setPointList = data.OutLine;
-                }
-                else {
-                    setPointList = data.OutLine.map(i => {
-                        return (new SPoint(i.X, i.Y));
-                    });
-                    this.setPointList = setPointList;
+                    this.setPointList = data.OutLine
+                } else {
+                    setPointList = data.OutLine.map((i) => {
+                        return new SPoint(i.X, i.Y)
+                    })
+                    this.setPointList = setPointList
                 }
             }
             // 设置线宽
             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.LineDash){
             //     this.LineDash =this._legend.Properties.LineDash
             //    }
         }
         // 监听多边形创建完成事件,并动态计算文本位置
-        this.connect("finishCreated", this, () => {
+        this.connect('finishCreated', this, () => {
             // 计算文本位置
             let x = this.getPointList.reduce((pre, cur, index, arr) => {
-                return pre + (cur.x / arr.length);
-            }, 0), y = this.getPointList.reduce((pre, cur, index, arr) => {
-                return pre + (cur.y / arr.length);
-            }, 0);
-            this.textItem.moveTo(x, y);
-        });
+                    return pre + cur.x / arr.length
+                }, 0),
+                y = this.getPointList.reduce((pre, cur, index, arr) => {
+                    return pre + cur.y / arr.length
+                }, 0)
+            this.textItem.moveTo(x, y)
+        })
     }
     get text() {
-        return this.textItem.text;
+        return this.textItem.text
     }
     set text(v) {
-        this.textItem.text = v;
-        this.update();
+        this.textItem.text = v
+        this.update()
     }
     get color() {
-        return this.textItem.color;
+        return this.textItem.color
     }
     set color(v) {
-        this.textItem.color = v;
+        this.textItem.color = v
     }
     get font() {
-        return this.textItem.font;
+        return this.textItem.font
     }
     set font(v) {
-        this.textItem.font = v;
+        this.textItem.font = v
     }
     get status() {
-        return this._status;
+        return this._status
     }
     // 编辑当前状态
     set status(value) {
-        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) {
+        } else if (value == SItemStatus.Edit) {
             // 切换编辑状态显示文本
-            this.showText = true;
+            this.showText = true
             // 切换编辑状态可移动文本
-            this.textItem.moveable = true;
-        }
-        else if (value == SItemStatus.Create) {
+            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()
     }
-    ;
     get showText() {
-        return this._showText;
+        return this._showText
     }
     set showText(v) {
         if (v === this._showText) {
-            return;
+            return
         }
-        this._showText = v;
+        this._showText = v
         if (v) {
-            this.textItem.show();
-        }
-        else {
-            this.textItem.hide();
+            this.textItem.show()
+        } else {
+            this.textItem.hide()
         }
     }
     get maskFlag() {
-        return this._maskFlag;
+        return this._maskFlag
     }
     set maskFlag(v) {
         if (v === this._maskFlag) {
-            return;
+            return
         }
-        this._maskFlag = v;
-        this.update();
+        this._maskFlag = v
+        this.update()
     }
     toData() {
-        this.data.Pos = { X: this.x, Y: this.y };
-        this.data.Name = this.text;
-        this.data.Properties.FillColor = this.fillColor.value;
-        this.data.Properties.StrokeColor = this.strokeColor.value;
-        this.data.Properties.LineWidth = this.lineWidth;
-        this.data.OutLine = this.getPointList.map(pos => {
+        this.data.Pos = { X: this.x, Y: this.y }
+        this.data.Name = this.text
+        this.data.Properties.FillColor = this.fillColor.value
+        this.data.Properties.StrokeColor = this.strokeColor.value
+        this.data.Properties.LineWidth = this.lineWidth
+        this.data.OutLine = this.getPointList.map((pos) => {
             return {
                 X: pos.x,
-                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;
+                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
     }
     onDraw(painter) {
         if (this.maskFlag && this.status == SItemStatus.Normal) {
-            let color = new SColor(this.strokeColor);
-            color.alpha = 100;
-            let brushcolor = new SColor(this.fillColor);
-            brushcolor.alpha = 100;
-            painter.pen.color = color;
-            painter.pen.lineCapStyle = SLineCapStyle.Square;
-            painter.pen.lineWidth = painter.toPx(this._lineWidth);
-            painter.brush.color = brushcolor;
+            let color = new SColor(this.strokeColor)
+            color.alpha = color.alpha / 2
+            let brushcolor = new SColor(this.fillColor)
+            brushcolor.alpha = brushcolor.alpha / 2
+            painter.pen.color = color
+            painter.pen.lineCapStyle = SLineCapStyle.Square
+            painter.pen.lineWidth = painter.toPx(this._lineWidth)
+            painter.brush.color = brushcolor
             // @ts-ignore
-            painter.drawPolygon([...this.pointList]);
-        }
-        else {
-            super.onDraw(painter);
+            painter.drawPolygon([...this.pointList])
+        } else {
+            super.onDraw(painter)
         }
     }
 } // Class SZoneLegendItem

+ 97 - 94
src/lib/items/SFHFQZoneLegendItem.ts

@@ -1,10 +1,9 @@
-
-import { SGraphItem, SLineStyle } 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 { SGraphItem, SLineStyle } 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(区域类型 --防火分区)
  *
@@ -12,23 +11,23 @@ import { SItemStatus, ItemOrder, SPolygonItem } from '@saga-web/big/lib';
  */
 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
@@ -38,62 +37,62 @@ 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()
+    }
 
     /** 是否显示文字  */
-    _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,24 +103,24 @@ 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.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) {
-                    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
                 }
             }
             // 设置线宽
@@ -129,92 +128,96 @@ export class SFHFQZoneLegendItem extends SPolygonItem {
                 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)
             }
             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.text;
-        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.text
+        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
+        return this.data
     }
 
     onDraw(painter: SPainter) {
         if (this.maskFlag && this.status == SItemStatus.Normal) {
             let color = new SColor(this.strokeColor)
-            color.alpha = 100;
+            color.alpha = color.alpha / 2
             let brushcolor = new SColor(this.fillColor)
-            brushcolor.alpha = 100;
-            painter.pen.color = color;
-            painter.pen.lineCapStyle = SLineCapStyle.Square;
-            painter.pen.lineWidth = painter.toPx(this._lineWidth);
-            painter.brush.color = brushcolor;
+            brushcolor.alpha = brushcolor.alpha / 2
+            painter.pen.color = color
+            painter.pen.lineCapStyle = SLineCapStyle.Square
+            painter.pen.lineWidth = painter.toPx(this._lineWidth)
+            painter.brush.color = brushcolor
             // @ts-ignore
-            painter.drawPolygon([...this.pointList]);
+            painter.drawPolygon([...this.pointList])
         } else {
-            super.onDraw(painter);
+            super.onDraw(painter)
         }
     }
 } // Class SZoneLegendItem

+ 54 - 63
src/lib/items/SLineMarkerItem.js

@@ -1,6 +1,6 @@
-import { SLineStyle } from "@saga-web/graph/lib";
-import { SPoint, SColor } from "@saga-web/draw/lib";
-import { ItemOrder, SLineItem, SItemStatus } from '@saga-web/big/lib';
+import { SLineStyle } from '@saga-web/graph/lib'
+import { SPoint, SColor } from '@saga-web/draw/lib'
+import { ItemOrder, SLineItem, SItemStatus } from '@saga-web/big/lib'
 /**
  * 标识对象Item(线类型)
  *
@@ -14,116 +14,107 @@ export class SLineMarkerItem extends SLineItem {
      * @param data      标识对象数据
      */
     constructor(parent, data) {
-        super(parent);
+        super(parent)
         /** 起始锚点  */
-        this.startItem = null;
+        this.startItem = null
         /** 结束锚点  */
-        this.endItem = null;
+        this.endItem = null
         /** 是否蒙版遮罩  */
-        this._maskFlag = false;
-        this.zOrder = ItemOrder.lineOrder;
-        this.data = data;
-        this.id = data.ID;
-        this.name = data.Name;
-        this.moveTo(data.Pos.X, data.Pos.Y);
+        this._maskFlag = false
+        this.zOrder = ItemOrder.lineOrder
+        this.data = data
+        this.id = data.ID
+        this.name = data.Name
+        this.moveTo(data.Pos.X, data.Pos.Y)
         if (data.Properties && data.Properties.Line) {
-            let setPointList;
-            setPointList = data.Properties.Line.map(i => {
-                return new SPoint(i.X, i.Y);
-            });
-            this.line = setPointList;
+            let setPointList
+            setPointList = data.Properties.Line.map((i) => {
+                return new SPoint(i.X, i.Y)
+            })
+            this.line = setPointList
         }
         if (data.Properties && data.Properties.LineWidth) {
-            this.lineWidth = data.Properties.LineWidth;
+            this.lineWidth = data.Properties.LineWidth
         }
         if (data.Properties && data.Properties.LineStyle) {
-            this.lineStyle = data.Properties.LineStyle;
+            this.lineStyle = data.Properties.LineStyle
         }
         if (data.Properties && data.Properties.StrokeColor) {
-            this.strokeColor = new SColor(data.Properties.StrokeColor);
+            this.strokeColor = new SColor(data.Properties.StrokeColor)
         }
     } // Constructor
     /** 是否完成绘制  */
     get status() {
-        return this._status;
+        return this._status
     }
     set status(v) {
-        this._status = v;
+        this._status = v
         if (v == SItemStatus.Edit) {
-            this.zOrder = ItemOrder.markOrder;
+            this.zOrder = ItemOrder.markOrder
+        } else {
+            this.zOrder = ItemOrder.lineOrder
         }
-        else {
-            this.zOrder = ItemOrder.lineOrder;
-        }
-        this.update();
+        this.update()
     }
     get maskFlag() {
-        return this._maskFlag;
+        return this._maskFlag
     }
     set maskFlag(v) {
         if (v === this._maskFlag) {
-            return;
+            return
         }
-        this._maskFlag = v;
-        this.update();
+        this._maskFlag = v
+        this.update()
     }
     /** 接收事件作出修改  */
     changePos() {
         if (this.startItem) {
             // 判断删除equip后,不移动
             if (this.startItem.parent) {
-                let scenePoint = this.startItem.boundingRect().center();
-                this.line[0] = this.startItem.mapToScene(scenePoint.x, scenePoint.y);
+                let scenePoint = this.startItem.boundingRect().center()
+                this.line[0] = this.startItem.mapToScene(scenePoint.x, scenePoint.y)
             }
         }
         if (this.endItem) {
             // 删除equip后
             if (this.endItem.parent) {
-                let scenePoint = this.endItem.boundingRect().center();
-                this.line[1] = this.endItem.mapToScene(scenePoint.x, scenePoint.y);
+                let scenePoint = this.endItem.boundingRect().center()
+                this.line[1] = this.endItem.mapToScene(scenePoint.x, scenePoint.y)
             }
         }
     }
     toData() {
-        this.data.Pos = { X: this.x, Y: this.y };
-        this.data.Properties.Line = this.line.map(pos => {
+        this.data.Pos = { X: this.x, Y: this.y }
+        this.data.Properties.Line = this.line.map((pos) => {
             return {
                 X: pos.x,
-                Y: pos.y
-            };
-        });
-        this.data.Properties.LineWidth = this.lineWidth;
-        this.data.Properties.StrokeColor = this.strokeColor.value;
-        this.data.Properties.LineStyle = this.lineStyle;
+                Y: pos.y,
+            }
+        })
+        this.data.Properties.LineWidth = this.lineWidth
+        this.data.Properties.StrokeColor = this.strokeColor.value
+        this.data.Properties.LineStyle = this.lineStyle
         if (this.startItem && this.startItem.parent) {
-            this.data.Properties.StartItemId = this.startItem.id;
+            this.data.Properties.StartItemId = this.startItem.id
         }
         if (this.endItem && this.endItem.parent) {
-            this.data.Properties.EndItemId = this.endItem.id;
+            this.data.Properties.EndItemId = this.endItem.id
         }
-        return this.data;
+        return this.data
     }
     onDraw(painter) {
         if (this.maskFlag && this.status == SItemStatus.Normal) {
-            let color = new SColor(this.strokeColor);
-            color.alpha = 100;
-            painter.pen.color = new SColor(this.strokeColor);
+            let color = new SColor(this.strokeColor)
+            color.alpha = color.alpha / 2
+            painter.pen.color = new SColor(this.strokeColor)
             if (this.lineStyle == SLineStyle.Dashed) {
-                painter.pen.lineDash = [
-                    painter.toPx(this.lineWidth * 3),
-                    painter.toPx(this.lineWidth * 7)
-                ];
+                painter.pen.lineDash = [painter.toPx(this.lineWidth * 3), painter.toPx(this.lineWidth * 7)]
+            } else if (this.lineStyle == SLineStyle.Dotted) {
+                painter.pen.lineDash = [painter.toPx(this.lineWidth), painter.toPx(this.lineWidth)]
             }
-            else if (this.lineStyle == SLineStyle.Dotted) {
-                painter.pen.lineDash = [
-                    painter.toPx(this.lineWidth),
-                    painter.toPx(this.lineWidth)
-                ];
-            }
-            painter.drawLine(this.line[0], this.line[1]);
-        }
-        else {
-            super.onDraw(painter);
+            painter.drawLine(this.line[0], this.line[1])
+        } else {
+            super.onDraw(painter)
         }
     }
 } // Class SLineMarkerItem

+ 50 - 58
src/lib/items/SLineMarkerItem.ts

@@ -1,8 +1,7 @@
-
-import { SGraphItem, SLineStyle } from "@saga-web/graph/lib";
-import { SPoint, SPainter, SColor, SLineCapStyle } from "@saga-web/draw/lib";
-import { ItemOrder, SLineItem, SItemStatus } from '@saga-web/big/lib';
-import { Marker } from '../types/Marker';
+import { SGraphItem, SLineStyle } from '@saga-web/graph/lib'
+import { SPoint, SPainter, SColor, SLineCapStyle } from '@saga-web/draw/lib'
+import { ItemOrder, SLineItem, SItemStatus } from '@saga-web/big/lib'
+import { Marker } from '../types/Marker'
 
 /**
  * 标识对象Item(线类型)
@@ -10,38 +9,38 @@ import { Marker } from '../types/Marker';
  * * @author  张宇(taohuzy@163.com)
  */
 export class SLineMarkerItem extends SLineItem {
-     /** 起始锚点  */
-    startItem: SGraphItem | null = null;
+    /** 起始锚点  */
+    startItem: SGraphItem | null = null
     /** 结束锚点  */
-    endItem: SGraphItem | null = null;
+    endItem: SGraphItem | null = null
 
     /** 标识对象数据 */
-    data: Marker;
+    data: Marker
 
     /** 是否完成绘制  */
     get status(): SItemStatus {
-        return this._status;
+        return this._status
     }
     set status(v: SItemStatus) {
-        this._status = v;
+        this._status = v
         if (v == SItemStatus.Edit) {
-            this.zOrder = ItemOrder.markOrder;
+            this.zOrder = ItemOrder.markOrder
         } else {
-            this.zOrder = ItemOrder.lineOrder;
+            this.zOrder = ItemOrder.lineOrder
         }
-        this.update();
+        this.update()
     }
 
     /** 是否蒙版遮罩  */
-    _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()
     }
 
@@ -52,27 +51,27 @@ export class SLineMarkerItem extends SLineItem {
      * @param data      标识对象数据
      */
     constructor(parent: SGraphItem | null, data: Marker) {
-        super(parent);
-        this.zOrder = ItemOrder.lineOrder;
-        this.data = data;
-        this.id = data.ID;
-        this.name = data.Name;
-        this.moveTo(data.Pos.X, data.Pos.Y);
+        super(parent)
+        this.zOrder = ItemOrder.lineOrder
+        this.data = data
+        this.id = data.ID
+        this.name = data.Name
+        this.moveTo(data.Pos.X, data.Pos.Y)
         if (data.Properties && data.Properties.Line) {
-            let setPointList: SPoint[];
-            setPointList = data.Properties.Line.map(i => {
+            let setPointList: SPoint[]
+            setPointList = data.Properties.Line.map((i) => {
                 return new SPoint(i.X, i.Y)
             })
-            this.line = setPointList;
+            this.line = setPointList
         }
         if (data.Properties && data.Properties.LineWidth) {
-            this.lineWidth = data.Properties.LineWidth;
+            this.lineWidth = data.Properties.LineWidth
         }
         if (data.Properties && data.Properties.LineStyle) {
-            this.lineStyle = data.Properties.LineStyle;
+            this.lineStyle = data.Properties.LineStyle
         }
         if (data.Properties && data.Properties.StrokeColor) {
-            this.strokeColor = new SColor(data.Properties.StrokeColor);
+            this.strokeColor = new SColor(data.Properties.StrokeColor)
         }
     } // Constructor
 
@@ -81,59 +80,52 @@ export class SLineMarkerItem extends SLineItem {
         if (this.startItem) {
             // 判断删除equip后,不移动
             if (this.startItem.parent) {
-                let scenePoint: SPoint = this.startItem.boundingRect().center();
-                this.line[0] = this.startItem.mapToScene(scenePoint.x, scenePoint.y);
+                let scenePoint: SPoint = this.startItem.boundingRect().center()
+                this.line[0] = this.startItem.mapToScene(scenePoint.x, scenePoint.y)
             }
         }
         if (this.endItem) {
             // 删除equip后
             if (this.endItem.parent) {
-                let scenePoint: SPoint = this.endItem.boundingRect().center();
-                this.line[1] = this.endItem.mapToScene(scenePoint.x, scenePoint.y);
+                let scenePoint: SPoint = this.endItem.boundingRect().center()
+                this.line[1] = this.endItem.mapToScene(scenePoint.x, scenePoint.y)
             }
         }
     }
 
     toData(): Marker {
-        this.data.Pos = { X: this.x, Y: this.y };
-        this.data.Properties.Line = this.line.map(pos => {
+        this.data.Pos = { X: this.x, Y: this.y }
+        this.data.Properties.Line = this.line.map((pos) => {
             return {
                 X: pos.x,
-                Y: pos.y
+                Y: pos.y,
             }
-        });
-        this.data.Properties.LineWidth = this.lineWidth;
-        this.data.Properties.StrokeColor = this.strokeColor.value;
-        this.data.Properties.LineStyle = this.lineStyle;
+        })
+        this.data.Properties.LineWidth = this.lineWidth
+        this.data.Properties.StrokeColor = this.strokeColor.value
+        this.data.Properties.LineStyle = this.lineStyle
         if (this.startItem && this.startItem.parent) {
-            this.data.Properties.StartItemId = this.startItem.id;
+            this.data.Properties.StartItemId = this.startItem.id
         }
         if (this.endItem && this.endItem.parent) {
-            this.data.Properties.EndItemId = this.endItem.id;
+            this.data.Properties.EndItemId = this.endItem.id
         }
-        return this.data;
+        return this.data
     }
 
     onDraw(painter: SPainter) {
         if (this.maskFlag && this.status == SItemStatus.Normal) {
-            let color = new SColor(this.strokeColor);
-            color.alpha = 100;
-            painter.pen.color = new SColor(this.strokeColor);
+            let color = new SColor(this.strokeColor)
+            color.alpha = color.alpha / 2
+            painter.pen.color = new SColor(this.strokeColor)
             if (this.lineStyle == SLineStyle.Dashed) {
-                painter.pen.lineDash = [
-                    painter.toPx(this.lineWidth * 3),
-                    painter.toPx(this.lineWidth * 7)
-                ];
-            }
-            else if (this.lineStyle == SLineStyle.Dotted) {
-                painter.pen.lineDash = [
-                    painter.toPx(this.lineWidth),
-                    painter.toPx(this.lineWidth)
-                ];
+                painter.pen.lineDash = [painter.toPx(this.lineWidth * 3), painter.toPx(this.lineWidth * 7)]
+            } else if (this.lineStyle == SLineStyle.Dotted) {
+                painter.pen.lineDash = [painter.toPx(this.lineWidth), painter.toPx(this.lineWidth)]
             }
-            painter.drawLine(this.line[0], this.line[1]);
+            painter.drawLine(this.line[0], this.line[1])
         } else {
-            super.onDraw(painter);
+            super.onDraw(painter)
         }
     }
 } // Class SLineMarkerItem

+ 95 - 96
src/lib/items/SSCPZZoneLegendItem.js

@@ -1,7 +1,7 @@
-import { 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 { 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(区域类型 --石材铺装)
  *
@@ -15,181 +15,180 @@ export class SSCPZZoneLegendItem extends SPolygonItem {
      * @param data      图例节点对象数据
      */
     constructor(parent, data) {
-        super(parent);
+        super(parent)
         /** text item   */
-        this.textItem = new STextItem(this);
+        this.textItem = new STextItem(this)
         /** 是否显示文字  */
-        this._showText = true;
+        this._showText = true
         /** 是否蒙版遮罩  */
-        this._maskFlag = false;
-        this.textItem.isTransform = false;
-        this.zOrder = ItemOrder.polygonOrder;
-        this.data = data;
-        this.id = data.ID;
-        this.name = data.Name;
-        this.text = data.Name;
+        this._maskFlag = false
+        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;
+            this.setPointList = []
+            let setPointList
             if (data.OutLine) {
                 if (data.OutLine[0] instanceof SPoint) {
-                    this.setPointList = data.OutLine;
-                }
-                else {
-                    setPointList = data.OutLine.map(i => {
-                        return (new SPoint(i.X, i.Y));
-                    });
-                    this.setPointList = setPointList;
+                    this.setPointList = data.OutLine
+                } else {
+                    setPointList = data.OutLine.map((i) => {
+                        return new SPoint(i.X, i.Y)
+                    })
+                    this.setPointList = setPointList
                 }
             }
             // 设置线宽
             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.LineDash){
             //     this.LineDash =this._legend.Properties.LineDash
             //    }
         }
         // 监听多边形创建完成事件,并动态计算文本位置
-        this.connect("finishCreated", this, () => {
+        this.connect('finishCreated', this, () => {
             // 计算文本位置
             let x = this.getPointList.reduce((pre, cur, index, arr) => {
-                return pre + (cur.x / arr.length);
-            }, 0), y = this.getPointList.reduce((pre, cur, index, arr) => {
-                return pre + (cur.y / arr.length);
-            }, 0);
-            this.textItem.moveTo(x, y);
-        });
+                    return pre + cur.x / arr.length
+                }, 0),
+                y = this.getPointList.reduce((pre, cur, index, arr) => {
+                    return pre + cur.y / arr.length
+                }, 0)
+            this.textItem.moveTo(x, y)
+        })
     }
     get text() {
-        return this.textItem.text;
+        return this.textItem.text
     }
     set text(v) {
-        this.textItem.text = v;
-        this.update();
+        this.textItem.text = v
+        this.update()
     }
     get color() {
-        return this.textItem.color;
+        return this.textItem.color
     }
     set color(v) {
-        this.textItem.color = v;
+        this.textItem.color = v
     }
     get font() {
-        return this.textItem.font;
+        return this.textItem.font
     }
     set font(v) {
-        this.textItem.font = v;
+        this.textItem.font = v
     }
     get status() {
-        return this._status;
+        return this._status
     }
     // 编辑当前状态
     set status(value) {
-        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) {
+        } else if (value == SItemStatus.Edit) {
             // 切换编辑状态显示文本
-            this.showText = true;
+            this.showText = true
             // 切换编辑状态可移动文本
-            this.textItem.moveable = true;
-        }
-        else if (value == SItemStatus.Create) {
+            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()
     }
-    ;
     get showText() {
-        return this._showText;
+        return this._showText
     }
     set showText(v) {
         if (v === this._showText) {
-            return;
+            return
         }
-        this._showText = v;
+        this._showText = v
         if (v) {
-            this.textItem.show();
-        }
-        else {
-            this.textItem.hide();
+            this.textItem.show()
+        } else {
+            this.textItem.hide()
         }
     }
     get maskFlag() {
-        return this._maskFlag;
+        return this._maskFlag
     }
     set maskFlag(v) {
         if (v === this._maskFlag) {
-            return;
+            return
         }
-        this._maskFlag = v;
-        this.update();
+        this._maskFlag = v
+        this.update()
     }
     /** 图例说明  */
     set itemExplain(v) {
-        this.data.Properties.ItemExplain = v;
+        this.data.Properties.ItemExplain = v
     }
     get itemExplain() {
-        return this.data.Properties.ItemExplain;
+        return this.data.Properties.ItemExplain
     }
     toData() {
-        this.data.Pos = { X: this.x, Y: this.y };
-        this.data.Name = this.text;
-        this.data.Properties.FillColor = this.fillColor.value;
-        this.data.Properties.StrokeColor = this.strokeColor.value;
-        this.data.Properties.LineWidth = this.lineWidth;
-        this.data.OutLine = this.getPointList.map(pos => {
+        this.data.Pos = { X: this.x, Y: this.y }
+        this.data.Name = this.text
+        this.data.Properties.FillColor = this.fillColor.value
+        this.data.Properties.StrokeColor = this.strokeColor.value
+        this.data.Properties.LineWidth = this.lineWidth
+        this.data.OutLine = this.getPointList.map((pos) => {
             return {
                 X: pos.x,
-                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;
+                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
     }
     onDraw(painter) {
         if (this.maskFlag && this.status == SItemStatus.Normal) {
-            let color = new SColor(this.strokeColor);
-            color.alpha = 100;
-            let brushcolor = new SColor(this.fillColor);
-            brushcolor.alpha = 100;
-            painter.pen.color = color;
-            painter.pen.lineCapStyle = SLineCapStyle.Square;
-            painter.pen.lineWidth = painter.toPx(this._lineWidth);
-            painter.brush.color = brushcolor;
+            let color = new SColor(this.strokeColor)
+            color.alpha = color.alpha / 2
+            let brushcolor = new SColor(this.fillColor)
+            brushcolor.alpha = brushcolor.alpha / 2
+            painter.pen.color = color
+            painter.pen.lineCapStyle = SLineCapStyle.Square
+            painter.pen.lineWidth = painter.toPx(this._lineWidth)
+            painter.brush.color = brushcolor
             // @ts-ignore
-            painter.drawPolygon([...this.pointList]);
-        }
-        else {
-            super.onDraw(painter);
+            painter.drawPolygon([...this.pointList])
+        } else {
+            super.onDraw(painter)
         }
     }
 } // Class SZoneLegendItem

+ 97 - 94
src/lib/items/SSCPZZoneLegendItem.ts

@@ -1,10 +1,9 @@
-
-import { SGraphItem, SLineStyle } 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 { SGraphItem, SLineStyle } 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(区域类型 --石材铺装)
  *
@@ -12,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
@@ -38,62 +37,62 @@ 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()
+    }
 
     /** 是否显示文字  */
-    _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()
     }
 
@@ -112,24 +111,24 @@ 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.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) {
-                    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
                 }
             }
             // 设置线宽
@@ -137,92 +136,96 @@ export class SSCPZZoneLegendItem extends SPolygonItem {
                 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)
             }
             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.text;
-        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.text
+        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
+        return this.data
     }
 
     onDraw(painter: SPainter) {
         if (this.maskFlag && this.status == SItemStatus.Normal) {
             let color = new SColor(this.strokeColor)
-            color.alpha = 100;
+            color.alpha = color.alpha / 2
             let brushcolor = new SColor(this.fillColor)
-            brushcolor.alpha = 100;
-            painter.pen.color = color;
-            painter.pen.lineCapStyle = SLineCapStyle.Square;
-            painter.pen.lineWidth = painter.toPx(this._lineWidth);
-            painter.brush.color = brushcolor;
+            brushcolor.alpha = brushcolor.alpha / 2
+            painter.pen.color = color
+            painter.pen.lineCapStyle = SLineCapStyle.Square
+            painter.pen.lineWidth = painter.toPx(this._lineWidth)
+            painter.brush.color = brushcolor
             // @ts-ignore
-            painter.drawPolygon([...this.pointList]);
+            painter.drawPolygon([...this.pointList])
         } else {
-            super.onDraw(painter);
+            super.onDraw(painter)
         }
     }
 } // Class SZoneLegendItem

+ 93 - 94
src/lib/items/SZoneLegendItem.js

@@ -1,7 +1,7 @@
-import { 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 { 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(区域类型)
  *
@@ -15,175 +15,174 @@ export class SZoneLegendItem extends SPolygonItem {
      * @param data      图例节点对象数据
      */
     constructor(parent, data) {
-        super(parent);
+        super(parent)
         /** text item   */
-        this.textItem = new STextItem(this);
+        this.textItem = new STextItem(this)
         /** 是否显示文字  */
-        this._showText = true;
+        this._showText = true
         /** 是否蒙版遮罩  */
-        this._maskFlag = false;
-        this.textItem.isTransform = false;
-        this.zOrder = ItemOrder.polygonOrder;
-        this.data = data;
-        this.id = data.ID;
-        this.name = data.Name;
-        this.text = data.Name;
+        this._maskFlag = false
+        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;
+            this.setPointList = []
+            let setPointList
             if (data.OutLine) {
                 if (data.OutLine[0] instanceof SPoint) {
                     // @ts-ignore
-                    this.setPointList = data.OutLine;
-                }
-                else {
-                    setPointList = data.OutLine.map(i => {
-                        return (new SPoint(i.X, i.Y));
-                    });
-                    this.setPointList = setPointList;
+                    this.setPointList = data.OutLine
+                } else {
+                    setPointList = data.OutLine.map((i) => {
+                        return new SPoint(i.X, i.Y)
+                    })
+                    this.setPointList = setPointList
                 }
             }
             // 设置线宽
             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.LineDash){
             //     this.LineDash =this._legend.Properties.LineDash
             //    }
         }
         // 监听多边形创建完成事件,并动态计算文本位置
-        this.connect("finishCreated", this, () => {
+        this.connect('finishCreated', this, () => {
             // 计算文本位置
             let x = this.getPointList.reduce((pre, cur, index, arr) => {
-                return pre + (cur.x / arr.length);
-            }, 0), y = this.getPointList.reduce((pre, cur, index, arr) => {
-                return pre + (cur.y / arr.length);
-            }, 0);
-            this.textItem.moveTo(x, y);
-        });
+                    return pre + cur.x / arr.length
+                }, 0),
+                y = this.getPointList.reduce((pre, cur, index, arr) => {
+                    return pre + cur.y / arr.length
+                }, 0)
+            this.textItem.moveTo(x, y)
+        })
     }
     get text() {
-        return this.textItem.text;
+        return this.textItem.text
     }
     set text(v) {
-        this.textItem.text = v;
-        this.update();
+        this.textItem.text = v
+        this.update()
     }
     get color() {
-        return this.textItem.color;
+        return this.textItem.color
     }
     set color(v) {
-        this.textItem.color = v;
+        this.textItem.color = v
     }
     get font() {
-        return this.textItem.font;
+        return this.textItem.font
     }
     set font(v) {
-        this.textItem.font = v;
+        this.textItem.font = v
     }
     get status() {
-        return this._status;
+        return this._status
     }
     // 编辑当前状态
     set status(value) {
-        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) {
+        } else if (value == SItemStatus.Edit) {
             // 切换编辑状态显示文本
-            this.showText = true;
+            this.showText = true
             // 切换编辑状态可移动文本
-            this.textItem.moveable = true;
-        }
-        else if (value == SItemStatus.Create) {
+            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()
     }
-    ;
     get showText() {
-        return this._showText;
+        return this._showText
     }
     set showText(v) {
         if (v === this._showText) {
-            return;
+            return
         }
-        this._showText = v;
+        this._showText = v
         if (v) {
-            this.textItem.show();
-        }
-        else {
-            this.textItem.hide();
+            this.textItem.show()
+        } else {
+            this.textItem.hide()
         }
     }
     get maskFlag() {
-        return this._maskFlag;
+        return this._maskFlag
     }
     set maskFlag(v) {
         if (v === this._maskFlag) {
-            return;
+            return
         }
-        this._maskFlag = v;
-        this.update();
+        this._maskFlag = v
+        this.update()
     }
     toData() {
-        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.OutLine = this.getPointList.map(pos => {
+        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.OutLine = this.getPointList.map((pos) => {
             return {
                 X: pos.x,
-                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;
+                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
     }
     onDraw(painter) {
         if (this.maskFlag && this.status == SItemStatus.Normal) {
-            let color = new SColor(this.strokeColor);
-            color.alpha = 100;
-            let brushcolor = new SColor(this.fillColor);
-            brushcolor.alpha = 100;
-            painter.pen.color = color;
-            painter.pen.lineCapStyle = SLineCapStyle.Square;
-            painter.pen.lineWidth = painter.toPx(this._lineWidth);
-            painter.brush.color = brushcolor;
+            let color = new SColor(this.strokeColor)
+            color.alpha = color.alpha / 2
+            let brushcolor = new SColor(this.fillColor)
+            brushcolor.alpha = brushcolor.alpha / 2
+            painter.pen.color = color
+            painter.pen.lineCapStyle = SLineCapStyle.Square
+            painter.pen.lineWidth = painter.toPx(this._lineWidth)
+            painter.brush.color = brushcolor
             // @ts-ignore
-            painter.drawPolygon([...this.pointList]);
-        }
-        else {
-            super.onDraw(painter);
+            painter.drawPolygon([...this.pointList])
+        } else {
+            super.onDraw(painter)
         }
     }
 } // Class SZoneLegendItem

+ 100 - 97
src/lib/items/SZoneLegendItem.ts

@@ -1,11 +1,10 @@
-
-import { SGraphItem, SLineStyle } 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";
+import { SGraphItem, SLineStyle } 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(区域类型)
  *
@@ -13,88 +12,88 @@ 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()
+    }
 
     /** 是否显示文字  */
-    _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()
     }
 
@@ -105,25 +104,25 @@ 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.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
                 }
             }
             // 设置线宽
@@ -131,92 +130,96 @@ export class SZoneLegendItem extends SPolygonItem {
                 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)
             }
             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.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
+        return this.data
     }
 
     onDraw(painter: SPainter) {
         if (this.maskFlag && this.status == SItemStatus.Normal) {
             let color = new SColor(this.strokeColor)
-            color.alpha = 100;
+            color.alpha = color.alpha / 2
             let brushcolor = new SColor(this.fillColor)
-            brushcolor.alpha = 100;
-            painter.pen.color = color;
-            painter.pen.lineCapStyle = SLineCapStyle.Square;
-            painter.pen.lineWidth = painter.toPx(this._lineWidth);
-            painter.brush.color = brushcolor;
+            brushcolor.alpha = brushcolor.alpha / 2
+            painter.pen.color = color
+            painter.pen.lineCapStyle = SLineCapStyle.Square
+            painter.pen.lineWidth = painter.toPx(this._lineWidth)
+            painter.brush.color = brushcolor
             // @ts-ignore
-            painter.drawPolygon([...this.pointList]);
+            painter.drawPolygon([...this.pointList])
         } else {
-            super.onDraw(painter);
+            super.onDraw(painter)
         }
     }
 } // Class SZoneLegendItem

+ 62 - 63
src/lib/items/TipelineItem.js

@@ -1,158 +1,157 @@
-import { SPolylineItem, ItemOrder, SItemStatus } from '@saga-web/big/lib';
-import { SColor } from '@saga-web/draw';
-import { SPoint } from "@saga-web/draw/lib";
+import { SPolylineItem, ItemOrder, SItemStatus } from '@saga-web/big/lib'
+import { SColor } from '@saga-web/draw'
+import { SPoint } from '@saga-web/draw/lib'
 /**
  * 管道item
  *
  * */
 export class TipelineItem extends SPolylineItem {
     constructor(parent, data) {
-        super(parent, []);
+        super(parent, [])
         /** 起始锚点  */
-        this.startAnchor = null;
+        this.startAnchor = null
         /** 结束锚点  */
-        this.endAnchor = null;
+        this.endAnchor = null
         /** 对应的图例ID  */
-        this._graphElementId = "";
+        this._graphElementId = ''
         /** 关联节点1ID  */
-        this._node1Id = "";
+        this._node1Id = ''
         /** 关联节点2ID  */
-        this._node2Id = "";
+        this._node2Id = ''
         /** 关联锚点1ID  */
-        this._anchor1ID = "";
+        this._anchor1ID = ''
         /** 关联锚点2ID  */
-        this._anchor2ID = "";
+        this._anchor2ID = ''
         /** 是否蒙版遮罩  */
-        this._maskFlag = false;
+        this._maskFlag = false
         /** 数据存储  */
-        this.data = null;
-        this.zOrder = ItemOrder.polylineOrder;
-        this.pointList = data.PointList.map(item => {
-            return new SPoint(item.X, item.Y);
-        });
-        this.data = data;
-        this.name = data.Name;
-        this.id = data.ID;
+        this.data = null
+        this.zOrder = ItemOrder.polylineOrder
+        this.pointList = data.PointList.map((item) => {
+            return new SPoint(item.X, item.Y)
+        })
+        this.data = data
+        this.name = data.Name
+        this.id = data.ID
         if (data.GraphElementId) {
-            this._graphElementId = data.GraphElementId;
+            this._graphElementId = data.GraphElementId
         }
         if (data.Node1ID) {
-            this._node1Id = data.Node1ID;
+            this._node1Id = data.Node1ID
         }
         if (data.Node2ID) {
-            this._node2Id = data.Node2ID;
+            this._node2Id = data.Node2ID
         }
         if (data.Anchor1ID) {
-            this._anchor1ID = data.Anchor1ID;
+            this._anchor1ID = data.Anchor1ID
         }
         if (data.Anchor2ID) {
-            this._anchor2ID = data.Anchor2ID;
+            this._anchor2ID = data.Anchor2ID
         }
         if (data.Properties && data.Properties.Color) {
-            this.strokeColor = new SColor(data.Properties.Color);
+            this.strokeColor = new SColor(data.Properties.Color)
         }
         // if(data.Properties && data.Properties.LineDash){
         //   this.LineDash = data.Properties.LineDash
         // }
         if (data.Properties && data.Properties.LineWidth) {
-            this.lineWidth = data.Properties.LineWidth;
+            this.lineWidth = data.Properties.LineWidth
         }
     }
     get graphElementId() {
-        return this._graphElementId;
+        return this._graphElementId
     }
     set graphElementId(v) {
-        this._graphElementId = v;
+        this._graphElementId = v
         if (this.data) {
-            this.data.GraphElementId = this._graphElementId;
+            this.data.GraphElementId = this._graphElementId
         }
     }
     get node1Id() {
-        return this._node1Id;
+        return this._node1Id
     }
     set node1Id(v) {
-        this._node1Id = v;
+        this._node1Id = v
         if (this.data) {
-            this.data.Node1ID = this._node1Id;
+            this.data.Node1ID = this._node1Id
         }
     }
     get node2Id() {
-        return this._node2Id;
+        return this._node2Id
     }
     set node2Id(v) {
-        this._node2Id = v;
+        this._node2Id = v
         if (this.data) {
-            this.data.Node2ID = this._node2Id;
+            this.data.Node2ID = this._node2Id
         }
     }
     get anchor1ID() {
-        return this._anchor1ID;
+        return this._anchor1ID
     }
     set anchor1ID(v) {
-        this._anchor1ID = v;
+        this._anchor1ID = v
         if (this.data) {
-            this.data.Anchor1ID = this._anchor1ID;
+            this.data.Anchor1ID = this._anchor1ID
         }
     }
     get anchor2ID() {
-        return this._anchor2ID;
+        return this._anchor2ID
     }
     set anchor2ID(v) {
-        this._anchor2ID = v;
+        this._anchor2ID = v
         if (this.data) {
-            this.data.Anchor2ID = this._anchor2ID;
+            this.data.Anchor2ID = this._anchor2ID
         }
     }
     get maskFlag() {
-        return this._maskFlag;
+        return this._maskFlag
     }
     set maskFlag(v) {
         if (v === this._maskFlag) {
-            return;
+            return
         }
-        this._maskFlag = v;
-        this.update();
+        this._maskFlag = v
+        this.update()
     }
     /** 接收事件作出修改  */
     changePos() {
         if (this.startAnchor) {
             // 判断删除equip后,不移动
             if (this.startAnchor.parent && this.startAnchor.parent.parent) {
-                this.pointList[0] = this.startAnchor.mapToScene(0, 0);
+                this.pointList[0] = this.startAnchor.mapToScene(0, 0)
             }
         }
         if (this.endAnchor) {
             // 删除equip后
             if (this.endAnchor.parent && this.endAnchor.parent.parent) {
-                this.pointList[this.pointList.length - 1] = this.endAnchor.mapToScene(0, 0);
+                this.pointList[this.pointList.length - 1] = this.endAnchor.mapToScene(0, 0)
             }
         }
     }
     /** 获取data数据  */
     toData() {
-        let pointList = this.pointList.map(item => {
+        let pointList = this.pointList.map((item) => {
             return {
                 X: item.x,
-                Y: item.y
-            };
-        });
+                Y: item.y,
+            }
+        })
         if (this.data) {
-            this.data.PointList = pointList;
-            this.data.Properties.LineWidth = this.lineWidth;
+            this.data.PointList = pointList
+            this.data.Properties.LineWidth = this.lineWidth
             // this.data.Properties.LineDash = this.LineDash;
-            this.data.Properties.Color = this.strokeColor.value;
+            this.data.Properties.Color = this.strokeColor.value
         }
-        return this.data;
+        return this.data
     }
     onDraw(painter) {
         if (this.maskFlag && this.status == SItemStatus.Normal) {
-            let color = new SColor(this.strokeColor);
-            color.alpha = 100;
-            painter.pen.color = color;
-            painter.drawPolyline(this.pointList);
-        }
-        else {
-            super.onDraw(painter);
+            let color = new SColor(this.strokeColor)
+            color.alpha = color.alpha / 2
+            painter.pen.color = color
+            painter.drawPolyline(this.pointList)
+        } else {
+            super.onDraw(painter)
         }
     }
 }

+ 155 - 157
src/lib/items/TipelineItem.ts

@@ -1,170 +1,168 @@
-import { SPolylineItem, ItemOrder, SItemStatus } from '@saga-web/big/lib';
-import { SPainter, SColor } from '@saga-web/draw';
-import { SAnchorItem, SGraphItem } from '@saga-web/graph/lib';
-import { Relation } from '../types/Relation';
-import { SPoint } from "@saga-web/draw/lib";
-import { Point } from "@saga-web/big/lib/types/Point";
+import { SPolylineItem, ItemOrder, SItemStatus } from '@saga-web/big/lib'
+import { SPainter, SColor } from '@saga-web/draw'
+import { SAnchorItem, SGraphItem } from '@saga-web/graph/lib'
+import { Relation } from '../types/Relation'
+import { SPoint } from '@saga-web/draw/lib'
+import { Point } from '@saga-web/big/lib/types/Point'
 
 /**
  * 管道item
  *
  * */
 export class TipelineItem extends SPolylineItem {
-  /** 起始锚点  */
-  startAnchor: SAnchorItem | null = null;
-  /** 结束锚点  */
-  endAnchor: SAnchorItem | null = null;
-  /** 对应的图例ID  */
-  _graphElementId: string = "";
-  get graphElementId(): string {
-    return this._graphElementId;
-  }
-  set graphElementId(v: string) {
-    this._graphElementId = v;
-    if (this.data) {
-      this.data.GraphElementId = this._graphElementId;
-    }
-  }
-  /** 关联节点1ID  */
-  _node1Id: string = "";
-  get node1Id(): string {
-    return this._node1Id;
-  }
-  set node1Id(v: string) {
-    this._node1Id = v;
-    if (this.data) {
-      this.data.Node1ID = this._node1Id;
-    }
-  }
-  /** 关联节点2ID  */
-  _node2Id: string = "";
-  get node2Id(): string {
-    return this._node2Id;
-  }
-  set node2Id(v: string) {
-    this._node2Id = v;
-    if (this.data) {
-      this.data.Node2ID = this._node2Id;
-    }
-  }
-  /** 关联锚点1ID  */
-  _anchor1ID: string = "";
-  get anchor1ID(): string {
-    return this._anchor1ID;
-  }
-  set anchor1ID(v: string) {
-    this._anchor1ID = v;
-    if (this.data) {
-      this.data.Anchor1ID = this._anchor1ID;
-    }
-  }
-  /** 关联锚点2ID  */
-  _anchor2ID: string = "";
-  get anchor2ID(): string {
-    return this._anchor2ID;
-  }
-  set anchor2ID(v: string) {
-    this._anchor2ID = v;
-    if (this.data) {
-      this.data.Anchor2ID = this._anchor2ID;
-    }
-  }
+    /** 起始锚点  */
+    startAnchor: SAnchorItem | null = null
+    /** 结束锚点  */
+    endAnchor: SAnchorItem | null = null
+    /** 对应的图例ID  */
+    _graphElementId: string = ''
+    get graphElementId(): string {
+        return this._graphElementId
+    }
+    set graphElementId(v: string) {
+        this._graphElementId = v
+        if (this.data) {
+            this.data.GraphElementId = this._graphElementId
+        }
+    }
+    /** 关联节点1ID  */
+    _node1Id: string = ''
+    get node1Id(): string {
+        return this._node1Id
+    }
+    set node1Id(v: string) {
+        this._node1Id = v
+        if (this.data) {
+            this.data.Node1ID = this._node1Id
+        }
+    }
+    /** 关联节点2ID  */
+    _node2Id: string = ''
+    get node2Id(): string {
+        return this._node2Id
+    }
+    set node2Id(v: string) {
+        this._node2Id = v
+        if (this.data) {
+            this.data.Node2ID = this._node2Id
+        }
+    }
+    /** 关联锚点1ID  */
+    _anchor1ID: string = ''
+    get anchor1ID(): string {
+        return this._anchor1ID
+    }
+    set anchor1ID(v: string) {
+        this._anchor1ID = v
+        if (this.data) {
+            this.data.Anchor1ID = this._anchor1ID
+        }
+    }
+    /** 关联锚点2ID  */
+    _anchor2ID: string = ''
+    get anchor2ID(): string {
+        return this._anchor2ID
+    }
+    set anchor2ID(v: string) {
+        this._anchor2ID = v
+        if (this.data) {
+            this.data.Anchor2ID = this._anchor2ID
+        }
+    }
+
+    /** 是否蒙版遮罩  */
+    _maskFlag: boolean = false
+    get maskFlag(): boolean {
+        return this._maskFlag
+    }
+    set maskFlag(v: boolean) {
+        if (v === this._maskFlag) {
+            return
+        }
+        this._maskFlag = v
+        this.update()
+    }
 
-  /** 是否蒙版遮罩  */
-  _maskFlag: boolean = false;
-  get maskFlag(): boolean {
-    return this._maskFlag;
-  }
-  set maskFlag(v: boolean) {
-    if (v === this._maskFlag) {
-      return
-    }
-    this._maskFlag = v;
-    this.update()
-  }
+    /** 数据存储  */
+    data: Relation | null = null
+    /** 接收事件作出修改  */
+    changePos() {
+        if (this.startAnchor) {
+            // 判断删除equip后,不移动
+            if (this.startAnchor.parent && this.startAnchor.parent.parent) {
+                this.pointList[0] = this.startAnchor.mapToScene(0, 0)
+            }
+        }
+        if (this.endAnchor) {
+            // 删除equip后
+            if (this.endAnchor.parent && this.endAnchor.parent.parent) {
+                this.pointList[this.pointList.length - 1] = this.endAnchor.mapToScene(0, 0)
+            }
+        }
+    }
 
-  /** 数据存储  */
-  data: Relation | null = null;
-  /** 接收事件作出修改  */
-  changePos() {
-    if (this.startAnchor) {
-      // 判断删除equip后,不移动
-      if (this.startAnchor.parent && this.startAnchor.parent.parent) {
-        this.pointList[0] = this.startAnchor.mapToScene(0, 0);
-      }
-    }
-    if (this.endAnchor) {
-      // 删除equip后
-      if (this.endAnchor.parent && this.endAnchor.parent.parent) {
-        this.pointList[
-          this.pointList.length - 1
-        ] = this.endAnchor.mapToScene(0, 0);
-      }
-    }
-  }
+    constructor(parent: SGraphItem | null, data: Relation) {
+        super(parent, [])
+        this.zOrder = ItemOrder.polylineOrder
+        this.pointList = data.PointList.map((item) => {
+            return new SPoint(item.X, item.Y)
+        })
+        this.data = data
+        this.name = data.Name
+        this.id = data.ID
+        if (data.GraphElementId) {
+            this._graphElementId = data.GraphElementId
+        }
+        if (data.Node1ID) {
+            this._node1Id = data.Node1ID
+        }
+        if (data.Node2ID) {
+            this._node2Id = data.Node2ID
+        }
+        if (data.Anchor1ID) {
+            this._anchor1ID = data.Anchor1ID
+        }
+        if (data.Anchor2ID) {
+            this._anchor2ID = data.Anchor2ID
+        }
+        if (data.Properties && data.Properties.Color) {
+            this.strokeColor = new SColor(data.Properties.Color)
+        }
+        // if(data.Properties && data.Properties.LineDash){
+        //   this.LineDash = data.Properties.LineDash
+        // }
+        if (data.Properties && data.Properties.LineWidth) {
+            this.lineWidth = data.Properties.LineWidth
+        }
+    }
 
-  constructor(parent: SGraphItem | null, data: Relation) {
-    super(parent, []);
-    this.zOrder = ItemOrder.polylineOrder;
-    this.pointList = data.PointList.map(item => {
-      return new SPoint(item.X, item.Y);
-    });
-    this.data = data;
-    this.name = data.Name;
-    this.id = data.ID;
-    if (data.GraphElementId) {
-      this._graphElementId = data.GraphElementId
-    }
-    if (data.Node1ID) {
-      this._node1Id = data.Node1ID
-    }
-    if (data.Node2ID) {
-      this._node2Id = data.Node2ID
-    }
-    if (data.Anchor1ID) {
-      this._anchor1ID = data.Anchor1ID
-    }
-    if (data.Anchor2ID) {
-      this._anchor2ID = data.Anchor2ID
-    }
-    if (data.Properties && data.Properties.Color) {
-      this.strokeColor = new SColor(data.Properties.Color);
-    }
-    // if(data.Properties && data.Properties.LineDash){
-    //   this.LineDash = data.Properties.LineDash
-    // }
-    if (data.Properties && data.Properties.LineWidth) {
-      this.lineWidth = data.Properties.LineWidth;
-    }
-  }
+    /** 获取data数据  */
+    toData(): Relation | null {
+        let pointList: Point[] = this.pointList.map((item) => {
+            return {
+                X: item.x,
+                Y: item.y,
+            }
+        })
 
-  /** 获取data数据  */
-  toData(): Relation | null {
-    let pointList: Point[] = this.pointList.map(item => {
-      return {
-        X: item.x,
-        Y: item.y
-      }
-    });
+        if (this.data) {
+            this.data.PointList = pointList
+            this.data.Properties.LineWidth = this.lineWidth
+            // this.data.Properties.LineDash = this.LineDash;
+            this.data.Properties.Color = this.strokeColor.value
+        }
 
-    if (this.data) {
-      this.data.PointList = pointList;
-      this.data.Properties.LineWidth = this.lineWidth;
-      // this.data.Properties.LineDash = this.LineDash;
-      this.data.Properties.Color = this.strokeColor.value;
+        return this.data
     }
 
-    return this.data
-  }
-
-  onDraw(painter: SPainter) {
-    if (this.maskFlag && this.status == SItemStatus.Normal) {
-      let color = new SColor(this.strokeColor)
-      color.alpha = 100;
-      painter.pen.color = color;
-      painter.drawPolyline(this.pointList);
-    } else {
-      super.onDraw(painter);
-    }
-  }
-}
+    onDraw(painter: SPainter) {
+        if (this.maskFlag && this.status == SItemStatus.Normal) {
+            let color = new SColor(this.strokeColor)
+            color.alpha = color.alpha / 2
+            painter.pen.color = color
+            painter.drawPolyline(this.pointList)
+        } else {
+            super.onDraw(painter)
+        }
+    }
+}

+ 1 - 0
src/store/index.js

@@ -75,6 +75,7 @@ export default new Vuex.Store({
             state.isMessage = data
         },
         SETFLOORS(state, data) {
+            state.floorSelect = []
             state.floorsArr = data
             if (data.length > 0) {
                 data.forEach((e) => {