diff --git a/src/api/mail.ts b/src/api/mail.ts
index c7d648d..1ada819 100644
--- a/src/api/mail.ts
+++ b/src/api/mail.ts
@@ -24,6 +24,14 @@ export function addCoHandling(body) {
     return request.post({ url: '/mail/coHandling/add', body})
 }
 
+export function updateMailHandleDetail(body) {
+    return request.put({ url: '/mail/handleDetail', body})
+}
+
+export function updateContactInfo(body) {
+    return request.put({ url: '/mail/contactInfo', body})
+}
+
 export function deleteMail(body) {
     return request.post({ url: '/mail/delete', body})
 }
\ No newline at end of file
diff --git a/src/components/DeptTreeSelect.vue b/src/components/DeptTreeSelect.vue
new file mode 100644
index 0000000..c04b41a
--- /dev/null
+++ b/src/components/DeptTreeSelect.vue
@@ -0,0 +1,28 @@
+<template>
+    <el-tree-select
+        :data="optionsData.dept"
+        clearable
+        node-key="id"
+        filterable
+        :props="{ value: 'id', label: 'name'}"
+        placeholder="请选择部门"
+        :default-expanded-keys="getExpandedKeys()"
+    />
+</template>
+<script setup>
+import { deptLists } from '@/api/org/department'
+import { useDictOptions } from "@/hooks/useDictOptions";
+const { optionsData } = useDictOptions({
+    dept: {
+        api: deptLists
+    }
+});
+const getExpandedKeys = () => {
+    if (optionsData.dept.length && optionsData.dept[0].children && optionsData.dept[0].children.length > 0) {
+        return [optionsData.dept[0].id]
+    }
+    return [];
+}
+</script>
+<style lang="scss" scoped>
+</style>
\ No newline at end of file
diff --git a/src/components/FileList.vue b/src/components/FileList.vue
index 33160e8..9ff7b8d 100644
--- a/src/components/FileList.vue
+++ b/src/components/FileList.vue
@@ -276,9 +276,22 @@ function mousemove(event) {
     if (!moveFlag) {
         return;
     }
-    translateX.value += event.clientX - initialX;
-    console.log("x", translateX.value);
-    translateY.value += event.clientY - initialY;
+    if (rotate.value % 360 === 0) {
+        translateX.value += event.clientX - initialX;
+        translateY.value += event.clientY - initialY;
+    }
+    if (rotate.value === 90) {
+        translateY.value -= event.clientX - initialX;
+        translateX.value += event.clientY - initialY;
+    }
+    if (rotate.value === 180) {
+        translateX.value -= event.clientX - initialX;
+        translateY.value -= event.clientY - initialY;
+    }
+    if (rotate.value === 270) {
+        translateY.value += event.clientX - initialX;
+        translateX.value -= event.clientY - initialY;
+    }
     initialX = event.clientX;
     initialY = event.clientY;
 }
@@ -288,12 +301,19 @@ function mouseup(event) {
 }
 
 function rotateLeft() {
-    rotate.value += 90;
-    console.log(rotate.value);
+    if (rotate.value === 360) {
+        rotate.value = 0;
+    } else {
+        rotate.value += 90;
+    }
 }
 
 function rotateRight() {
-    rotate.value -= 90;
+    if (rotate.value === 0) {
+        rotate.value = 270;
+    } else {
+        rotate.value -= 90;
+    }
 }
 
 function getIconName(filetype) {
diff --git a/src/layout/components/Header.vue b/src/layout/components/Header.vue
index 04c8690..28db053 100644
--- a/src/layout/components/Header.vue
+++ b/src/layout/components/Header.vue
@@ -15,7 +15,7 @@
     <ul class="userinfo-dropdown" v-if="dropdownShow">
         <li class="flex gap v-center"  @click="supportShow = true">
             <icon name="el-icon-Star" :size="22" />
-            <span>服务支持</span>
+            <span>技术支持</span>
         </li>
         <li class="flex gap v-center"  @click="handleEdit">
             <icon name="el-icon-Lock" :size="22" />
@@ -35,8 +35,8 @@
                 <img src="/imgs/support1.png" alt="" />
             </header>
             <div class="support-content" @click.stop>
-                <p>业务服务热线：0731 - 82587735（周巍警官） </p>
-                <p>技术服务热线：13787166867（李经理） 18867391894 （杨姣）</p> 
+                <p>业务服务热线：18163608038（周巍警官） </p>
+                <p>技术服务热线：18867391894 （杨姣） 13787166867（李镇洋）</p> 
             </div>
         </div>
     </div>
diff --git a/src/style/public.scss b/src/style/public.scss
index c952099..f4c1ca3 100644
--- a/src/style/public.scss
+++ b/src/style/public.scss
@@ -279,13 +279,13 @@ svg+span {
 
 .col {
   display: flex;
+  gap: 16px;
 
   &.short {
     width: 140px;
   }
 
   label {
-    margin-right: 18px;
     color: #888;
   }
 
diff --git a/src/utils/util.ts b/src/utils/util.ts
index 95a0773..c20e2c6 100644
--- a/src/utils/util.ts
+++ b/src/utils/util.ts
@@ -371,3 +371,38 @@ export function getAppealDept(handlingDept) {
         });
     }
 }
+
+export function browse() {
+    var browser = {};
+    var userAgent = navigator.userAgent.toLowerCase();
+    var s;
+    (s = userAgent.match(/msie ([\d.]+)/)) ? browser.ie = s[1] : (s = userAgent.match(/firefox\/([\d.]+)/)) ? browser.firefox = s[1] : (s = userAgent.match(/chrome\/([\d.]+)/)) ? browser.chrome = s[1] : (s = userAgent.match(/opera.([\d.]+)/)) ? browser.opera = s[1] : (s = userAgent.match(/version\/([\d.]+).*safari/)) ? browser.safari = s[1] : 0;
+    var version = "";
+    if (browser.ie) {
+        version = 'IE ' + browser.ie;
+    }
+    else {
+        if (browser.firefox) {
+            version = 'firefox ' + browser.firefox;
+        }
+        else {
+            if (browser.chrome) {
+                version = 'chrome ' + browser.chrome;
+            }
+            else {
+                if (browser.opera) {
+                    version = 'opera ' + browser.opera;
+                }
+                else {
+                    if (browser.safari) {
+                        version = 'safari ' + browser.safari;
+                    }
+                    else {
+                        version = '未知浏览器';
+                    }
+                }
+            }
+        }
+    }
+    return version;
+}
\ No newline at end of file
diff --git a/src/views/Login.vue b/src/views/Login.vue
index 1043c5d..430541f 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -76,6 +76,9 @@
                         数字证书登录
                     </el-button>
                 </el-form>
+                <div class="flex end mt-16">
+                    <a target="_blank" href="/download/109.0.5414.120_chrome_installer_64.exe" style="color: var(--primary-color); text-decoration: none;">浏览器下载</a>
+                </div>
             </div>
         </div>
     </div>
@@ -85,6 +88,7 @@ import cache from "@/utils/cache";
 import { ACCOUNT_KEY } from "@/enums/cacheEnums";
 import { PageEnum } from "@/enums/pageEnum";
 import useUserStore from "@/stores/modules/user";
+import { browse } from "@/utils/util";
 
 const router = useRouter();
 const route = useRoute();
