SaaS-lib/hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionStatistics/carbonEmissions/index.vue

<template>
  <div style="height: 100%">
    <a-table
      v-if="data && data.length > 0"
      :columns="column"
      :data-source="data"
      :bordered="true"
      :pagination="false"
      :scroll="{ x: 1700 }">
      <template #title>
        <a-date-picker
          v-model:value="selectYear"
          @change="changeYearData"
          picker="year"
          valueFormat="YYYY" />
        <span style="margin-left: 30px">
          <a-button type="primary" ghost @click="reset">重置</a-button>
          <a-button type="primary" style="margin-left: 6px" @click="clickSelect">搜索</a-button>
        </span>
      </template>
      <template #bodyCell="{ column, text, record }">
        <template v-if="column.dataIndex === 'averageFactorValue'">
          <span v-if="record.averageFactorValue !== undefined">
            {{ record.averageFactorValue + record.measurement + '/' + record.unitName }}
          </span>
          <span v-else>
            {{ '-' }}
          </span>
        </template>
        <span v-else>{{ text || '-' }}</span>
      </template>
    </a-table>
    <a-empty
      v-else
      style="
        width: 100%;
        height: 100%;
        justify-content: center;
        display: flex;
        align-items: center;
        flex-direction: column;
      " />
    <!-- <a-pagination
      :current="queryParams.pageNum"
      :total="total"
      :page-size="queryParams.pageSize"
      style="display: flex; justify-content: center; margin-top: 16px"
      :show-size-changer="true"
      :show-quick-jumper="true"
      @change="onChange" /> -->
  </div>
</template>
<script lang="ts" setup>
  import { ref, defineExpose } from 'vue';
  import { http } from '/nerv-lib/util/http';
  import { Pagination } from 'ant-design-vue';
  import dayjs, { Dayjs } from 'dayjs';
  import { carbonEmission } from '/@/api/carbonEmissionFactorLibrary';
  defineOptions({
    energyType: 'CarbonEmissions', // 与页面路由name一致缓存才可生效
    components: {
      'a-pagination': Pagination,
    },
  });
  const orgId = ref('');
  const result = JSON.parse(sessionStorage.getItem('ORGID')!);
  orgId.value = result;
  const fetch = (api, params = { orgId }) => {
    return http.post(api, params);
  };
  const data = ref([]);
  const selectYear = ref<Dayjs>(dayjs(new Date().getFullYear().toString()));
  const total = ref<number>();
  const queryParams = ref({
    pageNum: 1,
    pageSize: 10,
    year: selectYear.value.format('YYYY'),
    orgId: orgId.value,
  });

  // 年份选择改变触发
  const changeYearData = () => {
    queryParams.value.year = selectYear.value;
  };
  const clickSelect = () => {
    getTableList();
  };
  const reset = () => {
    selectYear.value = dayjs(new Date().getFullYear().toString());
    queryParams.value.year = selectYear.value.format('YYYY');
    getTableList();
  };
  // 表头
  const column: TableColumnsType[] = [
    {
      title: '排放类型',
      dataIndex: 'cnValue',
      width: 100,
      align: 'center',
      customCell: (record, rowIndex) => {
        if (rowIndex == undefined) {
          return {
            rowSpan: 0,
            colSpan: 0,
          };
        }
        const rowSpan = getRowSpan('cnValue', record, data.value);
        if (rowIndex != 0 && data.value[rowIndex - 1].cnValue == record.cnValue) {
          return {
            rowSpan: 0,
            colSpan: 0,
          };
        }
        return {
          rowSpan: rowSpan,
        };
      },
    },
    {
      title: '能源种类',
      dataIndex: 'energyType',
      width: 100,
      align: 'center',
    },
    {
      title: '计量单位',
      dataIndex: 'measurement',
      width: 100,
      align: 'center',
    },
    {
      title: '加权平均',
      dataIndex: 'averageFactorValue',
      width: 100,
      align: 'center',
    },
    {
      title: '全年',
      dataIndex: 'carbonYearly',
      width: 100,
      align: 'center',
    },
    {
      title: '1月',
      dataIndex: 'jan',
      width: 100,
      align: 'center',
    },
    {
      title: '2月',
      dataIndex: 'feb',
      width: 100,
      align: 'center',
    },
    {
      title: '3月',
      dataIndex: 'mar',
      width: 100,
      align: 'center',
    },
    {
      title: '4月',
      dataIndex: 'apr',
      width: 100,
      align: 'center',
    },
    {
      title: '5月',
      dataIndex: 'may',
      width: 100,
      align: 'center',
    },
    {
      title: '6月',
      dataIndex: 'jun',
      width: 100,
      align: 'center',
    },
    {
      title: '7月',
      dataIndex: 'jul',
      width: 100,
      align: 'center',
    },
    {
      title: '8月',
      dataIndex: 'aug',
      width: 100,
      align: 'center',
    },
    {
      title: '9月',
      dataIndex: 'sep',
      width: 100,
      align: 'center',
    },
    {
      title: '10月',
      dataIndex: 'oct',
      width: 100,
      align: 'center',
    },
    {
      title: '11月',
      dataIndex: 'nov',
      width: 100,
      align: 'center',
    },
    {
      title: '12月',
      dataIndex: 'dece',
      width: 100,
      align: 'center',
    },
  ];
  // 合并单元格
  const getRowSpan = (dataIndex: string, record: any, data: any, dependents: string[] = []) => {
    let rowSpan = 1;
    for (let i = data.indexOf(record) + 1; i < data.length; i++) {
      let shouldMerge = true;
      for (const dependent of dependents) {
        if (data[i][dependent] !== record[dependent]) {
          shouldMerge = false;
          break;
        }
      }
      if (shouldMerge && data[i][dataIndex] === record[dataIndex]) {
        rowSpan++;
      } else {
        break;
      }
    }
    return rowSpan;
  };
  // 获取表格数据
  const getTableList = () => {
    fetch(carbonEmission.carbonEmissionStatistics, queryParams.value).then((res) => {
      data.value = res.data;
      total.value = res.data.length;
    });
  };
  defineExpose({
    getTableList,
  });
  // 分页器
  const onChange = (pageNumber: number, size: number) => {
    queryParams.value.pageNum = pageNumber;
    queryParams.value.pageSize = size;
    getTableList();
  };
</script>
<style scoped lang="less">
  :deep(.ant-table-title) {
    display: flex;
  }
  :deep(.ant-table-container) {
    margin: 0px 16px;
  }
  :deep(.ant-table-container) {
    height: 64vh;
    overflow: auto;
  }
  // :deep(.ant-table-cell) {
  //   border: 1px solid #f0f0f0;
  // }
  // :deep(.ant-table-cell::before) {
  //   display: none;
  // }
</style>
<style scoped>
  th.column-money,
  td.column-money {
    text-align: right !important;
  }
  .custom-cell {
    display: flex;
    align-items: center;
    padding: 8px;
  }
</style>