样式修改

wente

2024-03-29 404bd17f83c0054388e4a02ff31dbc37c27a4b11

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

@@ -3,7 +3,7 @@
    <el-row :gutter="[8,8]">
      <el-col :span="4">
        <div :style="'height:' +left_p+'px'">
          <div class="fa-card-a" style="height: 100%">
          <div  style="height: 100%">
            <div id="stencilImg"></div>
          </div>
        </div>
@@ -14,53 +14,71 @@
            <el-form-item>
              模型名称：{{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;"
                             @click="leftAlign()"><i style="font-size: 2rem;"
                                                     class="wt-iconfont icon-zuoduiqi"></i></el-button>
                </el-tooltip>
              <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-button  @click="leftAlign()">
                <i style="font-size: 1rem;" class="wt-iconfont icon-zuoduiqi"></i>
              </el-button>
              <el-button @click="centerAlign()">
                <i style="font-size: 1rem;" class="wt-iconfont icon-chuizhiduiqi"></i>
              </el-button>
              <el-button @click="rightAlign()">
                <i style="font-size: 1rem;" class="wt-iconfont icon-youduiqi"></i>
              </el-button>
              <el-button @click="topAlign()">
                <i style="font-size: 1rem;" class="wt-iconfont icon-dingduiqi"></i>
              </el-button>
              <el-button @click="shuipingAlign()">
                <i style="font-size: 1rem;" class="wt-iconfont icon-shuipingduiqi"></i>
              </el-button>
              <el-button @click="bottomAlign()">
                <i style="font-size: 1rem;" class="wt-iconfont icon-diduiqi"></i>
              </el-button>
            </el-form-item>
            <el-form-item>
                <el-tooltip class="item" effect="dark" content="居中对齐" placement="left">
                  <el-button style="margin-left: 0;padding: 2px;border: 1px solid #5F95FF"
                             @click="centerAlign()"><i style="font-size: 2rem;"
                                                       class="wt-iconfont icon-chuizhiduiqi"></i></el-button>
                </el-tooltip>
            </el-form-item>
            <el-form-item>
                <el-tooltip class="item" effect="dark" content="右对齐" placement="left">
                  <el-button style="margin-left: 0;padding: 2px;border: 1px solid #5F95FF"
                             @click="rightAlign()"><i style="font-size: 2rem;"
                                                      class="wt-iconfont icon-youduiqi"></i></el-button>
                </el-tooltip>
            </el-form-item>
            <el-form-item>
                <el-tooltip class="item" effect="dark" content="顶部对齐" placement="left">
                  <el-button style="margin-left: 0;padding: 2px;border: 1px solid #5F95FF"
                             @click="topAlign()"><i style="font-size: 2rem;"
                                                    class="wt-iconfont icon-dingduiqi"></i></el-button>
                </el-tooltip>
            </el-form-item>
            <el-form-item>
                <el-tooltip class="item" effect="dark" content="水平对齐" placement="left">
                  <el-button style="margin-left: 0;padding: 2px;border: 1px solid #5F95FF"
                             @click="shuipingAlign()"><i style="font-size: 2rem;"
                                                         class="wt-iconfont icon-shuipingduiqi"></i></el-button>
                </el-tooltip>
            </el-form-item>
            <el-form-item>
                <el-tooltip class="item" effect="dark" content="底部对齐" placement="left">
                  <el-button style="margin-left: 0;padding: 2px;border: 1px solid #5F95FF"
                             @click="bottomAlign()"><i style="font-size: 2rem;"
                                                       class="wt-iconfont icon-diduiqi"></i></el-button>
                </el-tooltip>
            </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;" @click="leftAlign()">-->
<!--                  <i style="font-size: 2rem;" class="wt-iconfont icon-zuoduiqi"></i>-->
<!--                </el-button>-->
<!--              </el-tooltip>-->
<!--            </el-form-item>-->
<!--            <el-form-item>-->
<!--              <el-tooltip class="item" effect="dark" content="居中对齐" placement="left">-->
<!--                <el-button style="margin-left: 0;padding: 2px;border: 1px solid #5F95FF"-->
<!--                           @click="centerAlign()"><i style="font-size: 2rem;"-->
<!--                                                     class="wt-iconfont icon-chuizhiduiqi"></i></el-button>-->
<!--              </el-tooltip>-->
<!--            </el-form-item>-->
<!--            <el-form-item>-->
<!--              <el-tooltip class="item" effect="dark" content="右对齐" placement="left">-->
<!--                <el-button style="margin-left: 0;padding: 2px;border: 1px solid #5F95FF"-->
<!--                           @click="rightAlign()"><i style="font-size: 2rem;"-->
<!--                                                    class="wt-iconfont icon-youduiqi"></i></el-button>-->
<!--              </el-tooltip>-->
<!--            </el-form-item>-->
<!--            <el-form-item>-->
<!--              <el-tooltip class="item" effect="dark" content="顶部对齐" placement="left">-->
<!--                <el-button style="margin-left: 0;padding: 2px;border: 1px solid #5F95FF"-->
<!--                           @click="topAlign()"><i style="font-size: 2rem;"-->
<!--                                                  class="wt-iconfont icon-dingduiqi"></i></el-button>-->
<!--              </el-tooltip>-->
<!--            </el-form-item>-->
<!--            <el-form-item>-->
<!--              <el-tooltip class="item" effect="dark" content="水平对齐" placement="left">-->
<!--                <el-button style="margin-left: 0;padding: 2px;border: 1px solid #5F95FF"-->
<!--                           @click="shuipingAlign()"><i style="font-size: 2rem;"-->
<!--                                                       class="wt-iconfont icon-shuipingduiqi"></i></el-button>-->
<!--              </el-tooltip>-->
<!--            </el-form-item>-->
<!--            <el-form-item>-->
<!--              <el-tooltip class="item" effect="dark" content="底部对齐" placement="left">-->
<!--                <el-button style="margin-left: 0;padding: 2px;border: 1px solid #5F95FF"-->
<!--                           @click="bottomAlign()"><i style="font-size: 2rem;"-->
<!--                                                     class="wt-iconfont icon-diduiqi"></i></el-button>-->
<!--              </el-tooltip>-->
<!--            </el-form-item>-->
          </el-form>
          <div id="containerImg" style="border: 1px solid #EAEBEE;border-radius: 6px;
        box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);">
@@ -83,6 +101,7 @@
  import ConfigEdge from './ConfigEdge/index.vue'
  import {removeCurrentTabHandle} from '@/commonJS/common'
  import {setHartBeat} from '@/commonJS/common';
  import Cookies from 'js-cookie'

  export default {
    name: 'RBD-edit-img',
@@ -112,21 +131,37 @@
      return {
        modelId: '',
        modelName: '',
        modelType:'',
        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:{}},
        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:'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:{}},
          {
            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',statusImg:'',imgWidth:60,imgHeight:60,imgId:'100',data:{dataId:'123456',nodeTypeExt:''}},
        imgsList2: [
          // {imgPath:'logo',imgName:'logo',nodeType:'node',,nodeTypeExt:'',productType:'',statusImg:'',imgWidth:60,imgHeight:60,imgId:'100',dataId:'123456'},
        ],
        nodeType:'',
        nodeType: '',
        first: true,
        shape: '',
        projectList: [],
@@ -140,6 +175,7 @@
          content: null,
          publishContent: null,
          hasPublish: 0,
          urlPref: '',
        },
        // emptyJson: {
        //   // 节点
@@ -167,8 +203,18 @@
        id: '',
        graph: null,
        globalGridAttr: {
          statusImg:'',
          nodeTypeExt:'',
          productType:'',
          voteNum: '',
          repairMttcr: '',
          repairMttcrOther: '',
          repairDistribType: '',
          reliabDistribType: '',
          taskMtbcfOther: '',
          isRepair: 0,
          taskMtbcf: '',
          numberInputValue: '',
          statusImg: '',
          nodeTypeExt: '',
          type: 'mesh',
          size: 10,
          color: '#e5e5e5',
@@ -204,7 +250,7 @@
        },
        isReady: false,
        curCel: Cell,
        left_p: document.documentElement.clientHeight-100,
        left_p: document.documentElement.clientHeight - 100,
        ports: {
          groups: {
            top: {
@@ -295,43 +341,51 @@
      }
    },
    mounted() {
      this.initDigram()
      //this.initDigram()
      this.type = 'grid'
    },
    methods: {
      init(row){
      init(row) {
        this.modelName = row.modelName
        let modelId = row.id
        this.dataForm.id = modelId
        this.getDiagram(modelId)
        this.dataForm.id = row.id
        // this.productId = row.productId
        // this.getProduct(row.productId)
        this.initDigram(row.productId)
        console.log(this.dataForm, 'init(row){')
      },
      async getDiagram(modelId) {
        let params = {
          modelId : modelId
          modelId: modelId,
          urlPref: window.SITE_CONFIG['apiURL'],
          token: Cookies.get('token'),
        }
          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')
        let res = await this.$http.get(`/taskReliability/ModelLine/getDiagram`, {params: params})
        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')
          if(this.dataForm.content!=''){
            this.diagramJson = JSON.parse(this.dataForm.content)
            // console.log(this.dataForm.content,'this.Diagram content')
            console.log(this.diagramJson, 'this.Diagram json')
            this.graph.fromJSON(this.diagramJson)
            this.graph.centerContent()
            this.graph.zoomToFit()
          } else {
            await this.clearDiagram()
          }
          // console.log(this.dataForm.content,'this.Diagram content')
          console.log(this.diagramJson, 'this.Diagram json')
          this.graph.fromJSON(this.diagramJson)
          this.graph.positionContent('left')
          // this.graph.centerContent()
          // this.graph.zoomToFit()
        } else {
          await this.clearDiagram()
        }
      },
      async clearDiagram() {
        this.dataForm.id = null
        // this.graph.fromJSON(this.emptyJson)
        this.graph.fromJSON('')
        this.graph.centerContent()
        this.graph.zoomToFit()
        // this.graph.centerContent()
        // this.graph.zoomToFit()
        // this.graph.freeze()
      },
      initDigram() {
      async initDigram(productId) {
        this.timer = setHartBeat(10, 240);
        console.log(document.documentElement.clientWidth, 'document.documentElement.clientWidth')
        console.log(document.documentElement.clientHeight, 'document.documentElement.clientHeight')
@@ -343,15 +397,16 @@
          grid: {
            visible: true,
          },
          onToolItemCreated({tool}) {
            const handle = tool
            const options = handle.options
            if (options && options.index % 2 === 1) {
              tool.setAttrs({fill: 'red'})
            }
          },
          autoResize: true,
          history: true,
            history: {
                enabled: true,
                beforeAddCommand(event, args) {
                    if (args.key==='tools') {
                        console.log(args.key,'event, args')
                        return false
                    }
                },
            },
          // panning: {
          //   enabled: true,
          // },
@@ -360,8 +415,8 @@
            pageVisible: true,
            pageBreak: true,
            pannable: true,
            minVisibleWidth:200,
            minVisibleHeight:200,
            minVisibleWidth: 200,
            minVisibleHeight: 200,
            modifiers: 'shift',
          },
          // panning: {
@@ -421,6 +476,12 @@
                    }
                  }
                }],
                tools: {
                  name: 'segments',
                  args: {
                    attrs: { fill: '#666' },
                  },
                },
                zIndex: 0,
              })
            },
