taoge_xiaodi/maintenance_system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完成初版考勤管理静态页面

Browse Source
This commit is contained in:
re-JZzzz
2025-09-20 11:26:02 +08:00
parent d67b16d0b6
commit 3445e54da0
3 changed files with 300 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

213
src/views/integratedManage/attendManage/index.vue
View File

@ -29,46 +29,38 @@
</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">
<!-- 第一行：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>
<calendar></calendar>
<todayAttend></todayAttend>
<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>
</el-col>
</el-row>
</el-col>
</div>
</el-col>
</el-row>
</div>
</template>
@ -79,6 +71,7 @@ import todayAttend from '@/views/integratedManage/attendManage/components/leftBo
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: {
@ -93,66 +86,100 @@ const attendData = ref(
},
}
)
// 创建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;
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>