pdaaphm/pdaaphm-ui/src/views/algoManager/algorithm/algoRun.vue

<template>
  <div class="app-container">
    <div class="info">
      <el-descriptions title="算法运行信息" :column="2" class="detail">
        <el-descriptions-item label="编号">{{ info.id }}</el-descriptions-item>
        <el-descriptions-item label="算法类型">
          <dict-tag :options="dict.type.algorithm_type" :value="info.type" />
        </el-descriptions-item>
        <el-descriptions-item label="算法子类型">{{ info.algoSubName }}</el-descriptions-item>
        <el-descriptions-item label="名称">{{ info.name }}</el-descriptions-item>
        <el-descriptions-item label="备注">{{ info.remark }}</el-descriptions-item>
      </el-descriptions>
      <div class="btn">
        <el-button plain type="primary" size="mini" @click="handleRun(info.id)">确认</el-button>
        <el-button plain :disabled="isOK" type="primary" size="mini" @click="checkResult(info.id)">查看结果</el-button>
        <el-button plain v-show="isDataHandle" type="primary" size="mini" @click="checkContrast(info.id)">查看数据对比</el-button>
      </div>
    </div>
    <div class="log" v-if="show">
      <div class="header">算法运行日志</div>
      <div class="content" v-html="message"  v-bind:style="{height: dynamicHeight}"></div>
    </div>
  </div>
</template>

<script>
import { getAlgorithm, runAlgorithms, getLog,setLog } from '@/api/algoManager/algorithm'
import { registerAction } from 'echarts/core'
export default {
  name: 'AlgoRun',
  dicts: ['algorithm_type'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 算法运行信息
      info: [],
      // 显示log
      show: false,
      message: null,
      timer: null,
      dynamicHeight: '500px',
      // 当算法运行成功时按钮可点击查看结果
      isOK:true,
      // 当运行的算法是数据处理时，显示“查看数据对比”按钮
      isDataHandle:false
    }
  },
  created() {
    // this.getData()
  },
  activated() {
    this.getData()
    this.show = false
  },
  methods: {
    // 得到要执行的算法信息
    getData() {
      this.loading = true
      let id = this.$route.params.algoID
      getAlgorithm(id).then(response => {
        this.info = response.data
        if(this.info.status==='2'){
          this.isOK=false
        }
        if((this.info.type==='6'||this.info.type==='5'||this.info.type==='3') && this.info.status==='2'){
          this.isDataHandle=true
        }
        this.loading = false
      })
    },
    /** 运行算法按钮操作 */
    handleRun(id) {
      this.message = ''
      this.show = true
      const taskId = `TASK-${id}`
      runAlgorithms(id).then(res => {
        this.timer = setInterval(this.getLogInfo, 3000, taskId)
      })
    },
    getLogInfo(taskId) {
      getLog(taskId).then(response => {
        let logData = response.data
        if (logData && logData.includes('任务执行完成')) {
          console.log("定时器销毁");
          clearInterval(this.timer)
          this.isOK=false
        }
        if (logData) {
          this.message = this.message + logData
        }
      })
    },
    // 跳转查看结果列表
    checkResult(id){
      this.$router.push({
        name: 'Result',
        params: {
          resultID: id,
        },
      })
    },
    // 查看数据对比结果
    checkContrast(id){
      this.$router.push({
        name: 'contrast',
        params: {
          nonIdealID: id,
        },
      })
    }
  },
}
</script>

<style scoped lang="scss">
.app-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.info {
  width: 80%;
  position: relative;
  display: flex;
  justify-content: space-evenly;
  .btn {
    position: absolute;
    bottom: 0;
    right: 50px;
  }
  .detail {
    width: 70%;
  }
}
.log {
  width: 80%;
  height: 500px;
  border: 1px solid #d1d1d1;
  box-shadow: 10px 12px 10px #ebebeb;
  margin-top: 27px;
  .header {
    width: 80%;
    height: 27px;
    color: #888888;
    margin: 5px 0px 0px 15px;
    background-color: white;
  }
  .content {
    width: 100%;
    height: 475px;
    background-color: black;
    overflow-y: scroll;
    border-right: 10px solid white;
    padding: 15px;
  }
}
</style>