Browse Source

Merge branch 'master' into dev_duxiangyu

duxiangyu 3 years ago
parent
commit
12fe072b18

+ 13 - 2
src/components/systemGraph/addGraph.vue

@@ -65,6 +65,7 @@ import { mapState } from "vuex";
 import { sysGraphController } from "@/controller/systemGraph/sysGraphController";
 import { logicConfig } from "@/logicConfig";
 import { Message } from "element-ui";
+import packageConfig from "../../../package.json";
 
 export default {
   props: ["isVisible"],
@@ -165,10 +166,20 @@ export default {
         var createResult = await sysGraphController.createSysGraph(_paramObj);
         switch (createResult.result) {
           case logicConfig.resultObj.failure:
-            Message.error("新增失败,原因:" + createResult.reason);
+            Message.error("操作失败,原因:" + createResult.reason);
             break;
           case logicConfig.resultObj.success:
-            this.$emit("created", createResult.data);
+            // this.$emit("created", createResult.data);
+            let dataObj = createResult.data;
+            sysGraphController.openGraphPage(
+              1,
+              dataObj.id,
+              this.selProject.groupCode,
+              this.selProject.id,
+              this.selProject.name,
+              packageConfig.name,
+              false
+            );
             break;
         }
       } catch (error) {

+ 127 - 33
src/components/systemGraph/edit.vue

@@ -22,19 +22,31 @@
           >
         </div>
         <div class="operBtnDiv" v-if="operState === 1">
-          <span>保存图纸</span>
+          <span @click="saveGraph">保存图纸</span>
           <span @click="cancelClick">放弃编辑</span>
         </div>
         <span class="delBtn" @click="delGraph">删除图纸</span>
       </div>
       <div class="secondOperDivContainer">
         <img
+          @click="toggleLeft"
           class="imgBar"
           src="../../assets/images/systemGraph/barController.svg"
         />
-        <span class="el-icon-caret-bottom sanjiaoBar"></span>
+        <span
+          class="sanjiaoBar"
+          :class="{
+            'el-icon-caret-bottom': isVisibleLeft,
+            'el-icon-caret-top': !isVisibleLeft,
+          }"
+          @click="toggleLeft"
+        ></span>
         <hr class="splitLine" />
-        <el-select v-model="selectScale" value-key="value">
+        <el-select
+          v-model="selectScale"
+          value-key="value"
+          @change="selScaleChange"
+        >
           <el-option
             v-for="item in scaleArr"
             :key="item.value"
@@ -43,9 +55,9 @@
           >
           </el-option>
         </el-select>
-        <span class="el-icon-zoom-in zoomin"></span>
-        <span class="el-icon-zoom-out zoomout"></span>
-        <hr class="splitLine" v-if="operState == 1" />
+        <span class="el-icon-zoom-in zoomin" @click="scaleZoomin"></span>
+        <span class="el-icon-zoom-out zoomout" @click="scaleZoomout"></span>
+        <!-- <hr class="splitLine" v-if="operState == 1" />
         <img
           v-if="operState == 1"
           class="imgLeftTop"
@@ -61,53 +73,61 @@
           v-if="operState == 1"
           class="imgLeftTop"
           src="../../assets/images/systemGraph/text.svg"
-        />
+        /> -->
         <span class="resetBtn" v-if="operState == 1">重置为自动出图样式</span>
       </div>
     </div>
     <div class="secondRow">
-      <div class="graphInfoContainer" v-if="operState === 0 || operState === 1">
+      <div
+        class="graphInfoContainer"
+        v-if="(operState === 0 || operState === 1) && isVisibleLeft"
+      >
         <div class="graphInfoFirst">
           <span class="graphInfoName">系统图名称</span>
-          <span class="graphInfoFirstEdit" @click="intoEditState">编辑</span>
+          <span
+            class="graphInfoFirstEdit"
+            @click="intoEditState"
+            v-if="operState === 0"
+            >编辑</span
+          >
         </div>
         <div class="graphInfoContent">
-          <span>高压系统1#系统图</span>
+          <span v-text="graphInfo.name">高压系统1#系统图</span>
         </div>
 
         <div class="graphInfoName">
           <span>系统图类型</span>
         </div>
         <div class="graphInfoContent">
-          <span>高压配电</span>
+          <span v-text="graphInfo.graphTypeName">高压配电</span>
         </div>
 
         <div class="graphInfoName">
           <span>系统实例</span>
         </div>
         <div class="graphInfoContent">
-          <span>实例1</span>
+          <span v-text="graphInfo.systemInstanceName">实例1</span>
         </div>
 
         <div class="graphInfoName">
           <span>系统图模版</span>
         </div>
         <div class="graphInfoContent">
-          <span>模版1</span>
+          <span v-text="graphInfo.templateName">模版1</span>
         </div>
 
         <div class="graphInfoName">
           <span>所属项目</span>
         </div>
         <div class="graphInfoContent">
-          <span>银泰中心</span>
+          <span v-text="project.name">银泰中心</span>
         </div>
 
         <div class="graphInfoName">
           <span>当前状态</span>
         </div>
         <div class="graphInfoContent">
-          <span>草稿</span>
+          <span v-text="graphInfo.stateName">草稿</span>
         </div>
       </div>
       <div class="graphRegion">
@@ -254,11 +274,7 @@
       </div>
     </div>
 
-    <addGraph
-      :isVisible="operState == 2"
-      @created="createSuccessed"
-      v-if="operState == 2"
-    ></addGraph>
+    <addGraph :isVisible="operState == 2" v-if="operState == 2"></addGraph>
   </div>
 </template>
 <script>
@@ -304,6 +320,8 @@ export default {
       operState: -1,
       //系统图ID
       diagramId: "",
+      //项目信息
+      project: {},
       /**
        * 选择的系统图上的区域的类型
        * -1 什么也没选; 1 设备;    2 线;   3 文字
@@ -362,6 +380,8 @@ export default {
       fontColor: "#eb5757",
       //背景颜色
       backColor: "#ffffff",
+      //系统图原始数据
+      graphOriginInfo: {},
       //系统图数据
       graphInfo: {},
       /**
@@ -391,6 +411,8 @@ export default {
           }
        */
       selEquip: {},
+      //是否展示左侧系统图基础信息
+      isVisibleLeft: true,
     };
   },
   computed: {},
