From e88219817f3eae48646f26be161279e4038a43cf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BB=BB=E7=8F=AE=E5=AE=87?= <peiyu_ren@163.com>
Date: Mon, 27 Nov 2023 11:05:00 +0800
Subject: [PATCH] =?UTF-8?q?alarm=20=E6=A8=A1=E5=9D=97=20email=20=20overvie?=
 =?UTF-8?q?w=20=E6=96=AD=E5=BC=80=E9=93=BE=E6=8E=A5=E7=9A=84=E7=8A=B6?=
 =?UTF-8?q?=E6=80=81=E8=B0=83=E6=95=B4=20alarm=20=E6=A8=A1=E5=9D=97=20inst?=
 =?UTF-8?q?ances=20=E6=96=AD=E5=BC=80=E8=BF=9E=E6=8E=A5=E6=97=B6=E7=9B=B8?=
 =?UTF-8?q?=E5=85=B3=E7=9A=84=E7=8A=B6=E6=80=81=E5=8F=8A=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/images/abnormalAlarm/off-link.png  | Bin 0 -> 1382 bytes
 .../emailMonitor/instances/index.vue          | 620 ++++++++++--------
 .../emailMonitor/overview/index.vue           |   1 +
 3 files changed, 345 insertions(+), 276 deletions(-)
 create mode 100644 src/assets/images/abnormalAlarm/off-link.png

