kd-aiot-frontend-vis/src/views/bpm/vis-page/productionDailyDashboard.vue

<template>
  <vue-fullscreen
    class="box-container"
    v-cloak
    v-model="isFullscreen"
    fullscreenClass="box-container"
    :exit-on-click-wrapper="false"
  >
    <div class="box-container" v-cloak>
      <div class="box-header">
        <div class="logo">
          <el-select
              style="width: 100%"
              v-model="teamId"
              placeholder="请选择"
              @change="changeTeam"
            >
              <el-option
                v-for="item in teamList"
                :key="item.id"
                :label="item.name"
                :value="item.value"
              >
              </el-option>
            </el-select>
        </div>
        <div class="title">班组生产日综合看板</div>
        <div class="time">
          <div class="time-display">
            <span class="date-text">{{ date }}</span>
            <span class="time-text">{{ time }}</span>
            <span class="week-text">{{ week }}</span>
          </div>
          <span class="fullscreen-toggle" @click.passive="onFullscreen">
            <i
              v-if="isFullscreen"
              title="取消全屏"
              class="el-icon-_screen-restore"
            ></i>
            <i v-else title="全屏" class="el-icon-_screen-full"></i>
          </span>
        </div>
      </div>

      <div class="box-middle">
        <div class="box-middle-sidebar left-sidebar">
          <!-- 当日生产数量卡片 -->
          <div class="card-container">
            <chart-card
              title="当日生产数量"
              size="small"
            >
              <div class="number-display-container">
                <div class="number-display">
                  <!-- 十万位 -->
                  <div class="unit-box">
                    <span class="unit">十万</span>
                    <div class="digit-box">
                      <span class="digit">{{ productionData.transformQuantity[0] }}</span>
                    </div>
                  </div>
                  <!-- 万位 -->
                  <div class="unit-box">
                    <span class="unit">万</span>
                    <div class="digit-box">
                      <span class="digit">{{ productionData.transformQuantity[1] }}</span>
                    </div>
                  </div>
                  <!-- 千位 -->
                  <div class="unit-box">
                    <span class="unit">千</span>
                    <div class="digit-box">
                      <span class="digit">{{ productionData.transformQuantity[2] }}</span>
                    </div>
                  </div>
                  <!-- 千位分隔符 -->
                  <div class="separator">,</div>
                  <!-- 百位 -->
                  <div class="unit-box">
                    <span class="unit"></span>
                    <div class="digit-box">
                      <span class="digit">{{ productionData.transformQuantity[3] }}</span>
                    </div>
                  </div>
                  <!-- 十位 -->
                  <div class="unit-box">
                    <span class="unit"></span>
                    <div class="digit-box">
                      <span class="digit">{{ productionData.transformQuantity[4] }}</span>
                    </div>
                  </div>
                  <!-- 个位 -->
                  <div class="unit-box">
                    <span class="unit"></span>
                    <div class="digit-box">
                      <span class="digit">{{ productionData.transformQuantity[5] }}</span>
                    </div>
                  </div>
                </div>

                <!-- 生产统计项 -->
                <div class="card-stats">
                  <div class="stat-item-container">
                    <div class="stat-icon">
                      <img src="@/assets/png/Group.png" alt="要求生产" />
                    </div>
                    <div class="stat-info">
                      <div class="stat-label">要求生产总数量：</div>
                      <div
                        ><span class="stat-value">{{ productionData.totalQuantity }}</span
                        >
                        </div
                      >
                    </div>
                  </div>
                  <div class="stat-item-container">
                    <div class="stat-icon">
                      <img src="@/assets/png/Group.png" alt="达成率" />
                    </div>
                    <div class="stat-info">
                      <div class="stat-label">生产达成率：</div>
                      <div><span class="stat-value">{{ productionData.quantityAchievementRate || 0 }}</span></div>
                    </div>
                  </div>
                </div>
              </div>
            </chart-card>
          </div>

          <div class="card-container">
            <!-- 各工序生产数量卡片 -->
            <!-- <chart-card
              title="各工序生产数量"
              size="small"
            >
              <bar-chart
                :data="eachProcessOnDutyNum"
                class="process-chart-container"
              ></bar-chart>
            </chart-card> -->
                   <div class="content-top-container" style="height: 100%;">
            <chart-card
              title="生产工单进度"
              size="small"
            >
              <div class="content-table" v-if="isFlag">
                <table class="main-table">
                  <colgroup>
                    <col style="width: 12%"></col>
                    <col style="width: 15%"></col>
                    <col style="width: 13%"></col>
                    <col style="width: 13%"></col>
                    <col style="width: 12%"></col>
                    <col style="width: 15%"></col>
                    <col style="width: 15%"></col>
                    <col style="width: 15%"></col>
                  </colgroup>
                  <thead>
                    <tr>
                      <th style="width: 12%">生产工单号</th>
                      <th style="width: 15%">产品名称</th>
                      <th style="width: 13%">要求完成数量</th>
                      <th style="width: 13%">已完成数量</th>
                      <th style="width: 12%">生产达成率</th>
                      <th style="width: 15%">计划开始时间</th>
                      <th style="width: 15%">计划结束时间</th>
                      <th style="width: 15%">当前工序</th>
                    </tr>
                  </thead>
                </table>
                <div class="scroll-container">
                  <vue-seamless-scroll :data="tableData" :class-option="classOption">
                    <table class="main-table">
                      <colgroup>
                        <col style="width: 12%"></col>
                        <col style="width: 15%"></col>
                        <col style="width: 13%"></col>
                        <col style="width: 13%"></col>
                        <col style="width: 12%"></col>
                        <col style="width: 15%"></col>
                        <col style="width: 15%"></col>
                        <col style="width: 15%"></col>
                      </colgroup>
                      <tbody>
                        <!-- 非红色行（State=N） -->
                        <tr
                          v-for="item in tableData"
                          :key="`scroll-${item.productionOrderNumber}`"
                          class="table-row"
                          :style="{ backgroundColor: item.isDelayed === 1 ? '#ff4d4f' : '#031d42' }"
                        >
                          <td class="table-cell">{{ item.productionOrderNumber }}</td>
                          <td class="table-cell">{{ item.productName }}</td>
                          <td class="table-cell">{{ item.requestProductionQuantity }}</td>
                          <td class="table-cell">{{ item.completedQuantity }}</td>
                          <td class="table-cell">{{ item.productionAchievementRate }}</td>
                          <td class="table-cell">{{ item.plannedStartTime }}</td>
                          <td class="table-cell">{{ item.plannedEndTime }}</td>
                          <td class="table-cell">{{ item.currentProcess }}</td>
                        </tr>
                      </tbody>
                    </table>
                  </vue-seamless-scroll>
                  <!-- 无数据时显示占位 -->
                  <div v-if="fixedRows.length === 0 && scrollRows.length === 0">
                    <div class="empty-cell"> 暂无生产工单数据 </div>
                  </div>
                </div>
              </div>
            </chart-card>
          </div>
          </div>

          <div class="card-container">
            <!-- 产品生产数量TOP10 -->
            <chart-card
              title="各工序生产达成率"
              size="large"
            >
              <!-- <product-top10-chart
                :data="productionAchievementRate"
                class="product-top10-chart-container"
              ></product-top10-chart> -->
              <qualification-rate-chart
                :data="productionAchievementRate"
                class="process-chart-container"
              ></qualification-rate-chart>
            </chart-card>
          </div>
        </div>

        <div class="box-middle-content">
          <div class="content-card-container">
            <!-- 当日生产情况 -->
            <div class="sidebar-card">
              <div class="card-header">
                <div class="card-logo">
                  <img src="@/assets/png/icon.png" alt="图标" />
                </div>
                <div class="card-title">当日生产情况</div>
              </div>
              <div class="content-empty">
                <div class="Remark"
                  >注：工单达成率=已完成工单数量/（已延期+生产中+已完成）工单数量</div
                >
                <div class="content-box">
                  <div class="box-item">
                    <div class="item-img">{{ productionData.delayNumber }}</div>
                    <div class="item-text">已延期生产单数</div>
                  </div>
                  <div class="box-item">
                    <div class="item-img">{{ productionData.achievementRate || 0 }}</div>
                    <div class="item-text">工单达成率</div>
                  </div>
                  <div class="box-item">
                    <div class="item-img">{{ productionData.numberToBeProduced || 0 }}</div>
                    <div class="item-text">待生产单数</div>
                  </div>
                </div>
              </div>
            </div>
          </div>


          <div class="content-top-container" style="height: 56vh">
            <chart-card
              title="工位任务单"
              size="small"
            >
              <div class="content-table" v-if="isFlag">
                <table class="main-table">
                  <colgroup>
                        <col style="width: 10%"></col>
                        <col style="width: 10%"></col>
                        <col style="width: 14%"></col>
                        <col style="width: 14%"></col>
                        <col style="width: 15%"></col>
                        <col style="width: 15%"></col>
                        <col style="width: 15%"></col>
                        <col style="width: 10%"></col>
                        <col style="width: 10%"></col>
                        <col style="width: 15%"></col>
                  </colgroup>
                  <thead>
                    <tr>
                      <th style="width: 10%">任务编号</th>
                      <th style="width: 10%">计划编号</th>
                      <th style="width: 14%">执行对象名称</th>
                      <th style="width: 14%">产品编码</th>
                      <th style="width: 15%">产品名称</th>
                      <th style="width: 15%">班组名称</th>
                      <th style="width: 15%">工序名称</th>
                      <th style="width: 10%">任务数量</th>
                      <th style="width: 10%">报工数量</th>
                      <th style="width: 15%">报工时间</th>
                    </tr>
                  </thead>
                </table>
                <div class="scroll-container">
                  <vue-seamless-scroll :data="tableData1" :class-option="classOption">
                    <table class="main-table">
                      <colgroup>
                        <col style="width: 10%"></col>
                        <col style="width: 10%"></col>
                        <col style="width: 14%"></col>
                        <col style="width: 14%"></col>
                        <col style="width: 15%"></col>
                        <col style="width: 15%"></col>
                        <col style="width: 15%"></col>
                        <col style="width: 10%"></col>
                        <col style="width: 10%"></col>
                        <col style="width: 15%"></col>
                      </colgroup>
                      <tbody>
                        <!-- 非红色行（State=N） -->
                        <tr
                          v-for="item in tableData1"
                          :key="`scroll-${item.productionPlanCode}`"
                          class="table-row"
                        
                        >
                          <td class="table-cell">{{ item.assigneeCode }}</td>
                          <td class="table-cell">{{ item.productionPlanCode }}</td>
                          <td class="table-cell">{{ item.assigneeName }}</td>
                          <td class="table-cell">{{ item.productCode }}</td>
                          <td class="table-cell">{{ item.productName }}</td>
                          <td class="table-cell">{{ item.assignTeamName }}</td>
                          <td class="table-cell">{{ item.taskName }}</td>
                          <td class="table-cell">{{ item.quantity }}</td>
                          <td class="table-cell">{{ item.reportQuantity }}</td>
                          <td class="table-cell">{{ item.reportTime }}</td>
                        </tr>
                      </tbody>
                    </table>
                  </vue-seamless-scroll>
                  <!-- 无数据时显示占位 -->
                  <div v-if="tableData1.length === 0">
                    <div class="empty-cell"> 暂无任务单数据 </div>
                  </div>
                </div>
              </div>
            </chart-card>
          </div>
        </div>

        <div class="box-middle-sidebar right-sidebar">
          <div class="card-container">
              <chart-card
              title="各工序生产数量"
              size="small"
            >
              <bar-chart
                :data="eachProcessOnDutyNum"
                class="process-chart-container"
              ></bar-chart>
            </chart-card>
            <!-- 设备实时状态 -->
            <!-- <chart-card
              title="设备实时状态"
              size="small"
            >
              <device-status-chart
                :data="eachProcessEquipmentNum"
                class="process-chart-container"
              ></device-status-chart>
            </chart-card> -->
          </div>

          <div class="card-container">
            <!-- 设备实时状态 -->
            <chart-card
              title="各工序报工数"
              size="small"
            >
              <!-- <device-status-chart
                :data="productQualificationNum"
                class="process-chart-container"
              ></device-status-chart> -->
              <bar-chart
                :data="productQualificationNum"
                class="process-chart-container"
              ></bar-chart>
            </chart-card>
          </div>

          <div class="card-container">
            <!-- 各产品合格率 -->
            <chart-card
              title="各工序损耗率"
              size="large"
            >
              <qualification-rate-chart
                :data="productQualificationRate"
                class="qualification-rate-chart-container"
              ></qualification-rate-chart>
            </chart-card>
          </div>
        </div>
      </div>
    </div>
  </vue-fullscreen>
