AttributioClassification/src/views/chart/pages/LoadFromDb.vue

<template>
  <div class="list-wrap">
    <div class="section-head">Load From DB</div>
    <div class="list-box">
      <div class="filter-wrap">
        <el-form :inline="true" :model="queryParams" class="demo-form-inline">
          <!--<el-form-item label="Activity reference time">
            <el-date-picker v-model="queryParams.acquisition_start_begin" type="datetime" placeholder="选择日期时间" class="dark-date-picker" popper-class="dark-date-picker"></el-date-picker>
          </el-form-item>
          <el-form-item label="Concentration reference time">
            <el-date-picker v-model="queryParams.acquisition_start_end" type="datetime" placeholder="选择日期时间" class="dark-date-picker" popper-class="dark-date-picker"></el-date-picker>
          </el-form-item>-->

          <el-form-item label="Create time">
            <el-date-picker
                v-model="dateRage"
                type="daterange"
                range-separator="至"
                start-placeholder="start"
                end-placeholder="end"
                value-format="YYYY-MM-DD"
                class="dark-date-picker"
                popper-class="dark-date-picker"
                @change="dateChange"></el-date-picker>
          </el-form-item>

          <el-form-item label="">
            <el-button type="primary" icon="search" style="background-color: #7393b7; border-color: #7393b7; border-radius: 0;" @click="onSearch">Select</el-button>
            <!--<el-button type="primary" icon="upload" style="background-color: #7393b7; border-color: #7393b7; border-radius: 0;">Upload</el-button>-->
            <el-upload
              ref="upload"
              v-model:file-list="fileList"
              :data="{event_type: 'ss', data_type: 'nuc'}"
              class="upload-demo"
              :action="uploadUrl"
              :limit="1"
              :multiple="false"
              :show-file-list="false"
              :on-success="handleSuccess"
              :on-exceed="handleExceed"
              style="height: 32px; margin-left: 12px;">
              <el-button type="primary" icon="upload" style="background-color: #7393b7; border-color: #7393b7; border-radius: 0;">Upload</el-button>
            </el-upload>
          </el-form-item>
        </el-form>
      </div>
      <el-table :data="tableData" v-loading="loading" element-loading-background="rgba(0,0,0,0.65)" stripe style="width: 100%" class="dark-table">
        <el-table-column fixed type="index" label="NO" width="80"></el-table-column>
        <el-table-column prop="xe131m_conc" label="XE131M_CONC"></el-table-column>
        <el-table-column prop="xe131m_mdc" label="XE131M_MDC"></el-table-column>
        <el-table-column prop="xe133_conc" label="XE133_CONC"></el-table-column>
        <el-table-column prop="xe133_mdc" label="XE133_MDC"></el-table-column>
        <el-table-column prop="xe133m_conc" label="XE133M_CONC"></el-table-column>
        <el-table-column prop="xe133m_mdc" label="XE133M_MDC"></el-table-column>
        <el-table-column prop="xe135_conc" label="XE135M_CONC"></el-table-column>
        <el-table-column prop="xe135_mdc" label="XE135M_MDC"></el-table-column>
      </el-table>
      <div class="pagination-wrap">
        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.page" v-model:limit="queryParams.size" class="dark-pagination" @pagination="onSearch" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      total: 0,
      queryParams: {
        page: 1,
        size: 10,
        create_time_begin: '',
        create_time_end: '',
      },
      tableData: [],
      fileList: [],
      dateRage: []
    }
  },
  created () {
    this.onSearch()
  },
  computed: {
    uploadUrl () {
      return window.CONFIG.baseUrl + '/nuclide/upload_nuclide_excel'
    }
  },
  methods: {
    onSearch () {
      this.loading = true
      this.$axios.get(window.CONFIG.baseUrl + '/nuclide/query_samples', { params: this.queryParams }).then((res) => {
        this.tableData = res.data.items
        this.total = res.data.pagination.total_count
      }).finally(() => {
        this.loading = false
      })
    },
    handleSuccess () {
      this.queryParams.page = 1
      this.onSearch()
    },
    handleExceed (files) {
      this.$refs.upload.clearFiles()
      const file = files[0]
      this.$refs.upload.handleStart(file)
    },
    dateChange(dates) {
      this.queryParams.create_time_begin = dates[0]
      this.queryParams.create_time_end = dates[1]
    },
  },
}
</script>

<style scoped lang="scss">
.list-wrap {
  overflow: hidden;
  color: #fff;
  .section-head {
    height: 32px;
    padding: 0 13px;
    background-color: #1c2630;
    border-left: 4px solid #be8728;
    font-family: MICROGRAMMADMEDEXT;
    font-size: 20px;
    font-weight: bold;
  }
  .list-box {
    .filter-wrap {
      margin-top: 16px;
      ::v-deep .el-form-item__label {
        font-size: 16px;
        color: #a7bacf;
      }
    }
    .dark-table {
      width: 100%;
    }
  }
  .pagination-wrap {
    display: flex;
    justify-content: flex-end;
    margin: 16px 0;
  }
}
</style>