jczxw-java/src/views/water/lake/statistic/special/component/comparison.vue

<!--年度对比-->
<template>
  <div class="ele-body">
    <a-card :bordered="false">
      <!-- 搜索表单 -->
    <search :searchForm="searchForm" :filterKeys="filterKeys" @search="searchData" @exportFile="exportFile" @filterColumns="changeFilter" :visiable="visiable"/>
      <!-- 表格 -->
      <ele-pro-table
        ref="table"
        :datasource="datasource"
        :columns="columns"
        :where="where"
        :loading="loading"
        :scroll="{ x: 'max-content' }"
        @done="(d) => (data = d.data)"
      >
      </ele-pro-table>
    </a-card>
  </div>
  <!-- 编辑弹窗 -->
</template>

<script>
import XLSX from "xlsx";
// import { pageLakeUrl, getColumnOptions } from "@/api/ecology/lake";
import {specialYearContrastData} from "@/api/ecology/new-lake";
import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
import Search from "./search.vue";
export default {
  name: "lakeLibraryInnerCity",
  components: {
    Search,
  },
  props: {
    // 表格搜索条件
    searchForm: {
      typeof: Object,
      default: function () {
        return {};
      },
    },
    filterKeys:{
        typeof:Object,
        default: function () {
            return []
        },
    },
      visiable:{
          typeof:Boolean
      }
  },
  data() {
    return {
      data: [],
      locale,
      bill: {},
      // 表格数据接口
      datasource: [],
      selection: [],
      // 表格列配置
      columns: [
        // { title: "类别", dataIndex: "type", sorter: true },
        // { title: "点位名称", dataIndex: "pointName", sorter: true },
        // {
        //   title: "2020年",
        //   children: [
        //     { title: "水质类别", dataIndex: "remark", sorter: true },
        //     { title: "综合营养状态指数", dataIndex: "remark", sorter: true },
        //     { title: "级别", dataIndex: "remark", sorter: true },
        //     {
        //       title: "超标项目（超标倍数）",
        //       dataIndex: "remark",
        //       sorter: true,
        //     },
        //   ],
        // },

        // {
        //   title: "2021年",
        //   children: [
        //     { title: "水质类别", dataIndex: "remark", sorter: true },
        //     { title: "综合营养状态指数", dataIndex: "remark", sorter: true },
        //     { title: "级别", dataIndex: "remark", sorter: true },
        //     {
        //       title: "超标项目（超标倍数）",
        //       dataIndex: "remark",
        //       sorter: true,
        //     },
        //   ],
        // },
      ],
      //扁平化表头，用于导出的数据组装
      sColumns:[],
      palceOptions: [],
      areaOptions: [],
      regionLevelOptions: [],
      where: {},
      // 表格选中数据
      selectionList: [],
      loading:false
    };
  },
  mounted() {
    // this.loadOptionData();
  },
  methods: {
            // 传上父级
    changeFilter(data){
        this.$emit('changeFilter',data)
    },
    // 执行搜索
    searchData(data) {
      this.where = data;
      this.$emit("search", this.where);
      this.reload();
    },


    // 获取列表数据
    getPageData(){
      this.loading = true;
        specialYearContrastData(this.where).then(res=>{
          this.loading = false;
            if(res.data.code){
                this.$message.error(res.data.msg);
                this.datasource = []
            }else{
                // this.datasource = res.data.data
                this.filterData(res.data.data)
            }
        }).catch(()=>{
                 this.loading = false;
            })
    },

    // 格式化数据
    filterData(data){
      let filterData = []
      let addCloumns = []
      let addSCloumns = []
      if(Array.isArray(data)){

        data.forEach((item,index)=>{
            filterData[index] = {}
          filterData[index].type = item.type;
          filterData[index].pointName = item.pointName;

          // 筛选出年份
          if(Array.isArray(item.data)){
            item.data.forEach((single)=>{
              // 生成格式化数据
              filterData[index]['comprehensiveNutrition'+single.year] = single.comprehensiveNutrition;
              filterData[index]['level'+single.year] = single.level;
              filterData[index]['overflow'+single.year] = single.overflow;
              filterData[index]['waterType'+single.year] = single.waterType;
              filterData[index]['year'+single.year] = single.year;

              // 只拿第一条数据的年份做循环生成表头
              if(index==0){
                // 生成导出用的扁平化表头
                addSCloumns = [...addSCloumns, {dataIndex: `waterType${single.year}`},
                    { dataIndex: `comprehensiveNutrition${single.year}`},
                    {dataIndex: `level${single.year}`},
                    {dataIndex: `overflow${single.year}`}]

                // 页面展示所需表头
                addCloumns[single.year] = {}
                addCloumns[single.year].title = single.year
                addCloumns[single.year].align = 'center'
                addCloumns[single.year].children = [
                  { title: "水质类别", dataIndex: `waterType${single.year}`, sorter: true,align:'center' },
                  { title: "综合营养状态指数", dataIndex: `comprehensiveNutrition${single.year}`, sorter: true,align:'center' },
                  { title: "级别", dataIndex: `level${single.year}`, sorter: true,align:'center' },
                  {
                    title: "超标项目（超标倍数）",
                    align:'center',
                    dataIndex: `overflow${single.year}`,
                    sorter: true,
                  },
                ]
              }
             
            })
          }

        })
      }
      this.columns = [
      //       {
      //   key: 'index',
      //   dataIndex: 'index',
      //   width: 48,
      //   align: 'center',
      //   customRender: ({index}) => index + 1
      // },
        { title: "类别", dataIndex: "type", sorter: true },
        { title: "点位名称", dataIndex: "pointName", sorter: true},
        ...addCloumns
      ]
      this.sColumns = [
        {dataIndex: "type"},
        {dataIndex: "pointName"},
        ...addSCloumns
      ]
      this.datasource = filterData;

    },

    /* 刷新表格 */
    reload() {
      this.getPageData()
      // this.$refs.table.reload({
      //   where: this.where,
      // });
    },
    /* 重置搜索 */
    reset() {
      this.where = {
        checked: 1,
      };
      this.reload();
    },
    exportFile() {
      const columns = this.columns;
      const arr = [];
      // const th = columns.map((item) => item.title);
      // arr.push(th);

      let th1 = []
      let th2 = []
      columns.forEach(item=>{
        
       
        if(Array.isArray(item.children) && item.children.length>0){
          item.children.forEach(single=>{
            th1.push(item.title)
            th2.push(single.title)
          })
        }else{
          th1.push(item.title)
            th2.push('')
        }
      })

      arr.push(th1)
      arr.push(th2)
      this.datasource.forEach((d) => {
        const td = this.sColumns.map((item) => d[item.dataIndex]);
        arr.push(td);
      });
      let sheet = XLSX.utils.aoa_to_sheet(arr);
      this.$util.exportSheet(XLSX, sheet, new Date().getTime().toString());
    }
  },
};
</script>

<style scoped lang="less">
td{
    text-align: center;
}
</style>