Browse Source

Merge branch 'develop' of http://39.106.8.246:3003/web/wanda-editer into develop

zhangyu 4 years ago
parent
commit
0ce868c3a8

BIN
src/assets/images/t-polygon-hover.png


BIN
src/assets/images/t-polygon.png


+ 6 - 0
src/components/baseEditer.vue

@@ -519,6 +519,12 @@ export default {
       bus.$on("changefillColor", val => {
         this.scene.upadatfillColor(val);
       });
+      bus.$on("CUSTOMbgColor", val => {
+        this.scene.updateCustomBgColor(val)
+      })
+      bus.$on("CUSTOMbdColor", val => {
+        this.scene.updateCustomBdColor(val)
+      })
       // 修改当前得状态是否为编辑状态
       bus.$on("OpenEditStatus", () => {
         ` `; // 获取焦点item (必须选中且仅选中一个)

+ 52 - 5
src/components/edit/attr_select.vue

@@ -237,6 +237,33 @@
             </div>
           </div>
         </div>
+        <div v-if="SubType=='CUSTOM'">
+          <!-- 自定义 -->
+          <div class="row-tit">
+            <span style="margin-right:10px;color:#8d9399">填充颜色</span>
+            <el-color-picker show-alpha v-model="CUSTOMbgColor" @change='changBgColor' style="vertical-align:middle;"></el-color-picker>
+          </div>
+          <div class="row-tit">
+            <span style="margin-right:10px;color:#8d9399">边框颜色</span>
+            <el-color-picker show-alpha v-model="CUSTOMbdColor" @change='changBdColor' style="vertical-align:middle;"></el-color-picker>
+          </div>
+          <div class="row">
+            <div class="row-tit">显示名称</div>
+            <a-button type="link" class="edit-option-btn" @click="OpenEditStatus">{{isEdit? "取消编辑" : editStatus[type]}}</a-button>
+          </div>
+          <div class="row">
+            <a-textarea placeholder="" v-model="lengedName" allow-clear @change="changeLengedName" :auto-size="{ minRows: 2}"/>
+          </div>
+          <div class="row">
+            <div class="row-tit">字号</div>
+            <div class="grid-content">
+              <a-input-number v-model="fontSize" :min="1" @change="changeFont" style="width: 168px" />
+            </div>
+            <div class="color-choice">
+              <swatches v-model="fontColor" :swatches="swatchesFont" @close="changeFontColor" popover-x="left" />
+            </div>
+          </div>
+        </div>
         <div v-if="!SubType">
           <!-- 普通分区 -->
           <div class="row">
@@ -341,6 +368,9 @@ import {
   queryGlsmsAsset
 } from "@/api/editer.js";
 import { getUrlMsg } from "@/components/urlMsg.js";
+// mapclass里边的没有透明度
+import { hexify } from "@/utils/rgbaUtil"
+import { SCustomLegendItem } from '@/lib/items/SCustomLegendItem';
 export default {
   name: "attr_select",
   props: ["type", "focusItemList"],
@@ -443,6 +473,8 @@ export default {
       getmajorId: "",
       InfoLocal:[],
       GraphElementId:'',//图例Id
+      CUSTOMbgColor: 'rgba(0,0,0,0.15)', // 自定义多边形背景色
+      CUSTOMbdColor: 'rgba(0,0,0,1)', // 自定义多边形线条色
     };
   },
   methods: {
@@ -484,6 +516,16 @@ export default {
         bus.$emit("changebackColor", color);
       }
     },
+    // 用户自定义多边形 修改背景色
+    changBgColor(val){
+      const color = hexify(val); // 转为16进制
+      bus.$emit('CUSTOMbgColor',color)
+    },
+    // 用户自定义多边形 修改现调颜色
+    changBdColor(val){
+      const color = hexify(val); // 转为16进制
+      bus.$emit('CUSTOMbdColor',color)
+    },
     customRequest(info) {
       const formData = new FormData();
       formData.append("file", info.file);
@@ -623,11 +665,7 @@ export default {
           newval.itemType == "Image"
         ) {
           setTimeout(() => {
-            if (Item.status == SItemStatus.Edit) {
-              this.isEdit = true;
-            } else {
-              this.isEdit = false;
-            }
+            this.isEdit = (Item.status == SItemStatus.Edit);
           }, 300)
           if (newval.itemType == "Image") {
             this.imageNum = Item.num;
@@ -653,6 +691,15 @@ export default {
                 ? Item.data.Properties.ItemExplain
                 : "";
             }
+            if (newval.itemList.length) {
+              if (newval.itemList[0] instanceof SCustomLegendItem) {
+                const fColor = newval.itemList[0].fillColor;
+                this.CUSTOMbgColor = `rgba(${fColor.red}, ${fColor.green}, ${fColor.blue}, ${fColor.alpha/100})`
+                
+                const bColor = newval.itemList[0].strokeColor;
+                this.CUSTOMbdColor = `rgba(${bColor.red}, ${bColor.green}, ${bColor.blue}, ${bColor.alpha/100})`
+              }
+            }
           }
         }
       }

+ 27 - 0
src/components/edit/left_toolbar.vue

@@ -213,6 +213,14 @@ export default {
           type: "baseText"
         },
         {
+          img: "t-polygon.png", //logo
+          hoverImg: "t-polygon-hover.png", //hoverlogo
+          isHover: false, //是否hover
+          isChoice: false,
+          name: "画多边形", //类型
+          type: "Zone"
+        },
+        {
           img: "t-img.png", //logo
           hoverImg: "t-img-hover.png", //hoverlogo
           isHover: false, //是否hover
@@ -303,6 +311,25 @@ export default {
       });
       items.isChoice = true;
       this.$emit("setCmdType", items.type);
+      if (items.name == "画多边形"){
+        bus.$emit('changeDrawType','draw')
+        const item = {
+            "Color":"#57C5FC",
+            "Deleted":false,
+            "FillColor":"#57c5fc0F",
+            "Id":"-10",
+            "InfoLocal":[],
+            "InfoTypeId":[],
+            "LineDash":"solid",
+            "LineWidth":2,
+            "Name":"",
+            "SubType":"CUSTOM",
+            "Type":"Zone",
+            "Unit":"",
+            "Url":"137ee878925448a699ec10c33e67fc95"
+        }
+        this.$emit("toolActionClick", item);
+      }
     },
    async showDrawer(item) {
       this.showDrawerItem = item;

+ 35 - 7
src/components/mapClass/EditScence.ts

@@ -25,6 +25,7 @@ import { MinDis } from '@saga-web/big/lib/types/MinDis';
 import { HighlightItem } from '@/lib/items/HighlightItem';
 import { TimeSelect } from 'element-ui';
 import { STopologyParser } from '@/lib/parsers/STopologyParser';
+import { SCustomLegendItem } from '@/lib/items/SCustomLegendItem';
 /**
  * 在线绘图
  *
@@ -130,6 +131,8 @@ export class EditScence extends SGraphScene {
             itemType = 'Zone'
         } else if (obj.itemList[0] instanceof SSCPZZoneLegendItem) {
             itemType = 'Zone'
+        } else if (obj.itemList[0] instanceof SCustomLegendItem) {
+            itemType = 'Zone'
         } else if (obj.itemList[0] instanceof SImageLegendItem) {
             itemType = 'Image'
         } else if (obj.itemList[0] instanceof TipelineItem) {
@@ -295,6 +298,8 @@ export class EditScence extends SGraphScene {
             Polylines = new SSCPZZoneLegendItem(null, LegendData);
         } else if (SubType == "FHFQ") {
             Polylines = new SFHFQZoneLegendItem(null, LegendData);
+        } else if (SubType == "CUSTOM") {
+            Polylines = new SCustomLegendItem(null, LegendData);
         } else {
             Polylines = new SZoneLegendItem(null, LegendData);
         }
@@ -701,7 +706,7 @@ export class EditScence extends SGraphScene {
             let fillColorT;
             if (fillColor.length == 7) {
                 fillColorT = fillColor + Transparency[15];
-                if (this.focusItem instanceof SSCPZZoneLegendItem || this.focusItem instanceof SSCPZZoneLegendItem) {
+                if (this.focusItem instanceof SSCPZZoneLegendItem || this.focusItem instanceof SFHFQZoneLegendItem) {
                     const sc = new SColor(this.focusItem.fillColor);
                     const alp = ((sc.alpha/255)*100).toFixed()
                     fillColorT = fillColor + Transparency[alp];
@@ -713,7 +718,7 @@ export class EditScence extends SGraphScene {
             const newMsg = new SColor(fillColorT);
             const oldMsg = this.focusItem.fillColor;
             this.focusItem.fillColor = new SColor(fillColorT);
-            this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "num", oldMsg, newMsg));
+            this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "fillColor", oldMsg, newMsg));
         }
     }
     /**
@@ -759,6 +764,29 @@ export class EditScence extends SGraphScene {
     }
 
     /**
+     * 自定义多边形修改背景色
+    */
+    updateCustomBgColor(val: string):void{
+        if (this.focusItem) {
+            const newMsg = new SColor(val);
+            const oldMsg = this.focusItem.fillColor;
+            this.focusItem.fillColor = new SColor(val)
+            this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "fillColor", oldMsg, newMsg));
+        }
+    }
+
+    /**
+     * 自定义多边形修改边框色
+    */
+    updateCustomBdColor(val: string):void{
+        if (this.focusItem) {
+            const newMsg = new SColor(val);
+            const oldMsg = this.focusItem.strokeColor;
+            this.focusItem.strokeColor = new SColor(val)
+            this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "strokeColor", oldMsg, newMsg));
+        }
+    }
+    /**
      * 删除指定item
      */
     deleiteItem(): void {
@@ -929,9 +957,9 @@ export class EditScence extends SGraphScene {
      * 完成事件创建的回调函数
      */
     finishCreated(item: any) {
-        let arrList = []
+        // let arrList = []
         if (this.cmd == 'baseLine') {
-            arrList = this.Markers;
+            // arrList = this.Markers;
             // 对数组遍历防止相同得id注入
             let canPush = true;  //是否可注入
             this.Markers.forEach((arrItem: any) => {
@@ -951,7 +979,7 @@ export class EditScence extends SGraphScene {
             this.focusItem = item;
         });
 
-        if (item instanceof SZoneLegendItem || item instanceof SFHFQZoneLegendItem || item instanceof SSCPZZoneLegendItem) {
+        if (item instanceof SZoneLegendItem || item instanceof SFHFQZoneLegendItem || item instanceof SSCPZZoneLegendItem || item instanceof SCustomLegendItem) {
             let canPush = true;  //是否可注入
             this.Nodes.forEach((arrItem: any) => {
                 if (arrItem.id == item.id) {
@@ -960,7 +988,7 @@ export class EditScence extends SGraphScene {
             })
             if (canPush) {
                 this.Nodes.push(item); //完成后,方可扔到Node节点
-                this.undoStack.push(new SGraphAddCommand(this, arrList));
+                this.undoStack.push(new SGraphAddCommand(this, item));
             }
         }
         //    管道完成后方可保存
@@ -973,7 +1001,7 @@ export class EditScence extends SGraphScene {
             })
             if (canPush) {
                 this.Relations.push(item);
-                this.undoStack.push(new SGraphAddCommand(this, arrList));
+                this.undoStack.push(new SGraphAddCommand(this, item));
             }
 
         }

+ 258 - 0
src/lib/items/SCustomLegendItem.ts

@@ -0,0 +1,258 @@
+
+import { SGraphItem, SLineStyle, STextOrigin } from "@saga-web/graph/lib";
+import { Legend } from '../types/Legend';
+import { SPainter, SColor, SFont, SPoint, SLineCapStyle } from "@saga-web/draw";
+import { STextItem } from '@saga-web/graph/lib';
+import { hexify, uuid } from "@/components/mapClass/until"
+import { SItemStatus, ItemOrder, SPolygonItem } from '@saga-web/big/lib';
+/**
+ * 图例节点Item(区域类型)
+ *
+ * * @author  张宇(taohuzy@163.com)
+ */
+export class SCustomLegendItem extends SPolygonItem {
+    /** 图例节点对象数据 */
+    data: Legend;
+
+    /** text item   */
+    textItem: STextItem = new STextItem(this);
+
+    get text(): string {
+        return this.textItem.text;
+    }
+    set text(v: string) {
+        this.textItem.text = v;
+        this.update();
+    }
+    get color(): SColor {
+        return this.textItem.color;
+    }
+    set color(v: SColor) {
+        this.textItem.color = v;
+    }
+    get font(): SFont {
+        return this.textItem.font;
+    }
+    set font(v: SFont) {
+        this.textItem.font = v;
+    }
+
+    get status(): SItemStatus {
+        return this._status;
+    }
+    // 编辑当前状态
+    set status(value: SItemStatus) {
+        this._status = value;
+        // 如果状态为show则需清栈
+        if (value == SItemStatus.Normal) {
+            // 切换显示状态显示文本
+            this.showText = true;
+            // 切换显示状态不可移动文本
+            this.textItem.moveable = false;
+
+            if (this.undoStack) {
+                this.undoStack.clear();
+            }
+        } else if (value == SItemStatus.Edit) {
+            // 切换编辑状态显示文本
+            this.showText = true;
+            // 切换编辑状态可移动文本
+            this.textItem.moveable = true;
+        } else if (value == SItemStatus.Create) {
+            // 切换创建状态不显示文本
+            this.showText = false;
+            // 切换创建状态不可移动文本
+            this.textItem.moveable = false;
+        }
+        this.update();
+    };
+
+    /** 是否激活  */
+    _isActive: boolean = false;
+    get isActive(): boolean {
+        return this._isActive;
+    } // Get isActive
+    set isActive(v: boolean) {
+        this._isActive = v;
+        if (v) {
+            this.cursor = "pointer";
+        } else {
+            this.cursor = "auto";
+        }
+        this.update();
+    } // Set isActive
+
+    /** 是否显示文字  */
+    _showText: boolean = true;
+    get showText(): boolean {
+        return this._showText;
+    }
+    set showText(v: boolean) {
+        if (v === this._showText) {
+            return
+        }
+        this._showText = v;
+        if (v) {
+            this.textItem.show();
+        } else {
+            this.textItem.hide();
+        }
+    }
+
+    /** 是否蒙版遮罩  */
+    _maskFlag: boolean = false;
+    get maskFlag(): boolean {
+        return this._maskFlag;
+    }
+    set maskFlag(v: boolean) {
+        if (v === this._maskFlag) {
+            return
+        }
+        this._maskFlag = v;
+        this.update()
+    }
+
+    /**
+     * 构造函数
+     *
+     * @param parent    指向父对象
+     * @param data      图例节点对象数据
+     */
+    constructor(parent: SGraphItem | null, data: Legend) {
+        super(parent);
+        this.textItem.originPosition = STextOrigin.Centrum;
+        this.textItem.isTransform = false;
+        this.zOrder = ItemOrder.polygonOrder;
+        this.data = data;
+        if (!data.ID) {
+            data.ID = uuid()
+        }
+        this.id = data.ID;
+        this.name = data.Name;
+        this.text = data.Name;
+        if (data) {
+            this.setPointList = [];
+            let setPointList: SPoint[];
+            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;
+                }
+            }
+            if (data.Properties.Zorder) {
+                this.zOrder = data.Properties.Zorder;
+            }
+            // 设置线宽
+            if (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));
+            }
+            if (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);
+            }
+            if (data.Properties.color) {
+                this.color = new SColor(data.Properties.color);
+            }
+            if (data.Properties.font) {
+                this.font = new SFont("sans-serif", data.Properties.font);
+            }
+            if (data.Properties && data.Properties.IsActive) {
+                this.isActive = data.Properties.IsActive;
+            }
+            if (data.AttachObjectIds && data.AttachObjectIds.length) {
+                this.isActive = true;
+            }
+            switch (data.Properties.LineDash) {
+                case "solid":
+                    this.lineStyle = SLineStyle.Solid;
+                    break;
+                case "dotted":
+                    this.lineStyle = SLineStyle.Dotted;
+                    break;
+                case "dashed":
+                    this.lineStyle = SLineStyle.Dashed;
+                    break;
+                default:
+                    this.lineStyle = SLineStyle.Solid;
+            }
+        }
+        // 监听多边形创建完成事件,并动态计算文本位置
+        this.connect("finishCreated", this, () => {
+            // 计算文本位置
+            let x: number = this.getPointList.reduce((pre, cur, index, arr) => {
+                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);
+        })
+    }
+
+    toData(): any {
+        this.data.Pos = { X: this.x, Y: this.y };
+        this.data.Name = this.name;
+        this.data.Properties.Zorder = this.zOrder;
+        this.data.Properties.FillColor = this.fillColor.value;
+        this.data.Properties.StrokeColor = this.strokeColor.value;
+        this.data.Properties.LineWidth = this.lineWidth;
+        switch (this.lineStyle) {
+            case SLineStyle.Solid:
+                this.data.Properties.LineDash = "solid";
+                break;
+            case SLineStyle.Dotted:
+                this.data.Properties.LineDash = "dotted";
+                break;
+            case SLineStyle.Dashed:
+                this.data.Properties.LineDash = "dashed";
+                break;
+            default:
+                this.data.Properties.LineDash = "solid";
+        }
+        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;
+        this.data.Properties.IsActive = this.isActive;
+        return this.data;
+    }
+
+    onDraw(painter: SPainter) {
+        if (this.maskFlag && this.status == SItemStatus.Normal) {
+            let color = new SColor(this.strokeColor)
+            color.alpha = color.alpha / 5
+            let brushcolor = new SColor(this.fillColor)
+            brushcolor.alpha = brushcolor.alpha / 5
+            painter.pen.color = color
+            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 {
+            super.onDraw(painter);
+        }
+    }
+} // Class SZoneLegendItem

+ 5 - 0
src/lib/parsers/STopologyParser.ts

@@ -17,6 +17,7 @@ import { ItemOrder } from "@saga-web/big";
 import { SItemStatus } from "@saga-web/big";
 import { SSCPZZoneLegendItem } from '../items/SSCPZZoneLegendItem';
 import { SFHFQZoneLegendItem } from '../items/SFHFQZoneLegendItem';
+import { SCustomLegendItem } from '../items/SCustomLegendItem';
 /**
  * 拓扑图信息解析器
  *
@@ -82,6 +83,10 @@ export class STopologyParser extends SParser {
                 let item = new SFHFQZoneLegendItem(null, t);
                 item.selectable = true;
                 this.zoneLegendList.push(item);
+            }  else if (t.SubType == "CUSTOM") {
+                let item = new SCustomLegendItem(null, t);
+                item.selectable = true;
+                this.zoneLegendList.push(item);
             } else {
                 let item = new SZoneLegendItem(null, t);
                 item.selectable = true;

+ 24 - 0
src/utils/rgbaUtil.ts

@@ -0,0 +1,24 @@
+import transparency from './transparency'
+//rgba转成16进制
+export function hexify(color: string) {
+  if (color) {
+      let opacity = '',
+          rgb = color.split(','),
+          r = parseInt(rgb[0].split('(')[1]),
+          g = parseInt(rgb[1]),
+          b = parseInt(rgb[2].split(')')[0]),
+          a = Number(rgb[3].split(')')[0] || 1) * 100
+
+      transparency.forEach((i, index) => {
+          if (index == a) {
+              opacity = i
+          }
+      })
+
+      var hex = '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1) + opacity
+      
+      return hex
+  } else {
+      return
+  }
+}

+ 104 - 0
src/utils/transparency.ts

@@ -0,0 +1,104 @@
+ const Transparency = [
+     "00",
+     "03",
+     "05",
+     "08",
+     "0A",
+     "0D",
+     "0F",
+     "12",
+     "14",
+     "17",
+     "1A",
+     "1C",
+     "1F",
+     "21",
+     "24",
+     "26",
+     "29",
+     "2B",
+     "2E",
+     "30",
+     "33",
+     "36",
+     "38",
+     "3B",
+     "3D",
+     "40",
+     "42",
+     "45",
+     "47",
+     "4A",
+     "4D",
+     "4F",
+     "52",
+     "54",
+     "57",
+     "59",
+     "5C",
+     "5E",
+     "61",
+     "63",
+     "66",
+     "69",
+     "6B",
+     "6E",
+     "70",
+     "73",
+     "75",
+     "78",
+     "7A",
+     "7D",
+     "80",
+     "82",
+     "85",
+     "87",
+     "8A",
+     "8C",
+     "8F",
+     "91",
+     "94",
+     "96",
+     "99",
+     "9C",
+     "9E",
+     "A1",
+     "A3",
+     "A6",
+     "A8",
+     "AB",
+     "AD",
+     "B0",
+     "B3",
+     "B5",
+     "B8",
+     "BA",
+     "BD",
+     "BF",
+     "C2",
+     "C4",
+     "C7",
+     "C9",
+     "CC",
+     "CF",
+     "D1",
+     "D4",
+     "D6",
+     "D9",
+     "DB",
+     "DE",
+     "E0",
+     "E3",
+     "E6",
+     "E8",
+     "EB",
+     "ED",
+     "F0",
+     "F2",
+     "F5",
+     "F7",
+     "FA",
+     "FC",
+     "FF"
+ ];
+ export default Transparency