修改

wente

2024-08-08 e5429b2cabdd39fa6de9193dd250788302f9be51

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

@@ -33,7 +33,7 @@
          </el-col>
          <el-col :span="20">
            <div style="margin-top: 20px">
              <div id="container" style="border: 1px solid #EAEBEE;border-radius: 6px;
              <div id="timeDiagram" style="border: 1px solid #EAEBEE;border-radius: 6px;
        box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);">
              </div>
            </div>
@@ -42,7 +42,7 @@
      </div>
    </el-row>
    <el-dialog v-dialogDrag title="模型设计" top="1vh" width='95%' :visible.sync="dialogVisible2" v-if="dialogVisible2">
      <RBDEditImg ref="rbdEditImg"></RBDEditImg>
      <model-view ref="modelView"></model-view>
    </el-dialog>
  </div>
</template>
@@ -51,12 +51,13 @@
  import SimulatCurve from "./SimulatCurve";
  import ProductModelTree from "../basicInfo/ProductModelTree";
  import {Graph, Shape, Addon, Cell} from '@antv/x6'
  import RBDEditImg from './RBD-edit-img'
  import ModelView from "./ModelView";


  export default {
    data() {
      return {
        knob:HTMLDivElement,
        dialogVisible2: false,
        timers: '',
        shape: '',
@@ -120,6 +121,7 @@
      this.getProductList()
    },
    components: {
      ModelView,
      ProductModelTree,
      SimulatCurve,
    },
@@ -128,7 +130,7 @@
        console.log(document.documentElement.clientWidth, 'document.documentElement.clientWidth')
        console.log(document.documentElement.clientHeight, 'document.documentElement.clientHeight')
        this.graph = new Graph({
          container: document.getElementById('container'),
          container: document.getElementById('timeDiagram'),
          width: document.documentElement.clientWidth,
          height: document.documentElement.clientHeight - 220,
          // async: true,
@@ -150,15 +152,7 @@
              })
            }
          },
          onToolItemCreated({tool}) {
            const handle = tool
            const options = handle.options
            if (options && options.index % 2 === 1) {
              tool.setAttrs({fill: 'red'})
            }
          },
          autoResize: true,
          history: true,
          scroller: {
            enabled: true,
            pageVisible: true,
@@ -172,98 +166,35 @@
            minScale: 0.1,
            maxScale: 10,
          },
          connecting: {
            router: {
              name: 'normal',
              // args: {
              //   padding: 1,
              // },
            },
            connector: {
              name: 'rounded',
              args: {
                radius: 8,
          createEdge() {
            return new Shape.Edge({
              data: {
                id: '',
                status: '',
                startTime:'',
                endTime: '',
              },
            },
            // anchor: 'center',
            connectionPoint: 'anchor',
            allowBlank: false,
            snap: {
              radius: 20,
            },
            createEdge() {
              return new Shape.Edge({
                attrs: {
                  line: {
                    stroke: '#A2B1C3',
                    strokeWidth: 2,
                    targetMarker: 'classic'
                  }
                },
                tools: {
                  name: 'vertices',
                },
                labels: [{
                  attrs: {
                    body: {
                      stroke: '#5F95FF',
                    },
                    text: {
                      // fontFamily: '仿宋',
                      text: ''
                    }
                  },
                }],
                zIndex: 0,
              })
            },
          },
          highlighting: {
            magnetAdsorbed: {
              name: 'stroke',
              args: {
                attrs: {
                  fill: '#5F95FF',
                  stroke: '#5F95FF',
                },
              attrs: {
                line: {
                  stroke: '#A2B1C3',
                  strokeWidth: 2,
                  sourceMarker: 'none',
                  targetMarker: 'none'
                }
              },
            },
              tools: {
                name: 'vertices',
              },
              zIndex: 0,
            })
          },
          resizing: {
            enabled: true,
            restricted: true
          },
          rotating: true,
          selecting: {
            enabled: true,
            rubberband: true,
            rubberEdge: true,
            showNodeSelectionBox: true,
          },
          snapline: true,
          keyboard: true,
          clipboard: true,
        })
        this.knob = document.createElement('div',false)
        this.knob.style.position = 'absolute'
        document.getElementById('timeDiagram').appendChild(this.knob)
        this.graph.centerContent()
        const stencil = new Addon.Stencil({
          title: '',
          target: this.graph,
          stencilGraphWidth: 260,
          stencilGraphHeight: 700,
          collapsable: false,
          groups: [
            {
              title: '图元',
              name: 'group1',
              collapsable: false
            }
          ],
          layoutOptions: {
            columns: 2,
            columnWidth: 130,
            rowHeight: 100,
          },
        })

        Graph.registerNode(
          'custom-rect',
          {
@@ -324,7 +255,101 @@
            },
            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,
        )
@@ -367,162 +392,6 @@
          },
          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')
        this.graph.bindKey(['meta+c', 'ctrl+c'], () => {
          const cells = this.graph.getSelectedCells()
          if (cells.length) {
            this.graph.copy(cells)
          }
          return false
        })

        this.graph.bindKey(['meta+x', 'ctrl+x'], () => {
          const cells = this.graph.getSelectedCells()
          if (cells.length) {
            this.graph.cut(cells)
          }
          return false
        })
        // 监听 stencil 的拖拽开始事件
        this.graph.on('node:embed', ({node, e}) => {
          // 阻止事件冒泡
          e.stopPropagation()
          console.log(node.shape, 'node node')
          let parent
          let child
          if (node.shape === 'custom-rect') {
            child = node
          } else {
            parent = node
          }
          console.log('parent:' + parent, 'child:' + child)
          // parent.addChild(child);
        })
        this.graph.bindKey(['meta+v', 'ctrl+v'], () => {
          if (!this.graph.isClipboardEmpty()) {
            const cells = this.graph.paste({offset: 32})
            this.graph.cleanSelection()
            this.graph.select(cells)
          }
          return false
        })