@@ -154,6 +158,10 @@ function saveUsername(username) {
 function getUsername() {
   return localStorage.getItem('username');
 }
+
+const browseVersion = browse();
+console.log('浏览器版本：', browseVersion)
+
 </script>
 <style lang="scss" scoped>
 .wrapper {
diff --git a/src/views/datascreen/assets/css/index.css b/src/views/datascreen/assets/css/index.css
index f517065..94cd4b9 100644
--- a/src/views/datascreen/assets/css/index.css
+++ b/src/views/datascreen/assets/css/index.css
@@ -238,7 +238,7 @@ a:active {
 .pmbar span{ background: linear-gradient(to right,#14b6ff,#9cefff); display: inline-block;
 
     vertical-align: middle; height: 10px; }
-.pmbar i{ line-height:  20px; font-style: normal; padding-left: 2px; font-family: PingFang-SC-Regular;
+.pmbar i{ line-height:  20px; font-style: normal; padding-left: 2px;
     font-size: 12px;
     color: #FFFFFF;
     text-align: right;
@@ -432,7 +432,6 @@ a:active {
     font-weight: 400;
 }
 .ratesum i{
-    font-family: PingFang-SC-Medium;
     font-size: 10px;
     color: #09C700;
     text-align: right;
@@ -444,28 +443,6 @@ a:active {
     font-size: 10px;
     margin-left: 10px;
     font-weight: 500;
-    font-family: PingFang-SC-Medium;
-}
-
-ul.h100 li:nth-of-type(-n+3) .ratebar span {
-    background-image: linear-gradient(270deg, #63E700 0%, #19674C 100%);
-}
-ul.h100 li:nth-of-type(n+4):nth-of-type(-n+6) .ratebar span {
-    background-image: linear-gradient(270deg, #FFB90E 0%, #71501D 99%);
-}
-ul.h100 li:nth-of-type(n+6) .ratebar span {
-    background-image: linear-gradient(270deg, #FB002D 0%, #822232 97%);
-}
-
-ul.h100 li:nth-of-type(-n+4) .pmbar span {
-    background-image: linear-gradient(270deg, #FB002D 0%, #822232 97%);
-}
-ul.h100 li:nth-of-type(n+4):nth-of-type(-n+6) .pmbar span {
-    background-image: linear-gradient(270deg, #FFB90E 0%, #71501D 99%);
-}
-
-ul.h100 li:nth-of-type(n+6) .pmbar span {
-    background-image: linear-gradient(270deg, #63E700 0%, #19674C 100%);
 }
 
 .trendOptions{
@@ -612,4 +589,11 @@ ul.h100 li:nth-of-type(n+6) .pmbar span {
     .el-select-dropdown__item.selected {
         background: linear-gradient(180deg, #010457 0%, #031577 100%);
     }
+}
+
+.el-popover.custom-popover-style {
+    background-color: var(--primary-color);
+    border-color: var(--primary-color);
+    color: #fff;
+    --el-popover-title-text-color: #fff;
 }
\ No newline at end of file
diff --git a/src/views/datascreen/countyData.vue b/src/views/datascreen/countyData.vue
index 6b6adff..b69946c 100644
--- a/src/views/datascreen/countyData.vue
+++ b/src/views/datascreen/countyData.vue
@@ -1,334 +1,497 @@
 <template>
-  <!--头部-->
-  <div class="body">
-    <div class="header">
-      <img src="@/assets/logo.png">
-    </div>
-    <!--主体-->
-    <div class="main clearfix">
-      <div class="main-left">
-        <div class="box-container">
-          <div class="name-title">
-            今日值班
-          </div>
-          <div>
-            <el-tabs v-model="dutyActiveName" class="echart-tabs" type="card" @tab-click="dutyResetTimer">
-              <el-tab-pane label="市局" name="dutySj">
-                <div class="boxRightMailCon">
-                  <ul class="dutyUl">
-                    <li v-for="item in dutySjList" :key="item.id">
-                      <p><span class="dutyDept">{{ item.departName }}</span> <span class="dutyULspan">{{ item.mobile
-                          }}</span> <span class="dutyULspan">{{ item.policeName }}</span></p>
-                    </li>
-
-                  </ul>
-                </div>
-
-              </el-tab-pane>
-              <el-tab-pane label="本单位" name="dutyFj">
-                <ul class="dutyUl">
-                  <li v-for="item in dutyList.dutyFjList" :key="item.id">
-                    <p><span class="dutyDept">{{ item.departName }}</span> <span class="dutyULspan">{{ item.mobile
-                        }}</span> <span class="dutyULspan">{{ item.policeName }}</span></p>
-                  </li>
-
-                </ul>
-
-              </el-tab-pane>
-              <el-tab-pane label="大队" name="dutyZd">
-                <ul class="dutyUl">
-                  <li v-for="item in dutyList.dutyDdList" :key="item.id">
-                    <p><span class="dutyDept">{{ item.departName }}</span> <span class="dutyULspan">{{ item.mobile
-                        }}</span> <span class="dutyULspan">{{ item.policeName }}</span></p>
-                  </li>
-
-                </ul>
-              </el-tab-pane>
-              <el-tab-pane label="派出所" name="dutyBw">
-                <ul class="dutyUl">
-                  <li v-for="item in dutyList.dutyPcsList" :key="item.id">
-                    <p><span class="dutyDept">{{ item.departName }}</span> <span class="dutyULspan">{{ item.mobile
-                        }}</span> <span class="dutyULspan">{{ item.policeName }}</span></p>
-                  </li>
-
-                </ul>
-              </el-tab-pane>
-            </el-tabs>
-          </div>
-
+    <!--头部-->
+    <div class="body">
+        <div class="header">
+            <img src="@/assets/logo.png" />
         </div>
-        <div class="box-container">
-          <div class="name-title">
-            派出所三率排名
-          </div>
-          <div id="graduate">
-            <el-tabs v-model="rateActiveName" class="echart-tabs" @tab-click="rateResetTimer" type="card">
-              <el-tab-pane label="办结率" name="completionRate">
-                <div class="ratesbox rates">
-                  <ul class="h100">
-                    <li v-for="item in completeList" :key="item.id">
-                      <span>{{ item.name }}</span>
-                      <div class="ratenav">
-                        <div class="ratebar"><span :style="{ width: item.rate }"></span></div>
-                      </div>
-                      <div class="ratesum">
-                        <p>{{ item.rate }}<span class="ratespan"><i>{{ item.completed }} / </i>{{ item.sum }}</span></p>
-                      </div>
-                    </li>
-                  </ul>
-
+        <!--主体-->
+        <div class="main clearfix">
+            <div class="main-left">
+                <div class="box-container">
+                    <div class="name-title">今日值班</div>
+                    <div>
+                        <el-tabs
+                            v-model="dutyActiveName"
+                            class="echart-tabs"
+                            type="card"
+                            @tab-click="dutyResetTimer"
+                        >
+                            <el-tab-pane label="市局" name="dutySj">
+                                <div class="boxRightMailCon">
+                                    <ul class="dutyUl">
+                                        <li
+                                            v-for="item in dutySjList"
+                                            :key="item.id"
+                                        >
+                                            <p>
+                                                <span class="dutyDept">{{
+                                                    item.departName
+                                                }}</span>
+                                                <span class="dutyULspan">{{
+                                                    item.mobile
+                                                }}</span>
+                                                <span class="dutyULspan">{{
+                                                    item.policeName
+                                                }}</span>
+                                            </p>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </el-tab-pane>
+                            <el-tab-pane label="本单位" name="dutyFj">
+                                <ul class="dutyUl">
+                                    <li
+                                        v-for="item in dutyList.dutyFjList"
+                                        :key="item.id"
+                                    >
+                                        <p>
+                                            <span class="dutyDept">{{
+                                                item.departName
+                                            }}</span>
+                                            <span class="dutyULspan">{{
+                                                item.mobile
+                                            }}</span>
+                                            <span class="dutyULspan">{{
+                                                item.policeName
+                                            }}</span>
+                                        </p>
+                                    </li>
+                                </ul>
+                            </el-tab-pane>
+                            <el-tab-pane label="大队" name="dutyZd">
+                                <ul class="dutyUl">
+                                    <li
+                                        v-for="item in dutyList.dutyDdList"
+                                        :key="item.id"
+                                    >
+                                        <p>
+                                            <span class="dutyDept">{{
+                                                item.departName
+                                            }}</span>
+                                            <span class="dutyULspan">{{
+                                                item.mobile
+                                            }}</span>
+                                            <span class="dutyULspan">{{
+                                                item.policeName
+                                            }}</span>
+                                        </p>
+                                    </li>
+                                </ul>
+                            </el-tab-pane>
+                            <el-tab-pane label="派出所" name="dutyBw">
+                                <ul class="dutyUl">
+                                    <li
+                                        v-for="item in dutyList.dutyPcsList"
+                                        :key="item.id"
+                                    >
+                                        <p>
+                                            <span class="dutyDept">{{
+                                                item.departName
+                                            }}</span>
+                                            <span class="dutyULspan">{{
+                                                item.mobile
+                                            }}</span>
+                                            <span class="dutyULspan">{{
+                                                item.policeName
+                                            }}</span>
+                                        </p>
+                                    </li>
+                                </ul>
+                            </el-tab-pane>
+                        </el-tabs>
+                    </div>
                 </div>
-              </el-tab-pane>
-              <el-tab-pane label="解决率" name="resolutionRate">
-                <div class="ratesbox rates">
-                  <ul class="h100">
-                    <li v-for="item in rateMap.resolvedList" :key="item.id">
-                      <span>{{ item.name }}</span>
-                      <div class="ratenav">
-                        <div class="ratebar"><span :style="{ width: item.rate }"></span></div>
-                      </div>
-                      <div class="ratesum">
-                        <p>{{ item.rate }}<span class="ratespan"><i>{{ item.resolved }} / </i>{{ item.sum }}</span></p>
-                      </div>
-                    </li>
-                  </ul>
-
+                <div class="box-container">
+                    <div class="name-title">派出所三率排名</div>
+                    <div id="graduate">
+                        <el-tabs
+                            v-model="rateActiveName"
+                            class="echart-tabs"
+                            @tab-click="rateResetTimer"
+                            type="card"
+                        >
+                            <el-tab-pane label="办结率" name="completionRate">
+                                <div class="ratesbox rates">
+                                    <ul class="h100">
+                                        <li
+                                            v-for="item in completeList"
+                                            :key="item.id"
+                                        >
+                                            <span>{{ item.name }}</span>
+                                            <div class="ratenav">
+                                                <div class="ratebar">
+                                                    <span
+                                                        :style="{
+                                                            width: item.rate,
+                                                            background: getColor(item.ratenumber),
+                                                        }"
+                                                    ></span>
+                                                </div>
+                                            </div>
+                                            <div class="ratesum">
+                                                <p>
+                                                    {{ item.rate
+                                                    }}<span class="ratespan"
+                                                        ><i
+                                                            >{{
+                                                                item.completed
+                                                            }}
+                                                            / </i
+                                                        >{{ item.sum }}</span
+                                                    >
+                                                </p>
+                                            </div>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </el-tab-pane>
+                            <el-tab-pane label="解决率" name="resolutionRate">
+                                <div class="ratesbox rates">
+                                    <ul class="h100">
+                                        <li
+                                            v-for="item in rateMap.resolvedList"
+                                            :key="item.id"
+                                        >
+                                            <span>{{ item.name }}</span>
+                                            <div class="ratenav">
+                                                <div class="ratebar">
+                                                    <span
+                                                        :style="{
+                                                            width: item.rate,
+                                                            background: getColor(item.ratenumber),
+                                                        }"
+                                                    ></span>
+                                                </div>
+                                            </div>
+                                            <div class="ratesum">
+                                                <p>
+                                                    {{ item.rate
+                                                    }}<span class="ratespan"
+                                                        ><i
+                                                            >{{
+                                                                item.resolved
+                                                            }}
+                                                            / </i
+                                                        >{{ item.sum }}</span
+                                                    >
+                                                </p>
+                                            </div>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </el-tab-pane>
+                            <el-tab-pane label="满意率" name="satisfactionRate">
+                                <div class="ratesbox rates">
+                                    <ul class="h100">
+                                        <li
+                                            v-for="item in rateMap.satisfiedList"
+                                            :key="item.id"
+                                        >
+                                            <span>{{ item.name }}</span>
+                                            <div class="ratenav">
+                                                <div class="ratebar">
+                                                    <span
+                                                        :style="{
+                                                            width: item.rate,
+                                                            background: getColor(item.ratenumber),
+                                                        }"
+                                                    ></span>
+                                                </div>
+                                            </div>
+                                            <div class="ratesum">
+                                                <p>
+                                                    {{ item.rate
+                                                    }}<span class="ratespan"
+                                                        ><i
+                                                            >{{
+                                                                item.satisfied
+                                                            }}
+                                                            / </i
+                                                        >{{ item.sum }}</span
+                                                    >
+                                                </p>
+                                            </div>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </el-tab-pane>
+                        </el-tabs>
+                    </div>
                 </div>
-              </el-tab-pane>
-              <el-tab-pane label="满意率" name="satisfactionRate">
-                <div class="ratesbox rates">
-                  <ul class="h100">
-                    <li v-for="item in rateMap.satisfiedList" :key="item.id">
-                      <span>{{ item.name }}</span>
-                      <div class="ratenav">
-                        <div class="ratebar"><span :style="{ width: item.rate }"></span></div>
-                      </div>
-                      <div class="ratesum">
-                        <p>{{ item.rate }}<span class="ratespan"><i>{{ item.satisfied }} / </i>{{ item.sum }}</span></p>
-                      </div>
-                    </li>
-                  </ul>
-
+            </div>
+            <div class="main-middle">
+                <div class="border-console">
+                    <div class="console-div">
+                        <ul class="clearfix">
+                            <li>
+                                <h2 class="bulebg">
+                                    {{ consoleMap.todaySum }}
+                                </h2>
+                                <span>今日来信</span>
+                            </li>
+                            <li>
+                                <h2 class="yellowbg">
+                                    {{ consoleMap.allSum }}
+                                </h2>
+                                <span>来信总数</span>
+                            </li>
+                            <li>
+                                <h2 class="bulebg">
+                                    {{ consoleMap.completed }}
+                                </h2>
+                                <span>办结总数</span>
+                            </li>
+                            <li>
+                                <el-popover
+                                    placement="right-start"
+                                    title="办结率计算方式"
+                                    :width="200"
+                                    trigger="hover"
+                                    show-after="700"
+                                    :content="`办结率 = 已办结数 / 信件总数 \n ${consoleMap.completedrate} = ${consoleMap.completed} / ${consoleMap.completedsum}`"
+                                    popper-class="custom-popover-style"
+                                >
+                                    <template #reference>
+                                        <h2
+                                            class="yellowbg"
+                                            v-show="consoleMap.completedrate"
+                                        >
+                                            {{ consoleMap.completedrate }}
+                                        </h2>
+                                    </template>
+                                </el-popover>
+                                <span>办结率</span>
+                            </li>
+                            <li>
+                                <el-popover
+                                    placement="right-start"
+                                    title="满意率计算方式"
+                                    :width="200"
+                                    trigger="hover"
+                                    show-after="700"
+                                    :content="`满意率 = 满意数 / 已办结数 \n ${consoleMap.satisfiedrate} = ${consoleMap.satisfied} / ${consoleMap.satisfiedSum}`"
+                                    popper-class="custom-popover-style"
+                                >
+                                    <template #reference>
+                                        <h2
+                                            class="bulebg"
+                                            v-show="consoleMap.satisfiedrate"
+                                        >
+                                            {{ consoleMap.satisfiedrate }}
+                                        </h2>
+                                    </template>
+                                </el-popover>
+                                <span>满意率</span>
+                            </li>
+                            <li>
+                                <el-popover
+                                    placement="right-start"
+                                    title="解决率计算方式"
+                                    :width="220"
+                                    trigger="hover"
+                                    show-after="700"
+                                    :content="`解决率 = 解决数 / 已办结数 \n ${consoleMap.resolvedrate} = ${consoleMap.resolved} / ${consoleMap.resolvedsum}`"
+                                    popper-class="custom-popover-style"
+                                >
+                                    <template #reference>
+                                        <h2
+                                            class="yellowbg"
+                                            v-show="consoleMap.resolvedrate"
+                                        >
+                                            {{ consoleMap.resolvedrate }}
+                                        </h2>
+                                    </template>
+                                </el-popover>
+                                <span>解决率</span>
+                            </li>
+                        </ul>
+                    </div>
                 </div>
-
-              </el-tab-pane>
-            </el-tabs>
-
-          </div>
-
-        </div>
-      </div>
-      <div class="main-middle">
-        <div class="border-console  ">
-          <div class="console-div">
-            <ul class="clearfix">
-              <li>
-                <h2 class="bulebg">{{ consoleMap.todaySum }}</h2><span>今日来信</span>
-              </li>
-              <li>
-                <h2 class="yellowbg">{{ consoleMap.allSum }}</h2><span>来信总数</span>
-              </li>
-              <li>
-                <h2 class="bulebg">{{ consoleMap.completed }}</h2><span>办结总数</span>
-              </li>
-              <li>
-                <el-popover placement="right-start" title="办结率计算方式" :width="200" trigger="hover" show-after="700"
-                  :content="completedrateContent" popper-class="custom-popover-style">
-                  <template #reference>
-                    <h2 class="yellowbg" v-show="consoleMap.completedrate">{{ consoleMap.completedrate }}</h2>
-                  </template>
-                </el-popover>
-                <span>办结率</span>
-              </li>
-              <li>
-                <el-popover placement="right-start" title="满意率计算方式" :width="200" trigger="hover" show-after="700"
-                  :content="satisfiedrateContent" popper-class="custom-popover-style">
-                  <template #reference>
-                    <h2 class="bulebg" v-show="consoleMap.satisfiedrate">{{ consoleMap.satisfiedrate }}</h2>
-                  </template>
-                </el-popover>
-                <span>满意率</span>
-              </li>
-              <li>
-                <el-popover placement="right-start" title="解决率计算方式" :width="200" trigger="hover" show-after="700"
-                  :content="resolvedrateContent" popper-class="custom-popover-style">
-                  <template #reference>
-                    <h2 class="yellowbg" v-show="consoleMap.resolvedrate">{{ consoleMap.resolvedrate }}</h2>
-                  </template>
-                </el-popover>
-                <span>解决率</span>
-              </li>
-            </ul>
-          </div>
-
-        </div>
-        <div class="border-console">
-          <div id="map" ref="map"></div>
-        </div>
-        <div class="mail-container">
-          <div class="name-title">
-            来信趋势
-          </div>
-          <div v-if="seenDay" class="trendOptions">
-            <el-select v-model="trendDayValue" class="m-2" :placeholder="selectTrend" size="small"
-              style="width: 100px;z-index: 3000;" @change="getMailTrend" popper-class="blueBack">
-              <el-option v-for="item in trendDayOptions" :key="item.value" :label="item.label" :value="item.value" />
-            </el-select>
-          </div>
-          <div v-if="seenWeek" class="trendOptions">
-            <el-select v-model="trendWeekValue" class="m-2" :placeholder="selectTrend" size="small"
-              style="width: 100px;z-index: 3000" @change="getMailTrend" popper-class="blueBack">
-              <el-option v-for="item in trendWeekOptions" :key="item.value" :label="item.label" :value="item.value" />
-            </el-select>
-          </div>
-
-          <div v-if="seenMonth" class="trendOptions">
-            <el-select v-model="trendMonthValue" class="m-2" :placeholder="selectTrend" size="small"
-              style="width: 100px;z-index: 3000" @change="getMailTrend" popper-class="blueBack">
-              <el-option v-for="item in trendMonthOptions" :key="item.value" :label="item.label" :value="item.value"
-                style="height:auto;max-height:300px;padding:0;" />
-            </el-select>
-          </div>
-
-          <div ref="tabsContainer">
-
-            <el-tabs v-model="trendActiveName" class="trend-tabs" type="card" @tab-click="trendResetTimer">
-              <el-tab-pane label="按天计算" name="dayTrend">
-                <div ref="day_echart" id="dayEchart" :style="{ width: chartWidth + 'px' }"></div>
-              </el-tab-pane>
-              <el-tab-pane label="按周计算" name="weekTrend">
-                <div ref="week_echart" id="weekEchart" :style="{ width: chartWidth + 'px' }"></div>
-              </el-tab-pane>
-              <el-tab-pane label="按月计算" name="monthTrend">
-                <div ref="month_echart" id="monthEchart" :style="{ width: chartWidth + 'px' }"></div>
-              </el-tab-pane>
-            </el-tabs>
-          </div>
-
-        </div>
-      </div>
-      <div class="main-right">
-        <div class="box-container">
-          <div class="name-title">
-            信件动态
-          </div>
-          <div class="boxLeftMailCon">
-            <ul class="mailUl">
-              <li v-for="item in peopleMaillist" :key="item.id" @click="queryDetails(item)">
-                <p>{{ item.contactName }} ：{{ item.contactPhone }}<span class="mailULspan">{{ item.mailState }}</span>
-                </p>
-                <p>{{ formatDate(item.createTime) }}</p>
-              </li>
-            </ul>
-          </div>
-
-
-        </div>
-        <div class="box-container">
-          <div class="name-title">
-            信件类型排名
-          </div>
-          <div class=" boxnav paim">
-            <ul class="h100">
-              <li v-for="item in mailTypeRankList" :key="item.id">
-                <span>{{ item.rownumber }}</span>
-                <div class="pmnav">
-                  <p>{{ item.category }}</p>
-                  <div class="pmbar"><span :style="{ width: item.countrate }"></span><i></i></div>
+                <div class="border-console">
+                    <div id="map" ref="map"></div>
                 </div>
-                <div class="pmsum">
-                  <p>{{ item.sumcount }}</p>
+                <div class="mail-container">
+                    <div class="name-title">来信趋势</div>
+                    <div v-if="seenDay" class="trendOptions">
+                        <el-select
+                            v-model="trendDayValue"
+                            class="m-2"
+                            :placeholder="selectTrend"
+                            size="small"
+                            style="width: 100px; z-index: 3000"
+                            @change="getMailTrend"
+                            popper-class="blueBack"
+                        >
+                            <el-option
+                                v-for="item in trendDayOptions"
+                                :key="item.value"
+                                :label="item.label"
+                                :value="item.value"
+                            />
+                        </el-select>
+                    </div>
+                    <div v-if="seenWeek" class="trendOptions">
+                        <el-select
+                            v-model="trendWeekValue"
+                            class="m-2"
+                            :placeholder="selectTrend"
+                            size="small"
+                            style="width: 100px; z-index: 3000"
+                            @change="getMailTrend"
+                            popper-class="blueBack"
+                        >
+                            <el-option
+                                v-for="item in trendWeekOptions"
+                                :key="item.value"
+                                :label="item.label"
+                                :value="item.value"
+                            />
+                        </el-select>
+                    </div>
+
+                    <div v-if="seenMonth" class="trendOptions">
+                        <el-select
+                            v-model="trendMonthValue"
+                            class="m-2"
+                            :placeholder="selectTrend"
+                            size="small"
+                            style="width: 100px; z-index: 3000"
+                            @change="getMailTrend"
+                            popper-class="blueBack"
+                        >
+                            <el-option
+                                v-for="item in trendMonthOptions"
+                                :key="item.value"
+                                :label="item.label"
+                                :value="item.value"
+                                style="
+                                    height: auto;
+                                    max-height: 300px;
+                                    padding: 0;
+                                "
+                            />
+                        </el-select>
+                    </div>
+
+                    <div ref="tabsContainer">
+                        <el-tabs
+                            v-model="trendActiveName"
+                            class="trend-tabs"
+                            type="card"
+                            @tab-click="trendResetTimer"
+                        >
+                            <el-tab-pane label="按天计算" name="dayTrend">
+                                <div
+                                    ref="day_echart"
+                                    id="dayEchart"
+                                    :style="{ width: chartWidth + 'px' }"
+                                ></div>
+                            </el-tab-pane>
+                            <el-tab-pane label="按周计算" name="weekTrend">
+                                <div
+                                    ref="week_echart"
+                                    id="weekEchart"
+                                    :style="{ width: chartWidth + 'px' }"
+                                ></div>
+                            </el-tab-pane>
+                            <el-tab-pane label="按月计算" name="monthTrend">
+                                <div
+                                    ref="month_echart"
+                                    id="monthEchart"
+                                    :style="{ width: chartWidth + 'px' }"
+                                ></div>
+                            </el-tab-pane>
+                        </el-tabs>
+                    </div>
                 </div>
-              </li>
-
-
-            </ul>
-
-          </div>
+            </div>
+            <div class="main-right">
+                <div class="box-container">
+                    <div class="name-title">信件动态</div>
+                    <div class="boxLeftMailCon">
+                        <ul class="mailUl">
+                            <li
+                                v-for="item in peopleMaillist"
+                                :key="item.id"
+                                @click="queryDetails(item)"
+                            >
+                                <p>
+                                    {{ item.contactName }} ：{{
+                                        item.contactPhone
+                                    }}<span class="mailULspan">{{
+                                        item.mailState
+                                    }}</span>
+                                </p>
+                                <p>{{ formatDate(item.createTime) }}</p>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+                <div class="box-container">
+                    <div class="name-title">信件类型排名</div>
+                    <div class="boxnav paim">
+                        <ul class="h100">
+                            <li v-for="item in mailTypeRankList" :key="item.id">
+                                <span>{{ item.rownumber }}</span>
+                                <div class="pmnav">
+                                    <p>{{ item.category }}</p>
+                                    <div class="pmbar">
+                                        <span
+                                            :style="{ width: item.countrate }"
+                                        ></span
+                                        ><i></i>
+                                    </div>
+                                </div>
+                                <div class="pmsum">
+                                    <p>{{ item.sumcount }}</p>
+                                </div>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+            <details-popup
+                v-if="showDetails"
+                ref="detailsRef"
+                @success="closeDetails"
+                @close="closeDetails"
+            />
         </div>
-
-      </div>
-      <details-popup v-if="showDetails" ref="detailsRef" @success="closeDetails" @close="closeDetails" />
     </div>
-  </div>
 </template>
-<style>
-@import 'assets/css/index.css';
-
-body {
-  background-color: #030b39;
-}
-
-.body {
-
-  background-image: url('@/assets/bg.png');
-  /* 背景图片的路径 */
-  background-size: cover;
-  /* 背景图片大小适应容器 */
-
-
-}
-
-.ratebar i {
-  line-height: 2rem;
-  font-style: normal;
-  padding-left: 1rem;
-  color: #49bcf7;
-  font-size: 1.6rem;
-}
-
-.ratenav {
-  /*  width:calc(100% - 5rem)*/
-  width: 200px;
-}
-
-.ratenav p {
-  color: #fff;
-  font-size: 1.5rem;
-  padding-bottom: 0.5rem;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.rates li>span {
-  width: 120px;
-  height: 3rem;
-  font-family: PingFang-SC-Regular;
-  font-size: 16px;
-  color: #FFFFFF;
-  text-align: right;
-  font-weight: 400;
-  line-height: 3rem;
-  padding-right: 5px;
-  border-radius: .05rem;
-  margin-right: .1rem;
-}
-
-.ratesum {
-  font-size: 1.6rem;
-}
-</style>
-
 
 <script lang="ts" setup>
-import { ref, onMounted, watch, onBeforeUpdate, onBeforeMount, onUnmounted } from 'vue'
-import type { TabsPaneContext } from 'element-plus'
-import * as echarts from 'echarts';
+import {
+    ref,
+    onMounted,
+    watch,
+    onBeforeUpdate,
+    onBeforeMount,
+    onUnmounted,
+} from "vue";
+import type { TabsPaneContext } from "element-plus";
+import * as echarts from "echarts";
 import chinaJSON from "./changsha.json";
 import yuhuaJSON from "@/static/430111.json";
-import { peopleMail, dutyDay, threeRate, consoleData, mailTypeRank, mailTrend, mapCountyData, currentCountyMapJSON } from '@/api/datascreen'
+import {
+    peopleMail,
+    dutyDay,
+    threeRate,
+    consoleData,
+    mailTypeRank,
+    mailTrend,
+    mapCountyData,
+    currentCountyMapJSON,
+} from "@/api/datascreen";
 import { useRouter } from "vue-router";
-import { menuLists } from "~/api/perms/menu.ts";
-import DetailsPopup from './details.vue'
-const detailsRef = shallowRef<InstanceType<typeof DetailsPopup>>()
-const showDetails = ref(false)
+import DetailsPopup from "./details.vue";
+const detailsRef = shallowRef<InstanceType<typeof DetailsPopup>>();
+const showDetails = ref(false);
 const router = useRouter();
 
-const rateActiveName = ref('completionRate')
-const trendActiveName = ref('dayTrend')
-const dutyActiveName = ref('dutySj')
-
+const rateActiveName = ref("completionRate");
+const trendActiveName = ref("dayTrend");
+const dutyActiveName = ref("dutySj");
 
 let currentParams = reactive([]) as any[];
 let currentMapJSON = reactive([]) as any[];
@@ -357,11 +520,10 @@ let weekXList = reactive([]) as any[];
 let weekYList = reactive([]) as any[];
 let monthXList = reactive([]) as any[];
 let monthYList = reactive([]) as any[];
-let map = ref('map');
-
+let map = ref("map");
 
 let mapDataList = reactive([]) as any[];
-let dataIndex = 0
+let dataIndex = 0;
 
 let currentIndex = 0;
 let chartWidth = 900;
@@ -371,881 +533,929 @@ let day_echart = ref(null);
 let month_echart = ref(null);
 let week_echart = ref(null);
 
-let trendDayValue = ref('15')
-let trendWeekValue = ref('7')
-let trendMonthValue = ref('2024')
-const selectTrend = "请选择"
-let seenDay = true
-let seenWeek = false
-let seenMonth = false
-let mapShow = true
+let trendDayValue = ref("15");
+let trendWeekValue = ref("7");
+let trendMonthValue = ref("2024");
+const selectTrend = "请选择";
+let seenDay = true;
+let seenWeek = false;
+let seenMonth = false;
+let mapShow = true;
 let trendDayOptions = [
-  {
-    value: '15',
-    label: '最近15天',
-  },
-  {
-    value: '30',
-    label: '最近30天',
-  }
-]
+    {
+        value: "15",
+        label: "最近15天",
+    },
+    {
+        value: "30",
+        label: "最近30天",
+    },
+];
 
 let trendWeekOptions = [
-
-  {
-    value: '7',
-    label: '最近7周',
-  },
-  {
-    value: '15',
-    label: '最近15周',
-  }
-]
+    {
+        value: "7",
+        label: "最近7周",
+    },
+    {
+        value: "15",
+        label: "最近15周",
+    },
+];
 
 let trendMonthOptions = reactive([]) as any[];
 
 const selectYear = (year) => {
-  var myDate = new Date();
-  var startYear = myDate.getFullYear() - year;//起始年份
-  var endYear = myDate.getFullYear();//结束年份
-  for (var i = startYear; i <= endYear; i++) {
-    var obj = { "value": i, "label": i };
-    trendMonthOptions.push(obj);
-  }
-}
+    var myDate = new Date();
+    var startYear = myDate.getFullYear() - year; //起始年份
+    var endYear = myDate.getFullYear(); //结束年份
+    for (var i = startYear; i <= endYear; i++) {
+        var obj = { value: i, label: i };
+        trendMonthOptions.push(obj);
+    }
+};
 
 //console大屏数据
 const getConsoleDataMap = async () => {
-  try {
-    consoleMap = await consoleData(currentParams)
-    completedrateContent.value = '办结率=解决数/已办结数\n' + consoleMap.value.completedrate + '=' + consoleMap.value.completed + '/' + consoleMap.value.completedsum
-    satisfiedrateContent.value = '满意率=满意数/已办结数\n' + consoleMap.value.satisfiedrate + '=' + consoleMap.value.satisfied + '/' + consoleMap.value.satisfiedsum
-    resolvedrateContent.value = '解决率=解决数/来信总数\n' + consoleMap.value.resolvedrate + '=' + consoleMap.value.resolved + '/' + consoleMap.value.resolvedsum
-
-  } catch (error) {
-  }
-}
+    consoleMap = await consoleData(currentParams);
+};
 
 const getCurrentMapJSON = async () => {
-  try {
-    currentMapJSON = await currentCountyMapJSON(currentParams)
-    changsMap()
-  } catch (error) {
-  }
+    try {
+        currentMapJSON = await currentCountyMapJSON(currentParams);
+        changsMap();
+    } catch (error) {}
 }
 
 //类型排行
 const getMailTypeRankList = async () => {
-  try {
-    typeRankList = await mailTypeRank(currentParams)
+    try {
+        typeRankList = await mailTypeRank(currentParams);
 
-    typeRankList.forEach((element: any) => {
-      mailTypeRankList.push(element);//循环赋值
-    });
-  } catch (error) {
-  }
-}
+        typeRankList.forEach((element: any) => {
+            mailTypeRankList.push(element); //循环赋值
+        });
+    } catch (error) {}
+};
 
 //获取最近来信
 const getPopleMailLists = async () => {
-  try {
-    peopleMaillist = await peopleMail(currentParams)
-  } catch (error) {
-  }
-}
+    try {
+        peopleMaillist = await peopleMail(currentParams);
+    } catch (error) {}
+};
 
 //获取今日值班
 const getDutyDay = async () => {
-  try {
-    dutyList = await dutyDay(currentParams)
-    dutyList.dutySjList.forEach((element: any) => {
-      dutySjList.push(element);//循环赋值
-    });
-  } catch (error) {
-  }
-}
+    try {
+        dutyList = await dutyDay(currentParams);
+        dutyList.dutySjList.forEach((element: any) => {
+            dutySjList.push(element); //循环赋值
+        });
+    } catch (error) {}
+};
 const getThreeRate = async () => {
-  try {
-    rateMap = await threeRate(currentParams)
-    rateMap.completeList.forEach((element: any) => {
-      completeList.push(element);//循环赋值
-    });
-  } catch (error) {
-  }
-}
+    try {
+        rateMap = await threeRate(currentParams);
+        rateMap.completeList.forEach((element: any) => {
+            completeList.push(element); //循环赋值
+        });
+    } catch (error) {}
+};
 
 const getMailTrend = async () => {
-  try {
-    const params = reactive({
-      day: trendDayValue.value,
-      week: trendWeekValue.value,
-      year: trendMonthValue.value,
-      id: currentParams.id
-    })
-    mailTrendMap = await mailTrend(params)
-
-    dayXList = mailTrendMap.dayXList
-    dayYList = mailTrendMap.dayYList;
-    dayEcharts()
-    weekXList = mailTrendMap.weekXList;
-    weekYList = mailTrendMap.weekYList;
-    weekEcharts()
-    monthXList = mailTrendMap.monthXList;
-    monthYList = mailTrendMap.monthYList;
-    monthEcharts()
-  } catch (error) {
-  }
-}
+    try {
+        const params = reactive({
+            day: trendDayValue.value,
+            week: trendWeekValue.value,
+            year: trendMonthValue.value,
+            id: currentParams.id,
+        });
+        mailTrendMap = await mailTrend(params);
+
+        dayXList = mailTrendMap.dayXList;
+        dayYList = mailTrendMap.dayYList;
+        dayEcharts();
+        weekXList = mailTrendMap.weekXList;
+        weekYList = mailTrendMap.weekYList;
+        weekEcharts();
+        monthXList = mailTrendMap.monthXList;
+        monthYList = mailTrendMap.monthYList;
+        monthEcharts();
+    } catch (error) {}
+};
 
 const getMapDataList = async () => {
-  try {
-
-    mapDataList = await mapCountyData(currentParams)
-    changsMap()
-  } catch (error) {
-  }
-}
-
-
+    try {
+        mapDataList = await mapCountyData(currentParams);
+        changsMap();
+    } catch (error) {}
+};
 
 onMounted(() => {
-
-  // let reg = new RegExp('(^|&)name=([^&]*)(&|$)', 'i');
-  // let r = window.location.href.substr(1).match(reg); //获取url中"?"符后的字符串并正则匹配
-  // let context = '';
-  // if (r) context = r[2];
-  currentParams = router.currentRoute.value.query
-  selectYear(10)
-  getCurrentMapJSON()
-  getThreeRate();
-  getPopleMailLists();
-  getDutyDay();
-  getMailTypeRankList();
-  getMailTrend();
-  getMapDataList()
-  getConsoleDataMap()
-  startRateAutoSwitch();
-  startTrendAutoSwitch();
-  startDutyAutoSwitch();
-  dayEcharts()
-  const width = tabsContainer.value.offsetWidth - 40;
-  chartWidth = width;
-
+    currentParams = router.currentRoute.value.query;
+    selectYear(10);
+    getCurrentMapJSON();
+    getThreeRate();
+    getPopleMailLists();
+    getDutyDay();
+    getMailTypeRankList();
+    getMailTrend();
+    getMapDataList();
+    getConsoleDataMap();
+    startRateAutoSwitch();
+    startTrendAutoSwitch();
+    startDutyAutoSwitch();
+    dayEcharts();
+    const width = tabsContainer.value.offsetWidth - 40;
+    chartWidth = width;
 });
 
-
-
 // 在组件卸载前清除计时器
 onUnmounted(() => {
-  clearRateTimer()
-  clearTrendTimer()
-  clearDutyTimer()
+    clearRateTimer();
+    clearTrendTimer();
+    clearDutyTimer();
 
-  clearCarouselTime()
+    clearCarouselTime();
 });
 
-
 const formatDate = (value) => {
-  const date = new Date(value);
-  return date.toLocaleString();
-}
+    const date = new Date(value);
+    return date.toLocaleString();
+};
 const startRateAutoSwitch = () => {
-  intervalIdRate = setInterval(() => {
-    if (rateActiveName.value === 'completionRate') {
-      rateActiveName.value = 'resolutionRate';
-    } else if (rateActiveName.value === 'resolutionRate') {
-      rateActiveName.value = 'satisfactionRate';
-    } else {
-      rateActiveName.value = 'completionRate';
-    }
-  }, intervalTimeRate);
+    intervalIdRate = setInterval(() => {
+        if (rateActiveName.value === "completionRate") {
+            rateActiveName.value = "resolutionRate";
+        } else if (rateActiveName.value === "resolutionRate") {
+            rateActiveName.value = "satisfactionRate";
+        } else {
+            rateActiveName.value = "completionRate";
+        }
+    }, intervalTimeRate);
 };
 
 const startTrendAutoSwitch = () => {
-  var dayChart = echarts.init(day_echart.value);
-  var monthChart = echarts.init(month_echart.value);
-  var weekChart = echarts.init(week_echart.value);
-  monthChart.resize(chartWidth)
-  dayChart.resize(chartWidth)
-  weekChart.resize(chartWidth)
-  intervalIdTrend = setInterval(() => {
-    if (trendActiveName.value === 'dayTrend') {
-      trendActiveName.value = 'weekTrend';
-      seenDay = false
-      seenWeek = true
-      seenMonth = false
-      weekEcharts()
-    } else if (trendActiveName.value === 'weekTrend') {
-      trendActiveName.value = 'monthTrend';
-      seenDay = false
-      seenWeek = false
-      seenMonth = true
-      monthEcharts()
-    } else {
-      trendActiveName.value = 'dayTrend';
-      seenDay = true
-      seenWeek = false
-      seenMonth = false
-      dayEcharts()
-    }
-  }, intervalTimeTrend);
+    var dayChart = echarts.init(day_echart.value);
+    var monthChart = echarts.init(month_echart.value);
+    var weekChart = echarts.init(week_echart.value);
+    monthChart.resize(chartWidth);
+    dayChart.resize(chartWidth);
+    weekChart.resize(chartWidth);
+    intervalIdTrend = setInterval(() => {
+        if (trendActiveName.value === "dayTrend") {
+            trendActiveName.value = "weekTrend";
+            seenDay = false;
+            seenWeek = true;
+            seenMonth = false;
+            weekEcharts();
+        } else if (trendActiveName.value === "weekTrend") {
+            trendActiveName.value = "monthTrend";
+            seenDay = false;
+            seenWeek = false;
+            seenMonth = true;
+            monthEcharts();
+        } else {
+            trendActiveName.value = "dayTrend";
+            seenDay = true;
+            seenWeek = false;
+            seenMonth = false;
+            dayEcharts();
+        }
+    }, intervalTimeTrend);
 };
 
 const startDutyAutoSwitch = () => {
-  intervalIdDuty = setInterval(() => {
-    if (dutyActiveName.value === 'dutySj') {
-      dutyActiveName.value = 'dutyFj';
-    } else if (dutyActiveName.value === 'dutyFj') {
-      dutyActiveName.value = 'dutyZd';
-    } else if (dutyActiveName.value === 'dutyZd') {
-      dutyActiveName.value = 'dutyBw';
-    } else {
-      dutyActiveName.value = 'dutySj';
-    }
-  }, intervalTimeDuty);
+    intervalIdDuty = setInterval(() => {
+        if (dutyActiveName.value === "dutySj") {
+            dutyActiveName.value = "dutyFj";
+        } else if (dutyActiveName.value === "dutyFj") {
+            dutyActiveName.value = "dutyZd";
+        } else if (dutyActiveName.value === "dutyZd") {
+            dutyActiveName.value = "dutyBw";
+        } else {
+            dutyActiveName.value = "dutySj";
+        }
+    }, intervalTimeDuty);
 };
 
-
 const clearCarouselTime = () => {
-  if (carouselTime) {
-    clearInterval(carouselTime);
-    carouselTime = null;
-  }
+    if (carouselTime) {
+        clearInterval(carouselTime);
+        carouselTime = null;
+    }
 };
 const clearRateTimer = () => {
-  if (intervalIdRate) {
-    clearInterval(intervalIdRate);
-    intervalIdRate = null;
-  }
-
+    if (intervalIdRate) {
+        clearInterval(intervalIdRate);
+        intervalIdRate = null;
+    }
 };
 
 const clearTrendTimer = () => {
-  if (intervalIdTrend) {
-    clearInterval(intervalIdTrend);
-    intervalIdTrend = null;
-  }
+    if (intervalIdTrend) {
+        clearInterval(intervalIdTrend);
+        intervalIdTrend = null;
+    }
 };
 const clearDutyTimer = () => {
-  if (intervalIdDuty) {
-    clearInterval(intervalIdDuty);
-    intervalIdDuty = null;
-  }
+    if (intervalIdDuty) {
+        clearInterval(intervalIdDuty);
+        intervalIdDuty = null;
+    }
 };
 const rateResetTimer = () => {
-  const width = tabsContainer.value.offsetWidth;
-  chartWidth = width;
-  clearRateTimer();
-  startRateAutoSwitch();
+    const width = tabsContainer.value.offsetWidth;
+    chartWidth = width;
+    clearRateTimer();
+    startRateAutoSwitch();
 };
 
-
 const trendResetTimer = (pane: TabsPaneContext, ev: Event) => {
-  const width = tabsContainer.value.offsetWidth;
-  chartWidth = width;
-  if (pane.paneName === 'dayTrend') {
-    seenDay = true
-    seenWeek = false
-    seenMonth = false
-  } else if (pane.paneName === 'weekTrend') {
-    seenDay = false
-    seenWeek = true
-    seenMonth = false
-  } else {
-    seenDay = false
-    seenWeek = false
-    seenMonth = true
-  }
-  dayEcharts()
-  monthEcharts()
-  weekEcharts()
-  clearTrendTimer();
-  startTrendAutoSwitch();
+    const width = tabsContainer.value.offsetWidth;
+    chartWidth = width;
+    if (pane.paneName === "dayTrend") {
+        seenDay = true;
+        seenWeek = false;
+        seenMonth = false;
+    } else if (pane.paneName === "weekTrend") {
+        seenDay = false;
+        seenWeek = true;
+        seenMonth = false;
+    } else {
+        seenDay = false;
+        seenWeek = false;
+        seenMonth = true;
+    }
+    dayEcharts();
+    monthEcharts();
+    weekEcharts();
+    clearTrendTimer();
+    startTrendAutoSwitch();
 };
 
 const dutyResetTimer = () => {
-  const width = tabsContainer.value.offsetWidth;
-  chartWidth = width;
-  clearDutyTimer();
-  startDutyAutoSwitch();
+    const width = tabsContainer.value.offsetWidth;
+    chartWidth = width;
+    clearDutyTimer();
+    startDutyAutoSwitch();
 };
 
-
-
-
 const changsMap = () => {
-  echarts.registerMap("map", currentMapJSON.geometry as any);
-  let myMap = echarts.init(map.value);
-  //设置配置项
-  myMap.setOption({
-    geo: {
-      // 是上面注册时的名字哦，registerMap（'名字保持一致'）
-      map: "map",
-    },
-    tooltip: {
-      show: mapShow,
-      trigger: 'item',
-      position: 'right',
-      formatter: function (params) {
-
-        if (typeof params.data === 'undefined') {
-
-        } else {
-          var tt = '<div class="tooltip">' +
-            '<div class="tooltip-title" > ' + params.name + '</div>' +
-            '<div class="tooltip-content" >' +
-            '<ul class="tooltip-ul">' +
-            '<li>今日来信 <span>' + params.data.todaysum + '</span></li>' +
-            '<li>来信总数 <span>' + params.data.allsum + '</span></li>' +
-            '<li>办结总数 <span>' + params.data.completed + '</span></li>' +
-            '<li>办结率 <span>' + params.data.completedrate + '</span></li>' +
-            '<li>解决率 <span>' + params.data.resolvedrate + '</span></li>' +
-            '<li>满意率 <span>' + params.data.satisfiedrate + '</span></li>' +
-            ' </ul></div></div>'
-          return tt;
-        }
-      },
-      backgroundColor: '#031577',      //
-      borderColor: '#0A2F86',
-      borderWidth: 0,                // 设置边框宽度为1像素
-      borderRadius: 3,               // 设置边框半径为3像素
-      shadowBlur: 0,                 // 设置阴影模糊程度为8像素
-      shadowOffsetX: 0,              // 设置水平阴影位移量为0像素
-      shadowOffsetY: 0,              // 设置垂直阴影位移量为6像素
-
-    },
-    visualMap: {
-      type: 'piecewise',
-      bottom: 10,
-      pieces: [
-        { gte: 85, lte: 100, label: '办结率高于85%' },
-        { gte: 65, lte: 85, label: '办结率低于85%' },
-        { gte: 0, lte: 65, label: '办结率低于65%' },
-      ],
-      // text: ['办结率'],
-      right: 10, // 右边距
-      bottom: 10, // 底边距
-      realtime: false,
-      orient: 'horizontal', // 水平显示
-      textStyle: {
-        color: '#fff', // 文字颜色
-      },
-      calculable: true,
-      inRange: {
-        color: ['#D34343', '#F6A149', '#4987F6']
-      }
-    },
-    series: [
-      {
-        name: '长沙',
-        type: 'map',
-        map: 'map',
-        hoverAnimation: true,
-        label: {
-          show: true,
-          color: "white",
+    echarts.registerMap("map", currentMapJSON.geometry as any);
+    let myMap = echarts.init(map.value);
+    //设置配置项
+    myMap.setOption({
+        geo: {
+            // 是上面注册时的名字哦，registerMap（'名字保持一致'）
+            map: "map",
         },
-        itemStyle: {
-          normal: {
-            areaColor: '#02215E'   // 这里将地图区域的颜色修改为红色
-          }
+        tooltip: {
+            show: mapShow,
+            trigger: "item",
+            position: "right",
+            formatter: function (params) {
+                if (typeof params.data === "undefined") {
+                } else {
+                    var tt =
+                        '<div class="tooltip">' +
+                        '<div class="tooltip-title" > ' +
+                        params.name +
+                        "</div>" +
+                        '<div class="tooltip-content" >' +
+                        '<ul class="tooltip-ul">' +
+                        "<li>今日来信 <span>" +
+                        params.data.todaysum +
+                        "</span></li>" +
+                        "<li>来信总数 <span>" +
+                        params.data.allsum +
+                        "</span></li>" +
+                        "<li>办结总数 <span>" +
+                        params.data.completed +
+                        "</span></li>" +
+                        "<li>办结率 <span>" +
+                        params.data.completedrate +
+                        "</span></li>" +
+                        "<li>解决率 <span>" +
+                        params.data.resolvedrate +
+                        "</span></li>" +
+                        "<li>满意率 <span>" +
+                        params.data.satisfiedrate +
+                        "</span></li>" +
+                        " </ul></div></div>";
+                    return tt;
+                }
+            },
+            backgroundColor: "#031577", //
+            borderColor: "#0A2F86",
+            borderWidth: 0, // 设置边框宽度为1像素
+            borderRadius: 3, // 设置边框半径为3像素
+            shadowBlur: 0, // 设置阴影模糊程度为8像素
+            shadowOffsetX: 0, // 设置水平阴影位移量为0像素
+            shadowOffsetY: 0, // 设置垂直阴影位移量为6像素
         },
-        data: mapDataList,
-      }
-    ]
-  });
-
-  //switchRegion(); // 开始自动切换
-
-}
-
+        visualMap: {
+            type: "piecewise",
+            bottom: 10,
+            pieces: [
+                { gte: 85, lte: 100, label: "办结率高于85%" },
+                { gte: 65, lte: 85, label: "办结率低于85%" },
+                { gte: 0, lte: 65, label: "办结率低于65%" },
+            ],
+            // text: ['办结率'],
+            right: 10, // 右边距
+            bottom: 10, // 底边距
+            realtime: false,
+            orient: "horizontal", // 水平显示
+            textStyle: {
+                color: "#fff", // 文字颜色
+            },
+            calculable: true,
+            inRange: {
+                color: ["#D34343", "#F6A149", "#4987F6"],
+            },
+        },
+        series: [
+            {
+                name: "长沙",
+                type: "map",
+                map: "map",
+                hoverAnimation: true,
+                label: {
+                    show: true,
+                    color: "white",
+                },
+                itemStyle: {
+                    normal: {
+                        areaColor: "#02215E", // 这里将地图区域的颜色修改为红色
+                    },
+                },
+                data: mapDataList,
+            },
+        ],
+    });
 
+    //switchRegion(); // 开始自动切换
+};
 
 const switchRegion = () => {
-  const chart = echarts.getInstanceByDom(map.value);
-  const option = chart.getOption();
-  const mapSeriesIndex = option.series.findIndex((series) => series.type === 'map');
-
-  if (mapSeriesIndex >= 0) {
-    const mapData = option.series[mapSeriesIndex].data;
-    const regionCount = mapData.length;
-    const prevIndex = currentIndex;
-    currentIndex = (currentIndex + 1) % regionCount;
-
-
-    //mapData[prevIndex].selected = false; // 取消上一个区域的选中状态
-    // mapData[currentIndex].selected = true; // 设置当前区域为选中状态
-
-    var hourIndex = 0;
-
-
-    carouselTime = setInterval(() => {
-      //dispatchAction echarts的API：触发图表行为
-      chart.dispatchAction({
-        type: "downplay", //downplay 取消高亮指定的数据图形
-        seriesIndex: 0
-      });
-      chart.dispatchAction({
-        type: "highlight", //highLight 高亮指定的数据图形
-        seriesIndex: 0, //系列index
-        dataIndex: hourIndex //数据index
-      });
-      chart.dispatchAction({
-        type: "showTip", //showTip 显示提示框
-        seriesIndex: 0,
-        dataIndex: hourIndex
-      });
-      hourIndex++;
-      //当循环到数组当中的最后一条数据后，重新进行循环
-      if (hourIndex > mapData.length) {
-        hourIndex = 0;
-      }
-    }, 3000);
-    //鼠标移入组件时停止轮播
-    chart.on("mousemove", (e) => {
-      clearInterval(carouselTime); //清除循环
-      chart.dispatchAction({
-        type: "downplay",
-        seriesIndex: 0,
-      });
-      chart.dispatchAction({
-        type: "highlight",
-        seriesIndex: 0,
-        dataIndex: e.dataIndex
-      });
-      chart.dispatchAction({
-        type: "showTip",
-        seriesIndex: 0,
-        dataIndex: e.dataIndex
-      });
-    });
-    //鼠标移出组件时恢复轮播
-    chart.on("mouseout", () => {
-      carouselTime = setInterval(() => {
-        chart.dispatchAction({
-          type: "downplay",
-          seriesIndex: 0,
-
-        });
-        chart.dispatchAction({
-          type: "highlight",
-          seriesIndex: 0,
-          dataIndex: hourIndex
+    const chart = echarts.getInstanceByDom(map.value);
+    const option = chart.getOption();
+    const mapSeriesIndex = option.series.findIndex(
+        (series) => series.type === "map"
+    );
+
+    if (mapSeriesIndex >= 0) {
+        const mapData = option.series[mapSeriesIndex].data;
+        const regionCount = mapData.length;
+        const prevIndex = currentIndex;
+        currentIndex = (currentIndex + 1) % regionCount;
+
+        //mapData[prevIndex].selected = false; // 取消上一个区域的选中状态
+        // mapData[currentIndex].selected = true; // 设置当前区域为选中状态
+
+        var hourIndex = 0;
+
+        carouselTime = setInterval(() => {
+            //dispatchAction echarts的API：触发图表行为
+            chart.dispatchAction({
+                type: "downplay", //downplay 取消高亮指定的数据图形
+                seriesIndex: 0,
+            });
+            chart.dispatchAction({
+                type: "highlight", //highLight 高亮指定的数据图形
+                seriesIndex: 0, //系列index
+                dataIndex: hourIndex, //数据index
+            });
+            chart.dispatchAction({
+                type: "showTip", //showTip 显示提示框
+                seriesIndex: 0,
+                dataIndex: hourIndex,
+            });
+            hourIndex++;
+            //当循环到数组当中的最后一条数据后，重新进行循环
+            if (hourIndex > mapData.length) {
+                hourIndex = 0;
+            }
+        }, 3000);
+        //鼠标移入组件时停止轮播
+        chart.on("mousemove", (e) => {
+            clearInterval(carouselTime); //清除循环
+            chart.dispatchAction({
+                type: "downplay",
+                seriesIndex: 0,
+            });
+            chart.dispatchAction({
+                type: "highlight",
+                seriesIndex: 0,
+                dataIndex: e.dataIndex,
+            });
+            chart.dispatchAction({
+                type: "showTip",
+                seriesIndex: 0,
+                dataIndex: e.dataIndex,
+            });
         });
-        chart.dispatchAction({
-          type: "showTip",
-          seriesIndex: 0,
-          dataIndex: hourIndex
+        //鼠标移出组件时恢复轮播
+        chart.on("mouseout", () => {
+            carouselTime = setInterval(() => {
+                chart.dispatchAction({
+                    type: "downplay",
+                    seriesIndex: 0,
+                });
+                chart.dispatchAction({
+                    type: "highlight",
+                    seriesIndex: 0,
+                    dataIndex: hourIndex,
+                });
+                chart.dispatchAction({
+                    type: "showTip",
+                    seriesIndex: 0,
+                    dataIndex: hourIndex,
+                });
+                hourIndex++;
+                if (hourIndex > mapData.length) {
+                    hourIndex = 0;
+                }
+            }, 3000);
         });
-        hourIndex++;
-        if (hourIndex > mapData.length) {
-          hourIndex = 0;
-        }
-      }, 3000);
-    });
-    chart.setOption(option);
-  }
+        chart.setOption(option);
+    }
 };
 
 const dayEcharts = () => {
-  // 基于准备好的dom，初始化echarts实例
-  var myChart = echarts.init(day_echart.value);
-
-  let option = {
-    tooltip: {
-      trigger: 'axis',
-      axisPointer: {
-        lineStyle: {
-          color: '#dddc6b'
-        }
-      }
-    },
-    legend: {
-      top: '0%',
-      right: '0%',
-      data: ['信件数'],
-      textStyle: {
-        color: 'rgba(255,255,255,.5)',
-        fontSize: '12',
-      }
-    },
-    grid: {
-      left: '10',
-      top: '30',
-      right: '10',
-      bottom: '10',
-      containLabel: true
-    },
-
-    xAxis: [{
-      type: 'category',
-      boundaryGap: false,
-      axisLabel: {
-        textStyle: {
-          color: "rgba(255,255,255,.6)",
-          fontSize: 12,
-        },
-      },
-      axisLine: {
-        lineStyle: {
-          color: 'rgba(255,255,255,.2)'
-        }
-
-      },
-
-      data: dayXList
-
-    }, {
-
-      axisPointer: { show: false },
-      axisLine: { show: false },
-      position: 'bottom',
-      offset: 20,
-
-
-
-    }],
-
-    yAxis: [{
-      type: 'value',
-      axisTick: { show: false },
-      axisLine: {
-        lineStyle: {
-          color: 'rgba(255,255,255,.1)'
-        }
-      },
-      axisLabel: {
-        textStyle: {
-          color: "rgba(255,255,255,.6)",
-          fontSize: 12,
+    // 基于准备好的dom，初始化echarts实例
+    var myChart = echarts.init(day_echart.value);
+
+    let option = {
+        tooltip: {
+            trigger: "axis",
+            axisPointer: {
+                lineStyle: {
+                    color: "#dddc6b",
+                },
+            },
         },
-      },
-
-      splitLine: {
-        lineStyle: {
-          color: 'rgba(255,255,255,.1)'
-        }
-      }
-    }],
-    series: [
-      {
-        name: '信件数',
-        type: 'line',
-        smooth: true,
-        symbol: 'circle',
-        symbolSize: 5,
-        showSymbol: false,
-        lineStyle: {
-
-          normal: {
-            color: '#0184d5',
-            width: 2
-          }
-        },
-        areaStyle: {
-          normal: {
-            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-              offset: 0,
-              color: 'rgba(1, 132, 213, 0.4)'
-            }, {
-              offset: 0.8,
-              color: 'rgba(1, 132, 213, 0.1)'
-            }], false),
-            shadowColor: 'rgba(0, 0, 0, 0.1)',
-          }
+        legend: {
+            top: "0%",
+            right: "0%",
+            data: ["信件数"],
+            textStyle: {
+                color: "rgba(255,255,255,.5)",
+                fontSize: "12",
+            },
         },
-        itemStyle: {
-          normal: {
-            color: '#0184d5',
-            borderColor: 'rgba(221, 220, 107, .1)',
-            borderWidth: 12
-          }
+        grid: {
+            left: "10",
+            top: "30",
+            right: "10",
+            bottom: "10",
+            containLabel: true,
         },
-        data: dayYList
-
-      }
-
-    ]
 
-  };
-
-  // 使用刚指定的配置项和数据显示图表。
-  myChart.setOption(option);
-  window.addEventListener("resize", function () {
-    myChart.resize(chartWidth);
-  });
-}
+        xAxis: [
+            {
+                type: "category",
+                boundaryGap: false,
+                axisLabel: {
+                    textStyle: {
+                        color: "rgba(255,255,255,.6)",
+                        fontSize: 12,
+                    },
+                },
+                axisLine: {
+                    lineStyle: {
+                        color: "rgba(255,255,255,.2)",
+                    },
+                },
+
+                data: dayXList,
+            },
+            {
+                axisPointer: { show: false },
+                axisLine: { show: false },
+                position: "bottom",
+                offset: 20,
+            },
+        ],
+
+        yAxis: [
+            {
+                type: "value",
+                axisTick: { show: false },
+                axisLine: {
+                    lineStyle: {
+                        color: "rgba(255,255,255,.1)",
+                    },
+                },
+                axisLabel: {
+                    textStyle: {
+                        color: "rgba(255,255,255,.6)",
+                        fontSize: 12,
+                    },
+                },
+
+                splitLine: {
+                    lineStyle: {
+                        color: "rgba(255,255,255,.1)",
+                    },
+                },
+            },
+        ],
+        series: [
+            {
+                name: "信件数",
+                type: "line",
+                smooth: true,
+                symbol: "circle",
+                symbolSize: 5,
+                showSymbol: false,
+                lineStyle: {
+                    normal: {
+                        color: "#0184d5",
+                        width: 2,
+                    },
+                },
+                areaStyle: {
+                    normal: {
+                        color: new echarts.graphic.LinearGradient(
+                            0,
+                            0,
+                            0,
+                            1,
+                            [
+                                {
+                                    offset: 0,
+                                    color: "rgba(1, 132, 213, 0.4)",
+                                },
+                                {
+                                    offset: 0.8,
+                                    color: "rgba(1, 132, 213, 0.1)",
+                                },
+                            ],
+                            false
+                        ),
+                        shadowColor: "rgba(0, 0, 0, 0.1)",
+                    },
+                },
+                itemStyle: {
+                    normal: {
+                        color: "#0184d5",
+                        borderColor: "rgba(221, 220, 107, .1)",
+                        borderWidth: 12,
+                    },
+                },
+                data: dayYList,
+            },
+        ],
+    };
+
+    // 使用刚指定的配置项和数据显示图表。
+    myChart.setOption(option);
+    window.addEventListener("resize", function () {
+        myChart.resize(chartWidth);
+    });
+};
 
 const monthEcharts = () => {
-  // 基于准备好的dom，初始化echarts实例
-  var myChart = echarts.init(month_echart.value);
-  let option1 = {
-    tooltip: {
-      trigger: 'axis',
-      axisPointer: {
-        lineStyle: {
-          color: '#dddc6b'
-        }
-      }
-    },
-    legend: {
-      top: '0%',
-      right: '0%',
-      data: ['信件数'],
-      textStyle: {
-        color: 'rgba(255,255,255,.5)',
-        fontSize: '12',
-      }
-    },
-    grid: {
-      left: '10',
-      top: '30',
-      right: '10',
-      bottom: '10',
-      containLabel: true
-    },
-
-    xAxis: [{
-      type: 'category',
-      boundaryGap: false,
-      axisLabel: {
-        textStyle: {
-          color: "rgba(255,255,255,.6)",
-          fontSize: 12,
-        },
-      },
-      axisLine: {
-        lineStyle: {
-          color: 'rgba(255,255,255,.2)'
-        }
-
-      },
-
-      data: monthXList
-
-    }, {
-
-      axisPointer: { show: false },
-      axisLine: { show: false },
-      position: 'bottom',
-      offset: 20,
-
-
-
-    }],
-
-    yAxis: [{
-      type: 'value',
-      axisTick: { show: false },
-      axisLine: {
-        lineStyle: {
-          color: 'rgba(255,255,255,.1)'
-        }
-      },
-      axisLabel: {
-        textStyle: {
-          color: "rgba(255,255,255,.6)",
-          fontSize: 12,
-        },
-      },
-
-      splitLine: {
-        lineStyle: {
-          color: 'rgba(255,255,255,.1)'
-        }
-      }
-    }],
-    series: [
-      {
-        name: '信件数',
-        type: 'line',
-        smooth: true,
-        symbol: 'circle',
-        symbolSize: 5,
-        showSymbol: false,
-        lineStyle: {
-
-          normal: {
-            color: '#0184d5',
-            width: 2
-          }
+    // 基于准备好的dom，初始化echarts实例
+    var myChart = echarts.init(month_echart.value);
+    let option1 = {
+        tooltip: {
+            trigger: "axis",
+            axisPointer: {
+                lineStyle: {
+                    color: "#dddc6b",
+                },
+            },
         },
-        areaStyle: {
-          normal: {
-            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-              offset: 0,
-              color: 'rgba(1, 132, 213, 0.4)'
-            }, {
-              offset: 0.8,
-              color: 'rgba(1, 132, 213, 0.1)'
-            }], false),
-            shadowColor: 'rgba(0, 0, 0, 0.1)',
-          }
+        legend: {
+            top: "0%",
+            right: "0%",
+            data: ["信件数"],
+            textStyle: {
+                color: "rgba(255,255,255,.5)",
+                fontSize: "12",
+            },
         },
-        itemStyle: {
-          normal: {
-            color: '#0184d5',
-            borderColor: 'rgba(221, 220, 107, .1)',
-            borderWidth: 12
-          }
+        grid: {
+            left: "10",
+            top: "30",
+            right: "10",
+            bottom: "10",
+            containLabel: true,
         },
-        data: monthYList
-
-      }
-
-    ]
-
-  };
-  // 使用刚指定的配置项和数据显示图表。
-  myChart.setOption(option1);
-
-  window.addEventListener("resize", function () {
-    myChart.resize(chartWidth);
-  });
-}
 
+        xAxis: [
+            {
+                type: "category",
+                boundaryGap: false,
+                axisLabel: {
+                    textStyle: {
+                        color: "rgba(255,255,255,.6)",
+                        fontSize: 12,
+                    },
+                },
+                axisLine: {
+                    lineStyle: {
+                        color: "rgba(255,255,255,.2)",
+                    },
+                },
+
+                data: monthXList,
+            },
+            {
+                axisPointer: { show: false },
+                axisLine: { show: false },
+                position: "bottom",
+                offset: 20,
+            },
+        ],
+
+        yAxis: [
+            {
+                type: "value",
+                axisTick: { show: false },
+                axisLine: {
+                    lineStyle: {
+                        color: "rgba(255,255,255,.1)",
+                    },
+                },
+                axisLabel: {
+                    textStyle: {
+                        color: "rgba(255,255,255,.6)",
+                        fontSize: 12,
+                    },
+                },
+
+                splitLine: {
+                    lineStyle: {
+                        color: "rgba(255,255,255,.1)",
+                    },
+                },
+            },
+        ],
+        series: [
+            {
+                name: "信件数",
+                type: "line",
+                smooth: true,
+                symbol: "circle",
+                symbolSize: 5,
+                showSymbol: false,
+                lineStyle: {
+                    normal: {
+                        color: "#0184d5",
+                        width: 2,
+                    },
+                },
+                areaStyle: {
+                    normal: {
+                        color: new echarts.graphic.LinearGradient(
+                            0,
+                            0,
+                            0,
+                            1,
+                            [
+                                {
+                                    offset: 0,
+                                    color: "rgba(1, 132, 213, 0.4)",
+                                },
+                                {
+                                    offset: 0.8,
+                                    color: "rgba(1, 132, 213, 0.1)",
+                                },
+                            ],
+                            false
+                        ),
+                        shadowColor: "rgba(0, 0, 0, 0.1)",
+                    },
+                },
+                itemStyle: {
+                    normal: {
+                        color: "#0184d5",
+                        borderColor: "rgba(221, 220, 107, .1)",
+                        borderWidth: 12,
+                    },
+                },
+                data: monthYList,
+            },
+        ],
+    };
+    // 使用刚指定的配置项和数据显示图表。
+    myChart.setOption(option1);
+
+    window.addEventListener("resize", function () {
+        myChart.resize(chartWidth);
+    });
+};
 
 const weekEcharts = () => {
-  // 基于准备好的dom，初始化echarts实例
-  var myChart = echarts.init(week_echart.value);
-  let option1 = {
-    tooltip: {
-      trigger: 'axis',
-      axisPointer: {
-        lineStyle: {
-          color: '#dddc6b'
-        }
-      }
-    },
-    legend: {
-      top: '0%',
-      right: '0%',
-      data: ['信件数'],
-      textStyle: {
-        color: 'rgba(255,255,255,.5)',
-        fontSize: '12',
-      }
-    },
-    grid: {
-      left: '10',
-      top: '30',
-      right: '10',
-      bottom: '10',
-      containLabel: true
-    },
-
-    xAxis: [{
-      type: 'category',
-      boundaryGap: false,
-      axisLabel: {
-        textStyle: {
-          color: "rgba(255,255,255,.6)",
-          fontSize: 12,
+    // 基于准备好的dom，初始化echarts实例
+    var myChart = echarts.init(week_echart.value);
+    let option1 = {
+        tooltip: {
+            trigger: "axis",
+            axisPointer: {
+                lineStyle: {
+                    color: "#dddc6b",
+                },
+            },
+        },
+        legend: {
+            top: "0%",
+            right: "0%",
+            data: ["信件数"],
+            textStyle: {
+                color: "rgba(255,255,255,.5)",
+                fontSize: "12",
+            },
+        },
+        grid: {
+            left: "10",
+            top: "30",
+            right: "10",
+            bottom: "10",
+            containLabel: true,
         },
-      },
-      axisLine: {
-        lineStyle: {
-          color: 'rgba(255,255,255,.2)'
-        }
-
-      },
-
-      data: weekXList
-
-    }, {
-
-      axisPointer: { show: false },
-      axisLine: { show: false },
-      position: 'bottom',
-      offset: 20,
-
-
 
-    }],
+        xAxis: [
+            {
+                type: "category",
+                boundaryGap: false,
+                axisLabel: {
+                    textStyle: {
+                        color: "rgba(255,255,255,.6)",
+                        fontSize: 12,
+                    },
+                },
+                axisLine: {
+                    lineStyle: {
+                        color: "rgba(255,255,255,.2)",
+                    },
+                },
+
+                data: weekXList,
+            },
+            {
+                axisPointer: { show: false },
+                axisLine: { show: false },
+                position: "bottom",
+                offset: 20,
+            },
+        ],
+
+        yAxis: [
+            {
+                type: "value",
+                axisTick: { show: false },
+                axisLine: {
+                    lineStyle: {
+                        color: "rgba(255,255,255,.1)",
+                    },
+                },
+                axisLabel: {
+                    textStyle: {
+                        color: "rgba(255,255,255,.6)",
+                        fontSize: 12,
+                    },
+                },
+
+                splitLine: {
+                    lineStyle: {
+                        color: "rgba(255,255,255,.1)",
+                    },
+                },
+            },
+        ],
+        series: [
+            {
+                name: "信件数",
+                type: "line",
+                smooth: true,
+                symbol: "circle",
+                symbolSize: 5,
+                showSymbol: false,
+                lineStyle: {
+                    normal: {
+                        color: "#0184d5",
+                        width: 2,
+                    },
+                },
+                areaStyle: {
+                    normal: {
+                        color: new echarts.graphic.LinearGradient(
+                            0,
+                            0,
+                            0,
+                            1,
+                            [
+                                {
+                                    offset: 0,
+                                    color: "rgba(1, 132, 213, 0.4)",
+                                },
+                                {
+                                    offset: 0.8,
+                                    color: "rgba(1, 132, 213, 0.1)",
+                                },
+                            ],
+                            false
+                        ),
+                        shadowColor: "rgba(0, 0, 0, 0.1)",
+                    },
+                },
+                itemStyle: {
+                    normal: {
+                        color: "#0184d5",
+                        borderColor: "rgba(221, 220, 107, .1)",
+                        borderWidth: 12,
+                    },
+                },
+                data: weekYList,
+            },
+        ],
+    };
+    // 使用刚指定的配置项和数据显示图表。
+    myChart.setOption(option1);
+
+    window.addEventListener("resize", function () {
+        myChart.resize(chartWidth);
+    });
+};
+const queryDetails = async (data: any) => {
+    mapShow = false;
+    changsMap();
+    showDetails.value = true;
+    await nextTick();
+    detailsRef.value?.open("details");
+    detailsRef.value?.getDetail(data);
+};
 
-    yAxis: [{
-      type: 'value',
-      axisTick: { show: false },
-      axisLine: {
-        lineStyle: {
-          color: 'rgba(255,255,255,.1)'
-        }
-      },
-      axisLabel: {
-        textStyle: {
-          color: "rgba(255,255,255,.6)",
-          fontSize: 12,
-        },
-      },
+const closeDetails = () => {
+    mapShow = true;
+    changsMap();
+    showDetails.value = false;
+}
 
-      splitLine: {
-        lineStyle: {
-          color: 'rgba(255,255,255,.1)'
-        }
-      }
-    }],
-    series: [
-      {
-        name: '信件数',
-        type: 'line',
-        smooth: true,
-        symbol: 'circle',
-        symbolSize: 5,
-        showSymbol: false,
-        lineStyle: {
-
-          normal: {
-            color: '#0184d5',
-            width: 2
-          }
-        },
-        areaStyle: {
-          normal: {
-            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-              offset: 0,
-              color: 'rgba(1, 132, 213, 0.4)'
-            }, {
-              offset: 0.8,
-              color: 'rgba(1, 132, 213, 0.1)'
-            }], false),
-            shadowColor: 'rgba(0, 0, 0, 0.1)',
-          }
-        },
-        itemStyle: {
-          normal: {
-            color: '#0184d5',
-            borderColor: 'rgba(221, 220, 107, .1)',
-            borderWidth: 12
-          }
-        },
-        data: weekYList
+function getColor(val) {
+    if (val >= 80) {
+        return "linear-gradient(270deg, #A2D203 0%, #87B502 100%)";
+    }
+    if (val >= 70) {
+        return "linear-gradient(90deg, #FA8721 0%, #FFC927 100%)";
+    }
+    return "linear-gradient(90deg, #FD0D0D 0%, #FF8C45 100%)";
+}
+</script>
+<style>
+@import "assets/css/index.css";
 
-      }
+body {
+    background-color: #030b39;
+}
 
-    ]
+.body {
+    background-image: url("@/assets/bg.png");
+    /* 背景图片的路径 */
+    background-size: cover;
+    /* 背景图片大小适应容器 */
+}
 
-  };
-  // 使用刚指定的配置项和数据显示图表。
-  myChart.setOption(option1);
+.ratebar i {
+    line-height: 2rem;
+    font-style: normal;
+    padding-left: 1rem;
+    color: #49bcf7;
+    font-size: 1.6rem;
+}
 
-  window.addEventListener("resize", function () {
-    myChart.resize(chartWidth);
-  });
+.ratenav {
+    /*  width:calc(100% - 5rem)*/
+    width: 200px;
 }
-const queryDetails = async (data: any) => {
-  mapShow = false
-  changsMap()
-  showDetails.value = true
-  await nextTick()
-  detailsRef.value?.open('details')
-  detailsRef.value?.getDetail(data)
+
+.ratenav p {
+    color: #fff;
+    font-size: 1.5rem;
+    padding-bottom: 0.5rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
-const closeDetails = () => {
-  mapShow = true
-  changsMap()
-  showDetails.value = false
+.rates li > span {
+    width: 120px;
+    font-size: 16px;
+    color: #ffffff;
+    text-align: right;
+    font-weight: 400;
+    padding-right: 5px;
+    border-radius: 0.05rem;
+    margin-right: 0.1rem;
 }
 
-</script>
-<style lang="less"></style>
\ No newline at end of file
+.ratesum {
+    font-size: 1.6rem;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/datascreen/index.vue b/src/views/datascreen/index.vue
index 787dd69..1a17d6e 100644
--- a/src/views/datascreen/index.vue
+++ b/src/views/datascreen/index.vue
@@ -1,369 +1,746 @@
 <template>
-  <!--头部-->
-  <div class="body">
-    <div class="header">
-      <img src="@/assets/logo.png">
-    </div>
-    <!--主体-->
-    <div class="main clearfix">
-      <div class="main-left">
-        <div class="box-container">
-          <div class="name-title">
-            今日值班
-          </div>
-          <div>
-            <el-tabs v-model="dutyActiveName" class="echart-tabs" type="card" @tab-click="dutyResetTimer">
-              <el-scrollbar>
-                <el-tab-pane label="市局专班" name="dutySj">
-                  <div class="boxRightMailCon">
-                    <ul class="dutyUl">
-                      <li v-for="item in dutySjList" :key="item.id">
-                        <p><span class="dutyDept">{{ item.departName }}</span> <span class="dutyULspan">{{ item.mobile
-                            }}</span> <span class="dutyULspan">{{ item.policeName }}</span></p>
-                      </li>
-
-                    </ul>
-                  </div>
-
-                </el-tab-pane>
-                <el-tab-pane label="分县市局" name="dutyFj">
-                  <ul class="dutyUl">
-                    <li v-for="item in dutyList.dutyFjList" :key="item.id">
-                      <p><span class="dutyDept">{{ item.departName }}</span> <span class="dutyULspan">{{ item.mobile
-                          }}</span> <span class="dutyULspan">{{ item.policeName }}</span></p>
-                    </li>
-
-                  </ul>
-
-                </el-tab-pane>
-                <el-tab-pane label="支队" name="dutyZd">
-                  <ul class="dutyUl">
-                    <li v-for="item in dutyList.dutyZdList" :key="item.id">
-                      <p><span class="dutyDept">{{ item.departName }}</span> <span class="dutyULspan">{{ item.mobile
-                          }}</span> <span class="dutyULspan">{{ item.policeName }}</span></p>
-                    </li>
-
-                  </ul>
-                </el-tab-pane>
-                <el-tab-pane label="部委组警校" name="dutyBw">
-                  <ul class="dutyUl">
-                    <li v-for="item in dutyList.dutyBwList" :key="item.id">
-                      <p><span class="dutyDept">{{ item.departName }}</span> <span class="dutyULspan">{{ item.mobile
-                          }}</span> <span class="dutyULspan">{{ item.policeName }}</span></p>
-                    </li>
-
-                  </ul>
-                </el-tab-pane>
-              </el-scrollbar>
-            </el-tabs>
-          </div>
-
+    <!--头部-->
+    <div class="body">
+        <div class="header">
+            <img src="@/assets/logo.png" />
         </div>
-        <div class="box-container">
-          <el-tabs v-model="rateName" class="echart-tabs" type="card" @tab-click="categoryChange">
-            <div @mouseenter="clearRateTimer" @mouseleave="startRateAutoSwitch">
-              <el-tab-pane label="分县市局三率排名" name="county">
-                <el-tabs v-model="rateActiveName" class="echart-tabs" @tab-click="rateResetTimer" type="card">
-                  <el-tab-pane label="办结率" name="completionRate">
-                    <div class="ratesbox rates">
-                      <ul class="h100 animated-list">
-                        <li v-for="item in rateMap.completeList" :key="item.id">
-                          <span>{{ item.name }}</span>
-                          <div class="ratenav" width="80%">
-                            <div class="ratebar"><span :style="{ width: item.rate }"></span></div>
-                          </div>
-                          <div class="ratesum">
-                            <p>{{ item.rate }}<span class="ratespan"><i>{{ item.completed }} / </i>{{ item.sum }}</span>
-                            </p>
-                          </div>
-                        </li>
-                      </ul>
-                    </div>
-                  </el-tab-pane>
-                  <el-tab-pane label="解决率" name="resolutionRate">
-                    <div class="ratesbox rates">
-                      <ul class="h100 animated-list">
-                        <li v-for="item in rateMap.resolvedList" :key="item.id">
-                          <span>{{ item.name }}</span>
-                          <div class="ratenav" width="80%">
-                            <div class="ratebar"><span :style="{ width: item.rate }"></span></div>
-                          </div>
-                          <div class="ratesum">
-                            <p>{{ item.rate }}<span class="ratespan"><i>{{ item.resolved }} / </i>{{ item.sum }}</span>
-                            </p>
-                          </div>
-                        </li>
-                      </ul>
-                    </div>
-                  </el-tab-pane>
-                  <el-tab-pane label="满意率" name="satisfactionRate">
-                    <div class="ratesbox rates">
-                      <ul class="h100 animated-list">
-                        <li v-for="item in rateMap.satisfiedList" :key="item.id">
-                          <span>{{ item.name }}</span>
-                          <div class="ratenav" width="80%">
-                            <div class="ratebar"><span :style="{ width: item.rate }"></span></div>
-                          </div>
-                          <div class="ratesum">
-                            <p>{{ item.rate }}<span class="ratespan"><i>{{ item.satisfied }} / </i>{{ item.sum }}</span>
-                            </p>
-                          </div>
-                        </li>
-                      </ul>
+        <!--主体-->
+        <div class="main clearfix">
+            <div class="main-left">
+                <div class="box-container">
+                    <div class="name-title">今日值班</div>
+                    <div>
+                        <el-tabs
+                            v-model="dutyActiveName"
+                            class="echart-tabs"
+                            type="card"
+                            @tab-click="dutyResetTimer"
+                        >
+                            <el-scrollbar>
+                                <el-tab-pane label="市局专班" name="dutySj">
+                                    <div class="boxRightMailCon">
+                                        <ul class="dutyUl">
+                                            <li
+                                                v-for="item in dutySjList"
+                                                :key="item.id"
+                                            >
+                                                <p>
+                                                    <span class="dutyDept">{{
+                                                        item.departName
+                                                    }}</span>
+                                                    <span class="dutyULspan">{{
+                                                        item.mobile
+                                                    }}</span>
+                                                    <span class="dutyULspan">{{
+                                                        item.policeName
+                                                    }}</span>
+                                                </p>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                </el-tab-pane>
+                                <el-tab-pane label="分县市局" name="dutyFj">
+                                    <ul class="dutyUl">
+                                        <li
+                                            v-for="item in dutyList.dutyFjList"
+                                            :key="item.id"
+                                        >
+                                            <p>
+                                                <span class="dutyDept">{{
+                                                    item.departName
+                                                }}</span>
+                                                <span class="dutyULspan">{{
+                                                    item.mobile
+                                                }}</span>
+                                                <span class="dutyULspan">{{
+                                                    item.policeName
+                                                }}</span>
+                                            </p>
+                                        </li>
+                                    </ul>
+                                </el-tab-pane>
+                                <el-tab-pane label="支队" name="dutyZd">
+                                    <ul class="dutyUl">
+                                        <li
+                                            v-for="item in dutyList.dutyZdList"
+                                            :key="item.id"
+                                        >
+                                            <p>
+                                                <span class="dutyDept">{{
+                                                    item.departName
+                                                }}</span>
+                                                <span class="dutyULspan">{{
+                                                    item.mobile
+                                                }}</span>
+                                                <span class="dutyULspan">{{
+                                                    item.policeName
+                                                }}</span>
+                                            </p>
+                                        </li>
+                                    </ul>
+                                </el-tab-pane>
+                                <el-tab-pane label="部委组警校" name="dutyBw">
+                                    <ul class="dutyUl">
+                                        <li
+                                            v-for="item in dutyList.dutyBwList"
+                                            :key="item.id"
+                                        >
+                                            <p>
+                                                <span class="dutyDept">{{
+                                                    item.departName
+                                                }}</span>
+                                                <span class="dutyULspan">{{
+                                                    item.mobile
+                                                }}</span>
+                                                <span class="dutyULspan">{{
+                                                    item.policeName
+                                                }}</span>
+                                            </p>
+                                        </li>
+                                    </ul>
+                                </el-tab-pane>
+                            </el-scrollbar>
+                        </el-tabs>
                     </div>
-                  </el-tab-pane>
-                </el-tabs>
-              </el-tab-pane>
-
-
-              <el-tab-pane label="部委支队三率排名" name="branch">
-                <div>
-                  <el-tabs v-model="rateActiveName" class="echart-tabs" @tab-click="rateResetTimer" type="card">
-                    <el-tab-pane label="办结率" name="completionRate">
-                      <div class="ratesbox rates">
-                        <ul class="h100 animated-list">
-                          <li v-for="item in rateBranch.completeList" :key="item.id">
-                            <span style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{ item.name
-                              }}</span>
-                            <div class="ratenav" width="80%">
-                              <div class="ratebar"><span :style="{ width: item.rate }"></span></div>
-                            </div>
-                            <div class="ratesum">
-                              <p>{{ item.rate }}<span class="ratespan"><i>{{ item.completed }} / </i>{{ item.sum
-                                  }}</span>
-                              </p>
-                            </div>
-                          </li>
-                        </ul>
-                      </div>
-                    </el-tab-pane>
-                    <el-tab-pane label="解决率" name="resolutionRate">
-                      <div class="ratesbox rates">
-                        <ul class="h100 animated-list">
-                          <li v-for="item in rateBranch.resolvedList" :key="item.id">
-                            <span style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{ item.name
-                              }}</span>
-                            <div class="ratenav" width="80%">
-                              <div class="ratebar"><span :style="{ width: item.rate }"></span></div>
-                            </div>
-                            <div class="ratesum">
-                              <p>{{ item.rate }}<span class="ratespan"><i>{{ item.resolved }} / </i>{{ item.sum
-                                  }}</span>
-                              </p>
-                            </div>
-                          </li>
-                        </ul>
-                      </div>
-                    </el-tab-pane>
-                    <el-tab-pane label="满意率" name="satisfactionRate">
-                      <div class="ratesbox rates">
-                        <ul class="h100 animated-list">
-                          <li v-for="item in rateBranch.satisfiedList" :key="item.id">
-                            <span style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{ item.name
-                              }}</span>
-                            <div class="ratenav" width="80%">
-                              <div class="ratebar"><span :style="{ width: item.rate }"></span></div>
-                            </div>
-                            <div class="ratesum">
-                              <p>{{ item.rate }}<span class="ratespan"><i>{{ item.satisfied }} / </i>{{ item.sum
-                                  }}</span>
-                              </p>
-                            </div>
-                          </li>
-                        </ul>
-                      </div>
-                    </el-tab-pane>
-                  </el-tabs>
                 </div>
-              </el-tab-pane>
+                <div class="box-container" @mouseenter="stopAnimate"
+                                                @mouseleave="startAnimate">
+                    <el-tabs
+                        v-model="rateName"
+                        class="echart-tabs"
+                        type="card"
+                        @tab-click="categoryChange"
+                        style="height: 100%"
+                    >
+                        <el-tab-pane
+                            label="分县市局三率排名"
+                            name="county"
+                            style="height: 100%"
+                        >
+                            <el-tabs
+                                v-model="rateActiveName"
+                                class="echart-tabs"
+                                @tab-click="rateResetTimer"
+                                type="card"
+                                style="height: 100%"
+                            >
+                                <el-tab-pane
+                                    label="办结率"
+                                    name="completionRate"
+                                    style="height: 100%"
+                                >
+                                    <el-scrollbar height="100%">
+                                        <div class="ratesbox rates">
+                                            <ul
+                                                class="h100 animated-list"
+                                                :animated="animated"
+                                            >
+                                                <li
+                                                    v-for="item in rateMap.completeList"
+                                                    :key="item.id"
+
+                                                >
+                                                    <span>{{ item.name }}</span>
+                                                    <div
+                                                        class="ratenav"
+                                                        width="80%"
+                                                    >
+                                                        <div class="ratebar">
+                                                            <span
+                                                                :style="{
+                                                                    width: item.rate,
+                                                                    background: getColor(item.ratenumber),
+                                                                }"
+                                                            ></span>
+                                                        </div>
+                                                    </div>
+                                                    <div class="ratesum">
+                                                        <p>
+                                                            {{ item.rate
+                                                            }}<span
+                                                                class="ratespan"
+                                                                ><i
+                                                                    >{{
+                                                                        item.completed
+                                                                    }}
+                                                                    / </i
+                                                                >{{
+                                                                    item.sum
+                                                                }}</span
+                                                            >
+                                                        </p>
+                                                    </div>
+                                                </li>
+                                            </ul>
+                                        </div>
+                                    </el-scrollbar>
+                                </el-tab-pane>
+                                <el-tab-pane
+                                    label="解决率"
+                                    name="resolutionRate"
+                                    style="height: 100%"
+                                >
+                                    <el-scrollbar height="100%">
+                                        <div class="ratesbox rates">
+                                            <ul class="h100 animated-list" :animated="animated">
+                                                <li
+                                                    v-for="item in rateMap.resolvedList"
+                                                    :key="item.id"
+                                                >
+                                                    <span>{{ item.name }}</span>
+                                                    <div
+                                                        class="ratenav"
+                                                        width="80%"
+                                                    >
+                                                        <div class="ratebar">
+                                                            <span
+                                                                :style="{
+                                                                    width: item.rate,
+                                                                    background: getColor(item.ratenumber),
+                                                                }"
+                                                            ></span>
+                                                        </div>
+                                                    </div>
+                                                    <div class="ratesum">
+                                                        <p>
+                                                            {{ item.rate
+                                                            }}<span class="ratespan"
+                                                                ><i
+                                                                    >{{
+                                                                        item.resolved
+                                                                    }}
+                                                                    / </i
+                                                                >{{
+                                                                    item.sum
+                                                                }}</span
+                                                            >
+                                                        </p>
+                                                    </div>
+                                                </li>
+                                            </ul>
+                                        </div>
+                                    </el-scrollbar>
+                                </el-tab-pane>
+                                <el-tab-pane
+                                    label="满意率"
+                                    name="satisfactionRate"
+                                    style="height: 100%"
+                                >
+                                    <el-scrollbar height="100%">
+                                        <div class="ratesbox rates">
+                                            <ul class="h100 animated-list" :animated="animated">
+                                                <li
+                                                    v-for="item in rateMap.satisfiedList"
+                                                    :key="item.id"
+                                                >
+                                                    <span>{{ item.name }}</span>
+                                                    <div
+                                                        class="ratenav"
+                                                        width="80%"
+                                                    >
+                                                        <div class="ratebar">
+                                                            <span
+                                                                :style="{
+                                                                    width: item.rate,
+                                                                    background: getColor(item.ratenumber),
+                                                                }"
+                                                            ></span>
+                                                        </div>
+                                                    </div>
+                                                    <div class="ratesum">
+                                                        <p>
+                                                            {{ item.rate
+                                                            }}<span class="ratespan"
+                                                                ><i
+                                                                    >{{
+                                                                        item.satisfied
+                                                                    }}
+                                                                    / </i
+                                                                >{{
+                                                                    item.sum
+                                                                }}</span
+                                                            >
+                                                        </p>
+                                                    </div>
+                                                </li>
+                                            </ul>
+                                        </div>
+                                    </el-scrollbar>
+                                </el-tab-pane>
+                            </el-tabs>
+                        </el-tab-pane>
+
+                        <el-tab-pane label="部委支队三率排名" name="branch" style="height: 100%">
+                            
+                                <el-tabs
+                                    v-model="rateActiveName"
+                                    class="echart-tabs"
+                                    @tab-click="rateResetTimer"
+                                    type="card"
+                                    style="height: 100%"
+                                >
+                                    <el-tab-pane
+                                        label="办结率"
+                                        name="completionRate"
+                                        style="height: 100%"
+                                    >
+                                    <el-scrollbar height="100%">
+                                        <div class="ratesbox rates">
+                                            <ul class="h100 animated-list" :animated="animated">
+                                                <li
+                                                    v-for="item in rateBranch.completeList"
+                                                    :key="item.id"
+                                                >
+                                                    <span
+                                                        style="
+                                                            white-space: nowrap;
+                                                            overflow: hidden;
+                                                            text-overflow: ellipsis;
+                                                        "
+                                                        >{{ item.name }}</span
+                                                    >
+                                                    <div
+                                                        class="ratenav"
+                                                        width="80%"
+                                                    >
+                                                        <div class="ratebar">
+                                                            <span
+                                                                :style="{
+                                                                    width: item.rate,
+                                                                    background: getColor(item.ratenumber),
+                                                                }"
+                                                            ></span>
+                                                        </div>
+                                                    </div>
+                                                    <div class="ratesum">
+                                                        <p>
+                                                            {{ item.rate
+                                                            }}<span
+                                                                class="ratespan"
+                                                                ><i
+                                                                    >{{
+                                                                        item.completed
+                                                                    }}
+                                                                    / </i
+                                                                >{{
+                                                                    item.sum
+                                                                }}</span
+                                                            >
+                                                        </p>
+                                                    </div>
+                                                </li>
+                                            </ul>
+                                        </div>
+                                    </el-scrollbar>
+                                    </el-tab-pane>
+                                    <el-tab-pane
+                                        label="解决率"
+                                        name="resolutionRate"
+                                        style="height: 100%"
+                                    >
+                                    <el-scrollbar height="100%">
+                                        <div class="ratesbox rates">
+                                            <ul class="h100 animated-list" :animated="animated">
+                                                <li
+                                                    v-for="item in rateBranch.resolvedList"
+                                                    :key="item.id"
+                                                >
+                                                    <span
+                                                        style="
+                                                            white-space: nowrap;
+                                                            overflow: hidden;
+                                                            text-overflow: ellipsis;
+                                                        "
+                                                        >{{ item.name }}</span
+                                                    >
+                                                    <div
+                                                        class="ratenav"
+                                                        width="80%"
+                                                    >
+                                                        <div class="ratebar">
+                                                            <span
+                                                                :style="{
+                                                                    width: item.rate,
+                                                                    background: getColor(item.ratenumber),
+                                                                }"
+                                                            ></span>
+                                                        </div>
+                                                    </div>
+                                                    <div class="ratesum">
+                                                        <p>
+                                                            {{ item.rate
+                                                            }}<span
+                                                                class="ratespan"
+                                                                ><i
+                                                                    >{{
+                                                                        item.resolved
+                                                                    }}
+                                                                    / </i
+                                                                >{{
+                                                                    item.sum
+                                                                }}</span
+                                                            >
+                                                        </p>
+                                                    </div>
+                                                </li>
+                                            </ul>
+                                        </div>
+                                    </el-scrollbar>
+                                    </el-tab-pane>
+                                    <el-tab-pane
+                                        label="满意率"
+                                        name="satisfactionRate"
+                                        style="height: 100%"
+                                    >
+                                    <el-scrollbar height="100%">
+                                        <div class="ratesbox rates">
+                                            <ul class="h100 animated-list" :animated="animated">
+                                                <li
+                                                    v-for="item in rateBranch.satisfiedList"
+                                                    :key="item.id"
+                                                >
+                                                    <span
+                                                        style="
+                                                            white-space: nowrap;
+                                                            overflow: hidden;
+                                                            text-overflow: ellipsis;
+                                                        "
+                                                        >{{ item.name }}</span
+                                                    >
+                                                    <div
+                                                        class="ratenav"
+                                                        width="80%"
+                                                    >
+                                                        <div class="ratebar">
+                                                            <span
+                                                                :style="{
+                                                                    width: item.rate,
+                                                                    background: getColor(item.ratenumber),
+                                                                }"
+                                                            ></span>
+                                                        </div>
+                                                    </div>
+                                                    <div class="ratesum">
+                                                        <p>
+                                                            {{ item.rate
+                                                            }}<span
+                                                                class="ratespan"
+                                                                ><i
+                                                                    >{{
+                                                                        item.satisfied
+                                                                    }}
+                                                                    / </i
+                                                                >{{
+                                                                    item.sum
+                                                                }}</span
+                                                            >
+                                                        </p>
+                                                    </div>
+                                                </li>
+                                            </ul>
+                                        </div>
+                                    </el-scrollbar>
+                                    </el-tab-pane>
+                                </el-tabs>
+                        </el-tab-pane>
+                    </el-tabs>
+                </div>
             </div>