diff --git a/src/assets/images/abnormalAlarm/off-link.png b/src/assets/images/abnormalAlarm/off-link.png
new file mode 100644
index 0000000000000000000000000000000000000000..ccf9fae063e8f546f94ca3b6e452525e645aad80
GIT binary patch
literal 1382
zcmV-s1)2JZP)<h;3K|Lk000e1NJLTq001rk001rs1^@s6SGg-U00001b5ch_0Itp)
z=>Px)AW1|)RA@uhnNMgPMI6U}zg>bh;6=12DGCy$#ebwwtAZ8}#$pwO=As7+B_86-
z`|XQFZ|YHF-v0JIEHo(g;3>s}i5fi_L9GP~B34XP6g>znUSE;0`;!T~kJ){*JM%Wa
zLgtq2%x^yPoA3O7GrxzhM;q=@Zn*B?MDzjxOas7^n$tD_;7ewH-PMuT6`Y9P2LJ_L
z);4_KpIus7`pLF{THrwt+?gcFtBCkGB7PW#;mfv(f*@ECk(0K50C3s&{b?I~EpQ@g
z06-^$5Rv<$DEgrcssefw01g1azQR~5d|hy*#n-gSjxn>+=|D3<BjWiuj^FHbI+tc<
zX2!?I#}^9rl$}cWk%E^&hheA=XRZ-Z(HWKSBLg1>I$Oao@FM}Q13fH!E%3Ryxk=CS
zzEhJS;-xSQ4{H;L06@A9l%`GcC_Bt0p5I{RW7(Km;A$`tsRVKt04RgstN%5d%_k7?
zv)w>jJpV?Pq-ukkyk+pzDl<Rh5W9_C4E8QE^MgA(T^!M9G;Z@e?<gW3(!V81vZlgU
z6$BA|0RWF_eI8-vuj_&@EG*o#y}f-!L~hJ%F!K)c05}n?0>Fuq$&NGgdWAM~;Bg%9
z?{>Ra>w>3}{5h56j+rX(-vQwElF3dn^Ep>=04PmNE{oBFfYswc5WFoS^9IA0J<of#
z-EMD{O&SD2AR_Jl$w!<G!|;syI|zb%MC2vU^VZt!_Qx*ZhOoNM%*TyVNu$HPh<LMZ
zyey^beOj&7M3N+DQ=RuycC*<$iHIv&U+Yek+;93j{=Y^Q1=eUZZa~BXBJyXq+x^!7
ztz!R+VHhq~?40Q)d5)P+^>@={%d$RcoIVNwk7{yQMZ`}`5;8%j<L+SQKTLDGW?g5G
z6VX6M)F$4D<9JGWSX*RK9y^~zWIBqX^SgmA)p*gU%OfC3l8H{I^GkY0Mhfi&?gFju
z&T$-1mT6k|bPxplMC6G2UmVBk08apbx{p7tJIr>!sgz0yv`SEK#c{ml`~D$BJm`7e
zhI(q1X<C;D5q%2)JK$x_23_fK*F!R_rin;)3tb96DrhyK<x0WK9JoZf0jbo0K7xp9
z`*W=<dZ-G4h&-={R8><Ekqc22eeME1;Biyk!=^VP`Tzi)(<iJ7d9Gl#etnOp6(&`%
z={Fm+>ey<vo>EudY*67Ks`Nht0BeZY3d8VM8xRrc*J2nO8~bZ<aq+j}I34^`y)5Pe
zof%6fJ1rvJD2gtoT2=t+nwz!$>%|05ME4`&yCO1aklmRmie__8)h5rK_9RIT+a3;8
z-b)vwgXi9i#j!-B-l-}(o7z=o-tPjw$;@}#wzcYeqtUq4_x&qc9~-#31ASw%DI)Jh
zQFPh`{93QqyJdNKxmOpSh#m%juUx@3dF3<?0RJH3dhvYd8ZW*VD>Z3b5D|S;NaMS*
zS9Lf|C9qnPnR0=MOl5I8eQ-Pk07{Y<Y)&wJ&m|zkD_xBl3cloilgo%i^dkUdRRrs6
z$O=9`KYuWeWA((!l_p%_U9zqr+6?8GY!L$~zb?EBbe;HKCL`muc35~<=#hh~398@$
z;4Cx$t?C}W@4r&~iKHs)j!Y{0)>OdvL}U{Y9~cNzmdb1zQPfW;S*t8E4J8#v_yL=)
z_ZuyGZF!z|qN>PL8(fpkJB5N~(PpmhVT;Y_rD`(_!)vy_)^KPukd}R?3U5YL1YN1B
oDcbDT`R-g-sbhSUWA-fge_?hpT<oRTF8}}l07*qoM6N<$g7}7oivR!s

literal 0
HcmV?d00001

diff --git a/src/views/abnormalAlarm/emailMonitor/instances/index.vue b/src/views/abnormalAlarm/emailMonitor/instances/index.vue
index 2e3a1e0..bdb4098 100644
--- a/src/views/abnormalAlarm/emailMonitor/instances/index.vue
+++ b/src/views/abnormalAlarm/emailMonitor/instances/index.vue
@@ -1,18 +1,19 @@
 <template>
-  <div style="height: 100%;">
+  <div style="height: 100%">
     <a-spin :spinning="spinning">
       <div class="email-top">
         <BoxTitle title="Receiving information">
           <template slot="right">
-            <div style="display: flex;align-items: center;">
+            <div style="display: flex; align-items: center">
               <span class="item-label">Email</span>
-              <a-select style="width:160px"
-                v-model="emailId" 
+              <a-select
+                style="width: 160px"
+                v-model="emailId"
                 placeholder="select..."
                 :filter-option="filterOption"
-                show-arrow 
+                show-arrow
                 allowClear
-                :options="emailOptions" 
+                :options="emailOptions"
                 @change="onEmailChange"
               >
                 <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
@@ -21,81 +22,94 @@
           </template>
         </BoxTitle>
         <div class="email-top-content">
-          <div class="email-top-content-li email-top-content-item0">
+          <div :class="['email-top-content-li', emailStatus ? 'email-top-content-item0' : 'email-top-content-item0-0']">
             <div class="email-top-content-li-left">
               <div class="email-top-content-li-left-icon">
-                <img src="@/assets/images/abnormalAlarm/email-icon0.png" alt="">
+                <img v-if="emailStatus" src="@/assets/images/abnormalAlarm/email-icon0.png" alt="" />
+                <img v-else src="@/assets/images/abnormalAlarm/off-link.png" alt="" />
               </div>
-              <img src="@/assets/images/abnormalAlarm/email-split.png" alt="">
+              <img src="@/assets/images/abnormalAlarm/email-split.png" alt="" />
             </div>
-            <div  class="email-top-content-li-right">
+            <div class="email-top-content-li-right">
               <div class="email-top-content-li-right-title">Mailbox connection status</div>
-              <div class="email-top-content-li-right-val">{{ emailStatus?"NORMAL":"ABNORMAL" }}</div>
+              <div class="email-top-content-li-right-val" :style="{ color: emailStatus ? '#24d870' : '#707070' }">
+                {{ emailStatus ? 'NORMAL' : 'ABNORMAL' }}
+              </div>
             </div>
-            <div class="email-top-content-li-rect" style="background: #24d870;"></div>
+            <div class="email-top-content-li-rect" :style="{ background: emailStatus ? '#24d870' : '#707070' }"></div>
           </div>
           <div class="email-top-content-li email-top-content-item1">
             <div class="email-top-content-li-left">
               <div class="email-top-content-li-left-icon">
-                <img src="@/assets/images/abnormalAlarm/email-icon1.png" alt="">
+                <img src="@/assets/images/abnormalAlarm/email-icon1.png" alt="" />
               </div>
-              <img src="@/assets/images/abnormalAlarm/email-split.png" alt="">
+              <img src="@/assets/images/abnormalAlarm/email-split.png" alt="" />
             </div>
-            <div  class="email-top-content-li-right">
+            <div class="email-top-content-li-right">
               <div class="email-top-content-li-right-title">Total mail volume for today</div>
-              <div class="email-top-content-li-right-val" style="color: #ade6ee;font-size: 30px;">{{emailTotal.today||0}}</div>
+              <div class="email-top-content-li-right-val" style="color: #ade6ee; font-size: 30px">
+                {{ emailTotal.today || 0 }}
+              </div>
             </div>
-            <div class="email-top-content-li-rect" style="background: #00ddfe;"></div>
+            <div class="email-top-content-li-rect" style="background: #00ddfe"></div>
           </div>
           <div class="email-top-content-li email-top-content-item2">
             <div class="email-top-content-li-left">
               <div class="email-top-content-li-left-icon">
-                <img src="@/assets/images/abnormalAlarm/email-icon2.png" alt="">
+                <img src="@/assets/images/abnormalAlarm/email-icon2.png" alt="" />
               </div>
-              <img src="@/assets/images/abnormalAlarm/email-split.png" alt="">
+              <img src="@/assets/images/abnormalAlarm/email-split.png" alt="" />
             </div>
-            <div  class="email-top-content-li-right">
+            <div class="email-top-content-li-right">
               <div class="email-top-content-li-right-title">Total mail volume of yesterday</div>
-              <div class="email-top-content-li-right-val" style="color: #ade6ee;font-size: 30px;">{{emailTotal.yesterday||0}}</div>
+              <div class="email-top-content-li-right-val" style="color: #ade6ee; font-size: 30px">
+                {{ emailTotal.yesterday || 0 }}
+              </div>
             </div>
-            <div class="email-top-content-li-rect" style="background: #7c9da2;"></div>
+            <div class="email-top-content-li-rect" style="background: #7c9da2"></div>
           </div>
           <div class="email-top-content-li email-top-content-item3">
             <div class="email-top-content-li-left">
               <div class="email-top-content-li-left-icon">
-                <img src="@/assets/images/abnormalAlarm/email-icon3.png" alt="">
+                <img src="@/assets/images/abnormalAlarm/email-icon3.png" alt="" />
               </div>
-              <img src="@/assets/images/abnormalAlarm/email-split.png" alt="">
+              <img src="@/assets/images/abnormalAlarm/email-split.png" alt="" />
             </div>
-            <div  class="email-top-content-li-right">
+            <div class="email-top-content-li-right">
               <div class="email-top-content-li-right-title">Total mail volume of the past week</div>
-              <div class="email-top-content-li-right-val" style="color: #ade6ee;font-size: 30px;">{{emailTotal.week||0}}</div>
+              <div class="email-top-content-li-right-val" style="color: #ade6ee; font-size: 30px">
+                {{ emailTotal.week || 0 }}
+              </div>
             </div>
-            <div class="email-top-content-li-rect" style="background: #cca817;"></div>
+            <div class="email-top-content-li-rect" style="background: #cca817"></div>
           </div>
           <div class="email-top-content-li email-top-content-item4">
             <div class="email-top-content-item4-left">
               <div class="email-top-content-item4-left-info">
                 <div class="email-top-content-item4-left-info-title">Store capacity</div>
                 <div class="email-top-content-item4-left-info-val">
-                  <h3>total：<span>{{ emailSpace.total||0 }}</span></h3>
-                  <h3>residue：<span>{{ emailSpace.residue||0 }}</span></h3>
+                  <h3>
+                    total：<span>{{ emailSpace.total || 0 }}</span>
+                  </h3>
+                  <h3>
+                    residue：<span>{{ emailSpace.residue || 0 }}</span>
+                  </h3>
                 </div>
               </div>
-              <img src="@/assets/images/abnormalAlarm/email-split.png" alt="">
+              <img src="@/assets/images/abnormalAlarm/email-split.png" alt="" />
             </div>
-            <div  class="email-top-content-item4-right">
+            <div class="email-top-content-item4-right">
               <div class="email-top-content-item4-right-chart" id="store"></div>
             </div>
-            <div class="email-top-content-li-rect" style="background: #e54f0d;"></div>
+            <div class="email-top-content-li-rect" style="background: #e54f0d"></div>
           </div>
         </div>
       </div>
       <div class="email-center">
         <BoxTitle title="Mail reception today"></BoxTitle>
         <div class="line-bg">
-          <ul v-for="(u,i) in emailToday" :key="i">
-            <li v-for="(m,j) in u" :key="i+j" :class="[m>0?'li-active':'']"></li>
+          <ul v-for="(u, i) in emailToday" :key="i">
+            <li v-for="(m, j) in u" :key="i + j" :class="[m > 0 ? 'li-active' : '']"></li>
             <span class="ul-label">{{ timeList[i] }}</span>
           </ul>
         </div>
@@ -104,21 +118,22 @@
       <div class="email-footer">
         <BoxTitle title="Mail reception statistics">
           <template slot="right">
-            <div style="display: flex;align-items: center;">
-              <a-select style="width:160px"
-                v-model="date" 
+            <div style="display: flex; align-items: center">
+              <a-select
+                style="width: 160px"
+                v-model="date"
                 placeholder="select..."
-                show-arrow 
+                show-arrow
                 allowClear
-                :options="dateOptions" 
+                :options="dateOptions"
                 @change="onDateChange"
               >
                 <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
               </a-select>
               <a-range-picker
-                style="width: 270px;padding: 0 0 0 15px;"
+                style="width: 270px; padding: 0 0 0 15px"
                 :value="[moment(startDate), moment(endDate)]"
-                @change="onRangeDateChange" 
+                @change="onRangeDateChange"
               />
             </div>
           </template>
@@ -130,9 +145,9 @@
 </template>
 
 <script>
-import moment from 'moment';
+import moment from 'moment'
 import * as echarts from 'echarts'
-import BoxTitle from '../../components/boxTitle.vue';
+import BoxTitle from '../../components/boxTitle.vue'
 import dateFormat from '@/components/jeecg/JEasyCron/format-date'
 import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
 export default {
@@ -145,40 +160,65 @@ export default {
       emailStatus: null,
       emailTotal: {},
       emailSpace: {},
-      emailId: "",
+      emailId: '',
       emailToday: [],
       emailOptions: [],
       date: 7,
       dateOptions: [
         {
-          label: "Last To 7 Days",
+          label: 'Last To 7 Days',
           value: 7,
-        },{
-          label: "Last To 30 Days",
+        },
+        {
+          label: 'Last To 30 Days',
           value: 30,
-        },{
-          label: "Last To 180 Days",
+        },
+        {
+          label: 'Last To 180 Days',
           value: 180,
-        },{
-          label: "Last To 365 Days",
+        },
+        {
+          label: 'Last To 365 Days',
           value: 365,
         },
       ],
-      startDate: "",
+      startDate: '',
       endDate: dateFormat(new Date(), 'yyyy-MM-dd'),
       guageStore: null,
       timeLine: null,
       areaMailLine: null,
       xData: [],
       yData: [],
-      currId: "",
-      timeList: ["00:00", "01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00",
-        "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00", "19:00",
-        "20:00","21:00","22:00","23:00"
-      ]
+      currId: '',
+      timeList: [
+        '00:00',
+        '01:00',
+        '02:00',
+        '03:00',
+        '04:00',
+        '05:00',
+        '06:00',
+        '07:00',
+        '08:00',
+        '09:00',
+        '10:00',
+        '11:00',
+        '12:00',
+        '13:00',
+        '14:00',
+        '15:00',
+        '16:00',
+        '17:00',
+        '18:00',
+        '19:00',
+        '20:00',
+        '21:00',
+        '22:00',
+        '23:00',
+      ],
     }
   },
-  created () {
+  created() {
     this.startDate = this.getBeforeDate(6)
   },
   mounted() {
@@ -192,27 +232,25 @@ export default {
       this.getEmailSpace()
       this.getEmailToday()
       this.getEmailStatistics()
-    }
+    },
   },
   methods: {
     moment,
     filterOption(input, option) {
-      return (
-        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
-      );
+      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
     },
     getEmailList() {
-      getAction("/sysEmail/sourceList").then(res => {
+      getAction('/sysEmail/sourceList').then((res) => {
         if (res.success) {
           this.emailId = this.$route.query.emailId || res.result[0].sourceId
-          this.emailOptions = res.result.map(item => {
+          this.emailOptions = res.result.map((item) => {
             return {
               label: item.sourceName,
-              value: item.sourceId
+              value: item.sourceId,
             }
           })
         } else {
-          this.$message.warning("This operation fails. Contact your system administrator")
+          this.$message.warning('This operation fails. Contact your system administrator')
         }
       })
     },
@@ -235,27 +273,27 @@ export default {
       this.getEmailStatistics()
     },
     getEmailStatus() {
-      getAction("/sysEmailLog/status",{emailId:this.currId}).then(res => {
+      getAction('/sysEmailLog/status', { emailId: this.currId }).then((res) => {
         this.spinning = false
         if (res.success) {
           this.emailStatus = res.result
         } else {
-          this.$message.warning("This operation fails. Contact your system administrator")
+          this.$message.warning('This operation fails. Contact your system administrator')
         }
       })
     },
     getEmailTotal() {
-      getAction("/sysEmailLog/total", { emailId: this.currId }).then(res => {
+      getAction('/sysEmailLog/total', { emailId: this.currId }).then((res) => {
         this.spinning = false
         if (res.success) {
           this.emailTotal = res.result
         } else {
-          this.$message.warning("This operation fails. Contact your system administrator")
+          this.$message.warning('This operation fails. Contact your system administrator')
         }
       })
     },
     getEmailSpace() {
-      getAction("/sysEmailLog/space", { emailId: this.currId }).then(res => {
+      getAction('/sysEmailLog/space', { emailId: this.currId }).then((res) => {
         this.spinning = false
         if (res.success) {
           let s = res.result.usage
@@ -264,119 +302,141 @@ export default {
           this.emailSpace = res.result
           this.drawGuageStore()
         } else {
-          this.$message.warning("This operation fails. Contact your system administrator")
+          this.$message.warning('This operation fails. Contact your system administrator')
         }
       })
     },
     getEmailToday() {
-      getAction("/sysEmailLog/today",{emailId:this.currId}).then(res => {
+      getAction('/sysEmailLog/today', { emailId: this.currId }).then((res) => {
         if (res.success) {
-          let arr_h1=[]
-          let arr_h2=[]
-          let arr_h3=[]
-          let arr_h4=[]
-          let arr_h5=[]
-          let arr_h6=[]
-          let arr_h7=[]
-          let arr_h8=[]
-          let arr_h9=[]
-          let arr_h10=[]
-          let arr_h11=[]
-          let arr_h12=[]
-          let arr_h13=[]
-          let arr_h14=[]
-          let arr_h15=[]
-          let arr_h16=[]
-          let arr_h17=[]
-          let arr_h18=[]
-          let arr_h19=[]
-          let arr_h20=[]
-          let arr_h21=[]
-          let arr_h22=[]
-          let arr_h23=[]
-          let arr_h24=[]
+          let arr_h1 = []
+          let arr_h2 = []
+          let arr_h3 = []
+          let arr_h4 = []
+          let arr_h5 = []
+          let arr_h6 = []
+          let arr_h7 = []
+          let arr_h8 = []
+          let arr_h9 = []
+          let arr_h10 = []
+          let arr_h11 = []
+          let arr_h12 = []
+          let arr_h13 = []
+          let arr_h14 = []
+          let arr_h15 = []
+          let arr_h16 = []
+          let arr_h17 = []
+          let arr_h18 = []
+          let arr_h19 = []
+          let arr_h20 = []
+          let arr_h21 = []
+          let arr_h22 = []
+          let arr_h23 = []
+          let arr_h24 = []
           for (const key in res.result) {
             if (Object.hasOwnProperty.call(res.result, key)) {
-              if (key.includes("00:")) {
+              if (key.includes('00:')) {
                 arr_h1.push(res.result[key])
               }
-              if (key.includes("01:")) {
+              if (key.includes('01:')) {
                 arr_h2.push(res.result[key])
               }
-              if (key.includes("02:")) {
+              if (key.includes('02:')) {
                 arr_h3.push(res.result[key])
               }
-              if (key.includes("03:")) {
+              if (key.includes('03:')) {
                 arr_h4.push(res.result[key])
               }
-              if (key.includes("04:")) {
+              if (key.includes('04:')) {
                 arr_h5.push(res.result[key])
               }
-              if (key.includes("05:")) {
+              if (key.includes('05:')) {
                 arr_h6.push(res.result[key])
               }
-              if (key.includes("06:")) {
+              if (key.includes('06:')) {
                 arr_h7.push(res.result[key])
               }
-              if (key.includes("07:")) {
+              if (key.includes('07:')) {
                 arr_h8.push(res.result[key])
               }
-              if (key.includes("08:")) {
+              if (key.includes('08:')) {
                 arr_h9.push(res.result[key])
               }
-              if (key.includes("09:")) {
+              if (key.includes('09:')) {
                 arr_h10.push(res.result[key])
               }
-              if (key.includes("10:")) {
+              if (key.includes('10:')) {
                 arr_h11.push(res.result[key])
               }
-              if (key.includes("11:")) {
+              if (key.includes('11:')) {
                 arr_h12.push(res.result[key])
               }
-              if (key.includes("12:")) {
+              if (key.includes('12:')) {
                 arr_h13.push(res.result[key])
               }
-              if (key.includes("13:")) {
+              if (key.includes('13:')) {
                 arr_h14.push(res.result[key])
               }
-              if (key.includes("14:")) {
+              if (key.includes('14:')) {
                 arr_h15.push(res.result[key])
               }
-              if (key.includes("15:")) {
+              if (key.includes('15:')) {
                 arr_h16.push(res.result[key])
               }
-              if (key.includes("16:")) {
+              if (key.includes('16:')) {
                 arr_h17.push(res.result[key])
               }
-              if (key.includes("17:")) {
+              if (key.includes('17:')) {
                 arr_h18.push(res.result[key])
               }
-              if (key.includes("18:")) {
+              if (key.includes('18:')) {
                 arr_h19.push(res.result[key])
               }
-              if (key.includes("19:")) {
+              if (key.includes('19:')) {
                 arr_h20.push(res.result[key])
               }
-              if (key.includes("20:")) {
+              if (key.includes('20:')) {
                 arr_h21.push(res.result[key])
               }
-              if (key.includes("21:")) {
+              if (key.includes('21:')) {
                 arr_h22.push(res.result[key])
               }
-              if (key.includes("22:")) {
+              if (key.includes('22:')) {
                 arr_h23.push(res.result[key])
               }
-              if (key.includes("23:")) {
+              if (key.includes('23:')) {
                 arr_h24.push(res.result[key])
               }
             }
           }
-          this.emailToday = [arr_h1, arr_h2, arr_h3, arr_h4, arr_h5, arr_h6, arr_h7, arr_h8, arr_h9,
-            arr_h10, arr_h11, arr_h12, arr_h13, arr_h14, arr_h15, arr_h16, arr_h17, arr_h18, arr_h19,
-            arr_h20,arr_h21,arr_h22,arr_h23,arr_h24
+          this.emailToday = [
+            arr_h1,
+            arr_h2,
+            arr_h3,
+            arr_h4,
+            arr_h5,
+            arr_h6,
+            arr_h7,
+            arr_h8,
+            arr_h9,
+            arr_h10,
+            arr_h11,
+            arr_h12,
+            arr_h13,
+            arr_h14,
+            arr_h15,
+            arr_h16,
+            arr_h17,
+            arr_h18,
+            arr_h19,
+            arr_h20,
+            arr_h21,
+            arr_h22,
+            arr_h23,
+            arr_h24,
           ]
         } else {
-          this.$message.warning("This operation fails. Contact your system administrator")
+          this.$message.warning('This operation fails. Contact your system administrator')
         }
       })
     },
@@ -385,42 +445,42 @@ export default {
       let params = {
         emailId: this.currId,
         startDate: this.startDate,
-        endDate: this.endDate
+        endDate: this.endDate,
       }
-      getAction("/sysEmailLog/analysis",params).then(res => {
+      getAction('/sysEmailLog/analysis', params).then((res) => {
         if (res.success) {
           this.xData = res.result.xData
           this.yData = res.result.yData
           this.drawAreaMail()
         } else {
-          this.$message.warning("This operation fails. Contact your system administrator")
+          this.$message.warning('This operation fails. Contact your system administrator')
         }
       })
     },
     // 获取n天前的日期
-    getBeforeDate(n){
-      var n = n;
-      var d = new Date();
-      var year = d.getFullYear();
-      var mon=d.getMonth()+1;
-      var day=d.getDate();
-      if(day <= n){
-        if(mon>1) {
-          mon=mon-1;
+    getBeforeDate(n) {
+      var n = n
+      var d = new Date()
+      var year = d.getFullYear()
+      var mon = d.getMonth() + 1
+      var day = d.getDate()
+      if (day <= n) {
+        if (mon > 1) {
+          mon = mon - 1
         } else {
-          year = year-1;
-          mon = 12;
+          year = year - 1
+          mon = 12
         }
       }
-      d.setDate(d.getDate()-n);
-      year = d.getFullYear();
-      mon=d.getMonth()+1;
-      day=d.getDate();
-      var s = year+"-"+(mon<10?('0'+mon):mon)+"-"+(day<10?('0'+day):day);
-      return s;
+      d.setDate(d.getDate() - n)
+      year = d.getFullYear()
+      mon = d.getMonth() + 1
+      day = d.getDate()
+      var s = year + '-' + (mon < 10 ? '0' + mon : mon) + '-' + (day < 10 ? '0' + day : day)
+      return s
     },
     drawGuageStore() {
-      this.guageStore = echarts.init(document.getElementById("store"))
+      this.guageStore = echarts.init(document.getElementById('store'))
       let option = {
         series: [
           {
@@ -431,51 +491,51 @@ export default {
             endAngle: 0,
             min: 0,
             max: 100,
-            itemStyle:{
-              color: "#b94713"
+            itemStyle: {
+              color: '#b94713',
             },
             progress: {
               show: true,
-              width: 20
+              width: 20,
             },
             pointer: {
-              show: false
+              show: false,
             },
             axisLine: {
               lineStyle: {
-                color:[[1, '#162b39']],
-                width: 20
-              }
+                color: [[1, '#162b39']],
+                width: 20,
+              },
             },
             axisTick: {
-              show:false,
+              show: false,
             },
             splitLine: {
-              show:false,
+              show: false,
             },
             axisLabel: {
-              show:false,
+              show: false,
             },
             anchor: {
-              show: false
+              show: false,
             },
             title: {
-              show: false
+              show: false,
             },
             detail: {
               valueAnimation: true,
-              fontFamily: "MicrogrammaD-MediExte",
+              fontFamily: 'MicrogrammaD-MediExte',
               fontSize: 24,
               lineHeight: 28,
               offsetCenter: [0, '-16%'],
               formatter: '{value} %',
-              color: '#ade6ee'
+              color: '#ade6ee',
             },
             data: [
               {
-                value: this.emailSpace.usage
-              }
-            ]
+                value: this.emailSpace.usage,
+              },
+            ],
           },
           {
             type: 'gauge',
@@ -492,112 +552,117 @@ export default {
                 y: 1,
                 x2: 0,
                 y2: 0,
-                colorStops: [{
-                    offset: 0, color: '#9b3709' // 0% 处的颜色
-                }, {
-                    offset: 1, color: '#df660d' // 100% 处的颜色
-                }],
-                global: false // 缺省为 false
-              }
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: '#9b3709', // 0% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: '#df660d', // 100% 处的颜色
+                  },
+                ],
+                global: false, // 缺省为 false
+              },
             },
             progress: {
               show: true,
-              width: 2
+              width: 2,
             },
             pointer: {
-              show: false
+              show: false,
             },
             axisLine: {
-              show: false
+              show: false,
             },
             axisTick: {
-              show: false
+              show: false,
             },
             splitLine: {
-              show: false
+              show: false,
             },
             axisLabel: {
-              show: false
+              show: false,
             },
             detail: {
-              show: false
+              show: false,
             },
             data: [
               {
-                value: 100
-              }
-            ]
-          }
-        ]
+                value: 100,
+              },
+            ],
+          },
+        ],
       }
       this.guageStore.setOption(option)
-      window.addEventListener("resize", function () {
-        this.guageStore.resize();
-      });
+      window.addEventListener('resize', function () {
+        this.guageStore.resize()
+      })
     },
     drawAreaMail() {
-      this.areaMailLine = echarts.init(document.getElementById("mailArea"))
+      this.areaMailLine = echarts.init(document.getElementById('mailArea'))
       let option = {
-        color: ["#0096ff"],
+        color: ['#0096ff'],
         tooltip: {
-          trigger: 'axis'
+          trigger: 'axis',
         },
         grid: {
           left: 25,
           right: 0,
           top: 15,
           bottom: 0,
-          containLabel: true
+          containLabel: true,
         },
         xAxis: {
           type: 'category',
           axisTick: {
-            show:false
+            show: false,
           },
           axisLine: {
             lineStyle: {
-              color: "rgba(115, 191, 255, 0.2)"
-            }
+              color: 'rgba(115, 191, 255, 0.2)',
+            },
           },
           axisLabel: {
-            color: "rgba(173, 230, 238, 1)",
-            formatter: (value,index)=>{
-              if(index === 0) {
-                return '        ' + value;
+            color: 'rgba(173, 230, 238, 1)',
+            formatter: (value, index) => {
+              if (index === 0) {
+                return '        ' + value
               }
-              if(index === this.xData.length -1) {
-                return value + '                   ';
+              if (index === this.xData.length - 1) {
+                return value + '                   '
               }
               return value
-            }
+            },
           },
           boundaryGap: false,
-          data: this.xData
+          data: this.xData,
         },
         yAxis: {
           type: 'value',
-          name: "count",
-          nameLocation: "middle",
+          name: 'count',
+          nameLocation: 'middle',
           nameTextStyle: {
-            color: "#5b9cba",
-            fontFamily: "ArialMT",
-            fontSize: 14
+            color: '#5b9cba',
+            fontFamily: 'ArialMT',
+            fontSize: 14,
           },
           nameGap: 30,
           splitLine: {
             show: true,
             lineStyle: {
-              color: "rgba(115, 191, 255, 0.2)"
-            }
+              color: 'rgba(115, 191, 255, 0.2)',
+            },
           },
           axisLine: {
-            show:true,
+            show: true,
             lineStyle: {
-              color: "rgba(115, 191, 255, 0.5)"
-            }
+              color: 'rgba(115, 191, 255, 0.5)',
+            },
           },
           axisLabel: {
-            color: "rgba(173, 230, 238, 1)"
+            color: 'rgba(173, 230, 238, 1)',
           },
         },
         series: [
@@ -605,22 +670,22 @@ export default {
             type: 'line',
             symbol: 'none',
             lineStyle: {
-              width: 1
+              width: 1,
             },
             areaStyle: {
               opacity: 0.8,
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: "#0096ff" },
-                { offset: 1, color: "rgba(0, 150, 255,0.2)" },
-              ])
+                { offset: 0, color: '#0096ff' },
+                { offset: 1, color: 'rgba(0, 150, 255,0.2)' },
+              ]),
             },
-            data: this.yData
-          }
-        ]
-      };
+            data: this.yData,
+          },
+        ],
+      }
       this.areaMailLine.setOption(option)
-      window.addEventListener("resize", function () {
-        this.areaMailLine.resize();
+      window.addEventListener('resize', function () {
+        this.areaMailLine.resize()
       })
     },
   },
@@ -628,31 +693,31 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.email-top{
+.email-top {
   margin-left: 20px;
-  &-content{
+  &-content {
     height: 155px;
     padding: 15px 0;
     display: flex;
     justify-content: space-between;
-    &-li{
+    &-li {
       width: 270px;
       height: 125px;
       background: #07282b;
       position: relative;
-      &-rect{
+      &-rect {
         width: 12px;
         height: 4px;
         position: absolute;
         right: 0;
         bottom: 0;
       }
-      &-left{
+      &-left {
         width: 92px;
         height: 100%;
         padding: 12px 0;
         float: left;
-        &-icon{
+        &-icon {
           width: 90px;
           height: 100%;
           display: flex;
@@ -661,12 +726,12 @@ export default {
           float: left;
         }
       }
-      &-right{
+      &-right {
         width: 175px;
         height: 100%;
         padding: 0 15px;
         float: left;
-        &-title{
+        &-title {
           font-family: ArialMT;
           font-size: 16px;
           font-weight: normal;
@@ -674,41 +739,44 @@ export default {
           color: #4fd3c8;
           margin-top: 25px;
         }
-        &-val{
+        &-val {
           font-family: MicrogrammaD-MediExte;
           font-size: 20px;
           font-weight: normal;
           line-height: 25px;
-          color: #24d870;
+          // color: #24d870;
           margin-top: 18px;
         }
       }
     }
-    &-item0{
-      border-left: 3px solid rgba(36, 216, 112,.8);
+    &-item0 {
+      border-left: 3px solid rgba(36, 216, 112, 0.8);
     }
-    &-item1{
-      border-left: 3px solid rgba(0, 221, 254,.8);
+    &-item0-0 {
+      border-left: 3px solid rgb(112, 112, 112);
     }
-    &-item2{
-      border-left: 3px solid rgba(124, 157, 162,.8);
+    &-item1 {
+      border-left: 3px solid rgba(0, 221, 254, 0.8);
     }
-    &-item3{
-      border-left: 3px solid rgba(204, 168, 23,.8);
+    &-item2 {
+      border-left: 3px solid rgba(124, 157, 162, 0.8);
     }
-    &-item4{
+    &-item3 {
+      border-left: 3px solid rgba(204, 168, 23, 0.8);
+    }
+    &-item4 {
       width: 380px;
-      border-left: 3px solid rgba(229, 79, 13,.8);
-      &-left{
+      border-left: 3px solid rgba(229, 79, 13, 0.8);
+      &-left {
         width: 172px;
         height: 100%;
         padding: 12px 15px;
         float: left;
-        &-info{
+        &-info {
           width: 140px;
           height: 100%;
           float: left;
-          &-title{
+          &-title {
             font-family: ArialMT;
             font-size: 16px;
             font-weight: normal;
@@ -716,28 +784,28 @@ export default {
             color: #4fd3c8;
             margin-top: 10px;
           }
-          &-val{
+          &-val {
             font-family: ArialMT;
             font-size: 14px;
             font-weight: normal;
             line-height: 24px;
             margin-top: 20px;
-            h3{
+            h3 {
               color: #ade6ee;
               margin: 0;
-              span{
+              span {
                 font-family: MicrogrammaD-MediExte;
               }
             }
           }
         }
       }
-      &-right{
+      &-right {
         width: 205px;
         height: 100%;
         padding: 0 15px 0 0;
         float: left;
-        &-chart{
+        &-chart {
           width: 100%;
           height: 100%;
         }
@@ -745,27 +813,27 @@ export default {
     }
   }
 }
-.email-center{
+.email-center {
   height: 115px;
   position: relative;
   margin-left: 20px;
-  .line-bg{
+  .line-bg {
     width: 1440px;
     height: 32px;
     position: absolute;
     left: 50%;
     top: 55px;
-    background: rgba(15, 57, 41,0.8);
+    background: rgba(15, 57, 41, 0.8);
     transform: translateX(-50%) scaleX(1.04);
     // background: url(~@/assets/images/abnormalAlarm/line.png) repeat;
-    ul{
+    ul {
       height: 32px;
       list-style: none;
       margin: 0;
       padding: 0;
       float: left;
       position: relative;
-      .ul-label{
+      .ul-label {
         position: absolute;
         bottom: -25px;
         left: 0;
@@ -774,30 +842,30 @@ export default {
         font-weight: normal;
         color: #ade6ee;
       }
-      li{
+      li {
         float: left;
         height: 100%;
         width: 1px;
       }
-      .li-active{
+      .li-active {
         background: #0aaf25;
       }
     }
   }
-  .time-line{
+  .time-line {
     width: 100%;
     height: 75px;
     position: relative;
   }
 }
-.email-footer{
+.email-footer {
   height: calc(100% - 310px);
   margin-left: 20px;
-  &-content{
+  &-content {
     height: calc(100% - 40px);
   }
 }
-.item-label{
+.item-label {
   display: inline-block;
   font-size: 16px;
   font-family: ArialMT;
@@ -810,38 +878,38 @@ export default {
   background-color: none !important;
   padding: 0 !important;
 }
-/deep/.ant-select-selection--single{
+/deep/.ant-select-selection--single {
   height: 26px;
 }
-/deep/.ant-select-selection__rendered{
+/deep/.ant-select-selection__rendered {
   line-height: 22px;
 }
-/deep/.ant-select-selection__placeholder{
+/deep/.ant-select-selection__placeholder {
   font-family: ArialMT;
-	font-size: 12px;
-	font-weight: normal;
-	font-stretch: normal;
-	letter-spacing: 0px;
+  font-size: 12px;
+  font-weight: normal;
+  font-stretch: normal;
+  letter-spacing: 0px;
 }
-/deep/.ant-select-selection-selected-value{
+/deep/.ant-select-selection-selected-value {
   font-family: ArialMT;
-	font-size: 12px;
-	font-weight: normal;
-	font-stretch: normal;
-	letter-spacing: 0px;
+  font-size: 12px;
+  font-weight: normal;
+  font-stretch: normal;
+  letter-spacing: 0px;
 }
-/deep/.ant-calendar-picker-input.ant-input{
+/deep/.ant-calendar-picker-input.ant-input {
   font-size: 12px;
   height: 26px;
   font-family: ArialMT;
 }
-/deep/.ant-calendar-range-picker-separator{
+/deep/.ant-calendar-range-picker-separator {
   color: white;
   font-weight: normal;
 }
-.ant-spin-nested-loading{
+.ant-spin-nested-loading {
   height: 100%;
-  /deep/.ant-spin-container{
+  /deep/.ant-spin-container {
     height: 100%;
   }
 }
diff --git a/src/views/abnormalAlarm/emailMonitor/overview/index.vue b/src/views/abnormalAlarm/emailMonitor/overview/index.vue
index a3b2032..3d695a0 100644
--- a/src/views/abnormalAlarm/emailMonitor/overview/index.vue
+++ b/src/views/abnormalAlarm/emailMonitor/overview/index.vue
@@ -490,6 +490,7 @@ export default {
     color: #4bc048;
   }
   .status-off {
+    margin-left: 10px;
     font-family: MicrosoftYaHei;
     color: #868686;
   }