修改

jinlin

2024-03-07 6aa5b0b5b6961cf556a5ec5cc4e541adb118488c

 web/src/views/modules/taskReliability/RBD-edit-img.vue

@@ -1,22 +1,30 @@
<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>
              <el-button type="primary" @click="saveDiagram()">保存</el-button>
              <!--            <zt-button type="primary" v-show="pageCode === 'wlt_sp' && flowInfo.myStatus ===1"  @click="reject()">驳回</zt-button>-->
              <el-button v-show="pageCode === 'wlt_pz' && flowInfo.myStatus ===1" type="warning" @click="finish">完成
              </el-button>
              模型ID
            </el-form-item>
            <el-form-item>
              <el-input placeholder="搜索模型ID" v-model="dataForm.modelId" clearable class="input-with-select">
                <el-button slot="append" icon="el-icon-search" @click="search()"></el-button>
              </el-input>
            </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;"
@@ -112,13 +120,14 @@
        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:30,imgHeight:30,imgId:'3',data:{}},
          // {imgPath:'parallelLeft',imgName:'parallelLeft',nodeType:'parallelLeft',imgWidth:60,imgHeight:60,imgId:'3',data:{}},
          {imgPath:'parallelRight',imgName:'parallelRight',nodeType:'parallelRight',imgWidth:60,imgHeight:60,imgId:'4',data:{}},
          {imgPath:'switchRight',imgName:'switchRight',nodeType:'switchRight',imgWidth:60,imgHeight:60,imgId:'5',data:{}},
          {imgPath:'voteRight',imgName:'voteRight',nodeType:'voteRight',imgWidth:60,imgHeight:60,imgId:'6',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:'aaa'}},
          {imgPath:'logo',imgName:'logo',nodeType:'node',statusImg:'',imgWidth:60,imgHeight:60,imgId:'100',data:{dataId:'123456',nodeTypeExt:''}},
        ],
        nodeType:'',
        first: true,
@@ -136,7 +145,7 @@
          content: null,
          publishContent: null,
          hasPublish: 0,
          modelId: 1,
          modelId: '1',
        },
        flowInfo: {
          bizId: '',
@@ -172,6 +181,8 @@
        id: '',
        graph: null,
        globalGridAttr: {
          statusImg:'',
          nodeTypeExt:'',
          type: 'mesh',
          size: 10,
          color: '#e5e5e5',
@@ -389,11 +400,22 @@
        // this.diagramIdChange(this.diagramId)
        this.getDiagram()
      },*/
      async clearDiagram() {
        this.dataForm.id = null
        // this.graph.fromJSON(this.emptyJson)
        this.graph.fromJSON('')
        this.graph.centerContent()
        this.graph.zoomToFit()
        // this.graph.freeze()
      },
      async getDiagram() {
        let params = {}
        let params = {
          modelId : this.dataForm.modelId
        }
          let res = await this.$http.get(`/taskReliability/ModelLine/getDiagram`, {params: params})
          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)
            // console.log(this.dataForm.content,'this.Diagram content')
            console.log(this.diagramJson, 'this.Diagram json')
@@ -401,11 +423,7 @@
            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()
          }

      },
@@ -874,7 +892,8 @@
              data: {
                dataId: item.data.dataId,
                nodeType: item.nodeType,
                nodeTypeExt: item.data.nodeTypeExt
                nodeTypeExt: item.data.nodeTypeExt,
                statusImg:item.statusImg
              },
              attrs: {
                text:{
@@ -890,13 +909,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()
@@ -992,8 +1031,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)
        })
@@ -1157,6 +1198,9 @@
      //   }
      //   return this.curCel;
      // },
      async search() {
        await this.getDiagram();
      },
      async saveDiagram() {
        console.log(JSON.stringify(this.graph.toJSON()), 'graph.toJSON()')
        this.dataForm.content = JSON.stringify(this.graph.toJSON())
@@ -1169,6 +1213,18 @@
          }
        })
      },
      async analyzeDiagram() {
        console.log(JSON.stringify(this.graph.toJSON()), 'graph.toJSON()')
        this.dataForm.content = JSON.stringify(this.graph.toJSON())
        console.log(this.dataForm, 'dataFrom')
        await this.$http['post'](`/taskReliability/ModelLine/analyze`, this.dataForm).then(async res => {
          if (res.msg === 'success') {
            this.$alert('解析成功', '提示', {
              confirmButtonText: '确定'
            })
          }
        })
      },
      // AlignmentsChanges(val){
      //   console.log(val,'align.value')
      //     if(val ==='选项1'){