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 ref="testRef" v-if="stepsActiveIndex >= 2" v-model:testStatus="TestStatus" :webMsgSend="webMsgSend" @update:webMsgSend="webMsgSend=$event"
          @sendPause="sendPause" @sendResume="sendResume" @sendReCheck="sendReCheck"></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="primary" v-if="TestStatus === 'process'" @click="handleSubmit" 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="TestStatus === 'test_recheck'" @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="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="ActiveStatue==='success'?'primary':'danger'" :icon="Right"
                   v-if="ActiveStatue === 'success'||ActiveStatue==='error'||ActiveStatue==='test_init_fail'||ActiveStatue==='connect_timeout'||ActiveStatue==='pause_timeout'"
                   @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,
  RefreshLeft, Loading
} from '@element-plus/icons-vue'
import preTest from './preTest.vue'
import timeTest from './timeTest.vue'
import {Device} from '@/api/device/interface/device';
import socketClient from '@/utils/webSocketClient';
import {useCheckStore} from "@/stores/modules/check";
import {startPreTest, pauseTest, resumeTest} from '@/api/socket/socket'
import {showFullScreenLoading} from "@/components/Loading/fullScreen";


//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 checkStore = useCheckStore();
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 testRef = ref(null);

// const devIdArr = ref([])
// const planId = ref('')

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


  const checkStates = selection.map(item => item.checkState);
  // devIdArr.value = selection.map(item => item.id);
  // planId.value =selection[0].planId
  // console.log('wwwwwwwwwwwwwwwww',selection)

  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 url = 'ws://localhost:7777/hello?name=cdf';
  socketClient.Instance.connect(url);
  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
    }


  });






}

let loading;
const handleSubmit = () => {
  skipDisabled.value = true
  console.log('=============', stepsActiveIndex.value)

  let deviceIds = checkStore.devices.map((item) => item.deviceId)
  let planId = checkStore.planId

  switch (stepsActiveIndex.value) {
    case 0:
      // preTestStatus.value = 'start'


      /* loading = ElLoading.service({
         lock: true,
         text: '',
         background: 'rgb(255, 255, 255, 0)',
       })*/
      startPreTest({
        userPageId: "cdf",
        devIds: deviceIds,
        planId: planId,
        operateType: '1' // '1'为预检测、‘2‘为正式检测
      }).then(res => {
        if (res.code === 'A001014') {
          ElMessageBox.alert('装置配置异常', '检测失败', {
            confirmButtonText: '确定',
            type: 'error',
          })
          TestStatus.value = 'error'
        }
      })
      preTestStatus.value = 'start'
      break;
    case 1:
      timeTestStatus.value = 'start'
      break;
      // case 2:
      //       channelsTestStatus.value = 'start'
      //   break;
    case 2:
      if (TestStatus.value == "waiting") {
        startPreTest({
          userPageId: "cdf",
          devIds: deviceIds,
          planId: planId,
          operateType: '2' // '1'为预检测、‘2‘为正式检测
        }).then(res => {
          console.log(res)
          if (res.code === 'A001014') {
            ElMessageBox.alert('装置配置异常', '初始化失败', {
              confirmButtonText: '确定',
              type: 'error',
            })
            TestStatus.value = 'test_init_fail'
          }
          /* if (res.code === 20000) {
             TestStatus.value = 'start'
             webMsgSend.value = ''
           } else {
             ElMessage.error(res.message)
           }*/
        })
        TestStatus.value = 'start'
      } else if (TestStatus.value == 'paused') {
        // 发送继续指令
        sendResume()
      } else if (TestStatus.value == 'test_recheck') {
        // 发送重新检测指令
        sendReCheck()


      }else if (TestStatus.value == 'success') {
        emit('quitClicked'); // 触发事件
      }
      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 === 'success' || newValue === 'error') {
    skipDisabled.value = false
  }

  if (newValue === 'success' && stepsActiveIndex.value === stepsTotalNum.value - 2) {
    stepsActiveIndex.value++;
    stepsActiveIndex.value++;
    nextStepText.value = '检测完成'
  }
  if (newValue === 'error' && stepsActiveIndex.value === stepsTotalNum.value - 3) {
    stepsActiveIndex.value++;
    stepsActiveIndex.value++;
    nextStepText.value = '检测失败'
  }
  if (newValue === 'test_init_fail' && stepsActiveIndex.value === stepsTotalNum.value - 2) {
    stepsActiveIndex.value++;
    stepsActiveIndex.value++;
    nextStepText.value = '初始化失败'
  }
  if (newValue === 'connect_timeout' && stepsActiveIndex.value === stepsTotalNum.value - 2) {
    stepsActiveIndex.value++;
    stepsActiveIndex.value++;
    nextStepText.value = '连接超时'
  }
  if (newValue === 'pause_timeout' && stepsActiveIndex.value === stepsTotalNum.value - 2) {
    stepsActiveIndex.value++;
    stepsActiveIndex.value++;
    nextStepText.value = '结束测试'
  }
})

const sendPause = () => {
  console.log('发起暂停请求')

  TestStatus.value = 'paused_ing'
  pauseTest()
}
const sendResume = () => {
  console.log('发起继续检测请求')

  resumeTest({
    userPageId: "cdf",
    devIds: checkStore.devices.map((item) => item.deviceId),
    planId: checkStore.planId,
    operateType: '2' // '1'为预检测、‘2‘为正式检测
  }).then(res => {
    Object.assign(webMsgSend.value, {
      requestId: 'Resume_Success'
    })
  })
}

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

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 && ActiveStatue.value != 'error') {
    stepsActiveIndex.value++
    if (!isTimeCheck.value) {//不具备守时检测，预检测后直接跳正式检测
      stepsActiveIndex.value++
    }

    ActiveStatue.value = 'waiting'
  } else if (stepsActiveIndex.value === stepsTotalNum.value || ActiveStatue.value === 'error') {
    //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"
  ActiveStatue.value = "waiting"
  skipDisabled.value = false
  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()
          // todo 关闭弹窗，终止整个检测流程
          //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 = () => {
  dataSocket.socketServe.closeWs()

  emit('quitClicked'); // 触发事件
  // clearData()
  // emit('update:visible', false); // 关闭对话框
  testRef.value?.clear()
};


// // 当 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; /* 调整行高以确保底部对齐 */
}

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