Browse Source

fix:icon图标联动

YaolongHan 4 years ago
parent
commit
6df746b5d1

+ 4 - 0
src/components/baseEditer.vue

@@ -289,6 +289,10 @@ export default {
       bus.$on("changeLengedName", val => {
         this.scene.upadataLengedName(val);
       });
+         // 改变图例名称
+      bus.$on("changeImageNum", val => {
+        this.scene.upadatImageNum(val);
+      });
     },
     // 读取数据
     readGroup() {

+ 0 - 167
src/components/baseEditertest.vue

@@ -1,167 +0,0 @@
-<template>
-  <div id="baseEditer">
-    <div id="fengMap"></div>
-    <div class="canvas-container" ref="graphy">
-      <a-button type="primary" @click="undo">取消</a-button>
-      <a-button type="primary" @click="redo">回复</a-button>
-      <canvas id="canvas" :width="canvasWidth" :height="canvasHeight" ref="canvas" tabindex="0"></canvas>
-    </div>
-  </div>
-</template>
-<script>
-import { SFengParser } from "@saga-web/feng-map";
-import { SFloorParser } from "@saga-web/big";
-import { SPoint } from "@saga-web/draw";
-import { SGraphyView, SGraphyScene } from "@saga-web/graphy/lib";
-import { SPolygonItem } from "./mapClass/SPolygonItem";
-import { FloorView } from "./../lib/FloorView";
-export default {
-  data() {
-    return {
-      appName: "万达可视化系统",
-      key: "23f30a832a862c58637a4aadbf50a566",
-      mapServerURL: "/wanda",
-      fmapID: "1001724_29",
-      fmap: null,
-      canvasWidth: 700,
-      canvasHeight: 800,
-      fParser: null,
-      item: null
-    };
-  },
-  mounted() {
-    this.canvasWidth = this.$refs.graphy.offsetWidth;
-    this.canvasHeight = this.$refs.graphy.offsetHeight;
-    this.init();
-  },
-  methods: {
-    init() {
-      // document.getElementById(`canvas`).focus()
-      this.clearGraphy();
-      this.scene = new SGraphyScene();
-      // this.fmap = new SFengParser(
-      //   "fengMap",
-      //   this.mapServerURL,
-      //   this.key,
-      //   this.appName,
-      //   null
-      // );
-      // console.log(this.fmap);
-      // this.fmap.parseData("1001724_29", 1, res => {
-      // console.log(res);
-      // this.fParser = new SFloorParser(null);
-      // console.log(this.fParser);
-      // this.fParser.parseData(res);
-      // this.fParser.spaceList.forEach(t => this.scene.addItem(t));
-      // this.fParser.wallList.forEach(t => this.scene.addItem(t));
-      // this.fParser.virtualWallList.forEach(t => this.scene.addItem(t));
-      // this.fParser.doorList.forEach(t => this.scene.addItem(t));
-      // this.fParser.columnList.forEach(t => this.scene.addItem(t));
-      // this.fParser.casementList.forEach(t => this.scene.addItem(t));
-      this.addPolyLine();
-      // this.DirectRelationItem();
-      this.view.scene = this.scene;
-      this.view.fitSceneToView();
-      // });
-    },
-    // 引入构建多边形类
-    addPolyLine() {
-      const PointList = [
-        new SPoint(0, 0),
-        new SPoint(50, 0),
-        new SPoint(50, 50),
-        new SPoint(0, 50)
-      ];
-      const Polylines = new SPolygonItem(null);
-      Polylines.status = 3;
-      // Polylines.setPointList = PointList
-      this.scene.addItem(Polylines);
-      this.scene.grabItem = Polylines;
-      this.item = Polylines;
-    },
-    undo() {
-      this.item.undo();
-    },
-    redo() {
-      this.item.redo();
-    },
-    // 引入折线
-    DirectRelationItem() {
-      const data = {
-        PointList: [
-          { X: -138.71000000089407, Y: -17.5 },
-          { X: -130.31000000052154, Y: -17.5 }
-        ]
-      };
-      const directRelationItem = new DirectRelationItem(null, data);
-      this.scene.addItem(directRelationItem);
-    },
-    clearGraphy() {
-      if (this.view) {
-        this.view.scene = null;
-        return;
-      }
-      this.view = new FloorView("canvas");
-      document.getElementById("canvas").focus();
-    },
-    spaceClick(space, event) {
-      const item = new SImageItem(null, {
-        Width: 32,
-        Height: 32,
-        Url:
-          "https://dss2.bdstatic.com/6Ot1bjeh1BF3odCf/it/u=1569891320,3644984535&fm=85&app=52&f=JPEG?w=121&h=75&s=891B0FD8964406EF8091EA200300E056"
-      });
-      item.moveTo(event[0].x, event[0].y);
-      item.zOrder = 999;
-      item.connect("mousedown", this, this.iconClick);
-      this.scene.addItem(item);
-      setInterval(() => {
-        item.text += "魔";
-      }, 1000);
-    },
-    iconClick(item, event) {
-      console.log(2222222222222);
-    },
-    changeFloor() {},
-    changeStatus(name) {
-      switch (name) {
-        case "选择":
-          // test init
-          this.init();
-          break;
-        case "画线":
-          this.scene.isLining = true;
-          console.log("lining");
-          break;
-        case "画文字":
-          this.scene.isTexting = true;
-          break;
-        case "画图片":
-          this.scene.isImging = true;
-          break;
-        default:
-          console.log(name);
-          break;
-      }
-    }
-  }
-};
-</script>
-<style lang="less" scoped>
-#baseEditer {
-  background: #ccc;
-  width: 100%;
-  height: 100%;
-  // position: relative;
-  #fengMap {
-    position: absolute;
-    width: 100px;
-    height: 100px;
-    z-index: -1;
-  }
-  .canvas-container {
-    width: 100%;
-    height: 100%;
-  }
-}
-</style>

