Quellcode durchsuchen

feat:调通存储和展示

YaolongHan vor 4 Jahren
Ursprung
Commit
197752e637

+ 4 - 32
package-lock.json

@@ -1080,39 +1080,11 @@
       }
     },
     "@saga-web/feng-map": {
-      "version": "1.0.8",
-      "resolved": "http://192.168.200.80:8081/repository/npm-saga/@saga-web/feng-map/-/feng-map-1.0.8.tgz",
-      "integrity": "sha512-t43r0jYpaUu1Pa1g1Vbbzkqhw6kGX++VuDvEjduCjepNHNJXZFSlFjSwsTy5Zun1dtqMvXzKqThpWcIpEgtZjA==",
+      "version": "1.0.10",
+      "resolved": "http://192.168.200.80:8081/repository/npm-saga/@saga-web/feng-map/-/feng-map-1.0.10.tgz",
+      "integrity": "sha512-TmalJ2Ka3B1z/aK1keD5E3drf4aRhdF3DEFqdZQ16qGIKnC6CXIlO3300iEKekbaqVxl3rBWTGrcHL/PrZZ0PQ==",
       "requires": {
-        "@saga-web/big": "1.0.35"
-      },
-      "dependencies": {
-        "@saga-web/big": {
-          "version": "1.0.35",
-          "resolved": "http://192.168.200.80:8081/repository/npm-saga/@saga-web/big/-/big-1.0.35.tgz",
-          "integrity": "sha512-0VMastxCUglX2mOgIfwJT2uPT9SaMiOwtYlk+J5HQJf1ANwhWkgtYmQ0FPLL0v8l+QhX601iKCQsrZ8UsLagFg==",
-          "requires": {
-            "@saga-web/graph": "2.1.78"
-          }
-        },
-        "@saga-web/graph": {
-          "version": "2.1.78",
-          "resolved": "http://192.168.200.80:8081/repository/npm-saga/@saga-web/graph/-/graph-2.1.78.tgz",
-          "integrity": "sha512-pnNMSY+zy2QuHsMaSTdJs0qVcyuq6yToCGYhpKrLQF4tCcjuaLnAnhvbUHm9Tv8XlWAGGtO8BlXDwOoHK0vxYA==",
-          "requires": {
-            "@saga-web/draw": "2.1.90"
-          },
-          "dependencies": {
-            "@saga-web/draw": {
-              "version": "2.1.90",
-              "resolved": "http://192.168.200.80:8081/repository/npm-saga/@saga-web/draw/-/draw-2.1.90.tgz",
-              "integrity": "sha512-KFICPt9qULAqQbMVXzdKAm/1iIUu0yA7qhJIzzmHrHfyRvofZAu/LVPBIOfNakrmZXkY5g+Bl3z0WboP6b1igg==",
-              "requires": {
-                "@saga-web/base": "^2.1.16"
-              }
-            }
-          }
-        }
+        "@saga-web/big": "1.0.39"
       }
     },
     "@saga-web/graph": {

+ 1 - 1
package.json

@@ -11,7 +11,7 @@
     "@saga-web/base": "2.1.19",
     "@saga-web/big": "1.0.39",
     "@saga-web/draw": "2.1.94",
-    "@saga-web/feng-map": "1.0.8",
+    "@saga-web/feng-map": "1.0.10",
     "@saga-web/graph": "2.1.81",
     "@saga-web/topology": "1.0.84",
     "ant-design-vue": "^1.6.0",

+ 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)

