资源限制页面

src/api/resources.js

+import request from '@/utils/request'
+export function getCpu(query) {
+  return request({
+    url: '/resource/cpu',
+    method: 'get',
+    params: query
+  })
+}
+export function getMemory(query) {
+  return request({
+    url: '/resource/memory',
+    method: 'get',
+    params: query
+  })
+}

src/router/index.js

@@ -239,6 +239,30 @@ export const asyncRouterMap = [
       }
     ]
   },
+  {
+    path: '/resources',
+    component: Layout,
+    redirect: 'cpu',
+    name: 'Resources',
+    meta: {
+      title: 'resources',
+      icon: 'pipeline'
+    },
+    children: [
+      {
+        path: 'cpu',
+        component: () => import('@/views/resources/cpuDetails'),
+        name: 'cpu',
+        meta: { title: 'cpu', icon: '' }
+      },
+      {
+        path: 'memory',
+        component: () => import('@/views/resources/memoryDetails'),
+        name: 'memory',
+        meta: { title: 'memory', icon: '' }
+      }
+    ]
+  },
 
   // {
   //   path: '/permission',

src/views/resources/cpuDetails.vue

+<template>
+  <div class="app-container">
+    <div class="filter-container">
+      <el-date-picker
+        v-model="create_time"
+        type="date"
+        placeholder="选择日期"
+        format="yyyy 年 MM 月 dd 日"
+        value-format="yyyy-MM-dd"/>
+      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">{{ $t('table.search') }}</el-button>
+    </div>
+
+    <el-table
+      :data="cpuResources"
+      border
+      fit
+      highlight-current-row
+      style="width: 100%;">
+      <el-table-column :label="$t('table.id')" prop="id" align="center" width="65">
+        <template slot-scope="scope">
+          <span>{{ scope.$index + 1 }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="服务名" prop="Action" align="center">
+        <template slot-scope="scope">
+          <span >{{ scope.row.name }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="Cpu Used Limit" prop="Microservice Name" align="center">
+        <template slot-scope="scope">
+          <span >{{ scope.row.cpuLimit }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="Cpu Used Max" prop="Namespace" align="center">
+        <template slot-scope="scope">
+          <span >{{ scope.row.cpuMaxUsage }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="百分比" prop="Namespace" align="center">
+        <template slot-scope="scope">
+          <span >{{ scope.row.Percentage *100+'%' }}</span>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import { getCpu } from '@/api/resources'
+import waves from '@/directive/waves' // Waves directive
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import JsonEditor from '@/components/JsonEditor'
+import moment from 'moment'
+
+export default {
+  name: 'CpuDetails',
+  components: { Pagination, JsonEditor },
+  directives: { waves },
+  filters: {
+    formatDate(date, pattern = 'YYYY-MM-DD HH:mm:ss') {
+      return moment(date).format(pattern)
+    }
+  },
+  data() {
+    return {
+      create_time: moment().format('YYYY-MM-DD'),
+      cpuResources: null
+    }
+  },
+
+  created() {
+    getCpu({ create_time: this.time }).then((res) => {
+      console.log(res.data.length)
+      if (res.data.length > 0) {
+        this.cpuResources = res.data[0].cpu
+      } else {
+        this.$notify({
+          title: '警告',
+          message: '当前日期暂无数据',
+          type: 'warning'
+        })
+      }
+    })
+  },
+
+  methods: {
+    handleFilter() {
+      this.create_time = this.create_time ? this.create_time : moment().format('YYYY-MM-DD')
+      getCpu({ create_time: this.create_time }).then((res) => {
+        console.log(res.data.length)
+        if (res.data.length > 0) {
+          this.cpuResources = res.data[0].cpu
+        } else {
+          this.cpuResources = null
+          this.$notify({
+            title: '警告',
+            message: '当前日期暂无数据',
+            type: 'warning'
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .el-form-item {
+    width: 600px;
+  }
+</style>

src/views/resources/memoryDetails.vue

+<template>
+  <div class="app-container">
+    <div class="filter-container">
+      <el-date-picker
+        v-model="create_time"
+        type="date"
+        placeholder="选择日期"
+        format="yyyy 年 MM 月 dd 日"
+        value-format="yyyy-MM-dd"/>
+      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">{{ $t('table.search') }}</el-button>
+    </div>
+
+    <el-table
+      :data="memoryResources"
+      border
+      fit
+      highlight-current-row
+      style="width: 100%;">
+      <el-table-column :label="$t('table.id')" prop="id" align="center" width="65">
+        <template slot-scope="scope">
+          <span>{{ scope.$index + 1 }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="服务名" prop="Action" align="center">
+        <template slot-scope="scope">
+          <span >{{ scope.row.name }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="Memory Limit" prop="Microservice Name" align="center">
+        <template slot-scope="scope">
+          <span >{{ scope.row.memoryLimit }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="Memory Used Max" prop="Namespace" align="center">
+        <template slot-scope="scope">
+          <span >{{ scope.row.memoryMaxUsage }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="百分比" prop="Namespace" align="center">
+        <template slot-scope="scope">
+          <span >{{ scope.row.Percentage *100+'%' }}</span>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import { getMemory } from '@/api/resources'
+import waves from '@/directive/waves' // Waves directive
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import JsonEditor from '@/components/JsonEditor'
+import moment from 'moment'
+
+export default {
+  name: 'MemoryDetails',
+  components: { Pagination, JsonEditor },
+  directives: { waves },
+  filters: {
+    formatDate(date, pattern = 'YYYY-MM-DD HH:mm:ss') {
+      return moment(date).format(pattern)
+    }
+  },
+  data() {
+    return {
+      create_time: moment().format('YYYY-MM-DD'),
+      memoryResources: null
+    }
+  },
+
+  created() {
+    getMemory({ create_time: this.create_time }).then((res) => {
+      if (res.data.length > 0) {
+        this.memoryResources = res.data[0].memory
+      } else {
+        this.$notify({
+          title: '警告',
+          message: '当前日期暂无数据',
+          type: 'warning'
+        })
+      }
+    })
+  },
+
+  methods: {
+    handleFilter() {
+      this.create_time = this.create_time ? this.create_time : moment().format('YYYY-MM-DD')
+      getMemory({ create_time: this.create_time }).then((res) => {
+        if (res.data.length > 0) {
+          this.memoryResources = res.data[0].memory
+        } else {
+          this.memoryResources = null
+          this.$notify({
+            title: '警告',
+            message: '当前日期暂无数据',
+            type: 'warning'
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .el-form-item {
+    width: 600px;
+  }
+</style>