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="stepsIndex" :process-status="currentStepStatus"
          finish-status="success">
          <el-step title="开始检测"  />
          <el-step title="触发设备检测GPS时刻的标准时间"/>
          <el-step title="设备开始上送"/>
          <el-step title="设备结束上送"/>
          <el-step title="检测完成"/>
        </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> -->

            <span v-if="activeIndex <= 1"> </span>
            <span v-if="activeIndex > 1" style="  font-size: 18px;font-weight: 600;">
            标准时间: <span style="color: #003078">{{ gpsTime }}</span> 
            </span>
            <div class="error-dsc">
              <div class="green-div"></div>
              <span style=" color: #606266; font-size: 16px;font-weight: 600;">
              守时误差≤1000ms
            </span>

            <div class="red-div"></div>
            <span style=" color: #F56C6c; font-size: 16px;font-weight: 600;">
              守时误差>1000ms
            </span>
            </div>
            <!-- <span style="  font-size: 18px;font-weight: 600;">
              设备已合格 <span style="color: #67C23A">{{ qualified }}</span> 台/共 <span style="color: green">4</span> 台
            </span> -->
            <!-- <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 class="right-content  table-main">
          <el-empty description="暂无数据，等待检测开始" v-if="activeIndex === 0" />
          <!-- <ProTable v-if="activeIndex > 0" ref='proTable' :pagination='false' :toolButton='false' :showCard='false' :columns='columns'
            :data='deviceOperatorData' stripe :header-cell-style="{ textAlign: 'center' }"
            :cell-style="{ textAlign: 'center' }" style="width: 100%; height:435px" border>
          </ProTable> -->

          <el-table v-if="activeIndex > 0" :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)">
                    <!-- <template #header>
                    <span>守时误差(ms)</span>
                    <el-tooltip content = "守时误差 = |设备上送时间 - 标准时间|，最大显示值为9999毫秒，超过该值的统一用ErrorMax来表示" placement="top" style="align-items: bottom;">
                      <el-icon><InfoFilled  /></el-icon>
                    </el-tooltip>
                  </template> -->
                </el-table-column>
                <el-table-column prop="Result" label="检测结果">
                  <!-- <template #header>
                    <span>检测结果</span>
                    <el-tooltip content = "守时误差小于等于1000毫秒为合格，否则不合格" placement="top" style="align-items: bottom;">
                      <el-icon><InfoFilled  /></el-icon>
                    </el-tooltip>
                  </template> -->
                  <template #default="scope">
                    <el-tag v-if="scope.row.Result === '不合格'" type="danger">{{ scope.row.Result }}</el-tag>
                    <span v-if="scope.row.Result != '不合格'">{{scope.row.Result}}</span>
                  </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 stepsIndex = ref(0)
const activeIndex = ref(0)
const activeTotalNum = ref(7)
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 qualified = ref(0)
const activities = ref<Activity[]>([
  {
    content: '开始检测',
    hollow: true,
  },])


const deviceOperatorData = ref([])

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: '守时误差（ms）',
    // 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)
        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}`;
}

function addMillisecondsToDate(dateString: string, millisecondsToAdd: number): Date {
  // 解析字符串为 Date 对象
  const [datePart, timePart] = dateString.split(' ');
  const [year, month, day] = datePart.split('-').map(Number);
  const [hours, minutes, seconds, milliseconds] = timePart.split(':').flatMap(part => part.split('.')).map(Number);

  // 创建 Date 对象（注意：月份是从 0 开始的）
  const date = new Date(year, month - 1, day, hours, minutes, seconds, milliseconds);

  // 增加指定的毫秒数
  date.setMilliseconds(date.getMilliseconds() + millisecondsToAdd);

  return date;
}

watch(activeIndex, function (newValue, oldValue) {

  console.log(activeIndex.value,111,stepsIndex.value,222)

  if (activeIndex.value === 1) {
    startTime.value = formatDateTime(new Date());
    stepsIndex.value = 1;
    // activities.value.length = 0;
    // activities.value.push({
    //   content: '开始检测',
    //   timestamp: '2018-04-12 20:46',
    //   size: 'large',
    //   color: '#0bbd87',
    //   icon: SuccessFilled,
    // });
  }
  if (activeIndex.value === 2) {
    stepsIndex.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) {
    stepsIndex.value = 3;
    deviceOperatorData.value.length = 0;
    // deviceOperatorData.value = deviceData.value;
    deviceOperatorData.value.push({
      deviceName: '240002',
      updataTime: formatDateTime(addMillisecondsToDate(gpsTime.value, 136)),
      ErrorValue: '136',
      Result: '合格',
    });
  }
  if (activeIndex.value === 4) {
        deviceOperatorData.value.push({
      deviceName: '240001',
      updataTime: formatDateTime(addMillisecondsToDate(gpsTime.value, 148)),
      ErrorValue: '148',
      Result: '合格',
    });
  }
  if (activeIndex.value === 5) {
        deviceOperatorData.value.push({
      deviceName: '240004',
      updataTime: formatDateTime(addMillisecondsToDate(gpsTime.value, 736)),
      ErrorValue: '736',
      Result: '合格',
    });
  }
  if (activeIndex.value === 6) {
      stepsIndex.value = 5;
      deviceOperatorData.value.push({
      deviceName: '240003',
      updataTime: formatDateTime(addMillisecondsToDate(gpsTime.value, 1006)),
      ErrorValue: '1006',
      Result: '不合格',
    });
  }
  
})
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 {
  height: 32px;
  display: flex;
  flex-direction: row;
  /* 横向排列 */
  justify-content: space-between;
  /* margin-bottom: 10px; */

}

.error-dsc{
  display: flex;
  flex-direction: row;
  justify-content: center; 
  align-items: baseline; 
}

.green-div{
  width: 20px;
  height: 14px;
  border-radius: 4px;
  background-color: #606266;
  margin-left: 5px;
  margin-right: 5px;
}

.red-div{
  width: 20px;
  height: 14px;
  border-radius: 4px;
  background-color: #F56C6C;
  margin-left: 5px;
  margin-right: 5px;
}

.right-content{
  height: 440px;
}

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