Переглянути джерело

Merge branch 'develop' of http://39.106.8.246:3003/web/wanda-bm-guide into aly_dev

yx 4 роки тому
батько
коміт
51cf0131ae

+ 1 - 1
package.json

@@ -12,7 +12,7 @@
         "@saga-web/base": "2.1.22",
         "@saga-web/big": "1.0.73",
         "@saga-web/draw": "2.1.100",
-        "@saga-web/feng-map": "1.0.20",
+        "@saga-web/feng-map": "1.0.22",
         "@saga-web/graph": "2.1.105",
         "ant-design-vue": "^1.4.10",
         "axios": "^0.19.2",

+ 1 - 1
src/components/Legend/src/legend.vue

@@ -640,7 +640,7 @@ export default {
         margin-bottom: 10px;
         display: none;
         cursor: pointer;
-        border: 1px solid #eee;
+        // border: 1px solid #eee;
     }
     .tltk-1 {
         margin-bottom: 10px;

+ 7 - 3
src/components/floorMap/index.vue

@@ -189,6 +189,7 @@ export default {
                 // 增加管线类
                 // 增加图标类图例
                 this.topologyParser.relationList.forEach(t => {
+                    t.selectable = true
                     this.scene.addItem(t)
                 })
                 this.view.fitSceneToView()
@@ -206,6 +207,9 @@ export default {
             this.view = new FloorView(`canvas${this.id}`)
         },
         listChange(item, ev) {
+            console.log('--------------------')
+            console.log(item)
+            console.log(ev)
             if (ev[0].length) {
                 let selectItem1 = ev[0][0],
                     name = selectItem1.data.Name,
@@ -359,11 +363,11 @@ export default {
                 // })
                 this.topologyParser.imageLegendList.forEach(t => {
                     let id = t.data.GraphElementId
-                    t.selected = res.indexOf(id) > -1
+                    t.maskFlag = !(res.indexOf(id) > -1)
                 })
                 this.topologyParser.relationList.forEach(t => {
-                    let id = t.data.GraphElementId
-                    t.selected = res.indexOf(id) > -1
+                    let id = t.data.GraphElementId || t.data.GraphElementID
+                    t.maskFlag = !(res.indexOf(id) > -1)
                 })
             })
         }

+ 9 - 1
src/lib/items/SFHFQZoneLegendItem.js

@@ -178,10 +178,18 @@ export class SFHFQZoneLegendItem extends SPolygonItem {
             painter.pen.lineCapStyle = SLineCapStyle.Square
             painter.pen.lineWidth = painter.toPx(this._lineWidth)
             painter.brush.color = brushcolor
+
+            if (this.selected) {
+                painter.pen.lineWidth = painter.toPx(this.lineWidth * 2);
+                painter.shadow.shadowBlur = 10;
+                painter.shadow.shadowColor = new SColor(`#00000033`);
+                painter.shadow.shadowOffsetX = 5;
+                painter.shadow.shadowOffsetY = 5;
+            }
+
             // @ts-ignore
             painter.drawPolygon([...this.pointList])
         } else {
-            this.selected = true
             super.onDraw(painter)
         }
     }

+ 9 - 1
src/lib/items/SFHFQZoneLegendItem.ts

@@ -214,10 +214,18 @@ export class SFHFQZoneLegendItem extends SPolygonItem {
             painter.pen.lineCapStyle = SLineCapStyle.Square
             painter.pen.lineWidth = painter.toPx(this._lineWidth)
             painter.brush.color = brushcolor
+
+            if (this.selected) {
+                painter.pen.lineWidth = painter.toPx(this.lineWidth * 2);
+                painter.shadow.shadowBlur = 10;
+                painter.shadow.shadowColor = new SColor(`#00000033`);
+                painter.shadow.shadowOffsetX = 5;
+                painter.shadow.shadowOffsetY = 5;
+            }
+
             // @ts-ignore
             painter.drawPolygon([...this.pointList])
         } else {
-            this.selected = true
             super.onDraw(painter)
         }
     }

+ 36 - 5
src/lib/items/SImageLegendItem.js

@@ -1,5 +1,5 @@
 import { SIconTextItem } from '@saga-web/big/lib/items/SIconTextItem';
