From 2c2fc1c3c6d987a772242736e8a1b93803cf01ac Mon Sep 17 00:00:00 2001
From: 21819 <tomorasd@foxmail.com>
Date: Thu, 14 Mar 2024 19:18:33 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=A7=E5=B1=8F=E6=98=BE=E7=A4=BA=E4=B8=89?=
 =?UTF-8?q?=E7=8E=87=E8=AE=A1=E7=AE=97=E6=96=B9=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/datascreen/index.vue | 791 +++++++++++++++++----------------
 1 file changed, 401 insertions(+), 390 deletions(-)

diff --git a/src/views/datascreen/index.vue b/src/views/datascreen/index.vue
index bc3b4b4..3f9425b 100644
--- a/src/views/datascreen/index.vue
+++ b/src/views/datascreen/index.vue
@@ -1,275 +1,272 @@
 <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">
+    <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 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 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>
-              </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-tabs>
-        </div>
 
-      </div>
-      <div class="box-container">
-        <div class="name-title">
-         分县市局三率排名
-        </div>
-        <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">
-                  <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>
+              </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>
 
-              </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>
-            </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>
+              </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>
-
-              </div>
 
-            </el-tab-pane>
-          </el-tabs>
+                </ul>
+              </el-tab-pane>
+            </el-tabs>
+          </div>
 
         </div>
+        <div class="box-container">
+          <div class="name-title">
+            分县市局三率排名
+          </div>
+          <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">
+                    <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>
+              </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>
+              </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>
+
+              </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><h2 class="yellowbg">{{ consoleMap.completedrate }}</h2><span>办结率</span></li>
-            <li><h2 class="bulebg">{{ consoleMap.satisfiedrate }}</h2><span>满意率</span></li>
-            <li><h2 class="bulebg">{{ consoleMap.resolvedrate }}</h2><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 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="500"
+                  :content="completedrateContent" popper-class="custom-popover-style">
+                  <template #reference>
+                    <h2 class="yellowbg">{{ consoleMap.completedrate }}</h2>
+                  </template>
+                </el-popover>
+                <span>办结率</span>
+              </li>
+              <li>
+                <el-popover placement="right-start" title="满意率计算方式" :width="200" trigger="hover" show-after="500"
+                  :content="satisfiedrateContent" popper-class="custom-popover-style">
+                  <template #reference>
+                    <h2 class="bulebg">{{ consoleMap.satisfiedrate }}</h2>
+                  </template>
+                </el-popover>
+                <span>满意率</span>
+              </li>
+              <li>
+                <el-popover placement="right-start" title="解决率计算方式" :width="200" trigger="hover" show-after="500"
+                  :content="resolvedrateContent" popper-class="custom-popover-style">
+                  <template #reference>
+                    <h2 class="bulebg">{{ consoleMap.resolvedrate }}</h2>
+                  </template>
+                </el-popover>
+                <span>解决率</span>
+              </li>
+            </ul>
+          </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 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>
-    <div class="main-right">
-
+      <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 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 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>
-      <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>
-
+      <details-popup v-if="showDetails" ref="detailsRef" @success="closeDetails" @close="closeDetails" />
     </div>
-	  <details-popup
-            v-if="showDetails"
-            ref="detailsRef"
-             @success="closeDetails"
-            @close="closeDetails"
-        />
-  </div>
   </div>
 </template>
-<style   >
+<style>
 @import 'assets/css/index.css';
