kd-aiot-frontend-ems/src/views/centralizedMeterReading/collectionList.vue

<template>
  <div class="energy-monitoring">
    <el-card shadow="never" class="monitoring-card">
      <!-- 主内容区 -->
      <ele-split-layout
        width="220px"
        allow-collapse
        :right-style="{ overflow: 'hidden' }"
      >
        <!-- 左侧树形菜单 -->
        <div class="left-sidebar">
          <el-tabs
            v-model="activeTab"
            type="border-card"
            @tab-click="activeTabChange"
          >
            <el-tab-pane label="设备类型" name="org">
              <el-tree
                :data="orgTreeData"
                :props="treeProps"
                node-key="id"
                highlight-current
                @node-click="handleNodeClick"
                style="height: calc(100vh - 180px)"
                ref="treeRef"
              ></el-tree>
            </el-tab-pane>
            <el-tab-pane label="用能分区" name="energy">
              <el-tree
                :data="treeData"
                :props="treeProps"
                node-key="id"
                default-expand-all
                ref="treeRef1"
                highlight-current
                @node-click="handleNodeClick"
              ></el-tree>
            </el-tab-pane>
          </el-tabs>
        </div>

        <!-- 右侧内容区 -->
        <template v-slot:content>
          <div class="right-content">
            <!-- 搜索区域 -->
            <div class="search-area card-mode">
              <!-- 搜索框 -->

              <div class="search-input-wrapper">
                <el-form label-width="90px" :inline="true">
                  <el-form-item label="表计名称：">
                    <el-input
                      v-model="where.keyWord"
                      placeholder=" "
                      prefix-icon="el-icon-search"
                      clearable
                      @keyup.enter.native="handleSearch"
                      style="width: 250px"
                    >
                    </el-input>
                  </el-form-item>

                  <el-form-item label="用能分类：">
                    <el-select
                      clearable
                      v-model="where.energyClassificationCode"
                      style="width: 250px"
                    >
                      <el-option
                        v-for="(op, i) in energyConsumingUnitList"
                        :label="op.label"
                        :value="op.value"
                        :key="i"
                      ></el-option>
                    </el-select>
                  </el-form-item>

                  <el-form-item
                    v-if="pageName != 'fullYearCollection'"
                    :label="
                      pageName == 'dailyCollection'
                        ? '查询日期：'
                        : pageName == 'monthlyCollection'
                        ? '查询月份：'
                        : pageName == 'yearlyCollection'
                        ? '查询年度：'
                        : ''
                    "
                  >
                    <el-date-picker
                      v-model="queryDate"
                      @change="handleDateChange"
                      :type="
                        pageName == 'dailyCollection'
                          ? 'date'
                          : pageName == 'monthlyCollection'
                          ? 'month'
                          : pageName == 'yearlyCollection'
                          ? 'year'
                          : ''
                      "
                      :format="
                        pageName == 'dailyCollection'
                          ? 'yyyy-MM-dd'
                          : pageName == 'monthlyCollection'
                          ? 'yyyy-MM'
                          : pageName == 'yearlyCollection'
                          ? 'yyyy'
                          : ''
                      "
                      :value-format="
                        pageName == 'dailyCollection'
                          ? 'yyyy-MM-dd'
                          : pageName == 'monthlyCollection'
                          ? 'yyyy-MM'
                          : pageName == 'yearlyCollection'
                          ? 'yyyy'
                          : 'yyyy-MM-dd'
                      "
                      placeholder="选择"
                      style="width: 200px"
                    >
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item
                    v-if="pageName == 'fullYearCollection'"
                    label="查询年度："
                  >
                    <el-date-picker
                      v-model="where.startYear"
                      @change="handleYearRangeChange"
                      type="year"
                      format="yyyy"
                      value-format="yyyy"
                      placeholder="选择"
                      style="width: 200px"
                    >
                    </el-date-picker>
                    至
                    <el-date-picker
                      v-model="where.endYear"
                      @change="handleYearRangeChange"
                      type="year"
                      format="yyyy"
                      value-format="yyyy"
                      placeholder="选择"
                      style="width: 200px"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-form>
              </div>

              <div>
                <el-button type="primary" @click="handleSearch">搜索</el-button>
                <el-button @click="handleReset">重置</el-button></div
              >
            </div>

            <!-- 列表视图 -->
            <div class="list-view">
              <ele-pro-table
                ref="table"
                row-key="id"
                :columns="columns"
                @columns-change="handleColumnChange"
                :datasource="datasource"
                :cache-key="cacheKeyUrl"
                autoAmendPage
                height="calc(100vh - 300px)"
              >
              </ele-pro-table>
            </div>
          </div>
        </template>
      </ele-split-layout>
    </el-card>
  </div>
