From bd886ba220a4f428852e3154632b7ca6478ad6c2 Mon Sep 17 00:00:00 2001
From: renpy <peiyu_ren@163.com>
Date: Mon, 14 Aug 2023 18:40:19 +0800
Subject: [PATCH] =?UTF-8?q?=E6=95=B0=E6=8D=AE=E5=BA=93=20instances=20?=
 =?UTF-8?q?=E6=A8=A1=E5=9D=97=E5=88=9B=E5=BB=BA=EF=BC=8C=E5=8F=8Amonitor?=
 =?UTF-8?q?=E5=92=8Ctablespase=E4=B9=9F=E9=9D=A2=E5=BC=80=E5=8F=91=20serve?=
 =?UTF-8?q?r=20instances=20-=20cpu=E9=A1=B5=E9=9D=A2=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../databaseMonitor/instances/areaChart.vue   | 113 +++++++
 .../instances/conditionBox.vue                | 139 ++++++++
 .../databaseMonitor/instances/index.vue       |  32 +-
 .../databaseMonitor/instances/monitor.vue     | 299 ++++++++++++++++++
 .../instances/stackedAreaChart.vue            | 166 ++++++++++
 .../databaseMonitor/instances/tableSpace.vue  | 151 +++++++++
 .../serverMonitor/instances/cpu.vue           |  44 ++-
 7 files changed, 914 insertions(+), 30 deletions(-)
 create mode 100644 src/views/abnormalAlarm/databaseMonitor/instances/areaChart.vue
 create mode 100644 src/views/abnormalAlarm/databaseMonitor/instances/conditionBox.vue
 create mode 100644 src/views/abnormalAlarm/databaseMonitor/instances/monitor.vue
 create mode 100644 src/views/abnormalAlarm/databaseMonitor/instances/stackedAreaChart.vue
 create mode 100644 src/views/abnormalAlarm/databaseMonitor/instances/tableSpace.vue

diff --git a/src/views/abnormalAlarm/databaseMonitor/instances/areaChart.vue b/src/views/abnormalAlarm/databaseMonitor/instances/areaChart.vue
new file mode 100644
index 0000000..71e2261
--- /dev/null
+++ b/src/views/abnormalAlarm/databaseMonitor/instances/areaChart.vue
@@ -0,0 +1,113 @@
+<template>
+  <div style="width: 100%; height: 100%;">
+    <BoxTitle :title="title"></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", "color", "dataSource"],
+  components: {
+    BoxTitle,
+  },
+  data() {
+    return {
+      option: {},
+      xData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+    }
+  },
+  mounted () {
+    this.$nextTick(() => {
+      setTimeout(() => {
+        this.drawChart()
+      },0)
+    })
+  },
+  methods: {
+    drawChart() {
+      let myLine = echarts.init(document.getElementById(`${this.layout}`))
+      this.option = {
+        color:this.color,
+        grid: {
+          left: 0,
+          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',
+          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: 0.8
+            },
+            areaStyle: {
+              opacity: 1,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: this.color[0] },
+                { offset: 1, color:  this.color[1] },
+              ])
+            },
+            data: this.dataSource
+          }
+        ]
+      };
+      myLine.setOption(this.option)
+      window.addEventListener("resize", function () {
+        myLine.resize();
+      })
+    }
+  },
+}
+</script>
+
+<style lang="less" scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/abnormalAlarm/databaseMonitor/instances/conditionBox.vue b/src/views/abnormalAlarm/databaseMonitor/instances/conditionBox.vue
new file mode 100644
index 0000000..835d5db
--- /dev/null
+++ b/src/views/abnormalAlarm/databaseMonitor/instances/conditionBox.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="monitor-search">
+      <a-row type="flex" :gutter="10">
+        <a-col flex="335px">
+          <span class="item-label">Database name</span>
+          <a-select style="width:180px"
+            v-model="queryParams.name" 
+            placeholder="select..."
+            :filter-option="filterOption"
+            show-arrow 
+            :options="DbOptions" 
+            @change="onDbChange"
+          >
+            <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
+            :show-time="true"
+            :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">
+          <img class="icon-add" src="@/assets/images/global/reset-pwd.png" alt="" />
+          <span style="margin-left: 10px;">
+            Refresh
+          </span>
+        </a-button>
+      </div>
+    </div>
+</template>
+
+<script>
+import moment from 'moment';
+import dateFormat from '@/components/jeecg/JEasyCron/format-date'
+import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
+export default {
+  data() {
+    return {
+      queryParams: {
+        name: undefined,
+        timer: "1h",
+        startDate: dateFormat(new Date(), 'yyyy-MM-dd'),
+        endDate: dateFormat(new Date(), 'yyyy-MM-dd')
+      },
+      DbOptions: [],
+      timerOptions: [
+        {label: "1Hours",value: "1h"},
+        {label: "2Hours",value: "2h"},
+        {label: "3Hours",value: "3h"},
+      ],
+    }
+  },
+  mounted () {
+    this.getDbList();
+  },
+  methods: {
+    moment,
+    filterOption(input, option) {
+      return (
+        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+      );
+    },
+    getDbList() {
+      getAction("/sysDatabase/sourceList").then(res => {
+        if (res.success) {
+          this.DbOptions = res.result.map(item => {
+            return {
+              label: item.sourceName,
+              value: item.sourceId
+            }
+          })
+        } else {
+          this.$message.warning("This operation fails. Contact your system administrator")
+        }
+      })
+    },
+    onDbChange(val) {
+      console.log(val);
+    },
+    onTimeChange(val) {
+      console.log(val);
+    },
+    onRangeDateChange(date, dateString) {
+      this.queryParams.startDate = dateString[0]
+      this.queryParams.endDate = dateString[1]
+    },
+  },
+}
+</script>
+
+<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;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/abnormalAlarm/databaseMonitor/instances/index.vue b/src/views/abnormalAlarm/databaseMonitor/instances/index.vue
index c628d7c..9eb7174 100644
--- a/src/views/abnormalAlarm/databaseMonitor/instances/index.vue
+++ b/src/views/abnormalAlarm/databaseMonitor/instances/index.vue
@@ -1,15 +1,35 @@
 <template>
