修改

jinlin

2024-10-09 f76e09f832e71b29c7b7771c1d0aaa5858f9a20f

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

@@ -2,7 +2,7 @@
  <div class="fa-card-a">
    <el-row :gutter="5">
      <div class="mod-taskReliability-simulatAssess">
        <el-form :inline="true" :model="dataForm" ref="dataForm" :disabled="dataForm.disabled" label-width="80px">
        <el-form :inline="true" :model="dataForm" ref="dataForm" :disabled="dataForm.disabled">
          <zt-form-item label="产品节点" prop="productId">
            <zt-select v-model="dataForm.productId" :datas="productList" @change="onProductSelected"/>
          </zt-form-item>
@@ -12,16 +12,17 @@
          <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">
          <zt-form-item label="时间分片" prop="samplPeriod">
            <el-input v-model="dataForm.samplPeriod" readonly="false">
              <template slot="append">分钟</template>
            </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>
            <zt-button @click="getDiagram(null)">查看时序图</zt-button>
          </zt-form-item>
        </el-form>
        <div>
@@ -41,7 +42,7 @@
        </div>
      </div>
    </el-row>
    <el-dialog v-dialogDrag title="模型设计" top="1vh" width='95%' :visible.sync="dialogVisible2" v-if="dialogVisible2">
    <el-dialog v-dialogDrag :title="title" top="1vh" width='95%' :visible.sync="dialogVisible2" v-if="dialogVisible2">
      <model-view ref="modelView"></model-view>
    </el-dialog>
  </div>
@@ -57,7 +58,8 @@
  export default {
    data() {
      return {
        knob:HTMLDivElement,
        title: '',
        knob: HTMLDivElement,
        dialogVisible2: false,
        timers: '',
        shape: '',
@@ -135,7 +137,7 @@
          height: document.documentElement.clientHeight - 220,
          // async: true,
          grid: {
            visible: true,
            visible: false,
          },
          embedding: {
            enabled: true,
@@ -171,7 +173,7 @@
              data: {
                id: '',
                status: '',
                startTime:'',
                startTime: '',
                endTime: '',
              },
              attrs: {
@@ -190,7 +192,7 @@
          },
          keyboard: true,
        })
        this.knob = document.createElement('div',false)
        this.knob = document.createElement('div', false)
        this.knob.style.position = 'absolute'
        document.getElementById('timeDiagram').appendChild(this.knob)
        this.graph.centerContent()
@@ -442,8 +444,9 @@
            this.dialogVisible2 = true
            let param = {
              id: node.getData().dataId,
              modelName: node.attr('label/textWrap/text'),
              modelName: node.attr('label/textWrap/modelName'),
            }
            this.title = node.attr('label/textWrap/modelName') + "模型设计"
            this.$nextTick(() => {
              this.$refs.modelView.init(param)
            })
@@ -458,22 +461,22 @@
        })

        // 鼠标移入edge节点
        this.graph.on('edge:mouseenter', ({edge,e}) => {
        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') {
            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(()=>{
              setTimeout(() => {
                style.display = 'block'
                style.left = `${p.x}px`
                style.top = `${p.y}px`
                style.width = 200+ 'px'
                style.width = 200 + 'px'
                style.height = 80 + 'px'
                style.textAlign = 'center'
                style.background = '#000'
@@ -481,9 +484,9 @@
                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')
              }, 0)
              console.log(p, 'p p p')
              console.log(style, this.knob, 'style style')
            }
          }
        })
@@ -497,6 +500,7 @@
      async getProductList() {
        let res = await this.$http.get('/basicInfo/XhProductModel/getTaskProductList')
        this.productList = res.data
        this.onProductSelected(this.productList[0])
      },
      async getTaskList() {
        let params = {
@@ -508,44 +512,13 @@
      },
      async getSimulatList() {
        let params = {
          productId: this.dataForm.productId,
          taskModelId: this.dataForm.taskModelId
        }
        let res = await this.$http.get('/taskReliability/SimulatAssess/getSimulatList', {params: params})
        console.log(res.data)
        this.simulatList = res.data
      },
      async onTreeSelected(data) {
        this.graph.unfreeze()
        if (!this.dataForm.taskModelId) {
          this.$alert("请先选择具体任务")
          return
        }
        if (!this.dataForm.id) {
          this.$alert("请先选择具体仿真记录")
          return
        }
        let params = {
          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)
      },

      // 获取信息
      onProductSelected(data) {
        this.isSelect = true
@@ -575,25 +548,30 @@
        this.dataForm.samplPeriod = result.data.samplPeriod
        this.dataForm.simulatFrequency = result.data.simulatFrequency
      },
      async getDiagram() {
      async onTreeSelected(data) {
        await this.getDiagram(data.id)
      },
      async getDiagram(productId) {
        this.graph.unfreeze()
        let params = {
          productId: this.dataForm.productId,
          productId: productId ? productId : this.dataForm.productId,
          taskId: this.dataForm.taskModelId,
          fzId: this.dataForm.id
          fzId: this.dataForm.id,
          smallWidth: 1000,
          minPointNum: 5
        }
        let res = await this.$http.get('/taskReliability/SimulatAssess/getStatus', {params: params})
        if (res.data !== null) {
          this.diagramJson = JSON.parse(res.data)
          this.diagramJson = JSON.parse(res.data.smallDiagramJson)
          console.log(this.diagramJson, 'this.Diagram json')
          this.graph.fromJSON(this.diagramJson)
          this.graph.centerContent()
          this.graph.zoomToFit()
          //this.graph.zoomToFit()
          this.graph.freeze()
        } else {
          this.graph.fromJSON(this.emptyJson)
          this.graph.centerContent()
          this.graph.zoomToFit()
          //this.graph.zoomToFit()
          this.graph.freeze()
        }
        console.log(res.data)
@@ -607,9 +585,11 @@
    border: 1px solid #dfe3e8;
    width: 100% !important;
  }

  #timeDiagram .x6-cell.x6-node {
    cursor: inherit;
  }

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