fast(项目-能源管理): 电量添加合计和分组查询

src/views/iot/project/profileV2/EnergyManage/EElectricity.vue

@@ -1,41 +1,51 @@
 <template>
   <div class="e-project-electricity">
     <el-form
-      :model="queryParams"
       ref="queryForm"
       :inline="true"
+      :model="queryParams"
       label-width="68px"
     >
-      <el-form-item label="空间：" prop="spaceId">
+<!--      <el-form-item label="空间：" prop="spaceId">-->
-        <treeselect
+<!--        <treeselect-->
-          style="width: 200px"
+<!--          v-model="queryParams.spaceId"-->
-          v-model="queryParams.spaceId"
+<!--          :normalizer="normalizer"-->
-          :options="querySpaceOptions"
+<!--          :options="querySpaceOptions"-->
-          :normalizer="normalizer"
+<!--          placeholder="请选择空间"-->
-          placeholder="请选择空间"
+<!--          style="width: 200px"-->
+<!--        />-->
+<!--      </el-form-item>-->
+      <el-form-item label="设备组" prop="groupId">
+        <el-select v-model="queryParams.groupId" clearable placeholder="请选择设备组">
+          <el-option
+            v-for="(item, index) in projectGroupList"
+            :key="item.id"
+            :label="item.groupName"
+            :value="item.id"
           />
+        </el-select>
       </el-form-item>
       <el-form-item label="月份：" prop="queryTime">
         <el-date-picker
           v-model="queryTime"
-          type="month"
           :clearable="false"
-          placeholder="选择月">
+          placeholder="选择月"
+          type="month">
         </el-date-picker>
       </el-form-item>
 
       <el-form-item label="设备号：" prop="deviceId">
         <el-input
-          style="width: 150px"
           v-model="queryParams.deviceId"
           placeholder="输入设备号"
+          style="width: 150px"
         ></el-input>
       </el-form-item>
 
       <el-form-item>
         <el-button
-          type="primary"
           icon="el-icon-search"
+          type="primary"
           @click="handleQuery"
           >搜索</el-button
         >
@@ -44,57 +54,60 @@
 
     <div class="debuff-table">
       <el-table
+        ref="deviceTableRef"
         v-loading="tableLoading"
         :data="tableList"
         :height="total > 0 ? '460px' : '500px'"
+        :summary-method="getSummaries"
+        show-summary
       >
         <el-table-column
-          label="设备名称"
           align="left"
-          width="180px"
+          label="设备名称"
           prop="deviceName"
+          width="180px"
         ></el-table-column>
 
         <el-table-column
-          label="设备号"
           align="left"
-          width="250px"
+          label="设备号"
           prop="deviceId"
+          width="250px"
         >
           <template slot-scope="scope">
-            <span class="lay-table-textarea" :title="scope.row.deviceId">
+            <span :title="scope.row.deviceId" class="lay-table-textarea">
               {{ scope.row.deviceId }}
             </span>
           </template>
         </el-table-column>
 
-        <el-table-column label="地点" align="left" prop="deviceAddress">
+        <el-table-column align="left" label="地点" prop="deviceAddress">
           <template slot-scope="scope">
-            <span class="lay-table-textarea" :title="scope.row.deviceAddress">
+            <span :title="scope.row.deviceAddress" class="lay-table-textarea">
               {{ scope.row.deviceAddress }}
             </span>
           </template>
         </el-table-column>
 
-        <el-table-column label="本月电量" align="center" width="100" prop="tmReadSum">
+        <el-table-column align="center" label="本月电量" prop="tmReadSum" width="100">
           <template slot-scope="scope">
-            <span class="lay-table-textarea" :title="scope.row.tmReadSum">
+            <span :title="scope.row.tmReadSum" class="lay-table-textarea">
               {{ scope.row.tmReadSum || 0 }}
             </span>
           </template>
         </el-table-column>
 
-        <el-table-column label="上月电量" align="center" width="100" prop="lmReadSum">
+        <el-table-column align="center" label="上月电量" prop="lmReadSum" width="100">
           <template slot-scope="scope">
-            <span class="lay-table-textarea" :title="scope.row.lmReadSum">
+            <span :title="scope.row.lmReadSum" class="lay-table-textarea">
               {{ scope.row.lmReadSum || 0 }}
             </span>
           </template>
         </el-table-column>
 
-        <el-table-column label="对比" align="center" width="100" prop="qoq">
+        <el-table-column align="center" label="对比" prop="qoq" width="100">
           <template slot-scope="scope">
-            <span class="lay-table-textarea" :title="scope.row.qoq">
+            <span :title="scope.row.qoq" class="lay-table-textarea">
               {{ scope.row.qoq || 0 }}%
             </span>
           </template>
@@ -116,30 +129,30 @@
           </template>
         </el-table-column> -->
 
-        <el-table-column label="状态" align="center" width="120" prop="status">
+        <el-table-column align="center" label="状态" prop="status" width="120">
             <template slot-scope="scope">
               <div class="e-table-dev-status">
                 <span>{{ scope.row.deviceStatus === '0' ? '启用' : '禁用' }}</span>
                 <el-divider direction="vertical"></el-divider>
