Kaynağa Gözat

feat:调试接口

YaolongHan 4 yıl önce
ebeveyn
işleme
98fd0204aa

+ 17 - 3
src/api/editer.js

@@ -1,8 +1,22 @@
 // 登录校验接口
 import httputils from '@/api/httputils'
-
-
+const serveApi = '/serve/topology-wanda';
+const testApi = '/serve/topology-wanda'
 //获取图例分类结构
 export function queryByGroup(params) {
-    return httputils.getJson(`/serve/topology-wanda/graphCategory/queryByGroup`, params)
+    return httputils.getJson(`${testApi}/graphCategory/queryByGroup`, params)
+}
+
+//查询专业分类下的图例信息并分组
+export function queryGroup(postParams) {
+    return httputils.postJson(`${testApi}/graphRelation/queryGroup`, postParams)
+}
+//保存系统图
+export function saveGroup(postParams) {
+    return httputils.postJson(`${testApi}/graph/save`, postParams)
 }
+
+//查询系统图展示所需数据
+export function readGroup(postParams) {
+    return httputils.postJson(`${testApi}/graph/read?graphId=9afae5a3208f4ee4be4ebaed19cca47b&projectId=1`, postParams)
+}

+ 30 - 14
src/components/baseEditer.vue

@@ -12,6 +12,7 @@ import { SFloorParser } from "@saga-web/big";
 import { FloorView } from "./../lib/FloorView";
 import { EditScence } from "./mapClass/EditScence";
 import bus from "@/bus";
+import { saveGroup, readGroup } from "@/api/editer.js";
 export default {
   props: {
     cmd: {
@@ -45,6 +46,11 @@ export default {
     this.init();
     // 挂在bus
     this.getBus();
+    // 测试read数据
+    const data = {
+
+    };
+    readGroup(data);
   },
   methods: {
     init() {
@@ -74,7 +80,7 @@ export default {
         });
         this.view.scene = this.scene;
         this.view.fitSceneToView();
-        // this.$loading.close(loadings)
+        this.$loading.close(loadings);
       });
       this.scene.emitChange = this.emitChange;
     },
@@ -122,33 +128,43 @@ export default {
       bus.$on("changebackColor", val => {
         this.scene.updatedbackColor(val);
       });
-<<<<<<< HEAD
-      bus.$on("deleiteItem", () => {
-        this.scene.deleiteItem();
-      });
-=======
       bus.$on("extractItem", () => {
-        const map = {}
+        const map = {};
         this.fParser.spaceList.forEach(t => {
           if (map[t.data.Type]) {
-            map[t.data.Type]++
+            map[t.data.Type]++;
           } else {
             map[t.data.Type] = 1;
           }
-        })
+        });
         const data = [];
         for (const key in map) {
           data.push({
             key: key,
             name: key,
-            age: '',
+            age: "",
             number: map[key],
             address: "提取"
-          })
+          });
         }
