maintenance_system/src/views/integratedManage/attendManage/index.vue

<template>
    <div class="model">
        <!-- 标题栏 -->
        <el-row :gutter="24">
            <el-col :span="12">
                <TitleComponent title="考勤管理" subtitle="项目出勤情况、人员排班及请假调休管理" />
            </el-col>
            <!-- 外层col：控制整体宽度并右对齐，同时作为flex容器 -->
            <el-col :span="12" style="display: flex; justify-content: flex-end; align-items: center;">
                <!-- 子col1：下拉 -->
                <el-col :span="4">
                    <el-select placeholder="选择电站">
                        <el-option label="所有电站" value="all"></el-option>
                    </el-select>
                </el-col>
                <!-- 子col2：下拉框容器 -->
                <el-col :span="4">
                    <el-select placeholder="日期范围">
                        <el-option label="所有月份" value="all"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary">
                        导出数据
                        <el-icon class="el-icon--right">
                            <UploadFilled />
                        </el-icon>
                    </el-button>
                </el-col>
            </el-col>
        </el-row>
        <!-- 第一行：totalView 和 infoBox -->
        <el-row :gutter="20">
            <el-col :span="17">
                <totalView></totalView>
            </el-col>
            <el-col :span="7">
                <infoBox></infoBox>
            </el-col>
        </el-row>
        
        <!-- 第二行：人员排班和出勤趋势分析 -->
        <el-row :gutter="20">
            <el-col :span="17">
                <div class="analysis-content">
                    <attendTrend :attendData="attendData"></attendTrend>
                    <el-card>
                        <TitleComponent title="人员排班" :fontLevel="2" />
                        <renyuanpaiban></renyuanpaiban>
                    </el-card>
                </div>
            </el-col>
            
            <!-- 右侧日历卡片 -->
            <el-col :span="7">
                <div class="calendar-content">
                    <el-card>
                        <calendar></calendar>
                        <todayAttend></todayAttend>
                        <approval></approval>
                    </el-card>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script setup lang="ts">
import infoBox from '@/views/integratedManage/attendManage/components/infoBox.vue'
import attendTrend from '@/views/integratedManage/attendManage/components/attendTrend.vue'
import todayAttend from '@/views/integratedManage/attendManage/components/leftBox/todayAttend.vue'
import approval from '@/views/integratedManage/attendManage/components/leftBox/approval.vue'
import calendar from '@/views/integratedManage/attendManage/components/leftBox/calendar.vue'
import totalView from '@/views/integratedManage/attendManage/components/totalView.vue'
import renyuanpaiban from '@/views/integratedManage/attendManage/components/renyuanpaiban.vue'
const attendData = ref(
    {
        week: {
            xAxis: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
            actualCount: [40, 20, 30, 15, 22, 63, 58, 43, 39, 36],
            expectedCount: [100, 556, 413, 115, 510, 115, 317, 118, 14, 7]
        },
        month: {
            xAxis: ['第1周', '第2周', '第3周', '第4周'],
            actualData: [280, 360, 320, 400],
            theoreticalData: [300, 400, 350, 450]
        },
    }
)
</script>

<style scoped lang="scss">
.model {
    padding: 24px 20px;
    background-color: rgba(242, 248, 252, 1);
}

/* 标题栏与内容区域间距 */
.el-row+.el-row {
    margin-top: 24px;
}

/* 分析内容区域 */
.analysis-content {
    display: flex;
    flex-direction: column;
    gap: 45px;
    // border: 1px solid red;
}

/* 日历内容区域 */
.calendar-content {
    display: flex;
    flex-direction: column;
}

/* 右侧日历卡片内组件间距 */
.calendar-content .el-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.calendar-content .el-card > * {
    margin-bottom: 16px;
}

.calendar-content .el-card > *:last-child {
    margin-bottom: 0;
    flex: 1;
}

/* 卡片样式统一 */
.el-card {
    border-radius: 8px !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

/* 下拉选择器和按钮样式调整 */
.el-select {
    width: 100%;
    margin-right: 12px;
}

.el-button {
    margin-left: 8px;
}

/* 响应式布局优化 */
@media screen and (max-width: 1200px) {
    .model {
        padding: 16px;
    }

    .el-row+.el-row {
        margin-top: 16px;
    }

    .analysis-content {
        gap: 16px;
    }
    
    /* 日历卡片内组件间距 */
    .calendar-content .el-card > * {
        margin-bottom: 12px;
    }
}

/* 更细粒度的响应式调整 */
@media screen and (max-width: 768px) {
    .model {
        padding: 12px;
    }

    .el-select {
        margin-right: 8px;
    }

    .el-button {
        margin-left: 4px;
        padding: 8px 12px;
    }
}
</style>