pqs-9100_client/frontend/src/views/home/components/comparePreTest.vue

<template>
  <div>
    <el-tabs type="border-card">
      <el-tab-pane label="预检测项目">
        <div class="form-grid">
          <el-checkbox v-for="(item, index) in detectionOptions" v-model="item.selected" :key="index"
                       :label="item.name" disabled></el-checkbox>
        </div>
      </el-tab-pane>
    </el-tabs>

    <div class="test-dialog">
      <div class="dialog-left">
        <el-steps direction="vertical" :active="activeIndex" :process-status="currentStepStatus"
                  finish-status="success">
          <el-step :status="step1" title="设备通讯校验"/>
          <el-step :status="step2" title="模型一致性校验"/>
          <el-step :status="step3" title="实时数据对齐验证" v-if="!props.onlyWave"/>
          <el-step :status="step4" title="相序校验"/>
          <!-- <el-step :status="step6" title="遥控录波功能验证"/> -->
          <el-step :status="step5" :title="ts === 'error'? '检测失败':ts === 'process'? '检测中':ts === 'success'? '检测成功':'待检测'"/>
        </el-steps>
      </div>
      <div class="dialog-right">
        <el-collapse v-model="collapseActiveName" accordion>
          <el-collapse-item title="设备通讯校验" name="1">
            <div class="div-log">
              <p v-for="(item, index) in step1InitLog" :key="index"
                 :style="{ color: item.type === 'error' ? '#F56C6C' : 'var(--el-text-color-regular)' }">
                {{ item.log }} <br/>
              </p>
            </div>
          </el-collapse-item>
          <el-collapse-item title="模型一致性校验" name="2">
            <div class="div-log">
              <p v-for="(item, index) in step2InitLog" :key="index"
                 :style="{ color: item.type === 'error' ? '#F56C6C' : 'var(--el-text-color-regular)' }">
                {{ item.log }} <br/>
              </p>
            </div>
          </el-collapse-item>
          <el-collapse-item  name="3" v-if="!props.onlyWave">
              <template #title>
                实时数据对齐验证
                <el-icon class="title-icon" @click="openDialog" v-if="isShowDialog"><InfoFilled/></el-icon>
              </template>
            <div class="div-log">
              <p v-for="(item, index) in step3InitLog" :key="index"
                 :style="{ color: item.type === 'error' ? '#F56C6C' : 'var(--el-text-color-regular)' }">
                {{ item.log }} 
                <br/>
              </p>
            </div>
          </el-collapse-item>
           <el-collapse-item title="相序校验" name="4">
            <div class="div-log">
              <p v-for="(item, index) in step4InitLog" :key="index"
                 :style="{ color: item.type === 'error' ? '#F56C6C' : 'var(--el-text-color-regular)' }">
                {{ item.log }} <br/>
              </p>
            </div>
          </el-collapse-item>
          <!-- <el-collapse-item title="遥控录波功能验证" name="3">
            <div class="div-log">
              <p v-for="(item, index) in step3InitLog" :key="index"
                 :style="{ color: item.type === 'error' ? '#F56C6C' : 'var(--el-text-color-regular)' }">
                {{ item.log.split('&&')[0] }}
                <br v-if="item.log.includes('&&')"/>
                &nbsp;&nbsp;&nbsp;&nbsp;{{ item.log.split('&&')[1] }}

                <br v-if="item.log.includes('&&')"/>
                &nbsp;&nbsp;&nbsp;&nbsp;{{ item.log.split('&&')[2] }}

              </p>
            </div>
          </el-collapse-item> -->
        </el-collapse>
      </div>
    </div>
  </div>
  <RealTimeData ref="realTimeDataRef" />
</template>
<script lang="tsx" setup name="preTest">
import { ElMessage, ElMessageBox, StepProps } from 'element-plus'
import { computed, PropType, ref, toRef, watch } from 'vue'
import RealTimeData from './realTimeDataAlign.vue'

const realTimeDataRef = ref()


const step1InitLog = ref([
  {
    type: 'info',
    log: '暂无数据，等待检测开始',
  },
])

const step2InitLog = ref([
  {
    type: 'info',
    log: '暂无数据，等待检测开始',
  },
])

const step3InitLog = ref([
  {
    type: 'info',
    log: '暂无数据，等待检测开始',
  },
])

