instances 模块 监控页面开发

src/views/abnormalAlarm/components/boxTitle.vue

@@ -6,6 +6,9 @@
         <img src="@/assets/images/abnormalAlarm/title_right.png" alt="">
       </slot>
     </div>
+    <div class="other">
+      <slot name="other"></slot>
+    </div>
   </div>
 </template>
 
@@ -45,5 +48,12 @@
     top: 50%;
     transform: translateY(-50%);
   }
+  .other{
+    position: absolute;
+    right: 15px;
+    top: 50%;
+    transform: translateY(-50%);
+    cursor: pointer;
+  }
 }
 </style>

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

@@ -1,7 +1,7 @@
 <template>
   <div style="height: 100%;">
     <a-card :bordered="false" style="height:100%;margin-left: 20px;">
-      <a-tabs default-active-key="serviceProcess" @change="handleTabChange">
+      <a-tabs default-active-key="monitor" @change="handleTabChange">
         <a-tab-pane key="detais" tab="DETAILS">
           <Details></Details>
         </a-tab-pane>

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

@@ -0,0 +1,123 @@
+<template>
+  <div class="line-box">
+    <BoxTitle :title="title">
+      <template slot="other">
+        <img src="@/assets/images/abnormalAlarm/big.png" @click="changeSize" alt="">
+      </template>
+    </BoxTitle>
+    <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';
+export default {
+  props: ["title","layout","dataSource"],
+  components: {
+    BoxTitle,
+  },
+  data() {
+    return {
+      option: {}
+    }
+  },
+  mounted () {
+    this.$nextTick(() => {
+      setTimeout(() => {
+        this.drawLine()
+      },0)
+    })
+  },
+  methods: {
+    changeSize() {
+      this.$emit("zoom",this.title,this.option)
+    },
+    drawLine() {
+      let myLine = echarts.init(document.getElementById(`${this.layout}`))
+      let series = this.dataSource.map(item => {
+        return {
+          type: 'line',
+          name: item.name, 
+          symbol: 'none',
+          data: item.data
+        }
+      })
+      this.option = {
+        color:["#00ff5a","#0096ff","#ffc600"],
+        grid: {
+          left: 0,
+          right: 0,
+          top: 35,
+          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],
+          }
+          // itemStyle
+        },
+        xAxis: {
+          type: 'category',
+          axisTick: {
+            show:false
+          },
+          axisLine: {
+            lineStyle: {
+              color: "rgba(115, 191, 255, 0.2)"
+            }
+          },
+          axisLabel: {
+            color: "rgba(173, 230, 238, 1)"
+          },
+          boundaryGap: false,
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+        },
+        yAxis: {
+          type: 'value',
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(115, 191, 255, 0.2)"
+            }
+          },
+          axisLine: {
+            lineStyle: {
+              color: "rgba(115, 191, 255, 0.5)"
+            }
+          },
+          axisLabel: {
+              color: "rgba(173, 230, 238, 1)"
+            },
+        },
+        series
+      };
+      myLine.setOption(this.option)
+      window.addEventListener("resize", function () {
+        myLine.resize();
+      })
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.line-box{
+  width: 100%;
+  height: 100%;
+}
+</style>

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

@@ -1,15 +1,384 @@
 <template>
-  <div>
-    monitor
+  <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"
+            v-model="queryParams.server" 
+            placeholder="select..."
+            :filter-option="filterOption"
+            show-arrow 
+            :options="serverOptions" 
+            @change="onServerChange"
+          >
+            <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
+          </a-select>
+        </a-col>
+        <a-col flex="265px">
+          <span class="item-label">Time</span>
+          <a-select style="width:180px"
+            v-model="queryParams.timer" 
+            placeholder="select..."
+            show-arrow 
+            :options="timerOptions" 
+            @change="onTimeChange"
+          >
+            <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
+          </a-select>
+        </a-col>
+        <a-col flex="265px">
+          <a-range-picker
+            dropdownClassName="asd"
+            :default-value="[moment(queryParams.startDate), moment(queryParams.endDate)]"
+            @change="onRangeDateChange" 
+          />
+        </a-col>
+      </a-row>
+      <div class="monitor-search-btns">
+        <a-button class="monitor-search-btns-ant">Create Alert RULES</a-button>
+      </div>
+    </div>
+    <div class="monitor-content">
+      <a-row :gutter="[20,15]" style="height: 100%;">
+        <a-col :span="8" style="height: 34%;">
+          <div class="monitor-content-item">
+            <LineChart
+              title="CPU utilizatior"
+              layout="line1"
+              :dataSource="data1"
+              @zoom="handelZoom"
+            >
+            </LineChart>
+          </div>
+        </a-col>
+        <a-col :span="8" style="height: 34%;">
+          <div class="monitor-content-item">
+            <LineChart
+              title="Memory Usage"
+              layout="line2"
+              :dataSource="data2"
+              @zoom="handelZoom"
+            >
+            </LineChart>
+          </div>
+        </a-col>
+        <a-col :span="8" style="height: 34%;">
+          <div class="monitor-content-item">
+              <LineChart
+              title="System Load"
+              layout="line3"
+              :dataSource="data3"
+              @zoom="handelZoom"
+            >
+            </LineChart>
+          </div>
+        </a-col>
+        <a-col :span="8" style="height: 34%;">
+          <div class="monitor-content-item">
+            <LineChart
+              title="Disk Read/Write BPS (Byte/s)"
+              layout="line4"
+              :dataSource="data4"
+              @zoom="handelZoom"
+            >
+            </LineChart>
+          </div>
+        </a-col>
+        <a-col :span="8" style="height: 34%;">
+          <div class="monitor-content-item">
+            <LineChart
+              title="Disk IOPS (Count/s)"
+              layout="line5"
+              :dataSource="data5"
+              @zoom="handelZoom"
+            >
+            </LineChart>
+          </div>
+        </a-col>
+        <a-col :span="8" style="height: 34%;">
+          <div class="monitor-content-item">
+            <LineChart
+              title="Disk Usage/Lnode Usage"
+              layout="line6"
+              :dataSource="data6"
+              @zoom="handelZoom"
+            >
+            </LineChart>
+          </div>
+        </a-col>
+        <a-col :span="8" style="height: 34%;">
+          <div class="monitor-content-item">
+            <LineChart
+              title="Public Bandwidth"
+              layout="line7"
+              :dataSource="data7"
+              @zoom="handelZoom"
+            >
+            </LineChart>
+          </div>
+        </a-col>
+        <a-col :span="8" style="height: 34%;">
+          <div class="monitor-content-item">
+            <LineChart
+              title="Lnternal Network Bandwidth (bit/s)"
+              layout="line8"
+              :dataSource="data8"
+              @zoom="handelZoom"
+            >
+            </LineChart>
+          </div>
+        </a-col>
+        <a-col :span="8" style="height: 34%;">
+          <div class="monitor-content-item">
+            <LineChart
+              title="ECS Concurrent Connections (Count)"
+              layout="line9"
+              :dataSource="data9"
+              @zoom="handelZoom"
+            >
+            </LineChart>
+          </div>
+        </a-col>
+      </a-row>
+    </div>
+    <a-modal 
+      :title="modalTitle" 
+      :width="1000" 
+      v-model="visible" 
+      @cancel="onCancel"
+    >
+      <div class="modal-content" id="common"></div>
+    </a-modal>
   </div>
 </template>
 
 <script>
