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

<template>
  <el-dialog :title="dialogTitle" width="1550px" :model-value="dialogVisible" :before-close="beforeClose" @close="handleClose" height="1000px" draggable>

    <div class="steps-container">
      <el-steps class="test-head-steps" simple :active="stepsActiveIndex" process-status="finish" finish-status="success">
        <el-step v-if="preTestSelected" title="预检测" :icon="stepsActive > 1 || stepsActiveIndex > stepsTotalNum-1? SuccessFilled :Edit" @click="handleStepClick(1)"/>
        <el-step v-if="timeTestSelected" title="守时检测" :icon="stepsActive > 2 || stepsActiveIndex > stepsTotalNum-1? SuccessFilled :UploadFilled" @click="handleStepClick(2)"/>
        <el-step v-if="channelsTestSelected" title="系数校准" :icon="stepsActive > 3 || stepsActiveIndex > stepsTotalNum-1? SuccessFilled :Odometer" @click="handleStepClick(3)"/>
        <el-step v-if="testSelected" title="正式检测" :icon="stepsActive > 4 || stepsActiveIndex > stepsTotalNum-1? SuccessFilled :Coin" @click="handleStepClick(4)"/>
        <el-step title="检测完成" :icon="stepsActiveIndex > stepsTotalNum-1 ? SuccessFilled :Key"/>
      </el-steps>
    </div>

    <preTest v-if="showComponent&&preTestSelected" v-show="preTestSelected && stepsActiveView==1" ref="preTestRef" v-model:testStatus="preTestStatus"
             :webMsgSend="webMsgSend"/>
    <timeTest v-if="showComponent&&timeTestSelected" v-show="timeTestSelected && stepsActiveView==2" v-model:testStatus="timeTestStatus"/>
    <!--     <channelsTest v-if="stepsActiveIndex === 3" v-model:testStatus="channelsTestStatus"></channelsTest>-->
    <factorTest v-if="showComponent&&channelsTestSelected" v-show="channelsTestSelected && stepsActiveView==3" v-model:testStatus="channelsTestStatus" :webMsgSend="webMsgSend"/>
    <test v-if="showComponent&&testSelected" ref="testRef" v-show="testSelected && stepsActiveView==4" v-model:testStatus="TestStatus" :webMsgSend="webMsgSend"
          @update:webMsgSend="webMsgSend=$event" @sendPause="sendPause" @sendResume="sendResume" @sendReCheck="sendReCheck" @closeWebSocket="closeWebSocket" :stepsActive="stepsActive"/>

    <template #footer>
      <div>
<!--        <el-button type="primary" :icon="DArrowRight" v-if="stepsActiveIndex < stepsTotalNum && ActiveStatue != 'success'" @click="nextStep">跳过</el-button>-->
        <el-button type="primary" :icon="VideoPlay" v-if="ActiveStatue === 'waiting'" @click="handleSubmitFast">一键检测开始</el-button>
        <el-button type="primary" :icon="VideoPlay" v-if="ActiveStatue === 'waiting'" @click="handleSubmit">开始检测</el-button>
<!--        <el-button type="primary"-->
<!--                   v-if="(stepsActiveIndex <= stepsTotalNum - 1) && (ActiveStatue !== 'success' &&ActiveStatue !== 'test_init' && ActiveStatue !=='paused_ing' && ActiveStatue !=='paused' && ActiveStatue !== 'waiting' && ActiveStatue !== 'error' && ActiveStatue !== 'test_init_fail' && ActiveStatue !== 'connect_timeout' && ActiveStatue!=='pause_timeout')"-->
<!--                   disabled>-->
<!--          <el-icon class="loading-box" style="color: #fff;margin-right: 8px;">-->
<!--            <component :is="Refresh"/>-->
<!--          </el-icon>-->
<!--          检测中-->
<!--        </el-button>-->


        <!--        <el-button type="primary" v-if="ActiveStatue === 'process'" disabled>-->
        <!--          <el-icon class="loading-box" style="color: #fff;margin-right: 8px;">-->
        <!--            <component :is="Refresh"/>-->
        <!--          </el-icon>-->
        <!--          检测中-->
        <!--        </el-button>-->
