pqs-9100_client/frontend/src/views/home/components/preTest.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"></el-checkbox>
          <!-- disabled="true" -->
        </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="协议校验" />
          <el-step :status="step4" title="相序校验" />
          <el-step :status="step5" title="检测完成" />
        </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 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 }} <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>
      </div>
    </div>
  </div>

</template>
<script lang="tsx" setup name="preTest">
import {ElMessage} from "element-plus";
import { defineExpose } from 'vue';
const step1InitLog = ref([
  {
    type: 'info',
    log: '暂无数据，等待检测开始',
  },
])

const step1Log = ref([
  {
    type: 'info',
    log: '源通讯校验成功',
  },
])

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

const step2Log = ref([
  {
    type: 'info',
    log: '被检设备：240001通讯校验成功',
  },
  {
    type: 'info',
    log: '被检设备：240002通讯校验成功',
  },
  {
    type: 'info',
    log: '被检设备：240003通讯校验成功',
  },
  {
    type: 'info',
    log: '被检设备：240004通讯校验成功',
  },
])

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

const step3Log = ref([
  {
    type: 'info',
    log: '被检设备：240001协议校验成功',
  },
  {
    type: 'info',
    log: '被检设备：240002协议校验成功',
  },
  {
    type: 'info',
    log: '被检设备：240003协议校验成功',
  },
  {
    type: 'info',
    log: '被检设备：240004协议校验成功',
  },
])


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

const step4Log = ref([
  {
    type: 'info',
    log: '被检设备：240001相序校验成功',
  },
  {
    type: 'info',
    log: '被检设备：240002相序校验成功',
  },
  {
    type: 'info',
    log: '被检设备：240003相序校验成功',
  },
  {
    type: 'info',
    log: '被检设备：240004相序校验成功',
  },
])

const collapseActiveName = ref('1')
const activeIndex = ref(0)
const activeTotalNum = ref(5)
const step1 = ref('wait')
const step2 = ref('wait')
const step3 = ref('wait')
const step4 = ref('wait')
const step5 = ref('wait')

//定义与预检测配置数组
const detectionOptions = ref([
  {
    id: 0,
    name: "源通讯检测",//判断源通讯是否正常
    selected: true,
  },
  {
    id: 1,
    name: "设备通讯检测",//判断设备的IP、Port、识别码、秘钥是否正常
    selected: true,
  },
  {
    id: 2,
    name: "协议校验",//ICD报告触发测试
    selected: true,
  },
  {
    id: 3,
    name: "相序校验",//判断装置的接线是否正确
    selected: true,
  },
  //   {
  //     id: 4,
  //     name: "守时校验",//判断装置24小时内的守时误差是否小于1s
  //     selected: true,
  //   },
  //   {
  //     id: 5,
  //     name: "通道系数校准",//通过私有协议与装置进行通讯，校准三相电压电流的通道系数
  //     selected: true,
  //   },
  // {
  //   id: 6,
  //   name: "实时数据比对",
  // },
  // {
  //   id: 7,
  //   name: "录波数据比对",
  // },
]);

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

const props = defineProps({
  testStatus: {
    type: String,
    default: 'wait'
  },
  webMsgSend: {
    type: Object,
    default: () => ({})
  }
})





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

