1.完成生产管理-电量分析静态界面

2.完成综合管理-人员排班管理交互
3.修改部分逻辑和样式

src/views/integratedManage/attendManage/index.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- 考勤管理 -->
     <div class="model">
         <!-- 标题栏 -->
         <el-row :gutter="24">
@@ -38,19 +39,24 @@
                 <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>
+                        <div style="display: flex; justify-content: space-between; align-items: center;">
+                            <TitleComponent title="人员排班" :fontLevel="2" />
+                            <el-button type="primary" @click="manageAttendDialogVisible = true">
+                                管理考勤
+                            </el-button>
+                        </div>
+                        <renyuanpaiban @edit-schedule="handleEditSchedule"></renyuanpaiban>
                     </el-card>
                 </div>
             </el-col>
-            
+
             <!-- 右侧日历卡片 -->
             <el-col :span="7">
                 <div class="calendar-content">
@@ -62,6 +68,40 @@
                 </div>
             </el-col>
         </el-row>
+        <!-- 人员排班弹窗组件 -->
+        <renyuanguanliDialog 
+            v-model:manageAttendDialogVisible="manageAttendDialogVisible"
+            @confirm="handleAttendConfirm"
+        />
+        
+        <!-- 编辑排班弹窗 -->
+        <el-dialog v-model="editScheduleDialogVisible" title="修改排班" width="400">
+            <el-form :model="editScheduleForm" label-width="100px">
+                <el-form-item label="员工姓名">
+                    <el-input v-model="editScheduleForm.name" disabled />
+                </el-form-item>
+                <el-form-item label="排班日期">
+                    <el-input v-model="editScheduleForm.date" disabled />
+                </el-form-item>
+                <el-form-item label="当前排班">
+                    <el-input v-model="editScheduleForm.currentShift" disabled />
+                </el-form-item>
+                <el-form-item label="修改为">
+                    <el-select v-model="editScheduleForm.newShift" placeholder="请选择排班类型" style="width: 100%;">
+                        <el-option v-for="option in shiftOptions" :key="option.value" :label="option.label" :value="option.value"></el-option>
+                    </el-select>
+                </el-form-item>
+            </el-form>
+            
+            <template #footer>
+                <div class="dialog-footer">
+                    <el-button @click="editScheduleDialogVisible = false">取消</el-button>
+                    <el-button type="primary" @click="handleConfirmEditSchedule">
+                        确认修改
+                    </el-button>
+                </div>
+            </template>
+        </el-dialog>
     </div>
 </template>
 <script setup lang="ts">
@@ -72,8 +112,69 @@ 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 renyuanguanliDialog from '@/views/integratedManage/attendManage/components/renyuanguanliDialog.vue'
 import { ref } from 'vue';
 
+// 人员排班弹窗
+const manageAttendDialogVisible = ref(false);
+
+// 处理考勤管理确认
+const handleAttendConfirm = (formData: any) => {
+  console.log('考勤表单数据:', formData);
+  // 这里可以添加表单提交逻辑
+};
+
+// 编辑排班弹窗
+const editScheduleDialogVisible = ref(false);
+
+// 编辑排班表单数据
+const editScheduleForm = ref({
+  name: '',
+  date: '',
+  currentShift: '',
+  newShift: ''
+});
+
+// 排班类型选项
+const shiftOptions = [
+  { label: '早班', value: '早班' },
+  { label: '中班', value: '中班' },
+  { label: '晚班', value: '晚班' },
+  { label: '休息', value: '休息' }
+];
+
+// 处理编辑排班
+const handleEditSchedule = (rowData: any, columnData: any) => {
+  // 设置表单数据
+  editScheduleForm.value = {
+    name: rowData.name,
+    date: `${columnData.fullDate}`,
+    currentShift: '',
+    newShift: ''
+  };
+  
+  // 查找当前排班
+  Object.keys(rowData).forEach(key => {
+    if (key.startsWith('day')) {
+      const dayIndex = parseInt(key.replace('day', '')) - 1;
+      if (dayIndex === columnData.index) {
+        editScheduleForm.value.currentShift = rowData[key];
+        editScheduleForm.value.newShift = rowData[key];
+      }
+    }
+  });
+  
+  // 显示弹窗
+  editScheduleDialogVisible.value = true;
+};
+
+// 确认修改排班
+const handleConfirmEditSchedule = () => {
+  console.log('修改排班数据:', editScheduleForm.value);
+  // 这里可以添加修改排班的逻辑
+  editScheduleDialogVisible.value = false;
+};
+
 // 出勤数据 - 用于attendTrend组件
 const attendData = ref(
     {
@@ -92,46 +193,46 @@ 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'
-  }
+    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组件
@@ -185,47 +286,49 @@ const approvalData = ref([
 
 // 今日出勤数据 - 用于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'
-  }
+    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'
-      }
+    // 初始化当前日期
+    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">
@@ -260,11 +363,11 @@ const calendarData = ref({
     height: 100%;
 }
 
-.calendar-content .el-card > * {
+.calendar-content .el-card>* {
     margin-bottom: 16px;
 }
 
-.calendar-content .el-card > *:last-child {
+.calendar-content .el-card>*:last-child {
     margin-bottom: 0;
     flex: 1;
 }
@@ -300,9 +403,9 @@ const calendarData = ref({
     .analysis-content {
         gap: 16px;
     }
-    
+
     /* 日历卡片内组件间距 */
-    .calendar-content .el-card > * {
+    .calendar-content .el-card>* {
         margin-bottom: 12px;
     }
 }