修改

jinlin

2024-11-19 195bb5267a6ece13363303e177fee7d1fa3941aa

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

@@ -13,18 +13,25 @@
            <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 v-model="dataForm.samplPeriod" readonly="false" style="width: 150px;vertical-align: baseline;">
              <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 v-model="dataForm.simulatFrequency" readonly="false" style="width: 150px;">
            </el-input>
          </zt-form-item>
          <zt-form-item>
            <zt-button @click="getDiagram(null)">查看时序图</zt-button>
<!--            <zt-button @click="graphRightTranslate()">画布右移</zt-button>-->
<!--            <zt-button @click="graphLeftTranslate()">画布左移</zt-button>-->
            <el-dropdown style="margin-left: 10px" @command="download">
              <el-button type="primary">
                下载xml<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="1">输入xml</el-dropdown-item>
                <el-dropdown-item command="2">输出xml</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </zt-form-item>
        </el-form>
        <div style="display: flex">
@@ -61,6 +68,8 @@
  import ModelView from "./ModelView";
  import textDiagram from "./textDiagram";
  import timeDiagramThumbnail from "./timeDiagramThumbnail"
  import qs from "qs";
  import Cookies from "js-cookie";


  export default {
@@ -134,14 +143,13 @@
    },
    created() {
      let scrollView = this.$refs['scrollView']
      window.addEventListener('scroll', this.handleScroll,true);
      window.addEventListener('scroll', this.handleScroll,{passive:false});
    },
    destroyed() {
      let scrollView = this.$refs['scrollView']
      window.removeEventListener('scroll', this.handleScroll,true);
      window.removeEventListener('scroll', this.handleScroll);
    },
    mounted() {
      // alert(`mounted执行了`)
      this.getProductList()
      this.init()
      this.$refs.textDiagram.init()
@@ -158,7 +166,6 @@
      handleScroll(){
        this.graph.getScrollbarPosition()
        let left = this.graph.getScrollbarPosition().left
        console.log(left,'left left')
        let top = this.graph.getScrollbarPosition().top
        this.$refs.textDiagram.setScroll(top)
        this.$refs.timeDiagramThumbnail.getNodePointX(left,this.bigWidth)
@@ -205,20 +212,6 @@
            minVisibleHeight:300,
            pannable: true,
          },
          // minimap: {
          //   enabled: true,
          //   container: document.getElementById('thumbnail'),
          //   scalable:false,
          //   width: document.documentElement.clientWidth - 400,
          //   height: 150,
          // },
          // mousewheel: {
          //   enabled: true,
          //   zoomAtMousePosition: true,
          //   modifiers: 'ctrl',
          //   minScale: 0.1,
          //   maxScale: 10,
          // },
          createEdge() {
            return new Shape.Edge({
              data: {
@@ -277,169 +270,12 @@
                textVerticalAnchor: 'middle',
                textWrap: {
                  text: '文字模板',
                  width: -10,      // 宽度减少 10px
                  width: 120,      // 宽度减少 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,
@@ -460,34 +296,12 @@
        })

        this.graph.on('blank:click', ({cell}) => {
          // this.reset()
          // this.type.value = "grid"
          this.type = 'grid'
          // this.id = cell.id
        })
        this.graph.on('translate', ({ tx, ty }) => {
          console.log(`当前偏移量位置: x=${tx}, y=${ty}`);
        });
        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}) => {
@@ -617,14 +431,9 @@
          this.diagramJson = JSON.parse(res.data.diagramJson)
          let textDiagramJson = JSON.parse(res.data.textDiagramJson)
          let smallDiagramJson = JSON.parse(res.data.smallDiagramJson)
          console.log(this.diagramJson, 'this.Diagram json')
          console.log(smallDiagramJson, 'smallDiagramJson')
          this.graph.fromJSON(this.diagramJson)
          // this.graph.centerContent()
          this.graph.positionContent('left',{ padding: { left: 0 }})
          // this.graph.zoomToFit()
          this.bigWidth = this.graph.getContentBBox().width
          console.log(this.bigWidth,'getContentBBox')
          // this.graph.resize(this.graph.getContentBBox().width,this.graph.getContentBBox().height)
          this.graph.freeze()
          this.$refs.textDiagram.getTextDiagram(textDiagramJson)
@@ -640,14 +449,22 @@
      },
      getPoint(x,smallWidth){
        let pointX = Number((x * (this.bigWidth / smallWidth )).toFixed(0))
        // console.log(pointX)
        this.graph.setScrollbarPosition(pointX, null)
        // if(pointX<600){
        // this.graph.setScrollbarPosition(pointX, null,  { animation: { duration: 400 }})
        // }else {
        //   this.graph.scrollToPoint(pointX, null, {animation: {duration: 400}})
        // }
      }
      },
      async download(selsect) {
        if(this.dataForm.id){
          let param = qs.stringify({
            'token': Cookies.get('token'),
            type: 'sxt',
            xml:selsect,
            id: this.dataForm.id
          })
          let apiURL = `/taskReliability/SimulatAssess/downloadXml`
          window.location.href = `${window.SITE_CONFIG['apiURL']}${apiURL}?${param}`
        }else{
          this.$alert('还未选择仿真记录')
        }
      },
    }
  }
</script>