+ 15 - 11
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,6 +134,9 @@ export default {
       bus.$on("deleiteItem", () => {
         this.scene.deleiteItem();
       });
+      bus.$on("changeAlignItem", val => {
+        this.scene.changeAlignItem(val);
+      });
       bus.$on("extractItem", () => {
         const map = {};
         this.fParser.spaceList.forEach(t => {
@@ -181,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);

+ 62 - 8
src/components/edit/top_toolbar.vue

@@ -19,9 +19,21 @@
           <span>重做</span>
         </li>-->
         <li>缩放窗口</li>
-        <li @click="alignItem">
-          <img class="lock" :src="require(`./../../assets/images/t-format.png`)" alt />
-          <span>对齐</span>
+        <li>
+          <a-dropdown :trigger="['click']">
+            <div class="ant-dropdown-link dropdown-flex" @click="e => e.preventDefault()">
+              <div>
+                <img class="lock" :src="require(`./../../assets/images/t-format.png`)" alt/>
+                <div>对齐</div>
+              </div>
+              <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>
+            </a-menu>
+          </a-dropdown>
         </li>
         <!-- <li>
           <a-icon type="edit" />
@@ -55,11 +67,46 @@
 </template>
 <script>
 import bus from "@/bus";
+import {SGraphLayoutType} from "@saga-web/graph/lib";
 export default {
   data() {
     return {
       isLock: false, //是否锁定
-      focusItem: null
+      focusItem: null,
+      alignmentOptions:[  //对齐数据
+        {
+          value:SGraphLayoutType.Left,
+          label:'左对齐'
+        },
+        {
+          value:SGraphLayoutType.Right,
+          label:'右对齐'
+        },
+        {
+          value:SGraphLayoutType.Top,
+          label:'顶对齐'
+        },
+        {
+          value:SGraphLayoutType.Bottom,
+          label:'底对齐'
+        },
+        {
+          value:SGraphLayoutType.Center,
+          label:'水平居中对齐'
+        },
+        {
+          value:SGraphLayoutType.Middle,
+          label:'垂直居中对齐'
+        },
+        {
+          value:SGraphLayoutType.Vertical,
+          label:'垂直分布'
+        },
+        {
+          value:SGraphLayoutType.Horizontal,
+          label:'水平分布'
+        }
+      ]
     };
   },
   methods: {
@@ -99,8 +146,8 @@ export default {
       }
     },
     // 对齐item
-    alignItem() {
-
+    changeAlignItem(val) {
+      bus.$emit("changeAlignItem",val);
     }
   },
   mounted() {
@@ -113,8 +160,8 @@ export default {
 <style lang="less" scoped>
 ul,
 li {
-  margin: 0;
-  padding: 0;
+  /*margin: 0;*/
+  /*padding: 0;*/
   list-style: none;
 }
 #top_toolbar {
@@ -148,6 +195,13 @@ li {
           width: 16px;
           height: 16px;
         }
+        .dropdown-flex{
+          display: flex;
+          align-items: center;
+          .down-icon{
+            margin-left: 12px;
+          }
+        }
       }
     }
   }

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

@@ -7,6 +7,7 @@ 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"
 
 /**
  * 在线绘图
@@ -59,8 +60,8 @@ export class EditScence extends SGraphScene {
     get getlegend(): any {
         return this._legend;
     };
-    set setlegend(obj:any) {
-        this._legend = obj
+    set setlegend(obj: any) {
+        this._legend = obj;
     }
     /**
      * 监听变化
@@ -135,22 +136,37 @@ export class EditScence extends SGraphScene {
      */
     addPolygonItem(event: SMouseEvent): void {
         //创建item
-        // const Legend = {
-        //     ID: 123,
-        //     Name: "哈哈",
-        //     GraphElementType: 'Zone',
-        //     GraphElementId: '123',
-        //     Pos: { x: 0, y: 0 },
-        //     OutLine: [[new SPoint(event.x, event.y)]],
-        //     Properties: {
-        //         strokeColor: '#3d73c0',
-        //         fillColor: '#eda986'
-        //     },
-        //     Num: 123
-        // }
-        const LegendData
+        const Legend = {
+            Name: "哈哈",
+            GraphElementType: 'Zone',
+            GraphElementId: '123',
+            Pos: { x: 0, y: 0 },
+            OutLine: [[new SPoint(event.x, event.y)]],
+            Properties: {
+                strokeColor: '#3d73c0',
+                fillColor: '#eda986'
+            },
+            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, this._legend);
+        const Polylines = new SZoneLegendItem(null,LegendData);
         Polylines.selectable = true;
         //设置状态
         Polylines.setStatus = SItemStatus.Create;
@@ -344,7 +360,8 @@ export class EditScence extends SGraphScene {
      * @param v
      */
     changeAlignItem(v: any): void {
-        this.selectContainer.layout(SGraphLayoutType.v);
+        console.log(v);
+        this.selectContainer.layout(v);
     }
 
     /**

+ 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;
+}

+ 15 - 9
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(区域类型)
  *
@@ -63,19 +63,25 @@ export class SZoneLegendItem extends SPolygonItem {
         super(parent);
         this.data = data;
         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))
         }
     }
     toData(): any {
-        this.data.Properties.fillColor = this.fillColor;
-        this.data.Properties.strokeColor = this.strokeColor;
+        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

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

+ 2 - 2
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() {
@@ -51,7 +51,7 @@ export default {
     // 左侧工具栏 点击事件
     toolActionClick(item) {
      this.cmdType = item.Type;
-     console.log('itemafasdfsadf',item)
+     bus.$emit('setLenged',item)
     },
     setCmdType(cmdType) {
       this.cmdType = cmdType;

+ 6 - 6
vue.config.js

@@ -6,16 +6,16 @@ module.exports = {
             errors: false
         },
         proxy: {
-            "/wanda": {
-                target: "http://map.wanda.cn/editor/fmap/1001724_29",
+            '/wdfn': {
+                target: 'http://map.wanda.cn',
                 changeOrigin: true,
                 pathRewrite: {
-                    "^/wanda": ""
-                }
+                    '^/wdfn': '/editor/fmap',
+                },
             },
             "/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: {