@@ -456,392 +517,141 @@
        })
        this.graph.centerContent()
        const stencil = new Addon.Stencil({
          getDragNode: (node) => node.clone({ keepId: true }),
          getDropNode(node) {
            let {width, height} = node.size()
            if (node.getData().imgWidth) {
              width = node.getData().imgWidth
            }
            if (node.getData().imgHeight) {
              height = node.getData().imgHeight
            }
            return node.clone({ keepId: true }).size(width, height)
          },
            validateNode(node){
              console.log(node.id)
            },
          title: '',
          target: this.graph,
          stencilGraphWidth: 230,
          stencilGraphHeight: 300,
          collapsable: false,
            stencilGraphWidth: 200,
            stencilGraphHeight: 280,
            collapsable: true,
          groups: [
            {
              title: '运算符号',
              name: 'group1',
              collapsable: false
            },
            {
              title: '设备节点',
              name: 'group2',
              collapsable: false
                graphHeight: '',
                layoutOptions: {
                    rowHeight: 90,
                },
            }
          ],
          layoutOptions: {
            columns: 2,
            columnWidth: 110,
            // rowHeight: 75,
            columnWidth: 105,
          },
        })
        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',
              imageUrl: require('/public/modelImg/'+item.imgPath+'.png'),
              width: item.imgWidth,
              height: item.imgHeight,
              x: item.imgWidth,
              y: item.imgHeight,
              data: {
                dataId: '',
                nodeType: item.nodeType,
                nodeTypeExt: ''
              },
              attrs: {
                text:{
                  text: item.imgName,
                  fontSize: 14,
                  style: {
                    color: this.globalGridAttr.nodeColor
                  },
                  refX: 0.5,
                  refY: '100%',
                  refY2: 4,
                  textAnchor: 'middle',
                  textVerticalAnchor: 'top',
          this.graph.createNode({
            shape: 'image',
            imageUrl: require('/public/modelImg/' + item.imgPath + '.png'),
            width: item.imgWidth,
            height: item.imgHeight,
            data: {
              dataId: '',
              nodeType: item.nodeType,
              nodeTypeExt: '',
              voteNum:''
            },
            attrs: {
              text: {
                text: item.imgName,
                fontSize: 14,
                style: {
                  color: this.globalGridAttr.nodeColor
                },
                refX: 0.5,
                refY: '100%',
                refY2: 4,
                textAnchor: 'middle',
                textVerticalAnchor: 'top',
              },
              ports: {...this.ports},
            }),
            },
            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'),
              width:item.imgWidth,
              height:item.imgHeight,
              x:item.imgWidth,
              y:item.imgHeight,
              data: {
                dataId: item.data.dataId,
                nodeType: item.nodeType,
                nodeTypeExt: item.data.nodeTypeExt,
                statusImg:item.statusImg
              },
              attrs: {
                text:{
                  text: item.imgName,
                  fontSize: 14,
                  style: {
                    color: this.globalGridAttr.nodeColor
                  },
                  refX: 0.5,
                  refY: '100%',
                  refY2: 4,
                  textAnchor: 'middle',
                  textVerticalAnchor: 'top',
          this.graph.createNode({
            shape: 'image',
            imageUrl: `${window.SITE_CONFIG['apiURL']}/sysPictureBase/getProductImg?token=${Cookies.get('token')}&id=${item.imgPath}`,
            width: 60,
            height: 60,
            id: item.dataId, // 手动设置节点的 ID
            data: {
              isRepair: item.isRepair,
              dataId: item.dataId,
              nodeType: item.nodeType,
              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,
              imgHeight: item.imgHeight,
              imgWidth: item.imgWidth,
              voteNum:'',
            },
            attrs: {
              text: {
                text: item.imgName,
                fontSize: 14,
                style: {
                  color: this.globalGridAttr.nodeColor
                },
                refX: 0.5,
                refY: '100%',
                refY2: 4,
                textAnchor: 'middle',
                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
                        }
            },
            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},
            }),
              }
            ],
            ports: {...this.ports},
          }),
        )
        stencil.load(imageNodes, 'group1')
        stencil.load(imageNodes2, 'group2')