+ 0 - 168
src/components/baseEditerzy.vue

@@ -1,168 +0,0 @@
-<!--
- * @Author: zhangyu
- * @Date: 2020-06-03 17:21:15
- * @Info: 
- * @LastEditTime: 2020-06-20 14:33:27
---> 
-<template>
-  <div id="baseEditer">
-    <div id="fengMap"></div>
-    <div class="canvas-container" ref="graphy">
-      <canvas id="canvas" :width="canvasWidth" :height="canvasHeight" ref="canvas" tabindex="0"></canvas>
-    </div>
-  </div>
-</template>
-<script>
-import { SFengParser } from "@saga-web/feng-map";
-import { SPoint } from "@saga-web/draw/lib";
-import { SFloorParser, SImageItem, STextItem, SLineItem, SPolylineItem } from "@saga-web/big";
-import { SPolygonItem } from "./mapClass/SPolygonItem";
-import { FloorView } from "./../lib/FloorView"
-import { FloorScene } from "./../lib/FloorScene"
-export default {
-  data() {
-    return {
-      appName: "万达可视化系统",
-      key: "23f30a832a862c58637a4aadbf50a566",
-      mapServerURL: "/wanda",
-      fmapID: "1001724_29",
-      fmap: null,
-      canvasWidth: 700,
-      canvasHeight: 800,
-      fParser: null,
-      scene: null,
-      view: null
-    };
-  },
-  mounted() {
-    this.canvasWidth = this.$refs.graphy.offsetWidth;
-    this.canvasHeight = this.$refs.graphy.offsetHeight;
-    this.init()
-  },
-  methods: {
-    init() {
-      document.getElementById(`canvas`).focus()
-      this.clearGraphy();
-      this.scene = new FloorScene();
-      this.fmap = new SFengParser(
-        "fengMap",
-        this.mapServerURL,
-        this.key,
-        this.appName,
-        null
-      );
-      console.log(this.fmap);
-      this.fmap.parseData("1001724_29", 6, res => {
-        console.log(res);
-        this.fParser = new SFloorParser(null);
-        console.log(this.fParser);
-        this.fParser.parseData(res);
-        this.fParser.spaceList.forEach(t => {
-          t.connect('clicjnnmnk', this, this.spaceClick)
-          this.scene.addItem(t)
-        });
-        this.fParser.wallList.forEach(t => this.scene.addItem(t));
-        this.fParser.virtualWallList.forEach(t => this.scene.addItem(t));
-        this.fParser.doorList.forEach(t => this.scene.addItem(t));
-        this.fParser.columnList.forEach(t => this.scene.addItem(t));
-        this.fParser.casementList.forEach(t => this.scene.addItem(t));
-        // this.addPolyLine();
-        // this.DirectRelationItem();
-        this.view.scene = this.scene;
-        this.view.fitSceneToView();
-      });
-    },
-    // 引入构建多边形类
-    addPolyLine() {
-      const data = {
-        PointList: [
-          { X: -138.71000000089407, Y: -17.5 },
-          { X: -130.31000000052154, Y: -17.5 },
-          { X: -130.31000000052154, Y: -25.5 },
-          { X: -138.71000000089407, Y: -25.5 }
-        ]
-      };
-      const Polylines = new SPolygonItem(null);
-      Polylines.status = 2;
-      this.scene.addItem(Polylines);
-      this.scene.grabItem = Polylines;
-    },
-    // 引入折线
-    // DirectRelationItem() {
-    //   const data = {
-    //     PointList: [
-    //       { X: -138.71000000089407, Y: -17.5 },
-    //       { X: -130.31000000052154, Y: -17.5 }
-    //     ]
-    //   };
-    //   const directRelationItem = new DirectRelationItem(null, data);
-    //   this.scene.addItem(directRelationItem);
-    // },
-    clearGraphy() {
-      if (this.view) {
-        this.view.scene = null;
-        return;
-      }
-      this.view = new FloorView("canvas");
-      document.getElementById('canvas').focus()
-    },
-    spaceClick(space, event) {
-      // const item = new SImageItem(null, {
-      //   Width: 32,
-      //   Height: 32,
-      //   Url: "https://dss2.bdstatic.com/6Ot1bjeh1BF3odCf/it/u=1569891320,3644984535&fm=85&app=52&f=JPEG?w=121&h=75&s=891B0FD8964406EF8091EA200300E056"
-      // })
-      // const item = new SImageItem(null);
-      // item.moveTo(event[0].x, event[0].y)
-      // item.url = 'https://dss2.bdstatic.com/6Ot1bjeh1BF3odCf/it/u=1569891320,3644984535&fm=85&app=52&f=JPEG?w=121&h=75&s=891B0FD8964406EF8091EA200300E056'
-      // item.font.size = 12;
-      // item.zOrder = 999;
-      // item.connect('mousedown', this, this.iconClick)
-      // this.scene.addItem(item)
-      // setInterval(() => { item.text += '魔' }, 1000)
-    },
-    iconClick(item, event) {
-      console.log(2222222222222)
-    },
-    // changeFloor() { },
-    changeStatus(name) {
-      switch (name) {
-        case '选择':
-          // test init
-          this.init();
-          break;
-        case '画线':
-          this.scene.isLining = true;
-          break;
-        case '画文字':
-          this.scene.isTexting = true;
-          break;
-        case '画图片':
-          this.scene.isImging = true;
-          break;
-        default:
-          console.log(name)
-          break;
-      }
-    }
-  }
-};
-</script>
-<style lang="less" scoped>
-#baseEditer {
-  background: #ccc;
-  width: 100%;
-  height: 100%;
-  // position: relative;
-  #fengMap {
-    position: absolute;
-    width: 100px;
-    height: 100px;
-    z-index: -1;
-  }
-  .canvas-container {
-    width: 100%;
-    height: 100%;
-  }
-}
-</style>