<!--        <el-button type="warning" :icon="VideoPlay" v-if="TestStatus === 'paused'" @click="handleSubmit">继续检测</el-button>-->
        <!--        <el-button type="primary" :icon="RefreshLeft" v-if="ActiveStatue === 'recheck' || ActiveStatue ==='error' || ActiveStatue ==='test_init_fail' || ActiveStatue === 'pause_timeout' || ActiveStatue === 'connect_timeout'" @click="handleSubmit">重新检测</el-button>-->
        <el-button type="primary" v-if="TestStatus === 'test_init'" disabled>
          <el-icon class="loading-box" style="color: #fff;margin-right: 8px;">
            <component :is="Refresh"/>
          </el-icon>
          初始化中
        </el-button>
        <el-button
            type="primary"
            v-if="TestStatus=='process'"
            :icon="VideoPause"
            @click="handlePause()">停止检测
        </el-button>
        <el-button type="warning" v-if="TestStatus === 'paused_ing'" disabled>
          <el-icon class="loading-box" style="color: #fff;margin-right: 8px;">
            <component :is="Refresh"/>
          </el-icon>
          暂停中
        </el-button>
        <el-button
            type="warning"
            v-if="(TestStatus =='paused')"
            :icon="VideoPlay"
            @click="sendResume"
        >继续检测
        </el-button>

        <el-button :type="ActiveStatue==='success'?'primary':'danger'" :icon="Right"
                   v-if="nextStepText !== '下一步' && (ActiveStatue === 'success'||ActiveStatue==='error'||ActiveStatue==='test_init_fail'||ActiveStatue==='connect_timeout'||ActiveStatue==='pause_timeout')"
                   @click="nextStep">
          {{ nextStepText }}
        </el-button>
        <el-button type="primary" @click="handleQuit" v-else>
          退出检测
        </el-button>
      </div>
    </template>
  </el-dialog>


</template>

<script lang="tsx" setup name="testPopup">
import {reactive, ref, watch} from 'vue';
import {ElMessage, ElMessageBox} from 'element-plus'
import {Coin, DArrowRight, Edit, Key, Odometer, Refresh, Right, SuccessFilled, UploadFilled, VideoPlay,VideoPause} from '@element-plus/icons-vue'
import preTest from './preTest.vue'
import timeTest from './timeTest.vue'
import factorTest from './factorTest.vue'
import test from './test.vue'
import socketClient from '@/utils/webSocketClient';
import {useCheckStore} from "@/stores/modules/check";
import {pauseTest, resumeTest, startPreTest} from '@/api/socket/socket'
import {useUserStore} from "@/stores/modules/user";
import { Device } from '@/api/device/interface/device';

const userStore = useUserStore()
const checkStore = useCheckStore();
const nextStepText = ref('下一步');
const dialogVisible = ref(false)

const stepsTotalNum = ref(-1);//步骤总数
const stepsActiveIndex = ref(1); //当前正在执行的步骤索引
const stepsActiveView = ref(-1); //当前正在执行的步骤在（预处理、守时校验、系数校准、正式检测）中的排序，仅用于页面显示
const stepsActive = ref(-1); //当前正在执行的步骤在（预处理、守时校验、系数校准、正式检测）中的排序，实际记录步骤的状态，用于切换步骤
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 showComponent = ref(true)
const preTestRef = ref(null)
const testRef = ref(null)

const dataSocket = reactive({
  socketServe: socketClient.Instance,
});

// 勾选的检测内容
const preTestSelected = ref(false)
const timeTestSelected = ref(false)
const channelsTestSelected = ref(false)
const testSelected = ref(false)