@@ -941,9 +751,9 @@
          this.type = cell.isNode() ? 'node' : 'edge'
          this.shape = cell.shape
          this.id = cell.id
          if(this.type==='node'){
          if (this.type === 'node') {
            this.nodeType = cell.getData().nodeType
            console.log(this.nodeType, 'this.nodeType')
            console.log(this.nodeType,cell.id,'this.nodeType')
          }
          console.log(this.shape, 'this.shape')
          // this.nodeOpt(this.id, this.globalGridAttr)
@@ -1024,7 +834,7 @@
          this.showPorts(ports, false)
        })

        this.graph.on('edge:mouseenter', ({cell, view}) => {
        this.graph.on('edge:mouseenter', ({cell}) => {
          // alert(123)
          cell.addTools([
            {
@@ -1038,22 +848,18 @@
                },
              },
            },
          ])
          cell.addTools(
            [
              {
                name: 'segments',
                args: {snapRadius: 20, attrs: {fill: '#444'}}
              }
            ]
          )
                  name: 'segments',
                  args: {snapRadius: 20, attrs: {fill: '#444'}}
              },
          ])
        })

        this.graph.on('edge:mouseleave', ({cell}) => {
          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) {
@@ -1114,6 +920,7 @@
      async saveDiagram() {
        console.log(JSON.stringify(this.graph.toJSON()), 'graph.toJSON()')
        this.dataForm.content = JSON.stringify(this.graph.toJSON())
        this.dataForm.urlPref = window.SITE_CONFIG['apiURL']
        console.log(this.dataForm, 'dataFrom')
        await this.$http[this.dataForm.id === null ? 'post' : 'put'](`/taskReliability/ModelLine/`, this.dataForm).then(async res => {
          if (res.msg === 'success') {
@@ -1126,7 +933,7 @@
      async analyzeDiagram() {
        console.log(JSON.stringify(this.graph.toJSON()), 'graph.toJSON()')
        this.dataForm.content = JSON.stringify(this.graph.toJSON())
        console.log(this.dataForm, 'dataFrom')
        this.dataForm.urlPref = window.SITE_CONFIG['apiURL']
        await this.$http['post'](`/taskReliability/ModelLine/analyze`, this.dataForm).then(async res => {
          if (res.msg === 'success') {
            this.$alert('解析成功', '提示', {
@@ -1248,7 +1055,7 @@
        }
      },
      close() {
        if (this.timer){
        if (this.timer) {
          window.clearInterval(this.timer)
        }
      },
@@ -1258,32 +1065,37 @@
</script>

<style>
#containerImg {
  display: flex;
  border: 1px solid #dfe3e8;
  height:400px ;
  width: 100% !important;
}
  #containerImg {
    display: flex;
    border: 1px solid #dfe3e8;
    height: 400px;
    width: 100% !important;
  }

.x6-graph-scroller.x6-graph-scroller-pannable {
  width: 100% !important;
}
  .x6-graph-scroller.x6-graph-scroller-pannable {
    width: 100% !important;
  }

#stencilImg {
  width: 100%;
  height: 100%;
  position: relative;
  border-right: 1px solid #dfe3e8;
}
  #stencilImg {
    width: 100%;
    height: 100%;
    position: relative;
    border-right: 1px solid #dfe3e8;
  }

.x6-widget-stencil {
  position: relative;
  height: 100%;
  .x6-widget-stencil {
    position: relative;
    height: 100%;
  }
#stencilImg .x6-graph-svg-viewport{
    height: 100%;
}

.x6-widget-stencil-content {
  position: relative;
  height: 100%;
  .x6-widget-stencil-content {
    position: relative;
  height: calc(100% - 32px);
}
#stencilImg .x6-widget-stencil.collapsable > .x6-widget-stencil-content{
    top:0
  }

</style>