修改

jinlin

2024-08-12 05e2475068caa88b8f07b1836b862ffc3206d4d5

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

@@ -12,36 +12,55 @@
          <zt-form-item label="仿真记录" prop="simulatHis">
            <zt-select v-model="dataForm.id" :datas="simulatList" @change="onSimulatSelected"/>
          </zt-form-item>
          <zt-form-item label="采样周期" prop="samplPeriod">
            <el-input v-model="dataForm.samplPeriod" readonly="false">
            </el-input>
          </zt-form-item>
          <zt-form-item label="仿真次数" prop="simulatFrequency">
            <el-input v-model="dataForm.simulatFrequency" readonly="false">
            </el-input>
          </zt-form-item>
          <zt-form-item >
            <zt-button @click="getDiagram()">查看时序图</zt-button>
          </zt-form-item>
        </el-form>
        <div>
          <el-col :span="4">
            <div style="margin-right: 5px;height: calc(88vh - 100px)" v-if="isSelect">
              <product-model-tree @on-selected="onTreeSelected" showXdy="false"
                                  ref="ProductModelTree" :isShow="false" basic="5"/>
              <product-model-tree @on-selected="onTreeSelected"
                                  ref="ProductModelTree" :isShow="false" :productId="dataForm.productId"/>
            </div>
          </el-col>
          <el-col :span="20">
            <div style="margin-top: 20px">
              <div>
                <SimulatCurve ref="SimulatCurve"></SimulatCurve>
              <div id="timeDiagram" style="border: 1px solid #EAEBEE;border-radius: 6px;
        box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);">
              </div>
            </div>
          </el-col>
        </div>
      </div>
    </el-row>
    <el-dialog v-dialogDrag title="模型设计" top="1vh" width='95%' :visible.sync="dialogVisible2" v-if="dialogVisible2">
      <model-view ref="modelView"></model-view>
    </el-dialog>
  </div>
</template>

