pdaaphm/pdaaphm-ui/src/views/algoManager/result.vue

<template>
  <div class="app-container">
    <el-descriptions title="运行结果" :column='2' class="desc">
      <el-descriptions-item label="算法类型">
        <dict-tag :options="dict.type.algorithm_type" :value="resultData.type" />
      </el-descriptions-item>
      <el-descriptions-item label="算法子类型">{{ resultData.algoSubName }}</el-descriptions-item>
      <el-descriptions-item label="名称">{{ resultData.name }}</el-descriptions-item>
      <el-descriptions-item label="运行状态">
        <dict-tag :options="dict.type.algo_run_status" :value="resultData.status" />
      </el-descriptions-item>
      <el-descriptions-item label="开始时间">{{ parseTime(resultData.startTime) }}</el-descriptions-item>
      <el-descriptions-item label="完成时间">{{ parseTime(resultData.completedTime) }}</el-descriptions-item>
      <el-descriptions-item label="耗时(s)">{{ resultData.costSecond }}</el-descriptions-item>
      <el-descriptions-item label="备注">{{ resultData.remark }}</el-descriptions-item>
    </el-descriptions>

    <el-form ref="form" :model="form" label-width="80px" class="form">
      <el-form-item v-for="item in form.ioSubList" :key="item.id" :label="item.name">
        <!-- <file-upload v-model="form.path"/> -->
        <image-preview v-if="form.status == 2 && imageList.includes(item.path.split('.').pop())" :src="item.path"
          class="img" />
        <template v-else-if="form.status == 2 && textList.includes(item.path.split('.').pop())">
          <div>
            <div v-show="fileContent" class="file-content">
              {{ fileContent }}
            </div>
          </div>
        </template>
        <template v-if="form.status == 2 && item.path.split('.').pop() == 'csv'">
          <div>
            <el-link type="primary" style="fontSize:1.3em;marginRight:20px">{{ item.path.split('/').pop() }}</el-link>
            <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-download"
                  @click="download(item.path)"
                >{{ "下载文件" }}
            </el-button>
          </div>
        </template>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getAlgorithmDto } from '@/api/algoManager/algorithm'
import { getAlgoSubOption } from '@/api/algoManager/algorithm'
import { getIoSubList } from '@/api/conf/field'
import { getInputFileList } from '@/api/algoManager/file'
import { isExternal } from '@/utils/validate'
import axios from 'axios'
export default {
  name: 'Result',
  dicts: ['algorithm_type', 'algo_run_status'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 算法运行结果信息
      resultData: [],
      // 算法特定类列表
      algoTypeList: [],
      // 具体算法输入输出文件列表
      ioSubList: [],
      typeMap: new Map(),
      imageList: ['jpg', 'jpeg', 'png', 'bmp', 'gif'],
      textList: ['txt', 'doc', 'hlp', 'wps'],
      fileContent: '',
      // 表单参数
      form: {},
      // 输入文件表格数据
      inputFileList: [],
    }
  },
  created() {
    this.getResultData()
  },
  methods: {
    getResultData() {
      this.loading = true
      let id = this.$route.params.resultID
      console.log(id)
      getAlgorithmDto(id).then(response => {
        this.form = response.data
        this.resultData = response.data
        this.algoTypeList = this.typeMap.get(this.resultData.type)
        this.fetchFileContent(this.resultData.ioSubList)
        // 判断是不是csv文件，是的话可以显示在线下载
        this.getInputFileList()
        this.loading = false
      })
    },
    getInputFileList() {
      getInputFileList(this.resultData.subTypeId).then(resp => {
        this.inputFileList = resp.data
        console.info(resp)
        console.info(this)
      })
    },
    changeQueryType() {
      this.resultData.subTypeId = null
      this.algoTypeList = this.typeMap.get(this.queryParams.type)
    },

    changeFormType() {
      this.resultData.subTypeId = null
      this.algoTypeList = this.typeMap.get(this.resultData.type)
    },

    changeFormSubType() {
      if (this.resultData.subTypeId) {
        getIoSubList(this.resultData.subTypeId, this.resultData.id).then(
          resp => {
            this.ioSubList = resp.data
            console.info(resp)
          }
        )
        this.getInputFileList()
      } else {
        this.inputFileList = []
      }
    },
    download(path) {
      this.$download.resource(path);
    },
    // 拿到文本文件里的内容
    async fetchFileContent(ioSubList) {
      try {
        let filePath
        for (const item of ioSubList) {
          if (this.textList.includes(item.path.split('.').pop())) {
            filePath = item.path
          }
        }
        if (filePath) {
          const response = await axios.get(this.realSrc(filePath), {
            responseType: 'text',
          })
          this.fileContent = response.data
          console.log(this.fileContent)
        }
      } catch (error) {
        console.error('Error fetching the file:', error)
      }
    },

    // 通过path得到绝对路径
    realSrc(src) {
      if (!src) {
        return
      }
      const real_src = src.split(',')[0]
      if (isExternal(real_src)) {
        return real_src
      }
      return process.env.VUE_APP_BASE_API + real_src
    },
    download(path) {
      this.$download.resource(path)
    },
  },
}
</script>

<style scoped lang='scss'>
.app-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .desc {
    width: 80%;
    padding-left: 40px;
  }
  .form {
    width: 80%;
  }
}
.img {
  width: 100%;
}
</style>