@@ -402,6 +424,7 @@ export default {
     createSuccessed: function (graphInfo) {
       //进入编辑状态
       this.operState = 1;
+      this.graphOriginInfo = JSON.parse(JSON.stringify(graphInfo));
       this.graphInfo = graphInfo;
       this.$refs.graphc.drawEntry(graphInfo);
     },
@@ -418,12 +441,17 @@ export default {
     //根据系统图ID获取系统图数据
     getDiagramById: async function () {
       this.fullscreenLoading = true;
-      var resultObj = await sysGraphController.getDiagramById(this.diagramId);
+      var resultObj = await sysGraphController.getDiagramById(
+        this.diagramId,
+        this.project.groupCode,
+        this.project.id
+      );
       if (resultObj.result != logicConfig.resultObj.success) {
         this.fullscreenLoading = false;
         Message.error(resultObj.reason);
         return;
       }
+      this.graphOriginInfo = JSON.parse(JSON.stringify(resultObj.data));
       this.graphInfo = resultObj.data;
       this.fullscreenLoading = false;
     },
@@ -445,9 +473,28 @@ export default {
       });
     },
     /**
+     * 保存图纸按钮事件
+     */
+    saveGraph: async function () {
+      this.fullscreenLoading = true;
+      var saveResultObj = await sysGraphController.saveSysGraph(this.graphInfo);
+      this.fullscreenLoading = false;
+      switch (saveResultObj.result) {
+        case logicConfig.resultObj.failure:
+          Message.error("保存失败:" + (saveResultObj.reason || ""));
+          return;
+        case logicConfig.resultObj.success:
+          Message.success("保存成功");
+          this.graphOriginInfo = JSON.parse(JSON.stringify(this.graphInfo));
+          break;
+      }
+    },
+    /**
      * 放弃编辑按钮事件
      */
     cancelClick: function () {
+      this.graphInfo = JSON.parse(JSON.stringify(this.graphOriginInfo));
+      this.$refs.graphc.drawEntry(this.graphInfo);
       this.operState = 0;
     },
     //上架系统图
