server 服务器模块，监控项页面接口调试

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

@@ -2,131 +2,135 @@
   <div class="line-box">
     <BoxTitle :title="title">
       <template slot="other">
-        <img src="@/assets/images/abnormalAlarm/big.png" @click="changeSize" alt="">
+        <img src="@/assets/images/abnormalAlarm/big.png" @click="changeSize" alt="" />
       </template>
     </BoxTitle>
-    <div style="width: 100%;height: calc(100% - 40px);" :id="layout"></div>
+    <div style="width: 100%; height: calc(100% - 40px)" :id="layout"></div>
   </div>
 </template>
 
 <script>
 import * as echarts from 'echarts'
-import BoxTitle from '../../components/boxTitle.vue';
+import BoxTitle from '../../components/boxTitle.vue'
 export default {
-  props: ["title","layout","dataSource"],
+  props: ['title', 'layout', 'dataSource', 'xData'],
   components: {
     BoxTitle,
   },
   data() {
     return {
       option: {},
-      xData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
     }
   },
-  mounted () {
+  watch: {
-    this.$nextTick(() => {
+    dataSource: {
-      setTimeout(() => {
+      handler: function () {
-        this.drawLine()
+        this.$nextTick(() => {
-      },0)
+          setTimeout(() => {
-    })
+            this.drawLine()
+          }, 0)
+        })
+      },
+      immediate: true,
+    },
   },
   methods: {
     changeSize() {
-      this.$emit("zoom",this.title,this.option)
+      this.$emit('zoom', this.title, this.option)
     },
     drawLine() {
       let myLine = echarts.init(document.getElementById(`${this.layout}`))
-      let series = this.dataSource.map(item => {
+      let series = this.dataSource.map((item) => {
         return {
           type: 'line',
-          name: item.name, 
+          name: item.name,
           symbol: 'none',
-          data: item.data
+          data: item.data,
         }
       })
       this.option = {
-        color: ["#00ff5a", "#0096ff", "#ffc600"],
+        color: ['#00ff5a', '#0096ff', '#ffc600'],
         tooltip: {
-          trigger: 'axis'
+          trigger: 'axis',
         },
         grid: {
           left: 0,
           right: 0,
           top: 35,
           bottom: 0,
-          containLabel: true
+          containLabel: true,
         },
         legend: {
-          icon: "roundRect",
+          icon: 'roundRect',
           itemHeight: 12, // 图例icon高度
           itemWidth: 12, // 图例icon宽度
           top: 0,
           right: 0,
           textStyle: {
-            color: "#ade6ee",
+            color: '#ade6ee',
             lineHeight: 12,
             rich: {
               a: {
                 verticalAlign: 'middle',
               },
             },
-            padding:[0,-2,-4,0],
+            padding: [0, -2, -4, 0],
-          }
+          },
         },
         xAxis: {
           type: 'category',
           axisTick: {
-            show:false
+            show: false,
           },
           axisLine: {
             lineStyle: {
-              color: "rgba(115, 191, 255, 0.2)"
+              color: 'rgba(115, 191, 255, 0.2)',
-            }
+            },
           },
           splitLine: {
             show: true,
             lineStyle: {
-              color: "rgba(115, 191, 255, 0.2)"
+              color: 'rgba(115, 191, 255, 0.2)',
-            }
+            },
           },
           axisLabel: {
-            color: "rgba(173, 230, 238, 1)",
+            color: 'rgba(173, 230, 238, 1)',
-            formatter: (value,index)=>{
+            formatter: (value, index) => {
-              if(index === 0) {
+              if (index === 0) {
-                return '        ' + value;
+                return '        ' + value
               }
-              if(index === this.xData.length -1) {
+              if (index === this.xData.length - 1) {
-                return value + '        ';
+                return value + '        '
               }
               return value
-            }
+            },
           },
           boundaryGap: false,
-          data: this.xData
+          data: this.xData || ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
         },
         yAxis: {
           type: 'value',
           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
+        series,
-      };
+      }
       myLine.setOption(this.option)
-      window.addEventListener("resize", function () {
+      window.addEventListener('resize', function () {
-        myLine.resize();
+        myLine.resize()
       })
     },
   },
@@ -134,7 +138,7 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.line-box{
+.line-box {
   width: 100%;
   height: 100%;
 }

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

@@ -1,17 +1,18 @@
 <template>
-  <div style="height: 100%;">
+  <div style="height: 100%">
     <div class="monitor-search">
       <a-row type="flex" :gutter="10">
         <a-col flex="265px">
           <span class="item-label">Server</span>
-          <a-select style="width:180px"
+          <a-select
-            v-model="queryParams.server" 
+            style="width: 180px"
+            v-model="queryParams.server"
             placeholder="select..."
             :filter-option="filterOption"
-            show-arrow 
+            show-arrow
             allowClear
             labelInValue
-            :options="serverOptions" 
+            :options="serverOptions"
             @change="onServerChange"
           >
             <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
@@ -19,12 +20,13 @@
         </a-col>
         <a-col flex="265px">
           <span class="item-label">Time</span>
-          <a-select style="width:180px"
+          <a-select
-            v-model="queryParams.timer" 
+            style="width: 180px"
+            v-model="queryParams.timer"
             placeholder="select..."
-            show-arrow 
+            show-arrow
             allowClear
-            :options="timerOptions" 
+            :options="timerOptions"
             @change="onTimeChange"
           >
             <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
@@ -34,7 +36,7 @@
           <a-range-picker
             :show-time="true"
             :value="[moment(queryParams.startDate), moment(queryParams.endDate)]"
-            @change="onRangeDateChange" 
+            @change="onRangeDateChange"
           />
         </a-col>
       </a-row>
@@ -43,101 +45,110 @@
       </div>
     </div>
     <div class="monitor-content">
-      <a-row :gutter="[20,15]" style="height: 100%;">
+      <a-row :gutter="[20, 15]" style="height: 100%">
-        <a-col :span="8" style="height: 34%;">
+        <a-col :span="8" style="height: 34%">
           <div class="monitor-content-item">
             <LineChart
               title="CPU utilizatior"
               layout="line1"
-              :dataSource="data1"
+              :xData="data1.xData"
+              :dataSource="data1.data"
               @zoom="handelZoom"
             >
             </LineChart>
           </div>
         </a-col>
-        <a-col :span="8" style="height: 34%;">
+        <a-col :span="8" style="height: 34%">
           <div class="monitor-content-item">
             <LineChart
               title="Memory Usage"
               layout="line2"
-              :dataSource="data2"
+              :xData="data2.xData"
+              :dataSource="data2.data"
               @zoom="handelZoom"
             >
             </LineChart>
           </div>
         </a-col>
-        <a-col :span="8" style="height: 34%;">
+        <a-col :span="8" style="height: 34%">
           <div class="monitor-content-item">
-              <LineChart
+            <LineChart
               title="System Load"
               layout="line3"
-              :dataSource="data3"
+              :xData="data3.xData"
+              :dataSource="data3.data"
               @zoom="handelZoom"
             >
             </LineChart>
           </div>
         </a-col>
-        <a-col :span="8" style="height: 34%;">
+        <a-col :span="8" style="height: 34%">
           <div class="monitor-content-item">
             <LineChart
               title="Disk Read/Write BPS (Byte/s)"
               layout="line4"
-              :dataSource="data4"
+              :xData="data4.xData"
+              :dataSource="data4.data"
               @zoom="handelZoom"
             >
             </LineChart>
           </div>
         </a-col>
-        <a-col :span="8" style="height: 34%;">
+        <a-col :span="8" style="height: 34%">
           <div class="monitor-content-item">
             <LineChart
               title="Disk IOPS (Count/s)"
               layout="line5"
-              :dataSource="data5"
+              :xData="data5.xData"
+              :dataSource="data5.data"
               @zoom="handelZoom"
             >
             </LineChart>
           </div>
         </a-col>
-        <a-col :span="8" style="height: 34%;">
+        <a-col :span="8" style="height: 34%">
           <div class="monitor-content-item">
             <LineChart
               title="Disk Usage/Lnode Usage"
               layout="line6"
-              :dataSource="data6"
+              :xData="data6.xData"
+              :dataSource="data6.data"
               @zoom="handelZoom"
             >
             </LineChart>
           </div>
         </a-col>
-        <a-col :span="8" style="height: 34%;">
+        <a-col :span="8" style="height: 34%">
           <div class="monitor-content-item">
             <LineChart
               title="Public Bandwidth"
               layout="line7"
-              :dataSource="data7"
+              :xData="data7.xData"
+              :dataSource="data7.data"
               @zoom="handelZoom"
             >
             </LineChart>
           </div>
         </a-col>
-        <a-col :span="8" style="height: 34%;">
+        <a-col :span="8" style="height: 34%">
           <div class="monitor-content-item">
             <LineChart
               title="Internal Network Bandwidth (bit/s)"
               layout="line8"
-              :dataSource="data8"
+              :xData="data8.xData"
+              :dataSource="data8.data"
               @zoom="handelZoom"
             >
             </LineChart>
           </div>
         </a-col>
-        <a-col :span="8" style="height: 34%;">
+        <a-col :span="8" style="height: 34%">
           <div class="monitor-content-item">
             <LineChart
               title="ECS Concurrent Connections (Count)"
               layout="line9"
-              :dataSource="data9"
+              :xData="data9.xData"
+              :dataSource="data9.data"
               @zoom="handelZoom"
             >
             </LineChart>
@@ -145,12 +156,7 @@
         </a-col>
       </a-row>
     </div>
-    <a-modal 
+    <a-modal :title="modalTitle" :width="1200" v-model="visible" @cancel="onCancel">
-      :title="modalTitle" 
-      :width="1200" 
-      v-model="visible" 
-      @cancel="onCancel"
-    >
       <div class="modal-content" id="common"></div>
     </a-modal>
     <CreateRules
@@ -165,122 +171,127 @@
 </template>
 
 <script>
-import moment from 'moment';
+import moment from 'moment'
 import * as echarts from 'echarts'
 import dateFormat from '@/components/jeecg/JEasyCron/format-date'
-import BoxTitle from '../../components/boxTitle.vue';
+import BoxTitle from '../../components/boxTitle.vue'
 import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
-import LineChart from './lineChart.vue';
+import LineChart from './lineChart.vue'
-import CreateRules from './createRules.vue';
+import CreateRules from './createRules.vue'
 export default {
   components: {
     BoxTitle,
     LineChart,
-    CreateRules
+    CreateRules,
   },
   data() {
     return {
-      currId:"",
+      currId: '',
       visible_rule: false,
-      currLabel:"",
+      currLabel: '',
       queryParams: {
         server: undefined,
         timer: 1,
         startDate: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
-        endDate: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss')
+        endDate: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
       },
       serverOptions: [],
       timerOptions: [
-        {label: "1Hours",value: 1},
+        { label: '1Hours', value: 1 },
-        {label: "2Hours",value: 2},
+        { label: '2Hours', value: 2 },
-        {label: "3Hours",value: 3},
+        { label: '3Hours', value: 3 },
-        {label: "user-defined",value: 0},
+        { label: 'user-defined', value: 0 },
-      ],
-      data1: [
-        {
-          name: "CPU Total",
-          data: [150, 230, 224, 218, 135, 147, 260]
-        }
-      ],
-      data2: [
-        {
-          name: "Memory Used Utilization",
-          data: [150, 230, 224, 218, 135, 147, 260]
-        }
-      ],
-      data3: [
-        {
-          name: "Load 1m",
-          data: [15, 23, 22, 28, 35, 47, 26]
-        },
-        {
-          name: "Load 5m",
-          data: [25, 13, 32, 18, 45, 27, 36]
-        },
-        {
-          name: "Load 15m",
-          data: [5, 23, 12, 48, 15, 27, 56]
-        },
-      ],
-      data4: [
-        {
-          name: "Disk BPS Read",
-          data: [15, 23, 22, 28, 35, 47, 26]
-        },
-        {
-          name: "Disk BPS Write",
-          data: [25, 13, 32, 18, 45, 27, 36]
-        }
-      ],
-      data5: [
-        {
-          name: "Disk IOPS Read",
-          data: [15, 23, 22, 28, 35, 47, 26]
-        },
-        {
-          name: "Disk IOPS Write",
-          data: [25, 13, 32, 18, 45, 27, 36]
-        }
-      ],
-      data6: [
-        {
-          name: "Disk Usage Utilization",
-          data: [15, 23, 22, 28, 35, 47, 26]
-        },
-        {
-          name: "Lnode Utilization",
-          data: [25, 13, 32, 18, 45, 27, 36]
-        }
-      ],
-      data7: [
-        {
-          name: "VPC PublicIP Lnterner in Rate",
-          data: [15, 23, 22, 28, 35, 47, 26]
-        },
-        {
-          name: "VPC PublicIP Lnterner Out Rate",
-          data: [25, 13, 32, 18, 45, 27, 36]
-        }
-      ],
-      data8: [
-        {
-          name: "Intranet in Rete",
-          data: [15, 23, 22, 28, 35, 47, 26]
-        },
-        {
-          name: "Intranet Out Rete",
-          data: [25, 13, 32, 18, 45, 27, 36]
-        }
-      ],
-      data9: [
-        {
-          name: "Intranet Out Rete",
-          data: [15, 23, 22, 28, 35, 47, 26]
-        }
       ],
+      data1: {
+        xData: [],
+        data: [],
+      },
+      data2: {
+        xData: [],
+        data: [],
+      },
+      data3: {
+        xData: [],
+        data: [],
+      },
+      data4: {
+        xData: [],
+        data: [
+          {
+            name: 'Disk BPS Read',
+            data: [15, 23, 22, 28, 35, 47, 26],
+          },
+          {
+            name: 'Disk BPS Write',
+            data: [25, 13, 32, 18, 45, 27, 36],
+          },
+        ],
+      },
+      data5: {
+        xData: [],
+        data: [
+          {
+            name: 'Disk IOPS Read',
+            data: [15, 23, 22, 28, 35, 47, 26],
+          },
+          {
+            name: 'Disk IOPS Write',
+            data: [25, 13, 32, 18, 45, 27, 36],
+          },
+        ],
+      },
+      data6: {
+        xData: [],
+        data: [
+          {
+            name: 'Disk Usage Utilization',
+            data: [15, 23, 22, 28, 35, 47, 26],
+          },
+          {
+            name: 'Lnode Utilization',
+            data: [25, 13, 32, 18, 45, 27, 36],
+          },
+        ],
+      },
+      data7: {
+        xData: [],
+        data: [
+          {
+            name: 'VPC PublicIP Lnterner in Rate',
+            data: [15, 23, 22, 28, 35, 47, 26],
+          },
+          {
+            name: 'VPC PublicIP Lnterner Out Rate',
+            data: [25, 13, 32, 18, 45, 27, 36],
+          },
+        ],
+      },
+      data8: {
+        xData: [],
+        data: [
+          {
+            name: 'Intranet in Rete',
+            data: [15, 23, 22, 28, 35, 47, 26],
+          },
+          {
+            name: 'Intranet Out Rete',
+            data: [25, 13, 32, 18, 45, 27, 36],
+          },
+        ],
+      },
+      data9: {
+        xData: [],
+        data: [
+          {
+            name: 'Intranet Out Rete',
+            data: [15, 23, 22, 28, 35, 47, 26],
+          },
+        ],
+      },
       visible: false,
-      modalTitle: "",
+      modalTitle: '',
-      myLine: null
+      myLine: null,
+      MonitorItem: {},
     }
   },
   created() {
@@ -290,9 +301,85 @@ export default {
     this.getServerList()
   },
   methods: {
+    // 获取所有监控项的itemId
+    getMonitorItemId() {
+      let params = {
+        sourceId: this.currId,
+      }
+      getAction('/alarmItem/alarmItems', params).then((res) => {
+        if (res.success) {
+          this.MonitorItem = res.result
+          this.getMonitorData()
+        }
+      })
+    },
+    // 获取监控项的数据
+    getMonitorData() {
+      for (const key in this.MonitorItem) {
+        if (this.MonitorItem.hasOwnProperty.call(this.MonitorItem, key)) {
+          const element = this.MonitorItem[key]
+          let params = {
+            itemId: element,
+            itemType: 0,
+            start: this.queryParams.startDate,
+            end: this.queryParams.endDate,
+          }
+          if (key === 'cpuUtilization') {
+            this.getMonitorItemData(params).then((res) => {
+              this.data1.xData = res.xData
+              this.data1.data = [
+                {
+                  name: res.name,
+                  data: res.data,
+                },
+              ]
+            })
+          } else if (key === 'memoryUtilization') {
+            this.getMonitorItemData(params).then((res) => {
+              this.data2.xData = res.xData
+              this.data2.data = [
+                {
+                  name: res.name,
+                  data: res.data,
+                },
+              ]
+            })
+          } else if (key === 'load') {
+            this.getMonitorItemData(params).then((res) => {
+              this.data3.xData = res.xData
+              this.data3.data = [
+                {
+                  name: res.name,
+                  data: res.data,
+                },
+              ]
+            })
+          }
+        }
+      }
+    },
+    getMonitorItemData(params) {
+      return getAction('/systemMonitor/queryItemHistory', params).then((res) => {
+        // return res
+        if (res.success) {
+          let name = res.result.name
+          let xData = res.result.list.map((item) => {
+            return dateFormat(new Date(item.date * 1000), 'hh:mm')
+          })
+          let data = res.result.list.map((item) => {
+            return Number((item.value * 100).toFixed(2))
+          })
+          return {
+            name,
+            xData,
+            data,
+          }
+        }
+      })
+    },
     getBeforeHours(num) {
       let currentTime = moment()
-      let oneHourAgo = moment().subtract(num, 'hours');  
+      let oneHourAgo = moment().subtract(num, 'hours')
       this.queryParams.startDate = oneHourAgo.format('YYYY-MM-DD HH:mm:ss')
       this.queryParams.endDate = currentTime.format('YYYY-MM-DD HH:mm:ss')
     },
@@ -303,72 +390,74 @@ export default {
       this.visible_rule = false
     },
     handleOk(params) {
-      postAction("/alarmRule/create", params).then(res => {
+      postAction('/alarmRule/create', params).then((res) => {
         if (res.success) {
           this.visible_rule = false
-          this.$message.success("success")
+          this.$message.success('success')
         } else {
-          this.$message.warning("This operation fails. Contact your system administrator")
+          this.$message.warning('This operation fails. Contact your system administrator')
         }
       })
     },
     moment,
     filterOption(input, option) {
-      return (
+      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
-        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
-      );
     },
     getServerList() {
-      getAction("/sysServer/sourceList").then(res => {
+      getAction('/sysServer/sourceList').then((res) => {
         if (res.success) {
-          this.serverOptions = res.result.map(item => {
+          this.serverOptions = res.result.map((item) => {
             return {
               label: item.sourceName,
-              value: item.sourceId
+              value: item.sourceId,
             }
           })
           this.currId = this.$route.query.serverId || res.result[0].sourceId
           if (this.$route.query.serverId) {
-            let currOption = this.serverOptions.find(item => {
+            let currOption = this.serverOptions.find((item) => {
               return item.value === this.$route.query.serverId
             })
             this.currLabel = currOption.label
             this.queryParams.server = {
               key: this.$route.query.serverId,
-              label:this.currLabel
+              label: this.currLabel,
             }
           } else {
             this.currLabel = res.result[0].sourceName
             this.queryParams.server = {
               key: res.result[0].sourceId,
-              label:this.currLabel
+              label: this.currLabel,
             }
           }
+          this.getMonitorItemId()
         } else {
-          this.$message.warning("This operation fails. Contact your system administrator")
+          this.$message.warning('This operation fails. Contact your system administrator')
         }
       })
     },
     onServerChange(val) {
       this.currId = val.key
       this.currLabel = val.label
+      this.getMonitorItemId()
     },
     onTimeChange(val) {
       this.getBeforeHours(val)
+      this.getMonitorData()
     },
     onRangeDateChange(date, dateString) {
       this.queryParams.timer = 0
       this.queryParams.startDate = dateString[0]
       this.queryParams.endDate = dateString[1]
+      this.getMonitorData()
     },
     drawLine(option) {
-      this.myLine = echarts.init(document.getElementById("common"))
+      this.myLine = echarts.init(document.getElementById('common'))
       this.myLine.setOption(option)
-      window.addEventListener("resize", function () {
+      window.addEventListener('resize', function () {
-        this.myLine.resize();
+        this.myLine.resize()
       })
     },
-    handelZoom(str,option) {
+    handelZoom(str, option) {
       this.modalTitle = str
       this.visible = true
       this.$nextTick(() => {
@@ -378,13 +467,13 @@ export default {
     onCancel() {
       this.visible = false
       this.myLine.clear()
-    }
+    },
   },
 }
 </script>
 
 <style lang="less" scoped>
-.monitor-search{
+.monitor-search {
   height: 50px;
   border-top: 1px solid rgba(13, 235, 201, 0.3);
   border-bottom: 1px solid rgba(13, 235, 201, 0.3);
@@ -393,13 +482,13 @@ export default {
   justify-content: space-between;
   padding: 0 10px;
   background: rgba(12, 235, 201, 0.05);
-  .ant-row-flex{
+  .ant-row-flex {
     flex-flow: nowrap;
   }
-  /deep/ .ant-calendar-range-picker-separator{
+  /deep/ .ant-calendar-range-picker-separator {
     color: white;
   }
-  .item-label{
+  .item-label {
     display: inline-block;
     font-size: 16px;
     font-family: ArialMT;
@@ -408,18 +497,18 @@ export default {
     height: 32px;
     margin-right: 10px;
   }
-  &-btns{
+  &-btns {
-    &-ant{
+    &-ant {
       background: #1397a3;
       border: none;
     }
   }
 }
-.monitor-content{
+.monitor-content {
   height: calc(100% - 60px);
   margin-top: 10px;
   overflow: hidden;
-  &-item{
+  &-item {
     width: 100%;
     height: 100%;
     // &-canvas{
@@ -428,13 +517,13 @@ export default {
     // }
   }
 }
-/deep/.ant-modal-title{
+/deep/.ant-modal-title {
   letter-spacing: 1px;
 }
-/deep/.ant-modal-footer{
+/deep/.ant-modal-footer {
   display: none;
 }
-.modal-content{
+.modal-content {
   width: 100%;
   height: 600px;
 }