差登录模块 、首页模块、权限模块

package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@easydarwin/easyplayer": "^5.0.7",
-    "@element-plus/icons-vue": "^2.3.1",
+    "@element-plus/icons-vue": "^2.0.10",
     "@liveqing/liveplayer-v3": "^3.7.10",
     "animate.css": "^4.1.1",
     "axios": "^1.3.2",

src/layout/sidebar/SidevarItem.vue

@@ -56,6 +56,27 @@
           <svg-icon v-else iconName="identity" class="iconClass"></svg-icon>
           <span>{{ item.meta.title }}</span>
         </el-menu-item>
+        <!-- 年级管理 -->
+        <el-sub-menu :index="item.name" v-if="item.name == 'classGrade'">
+          <template #title>
+            <svg-icon
+              v-if="
+                activeIndex == '/wanzai/class' ||
+                activeIndex == '/wanzai/grades' ||
+                activeIndex == '/wanzai/post'
+              "
+              iconName="classGrade_s"
+              class="iconClass"
+            ></svg-icon>
+            <svg-icon v-else iconName="classGrade" class="iconClass"></svg-icon>
+            <span>{{ item.meta.title }}</span>
+          </template>
+          <el-menu-item v-for="i in item.children" :index="`/wanzai/${i.name}`">
+            <template #title>
+              <span>{{ i.meta.title }}</span>
+            </template>
+          </el-menu-item>
+        </el-sub-menu>
         <!-- 应用管理 -->
         <el-menu-item
           :index="`/wanzai/${item.name}`"

src/router/index.js

@@ -14,10 +14,6 @@ const routes = [
     component: () => import("@/views/login/index.vue"),
   },
   {
-    path: "/bind",
-    component: () => import("@/views/login/bind.vue"),
-  },
-  {
     path: "/",
     redirect: "/login",
   },
