Browse Source

Merge branch 'develop' of http://39.106.8.246:3003/web/wanda-editer into develop

haojianlong 4 years ago
parent
commit
df04d7107e
3 changed files with 319 additions and 278 deletions
  1. BIN
      src/assets/images/help.png
  2. BIN
      src/assets/images/help_tips.png
  3. 319 278
      src/components/edit/top_toolbar.vue

BIN
src/assets/images/help.png


BIN
src/assets/images/help_tips.png


+ 319 - 278
src/components/edit/top_toolbar.vue

@@ -93,13 +93,25 @@
           <span>打散</span>
         </li>-->
         <li @click="lockItem">
-          <Icon color="#646A73" :name="isLock?'lock':'unlock'" />
+          <Icon color="#646A73" :name="isLock?'lock':'unlock'"/>
           <span>{{!isLock?"解锁":"锁定"}}</span>
         </li>
         <li @click="deleteItem">
-          <img class="lock" :src="require(`./../../assets/images/delete.png`)" alt />
+          <img class="lock" :src="require(`./../../assets/images/delete.png`)" alt/>
           <span>删除</span>
         </li>
+        <li @click="showDrawer" style="border-left: 1px solid #8d9399;">
+          <el-popover placement="top" trigger="click" width="900" popper-class="reset-popover"
+                      style=" margin-top: -4px;display: inline-block;">
+         <span style="height: 570px;display: inline-block;overflow: auto">
+              <img style="width: 100%;height: 100%" :src="require(`./../../assets/images/help_tips.png`)" alt/>
+         </span>
+            <span slot="reference">
+              <img class="lock" :src="require(`./../../assets/images/help.png`)" alt/>
+              <div>操作提示</div>
+            </span>
+          </el-popover>
+        </li>
       </ul>
     </div>
     <div class="btn-list" @click="publishMap">
@@ -108,291 +120,305 @@
         <span>发布</span>
       </div>
     </div>
+
   </div>
 </template>
 <script>
