Browse Source

新增复制粘贴按钮以及操作

YaolongHan 4 years ago
parent
commit
218d0ecca0

BIN
src/assets/images/copy.png


BIN
src/assets/images/past.png


+ 8 - 0
src/components/baseEditer.vue

@@ -724,6 +724,14 @@ export default {
       // 更改item样式
       bus.$on('changeLengendItem',item=>{
         this.scene.changeLengendItem(item)
+      }),
+      //复制操作
+      bus.$on('copymsg',()=>{
+        this.scene.copy()
+      })
+      //粘贴操作
+      bus.$on('stickmsg',()=>{
+          this.scene.paste()
       })
     },
     // 获取图最大最小值

+ 351 - 322
src/components/edit/top_toolbar.vue

@@ -19,6 +19,14 @@
           <img class="lock" :src="require(`./../../assets/images/redo.png`)" alt />
           <span>重做</span>
         </li>
+        <li @click="copymsg">
+          <img class="lock" :src="require(`./../../assets/images/copy.png`)" alt />
+          <span>复制</span>
+        </li>
+        <li @click="stickmsg">
+          <img class="lock" :src="require(`./../../assets/images/past.png`)" alt />
+          <span>粘贴</span>
+        </li>
         <li class="zoom-window">
           <div>
             <img
@@ -47,8 +55,17 @@
               <a-icon type="caret-down" class="down-icon" />
             </div>
             <a-menu slot="overlay">
-              <a-menu-item :disabled='item.disable' v-for="item in orderOptions" :key="item.value" @click="changeOrderItem(item.value)">
-                <img style="width: 16px;margin-right: 5px;" :src="require(`./../../assets/images/`+item.img+`.png`)" alt />
+              <a-menu-item
+                :disabled="item.disable"
+                v-for="item in orderOptions"
+                :key="item.value"
+                @click="changeOrderItem(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>
@@ -93,19 +110,24 @@
           <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;">
-              <img style="width: 100%;" :src="require(`./../../assets/images/help_tips.png`)" alt/>
+          <el-popover
+            placement="top"
+            trigger="click"
+            width="900"
+            popper-class="reset-popover"
+            style=" margin-top: -4px;display: inline-block;"
+          >
+            <img style="width: 100%;" :src="require(`./../../assets/images/help_tips.png`)" alt />
             <span slot="reference">
-              <img class="lock" :src="require(`./../../assets/images/help.png`)" alt/>
+              <img class="lock" :src="require(`./../../assets/images/help.png`)" alt />
               <div>操作提示</div>
             </span>
           </el-popover>
@@ -118,323 +140,334 @@
         <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";
+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,
+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: {},
-                focusItemList: []
-            };
+      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
         },
-        computed: {
-            // 缩放比例显示文本
-            scalePercent() {
-                const scalePercent =
-                    (this.scale * 100).toFixed(0) > 500
-                        ? 500
-                        : (this.scale * 100).toFixed(0);
-                return scalePercent + "%";
-            }
+        {
+          value: SGraphLayoutType.Middle,
+          label: "垂直居中对齐",
+          img: "t-topandbottm",
+          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.focusItemList = [];
-                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;
-                    });
-                    // 批量解锁/锁定
-                    this.focusItemList = itemMsg.itemList;
-                    let flag = true;
-                    for(let i = 0; i < itemMsg.itemList.length; i++) {
-                      const t = itemMsg.itemList[i];
-                      if (!t.moveable) {
-                        flag = false;
-                        break
-                      }
-                    }
-                    this.isLock = flag
-                }
-            },
-            lockItem() {
-                if (this.focusItem) {
-                    this.isLock = !this.isLock;
-                    this.focusItem.moveable = this.isLock;
-                } else if (this.focusItemList.length){
-                  this.isLock = !this.isLock;
-                  this.focusItemList.forEach(t => {
-                    t.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.Vertical,
+          label: "垂直分布",
+          img: "t-vertical",
+          disable: true
         },
-        async mounted() {
-            bus2.$off('FocusItemChanged')
-            bus2.$on("FocusItemChanged", itemMsg => {
-                this.FocusItemChanged(itemMsg);
-            });
-            // 获取底图加载完成后的初始sacle
-            await this.getInitScale();
-            // 监听滚轮 底图缩放比例
-            this.getMouseScale();
+        {
+          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
         },
-        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;
+        {
+          value: SOrderSetType.Before,
+          label: "下移一层",
+          img: "order-before",
+          disable: false
         }
+      ],
+      scale: 0.5, //底图缩放比例
+      initScale: 0.5, //初始 底图缩放比例
+      baseScale: 1.0, //底图基础缩放比例,由底图加载完成后,传入进来
+      scaleStep: 0.05, // +-缩放步进
+      locationQuery: null,
+      urlMsg: {},
+      focusItemList: []
     };
+  },
+  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.focusItemList = [];
+      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;
+        });
+        // 批量解锁/锁定
+        this.focusItemList = itemMsg.itemList;
+        let flag = true;
+        for (let i = 0; i < itemMsg.itemList.length; i++) {
+          const t = itemMsg.itemList[i];
+          if (!t.moveable) {
+            flag = false;
+            break;
+          }
+        }
+        this.isLock = flag;
+      }
+    },
+    lockItem() {
+      if (this.focusItem) {
+        this.isLock = !this.isLock;
+        this.focusItem.moveable = this.isLock;
+      } else if (this.focusItemList.length) {
+        this.isLock = !this.isLock;
+        this.focusItemList.forEach(t => {
+          t.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");
+    },
+    // 复制信息
+    copymsg(){
+      bus.$emit("copymsg");
+    },
+    stickmsg(){
+      bus.$emit("stickmsg");
+    },
+    // 删除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,
@@ -523,21 +556,17 @@ li {
     background: #f5f6f7;
     border-radius: 2px;
   }
-
-
 }
 
 /deep/ .ant-dropdown-menu-item {
   display: flex;
   align-items: center;
 }
-
 </style>
 
 <style>
-  .reset-popover {
-    max-height: 570px;
-    overflow: auto;
-
-  }
+.reset-popover {
+  max-height: 570px;
+  overflow: auto;
+}
 </style>

+ 4 - 4
vue.config.js

@@ -16,8 +16,8 @@ module.exports = {
             },
             '/serve': {
                 // target: 'http://192.168.200.87:8088/',
-                target: 'http://10.199.143.129:8080',
-                // target: 'http://60.205.177.43:8080', //阿里云
+                // target: 'http://10.199.143.129:8080',
+                target: 'http://60.205.177.43:8080', //阿里云
                 changeOrigin: true,
                 secure: false,
                 pathRewrite: {
@@ -25,8 +25,8 @@ module.exports = {
                 },
             },
             '/data': {
-                target: "http://10.199.143.126",
-                // target: 'http://60.205.177.43', //阿里云
+                // target: "http://10.199.143.126",
+                target: 'http://60.205.177.43', //阿里云
                 changeOrigin: true,
                 secure: false,
                 pathRewrite: {