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

<template>
    <el-dialog  :title="dialogTitle" :model-value="dialogVisible" :before-close="beforeClose" @close="handleCancel" width="1200px" height="1000px" draggable>
       
      <div class="steps-container">
        <!-- simple -->
        <!-- :style="{color:node.label=='未检'?'#F56C6C':node.label=='检测中'?'#E6A23C':'#67C23A'}" -->
        <el-steps class="test-head-steps"  simple   :active="stepsActiveIndex"  process-status="finish" finish-status="success"  >
          <!-- style="height:100px"  -->
        <!-- <el-step title="预检测" :icon="getIcon(0)" /> -->
        <el-step title="预检测" :icon="stepsActiveIndex > 1 ? SuccessFilled :Edit" />
        <el-step title="守时检测" :icon="stepsActiveIndex > 1 ? SuccessFilled :UploadFilled" v-if="isTimeCheck"/>
        <!-- <el-step title="系数校准" :icon="stepsActiveIndex > 2 ? SuccessFilled :Odometer" /> -->
        <el-step title="正式检测" :icon="stepsActiveIndex > 3 ? SuccessFilled :Coin" />
        <el-step title="检测完成" :icon="stepsActiveIndex > 4 ? SuccessFilled :Key" />
        </el-steps>
      </div>
        <preTest ref="preTestRef" v-if="stepsActiveIndex === 0" v-model:testStatus="preTestStatus" :webMsgSend="webMsgSend"></preTest>
        <timeTest v-if="stepsActiveIndex === 1 && isTimeCheck" v-model:testStatus="timeTestStatus"></timeTest>
        <!-- <channelsTest v-if="stepsActiveIndex === 2" v-model:testStatus="channelsTestStatus"></channelsTest> -->
        <test v-if="stepsActiveIndex >= 2" v-model:testStatus="TestStatus"></test>

        <template #footer>
            <div>
                <!-- <el-button @click="handleCancel">取 消</el-button> -->
                <el-button type="primary" :icon="DArrowRight" v-if="stepsActiveIndex < 2 && ActiveStatue != 'success'" :disabled="skipDisabled"  @click="nextStep">跳过</el-button>
                <el-button type="primary" :icon="VideoPlay" v-if="ActiveStatue === 'waiting'" @click="handleSubmit">开始检测</el-button>
                <el-button type="danger" :icon="Close" v-if="ActiveStatue === 'process'" @click="handleSubmit">停止检测</el-button>
                <el-button type="danger" :icon="Close" v-if="ActiveStatue === 'paused'" @click="handleSubmit">继续检测</el-button>
                <el-button type="primary" :icon="Refresh" v-if="ActiveStatue === 'error'" @click="handleSubmit">重新检测</el-button>
                <el-button type="primary" :icon="Right" v-if="ActiveStatue === 'success'" @click="nextStep">{{nextStepText}}</el-button>
            </div>
        </template>
    </el-dialog>


</template>
  
  <script lang="tsx" setup name="testPopup">
  import {h, reactive, ref, watch} from 'vue';
  import {ElMessage, ElMessageBox} from 'element-plus'
  //import IndicatorTypeDialog from "@/views/machine/errorSystem/components/IndicatorTypeDialog.vue"; // 导入子组件
  import {
    Close,
    Coin,
    DArrowRight,
    Edit,
    Key,
    Odometer,
    Refresh,
    Right,
    SuccessFilled,
    UploadFilled,
    VideoPlay
  } from '@element-plus/icons-vue'
  import preTest from './preTest.vue'
  import timeTest from './timeTest.vue'
  import channelsTest from './channelsTest.vue'
  import { Device } from '@/api/device/interface/device';
  import socketClient from '@/utils/webSocketClient';

  import {startProTest} from '@/api/socket/socket'

  //import SvgIcon from '@/components/SvgIcon.vue';

//   import preTestIcon from '@/assets/icons/preTest.svg'

//   const preTestIcon = `
//   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
//   </svg>
// `;
  // const props = defineProps<{
  //   visible: boolean;
  //   dialogTitle: string;
    
  //   formData: {
  //       id: string;//误差体系表Id
  //       name: string;//误差体系名称
  //       standard_Name:string;//参照标准名称
  //       standard_Time:string;//标准推行时间
  //       dev_Level:string;//使用设备等级
  //       enable:number;//状态：0-不启用 1-启用
  //       state:number;//0-删除 1-正常
  //   };
  // }>();

  // const emit = defineEmits<{
  //   (e: 'update:visible', value: boolean): void;
  //   (e: 'submit', data: any): void;
  // }>();

  const skipDisabled = ref(false);
  const nextStepText = ref('下一步');
  const dialogVisible = ref(false)
