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

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/test.vue
+++ b/frontend/src/views/home/components/test.vue
@@ -0,0 +1,159 @@
+<template>
+
+<div class = "test-dialog">
+    <div class="dialog-title">    
+        <el-progress
+            style="width: 80%"
+            :percentage="percentage"
+            :color="customColors"
+          />
+
+            <el-button
+              type="primary"
+              v-if="!isPause"
+              :icon="VideoPause"
+              @click="handlePauseTest"
+              >暂停检测</el-button
+            >
+            <el-button
+              type="warning"
+              v-if="isPause"
+              :icon="Refresh"
+              @click="handlePauseTest"
+              >继续检测</el-button
+            >
+            <el-button type="danger" :icon="Close" @click="handleFinishTest"
+              >停止检测</el-button
+            >
+
+    </div>
+    <div class="dialog-content">
+        <el-table :data="errorData" :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="被检通道1" />
+            <el-table-column prop="ErrorValue" label="被检通道2" />
+            <el-table-column prop="Result" label="被检通道3" />
+        </el-table>
+    </div>
+    <div class="dialog-log">
+        <el-collapse :v-model="1" accordion>
+            <el-collapse-item title="检测日志：" name="1">
+                <div>
+                    暂无数据，等待检测开始
+                </div>
+            </el-collapse-item>
+        </el-collapse>
+    </div>
+</div>
+
+
+</template>
+<script lang="tsx" setup name="test">
+import { VideoPause,Refresh,Close } from '@element-plus/icons-vue'
+
+const percentage = ref(0);
+const customColors = [
+  { color: "#5cb87a", percentage: 100 }, //绿
+];
+//暂停检测
+const isPause = ref<boolean>(false);
+
+const handlePauseTest = () => {
+  if (!isPause.value) {
+
+  } else {
+
+  }
+  isPause.value = !isPause.value;
+};
+//完成检测
+const handleFinishTest = () => {
+  ElMessage.success("完成检测");
+};
+
+
+const errorData = ref([
+      {
+        deviceName: '额定条件下频率检测42.5Hz',
+        updataTime: '√', 
+        ErrorValue:'×',
+        Result: '/', 
+      },
+      {
+        deviceName: '额定条件下频率检测50Hz',
+        updataTime: '/', 
+        ErrorValue:'√',
+        Result: '×', 
+      },
+      {
+        deviceName: '额定条件下频率检测50.05Hz',
+        updataTime: '—', 
+        ErrorValue:'—',
+        Result: '—', 
+      },
+      {
+        deviceName: '额定条件下频率检测57.5Hz',
+        updataTime: '—', 
+        ErrorValue:'—',
+        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>
+.test-dialog{
+    display: flex;
+    flex-direction: column;
+}
+
+.dialog-title{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-right:10px;
+    margin-bottom:10px;
+}
+
+</style>