@@ -457,6 +504,7 @@ export default {
       this.fullscreenLoading = false;
       switch (resultObj.result) {
         case logicConfig.resultObj.success:
+          this.graphOriginInfo.extraProps.state = graphStateEnum.Publish;
           this.graphInfo.extraProps.state = graphStateEnum.Publish;
           return Message.success("上架成功");
         case logicConfig.resultObj.failure:
@@ -470,6 +518,7 @@ export default {
       this.fullscreenLoading = false;
       switch (resultObj.result) {
         case logicConfig.resultObj.success:
+          this.graphOriginInfo.extraProps.state = graphStateEnum.Draft;
           this.graphInfo.extraProps.state = graphStateEnum.Draft;
           return Message.success("下架成功");
         case logicConfig.resultObj.failure:
@@ -477,18 +526,58 @@ export default {
       }
     },
     //删除系统图
-    delGraph: async function () {
-      this.fullscreenLoading = true;
-      var resultObj = await sysGraphController.delSysGraph(this.diagramId);
-      this.fullscreenLoading = false;
-      switch (resultObj.result) {
-        case logicConfig.resultObj.success:
-          return Message.success("删除图纸成功");
-        case logicConfig.resultObj.failure:
-          return Message.success(
-            "删除图纸失败,原因:" + (resultObj.reason || "")
-          );
-      }
+    delGraph: function () {
+      this.$confirm("图纸删除后将不可进行查看和编辑, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(async () => {
+          this.fullscreenLoading = true;
+          var resultObj = await sysGraphController.delSysGraph(this.diagramId);
+          this.fullscreenLoading = false;
+          switch (resultObj.result) {
+            case logicConfig.resultObj.success:
+              this.$confirm("删除成功,页面将关闭", "提示", {
+                confirmButtonText: "确定",
+                type: "success",
+                showCancelButton: false,
+                closeOnClickModal: false,
+                showClose: false,
+                closeOnPressEscape: false,
+              }).then(async () => {
+                window.close();
+              });
+              return;
+            case logicConfig.resultObj.failure:
+              return Message.success(
+                "删除图纸失败,原因:" + (resultObj.reason || "")
+              );
+          }
+        })
+        .catch(() => {});
+    },
+    //左侧系统图基础信息面板打开或隐藏
+    toggleLeft: function () {
+      var _this = this;
+      this.isVisibleLeft = !this.isVisibleLeft;
+      Vue.nextTick(function () {
+        _this.$refs.graphc.resetDraw();
+      });
+    },
+    //缩放比例选择事件
+    selScaleChange: function () {
+      this.$refs.graphc.graphScale(this.selectScale.value / 100);
+    },
+    //比例放大按钮点击事件
+    scaleZoomin: function () {
+      var newScale = this.$refs.graphc.graphScaleCompute(0.25);
+      this.$refs.graphc.graphScale(newScale);
+    },
+    //比例缩小按钮点击事件
+    scaleZoomout: function () {
+      var newScale = this.$refs.graphc.graphScaleCompute(-0.25);
+      this.$refs.graphc.graphScale(newScale);
     },
   },
   created() {
@@ -497,6 +586,11 @@ export default {
       : parseInt(this.$route.query.ost);
     this.diagramId = !this.$route.query.did ? -1 : this.$route.query.did;
     this.selectScale = this.scaleArr[3];
+    this.project = {
+      id: this.$route.query.pri,
+      groupCode: this.$route.query.gc,
+      name: this.$route.query.prn,
+    };
   },
   mounted() {
     var _this = this;

+ 24 - 0
src/components/systemGraph/graph.vue

@@ -405,6 +405,30 @@ export default {
       })[0];
       this.$emit("click", dataObj, type);
     },
+    //图形缩放比例递进计算
+    graphScaleCompute: function (deepVal) {
+      return this.canvasProObj.pixiScale + deepVal;
+    },
+    //图形缩放
+    graphScale: function (newScale) {
+      newScale = Math.min(5, newScale);
+      newScale = Math.max(0.25, newScale);
+      //设置X、Y轴的缩放系数
+      this.pixiApp.stage.scale.x = newScale;
+      this.pixiApp.stage.scale.y = newScale;
+
+      //保存缩放系数
+      this.canvasProObj.pixiScale = newScale;
+      //重新计算原点
+      this.canvasProObj.positionPxX =
+        (1 - newScale) * this.canvasProObj.centerPointerPx.x;
+      this.canvasProObj.positionPxY =
+        (1 - newScale) * this.canvasProObj.centerPointerPx.y;
+      this.pixiApp.stage.position.set(
+        this.canvasProObj.positionPxX,
+        this.canvasProObj.positionPxY
+      );
+    },
   },
   created() {},
 

+ 9 - 8
src/components/systemGraph/index.vue

@@ -63,6 +63,7 @@ import { mapState } from "vuex";
 import { logicConfig } from "@/logicConfig";
 import packageConfig from "../../../package.json";
 import { sysGraphController } from "@/controller/systemGraph/sysGraphController";
+import { TextureLoader } from "@pixi/loaders";
 
 export default {
   props: [],
@@ -149,14 +150,14 @@ export default {
     },
     //打开系统图新增、预览、编辑页面
     openGraphPage: function () {
-      window.open(
-        "/" +
-          packageConfig.name +
-          logicConfig.routerNameConfig.systemGraphEditName +
-          "?ost=" +
-          this.state +
-          "&did=" +
-          (this.selDiagram.id || "")
+      sysGraphController.openGraphPage(
+        this.state,
+        this.selDiagram.id,
+        this.selectProject.groupCode,
+        this.selectProject.id,
+        this.selectProject.name,
+        packageConfig.name,
+        true
       );
     },
   },

+ 155 - 42
src/controller/systemGraph/sysGraphController.ts

@@ -1,10 +1,23 @@
 import { graphStateEnum } from "./graphStateEnum";
 import { sysGraphHttpUtils } from "@/utils/http/sysGraphHttpUtils";
 import { logicConfig } from "@/logicConfig";
-import moment, { Moment } from 'moment';
+import moment from 'moment';
 
 export class sysGraphController {
     private static sysGraphHttpUtilsInstance = new sysGraphHttpUtils();
+    //key为系统类型编码,值为 系统图类型 > 模板数据 的二级结构数组
+    private static _tempTemplateObj = {};
+    //三级数组 专业>系统类型>系统实例
+    private static zhuanyeArr = [];
+
+
+    //根据状态编码转状态名称
+    static getStateNameByCode(stateCode: string) {
+        return stateCode == graphStateEnum.Draft ? '草稿' :
+            stateCode == graphStateEnum.Publish ? '上架' :
+                stateCode == graphStateEnum.Recyle ? '回收站' : '';
+    }
+
     /**
      * 查询系统图列表
      * @param grpphName 系统图名称
@@ -14,32 +27,31 @@ export class sysGraphController {
         var resultObj = await this.sysGraphHttpUtilsInstance.postRequest('/diagram/getDiagrams', { name: grpphName });
         if (resultObj.result != logicConfig.resultObj.success)
             console.error(resultObj.reason);
+
+        //key为系统类型编码,值为系统类型数据
+        var _tempSystemTypeObj = {};
         var newDataArr = [];
-        var dataArr = resultObj.data || [];
-        console.log(JSON.parse(JSON.stringify(dataArr)));
+        var dataArr = (resultObj.data || []).filter(_c => {
+            return (_c.extraProps || {}).state != graphStateEnum.Recyle;
+        });
         dataArr.sort(function (a, b) {
             return b.createTime - a.createTime;
         });
 
 
         //取得专业>系统类型>系统实例  以和系统图列表中的系统类型编码 对应以获取系统类型名称
-        var url2 = '/diagram/major/system/instance';
-        var zhuanyeObj = await this.sysGraphHttpUtilsInstance.postRequest(url2, {});
-        var zhuanyeArr = zhuanyeObj.data || [];
+        if (this.zhuanyeArr.length == 0) {
+            var url2 = '/diagram/major/system/instance';
+            var zhuanyeObj = await this.sysGraphHttpUtilsInstance.postRequest(url2, {});
+            this.zhuanyeArr = zhuanyeObj.data || [];
+        }
 
 
-        //key为系统类型编码,值为系统类型数据
-        var _tempSystemTypeObj = {};
-        //key为系统类型编码,值为 系统图类型 > 模板数据 的二级结构数组
-        var _tempTemplateObj = {};
-
         for (let i = 0; i < dataArr.length; i++) {
             let _c = dataArr[i];
             let extraProps = _c.extraProps;
             //图状态(Draft: 未发布, WaitCheck: 待审核, Checked: 审核完成, Recyle: 回收站, Publish: 发布)
-            let stateName = extraProps.state == graphStateEnum.Draft ? '草稿' :
-                extraProps.state == graphStateEnum.Publish ? '上架' :
-                    extraProps.state == graphStateEnum.Recyle ? '下架' : '';
+            let stateName = this.getStateNameByCode(extraProps.state);
 
             //获取系统类型名称
             let systemTypeName = (_tempSystemTypeObj[_c.system] || {}).aliasName;
@@ -49,8 +61,8 @@ export class sysGraphController {
             }
 
             //获取模版名称
-            let _templateObj = await getTemplateBySysTypeCode(_c.system, _c.templateId);
-            let templateName = (_templateObj || {}).name || '';
+            let _templateObj = await this.getTemplateGraphTypeBySysTypeCode(_c.system, _c.templateId);
+            let templateName = ((_templateObj || {}).template || {}).name || '';
 
             //格式化日期时间
             let momentInstance = moment(_c.createTime);
@@ -73,9 +85,9 @@ export class sysGraphController {
 
 
         function getSystemTypeByCode(systemTypeCode: string) {
-            for (let i = 0; i < zhuanyeArr.length; i++) {
+            for (let i = 0; i < sysGraphController.zhuanyeArr.length; i++) {
                 //专业
-                let zhuanye = zhuanyeArr[i];
+                let zhuanye = sysGraphController.zhuanyeArr[i];
                 //系统类型数组
                 let systemTypeArr = zhuanye.children || [];
                 let isFind = false;
@@ -92,34 +104,44 @@ export class sysGraphController {
                     break;
             }
         };
+    }
 
-        async function getTemplateBySysTypeCode(sysTypeCode: string, templateId: string) {
-            var dataArr = _tempTemplateObj[sysTypeCode];
+    /**
+     * 根据系统类型查询系统图模板和系统图类型,数据结构:系统图类型 ->  系统图模版
+     * @param sysTypeCode 系统类型编码
+     * @param templateId 模版ID
+     * @return {template:{id:'',name:''},graphType:{id:'',name:''}}
+     */
+    static async getTemplateGraphTypeBySysTypeCode(sysTypeCode: string, templateId: string) {
+        var dataArr = this._tempTemplateObj[sysTypeCode];
 
-            if (!dataArr) {
-                let url = '/diagram/systemType/template';
-                let resultObj = await sysGraphController.sysGraphHttpUtilsInstance.postRequest(url, { system: sysTypeCode });
-                dataArr = resultObj.data || [];
-            }
+        if (!dataArr) {
+            let url = '/diagram/systemType/template';
+            let resultObj = await sysGraphController.sysGraphHttpUtilsInstance.postRequest(url, { system: sysTypeCode });
+            dataArr = resultObj.data || [];
+        }
+        this._tempTemplateObj[sysTypeCode] = dataArr;
 
-            for (let i = 0; i < dataArr.length; i++) {
-                //_sysGraphType为系统图类型
-                let sysGraphType = dataArr[i];
-                //模板数组
-                let templateArr = sysGraphType.children || [];
-                let isFind = false;
-                for (let j = 0; j < templateArr.length; j++) {
-                    //模板
-                    let template = templateArr[j];
-                    if (template.id == templateId) {
-                        return template;
-                    }
+        for (let i = 0; i < dataArr.length; i++) {
+            //_sysGraphType为系统图类型
+            let sysGraphType = dataArr[i];
+            //模板数组
+            let templateArr = sysGraphType.children || [];
+            for (let j = 0; j < templateArr.length; j++) {
+                //模板
+                let template = templateArr[j];
+                if (template.id == templateId) {
+                    return {
+                        template: { id: template.id, name: template.name },
+                        graphType: { id: sysGraphType.id, name: sysGraphType.name }
+                    };
                 }
             }
-            return null;
         }
+        return null;
     }
 
+
     /**
      * 根据项目查询该项目下的专业>系统类型>系统实例
      * @param projectId 项目ID
@@ -131,6 +153,7 @@ export class sysGraphController {
         if (resultObj.result != logicConfig.resultObj.success)
             console.error(resultObj.reason);
         var dataArr = resultObj.data || [];
+        this.zhuanyeArr = dataArr;
         var newDataArr = [];
 
         dataArr.forEach(_c => {
@@ -189,7 +212,7 @@ export class sysGraphController {
         var url = '/diagram/newDiagram';
         var resultObj = await this.sysGraphHttpUtilsInstance.postRequest(url, _paramObj);
         if (resultObj.result != logicConfig.resultObj.success) {
-            console.error(resultObj.reason);
+            resultObj.reason = '新建系统图失败:' + resultObj.reason;
             return resultObj;
         }
 
@@ -201,17 +224,36 @@ export class sysGraphController {
         var loadDataUrl = '/diagram/loadData';
         var loadResultObj = await this.sysGraphHttpUtilsInstance.postRequest(loadDataUrl, { id: dataObj.id });
         if (loadResultObj.result != logicConfig.resultObj.success) {
-            return { result: logicConfig.resultObj.failure, reason: '加载模板数据失败,原因:' + loadResultObj.reason };
+            loadResultObj.reason = '加载模板数据失败:' + loadResultObj.reason;
+            return loadResultObj;
+        }
+
+        //加载数据成功后保存数据
+        var saveResultObj = await this.saveSysGraph(loadResultObj.data);
+        if (saveResultObj.result != logicConfig.resultObj.success) {
+            saveResultObj.reason = '保存系统图数据失败:' + saveResultObj.reason;
+            return saveResultObj;
         }
-        console.log(JSON.stringify(loadResultObj.data));
+
+        //因为保存数据成功返回的data里的数据不全,所以返回加载数据成功后的数据给页面
         return loadResultObj;
     }
 
     /**
+     * 保存系统图数据
+     * @param _paramObj 参见后台loadData接口的返回
+     */
+    static async saveSysGraph(_paramObj: any) {
+        var saveUrl = '/diagram/newDiagram';
+        var saveResultObj = await this.sysGraphHttpUtilsInstance.postRequest(saveUrl, _paramObj);
+        return saveResultObj;
+    }
+
+    /**
      * 根据系统图ID查询系统图信息
      * @param id 系统图ID
      */
-    static async getDiagramById(id: string) {
+    static async getDiagramById(id: string, groupCode: string, projectId: string) {
         var url = '/diagram/getDiagram?diagramId=' + id;
         var resultObj = await this.sysGraphHttpUtilsInstance.getRequest(url, {});
         if (resultObj.result != logicConfig.resultObj.success) {
@@ -223,8 +265,55 @@ export class sysGraphController {
         if (!dataObj.id)
             return { result: logicConfig.resultObj.failure, reason: '缺少系统图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);
+        console.log(_systemInstance);
+        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);
+
 
         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;
+            }
+        };
+
         return {
             result: 'success',
             data: {
@@ -10380,4 +10469,28 @@ export class sysGraphController {
         return resultObj;
     }
 
+    /**
+     * 打开系统图新增、预览、编辑页面
+     * @param state 打开新页面时的状态,0 预览; 1 编辑;  2 新建
+     * @param diagramId 系统图ID
+     * @param groupCode 集团编码
+     * @param projectId 项目ID
+     * @param projectName 项目名称
+     * @param baseUrl 根路径
+     * @param isOpenTarget 是否打开新页面
+     */
+    static openGraphPage(state: number, diagramId: string, groupCode: string, projectId: string, projectName: string, baseUrl: string, isOpenTarget: boolean) {
+        var url = "/" +
+            baseUrl +
+            logicConfig.routerNameConfig.systemGraphEditName +
+            "?ost=" +
+            state +
+            "&did=" +
+            (diagramId || "") +
+            '&gc=' + (groupCode || '') +
+            '&pri=' + (projectId || '') +
+            '&prn=' + encodeURIComponent(projectName || '');
+        isOpenTarget === true ? window.open(url) : window.location.href = url;
+    }
+
 }