-                <span class="c-success" v-if="scope.row.deviceState === 'ONLINE'">在线</span>
+                <span v-if="scope.row.deviceState === 'ONLINE'" class="c-success">在线</span>
-                <span class="c-danger" v-else-if="scope.row.deviceState === 'OFFLINE'">离线</span>
+                <span v-else-if="scope.row.deviceState === 'OFFLINE'" class="c-danger">离线</span>
-                <span class="c-warning" v-else-if="scope.row.deviceState === 'OUTLINE'">脱线</span>
+                <span v-else-if="scope.row.deviceState === 'OUTLINE'" class="c-warning">脱线</span>
-                <span class="c-info" v-else-if="scope.row.deviceState === 'UNACTIVE'">未激活</span>
+                <span v-else-if="scope.row.deviceState === 'UNACTIVE'" class="c-info">未激活</span>
               </div>
             </template>
         </el-table-column>
 
         <el-table-column
-          label="操作"
           align="center"
-          width="100"
           class-name="small-padding fixed-width"
+          label="操作"
+          width="100"
         >
           <template slot-scope="scope">
             <el-button
+              icon="el-icon-search"
               size="mini"
               type="text"
-              icon="el-icon-search"
               @click="handleLinkDevDetails(scope.row)"
             >详情</el-button>
           </template>
@@ -147,11 +160,11 @@
       </el-table>
 
       <pagination
-        style="margin-top: 5px; height: 35px"
         v-show="total > 0"
-        :total="total"
-        :page.sync="queryParams.pageNum"
         :limit.sync="queryParams.pageSize"
+        :page.sync="queryParams.pageNum"
+        :total="total"
+        style="margin-top: 5px; height: 35px"
         @pagination="getList"
       />
     </div>
@@ -162,6 +175,7 @@ import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 import { projectElectricityTable } from "@/api/iot/project_new";
 import { listSpace } from "@/api/iot/space";
+import { getProjectGroupList } from "@/api/tenant/project";
 export default {
   name: "EElectricity",
   props: {
@@ -186,12 +200,15 @@ export default {
       queryParams: {
         spaceId: null,
         deviceId: '',
+        groupId: null,
       },
       queryTime: '',
       querySpaceOptions: [],
       tableList: [],
       tableLoading: false,
-      total: 2
+      total: 2,
+      // 设备分组
+      projectGroupList:[],
     };
   },
   watch: {
@@ -204,14 +221,35 @@ export default {
   created() {
     this.init()
   },
+  updated() {
+    this.$nextTick(() => {
+      this.$refs.deviceTableRef.doLayout();
+      console.log("do layout");
+    });
+  },
   methods: {
+    // 查询所属项目分组列表
+    getProjectGroupList() {
+      getProjectGroupList({
+        projectId: this.sourceId
+      }).then(response => {
+        this.projectGroupList = response.rows||[];
+      });
+    },
     init() {
       this.queryTime = this.parseTime(new Date(), "{y}-{m}-01 00:00:00");
-      this.getSpaceList();
+      // this.getSpaceList();
       this.handleQuery();
+      this.getProjectGroupList();
     },
     handleQuery() {
-      this.queryParams.pageNum = 1;
+      // this.queryParams.pageNum = 1;
+      this.queryParams={
+        spaceId: null,
+        deviceId: '',
+        groupId: null,
+        pageNum:1
+      }
       this.getList();
     },
     handleLinkDevDetails(row) {
@@ -250,6 +288,7 @@ export default {
         projectElectricityTable(
           Object.assign(queryParams, {
             projectId: this.sourceId,
+            groupId: this.groupId,
             time: this.parseTime(
               new Date(this.queryTime),
               "{y}-{m}-01 00:00:00"
@@ -258,10 +297,66 @@ export default {
             timeType: 'month'
           })
         ).then((res) => {
+          if(res.rows.length>0){
+            res.rows[0].tmReadSum = '1.0';
+            res.rows[1].tmReadSum = '1.0';
+            res.rows[1].lmReadSum = '2.0';
+            res.rows[1].tmReadSum = '2.0';
+            res.rows[1].lmReadSum = '1.0';
+          }
           this.tableList = res.rows;
           this.total = res.total;
         });
     },
+    getSummaries(param) {
+      const { columns, data } = param;
+      const sums = [];
+      columns.forEach((column, index) => {
+        if (index === 0) {
+          sums[index] = '总计';
+          return;
+        }
+        // const values = data.map(item => Number(item[column.property]));
+        const values = data.map((item,i)=>{
+          if(index===2){
+            return NaN;
+          }else{
+            return Number(item[column.property]);
+          }
+        });
+        if (!values.every(value => isNaN(value))) {
+          sums[index] = values.reduce((prev, curr) => {
+            const value = Number(curr);
+            if (!isNaN(value)) {
+              return prev + curr;
+            } else {
+              return prev;
+            }
+          }, 0);
+          sums[index] += '';
+        } else {
+          sums[index] = '';
+        }
+      });
+      // 获取上个月电量和本月电量
+      const lastMonthEnergy = parseFloat(sums[4]) || 0;
+      const thisMonthEnergy = parseFloat(sums[3]) || 0;
+      // 计算对比百分比
+      let percentage = 0;
+      if (lastMonthEnergy !== 0) {
+        percentage = ((thisMonthEnergy - lastMonthEnergy) / lastMonthEnergy) * 100;
+      } else {
+        if(thisMonthEnergy==0 && lastMonthEnergy==0){
+          percentage = 0;
+        }else if(thisMonthEnergy==0){
+          percentage = -100;
+        }else if(lastMonthEnergy==0){
+          percentage = 100;
+        }
+      }
+      sums[5] = percentage.toFixed(2) + '%';
+      return sums;
+    }
   },
 };
 </script>