const initOperate = () => {
  ActiveStatue.value = 'waiting'
  preTestStatus.value = 'waiting'
  timeTestStatus.value = 'waiting'
  channelsTestStatus.value = 'waiting'
  TestStatus.value = 'waiting'

  stepsActiveIndex.value = 1
  showComponent.value = true
  // 初始化勾选的检测内容
  preTestSelected.value = checkStore.selectTestItems.preTest
  timeTestSelected.value = checkStore.selectTestItems.timeTest
  channelsTestSelected.value = checkStore.selectTestItems.channelsTest
  testSelected.value = checkStore.selectTestItems.test

  let count = 0
  for (let key in checkStore.selectTestItems) {
    if (checkStore.selectTestItems[key]) {
      count++
    }
  }
  stepsTotalNum.value = count + 1

  if (preTestSelected.value) {
    stepsActiveView.value = 1
    stepsActive.value = 1
    return
  }
  if (timeTestSelected.value) {
    stepsActiveView.value = 2
    stepsActive.value = 2
    return
  }
  if (channelsTestSelected.value) {
    stepsActiveView.value = 3
    stepsActive.value = 3
    return
  }
  if (testSelected.value) {
    stepsActiveView.value = 4
    stepsActive.value = 4
    return
  }
}

const open = (title: string) => {
  initOperate()
  dialogTitle.value = title;
  dialogVisible.value = true;

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

  //开始创建webSocket客户端
  socketClient.Instance.connect();
  dataSocket.socketServe = socketClient.Instance;
  dataSocket.socketServe.registerCallBack('aaa', (res) => {
    // 处理来自服务器的消息
    // console.log('Received message:', res);
    // 根据需要在这里添加更多的处理逻辑
    if (res.code === 20000) {
      //ElMessage.error(message.message)
      // loading.close()
    } else {
      webMsgSend.value = res
    }
  });
}

const handleSubmitFast = () => {
  let deviceIds = checkStore.devices.map((item) => item.deviceId)
  let planId = checkStore.plan.id

  if (!dataSocket.socketServe.connected) {
    ElMessage.error('webSocket连接中断！')
    return
  }
  console.log("handleSubmit",stepsActive.value,TestStatus.value)
  switch (stepsActive.value) {
    case 1:
      startPreTest({
        userPageId: "cdf",
        devIds: deviceIds,
        planId: planId,
        operateType: '10', // '1'为预检测、‘2‘为正式检测、'8'为不合格项复检
        userId:userStore.userInfo.id,
        temperature:checkStore.temperature,
        humidity:checkStore.humidity
      }).then(res => {
        if (res.code === 'A001014') {
          ElMessageBox.alert('装置配置异常', '检测失败', {
            confirmButtonText: '确定',
            type: 'error',
          })
          preTestStatus.value = 'error'
        }
      })
      preTestStatus.value = 'start'
      // setTimeout(() => {
      //   preTestStatus.value = 'success'
      // }, 5000)
      break;
    case 2:
      timeTestStatus.value = 'start'
      break;
    case 3:
      // 调用系数校准组件的handleSubmit方法
      channelsTestStatus.value = 'start'
      break;
    case 4:
      if (TestStatus.value == "waiting") {
     /*   startPreTest({
          userPageId: "cdf",
          devIds: deviceIds,
          planId: planId,
          operateType: checkStore.reCheckType ==1 ?'2':'8', // '1'为预检测、‘2‘为正式检测、'8'为不合格项复检
          userId:userStore.userInfo.id,
          temperature:checkStore.temperature,
          humidity:checkStore.humidity
        }).then(res => {
          console.log(res)
          if (res.code === 'A001014') {
            ElMessageBox.alert('装置配置异常', '初始化失败', {
              confirmButtonText: '确定',
              type: 'error',
            })
            TestStatus.value = 'test_init_fail'
          }
        })*/
        TestStatus.value = 'start'
      } else if (TestStatus.value == 'paused') {
        // 发送继续指令
        sendResume()
      }
      // else if (TestStatus.value == 'recheck') {
      //   // 发送重新检测指令
      //   sendReCheck()
      // }
      // else if (TestStatus.value == 'success') {
      //   handleClose()
      // }
      break;
    default:
      break;
  }
}


