SaaS-lib/hx-ai-intelligent/src/view/monitor/environmentMonitor/averageData/index.vue

<!-- eslint-disable vue/v-on-event-hyphenation -->
<template>
  <div>
    <a-table :columns="tableColumns" :data-source="data" bordered :pagination="false">
      <template #title>
        <div
          style="display: flex; align-items: center; justify-content: space-between; width: 100%">
          <div style="display: flex; align-items: center; width: 85%">
            <div style="width: 10%">数据报表</div>

            <a-select
              v-model:value="frequencyValue"
              placeholder="请选择频率"
              style="width: 17%; margin-left: 10px"
              :options="frequencyOptions" />
            <!-- <a-date-picker style="width: 13%; margin-left: 10px" v-model:value="timeValue" /> -->
            <a-range-picker
              :value="hackValue || dateRange"
              :disabled-date="disabledDate"
              @change="onChangeDate"
              @openChange="onOpenChange"
              @calendarChange="onCalendarChange"
              style="width: 17%; margin-left: 10px"
              :placeholder="['请选择日期', '请选择日期']" />
            <a-button type="primary" style="margin-left: 10px" @click="getSelect"> 查询 </a-button>
          </div>
          <a-button type="primary"> 导出 </a-button>
        </div>
      </template>
    </a-table>
    <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, onMounted } from 'vue';
  // import { http } from '/nerv-lib/util/http';
  import { Pagination, SelectProps, TreeSelectProps, TableColumnType } from 'ant-design-vue';
  import { tableColumns } from './config';
  import type { Dayjs } from 'dayjs';
  // import { energyConsumption } from '/@/api/carbonEmissionFactorLibrary';
  defineOptions({
    energyType: 'AverageData', // 与页面路由name一致缓存才可生效
    components: {
      'a-pagination': Pagination,
    },
  });

  const typeList = ref();
  // 采集频率
  const frequencyValue = ref<string | undefined>();

  // 采集频率list
  const frequencyOptions = ref<SelectProps['options']>([]);

  const treeData2 = ref<TreeSelectProps['treeData']>([]);
  const data = ref([]);
  // let tableColumns = ref<TableColumnType[]>([]);

  const total = ref<number>();
  const queryParams = ref({
    pageNum: 1,
    pageSize: 10,
  });
  const orgId = ref('');
  const result = JSON.parse(sessionStorage.getItem('ORGID')!);
  orgId.value = result;

  type RangeValue = [Dayjs, Dayjs];
  const dates = ref<RangeValue>();
  const hackValue = ref<RangeValue>();
  const dateRange = ref<[Dayjs, Dayjs] | undefined>();

  const onChangeDate = (val: RangeValue) => {
    dateRange.value = val;
  };
  const onOpenChange = (open: boolean) => {
    if (open) {
      dates.value = [] as any;
      hackValue.value = [] as any;
    } else {
      hackValue.value = undefined;
    }
  };
  const disabledDate = (current: Dayjs) => {
    if (!dates.value || (dates.value as any).length === 0) {
      return false;
    }
    const tooLate = dates.value[0] && current.diff(dates.value[0], 'days') > 2;
    const tooEarly = dates.value[1] && dates.value[1].diff(current, 'days') > 2;
    return tooEarly || tooLate;
  };
  const onCalendarChange = (val: RangeValue) => {
    dates.value = val;
  };
  // 获取表格数据
  const getTableList = () => {
    // fetch(energyConsumption.pageList, queryParams.value).then((res) => {
    //   data.value = res.data.records;
    //   total.value = res.data.total;
    // });
  };
  onMounted(() => {
    frequencyOptions.value = [
      {
        value: '1',
        label: '30分钟',
      },
      {
        value: '2',
        label: '小时',
      },
      {
        value: '3',
        label: '天',
      },
      {
        value: '4',
        label: '月',
      },
      {
        value: '5',
        label: '年',
      },
    ];
    typeList.value = [
      {
        id: 1,
        value: '温度',
      },
      {
        id: 2,
        value: 'CO2浓度',
      },
      {
        id: 3,
        value: 'PM2.5',
      },
      {
        id: 4,
        value: '光照度',
      },
      {
        id: 5,
        value: 'TVOC',
      },
      {
        id: 6,
        value: '湿度',
      },
    ];
    treeData2.value = [
      {
        label: '办公区',
        value: '0-0',
        children: [
          {
            label: '办公一区',
            value: '0-0-0',
          },
          {
            label: '办公二区',
            value: '0-0-1',
          },
          {
            label: '办公三区',
            value: '0-0-2',
          },
          {
            label: '办公四区',
            value: '0-0-3',
          },
        ],
      },
      {
        label: '站厅',
        value: '0-1',

        children: [
          {
            label: '站厅一区',
            value: '0-1-0',
            // disabled: true,
          },
          {
            label: '站厅二区',
            value: '0-1-1',
          },
          {
            label: '站厅三区',
            value: '0-1-2',
          },
          {
            label: '站厅四区',
            value: '0-1-3',
          },
        ],
      },
    ];
    // let tableColumnsB = [
    //   {
    //     title: '1:00',
    //     dataIndex: '1:00',
    //   },
    //   {
    //     title: '2:00',
    //     dataIndex: '2:00',
    //   },
    //   {
    //     title: '3:00',
    //     dataIndex: '3:00',
    //   },
    //   {
    //     title: '4:00',
    //     dataIndex: '4:00',
    //   },
    // ];
    // let columnA: any[] = [...tableColumnsA];
    // columnA.push(...tableColumnsB);
    // tableColumns.value = columnA;
  });

  getTableList();
  // 分页器
  const onChange = (pageNumber: number, size: number) => {
    queryParams.value.pageNum = pageNumber;
    queryParams.value.pageSize = size;
    getTableList();
  };
</script>
<style scoped lang="less">
  ::v-deep .ant-table-title {
    display: flex;
  }
  ::v-deep .ant-table-container {
    padding: 0px 16px;
  }
</style>
<style scoped>
  th.column-money,
  td.column-money {
    text-align: right !important;
  }
</style>