From c400e8082b202fbf20ea0e740a306aa3c62e8fb5 Mon Sep 17 00:00:00 2001
From: jinlin <jinlin>
Date: 星期二, 12 三月 2024 14:18:46 +0800
Subject: [PATCH] 修改

---
 web/src/views/modules/taskReliability/RBD-edit-img.vue |  217 +++++++++++++++++++++--------------------------------
 1 files changed, 87 insertions(+), 130 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..0665c19 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',,nodeTypeExt:'',productType:'',statusImg:'',imgWidth:60,imgHeight:60,imgId:'100',dataId:'123456'},
         ],
         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,106 +292,28 @@
         //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
+        this.dataForm.id = row.id
+        // this.productId = row.productId
+        // this.getProduct(row.productId)
+        this.initDigram(row.productId)
+        console.log(this.dataForm,'init(row){')
       },
-      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) {
+        console.log(res,'async getDiagram( res')
+        if (res.data !== null && res.data.content != null) {
             this.dataForm = res.data
             console.log(this.dataForm, 'this.dataForm in getDiagram')
             this.diagramJson = JSON.parse(this.dataForm.content)
@@ -407,23 +323,27 @@
             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() {
-        this.timer = setHartBeat(10, 240);
+      async clearDiagram() {
+        this.dataForm.id = null
+        // this.graph.fromJSON(this.emptyJson)
+        this.graph.fromJSON('')
+        this.graph.centerContent()
+        this.graph.zoomToFit()
+        // this.graph.freeze()
+      },
+      async initDigram(productId) {
 
+
+        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 +365,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 +453,7 @@
             enabled: true,
             rubberband: true,
             rubberEdge: true,
-            showNodeSelectionBox: true,
+            // showNodeSelectionBox: true,
           },
           snapline: true,
           keyboard: true,
@@ -869,18 +796,26 @@
               ports: {...this.ports},
             }),
         )
+        let params = {
+          productId : productId
+        }
+        let res = await this.$http.get(`/basicInfo/XhProductModel/getProduct`, {params: params})
+        this.imgsList2 = res.data
+        console.log(this.imgsList2 ,'getProduct(productId)234567890')
         const imageNodes2 = this.imgsList2.map((item) =>
             this.graph.createNode({
               shape: 'image',
-              imageUrl: require('/public/modelImg/'+item.imgPath+'.png'),
+              imageUrl: `${window.SITE_CONFIG['apiURL']}/sys/oss/content2?fileId=${item.imgPath}`,
               width:item.imgWidth,
               height:item.imgHeight,
               x:item.imgWidth,
               y:item.imgHeight,
               data: {
-                dataId: item.data.dataId,
+                dataId: item.dataId,
                 nodeType: item.nodeType,
-                nodeTypeExt: item.data.nodeTypeExt
+                nodeTypeExt: item.nodeTypeExt,
+                productType: item.productType,
+                statusImg:item.statusImg
               },
               attrs: {
                 text:{
@@ -896,13 +831,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 +953,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)
         })
@@ -1108,7 +1065,7 @@
           cell.removeTools()
         })
 
-        this.getDiagram()
+        await this.getDiagram(this.dataForm.id)
       },
       showPorts(ports, show) {
         for (let i = 0, len = ports.length; i < len; i = i + 1) {

--
Gitblit v1.9.1