update:仿真报告增加拖拽文件上传

src/views/task/execution/components/runDetailPage/runPagecomponent/reportResult.vue

@@ -4,29 +4,38 @@
   <div class="result-page">
     <div class="dir-content">
       <div class="table-box">
-        <FileTable
-          v-if="tableShow"
-          showIndex
-          ref="baseTableRef"
-          :tableName="tableName"
-          :show-checkbox="true"
-          :api="queryDirDataFun"
-          :params="{
-            keyResultType,
-            runId: runInfo.uuid,
-          }"
-          :full-height="true"
-          :action-list="actionList"
-          :defaultActions="['rename', 'refresh']"
-          fileNameField="name"
-          fileIdField="fileId"
-        >
-          <template #leftOptions>
-            <el-button type="primary" @click="ArchiveRunDataFun">归档</el-button>
-            <el-button type="primary" @click="openFun">上传</el-button>
-            <el-button @click="reloadFun">刷新</el-button>
-          </template>
-        </FileTable>
+        <DragUploader @beforeUpload="beforeUploadFun">
+          <FileTable
+            v-if="tableShow"
+            showIndex
+            ref="baseTableRef"
+            :tableName="tableName"
+            :show-checkbox="true"
+            :api="queryDirDataFun"
+            :params="{
+              keyResultType,
+              runId: runInfo.uuid,
+            }"
+            :full-height="true"
+            :action-list="actionList"
+            :defaultActions="['rename', 'refresh']"
+            fileNameField="name"
+            fileIdField="fileId"
+          >
+            <template #leftOptions>
+              <el-button type="primary" class="mr12" @click="ArchiveRunDataFun">归档</el-button>
+              <el-upload
+                :show-file-list="false"
+                :accept="accept"
+                multiple
+                :before-upload="beforeUploadFun"
+              >
+                <el-button class="mr12" type="primary">上传</el-button>
+              </el-upload>
+              <el-button @click="reloadFun">刷新</el-button>
+            </template>
+          </FileTable>
+        </DragUploader>
       </div>
       <!-- <div class="operate-box">
         <el-button @click="openFun">上传</el-button>
@@ -49,77 +58,6 @@
       @change="chnageFun"
     />
     <el-form :model="uploadFIleFormData" labelPosition="right" labelWidth="90">
-      <el-form-item label="物理量" v-if="getdirNameFun() === '图片结果'">
-        <el-select
-          v-model="uploadFIleFormData.quantityType"
-          filterable
-          @change="getQuantityUnitFun('quantityType', 'unitsList')"
-        >
-          <el-option
-            v-for="item in quantityTypeList"
-            :key="item.id"
-            :label="item.label"
-            :value="item.name"
-          ></el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item label="单位" v-if="getdirNameFun() === '图片结果'">
-        <el-select v-model="uploadFIleFormData.units" filterable>
-          <el-option
-            v-for="item in uploadFIleFormData.unitsList"
-            :key="item.id"
-            :label="item.label"
-            :value="item.label"
-          ></el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item label="x轴物理量" v-if="getdirNameFun() === '曲线结果'">
-        <el-select
-          v-model="uploadFIleFormData.xQuantityType"
-          filterable
-          @change="getQuantityUnitFun('xQuantityType', 'xUnitsList')"
-        >
-          <el-option
-            v-for="item in quantityTypeList"
-            :key="item.id"
-            :label="item.label"
-            :value="item.name"
-          ></el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item label="x轴结果单位" v-if="getdirNameFun() === '曲线结果'">
-        <el-select v-model="uploadFIleFormData.xUnits" filterable>
-          <el-option
-            v-for="item in uploadFIleFormData.xUnitsList"
-            :key="item.id"
-            :label="item.label"
-            :value="item.label"
-          ></el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item label="y轴物理量" v-if="getdirNameFun() === '曲线结果'">
-        <el-select
-          v-model="uploadFIleFormData.yQuantityType"
-          filterable
-          @change="getQuantityUnitFun('yQuantityType', 'yUnitsList')"
-        >
-          <el-option
-            v-for="item in quantityTypeList"
-            :key="item.id"
-            :label="item.label"
-            :value="item.name"
-          ></el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item label="y轴结果单位" v-if="getdirNameFun() === '曲线结果'">
-        <el-select v-model="uploadFIleFormData.yUnits" filterable>
-          <el-option
-            v-for="item in uploadFIleFormData.yUnitsList"
-            :key="item.id"
-            :label="item.label"
-            :value="item.label"
-          ></el-option> </el-select
-      ></el-form-item>
       <el-form-item label="当前文件" v-if="fileList?.length">
         <div class="file-list">
           <div class="file-content" v-for="item in fileList" :key="item.id">