-import { ItemOrder } from '@saga-web/big/lib';
+import { ItemOrder, SItemStatus } from '@saga-web/big/lib';
 import { SFont, SColor } from '@saga-web/draw/lib';
 /**
  * 图例节点Item(图标类型)
@@ -17,6 +17,8 @@ export class SImageLegendItem extends SIconTextItem {
         super(parent, data.AnchorList);
         /** 图例数量 */
         this._num = 1;
+        /** 是否蒙版遮罩  */
+        this._maskFlag = false;
         this.isTransform = false;
         this.zOrder = ItemOrder.markOrder;
         this.data = data;
@@ -49,7 +51,7 @@ export class SImageLegendItem extends SIconTextItem {
             this.sHeight = data.Properties.sHeight;
         }
         if (data.Properties && data.Properties.font) {
-            this.font = new SFont("sans-serif", data.Properties.font);
+            this.font = new SFont('sans-serif', data.Properties.font);
         }
         if (data.Properties && data.Properties.color) {
             this.color = new SColor(data.Properties.color);
@@ -80,6 +82,16 @@ export class SImageLegendItem extends SIconTextItem {
         this.text = `${this.data.Name}${this.data.Num > 1 ? ` × ${this.data.Num}` : ''}`;
         this.update();
     }
+    get maskFlag() {
+        return this._maskFlag;
+    }
+    set maskFlag(v) {
+        if (v === this._maskFlag) {
+            return;
+        }
+        this._maskFlag = v;
+        this.update();
+    }
     toData() {
         this.data.Pos = { X: this.x, Y: this.y };
         this.data.Size = { Width: this.width, Height: this.height };
@@ -93,15 +105,34 @@ export class SImageLegendItem extends SIconTextItem {
         this.data.Properties.color = this.color.value;
         this.data.Properties.FrameColor = this.activeColor.value;
         this.data.Properties.IsActive = this.isActive;
-        this.data.AnchorList = this.anchorList.map(t => {
+        this.data.AnchorList = this.anchorList.map((t) => {
             return {
                 ID: t.id,
                 Pos: {
                     X: t.x,
-                    Y: t.y
-                }
+                    Y: t.y,
+                },
             };
         });
         return this.data;
     }
+    /**
+     * Item绘制框架
+     *
+     * @param   painter       painter对象
+     * @param   rect          绘制区域
+     */
+    onPaint(painter, rect) {
+        super.onPaint(painter, rect);
+        if (this.maskFlag && this.status == SItemStatus.Normal) {
+            painter.pen.color = SColor.Transparent;
+            painter.brush.color = new SColor("#ffffffa1");
+            if (this.selected) {
+                painter.drawCircle(this.img.x, this.img.y, (this.sWidth / 2.0) * 1.25);
+            }
+            else {
+                painter.drawCircle(this.img.x, this.img.y, this.sWidth / 2.0);
+            }
+        }
+    } // Function onPaint()
 } // Class SImageLegendItem

+ 34 - 2
src/lib/items/SImageLegendItem.ts

@@ -1,8 +1,8 @@
 import { SGraphItem } from '@saga-web/graph/lib'
 import { SIconTextItem } from '@saga-web/big/lib/items/SIconTextItem'
 import { Legend } from '../types/Legend'
-import { ItemOrder } from '@saga-web/big/lib'
-import { SFont, SColor } from '@saga-web/draw/lib'
+import { ItemOrder, SItemStatus } from '@saga-web/big/lib';
+import { SFont, SColor, SPainter, SRect } from '@saga-web/draw/lib';
 /**
  * 图例节点Item(图标类型)
  *
@@ -29,6 +29,19 @@ export class SImageLegendItem extends SIconTextItem {
         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()
+    }
+
     /**
      * 构造函数
      *
@@ -109,4 +122,23 @@ export class SImageLegendItem extends SIconTextItem {
         })
         return this.data
     }
+
+    /**
+     * Item绘制框架
+     *
+     * @param   painter       painter对象
+     * @param   rect          绘制区域
+     */
+    onPaint(painter: SPainter, rect: SRect): void {
+        super.onPaint(painter, rect);
+        if (this.maskFlag && this.status == SItemStatus.Normal) {
+            painter.pen.color = SColor.Transparent;
+            painter.brush.color = new SColor("#ffffffa1");
+            if (this.selected) {
+                painter.drawCircle(this.img.x, this.img.y, (this.sWidth / 2.0) * 1.25);
+            } else {
+                painter.drawCircle(this.img.x, this.img.y, this.sWidth / 2.0);
+            }
+        }
+    } // Function onPaint()
 } // Class SImageLegendItem

+ 9 - 1
src/lib/items/SSCPZZoneLegendItem.js

@@ -185,10 +185,18 @@ export class SSCPZZoneLegendItem extends SPolygonItem {
             painter.pen.lineCapStyle = SLineCapStyle.Square
             painter.pen.lineWidth = painter.toPx(this._lineWidth)
             painter.brush.color = brushcolor
+
+            if (this.selected) {
+                painter.pen.lineWidth = painter.toPx(this.lineWidth * 2);
+                painter.shadow.shadowBlur = 10;
+                painter.shadow.shadowColor = new SColor(`#00000033`);
+                painter.shadow.shadowOffsetX = 5;
+                painter.shadow.shadowOffsetY = 5;
+            }
+
             // @ts-ignore
             painter.drawPolygon([...this.pointList])
         } else {
-            this.selected = true
             super.onDraw(painter)
         }
     }

