yxk-electronic-archives/src/views/archivesStatistics/dataStatistics/index.vue

<template>
  <div class="app-container  row-container">
    <div class="connection-header collect-header" style="padding: 0; border-top: none; height: auto; margin-bottom: 20px;">
      <div class="head-search" style="margin-bottom: 0;">
        <el-select
          v-model="fondsIds"
          multiple
          collapse-tags
          placeholder="请选择所属全宗"
          style="width: 320px;"
        >
          <el-option
            v-for="item in fondsOptions"
            :key="item.id"
            :label="item.fondsName"
            :value="item.id"
          />
        </el-select>
        <el-select
          v-model="years"
          multiple
          collapse-tags
          placeholder="请选择年份"
          style="width: 150px;"
        >
          <el-option
            v-for="item in yearsOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
        <el-button class="filter-item filter-search" size="mini" type="success" icon="el-icon-search" @click="getTotalStatistics">查询</el-button>
        <el-button class="filter-item filter-refresh" size="mini" type="warning" icon="el-icon-refresh-left" @click="resetQuery">重置</el-button>
      </div>
      <el-button size="mini" @click="doExport()">
        <i class="iconfont icon-daochu" />
        导出
      </el-button>
    </div>

    <el-table v-loading="loading" class="archives-table" :data="allData" :summary-method="getSummaries" show-summary style="width: 100%;">
      <el-table-column type="index" label="序号" width="60" align="center" />
      <el-table-column prop="categoryName" label="档案门类（国标分类）" align="center" />
      <el-table-column prop="archivesCount" label="案卷数（卷）" align="center" />
      <el-table-column prop="singleCount" label="卷内件数（件）" align="center" />
      <el-table-column prop="fileCount" label="电子原文数量（份）" align="center" />
      <el-table-column prop="fileSize" label="电子档案存储容量（GB）" align="center" />
    </el-table>

  </div>
</template>

<script>
import { FetchFondsAll } from '@/api/system/fonds'
import { FetchTotalStatistics, FetchArchivedAllYear } from '@/api/statistics/statistics'
import qs from 'qs'
import { exportFile } from '@/utils/index'
import { mapGetters } from 'vuex'

export default {
  name: 'DataStatistics',
  data() {
    return {
      allData: [],
      fondsOptions: [],
      fondsIds: [],
      yearsOptions: [],
      years: [],
      loading: false
    }
  },
  computed: {
    ...mapGetters([
      'baseApi'
    ])
  },
  mounted() {
    this.getFondsDatas()
    this.getArchivedAllYearDatas()
    this.getTotalStatistics()
  },
  methods: {
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 1) {
          sums[index] = '合计（全库总量）'
          return
        }
        const values = data.map(item => Number(item[column.property]))
        if (!values.every(value => isNaN(value))) {
          if (column.property === 'fileSize') {
            sums[index] = values.reduce((prev, curr) => {
              return prev + curr
            }, 0).toFixed(3)
          } else {
            sums[index] = values.reduce((prev, curr) => {
              return prev + curr
            }, 0)
          }
        } else {
          sums[index] = '-'
        }
      })
      return sums
    },
    resetQuery() {
      this.fondsIds = []
      this.years = []
      this.getTotalStatistics()
    },
    getFondsDatas() {
      FetchFondsAll().then(res => {
        this.fondsOptions = res
        // 默认全选所有档案库
        // this.fondsIds = res.map(item => item.id)
        // this.checkAndQuery()
      })
    },
    getArchivedAllYearDatas() {
      FetchArchivedAllYear().then(res => {
        this.yearsOptions = res.map(item => ({
          id: item,
          name: item
        }))
        // 默认全选所有年份
        // this.years = res.map(item => item)
        // this.checkAndQuery()
      })
    },
    checkAndQuery() {
      // 当两个数据都加载完成后才执行查询
      if (this.fondsOptions.length > 0 && this.yearsOptions.length > 0) {
        this.getTotalStatistics()
      }
    },
    getTotalStatistics() {
      this.loading = true
      FetchTotalStatistics({
        fondsIds: this.fondsIds,
        years: this.years
      }).then(res => {
        this.allData = res
        this.loading = false
      })
    },
    doExport() {
      this.$confirm('此操作将导出当前统计数据' + '<span>你是否还要继续？</span>', '提示', {
        confirmButtonText: '继续',
        cancelButtonText: '取消',
        type: 'warning',
        dangerouslyUseHTMLString: true
      }).then(() => {
        exportFile(this.baseApi + '/api/control/exportBusinessFlow?' + qs.stringify({}, { indices: false }))
      }).catch(() => {
        console.log('取消')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  height: calc(100vh - 140px);
  .head-search{
    .el-select,
    .el-button{
      margin-right: 10px;
    }
  }
  ::v-deep .el-table__footer{
    font-size: 14px;
  }
  ::v-deep .el-table__empty-block{
    border-bottom: 1px solid #e4e7ed;
  }
}
</style>