Przeglądaj źródła

Merge branch 'develop' of git.sagacloud.cn:web/wanda-editer into develop

 Conflicts:
	src/components/mapClass/EditScence.ts
	src/lib/items/SZoneLegendItem.ts
zhangyu 4 lat temu
rodzic
commit
0597a42473

+ 1 - 1
src/api/editer.js

@@ -1,7 +1,7 @@
 // 登录校验接口
 import httputils from '@/api/httputils'
 const serveApi = '/serve/topology-wanda';
-const testApi = '/serve/topology-wanda'
+const testApi = '/serve'
 //获取图例分类结构
 export function queryByGroup(params) {
     return httputils.getJson(`${testApi}/graphCategory/queryByGroup`, params)

+ 13 - 12
src/components/baseEditer.vue

@@ -47,7 +47,6 @@ export default {
     this.init();
     // 挂在bus
     this.getBus();
-    // 读取业务图
   },
   methods: {
     init() {
@@ -79,15 +78,13 @@ export default {
         this.view.fitSceneToView();
         // this.$loading.close(loadings);
       });
-      // this.readGroup().then(data => {
-      //   // const parserData = new STopologyParser().parseData(data);
-      //   // console.log('parserData',parserData)
-      //   // this.view.scene = this.scene;
-      //   // parserData.zoneLegendList.forEach(t => {
-      //   //   this.scene.addItem(t);
-      //   // });
-      //   // this.view.fitSceneToView();
-      // });
+      this.readGroup().then(data => {
+        const parserData = new STopologyParser(null);
+        parserData.parseData(data.data.Data[0].Elements);
+        parserData.zoneLegendList.forEach(t => {
+          this.scene.addItem(t);
+        });
+      });
       this.scene.emitChange = this.emitChange;
     },
     // 监听变化
@@ -137,7 +134,7 @@ export default {
       bus.$on("deleiteItem", () => {
         this.scene.deleiteItem();
       });
-      bus.$on("changeAlignItem", (val) => {
+      bus.$on("changeAlignItem", val => {
         this.scene.changeAlignItem(val);
       });
       bus.$on("extractItem", () => {
@@ -184,11 +181,15 @@ export default {
           }
         });
       });
+      // 设备图例样式对象
+      bus.$on("setLenged", obj => {
+        this.scene.setlegend = obj;
+      });
     },
     // 读取数据
     readGroup() {
       const data = {
-        graphId: "c11fd87cbc654e18a3839f4488edf5b9",
+        graphId: "000423a4afdc421da6c6096cedf48552",
         projectId: 1
       };
       return readGroup(data);

+ 2 - 2
src/components/edit/left_toolbar.vue

@@ -88,13 +88,13 @@
               <div class="title">{{item.Name}}</div>
               <ul class="example">
                 <li
-                  @click="getexampleItem(item)"
+                  @click="getexampleItem(items)"
                   v-for="(items,indexs) in item.GraphElements"
                   :key="indexs"
                 >
                   <img
                     class="item"
-                    src="http://192.168.200.87:8088/topology-wanda/Picture/query/5a011ab5b9fe465cbe35bbdb3fce6c86"
+                    :src="'/serve/topology-wanda/Picture/query/'+ items.Url"
                     alt
                   />
                   <div class="text">{{items.Name}}</div>

+ 22 - 10
src/components/edit/top_toolbar.vue

@@ -36,8 +36,8 @@
               <a-icon type="caret-down" class="down-icon"/>
             </div>
             <a-menu slot="overlay">
-              <a-menu-item v-for="item in alignmentOptions" :key="item.value" @click="changeAlignItem(item.value)">
-                {{item.label}}
+              <a-menu-item  v-for="item in alignmentOptions" :key="item.value" @click="changeAlignItem(item.value)">
+                <img style="width: 16px;margin-right: 5px;" :src="require(`./../../assets/images/`+item.img+`.png`)" alt/> <span>{{item.label}}</span>
               </a-menu-item>
             </a-menu>
           </a-dropdown>
@@ -83,35 +83,43 @@ export default {
       alignmentOptions:[  //对齐数据
         {
           value:SGraphLayoutType.Left,
-          label:'左对齐'
+          label:'左对齐',
+          img: "t-left"
         },
         {
           value:SGraphLayoutType.Right,
-          label:'右对齐'
+          label:'右对齐',
+          img: "t-right"
         },
         {
           value:SGraphLayoutType.Top,
-          label:'顶对齐'
+          label:'顶对齐',
+          img: "t-top"
         },
         {
           value:SGraphLayoutType.Bottom,
-          label:'底对齐'
+          label:'底对齐',
+          img: "t-bottom"
         },
         {
           value:SGraphLayoutType.Center,
-          label:'水平居中对齐'
+          label:'水平居中对齐',
+          img:'t-center'
         },
         {
           value:SGraphLayoutType.Middle,
-          label:'垂直居中对齐'
+          label:'垂直居中对齐',
+          img:'t-topandbottm'
         },
         {
           value:SGraphLayoutType.Vertical,
-          label:'垂直分布'
+          label:'垂直分布',
+          img:'t-vertical'
         },
         {
           value:SGraphLayoutType.Horizontal,
-          label:'水平分布'
+          label:'水平分布',
+          img:'t-level'
         }
       ]
     };
@@ -242,4 +250,8 @@ li {
     }
   }
 }