-import bus from "@/bus";
-import bus2 from "@/bus2";
-import { SGraphLayoutType, SOrderSetType } from "@saga-web/graph/lib";
-import systym from "./codeMapSystem.js";
-import { MessageBox } from "element-ui";
-export default {
-  data() {
-    return {
-      isLock: false, //是否锁定
-      focusItem: null,
-      alignmentOptions: [
-        //对齐数据
-        {
-          value: SGraphLayoutType.Left,
-          label: "左对齐",
-          img: "t-left",
-          disable: true
-        },
-        {
-          value: SGraphLayoutType.Right,
-          label: "右对齐",
-          img: "t-right",
-          disable: true
-        },
-        {
-          value: SGraphLayoutType.Top,
-          label: "顶对齐",
-          img: "t-top",
-          disable: true
+    import bus from "@/bus";
+    import bus2 from "@/bus2";
+    import {SGraphLayoutType, SOrderSetType} from "@saga-web/graph/lib";
+    import systym from "./codeMapSystem.js";
+    import {MessageBox} from "element-ui";
+
+    export default {
+        data() {
+            return {
+                visible: false,
+
+                isLock: false, //是否锁定
+                focusItem: null,
+                alignmentOptions: [
+                    //对齐数据
+                    {
+                        value: SGraphLayoutType.Left,
+                        label: "左对齐",
+                        img: "t-left",
+                        disable: true
+                    },
+                    {
+                        value: SGraphLayoutType.Right,
+                        label: "右对齐",
+                        img: "t-right",
+                        disable: true
+                    },
+                    {
+                        value: SGraphLayoutType.Top,
+                        label: "顶对齐",
+                        img: "t-top",
+                        disable: true
+                    },
+                    {
+                        value: SGraphLayoutType.Bottom,
+                        label: "底对齐",
+                        img: "t-bottom",
+                        disable: true
+                    },
+                    {
+                        value: SGraphLayoutType.Center,
+                        label: "水平居中对齐",
+                        img: "t-center",
+                        disable: true
+                    },
+                    {
+                        value: SGraphLayoutType.Middle,
+                        label: "垂直居中对齐",
+                        img: "t-topandbottm",
+                        disable: true
+                    },
+                    {
+                        value: SGraphLayoutType.Vertical,
+                        label: "垂直分布",
+                        img: "t-vertical",
+                        disable: true
+                    },
+                    {
+                        value: SGraphLayoutType.Horizontal,
+                        label: "水平分布",
+                        img: "t-level",
+                        disable: true
+                    }
+                ],
+                orderOptions: [//图层
+                    {
+                        value: SOrderSetType.Top,
+                        label: "同类置顶",
+                        img: "order-top",
+                        disable: false,
+                    },
+                    {
+                        value: SOrderSetType.Bottom,
+                        label: "同类置底",
+                        img: "order-bottom",
+                        disable: false,
+                    },
+                    {
+                        value: SOrderSetType.After,
+                        label: "上移一层",
+                        img: "order-after",
+                        disable: false,
+                    },
+                    {
+                        value: SOrderSetType.Before,
+                        label: "下移一层",
+                        img: "order-before",
+                        disable: false,
+                    },
+                ],
+                scale: 0.5, //底图缩放比例
+                initScale: 0.5, //初始 底图缩放比例
+                baseScale: 1.0, //底图基础缩放比例,由底图加载完成后,传入进来
+                scaleStep: 0.05, // +-缩放步进
+                locationQuery: null,
+                urlMsg: {},
+            };
         },
-        {
-          value: SGraphLayoutType.Bottom,
-          label: "底对齐",
-          img: "t-bottom",
-          disable: true
+        computed: {
+            // 缩放比例显示文本
+            scalePercent() {
+                const scalePercent =
+                    (this.scale * 100).toFixed(0) > 500
+                        ? 500
+                        : (this.scale * 100).toFixed(0);
+                return scalePercent + "%";
+            }
         },
-        {
-          value: SGraphLayoutType.Center,
-          label: "水平居中对齐",
-          img: "t-center",
-          disable: true
+        methods: {
+            /**
+             * @name getInitScale
+             * @description 获取底图加载完成后的,初始化的缩放比例initScale,设置为baseScale
+             */
+            getInitScale() {
+                bus2.$off('initScale')
+                bus2.$on("initScale", baseScale => {
+                    this.baseScale = Number(baseScale || 1);
+                });
+            },
+            /**
+             * @name getMouseScale
+             * @description 滚轮滚动,导致的底图缩放比例 逻辑处理
+             */
+            getMouseScale() {
+                //  zoom 为缩放后改变的比例
+                bus2.$off('mouseScale')
+                bus2.$on("mouseScale", zoom => {
+                    const s = Number((zoom * this.initScale).toFixed(2));
+                    this.scale = s > 0.05 ? s : 0.05;
+                });
+            },
+            /**
+             * @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
+                const oldScale = this.scale;
+                this.scale = Number((oldScale + type * this.scaleStep).toFixed(2));
+                if (0 < oldScale && oldScale < 99) {
+                    bus.$emit("changeScale", this.scale / oldScale);
+                } else {
+                    bus.$emit("changeScale", 1);
+                }
+            },
+            FocusItemChanged(itemMsg) {
+                this.focusItem = null;
+                this.alignmentOptions.forEach(el => {
+                    el.disable = true;
+                });
+                if (itemMsg.itemList.length == 1) {
+                    this.isLock = itemMsg.itemList[0].moveable;
+                    this.focusItem = itemMsg.itemList[0];
+                } else if (itemMsg.itemList.length > 1) {
+                    this.alignmentOptions.forEach(el => {
+                        el.disable = false;
+                    });
+                }
+            },
+            lockItem() {
+                if (this.focusItem) {
+                    this.isLock = !this.isLock;
+                    this.focusItem.moveable = this.isLock;
+                } else {
+                    this.$message.error("请选择指定对象!", 1);
+                }
+            },
+            showDrawer() {
+                this.visible = true;
+            },
+            onClose() {
+                this.visible = false;
+            },
+            afterVisibleChange(val) {
+                console.log('visible', val);
+            },
+            saveMsg() {
+                // this.$message.success("保存成功!", 1);
+                bus.$emit("saveMsgItem");
+            },
+            // 删除item
+            deleteItem() {
+                bus.$emit("deleiteItem");
+                // if (this.focusItem) {
+                //   bus.$emit("deleiteItem");
+                //   this.$message.success("删除成功", 1);
+                // } else {
+                //   this.$message.error("请选择指定对象!", 1);
+                // }
+            },
+            // 返回草稿箱
+            goDrafts() {
+                if (this.urlMsg.projectId && this.urlMsg.BuildingID && this.urlMsg.fmapID && this.urlMsg.token) {
+                    this.$router.push({
+                        path: 'drafts',
+                        query: {
+                            projectId: this.urlMsg.projectId,
+                            BuildingID: this.urlMsg.BuildingID,
+                            FloorID: this.urlMsg.FloorID,
+                            fmapID: this.urlMsg.fmapID,
+                            token: this.urlMsg.token
+                        }
+                    })
+                } else {
+                    if (!this.urlMsg.projectId) {
+                        console.log("暂无projectId!");
+                    }
+                    if (!this.urlMsg.BuildingID) {
+                        console.log("暂无BuildingID!");
+                    }
+                    if (!this.urlMsg.fmapID) {
+                        console.log("暂无fmapID!");
+                    }
+                    if (!this.urlMsg.token) {
+                        console.log("暂无token!");
+                    }
+                    this.$message.error("参数缺失,无法跳转!");
+                }
+            },
+            // 发布图例
+            publishMap() {
+                MessageBox.confirm("确认后即发布到平台?", "提示", {
+                    confirmButtonText: "确认",
+                    cancelButtonText: "取消",
+                    type: "warning"
+                })
+                    .then(() => {
+                        bus.$emit("publishMap");
+                    })
+                    .catch(() => {
+                    });
+            },
+            // 对齐item
+            changeAlignItem(val) {
+                bus.$emit("changeAlignItem", val);
+            },
+            // 图层顺序
+            changeOrderItem(val) {
+                bus.$emit('changeOrderItem', val)
+            },
+            // 撤销
+            undo() {
+                bus.$emit("changeUndo");
+            },
+            // 重做
+            redo() {
+                bus.$emit("changeRedo");
+            },
         },
-        {
-          value: SGraphLayoutType.Middle,
-          label: "垂直居中对齐",
-          img: "t-topandbottm",
-          disable: true
+        async mounted() {
+            bus2.$off('FocusItemChanged')
+            bus2.$on("FocusItemChanged", itemMsg => {
+                this.FocusItemChanged(itemMsg);
+            });
+            // 获取底图加载完成后的初始sacle
+            await this.getInitScale();
+            // 监听滚轮 底图缩放比例
+            this.getMouseScale();
         },
-        {
-          value: SGraphLayoutType.Vertical,
-          label: "垂直分布",
-          img: "t-vertical",
-          disable: true
-        },
-        {
-          value: SGraphLayoutType.Horizontal,
-          label: "水平分布",
-          img: "t-level",
-          disable: true
+        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;
+            const FloorName = this.urlMsg.FloorName ? this.urlMsg.FloorName : "";
+            this.urlMsg.floorName = systym[this.urlMsg.categoryId] + "-" + FloorName;
         }
-      ],
-      orderOptions:[//图层
-        {
-          value: SOrderSetType.Top,
-          label: "同类置顶",
-          img: "order-top",
-          disable:false,
-        },
-        {
-          value: SOrderSetType.Bottom,
-          label: "同类置底",
-          img: "order-bottom",
-          disable:false,
-        },
-        {
-          value: SOrderSetType.After,
-          label: "上移一层",
-          img: "order-after",
-          disable:false,
-        },
-        {
-          value: SOrderSetType.Before,
-          label: "下移一层",
-          img: "order-before",
-          disable:false,
-        },
-      ],
-      scale: 0.5, //底图缩放比例
-      initScale: 0.5, //初始 底图缩放比例
-      baseScale: 1.0, //底图基础缩放比例,由底图加载完成后,传入进来
-      scaleStep: 0.05, // +-缩放步进
-      locationQuery: null,
-      urlMsg: {}
     };
-  },
-  computed: {
-    // 缩放比例显示文本
-    scalePercent() {
-      const scalePercent =
-        (this.scale * 100).toFixed(0) > 500
-          ? 500
-          : (this.scale * 100).toFixed(0);
-      return scalePercent + "%";
-    }
-  },
-  methods: {
-    /**
-     * @name getInitScale
-     * @description 获取底图加载完成后的,初始化的缩放比例initScale,设置为baseScale
-     */
-    getInitScale() {
-      bus2.$off('initScale')
-      bus2.$on("initScale", baseScale => {
-        this.baseScale = Number(baseScale || 1);
-      });
-    },
-    /**
-     * @name getMouseScale
-     * @description 滚轮滚动,导致的底图缩放比例 逻辑处理
-     */
-    getMouseScale() {
-      //  zoom 为缩放后改变的比例
-      bus2.$off('mouseScale')
-      bus2.$on("mouseScale", zoom => {
-        const s = Number((zoom * this.initScale).toFixed(2));
-        this.scale = s > 0.05 ? s : 0.05;
-      });
-    },
-    /**
-     * @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
-      const oldScale = this.scale;
-      this.scale = Number((oldScale + type * this.scaleStep).toFixed(2));
-      if (0 < oldScale && oldScale < 99) {
-        bus.$emit("changeScale", this.scale / oldScale);
-      } else {
-        bus.$emit("changeScale", 1);
-      }
-    },
-    FocusItemChanged(itemMsg) {
-      this.focusItem = null;
-      this.alignmentOptions.forEach(el => {
-        el.disable = true;
-      });
-      if (itemMsg.itemList.length == 1) {
-        this.isLock = itemMsg.itemList[0].moveable;
-        this.focusItem = itemMsg.itemList[0];
-      } else if (itemMsg.itemList.length > 1) {
-        this.alignmentOptions.forEach(el => {
-          el.disable = false;
-        });
-      }
-    },
-    lockItem() {
-      if (this.focusItem) {
-        this.isLock = !this.isLock;
-        this.focusItem.moveable = this.isLock;
-      } else {
-        this.$message.error("请选择指定对象!", 1);
-      }
-    },
-    saveMsg() {
-      // this.$message.success("保存成功!", 1);
-      bus.$emit("saveMsgItem");
-    },
-    // 删除item
-    deleteItem() {
-      bus.$emit("deleiteItem");
-      // if (this.focusItem) {
-      //   bus.$emit("deleiteItem");
-      //   this.$message.success("删除成功", 1);
-      // } else {
-      //   this.$message.error("请选择指定对象!", 1);
-      // }
-    },
-    // 返回草稿箱
-    goDrafts() {
-      if (this.urlMsg.projectId && this.urlMsg.BuildingID && this.urlMsg.fmapID && this.urlMsg.token) {
-        this.$router.push({
-          path: 'drafts',
-          query: {
-            projectId: this.urlMsg.projectId,
-            BuildingID: this.urlMsg.BuildingID,
-            FloorID: this.urlMsg.FloorID,
-            fmapID: this.urlMsg.fmapID,
-            token: this.urlMsg.token
-          }
-        })
-      } else {
-        if (!this.urlMsg.projectId) {
-          console.log("暂无projectId!");
-        }
-        if (!this.urlMsg.BuildingID) {
-          console.log("暂无BuildingID!");
-        }
-        if (!this.urlMsg.fmapID) {
-          console.log("暂无fmapID!");
-        }
-        if (!this.urlMsg.token) {
-          console.log("暂无token!");
-        }
-        this.$message.error("参数缺失,无法跳转!");
-      }
-    },
-    // 发布图例
-    publishMap() {
-      MessageBox.confirm("确认后即发布到平台?", "提示", {
-        confirmButtonText: "确认",
-        cancelButtonText: "取消",
-        type: "warning"
-      })
-        .then(() => {
-          bus.$emit("publishMap");
-        })
-        .catch(() => {});
-    },
-    // 对齐item
-    changeAlignItem(val) {
-      bus.$emit("changeAlignItem", val);
-    },
-    // 图层顺序
-    changeOrderItem(val){
-      bus.$emit('changeOrderItem', val )
-    },
-    // 撤销
-    undo() {
-      bus.$emit("changeUndo");
-    },
-    // 重做
-    redo() {
-      bus.$emit("changeRedo");
-    },
-  },
-  async mounted() {
-    bus2.$off('FocusItemChanged')
-    bus2.$on("FocusItemChanged", itemMsg => {
-      this.FocusItemChanged(itemMsg);
-    });
-    // 获取底图加载完成后的初始sacle
-    await this.getInitScale();
-    // 监听滚轮 底图缩放比例
-    this.getMouseScale();
-  },
-  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;
-    const FloorName = this.urlMsg.FloorName ? this.urlMsg.FloorName : "";
-    this.urlMsg.floorName = systym[this.urlMsg.categoryId] + "-" + FloorName;
-  }
-};
 </script>
 <style lang="less" scoped>
 ul,
@@ -468,19 +494,34 @@ li {
       display: flex;
       justify-content: center;
       flex-direction: column;
+
       span {
         font-size: 12px;
       }
+
       cursor: pointer;
     }
   }
+
   .btn-list:hover {
     background: #f5f6f7;
     border-radius: 2px;
   }
+
+
 }
+
 /deep/ .ant-dropdown-menu-item {
   display: flex;
   align-items: center;
 }
+
+</style>
+
+<style>
+  .reset-popover {
+    max-height: 570px;
+    overflow: auto;
+
+  }
 </style>