-          </el-tabs>
-        </div>
-      </div>
-      <div class="main-middle">
-        <div class="border-console  ">
-          <div class="console-div">
-            <ul class="clearfix">
-              <li>
-                <h2 class="bulebg">{{ consoleMap.todaySum }}</h2><span>今日来信</span>
-              </li>
-              <li>
-                <h2 class="yellowbg">{{ consoleMap.allSum }}</h2><span>来信总数</span>
-              </li>
-              <li>
-                <h2 class="bulebg">{{ consoleMap.completedsum }}</h2><span>办结总数</span>
-              </li>
-              <li>
-                <el-popover placement="right-start" title="办结率计算方式" :width="200" trigger="hover" show-after="700"
-                  :content="completedrateContent" popper-class="custom-popover-style">
-                  <template #reference>
-                    <h2 class="yellowbg" v-show="consoleMap.completedrate">{{ consoleMap.completedrate }}</h2>
-                  </template>
-                </el-popover>
-                <span>办结率</span>
-              </li>
-              <li>
-                <el-popover placement="right-start" title="满意率计算方式" :width="200" trigger="hover" show-after="700"
-                  :content="satisfiedrateContent" popper-class="custom-popover-style">
-                  <template #reference>
-                    <h2 class="bulebg" v-show="consoleMap.satisfiedrate">{{ consoleMap.satisfiedrate }}</h2>
-                  </template>
-                </el-popover>
-                <span>满意率</span>
-              </li>
-              <li>
-                <el-popover placement="right-start" title="解决率计算方式" :width="200" trigger="hover" show-after="700"
-                  :content="resolvedrateContent" popper-class="custom-popover-style">
-                  <template #reference>
-                    <h2 class="yellowbg" v-show="consoleMap.resolvedrate">{{ consoleMap.resolvedrate }}</h2>
-                  </template>
-                </el-popover>
-                <span>解决率</span>
-              </li>
-            </ul>
-          </div>
-
-        </div>
-        <div class="border-console">
-          <div id="map" ref="map"></div>
-        </div>
-        <div class="mail-container">
-          <div class="name-title">
-            来信趋势
-          </div>
-          <div v-if="seenDay" class="trendOptions">
-            <el-select v-model="trendDayValue" class="m-2" :placeholder="selectTrend" size="small"
-              style="width: 100px;z-index: 3000;" @change="getMailTrend" popper-class="blueBack">
-              <el-option v-for="item in trendDayOptions" :key="item.value" :label="item.label" :value="item.value" />
-            </el-select>
-          </div>
-          <div v-if="seenWeek" class="trendOptions">
-            <el-select v-model="trendWeekValue" class="m-2" :placeholder="selectTrend" size="small"
-              style="width: 100px;z-index: 3000" @change="getMailTrend" popper-class="blueBack">
-              <el-option v-for="item in trendWeekOptions" :key="item.value" :label="item.label" :value="item.value" />
-            </el-select>
-          </div>
-
-          <div v-if="seenMonth" class="trendOptions">
-            <el-select v-model="trendMonthValue" class="m-2" :placeholder="selectTrend" size="small"
-              style="width: 100px;z-index: 3000" @change="getMailTrend" popper-class="blueBack">
-              <el-option v-for="item in trendMonthOptions" :key="item.value" :label="item.label" :value="item.value"
-                style="height:auto;max-height:300px;padding:0;" />
-            </el-select>
-          </div>
-
-          <div ref="tabsContainer">
-
-            <el-tabs v-model="trendActiveName" class="trend-tabs" type="card" @tab-click="trendResetTimer">
-              <el-tab-pane label="日趋势" name="dayTrend">
-                <div ref="day_echart" id="dayEchart" :style="{ width: chartWidth + 'px' }"></div>
-              </el-tab-pane>
-              <el-tab-pane label="周趋势" name="weekTrend">
-                <div ref="week_echart" id="weekEchart" :style="{ width: chartWidth + 'px' }"></div>
-              </el-tab-pane>
-              <el-tab-pane label="月趋势" name="monthTrend">
-                <div ref="month_echart" id="monthEchart" :style="{ width: chartWidth + 'px' }"></div>
-              </el-tab-pane>
-            </el-tabs>
-          </div>
-
-        </div>
-      </div>
-      <div class="main-right">
-
-
-        <div class="box-container">
-          <div class="name-title">
-            信件动态
-          </div>
-          <div class="boxLeftMailCon">
-            <ul class="mailUl">
-              <li v-for="item in peopleMaillist" :key="item.id" @click="queryDetails(item)">
-                <p>{{ item.contactName }} ：{{ item.contactPhone }}<span class="mailULspan">{{ item.mailState }}</span>
-                </p>
-                <p>{{ formatDate(item.createTime) }}</p>
-              </li>
-            </ul>
-          </div>
-
-        </div>
-        <div class="box-container">
-          <div class="name-title">
-            信件类型排名
-          </div>
-          <div class=" boxnav paim">
-            <ul class="h100">
-              <li v-for="item in mailTypeRankList" :key="item.id">
-                <span>{{ item.rownumber }}</span>
-                <div class="pmnav">
-                  <p>{{ item.category }}</p>
-                  <div class="pmbar"><span :style="{ width: item.countrate }"></span><i></i></div>
+            <div class="main-middle">
+                <div class="border-console">
+                    <div class="console-div">
+                        <ul class="clearfix">
+                            <li>
+                                <h2 class="bulebg">
+                                    {{ consoleMap.todaySum }}
+                                </h2>
+                                <span>今日来信</span>
+                            </li>
+                            <li>
+                                <h2 class="yellowbg">
+                                    {{ consoleMap.allSum }}
+                                </h2>
+                                <span>来信总数</span>
+                            </li>
+                            <li>
+                                <h2 class="bulebg">
+                                    {{ consoleMap.completed }}
+                                </h2>
+                                <span>办结总数</span>
+                            </li>
+                            <li>
+                                <el-popover
+                                    placement="right-start"
+                                    title="办结率计算方式"
+                                    :width="220"
+                                    trigger="hover"
+                                    show-after="700"
+                                    :content="completedrateContent"
+                                    popper-class="custom-popover-style"
+                                    effect="dark"
+                                    popper-style="
+                                    --el-text-color-primary: var(
+                                            --primary-color
+                                        );
+                                    "
+                                >
+                                    <template #reference>
+                                        <h2
+                                            class="yellowbg"
+                                            v-show="consoleMap.completedrate"
+                                        >
+                                            {{ consoleMap.completedrate }}
+                                        </h2>
+                                    </template>
+                                </el-popover>
+                                <span>办结率</span>
+                            </li>
+                            <li>
+                                <el-popover
+                                    placement="right-start"
+                                    title="满意率计算方式"
+                                    :width="200"
+                                    trigger="hover"
+                                    show-after="700"
+                                    :content="satisfiedrateContent"
+                                    popper-class="custom-popover-style"
+                                    effect="dark"
+                                    popper-style="
+                                    --el-text-color-primary: var(
+                                            --primary-color
+                                        );
+                                    "
+                                >
+                                    <template #reference>
+                                        <h2
+                                            class="bulebg"
+                                            v-show="consoleMap.satisfiedrate"
+                                        >
+                                            {{ consoleMap.satisfiedrate }}
+                                        </h2>
+                                    </template>
+                                </el-popover>
+                                <span>满意率</span>
+                            </li>
+                            <li>
+                                <el-popover
+                                    placement="right-start"
+                                    title="解决率计算方式"
+                                    :width="200"
+                                    trigger="hover"
+                                    show-after="700"
+                                    :content="resolvedrateContent"
+                                    popper-class="custom-popover-style"
+                                    effect="dark"
+                                    popper-style="
+                                    --el-text-color-primary: var(
+                                            --primary-color
+                                        );
+                                    "
+                                >
+                                    <template #reference>
+                                        <h2
+                                            class="yellowbg"
+                                            v-show="consoleMap.resolvedrate"
+                                        >
+                                            {{ consoleMap.resolvedrate }}
+                                        </h2>
+                                    </template>
+                                </el-popover>
+                                <span>解决率</span>
+                            </li>
+                        </ul>
+                    </div>
                 </div>
