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 19:27:56 +08:00
parent 3445e54da0
commit 7eabcd203f
15 changed files with 948 additions and 604 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/views/integratedManage/attendManage/components/leftBox/approval.vue
View File

@ -41,53 +41,13 @@
<script setup>
import TitleComponent from '@/components/TitleComponent/index.vue';
const approvalData = [
{
type: '事假',
days: 1,
timeRange: '09.14-09.15',
people: '水泥班组-王五',
status: '待审批',
statusType: 'primary',
iconPath: '/src/assets/demo/approval.png'
},
{
type: '病假',
days: 2,
timeRange: '09.14-09.15',
people: '水泥班组-王五',
status: '待审批',
statusType: 'primary',
iconPath: '/src/assets/demo/approval.png'
},
{
type: '调休',
days: 1,
timeRange: '09.14-09.15',
people: '水泥班组-王五',
status: '待审批',
statusType: 'primary',
iconPath: '/src/assets/demo/approval.png'
},
{
type: '事假',
days: 1,
timeRange: '09.14-09.15',
people: '水泥班组-王五',
status: '待审批',
statusType: 'primary',
iconPath: '/src/assets/demo/approval.png'
},
{
type: '事假',
days: 1,
timeRange: '09.14-09.15',
people: '水泥班组-王五',
status: '已通过',
statusType: 'success',
iconPath: '/src/assets/demo/approval.png'
}
];
// 接收从父组件传入的数据
const props = defineProps({
approvalData: {
type: Array,
default: () => []
}
});
</script>
<style scoped lang="scss">
.chart-header {

64
src/views/integratedManage/attendManage/components/leftBox/calendar.vue
View File

@ -57,27 +57,43 @@ import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue';
import { ref, computed } from 'vue';
import { ElMessage } from 'element-plus';
// 初始化当前日期
const today = new Date();
const currentDate = ref(new Date(2025, 8, 27)); // 2025年9月27日，截图中显示的日期
const selectedDate = ref(new Date(2025, 8, 27));
// 模拟考勤数据
const attendanceData = ref({
2025: {
9: {
1: 'normal',
4: 'late',
8: 'absent',
10: 'leave',
15: 'normal',
20: 'normal',
25: 'late',
27: 'normal'
}
// 接收从父组件传入的数据
const props = defineProps({
calendarData: {
type: Object,
default: () => ({
// 初始化当前日期
today: new Date(),
currentDate: new Date(2025, 8, 27), // 2025年9月27日，截图中显示的日期
selectedDate: new Date(2025, 8, 27),
// 模拟考勤数据
attendanceData: {
2025: {
9: {
1: 'normal',
4: 'late',
8: 'absent',
10: 'leave',
15: 'normal',
20: 'normal',
25: 'late',
27: 'normal'
}
}
}
})
}
});
// 初始化当前日期
const today = ref(props.calendarData.today);
const currentDate = ref(props.calendarData.currentDate);
const selectedDate = ref(props.calendarData.selectedDate);
// 模拟考勤数据
const attendanceData = ref(props.calendarData.attendanceData);
// 星期几的显示
const weekdays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
const monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
@ -160,15 +176,15 @@ const getAttendanceStatus = (day) => {
};
const isToday = (day) => {
return day === today.getDate() &&
currentMonth.value === today.getMonth() &&
currentYear.value === today.getFullYear();
return day === today.value.getDate() &&
currentMonth.value === today.value.getMonth() &&
currentYear.value === today.value.getFullYear();
};
const isCurrentDay = (day) => {
return day === today.getDate() &&
currentMonth.value === today.getMonth() &&
currentYear.value === today.getFullYear();
return day === today.value.getDate() &&
currentMonth.value === today.value.getMonth() &&
currentYear.value === today.value.getFullYear();
};
const isSelectedDay = (day) => {

24
src/views/integratedManage/attendManage/components/leftBox/todayAttend.vue
View File

@ -3,31 +3,31 @@
<TitleComponent title="今日出勤" :font-level="2" />
<div class="todayAttend">
<div class="todayAttendItem">
<img src="@/assets/demo/qin.png" alt="" width="30px" height="30px">
<img :src="props.todayAttendData.attendance.icon" alt="" width="30px" height="30px">
<div class="todayAttendItemInfo">
<span class="todayAttendItemTitle">出勤</span>
<span class="todayAttendItemNum">150人</span>
<span class="todayAttendItemNum">{{ props.todayAttendData.attendance.count }}人</span>
</div>
</div>
<div class="todayAttendItem">
<img src="@/assets/demo/qin.png" alt="" width="30px" height="30px">
<img :src="props.todayAttendData.late.icon" alt="" width="30px" height="30px">
<div class="todayAttendItemInfo">
<span class="todayAttendItemTitle">迟到</span>
<span class="todayAttendItemNum">150人</span>
<span class="todayAttendItemNum">{{ props.todayAttendData.late.count }}人</span>
</div>
</div>
<div class="todayAttendItem">
<img src="@/assets/demo/qin.png" alt="" width="30px" height="30px">
<img :src="props.todayAttendData.earlyLeave.icon" alt="" width="30px" height="30px">
<div class="todayAttendItemInfo">
<span class="todayAttendItemTitle">早退</span>
<span class="todayAttendItemNum">150人</span>
<span class="todayAttendItemNum">{{ props.todayAttendData.earlyLeave.count }}人</span>
</div>
</div>
<div class="todayAttendItem">
<img src="@/assets/demo/qin.png" alt="" width="30px" height="30px">
<img :src="props.todayAttendData.absent.icon" alt="" width="30px" height="30px">
<div class="todayAttendItemInfo">
<span class="todayAttendItemTitle">缺勤</span>
<span class="todayAttendItemNum">150人</span>
<span class="todayAttendItemNum">{{ props.todayAttendData.absent.count }}人</span>
</div>
</div>
</div>
@ -35,6 +35,14 @@
</template>
<script setup>
import TitleComponent from '@/components/TitleComponent/index.vue';
// 接收从父组件传入的数据
const props = defineProps({
todayAttendData: {
type: Object,
default: () => ({})
}
});
</script>
<style scoped lang="scss">
.todayAttend {

362
src/views/integratedManage/attendManage/components/totalView.vue
View File

@ -1,58 +1,18 @@
<template>
<div class="total-view-container">
<div class="total-view-content">
<!-- 总出勤人数 -->
<div class="stats-card">
<!-- 使用循环生成统计卡片 -->
<div v-for="(item, index) in statsItems" :key="index" class="stats-card">
<div class="stats-card-header">
<span class="stats-title">总出勤人数</span>
<span class="stats-change positive">↑ 8.2% 较昨日同期</span>
<span class="stats-title">{{ item.title }}</span>
<span class="stats-change" :class="{ positive: item.data.isPositive, negative: !item.data.isPositive }">
{{ item.data.isPositive ? '↑' : '↓' }} {{ item.data.change }} {{ item.compareText }}
</span>
</div>
<div class="stats-card-body">
<div class="stats-value">248</div>
<div class="stats-value">{{ item.data.value }}</div>
<div class="stats-chart">
<div ref="attendanceChart" class="chart-container"></div>
</div>
</div>
</div>
<!-- 调休 -->
<div class="stats-card">
<div class="stats-card-header">
<span class="stats-title">调休</span>
<span class="stats-change positive">↑ 8.2% 较上月同期</span>
</div>
<div class="stats-card-body">
<div class="stats-value">8</div>
<div class="stats-chart">
<div ref="restChart" class="chart-container"></div>
</div>
</div>
</div>
<!-- 本月请假 -->
<div class="stats-card">
<div class="stats-card-header">
<span class="stats-title">本月请假</span>
<span class="stats-change negative">↓ 10% 较昨日同期</span>
</div>
<div class="stats-card-body">
<div class="stats-value">24</div>
<div class="stats-chart">
<div ref="leaveChart" class="chart-container"></div>
</div>
</div>
</div>
<!-- 平均出勤率 -->
<div class="stats-card">
<div class="stats-card-header">
<span class="stats-title">平均出勤率</span>
<span class="stats-change positive">↑ 10% 较昨日同期</span>
</div>
<div class="stats-card-body">
<div class="stats-value">96.8%</div>
<div class="stats-chart">
<div ref="rateChart" class="chart-container"></div>
<div :ref="el => chartRefs[index] = el" class="chart-container"></div>
</div>
</div>
</div>
@ -61,167 +21,177 @@
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { ref, computed, onMounted, watch, nextTick } from 'vue';
import * as echarts from 'echarts';
// 图表引用
const attendanceChart = ref(null);
const restChart = ref(null);
const leaveChart = ref(null);
const rateChart = ref(null);
// 接收从父组件传入的数据
const props = defineProps({
totalData: {
type: Object,
default: () => ({
attendance: {
value: 248,
change: '+8.2%',
isPositive: true,
chartData: [150, 230, 224, 218, 135, 300, 220],
color: '#FF7D00',
title: '总出勤人数',
compareText: '较昨日同期',
chartType: 'bar'
},
rest: {
value: 8,
change: '+8.2%',
isPositive: true,
chartData: [10, 12, 15, 8, 7, 9, 10],
color: '#00C48C',
title: '调休',
compareText: '较上月同期',
chartType: 'line'
},
leave: {
value: 24,
change: '-10%',
isPositive: false,
chartData: [30, 25, 28, 22, 20, 26, 24],
color: '#FF5252',
title: '本月请假',
compareText: '较昨日同期',
chartType: 'line'
},
rate: {
value: '96.8%',
change: '+10%',
isPositive: true,
chartData: [90, 92, 94, 95, 97, 98, 96.8],
color: '#029CD4',
title: '平均出勤率',
compareText: '较昨日同期',
chartType: 'line'
}
})
}
});
// 图表引用数组
const chartRefs = ref([]);
// 转换totalData为数组格式，方便循环渲染
const statsItems = computed(() => {
return Object.keys(props.totalData).map(key => ({
title: props.totalData[key].title,
data: {
value: props.totalData[key].value,
change: props.totalData[key].change,
isPositive: props.totalData[key].isPositive,
chartData: props.totalData[key].chartData,
color: props.totalData[key].color
},
compareText: props.totalData[key].compareText,
chartType: props.totalData[key].chartType
}));
});
// 初始化图表
const initCharts = () => {
// 总出勤人数图表 - 条形图
const attendanceChartInstance = echarts.init(attendanceChart.value);
attendanceChartInstance.setOption({
tooltip: { show: false },
grid: { top: 0, bottom: 0, left: -70, right: 0, containLabel: true },
xAxis: {
type: 'category',
data: ['', '', '', '', '', '', ''],
axisLine: { show: false },
axisTick: { show: false },
axisLabel: { show: false }
},
yAxis: {
type: 'value',
show: false
},
series: [{
data: [150, 230, 224, 218, 135, 300, 220],
type: 'bar',
barWidth: 10,
itemStyle: {
color: '#FF7D00',
borderRadius: [10, 10, 0, 0] // 柱状图圆角
const chartInstances = [];
// 循环初始化所有图表
statsItems.value.forEach((item, index) => {
if (!chartRefs.value[index]) return;
const chartInstance = echarts.init(chartRefs.value[index]);
// 根据图表类型设置不同的配置
if (item.chartType === 'bar') {
// 柱状图配置
chartInstance.setOption({
tooltip: { show: false },
grid: { top: 0, bottom: 0, left: -70, right: 0, containLabel: true },
xAxis: {
type: 'category',
data: Array(item.data.chartData.length).fill(''),
axisLine: { show: false },
axisTick: { show: false },
axisLabel: { show: false }
},
emphasis: {
focus: 'series'
}
}]
});
// 调休图表 - 折线图
const restChartInstance = echarts.init(restChart.value);
restChartInstance.setOption({
tooltip: { show: false },
grid: { top:10, bottom: 0, left: -30, right: 0, containLabel: true },
xAxis: {
type: 'category',
data: ['', '', '', '', '', '', '', '', '', ''],
axisLine: { show: false },
axisTick: { show: false },
axisLabel: { show: false }
},
yAxis: {
type: 'value',
show: false
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130, 150, 160, 180],
type: 'line',
smooth: true,
showSymbol: false,
lineStyle: {
width: 3, // 折线图线条加粗
color: '#52C41A'
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(82, 196, 26, 0.2)'
}, {
offset: 1,
color: 'rgba(82, 196, 26, 0.01)'
}])
}
}]
});
// 本月请假图表 - 折线图
const leaveChartInstance = echarts.init(leaveChart.value);
leaveChartInstance.setOption({
tooltip: { show: false },
grid: { top: 10, bottom: 0, left: -30, right: 0, containLabel: true },
xAxis: {
type: 'category',
data: ['', '', '', '', '', '', '', '', '', ''],
axisLine: { show: false },
axisTick: { show: false },
axisLabel: { show: false }
},
yAxis: {
type: 'value',
show: false
},
series: [{
data: [80, 150, 120, 200, 180, 130, 160, 190, 140, 100],
type: 'line',
smooth: true,
showSymbol: false,
lineStyle: {
width: 3, // 折线图线条加粗
color: '#F5222D'
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(245, 34, 45, 0.2)'
}, {
offset: 1,
color: 'rgba(245, 34, 45, 0.01)'
}])
}
}]
});
// 平均出勤率图表 - 折线图
const rateChartInstance = echarts.init(rateChart.value);
rateChartInstance.setOption({
tooltip: { show: false },
grid: { top: 0, bottom: 0, left: -30, right: 0, containLabel: true },
xAxis: {
type: 'category',
data: ['', '', '', '', '', '', '', '', '', ''],
axisLine: { show: false },
axisTick: { show: false },
axisLabel: { show: false }
},
yAxis: {
type: 'value',
show: false
},
series: [{
data: [90, 92, 91, 93, 95, 94, 96, 95, 97, 98],
type: 'line',
smooth: true,
showSymbol: false,
lineStyle: {
width: 3, // 折线图线条加粗
color: '#186DF5'
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(24, 109, 245, 0.2)'
}, {
offset: 1,
color: 'rgba(24, 109, 245, 0.01)'
}])
}
}]
yAxis: {
type: 'value',
show: false
},
series: [{
data: item.data.chartData,
type: 'bar',
barWidth: 10,
itemStyle: {
color: item.data.color,
borderRadius: [10, 10, 0, 0] // 柱状图圆角
},
emphasis: {
focus: 'series'
}
}]
});
} else if (item.chartType === 'line') {
// 折线图配置
chartInstance.setOption({
tooltip: { show: false },
grid: { top: 10, bottom: 0, left: -30, right: 0, containLabel: true },
xAxis: {
type: 'category',
data: Array(item.data.chartData.length).fill(''),
axisLine: { show: false },
axisTick: { show: false },
axisLabel: { show: false }
},
yAxis: {
type: 'value',
show: false
},
series: [{
data: item.data.chartData,
type: 'line',
smooth: true,
showSymbol: false,
lineStyle: {
width: 4, // 折线图线条加粗
color: item.data.color
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: `${item.data.color}33`
}, {
offset: 1,
color: `${item.data.color}02`
}])
}
}]
});
}
chartInstances.push(chartInstance);
});
// 响应窗口大小变化
window.addEventListener('resize', () => {
attendanceChartInstance.resize();
restChartInstance.resize();
leaveChartInstance.resize();
rateChartInstance.resize();
chartInstances.forEach(instance => {
instance.resize();
});
});
};
// 监听props变化，重新初始化图表
watch(() => props.totalData, () => {
// 清空之前的图表引用
chartRefs.value = [];
// 等待DOM更新后重新初始化图表
nextTick(() => {
initCharts();
});
}, { deep: true });
// 组件挂载后初始化图表
onMounted(() => {
initCharts();

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

@ -32,7 +32,7 @@
<!-- 第一行：totalView 和 infoBox -->
<el-row :gutter="20">
<el-col :span="17">
<totalView></totalView>
<totalView :totalData="totalData"></totalView>
</el-col>
<el-col :span="7">
<infoBox></infoBox>
@ -55,9 +55,9 @@
<el-col :span="7">
<div class="calendar-content">
<el-card>
<calendar></calendar>
<todayAttend></todayAttend>
<approval></approval>
<calendar :calendarData="calendarData"></calendar>
<todayAttend :todayAttendData="todayAttendData"></todayAttend>
<approval :approvalData="approvalData"></approval>
</el-card>
</div>
</el-col>
@ -72,6 +72,9 @@ import approval from '@/views/integratedManage/attendManage/components/leftBox/a
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'
import { ref } from 'vue';
// 出勤数据 - 用于attendTrend组件
const attendData = ref(
{
week: {
@ -86,6 +89,143 @@ const attendData = ref(
},
}
)
// Mock数据 - 更新为循环生成所需的数据结构
const totalData = ref({
attendance: {
value: 248,
change: '+8.2%',
isPositive: true,
chartData: [150, 230, 224, 218, 135, 300, 220],
color: '#FF7D00',
title: '总出勤人数',
compareText: '较昨日同期',
chartType: 'bar'
},
rest: {
value: 8,
change: '+8.2%',
isPositive: true,
chartData: [10, 12, 15, 8, 7, 9, 10],
color: '#00C48C',
title: '调休',
compareText: '较上月同期',
chartType: 'line'
},
leave: {
value: 24,
change: '-10%',
isPositive: false,
chartData: [30, 25, 28, 22, 20, 26, 24],
color: '#FF5252',
title: '本月请假',
compareText: '较昨日同期',
chartType: 'line'
},
rate: {
value: '96.8%',
change: '+10%',
isPositive: true,
chartData: [90, 92, 94, 95, 97, 98, 96.8],
color: '#029CD4',
title: '平均出勤率',
compareText: '较昨日同期',
chartType: 'line'
}
});
// 审批数据 - 用于approval组件
const approvalData = ref([
{
type: '事假',
days: 1,
timeRange: '09.14-09.15',
people: '水泥班组-王五',
status: '待审批',
statusType: 'primary',
iconPath: '/src/assets/demo/approval.png'
},
{
type: '病假',
days: 2,
timeRange: '09.14-09.15',
people: '水泥班组-王五',
status: '待审批',
statusType: 'primary',
iconPath: '/src/assets/demo/approval.png'
},
{
type: '调休',
days: 1,
timeRange: '09.14-09.15',
people: '水泥班组-王五',
status: '待审批',
statusType: 'primary',
iconPath: '/src/assets/demo/approval.png'
},
{
type: '事假',
days: 1,
timeRange: '09.14-09.15',
people: '水泥班组-王五',
status: '待审批',
statusType: 'primary',
iconPath: '/src/assets/demo/approval.png'
},
{
type: '事假',
days: 1,
timeRange: '09.14-09.15',
people: '水泥班组-王五',
status: '已通过',
statusType: 'success',
iconPath: '/src/assets/demo/approval.png'
}
]);
// 今日出勤数据 - 用于todayAttend组件
const todayAttendData = ref({
attendance: {
count: 150,
icon: '/src/assets/demo/qin.png'
},
late: {
count: 5,
icon: '/src/assets/demo/chi.png'
},
earlyLeave: {
count: 2,
icon: '/src/assets/demo/tui.png'
},
absent: {
count: 8,
icon: '/src/assets/demo/que.png'
}
});
// 日历数据 - 用于calendar组件
const calendarData = ref({
// 初始化当前日期
today: new Date(),
currentDate: new Date(2025, 8, 27), // 2025年9月27日，截图中显示的日期
selectedDate: new Date(2025, 8, 27),
// 模拟考勤数据
attendanceData: {
2025: {
9: {
1: 'normal',
4: 'late',
8: 'absent',
10: 'leave',
15: 'normal',
20: 'normal',
25: 'late',
27: 'normal'
}
}
}
});
</script>
<style scoped lang="scss">