1、合计

src/views/zhpt/scada/dayUseWater/widget.vue

@@ -99,14 +99,12 @@
             size="small"
             type="primary"
             @click="monitorHisToryQuery('ruleForm')"
-            >查询</el-button
-          >
+          >查询</el-button>
           <el-button
             size="small"
             type="primary"
             @click="statisticsScadaExport('ruleForm')"
-            >导出</el-button
-          >
+          >导出</el-button>
         </el-form-item>
       </el-form>
     </el-row>
@@ -120,7 +118,7 @@
         :summary-method="getSummaries"
         show-summary
         border
-        height="calc(100% - 65px)"
+        style="width: 100%; height:calc(100% - 80px); margin-top: 20px"
       >
         <el-table-column type="index" align="center" width="50" label="序号" />
         <el-table-column
@@ -163,7 +161,7 @@
             layout="total, sizes, prev, pager, next, jumper"
             :pager-count="5"
             :current-page="pageInfo.current"
-            :page-sizes="[40, 80, 120, 200]"
+            :page-sizes="[10,40, 80, 120, 200]"
             style="margin-top: 4px"
             :page-size="pageInfo.size"
             :total="tableTotal"
@@ -176,77 +174,77 @@
   </div>
 </template>
 <script>
-import elementResizeDetectorMaker from "element-resize-detector";
-import TableItem from "@/components/Table";
-import Echarts from "echarts";
-import ExportBtn from "@/views/zhpt/wxreportforms/components/ExportBtn";
+import elementResizeDetectorMaker from 'element-resize-detector'
+import TableItem from '@/components/Table'
+import Echarts from 'echarts'
+import ExportBtn from '@/views/zhpt/wxreportforms/components/ExportBtn'
 import {
   queryDevice,
   queryIndexConfiguration,
   statisticsScadaPage,
-  statisticsScadaExport,
-} from "@/api/scadaApi";
-import { getSysCommonCode } from "@/api/dataCenter";
+  statisticsScadaExport
+} from '@/api/scadaApi'
+import { getSysCommonCode } from '@/api/dataCenter'
 export default {
-  name: "AnalysisResult",
+  name: 'AnalysisResult',
   components: { TableItem, Echarts, ExportBtn },
   directives: {
     way(el, bind) {
-      if (typeof bind.value === "function") bind.value(el);
-    },
+      if (typeof bind.value === 'function') bind.value(el)
+    }
   },
   data() {
     return {
       dayUseWaterData: [], // 表格数据
       tabsItem: [],
-      activeName: "",
-      monitorLable: "",
+      activeName: '',
+      monitorLable: '',
       tableLoading: false,
-      nameUnit: "",
+      nameUnit: '',
       total: 0,
       loading: false,
       pageInfo: { current: 1, size: 40 }, // 分页数据
       ruleForm: {
-        site: "",
-        indexName: "",
-        times: [],
+        site: '',
+        indexName: '',
+        times: []
       },
       rules: {
-        site: [{ required: true, message: "", trigger: "change" }],
-        times: [{ required: true, message: "", trigger: "change" }],
+        site: [{ required: true, message: '', trigger: 'change' }],
+        times: [{ required: true, message: '', trigger: 'change' }]
       },
       sites: [], // 测站名称
       types: [], // 指标类型
       indexNames: null, // 指标名称
       elements: {},
       tableTotal: 0, // 表格数据总条数
-      categoryName: "1", // 默认选择水厂
+      categoryName: '1', // 默认选择水厂
       categoryNames: [],
       isSeletcSite: [],
       linkageEchart: null,
       deviceTypeCode: [],
-      num: "",
-    };
+      num: ''
+    }
   },
 
   watch: {
-    "ruleForm.indexName": {
+    'ruleForm.indexName': {
       handler(newValue, oldVal) {
-        this.monitorHisToryQuery("ruleForm");
-      },
-    },
+        this.monitorHisToryQuery('ruleForm')
+      }
+    }
   },
   created() {},
 
   mounted() {
-    const date = new Date();
-    const year = date.getFullYear();
-    const month = date.getMonth() + 1;
-    const day = date.getDate();
+    const date = new Date()
+    const year = date.getFullYear()
+    const month = date.getMonth() + 1
+    const day = date.getDate()
     this.ruleForm.times = [
-      year + "-" + month + "-1",
-      year + "-" + month + "-" + day,
-    ];
+      year + '-' + month + '-1',
+      year + '-' + month + '-' + day
+    ]
     // this.elements["mainDiv"].parentElement.style.height = "100%";
     // this.elements["mainDiv"].parentElement.parentElement.style.height =
     //   "calc(100% - 56px)";
