index.vue 4.48 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154
<template>
  <div class="app-container">

    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="储配站" prop="stationId">
        <el-select v-model="queryParams.stationId" placeholder="请选择储配站">
          <el-option
            v-for="item in stationList"
            :key="item.stationId"
            :label="item.stationName"
            :value="item.stationId"
          />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          plain
          icon="el-icon-download"
          size="mini"
          :loading="exportLoading"
          @click="handleExport"
          style="color: #1890ff"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getInfo"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="baseInfoList" show-summary :summary-method="getSummaries">
      <el-table-column label="储配站" align="center" prop="stationName" />
      <el-table-column label="气瓶数量" align="center" prop="totalBottle" />
      <el-table-column label="车辆数量" align="center" prop="totalVehicle"/>
      <el-table-column label="从业人员数量" align="center" prop="totalPractitioner" />
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getInfo"
    />
  </div>
</template>

<script>
  import { baseInfoStatistics, baseInfoStatisticsExport} from "@/api/gasBottleTrack/gasHolderStationManage";
  import { gasStorageStationList } from "@/api/gasBottleTrack/gasHolderStationManage";
  export default {
    name: "index",
    data(){
      return{
        baseInfoList: [],
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          stationId: null
        },
        total: 0,
        loading: false,
        // 显示搜索条件
        showSearch: true,
        stationList: [],
        exportLoading: false
      }
    },
    created(){
      this.getInfo();
      this.getStationInfo();
    },
    methods:{
      getInfo(){
        this.loading = true;
        baseInfoStatistics(this.queryParams).then(res =>{
          this.loading = false;
          if(res.code == 200){
               this.baseInfoList = res.rows;
               this.total = res.total;
          }
        })
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getInfo();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      getStationInfo(){
        gasStorageStationList().then(res =>{
          if(res.code == 200){
            this.stationList = res.data;
          }
        })
      },
      /** 导出按钮操作 */
      handleExport() {
        const queryParams = this.queryParams;
        this.$confirm('是否确认导出所有基础信息统计数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          this.exportLoading = true;
        return baseInfoStatisticsExport(queryParams);
      }).then(response => {
          this.download(response.msg);
        this.exportLoading = false;
      }).catch(() => {});
      },
      getSummaries(param){
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
          sums[index] = "数据汇总";
          return;
        }
        const values = data.map((item) => Number(item[column.property]));
        if (
          column.property === "totalBottle" ||
          column.property === "totalVehicle" ||
          column.property === "totalPractitioner"
        ) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
          if (!isNaN(value)) {
            return prev + curr;
          } else {
            return prev;
          }
        }, 0);
          sums[index] = sums[index].toFixed(0);
        }
      });
        return sums;
      }
    }
  }
</script>

<style scoped>

</style>