fix

package-lock.json

@@ -4912,6 +4912,11 @@
         "is-data-view": "^1.0.1"
       }
     },
+    "dayjs": {
+      "version": "1.11.18",
+      "resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.18.tgz",
+      "integrity": "sha512-zFBQ7WFRvVRhKcWoUh+ZA1g2HVgUbsZm9sbddh8EC5iv93sui8DVVz1Npvz+r6meo9VKfa8NyLWBsQK1VvIKPA=="
+    },
     "de-indent": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/de-indent/-/de-indent-1.0.2.tgz",

src/api/grassrootsregistration/bdglcookbook.js

@@ -2,60 +2,68 @@ import request from '@/utils/request'
 
 // 查询一周食谱列表
 export function listBdglcookbook(query) {
-  return request({
-    url: '/grassrootsregistration/bdglcookbook/list',
-    method: 'get',
-    params: query
-  })
+    return request({
+        url: '/grassrootsregistration/bdglcookbook/list',
+        method: 'get',
+        params: query
+    })
 }
 
 // 查询一周食谱详细
 export function getBdglcookbook(id) {
-  return request({
-    url: '/grassrootsregistration/bdglcookbook/' + id,
-    method: 'get'
-  })
+    return request({
+        url: '/grassrootsregistration/bdglcookbook/' + id,
+        method: 'get'
+    })
 }
 
 // 新增一周食谱
 export function addBdglcookbook(data) {
-  return request({
-    url: '/grassrootsregistration/bdglcookbook',
-    method: 'post',
-    data: data
-  })
+    return request({
+        url: '/grassrootsregistration/bdglcookbook',
+        method: 'post',
+        data: data
+    })
 }
 
 // 修改一周食谱
 export function updateBdglcookbook(data) {
-  return request({
-    url: '/grassrootsregistration/bdglcookbook',
-    method: 'put',
-    data: data
-  })
+    return request({
+        url: '/grassrootsregistration/bdglcookbook',
+        method: 'put',
+        data: data
+    })
 }
 
 // 删除一周食谱
 export function delBdglcookbook(id) {
-  return request({
-    url: '/grassrootsregistration/bdglcookbook/' + id,
-    method: 'delete'
-  })
+    return request({
+        url: '/grassrootsregistration/bdglcookbook/' + id,
+        method: 'delete'
+    })
 }
 
 // 导出一周食谱
 export function exportBdglcookbook(query) {
-  return request({
-    url: '/grassrootsregistration/bdglcookbook/export',
-    method: 'get',
-    params: query
-  })
+    return request({
+        url: '/grassrootsregistration/bdglcookbook/export',
+        method: 'get',
+        params: query
+    })
+}
+//导出一周食谱Excel
+export function exportBdglcookbookExcel(id) {
+    return request({
+        url: '/grassrootsregistration/bdglcookbook/exportExcel/' + id,
+        method: 'get',
+        responseType: 'blob'
+    })
 }
 //  获取所有食品
 export function getThings(query) {
-  return request({
-    url: '/grassrootsregistration/bdglcookbook/getfood',
-    method: 'get',
-    params: query
-  })
+    return request({
+        url: '/grassrootsregistration/bdglcookbook/getfood',
+        method: 'get',
+        params: query
+    })
 }

src/views/grassrootsregistration/bdglcookbook/index.vue

@@ -155,6 +155,12 @@
             v-hasPermi="['grassrootsregistration:bdglcookbook:edit']"
             ><span class="edit">修改</span></el-button
           >
+          <el-button
+            size="mini"
+            type="warning"
+            @click="handleExportExcel(scope.row)"
+            ><span class="edit">Excel导出</span></el-button
+          >
           <el-button
             size="btd"
             type="text"
@@ -1786,6 +1792,7 @@ import bdglcookbook from "@/components/look_word/bdglcookbook.vue";
 import {
   listBdglcookbook,
   getBdglcookbook,
+  exportBdglcookbookExcel,
   delBdglcookbook,
   addBdglcookbook,
   updateBdglcookbook,
@@ -2349,6 +2356,24 @@ export default {
         this.menuRoleVisible = true;
       });
     },
+    //导出按钮操作
+    handleExportExcel(row) {
+      const id = row.id || this.ids;
+      exportBdglcookbookExcel(id).then(res => {
+        // 处理文件下载
+        const blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
+        const link = document.createElement('a');
+        link.href = URL.createObjectURL(blob);
+        link.download = "(" + row.title + ")" + '一周食谱表.xlsx';
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        URL.revokeObjectURL(link.href);
+      }).catch(error => {
+        console.error('导出Excel失败:', error);
+        this.$message.error('导出失败，请重试');
+      });
+    },
     /** 修改按钮操作 */
     handleUpdate(row) {
       this.getTreeselect();

src/views/grassrootsregistration/bdgldrills/index.vue

@@ -20,7 +20,7 @@
         </el-date-picker>
       </el-form-item>
       <el-form-item>
-        <el-button size="btr" @click="resetQuery">重置</el-button>
+        <el-button size="btr" @click="resetQuery">重1置</el-button>
       </el-form-item>
     </el-form>
    <div v-if="status==1">

src/views/grassrootsregistration/bdglweekwork/index.vue

@@ -157,6 +157,13 @@
             v-hasPermi="['grassrootsregistration:bdglweekwork:edit']"
             ><span class="edit">修改</span></el-button
           >
+          <el-button
+            size="small"
+            type="warning"
+            @click="handleCopy(scope.row)"
+            v-hasPermi="['grassrootsregistration:bdglweekwork:edit']"
+            ><span class="edit">复制</span></el-button
+          >
           <el-button
             size="btd"
             type="text"
@@ -968,6 +975,64 @@ export default {
         this.tomList = response.data.bdglWeekworkRegisterList;
         this.gongZuoTiem = response.data.bdglWeekworkRegisterList[0].time;
       });