</template>

<script>
import { component as VueFullscreen } from 'vue-fullscreen';
import { toggleFullscreen } from 'ele-admin';
import { getTeamProductionDayDataOne, getTeamProductionDayDataThree, getTeamProductionDayDataTwo, queryTeamListAll ,pageByCurrentUserTeam} from '@/api/vis/productionDailyDashboard';
// 导入图表组件
import ChartCard from './components/ChartCard';
import ProcessPersonnelChart from './components/charts/ProcessPersonnelChart';
import DeviceStatusChart from './components/charts/DeviceStatusChart';
import ProductTop10Chart from './components/charts/ProductTop10Chart';
import QualificationRateChart from './components/charts/QualificationRateChart';
import BarChart from './components/charts/BarChart';
import vueSeamlessScroll from "vue-seamless-scroll";

export default {
  name: 'DashboardFramework',
  components: {
    VueFullscreen,
    ChartCard,
    ProcessPersonnelChart,
    DeviceStatusChart,
    ProductTop10Chart,
    QualificationRateChart,
    BarChart,
    vueSeamlessScroll
  },
  computed: {
    classOption() {
        return {
            step: 0.5, // 数值越大速度滚动越快
            limitMoveNum: 5, // 开始无缝滚动的数据量
            hoverStop: true, // 是否开启鼠标悬停stop
            direction: 1, // 0向下 1向上 2向左 3向右
            openWatch: true, // 开启数据实时监控刷新dom
            singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) 
            singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) 
            waitTime: 5000, // 单步运动停止的时间(默认值1000ms)
        };
    },
    contentWidth() {
      return this.$store.state.theme.contentWidth || '100%';
    },
    // 固定行：红色行（State=Y）是否已延期（0：否；1：是）
    fixedRows() {
      return this.tableData.filter((item) => item.isDelayed == 1);
    },
    // 非红色行：State=N
    scrollRows() {
      return this.tableData.filter((item) => item.isDelayed == 0);
    },
  },
  watch: {
    isFullscreen: {
      handler() {
        this.isFlag = false;
        this.$nextTick(() => {
          this.isFlag = true;
        });
      },
      immediate: true
    },
    contentWidth: {
      handler() {
        clearTimeout(this.resizeTimer);
        this.isFlag = false;
        this.resizeTimer = setTimeout(() => {
          this.$nextTick(() => {
            this.isFlag = true;
          });
        }, 300);
      },
      immediate: true
    }
  },
  data() {
    return {
      isFullscreen: false,
      isFlag: false,
      resizeTimer: null,
      updateTimer: null,
      date: '',
      time: '',
      week: '',
      teamId: '',

      // 生产工单表格数据
      tableData: [],
      tableData1: [],

      productionData: {
        quantity: 0, // 当日生产数量（核心数据）
        weight: 0, // 当日生产重量（核心数据）
        transformQuantity: 0, // 转换后的生产数量
        transformWeight: 0, // 转换后的生产重量
        delayNumber: 0,
        noPassRate: 0,
        passRate: 0,
        quantity: 0,
        quantityAchievementRate: 0,
        totalQuantity: 0,
        totalWeight: 0,
        weight: 0,
        weightAchievementRate: 0
      },

      // 各工序生产数量
      eachProcessOnDutyNum: [],
      // 设备实时状态数据
      eachProcessEquipmentNum: [],
      // 产品生产数量TOP10数据
      productionAchievementRate: {
        productNames: [],
        rates: [] // 生产达成率（%）
      },
      // 各工序报工合格数量
      productQualificationNum: [],
      // 各产品合格率数据
      productQualificationRate: {
        productNames: [],
        rates: [] // 合格率（%）
      },
      teamList: [],
    };
  },
  created() {
    this.updateTime();
    this.updateTimer = setInterval(this.updateTime, 1000);
  },
  mounted() {
    this.queryTeamList();

    this.$nextTick(() => {
      this.isFlag = true;
    });
  },
  beforeDestroy() {
    clearInterval(this.updateTimer);
    clearTimeout(this.resizeTimer);
  },
  methods: {
    // 查询当前用户所属班组
    queryTeamList() {
      queryTeamListAll({
        pageNum: 1,
        pageSize: 1000
      }).then((res) => {
        console.log(res.list);
        // if (res) {
        if (!res || res.list.length == 0) {
          this.$message({
            message: '当前用户没有所属班组',
            type: 'warning'
          });
          return;
        }
        this.teamList = res.list.map(item => {
          return {
            name: item.name,
            value: item.id
          }
        });
        console.log('teamList~~~', this.teamList);

        this.teamId = this.teamList[0].value;
        console.log('teamId~~~', this.teamId);
        this.changeTeam();
        // this.getTeamProductionDayDataOneData();
        // this.getTeamProductionDayDataTwoData();
        // this.getTeamProductionDayDataThreeData();
      }).catch((error) => {
        console.error('获取班组列表失败:', error);
      });
    },
    // 选择班组
    changeTeam() {
      this.getTeamProductionDayDataOneData();
      this.getTeamProductionDayDataTwoData();
      this.getTeamProductionDayDataThreeData();
      this.pageByCurrentUserTeam()
    },
    // 班组生产日综合看板-当日生产情况、数量、重量
    getTeamProductionDayDataOneData() {
      getTeamProductionDayDataOne(this.teamId).then((res) => {
        console.log(res);
        res.transformQuantity = this.formatNumber(res.quantity);
        this.productionData = res;
        console.log('productionData~~~', this.productionData);
      }).catch((error) => {
        console.error('获取班组生产日综合看板-当日生产情况、数量、重量失败:', error);
      });
    },
    // 图表
    getTeamProductionDayDataTwoData() {
      getTeamProductionDayDataTwo(this.teamId).then((res) => {
        console.log(res);
        // 各工序生产数量
        this.eachProcessOnDutyNum = res.eachProcessOnDutyNum.map((item) => {
          return {
            name: item.name,
            value: item.value
          }
        });

        console.log('eachProcessOnDutyNum~~~', this.eachProcessOnDutyNum);

        // 各工序生产达成率
        const productionAchievementRate = {
          productNames: [],
          rates: []
        }
        res.productionAchievementRate.forEach((item) => {
          productionAchievementRate.productNames.push(item.name);
          productionAchievementRate.rates.push(item.value);
        });
        this.productionAchievementRate = productionAchievementRate;

        // 设备实时状态
        this.eachProcessEquipmentNum = res.eachProcessEquipmentNum.map(item => {
          return {
            name: item.name,
            value: item.value
          }
        });

        // 各工序报工合格数量
        this.productQualificationNum = res.productQualificationNum.map((item) => {
          return {
            name: item.name,
            value: item.value
          }
        });

        // 各工序报工合格率
        const productQualificationRate = {
          productNames: [],
          rates: []
        }
        res.productQualificationRate.forEach((item) => {
          productQualificationRate.productNames.push(item.name);
          productQualificationRate.rates.push(item.value);
        });
        this.productQualificationRate = productQualificationRate;
      }).catch((error) => {
        console.error('获取班组生产日综合看板-各产品前10名失败:', error);
        // 错误时重置数据
        this.eachProcessOnDutyNum = [];
        this.productionAchievementRate = { productNames: [], rates: [] };
        this.eachProcessEquipmentNum = [];
        this.productQualificationNum = [];
        this.productQualificationRate = { productNames: [], rates: [] };
      });
    },
    // 生产工单进度
    getTeamProductionDayDataThreeData() {
      getTeamProductionDayDataThree({teamId: this.teamId, pageNum: 1, size: 999}).then((data) => {
        console.log(data);
        this.tableData = data;
      }).catch((error) => {
        console.error('获取班组生产日综合看板-生产工单进度失败:', error);
        this.tableData = []; // 错误时重置表格数据
      });
    },
    //任务单
    pageByCurrentUserTeam() {
     pageByCurrentUserTeam({teamId: this.teamId, pageNum: 1, size: 999}).then((data) => {
        this.tableData1 = data.list;
      }).catch((error) => {
        this.tableData1 = []; // 错误时重置表格数据
      });
    },
    // 表格数据排序 - State为"Y"的置顶
    sortTableData() {
      this.tableData.sort((a, b) => {
        if (a.isDelayed == 1 && b.isDelayed !== 1) return -1;
        if (a.isDelayed !== 1 && b.isDelayed == 1) return 1;
        return 0;
      });
    },

    onFullscreen() {
      this.isFullscreen = !this.isFullscreen;
    },

    // 更新时间
    updateTime() {
      const now = new Date();
      const format = (num) => num.toString().padStart(2, '0');
      this.time = `${format(now.getHours())}:${format(now.getMinutes())}:${format(now.getSeconds())}`;
      this.date = `${now.getFullYear()}年${now.getMonth() + 1}月${now.getDate()}日`;
      const weekMap = { 0: '日', 1: '一', 2: '二', 3: '三', 4: '四', 5: '五', 6: '六' };
      this.week = `星期${weekMap[now.getDay()]}`;
    },

    // 格式化数字为6位数组（补零）
    formatNumber(num) {
      const paddedStr = num.toString().padStart(6, '0');
      
      const digits = paddedStr.split('').map(Number);
      return digits;
    }
  }
};
</script>

