设备上报数据统计页面处理

gassafety-system/src/main/java/com/zehong/system/domain/DeviceStatistics.java

 package com.zehong.system.domain;
 
+import com.fasterxml.jackson.annotation.JsonFormat;
+
 import java.math.BigDecimal;
 import java.util.Date;
 
@@ -18,11 +20,13 @@ public class DeviceStatistics {
     /**
      * 设备统计开始时间
      */
+    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
     private Date startTime;
 
     /**
      * 设备统计结束时间
      */
+    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
     private Date endTime;
 
     /**

gassafety-web/src/views/dataMonitoring/deviceStatistics/index.vue

 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
+    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="80px">
       <el-form-item label="设备编号" prop="deviceThreshold">
         <el-input
-          v-model="queryParams.deviceThreshold"
-          placeholder="请输入设备阈值"
+          v-model="queryParams.deviceNum"
+          placeholder="请输入设备编号"
           clearable
           size="small"
           @keyup.enter.native="handleQuery"
@@ -13,31 +13,31 @@
       <el-form-item label="设备名称" prop="deviceThreshold">
         <el-input
           v-model="queryParams.deviceThreshold"
-          placeholder="请输入设备阈值"
+          placeholder="请输入设备名称"
           clearable
           size="small"
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="开始时间" prop="startCreateTime">
+      <el-form-item label="开始时间" prop="startTime">
         <el-date-picker
           clearable size="small"
-          v-model="queryParams.startCreateTime"
+          v-model="queryParams.startTime"
           value-format="yyyy-MM-dd HH:mm:ss"
           type="datetime"
-          placeholder="请选择起始时间"
+          placeholder="请选择开始时间"
           align="right"
           style="width: 200px">
         </el-date-picker>
         <font color="#C0C4CC"> 至</font>
       </el-form-item>
-      <el-form-item label="结束时间" prop="startCreateTime">
+      <el-form-item label="结束时间" prop="endTime">
         <el-date-picker
           clearable size="small"
-          v-model="queryParams.startCreateTime"
+          v-model="queryParams.endTime"
           value-format="yyyy-MM-dd HH:mm:ss"
           type="datetime"
-          placeholder="请选择起始时间"
+          placeholder="请选择结束时间"
           align="right"
           style="width: 200px">
         </el-date-picker>
@@ -64,11 +64,11 @@
     </el-row>
 
     <el-table v-loading="loading" :data="deviceList">
-      <el-table-column label="设备名称" align="center" prop="monitorId" />
+      <el-table-column label="设备名称" align="center" prop="deviceNum" />
       <el-table-column label="设备编号" align="center" prop="deviceName" />
-      <el-table-column label="开始时间" align="center" prop="deviceThreshold" />
-      <el-table-column label="结束时间" align="center" prop="relationPipeName" />
-      <el-table-column label="标况累计流量（m³）" align="center" prop="relationPipeThreshold" />
+      <el-table-column label="设备上报开始时间" align="center" prop="startTime" />
+      <el-table-column label="设备上报结束时间" align="center" prop="endTime" />
+      <el-table-column label="标况累计流量（m³）" align="center" prop="standardConditionAccumulation" />
     </el-table>
 
     <pagination
@@ -113,19 +113,20 @@ export default {
       queryParams: {
         pageNum: 1,
         pageSize: 10,
-        deviceId: null,
-        deviceThreshold: null,
-        relationPipeId: null,
-        relationPipeThreshold: null,
-        relationDeviceId: null,
-        relationDeviceThreshold: null,
+        deviceNum: null,
+        deviceName: null,
+        startTime: null,
+        endTime: null,
       },
       // 表单参数
       form: {}
     };
   },
   created() {
-    this.getList();
+    // this.getList();
+    this.loading = false;
+    this.getCurrentMonthFirst();
+    this.getCurrentMonthLast();
   },
   methods: {
     /** 查询设备监控列表 */
@@ -133,8 +134,8 @@ export default {
       this.loading = true;
       getDeviceStatisticsInfo(this.queryParams).then(response => {
         console.log(response)
-        /*this.deviceList = response.rows;
-        this.total = response.total;*/
+        this.deviceList = response.rows;
+        this.total = response.total;
         this.loading = false;
       });
     },
@@ -147,7 +148,7 @@ export default {
     resetQuery() {
       this.resetForm("queryForm");
       this.handleQuery();
-    },/** 导出按钮操作 */
+    }, /** 导出按钮操作 */
     handleExport() {
       const queryParams = this.queryParams;
       this.$confirm('是否确认导出所有设备监控数据项?', "警告", {
@@ -156,12 +157,30 @@ export default {
         type: "warning"
       }).then(() => {
         this.exportLoading = true;
-      return exportDevice(queryParams);
-    }).then(response => {
+        return exportDevice(queryParams);
+      }).then(response => {
         this.download(response.msg);
-      this.exportLoading = false;
-    }).catch(() => {});
-    }
+        this.exportLoading = false;
+      }).catch(() => {
+      });
+    },
+    getCurrentMonthFirst() {
+      var date = new Date()
+      date.setDate(1)
+      var month = parseInt(date.getMonth() + 1)
+      var day = date.getDate()
+      if (month < 10) month = '0' + month
+      if (day < 10) day = '0' + day
+      this.queryParams.startTime =  date.getFullYear() + '-' + month + '-' + day + ' 00:00:00'
+    },
+    getCurrentMonthLast() {
+      var date = new Date()
+      var month = parseInt(date.getMonth() + 1)
+      var day = date.getDate()
+      if (month < 10) month = '0' + month
+      if (day < 10) day = '0' + day
+      this.queryParams.endTime =  date.getFullYear() + '-' + month + '-' + day + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds()
+    },
   }
 };
 </script>