// let loading;
const handleSubmit = () => {
  let deviceIds = checkStore.devices.map((item) => item.deviceId)
  let planId = checkStore.plan.id

  if (!dataSocket.socketServe.connected) {
    ElMessage.error('webSocket连接中断！')
    return
  }
  console.log("handleSubmit",stepsActive.value,TestStatus.value)
  switch (stepsActive.value) {
    case 1:
      startPreTest({
        userPageId: "cdf",
        devIds: deviceIds,
        planId: planId,
        operateType: '1', // '1'为预检测、‘2‘为正式检测、'8'为不合格项复检
        userId:userStore.userInfo.id,
        temperature:checkStore.temperature,
        humidity:checkStore.humidity
      }).then(res => {
        if (res.code === 'A001014') {
          ElMessageBox.alert('装置配置异常', '检测失败', {
            confirmButtonText: '确定',
            type: 'error',
          })
          preTestStatus.value = 'error'
        }
      })
      preTestStatus.value = 'start'
      // setTimeout(() => {
      //   preTestStatus.value = 'success'
      // }, 5000)
      break;
    case 2:
      timeTestStatus.value = 'start'
      break;
    case 3:
      // 调用系数校准组件的handleSubmit方法
      channelsTestStatus.value = 'start'
      break;
    case 4:
      if (TestStatus.value == "waiting") {
        startPreTest({
          userPageId: "cdf",
          devIds: deviceIds,
          planId: planId,
          operateType: checkStore.reCheckType ==1 ?'2':'8', // '1'为预检测、‘2‘为正式检测、'8'为不合格项复检
          userId:userStore.userInfo.id,
          temperature:checkStore.temperature,
        humidity:checkStore.humidity
        }).then(res => {
          console.log(res)
          if (res.code === 'A001014') {
            ElMessageBox.alert('装置配置异常', '初始化失败', {
              confirmButtonText: '确定',
              type: 'error',
            })
            TestStatus.value = 'test_init_fail'
          }
        })
        TestStatus.value = 'start'
      } else if (TestStatus.value == 'paused') {
        // 发送继续指令
        sendResume()
      }
      // else if (TestStatus.value == 'recheck') {
      //   // 发送重新检测指令
      //   sendReCheck()
      // }
      // else if (TestStatus.value == 'success') {
      //   handleClose()
      // }
      break;
    default:
      break;
  }
};


const emit = defineEmits<{
  (e: 'quitClicked'): void;
}>();

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 === 'error') {
    stepsActiveIndex.value = stepsTotalNum.value + 1
    nextStepText.value = '检测失败'
  }
  if (newValue === 'success' && stepsActiveIndex.value === stepsTotalNum.value - 1) {
    stepsActiveIndex.value += 2
    nextStepText.value = '检测完成'
  }
  if (newValue === 'test_init_fail') {
    stepsActiveIndex.value += 2
    nextStepText.value = '初始化失败'
  }
  if (newValue === 'connect_timeout') {
    stepsActiveIndex.value += 2
    nextStepText.value = '连接超时'
  }
  if (newValue === 'pause_timeout') {
    stepsActiveIndex.value += 2
    // nextStepText.value = '结束测试'
    nextStepText.value = '暂停超时'
  }
  if (newValue === 'success' && stepsActiveIndex.value < stepsTotalNum.value - 1) {
    nextStep() // 实现自动点击，进入下一个测试内容
    //handleSubmit()
    handleSubmitFast()
  }

})

const handleQuit = () => {
  console.log('handleQuit',ActiveStatue.value)
  if (ActiveStatue.value !== 'success' && ActiveStatue.value !== 'waiting' && ActiveStatue.value !== 'paused' && ActiveStatue.value !== 'test_init_fail' && ActiveStatue.value !== 'connect_timeout' && ActiveStatue.value !== 'pause_timeout') {
    beforeClose(() => {})
  } else {
    handleClose()
  }
}


const handlePause=()=>{
  sendPause()
  testRef.value?.handlePause()
}
const sendPause = () => {
  console.log('发起暂停请求')

  TestStatus.value = 'paused_ing'
  pauseTest()
  // setTimeout(() => {
  //   Object.assign(webMsgSend.value, {
  //     requestId: 'preStopTest',
  //     operateCode: 'stop'
  //   })
  // }, 5000)
}
const sendResume = () => {
  console.log('发起继续检测请求')

  resumeTest({
    userPageId: "cdf",
    devIds: checkStore.devices.map((item) => item.deviceId),
    planId: checkStore.plan.id,
    operateType: '2', //  0:'系数校验'，'1'为预检测、‘2‘为正式检测、'8'为不合格项复检
    userId:userStore.userInfo.id,
    temperature:checkStore.temperature,
        humidity:checkStore.humidity
  })
  Object.assign(webMsgSend.value, {
    requestId: 'Resume_Success'
  })
}

