Browse Source

系统图编辑工具功能开发

niuheng 3 years ago
parent
commit
afa02bf4c2
2 changed files with 224 additions and 42 deletions
  1. 144 20
      src/components/systemGraph/edit.vue
  2. 80 22
      src/components/systemGraph/graph.vue

+ 144 - 20
src/components/systemGraph/edit.vue

@@ -225,13 +225,21 @@
         </div>
         <div v-if="selGraphPartType == 3">
           <div class="title titleMargin">文字</div>
-          <div class="titleText eqName">1#进线柜</div>
+          <div class="titleText eqName" v-text="selText.text">1#进线柜</div>
           <div class="detailSplitLine"></div>
           <div class="title titleMargin">
             <span>x</span>
-            <span class="coridTitleText titleText">100</span>
+            <span
+              class="coridTitleText titleText"
+              v-text="(selText.absolutePosition || {}).x"
+              >100</span
+            >
             <span class="coridTitle2">y</span>
-            <span class="coridTitleText titleText">100</span>
+            <span
+              class="coridTitleText titleText"
+              v-text="(selText.absolutePosition || {}).y"
+              >100</span
+            >
           </div>
           <div class="detailSplitLine"></div>
           <div class="title titleMargin">字体样式</div>
@@ -257,14 +265,22 @@
           </div>
           <div class="title titleMargin">字体颜色</div>
           <div class="titleMargin fontColor">
-            <input type="color" v-model="fontColor" />
+            <input
+              type="color"
+              v-model="fontColor"
+              @change="selFontColorChange"
+            />
             <div v-text="fontColor"></div>
             <div>100%</div>
           </div>
           <div class="title titleMargin">背景颜色</div>
           <div class="titleMargin fontColor">
-            <input type="color" v-model="backColor" />
-            <div v-text="backColor"></div>
+            <input
+              type="color"
+              v-model="fontBackColor"
+              @change="selFontBackColorChange"
+            />
+            <div v-text="fontBackColor"></div>
             <div>100%</div>
           </div>
         </div>
@@ -278,7 +294,11 @@
         <div class="delBtn" v-if="selGraphPartType == 2 && operState == 1">
           删除管线
         </div>
-        <div class="delBtn" v-if="selGraphPartType == 3 && operState == 1">
+        <div
+          class="delBtn"
+          v-if="selGraphPartType == 3 && operState == 1"
+          @click="delText"
+        >
           删除文字
         </div>
       </div>
@@ -388,8 +408,8 @@ export default {
       selFontSize: {},
       //字体颜色
       fontColor: "#eb5757",
-      //背景颜色
-      backColor: "#ffffff",
+      //字体背景颜色
+      fontBackColor: "#ffffff",
       //系统图原始数据
       graphOriginInfo: {},
       //系统图数据
@@ -421,6 +441,23 @@ export default {
           }
        */
       selEquip: {},
+      /*选择的文本,格式如下:
+      {
+          id:'',
+          text:'',
+          style:{
+            color: '',
+            fontSize: '',
+            backGround:'',
+            fontWeight:1
+          },
+          //文本的绝对位置
+          absolutePosition: {
+            x: 1,
+            y: 1,
+          },
+        }*/
+      selText: {},
       //是否展示左侧系统图基础信息
       isVisibleLeft: true,
     };
@@ -447,7 +484,40 @@ export default {
       console.log(this.selLineEndPoint);
     },
     //字号选择事件