<style lang="scss" scoped>
[v-cloak] {
  display: none;
}
.card-container{
 height: 26vh;
}
.box-container {
  font-size: 16px;
  font-family: 'AlibabaPuHuiTi';
  background-image: url('@/assets/png/bj.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-color: rgb(8, 29, 65);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  .box-header {
    background-image: url('@/assets/border2.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    width: 100% !important;
    height: 10%;
    justify-content: space-between;
    align-items: center;

    .logo {
      width: 15%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding-left: 1rem;
    }

    .title {
      font-family: '优设标题黑';
      font-size: 2.85rem;
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      transform: translate(2%, -10%);
      letter-spacing: 0.4rem;
    }

    .time {
      width: 15%;
      height: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-end;
      font-size: 0.8rem;
      color: #7fa7ce;
    }

    .time-display {
      margin: 0 15px 0 0;
      color: rgb(210 215 221);
      font-size: 0.8rem;
      font-weight: 600;
    }

    .time-text {
      padding: 0 5px;
    }

    .fullscreen-toggle {
      margin: 0 15px 0 0;
      cursor: pointer;
    }
  }


  .box-middle {
    width: 100% !important;
    flex: 1;
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    box-sizing: border-box;

    .box-middle-sidebar {
      flex-basis: 28%;
      max-width: 600px;
      min-width: 280px;
      flex-shrink: 1;
      flex-grow: 0;
      display: flex;
      flex-direction: column;
      gap: 1rem;

      // .sidebar-card {
      //   background-color: rgba(8, 29, 65, 0.8);
      //   background-size: 100% 100%;
      //   background-repeat: no-repeat;
      //   flex: 1;
      //   display: flex;
      //   flex-direction: column;
      //   color: #fff;
      //   font-size: 1rem;
      //   border: 1px solid #124c77;
      //   overflow: hidden;

        // &.chart-card-small {
        //   flex: 0.8 !important;
        // }

        // &.chart-card-large {
        //   flex: 1.2 !important;
        // }

        // .card-header {
        //   display: flex;
        //   align-items: center;
        //   padding: 0.2rem 0.5rem;
        //   gap: 0.3rem;
        //   background-color: rgb(0, 64, 133);
        //   border-bottom: 1px solid #124c77;
        //   font-family: '优设标题黑';
        //   font-size: 1.2rem;
        //   color: #fff;

        //   .card-logo {
        //     width: 1.3rem;
        //     height: 1.3rem;
        //     display: flex;
        //     align-items: center;
        //     justify-content: center;

        //     img {
        //       width: 100%;
        //       height: 100%;
        //       object-fit: contain;
        //     }
        //   }

        //   .card-title {
        //     font-size: clamp(1rem, 1.8vw,1.4rem);
        //     letter-spacing: 0.05rem;
        //   }
        // }

    
        .number-display-container {
          display: flex;
          flex-direction: column;
          height: 100%;
          padding: 0 1rem 0.5rem 1rem;
        }

        .number-display {
          flex: 3;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 0.5rem;
          box-sizing: border-box;
          overflow: hidden;
          // 关键新增：增加顶部外边距，与顶部拉开距离
          // margin-top: 0.8rem; 
        }

        .card-stats {
          display: flex;
          justify-content: center;
          gap: 0.8rem;
          padding: 0.3rem 0;
          flex-wrap: wrap;
          flex-shrink: 0;
          width: 100%;
          box-sizing: border-box;

          .stat-item-container {
            background-color: rgba(0, 123, 255, 0.1);
            border: 1px solid rgba(88, 137, 196);
            border-radius: 4px;
            display: flex;
            align-items: flex-start;
            gap: 0.4rem;
            flex: 1 0 calc(50% - 1rem);
            max-width: calc(50% - 1rem);
            box-sizing: border-box;
            padding: 0.3rem;

            .stat-icon {
              width: 1.6rem;
              height: 1.6rem;
              padding: 0.4rem;
              background-color: rgba(0, 64, 133, 0.3);
              display: flex;
              align-items: center;
              justify-content: center;
              flex-shrink: 0;

              img {
                width: 100%;
                height: 100%;
                object-fit: contain;
              }
            }

            .stat-info {
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              height: 100%;

              .stat-label {
                color: #fff;
                font-size: clamp(0.7rem, 1.2vw, 0.8rem);
                white-space: nowrap;
                line-height: 1.1;
                letter-spacing: 1px;
              }

              .stat-value {
                font-weight: bold;
                white-space: nowrap;
                color: #3bfff2;
                font-size: clamp(0.7rem, 1.2vw, 0.8rem);
                line-height: 1.1;
              }
              .stat-dw {
                font-weight: bold;
                white-space: nowrap;
                color: #fff;
                font-size: clamp(0.7rem, 1.2vw, 0.8rem);
                line-height: 1.1;
              }
            }
          }
        }
      // }
    }

    .box-middle-content {
      flex: 1;
      padding: 0 0.5rem;
      display: flex;
      flex-direction: column;
      gap: 1rem;

      .content-card-container {
        // flex: 1;
        display: flex;
        flex-direction: column;
        // height: 28%;

        .sidebar-card {
          flex: 1;
          background-size: 100% 100%;
          background-repeat: no-repeat;
          display: flex;
          flex-direction: column;
          color: #fff;
          font-size: 1rem;
          overflow: hidden;

          .card-header {
            display: flex;
            align-items: center;
            padding: 0.2rem 0.5rem;
            gap: 0.3rem;
            font-family: '优设标题黑';
            font-size: 1.2rem;
            color: #fff;

            .card-logo {
              width: 1.3rem;
              height: 1.3rem;
              display: flex;
              align-items: center;
              justify-content: center;

              img {
                width: 100%;
                height: 100%;
                object-fit: contain;
              }
            }

            .card-title {
              font-size: clamp(1rem, 1.8vw, 1.4rem);
              letter-spacing: 0.05rem;
            }
          }

          .content-empty {
            flex: 1;
            color: #7fa7ce;
            display: flex;
            flex-direction: column;

            .Remark {
              font-size: 0.7rem;
              letter-spacing: 0.1rem;
              color: #fff;
              text-align: right;
            }

            .content-box {
              display: flex;
              flex: 1;
              gap: 2vw;
              padding: 0.5rem;
              height: 100%;

              .box-item {
                // flex: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                gap: 0.5vw;
                width: 33.3%;

                .item-img {
                  font-family: 'LCD2B';
                  aspect-ratio: 100 / 64;
                  width: 80%;
                  background-image: url('@/assets/png/item_img.png');
                  background-repeat: no-repeat;
                  background-size: 100% 100%;
                  color: #fff;
                  font-size: clamp(1.5rem, 4vw, 3rem);
                  font-weight: 600;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                }

                .item-text {
                  font-size: clamp(0.8rem, 1.5vw, 1rem);
                  font-weight: 600;
                  color: #fff;
                  text-align: center;
                  padding: 0 0.2rem;
                }
              }
            }
          }
        }
      }

    
    }
      .content-top-container {
        // flex: 2;
        // display: flex;
        // flex-direction: column;
        // height: 78%;

          /* 表格容器：移除滚动相关样式 */
          .content-table {
            // flex: 1;
            padding: 8px;
            box-sizing: border-box;
            height: 90%;

            /* 主表格样式 */
            .main-table {
              width: 100%;
              border-collapse: collapse;
              table-layout: fixed;
              overflow: hidden;
            }

            /* 表头样式（保留固定定位但移除滚动关联） */
            .main-table thead th {
              background-color: rgba(3, 29, 66, 0.95);
              padding: 0.5rem 0.2rem;
              text-align: center;
              font-weight: bold;
              color: #0b6fd5;
              border-bottom: 1px solid rgba(255, 255, 255, 0.1);
              font-size: 0.8rem;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }

            /* 表格行样式 */
            .table-row {
              width: 100%;
            }

            /* 表格单元格样式 */
            .table-cell {
              padding: 0.2rem;
              text-align: center;
              color: #e9ecef;
              font-size: 0.8rem;
              border-bottom: 1px solid rgba(255, 255, 255, 0.05);
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }

            /* 红色行样式（State=Y） */
            .state-red {
              .table-cell {
                background-color: #ff1514 !important;
                color: #fff !important;
              }
            }

            /* 行hover效果 */
            .table-row:hover .table-cell {
              background-color: rgba(3, 29, 66, 0.8) !important;
            }

            /* 无数据占位样式 */
            .empty-cell {
              text-align: center;
              padding: 1rem;
              color: #7fa7ce;
              border: none !important;
              height: 100%;
              display: flex;
              align-items: center;
              justify-content: center;
            }
          }
        
      }
  }
}

.scroll-container {
  overflow: hidden;
  height: 90%;
}

/* 数字显示样式 */
.unit-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 3rem;
  height: 5rem;
  position: relative;
}

