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

<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="机号" prop="aircraftNumber">
        <el-input v-model="queryParams.aircraftNumber" placeholder="请输入机号" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="架次号" prop="sortieNumber">
        <el-input v-model="queryParams.sortieNumber" placeholder="请输入架次号" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" border :data="sortieList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="机号" align="center" prop="aircraftNumber" />
      <el-table-column label="架次号" align="center" prop="sortieNumber" />
      <el-table-column label="开始时间" align="center" width="180">
        <template slot-scope="scope">
          <span>{{
            parseTime(scope.row.startTime, "{y}-{m}-{d} {h}:{i}:{s}")
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="结束时间" align="center" width="180">
        <template slot-scope="scope">
          <span>{{
            parseTime(scope.row.endTime, "{y}-{m}-{d} {h}:{i}:{s}")
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="飞行时长" align="center" prop="duration" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button type="text" size="mini" @click="handle(scope.row)"
            v-hasPermi="['manage:preHandleResult:edit']">数据处理</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

    <el-dialog :title="title" :visible.sync="open" :close-on-click-modal="false" width="800px" append-to-body>
      <div style="max-height: 380px; overflow-y: auto; overflow-x: hidden;">
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
          <el-form-item label="诊断类型">
            <el-checkbox-group v-model="checkList" :min="1">
              <el-checkbox label="1">异常值剔除</el-checkbox>
              <el-checkbox label="2">缺失值处理</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-row :gutter="20">
            <el-col :span="10">
              <el-form-item label="机号" prop="aircraftNumber">
                <el-input v-model="form.aircraftNumber" placeholder="请输入机号" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="架次号" prop="sortieNumber">
                <el-input v-model="form.sortieNumber" placeholder="请输入架次号" disabled />
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="架次数据：" class="clearMargin" />
          <el-form-item>
            <el-table :data="sortieParameterAllList" style="margin-left:-30px" highlight-current-row
              @current-change="handleSortieData" max-height="250">
              <el-table-column prop="sortieNo" label="架次号" align="center" />
              <el-table-column prop="batchNo" label="批次号" align="center" />
              <el-table-column prop="type" label="数据类型" align="center">
                <template slot-scope="scope">
                  <dict-tag :options="dict.type.data_type" :value="scope.row.type" />
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
          <el-form-item label="模型选择">
            <!-- <el-input v-model="form.sortieNumber" placeholder="请输入架次号" disabled/> -->
            <el-select v-model="selectModelVal" placeholder="请选择模型" @change="modelSelectHandel">
              <el-option v-for="item in modelOptions" :key="item.id" :label="item.name" :value="item">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="参数选择" v-if="!(selectModelVal==='')">
            <el-transfer v-model="selectSortieParams" :props="{ key: 'value', label: 'desc' }" :data="parameterList"
              filterable filter-placeholder="请输入参数名称" :titles="['所有参数', '展示参数']">
            </el-transfer>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" :disabled="selectModelVal===''">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 进度条 -->
    <el-dialog :title="title" :visible.sync="dialogProgress" class="progress" width="800" :close-on-click-modal="false"
      append-to-body>
      <el-progress :text-inside="true" :stroke-width="24" :percentage="percentageVal" status="success"></el-progress>
    </el-dialog>
    <el-dialog :title="title" :visible.sync="dialogResult" width="800" :close-on-click-modal="false" append-to-body>
      结果
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="cancel">完成</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listPreHandleResult,
  getPreHandleResult,
  delPreHandleResult,
  addPreHandleResult,
  updatePreHandleResult,
} from '@/api/manage/preHandleResult'
import { listAnalyzeResult } from '@/api/manage/analyzeResult'
import { listSortie, getSortie, getSortieParams } from '@/api/manage/sortie'
import {
  beginModel,
  listSortieParameterAll,
  modelList,
  modelListAll,
} from '@/api/manage/data'

export default {
  name: 'PreHandleResult',
  dicts: ['data_type'],
  data() {
    return {
      // 按钮加载
      butLoading: false,
      // 需要预处理的源数据列表
      sourceDataList: [],
      // 当前选择的数据
      currentSelection: [],
      textarea: '0101010101010111010',
      handleList: [
        { name: '异常值剔除', value: 1 },
        { name: '缺失值补全', value: 2 },
      ],
      handleList2: [
        { name: '手动处理', value: 1 },
        { name: '调用异常模型', value: 2 },
      ],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        aircraftNumber: null,
        sortieNumber: null,
      },
      sortieList: [],
      // 表单参数
      form: {},
      rules: {},
      checkList: ['1', '2'],
      // 进度条是否显示弹出框
      dialogProgress: false,
      percentageVal: 50,
      timer: null,
      // 结果弹出框
      dialogResult: false,
      modelOptions: [],
      selectModelVal: '',
      sortieParameterAllList: [],
      selectedSortieDataType: '',
      modelListAll: [],
      parameterList: [],
      selectSortieParams: [],
      modelId: null,
      batchNo: '',
      showFlag: '',
      faultPredictionResult: [],
    }
  },
  created() {
    this.getList()
  },
  watch: {
    checkList: {
      handler(newValue, oldValue) {
        if (newValue.length === 0) {
          this.FABtnText = '完成'
        }
      },
      deep: true,
    },
  },
  methods: {
    /** 查询架次信息列表 */
    getList() {
      this.loading = true
      listSortie(this.queryParams).then(response => {
        this.sortieList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
      ;(this.checkList = ['1', '2']), (this.selectedSortieDataType = '')
      this.batchNo = ''
    },
    cancelSelectModel() {
      this.dialogSelectModel = false
      this.cancel()
      this.selectModelVal = ''
      this.parameterList = []
      this.selectSortieParams = []
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        aircraftNumber: null,
        sortieNumber: null,
      }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
      this.currentSelection = selection
    },
    handle(row) {
      console.log('故障诊断', row)
      this.reset()
      const id = row.id
      getSortie(id).then(response => {
        this.form = response.data
        this.open = true
        this.title = '故障诊断信息'
      })
      listSortieParameterAll({ sortieNo: row.sortieNumber }).then(response => {
        this.sortieParameterAllList = response.data
        this.loading = false
      })
    },
    handleSortieData(value) {
      console.log('value', value)
      this.selectSortieId = value.id
      this.selectedSortieDataType = value.type
      this.batchNo = value.batchNo
    },
    submitForm() {
      if (this.selectedSortieDataType === '') {
        this.$message.error(`请选择架次数据`)
      } else {
        this.checkList = this.checkList.map(str => parseInt(str, 10))
        this.open = false
        this.dialogSelectModel = true
        if (this.checkList[0] === 1) {
          this.title = '请选择异常值剔除模型'
          // this.FABtnText = '完成'
        } else {
          this.title = '请选择缺失值补全模型'
        }
        const data = {
          pageNum: 1,
          pageSize: 10,
          type: this.checkList[0],
        }
        modelListAll(data).then(response => {
          this.modelOptions = response.data
          this.loading = false
        })
      }
    },
    modelSelectHandel(val) {
      this.parameterList = []
      this.selectSortieParams = []
      this.selectModelVal = val.name
      this.selectSortieParams = JSON.parse(val.dataParams)
      this.modelId = val.id
      getSortieParams(this.selectSortieId).then(response => {
        response.data.forEach(item => {
          this.parameterList.push({
            value: item,
            desc: item,
          })
        })
      })
    },
    back() {
      this.dialogSelectModel = false
      this.open = true
      this.title = '故障诊断信息'
      this.selectModelVal = ''
      this.parameterList = []
      this.selectSortieParams = []
    },
    begin() {
      this.dialogResult = false
      this.checkList = this.checkList.map(str => parseInt(str, 10))
      if (this.checkList[0] === 3) {
        this.falseAlarmBegin()
      } else if (this.checkList[0] === 4) {
        this.groundDiagnosisBegin()
      } else {
        this.deepIsolationBegin()
      }
    },
    delAbnormalBegin() {
      this.dialogSelectModel = false
      this.title = '异常值剔除模型执行中'
      this.dialogProgress = true
      const data = {
        modelId: this.modelId,
        sortieNo: this.form.sortieNumber,
        batchNo: this.batchNo,
        dataType: this.checkList[0],
        dataId: this.selectSortieId,
        dataParams: this.selectSortieParams,
      }
      console.log('data', data)
      if (!this.timer) {
        this.timer = setInterval(() => {
          this.percentageVal += 1
          if (this.percentageVal == 98) {
            clearInterval(this.timer)
            this.timer = null
            beginModel(data).then(response => {
              if (response.code === 200) {
                this.$message.success('执行成功')
                this.groundDiagnosisResultText = response.data
                this.percentageVal = 50
                this.dialogProgress = false
                this.dialogResult = true
                this.title = '异常值剔除结果'
                this.showFlag = this.checkList[0]
                this.selectModelVal = ''
                this.checkList.shift()
              } else {
                this.$message.error(response.msg)
              }
            })
          }
        }, 50)
      }
    },
    missValCompletion() {
      this.dialogSelectModel = false
      this.title = '缺失值补全模型执行中'
      this.dialogProgress = true
      const data = {
        modelId: this.modelId,
        sortieNo: this.form.sortieNumber,
        batchNo: this.batchNo,
        dataType: this.checkList[0],
        dataId: this.selectSortieId,
        dataParams: this.selectSortieParams,
      }
      console.log('data', data)
      if (!this.timer) {
        this.timer = setInterval(() => {
          this.percentageVal += 1
          if (this.percentageVal == 98) {
            clearInterval(this.timer)
            this.timer = null
            beginModel(data).then(response => {
              if (response.code === 200) {
                this.$message.success('执行成功')
                this.groundDiagnosisResultText = response.data
                this.percentageVal = 50
                this.dialogProgress = false
                this.dialogResult = true
                this.title = '缺失值补全结果'
                this.showFlag = this.checkList[0]
                this.selectModelVal = ''
                this.checkList.shift()
              } else {
                this.$message.error(response.msg)
              }
            })
          }
        }, 50)
      }
    },
    next() {
      if (this.FABtnText === '完成') {
        this.dialogResult = false
        this.cancelSelectModel()
        this.FABtnText = '下一步'
      } else {
        this.submitForm()
      }
    },
  },
}
</script>
<style scoped>
.progress {
  top: 35%;
}
::v-deep .clearMargin {
  margin-bottom: 0;
}
.back {
  margin-left: -100px;
  margin-top: -25px;
}
</style>