Vue实现分割监控页面

Vue实现分割监控页面

使用Vue Grid Layout库

Vue Grid Layout是一个基于Gridster的响应式拖拽网格布局库，适合构建监控面板。安装依赖：

npm install vue-grid-layout --save

示例代码实现可拖拽分割布局：

<template>
  <div>
    <grid-layout
      :layout.sync="layout"
      :col-num="12"
      :row-height="30"
      :is-draggable="true"
      :is-resizable="true"
    >
      <grid-item
        v-for="item in layout"
        :x="item.x"
        :y="item.y"
        :w="item.w"
        :h="item.h"
        :i="item.i"
        :key="item.i"
      >
        <component :is="item.component" />
      </grid-item>
    </grid-layout>
  </div>
</template>

<script>
import VueGridLayout from 'vue-grid-layout'
import CPUChart from './components/CPUChart.vue'
import MemoryChart from './components/MemoryChart.vue'

export default {
  components: {
    GridLayout: VueGridLayout.GridLayout,
    GridItem: VueGridLayout.GridItem,
    CPUChart,
    MemoryChart
  },
  data() {
    return {
      layout: [
        { x:0, y:0, w:6, h:8, i:'0', component: 'CPUChart' },
        { x:6, y:0, w:6, h:8, i:'1', component: 'MemoryChart' }
      ]
    }
  }
}
</script>

使用CSS Grid布局

纯CSS方案实现基础分割布局：

<template>
  <div class="monitor-container">
    <div class="panel cpu-panel"><CPUChart /></div>
    <div class="panel memory-panel"><MemoryChart /></div>
    <div class="panel network-panel"><NetworkChart /></div>
  </div>
</template>

<style scoped>
.monitor-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 300px 300px;
  gap: 16px;
}

.cpu-panel {
  grid-column: 1;
  grid-row: 1 / span 2;
}

.memory-panel {
  grid-column: 2;
  grid-row: 1;
}

.network-panel {
  grid-column: 2;
  grid-row: 2;
}
</style>

动态调整布局方案

通过Vue响应式数据实现布局切换：

<script>
export default {
  data() {
    return {
      layoutMode: 'horizontal', // 可选: horizontal/vertical/grid
      panels: [
        { id: 'cpu', visible: true },
        { id: 'memory', visible: true },
        { id: 'network', visible: false }
      ]
    }
  },
  computed: {
    containerClass() {
      return {
        'horizontal-split': this.layoutMode === 'horizontal',
        'vertical-split': this.layoutMode === 'vertical',
        'grid-split': this.layoutMode === 'grid'
      }
    }
  },
  methods: {
    togglePanel(panelId) {
      const panel = this.panels.find(p => p.id === panelId)
      panel.visible = !panel.visible
    }
  }
}
</script>

集成Split.js库

实现可拖动调整大小的分割面板：

npm install split.js

组件实现：

<template>
  <div ref="splitContainer" class="split-container">
    <div class="split-panel"><CPUChart /></div>
    <div class="split-panel"><MemoryChart /></div>
  </div>
</template>

<script>
import Split from 'split.js'

export default {
  mounted() {
    Split([this.$refs.splitContainer], {
      sizes: [50, 50],
      minSize: 200,
      gutterSize: 8
    })
  }
}
</script>

<style>
.split-container {
  display: flex;
  height: 100vh;
}

.gutter {
  background-color: #eee;
  background-repeat: no-repeat;
  background-position: 50%;
}
</style>

响应式布局处理

添加窗口尺寸监听实现自适应：

<script>
export default {
  data() {
    return {
      windowWidth: window.innerWidth
    }
  },
  created() {
    window.addEventListener('resize', this.handleResize)
  },
  destroyed() {
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    handleResize() {
      this.windowWidth = window.innerWidth
      this.adjustLayout()
    },
    adjustLayout() {
      if (this.windowWidth < 768) {
        this.layoutMode = 'vertical'
      } else {
        this.layoutMode = 'horizontal'
      }
    }
  }
}
</script>