Browse Source

系统图相关功能开发

niuheng 3 years ago
parent
commit
fbd01495d7

+ 21 - 11
src/components/systemGraph/addGraph.vue

@@ -145,6 +145,16 @@ export default {
     },
     //新增按钮事件
     newOkEvent: async function () {
+      if (!this.createGraphName) return Message.warning("请填写系统图名称");
+      if (this.createGraphName.length < 3 || this.createGraphName.length > 15)
+        return Message.warning("系统图名称的长度在3~15个字符之间");
+      if (!this.selProject || !this.selProject.id)
+        return Message.warning("请选择项目");
+      if (!this.selSystemIns || !this.selSystemIns.value)
+        return Message.warning("请选择系统实例");
+      if (!this.selSystemTemplate || !this.selSystemTemplate.value)
+        return Message.warning("请选择系统图模版");
+
       this.fullscreenLoading = true;
       try {
         var _paramObj = {
@@ -168,17 +178,17 @@ export default {
             Message.error("操作失败,原因:" + createResult.message);
             break;
           case logicConfig.resultObj.success:
-            // this.$emit("created", createResult.data);
-            let dataObj = createResult.data;
-            sysGraphController.openGraphPage(
-              1,
-              dataObj.id,
-              this.selProject.groupCode,
-              this.selProject.id,
-              this.selProject.name,
-              window.__systemConf.baseRouteUrl,
-              false
-            );
+            this.$emit("graphCreated", createResult.data);
+            // let dataObj = createResult.data;
+            // sysGraphController.openGraphPage(
+            //   1,
+            //   dataObj.id,
+            //   this.selProject.groupCode,
+            //   this.selProject.id,
+            //   this.selProject.name,
+            //   window.__systemConf.baseRouteUrl,
+            //   false
+            // );
             break;
         }
       } catch (error) {

+ 63 - 7
src/components/systemGraph/edit.vue

@@ -201,7 +201,13 @@
           >
             <div
               class="title titleMargin"
-              v-text="_index == 0 ? '起点' :_index ==selLine.path.length-1?  '终点':'拐点'+_index"
+              v-text="
+                _index == 0
+                  ? '起点'
+                  : _index == selLine.path.length - 1
+                  ? '终点'
+                  : '拐点' + _index
+              "
             >
               起点
             </div>
@@ -350,7 +356,11 @@
         >
           删除设备
         </div>
-        <div class="delBtn" v-if="selGraphPartType == 2 && operState == 1">
+        <div
+          class="delBtn"
+          v-if="selGraphPartType == 2 && operState == 1"
+          @click="delLine"
+        >
           删除管线
         </div>
         <div
@@ -363,7 +373,11 @@
       </div>
     </div>
 
-    <addGraph :isVisible="operState == 2" v-if="operState == 2"></addGraph>
+    <addGraph
+      :isVisible="operState == 2"
+      v-if="operState == 2"
+      @graphCreated="createSuccessed"
+    ></addGraph>
   </div>
 </template>
 <script>
@@ -375,7 +389,7 @@ import { logicConfig } from "@/logicConfig";
 import { Message } from "element-ui";
 import Vue from "vue";
 import vueStore from "@/store";
-
+import { mapState } from "vuex";
 export default {
   props: [],
   data() {
@@ -536,7 +550,9 @@ export default {
       isEditGraphName: false,
     };
   },
-  computed: {},
+  computed: {
+    ...mapState(["projects"]),
+  },
   methods: {
     /**
      * 新建成功后执行的操作
@@ -547,7 +563,21 @@ export default {
       this.operState = 1;
       this.graphOriginInfo = JSON.parse(JSON.stringify(graphInfo));
       this.graphInfo = graphInfo;
+      this.diagramId = graphInfo.id;
       this.$refs.graphc.drawEntry(graphInfo);
+
+      for (let i = 0; i < this.projects.length; i++) {
+        let currProject = this.projects[i];
+        if (currProject.id == graphInfo.projectId) {
+          this.project = {
+            id: currProject.id,
+            name: currProject.name,
+            groupCode: currProject.groupCode,
+          };
+          vueStore.commit("updateSelectProject", this.project);
+          break;
+        }
+      }
     },
     //线的起点选择事件
     selStartPointChange: function () {
@@ -850,6 +880,11 @@ export default {
       this.$refs.graphc.updateDataAndGraph(1, 1, { id: this.selEquip.id });
       this.updateGraphInfo(1, 1, { id: this.selEquip.id });
     },
+    //删除选择的线
+    delLine: function () {
+      this.$refs.graphc.updateDataAndGraph(2, 8, { id: this.selLine.id });
+      this.updateGraphInfo(2, 8, { id: this.selLine.id });
+    },
     //graphInfo中移出对应的数据
     removeFromData: function (id) {
       this.graphInfo.template.frame.children = remove(
@@ -878,12 +913,33 @@ export default {
     /**
      * 更新graphInfo中的数据
      * dataType 1 设备;  2 线;  3 文本
-     * operType 1 移除设备节点;  2 更新文本字体大小;  3 更新文本颜色;  4 更新文本背景色;  5 移除文本节点;  6 修改文本位置;  7 修改文本内容
+     * operType 1 移除设备节点;  2 更新文本字体大小;  3 更新文本颜色;  4 更新文本背景色;  5 移除文本节点;  6 修改文本位置;  7 修改文本内容; 8删除线
      * exprObj 扩展数据,支持:{id:'数据id',text:{xChange:1 新的绝对坐标减去旧的绝对坐标得出的值 ,yChange:1 新的绝对坐标减去旧的绝对坐标得出的值,content:'文本内容'}}
      */
     updateGraphInfo: function (dataType, operType, exprObj) {
       var _this = this;
-      _each(this.graphInfo.template.frame.children);
+      switch (dataType) {
+        case 2:
+          operLine();
+          break;
+        default:
+          _each(this.graphInfo.template.frame.children);
+          break;
+      }
+
+      function operLine() {
+        var arr = _this.graphInfo.lines;
+        for (let i = 0; i < arr.length; i++) {
+          if (arr[i].id == exprObj.id) {
+            switch (operType) {
+              case 8:
+                arr.splice(i, 1);
+                break;
+            }
+            break;
+          }
+        }
+      }
 
       function _each(dataArr) {
         for (let i = 0; i < dataArr.length; i++) {

+ 2 - 6
src/components/systemGraph/graph.vue

@@ -639,14 +639,9 @@ export default {
       );
     },
     /**
-     * 从舞台上移出元素:图例、线、文本
-     * id 数据ID,即元素的name
-     * type 1 设备;  2 线;  3 文本
-     */
-    /**
      * 更新graphInfo中的数据
      * dataType 1 设备;  2 线;  3 文本
-     * operType 1 移除设备节点;  2 更新文本字体大小;  3 更新文本颜色;  4 更新文本背景色;  5 移除文本节点  6 修改文本位置;  7 修改文本内容
+     * operType 1 移除设备节点;  2 更新文本字体大小;  3 更新文本颜色;  4 更新文本背景色;  5 移除文本节点  6 修改文本位置;  7 修改文本内容;   8删除线
      * exprObj 扩展数据,支持:{id:'数据id',fontSize:'字体大小',fontColor:'文本颜色',fontBackColor:'文本背景色',text:{xChange:1 新的绝对坐标减去旧的绝对坐标得出的值 ,yChange:1 新的绝对坐标减去旧的绝对坐标得出的值,content:'文本内容'}}
      */
     updateDataAndGraph: function (dataType, operType, exprObj) {
@@ -666,6 +661,7 @@ export default {
           switch (operType) {
             case 1:
             case 5:
+            case 8:
               dataArr.splice(i, 1);
               this.pixiApp.stage.removeChild(stageChild);
               break;

+ 62 - 57
src/controller/systemGraph/sysGraphController.ts

@@ -228,6 +228,7 @@ export class sysGraphController {
             loadResultObj.message = '加载模板数据失败:' + loadResultObj.message;
             return loadResultObj;
         }
+        loadResultObj.data = await this.parseSystemGraphInfo(loadResultObj.data, _paramObj.groupCode, _paramObj.projectId);
 
         // //加载数据成功后保存数据
         // var saveResultObj = await this.saveSysGraph(loadResultObj.data, _paramObj.projectId, _paramObj.groupCode);
@@ -243,19 +244,74 @@ export class sysGraphController {
      * 加载数据
      * @param _paramObj {projectId:'项目id',groupCode:'集团编码',id:'系统图ID'}
      */
-     static async loadData(_paramObj: any) {
+    static async loadData(_paramObj: any) {
         var loadDataUrl = '/diagram/loadData?groupCode=' + _paramObj.groupCode + '&projectId=' + _paramObj.projectId;
         var loadResultObj = await this.sysGraphHttpUtilsInstance.postRequest(loadDataUrl, { id: _paramObj.id });
         return loadResultObj;
     }
 
     /**
+     * 解析系统图数据
+     * @param dataObj 
+     */
+    static async parseSystemGraphInfo(dataObj: any, groupCode: string, projectId: string) {
+        //取得专业>系统类型>系统实例  以和系统图列表中的系统类型编码 对应以获取系统实例名称
+        if (this.zhuanyeArr.length == 0) {
+            var url2 = '/diagram/major/system/instance?groupCode=' + groupCode + '&projectId=' + projectId;
+            var zhuanyeObj = await this.sysGraphHttpUtilsInstance.postRequest(url2, {});
+            this.zhuanyeArr = zhuanyeObj.data || [];
+        }
+
+        //获取系统实例名称
+        var _systemInstance = getSystemInstanceByCode(dataObj.systemId);
+        dataObj.systemInstanceName = _systemInstance.name || '';
+
+
+        //获取系统图类型和系统图模版
+        var _temoObj = await this.getTemplateGraphTypeBySysTypeCode(dataObj.system, dataObj.templateId);
+        dataObj.graphTypeName = ((_temoObj || {}).graphType || {}).name;
+        dataObj.templateName = ((_temoObj || {}).template || {}).name;
+
+        //状态名称
+        dataObj.stateName = this.getStateNameByCode((dataObj.extraProps || {}).state);
+
+
+        return dataObj;
+
+        //获取系统实例信息
+        function getSystemInstanceByCode(systemInstanceId: string) {
+            for (let i = 0; i < sysGraphController.zhuanyeArr.length; i++) {
+                //专业
+                let zhuanye = sysGraphController.zhuanyeArr[i];
+                //系统类型数组
+                let systemTypeArr = zhuanye.children || [];
+                let isFind = false;
+                for (let j = 0; j < systemTypeArr.length; j++) {
+                    //系统类型
+                    let systemType = systemTypeArr[j];
+                    //系统实例数组
+                    let systemInstanceArr = systemType.children || [];
+                    for (let k = 0; k < systemInstanceArr.length; k++) {
+                        //系统实例
+                        let systemInstance = systemInstanceArr[k];
+                        if (systemInstance.id == systemInstanceId)
+                            return systemInstance;
+                    }
+                }
+                if (isFind)
+                    break;
+            }
+        };
+    };
+
+    /**
      * 重置数据
      * @param _paramObj {projectId:'项目id',groupCode:'集团编码',id:'系统图ID'}
      */
-     static async resetData(_paramObj: any) {
+    static async resetData(_paramObj: any) {
         var loadDataUrl = '/diagram/reset?groupCode=' + _paramObj.groupCode + '&projectId=' + _paramObj.projectId;
         var loadResultObj = await this.sysGraphHttpUtilsInstance.postRequest(loadDataUrl, { id: _paramObj.id });
+        loadResultObj.data = await this.parseSystemGraphInfo(loadResultObj.data, _paramObj.groupCode, _paramObj.projectId);
         return loadResultObj;
     }
 
@@ -292,61 +348,10 @@ export class sysGraphController {
         //   resultObj.data.lines=tempData.lines;
         //   resultObj.data.template=tempData.template;
 
-//#regionend -------------------------------------------------------------------------------测试结束
-
-
-        var dataObj = resultObj.data || {};
-        if (!dataObj.id)
-            return { result: logicConfig.resultObj.failure, message: '缺少系统图ID' };
-
-
-        //取得专业>系统类型>系统实例  以和系统图列表中的系统类型编码 对应以获取系统实例名称
-        if (this.zhuanyeArr.length == 0) {
-            var url2 = '/diagram/major/system/instance?groupCode=' + groupCode + '&projectId=' + projectId;
-            var zhuanyeObj = await this.sysGraphHttpUtilsInstance.postRequest(url2, {});
-            this.zhuanyeArr = zhuanyeObj.data || [];
-        }
-
-        //获取系统实例名称
-        var _systemInstance = getSystemInstanceByCode(resultObj.data.systemId);
-        resultObj.data.systemInstanceName = _systemInstance.name || '';
-
-
-        //获取系统图类型和系统图模版
-        var _temoObj = await this.getTemplateGraphTypeBySysTypeCode(resultObj.data.system, resultObj.data.templateId);
-        resultObj.data.graphTypeName = ((_temoObj || {}).graphType || {}).name;
-        resultObj.data.templateName = ((_temoObj || {}).template || {}).name;
-
-        //状态名称
-        resultObj.data.stateName = this.getStateNameByCode((resultObj.data.extraProps || {}).state);
-
+        //#regionend -------------------------------------------------------------------------------测试结束
 
+        resultObj.data = await this.parseSystemGraphInfo(resultObj.data, groupCode, projectId);
         return resultObj;
-
-        //获取系统实例信息
-        function getSystemInstanceByCode(systemInstanceId: string) {
-            for (let i = 0; i < sysGraphController.zhuanyeArr.length; i++) {
-                //专业
-                let zhuanye = sysGraphController.zhuanyeArr[i];
-                //系统类型数组
-                let systemTypeArr = zhuanye.children || [];
-                let isFind = false;
-                for (let j = 0; j < systemTypeArr.length; j++) {
-                    //系统类型
-                    let systemType = systemTypeArr[j];
-                    //系统实例数组
-                    let systemInstanceArr = systemType.children || [];
-                    for (let k = 0; k < systemInstanceArr.length; k++) {
-                        //系统实例
-                        let systemInstance = systemInstanceArr[k];
-                        if (systemInstance.id == systemInstanceId)
-                            return systemInstance;
-                    }
-                }
-                if (isFind)
-                    break;
-            }
-        };
     }
 
 
@@ -415,8 +420,8 @@ export class sysGraphController {
     * 保存系统图名称
     * @_paramObj {id:'系统图ID',name:'系统图名称'}
     */
-     static async saveGraphName(_paramObj: any) {
-         var url = '/diagram/update/name';
+    static async saveGraphName(_paramObj: any) {
+        var url = '/diagram/update/name';
         var resultObj = await this.sysGraphHttpUtilsInstance.postRequest(url, _paramObj);
         return resultObj;
     }