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

<template>
    <div>
<div class = "test-dialog">
    <div class="dialog-left">
      <el-steps direction="vertical" :active="activeIndex" :process-status="currentStepStatus" finish-status="success">
        <el-step title="开始检测" :description="startTime"/>
        <el-step title="GPS完成上送" :description="gpsTime"/>
        <el-step title="设备开始上送时刻"  :description="devStartTime"/>
        <el-step title="设备最晚上送时刻"  :description="devEndTime"/>
        <el-step title="检测完成"  :description="finishTime"/>
      </el-steps>
        <!-- <el-timeline style="max-width: 600px">
          <el-timeline-item
            v-for="(activity, index) in activities"
            :key="index"
            :icon="activity.icon"
            :type="activity.type"
            :color="activity.color"
            :size="activity.size"
            :hollow="activity.hollow"
            :timestamp="activity.timestamp"
          >
            {{ activity.content }}
          </el-timeline-item>
        </el-timeline> -->
    </div>
    <div class="dialog-right">
        <div class="right-title">    
            <!-- <div>设备上送时刻表</div> -->
            <div>
                <el-button type="primary" loading v-if="activeIndex > 0 && activeIndex < activeTotalNum">设备已合格3台/共4台</el-button> 
                <el-button type="primary" disabled="true" v-if="activeIndex === activeTotalNum">设备已合格3台/共4台</el-button>
            </div>
        </div>
        <div class="right-content">
          <ProTable
              ref='proTable'
              :pagination = 'false'
              :toolButton = 'false'
              :columns='columns'
              :data='deviceOperatorData'
              stripe :header-cell-style="{ textAlign: 'center' } " :cell-style="{ textAlign: 'center' }" style="width: 100%; height:390px" border
          >
          </ProTable>

            <!-- <el-table :data="deviceOperatorData" stripe :header-cell-style="{ textAlign: 'center' } " :cell-style="{ textAlign: 'center' }" style="width: 100%" border>
                <el-table-column prop="deviceName" label="设备名" />
                <el-table-column prop="updataTime" label="上送时刻" />
                <el-table-column prop="ErrorValue" label="守时误差(ms)" />
                <el-table-column prop="Result" label="检测结果">
                  <template #default="scope">
                    <el-tag :type="scope.row.Result === '合格' ? 'success' : 'danger'">{{ scope.row.Result }}</el-tag>
                  </template>
                </el-table-column>
           </el-table> -->
        </div>
    </div>
</div>
    </div>

</template>
<script lang="tsx" setup name="timeTest">
import { SuccessFilled } from '@element-plus/icons-vue'

const activeIndex = ref(0)
const activeTotalNum = ref(5)
const startTime = ref('')
const gpsTime = ref('')
const devStartTime = ref('')
const devEndTime = ref('')
const finishTime = ref('')

interface Activity {
  content: string;
  hollow?: boolean;
  timestamp?: string;
  size?: string;
  color?: string;
  icon?: any;
}
const activities = ref<Activity[]>([
  {
    content: '开始检测',
    hollow: true,
  },])


const deviceOperatorData = ref([
      {
        deviceName: '240001',
        updataTime: '—', 
        ErrorValue:'—',
        Result: '—', 
      },
      {
        deviceName: '240002',
        updataTime: '—', 
        ErrorValue:'—',
        Result: '—', 
      },
      {
        deviceName: '240003',
        updataTime: '—', 
        ErrorValue:'—',
        Result: '—', 
      },
      {
        deviceName: '240004',
        updataTime: '—', 
        ErrorValue:'—',
        Result: '—', 
      },
    ])

    const deviceData = ref([
      {
        deviceName: '240001',
        updataTime: '2024-12-05 10:30:08.136', 
        ErrorValue:'148',
        Result: '合格', 
      },
      {
        deviceName: '240002',
        updataTime: '2024-12-05 10:30:08.136', 
        ErrorValue:'136',
        Result: '合格', 
      },
      {
        deviceName: '240003',
        updataTime: '2024-12-05 10:30:09.006', 
        ErrorValue:'1006',
        Result: '不合格', 
      },
      {
        deviceName: '240004',
        updataTime: '2024-12-05 10:30:08.736', 
        ErrorValue:'736',
        Result: '合格', 
      },
    ])
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('');