</template>

<script>
  import dictMixins from '@/mixins/dictMixins';
  import tableColumnsMixin from '@/mixins/tableColumnsMixin';
  import { getTreeByPid } from '@/api/classifyManage';
  import { basicAreaPageAPI } from '@/api/factoryModel';
  import {
    statByDay,
    statByMonth,
    statByYear,
    statByYearRange
  } from '@/api/centralizedMeterReading/index.js';

  import dayjs from 'dayjs';
  import { energyConsumingUnitList } from '@/enum/dict.js';

  export default {
    mixins: [dictMixins, tableColumnsMixin],
    components: {},
    props: {
      pageName: ''
    },
    data() {
      return {
        activeTab: 'org',
        // 更新时间
        updateTime: dayjs().format('YYYY-M-D HH:mm:ss'),
        // 树形数据
        treeData: [],
        orgTreeData: [],
        treeProps: {
          children: 'children',
          label: 'name'
        },

        areaId: '',
        categoryLevelId: '',
        // 表格列配置
        cacheKeyUrl: ` ems-collectionList-${this.pageName}-list`,
        energyConsumingUnitList,
        queryDate: '',
        where: {
          keyWord: '',
          energyClassificationCode: '',
          queryDate: '',
          queryMonth: '',
          queryYear: '',
          startYear: '',
          endYear: ''
        }
      };
    },
    created() {
      // 设置默认日期
      this.initDefaultDate();
      getTreeByPid('29').then((res) => {
        this.orgTreeData = res.data;
        if (this.orgTreeData.length) {
          this.handleNodeClick(this.orgTreeData[0]);
          this.$nextTick(() => {
            this.$refs.treeRef.setCurrentKey(this.orgTreeData[0].id);
          });
        }
      });
      /* 获取区域集合 */
      basicAreaPageAPI({
        pageNum: 1,
        size: 9999
      }).then((res) => {
        this.treeData = this.$util.toTreeData({
          data: res,
          idField: 'id',
          parentIdField: 'parentId'
        });
      });
    },
    computed: {
      columns() {
        let arr = [
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            fixed: 'left'
          },
          {
            prop: 'substanceName',
            label: '表计',
            align: 'center',
            minWidth: 130,
            showOverflowTooltip: true
          },
          {
            prop: 'energyClassificationName',
            label: '用能分类',
            align: 'center',
            minWidth: 130,
            showOverflowTooltip: true
          }
        ];
        // 日采集 - 1-24时
        if (this.pageName == 'dailyCollection') {
          for (let i = 1; i <= 24; i++) {
            arr.push({
              prop: i < 10 ? 'hour0' + i : 'hour' + i,
              label: i + '时',
              align: 'center',
              minWidth: 90,
              showOverflowTooltip: true
            });
          }
        }
        // 月采集 - 1-31日(根据选择的月份天数)
        if (this.pageName == 'monthlyCollection') {
          // 获取选择月份的天数，默认为当前月
          const queryMonth = this.where.queryMonth || dayjs().format('YYYY-MM');
          const daysInMonth = dayjs(queryMonth).daysInMonth();
          for (let i = 1; i <= daysInMonth; i++) {
            arr.push({
              prop: i < 10 ? 'day0' + i : 'day' + i,
              label: i + '日',
              align: 'center',
              minWidth: 90,
              showOverflowTooltip: true
            });
          }
        }
        // 年采集 - 1-12月
        if (this.pageName == 'yearlyCollection') {
          for (let i = 1; i <= 12; i++) {
            arr.push({
              prop: i < 10 ? 'month0' + i : 'month' + i,
              label: i + '月',
              align: 'center',
              minWidth: 100,
              showOverflowTooltip: true
            });
          }
        }
        // 全年采集 - 根据startYear和endYear生成年度列
        if (this.pageName == 'fullYearCollection') {
          const startYear = parseInt(this.where.startYear) || dayjs().year();
          const endYear = parseInt(this.where.endYear) || dayjs().year();
          for (let year = startYear; year <= endYear; year++) {
            arr.push({
              prop: year + '',
              label: year + '年',
              align: 'center',
              minWidth: 100,
              showOverflowTooltip: true
            });
          }
        }
        return arr;
      }
    },
    methods: {
      // 初始化默认日期
      initDefaultDate() {
        const today = dayjs();
        if (this.pageName == 'dailyCollection') {
          this.queryDate = today.format('YYYY-MM-DD');
        } else if (this.pageName == 'monthlyCollection') {
          this.queryDate = today.format('YYYY-MM');
        } else if (this.pageName == 'yearlyCollection') {
          this.queryDate = today.format('YYYY');
        } else if (this.pageName == 'fullYearCollection') {
          const currentYear = today.format('YYYY');
          this.where.startYear = currentYear;
          this.where.endYear = currentYear;
        }
      },
      // 日期变化处理
      handleDateChange(val) {
        // 校验不能为空
        if (!val && this.pageName != 'fullYearCollection') {
          this.$message.warning('查询日期不能为空');
          this.initDefaultDate();
          return;
        }
        // 日期变化后重新加载表格
        this.$nextTick(() => {
          this.$refs.table.reload({ page: 1 });
        });
      },
      // 年度范围变化处理
      handleYearRangeChange() {
        // 校验不能为空
        if (!this.where.startYear || !this.where.endYear) {
          this.$message.warning('开始年度和结束年度不能为空');
          return;
        }
        // 校验 startYear 不能大于 endYear
        if (parseInt(this.where.startYear) > parseInt(this.where.endYear)) {
          this.$message.warning('开始年度不能大于结束年度');
          // 交换两个值
          const temp = this.where.startYear;
          this.where.startYear = this.where.endYear;
          this.where.endYear = temp;
        }
        this.where.startDate = this.where.startYear;
        this.where.endDate = this.where.endYear;
        // 年度范围变化后重新加载表格
        this.$nextTick(() => {
          this.$refs.table.reload({ page: 1 });
        });
      },
      // Tab切换
      activeTabChange() {
        this.categoryLevelId = '';
        this.areaId = '';
        if (this.activeTab == 'org') {
          this.categoryLevelId = this.orgTreeData[0].id;
          this.$nextTick(() => {
            this.$refs.treeRef &&
              this.$refs.treeRef.setCurrentKey(this.orgTreeData[0].id);
          });
        } else {
          this.areaId = this.treeData[0] ? this.treeData[0].id : '';
          this.$nextTick(() => {
            this.$refs.treeRef1 &&
              this.$refs.treeRef1.setCurrentKey(this.treeData[0].id);
          });
        }
        this.$refs.table.reload({ page: 1 });
      },
      // 搜索
      handleSearch() {
        // 校验日期不能为空
        if (this.pageName == 'fullYearCollection') {
          if (!this.where.startYear || !this.where.endYear) {
            this.$message.warning('开始年度和结束年度不能为空');
            return;
          }
          if (parseInt(this.where.startYear) > parseInt(this.where.endYear)) {
            this.$message.warning('开始年度不能大于结束年度');
            return;
          }
        } else {
          if (!this.queryDate) {
            this.$message.warning('查询日期不能为空');
            return;
          }
        }
        this.$refs.table.reload({ page: 1 });
      },
      // 重置
      handleReset() {
        this.where = {
          keyWord: '',
          energyClassificationCode: '',
          startDate: '',
          endDate: '',
          queryDate: '',
          queryMonth: '',
          queryYear: '',
          startYear: '',
          endYear: ''
        };
        this.initDefaultDate();
        this.$refs.table.reload({ page: 1 });
      },
      // 树节点点击
      handleNodeClick(data) {
        this.categoryLevelId = '';
        this.areaId = '';
        if (this.activeTab == 'org') {
          this.categoryLevelId = data.id;
        } else {
          this.areaId = data.id;
        }
        this.$refs.table.reload({ page: 1 });
      },
      // 表格数据源
      async datasource({ page, limit }) {
        let api = statByYearRange;

        if (this.pageName == 'dailyCollection') {
          this.where.queryDate = this.queryDate;
          api = statByDay;
        } else if (this.pageName == 'monthlyCollection') {
          this.where.queryMonth = this.queryDate;
          api = statByMonth;
        } else if (this.pageName == 'yearlyCollection') {
          this.where.queryYear = this.queryDate;
          api = statByYear;
        }

        let res = await api({
          pageNum: page,
          size: limit,
          ...this.where,
          areaId: this.areaId,
          categoryLevelId: this.categoryLevelId
        });
        if (this.pageName == 'fullYearCollection') {
          if (res.list.length) {
            res.list = res.list[0].dataList.map((item) => {
              let data = {
                substanceName: item.substanceName,
                energyClassificationName: item.energyClassificationName
              };
              for (let key in item.yearDataMap) {
                data[key] = item.yearDataMap[key] || '';
              }
              return data;
            });
          }
        }
        console.log(res, 'res');

        return res;
      },

      // 刷新表格
      reloadTable() {
        this.$refs.table.reload();
      }
    }
  };