.unit {
  font-size: 14px;
  color: #a4b9d7;
  text-align: center;
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 0;
  width: 35px;
  white-space: nowrap;
}

.digit-box {
  background-image: url('@/assets/png/num_bj.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: #fff;
  padding: 0 15px;
  height: 5rem;
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  border-radius: 2px;
}

.separator {
  color: #fff;
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* 图表容器样式 */
.process-chart-container {
  width: 100%;
  height: 100%;
  min-height: 160px;
}

.product-top10-chart-container {
  width: 100%;
  height: 100%;
  min-height: 160px;
}

.qualification-rate-chart-container {
  width: 100%;
  height: 100%;
  min-height: 160px;
}

/* 响应式适配 */
@media (max-width: 1200px) {
  .box-container {
    .box-header {
      .time {
        width: 40%;
        font-size: 0.75rem;
      }
    }
  }
}

@media (max-width: 768px) {
  .box-container {
    .box-header {
      .title {
        font-size: 2rem;
      }
      .time {
        width: 45%;
        font-size: 0.7rem;
      }
    }
    .box-middle .box-middle-sidebar {
      flex-basis: 25%;
      min-width: 220px;

      .sidebar-card .card-header .card-title {
        font-size: 0.85rem;
      }
    }
    .box-middle .box-middle-content .content-top-container .sidebar-card {
      .card-header .card-title {
        font-size: 0.85rem;
      }
      .content-table .main-table thead th {
        font-size: 0.7rem;
        padding: 0.3rem 0.1rem;
      }
      .content-table .table-cell {
        font-size: 0.7rem;
        padding: 0.3rem 0.1rem;
      }
    }
  }
}
</style>

<style>
/* 全屏图标样式 */
.el-icon-_screen-full,
.el-icon-_screen-restore {
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.3s;
  color: #7fa7ce;
}

.el-icon-_screen-full:hover,
.el-icon-_screen-restore:hover {
  color: #fff;
  transform: scale(1.1);
}

.head-table, 
.body-table {
  width: 100%;
  table-layout: fixed;
}
</style>