diff --git a/public/favicon.ico b/public/favicon.ico
index 121ffe2..c1d482c 100644
Binary files a/public/favicon.ico and b/public/favicon.ico differ
diff --git a/src/api/report/attReport.js b/src/api/report/attReport.js
index 767199d..704dd23 100644
--- a/src/api/report/attReport.js
+++ b/src/api/report/attReport.js
@@ -112,6 +112,15 @@ export function exportOutCountList(query) {
   })
 }
 
+// 导出年报表记录
+export function exportYearDataListAPI(query) {
+  return request({
+    url: '/system/attDetails/exportYearFullAtt',
+    method: 'get',
+    responseType: 'blob',
+    params: query
+  })
+}
 /*数据同步1*/
 export function getAttTempData(query) {
   return request({
diff --git a/src/api/report/attendanceRate.js b/src/api/report/attendanceRate.js
new file mode 100644
index 0000000..f2b5f5d
--- /dev/null
+++ b/src/api/report/attendanceRate.js
@@ -0,0 +1,11 @@
+import request from '@/utils/request'
+
+
+// 获取考勤率列表
+export function getAttendanceRateList(query) {
+  return request({
+    url: '/system/attDetails/getAttendanceRateList',
+    method: 'get',
+    params: query
+  })
+}
diff --git a/src/api/report/monthReport.js b/src/api/report/monthReport.js
index f8b79f9..4033939 100644
--- a/src/api/report/monthReport.js
+++ b/src/api/report/monthReport.js
@@ -39,3 +39,12 @@ export function getRequiredDaysList(query) {
     params: query
   })
 }
+
+// 获取年数据
+export function getYearDataListAPI(query) {
+  return request({
+    url: '/system/attDetails/getWorkerYearFullAttList',
+    method: 'get',
+    params: query
+  })
+}
diff --git a/src/assets/logo/logo.png b/src/assets/logo/logo.png
index 121ffe2..c1d482c 100644
Binary files a/src/assets/logo/logo.png and b/src/assets/logo/logo.png differ
diff --git a/src/views/login.vue b/src/views/login.vue
index 7e37edf..0f646b7 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -1,127 +1,287 @@
 <template>
   <div class="login">
-    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
-      <h3 class="title">考勤后台管理系统</h3>
-      <el-form-item prop="username">
-        <el-input
-          v-model="loginForm.username"
-          type="text"
-          auto-complete="off"
-          placeholder="账号"
-        >
-          <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
-        </el-input>
-      </el-form-item>
-      <el-form-item prop="password">
-        <el-input
-          v-model="loginForm.password"
-          type="password"
-          auto-complete="off"
-          placeholder="密码"
-          show-password
-          @keyup.enter.native="handleLogin"
-        >
-          <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
-        </el-input>
-      </el-form-item>
-      <el-form-item prop="code" v-if="captchaEnabled">
-        <el-input
-          v-model="loginForm.code"
-          auto-complete="off"
-          placeholder="验证码"
-          style="width: 63%"
-          @keyup.enter.native="handleLogin"
-        >
-          <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
-        </el-input>
-        <div class="login-code">
-          <img :src="codeUrl" @click="getCode" class="login-code-img"/>
-        </div>
-      </el-form-item>
-      <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 0px 0px;">记住密码</el-checkbox>
+    <!-- 动态背景 -->
+    <div class="animated-bg">
+      <div class="particles">
+        <div
+          class="particle"
+          v-for="n in 50"
+          :key="n"
+          :style="getParticleStyle(n)"
+        ></div>
+      </div>
+      <div class="grid-overlay"></div>
+      <div class="gradient-orb orb-1"></div>
+      <div class="gradient-orb orb-2"></div>
+      <div class="gradient-orb orb-3"></div>
+    </div>
 
-      <el-form-item>
-        <el-checkbox v-model="loginForm.userAgreement" style="margin:0px  0px 0px 0px;">我已阅读并同意
-        </el-checkbox>
-        <div @click="goUserAgreement()" style="color: #02a7f0; cursor: pointer;margin:-36px 0px 0px 150px;">
-          《用户协议》
+    <!-- 登录表单卡片 -->
+    <div class="login-container">
+      <el-form
+        ref="loginForm"
+        :model="loginForm"
+        :rules="loginRules"
+        class="login-form"
+      >
+        <div class="form-header">
+          <div class="logo-wrapper">
+            <div class="logo-glow"></div>
+          </div>
+          <h3 class="title">
+            <span class="title-text">考勤后台管理系统</span>
+            <span class="title-line"></span>
+          </h3>
+          <p class="subtitle">Attendance Management System</p>
         </div>
-      </el-form-item>
 
-      <el-form-item style="width:100%;">
-        <el-button
-          :loading="loading"
-          size="medium"
-          type="primary"
-          style="width:100%;"
-          @click.native.prevent="handleLogin"
-        >
-          <span v-if="!loading">登 录</span>
-          <span v-else>登 录 中...</span>
-        </el-button>
-        <div style="float: right;" v-if="register">
-          <router-link class="link-type" :to="'/register'">立即注册</router-link>
+        <el-form-item prop="username">
+          <el-input
+            v-model="loginForm.username"
+            type="text"
+            auto-complete="off"
+            placeholder="请输入账号"
+            class="modern-input"
+          >
+            <svg-icon
+              slot="prefix"
+              icon-class="user"
+              class="el-input__icon input-icon"
+            />
+          </el-input>
+        </el-form-item>
+
+        <el-form-item prop="password">
+          <el-input
+            v-model="loginForm.password"
+            type="password"
+            auto-complete="off"
+            placeholder="请输入密码"
+            show-password
+            class="modern-input"
+            @keyup.enter.native="handleLogin"
+          >
+            <svg-icon
+              slot="prefix"
+              icon-class="password"
+              class="el-input__icon input-icon"
+            />
+          </el-input>
+        </el-form-item>
+
+        <el-form-item prop="code" v-if="captchaEnabled">
+          <div class="code-wrapper">
+            <el-input
+              v-model="loginForm.code"
+              auto-complete="off"
+              placeholder="验证码"
+              class="modern-input code-input"
+              @keyup.enter.native="handleLogin"
+            >
+              <svg-icon
+                slot="prefix"
+                icon-class="validCode"
+                class="el-input__icon input-icon"
+              />
+            </el-input>
+            <div class="login-code">
+              <img :src="codeUrl" @click="getCode" class="login-code-img" />
+            </div>
+          </div>
+        </el-form-item>
+
+        <div class="form-options">
+          <el-checkbox v-model="loginForm.rememberMe" class="remember-checkbox">
+            记住密码
+          </el-checkbox>
         </div>
-      </el-form-item>
-    </el-form>
 
-    <el-dialog :title="title" :visible.sync="opens" width="1000px" append-to-body>
+        <el-form-item class="agreement-item">
+          <el-checkbox
+            v-model="loginForm.userAgreement"
+            class="agreement-checkbox"
+          >
+            我已阅读并同意
+          </el-checkbox>
+          <span @click="goUserAgreement()" class="agreement-link"
+            >《用户协议》</span
+          >
+        </el-form-item>
+
+        <el-form-item style="width: 100%">
+          <el-button
+            :loading="loading"
+            size="medium"
+            type="primary"
+            class="login-button"
+            @click.native.prevent="handleLogin"
+          >
+            <span v-if="!loading">登 录</span>
+            <span v-else>登 录 中...</span>
+          </el-button>
+          <div class="register-link" v-if="register">
+            <router-link class="link-type" :to="'/register'"
+              >立即注册</router-link
+            >
+          </div>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <el-dialog
+      :title="title"
+      :visible.sync="opens"
+      width="1000px"
+      append-to-body
+    >
       <div id="policy">
-<!--        <header>服务条款协议</header>-->
+        <!--        <header>服务条款协议</header>-->
         <section>
           <p>一、引言</p>
-          <p>    鉴于个人信息和隐私保护的重要性，以及我们对您个人信息和隐私的尊重，我们制定了本《个人信息和隐私保护协议》（以下简称“本协议”）。本协议旨在明确我们对您个人信息和隐私的收集、使用、存储、传输和删除等方面的规定，以确保您的个人信息和隐私得到妥善保护。</p> <p>⽤户不得在本站论坛发布含有下列内容之⼀的信息:</p>
+          <p>
+            鉴于个人信息和隐私保护的重要性，以及我们对您个人信息和隐私的尊重，我们制定了本《个人信息和隐私保护协议》（以下简称“本协议”）。本协议旨在明确我们对您个人信息和隐私的收集、使用、存储、传输和删除等方面的规定，以确保您的个人信息和隐私得到妥善保护。
+          </p>
+          <p>⽤户不得在本站论坛发布含有下列内容之⼀的信息:</p>
           <p>二、协议适用说明</p>
-          <p>1. 个人信息：指能够单独或与其他信息结合后识别特定自然人身份的信息，包括但不限于姓名、性别、出生日期、身份证号、联系方式、家庭住址等。</p>
-          <p>2. 隐私安全：指个人在特定社会关系中，享有私人生活，不愿公开的个人信息和私人事务。</p>
-          <p>3. 适用范围：本协议适用于我们对您个人信息和隐私的保护，包括我们收集、使用、存储、传输和删除您的个人信息和隐私。</p>
+          <p>
+            1.
+            个人信息：指能够单独或与其他信息结合后识别特定自然人身份的信息，包括但不限于姓名、性别、出生日期、身份证号、联系方式、家庭住址等。
+          </p>
+          <p>
+            2.
+            隐私安全：指个人在特定社会关系中，享有私人生活，不愿公开的个人信息和私人事务。
+          </p>
+          <p>
+            3.
+            适用范围：本协议适用于我们对您个人信息和隐私的保护，包括我们收集、使用、存储、传输和删除您的个人信息和隐私。
+          </p>
           <p>三、信息收集</p>
-          <p>1. 合法性原则：我们将遵循合法性原则，仅在您同意或法律允许的情况下收集您的个人信息和隐私。</p>
-          <p>2. 必要性原则：我们将遵循必要性原则，仅收集与实现我们的服务目的直接相关的信息。</p>
-          <p>3. 透明性原则：我们将遵循透明性原则，向您公开我们收集的个人信息和隐私的种类、目的和使用方式。</p>
+          <p>
+            1.
+            合法性原则：我们将遵循合法性原则，仅在您同意或法律允许的情况下收集您的个人信息和隐私。
+          </p>
+          <p>
+            2.
+            必要性原则：我们将遵循必要性原则，仅收集与实现我们的服务目的直接相关的信息。
+          </p>
+          <p>
+            3.
+            透明性原则：我们将遵循透明性原则，向您公开我们收集的个人信息和隐私的种类、目的和使用方式。
+          </p>
           <p>四、信息使用</p>
-          <p> 1. 合法使用：我们将仅在法律允许或您同意的情况下使用您的个人信息和隐私。
-          <p>2. 正当使用：我们将遵循正当使用原则，确保使用您的个人信息和隐私是为了实现我们的服务目的，并且不会损害您的合法权益。</p>
-          <p>3. 透明使用：我们将遵循透明使用原则，向您公开我们使用您的个人信息和隐私的具体情况</p>
+          <p>
+            1.
+            合法使用：我们将仅在法律允许或您同意的情况下使用您的个人信息和隐私。
+          </p>
+          <p>
+            2.
+            正当使用：我们将遵循正当使用原则，确保使用您的个人信息和隐私是为了实现我们的服务目的，并且不会损害您的合法权益。
+          </p>
+          <p>
+            3.
+            透明使用：我们将遵循透明使用原则，向您公开我们使用您的个人信息和隐私的具体情况
+          </p>
           <p>五、信息存储与传输</p>
-          <p>1. 安全存储：我们将采取必要的技术和组织措施，确保您的个人信息和隐私得到安全存储。</p>
-          <p>2. 加密传输：我们将对您的个人信息和隐私进行加密传输，以确保数据传输过程中的安全性。</p>
-          <p>3. 访问控制：我们将严格控制对您的个人信息和隐私的访问权限，确保只有授权人员才能访问相关信息。</p>
-          <p>4.定期审计：为您提供安全保障 为提高您使用本系统的安全性，保护您或其他用户或公众的人身财产安全免遭侵害，个人信息处理者应当定期对其处理个人信息遵守法律、行政法规的情况进行合规审计。</p>
+          <p>
+            1.
+            安全存储：我们将采取必要的技术和组织措施，确保您的个人信息和隐私得到安全存储。
+          </p>
+          <p>
+            2.
+            加密传输：我们将对您的个人信息和隐私进行加密传输，以确保数据传输过程中的安全性。
+          </p>
+          <p>
+            3.
+            访问控制：我们将严格控制对您的个人信息和隐私的访问权限，确保只有授权人员才能访问相关信息。
+          </p>
+          <p>
+            4.定期审计：为您提供安全保障
+            为提高您使用本系统的安全性，保护您或其他用户或公众的人身财产安全免遭侵害，个人信息处理者应当定期对其处理个人信息遵守法律、行政法规的情况进行合规审计。
+          </p>
           <p>六、信息删除与注销</p>
-          <p> 1. 删除原则：我们将遵循删除原则，确保在达到收集目的后或您要求删除时，及时删除您的个人信息和隐私。</p>
-          <p> 2. 注销权利：您有权要求我们注销您的个人信息和隐私，我们将在收到您的请求后尽快处理。</p>
-          <p> 3.在不幸发生个人信息安全事件后，我们将按照法律法规的要求向您告知：安全事件的基本情况和可能的影响、我们已采取或将要采取的处置措施、您可自主防范和降低风险的建议、对您的补救措施等。事件相关情况我们将以邮件、信函、电话、推送通知等方式告知您，难以逐一告知个人信息主体时，我们会采取合理、有效的方式发布公告</p>
+          <p>
+            1.
+            删除原则：我们将遵循删除原则，确保在达到收集目的后或您要求删除时，及时删除您的个人信息和隐私。
+          </p>
+          <p>
+            2.
+            注销权利：您有权要求我们注销您的个人信息和隐私，我们将在收到您的请求后尽快处理。
+          </p>
+          <p>
+            3.在不幸发生个人信息安全事件后，我们将按照法律法规的要求向您告知：安全事件的基本情况和可能的影响、我们已采取或将要采取的处置措施、您可自主防范和降低风险的建议、对您的补救措施等。事件相关情况我们将以邮件、信函、电话、推送通知等方式告知您，难以逐一告知个人信息主体时，我们会采取合理、有效的方式发布公告
+          </p>
           <p>七、违约责任</p>
           <p>1. 违反本协议规定的，我们将依法承担相应的法律责任。</p>
-          <p> 2. 您违反本协议规定的，我们将有权依法追究您的法律责任。</p>
+          <p>2. 您违反本协议规定的，我们将有权依法追究您的法律责任。</p>
           <p>八、如何保护你的信息</p>
-          <p>（一）我们已采取符合业界标准、合理可行的安全防护措施保护您的信息，防止个人信息遭到未经授权访问、公开披露、使用、修改、损坏或丢失。例如，在您的浏览器与服务器之间交换数据时受 SSL协议加密保护；我们同时对南京景桥软件有限公司网站提供HTTPS协议安全浏览方式；我们会使用加密技术提高个人信息的安全性；我们会使用受信赖的保护机制防止个人信息遭到恶意攻击；我们会部署访问控制机制，尽力确保只有授权人员才可访问个人信息；以及我们会举办安全和隐私保护培训课程，加强员工对于保护个人信息重要性的认识。</p>
-          <p>（二）我们有行业先进的以数据为核心，围绕数据生命周期进行的数据安全管理体系，从组织建设、制度设计、人员管理、产品技术等方面多维度提升整个系统的安全性。在信息使用时，例如信息展示、信息关联计算，我们会采用多种数据脱敏技术增强信息在使用中安全性。采用严格的数据访问权限控制和多重身份认证技术保护信息，避免数据被违规使用。</p>
-          <p>（三）我们会采取合理可行的措施，尽力避免收集无关的个人信息。我们只会在达成本政策所述目的所需的期限内保留您的个人信息（除非法律有强制的存留要求）。</p>
-          <p>（四）互联网并非绝对安全的环境，使用服务时，我们强烈建议通过安全方式、使用复杂密码，协助我们保证您的账号安全。如发现自己的个人信息泄密，尤其是用户自己的账户或密码发生泄露，请立即根据本隐私政策文末中提供的联系方式联络我们，以便我们采取相应措施来保护用户个人信息安全。</p>
-          <p>（五）在不幸发生个人信息安全事件后，我们将按照法律法规的要求向您告知：安全事件的基本情况和可能的影响、我们已采取或将要采取的处置措施、您可自主防范和降低风险的建议、对您的补救措施等。事件相关情况我们将以邮件、信函、电话、推送通知等方式告知您，难以逐一告知个人信息主体时，我们会采取合理、有效的方式发布公告。</p>
+          <p>
+            （一）我们已采取符合业界标准、合理可行的安全防护措施保护您的信息，防止个人信息遭到未经授权访问、公开披露、使用、修改、损坏或丢失。例如，在您的浏览器与服务器之间交换数据时受
+            SSL协议加密保护；我们同时对南京景桥软件有限公司网站提供HTTPS协议安全浏览方式；我们会使用加密技术提高个人信息的安全性；我们会使用受信赖的保护机制防止个人信息遭到恶意攻击；我们会部署访问控制机制，尽力确保只有授权人员才可访问个人信息；以及我们会举办安全和隐私保护培训课程，加强员工对于保护个人信息重要性的认识。
+          </p>
+          <p>
+            （二）我们有行业先进的以数据为核心，围绕数据生命周期进行的数据安全管理体系，从组织建设、制度设计、人员管理、产品技术等方面多维度提升整个系统的安全性。在信息使用时，例如信息展示、信息关联计算，我们会采用多种数据脱敏技术增强信息在使用中安全性。采用严格的数据访问权限控制和多重身份认证技术保护信息，避免数据被违规使用。
+          </p>
+          <p>
+            （三）我们会采取合理可行的措施，尽力避免收集无关的个人信息。我们只会在达成本政策所述目的所需的期限内保留您的个人信息（除非法律有强制的存留要求）。
+          </p>
+          <p>
+            （四）互联网并非绝对安全的环境，使用服务时，我们强烈建议通过安全方式、使用复杂密码，协助我们保证您的账号安全。如发现自己的个人信息泄密，尤其是用户自己的账户或密码发生泄露，请立即根据本隐私政策文末中提供的联系方式联络我们，以便我们采取相应措施来保护用户个人信息安全。
+          </p>
+          <p>
+            （五）在不幸发生个人信息安全事件后，我们将按照法律法规的要求向您告知：安全事件的基本情况和可能的影响、我们已采取或将要采取的处置措施、您可自主防范和降低风险的建议、对您的补救措施等。事件相关情况我们将以邮件、信函、电话、推送通知等方式告知您，难以逐一告知个人信息主体时，我们会采取合理、有效的方式发布公告。
+          </p>
           <p>九、我们如何更新本政策</p>
-          <p>1. 为给您提供更好的服务，本应用的产品与服务将不时更新与变化，我们会适时对本协议进行修订，这些修订构成本协议的一部分。但是未经您明确同意，我们不会削减您按照本协议所应享有的权利。</p>
-          <p>本协议更新后，我们会在本应用中发出更新版本，并在本应用中以弹窗的方式提醒您，以便您及时了解本协议的最新版本。您也可以在皖事通APP通过“我的-设置-关于皖事通-隐私协议”中查看本协议。如果您不同意本协议，或对本协议修改、更新的内容有异议，您可以选择停止使用本应用。但请您知悉，您账号注销之前、停止使用本服务之前的行为和活动仍受本政策的约束。</p>
-          <p>3. 对于重大变更，我们还会提供更为显著的通知（我们会通过包括但不限于邮件、短信或在打开本软件做特别提示等方式，说明本政策的具体变更内容）。本政策所指的重大变更包括但不限于：</p>
-          <p>（1）我们的服务模式发生重大变化。如处理个人信息的目的、处理的个人信息的类型、个人信息的使用方式等；</p>
+          <p>
+            1.
+            为给您提供更好的服务，本应用的产品与服务将不时更新与变化，我们会适时对本协议进行修订，这些修订构成本协议的一部分。但是未经您明确同意，我们不会削减您按照本协议所应享有的权利。
+          </p>
+          <p>
+            本协议更新后，我们会在本应用中发出更新版本，并在本应用中以弹窗的方式提醒您，以便您及时了解本协议的最新版本。您也可以在皖事通APP通过“我的-设置-关于皖事通-隐私协议”中查看本协议。如果您不同意本协议，或对本协议修改、更新的内容有异议，您可以选择停止使用本应用。但请您知悉，您账号注销之前、停止使用本服务之前的行为和活动仍受本政策的约束。
+          </p>
+          <p>
+            3.
+            对于重大变更，我们还会提供更为显著的通知（我们会通过包括但不限于邮件、短信或在打开本软件做特别提示等方式，说明本政策的具体变更内容）。本政策所指的重大变更包括但不限于：
+          </p>
+          <p>
+            （1）我们的服务模式发生重大变化。如处理个人信息的目的、处理的个人信息的类型、个人信息的使用方式等；
+          </p>
           <p>（2）个人信息共享、转让或公开披露的主要对象发生变化；</p>
           <p>（3）您参与个人信息处理方面的权利及其行使方式发生重大变化；</p>
-          <p>（4）我们负责处理个人信息安全的责任部门、联络方式及投诉渠道发生变化时；</p>
+          <p>
+            （4）我们负责处理个人信息安全的责任部门、联络方式及投诉渠道发生变化时；
+          </p>
           <p>（5）个人信息安全影响评估报告表明存在高风险时；</p>
-          <p>（6）伴随政策或法律发布实施，为响应国家政策或者法律规范，做出变更。</p>
+          <p>
+            （6）伴随政策或法律发布实施，为响应国家政策或者法律规范，做出变更。
+          </p>
           <p>十、我们如何委托处理、共享、转让、公开披露您的个人信息</p>
           <p>1.委托处理</p>
-          <p> 为了向您提供更完善、更优质的产品和服务，我们可能会委托合作方处理您的某些个人信息。对我们委托处理您个人信息的公司、组织和个人，我们会与其签署严格的保密协定，明确数据处理事项、处理期限、处理性质、处理目的以及双方责任等，要求合作方仅按照我们的要求、本政策的规定以及其他任何相关的保密和安全措施来处理您的个人信息。如果您拒绝我们的供应商在提供服务时收集为提供服务所必需的个人信息，将可能导致您在使用本应用的过程中无法享受该供应商提供的服务。</p>
-          <p> 2.共享</p>
-          <p>在本应用进行用户注册，您将同步注册成为安徽省统一身份认证平台的注册用户，该用户的账号注册信息会在本应用、安徽政务服务网等政务服务系统间共享。除此以外，我们不会与本产品服务提供者以外的公司、组织和个人共享您的个人信息，但以下情况除外：</p>
-          <p>（1）在获取明确同意的情况下共享：获得您的明确同意后，我们会与其他方共享您的个人信息。</p>
-          <p>（2）在法定情形下的共享：我们可能会根据法律法规规定、诉讼争议解决需要，或按行政、司法机关依法提出的要求，对外共享您的个人信息。</p>
+          <p>
+            为了向您提供更完善、更优质的产品和服务，我们可能会委托合作方处理您的某些个人信息。对我们委托处理您个人信息的公司、组织和个人，我们会与其签署严格的保密协定，明确数据处理事项、处理期限、处理性质、处理目的以及双方责任等，要求合作方仅按照我们的要求、本政策的规定以及其他任何相关的保密和安全措施来处理您的个人信息。如果您拒绝我们的供应商在提供服务时收集为提供服务所必需的个人信息，将可能导致您在使用本应用的过程中无法享受该供应商提供的服务。
+          </p>
+          <p>2.共享</p>
+          <p>
+            在本应用进行用户注册，您将同步注册成为安徽省统一身份认证平台的注册用户，该用户的账号注册信息会在本应用、安徽政务服务网等政务服务系统间共享。除此以外，我们不会与本产品服务提供者以外的公司、组织和个人共享您的个人信息，但以下情况除外：
+          </p>
+          <p>
+            （1）在获取明确同意的情况下共享：获得您的明确同意后，我们会与其他方共享您的个人信息。
+          </p>
+          <p>
+            （2）在法定情形下的共享：我们可能会根据法律法规规定、诉讼争议解决需要，或按行政、司法机关依法提出的要求，对外共享您的个人信息。
+          </p>
           <p>十一、其他条款</p>
-          <p> 1. 本协议自双方签字或盖章之日起生效，有效期为【】年。协议期满后，如双方继续合作，可续签本协议。</p>
-          <p>2. 本协议一式两份，双方各执一份。本协议内容如有任何修改或补充，须经双方协商一致后，以书面形式进行变更。</p>
-          <p> 3. 本协议未尽事宜，由双方另行协商确定。如有任何疑问或需要进一步了解，请随时联系我们。我们将竭诚为您解答和处理。</p>
+          <p>
+            1.
+            本协议自双方签字或盖章之日起生效，有效期为【】年。协议期满后，如双方继续合作，可续签本协议。
+          </p>
+          <p>
+            2.
+            本协议一式两份，双方各执一份。本协议内容如有任何修改或补充，须经双方协商一致后，以书面形式进行变更。
+          </p>
+          <p>
+            3.
+            本协议未尽事宜，由双方另行协商确定。如有任何疑问或需要进一步了解，请随时联系我们。我们将竭诚为您解答和处理。
+          </p>
         </section>
       </div>
 
@@ -140,9 +300,9 @@
 <script>
 import { getCodeImg } from "@/api/login";
 import Cookies from "js-cookie";
-import { encrypt, decrypt } from '@/utils/jsencrypt'
-import { encryptCBC} from '@/utils/aes'
-import {getUserById} from "@/api/system/userInfo";
+import { encrypt, decrypt } from "@/utils/jsencrypt";
+import { encryptCBC } from "@/utils/aes";
+import { getUserById } from "@/api/system/userInfo";
 
 export default {
   name: "Login",
@@ -156,17 +316,17 @@ export default {
         userAgreement: false,
         code: "",
         uuid: "",
-        usernameEncryption:"",
-        passwordEncryption:"",
+        usernameEncryption: "",
+        passwordEncryption: "",
       },
       loginRules: {
         username: [
-          { required: true, trigger: "blur", message: "请输入您的账号" }
+          { required: true, trigger: "blur", message: "请输入您的账号" },
         ],
         password: [
-          { required: true, trigger: "blur", message: "请输入您的密码" }
+          { required: true, trigger: "blur", message: "请输入您的密码" },
         ],
-        code: [{ required: true, trigger: "change", message: "请输入验证码" }]
+        code: [{ required: true, trigger: "change", message: "请输入验证码" }],
       },
       loading: false,
       // 验证码开关
@@ -174,26 +334,39 @@ export default {
       // 注册开关
       register: false,
       redirect: undefined,
-      title:"服务条款协议",
-      opens:false
+      title: "服务条款协议",
+      opens: false,
     };
   },
   watch: {
     $route: {
-      handler: function(route) {
+      handler: function (route) {
         this.redirect = route.query && route.query.redirect;
       },
-      immediate: true
-    }
+      immediate: true,
+    },
   },
   created() {
     this.getCode();
     this.getCookie();
   },
   methods: {
+    getParticleStyle(index) {
+      const left = Math.random() * 100;
+      const top = Math.random() * 100;
+      const delay = Math.random() * 20;
+      const duration = 15 + Math.random() * 10;
+      return {
+        left: `${left}%`,
+        top: `${top}%`,
+        animationDelay: `${delay}s`,
+        animationDuration: `${duration}s`,
+      };
+    },
     getCode() {
-      getCodeImg().then(res => {
-        this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
+      getCodeImg().then((res) => {
+        this.captchaEnabled =
+          res.captchaEnabled === undefined ? true : res.captchaEnabled;
         if (this.captchaEnabled) {
           this.codeUrl = "data:image/gif;base64," + res.img;
           this.loginForm.uuid = res.uuid;
@@ -203,108 +376,580 @@ export default {
     getCookie() {
       const username = Cookies.get("username");
       const password = Cookies.get("password");
-      const rememberMe = Cookies.get('rememberMe')
+      const rememberMe = Cookies.get("rememberMe");
       this.loginForm = {
         username: username === undefined ? this.loginForm.username : username,
-        password: password === undefined ? this.loginForm.password : decrypt(password),
-        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
+        password:
+          password === undefined ? this.loginForm.password : decrypt(password),
+        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
       };
     },
     handleLogin() {
-      if(this.loginForm.userAgreement){
-
-      }else {
+      if (this.loginForm.userAgreement) {
+      } else {
         this.$modal.msgError("请先同意《用户协议》");
         return false;
       }
 
-      this.$refs.loginForm.validate(valid => {
+      this.$refs.loginForm.validate((valid) => {
         if (valid) {
           this.loading = true;
           if (this.loginForm.rememberMe) {
             Cookies.set("username", this.loginForm.username, { expires: 30 });
-            Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
-            Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
+            Cookies.set("password", encrypt(this.loginForm.password), {
+              expires: 30,
+            });
+            Cookies.set("rememberMe", this.loginForm.rememberMe, {
+              expires: 30,
+            });
           } else {
             Cookies.remove("username");
             Cookies.remove("password");
-            Cookies.remove('rememberMe');
+            Cookies.remove("rememberMe");
           }
-          this.loginForm.usernameEncryption = encryptCBC(this.loginForm.username);
-          this.loginForm.passwordEncryption = encryptCBC(this.loginForm.password);
+          this.loginForm.usernameEncryption = encryptCBC(
+            this.loginForm.username
+          );
+          this.loginForm.passwordEncryption = encryptCBC(
+            this.loginForm.password
+          );
 
-          console.log("qqq",this.loginForm)
-          this.$store.dispatch("Login", this.loginForm).then(() => {
-            this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
-            // this.$router.push({ path: this.redirect || "/gz-att/" }).catch(()=>{});
-          }).catch(() => {
-            this.loading = false;
-            if (this.captchaEnabled) {
-              this.getCode();
-            }
-          });
+          console.log("qqq", this.loginForm);
+          this.$store
+            .dispatch("Login", this.loginForm)
+            .then(() => {
+              this.$router.push({ path: this.redirect || "/" }).catch(() => {});
+              // this.$router.push({ path: this.redirect || "/gz-att/" }).catch(()=>{});
+            })
+            .catch(() => {
+              this.loading = false;
+              if (this.captchaEnabled) {
+                this.getCode();
+              }
+            });
         }
       });
     },
 
-    goUserAgreement(){
-      this.opens=true;
+    goUserAgreement() {
+      this.opens = true;
     },
 
     cancel() {
       this.opens = false;
     },
-
-  }
+  },
 };
 </script>
 
 <style rel="stylesheet/scss" lang="scss">
 .login {
+  position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
-  height: 100%;
-  background-image: url("../assets/images/login-background.jpg");
-  background-size: cover;
-}
-.title {
-  margin: 0px auto 30px auto;
-  text-align: center;
-  color: #707070;
+  height: 100vh;
+  width: 100vw;
+  overflow: hidden;
+  background: linear-gradient(
+    135deg,
+    #667eea 0%,
+    #764ba2 25%,
+    #f093fb 50%,
+    #4facfe 75%,
+    #00f2fe 100%
+  );
+  background-size: 400% 400%;
+  animation: gradientShift 15s ease infinite;
 }
 
-.login-form {
-  border-radius: 6px;
-  background: #ffffff;
+@keyframes gradientShift {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+// 动态背景层
+.animated-bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  overflow: hidden;
+}
+
+// 粒子效果
+.particles {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.particle {
+  position: absolute;
+  width: 4px;
+  height: 4px;
+  background: rgba(255, 255, 255, 0.6);
+  border-radius: 50%;
+  animation: float 20s infinite ease-in-out;
+  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
+}
+
+@keyframes float {
+  0%,
+  100% {
+    transform: translateY(0) translateX(0) scale(1);
+    opacity: 0.3;
+  }
+  25% {
+    transform: translateY(-100px) translateX(50px) scale(1.2);
+    opacity: 0.6;
+  }
+  50% {
+    transform: translateY(-200px) translateX(-30px) scale(0.8);
+    opacity: 0.4;
+  }
+  75% {
+    transform: translateY(-150px) translateX(80px) scale(1.1);
+    opacity: 0.7;
+  }
+}
+
+// 网格覆盖层
+.grid-overlay {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-image: linear-gradient(
+      rgba(255, 255, 255, 0.03) 1px,
+      transparent 1px
+    ),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
+  background-size: 50px 50px;
+  animation: gridMove 20s linear infinite;
+  pointer-events: none;
+}
+
+@keyframes gridMove {
+  0% {
+    transform: translate(0, 0);
+  }
+  100% {
+    transform: translate(50px, 50px);
+  }
+}
+
+// 渐变光球
+.gradient-orb {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(80px);
+  opacity: 0.4;
+  animation: orbFloat 20s ease-in-out infinite;
+}
+
+.orb-1 {
   width: 400px;
-  padding: 25px 25px 5px 25px;
-  .el-input {
-    height: 38px;
-    input {
-      height: 38px;
+  height: 400px;
+  background: radial-gradient(
+    circle,
+    rgba(102, 126, 234, 0.8) 0%,
+    transparent 70%
+  );
+  top: -200px;
+  left: -200px;
+  animation-delay: 0s;
+}
+
+.orb-2 {
+  width: 500px;
+  height: 500px;
+  background: radial-gradient(
+    circle,
+    rgba(118, 75, 162, 0.8) 0%,
+    transparent 70%
+  );
+  bottom: -250px;
+  right: -250px;
+  animation-delay: 7s;
+}
+
+.orb-3 {
+  width: 350px;
+  height: 350px;
+  background: radial-gradient(
+    circle,
+    rgba(79, 172, 254, 0.8) 0%,
+    transparent 70%
+  );
+  top: 50%;
+  right: 10%;
+  animation-delay: 14s;
+}
+
+@keyframes orbFloat {
+  0%,
+  100% {
+    transform: translate(0, 0) scale(1);
+  }
+  33% {
+    transform: translate(50px, -50px) scale(1.1);
+  }
+  66% {
+    transform: translate(-30px, 30px) scale(0.9);
+  }
+}
+
+// 登录容器
+.login-container {
+  position: relative;
+  z-index: 10;
+  width: 100%;
+  max-width: 450px;
+  padding: 20px;
+}
+
+// 登录表单
+.login-form {
+  border-radius: 20px;
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+  width: 100%;
+  padding: 40px 35px;
+  animation: slideUp 0.6s ease-out;
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+// 表单头部
+.form-header {
+  text-align: center;
+  margin-bottom: 35px;
+}
+
+.logo-wrapper {
+  position: relative;
+  display: inline-block;
+  margin-bottom: 20px;
+
+  .logo-glow {
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    background: linear-gradient(
+      135deg,
+      rgba(102, 126, 234, 0.8),
+      rgba(79, 172, 254, 0.8)
+    );
+    margin: 0 auto;
+    position: relative;
+    animation: pulse 2s ease-in-out infinite;
+
+    &::before {
+      content: "";
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 60px;
+      height: 60px;
+      border-radius: 50%;
+      background: rgba(255, 255, 255, 0.9);
+      box-shadow: 0 0 20px rgba(102, 126, 234, 0.5);
     }
   }
+}
+
+@keyframes pulse {
+  0%,
+  100% {
+    transform: scale(1);
+    box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7);
+  }
+  50% {
+    transform: scale(1.05);
+    box-shadow: 0 0 0 20px rgba(102, 126, 234, 0);
+  }
+}
+
+.title {
+  margin: 0;
+  position: relative;
+
+  .title-text {
+    display: block;
+    font-size: 28px;
+    font-weight: 600;
+    background: linear-gradient(135deg, #ffffff 0%, #e0e7ff 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    margin-bottom: 10px;
+    letter-spacing: 2px;
+  }
+
+  .title-line {
+    display: block;
+    width: 60px;
+    height: 3px;
+    background: linear-gradient(
+      90deg,
+      transparent,
+      rgba(255, 255, 255, 0.8),
+      transparent
+    );
+    margin: 10px auto;
+    border-radius: 2px;
+  }
+}
+
+.subtitle {
+  margin: 10px 0 0 0;
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.7);
+  letter-spacing: 3px;
+  font-weight: 300;
+}
+
+// 输入框样式
+.login-form {
+  .el-form-item {
+    margin-bottom: 22px;
+  }
+
+  .modern-input {
+    .el-input__inner {
+      height: 48px;
+      line-height: 48px;
+      background: rgba(255, 255, 255, 0.15);
+      border: 1px solid rgba(255, 255, 255, 0.3);
+      border-radius: 12px;
+      color: #fff;
+      font-size: 14px;
+      transition: all 0.3s ease;
+
+      &::placeholder {
+        color: rgba(255, 255, 255, 0.6);
+      }
+
+      &:focus {
+        background: rgba(255, 255, 255, 0.2);
+        border-color: rgba(255, 255, 255, 0.5);
+        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
+      }
+    }
+
+    .el-input__prefix {
+      left: 15px;
+    }
+  }
+
   .input-icon {
-    height: 39px;
-    width: 14px;
-    margin-left: 2px;
+    height: 48px;
+    width: 16px;
+    color: rgba(255, 255, 255, 0.8);
+    font-size: 16px;
   }
 }
-.login-tip {
-  font-size: 13px;
-  text-align: center;
-  color: #bfbfbf;
+
+// 验证码样式
+.code-wrapper {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+
+  .code-input {
+    flex: 1;
+  }
 }
+
 .login-code {
-  width: 33%;
-  height: 38px;
-  float: right;
+  width: 120px;
+  height: 48px;
+  border-radius: 12px;
+  overflow: hidden;
+  background: rgba(255, 255, 255, 0.15);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  cursor: pointer;
+  transition: all 0.3s ease;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.2);
+    border-color: rgba(255, 255, 255, 0.5);
+    transform: scale(1.02);
+  }
+
   img {
-    cursor: pointer;
-    vertical-align: middle;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
   }
 }
+
+.login-code-img {
+  height: 100%;
+  width: 100%;
+}
+
+// 表单选项
+.form-options {
+  margin-bottom: 15px;
+}
+
+.remember-checkbox {
+  ::v-deep .el-checkbox__label {
+    color: rgba(255, 255, 255, 0.9);
+    font-size: 14px;
+  }
+
+  ::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
+    background-color: rgba(102, 126, 234, 0.8);
+    border-color: rgba(102, 126, 234, 0.8);
+  }
+
+  ::v-deep .el-checkbox__inner {
+    background-color: rgba(255, 255, 255, 0.2);
+    border-color: rgba(255, 255, 255, 0.4);
+  }
+}
+
+// 用户协议
+.agreement-item {
+  margin-bottom: 25px;
+
+  .el-form-item__content {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+}
+
+.agreement-checkbox {
+  ::v-deep .el-checkbox__label {
+    color: rgba(255, 255, 255, 0.9);
+    font-size: 14px;
+  }
+
+  ::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
+    background-color: rgba(102, 126, 234, 0.8);
+    border-color: rgba(102, 126, 234, 0.8);
+  }
+
+  ::v-deep .el-checkbox__inner {
+    background-color: rgba(255, 255, 255, 0.2);
+    border-color: rgba(255, 255, 255, 0.4);
+  }
+}
+
+.agreement-link {
+  color: #60a5fa;
+  cursor: pointer;
+  font-size: 14px;
+  margin-left: 5px;
+  transition: all 0.3s ease;
+  text-decoration: none;
+
+  &:hover {
+    color: #93c5fd;
+    text-shadow: 0 0 8px rgba(96, 165, 250, 0.5);
+  }
+}
+
+// 登录按钮
+.login-button {
+  width: 100%;
+  height: 50px;
+  font-size: 16px;
+  font-weight: 600;
+  letter-spacing: 2px;
+  background: linear-gradient(
+    135deg,
+    rgba(102, 126, 234, 0.9),
+    rgba(79, 172, 254, 0.9)
+  );
+  border: none;
+  border-radius: 12px;
+  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+      90deg,
+      transparent,
+      rgba(255, 255, 255, 0.3),
+      transparent
+    );
+    transition: left 0.5s;
+  }
+
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
+
+    &::before {
+      left: 100%;
+    }
+  }
+
+  &:active {
+    transform: translateY(0);
+  }
+
+  ::v-deep span {
+    position: relative;
+    z-index: 1;
+  }
+}
+
+// 注册链接
+.register-link {
+  text-align: right;
+  margin-top: 15px;
+
+  .link-type {
+    color: rgba(255, 255, 255, 0.8);
+    font-size: 14px;
+    text-decoration: none;
+    transition: all 0.3s ease;
+
+    &:hover {
+      color: #fff;
+      text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
+    }
+  }
+}
+
+// 底部
 .el-login-footer {
   height: 40px;
   line-height: 40px;
@@ -312,14 +957,65 @@ export default {
   bottom: 0;
   width: 100%;
   text-align: center;
-  color: #fff;
+  color: rgba(255, 255, 255, 0.7);
   font-family: Arial;
   font-size: 12px;
   letter-spacing: 1px;
-}
-.login-code-img {
-  height: 38px;
+  z-index: 10;
 }
 
+// 响应式设计
+@media (max-width: 768px) {
+  .login-container {
+    max-width: 90%;
+    padding: 15px;
+  }
 
+  .login-form {
+    padding: 30px 25px;
+  }
+
+  .title .title-text {
+    font-size: 24px;
+  }
+}
+
+// 对话框样式优化
+::v-deep .el-dialog {
+  border-radius: 16px;
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(10px);
+}
+
+::v-deep .el-dialog__header {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  padding: 20px;
+  border-radius: 16px 16px 0 0;
+
+  .el-dialog__title {
+    color: #fff;
+    font-weight: 600;
+  }
+}
+
+::v-deep .el-dialog__body {
+  padding: 30px;
+  max-height: 60vh;
+  overflow-y: auto;
+
+  #policy {
+    color: #333;
+    line-height: 1.8;
+
+    p {
+      margin-bottom: 12px;
+    }
+  }
+}
+
+::v-deep .el-dialog__footer {
+  padding: 20px 30px;
+  border-top: 1px solid #eee;
+}
 </style>
+
diff --git a/src/views/login_old.vue b/src/views/login_old.vue
new file mode 100644
index 0000000..fc299d5
--- /dev/null
+++ b/src/views/login_old.vue
@@ -0,0 +1,460 @@
+<template>
+  <div class="login">
+    <el-form
+      ref="loginForm"
+      :model="loginForm"
+      :rules="loginRules"
+      class="login-form"
+    >
+      <h3 class="title">考勤后台管理系统</h3>
+      <el-form-item prop="username">
+        <el-input
+          v-model="loginForm.username"
+          type="text"
+          auto-complete="off"
+          placeholder="账号"
+        >
+          <svg-icon
+            slot="prefix"
+            icon-class="user"
+            class="el-input__icon input-icon"
+          />
+        </el-input>
+      </el-form-item>
+      <el-form-item prop="password">
+        <el-input
+          v-model="loginForm.password"
+          type="password"
+          auto-complete="off"
+          placeholder="密码"
+          show-password
+          @keyup.enter.native="handleLogin"
+        >
+          <svg-icon
+            slot="prefix"
+            icon-class="password"
+            class="el-input__icon input-icon"
+          />
+        </el-input>
+      </el-form-item>
+      <el-form-item prop="code" v-if="captchaEnabled">
+        <el-input
+          v-model="loginForm.code"
+          auto-complete="off"
+          placeholder="验证码"
+          style="width: 63%"
+          @keyup.enter.native="handleLogin"
+        >
+          <svg-icon
+            slot="prefix"
+            icon-class="validCode"
+            class="el-input__icon input-icon"
+          />
+        </el-input>
+        <div class="login-code">
+          <img :src="codeUrl" @click="getCode" class="login-code-img" />
+        </div>
+      </el-form-item>
+      <el-checkbox
+        v-model="loginForm.rememberMe"
+        style="margin: 0px 0px 0px 0px"
+        >记住密码</el-checkbox
+      >
+
+      <el-form-item>
+        <el-checkbox
+          v-model="loginForm.userAgreement"
+          style="margin: 0px 0px 0px 0px"
+          >我已阅读并同意
+        </el-checkbox>
+        <div
+          @click="goUserAgreement()"
+          style="color: #02a7f0; cursor: pointer; margin: -36px 0px 0px 150px"
+        >
+          《用户协议》
+        </div>
+      </el-form-item>
+
+      <el-form-item style="width: 100%">
+        <el-button
+          :loading="loading"
+          size="medium"
+          type="primary"
+          style="width: 100%"
+          @click.native.prevent="handleLogin"
+        >
+          <span v-if="!loading">登 录</span>
+          <span v-else>登 录 中...</span>
+        </el-button>
+        <div style="float: right" v-if="register">
+          <router-link class="link-type" :to="'/register'"
+            >立即注册</router-link
+          >
+        </div>
+      </el-form-item>
+    </el-form>
+
+    <el-dialog
+      :title="title"
+      :visible.sync="opens"
+      width="1000px"
+      append-to-body
+    >
+      <div id="policy">
+        <!--        <header>服务条款协议</header>-->
+        <section>
+          <p>一、引言</p>
+          <p>
+            鉴于个人信息和隐私保护的重要性，以及我们对您个人信息和隐私的尊重，我们制定了本《个人信息和隐私保护协议》（以下简称“本协议”）。本协议旨在明确我们对您个人信息和隐私的收集、使用、存储、传输和删除等方面的规定，以确保您的个人信息和隐私得到妥善保护。
+          </p>
+          <p>⽤户不得在本站论坛发布含有下列内容之⼀的信息:</p>
+          <p>二、协议适用说明</p>
+          <p>
+            1.
+            个人信息：指能够单独或与其他信息结合后识别特定自然人身份的信息，包括但不限于姓名、性别、出生日期、身份证号、联系方式、家庭住址等。
+          </p>
+          <p>
+            2.
+            隐私安全：指个人在特定社会关系中，享有私人生活，不愿公开的个人信息和私人事务。
+          </p>
+          <p>
+            3.
+            适用范围：本协议适用于我们对您个人信息和隐私的保护，包括我们收集、使用、存储、传输和删除您的个人信息和隐私。
+          </p>
+          <p>三、信息收集</p>
+          <p>
+            1.
+            合法性原则：我们将遵循合法性原则，仅在您同意或法律允许的情况下收集您的个人信息和隐私。
+          </p>
+          <p>
+            2.
+            必要性原则：我们将遵循必要性原则，仅收集与实现我们的服务目的直接相关的信息。
+          </p>
+          <p>
+            3.
+            透明性原则：我们将遵循透明性原则，向您公开我们收集的个人信息和隐私的种类、目的和使用方式。
+          </p>
+          <p>四、信息使用</p>
+          <p>
+            1.
+            合法使用：我们将仅在法律允许或您同意的情况下使用您的个人信息和隐私。
+          </p>
+          <p>
+            2.
+            正当使用：我们将遵循正当使用原则，确保使用您的个人信息和隐私是为了实现我们的服务目的，并且不会损害您的合法权益。
+          </p>
+          <p>
+            3.
+            透明使用：我们将遵循透明使用原则，向您公开我们使用您的个人信息和隐私的具体情况
+          </p>
+          <p>五、信息存储与传输</p>
+          <p>
+            1.
+            安全存储：我们将采取必要的技术和组织措施，确保您的个人信息和隐私得到安全存储。
+          </p>
+          <p>
+            2.
+            加密传输：我们将对您的个人信息和隐私进行加密传输，以确保数据传输过程中的安全性。
+          </p>
+          <p>
+            3.
+            访问控制：我们将严格控制对您的个人信息和隐私的访问权限，确保只有授权人员才能访问相关信息。
+          </p>
+          <p>
+            4.定期审计：为您提供安全保障
+            为提高您使用本系统的安全性，保护您或其他用户或公众的人身财产安全免遭侵害，个人信息处理者应当定期对其处理个人信息遵守法律、行政法规的情况进行合规审计。
+          </p>
+          <p>六、信息删除与注销</p>
+          <p>
+            1.
+            删除原则：我们将遵循删除原则，确保在达到收集目的后或您要求删除时，及时删除您的个人信息和隐私。
+          </p>
+          <p>
+            2.
+            注销权利：您有权要求我们注销您的个人信息和隐私，我们将在收到您的请求后尽快处理。
+          </p>
+          <p>
+            3.在不幸发生个人信息安全事件后，我们将按照法律法规的要求向您告知：安全事件的基本情况和可能的影响、我们已采取或将要采取的处置措施、您可自主防范和降低风险的建议、对您的补救措施等。事件相关情况我们将以邮件、信函、电话、推送通知等方式告知您，难以逐一告知个人信息主体时，我们会采取合理、有效的方式发布公告
+          </p>
+          <p>七、违约责任</p>
+          <p>1. 违反本协议规定的，我们将依法承担相应的法律责任。</p>
+          <p>2. 您违反本协议规定的，我们将有权依法追究您的法律责任。</p>
+          <p>八、如何保护你的信息</p>
+          <p>
+            （一）我们已采取符合业界标准、合理可行的安全防护措施保护您的信息，防止个人信息遭到未经授权访问、公开披露、使用、修改、损坏或丢失。例如，在您的浏览器与服务器之间交换数据时受
+            SSL协议加密保护；我们同时对南京景桥软件有限公司网站提供HTTPS协议安全浏览方式；我们会使用加密技术提高个人信息的安全性；我们会使用受信赖的保护机制防止个人信息遭到恶意攻击；我们会部署访问控制机制，尽力确保只有授权人员才可访问个人信息；以及我们会举办安全和隐私保护培训课程，加强员工对于保护个人信息重要性的认识。
+          </p>
+          <p>
+            （二）我们有行业先进的以数据为核心，围绕数据生命周期进行的数据安全管理体系，从组织建设、制度设计、人员管理、产品技术等方面多维度提升整个系统的安全性。在信息使用时，例如信息展示、信息关联计算，我们会采用多种数据脱敏技术增强信息在使用中安全性。采用严格的数据访问权限控制和多重身份认证技术保护信息，避免数据被违规使用。
+          </p>
+          <p>
+            （三）我们会采取合理可行的措施，尽力避免收集无关的个人信息。我们只会在达成本政策所述目的所需的期限内保留您的个人信息（除非法律有强制的存留要求）。
+          </p>
+          <p>
+            （四）互联网并非绝对安全的环境，使用服务时，我们强烈建议通过安全方式、使用复杂密码，协助我们保证您的账号安全。如发现自己的个人信息泄密，尤其是用户自己的账户或密码发生泄露，请立即根据本隐私政策文末中提供的联系方式联络我们，以便我们采取相应措施来保护用户个人信息安全。
+          </p>
+          <p>
+            （五）在不幸发生个人信息安全事件后，我们将按照法律法规的要求向您告知：安全事件的基本情况和可能的影响、我们已采取或将要采取的处置措施、您可自主防范和降低风险的建议、对您的补救措施等。事件相关情况我们将以邮件、信函、电话、推送通知等方式告知您，难以逐一告知个人信息主体时，我们会采取合理、有效的方式发布公告。
+          </p>
+          <p>九、我们如何更新本政策</p>
+          <p>
+            1.
+            为给您提供更好的服务，本应用的产品与服务将不时更新与变化，我们会适时对本协议进行修订，这些修订构成本协议的一部分。但是未经您明确同意，我们不会削减您按照本协议所应享有的权利。
+          </p>
+          <p>
+            本协议更新后，我们会在本应用中发出更新版本，并在本应用中以弹窗的方式提醒您，以便您及时了解本协议的最新版本。您也可以在皖事通APP通过“我的-设置-关于皖事通-隐私协议”中查看本协议。如果您不同意本协议，或对本协议修改、更新的内容有异议，您可以选择停止使用本应用。但请您知悉，您账号注销之前、停止使用本服务之前的行为和活动仍受本政策的约束。
+          </p>
+          <p>
+            3.
+            对于重大变更，我们还会提供更为显著的通知（我们会通过包括但不限于邮件、短信或在打开本软件做特别提示等方式，说明本政策的具体变更内容）。本政策所指的重大变更包括但不限于：
+          </p>
+          <p>
+            （1）我们的服务模式发生重大变化。如处理个人信息的目的、处理的个人信息的类型、个人信息的使用方式等；
+          </p>
+          <p>（2）个人信息共享、转让或公开披露的主要对象发生变化；</p>
+          <p>（3）您参与个人信息处理方面的权利及其行使方式发生重大变化；</p>
+          <p>
+            （4）我们负责处理个人信息安全的责任部门、联络方式及投诉渠道发生变化时；
+          </p>
+          <p>（5）个人信息安全影响评估报告表明存在高风险时；</p>
+          <p>
+            （6）伴随政策或法律发布实施，为响应国家政策或者法律规范，做出变更。
+          </p>
+          <p>十、我们如何委托处理、共享、转让、公开披露您的个人信息</p>
+          <p>1.委托处理</p>
+          <p>
+            为了向您提供更完善、更优质的产品和服务，我们可能会委托合作方处理您的某些个人信息。对我们委托处理您个人信息的公司、组织和个人，我们会与其签署严格的保密协定，明确数据处理事项、处理期限、处理性质、处理目的以及双方责任等，要求合作方仅按照我们的要求、本政策的规定以及其他任何相关的保密和安全措施来处理您的个人信息。如果您拒绝我们的供应商在提供服务时收集为提供服务所必需的个人信息，将可能导致您在使用本应用的过程中无法享受该供应商提供的服务。
+          </p>
+          <p>2.共享</p>
+          <p>
+            在本应用进行用户注册，您将同步注册成为安徽省统一身份认证平台的注册用户，该用户的账号注册信息会在本应用、安徽政务服务网等政务服务系统间共享。除此以外，我们不会与本产品服务提供者以外的公司、组织和个人共享您的个人信息，但以下情况除外：
+          </p>
+          <p>
+            （1）在获取明确同意的情况下共享：获得您的明确同意后，我们会与其他方共享您的个人信息。
+          </p>
+          <p>
+            （2）在法定情形下的共享：我们可能会根据法律法规规定、诉讼争议解决需要，或按行政、司法机关依法提出的要求，对外共享您的个人信息。
+          </p>
+          <p>十一、其他条款</p>
+          <p>
+            1.
+            本协议自双方签字或盖章之日起生效，有效期为【】年。协议期满后，如双方继续合作，可续签本协议。
+          </p>
+          <p>
+            2.
+            本协议一式两份，双方各执一份。本协议内容如有任何修改或补充，须经双方协商一致后，以书面形式进行变更。
+          </p>
+          <p>
+            3.
+            本协议未尽事宜，由双方另行协商确定。如有任何疑问或需要进一步了解，请随时联系我们。我们将竭诚为您解答和处理。
+          </p>
+        </section>
+      </div>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+
+    <!--  底部  -->
+    <div class="el-login-footer">
+      <!-- <span>Copyright © 2018-2024 bonus.vip All Rights Reserved.</span> -->
+    </div>
+  </div>
+</template>
+
+<script>
+import { getCodeImg } from "@/api/login";
+import Cookies from "js-cookie";
+import { encrypt, decrypt } from "@/utils/jsencrypt";
+import { encryptCBC } from "@/utils/aes";
+import { getUserById } from "@/api/system/userInfo";
+
+export default {
+  name: "Login",
+  data() {
+    return {
+      codeUrl: "",
+      loginForm: {
+        username: "",
+        password: "",
+        rememberMe: false,
+        userAgreement: false,
+        code: "",
+        uuid: "",
+        usernameEncryption: "",
+        passwordEncryption: "",
+      },
+      loginRules: {
+        username: [
+          { required: true, trigger: "blur", message: "请输入您的账号" },
+        ],
+        password: [
+          { required: true, trigger: "blur", message: "请输入您的密码" },
+        ],
+        code: [{ required: true, trigger: "change", message: "请输入验证码" }],
+      },
+      loading: false,
+      // 验证码开关
+      captchaEnabled: true,
+      // 注册开关
+      register: false,
+      redirect: undefined,
+      title: "服务条款协议",
+      opens: false,
+    };
+  },
+  watch: {
+    $route: {
+      handler: function (route) {
+        this.redirect = route.query && route.query.redirect;
+      },
+      immediate: true,
+    },
+  },
+  created() {
+    this.getCode();
+    this.getCookie();
+  },
+  methods: {
+    getCode() {
+      getCodeImg().then((res) => {
+        this.captchaEnabled =
+          res.captchaEnabled === undefined ? true : res.captchaEnabled;
+        if (this.captchaEnabled) {
+          this.codeUrl = "data:image/gif;base64," + res.img;
+          this.loginForm.uuid = res.uuid;
+        }
+      });
+    },
+    getCookie() {
+      const username = Cookies.get("username");
+      const password = Cookies.get("password");
+      const rememberMe = Cookies.get("rememberMe");
+      this.loginForm = {
+        username: username === undefined ? this.loginForm.username : username,
+        password:
+          password === undefined ? this.loginForm.password : decrypt(password),
+        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
+      };
+    },
+    handleLogin() {
+      if (this.loginForm.userAgreement) {
+      } else {
+        this.$modal.msgError("请先同意《用户协议》");
+        return false;
+      }
+
+      this.$refs.loginForm.validate((valid) => {
+        if (valid) {
+          this.loading = true;
+          if (this.loginForm.rememberMe) {
+            Cookies.set("username", this.loginForm.username, { expires: 30 });
+            Cookies.set("password", encrypt(this.loginForm.password), {
+              expires: 30,
+            });
+            Cookies.set("rememberMe", this.loginForm.rememberMe, {
+              expires: 30,
+            });
+          } else {
+            Cookies.remove("username");
+            Cookies.remove("password");
+            Cookies.remove("rememberMe");
+          }
+          this.loginForm.usernameEncryption = encryptCBC(
+            this.loginForm.username
+          );
+          this.loginForm.passwordEncryption = encryptCBC(
+            this.loginForm.password
+          );
+
+          console.log("qqq", this.loginForm);
+          this.$store
+            .dispatch("Login", this.loginForm)
+            .then(() => {
+              this.$router.push({ path: this.redirect || "/" }).catch(() => {});
+              // this.$router.push({ path: this.redirect || "/gz-att/" }).catch(()=>{});
+            })
+            .catch(() => {
+              this.loading = false;
+              if (this.captchaEnabled) {
+                this.getCode();
+              }
+            });
+        }
+      });
+    },
+
+    goUserAgreement() {
+      this.opens = true;
+    },
+
+    cancel() {
+      this.opens = false;
+    },
+  },
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss">
+.login {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  background-image: url("../assets/images/login-background.jpg");
+  background-size: cover;
+}
+.title {
+  margin: 0px auto 30px auto;
+  text-align: center;
+  color: #707070;
+}
+
+.login-form {
+  border-radius: 6px;
+  background: #ffffff;
+  width: 400px;
+  padding: 25px 25px 5px 25px;
+  .el-input {
+    height: 38px;
+    input {
+      height: 38px;
+    }
+  }
+  .input-icon {
+    height: 39px;
+    width: 14px;
+    margin-left: 2px;
+  }
+}
+.login-tip {
+  font-size: 13px;
+  text-align: center;
+  color: #bfbfbf;
+}
+.login-code {
+  width: 33%;
+  height: 38px;
+  float: right;
+  img {
+    cursor: pointer;
+    vertical-align: middle;
+  }
+}
+.el-login-footer {
+  height: 40px;
+  line-height: 40px;
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  text-align: center;
+  color: #fff;
+  font-family: Arial;
+  font-size: 12px;
+  letter-spacing: 1px;
+}
+.login-code-img {
+  height: 38px;
+}
+</style>
diff --git a/src/views/report/attendanceRate/index.vue b/src/views/report/attendanceRate/index.vue
new file mode 100644
index 0000000..e968a42
--- /dev/null
+++ b/src/views/report/attendanceRate/index.vue
@@ -0,0 +1,1121 @@
+<template>
+  <div class="app-container" id="monthReport">
+    <!-- 考勤率页面 -->
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      size="small"
+      :inline="true"
+      v-show="showSearch"
+      label-width="68px"
+    >
+      <el-form-item label="选择月份">
+        <el-date-picker
+          v-model="queryParams.month"
+          type="monthrange"
+          range-separator="至"
+          start-placeholder="开始月份"
+          end-placeholder="结束月份"
+          value-format="yyyy-MM"
+          :clearable="false"
+          :editable="false"
+        >
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item label="部门" prop="orgIdList">
+        <treeselect
+          v-model="queryParams.orgIdList"
+          :options="deptOptions"
+          :normalizer="normalizer"
+          multiple
+          placeholder="选择部门"
+          style="width: 240px"
+        />
+      </el-form-item>
+      <el-form-item label="姓名" prop="userName">
+        <el-input
+          v-model="queryParams.userName"
+          placeholder="请输入姓名"
+          clearable
+          style="width: 240px"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          size="mini"
+          @click="handleQuery"
+          >搜索</el-button
+        >
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+          >重置</el-button
+        >
+      </el-form-item>
+    </el-form>
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          v-hasPermi="['att:attMonthReport:export']"
+          >导出
+        </el-button>
+      </el-col>
+
+      <!-- <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-search"
+          size="mini"
+          @click="handleDays"
+          v-hasPermi="['system:user:admin']"
+          >更新应出勤天数
+        </el-button>
+
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-date"
+          size="mini"
+          @click="onHandleYearData"
+          >年数据
+        </el-button>
+      </el-col> -->
+
+      <right-toolbar
+        :showSearch.sync="showSearch"
+        @queryTable="getList"
+      ></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="typeList">
+      <el-table-column label="序号" align="center" width="80" type="index">
+        <template slot-scope="scope">
+          <span>{{
+            (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1
+          }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        :label="item.label"
+        align="center"
+        :prop="item.prop"
+        v-for="item in mainListFields"
+        :key="item.prop"
+      />
+    </el-table>
+
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 相关记录 -->
+    <el-dialog
+      :title="title"
+      :visible.sync="showRecord"
+      width="1300px"
+      height="1000px"
+      append-to-body
+      @close="cancelRecord"
+    >
+      <el-form
+        :model="queryRecord"
+        ref="queryFormRecord"
+        size="small"
+        :inline="true"
+        v-show="showSearch"
+        label-width="110px"
+      >
+        <el-form-item label="选择考勤时间段">
+          <el-date-picker
+            v-model="dateRange"
+            style="width: 240px"
+            value-format="yyyy-MM-dd"
+            type="daterange"
+            range-separator="-"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            :picker-options="pickerOptions"
+          ></el-date-picker>
+        </el-form-item>
+        <el-form-item>
+          <el-button
+            type="primary"
+            icon="el-icon-search"
+            size="mini"
+            @click="handleQueryRecord"
+            >查询</el-button
+          >
+          <!--          <el-button icon="el-icon-refresh" size="mini" @click="resetRecord">重置</el-button>-->
+        </el-form-item>
+      </el-form>
+
+      <el-table
+        :data="tableDataRecord"
+        width="900px"
+        height="600px"
+        row-key="id"
+      >
+        <el-table-column label="序号" align="center" width="80" type="index">
+          <template slot-scope="scope">
+            <span>{{
+              (queryRecord.pageNum - 1) * queryRecord.pageSize +
+              scope.$index +
+              1
+            }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="id" align="center" prop="id" v-if="false" />
+        <el-table-column
+          label="姓名"
+          align="center"
+          prop="name"
+          width="80"
+          sortable
+        />
+        <el-table-column
+          label="所属部门"
+          align="center"
+          prop="orgName"
+          width="150"
+          sortable
+        />
+        <el-table-column
+          label="考勤日期"
+          align="center"
+          prop="attCurrent"
+          width="150"
+          sortable
+          >\
+          <template slot-scope="scope">
+            <span>{{ formatDate(scope.row.attCurrent) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="上班打卡时间"
+          align="center"
+          prop="goWorkTime"
+          width="180"
+          sortable
+        />
+        <el-table-column
+          label="上班状态"
+          align="center"
+          prop="goWorkStatus"
+          width="100"
+          sortable
+        >
+          <template slot-scope="scope">
+            <dict-tag
+              :options="dict.type.att_status"
+              :value="scope.row.goWorkStatus"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="上班打卡地址"
+          align="center"
+          prop="goWorkAddress"
+          sortable
+          width="180"
+        />
+        <el-table-column
+          label="下班打卡时间"
+          align="center"
+          prop="offWorkTime"
+          width="180"
+          ortable
+        />
+        <el-table-column
+          label="下班状态"
+          align="center"
+          prop="offWorkStatus"
+          width="100"
+          sortable
+        >
+          <template slot-scope="scope">
+            <dict-tag
+              :options="dict.type.att_status"
+              :value="scope.row.offWorkStatus"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="下班打卡地址"
+          align="center"
+          prop="offWorkAddress"
+          width="180"
+          sortable
+        />
+      </el-table>
+
+      <pagination
+        v-show="totalTwo > 0"
+        :total="totalTwo"
+        :page.sync="queryRecord.pageNum"
+        :limit.sync="queryRecord.pageSize"
+        @pagination="getListRecord"
+      />
+    </el-dialog>
+
+    <!-- 外出次数查询 -->
+    <el-dialog
+      :title="title"
+      :visible.sync="showOutCount"
+      width="1200px"
+      height="1000px"
+      append-to-body
+    >
+      <el-form
+        :model="queryRecordOutCount"
+        ref="queryFormRecord"
+        size="small"
+        :inline="true"
+        v-show="showSearch"
+        label-width="110px"
+      >
+        <el-form-item>
+          <el-button
+            type="warning"
+            icon="el-icon-download"
+            size="mini"
+            @click="handleExportOutCountList"
+            >导出</el-button
+          >
+        </el-form-item>
+      </el-form>
+
+      <el-table
+        v-loading="loadingTwo"
+        :data="tableDataOutCount"
+        width="900px"
+        height="600px"
+        row-key="id"
+      >
+        <el-table-column label="序号" align="center" width="80" type="index">
+          <template slot-scope="scope">
+            <span>{{
+              (queryRecordOutCount.pageNum - 1) * queryRecordOutCount.pageSize +
+              scope.$index +
+              1
+            }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="考勤日期"
+          align="center"
+          prop="attCurrentDay"
+          width="180"
+          :show-overflow-tooltip="true"
+        >
+          <template slot-scope="scope">
+            <span>{{ formatDate(scope.row.attCurrentDay) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="打卡时间"
+          align="center"
+          prop="attCurrentTime"
+          width="140"
+          sortable
+        />
+        <el-table-column
+          label="打卡地址"
+          align="center"
+          prop="attAddress"
+          sortable
+        />
+      </el-table>
+
+      <pagination
+        v-show="totalTwoOutCount > 0"
+        :total="totalTwoOutCount"
+        :page.sync="queryRecord.pageNum"
+        :limit.sync="queryRecord.pageSize"
+        @pagination="getOutCountList"
+      />
+    </el-dialog>
+
+    <!-- 打卡次数记录 -->
+    <el-dialog
+      :title="title"
+      :visible.sync="showAttCount"
+      width="1200px"
+      height="1000px"
+      append-to-body
+    >
+      <el-form
+        :model="queryAttCount"
+        ref="queryFormRecordAtt"
+        size="small"
+        :inline="true"
+        v-show="showSearch"
+        label-width="110px"
+      >
+        <el-form-item> </el-form-item>
+      </el-form>
+
+      <el-table
+        v-loading="loadingAttCount"
+        :data="tableDataAttCount"
+        width="900px"
+        height="600px"
+        row-key="id"
+      >
+        <el-table-column label="序号" align="center" width="80" type="index">
+          <template slot-scope="scope">
+            <span>{{
+              (queryAttCount.pageNum - 1) * queryAttCount.pageSize +
+              scope.$index +
+              1
+            }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="考勤日期"
+          align="center"
+          prop="attCurrentDay"
+          :show-overflow-tooltip="true"
+        >
+          <template slot-scope="scope">
+            <span>{{ formatDate(scope.row.attCurrentDay) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="考勤时间"
+          align="center"
+          prop="attCurrentTime"
+          sortable
+          :show-overflow-tooltip="true"
+        />
+        <el-table-column
+          label="打卡地址"
+          align="center"
+          prop="attAddress"
+          sortable
+          :show-overflow-tooltip="true"
+        />
+        <el-table-column
+          label="备注"
+          align="center"
+          prop="remark"
+          sortable
+          :show-overflow-tooltip="true"
+        />
+      </el-table>
+
+      <pagination
+        v-show="totalAttCount > 0"
+        :total="totalAttCount"
+        :page.sync="queryAttCount.pageNum"
+        :limit.sync="queryAttCount.pageSize"
+        @pagination="getClockingRecordListByUserId"
+      />
+    </el-dialog>
+
+    <!-- 应出勤天数组成 -->
+    <el-dialog
+      :title="title"
+      :visible.sync="showRequiredDays"
+      width="1200px"
+      height="1000px"
+      append-to-body
+    >
+      <el-form
+        :model="queryRequiredDays"
+        ref="queryFormRecord"
+        size="small"
+        :inline="true"
+        v-show="showSearch"
+        label-width="110px"
+      >
+      </el-form>
+
+      <el-table
+        v-loading="loadingTwoRequiredDays"
+        :data="tableDataRequiredDays"
+        width="900px"
+        height="600px"
+        row-key="id"
+      >
+        <el-table-column label="序号" align="center" width="80" type="index">
+          <template slot-scope="scope">
+            <span>{{
+              (queryRequiredDays.pageNum - 1) * queryRequiredDays.pageSize +
+              scope.$index +
+              1
+            }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="月份"
+          align="center"
+          prop="attCurrentMonth"
+          sortable
+        />
+        <el-table-column
+          label="应出勤天数"
+          align="center"
+          prop="attDays"
+          sortable
+        />
+        <el-table-column
+          label="所属考勤组"
+          align="center"
+          prop="groupName"
+          sortable
+        />
+        <el-table-column
+          label="考勤规则"
+          align="center"
+          prop="attCurrentDay"
+          width="180"
+          :show-overflow-tooltip="true"
+        >
+          <template slot-scope="scope">
+            <span>{{ parseAttendanceRule(scope.row.attRules) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="节假日"
+          align="center"
+          prop="isHaveHoliday"
+          width="180"
+          :show-overflow-tooltip="true"
+        />
+        <el-table-column
+          label="应出勤开始时间"
+          align="center"
+          prop="attStartDate"
+          sortable
+          :show-overflow-tooltip="true"
+        />
+        <el-table-column
+          label="应出勤结束时间"
+          align="center"
+          prop="attEndDate"
+          sortable
+          :show-overflow-tooltip="true"
+        />
+      </el-table>
+
+      <pagination
+        v-show="totalTwoRequiredDays > 0"
+        :total="totalTwoRequiredDays"
+        :page.sync="queryRequiredDays.pageNum"
+        :limit.sync="queryRequiredDays.pageSize"
+        @pagination="getRequiredDaysList"
+      />
+    </el-dialog>
+
+    <!-- 年数据 -->
+    <el-dialog
+      title="年数据列表"
+      :visible.sync="showYearDataVisible"
+      width="85%"
+      height="80%"
+      append-to-body
+    >
+      <el-form :inline="true">
+        <el-form-item label="年份">
+          <el-date-picker
+            type="year"
+            style="width: 240px"
+            value-format="yyyy"
+            placeholder="选择年份"
+            v-model="queryYearDataParams.year"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button
+            type="primary"
+            icon="el-icon-search"
+            size="mini"
+            @click="getYearDataList"
+          >
+            查询
+          </el-button>
+          <el-button
+            icon="el-icon-refresh"
+            size="mini"
+            @click="resetQueryYearData"
+          >
+            重置
+          </el-button>
+
+          <el-button
+            type="warning"
+            icon="el-icon-download"
+            size="mini"
+            @click="handleExportYearDataList"
+          >
+            导出
+          </el-button>
+        </el-form-item>
+      </el-form>
+      <el-table :data="tableDataYearData" border>
+        <el-table-column align="center" label="用户名" prop="userName" />
+        <el-table-column
+          align="center"
+          width="170"
+          label="部门"
+          prop="orgName"
+          :show-overflow-tooltip="true"
+        />
+
+        <el-table-column
+          :label="item.label + '月'"
+          v-for="item in monthColList"
+          :key="item.dataValue"
+          align="center"
+        >
+          <template slot-scope="scope">
+            <span
+              style="cursor: pointer"
+              :style="{
+                color: scope.row[item.dataValue] == 1 ? '#409eff' : '#f56c6c',
+              }"
+              @click="openYearDataDetail(scope.row, item.label)"
+            >
+              {{ scope.row[item.dataValue] == 1 ? "正常" : "异常" }}
+            </span>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination
+        v-show="totalYearData > 0"
+        :total="totalYearData"
+        :page.sync="queryYearDataParams.pageNum"
+        :limit.sync="queryYearDataParams.pageSize"
+        @pagination="getYearDataList"
+      />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getDetail, getDays } from "@/api/report/monthlyError";
+import {
+  getMonthAttReport,
+  exportMonthReport,
+  getClockingRecordListByUserId,
+  getRequiredDaysList,
+  getYearDataListAPI,
+} from "@/api/report/monthReport";
+import { getAttendanceRateList } from "@/api/report/attendanceRate";
+
+import { listDeptTree } from "@/api/system/userInfo";
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import {
+  getOutCountList,
+  exportOutCountList,
+  exportYearDataListAPI,
+} from "@/api/report/attReport";
+
+var monstr = "";
+export default {
+  name: "MonthReport",
+  dicts: ["att_status"],
+  components: { Treeselect },
+  data() {
+    return {
+      // 遮罩层
+      loading: false,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 字典表格数据
+      typeList: [],
+      // 弹出层标题
+      title: "",
+      title1: "正常打卡天数",
+      title2: "迟到记录",
+      title3: "早退记录",
+      title4: "旷工记录",
+      title5: "打卡地异常记录",
+      title6: "出入异常记录",
+      title7: "请假记录",
+      title8: "轮休记录",
+      title9: "临时外出记录",
+      title10: "出差天数",
+      title11: "打卡记录",
+      title12: "外勤记录",
+      title13: "培训记录",
+      // 是否显示弹出层
+      open: false,
+      showRecord: false,
+      dateRange: [],
+      attCurrentMonth: "",
+      pickerOptions: {
+        disabledDate: this.disabledDate,
+      },
+      queryRecord: {
+        pageNum: 1,
+        pageSize: 10,
+        userId: undefined,
+        attStatis: undefined,
+        attCurrentMonth: undefined,
+      },
+      tableDataRecord: [],
+      totalTwo: 0,
+      dialogQueryForm: {
+        pageNum: 1,
+        pageSize: 10,
+      },
+      dialogList: [],
+      dialogTotal: 0,
+
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        month: undefined,
+        userName: undefined,
+        orgIdList: undefined,
+        orgName: undefined,
+      },
+      deptOptions: [],
+
+      queryRecordOutCount: {
+        pageNum: 1,
+        pageSize: 10,
+        userId: undefined,
+        attCurrentDay: undefined,
+        userName: undefined,
+      },
+      showOutCount: false,
+      totalTwoOutCount: 0,
+      // 遮罩层
+      loadingTwo: false,
+      tableDataOutCount: [],
+
+      queryAttCount: {
+        pageNum: 1,
+        pageSize: 10,
+        month: undefined,
+        userName: undefined,
+      },
+      showAttCount: false,
+      totalAttCount: 0,
+      // 遮罩层
+      loadingAttCount: false,
+      tableDataAttCount: [],
+
+      queryRequiredDays: {
+        pageNum: 1,
+        pageSize: 10,
+        userId: undefined,
+        attCurrentDay: undefined,
+        userName: undefined,
+        attCurrentMonth: undefined,
+      },
+      showRequiredDays: false,
+      totalTwoRequiredDays: 0,
+      // 遮罩层
+      loadingTwoRequiredDays: false,
+      tableDataRequiredDays: [],
+
+      showYearDataVisible: false,
+      queryYearDataParams: {
+        pageNum: 1,
+        pageSize: 10,
+        year: String(new Date().getFullYear()), // 当前年份
+      },
+      tableDataYearData: [],
+      totalYearData: 0,
+
+      // 主列表字段
+      mainListFields: [
+        { label: "姓名", prop: "userName" },
+        { label: "部门", prop: "orgName" },
+        { label: "考勤月份", prop: "attendanceRate" },
+        { label: "应出勤天数", prop: "requiredDays" },
+        { label: "迟到率", prop: "lateRate" },
+        { label: "早退率", prop: "earlyRate" },
+        { label: "休假率(带薪)", prop: "leaveRate" },
+        { label: "休假率(不带薪)", prop: "leaveUnpaidRate" },
+        { label: "异常打卡率", prop: "abnormalRate" },
+        { label: "外勤次数", prop: "outCount" },
+      ],
+
+      // 月份初始化列表
+      monthColList: [
+        { label: "1", dataValue: "oneMonth" },
+        { label: "2", dataValue: "twoMonth" },
+        { label: "3", dataValue: "threeMonth" },
+        { label: "4", dataValue: "fourMonth" },
+        { label: "5", dataValue: "fiveMonth" },
+        { label: "6", dataValue: "sixMonth" },
+        { label: "7", dataValue: "sevenMonth" },
+        { label: "8", dataValue: "eightMonth" },
+        { label: "9", dataValue: "nineMonth" },
+        { label: "10", dataValue: "tenMonth" },
+        { label: "11", dataValue: "elevenMonth" },
+        { label: "12", dataValue: "twelveMonth" },
+      ],
+    };
+  },
+  created() {
+    this.getDeptList();
+    this.getMonth();
+    this.getList();
+  },
+  methods: {
+    parseAttendanceRule(ruleString) {
+      const days = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
+      const needAttend = ruleString.split(",").map((item) => item === "1");
+      let result = "";
+
+      needAttend.forEach((attend, index) => {
+        if (attend) {
+          if (result !== "") result += "、";
+          result += days[index].replace("周", "");
+        }
+      });
+      return result || "无";
+    },
+
+    formatDate(dateString) {
+      const date = new Date(dateString); // 创建日期对象
+      const year = date.getFullYear(); // 获取年份
+      const month = String(date.getMonth() + 1).padStart(2, "0"); // 获取月份（注意：月份从0开始）
+      const day = String(date.getDate()).padStart(2, "0"); // 获取日期
+      const weekdays = [
+        "星期天",
+        "星期一",
+        "星期二",
+        "星期三",
+        "星期四",
+        "星期五",
+        "星期六",
+      ]; // 星期几数组
+      const weekday = weekdays[date.getDay()]; // 获取星期几
+
+      return `${year}-${month}-${day} ${weekday}`; // 组合成所需格式
+    },
+    getMonth() {
+      // 默认当月
+      var nowDate = new Date();
+      var date = {
+        year: nowDate.getFullYear(),
+        month: nowDate.getMonth() + 1,
+        day: nowDate.getDate(),
+      };
+      const dayDate =
+        date.year + "-" + (date.month >= 10 ? date.month : "0" + date.month);
+      this.$set(this.queryParams, "month", [dayDate, dayDate]);
+    },
+    getDeptList() {
+      listDeptTree().then((response) => {
+        this.deptOptions = this.handleTree(response.data, "id");
+      });
+    },
+    /** 转换部门数据结构 */
+    normalizer(node) {
+      if (node.children && !node.children.length) {
+        delete node.children;
+      }
+      return {
+        id: node.id,
+        label: node.orgName,
+        children: node.children,
+      };
+    },
+    handleSelect(value, instanceId) {
+      console.log("Selected:", value);
+      // 在这里处理选择事件
+      this.queryParams.orgName = value.orgName;
+    },
+    /** 查询字典类型列表 */
+    getList() {
+      this.loading = true;
+      console.log(this.queryParams);
+      let query = _.cloneDeep(this.queryParams);
+      query.startMonth = query.month[0];
+      query.endMonth = query.month[1];
+      delete query["month"];
+
+      if (query.orgIdList && query.orgIdList.length > 0) {
+        query.orgIds = query.orgIdList.map((id) => id.toString());
+      } else {
+        query.orgIds = undefined;
+      }
+      delete query["orgIdList"];
+
+      console.log(query);
+      getMonthAttReport(query).then((response) => {
+        this.typeList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.getMonth();
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    //打开月异常详情页面
+    openRecord(row, titleBoss) {
+      this.id = row.id;
+      this.title = titleBoss;
+      this.queryRecord.userId = row.userId;
+      this.queryRecord.attCurrentMonth = row.attCurrentMonth;
+      this.attCurrentMonth = row.attCurrentMonth;
+      if (titleBoss == "正常打卡天数") {
+        this.queryRecord.attStatis = 1;
+      } else if (titleBoss == "迟到记录") {
+        this.queryRecord.attStatis = 2;
+      } else if (titleBoss == "早退记录") {
+        this.queryRecord.attStatis = 4;
+      } else if (titleBoss == "旷工记录") {
+        this.queryRecord.attStatis = 3;
+      } else if (titleBoss == "打卡地异常记录") {
+        this.queryRecord.attStatis = 9;
+      } else if (titleBoss == "出入异常记录") {
+        this.queryRecord.attStatis = 8;
+      } else if (titleBoss == "请假记录") {
+        this.queryRecord.attStatis = 6;
+      } else if (titleBoss == "轮休记录") {
+        this.queryRecord.attStatis = 5;
+      } else if (titleBoss == "临时外出记录") {
+        this.queryRecord.attStatis = 7;
+      } else if (titleBoss == "出差天数") {
+        this.queryRecord.attStatis = 10;
+      } else if (titleBoss == "外勤记录") {
+        this.queryRecord.attStatis = 26;
+      } else if (titleBoss == "培训记录") {
+        this.queryRecord.attStatis = 28;
+      }
+      this.showRecord = true;
+      this.getListRecord();
+    },
+    disabledDate(time) {
+      const str = this.attCurrentMonth + "-01";
+      // 获取当前日期
+      var currentDate = new Date(str);
+      // 获取当前月份的第一天
+      var firstDayOfMonth = new Date(
+        currentDate.getFullYear(),
+        currentDate.getMonth(),
+        1
+      );
+      // 获取当前月份的最后一天
+      var lastDayOfMonth = new Date(
+        currentDate.getFullYear(),
+        currentDate.getMonth() + 1,
+        0
+      );
+      return time < firstDayOfMonth || time > lastDayOfMonth;
+    },
+    /** 查询月异常详情列表 */
+    getListRecord() {
+      getDetail(this.addDateRange(this.queryRecord, this.dateRange)).then(
+        (response) => {
+          this.tableDataRecord = response.rows;
+          this.totalTwo = response.total;
+        }
+      );
+    },
+
+    /** 搜索按钮操作 */
+    handleQueryRecord() {
+      this.queryRecord.pageNum = 1;
+      this.getListRecord();
+    },
+
+    cancelRecord() {
+      this.showRecord = false;
+      this.resetRecord();
+    },
+    /** 重置按钮操作 */
+    resetRecord() {
+      // this.resetForm("queryFormRecord");
+      this.handleQueryRecord();
+    },
+
+    /** 导出按钮操作 */
+    handleExport() {
+      let query = _.cloneDeep(this.queryParams);
+      query.startMonth = query.month[0];
+      query.endMonth = query.month[1];
+      delete query["month"];
+
+      if (query.orgIdList && query.orgIdList.length > 0) {
+        query.orgIds = query.orgIdList.map((id) => id.toString());
+      } else {
+        query.orgIds = undefined;
+      }
+      delete query["orgIdList"];
+
+      console.log(query);
+      exportMonthReport(query).then((res) => {
+        this.downloadFile({
+          fileName: `月报表记录_${new Date().getTime()}.xlsx`,
+          fileData: res,
+          fileType: "application/vnd.ms-excel;charset=utf-8",
+        });
+      });
+    },
+
+    /** 更新应该出勤天数按钮操作 */
+    handleDays() {
+      // 显示加载中提示
+      this.$modal.loading("加载中...");
+      let query = _.cloneDeep(this.queryParams);
+      let month = query.month[0];
+      query.attCurrentMonth = month;
+      getDays(query)
+        .then((response) => {
+          this.$modal.msgSuccess("更新成功");
+        })
+        .finally(() => {
+          // 不管请求成功或失败，最终都会关闭加载提示
+          this.$modal.closeLoading();
+        });
+    },
+
+    //打开工作时间外出次数
+    openOutCountList(row) {
+      this.title = "工作时间外出次数";
+      this.queryRecordOutCount.userId = row.userId;
+      this.queryRecordOutCount.attCurrentDay = row.attCurrentDay;
+      this.queryRecordOutCount.attCurrentMonth = row.attCurrentMonth;
+      this.showOutCount = true;
+      this.getOutCountList();
+    },
+
+    /** 查询工作时间外出次数列表 */
+    getOutCountList() {
+      this.loadingTwo = true;
+      getOutCountList(this.queryRecordOutCount).then((response) => {
+        this.tableDataOutCount = response.rows;
+        this.totalTwoOutCount = response.total;
+        this.loadingTwo = false;
+      });
+    },
+
+    openRequiredDaysList(row) {
+      this.title = "应出勤天数组成";
+      this.queryRequiredDays.userId = row.userId;
+      this.queryRequiredDays.attCurrentDay = row.attCurrentDay;
+      this.queryRequiredDays.attCurrentMonth = row.attCurrentMonth;
+      this.showRequiredDays = true;
+      this.getRequiredDaysList();
+    },
+
+    /** 查询应出勤天数组成列表 */
+    getRequiredDaysList() {
+      this.loadingTwoRequiredDays = true;
+      getRequiredDaysList(this.queryRequiredDays).then((response) => {
+        this.tableDataRequiredDays = response.rows;
+        this.totalTwoRequiredDays = response.total;
+        this.loadingTwoRequiredDays = false;
+      });
+    },
+
+    /** 导出按钮操作 */
+    handleExportOutCountList() {
+      exportOutCountList(this.queryRecordOutCount).then((res) => {
+        this.downloadFile({
+          fileName: `工作时间外出次数记录_${new Date().getTime()}.xlsx`,
+          fileData: res,
+          fileType: "application/vnd.ms-excel;charset=utf-8",
+        });
+      });
+    },
+
+    //打开打卡次数记录
+    openAttCountList(row) {
+      this.title = "打卡记录";
+      this.queryAttCount.month = row.attCurrentMonth;
+      this.queryAttCount.userName = row.userName;
+      this.showAttCount = true;
+      this.getClockingRecordListByUserId();
+    },
+
+    /** 查询打卡次数记录列表 */
+    getClockingRecordListByUserId() {
+      this.loadingAttCount = true;
+      getClockingRecordListByUserId(this.queryAttCount).then((response) => {
+        this.tableDataAttCount = response.rows;
+        this.totalAttCount = response.total;
+        this.loadingAttCount = false;
+      });
+    },
+
+    // 查看年数据
+    onHandleYearData() {
+      this.getYearDataList();
+      this.showYearDataVisible = true;
+    },
+
+    // 获取年数据
+    getYearDataList() {
+      getYearDataListAPI(this.queryYearDataParams).then((response) => {
+        this.tableDataYearData = response.rows;
+        this.totalYearData = response.total;
+      });
+    },
+
+    // 重置年数据查询
+    resetQueryYearData() {
+      this.queryYearDataParams.year = String(new Date().getFullYear());
+      this.getYearDataList();
+    },
+    // 打开月数据
+    openYearDataDetail(row, dataValue) {
+      console.log(row, dataValue);
+
+      this.queryParams.month = [
+        `${this.queryYearDataParams.year}-${
+          dataValue > 9 ? dataValue : "0" + dataValue
+        }`,
+        `${this.queryYearDataParams.year}-${
+          dataValue > 9 ? dataValue : "0" + dataValue
+        }`,
+      ];
+
+      this.queryParams.userName = row.userName;
+      // this.queryParams.orgIdList = [250];
+      this.queryParams.orgName = row.orgName;
+      this.handleQuery();
+      this.showYearDataVisible = false;
+    },
+
+    handleExportYearDataList() {
+      exportYearDataListAPI(this.queryYearDataParams).then((res) => {
+        this.downloadFile({
+          fileName: `年报表记录_${new Date().getTime()}.xlsx`,
+          fileData: res,
+          fileType: "application/vnd.ms-excel;charset=utf-8",
+        });
+      });
+    },
+  },
+};
+</script>
diff --git a/src/views/report/monthReport/index.vue b/src/views/report/monthReport/index.vue
index d7f3ab7..0e690aa 100644
--- a/src/views/report/monthReport/index.vue
+++ b/src/views/report/monthReport/index.vue
@@ -1,95 +1,194 @@
 <template>
   <div class="app-container" id="monthReport">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      size="small"
+      :inline="true"
+      v-show="showSearch"
+      label-width="68px"
+    >
       <el-form-item label="选择月份">
-        <el-date-picker v-model="queryParams.month" type="monthrange" range-separator="至" start-placeholder="开始月份"
-          end-placeholder="结束月份" value-format="yyyy-MM" :clearable="false" :editable="false">
+        <el-date-picker
+          v-model="queryParams.month"
+          type="monthrange"
+          range-separator="至"
+          start-placeholder="开始月份"
+          end-placeholder="结束月份"
+          value-format="yyyy-MM"
+          :clearable="false"
+          :editable="false"
+        >
         </el-date-picker>
       </el-form-item>
       <el-form-item label="部门" prop="orgIdList">
-        <treeselect v-model="queryParams.orgIdList" :options="deptOptions" :normalizer="normalizer" multiple placeholder="选择部门" style="width: 240px"/>
+        <treeselect
+          v-model="queryParams.orgIdList"
+          :options="deptOptions"
+          :normalizer="normalizer"
+          multiple
+          placeholder="选择部门"
+          style="width: 240px"
+        />
       </el-form-item>
       <el-form-item label="姓名" prop="userName">
-        <el-input v-model="queryParams.userName" placeholder="请输入姓名" clearable style="width: 240px"
-          @keyup.enter.native="handleQuery" />
+        <el-input
+          v-model="queryParams.userName"
+          placeholder="请输入姓名"
+          clearable
+          style="width: 240px"
+          @keyup.enter.native="handleQuery"
+        />
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          size="mini"
+          @click="handleQuery"
+          >搜索</el-button
+        >
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+          >重置</el-button
+        >
       </el-form-item>
     </el-form>
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
-          v-hasPermi="['att:attMonthReport:export']">导出
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          v-hasPermi="['att:attMonthReport:export']"
+          >导出
         </el-button>
       </el-col>
 
       <el-col :span="1.5">
-        <el-button type="warning" plain icon="el-icon-search" size="mini" @click="handleDays"
-                   v-hasPermi="['system:user:admin']">更新应出勤天数
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-search"
+          size="mini"
+          @click="handleDays"
+          v-hasPermi="['system:user:admin']"
+          >更新应出勤天数
+        </el-button>
+
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-date"
+          size="mini"
+          @click="onHandleYearData"
+          >年数据
         </el-button>
       </el-col>
 
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+      <right-toolbar
+        :showSearch.sync="showSearch"
+        @queryTable="getList"
+      ></right-toolbar>
     </el-row>
 
     <el-table v-loading="loading" :data="typeList">
       <!-- <el-table-column type="selection" width="55" align="center" /> -->
       <el-table-column label="序号" align="center" width="80" type="index">
         <template slot-scope="scope">
-          <span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
+          <span>{{
+            (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1
+          }}</span>
         </template>
       </el-table-column>
       <el-table-column label="姓名" align="center" prop="userName" />
       <el-table-column label="所属部门" align="center" prop="orgName" />
       <el-table-column label="考勤月份" align="center" prop="attCurrentMonth" />
-      <el-table-column label="应出勤天数" align="center" prop="requiredDays" >
+      <el-table-column label="是否全勤" align="center" prop="isFullAtt">
         <template slot-scope="scope">
-          <div @click="openRequiredDaysList(scope.row)" style="color: #02a7f0; cursor: pointer">
+          <el-tag size="mini" v-if="scope.row.isFullAtt == 1" type="success">
+            是
+          </el-tag>
+          <el-tag size="mini" v-else type="danger">否</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="应出勤天数" align="center" prop="requiredDays">
+        <template slot-scope="scope">
+          <div
+            @click="openRequiredDaysList(scope.row)"
+            style="color: #02a7f0; cursor: pointer"
+          >
             {{ scope.row.requiredDays }}
           </div>
         </template>
       </el-table-column>
 
-      <el-table-column label="工作时间外出次数" align="center" prop="normalNum" width="180">
+      <el-table-column
+        label="工作时间外出次数"
+        align="center"
+        prop="normalNum"
+        width="180"
+      >
         <template slot-scope="scope">
-          <div @click="openOutCountList(scope.row)" style="color: #02a7f0; cursor: pointer">
+          <div
+            @click="openOutCountList(scope.row)"
+            style="color: #02a7f0; cursor: pointer"
+          >
             {{ scope.row.outCount }}
           </div>
         </template>
       </el-table-column>
       <el-table-column label="正常打卡天数" align="center" prop="normalNum">
         <template slot-scope="scope">
-          <div @click="openRecord(scope.row, title1)" style="color: #02a7f0; cursor: pointer">
+          <div
+            @click="openRecord(scope.row, title1)"
+            style="color: #02a7f0; cursor: pointer"
+          >
             {{ scope.row.normalNum }}
           </div>
         </template>
       </el-table-column>
       <el-table-column label="迟到天数" align="center" prop="lateNum">
         <template slot-scope="scope">
-          <div @click="openRecord(scope.row, title2)" style="color: #02a7f0; cursor: pointer">
+          <div
+            @click="openRecord(scope.row, title2)"
+            style="color: #02a7f0; cursor: pointer"
+          >
             {{ scope.row.lateNum }}
           </div>
         </template>
       </el-table-column>
       <el-table-column label="早退天数" align="center" prop="earlyNum">
         <template slot-scope="scope">
-          <div @click="openRecord(scope.row, title3)" style="color: #02a7f0; cursor: pointer">
+          <div
+            @click="openRecord(scope.row, title3)"
+            style="color: #02a7f0; cursor: pointer"
+          >
             {{ scope.row.earlyNum }}
           </div>
         </template>
       </el-table-column>
       <el-table-column label="旷工天数" align="center" prop="skippingNum">
         <template slot-scope="scope">
-          <div @click="openRecord(scope.row, title4)" style="color: #02a7f0; cursor: pointer">
+          <div
+            @click="openRecord(scope.row, title4)"
+            style="color: #02a7f0; cursor: pointer"
+          >
             {{ scope.row.skippingNum }}
           </div>
         </template>
       </el-table-column>
-      <el-table-column label="打卡地异常天数" align="center" prop="addressErrorNum">
+      <el-table-column
+        label="打卡地异常天数"
+        align="center"
+        prop="addressErrorNum"
+      >
         <template slot-scope="scope">
-          <div @click="openRecord(scope.row, title5)" style="color: #02a7f0; cursor: pointer">
+          <div
+            @click="openRecord(scope.row, title5)"
+            style="color: #02a7f0; cursor: pointer"
+          >
             {{ scope.row.addressErrorNum }}
           </div>
         </template>
@@ -104,21 +203,30 @@
       </el-table-column>-->
       <el-table-column label="请假天数" align="center" prop="leaveNum">
         <template slot-scope="scope">
-          <div @click="openRecord(scope.row, title7)" style="color: #02a7f0; cursor: pointer">
+          <div
+            @click="openRecord(scope.row, title7)"
+            style="color: #02a7f0; cursor: pointer"
+          >
             {{ scope.row.leaveNum }}
           </div>
         </template>
       </el-table-column>
       <el-table-column label="轮休天数" align="center" prop="restNum">
         <template slot-scope="scope">
-          <div @click="openRecord(scope.row, title8)" style="color: #02a7f0; cursor: pointer">
+          <div
+            @click="openRecord(scope.row, title8)"
+            style="color: #02a7f0; cursor: pointer"
+          >
             {{ scope.row.restNum }}
           </div>
         </template>
       </el-table-column>
       <el-table-column label="临时外出天数" align="center" prop="outNum">
         <template slot-scope="scope">
-          <div @click="openRecord(scope.row, title9)" style="color: #02a7f0; cursor: pointer">
+          <div
+            @click="openRecord(scope.row, title9)"
+            style="color: #02a7f0; cursor: pointer"
+          >
             {{ scope.row.outNum }}
           </div>
         </template>
@@ -126,7 +234,10 @@
 
       <el-table-column label="培训天数" align="center" prop="trainNum">
         <template slot-scope="scope">
-          <div @click="openRecord(scope.row, title13)" style="color: #02a7f0; cursor: pointer">
+          <div
+            @click="openRecord(scope.row, title13)"
+            style="color: #02a7f0; cursor: pointer"
+          >
             {{ scope.row.trainNum }}
           </div>
         </template>
@@ -134,7 +245,10 @@
 
       <el-table-column label="出差天数" align="center" prop="outNum">
         <template slot-scope="scope">
-          <div @click="openRecord(scope.row, title10)" style="color: #02a7f0; cursor: pointer">
+          <div
+            @click="openRecord(scope.row, title10)"
+            style="color: #02a7f0; cursor: pointer"
+          >
             {{ scope.row.businessTripNum }}
           </div>
         </template>
@@ -142,7 +256,10 @@
 
       <el-table-column label="打卡记录" align="center" prop="clockingRecordNum">
         <template slot-scope="scope">
-          <div @click="openAttCountList(scope.row)" style="color: #02a7f0; cursor: pointer">
+          <div
+            @click="openAttCountList(scope.row)"
+            style="color: #02a7f0; cursor: pointer"
+          >
             {{ scope.row.clockingRecordNum }}
           </div>
         </template>
@@ -150,171 +267,531 @@
 
       <el-table-column label="外勤天数" align="center" prop="outsideAttNum">
         <template slot-scope="scope">
-          <div @click="openRecord(scope.row,title12)" style="color: #02a7f0; cursor: pointer" >
+          <div
+            @click="openRecord(scope.row, title12)"
+            style="color: #02a7f0; cursor: pointer"
+          >
             {{ scope.row.outsideAttNum }}
           </div>
         </template>
       </el-table-column>
-
     </el-table>
 
-    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
-      @pagination="getList" />
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
 
     <!-- 相关记录 -->
-    <el-dialog :title="title" :visible.sync="showRecord" width="1300px" height="1000px" append-to-body
-      @close="cancelRecord">
-      <el-form :model="queryRecord" ref="queryFormRecord" size="small" :inline="true" v-show="showSearch"
-        label-width="110px">
+    <el-dialog
+      :title="title"
+      :visible.sync="showRecord"
+      width="1300px"
+      height="1000px"
+      append-to-body
+      @close="cancelRecord"
+    >
+      <el-form
+        :model="queryRecord"
+        ref="queryFormRecord"
+        size="small"
+        :inline="true"
+        v-show="showSearch"
+        label-width="110px"
+      >
         <el-form-item label="选择考勤时间段">
-          <el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
-            range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
-            :picker-options="pickerOptions"></el-date-picker>
+          <el-date-picker
+            v-model="dateRange"
+            style="width: 240px"
+            value-format="yyyy-MM-dd"
+            type="daterange"
+            range-separator="-"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            :picker-options="pickerOptions"
+          ></el-date-picker>
         </el-form-item>
         <el-form-item>
-          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQueryRecord">查询</el-button>
-<!--          <el-button icon="el-icon-refresh" size="mini" @click="resetRecord">重置</el-button>-->
+          <el-button
+            type="primary"
+            icon="el-icon-search"
+            size="mini"
+            @click="handleQueryRecord"
+            >查询</el-button
+          >
+          <!--          <el-button icon="el-icon-refresh" size="mini" @click="resetRecord">重置</el-button>-->
         </el-form-item>
       </el-form>
 
-      <el-table :data="tableDataRecord" width="900px" height="600px" row-key="id">
+      <el-table
+        :data="tableDataRecord"
+        width="900px"
+        height="600px"
+        row-key="id"
+      >
         <el-table-column label="序号" align="center" width="80" type="index">
           <template slot-scope="scope">
-            <span>{{ (queryRecord.pageNum - 1) * queryRecord.pageSize + scope.$index + 1 }}</span>
+            <span>{{
+              (queryRecord.pageNum - 1) * queryRecord.pageSize +
+              scope.$index +
+              1
+            }}</span>
           </template>
         </el-table-column>
         <el-table-column label="id" align="center" prop="id" v-if="false" />
-        <el-table-column label="姓名" align="center" prop="name" width="80" sortable />
-        <el-table-column label="所属部门" align="center" prop="orgName" width="150" sortable />
-        <el-table-column label="考勤日期" align="center" prop="attCurrent" width="150" sortable>\
+        <el-table-column
+          label="姓名"
+          align="center"
+          prop="name"
+          width="80"
+          sortable
+        />
+        <el-table-column
+          label="所属部门"
+          align="center"
+          prop="orgName"
+          width="150"
+          sortable
+        />
+        <el-table-column
+          label="考勤日期"
+          align="center"
+          prop="attCurrent"
+          width="150"
+          sortable
+          >\
           <template slot-scope="scope">
             <span>{{ formatDate(scope.row.attCurrent) }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="上班打卡时间" align="center" prop="goWorkTime" width="180" sortable />
-        <el-table-column label="上班状态" align="center" prop="goWorkStatus" width="100" sortable>
+        <el-table-column
+          label="上班打卡时间"
+          align="center"
+          prop="goWorkTime"
+          width="180"
+          sortable
+        />
+        <el-table-column
+          label="上班状态"
+          align="center"
+          prop="goWorkStatus"
+          width="100"
+          sortable
+        >
           <template slot-scope="scope">
-            <dict-tag :options="dict.type.att_status" :value="scope.row.goWorkStatus" />
+            <dict-tag
+              :options="dict.type.att_status"
+              :value="scope.row.goWorkStatus"
+            />
           </template>
         </el-table-column>
-        <el-table-column label="上班打卡地址" align="center" prop="goWorkAddress" sortable width="180" />
-        <el-table-column label="下班打卡时间" align="center" prop="offWorkTime" width="180" ortable />
-        <el-table-column label="下班状态" align="center" prop="offWorkStatus" width="100" sortable>
+        <el-table-column
+          label="上班打卡地址"
+          align="center"
+          prop="goWorkAddress"
+          sortable
+          width="180"
+        />
+        <el-table-column
+          label="下班打卡时间"
+          align="center"
+          prop="offWorkTime"
+          width="180"
+          ortable
+        />
+        <el-table-column
+          label="下班状态"
+          align="center"
+          prop="offWorkStatus"
+          width="100"
+          sortable
+        >
           <template slot-scope="scope">
-            <dict-tag :options="dict.type.att_status" :value="scope.row.offWorkStatus" />
+            <dict-tag
+              :options="dict.type.att_status"
+              :value="scope.row.offWorkStatus"
+            />
           </template>
         </el-table-column>
-        <el-table-column label="下班打卡地址" align="center" prop="offWorkAddress" width="180" sortable />
+        <el-table-column
+          label="下班打卡地址"
+          align="center"
+          prop="offWorkAddress"
+          width="180"
+          sortable
+        />
       </el-table>
 
-      <pagination v-show="totalTwo > 0" :total="totalTwo" :page.sync="queryRecord.pageNum"
-        :limit.sync="queryRecord.pageSize" @pagination="getListRecord" />
-
+      <pagination
+        v-show="totalTwo > 0"
+        :total="totalTwo"
+        :page.sync="queryRecord.pageNum"
+        :limit.sync="queryRecord.pageSize"
+        @pagination="getListRecord"
+      />
     </el-dialog>
 
-
     <!-- 外出次数查询 -->
-    <el-dialog :title="title" :visible.sync="showOutCount" width="1200px" height="1000px" append-to-body>
-      <el-form :model="queryRecordOutCount" ref="queryFormRecord" size="small" :inline="true" v-show="showSearch"
-        label-width="110px">
+    <el-dialog
+      :title="title"
+      :visible.sync="showOutCount"
+      width="1200px"
+      height="1000px"
+      append-to-body
+    >
+      <el-form
+        :model="queryRecordOutCount"
+        ref="queryFormRecord"
+        size="small"
+        :inline="true"
+        v-show="showSearch"
+        label-width="110px"
+      >
         <el-form-item>
-          <el-button type="warning" icon="el-icon-download" size="mini" @click="handleExportOutCountList">导出</el-button>
+          <el-button
+            type="warning"
+            icon="el-icon-download"
+            size="mini"
+            @click="handleExportOutCountList"
+            >导出</el-button
+          >
         </el-form-item>
       </el-form>
 
-      <el-table v-loading="loadingTwo" :data="tableDataOutCount" width="900px" height="600px" row-key="id">
+      <el-table
+        v-loading="loadingTwo"
+        :data="tableDataOutCount"
+        width="900px"
+        height="600px"
+        row-key="id"
+      >
         <el-table-column label="序号" align="center" width="80" type="index">
           <template slot-scope="scope">
-            <span>{{ (queryRecordOutCount.pageNum - 1) * queryRecordOutCount.pageSize + scope.$index + 1 }}</span>
+            <span>{{
+              (queryRecordOutCount.pageNum - 1) * queryRecordOutCount.pageSize +
+              scope.$index +
+              1
+            }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="考勤日期" align="center" prop="attCurrentDay" width="180" :show-overflow-tooltip="true">
+        <el-table-column
+          label="考勤日期"
+          align="center"
+          prop="attCurrentDay"
+          width="180"
+          :show-overflow-tooltip="true"
+        >
           <template slot-scope="scope">
             <span>{{ formatDate(scope.row.attCurrentDay) }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="打卡时间" align="center" prop="attCurrentTime" width="140" sortable />
-        <el-table-column label="打卡地址" align="center" prop="attAddress" sortable />
+        <el-table-column
+          label="打卡时间"
+          align="center"
+          prop="attCurrentTime"
+          width="140"
+          sortable
+        />
+        <el-table-column
+          label="打卡地址"
+          align="center"
+          prop="attAddress"
+          sortable
+        />
       </el-table>
 
-      <pagination v-show="totalTwoOutCount > 0" :total="totalTwoOutCount" :page.sync="queryRecord.pageNum"
-        :limit.sync="queryRecord.pageSize" @pagination="getOutCountList" />
+      <pagination
+        v-show="totalTwoOutCount > 0"
+        :total="totalTwoOutCount"
+        :page.sync="queryRecord.pageNum"
+        :limit.sync="queryRecord.pageSize"
+        @pagination="getOutCountList"
+      />
     </el-dialog>
 
-
     <!-- 打卡次数记录 -->
-    <el-dialog :title="title" :visible.sync="showAttCount" width="1200px" height="1000px" append-to-body>
-      <el-form :model="queryAttCount" ref="queryFormRecordAtt" size="small" :inline="true" v-show="showSearch"
-               label-width="110px">
-        <el-form-item>
-        </el-form-item>
+    <el-dialog
+      :title="title"
+      :visible.sync="showAttCount"
+      width="1200px"
+      height="1000px"
+      append-to-body
+    >
+      <el-form
+        :model="queryAttCount"
+        ref="queryFormRecordAtt"
+        size="small"
+        :inline="true"
+        v-show="showSearch"
+        label-width="110px"
+      >
+        <el-form-item> </el-form-item>
       </el-form>
 
-      <el-table v-loading="loadingAttCount" :data="tableDataAttCount" width="900px" height="600px" row-key="id">
+      <el-table
+        v-loading="loadingAttCount"
+        :data="tableDataAttCount"
+        width="900px"
+        height="600px"
+        row-key="id"
+      >
         <el-table-column label="序号" align="center" width="80" type="index">
           <template slot-scope="scope">
-            <span>{{ (queryAttCount.pageNum - 1) * queryAttCount.pageSize + scope.$index + 1 }}</span>
+            <span>{{
+              (queryAttCount.pageNum - 1) * queryAttCount.pageSize +
+              scope.$index +
+              1
+            }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="考勤日期" align="center" prop="attCurrentDay" :show-overflow-tooltip="true">
+        <el-table-column
+          label="考勤日期"
+          align="center"
+          prop="attCurrentDay"
+          :show-overflow-tooltip="true"
+        >
           <template slot-scope="scope">
             <span>{{ formatDate(scope.row.attCurrentDay) }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="考勤时间" align="center" prop="attCurrentTime" sortable :show-overflow-tooltip="true" />
-        <el-table-column label="打卡地址" align="center" prop="attAddress" sortable :show-overflow-tooltip="true" />
-        <el-table-column label="备注" align="center" prop="remark" sortable :show-overflow-tooltip="true" />
+        <el-table-column
+          label="考勤时间"
+          align="center"
+          prop="attCurrentTime"
+          sortable
+          :show-overflow-tooltip="true"
+        />
+        <el-table-column
+          label="打卡地址"
+          align="center"
+          prop="attAddress"
+          sortable
+          :show-overflow-tooltip="true"
+        />
+        <el-table-column
+          label="备注"
+          align="center"
+          prop="remark"
+          sortable
+          :show-overflow-tooltip="true"
+        />
       </el-table>
 
-      <pagination v-show="totalAttCount > 0" :total="totalAttCount" :page.sync="queryAttCount.pageNum"
-                  :limit.sync="queryAttCount.pageSize" @pagination="getClockingRecordListByUserId" />
+      <pagination
+        v-show="totalAttCount > 0"
+        :total="totalAttCount"
+        :page.sync="queryAttCount.pageNum"
+        :limit.sync="queryAttCount.pageSize"
+        @pagination="getClockingRecordListByUserId"
+      />
     </el-dialog>
 
-
     <!-- 应出勤天数组成 -->
-    <el-dialog :title="title" :visible.sync="showRequiredDays" width="1200px" height="1000px" append-to-body>
-      <el-form :model="queryRequiredDays" ref="queryFormRecord" size="small" :inline="true" v-show="showSearch"
-               label-width="110px">
+    <el-dialog
+      :title="title"
+      :visible.sync="showRequiredDays"
+      width="1200px"
+      height="1000px"
+      append-to-body
+    >
+      <el-form
+        :model="queryRequiredDays"
+        ref="queryFormRecord"
+        size="small"
+        :inline="true"
+        v-show="showSearch"
+        label-width="110px"
+      >
       </el-form>
 
-      <el-table v-loading="loadingTwoRequiredDays" :data="tableDataRequiredDays" width="900px" height="600px" row-key="id">
+      <el-table
+        v-loading="loadingTwoRequiredDays"
+        :data="tableDataRequiredDays"
+        width="900px"
+        height="600px"
+        row-key="id"
+      >
         <el-table-column label="序号" align="center" width="80" type="index">
           <template slot-scope="scope">
-            <span>{{ (queryRequiredDays.pageNum - 1) * queryRequiredDays.pageSize + scope.$index + 1 }}</span>
+            <span>{{
+              (queryRequiredDays.pageNum - 1) * queryRequiredDays.pageSize +
+              scope.$index +
+              1
+            }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="月份" align="center" prop="attCurrentMonth" sortable />
-        <el-table-column label="应出勤天数" align="center" prop="attDays" sortable />
-        <el-table-column label="所属考勤组" align="center" prop="groupName" sortable />
-        <el-table-column label="考勤规则" align="center" prop="attCurrentDay" width="180" :show-overflow-tooltip="true">
+        <el-table-column
+          label="月份"
+          align="center"
+          prop="attCurrentMonth"
+          sortable
+        />
+        <el-table-column
+          label="应出勤天数"
+          align="center"
+          prop="attDays"
+          sortable
+        />
+        <el-table-column
+          label="所属考勤组"
+          align="center"
+          prop="groupName"
+          sortable
+        />
+        <el-table-column
+          label="考勤规则"
+          align="center"
+          prop="attCurrentDay"
+          width="180"
+          :show-overflow-tooltip="true"
+        >
           <template slot-scope="scope">
             <span>{{ parseAttendanceRule(scope.row.attRules) }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="节假日" align="center" prop="isHaveHoliday" width="180" :show-overflow-tooltip="true" />
-        <el-table-column label="应出勤开始时间" align="center" prop="attStartDate" sortable :show-overflow-tooltip="true" />
-        <el-table-column label="应出勤结束时间" align="center" prop="attEndDate" sortable :show-overflow-tooltip="true" />
+        <el-table-column
+          label="节假日"
+          align="center"
+          prop="isHaveHoliday"
+          width="180"
+          :show-overflow-tooltip="true"
+        />
+        <el-table-column
+          label="应出勤开始时间"
+          align="center"
+          prop="attStartDate"
+          sortable
+          :show-overflow-tooltip="true"
+        />
+        <el-table-column
+          label="应出勤结束时间"
+          align="center"
+          prop="attEndDate"
+          sortable
+          :show-overflow-tooltip="true"
+        />
       </el-table>
 
-      <pagination v-show="totalTwoRequiredDays > 0" :total="totalTwoRequiredDays" :page.sync="queryRequiredDays.pageNum"
-                  :limit.sync="queryRequiredDays.pageSize" @pagination="getRequiredDaysList" />
+      <pagination
+        v-show="totalTwoRequiredDays > 0"
+        :total="totalTwoRequiredDays"
+        :page.sync="queryRequiredDays.pageNum"
+        :limit.sync="queryRequiredDays.pageSize"
+        @pagination="getRequiredDaysList"
+      />
     </el-dialog>
 
+    <!-- 年数据 -->
+    <el-dialog
+      title="年数据列表"
+      :visible.sync="showYearDataVisible"
+      width="85%"
+      height="80%"
+      append-to-body
+    >
+      <el-form :inline="true">
+        <el-form-item label="年份">
+          <el-date-picker
+            type="year"
+            style="width: 240px"
+            value-format="yyyy"
+            placeholder="选择年份"
+            v-model="queryYearDataParams.year"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button
+            type="primary"
+            icon="el-icon-search"
+            size="mini"
+            @click="getYearDataList"
+          >
+            查询
+          </el-button>
+          <el-button
+            icon="el-icon-refresh"
+            size="mini"
+            @click="resetQueryYearData"
+          >
+            重置
+          </el-button>
+
+          <el-button
+            type="warning"
+            icon="el-icon-download"
+            size="mini"
+            @click="handleExportYearDataList"
+          >
+            导出
+          </el-button>
+        </el-form-item>
+      </el-form>
+      <el-table :data="tableDataYearData" border>
+        <el-table-column align="center" label="用户名" prop="userName" />
+        <el-table-column
+          align="center"
+          width="170"
+          label="部门"
+          prop="orgName"
+          :show-overflow-tooltip="true"
+        />
+
+        <el-table-column
+          :label="item.label + '月'"
+          v-for="item in monthColList"
+          :key="item.dataValue"
+          align="center"
+        >
+          <template slot-scope="scope">
+            <span
+              style="cursor: pointer"
+              :style="{
+                color: scope.row[item.dataValue] == 1 ? '#409eff' : '#f56c6c',
+              }"
+              @click="openYearDataDetail(scope.row, item.label)"
+            >
+              {{ scope.row[item.dataValue] == 1 ? "正常" : "异常" }}
+            </span>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination
+        v-show="totalYearData > 0"
+        :total="totalYearData"
+        :page.sync="queryYearDataParams.pageNum"
+        :limit.sync="queryYearDataParams.pageSize"
+        @pagination="getYearDataList"
+      />
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import { getDetail,getDays } from "@/api/report/monthlyError";
-import { getMonthAttReport, exportMonthReport , getClockingRecordListByUserId,getRequiredDaysList} from "@/api/report/monthReport";
+import { getDetail, getDays } from "@/api/report/monthlyError";
+import {
+  getMonthAttReport,
+  exportMonthReport,
+  getClockingRecordListByUserId,
+  getRequiredDaysList,
+  getYearDataListAPI,
+} from "@/api/report/monthReport";
 import { listDeptTree } from "@/api/system/userInfo";
 import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
-import { getOutCountList, exportOutCountList } from '@/api/report/attReport'
+import {
+  getOutCountList,
+  exportOutCountList,
+  exportYearDataListAPI,
+} from "@/api/report/attReport";
 
 var monstr = "";
 export default {
   name: "MonthReport",
-  dicts: ['att_status'],
+  dicts: ["att_status"],
   components: { Treeselect },
   data() {
     return {
@@ -360,7 +837,7 @@ export default {
         pageSize: 10,
         userId: undefined,
         attStatis: undefined,
-        attCurrentMonth: undefined
+        attCurrentMonth: undefined,
       },
       tableDataRecord: [],
       totalTwo: 0,
@@ -395,7 +872,6 @@ export default {
       loadingTwo: false,
       tableDataOutCount: [],
 
-
       queryAttCount: {
         pageNum: 1,
         pageSize: 10,
@@ -414,7 +890,7 @@ export default {
         userId: undefined,
         attCurrentDay: undefined,
         userName: undefined,
-        attCurrentMonth: undefined
+        attCurrentMonth: undefined,
       },
       showRequiredDays: false,
       totalTwoRequiredDays: 0,
@@ -422,7 +898,30 @@ export default {
       loadingTwoRequiredDays: false,
       tableDataRequiredDays: [],
 
+      showYearDataVisible: false,
+      queryYearDataParams: {
+        pageNum: 1,
+        pageSize: 10,
+        year: String(new Date().getFullYear()), // 当前年份
+      },
+      tableDataYearData: [],
+      totalYearData: 0,
 
+      // 月份初始化列表
+      monthColList: [
+        { label: "1", dataValue: "oneMonth" },
+        { label: "2", dataValue: "twoMonth" },
+        { label: "3", dataValue: "threeMonth" },
+        { label: "4", dataValue: "fourMonth" },
+        { label: "5", dataValue: "fiveMonth" },
+        { label: "6", dataValue: "sixMonth" },
+        { label: "7", dataValue: "sevenMonth" },
+        { label: "8", dataValue: "eightMonth" },
+        { label: "9", dataValue: "nineMonth" },
+        { label: "10", dataValue: "tenMonth" },
+        { label: "11", dataValue: "elevenMonth" },
+        { label: "12", dataValue: "twelveMonth" },
+      ],
     };
   },
   created() {
@@ -431,27 +930,34 @@ export default {
     this.getList();
   },
   methods: {
-
     parseAttendanceRule(ruleString) {
-      const days = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
-      const needAttend = ruleString.split(',').map(item => item === '1');
-      let result = '';
+      const days = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
+      const needAttend = ruleString.split(",").map((item) => item === "1");
+      let result = "";
 
       needAttend.forEach((attend, index) => {
         if (attend) {
-          if (result !== '') result += '、';
-          result += days[index].replace('周', '');
+          if (result !== "") result += "、";
+          result += days[index].replace("周", "");
         }
       });
-      return result || '无';
+      return result || "无";
     },
 
     formatDate(dateString) {
       const date = new Date(dateString); // 创建日期对象
       const year = date.getFullYear(); // 获取年份
-      const month = String(date.getMonth() + 1).padStart(2, '0'); // 获取月份（注意：月份从0开始）
-      const day = String(date.getDate()).padStart(2, '0'); // 获取日期
-      const weekdays = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']; // 星期几数组
+      const month = String(date.getMonth() + 1).padStart(2, "0"); // 获取月份（注意：月份从0开始）
+      const day = String(date.getDate()).padStart(2, "0"); // 获取日期
+      const weekdays = [
+        "星期天",
+        "星期一",
+        "星期二",
+        "星期三",
+        "星期四",
+        "星期五",
+        "星期六",
+      ]; // 星期几数组
       const weekday = weekdays[date.getDay()]; // 获取星期几
 
       return `${year}-${month}-${day} ${weekday}`; // 组合成所需格式
@@ -462,13 +968,14 @@ export default {
       var date = {
         year: nowDate.getFullYear(),
         month: nowDate.getMonth() + 1,
-        day: nowDate.getDate()
+        day: nowDate.getDate(),
       };
-      const dayDate = date.year + "-" + (date.month >= 10 ? date.month : "0" + date.month);
-      this.$set(this.queryParams, "month", [dayDate,dayDate]);
+      const dayDate =
+        date.year + "-" + (date.month >= 10 ? date.month : "0" + date.month);
+      this.$set(this.queryParams, "month", [dayDate, dayDate]);
     },
     getDeptList() {
-      listDeptTree().then(response => {
+      listDeptTree().then((response) => {
         this.deptOptions = this.handleTree(response.data, "id");
       });
     },
@@ -480,32 +987,32 @@ export default {
       return {
         id: node.id,
         label: node.orgName,
-        children: node.children
+        children: node.children,
       };
     },
     handleSelect(value, instanceId) {
-      console.log('Selected:', value);
+      console.log("Selected:", value);
       // 在这里处理选择事件
       this.queryParams.orgName = value.orgName;
     },
     /** 查询字典类型列表 */
     getList() {
       this.loading = true;
-      console.log(this.queryParams)
+      console.log(this.queryParams);
       let query = _.cloneDeep(this.queryParams);
       query.startMonth = query.month[0];
       query.endMonth = query.month[1];
-      delete query['month'];
+      delete query["month"];
 
       if (query.orgIdList && query.orgIdList.length > 0) {
-        query.orgIds = query.orgIdList.map(id => id.toString());
+        query.orgIds = query.orgIdList.map((id) => id.toString());
       } else {
         query.orgIds = undefined;
       }
-      delete query['orgIdList'];
+      delete query["orgIdList"];
 
-      console.log(query)
-      getMonthAttReport(query).then(response => {
+      console.log(query);
+      getMonthAttReport(query).then((response) => {
         this.typeList = response.rows;
         this.total = response.total;
         this.loading = false;
@@ -518,7 +1025,7 @@ export default {
     },
     /** 重置按钮操作 */
     resetQuery() {
-      this.getMonth()
+      this.getMonth();
       this.resetForm("queryForm");
       this.handleQuery();
     },
@@ -529,50 +1036,60 @@ export default {
       this.queryRecord.userId = row.userId;
       this.queryRecord.attCurrentMonth = row.attCurrentMonth;
       this.attCurrentMonth = row.attCurrentMonth;
-      if (titleBoss == '正常打卡天数') {
+      if (titleBoss == "正常打卡天数") {
         this.queryRecord.attStatis = 1;
-      } else if (titleBoss == '迟到记录') {
+      } else if (titleBoss == "迟到记录") {
         this.queryRecord.attStatis = 2;
-      } else if (titleBoss == '早退记录') {
+      } else if (titleBoss == "早退记录") {
         this.queryRecord.attStatis = 4;
-      } else if (titleBoss == '旷工记录') {
+      } else if (titleBoss == "旷工记录") {
         this.queryRecord.attStatis = 3;
-      } else if (titleBoss == '打卡地异常记录') {
+      } else if (titleBoss == "打卡地异常记录") {
         this.queryRecord.attStatis = 9;
-      } else if (titleBoss == '出入异常记录') {
+      } else if (titleBoss == "出入异常记录") {
         this.queryRecord.attStatis = 8;
-      } else if (titleBoss == '请假记录') {
+      } else if (titleBoss == "请假记录") {
         this.queryRecord.attStatis = 6;
-      } else if (titleBoss == '轮休记录') {
+      } else if (titleBoss == "轮休记录") {
         this.queryRecord.attStatis = 5;
-      } else if (titleBoss == '临时外出记录') {
+      } else if (titleBoss == "临时外出记录") {
         this.queryRecord.attStatis = 7;
-      } else if (titleBoss == '出差天数') {
+      } else if (titleBoss == "出差天数") {
         this.queryRecord.attStatis = 10;
-      } else if(titleBoss == '外勤记录'){
+      } else if (titleBoss == "外勤记录") {
         this.queryRecord.attStatis = 26;
-      } else if(titleBoss == '培训记录'){
+      } else if (titleBoss == "培训记录") {
         this.queryRecord.attStatis = 28;
       }
       this.showRecord = true;
       this.getListRecord();
     },
     disabledDate(time) {
-      const str = this.attCurrentMonth + '-01';
+      const str = this.attCurrentMonth + "-01";
       // 获取当前日期
       var currentDate = new Date(str);
       // 获取当前月份的第一天
-      var firstDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
+      var firstDayOfMonth = new Date(
+        currentDate.getFullYear(),
+        currentDate.getMonth(),
+        1
+      );
       // 获取当前月份的最后一天
-      var lastDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0);
+      var lastDayOfMonth = new Date(
+        currentDate.getFullYear(),
+        currentDate.getMonth() + 1,
+        0
+      );
       return time < firstDayOfMonth || time > lastDayOfMonth;
     },
     /** 查询月异常详情列表 */
     getListRecord() {
-      getDetail(this.addDateRange(this.queryRecord, this.dateRange)).then(response => {
-        this.tableDataRecord = response.rows;
-        this.totalTwo = response.total;
-      });
+      getDetail(this.addDateRange(this.queryRecord, this.dateRange)).then(
+        (response) => {
+          this.tableDataRecord = response.rows;
+          this.totalTwo = response.total;
+        }
+      );
     },
 
     /** 搜索按钮操作 */
@@ -596,26 +1113,25 @@ export default {
       let query = _.cloneDeep(this.queryParams);
       query.startMonth = query.month[0];
       query.endMonth = query.month[1];
-      delete query['month'];
+      delete query["month"];
 
       if (query.orgIdList && query.orgIdList.length > 0) {
-        query.orgIds = query.orgIdList.map(id => id.toString());
+        query.orgIds = query.orgIdList.map((id) => id.toString());
       } else {
         query.orgIds = undefined;
       }
-      delete query['orgIdList'];
+      delete query["orgIdList"];
 
-      console.log(query)
-      exportMonthReport(query).then(res => {
+      console.log(query);
+      exportMonthReport(query).then((res) => {
         this.downloadFile({
           fileName: `月报表记录_${new Date().getTime()}.xlsx`,
           fileData: res,
-          fileType: 'application/vnd.ms-excel;charset=utf-8'
-        })
-      })
+          fileType: "application/vnd.ms-excel;charset=utf-8",
+        });
+      });
     },
 
-
     /** 更新应该出勤天数按钮操作 */
     handleDays() {
       // 显示加载中提示
@@ -623,12 +1139,14 @@ export default {
       let query = _.cloneDeep(this.queryParams);
       let month = query.month[0];
       query.attCurrentMonth = month;
-      getDays(query).then(response => {
-        this.$modal.msgSuccess("更新成功");
-      }).finally(() => {
-        // 不管请求成功或失败，最终都会关闭加载提示
-        this.$modal.closeLoading();
-      });
+      getDays(query)
+        .then((response) => {
+          this.$modal.msgSuccess("更新成功");
+        })
+        .finally(() => {
+          // 不管请求成功或失败，最终都会关闭加载提示
+          this.$modal.closeLoading();
+        });
     },
 
     //打开工作时间外出次数
@@ -644,15 +1162,14 @@ export default {
     /** 查询工作时间外出次数列表 */
     getOutCountList() {
       this.loadingTwo = true;
-      getOutCountList(this.queryRecordOutCount).then(response => {
+      getOutCountList(this.queryRecordOutCount).then((response) => {
         this.tableDataOutCount = response.rows;
         this.totalTwoOutCount = response.total;
         this.loadingTwo = false;
       });
     },
 
-
-    openRequiredDaysList(row){
+    openRequiredDaysList(row) {
       this.title = "应出勤天数组成";
       this.queryRequiredDays.userId = row.userId;
       this.queryRequiredDays.attCurrentDay = row.attCurrentDay;
@@ -664,7 +1181,7 @@ export default {
     /** 查询应出勤天数组成列表 */
     getRequiredDaysList() {
       this.loadingTwoRequiredDays = true;
-      getRequiredDaysList(this.queryRequiredDays).then(response => {
+      getRequiredDaysList(this.queryRequiredDays).then((response) => {
         this.tableDataRequiredDays = response.rows;
         this.totalTwoRequiredDays = response.total;
         this.loadingTwoRequiredDays = false;
@@ -673,13 +1190,13 @@ export default {
 
     /** 导出按钮操作 */
     handleExportOutCountList() {
-      exportOutCountList(this.queryRecordOutCount).then(res => {
+      exportOutCountList(this.queryRecordOutCount).then((res) => {
         this.downloadFile({
           fileName: `工作时间外出次数记录_${new Date().getTime()}.xlsx`,
           fileData: res,
-          fileType: 'application/vnd.ms-excel;charset=utf-8'
-        })
-      })
+          fileType: "application/vnd.ms-excel;charset=utf-8",
+        });
+      });
     },
 
     //打开打卡次数记录
@@ -694,13 +1211,61 @@ export default {
     /** 查询打卡次数记录列表 */
     getClockingRecordListByUserId() {
       this.loadingAttCount = true;
-      getClockingRecordListByUserId(this.queryAttCount).then(response => {
+      getClockingRecordListByUserId(this.queryAttCount).then((response) => {
         this.tableDataAttCount = response.rows;
         this.totalAttCount = response.total;
         this.loadingAttCount = false;
       });
     },
 
-  }
+    // 查看年数据
+    onHandleYearData() {
+      this.getYearDataList();
+      this.showYearDataVisible = true;
+    },
+
+    // 获取年数据
+    getYearDataList() {
+      getYearDataListAPI(this.queryYearDataParams).then((response) => {
+        this.tableDataYearData = response.rows;
+        this.totalYearData = response.total;
+      });
+    },
+
+    // 重置年数据查询
+    resetQueryYearData() {
+      this.queryYearDataParams.year = String(new Date().getFullYear());
+      this.getYearDataList();
+    },
+    // 打开月数据
+    openYearDataDetail(row, dataValue) {
+      console.log(row, dataValue);
+
+      this.queryParams.month = [
+        `${this.queryYearDataParams.year}-${
+          dataValue > 9 ? dataValue : "0" + dataValue
+        }`,
+        `${this.queryYearDataParams.year}-${
+          dataValue > 9 ? dataValue : "0" + dataValue
+        }`,
+      ];
+
+      this.queryParams.userName = row.userName;
+      // this.queryParams.orgIdList = [250];
+      this.queryParams.orgName = row.orgName;
+      this.handleQuery();
+      this.showYearDataVisible = false;
+    },
+
+    handleExportYearDataList() {
+      exportYearDataListAPI(this.queryYearDataParams).then((res) => {
+        this.downloadFile({
+          fileName: `年报表记录_${new Date().getTime()}.xlsx`,
+          fileData: res,
+          fileType: "application/vnd.ms-excel;charset=utf-8",
+        });
+      });
+    },
+  },
 };
 </script>