Merge branch 'develop' of http://39.106.8.246:3003/web/persagy_topo_editer into develop

public/systemConf.js

@@ -39,7 +39,8 @@ var __systemConf = {
         { id: "Pj0002220008", name: "数字化交付08" },
         { id: "Pj0002220009", name: "数字化交付09" },
         { id: "Pj00022200010", name: "数字化交付10" },
-
+        // 资产管理
+        { id: "Pj3702020002", name: "青岛海天中心" }
 
 
     ] // 项目列表

src/components/editClass/persagy-edit/PTopoFactory.ts

@@ -28,6 +28,7 @@ import { Marker } from "@persagy-web/big"
 import { SBaseInfoPoint } from "./items/SBaseInfoPoint"
 import { SBasePipeUninTool } from "./items/SBasePipeUninTool"
 import { SBaseBtns } from "./items/SBaseBtns"
+import { SBaseEquation } from "./items/SBaseEquation"
 import { BigEditFactory } from "@persagy-web/big-edit"
 /**
  * item 创建工厂
@@ -78,4 +79,17 @@ export class PTopoFactory extends BigEditFactory {
         item.data = data;
         return item;
     }
+
+    /**
+     * 创建公式
+     *
+     * @param data  数据
+     * @return 线
+     */
+    createBaseEqation(data: Marker): SBaseEquation {
+        const item = new SBaseEquation(null, data);
+        item.data = data;
+        return item;
+    }
+
 }

src/components/editClass/persagy-edit/PTopoParser.ts

@@ -112,6 +112,9 @@ export class PTopoParser extends SParser {
                 case "baseBtn":
                     this.markers.push(this.factory.createBaseBaseBtn(data));
                     break;
+                case "Equation":
+                        this.markers.push(this.factory.createBaseEqation(data));
+                    break;
                 case "BaseArrowPolygon":
                     this.markers.push(this.factory.createBasePolygonArrowEdit(data));
             }

src/components/editClass/persagy-edit/PTopoScene.ts