</script>

<style lang="scss" scoped>
  .energy-monitoring {
    .monitoring-card {
      height: calc(100vh - 100px);

      ::v-deep .el-card__body {
        height: 100%;
        padding: 15px;
      }
    }

    ::v-deep .ele-split-layout {
      .ele-split-layout-left {
        padding: 0;
        background: transparent;
        border: none;
      }

      .ele-split-layout-right {
        padding: 0;
      }

      .ele-split-layout-trigger {
        width: 8px;
        background: #f0f0f0;
        border-left: 1px solid #e0e0e0;
        border-right: 1px solid #e0e0e0;

        &:hover {
          background: #d0d0d0;
        }

        .ele-split-layout-trigger-icon {
          color: #909399;
        }
      }
    }

    .left-sidebar {
      height: 100%;

      ::v-deep .el-tabs--border-card {
        box-shadow: none;
        border: 1px solid #ebeef5;
        height: 100%;

        .el-tabs__header {
          background-color: #f5f7fa;
          border-bottom: 1px solid #ebeef5;
          margin: 0;

          .el-tabs__nav {
            width: 100%;
            display: flex;
          }

          .el-tabs__item {
            flex: 1;
            height: 39px;
            line-height: 39px;
            font-size: 13px;
            padding: 0;
            text-align: center;

            &.is-active {
              background-color: #fff;
              border-bottom-color: #fff;
            }
          }
        }

        .el-tabs__content {
          padding: 10px;
          height: calc(100% - 40px);
          overflow-y: auto;
        }
      }

      ::v-deep .el-tree {
        padding: 0;
      }
    }

    .right-content {
      flex: 1;
      min-width: 0;
      padding-left: 15px;

      .search-area {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
        padding-bottom: 10px;
        border-bottom: 1px solid #ebeef5;

        .view-switch {
          margin-left: 20px;
          flex-shrink: 0;
        }
      }

      .update-time {
        font-size: 12px;
        color: #000000;
        margin-bottom: 10px;
      }

      .list-view {
        // height: calc(100vh - 260px);

        ::v-deep .ele-pro-table {
          .el-table {
            border: 1px solid #ebeef5;
            border-radius: 4px;
          }
        }
      }
    }
  }
</style>