besure_web/src/views/report/dashboardPage/dashboard8/index.vue

<template>
  <div class="dashboard-container">
    <div class="bg-grid"></div>
    <div class="bg-scan"><div class="scan-line"></div></div>

    <DashboardHeader />

    <main>
      <div class="layout">
        <!-- 第一行 -->
        <el-row :gutter="10" class="row-1">
          <el-col :span="12">
            <!-- 产线任务看板 -->
            <TaskBoard />
          </el-col>
          <el-col :span="6">
            <!-- 日产能达成情况 -->
            <DayCapacity />
          </el-col>
          <el-col :span="6">
            <!-- 月产能达成情况 -->
            <MonthCapacity />
          </el-col>
        </el-row>

        <!-- 第二行 -->
        <el-row :gutter="10" class="row-2">
          <el-col :span="9">
            <!-- 周生产趋势 -->
            <WeekTrend />
          </el-col>
          <el-col :span="8">
            <!-- 开机率/稼动率趋势 -->
            <OpsTrend />
          </el-col>
          <el-col :span="7">
            <!-- 今日开机率/稼动率 -->
            <TodayOps />
          </el-col>
        </el-row>

        <!-- 第三行 -->
        <el-row :gutter="10" class="row-3">
          <el-col :span="8">
            <!-- 成品检合格率趋势图 -->
            <QualityTrend />
          </el-col>
          <el-col :span="8">
            <!-- 实时报警信息 -->
            <RealAlarm />
          </el-col>
          <el-col :span="8">
            <!-- 能耗周趋势 -->
            <EnergyTrend />
          </el-col>
        </el-row>
      </div>
    </main>
  </div>
</template>

<script setup lang="ts">
import DashboardHeader from './components/DashboardHeader.vue'
import TaskBoard from './components/TaskBoard.vue'
import DayCapacity from './components/DayCapacity.vue'
import MonthCapacity from './components/MonthCapacity.vue'
import WeekTrend from './components/WeekTrend.vue'
import OpsTrend from './components/OpsTrend.vue'
import TodayOps from './components/TodayOps.vue'
import QualityTrend from './components/QualityTrend.vue'
import RealAlarm from './components/RealAlarm.vue'
import EnergyTrend from './components/EnergyTrend.vue'
</script>

<style scoped>


@keyframes scanDown {
  0% { transform: translateY(-100%); }

  100% { transform: translateY(260%); }
}

@media (width <= 1366px) {
  /* Adjust if needed, but flex: 1 should handle it automatically */
}

.dashboard-container {
  --bg: #050816;
  --bg-deep: #020617;
  --card-bg: rgb(15 23 42 / 86%);
  --border: rgb(56 189 248 / 35%);
  --text: #e5f0ff;
  --muted: #94a3b8;
  --primary: #38bdf8;
  --accent: #22d3ee;
  --blue: #1e90ff;
  --green: #22c55e;
  --purple: #8b5cf6;
  --warn: #f59e0b;
  --danger: #ef4444;
  --gap: 10px;
  --header-h: 86px;

  position: relative;
  display: flex;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft Yahei", Arial, sans-serif;
  color: var(--text);
  background-color: var(--bg-deep);
  background-image:
    radial-gradient(circle at 20% 0, rgb(56 189 248 / 26%) 0, transparent 48%),
    radial-gradient(circle at 80% 110%, rgb(129 140 248 / 22%) 0, transparent 52%),
    linear-gradient(135deg, #020617 0%, #020617 45%, #020617 100%);
  flex-direction: column;
}

.bg-grid {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  background-image: linear-gradient(rgb(15 23 42 / 80%) 1px, transparent 1px),
                    linear-gradient(90deg, rgb(15 23 42 / 80%) 1px, transparent 1px);
  background-size: 70px 70px;
  opacity: 0.55;
  inset: 0;
}

.bg-scan {
  position: absolute;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  inset: 0;
}

.scan-line {
  position: absolute;
  top: -40%;
  left: 0;
  width: 100%;
  height: 40%;
  background: radial-gradient(circle at 50% 0, rgb(56 189 248 / 38%), transparent 70%);
  opacity: 0.5;
  filter: blur(32px);
  animation: scanDown 16s linear infinite;
}

main {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 0;
  padding: 8px var(--gap) var(--gap);
  flex: 1;
  flex-direction: column;
  gap: var(--gap);
}

.layout {
  display: flex;
  width: 100%; /* Ensure full width */
  max-width: 1920px;
  min-height: 0;
  margin: 0 auto;
  flex: 1;
  flex-direction: column;
  gap: var(--gap);
}

.row-1, .row-2, .row-3 {
  flex: 1 1 0; /* Ensure equal height distribution */
  min-height: 0;
  overflow: hidden; /* Prevent content from expanding the row */
}

/* Ensure el-col takes full height */
:deep(.el-col) {
  height: 100%;
}

/* Ensure card takes full height and ignores inline flex styles */
:deep(.card) {
  height: 100% !important;
  flex: none !important;
  box-sizing: border-box; /* Ensure padding/border doesn't add to height */
}

/* Fix chart containers if they are not sizing correctly */
:deep(.chart), :deep(.echarts) {
  width: 100% !important;
  height: 100% !important;
}

/* Define CSS Variables locally for this dashboard */
</style>