-        bus.$emit('exportItem',data)
-      })
->>>>>>> 21575eaae2b540d7cb1e3e4401e1dbc90a7d279a
+        bus.$emit("exportItem", data);
+      });
+      bus.$on("saveMsgItem", () => {
+        const Elements = this.scene.saveMsgItem();
+        const data = {
+          Elements,
+          // ID: "11",
+          Name: "1", // 名称
+          CategoryID: "1", // 图分类ID
+          ProjectID: "1", // 项目ID
+          BuildingID: "1", // 建筑ID
+          FloorID: "1", // 楼层id
+          Note: "1" // 图说明
+        };
+        saveGroup(data).then(res => {
+          console.log("aaaaaaaaaaaaaa", res);
+        });
+      });
     }
   },
   watch: {

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

@@ -77,35 +77,34 @@
           @close="onClose"
           :getContainer="false"
         >
-          <div class="drawer-model-body" v-show="activeItem ==1 || activeItem ==2">
+          <div class="drawer-model-body">
             <div class="btn-list">
               <a-button-group>
                 <a-button type="primary">绘制</a-button>
                 <a-button>点选</a-button>
               </a-button-group>
             </div>
-            <div class="list" v-show="activeItem ==1">
-              <div class="title">消防系统</div>
+            <div class="list" v-for="(item,index) in itemList" :key="index">
+              <div class="title">{{item.Name}}</div>
               <ul class="example">
-                <li @click="getexampleItem">
-                  <div class="item"></div>
-                  <div class="text">防火风区</div>
-                </li>
-              </ul>
-            </div>
-            <div class="list" v-show="activeItem ==2">
-              <div class="title">消防系统</div>
-              <ul class="example">
-                <li @click="getexampleItem">
-                  <div class="item-pip"></div>
-                  <div class="text">防火风区</div>
+                <li
+                  @click="getexampleItem"
+                  v-for="(items,indexs) in item.GraphElements"
+                  :key="indexs"
+                >
+                  <img
+                    class="item"
+                    src="http://192.168.200.87:8088/topology-wanda/Picture/query/5a011ab5b9fe465cbe35bbdb3fce6c86"
+                    alt
+                  />
+                  <div class="text">{{items.Name}}</div>
                 </li>
               </ul>
             </div>
           </div>
-          <div class="drawer-model-body drawer-model-body-extract" v-show="activeItem ==3">
+          <!-- <div class="drawer-model-body drawer-model-body-extract" v-show="activeItem ==3">
             <a-table :columns="columns" :data-source="data" size="small" :pagination="false" />
-          </div>
+          </div>-->
         </a-drawer>
       </div>
     </transition>
@@ -113,8 +112,9 @@
 </template>
 <script>
 import itemTree from "./leftbar_components/itemTree";
-import {queryByGroup} from "@/api/editer.js"
 import bus from "@/bus";
+import { queryGroup } from "@/api/editer.js";
+import { mapState, mapActions } from "vuex";
 const columns = [
   {
     title: "名称",
@@ -203,25 +203,27 @@ export default {
           hoverImg: "t-position-hover.png", //hoverlogo
           isHover: false, //是否hover
           isChoice: false,
-          name: "位置区域" //类型
+          name: "位置区域", //类型
+          type: "Zone"
         },
         {
           img: "t-equipment.png", //logo
           hoverImg: "t-equipment-hover.png", //hoverlogo
           isHover: false, //是否hover
           isChoice: false,
-          name: "设备设施" //类型
+          name: "设备设施", //类型
+          type: "Image"
         },
         {
           img: "t-papeline.png", //logo
           hoverImg: "t-papeline-hover.png", //hoverlogo
           isHover: false, //是否hover
           isChoice: false,
-          name: "管线桥架" //类型
+          name: "管线桥架", //类型
+          type: "Line"
         }
       ],
       visible: false,
-      activeItem: 1,
       //提取
       extractChoice: [
         {
@@ -232,9 +234,15 @@ export default {
         }
       ],
       data,
-      columns
+      columns,
+      itemList: [] //图例数组
     };
   },
+  computed: {
+    ...mapState({
+      GraphCategoryIds: "GraphCategoryIds"
+    })
+  },
   methods: {
     // 触入
     mouseoverActive(item) {
@@ -268,21 +276,20 @@ export default {
         if (this.visible) {
           this.visible = false;
           setTimeout(() => {
-            if (item.name == "管线桥架") {
-              this.activeItem = 2;
-            } else {
-              this.activeItem = 1;
-            }
             this.visible = true;
           }, 300);
         } else {
-          if (item.name == "管线桥架") {
-            this.activeItem = 2;
-          } else {
-            this.activeItem = 1;
-          }
           this.visible = true;
         }
+        // 打开侧边框
+        // 接口请求
+        const arr = {
+          GraphCategoryIds: ["NTXT"],
+          Type: item.type
+        };
+        queryGroup(arr).then(res => {
+          this.itemList = res.Data;
+        });
       }
     },
     onClose() {
@@ -293,24 +300,18 @@ export default {
     },
     getexampleItem() {
       this.visible = false;
-      let item = 5;
-      if (this.activeItem == 1) {
-        item = 4;
-      } else {
-        item = 5;
-      }
+      const item = 4
       this.$emit("toolActionClick", item);
     },
     // 提取元素
     extractItem() {
       this.visible = !this.visible;
-      this.activeItem = 3;
-      bus.$emit("extractItem")
+      bus.$emit("extractItem");
     },
-    getBus(){
+    getBus() {
       bus.$on("exportItem", data => {
         this.data = data;
-      })
+      });
     }
   },
   watch: {
@@ -326,9 +327,10 @@ export default {
   mounted() {
     const ele = document.getElementById("drawer-model");
     ele.style.width = document.body.offsetWidth - 70 + "px";
-
     this.getBus();
-  }
+    console.log(this.GraphCategoryIds);
+  },
+  created() {}
 };
 </script>
 <style lang="less">
@@ -488,10 +490,8 @@ export default {
               background: #e1f2ff;
             }
             .item {
-              width: 28px;
-              height: 16px;
-              background: #bbdfff;
-              border: #0091ff solid 1px;
+              width: 54px;
+              height: 32px;
               margin: 0 auto;
             }
             .item-pip {

+ 2 - 1
src/components/edit/top_toolbar.vue

@@ -85,7 +85,8 @@ export default {
       }
     },
     saveMsg() {
-      this.$message.success("保存成功!", 1);
+      // this.$message.success("保存成功!", 1);
+       bus.$emit("saveMsgItem");
     },
     // 删除item
     deleteItem() {

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

@@ -1,12 +1,12 @@
 import { SMouseEvent, SUndoStack } from "@saga-web/base";
-import { SGraphScene,SGraphLayoutType } from '@saga-web/graph/lib';
-import { SPoint, SFont } from '@saga-web/draw/lib';
+import { SGraphScene, SGraphLayoutType } from '@saga-web/graph/lib';
+import { SPoint, SFont, SColor } from '@saga-web/draw/lib';
 import { SFloorParser, SLineItem, SPolylineItem, SItemStatus, ItemOrder } from "@saga-web/big";
 import { SGraphItem, SImageItem, STextItem, SGraphPointListInsert, SGraphPointListDelete, SGraphPointListUpdate, SGraphAddCommand } from "@saga-web/graph/lib";
-import { SPolygonItem } from "./SPolygonItem";
+// import { SZoneLegendItem } from "./SZoneLegendItem";
 import { TipelineItem } from "@/lib/TipelineItem";
 import { SImgTextItem } from "@/lib/SImgTextItem"
-
+import { SZoneLegendItem } from "@/lib/items/SZoneLegendItem"
 
 /**
  * 在线绘图
@@ -42,6 +42,13 @@ export class EditScence extends SGraphScene {
 
     /** 当前选中焦点Item */
     focusItem: SGraphItem | null = null;
+
+    /**图例节点 */
+    Nodes: any = [];  // 图例节点,所有与工程信息化相关的图例(图标类型与区域)
+    /**图例节点 */  // 与工程信息无关的标识对象(增加文本注释,图上的图片说明)
+    Markers: any = [];
+    /**  管线对象 */
+    Relations: any = [];
     constructor() {
         super();
         // // 选择绑定选额item事件
@@ -62,7 +69,7 @@ export class EditScence extends SGraphScene {
             itemType = 'line'
         } else if (obj.itemList[0] instanceof SPolylineItem) {
             itemType = 'pipeline'
-        } else if (obj.itemList[0] instanceof SPolygonItem) {
+        } else if (obj.itemList[0] instanceof SZoneLegendItem) {
             itemType = 'position'
         } else if (obj.itemList[0] instanceof SImgTextItem) {
             itemType = 'equipment'
@@ -121,7 +128,21 @@ export class EditScence extends SGraphScene {
      */
     addPolygonItem(event: SMouseEvent): void {
         //创建item
-        const Polylines = new SPolygonItem(null);
+        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 Polylines = new SZoneLegendItem(null, Legend);
         Polylines.selectable = true;
         //设置状态
         Polylines.setStatus = SItemStatus.Create;
@@ -133,6 +154,7 @@ export class EditScence extends SGraphScene {
         Polylines.connect("finishCreated", this, this.finishCreated);
         this.grabItem = Polylines;
         this.focusItem = Polylines;
+        this.Nodes.push(Polylines)
     }
 
     /**
@@ -321,6 +343,19 @@ export class EditScence extends SGraphScene {
         console.log(this)
     }
 
+]   /**
+     * 保存数据
+     */
+    saveMsgItem(): any {
+        const Nodes: any = []
+        this.Nodes.forEach(e => {
+            Nodes.push(e.toData())
+        });
+        let element = {
+            Nodes
+        }
+        return element
+    }
     /**
      * 锁住item
      */
@@ -381,7 +416,6 @@ export class EditScence extends SGraphScene {
      * @param	event         事件参数
      * @return	boolean
      */
-
     onKeyDown(event: KeyboardEvent): any {
         if (this.grabItem) {
             this.grabItem.onKeyDown(event);

+ 31 - 11
src/components/mapClass/SPolygonItem.ts

@@ -77,11 +77,31 @@ export class SPolygonItem extends SGraphItem {
     };
     data: any | null = null;
     /** 边框颜色 */
-    borderColor: SColor = new SColor("#0091FF");
+    _strokeColor: SColor = new SColor("#0091FF");
+    /**  画笔颜色 */
+    get strokeColor(): SColor {
+        return this._strokeColor
+    };
+    set strokeColor(v: SColor) {
+        this._strokeColor = v
+    }
     /** 填充颜色 */
-    brushColor: SColor = new SColor("#1EE887");
-    /** border宽 只可输入像素宽*/
-    borderLine: number = 4;
+    _fillColor: SColor = new SColor("#1EE887");
+    get fillColor(): SColor {
+        return this._fillColor
+    };
+    set fillColor(v: SColor) {
+        this._fillColor = v
+    }
+
+    /** 边框的宽 只可输入像素宽*/
+    _lineWidth: number = 4;
+    get lineWidth(): number {
+        return this._lineWidth
+    }
+    set lineWidth(v: number) {
+        this._lineWidth = v
+    };
     /** 鼠标移动点  */
     private lastPoint: SPoint | null = null;
     /** 当前鼠标获取顶点对应索引 */
@@ -197,9 +217,9 @@ export class SPolygonItem extends SGraphItem {
      */
     protected drawShowPolygon(painter: SPainter, pointList: SPoint[]): void {
         painter.pen.lineCapStyle = SLineCapStyle.Square;
-        painter.pen.color = this.borderColor;
-        painter.pen.lineWidth = painter.toPx(this.borderLine);
-        painter.brush.color = this.brushColor;
+        painter.pen.color = this._strokeColor;
+        painter.pen.lineWidth = painter.toPx(this._lineWidth);
+        painter.brush.color = this._fillColor;
         painter.drawPolygon([...pointList]);
     }
 
@@ -212,15 +232,15 @@ export class SPolygonItem extends SGraphItem {
      */
     protected drawCreatePolygon(painter: SPainter, pointList: SPoint[]): void {
         painter.pen.lineCapStyle = SLineCapStyle.Square;
-        painter.pen.color = this.borderColor;
-        painter.pen.lineWidth = painter.toPx(this.borderLine);
+        painter.pen.color = this._strokeColor;
+        painter.pen.lineWidth = painter.toPx(this._lineWidth);
         if (this.lastPoint && pointList.length) {
             painter.drawLine(pointList[pointList.length - 1].x, pointList[pointList.length - 1].y, this.lastPoint.x, this.lastPoint.y);
         }
         painter.drawPolyline(pointList);
         painter.pen.color = SColor.Transparent;
-        painter.brush.color = this.brushColor;
-        painter.pen.lineWidth = painter.toPx(this.borderLine);
+        painter.brush.color = this._fillColor;
+        painter.pen.lineWidth = painter.toPx(this._lineWidth);
         if (this.lastPoint) {
             painter.drawPolygon([...pointList, this.lastPoint]);
         } else {

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

@@ -1,7 +1,9 @@
 
 import { SGraphItem } from "@saga-web/graph/lib";
-import { SPolygonItem } from "@saga-web/big/lib";
+import { SPolygonItem } from "@/components/mapClass/SPolygonItem";
 import { Legend } from '../types/Legend';
+import { SPainter, SColor, SFont } from "@saga-web/draw";
+import { STextItem } from '@saga-web/graph/lib';
 
 /**
  * 图例节点Item(区域类型)
@@ -12,6 +14,45 @@ export class SZoneLegendItem 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(): string {
+        return this.textItem.color;
+    }
+    set color(v: string) {
+        this.textItem.color = v
+    }
+    get font(): SFont {
+        return this.textItem.font
+    }
+    set font(v: SFont) {
+        this.textItem.font = v
+    }
+    /** 是否显示文字  */
+    _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();
+        }
+    }
+
     /**
      * 构造函数
      *
@@ -21,5 +62,23 @@ export class SZoneLegendItem extends SPolygonItem {
     constructor(parent: SGraphItem | null, data: Legend) {
         super(parent);
         this.data = data;
+        if (data) {
+            // 设置轮廓线
+            this.setPointList = data.OutLine ? data.OutLine[0] : [];
+            // 设置线宽
+            this.lineWidth = data.Properties.lineWidth;
+            // 设置线宽颜色
+            this.strokeColor = new SColor(data.Properties.strokeColor)
+            //
+            this.fillColor = new SColor(data.Properties.fillColor) ;
+        }
+    }
+    toData(): any {
+        this.data.Properties.fillColor = this.fillColor;
+        this.data.Properties.strokeColor = this.strokeColor;
+        this.data.Properties.lineWidth = this.lineWidth;
+        this.data.OutLine = [this.getPointList];
+        return this.data;
     }
+
 } // Class SZoneLegendItem

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

@@ -21,7 +21,7 @@
 import { Point } from "../Point";
 import { Size } from "../Size";
 import { Anchor } from "./Anchor";
-import { SGraphElementType } from "../../enums/SGraphElementType";
+import { SGraphElementType } from "./../enums/SGraphElementType";
 
 /**
  * 图例节点接口

+ 1 - 0
src/store/index.ts

@@ -5,6 +5,7 @@ Vue.use(Vuex)
 
 export default new Vuex.Store({
   state: {
+    GraphCategoryIds: ['NTXT'] //系统类型
   },
   mutations: {
   },

+ 2 - 1
vue.config.js

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