-                <div class="pmsum">
-                  <p>{{ item.sumcount }}</p>
+                <div class="border-console">
+                    <div id="map" ref="map"></div>
                 </div>
-              </li>
-
+                <div class="mail-container">
+                    <div class="name-title">来信趋势</div>
+                    <div v-if="seenDay" class="trendOptions">
+                        <el-select
+                            v-model="trendDayValue"
+                            class="m-2"
+                            :placeholder="selectTrend"
+                            size="small"
+                            style="width: 100px; z-index: 3000"
+                            @change="getMailTrend"
+                            popper-class="blueBack"
+                        >
+                            <el-option
+                                v-for="item in trendDayOptions"
+                                :key="item.value"
+                                :label="item.label"
+                                :value="item.value"
+                            />
+                        </el-select>
+                    </div>
+                    <div v-if="seenWeek" class="trendOptions">
+                        <el-select
+                            v-model="trendWeekValue"
+                            class="m-2"
+                            :placeholder="selectTrend"
+                            size="small"
+                            style="width: 100px; z-index: 3000"
+                            @change="getMailTrend"
+                            popper-class="blueBack"
+                        >
+                            <el-option
+                                v-for="item in trendWeekOptions"
+                                :key="item.value"
+                                :label="item.label"
+                                :value="item.value"
+                            />
+                        </el-select>
+                    </div>
 
-            </ul>
+                    <div v-if="seenMonth" class="trendOptions">
+                        <el-select
+                            v-model="trendMonthValue"
+                            class="m-2"
+                            :placeholder="selectTrend"
+                            size="small"
+                            style="width: 100px; z-index: 3000"
+                            @change="getMailTrend"
+                            popper-class="blueBack"
+                        >
+                            <el-option
+                                v-for="item in trendMonthOptions"
+                                :key="item.value"
+                                :label="item.label"
+                                :value="item.value"
+                                style="
+                                    height: auto;
+                                    max-height: 300px;
+                                    padding: 0;
+                                "
+                            />
+                        </el-select>
+                    </div>
 
-          </div>
+                    <div ref="tabsContainer">
+                        <el-tabs
+                            v-model="trendActiveName"
+                            class="trend-tabs"
+                            type="card"
+                            @tab-click="trendResetTimer"
+                        >
+                            <el-tab-pane label="日趋势" name="dayTrend">
+                                <div
+                                    ref="day_echart"
+                                    id="dayEchart"
+                                    :style="{ width: chartWidth + 'px' }"
+                                ></div>
+                            </el-tab-pane>
+                            <el-tab-pane label="周趋势" name="weekTrend">
+                                <div
+                                    ref="week_echart"
+                                    id="weekEchart"
+                                    :style="{ width: chartWidth + 'px' }"
+                                ></div>
+                            </el-tab-pane>
+                            <el-tab-pane label="月趋势" name="monthTrend">
+                                <div
+                                    ref="month_echart"
+                                    id="monthEchart"
+                                    :style="{ width: chartWidth + 'px' }"
+                                ></div>
+                            </el-tab-pane>
+                        </el-tabs>
+                    </div>
+                </div>
+            </div>
+            <div class="main-right">
+                <div class="box-container">
+                    <div class="name-title">信件动态</div>
+                    <div class="boxLeftMailCon">
+                        <ul class="mailUl">
+                            <li
+                                v-for="item in peopleMaillist"
+                                :key="item.id"
+                                @click="queryDetails(item)"
+                            >
+                                <p>
+                                    {{ item.contactName }} ：{{
+                                        item.contactPhone
+                                    }}<span class="mailULspan">{{
+                                        item.mailState
+                                    }}</span>
+                                </p>
+                                <p>{{ formatDate(item.createTime) }}</p>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+                <div class="box-container">
+                    <div class="name-title">信件类型排名</div>
+                    <div class="boxnav paim">
+                        <ul class="h100">
+                            <li v-for="item in mailTypeRankList" :key="item.id">
+                                <span>{{ item.rownumber }}</span>
+                                <div class="pmnav">
+                                    <p>{{ item.category }}</p>
+                                    <div class="pmbar">
+                                        <span
+                                            :style="{ width: item.countrate }"
+                                        ></span
+                                        ><i></i>
+                                    </div>
+                                </div>
+                                <div class="pmsum">
+                                    <p>{{ item.sumcount }}</p>
+                                </div>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+            <details-popup
+                v-if="showDetails"
+                ref="detailsRef"
+                @success="closeDetails"
+                @close="closeDetails"
+            />
         </div>