watch(webMsgSend,function (newValue,oldValue){
 // console.log(newValue)

  switch (newValue.requestId){
    case 'yjc_ytxjy':
      switch (newValue.operateCode){
        case 'INIT_GATHER':
          if(newValue.code == 10200) {
            step1InitLog.value.push({
              type: 'info',
              log: '源初始化成功!',
            })
            activeIndex.value = 1
            step1.value = 'success'
            step2.value = 'process'
          }else if(newValue.code == 10201){
            step1.value = 'process'
            step1InitLog.value = [{
              type: 'wait',
              log: '正在进行源初始化!',
            }];
          }else if(newValue.code == 10552){
            ElMessage.error(newValue.code)
            step1.value = 'error'
            ts.value = 'error'
          }else if(newValue.code == 10523){
            step1.value = 'error'
            ts.value = 'error'
            step1InitLog.value = [{
              type: 'error',
              log: '源连接失败!',
            }];
          }
          break;




      }
      break;
    case 'yjc_sbtxjy':

      switch (newValue.operateCode) {
        case 'INIT_GATHER$01':
          if (newValue.code == 10200) {
            step2InitLog.value.push({
              type: 'info',
              log: newValue.data+'设备通讯校验成功!',
            })

          } else if (newValue.code == 10201) {
            step2.value = 'process'
            step2InitLog.value = [{
              type: 'wait',
              log: '正在进行设备通讯校验.....',
            }];
          } else if (newValue.code == 10550) {
            step2InitLog.value.push({
              type: 'error',
              log: newValue.data+'设备连接异常!',
            })
            step2.value = 'error'
            ts.value = 'error'
          }else if (newValue.code == 10551) {
            step2InitLog.value.push({
              type: 'error',
              log: newValue.data+'设备触发报告异常!',
            })
            step2.value = 'error'
            ts.value = 'error'
          } else if (newValue.code == 10552) {
            //ElMessage.error("存在已经初始化步骤,已经自动关闭,请重新发起检测！")
            step2InitLog.value = [{
              type: 'wait',
              log: '存在已经初始化步骤,执行自动关闭,请重新发起检测！',
            }];
            step2.value = 'error'
            ts.value = 'error'
          } else if (newValue.code == 25001) {
            activeIndex.value = 2
            step2.value = 'success'
            step3.value = 'process'
          }
          break;
      }

      break;
    case 'yjc_xyjy':
      switch (newValue.operateCode) {
        case 'INIT_GATHER$01':
          if (newValue.code == 10200) {
            step3InitLog.value.push({
              type: 'info',
              log: '统计数据协议校验:'+newValue.data+'通讯协议校验成功!',
            })

          } else if (newValue.code == 10201) {
            step3.value = 'process'
            step3InitLog.value = [{
              type: 'wait',
              log: '正在进行通讯协议校验.....',
            }];
          } else if (newValue.code == 10550) {
            step3InitLog.value.push({
              type: 'error',
              log: newValue.data+'设备连接异常!',
            })
            step3.value = 'error'
            ts.value = 'error'
          }else if (newValue.code == 10551) {
            step3InitLog.value.push({
              type: 'error',
              log: newValue.data+'设备触发报告异常!',
            })
            step3.value = 'error'
            ts.value = 'error'
          }else if (newValue.code == 10552) {
            step3.value = 'error'
            //ElMessage.error("存在已经初始化步骤,已经自动关闭,请重新发起检测！")
            step3InitLog.value = [{
              type: 'wait',
              log: '存在已经初始化步骤,执行自动关闭,请重新发起检测！',
            }];
            ts.value = 'error'
          }
          break;
        case 'INIT_GATHER$02':
          if (newValue.code == 10200) {
            step3InitLog.value.push({
              type: 'info',
              log: '实时数据协议校验:'+newValue.data+'通讯协议校验成功!',
            })

          } else if (newValue.code == 10201) {
            step3.value = 'process'
            step3InitLog.value = [{
              type: 'wait',
              log: '正在进行通讯协议校验.....',
            }];
          }else if (newValue.code == 10550) {
            step3InitLog.value.push({
              type: 'error',
              log: newValue.data+'设备连接异常!',
            })
            step3.value = 'error'
            ts.value = 'error'
          }else if (newValue.code == 10551) {
            step3InitLog.value.push({
              type: 'error',
              log: newValue.data+'设备触发报告异常!',
            })
            step3.value = 'error'
            ts.value = 'error'
          } else if (newValue.code == 10552) {
            step3.value = 'error'
            //ElMessage.error("存在已经初始化步骤,已经自动关闭,请重新发起检测！")
            step3InitLog.value = [{
              type: 'wait',
              log: '存在已经初始化步骤,执行自动关闭,请重新发起检测！',
            }];
            ts.value = 'error'
          }
          break;
        case 'INIT_GATHER$03':
          if (newValue.code == 10200) {
            step3InitLog.value.push({
              type: 'info',
              log: '暂态数据协议校验:'+newValue.data+'通讯协议校验成功!',
            })

          } else if (newValue.code == 10201) {
            step3.value = 'process'
          }else if (newValue.code == 10550) {
            step3InitLog.value.push({
              type: 'error',
              log: newValue.data+'设备连接异常!',
            })
            step3.value = 'error'
            ts.value = 'error'
          }else if (newValue.code == 10551) {
            step3InitLog.value.push({
              type: 'error',
              log: newValue.data+'设备触发报告异常!',
            })
            step3.value = 'error'
            ts.value = 'error'
          } else if (newValue.code == 10552) {
            //ElMessage.error("当前步骤已经初始化,执行自动关闭,请重新发起检测！")
            step3.value = 'error'
            step3InitLog.value = [{
              type: 'wait',
              log: '存在已经初始化步骤,执行自动关闭,请重新发起检测！',
            }];
            ts.value = 'error'
          } else if (newValue.code == 25001) {
            activeIndex.value = 3
            step3.value = 'success'
            step4.value = 'process'
          }
          break;
      }

      break;
    case 'YJC_xujy':
      switch (newValue.operateCode) {
        case 'OPER_GATHER':
          if (newValue.code == 10200) {
            step4InitLog.value.push({
              type: 'info',
              log: '源已接通!',
            })

          } else if (newValue.code == 10201) {
            step4.value = 'process'
            step4InitLog.value = [{
              type: 'wait',
              log: '正在接通源.....',
            }];
          } else if (newValue.code == 10552) {
            ElMessage.error("存在已经初始化步骤,已经自动关闭,请重新发起检测！")
            step4.value = 'error'
            ts.value = 'error'
          } else if (newValue.code == 10520) {
            step4.value = 'error'
            step4InitLog.value.push({
              type: 'error',
              log: '解析报文异常',
            })
            ts.value = 'error'
          }
          break;

        case 'DATA_REQUEST$02':
          if (newValue.code == 10200) {
            let type = 'info'
            if(newValue.data.includes('不合格')){
              type = 'error'
            }
            step4InitLog.value.push({
              type: type,
              log: '相序校验:'+newValue.data,
            })

          } else if (newValue.code == 10201) {
            step4.value = 'process'
            step4InitLog.value = [{
              type: 'wait',
              log: '获取数据相序校验数据!',
            }];
          }
          else if (newValue.code == 25001) {
            step4.value = 'success'
            step5.value = 'success'
            step4InitLog.value.push({
              type: 'wait',
              log: '相序校验成功!',
            })
          }
          activeIndex.value = 5
          ts.value = 'success'
          break
      }

      break;
    case 'quit':
      break;
    case 'connect':
      switch (newValue.operateCode){
        case "Source":
          step1.value = 'error'
          step1InitLog.value = [{
            type: 'error',
            log: '源服务端连接失败!',
          }];
          ts.value = 'error'
          break;
        case "Dev":
          step2.value = 'error'
          step2InitLog.value = [{
            type: 'error',
            log: '设备服务端连接失败!',
          }];
          ts.value = 'error'
          break;
      }
      break;
    case 'unknown_operate':

      break;
  }

})

watch(activeIndex, function (newValue, oldValue) {
  if (newValue <= activeTotalNum.value - 2){
    collapseActiveName.value = (newValue+1).toString()
  } else{
    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 = 'process'
  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: '暂无数据，等待检测开始',
    },
  ]

}





defineExpose({
  initializeParameters,
});
</script>
<style scoped lang="scss">
.test-dialog {
  height: 350px;
  display: flex;

  flex-direction: row;
  /* 横向排列 */
  margin-top: 20px;
  /* .dialog-left{
        margin-right: 20px;
    } */
}

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

/* .dialog-left :deep(.test-head-steps){
       height: 80px;
       /* margin-bottom: 10px;
   } 
   */

/* .dialog-left  :deep(.el-step__title)  {
   font-size: 18px !important; /* 设置标题字体大小
 } */

/* .dialog-left  :deep(.el-step__icon-inner) {
     font-size: 24px !important;
   } */

.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>