@@ -45,6 +41,24 @@ const routes = [
         component: () => import("@/views/identity/identity.vue"),
       },
       {
+        path: "class",
+        name: "class",
+        meta: { isAuth: true, title: "班级管理" },
+        component: () => import("@/views/class/class.vue"),
+      },
+      {
+        path: "grades",
+        name: "grades",
+        meta: { isAuth: true, title: "年级管理" },
+        component: () => import("@/views/grades/grades.vue"),
+      },
+      {
+        path: "post",
+        name: "post",
+        meta: { isAuth: true, title: "职务管理" },
+        component: () => import("@/views/post/post.vue"),
+      },
+      {
         path: "apply",
         name: "apply",
         meta: { isAuth: true, title: "应用管理" },
@@ -128,7 +142,6 @@ const routes = [
 const router = createRouter({
   // history: createWebHistory("/smartManage"), // 线上地址
   history: createWebHashHistory("/smartManage"), // 测试环境发布地址
-  // history: createWebHashHistory("/hotelReservation/pc3/"), // 测试环境发布地址
   routes: routes,
 });
 

src/store/modules/user.js

@@ -28,6 +28,25 @@ const state = {
       name: "identity",
       meta: { isAuth: true, title: "身份管理" },
     },
+    // 数据交换
+    {
+      name: "classGrade",
+      meta: { isAuth: true, title: "年级管理" },
+      children: [
+        {
+          name: "class",
+          meta: { isAuth: true, title: "班级管理" },
+        },
+        {
+          name: "grades",
+          meta: { isAuth: true, title: "年级管理" },
+        },
+        {
+          name: "post",
+          meta: { isAuth: true, title: "职务管理" },
+        },
+      ],
+    },
     // 授权管理
     {
       name: "apply",

src/utils/compressImg.js

@@ -0,0 +1,59 @@
+//base64转码（压缩完成后的图片为base64编码，这个方法可以将base64编码转回file文件）
+function dataURLtoFile(dataurl) {
+  var arr = dataurl.split(","),
+    mime = arr[0].match(/:(.*?);/)[1],
+    bstr = atob(arr[1]),
+    n = bstr.length,
+    u8arr = new Uint8Array(n);
+  while (n--) {
+    u8arr[n] = bstr.charCodeAt(n);
+  }
+  return new File([u8arr], { type: mime });
+}
+//压缩图片
+function compressImg(file) {
+  var src;
+  var files;
+  var fileSize = parseFloat(parseInt(file["size"]) / 1024 / 1024).toFixed(2);
+  var read = new FileReader();
+  read.readAsDataURL(file);
+  return new Promise(function (resolve, reject) {
+    read.onload = function (e) {
+      var img = new Image();
+      img.src = e.target.result;
+      img.onload = function () {
+        //默认按比例压缩
+        var w = this.width,
+          h = this.height;
+        //生成canvas
+        var canvas = document.createElement("canvas");
+        var ctx = canvas.getContext("2d");
+        var base64;
+        // 创建属性节点
+        canvas.setAttribute("width", w);
+        canvas.setAttribute("height", h);
+        ctx.drawImage(this, 0, 0, w, h);
+        if (fileSize < 0.2) {
+          base64 = canvas.toDataURL(file["type"], 1);
+        } else if (fileSize < 1) {
+          //如果图片小于一兆 那么不执行压缩操作
+          base64 = canvas.toDataURL(file["type"], 0.5);
+        } else if (fileSize > 1 && fileSize < 2) {
+          //如果图片大于1M并且小于2M 那么压缩0.5
+          base64 = canvas.toDataURL(file["type"], 0.1);
+        } else {
+          //如果图片超过2m 那么压缩0.2
+          base64 = canvas.toDataURL(file["type"], 0.2);
+        }
+        // 回调函数返回file的值（将base64编码转成file）
+        files = dataURLtoFile(base64); //如果后台接收类型为base64的话这一步可以省略
+
+        resolve(files);
+      };
+    };
+  });
+}
+//结尾处将该方法暴露出来供外部调用
+export default {
+  compressImg,
+};

src/views/apply/apply.vue

@@ -114,15 +114,13 @@
               style="width: 500px"
               @change="typeSel"
             >
-              <el-option label="小程序" value="小程序" />
               <el-option label="管理后台" value="管理后台" />
+              <el-option label="移动端H5" value="移动端H5" />
+              <el-option label="小程序" value="小程序" />
+              <el-option label="其他小程序" value="其他小程序" />
             </el-select>
           </el-form-item>
-          <el-form-item
-            v-if="editRuleForm.type == '小程序'"
-            label="logo图标 :"
-            prop="logoUrl"
-          >
+          <el-form-item label="logo图标 :" prop="logoUrl">
             <div class="xcxLogo">
               <img
                 :src="editRuleForm.logoUrl"
@@ -152,13 +150,17 @@
                 </template>
                 <template #tip>
                   <div class="el-upload__tip">
-                    （注：图片格式必须为JPG/PNG格式，大小不超过50Kb）
+                    （ 注：图片格式必须为JPG/PNG格式，大小不超过50Kb ）
                   </div>
                 </template>
               </el-upload>
             </div>
           </el-form-item>
-          <el-form-item label="应用链接 :" prop="applyLink">
+          <el-form-item
+            v-if="editRuleForm.type == '管理后台'"
+            label="应用链接 :"
+            prop="applyLink"
+          >
             <el-input
               v-model="editRuleForm.applyLink"
               placeholder="请输入应用链接"
@@ -166,7 +168,69 @@
               style="width: 500px"
             />
           </el-form-item>
-
+          <el-form-item>
+            <span style="color: red" v-if="editRuleForm.type == '移动端H5'"
+              >配置该应用需要联系创海配置域名</span
+            >
+          </el-form-item>
+          <el-form-item
+            v-if="
+              editRuleForm.type == '小程序' || editRuleForm.type == '其他小程序'
+            "
+            label="APPID :"
+            prop="appid"
+          >
+            <el-input
+              v-model="editRuleForm.appid"
+              placeholder="请输入APPID"
+              clearable
+              style="width: 500px"
+            />
+          </el-form-item>
+          <el-form-item
+            v-if="
+              editRuleForm.type == '小程序' ||
+              editRuleForm.type == '其他小程序' ||
+              editRuleForm.type == '移动端H5'
+            "
+            :label="editRuleForm.type == '移动端H5' ? '应用链接' : '路径'"
+            prop="route"
+          >
+            <el-input
+              v-model="editRuleForm.route"
+              placeholder="请输入路径"
+              clearable
+              style="width: 500px"
+            />
+          </el-form-item>
+          <el-form-item label="应用简介 :" prop="content">
+            <el-input
+              v-model="editRuleForm.content"
+              :rows="4"
+              show-word-limit
+              maxlength="50"
+              type="textarea"
+              placeholder="请输入应用简介"
+            />
+          </el-form-item>
+          <el-form-item
+            v-if="editRuleForm.type == '管理后台'"
+            label="是否置顶 :"
+            prop="switch"
+          >
+            <el-tooltip
+              effect="dark"
+              placement="right"
+              content="置顶功能可将应用在首页展示"
+            >
+              <el-switch
+                v-model="editRuleForm.switch"
+                style="--el-switch-on-color: rgba(41, 109, 227, 1)"
+                active-value="1"
+                inactive-value="2"
+              />
+            </el-tooltip>
+          </el-form-item>
           <el-form-item class="options">
             <el-button
               color="rgba(41, 109, 227, 1)"
@@ -267,7 +331,14 @@ const editRuleForm = reactive({
   name: "", // 名称
   type: "", // 类别
   logoUrl: "", // 图标
+
   applyLink: "", // 应用链接
+  content: "", // 应用简介
+  switch: 2, // 是否置顶
+
+  appId: "", //
+  route: "", // 路径
+
   id: "",
 });
 // 表单验证
@@ -288,6 +359,20 @@ const editRules = reactive({
       trigger: "blur",
     },
   ],
+  appid: [
+    {
+      required: true,
+      message: "APPID不能为空",
+      trigger: "blur",
+    },
+  ],
+  route: [
+    {
+      required: true,
+      message: "路径不能为空",
+      trigger: "blur",
+    },
+  ],
 });
 
 // 打开项目弹窗
@@ -346,6 +431,8 @@ const addApply = async () => {
   editRuleForm.applyLink = "";
   editRuleForm.type = "";
   editRuleForm.logoUrl = "";
+  editRuleForm.route = "";
+  editRuleForm.switch = 2;
   editRuleForm.id = "";
 };
 // 确定添加应用
@@ -355,9 +442,33 @@ const confirmEdit = (formEl) => {
     if (valid) {
       let data = {
         name: editRuleForm.name,
+        logo: editRuleForm.logoUrl,
         category: editRuleForm.type,
         urlLink: editRuleForm.applyLink,
+        descript: editRuleForm.content,
+        route: editRuleForm.route,
+        isTop: editRuleForm.switch,
+        appid: editRuleForm.appid,
       };
+      // if (editRuleForm.type == "管理后台") {
+      //   data = {
+      //     name: editRuleForm.name,
+      //     category: editRuleForm.type,
+      //     urlLink: editRuleForm.applyLink,
+      //   };
+      // } else if (editRuleForm.type == "小程序") {
+      //   data = {
+      //     name: editRuleForm.name,
+      //     category: editRuleForm.type,
+      //     urlLink: editRuleForm.applyLink,
+      //   };
+      // } else if (editRuleForm.type == "移动端H5") {
+      //   data = {
+      //     name: editRuleForm.name,
+      //     category: editRuleForm.type,
+      //     urlLink: editRuleForm.applyLink,
+      //   };
+      // }
       if (editRuleForm.logoUrl) {
         data.logo = editRuleForm.logoUrl;
       }
@@ -402,7 +513,10 @@ const confirmEdit = (formEl) => {
 };
 // 切换类别 （小程序 管理后台）
 const typeSel = () => {
-  editRuleForm.logoUrl = "";
+  editRuleForm.applyLink = "";
+  editRuleForm.route = "";
+  editRuleForm.switch = 2;
+  // editRuleForm.id = "";
 };
 // 封面图上传(------------------------------------------------------)
 // 添加照片时往fileList列表中添加图片信息(封面图上传图片)
@@ -533,6 +647,10 @@ const editClick = async (row) => {
   editRuleForm.type = row.category;
   editRuleForm.applyLink = row.urlLink;
   editRuleForm.logoUrl = row.logo;
+  editRuleForm.switch = row.isTop;
+  editRuleForm.content = row.descript;
+  editRuleForm.route = row.route;
+  editRuleForm.appid = row.appid;
   editRuleForm.id = row.id;
 };
 const cancelEdit = () => {

src/views/caller/caller.vue

@@ -8,13 +8,20 @@
       <div class="middle">
         <div class="filter">
           <div class="condition">
-            <el-input
-              :clearable="true"
-              @clear="searchBtn"
-              v-model="searchInput.keyWord"
-              class="w-50 m-2"
-              placeholder="请输入关键字"
-            />
+            <el-tooltip
+              class="box-item"
+              effect="dark"
+              content="可查询姓名、电话、受访者姓名、受访者接待部门、受访者电话、车牌号"
+              placement="top-start"
+            >
+              <el-input
+                :clearable="true"
+                @clear="searchBtn"
+                v-model="searchInput.keyWord"
+                style="width: 180px"
+                placeholder="请输入关键字"
+              />
+            </el-tooltip>
           </div>
           <el-button
             color="rgba(0, 97, 255, 1)"
@@ -30,6 +37,7 @@
               v-model="searchInput.type"
               class="m-2"
               placeholder="请选择状态"
+              @change="searchBtn"
             >
               <el-option label="全部" value="0" />
               <el-option label="待审核" value="1" />
@@ -50,12 +58,13 @@
               :prefix-icon="Calendar"
               placeholder="请选择日期"
               style="width: 280px"
+              @change="searchBtn"
             />
           </div>
           <div class="condition">
             <span>访问时间&nbsp;&nbsp;</span>
             <el-date-picker
-              v-model="searchInput.createTime"
+              v-model="searchInput.visitorTime"
               type="daterange"
               range-separator="-"
               start-placeholder="起始时间"
@@ -65,11 +74,12 @@
               :prefix-icon="Calendar"
               placeholder="请选择日期"
               style="width: 280px"
+              @change="searchBtn"
             />
           </div>
         </div>
         <!-- 按钮列表 -->
-        <div class="gongneng">
+        <!-- <div class="gongneng">
           <el-button
             type="primary"
             plain
@@ -77,7 +87,7 @@
             @click="selDel"
             ><span>删除访客</span></el-button
           >
-        </div>
+        </div> -->
       </div>
       <div class="footer" v-loading="loading">
         <el-table
@@ -92,36 +102,42 @@
           }"
         >
           <el-table-column align="center" fixed type="selection" />
-          <el-table-column align="center" fixed prop="name" label="姓名" />
+          <el-table-column align="center" fixed prop="userName" label="姓名" />
           <el-table-column
             align="center"
-            prop="phone"
+            prop="userPhone"
             width="145"
             label="联系电话"
           />
           <el-table-column
             align="center"
-            prop="icCard"
+            prop="userNumber"
             width="210"
             label="证件号"
           />
-          <el-table-column align="center" prop="txnum" label="同行人数" />
+          <el-table-column align="center" prop="peerNum" label="同行人数" />
           <el-table-column align="center" prop="carNum" label="车牌号" />
-          <el-table-column align="center" prop="thing" label="访问事由" />
+          <el-table-column
+            align="center"
+            prop="visitReason"
+            width="200"
+            label="访问事由"
+            show-overflow-tooltip
+          />
           <el-table-column align="center" prop="status" label="状态">
             <template #default="scope">
               <span
-                v-if="scope.row.status == 1"
+                v-if="scope.row.statuStr == '待审核'"
                 style="color: rgba(0, 97, 255, 1)"
                 >待审核</span
               >
               <span
-                v-if="scope.row.status == 2"
+                v-if="scope.row.statuStr == '已拒绝'"
                 style="color: rgba(212, 48, 48, 1)"
                 >已拒绝</span
               >
               <span
-                v-if="scope.row.status == 3"
+                v-if="scope.row.statuStr == '已推送'"
                 style="color: rgba(255, 87, 51, 1)"
                 >已推送</span
               >
@@ -135,19 +151,23 @@
           />
           <el-table-column
             align="center"
-            prop="comeTime"
+            prop="visitorTime"
             width="180"
             label="来访时间"
           />
-          <el-table-column align="center" prop="interviewee" label="受访者" />
           <el-table-column
             align="center"
-            prop="intervieweeBM"
+            prop="respondentName"
+            label="受访者"
+          />
+          <el-table-column
+            align="center"
+            prop="departmentId"
             label="接待部门"
           />
           <el-table-column
             align="center"
-            prop="intervieweePhone"
+            prop="respondentPhone"
             width="145"
             label="受访者电话"
           />
@@ -158,8 +178,22 @@
             width="120"
           >
             <template #default="scope">
-              <div class="edit">
+              <div class="edit" v-if="scope.row.statuStr == '待审核'">
                 <div class="look" @click="editClick(scope.row)">审核</div>
+                <el-popconfirm
+                  width="220"
+                  confirm-button-text="确认"
+                  cancel-button-text="取消"
+                  :icon="InfoFilled"
+                  icon-color="#f89626"
+                  title="是否删除该访客人员?"
+                  @confirm="del(scope.row)"
+                  @cancel="cancelEvent"
+                >
+                  <template #reference>
+                    <div class="del">删除</div>
+                  </template>
+                </el-popconfirm>
               </div>
             </template>
           </el-table-column>
@@ -191,24 +225,48 @@
         :before-close="cancelEdit"
       >
         <ul>
-          <li>访客姓名：<span>张三</span></li>
-          <li>访客手机号：<span>18956235689</span></li>
-          <li>来访时间：<span>2023/10/22 12:00</span></li>
-          <li>证件号：<span>362329200108698888</span></li>
-          <li>访问事由：<span>给小孩送棉被</span></li>
-          <li>车牌号：<span>无</span></li>
-          <li>守访学生：<span>张三（4544）</span></li>
+          <li>
+            访客类型：<span>{{
+              editRuleForm.visitorType == 1 ? "家长" : "其他"
+            }}</span>
+          </li>
+          <li>
+            访客姓名：<span>{{ editRuleForm.userName }}</span>
+          </li>
+          <li>
+            访客手机号：<span>{{ editRuleForm.usesrPhone }}</span>
+          </li>
+          <li>
+            来访时间：<span>{{ editRuleForm.visitorTime }}</span>
+          </li>
+          <li>
+            证件号：<span>{{ editRuleForm.userNumber }}</span>
+          </li>
+          <li>
+            访问事由：<span>{{ editRuleForm.visitReason }}</span>
+          </li>
+          <li>
+            车牌号：<span>{{ editRuleForm.carNum }}</span>
+          </li>
+
+          <li>
+            受访学生：<span
+              >{{ editRuleForm.respondentName }}（{{
+                editRuleForm.respondent
+              }}）</span
+            >
+          </li>
         </ul>
         <div class="options">
           <el-button
             color="rgba(41, 109, 227, 1)"
             class="queding"
             type="primary"
-            @click="confirmEdit(editRef)"
+            @click="confirmEdit(1)"
           >
             同意，并推送
           </el-button>
-          <el-button @click="cancelEdit(editRef)" color="rgba(212, 48, 48, 1)"
+          <el-button @click="confirmEdit(2)" color="rgba(212, 48, 48, 1)"
             >拒绝</el-button
           >
         </div>
@@ -288,7 +346,8 @@ const tableData = reactive({
 const searchInput = reactive({
   keyWord: "",
   type: "0",
-  createTime: "",
+  createTime: "", // 创建时间
+  visitorTime: "", // 来访时间
 }); // 搜索按钮数据
 
 const currentPage = ref(1); // 当前页
@@ -300,12 +359,15 @@ const titleDialog = ref("");
 const editVisible = ref(false);
 const editRef = ref();
 const editRuleForm = reactive({
-  userDepartment: "", // 用户部门
-  userName: "", // 用户名
-  userRoles: "", // 用户角色
-  schoolCard: "", // 微校卡号
-  idNumber: "", // 身份证号
-  fingerprint: "", // 指纹
+  userName: "", // 访客姓名
+  userPhone: "", // 访客电话
+  userNumber: "", // 访客证件号
+  visitorTime: "", // 来访时间
+  visitReason: "", // 访问事由
+  carNum: "", //车牌号
+  respondentName: "", //受访学生：
+  respondent: "", // 受访学生号
+  visitorType: "", // 访客类型
   id: "",
 });
 
@@ -360,13 +422,21 @@ const getList = async () => {
   let data = {
     currentPage: currentPage.value,
     pageCount: pageCount.value,
-    // userId: "", // 当前用户ID
-    type: searchInput.type, // 类型
+    type: searchInput.type, //
+    keyWord: searchInput.keyWord,
     // managerId: sessionStorage.getItem("token"),
   };
+  if (searchInput.createTime) {
+    data.createStartTime = searchInput.createTime[0];
+    data.createEndTime = searchInput.createTime[1];
+  }
+  if (searchInput.visitorTime) {
+    data.visitorStartTime = searchInput.visitorTime[0];
+    data.visitorEndTime = searchInput.visitorTime[1];
+  }
   let res = await axios({
     method: "get",
-    url: api.value + "wanzai/api/smartVisitor/appointmentPageRecord",
+    url: api.value + "/wanzai/api/smartVisitor/appointmentPageRecord",
     headers: {
       // token: sessionStorage.getItem("token"),
       // user_head: sessionStorage.getItem("userhead"),
@@ -400,90 +470,92 @@ const searchBtn = lodash.debounce(async () => {
   getList();
 }, 300);
 
-//编辑按钮  （-------------------------------------------）
-const editClick = async () => {
-  titleDialog.value = "编辑";
+//审核按钮  （-------------------------------------------）
+const editClick = async (row) => {
+  // titleDialog.value = "编辑";
   editVisible.value = true;
-  //   let data = {
-  //     linkId: row.id,
-  //   };
-  //   let res = await axios({
-  //     method: "post",
-  //     url: api.value + "/mhotel/uploadgetByLinkId.action",
-  //     headers: {},
-  //     params: data,
-  //   });
-  //   console.log(res, "编辑中查找图片");
-  //   if (res.data.code == 200) {
-  //     // res.data.data.fileInfoList.forEach((item) => {
-  //     //   item.uid = item.id;
-  //     // });
-  //     // fileList.list = res.data.data.fileInfoList;
-  //     // ruleForm.fileListJson = fileList.list;
-  //     res.data.data.forEach((item) => {
-  //       item.uid = item.id;
-  //     });
-  //     fileList.list = res.data.data;
-  //     ruleForm.fileListJson = fileList.list;
-  //     // ElMessage({
-  //     //   type: "success",
-  //     //   showClose: true,
-  //     //   message: res.data.message,
-  //     //   center: true,
-  //     // });
-  //   } else {
-  //     ElMessage({
-  //       type: "error",
-  //       showClose: true,
-  //       message: res.data.message,
-  //       center: true,
-  //     });
-  //   }
+  editRuleForm.userName = row.userName;
+  editRuleForm.userPhone = row.userPhone;
+  editRuleForm.userNumber = row.userNumber;
+  editRuleForm.visitorTime = row.visitorTime;
+  editRuleForm.visitReason = row.visitReason;
+  editRuleForm.carNum = row.carNum;
+  editRuleForm.respondentName = row.respondentName;
+  editRuleForm.respondent = row.respondent;
+  editRuleForm.visitorType = row.visitorType;
+  editRuleForm.id = row.id;
+};
+const confirmEdit = async (flag) => {
+  let data = {
+    id: editRuleForm.id,
+    type: flag,
+  };
+  let res = await axios({
+    method: "get",
+    url: api.value + "/wanzai/api/smartVisitor/examineRecord",
+    headers: {},
+    params: data,
+  });
+  console.log(res, "审核");
+  if (res.data.code == 200) {
+    editVisible.value = false;
+    getList();
+    ElMessage({
+      type: "success",
+      showClose: true,
+      message: res.data.message,
+      center: true,
+    });
+  } else {
+    ElMessage({
+      type: "error",
+      showClose: true,
+      message: res.data.message,
+      center: true,
+    });
+  }
 };
 
 const cancelEdit = () => {
   editVisible.value = false;
-  editRef.value.resetFields();
+  // editRef.value.resetFields();
 };
 
 //删除按钮
-const selDel = async () => {
-  selDelVisible.value = true;
-  // let data = {
-  //   id: row.id,
-  // };
-  // let res = await axios({
-  //   method: "post",
-  //   url: api.value + "/mhotel/housedelHouser.action",
-  //   headers: {
-  //     // token: sessionStorage.getItem("token"),
-  //     // user_head: sessionStorage.getItem("userhead"),
-  //   },
-  //   params: data,
-  // });
-  // if (res.data.code == 200) {
-  //   if (tableData.list.length == 1 && currentPage.value != 1) {
-  //     currentPage.value = currentPage.value - 1;
-  //   }
-  //   getList();
-  //   ElMessage({
-  //     type: "success",
-  //     showClose: true,
-  //     message: res.data.message,
-  //     center: true,
-  //   });
-  // } else {
-  //   ElMessage({
-  //     type: "error",
-  //     showClose: true,
-  //     message: res.data.message,
-  //     center: true,
-  //   });
-  // }
-};
-const cancelSelDel = () => {
-  selDelVisible.value = false;
+const del = async (row) => {
+  let data = {
+    id: row.id,
+  };
+  let res = await axios({
+    method: "get",
+    url: api.value + "/wanzai/api/smartVisitor/deleteSmartVisitorById",
+    headers: {
+      // token: sessionStorage.getItem("token"),
+      // user_head: sessionStorage.getItem("userhead"),
+    },
+    params: data,
+  });
+  if (res.data.code == 200) {
+    if (tableData.list.length == 1 && currentPage.value != 1) {
+      currentPage.value = currentPage.value - 1;
+    }
+    getList();
+    ElMessage({
+      type: "success",
+      showClose: true,
+      message: res.data.message,
+      center: true,
+    });
+  } else {
+    ElMessage({
+      type: "error",
+      showClose: true,
+      message: res.data.message,
+      center: true,
+    });
+  }
 };
+const cancelEvent = () => {};
 
 // 多选框功能
 const handleSelectionChange = (val) => {
@@ -667,12 +739,12 @@ onUnmounted(() => {
   }
 
   .footer {
-    width: 96%;
-    // height: 550px;
+    width: calc(100% - 60px);
+    height: calc(100% - 220px);
     margin: 10px auto 30px;
 
     .el-table--fit {
-      // height: 100%;
+      height: 100%;
 
       :deep(.el-table__header-wrapper) {
         background-color: #000;
@@ -719,12 +791,12 @@ onUnmounted(() => {
 
       :deep(.el-table__body .odd) {
         background-color: rgba(240, 243, 247, 1);
-        .el-table_1_column_1 {
-          background-color: rgba(240, 243, 247, 1);
-        }
-        .el-table_1_column_2 {
-          background-color: rgba(240, 243, 247, 1);
-        }
+        // .el-table_1_column_1 {
+        //   background-color: rgba(240, 243, 247, 1);
+        // }
+        // .el-table_1_column_2 {
+        //   background-color: rgba(240, 243, 247, 1);
+        // }
       }
 
       :deep(.edit) {

src/views/class/class.vue

@@ -0,0 +1,960 @@
+<template>
+  <div class="content-box">
+    <div class="left">
+      <!-- <el-icon :size="23" class="camera"><VideoCameraFilled /></el-icon> -->
+      <span class="cameratxt">班级管理</span>
+    </div>
+    <div class="scrollId">
+      <div class="middle">
+        <div class="filter">
+          <div class="condition">
+            <span>班级名称:&nbsp;&nbsp;</span>
+            <el-input
+              :clearable="true"
+              @clear="searchBtn"
+              v-model="searchInput.keyWord"
+              class="w-50 m-2"
+              placeholder="请输入班级名称"
+            />
+          </div>
+          <!-- <div class="condition">
+            <span>创建时间&nbsp;&nbsp;</span>
+            <el-date-picker
+              v-model="searchInput.createTime"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="起始时间"
+              end-placeholder="结束时间"
+              format="YYYY-MM-DD"
+              value-format="YYYY-MM-DD"
+              :prefix-icon="Calendar"
+              placeholder="请选择日期"
+            />
+          </div> -->
+          <el-button
+            color="rgba(0, 97, 255, 1)"
+            type="primary"
+            class="search"
+            @click="searchBtn"
+            ><el-icon>
+              <Search />
+            </el-icon>
+            <span>查询</span></el-button
+          >
+        </div>
+        <!-- 按钮列表 -->
+        <div class="gongneng">
+          <el-button
+            type="primary"
+            color="rgba(0, 97, 255, 1)"
+            @click="addClick"
+            plain
+            >新建班级</el-button
+          >
+          <!-- <el-button type="primary" color="rgba(0, 97, 255, 1)" @click="addlist"
+            ><span>导出</span></el-button
+          > -->
+        </div>
+      </div>
+      <div class="footer" v-loading="loading">
+        <el-table
+          :row-class-name="tableRowClassName"
+          :data="tableData.list"
+          @selection-change="handleSelectionChange"
+          style="width: 100%"
+          :header-cell-style="{
+            background: 'rgba(240, 243, 247, 1)',
+            height: '50px',
+            border: 0,
+          }"
+        >
+          <!-- <el-table-column align="center" type="selection" width="80" /> -->
+          <el-table-column
+            width="150"
+            align="center "
+            type="index"
+            label="排序"
+          />
+          <el-table-column align="center" prop="gradeStr" label="年级" />
+          <el-table-column align="center" prop="name" label="班级" />
+          <!-- <el-table-column align="center" prop="classNo" label="班级id" /> -->
+          <!-- <el-table-column align="center" prop="createTime" label="创建时间" /> -->
+          <el-table-column align="center" label="操作" width="200">
+            <template #default="scope">
+              <div class="edit">
+                <div class="look" @click="editClick(scope.row)">编辑</div>
+                <!-- <el-popconfirm
+                  width="220"
+                  confirm-button-text="确认"
+                  cancel-button-text="取消"
+                  :icon="InfoFilled"
+                  icon-color="#f89626"
+                  title="是否删除此身份?"
+                  @confirm="del(scope.row)"
+                  @cancel="cancelEvent"
+                >
+                  <template #reference>
+                    <div class="del">删除</div>
+                  </template>
+                </el-popconfirm> -->
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
+      <!-- 分页组件 -->
+      <div class="pageSize">
+        <span></span>
+        <el-pagination
+          background
+          :current-page="currentPage"
+          :page-size="pageSize"
+          layout="total, prev, pager, next, jumper, slot"
+          :total="total"
+          @update:current-page="handleCurrentChange"
+        />
+      </div>
+
+      <!-- 编辑按钮 -->
+      <el-dialog
+        class="editDialog"
+        v-model="editVisible"
+        :close-on-click-modal="false"
+        :close-on-press-escape="false"
+        :title="titleDialog"
+        align-center
+        width="600"
+        :before-close="cancelEdit"
+      >
+        <el-form
+          ref="editRef"
+          :model="editRuleForm"
+          :rules="editRules"
+          label-width="90px"
+          class="demo-ruleForm"
+          :size="formSize"
+          label-position="left"
+          status-icon
+        >
+          <el-form-item
+            v-if="titleDialog == '新增'"
+            label="年级 :"
+            prop="apply"
+          >
+            <el-select
+              v-model="editRuleForm.apply"
+              placeholder="请选择年级"
+              style="width: 500px"
+            >
+              <el-option
+                v-for="i in applyData"
+                :label="i.name"
+                :value="i.bsGradeNo"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="班级名称 :" prop="identity">
+            <el-input
+              v-model="editRuleForm.identity"
+              placeholder="请输入班级名称"
+              clearable
+              style="width: 500px"
+            />
+          </el-form-item>
+          <el-form-item label="班级序号 :" prop="classNum">
+            <el-input
+              v-model="editRuleForm.classNum"
+              placeholder="请输入班级序号"
+              clearable
+              style="width: 500px"
+            />
+          </el-form-item>
+          <!-- <el-form-item label="用户角色 :" prop="userRoles">
+            <el-select
+              v-model="editRuleForm.userRoles"
+              class="m-2"
+              placeholder="请选择用户角色"
+              style="width: 500px"
+            >
+              <el-option label="清洁工" value="1" />
+              <el-option label="洗碗工" value="2" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="微校卡号 :" prop="schoolCard">
+            <el-input
+              v-model="editRuleForm.schoolCard"
+              placeholder="请输入微校卡号"
+              clearable
+              style="width: 500px"
+            />
+          </el-form-item>
+          <el-form-item label="身份证号 :" prop="idNumber">
+            <el-input
+              v-model="editRuleForm.idNumber"
+              placeholder="请输入身份证号"
+              style="width: 500px"
+            >
+              <template #append>
+                <div @click="readCard">读卡</div>
+              </template>
+            </el-input>
+          </el-form-item>
+          <el-form-item label="指纹 :" prop="fingerprint">
+            <el-input
+              v-model="editRuleForm.fingerprint"
+              placeholder="请输入指纹"
+              style="width: 500px"
+            >
+              <template #append>
+                <div @click="entering">录入</div>
+              </template>
+            </el-input>
+          </el-form-item> -->
+          <el-form-item class="options">
+            <el-button
+              color="rgba(41, 109, 227, 1)"
+              class="queding"
+              type="primary"
+              @click="confirmEdit(editRef)"
+            >
+              确认
+            </el-button>
+            <el-button @click="cancelEdit(editRef)">取消</el-button>
+          </el-form-item>
+        </el-form>
+      </el-dialog>
+    </div>
+    <div class="bgImg" v-if="bgImg">
+      <el-carousel
+        @click="bgImg = false"
+        ref="bgImgs"
+        indicator-position
+        arrow="always"
+        :autoplay="false"
+        trigger
+      >
+        <el-carousel-item v-for="item in bgImgList" :key="item.id">
+          <img :src="item.url" alt="" />
+        </el-carousel-item>
+      </el-carousel>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {
+  ref,
+  reactive,
+  watch,
+  nextTick,
+  onBeforeMount,
+  onUnmounted,
+} from "vue";
+import { useRouter } from "vue-router";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { Calendar } from "@element-plus/icons-vue";
+import vidiconsApi from "@/api/vidicons.js";
+import { dayjs } from "element-plus";
+import lodash from "lodash";
+import axios from "axios";
+import { useStore } from "vuex";
+const store = useStore();
+const api = ref("");
+const router = useRouter();
+// 表格数据
+const loading = ref(false);
+const tableData = reactive({
+  list: [],
+});
+const searchInput = reactive({
+  keyWord: "",
+  createTime: "",
+}); // 搜索按钮数据
+
+const currentPage = ref(1); // 当前页
+const pageSize = ref(10);
+const total = ref(5); // 当前总数
+
+// 编辑功能
+const titleDialog = ref("");
+const editVisible = ref(false);
+const editRef = ref();
+const editRuleForm = reactive({
+  identity: "", // 名称
+  apply: "", // 年级编号
+  classNum: "", // 班级序号
+  id: "",
+});
+const applyData = ref(); // 年级编号数据
+
+// 表单验证
+const editRules = reactive({
+  identity: [{ required: true, message: "班级名称不能为空", trigger: "blur" }],
+  apply: [
+    {
+      required: true,
+      message: "年级编号不能为空",
+      trigger: "change",
+    },
+  ],
+  classNum: [
+    {
+      required: true,
+      message: "班级序号不能为空",
+      trigger: "blur",
+    },
+  ],
+});
+
+// 身份分页列表
+const getList = async () => {
+  loading.value = true;
+  let data = {
+    currentPage: currentPage.value,
+    pageCount: pageSize.value,
+    name: searchInput.keyWord, // 关键字名称
+  };
+  let res = await axios({
+    method: "get",
+    url: api.value + "/wanzai/api/smartClass/queryPageSmartClass",
+    headers: {
+      // token: sessionStorage.getItem("token"),
+      // user_head: sessionStorage.getItem("userhead"),
+    },
+    params: data,
+  });
+  console.log(res, "班级分页数据");
+  if (res.data.code == 200) {
+    loading.value = false;
+    tableData.list = res.data.data.list;
+    total.value = res.data.data.totalCount;
+    // ElMessage({
+    //   type: "success",
+    //   showClose: true,
+    //   message: res.data.message,
+    //   center: true,
+    // });
+  } else {
+    loading.value = false;
+    ElMessage({
+      type: "error",
+      showClose: true,
+      message: res.data.message,
+      center: true,
+    });
+  }
+};
+// 获取应用列表
+const applyList = async () => {
+  let data = {
+    currentPage: 1,
+    pageCount: 100,
+    // managerId: sessionStorage.getItem("token"),
+  };
+  let res = await axios({
+    method: "get",
+    url: api.value + "/wanzai/api/smartGrade/queryPageSmartGrade",
+    headers: {
+      // token: sessionStorage.getItem("token"),
+      // user_head: sessionStorage.getItem("userhead"),
+    },
+    params: data,
+  });
+  applyData.value = res.data.data.list;
+  console.log(res, "年级管理分页数据");
+};
+
+// 搜索功能
+const searchBtn = lodash.debounce(async () => {
+  getList();
+}, 300);
+// 添加按钮 （-------------------------------------------）
+const addClick = async () => {
+  titleDialog.value = "新增";
+  editVisible.value = true;
+  editRuleForm.identity = "";
+  editRuleForm.apply = "";
+  editRuleForm.id = "";
+};
+
+//编辑按钮  （-------------------------------------------）
+const editClick = async (row) => {
+  console.log(row);
+  titleDialog.value = "编辑";
+  editVisible.value = true;
+  editRuleForm.identity = row.name;
+  editRuleForm.apply = row.bsGradeNo;
+  editRuleForm.classNum = row.classNo;
+  editRuleForm.id = row.id;
+};
+
+const cancelEdit = () => {
+  editVisible.value = false;
+  editRef.value.resetFields();
+  editRuleForm.identity = "";
+  editRuleForm.apply = "";
+  editRuleForm.id = "";
+};
+
+// 确定编辑
+const confirmEdit = (formEl) => {
+  if (!formEl) return;
+  formEl.validate(async (valid, fields) => {
+    if (valid) {
+      let data = {
+        classNo: editRuleForm.classNum,
+      };
+      let res = "";
+      // 根据id判断是编辑还是添加
+      if (editRuleForm.id) {
+        data.id = editRuleForm.id;
+        data.name = editRuleForm.identity;
+        res = await axios({
+          method: "post",
+          url: api.value + "/wanzai/api/smartClass/updateSmartClassById",
+          headers: {},
+          data: data,
+        });
+      } else {
+        data.gradeNo = editRuleForm.apply;
+        data.className = editRuleForm.identity;
+        res = await axios({
+          method: "post",
+          url: api.value + "/wanzai/api/smartClass/insertSmartClassToBaisheng",
+          headers: {},
+          data: data,
+        });
+      }
+      console.log(res, "添加成功");
+      if (res.data.code == 200) {
+        editVisible.value = false;
+        getList();
+        editRef.value.resetFields();
+        ElMessage({
+          type: "success",
+          showClose: true,
+          message: res.data.message,
+          center: true,
+        });
+      } else {
+        ElMessage({
+          type: "error",
+          showClose: true,
+          message: res.data.message,
+          center: true,
+        });
+      }
+    }
+  });
+};
+
+//删除按钮
+const del = async (row) => {
+  let data = {
+    id: row.id,
+  };
+  let res = await axios({
+    method: "get",
+    url: api.value + "/wanzai/api/smartIdentity/deleteSmartIdentityById",
+    headers: {
+      // token: sessionStorage.getItem("token"),
+      // user_head: sessionStorage.getItem("userhead"),
+    },
+    params: data,
+  });
+  if (res.data.code == 200) {
+    if (tableData.list.length == 1 && currentPage.value != 1) {
+      currentPage.value = currentPage.value - 1;
+    }
+    getList();
+    ElMessage({
+      type: "success",
+      showClose: true,
+      message: res.data.message,
+      center: true,
+    });
+  } else {
+    ElMessage({
+      type: "error",
+      showClose: true,
+      message: res.data.message,
+      center: true,
+    });
+  }
+  // console.log(res);
+};
+
+// 多选框功能
+const handleSelectionChange = (val) => {
+  console.log(val);
+  selectData.list = val;
+};
+//导出功能
+// const importExcel = async () => {
+//   if (searchInput.createTime == null) {
+//     searchInput.createTime = "";
+//   }
+//   let data = new FormData();
+//   data.set("car_number", searchInput.carnumber);
+//   data.set("create_time", searchInput.createTime);
+//   let res = await axios({
+//     method: "post",
+//     url: api.value + "/carBook/cinfotoExcel.action",
+//     headers: {
+//       token: sessionStorage.getItem("token"),
+//     },
+//     data: data,
+//   });
+//   // console.log(res, "导出账号");
+//   if (res.data.code == 200) {
+//     // const elt = document.createElement("a");
+//     // elt.setAttribute(
+//     //   "href",
+//     //   "https://chtech.ncjti.edu.cn/carstop" + res.data.downurl
+//     // );
+//     // elt.setAttribute("download", "file.png");
+//     // elt.style.display = "none";
+//     // document.body.appendChild(elt);
+//     // elt.click();
+//     var downloadPath = "https://chtech.ncjti.edu.cn/carstop" + res.data.downurl;
+//     console.log("获得地址数据:", downloadPath);
+//     var downloadLink = document.createElement("a");
+//     downloadLink.style.display = "none"; // 使其隐藏
+//     downloadLink.href = downloadPath;
+//     downloadLink.download = "";
+//     downloadLink.click();
+//     document.body.appendChild(downloadLink);
+//     document.body.removeChild(downloadLink);
+//     ElMessage({
+//       type: "success",
+//       showClose: true,
+//       message: res.data.message,
+//       center: true,
+//     });
+//   } else {
+//     ElMessage({
+//       type: "error",
+//       showClose: true,
+//       message: res.data.message,
+//       center: true,
+//     });
+//   }
+// };
+// 表格斑马纹颜色修改
+const tableRowClassName = ({ row, rowIndex }) => {
+  if (rowIndex % 2 === 0) {
+    return "even";
+  } else if (rowIndex % 2 !== 0) {
+    return "odd";
+  }
+  return "";
+};
+// 分页
+const handleCurrentChange = (value) => {
+  // console.log(value);
+  currentPage.value = value;
+  getList();
+};
+
+onBeforeMount(async () => {
+  api.value = store.state.user.api;
+  getList();
+  applyList(); // 应用列表
+});
+onUnmounted(() => {
+  // document.removeEventListener("keyup", Enters);
+});
+</script>
+
+<style scoped lang="scss">
+.content-box {
+  min-width: 600px;
+  width: calc(100vw - 260px);
+  height: calc(100vh - 105px);
+  margin: 20px auto;
+  border-radius: 8px;
+  background-color: #fff;
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0px 3px 10px rgba(0, 97, 255, 0.2);
+
+  .left {
+    // width: calc(100wh - 40px);
+    display: flex;
+    align-items: center;
+
+    margin: 0 30px;
+    border-bottom: 1px solid #ccc;
+    color: rgb(0, 0, 0);
+    font-size: 18px;
+    font-weight: 600;
+
+    span {
+      display: block;
+      height: 60px;
+      line-height: 60px;
+      margin-right: 20px;
+    }
+
+    .is_active {
+      color: rgba(111, 182, 184, 1);
+    }
+  }
+  .scrollId {
+    overflow: auto;
+    height: calc(100% - 61px);
+  }
+  .middle {
+    width: 96%;
+    margin: 0 auto;
+
+    color: #000;
+
+    // border-bottom: 1px solid rgb(231, 231, 231);
+    .filter {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      margin: 10px 0 0 0;
+
+      .search {
+        color: #fff;
+      }
+
+      .condition {
+        display: flex;
+        align-items: center;
+        margin: 10px 30px 10px 0;
+
+        :deep(.el-input .el-input__inner) {
+          font-size: 14px;
+        }
+
+        span {
+          margin: 0 10px 0 0;
+        }
+      }
+    }
+
+    .gongneng {
+      margin: 10px 0 20px 0;
+
+      span {
+        color: #fff;
+      }
+      .el-button {
+        margin-right: 10px;
+      }
+    }
+
+    :deep(.cont) {
+      width: 60%;
+      margin: 20px auto;
+    }
+
+    :deep(.download) {
+      display: flex;
+      align-items: center;
+      margin: 10px;
+    }
+
+    :deep(.download span) {
+      font-size: 16px;
+      margin-left: 20px;
+    }
+
+    :deep(.cont .el-button) {
+      margin-left: 60px;
+      margin-bottom: 30px;
+    }
+
+    :deep(.cont .accomplish) {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+    }
+
+    :deep(.cont .accomplish .el-button) {
+      width: 50%;
+      margin: 0;
+    }
+  }
+
+  .footer {
+    width: 96%;
+    height: calc(100% - 193px);
+    margin: 10px auto 15px;
+    min-height: 300px;
+    .el-table--fit {
+      height: 100% !important;
+
+      :deep(.el-table__header-wrapper) {
+        background-color: #000;
+        font-size: 14px;
+
+        tr {
+          // color: #000;
+        }
+      }
+
+      :deep(.el-table__row) {
+        height: 50px;
+        font-size: 14px;
+        // color: #000;
+        &:hover {
+          td {
+            background-color: rgba(223, 236, 254, 1);
+          }
+        }
+      }
+
+      :deep(.el-table__row):nth-child(2n) {
+        .el-table-fixed-column--right {
+          background-color: rgba(240, 243, 247, 1);
+        }
+      }
+
+      :deep(.el-table__row td) {
+        padding: 0;
+        border: 0;
+      }
+
+      .el-button--primary {
+        margin-left: 5px;
+      }
+
+      :deep(.el-table__body .even) {
+        background-color: #fff;
+      }
+
+      :deep(.el-table__body .odd) {
+        background-color: rgba(240, 243, 247, 1);
+      }
+
+      :deep(.edit) {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: rgba(111, 182, 184, 1);
+      }
+
+      :deep(.look) {
+        padding: 0 10px;
+        cursor: pointer;
+        color: rgba(30, 125, 251, 1);
+      }
+
+      .del {
+        padding: 0 10px;
+        color: rgba(212, 48, 48, 1);
+        cursor: pointer;
+      }
+
+      // :deep(.look):hover {
+      //   color: red;
+      // }
+      // :deep(.del):hover {
+      //   color: red;
+      // }
+    }
+  }
+  // 编辑按钮
+  :deep(.editDialog) {
+    //   height: 420px;
+    border-radius: 11px;
+    .el-dialog__header {
+      border-radius: 11px 11px 0 0;
+      background: rgba(237, 241, 245, 1);
+      font-weight: 600;
+      margin: 0;
+      .el-dialog__headerbtn {
+        outline: none;
+      }
+    }
+    .el-dialog__body {
+      padding: 30px 30px 10px 30px;
+      .el-form-item__content {
+        width: 200px;
+        .el-input-group__append {
+          background-color: rgba(222, 234, 252, 1);
+          color: rgba(0, 97, 255, 1);
+          cursor: pointer;
+          user-select: none;
+        }
+      }
+      .options {
+        margin: 50px 20px 20px 0;
+        width: 100%;
+        .el-form-item__content {
+          display: flex;
+          flex-direction: row-reverse;
+        }
+        .queding {
+          color: #fff;
+          margin-left: 15px;
+        }
+      }
+    }
+  }
+
+  // 指纹弹窗
+  :deep(.fingerprint) {
+    width: 611px;
+    height: 486px;
+    border-radius: 11px;
+    .el-dialog__header {
+      border-radius: 11px 11px 0 0;
+      background: rgba(237, 241, 245, 1);
+      font-weight: 600;
+      margin: 0;
+
+      .el-dialog__headerbtn {
+        outline: none;
+      }
+    }
+    .el-dialog__body {
+      padding: 0;
+      .elbody {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 20px 20px;
+        font-size: 18px;
+        color: #000;
+        border-bottom: 0.5px solid #ccc;
+
+        i {
+          cursor: pointer;
+        }
+      }
+    }
+    .el-dialog__footer {
+      .el-button--primary {
+        background: rgba(41, 109, 227, 1);
+      }
+    }
+  }
+
+  // 身份证读取
+  :deep(.addIdentityCard) {
+    //   height: 420px;
+    border-radius: 11px;
+    .el-dialog__header {
+      border-radius: 11px 11px 0 0;
+      background: rgba(237, 241, 245, 1);
+      font-weight: 600;
+      margin: 0;
+      .el-dialog__headerbtn {
+        outline: none;
+      }
+    }
+    .el-dialog__body {
+      padding: 30px 20px 10px 20px;
+      height: 330px;
+      font-size: 16px;
+      font-weight: 600;
+      color: #000;
+      .el-steps {
+        width: 600px;
+        transform: translateX(90px);
+        margin: 0 0 40px 0;
+      }
+      .title {
+        text-align: center;
+      }
+      .icons {
+        display: flex;
+        justify-content: center;
+        img {
+          width: 70px;
+          margin: 40px 0;
+        }
+        .loading {
+          animation: move 3s linear;
+        }
+        @keyframes move {
+          0% {
+            transform: rotate(0);
+          }
+          100% {
+            transform: rotate(360deg);
+          }
+        }
+      }
+      .retry {
+        text-align: center;
+        span {
+          color: red;
+          padding: 0 8px;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+
+  .pageSize {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 0 30px;
+
+    span {
+      color: #000;
+    }
+
+    .el-pagination {
+      // width: 1600px;
+      :deep(.el-pagination__total) {
+        color: #000;
+      }
+
+      :deep(.el-pagination__goto) {
+        color: #000;
+      }
+
+      :deep(.el-pagination__classifier) {
+        color: #000;
+      }
+
+      :deep(.el-input__wrapper) {
+        border: 1px solid rgba(0, 0, 0, 1);
+        border-radius: 5px;
+        box-shadow: none;
+      }
+
+      :deep(.el-pager li) {
+        margin: 0 5px;
+        border: 1px solid rgba(0, 0, 0, 1);
+        border-radius: 5px;
+        background-color: transparent;
+      }
+
+      :deep(.el-pager li.is-active) {
+        // background-color: rgba(0, 97, 255, 0.8);
+        border: 1px solid rgba(0, 97, 255, 1);
+        color: rgba(0, 97, 255, 1);
+      }
+
+      :deep(.btn-prev) {
+        margin-right: 5px;
+        border: 1px solid rgba(0, 0, 0, 1);
+        border-radius: 5px;
+        background-color: transparent;
+      }
+
+      :deep(.btn-next) {
+        margin-left: 5px;
+        border: 1px solid rgba(0, 0, 0, 1);
+        border-radius: 5px;
+        background-color: transparent;
+      }
+    }
+  }
+}
+
+.el-input {
+  width: 192px;
+}
+</style>

src/views/energy/energy.vue

@@ -279,7 +279,8 @@ const getElcTj = ref(); // 电
 const areaTJEcharts = shallowRef();
 const areaInd = ref(1); // 默认水
 const areaData = ref();
-const monthList = ref([]);
+const monthList = ref([]); // 月份
+const monthTypeValue = ref([]); // 数据
 
 // 区域能耗统计
 const tableSearch1 = ref(); // 月份搜索
@@ -512,16 +513,48 @@ const getMonWaterElc = async () => {
   if (res.data.code == 200) {
     areaData.value = res.data.data;
     monthList.value = [];
+    monthTypeValue.value = [];
+    let arr = res.data.data[0].lt;
+    let monthType = [];
+    let monthValue = [];
+    if (arr) {
+      arr.forEach((item, index) => {
+        monthType.push(item.name);
+        monthValue[index] = [];
+        res.data.data.forEach((i) => {
+          console.log(i);
+          if (i.lt.length != 0) {
+            monthValue[index].push(i.lt[index].num);
+          } else {
+            monthValue[index].push(0);
+          }
+        });
+      });
+      let color = ["#43B5F4", "#89CFF5", "#B4E2FB", "#D4EDFB"];
+      monthType.forEach((item, index) => {
+        let data = {
+          name: "",
+          type: "bar",
+          data: "",
+          itemStyle: {
+            color: "",
+          },
+          barGap: "0%", // 同一列柱子的间距
+          barWidth: 20, // 柱子的宽度
+          emphasis: {
+            focus: "series",
+          },
+        };
+        data.name = monthType[index];
+        data.data = monthValue[index];
+        data.itemStyle.color = color[index];
+        monthTypeValue.value.push(data);
+      });
+    }
+    console.log(monthTypeValue.value, "整合数据");
+
     res.data.data.forEach((item) => {
       monthList.value.push(item.date);
-      // item.It.forEach((i) => {});
-      // let arr = {
-      //   date: ["7月", "8月", "9月", "10月"],
-      //   It: [
-      //     { name: "教学楼", value: [2, 3, 2, 3] },
-      //     { name: "图书馆", value: [2, 3, 2, 3] },
-      //   ],
-      // };
     });
     console.log(monthList.value, "月份");
     nextTick(() => {
@@ -637,57 +670,7 @@ const echarts2 = async () => {
     },
     // Declare several bar series, each will be mapped
     // to a column of dataset.source by default.
-    series: [
-      {
-        name: "教学楼",
-        type: "bar",
-        data: [120, 200, 150, 80, 70, 110, 130, 60],
-        itemStyle: {
-          color: "#43B5F4",
-        },
-        barGap: "0%", // 同一列柱子的间距
-        barWidth: 20, // 柱子的宽度
-        emphasis: {
-          focus: "series",
-        },
-      },
-      {
-        type: "bar",
-        name: "行政楼",
-        data: [52, 20, 15, 68, 97, 11, 93, 6],
-        itemStyle: {
-          color: "#89CFF5",
-        },
-        barWidth: 20, // 柱子的宽度
-        emphasis: {
-          focus: "series",
-        },
-      },
-      // {
-      //   type: "bar",
-      //   name: "食堂",
-      //   data: [102, 120, 105, 48, 75, 101, 103, 26],
-      //   itemStyle: {
-      //     color: "#B4E2FB",
-      //   },
-      //   barWidth: 20, // 柱子的宽度
-      //   emphasis: {
-      //     focus: "series",
-      //   },
-      // },
-      // {
-      //   type: "bar",
-      //   name: "其他",
-      //   data: [62, 120, 150, 88, 17, 211, 103, 66],
-      //   itemStyle: {
-      //     color: "#D4EDFB",
-      //   },
-      //   barWidth: 20, // 柱子的宽度
-      //   emphasis: {
-      //     focus: "series",
-      //   },
-      // },
-    ],
+    series: monthTypeValue.value,
   });
   // areaTJEcharts.value.setOption({
   //   legend: {},

src/views/grade/grade.vue

@@ -50,24 +50,36 @@
               @change="searchBtn"
               :clearable="true"
             >
-              <el-option v-for="i in gradeData" :label="i.name" :value="i.id" />
+              <el-option
+                v-for="i in gradeData"
+                :label="i.name"
+                :value="`${i.name}-${i.id}`"
+              >
+              </el-option>
             </el-select>
           </div>
           <div class="condition">
             <span class="title">班级 : </span>
-            <el-select
-              v-model="searchInput.class"
-              placeholder="请选择班级"
-              style="width: 160px"
-              @change="searchBtn"
-              :clearable="true"
+            <el-tooltip
+              class="box-item"
+              effect="dark"
+              content="请先选择年级"
+              placement="top"
             >
-              <el-option
-                v-for="i in classsData"
-                :label="i.name"
-                :value="i.id"
-              />
-            </el-select>
+              <el-select
+                v-model="searchInput.class"
+                placeholder="请选择班级"
+                style="width: 160px"
+                @change="searchBtn"
+                :clearable="true"
+              >
+                <el-option
+                  v-for="i in classsData"
+                  :label="i.name"
+                  :value="i.name"
+                />
+              </el-select>
+            </el-tooltip>
           </div>
           <div class="condition">
             <span class="title">学科 : </span>
@@ -82,7 +94,7 @@
               <el-option
                 v-for="i in subjectData"
                 :label="i.name"
-                :value="i.id"
+                :value="i.name"
               />
             </el-select>
           </div>
@@ -99,7 +111,7 @@
               <el-option
                 v-for="i in examTypeData"
                 :label="i.name"
-                :value="i.id"
+                :value="i.name"
               />
             </el-select>
           </div>
@@ -250,12 +262,19 @@
               v-model="editRuleForm.yearClass"
               placeholder="请选择年级"
               style="width: 400px"
+              @change="yearClassChange"
             >
               <el-option
                 v-for="i in gradeData"
                 :label="i.name"
-                :value="i.name"
-              />
+                :value="`${i.name}-${i.id}`"
+              >
+                <!-- <span style="float: left">{{ i.name }}</span> -->
+                <!-- <span
+                  style="color: var(--el-text-color-secondary); font-size: 13px"
+                  >{{ i.id }}</span
+                > -->
+              </el-option>
             </el-select>
           </el-form-item>
           <el-form-item label="班级 :" prop="class">
@@ -267,7 +286,7 @@
               <el-option
                 v-for="i in classsData"
                 :label="i.name"
-                :value="i.name"
+                :value="`${i.name}-${i.id}`"
               />
             </el-select>
           </el-form-item>
@@ -490,46 +509,6 @@ const tableData = reactive({
       xh: "000001",
       cj: "85",
     },
-    {
-      xq: "2019-2020秋季学期（下学期）",
-      nj: "八年级",
-      bj: "二班",
-      xk: "数学",
-      ks: "期末考试",
-      xm: "李四",
-      xh: "0000021",
-      cj: "75",
-    },
-    {
-      xq: "2019-2020秋季学期（下学期）",
-      nj: "八年级",
-      bj: "二班",
-      xk: "数学",
-      ks: "期末考试",
-      xm: "李四",
-      xh: "0000021",
-      cj: "75",
-    },
-    {
-      xq: "2019-2020秋季学期（下学期）",
-      nj: "八年级",
-      bj: "二班",
-      xk: "数学",
-      ks: "期末考试",
-      xm: "李四",
-      xh: "0000021",
-      cj: "75",
-    },
-    {
-      xq: "2019-2020秋季学期（下学期）",
-      nj: "八年级",
-      bj: "二班",
-      xk: "数学",
-      ks: "期末考试",
-      xm: "李四",
-      xh: "0000021",
-      cj: "75",
-    },
   ],
 });
 const semesterData = ref(); //学期下拉数据
@@ -555,7 +534,7 @@ const gradeNumWatch = () => {
   // 最低成绩和最高成绩判定
   if (searchInput.gradeLow != "" && searchInput.gradeHigh != "") {
     if (reg.test(searchInput.gradeLow) && reg.test(searchInput.gradeHigh)) {
-      if (searchInput.gradeLow < searchInput.gradeHigh) {
+      if (Number(searchInput.gradeLow) < Number(searchInput.gradeHigh)) {
         getList();
       } else {
         ElMessage({
@@ -688,7 +667,8 @@ const semesterList = async () => {
   console.log(semester, "学期下拉数据");
   semesterData.value = semester.data.data;
 };
-// 年级数据下拉、班级数据下拉、学科下拉、考试类型下拉
+
+// 年级数据下拉、、学科下拉、考试类型下拉
 const classDataList = async () => {
   semesterList();
   let grade = await axios({
@@ -702,17 +682,7 @@ const classDataList = async () => {
   });
   console.log(grade, "年级下拉数据");
   gradeData.value = grade.data.data;
-  let classs = await axios({
-    method: "get",
-    url: api.value + "/wanzai/api/smartClass/querySmartClasss",
-    headers: {
-      // token: sessionStorage.getItem("token"),
-      // user_head: sessionStorage.getItem("userhead"),
-    },
-    // params: data,
-  });
-  console.log(classs, "班级下拉数据");
-  classsData.value = classs.data.data;
+  // classInfoList()// 班级下拉数据
   let subject = await axios({
     method: "get",
     url: api.value + "/wanzai/api/smartScore/querySubjects",
@@ -736,16 +706,41 @@ const classDataList = async () => {
   console.log(examType, "考试类型下拉数据");
   examTypeData.value = examType.data.data;
 };
+// 改变年级选择
+const yearClassChange = async (value) => {
+  console.log(value);
+  editRuleForm.class = "";
+  let arr = value.split("-");
+  classInfoList(arr[1]);
+};
+// 班级数据下拉
+const classInfoList = async (value) => {
+  let data = {
+    gradeId: value,
+  };
+  let classs = await axios({
+    method: "get",
+    url: api.value + "/wanzai/api/smartClass/querySmartClasss",
+    headers: {
+      // token: sessionStorage.getItem("token"),
+      // user_head: sessionStorage.getItem("userhead"),
+    },
+    params: data,
+  });
+  console.log(classs, "班级下拉数据");
+  classsData.value = classs.data.data;
+};
 
 // 获取成绩分页数据 （----------------------------------------------------------------）
 const getList = async () => {
   loading.value = true;
+  classInfoList(searchInput.grade.split("-")[1]);
   let data = {
     currentPage: currentPage.value,
     pageCount: pageSize.value,
     name: searchInput.keyWord, // 用户名称
     semester: searchInput.semester,
-    grade: searchInput.grade,
+    grade: searchInput.grade.split("-")[0],
     schoolClass: searchInput.class,
     subject: searchInput.subject,
     examType: searchInput.examType,
@@ -809,6 +804,7 @@ const addClick = async () => {
   editRuleForm.examType = "";
   editRuleForm.grade = "";
   editRuleForm.id = "";
+  classsData.value = []; // 新增时将班级下拉数据置为空
 };
 // 获取学生分页列表
 const studentList = async () => {
@@ -884,11 +880,12 @@ const editClick = async (row) => {
   console.log(row, "编辑信息");
 
   titleDialog.value = "编辑成绩";
-  studentList();
-  studentListScroll();
+  studentList(); // 学生分页
+  studentListScroll(); // 学生分页触底加载更多
+  classInfoList(row.gradeId); // 班级下拉
   editRuleForm.semester = row.semester;
-  editRuleForm.yearClass = row.grade;
-  editRuleForm.class = row.schoolClass;
+  editRuleForm.yearClass = `${row.grade}-${row.gradeId}`;
+  editRuleForm.class = `${row.schoolClass}-${row.schoolClassId}`;
   editRuleForm.name = row.userId;
   editRuleForm.schoolNum = row.cardNo;
   editRuleForm.subject = row.subject;
@@ -918,8 +915,10 @@ const confirmEdit = (formEl) => {
       if (titleDialog.value == "新增成绩") {
         let data = {
           semester: editRuleForm.semester, //  学期
-          grade: editRuleForm.yearClass, // 年级
-          schoolClass: editRuleForm.class, // 班级
+          grade: editRuleForm.yearClass.split("-")[0], // 年级
+          gradeId: editRuleForm.yearClass.split("-")[1], // 年级
+          schoolClass: editRuleForm.class.split("-")[0], // 班级
+          schoolClassId: editRuleForm.class.split("-")[1], // 班级
           cardNo: editRuleForm.schoolNum, // 学号
           userId: editRuleForm.name, // 用户ID
           subjectId: editRuleForm.subject, // 学科ID
@@ -958,8 +957,10 @@ const confirmEdit = (formEl) => {
       } else if (titleDialog.value == "编辑成绩") {
         let data = {
           semester: editRuleForm.semester, //  学期
-          grade: editRuleForm.yearClass, // 年级
-          schoolClass: editRuleForm.class, // 班级
+          grade: editRuleForm.yearClass.split("-")[0], // 年级
+          gradeId: editRuleForm.yearClass.split("-")[1], // 年级
+          schoolClass: editRuleForm.class.split("-")[0], // 班级
+          schoolClassId: editRuleForm.class.split("-")[1], // 班级
           cardNo: editRuleForm.schoolNum, // 学号
           userId: editRuleForm.name, // 用户ID
           subjectId: editRuleForm.subject, // 学科ID

src/views/grades/grades.vue

@@ -0,0 +1,928 @@
+<template>
+  <div class="content-box">
+    <div class="left">
+      <!-- <el-icon :size="23" class="camera"><VideoCameraFilled /></el-icon> -->
+      <span class="cameratxt">年级管理</span>
+    </div>
+    <div class="scrollId">
+      <div class="middle">
+        <div class="filter">
+          <div class="condition">
+            <span>年级名称:&nbsp;&nbsp;</span>
+            <el-input
+              :clearable="true"
+              @clear="searchBtn"
+              v-model="searchInput.keyWord"
+              class="w-50 m-2"
+              placeholder="请输入年级名称"
+            />
+          </div>
+          <!-- <div class="condition">
+            <span>创建时间&nbsp;&nbsp;</span>
+            <el-date-picker
+              v-model="searchInput.createTime"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="起始时间"
+              end-placeholder="结束时间"
+              format="YYYY-MM-DD"
+              value-format="YYYY-MM-DD"
+              :prefix-icon="Calendar"
+              placeholder="请选择日期"
+            />
+          </div> -->
+          <el-button
+            color="rgba(0, 97, 255, 1)"
+            type="primary"
+            class="search"
+            @click="searchBtn"
+            ><el-icon>
+              <Search />
+            </el-icon>
+            <span>查询</span></el-button
+          >
+        </div>
+        <!-- 按钮列表 -->
+        <div class="gongneng">
+          <el-button
+            type="primary"
+            color="rgba(0, 97, 255, 1)"
+            @click="addClick"
+            plain
+            >新增年级</el-button
+          >
+          <!-- <el-button type="primary" color="rgba(0, 97, 255, 1)" @click="addlist"
+            ><span>导出</span></el-button
+          > -->
+        </div>
+      </div>
+      <div class="footer" v-loading="loading">
+        <el-table
+          :row-class-name="tableRowClassName"
+          :data="tableData.list"
+          @selection-change="handleSelectionChange"
+          style="width: 100%"
+          :header-cell-style="{
+            background: 'rgba(240, 243, 247, 1)',
+            height: '50px',
+            border: 0,
+          }"
+        >
+          <!-- <el-table-column align="center" type="selection" width="80" /> -->
+          <el-table-column
+            width="150"
+            align="center "
+            type="index"
+            label="序号"
+          />
+          <el-table-column align="center" prop="name" label="年级名称" />
+          <el-table-column align="center" prop="gradeNo" label="年级序号" />
+          <el-table-column align="center" prop="createTime" label="创建时间" />
+          <el-table-column align="center" label="操作" width="200">
+            <template #default="scope">
+              <div class="edit">
+                <div class="look" @click="editClick(scope.row)">编辑</div>
+                <!-- <el-popconfirm
+                  width="220"
+                  confirm-button-text="确认"
+                  cancel-button-text="取消"
+                  :icon="InfoFilled"
+                  icon-color="#f89626"
+                  title="是否删除此身份?"
+                  @confirm="del(scope.row)"
+                  @cancel="cancelEvent"
+                >
+                  <template #reference>
+                    <div class="del">删除</div>
+                  </template>
+                </el-popconfirm> -->
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
+      <!-- 分页组件 -->
+      <div class="pageSize">
+        <span></span>
+        <el-pagination
+          background
+          :current-page="currentPage"
+          :page-size="pageSize"
+          layout="total, prev, pager, next, jumper, slot"
+          :total="total"
+          @update:current-page="handleCurrentChange"
+        />
+      </div>
+
+      <!-- 编辑按钮 -->
+      <el-dialog
+        class="editDialog"
+        v-model="editVisible"
+        :close-on-click-modal="false"
+        :close-on-press-escape="false"
+        :title="titleDialog"
+        align-center
+        width="600"
+        :before-close="cancelEdit"
+      >
+        <el-form
+          ref="editRef"
+          :model="editRuleForm"
+          :rules="editRules"
+          label-width="90px"
+          class="demo-ruleForm"
+          :size="formSize"
+          label-position="left"
+          status-icon
+        >
+          <el-form-item label="年级名称 :" prop="identity">
+            <el-input
+              v-model="editRuleForm.identity"
+              placeholder="请输入年级名称"
+              clearable
+              style="width: 500px"
+            />
+          </el-form-item>
+          <el-form-item label="年级序号 :" prop="apply">
+            <!-- <el-select
+              v-model="editRuleForm.apply"
+              multiple
+              placeholder="请选择年级序号"
+              style="width: 500px"
+            >
+              <el-option
+                v-for="i in applyData"
+                :label="i.name"
+                :value="`${i.id}`"
+              />
+            </el-select> -->
+            <el-input
+              v-model="editRuleForm.apply"
+              placeholder="请输入年级序号"
+              clearable
+              style="width: 500px"
+            />
+          </el-form-item>
+          <!-- <el-form-item label="用户角色 :" prop="userRoles">
+            <el-select
+              v-model="editRuleForm.userRoles"
+              class="m-2"
+              placeholder="请选择用户角色"
+              style="width: 500px"
+            >
+              <el-option label="清洁工" value="1" />
+              <el-option label="洗碗工" value="2" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="微校卡号 :" prop="schoolCard">
+            <el-input
+              v-model="editRuleForm.schoolCard"
+              placeholder="请输入微校卡号"
+              clearable
+              style="width: 500px"
+            />
+          </el-form-item>
+          <el-form-item label="身份证号 :" prop="idNumber">
+            <el-input
+              v-model="editRuleForm.idNumber"
+              placeholder="请输入身份证号"
+              style="width: 500px"
+            >
+              <template #append>
+                <div @click="readCard">读卡</div>
+              </template>
+            </el-input>
+          </el-form-item>
+          <el-form-item label="指纹 :" prop="fingerprint">
+            <el-input
+              v-model="editRuleForm.fingerprint"
+              placeholder="请输入指纹"
+              style="width: 500px"
+            >
+              <template #append>
+                <div @click="entering">录入</div>
+              </template>
+            </el-input>
+          </el-form-item> -->
+          <el-form-item class="options">
+            <el-button
+              color="rgba(41, 109, 227, 1)"
+              class="queding"
+              type="primary"
+              @click="confirmEdit(editRef)"
+            >
+              确认
+            </el-button>
+            <el-button @click="cancelEdit(editRef)">取消</el-button>
+          </el-form-item>
+        </el-form>
+      </el-dialog>
+    </div>
+    <div class="bgImg" v-if="bgImg">
+      <el-carousel
+        @click="bgImg = false"
+        ref="bgImgs"
+        indicator-position
+        arrow="always"
+        :autoplay="false"
+        trigger
+      >
+        <el-carousel-item v-for="item in bgImgList" :key="item.id">
+          <img :src="item.url" alt="" />
+        </el-carousel-item>
+      </el-carousel>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {
+  ref,
+  reactive,
+  watch,
+  nextTick,
+  onBeforeMount,
+  onUnmounted,
+} from "vue";
+import { useRouter } from "vue-router";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { Calendar } from "@element-plus/icons-vue";
+import vidiconsApi from "@/api/vidicons.js";
+import { dayjs } from "element-plus";
+import lodash from "lodash";
+import axios from "axios";
+import { useStore } from "vuex";
+const store = useStore();
+const api = ref("");
+const router = useRouter();
+// 表格数据
+const loading = ref(false);
+const tableData = reactive({
+  list: [
+    {
+      userName: "张三",
+      userPhone: 15,
+      teamName: 12,
+    },
+  ],
+});
+const searchInput = reactive({
+  keyWord: "",
+  createTime: "",
+}); // 搜索按钮数据
+
+const currentPage = ref(1); // 当前页
+const pageSize = ref(10);
+const total = ref(5); // 当前总数
+
+// 编辑功能
+const titleDialog = ref("");
+const editVisible = ref(false);
+const editRef = ref();
+const editRuleForm = reactive({
+  identity: "", // 年级名称
+  apply: "", // 年级序号
+  id: "",
+});
+const applyData = ref(); // 应用管理数据
+
+// 表单验证
+const editRules = reactive({
+  identity: [{ required: true, message: "年级名称不能为空", trigger: "blur" }],
+  apply: [
+    {
+      required: true,
+      message: "年级序号不能为空",
+      trigger: "blur",
+    },
+  ],
+});
+
+// 年级分页列表
+const getList = async () => {
+  loading.value = true;
+  let data = {
+    currentPage: currentPage.value,
+    pageCount: pageSize.value,
+    name: searchInput.keyWord, // 关键字名称
+  };
+  let res = await axios({
+    method: "get",
+    url: api.value + "/wanzai/api/smartGrade/queryPageSmartGrade",
+    headers: {
+      // token: sessionStorage.getItem("token"),
+      // user_head: sessionStorage.getItem("userhead"),
+    },
+    params: data,
+  });
+  console.log(res, "年级分页数据");
+  if (res.data.code == 200) {
+    loading.value = false;
+    tableData.list = res.data.data.list;
+    total.value = res.data.data.totalCount;
+    // ElMessage({
+    //   type: "success",
+    //   showClose: true,
+    //   message: res.data.message,
+    //   center: true,
+    // });
+  } else {
+    loading.value = false;
+    ElMessage({
+      type: "error",
+      showClose: true,
+      message: res.data.message,
+      center: true,
+    });
+  }
+};
+
+// 搜索功能
+const searchBtn = lodash.debounce(async () => {
+  getList();
+}, 300);
+// 添加按钮 （-------------------------------------------）
+const addClick = async () => {
+  titleDialog.value = "新增";
+  editVisible.value = true;
+  editRuleForm.identity = "";
+  editRuleForm.apply = "";
+  editRuleForm.id = "";
+};
+
+//编辑按钮  （-------------------------------------------）
+const editClick = async (row) => {
+  titleDialog.value = "编辑";
+  editVisible.value = true;
+  editRuleForm.identity = row.name;
+  editRuleForm.apply = row.gradeNo;
+  editRuleForm.id = row.id;
+};
+
+const cancelEdit = () => {
+  editVisible.value = false;
+  editRef.value.resetFields();
+  editRuleForm.identity = "";
+  editRuleForm.apply = "";
+  editRuleForm.id = "";
+};
+
+// 确定编辑
+const confirmEdit = (formEl) => {
+  if (!formEl) return;
+  formEl.validate(async (valid, fields) => {
+    if (valid) {
+      let data = {
+        gradeName: editRuleForm.identity,
+        gradeNo: editRuleForm.apply,
+      };
+      let res = "";
+      // 根据id判断是编辑还是添加
+      if (editRuleForm.id) {
+        data.id = editRuleForm.id;
+        res = await axios({
+          method: "post",
+          url: api.value + "/wanzai/api/smartGrade/updateSmartGradeById",
+          headers: {},
+          data: data,
+        });
+      } else {
+        res = await axios({
+          method: "post",
+          url: api.value + "/wanzai/api/smartGrade/insertSmartGradeToBaisheng",
+          headers: {},
+          data: data,
+        });
+      }
+      console.log(res, "添加成功");
+      if (res.data.code == 200) {
+        editVisible.value = false;
+        getList();
+        editRef.value.resetFields();
+        ElMessage({
+          type: "success",
+          showClose: true,
+          message: res.data.message,
+          center: true,
+        });
+      } else {
+        ElMessage({
+          type: "error",
+          showClose: true,
+          message: res.data.message,
+          center: true,
+        });
+      }
+    }
+  });
+};
+
+//删除按钮
+const del = async (row) => {
+  let data = {
+    id: row.id,
+  };
+  let res = await axios({
+    method: "get",
+    url: api.value + "/wanzai/api/smartGrade/deleteSmartGradeById",
+    headers: {
+      // token: sessionStorage.getItem("token"),
+      // user_head: sessionStorage.getItem("userhead"),
+    },
+    params: data,
+  });
+  if (res.data.code == 200) {
+    if (tableData.list.length == 1 && currentPage.value != 1) {
+      currentPage.value = currentPage.value - 1;
+    }
+    getList();
+    ElMessage({
+      type: "success",
+      showClose: true,
+      message: res.data.message,
+      center: true,
+    });
+  } else {
+    ElMessage({
+      type: "error",
+      showClose: true,
+      message: res.data.message,
+      center: true,
+    });
+  }
+  // console.log(res);
+};
+
+// 多选框功能
+const handleSelectionChange = (val) => {
+  console.log(val);
+  selectData.list = val;
+};
+//导出功能
+// const importExcel = async () => {
+//   if (searchInput.createTime == null) {
+//     searchInput.createTime = "";
+//   }
+//   let data = new FormData();
+//   data.set("car_number", searchInput.carnumber);
+//   data.set("create_time", searchInput.createTime);
+//   let res = await axios({
+//     method: "post",
+//     url: api.value + "/carBook/cinfotoExcel.action",
+//     headers: {
+//       token: sessionStorage.getItem("token"),
+//     },
+//     data: data,
+//   });
+//   // console.log(res, "导出账号");
+//   if (res.data.code == 200) {
+//     // const elt = document.createElement("a");
+//     // elt.setAttribute(
+//     //   "href",
+//     //   "https://chtech.ncjti.edu.cn/carstop" + res.data.downurl
+//     // );
+//     // elt.setAttribute("download", "file.png");
+//     // elt.style.display = "none";
+//     // document.body.appendChild(elt);
+//     // elt.click();
+//     var downloadPath = "https://chtech.ncjti.edu.cn/carstop" + res.data.downurl;
+//     console.log("获得地址数据:", downloadPath);
+//     var downloadLink = document.createElement("a");
+//     downloadLink.style.display = "none"; // 使其隐藏
+//     downloadLink.href = downloadPath;
+//     downloadLink.download = "";
+//     downloadLink.click();
+//     document.body.appendChild(downloadLink);
+//     document.body.removeChild(downloadLink);
+//     ElMessage({
+//       type: "success",
+//       showClose: true,
+//       message: res.data.message,
+//       center: true,
+//     });
+//   } else {
+//     ElMessage({
+//       type: "error",
+//       showClose: true,
+//       message: res.data.message,
+//       center: true,
+//     });
+//   }
+// };
+// 表格斑马纹颜色修改
+const tableRowClassName = ({ row, rowIndex }) => {
+  if (rowIndex % 2 === 0) {
+    return "even";
+  } else if (rowIndex % 2 !== 0) {
+    return "odd";
+  }
+  return "";
+};
+// 分页
+const handleCurrentChange = (value) => {
+  // console.log(value);
+  currentPage.value = value;
+  getList();
+};
+
+onBeforeMount(async () => {
+  api.value = store.state.user.api;
+  getList();
+});
+onUnmounted(() => {
+  // document.removeEventListener("keyup", Enters);
+});
+</script>
+
+<style scoped lang="scss">
+.content-box {
+  min-width: 600px;
+  width: calc(100vw - 260px);
+  height: calc(100vh - 105px);
+  margin: 20px auto;
+  border-radius: 8px;
+  background-color: #fff;
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0px 3px 10px rgba(0, 97, 255, 0.2);
+
+  .left {
+    // width: calc(100wh - 40px);
+    display: flex;
+    align-items: center;
+
+    margin: 0 30px;
+    border-bottom: 1px solid #ccc;
+    color: rgb(0, 0, 0);
+    font-size: 18px;
+    font-weight: 600;
+
+    span {
+      display: block;
+      height: 60px;
+      line-height: 60px;
+      margin-right: 20px;
+    }
+
+    .is_active {
+      color: rgba(111, 182, 184, 1);
+    }
+  }
+  .scrollId {
+    overflow: auto;
+    height: calc(100% - 61px);
+  }
+  .middle {
+    width: 96%;
+    margin: 0 auto;
+
+    color: #000;
+
+    // border-bottom: 1px solid rgb(231, 231, 231);
+    .filter {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      margin: 10px 0 0 0;
+
+      .search {
+        color: #fff;
+      }
+
+      .condition {
+        display: flex;
+        align-items: center;
+        margin: 10px 30px 10px 0;
+
+        :deep(.el-input .el-input__inner) {
+          font-size: 14px;
+        }
+
+        span {
+          margin: 0 10px 0 0;
+        }
+      }
+    }
+
+    .gongneng {
+      margin: 10px 0 20px 0;
+
+      span {
+        color: #fff;
+      }
+      .el-button {
+        margin-right: 10px;
+      }
+    }
+
+    :deep(.cont) {
+      width: 60%;
+      margin: 20px auto;
+    }
+
+    :deep(.download) {
+      display: flex;
+      align-items: center;
+      margin: 10px;
+    }
+
+    :deep(.download span) {
+      font-size: 16px;
+      margin-left: 20px;
+    }
+
+    :deep(.cont .el-button) {
+      margin-left: 60px;
+      margin-bottom: 30px;
+    }
+
+    :deep(.cont .accomplish) {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+    }
+
+    :deep(.cont .accomplish .el-button) {
+      width: 50%;
+      margin: 0;
+    }
+  }
+
+  .footer {
+    width: 96%;
+    height: calc(100% - 210px);
+    margin: 10px auto 30px;
+    min-height: 300px;
+    .el-table--fit {
+      height: 100% !important;
+
+      :deep(.el-table__header-wrapper) {
+        background-color: #000;
+        font-size: 14px;
+
+        tr {
+          // color: #000;
+        }
+      }
+
+      :deep(.el-table__row) {
+        height: 50px;
+        font-size: 14px;
+        // color: #000;
+        &:hover {
+          td {
+            background-color: rgba(223, 236, 254, 1);
+          }
+        }
+      }
+
+      :deep(.el-table__row):nth-child(2n) {
+        .el-table-fixed-column--right {
+          background-color: rgba(240, 243, 247, 1);
+        }
+      }
+
+      :deep(.el-table__row td) {
+        padding: 0;
+        border: 0;
+      }
+
+      .el-button--primary {
+        margin-left: 5px;
+      }
+
+      :deep(.el-table__body .even) {
+        background-color: #fff;
+      }
+
+      :deep(.el-table__body .odd) {
+        background-color: rgba(240, 243, 247, 1);
+      }
+
+      :deep(.edit) {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: rgba(111, 182, 184, 1);
+      }
+
+      :deep(.look) {
+        padding: 0 10px;
+        cursor: pointer;
+        color: rgba(30, 125, 251, 1);
+      }
+
+      .del {
+        padding: 0 10px;
+        color: rgba(212, 48, 48, 1);
+        cursor: pointer;
+      }
+
+      // :deep(.look):hover {
+      //   color: red;
+      // }
+      // :deep(.del):hover {
+      //   color: red;
+      // }
+    }
+  }
+  // 编辑按钮
+  :deep(.editDialog) {
+    //   height: 420px;
+    border-radius: 11px;
+    .el-dialog__header {
+      border-radius: 11px 11px 0 0;
+      background: rgba(237, 241, 245, 1);
+      font-weight: 600;
+      margin: 0;
+      .el-dialog__headerbtn {
+        outline: none;
+      }
+    }
+    .el-dialog__body {
+      padding: 30px 30px 10px 30px;
+      .el-form-item__content {
+        width: 200px;
+        .el-input-group__append {
+          background-color: rgba(222, 234, 252, 1);
+          color: rgba(0, 97, 255, 1);
+          cursor: pointer;
+          user-select: none;
+        }
+      }
+      .options {
+        margin: 50px 20px 20px 0;
+        width: 100%;
+        .el-form-item__content {
+          display: flex;
+          flex-direction: row-reverse;
+        }
+        .queding {
+          color: #fff;
+          margin-left: 15px;
+        }
+      }
+    }
+  }
+
+  // 指纹弹窗
+  :deep(.fingerprint) {
+    width: 611px;
+    height: 486px;
+    border-radius: 11px;
+    .el-dialog__header {
+      border-radius: 11px 11px 0 0;
+      background: rgba(237, 241, 245, 1);
+      font-weight: 600;
+      margin: 0;
+
+      .el-dialog__headerbtn {
+        outline: none;
+      }
+    }
+    .el-dialog__body {
+      padding: 0;
+      .elbody {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 20px 20px;
+        font-size: 18px;
+        color: #000;
+        border-bottom: 0.5px solid #ccc;
+
+        i {
+          cursor: pointer;
+        }
+      }
+    }
+    .el-dialog__footer {
+      .el-button--primary {
+        background: rgba(41, 109, 227, 1);
+      }
+    }
+  }
+
+  // 身份证读取
+  :deep(.addIdentityCard) {
+    //   height: 420px;
+    border-radius: 11px;
+    .el-dialog__header {
+      border-radius: 11px 11px 0 0;
+      background: rgba(237, 241, 245, 1);
+      font-weight: 600;
+      margin: 0;
+      .el-dialog__headerbtn {
+        outline: none;
+      }
+    }
+    .el-dialog__body {
+      padding: 30px 20px 10px 20px;
+      height: 330px;
+      font-size: 16px;
+      font-weight: 600;
+      color: #000;
+      .el-steps {
+        width: 600px;
+        transform: translateX(90px);
+        margin: 0 0 40px 0;
+      }
+      .title {
+        text-align: center;
+      }
+      .icons {
+        display: flex;
+        justify-content: center;
+        img {
+          width: 70px;
+          margin: 40px 0;
+        }
+        .loading {
+          animation: move 3s linear;
+        }
+        @keyframes move {
+          0% {
+            transform: rotate(0);
+          }
+          100% {
+            transform: rotate(360deg);
+          }
+        }
+      }
+      .retry {
+        text-align: center;
+        span {
+          color: red;
+          padding: 0 8px;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+
+  .pageSize {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 0 30px;
+
+    span {
+      color: #000;
+    }
+
+    .el-pagination {
+      // width: 1600px;
+      :deep(.el-pagination__total) {
+        color: #000;
+      }
+
+      :deep(.el-pagination__goto) {
+        color: #000;
+      }
+
+      :deep(.el-pagination__classifier) {
+        color: #000;
+      }
+
+      :deep(.el-input__wrapper) {
+        border: 1px solid rgba(0, 0, 0, 1);
+        border-radius: 5px;
+        box-shadow: none;
+      }
+
+      :deep(.el-pager li) {
+        margin: 0 5px;
+        border: 1px solid rgba(0, 0, 0, 1);
+        border-radius: 5px;
+        background-color: transparent;
+      }
+
+      :deep(.el-pager li.is-active) {
+        // background-color: rgba(0, 97, 255, 0.8);
+        border: 1px solid rgba(0, 97, 255, 1);
+        color: rgba(0, 97, 255, 1);
+      }
+
+      :deep(.btn-prev) {
+        margin-right: 5px;
+        border: 1px solid rgba(0, 0, 0, 1);
+        border-radius: 5px;
+        background-color: transparent;
+      }
+
+      :deep(.btn-next) {
+        margin-left: 5px;
+        border: 1px solid rgba(0, 0, 0, 1);
+        border-radius: 5px;
+        background-color: transparent;
+      }
+    }
+  }
+}
+
+.el-input {
+  width: 192px;
+}
+</style>

src/views/home/home.vue

@@ -2,13 +2,23 @@
   <div class="content-box">
     <div class="middle">
       <div class="cartogram">
+        <div class="apply">
+          <div class="addApply">
+            <span class="title">应用入口</span>
+            <img src="@/assets/items/addApply.png" alt="" />
+          </div>
+        </div>
+      </div>
+      <div class="cartogram">
         <!-- 用户类别占比 -->
         <div class="annulus" ref="annulus">
           <div class="title">用户类别占比</div>
           <div id="annulus"></div>
           <div class="headcount">
-            <span>总人数</span>
-            <span>1200</span>
+            <div class="num">
+              <span>总人数</span>
+              <span>{{ personNum }}</span>
+            </div>
           </div>
         </div>
         <!-- 能耗趋势图 -->
@@ -26,19 +36,24 @@
                 <span>摄像头总数</span>
               </li>
               <li>
+                <span>16</span>
+                <span>水表总数</span>
+              </li>
+              <li>
                 <span>100</span>
-                <span>云台总数</span>
+                <span>电表总数</span>
               </li>
             </ul>
             <ul>
               <li>
                 <span>100</span>
-                <span>磁盘录像机总数</span>
+                <span>电子班牌总数</span>
               </li>
               <li>
                 <span>100</span>
-                <span>磁盘录像机离线数</span>
+                <span>一体机总数</span>
               </li>
+              <li></li>
             </ul>
           </div>
         </div>
@@ -276,6 +291,7 @@ const router = useRouter();
 
 // 用户类别占比
 const echarts1 = ref();
+const personNum = ref(0);
 // 能耗趋势图
 const echarts2 = ref();
 // 门禁管理
@@ -303,17 +319,43 @@ const cartogram = async () => {
   // let data = {
   //   state: tabIndex1.value,
   // };
-  // let res = await axios({
-  //   method: "get",
-  //   url: api.value + "/repairRecord/repairAnalysis",
-  //   headers: {
-  //     token: sessionStorage.getItem("token"),
-  //     user_head: sessionStorage.getItem("userhead"),
-  //   },
-  //   params: data,
-  // });
-  // console.log(res, "圆环 报修分析统计");
-  // let echartsData1 = [];
+  let res = await axios({
+    method: "post",
+    url: api.value + "/wanzai/api/wechat/getUserIdTj",
+    headers: {
+      token: sessionStorage.getItem("token"),
+      user_head: sessionStorage.getItem("userhead"),
+    },
+    // params: data,
+  });
+  console.log(res, "用户类别占比");
+  let data = [];
+  let color = [
+    "rgba(67, 181, 244, 1)",
+    "rgba(137, 207, 245, 1)",
+    "rgba(180, 226, 251, 1)",
+    "rgba(212, 237, 251, 1)",
+  ];
+  res.data.data.forEach((item, index) => {
+    let arr = {
+      value: item.num,
+      name: item.name,
+      itemStyle: { color: color[index] },
+    };
+    data.push(arr);
+  });
+  // 用户总计
+  let ress = await axios({
+    method: "post",
+    url: api.value + "/wanzai/api/wechat/getUserIdTjt",
+    headers: {
+      token: sessionStorage.getItem("token"),
+      user_head: sessionStorage.getItem("userhead"),
+    },
+    // params: data,
+  });
+  console.log(ress, "用户总计");
+  personNum.value = ress.data.data.total;
 
   echarts1.value = echarts.init(document.getElementById("annulus"));
   echarts1.value.setOption({
@@ -336,28 +378,7 @@ const cartogram = async () => {
     series: [
       {
         type: "pie",
-        data: [
-          {
-            value: 200,
-            name: "家长",
-            itemStyle: { color: "rgba(67, 181, 244, 1)" },
-          },
-          {
-            value: 300,
-            name: "教职工",
-            itemStyle: { color: "rgba(137, 207, 245, 1)" },
-          },
-          {
-            value: 400,
-            name: "学生",
-            itemStyle: { color: "rgba(180, 226, 251, 1)" },
-          },
-          {
-            value: 300,
-            name: "其他",
-            itemStyle: { color: "rgba(212, 237, 251, 1)" },
-          },
-        ],
+        data: data,
         center: ["32%", "50%"],
         radius: "65%",
         label: {
@@ -1146,6 +1167,28 @@ onUnmounted(() => {
       display: flex;
       justify-content: space-between;
       margin: 0 0 25px 0;
+      // 应用入口
+      .apply {
+        width: 100%;
+        min-width: 1240px;
+        height: 120px;
+        border-radius: 8px;
+        background-color: #fff;
+        box-shadow: 0px 3px 10px rgba(0, 97, 255, 0.2);
+        .addApply {
+          color: #000;
+          height: 40px;
+          display: flex;
+          align-items: center;
+          .title {
+            margin: 0 10px;
+          }
+          img {
+            width: 25px;
+            height: 25px;
+          }
+        }
+      }
       // 用户类别占比
       .annulus {
         // width: 520px;
@@ -1176,23 +1219,26 @@ onUnmounted(() => {
         }
         // 总人数
         .headcount {
-          display: flex;
-          flex-direction: column;
           position: relative;
           top: -250px;
           right: 0;
-          width: 88%;
+          width: 100%;
+          .num {
+            display: flex;
+            flex-direction: column;
+          }
           span:nth-child(1) {
             font-size: 14px;
             color: #000;
             text-align: right;
-            margin-right: 20px;
+            margin-right: 30px;
           }
           span:nth-child(2) {
             font-size: 26px;
             font-weight: 600;
             color: rgba(42, 42, 42, 1);
             text-align: right;
+            margin-right: 30px;
           }
         }
         .table {
@@ -1243,7 +1289,7 @@ onUnmounted(() => {
             li {
               width: 45%;
               height: 100px;
-              background-color: rgba(237, 245, 250, 1);
+              // background-color: rgba(237, 245, 250, 1);
               border-radius: 7px;
               list-style: none;
               display: flex;
@@ -1387,7 +1433,7 @@ onUnmounted(() => {
         height: 250px;
       }
     }
-    .cartogram:nth-child(3) {
+    .cartogram:nth-child(4) {
       margin: 0;
     }
   }

src/views/identity/identity.vue

@@ -93,7 +93,16 @@
                   @cancel="cancelEvent"
                 >
                   <template #reference>
-                    <div class="del">删除</div>
+                    <div
+                      v-if="
+                        scope.row.id != 1 &&
+                        scope.row.id != 2 &&
+                        scope.row.id != 3
+                      "
+                      class="del"
+                    >
+                      删除
+                    </div>
                   </template>
                 </el-popconfirm>
               </div>
@@ -138,6 +147,19 @@
         >
           <el-form-item label="身份 :" prop="identity">
             <el-input
+              v-if="
+                editRuleForm.id != 1 &&
+                editRuleForm.id != 2 &&
+                editRuleForm.id != 3
+              "
+              v-model="editRuleForm.identity"
+              placeholder="请输入身份"
+              clearable
+              style="width: 500px"
+            />
+            <el-input
+              v-else
+              disabled
               v-model="editRuleForm.identity"
               placeholder="请输入身份"
               clearable

src/views/login/index.vue

@@ -43,36 +43,28 @@
         </div>
       </div>
       <div class="box_login" v-else>
-        <div class="login_title">绑定卡号</div>
+        <div class="login_title">绑定手机号</div>
         <div class="bind_code">
           <el-form
             ref="ruleFormRef"
             :model="ruleForm"
             status-icon
             :rules="rules"
-            label-width="120px"
-            class="demo-ruleForm"
+            class="login-container"
           >
             <!-- <div class="title">绑定后可以使用账号登录,账号更加安全</div> -->
-            <div class="title">用户绑定卡号获取登录权限</div>
-            <el-form-item label="" prop="user">
-              <el-input
-                :prefix-icon="User"
-                v-model="ruleForm.user"
-                placeholder="请输入卡号"
-                autocomplete="off"
-              />
+            <div class="title">用户绑定手机号获取登录权限</div>
+            <el-form-item label="手机号" prop="user">
+              <el-input v-model="ruleForm.user" placeholder="请输入手机号">
+              </el-input>
+            </el-form-item>
+            <el-form-item label="验证码" prop="pass">
+              <el-input v-model="ruleForm.pass" placeholder="请输入验证码">
+                <template #append
+                  ><span @click="sendPhone">{{ sendTitle }}</span></template
+                >
+              </el-input>
             </el-form-item>
-            <!-- <el-form-item label="" prop="pass">
-              <el-input
-                :prefix-icon="Lock"
-                show-password
-                v-model="ruleForm.pass"
-                type="password"
-                autocomplete="off"
-                placeholder="请输入登录密码"
-              />
-            </el-form-item> -->
             <!-- <el-checkbox v-model="checked" class="remeberPwd el-form-item"
               >记住密码</el-checkbox
             > -->
@@ -84,8 +76,8 @@
                 color="rgba(0, 97, 255, 1)"
                 >确认绑定</el-button
               > -->
-              <div class="btn" @click="bindClick">
-                <a :href="bindWX">微信绑定</a>
+              <div class="btn" @click="bindClick(ruleFormRef)">
+                <a :href="bindWX">绑定</a>
               </div>
             </el-form-item>
           </el-form>
@@ -115,18 +107,37 @@ import { useStore } from "vuex";
 
 const store = useStore();
 const router = useRouter();
-const bindWX = ref(); // 绑定微信的卡号的跳转链接
+const api = ref();
+const bindWX = ref(); // 绑定手机号的跳转链接
 const bindShow = ref(true); // 判断用户是否绑定
 const ruleFormRef = ref();
 const ruleForm = reactive({
   user: "",
   pass: "",
 });
-const checked = ref(false); // 记住密码
-
+const sendTime = ref(60); // 验证码时间
+const sendTitle = ref("发送短信");
+
+var checkPhone = (rule, value, callback) => {
+  if (!value) {
+    return callback(new Error("手机号不能为空"));
+  } else {
+    const reg = /^1[3-9][0-9]\d{8}$/;
+    // 这里定义的reg变量没有加引号，所以是一种特殊的数据类型，即正则，可以直接用test()方法
+    if (reg.test(value)) {
+      callback();
+    } else {
+      // 具体错误信息没有提示
+      return callback(new Error("请输入正确的手机号"));
+    }
+  }
+};
 const rules = reactive({
-  user: [{ required: true, message: "请填写用户名", trigger: "blur" }],
-  pass: [{ required: true, message: "请填写密码", trigger: "blur" }],
+  user: [
+    { required: true, min: 11, message: "手机号不足11位", trigger: "blur" },
+    { validator: checkPhone, trigger: "blur" },
+  ],
+  pass: [{ required: true, message: "请填写验证码", trigger: "blur" }],
 });
 const submitForm = (formEl) => {
   if (!formEl) return;
@@ -188,11 +199,65 @@ const loginClick = () => {
   // sessionStorage.setItem("sidevarItem", "/wanzai/home");
 };
 // 绑定点击微信
-const bindClick = () => {
+const bindClick = (formEl) => {
+  // if (ruleForm.user) {
+  //   bindWX.value =
+  //     "https://www.campussmartlife.com/smartApi//wanzai/api/wechat/bind?cardNo=" +
+  //     ruleForm.user;
+  // }
+  if (!formEl) return;
+  formEl.validate(async (valid) => {
+    if (valid) {
+      bindWX.value =
+        "https://www.campussmartlife.com/smartApi/wanzai/api/wechat/bind?" +
+        `phone=${ruleForm.user}&messageCode=${ruleForm.pass}`;
+    } else {
+      return false;
+    }
+  });
+};
+// 发送短信
+const sendPhone = async () => {
   if (ruleForm.user) {
-    bindWX.value =
-      "https://www.campussmartlife.com/smartApi//wanzai/api/wechat/bind?cardNo=" +
-      ruleForm.user;
+    var formData = new FormData();
+    // var psw = formData.get("psw"); // 获取密码
+    formData.append("phone", ruleForm.user);
+    let res = await axios({
+      method: "post",
+      url: api.value + "/wanzai/api/wechat/sendMessage",
+      data: formData,
+    });
+    console.log(res, "发送短信");
+    if (res.data.code == 200) {
+      sendTitle.value = 60;
+      let timer = setInterval(() => {
+        sendTitle.value--;
+        if (sendTitle.value == 0) {
+          sendTitle.value = "重新发送";
+          clearInterval(timer);
+        }
+      }, 1000);
+      ElMessage({
+        type: "success",
+        showClose: true,
+        message: res.data.message,
+        center: true,
+      });
+    } else {
+      ElMessage({
+        type: "error",
+        showClose: true,
+        message: res.data.message,
+        center: true,
+      });
+    }
+  } else {
+    ElMessage({
+      type: "error",
+      showClose: true,
+      message: "请输入手机号",
+      center: true,
+    });
   }
 };
 // 实例微信js对象
@@ -211,26 +276,29 @@ const setWxerwma = async () => {
 };
 onMounted(() => {
   // setWxerwma();
-  console.log(router.currentRoute.value.query);
-  console.log(window.location.href);
+  // console.log(router.currentRoute.value.query);
+  // console.log(window.location.href);
   if (router.currentRoute.value.query.message == "请绑定信息") {
     ElMessage({
       type: "warning",
       showClose: true,
-      message: "当前用户未绑定卡号，请先绑定",
+      message: "当前用户未绑定手机号，请先绑定",
       center: true,
     });
     bindShow.value = false;
-  } else if (router.currentRoute.value.query.message == "卡号信息错误") {
-    bindShow.value = false;
+  } else if (router.currentRoute.value.query.message == "无登录权限") {
+    bindShow.value = true;
     ElMessage({
       type: "error",
       showClose: true,
-      message: "卡号信息错误",
+      message: "暂无登录权限，请联系管理添加权限",
       center: true,
     });
   }
 });
+onBeforeMount(() => {
+  api.value = store.state.user.api;
+});
 </script>
 
 <style lang="scss" scoped>
@@ -296,11 +364,11 @@ onMounted(() => {
       background-color: #fff;
       // border: 1px solid red;
       // margin-top: 100px;
-      padding: 60px 0;
+      padding: 80px 0 0 0;
       box-sizing: border-box;
       display: flex;
       flex-direction: column;
-      justify-content: space-between;
+      // justify-content: space-between;
       align-items: center;
 
       // width: 426px;
@@ -418,12 +486,12 @@ onMounted(() => {
       }
       .bind_code {
         .el-form {
-          width: 280px;
+          width: 300px;
           display: flex;
           flex-direction: column;
           justify-content: center;
           align-items: center;
-          padding: 35px 0;
+          padding: 80px 0 0 0;
           border-radius: 16px;
           // background: rgba(255, 255, 255, 1);
 
@@ -439,17 +507,20 @@ onMounted(() => {
           }
 
           .el-form-item {
-            width: 280px;
+            width: 300px;
             height: 40px;
-            // margin-bottom: 0;
+            margin-bottom: 25px;
+            display: flex;
+            align-items: center;
 
             :deep(.el-form-item__content) {
               margin-left: 0 !important;
+              border-bottom: 1px solid #ccc;
               .btn {
                 display: flex;
                 justify-content: center;
                 align-items: center;
-                width: 280px;
+                width: 300px;
                 height: 40px;
                 color: #fff;
                 font-size: 16px;
@@ -464,12 +535,19 @@ onMounted(() => {
                 height: 40px;
 
                 .el-input__wrapper {
-                  border-radius: 12px;
+                  // border-radius: 12px;
+                  box-shadow: none;
 
                   .el-input__prefix {
                     margin: 0 10px 0 12px;
                   }
                 }
+                .el-input-group__append {
+                  cursor: pointer;
+                  box-shadow: none;
+                  background-color: transparent;
+                  padding: 0 10px;
+                }
 
                 // .el-icon {
                 //   width: 24px;
@@ -486,43 +564,11 @@ onMounted(() => {
                   font-size: 14px;
                 }
               }
-
-              // .el-form-item__error {
-              //   font-size: 16px;
-              // }
-
-              .el-button {
-                width: 100%;
-                height: 40px;
-                font-size: 16px;
-                border-radius: 12px;
-              }
             }
-
-            .el-button--primary {
-              width: 280px;
-            }
-          }
-
-          .remeberPwd {
-            height: 30px;
-            margin-bottom: 30px;
-
-            // :deep(.el-checkbox__input) {
-            //   .el-checkbox__inner {
-            //     width: 15px;
-            //     height: 15px;
-            //   }
-
-            //   .el-checkbox__inner::after {
-            //     width: 6px;
-            //     height: 12px;
-            //     top: 0px;
-            //   }
-            // }
-
-            :deep(.el-checkbox__label) {
-              font-size: 14px;
+            &:nth-child(4) {
+              :deep(.el-form-item__content) {
+                border: none;
+              }
             }
           }
         }

src/views/post/post.vue

@@ -0,0 +1,945 @@
+<template>
+  <div class="content-box">
+    <div class="left">
+      <!-- <el-icon :size="23" class="camera"><VideoCameraFilled /></el-icon> -->
+      <span class="cameratxt">职务管理</span>
+    </div>
+    <div class="scrollId">
+      <div class="middle">
+        <div class="filter">
+          <div class="condition">
+            <span>职务名称:&nbsp;&nbsp;</span>
+            <el-input
+              :clearable="true"
+              @clear="searchBtn"
+              v-model="searchInput.keyWord"
+              class="w-50 m-2"
+              placeholder="请输入职务名称"
+            />
+          </div>
+          <!-- <div class="condition">
+            <span>创建时间&nbsp;&nbsp;</span>
+            <el-date-picker
+              v-model="searchInput.createTime"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="起始时间"
+              end-placeholder="结束时间"
+              format="YYYY-MM-DD"
+              value-format="YYYY-MM-DD"
+              :prefix-icon="Calendar"
+              placeholder="请选择日期"
+            />
+          </div> -->
+          <el-button
+            color="rgba(0, 97, 255, 1)"
+            type="primary"
+            class="search"
+            @click="searchBtn"
+            ><el-icon>
+              <Search />
+            </el-icon>
+            <span>查询</span></el-button
+          >
+        </div>
+        <!-- 按钮列表 -->
+        <div class="gongneng">
+          <el-button
+            type="primary"
+            color="rgba(0, 97, 255, 1)"
+            @click="addClick"
+            plain
+            >新增职务</el-button
+          >
+          <!-- <el-button type="primary" color="rgba(0, 97, 255, 1)" @click="addlist"
+            ><span>导出</span></el-button
+          > -->
+        </div>
+      </div>
+      <div class="footer" v-loading="loading">
+        <el-table
+          :row-class-name="tableRowClassName"
+          :data="tableData.list"
+          @selection-change="handleSelectionChange"
+          style="width: 100%"
+          :header-cell-style="{
+            background: 'rgba(240, 243, 247, 1)',
+            height: '50px',
+            border: 0,
+          }"
+        >
+          <!-- <el-table-column align="center" type="selection" width="80" /> -->
+          <el-table-column
+            width="150"
+            align="center "
+            type="index"
+            label="序号"
+          />
+          <el-table-column align="center" prop="name" label="职务" />
+          <el-table-column align="center" prop="categoryId" label="类别">
+            <template #default="scope">
+              <span v-if="scope.row.categoryId == 1">学生</span>
+              <span v-if="scope.row.categoryId == 2">老师</span>
+            </template>
+          </el-table-column>
+          <el-table-column align="center" prop="createTime" label="创建时间" />
+          <el-table-column align="center" label="操作" width="200">
+            <template #default="scope">
+              <div class="edit">
+                <div class="look" @click="editClick(scope.row)">编辑</div>
+                <el-popconfirm
+                  width="220"
+                  confirm-button-text="确认"
+                  cancel-button-text="取消"
+                  :icon="InfoFilled"
+                  icon-color="#f89626"
+                  title="是否删除此身份?"
+                  @confirm="del(scope.row)"
+                  @cancel="cancelEvent"
+                >
+                  <template #reference>
+                    <div class="del">删除</div>
+                  </template>
+                </el-popconfirm>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
+      <!-- 分页组件 -->
+      <div class="pageSize">
+        <span></span>
+        <el-pagination
+          background
+          :current-page="currentPage"
+          :page-size="pageSize"
+          layout="total, prev, pager, next, jumper, slot"
+          :total="total"
+          @update:current-page="handleCurrentChange"
+        />
+      </div>
+
+      <!-- 编辑按钮 -->
+      <el-dialog
+        class="editDialog"
+        v-model="editVisible"
+        :close-on-click-modal="false"
+        :close-on-press-escape="false"
+        :title="titleDialog"
+        align-center
+        width="600"
+        :before-close="cancelEdit"
+      >
+        <el-form
+          ref="editRef"
+          :model="editRuleForm"
+          :rules="editRules"
+          label-width="90px"
+          class="demo-ruleForm"
+          :size="formSize"
+          label-position="left"
+          status-icon
+        >
+          <el-form-item label="职务 :" prop="identity">
+            <el-input
+              v-model="editRuleForm.identity"
+              placeholder="请输入职务名称"
+              clearable
+              style="width: 500px"
+            />
+          </el-form-item>
+          <el-form-item label="类型 :" prop="apply">
+            <el-select
+              v-model="editRuleForm.apply"
+              placeholder="请选择类型"
+              style="width: 500px"
+            >
+              <el-option label="学生" :value="1" />
+              <el-option label="老师" :value="2" />
+            </el-select>
+          </el-form-item>
+          <!-- <el-form-item label="用户角色 :" prop="userRoles">
+            <el-select
+              v-model="editRuleForm.userRoles"
+              class="m-2"
+              placeholder="请选择用户角色"
+              style="width: 500px"
+            >
+              <el-option label="清洁工" value="1" />
+              <el-option label="洗碗工" value="2" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="微校卡号 :" prop="schoolCard">
+            <el-input
+              v-model="editRuleForm.schoolCard"
+              placeholder="请输入微校卡号"
+              clearable
+              style="width: 500px"
+            />
+          </el-form-item>
+          <el-form-item label="身份证号 :" prop="idNumber">
+            <el-input
+              v-model="editRuleForm.idNumber"
+              placeholder="请输入身份证号"
+              style="width: 500px"
+            >
+              <template #append>
+                <div @click="readCard">读卡</div>
+              </template>
+            </el-input>
+          </el-form-item>
+          <el-form-item label="指纹 :" prop="fingerprint">
+            <el-input
+              v-model="editRuleForm.fingerprint"
+              placeholder="请输入指纹"
+              style="width: 500px"
+            >
+              <template #append>
+                <div @click="entering">录入</div>
+              </template>
+            </el-input>
+          </el-form-item> -->
+          <el-form-item class="options">
+            <el-button
+              color="rgba(41, 109, 227, 1)"
+              class="queding"
+              type="primary"
+              @click="confirmEdit(editRef)"
+            >
+              确认
+            </el-button>
+            <el-button @click="cancelEdit(editRef)">取消</el-button>
+          </el-form-item>
+        </el-form>
+      </el-dialog>
+    </div>
+    <div class="bgImg" v-if="bgImg">
+      <el-carousel
+        @click="bgImg = false"
+        ref="bgImgs"
+        indicator-position
+        arrow="always"
+        :autoplay="false"
+        trigger
+      >
+        <el-carousel-item v-for="item in bgImgList" :key="item.id">
+          <img :src="item.url" alt="" />
+        </el-carousel-item>
+      </el-carousel>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {
+  ref,
+  reactive,
+  watch,
+  nextTick,
+  onBeforeMount,
+  onUnmounted,
+} from "vue";
+import { useRouter } from "vue-router";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { Calendar } from "@element-plus/icons-vue";
+import vidiconsApi from "@/api/vidicons.js";
+import { dayjs } from "element-plus";
+import lodash from "lodash";
+import axios from "axios";
+import { useStore } from "vuex";
+const store = useStore();
+const api = ref("");
+const router = useRouter();
+// 表格数据
+const loading = ref(false);
+const tableData = reactive({
+  list: [
+    {
+      userName: "张三",
+      userPhone: 15,
+      teamName: 12,
+    },
+  ],
+});
+const searchInput = reactive({
+  keyWord: "",
+  createTime: "",
+}); // 搜索按钮数据
+
+const currentPage = ref(1); // 当前页
+const pageSize = ref(10);
+const total = ref(5); // 当前总数
+
+// 编辑功能
+const titleDialog = ref("");
+const editVisible = ref(false);
+const editRef = ref();
+const editRuleForm = reactive({
+  identity: "", // 职务
+  apply: "", // 类型
+  id: "",
+});
+const applyData = ref(); // 应用管理数据
+
+// 表单验证
+const editRules = reactive({
+  identity: [{ required: true, message: "职务不能为空", trigger: "blur" }],
+  apply: [
+    {
+      required: true,
+      message: "类型不能为空",
+      trigger: "blur",
+    },
+  ],
+});
+
+// 身份分页列表
+const getList = async () => {
+  loading.value = true;
+  let data = {
+    currentPage: currentPage.value,
+    pageCount: pageSize.value,
+    name: searchInput.keyWord, // 关键字名称
+  };
+  let res = await axios({
+    method: "get",
+    url: api.value + "/wanzai/api/smartDuties/queryPageSmartDuties",
+    headers: {
+      // token: sessionStorage.getItem("token"),
+      // user_head: sessionStorage.getItem("userhead"),
+    },
+    params: data,
+  });
+  console.log(res, "职务分页数据");
+  if (res.data.code == 200) {
+    loading.value = false;
+    tableData.list = res.data.data.list;
+    total.value = res.data.data.totalCount;
+    // ElMessage({
+    //   type: "success",
+    //   showClose: true,
+    //   message: res.data.message,
+    //   center: true,
+    // });
+  } else {
+    loading.value = false;
+    ElMessage({
+      type: "error",
+      showClose: true,
+      message: res.data.message,
+      center: true,
+    });
+  }
+};
+// 获取应用列表
+const applyList = async () => {
+  let data = {
+    currentPage: 1,
+    pageCount: 100,
+    // managerId: sessionStorage.getItem("token"),
+  };
+  let res = await axios({
+    method: "get",
+    url: api.value + "/wanzai/api/smartApply/queryPageSmartApply",
+    headers: {
+      // token: sessionStorage.getItem("token"),
+      // user_head: sessionStorage.getItem("userhead"),
+    },
+    params: data,
+  });
+  applyData.value = res.data.data.list;
+  console.log(res, "应用管理分页数据");
+};
+
+// 搜索功能
+const searchBtn = lodash.debounce(async () => {
+  getList();
+}, 300);
+// 添加按钮 （-------------------------------------------）
+const addClick = async () => {
+  titleDialog.value = "新增";
+  editVisible.value = true;
+  editRuleForm.identity = "";
+  editRuleForm.apply = "";
+  editRuleForm.id = "";
+};
+
+//编辑按钮  （-------------------------------------------）
+const editClick = async (row) => {
+  titleDialog.value = "编辑";
+  editVisible.value = true;
+  console.log(row);
+
+  editRuleForm.identity = row.name;
+  editRuleForm.apply = row.categoryId;
+  editRuleForm.id = row.id;
+};
+
+const cancelEdit = () => {
+  editVisible.value = false;
+  editRef.value.resetFields();
+  editRuleForm.identity = "";
+  editRuleForm.apply = "";
+  editRuleForm.id = "";
+};
+
+// 确定编辑
+const confirmEdit = (formEl) => {
+  if (!formEl) return;
+  formEl.validate(async (valid, fields) => {
+    if (valid) {
+      let data = {
+        name: editRuleForm.identity,
+        categoryId: editRuleForm.apply,
+      };
+      let res = "";
+      // 根据id判断是编辑还是添加
+      if (editRuleForm.id) {
+        data.id = editRuleForm.id;
+        res = await axios({
+          method: "post",
+          url: api.value + "/wanzai/api/smartDuties/updateSmartDutiesById",
+          headers: {},
+          data: data,
+        });
+      } else {
+        res = await axios({
+          method: "post",
+          url: api.value + "/wanzai/api/smartDuties/insertSmartDuties",
+          headers: {},
+          data: data,
+        });
+      }
+      console.log(res, "添加成功");
+      if (res.data.code == 200) {
+        editVisible.value = false;
+        getList();
+        editRef.value.resetFields();
+        ElMessage({
+          type: "success",
+          showClose: true,
+          message: res.data.message,
+          center: true,
+        });
+      } else {
+        ElMessage({
+          type: "error",
+          showClose: true,
+          message: res.data.message,
+          center: true,
+        });
+      }
+    }
+  });
+};
+
+//删除按钮
+const del = async (row) => {
+  let data = {
+    id: row.id,
+  };
+  let res = await axios({
+    method: "get",
+    url: api.value + "/wanzai/api/smartDuties/deleteSmartDutiesById",
+    headers: {
+      // token: sessionStorage.getItem("token"),
+      // user_head: sessionStorage.getItem("userhead"),
+    },
+    params: data,
+  });
+  if (res.data.code == 200) {
+    if (tableData.list.length == 1 && currentPage.value != 1) {
+      currentPage.value = currentPage.value - 1;
+    }
+    getList();
+    ElMessage({
+      type: "success",
+      showClose: true,
+      message: res.data.message,
+      center: true,
+    });
+  } else {
+    ElMessage({
+      type: "error",
+      showClose: true,
+      message: res.data.message,
+      center: true,
+    });
+  }
+  // console.log(res);
+};
+
+// 多选框功能
+const handleSelectionChange = (val) => {
+  console.log(val);
+  selectData.list = val;
+};
+//导出功能
+// const importExcel = async () => {
+//   if (searchInput.createTime == null) {
+//     searchInput.createTime = "";
+//   }
+//   let data = new FormData();
+//   data.set("car_number", searchInput.carnumber);
+//   data.set("create_time", searchInput.createTime);
+//   let res = await axios({
+//     method: "post",
+//     url: api.value + "/carBook/cinfotoExcel.action",
+//     headers: {
+//       token: sessionStorage.getItem("token"),
+//     },
+//     data: data,
+//   });
+//   // console.log(res, "导出账号");
+//   if (res.data.code == 200) {
+//     // const elt = document.createElement("a");
+//     // elt.setAttribute(
+//     //   "href",
+//     //   "https://chtech.ncjti.edu.cn/carstop" + res.data.downurl
+//     // );
+//     // elt.setAttribute("download", "file.png");
+//     // elt.style.display = "none";
+//     // document.body.appendChild(elt);
+//     // elt.click();
+//     var downloadPath = "https://chtech.ncjti.edu.cn/carstop" + res.data.downurl;
+//     console.log("获得地址数据:", downloadPath);
+//     var downloadLink = document.createElement("a");
+//     downloadLink.style.display = "none"; // 使其隐藏
+//     downloadLink.href = downloadPath;
+//     downloadLink.download = "";
+//     downloadLink.click();
+//     document.body.appendChild(downloadLink);
+//     document.body.removeChild(downloadLink);
+//     ElMessage({
+//       type: "success",
+//       showClose: true,
+//       message: res.data.message,
+//       center: true,
+//     });
+//   } else {
+//     ElMessage({
+//       type: "error",
+//       showClose: true,
+//       message: res.data.message,
+//       center: true,
+//     });
+//   }
+// };
+// 表格斑马纹颜色修改
+const tableRowClassName = ({ row, rowIndex }) => {
+  if (rowIndex % 2 === 0) {
+    return "even";
+  } else if (rowIndex % 2 !== 0) {
+    return "odd";
+  }
+  return "";
+};
+// 分页
+const handleCurrentChange = (value) => {
+  // console.log(value);
+  currentPage.value = value;
+  getList();
+};
+
+onBeforeMount(async () => {
+  api.value = store.state.user.api;
+  getList();
+  // applyList(); // 应用列表
+});
+onUnmounted(() => {
+  // document.removeEventListener("keyup", Enters);
+});
+</script>
+
+<style scoped lang="scss">
+.content-box {
+  min-width: 600px;
+  width: calc(100vw - 260px);
+  height: calc(100vh - 105px);
+  margin: 20px auto;
+  border-radius: 8px;
+  background-color: #fff;
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0px 3px 10px rgba(0, 97, 255, 0.2);
+
+  .left {
+    // width: calc(100wh - 40px);
+    display: flex;
+    align-items: center;
+
+    margin: 0 30px;
+    border-bottom: 1px solid #ccc;
+    color: rgb(0, 0, 0);
+    font-size: 18px;
+    font-weight: 600;
+
+    span {
+      display: block;
+      height: 60px;
+      line-height: 60px;
+      margin-right: 20px;
+    }
+
+    .is_active {
+      color: rgba(111, 182, 184, 1);
+    }
+  }
+  .scrollId {
+    overflow: auto;
+    height: calc(100% - 61px);
+  }
+  .middle {
+    width: 96%;
+    margin: 0 auto;
+
+    color: #000;
+
+    // border-bottom: 1px solid rgb(231, 231, 231);
+    .filter {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      margin: 10px 0 0 0;
+
+      .search {
+        color: #fff;
+      }
+
+      .condition {
+        display: flex;
+        align-items: center;
+        margin: 10px 30px 10px 0;
+
+        :deep(.el-input .el-input__inner) {
+          font-size: 14px;
+        }
+
+        span {
+          margin: 0 10px 0 0;
+        }
+      }
+    }
+
+    .gongneng {
+      margin: 10px 0 20px 0;
+
+      span {
+        color: #fff;
+      }
+      .el-button {
+        margin-right: 10px;
+      }
+    }
+
+    :deep(.cont) {
+      width: 60%;
+      margin: 20px auto;
+    }
+
+    :deep(.download) {
+      display: flex;
+      align-items: center;
+      margin: 10px;
+    }
+
+    :deep(.download span) {
+      font-size: 16px;
+      margin-left: 20px;
+    }
+
+    :deep(.cont .el-button) {
+      margin-left: 60px;
+      margin-bottom: 30px;
+    }
+
+    :deep(.cont .accomplish) {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+    }
+
+    :deep(.cont .accomplish .el-button) {
+      width: 50%;
+      margin: 0;
+    }
+  }
+
+  .footer {
+    width: 96%;
+    height: calc(100% - 210px);
+    margin: 10px auto 30px;
+    min-height: 300px;
+    .el-table--fit {
+      height: 100% !important;
+
+      :deep(.el-table__header-wrapper) {
+        background-color: #000;
+        font-size: 14px;
+
+        tr {
+          // color: #000;
+        }
+      }
+
+      :deep(.el-table__row) {
+        height: 50px;
+        font-size: 14px;
+        // color: #000;
+        &:hover {
+          td {
+            background-color: rgba(223, 236, 254, 1);
+          }
+        }
+      }
+
+      :deep(.el-table__row):nth-child(2n) {
+        .el-table-fixed-column--right {
+          background-color: rgba(240, 243, 247, 1);
+        }
+      }
+
+      :deep(.el-table__row td) {
+        padding: 0;
+        border: 0;
+      }
+
+      .el-button--primary {
+        margin-left: 5px;
+      }
+
+      :deep(.el-table__body .even) {
+        background-color: #fff;
+      }
+
+      :deep(.el-table__body .odd) {
+        background-color: rgba(240, 243, 247, 1);
+      }
+
+      :deep(.edit) {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: rgba(111, 182, 184, 1);
+      }
+
+      :deep(.look) {
+        padding: 0 10px;
+        cursor: pointer;
+        color: rgba(30, 125, 251, 1);
+      }
+
+      .del {
+        padding: 0 10px;
+        color: rgba(212, 48, 48, 1);
+        cursor: pointer;
+      }
+
+      // :deep(.look):hover {
+      //   color: red;
+      // }
+      // :deep(.del):hover {
+      //   color: red;
+      // }
+    }
+  }
+  // 编辑按钮
+  :deep(.editDialog) {
+    //   height: 420px;
+    border-radius: 11px;
+    .el-dialog__header {
+      border-radius: 11px 11px 0 0;
+      background: rgba(237, 241, 245, 1);
+      font-weight: 600;
+      margin: 0;
+      .el-dialog__headerbtn {
+        outline: none;
+      }
+    }
+    .el-dialog__body {
+      padding: 30px 30px 10px 30px;
+      .el-form-item__content {
+        width: 200px;
+        .el-input-group__append {
+          background-color: rgba(222, 234, 252, 1);
+          color: rgba(0, 97, 255, 1);
+          cursor: pointer;
+          user-select: none;
+        }
+      }
+      .options {
+        margin: 50px 20px 20px 0;
+        width: 100%;
+        .el-form-item__content {
+          display: flex;
+          flex-direction: row-reverse;
+        }
+        .queding {
+          color: #fff;
+          margin-left: 15px;
+        }
+      }
+    }
+  }
+
+  // 指纹弹窗
+  :deep(.fingerprint) {
+    width: 611px;
+    height: 486px;
+    border-radius: 11px;
+    .el-dialog__header {
+      border-radius: 11px 11px 0 0;
+      background: rgba(237, 241, 245, 1);
+      font-weight: 600;
+      margin: 0;
+
+      .el-dialog__headerbtn {
+        outline: none;
+      }
+    }
+    .el-dialog__body {
+      padding: 0;
+      .elbody {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 20px 20px;
+        font-size: 18px;
+        color: #000;
+        border-bottom: 0.5px solid #ccc;
+
+        i {
+          cursor: pointer;
+        }
+      }
+    }
+    .el-dialog__footer {
+      .el-button--primary {
+        background: rgba(41, 109, 227, 1);
+      }
+    }
+  }
+
+  // 身份证读取
+  :deep(.addIdentityCard) {
+    //   height: 420px;
+    border-radius: 11px;
+    .el-dialog__header {
+      border-radius: 11px 11px 0 0;
+      background: rgba(237, 241, 245, 1);
+      font-weight: 600;
+      margin: 0;
+      .el-dialog__headerbtn {
+        outline: none;
+      }
+    }
+    .el-dialog__body {
+      padding: 30px 20px 10px 20px;
+      height: 330px;
+      font-size: 16px;
+      font-weight: 600;
+      color: #000;
+      .el-steps {
+        width: 600px;
+        transform: translateX(90px);
+        margin: 0 0 40px 0;
+      }
+      .title {
+        text-align: center;
+      }
+      .icons {
+        display: flex;
+        justify-content: center;
+        img {
+          width: 70px;
+          margin: 40px 0;
+        }
+        .loading {
+          animation: move 3s linear;
+        }
+        @keyframes move {
+          0% {
+            transform: rotate(0);
+          }
+          100% {
+            transform: rotate(360deg);
+          }
+        }
+      }
+      .retry {
+        text-align: center;
+        span {
+          color: red;
+          padding: 0 8px;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+
+  .pageSize {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 0 30px;
+
+    span {
+      color: #000;
+    }
+
+    .el-pagination {
+      // width: 1600px;
+      :deep(.el-pagination__total) {
+        color: #000;
+      }
+
+      :deep(.el-pagination__goto) {
+        color: #000;
+      }
+
+      :deep(.el-pagination__classifier) {
+        color: #000;
+      }
+
+      :deep(.el-input__wrapper) {
+        border: 1px solid rgba(0, 0, 0, 1);
+        border-radius: 5px;
+        box-shadow: none;
+      }
+
+      :deep(.el-pager li) {
+        margin: 0 5px;
+        border: 1px solid rgba(0, 0, 0, 1);
+        border-radius: 5px;
+        background-color: transparent;
+      }
+
+      :deep(.el-pager li.is-active) {
+        // background-color: rgba(0, 97, 255, 0.8);
+        border: 1px solid rgba(0, 97, 255, 1);
+        color: rgba(0, 97, 255, 1);
+      }
+
+      :deep(.btn-prev) {
+        margin-right: 5px;
+        border: 1px solid rgba(0, 0, 0, 1);
+        border-radius: 5px;
+        background-color: transparent;
+      }
+
+      :deep(.btn-next) {
+        margin-left: 5px;
+        border: 1px solid rgba(0, 0, 0, 1);
+        border-radius: 5px;
+        background-color: transparent;
+      }
+    }
+  }
+}
+
+.el-input {
+  width: 192px;
+}
+</style>

src/views/screenShot/screenShot.vue

@@ -96,14 +96,28 @@
                 <el-table-column
                   width="250"
                   align="center "
-                  prop="userEdit"
+                  prop="cardNo"
                   label="用户编号"
                 />
-                <el-table-column align="center" prop="name" label="用户姓名" />
-                <el-table-column align="center" prop="time" label="时间" />
+                <el-table-column
+                  align="center"
+                  prop="userName"
+                  label="用户姓名"
+                />
+                <el-table-column
+                  align="center"
+                  prop="createTime"
+                  label="创建时间"
+                />
                 <el-table-column align="center" label="操作" width="200">
                   <template #default="scope">
-                    <div class="del" @click="freezeClick(scope.row)">冻结</div>
+                    <div
+                      v-if="scope.row.isShow == 1"
+                      class="del"
+                      @click="freezeClick(scope.row)"
+                    >
+                      冻结
+                    </div>
                   </template>
                 </el-table-column>
               </el-table>
@@ -120,7 +134,7 @@
               />
             </div>
           </el-tab-pane>
-          <el-tab-pane label="已冻结名单" name="3">
+          <el-tab-pane class="freezeList" label="已冻结名单" name="3">
             <div class="searchInp">
               <div class="sel">
                 <el-input
@@ -150,7 +164,7 @@
                 ><span>导出</span></el-button
               >
             </div>
-            <div class="footer">
+            <div class="footers">
               <el-table
                 :row-class-name="tableRowClassName"
                 :data="freezeListData.list"
@@ -170,11 +184,20 @@
                 <el-table-column
                   width="250"
                   align="center "
-                  prop="userEdit"
+                  prop="cardNo"
                   label="编号"
                 />
-                <el-table-column align="center" prop="name" label="用户姓名" />
-                <el-table-column align="center" prop="mode" label="冻结方式" />
+                <el-table-column
+                  align="center"
+                  prop="userName"
+                  label="用户姓名"
+                />
+                <el-table-column align="center" prop="typeStr" label="冻结方式">
+                  <template #default="scope">
+                    <span v-if="scope.row.typeStr == 0">永久冻结</span>
+                    <span v-if="scope.row.typeStr == 1">指定时间</span>
+                  </template>
+                </el-table-column>
                 <el-table-column align="center" label="操作" width="200">
                   <template #default="scope">
                     <div class="defrost">
@@ -223,32 +246,50 @@
       width="500"
       :before-close="cancelEdit"
     >
-      <div class="condition">
-        <span class="item">名称 : </span>
-        <span>近一年截屏次数到达 1 次</span>
-      </div>
-      <div class="condition">
-        <span class="item">触发惩罚 : </span>
-        <el-select
-          v-model="punishment"
-          class="m-2"
-          placeholder="请选择触发惩罚"
-          style="width: 300px"
-        >
-          <el-option label="冻结1小时" value="1" />
-          <el-option label="冻结2小时" value="2" />
-        </el-select>
-      </div>
+      <el-form
+        ref="editRuleRef"
+        :model="editRuleForm"
+        :rules="editRules"
+        label-width="90px"
+        class="demo-ruleForm"
+        :size="formSize"
+        label-position="left"
+        status-icon
+      >
+        <el-form-item label="截屏次数 :" prop="screenshotNum">
+          <span
+            >近一年截屏次数到达
+            <el-input
+              v-model="editRuleForm.screenshotNum"
+              placeholder="请输入截屏次数"
+              clearable
+              style="width: 150px"
+            />
+            次</span
+          >
+        </el-form-item>
+        <el-form-item label="触发惩罚 :" prop="trigger">
+          <el-select
+            v-model="editRuleForm.trigger"
+            class="m-2"
+            placeholder="请选择触发惩罚"
+            style="width: 300px"
+          >
+            <el-option v-for="i in ruleList" :label="i.name" :value="i.id" />
+          </el-select>
+        </el-form-item>
+      </el-form>
+
       <div class="options">
         <el-button
           color="rgba(41, 109, 227, 1)"
           class="queding"
           type="primary"
-          @click="confirmEdit(editRef)"
+          @click="confirmEdit(editRuleRef)"
         >
           确认
         </el-button>
-        <el-button @click="cancelEdit(editRef)">取消</el-button>
+        <el-button @click="cancelEdit(editRuleRef)">取消</el-button>
       </div>
     </el-dialog>
 
@@ -275,11 +316,14 @@
       >
         <el-form-item label="冻结方式 :" prop="type">
           <el-radio-group v-model="freezeRuleForm.type">
-            <el-radio :label="1">永久冻结</el-radio>
-            <el-radio :label="2">指定时间</el-radio>
+            <el-radio :label="0">永久冻结</el-radio>
+            <el-radio :label="1">指定时间</el-radio>
           </el-radio-group>
         </el-form-item>
-        <el-form-item label="截止时间 :" prop="time">
+        <el-form-item
+          label="截止时间 :"
+          :prop="freezeRuleForm.type == 0 ? '' : 'time'"
+        >
           <el-date-picker
             v-model="freezeRuleForm.time"
             type="date"
@@ -287,12 +331,15 @@
             value-format="YYYY-MM-DD"
             :prefix-icon="Calendar"
             placeholder="请选择日期"
+            @change="changeTime"
           />
         </el-form-item>
         <el-form-item label="冻结原因 :" prop="reason">
           <el-input
             v-model="freezeRuleForm.reason"
-            :rows="3"
+            :rows="4"
+            show-word-limit
+            maxlength="100"
             type="textarea"
             placeholder="请输入冻结原因"
           />
@@ -341,31 +388,36 @@ const activeName = ref("1");
 // 规则表格数据 (-------------------------------------------------------------)
 const loading = ref(false);
 const ruleData = reactive({
-  list: [
-    {
-      screenshotNum: "2",
-      punishment: "身份码提醒",
-    },
-  ],
+  list: [],
 });
 const currentPageRule = ref(1); // 当前页
 const pageSizeRule = ref(10);
 const totalRule = ref(15); // 当前总数
+const ruleList = ref(); // 规则列表
 
-// 编辑功能
+// 编辑规则功能
 const editVisible = ref(false);
-const punishment = ref("1"); // 选择触发惩罚
-
-// 截屏记录表格数据 (-------------------------------------------------------------)
-const recordData = reactive({
-  list: [
+const editRuleRef = ref();
+const editRuleForm = reactive({
+  trigger: "", // 选择触发惩罚
+  screenshotNum: "", // 次数
+  id: "",
+});
+const editRules = reactive({
+  trigger: [{ required: true, message: "触发惩罚不能为空", trigger: "blur" }],
+  screenshotNum: [
     {
-      screenshotNum: "151502051651561",
-      name: "张三",
-      time: "2023-12-12 12:20:12",
+      required: true,
+      message: "截屏次数不能为空",
+      trigger: "blur",
     },
   ],
 });
+
+// 截屏记录表格数据 (-------------------------------------------------------------)
+const recordData = reactive({
+  list: [],
+});
 const currentPageRecord = ref(1); // 当前页
 const pageSizeRecord = ref(10);
 const totalRecord = ref(15); // 当前总数
@@ -376,6 +428,7 @@ const freezeRuleForm = reactive({
   type: 1,
   time: "",
   reason: "",
+  userId: "",
 });
 // 表单验证
 const freezeRules = reactive({
@@ -387,51 +440,25 @@ const freezeRules = reactive({
       trigger: "blur",
     },
   ],
-  reason: [
-    {
-      required: true,
-      message: "冻结原因不能为空",
-      trigger: "blur",
-    },
-  ],
+  // reason: [
+  //   {
+  //     required: true,
+  //     message: "冻结原因不能为空",
+  //     trigger: "blur",
+  //   },
+  // ],
 });
 
 // 已冻结名单 (----------------------------------------------------------)
 const freezeListSel = ref();
 const freezeListData = reactive({
-  list: [
-    {
-      userEdit: "151502051651561",
-      name: "张三",
-      mode: "永久冻结",
-    },
-    {
-      userEdit: "151502051651561",
-      name: "张三",
-      mode: "永久冻结",
-    },
-    {
-      userEdit: "151502051651561",
-      name: "张三",
-      mode: "永久冻结",
-    },
-    {
-      userEdit: "151502051651561",
-      name: "张三",
-      mode: "永久冻结",
-    },
-    {
-      userEdit: "151502051651561",
-      name: "张三",
-      mode: "永久冻结",
-    },
-  ],
+  list: [],
 });
 const currentPageFreezeList = ref(1); // 当前页
-const pageSizeFreezeList = ref(10);
+const pageSizeFreezeList = ref(9);
 const totalFreezeList = ref(5); // 当前总数
 
-// 查看房型列表
+// 查看列表
 const getList = async () => {
   if (activeName.value == 1) {
     let data = {
@@ -440,7 +467,7 @@ const getList = async () => {
     };
     let res = await axios({
       method: "get",
-      url: api.value + "/wanzai/api/smartScreenshot/queryPunishs",
+      url: api.value + "/wanzai/api/smartScreenshot/queryPageSmartScreenshot",
       headers: {
         // token: sessionStorage.getItem("token"),
         // user_head: sessionStorage.getItem("userhead"),
@@ -467,122 +494,239 @@ const getList = async () => {
         center: true,
       });
     }
+  } else if (activeName.value == 2) {
+    let data = {
+      currentPage: currentPageRecord.value,
+      pageCount: pageSizeRecord.value,
+    };
+    let res = await axios({
+      method: "get",
+      url:
+        api.value +
+        "/wanzai/api/smartScreenshotRecord/queryScreenshotRecordPage",
+      headers: {
+        // token: sessionStorage.getItem("token"),
+        // user_head: sessionStorage.getItem("userhead"),
+      },
+      params: data,
+    });
+    console.log(res, "截屏记录分页");
+    if (res.data.code == 200) {
+      recordData.list = res.data.data.list;
+      totalRecord.value = res.data.data.totalCount;
+      // ElMessage({
+      //   type: "success",
+      //   showClose: true,
+      //   message: res.data.message,
+      //   center: true,
+      // });
+    } else {
+      loading.value = false;
+      ElMessage({
+        type: "error",
+        showClose: true,
+        message: res.data.message,
+        center: true,
+      });
+    }
+  } else if (activeName.value == 3) {
+    let data = {
+      currentPage: currentPageFreezeList.value,
+      pageCount: pageSizeFreezeList.value,
+    };
+    let res = await axios({
+      method: "get",
+      url: api.value + "/wanzai/api/smartFreezeRecord/queryPageFreezeRecord",
+      headers: {
+        // token: sessionStorage.getItem("token"),
+        // user_head: sessionStorage.getItem("userhead"),
+      },
+      params: data,
+    });
+    console.log(res, "已冻结名单分页");
+    if (res.data.code == 200) {
+      freezeListData.list = res.data.data.list;
+      totalFreezeList.value = res.data.data.totalCount;
+      // ElMessage({
+      //   type: "success",
+      //   showClose: true,
+      //   message: res.data.message,
+      //   center: true,
+      // });
+    } else {
+      loading.value = false;
+      ElMessage({
+        type: "error",
+        showClose: true,
+        message: res.data.message,
+        center: true,
+      });
+    }
   }
 };
 
 // 头部切换功能
 const handleClick = (name) => {
   console.log(name);
+  getList();
 };
 // 规则页面 （----------------------------------------------------）
 const handleCurrentChangeRule = (value) => {
   currentPageRule.value = value;
 };
 //编辑按钮
-const editClick = async () => {
+const editClick = async (row) => {
   editVisible.value = true;
-  //   let data = {
-  //     linkId: row.id,
-  //   };
-  //   let res = await axios({
-  //     method: "post",
-  //     url: api.value + "/mhotel/uploadgetByLinkId.action",
-  //     headers: {},
-  //     params: data,
-  //   });
-  //   console.log(res, "编辑中查找图片");
-  //   if (res.data.code == 200) {
-  //     // res.data.data.fileInfoList.forEach((item) => {
-  //     //   item.uid = item.id;
-  //     // });
-  //     // fileList.list = res.data.data.fileInfoList;
-  //     // ruleForm.fileListJson = fileList.list;
-  //     res.data.data.forEach((item) => {
-  //       item.uid = item.id;
-  //     });
-  //     fileList.list = res.data.data;
-  //     ruleForm.fileListJson = fileList.list;
-  //     // ElMessage({
-  //     //   type: "success",
-  //     //   showClose: true,
-  //     //   message: res.data.message,
-  //     //   center: true,
-  //     // });
-  //   } else {
-  //     ElMessage({
-  //       type: "error",
-  //       showClose: true,
-  //       message: res.data.message,
-  //       center: true,
-  //     });
-  //   }
+  editRuleForm.screenshotNum = row.screenshotNum;
+  editRuleForm.trigger = row.triggers;
+  editRuleForm.id = row.id;
 };
 // 确定编辑
 const confirmEdit = (formEl) => {
   if (!formEl) return;
   formEl.validate(async (valid, fields) => {
     if (valid) {
+      let data = {
+        screenshotNum: editRuleForm.screenshotNum,
+        trigger: editRuleForm.trigger,
+        id: editRuleForm.id,
+      };
+      let res = await axios({
+        method: "post",
+        url:
+          api.value + "/wanzai/api/smartScreenshot/updateSmartScreenshotById",
+        headers: {
+          // token: sessionStorage.getItem("token"),
+          // user_head: sessionStorage.getItem("userhead"),
+        },
+        data: data,
+      });
+      console.log(res, "规则");
+      if (res.data.code == 200) {
+        editVisible.value = false;
+        getList();
+        ElMessage({
+          type: "success",
+          showClose: true,
+          message: res.data.message,
+          center: true,
+        });
+      } else {
+        ElMessage({
+          type: "error",
+          showClose: true,
+          message: res.data.message,
+          center: true,
+        });
+      }
     }
   });
 };
 const cancelEdit = () => {
   editVisible.value = false;
-  punishment.value = "1";
+  editRuleRef.value.resetFields();
+  editRuleForm.trigger = "";
+  editRuleForm.screenshotNum = "";
+  editRuleForm.id = "";
+};
+const getRules = async () => {
+  let res = await axios({
+    method: "get",
+    url: api.value + "/wanzai/api/smartScreenshot/queryPunishs",
+    headers: {
+      // token: sessionStorage.getItem("token"),
+      // user_head: sessionStorage.getItem("userhead"),
+    },
+  });
+  console.log(res, "规则列表");
+  if (res.data.code == 200) {
+    ruleList.value = res.data.data;
+  } else {
+    loading.value = false;
+    ElMessage({
+      type: "error",
+      showClose: true,
+      message: res.data.message,
+      center: true,
+    });
+  }
 };
 
 // 截屏记录页面 （----------------------------------------------------）
 const handleCurrentChangeRecord = (value) => {
   currentPageRecord.value = value;
 };
+// 改变时间
+const changeTime = (value) => {
+  console.log(value);
+  let nowTime = dayjs().format("YYYY-MM-DD");
+  if (dayjs(value).isAfter(nowTime)) {
+  } else {
+    freezeRuleForm.time = "";
+    ElMessage({
+      type: "warning",
+      showClose: true,
+      message: "截止时间应大于当前时间",
+      center: true,
+    });
+  }
+};
 //冻结按钮
-const freezeClick = async () => {
+const freezeClick = async (row) => {
   freezeVisible.value = true;
-  //   let data = {
-  //     linkId: row.id,
-  //   };
-  //   let res = await axios({
-  //     method: "post",
-  //     url: api.value + "/mhotel/uploadgetByLinkId.action",
-  //     headers: {},
-  //     params: data,
-  //   });
-  //   console.log(res, "编辑中查找图片");
-  //   if (res.data.code == 200) {
-  //     // res.data.data.fileInfoList.forEach((item) => {
-  //     //   item.uid = item.id;
-  //     // });
-  //     // fileList.list = res.data.data.fileInfoList;
-  //     // ruleForm.fileListJson = fileList.list;
-  //     res.data.data.forEach((item) => {
-  //       item.uid = item.id;
-  //     });
-  //     fileList.list = res.data.data;
-  //     ruleForm.fileListJson = fileList.list;
-  //     // ElMessage({
-  //     //   type: "success",
-  //     //   showClose: true,
-  //     //   message: res.data.message,
-  //     //   center: true,
-  //     // });
-  //   } else {
-  //     ElMessage({
-  //       type: "error",
-  //       showClose: true,
-  //       message: res.data.message,
-  //       center: true,
-  //     });
-  //   }
+  freezeRuleForm.userId = row.userId;
+  freezeRuleForm.type = "";
+  freezeRuleForm.time = "";
+  freezeRuleForm.reason = "";
 };
 // 确定冻结
 const confirmFreeze = (formEl) => {
   if (!formEl) return;
   formEl.validate(async (valid, fields) => {
     if (valid) {
+      let data = {
+        userId: freezeRuleForm.userId,
+        type: freezeRuleForm.type,
+        deadline: freezeRuleForm.time,
+        reason: freezeRuleForm.reason,
+      };
+      let res = await axios({
+        method: "post",
+        url: api.value + "/wanzai/api/smartFreezeRecord/manualFreezing",
+        headers: {
+          // token: sessionStorage.getItem("token"),
+          // user_head: sessionStorage.getItem("userhead"),
+        },
+        data: data,
+      });
+      console.log(res, "冻结");
+      if (res.data.code == 200) {
+        editVisible.value = false;
+        getList();
+        ElMessage({
+          type: "success",
+          showClose: true,
+          message: res.data.message,
+          center: true,
+        });
+      } else {
+        ElMessage({
+          type: "error",
+          showClose: true,
+          message: res.data.message,
+          center: true,
+        });
+      }
     }
   });
 };
 const cancelFreeze = () => {
   freezeVisible.value = false;
+  freezeRef.value.resetFields();
+  freezeRuleForm.userId = "";
+  freezeRuleForm.type = "";
+  freezeRuleForm.time = "";
+  freezeRuleForm.reason = "";
 };
 
 //已冻结名单（-------------------------------------------------------------------）
@@ -644,7 +788,38 @@ const importExcel = async () => {
   // }
 };
 // 解冻
-const defrost = () => {};
+const defrost = async (row) => {
+  let data = {
+    id: row.id,
+  };
+  let res = await axios({
+    method: "get",
+    url: api.value + "/wanzai/api/smartFreezeRecord/thawFreezing",
+    headers: {
+      // token: sessionStorage.getItem("token"),
+      // user_head: sessionStorage.getItem("userhead"),
+    },
+    params: data,
+  });
+  console.log(res, "解冻");
+  if (res.data.code == 200) {
+    editVisible.value = false;
+    getList();
+    ElMessage({
+      type: "success",
+      showClose: true,
+      message: res.data.message,
+      center: true,
+    });
+  } else {
+    ElMessage({
+      type: "error",
+      showClose: true,
+      message: res.data.message,
+      center: true,
+    });
+  }
+};
 
 // 表格斑马纹颜色修改
 const tableRowClassName = ({ row, rowIndex }) => {
@@ -665,6 +840,7 @@ const handleCurrentChange = (value) => {
 onBeforeMount(async () => {
   api.value = store.state.user.api;
   getList();
+  getRules();
 });
 onUnmounted(() => {
   // document.removeEventListener("keyup", Enters);
@@ -721,15 +897,20 @@ onUnmounted(() => {
             font-family: "微软雅黑";
           }
         }
+        :deep(.el-tabs__content) {
+          height: calc(100% - 70px);
+          .el-tab-pane {
+            height: 100%;
+          }
+        }
 
         .footer {
           width: 100%;
-          // height: 550px;
-          margin: 10px auto 30px;
+          height: calc(100% - 64px);
+          margin: 0 auto;
 
           .el-table--fit {
-            // height: 100%;
-
+            height: 100%;
             :deep(.el-table__header-wrapper) {
               background-color: #000;
               font-size: 14px;
@@ -791,12 +972,82 @@ onUnmounted(() => {
             // }
           }
         }
+        .freezeList {
+          .searchInp {
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 10px;
+            .search {
+              margin-left: 15px;
+            }
+          }
+          .footers {
+            width: 100%;
+            height: calc(100% - 106px);
+            margin: 0 auto;
 
-        .searchInp {
-          display: flex;
-          justify-content: space-between;
-          .search {
-            margin-left: 15px;
+            .el-table--fit {
+              height: 100%;
+              :deep(.el-table__header-wrapper) {
+                background-color: #000;
+                font-size: 14px;
+
+                tr {
+                  // color: #000;
+                }
+              }
+
+              :deep(.el-table__row) {
+                height: 50px;
+                font-size: 14px;
+                // color: #000;
+                &:hover {
+                  td {
+                    background-color: rgba(223, 236, 254, 1);
+                  }
+                }
+              }
+
+              :deep(.el-table__row):nth-child(2n) {
+                .el-table-fixed-column--right {
+                  background-color: rgba(240, 243, 247, 1);
+                }
+              }
+
+              :deep(.el-table__row td) {
+                padding: 0;
+                // border: 0;
+              }
+
+              .el-button--primary {
+                margin-left: 5px;
+              }
+
+              :deep(.el-table__body .even) {
+                background-color: #fff;
+              }
+
+              :deep(.el-table__body .odd) {
+                background-color: rgba(240, 243, 247, 1);
+              }
+
+              .defrost,
+              .del {
+                padding: 0 10px;
+                color: rgba(30, 125, 251, 1);
+                cursor: pointer;
+              }
+              .triggers {
+                color: red;
+              }
+
+              // :deep(.look):hover {
+              //   color: red;
+              // }
+              // :deep(.del):hover {
+              //   color: red;
+              // }
+            }
           }
         }
       }
@@ -890,7 +1141,7 @@ onUnmounted(() => {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    margin: 0 30px;
+    margin: 15px 30px;
 
     span {
       color: #000;

src/views/user/user.vue

@@ -105,9 +105,7 @@
             >
 
             <el-dropdown>
-              <el-button color="rgba(0, 97, 255, 1)" @click="addClick" plain
-                >批量操作</el-button
-              >
+              <el-button color="rgba(0, 97, 255, 1)" plain>批量操作</el-button>
               <template #dropdown>
                 <el-dropdown-menu>
                   <el-dropdown-item @click="addBatchClick"
@@ -163,6 +161,8 @@
           >
             <el-table-column align="center" type="selection" width="80" />
             <el-table-column align="center" prop="name" label="姓名" />
+            <el-table-column align="center" prop="identity" label="身份" />
+            <el-table-column align="center" prop="department" label="部门" />
             <el-table-column align="center" prop="cardNo" label="学号" />
             <el-table-column align="center" prop="img" label="人脸照片">
               <template #default="{ row }">
@@ -217,10 +217,11 @@
               <img src="@/assets/images/basicInfo.png" alt="" />
               <span>基本信息</span>
             </div>
-            <el-form-item label="编号 :" prop="serialNumber">
+            <el-form-item label="学号 :" prop="serialNumber">
               <el-input
+                :disabled="addMemberTitle == '编辑成员' ? true : false"
                 v-model="addMemberRuleForm.serialNumber"
-                placeholder="请输入编号"
+                placeholder="请输学号"
                 clearable
                 style="width: 500px"
               />
@@ -238,6 +239,7 @@
                 v-model="addMemberRuleForm.identity"
                 placeholder="请选择身份"
                 style="width: 500px"
+                @change="identityChange"
               >
                 <el-option
                   v-for="i in identityData"
@@ -246,6 +248,23 @@
                 />
               </el-select>
             </el-form-item>
+            <el-form-item
+              v-if="addMemberRuleForm.identity != 1"
+              label="职务 :"
+              :prop="addMemberRuleForm.identity == 3 ? 'duty' : ''"
+            >
+              <el-select
+                v-model="addMemberRuleForm.duty"
+                placeholder="请选择职务"
+                style="width: 500px"
+              >
+                <el-option
+                  v-for="i in postData"
+                  :label="i.name"
+                  :value="`${i.id}`"
+                />
+              </el-select>
+            </el-form-item>
             <el-form-item label="身份证号 :" prop="icCard">
               <el-input
                 v-model="addMemberRuleForm.icCard"
@@ -308,13 +327,17 @@
                   <template #tip>
                     <div class="el-upload__tip">
                       支持扩展名：.jpg
-                      .png，五官清晰无遮挡，名字+后缀，大小不超过50kb
+                      .png，五官清晰无遮挡，名字+后缀，大小不超过2M
                     </div>
                   </template>
                 </el-upload>
               </div>
             </el-form-item>
-            <el-form-item label="年级 :" prop="grade">
+            <el-form-item
+              v-if="addMemberRuleForm.identity != 1"
+              label="年级 :"
+              :prop="addMemberRuleForm.identity == 3 ? '' : 'grade'"
+            >
               <el-select
                 v-model="addMemberRuleForm.grade"
                 placeholder="请选择年级"
@@ -328,7 +351,11 @@
                 />
               </el-select>
             </el-form-item>
-            <el-form-item label="班级 :" prop="class">
+            <el-form-item
+              v-if="addMemberRuleForm.identity != 1"
+              label="班级 :"
+              :prop="addMemberRuleForm.identity == 3 ? '' : 'class'"
+            >
               <el-select
                 v-model="addMemberRuleForm.class"
                 placeholder="请选择班级"
@@ -341,7 +368,28 @@
                 />
               </el-select>
             </el-form-item>
-            <el-form-item label="学院 :" prop="institute">
+            <el-form-item label="时间组 :" prop="timeGroupId">
+              <el-select
+                v-model="addMemberRuleForm.timeGroupId"
+                placeholder="请选择时间"
+                style="width: 500px"
+              >
+                <el-option
+                  v-for="i in timeGroupList"
+                  :label="i.name"
+                  :value="i.id"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item
+              v-if="
+                addMemberRuleForm.identity != 2 &&
+                addMemberRuleForm.identity != 1 &&
+                addMemberRuleForm.identity != 3
+              "
+              label="学院 :"
+              prop="institute"
+            >
               <el-input
                 v-model="addMemberRuleForm.institute"
                 placeholder="请输入学院"
@@ -349,7 +397,15 @@
                 style="width: 500px"
               />
             </el-form-item>
-            <el-form-item label="专业 :" prop="specialty">
+            <el-form-item
+              v-if="
+                addMemberRuleForm.identity != 2 &&
+                addMemberRuleForm.identity != 1 &&
+                addMemberRuleForm.identity != 3
+              "
+              label="专业 :"
+              prop="specialty"
+            >
               <el-input
                 v-model="addMemberRuleForm.specialty"
                 placeholder="请输入专业"
@@ -374,7 +430,11 @@
                 style="width: 500px"
               />
             </el-form-item>
-            <el-form-item label="手机号 :" prop="phone">
+            <el-form-item
+              v-if="addMemberRuleForm.identity != 2"
+              label="手机号 :"
+              prop="phone"
+            >
               <el-input
                 v-model="addMemberRuleForm.phone"
                 placeholder="请输入手机号"
@@ -382,7 +442,14 @@
                 style="width: 500px"
               />
             </el-form-item>
-            <el-form-item label="联系人 :" prop="contact">
+            <el-form-item
+              v-if="
+                addMemberRuleForm.identity != 3 &&
+                addMemberRuleForm.identity != 2
+              "
+              label="关联人 :"
+              prop="contact"
+            >
               <el-select
                 v-model="addMemberRuleForm.contact"
                 popper-class="more-tag-data"
@@ -391,7 +458,7 @@
                 remote
                 :remote-method="conteactMethod"
                 :loading="conteactLoading"
-                placeholder="请选择联系人"
+                placeholder="请选择关联人"
                 style="width: 500px"
               >
                 <el-option
@@ -456,14 +523,7 @@
                 style="width: 500px"
               />
             </el-form-item>
-            <el-form-item label="职务 :" prop="duty">
-              <el-input
-                v-model="addMemberRuleForm.duty"
-                placeholder="请输入职务"
-                clearable
-                style="width: 500px"
-              />
-            </el-form-item>
+
             <el-form-item class="options">
               <el-button
                 color="rgba(41, 109, 227, 1)"
@@ -487,35 +547,68 @@
       </div>
       <div class="content">
         <div class="form">
-          <el-upload
-            style="width: 500px"
-            class="upload-demo"
-            drag
-            action="#"
-            multiple
-            :on-preview="handlePreview2"
-            :on-remove="handleRemove2"
-            :on-change="handleChange2"
-            :http-request="handleUpload2"
-            :before-upload="beforeAvatarUpload2"
-          >
-            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
-            <div class="el-upload__text">
-              <span style="font-size: 20px">点击上传或拖拽文件</span><br /><em
-                >务必按照我们的标准模板填写信息</em
-              >
-            </div>
-            <!-- <template #tip>
+          <div class="imgUpload">
+            <el-upload
+              style="width: 500px"
+              class="upload-demo"
+              ref="upload2"
+              drag
+              action="#"
+              :on-preview="handlePreview2"
+              :on-remove="handleRemove2"
+              :on-change="handleChange2"
+              :http-request="handleUpload2"
+              :before-upload="beforeAvatarUpload2"
+              :limit="1"
+              :on-exceed="handleExceed2"
+            >
+              <el-icon class="el-icon--upload"><upload-filled /></el-icon>
+              <div class="el-upload__text">
+                <span style="font-size: 20px">点击上传或拖拽文件</span><br /><em
+                  >请按照标准模板填写信息</em
+                >
+              </div>
+              <!-- <template #tip>
               <div class="el-upload__tip">
                 jpg/png files with a size less than 500kb
               </div>
             </template> -->
-          </el-upload>
+            </el-upload>
+            <el-upload
+              style="width: 500px"
+              class="img-upload-demo"
+              drag
+              action="#"
+              multiple
+              :on-preview="handlePreviewImgUpload"
+              :on-remove="handleRemoveImgUpload"
+              :on-change="handleChangeImgUpload"
+              :http-request="handleUploadImgUpload"
+              :before-upload="beforeAvatarUploadImgUpload"
+            >
+              <el-icon class="el-icon--upload"><upload-filled /></el-icon>
+              <div class="el-upload__text">
+                <span style="font-size: 20px">点击上传图片文件夹</span><br />
+                <em> 图片格式为jpeg/jpg/png格式且每张图片不能超过2MB </em>
+              </div>
+              <!-- <template #tip>
+              <div class="el-upload__tip">
+                jpg/png files with a size less than 500kb
+              </div>
+            </template> -->
+            </el-upload>
+          </div>
+          <!-- <input
+            ref="Folder"
+            type="file"
+            @change="uploadFloder"
+            webkitdirectory
+          /> -->
           <div class="startImport">
             <el-button
               type="primary"
               color="rgba(0, 97, 255, 1)"
-              @click="addClick"
+              @click="bulkImport"
               plain
               >开始导入</el-button
             >
@@ -538,7 +631,12 @@
                 prop="userName"
                 label="操作管理员"
               />
-              <el-table-column align="center" prop="time" label="上传时间" />
+              <el-table-column
+                width="160"
+                align="center"
+                prop="time"
+                label="上传时间"
+              />
               <el-table-column align="center" prop="status" label="导入状态" />
               <el-table-column
                 align="center"
@@ -953,7 +1051,7 @@ import { Camera } from "@element-plus/icons-vue";
 import { dayjs } from "element-plus";
 import lodash from "lodash";
 import axios from "axios";
-
+import compressImg from "@/utils/compressImg.js";
 import { useStore } from "vuex";
 const store = useStore();
 const api = ref("");
@@ -1098,13 +1196,15 @@ const addMemberShow = ref(false);
 const addMemberTitle = ref("添加成员");
 const addMemberRef = ref();
 const addMemberRuleForm = reactive({
-  serialNumber: "", // 编号
+  serialNumber: "", // 学号
   name: "", // 姓名
   identity: "", // 身份
   icCard: "", // 身份证号
   sex: "", // 性别
   department: "", // 部门
   facePhoto: "", // 人脸照片
+  facePhoto: "", // 人脸照片
+  compressFacePhoto: "", // 压缩的人脸照片
   grade: "", // 年级
   institute: "", // 学院
   specialty: "", // 专业
@@ -1112,7 +1212,8 @@ const addMemberRuleForm = reactive({
   school: "", // 校区
   dormitory: "", // 宿舍号
   phone: "", // 手机号
-  contact: "", // 联系人
+  contact: [], // 联系人
+  timeGroupId: "", // 时间组
   // 其他信息
   jobName: "", // 职称
   houseAddress: "", // 家庭地址
@@ -1125,6 +1226,8 @@ const addMemberRuleForm = reactive({
 const identityData = ref(); // 身份下拉数据
 const gradeData = ref(); // 年级下拉数据
 const classsData = ref(); // 班级下拉数据
+const postData = ref(); // 职务下拉数据
+const timeGroupList = ref(); // 时间组下拉数据
 
 const conteactListData = ref(); // 联系人下拉数据
 const conteactListCurrentPage = ref(1); // 联系人下拉当前页数
@@ -1136,7 +1239,7 @@ const conteactLoading = ref(false); // 联系人下拉框搜索时加载
 const upload = ref(); // 人脸照片
 // 表单验证
 const addMemberRules = reactive({
-  serialNumber: [{ required: true, message: "编号不能为空", trigger: "blur" }],
+  serialNumber: [{ required: true, message: "学号不能为空", trigger: "blur" }],
   name: [{ required: true, message: "姓名不能为空", trigger: "blur" }],
   identity: [{ required: true, message: "身份不能为空", trigger: "change" }],
   icCard: [{ required: true, message: "身份证号不能为空", trigger: "blur" }],
@@ -1149,8 +1252,8 @@ const addMemberRules = reactive({
   class: [{ required: true, message: "班级不能为空", trigger: "change" }],
   // school: [{ required: true, message: "校区不能为空", trigger: "blur" }],
   // dormitory: [{ required: true, message: "宿舍号不能为空", trigger: "blur" }],
-  // phone: [{ required: true, message: "手机号不能为空", trigger: "blur" }],
-  // contact: [{ required: true, message: "联系人不能为空", trigger: "blur" }],
+  phone: [{ required: true, message: "手机号不能为空", trigger: "blur" }],
+  contact: [{ required: true, message: "关联人不能为空", trigger: "blur" }],
   // jobName: [{ required: true, message: "职称不能为空", trigger: "blur" }],
   houseAddress: [
     // { required: true, message: "家庭地址不能为空", trigger: "blur" },
@@ -1162,7 +1265,8 @@ const addMemberRules = reactive({
   graduateCollege: [
     // { required: true, message: "毕业学院不能为空", trigger: "blur" },
   ],
-  // duty: [{ required: true, message: "职务不能为空", trigger: "blur" }],
+  duty: [{ required: true, message: "职务不能为空", trigger: "blur" }],
+  timeGroupId: [{ required: true, message: "时间组不能为空", trigger: "blur" }],
 });
 // 批量添加 （-----------------------------------------）
 const addBatchShow = ref(false);
@@ -1208,6 +1312,9 @@ const addBatchData = reactive({
 const addBatch_currentPage = ref(1); // 当前页
 const addBatch_pageSize = ref(7);
 const addBatch_total = ref(8); // 当前总数
+const upload2 = ref(); // ref 导入文件ref
+const upload2File = ref(); // 批量导入的文件
+const uploadImgList = ref(); // 批量导入的图片列表
 
 // 批量删除（--------------------------------------------）
 const delBatchShow = ref(false);
@@ -1435,6 +1542,7 @@ const confirmAmendBM = async (formEl) => {
 };
 const cancelAmendBM = () => {
   amendBMVisible.value = false;
+  amendBMRef.value.resetFields();
 };
 
 // 新建子部门（------------------------------------------------）
@@ -1525,7 +1633,7 @@ const del = async (row) => {
 };
 
 // 添加成员(---------------------------------------------------)
-// 获取身份数据下拉、年级数据下拉、班级数据下拉
+// 获取身份数据下拉、年级数据下拉、班级数据下拉、新增时间组
 const classDataList = async () => {
   let identity = await axios({
     method: "get",
@@ -1549,6 +1657,18 @@ const classDataList = async () => {
   });
   console.log(grade, "年级下拉数据");
   gradeData.value = grade.data.data;
+
+  let timeGroupId = await axios({
+    method: "get",
+    url: api.value + "/wanzai/api/smartUser/timeGroups",
+    headers: {
+      // token: sessionStorage.getItem("token"),
+      // user_head: sessionStorage.getItem("userhead"),
+    },
+    // params: data,
+  });
+  console.log(timeGroupId, "时间组下拉数据");
+  timeGroupList.value = timeGroupId.data.data;
 };
 // 联系人分页数据
 const studentList = async () => {
@@ -1572,6 +1692,23 @@ const studentList = async () => {
   conteactListData.value = res.data.data.list;
   conteactListTotalPage.value = res.data.data.totalPage;
 };
+// 职务分页数据
+const postList = async () => {
+  let data = {
+    identityId: addMemberRuleForm.identity,
+  };
+  let post = await axios({
+    method: "get",
+    url: api.value + "/wanzai/api/smartDuties/queryDutiesByIdentity",
+    headers: {
+      // token: sessionStorage.getItem("token"),
+      // user_head: sessionStorage.getItem("userhead"),
+    },
+    params: data,
+  });
+  console.log(post, "职务下拉数据");
+  postData.value = post.data.data;
+};
 // 班级下拉数据
 const classsList = async () => {
   let data = {
@@ -1589,6 +1726,17 @@ const classsList = async () => {
   console.log(classs, "班级下拉数据");
   classsData.value = classs.data.data;
 };
+// 改变身份加载职务数据
+const identityChange = () => {
+  addMemberRuleForm.duty = "";
+  addMemberRuleForm.contact = [];
+  addMemberRuleForm.class = "";
+  addMemberRuleForm.grade = "";
+  // addMemberRuleForm.phone = "";
+  if (addMemberRuleForm.identity) {
+    postList();
+  }
+};
 // 切换年级加载班级数据
 const classsListChange = (value) => {
   addMemberRuleForm.class = "";
@@ -1605,38 +1753,40 @@ const addStudentListScroll = () => {
     console.log(domElementNode);
 
     // 注册下拉滚动事件
-    domElementNode.addEventListener("scroll", async () => {
-      const isBottom =
-        domElementNode.scrollHeight - domElementNode.scrollTop <=
-        domElementNode.clientHeight;
-      if (isBottom) {
-        if (conteactListCurrentPage.value < conteactListTotalPage.value) {
-          conteactListCurrentPage.value++;
-          console.log(conteactListInput.value, "滚动里面");
-          let data = {
-            currentPage: conteactListCurrentPage.value,
-            pageCount: conteactListPageCount.value,
-            name: conteactListInput.value,
-          };
-          let res = await axios({
-            method: "get",
-            url: api.value + "/wanzai/api/smartScore/querySmartSecordPage",
-            headers: {
-              // token: sessionStorage.getItem("token"),
-              // user_head: sessionStorage.getItem("userhead"),
-            },
-            params: data,
-          });
-          console.log(res, "联系人数据");
-          conteactListData.value = [
-            ...conteactListData.value,
-            ...res.data.data.list,
-          ];
-        } else {
-          console.log("数据全部加载完成");
+    if (domElementNode) {
+      domElementNode.addEventListener("scroll", async () => {
+        const isBottom =
+          domElementNode.scrollHeight - domElementNode.scrollTop <=
+          domElementNode.clientHeight;
+        if (isBottom) {
+          if (conteactListCurrentPage.value < conteactListTotalPage.value) {
+            conteactListCurrentPage.value++;
+            console.log(conteactListInput.value, "滚动里面");
+            let data = {
+              currentPage: conteactListCurrentPage.value,
+              pageCount: conteactListPageCount.value,
+              name: conteactListInput.value,
+            };
+            let res = await axios({
+              method: "get",
+              url: api.value + "/wanzai/api/smartScore/querySmartSecordPage",
+              headers: {
+                // token: sessionStorage.getItem("token"),
+                // user_head: sessionStorage.getItem("userhead"),
+              },
+              params: data,
+            });
+            console.log(res, "联系人数据");
+            conteactListData.value = [
+              ...conteactListData.value,
+              ...res.data.data.list,
+            ];
+          } else {
+            console.log("数据全部加载完成");
+          }
         }
-      }
-    });
+      });
+    }
   });
 };
 // 联系人下拉框搜索时加载
@@ -1658,16 +1808,18 @@ const addMemberClick = () => {
   addMemberRuleForm.identity = "";
   addMemberRuleForm.icCard = "";
   addMemberRuleForm.sex = "";
-  addMemberRuleForm.departmentID = "";
+  addMemberRuleForm.department = "";
   addMemberRuleForm.facePhoto = "";
+  addMemberRuleForm.compressFacePhoto = "";
   addMemberRuleForm.grade = "";
   addMemberRuleForm.institute = "";
   addMemberRuleForm.specialty = "";
   addMemberRuleForm.class = "";
+  addMemberRuleForm.timeGroupId = "";
   addMemberRuleForm.school = "";
   addMemberRuleForm.dormitory = "";
   addMemberRuleForm.phone = "";
-  addMemberRuleForm.contact = "";
+  addMemberRuleForm.contact = [];
   addMemberRuleForm.jobName = "";
   addMemberRuleForm.houseAddress = "";
   addMemberRuleForm.nation = "";
@@ -1686,25 +1838,31 @@ const editClick = (row) => {
   studentList();
   addStudentListScroll();
   console.log(row, "编辑");
-  addMemberRuleForm.serialNumber = row.cardNo; // 编号
+  addMemberRuleForm.serialNumber = row.cardNo; // 学号
   addMemberRuleForm.name = row.name; // 姓名
   addMemberRuleForm.identity = row.identityId; // 身份ID
+  nextTick(() => {
+    postList();
+  });
   addMemberRuleForm.icCard = row.idCard; // 身份证
   addMemberRuleForm.sex = row.sexId; // 性别 女:0男:1
   addMemberRuleForm.department = row.departmentId; // 部门ID
   addMemberRuleForm.facePhoto = row.headImage; // 人脸照片
   addMemberRuleForm.grade = Number(row.grade); // 年级
-  classsList();
+  nextTick(() => {
+    classsList();
+  });
   addMemberRuleForm.institute = row.college; // 学院
   addMemberRuleForm.specialty = row.speciality; // 专业
   addMemberRuleForm.class = row.schoolClass; // 班级
+  addMemberRuleForm.timeGroupId = row.timeGroupId; // 时间组
   addMemberRuleForm.school = row.campus; // 校区
   addMemberRuleForm.dormitory = row.dormitoryNumber; // 宿舍号
   addMemberRuleForm.phone = row.phone; // 手机号
   if (row.affiliate) {
     addMemberRuleForm.contact = row.affiliate.split(","); // 联系人
   } else {
-    addMemberRuleForm.contact = "";
+    addMemberRuleForm.contact = [];
   }
   addMemberRuleForm.jobName = row.title; // 职称
   addMemberRuleForm.houseAddress = row.address; // 家庭住址
@@ -1720,7 +1878,7 @@ const confirmAddMember = async (formEl) => {
   await formEl.validate(async (valid, fields) => {
     if (valid) {
       let data = {
-        cardNo: addMemberRuleForm.serialNumber, // 编号
+        cardNo: addMemberRuleForm.serialNumber, // 学号
         name: addMemberRuleForm.name, // 姓名
         identityId: addMemberRuleForm.identity, // 身份ID
         idCard: addMemberRuleForm.icCard, // 身份证
@@ -1731,6 +1889,7 @@ const confirmAddMember = async (formEl) => {
         college: addMemberRuleForm.institute, // 学院
         speciality: addMemberRuleForm.specialty, // 专业
         schoolClass: addMemberRuleForm.class, // 班级
+        timeGroupId: addMemberRuleForm.timeGroupId, // 时间组
         campus: addMemberRuleForm.school, // 校区
         dormitoryNumber: addMemberRuleForm.dormitory, // 宿舍号
         phone: addMemberRuleForm.phone, // 手机号
@@ -1825,7 +1984,7 @@ const handlePreview = (file) => {
 const handleChange = async (file, fileLists) => {
   console.log(file, "1111");
   if (file.raw.type == "image/jpeg" || file.raw.type == "image/png") {
-    if (file.size / 1024 <= 50) {
+    if (file.size / 1024 / 1024 <= 2) {
       const cos = new COS({
         SecretId: "AKIDCPVZdcWIxgHpy5FYxVyPiqkZGrhdXUBg",
         SecretKey: "NkyCN3cz97qKaeXLvHOGxOcdS8f184pL",
@@ -1835,6 +1994,33 @@ const handleChange = async (file, fileLists) => {
       });
       const files = file.raw;
       console.log(files);
+      // 压缩图片
+      // console.log(compressImg);
+
+      var compressImgFile = await compressImg.compressImg(files);
+      // console.log(compressImgFile, "压缩图片");
+      const compressKey = "Compress" + file.raw.name; // 设置上传到 COS 后的文件名
+      cos.putObject(
+        {
+          Bucket: "wanzai-1306339220",
+          Region: "ap-shanghai",
+          Key: compressKey,
+          Body: compressImgFile,
+          onProgress: function (progressData) {
+            console.log(JSON.stringify(progressData));
+          },
+        },
+        function (err, data) {
+          if (err) {
+            console.error(err);
+          } else {
+            console.log(data, "压缩图片获取成功");
+            addMemberRuleForm.facePhoto = "https://" + data.Location;
+            // 成功
+          }
+        }
+      );
+      // 上传cos桶
       const key = file.raw.name; // 设置上传到 COS 后的文件名
       cos.putObject(
         {
@@ -1850,14 +2036,14 @@ const handleChange = async (file, fileLists) => {
           if (err) {
             console.error(err);
           } else {
-            console.log(data, "获取成功");
-            addMemberRuleForm.facePhoto = "https://" + data.Location;
+            console.log(data, "图片获取成功");
+            addMemberRuleForm.compressFacePhoto = "https://" + data.Location;
             // 成功
           }
         }
       );
     } else {
-      ElMessage.error("图片的大小不能超过50kb!");
+      ElMessage.error("图片的大小不能超过2M!");
     }
   } else {
     ElMessage.error("图片格式必须为JPG/PNG格式!");
@@ -1888,11 +2074,21 @@ const handleExceed = (files) => {
 const addBatchClick = () => {
   addBatchShow.value = true;
   homeShow.value = false;
+  nextTick(() => {
+    const Ele = document.querySelector(".img-upload-demo .el-upload__input");
+    Ele["webkitdirectory"] = true;
+  });
 };
 const addBatchConcel = () => {
   homeShow.value = true;
   addBatchShow.value = false;
 };
+// 批量导入按钮
+const bulkImport = () => {
+  uploadImgList.value = uploadImgList.value.slice(1);
+  console.log(uploadImgList.value, "拼接好的图片地址");
+  console.log(upload2File.value, "导入的文件");
+};
 // 批量导入模板下载
 const downLoadtempAdd = async () => {
   let res = await axios({
@@ -1940,6 +2136,7 @@ const handleRemove2 = (uploadFile, uploadFiles) => {
   //   return item.uid != uploadFile.uid;
   // });
   // ruleForm.fileListJson = fileList.list;
+  upload2File.value = "";
 };
 // 点击图片的查看按钮
 const handlePreview2 = (file) => {
@@ -1957,7 +2154,7 @@ const beforeAvatarUpload2 = (rawFile) => {
     ElMessage.error("文件格式必须为xlsx格式!");
     return false;
   } else if (rawFile.size / 1024 / 1024 > 100) {
-    ElMessage.error("图片的大小不能超过100MB!");
+    ElMessage.error("文件的大小不能超过100MB!");
     return false;
   }
   return true;
@@ -1966,6 +2163,7 @@ const beforeAvatarUpload2 = (rawFile) => {
 const handleChange2 = async (file, fileLists) => {
   console.log(file, "1111");
   // fileList.list.push(file);
+  upload2File.value = file.raw;
 };
 // 可以获取图片参数
 const handleUpload2 = async (file) => {
@@ -1995,6 +2193,82 @@ const handleUpload2 = async (file) => {
   //   ruleForm.fileListJson = fileList.list;
   // }
 };
+// 上传文件时覆盖上一个文件
+const handleExceed2 = (files) => {
+  upload2.value.clearFiles();
+  const file = files[0];
+  file.uid = genFileId();
+  upload2.value.handleStart(file);
+};
+
+// 移出照片
+const handleRemoveImgUpload = (uploadFile, uploadFiles) => {
+  // console.log(uploadFile.uid, uploadFiles);
+  // fileList.list = fileList.list.filter((item) => {
+  //   return item.uid != uploadFile.uid;
+  // });
+  // ruleForm.fileListJson = fileList.list;
+};
+// 点击图片的查看按钮
+const handlePreviewImgUpload = (file) => {
+  // imgUrl.value = file.url;
+  // imgVisible.value = true;
+  console.log(file);
+};
+// 限制上传图片的大小
+const beforeAvatarUploadImgUpload = (rawFile) => {
+  console.log(rawFile.type, "文件类型");
+  if (rawFile.type !== "image/jpeg" && rawFile.type !== "image/png") {
+    ElMessage.error("文件格式必须为jpg或png格式!");
+    return false;
+  } else if (rawFile.size / 1024 / 1024 > 2) {
+    ElMessage.error("图片的大小不能超过2MB!");
+    return false;
+  }
+  return true;
+};
+// 添加照片时往fileList列表中添加图片信息
+const handleChangeImgUpload = async (file, fileLists) => {
+  console.log(file, "1111");
+  // fileList.list.push(file);
+  uploadImgList.value = "";
+};
+// 可以获取图片参数
+const handleUploadImgUpload = async (file) => {
+  console.log(file, "22222222");
+  const cos = new COS({
+    SecretId: "AKIDCPVZdcWIxgHpy5FYxVyPiqkZGrhdXUBg",
+    SecretKey: "NkyCN3cz97qKaeXLvHOGxOcdS8f184pL",
+    SecurityToken: "1306339220",
+    Bucket: "wanzai-1306339220",
+    Region: "ap-shanghai",
+  });
+  const files = file.file;
+  console.log(files);
+  const compressKey = file.file.name; // 设置上传到 COS 后的文件名
+  cos.putObject(
+    {
+      Bucket: "wanzai-1306339220",
+      Region: "ap-shanghai",
+      Key: compressKey,
+      Body: files,
+      onProgress: function (progressData) {
+        console.log(JSON.stringify(progressData));
+      },
+    },
+    function (err, data) {
+      if (err) {
+        console.error(err);
+      } else {
+        console.log(data, "压缩图片获取成功");
+        uploadImgList.value =
+          uploadImgList.value + "," + "https://" + data.Location;
+        // 成功
+      }
+    }
+  );
+};
+
 // 分页
 const handleAddBatch = (value) => {
   // console.log(value);
@@ -2182,6 +2456,7 @@ const confirmMoveMember = async () => {
   console.log(res, "部门树形数据");
   if (res.data.code == 200) {
     moveMemberVisible.value = false;
+    getList();
     ElMessage({
       type: "success",
       showClose: true,
@@ -2319,7 +2594,7 @@ const importExcel = async () => {
     ElMessage({
       type: "success",
       showClose: true,
-      message: res.data.message,
+      message: "导出成功",
       center: true,
     });
   } else {
@@ -2351,6 +2626,7 @@ onBeforeMount(async () => {
   api.value = store.state.user.api;
   getDepartment(); // 左边部门树形结构
   classDataList(); // 添加成员中 获取身份数据下拉、年级数据下拉、班级数据下拉
+  postList(); // 职务数据
 });
 onUnmounted(() => {
   // document.removeEventListener("keyup", Enters);
@@ -2359,7 +2635,7 @@ onUnmounted(() => {
 
 <style scoped lang="scss">
 .content-box {
-  min-width: 800px;
+  min-width: 1200px;
   width: calc(100vw - 260px);
   height: calc(100vh - 105px);
   margin: 20px auto;
@@ -2611,6 +2887,7 @@ onUnmounted(() => {
   .addMember {
     flex: 1;
     height: 100%;
+    min-width: 900px;
     // margin-right: 20px;
     border-radius: 8px;
     box-shadow: 0px 3px 10px rgba(0, 97, 255, 0.2);
@@ -2658,9 +2935,8 @@ onUnmounted(() => {
       height: calc(100% - 61px);
       // margin: 10px 0 0 0;
       .form {
-        height: 98%;
+        height: 100%;
         overflow: auto;
-        margin-top: 5px;
         .el-form-item {
           .facePhoto {
             img {
@@ -2672,6 +2948,18 @@ onUnmounted(() => {
             display: none;
           }
         }
+        .imgUpload {
+          margin-top: 5px;
+          display: flex;
+          .upload-demo {
+            margin-right: 10px;
+          }
+          .img-upload-demo {
+            :deep(.el-upload-list) {
+              display: none;
+            }
+          }
+        }
         .startImport {
           .el-button {
             width: 500px;