YaolongHan 4 years ago
parent
commit
c3c9821d08
2 changed files with 320 additions and 21 deletions
  1. 298 19
      src/components/edit/top_toolbar.vue
  2. 22 2
      src/views/editer.vue

+ 298 - 19
src/components/edit/top_toolbar.vue

@@ -178,26 +178,305 @@ import { SGraphLayoutType, SOrderSetType } from "@saga-web/graph/lib";
 import { queryFullFloor } from "@/api/editer";
 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
+    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: [],
+                treeData: [],
+                defaultProps: {
+                  children: 'Children',
+                  label: 'Name'
+                },
+                treeQuery: ""
+            };
         },
-        {
-          value: SGraphLayoutType.Right,
-          label: "右对齐",
-          img: "t-right",
-          disable: true
+        methods: {
+            getFullFloor() {
+                queryFullFloor({projectId: this.urlMsg.projectId}).then(res => {
+                  this.treeData = res.Data;
+                })
+            },
+            // 切换楼层
+            handleNodeClick(data, node) {
+                console.log(data, node);
+                if (data.CategoryId && data.ProjectId && data.BuildingId && data.FloorId && data.Name && data.Seq && data.Type) {
+                    const query = `categoryId=${data.CategoryId}&projectId=${data.ProjectId}&BuildingID=${data.BuildingId}&FloorID=${data.FloorId}&FloorName=${data.Name}&fmapID=${this.urlMsg.fmapID}&seq=${data.Seq}&token=${this.urlMsg.token}`;
+                    const url = window.location.origin + "/wandaEditer/editer?" + encodeURIComponent(query);
+                    if (data.Type == "NotPub") {
+                        window.open(url, "_self");
+                    } else if (data.Type == "HasPub") {
+                        this.treeQuery = query;
+                        this.$emit("openConfirmDialog");
+                    }
+                }
+            },
+            // 已发布跳转url
+            handleOpenUrl() {
+                const query = `${this.treeQuery}&isCopy=true`;
+                const url = window.location.origin + "/wandaEditer/editer?" + encodeURIComponent(query);
+                window.open(url, "_self");
+            },
+            /**
+             * @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");
+            },
         },
         {
           value: SGraphLayoutType.Top,

+ 22 - 2
src/views/editer.vue

@@ -2,7 +2,7 @@
   <div class="wandaEditer">
     <!-- 顶部工具栏 -->
     <div class="top_toolbar">
-      <topToolbar></topToolbar>
+      <topToolbar ref="topToolbar" @openConfirmDialog="dialogVisible = true"></topToolbar>
     </div>
     <div class="content">
       <!-- 左侧工具栏 -->
@@ -25,6 +25,18 @@
         <rightToolbar :focusItemList="focusItemList"></rightToolbar>
       </div>
     </div>
+    <el-dialog
+      title="操作提示"
+      :visible.sync="dialogVisible"
+      width="600px">
+      <div style="margin-bottom: 15px;">您打开的是已发布的平面图,您可以进行如下操作:</div>
+      <p>1、直接选择平面图中的元素进行复制,然后贴到其他平面图;</p>
+      <p>2、点击“启动编辑”对当前平面图进行编辑;</p>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
+        <el-button size="small" type="primary" @click="handleOpenUrl">打 开</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
@@ -40,7 +52,8 @@ export default {
   data() {
     return {
       cmdType: "choice",
-      focusItemList: null
+      focusItemList: null,
+      dialogVisible: false
     };
   },
   components: {
@@ -61,6 +74,10 @@ export default {
     },
     changeFocusItem(item) {
       this.focusItemList = item;
+    },
+    handleOpenUrl() {
+      this.$refs.topToolbar.handleOpenUrl();
+      this.dialogVisible = false;
     }
   },
    created() {
@@ -117,4 +134,7 @@ export default {
     }
   }
 }
+/deep/ .el-dialog__body {
+  padding: 10px 20px;
+}
 </style>