gphm_web/src/views/manage/reasoning/index.vue

<template>
  <div class="card content-box-c">
    <div class="steps-c">
      <el-steps :active="active" align-center>
        <el-step title="数据选择" description="数据选择" />
        <el-step title="测试性模型选择" description="测试性模型选择" />
        <el-step title="增强诊断" description="增强诊断" />
        <el-step title="结果展示" description="结果展示" />
      </el-steps>
    </div>
    <div class="steps-box">
      <ProForm ref="formRef" :items-options="itemsOptions" :model="model" :form-options="_formOptions">
        <template #dataId>
          <ProTable
            ref="proTable"
            :columns="sortieColumns"
            :tool-button="false"
            :request-auto="false"
            row-key="id"
            :is-show-search="false"
            :init-param="initParam"
            :request-api="listSortieParameterAllApi"
            :pagination="false"
            height="300"
            @row-click="rowClick"
          >
          </ProTable>
        </template>
        <template #faultCode>
          <ProTable
            ref="proTable2"
            :columns="warningColumns"
            :tool-button="false"
            row-key="id"
            :is-show-search="false"
            :request-api="getWarningListApi"
            max-height="500"
            :init-param="initParam"
            :data-callback="dataCallback"
            @row-click="rowClickWarning"
          >
          </ProTable>
        </template>
        <template #dataParams="{ formModel }">
          <el-transfer
            v-model="formModel.dataParams"
            @change="change"
            :data="parameterList"
            filterable
            filter-placeholder="请输入参数名称"
            :titles="['所有参数', '选中参数']"
          >
          </el-transfer>
        </template>
      </ProForm>
      <div class="card content-box-c" v-if="active === 4">结果......</div>
    </div>
    <div class="step-footer">
      <el-button @click="pre" v-show="active > 1">上一步</el-button>
      <el-button type="primary" @click="next" v-show="active < 3">下一步</el-button>
      <el-button type="primary" v-show="[2, 3].includes(active)" @click="onSubmit()">提交</el-button>
    </div>
  </div>
</template>

