gphm/PHM-web/src/views/manage/reasoning/index.vue

<template>
  <div class="reasoning">
    <el-steps :active="isActive" align-center class="step" finish-status="success">
      <el-step title="数据选择" description="请选择架次信息"></el-step>
      <el-step title="测试性模型选择" description="请选择测试性模型"></el-step>
      <el-step title="是否进行增强诊断" description="初步结果产生，是否还需要增强诊断"></el-step>
      <el-step title="故障方程选择" description="请选择故障方程"></el-step>
      <el-step title="最终结果展示"></el-step>
    </el-steps>
    <div class="content">
      <div class="box">
        <sortieTable v-if="isActive==0" :callback="handleCurrentChange" />
        <el-table v-if="isActive==1" :data="testModelOptions" highlight-current-row style="width: 100%;marginBottom:20px" @current-change="handleCurrentChange">
          <el-table-column prop="model" label="模型" align="center">
          </el-table-column>
          <el-table-column prop="modelID" label="模型编号" align="center">
          </el-table-column>
          <el-table-column prop="attribute1" label="属性1" align="center">
          </el-table-column>
        </el-table>
        <div v-if="isActive==2" class="">
          <div class="result">
            初步结果
          </div>
          <el-select ref="selectTable" v-model="queryParams.diagnosis" placeholder="请选择增强诊断" @change="handleDiagnosis"
            style="marginRight:120px">
            <el-option v-for="item in diagnosisOptions" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue">
              <span style="float: left;">{{item.dictLabel}}</span>
              <span style="float: right;color: #ccc;">{{item.dictValue}}</span>
            </el-option>
          </el-select>
          <el-select :disabled="queryParams.diagnosis==''" ref="selectTable" v-model="queryParams.diagnosisModel"
            placeholder="请选择诊断模型">
            <template #empty>
              <diagnosisTable :ModelOptions="ModelOptions" :modelFlag="modelFlag" :callback="handleCurrentChange" />
            </template>
          </el-select>
        </div>
        <el-select ref="selectTable" v-model="queryParams.faultModel" placeholder="请选择故障方程模型" v-if="isActive==3">
          <el-option v-for="item in FEQOptions" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <div v-if="isActive==4">
          最终结果展示
        </div>
      </div>
      <div class="btn">
        <el-button type="primary" class="back" @click="back">上一步</el-button>
        <el-button v-if="isActive==2" type="primary" class="jump" @click="jump">跳过</el-button>
        <el-button type="primary" class="next" @click="next">{{nextBtn}}</el-button>
      </div>
    </div>
    <!-- 进度条对话框 -->
    <el-dialog title="数据测试中" :visible.sync="dialog" width="400px" :close-on-click-modal="false" :show-close="false">
      <div class="ProgressBar">
        <el-progress type="circle" :percentage="percentage" :color="colors"></el-progress>
        <p>{{tipText}}</p>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import sortieTable from '@/views/manage/reasoning/sortieTable'
import { listFalseAlarmRestrainModel } from '@/api/manage/falseAlarmRestrainModel'
import { listGroundDiagnosisModel } from '@/api/manage/groundDiagnosisModel'
import { listDeepIsolationModel } from '@/api/manage/deepIsolationModel'
import diagnosisTable from '@/views/manage/reasoning/diagnosisTable'
import { listSortie } from '@/api/manage/sortie'
import { getDicts } from "@/api/system/dict/data";