-
-      </div>
-      <details-popup v-if="showDetails" ref="detailsRef" @success="closeDetails" @close="closeDetails" />
     </div>
-  </div>
 </template>
-<style>
-@import 'assets/css/index.css';
-
-body {
-  background-color: #030b39;
-}
-
-.body {
-
-  background-image: url('@/assets/bg.png');
-  /* 背景图片的路径 */
-  background-size: cover;
-  /* 背景图片大小适应容器 */
-  overflow: auto;
-  background-color: #1C3472;
-
-}
-</style>
-
 
 <script lang="ts" setup>
-import { ref, onMounted, onUnmounted } from 'vue'
-import type { TabsPaneContext } from 'element-plus'
-import * as echarts from 'echarts';
+import * as echarts from "echarts";
 import chinaJSON from "./changsha.json";
-import { peopleMail, dutyDay, threeRate, consoleData, mailTypeRank, mailTrend, mapCountyData, otherThreeRate } from '@/api/datascreen'
+import {
+    peopleMail,
+    dutyDay,
+    threeRate,
+    consoleData,
+    mailTypeRank,
+    mailTrend,
+    mapCountyData,
+    otherThreeRate,
+} from "@/api/datascreen";
 import { useRouter } from "vue-router";
-import DetailsPopup from './details.vue'
-const detailsRef = shallowRef<InstanceType<typeof DetailsPopup>>()
-const showDetails = ref(false)
+import DetailsPopup from "./details.vue";
+const detailsRef = shallowRef<InstanceType<typeof DetailsPopup>>();
+const showDetails = ref(false);
 const router = useRouter();
 
-const rateName = ref('county')
-const rateActiveName = ref('completionRate')
-const trendActiveName = ref('dayTrend')
-const dutyActiveName = ref('dutySj')
+const rateName = ref("county");
+const rateActiveName = ref("completionRate");
+const trendActiveName = ref("dayTrend");
+const dutyActiveName = ref("dutySj");
 
 let peopleMaillist = ref([]);
 let dutyList = ref([]);
 let typeRankList = ref([]);
 const rateMap = ref({});
-const rateBranch = ref({})
+const rateBranch = ref({});
 let mailTrendMap = ref([]);
 let mailTypeRankList = reactive([]) as any[];
 let dutySjList = reactive([]) as any[];
 const consoleMap = ref({});
-const completedrateContent = ref('')
-const satisfiedrateContent = ref('')
-const resolvedrateContent = ref('')
+const completedrateContent = ref("");
+const satisfiedrateContent = ref("");
+const resolvedrateContent = ref("");
 
 const intervalTimeRate = 6000; // 自动切换的间隔时间，单位为毫秒
 const intervalTimeTrend = 3000; // 自动切换的间隔时间，单位为毫秒
@@ -380,11 +757,10 @@ let weekXList = reactive([]) as any[];
 let weekYList = reactive([]) as any[];
 let monthXList = reactive([]) as any[];
 let monthYList = reactive([]) as any[];
-let map = ref('map');
-
+let map = ref("map");
 
 let mapDataList = reactive([]) as any[];
-let dataIndex = 0
+let dataIndex = 0;
 
 let currentIndex = 0;
 let chartWidth = 900;
@@ -394,888 +770,944 @@ let day_echart = ref(null);
 let month_echart = ref(null);
 let week_echart = ref(null);
 
-let trendDayValue = ref('15')
-let trendWeekValue = ref('7')
-let trendMonthValue = ref('2024')
-const selectTrend = "请选择"
-let seenDay = true
-let seenWeek = false
-let seenMonth = false
-let mapShow = true
+let trendDayValue = ref("15");
+let trendWeekValue = ref("7");
+let trendMonthValue = ref("2024");
+const selectTrend = "请选择";
+let seenDay = true;
+let seenWeek = false;
+let seenMonth = false;
+let mapShow = true;
 let trendDayOptions = [
-  {
-    value: '15',
-    label: '最近15天',
-  },
-  {
-    value: '30',
-    label: '最近30天',
-  }
-]
+    {
+        value: "15",
+        label: "最近15天",
+    },
+    {
+        value: "30",
+        label: "最近30天",
+    },
+];
 
 let trendWeekOptions = [
-
-  {
-    value: '7',
-    label: '最近7周',
-  },
-  {
-    value: '15',
-    label: '最近15周',
-  }
-]
+    {
+        value: "7",
+        label: "最近7周",
+    },
+    {
+        value: "15",
+        label: "最近15周",
+    },
+];
 
 let trendMonthOptions = reactive([]) as any[];
 
 const selectYear = (year) => {
-  var myDate = new Date();
-  var startYear = myDate.getFullYear() - year;//起始年份
-  var endYear = myDate.getFullYear();//结束年份
-  for (var i = startYear; i <= endYear; i++) {
-    var obj = { "value": i, "label": i };
-    trendMonthOptions.push(obj);
-  }
-}
+    var myDate = new Date();
+    var startYear = myDate.getFullYear() - year; //起始年份
+    var endYear = myDate.getFullYear(); //结束年份
+    for (var i = startYear; i <= endYear; i++) {
+        var obj = { value: i, label: i };
+        trendMonthOptions.push(obj);
+    }
+};
 
 //console大屏数据
 const getConsoleDataMap = async () => {
-  try {
-    consoleMap.value = await consoleData()
-    console.log(consoleMap.value)
-    completedrateContent.value = '办结率=解决数/已办结数\n' + consoleMap.value.completedrate + '=' + consoleMap.value.completed + '/' + consoleMap.value.completedsum
-    satisfiedrateContent.value = '满意率=满意数/已办结数\n' + consoleMap.value.satisfiedrate + '=' + consoleMap.value.satisfied + '/' + consoleMap.value.satisfiedsum
-    resolvedrateContent.value = '解决率=解决数/来信总数\n' + consoleMap.value.resolvedrate + '=' + consoleMap.value.resolved + '/' + consoleMap.value.resolvedsum
-  } catch (error) {
-  }
-}
+    try {
+        consoleMap.value = await consoleData();
+        console.log(consoleMap.value);
+        completedrateContent.value =
+            " 办结率 = 已办结数 / 信件总数\n" +
+            consoleMap.value.completedrate +
+            " = " +
+            consoleMap.value.completed +
+            " / " +
+            consoleMap.value.completedsum;
+        satisfiedrateContent.value =
+            "满意率 = 满意数 / 已办结数\n" +
+            consoleMap.value.satisfiedrate +
+            " = " +
+            consoleMap.value.satisfied +
+            " / " +
+            consoleMap.value.satisfiedsum;
+        resolvedrateContent.value =
+            "解决率 = 解决数 / 已办结数\n" +
+            consoleMap.value.resolvedrate +
+            " = " +
+            consoleMap.value.resolved +
+            " / " +
+            consoleMap.value.resolvedsum;
+    } catch (error) {}
+};
 
 //类型排行
 const getMailTypeRankList = async () => {
-  try {
-    typeRankList = await mailTypeRank()
+    try {
+        typeRankList = await mailTypeRank();
 
-    typeRankList.forEach((element: any) => {
-      mailTypeRankList.push(element);//循环赋值
-    });
-  } catch (error) {
-  }
-}
+        typeRankList.forEach((element: any) => {
+            mailTypeRankList.push(element); //循环赋值
+        });
+    } catch (error) {}
+};
 
 //获取最近来信
 const getPopleMailLists = async () => {
-  try {
-    peopleMaillist = await peopleMail()
-  } catch (error) {
-  }
-}
+    try {
+        peopleMaillist = await peopleMail();
+    } catch (error) {}
+};
 
 //获取今日值班
 const getDutyDay = async () => {
-  try {
-    dutyList = await dutyDay()
-    dutyList.dutySjList.forEach((element: any) => {
-      dutySjList.push(element);//循环赋值
-    });
-  } catch (error) {
-  }
-}
+    try {
+        dutyList = await dutyDay();
+        dutyList.dutySjList.forEach((element: any) => {
+            dutySjList.push(element); //循环赋值
+        });
+    } catch (error) {}
+};
 const getThreeRate = async () => {
-  try {
-    rateMap.value = await threeRate()
-  } catch (error) {
-  }
-}
+    try {
+        rateMap.value = await threeRate();
+    } catch (error) {}
+};
 const categoryChange = async () => {
-  try {
-    rateBranch.value = await otherThreeRate()
-  } catch (error) {
-  }
-}
+    try {
+        rateBranch.value = await otherThreeRate();
+    } catch (error) {}
+};
 
 const getMailTrend = async () => {
-  try {
-    const params = reactive({
-      day: trendDayValue.value,
-      week: trendWeekValue.value,
-      year: trendMonthValue.value
-    })
-    mailTrendMap = await mailTrend(params)
-
-    dayXList = mailTrendMap.dayXList
-    dayYList = mailTrendMap.dayYList;
-    dayEcharts()
-    weekXList = mailTrendMap.weekXList;
-    weekYList = mailTrendMap.weekYList;
-    weekEcharts()
-    monthXList = mailTrendMap.monthXList;
-    monthYList = mailTrendMap.monthYList;
-    monthEcharts()
-  } catch (error) {
-  }
-}
+    try {
+        const params = reactive({
+            day: trendDayValue.value,
+            week: trendWeekValue.value,
+            year: trendMonthValue.value,
+        });
+        mailTrendMap = await mailTrend(params);
+
+        dayXList = mailTrendMap.dayXList;
+        dayYList = mailTrendMap.dayYList;
+        dayEcharts();
+        weekXList = mailTrendMap.weekXList;
+        weekYList = mailTrendMap.weekYList;
+        weekEcharts();
+        monthXList = mailTrendMap.monthXList;
+        monthYList = mailTrendMap.monthYList;
+        monthEcharts();
+    } catch (error) {}
+};
 
 const getMapDataList = async () => {
-  try {
-
-    mapDataList = await mapCountyData()
-    changsMap()
-  } catch (error) {
-  }
-}
+    try {
+        mapDataList = await mapCountyData();
+        changsMap();
+    } catch (error) {}
+};
 
 onMounted(() => {
-  selectYear(10)
-
-  getThreeRate();
-  getPopleMailLists();
-  getDutyDay();
-  getMailTypeRankList();
-  getMailTrend();
-  getMapDataList()
-  getConsoleDataMap()
-  startRateAutoSwitch();
-  startTrendAutoSwitch();
-  startDutyAutoSwitch();
-  dayEcharts()
-  changsMap()
-
-
-  const width = tabsContainer.value.offsetWidth - 40;
-  chartWidth = width;
-
+    selectYear(10);
+
+    getThreeRate();
+    getPopleMailLists();
+    getDutyDay();
+    getMailTypeRankList();
+    getMailTrend();
+    getMapDataList();
+    getConsoleDataMap();
+    startRateAutoSwitch();
+    startTrendAutoSwitch();
+    startDutyAutoSwitch();
+    dayEcharts();
+    changsMap();
+
+    const width = tabsContainer.value.offsetWidth - 40;
+    chartWidth = width;
 });
 
-
-
 // 在组件卸载前清除计时器
 onUnmounted(() => {
-  clearRateTimer()
-  clearTrendTimer()
-  clearDutyTimer()
+    clearRateTimer();
+    clearTrendTimer();
+    clearDutyTimer();
 
-  clearCarouselTime()
+    clearCarouselTime();
 });
 
-
 const formatDate = (value) => {
-  const date = new Date(value);
-  return date.toLocaleString();
-}
+    const date = new Date(value);
+    return date.toLocaleString();
+};
 const startRateAutoSwitch = () => {
-  console.log("startRateAutoSwitch")
-  intervalIdRate = setInterval(() => {
-    if (rateActiveName.value === 'completionRate') {
-      rateActiveName.value = 'resolutionRate';
-    } else if (rateActiveName.value === 'resolutionRate') {
-      rateActiveName.value = 'satisfactionRate';
-    } else {
-      rateActiveName.value = 'completionRate';
-    }
-  }, intervalTimeRate);
+    intervalIdRate = setInterval(() => {
+        if (rateActiveName.value === "completionRate") {
+            rateActiveName.value = "resolutionRate";
+        } else if (rateActiveName.value === "resolutionRate") {
+            rateActiveName.value = "satisfactionRate";
+        } else {
+            rateActiveName.value = "completionRate";
+        }
+    }, intervalTimeRate);
 };
 
-
-
 const startTrendAutoSwitch = () => {
-  var dayChart = echarts.init(day_echart.value);
-  var monthChart = echarts.init(month_echart.value);
-  var weekChart = echarts.init(week_echart.value);
-  monthChart.resize(chartWidth)
-  dayChart.resize(chartWidth)
-  weekChart.resize(chartWidth)
-  intervalIdTrend = setInterval(() => {
-    if (trendActiveName.value === 'dayTrend') {
-      trendActiveName.value = 'weekTrend';
-      seenDay = false
-      seenWeek = true
-      seenMonth = false
-      weekEcharts()
-    } else if (trendActiveName.value === 'weekTrend') {
-      trendActiveName.value = 'monthTrend';
-      seenDay = false
-      seenWeek = false
-      seenMonth = true
-      monthEcharts()
-    } else {
-      trendActiveName.value = 'dayTrend';
-      seenDay = true
-      seenWeek = false
-      seenMonth = false
-      dayEcharts()
-    }
-  }, intervalTimeTrend);
+    var dayChart = echarts.init(day_echart.value);
+    var monthChart = echarts.init(month_echart.value);
+    var weekChart = echarts.init(week_echart.value);
+    monthChart.resize(chartWidth);
+    dayChart.resize(chartWidth);
+    weekChart.resize(chartWidth);
+    intervalIdTrend = setInterval(() => {
+        if (trendActiveName.value === "dayTrend") {
+            trendActiveName.value = "weekTrend";
+            seenDay = false;
+            seenWeek = true;
+            seenMonth = false;
+            weekEcharts();
+        } else if (trendActiveName.value === "weekTrend") {
+            trendActiveName.value = "monthTrend";
+            seenDay = false;
+            seenWeek = false;
+            seenMonth = true;
+            monthEcharts();
+        } else {
+            trendActiveName.value = "dayTrend";
+            seenDay = true;
+            seenWeek = false;
+            seenMonth = false;
+            dayEcharts();
+        }
+    }, intervalTimeTrend);
 };
 
 const startDutyAutoSwitch = () => {
-  intervalIdDuty = setInterval(() => {
-    if (dutyActiveName.value === 'dutySj') {
-      dutyActiveName.value = 'dutyFj';
-    } else if (dutyActiveName.value === 'dutyFj') {
-      dutyActiveName.value = 'dutyZd';
-    } else if (dutyActiveName.value === 'dutyZd') {
-      dutyActiveName.value = 'dutyBw';
-    } else {
-      dutyActiveName.value = 'dutySj';
-    }
-  }, intervalTimeDuty);
+    intervalIdDuty = setInterval(() => {
+        if (dutyActiveName.value === "dutySj") {
+            dutyActiveName.value = "dutyFj";
+        } else if (dutyActiveName.value === "dutyFj") {
+            dutyActiveName.value = "dutyZd";
+        } else if (dutyActiveName.value === "dutyZd") {
+            dutyActiveName.value = "dutyBw";
+        } else {
+            dutyActiveName.value = "dutySj";
+        }
+    }, intervalTimeDuty);
 };
 
-
 const clearCarouselTime = () => {
-  if (carouselTime) {
-    clearInterval(carouselTime);
-    carouselTime = null;
-  }
+    if (carouselTime) {
+        clearInterval(carouselTime);
+        carouselTime = null;
+    }
 };
 const clearRateTimer = () => {
-  if (intervalIdRate) {
-    console.log("clearCarouselTime")
-    clearInterval(intervalIdRate);
-    intervalIdRate = null;
-  }
-
+    if (intervalIdRate) {
+        console.log("clearCarouselTime");
+        clearInterval(intervalIdRate);
+        intervalIdRate = null;
+    }
 };
 
 const clearTrendTimer = () => {
-  if (intervalIdTrend) {
-    clearInterval(intervalIdTrend);
-    intervalIdTrend = null;
-  }
+    if (intervalIdTrend) {
+        clearInterval(intervalIdTrend);
+        intervalIdTrend = null;
+    }
 };
 const clearDutyTimer = () => {
-  if (intervalIdDuty) {
-    clearInterval(intervalIdDuty);
-    intervalIdDuty = null;
-  }
+    if (intervalIdDuty) {
+        clearInterval(intervalIdDuty);
+        intervalIdDuty = null;
+    }
 };
 const rateResetTimer = () => {
-  const width = tabsContainer.value.offsetWidth;
-  chartWidth = width;
-  clearRateTimer();
-  startRateAutoSwitch();
+    const width = tabsContainer.value.offsetWidth;
+    chartWidth = width;
+    clearRateTimer();
+    startRateAutoSwitch();
 };
 
-
 const trendResetTimer = (pane: TabsPaneContext, ev: Event) => {
-  const width = tabsContainer.value.offsetWidth;
-  chartWidth = width;
-  if (pane.paneName === 'dayTrend') {
-    seenDay = true
-    seenWeek = false
-    seenMonth = false
-  } else if (pane.paneName === 'weekTrend') {
-    seenDay = false
-    seenWeek = true
-    seenMonth = false
-  } else {
-    seenDay = false
-    seenWeek = false
-    seenMonth = true
-  }
-  dayEcharts()
-  monthEcharts()
-  weekEcharts()
-  clearTrendTimer();
-  startTrendAutoSwitch();
+    const width = tabsContainer.value.offsetWidth;
+    chartWidth = width;
+    if (pane.paneName === "dayTrend") {
+        seenDay = true;
+        seenWeek = false;
+        seenMonth = false;
+    } else if (pane.paneName === "weekTrend") {
+        seenDay = false;
+        seenWeek = true;
+        seenMonth = false;
+    } else {
+        seenDay = false;
+        seenWeek = false;
+        seenMonth = true;
+    }
+    dayEcharts();
+    monthEcharts();
+    weekEcharts();
+    clearTrendTimer();
+    startTrendAutoSwitch();
 };
 
 const dutyResetTimer = () => {
-  const width = tabsContainer.value.offsetWidth;
-  chartWidth = width;
-  clearDutyTimer();
-  startDutyAutoSwitch();
+    const width = tabsContainer.value.offsetWidth;
+    chartWidth = width;
+    clearDutyTimer();
+    startDutyAutoSwitch();
 };
 