@@ -495,7 +495,7 @@ export class PTopoScene extends SBaseEditScene {
      */
     save(isAll: boolean = true) {
         if (!this.view) return;
-        const Marktype: string[] = ['BasePolygon', 'BaseLine', 'BaseText', 'BaseExplain', 'BaseImage', 'BaseCircle', 'BaseArrow', 'BaseTriangle', 'BaseRect', 'BaseArrowPolygon', 'InfoPoint', 'BasePipeUninTool','baseBtn'];
+        const Marktype: string[] = ['BasePolygon', 'BaseLine', 'BaseText', 'BaseExplain', 'BaseImage', 'BaseCircle', 'BaseArrow', 'BaseTriangle', 'BaseRect', 'BaseArrowPolygon', 'InfoPoint', 'BasePipeUninTool','baseBtn',"Equation"];
         const NodeType: string[] = ['BaseEquipment'];
         const RelationType: string[] = ["BasePipe"];
         const markers: any = [];   /**图例节点 */  // 与工程信息无关的标识对象（增加文本注释，图上的图片说明）

src/components/editview/baseTopoEditer.vue

@@ -25,6 +25,7 @@ import {
   PTopoParser,
   PTopoView,
 } from "@/components/editClass/persagy-edit";
+import { SBaseEquipment } from "@persagy-web/big-edit";
 import topoTooltip from "./topoTooltip.vue";
 import zoom from "./zoom";
 import { mapState, mapMutations } from "vuex";
@@ -66,6 +67,8 @@ export default {
       autoSave: null, // 自动保存定时器
       isLock: false, //右键item是否锁定
       viewScale: 0, //视图缩放比例
+      changeScaleByClick: false, //区分滚轮，点击 事件改变的缩放比例
+      initScale: 1,
     };
   },
   computed: {
@@ -120,6 +123,7 @@ export default {
       "EDITEQUIPITEM",
       "SETVERSION",
       "SETVBACKGROUND",
+      "SYNCSCENCEEQUIp",
     ]),
     // 恢复命令状态
     clearCmdStatus() {
@@ -169,11 +173,15 @@ export default {
       bus.$off("topoUndo");
       bus.$on("topoUndo", (val) => {
         this.scene.undo();
+        //撤销后 scence中设备与vuex设备数组做同步
+        this.SyncVuex();
       });
       // 重做
       bus.$off("topoRedo");
       bus.$on("topoRedo", (val) => {
         this.scene.redo();
+        //撤销后 scence中设备与vuex设备数组做同步
+        this.SyncVuex();
       });
       // 删除
       bus.$off("deleteItem");
@@ -251,6 +259,27 @@ export default {
       bus.$on("changeBackgroundColor", (val) => {
         this.scene.changeBackgroundColor(val);
       });
+      // 比例缩放
+      bus.$off("scale");
+      bus.$on("scale", (newV, oldV) => {
+        this.changeScaleByClick = true;
+        this.view.scaleByPoint(
+          newV / oldV,
+          this.canvasWidth / 2,
+          this.canvasHeight / 2
+        );
+        this.changeScaleByClick = false;
+      });
+    },
+    // 同步场景与vuex设备数据
+    SyncVuex() {
+      const arr = [];
+      this.scene.root.children.forEach((item) => {
+        if (item instanceof SBaseEquipment) {
+          arr.push(item);
+        }
+      });
+      this.SYNCSCENCEEQUIp(arr);
     },
     // 读取拓扑图
     readtopoMsg() {
@@ -355,6 +384,9 @@ export default {
       });
       // 读取完成后默认走保存一次
       this.saveTopoDraft();
+      // 设置初始化缩放比例
+      this.initScale = this.view.scale;
+      bus.$emit("initScale", this.view.scale);
     },
     // 生成快照并保存草稿
     saveTopoDraft() {
@@ -573,6 +605,15 @@ export default {
       },
       deep: true,
     },
+    // 监听scale的变化
+    "view.scale": {
+      handler(scale) {
+        // 滚轮触发的缩放
+        if (!this.changeScaleByClick) {
+          bus.$emit("mouseScale", scale / this.initScale);
+        }
+      },
+    },
   },
   created() {
     this.SETPROJECT(this.$route.query);

src/components/editview/leftToolBar/data.js

@@ -87,12 +87,12 @@ export const baseEditItems = [{
             //     icon: require("./../../../assets/images/leftImgs/" + "equipList.png"),
             //     activeIcon: require("./../../../assets/images/leftImgs/" + "equipList" + "Active" + ".png")
             // },
-            // {
-            //     name: '通用实例',
-            //     id: "publicItem",
-            //     icon: require("./../../../assets/images/leftImgs/" + "publicItem.png"),
-            //     activeIcon: require("./../../../assets/images/leftImgs/" + "publicItem" + "Active" + ".png")
-            // }
+            {
+                name: '通用实例',
+                id: "publicItem",
+                icon: require("./../../../assets/images/leftImgs/" + "publicItem.png"),
+                activeIcon: require("./../../../assets/images/leftImgs/" + "publicItem" + "Active" + ".png")
+            }
         ]
     },
     {

src/components/editview/rightPropertyBar/BaseImagePro.vue

@@ -26,14 +26,14 @@
               placeholder="请输入内容"
             ></el-input>
           </div>
-          <el-upload
+          <!-- <el-upload
             class="avatar-uploader"
             action="https://jsonplaceholder.typicode.com/posts/"
             :show-file-list="false"
             :before-upload="beforeAvatarUpload"
           >
             <i class="el-icon-link"></i>
-          </el-upload>
+          </el-upload> -->
         </div>
       </li>
       <li>
@@ -184,7 +184,7 @@ export default {
       if (val.length > 0 && !isNaN(Number(val))) {
         if (val > 360) {
           val = 360;
-        } 
+        }
         if (val < -360) {
           val = -360;
         }

src/components/editview/rightPropertyBar/property.vue

@@ -216,7 +216,8 @@ export default {
         this.end = arrowType[item.end];
       } else if (
         this.itemType == "BaseText" ||
-        this.itemType == "BaseExplain"
+        this.itemType == "BaseExplain" ||
+        this.itemType == "Equation"
       ) {
         this.strokeColor = item.strokeColor.toRgba();
         this.backgroundColor = item.backgroundColor.toRgba();

src/components/editview/zoom.vue

@@ -2,20 +2,59 @@
 <template>
   <div id="zoom">
     <i @click="sacle(1)" class="el-icon-zoom-in btn"></i>
-    <span>{{Math.floor(scale * 100)}}%</span>
+    <span>{{ sliderValPercent }}</span>
     <i @click="sacle(0)" class="el-icon-zoom-out btn"></i>
   </div>
 </template>
 <script>
+import bus from "@/bus/bus";
 export default {
   props: ["scale"],
   data() {
-    return {};
+    return {
+      min: 0.1,
+      max: 5,
+      initScale: 1, //初始 底图缩放比例
+      sliderVal: 1, // 缩放比例
+    };
+  },
+  computed: {
+    sliderValPercent() {
+      return `${(this.sliderVal * 100).toFixed(0)}%`;
+    },
   },
   methods: {
     sacle(data) {
-      this.$emit("sacle", data);
+      const oldV = this.sliderVal;
+      if (data) {
+        this.sliderVal = Number((this.sliderVal + 0.1).toFixed(1));
+        if (this.sliderVal > this.maxScale) {
+          this.sliderVal = this.maxScale;
+        }
+        bus.$emit("scale", this.sliderVal, oldV);
+      } else {
+        this.sliderVal = Number((this.sliderVal - 0.1).toFixed(1));
+        if (this.sliderVal < this.min) {
+          this.sliderVal = this.min;
+        }
+        bus.$emit("scale", this.sliderVal, oldV);
+      }
     },
+    /**
+     * @name getMouseScale
+     * @description 滚轮滚动，导致的底图缩放比例 逻辑处理
+     */
+    getMouseScale() {
+      //  zoom 为缩放后改变的比例
+      bus.$off("mouseScale");
+      bus.$on("mouseScale", (zoom) => {
+        const s = Number((zoom * this.initScale).toFixed(2));
+        this.sliderVal = s > 0.1 ? s : 0.1;
+      });
+    },
+  },
+  mounted() {
+    this.getMouseScale();
   },
 };
 </script>

src/store/index.ts

@@ -77,7 +77,12 @@ export default new Vuex.Store({
     // 获取完成所有分类后
     SETCATEGORYGRAPH(state, val): void {
       state.categoryGraph = val;
-      
+    },
+
+    // 同步场景设备
+    SYNCSCENCEEQUIp(state, val = []) {
+      state.equipmentItemList = val;
+      state.equipmentItemNum = val.length;
     }
   },
   actions: {