-  <div>
-    instances
+  <div style="height: 100%;">
+    <a-card :bordered="false" style="height:100%;margin-left: 20px;">
+      <a-tabs default-active-key="tableSpace" @change="handleTabChange">
+        <a-tab-pane key="monitor" tab="MONITOR">
+          <Monitor></Monitor>
+        </a-tab-pane>
+        <a-tab-pane key="tableSpace" tab="TABLESPACE">
+          <TableSpace></TableSpace>
+        </a-tab-pane>
+      </a-tabs>
+    </a-card>
   </div>
 </template>
 
 <script>
-  export default {
-    
-  }
+import TableSpace from './tableSpace.vue';
+import Monitor from './monitor.vue';
+export default {
+  components: {
+    Monitor,
+    TableSpace,
+  },
+  methods: {
+    handleTabChange(key) {
+      console.log(key);
+    },
+  },
+}
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
+  @import "~@/assets/less/TabMenu.less";
 
 </style>
\ No newline at end of file
diff --git a/src/views/abnormalAlarm/databaseMonitor/instances/monitor.vue b/src/views/abnormalAlarm/databaseMonitor/instances/monitor.vue
new file mode 100644
index 0000000..97bed6c
--- /dev/null
+++ b/src/views/abnormalAlarm/databaseMonitor/instances/monitor.vue
@@ -0,0 +1,299 @@
+<template>
+  <div style="height: 100%;">
+    <ConditionBox></ConditionBox>
+    <div class="monitor-content">
+      <a-row :gutter="10" style="height: auto">
+        <a-col :span="12" style="height: 240px" v-for="(el,i) in chartData" :key="i">
+          <div class="monitor-content-item">
+            <AreaChart
+              :title="el.title"
+              :layout="`area${i}`"
+              :color="el.color"
+              :dataSource="el.data"
+            > 
+            </AreaChart>
+          </div>
+        </a-col>
+      </a-row>
+      <div style="height: auto;margin-top: 15px;padding-right: 10px;">
+        <BoxTitle title="Connect List"></BoxTitle>
+        <a-row :gutter="20" style="height: auto;margin-top: 15px;">
+          <a-col :span="8" v-for="(el,i) in mailData" :key="i">
+            <div class="monitor-content-item-child">
+              <StackedAreaChart
+                :layout="`stackedArea${i}`"
+                :dataSource="el.data"
+                :legendData="el.legends"
+              >
+              </StackedAreaChart>
+            </div>
+          </a-col>
+        </a-row>
+      </div>
+      <div style="height: auto;margin-top: 15px;padding-right: 10px;">
+        <BoxTitle title="Process List"></BoxTitle>
+        <a-row :gutter="20" style="height: auto;margin-top: 15px;">
+          <a-col :span="8" v-for="(el,i) in mailData" :key="i">
+            <div class="monitor-content-item-child">
+              <StackedAreaChart
+                :layout="`stackedArea${i+3}`"
+                :dataSource="el.data"
+                :legendData="el.legends"
+              >
+              </StackedAreaChart>
+            </div>
+          </a-col>
+        </a-row>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import BoxTitle from '../../components/boxTitle.vue';
+import ConditionBox from './conditionBox.vue';
+import AreaChart from './areaChart.vue';
+import StackedAreaChart from './stackedAreaChart.vue';
+import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
+export default {
+  components: {
+    BoxTitle,
+    ConditionBox,
+    AreaChart,
+    StackedAreaChart
+  },
+  data() {
+    return {
+      data:[5, 23, 12, 48, 15, 27, 56],
+      chartData: [
+        {
+          title: "Database memory state(Total memory)",
+          color:["rgba(38, 180, 246,1)","rgba(38, 180, 246,0.2)"],
+          data:[5, 23, 12, 48, 15, 27, 56]
+        },{
+          title: "Database user status(Logins per second)",
+          color:["rgba(214, 238, 80,1)","rgba(214, 238, 80,0.2)"],
+          data:[5, 23, 12, 48, 15, 27, 56]
+        },{
+          title: "Database connection number",
+          color:["#ec8929"],
+          color:["rgba(236, 137, 41,1)","rgba(236, 137, 41,0.2)"],
+          data:[5, 23, 12, 48, 15, 27, 56]
+        },{
+          title: "Database connection response time",
+          color:["rgba(84, 95, 213,1)","rgba(84, 95, 213,0.2)"],
+          data:[5, 23, 12, 48, 15, 27, 56]
+        },{
+          title: "Remaining space of the databasce log file",
+          color:["rgba(1, 238, 206,1)","rgba(1, 238, 206,0.2)"],
+          data:[5, 23, 12, 48, 15, 27, 56]
+        },{
+          title: "Database file size",
+          color:["rgba(237, 190, 61,1)","rgba(237, 190, 61,0.2)"],
+          data:[5, 23, 12, 48, 15, 27, 56]
+        }
+      ],
+      mailData: [
+        {
+          legends: [
+            {
+              connections: "Max Connections",
+              now: "151.0",
+              min: "151.0",
+              max: "151.0",
+              avg: "151.0"
+            },{
+              connections: "Max Used Connections",
+              now: "151.0",
+              min: "151.0",
+              max: "151.0",
+              avg: "151.0"
+            },{
+              connections: "Aborted Clients",
+              now: "151.0",
+              min: "151.0",
+              max: "151.0",
+              avg: "151.0"
+            },{
+              connections: "Aborted Connects",
+              now: "151.0",
+              min: "151.0",
+              max: "151.0",
+              avg: "151.0"
+            },{
+              connections: "Threads Connected",
+              now: "151.0",
+              min: "151.0",
+              max: "151.0",
+              avg: "151.0"
+            },{
+              connections: "New Connections",
+              now: "151.0",
+              min: "151.0",
+              max: "151.0",
+              avg: "151.0"
+            },
+          ],
+          data: [
+            {
+              name: 'Email1',
+              data: [120, 132, 101, 134, 90, 230, 210]
+            },{
+              name: 'Email2',
+              data: [220, 182, 191, 234, 290, 330, 310]
+            },{
+              name: 'Email3',
+              data: [150, 232, 201, 154, 190, 330, 410]
+            },{
+              name: 'Email4',
+              data: [320, 332, 301, 334, 390, 330, 320]
+            },{
+              name: 'Email5',
+              data: [820, 932, 901, 934, 1290, 1330, 1320]
+            },
+          ]
+        },{
+          legends: [
+            {
+              connections: "Max Connections",
+              now: "151.0",
+              min: "151.0",
+              max: "151.0",
+              avg: "151.0"
+            },{
+              connections: "Max Used Connections",
+              now: "151.0",
+              min: "151.0",
+              max: "151.0",
+              avg: "151.0"
+            },{
+              connections: "Aborted Clients",
+              now: "151.0",
+              min: "151.0",
+              max: "151.0",
+              avg: "151.0"
+            },{
+              connections: "Aborted Connects",
+              now: "151.0",
+              min: "151.0",
+              max: "151.0",
+              avg: "151.0"
+            },{
+              connections: "Threads Connected",
+              now: "151.0",
+              min: "151.0",
+              max: "151.0",
+              avg: "151.0"
+            },{
+              connections: "New Connections",
+              now: "151.0",
+              min: "151.0",
+              max: "151.0",
+              avg: "151.0"
+            },
+          ],
+          data:[
+            {
+              name: 'Email1',
+              data: [120, 132, 101, 134, 90, 230, 210]
+            },{
+              name: 'Email2',
+              data: [220, 182, 191, 234, 290, 330, 310]
+            },{
+              name: 'Email3',
+              data: [150, 232, 201, 154, 190, 330, 410]
+            },{
+              name: 'Email4',
+              data: [320, 332, 301, 334, 390, 330, 320]
+            },{
+              name: 'Email5',
+              data: [820, 932, 901, 934, 1290, 1330, 1320]
+            },
+          ]
+        },{
+          legends: [
+            {
+              connections: "Max Connections",
+              now: "151.0",
+              min: "151.0",
+              max: "151.0",
+              avg: "151.0"
+            },{
+              connections: "Max Used Connections",
+              now: "151.0",
+              min: "151.0",
+              max: "151.0",
+              avg: "151.0"
+            },{
+              connections: "Aborted Clients",
+              now: "151.0",
+              min: "151.0",
+              max: "151.0",
+              avg: "151.0"
+            },{
+              connections: "Aborted Connects",
+              now: "151.0",
+              min: "151.0",
+              max: "151.0",
+              avg: "151.0"
+            },{
+              connections: "Threads Connected",
+              now: "151.0",
+              min: "151.0",
+              max: "151.0",
+              avg: "151.0"
+            },{
+              connections: "New Connections",
+              now: "151.0",
+              min: "151.0",
+              max: "151.0",
+              avg: "151.0"
+            },
+          ],
+          data:[
+            {
+              name: 'Email1',
+              data: [120, 132, 101, 134, 90, 230, 210]
+            },{
+              name: 'Email2',
+              data: [220, 182, 191, 234, 290, 330, 310]
+            },{
+              name: 'Email3',
+              data: [150, 232, 201, 154, 190, 330, 410]
+            },{
+              name: 'Email4',
+              data: [320, 332, 301, 334, 390, 330, 320]
+            },{
+              name: 'Email5',
+              data: [820, 932, 901, 934, 1290, 1330, 1320]
+            },
+          ]
+        },
+      ]
+    }
+  },
+  mounted () {
+  },
+  methods: {
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.monitor-content{
+  height: calc(100% - 60px);
+  margin-top: 10px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  &-item{
+    width: 100%;
+    height: 100%;
+    padding: 5px 10px 5px 0;
+  }
+  &-item-child{
+    width: 100%;
+    height: auto;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/abnormalAlarm/databaseMonitor/instances/stackedAreaChart.vue b/src/views/abnormalAlarm/databaseMonitor/instances/stackedAreaChart.vue
new file mode 100644
index 0000000..8c85bd3
--- /dev/null
+++ b/src/views/abnormalAlarm/databaseMonitor/instances/stackedAreaChart.vue
@@ -0,0 +1,166 @@
+<template>
+  <div  style="width: 100%; height: auto">
+    <div class="legend">
+      <div class="legend-header">
+        <a-row type="flex">
+          <a-col flex="180px">Connections</a-col>
+          <a-col flex="70px">Now</a-col>
+          <a-col flex="70px">Min</a-col>
+          <a-col flex="70px">Max</a-col>
+          <a-col flex="70px">Avg</a-col>
+        </a-row>
+      </div>
+      <div class="legend-list">
+        <a-row type="flex" style="height: 20px;padding: 0 10px;" v-for="(item,i) in legendData" :key="i">
+          <a-col flex="180px" class="legend-list-auto"><span class="legend-list-auto-icon" :style="`background:${color[i]}`"></span>{{ item.connections }}</a-col>
+          <a-col flex="70px">{{ item.now }}</a-col>
+          <a-col flex="70px">{{ item.min }}</a-col>
+          <a-col flex="70px">{{ item.max }}</a-col>
+          <a-col flex="70px">{{ item.avg }}</a-col>
+        </a-row>
+      </div>
+    </div>
+    <div style="width: 100%; height: 190px" :id="layout"></div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+export default {
+  props: ["layout", "dataSource", "legendData"],
+  data() {
+    return {
+      option: {},
+      xData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+      color:["#a94a3e","#ebbe5e","#269510","#26b4b9","#4e6abf","#893fa3"],
+    }
+  },
+  mounted () {
+    this.$nextTick(() => {
+      setTimeout(() => {
+        this.drawChart()
+      },0)
+    })
+  },
+  methods: {
+    drawChart() {
+      let myLine = echarts.init(document.getElementById(`${this.layout}`))
+      let series = this.dataSource.map(item => {
+        return {
+          type: 'line',
+          name: item.name, 
+          stack: 'Total',
+          areaStyle: {
+            opacity: 1
+          },
+          symbol: 'none',
+          data: item.data
+        }
+      })
+      this.option = {
+        color:this.color,
+        grid: {
+          left: 0,
+          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',
+            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,
+      };
+      myLine.setOption(this.option)
+      window.addEventListener("resize", function () {
+        myLine.resize();
+      })
+    }
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.legend{
+  width: 100%;
+  &-header{
+    width: 100%;
+    height: 20px;
+    font-family: ArialMT;
+    font-size: 14px;
+    font-weight: normal;
+    line-height: 20px;
+    color: #ffffff;
+    background: #126b82;
+    padding: 0 10px;
+  }
+  &-list{
+    width: 100%;
+    font-family: ArialMT;
+    font-size: 14px;
+    font-weight: normal;
+    line-height: 20px;
+    color: #ade6ee;
+    &-auto{
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      &-icon{
+        display: inline-block;
+        width: 12px;
+        height: 12px;
+        border-radius: 4px;
+        vertical-align: middle;
+        margin-right: 5px;
+      }
+    }
+    .ant-row-flex:nth-child(even){
+      background: #073337;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/abnormalAlarm/databaseMonitor/instances/tableSpace.vue b/src/views/abnormalAlarm/databaseMonitor/instances/tableSpace.vue
new file mode 100644
index 0000000..d8b3ed9
--- /dev/null
+++ b/src/views/abnormalAlarm/databaseMonitor/instances/tableSpace.vue
@@ -0,0 +1,151 @@
+<template>
+  <div style="height: 100%;">
+    <ConditionBox></ConditionBox>
+    <div class="tableSpace-main">
+      <TableList
+        size="middle"
+        rowKey="id"
+        :columns="columns"
+        :list="dataSource"
+        :loading="loading"
+        :pagination="false"
+        :canSelect="false"
+      >
+        <template slot="space" slot-scope="{ text,record}">
+          <!-- <a-progress :percent="text" :strokeWidth="16" /> -->
+          {{ text }}%
+        </template>
+      </TableList>
+      <a-pagination 
+        size="small"
+        v-model="ipagination.current" 
+        :pageSize="ipagination.pageSize"
+        :page-size-options="ipagination.pageSizeOptions"
+        show-size-changer
+        show-quick-jumper
+        :total="ipagination.total"
+        :show-total="(total, range) => `Total ${total} items　Page ${ipagination.current} / ${Math.ceil(total / ipagination.pageSize)}`"
+        show-less-items 
+        @change="handlePageChange"
+        @showSizeChange="handleSizeChange"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import ConditionBox from './conditionBox.vue';
+import TableList from '../../components/tableList.vue';
+import { getAction,postAction,httpAction,deleteAction } from '@/api/manage'
+const columns = [{
+    title: 'DATABASE',
+    align: 'center',
+    dataIndex: 'dataBase',
+    width: 200,
+  },{
+    title: 'TABLE NAME',
+    align: 'center',
+    dataIndex: 'tableName',
+    width: 200,
+  },{
+    title: 'TABLE ROWS',
+    align: 'center',
+    dataIndex: 'tableRows',
+    width: 200,
+  },{
+    title: 'TABLE SPACE',
+    align: 'center',
+    dataIndex: 'tableSpace',
+    scopedSlots: {
+      customRender: 'space',
+    }
+  },{
+    title: 'DATA SIZE(MB)',
+    align: 'center',
+    dataIndex: 'dataSize',
+    width: 200,
+  },{
+    title: 'INDEX SIZE(MB)',
+    align: 'center',
+    dataIndex: 'indexSize',
+    width: 200,
+  },
+]
+export default {
+  components: {
+    ConditionBox,
+    TableList
+  },
+  data() {
+    return {
+      columns,
+      dataSource: [
+        {
+          dataBase: "Energy spectrum",
+          tableName: "table",
+          tableRows: 8368,
+          tableSpace: 68,
+          dataSize: 321,
+          indexSize: 0.0,
+        },{
+          dataBase: "Energy spectrum",
+          tableName: "table",
+          tableRows: 8368,
+          tableSpace: 68,
+          dataSize: 321,
+          indexSize: 0.0,
+        },{
+          dataBase: "Energy spectrum",
+          tableName: "table",
+          tableRows: 8368,
+          tableSpace: 68,
+          dataSize: 321,
+          indexSize: 0.0,
+        },
+      ],
+      loading: false,
+      ipagination:{
+        current: 1,
+        pageSize: 10,
+        pageSizeOptions: ['10', '20', '30'],
+        showTotal: (total, range) => {
+          const { current, pageSize } = this.ipagination
+          return `Total ${total} items　Page ${current} / ${Math.ceil(total / pageSize)}`
+        },
+        showQuickJumper: true,
+        showSizeChanger: true,
+        total: 0
+      },
+      
+    }
+  },
+  methods: {
+    handlePageChange(page, pageSize) {
+      this.ipagination.current = page
+      this.ipagination.pageSize = pageSize
+      this.getDbAlarmHistory(this.paramsArg)
+    },
+    handleSizeChange(current, size) {
+      this.ipagination.current = current
+      this.ipagination.pageSize = size
+      this.getDbAlarmHistory(this.paramsArg)
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.tableSpace-main{
+  width: 100%;
+  height: calc(100% - 50px);
+  overflow: hidden;
+  padding-top: 15px;
+  position: relative;
+}
+.ant-pagination{
+  position: absolute;
+  left: 50%;
+  bottom: 0;
+  transform: translateX(-50%);
+}
+</style>
\ No newline at end of file
diff --git a/src/views/abnormalAlarm/serverMonitor/instances/cpu.vue b/src/views/abnormalAlarm/serverMonitor/instances/cpu.vue
index 53ccd7c..06358b0 100644
--- a/src/views/abnormalAlarm/serverMonitor/instances/cpu.vue
+++ b/src/views/abnormalAlarm/serverMonitor/instances/cpu.vue
@@ -291,12 +291,11 @@ export default {
             type: 'line',
             symbol: 'none',
             areaStyle: {
-              normal: {
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                  { offset: 0, color: "#0096ff" },
-                  { offset: 1, color: "rgba(0, 150, 255,0.2)" },
-                ]),
-              },
+              opacity: 1,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: "#0096ff" },
+                { offset: 1, color: "rgba(0, 150, 255,0.2)" },
+              ])
             },
             data: [5, 23, 12, 48, 15, 27, 56]
           }
@@ -392,12 +391,11 @@ export default {
             type: 'line',
             symbol: 'none',
             areaStyle: {
-              normal: {
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                  { offset: 0, color: "#f1e852" },
-                  { offset: 1, color: "rgba(241, 232, 82,0.2)" },
-                ]),
-              },
+              opacity: 1,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: "#f1e852" },
+                { offset: 1, color: "rgba(241, 232, 82,0.2)" },
+              ])
             },
             data: [5, 23, 12, 48, 15, 27, 56]
           }
@@ -476,12 +474,11 @@ export default {
             symbol: 'none',
             itemStyle:{ normal:{color:"#00a8ff"}},
             areaStyle: {
-              normal: {
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                  { offset: 0, color: "#00a8ff" },
-                  { offset: 1, color: "rgba(255,255,255,0)" },
-                ]),
-              },
+              opacity: 1,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: "#00a8ff" },
+                { offset: 1, color: "rgba(255,255,255,0)" },
+              ])
             },
             data: [150, 230, 224, 218, 135, 147, 260],
           },
@@ -491,12 +488,11 @@ export default {
             symbol: 'none',
             itemStyle:{ normal:{color:"#73b54b"}},
             areaStyle: {
-              normal: {
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                  { offset: 0, color: "#73b54b" },
-                  { offset: 1, color: "rgba(255,255,255,0)" },
-                ]),
-              },
+              opacity: 1,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: "#73b54b" },
+                { offset: 1, color: "rgba(255,255,255,0)" },
+              ]),
             },
             data: [820, 932, 901, 934, 1290, 1330, 1320],
           }