Explorar o código

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

niuheng %!s(int64=3) %!d(string=hai) anos
pai
achega
90a031377f

+ 80 - 18
src/components/systemGraph/edit.vue

@@ -88,13 +88,32 @@
           <span class="graphInfoName">系统图名称</span>
           <span
             class="graphInfoFirstEdit"
-            @click="intoEditState"
-            v-if="operState === 0"
+            @click="intoGraphNameEditState"
+            v-if="!isEditGraphName"
             >编辑</span
           >
+          <span
+            class="graphInfoFirstEdit"
+            @click="saveGraphName"
+            v-if="isEditGraphName"
+            >保存</span
+          >
+          <span
+            class="graphInfoFirstEdit"
+            @click="cancelSaveGraphName"
+            v-if="isEditGraphName"
+            >取消</span
+          >
         </div>
         <div class="graphInfoContent">
-          <span v-text="graphInfo.name">高压系统1#系统图</span>
+          <span v-text="graphInfo.name" v-if="!isEditGraphName"
+            >高压系统1#系统图</span
+          >
+          <el-input
+            v-model="graphInfo.name"
+            v-if="isEditGraphName"
+            @change="graphNameChange"
+          ></el-input>
         </div>
 
         <div class="graphInfoName">
@@ -176,25 +195,28 @@
         <div v-if="selGraphPartType == 2">
           <div class="title titleMargin">连线</div>
           <div class="detailSplitLine"></div>
-          <div>
-            <div class="title titleMargin">起点</div>
-            <div class="coridGroup title">
-              <span>x</span>
-              <span class="coridTitleText titleText">100</span>
-              <span class="coridTitle2">y</span>
-              <span class="coridTitleText titleText">100</span>
+          <div
+            v-for="(linePoint, _index) in selLine.path || []"
+            :key="_index.toString()"
+          >
+            <div
+              class="title titleMargin"
+              v-text="_index == 0 ? '起点' :_index ==selLine.path.length-1?  '终点':'拐点'+_index"
+            >
+              起点
             </div>
-          </div>
-          <div>
-            <div class="title titleMargin">拐点1</div>
             <div class="coridGroup title">
               <span>x</span>
-              <span class="coridTitleText titleText">100</span>
+              <span class="coridTitleText titleText" v-text="linePoint.x"
+                >100</span
+              >
               <span class="coridTitle2">y</span>
-              <span class="coridTitleText titleText">100</span>
+              <span class="coridTitleText titleText" v-text="linePoint.y"
+                >100</span
+              >
             </div>
           </div>
-          <div class="detailSplitLine"></div>
+          <!-- <div class="detailSplitLine"></div>
           <div class="title titleMargin">连接关系</div>
           <div class="titleMargin lianjieguanxi">
             <el-select
@@ -227,7 +249,7 @@
               >
               </el-option>
             </el-select>
-          </div>
+          </div> -->
         </div>
         <div v-if="selGraphPartType == 3">
           <div class="title titleMargin">文字</div>
@@ -496,8 +518,22 @@ export default {
           },
         }*/
       selText: {},
+      /**
+       * 选择的线,格式如下:
+       * {
+          id: '',
+          path:[{x:1,y:1}],
+          style: {
+                    lineWidth: 4, //线宽
+                    lineColor: '#8D9399', //线的颜色
+                  }
+        }
+       */
+      selLine: {},
       //是否展示左侧系统图基础信息
       isVisibleLeft: true,
+      //是否处于编辑系统图名称状态
+      isEditGraphName: false,
     };
   },
   computed: {},
@@ -650,7 +686,7 @@ export default {
           break;
         //线
         case 2:
-          // this.selEquip = dataObj || {};
+          this.selLine = dataObj || {};
           break;
         //文本
         case 3:
@@ -928,6 +964,32 @@ export default {
         })
         .catch(() => {});
     },
+    //进入系统图名称编辑状态
+    intoGraphNameEditState: function () {
+      this.isEditGraphName = true;
+    },
+    //保存系统图名称
+    saveGraphName: async function () {
+      this.fullscreenLoading = true;
+      var resultObj = await sysGraphController.saveGraphName({
+        id: this.diagramId,
+        name: this.graphInfo.name,
+      });
+      if (resultObj.result != logicConfig.resultObj.success) {
+        this.fullscreenLoading = false;
+        Message.error("保存失败");
+        return;
+      }
+      this.graphOriginInfo.name = this.graphInfo.name;
+      this.isEditGraphName = false;
+      this.fullscreenLoading = false;
+      Message.success("保存成功");
+    },
+    //取消保存系统图名称
+    cancelSaveGraphName: function () {
+      this.graphInfo.name = this.graphOriginInfo.name;
+      this.isEditGraphName = false;
+    },
   },
   created() {
     this.operState = !this.$route.query.ost

+ 10 - 0
src/controller/systemGraph/sysGraphController.ts

@@ -411,4 +411,14 @@ export class sysGraphController {
         isOpenTarget === true ? window.open(url) : window.location.href = url;
     }
 
+    /**
+    * 保存系统图名称
+    * @_paramObj {id:'系统图ID',name:'系统图名称'}
+    */
+     static async saveGraphName(_paramObj: any) {
+         var url = '/diagram/update/name';
+        var resultObj = await this.sysGraphHttpUtilsInstance.postRequest(url, _paramObj);
+        return resultObj;
+    }
+
 }