电表报表

src/api/ems/dzjk.js

@@ -191,9 +191,9 @@ export function getLoadNameList(siteId) {
   })
 }
 // 电表报表
-export function getAmmeterData({siteId,deviceId,dateTime}) {
+export function getAmmeterData({siteId,startTime,endTime, pageSize, pageNum}) {
   return request({
-    url: `/ems/statsReport/getAmmeterData?siteId=${siteId}&deviceId=${deviceId}&dateTime=${dateTime}`,
+    url: `/ems/statsReport/getAmmeterData?siteId=${siteId}&startTime=${startTime}&endTime=${endTime}&pageSize=${pageSize}&pageNum=${pageNum}`,
     method: 'get'
   })
 }

src/views/ems/dzjk/home/index.vue

@@ -119,12 +119,12 @@ export default {
           attr: "totalDischargedCap",
         },
         {
-          title: "总收入",
+          title: "总收入（元）",
-          attr: "todo",
+          attr: "totalRevenue",
         },
         {
-          title: "当日实时收入",
+          title: "当日实时收入（元）",
-          attr: "todo",
+          attr: "dayRevenue",
         },
       ],
       info: {}, //基本信息

src/views/ems/dzjk/tjbb/dbbb/index.vue

@@ -3,23 +3,18 @@
   <div style="width:100%" v-loading="loading">
     <!--    搜索栏-->
     <el-form :inline="true" class="select-container">
-      <el-form-item label="电表">
-        <el-select v-model="search.deviceId" placeholder="请选择"  loading-text="正在加载数据">
-          <el-option :label="item.deviceName" :value="item.id" v-for="(item,index) in deviceOptions" :key="index+'dbOptions'"></el-option>
-        </el-select>
-      </el-form-item>
-<!--      <el-form-item label="日报">-->
-<!--        <el-select v-model="search.rb" placeholder="请选择" :loading="loading" loading-text="正在加载数据">-->
-<!--          <el-option :label="item.name" :value="item.id" v-for="(item,index) in rbOptions" :key="index+'rbOptions'"></el-option>-->
-<!--        </el-select>-->
-<!--      </el-form-item>-->
       <el-form-item label="时间选择">
         <el-date-picker
-          v-model="search.date"
+            v-model="dateRange"
-          type="date"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            value-format="yyyy-MM-dd"
+            :clearable="false"
             :picker-options="pickerOptions"
-          :default-value="defaultDate">
+            :default-value="defaultDateRange"
-        </el-date-picker>
+        ></el-date-picker>
       </el-form-item>
       <el-form-item>
         <el-button type="primary" @click="onSearch" native-type="button">搜索</el-button>
@@ -40,71 +35,92 @@
               prop="dataTime"
               label="日期"
               width="120">
-              <template slot-scope="scope">
-                <span>{{scope.row.dataTime}}{{scope.row.dataTime === '汇总' ? '' : ':00'}}</span>
-              </template>
             </el-table-column>
           </el-table-column>
 <!--充电量列-->
-          <el-table-column  label="充电量">
+          <el-table-column  label="充电量" align="center">
             <el-table-column
+              align="center"
               prop="activePeakKwh"
               label="尖">
             </el-table-column>
             <el-table-column
+              align="center"
               prop="activeHighKwh"
               label="峰">
             </el-table-column>
             <el-table-column
+                align="center"
               prop="activeFlatKwh"
               label="平">
             </el-table-column>
             <el-table-column
+                align="center"
               prop="activeValleyKwh"
               label="谷">
             </el-table-column>
             <el-table-column
+                align="center"
               prop="activeTotalKwh"
               label="总">
             </el-table-column>
           </el-table-column>
         <!--充电量列-->
-          <el-table-column  label="放电量">
+          <el-table-column  label="放电量" align="center">
             <el-table-column
+                align="center"
               prop="reActivePeakKwh"
               label="尖">
             </el-table-column>
             <el-table-column
+                align="center"
               prop="reActiveHighKwh"
               label="峰">
             </el-table-column>
             <el-table-column
+                align="center"
               prop="reActiveFlatKwh"
               label="平">
             </el-table-column>
             <el-table-column