-
-
-
 const changsMap = () => {
-  echarts.registerMap("map", chinaJSON as any);
-  let myMap = echarts.init(map.value);
-  //设置配置项
-  myMap.setOption({
-    geo: {
-      // 是上面注册时的名字哦，registerMap（'名字保持一致'）
-      map: "map",
-    },
-    tooltip: {
-      show: mapShow,
-      trigger: 'item',
-      position: 'right',
-      formatter: function (params) {
-        var tt = '<div class="tooltip">' +
-          '<div class="tooltip-title" > ' + params.name + '</div>' +
-          '<div class="tooltip-content" >' +
-          '<ul class="tooltip-ul">' +
-          '<li>今日来信 <span>' + params.data.todaysum + '</span></li>' +
-          '<li>来信总数 <span>' + params.data.allsum + '</span></li>' +
-          '<li>办结总数 <span>' + params.data.completed + '</span></li>' +
-          '<li>办结率 <span>' + params.data.completedrate + '</span></li>' +
-          '<li>解决率 <span>' + params.data.resolvedrate + '</span></li>' +
-          '<li>满意率 <span>' + params.data.satisfiedrate + '</span></li>' +
-          ' </ul></div></div>'
-        return tt;
-      },
-      backgroundColor: '#031577',      //
-      borderColor: '#0A2F86',
-      borderWidth: 0,                // 设置边框宽度为1像素
-      borderRadius: 3,               // 设置边框半径为3像素
-      shadowBlur: 0,                 // 设置阴影模糊程度为8像素
-      shadowOffsetX: 0,              // 设置水平阴影位移量为0像素
-      shadowOffsetY: 0,              // 设置垂直阴影位移量为6像素
-
-    },
-    visualMap: {
-      type: 'piecewise',
-      bottom: 10,
-      pieces: [
-        { gte: 85, lte: 100, label: '办结率高于85%' },
-        { gte: 65, lte: 85, label: '办结率低于85%' },
-        { gte: 0, lte: 65, label: '办结率低于65%' },
-      ],
-      // text: ['办结率'],
-      right: 10, // 右边距
-      bottom: 10, // 底边距
-      realtime: false,
-      orient: 'horizontal', // 水平显示
-      textStyle: {
-        color: '#fff', // 文字颜色
-      },
-      calculable: true,
-      inRange: {
-        color: ['#D34343', '#F6A149', '#4987F6']
-      }
-    },
-    series: [
-      {
-        name: '长沙',
-        type: 'map',
-        map: 'map',
-        hoverAnimation: true,
-        label: {
-          show: true,
-          color: "white",
+    echarts.registerMap("map", chinaJSON as any);
+    let myMap = echarts.init(map.value);
+    //设置配置项
+    myMap.setOption({
+        geo: {
+            // 是上面注册时的名字哦，registerMap（'名字保持一致'）
+            map: "map",
         },
-        itemStyle: {
-          normal: {
-            areaColor: '#02215E'   // 这里将地图区域的颜色修改为红色
-          }
+        tooltip: {
+            show: mapShow,
+            trigger: "item",
+            position: "right",
+            formatter: function (params) {
+                var tt =
+                    '<div class="tooltip">' +
+                    '<div class="tooltip-title" > ' +
+                    params.name +
+                    "</div>" +
+                    '<div class="tooltip-content" >' +
+                    '<ul class="tooltip-ul">' +
+                    "<li>今日来信 <span>" +
+                    params.data.todaysum +
+                    "</span></li>" +
+                    "<li>来信总数 <span>" +
+                    params.data.allsum +
+                    "</span></li>" +
+                    "<li>办结总数 <span>" +
+                    params.data.completed +
+                    "</span></li>" +
+                    "<li>办结率 <span>" +
+                    params.data.completedrate +
+                    "</span></li>" +
+                    "<li>解决率 <span>" +
+                    params.data.resolvedrate +
+                    "</span></li>" +
+                    "<li>满意率 <span>" +
+                    params.data.satisfiedrate +
+                    "</span></li>" +
+                    " </ul></div></div>";
+                return tt;
+            },
+            backgroundColor: "#031577", //
+            borderColor: "#0A2F86",
+            borderWidth: 0, // 设置边框宽度为1像素
+            borderRadius: 3, // 设置边框半径为3像素
+            shadowBlur: 0, // 设置阴影模糊程度为8像素
+            shadowOffsetX: 0, // 设置水平阴影位移量为0像素
+            shadowOffsetY: 0, // 设置垂直阴影位移量为6像素
         },
-        data: mapDataList,
-      }
-    ]
-  });
-
-  myMap.on('click', function (params) {
-    const url = router.resolve({ path: '/countyData', query: { id: params.data.id } }).href
-    window.open(url, '_blank')
-    // router.push({path:'/countyData',query:{name:params.name}});
-  });
-
-
-  switchRegion(); // 开始自动切换
+        visualMap: {
+            type: "piecewise",
+            bottom: 10,
+            pieces: [
+                { gte: 85, lte: 100, label: "办结率高于85%" },
+                { gte: 65, lte: 85, label: "办结率低于85%" },
+                { gte: 0, lte: 65, label: "办结率低于65%" },
+            ],
+            // text: ['办结率'],
+            right: 10, // 右边距
+            bottom: 10, // 底边距
+            realtime: false,
+            orient: "horizontal", // 水平显示
+            textStyle: {
+                color: "#fff", // 文字颜色
+            },
+            calculable: true,
+            inRange: {
+                color: ["#D34343", "#F6A149", "#4987F6"],
+            },
+        },
+        series: [
+            {
+                name: "长沙",
+                type: "map",
+                map: "map",
+                hoverAnimation: true,
+                label: {
+                    show: true,
+                    color: "white",
+                },
+                itemStyle: {
+                    normal: {
+                        areaColor: "#02215E", // 这里将地图区域的颜色修改为红色
+                    },
+                },
+                data: mapDataList,
+            },
+        ],
+    });
 
+    myMap.on("click", function (params) {
+        const url = router.resolve({
+            path: "/countyData",
+            query: { id: params.data.id },
+        }).href;
+        window.open(url, "_blank");
+        // router.push({path:'/countyData',query:{name:params.name}});
+    });
 
-}
+    switchRegion(); // 开始自动切换
+};
 
 const intervalTime = 3000; // 定时器间隔时间设置为3000毫秒
 const switchRegion = () => {
-  const chart = echarts.getInstanceByDom(map.value); // 获取echarts实例
-  if (!chart) {
-    console.error('ECharts实例未找到');
-    return;
-  }
-
-  const option = chart.getOption();
-  const mapSeriesIndex = option.series.findIndex((series) => series.type === 'map');
-
-  if (mapSeriesIndex >= 0) {
-    const mapData = option.series[mapSeriesIndex].data;
-    if (!mapData || mapData.length === 0) {
-      console.warn('地图数据为空');
-      return; // 没有数据时直接返回
+    const chart = echarts.getInstanceByDom(map.value); // 获取echarts实例
+    if (!chart) {
+        console.error("ECharts实例未找到");
+        return;
     }
 
-    // 停止已有的轮播（如果有）
-    clearInterval(carouselTime);
+    const option = chart.getOption();
+    const mapSeriesIndex = option.series.findIndex(
+        (series) => series.type === "map"
+    );
 
-    // 设置定时器轮播逻辑
-    const startCarousel = () => {
-      carouselTime = setInterval(() => {
-        currentIndex = (currentIndex + 1) % mapData.length; // 更新当前索引
+    if (mapSeriesIndex >= 0) {
+        const mapData = option.series[mapSeriesIndex].data;
+        if (!mapData || mapData.length === 0) {
+            console.warn("地图数据为空");
+            return; // 没有数据时直接返回
+        }
 
-        // 触发echarts的行为
-        chart.dispatchAction({
-          type: "downplay", // 取消高亮
-          seriesIndex: mapSeriesIndex
-        });
-        chart.dispatchAction({
-          type: "highlight", // 高亮显示当前index的数据
-          seriesIndex: mapSeriesIndex,
-          dataIndex: currentIndex
+        // 停止已有的轮播（如果有）
+        clearInterval(carouselTime);
+
+        // 设置定时器轮播逻辑
+        const startCarousel = () => {
+            carouselTime = setInterval(() => {
+                currentIndex = (currentIndex + 1) % mapData.length; // 更新当前索引
+
+                // 触发echarts的行为
+                chart.dispatchAction({
+                    type: "downplay", // 取消高亮
+                    seriesIndex: mapSeriesIndex,
+                });
+                chart.dispatchAction({
+                    type: "highlight", // 高亮显示当前index的数据
+                    seriesIndex: mapSeriesIndex,
+                    dataIndex: currentIndex,
+                });
+                chart.dispatchAction({
+                    type: "showTip", // 显示当前数据的tooltip
+                    seriesIndex: mapSeriesIndex,
+                    dataIndex: currentIndex,
+                });
+            }, intervalTime);
+        };
+
+        // 鼠标移入组件时停止轮播
+        chart.off("mousemove"); // 先取消之前可能存在的事件绑定
+        chart.on("mousemove", (e) => {
+            clearInterval(carouselTime);
+            if (e.dataIndex !== undefined) {
+                chart.dispatchAction({
+                    type: "highlight",
+                    seriesIndex: mapSeriesIndex,
+                    dataIndex: e.dataIndex,
+                });
+                chart.dispatchAction({
+                    type: "showTip",
+                    seriesIndex: mapSeriesIndex,
+                    dataIndex: e.dataIndex,
+                });
+            }
         });
-        chart.dispatchAction({
-          type: "showTip", // 显示当前数据的tooltip
-          seriesIndex: mapSeriesIndex,
-          dataIndex: currentIndex
-        });
-      }, intervalTime);
-    };
 
-    // 鼠标移入组件时停止轮播
-    chart.off('mousemove'); // 先取消之前可能存在的事件绑定
-    chart.on("mousemove", (e) => {
-      clearInterval(carouselTime);
-      if (e.dataIndex !== undefined) {
-        chart.dispatchAction({
-          type: "highlight",
-          seriesIndex: mapSeriesIndex,
-          dataIndex: e.dataIndex
+        // 鼠标移出组件时恢复轮播
+        chart.off("mouseout"); // 先取消之前可能存在的事件绑定
+        chart.on("mouseout", () => {
+            startCarousel();
         });
-        chart.dispatchAction({
-          type: "showTip",
-          seriesIndex: mapSeriesIndex,
-          dataIndex: e.dataIndex
-        });
-      }
-    });
-
-    // 鼠标移出组件时恢复轮播
-    chart.off('mouseout'); // 先取消之前可能存在的事件绑定
-    chart.on("mouseout", () => {
-      startCarousel();
-    });
 
-    startCarousel(); // 开始轮播
-  }
+        startCarousel(); // 开始轮播
+    }
 };
 
-
 const dayEcharts = () => {
-  // 基于准备好的dom，初始化echarts实例
-  var myChart = echarts.init(day_echart.value);
-
-  let option = {
-    tooltip: {
-      trigger: 'axis',
-      axisPointer: {
-        lineStyle: {
-          color: '#dddc6b'
-        }
-      }
-    },
-    legend: {
-      top: '0%',
-      right: '0%',
-      data: ['信件数'],
-      textStyle: {
-        color: 'rgba(255,255,255,.5)',
-        fontSize: '12',
-      }
-    },
-    grid: {
-      left: '10',
-      top: '30',
-      right: '10',
-      bottom: '10',
-      containLabel: true
-    },
-
-    xAxis: [{
-      type: 'category',
-      boundaryGap: false,
-      axisLabel: {
-        textStyle: {
-          color: "rgba(255,255,255,.6)",
-          fontSize: 12,
+    // 基于准备好的dom，初始化echarts实例
+    var myChart = echarts.init(day_echart.value);
+
+    let option = {
+        tooltip: {
+            trigger: "axis",
+            axisPointer: {
+                lineStyle: {
+                    color: "#dddc6b",
+                },
+            },
         },
-      },
-      axisLine: {
-        lineStyle: {
-          color: 'rgba(255,255,255,.2)'
-        }
-
-      },
-
-      data: dayXList
-
-    }, {
-
-      axisPointer: { show: false },
-      axisLine: { show: false },
-      position: 'bottom',
-      offset: 20,
-
-
-
-    }],
-
-    yAxis: [{
-      type: 'value',
-      axisTick: { show: false },
-      axisLine: {
-        lineStyle: {
-          color: 'rgba(255,255,255,.1)'
-        }
-      },
-      axisLabel: {
-        textStyle: {
-          color: "rgba(255,255,255,.6)",
-          fontSize: 12,
-        },
-      },
-
-      splitLine: {
-        lineStyle: {
-          color: 'rgba(255,255,255,.1)'
-        }
-      }
-    }],
-    series: [
-      {
-        name: '信件数',
-        type: 'line',
-        smooth: true,
-        symbol: 'circle',
-        symbolSize: 5,
-        showSymbol: false,
-        lineStyle: {
-
-          normal: {
-            color: '#0184d5',
-            width: 2
-          }
+        legend: {
+            top: "0%",
+            right: "0%",
+            data: ["信件数"],
+            textStyle: {
+                color: "rgba(255,255,255,.5)",
+                fontSize: "12",
+            },
         },
-        areaStyle: {
-          normal: {
-            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-              offset: 0,
-              color: 'rgba(1, 132, 213, 0.4)'
-            }, {
-              offset: 0.8,
-              color: 'rgba(1, 132, 213, 0.1)'
-            }], false),
-            shadowColor: 'rgba(0, 0, 0, 0.1)',
-          }
+        grid: {
+            left: "10",
+            top: "30",
+            right: "10",
+            bottom: "10",
+            containLabel: true,
         },
-        itemStyle: {
-          normal: {
-            color: '#0184d5',
-            borderColor: 'rgba(221, 220, 107, .1)',
-            borderWidth: 12
-          }
-        },
-        data: dayYList
-
-      }
 
-    ]
-
-  };
+        xAxis: [
+            {
+                type: "category",
+                boundaryGap: false,
+                axisLabel: {
+                    textStyle: {
+                        color: "rgba(255,255,255,.6)",
+                        fontSize: 12,
+                    },
+                },
+                axisLine: {
+                    lineStyle: {
+                        color: "rgba(255,255,255,.2)",
+                    },
+                },
+
+                data: dayXList,
+            },
+            {
+                axisPointer: { show: false },
+                axisLine: { show: false },
+                position: "bottom",
+                offset: 20,
+            },
+        ],
+
+        yAxis: [
+            {
+                type: "value",
+                axisTick: { show: false },
+                axisLine: {
+                    lineStyle: {
+                        color: "rgba(255,255,255,.1)",
+                    },
+                },
+                axisLabel: {
+                    textStyle: {
+                        color: "rgba(255,255,255,.6)",
+                        fontSize: 12,
+                    },
+                },
+
+                splitLine: {
+                    lineStyle: {
+                        color: "rgba(255,255,255,.1)",
+                    },
+                },
+            },
+        ],
+        series: [
+            {
+                name: "信件数",
+                type: "line",
+                smooth: true,
+                symbol: "circle",
+                symbolSize: 5,
+                showSymbol: false,
+                lineStyle: {
+                    normal: {
+                        color: "#0184d5",
+                        width: 2,
+                    },
+                },
+                areaStyle: {
+                    normal: {
+                        color: new echarts.graphic.LinearGradient(
+                            0,
+                            0,
+                            0,
+                            1,
+                            [
+                                {
+                                    offset: 0,
+                                    color: "rgba(1, 132, 213, 0.4)",
+                                },
+                                {
+                                    offset: 0.8,
+                                    color: "rgba(1, 132, 213, 0.1)",
+                                },
+                            ],
+                            false
+                        ),
+                        shadowColor: "rgba(0, 0, 0, 0.1)",
+                    },
+                },
+                itemStyle: {
+                    normal: {
+                        color: "#0184d5",
+                        borderColor: "rgba(221, 220, 107, .1)",
+                        borderWidth: 12,
+                    },
+                },
+                data: dayYList,
+            },
+        ],
+    };
 
-  // 使用刚指定的配置项和数据显示图表。
-  myChart.setOption(option);
-  window.addEventListener("resize", function () {
-    myChart.resize(chartWidth);
-  });
-}
+    // 使用刚指定的配置项和数据显示图表。
+    myChart.setOption(option);
+    window.addEventListener("resize", function () {
+        myChart.resize(chartWidth);
+    });
+};
 
 const monthEcharts = () => {
-  // 基于准备好的dom，初始化echarts实例
-  var myChart = echarts.init(month_echart.value);
-  let option1 = {
-    tooltip: {
-      trigger: 'axis',
-      axisPointer: {
-        lineStyle: {
-          color: '#dddc6b'
-        }
-      }
-    },
-    legend: {
-      top: '0%',
-      right: '0%',
-      data: ['信件数'],
-      textStyle: {
-        color: 'rgba(255,255,255,.5)',
-        fontSize: '12',
-      }
-    },
-    grid: {
-      left: '10',
-      top: '30',
-      right: '10',
-      bottom: '10',
-      containLabel: true
-    },
-
-    xAxis: [{
-      type: 'category',
-      boundaryGap: false,
-      axisLabel: {
-        textStyle: {
-          color: "rgba(255,255,255,.6)",
-          fontSize: 12,
-        },
-      },
-      axisLine: {
-        lineStyle: {
-          color: 'rgba(255,255,255,.2)'
-        }
-
-      },
-
-      data: monthXList
-
-    }, {
-
-      axisPointer: { show: false },
-      axisLine: { show: false },
-      position: 'bottom',
-      offset: 20,
-
-
-
-    }],
-
-    yAxis: [{
-      type: 'value',
-      axisTick: { show: false },
-      axisLine: {
-        lineStyle: {
-          color: 'rgba(255,255,255,.1)'
-        }
-      },
-      axisLabel: {
-        textStyle: {
-          color: "rgba(255,255,255,.6)",
-          fontSize: 12,
+    // 基于准备好的dom，初始化echarts实例
+    var myChart = echarts.init(month_echart.value);
+    let option1 = {
+        tooltip: {
+            trigger: "axis",
+            axisPointer: {
+                lineStyle: {
+                    color: "#dddc6b",
+                },
+            },
         },
-      },
-
-      splitLine: {
-        lineStyle: {
-          color: 'rgba(255,255,255,.1)'
-        }
-      }
-    }],
-    series: [
-      {
-        name: '信件数',
-        type: 'line',
-        smooth: true,
-        symbol: 'circle',
-        symbolSize: 5,
-        showSymbol: false,
-        lineStyle: {
-
-          normal: {
-            color: '#0184d5',
-            width: 2
-          }
-        },
-        areaStyle: {
-          normal: {
-            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-              offset: 0,
-              color: 'rgba(1, 132, 213, 0.4)'
-            }, {
-              offset: 0.8,
-              color: 'rgba(1, 132, 213, 0.1)'
-            }], false),
-            shadowColor: 'rgba(0, 0, 0, 0.1)',
-          }
+        legend: {
+            top: "0%",
+            right: "0%",
+            data: ["信件数"],
+            textStyle: {
+                color: "rgba(255,255,255,.5)",
+                fontSize: "12",
+            },
         },
-        itemStyle: {
-          normal: {
-            color: '#0184d5',
-            borderColor: 'rgba(221, 220, 107, .1)',
-            borderWidth: 12
-          }
+        grid: {
+            left: "10",
+            top: "30",
+            right: "10",
+            bottom: "10",
+            containLabel: true,
         },
-        data: monthYList
-
-      }
 
-    ]
-
-  };
-  // 使用刚指定的配置项和数据显示图表。
-  myChart.setOption(option1);
-
-  window.addEventListener("resize", function () {
-    myChart.resize(chartWidth);
-  });
-}
+        xAxis: [
+            {
+                type: "category",
+                boundaryGap: false,
+                axisLabel: {
+                    textStyle: {
+                        color: "rgba(255,255,255,.6)",
+                        fontSize: 12,
+                    },
+                },
+                axisLine: {
+                    lineStyle: {
+                        color: "rgba(255,255,255,.2)",
+                    },
+                },
+
+                data: monthXList,
+            },
+            {
+                axisPointer: { show: false },
+                axisLine: { show: false },
+                position: "bottom",
+                offset: 20,
+            },
+        ],
+
+        yAxis: [
+            {
+                type: "value",
+                axisTick: { show: false },
+                axisLine: {
+                    lineStyle: {
+                        color: "rgba(255,255,255,.1)",
+                    },
+                },
+                axisLabel: {
+                    textStyle: {
+                        color: "rgba(255,255,255,.6)",
+                        fontSize: 12,
+                    },
+                },
+
+                splitLine: {
+                    lineStyle: {
+                        color: "rgba(255,255,255,.1)",
+                    },
+                },
+            },
+        ],
+        series: [
+            {
+                name: "信件数",
+                type: "line",
+                smooth: true,
+                symbol: "circle",
+                symbolSize: 5,
+                showSymbol: false,
+                lineStyle: {
+                    normal: {
+                        color: "#0184d5",
+                        width: 2,
+                    },
+                },
+                areaStyle: {
+                    normal: {
+                        color: new echarts.graphic.LinearGradient(
+                            0,
+                            0,
+                            0,
+                            1,
+                            [
+                                {
+                                    offset: 0,
+                                    color: "rgba(1, 132, 213, 0.4)",
+                                },
+                                {
+                                    offset: 0.8,
+                                    color: "rgba(1, 132, 213, 0.1)",
+                                },
+                            ],
+                            false
+                        ),
+                        shadowColor: "rgba(0, 0, 0, 0.1)",
+                    },
+                },
+                itemStyle: {
+                    normal: {
+                        color: "#0184d5",
+                        borderColor: "rgba(221, 220, 107, .1)",
+                        borderWidth: 12,
+                    },
+                },
+                data: monthYList,
+            },
+        ],
+    };
+    // 使用刚指定的配置项和数据显示图表。
+    myChart.setOption(option1);
 
+    window.addEventListener("resize", function () {
+        myChart.resize(chartWidth);
+    });
+};
 
 const weekEcharts = () => {
-  // 基于准备好的dom，初始化echarts实例
-  var myChart = echarts.init(week_echart.value);
-  let option1 = {
-    tooltip: {
-      trigger: 'axis',
-      axisPointer: {
-        lineStyle: {
-          color: '#dddc6b'
-        }
-      }
-    },
-    legend: {
-      top: '0%',
-      right: '0%',
-      data: ['信件数'],
-      textStyle: {
-        color: 'rgba(255,255,255,.5)',
-        fontSize: '12',
-      }
-    },
-    grid: {
-      left: '10',
-      top: '30',
-      right: '10',
-      bottom: '10',
-      containLabel: true
-    },
-
-    xAxis: [{
-      type: 'category',
-      boundaryGap: false,
-      axisLabel: {
-        textStyle: {
-          color: "rgba(255,255,255,.6)",
-          fontSize: 12,
+    // 基于准备好的dom，初始化echarts实例
+    var myChart = echarts.init(week_echart.value);
+    let option1 = {
+        tooltip: {
+            trigger: "axis",
+            axisPointer: {
+                lineStyle: {
+                    color: "#dddc6b",
+                },
+            },
         },
-      },
-      axisLine: {
-        lineStyle: {
-          color: 'rgba(255,255,255,.2)'
-        }
-
-      },
-
-      data: weekXList
-
-    }, {
-
-      axisPointer: { show: false },
-      axisLine: { show: false },
-      position: 'bottom',
-      offset: 20,
-
-
-
-    }],
-
-    yAxis: [{
-      type: 'value',
-      axisTick: { show: false },
-      axisLine: {
-        lineStyle: {
-          color: 'rgba(255,255,255,.1)'
-        }
-      },
-      axisLabel: {
-        textStyle: {
-          color: "rgba(255,255,255,.6)",
-          fontSize: 12,
+        legend: {
+            top: "0%",
+            right: "0%",
+            data: ["信件数"],
+            textStyle: {
+                color: "rgba(255,255,255,.5)",
+                fontSize: "12",
+            },
         },
-      },
-
-      splitLine: {
-        lineStyle: {
-          color: 'rgba(255,255,255,.1)'
-        }
-      }
-    }],
-    series: [
-      {
-        name: '信件数',
-        type: 'line',
-        smooth: true,
-        symbol: 'circle',
-        symbolSize: 5,
-        showSymbol: false,
-        lineStyle: {
-
-          normal: {
-            color: '#0184d5',
-            width: 2
-          }
-        },
-        areaStyle: {
-          normal: {
-            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-              offset: 0,
-              color: 'rgba(1, 132, 213, 0.4)'
-            }, {
-              offset: 0.8,
-              color: 'rgba(1, 132, 213, 0.1)'
-            }], false),
-            shadowColor: 'rgba(0, 0, 0, 0.1)',
-          }
-        },
-        itemStyle: {
-          normal: {
-            color: '#0184d5',
-            borderColor: 'rgba(221, 220, 107, .1)',
-            borderWidth: 12
-          }
+        grid: {
+            left: "10",
+            top: "30",
+            right: "10",
+            bottom: "10",
+            containLabel: true,
         },
-        data: weekYList
 
-      }
+        xAxis: [
+            {
+                type: "category",
+                boundaryGap: false,
+                axisLabel: {
+                    textStyle: {
+                        color: "rgba(255,255,255,.6)",
+                        fontSize: 12,
+                    },
+                },
+                axisLine: {
+                    lineStyle: {
+                        color: "rgba(255,255,255,.2)",
+                    },
+                },
+
+                data: weekXList,
+            },
+            {
+                axisPointer: { show: false },
+                axisLine: { show: false },
+                position: "bottom",
+                offset: 20,
+            },
+        ],
+
+        yAxis: [
+            {
+                type: "value",
+                axisTick: { show: false },
+                axisLine: {
+                    lineStyle: {
+                        color: "rgba(255,255,255,.1)",
+                    },
+                },
+                axisLabel: {
+                    textStyle: {
+                        color: "rgba(255,255,255,.6)",
+                        fontSize: 12,
+                    },
+                },
+
+                splitLine: {
+                    lineStyle: {
+                        color: "rgba(255,255,255,.1)",
+                    },
+                },
+            },
+        ],
+        series: [
+            {
+                name: "信件数",
+                type: "line",
+                smooth: true,
+                symbol: "circle",
+                symbolSize: 5,
+                showSymbol: false,
+                lineStyle: {
+                    normal: {
+                        color: "#0184d5",
+                        width: 2,
+                    },
+                },
+                areaStyle: {
+                    normal: {
+                        color: new echarts.graphic.LinearGradient(
+                            0,
+                            0,
+                            0,
+                            1,
+                            [
+                                {
+                                    offset: 0,
+                                    color: "rgba(1, 132, 213, 0.4)",
+                                },
+                                {
+                                    offset: 0.8,
+                                    color: "rgba(1, 132, 213, 0.1)",
+                                },
+                            ],
+                            false
+                        ),
+                        shadowColor: "rgba(0, 0, 0, 0.1)",
+                    },
+                },
+                itemStyle: {
+                    normal: {
+                        color: "#0184d5",
+                        borderColor: "rgba(221, 220, 107, .1)",
+                        borderWidth: 12,
+                    },
+                },
+                data: weekYList,
+            },
+        ],
+    };
+    // 使用刚指定的配置项和数据显示图表。
+    myChart.setOption(option1);
 
-    ]
+    window.addEventListener("resize", function () {
+        myChart.resize(chartWidth);
+    });
+};
+const queryDetails = async (data: any) => {
+    mapShow = false;
+    changsMap();
+    showDetails.value = true;
+    await nextTick();
+    detailsRef.value?.open("details");
+    detailsRef.value?.getDetail(data);
+};
 
-  };
-  // 使用刚指定的配置项和数据显示图表。
-  myChart.setOption(option1);
+const closeDetails = () => {
+    mapShow = true;
+    changsMap();
+    showDetails.value = false;
+};
 
-  window.addEventListener("resize", function () {
-    myChart.resize(chartWidth);
-  });
-}
-const queryDetails = async (data: any) => {
-  mapShow = false
-  changsMap()
-  showDetails.value = true
-  await nextTick()
-  detailsRef.value?.open('details')
-  detailsRef.value?.getDetail(data)
+const animated = ref(true)
+watch(animated, (val) => {
+    if (val) {
+        startRateAutoSwitch()
+    } else {
+        clearRateTimer()
+    }
+})
+function stopAnimate() {
+    animated.value = false;
 }
 
-const closeDetails = () => {
-  mapShow = true
-  changsMap()
-  showDetails.value = false
+function startAnimate() {
+    animated.value = true;
 }
 
+function getColor(val) {
+    if (val >= 80) {
+        return "linear-gradient(270deg, #A2D203 0%, #87B502 100%)";
+    }
+    if (val >= 70) {
+        return "linear-gradient(90deg, #FA8721 0%, #FFC927 100%)";
+    }
+    return "linear-gradient(90deg, #FD0D0D 0%, #FF8C45 100%)";
+}
 </script>
 <style lang="scss">
-.el-popover.custom-popover-style {
-  background-color: #162582;
-  border: 0px;
-  color: #fff;
+@import "assets/css/index.css";
+
+body {
+    background-color: #030b39;
+}
+
+.body {
+    background-image: url("@/assets/bg.png");
+    /* 背景图片的路径 */
+    background-size: cover;
+    /* 背景图片大小适应容器 */
+    overflow: auto;
+    background-color: #1c3472;
 }
 
 .custom-popover-style .el-popover__title {
-  color: #fff;
+    color: #fff;
 }
 
-.animated-list {
-  animation: row-list 6s linear infinite;
+.animated-list[animated=true] {
+    animation: row-list 9s linear infinite;
 }
 
 @keyframes row-list {
+    0%,
+    30% {
+        transform: translateY(0);
+    }
 
-  0%,
-  30% {
-    transform: translateY(0);
-  }
-
-  100% {
-    transform: translateY(-80%);
-  }
+    100% {
+        transform: translateY(-60%);
+    }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/home/components/Daily.vue b/src/views/home/components/Daily.vue
index d1fb4a1..395e893 100644
--- a/src/views/home/components/Daily.vue
+++ b/src/views/home/components/Daily.vue
@@ -3,23 +3,23 @@
         <h1>今日统计</h1>
     </div>
     <div class="flex wrap box">
-        <section class="flex column v-center item pointer" @click="goMailQuery">
+        <section class="flex column v-center item pointer" @click="goMailQuery('mailToday')">
             <div class="number">{{ daily.mailToday }}</div>
             <span>今日来信</span>
         </section>
-        <section class="flex column v-center item pointer">
+        <section class="flex column v-center item pointer" >
             <div class="number">{{ daily.completedToday }}</div>
             <span>今日办结</span>
         </section>
-        <section class="flex column v-center item pointer">
+        <section class="flex column v-center item pointer" @click="goMailQuery('mailTotal')">
             <div class="number">{{ daily.mailTotal }}</div>
             <span>累计来信</span>
         </section>
-        <section class="flex column v-center item pointer">
+        <section class="flex column v-center item pointer" @click="goMailQuery('completedTotal')">
             <div class="number">{{ daily.completedTotal }}</div>
             <span>累计办结</span>
         </section>
-        <section class="flex column v-center item pointer" @click="goThanks">
+        <section class="flex column v-center item pointer" @click="goMailQuery('thankTotal')">
             <div class="number" style="color: var(--primary-color)">
                 {{ daily.thankTotal }}
             </div>
@@ -31,6 +31,7 @@
 import { getMailDaily } from "@/api/home";
 import emitter from "@/utils/bus";
 import { useRouterParamsStore } from '@/stores/modules/routerParams'
+import moment from 'moment'
 
 const router = useRouter();
 const daily = ref({});
@@ -47,13 +48,31 @@ emitter.on('notice',()=>{
     getData()
 })
 
-function goMailQuery() {
+function goMailQuery(key) {
+    if (key === 'mailToday') {
+        routerParams.setParams({
+            mailTime: [moment().format('YYYY-MM-DD') + ' 00:00:00', moment().format('YYYY-MM-DD') + ' 23:59:59']
+        })
+    }
+    if (key === 'completedToday') {
+        routerParams.setParams({
+            mailTime: [moment().format('YYYY-MM-DD') + ' 00:00:00', moment().format('YYYY-MM-DD') + ' 23:59:59']
+        })
+    }
+    if (key === 'mailTotal') {
+        
+    }
+    if (key === 'completedTotal') {
+        routerParams.setParams({
+            mailState: 'completion'
+        })
+    }
+    if (key === 'thankTotal') {
+        routerParams.setMailCategory(49)
+    }
     router.push("/work/query");
 }
-const goThanks = () => {
-    routerParams.setMailCategory(49)
-    router.push("/work/query");
-};
+
 </script>
 <style lang="scss" scoped>
 .box {
diff --git a/src/views/home/components/DataStatistics.vue b/src/views/home/components/DataStatistics.vue
index 51e6809..04d1972 100644
--- a/src/views/home/components/DataStatistics.vue
+++ b/src/views/home/components/DataStatistics.vue
@@ -12,7 +12,13 @@
                 >
                     <label>{{ item.name }}</label>
                     <div class="bar-box">
-                        <div :style="{ width: item.rate, background: getColor(item.ratenumber) }" class="bar">
+                        <div
+                            :style="{
+                                width: item.rate,
+                                background: getColor(item.ratenumber),
+                            }"
+                            class="bar"
+                        >
                             <span>{{ item.rate }}</span>
                         </div>
                     </div>
@@ -29,7 +35,13 @@
                 >
                     <label>{{ item.name }}</label>
                     <div class="bar-box">
-                        <div :style="{ width: item.rate, background: getColor(item.ratenumber) }" class="bar">
+                        <div
+                            :style="{
+                                width: item.rate,
+                                background: getColor(item.ratenumber),
+                            }"
+                            class="bar"
+                        >
                             <span>{{ item.rate }}</span>
                         </div>
                     </div>
@@ -49,7 +61,7 @@
                         <div
                             :style="{
                                 width: item.rate,
-                                background: getColor(item.ratenumber)
+                                background: getColor(item.ratenumber),
                             }"
                             class="bar"
                         >
@@ -59,6 +71,7 @@
                 </div>
             </div>
         </el-col>
+        
     </el-row>
     <h1 style="margin-top: 20px">近15日来信趋势</h1>
     <div>
@@ -105,13 +118,9 @@ const options = ref({
             lineStyle: {
                 color: "#0D4AFF",
             },
-            itemStyle: {
-                label: {
-                    show: true,
-                    textStyle: {
-                        color: "#162582",
-                    },
-                },
+            label: {
+                show: true,
+                color: "#162582"
             },
             areaStyle: {
                 color: "#C8E4FB",
diff --git a/src/views/home/components/MailTable.vue b/src/views/home/components/MailTable.vue
index 78ef58d..7def032 100644
--- a/src/views/home/components/MailTable.vue
+++ b/src/views/home/components/MailTable.vue
@@ -2,10 +2,9 @@
     <el-tabs v-model="activeName">
         <el-tab-pane label="我的待办" name="todo">
             <TabsTable :data="todos" @update="todoList" />
-            
         </el-tab-pane>
         <el-tab-pane label="即将到期" name="due">
-            <el-table :data="superviseTodos" style="width: 100%" stripe>
+            <el-table style="width: 100%" stripe>
                 <el-table-column
                     prop="mailTime"
                     label="来信时间"
@@ -149,7 +148,7 @@
             </el-table>
         </el-tab-pane>
         <el-tab-pane label="我的收藏" name="fav">
-            <el-table :data="highTodos" style="width: 100%" stripe>
+            <el-table :data="favs" style="width: 100%" stripe>
                 <el-table-column
                     prop="mailTime"
                     label="来信时间"
@@ -167,40 +166,44 @@
                     label="联系电话"
                     width="120"
                 />
-                <el-table-column
-                    prop="contactIdCard"
-                    label="身份证号"
-                    width="120"
-                />
                 <el-table-column
                     prop="content"
                     label="信件内容"
                     show-overflow-tooltip
                 />
-                <el-table-column prop="mailState" label="信件状态">
+                <el-table-column prop="mailState" label="信件状态" align="center">
                     <template #default="{ row }">
                         <span>{{
                             getDictLable(dictData.mail_state, row.mailState)
                         }}</span>
                     </template>
                 </el-table-column>
-                <el-table-column label="流程节点">
-                    <template #default="{ row }"> </template>
-                </el-table-column>
-                <el-table-column label="操作">
+                <el-table-column prop="threeDeptName" label="办理单位" width="120" align="center" />
+                <el-table-column label="操作" fixed="right" align="center">
                     <template #default="{ row }">
-                        
+                        <el-button type="primary" link @click="handleMailDetail(row)">详情</el-button>
                     </template>
                 </el-table-column>
             </el-table>
         </el-tab-pane>
     </el-tabs>
+
+    <MailDialog
+        v-model:show="showModel"
+        :mail-id="activeMailId"
+        :work-id="activeWorkId"
+        :work-type="activeWorkType"
+        :disabled="disabled"
+        
+    />
 </template>
 <script setup>
 import TabsTable from "./TabsTable.vue";
+import MailDialog from "@/views/work/components/MailDialog.vue";
 
 import { useDictData } from "@/hooks/useDictOptions";
 import { getTodos } from "@/api/work";
+import { listFav } from "@/api/work/fav";
 import { getDictLable, getFlowTagType } from "@/utils/util";
 
 const { dictData } = useDictData(["mail_state"]);
@@ -222,11 +225,15 @@ watch(activeName, (val) => {
     if (val === "high") {
         highTodoList();
     }
+    if (val === "fav") {
+        getFavList();
+    }
 });
 
 const todos = ref([]);
 const superviseTodos = ref([]);
 const highTodos = ref([]);
+const favs = ref([]);
 const showModel = ref(false);
 
 todoList();
@@ -243,7 +250,7 @@ function superviseTodoList() {
     getTodos({
         size: 8,
         current: 1,
-        mailLevel: "superintend",
+        mailLevel: "督办信件",
     }).then((data) => {
         superviseTodos.value = data.records;
     });
@@ -251,23 +258,39 @@ function superviseTodoList() {
 
 function highTodoList() {
     getTodos({
-        size: 8,
+        size:8,
         current: 1,
-        mailLevel: "high_sensitivity",
+        mailLevel: "高敏信件",
     }).then((data) => {
         highTodos.value = data.records;
     });
 }
 
+function getFavList() {
+    listFav().then(data => {
+        favs.value = data.records; 
+    })
+}
+
 const activeMailId = ref("");
-const activeWorkId = ref(0);
+const activeWorkId = ref();
 const activeWorkType = ref("");
+const disabled = ref(false)
 
 function handleMail(row) {
     showModel.value = true;
     activeMailId.value = row.mailId;
     activeWorkId.value = row.id;
     activeWorkType.value = row.workType;
+    disabled.value = false
+}
+
+function handleMailDetail(row) {
+    showModel.value = true;
+    activeMailId.value = row.mailId;
+    activeWorkId.value = null;
+    activeWorkType.value = null;
+    disabled.value = true
 }
 </script>
 <style lang="scss" scoped>
diff --git a/src/views/home/components/Overall.vue b/src/views/home/components/Overall.vue
index 70e34ef..7504d4a 100644
--- a/src/views/home/components/Overall.vue
+++ b/src/views/home/components/Overall.vue
@@ -65,7 +65,7 @@ function goMailQuery(item) {
             queryCon.value.signDeptId = userStore.userInfo.dataDeptId
             break;
         case 'approval':
-            queryCon.value.flowKey = 'three_leader_approval,second_deputy_approval,second_leader_approval,second_reporting,first_approval,countersign'
+            queryCon.value.flowKey = 'three_leader_approval,second_approval,second_deputy_approval,second_leader_approval,second_reporting,first_approval,countersign'
             queryCon.value.signDeptId = userStore.userInfo.dataDeptId
             break;
         default:
diff --git a/src/views/permission/admin/index.vue b/src/views/permission/admin/index.vue
index d909d6c..fadfad6 100644
--- a/src/views/permission/admin/index.vue
+++ b/src/views/permission/admin/index.vue
@@ -52,22 +52,7 @@
                 </el-form-item>
 
                 <el-form-item label="部门">
-                    <el-tree-select
-                        class="flex-1"
-                        v-model="formData.deptId"
-                        :data="optionsData.dept"
-                        clearable
-                        node-key="id"
-                        filterable
-                        check-strictly
-                        :props="{
-                            value: 'id',
-                            label: 'name'
-                        }"
-                        placeholder="请选择部门"
-                        style="width: 200px"
-                        :default-expanded-keys="getExpandedKeys()"
-                    />
+                    <DeptTreeSelect v-model="formData.deptId" check-strictly style="width: 200px" />
                 </el-form-item>
                 <div>
                     <el-button type="primary" @click="resetPage"
@@ -191,7 +176,6 @@ import { usePaging } from "@/hooks/usePaging";
 import feedback from "@/utils/feedback";
 import EditPopup from "./edit.vue";
 import { postAll } from "@/api/org/post";
-import { deptLists } from "@/api/org/department";
 import { timeFormat } from "@/utils/util";
 
 const editRef = shallowRef<InstanceType<typeof EditPopup>>();
@@ -245,26 +229,14 @@ const handleDelete = async (id: number) => {
 const { optionsData } = useDictOptions<{
     role: any[];
     post: any[];
-    dept: any[];
 }>({
     role: {
         api: roleAll,
     },
     post: {
         api: postAll,
-    },
-    dept: {
-        api: deptLists,
-    },
-})
-
-const getExpandedKeys = () => {
-    if (optionsData.dept.length && optionsData.dept[0].children && optionsData.dept[0].children.length > 0) {
-        return [optionsData.dept[0].id]
     }
-    return [];
-}
-
+})
 onMounted(() => {
     getLists();
 });
diff --git a/src/views/work/Dissatisfied.vue b/src/views/work/Dissatisfied.vue
index 5b90d44..15d5a49 100644
--- a/src/views/work/Dissatisfied.vue
+++ b/src/views/work/Dissatisfied.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="container">
         <header>
-            <el-form :model="form" :label-width="120">
+            <el-form :label-width="120">
                 <el-row>
                     <el-col :span="6">
                         <el-form-item label="来信时间">
@@ -56,14 +56,7 @@
                     </el-col>
                     <el-col :span="6">
                         <el-form-item label="办理单位">
-                            <el-tree-select class="flex-1" v-model="query.deptId" :data="optionsData.dept" clearable
-                                node-key="id" filterable :props="{
-                value: 'id',
-                label: 'name',
-                disabled(data: any) {
-                    return !!data.isStop
-                }
-            }" check-strictly placeholder="请选择上级部门" />
+                            <DeptTreeSelect v-model="query.deptId" />
                         </el-form-item>
                     </el-col>
                     <el-col :span="6">
@@ -175,8 +168,6 @@ import { getDissatisfied } from "@/api/work";
 import { ref, reactive, watchEffect } from "vue";
 import { useDictData } from "@/hooks/useDictOptions";
 import { getDictLable, getFlowTagType, getAppealType, getAppealDept, getAppealName } from "@/utils/util";
-import { useDictOptions } from '@/hooks/useDictOptions'
-import { deptLists } from '@/api/org/department'
 
 const mailStore = useMailStore();
 mailStore.getMailCategorys();
@@ -246,13 +237,6 @@ const handleMailTimeQuery = (val: any) => {
         delete query.value.mailTimeEnd
     }
 }
-const { optionsData } = useDictOptions<{
-    dept: any[]
-}>({
-    dept: {
-        api: deptLists
-    }
-})
 
 const launchAppeal = (mailId: any) => {
     showAppeal.value = true;
diff --git a/src/views/work/Done.vue b/src/views/work/Done.vue
index 583a239..b24046b 100644
--- a/src/views/work/Done.vue
+++ b/src/views/work/Done.vue
@@ -56,14 +56,7 @@
                     </el-col>
                     <el-col :span="6">
                         <el-form-item label="办理单位">
-                            <el-tree-select class="flex-1" v-model="query.deptId" :data="optionsData.dept" clearable
-                                node-key="id" filterable :props="{
-                value: 'id',
-                label: 'name',
-                disabled(data: any) {
-                    return !!data.isStop
-                }
-            }" check-strictly placeholder="请选择上级部门" />
+                            <DeptTreeSelect v-model="query.deptId" />
                         </el-form-item>
                     </el-col>
                     <el-col :span="6">
@@ -166,7 +159,6 @@ import { onMounted, onUnmounted } from 'vue'
 import useMailStore from "@/stores/modules/mail";
 import { getDictLable, formatTimeText, getFlowTagType } from "@/utils/util";
 import { ref, reactive, watchEffect } from "vue";
-import { deptLists } from '@/api/org/department'
 import { getFlowNodes } from '@/api/org/flowNode'
 const mailStore = useMailStore();
 mailStore.getMailCategorys();
@@ -186,12 +178,9 @@ const showModel = ref(false);
 const activeMailId = ref("");
 const activeWorkId = ref(0)
 const { optionsData } = useDictOptions<{
-    dept: any[],
+
     flowNodes: any[]
 }>({
-    dept: {
-        api: deptLists
-    },
     flowNodes: {
         api: getFlowNodes
     }
@@ -242,10 +231,6 @@ function handleMailTimeQuery(val) {
     }
 }
 
-
-
-
-
 </script>
 <style lang="scss" scoped>
 .success {
diff --git a/src/views/work/Fav.vue b/src/views/work/Fav.vue
index f504882..db68881 100644
--- a/src/views/work/Fav.vue
+++ b/src/views/work/Fav.vue
@@ -91,13 +91,6 @@
                         </template>
                     </el-table-column>
                     <el-table-column prop="threeDeptName" label="办理单位" width="120" align="center" />
-                    <el-table-column label="流程节点" align="center">
-                        <template #default="{ row }">
-                            <el-tag :type="getFlowTagType(row.flowKey)" v-if="row.flowBeforeName">{{ row.flowBeforeName
-                                }}</el-tag>
-                            <el-tag type="danger" v-else>未签收</el-tag>
-                        </template>
-                    </el-table-column>
                     <el-table-column label="信件等级" width="100" align="center">
                         <template #default="{ row }">
                             <mail-level :value="row.mailLevel" :list="dictData.mail_level" />
diff --git a/src/views/work/Query.vue b/src/views/work/Query.vue
index 664a541..0d68b7c 100644
--- a/src/views/work/Query.vue
+++ b/src/views/work/Query.vue
@@ -7,12 +7,12 @@
                         <el-form-item label="来信时间">
                             <el-date-picker v-model="query.mailTime" value-format="YYYY-MM-DD HH:mm:ss"
                                 type="datetimerange" format="YYYY-MM-DD HH:mm:ss" range-separator="~"
-                                start-placeholder="开始日期" end-placeholder="结束日期" @change="handleMailTimeQuery" />
+                                start-placeholder="开始日期" end-placeholder="结束日期" />
                         </el-form-item>
                     </el-col>
                     <el-col :span="6">
                         <el-form-item label="信件来源">
-                            <el-select v-model="query.source" placeholder="" clearable filterable>
+                            <el-select v-model="query.source" placeholder="请选择信件来源" clearable filterable>
                                 <el-option v-for="item in dictData.mail_source" :key="item.value" :label="item.name"
                                     :value="item.value" />
                             </el-select>
@@ -32,7 +32,7 @@
                     </el-col>
                     <el-col :span="6">
                         <el-form-item label="信件等级">
-                            <el-select v-model="query.mailLevel" placeholder="" clearable>
+                            <el-select v-model="query.mailLevel" placeholder="请选择信件等级" clearable>
                                 <el-option v-for="item in dictData.mail_level" :key="item.value" :label="item.name"
                                     :value="item.value" />
                             </el-select>
@@ -42,13 +42,13 @@
                 <el-row>
                     <el-col :span="6">
                         <el-form-item label="信件分类">
-                            <el-tree-select v-model="query.mailCategory" :data="mailStore.mailCategorys" check-strictly
+                            <el-tree-select v-model="query.mailCategory" :data="mailStore.mailCategorys" check-strictly placeholder="请选择信件分类"
                                 clearable filterable />
                         </el-form-item>
                     </el-col>
                     <el-col :span="6">
                         <el-form-item label="信件状态">
-                            <el-select v-model="query.mailState" placeholder="" clearable>
+                            <el-select v-model="query.mailState" placeholder="请选择信件状态" clearable>
                                 <el-option v-for="item in dictData.mail_state" :key="item.value" :label="item.name"
                                     :value="item.value" />
                             </el-select>
@@ -56,19 +56,12 @@
                     </el-col>
                     <el-col :span="6">
                         <el-form-item label="办理单位">
-                            <el-tree-select class="flex-1" v-model="query.deptId" :data="optionsData.dept" clearable
-                                node-key="id" filterable :props="{
-                value: 'id',
-                label: 'name',
-                disabled(data: any) {
-                    return !!data.isStop
-                }
-            }" check-strictly placeholder="请选择上级部门" />
+                            <DeptTreeSelect v-model="query.deptId" />
                         </el-form-item>
                     </el-col>
                     <el-col :span="6">
                         <el-form-item label="流程阶段">
-                            <el-select v-model="query.flowKey" placeholder="" clearable multiple collapse-tags="true"
+                            <el-select v-model="query.flowKey" placeholder="请选择流程阶段" clearable multiple collapse-tags
                                 filterable>
                                 <el-option v-for="item in optionsData.flowNodes" :key="item.key" :label="item.fullName"
                                     :value="item.key" />
@@ -129,7 +122,7 @@
                     @selection-change="handleSelectionChange" :row-key="rowKey">
                     <el-table-column type="selection" width="30" :reserve-selection="true" />
                     <el-table-column prop="mailTime" label="来信时间" align="center" width="160" />
-                    <el-table-column label="信件来源" align="center" width="90">
+                    <el-table-column label="信件来源" align="center" width="100">
                         <template #default="{ row }">
                             <span>{{
                 dictData.mail_source.filter(
@@ -230,7 +223,6 @@ import { useDictOptions } from '@/hooks/useDictOptions'
 import { deptLists } from '@/api/org/department'
 import { labelLists } from '@/api/org/label'
 import { getFlowNodes } from '@/api/org/flowNode'
-import { ref, reactive, watch, onMounted, onUnmounted, nextTick } from "vue";
 import { ElMessage, ElTable } from "element-plus";
 import { getToken } from '@/utils/auth'
 import axios from 'axios'
@@ -279,6 +271,7 @@ const updateCountdown = (second: number) => {
 };
 onMounted(() => {
     timeClock = setInterval(updateCountdown, 1000)
+    getList()
 })
 onUnmounted(() => {
     clearInterval(timeClock);
@@ -313,13 +306,18 @@ watch(() => route.path, () => {
             query.value.mailCategory = useRouterParams.params.mailCategory
         else
             delete query.value.mailCategory
-
+        console.log('mailTimeStart', useRouterParams.params.mailTimeStart)
+        if (useRouterParams.params.mailTimeStart) {
+            query.value.mailTimeStart = useRouterParams.params.mailTimeStart
+        }
+        if (useRouterParams.params.mailTimeEnd) {
+            query.value.mailTimeEnd = useRouterParams.params.mailTimeEnd
+        }
         getList()
         useRouterParams.removeParams()
     }
 })
 
-
 const checkAll = ref(false);
 const isCheckAll = ref(false);
 const selectedCount = ref(0);
@@ -393,7 +391,6 @@ const exportLedger = () => {
     });
 }
 
-
 const form = ref([]);
 const showModel = ref(false);
 const activeMailId = ref("");
@@ -445,7 +442,12 @@ function getList() {
         else
             delete query.value.mailCategory
     }
-
+    if (useRouterParams.params.mailTime) {
+        query.value.mailTime = useRouterParams.params.mailTime
+    }
+    if (useRouterParams.params.mailState) {
+        query.value.mailState = useRouterParams.params.mailState
+    }
     loading.value = true
     let source = ""
     if (query.value.mailLabels) {
@@ -459,6 +461,13 @@ function getList() {
         }
         query.value.mailLabels = strLabels
     }
+    if (query.value.mailTime) {
+        query.value.mailTimeStart = query.value.mailTime[0];
+        query.value.mailTimeEnd = query.value.mailTime[1];
+    } else {
+        delete query.value.mailTimeStart
+        delete query.value.mailTimeEnd
+    }
     getMails(query.value).then((data: any) => {
         console.log("data", data)
         form.value = data.records;
@@ -499,15 +508,6 @@ const checkMail = () => {
     showCheck.value = true
     console.log("checkMail", solveCheckBox.value)
 }
-const handleMailTimeQuery = (val: any) => {
-    if (val) {
-        query.value.mailTimeStart = val[0];
-        query.value.mailTimeEnd = val[1];
-    } else {
-        delete query.value.mailTimeStart
-        delete query.value.mailTimeEnd
-    }
-}
 
 const handleDelete = async (mailId: any) => {
     if(mailId == ""||mailId == null){
@@ -531,13 +531,10 @@ const handleTodoByChange = (mailId: any) => {
     activeMailId.value = mailId
 }
 const handleMailCategory = (row: any) => {
-
     const allowChangeList = ['终止类', '无效类']
     return allowChangeList.includes(row.mailCategory)
 }
 
-
-getList()
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/work/Todo.vue b/src/views/work/Todo.vue
index 344b4f1..19f2924 100644
--- a/src/views/work/Todo.vue
+++ b/src/views/work/Todo.vue
@@ -26,7 +26,7 @@
                                     <el-option label="身份证" value="idCard" />
                                     <el-option label="联系电话" value="phone" />
                                 </el-select>
-                                <el-input v-model="query.contactFieldValue" placeholder="请输入" clearable />
+                                <el-input v-model="query.contactFieldValue" placeholder="请输入关键字" clearable />
                             </div>
                         </el-form-item>
                     </el-col>
@@ -56,19 +56,12 @@
                     </el-col>
                     <el-col :span="6">
                         <el-form-item label="办理单位">
-                            <el-tree-select class="flex-1" v-model="query.deptId" :data="optionsData.dept" clearable
-                                node-key="id" filterable :props="{
-                value: 'id',
-                label: 'name',
-                disabled(data: any) {
-                    return !!data.isStop
-                }
-            }" check-strictly placeholder="请选择上级部门" />
+                            <DeptTreeSelect v-model="query.deptId" />
                         </el-form-item>
                     </el-col>
                     <el-col :span="6">
                         <el-form-item label="流程阶段">
-                            <el-select v-model="query.flowKey" placeholder="" clearable multiple :collapse-tags="true">
+                            <el-select v-model="query.flowKey" placeholder="请选择流程阶段" clearable multiple :collapse-tags="true">
                                 <el-option v-for="item in optionsData.flowNodes" :key="item.key" :label="item.fullName"
                                     :value="item.key" />
                             </el-select>
@@ -175,6 +168,7 @@ const { dictData } = useDictData(["mail_source", "mail_level", "mail_state"]);
 const query = ref({
     size: 10,
     current: 1,
+    contactField: 'name'
 });
 const totalSize = reactive({
     total: 0,
@@ -232,7 +226,11 @@ function getList() {
 
 
 function reset() {
-    query.value = {};
+    query.value = {
+        size: 10,
+        current: 1,
+        contactField: 'name'
+    };
     getList();
 }
 
diff --git a/src/views/work/components/AppealProgress.vue b/src/views/work/components/AppealProgress.vue
index be9bff7..ba4bb42 100644
--- a/src/views/work/components/AppealProgress.vue
+++ b/src/views/work/components/AppealProgress.vue
@@ -96,7 +96,6 @@ const handleSubmit = () => {
     margin-left: 20px;
     height: 22px;
     font-size: 16px;
-    font-family: PingFangSC, PingFang SC;
     font-weight: 400;
     color: #FFFFFF;
     line-height: 22px;
@@ -111,7 +110,6 @@ const handleSubmit = () => {
     width: 80px;
     height: 22px;
     font-size: 20px;
-    font-family: PingFang-SC, PingFang-SC;
     font-weight: bold;
     color: #333333;
     line-height: 22px;
@@ -121,7 +119,6 @@ const handleSubmit = () => {
     width: 100%;
     height: 22px;
     font-size: 20px;
-    font-family: PingFang-SC, PingFang-SC;
     font-weight: bold;
     color: #162582;
     line-height: 22px;
@@ -139,8 +136,6 @@ const handleSubmit = () => {
     display: block;
     background-color: #FAFBFF;
     margin: 20px;
-
-    font-family: PingFangSC, PingFang SC;
     font-weight: 400;
     font-size: 16px;
     color: #333333;
diff --git a/src/views/work/components/ApplicationCompleted.vue b/src/views/work/components/ApplicationCompleted.vue
index bad49a4..6698b97 100644
--- a/src/views/work/components/ApplicationCompleted.vue
+++ b/src/views/work/components/ApplicationCompleted.vue
@@ -8,7 +8,14 @@
                 :rules="rules"
                 ref="formRef"
             >
-                <el-form-item prop="completeMethod" v-if="mail.mailFirstCategory === '工作建议类' || mail.mailFirstCategory === '咨询求助类' || mail.returnOperate === 'revise'">
+                <el-form-item
+                    prop="completeMethod"
+                    v-if="
+                        mail.mailFirstCategory === '工作建议类' ||
+                        mail.mailFirstCategory === '咨询求助类' ||
+                        mail.returnOperate === 'revise'
+                    "
+                >
                     <el-radio-group v-model="form.completeMethod" style="">
                         <el-row :gutter="20">
                             <el-col :span="12">
@@ -38,7 +45,12 @@
 
                 <div style="margin-bottom: 60px">
                     <template v-if="form.completeMethod === 'offline'">
-                        <p v-if="mail.mailFirstCategory === '工作建议类' || mail.mailFirstCategory === '咨询求助类'">
+                        <p
+                            v-if="
+                                mail.mailFirstCategory === '工作建议类' ||
+                                mail.mailFirstCategory === '咨询求助类'
+                            "
+                        >
                             针对咨询/建议类信件，无需走“三长审批”流程，经由
                         </p>
                         <p v-else-if="mail.returnOperate === 'revise'">
@@ -53,12 +65,8 @@
                         <h3>三级机构专班 → 二级机构专班 → 市局专班</h3>
                         <p style="margin-bottom: 40px">逐级上报即可。</p>
                         <el-form-item label="呈报上级，选择对应的二级机构专班">
-                            <span>{{ mail.secondDeptName }}</span>
+                            <span style="font-weight: 700;">{{ mail.secondDeptName }}</span>
                         </el-form-item>
-                        <p style="margin-top: 20px"><el-icon :size="15" color="#FFDD55">
-                                <Warning />
-                                </el-icon>提示：提交办结后,系统会向群众发送满意度回访短信
-                        </p>
                     </template>
                     <template v-else>
                         <p>
@@ -76,11 +84,18 @@
                                 style="width: 400px"
                             />
                         </el-form-item>
-                        <p style="margin-top: 20px"><el-icon :size="15" color="#FFDD55">
-                                <Warning />
-                                </el-icon>提示：提交办结后,系统会向群众发送满意度回访短信
-                        </p>
                     </template>
+                    <p class="flex v-center">
+                        <icon
+                            name="el-icon-WarningFilled"
+                            :size="18"
+                            color="#FFA900"
+                            class="mr-4"
+                        />
+                        <span
+                            >提示：提交办结后,系统会向群众发送满意度回访短信</span
+                        >
+                    </p>
                 </div>
             </el-form>
         </div>
diff --git a/src/views/work/components/ApplyExtension.vue b/src/views/work/components/ApplyExtension.vue
index b7458d6..5638172 100644
--- a/src/views/work/components/ApplyExtension.vue
+++ b/src/views/work/components/ApplyExtension.vue
@@ -16,13 +16,9 @@
             ref="formRef"
             class="mb-40"
         >
-            <el-form-item label="延期时长" prop="extensionDays">
-                <el-select v-model="form.extensionDays" placeholder="请选择延期时长" style="width: 200px">
-                    <el-option label="1天" value="1"></el-option>
-                    <el-option label="3天" value="3"></el-option>
-                    <el-option label="10天" value="10"></el-option>
-                    <el-option label="20天" value="20"></el-option>
-                </el-select>
+            <el-form-item label="延期时长（1~26天）" prop="extensionDays">
+                <el-input type="number" placeholder="请输入延期时长" v-model="form.extensionDays" style="width: 200px" min="1" max="26" />
+                <span class="ml-8">天</span>
             </el-form-item>
             <el-form-item label="延期理由" prop="extensionReason">
                 <el-input
diff --git a/src/views/work/components/ConfirmedCompletion.vue b/src/views/work/components/ConfirmedCompletion.vue
index e72a0b0..ded4f43 100644
--- a/src/views/work/components/ConfirmedCompletion.vue
+++ b/src/views/work/components/ConfirmedCompletion.vue
@@ -99,7 +99,7 @@
                 
             </el-form-item>
             <el-divider />
-            <h2>认定办结意见*</h2>
+            <h2>认定办结意见<span style="color: red">*</span></h2>
             <el-form-item
                 prop="completionComment"
                 class="mb-40 label-position-top"
diff --git a/src/views/work/components/HandleAppeal.vue b/src/views/work/components/HandleAppeal.vue
index 3bf8aa7..7dfd16f 100644
--- a/src/views/work/components/HandleAppeal.vue
+++ b/src/views/work/components/HandleAppeal.vue
@@ -112,7 +112,6 @@ const handleApprovedSubmit = () => {
     margin-left: 20px;
     height: 22px;
     font-size: 16px;
-    font-family: PingFangSC, PingFang SC;
     font-weight: 400;
     color: #FFFFFF;
     line-height: 22px;
@@ -127,7 +126,6 @@ const handleApprovedSubmit = () => {
     width: 80px;
     height: 22px;
     font-size: 20px;
-    font-family: PingFang-SC, PingFang-SC;
     font-weight: bold;
     color: #333333;
     line-height: 22px;
@@ -137,7 +135,6 @@ const handleApprovedSubmit = () => {
     width: 100%;
     height: 22px;
     font-size: 20px;
-    font-family: PingFang-SC, PingFang-SC;
     font-weight: bold;
     color: #162582;
     line-height: 22px;
diff --git a/src/views/work/components/HandleOverrule.vue b/src/views/work/components/HandleOverrule.vue
index cee76cc..51d256c 100644
--- a/src/views/work/components/HandleOverrule.vue
+++ b/src/views/work/components/HandleOverrule.vue
@@ -102,7 +102,6 @@ const handleSubmit = async () => {
     margin-left: 20px;
     height: 22px;
     font-size: 16px;
-    font-family: PingFangSC, PingFang SC;
     font-weight: 400;
     color: #FFFFFF;
     line-height: 22px;
@@ -117,7 +116,6 @@ const handleSubmit = async () => {
     width: 100%;
     height: 22px;
     font-size: 20px;
-    font-family: PingFang-SC, PingFang-SC;
     font-weight: bold;
     color: #333333;
     line-height: 22px;
diff --git a/src/views/work/components/InitiateCountersign.vue b/src/views/work/components/InitiateCountersign.vue
index d59c088..400cd40 100644
--- a/src/views/work/components/InitiateCountersign.vue
+++ b/src/views/work/components/InitiateCountersign.vue
@@ -1,5 +1,5 @@
 <template>
-    <el-dialog v-model="visible" width="55vw" title="发起部门会签">
+    <el-dialog width="55vw" title="发起部门会签">
         <el-form
             :model="form"
             :rules="rules"
@@ -34,11 +34,7 @@
                                 :key="item.id"
                                 :label="item.name"
                                 :value="item.id"
-                                :disabled="
-                                    mail.secondDeptId === item.id ||
-                                    mail.threeDeptId === item.id ||
-                                    countersignDeptIds.indexOf(item.id) > -1
-                                "
+                                :disabled="isDisabled(item.id)"
                             ></el-option>
                         </el-select>
                         <el-button
@@ -65,7 +61,6 @@
 <script setup>
 import { listCountersign } from "@/api/org/department";
 
-const visible = ref(false);
 const form = reactive({});
 const rules = {
     countersignRequirement: [
@@ -91,23 +86,17 @@ listCountersign().then((data) => {
 const countersignDeptIds = ref([]);
 
 const props = defineProps({
-    show: {
-        type: Boolean,
-        default: false,
-    },
     data: {
         type: Object,
         default: {},
-    },
-    mail: {
-        type: Object,
-        default: {},
-    },
+    }
 });
+
+const mail = inject('mail');
 const selectLeaderVisible = ref(false);
 
 watch(
-    () => props.mail.id,
+    () => mail.value.id,
     (val) => {
         formRef.value?.resetFields();
         countersignDeptIds.value = [];
@@ -122,16 +111,7 @@ watch(
     }
 );
 
-const emits = defineEmits(["update:show", "update:data", "submit"]);
-watch(visible, (val) => {
-    emits("update:show", val);
-});
-watch(
-    () => props.show,
-    (val) => {
-        visible.value = val;
-    }
-);
+const emits = defineEmits(["update:data", "submit", "close"]);
 
 function handleChange() {
     const arr = countersignDeptIds.value.filter(item => item);
@@ -154,10 +134,26 @@ function submit() {
             const data = { ...props.data, ...form };
             emits("update:data", data);
             emits("submit", "countersign");
-            visible.value = false;
+            emits("close");
         }
     });
 }
+// 所有主责，次责部门id
+const deptIds = computed(() => {
+    const arr = [];
+    arr.push(mail.value.firstDistributeInfo?.mainDept?.id);
+    arr.push(mail.value.firstDistributeInfo?.secondDeptId1?.id);
+    arr.push(mail.value.firstDistributeInfo?.secondDeptId2?.id);
+    arr.push(mail.value.secondDistributeInfo?.mainDept?.id);
+    arr.push(mail.value.secondDistributeInfo?.secondDeptId1?.id);
+    arr.push(mail.value.secondDistributeInfo?.secondDeptId2?.id);
+    arr.push(...countersignDeptIds.value)
+    return arr;
+});
+
+function isDisabled(id) {
+    return deptIds.value.indexOf(id) > -1;
+}
 </script>
 <style lang="scss" scoped>
 h2 {
diff --git a/src/views/work/components/LaunchAppeal.vue b/src/views/work/components/LaunchAppeal.vue
index de5c6e2..b15bb80 100644
--- a/src/views/work/components/LaunchAppeal.vue
+++ b/src/views/work/components/LaunchAppeal.vue
@@ -118,7 +118,6 @@ const handleSubmit = async () => {
     margin-left: 20px;
     height: 22px;
     font-size: 16px;
-    font-family: PingFangSC, PingFang SC;
     font-weight: 400;
     color: #FFFFFF;
     line-height: 22px;
@@ -133,7 +132,6 @@ const handleSubmit = async () => {
     width: 80px;
     height: 22px;
     font-size: 20px;
-    font-family: PingFang-SC, PingFang-SC;
     font-weight: bold;
     color: #333333;
     line-height: 22px;
diff --git a/src/views/work/components/MailDialog.vue b/src/views/work/components/MailDialog.vue
index 790b9f0..3a0a993 100644
--- a/src/views/work/components/MailDialog.vue
+++ b/src/views/work/components/MailDialog.vue
@@ -217,7 +217,7 @@
                         <template
                             v-if="webComponents.indexOf('MainContactInfo') > -1"
                         >
-                            <MainContactInfo :mail="mail" />
+                            <MainContactInfo @refresh="getDetail(); emits('update')" />
                         </template>
 
                         <template
@@ -246,7 +246,7 @@
                                 <span>{{ mail.firstDistributeInfo?.secondDept2?.name }}</span>
                             </div>
                         </div>
-                        <div class="card-info flex" v-if="mail.secondDistributeInfo?.mainDept?.name">
+                        <div class="card-info flex mb-4" v-if="mail.secondDistributeInfo?.mainDept?.name">
                             <div class="col" style="width: 33%">
                                 <label>主责单位</label>
                                 <span>{{ mail.secondDistributeInfo?.mainDept?.name }}</span>
@@ -269,12 +269,7 @@
                             <DeptSelectForm
                                 ref="deptSelectFormRef"
                                 v-model:data="requestData"
-                                :secondaryResponsibleFlag="
-                                    mail.secondaryResponsibleFlag
-                                "
                                 :flowKey="flowNode.key"
-                                :mail="mail"
-                                :workType="workType"
                             />
                         </template>
                         <ExtensionDetail
@@ -300,7 +295,7 @@
                                         workType === 'co_handling')
                                 "
                             />
-                            <ThreeHandlingDetail v-else :mail="mail" />
+                            <ThreeHandlingDetail @refresh="getDetail" v-else  />
                         </template>
                         <template
                             v-if="
@@ -311,6 +306,7 @@
                             <MailApprovalDetail
                                 :mail="mail"
                                 v-model:data="requestData"
+                                @refresh="getDetail"
                             />
                         </template>
 
@@ -454,10 +450,10 @@
         @submit="(key) => handleAction(key)"
     />
     <InitiateCountersign
-        v-model:show="countersignShow"
+        v-model="countersignShow"
         v-model:data="requestData"
-        :mail="mail"
         @submit="(key) => handleAction(key)"
+        @close="countersignShow = false"
     />
 
     <MailReturn
@@ -586,6 +582,10 @@ const props = defineProps({
 });
 const emits = defineEmits(["update:show", "update"]);
 
+provide('disabled', props.disabled);
+provide('workType', props.workType);
+provide('mail', mail);
+
 const visible = ref(props.show);
 watch(visible, (val) => {
     emits("update:show", val);
@@ -786,7 +786,6 @@ async function handleAction(key) {
         })
         .catch(() => {
             loading.value = false;
-            emits("update");
         });
 }
 
@@ -1025,7 +1024,7 @@ footer {
         color: var(--primary-color);
     }
     .content {
-        font-size: 16px;
+        font-size: 15px;
         padding: 8px;
         color: #333;
         white-space: pre-wrap;
@@ -1047,5 +1046,8 @@ footer {
         border: 1px solid rgba(195, 202, 245, 1);
         padding: 12px 20px;
     }
+    span[danger="true"] {
+        color: var(--danger-color);
+    }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/work/components/OverruleReason.vue b/src/views/work/components/OverruleReason.vue
index d2343fd..3e6dfd6 100644
--- a/src/views/work/components/OverruleReason.vue
+++ b/src/views/work/components/OverruleReason.vue
@@ -116,7 +116,6 @@ const reSubmit = () => {
     margin-left: 20px;
     height: 22px;
     font-size: 16px;
-    font-family: PingFangSC, PingFang SC;
     font-weight: 400;
     color: #FFFFFF;
     line-height: 22px;
@@ -131,7 +130,6 @@ const reSubmit = () => {
     width: 80px;
     height: 22px;
     font-size: 20px;
-    font-family: PingFang-SC, PingFang-SC;
     font-weight: bold;
     color: #333333;
     line-height: 22px;
@@ -141,7 +139,6 @@ const reSubmit = () => {
     width: 100%;
     height: 22px;
     font-size: 20px;
-    font-family: PingFang-SC, PingFang-SC;
     font-weight: bold;
     color: #162582;
     line-height: 22px;
@@ -159,8 +156,6 @@ const reSubmit = () => {
     display: block;
     background-color: #FAFBFF;
     margin: 20px;
-
-    font-family: PingFangSC, PingFang SC;
     font-weight: 400;
     font-size: 16px;
     color: #333333;
diff --git a/src/views/work/components/templates/CoHandlingDetail.vue b/src/views/work/components/templates/CoHandlingDetail.vue
index 8ef226d..34c97bf 100644
--- a/src/views/work/components/templates/CoHandlingDetail.vue
+++ b/src/views/work/components/templates/CoHandlingDetail.vue
@@ -1,15 +1,27 @@
 <template>
     <h2>协办核查</h2>
-    <div class="flex">
+    <div v-for="item in mail.coHandlings" :key="item.id">
+        <div class="col mb-12">
+            <label>次责单位</label>
+            <span>{{ item.deptName }}</span>
+        </div>
+        <div class="col mb-12">
+            <label>核查情况</label>
+            <div class="content">{{ item.verifyDetails }}</div>
+        </div>
         <div class="col">
-            <label for="核查情况"></label>
-            <div class="content"></div>
+            <label>附件</label>
+            <FileList :files="JSON.parse(item.verifyAttachments)" />
         </div>
     </div>
 </template>
 <script setup>
+const mail = inject("mail");
 
 </script>
 <style lang="scss" scoped>
-
+label {
+    width: 144px;
+    text-align: right;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/work/components/templates/Comments.vue b/src/views/work/components/templates/Comments.vue
index fa02283..865c2b5 100644
--- a/src/views/work/components/templates/Comments.vue
+++ b/src/views/work/components/templates/Comments.vue
@@ -23,7 +23,7 @@
                     />
                     <div class="icon" v-else></div>
                 </div>
-                <h1 class="text-center mb-20">
+                <h1 class="text-center mb-16">
                     <span v-if="item.returnFlag" style="color: #FF0606">退回整改</span>
                     <span v-else>{{ item.approved ? "审批通过" : "待审批" }}</span>
                 </h1>
@@ -32,7 +32,7 @@
                 </h2>
                 <div v-if="item.approved" :danger="item.returnFlag" style="padding: 8px">
                     <h3>审批意见</h3>
-                    <p>{{ item.comment }}</p>
+                    <p style="font-weight: 700;">{{ item.comment }}</p>
                     <h4 class="text-right">{{ item.createTime }}</h4>
                 </div>
             </div>
diff --git a/src/views/work/components/templates/DeptSelectForm.vue b/src/views/work/components/templates/DeptSelectForm.vue
index 3417488..1499f22 100644
--- a/src/views/work/components/templates/DeptSelectForm.vue
+++ b/src/views/work/components/templates/DeptSelectForm.vue
@@ -6,7 +6,7 @@
                 <el-col :span="12">
                     <el-form-item
                         :label="
-                            secondaryResponsibleFlag ? '下发单位' : '主责单位'
+                            mail.secondaryResponsibleFlag ? '下发单位' : '主责单位'
                         "
                         prop="mainDeptId"
                     >
@@ -64,7 +64,7 @@
                     </el-form-item>
                 </el-col>
             </el-row>
-            <template v-if="!secondaryResponsibleFlag">
+            <template v-if="!mail.secondaryResponsibleFlag">
                 <el-row>
                     <el-col :span="12">
                         <el-form-item label="次责单位1">
@@ -125,24 +125,14 @@ const props = defineProps({
     flowKey: {
         type: String,
         default: "first_distribute",
-    },
-    // 是否已选次级责任单位
-    secondaryResponsibleFlag: {
-        type: Boolean,
-        default: false,
-    },
-    mail: {
-        type: Object,
-        default: {},
-    },
-    workType: {
-        type: String,
-        default: '',
-    },
+    }
 });
 
+const mail = inject('mail');
+const workType = inject('workType');
+
 const form = ref({
-    mainDeptLevel: props.mail.mainDeptLevel,
+    mainDeptLevel: mail.value.mainDeptLevel,
 });
 const formRef = ref(null);
 const rules = ref({
@@ -153,7 +143,7 @@ const rules = ref({
         },
     ],
 });
-if (props.mail.flowKey === "second_distribute") {
+if (mail.value.flowKey === "second_distribute") {
     rules.value = {
         mainDeptId: [
             {
diff --git a/src/views/work/components/templates/MailApprovalDetail.vue b/src/views/work/components/templates/MailApprovalDetail.vue
index f5c4158..108890f 100644
--- a/src/views/work/components/templates/MailApprovalDetail.vue
+++ b/src/views/work/components/templates/MailApprovalDetail.vue
@@ -1,45 +1,50 @@
 <template>
-    <el-collapse v-model="activeNames">
-        <el-collapse-item title="来信人基本情况" name="1">
-            <div class="flex">
-                <div class="col">
-                    <label>姓名</label>
-                    <span>{{ mail.contactName }}</span>
+    <div>
+        <el-collapse v-model="activeNames">
+            <el-collapse-item title="来信人基本情况" name="1">
+                <div class="flex">
+                    <div class="col">
+                        <label>姓名</label>
+                        <span>{{ mail.contactName }}</span>
+                    </div>
+                    <div class="col" v-if="mail.contactSex">
+                        <label>性别</label>
+                        <span>{{ mail.contactSex === "M" ? "男" : "女" }}</span>
+                    </div>
+                    <div class="col" v-if="mail.contactIdCard">
+                        <label>证件号码</label>
+                        <span>{{ mail.contactIdCard }}</span>
+                    </div>
+                    <div class="col">
+                        <label>联系电话</label>
+                        <span>{{ mail.contactPhone }}</span>
+                    </div>
                 </div>
-                <div class="col">
-                    <label>性别</label>
-                    <span>{{ mail.contactSex === "M" ? "男" : "女" }}</span>
+            </el-collapse-item>
+            <el-collapse-item title="来信反映主要问题" name="2">
+                <div class="content">{{ mail.content }}</div>
+                <div style="margin: 2px">
+                    <FileList
+                        :files="mail.attachments"
+                        v-if="mail.attachments && mail.attachments.length"
+                    />
                 </div>
-                <div class="col">
-                    <label>证件号码</label>
-                    <span>{{ mail.contactIdCard }}</span>
-                </div>
-                <div class="col">
-                    <label>联系电话</label>
-                    <span>{{ mail.contactPhone }}</span>
-                </div>
-            </div>
-        </el-collapse-item>
-        <el-collapse-item title="来信反映主要问题" name="2">
-            <div class="content">{{ mail.content }}</div>
-            <div style="margin: 2px">
-                <FileList :files="mail.attachments" v-if="mail.attachments && mail.attachments.length" />
-            </div>
-        </el-collapse-item>
-    </el-collapse>
-    <ThreeHandlingDetail :mail="mail" />
+            </el-collapse-item>
+        </el-collapse>
+        <ThreeHandlingDetail @refresh="emit('refresh')"/>
+
+        <CoHandlingDetail v-if="mail.coHandlings.length"/>
+    </div>
 </template>
 <script setup>
 import ThreeHandlingDetail from "./ThreeHandlingDetail.vue";
+import CoHandlingDetail from "./CoHandlingDetail.vue";
 
 import { formatTimeText } from "@/utils/util";
 
-defineProps({
-    mail: {
-        type: Object,
-        default: () => ({}),
-    },
-});
+const mail = inject('mail');
+
+const emit = defineEmits(["refresh"]);
 
 const activeNames = ref(["1", "2"]);
 </script>
@@ -55,6 +60,4 @@ const activeNames = ref(["1", "2"]);
         text-align: right;
     }
 }
-
-
 </style>
\ No newline at end of file
diff --git a/src/views/work/components/templates/MainContactInfo.vue b/src/views/work/components/templates/MainContactInfo.vue
index ddf20c7..48e1fd3 100644
--- a/src/views/work/components/templates/MainContactInfo.vue
+++ b/src/views/work/components/templates/MainContactInfo.vue
@@ -16,22 +16,63 @@
         <div class="flex">
             <div class="col short">
                 <label>姓名</label>
-                <span>{{ mail.contactName }}</span>
+                <el-input
+                    v-model="form.contactName"
+                    v-if="contactEditable"
+                    size="small"
+                />
+                <span v-else>{{ mail.contactName }}</span>
             </div>
-            <div class="col short" v-if="mail.contactSex">
+            <div class="col short">
                 <label>性别</label>
-                <span>{{ mail.contactSex === "M" ? "男" : "女" }}</span>
+                <el-select v-model="form.contactSex" placeholder="请选择性别" v-if="contactEditable" size="small" style="width: 120px">
+                    <el-option label="男" value="M"></el-option>
+                    <el-option label="女" value="F"></el-option>
+                </el-select>
+                <span v-else>{{
+                    mail.contactSex === "M"
+                        ? "男"
+                        : mail.contactSex === "F"
+                        ? "女"
+                        : "未知"
+                }}</span>
             </div>
             <div class="col">
                 <label>证件号码</label>
-                <span>{{ mail.contactIdCard }}</span>
+                <el-input v-model="form.contactIdCard"
+                    v-if="contactEditable"
+                    size="small"
+                />
+                <span v-else>{{ mail.contactIdCard }}</span>
             </div>
             <div class="col">
                 <label>联系电话</label>
-                <span>{{ mail.contactPhone }}</span>
+                <el-input v-model="form.contactPhone"
+                    v-if="contactEditable"
+                    size="small"
+                />
+                <span v-else>{{ mail.contactPhone }}</span>
             </div>
         </div>
-        <h2>信件内容</h2>
+        <div class="flex end mt-10" v-if="!disabled">
+            <div v-if="contactEditable">
+                <el-button size="small" @click="contactEditable = false"
+                    >取消</el-button
+                >
+                <el-button size="small" type="primary" @click="sumbit"
+                    >提交</el-button
+                >
+            </div>
+            <el-button
+                type="primary"
+                size="small"
+                plain
+                @click="contactEditable = true"
+                v-else
+                >修改联系人信息</el-button
+            >
+        </div>
+        <h2 style="margin-top: 0;">信件内容</h2>
         <div class="flex">
             <div class="col" v-if="mail.caseNumber">
                 <label>案件编号</label>
@@ -51,16 +92,32 @@
 </template>
 <script setup>
 import { useDictData } from "@/hooks/useDictOptions";
-import { getDictLable } from "@/utils/util";
 const { dictData } = useDictData(["mail_source"]);
-const { VITE_API_URL } = process.env;
+import { updateContactInfo } from '@/api/mail'
+import { getDictLable } from "@/utils/util";
+import feedback from "@/utils/feedback";
 
-defineProps({
-    mail: {
-        type: Object,
-        default: () => ({}),
-    },
+const emit = defineEmits(['refresh'])
+const mail = inject("mail");
+const disabled = inject("disabled");
+const contactEditable = ref(false);
+const form = reactive({
+    contactName: mail.value.contactName,
+    contactSex: mail.value.contactSex,
+    contactIdCard: mail.value.contactIdCard,
+    contactPhone: mail.value.contactPhone,
 });
+
+function sumbit() {
+    updateContactInfo({
+        mailId: mail.value.id,
+        ...form
+    }).then(() => {
+        contactEditable.value = false
+        emit('refresh')
+        feedback.msgSuccess('更新成功')
+    })
+}
 </script>
 <style lang="scss" scoped>
 .card {
@@ -74,5 +131,9 @@ defineProps({
 }
 .col {
     width: 25%;
+    line-height: 24px;
+}
+.el-input {
+    width: 200px;
 }
 </style>
\ No newline at end of file
diff --git a/src/views/work/components/templates/ThreeHandling.vue b/src/views/work/components/templates/ThreeHandling.vue
index a68ac9b..7ece015 100644
--- a/src/views/work/components/templates/ThreeHandling.vue
+++ b/src/views/work/components/templates/ThreeHandling.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="flex between mb-20 card-info">
+    <div class="flex between mb-10 card-info">
         <div class="flex gap-20">
             <div
                 class="flex gap v-center"
@@ -41,7 +41,7 @@
                         <police-select v-model:data="form.contactPolice" />
                     </el-form-item>
                 </el-col>
-                <el-col :span="12">
+                <el-col :span="12" v-if="form.contactPolice?.postTitle">
                     <el-form-item label="职位">
                         <span>{{ form.contactPolice?.postTitle }}</span>
                     </el-form-item>
@@ -60,7 +60,7 @@
                         </el-radio-group>
                     </el-form-item>
                 </el-col>
-                <el-col :span="12">
+                <el-col :span="12" v-if="form.contactFlag">
                     <el-form-item label="联系时间" prop="contactTime">
                         <el-date-picker
                             type="datetime"
@@ -73,18 +73,13 @@
                 </el-col>
             </el-row>
             <el-row>
-                <el-col :span="12">
+                <el-col :span="12" v-if="form.contactDuration">
                     <el-form-item label="联系时长">
-                        <span>{{ formatTimeText(form.contactDuration) }}</span>
-                        <span
-                            v-if="form.contactDuration"
-                            :danger="form.contactDuration > limitedTime"
+                        <span :danger="form.contactDuration > limitedTime">{{ formatTimeText(form.contactDuration) }}</span>
+                        <span v-if="form.contactDuration > limitedTime"
+                            danger="true"
                             class="ml-4"
-                            >({{
-                                form.contactDuration > limitedTime
-                                    ? "已超时"
-                                    : "未超时"
-                            }})</span
+                            >(已超时)</span
                         >
                     </el-form-item>
                 </el-col>
@@ -786,10 +781,6 @@ defineExpose({
     }
 }
 
-span[danger="true"] {
-    color: var(--danger-color);
-}
-
 p {
     margin: 0;
 }
diff --git a/src/views/work/components/templates/ThreeHandlingDetail.vue b/src/views/work/components/templates/ThreeHandlingDetail.vue
index f579fff..55c1e6b 100644
--- a/src/views/work/components/templates/ThreeHandlingDetail.vue
+++ b/src/views/work/components/templates/ThreeHandlingDetail.vue
@@ -28,47 +28,85 @@
                 </div>
             </div>
         </el-collapse-item>
-        <el-collapse-item title="领导接访情况" name="2" v-if="mail.interviewType">
-            <div class="flex mb-12">
-                <div class="col">
+        <el-collapse-item title="联系群众/领导接访情况" name="2">
+            <div class="flex mb-12" v-if="mail.contactPoliceName">
+                <div class="col" v-if="mail.mainDeptSignTime">
                     <label>主单位签收时长</label>
-                    <span>{{ formatTimeText(mail.mainDeptSignTime) }}</span>
+                    <span :dnager="mail.mainDeptSignTime > 600">{{ formatTimeText(mail.mainDeptSignTime) }}</span>
                 </div>
                 <div class="col">
-                    <label>主单位联系群众时长</label>
-                    <span>{{ formatTimeText(mail.contactDuration) }}</span>
+                    <label>联系民警</label>
+                    <span>{{ mail.contactPoliceName }}</span>
                 </div>
-            </div>
-            <div class="flex mb-12">
                 <div class="col">
-                    <label>接访形式</label>
-                    <span>{{ mail.interviewType }}</span>
+                    <label>主单位联系群众时长</label>
+                    <span :dnager="mail.contactDuration > 1800">{{ formatTimeText(mail.contactDuration) }}</span>
                 </div>
-                <div class="col">
-                    <label>是否一把手接访</label>
-                    <span>{{ mail.interviewIsLeader ? "是" : "否" }}</span>
+            </div>
+            <template v-if="mail.interviewType">
+                <div class="flex mb-12">
+                    <div class="col">
+                        <label>接访形式</label>
+                        <span>{{ mail.interviewType }}</span>
+                    </div>
+                    <div class="col">
+                        <label>是否一把手接访</label>
+                        <span>{{ mail.interviewIsLeader ? "是" : "否" }}</span>
+                    </div>
+                    <div class="col">
+                        <label>接访领导</label>
+                        <span>{{ mail.interviewPoliceName }}</span>
+                    </div>
                 </div>
-                <div class="col">
-                    <label>接访领导</label>
-                    <span>{{ mail.interviewPoliceName }}</span>
+                <div class="flex mb-12">
+                    <div class="col" style="width: 100%">
+                        <label>接访情况</label>
+                        <el-input
+                            type="textarea"
+                            v-model="interviewDetails"
+                            v-if="interviewDetailsEditable"
+                        />
+                        <div class="content" v-else>{{ mail.interviewDetails }}</div>
+                    </div>
                 </div>
-            </div>
-            <div class="flex mb-12">
-                <div class="col" style="width: 100%">
-                    <label>接访情况</label>
-                    <span>{{ mail.interviewDetails }}</span>
+                <div class="flex end" v-if="!disabled">
+                    <div v-if="interviewDetailsEditable">
+                        <el-button
+                            size="small"
+                            @click="interviewDetailsEditable = false"
+                            >取消</el-button
+                        >
+                        <el-button
+                            size="small"
+                            type="primary"
+                            @click="sumbitInterviewDetails"
+                            >提交</el-button
+                        >
+                    </div>
+                    <el-button
+                        type="primary"
+                        size="small"
+                        plain
+                        @click="interviewDetailsEditable = true"
+                        v-else
+                        >修改接访情况</el-button
+                    >
                 </div>
-            </div>
-            <div class="flex">
-                <div class="col" style="width: 100%">
-                    <label>接访附件</label>
-                    <span>
-                        <FileList :files="mail.interviewAttachments" />
-                    </span>
+                <div class="flex">
+                    <div class="col" style="width: 100%">
+                        <label>接访附件</label>
+                        <span>
+                            <FileList :files="mail.interviewAttachments" />
+                        </span>
+                    </div>
                 </div>
-            </div>
+            </template>
         </el-collapse-item>
-        <el-collapse-item title="核查办理情况" name="3" v-if="mail.verifyIsTrue !== null">
+        <el-collapse-item
+            title="核查办理情况"
+            name="3"
+            v-if="mail.verifyIsTrue !== null"
+        >
             <div class="flex mb-12">
                 <div class="col">
                     <label>是否属实</label>
@@ -81,36 +119,77 @@
                     }}</span>
                 </div>
             </div>
-            <div class="flex mb-12" v-if="mail.verifyProblem && mail.verifyProblem.length">
+            <div
+                class="flex mb-12"
+                v-if="mail.verifyProblem && mail.verifyProblem.length"
+            >
                 <div class="col" style="width: 100%">
                     <label>查证属实问题</label>
                     <span
                         v-for="(item, index) in mail.verifyProblem"
-                        :key="index" class="mr-8"
+                        :key="index"
+                        class="mr-8"
                         >{{ item }}</span
                     >
                 </div>
             </div>
             <div class="flex mb-12">
-                <div class="col">
+                <div class="col" style="width: 100%">
                     <label>核办结果</label>
-                    <span>{{ mail.verifyFeedback }}</span>
+                    <el-input
+                        type="textarea"
+                        v-model="verifyDetails"
+                        v-if="verifyDetailsEditable"
+                    />
+                    <div class="content" v-else>{{ mail.verifyDetails }}</div>
+                </div>
+            </div>
+            <div class="flex end" v-if="!disabled">
+                <div v-if="verifyDetailsEditable">
+                    <el-button
+                        size="small"
+                        @click="verifyDetailsEditable = false"
+                        >取消</el-button
+                    >
+                    <el-button
+                        type="primary"
+                        size="small"
+                        @click="sumbitVerifyDetails"
+                        >提交</el-button
+                    >
                 </div>
+                <el-button
+                    type="primary"
+                    size="small"
+                    plain
+                    @click="verifyDetailsEditable = true"
+                    v-else
+                    >修改核办结果</el-button
+                >
             </div>
         </el-collapse-item>
-        <el-collapse-item title="整改问责情况" name="4" v-if="mail.verifyPunish && mail.verifyPunish.length">
+        <el-collapse-item
+            title="整改问责情况"
+            name="4"
+            v-if="mail.verifyPunish && mail.verifyPunish.length"
+        >
             <div class="flex">
                 <div class="col">
                     <label>责任追究</label>
                     <span
                         v-for="(item, index) in mail.verifyPunish"
-                        :key="index" class="mr-8"
+                        :key="index"
+                        class="mr-8"
                         >{{ item }}</span
                     >
                 </div>
             </div>
         </el-collapse-item>
-        <el-collapse-item title="结果反馈情况" name="5" v-if="mail.verifyIsResolved !== null">
+        <el-collapse-item
+            title="结果反馈情况"
+            name="5"
+            v-if="mail.verifyIsResolved !== null"
+        >
             <div class="flex mb-12">
                 <div class="col">
                     <label>群众反应事项解决情况</label>
@@ -136,7 +215,11 @@
                 </div>
             </div>
         </el-collapse-item>
-        <el-collapse-item title="办结佐证材料" name="6" v-if="mail.verifyAttachments">
+        <el-collapse-item
+            title="办结佐证材料"
+            name="6"
+            v-if="mail.verifyAttachments"
+        >
             <div style="padding: 3px">
                 <FileList :files="mail.verifyAttachments || []" />
             </div>
@@ -144,15 +227,41 @@
     </el-collapse>
 </template>
 <script setup>
+import { updateMailHandleDetail } from "@/api/mail";
 import { formatTimeText } from "@/utils/util";
+import feedback from "@/utils/feedback";
 
 const activeNames = ref(["1", "2", "3", "4", "5", "6"]);
-const props = defineProps({
-    mail: {
-        type: Object,
-        default: {},
-    }
-});
+
+const emit = defineEmits(["refresh"]);
+const disabled = inject("disabled");
+const mail = inject("mail");
+
+const interviewDetails = ref(mail.value.interviewDetails);
+const verifyDetails = ref(mail.value.verifyDetails);
+const interviewDetailsEditable = ref(false);
+const verifyDetailsEditable = ref(false);
+
+function sumbitInterviewDetails() {
+    sumbitDetail();
+    interviewDetailsEditable.value = false;
+}
+
+function sumbitVerifyDetails() {
+    sumbitDetail();
+    verifyDetailsEditable.value = false;
+}
+
+function sumbitDetail() {
+    updateMailHandleDetail({
+        mailId: mail.value.id,
+        interviewDetails: interviewDetails.value,
+        verifyDetails: verifyDetails.value,
+    }).then(() => {
+        feedback.msgSuccess("修改成功");
+        emit("refresh");
+    });
+}
 </script>
 <style lang="scss" scoped>
 .el-collapse-item {
@@ -165,5 +274,11 @@ const props = defineProps({
         width: 144px;
         text-align: right;
     }
+    .content {
+        font-size: 14px;
+        padding: 0;
+        max-width: calc(100% - 176px);
+    }
 }
+
 </style>
\ No newline at end of file