<script setup lang="ts" name="reasoning">
import { ref, reactive, onMounted } from 'vue'
import ProForm from '@/components/ProForm/index.vue'
import ProTable from '@/components/ProTable/index.vue'
import { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
import type { TableColumnCtx } from 'element-plus/es/components/table/src/table-column/defaults'
import { updateModelInfoApi } from '@/api/modules/manage/modelInfo'
import { listSortieParameterAllApi, getWarningListApi, modelListAllApi, getSortieParamsApi } from '@/api/modules/manage/sortieParameter'
import { listSortieAllApi } from '@/api/modules/manage/sortie'
import { getDictsApi } from '@/api/modules/system/dictData'
// import { useRoute } from 'vue-router'
import { nextTick } from 'vue'
// const route = useRoute()
onMounted(() => {
  exeTypeChange()
})
const optionsModel = ref<any[]>([])
const formRef = ref<InstanceType<typeof ProForm> | null>(null)
let active = ref(1)
let model = ref({})
let activeModel = reactive({})
let parameterList = ref<any[]>([])
const proTable2 = ref<ProTableInstance>()
const proTable = ref<ProTableInstance>()
const dataCallback = (data: any) => {
  const page = proTable2.value!.pageable
  return {
    list: data.data,
    total: data.total,
    pageNum: page.pageNum,
    pageSize: page.pageSize
  }
}
const getTableList = (sortieNo: string) => {
  initParam.sortieNo = sortieNo
  initParam.types = getTypes()
}
const getTypes = () => {
  return [0]
}
// 参数初始化
const initParam = reactive({ sortieNo: formRef.value?.formModel.sortieNo || '=', types: [] as any })
// 单击行
const rowClick = async (row: any, column: TableColumnCtx<any>) => {
  if (column.property == 'radio') {
    formRef.value!.formModel.sortieNo = row.sortieNo
    formRef.value!.formModel.batchNo = row.batchNo
    formRef.value!.formModel.dataId = row.id
    const res = await getSortieParamsApi(row.id)
    parameterList.value = res.data.map(el => {
      return { key: el, label: el }
    })
  }
}
const rowClickWarning = async (row: any, column: TableColumnCtx<any>) => {
  if (column.property == 'radio') {
    formRef.value!.formModel.faultCode = row.faultCode
  }
}

const exeTypeEnum = [
  { value: '3', label: '虚警抑制' },
  { value: '4', label: '深度隔离' },
  { value: '5', label: '地面诊断' }
]
// 选择诊断类型后触发
const exeTypeChange = async (val?: any) => {
  const typeValue = getModelType(val)
  if (!typeValue) {
    optionsModel.value = []
    formRef.value!.proFormRef?.resetFields('modelObj')
    formRef.value!.formModel.modelObj = undefined
    formRef.value!.formModel.dataParams = []
  } else {
    const res = await modelListAllApi({ type: typeValue })
    optionsModel.value = res.data
  }
  setItemsOptions()
}

const getModelType = val => {
  if (active.value === 3) return val || formRef.value!.formModel.exeType
  else return 7
}

// 选择模型后触发
const modelChange = async () => {
  const val = formRef.value!.formModel.modelObj || {}
  formRef.value!.formModel.dataParams = JSON.parse(val.dataParams || '[]')
  // 测试性模型
  if (active.value === 2) {
    formRef.value!.formModel.testModelId = val.id
  }
  // 增强诊断型模型
  if (active.value === 3) {
    formRef.value!.formModel.modelId = val.id
  }
}
// 下一步
const next = () => {
  formRef.value!.proFormRef?.validate(valid => {
    if (valid) {
      formRef.value!.proFormRef?.clearValidate()
      activeModel[active.value] = Object.assign({}, formRef.value?.formModel)
      if (active.value++ > 4) return
      else {
        nextTick(() => {
          if (activeModel[active.value]) formRef.value!.formModel = Object.assign({}, activeModel[active.value])
          exeTypeChange()
          modelChange()
        })
      }
    }
  })
}
// 上一步
const pre = () => {
  activeModel[active.value] = Object.assign({}, formRef.value?.formModel)
  if (active.value-- < 1) return
  nextTick(() => {
    exeTypeChange()
    modelChange()
    if (activeModel[active.value]) formRef.value!.formModel = Object.assign({}, activeModel[active.value])
    if (formRef.value?.formModel.sortieNo) {
      getTableList(formRef.value?.formModel.sortieNo)
    }
  })
}
const _formOptions = {
  hasFooter: false
}
// 步长选择
const stepEnum = [
  { value: 1, label: '1帧/秒' },
  { value: 2, label: '2帧/秒' },
  { value: 5, label: '5帧/秒' },
  { value: 10, label: '10帧/秒' }
]
const onSubmit = () => {
  active.value = 4
  console.log('formRef.value', formRef.value)
}
const change = (val: any) => {
  const data = {
    id: formRef.value?.formModel.value.modelId,
    dataParams: JSON.stringify(val)
  }
  updateModelInfoApi(data)
}
let itemsOptions = ref<ProForm.ItemsOptions[]>([])
const setItemsOptions = () => {
  itemsOptions.value = [
    {
      label: '架次选择',
      prop: 'sortieNo',
      span: 12,
      rules: [{ required: true, message: '架次不能为空', trigger: 'blur' }],
      show: () => {
        return active.value === 1
      },
      compOptions: {
        elTagName: 'select',
        clearable: true,
        placeholder: '请架次选择',
        enum: listSortieAllApi,
        labelKey: 'sortieNumber',
        valueKey: 'sortieNumber',
        filterable: true,
        onChange: value => {
          if (value) getTableList(value)
        }
      }
    },
    {
      label: '步长',
      prop: 'step',
      span: 12,
      rules: [{ required: true, message: '步长不能为空', trigger: 'change' }],
      show: () => {
        return active.value === 1
      },
      compOptions: {
        elTagName: 'select',
        clearable: true,
        placeholder: '请选择步长',
        enum: stepEnum
      }
    },
    {
      label: '数据列表',
      prop: 'dataId',
      span: 24,
      rules: [{ required: true, message: '请选择数据', trigger: 'change' }],
      show: () => {
        return active.value === 1
      },
      compOptions: {
        elTagName: 'slot'
      }
    },
    {
      label: '诊断类型',
      prop: 'exeType',
      rules: [{ required: true, message: '诊断类型不能为空', trigger: 'blur' }],
      show: () => {
        return [3].includes(active.value)
      },
      compOptions: {
        elTagName: 'radio-group',
        placeholder: '请诊断类型',
        enum: exeTypeEnum,
        onChange: () => {
          exeTypeChange()
        }
      }
    },
    {
      label: '警告列表',
      prop: 'faultCode',
      span: 24,
      rules: [{ required: true, message: '请选择数据', trigger: 'change' }],
      show: () => {
        return formRef.value?.formModel.exeType === '3'
      },
      compOptions: {
        elTagName: 'slot'
      }
    },
    {
      label: '选择模型',
      prop: 'modelObj',
      rules: [{ required: true, message: '模型不能为空', trigger: 'change' }],
      show: () => {
        return [2, 3].includes(active.value)
      },
      compOptions: {
        style: {
          width: '50%'
        },
        elTagName: 'select',
        clearable: true,
        placeholder: '请选择模型',
        enum: optionsModel.value,
        labelKey: 'name',
        valueKey: 'col',
        onChange: () => {
          modelChange()
        }
      }
    },
    {
      label: '参数列表',
      prop: 'dataParams',
      span: 12,
      rules: [{ required: true, message: '参数不能为空', trigger: 'change' }],
      show: () => {
        return [2, 3].includes(active.value)
      },
      compOptions: {
        elTagName: 'slot'
      }
    }
  ]
}
// 架次数据
const sortieColumns = reactive<ColumnProps<any>[]>([
  { type: 'radio', fixed: 'left', width: 70, prop: 'radio' },
  {
    prop: 'sortieNo',
    label: '架次号'
  },
  {
    prop: 'batchNo',
    label: '批次号'
  },
  {
    prop: 'type',
    label: '数据类型',
    tag: true,
    enum: () => getDictsApi('data_type'),
    search: {
      el: 'select'
    },
    fieldNames: { label: 'dictLabel', value: 'dictValue' }
  }
])

// 虚警列表
const warningColumns = reactive<ColumnProps<any>[]>([
  { type: 'radio', fixed: 'left', width: 70, prop: 'radio' },
  {
    prop: 'sortieNo',
    label: '架次号'
  },
  {
    prop: 'faultName',
    label: '故障名称'
  },
  {
    prop: 'faultCode',
    label: '警告代码'
  }
])
</script>
<style scoped lang="scss">
@import './index.scss';
</style>