-body{
+
+body {
   background-color: #030b39;
 }
-.body{
 
- background-image: url('@/assets/bg.png'); /* 背景图片的路径 */
- background-size: cover; /* 背景图片大小适应容器 */
- overflow: auto;
+.body {
+
+  background-image: url('@/assets/bg.png');
+  /* 背景图片的路径 */
+  background-size: cover;
+  /* 背景图片大小适应容器 */
+  overflow: auto;
   background-color: #1C3472;
 
 }
@@ -277,14 +274,14 @@ body{
 
 
 <script lang="ts" setup>
-import { ref,onMounted,watch ,onBeforeUpdate ,onBeforeMount,onUnmounted} from 'vue'
+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} from '@/api/datascreen'
+import { peopleMail, dutyDay, threeRate, consoleData, mailTypeRank, mailTrend, mapCountyData } from '@/api/datascreen'
 import { useRouter } from "vue-router";
-import {menuLists} from "~/api/perms/menu.ts";
+import { menuLists } from "~/api/perms/menu.ts";
 import DetailsPopup from './details.vue'
 const detailsRef = shallowRef<InstanceType<typeof DetailsPopup>>()
 const showDetails = ref(false)
@@ -294,15 +291,18 @@ const rateActiveName = ref('completionRate')
 const trendActiveName = ref('dayTrend')
 const dutyActiveName = ref('dutySj')
 
-let peopleMaillist=  ref([]);
-let dutyList =  ref([]);
-let typeRankList=  ref([]);
-let rateMap =  ref([]);
-let mailTrendMap =  ref([]);
-let consoleMap =  ref([]);
-let mailTypeRankList= reactive([]) as any[];
-let completeList =  reactive([]) as any[];
-let dutySjList=  reactive([]) as any[];
+let peopleMaillist = ref([]);
+let dutyList = ref([]);
+let typeRankList = ref([]);
+let rateMap = ref([]);
+let mailTrendMap = ref([]);
+let consoleMap = ref([]);
+let mailTypeRankList = reactive([]) as any[];
+let completeList = reactive([]) as any[];
+let dutySjList = reactive([]) as any[];
+const completedrateContent = ref('')
+const satisfiedrateContent = ref('')
+const resolvedrateContent = ref('')
 
 const intervalTimeRate = 3500; // 自动切换的间隔时间，单位为毫秒
 const intervalTimeTrend = 3000; // 自动切换的间隔时间，单位为毫秒
@@ -311,22 +311,22 @@ let intervalIdRate: NodeJS.Timeout | null = null;
 let intervalIdTrend: NodeJS.Timeout | null = null;
 let intervalIdDuty: NodeJS.Timeout | null = null;
 
-let carouselTime : NodeJS.Timeout | null = null;
+let carouselTime: NodeJS.Timeout | null = null;
 
-let dayXList=  reactive([]) as any[];
-let dayYList=  reactive([]) as any[];
-let weekXList=  reactive([]) as any[];
-let weekYList=  reactive([]) as any[];
-let monthXList=  reactive([]) as any[];
-let monthYList=  reactive([]) as any[];
+let dayXList = reactive([]) as any[];
+let dayYList = reactive([]) as any[];
+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 mapDataList=  reactive([]) as any[];
-let dataIndex=0
+let mapDataList = reactive([]) as any[];
+let dataIndex = 0
 
 let currentIndex = 0;
-let chartWidth=900;
+let chartWidth = 900;
 const tabsContainer = ref(null);
 
 let day_echart = ref(null);
@@ -336,11 +336,11 @@ 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
+const selectTrend = "请选择"
+let seenDay = true
+let seenWeek = false
+let seenMonth = false
+let mapShow = true
 let trendDayOptions = [
   {
     value: '15',
@@ -364,14 +364,14 @@ let trendWeekOptions = [
   }
 ]
 
-let trendMonthOptions =reactive([]) as any[];
+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};
+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);
   }
 }
@@ -381,6 +381,9 @@ const getConsoleDataMap = async () => {
   try {
     consoleMap = await consoleData()
     console.log(consoleMap)
+    completedrateContent.value = '办结率=办结数/来信总数\n' + consoleMap.completedrate + '=' + consoleMap.completed + '/' + consoleMap.completedsum
+    satisfiedrateContent.value = '满意率=满意数/来信总数\n' + consoleMap.satisfiedrate + '=' + consoleMap.satisfied + '/' + consoleMap.satisfiedsum
+    resolvedrateContent.value = '解决率=解决数/来信总数\n' + consoleMap.resolvedrate + '=' + consoleMap.resolved + '/' + consoleMap.resolvedsum
   } catch (error) {
   }
 }
