添加日期范围搜索

src/views/resources/cpuDetails.vue

@@ -2,11 +2,16 @@
   <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"/>
+        v-model="startTime"
+        type="datetime"
+        dataformatas=""
+        placeholder="选择日期时间"
+        default-time="00:00:00"/>
+      <el-date-picker
+        v-model="endTime"
+        type="datetime"
+        placeholder="选择日期时间"
+        default-time="23:59:59"/>
       <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">{{ $t('table.search') }}</el-button>
     </div>
 
@@ -38,7 +43,7 @@
       </el-table-column>
       <el-table-column label="百分比" prop="Namespace" align="center">
         <template slot-scope="scope">
-          <span >{{ scope.row.Percentage *100+'%' }}</span>
+          <span >{{ (scope.row.Percentage*100).toFixed(2)+'%' }}</span>
         </template>
       </el-table-column>
     </el-table>
@@ -63,35 +68,33 @@ export default {
   },
   data() {
     return {
-      create_time: moment().format('YYYY-MM-DD'),
+      startTime: moment().startOf('d').format(),
+      endTime: moment().endOf('d').format(),
       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'
-        })
-      }
-    })
+    this.fetchDate()
   },
 
   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)
+      this.fetchDate()
+    },
+    fetchDate() {
+      if (this.startTime === null || this.endTime === null) {
+        this.$notify({
+          title: '错误',
+          message: '请选择开始日期和结束日期',
+          type: 'error'
+        })
+        return false
+      }
+      getCpu({ startTime: this.startTime, endTime: this.endTime }).then((res) => {
         if (res.data.length > 0) {
-          this.cpuResources = res.data[0].cpu
+          this.memoryResources = res.data
         } else {
-          this.cpuResources = null
           this.$notify({
             title: '警告',
             message: '当前日期暂无数据',

src/views/resources/memoryDetails.vue

@@ -2,11 +2,16 @@
   <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"/>
+        v-model="startTime"
+        type="datetime"
+        dataformatas=""
+        placeholder="选择日期时间"
+        default-time="00:00:00"/>
+      <el-date-picker
+        v-model="endTime"
+        type="datetime"
+        placeholder="选择日期时间"
+        default-time="23:59:59"/>
       <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">{{ $t('table.search') }}</el-button>
     </div>
 
@@ -23,22 +28,22 @@
       </el-table-column>
       <el-table-column label="服务名" prop="Action" align="center">
         <template slot-scope="scope">
-          <span >{{ scope.row.name }}</span>
+          <span >{{ scope.row._id }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="Memory Limit" prop="Microservice Name" align="center">
+      <el-table-column label="Memory Limit(Mib)" 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">
+      <el-table-column label="Memory Used Max(Mib)" 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>
+          <span >{{ (scope.row.Percentage*100).toFixed(2)+'%' }}</span>
         </template>
       </el-table-column>
     </el-table>
@@ -63,33 +68,33 @@ export default {
   },
   data() {
     return {
-      create_time: moment().format('YYYY-MM-DD'),
+      startTime: moment().startOf('d').format(),
+      endTime: moment().endOf('d').format(),
       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'
-        })
-      }
-    })
+    this.fetchDate()
   },
 
   methods: {
     handleFilter() {
-      this.create_time = this.create_time ? this.create_time : moment().format('YYYY-MM-DD')
-      getMemory({ create_time: this.create_time }).then((res) => {
+      console.log(this.startTime)
+      this.fetchDate()
+    },
+    fetchDate() {
+      if (this.startTime === null || this.endTime === null) {
+        this.$notify({
+          title: '错误',
+          message: '请选择开始日期和结束日期',
+          type: 'error'
+        })
+        return false
+      }
+      getMemory({ startTime: this.startTime, endTime: this.endTime }).then((res) => {
         if (res.data.length > 0) {
-          this.memoryResources = res.data[0].memory
+          this.memoryResources = res.data
         } else {
-          this.memoryResources = null
           this.$notify({
             title: '警告',
             message: '当前日期暂无数据',