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

2024-11-19 19:34:00 +08:00
parent 543662a2ac
commit 963c0f5713
10 changed files with 1073 additions and 107 deletions
--- a/frontend/src/views/home/components/resultPopup.vue
+++ b/frontend/src/views/home/components/resultPopup.vue
@@ -0,0 +1,114 @@
+<template>
+    <el-dialog  title="检测结果" :model-value="visible" @close="handleCancel" v-bind="dialogBig" width="895px">
+       <div class="result-dialog">
+        <div class="result-title">
+            <el-row>
+            <el-form-item label="检测脚本:"  >
+                <el-input v-model='testScriptName' :disabled="true"/>
+            </el-form-item>    
+            <el-form-item label="误差体系"  >
+                <el-input v-model='errorSysName' :disabled="true"/>
+            </el-form-item>    
+            <el-form-item label="数据处理原则"  >
+                <el-input v-model='dataRule' :disabled="true"/>
+            </el-form-item>    
+        </el-row>  
+       </div>
+       <div class="result-content">
+        <el-table :data="resultData" stripe max-height="350" :header-cell-style="{ textAlign: 'center' } " :cell-style="{ textAlign: 'center' }" style="width: 100%" border v-on:cell-click="handleClick">
+            <el-table-column prop="deviceName" label="被检设备" />
+            <el-table-column prop="result_1" label="通道1" />
+            <el-table-column prop="result_2" label="通道2" />
+            <el-table-column prop="result_3" label="通道3" />
+            <el-table-column prop="result_4" label="通道4" />
+        </el-table>
+      </div>
+      <div class="result-footer">
+        你可以停留在本页查看数据，或返回首页进行复检、报告生成和归档
+      </div>
+       </div>
+       <DataCheckPopup
+           :visible="DataCheckDialogVisible"
+            @update:visible="DataCheckDialogVisible = $event"
+       ></DataCheckPopup>
+    </el-dialog>
+</template>
+  
+  <script lang="ts" setup name="testPopup">
+  import{ElMessage, ElSelectV2, FormInstance,FormItemRule}from'element-plus'
+  import { defineProps, defineEmits, reactive,watch,ref, Ref } from 'vue';
+  import { dialogBig,dialogMiddle} from '@/utils/elementBind'
+  //import IndicatorTypeDialog from "@/views/machine/errorSystem/components/IndicatorTypeDialog.vue"; // 导入子组件
+  import {CirclePlus, Delete, EditPen,FolderOpened,CopyDocument,Edit, Picture, UploadFilled, SuccessFilled,VideoPlay,Right,Refresh,Close} from '@element-plus/icons-vue'
+  import { useDictStore } from '@/stores/modules/dict'
+  import preTest from './preTest.vue'
+  import timeTest from './timeTest.vue'
+  import channelsTest from './channelsTest.vue'
+  import DataCheckPopup from './dataCheckPopup.vue';
+import { log } from 'console';
+
+  const props = defineProps<{
+    visible: boolean;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'update:visible', value: boolean): void;
+    (e: 'submit', data: any): void;
+  }>();
+
+  const testScriptName = ref('Q/GDW 10650.4-2021 模拟式');
+  const errorSysName = ref('Q/GDW 10650.2-2021');
+  const dataRule = ref('所有值');
+  const DataCheckDialogVisible = ref(false);
+
+const resultData = ref([
+  {
+    deviceName: "被检设备1",
+    result_1: "合格",
+    result_2: "合格",
+    result_3: "合格",
+    result_4: "合格",
+  },
+  {
+    deviceName: "被检设备2",
+    result_1: "合格",
+    result_2: "合格",
+    result_3: "—",
+    result_4: "—",
+  },
+  {
+    deviceName: "被检设备3",
+    result_1: "不合格",
+    result_2: "合格",
+    result_3: "—",
+    result_4: "—",
+  },
+]);
+
+const handleClick = (row:any) => {
+    console.log(111)
+  DataCheckDialogVisible.value = true;
+};
+  
+  const handleCancel = () => {
+    emit('update:visible', false); // 关闭对话框
+  };
+  
+
+  </script>
+  
+  <style scoped>
+.result-dialog{
+    display: flex;
+    flex-direction: column;
+}
+
+.result-title{
+    /* display: flex;
+    flex-direction: row; */
+  }
+.result-footer{
+    text-align: right;
+    margin-top: 10px;
+}
+</style>