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

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/reportPopup.vue
+++ b/frontend/src/views/home/components/reportPopup.vue
@@ -0,0 +1,137 @@
+<template>
+    <el-dialog  title="报告生成" :model-value='visible' @close="handleCancel" v-bind="dialogBig">
+        <div class="report-dialog">
+            <div class="report-title">
+                <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-form-item label="报告模板"  >
+                    <el-input v-model='reportTemplate' :disabled="true"/>
+                </el-form-item>    
+            </div>
+            <div class="report-content">
+                <div>
+                    <el-tabs type="border-card">
+                        <el-tab-pane label="报告生成状态表：">
+                            <div class="form-grid">
+                                <div class="tabs-title"><el-button type="primary" loading >已生成2台/共4台</el-button> </div>
+                                <el-table :data="reportData" :header-cell-style="{ textAlign: 'center' } " :cell-style="{ textAlign: 'center' }" style="width: 100%" border class="custom-table">
+                                    <el-table-column prop="id" label="序号" />
+                                    <el-table-column prop="deviceName" label="设备名称" />
+                                    <el-table-column label="生成进度">
+                                        <template #default="scope">
+                                            <el-progress :color="customColors" :percentage="scope.row.processValue" />
+                                         </template>
+                                    </el-table-column>
+                                    <el-table-column prop="action" label="操作" >
+                                        <template #default="scope">
+                                            <el-button type='primary' link :icon='View'> 查看</el-button>
+                                         </template>
+                                    </el-table-column>
+                                </el-table>
+                            </div>
+                        </el-tab-pane>
+                    </el-tabs>
+                </div>
+            </div>
+        </div>
+    </el-dialog>
+
+</template>
+<script setup lang='ts'>
+
+import IPAddress from '@/components/IpAddress/index.vue'
+import { dialogBig } from '@/utils/elementBind'
+import { type Device } from '@/api/device/interface/device'
+import { ElMessage, type FormItemRule } from 'element-plus'
+import { addPqDev, updatePqDev } from '@/api/device/device'
+import { computed, reactive, type Ref, ref } from 'vue'
+import { useDictStore } from '@/stores/modules/dict'
+import { CirclePlus, Delete, EditPen,View } from '@element-plus/icons-vue'
+
+
+
+  const reportTemplate = ref('国网检测模板V1.0');
+  const testScriptName = ref('Q/GDW 10650.4-2021 模拟式');
+  const errorSysName = ref('Q/GDW 10650.2-2021');
+  const dataRule = ref('所有值');
+  const scriptSwitch = ref(true);
+  const currentScriptDsc = ref('频率准确度检测：频率：42.5Hz Ua=46.192V 0° Ub=46.192V -120° Uc=46.192V 120° Ia=1A 0° Ib=1A -120° Ic=1A 120°');
+
+const reportData = ref([
+  { id: '1', deviceName: '被检设备1', processValue: '100' , action:'查看' },
+  { id: '2', deviceName: '被检设备2', processValue: '100' , action:'查看' },
+  { id: '3', deviceName: '被检设备3', processValue: '10', action:'查看' },
+])
+const customColors = [
+  { color: "red", percentage: 0 },
+  { color: "red", percentage: 10 },
+  { color: "red", percentage: 20 },
+  { color: "red", percentage: 30 }, //红
+  { color: "red", percentage: 40 },
+  { color: "#e6a23c", percentage: 50 },
+  { color: "#e6a23c", percentage: 60 },
+  { color: "#e6a23c", percentage: 70 }, //黄
+  { color: "#e6a23c", percentage: 80 }, //1989fa
+  { color: "#e6a23c", percentage: 90 }, //1989fa
+  { color: "#5cb87a", percentage: 100 }, //绿
+];
+const handleNodeClick = (data) => {
+  console.log(data);
+};
+const MonIsShow = ref(false)
+const DevIsShow = ref(false)
+const IsPasswordShow = ref(false)
+const dictStore = useDictStore()
+// 定义弹出组件元信息
+const dialogFormRef = ref()
+const disabledDate = (time: Date) => {
+  return time.getTime() > Date.now()
+}
+
+const props = defineProps<{
+    visible: boolean;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'update:visible', value: boolean): void;
+    (e: 'submit', data: any): void;
+  }>();
+
+  const handleCancel = () => {
+    emit('update:visible', false); // 关闭对话框
+  };
+</script>
+<style scoped>
+
+.report-dialog{
+    display: flex;
+    flex-direction: column;
+}
+
+.report-title{
+    display: flex;
+    flex-direction: row;
+    margin-top: 10px;
+}
+
+.report-content{
+    display: flex;
+    flex-direction: column;
+}
+.tabs-title{
+    display: flex;
+    justify-content: flex-end;
+    margin-bottom: 10px;
+}
+
+.el-tabs__content{
+    padding-top: 5px !important;
+}
+</style>