alarm 模块db monitor 新增tablespace 页面，table 页面调整

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

@@ -1,10 +1,13 @@
 <template>
-  <div style="height: 100%;">
+  <div style="height: 100%">
-    <a-card :bordered="false" style="height:100%;margin-left: 20px;">
+    <a-card :bordered="false" style="height: 100%; margin-left: 20px">
       <a-tabs default-active-key="monitor" @change="handleTabChange">
         <a-tab-pane key="monitor" tab="MONITOR">
           <Monitor></Monitor>
         </a-tab-pane>
+        <a-tab-pane key="table" tab="TABLE">
+          <Table></Table>
+        </a-tab-pane>
         <a-tab-pane key="tableSpace" tab="TABLESPACE">
           <TableSpace></TableSpace>
         </a-tab-pane>
@@ -14,22 +17,23 @@
 </template>
 
 <script>
-import TableSpace from './tableSpace.vue';
+import Table from './table.vue'
-import Monitor from './monitor.vue';
+import TableSpace from './tableSpace.vue'
+import Monitor from './monitor.vue'
 export default {
   components: {
     Monitor,
+    Table,
     TableSpace,
   },
   methods: {
     handleTabChange(key) {
-      console.log(key);
+      console.log(key)
     },
   },
 }
 </script>
 
 <style lang="less" scoped>
-  @import "~@/assets/less/TabMenu.less";
+@import '~@/assets/less/TabMenu.less';
-
 </style>

src/views/abnormalAlarm/databaseMonitor/instances/table.vue

@@ -0,0 +1,282 @@
+<template>
+  <div style="height: 100%">
+    <div class="monitor-search">
+      <a-row type="flex" :gutter="10">
+        <a-col flex="305px">
+          <span class="item-label">DataSource</span>
+          <a-select
+            style="width: 180px"
+            v-model="name"
+            placeholder="select..."
+            :filter-option="filterOption"
+            show-arrow
+            allowClear
+            :options="DbOptions"
+            @change="onDbChange"
+          >
+            <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
+          </a-select>
+        </a-col>
+        <a-col flex="335px">
+          <span class="item-label">DB Name</span>
+          <a-select
+            style="width: 180px"
+            v-model="dbName"
+            placeholder="select..."
+            show-arrow
+            allowClear
+            :options="dbNameOptions"
+            @change="ondbNameChange"
+          >
+            <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
+          </a-select>
+        </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>
+
+    <div class="tableSpace-main">
+      <TableList
+        size="middle"
+        rowKey="id"
+        :columns="columns"
+        :list="dataSource"
+        :loading="loading"
+        :pagination="false"
+        :canSelect="false"
+        :scroll="{ y: 900 }"
+      >
+        <!-- <template slot="space" slot-scope="{ text }">
+          <div class="space">
+            <div :class="['space-bar', `space-bar-${text > 80 ? 'r' : text > 50 ? 'y' : 'g'}`]">
+              <div
+                :class="['space-bar-progress', `space-bar-progress-${text > 80 ? 'r' : text > 50 ? 'y' : 'g'}`]"
+                :style="{ width: `${2.6 * text}px` }"
+              ></div>
+            </div>
+            <div
+              class="space-text"
+              :style="{ color: text > 80 ? 'red' : text > 50 ? 'yellow' : '', 'margin-left': '30px' }"
+            >
+              {{ text.toFixed(3) }}%
+            </div>
+          </div>
+        </template> -->
+      </TableList>
+    </div>
+  </div>
+</template>
+
+<script>
+import TableList from '../../components/tableList.vue'
+import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
+const columns = [
+  {
+    title: 'TABLE NAME',
+    align: 'center',
+    dataIndex: 'tableName',
+    width: 300,
+  },
+  {
+    title: 'TABLE ROWS',
+    align: 'center',
+    dataIndex: 'numRow',
+    width: 200,
+  },
+  // {
+  //   title: 'TABLE SPACE',
+  //   align: 'center',
+  //   dataIndex: 'used',
+  //   // 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: {
+    TableList,
+  },
+  data() {
+    return {
+      columns,
+      dataSource: [],
+      loading: false,
+      name: undefined,
+      dbName: undefined,
+      DbOptions: [],
+      dbNameOptions: [],
+      currId: '',
+    }
+  },
+  watch: {
+    name(newValue, oldValue) {
+      this.currId = newValue
+    },
+  },
+  mounted() {
+    this.getDbList()
+  },
+  methods: {
+    filterOption(input, option) {
+      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+    },
+    getDbList() {
+      getAction('/sysDatabase/sourceList').then((res) => {
+        if (res.success) {
+          this.name = this.$route.query.id || res.result[0].sourceId
+          this.getDbNameList()
+          this.DbOptions = res.result.map((item) => {
+            return {
+              label: item.sourceName,
+              value: item.sourceId,
+            }
+          })
+        } else {
+          this.$message.warning('This operation fails. Contact your system administrator')
+        }
+      })
+    },
+    getDbNameList() {
+      let params = {
+        sourceId: this.name,
+      }
+      getAction('/sysDatabase/dbNames', params).then((res) => {
+        if (res.success) {
+          console.log(res)
+          this.dbNameOptions = res.result.map((item) => {
+            return {
+              label: item,
+              value: item,
+            }
+          })
+        } else {
+          this.$message.warning('This operation fails. Contact your system administrator')
+        }
+      })
+    },
+    onDbChange(val) {
+      this.name = val
+      this.dbName = undefined
+      this.dataSource = []
+      this.getDbNameList()
+    },
+    ondbNameChange(val) {
+      this.loading = true
+      let params = {
+        sourceId: this.name,
+        dbName: val,
+      }
+      getAction('/sysDatabase/dbInfo', params).then((res) => {
+        this.loading = false
+        if (res.success) {
+          this.dataSource = res.result
+        } else {
+          this.$message.warning('This operation fails. Contact your system administrator')
+        }
+      })
+    },
+  },
+}
+</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%);
+}
+.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;
+    }
+  }
+}
+.space {
+  width: 350px;
+  height: 16px;
+  display: inline-block;
+  position: relative;
+  &-bar {
+    width: 260px;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    &-progress {
+      height: 100%;
+    }
+    &-progress-g {
+      background: url(~@/assets/images/abnormalAlarm/green.png) repeat;
+    }
+    &-progress-y {
+      background: url(~@/assets/images/abnormalAlarm/yellow.png) repeat;
+    }
+    &-progress-r {
+      background: url(~@/assets/images/abnormalAlarm/red.png) repeat;
+    }
+  }
+  &-bar-g {
+    background: url(~@/assets/images/abnormalAlarm/green-bg.png) repeat;
+  }
+  &-bar-y {
+    background: url(~@/assets/images/abnormalAlarm/yellow-bg.png) repeat;
+  }
+  &-bar-r {
+    background: url(~@/assets/images/abnormalAlarm/red-bg.png) repeat;
+  }
+  &-text {
+    position: absolute;
+    right: 0;
+    top: -3px;
+  }
+}
+</style>

