This commit is contained in:
tcy
2025-09-19 10:20:18 +08:00
committed by re-JZzzz
44 changed files with 3949 additions and 91 deletions

View File

@ -0,0 +1,158 @@
<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>