From c419bc3031c0ce8a99ceb9fce0c825ebaa91f798 Mon Sep 17 00:00:00 2001
From: renpy <peiyu_ren@163.com>
Date: Thu, 10 Aug 2023 17:32:30 +0800
Subject: [PATCH] =?UTF-8?q?=20instances=20=E6=A8=A1=E5=9D=97=20=E7=9B=91?=
 =?UTF-8?q?=E6=8E=A7=E9=A1=B5=E9=9D=A2=E5=BC=80=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/images/abnormalAlarm/big.png       | Bin 0 -> 1086 bytes
 .../abnormalAlarm/components/boxTitle.vue     |  10 +
 .../serverMonitor/instances/index.vue         |   2 +-
 .../serverMonitor/instances/lineChart.vue     | 123 ++++++
 .../serverMonitor/instances/monitor.vue       | 383 +++++++++++++++++-
 5 files changed, 510 insertions(+), 8 deletions(-)
 create mode 100644 src/assets/images/abnormalAlarm/big.png
 create mode 100644 src/views/abnormalAlarm/serverMonitor/instances/lineChart.vue

diff --git a/src/assets/images/abnormalAlarm/big.png b/src/assets/images/abnormalAlarm/big.png
new file mode 100644
index 0000000000000000000000000000000000000000..8a0e0483c36aba8dce3e6052cdeb58d59e0c8ba0
GIT binary patch
literal 1086
zcmaJ=O-K|`93LwvEg>oeQ{g$16twf@y1IjttvkE5=7_C}Zk?K)d9I_*ym98)t_ne=
zkn}-x>QEk{Lqtf?v4a*731No<DT0pGA(BALitLTL+M#V=-WR{$@Bi_BZ@j(jNO95L
zB8sAlV@KsUnRj{rwoPPwbFYkyR2hyWaR=(g8P$PQNJl9MVy2pgaj5D;12eFZqBd6>
zi6l-ct)hlZM)fdE*0eo3)!3A^Rjm(Vkb-H$lISmwrf6X365Um&aEcv<J;u>t2X+j%
zCA8r_EvVB?hd^UiBmySHD#)7smMdl@dPP?xYwwt)!3qTTN%U$`Nu?cxkpn@1;d~m$
z37|g6@BzO+z#RkvCvYrR$MS-Y4~U#!<m<uON0Vrd-Yv%E=vpkYljt6dZINX&nGBPu
zWss9*`Cu@}asn#|K7#PMLl#!EKFh7nDag>(9K*&2vVf<krqCdkXp-q_38uX+Yq@J}
zA`N4+s?G8Y=arNLD$4(%rn!!GaU5>s`%hsvF=RtF4qY_pXyoF$tG!UR7<QnFk&{5E
zKi9?f9)ywGgKQx1i~#m`8J3PR?tvA8qKGle#j2&jm@Lsmf-wwTYzT2tp}C<U66KnC
zJ|c(wwY8zBKM)T3L!pSw=eRP`22E(;99Q4q2J><~FPJuoEJMdQ4fUvlOt4b3Xynf&
zkXLVwtLM+9J};Lg$*|td{&my2BVr$Kx$axCS$96Ph}|9H>*ax00(lb;Vsa>veVf{I
zVr1+ro_>0`6m*ntXU3<}i@#6SmMB*rYLx}%i<;RRHM2Vxr+&_z@qPNSys*3Q%IHV+
zB2)Dk*-~qZC@&S?{xDN{e<EJ9&%9B!^zB{f(tHXYyYuYz`CFgo?v6iS{57(4A=W$*
z>nvfOmma_H5`pCxNd3OBTk0?FALtE_7F?6I#0w|w>Z>jGSb2dtjpyA?AHCzr*Xx%n
g?)PdHMP*yTG<E5w5>CITmb@1oi?qp;&8N=&0jaTP@c;k-

literal 0
HcmV?d00001

diff --git a/src/views/abnormalAlarm/components/boxTitle.vue b/src/views/abnormalAlarm/components/boxTitle.vue
index 1c42c97..d7a56b8 100644
--- a/src/views/abnormalAlarm/components/boxTitle.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/views/abnormalAlarm/serverMonitor/instances/index.vue b/src/views/abnormalAlarm/serverMonitor/instances/index.vue
index 301dbe7..13667e2 100644
--- a/src/views/abnormalAlarm/serverMonitor/instances/index.vue
+++ b/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>
diff --git a/src/views/abnormalAlarm/serverMonitor/instances/lineChart.vue b/src/views/abnormalAlarm/serverMonitor/instances/lineChart.vue
new file mode 100644
index 0000000..afed8bd
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/views/abnormalAlarm/serverMonitor/instances/monitor.vue b/src/views/abnormalAlarm/serverMonitor/instances/monitor.vue
index 724f747..c6861c7 100644
--- a/src/views/abnormalAlarm/serverMonitor/instances/monitor.vue
+++ b/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>
-  export default {
-    
-  }
+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>
\ No newline at end of file