Главная Обзор Помощь
Регистрация Вход
web
/
persagy-plan-editer
21
0
Ответвить 0
Файлы Обсуждения 0 Запросы на слияние 0 Вики
Просмотр исходного кода

update_2020.01.16_:16:56

zhangyu 4 лет назад
Родитель
c8a5a4be31
Сommit
67ad9be155
7 измененных файлов с 99 добавлено и 20 удалено
Разделённый вид Показать статистику Diff
  1. 2 2
      package.json
  2. 1 1
      public/index.html
  3. 4 0
      src/components/editview/basePlanEditer.vue
  4. 2 3
      src/components/editview/rightPropertyBar/BaseEquipment.vue
  5. 56 7
      src/components/editview/topToolBar.vue
  6. 32 7
      src/components/editview/topoTooltip.vue
  7. 2 0
      src/lib/SPlanScene.ts

+ 2 - 2
package.json
Просмотреть файл 

@@ -21,8 +21,8 @@
 
     "@persagy-web/big": "2.2.33",
 
     "@persagy-web/draw": "2.2.8",
 
     "@persagy-web/graph": "2.2.34",
 
-    "@persagy-web/big-edit": "2.2.5",
 
-    "@persagy-web/edit": "2.2.4",
 
+    "@persagy-web/big-edit": "2.2.6",
 
+    "@persagy-web/edit": "2.2.5",
 
     "@types/uuid": "^8.0.0",
 
     "ant-design-vue": "^1.6.5",
 
     "axios": "^0.20.0",

+ 1 - 1
public/index.html
Просмотреть файл 

@@ -5,7 +5,7 @@
 
         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
         <meta name="viewport" content="width=device-width,initial-scale=1.0" />
 
         <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
 
-        <link rel="stylesheet" href="//at.alicdn.com/t/font_2231660_s5c9b1ungrn.css" />
 
+        <link rel="stylesheet" href="//at.alicdn.com/t/font_2231660_v6l4r3hhhnp.css" />
 
         <title>博锐尚格科技股份有限公司--平面图编辑工具</title>
 
     </head>
 
     <body>

+ 4 - 0
src/components/editview/basePlanEditer.vue
Просмотреть файл 

@@ -6,6 +6,7 @@
 
             ref="topoTooltip"
 
             @closeTooltip="showTooltip = false"
 
             :havItem="havItem"
 
+            :contextMenuItem="contextMenuItem"
 
         ></topoTooltip>
 
         <canvas style="border: none; outline: medium" id="persagy_plan" :width="canvasWidth" :height="canvasHeight" tabindex="0"></canvas>
 
     </div>
 
