修改

jinlin

2024-03-07 6aa5b0b5b6961cf556a5ec5cc4e541adb118488c

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

@@ -1,36 +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 prop="projectId" style="margin-left:10px;width: 180px;">
              <zt-select v-model="projectId" :datas="projectList" clearable placeholder="工程项目"
                         @change="projectChange"></zt-select>
            <el-form-item>
              模型ID
            </el-form-item>
            <el-form-item>
              <el-select v-model="diagramId" :disabled="diagramIdDisabled" placeholder="请选择"
                         @change="diagramIdChanges">
                <el-option v-for="item in diagramList"
                           :key="item.diagramId"
                           :label="item.diagramName"
                           :value="item.diagramId">
                </el-option>
              </el-select>
              <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>
              <!--            <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>
            </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;"
@@ -79,6 +73,7 @@
          </div>
          <config-node v-show="type === 'node'" :id="id" :diagramId="diagramId" :globalGridAttr="globalGridAttr"
                       :graph="graph"
                       :nodeType="nodeType"
                       :projectId="projectId"
                       :shape="shape"/>
          <config-edge v-show="type === 'edge'" :id="id" :globalGridAttr="globalGridAttr" :graph="graph"/>
@@ -125,14 +120,16 @@
        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:'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:'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:'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,
        shape: '',
        projectList: [],
@@ -148,7 +145,7 @@
          content: null,
          publishContent: null,
          hasPublish: 0,
          modelId: 1,
          modelId: '1',
        },
        flowInfo: {
          bizId: '',
@@ -184,6 +181,8 @@
        id: '',
        graph: null,
        globalGridAttr: {
          statusImg:'',
          nodeTypeExt:'',
          type: 'mesh',
          size: 10,
          color: '#e5e5e5',
@@ -219,7 +218,7 @@
        },
        isReady: false,
        curCel: Cell,
        left_p: document.documentElement.clientHeight-220,
        left_p: document.documentElement.clientHeight-100,
        ports: {
          groups: {
            top: {
@@ -354,7 +353,7 @@
        await this.projectChange2(this.diagramId)
      },

      projectChange() {
     /* projectChange() {
        // alert(555)
        this.projectChange2(this.projectId)
      },
@@ -394,35 +393,29 @@
          console.log(this.dataForm.diagramId, 'this.dataForm.diagramId.........................')
        }
        await this.getDiagram()
      },
      },*/

      diagramIdChanges() {
/*      diagramIdChanges() {
        this.dataForm.diagramId = this.diagramId
        // 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 includeCj = false
        console.log(this.diagramList, 'this.diagramList')
        console.log(this.diagramId, 'this.diagramId')
        for (let val of this.diagramList) {
          if (val.diagramId == this.diagramId) {
            includeCj = true
            break
          }
        let params = {
          modelId : this.dataForm.modelId
        }
        console.log(includeCj, 'includeCj')
        if (includeCj) {
          // alert(3)
          let params = {
            projectId: this.dataForm.projectId,
            diagramId: this.dataForm.diagramId,
            isShow: 'edit'
          }
          console.log(params, 'params')
          let res = await this.$http.get(`/maintain/projectNetworkDiagram/getDiagram`, {params: params})
          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')
@@ -430,20 +423,9 @@
            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()
          }
        } else {
          this.dataForm.id = null
          console.log(this.data, 'this.data asdfg')
          // this.graph.fromJSON(this.emptyJson)
          this.graph.positionContent('left',{ padding: { left: 200 }})
          // this.graph.centerContent()
          // this.graph.zoomToFit()
        }

      },
      init() {
        this.timer = setHartBeat(10, 240);
@@ -453,7 +435,7 @@
        this.graph = new Graph({
          container: document.getElementById('containerImg'),
          width: document.documentElement.clientWidth,
          height: document.documentElement.clientHeight - 220,
          height: document.documentElement.clientHeight - 100,
          // async: true,
          grid: {
            visible: true,
@@ -910,7 +892,8 @@
              data: {
                dataId: item.data.dataId,
                nodeType: item.nodeType,
                nodeTypeExt: item.data.nodeTypeExt
                nodeTypeExt: item.data.nodeTypeExt,
                statusImg:item.statusImg
              },
              attrs: {
                text:{
@@ -926,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()
@@ -1028,6 +1031,10 @@
          this.type = cell.isNode() ? 'node' : 'edge'
          this.shape = cell.shape
          this.id = cell.id
          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)
        })
@@ -1135,6 +1142,8 @@
        this.graph.on('edge:mouseleave', ({cell}) => {
          cell.removeTools()
        })

        this.getDiagram()
      },
      showPorts(ports, show) {
        for (let i = 0, len = ports.length; i < len; i = i + 1) {
@@ -1189,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())
@@ -1201,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'){