// 表格配置项
const columns = reactive([
  { type: 'index', fixed: 'left', width: 70, label: '序号' },
  {
    prop: 'deviceName',
    label: '设备名称',
  },
  {
    prop: 'updataTime',
    label: '上送时刻',
    width: 230,
  },
  {
    prop: 'ErrorValue',
    label: '守时误差',
    width: 100,
  },
  {
    prop: 'Result',
    label: '检测结果',
    width: 100,
    render: (scope) => {
    if(scope.row.Result === '不合格')
    {
      return (
      <el-tag type='danger'>{ scope.row.Result }</el-tag>
    )
    }
    else
    {
      return (
        <span>{ scope.row.Result }</span>
    )
    }
  },
  },
])
//监听testStatus的变化
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'
        }
  }, 1000);
  }
})

function formatDateTime(date) {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');
  const milliseconds = String(date.getMilliseconds()).padStart(3, '0');

  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}.${milliseconds}`;
}

watch(activeIndex, function (newValue, oldValue) {

if(activeIndex.value === 1)
{
  startTime.value = formatDateTime(new Date());

  // activities.value.length = 0;
  // activities.value.push({
  //   content: '开始检测',
  //   timestamp: '2018-04-12 20:46',
  //   size: 'large',
  //   color: '#0bbd87',
  //   icon: SuccessFilled,
  // });
}
if(activeIndex.value === 2)
{
  gpsTime.value = formatDateTime(new Date());
  // activities.value.push({
  //   content: 'GPS上送时刻',
  //   timestamp: '2018-04-03 20:46',
  //   color: '#0bbd87',
  //   icon: SuccessFilled,
  //   size: 'large',
  // });
}
if(activeIndex.value === 3)
{
  // activities.value.push({
  //   content: '设备最早上送时刻',
  //   timestamp: '2018-04-03 20:46',
  //   color: '#0bbd87',
  //   icon: SuccessFilled,
  //   size: 'large',
  // });
  devStartTime.value = formatDateTime(new Date());
  deviceOperatorData.value.length = 0;
  deviceOperatorData.value = deviceData.value;
}
if(activeIndex.value > 3)
{
  devEndTime.value = formatDateTime(new Date());
  finishTime.value = formatDateTime(new Date());

  // activities.value.push({
  //   content: '设备最晚上送时刻',
  //   timestamp: '2018-04-03 20:46',
  //   color: '#0bbd87',
  //   icon: SuccessFilled,
  //   size: 'large',
  // });
  // activities.value.push({
  //   content: '检测结束',
  //   timestamp: '2018-04-03 20:46',
  //   color: '#0bbd87',
  //   icon: SuccessFilled,
  //   size: 'large',
  // });
}
})
const emit = defineEmits(['update:testStatus']);
//监听sn
watch(ts, function (newValue, oldValue) {
  //修改父组件
  emit('update:testStatus',ts.value)
})

</script>
<style scoped>

.test-dialog{
    display: flex;

    flex-direction: row; /* 横向排列 */
    /* margin-top: 20px; */
    /* min-height: 300px; */
    height: 472px;
    /* .dialog-left{
        margin-right: 20px;
    } */
}
    .dialog-left{
        margin-left: 20px;
        width: 20%;
    }
    .dialog-right{
        margin-top: 25px;
        margin-left: 20px;
        width: 80%;
    }
    .right-title{
        display: flex;
        flex-direction: row; /* 横向排列 */
        justify-content: flex-end;
        margin-bottom: 10px;
    }
    /* width: 100%;
      height: auto;
      background: #fff;
      border-radius: 4px;
      display: flex;
      // justify-content: space-around;
      // justify-content: space-evenly;

      align-items: center;
      margin-bottom: 10px;
      padding: 10px 20px 10px 20px;
      box-sizing: border-box; */
</style>