@@ -32,6 +33,7 @@ export default {
 
             canvasWidth: 700, //画布宽
 
             canvasHeight: 700, //画布高
 
             havItem: false, //右击是否选中item
 
+            contextMenuItem: null, // 右键选中的item
 
             showTooltip: false, //是否显示tooltip
 
             planContent: {}, // 读图后存储图所有数据
 
             autoSave: null, // 自动保存定时器
 
@@ -231,8 +233,10 @@ export default {
 
             this.showTooltip = true;
 
             if (item) {
 
                 this.havItem = true;
 
+                this.contextMenuItem = item;
 
             } else {
 
                 this.havItem = false;
 
+                this.contextMenuItem = null;
 
             }
 
             const doms = document.getElementsByClassName("topoTooltip-box")[0];
 
             doms.style.left = event.offsetX + "px";

+ 2 - 3
src/components/editview/rightPropertyBar/BaseEquipment.vue
Просмотреть файл 

@@ -106,7 +106,7 @@ export default {
 
     computed: {
 
         formula: {
 
             get: function () {
 
-                return JSON.stringify(this.EquipItem.formula.map(info => {return info.name;}));
 
+                return JSON.stringify(this.EquipItem.formula.map(info => { return info.name; }));
 
             },
 
         },
 
         color: {
 
@@ -184,8 +184,7 @@ export default {
 
                     // 这个事件在读取结束后，无论成功或者失败都会触发
 
                     // eslint-disable-next-line no-empty
 
                     if (reader.error) {
 
-                    } else {
 
-                        // 构造 XMLHttpRequest 对象，发送文件 Binary 数据
 
+                    } else { // 构造 XMLHttpRequest 对象，发送文件 Binary 数据
 
                         const xhr = new XMLHttpRequest();
 
                         xhr.open("POST", `${imgServeUpload}${uploadKey}.${imgType}`);
 
                         xhr.send(reader.result);

+ 56 - 7
src/components/editview/topToolBar.vue
Просмотреть файл 

@@ -12,6 +12,7 @@
 
                         <span class="icon iconfont icon-zhongzuo"></span>
 
                     </el-tooltip>
 
                 </li>
 
+                <el-divider direction="vertical"></el-divider>
 
                 <li @click="copy">
 
                     <el-tooltip class="item" effect="dark" content="复制" placement="bottom">
 
                         <span class="icon iconfont">&#xe673;</span>
 
@@ -22,11 +23,7 @@
 
                         <span class="icon iconfont icon-niantie"></span>
 
                     </el-tooltip>
 
                 </li>
 
-                <li @click="deleteItem">
 
-                    <el-tooltip class="item" effect="dark" content="删除" placement="bottom">
 
-                        <span class="icon iconfont icon-shanchu"></span>
 
-                    </el-tooltip>
 
-                </li>
 
+                <el-divider direction="vertical"></el-divider>
 
                 <li>
 
                     <el-tooltip class="item" effect="dark" content="组合" placement="bottom">
 
                         <span class="disabled icon iconfont icon-zuhe"></span>
 
@@ -37,6 +34,7 @@
 
                         <span class="disabled icon iconfont icon-dasan"></span>
 
                     </el-tooltip>
 
                 </li>
 
+                <el-divider direction="vertical"></el-divider>
 
                 <li @click="setOrder('Top')">
 
                     <el-tooltip class="item" effect="dark" content="置顶" placement="bottom">
 
                         <span class="icon iconfont icon-zhiding"></span>
 
@@ -47,9 +45,22 @@
 
                         <span class="icon iconfont icon-zhidi"></span>
 
                     </el-tooltip>
 
                 </li>
 
+                <el-divider direction="vertical"></el-divider>
 
+                <!-- 对齐方式 -->
 
+                <el-divider direction="vertical"></el-divider>
 
                 <li @click="setLock()">
 
                     <el-tooltip class="item" effect="dark" :content="!isLock ? '解锁' : '锁定'" placement="bottom">
 
-                        <span :class="[isLock ? 'el-icon-lock' : 'el-icon-unlock', 'lcoks']" />
 
+                        <span :class="[isLock ? 'el-icon-lock' : 'el-icon-unlock', 'lcoks', lockDisabled ? 'disabled' : '']" />
 
+                    </el-tooltip>
 
+                </li>
 
+                <li @click="hideItem">
 
+                    <el-tooltip class="item" effect="dark" content="隐藏" placement="bottom">
 
+                        <span class="icon iconfont icon-yincang" :class="{'disabled': hideDisabled}"></span>
 
+                    </el-tooltip>
 
+                </li>
 
+                <li @click="deleteItem">
 
+                    <el-tooltip class="item" effect="dark" content="删除" placement="bottom">
 
+                        <span class="icon iconfont icon-shanchu" :class="{'disabled': deleteDisabled}"></span>
 
                     </el-tooltip>
 
                 </li>
 
             </ul>
 
@@ -66,6 +77,10 @@ export default {
 
         return {
 
             isLock: false,
 
             itemList: null,
 
+            lockDisabled: false,
 
+            deleteDisabled: false,
 
+            hideDisabled: false,
 
+
 
         };
 
     },
 
     methods: {
 
@@ -92,8 +107,19 @@ export default {
 
         setOrder(val) {
 
             bus.$emit("setOrder", val);
 
         },
 
+        // 隐藏item
 
+        hideItem() {
 
+            // 隐藏按钮禁用或者无选中元素，不做操作
 
+            if (this.hideDisabled || !this.itemList) return;
 
+            this.itemList.forEach((item) => {
 
+                item.visible = false;
 
+            });
 
+        },
 
         // 设置锁定
 
         setLock() {
 
+            // 锁按钮禁用，不做操作
 
+            if (this.lockDisabled) return;
 
+
 
             this.isLock = !this.isLock;
 
             if (!this.itemList) return;
 
             this.itemList.forEach((item) => {
 
@@ -101,18 +127,36 @@ export default {
 
             });
 
         },
 
         emitChoice(itemList) {
 
+            this.lockDisabled = false;
 
+            this.deleteDisabled = false;
 
+            this.hideDisabled = false;
 
+
 
             if (!itemList.length) {
 
                 this.isLock = false;
 
                 this.itemList = null;
 
             } else {
 
                 this.isLock = itemList[0].moveable;
 
                 this.itemList = itemList;
 
+                this.itemList.forEach((item) => {
 
+                    // 空间实例不允许解锁
 
+                    if (item?.legendData?.properties?.type === "BaseZone") {
 
+                        this.lockDisabled = true;
 
+                    }
 
+                    // 空间实例不允许删除
 
+                    if (item?.legendData?.properties?.type === "BaseZone" || item?.legendData?.properties?.type === "BaseEquipment") {
 
+                        this.deleteDisabled = true;
 
+                    } else { // 通用元素不允许隐藏
 
+                        this.hideDisabled = true;
 
+                    }
 
+                })
 
             }
 
         },
 
     },
 
     mounted() {
 
         bus.$on("emitChoice", this.emitChoice);
 
-        bus.$on("tooltipLock", this.setLock);
 
+        bus.$on("tooltipLock", () => {
 
+            this.isLock = !this.isLock;
 
+        });
 
     },
 
 };
 
 </script>
 
@@ -136,6 +180,10 @@ li {
 
     border-bottom: 1px solid #e4e5e7;
 
     .left {
 
         ul {
 
+            /deep/ .el-divider--vertical {
 
+                height: 16px;
 
+                margin: 5px 8px;
 
+            }
 
             display: flex;
 
             li {
 
                 display: flex;
 
@@ -174,6 +222,7 @@ li {
 
         }
 
     }
 
     .disabled {
 
+        color: #c0c4cc;
 
         cursor: not-allowed;
 
     }
 
 }

+ 32 - 7
src/components/editview/topoTooltip.vue
Просмотреть файл 

@@ -4,10 +4,12 @@
 
         <div v-if="havItem" class="tooltip-card">
 
             <ul>
 
                 <li @click="editItem">编辑</li>
 
-                <li @click="setLock">{{ lock ? "解锁" : "锁定" }}</li>
 
+                <li :class="{'disabled': itemType === 'BaseZone'}" @click="setLock">{{ lock ? "锁定" : "解锁" }}</li>
 
                 <li @click="toTop">置顶</li>
 
                 <li @click="toBottom">置底</li>
 
-                <li @click="deleteItem">删除</li>
 
+
 
+                <li v-if="itemType === 'BaseEquipment' || itemType === 'BaseZone'" @click="hideItem">隐藏</li>
 
+                <li v-else @click="deleteItem">删除</li>
 
             </ul>
 
         </div>
 
         <div v-else class="tooltip-card">
 
@@ -23,12 +25,23 @@
 
 import { SItemStatus } from "@persagy-web/big";
 
 import bus from "@/bus/bus";
 
 export default {
 
-    props: ["havItem"],
 
+    props: ["havItem", "contextMenuItem"],
 
     name: "topoTooltip",
 
     data() {
 
-        return {
 
-            lock: false,
 
-        };
 
+        return {};
 
+    },
 
+    computed: {
 
+        itemType() {
 
+            return this.contextMenuItem?.legendData?.properties?.type;
 
+        },
 
+        lock: {
 
+            get() {
 
+                return this.contextMenuItem.moveable;
 
+            },
 
+            set(val) {
 
+                this.contextMenuItem.moveable = val;
 
+            }
 
+        }
 
     },
 
     methods: {
 
         // 编辑图例
 
@@ -37,6 +50,9 @@ export default {
 
             this.closetooltip();
 
         },
 
         setLock() {
 
+            // 如果选中的是空间实例，不做操作
 
+            if (this.itemType !== 'BaseZone') return;
 
+            
             this.lock = !this.lock;
 
             bus.$emit("tooltipLock");
 
             this.closetooltip();
 
@@ -56,6 +72,11 @@ export default {
 
             bus.$emit("deleteItem");
 
             this.closetooltip();
 
         },
 
+        // 隐藏
 
+        hideItem() {
 
+            this.contextMenuItem.visible = false;
 
+            this.closetooltip();
 
+        },
 
         // 保存图
 
         saveGraph() {
 
             bus.$emit("saveTopo");
 
@@ -76,7 +97,7 @@ export default {
 
             this.$emit("closeTooltip");
 
         },
 
     },
 
-    mounted() { },
 
+    mounted() {},
 
 };
 
 </script>
 
 <style lang="less" scoped>
 
@@ -115,6 +136,10 @@ li {
 
             li:hover {
 
                 background: #f5f6f7;
 
             }
 
+            .disabled {
 
+                color: #c0c4cc;
 
+                cursor: not-allowed;
 
+            }
 
         }
 
     }
 
 }

+ 2 - 0
src/lib/SPlanScene.ts
Просмотреть файл 

@@ -405,6 +405,8 @@ export class SPlanScene extends SBaseEditScene {
 
         itemList.forEach((element: any) => {
 
             this.removeItem(element);
 
         });
 
+        // 清空选择器
 
+        this.selectContainer.clear();
 
         if (this.view) {
 
             this.view.update();
 
         }