服务器监控页面中的tablespace 页面渲染及接口联调

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

@@ -1,6 +1,45 @@
 <template>
-  <div style="height: 100%;">
-    <ConditionBox></ConditionBox>
+  <div style="height: 100%">
+    <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="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"
@@ -11,60 +50,58 @@
         :pagination="false"
         :canSelect="false"
       >
-        <template slot="space" slot-scope="{ text,record}">
-          <!-- <a-progress :percent="text" :strokeWidth="16" /> -->
-          {{ text }}%
+        <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>
-      <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,
-  },{
+import TableList from '../../components/tableList.vue'
+import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
+const columns = [
+  {
     title: 'TABLE NAME',
     align: 'center',
     dataIndex: 'tableName',
-    width: 200,
-  },{
+    width: 300,
+  },
+  {
     title: 'TABLE ROWS',
     align: 'center',
-    dataIndex: 'tableRows',
+    dataIndex: 'numRow',
     width: 200,
-  },{
+  },
+  {
     title: 'TABLE SPACE',
     align: 'center',
-    dataIndex: 'tableSpace',
+    dataIndex: 'used',
     scopedSlots: {
       customRender: 'space',
-    }
-  },{
+    },
+  },
+  {
     title: 'DATA SIZE(MB)',
     align: 'center',
     dataIndex: 'dataSize',
     width: 200,
-  },{
+  },
+  {
     title: 'INDEX SIZE(MB)',
     align: 'center',
     dataIndex: 'indexSize',
@@ -73,79 +110,169 @@ const columns = [{
 ]
 export default {
   components: {
-    ConditionBox,
-    TableList
+    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,
-        },
-      ],
+      dataSource: [],
       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
-      },
-      
+      name: undefined,
+      dbName: undefined,
+      DbOptions: [],
+      dbNameOptions: [],
+      currId: '',
     }
   },
-  methods: {
-    handlePageChange(page, pageSize) {
-      this.ipagination.current = page
-      this.ipagination.pageSize = pageSize
-      this.getDbAlarmHistory(this.paramsArg)
+  watch: {
+    name(newValue, oldValue) {
+      this.currId = newValue
     },
-    handleSizeChange(current, size) {
-      this.ipagination.current = current
-      this.ipagination.pageSize = size
-      this.getDbAlarmHistory(this.paramsArg)
+  },
+  mounted() {
+    this.getDbList()
+    this.getDbNameList()
+  },
+  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.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 = {
+        dbType: 'ORACLE',
+      }
+      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
+    },
+    ondbNameChange(val) {
+      this.loading = true
+      let params = {
+        dbType: 'ORACLE',
+        dataBase: 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{
+.tableSpace-main {
   width: 100%;
   height: calc(100% - 50px);
   overflow: hidden;
   padding-top: 15px;
   position: relative;
 }
-.ant-pagination{
+.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>