+ 22 - 15
src/components/edit/attr_select.vue

@@ -120,31 +120,26 @@
       <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"
-          />
+          <a-input-number v-model="fontSize" :min="1" @change="changeFont" style="width: 168px" />
         </div>
         <div class="color-choice">
           <swatches v-model="color" popover-x="left" />
         </div>
       </div>
       <!-- 当为设备状态时 -->
-      <div class="row" v-if="type =='equipment'">
+      <div class="row" v-if="type =='Image'">
         <div class="row-tit">数量</div>
         <div class="grid-content">
           <a-input-number
-            v-model="lineWidth"
+            v-model="imageNum"
             :min="1"
-            @change="changeLineWidth"
+            @change="changeImageNum"
             style="width: 208px"
           />
         </div>
       </div>
       <!-- 当为管道状态时 -->
-      <div class="row" v-if="type =='pipeline'">
+      <div class="row" v-if="type =='Line'">
         <div class="row-tit">线宽</div>
         <div class="grid-content">
           <a-input-number
@@ -253,7 +248,8 @@ export default {
         position: "编辑区域"
       },
       swatchess: ["#57C5FC", "#5F70E1", "#4DAE6C", "#028FAA"],
-      lengedName:'' // 图例名称
+      lengedName: "", // 图例名称
+      imageNum: 1 //设备数量
     };
   },
   methods: {
@@ -305,8 +301,8 @@ export default {
       });
     },
     //更改图例名称
-    changeLengedName(){
-      bus.$emit("changeLengedName",this.lengedName);
+    changeLengedName() {
+      bus.$emit("changeLengedName", this.lengedName);
     },
     changeImage(info) {
       const status = info.file.status;
@@ -322,6 +318,13 @@ export default {
     },
     handleEdit() {
       this.$refs.dialog.showModal();
+    },
+    // 修改设备数量
+    changeImageNum() {
+      if (!this.imageNum) {
+        this.imageNum = 1;
+      }
+      bus.$emit("changeImageNum", this.imageNum);
     }
   },
   watch: {
@@ -336,8 +339,12 @@ export default {
         } else if (newval.itemType == "baseLine") {
           this.lineWidth = Item.lineWidth;
           this.borderColor = Item.strokeColor;
-        }else if(newval.itemType == "Zone" || newval.itemType == "Line" || newval.itemType == "Image"){
-          this.lengedName=Item.data.Name
+        } else if (
+          newval.itemType == "Zone" ||
+          newval.itemType == "Line" ||
+          newval.itemType == "Image"
+        ) {
+          this.lengedName = Item.data.Name;
         }
       }
     }

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