const step4InitLog = ref([
  {
    type: 'info',
    log: '暂无数据，等待检测开始',
  },
])



const isShowDialog = ref(false)
const collapseActiveName = ref('1')
const activeIndex = ref(0)
const activeTotalNum = computed(() => {
  let count = 4; // 基础步骤数：设备通讯校验、模型一致性校验、相序校验、最终状态
  if (props.onlyWave) {
    count++; // 添加实时数据对齐验证步骤
  }
  return count;
});
const step1 = ref<StepProps['status']>('wait')
const step2 = ref<StepProps['status']>('wait')
const step3 = ref<StepProps['status']>('wait')
const step4 = ref<StepProps['status']>('wait')
const step5 = ref<StepProps['status']>('wait')


//定义与预检测配置数组
const detectionOptions = ref([
  {
    id: 0,
    name: "设备通讯校验",
    selected: true,
  },
  {
    id: 1,
    name: "模型一致性校验",
    selected: true,
  },
  {
    id: 2,
    name: "实时数据对齐验证",
    selected: true,
  },
  {
    id: 3,
    name: "相序校验",
    selected: true,
  },
]);

const currentStepStatus = ref<'error' | 'finish' | 'wait' | 'success' | 'process'>('finish');

const props = defineProps({
  testStatus: {
    type: String,
    default: 'wait'
  },
  webMsgSend: {
    type: Object,
    default: () => ({})
  },
    mapping: {
    type: Object as PropType<Record<string, Record<string, string>>>,
    default: () => ({})
  },
  onlyWave: {
    type: Boolean,
    default: false
  }
})


const testStatus = toRef(props, 'testStatus');
const webMsgSend = toRef(props, 'webMsgSend');
const ts = ref('');


// 在 script setup 中定义接口
interface ChannelData {
  devNum: string;
  standardDevInfo: string;
  dataList: {
    timeDev: string | null;
    uaDev: number | null;
    ubDev: number | null;
    ucDev: number | null;
    timeStdDev: string | null;
    uaStdDev: number | null;
    ubStdDev: number | null;
    ucStdDev: number | null;
  }[];
}

interface DeviceData {
  devName: string;
  channelDataList: ChannelData[];
}

// 修改 testDataStructure 的类型声明
const testDataStructure = ref<Record<string, DeviceData>>({});

