gangkou/ruoyi-ui/src/views/dataStatistics/yearData/index.vue

<template>
  <div class="year-data">
    <el-row :gutter="10">
      <el-col :span="6" style="margin-top: 10px; margin-bottom: 10px">
        <dept-tree @deptChange="handleDeptChange" :showQuickGroup="true" />
      </el-col>
      <el-col :span="6" style="margin-top: 10px; margin-bottom: 10px">
        <el-date-picker
          v-model="year"
          type="year"
          format="yyyy"
          value-format="yyyy"
          placeholder="选择年"
          @change="handleYearChange"
        >
        </el-date-picker>
      </el-col>
      <el-col :span="12">
        <div class="export_btn">
          <el-button
            type="primary"
            icon="eel-icon-download"
            @click="handleExport"
            >导出</el-button
          >
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-table
        :data="tableData"
        style="width: 100%"
        border
        :max-height="tableHeight"
        v-loading="loading"
      >
        <el-table-column prop="gangqu" label="归属港区" />
        <el-table-column prop="deptName" label="归属企业" />
        <el-table-column prop="sn" label="设备编码" />
        <el-table-column prop="year" label="年份" />
        <el-table-column prop="avgValue" label="平均值">
          <!-- <template slot-scope="scope">
            <div @dblclick="changeAvgValue(scope.$index, scope.row)">
              <span v-show="!scope.row.enable_edit">{{
                scope.row.avgValue
              }}</span>

              <el-input
                :ref="'changeAvgValue' + scope.$index"
                @blur="changeAvgValueBlur(scope.$index, scope.row)"
                @keyup.enter.native="$event.target.blur"
                clearable
                v-show="scope.row.enable_edit"
                size="mini"
                v-model="scope.row.avgValue"
                placeholder="请输入内容"
              ></el-input>
            </div>
          </template> -->
        </el-table-column>
      </el-table>
      <div class="page-ele">
        <el-pagination
          layout="sizes, prev, pager, next, total"
          :total="total"
          :page-size="pageSize"
          :page-sizes="[10, 20, 30, 40]"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        >
        </el-pagination>
      </div>
    </el-row>
  </div>
</template>

<script>
import { debounce } from "@/utils";
import moment from "moment";
import {
  getDeviceReportYearList,
  getDeviceReportYearListAll,
} from "@/api/statistics/yearData.js";
import { dataToExcel } from "@/utils/excel.js";
import to from '@/utils/await-to.js';


export default {
  data() {
    return {
      dept: null,
      year: "",
      queryDebounce: null,
      tableData: [],
      total: 0,
      pageNum: 1,
      pageSize: 10,
      loading: false,
    };
  },
  computed: {
    tableHeight() {
      return window.innerHeight - 300;
    },
  },
  mounted() {
    // 获取当前年份 2024
    this.year = moment().year().toString();
    this.queryDebounce = debounce(this.query, 100);
  },
  methods: {
    handleYearChange() {
      this.queryDebounce();
    },
    handleDeptChange(dept) {
      this.dept = dept;
      this.queryDebounce();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.queryDebounce();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.queryDebounce();
    },
    query() {
      if (!this.dept || !this.year) {
        return;
      }
      this.loading = true;

      getDeviceReportYearList({
        deptId: this.dept.deptId,
        year: this.year,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      })
        .then((res) => {
          if (res.code === 200) {
            this.tableData = res.rows;
            this.total = res.total;
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    async handleExport() {
      const fileName = `${this.dept.deptName} ${this.year}年数据统计`;
      const [err, response] = await to(getDeviceReportYearListAll({
        deptId: this.dept.deptId,
        year: this.year,
      }));
      if (err) {
        console.error(err);
        this.$message.error("导出失败");
        return;
      }
      const {data} = response;
      dataToExcel({
        data: [
          [fileName],
          ["归属港区", "归属企业", "设备编码", "年份", "平均值"],
          ...data.map((row) => [
            row.gangqu,
            row.deptName,
            row.sn,
            row.year,
            row.avgValue,
          ]),
        ],
        fileName,
        wsCallback: (ws) => {
          if (!ws["!merges"]) ws["!merges"] = [];
          ws["!merges"].push({ s: { r: 0, c: 0 }, e: { r: 0, c: 4 } });
        },
      });
      this.$message.success("导出成功");
    },
  },
};
</script>

<style scoped>
.year-data {
  padding: 10px 20px;
}
.export_btn {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}
.page-ele {
  margin-top: 10px;
  text-align: right;
}
</style>