Explorar o código

提交区域显示

yunxing %!s(int64=4) %!d(string=hai) anos
pai
achega
b7e0d326dd

+ 4 - 4
package.json

@@ -18,11 +18,11 @@
   },
   "dependencies": {
     "@persagy-web/base": "2.2.1",
-    "@persagy-web/big": "2.2.38",
+    "@persagy-web/big": "2.2.42",
     "@persagy-web/draw": "2.2.10",
-    "@persagy-web/graph": "2.2.37",
-    "@persagy-web/big-edit": "2.2.14",
-    "@persagy-web/edit": "2.2.12",
+    "@persagy-web/graph": "2.2.39",
+    "@persagy-web/big-edit": "2.2.21",
+    "@persagy-web/edit": "2.2.19",
     "@types/uuid": "^8.0.0",
     "ant-design-vue": "^1.6.5",
     "axios": "^0.20.0",

+ 39 - 2
src/components/editview/basePlanEditer.vue

@@ -13,7 +13,7 @@
         <canvas style="border: none; outline: medium" id="persagy_plan" :width="canvasWidth" :height="canvasHeight" tabindex="0"></canvas>
     </div>
 </template>
-<script defer>
+<script>
 import { SFloorParser, getJsonz } from "@persagy-web/big";
 import { SImageItem, SImageShowType } from "@persagy-web/graph";
 import { SPlanView, SPlanParser, SPlanScene, SPlanDecorator, SPlanEquipment, SPlanZone } from "@/lib";
@@ -73,6 +73,7 @@ export default {
             "styleMap",
             "ruleList",
             "version",
+            "outline",
         ]),
     },
     mounted() {
@@ -124,6 +125,7 @@ export default {
             "INITRULELIST",
             "INITOBJEXTINFO",
             "ADDSTYLE",
+            "SETOUTLINE",
         ]),
 
         // 清空画布
@@ -133,10 +135,17 @@ export default {
             this.scene.emitChoice = this.emitChoice;
             this.scene.clearCmdStatus = this.clearCmdStatus;
             this.scene.vueOnMouseDown = this.vueOnMouseDown;
+            this.scene.maskFinishCreated = this.maskFinishCreated;
             if (this.view) {
                 this.view.update();
             }
         },
