YaolongHan 4 years ago
parent
commit
05db93e870
3 changed files with 388 additions and 321 deletions
  1. 5 0
      src/api/editer.js
  2. 7 3
      src/components/edit/edit-dialog.vue
  3. 376 318
      src/components/edit/top_toolbar.vue

+ 5 - 0
src/api/editer.js

@@ -126,4 +126,9 @@ export function queryFloorByNode(params) {
 // 批量绑定工程信息化数据
 export function bindAttachObject(params){
     return httputils.postJson(`${testApi}/node/bindAttachObject`, params)
+}
+
+// 查询所有绘图的楼层
+export function queryFullFloor(params) {
+    return httputils.getJson(`${testApi}/graph/fullFloor`, params)
 }

+ 7 - 3
src/components/edit/edit-dialog.vue

@@ -660,7 +660,9 @@
                         GraphIds: this.GraphsIdList,
                         GraphElementName: this.GraphElementName,
                         GraphElementId: this.GraphElementId,
-                        AttachObject: lists
+                        AttachObject: lists,
+                        Num: lists.length?lists.length:1,
+                        Name: this.lengedName
                     }
                 } else {
                     params = {
@@ -668,10 +670,12 @@
                         Marked: false, // Marked为false时不传GraphIds字段,
                         GraphElementName: this.GraphElementName,
                         GraphElementId: this.GraphElementId,
-                        AttachObject: lists
+                        AttachObject: lists,
+                        Num: lists.length?lists.length:1,
+                        Name: this.lengedName
                     }
                 }
-
+                console.log("lenged+++++++++++++++++++++++++", this.lengedName);
                 bindAttachObject(params).then(res => {
                     this.visibleBind = false;
                     this.visible = false;

+ 376 - 318
src/components/edit/top_toolbar.vue

@@ -3,7 +3,18 @@
     <!-- 顶部编辑器 -->
     <div class="tit">
       <a-icon style="cursor: pointer;" type="left" @click="goDrafts" />
-      {{this.urlMsg.floorName}}
+      <el-popover
+        placement="bottom-start"
+        width="300"
+        trigger="click">
+        <div style="max-height:400px;overflow-y:auto;">
+          <el-tree :data="treeData" :props="defaultProps" :default-expand-all=true @node-click="handleNodeClick"></el-tree>
+        </div>
+        <span style="margin-left: 10px;cursor: pointer;" slot="reference">
+          {{this.urlMsg.floorName}}
+          <i class="el-icon-caret-bottom"></i>
+        </span>
+      </el-popover>
     </div>
     <div class="tool">
       <ul>
@@ -140,332 +151,378 @@
         <span>发布</span>
       </div>
     </div>
+
+    <el-dialog
+      title="操作提示"
+      :visible.sync="dialogVisible"
+      width="400">
+      <div>您打开的是已发布的平面图,您可以进行如下操作:</div>
+      <p>1、直接选择平面图中的元素进行复制,然后贴到其他平面图;</p>
+      <p>2、点击“启动编辑”对当前平面图进行编辑;</p>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="handleOpenUrl">打 开</el-button>
+      </span>
+    </el-dialog>
+
   </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 { 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
-        },
-        {
-          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
+    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: "",
+                dialogVisible: false
+            };
         },
-        {
-          value: SGraphLayoutType.Middle,
-          label: "垂直居中对齐",
-          img: "t-topandbottm",
-          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.dialogVisible = true;
+                    }
+                } else {
+                    this.$message.error("缺少跳转参数!");
+                }
+            },
+            // 已发布跳转url
+            handleOpenUrl() {
+                const query = `${this.treeQuery}&isCopy=true`;
+                const url = window.location.origin + "/wandaEditer/editer?" + encodeURIComponent(query);
+                window.open(url, "_self");
+                this.dialogVisible = false;
+            },
+            /**
+             * @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.Vertical,
-          label: "垂直分布",
-          img: "t-vertical",
-          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;
+            this.getFullFloor();
         },
-        {
-          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
+        computed: {
+          // 缩放比例显示文本
+          scalePercent() {
+            const scalePercent =
+              (this.scale * 100).toFixed(0) > 500
+                ? 500
+                : (this.scale * 100).toFixed(0);
+            return scalePercent + "%";
+          }
         },
-        {
-          value: SOrderSetType.After,
-          label: "上移一层",
-          img: "order-after",
-          disable: false
+        async mounted() {
+          bus2.$off("FocusItemChanged");
+          bus2.$on("FocusItemChanged", itemMsg => {
+            this.FocusItemChanged(itemMsg);
+          });
+          // 获取底图加载完成后的初始sacle
+          await this.getInitScale();
+          // 监听滚轮 底图缩放比例
+          this.getMouseScale();
         },
-        {
-          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("&");
-    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>
@@ -489,6 +546,7 @@ li {
     font-size: 18px;
     font-weight: bold;
     color: #1f2429;
+    position: relative;
   }
   .tool {
     ul {