+  /deep/ .ant-dropdown-menu-item{
+    display: flex;
+    align-items: center;
+  }
 </style>

+ 28 - 4
src/components/mapClass/EditScence.ts

@@ -6,7 +6,8 @@ import { SZoneLegendItem } from "@/lib/items/SZoneLegendItem";
 import { TipelineItem } from "@/lib/items/TipelineItem";
 import { SImgTextItem } from "@/lib/items/SImgTextItem"
 import { SPoint, SFont } from '@saga-web/draw/lib';
-
+import { Legend } from '@/lib/types/Legend';
+import {uuid} from "@/components/mapClass/until"
 
 /**
  * 在线绘图
@@ -54,7 +55,14 @@ export class EditScence extends SGraphScene {
         // // 选择绑定选额item事件
         this.selectContainer.connect("listChange", this, this.listChange);
     }
-
+    /** 绘制图例样式 */
+    _legend: any | null = null;
+    get getlegend(): any {
+        return this._legend;
+    };
+    set setlegend(obj: any) {
+        this._legend = obj;
+    }
     /**
      * 监听变化
      * @param obj 变化后的对象
@@ -130,7 +138,6 @@ export class EditScence extends SGraphScene {
     addPolygonItem(event: SMouseEvent): void {
         //创建item
         const Legend = {
-            ID: 123,
             Name: "哈哈",
             GraphElementType: 'Zone',
             GraphElementId: '123',
@@ -142,8 +149,25 @@ export class EditScence extends SGraphScene {
             },
             Num: 123
         }
+        const LegendData: Legend = {
+            ID:uuid(),
+            Name: this._legend.Name,
+            GraphElementType: this._legend.Type,
+            Num: 0,
+            GraphElementId:this._legend.Id,
+            AttachObjectIds: [],
+            Pos: { x: 0, y: 0 },
+            OutLine: [[new SPoint(event.x, event.y)]],
+            Scale: { X: 1, Y: 1, Z: 1 },          // 缩放
+            Rolate: { X: 0, Y: 0, Z: 0 },
+            Size: { Width: 0, Height: 0 },         // 大小
+            Properties: {
+                strokeColor: this._legend.Color,
+                fillColor: this._legend.FillColor,
+            },
+        }
 
-        const Polylines = new SZoneLegendItem(null, Legend);
+        const Polylines = new SZoneLegendItem(null,LegendData);
         Polylines.selectable = true;
         //设置状态
         Polylines.setStatus = SItemStatus.Create;

+ 27 - 0
src/components/mapClass/until.ts

@@ -0,0 +1,27 @@
+ //rgba转成16进制
+ export function hexify(color:string):string {
+     var values = color
+         .replace(/rgba?\(/, '')
+         .replace(/\)/, '')
+         .replace(/[\s+]/g, '')
+         .split(',')
+     var a = parseFloat(values[3] || 1),
+         r = Math.floor(a * parseInt(values[0]) + (1 - a) * 255),
+         g = Math.floor(a * parseInt(values[1]) + (1 - a) * 255),
+         b = Math.floor(a * parseInt(values[2]) + (1 - a) * 255)
+     return '#' + ('0' + r.toString(16)).slice(-2) + ('0' + g.toString(16)).slice(-2) + ('0' + b.toString(16)).slice(-2)
+ }
+//  生成uuid
+ export function uuid() {
+    var s = [];
+    var hexDigits = "0123456789abcdef";
+    for (var i = 0; i < 36; i++) {
+        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
+    }
+    s[14] = "4";
+    s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);
+    s[8] = s[13] = s[18] = s[23] = "-";
+
+    var uuid = s.join("");
+    return uuid;
+}

+ 16 - 10
src/lib/items/SZoneLegendItem.ts

@@ -2,9 +2,9 @@
 import { SGraphItem } from "@saga-web/graph/lib";
 import { SPolygonItem } from "@/components/mapClass/SPolygonItem";
 import { Legend } from '../types/Legend';
-import { SPainter, SColor, SFont } from "@saga-web/draw";
+import { SPainter, SColor, SFont, SPoint } from "@saga-web/draw";
 import { STextItem } from '@saga-web/graph/lib';
-
+import { hexify } from "@/components/mapClass/until"
 /**
  * 图例节点Item(区域类型)
  *
@@ -64,19 +64,25 @@ export class SZoneLegendItem extends SPolygonItem {
         this.data = data;
         this.id = data.ID;
         if (data) {
-            // 设置轮廓线
-            this.setPointList = data.OutLine ? data.OutLine[0] : [];
+            this.setPointList = [];
+            let setPointList: SPoint[];
+            if (data.OutLine) {
+                setPointList = data.OutLine[0].map(i => {
+                    return (new SPoint(i.X, i.Y))
+                })
+                this.setPointList = setPointList;
+            }
+
             // 设置线宽
             this.lineWidth = data.Properties.lineWidth;
             // 设置线宽颜色
-            this.strokeColor = new SColor(data.Properties.strokeColor);
-            //
-            this.fillColor = new SColor(data.Properties.fillColor) ;
+            this.strokeColor = data.Properties.strokeColor.includes('#') ? new SColor(data.Properties.strokeColor) : new SColor(hexify(data.Properties.strokeColor));
+            this.fillColor = data.Properties.fillColor.includes('#') ? new SColor(data.Properties.fillColor) : new SColor(hexify(data.Properties.fillColor))
         }
     }
-    getData(): Legend {
-        this.data.Properties.fillColor = this.fillColor;
-        this.data.Properties.strokeColor = this.strokeColor;
+    toData(): any {
+        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];
         return this.data;

+ 1 - 1
src/lib/parsers/STopologyParser.ts

@@ -73,7 +73,7 @@ export class STopologyParser extends SParser {
         } else if (t.GraphElementType == SGraphElementType.Line) {
             let item = new SLineLegendItem(null, t)
             this.lineLegendList.push(item);
-        } else if (t.GraphElementType == SGraphElementType.Zone) {
+        } else if (t.GraphElementType == "Zone") {
             let item = new SZoneLegendItem(null, t);
             this.zoneLegendList.push(item);
         } else if (t.GraphElementType == SGraphElementType.Image) {

+ 2 - 1
src/lib/types/Legend.ts

@@ -31,7 +31,7 @@ import { Size } from "@saga-web/big/lib/types/Size";
  */
 export interface Legend {
     /** ID */
-    ID: string;
+    ID?: string;
     /** 名称  */
     Name: string;
     /** 返回工程信息化对象 ID 列表 */
@@ -56,4 +56,5 @@ export interface Legend {
     OutLine?: Point[][];
     /** 由应用自己定义  */
     Properties?: any;
+    Num?: Number
 } // Interface Legend

+ 4 - 3
src/views/editer.vue

@@ -30,7 +30,7 @@ import baseEditerzy from "@/components/baseEditerzy.vue";
 import leftToolbar from "@/components/edit/left_toolbar.vue";
 import topToolbar from "@/components/edit/top_toolbar.vue";
 import rightToolbar from "@/components/edit/right_toolbar.vue";
-
+import bus from "@/bus";
 export default {
   name: "wandaEditer",
   data() {
@@ -49,8 +49,9 @@ export default {
   },
   methods: {
     // 左侧工具栏 点击事件
-    toolActionClick(cmd) {
-     this.cmd = cmd;
+    toolActionClick(item) {
+     this.cmdType = item.Type;
+     bus.$emit('setLenged',item)
     },
     setCmdType(cmdType) {
       this.cmdType = cmdType;

+ 2 - 2
vue.config.js

@@ -14,8 +14,8 @@ module.exports = {
                 },
             },
             "/serve": {
-                target: 'http://192.168.200.87:8088/',
-                //  target: 'http://192.168.200.83:8085/',
+                // target: 'http://192.168.200.87:8088/',
+                 target: 'http://192.168.200.83:8085/',
                 changeOrigin: true,
                 secure: false,
                 pathRewrite: {