+ 9 - 1
src/lib/items/SSCPZZoneLegendItem.ts

@@ -222,10 +222,18 @@ export class SSCPZZoneLegendItem extends SPolygonItem {
             painter.pen.lineCapStyle = SLineCapStyle.Square
             painter.pen.lineWidth = painter.toPx(this._lineWidth)
             painter.brush.color = brushcolor
+
+            if (this.selected) {
+                painter.pen.lineWidth = painter.toPx(this.lineWidth * 2);
+                painter.shadow.shadowBlur = 10;
+                painter.shadow.shadowColor = new SColor(`#00000033`);
+                painter.shadow.shadowOffsetX = 5;
+                painter.shadow.shadowOffsetY = 5;
+            }
+
             // @ts-ignore
             painter.drawPolygon([...this.pointList])
         } else {
-            this.selected = true
             super.onDraw(painter)
         }
     }

+ 9 - 1
src/lib/items/SZoneLegendItem.js

@@ -179,10 +179,18 @@ export class SZoneLegendItem extends SPolygonItem {
             painter.pen.lineCapStyle = SLineCapStyle.Square
             painter.pen.lineWidth = painter.toPx(this._lineWidth)
             painter.brush.color = brushcolor
+
+            if (this.selected) {
+                painter.pen.lineWidth = painter.toPx(this.lineWidth * 2);
+                painter.shadow.shadowBlur = 10;
+                painter.shadow.shadowColor = new SColor(`#00000033`);
+                painter.shadow.shadowOffsetX = 5;
+                painter.shadow.shadowOffsetY = 5;
+            }
+
             // @ts-ignore
             painter.drawPolygon([...this.pointList])
         } else {
-            this.selected = true
             super.onDraw(painter)
         }
     }

+ 9 - 1
src/lib/items/SZoneLegendItem.ts

@@ -216,10 +216,18 @@ export class SZoneLegendItem extends SPolygonItem {
             painter.pen.lineCapStyle = SLineCapStyle.Square
             painter.pen.lineWidth = painter.toPx(this._lineWidth)
             painter.brush.color = brushcolor
+
+            if (this.selected) {
+                painter.pen.lineWidth = painter.toPx(this.lineWidth * 2);
+                painter.shadow.shadowBlur = 10;
+                painter.shadow.shadowColor = new SColor(`#00000033`);
+                painter.shadow.shadowOffsetX = 5;
+                painter.shadow.shadowOffsetY = 5;
+            }
+            
             // @ts-ignore
             painter.drawPolygon([...this.pointList])
         } else {
-            this.selected = true
             super.onDraw(painter)
         }
     }

+ 39 - 8
src/lib/items/TipelineItem.js

@@ -145,15 +145,46 @@ export class TipelineItem extends SPolylineItem {
         }
         return this.data
     }
