修改样式

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/channelsTest.vue
+++ b/frontend/src/views/home/components/channelsTest.vue
@@ -1,279 +1,283 @@
 <template>
  <div>
-<div class = "test-dialog">
+    <div class="test-dialog">

-  <div class="dialog-content">
+      <div class="dialog-content">

-    <div class="right-title">    
+        <div class="right-title">
          <!-- <div>系数校准表</div> -->
          <div>当前源输出为：Ua=Ub=Uc=57.74V Ia=Ib=Ic=1A； 电压误差为：±0.1Un%； 电流误差为：±0.5%</div>
          <div>
-              <el-button type="primary" loading v-if="activeIndex > 0 && activeIndex < activeTotalNum">通道系数已校准3台/共3台</el-button> 
-              <el-button type="primary" :disabled="true" v-if="activeIndex === activeTotalNum">通道系数已校准3台/共3台</el-button>
+            <span style="  font-size: 18px;font-weight: 600;">
+              设备已合格 <span style="color: #67C23A">{{ qualified }}</span> 台/共 <span style="color: green">{{ total }}</span>
+              台
+            </span>
+            <!-- <el-button type="primary" loading
+              v-if="activeIndex > 0 && activeIndex < activeTotalNum">通道系数已校准3台/共3台</el-button>
+            <el-button type="primary" :disabled="true" v-if="activeIndex === activeTotalNum">通道系数已校准3台/共3台</el-button> -->
          </div>
-      </div>
-      <div class="right-content">
-        <el-tabs type="border-card">
-          <el-empty description="暂无数据，等待检测开始"  v-if="activeIndex === 0"/>
-          <el-tab-pane label="被检设备1" v-if="activeIndex > 0"> 
-            <channelsTestTable
-            :tableData="tableData1"
-            ></channelsTestTable>
-          </el-tab-pane>
-          <el-tab-pane label="被检设备2" v-if="activeIndex > 1 ">
-            <template #label> 
-              <span class="custom-tabs-label">
-                <span>被检设备2</span>
-                <el-icon><Failed /></el-icon>
-              </span>
-            </template>
-            <channelsTestTable
-            :tableData="tableData2"></channelsTestTable>
-          </el-tab-pane>
-          <el-tab-pane label="被检设备3" v-if="activeIndex > 2 ">
-            <channelsTestTable
-            :tableData="tableData3"></channelsTestTable>
-          </el-tab-pane>
-      </el-tabs>
+        </div>
+        <div class="right-content">
+          <el-tabs type="border-card">
+            <el-empty description="暂无数据，等待检测开始" v-if="activeIndex === 0" />
+            <el-tab-pane label="被检设备1" v-if="activeIndex > 0">
+              <channelsTestTable :tableData="tableData1"></channelsTestTable>
+            </el-tab-pane>
+            <el-tab-pane label="被检设备2" v-if="activeIndex > 1">
+              <template #label>
+                <span class="custom-tabs-label">
+                  <span>被检设备2</span>
+                  <el-icon>
+                    <Failed />
+                  </el-icon>
+                </span>
+              </template>
+              <channelsTestTable :tableData="tableData2"></channelsTestTable>
+            </el-tab-pane>
+            <el-tab-pane label="被检设备3" v-if="activeIndex > 2">
+              <channelsTestTable :tableData="tableData3"></channelsTestTable>
+            </el-tab-pane>
+          </el-tabs>

+        </div>
      </div>
-  </div>

-</div>
+    </div>
  </div>

 </template>
 <script lang="tsx" setup name="channelsTest">
-import { SuccessFilled,Failed } from '@element-plus/icons-vue'
+import { SuccessFilled, Failed } from '@element-plus/icons-vue'

 const activeIndex = ref(0)
 const activeTotalNum = ref(3)
-
+const qualified = ref(0)
+const total = ref(0)

 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,
