检测过程流程展示页面框架绘制

frontend/src/views/home/components/timeTest.vue

@@ -0,0 +1,183 @@
+<template>
+    <div>
+<div class = "test-dialog">
+    <div class="dialog-left">
+        <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>设备已合格2台/共4台</el-button> 
+            </div>
+        </div>
+        <div class="right-content">
+            <el-table :data="errorData" :header-cell-style="{ textAlign: 'center' } " :cell-style="{ textAlign: 'center' }" style="width: 100%" border class="custom-table">
+                <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="检测结果" />
+           </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 activities = [
+  {
+    content: '开始检测',
+    timestamp: '2018-04-12 20:46',
+    size: 'large',
+    color: '#0bbd87',
+    icon: SuccessFilled,
+  },
+  {
+    content: 'GPS上送时刻',
+    timestamp: '2018-04-03 20:46',
+    hollow: true,
+  },
+  {
+    content: '设备最早上送时刻',
+    timestamp: '2018-04-03 20:46',
+    hollow: true,
+  },
+  {
+    content: '设备最晚上送时刻',
+    timestamp: '2018-04-03 20:46',
+    hollow: true,
+  },
+  {
+    content: '检测结束',
+    timestamp: '2018-04-03 20:46',
+    hollow: true,
+  },
+]
+
+const errorData = ref([
+      {
+        deviceName: '被检设备1',
+        updataTime: '10:30:08.136', 
+        ErrorValue:'148',
+        Result: '合格', 
+      },
+      {
+        deviceName: '被检设备2',
+        updataTime: '10:30:08.136', 
+        ErrorValue:'136',
+        Result: '合格', 
+      },
+      {
+        deviceName: '被检设备3',
+        updataTime: '10:30:09.006', 
+        ErrorValue:'1006',
+        Result: '不合格', 
+      },
+      {
+        deviceName: '被检设备4',
+        updataTime: '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('');
+//监听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'
+        }
+        
+  }, 1000);
+  }
+})
+
+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;
+    /* .dialog-left{
+        margin-right: 20px;
+    } */
+}
+    .dialog-left{
+        margin-left: 20px;
+    }
+    .dialog-right{
+        margin-left: 20px;
+        width: 500px
+    }
+    .right-title{
+        display: flex;
+        flex-direction: row; /* 横向排列 */
+        justify-content: space-between;
+        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>