anKeYuan-largeScreen-1080/src/views/LabStatus.vue

<template>
  <div class="lab-status-page">
    <ScreenHeader />
    <div class="page-body">
      <!-- 左列 -->
      <div class="col col-left">
        <BasicStats class="section s-basic" />
        <SafetyLevel class="section s-safety" />
        <PersonStats class="section s-person" />
      </div>
      <!-- 中列 -->
      <div class="col col-center">
        <videoStats class="section s-env"></videoStats>
        <div class="s-risk">
          <EnvSensing class="section s-env" style="margin-right:15px;" />
          <RiskWarning class="section s-env" />
        </div>
      </div>
      <!-- 右列 -->
      <div class="col col-right">
        <DeviceStats class="section " />
        <EquipmentStats class="section" />
        <ChemicalsStats class="section" />
      </div>
    </div>
  </div>
</template>

<script>
import ScreenHeader from '@/components/Header.vue'
import BasicStats from '@/components/LabStats/BasicStats.vue'
import SafetyLevel from '@/components/LabStats/SafetyLevel.vue'
import PersonStats from '@/components/LabStats/PersonStats.vue'
import EnvSensing from '@/components/LabStats/EnvSensing.vue'
import RiskWarning from '@/components/LabStats/RiskWarning.vue'
import DeviceStats from '@/components/LabStats/DeviceStats.vue'
import EquipmentStats from '@/components/LabStats/EquipmentStats.vue'
import videoStats from '@/components/LabStats/videoStats.vue'
import ChemicalsStats from '@/components/LabStats/ChemicalsStats.vue'

export default {
  name: 'LabStatus',
  components: {
    ScreenHeader, BasicStats, SafetyLevel, PersonStats,
    EnvSensing, RiskWarning, DeviceStats, EquipmentStats,
    videoStats, ChemicalsStats
  }
}
</script>

<style lang="scss" scoped>
.lab-status-page {
  width: 1920px;
  height: 1080px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.page-body {
  flex: 1;
  display: flex;
  gap: 14px;
  padding: 14px;
  overflow: hidden;
}

.col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.col-left, .col-right {
  width: 440px;
  flex-shrink: 0;
}

.col-center {
  flex: 1;
  min-width: 0;
}

// 左列: 基本情况 260px固定, 分级flex:1, 人数260px固定
.s-basic { height: 260px; flex-shrink: 0; }
.s-safety { flex: 1; }
.s-person { height: 260px; flex-shrink: 0; }

// 中列: 环境感知flex:1, 风险预警320px固定
.s-env { flex: 1; }
.s-risk { height: 320px; flex-shrink: 0;display: flex; }

// 右列: 设备统计和设备分类各一半，化学品固定高度
.s-device { flex: 1; }
.s-equip { flex: 1; }
.col-right .section:last-child { height: 272px; flex-shrink: 0; }
</style>