@@ -140,129 +78,11 @@
     </template>
   </el-drawer>
 
-  <Dialog
-    v-model="diaPngVisible"
-    diaTitle="云图对比"
-    :width="'90%'"
-    :height="'90%'"
-    :confirm-closable="false"
-    :zIndex="100"
-  >
-    <div class="compare-container">
-      <div class="compare-container-left">
-        <BaseTable
-          ref="tableComparePngRef"
-          tableName="RUN_RESULT_IMAGE_TABLE"
-          showIndex
-          showCheckbox
-          hidePagination
-          :full-height="true"
-          @checkbox-change="checkBoxPngChangeFun"
-        >
-          <template #leftOptions>
-            <div class="compare-container-left-options">
-              <span>设置列数据：</span>
-              <el-input-number v-model="columnPngData" :min="1" :max="10" />
-            </div>
-          </template>
-        </BaseTable>
-      </div>
-      <div class="compare-container-right">
-        <div
-          class="chart-container"
-          :style="{
-            // eslint-disable-next-line
-            display: 'grid',
-            gridTemplateColumns: `repeat(${columnPngData} ,${100 / columnPngData}%)`,
-          }"
-        >
-          <div class="chart-box-png" v-for="(item, index) in comparePngData" :key="index">
-            <div class="png-container">
-              <div class="png-title">{{ item.name }}</div>
-              <div class="png-image">
-                <el-image :src="item.url" fit="scale-down" />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <template #footer>
-      <div>
-        <el-button @click="closePngFun">关闭</el-button>
-      </div>
-    </template>
-  </Dialog>
-
-  <Dialog
-    v-model="diaVisible"
-    diaTitle="曲线对比"
-    :width="'90%'"
-    :height="'90%'"
-    :confirm-closable="false"
-    :zIndex="100"
-  >
-    <div class="compare-container">
-      <div class="compare-container-left">
-        <BaseTable
-          ref="tableCompareRef"
-          tableName="RUN_RESULT_CANVAS_TABLE"
-          showIndex
-          showCheckbox
-          hidePagination
-          @checkbox-change="checkBoxChangeFun"
-          @checkbox-all="checkBoxChangeFun"
-          :full-height="true"
-        >
-          <template #leftOptions>
-            <div class="compare-container-left-options">
-              <span>设置列数据：</span>
-              <el-input-number v-model="columnData" :min="1" :max="10" />
-            </div>
-          </template>
-          <template #operate="{ row }">
-            <span>图：</span>
-            <el-input
-              class="image-number-input"
-              v-model="row.imageNumber"
-              @blur="changeImageNumberFun"
-            />
-          </template>
-        </BaseTable>
-      </div>
-      <div class="compare-container-right">
-        <div
-          class="chart-container"
-          :style="{
-            // eslint-disable-next-line
-            display: 'grid',
-            gridTemplateColumns: `repeat(${columnData} ,${100 / columnData}%)`,
-          }"
-        >
-          <div class="chart-box" v-for="(value, key) in compareData" :key="key">
-            <EchartCard
-              :title="`图${key}`"
-              :ref="(el) => (projectStorageSpaceStatisticsRef[`chart-${key}`] = el)"
-              :charts-id="'chart-' + key"
-              :bar-type="'lineChart'"
-            >
-            </EchartCard>
-          </div>
-        </div>
-      </div>
-    </div>
-    <template #footer>
-      <div>
-        <el-button @click="canvasCloseFun">关闭</el-button>
-      </div>
-    </template>
-  </Dialog>
   <Dialog
     v-model="uploadFileVisible"
     diaTitle="上传文件"
     :width="'70%'"
     :height="'70%'"
-    :zIndex="101"
     @close="closeFun"
     show-footer
   >
@@ -444,12 +264,8 @@ import TableForm from '@/components/common/table/tableForm.vue';
 import FilePreview from '@/components/common/filePreview/index.vue';
 import { downloadFileById, fileUploadAllocationIconFun } from '@/utils/file';
 import Dialog from '@/components/common/dialog/index.vue';
