From abbf0b4821869a608e152f5909b73daa22026a8c Mon Sep 17 00:00:00 2001
From: jinlin <jinlin>
Date: 星期一, 11 三月 2024 10:59:55 +0800
Subject: [PATCH] 修改

---
 web/src/views/modules/taskReliability/RBD-edit-img.vue |  197 +++++++++++++++++-------------------------------
 1 files changed, 71 insertions(+), 126 deletions(-)

diff --git a/web/src/views/modules/taskReliability/RBD-edit-img.vue b/web/src/views/modules/taskReliability/RBD-edit-img.vue
index df2d1ef..dcc05dc 100644
--- a/web/src/views/modules/taskReliability/RBD-edit-img.vue
+++ b/web/src/views/modules/taskReliability/RBD-edit-img.vue
@@ -1,25 +1,24 @@
 <template>
   <div>
     <el-row :gutter="[8,8]">
-      <el-col :span="5">
+      <el-col :span="4">
         <div :style="'height:' +left_p+'px'">
           <div class="fa-card-a" style="height: 100%">
             <div id="stencilImg"></div>
           </div>
         </div>
       </el-col>
-      <el-col :span="19">
+      <el-col :span="20">
         <div class="fa-card-a">
           <el-form :inline="true">
             <el-form-item>
-              modelId
-              <el-input placeholder="鎼滅储鏂藉伐鍐呭" v-model="dataForm.modelId" clearable class="input-with-select">
-                <el-button slot="append" icon="el-icon-search" @click="search()"></el-button>
-              </el-input>
-
-              <el-button type="primary" @click="saveDiagram()">淇濆瓨</el-button>
-              <el-button type="primary" @click="analyzeDiagram()">瑙f瀽</el-button>
+              妯″瀷鍚嶇О锛歿{modelName}}
             </el-form-item>
+              <el-form-item>
+                  <el-button type="primary" @click="saveDiagram()">鏆傚瓨</el-button>
+                  <el-button type="primary" @click="analyzeDiagram()">淇濆瓨</el-button>
+                <el-button type="primary" @click="clearDiagram()">娓呯┖鍥惧舰</el-button>
+              </el-form-item>
             <el-form-item>
                 <el-tooltip class="item" effect="dark" content="宸﹀榻�" placement="left">
                   <el-button class="" style="margin-left: 0;padding: 2px;border: 1px solid #5F95FF;"
