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

<template>
  <div class="list-wrap">
    <div class="section-head">Predict</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="Dataset">
            <el-select v-model="queryParams.case_no" placeholder="请选择" class="dark-select" popper-class="dark-select-popper" style="width: 120px">
              <el-option
                  v-for="item in caseOptions"
                  :key="item.id"
                  :label="item.id"
                  :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="Classify">
            <el-select v-model="modelTypes" multiple placeholder="请选择" class="dark-select" popper-class="dark-select-popper" style="width: 520px" @change="modelTypeChange">
              <el-option
                  v-for="item in selectOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="">
            <el-upload
                ref="upload"
                v-model:file-list="fileList"
                class="upload-demo"
                :auto-upload="false"
                :limit="1"
                :multiple="false"
                :show-file-list="false"
                :on-change="handleChange"
                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-button type="primary" icon="search" style="background-color: #7393b7; border-color: #7393b7; border-radius: 0; margin-left: 12px;" @click="onSearch">Select</el-button>
            <el-button type="primary" icon="document" style="background-color: #7393b7; border-color: #7393b7; border-radius: 0; margin-left: 12px;" @click="onDownload">Download</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table :data="tableData" 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-column prop="type" label="TYPE">
          <template #default="scope">
            <el-input v-model="scope.row.type" class="dark-input"></el-input>
          </template>
        </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,
        case_no: '',
        model_types: '',
        file: '',
      },
      selectOptions: [
        {
          value: 'CNN',
          label: 'CNN',
        },
        {
          value: 'BDT',
          label: 'BDT',
        },
        {
          value: 'SVM',
          label: 'SVM',
        },
        {
          value: 'MLP',
          label: 'MLP',
        },
        {
          value: 'RF',
          label: 'RF',
        },
      ],
      caseOptions: [],
      tableData: [],
      fileList: [],
      modelTypes: [],
      currentFile: null
    }
  },
  created () {
    // color: ['#0A4072', '#683F14', '#0F605A', '#0F5A7A', '#5C5F25']
    // this.onSearch()
    this.getCaseData()
  },
  methods: {
    onSearch () {
      this.loading = true
      const formData = new FormData()
      formData.append("file", this.currentFile)
      formData.append("case_no", this.queryParams.case_no)
      formData.append("model_types", this.queryParams.model_types)
      this.$axios.post(window.CONFIG.baseUrl + '/train-oneday/predict', formData, { headers: { "Content-Type": "multipart/form-data" } }).then((res) => {
        this.tableData = res.data.items
        this.total = res.data.pagination.total_count
      }).finally(() => {
        this.loading = false
      })
    },
    getCaseData () {
      this.loading = true
      this.$axios.get(window.CONFIG.baseUrl + '/train-oneday/query_train_datasets', { params: this.queryParams }).then((res) => {
        this.caseOptions = res.data.items
      }).finally(() => {
        this.loading = false
      })
    },
    // 文件选择变化
    handleChange(file, fileList) {
      if (file) {
        this.currentFile = file.raw || file
      } else {
        this.currentFile = null
      }
    },
    modelTypeChange(data) {
      this.queryParams.model_types = data.join(',')
    },
    async onDownload() {
      const res = await this.$axios.get(window.CONFIG.baseUrl + '/download', { params: { path: '' }}) // 理解：path应该是查询成功后返回的路径
      debugger
    },
  },
}
</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>