const sendReCheck = () => {
  console.log('发送重新检测指令')
  startPreTest({
    userPageId: "cdf",
    devIds: checkStore.devices.map((item) => item.deviceId),
    planId: checkStore.plan.id,
    operateType: '2', // 0:'系数校验'，'1'为预检测、‘2‘为正式检测、'8'为不合格项复检
    userId:userStore.userInfo.id,
   temperature:checkStore.temperature,
        humidity:checkStore.humidity
  }).then(res => {
    console.log(res)
    if (res.code === 'A001014') {
      ElMessageBox.alert('装置配置异常', '初始化失败', {
        confirmButtonText: '确定',
        type: 'error',
      })
      TestStatus.value = 'test_init_fail'
    }
  })
  TestStatus.value = 'start'
}

const closeWebSocket = () => {
  dataSocket.socketServe.closeWs()
}

const nextStep = () => {
  if (stepsActiveIndex.value == stepsTotalNum.value + 1 || ActiveStatue.value === 'error' || ActiveStatue.value === 'test_init_fail' || ActiveStatue.value === 'connect_timeout' || ActiveStatue.value === 'pause_timeout') {
    handleClose()
    return
  }
  if (ActiveStatue.value != 'error') {
    ActiveStatue.value = 'waiting'
    let tempStep = stepsActiveIndex.value
    let idx = 1
    stepsActiveIndex.value++
    for (let selectTestItemsKey in checkStore.selectTestItems) {
      if (tempStep == 0 && checkStore.selectTestItems[selectTestItemsKey]) {
        stepsActiveView.value = idx
        stepsActive.value = idx
        return
      }
      if (checkStore.selectTestItems[selectTestItemsKey] && tempStep != 0) {
        tempStep--
      }
      idx++
    }
  }

  // if (stepsActiveIndex.value < stepsTotalNum.value && ActiveStatue.value != 'error') {
  //   stepsActiveIndex.value++
  //   if (!checkStore.selectTestItems.timeTest) { // 不具备守时检测
  //     stepsActiveIndex.value++
  //   }
  //
  //   ActiveStatue.value = 'waiting'
  // } else if (stepsActiveIndex.value === stepsTotalNum.value || ActiveStatue.value === 'error') {
  //   //emit('update:visible', false); // 关闭对话框
  //   clearData()
  //   dialogVisible.value = false;
  // }
}

const handleStepClick = (step: number) => {
  if (step > stepsActive.value) {
    return
  } else {
    stepsActiveView.value = step
  }
}

function clearData() {
  stepsTotalNum.value = -1
  stepsActiveIndex.value = 1
  stepsActiveView.value = -1
  preTestStatus.value = "waiting"
  timeTestStatus.value = "waiting"
  channelsTestStatus.value = "waiting"
  TestStatus.value = "waiting"
  ActiveStatue.value = "waiting"
  nextStepText.value = "下一步"
}

const beforeClose = (done: () => void) => {
  if (stepsActiveIndex.value < stepsTotalNum.value && ActiveStatue.value != 'error') {
    ElMessageBox.confirm('检测未完成，是否退出当前检测流程?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
    ).then(() => {
      handleClose()
    })
  } else {
    handleClose()
  }
}

const handleClose = () => {
  dataSocket.socketServe.closeWs()
  dialogVisible.value = false;
  clearData()
  showComponent.value = false;

  emit('quitClicked'); // 触发事件
}

// 对外映射
defineExpose({open})
</script>

<style scoped lang="scss">

.test-head-steps {
  ::v-deep .el-step {
    .el-step__head.is-success {
      color: #91cc75;
    }
    .el-step__title.is-success{
      color: #91cc75;
    }
  }
}

:deep(.dialog-big .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; /* 调整行高以确保底部对齐 */
}

.loading-box {
  animation: loading 1.5s linear infinite;
}

@keyframes loading {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

// :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>