email monitor 模块 instances 页面创建

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

@@ -1,15 +1,756 @@
 <template>
+  <div style="height: 100%;">
+    <div class="email-top">
+      <BoxTitle title="Receiving information">
+        <template slot="right">
           <div>
-    instances
+            <span class="item-label">Email</span>
+            <a-select style="width:160px"
+              v-model="email" 
+              placeholder="select..."
+              :filter-option="filterOption"
+              show-arrow 
+              :options="emailOptions" 
+              @change="onEmailChange"
+            >
+              <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
+            </a-select>
+          </div>
+        </template>
+      </BoxTitle>
+      <div class="email-top-content">
+        <div class="email-top-content-li email-top-content-item0">
+          <div class="email-top-content-li-left">
+            <div class="email-top-content-li-left-icon">
+              <img src="@/assets/images/abnormalAlarm/email-icon0.png" alt="">
+            </div>
+            <img src="@/assets/images/abnormalAlarm/email-split.png" alt="">
+          </div>
+          <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>
+        </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="">
+            </div>
+            <img src="@/assets/images/abnormalAlarm/email-split.png" alt="">
+          </div>
+          <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>
+        </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="">
+            </div>
+            <img src="@/assets/images/abnormalAlarm/email-split.png" alt="">
+          </div>
+          <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>
+        </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="">
+            </div>
+            <img src="@/assets/images/abnormalAlarm/email-split.png" alt="">
+          </div>
+          <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>
+        </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>
+              </div>
+            </div>
+            <img src="@/assets/images/abnormalAlarm/email-split.png" alt="">
+          </div>
+          <div  class="email-top-content-item4-right">
+            <div class="email-top-content-item4-right-chart" id="store"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="email-center">
+      <BoxTitle title="Mail reception today"></BoxTitle>
+      <div class="line-bg"></div>
+      <div class="time-line" id="timeLine"></div>
+    </div>
+    <div class="email-footer">
+      <BoxTitle title="Mail reception statistics">
+        <template slot="right">
+          <div>
+            <a-select style="width:160px"
+              v-model="date" 
+              placeholder="select..."
+              show-arrow 
+              :options="dateOptions" 
+              @change="onDateChange"
+            >
+              <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
+            </a-select>
+            <a-range-picker
+              style="width: 270px;"
+              :default-value="[moment(startDate), moment(endDate)]"
+              @change="onRangeDateChange" 
+            />
+          </div>
+        </template>
+      </BoxTitle>
+      <div class="email-footer-content" id="mail"></div>
+    </div>
   </div>
 </template>
 
 <script>
