新增属性

wente

2024-03-12 3c08a64d7829849811ef19a0ba11d41b6268fa5e

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

@@ -12,17 +12,11 @@
        <div class="fa-card-a">
          <el-form :inline="true">
            <el-form-item>
              模型ID
              模型名称：{{modelName}}
            </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="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>
@@ -116,6 +110,9 @@
    },
    data() {
      return {
        modelId: '',
        modelName: '',
        modelType:'',
        timer: null,
        imgsList:[
          {imgPath:'start',imgName:'start',nodeType:'start',imgWidth:60,imgHeight:60,imgId:'1',data:{}},
@@ -127,7 +124,7 @@
          {imgPath:'voteRight',imgName:'vote',nodeType:'vote',imgWidth:60,imgHeight:60,imgId:'6',data:{}},
        ],
        imgsList2:[
          {imgPath:'logo',imgName:'logo',nodeType:'node',statusImg:'',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,
@@ -140,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: {
        //   // 节点
@@ -181,6 +167,15 @@
        id: '',
        graph: null,
        globalGridAttr: {
          voteSum:'',
          repairMttcr:'',
          repairMttcrOther:'',
          repairDistribType:'',
          reliabDistribType:'',
          taskMtbcfOther:'',
          isRepair:0,
          taskMtbcf:'',
          numberInputValue:'',
          statusImg:'',
          nodeTypeExt:'',
          type: 'mesh',
@@ -306,114 +301,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 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 = {
          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)
@@ -425,11 +334,17 @@
          } else {
            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()
      },
      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({
@@ -457,7 +372,14 @@
            pageVisible: true,
            pageBreak: true,
            pannable: true,
            minVisibleWidth:200,
            minVisibleHeight:200,
            modifiers: 'shift',
          },
          // panning: {
          //   enabled: true,
          //   modifiers: 'shift',
          // },
          mousewheel: {
            enabled: true,
            zoomAtMousePosition: true,
@@ -538,7 +460,7 @@
            enabled: true,
            rubberband: true,
            rubberEdge: true,
            showNodeSelectionBox: true,
            // showNodeSelectionBox: true,
          },
          snapline: true,
          keyboard: true,
@@ -570,287 +492,6 @@
          },
        })
        document.getElementById('stencilImg').appendChild(stencil.container)

        Graph.registerNode(
            'custom-rect',
            {
              inherit: 'rect',
              width: 86,
              height: 26,
              zIndex: 10,
              data: {
                dataId: '',
                finishDate: '',
                inspectName: ''
              },
              attrs: {
                body: {
                  strokeWidth: 1,
                  stroke: 'none',
                  fill: 'none',
                },
                text: {
                  // fontFamily: '仿宋',
                  fontSize: 20,
                  fill: '#000',
                },
                label: {
                  refX: 0,
                  refY: 0.5,
                  textAnchor: 'start',
                  textVerticalAnchor: 'middle',
                  textWrap: {
                    text: '文字模板',
                    width: -10,      // 宽度减少 10px
                    ellipsis: false,  // 文本超出显示范围时，自动添加省略号
                    breakWord: true, // 是否截断单词
                  }
                },
              },
              ports: {...this.ports},
            },
            true,
        )

        Graph.registerNode(
            'custom-polygon',
            {
              inherit: 'polygon',
              width: 86,
              height: 56,
              attrs: {
                body: {
                  strokeWidth: 1,
                  stroke: '#5F95FF',
                  fill: '#EFF4FF',
                },
                // title:{
                //   text:'',
                //   refX: 40,
                //   refY: 38,
                //   fontSize: 20,
                //   fill: '#262626',
                //   'text-anchor': 'start',
                // },
                text: {
                  // refX: 40,
                  // refY: 20,
                  fontSize: 20,
                  fill: '#262626',
                  // 'text-anchor': 'start',
                },
              },
              // markup: [
              //   {
              //     tagName: 'polygon',
              //     selector: 'body',
              //   },
              //   {
              //     tagName: 'text',
              //     selector: 'title',
              //   },
              //   {
              //     tagName: 'text',
              //     selector: 'text',
              //   },
              // ],
              ports: {
                ...this.ports
                // items: [
                //   {
                //     group: 'top',
                //   },
                //   {
                //     group: 'bottom',
                //   },
                // ],
              },
            },
            true,
        )
        //
        Graph.registerNode(
            'custom-circle',
            {
              inherit: 'ellipse',
              width: 120,
              height: 120,
              data: {
                dataId: '',
                finishDate: ''
              },
              attrs: {
                body: {
                  strokeWidth: 1,
                  stroke: '#5F95FF',
                  fill: '#EFF4FF',
                },
                //日期
                title: {
                  text: '',
                  fontSize: 12,
                  fill: '#262626',
                  refX: 0.5,
                  refY: '100%',
                  refY2: -10,
                  textAnchor: 'middle',
                  textVerticalAnchor: 'bottom',
                },
                // 名称
                text: {
                  // fontFamily: '仿宋',
                  fontSize: 20,
                  fill: '#262626',
                  textWrap: {
                    width: 80,      // 宽度为 80px换行
                    ellipsis: false,  // 文本超出显示范围时，自动添加省略号
                    breakWord: true, // 是否截断单词
                  }
                },
              },
              markup: [
                {
                  tagName: 'ellipse',
                  selector: 'body',
                },
                {
                  tagName: 'text',
                  selector: 'title',
                },
                {
                  tagName: 'text',
                  selector: 'text',
                },
              ],
              ports: {...this.ports},
            },
            true,
        )
        Graph.registerNode(
            'custom-circle1',
            {
              inherit: 'ellipse',
              width: 65,
              height: 65,
              data: {
                dataId: '',
                finishDate: ''
              },
              attrs: {
                body: {
                  strokeWidth: 1,
                  stroke: '#5F95FF',
                  fill: '#EFF4FF',
                },
                //日期
                text: {
                  // fontFamily: '仿宋',
                  fontSize: 12,
                  text: '日期节点',
                  fill: '#262626',
                },
              },
              ports: {...this.ports},
            },
            true,
        )
        Graph.registerNode(
            'custom-text',
            {
              inherit: 'text-block',
              width: 86,
              height: 56,
              attrs: {
                body: {
                  strokeWidth: 1,
                  stroke: '#5F95FF',
                  fill: '#EFF4FF',
                },
                text: {
                  text: '专业',
                  fontSize: 20,
                  style: {
                    color: this.globalGridAttr.nodeColor
                  },
                  refX: '0',
                  refY: -0.5,
                  refY2: 1,
                  textAnchor: 'middle',
                  textVerticalAnchor: 'middle',
                },
              },
              markup: [
                {
                  tagName: 'rect',
                  selector: 'body',
                },
                {
                  tagName: 'text',
                  selector: 'text',
                },
              ],
              ports: {...this.ports},
            },
            true,
        )
        Graph.registerNode(
            'rectangle',
            {
              width: 86,
              height: 56,
              attrs: {
                body: {
                  fill: '#FFF',
                  stroke: '#000',
                  strokeWidth: 1,
                },
                icon: {
                  class: 'el-icon-refresh', // Element UI图标的class名称
                  'xlink:href': '', // 如果需要使用SVG图标，请设置xlink:href属性来引入SVG文件
                  refX: '50%',
                  refY: '50%',
                  yAlignment: 'middle',
                  xAlignment: 'middle',
                },
              },
              markup: [
                {
                  tagName: 'rect',
                  selector: 'body',
                },
                {
                  tagName: 'i',
                  selector: 'icon',
                },
              ],
              ports: {...this.ports},
            },
            true
        )
        // 一级网络图的日期文字节点
        const r5 = this.graph.createNode({
          shape: 'custom-circle',
          data: {
            dataId: '',
            finishDate: '',
            inspectName: ''
          },
          label: '阶段',
        })

        // 二级网络图日期节点
        const r6 = this.graph.createNode({
          shape: 'custom-circle1',
          data: {
            dataId: '',
            finishDate: '',
            inspectName: ''
          },
        })
        // 二级网络图文字节点
        const r9 = this.graph.createNode({
          shape: 'custom-rect'
        })
        const imageNodes = this.imgsList.map((item) =>
            this.graph.createNode({
              shape: 'image',
@@ -881,19 +522,34 @@
              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,
                isRepair:false,
                dataId: item.dataId,
                nodeType: item.nodeType,
                nodeTypeExt: item.data.nodeTypeExt,
                statusImg:item.statusImg
                nodeTypeExt: item.nodeTypeExt,
                productType: item.productType,
                statusImg:item.statusImg,
                reliabDistribType:item.reliabDistribType,
                repairDistribType:item.repairDistribType,
                repairMttcr:item.repairMttcr,
                repairMttcrOther:item.repairMttcrOther,
                taskMtbcf:item.taskMtbcf,
                taskMtbcfOther:item.taskMtbcfOther,
                voteSum:'',
              },
              attrs: {
                text:{
@@ -1143,7 +799,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) {