//定义与预检测配置数组
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 stepsTotalNum = ref(4);//步骤总数
  const stepsActiveIndex = ref(0); //当前正在执行的步骤索引
  const ActiveStatue = ref('waiting');//当前步骤状态
  const preTestStatus = ref('waiting');//预检测执行状态
  const timeTestStatus = ref('waiting');//守时校验执行状态
  const channelsTestStatus = ref('waiting');//通道系数校准执行状态
  const TestStatus = ref('waiting');//正式检测执行状态
  const webMsgSend = ref();//webSocket推送的数据

  const dialogTitle = ref('');
  const isTimeCheck = ref(false)
  const preTestRef = ref(null);

  // 打开弹窗，可能是新增，也可能是编辑
  const open = (selection: Device.ResPqDev[],title: string,time:boolean) => {


const checkStates = selection.map(item => item.checkState);
    const allCheckStatesEqual = new Set(checkStates).size <= 1;

    if (!allCheckStatesEqual) {
      ElMessageBox.confirm(
        '所勾选设备检测状态不一致，请重新选择',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
      return
    }

    dialogTitle.value = title;
    dialogVisible.value = true;
    isTimeCheck.value = time

    if (preTestRef.value) {
      preTestRef.value.initializeParameters();
    }

    preTestStatus.value = 'waiting';//预检测执行状态
    //开始创建webSocket客户端
    const data = reactive({
      socketServe: socketClient.Instance,
    });
    const url = 'ws://localhost:7777/hello?name=cdf';
    socketClient.Instance.connect(url);
    data.socketServe = socketClient.Instance;
    data.socketServe.registerCallBack('aaa', (res) => {
      // 处理来自服务器的消息
      console.log('Received message:', res);
      // 根据需要在这里添加更多的处理逻辑

      if(res.code === 20000){
        ElMessage.error(message.message)
        loading.close()
      }else {
        webMsgSend.value = res
      }



    });


  }

  let loading;
  const handleSubmit = () => {
    skipDisabled.value = true
    console.log('=============',stepsActiveIndex.value)
    switch (stepsActiveIndex.value) {
      case 0:
        preTestStatus.value = 'start'


        /* loading = ElLoading.service({
           lock: true,
           text: '',
           background: 'rgb(255, 255, 255, 0)',
         })*/
        startProTest({
          userPageId: "cdf",
          devIds:["5eaba83670ff4d9daf892a62a5e13ea3","80b4b4f52a4c4064a18319525f8ac13c"],
          planId:"31cc203f3fa94fa39323ae7cc411cd66"
        }).then(res=>{



        })
        break;
      case 1:
        timeTestStatus.value = 'start'
        break;
        // case 2:
        //       channelsTestStatus.value = 'start'
        //   break;
      case 2:
        if (TestStatus.value == "waiting") {
          TestStatus.value = 'start'
        } else if (TestStatus.value == 'process') {
          TestStatus.value = 'paused'
        } else if (TestStatus.value == 'paused') {
          TestStatus.value = 'process'
        }
        break;
      default:
        break;
    }




  };


  watch(preTestStatus,function(newValue,oldValue){
    console.log(newValue,oldValue);

    ActiveStatue.value = newValue
  })
  watch(timeTestStatus,function(newValue,oldValue){
    console.log(newValue,oldValue);

    ActiveStatue.value = newValue
  })
  watch(channelsTestStatus,function(newValue,oldValue){
    console.log(newValue,oldValue);

    ActiveStatue.value = newValue
  })
  watch(TestStatus,function(newValue,oldValue){
    console.log(newValue,oldValue);

    ActiveStatue.value = newValue
  })

  watch(ActiveStatue,function(newValue,oldValue){

    if(newValue === 'success' || newValue === 'error'){
      skipDisabled.value = false
    }
    
    if(newValue === 'success' && stepsActiveIndex.value === stepsTotalNum.value - 2)
    {
      stepsActiveIndex.value++;
      stepsActiveIndex.value++;
      nextStepText.value = '检测完成'
    }
  })

const getIcon = (index: number) => {
  if (stepsActiveIndex.value > index) return SuccessFilled;
  switch (index) {
    case 0: return h(<svg-icon  name="preTest"></svg-icon>);
    case 1: return UploadFilled;
    case 2: return Odometer;
    case 3: return Coin;
    case 4: return Key;
    default: return null;
  }
};

  const nextStep = () => {
    if(stepsActiveIndex.value < stepsTotalNum.value )
    {
      stepsActiveIndex.value++
      if(!isTimeCheck.value){//不具备守时检测，预检测后直接跳正式检测
        stepsActiveIndex.value++
      }
      
      ActiveStatue.value = 'waiting'
    }
    else if(stepsActiveIndex.value === stepsTotalNum.value)
    {
      //emit('update:visible', false); // 关闭对话框
      clearData()
      dialogVisible.value = false;
    }
  };
  
  function clearData(){
    stepsActiveIndex.value = 0;
    preTestStatus.value = "waiting"
    timeTestStatus.value = "waiting"
    channelsTestStatus.value = "waiting"
    TestStatus.value = "waiting"
    nextStepText.value = "下一步"
  }
  const beforeClose = (done: () => void) => {
    console.log(stepsActiveIndex.value,stepsTotalNum.value)
    if(stepsActiveIndex.value < stepsTotalNum.value)
    {
      ElMessageBox.confirm(
      '检测未完成，是否退出当前检测流程?',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
      .then(() => {
        clearData()
        //emit('update:visible', false); // 关闭对话框
        dialogVisible.value = false;
      })
    }
    else
    {
      clearData()
      //emit('update:visible', false); // 关闭对话框
      dialogVisible.value = false;
    }
  // ElMessageBox.confirm('Are you sure to close this dialog?')
  //   .then(() => {
  //     done()
  //   })
  //   .catch(() => {
  //     // catch error
  //   })
}
  const handleCancel = () => {
    // clearData()
    // emit('update:visible', false); // 关闭对话框
    
  };
  

  
  // // 当 props.visible 改变时，更新 formData
  // watch(() => props.visible, (newVal) => {
  //   if (!newVal) {
  //     // 这里可以重置表单数据，如果需要的话
     
  //   }
  // });

   // 对外映射
 defineExpose({ open })
  </script>
  
  <style scoped lang="scss">

:deep(.dialog-big .el-dialog__body){
    max-height: 840px !important;
}
// :deep(.dialog-big){
//     max-height: 840px !important;
// }
// :deep(.el-dialog__body){
//     max-height: 840px !important;
// }

  .steps-container :deep(.test-head-steps){
      height: 80px;
      margin-bottom: 10px;
  }

  .steps-container  :deep(.el-step__title)  {
  font-size: 20px !important; /* 设置标题字体大小 */
  vertical-align:baseline !important;
  display: inline-block; /* 确保文字和图标在同一行 */
  line-height: 1; /* 调整行高以确保底部对齐 */
}
 
  .steps-container  :deep(.el-step__icon-inner) {
    font-size: 18px !important;
    vertical-align:baseline !important;
    display: inline-block; /* 确保文字和图标在同一行 */
  line-height: 1; /* 调整行高以确保底部对齐 */
  }

  .steps-container :deep(.el-step__icon) {
    font-size: 18px !important;
    vertical-align:baseline !important;
    display: inline-block; /* 确保文字和图标在同一行 */
  line-height: 1; /* 调整行高以确保底部对齐 */
}

// :deep(.test-head-steps){
//     height: 100px;
//     margin-bottom: 20px;
// } 

// .el-step__icon.is-text {
//   border-radius: 50%;
//   border: 4px solid;
//   width: 50px;
//   height: 50px;
//   border-color: inherit;
// }
// .el-step__icon.is-icon {
//   border-radius: 50%;
//   border: 4px solid;
//   width: 50px;
//   height: 50px;
//   border-color: inherit;
// }

// .test-head-steps .el-step__line{
//   height:50px !important;
// }

// .test-head-steps .el-step__icon-inner{
//   width: 40px !important;
//   height:40px !important;
// }

// .test-head-steps .el-step__icon{
//   width: 48px !important;
//   height:48px !important;
//   font-size: 48px !important; /* 调整图标大小 */
//   line-height: 80px !important; /* 使图标居中 */
// }

// :deep(.el-step__title)  {
//   font-size: 24px !important; /* 设置标题字体大小 */
//   margin-top: 10px !important; /* 调整标题与图标的间距 */
// }
 
// :deep(.el-step__icon-inner) {
//   font-size: 24px !important;
// }
// .test-head-steps .el-step__description {
//   font-size: 20px !important; /* 设置描述字体大小 */
// }

</style>