watch(webMsgSend, function (newValue, oldValue) {
  if(testStatus.value == 'success' || testStatus.value == 'error'){
    return
  }
  if (testStatus.value !== 'waiting') {
    if(newValue.code == 25004){
      ElMessage.error('接收数据超时！')
      ts.value = 'error'
      step5.value = 'error'
    }else if(newValue.code == 10550){
      ElMessage.error('设备连接异常!')
      ts.value = 'error'
      step5.value = 'error'
    }
    switch (newValue.requestId) {
      case 'yjc_sbtxjy':
        if (newValue.code == 10200) {
          step1InitLog.value.push({
            type: 'info',
            log: newValue.data,
          })
        }
        if (newValue.code == 10201) {
          step1.value = 'process'
          step1InitLog.value = [{
            type: 'wait',
            log: '正在进行设备通讯校验.....',
          }];
        }
        if (newValue.code == 10551) {
          step1InitLog.value.push({
            type: 'error',
            log: newValue.data + '设备触发报告异常!',
          })
          step1.value = 'error'
          ts.value = 'error'
          step5.value = 'error'
        }
        if (newValue.code == 10552) {
          step1InitLog.value = [{
            type: 'error',
            log: '存在已经初始化步骤,执行自动关闭,请重新发起检测！',
          }];
          step1.value = 'error'
          ts.value = 'error'
          step5.value = 'error'
        }
        if (newValue.code == 25001) {
          step1InitLog.value.push({
            type: 'info',
            log: newValue.data,
          })
          activeIndex.value = 1
          step1.value = 'success'
          step2.value = 'process'
        }
        if(newValue.code == 10550){
          step1InitLog.value = [{
            type: 'error',
            log: '设备通讯校验时，设备连接异常！',
          }];
          step1.value = 'error'
          ts.value = 'error'
          step5.value = 'error'
        }
        break;
      case 'record_wave_step1':
        if(newValue.code == 10550){
          step1InitLog.value = [{
            type: 'error',
            log: '录波校验时，设备连接异常！',
          }];
          step1.value = 'error'
          ts.value = 'error'
          step5.value = 'error'
        }
        if (newValue.code == 25002) { //某一路录波校验失败
          step1InitLog.value.push({
            type: 'error',
            log: newValue.data,
          })
        } else if (newValue.code == 25003) { //最终失败
          step1.value = 'error'
          ts.value = 'error'
          step5.value = 'error'
        }
        break;
      case 'yjc_mxyzxjy':
        if (newValue.code == 10200) { //单个监测点成功
          step2InitLog.value.push({
            type: 'info',
            log: newValue.data + '模型一致性检验成功!',
          })
        }
        if (newValue.code == 10201) {
          step2.value = 'process'
          step2InitLog.value = [{
            type: 'wait',
            log: '正在进行模型一致性校验.....',
          }];
        }
        if(newValue.code == 10550){
          step2InitLog.value = [{
            type: 'error',
            log: '模型一致性校验时，设备连接异常！',
          }];
          step2.value = 'error'
          ts.value = 'error'
          step5.value = 'error'
        }
        if (newValue.code == 25002) { //单个监测点失败
          step2InitLog.value.push({
            type: 'error',
            log: newValue.data + '模型一致性检验失败!',
          })
        }
        if (newValue.code == 25001) { //最终成功
          step2.value = 'success'
          step3.value = 'process'
          activeIndex.value = 2
        }
        if (newValue.code == 25003) { //最终失败
          step2.value = 'error'
          ts.value = 'error'
          step5.value = 'error'
        }
        break;
      case 'yjc_align':
        if (newValue.code == 10200) { //单个监测点成功
          step3InitLog.value.push({
            type: 'info',
            log: newValue.data + '数据对齐检验成功!',
          })
        }
        if (newValue.code == 10201) {
          step3.value = 'process'
          step3InitLog.value = [{
            type: 'wait',
            log: '正在进行数据对齐检验.....',
          }];
        }
        if(newValue.code == 10550){
          step3InitLog.value = [{
            type: 'error',
            log: '实时数据对齐时，设备连接异常！',
          }];
          step3.value = 'error'
          ts.value = 'error'
          step5.value = 'error'
        }
        if (newValue.code == 25002) { //单个监测点失败

          step3InitLog.value.push({
            type: 'error',
            log: newValue.data + '数据对齐检验失败!',
          })
        }
        if (newValue.code == 25001 && newValue.data) { //最终成功
          isShowDialog.value = true
          step3.value = 'success'
          step4.value = 'process'
          activeIndex.value = 3
          testDataStructure.value = newValue.data
        }
        if (newValue.code == 25003) { //最终失败

          isShowDialog.value = true
          step3.value = 'error'
          ts.value = 'error'
          step5.value = 'error'
          testDataStructure.value = newValue.data
        }
        break;
      case 'YJC_xujy':
        if (newValue.code == 10200) {
          step4InitLog.value.push({
            type: 'info',
            log: newValue.data,
          })
        }
        if (newValue.code == 10201) {
          step4.value = 'process'
          step4InitLog.value = [{
            type: 'wait',
            log: '正在进行相序性检.....',
          }];
        }
        if(newValue.code == 10550){
          step4InitLog.value = [{
            type: 'error',
            log: '相序校验时，设备连接异常！',
          }];
          step4.value = 'error'
          ts.value = 'error'
          step5.value = 'error'
        }
        if (newValue.code == 25002) {
          step4InitLog.value.push({
            type: 'error',
            log: newValue.data,
          })
        }
        if (newValue.code == 25003) {
          step4InitLog.value.push({
            type: 'error',
            log: newValue.data,
          })
          step4.value = 'error'
          ts.value = 'error'
          step5.value = 'error'
        }
        if (newValue.code == 25001) {
          step4.value = 'success'
          step5.value = 'success'
          ts.value = 'success'
          activeIndex.value = 4
        }
        break;
      case 'quit':
        break;
      case 'connect':
        switch (newValue.operateCode) {
          case "Contrast_Dev":
            step1.value = 'error'
            step1InitLog.value = [{
              type: 'error',
              log: '设备服务端连接失败!',
            }];
            ts.value = 'error'
            step5.value = 'error'
            break;
        }
        break;
      case 'unknown_operate':

        break;
      case 'error_flow_end':
        ElMessageBox.alert(`当前流程存在异常结束！`, '检测失败', {
          confirmButtonText: '确定',
          type: 'error',
        })
        ts.value = 'error'
        step5.value = 'error'
        break;
      case 'socket_timeout':
        ElMessageBox.alert(`设备连接异常，请检查设备连接情况！`, '检测失败', {
          confirmButtonText: '确定',
          type: 'error',
        })
        ts.value = 'error'
        step5.value = 'error'
        break;
      case 'server_error':
        ElMessageBox.alert('服务端主动关闭连接!', '初始化失败', {
          confirmButtonText: '确定',
          type: 'error',
        })
        ts.value = 'error'
        step5.value = 'error'
        break;
      case 'device_error':
        ElMessageBox.alert('设备主动关闭连接!', '初始化失败', {
          confirmButtonText: '确定',
          type: 'error',
        })
        ts.value = 'error'
        step5.value = 'error'
        break;
      case 'yjc_xyjy' :
        if (newValue.code == 10552) { 
                ElMessageBox.alert('重复的初始化操作!', '检测失败', {
                  confirmButtonText: '确定',
                  type: 'error',
                })
                ts.value = 'error'
                step5.value = 'error'
        }
        break;
    }
  }
})