@@ -111,17 +110,21 @@
     },
     data() {
       return {
+        modelId: '',
+        modelName: '',
+        modelType:'',
         timer: null,
         imgsList:[
           {imgPath:'start',imgName:'start',nodeType:'start',imgWidth:60,imgHeight:60,imgId:'1',data:{}},
           {imgPath:'end',imgName:'end',nodeType:'end',imgWidth:60,imgHeight:60,imgId:'2',data:{}},
+          {imgPath:'connect',imgName:'connect',nodeType:'connect',imgWidth:20,imgHeight:20,imgId:'3',data:{}},
           // {imgPath:'parallelLeft',imgName:'parallelLeft',nodeType:'parallelLeft',imgWidth:60,imgHeight:60,imgId:'3',data:{}},
-          {imgPath:'parallelRight',imgName:'parallel',nodeType:'parallel',imgWidth:60,imgHeight:60,imgId:'4',data:{}},
+          // {imgPath:'parallelRight',imgName:'parallel',nodeType:'parallel',imgWidth:60,imgHeight:60,imgId:'4',data:{}},
           {imgPath:'switchRight',imgName:'switch',nodeType:'switch',imgWidth:60,imgHeight:60,imgId:'5',data:{}},
           {imgPath:'voteRight',imgName:'vote',nodeType:'vote',imgWidth:60,imgHeight:60,imgId:'6',data:{}},
         ],
         imgsList2:[
-          {imgPath:'logo',imgName:'logo',nodeType:'node',imgWidth:60,imgHeight:60,imgId:'100',data:{dataId:'123456',nodeTypeExt:''}},
+          {imgPath:'logo',imgName:'logo',nodeType:'node',statusImg:'',imgWidth:60,imgHeight:60,imgId:'100',data:{dataId:'123456',nodeTypeExt:''}},
         ],
         nodeType:'',
         first: true,
@@ -134,20 +137,9 @@
         diagramIdDisabled: false,
         dataForm: {
           id: null,
-          projectId: null,
-          diagramId: null,
           content: null,
           publishContent: null,
           hasPublish: 0,
-          modelId: '1',
-        },
-        flowInfo: {
-          bizId: '',
-          bizGroupId: '',
-          flowCode: '',
-          flowStepMark: '',
-          status: 0,
-          myStatus: 0
         },
         // emptyJson: {
         //   // 鑺傜偣
@@ -175,6 +167,8 @@
         id: '',
         graph: null,
         globalGridAttr: {
+          statusImg:'',
+          nodeTypeExt:'',
           type: 'mesh',
           size: 10,
           color: '#e5e5e5',
@@ -298,103 +292,22 @@
         //this.diagramId = this.$route.params.diagramId
         console.log(this.$route.params.projectId, 'this.$route.params.projectId')
         console.log(this.$route.params.diagramId, 'this.$route.params.diagramId')
-        this.projectChange2(this.$route.params.diagramId)
       }
     },
     mounted() {
-      this.getProject()
-      this.init()
+      this.initDigram()
       this.type = 'grid'
     },
     methods: {
-      async finish() {
-        if (await this.$tip.confirm('纭畾瑕佽繘琛屾彁浜ゆ搷绾靛悧?')) {
-          let submitForm = {
-            params: {
-              wfIdCode: 'wltFlow',
-              bizId: this.dataForm.projectId,
-              stepIdMark: this.pageCode
-            }
-          }
-          let res = await this.$http.get('/wf/approvePass', submitForm)
-          if (res.success) {
-            await this.$alert('鎻愪氦鎴愬姛', '鍙嬫儏鎻愮ず')
-            removeCurrentTabHandle(this)
-            this.$EventBus.$emit('taskRefeshEvent', '缃戠粶鍥�')
-          }
-        }
+      init(row){
+        this.modelName = row.modelName
+        let modelId = row.id
+        this.dataForm.id = modelId
+        this.getDiagram(modelId)
       },
-      async getProject() {
-        //let res = await this.$http.get(`/maintain/projectNetworkDiagram/getProjectList`)
-        let res = await this.$http.get(`/homeFunction/projectSelect`)
-
-        this.projectList = res.data
-        if (this.$store.state.user.isAdmin || this.$store.state.user.isAssistant) {
-          this.projectList.push({id: '10000', name: '鏍峰紡妯℃澘'})
-        }
-        if (this.$route.params.projectId) {
-          this.projectId = this.$route.params.projectId
-          this.diagramId = this.$route.params.diagramId
-        } else {
-          if (this.projectList.length > 0) {
-            this.projectId = this.projectList[0].id
-            this.diagramId = this.projectId
-            console.log(this.diagramId, '123456789')
-          }
-        }
-        await this.projectChange2(this.diagramId)
-      },
-
-     /* projectChange() {
-        // alert(555)
-        this.projectChange2(this.projectId)
-      },
-
-      async projectChange2(diagramId) {
-        // alert(1)
+      async getDiagram(modelId) {
         let params = {
-          wfIdCodes: 'wltFlow',
-          bizId: this.projectId,
-          stepIdMark: 'wlt_pz'
-        }
-        this.$http.get(`/wf/getFlowStepStatus`, {params: params}).then(res => {
-          console.log(res, 'getFlowStepStatus res')
-          if (res.data) {
-            this.flowInfo = res.data
-          }
-        })
-
-        this.diagramName = ''
-        this.dataForm.projectId = this.projectId
-        this.dataForm.diagramId = diagramId
-        this.diagramId = diagramId
-        if (!this.$store.state.user.isZcRole && !this.$store.state.user.isAdmin) {
-          this.diagramIdDisabled = true
-          console.log(this.$store.state.user.deptId, 'this.$store.state.user.deptId')
-          this.diagramId = this.$store.state.user.deptId
-          this.dataForm.diagramId = this.diagramId
-        } else {
-          this.diagramIdDisabled = false
-        }
-        //this.getDiagramIdList(this.projectId)
-        let res = await this.$http.get(`/maintain/projectNetworkDiagram/getDiagramCjList?projectId=${this.projectId}`)
-        this.diagramList = res.data
-        console.log(this.diagramList, 'this.diagramId asdfgh')
-        if (this.diagramList.length > 0) {
-          this.diagramId = this.diagramList[0].diagramId
-          console.log(this.dataForm.diagramId, 'this.dataForm.diagramId.........................')
-        }
-        await this.getDiagram()
-      },*/
-
-/*      diagramIdChanges() {
-        this.dataForm.diagramId = this.diagramId
-        // this.diagramIdChange(this.diagramId)
-        this.getDiagram()
-      },*/
-      async getDiagram() {
-        let params = {
-          modelId : this.dataForm.modelId
+          modelId : modelId
         }
           let res = await this.$http.get(`/taskReliability/ModelLine/getDiagram`, {params: params})
           if (res.data !== null && res.data.content != null) {
@@ -407,23 +320,25 @@
             this.graph.centerContent()
             this.graph.zoomToFit()
           } else {
-            this.dataForm.id = null
-            // this.graph.fromJSON(this.emptyJson)
-            this.graph.centerContent()
-            this.graph.zoomToFit()
-            // this.graph.freeze()
+            await this.clearDiagram()
           }
-
       },
-      init() {
+      async clearDiagram() {
+        this.dataForm.id = null
+        // this.graph.fromJSON(this.emptyJson)
+        this.graph.fromJSON('')
+        this.graph.centerContent()
+        this.graph.zoomToFit()
+        // this.graph.freeze()
+      },
+      initDigram() {
         this.timer = setHartBeat(10, 240);
-
         console.log(document.documentElement.clientWidth, 'document.documentElement.clientWidth')
         console.log(document.documentElement.clientHeight, 'document.documentElement.clientHeight')
         this.graph = new Graph({
           container: document.getElementById('containerImg'),
           width: document.documentElement.clientWidth,
-          height: document.documentElement.clientHeight - 100,
+          height: document.documentElement.clientHeight - 200,
           // async: true,
           grid: {
             visible: true,
@@ -445,7 +360,14 @@
             pageVisible: true,
             pageBreak: true,
             pannable: true,
+            minVisibleWidth:200,
+            minVisibleHeight:200,
+            modifiers: 'shift',
           },
+          // panning: {
+          //   enabled: true,
+          //   modifiers: 'shift',
+          // },
           mousewheel: {
             enabled: true,
             zoomAtMousePosition: true,
@@ -526,7 +448,7 @@
             enabled: true,
             rubberband: true,
             rubberEdge: true,
-            showNodeSelectionBox: true,
+            // showNodeSelectionBox: true,
           },
           snapline: true,
           keyboard: true,
@@ -880,7 +802,8 @@
               data: {
                 dataId: item.data.dataId,
                 nodeType: item.nodeType,
-                nodeTypeExt: item.data.nodeTypeExt
+                nodeTypeExt: item.data.nodeTypeExt,
+                statusImg:item.statusImg
               },
               attrs: {
                 text:{
@@ -896,13 +819,33 @@
                   textVerticalAnchor: 'top',
                 },
               },
+              tools: [
+                {
+                  name: 'button',
+                  args: {
+                    markup: [
+                      {
+                        tagName: 'image',
+                        selector: 'icon',
+                        attrs: {
+                          // 'xlink:href': 'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*evDjT5vjkX0AAAAAAAAAAAAAARQnAQ',
+                          'xlink:href':item.statusImg,
+                          width: 30,
+                          height: 30,
+                          x: 0,
+                          y: 0
+                        }
+                      }
+                    ]
+                  }
+                }
+              ],
               ports: {...this.ports},
             }),
         )
-        // r1.push(r5,r6,r9)
-        console.log(imageNodes,'group1')
         stencil.load(imageNodes, 'group1')
         stencil.load(imageNodes2, 'group2')
+
 
         this.graph.bindKey(['meta+c', 'ctrl+c'], () => {
           const cells = this.graph.getSelectedCells()
@@ -998,8 +941,10 @@
           this.type = cell.isNode() ? 'node' : 'edge'
           this.shape = cell.shape
           this.id = cell.id
-          this.nodeType = cell.getData().nodeType
-          console.log(this.nodeType, 'this.nodeType')
+          if(this.type==='node'){
+            this.nodeType = cell.getData().nodeType
+            console.log(this.nodeType, 'this.nodeType')
+          }
           console.log(this.shape, 'this.shape')
           // this.nodeOpt(this.id, this.globalGridAttr)
         })

--
Gitblit v1.9.1