-    selFontSizeChange: function () {},
+    selFontSizeChange: function () {
+      //更新graphInfo中的数据
+      this.updateGraphInfo(3, 2, { id: this.selText.id });
+      //更新图形以及图形数据源
+      this.$refs.graphc.updateDataAndGraph(3, 2, {
+        id: this.selText.id,
+        fontSize: this.selFontSize.id,
+      });
+    },
+    //字体颜色改变事件
+    selFontColorChange: function () {
+      //更新graphInfo中的数据
+      this.updateGraphInfo(3, 3, { id: this.selText.id });
+      //更新图形以及图形数据源
+      this.$refs.graphc.updateDataAndGraph(3, 3, {
+        id: this.selText.id,
+        fontColor: this.fontColor,
+      });
+    },
+    //字体backColor颜色改变事件
+    selFontBackColorChange: function () {
+      //更新graphInfo中的数据
+      this.updateGraphInfo(3, 4, { id: this.selText.id });
+      //更新图形以及图形数据源
+      this.$refs.graphc.updateDataAndGraph(3, 4, {
+        id: this.selText.id,
+        fontColor: this.fontBackColor,
+      });
+    },
+    //删除选择的文本节点
+    delText: function () {
+      this.$refs.graphc.updateDataAndGraph(3, 5, { id: this.selText.id });
+      this.updateGraphInfo(3, 5, { id: this.selText.id });
+    },
     //根据系统图ID获取系统图数据
     getDiagramById: async function () {
       this.fullscreenLoading = true;
@@ -475,9 +545,30 @@ export default {
      * type 1 设备;  2 线;  3 文本
      */
     graphClickCall: function (dataObj, type) {
+      var _this = this;
       var oldPartType = this.selGraphPartType;
       this.selGraphPartType = type;
-      this.selEquip = dataObj || {};
+      switch (type) {
+        //设备
+        case 1:
+          this.selEquip = dataObj || {};
+          break;
+        //线
+        case 2:
+          // this.selEquip = dataObj || {};
+          break;
+        //文本
+        case 3:
+          this.selText = dataObj || {};
+          this.selFontSize =
+            _this.fontSizeArr.filter((_c) => {
+              return _c.id == _this.selText.style.fontSize;
+            })[0] || {};
+          this.fontColor = this.selText.style.color;
+          this.fontBackColor = this.selText.style.backGround;
+          break;
+      }
+
       var _this = this;
       //oldPartType为-1的时候,说明右侧面板之前是关闭的,那么展示后会导致图形区域变小,所以需要重绘图形
       if (oldPartType == -1) {
@@ -595,8 +686,8 @@ export default {
     },
     //删除选择的设备节点
     delEquip: function () {
-      this.$refs.graphc.removeChildFromStage(this.selEquip.id, 1);
-      this.removeFromData(this.selEquip.id);
+      this.$refs.graphc.updateDataAndGraph(1, 1, { id: this.selEquip.id });
+      this.updateGraphInfo(1, 1, { id: this.selEquip.id });
     },
     //graphInfo中移出对应的数据
     removeFromData: function (id) {
@@ -604,9 +695,6 @@ export default {
         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];
@@ -624,17 +712,53 @@ export default {
         }
         return null;
       }
+    },
 
-      function find(dataArr) {
+    /**
+     * 更新graphInfo中的数据
+     * dataType 1 设备;  2 线;  3 文本
+     * operType 1 移除设备节点;  2 更新文本字体大小;  3 更新文本颜色;  4 更新文本背景色;  5 移除文本节点
+     * exprObj 扩展数据,支持:{id:'数据id'}
+     */
+    updateGraphInfo: function (dataType, operType, exprObj) {
+      var _this = this;
+      _each(this.graphInfo.template.frame.children);
+
+      function _each(dataArr) {
         for (let i = 0; i < dataArr.length; i++) {
           let _dataObj = dataArr[i];
-          if (_dataObj.id == id) {
+
+          var _id =
+            dataType == 1
+              ? _dataObj.id
+              : dataType == 3
+              ? (_dataObj.label || {}).id
+              : "";
+          if (_id == exprObj.id) {
+            switch (operType) {
+              case 1:
+                dataArr.splice(i, 1);
+                break;
+              case 2:
+                _dataObj.label.style.fontSize = _this.selFontSize.id;
+                break;
+              case 3:
+                _dataObj.label.style.color = _this.fontColor;
+                break;
+              case 4:
+                _dataObj.label.style.backGround = _this.fontBackColor;
+                break;
+              case 5:
+                _dataObj.label.content = "";
+                break;
+            }
+
             return dataArr;
           }
           if (_dataObj.compType == "container") {
-            var result = find(_dataObj.children);
+            var result = _each(_dataObj.children);
             if (result) {
-              // _dataObj.children = result;
+              _dataObj.children = result;
               return dataArr;
             }
           }

+ 80 - 22
src/components/systemGraph/graph.vue

@@ -167,6 +167,7 @@ export default {
         var newHeight =
           _dataObj.legendObj.size.height * _this.canvasProObj.originalScale;
         graphicsRect.drawRect(newCordObj.x, newCordObj.y, newWidth, newHeight);
+        //设置点击范围,不然click事件不会触发
         graphicsRect.hitArea = graphicsRect.getBounds();
 
         graphicsRect.name = _dataObj.id;
@@ -206,6 +207,33 @@ export default {
         pixiApp.stage.addChild(legendSprite);
       });
 
+      //文本
+      _this.labelArr.forEach((_labelObj) => {
+        var pixiTextStyle = new PIXI.TextStyle({
+          fill: _labelObj.style.color,
+          fontSize: _labelObj.style.fontSize,
+          fontWeight: _labelObj.style.fontWeight,
+          // stroke: "#ffffff",
+          // strokeThickness: _this.defaultStyle.text.fontStrokeWidth,
+        });
+        var textInstance = new PIXI.Text(_labelObj.text, pixiTextStyle);
+        textInstance.name = _labelObj.id;
+
+        let newCordObj = _this.convertCoordToLeftOrigina({
+          x: _labelObj.absolutePosition.x,
+          y: _labelObj.absolutePosition.y,
+        });
+
+        textInstance.position.set(newCordObj.x, newCordObj.y);
+        // console.log(textInstance.width, "-", textInstance.height);
+        //启用事件
+        textInstance.interactive = true;
+        textInstance.on("click", (event) => {
+          _this.clickEventCall(event, 3);
+        });
+        pixiApp.stage.addChild(textInstance);
+      });
+
       return;
       //画线
       _this.dataSource.view.diagram.lines.forEach((_cLine) => {
@@ -256,6 +284,11 @@ export default {
        */
       function parseNode(dataArr, absolutePosition) {
         dataArr.forEach((_dataObj) => {
+          var newAbsolutePosition = {
+            x: _dataObj.location.x + absolutePosition.x,
+            y: _dataObj.location.y + absolutePosition.y,
+          };
+
           //文本
           if (_dataObj.label && _dataObj.label.content) {
             let _labelObj = _dataObj.label;
@@ -275,10 +308,11 @@ export default {
               _style.fontWeight ||
               window.__systemConf.systemGraph.peiDian.text.weight;
 
-            let textNewAbsolutePosition = {
-              x: _dataObj.location.x + absolutePosition.x,
-              y: _dataObj.location.y + absolutePosition.y,
+            var textNewAbsolutePosition = {
+              x: _labelObj.location.x + newAbsolutePosition.x,
+              y: _labelObj.location.y + newAbsolutePosition.y,
             };
+
             labelArr.push({
               id: _labelObj.id,
               text: _labelObj.content,
@@ -289,17 +323,12 @@ export default {
                 fontWeight: _style.fontWeight,
               },
               //文本的绝对位置
-              absolutePosition: {
-                x: 1,
-                y: 1,
-              },
+              absolutePosition: textNewAbsolutePosition,
             });
-          }
 
-          var newAbsolutePosition = {
-            x: _dataObj.location.x + absolutePosition.x,
-            y: _dataObj.location.y + absolutePosition.y,
-          };
+            _labelObj.style = _style;
+            _dataObj.label = _labelObj;
+          }
           switch (_dataObj.compType) {
             //容器
             case "container":
@@ -459,7 +488,6 @@ 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
@@ -502,25 +530,55 @@ export default {
      * id 数据ID,即元素的name
      * type 1 设备;  2 线;  3 文本
      */
-    removeChildFromStage: function (id, type) {
+    /**
+     * 更新graphInfo中的数据
+     * dataType 1 设备;  2 线;  3 文本
+     * operType 1 移除设备节点;  2 更新文本字体大小;  3 更新文本颜色;  4 更新文本背景色;  5 移除文本节点
+     * exprObj 扩展数据,支持:{id:'数据id',fontSize:'字体大小',fontColor:'文本颜色',fontBackColor:'文本背景色'}
+     */
+    updateDataAndGraph: function (dataType, operType, exprObj) {
+      // fill: _labelObj.style.color,
+      //     fontSize: _labelObj.style.fontSize,
+      //     fontWeight: _labelObj.style.fontWeight,
       var dataArr =
-        type == 1
+        dataType == 1
           ? this.nodeArr
-          : type == 2
+          : dataType == 2
           ? this.lineArr
-          : type == 3
+          : dataType == 3
           ? this.labelArr
           : [];
       for (let i = 0; i < dataArr.length; i++) {
         let _dataObj = dataArr[i];
-        if (_dataObj.id == id) {
-          dataArr.splice(i, 1);
+        if (_dataObj.id == exprObj.id) {
+          var stageChild = this.pixiApp.stage.getChildByName(exprObj.id);
+          var _stageStyle = stageChild.style;
+          switch (operType) {
+            case 1:
+            case 5:
+              dataArr.splice(i, 1);
+              this.pixiApp.stage.removeChild(stageChild);
+              break;
+            case 2:
+              _dataObj.style.fontSize = exprObj.fontSize;
+              _stageStyle.fontSize = exprObj.fontSize;
+              stageChild.style = _stageStyle;
+              break;
+            case 3:
+              _dataObj.style.color = exprObj.fontColor;
+              _stageStyle.fill = exprObj.fontColor;
+              stageChild.style = _stageStyle;
+              break;
+            case 4:
+              _dataObj.style.backGround = exprObj.fontBackColor;
+              // _stageStyle.fontSize = exprObj.fontSize;
+              // stageChild.style = _stageStyle;
+              break;
+          }
+
           break;
         }
       }
-
-      var child = this.pixiApp.stage.getChildByName(id);
-      this.pixiApp.stage.removeChild(child);
     },
   },
   created() {},