微调

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

@@ -4,17 +4,17 @@
       <el-tab-pane label="守时误差">
         <div class="right-title" >
           <span v-if="activeIndex <= 1"> </span>
-            <span v-if="activeIndex > 1" style="  font-size: 18px;font-weight: 600;">
+            <span v-if="activeIndex > 1" class="time-text">
             标准时间: <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;">
+              <span class="description-text">
               合格≤1000ms
             </span>
 
             <div class="red-div"></div>
-            <span style=" color: #F56C6c; font-size: 16px;font-weight: 600;">
+            <span class="description-text unqualified">
               不合格>1000ms
             </span>
             </div>
@@ -78,7 +78,14 @@
             :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="margin-top: -30px;width: 100%" border>
+          <el-table 
+          v-if="activeIndex > 0" 
+              :data="deviceOperatorData" 
+              stripe 
+              :header-cell-class-name="'el-table-header'"
+              :cell-class-name="'el-table-cell'"
+              class="el-table"
+              border>
                 <el-table-column prop="deviceName" label="设备名称" />
                 <el-table-column prop="updataTime" label="上送时刻" />
                 <el-table-column prop="ErrorValue" label="守时误差(ms)">
@@ -110,6 +117,7 @@
 </template>
 <script lang="tsx" setup name="timeTest">
 import { SuccessFilled } from '@element-plus/icons-vue'
+import { reactive, ref, toRef, watch } from 'vue'
 
 const stepsIndex = ref(0)
 const activeIndex = ref(0)
@@ -196,7 +204,7 @@ const columns = reactive([
     prop: 'Result',
     label: '检测结果',
     // width: 100,
-    render: (scope) => {
+    render: (scope: { row: { Result: string } }) => {
       if (scope.row.Result === '不合格') {
         return (
           <el-tag type='danger'>{scope.row.Result}</el-tag>
@@ -231,7 +239,7 @@ watch(testStatus, function (newValue, oldValue) {
   }
 })
 
-function formatDateTime(date) {
+function formatDateTime(date: Date) {
   const year = date.getFullYear();
   const month = String(date.getMonth() + 1).padStart(2, '0');
   const day = String(date.getDate()).padStart(2, '0');
@@ -408,4 +416,70 @@ watch(ts, function (newValue, oldValue) {
       margin-bottom: 10px;
       padding: 10px 20px 10px 20px;
       box-sizing: border-box; */
+
+      .right-title .time-text {
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.right-title .gps-time {
+  color: #003078;
+}
+
+.error-dsc {
+  display: flex;
+  align-items: center;
+  margin-top: 10px; /* 根据需要调整 */
+}
+
+.error-dsc .green-div,
+.error-dsc .red-div {
+  width: 12px;
+  height: 12px;
+  margin-right: 8px;
+}
+
+.error-dsc .green-div {
+  background-color: #67C23A;
+}
+
+.error-dsc .red-div {
+  background-color: #F56C6C;
+}
+
+.error-dsc .description-text {
+  color: #606266;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.error-dsc .description-text.unqualified {
+  color: #F56C6C;
+}
+
+.el-table-header {
+  text-align: center;
+}
+
+.el-table-cell {
+  text-align: center;
+}
+
+.el-table {
+  margin-top: -30px;
+  width: 100%;
+}
+
+.tooltip-icon {
+  margin-left: 4px;
+  vertical-align: middle;
+}
+
+.result-tag {
+  font-weight: 600;
+}
+
+.result-text {
+  font-weight: 600;
+}
 </style>