update:数据查询界面，数据对比功能界面更新

package.json

@@ -27,6 +27,8 @@
     "dayjs": "^1.11.18",
     "echarts": "^6.0.0",
     "element-plus": "^2.10.7",
+    "html2canvas": "^1.4.1",
+    "jspdf": "^3.0.3",
     "lodash": "^4.17.21",
     "moment": "^2.30.1",
     "pinia": "^3.0.3",

src/utils/file.ts

@@ -22,8 +22,8 @@ export const formatFileSize = (sizeInBytes: number): string => {
   return `${size.toFixed(2)} ${units[unitIndex]}`;
 };
 
-export const openTabReviewFile = async(fileId: number) => {
-  const res:any = await getKKFileViewURLFromMinioApi({ fileId });
+export const openTabReviewFile = async (fileId: number) => {
+  const res: any = await getKKFileViewURLFromMinioApi({ fileId });
   if (res.code === 200) {
     window.open(env.VITE_API_FILE_PREVIEW_URL + '?' + res.data.encodeKKFileViewURL, '_blank');
     // return res.data.encodeKKFileViewURL;

src/views/data/analysis/components/analysisDataDialog.vue

@@ -1,11 +1,11 @@
 <template>
   <Dialog v-model="diaVisible" diaTitle="数据分析" width="90%" height="90%" @close="closeFun">
-    <div class="content">
+    <div class="content" >
 
       <div class="filter-analysis-content">
         <el-checkbox class="check-all" v-model="checkAll" label="全选" value="all" @change="checkAllChangeFn" />
 
-        <el-checkbox-group v-model="checkAnalysisList">
+        <el-checkbox-group class="check-all" v-model="checkAnalysisList">
           <template v-for="item in analysisTypeList" :key="item.value">
             <el-checkbox
               v-show="item.includes.includes(analysisType)"
@@ -17,9 +17,11 @@
           </template>
 
         </el-checkbox-group>
+
+        <el-button @click="exportPdfFn">导出PDF</el-button>
       </div>
 
-      <div class="check-table-content">
+      <div class="check-table-content" id="compare-content" ref="contentToConvertRef">
 
         <div class="loadcase-table-content">
           <BaseTable
@@ -60,6 +62,27 @@
                   :cloumn-width="cloumnWidth"
                 ></performanceAnalysis>
               </template>
+              <template v-if="item.value === 'result'">
+                <cloudImage
+                  v-if="showComponents"
+                  :check-task-info="checktableData"
+                  :cloumn-width="cloumnWidth"
+                ></cloudImage>
+              </template>
+              <template v-if="item.value === 'curve'">
+                <curveResult
+                  v-if="showComponents"
+                  :check-task-info="checktableData"
+                  :cloumn-width="cloumnWidth"
+                ></curveResult>
+              </template>
+              <template v-if="item.value === 'report'">
+                <reportComparison
+                  v-if="showComponents"
+                  :check-task-info="checktableData"
+                  :cloumn-width="cloumnWidth"
+                ></reportComparison>
+              </template>
             </div>
 
           </div>
@@ -78,6 +101,12 @@ import BaseTable from '@/components/common/table/baseTable.vue';
 import modelFileResult from './modelFileResult.vue';
 import calculationFileResult from './calculationFileResult.vue';
 import performanceAnalysis from './performanceAnalysis.vue';
+import cloudImage from './cloudImage.vue';
+import curveResult from './curveResult.vue';
+import reportComparison from './reportComparison.vue';
+import jsPDF from 'jspdf';
+import html2canvas from 'html2canvas';
+import moment from 'moment';
 
 const props = defineProps({
   analysisData: {
@@ -86,7 +115,7 @@ const props = defineProps({
   },
 });
 
-const cloumnWidth = ref('100');
+const cloumnWidth = ref('200');
 
 const checkTableRef = ref();
 
@@ -126,32 +155,32 @@ const analysisTypeList = ref<any>([
   {
     value: 'model',
     name: '模型文件',
-    includes: ['仿真工况'],
+    includes: ['仿真工况', '仿真算例', '模型文件'],
   },
   {
     value: 'calculationFile',
     name: '计算文件',
-    includes: ['仿真工况'],
+    includes: ['仿真工况', '仿真算例', '计算文件'],
   },
   {
     value: 'numericalResult',
     name: '数值结果',
-    includes: ['仿真工况'],
+    includes: ['仿真工况', '仿真算例', '数据指标'],
   },
   {
     value: 'result',
     name: '云图结果',
-    includes: ['仿真工况'],
+    includes: ['仿真工况', '仿真算例', '结果云图'],
   },
   {
     value: 'curve',
     name: '曲线结果',
-    includes: ['仿真工况'],
+    includes: ['仿真工况', '仿真算例', '结果曲线'],
   },
   {
     value: 'report',
     name: '仿真报告',
-    includes: ['仿真工况'],
+    includes: ['仿真工况', '仿真算例', '仿真报告'],
   },
 ]);
 
@@ -223,6 +252,19 @@ const getTitleFn = (flag: any) => {
   return name + '对比';
 };
 
+const contentToConvertRef = ref();
+const exportPdfFn = async () => {
+
+  const content = contentToConvertRef.value;
+  const canvas = await html2canvas(content);
+  const imgData = canvas.toDataURL('image/png');
+  const pdf = new jsPDF('p', 'mm', 'a4');
+  const imgWidth = pdf.internal.pageSize.getWidth();
+  const imgHeight = (canvas.height * imgWidth) / canvas.width;
+  pdf.addImage(imgData, 'PNG', 0, 0, imgWidth, imgHeight);
+  pdf.save(`分析报告_${moment().format('YYYYMMDDHHmm')}.pdf`); // 保存PDF文件
+};
+
 </script>
 
 <style lang="scss" scoped>

src/views/data/analysis/components/cloudImage.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="model-file-page">
+
+    <BaseTable v-if="showTableContent" ref="cloudTableRef" :head="tableColumns" :tableName="checkTableName" hidePagination></BaseTable>
+
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, defineProps, nextTick, watch } from 'vue';
+import BaseTable from '@/components/common/table/baseTable.vue';
+
+const props = defineProps({
+  checkTaskInfo: {
+    type: Array,
+    default: () => [],
+  },
+  checkTableName: {
+    type: String,
+    default: '',
+  },
+  cloumnWidth: {
+    type: String,
+    default: '',
+  },
+});
+const cloudTableRef = ref();
+const showTableContent = ref(false);
+
+const tableColumns = ref<any>([
+
+]);
+
+const tableData = ref<any>([
+
+]);
+
+const getTableColumnFn = (data:any) => {
+  showTableContent.value = false;
+  tableData.value = [];
+  tableColumns.value = [];
+  const list:any = data || [];
+  const defaultColumns:any = [
+    {
+      title: '云图名称',
+      key: 'attributes',
+      isShow: true,
+    },
+  ];
+  const cloudcolumns:any = [];
+
+  for (let i = 0;i < list.length;i++) {
+
+    for (let j = 0;j < 2;j++) {
+
+      const obj:any = {
+        title: `项目-阶段-学科-${list[i].taskName}_算例_${j + 1}-云图`,
+        key: `${list[i].id}_key_${j + 1}`,
+        isShow: true,
+      };
+
+      cloudcolumns.push(obj);
+
+    }
+
+  }
+
+  tableColumns.value = defaultColumns.concat(cloudcolumns);
+
+  if (props.cloumnWidth) {
+    for (let i = 0;i < tableColumns.value.length;i++) {
+      tableColumns.value[i].width = props.cloumnWidth;
+    }
+  }
+
+  showTableContent.value = true;
+
+  nextTick(() => {
+    cloudTableRef.value.setDataFun(tableData.value);
+  });
+
+};
+
+watch(() => props.checkTaskInfo, (newVal) => {
+  if (newVal) {
+    getTableColumnFn(newVal);
+
+  }
+
+}, {
+  immediate: true,
+  deep: true,
+});
+
+</script>
+
+  <style lang="scss" scoped>
+
+  .model-file-page{
+      width: 100%;
+      height: 100%;
+  }
+  </style>

src/views/data/analysis/components/curveResult.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="model-file-page">
+
+    <BaseTable v-if="showTableContent" ref="curveResultTableRef" :head="tableColumns" :tableName="checkTableName" hidePagination></BaseTable>
+
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, defineProps, nextTick, watch } from 'vue';
+import BaseTable from '@/components/common/table/baseTable.vue';
+
+const props = defineProps({
+  checkTaskInfo: {
+    type: Array,
+    default: () => [],
+  },
+  checkTableName: {
+    type: String,
+    default: '',
+  },
+  cloumnWidth: {
+    type: String,
+    default: '',
+  },
+});
+const curveResultTableRef = ref();
+const showTableContent = ref(false);
+
+const tableColumns = ref<any>([
+
+]);
+
+const tableData = ref<any>([
+
+]);
+
+const getTableColumnFn = (data:any) => {
+  showTableContent.value = false;
+  tableData.value = [];
+  tableColumns.value = [];
+  const list:any = data || [];
+  const defaultColumns:any = [
+    {
+      title: '曲线名称',
+      key: 'attributes',
+      isShow: true,
+    },
+  ];
+  const curveResultcolumns:any = [];
+
+  for (let i = 0;i < list.length;i++) {
+
+    for (let j = 0;j < 2;j++) {
+
+      const obj:any = {
+        title: `项目-阶段-学科-${list[i].taskName}_算例_${j + 1}-曲线`,
+        key: `${list[i].id}_key_${j + 1}`,
+        isShow: true,
+      };
+
+      curveResultcolumns.push(obj);
+
+    }
+
+  }
+
+  tableColumns.value = defaultColumns.concat(curveResultcolumns);
+
+  if (props.cloumnWidth) {
+    for (let i = 0;i < tableColumns.value.length;i++) {
+      tableColumns.value[i].width = props.cloumnWidth;
+    }
+  }
+
+  showTableContent.value = true;
+
+  nextTick(() => {
+    curveResultTableRef.value.setDataFun(tableData.value);
+  });
+
+};
+
+watch(() => props.checkTaskInfo, (newVal) => {
+  if (newVal) {
+    getTableColumnFn(newVal);
+
+  }
+
+}, {
+  immediate: true,
+  deep: true,
+});
+
+</script>
+
+    <style lang="scss" scoped>
+
+    .model-file-page{
+        width: 100%;
+        height: 100%;
+    }
+    </style>

src/views/data/analysis/components/performanceAnalysis.vue

@@ -11,7 +11,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, defineProps, defineEmits, watch, nextTick } from 'vue';
+import { ref, defineProps, watch, nextTick } from 'vue';
 import BaseTable from '@/components/common/table/baseTable.vue';
 
 const props = defineProps({
@@ -40,11 +40,15 @@ const tableColumns = ref<any>([
 
 const modelAttribute = ref<any>([
   {
-    name: '文件名称',
+    name: '仿真指标1（ > 20mm）',
     value: 'fileName',
   },
   {
-    name: '所属项目',
+    name: '仿真指标2（ > 5m/s）',
+    value: 'project',
+  },
+  {
+    name: '仿真指标3（ < 43 ℃）',
     value: 'project',
   },
 ]);

src/views/data/analysis/components/reportComparison.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="model-file-page">
+
+    <BaseTable v-if="showTableContent" ref="reportComparisonTableRef" :head="tableColumns" :tableName="checkTableName" hidePagination></BaseTable>
+
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, defineProps, nextTick, watch } from 'vue';
+import BaseTable from '@/components/common/table/baseTable.vue';
+
+const props = defineProps({
+  checkTaskInfo: {
+    type: Array,
+    default: () => [],
+  },
+  checkTableName: {
+    type: String,
+    default: '',
+  },
+  cloumnWidth: {
+    type: String,
+    default: '',
+  },
+});
+const reportComparisonTableRef = ref();
+const showTableContent = ref(false);
+
+const tableColumns = ref<any>([
+
+]);
+
+const tableData = ref<any>([
+
+]);
+
+const getTableColumnFn = (data:any) => {
+  showTableContent.value = false;
+  tableData.value = [];
+  tableColumns.value = [];
+  const list:any = data || [];
+  const defaultColumns:any = [
+    {
+      title: '报告名称',
+      key: 'attributes',
+      isShow: true,
+    },
+  ];
+  const reportComparisoncolumns:any = [];
+
+  for (let i = 0;i < list.length;i++) {
+
+    for (let j = 0;j < 2;j++) {
+
+      const obj:any = {
+        title: `项目-阶段-学科-${list[i].taskName}_算例_${j + 1}-报告`,
+        key: `${list[i].id}_key_${j + 1}`,
+        isShow: true,
+      };
+
+      reportComparisoncolumns.push(obj);
+
+    }
+
+  }
+
+  tableColumns.value = defaultColumns.concat(reportComparisoncolumns);
+
+  if (props.cloumnWidth) {
+    for (let i = 0;i < tableColumns.value.length;i++) {
+      tableColumns.value[i].width = props.cloumnWidth;
+    }
+  }
+
+  showTableContent.value = true;
+
+  nextTick(() => {
+    reportComparisonTableRef.value.setDataFun(tableData.value);
+  });
+
+};
+
+watch(() => props.checkTaskInfo, (newVal) => {
+  if (newVal) {
+    getTableColumnFn(newVal);
+
+  }
+
+}, {
+  immediate: true,
+  deep: true,
+});
+
+</script>
+
+      <style lang="scss" scoped>
+
+      .model-file-page{
+          width: 100%;
+          height: 100%;
+      }
+      </style>

src/views/data/analysis/index.vue

@@ -627,13 +627,13 @@ const closePngFun = () => {
   diaPngVisible.value = false;
 };
 
-const displayComparePngFun = () => {
-  if (!compareList.value.length) {
-    ElMessage.warning('请先加入对比池');
-    return;
-  }
-  diaPngVisible.value = true;
-};
+// const displayComparePngFun = () => {
+//   if (!compareList.value.length) {
+//     ElMessage.warning('请先加入对比池');
+//     return;
+//   }
+//   diaPngVisible.value = true;
+// };
 const renderPngFun = (data: any, render: (cbData: any) => void) => {
   render(compareList.value.map((item:any) => {
     return {
@@ -679,25 +679,34 @@ const compareFn = (flag:any) => {
     openDataAnalysisFn( flag, 'SIMULATION_TASK_ANALYSIS');
   }
   if (flag === '仿真算例') {
+    openDataAnalysisFn( flag, 'SIMULATION_RUN_ANALYSIS');
 
   }
   if (flag === '数据指标') {
+    openDataAnalysisFn( flag, 'SIMULATION_PERFORMANCE_ANALYSIS');
 
   }
   if (flag === '模型文件') {
+    openDataAnalysisFn( flag, 'RESULT_MODEL');
 
   }
   if (flag === '仿真报告') {
+    openDataAnalysisFn( flag, 'RESULT_REPORT');
 
   }
   if (flag === '计算文件') {
+    openDataAnalysisFn( flag, 'RESULT_FILE');
 
   }
   if (flag === '结果曲线') {
-    displayCompareFun();
+    openDataAnalysisFn( flag, 'RESULT_CURVE');
+
+    // displayCompareFun();
   }
   if (flag === '结果云图') {
-    displayComparePngFun();
+    openDataAnalysisFn( flag, 'RESULT_PNG');
+
+    // displayComparePngFun();
   }
 };