系统图编辑工具相关功能开发

public/systemConf.js

@@ -5,6 +5,18 @@ var __systemConf = {
   sysGraphServiceUrl: '/sysGraphService',
   // 地图key
   mapKey: 'd42beb96e0e4fb0d49482975abeae1b7',
+  //系统图的默认配置
+  systemGraph: {
+    //配电类
+    peiDian: {
+      text: {
+        size: 16,
+        color: '#646C73',
+        weight: 600,
+        backGround: '#FFFFFF'
+      }
+    }
+  },
   //导航菜单
   menus: [{
     "id": "ready",

src/components/systemGraph/edit.vue

@@ -268,9 +268,19 @@
             <div>100%</div>
           </div>
         </div>
-        <div class="delBtn" v-if="selGraphPartType == 1">删除设备</div>
-        <div class="delBtn" v-if="selGraphPartType == 2">删除管线</div>
-        <div class="delBtn" v-if="selGraphPartType == 3">删除文字</div>
+        <div
+          class="delBtn"
+          v-if="selGraphPartType == 1 && operState == 1"
+          @click="delEquip"
+        >
+          删除设备
+        </div>
+        <div class="delBtn" v-if="selGraphPartType == 2 && operState == 1">
+          删除管线
+        </div>
+        <div class="delBtn" v-if="selGraphPartType == 3 && operState == 1">
+          删除文字
+        </div>
       </div>
     </div>
 
@@ -465,12 +475,16 @@ export default {
      * type 1 设备；  2 线；  3 文本
      */
     graphClickCall: function (dataObj, type) {
+      var oldPartType = this.selGraphPartType;
       this.selGraphPartType = type;
       this.selEquip = dataObj || {};
       var _this = this;
-      Vue.nextTick(function () {
-        _this.$refs.graphc.resetDraw();
-      });
+      //oldPartType为-1的时候，说明右侧面板之前是关闭的，那么展示后会导致图形区域变小，所以需要重绘图形
+      if (oldPartType == -1) {
+        Vue.nextTick(function () {
+          _this.$refs.graphc.resetDraw();
+        });
+      }
     },
     /**
      * 保存图纸按钮事件
@@ -579,6 +593,55 @@ export default {
       var newScale = this.$refs.graphc.graphScaleCompute(-0.25);
       this.$refs.graphc.graphScale(newScale);
     },
+    //删除选择的设备节点
+    delEquip: function () {
+      this.$refs.graphc.removeChildFromStage(this.selEquip.id, 1);
+      this.removeFromData(this.selEquip.id);
+    },
+    //graphInfo中移出对应的数据
+    removeFromData: function (id) {
+      this.graphInfo.template.frame.children = remove(
+        this.graphInfo.template.frame.children
+      );
+
+      var findArr = find(this.graphInfo.template.frame.children);
+      console.log(findArr);
+
+      function remove(dataArr) {
+        for (let i = 0; i < dataArr.length; i++) {
+          let _dataObj = dataArr[i];
+          if (_dataObj.id == id) {
+            dataArr.splice(i, 1);
+            return dataArr;
+          }
+          if (_dataObj.compType == "container") {
+            var result = remove(_dataObj.children);
+            if (result) {
+              _dataObj.children = result;
+              return dataArr;
+            }
+          }
+        }
+        return null;
+      }
+
+      function find(dataArr) {
+        for (let i = 0; i < dataArr.length; i++) {
+          let _dataObj = dataArr[i];
+          if (_dataObj.id == id) {
+            return dataArr;
+          }
+          if (_dataObj.compType == "container") {
+            var result = find(_dataObj.children);
+            if (result) {
+              // _dataObj.children = result;
+              return dataArr;
+            }
+          }
+        }
+        return null;
+      }
+    },
   },
   created() {
     this.operState = !this.$route.query.ost
@@ -595,7 +658,7 @@ export default {
   mounted() {
     var _this = this;
     (async function () {
-      //操作状态  0 预览； 1 编辑；  2 新建
+      //操作状态  0 预览； 1 编辑；  2 新建  进来时是预览或编辑状态时需要加载系统图数据并绘图
       if (_this.operState === 0 || _this.operState === 1) {
         await _this.getDiagramById();
         _this.$refs.graphc.drawEntry(_this.graphInfo);

src/components/systemGraph/graph.vue

@@ -39,9 +39,28 @@ export default {
           }
       */
       nodeArr: [],
-      //线数组
+      /**
+       * 线数组，格式如下：
+       * lines:[{
+          id: '',
+          path:[{x:1,y:1}],
+          style: {
+                    lineWidth: 4, //线宽
+                    lineColor: '#8D9399', //线的颜色
+                  }
+        }]
+       */
       lineArr: [],
-      //文本数组
+      /**
+       * 文本数组，格式如下：
+       * labels: [{
+          id:'',
+          text:'',
+          color: '',
+          fontSize: '',
+          backGround:''
+        }]
+       */
       labelArr: [],
       //存放图形用的一些信息点
       canvasProObj: {
@@ -233,6 +252,9 @@ export default {
             x: _dataObj.location.x + absolutePosition.x,
             y: _dataObj.location.y + absolutePosition.y,
           };
+          //文本
+          if (_dataObj.label) {
+          }
           switch (_dataObj.compType) {
             //容器
             case "container":
@@ -392,6 +414,7 @@ export default {
     clickEventCall: function (event, type) {
       var graphInstance = event.target || event.currentTarget;
       var dataId = graphInstance.name;
+      console.log("id：", dataId);
       var dataArr =
         type == 1
           ? this.nodeArr
@@ -429,6 +452,31 @@ export default {
         this.canvasProObj.positionPxY
       );
     },
+    /**
+     * 从舞台上移出元素：图例、线、文本
+     * id 数据ID，即元素的name
+     * type 1 设备；  2 线；  3 文本
+     */
+    removeChildFromStage: function (id, type) {
+      var dataArr =
+        type == 1
+          ? this.nodeArr
+          : type == 2
+          ? this.lineArr
+          : type == 3
+          ? this.labelArr
+          : [];
+      for (let i = 0; i < dataArr.length; i++) {
+        let _dataObj = dataArr[i];
+        if (_dataObj.id == id) {
+          dataArr.splice(i, 1);
+          break;
+        }
+      }
+
+      var child = this.pixiApp.stage.getChildByName(id);
+      this.pixiApp.stage.removeChild(child);
+    },
   },
   created() {},
 

src/controller/systemGraph/sysGraphController.ts

@@ -274,7 +274,6 @@ export class sysGraphController {
 
         //获取系统实例名称
         var _systemInstance = getSystemInstanceByCode(resultObj.data.systemId);
-        console.log(_systemInstance);
         resultObj.data.systemInstanceName = _systemInstance.name || '';