water-ldht/src/views/analysis/weekfunction/index.vue

<template>
  <div class="manage-container">
    <el-form ref="form" :model="queryForm" label-width="100px">
      <vab-query-form>
        <el-form-item :label="$t('defalult.sj')">
          <el-date-picker
            v-model="queryForm.time"
            type="daterange"
            align="right"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            @change="changeTime"
          ></el-date-picker>
        </el-form-item>
        <el-form-item width="100" :label="$t('dataEnquiry.xm')">
          <el-select
            v-model="queryForm.projectId"
            placeholder="请选择项目"
            @change="changeProject"
          >
            <el-option
              v-for="item in projectData"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item width="100" :label="$t('dataEnquiry.jd')">
          <el-select
            v-model="queryForm.townCode"
            :placeholder="$t('dataEnquiry.qxzjd')"
            @change="changeTown"
          >
            <el-option
              v-for="item in townData"
              :key="item.townCode"
              :label="item.townName"
              :value="item.townCode"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item width="100" :label="$t('dataEnquiry.sq')">
          <el-select v-model="queryForm.community" placeholder="请选择社区">
            <el-option
              v-for="item in Communities"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item width="100" :label="$t('dataEnquiry.zdmc')">
          <el-input
            v-model="queryForm.devieName"
            :placeholder="$t('dataEnquiry.qsrzdmc')"
          ></el-input>
        </el-form-item>
        <el-form-item width="100">
          <el-button type="primary" size="medium" @click="search">
            {{ $t('defalult.cx') }}
          </el-button>
        </el-form-item>
      </vab-query-form>
    </el-form>
    <el-table
      v-loading="listLoading"
      :data="reportData"
      border
      stripe
      style="width: 100%"
    >
      <el-table-column
        prop="townName"
        :label="$t('dataEnquiry.xzjdmc')"
        width="120"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="community"
        label="社区名称"
        width="200"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="deviceName"
        :label="$t('dataEnquiry.zdmc')"
        width="200"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="specifications"
        label="对比规格"
        width="200"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="waterYield.start"
        label="开始水量(m³)"
        width="200"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="waterYield.end"
        label="结束水量(m³)"
        width="200"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="waterYield.use"
        label="用水量(m³)"
        width="200"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="electricQuantity.start"
        label="开始电量(Kw·h)"
        width="200"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="electricQuantity.end"
        label="结束电量(Kw·h)"
        width="200"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="electricQuantity.use"
        label="用电量(Kw·h)"
        width="200"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="powerConsumption"
        label="电单耗(Kw·h/m³)"
        width="200"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="dutyRatio"
        label="本周运行符合率(%)"
        width="200"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="maximumLiquidLevel"
        label="本周调节池最高液位(m)"
        width="200"
        align="center"
      ></el-table-column>
    </el-table>
    <vab-query-form>
      <vab-query-form-right-panel>
        <el-pagination
          :background="background"
          :current-page="queryForm.page"
          :layout="layout"
          :page-size="queryForm.size"
          :total="total"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        ></el-pagination>
      </vab-query-form-right-panel>
    </vab-query-form>
  </div>