<script>
  import SimulatCurve from "./SimulatCurve";
  import ProductModelTree from "../basicInfo/ProductModelTree";
  import {Graph, Shape, Addon, Cell} from '@antv/x6'
  import ModelView from "./ModelView";


  export default {
    data() {
      return {
        knob:HTMLDivElement,
        dialogVisible2: false,
        timers: '',
        shape: '',
        isSelect: false,
        isShow: false,
        productList: [],
@@ -49,6 +68,42 @@
        taskList: [],
        MTBF: '',
        MTTR: '',
        diagramJson: '',
        graph: null,
        globalGridAttr: {
          type: 'mesh',
          size: 10,
          color: '#e5e5e5',
          thickness: 1,
          colorSecond: '#d0d0d0',
          thicknessSecond: 1,
          factor: 4,
          bgColor: '#e5e5e5',
          showImage: true,
          repeat: 'watermark',
          position: 'center',
          bgSize: JSON.stringify({width: 150, height: 150}),
          opacity: 0.1,

          stroke: '#5F95FF',
          strokeWidth: 1,
          connector: 'normal',
          label: '',
          nodeStroke: '#5F95FF',
          nodeStrokeWidth: 1,
          nodeFill: '#ffffff',
          nodeFontSize: 12,
          nodeColor: '#080808',
          nodeText: '',
          nodeDate: '',
          nodeUsers: '',
          nodeDataDate: '',
          nodeDataText: '',
          dataId: '',
          inspectName: '',
          distance: 0.5,
          angle: 0,
        },
        dataForm: {
          id: '',
          pid: '',
@@ -66,14 +121,383 @@
      this.getProductList()
    },
    components: {
      ModelView,
      ProductModelTree,
      SimulatCurve,
    },

    methods: {
      init() {
        console.log(document.documentElement.clientWidth, 'document.documentElement.clientWidth')
        console.log(document.documentElement.clientHeight, 'document.documentElement.clientHeight')
        this.graph = new Graph({
          container: document.getElementById('timeDiagram'),
          width: document.documentElement.clientWidth,
          height: document.documentElement.clientHeight - 220,
          // async: true,
          grid: {
            visible: true,
          },
          embedding: {
            enabled: true,
            findParent({node}) {
              const bbox = node.getBBox()
              return this.getNodes().filter((node) => {
                // 只有 data.parent 为 true 的节点才是父节点
                const data = node.getData()
                if (data && data.parent) {
                  const targetBBox = node.getBBox()
                  return bbox.isIntersectWithRect(targetBBox)
                }
                return false
              })
            }
          },
          autoResize: true,
          scroller: {
            enabled: true,
            pageVisible: true,
            pageBreak: true,
            pannable: true,
          },
          mousewheel: {
            enabled: true,
            zoomAtMousePosition: true,
            modifiers: 'ctrl',
            minScale: 0.1,
            maxScale: 10,
          },
          createEdge() {
            return new Shape.Edge({
              data: {
                id: '',
                status: '',
                startTime:'',
                endTime: '',
              },
              attrs: {
                line: {
                  stroke: '#A2B1C3',
                  strokeWidth: 2,
                  sourceMarker: 'none',
                  targetMarker: 'none'
                }
              },
              tools: {
                name: 'vertices',
              },
              zIndex: 0,
            })
          },
          keyboard: true,
        })
        this.knob = document.createElement('div',false)
        this.knob.style.position = 'absolute'
        document.getElementById('timeDiagram').appendChild(this.knob)
        this.graph.centerContent()

        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',
              },
              text: {
                fontSize: 20,
                fill: '#262626',
              },
            },
            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,
        )
// zoom
        this.graph.bindKey(['ctrl+1', 'meta+1'], () => {
          const zoom = this.graph.zoom()
          if (zoom < 1.5) {
            this.graph.zoom(0.1)
          }
        })

        this.graph.bindKey(['ctrl+2', 'meta+2'], () => {
          const zoom = this.graph.zoom()
          if (zoom > 0.5) {
            this.graph.zoom(-0.1)
          }
        })

        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}) => {
          // this.type.value = cell.isNode() ? "node" : "edge"
          this.type = cell.isNode() ? 'node' : 'edge'
          this.shape = cell.shape
          this.id = cell.id
          console.log(this.shape, 'this.shape')
          // this.nodeOpt(this.id, this.globalGridAttr)
        })
        //单击边节点
        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}) => {
          // this.reset()
          if (node.getData().dataId) {
            this.dialogVisible2 = true
            let param = {
              id: node.getData().dataId,
              modelName: node.attr('label/textWrap/text'),
            }
            this.$nextTick(() => {
              this.$refs.modelView.init(param)
            })
          }
        })

        this.graph.on('node:customevent', ({name, view, e}) => {
          if (name === 'node:delete') {
            e.stopPropagation()
            view.cell.remove()
          }
        })

        // 鼠标移入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')
            }
          }
        })
// 鼠标移出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 = {
@@ -93,14 +517,34 @@
        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
        }
        if (!this.dataForm.id) {
          this.$alert("请先选择具体仿真记录")
          return
        }
        let params = {
          productId: this.dataForm.productId,
          productId: data.id,
          taskId: this.dataForm.taskModelId,
          fzId: '1722218139013042135'
          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)
      },
      // 获取信息
@@ -110,6 +554,10 @@
        this.dataForm.productId = data.id
        this.getTaskList()
        this.dataForm.taskModelId = ''
        this.$nextTick(() => {
          this.$refs.ProductModelTree.getProductList()
        })
        this.init()
      },
      onTaskSelected(data) {
        console.log(data, ' onProductSelected(data)')
@@ -117,14 +565,63 @@
        this.getSimulatList()
        this.dataForm.id = ''
      },
      onSimulatSelected(data) {
      async onSimulatSelected(data) {
        this.dataForm.id = data.id
        this.dataForm.samplPeriod = data.samplPeriod
        this.$refs.SimulatCurve.initEcharts(this.dataForm);
        let param = {
          id: this.dataForm.id,
          taskModelId: this.dataForm.taskModelId
        }
        let result = await this.$http.get('/taskReliability/SimulatAssess/getSimulatParams', {params: param})
        this.dataForm.samplPeriod = result.data.samplPeriod
        this.dataForm.simulatFrequency = result.data.simulatFrequency
      },
      async getDiagram() {
        this.graph.unfreeze()
        let params = {
          productId: this.dataForm.productId,
          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)
      },
    }
  }
</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>