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>
        <el-row>
             <!-- 左侧 -->
         <el-col :span="17">
            <el-row>
                <el-col :span="24">
                    <totalView ></totalView>
                </el-col>
            </el-row>
             <el-row>
                <el-col :span="24">
                   <attendTrend :attendData="attendData"></attendTrend>
                </el-col>
            </el-row>
             <el-row>
                <el-col :span="24">
                    
                </el-col>
            </el-row>
         </el-col>

         <!-- 右侧 -->
         <el-col :span="7">
            <!-- hello -->
            <el-row>
                <el-col :span="24">
                     <infoBox></infoBox>
                </el-col>
            </el-row>
              <!-- 日历 -->
            <el-row>
                <el-col :span="24">
                    <el-card>
                          <calendar></calendar>
                          <todayAttend></todayAttend>
                        <approval></approval>
                    </el-card>
                   
                </el-col>
            </el-row>
         </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'
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]
        },
    }
)
// 创建itembox数据数组，用于循环渲染
const itemBoxData = ref([
  {
    title: '总发电量',
    value: '2,456.8',
    unit: 'KWh',
    growth: '2.5',
    growthLabel: '较昨日',
    color: '#186DF5',
    chartType: 'bar',
    power: '',
    iconSrc: '/src/assets/demo/shandian.png',
    type: 'up',
    chartData: [30, 50, 40, 60, 80, 70, 100, 90, 85, 75, 65, 55]
  },
  {
    title: '平均效率',
    value: '18.7',
    unit: '%',
    growth: '2.5',
    growthLabel: '较昨日',
    color: '#00B87A',
    chartType: 'line',
    power: '',
    iconSrc: '/src/assets/demo/huojian.png',
    type: 'up',
    chartData: [30, 50, 40, 60, 80, 70, 100, 90, 85, 75, 65, 55]
  },
  {
    title: '设备温度',
    value: '43.5',
    unit: '℃',
    growth: '2.5',
    growthLabel: '较昨日',
    color: '#FFC300',
    chartType: 'line',
    power: '',
    iconSrc: '/src/assets/demo/wendu.png',
    type: 'up',
    chartData: [30, 50, 40, 60, 80, 70, 100, 90, 85, 75, 65, 55]
  },
  {
    title: '系统可用性',
    value: '18.7',
    unit: '%',
    growth: '2.5',
    growthLabel: '较昨日',
    color: '#7948EA',
    chartType: 'line',
    power: '',
    iconSrc: '/src/assets/demo/use.png',
    type: 'up',
    chartData: [30, 50, 40, 60, 80, 70, 100, 90, 85, 75, 65, 55]
  }
]);
</script>

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