-    onDraw(painter) {
+   // onDraw(painter: SPainter) {
+    //     if (this.maskFlag && this.status == SItemStatus.Normal) {
+    //         let color = new SColor(this.strokeColor)
+    //         color.alpha = color.alpha / 8
+    //         painter.pen.color = color
+
+    //         if (this.selected) {
+    //             painter.pen.lineWidth = painter.toPx(this.lineWidth * 2);
+    //             painter.shadow.shadowBlur = 10;
+    //             painter.shadow.shadowColor = new SColor(`#00000033`);
+    //             painter.shadow.shadowOffsetX = 5;
+    //             painter.shadow.shadowOffsetY = 5;
+    //         } else {
+    //             painter.pen.lineWidth = painter.toPx(this.lineWidth);
+    //             painter.shadow.shadowColor = SColor.Transparent
+    //         }
+    //         painter.drawPolyline(this.pointList)
+
+    //         painter.pen.color = new SColor('#ffffff80')
+    //         painter.drawPolyline(this.pointList)
+    //     } else {
+    //         super.onDraw(painter)
+    //     }
+    // }
+    /**
+     * Item绘制框架
+     *
+     * @param   painter       painter对象
+     * @param   rect          绘制区域
+     */
+    onPaint(painter, rect) {
+        super.onPaint(painter, rect);
         if (this.maskFlag && this.status == SItemStatus.Normal) {
-            let color = new SColor(this.strokeColor)
-            color.alpha = color.alpha / 2
-            painter.pen.color = color
+            if (this.selected) {
+                painter.pen.lineWidth = painter.toPx(this.lineWidth * 2);
+            } else {
+                painter.pen.lineWidth = painter.toPx(this.lineWidth);
+            }
+            painter.pen.color = new SColor('#ffffff80')
             painter.drawPolyline(this.pointList)
-        } else {
-            this.selected = true
-            super.onDraw(painter)
         }
-    }
+    } // Function onPaint()
 }

+ 40 - 9
src/lib/items/TipelineItem.ts

@@ -1,5 +1,5 @@
 import { SPolylineItem, ItemOrder, SItemStatus } from '@saga-web/big/lib'
-import { SPainter, SColor } from '@saga-web/draw'
+import { SPainter, SColor, SRect } from '@saga-web/draw'
 import { SAnchorItem, SGraphItem } from '@saga-web/graph/lib'
 import { Relation } from '../types/Relation'
 import { SPoint } from '@saga-web/draw/lib'
@@ -156,15 +156,46 @@ export class TipelineItem extends SPolylineItem {
         return this.data
     }
 
-    onDraw(painter: SPainter) {
+    // onDraw(painter: SPainter) {
+    //     if (this.maskFlag && this.status == SItemStatus.Normal) {
+    //         let color = new SColor(this.strokeColor)
+    //         color.alpha = color.alpha / 8
+    //         painter.pen.color = color
+
+    //         if (this.selected) {
+    //             painter.pen.lineWidth = painter.toPx(this.lineWidth * 2);
+    //             painter.shadow.shadowBlur = 10;
+    //             painter.shadow.shadowColor = new SColor(`#00000033`);
+    //             painter.shadow.shadowOffsetX = 5;
+    //             painter.shadow.shadowOffsetY = 5;
+    //         } else {
+    //             painter.pen.lineWidth = painter.toPx(this.lineWidth);
+    //             painter.shadow.shadowColor = SColor.Transparent
+    //         }
+    //         painter.drawPolyline(this.pointList)
+
+    //         painter.pen.color = new SColor('#ffffff80')
+    //         painter.drawPolyline(this.pointList)
+    //     } else {
+    //         super.onDraw(painter)
+    //     }
+    // }
+    /**
+     * Item绘制框架
+     *
+     * @param   painter       painter对象
+     * @param   rect          绘制区域
+     */
+    onPaint(painter: SPainter, rect: SRect): void {
+        super.onPaint(painter, rect);
         if (this.maskFlag && this.status == SItemStatus.Normal) {
-            let color = new SColor(this.strokeColor)
-            color.alpha = color.alpha / 2
-            painter.pen.color = color
+            if (this.selected) {
+                painter.pen.lineWidth = painter.toPx(this.lineWidth * 2);
+            } else {
+                painter.pen.lineWidth = painter.toPx(this.lineWidth);
+            }
+            painter.pen.color = new SColor('#ffffff80')
             painter.drawPolyline(this.pointList)
-        } else {
-            this.selected = true
-            super.onDraw(painter)
         }
-    }
+    } // Function onPaint()
 }