2021-7-21 重新布局

最新推荐文章于 2023-12-04 15:22:09 发布

步入中年的狗

最新推荐文章于 2023-12-04 15:22:09 发布

阅读量96

点赞数

本文链接：https://blog.csdn.net/m0_52458664/article/details/119090982

版权

该博客记录了2021年7月21日进行的布局更新，重点是实现新的布局设计，包括使滚动条出现在左侧，并确保文字靠左排列而不会与滚动条冲突，特别是对于页面底部的内容进行了调整。

摘要由CSDN通过智能技术生成

81 重新布局

写一下新的布局，还有让滚动条在左边显示，文字靠左不冲突（最下面那个）。

<template>
  <div class="content">
    <div class="button-group">
      <a-button type="primary">修改计算节点</a-button>
      <a-button type="primary" @click="redraw" style="margin-left:2px"
        >清空画布</a-button
      >
      <a-button type="primary" @click="layout" style="margin-left:2px"
        >重排</a-button
      >
      <a-button type="primary" @click="vertify" style="margin-left:2px"
        >验证</a-button
      >
      <a-button type="primary" @click="out" style="margin-left:2px"
        >生成Graph</a-button
      >
    </div>
    <div class="right">
      <div class="title">
        <a-drawer
          title="节点设置"
          placement="right"
          :closable="false"
          :visible="visible"
          :get-container="false"
          :wrap-style="{ position: 'absolute' }"
          @close="onClose"
        >
          <p>Some contents...</p>
        </a-drawer>
        <div style="background-color: #f5f5f5;height:100%;">
          <div class="app-model-title">
            <span>基本信息</span>
          </div>
          <a-form :model="graphTitle" style="margin-left:10px">
            <a-form-item label="Graph名称">
              <a-input v-model:value="graphTitle.name" />
            </a-form-item>
            <a-form-item label="备注信息">
              <a-input v-model:value="graphTitle.name" />
            </a-form-item>
          </a-form>
        </div>
      </div>
      <div class="app-model">
        <!-- <div class="app-model-button">
        <a-button type="primary" style="width:210px">修改计算节点</a-button>
      </div> -->
        <div class="app-model-title">
          <span>已选择模型</span>
        </div>
        <div class="app-model-content">
          <a-list
            class="demo-loadmore-list"
            item-layout="horizontal"
            :data-source="data"
          >
            <template #renderItem="{ item }">
              <a-list-item>
                <template #actions>
                  <a @click="copy">复制路径</a>
                  <a @click="copy">删除</a>
                </template>
                <a-list-item-meta>
                  <template #title>
                    <a>{
   {
    item.name }}</a>
                  </template>
                </a-list-item-meta>
              </a-list-item>
            </template>
          </a-list>
        </div>
      </div>
    </div>
    <!-- <div class="app-minimap" ref="minimapContainer"></div> -->
    <div class="middle" ref="container"></div>
    <div class="left">
      <div class="app-minimap" ref="minimapContainer"></div>
      <div class="app-stencil" ref="stencilContainer">
        <!-- <div class="node-button">
        <a-button type="primary" style="width:210px">修改计算节点</a-button>
      </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import {
    Graph, Shape, Addon, ToolsView, Vector } from '@antv/x6'
import {
    DagreLayout } from '@antv/layout'
import {
    detectDirectedCycle } from '@antv/algorithm'
// import { detectDirectedCycle, detectAllCycles } from '@antv/algorithm'
const {
    Stencil } = Addon
const {
    Rect, Edge } = Shape
export default {
   
  name: 'ModelConversionEditGraph',
  data () {
   
    return {
   
      graph: {
   },
      stencil: {
   },
      draw: {
   },
      firstnode: {
   },
      model: {
   },
      circleNodeArr: [],
      stretchedCell: [],
      portHeight: 0,
      data: [{
    name: 'hhw' }, {
    name: 'uiui' }],
      visible: false,
      graphTitle: {
    name: 'geppppswe' },
      edittingnode: null,
      token: null,
      view: null,
      animation: false
    }
  },
  mounted () {
   
    // this.getStencilNodes()
    // this.getDefaultNodes()
    this.load().then(() => {
   
      this.loadStencilNodes()
      // this.drawDefaultNodes()
    })
  },
  methods: {
   
    onClose () {
   
      this.visible = false
    },
    copy () {
   
      console.log('this.token', this.token)
    },
    createDiv ({
     cell }) {
   
      cell.attr('body', 'none')
      const background = cell.attrs.rect.fill
      const stretchedCells = document.getElementsByClassName('x6-cell x6-node')
      const stretchedCell = []
      for (const i in stretchedCells) {
   
        if (stretchedCells[i].dataset) {