src/views/abnormalAlarm/databaseMonitor/instances/tableSpace.vue

@@ -17,20 +17,6 @@
             <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
           </a-select>
         </a-col>
-        <a-col flex="335px">
-          <span class="item-label">DB Name</span>
-          <a-select
-            style="width: 180px"
-            v-model="dbName"
-            placeholder="select..."
-            show-arrow
-            allowClear
-            :options="dbNameOptions"
-            @change="ondbNameChange"
-          >
-            <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
-          </a-select>
-        </a-col>
       </a-row>
       <div class="monitor-search-btns">
         <a-button class="monitor-search-btns-ant">
@@ -63,7 +49,7 @@
               class="space-text"
               :style="{ color: text > 80 ? 'red' : text > 50 ? 'yellow' : '', 'margin-left': '30px' }"
             >
-              {{ text.toFixed(3) }}%
+              {{ text }}%
             </div>
           </div>
         </template>
@@ -74,40 +60,40 @@
 
 <script>
 import TableList from '../../components/tableList.vue'
-import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
+import { getAction } from '@/api/manage'
 const columns = [
   {
-    title: 'TABLE NAME',
+    title: 'SPACE NAME',
     align: 'center',
-    dataIndex: 'tableName',
+    dataIndex: 'spaceName',
     width: 300,
   },
   {
-    title: 'TABLE ROWS',
+    title: 'TOTAL(MB)',
     align: 'center',
-    dataIndex: 'numRow',
+    dataIndex: 'total',
     width: 200,
   },
   {
-    title: 'TABLE SPACE',
+    title: 'FREE(MB)',
+    align: 'center',
+    dataIndex: 'free',
+    width: 200,
+  },
+  {
+    title: 'USAGE(MB)',
+    align: 'center',
+    dataIndex: 'usage',
+    width: 200,
+  },
+  {
+    title: 'USED',
     align: 'center',
     dataIndex: 'used',
     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: {
@@ -119,9 +105,7 @@ export default {
       dataSource: [],
       loading: false,
       name: undefined,
-      dbName: undefined,
       DbOptions: [],
-      dbNameOptions: [],
       currId: '',
     }
   },
@@ -157,15 +141,10 @@ export default {
       let params = {
         sourceId: this.name,
       }
-      getAction('/sysDatabase/dbNames', params).then((res) => {
+      getAction('/sysDatabase/spaceInfo', params).then((res) => {
         if (res.success) {
           console.log(res)
-          this.dbNameOptions = res.result.map((item) => {
+          this.dataSource = res.result
-            return {
-              label: item,
-              value: item,
-            }
-          })
         } else {
           this.$message.warning('This operation fails. Contact your system administrator')
         }
@@ -173,25 +152,8 @@ export default {
     },
     onDbChange(val) {
       this.name = val
-      this.dbName = undefined
-      this.dataSource = []
       this.getDbNameList()
     },
-    ondbNameChange(val) {
-      this.loading = true
-      let params = {
-        sourceId: this.name,
-        dbName: val,
-      }
-      getAction('/sysDatabase/dbInfo', params).then((res) => {
-        this.loading = false
-        if (res.success) {
-          this.dataSource = res.result
-        } else {
-          this.$message.warning('This operation fails. Contact your system administrator')
-        }
-      })
-    },
   },
 }
 </script>