//undo redo
        this.graph.bindKey(['meta+z', 'ctrl+z'], () => {
          if (this.graph.history.canUndo()) {
            this.graph.history.undo()
          }
          return false
        })

        this.graph.bindKey(['meta+shift+z', 'ctrl+shift+z'], () => {
          if (this.graph.history.canRedo()) {
            this.graph.history.redo()
          }
          return false
        })

// select all
        this.graph.bindKey(['meta+a', 'ctrl+a'], () => {
          const nodes = this.graph.getNodes()
          if (nodes) {
            this.graph.select(nodes)
          }
        })
//delete
        this.graph.bindKey('delete', () => {
          const cells = this.graph.getSelectedCells()
          if (cells.length) {
            this.$confirm('是否删除该节点?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.graph.removeCells(cells)
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              })
            })
          }
        })
// zoom
        this.graph.bindKey(['ctrl+1', 'meta+1'], () => {
          const zoom = this.graph.zoom()
@@ -539,7 +408,10 @@
        })

        this.graph.on('blank:click', ({cell}) => {
          // this.reset()
          // this.type.value = "grid"
          this.type = 'grid'
          // this.id = cell.id
        })

        this.graph.on('cell:click', ({cell}) => {
@@ -573,14 +445,9 @@
              modelName: node.attr('label/textWrap/text'),
            }
            this.$nextTick(() => {
              this.$refs.rbdEditImg.init(param)
              this.$refs.modelView.init(param)
            })
          }
        })
        // 控制连接桩显示/隐藏
        this.graph.on('node:delete', ({view, e}) => {
          e.stopPropagation()
          view.cell.remove()
        })

        this.graph.on('node:customevent', ({name, view, e}) => {
@@ -589,77 +456,48 @@
            view.cell.remove()
          }
        })
        // 双击编辑
        this.graph.on('cell:dblclick', ({cell, e}) => {
          const isNode = cell.isNode()
          const name = cell.isNode() ? 'node-editor' : 'edge-editor'
          cell.removeTool(name)
          cell.addTools({
            name,
            args: {
              event: e,
              attrs: {
                backgroundColor: isNode ? '#EFF4FF' : '#FFF',
                text: {
                  fontSize: 16,
                  fill: '#262626',
                },
              },
            },
          })
        })

        this.graph.on('node:mouseenter', ({node}) => {
          const container = document.getElementById('container')
          const ports = container.querySelectorAll(
            '.x6-port-body',
          )
          this.showPorts(ports, true)
        // 鼠标移入edge节点
        this.graph.on('edge:mouseenter', ({edge,e}) => {
          const style = this.knob.style
          // e.stopPropagation()
          console.log('edge:mouseenter')
          if (e && edge.data) {
            if (edge.getData().status==='F') {
              //console.log(edge.getData(),"eee edge.getData()")
              let startTimes = edge.getData().startTimes
              let endTimes = edge.getData().endTimes
              //console.log(e,'eee')
              const p = this.graph.clientToGraph(e.clientX, e.clientY)
              setTimeout(()=>{
                style.display = 'block'
                style.left = `${p.x}px`
                style.top = `${p.y}px`
                style.width = 200+ 'px'
                style.height = 80 + 'px'
                style.textAlign = 'center'
                style.background = '#000'
                style.color = '#fff'
                style.lineHeight = (40 + 'px')
                style.zIndex = 100
                this.knob.innerText = `开始时间：${startTimes}\n结束时间：${endTimes}`
              },0)
              console.log(p,'p p p')
              console.log(style,this.knob,'style style')
            }
          }
        })

        this.graph.on('node:mouseleave', ({node}) => {
          // if (node.hasTool('button-remove')) {
          //   node.removeTool('button-remove')
          // }
          const container = document.getElementById('container')
          const ports = container.querySelectorAll(
            '.x6-port-body',
          )
          this.showPorts(ports, false)
        })

        this.graph.on('edge:mouseenter', ({cell, view}) => {
          // alert(123)
          cell.addTools([
            {
              name: 'source-arrowhead',
            },
            {
              name: 'target-arrowhead',
              args: {
                attrs: {
                  fill: 'red',
                },
              },
            },
          ])
          cell.addTools(
            [
              {
                name: 'segments',
                args: {snapRadius: 20, attrs: {fill: '#444'}}
              }
            ]
          )
        })

        this.graph.on('edge:mouseleave', ({cell}) => {
          cell.removeTools()
// 鼠标移出edge节点
        this.graph.on('edge:mouseleave', ({edge}) => {
          console.log('edge:mouseleave')
          const style = this.knob.style
          style.display = 'none'
        })
      },
      async getProductList() {
        let res = await this.$http.get('/basicInfo/XhProductModel/getTaskProductList')
        this.productList = res.data
        this.onProductSelected(this.productList[0])
      },
      async getTaskList() {
        let params = {
@@ -679,8 +517,7 @@
        this.simulatList = res.data
      },
      async onTreeSelected(data) {
        this.dataForm.productId = data.id
        console.log(this.dataForm.productId)
        this.graph.unfreeze()
        if (!this.dataForm.taskModelId) {
          this.$alert("请先选择具体任务")
          return
@@ -690,11 +527,24 @@
          return
        }
        let params = {
          productId: this.dataForm.productId,
          productId: data.id,
          taskId: this.dataForm.taskModelId,
          fzId: this.dataForm.id
        }
        let res = await this.$http.get('/taskReliability/SimulatAssess/getStatus', {params: params})
        if (res.data !== null) {
          this.diagramJson = JSON.parse(res.data)
          console.log(this.diagramJson, 'this.Diagram json')
          this.graph.fromJSON(this.diagramJson)
          this.graph.centerContent()
          this.graph.zoomToFit()
          this.graph.freeze()
        } else {
          this.graph.fromJSON(this.emptyJson)
          this.graph.centerContent()
          this.graph.zoomToFit()
          this.graph.freeze()
        }
        console.log(res.data)
      },
      // 获取信息
@@ -707,6 +557,7 @@
        this.$nextTick(() => {
          this.$refs.ProductModelTree.getProductList()
        })
        this.init()
      },
      onTaskSelected(data) {
        console.log(data, ' onProductSelected(data)')
@@ -726,7 +577,7 @@
        this.dataForm.simulatFrequency = result.data.simulatFrequency
      },
      async getDiagram() {
        this.init()
        this.graph.unfreeze()
        let params = {
          productId: this.dataForm.productId,
          taskId: this.dataForm.taskModelId,
@@ -735,7 +586,6 @@
        let res = await this.$http.get('/taskReliability/SimulatAssess/getStatus', {params: params})
        if (res.data !== null) {
          this.diagramJson = JSON.parse(res.data)
          // console.log(this.dataForm.content,'this.Diagram content')
          console.log(this.diagramJson, 'this.Diagram json')
          this.graph.fromJSON(this.diagramJson)
          this.graph.centerContent()
@@ -753,5 +603,25 @@
  }
</script>
<style>
  #timeDiagram {
    display: flex;
    border: 1px solid #dfe3e8;
    width: 100% !important;
  }
  #timeDiagram .x6-cell.x6-node {
    cursor: inherit;
  }
  .x6-graph-scroller.x6-graph-scroller-pannable {
    width: 100% !important;
  }

  .x6-widget-stencil {
    position: relative;
    height: 100%;
  }

  .x6-widget-stencil-content {
    position: relative;
    height: 100%;
  }
</style>