// watch(activeIndex, function (newValue, oldValue) {
//   if (newValue <= activeTotalNum.value - 2) {
//     collapseActiveName.value = (newValue + 1).toString()
//   } else {
//     collapseActiveName.value = newValue.toString()
//   }
// })

watch(activeIndex, function (newValue, oldValue) {
  if(props.onlyWave === true)
  {
    if (Number(collapseActiveName.value) < activeTotalNum.value - 2) {
      if(newValue == 2){
            collapseActiveName.value = '4'
      }else{
            collapseActiveName.value = (newValue + 1).toString()
      }
    }
  } else
  { 
    if (Number(collapseActiveName.value) < activeTotalNum.value) {
      collapseActiveName.value = (newValue + 1).toString()
    }

  }
})

//监听goods_sn的变化
watch(testStatus, function (newValue, oldValue) {
  ts.value = props.testStatus;
  if (ts.value === 'start') {
    ts.value = 'process'
  } else if (ts.value === 'waiting') {
    activeIndex.value = 0
    step1InitLog.value = [
      {
        type: 'info',
        log: '暂无数据，等待检测开始',
      },
    ]
    step1.value = 'finish'
    step2.value = 'wait'
    step3.value = 'wait'
    step4.value = 'wait'
    step5.value = 'wait'
  }
})


const emit = defineEmits(['update:testStatus']);
//监听sn
watch(ts, function (newValue, oldValue) {
  //修改父组件
  emit('update:testStatus', ts.value)
})

// 定义一个初始化参数的方法
function initializeParameters() {
  activeIndex.value = 0
  step1.value = 'wait'
  step2.value = 'wait'
  step3.value = 'wait'
  step4.value = 'wait'
  step5.value = 'wait'

  step1InitLog.value = [
    {
      type: 'info',
      log: '暂无数据，等待检测开始',
    },
  ]
  step2InitLog.value = [
    {
      type: 'info',
      log: '暂无数据，等待检测开始',
    },
  ]
  step3InitLog.value = [
    {
      type: 'info',
      log: '暂无数据，等待检测开始',
    },
  ]
  step4InitLog.value = [
    {
      type: 'info',
      log: '暂无数据，等待检测开始',
    },
  ]

  // 清空实时数据对齐验证的数据

  testDataStructure.value = {}
  isShowDialog.value = false
}

const openDialog = () => { 

  realTimeDataRef.value.open(props.mapping,testDataStructure.value)
}

defineExpose({
  initializeParameters,
});
</script>
<style scoped lang="scss">
.title-icon {
  margin-left: 10px;
  cursor: pointer;
  font-size: 16px;
  vertical-align: middle;
}

.test-dialog {
  height: 350px;
  display: flex;
  flex-direction: row;
  /* 横向排列 */
  margin-top: 20px;
}

.dialog-left {
  width: 15%;
  margin-left: 20px;
}

.dialog-right {
  margin-left: 20px;
  width: 80%;
  height: 100%;
}

.dialog-right :deep(.el-collapse-item__header) {
  font-size: 16px;
}

.div-log {
  height: 145px;
  overflow-y: auto;
  padding-left: 10px;

  p {
    margin: 5px 0;
    font-size: 14px;
  }

}
</style>