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 title="源通讯校验" />
    <el-step title="设备通讯校验" />
    <el-step title="协议校验" />
    <el-step title="相序校验" />
    <el-step 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">
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 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'
  }
})
const testStatus = toRef(props, 'testStatus');
const ts = ref('');

watch(activeIndex, function (newValue, oldValue) {

  if(activeIndex.value === 1)
  {
    step1InitLog.value.length = 0;
    step1InitLog.value = step1Log.value;
  }
  if(activeIndex.value === 2)
  {
    step2InitLog.value.length = 0;
    step2InitLog.value = step2Log.value;
  }
  if(activeIndex.value === 3)
  {
    step3InitLog.value.length = 0;
    step3InitLog.value = step3Log.value;
  }
  if(activeIndex.value > 3)
  {
    step4InitLog.value.length = 0;
    step4InitLog.value = step4Log.value;
  }
    if(activeIndex.value < activeTotalNum.value - 2)
        collapseActiveName.value = (newValue+1).toString()
    else
        collapseActiveName.value = (activeTotalNum.value - 1).toString()
})

//监听goods_sn的变化
watch(testStatus, function (newValue, oldValue) {
  ts.value = props.testStatus;
  if(ts.value==='start')
  {
    ts.value = 'process'

    let timer = setInterval(() => {
        if(activeIndex.value < activeTotalNum.value - 2)
            activeIndex.value++
        else if(activeIndex.value === activeTotalNum.value -2)
        {
            activeIndex.value++
            activeIndex.value++
        }
        else 
        {
            clearInterval(timer)
            ts.value = 'success'
        }
        
  }, 1500);
  }
})

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

</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: 100px;
            padding-left: 10px;
        }
</style>