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-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);
  }
}

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

<style lang="less" scoped>
.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 #3ad8ff77 !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 #3ad8ff77 !important;
  background-color: #ffffff00 !important;
}

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