@@ -389,7 +392,7 @@ const getConsoleDataMap = async () => {
 const getMailTypeRankList = async () => {
   try {
     typeRankList = await mailTypeRank()
-   
+
     typeRankList.forEach((element: any) => {
       mailTypeRankList.push(element);//循环赋值
     });
@@ -408,14 +411,14 @@ const getPopleMailLists = async () => {
 //获取今日值班
 const getDutyDay = async () => {
   try {
-       dutyList = await dutyDay()
+    dutyList = await dutyDay()
     dutyList.dutySjList.forEach((element: any) => {
       dutySjList.push(element);//循环赋值
     });
   } catch (error) {
   }
 }
-const getThreeRate= async () => {
+const getThreeRate = async () => {
   try {
     rateMap = await threeRate()
     rateMap.completeList.forEach((element: any) => {
@@ -425,7 +428,7 @@ const getThreeRate= async () => {
   }
 }
 
-const getMailTrend= async () => {
+const getMailTrend = async () => {
   try {
     const params = reactive({
       day: trendDayValue.value,
@@ -434,24 +437,24 @@ const getMailTrend= async () => {
     })
     mailTrendMap = await mailTrend(params)
 
-    dayXList=mailTrendMap.dayXList
-    dayYList=mailTrendMap.dayYList;
+    dayXList = mailTrendMap.dayXList
+    dayYList = mailTrendMap.dayYList;
     dayEcharts()
-      weekXList=mailTrendMap.weekXList;
-      weekYList= mailTrendMap.weekYList;
+    weekXList = mailTrendMap.weekXList;
+    weekYList = mailTrendMap.weekYList;
     weekEcharts()
-      monthXList= mailTrendMap.monthXList;
-      monthYList=mailTrendMap.monthYList;
-     monthEcharts()
+    monthXList = mailTrendMap.monthXList;
+    monthYList = mailTrendMap.monthYList;
+    monthEcharts()
   } catch (error) {
   }
 }
 
 const getMapDataList = async () => {
- try {
-    
+  try {
+
     mapDataList = await mapCountyData()
-	changsMap()
+    changsMap()
   } catch (error) {
   }
 }
@@ -474,11 +477,11 @@ onMounted(() => {
 
 
   const width = tabsContainer.value.offsetWidth - 40;
-  chartWidth= width;
+  chartWidth = width;
 
 });
 
- 
+
 
 // 在组件卸载前清除计时器
 onUnmounted(() => {
@@ -490,7 +493,7 @@ onUnmounted(() => {
 });
 
 
-const formatDate=(value)=>{
+const formatDate = (value) => {
   const date = new Date(value);
   return date.toLocaleString();
 }
@@ -508,7 +511,7 @@ const startRateAutoSwitch = () => {
 
 const startTrendAutoSwitch = () => {
   var dayChart = echarts.init(day_echart.value);
-   var monthChart = echarts.init(month_echart.value);
+  var monthChart = echarts.init(month_echart.value);
   var weekChart = echarts.init(week_echart.value);
   monthChart.resize(chartWidth)
   dayChart.resize(chartWidth)
@@ -516,21 +519,21 @@ const startTrendAutoSwitch = () => {
   intervalIdTrend = setInterval(() => {
     if (trendActiveName.value === 'dayTrend') {
       trendActiveName.value = 'weekTrend';
-        seenDay=false
-        seenWeek=true
-        seenMonth=false
-        weekEcharts()
+      seenDay = false
+      seenWeek = true
+      seenMonth = false
+      weekEcharts()
     } else if (trendActiveName.value === 'weekTrend') {
       trendActiveName.value = 'monthTrend';
-      seenDay=false
-      seenWeek=false
-      seenMonth=true
+      seenDay = false
+      seenWeek = false
+      seenMonth = true
       monthEcharts()
     } else {
       trendActiveName.value = 'dayTrend';
-      seenDay=true
-      seenWeek=false
-      seenMonth=false
+      seenDay = true
+      seenWeek = false
+      seenMonth = false
       dayEcharts()
     }
   }, intervalTimeTrend);
@@ -578,28 +581,28 @@ const clearDutyTimer = () => {
   }
 };
 const rateResetTimer = () => {
-  const width = tabsContainer.value.offsetWidth ;
-  chartWidth= width;
+  const width = tabsContainer.value.offsetWidth;
+  chartWidth = width;
   clearRateTimer();
   startRateAutoSwitch();
 };
 
 
 const trendResetTimer = (pane: TabsPaneContext, ev: Event) => {
-  const width = tabsContainer.value.offsetWidth ;
-  chartWidth= width;
+  const width = tabsContainer.value.offsetWidth;
+  chartWidth = width;
   if (pane.paneName === 'dayTrend') {
-    seenDay=true
-    seenWeek=false
-    seenMonth=false
+    seenDay = true
+    seenWeek = false
+    seenMonth = false
   } else if (pane.paneName === 'weekTrend') {
-    seenDay=false
-    seenWeek=true
-    seenMonth=false
+    seenDay = false
+    seenWeek = true
+    seenMonth = false
   } else {
-    seenDay=false
-    seenWeek=false
-    seenMonth=true
+    seenDay = false
+    seenWeek = false
+    seenMonth = true
   }
   dayEcharts()
   monthEcharts()
@@ -609,8 +612,8 @@ const trendResetTimer = (pane: TabsPaneContext, ev: Event) => {
 };
 
 const dutyResetTimer = () => {
-  const width = tabsContainer.value.offsetWidth ;
-  chartWidth= width;
+  const width = tabsContainer.value.offsetWidth;
+  chartWidth = width;
   clearDutyTimer();
   startDutyAutoSwitch();
 };
@@ -618,9 +621,9 @@ const dutyResetTimer = () => {
 
 
 
-const changsMap = () =>{
+const changsMap = () => {
   echarts.registerMap("map", chinaJSON as any);
-  let  myMap = echarts.init(map.value);
+  let myMap = echarts.init(map.value);
   //设置配置项
   myMap.setOption({
     geo: {
@@ -628,27 +631,27 @@ const changsMap = () =>{
       map: "map",
     },
     tooltip: {
-	  show: mapShow,
+      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;
-		}
+      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',
@@ -657,7 +660,7 @@ const changsMap = () =>{
       shadowBlur: 0,                 // 设置阴影模糊程度为8像素
       shadowOffsetX: 0,              // 设置水平阴影位移量为0像素
       shadowOffsetY: 0,              // 设置垂直阴影位移量为6像素
-      
+
     },
     visualMap: {
       type: 'piecewise',
@@ -667,7 +670,7 @@ const changsMap = () =>{
         { gte: 65, lte: 85, label: '办结率低于85%' },
         { gte: 0, lte: 65, label: '办结率低于65%' },
       ],
-     // text: ['办结率'],
+      // text: ['办结率'],
       right: 10, // 右边距
       bottom: 10, // 底边距
       realtime: false,
@@ -677,7 +680,7 @@ const changsMap = () =>{
       },
       calculable: true,
       inRange: {
-        color: ['#D34343','#F6A149', '#4987F6']
+        color: ['#D34343', '#F6A149', '#4987F6']
       }
     },
     series: [
@@ -701,12 +704,12 @@ const changsMap = () =>{
   });
 
   myMap.on('click', function (params) {
-    const url = router.resolve({path: '/countyData',query:{id:params.data.id}}).href
+    const url = router.resolve({ path: '/countyData', query: { id: params.data.id } }).href
     window.open(url, '_blank')
-   // router.push({path:'/countyData',query:{name:params.name}});
+    // router.push({path:'/countyData',query:{name:params.name}});
   });
 
- 
+
   switchRegion(); // 开始自动切换
 
 
@@ -726,7 +729,7 @@ const switchRegion = () => {
     currentIndex = (currentIndex + 1) % regionCount;
 
 
-     //mapData[prevIndex].selected = false; // 取消上一个区域的选中状态
+    //mapData[prevIndex].selected = false; // 取消上一个区域的选中状态
     // mapData[currentIndex].selected = true; // 设置当前区域为选中状态
 
     var hourIndex = 0;
@@ -800,7 +803,7 @@ const switchRegion = () => {
   }
 };
 
-const dayEcharts=() => {
+const dayEcharts = () => {
   // 基于准备好的dom，初始化echarts实例
   var myChart = echarts.init(day_echart.value);
 
@@ -814,12 +817,12 @@ const dayEcharts=() => {
       }
     },
     legend: {
-      top:'0%',
+      top: '0%',
       right: '0%',
-      data:['信件数'],
+      data: ['信件数'],
       textStyle: {
         color: 'rgba(255,255,255,.5)',
-        fontSize:'12',
+        fontSize: '12',
       }
     },
     grid: {
@@ -833,10 +836,10 @@ const dayEcharts=() => {
     xAxis: [{
       type: 'category',
       boundaryGap: false,
-      axisLabel:  {
+      axisLabel: {
         textStyle: {
           color: "rgba(255,255,255,.6)",
-          fontSize:12,
+          fontSize: 12,
         },
       },
       axisLine: {
@@ -850,8 +853,8 @@ const dayEcharts=() => {
 
     }, {
 
-      axisPointer: {show: false},
-      axisLine: {  show: false},
+      axisPointer: { show: false },
+      axisLine: { show: false },
       position: 'bottom',
       offset: 20,
 
@@ -861,16 +864,16 @@ const dayEcharts=() => {
 
     yAxis: [{
       type: 'value',
-      axisTick: {show: false},
+      axisTick: { show: false },
       axisLine: {
         lineStyle: {
           color: 'rgba(255,255,255,.1)'
         }
       },
-      axisLabel:  {
+      axisLabel: {
         textStyle: {
           color: "rgba(255,255,255,.6)",
-          fontSize:12,
+          fontSize: 12,
         },
       },
 
@@ -921,15 +924,15 @@ const dayEcharts=() => {
     ]
 
   };
- 
+
   // 使用刚指定的配置项和数据显示图表。
   myChart.setOption(option);
-  window.addEventListener("resize",function(){
+  window.addEventListener("resize", function () {
     myChart.resize(chartWidth);
   });
 }
 
-const monthEcharts=() => {
+const monthEcharts = () => {
   // 基于准备好的dom，初始化echarts实例
   var myChart = echarts.init(month_echart.value);
   let option1 = {
@@ -942,12 +945,12 @@ const monthEcharts=() => {
       }
     },
     legend: {
-      top:'0%',
+      top: '0%',
       right: '0%',
-      data:['信件数'],
+      data: ['信件数'],
       textStyle: {
         color: 'rgba(255,255,255,.5)',
-        fontSize:'12',
+        fontSize: '12',
       }
     },
     grid: {
@@ -961,10 +964,10 @@ const monthEcharts=() => {
     xAxis: [{
       type: 'category',
       boundaryGap: false,
-      axisLabel:  {
+      axisLabel: {
         textStyle: {
           color: "rgba(255,255,255,.6)",
-          fontSize:12,
+          fontSize: 12,
         },
       },
       axisLine: {
@@ -978,8 +981,8 @@ const monthEcharts=() => {
 
     }, {
 
-      axisPointer: {show: false},
-      axisLine: {  show: false},
+      axisPointer: { show: false },
+      axisLine: { show: false },
       position: 'bottom',
       offset: 20,
 
@@ -989,16 +992,16 @@ const monthEcharts=() => {
 
     yAxis: [{
       type: 'value',
-      axisTick: {show: false},
+      axisTick: { show: false },
       axisLine: {
         lineStyle: {
           color: 'rgba(255,255,255,.1)'
         }
       },
-      axisLabel:  {
+      axisLabel: {
         textStyle: {
           color: "rgba(255,255,255,.6)",
-          fontSize:12,
+          fontSize: 12,
         },
       },
 
@@ -1052,13 +1055,13 @@ const monthEcharts=() => {
   // 使用刚指定的配置项和数据显示图表。
   myChart.setOption(option1);
 
-  window.addEventListener("resize",function(){
+  window.addEventListener("resize", function () {
     myChart.resize(chartWidth);
   });
 }
 
 
-const weekEcharts=() => {
+const weekEcharts = () => {
   // 基于准备好的dom，初始化echarts实例
   var myChart = echarts.init(week_echart.value);
   let option1 = {
@@ -1071,12 +1074,12 @@ const weekEcharts=() => {
       }
     },
     legend: {
-      top:'0%',
+      top: '0%',
       right: '0%',
-      data:['信件数'],
+      data: ['信件数'],
       textStyle: {
         color: 'rgba(255,255,255,.5)',
-        fontSize:'12',
+        fontSize: '12',
       }
     },
     grid: {
@@ -1090,10 +1093,10 @@ const weekEcharts=() => {
     xAxis: [{
       type: 'category',
       boundaryGap: false,
-      axisLabel:  {
+      axisLabel: {
         textStyle: {
           color: "rgba(255,255,255,.6)",
-          fontSize:12,
+          fontSize: 12,
         },
       },
       axisLine: {
@@ -1103,12 +1106,12 @@ const weekEcharts=() => {
 
       },
 
-      data:  weekXList
+      data: weekXList
 
     }, {
 
-      axisPointer: {show: false},
-      axisLine: {  show: false},
+      axisPointer: { show: false },
+      axisLine: { show: false },
       position: 'bottom',
       offset: 20,
 
@@ -1118,16 +1121,16 @@ const weekEcharts=() => {
 
     yAxis: [{
       type: 'value',
-      axisTick: {show: false},
+      axisTick: { show: false },
       axisLine: {
         lineStyle: {
           color: 'rgba(255,255,255,.1)'
         }
       },
-      axisLabel:  {
+      axisLabel: {
         textStyle: {
           color: "rgba(255,255,255,.6)",
-          fontSize:12,
+          fontSize: 12,
         },
       },
 
@@ -1181,26 +1184,34 @@ const weekEcharts=() => {
   // 使用刚指定的配置项和数据显示图表。
   myChart.setOption(option1);
 
-  window.addEventListener("resize",function(){
+  window.addEventListener("resize", function () {
     myChart.resize(chartWidth);
   });
 }
 const queryDetails = async (data: any) => {
-	mapShow=false
+  mapShow = false
   changsMap()
-    showDetails.value = true
-    await nextTick()
-    detailsRef.value?.open('details')
-    detailsRef.value?.getDetail(data)
+  showDetails.value = true
+  await nextTick()
+  detailsRef.value?.open('details')
+  detailsRef.value?.getDetail(data)
 }
 
-const closeDetails=()=>{
-	mapShow=true
-	changsMap()
-	showDetails.value = false
+const closeDetails = () => {
+  mapShow = true
+  changsMap()
+  showDetails.value = false
 }
 
 </script>
-<style lang="less">
+<style lang="scss">
+.el-popover.custom-popover-style {
+  background-color: #162582;
+  border: 0px;
+  color: #fff;
+}
 
+.custom-popover-style .el-popover__title {
+  color: #fff;
+}
 </style>
\ No newline at end of file