kd-aiot-frontend-ems/src/views/energyConsumptionStatistics/index.vue

<template>
  <div class="energy-statistics">
    <el-card shadow="never" class="statistics-card">
      <!-- 主内容区 -->
      <ele-split-layout
        width="220px"
        allow-collapse
        :right-style="{ overflow: 'hidden' }"
      >
        <!-- 左侧树形菜单 -->
        <left-sidebar
          ref="leftSidebarRef"
          :active-tab.sync="activeTab"
          @tab-change="activeTabChange"
          @node-click="handleNodeClick"
          @first-node="handleFirstNode"
        />

        <!-- 右侧内容区 -->
        <template v-slot:content>
          <div class="right-content">
            <!-- 搜索区域 -->
            <div class="search-area">
              <seek-page
                :seekList="seekList"
                @search="handleSearch"
                @reset="handleReset"
                :maxLength="4"
                style="flex: 1"
              ></seek-page>
            </div>

            <!-- 列表视图 -->
            <div class="list-view">
              <ele-pro-table
                ref="table"
                row-key="id"
                :columns="columns"
                :datasource="datasource"
                :cache-key="cacheKeyUrl"
                :initLoad="false"
                autoAmendPage
                height="calc(100vh - 300px)"
              >
                <template v-slot:type="{ row }">
                  {{ getTypeText(row.type) }}
                </template>
                <template v-slot:energyType="{ row }">
                  {{ getEnergyTypeText(row.energyType) }}
                </template>
                <template v-slot:timeRange="{ row }">
                  {{ row.startTime }} 至 {{ row.endTime }}
                </template>
                <template v-slot:action="{ row }">
                  <el-link
                    type="primary"
                    :underline="false"
                    @click="handleView(row)"
                  >
                    查看
                  </el-link>
                </template>
              </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 { getPage } from '@/api/energyConsumptionStatistics/index.js';
  import { energyConsumingUnitList } from '@/enum/dict.js';
  import LeftSidebar from './components/LeftSidebar.vue';

  export default {
    mixins: [dictMixins, tableColumnsMixin],
    components: {
      LeftSidebar
    },
    data() {
      return {
        // 搜索表单
        searchForm: {
          energyType: '',
          meterType: '',
          keyword: '',
          timeRange: []
        },
        // 当前激活的标签页
        activeTab: 'org',
        areaId: '',
        categoryLevelId: '',
        substanceId: '',
        // 表格列配置
        columns: [
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            fixed: 'left'
          },
          {
            prop: 'substanceCode',
            label: '表计设备编码',
            align: 'center',
            minWidth: 150,
            showOverflowTooltip: true
          },
          {
            prop: 'substanceName',
            label: '表计设备名称',
            align: 'center',
            minWidth: 150,
            showOverflowTooltip: true
          },
          {
            prop: 'meterEquipmentNumber',
            label: '表计设备编号',
            align: 'center',
            minWidth: 150,
            showOverflowTooltip: true
          },
          {
            prop: 'meterType',
            label: '表计类型',
            align: 'center',
            minWidth: 100,
            formatter: (_row, _column, cellValue) => {
              return this.getDictValue('表计类型', _row.meterType);
            },
            showOverflowTooltip: true
          },
          {
            prop: 'correlationSubstanceName',
            label: '关联设备',
            align: 'center',
            minWidth: 120,
            showOverflowTooltip: true
          },
          {
            prop: 'areaName',
            label: '区域',
            align: 'center',
            minWidth: 150,
            showOverflowTooltip: true
          },
          {
            prop: 'energyClassificationName',
            label: '用能分类',
            align: 'center',
            minWidth: 100,
            showOverflowTooltip: true
          },
          {
            prop: 'energyTypeName',
            label: '能源名称',

            align: 'center',
            minWidth: 120,
            showOverflowTooltip: true
          },
          {
            prop: 'meterReadingMethod',
            label: '数据来源',
            align: 'center',
            formatter: (_row, _column, cellValue) => {
              return _row.meterReadingMethod == 1 ? '手动录入' : '自动采集';
            },
            minWidth: 120,
            showOverflowTooltip: true
          },
          {
            prop: 'lastMeterReadingTime',
            label: '上期抄表时间',
            align: 'center',
            minWidth: 180,
            showOverflowTooltip: true
          },
          {
            prop: 'currentMeterReadingTime',
            label: '本期抄表时间',
            align: 'center',
            minWidth: 180,
            showOverflowTooltip: true
          },
          {
            prop: 'currentUsage',
            label: '本期用量',
            align: 'center',
            minWidth: 120,
            showOverflowTooltip: true
          },
          {
            prop: 'unit',
            label: '单位',
            align: 'center',
            minWidth: 80,
            showOverflowTooltip: true
          },
          {
            prop: 'unitPrice',
            label: '单价',
            align: 'center',
            minWidth: 80,
            showOverflowTooltip: true
          },
          {
            prop: 'total',
            label: '价格单位',
            align: 'center',
            minWidth: 120,
            formatter: (row) => {
              return energyConsumingUnitList
                .find((item) => item.value == row.energyClassificationCode)
                ?.priceUnit.find((item) => item.value == row.priceUnit)?.label;
            },
            showOverflowTooltip: true
          },
          {
            prop: 'currentExpenses',
            label: '本期费用（元',
            align: 'center',
            minWidth: 130,
            showOverflowTooltip: true
          }
        ],
        cacheKeyUrl: 'ems-energy-statistics-list'
      };
    },
    computed: {
      seekList() {
        return [
          {
            label: '关键词',
            value: 'keyword',
            type: 'input',
            placeholder: '表计编码、名称、编号'
          },
          {
            label: '用能分类',
            value: 'energyClassificationCode',
            type: 'select',
            placeholder: ' ',
            planList: energyConsumingUnitList
          },
          {
            label: '抄表方式',
            value: 'meterReadingMethod',
            type: 'select',
            placeholder: ' ',
            planList: [
              { label: '自动采集', value: 0 },
              { label: '手动录入', value: 1 }
            ]
          },
          {
            label: '抄表时间',
            value: 'createTime',
            type: 'date',
            width: 300,
            valueAr: [
              'currentMeterReadingTimeStart',
              'currentMeterReadingTimeEnd'
            ]
          }
        ];
      }
    },
    created() {
      // 数据在 LeftSidebar 组件内部获取
    },
    methods: {
      activeTabChange() {
        this.categoryLevelId = '';
        this.areaId = '';
        this.substanceId = '';
        // Tab切换时重置条件，由用户手动选择节点或使用默认
        this.$refs.table.reload({ page: 1 });
      },

      // 处理第一个节点（由 LeftSidebar 组件加载完成后触发）
      handleFirstNode(data) {
        this.handleNodeClick(data);
      },

      // 搜索
      handleSearch(where) {
        this.searchForm = { ...where };
        this.$refs.table.reload({ page: 1 });
      },
      // 重置
      handleReset() {
        this.searchForm = {
          energyType: '',
          meterType: '',
          keyword: '',
          timeRange: []
        };
        this.$refs.table.reload({ page: 1 });
      },
      // 树节点点击
      handleNodeClick(data) {
        this.categoryLevelId = '';
        this.substanceId = '';
        this.areaId = '';
        if (this.activeTab == 'org') {
          if (data.nodeType == 'instance') {
            this.substanceId = data.id;
          } else {
            this.categoryLevelId = data.id;
          }
        } else {
          this.areaId = data.id;
        }
        this.$refs.table.reload({ page: 1 });
      },
      // 表格数据源
      async datasource({ page, limit, where }) {
        return await getPage({
          pageNum: page,
          size: limit,
          ...where,
          ...this.searchForm,
          areaId: this.areaId,
          categoryLevelId: this.categoryLevelId,
          substanceId:this.substanceId
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
  .energy-statistics {
    .statistics-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;
      }

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