守时微调

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

@@ -33,7 +33,17 @@
             </div>
         </div>
         <div class="right-content">
-            <el-table :data="deviceOperatorData" stripe :header-cell-style="{ textAlign: 'center' } " :cell-style="{ textAlign: 'center' }" style="width: 100%" border>
+          <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)" />
@@ -42,7 +52,7 @@
                     <el-tag :type="scope.row.Result === '合格' ? 'success' : 'danger'">{{ scope.row.Result }}</el-tag>
                   </template>
                 </el-table-column>
-           </el-table>
+           </el-table> -->
         </div>
     </div>
 </div>
@@ -77,25 +87,25 @@ const activities = ref<Activity[]>([
 
 const deviceOperatorData = ref([
       {
-        deviceName: '被检设备1',
+        deviceName: '240001',
         updataTime: '—', 
         ErrorValue:'—',
         Result: '—', 
       },
       {
-        deviceName: '被检设备2',
+        deviceName: '240002',
         updataTime: '—', 
         ErrorValue:'—',
         Result: '—', 
       },
       {
-        deviceName: '被检设备3',
+        deviceName: '240003',
         updataTime: '—', 
         ErrorValue:'—',
         Result: '—', 
       },
       {
-        deviceName: '被检设备4',
+        deviceName: '240004',
         updataTime: '—', 
         ErrorValue:'—',
         Result: '—', 
@@ -104,26 +114,26 @@ const deviceOperatorData = ref([
 
     const deviceData = ref([
       {
-        deviceName: '被检设备1',
+        deviceName: '240001',
-        updataTime: '10:30:08.136', 
+        updataTime: '2024-12-05 10:30:08.136', 
         ErrorValue:'148',
         Result: '合格', 
       },
       {
-        deviceName: '被检设备2',
+        deviceName: '240002',
-        updataTime: '10:30:08.136', 
+        updataTime: '2024-12-05 10:30:08.136', 
         ErrorValue:'136',
         Result: '合格', 
       },
       {
-        deviceName: '被检设备3',
+        deviceName: '240003',
-        updataTime: '10:30:09.006', 
+        updataTime: '2024-12-05 10:30:09.006', 
         ErrorValue:'1006',
         Result: '不合格', 
       },
       {
-        deviceName: '被检设备4',
+        deviceName: '240004',
-        updataTime: '10:30:08.736', 
+        updataTime: '2024-12-05 10:30:08.736', 
         ErrorValue:'736',
         Result: '合格', 
       },
@@ -138,6 +148,44 @@ const currentStepStatus = ref<'error' | 'finish' | 'wait' | 'success' | 'process
 })
 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;
@@ -161,58 +209,77 @@ watch(testStatus, function (newValue, oldValue) {
   }, 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)
 {
-  activities.value.length = 0;
+  startTime.value = formatDateTime(new Date());
-  activities.value.push({
+
-    content: '开始检测',
+  // activities.value.length = 0;
-    timestamp: '2018-04-12 20:46',
+  // activities.value.push({
-    size: 'large',
+  //   content: '开始检测',
-    color: '#0bbd87',
+  //   timestamp: '2018-04-12 20:46',
-    icon: SuccessFilled,
+  //   size: 'large',
-  });
+  //   color: '#0bbd87',
+  //   icon: SuccessFilled,
+  // });
 }
 if(activeIndex.value === 2)
 {
-  activities.value.push({
+  gpsTime.value = formatDateTime(new Date());
-    content: 'GPS上送时刻',
+  // activities.value.push({
-    timestamp: '2018-04-03 20:46',
+  //   content: 'GPS上送时刻',
-    color: '#0bbd87',
+  //   timestamp: '2018-04-03 20:46',
-    icon: SuccessFilled,
+  //   color: '#0bbd87',
-    size: 'large',
+  //   icon: SuccessFilled,
-  });
+  //   size: 'large',
+  // });
 }
 if(activeIndex.value === 3)
 {
-  activities.value.push({
+  // activities.value.push({
-    content: '设备最早上送时刻',
+  //   content: '设备最早上送时刻',
-    timestamp: '2018-04-03 20:46',
+  //   timestamp: '2018-04-03 20:46',
-    color: '#0bbd87',
+  //   color: '#0bbd87',
-    icon: SuccessFilled,
+  //   icon: SuccessFilled,
-    size: 'large',
+  //   size: 'large',
-  });
+  // });
-
+  devStartTime.value = formatDateTime(new Date());
   deviceOperatorData.value.length = 0;
   deviceOperatorData.value = deviceData.value;
 }
 if(activeIndex.value > 3)
 {
-  activities.value.push({
+  devEndTime.value = formatDateTime(new Date());
-    content: '设备最晚上送时刻',
+  finishTime.value = formatDateTime(new Date());
-    timestamp: '2018-04-03 20:46',
+
-    color: '#0bbd87',
+  // activities.value.push({
-    icon: SuccessFilled,
+  //   content: '设备最晚上送时刻',
-    size: 'large',
+  //   timestamp: '2018-04-03 20:46',
-  });
+  //   color: '#0bbd87',
-  activities.value.push({
+  //   icon: SuccessFilled,
-    content: '检测结束',
+  //   size: 'large',
-    timestamp: '2018-04-03 20:46',
+  // });
-    color: '#0bbd87',
+  // activities.value.push({
-    icon: SuccessFilled,
+  //   content: '检测结束',
-    size: 'large',
+  //   timestamp: '2018-04-03 20:46',
-  });
+  //   color: '#0bbd87',
+  //   icon: SuccessFilled,
+  //   size: 'large',
+  // });
 }
 })
 const emit = defineEmits(['update:testStatus']);