-import { groupBy } from 'lodash-es';
 import { getFileBaseInfoApi } from '@/api/data/data';
-import EchartCard from '@/components/common/echartCard/index.vue';
-import { getCSVDataApi } from '@/api/data/dataAnalysis';
-
-const env = import.meta.env;
+import DragUploader from '@/components/common/dragUploader/index.vue';
 
 const props = defineProps({
   currentRunIfno: {
@@ -473,16 +289,11 @@ const visible = ref(false);
 const runInfo = ref<any>({});
 const currentDirName = ref<any>();
 const currentFileInfo = ref<any>({});
-const diaPngVisible = ref(false);
-const columnPngData = ref<number>(1);
-const comparePngData = ref<any>([]);
-const tableComparePngRef = ref();
+
 const runDirs = ref<any>([]);
 const runDirNameList = ref<any>([]);
 const showPage = ref(false);
-const diaVisible = ref(false);
-const columnData = ref<number>(1);
-const tableCompareRef = ref();
+
 const isCsv = ref(false);
 const uploadFileVisible = ref(false);
 const baseUploadTableRef = ref();
@@ -498,7 +309,7 @@ const getRunInfoDirsFun = async () => {
     runDirs.value =
       res.data?.data.filter((item: any) => {
         // '报告结果'
-        return item.dataType === 1 && ['报告结果'].includes(item.originalName);
+        return item.dataType === 1 && ['报告结果', '仿真报告'].includes(item.originalName);
       }) || [];
     runDirNameList.value =
       runDirs.value.map((item: any) => {
@@ -553,7 +364,7 @@ const runResultDirChangeFun = () => {
       fileType.value = FILE_TYPE.CANVAS_FILE;
       tableShow.value = true;
     }
-    if (name === '报告结果') {
+    if (name === '报告结果' || name === '仿真报告') {
       tableName.value = 'RUN_RESULT_REPORT_TABLE';
       keyResultType.value = '3';
       accept.value = '.ppt(x),.pptx,.doc(x),.docx,.pdf';
@@ -578,7 +389,7 @@ const getFileType = () => {
     type = FILE_TYPE.CANVAS_FILE;
   }
 
-  if (dirName === '报告结果') {
+  if (dirName === '报告结果' || dirName === '仿真报告') {
     type = FILE_TYPE.REPORT_FILE;
   }
 
@@ -588,21 +399,8 @@ const getFileType = () => {
 const closeFun = () => {
   visible.value = false;
   isCsv.value = false;
-  uploadFileVisible.value = false;
-};
-
-const openFun = () => {
-  // visible.value = true;
-  currentFileInfo.value = {};
-  // nextTick(() => {
-  //   tableFormRef.value.resetFun();
-
-  //   for (const key in uploadFIleFormData) {
-  //     uploadFIleFormData[key] = '';
-  //   }
-  // });
   tableData.value = [];
-  uploadFileVisible.value = true;
+  uploadFileVisible.value = false;
 };
 
 const submitFun = async () => {
@@ -782,19 +580,6 @@ const getQuantityTypeFun = async () => {
   }
 };
 
-const getQuantityUnitFun = async (name: any, flag: any) => {
-  if (name) {
-    const res: any = await listUnitsApi({ quantityType: uploadFIleFormData[name] });
-    if (res && res.code === 200) {
-      uploadFIleFormData[flag] = res.data;
-    } else {
-      uploadFIleFormData[flag] = [];
-    }
-  } else {
-    uploadFIleFormData[flag] = [];
-  }
-};
-
 const getQuantityUnitFun2 = async (row: any, name: any, flag: any) => {
   if (name) {
     const res: any = await listUnitsApi({ quantityType: row[name] });
@@ -828,153 +613,6 @@ const getparamListFUn = () => {
   }
 };
 
-const checkBoxPngChangeFun = () => {
-  comparePngData.value = tableComparePngRef.value?.tableRef?.getCheckboxRecords();
-  comparePngData.value.forEach((item: any) => {
-    item.url = `${env.VITE_API_IMAGE_PREVIEW_URL}/data/previewImage?fileId=${item.fileId}`;
-  });
-};
-
-const closePngFun = () => {
-  diaPngVisible.value = false;
-};
-
-const canvasCloseFun = () => {
-  diaVisible.value = false;
-};
-
-const changeImageNumberFun = () => {
-  setChartFun();
-};
-const checkBoxChangeFun = () => {
-  setChartFun();
-};
-const compareData = ref<any>({});
-const projectStorageSpaceStatisticsRef = ref<any>({});
-// 初始化图表chart-1
-const initProjectTaskAchievementStatistics = async ({
-  dom,
-  seriesData,
-  XData,
-  titleList,
-  key,
-}: any) => {
-  dom.commonChartRef.disposeEchartsByKey('chart-' + key);
-  dom.commonChartRef.option = {
-    title: {
-      show: false,
-    },
-    tooltip: {
-      trigger: 'axis',
-    },
-    legend: {
-      top: '0%',
-      left: 'center',
-      data: titleList,
-    },
-    grid: {
-      top: '10%',
-      bottom: '10%',
-      left: '5%',
-      right: '5%',
-    },
-    xAxis: {
-      type: 'value',
-      data: XData,
-      axisLabel: {
-        show: true,
-        // interval: 9,
-        interval: XData.length > 10 ? Math.floor(XData.length / 10) : 1,
-      },
-      splitLine: {
-        show: true,
-      },
-      axisLine: {
-        show: true,
-      },
-      axisTick: {
-        show: true,
-      },
-    },
-    yAxis: {
-      type: 'value',
-      axisLine: {
-        show: true,
-      },
-      axisTick: {
-        show: true,
-      },
-      minorTick: {
-        show: true,
-        splitNumber: 5, // 大刻度之间分割成5份
-        length: 3, // 小刻度长度
-      },
-      minorSplitLine: {
-        show: true,
-        lineStyle: {
-          type: 'dotted',
-        },
-      },
-    },
-    series: seriesData,
-  };
-  dom.commonChartRef.initChart();
-};
-
-const setChartFun = () => {
-  const selectedRows = tableCompareRef.value?.tableRef?.getCheckboxRecords();
-  if (selectedRows.length) {
-    compareData.value = groupBy(selectedRows, 'imageNumber');
-    nextTick(() => {
-      for (const key in compareData.value) {
-        getCSVDataApi({
-          fileId: compareData.value[key].map((item: any) => item.fileId).join(','),
-        }).then((res: any) => {
-          const seriesData: any = [];
-          const titleList: any = [];
-          let XData: any = [];
-          if (res.code === 200) {
-            res.data.xData.forEach((item: any, index: number) => {
-              const data = res.data.xData[index].map((item_1: any, index_1: number) => {
-                return [item_1, res.data.yData[index][index_1]];
-              });
-              XData = res.data.xData[index];
-              const title = compareData.value[key][index].name;
-              titleList.push(title);
-              seriesData.push({
-                name: title,
-                type: 'line',
-                data,
-                showSymbol: false, // 默认不显示数据点
-                symbolSize: 6, // 悬停时数据点的大小
-                itemStyle: {
-                  opacity: 0, // 默认数据点透明度
-                  borderWidth: 2,
-                },
-                emphasis: {
-                  scale: true, // 悬停时放大
-                  focus: 'series', // 悬停时高亮整个系列
-                  itemStyle: {
-                    opacity: 1, // 悬停时显示数据点
-                  },
-                },
-              });
-            });
-          }
-
-          initProjectTaskAchievementStatistics({
-            dom: projectStorageSpaceStatisticsRef.value[`chart-${key}`],
-            seriesData,
-            titleList,
-            XData,
-            key,
-          });
-        });
-      }
-    });
-  }
-};
-
 const tableData = ref<any>([]);
 
 const uploadActionList = ref([
@@ -993,8 +631,26 @@ const uploadActionList = ref([
 
 const num = ref(1);
 const beforeUploadFun = (file: any) => {
+  if (!uploadFileVisible.value) {
+    uploadFileVisible.value = true;
+  }
   num.value++;
   const { name, size } = file;
+
+  let result: any = false;
+  const list = accept.value.split(',');
+
+  for (let i = 0; i < list.length; i++) {
+    if (name.endsWith(list[i])) {
+      result = true;
+    }
+  }
+
+  if (!result) {
+    ElMessage.warning(name + '文件不符合文件上传要求');
+    return false;
+  }
+
   const obj = {
     name: name,
     fileName: name,
@@ -1273,4 +929,8 @@ onMounted(async () => {
     }
   }
 }
+
+.mr12 {
+  margin-right: 12px;
+}
 </style>