jczxw-java/src/views/sound/function/statistic/junzhi.vue

<template>
  <div class="">
    <!-- 搜索表单 -->
    <a-form
      :model="where"
      :label-col="{ md: { span: 6 }, sm: { span: 24 } }"
      :wrapper-col="{ md: { span: 18 }, sm: { span: 24 } }"
    >
      <a-row>
        <a-col :lg="6" :md="12" :sm="24" :xs="24">
          <a-form-item label="年份">
            <a-select v-model:value="where.year">
              <a-select-option v-for="item in yearOptions" :key="item.value">{{
                item.label
              }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :lg="6" :md="12" :sm="24" :xs="24">
          <a-form-item label="季度">
            <a-select v-model:value="where.quarter" allowClear>
              <a-select-option value="1">第一季度</a-select-option>
              <a-select-option value="2">第二季度</a-select-option>
              <a-select-option value="3">第三季度</a-select-option>
              <a-select-option value="4">第四季度</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :lg="6" :md="12" :sm="24" :xs="24">
          <a-form-item class="ele-text-right" :wrapper-col="{ span: 24 }">
            <a-space>
              <a-button type="primary" @click="reload">查询</a-button>
              <a-button @click="reset">重置</a-button>
              <a-button @click="exportFile">导出excel</a-button>
            </a-space>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <ele-pro-table
      ref="table"
      row-key="id"
      :datasource="url"
      :columns="columns"
      :where="where"
      :needPage="false"
      :initLoad="false"
      @done="(d) => (data = d.data)"
      :scroll="{ x: 'max-content' }"
    >
      <template #toolbar>
        <!-- <a-space>
            
          </a-space> -->
      </template>
    </ele-pro-table>
  </div>
</template>

<script>
// import _ from "lodash";
import XLSX from "xlsx";
import {
  pageFunctionNoiseStatisticUrl,
  getColumnOptions,
} from "@/api/ecology/noise/function-sound";
const columns = [
  {
    title: "功能区类别",
    dataIndex: "col1",
  },
  {
    title: "1类区域",
     align: "center",
    children: [
      {
        title: "昼间",
         align: "center",
        dataIndex: "colD1",
      },
      {
        title: "夜间",
         align: "center",
        dataIndex: "colN1",
      },
    ],
  },
  {
    title: "2类区域",
    align: "center",
    children: [
      {
        title: "昼间",
         align: "center",
        dataIndex: "colD2",
      },
      {
        title: "夜间",
         align: "center",
        dataIndex: "colN2",
      },
    ],
  },
  {
    title: "3类区域",
     align: "center",
    children: [
      {
        title: "昼间",
         align: "center",
        dataIndex: "colD3",
      },
      {
        title: "夜间",
         align: "center",
        dataIndex: "colN3",
      },
    ],
  },
  {
    title: "4类区域",
     align: "center",
    children: [
      {
        title: "昼间",
         align: "center",
        dataIndex: "colD4",
      },
      {
        title: "夜间",
         align: "center",
        dataIndex: "colN4",
      },
    ],
  },
];
export default {
  name: "StatisticSoundFunctionAverage",
  components: {},
  data() {
    return {
      url: pageFunctionNoiseStatisticUrl,
      data: [],
      where: {},
      columns,
      yearOptions: [],
    };
  },
  mounted() {
    this.loadOptionData();
  },
  methods: {
    /**获取下来框数据 */
    loadOptionData() {
      getColumnOptions("monitor_year").then((res) => {
        this.yearOptions = res.data.data.map((item) => {
          return {
            label: item,
            value: item,
          };
        });
        this.where.year = this.yearOptions[0].value;
        this.reload();
      });
    },
    /* 刷新表格 */
    reload() {
      this.$refs.table.reload({
        where: this.where,
      });
    },
    /* 重置搜索 */
    reset() {
      this.where.year = this.yearOptions[0].value;
      this.reload();
    },
    exportFile() {
      let array = [
        ["功能区类别", "1类区域","", "2类区域","", "3类区域", "","4类区域","",],
        ["", "以居住、文教   为主的区域","", "居住、商业、工业混杂区","", "适用于工业区", "","交通干线道路  两侧区域","",],
        ["", "昼间","夜间", "昼间","夜间", "昼间", "夜间","昼间","夜间",],

      ];
      this.data.forEach((d) => {
        array.push([
          d.col1,
          d.colD1,
          d.colN1,
          d.colD2,
          d.colN2,
          d.colD3,
          d.colN3,
          d.colD4,
          d.colN4,

        ]);
      });
      let sheet = XLSX.utils.aoa_to_sheet(array);
      // 合并单元格
      sheet['!merges'] = [
        {s: {r: 0, c: 0}, e: {r: 2, c: 0}}, 
        {s: {r: 0, c: 1}, e: {r: 0, c: 2}},  
        {s: {r: 0, c: 3}, e: {r: 0, c: 4}}, 
        {s: {r: 0, c: 5}, e: {r: 0, c: 6}},  
        {s: {r: 0, c: 7}, e: {r: 0, c: 8}},
        {s: {r: 1, c: 1}, e: {r: 1, c: 2}},  
        {s: {r: 1, c: 3}, e: {r: 1, c: 4}}, 
        {s: {r: 1, c: 5}, e: {r: 1, c: 6}},  
        {s: {r: 1, c: 7}, e: {r: 1, c: 8}} 
      ];
      this.$util.exportSheet(XLSX, sheet, new Date().getTime().toString());
    },
  },
};
</script>

<style scoped>
</style>