+var data1 = [];
+var dataCount = 1;
+var startTime = +new Date();
+console.log("startTime",startTime);
+var categories = ['cpu'];
+var types = [
+  { name: 'Halt', color: '#0aaf25' },
+];
+var legendData = types.map(item=>{
+  return item.name
+})
+// Generate mock data
+categories.forEach((category, index) => {
+  var baseTime = startTime;
+  for (var i = 0; i < dataCount; i++) {
+    var typeItem = types[i];
+    var duration = Math.round(Math.random() * 10000);
+    data1.push({
+      name: typeItem.name,
+      value: [index, baseTime, (baseTime += duration), duration],
+      itemStyle: {
+        normal: {
+          color: typeItem.color
+        }
+      }
+    });
+    baseTime += Math.round(Math.random() * 2000);
+  }
+});
+function renderItem1(params, api) {
+  var categoryIndex = api.value(0);
+  var start = api.coord([api.value(1), categoryIndex]);
+  var end = api.coord([api.value(2), categoryIndex]);
+  var height = api.size([0, 1])[1] * 1;
+  var rectShape = echarts.graphic.clipRectByRect(
+    {
+      x: start[0],
+      y: start[1] - height / 2,
+      width: end[0] - start[0],
+      height: height
+    },
+    {
+      x: params.coordSys.x,
+      y: params.coordSys.y,
+      width: params.coordSys.width,
+      height: params.coordSys.height
+    }
+  );
+  return (
+    rectShape && {
+      type: 'rect',
+      transition: ['shape'],
+      shape: rectShape,
+      style: api.style()
+    }
+  );
+}
+import moment from 'moment';
+import * as echarts from 'echarts'
+import BoxTitle from '../../components/boxTitle.vue';
+import dateFormat from '@/components/jeecg/JEasyCron/format-date'
+import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
 export default {
-    
+  components: {
+    BoxTitle,
+  },
+  data() {
+    return {
+      emailStatus: null,
+      emailTotal: {},
+      emailSpace: {},
+      email: undefined,
+      emailOptions: [],
+      date: 7,
+      dateOptions: [
+        {
+          label: "Last To 7 Days",
+          value: 7,
+        },{
+          label: "Last To 30 Days",
+          value: 30,
+        },{
+          label: "Last To 180 Days",
+          value: 180,
+        },{
+          label: "Last To 365 Days",
+          value: 365,
+        },
+      ],
+      startDate: dateFormat(new Date(), 'yyyy-MM-dd'),
+      endDate: dateFormat(new Date(), 'yyyy-MM-dd'),
+      guageStore: null,
+      timeLine: null,
+      xData: [],
+      yData: [],
+    }
+  },
+  mounted() {
+    this.getServerList()
+    this.getEmailStatus()
+    this.getEmailTotal()
+    this.getEmailSpace()
+    this.$nextTick(() => {
+      setTimeout(() => {
+        this.drawTimeline ()
+        // this.drawAreaMail ()
+      },0)
+    })
+  },
+  methods: {
+    moment,
+    filterOption(input, option) {
+      return (
+        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+      );
+    },
+    getServerList() {
+      getAction("/sysServer/sourceList").then(res => {
+        if (res.success) {
+          this.serverOptions = res.result.map(item => {
+            return {
+              label: item.sourceName,
+              value: item.sourceId
+            }
+          })
+        } else {
+          this.$message.warning("This operation fails. Contact your system administrator")
+        }
+      })
+    },
+    onEmailChange(val) {
+      console.log(val);
+    },
+    onDateChange(val) {
+      console.log(val);
+    },
+    onRangeDateChange(date, dateString) {
+      this.startDate = dateString[0]
+      this.endDate = dateString[1]
+    },
+    getEmailStatus() {
+      // getAction("/sysEmailLog/status",{emailId:this.$route.query.emailId}).then(res => {
+      getAction("/sysEmailLog/status",{emailId:"1668823404678311937"}).then(res => {
+        if (res.success) {
+          this.emailStatus = res.result
+        } else {
+          this.$message.warning("This operation fails. Contact your system administrator")
+        }
+      })
+    },
+    getEmailTotal() {
+      // getAction("/sysEmailLog/total",{emailId:this.$route.query.emailId}).then(res => {
+      getAction("/sysEmailLog/total",{emailId:"1668823404678311937"}).then(res => {
+        if (res.success) {
+          this.emailTotal = res.result
+        } else {
+          this.$message.warning("This operation fails. Contact your system administrator")
+        }
+      })
+    },
+    getEmailSpace() {
+      // getAction("/sysEmailLog/space",{emailId:this.$route.query.emailId}).then(res => {
+      getAction("/sysEmailLog/space",{emailId:"1668823404678311937"}).then(res => {
+        if (res.success) {
+          let s = res.result.usage
+          s = s.substring(0, s.length - 1)
+          res.result.usage = s
+          this.emailSpace = res.result
+          this.drawGuageStore()
+        } else {
+          this.$message.warning("This operation fails. Contact your system administrator")
+        }
+      })
+    },
+    getEmailToday() {
+      // getAction("/sysEmailLog/space",{emailId:this.$route.query.emailId}).then(res => {
+      getAction("/sysEmailLog/today",{emailId:"1668823404678311937"}).then(res => {
+        if (res.success) {
+          this.emailToday = res.result
+        } else {
+          this.$message.warning("This operation fails. Contact your system administrator")
+        }
+      })
+    },
+    getEmailStatistics() {
+      let params = {
+        emailId: "1668823404678311937",
+        startDate: "2022-12-30",
+        endDate:"2023-01-02"
+      }
+      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")
+        }
+      })
+    },
+    drawGuageStore() {
+      this.guageStore = echarts.init(document.getElementById("store"))
+      let option = {
+        series: [
+          {
+            type: 'gauge',
+            center: ['50%', '88%'],
+            radius: 80,
+            startAngle: 180,
+            endAngle: 0,
+            min: 0,
+            max: 100,
+            itemStyle:{
+              color: "#b94713"
+            },
+            progress: {
+              show: true,
+              width: 20
+            },
+            pointer: {
+              show: false
+            },
+            axisLine: {
+              lineStyle: {
+                color:[[1, '#162b39']],
+                width: 20
+              }
+            },
+            axisTick: {
+              show:false,
+            },
+            splitLine: {
+              show:false,
+            },
+            axisLabel: {
+              show:false,
+            },
+            anchor: {
+              show: false
+            },
+            title: {
+              show: false
+            },
+            detail: {
+              valueAnimation: true,
+              fontFamily: "MicrogrammaD-MediExte",
+              fontSize: 24,
+              lineHeight: 28,
+              offsetCenter: [0, '-16%'],
+              formatter: '{value} %',
+              color: '#ade6ee'
+            },
+            data: [
+              {
+                value: this.emailSpace.usage
+              }
+            ]
+          },
+          {
+            type: 'gauge',
+            center: ['50%', '88%'],
+            radius: 90,
+            startAngle: 180,
+            endAngle: 0,
+            min: 0,
+            max: 100,
+            itemStyle: {
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 1,
+                x2: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0, color: '#9b3709' // 0% 处的颜色
+                }, {
+                    offset: 1, color: '#df660d' // 100% 处的颜色
+                }],
+                global: false // 缺省为 false
+              }
+            },
+            progress: {
+              show: true,
+              width: 2
+            },
+            pointer: {
+              show: false
+            },
+            axisLine: {
+              show: false
+            },
+            axisTick: {
+              show: false
+            },
+            splitLine: {
+              show: false
+            },
+            axisLabel: {
+              show: false
+            },
+            detail: {
+              show: false
+            },
+            data: [
+              {
+                value: 100
+              }
+            ]
+          }
+        ]
+      }
+      this.guageStore.setOption(option)
+      window.addEventListener("resize", function () {
+        this.guageStore.resize();
+      });
+    },
+    drawTimeline() {
+      this.timeLine = echarts.init(document.getElementById("timeLine"))
+      let option = {
+        color:['#0aaf25'],
+        tooltip: {
+          formatter: function (params) {
+            return params.marker + params.name + ': ' + params.value[3] + ' ms';
+          }
+        },
+        grid: {
+          left: '0%',
+          right: '0%',
+          bottom: '0',
+          top:15,
+          height: 32,
+          containLabel: false,
+          show: true
+        },
+        xAxis: {
+          min: startTime,
+          axisLabel: {
+            color: "#ade6ee",
+            fontSize: 14,
+            formatter: function (val) {
+              console.log("valvalvalval",val);
+              return Math.max(0, val - startTime) + ' ms';
+            }
+          },
+          splitLine: {
+            show: false
+          }
+        },
+        yAxis: {
+          show:false,
+          data: categories
+        },
+        series: [
+          { name: legendData[0], type: 'bar', data: [] },
+          {
+            type: 'custom',
+            renderItem: renderItem1,
+            encode: {
+              x: [1, 2],
+              y: 0
+            },
+            data: data1
+          }
+        ]
+      }
+      this.timeLine.setOption(option)
+      window.addEventListener("resize", function () {
+        this.timeLine.resize();
+      });
+    },
+    drawAreaMail() {
+      let myLine = echarts.init(document.getElementById("mail"))
+      this.option1 = {
+        color:["#0096ff"],
+        grid: {
+          left: 25,
+          right: 0,
+          top: 15,
+          bottom: 0,
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisTick: {
+            show:false
+          },
+          axisLine: {
+            lineStyle: {
+              color: "rgba(115, 191, 255, 0.2)"
+            }
+          },
+          axisLabel: {
+            color: "rgba(173, 230, 238, 1)",
+            formatter: (value,index)=>{
+              if(index === 0) {
+                return '        ' + value;
+              }
+              if(index === this.xData.length -1) {
+                return value + '        ';
+              }
+              return value
+            }
+          },
+          boundaryGap: false,
+          data: this.xData
+        },
+        yAxis: {
+          type: 'value',
+          name: "number",
+          nameLocation: "middle",
+          nameTextStyle: {
+            color: "#5b9cba",
+            fontFamily: "ArialMT",
+            fontSize: 14
+          },
+          nameGap: 30,
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(115, 191, 255, 0.2)"
+            }
+          },
+          axisLine: {
+            show:true,
+            lineStyle: {
+              color: "rgba(115, 191, 255, 0.5)"
+            }
+          },
+          axisLabel: {
+            color: "rgba(173, 230, 238, 1)"
+          },
+        },
+        series: [
+          {
+            type: 'line',
+            symbol: 'none',
+            lineStyle: {
+              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)" },
+              ])
+            },
+            data: this.yData
+          }
+        ]
+      };
+      myLine.setOption(this.option1)
+      window.addEventListener("resize", function () {
+        myLine.resize();
+      })
+    },
+  },
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
-
+.email-top{
+  margin-left: 20px;
+  &-content{
+    height: 155px;
+    padding: 15px 0;
+    display: flex;
+    justify-content: space-between;
+    &-li{
+      width: 270px;
+      height: 125px;
+      background: #07282b;
+      &-left{
+        width: 92px;
+        height: 100%;
+        padding: 12px 0;
+        float: left;
+        &-icon{
+          width: 90px;
+          height: 100%;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          float: left;
+        }
+      }
+      &-right{
+        width: 175px;
+        height: 100%;
+        padding: 0 15px;
+        float: left;
+        &-title{
+          font-family: ArialMT;
+          font-size: 16px;
+          font-weight: normal;
+          line-height: 18px;
+          color: #4fd3c8;
+          margin-top: 25px;
+        }
+        &-val{
+          font-family: MicrogrammaD-MediExte;
+          font-size: 22px;
+          font-weight: normal;
+          line-height: 25px;
+          color: #24d870;
+          margin-top: 18px;
+        }
+      }
+    }
+    &-item0{
+      border-left: 3px solid rgba(36, 216, 112,.8);
+    }
+    &-item1{
+      border-left: 3px solid rgba(0, 221, 254,.8);
+    }
+    &-item2{
+      border-left: 3px solid rgba(124, 157, 162,.8);
+    }
+    &-item3{
+      border-left: 3px solid rgba(204, 168, 23,.8);
+    }
+    &-item4{
+      width: 380px;
+      border-left: 3px solid rgba(229, 79, 13,.8);
+      &-left{
+        width: 172px;
+        height: 100%;
+        padding: 12px 15px;
+        float: left;
+        &-info{
+          width: 140px;
+          height: 100%;
+          float: left;
+          &-title{
+            font-family: ArialMT;
+            font-size: 16px;
+            font-weight: normal;
+            line-height: 18px;
+            color: #4fd3c8;
+            margin-top: 10px;
+          }
+          &-val{
+            font-family: ArialMT;
+            font-size: 14px;
+            font-weight: normal;
+            line-height: 24px;
+            margin-top: 20px;
+            h3{
+              color: #ade6ee;
+              margin: 0;
+              span{
+                font-family: MicrogrammaD-MediExte;
+              }
+            }
+          }
+        }
+      }
+      &-right{
+        width: 205px;
+        height: 100%;
+        padding: 0 15px 0 0;
+        float: left;
+        &-chart{
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
+}
+.email-center{
+  width: 100%;
+  height: 115px;
+  position: relative;
+  margin-left: 20px;
+  .line-bg{
+    width: 100%;
+    height: 32px;
+    position: absolute;
+    left: 0;
+    top: 55px;
+    background: url(~@/assets/images/abnormalAlarm/line.png) repeat;
+  }
+  .time-line{
+    width: 100%;
+    height: 75px;
+    position: relative;
+  }
+}
+.email-footer{
+  height: calc(100% - 310px);
+  margin-left: 20px;
+  &-content{
+    height: calc(100% - 40px);
+  }
+}
+.item-label{
+  display: inline-block;
+  font-size: 16px;
+  font-family: ArialMT;
+  font-weight: normal;
+  color: #5b9cba;
+  line-height: 26px;
+  height: 26px;
+  margin-right: 10px;
+  letter-spacing: 0px;
+  background-color: none !important;
+  padding: 0 !important;
+}
+/deep/.ant-select-selection--single{
+  height: 26px;
+}
+/deep/.ant-select-selection__rendered{
+  line-height: 22px;
+}
+/deep/.ant-select-selection__placeholder{
+  font-family: ArialMT;
+	font-size: 14px;
+	font-weight: normal;
+	font-stretch: normal;
+	letter-spacing: 0px;
+}
+/deep/.ant-select-selection-selected-value{
+  font-family: ArialMT;
+	font-size: 14px;
+	font-weight: normal;
+	font-stretch: normal;
+	letter-spacing: 0px;
+}
+/deep/.ant-calendar-picker-input.ant-input{
+  font-size: 12px;
+  height: 26px;
+  font-family: ArialMT;
+}
+/deep/.ant-calendar-range-picker-separator{
+  color: white;
+  font-weight: normal;
+}
 </style>

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

@@ -413,8 +413,14 @@ export default {
       this.form.resetFields()
       this.visible = false
     },
-    onRowDbclick() {
+    onRowDbclick(record) {
-      this.$router.push("/alarm/emailMonitor/instances")
+      let query = {
+        emailId:record.id
+      }
+      this.$router.push({
+        path: '/alarm/emailMonitor/instances',
+        query
+      })
     }
   },
 }

src/views/abnormalAlarm/serverMonitor/instances/cpu.vue

@@ -217,24 +217,6 @@ export default {
           bottom: 0,
           containLabel: true
         },
-        legend: {
-          icon: "roundRect",
-          itemHeight: 12, // 图例icon高度
-          itemWidth: 12, // 图例icon宽度
-          top: 0,
-          right: 0,
-          textStyle: {
-            color: "#ade6ee",
-            lineHeight: 12,
-
-            rich: {
-              a: {
-                verticalAlign: 'middle',
-              },
-            },
-            padding:[0,-2,-4,0],
-          }
-        },
         xAxis: {
           type: 'category',
           axisTick: {
@@ -317,24 +299,6 @@ export default {
           bottom: 0,
           containLabel: true
         },
-        legend: {
-          icon: "roundRect",
-          itemHeight: 12, // 图例icon高度
-          itemWidth: 12, // 图例icon宽度
-          top: 0,
-          right: 0,
-          textStyle: {
-            color: "#ade6ee",
-            lineHeight: 12,
-
-            rich: {
-              a: {
-                verticalAlign: 'middle',
-              },
-            },
-            padding:[0,-2,-4,0],
-          }
-        },
         xAxis: {
           type: 'category',
           axisTick: {