+                align="center"
               prop="reActiveValleyKwh"
               label="谷">
             </el-table-column>
             <el-table-column
+                align="center"
               prop="reActiveTotalKwh"
               label="总">
             </el-table-column>
           </el-table-column>
 <!--        效率-->
-          <el-table-column label="效率(%)">
+          <el-table-column label="效率(%)" align="center">
             <el-table-column
+                align="center"
               prop="effect">
             </el-table-column>
           </el-table-column>
         </el-table>
+        <el-pagination
+            v-show="tableData.length>0"
+            background
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :current-page="pageNum"
+            :page-size="pageSize"
+            :page-sizes="[10, 20, 30, 40]"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="totalSize"
+            style="margin-top:15px;text-align: center"
+        >
+        </el-pagination>
   </div>
 </template>
 
 
 <script>
 import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
-import { getAmmeterData, getLoadNameList} from '@/api/ems/dzjk'
+import { getAmmeterData} from '@/api/ems/dzjk'
 import {formatDate} from "@/filters/ems";
 export default {
   name:'DzjkTjbbDbbb',
@@ -117,61 +133,64 @@ export default {
           return time.getTime() > Date.now();
         },
       },
-      defaultDate:'',//默认展示的时间
+      defaultDateRange:[],//默认展示的时间
-      search:{deviceId:'',date:''},
+      dateRange:[],
-      deviceOptions:[],
+      tableData:[],
-      // rbOptions:[
+      pageSize:10,//分页栏当前每个数据总数
-      //   {name:'日报1',id:1},
+      pageNum:1,//分页栏当前页数
-      //   {name:'日报2',id:2},
+      totalSize:0,//table表格数据总数
-      // ],
-      tableData:[]
     }
   },
   methods:{
     // 搜索
     onSearch(){
+      this.pageNum =1//每次搜索从1开始搜索
       this.getData()
     },
     // 重置
     onReset(){
-      this.search.date = ''
+      this.dateRange=this.defaultDateRange
+      this.pageNum =1//每次搜索从1开始搜索
       this.getData()
     },
+    // 分页
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.$nextTick(()=>{
+        this.getData()
+      })
+    },
+    handleCurrentChange(val) {
+      this.pageNum = val
+      this.$nextTick(()=>{
+        this.getData()
+      })
+    },
     // 获取数据
     getData(){
-      if(!this.search.deviceId) return
       this.loading=true
-      getAmmeterData({siteId:this.siteId,deviceId:this.search.deviceId,dateTime:formatDate(this.search.date)}).then(response=>{
+      const {siteId,pageNum,pageSize} =this
-        this.tableData=response?.data || [];
+      const [startTime='',endTime='']=(this.dateRange || [])
+      getAmmeterData({siteId:siteId,startTime,endTime,pageSize,pageNum}).then(response=>{
+        this.tableData=response?.rows || [];
+        this.totalSize = response?.total || 0
       }).finally(()=> {
         this.loading = false
       })
     },
-    getDbList(){
-      return getLoadNameList(this.siteId).then(response=>{
-        this.deviceOptions=response?.data || [];
-        this.deviceOptions.length > 0 && (this.search.deviceId = this.deviceOptions[0].id);
-      })
-    },
     init(){
-      this.loading = true
+      this.dateRange=[]
-      this.deviceOptions = []
-      this.search.deviceId=''
-      this.search.date=''
       this.tableData=[]
-      this.getDbList().then(()=>{
+      this.totalSize=0
-        if(this.search.deviceId){
+      this.pageSize=10
-          this.onReset()
+      this.pageNum = 1
-        }else{
+      const now = new Date().getTime();
-          this.loading = false
+      const lastMonth = new Date(now-30 * 24 * 60 * 60 * 1000).getTime();
-        }
+      this.defaultDateRange = [formatDate(lastMonth), formatDate(now)];
-      })
+      this.dateRange=[formatDate(lastMonth), formatDate(now)];
+      this.getData()
     },
   },
-
-  mounted(){
-    this.defaultDate = new Date()
-  }
 }
 </script>