export default {
  name: 'Reasoning',
  dicts: ['order_type'],
  components: { sortieTable, diagnosisTable },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 显示分析条件
      showSearch: true,
      // 分析参数
      queryParams: {
        sortie: '',
        testModel: '',
        diagnosis: '',
        diagnosisModel: '',
        faultModel: '',
        computingEngine: '',
      },
      // 诊断模型信息
      diagnosisOptions: [],
      // 故障方程选择器信息
      FEQOptions: [
        { value: '选项1', label: '故障方程1' },
        { value: '选项2', label: '故障方程2' },
        { value: '选项3', label: '故障方程3' },
      ],
      // 选择性模型
      testModelOptions: [
        {
          model: '模型1',
          modelID: 'F111',
          attribute1: '属性1',
        },
        {
          model: '模型2',
          modelID: 'F222',
          attribute1: '属性2',
        },
      ],
      // 调用计算引擎的选择器
      ComputingEngine: [
        { value: '选项1', label: '计算引擎1' },
        { value: '选项2', label: '计算引擎2' },
        { value: '选项3', label: '计算引擎3' },
      ],
      // 架次列表
      sortieList: null,
      // 步骤条步骤
      isActive: 0,
      currentRow: null,
      // 下一步按钮
      nextBtn: '下一步',
      // 增强诊断模型
      ModelOptions: [],
      // 诊断的模型表格标记
      modelFlag: 0,
      // 进度条
      percentage: 0,
      colors: [
        { color: '#f56c6c', percentage: 20 },
        { color: '#e6a23c', percentage: 40 },
        { color: '#5cb87a', percentage: 60 },
        { color: '#1989fa', percentage: 80 },
        { color: '#6f7ad3', percentage: 100 },
      ],
      // 进度条弹出框
      dialog: false,
      // 进度条提示信息
      tipText: '正在测试...',
      // 定时器
      timer: null,
      // 是否跳过
      isJump: false,
    }
  },
  created() {
    this.getList()
    this.getOrderList()
  },
  watch: {
    queryParams: {
      handler() {
        if (this.$refs.selectTable) {
          this.$refs.selectTable.visible = false
        }
      },
      deep: true,
    },
    isActive(newValue, oldValue) {
      if (newValue === 1 || (oldValue === 2 && oldValue === 0)) {
        this.nextBtn = '开始测试'
      } else {
        this.nextBtn = '下一步'
      }
    },
  },
  methods: {
    // 架次信息列表
    getList() {
      this.loading = true
      listSortie(this.queryParams).then(response => {
        this.sortieList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    /** 查询系统指令信息列表 */
    getOrderList() {
      this.loading = true
      getDicts("order_type").then(response => {
      const selectedValues = ["FALSE_ALARM", "GROUND_DIAGNOSIS", "DEEP_ISOLATION"];
      this.diagnosisOptions = response.data.filter(item => selectedValues.includes(item.dictValue));
    });
    },
    /** 查询虚警抑制模型列表 */
    getFalseAlarmList() {
      this.loading = true
      listFalseAlarmRestrainModel(this.queryParams).then(response => {
        this.ModelOptions = response.rows
        this.modelFlag = 1
        this.total = response.total
        this.loading = false
      })
    },
    /** 查询深度隔离模型列表 */
    getDeepList() {
      this.loading = true
      listDeepIsolationModel(this.queryParams).then(response => {
        this.ModelOptions = response.rows
        this.modelFlag = 2
        this.total = response.total
        this.loading = false
      })
    },
    /** 查询地面诊断模型信息列表 */
    getGroundList() {
      this.loading = false
      listGroundDiagnosisModel(this.queryParams).then(response => {
        this.ModelOptions = response.rows
        this.modelFlag = 3
        this.total = response.total
        this.loading = true
      })
    },
    // 下一步
    next() {
      if (this.isActive >= 4) this.isActive = 4
      switch (this.isActive) {
        case 0:
          if (this.queryParams.sortie == '') {
            this.$message.error(`请选择架次信息`)
            break
          } else {
            this.isActive = 1
            break
          }
        case 1:
          if (this.queryParams.testModel == '') {
            this.$message.error(`请选择测试性模型`)
            break
          } else {
            // 调用接口、开始测试
            this.dialog = true
            if (!this.timer) {
              this.timer = setInterval(() => {
                if (this.percentage === 100) {
                  this.tipText = '测试成功，正在生成结果'
                  clearInterval(this.timer)
                  this.timer = null
                  setTimeout(() => {
                    this.dialog = false
                    this.percentage = 0
                    this.tipText = '测试中...'
                    this.isActive = 2
                  }, 1500)
                } else {
                  this.percentage += 1
                }
              }, 5)
            }
            break
          }
        case 2:
          if (this.queryParams.diagnosis == '') {
            this.$message.error(`请选择是否增强诊断`)
            break
          } else {
            this.isActive = 3
            break
          }
        case 3:
          if (this.queryParams.faultModel == '') {
            this.$message.error(`请选择故障方程`)
            break
          } else {
            this.$confirm('确定开始故障诊断吗？', '提示')
              .then(() => {
                this.$message.success('开始故障诊断')
                this.isActive = 4
                this.nextBtn = '完成'
                this.reset()
              })
              .catch(() => {})
            break
          }
        case 4:
          // 结果展示、步骤条初始化和内容重置
          this.isActive = 0
          this.reset()
          break
        default:
          break
      }
    },
    back() {
      if (this.isActive < 1) this.isActive = 1
      if (this.isJump) {
        this.isActive = 2
        this.isJump = false
      } else {
        this.isActive--
      }
    },
    //跳过
    jump() {
      this.queryParams.diagnosis = ''
      this.queryParams.diagnosisModel = ''
      this.isJump = true
      this.isActive = 4
    },
    // 内容重置
    reset() {
      this.queryParams = {
        sortie: '',
        testModel: '',
        diagnosis: '',
        diagnosisModel: '',
        faultModel: '',
        computingEngine: '',
      }
    },
    //单选
    handleCurrentChange(val) {
      this.currentRow = val
      switch (this.isActive) {
        case 0:
          this.queryParams.sortie = val.sortieNumber
          break
        case 1:
          this.queryParams.testModel = val.modelID
          break
        case 2:
          this.queryParams.diagnosisModel = val.code
          break
        default:
          break
      }
    },
    //增强诊断的选择框
    handleDiagnosis(val) {
      if (val === 'FALSE_ALARM') {
        this.getFalseAlarmList()
      } else if (val === 'GROUND_DIAGNOSIS') {
        this.getGroundList()
      } else {
        this.getDeepList()
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.reasoning {
  height: 100%;
}
.step {
  margin: 30px;
}
.content {
  height: 100%;
  margin: 30px;
  position: relative;
}
.box {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
}
.btn {
  width: 100%;
  height: 40px;
  position: absolute;
  margin-top: 10px;
  bottom: -40px;
  left: 0;
  display: flex;
  justify-content: space-around;
}
.result {
  width: 100%;
  height: 200px;
  border: 1px solid #ebebeb;
  margin-bottom: 20px;
  padding: 15px;
}
.ProgressBar {
  width: 350px;
  height: 200px;
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>