jczxw-java/src/views/water/drinking-water-village/statistic/average.vue

<template>
  <div class="">
    <ele-pro-table
      ref="table"
      row-key="id"
      :datasource="url"
      :columns="columns"
      :where="where"
      :needPage="false"
      @done="(d) => (data = d.data)"
      :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="timeSlotOptions"
                  v-model:value="where.timeSlot"
                  placeholder="昼夜"
                >
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :lg="8" :md="12" :sm="24" :xs="24">
              <a-form-item label="时间范围:">
                <!-- <a-month-picker v-model:value="timeScope" placeholder="起始" /> -->
                <a-range-picker v-model:value="timeScope" format="YYYY-MM-DD" />
              </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>
      <template #Leq="{ text, record }">
        <a-tag
          v-if="
            (where.timeSlot == '昼' && text <= 68) ||
            (where.timeSlot == '夜' && text <= 58)
          "
          color="green"
          >{{ text }}</a-tag
        >
        <a-tag
          v-else-if="
            (record.timeSlot == '昼' && text > 68 && text <= 70) ||
            (record.timeSlot == '夜' && text > 58 && text <= 60)
          "
          color="blue"
          >{{ text }}</a-tag
        >
        <a-tag
          v-else-if="
            (record.timeSlot == '昼' && text > 70 && text <= 72) ||
            (record.timeSlot == '夜' && text > 60 && text <= 62)
          "
          color="red"
          >{{ text }}</a-tag
        >
        <a-tag
          v-else-if="
            (record.timeSlot == '昼' && text > 62 && text <= 74) ||
            (record.timeSlot == '夜' && text > 62 && text <= 64)
          "
          color="red"
          >{{ text }}</a-tag
        >
        <a-tag
          v-else-if="
            (record.timeSlot == '昼' && text > 74) ||
            (record.timeSlot == '夜' && text > 64)
          "
          color="red"
          >{{ text }}</a-tag
        >
        <template v-else color="#FFF">{{ text }}</template>
      </template>
    </ele-pro-table>
  </div>
</template>

<script>
import _ from "lodash";
import XLSX from "xlsx";
import { pageRoadNoiseStatisticUrl } from "@/api/ecology/noise/road-sound";
const columns = [
  {
    title: "城区",
    dataIndex: "area",
  },

  {
    title: "市",
    dataIndex: "city",
  },
  {
    title: "路长",
    dataIndex: "roadLength",
  },
  {
    title: "路宽",
    dataIndex: "roadWidth",
  },
  {
    title: "LeqdB(A)",
    dataIndex: "avgLeq",
    slots: { customRender: "Leq" },
    sorter: true,
  },
  {
    title: "SDdB(A)",
    dataIndex: "avgSD",
  },
  {
    title: "L10dB(A)",
    dataIndex: "avgL10",
  },
  {
    title: "L50dB(A)",
    dataIndex: "avgL50",
  },
  {
    title: "L90dB(A)",
    dataIndex: "avgL90",
  },
];
export default {
  name: "StatisticSoundRoadAverage",
  components: {},
  data() {
    return {
      url: pageRoadNoiseStatisticUrl,
      data: [],
      where: {
        model: "area",
        timeSlot: "昼"
      },
      timeScope: [],
      columns,
      modelOptions: [
        {
          value: "place",
          label: "测点",
        },
        {
          value: "road",
          label: "路段",
        },
        {
          value: "area",
          label: "城区",
        },
        {
          value: "city",
          label: "市",
        },
      ],
      timeSlotOptions: [
        {
          value: "昼",
          label: "昼",
        },
        {
          value: "夜",
          label: "夜",
        },
      ],
    };
  },
  methods: {
    /* 刷新表格 */
    reload() {
      this.$refs.table.reload({
        where: {
          model: this.where.model,
          timeStart:
            this.timeScope.length == 2
              ? this.timeScope[0].format("Y-M-D")
              : null,
          timeEnd:
            this.timeScope.length == 2
              ? this.timeScope[1].format("Y-M-D")
              : null,
          timeSlot: this.where.timeSlot,
        },
      });
      let cloneColumns = _.cloneDeep(columns);
      if (this.where.model == "area") {
        this.columns = cloneColumns.filter((item) => {
          return item.dataIndex != "place" && item.dataIndex != "road";
        });
      } else if (this.where.model == "road") {
        this.columns = cloneColumns.filter((item) => {
          return item.dataIndex != "place";
        });
      } else if (this.where.model == "city") {
        this.columns = cloneColumns.filter((item) => {
          return (
            item.dataIndex != "place" &&
            item.dataIndex != "road" &&
            item.dataIndex != "area"
          );
        });
      }
    },
    /* 重置搜索 */
    reset() {
      this.where = {
        model: "area",
        timeSlot: "昼",
      };
      this.this.timeScope = [];

      this.reload();
    },
    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>