数据查询、报告生成流程界面框架绘制

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

@@ -1,6 +1,6 @@
 <template>
 
-<div class = "test-dialog">
+<div class = "dialog">
     <div class="dialog-title">    
         <el-progress
             style="width: 80%"
@@ -28,8 +28,8 @@
 
     </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 :data="errorData" :header-cell-style="{ textAlign: 'center' } " :cell-style="{ textAlign: 'center' }" style="width: 100%" border v-on:cell-click="handleClick">
+            <el-table-column fixed  prop="deviceName" label="检测项目" />
             <el-table-column prop="updataTime" label="被检通道1" />
             <el-table-column prop="ErrorValue" label="被检通道2" />
             <el-table-column prop="Result" label="被检通道3" />
@@ -45,11 +45,19 @@
         </el-collapse>
     </div>
 </div>
-
-
+<resultPopup
+    :visible="resultDialogVisible"
+    @update:visible="resultDialogVisible = $event"
+></resultPopup>
+<dataCheckSingleChannelSingleTestPopup
+    :visible="dataCheckSingleChannelSingleTestDialogVisable"
+    @update:visible="dataCheckSingleChannelSingleTestDialogVisable = $event"
+></dataCheckSingleChannelSingleTestPopup>
 </template>
 <script lang="tsx" setup name="test">
 import { VideoPause,Refresh,Close } from '@element-plus/icons-vue'
+import resultPopup from './resultPopup.vue'
+import dataCheckSingleChannelSingleTestPopup from './dataCheckSingleChannelSingleTestPopup.vue'
 
 const percentage = ref(0);
 const customColors = [
@@ -57,7 +65,8 @@ const customColors = [
 ];
 //暂停检测
 const isPause = ref<boolean>(false);
-
+const resultDialogVisible = ref(false)
+const dataCheckSingleChannelSingleTestDialogVisable = ref(false);
 const handlePauseTest = () => {
   if (!isPause.value) {
 
@@ -68,9 +77,14 @@ const handlePauseTest = () => {
 };
 //完成检测
 const handleFinishTest = () => {
+  resultDialogVisible.value = true
   ElMessage.success("完成检测");
 };
 
+const handleClick = (row:any) => {
+    console.log(111)
+  dataCheckSingleChannelSingleTestDialogVisable.value = true;
+};
 
 const errorData = ref([
       {
@@ -143,7 +157,7 @@ watch(ts, function (newValue, oldValue) {
 
 </script>
 <style scoped>
-.test-dialog{
+.dialog{
     display: flex;
     flex-direction: column;
 }