+import moment from 'moment';
+import * as echarts from 'echarts'
+import dateFormat from '@/components/jeecg/JEasyCron/format-date'
+import BoxTitle from '../../components/boxTitle.vue';
+import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
+import LineChart from './lineChart.vue';
 export default {
-    
+  components: {
+    BoxTitle,
+    LineChart
+  },
+  data() {
+    return {
+      queryParams: {
+        server: undefined,
+        timer: "1h",
+        startDate: dateFormat(new Date(), 'yyyy-MM-dd'),
+        endDate: dateFormat(new Date(), 'yyyy-MM-dd')
+      },
+      serverOptions: [],
+      timerOptions: [
+        {label: "1Hours",value: "1h"},
+        {label: "2Hours",value: "2h"},
+        {label: "3Hours",value: "3h"},
+      ],
+      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: "Lntranet in Rete",
+          data: [15, 23, 22, 28, 35, 47, 26]
+        },
+        {
+          name: "Lntranet Out Rete",
+          data: [25, 13, 32, 18, 45, 27, 36]
+        }
+      ],
+      data9: [
+        {
+          name: "Lntranet Out Rete",
+          data: [15, 23, 22, 28, 35, 47, 26]
+        }
+      ],
+      visible: false,
+      modalTitle: "",
+      myLine: null
+    }
+  },
+  mounted () {
+    this.$nextTick(() => {
+      setTimeout(() => {
+        // this.drawLine()
+      },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")
+        }
+      })
+    },
+    onServerChange(val) {
+      console.log(val);
+    },
+    onTimeChange(val) {
+      console.log(val);
+    },
+    onRangeDateChange(date, dateString) {
+      this.queryParams.startDate = dateString[0]
+      this.queryParams.endDate = dateString[1]
+    },
+    drawLine(option) {
+      this.myLine = echarts.init(document.getElementById("common"))
+      this.myLine.setOption(option)
+      window.addEventListener("resize", function () {
+        this.myLine.resize();
+      })
+    },
+    handelZoom(str,option) {
+      this.modalTitle = str
+      this.visible = true
+      this.$nextTick(() => {
+        this.drawLine(option)
+      })
+    },
+    onCancel() {
+      this.visible = false
+      this.myLine.clear()
+    }
+  },
 }
 </script>
 
-<style lang="scss" scoped>
-
+<style lang="less" scoped>
+.monitor-search{
+  height: 50px;
+  border-top: 1px solid rgba(13, 235, 201, 0.3);
+  border-bottom: 1px solid rgba(13, 235, 201, 0.3);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 10px;
+  background: rgba(12, 235, 201, 0.05);
+  .ant-row-flex{
+    flex-flow: nowrap;
+  }
+  /deep/ .ant-calendar-range-picker-separator{
+    color: white;
+  }
+  .item-label{
+    display: inline-block;
+    font-size: 16px;
+    font-family: ArialMT;
+    color: #ade6ee;
+    line-height: 32px;
+    height: 32px;
+    margin-right: 10px;
+  }
+  &-btns{
+    &-ant{
+      background: #1397a3;
+      border: none;
+    }
+  }
+}
+.monitor-content{
+  height: calc(100% - 60px);
+  margin-top: 10px;
+  overflow: hidden;
+  &-item{
+    width: 100%;
+    height: 100%;
+    // &-canvas{
+    //   width: 100%;
+    //   height: calc(100% - 40px);
+    // }
+  }
+}
+/deep/.ant-modal-title{
+  letter-spacing: 1px;
+}
+/deep/.ant-modal-footer{
+  display: none;
+}
+.modal-content{
+  width: 100%;
+  height: 600px;
+}
 </style>