大屏显示三率计算方式

src/views/datascreen/index.vue

@@ -17,7 +17,8 @@
                 <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>
+                      <p><span class="dutyDept">{{ item.departName }}</span> <span class="dutyULspan">{{ item.mobile
+                          }}</span> <span class="dutyULspan">{{ item.policeName }}</span></p>
                     </li>
 
                   </ul>
@@ -27,7 +28,8 @@
               <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>
+                    <p><span class="dutyDept">{{ item.departName }}</span> <span class="dutyULspan">{{ item.mobile
+                        }}</span> <span class="dutyULspan">{{ item.policeName }}</span></p>
                   </li>
 
                 </ul>
@@ -36,7 +38,8 @@
               <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>
+                    <p><span class="dutyDept">{{ item.departName }}</span> <span class="dutyULspan">{{ item.mobile
+                        }}</span> <span class="dutyULspan">{{ item.policeName }}</span></p>
                   </li>
 
                 </ul>
@@ -44,7 +47,8 @@
               <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>
+                    <p><span class="dutyDept">{{ item.departName }}</span> <span class="dutyULspan">{{ item.mobile
+                        }}</span> <span class="dutyULspan">{{ item.policeName }}</span></p>
                   </li>
 
                 </ul>
@@ -118,12 +122,42 @@
         <div class="border-console  ">
           <div class="console-div">
             <ul class="clearfix">
-            <li><h2 class="bulebg">{{ consoleMap.todaySum }}</h2><span>今日来信</span></li>
+              <li>
-            <li><h2 class="yellowbg">{{ consoleMap.allSum }}</h2><span>来信总数</span></li>
+                <h2 class="bulebg">{{ consoleMap.todaySum }}</h2><span>今日来信</span>
-            <li><h2 class="bulebg">{{ consoleMap.completed }}</h2><span>办结总数</span></li>
+              </li>
-            <li><h2 class="yellowbg">{{ consoleMap.completedrate }}</h2><span>办结率</span></li>
+              <li>
-            <li><h2 class="bulebg">{{ consoleMap.satisfiedrate }}</h2><span>满意率</span></li>
+                <h2 class="yellowbg">{{ consoleMap.allSum }}</h2><span>来信总数</span>
-            <li><h2 class="bulebg">{{ consoleMap.resolvedrate }}</h2><span>解决率</span></li>
+              </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>
 
@@ -136,60 +170,23 @@
             来信趋势
           </div>
           <div v-if="seenDay" class="trendOptions">
-          <el-select
+            <el-select v-model="trendDayValue" class="m-2" :placeholder="selectTrend" size="small"
-              v-model="trendDayValue"
+              style="width: 100px;z-index: 3000;" @change="getMailTrend" popper-class="blueBack">
-              class="m-2"
+              <el-option v-for="item in trendDayOptions" :key="item.value" :label="item.label" :value="item.value" />
-              :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
+            <el-select v-model="trendWeekValue" class="m-2" :placeholder="selectTrend" size="small"
-              v-model="trendWeekValue"
+              style="width: 100px;z-index: 3000" @change="getMailTrend" popper-class="blueBack">
-              class="m-2"
+              <el-option v-for="item in trendWeekOptions" :key="item.value" :label="item.label" :value="item.value" />
-              :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
+            <el-select v-model="trendMonthValue" class="m-2" :placeholder="selectTrend" size="small"
-              v-model="trendMonthValue"
+              style="width: 100px;z-index: 3000" @change="getMailTrend" popper-class="blueBack">
-              class="m-2"
+              <el-option v-for="item in trendMonthOptions" :key="item.value" :label="item.label" :value="item.value"
-              :placeholder="selectTrend"
+                style="height:auto;max-height:300px;padding:0;" />
-              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>
 
@@ -220,7 +217,8 @@
           <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>{{ item.contactName }} ：{{ item.contactPhone }}<span class="mailULspan">{{ item.mailState }}</span>
+                </p>
                 <p>{{ formatDate(item.createTime) }}</p>
               </li>
             </ul>
@@ -251,24 +249,23 @@
         </div>
 
       </div>
-	  <details-popup
+      <details-popup v-if="showDetails" ref="detailsRef" @success="closeDetails" @close="closeDetails" />
-            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-image: url('@/assets/bg.png');
- background-size: cover; /* 背景图片大小适应容器 */
+  /* 背景图片的路径 */
+  background-size: cover;
+  /* 背景图片大小适应容器 */
   overflow: auto;
   background-color: #1C3472;
 
@@ -303,6 +300,9 @@ 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; // 自动切换的间隔时间，单位为毫秒
@@ -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) {
   }
 }
@@ -1201,6 +1204,14 @@ const closeDetails=()=>{
 }
 
 </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>