-},
+  {
+    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 tableData1 = ref([
-    {
-      id: '1',
-      updateTime: '2024-10-10 10:30:00', 
-      deviceName:'被检设备1',
-      MonitorIdx: 1, 
-      Ua:1.0003,
-      Ub:1.0003,
-      Uc:0.0096,
-      Ia:1.0003,
-      Ib:1.0003,
-      Ic:1.0008,
-      Result: '合格', 
-    },
-    {
-      id: '2',
-      updateTime: '2024-10-10 10:30:00', 
-      deviceName:'被检设备1',
-      MonitorIdx: 2, 
-      Ua:1.0003,
-      Ub:1.0003,
-      Uc:0.0096,
-      Ia:1.0003,
-      Ib:1.0003,
-      Ic:1.0008,
-      Result: '合格', 
-    },
-    {
-      id: '3',
-      updateTime: '2024-10-10 10:30:00', 
-      deviceName:'被检设备1',
-      MonitorIdx: 3, 
-      Ua:1.0003,
-      Ub:1.0003,
-      Uc:0.0096,
-      Ia:1.0003,
-      Ib:1.0003,
-      Ic:1.0008,
-      Result: '合格', 
-    },
-    {
-      id: '4',
-      updateTime: '2024-10-10 10:30:00', 
-      deviceName:'被检设备1',
-      MonitorIdx: 4, 
-      Ua:1.0003,
-      Ub:1.0003,
-      Uc:0.0096,
-      Ia:1.0003,
-      Ib:1.0003,
-      Ic:1.0008,
-      Result: '合格', 
-    },
-  ])
-  const tableData2 = ref([
-    {
-      id: '1',
-      updateTime: '2024-10-10 10:30:00', 
-      deviceName:'被检设备2',
-      MonitorIdx: 1, 
-      Ua:1.0003,
-      Ub:1.0003,
-      Uc:0.0096,
-      Ia:1.0003,
-      Ib:1.0003,
-      Ic:1.0008,
-      Result: '合格', 
-    },
-    {
-      id: '2',
-      updateTime: '2024-10-10 10:30:00', 
-      deviceName:'被检设备2',
-      MonitorIdx: 2, 
-      Ua:1.0003,
-      Ub:1.0003,
-      Uc:0.0096,
-      Ia:1.0003,
-      Ib:1.0003,
-      Ic:1.0008,
-      Result: '不合格', 
-    },
-    {
-      id: '3',
-      updateTime: '2024-10-10 10:30:00', 
-      deviceName:'被检设备2',
-      MonitorIdx: 3, 
-      Ua:1.0003,
-      Ub:1.0003,
-      Uc:0.0096,
-      Ia:1.0003,
-      Ib:1.0003,
-      Ic:1.0008,
-      Result: '合格', 
-    },
-    {
-      id: '4',
-      updateTime: '2024-10-10 10:30:00', 
-      deviceName:'被检设备2',
-      MonitorIdx: 4, 
-      Ua:1.0003,
-      Ub:1.0003,
-      Uc:0.0096,
-      Ia:1.0003,
-      Ib:1.0003,
-      Ic:1.0008,
-      Result: '不合格', 
-    },
-  ])
-  const tableData3 = ref([
-    {
-      id: '1',
-      updateTime: '2024-10-10 10:30:00', 
-      deviceName:'被检设备3',
-      MonitorIdx: 1, 
-      Ua:1.0003,
-      Ub:1.0003,
-      Uc:0.0096,
-      Ia:1.0003,
-      Ib:1.0003,
-      Ic:1.0008,
-      Result: '合格', 
-    },
-    {
-      id: '2',
-      updateTime: '2024-10-10 10:30:00', 
-      deviceName:'被检设备3',
-      MonitorIdx: 2, 
-      Ua:1.0003,
-      Ub:1.0003,
-      Uc:0.0096,
-      Ia:1.0003,
-      Ib:1.0003,
-      Ic:1.0008,
-      Result: '合格', 
-    },
-    {
-      id: '3',
-      updateTime: '2024-10-10 10:30:00', 
-      deviceName:'被检设备3',
-      MonitorIdx: 3, 
-      Ua:1.0003,
-      Ub:1.0003,
-      Uc:0.0096,
-      Ia:1.0003,
-      Ib:1.0003,
-      Ic:1.0008,
-      Result: '合格', 
-    },
-    {
-      id: '4',
-      updateTime: '2024-10-10 10:30:00', 
-      deviceName:'被检设备3',
-      MonitorIdx: 4, 
-      Ua:1.0003,
-      Ub:1.0003,
-      Uc:0.0096,
-      Ia:1.0003,
-      Ib:1.0003,
-      Ic:1.0008,
-      Result: '合格', 
-    },
-  ])
+  {
+    id: '1',
+    updateTime: '2024-10-10 10:30:00',
+    deviceName: '被检设备1',
+    MonitorIdx: 1,
+    Ua: 1.0003,
+    Ub: 1.0003,
+    Uc: 0.0096,
+    Ia: 1.0003,
+    Ib: 1.0003,
+    Ic: 1.0008,
+    Result: '合格',
+  },
+  {
+    id: '2',
+    updateTime: '2024-10-10 10:30:00',
+    deviceName: '被检设备1',
+    MonitorIdx: 2,
+    Ua: 1.0003,
+    Ub: 1.0003,
+    Uc: 0.0096,
+    Ia: 1.0003,
+    Ib: 1.0003,
+    Ic: 1.0008,
+    Result: '合格',
+  },
+  {
+    id: '3',
+    updateTime: '2024-10-10 10:30:00',
+    deviceName: '被检设备1',
+    MonitorIdx: 3,
+    Ua: 1.0003,
+    Ub: 1.0003,
+    Uc: 0.0096,
+    Ia: 1.0003,
+    Ib: 1.0003,
+    Ic: 1.0008,
+    Result: '合格',
+  },
+  {
+    id: '4',
+    updateTime: '2024-10-10 10:30:00',
+    deviceName: '被检设备1',
+    MonitorIdx: 4,
+    Ua: 1.0003,
+    Ub: 1.0003,
+    Uc: 0.0096,
+    Ia: 1.0003,
+    Ib: 1.0003,
+    Ic: 1.0008,
+    Result: '合格',
+  },
+])
+const tableData2 = ref([
+  {
+    id: '1',
+    updateTime: '2024-10-10 10:30:00',
+    deviceName: '被检设备2',
+    MonitorIdx: 1,
+    Ua: 1.0003,
+    Ub: 1.0003,
+    Uc: 0.0096,
+    Ia: 1.0003,
+    Ib: 1.0003,
+    Ic: 1.0008,
+    Result: '合格',
+  },
+  {
+    id: '2',
+    updateTime: '2024-10-10 10:30:00',
+    deviceName: '被检设备2',
+    MonitorIdx: 2,
+    Ua: 1.0003,
+    Ub: 1.0003,
+    Uc: 0.0096,
+    Ia: 1.0003,
+    Ib: 1.0003,
+    Ic: 1.0008,
+    Result: '不合格',
+  },
+  {
+    id: '3',
+    updateTime: '2024-10-10 10:30:00',
+    deviceName: '被检设备2',
+    MonitorIdx: 3,
+    Ua: 1.0003,
+    Ub: 1.0003,
+    Uc: 0.0096,
+    Ia: 1.0003,
+    Ib: 1.0003,
+    Ic: 1.0008,
+    Result: '合格',
+  },
+  {
+    id: '4',
+    updateTime: '2024-10-10 10:30:00',
+    deviceName: '被检设备2',
+    MonitorIdx: 4,
+    Ua: 1.0003,
+    Ub: 1.0003,
+    Uc: 0.0096,
+    Ia: 1.0003,
+    Ib: 1.0003,
+    Ic: 1.0008,
+    Result: '不合格',
+  },
+])
+const tableData3 = ref([
+  {
+    id: '1',
+    updateTime: '2024-10-10 10:30:00',
+    deviceName: '被检设备3',
+    MonitorIdx: 1,
+    Ua: 1.0003,
+    Ub: 1.0003,
+    Uc: 0.0096,
+    Ia: 1.0003,
+    Ib: 1.0003,
+    Ic: 1.0008,
+    Result: '合格',
+  },
+  {
+    id: '2',
+    updateTime: '2024-10-10 10:30:00',
+    deviceName: '被检设备3',
+    MonitorIdx: 2,
+    Ua: 1.0003,
+    Ub: 1.0003,
+    Uc: 0.0096,
+    Ia: 1.0003,
+    Ib: 1.0003,
+    Ic: 1.0008,
+    Result: '合格',
+  },
+  {
+    id: '3',
+    updateTime: '2024-10-10 10:30:00',
+    deviceName: '被检设备3',
+    MonitorIdx: 3,
+    Ua: 1.0003,
+    Ub: 1.0003,
+    Uc: 0.0096,
+    Ia: 1.0003,
+    Ib: 1.0003,
+    Ic: 1.0008,
+    Result: '合格',
+  },
+  {
+    id: '4',
+    updateTime: '2024-10-10 10:30:00',
+    deviceName: '被检设备3',
+    MonitorIdx: 4,
+    Ua: 1.0003,
+    Ub: 1.0003,
+    Uc: 0.0096,
+    Ia: 1.0003,
+    Ib: 1.0003,
+    Ic: 1.0008,
+    Result: '合格',
+  },
+])
 const currentStepStatus = ref<'error' | 'finish' | 'wait' | 'success' | 'process'>('finish');

 const props = defineProps({
  testStatus: {
-  type: String,
-  default: 'wait'
-}
+    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'
+  ts.value = props.testStatus;
+  if (ts.value === 'start') {
+    ts.value = 'process'

-  let timer = setInterval(() => {
-      if(activeIndex.value < activeTotalNum.value)
-          activeIndex.value++
-      else if(activeIndex.value === activeTotalNum.value)
-      {
-          clearInterval(timer)
-          ts.value = 'success'
+    let timer = setInterval(() => {
+      if (activeIndex.value < activeTotalNum.value) {
+        activeIndex.value++
+        qualified.value = activeIndex.value
      }
-      else 
-      {
-          clearInterval(timer)
-          ts.value = 'success'
+      else if (activeIndex.value === activeTotalNum.value) {
+        clearInterval(timer)
+        ts.value = 'success'
      }
-      
-}, 1000);
-}
+      else {
+        clearInterval(timer)
+        ts.value = 'success'
+      }
+
+      total.value = activeTotalNum.value
+    }, 1000);
+  }
 })
 // watch(activeIndex, function (newValue, oldValue) {

@@ -333,33 +337,41 @@ if(ts.value==='start')
 const emit = defineEmits(['update:testStatus']);
 //监听sn
 watch(ts, function (newValue, oldValue) {
-//修改父组件
-emit('update:testStatus',ts.value)
+  //修改父组件
+  emit('update:testStatus', ts.value)
 })

 </script>
 <style scoped>
-  .right-title{
-      display: flex;
-      flex-direction: row; /* 横向排列 */
-      justify-content: space-between;
-      margin-bottom: 10px;
-  }
-  .right-content{
-    /* max-height: 400px; */
-  }
+.right-title {
+  display: flex;
+  flex-direction: row;
+  /* 横向排列 */
+  justify-content: space-between;
+  margin-bottom: 10px;
+}

-  .custom-tabs-label .el-icon {
+.right-content {
+  /* max-height: 400px; */
+}
+
+.custom-tabs-label .el-icon {
  vertical-align: middle;
 }
+
 .custom-tabs-label span {
  vertical-align: middle;
  margin-left: 4px;
 }
-.dialog-content{
+
+.dialog-content {
  height: 472px;
 }
+
 .el-tabs--border-card {
-  height: 435px;
+  height: 425px;
+}
+.el-icon svg {
+  color: #ff7171;
 }
 </style>