YaolongHan 4 年之前
父節點
當前提交
f1ee887bf0
共有 6 個文件被更改,包括 529 次插入423 次删除
  1. 402 402
      package-lock.json
  2. 2 2
      src/api/editer.js
  3. 51 2
      src/components/baseEditer.vue
  4. 1 1
      src/components/edit/edit-dialog.vue
  5. 72 15
      src/components/edit/top_toolbar.vue
  6. 1 1
      src/views/editer.vue

File diff suppressed because it is too large
+ 402 - 402
package-lock.json


+ 2 - 2
src/api/editer.js

@@ -37,8 +37,8 @@ export function queryGlsmsasset(data,params){
 }
 
 // 查询楼层清单
-export function getPlazaFloor(data,params){
-    return httputils.postJson(`${dataApi}/plaza/floor?plazaId=${data.plazaId}`, params)
+export function getPlazaFloor(data){
+    return httputils.getJson(`${dataApi}/data/plaza/floor`, data)
 }
 // 查询专业系统
 export function getQuerySmsxt(params){

+ 51 - 2
src/components/baseEditer.vue

@@ -49,7 +49,12 @@ export default {
       urlMsg: {},
       chiceItemList: [], //选中itemlist
       hasTypeList: [], // 当前类型下包含的typeid(提取)
+<<<<<<< HEAD
       graphId:''
+=======
+      initScale: 1,  //加载好底图之后的,初始缩放比例
+      changeScaleByClick: false,  //区分 滚轮,点击 事件改变的缩放比例
+>>>>>>> 023961b36b18c0d07bd14a95254cd64636182fc4
     };
   },
   mounted() {
@@ -59,6 +64,7 @@ export default {
     // 挂在bus
     this.getBus();
     store.dispatch("getElementType", { PageSize: 1000 });
+    window.vm = this
   },
   methods: {
     init() {
@@ -91,6 +97,7 @@ export default {
             loadings.close();
           });
         this.view.fitSceneToView();
+
       });
       // 获取主题数据
       this.readGroup().then(data => {
@@ -177,6 +184,9 @@ export default {
             this.loading = false;
             this.isQuerying = false;
             console.log("success");
+            // 设置初始化缩放比例
+            this.initScale = this.view.scale
+            bus.$emit('initScale', this.view.scale)
           });
         } else {
           console.log("楼层不正确");
@@ -269,7 +279,7 @@ export default {
           BuildingID: this.urlMsg.BuildingID, // 建筑ID
           FloorID: this.urlMsg.FloorID // 楼层id
         };
-         Message({
+        Message({
           message: '上传中,切勿关闭窗口!',
           type: 'warning'
         });
@@ -354,6 +364,21 @@ export default {
       bus.$on("changeitemExplain", val => {
         this.scene.upadatitemExplain(val);
       });
+<<<<<<< HEAD
+=======
+      //发布图
+      // bus.$on("publishGraph", val => {
+      //       this.spinning = true;
+      //   publishGraph({ graphId: this.graphId, pubUser: "" }).then(res => {
+      //     this.spinning = false;
+      //     if (res.Result == "success") {
+      //       this.$message.success(res.Message);
+      //     } else {
+      //       this.$message.error(res.Message);
+      //     }
+      //   });
+      // });
+>>>>>>> 023961b36b18c0d07bd14a95254cd64636182fc4
       //创建区域是否点选
       bus.$on("changeDrawType", val => {
         this.scene.isSelecting = val == "select";
@@ -362,6 +387,20 @@ export default {
       bus.$on("publishMap", () => {
        this.publishMap()
       })
+      /**
+       * @name changeScale缩放底图
+       * @param { Number } zoom 缩放比例
+       * 
+       */
+      // TODO: changeScale缩放底图
+      bus.$on('changeScale', zoom => {
+        let { scale } = this.view;
+        this.changeScaleByClick = true
+        this.view.scaleByPoint(zoom, this.canvasWidth / 2, this.canvasHeight / 2)
+        this.changeScaleByClick = false
+        setTimeout(() => {
+        }, 100);
+      })
     },
     // 读取数据
     readGroup() {
@@ -419,7 +458,17 @@ export default {
         this.$emit("setCmdType", cmd);
       },
       deep: true
-    }
+    },
+    // 监听scale的变化 
+    'view.scale': {
+      handler(scale) {
+
+        // 滚轮触发的缩放
+        if (!this.changeScaleByClick) {
+          bus.$emit('mouseScale', scale / this.initScale)
+        }
+      }
+    },
   },
   created() {
     const href = window.location.href;

+ 1 - 1
src/components/edit/edit-dialog.vue

@@ -279,7 +279,7 @@
               let data = {
                 plazaId:'1000423'
               }
-            getPlazaFloor(data,{}).then(res =>{
+            getPlazaFloor(data).then(res =>{
               if(res.result == 'success'){
                 let data = res.data;
                 data.map(item=>{

+ 72 - 15
src/components/edit/top_toolbar.vue

@@ -21,9 +21,9 @@
         </li>-->
         <li class="zoom-window">
           <div>
-            <img class="lock" :src="require(`./../../assets/images/缩小.png`)" alt />
-            <span class="percentage">100%</span>
-            <img class="lock" :src="require(`./../../assets/images/放大 amplification.png`)" alt />
+            <img class="lock" @click="handleScale(-1)" :src="require(`./../../assets/images/缩小.png`)" alt />
+            <span class="percentage">{{scalePercent}}</span>
+            <img class="lock" @click="handleScale(1)" :src="require(`./../../assets/images/放大 amplification.png`)" alt />
           </div>
           <span>缩放窗口</span>
         </li>
@@ -37,16 +37,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)"
-              >
-                <img
-                  style="width: 16px;margin-right: 5px;"
-                  :src="require(`./../../assets/images/`+item.img+`.png`)"
-                  alt
-                />
+              <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>
@@ -133,10 +125,61 @@ export default {
           label: "水平分布",
           img: "t-level"
         }
-      ]
+      ],
+      scale: 0.5, //底图缩放比例
+      initScale: 0.5,  //初始 底图缩放比例
+      baseScale: 1.0,  //底图基础缩放比例,由底图加载完成后,传入进来
+      scaleStep: 0.05, // +-缩放步进 
     };
   },
+  computed: {
+    // 缩放比例显示文本
+    scalePercent() {
+      return (this.scale * 100).toFixed(0) + '%'
+    }
+  },
   methods: {
+    /**
+     * @name getInitScale
+     * @description 获取底图加载完成后的,初始化的缩放比例initScale,设置为baseScale
+     */
+    getInitScale() {
+      bus.$on('initScale', baseScale => {
+        this.baseScale = Number(baseScale || 1)
+      })
+    },
+    /**
+     * @name getMouseScale
+     * @description 滚轮滚动,导致的底图缩放比例 逻辑处理
+     */
+    getMouseScale() {
+      //  zoom 为缩放后改变的比例 
+      bus.$on('mouseScale', zoom => {
+        this.scale = Number((zoom * this.initScale).toFixed(2))
+      })
+    },
+    /**
+     * @name handleScale 
+     * @param { Number } type  -1:点击 - 缩小底图; 1:点击 + 放大底图
+     * @description 点击 -+ 缩放底图
+     */
+    handleScale(type) {
+      // +-按钮禁用处理
+      let flag = true
+      // 设置缩放范围 0.05 ~ 100
+      if ((type < 0 && this.scale <= 0.05) || (type > 0 && this.scale >= 100)) {
+        flag = false
+      } else {
+        flag = true
+      }
+      if (!flag) {
+        return false
+      }
+      // emit 缩放比例 this.scale / oldScale
+      let oldScale = this.scale
+      this.scale = Number((oldScale + type * this.scaleStep).toFixed(2))
+      bus.$emit('changeScale', this.scale / oldScale)
+    },
     FocusItemChanged(itemMsg) {
       this.focusItem = null;
       if (itemMsg.itemList.length == 1) {
@@ -176,14 +219,21 @@ export default {
       bus.$emit("changeAlignItem", val);
     }
   },
-  mounted() {
+  async mounted() {
     bus.$on("FocusItemChanged", itemMsg => {
       console.log("itemMsg", itemMsg);
       this.FocusItemChanged(itemMsg);
     });
+<<<<<<< HEAD
       bus.$on("setGraphId", setGraphId => {
       console.log("itemMsg", setGraphId);
     });
+=======
+    // 获取底图加载完成后的初始sacle
+    await this.getInitScale()
+    // 监听滚轮 底图缩放比例
+    this.getMouseScale()
+>>>>>>> 023961b36b18c0d07bd14a95254cd64636182fc4
   },
   created() {
     const href = window.location.href;
@@ -205,7 +255,12 @@ export default {
       obj[arr[0]] = arr[1];
     });
     this.urlMsg = obj;
+<<<<<<< HEAD
     const FloorName =  this.urlMsg.FloorName ? this.urlMsg.FloorName:'';
+=======
+    // ///////////测试代码
+    const FloorName = this.urlMsg.FloorName ? this.urlMsg.FloorName : '';
+>>>>>>> 023961b36b18c0d07bd14a95254cd64636182fc4
     this.urlMsg.floorName = systym[this.urlMsg.categoryId] + '-' + FloorName;
   }
 };
@@ -251,6 +306,8 @@ li {
           height: 16px;
         }
         .percentage {
+          display: inline-block;
+          width: 35px;
           border-bottom: 1px solid #c3c7cb;
           margin: 0 13px;
           font-size: 14px;

+ 1 - 1
src/views/editer.vue

@@ -88,7 +88,7 @@ export default {
     .left_toolbar {
       position: absolute;
       height: 100%;
-      z-index: 1001;
+      /*z-index: 1001;*/
       /*left: 12px;*/
       /*top: 12px;*/
     }