@@ -255,13 +253,13 @@ export default {
     // ].parentElement.parentElement.parentElement.style.height = "100%";
     // this.showUnitIndex = {};
 
-    getSysCommonCode({ pCid: "53400" }).then((res) => {
-      let deviceTypes = res.result[0].codeList;
+    getSysCommonCode({ pCid: '53400' }).then((res) => {
+      const deviceTypes = res.result[0].codeList
       this.deviceTypeCode = deviceTypes.map((item) => {
-        if (item.cname.indexOf("压力") == -1) return item.ccode;
-      });
-      this.queryDevice(); // 绑定测站名称
-    });
+        if (item.cname.indexOf('压力') == -1) return item.ccode
+      })
+      this.queryDevice() // 绑定测站名称
+    })
   },
   methods: {
     /**
@@ -269,35 +267,34 @@ export default {
      *
      */
     getSummaries(param) {
-      const { columns, data } = param;
-      const sums = [];
+      const { columns, data } = param
+      const sums = []
       columns.forEach((column, index) => {
         if (index === 0) {
-          sums[index] = "合计";
-          return;
+          sums[index] = '合计'
+          return
         }
-        const values = data.map((item) => Number(item[column.property]));
+        const values = data.map((item) => Number(item[column.property]))
         if (!values.every((value) => isNaN(value))) {
-          sums[index] = this.num;
-        } else {
+          sums[index] = this.num
         }
-      });
-      return sums;
+      })
+      return sums
     },
     /**
      * 根据设备类型查询设备
      */
     queryDevice() {
       queryDevice({ type: this.categoryName, size: 10000 }).then((res) => {
-        let device = res.result.records;
+        const device = res.result.records
         this.isSeletcSite = device.filter(
           (item) => this.deviceTypeCode.indexOf(item.deviceType) != -1
-        );
+        )
         if (this.isSeletcSite.length > 0) {
-          this.ruleForm.site = this.isSeletcSite[0].id;
-          this.bindTsNameChange();
+          this.ruleForm.site = this.isSeletcSite[0].id
+          this.bindTsNameChange()
         }
-      });
+      })
     },
 
     /**
@@ -306,174 +303,173 @@ export default {
     queryIndexType() {
       queryIndexConfiguration({
         deviceId: this.ruleForm.site,
-        size: 10000,
+        size: 10000
       }).then((res) => {
-        const arr = this.process(res.result.records);
-        this.types = arr;
+        const arr = this.process(res.result.records)
+        this.types = arr
         this.indexNames = arr.filter(
           (item) =>
-            item.variableCode.indexOf(".JLJ") != -1 ||
-            item.variableCode.indexOf(".LJL") != -1
-        );
-        if (this.indexNames.length > 0)
-          this.ruleForm.indexName = this.indexNames[0].variableCode;
-      });
+            item.variableCode.indexOf('.JLJ') != -1 ||
+            item.variableCode.indexOf('.LJL') != -1
+        )
+        if (this.indexNames.length > 0) { this.ruleForm.indexName = this.indexNames[0].variableCode }
+      })
     },
 
     queryIndexConfiguration() {
       queryIndexConfiguration({
         deviceId: this.ruleForm.site,
         type: this.ruleForm.type,
-        size: 10000,
+        size: 10000
       }).then((res) => {
-        this.indexNames = res.result.records;
-        var index = (this.targetIndex = {});
+        this.indexNames = res.result.records
+        var index = (this.targetIndex = {})
         res.result.records.map((e) => {
-          index[e.variableCode] = e;
-        });
-      });
+          index[e.variableCode] = e
+        })
+      })
     },
 
     process(arr) {
       // 缓存用于记录
-      const cache = [];
+      const cache = []
       for (const t of arr) {
         // 检查缓存中是否已经存在
         if (cache.find((c) => c.type === t.type)) {
           // 已经存在说明以前记录过，现在这个就是多余的，直接忽略
-          continue;
+          continue
         }
         // 不存在就说明以前没遇到过，把它记录下来
-        cache.push(t);
+        cache.push(t)
       }
 
       // 记录结果就是过滤后的结果
-      return cache;
+      return cache
     },
 
     // 设备名称发生改变时触发
     bindTsNameChange() {
-      this.tabsItem = [];
-      this.types = [];
-      this.indexNames = [];
-      this.targetIndex = {};
-      this.ruleForm.type = "";
-      this.ruleForm.indexName = "";
-      this.queryIndexType();
+      this.tabsItem = []
+      this.types = []
+      this.indexNames = []
+      this.targetIndex = {}
+      this.ruleForm.type = ''
+      this.ruleForm.indexName = ''
+      this.queryIndexType()
     },
 
     // 获得表格数据
     getData(data) {
-      this.dayUseWaterData = [];
-      this.loading = true;
+      this.dayUseWaterData = []
+      this.loading = true
 
       statisticsScadaPage(data)
         .then((res) => {
           if (res.code == 1) {
-            this.dayUseWaterData = res.result.records;
-            this.tableTotal = res.result.total;
-          } else this.$message.error(res.message);
-          this.loading = false;
+            this.dayUseWaterData = res.result.records
+            this.tableTotal = res.result.total
+          } else this.$message.error(res.message)
+          this.loading = false
         })
         .catch((err) => {
-          console.log(err);
-        });
+          console.log(err)
+        })
 
-      const indexName1 = this.ruleForm.indexName.replace(/\#/g, "%23");
+      const indexName1 = this.ruleForm.indexName.replace(/\#/g, '%23')
       const data1 = {
-        code: indexName1 + "", // 指标名称
-        startTime: this.ruleForm.times[0] + " 00:00:00",
-        endTime: this.ruleForm.times[1] + " 23:59:59",
+        code: indexName1 + '', // 指标名称
+        startTime: this.ruleForm.times[0] + ' 00:00:00',
+        endTime: this.ruleForm.times[1] + ' 23:59:59',
         size: this.pageInfo.size,
         current: this.pageInfo.current,
-        totalAll: 1,
-      };
+        totalAll: 1
+      }
       statisticsScadaPage(data1)
         .then((res) => {
           if (res.code == 1) {
-            this.num = res.result.difference;
+            this.num = res.result.difference
           }
         })
         .catch((err) => {
-          console.log(err);
-        });
+          console.log(err)
+        })
     },
     // 点击查询，获取表格数据
     monitorHisToryQuery(formName) {
-      this.$refs[formName].validate(async (valid) => {
+      this.$refs[formName].validate(async(valid) => {
         if (valid) {
-          const indexName = this.ruleForm.indexName.replace(/\#/g, "%23");
+          const indexName = this.ruleForm.indexName.replace(/\#/g, '%23')
           const data = {
-            code: indexName + "", // 指标名称
-            startTime: this.ruleForm.times[0] + " 00:00:00",
-            endTime: this.ruleForm.times[1] + " 23:59:59",
+            code: indexName + '', // 指标名称
+            startTime: this.ruleForm.times[0] + ' 00:00:00',
+            endTime: this.ruleForm.times[1] + ' 23:59:59',
             size: this.pageInfo.size,
-            current: this.pageInfo.current,
-          };
-          this.getData(data);
+            current: this.pageInfo.current
+          }
+          this.getData(data)
         } else {
-          return false;
+          return false
         }
-      });
+      })
     },
     // 每页显示条数改变时触发事件
     handleSizeChange(val) {
-      this.pageInfo.size = val;
-      this.monitorHisToryQuery("ruleForm");
+      this.pageInfo.size = val
+      this.monitorHisToryQuery('ruleForm')
     },
     // 翻页时触发事件
     handleCurrentChange(val) {
-      this.pageInfo.current = val;
-      this.monitorHisToryQuery("ruleForm");
+      this.pageInfo.current = val
+      this.monitorHisToryQuery('ruleForm')
     },
 
-    wayFun: function (flag) {
+    wayFun: function(flag) {
       return (el) => {
-        this.elements[flag] = el;
-      };
+        this.elements[flag] = el
+      }
     },
     statisticsScadaExport(formName) {
-      this.$refs[formName].validate(async (valid) => {
+      this.$refs[formName].validate(async(valid) => {
         if (valid) {
-          const indexName = this.ruleForm.indexName.replace(/\#/g, "%23");
+          const indexName = this.ruleForm.indexName.replace(/\#/g, '%23')
           const data = {
-            code: indexName + "", // 指标名称
-            startTime: this.ruleForm.times[0] + " 00:00:00",
-            endTime: this.ruleForm.times[1] + " 23:59:59",
-          };
+            code: indexName + '', // 指标名称
+            startTime: this.ruleForm.times[0] + ' 00:00:00',
+            endTime: this.ruleForm.times[1] + ' 23:59:59'
+          }
           statisticsScadaExport(data).then((res) => {
             const blob = URL.createObjectURL(
               new Blob([res], {
-                type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+                type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
               })
-            );
-            const a = document.createElement("a");
-            a.href = blob;
-            a.download = "日用量报表.xlsx";
-            a.click();
-          });
+            )
+            const a = document.createElement('a')
+            a.href = blob
+            a.download = '日用量报表.xlsx'
+            a.click()
+          })
         } else {
-          return false;
+          return false
         }
-      });
+      })
     },
 
     selectChange(val) {
-      this.categoryName = val;
-      this.tabsItem = [];
-      this.isSeletcSite = [];
-      this.types = [];
-      this.indexNames = [];
-      this.targetIndex = {};
+      this.categoryName = val
+      this.tabsItem = []
+      this.isSeletcSite = []
+      this.types = []
+      this.indexNames = []
+      this.targetIndex = {}
       for (const i in this.ruleForm) {
-        if (i != "times") {
-          this.ruleForm[i] = "";
+        if (i != 'times') {
+          this.ruleForm[i] = ''
         }
       }
-      this.queryDevice();
-    },
-  },
-};
+      this.queryDevice()
+    }
+  }
+}
 </script>
 <style scoped="less">
 .el-table__footer-wrapper {