邮件日志管理，接受量接口调试

src/views/abnormalAlarm/emailMonitor/instances/index.vue

@@ -91,8 +91,13 @@
     </div>
     <div class="email-center">
       <BoxTitle title="Mail reception today"></BoxTitle>
-      <div class="line-bg"></div>
+      <div class="line-bg">
-      <div class="time-line" id="timeLine"></div>
+        <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>
+      <!-- <div class="time-line" id="timeLine"></div> -->
     </div>
     <div class="email-footer">
       <BoxTitle title="Mail reception statistics">
@@ -199,6 +204,7 @@ export default {
       emailTotal: {},
       emailSpace: {},
       email: undefined,
+      emailToday: [],
       emailOptions: [],
       date: 7,
       dateOptions: [
@@ -222,7 +228,11 @@ export default {
       timeLine: null,
       xData: [],
       yData: [],
-      currId:""
+      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 () {
@@ -234,9 +244,10 @@ export default {
     this.getEmailStatus()
     this.getEmailTotal()
     this.getEmailSpace()
+    this.getEmailToday()
     this.$nextTick(() => {
       setTimeout(() => {
-        this.drawTimeline ()
+        // this.drawTimeline ()
       },0)
     })
   },
@@ -305,9 +316,114 @@ export default {
     },
     getEmailToday() {
       // getAction("/sysEmailLog/space",{emailId:this.currId}).then(res => {
-      getAction("/sysEmailLog/today",{emailId:"1668823404678311937"}).then(res => {
+      getAction("/sysEmailLog/today",{emailId:"e2"}).then(res => {
         if (res.success) {
-          this.emailToday = res.result
+          // this.emailToday = res.result
+          let arr =[]
+          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:")) {
+                arr_h1.push(res.result[key])
+              }
+              if (key.includes("01:")) {
+                arr_h2.push(res.result[key])
+              }
+              if (key.includes("02:")) {
+                arr_h3.push(res.result[key])
+              }
+              if (key.includes("03:")) {
+                arr_h4.push(res.result[key])
+              }
+              if (key.includes("04:")) {
+                arr_h5.push(res.result[key])
+              }
+              if (key.includes("05:")) {
+                arr_h6.push(res.result[key])
+              }
+              if (key.includes("06:")) {
+                arr_h7.push(res.result[key])
+              }
+              if (key.includes("07:")) {
+                arr_h8.push(res.result[key])
+              }
+              if (key.includes("08:")) {
+                arr_h9.push(res.result[key])
+              }
+              if (key.includes("09:")) {
+                arr_h10.push(res.result[key])
+              }
+              if (key.includes("10:")) {
+                arr_h11.push(res.result[key])
+              }
+              if (key.includes("11:")) {
+                arr_h12.push(res.result[key])
+              }
+              if (key.includes("12:")) {
+                arr_h13.push(res.result[key])
+              }
+              if (key.includes("13:")) {
+                arr_h14.push(res.result[key])
+              }
+              if (key.includes("14:")) {
+                arr_h15.push(res.result[key])
+              }
+              if (key.includes("15:")) {
+                arr_h16.push(res.result[key])
+              }
+              if (key.includes("16:")) {
+                arr_h17.push(res.result[key])
+              }
+              if (key.includes("17:")) {
+                arr_h18.push(res.result[key])
+              }
+              if (key.includes("18:")) {
+                arr_h19.push(res.result[key])
+              }
+              if (key.includes("19:")) {
+                arr_h20.push(res.result[key])
+              }
+              if (key.includes("20:")) {
+                arr_h21.push(res.result[key])
+              }
+              if (key.includes("21:")) {
+                arr_h22.push(res.result[key])
+              }
+              if (key.includes("22:")) {
+                arr_h23.push(res.result[key])
+              }
+              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
+          ]
         } else {
           this.$message.warning("This operation fails. Contact your system administrator")
         }
@@ -732,17 +848,44 @@ export default {
   }
 }
 .email-center{
-  width: 100%;
   height: 115px;
   position: relative;
   margin-left: 20px;
   .line-bg{
-    width: 100%;
+    width: 1440px;
     height: 32px;
     position: absolute;
-    left: 0;
+    left: 50%;
     top: 55px;
-    background: url(~@/assets/images/abnormalAlarm/line.png) repeat;
+    // transform: translateX(-50%);
+    background: rgba(15, 57, 41,0.8);
+    transform: translateX(-50%) scaleX(1.04);
+    // background: url(~@/assets/images/abnormalAlarm/line.png) repeat;
+    ul{
+      height: 32px;
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      float: left;
+      position: relative;
+      .ul-label{
+        position: absolute;
+        bottom: -25px;
+        left: 0;
+        font-family: ArialMT;
+        font-size: 13px;
+        font-weight: normal;
+        color: #ade6ee;
+      }
+      li{
+        float: left;
+        height: 100%;
+        width: 1px;
+      }
+      .li-active{
+        background: #0aaf25;
+      }
+    }
   }
   .time-line{
     width: 100%;