+        /**
+         * 区域显示的蒙板创建完成之后,存放vuex
+         */
+        maskFinishCreated(SBaseMaskEdit) {
+            this.SETOUTLINE(SBaseMaskEdit);
+        },
         // 初始化
         init() {
             this.clearImg();
@@ -390,6 +399,15 @@ export default {
             bus.$on("showBaseMap", (val) => {
                 this.showBaseMapFn(val);
             });
+
+            // 取消区域显示
+            bus.$off("deleteOutline");
+            bus.$on("deleteOutline", () => {
+                this.scene.removeItem(this.outline);
+                this.scene.selectContainer.clear()
+                this.view.update();
+                this.SETOUTLINE(null);
+            });
             // 更改背景色
             bus.$off("changeBackgroundColor");
             bus.$on("changeBackgroundColor", (val) => {
@@ -538,6 +556,21 @@ export default {
                 this.INITRULELIST([]);
                 if (this.ruleNum === this.loadedRuleNum) this.loadMarkRelation();
             }
+            // 加载区域显示
+            // TODO: 12
+            // res.content.outline = [
+            //     { x: -24257.467785976827, y: -188397.297908777 },
+            //     {
+            //         x: 129712.73367871458,
+            //         y: -100521.62195087993,
+            //     },
+            // ];
+            if (res.content.outline) {
+                // this.
+                const outline = res.content.outline;
+                const item = this.scene.initMaskItem(outline);
+                this.SETOUTLINE(item);
+            }
         },
         // 解析设备数据
         mergeEquipData(equipList) {
@@ -785,7 +818,7 @@ export default {
         },
         // 保存草稿
         saveDraft(uuid) {
-            const elements = this.scene.save();
+            const { elements, outline } = this.scene.save();
             const { id, graphId, name, buildingId, floorId, folderId, state, projectId, label = [], note = "" } = this.planContent;
             const obj = {
                 elements, // 平面图展示所需数据
@@ -804,6 +837,10 @@ export default {
                 pic: `${uuid}.png`, // 图快照
                 version: this.version, // 版本号
             };
+            // 区域显示时,上送区域显示的outline点坐标数组
+            if (outline) {
+                obj.outline = outline;
+            }
             return new Promise((resolve, reject) => {
                 planerSave(obj).then((res) => {
                     if (res.result === "success") {

+ 34 - 12
src/components/editview/bottomToolBar.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
         <div class="action-box">
-            <div class="small-block" @click="showArea">
+            <div class="small-block" @click="editOutline">
                 <span>
                     <el-tooltip v-if="!isShowArea" effect="dark" content="区域显示" placement="top">
                         <img src="@/assets/images/bottomToolBar/showArea.png" />
@@ -31,8 +31,7 @@
 </template>
 <script>
 import bus from "@/bus/bus";
-import { mapState } from "vuex";
-// import "@/assets/font/iconfont.js";
+import { mapState, mapMutations } from "vuex";
 export default {
     data() {
         return {
@@ -42,14 +41,14 @@ export default {
             min: 0.1,
             max: 5,
             isSwitch: false, // 是否开启吸附
-            isShowArea: false,
+            // isShowArea: false,
         };
     },
     computed: {
+        ...mapState(["styleMap", "editCmd", "outline"]),
         sliderValPercent() {
             return `${(this.sliderVal * 100).toFixed(0)}%`;
         },
-        ...mapState(["styleMap"]),
         isShowBaseMap: {
             get() {
                 if (this.styleMap?.defaultMapStyle?.showBaseMap === false) {
@@ -61,8 +60,26 @@ export default {
                 return val;
             },
         },
+        isShowArea: {
+            get() {
+                // vuex outline 不为空, 取消区域显示
+                if (this.outline) {
+                    return true;
+                }
+                // vuex  outline 为空,区域显示,可以进行创建蒙板
+                return false;
+            },
+            set(val) {
+                return val;
+            },
+        },
+    },
+    watch: {},
+    mounted() {
+        this.getMouseScale();
     },
     methods: {
+        ...mapMutations(["SETCHOICELEHEND", "SETOUTLINE"]),
         // 适配大小
         fitToWindow() {
             this.$emit("fit");
@@ -115,21 +132,26 @@ export default {
                 this.sliderVal = s > 0.1 ? s : 0.1;
             });
         },
-        showArea() {
-            // this.isShowArea = !this.isShowArea;
-            // this.$emit("showArea", this.isShowArea);
+        /**
+         * 区域显示
+         */
+        editOutline() {
+            // 区域显示
+            if (!this.isShowArea) {
+                this.SETCHOICELEHEND("Editoutline");
+            } else {
+                // 取消区域显示,删除蒙板对象
+                bus.$emit("deleteOutline");
+            }
         },
         /**
-         * 区域显示/隐藏
+         * 底图显隐
          */
         showBaseMap() {
             this.isShowBaseMap = !this.isShowBaseMap;
             bus.$emit("showBaseMap", !this.isShowBaseMap);
         },
     },
-    mounted() {
-        this.getMouseScale();
-    },
 };
 </script>
 <style lang="less" scoped>

+ 1 - 1
src/components/editview/leftToolBar/editInfoPoint.vue

@@ -100,7 +100,7 @@
                     <p>显示图标</p>
                     <el-upload
                         class="avatar-uploader"
-                        action="https://jsonplaceholder.typicode.com/posts/"
+                        action="/#"
                         :show-file-list="false"
                         :before-upload="beforeAvatarUpload"
                         :on-success="handleAvatarSuccess"

+ 1 - 1
src/components/editview/rightPropertyBar/BaseEquipment.vue

@@ -73,7 +73,7 @@
                     <p class="box-title">显示图标</p>
                     <el-upload
                         class="avatar-uploader"
-                        action="https://jsonplaceholder.typicode.com/posts/"
+                        action="/#"
                         :show-file-list="false"
                         :before-upload="beforeAvatarUpload"
                         :on-success="setStyle"

+ 1 - 1
src/components/editview/rightPropertyBar/BaseImagePro.vue

@@ -37,7 +37,7 @@
                 <el-upload
                     class="avatar-uploader"
                     drag
-                    action="https://jsonplaceholder.typicode.com/posts/"
+                    action="/#"
                     :show-file-list="false"
                     :before-upload="beforeAvatarUpload"
                     accept="image/jpeg,image/jpg,image/png,"

+ 1 - 1
src/components/editview/rightPropertyBar/BgImagePro.vue

@@ -37,7 +37,7 @@
                 <el-upload
                     class="avatar-uploader"
                     drag
-                    action="https://jsonplaceholder.typicode.com/posts/"
+                    action="/#"
                     :show-file-list="false"
                     :before-upload="beforeAvatarUpload"
                     accept="image/jpeg,image/jpg,image/png,"

+ 0 - 44
src/components/editview/rightPropertyBar/msgData.js

@@ -1,44 +0,0 @@
-export const msgData = [
-    {
-        msgType: '即时状态',
-        msgTypeId: 1,
-        id: '001',
-        msgName: '001信息点',
-        checked: false
-    },
-    {
-        msgType: '即时状态',
-        msgTypeId: 1,
-        id: '002',
-        msgName: '002信息点',
-        checked: false
-    },
-    {
-        msgType: '即时状态',
-        msgTypeId: 1,
-        id: '003',
-        msgName: '003信息点',
-        checked: false
-    },
-    {
-        msgType: '累计指标',
-        msgTypeId: 2,
-        id: '004',
-        msgName: '001信息点'
-        , checked: false
-    },
-    {
-        msgType: '累计指标',
-        msgTypeId: 2,
-        id: '005',
-        msgName: '002信息点'
-        , checked: false
-    },
-    {
-        msgType: '累计指标',
-        msgTypeId: 2,
-        id: '006',
-        msgName: '003信息点'
-        , checked: false
-    }
-]

+ 92 - 6
src/lib/SPlanScene.ts

@@ -24,7 +24,7 @@
  * ****/
 
 import { SBaseEditScene, SBasePipe, SBaseEquipment } from "@persagy-web/big-edit";
-import { SGraphEdit, SGraphPropertyCommand, SBaseImageEdit, SGraphDeleteListCommand } from "@persagy-web/edit";
+import { SGraphEdit, SGraphPropertyCommand, SBaseImageEdit, SGraphDeleteListCommand, SBaseMaskEdit } from "@persagy-web/edit";
 import { SMouseEvent } from "@persagy-web/base";
 import { SGraphItem, SGraphSelectContainer, SLineStyle } from "@persagy-web/graph";
 import { SItemStatus, ItemColor } from "@persagy-web/big";
@@ -35,7 +35,6 @@ import { SColor, SFont, SArrowStyleType } from "@persagy-web/draw";
 import { SPlanEquipment, SPlanParser, SPlanZone } from "./";
 import { SPlanBackgroundImage } from "@/lib/item/SPlanBackgroundImage";
 import { imgBaseUrl } from "@/api/imageservice";
-
 /**
  * 平面图场景类
  *
@@ -151,6 +150,9 @@ export class SPlanScene extends SBaseEditScene {
             item = this.addBasePipe(event, this.legendObj);
             item.zOrder = 9600;
             this.clearCmdStatus();
+        } else if (this.editCmd == "Editoutline") {
+            item = this.addMaskItem(event);
+            this.clearCmdStatus();
         } else if (this.editCmd == "") {
             super.onMouseDown(event);
         }
@@ -173,7 +175,83 @@ export class SPlanScene extends SBaseEditScene {
             item.zOrder = 9800;
         }
     }
+    /**
+     * 添加蒙板(区域显示使用)
+     *
+     * @param event
+     */
+    addMaskItem(event: SMouseEvent) {
+        const data = {
+            name: "蒙板",
+            num: 1,
+            type: "Mask",
+            // /** 位置 */
+            // pos: { x: 0, y: 0 },
+            properties: {
+                type: "BaseMaskItem",
+            },
+            style: {
+                default: {
+                    line: [{ x: event.x, y: event.y }],
+                    fillColor: new SColor("#00000099"),
+                },
+            },
+        };
+        const item = new SBaseMaskEdit(null, data);
+        // window.zzz = item
+        item.zOrder = 9999;
+        item.status = SItemStatus.Create;
+        this.addItem(item);
+        item.selectable = true;
+        this.grabItem = item;
+        item.isTransform = true;
+        item.showSelect = true;
+        // item.moveable = true;
+        item.connect("finishCreated", this, this.maskFinishCreated);
+        item.connect("onContextMenu", this, this.getItem);
+        this.view?.update();
+        return item;
+    }
+    /**
+     * 添加蒙板结束事件
+     */
+    maskFinishCreated(){
 
+    }
+    /**
+     * 读图时生成区域显示蒙板对象
+     *
+     * @param outline
+     */
+    initMaskItem(outline: any[]) {
+        const data = {
+            name: "蒙板",
+            num: 1,
+            type: "Mask",
+            // /** 位置 */
+            // pos: { x: 0, y: 0 },
+            properties: {
+                type: "BaseMaskItem",
+            },
+            style: {
+                default: {
+                    line: outline,
+                    fillColor: new SColor("#00000099"),
+                },
+            },
+        };
+        const item = new SBaseMaskEdit(null, data);
+        item.zOrder = 9999;
+        // item.status = SItemStatus.Create;
+        this.addItem(item);
+        item.selectable = true;
+        item.isTransform = true;
+        item.showSelect = true;
+        item.connect("finishCreated", this, this.finishCreated);
+        item.connect("onContextMenu", this, this.getItem);
+        this.view?.update();
+        return item;
+    }
     /**
      * 重载添加图片-可以根据底图缩放的图片
      * @param event
@@ -397,6 +475,7 @@ export class SPlanScene extends SBaseEditScene {
         const markers: any = []; /**图例节点 */ // 与工程信息无关的标识对象(增加文本注释,图上的图片说明)
         const objExtInfo: any = []; /**图例节点 */ // 与工程信息无关的标识对象(增加文本注释,图上的图片说明)
         const relations: any = []; /**图例节点 */ // 与工程信息无关的标识对象(增加文本注释,图上的图片说明)
+        let outline: null | array = null; /**区域显示 */
         let nodeList;
         if (isAll) {
             nodeList = this.root.children;
@@ -421,13 +500,20 @@ export class SPlanScene extends SBaseEditScene {
                 if (item.relationData && RelationType.includes(item.relationData.properties.type)) {
                     relations.push(item.toData());
                 }
+                //
+                if (item.data && ["BaseMaskItem"].includes(item.data.properties.type)) {
+                    const itemData = item.toData();
+                    outline = itemData.style.default.line;
+                }
             }
         });
-
         return {
-            markers,
-            objExtInfo,
-            relations,
+            elements: {
+                markers,
+                objExtInfo,
+                relations,
+            },
+            outline,
         };
     }
     /**

+ 5 - 1
src/store/index.ts

@@ -24,6 +24,7 @@ export default new Vuex.Store({
         zoneIteMap: {}, // 图上相关的空间实例
         zoneItemNum: 0, // 图上相关的空间实例的数量
         styleMap: {}, // 样式库信息
+        outline: null, // 区域显示,返回有轮廓点坐标时,区域显示,否则不进行区域显示
         ruleList: [], //规则列表
         objExtInfo: {}, // 对象实例信息
         showCheckbox: false, // 卡片复选框是否显示
@@ -111,7 +112,6 @@ export default new Vuex.Store({
                     backgroundColor: "#00000000",
                 };
             }
-            // outline = []
             state.styleMap = data;
         },
         // 初始化 equipItemMap, equipItemNum
@@ -139,6 +139,10 @@ export default new Vuex.Store({
             // @ts-ignore
             state.ruleList.push(data);
         },
+        // 修改区域显示
+        SETOUTLINE(state, data) {
+            state.outline = data;
+        },
         // 添加样式信息
         ADDSTYLE(state, data) {
             // @ts-ignore