仿真字体 数量提示 箭头缝隙

wente

2024-10-28 3b3521961c246eda35cde1fde685e3931f8af529

仿真字体 数量提示 箭头缝隙

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

@@ -1,14 +1,14 @@
<template>
  <div>
    <el-row :gutter="[8,8]">
      <el-col :span="3">
      <el-col :span="4">
        <div :style="'height:' +left_p+'px'">
          <div style="height: 100%">
            <div id="stencilImg"></div>
          </div>
        </div>
      </el-col>
      <el-col :span="21">
      <el-col :span="20">
        <div class="fa-card-a">
          <el-form :inline="true">
            <el-form-item>
@@ -906,14 +906,16 @@
        })
        this.graph.centerContent()
        const stencil = new Addon.Stencil({
          //getDragNode: (node) => node.clone({keepId: true}),
          // getDragNode: (node) => {
          // node.removeAttrs('title')
          // },
          getDropNode: (node) => {
            this.canAdd = true
            const {width, height} = node.size()
            if (node.getData().type && node.getData().type === 'imageNodes2') {
              const nodes = this.graph.getNodes()
              let deviceNoArr = []
              // 检查除当前节点之外的所有节点的包围框是否相交

              for (const node2 of nodes) {
                console.log(node2, 'saveDiagram node')
                if (node2.getData().nodeType == 'node' && node2.getData().dataId) {
@@ -951,7 +953,7 @@
          },
          title: '',
          target: this.graph,
          stencilGraphWidth: 200,
          stencilGraphWidth: 240,
          stencilGraphHeight: 280,
          collapsable: true,
          groups: [
@@ -965,13 +967,13 @@
              name: 'group2',
              graphHeight: '',
              layoutOptions: {
                rowHeight: 90,
                rowHeight: 100,
              },
            }
          ],
          layoutOptions: {
            columns: 2,
            columnWidth: 105,
            columnWidth: 130,
          },
        })
        document.getElementById('stencilImg').appendChild(stencil.container)
@@ -1024,8 +1026,8 @@
          this.graph.createNode({
            shape: 'image',
            //imageUrl: `${window.SITE_CONFIG['apiURL']}/sysPictureBase/getProductImg?token=${Cookies.get('token')}&id=${item.imgPath}`,
            width: 60,
            height: 60,
            width: 100,
            height: 70,
            //id: item.dataId, // 手动设置节点的 ID
            data: {
              type: 'imageNodes2',
@@ -1058,40 +1060,65 @@
                'xlink:href': `${window.SITE_CONFIG['apiURL']}/sysPictureBase/getSvgImage?token=${Cookies.get('token')}&id=${item.imgPath}`,
                //'xlink:href': urlObject.createObjectURL(new Blob([item.svgContent])),
              },
              title: {
                text: item.basicUnitNum>=1?item.basicUnitNum:'',
                refX: 15,
                refY: 10,
                fill: '#748be7',
                fontSize: 14,
                fontWeight:'bold',
                'text-anchor': 'start',
              },
              text: {
                text: item.imgName,
                fontSize: 14,
                style: {
                  color: this.globalGridAttr.nodeColor
                },
                refX: 0.5,
                refY: '100%',
                refY: '85%',
                refY2: 4,
                textAnchor: 'middle',
                textVerticalAnchor: 'top',
                textWrap: {
                  width: 120,      // 宽度为 120px换行
                  ellipsis: false,  // 文本超出显示范围时，自动添加省略号
                  breakWord: true, // 是否截断单词
                }
              },
            },
            tools: [
            markup: [
              {
                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
                      }
                    }
                  ]
                }
              }
                tagName: 'image',
                selector: 'image',
              },
              {
                tagName: 'text',
                selector: 'title',
              },
              {
                tagName: 'text',
                selector: 'text',
              },
            ],
            // 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},
          }),
        )
@@ -1191,6 +1218,9 @@
        })
        // 监听节点添加事件
        this.graph.on('node:added', ({node}) => {
          node.setAttrs({
            title: { text: '' },
          })
          if (this.isFirstLoad) {
            return
          }

 web/src/views/modules/taskReliability/SchemeCompar.vue

@@ -34,10 +34,10 @@
        <div class="fa-card-a" style="position: relative;height: calc(100vh - 230px)">
          <div v-if="Show">
            <el-button v-if="isZk" type="info" size="small" icon="el-icon-caret-bottom"
                       style="position: absolute;right: 10%;top: 9%;z-index: 1" @click="zk()"></el-button>
                       style="position: absolute;right: 0;top: 0;z-index: 1" @click="zk()"></el-button>
            <el-button v-if="!isZk" type="info" size="small" icon="el-icon-caret-right"
                       style="position: absolute;right: 10%;top: 9%;z-index: 1" @click="zk()"></el-button>
            <div v-if="isZk" style="position: absolute;right: 10%;top: 13%">
                       style="position: absolute;right: 0;top: 0;z-index: 1" @click="zk()"></el-button>
            <div v-if="isZk" style="position: absolute;right: 0;top: 5%">
              <el-table :data="tableData" border style="width: 500px">
                <el-table-column
                  prop="name"

 web/src/views/modules/taskReliability/TimeDiagram.vue

@@ -141,6 +141,7 @@
      window.removeEventListener('scroll', this.handleScroll,true);
    },
    mounted() {
      // alert(`mounted执行了`)
      this.getProductList()
      this.init()
      this.$refs.textDiagram.init()
@@ -230,8 +231,7 @@
                line: {
                  stroke: '#A2B1C3',
                  strokeWidth: 2,
                  sourceMarker: 'none',
                  targetMarker: 'none'
                  targetMarker: null,
                }
              },
              tools: {

 web/src/views/modules/taskReliability/textDiagram.vue

@@ -61,8 +61,7 @@
                line: {
                  stroke: '#A2B1C3',
                  strokeWidth: 2,
                  sourceMarker: 'none',
                  targetMarker: 'none'
                  targetMarker: null,
                }
              },
              tools: {