@@ -2,7 +2,8 @@
   <div id="top_toolbar">
     <!-- 顶部编辑器 -->
     <div class="tit">
-      <a-icon type="left" />消防系统-4F
+      <!-- <a-icon type="left" /> -->
+      {{this.urlMsg.floorName}}
     </div>
     <div class="tool">
       <ul>
@@ -17,7 +18,7 @@
         <li>
           <a-icon type="edit" />
           <span>重做</span>
-        </li> -->
+        </li>-->
         <li class="zoom-window">
           <div>
             <img class="lock" :src="require(`./../../assets/images/缩小.png`)" alt />
@@ -175,6 +176,29 @@ export default {
       console.log("itemMsg", itemMsg);
       this.FocusItemChanged(itemMsg);
     });
+  },
+  created() {
+    const href = window.location.href;
+    // 路由
+    // const route = href.split("?")[0];
+    // 参数处理
+    let params = href.split("?")[1];
+    if (!params) {
+      // 参数有问题
+      return false;
+    }
+    params = decodeURIComponent(params);
+    // params = "categoryId=NTXT&ProjectID=5&BuildingID=1&FloorID=1"; // mock 参数
+    const paramsArr = params.split("&");
+    console.log("paramsArr", paramsArr);
+    const obj = {};
+    paramsArr.map(item => {
+      const arr = item.split("=");
+      obj[arr[0]] = arr[1];
+    });
+    this.urlMsg = obj;
+    // ///////////测试代码
+    this.urlMsg.floorName = "消防系统-4F";
   }
 };
 </script>

+ 11 - 3
src/components/mapClass/EditScence.ts

@@ -291,7 +291,6 @@ export class EditScence extends SGraphScene {
      * 增加图标lenged图标
      */
     addIconItem(event: SMouseEvent): void {
-        console.log('this._legend.url', this._legend)
         const LegendData: Legend = {
             ID: uuid(),
             Name: this._legend.Name,
@@ -304,7 +303,8 @@ export class EditScence extends SGraphScene {
             Rolate: { X: 0, Y: 0, Z: 0 },
             Size: { Width: 0, Height: 0 },         // 大小
             Properties: {
-                Url: '/serve/topology-wanda/Picture/query/' + this._legend.Url
+                Url: '/serve/topology-wanda/Picture/query/' + this._legend.Url,
+                Num: 1, // 此num与信息工程化得num无关
             },
         }
         const item = new SImageLegendItem(null, LegendData);
@@ -474,13 +474,21 @@ export class EditScence extends SGraphScene {
      * @param val string border类型
      */
     upadataLengedName(val: string): void {
-        console.log('xxxxxxx',val,this.focusItem)
         if (this.focusItem && this.focusItem.data) {
             this.focusItem.text= val
         }
     }
 
     /**
+     * 更改item Num数量
+     * @param num number item数量 (只对icon设备类)
+     */
+    upadatImageNum(num: number): void {
+        if (this.focusItem && this.focusItem.num) {
+            this.focusItem.num= num
+        }
+    }
+    /**
      * 删除指定item
      */
     deleiteItem(): void {

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

@@ -27,6 +27,7 @@ export class SImageLegendItem extends SImgTextItem {
             this._num = 1;
             this.data.Num = 1;
         }
+        this.text = `${this.data.Num > 1?` × ${this.data.Num}`:''}`;
         this.update();
     }
 
@@ -51,7 +52,7 @@ export class SImageLegendItem extends SImgTextItem {
             this.height = data.Size.Height;
         }
         if (data.Num) {
-            this.text = `${data.Name}${data.Num > 1?` × ${data.Num}`:''}`;
+            this.text = `${data.Num > 1?` × ${data.Num}`:''}`;
         }
         if (data.Properties && data.Properties.Url) {
             this.img.url = data.Properties.Url;

+ 0 - 4
src/views/editer.vue

@@ -30,8 +30,6 @@
 
 <script>
 import baseEditer from "@/components/baseEditer.vue";
-import baseEditertest from "@/components/baseEditertest.vue";
-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";
@@ -46,8 +44,6 @@ export default {
   },
   components: {
     baseEditer,
-    // baseEditertest,
-    // baseEditerzy,
     leftToolbar,
     topToolbar,
     rightToolbar