修改样式

2024-12-05 15:22:46 +08:00
parent 8e2a22cf61
commit ea4edfadd0
10 changed files with 1619 additions and 1582 deletions
--- a/frontend/src/views/home/components/timeTest.vue
+++ b/frontend/src/views/home/components/timeTest.vue
@@ -1,14 +1,15 @@
 <template>
-    <div>
-<div class = "test-dialog">
-    <div class="dialog-left">
-      <el-steps direction="vertical" :active="activeIndex" :process-status="currentStepStatus" finish-status="success">
-        <el-step title="开始检测" :description="startTime"/>
-        <el-step title="GPS完成上送" :description="gpsTime"/>
-        <el-step title="设备开始上送时刻"  :description="devStartTime"/>
-        <el-step title="设备最晚上送时刻"  :description="devEndTime"/>
-        <el-step title="检测完成"  :description="finishTime"/>
-      </el-steps>
+  <div>
+    <div class="test-dialog">
+      <div class="dialog-left">
+        <el-steps direction="vertical" :active="activeIndex" :process-status="currentStepStatus"
+          finish-status="success">
+          <el-step title="开始检测" :description="startTime" />
+          <el-step title="GPS完成上送" :description="gpsTime" />
+          <el-step title="设备开始上送时刻" :description="devStartTime" />
+          <el-step title="设备最晚上送时刻" :description="devEndTime" />
+          <el-step title="检测完成" :description="finishTime" />
+        </el-steps>
        <!-- <el-timeline style="max-width: 600px">
          <el-timeline-item
            v-for="(activity, index) in activities"
@@ -23,27 +24,26 @@
            {{ activity.content }}
          </el-timeline-item>
        </el-timeline> -->
-    </div>
-    <div class="dialog-right">
-        <div class="right-title">    
-            <!-- <div>设备上送时刻表</div> -->
-            <div>
-                <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="dialog-right">
+        <div class="right-title">
+          <!-- <div>设备上送时刻表</div> -->
+          <span style="  font-size: 18px;font-weight: 600;">
+            设备已合格 <span style="color: #67C23A">{{ qualified }}</span> 台/共 <span style="color: green">4</span> 台
+          </span>
+          <div>
+            <!-- <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">
-          <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 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 :data="deviceOperatorData" stripe :header-cell-style="{ textAlign: 'center' } " :cell-style="{ textAlign: 'center' }" style="width: 100%" border>
+          <!-- <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)" />
@@ -51,12 +51,12 @@
                  <template #default="scope">
                    <el-tag :type="scope.row.Result === '合格' ? 'success' : 'danger'">{{ scope.row.Result }}</el-tag>
                  </template>
-                </el-table-column>
-           </el-table> -->
+</el-table-column>
+</el-table> -->
        </div>
+      </div>
    </div>
-</div>
-    </div>
+  </div>

 </template>
 <script lang="tsx" setup name="timeTest">
@@ -78,6 +78,7 @@ interface Activity {
  color?: string;
  icon?: any;
 }
+const qualified = ref(0)
 const activities = ref<Activity[]>([
  {
    content: '开始检测',
@@ -86,62 +87,62 @@ const activities = ref<Activity[]>([


 const deviceOperatorData = ref([
-      {
-        deviceName: '240001',
-        updataTime: '—', 
-        ErrorValue:'—',
-        Result: '—', 
-      },
-      {
-        deviceName: '240002',
-        updataTime: '—', 
-        ErrorValue:'—',
-        Result: '—', 
-      },
-      {
-        deviceName: '240003',
-        updataTime: '—', 
-        ErrorValue:'—',
-        Result: '—', 
-      },
-      {
-        deviceName: '240004',
-        updataTime: '—', 
-        ErrorValue:'—',
-        Result: '—', 
-      },
-    ])
+  {
+    deviceName: '240001',
+    updataTime: '—',
+    ErrorValue: '—',
+    Result: '—',
+  },
+  {
+    deviceName: '240002',
+    updataTime: '—',
+    ErrorValue: '—',
+    Result: '—',
+  },
+  {
+    deviceName: '240003',
+    updataTime: '—',
+    ErrorValue: '—',
+    Result: '—',
+  },
+  {
+    deviceName: '240004',
+    updataTime: '—',
+    ErrorValue: '—',
+    Result: '—',
+  },
+])

-    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 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: {
+const props = defineProps({
+  testStatus: {
    type: String,
    default: 'wait'
  }
@@ -171,42 +172,37 @@ const columns = reactive([
    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>
-    )
-    }
-  },
+      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')
-  {
+  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);
+      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);
  }
 })

@@ -224,101 +220,105 @@ function formatDateTime(date) {

 watch(activeIndex, function (newValue, oldValue) {

-if(activeIndex.value === 1)
-{
-  startTime.value = formatDateTime(new Date());
+  if (activeIndex.value === 1) {
+    startTime.value = formatDateTime(new Date());

-  // activities.value.length = 0;
-  // activities.value.push({
-  //   content: '开始检测',
-  //   timestamp: '2018-04-12 20:46',
-  //   size: 'large',
-  //   color: '#0bbd87',
-  //   icon: SuccessFilled,
-  // });
-}
-if(activeIndex.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)
-{
-  // activities.value.push({
-  //   content: '设备最早上送时刻',
-  //   timestamp: '2018-04-03 20:46',
-  //   color: '#0bbd87',
-  //   icon: SuccessFilled,
-  //   size: 'large',
-  // });
-  devStartTime.value = formatDateTime(new Date());
-  deviceOperatorData.value.length = 0;
-  deviceOperatorData.value = deviceData.value;
-}
-if(activeIndex.value > 3)
-{
-  devEndTime.value = formatDateTime(new Date());
-  finishTime.value = formatDateTime(new Date());
+    // activities.value.length = 0;
+    // activities.value.push({
+    //   content: '开始检测',
+    //   timestamp: '2018-04-12 20:46',
+    //   size: 'large',
+    //   color: '#0bbd87',
+    //   icon: SuccessFilled,
+    // });
+  }
+  if (activeIndex.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) {
+    // activities.value.push({
+    //   content: '设备最早上送时刻',
+    //   timestamp: '2018-04-03 20:46',
+    //   color: '#0bbd87',
+    //   icon: SuccessFilled,
+    //   size: 'large',
+    // });
+    devStartTime.value = formatDateTime(new Date());
+    deviceOperatorData.value.length = 0;
+    deviceOperatorData.value = deviceData.value;
+    qualified.value = 3
+  }
+  if (activeIndex.value > 3) {
+    devEndTime.value = formatDateTime(new Date());
+    finishTime.value = formatDateTime(new Date());

-  // 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',
-  // });
-}
+    // 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) {
  //修改父组件
-  emit('update:testStatus',ts.value)
+  emit('update:testStatus', ts.value)
 })

 </script>
 <style scoped>
+.test-dialog {
+  display: flex;

-.test-dialog{
-    display: flex;
-
-    flex-direction: row; /* 横向排列 */
-    /* margin-top: 20px; */
-    /* min-height: 300px; */
-    height: 472px;
-    /* .dialog-left{
+  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{
-        display: flex;
-        flex-direction: row; /* 横向排列 */
-        justify-content: flex-end;
-        margin-bottom: 10px;
-    }
-    /* width: 100%;
+
+.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: flex-end;
+  /* margin-bottom: 10px; */
+
+}
+
+/* width: 100%;
      height: auto;
      background: #fff;
      border-radius: 4px;