样式调整

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

@@ -3,33 +3,38 @@
 <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>
+          <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>设备上送时刻表</div> -->
             <div>
-                <el-button type="primary" loading>设备已合格2台/共4台</el-button> 
+                <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">
-            <el-table :data="errorData" :header-cell-style="{ textAlign: 'center' } " :cell-style="{ textAlign: 'center' }" style="width: 100%" border class="custom-table">
+            <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="检测结果" />
+                <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>
@@ -43,38 +48,49 @@ import { SuccessFilled } from '@element-plus/icons-vue'
 const activeIndex = ref(0)
 const activeTotalNum = ref(5)
 
-
-const activities = [
+interface Activity {
+  content: string;
+  hollow?: boolean;
+  timestamp?: string;
+  size?: string;
+  color?: string;
+  icon?: any;
+}
+const activities = ref<Activity[]>([
   {
     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([
+
+const deviceOperatorData = ref([
+      {
+        deviceName: '被检设备1',
+        updataTime: '—', 
+        ErrorValue:'—',
+        Result: '—', 
+      },
+      {
+        deviceName: '被检设备2',
+        updataTime: '—', 
+        ErrorValue:'—',
+        Result: '—', 
+      },
+      {
+        deviceName: '被检设备3',
+        updataTime: '—', 
+        ErrorValue:'—',
+        Result: '—', 
+      },
+      {
+        deviceName: '被检设备4',
+        updataTime: '—', 
+        ErrorValue:'—',
+        Result: '—', 
+      },
+    ])
+
+    const deviceData = ref([
       {
         deviceName: '被检设备1',
         updataTime: '10:30:08.136', 
@@ -100,7 +116,6 @@ const errorData = ref([
         Result: '合格', 
       },
     ])
-
 const currentStepStatus = ref<'error' | 'finish' | 'wait' | 'success' | 'process'>('finish');
 
   const props = defineProps({
@@ -111,7 +126,7 @@ const currentStepStatus = ref<'error' | 'finish' | 'wait' | 'success' | 'process
 })
 const testStatus = toRef(props, 'testStatus');
 const ts = ref('');
-//监听goods_sn的变化
+//监听testStatus的变化
 watch(testStatus, function (newValue, oldValue) {
   ts.value = props.testStatus;
   if(ts.value==='start')
@@ -131,11 +146,63 @@ watch(testStatus, function (newValue, oldValue) {
             clearInterval(timer)
             ts.value = 'success'
         }
-        
   }, 1000);
   }
 })
+watch(activeIndex, function (newValue, oldValue) {
 
+if(activeIndex.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)
+{
+  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',
+  });
+
+  deviceOperatorData.value.length = 0;
+  deviceOperatorData.value = deviceData.value;
+}
+if(activeIndex.value > 3)
+{
+  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) {
@@ -151,21 +218,24 @@ watch(ts, function (newValue, oldValue) {
 
     flex-direction: row; /* 横向排列 */
     margin-top: 20px;
+    min-height: 300px;
     /* .dialog-left{
         margin-right: 20px;
     } */
 }
     .dialog-left{
         margin-left: 20px;
+        width: 20%;
     }
     .dialog-right{
+        margin-top: 25px;
         margin-left: 20px;
-        width: 500px
+        width: 80%;
     }
     .right-title{
         display: flex;
         flex-direction: row; /* 横向排列 */
-        justify-content: space-between;
+        justify-content: flex-end;
         margin-bottom: 10px;
     }
     /* width: 100%;