mky-vent-base/src/views/vent/gas/gasReport/index.vue

<template>
  <div class="gasReport">
    <customHeader>通风瓦斯日报管理</customHeader>
    <div class="report-container">
      <div class="search-area">
        <a-row>
          <a-col :span="4">
            <div class="area-item">
              <div class="item-text">填报日期：</div>
              <a-date-picker
                style="width: 220px"
                :showTime="false"
                valueFormat="YYYY-MM-DD"
                v-model:value="searchData.reportTime"
                placeholder="请选择填报日期"
                @change="onChange"
              />
            </div>
          </a-col>
          <!-- <a-col :span="4">
            <div class="area-item">
              <div class="item-text">区队：</div>
              <a-select v-model:value="searchData.districtTeam" style="width: 220px" placeholder="请选择区队">
                <a-select-option v-for="item in qdList" :key="item" :value="item.value">{{ item.label
                  }}</a-select-option>
              </a-select>
            </div>
          </a-col> -->
          <a-col :span="4">
            <div class="area-item">
              <div class="item-text">上报人：</div>
              <a-input style="width: 220px" v-model:value="searchData.sbr" placeholder="请输入上报人" />
            </div>
          </a-col>
          <a-col :span="4">
            <div class="area-item">
              <div class="item-text">上报地点：</div>
              <a-select v-model:value="searchData.strInstallPos" style="width: 220px" placeholder="请选择上报地点">
                <a-select-option v-for="item in addressList" :key="item" :value="item.value">{{ item.label }}</a-select-option>
              </a-select>
            </div>
          </a-col>

          <a-button type="primary" preIcon="ant-design:search-outlined" @click="getSearch">查询</a-button>
          <a-button preIcon="ant-design:sync-outlined" style="margin: 0px 15px" @click="onReset">重置</a-button>
          <a-button type="primary" preIcon="ant-design:download-outlined" @click="getExport">导出日报表</a-button>
          <a-button type="primary" preIcon="ant-design:download-outlined" @click="getExport1" style="margin: 0px 15px">导出瓦斯三对照报表</a-button>
          <a-dropdown>
            <template #overlay>
              <a-menu @click="handleMenuClick">
                <a-menu-item key="1">
                  <UserOutlined />
                  夜班
                </a-menu-item>
                <a-menu-divider />
                <a-menu-item key="2">
                  <UserOutlined />
                  早班
                </a-menu-item>
                <a-menu-divider />
                <a-menu-item key="3">
                  <UserOutlined />
                  中班
                </a-menu-item>
              </a-menu>
            </template>
            <a-button type="primary">
              导出班报表
              <DownOutlined />
            </a-button>
          </a-dropdown>
        </a-row>
      </div>
      <a-table :columns="columns" :data-source="tableData" :scroll="{ y: 500 }" class="tableW" :pagination="pagination" @change="pageChange">
        <template #bodyCell="{ column, text }"></template>
      </a-table>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted, computed, reactive } from 'vue';
  import { columns } from './gas-report.data';
  import { getGasAddressList, getList, expComReportByParam } from './gas-report.api';
  import customHeader from '/@/components/vent/customHeader.vue';
  import { message } from 'ant-design-vue';
  import dayjs from 'dayjs';

  let searchData = reactive({
    reportTime: dayjs().format('YYYY-MM-DD'),
    districtTeam: '',
    sbr: '',
    strInstallPos: '',
  });
  let qdList = reactive<any[]>([]); //区队下拉列表
  let addressList = reactive<any[]>([]); //上报地点下拉列表
  let pagination = reactive({
    current: 1, // 当前页码
    pageSize: 10, // 每页显示条数
    total: 0, // 总条目数，后端返回
    // showTotal: (total, range) => `${range[0]}-${range[1]} 条，总共 ${total} 条`, // 分页右下角显示信息
    showSizeChanger: true, // 是否可改变每页显示条数
    pageSizeOptions: ['10', '20', '50'], // 可选的每页显示条数
  });
  let tableData = ref<any[]>([]);

  function onChange(val, time) {
    searchData.reportTime = time;
  }
  //获取日报列表数据
  async function getTableList() {
    let res = await getList({ pageNo: pagination.current, pageSize: pagination.pageSize, ...searchData });
    console.log(res, '瓦斯日报列表数据-----------');
    tableData.value = res.records;
    pagination.total = res.total;
  }
  //查询
  function getSearch() {
    pagination.current = 1;
    getTableList();
  }
  //重置
  function onReset() {
    pagination.current = 1;
    searchData.districtTeam = '';
    searchData.reportTime = '';
    searchData.strInstallPos = '';
    searchData.sbr = '';
    getTableList();
  }
  //分页切换
  function pageChange(val) {
    pagination.current = val.current;
    pagination.pageSize = val.pageSize;
    getTableList();
  }
  function uniqueObjectsArray(arr) {
    const map = new Map();
    return arr.filter((item) => {
      const key = JSON.stringify(item);
      const isNew = !map.has(key);
      map.set(key, item);
      return isNew;
    });
  }
  //获取安装位置下拉选项
  async function getSelectList() {
    let res = await getGasAddressList({ devicekind: 'gasDayReport' });
    console.log(res, '区队下拉选项--------');
    qdList.length = 0;
    addressList.length = 0;
    if (res.length != 0) {
      res.forEach((el) => {
        qdList.push({ label: el.devgroup_dictText, value: el.devgroup_dictText });
        addressList.push({ label: el.strinstallpos, value: el.strinstallpos });
      });
      qdList = uniqueObjectsArray(qdList);
    }
  }
  //导出报表
  async function getExport() {
    if (searchData.reportTime) {
      let res = await expComReportByParam({ tempName: 'wsrb', reportTime: searchData.reportTime });
      console.log(res, '导出------------');
      let filename = searchData.reportTime + '.xlsx';
      downFilePublic(res, filename);
    } else {
      message.warning('请选择需要导出数据的填报日期!');
    }
  }
  //导出三对照报表
  async function getExport1() {
    if (searchData.reportTime) {
      let res = await expComReportByParam({ tempName: 'wssdz', reportTime: searchData.reportTime });
      console.log(res, '导出------------');
      let filename = searchData.reportTime + '.xlsx';
      downFilePublic(res, filename);
    } else {
      message.warning('请选择需要导出数据的填报日期!');
    }
  }

  // 下载公用方法
  function downFilePublic(content, fileName) {
    const blob = new Blob([content], { type: 'application/xlsx;charset=UTF-8' }); // 构造一个blob对象来处理数据
    // 对于<a>标签，只有 Firefox 和 Chrome（内核） 支持 download 属性
    // IE10以上支持blob但是依然不支持download
    if ('download' in document.createElement('a')) {
      // 支持a标签download的浏览器
      const link = document.createElement('a'); // 创建a标签
      link.download = fileName; // a标签添加属性
      link.style.display = 'none';
      link.href = URL.createObjectURL(blob);
      document.body.appendChild(link);
      link.click(); // 执行下载
      URL.revokeObjectURL(link.href); // 释放url
      document.body.removeChild(link); // 释放标签
    } else {
      // 其他浏览器
      navigator.msSaveBlob(blob, fileName);
    }
  }
  //下拉选项切换
  function handleMenuClick(val) {
    console.log(val, 'val--------');
    switch (val.key) {
      case '1':
        break;
      case '2':
        break;
      case '3':
        break;
    }
  }

  onMounted(() => {
    getSelectList();
    getTableList();
  });
</script>

<style lang="less" scoped>
  @import '/@/design/theme.less';

  .gasReport {
    width: 100%;
    height: 100%;
    padding: 80px 10px 15px 10px;
    box-sizing: border-box;
    position: relative;

    .search-area {
      margin: 20px 0px;

      .area-item {
        display: flex;
        align-items: center;

        .item-text {
          color: #fff;
        }
      }
    }

    .zxm-picker,
    .zxm-input {
      border: 1px solid var(--vent-form-item-border) !important;
      background-color: #ffffff00 !important;
      color: #fff !important;
    }
  }

  :deep(.zxm-table-thead > tr > th:last-child) {
    border-right: 1px solid #91e9fe !important;
  }

  :deep(.zxm-picker-input > input) {
    color: #fff;
  }

  :deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
    border: 1px solid var(--vent-form-item-border) !important;
    background-color: #ffffff00 !important;
  }

  :deep(.zxm-select-selection-item) {
    color: #fff !important;
  }
</style>