jinlin
2024-09-27 27bf11e737fa1434d234e39db282ab52f3a32114
web/src/views/modules/taskReliability/TimeDiagramTemp.vue
@@ -5,53 +5,6 @@
        <div style="height: 80vh">
          <div class="fa-card-a">
            <div id="stencil"></div>
            <div style="height: 42vh;margin-top: 30px;background: #f5f5f5;padding-bottom:20px ">
              <h3 style="background: #ededed;font-size: 12px;height: 32px;line-height: 32px;padding: 0 5px 0 8px">
                对齐方式</h3>
              <div style="text-align: center">
                <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;color: #5F95FF"
                                                     class="wt-iconfont icon-zuoduiqi"></i></el-button>
                </el-tooltip>
              </div>
              <div style="text-align: center">
                <el-tooltip class="item" effect="dark" content="居中对齐" placement="left">
                  <el-button style="margin-left: 0;margin-top: 10px;padding: 2px;border: 1px solid #5F95FF"
                             @click="centerAlign()"><i style="font-size: 2rem;color: #5F95FF"
                                                       class="wt-iconfont icon-chuizhiduiqi"></i></el-button>
                </el-tooltip>
              </div>
              <div style="text-align: center">
                <el-tooltip class="item" effect="dark" content="右对齐" placement="left">
                  <el-button style="margin-left: 0;margin-top: 10px;padding: 2px;border: 1px solid #5F95FF"
                             @click="rightAlign()"><i style="font-size: 2rem;color: #5F95FF"
                                                      class="wt-iconfont icon-youduiqi"></i></el-button>
                </el-tooltip>
              </div>
              <div style="text-align: center">
                <el-tooltip class="item" effect="dark" content="顶部对齐" placement="left">
                  <el-button style="margin-left: 0;margin-top: 10px;padding: 2px;border: 1px solid #5F95FF"
                             @click="topAlign()"><i style="font-size: 2rem;color:#5F95FF"
                                                    class="wt-iconfont icon-dingduiqi"></i></el-button>
                </el-tooltip>
              </div>
              <div style="text-align: center">
                <el-tooltip class="item" effect="dark" content="水平对齐" placement="left">
                  <el-button style="margin-left: 0;margin-top: 10px;padding: 2px;border: 1px solid #5F95FF"
                             @click="shuipingAlign()"><i style="font-size: 2rem;color:#5F95FF"
                                                         class="wt-iconfont icon-shuipingduiqi"></i></el-button>
                </el-tooltip>
              </div>
              <div style="text-align: center">
                <el-tooltip class="item" effect="dark" content="底部对齐" placement="left">
                  <el-button style="margin-left: 0;margin-top: 10px;padding: 2px;border: 1px solid #5F95FF"
                             @click="bottomAlign()"><i style="font-size: 2rem;color:#5F95FF"
                                                       class="wt-iconfont icon-diduiqi"></i></el-button>
                </el-tooltip>
              </div>
            </div>
          </div>
        </div>
      </el-col>
@@ -294,9 +247,7 @@
    },
    watch: {
      '$route.params.configId'() {
        // alert('$route.params.projectId change')
        this.projectId = this.$route.params.projectId
        //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)
@@ -722,80 +673,13 @@
          },
          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 scaleImgCenter = this.graph.createNode({
          shape: 'image',
          imageUrl: require('@/assets/img/scale/center.jpg'),
          width: 36,
          height: 20,
          data: {
            imagePost: 'center'
          }
        })
        const scaleImgTop = this.graph.createNode({
          shape: 'image',
          imageUrl: require('@/assets/img/scale/top.jpg'),
          width: 36,
          height: 20,
          data: {
            imagePost: 'top'
          }
        })
        const scaleImgRight = this.graph.createNode({
          shape: 'image',
          imageUrl: require('@/assets/img/scale/right.jpg'),
          width: 36,
          height: 20,
          data: {
            imagePost: 'right'
          }
        })
        const scaleImgBottom = this.graph.createNode({
          shape: 'image',
          imageUrl: require('@/assets/img/scale/bottom.jpg'),
          width: 36,
          height: 20,
          data: {
            imagePost: 'bottom'
          }
        })
        const scaleImgLeft = this.graph.createNode({
          shape: 'image',
          imageUrl: require('@/assets/img/scale/left.jpg'),
          width: 36,
          height: 20,
          data: {
            imagePost: 'left'
          }
        })
        // scaleImgTop.setAttribute('crossOrigin', 'Anonymous')
        stencil.load([r5, r6, r9, scaleImgTop, scaleImgCenter, scaleImgRight, scaleImgBottom, scaleImgLeft], 'group1')
        stencil.load([r9], 'group1')
        this.graph.bindKey(['meta+c', 'ctrl+c'], () => {
          const cells = this.graph.getSelectedCells()
          if (cells.length) {
@@ -910,16 +794,6 @@
        })
        //单击边节点
        this.graph.on('edge:click', ({edge}) => {
          // this.reset()
          edge.attr('line/stroke', '#5F95FF')
          edge.prop('labels/0', {
            attrs: {
              body: {
                stroke: '#5F95FF',
              },
            },
          })
        })
        // 单击node节点
        this.graph.on('node:click', ({node}) => {