检测过程流程展示页面框架绘制

2024-11-18 22:04:59 +08:00
parent 5cdbee88b4
commit 977a998767
15 changed files with 1469 additions and 171 deletions
--- a/frontend/src/views/home/components/channelsTest.vue
+++ b/frontend/src/views/home/components/channelsTest.vue
@@ -0,0 +1,149 @@
+<template>
+  <div>
+<div class = "test-dialog">
+
+  <div class="dialog-content">
+    <div>当前源输出为：Ua=Ub=Uc=57.74V Ia=Ib=Ic=1A</div>
+    <div class="right-title">    
+          <div>系数校准表</div>
+          <div>
+              <el-button type="primary" loading>通道系数已校准2台/共4台</el-button> 
+          </div>
+      </div>
+      <div class="right-content">
+        <el-tabs type="border-card">
+          <el-tab-pane label="被检设备1">
+            <channelsTestTable></channelsTestTable>
+          </el-tab-pane>
+          <el-tab-pane label="被检设备2">
+            <channelsTestTable></channelsTestTable>
+          </el-tab-pane>
+          <el-tab-pane label="被检设备3">
+            <channelsTestTable></channelsTestTable>
+          </el-tab-pane>
+      </el-tabs>
+
+      </div>
+  </div>
+
+</div>
+  </div>
+
+</template>
+<script lang="tsx" setup name="channelsTest">
+import { SuccessFilled } from '@element-plus/icons-vue'
+
+const activeIndex = ref(0)
+const activeTotalNum = ref(5)
+
+
+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,
+},
+]
+
+const errorData = ref([
+    {
+      deviceName: '被检设备1',
+      updataTime: '10:30:08.136', 
+      ErrorValue:'148',
+      Result: '合格', 
+    },
+    {
+      deviceName: '被检设备2',
+      updataTime: '10:30:08.136', 
+      ErrorValue:'136',
+      Result: '合格', 
+    },
+    {
+      deviceName: '被检设备3',
+      updataTime: '10:30:09.006', 
+      ErrorValue:'1006',
+      Result: '不合格', 
+    },
+    {
+      deviceName: '被检设备4',
+      updataTime: '10:30:08.736', 
+      ErrorValue:'736',
+      Result: '合格', 
+    },
+  ])
+
+const currentStepStatus = ref<'error' | 'finish' | 'wait' | 'success' | 'process'>('finish');
+
+const props = defineProps({
+  testStatus: {
+  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'
+
+  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);
+}
+})
+
+const emit = defineEmits(['update:testStatus']);
+//监听sn
+watch(ts, function (newValue, oldValue) {
+//修改父组件
+emit('update:testStatus',ts.value)
+})
+
+</script>
+<style scoped>
+
+
+  .right-title{
+      display: flex;
+      flex-direction: row; /* 横向排列 */
+      justify-content: space-between;
+      margin-bottom: 10px;
+  }
+</style>