jczxw-java/src/views/sound/road/statistic/compare.vue

<template>
  <div class="">
    <ele-pro-table ref="table" row-key="id" :datasource="url" :columns="columns" :where="where" :needPage="false"
      @done="stableDone" :scroll="{x: 'max-content'}">
      <template #toolbar>
        <!-- 搜索表单 -->
        <a-form :model="where" layout="inline" :labelCol="{ offset: 1}">
          <a-row>
            <a-col :lg="6" :md="12" :sm="24" :xs="24">
              <a-form-item label="统计模块:">
                <a-select :options="groupModelOptions" v-model:value="where.groupModel" placeholder="统计模块">
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :lg="6" :md="12" :sm="24" :xs="24">
              <a-form-item label="时间细度:">
                <a-select :options="groupTimeLengthOptions" v-model:value="where.groupTimeLength" placeholder="">
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :lg="6" :md="12" :sm="24" :xs="24">
              <a-form-item label="昼夜:">
                <a-select :options="timeSlotOptions" v-model:value="where.timeSlot" placeholder="昼夜">
                </a-select>
              </a-form-item>
            </a-col>
           

            <a-col :lg="4" :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>
        <!-- <a-space>
            
          </a-space> -->
      </template>
    </ele-pro-table>
  </div>
</template>

<script>
  // import _ from "lodash";
  import XLSX from 'xlsx';
  import {
    pageRoadNoiseCompare
  } from "@/api/ecology/road-sound"
  const columns = [{
      title: '测点',
      dataIndex: 'place',

    },
    {
      title: '路段',
      dataIndex: 'road',

    },
    {
      title: '城区',
      dataIndex: 'area',
    },
    {
      title: '市',
      dataIndex: 'city',
    },
  ]
  export default {
    name: 'StatisticSoundRoadCompare',
    components: {

    },
    data() {
      const groupModelOptions = [{
        label: "测点",
        value: "place"
      },{
        label: "城区",
        value: "area"
      },{
        label: "市",
        value: "city"
      }];
      const groupTimeLengthOptions = [{
        label: "年",
        value: "monitor_year"
      },
      {
        label: "季度",
        value: "quarter"
      }]
      return {
        url: pageRoadNoiseCompare,
        data: [],
        where: {
          groupModel: "area",
          groupTimeLength: "monitor_year",
          timeSlot: '昼'
        },
        timeScope: [],
        columns,
        groupModelOptions,
        groupTimeLengthOptions,
        timeSlotOptions: [{
          value: "昼",
          label: "昼"
        }, {
          value: "夜",
          label: "夜"
        }]

      };
    },
    methods: {
      /* 刷新表格 */
      reload() {
        this.$refs.table.reload({
          where: this.where
        });

      },
      /* 重置搜索 */
      reset() {
        this.where = {
          model: "place",
          timeSlot: "昼"
        };
        this.this.timeScope = []

        this.reload();
      },
      stableDone(){
        const columns = [];
        if(this.where.groupModel == "area"){
          columns.push({
            title : "城区",
            dataIndex: "area",
            sorter: true
          })
        }else if(this.where.groupModel == "place"){
            columns.push({
            title : "测点",
            dataIndex: "area",
            sorter: true
          })
        }else if(this.where.groupModel == "city"){
            columns.push({
            title : "城市",
            dataIndex: "area",
            sorter: true
          })
        }
        columns.push({
            title : "年份",
            dataIndex: "year",
            sorter: true
          })

       if(this.where.groupTimeLength == 'quarter'){
          columns.push({
            title : "季度",
            dataIndex: "quarter",
            sorter: true,
            customRender: ({text}) =>{
              switch (text) {
                case 1:
                  return "第一季度";
                case 2:
                  return "第二季度";
                case 3:
                  return "第三季度";
                case 4:
                  return "第四季度";
              
                default:
                  return "";
              }
            }
          })
        }

        // if(this.where.groupTimeLength == 'monitor_year'){
          columns.push({
            title : "Leq",
            dataIndex: "value",
            customRender: ({text}) => Number(text).toFixed(2)
            
          })
        // }
        this.columns = columns;
      },
      exportFile() {
        let array = [
          ['测点', '路段', '城区', '路长', '路宽', '平均Leq', '平均SD']
        ];
        this.data.forEach(d => {
          array.push([d.place, d.road, d.area, d.roadLength, d.roadWidth, d.avgLeq, d.avgSD]);
        });
        let sheet = XLSX.utils.aoa_to_sheet(array);
        // sheet['!merges'] = [
        //   {s: {r: 0, c: 1}, e: {r: 0, c: 5}},  // 合并第0行第1列到第0行第5列
        //   {s: {r: 0, c: 0}, e: {r: 1, c: 0}},  // 合并第0行第0列到第1行第0列
        //   {s: {r: 0, c: 6}, e: {r: 1, c: 6}}  // 合并第0行第6列到第1行第6列
        // ];
        this.$util.exportSheet(XLSX, sheet, '道路交通噪声统计表');
      }
    }

  }
</script>

<style scoped>

</style>