</template>
<script>
import { getList } from '@/api/project';
import { getTownsByProject, getCommunitiesByTown } from '@/api/device';
import { weeklyReport } from '@/api/analysis';
export default {
  name: 'Index',
  components: {},
  data() {
    return {
      data: [],
      lazy: true,
      activeName: 'first',
      layout: 'total, sizes, prev, pager, next, jumper',
      total: 0,
      input: '',
      textarea: '',
      list: [],
      background: true,
      listLoading: true,
      elementLoadingText: '正在加载...',
      townData: [],
      Communities: [],
      projectData: [],
      reportData: [],
      queryForm: {
        page: 1,
        size: 20,
        projectId: '',
        start: '',
        end: '',
        time: [],
        townCode: '',
        community: '',
        devieName: '',
      },
    };
  },
  computed: {
    height() {
      return 500;
    },
  },
  created() {
    this.setDefaultTome();
    this.getProjectData();
    setTimeout(() => {
      this.fetchData();
    }, 1000);
  },
  methods: {
    //获取当前时间
    getPastTime(month) {
      const time = new Date();
      const yy = time.getFullYear(); //获取完整的年份(4位,1970-???)
      const M = time.getMonth() + 1; //获取当前月份(0-11,0代表1月),
      const d = time.getDate(); //获取当前日(1-31)
      // 获取指定的过去时间
      const past = M - month;
      const pastM = past < 0 ? past + 12 : past > 10 ? past : '0' + past;
      // 小于9的，在前面加0
      const MM = M > 9 ? M : '0' + M;
      const dd = d > 9 ? d : '0' + d;
      // 指定的过去时间
      const PastTime = yy + '-' + pastM + '-' + dd;
      // 当前时间
      const nowTime = yy + '-' + MM + '-' + dd;
      return [PastTime, nowTime];
    },
    getDate(time) {
      const now = new Date(time);
      const year = now.getFullYear(); //得到年份
      let month = now.getMonth(); //得到月份
      let date = now.getDate(); //得到日期
      month = month + 1;
      month = month.toString().padStart(2, '0');
      date = date.toString().padStart(2, '0');
      return `${year}-${month}-${date}`;
    },
    changeTime() {
      this.queryForm.start = this.getDate(this.queryForm.time[0]);
      this.queryForm.end = this.getDate(this.queryForm.time[1]);
    },
    setDefaultTome() {
      this.queryForm.time = this.getPastTime(1);
      this.queryForm.start = this.getDate(this.queryForm.time[0]);
      this.queryForm.end = this.getDate(this.queryForm.time[1]);
    },
    //获取项目
    async getProjectData() {
      const params = {
        size: 100,
        page: 1,
      };
      const { data } = await getList(params);
      this.projectData = data.items;
      this.queryForm.projectId = this.projectData[0].id;
    },
    //项目下拉触发
    changeProject() {
      this.getTownsByProject();
    },
    //街道
    async getTownsByProject() {
      const param = {
        projectId: this.queryForm.projectId,
      };
      const { data } = await getTownsByProject(param);
      this.townData = data;
    },
    //街道选择
    changeTown() {
      this.getCommunitiesByTown();
    },
    //社区
    async getCommunitiesByTown() {
      const param = {
        townCode: this.queryForm.townCode,
      };
      const { data } = await getCommunitiesByTown(param);
      this.Communities = data;
    },
    //数据
    async fetchData() {
      this.listLoading = true;
      const { data } = await weeklyReport(this.queryForm);
      this.reportData = data.items;
      this.total = data.total;
      setTimeout(() => {
        this.listLoading = false;
      }, 500);
    },
    search() {
      this.fetchData();
    },
    handleAdd() {
      this.$refs['edit'].showEdit();
    },
    handleEdit(row) {
      this.$refs['edit'].showEdit(row);
    },
    handleQuery() {
      this.queryForm.page = 1;
      this.fetchData();
    },
    handleSizeChange(val) {
      this.queryForm.size = val;
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.queryForm.page = val;
      this.fetchData();
    },
    handleDelete(row) {
      // let that = this
      if (row.id) {
        this.$confirm('你确定要删除当前项吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            this.$message({
              type: 'success',
              message: '删除成功',
            });
            // const { msg } = doDelete({ groupId: row.id })
            // this.$message({
            //   type: 'success',
            //   message: msg == undefined ? '删除成功' : msg,
            // })
            // setTimeout(function () {
            //   that.fetchData()
            // }, 1000)
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除',
            });
          });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.manage-container {
  width: 100%;
  .vab-query-form {
    margin-bottom: 30px;
    .el-input {
      width: 180px;
      margin-right: 20px;
    }
  }
}
</style>

<style lang="scss">
.el-submenu__title:hover {
  background-color: rgba(#1890ff, 0.085) !important;
  color: hsla(208, 100%, 55%, 0.95) !important;
}
</style>