+    },
+     /** 复制按钮操作 */
+     handleCopy(row) { 
+      this.reset();
+      this.getTreeselect();
+      this.form.unitId = row.unitId;
+      this.ZhuChiRen(this.form.unitId);
+      const id = row.id || this.ids;
+      getBdglweekwork(id).then((response) => {
+        console.log("复制按钮0",this.form)
+        this.form = response.data;
+        console.log("复制按钮1",this.form)
+        this.tomList = response.data.bdglWeekworkRegisterList;
+        // 添加安全检查防止数组为空
+        if (response.data.bdglWeekworkRegisterList && response.data.bdglWeekworkRegisterList.length > 0) {
+          this.gongZuoTiem = response.data.bdglWeekworkRegisterList[0].time;
+        }
+        // 在获取数据完成后再执行添加操作，确保数据一致性
+        this.form.id = null;
+        for (let i = 0; i < this.form.bdglWeekworkRegisterList.length; i++) {
+          this.form.bdglWeekworkRegisterList[i].id = null;
+        }
+        //name前面加"副本"+1,2,3 + "-",如果name已经有"副本"+1,2,3 + "-"，则进行+1操作
+        if (this.form.name.includes("副本")) {
+          // 使用正则表达式匹配"副本"+数字的模式
+          const reg = /副本(\d+)$/;
+          const match = this.form.name.match(reg);
+          
+          if (match) {
+            const num = parseInt(match[1]);
+            const baseName = this.form.name.substring(0, this.form.name.length - match[1].length);
+            this.form.name = baseName + (num + 1);
+          } else {
+            // 如果有"副本"但不匹配模式，则直接添加"-副本1"
+            this.form.name = this.form.name + "-副本1";
+          }
+        } else {
+          this.form.name = this.form.name + "-副本1";
+        }
+
+        return addBdglweekwork(this.form);
+      }).then((response) => {
+        this.$modal.msgSuccess("新增副本成功");
+        this.getList();
+      }).catch((error) => {
+        // 添加错误处理
+        this.$modal.msgError("操作失败，请重试");
+        console.error("复制操作失败:", error);
+      });
+      // copyBdglweekwork(id).then((response) => {
+      //   if (response.code == 200) {
+      //     this.$modal.msgSuccess(response.msg);
+      //     this.getList();
+      //   } else {
+      //     this.$modal.msgError(response.msg);
+      //   }
+      // });
+
     },
     //查看按钮操作
     handleChakan(row) {

src/views/grassrootsregistration/personnelRoster/index.vue

@@ -1,140 +1,160 @@
 <!--人员记录本领导 -->
 <template>
-  <div class="arr_conten">
-    <div v-if="loading" class="loading">加载中...</div>
-    <!-- 空状态 -->
-    <div v-else-if="!lieList || lieList.length === 0" class="empty">
-      暂无数据
-    </div>
-<!--    <div v-if="status == 1">-->
-      <div v-else-if="lieList && lieList.length > 0">
-      <ul v-for="(item, i) in lieList" :key="i + ' '">
-        <li v-for="(item1, i1) in item" :key="i1">
-          <div class="names">{{ item1.deptName }}</div>
-          <div class="rens">{{item1.peopleNum}}人</div>
-          <div class="btn">
-            <el-button size="btJS" @click="chaKan(item1.deptId)"
-              >查看</el-button
-            >
-          </div>
-        </li>
-      </ul>
+  <div class="personnel-roster-container">
+    <!-- 左侧部门列表 -->
+    <div class="department-list">
+      <div class="department-title">部门列表</div>
+      <div 
+        v-for="(item, i) in lieList" 
+        :key="i"
+        class="department-item"
+        :class="{ active: selectedDeptId === item.deptId }"
+        @click="selectDepartment(item.deptId)"
+      >
+        <div class="dept-name">{{ item.deptName }}</div>
+        <div class="people-count">{{item.peopleNum}}人</div>
+      </div>
+      <div v-if="lieList.length === 0" class="empty-tip">暂无部门数据</div>
     </div>
 
-    <!-- 查看第一次 -->
-    <!-- <el-dialog
-      :visible.sync="tableStatus"
-      :title="title"
-      append-to-body
-      id="list"
-      :close-on-click-modal="false"
-      custom-class="lieBiao"
-    >
-      <el-table
-        v-loading="loading"
-        :data="bdglevenList"
-        :header-cell-style="{ background: '#003C69', color: 'white' }"
-      >
-        <el-table-column label="序号" type="index" width="50" align="center">
-          <template scope="scope">
-            <span>{{
-              (queryParams.pageNum - 1) * queryParams.pageSize +
-              scope.$index +
-              1
-            }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column
-          label="单位"
-          align="center"
-          prop="deptName"
-          show-overflow-tooltip
-          width="150"
-        />
-        <el-table-column label="姓名" align="center" prop="name" />
-        <el-table-column label="性别" align="center" prop="sex">
-          <template slot-scope="scope">
-            <dict-tag
-              :options="dict.type.sys_user_sex"
-              :value="scope.row.sex"
-            />
-          </template>
-        </el-table-column>
-        <el-table-column label="年龄" align="center" prop="age" />
-        <el-table-column
-          label="身份证号"
-          align="center"
-          prop="idcard"
-          width="170"
-          show-overflow-tooltip
-        />
-        <el-table-column
-          label="部职别"
-          align="center"
-          width="200"
-          prop="duty"
-          show-overflow-tooltip
-        />
-        <el-table-column label="职务" align="center" width="120" prop="postId">
-          <template slot-scope="scope">
-            <dict-tag
-              :options="dict.type.post_Level"
-              :value="scope.row.postId"
-            />
-          </template>
-        </el-table-column>
-        <el-table-column
-          label="职务等级时间"
-          align="center"
-          prop="postDate"
-          width="180"
+    <!-- 右侧人员详情 -->
+    <div class="personnel-details">
+      <div v-if="selectedDeptId" class="details-content">
+        <div class="details-header">
+          <h3>{{ currentDeptName }}</h3>
+          <div class="total-count">共 {{ total }} 人</div>
+        </div>
+        
+        <el-table
+          v-loading="loading"
+          :data="bdglevenList"
+          :header-cell-style="{ background: '#003C69', color: 'white' }"
+          style="width: 100%"
         >
-          <template slot-scope="scope">
-            <span>{{ parseTime(scope.row.postDate, "{y}-{m}-{d}") }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column
-          label="籍贯"
-          align="center"
-          prop="origin"
-          width="150"
+          <el-table-column label="序号" type="index" width="50" align="center">
+            <template slot-scope="scope">
+              <span>{{
+                (queryParams.pageNum - 1) * queryParams.pageSize +
+                scope.$index +
+                1
+              }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="单位"
+            align="center"
+            prop="deptName"
+            show-overflow-tooltip
+            width="150"
+          />
+          <el-table-column label="姓名" align="center" prop="name" />
+          <el-table-column label="性别" align="center" prop="sex">
+            <template slot-scope="scope">
+              <dict-tag
+                :options="dict.type.sys_user_sex"
+                :value="scope.row.sex"
+              />
+            </template>
+          </el-table-column>
+          <el-table-column label="年龄" align="center" prop="age" />
+          <el-table-column
+            label="身份证号"
+            align="center"
+            prop="idcard"
+            width="170"
+            show-overflow-tooltip
+          />
+          <el-table-column
+            label="部职别"
+            align="center"
+            width="200"
+            prop="duty"
+            show-overflow-tooltip
+          />
+          <el-table-column label="职务" align="center" width="120" prop="postId">
+            <template slot-scope="scope">
+              <dict-tag
+                :options="dict.type.post_Level"
+                :value="scope.row.postId"
+              />
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="职务等级时间"
+            align="center"
+            prop="postDate"
+            width="180"
+          >
+            <template slot-scope="scope">
+              <span>{{ parseTime(scope.row.postDate, "{y}-{m}-{d}") }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="籍贯"
+            align="center"
+            prop="origin"
+            width="150"
+          />
+          <el-table-column
+            label="在位情况"
+            align="center"
+            prop="reign"
+            width="90"
+          >
+            <template slot-scope="scope">
+              <dict-tag
+                :options="dict.type.people_state"
+                :value="scope.row.reign"
+              />
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="操作"
+            align="center"
+            class-name="small-padding fixed-width"
+            width="100"
+            fixed="right"
+          >
+            <template slot-scope="scope">
+              <el-button size="btk" type="text" @click="handleChakan(scope.row)"
+                ><span class="chakan">查看</span>
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <pagination
+          v-show="total > 0"
+          :total="total"
+          :page.sync="queryParams.pageNum"
+          :limit.sync="queryParams.pageSize"
+          @pagination="handlePagination"
         />
-        <el-table-column
-          label="在位情况"
-          align="center"
-          prop="reign"
-          width="90"
-        >
-          <template slot-scope="scope">
-            <dict-tag
-              :options="dict.type.people_state"
-              :value="scope.row.reign"
-            />
-          </template>
-        </el-table-column>
-        <el-table-column
-          label="操作"
-          align="center"
-          class-name="small-padding fixed-width"
-          width="200"
-          fixed="right"
-        >
-          <template slot-scope="scope">
-            <el-button size="btk" type="text" @click="handleChakan(scope.row)"
-              ><span class="chakan">查看</span>
-            </el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-
-      <pagination
-        v-show="total > 0"
-        :total="total"
-        :page.sync="queryParams.pageNum"
-        :limit.sync="queryParams.pageSize"
-        @pagination="chaKan1"
-      />
-    </el-dialog> -->
+      </div>
+      
+      <div v-else class="no-selection">
+        <div class="empty-icon">👥</div>
+        <div class="empty-text">请选择一个部门查看人员详情</div>
+      </div>
+    </div>
+
+    <!-- 人员详情弹窗 -->
+    <div class="fff">
+      <el-dialog
+        :visible.sync="menuRoleVisible"
+        :title="title"
+        append-to-body
+        id="chakan"
+        :close-on-click-modal="false"
+      >
+        <personnelRoster
+          v-if="menuRoleVisible"
+          ref="menuRole"
+          :message="wordInfo"
+          :renshu="renshu"
+        ></personnelRoster>
+      </el-dialog>
+    </div>
 
     <div class="fff">
       <el-dialog
@@ -157,24 +177,15 @@
 
 <script>
 import personnelRoster from "@/components/look_word/personnelRoster.vue";
-import { listTypestatistics } from "@/api/peopleManage/typestatistics";
 import {
-  listPeople,
-  getPeople,
-  delPeople,
-  addPeople,
-  updatePeople,
-  exportPeople,
   getDept,
   treeselect,
 } from "@/api/peopleManage/people";
-import Treeselect from "@riophae/vue-treeselect";
 import {
   getPersonnelRosterList,
   getPersonnelRosterOnUnitList,
 } from "@/api/grassrootsregistration/personnelRoster";
 import {
-  getXiangQis,
   getRenYuanXiangQing,
 } from "@/api/grassrootsregistration/bdglmeeting";
 
@@ -239,8 +250,6 @@ export default {
       status: null,
       arr: [],
       lieList: [],
-      //查看页面
-      menuRoleVisible: false,
       // 表单校验
       rules: {},
       //性别数组
@@ -288,6 +297,10 @@ export default {
       value: null,
       tableStatus: false,
       bdglevenList: [],
+      // 新增：选中的部门ID
+      selectedDeptId: null,
+      // 新增：当前选中部门名称
+      currentDeptName: '',
     };
   },
   // updated() {
@@ -308,47 +321,44 @@ export default {
     });
   },
   methods: {
-    chaKan(row) {
-      this.opens = false;
-      const deptId = row;
-      getRenYuanXiangQing(deptId).then((response) => {
-        this.renshu = response.data[0];
-        this.wordInfo = response.data[1];
-        this.title = "查看人员名册";
-        this.menuRoleVisible = true;
-        console.log("请求参数是：", this.queryParams);
-        console.log("接口返回的数据：", res);
-      })
-      console.log("请求参数是：", this.queryParams);
-      console.log("接口返回的数据：", res);
-      // this.queryParams.unitId = row;
-      // this.unitId = row;
-      // getPersonnelRosterOnUnitList(this.queryParams).then((res) => {
-      //   this.bdglevenList = res.rows;
-      //   this.total = res.total;
-      //   this.title = "查看人员名册";
-      //   this.tableStatus = true;
-      //   this.loading = false;
-      // });
+    // 选择部门
+    selectDepartment(deptId) {
+      this.selectedDeptId = deptId;
+      // 获取部门名称
+      const selectedDept = this.lieList.find(item => item.deptId === deptId);
+      if (selectedDept) {
+        this.currentDeptName = selectedDept.deptName;
+      }
+      
+      // 查询该部门的人员数据
+      this.queryParams.unitId = deptId;
+      this.queryParams.pageNum = 1; // 重置页码
+      this.loading = true;
+      
+      getPersonnelRosterOnUnitList(this.queryParams).then((res) => {
+        this.bdglevenList = res.rows || [];
+        this.total = res.total || 0;
+        this.loading = false;
+      }).catch(error => {
+        console.error("获取部门人员数据失败:", error);
+        this.bdglevenList = [];
+        this.total = 0;
+        this.loading = false;
+      });
     },
-    chaKan1(row) {
-      getMeetRecordOnUnitList(this.queryParams).then((res) => {
-        this.bdglevenList = res.rows;
-        this.total = res.total;
-        this.title = "查看人员名册";
-        this.tableStatus = true;
+    
+    // 处理分页
+    handlePagination() {
+      getPersonnelRosterOnUnitList(this.queryParams).then((res) => {
+        this.bdglevenList = res.rows || [];
+        this.total = res.total || 0;
+      }).catch(error => {
+        console.error("分页查询失败:", error);
+        this.bdglevenList = [];
+        this.total = 0;
       });
     },
     /** 查询人员管理列表 */
-    // getList() {
-    //     getPersonnelRosterList().then((res) => {
-    //       res.rows.forEach((item) => {
-    //         this.status = 1;
-    //       });
-    //       this.lieList = res.rows;
-    //       console.log(res.rows);
-    //     });
-    // },
     getList() {
       this.loading = true;
       getPersonnelRosterList().then((res) => {
@@ -388,9 +398,7 @@ export default {
     },
     //查看按钮操作
     handleChakan(row) {
-      console.log(row.deptId);
       // 是否隐藏按钮
-      this.opens = false;
       const deptId = row.deptId;
       getRenYuanXiangQing(deptId).then((response) => {
         this.renshu = response.data[0];
@@ -418,135 +426,205 @@ export default {
 };
 </script>
 <style  scoped>
-::v-deep .el-dialog {
-  width: 1070px !important;
+/* 主容器样式 */
+.personnel-roster-container {
+  display: flex;
+  height: calc(100vh - 60px);
+  padding: 20px;
+  gap: 20px;
 }
 
-::v-deep .el-dialog__body {
-  margin: 10px 30px 20px 44px;
-  padding-top: 20px !important;
-  box-sizing: border-box;
+/* 左侧部门列表样式 */
+.department-list {
+  width: 300px;
+  background: rgba(0, 60, 105, 0.3);
+  border: 1px solid #718a9d;
+  border-radius: 8px;
+  padding: 20px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
 }
 
-::v-deep .el-dialog__header {
+.department-title {
+  font-size: 18px;
+  font-weight: bold;
+  color: #fff;
+  margin-bottom: 20px;
+  text-align: center;
+  padding-bottom: 10px;
   border-bottom: 1px solid #718a9d;
 }
 
-.arr_conten {
-  padding-top: 20px;
+.department-item {
+  background: rgba(0, 60, 105, 0.5);
+  border: 1px solid #3d83b8;
+  border-radius: 6px;
+  padding: 15px;
+  margin-bottom: 12px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.department-item:hover {
+  background: rgba(0, 60, 105, 0.8);
+  border-color: #90cef1;
+  transform: translateX(5px);
+}
+
+.department-item.active {
+  background: rgba(0, 120, 215, 0.7);
+  border-color: #90cef1;
+  box-shadow: 0 0 10px rgba(144, 206, 252, 0.3);
+}
+
+.dept-name {
+  color: #fff;
+  font-size: 16px;
+  font-weight: 500;
+  margin-bottom: 8px;
+}
+
+.people-count {
+  color: #90cef1;
+  font-size: 14px;
+}
+
+.empty-tip {
+  color: #90cef1;
+  text-align: center;
+  padding: 40px 0;
+  font-size: 14px;
 }
 
-ul {
-  /* justify-content: space-between; */
-  padding: 0 22px;
+/* 右侧人员详情样式 */
+.personnel-details {
+  flex: 1;
+  background: rgba(0, 60, 105, 0.3);
+  border: 1px solid #718a9d;
+  border-radius: 8px;
   display: flex;
-  flex-wrap: wrap;
+  flex-direction: column;
+  min-width: 0;
 }
-.span {
+
+.details-content {
+  height: 100%;
   display: flex;
-  flex-wrap: wrap;
+  flex-direction: column;
+  padding: 20px;
 }
 
-li {
-  list-style: none;
-  background: url("../../../assets/images/book.png") no-repeat;
-  height: 140px;
-  width: 222px;
-  /* margin: 20px 0; */
+.details-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   margin-bottom: 20px;
-  background-size: 100% 100%;
-  flex: 0 0 16%;
-  margin-right: 10px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #718a9d;
 }
 
-.names {
+.details-header h3 {
   color: #fff;
-  font-size: 14px;
-  text-align: center;
-  padding: 26px 26px 38px 26px;
-  letter-spacing: 1px;
+  font-size: 20px;
+  margin: 0;
 }
-.rens{
-  color: #fff;
-  font-size: 14px;
-  text-align: center;
-  position: relative;
-  left: 0%;
-  top: -12%;
-  letter-spacing: 1px;
+
+.total-count {
+  color: #90cef1;
+  font-size: 16px;
+  font-weight: 500;
 }
 
-.btn {
-  text-align: center;
+.no-selection {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: #90cef1;
 }
 
-::v-deep .lieBiao {
-  background: #004d86 !important;
-  min-height: 42vh !important;
+.empty-icon {
+  font-size: 64px;
+  margin-bottom: 20px;
 }
 
-::v-deep .el-dialog__title {
-  color: #fff;
-  font: 18px;
+.empty-text {
+  font-size: 18px;
+}
+
+/* 表格样式 */
+::v-deep .el-table {
+  flex: 1;
+  background: transparent;
+}
+
+::v-deep .el-table__header-wrapper th {
+  background-color: #003C69 !important;
+  color: white !important;
+  border-bottom: 1px solid #718a9d;
+}
+
+::v-deep .el-table__body-wrapper {
+  overflow-y: auto;
+  flex: 1;
 }
 
-::v-deep .el-dialog__headerbtn .el-dialog__close {
+::v-deep .el-table__row {
+  background-color: rgba(0, 54, 95, 0.8);
   color: #fff;
 }
 
+::v-deep .el-table__row:nth-child(even) {
+  background-color: rgba(0, 54, 95, 0.6);
+}
+
+::v-deep .el-table__row:hover {
+  background-color: #3c749d !important;
+}
+
+::v-deep .el-table__body tr:hover > td {
+  background-color: transparent !important;
+}
+
+/* 分页样式 */
 ::v-deep .pagination-container {
-  /* display: none;  */
-  position: relative;
-  height: 49px;
-  margin-bottom: 10px;
-  margin-top: 6vh;
-  padding: 10px 20px !important;
+  margin-top: 20px;
+  padding: 10px 0;
   background: transparent !important;
 }
 
 ::v-deep .el-pagination .el-select .el-input .el-input__inner {
   background: #00365f !important;
+  border-color: #718a9d;
+  color: #fff;
 }
 
 ::v-deep .el-pagination.is-background .btn-prev,
-.el-pagination.is-background .btn-next {
+::v-deep .el-pagination.is-background .btn-next {
   background: #00365f !important;
+  border-color: #718a9d;
+  color: #fff;
 }
 
 ::v-deep .el-pagination__editor.el-input .el-input__inner {
   background: #00365f !important;
-}
-
-::v-deep .el-pagination.is-background .btn-next {
-  background: #00365f !important;
+  border-color: #718a9d;
+  color: #fff;
 }
 
 ::v-deep .el-pagination.is-background .el-pager li {
   background: #00365f;
+  color: #fff;
 }
 
-::v-deep .el-table__body tr:hover > td {
-  background-color: #3c749d !important;
-}
-::v-deep .el-table tr:nth-child(even) {
-  background: #00365f;
-}
-
-::v-deep .el-input__inner {
-  cursor: pointer !important;
-}
-
-::v-deep .el-input__inner {
-  background: transparent;
+::v-deep .el-pagination.is-background .el-pager li.active {
+  background: #3c749d;
   color: #fff;
-  border: 1px solid white !important;
-  border-color: #fff !important;
 }
 
-::v-deep .el-input--medium .el-input__inner {
-  height: 36px;
-  line-height: 37px;
-}
+/* 弹窗样式保持不变 */
 #chakan ::v-deep .el-dialog {
   min-height: 700px;
   background: #fff !important;
@@ -555,36 +633,37 @@ li {
 #chakan /deep/ .el-dialog__body {
   padding: 30px 30px 30px 30px;
 }
-.divbox {
-  width: 1016px !important;
-  min-height: 540px;
-}
-.divbox img {
-  width: 700px;
-  height: 500px;
-  border-radius: 10px;
-}
+
 img {
   object-fit: cover;
 }
-/* 添加内部滚动条 */
-::v-deep .el-dialog__body {
-  overflow: auto;
-  overflow-x: hidden;
+
+/* 滚动条样式 */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
 }
 
-/*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
-::v-deep .el-dialog__body ::-webkit-scrollbar {
-  width: 14px;
-  /* height: 2px !important; */
+::-webkit-scrollbar-track {
+  background: rgba(0, 60, 105, 0.3);
+}
+
+::-webkit-scrollbar-thumb {
   background: #3d83b8;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #90cef1;
 }
 
-/*定义滑块，内阴影及圆角*/
-::v-deep .el-dialog__body ::-webkit-scrollbar-thumb {
-  /* border-radius: 20px; */
-  /* height: 1px;
-  width: 3px; */
-  background: rgba(144, 206, 252, 1);
+/* 查看按钮样式 */
+.chakan {
+  color: #90cef1;
+}
+
+.chakan:hover {
+  color: #fff;
+  text-decoration: underline;
 }
-</style>
+</style>

src/views/peopleChuRu/peopleAccess/index.vue

@@ -1,45 +1,113 @@
 <template>
   <div class="app-container">
-    <h2>人员出入管理（模拟人脸识别）</h2>
-
-    <!-- 人员表 -->
-    <el-table :data="peopleList" border style="width: 100%; margin-bottom: 30px;">
-      <el-table-column prop="id" label="人员ID" width="80" />
-      <el-table-column prop="name" label="姓名" width="120" />
-      <el-table-column prop="dept" label="部门" width="180" />
-      <el-table-column label="当前状态" width="120">
-        <template slot-scope="scope">
-          <el-tag :type="scope.row.status === '在营' ? 'success' : 'info'">
-            {{ scope.row.status }}
-          </el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" width="160">
-        <template slot-scope="scope">
-          <el-button size="mini" type="primary" @click="mockRecognition(scope.row, '入')">模拟入营</el-button>
-          <el-button size="mini" type="danger" @click="mockRecognition(scope.row, '出')">模拟出营</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <!-- 日志记录 -->
-    <el-card shadow="hover">
-      <div slot="header">
-        <span>人脸识别出入记录</span>
+
+    <!-- 主内容区域 -->
+    <div class="content-wrapper">
+      <!-- 左侧人员信息卡片 -->
+      <div class="people-section">
+        <div class="section-header">
+          <div class="section-title">人员列表</div>
+          <div class="section-stats">共 {{ peopleList.length }} 人</div>
+        </div>
+        
+        <!-- 人员卡片列表 -->
+        <div class="people-cards">
+          <div 
+            v-for="person in peopleList" 
+            :key="person.id" 
+            class="person-card"
+            :class="{
+              'person-in': person.status === '在营',
+              'person-out': person.status === '外出',
+              'person-unknown': person.status === '未识别'
+            }"
+          >
+            <div class="person-avatar">{{ person.name.charAt(0) }}</div>
+            <div class="person-info">
+              <div class="person-name">{{ person.name }}</div>
+              <div class="person-id">ID: {{ person.id }}</div>
+              <div class="person-dept">{{ person.dept }}</div>
+              <div class="person-status">
+                <el-tag 
+                  :type="getTagType(person.status)" 
+                  size="small"
+                  effect="dark"
+                >
+                  {{ person.status }}
+                </el-tag>
+              </div>
+            </div>
+            <div class="person-actions">
+              <el-button 
+                size="small" 
+                type="success" 
+                plain
+                icon="el-icon-check" 
+                @click="mockRecognition(person, '入')"
+                :disabled="person.status === '在营'"
+              >
+                入营
+              </el-button>
+              <el-button 
+                size="small" 
+                type="danger" 
+                plain
+                icon="el-icon-close" 
+                @click="mockRecognition(person, '出')"
+                :disabled="person.status === '外出'"
+              >
+                出营
+              </el-button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 右侧出入记录 -->
+      <div class="log-section">
+        <el-card class="log-card" shadow="hover">
+          <div slot="header" class="log-header">
+            <div class="log-title">
+              <i class="el-icon-timer"></i> 人脸识别出入记录
+            </div>
+            <div class="log-stats" v-if="logList.length > 0">
+              今日记录: {{ logList.length }}
+            </div>
+          </div>
+          
+          <!-- 日志表格 -->
+          <div class="log-table-wrapper">
+            <el-table 
+              v-loading="false" 
+              :data="logList" 
+              style="width: 100%"
+              class="log-table"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="time" label="时间"  />
+              <el-table-column prop="name" label="姓名">
+                <template slot-scope="scope">
+                  <div class="log-name">{{ scope.row.name }}</div>
+                </template>
+              </el-table-column>
+              <el-table-column prop="dept" label="部门" />
+              <el-table-column prop="action" label="出入类型" >
+                <template slot-scope="scope">
+                  <el-tag 
+                    :type="scope.row.action === '入营' ? 'success' : 'danger'" 
+                    class="action-tag"
+                    effect="dark"
+                  >
+                    {{ scope.row.action }}
+                  </el-tag>
+                </template>
+              </el-table-column>
+            </el-table>
+            
+          </div>
+        </el-card>
       </div>
-      <el-table :data="logList" border style="width: 100%">
-        <el-table-column prop="time" label="时间" width="180" />
-        <el-table-column prop="name" label="姓名" width="120" />
-        <el-table-column prop="dept" label="部门" width="180" />
-        <el-table-column prop="action" label="出入类型" width="120">
-          <template slot-scope="scope">
-            <el-tag :type="scope.row.action === '入营' ? 'success' : 'danger'">
-              {{ scope.row.action }}
-            </el-tag>
-          </template>
-        </el-table-column>
-      </el-table>
-    </el-card>
+    </div>
   </div>
 </template>
 
@@ -59,7 +127,29 @@ export default {
     };
   },
   methods: {
+    // 根据状态获取标签类型
+    getTagType(status) {
+      switch(status) {
+        case '在营': return 'success';
+        case '外出': return 'danger';
+        default: return 'info';
+      }
+    },
+    
+    // 表格行样式
+    tableRowClassName({ row, rowIndex }) {
+      return 'log-row';
+    },
+    
+    // 模拟人脸识别
     mockRecognition(person, type) {
+      // 显示操作成功提示
+      this.$message({
+        message: `${person.name} ${type === '入' ? '入营' : '出营'}成功`,
+        type: 'success',
+        duration: 2000
+      });
+      
       // 更新时间
       const now = new Date();
       const time = now.toLocaleString();
@@ -67,7 +157,7 @@ export default {
       // 更新状态
       person.status = type === "入" ? "在营" : "外出";
 
-      // 写入日志
+      // 写入日志并添加动画效果
       this.logList.unshift({
         time,
         name: person.name,
@@ -80,7 +170,493 @@ export default {
 </script>
 
 <style scoped>
-h2 {
+/* 全局样式 */
+.app-container {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #0c1624 0%, #1a2a40 100%);
+  padding: 20px;
+  color: #e3f2fd;
+  margin: 0;
+  overflow-x: hidden;
+}
+
+/* 页面标题已移除 */
+
+/* 主内容区域 */
+.content-wrapper {
+  display: flex;
+  gap: 20px;
+  height: calc(100vh - 40px);
+  width: 100%;
+  max-width: 1400px;
+  margin: 0 auto;
+  box-sizing: border-box;
+  overflow-x: hidden;
+  position: relative;
+}
+
+/* 人员区域 */
+.people-section {
+  flex: 1;
+  background: rgba(26, 42, 64, 0.8);
+  border-radius: 12px;
+  padding: 20px;
+  border: 1px solid rgba(56, 142, 255, 0.3);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+  display: flex;
+  flex-direction: column;
+}
+
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   margin-bottom: 20px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid rgba(56, 142, 255, 0.3);
+}
+
+.section-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #ffffff;
+}
+
+.section-stats {
+  font-size: 14px;
+  color: #64b5f6;
+}
+
+/* 人员卡片列表 */
+.people-cards {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  overflow-y: auto;
+  flex: 1;
+}
+
+.people-cards::-webkit-scrollbar {
+  width: 6px;
+}
+
+.people-cards::-webkit-scrollbar-track {
+  background: rgba(26, 42, 64, 0.5);
+  border-radius: 3px;
+}
+
+.people-cards::-webkit-scrollbar-thumb {
+  background: rgba(56, 142, 255, 0.6);
+  border-radius: 3px;
+}
+
+/* 人员卡片 */
+.person-card {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 15px;
+  padding: 15px;
+  background: rgba(26, 42, 64, 0.7);
+  border-radius: 8px;
+  transition: all 0.3s ease;
+  border: 1px solid rgba(56, 142, 255, 0.2);
+}
+
+.person-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(56, 142, 255, 0.2);
+  background: rgba(26, 42, 64, 0.9);
+  border-color: rgba(56, 142, 255, 0.4);
+}
+
+.person-card.person-in {
+  border-color: rgba(76, 175, 80, 0.4);
+  background: rgba(76, 175, 80, 0.05);
+}
+
+.person-card.person-out {
+  border-color: rgba(244, 67, 54, 0.4);
+  background: rgba(244, 67, 54, 0.05);
+}
+
+.person-card.person-unknown {
+  border-color: rgba(56, 142, 255, 0.4);
+  background: rgba(56, 142, 255, 0.05);
+}
+
+/* 人员头像 */
+.person-avatar {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  background: linear-gradient(45deg, #1976d2, #42a5f5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+  font-weight: 600;
+  color: white;
+  box-shadow: 0 2px 10px rgba(25, 118, 210, 0.4);
+  flex-shrink: 0;
+}
+
+/* 人员信息 */
+.person-info {
+  flex: 1;
+}
+
+.person-name {
+  font-size: 16px;
+  font-weight: 600;
+  color: #ffffff;
+  margin-bottom: 3px;
+}
+
+.person-id,
+.person-dept {
+  font-size: 13px;
+  color: #90caf9;
+  margin-bottom: 2px;
+}
+
+.person-status {
+  margin-top: 5px;
+}
+
+/* 人员操作按钮 */
+.person-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  align-items: flex-end;
+  flex-shrink: 0;
+}
+
+.el-button {
+  transition: all 0.3s ease;
+  min-width: 80px;
+}
+
+.el-button:hover:not(:disabled) {
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(56, 142, 255, 0.3);
+}
+
+.el-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* 日志区域 */
+.log-section {
+  flex: 2;
+  width: 100%;
+  box-sizing: border-box;
+  min-width: 0; /* 防止flex子元素溢出 */
+}
+
+.log-card {
+  height: 100%;
+  background: rgba(26, 42, 64, 0.8);
+  border: 1px solid rgba(56, 142, 255, 0.3);
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+  margin: 0 !important;
+  padding: 0 !important;
+}
+
+.log-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: rgba(26, 42, 64, 0.95);
+  padding: 15px 20px;
+  border-bottom: 1px solid rgba(56, 142, 255, 0.3);
+}
+
+.log-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #ffffff;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.log-stats {
+  font-size: 14px;
+  color: #64b5f6;
+}
+
+/* 日志表格 */
+.log-table-wrapper {
+  height: calc(100% - 60px);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.log-table {
+  background: transparent;
+  flex: 1;
+  overflow: hidden;
+  width: 100% !important;
+  box-sizing: border-box;
+}
+
+.log-table .el-table__header {
+  background: rgba(26, 42, 64, 0.95);
+}
+
+.log-table .el-table__header th {
+  background: transparent !important;
+  color: #e3f2fd !important;
+  border-bottom: 1px solid rgba(56, 142, 255, 0.3) !important;
+  font-weight: 600 !important;
+  padding: 12px 10px !important;
+}
+
+.log-table .el-table__body-wrapper {
+  overflow-y: auto;
+  height: calc(100% - 40px);
+  width: 100% !important;
+}
+
+.log-table .el-table__body-wrapper::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.log-table .el-table__body-wrapper::-webkit-scrollbar-track {
+  background: rgba(26, 42, 64, 0.5);
+  border-radius: 3px;
+}
+
+.log-table .el-table__body-wrapper::-webkit-scrollbar-thumb {
+  background: rgba(56, 142, 255, 0.6);
+  border-radius: 3px;
+}
+
+.log-row {
+  transition: all 0.2s ease;
+  background: rgba(26, 42, 64, 0.7) !important;
+}
+
+.log-row:hover {
+  background: rgba(26, 42, 64, 0.9) !important;
+}
+
+.log-table .el-table__row td {
+  border-bottom: 1px solid rgba(56, 142, 255, 0.2) !important;
+  color: #e3f2fd !important;
+  padding: 12px 10px !important;
+}
+
+.log-name {
+  font-weight: 600;
+  color: #ffffff;
+}
+
+.action-tag {
+  font-weight: 600;
+}
+
+/* 空状态 */
+.empty-log {
+  height: 200px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.el-empty {
+  color: #64b5f6;
+}
+
+/* 确保Element UI组件正确适配 */
+.el-table,
+.log-table {
+  --el-table-bg-color: transparent !important;
+  --el-table-header-bg-color: transparent !important;
+  --el-table-row-hover-bg-color: rgba(26, 42, 64, 0.9) !important;
+  --el-table-border-color: rgba(56, 142, 255, 0.2) !important;
+  background-color: transparent !important;
+  width: 100% !important;
+  overflow-x: hidden !important; /* 防止表格溢出 */
+}
+
+/* 表格容器宽度确保 - 加强版 */
+.log-section,
+.log-card,
+.log-table-wrapper,
+.el-table,
+.log-table,
+.el-table__inner-wrapper,
+.el-table__body-wrapper,
+.el-table__header-wrapper,
+.el-table__container {
+  width: 100% !important;
+  min-width: 0 !important;
+  max-width: 100% !important;
+  overflow-x: hidden !important;
+  box-sizing: border-box !important;
+  position: relative;
+}
+
+/* 强制表格列自适应 */
+.el-table th.gutter,
+.el-table td.gutter {
+  width: 0 !important;
+  padding: 0 !important;
+}
+
+/* 防止表格内容溢出 */
+.el-table th,
+.el-table td {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  box-sizing: border-box !important;
+  padding: 12px 8px !important; /* 减少内边距 */
+  max-width: 150px; /* 限制单元格最大宽度 */
+}
+
+/* 确保没有额外的内边距影响宽度 */
+.log-card .el-card__body {
+  padding: 0 !important;
+  margin: 0 !important;
+}
+
+/* 确保表格行宽度 */
+.el-table__row {
+  width: 100% !important;
+  box-sizing: border-box !important;
+}
+
+/* 表头样式强制覆盖 */
+.el-table th,
+.el-table thead th,
+.log-table th,
+.log-table thead th {
+  background-color: rgba(26, 42, 64, 0.95) !important;
+  color: #e3f2fd !important;
+  border-bottom: 1px solid rgba(56, 142, 255, 0.3) !important;
+  font-weight: 600 !important;
+  padding: 12px 10px !important;
+}
+
+/* 表格行样式强制覆盖 */
+.el-table td,
+.el-table tr,
+.log-table td,
+.log-table tr {
+  background-color: transparent !important;
+  border-bottom: 1px solid rgba(56, 142, 255, 0.2) !important;
+  color: #e3f2fd !important;
+}
+
+/* 确保行背景色 */
+.el-table__row {
+  background-color: rgba(26, 42, 64, 0.7) !important;
+}
+
+.el-table__row:hover {
+  background-color: rgba(26, 42, 64, 0.9) !important;
+}
+
+/* 确保卡片无边距 */
+.el-card__body {
+  padding: 0 !important;
+  margin: 0 !important;
+  height: 100%;
+}
+
+/* 移除表格默认边框 */
+.el-table--border,
+.el-table--group {
+  border: none !important;
+}
+
+.el-table--border th,
+.el-table--group th,
+.el-table--border td,
+.el-table--group td {
+  border-right: none !important;
+  border-left: none !important;
+}
+
+/* 确保表格内容区域样式 */
+.el-table__inner-wrapper {
+  overflow-x: hidden !important;
+}
+
+/* 确保标签样式 */
+.el-tag {
+  border-radius: 4px;
+  padding: 0 8px;
+  height: 24px;
+  line-height: 22px;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .content-wrapper {
+    flex-direction: column;
+    height: auto;
+  }
+  
+  .people-section,
+  .log-section {
+    height: auto;
+    min-height: 400px;
+  }
+}
+
+/* 针对不同屏幕宽度的优化 */
+@media (max-width: 1200px) {
+  .content-wrapper {
+    padding: 0;
+    gap: 15px;
+  }
+  
+  .el-table th,
+  .el-table td {
+    padding: 10px 6px !important;
+    font-size: 13px;
+  }
+  
+  .people-section {
+    flex: 0.8;
+  }
+}
+
+/* 动画效果 */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .content-wrapper {
+    flex-direction: column;
+    height: auto;
+  }
+  
+  .people-section,
+  .log-section {
+    height: auto;
+    min-height: 400px;
+  }
 }
 </style>