Front_Team/SPDM
8
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update:文件预览组件优化

Browse Source
This commit is contained in:
lijing1
2026-01-20 14:57:43 +08:00
parent 19b7cda772
commit e2f4bce662
8 changed files with 20 additions and 268 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/common/filePreview/csvView.vue
View File

@@ -85,7 +85,9 @@ const initCsvChartFun = async (id: any) => {
xAxis: {
type: 'value',
// type: 'category',
name: props.row.xquantityType + '（ 单位：' + props.row.xunits + ' ）',
name: props.row.xquantityType
? props.row.xquantityType + '（ 单位：' + props.row.xunits + ' ）'
: '',
nameGap: 40, // 与轴线的距离
nameTextStyle: {
align: 'right', // 文字右对齐
@@ -109,7 +111,9 @@ const initCsvChartFun = async (id: any) => {
},
},
yAxis: {
name: props.row.yquantityType + '（单位：' + props.row.yunits + '）',
name: props.row.yquantityType
? props.row.yquantityType + '（单位：' + props.row.yunits + '）'
: '',
type: 'value',
axisLine: {
show: true,
@@ -154,6 +158,6 @@ watch(
<style lang="scss" scoped>
.comp-csv {
width: 100%;
height: 100%;
height: 500px;
}
</style>

6
src/components/common/filePreview/index.vue
View File

@@ -1,9 +1,9 @@
<template>
<div>
<Dialog v-model="diaVisible" diaTitle="预览文件" width="70%" height="90%" @close="closeFun">
<Dialog v-model="diaVisible" diaTitle="文件预览" width="70%" height="90%" @close="closeFun">
<template v-if="diaVisible && fileId">
<div v-if="modeType === 'csv'" class="content">
<CsvView :fileId="fileId" />
<CsvView :fileId="fileId" :row="csvData" />
</div>
<div v-if="modeType === 'kkFile'" class="content">
<KkfileView :fileId="fileId" />
@@ -32,11 +32,13 @@ import { isAcceptFileType } from '@/utils/file';
interface Props {
modelValue: boolean;
fileId: any;
csvData?: any;
}
const props = withDefaults(defineProps<Props>(), {
modelValue: false,
fileId: 0,
csvData: {},
});
const env = import.meta.env;

18
src/components/taskDetail/taskDeliverable.vue
View File

@@ -37,14 +37,7 @@
</template>
</BaseTable>
<FilePreview v-model="previewVisible" :fileId="currentRow?.fileId" />
<csvFileReview
v-if="showCsvFileDialog"
:file-id="currentRow?.fileId"
:row="currentRow"
@close="showCsvFileDialog = false"
></csvFileReview>
<FilePreview v-model="previewVisible" :fileId="currentRow?.fileId" :csvData="currentRow" />
</div>
<Teleport to="body">
@@ -262,7 +255,6 @@ import { ref, onMounted, nextTick, reactive } from 'vue';
import BaseTable from '@/components/common/table/baseTable.vue';
import { formatFileSize } from '@/utils/file';
import FilePreview from '@/components/common/filePreview/index.vue';
import csvFileReview from '@/views/data/analysis/components/csvFileReview.vue';
import Dialog from '@/components/common/dialog/index.vue';
import emitter from '@/utils/eventBus';
import {
@@ -318,16 +310,10 @@ const getfileType = (data: any) => {
};
const currentRow = ref();
const previewVisible = ref(false);
const showCsvFileDialog = ref(false);
const previewFileFun = (row: any) => {
currentRow.value = row;
if (row.name.endsWith('.csv')) {
showCsvFileDialog.value = true;
} else {
previewVisible.value = true;
}
previewVisible.value = true;
};
const tableData = ref<any>([]);

192
src/views/data/analysis/components/csvFileReview.vue
View File

@@ -1,192 +0,0 @@
<template>
<div calss="page-content">
<Dialog
v-model="diaVisible"
diaTitle="曲线预览"
:width="'50%'"
:height="'80%'"
:confirm-closable="false"
@close="closeFun"
:zIndex="108"
>
<div class="csv-page">
<EchartCard
ref="csvChartRef"
:bar-type="'lineChart'"
:title="''"
:charts-id="'chart-csv'"
></EchartCard>
</div>
</Dialog>
</div>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue';
import Dialog from '@/components/common/dialog/index.vue';
import EchartCard from '@/components/common/echartCard/index.vue';
import { getCSVDataApi } from '@/api/data/dataAnalysis';
const props = defineProps({
fileId: {
type: Number,
default: 0,
},
row: {
type: Object,
default: () => {
return {
xquantityType: '',
xunits: '',
yquantityType: '',
yunits: '',
};
},
},
});
const emits = defineEmits(['close']);
const diaVisible = ref(true);
const csvChartRef = ref();
const initCsvChartFun = async (id: any) => {
const res: any = await getCSVDataApi({
fileId: id,
});
if (res && res.code === 200) {
const seriesData: any = [];
const titleList: any = [];
if (res?.data?.xData?.length) {
const data = res.data.xData[0].map((item: any, index: any) => {
return [item, res.data.yData[0][index]];
});
const XData: any = res.data.xData[0].map((item: any) => {
return item;
});
seriesData.push({
name: props.row.yquantityType,
type: 'line',
data,
showSymbol: false, // 默认不显示数据点
symbolSize: 6, // 悬停时数据点的大小
itemStyle: {
opacity: 0, // 默认数据点透明度
color: '#409EFF', // 数据点颜色
borderWidth: 2,
},
emphasis: {
scale: true, // 悬停时放大
focus: 'series', // 悬停时高亮整个系列
itemStyle: {
opacity: 1, // 悬停时显示数据点
},
},
});
csvChartRef.value.commonChartRef.disposeEchartsByKey('chart-csv');
csvChartRef.value.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',
// type: 'category',
name: props.row.xquantityType
? props.row.xquantityType + '（ 单位：' + props.row.xunits + ' ）'
: '',
nameGap: 40, // 与轴线的距离
nameTextStyle: {
align: 'right', // 文字右对齐
padding: [0, 0, -40, 0], // 清除默认padding
verticalAlign: 'bottom', // 垂直对齐到底部
},
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: {
name: props.row.yquantityType
? props.row.yquantityType + '（单位：' + props.row.yunits + '）'
: '',
type: 'value',
axisLine: {
show: true,
},
axisTick: {
show: true,
},
minorTick: {
show: true,
splitNumber: 5, // 大刻度之间分割成5份
length: 3, // 小刻度长度
},
minorSplitLine: {
show: true,
lineStyle: {
type: 'dotted',
},
},
},
series: seriesData,
};
csvChartRef.value.commonChartRef.initChart();
}
}
};
const closeFun = () => {
emits('close');
};
watch(
() => props.fileId,
async (newVal) => {
if (newVal) {
const id = newVal;
await initCsvChartFun(id);
}
},
{
immediate: true,
deep: true,
}
);
</script>
<style lang="scss" scoped>
.page-content {
width: 100%;
}
.csv-page {
width: 100%;
height: 500px;
}
</style>

17
src/views/data/analysis/components/pedigree/pedigreeDetail.vue
View File

@@ -123,11 +123,6 @@
</div>
<FilePreview v-model="previewVisible" :fileId="currentRow?.id" />
<csvFileReview
v-if="showCsvFileDialog"
:file-id="csvFileId"
@close="showCsvFileDialog = false"
/>
</div>
</template>
@@ -143,7 +138,6 @@ import { getRunListByRunIdListApi } from '@/api/project/node';
import { queryFlowTemplateDetailApi } from '@/api/capability/flow';
import { useDict } from '@/utils/useDict';
import FilePreview from '@/components/common/filePreview/index.vue';
import csvFileReview from '@/views/data/analysis/components/csvFileReview.vue';
import { downloadFileById } from '@/utils/file';
import { cloneDeep } from 'lodash-es';
@@ -151,7 +145,7 @@ interface Props {
currentNode?: string;
runId?: string;
rowData?: Record<string, any>;
defaultKeyResultType?: '1' | '2' | '3'| string;
defaultKeyResultType?: '1' | '2' | '3' | string;
}
const props = withDefaults(defineProps<Props>(), {
@@ -164,19 +158,12 @@ const { PERFORMANCE_UNIT } = useDict('PERFORMANCE_UNIT');
const previewVisible = ref(false);
const currentRow = ref<any>(null);
const showCsvFileDialog = ref(false);
const csvFileId = ref<any>(0);
const previewFileFun = (row: any) => {
currentRow.value = row;
previewVisible.value = true;
};
const previewCsvFileFun = (row: any) => {
csvFileId.value = row.id;
showCsvFileDialog.value = true;
};
const downloadFileFun = (row: any) => {
downloadFileById(row.id);
};
@@ -191,7 +178,7 @@ const cloudImageActionList = [
{ title: '下载', type: 'primary', click: downloadFileFun },
];
const curveActionList = [
{ title: '预览', type: 'primary', click: previewCsvFileFun },
{ title: '预览', type: 'primary', click: previewFileFun },
{ title: '下载', type: 'primary', click: downloadFileFun },
];
const reportActionList = [

11
src/views/data/analysis/index.vue
View File

@@ -273,11 +273,6 @@
@cancel="showPerformanceInfoDialog = false"
@submit="updatePerformanceFun"
/>
<csvFileReview
v-if="showCsvFileDialog"
:file-id="csvFileId"
@close="showCsvFileDialog = false"
/>
<AnalysisDia v-model="showAnalysisDialog" :analysisData="compareList" />
<PedigreeDialog
v-model="pedigreeVisible"
@@ -316,7 +311,6 @@ import runDetailPage from '@/components/task/runDetailPage.vue';
import { useDict } from '@/utils/useDict';
import editPerformancePage from '@/components/taskDetail/editPerformancePage.vue';
import { editPerformanceApi } from '@/api/task/taskPerformance';
import csvFileReview from './components/csvFileReview.vue';
import StatusDot from '@/components/common/statusDot/index.vue';
import { statusMapFun5, statusMapFun6 } from '@/components/common/statusDot/statusMap';
import AnalysisDia from './components/analysisDia.vue';
@@ -335,13 +329,11 @@ const { t } = useI18n();
const showTaskDetailDialog = ref(false);
const showRunDetailDialog = ref(false);
const showPerformanceInfoDialog = ref(false);
const showCsvFileDialog = ref(false);
const showAnalysisDialog = ref(false);
const pedigreeVisible = ref(false);
const currentPedigreeRow = ref<any>({});
const tableRef = ref();
const csvFileId = ref<any>(0);
// 更新选中数据
const checkboxChangeFun = (data: any) => {
@@ -548,8 +540,7 @@ const modeChangeFun = () => {
title: '预览',
type: 'primary',
click: (row: any) => {
csvFileId.value = row.id;
showCsvFileDialog.value = true;
previewFileFun(row);
},
},
{

17
src/views/task/execution/components/runDetailPage/runPagecomponent/reportResult.vue
View File

@@ -24,13 +24,7 @@
</template>
</BaseTable>
</div>
<FilePreview v-model="previewVisible" :fileId="currentRow?.fileId" />
<csvFileReview
v-if="showCsvFileDialog"
:file-id="currentRow?.fileId"
:row="currentRow"
@close="showCsvFileDialog = false"
></csvFileReview>
<FilePreview v-model="previewVisible" :fileId="currentRow?.fileId" :csvData="currentRow" />
</div>
<el-drawer
v-model="visible"
@@ -436,7 +430,6 @@ import { FILE_TYPE } from '@/utils/enum/file';
import TableForm from '@/components/common/table/tableForm.vue';
import FilePreview from '@/components/common/filePreview/index.vue';
import { downloadFileById } from '@/utils/file';
import csvFileReview from '@/views/data/analysis/components/csvFileReview.vue';
import Dialog from '@/components/common/dialog/index.vue';
import { groupBy } from 'lodash-es';
import { getFileBaseInfoApi } from '@/api/data/data';
@@ -467,7 +460,6 @@ const visible = ref(false);
const runInfo = ref<any>({});
const currentDirName = ref<any>();
const currentFileInfo = ref<any>({});
const showCsvFileDialog = ref(false);
const diaPngVisible = ref(false);
const columnPngData = ref<number>(1);
const comparePngData = ref<any>([]);
@@ -679,12 +671,7 @@ const currentRow = ref();
const previewVisible = ref(false);
const previewFileFun = (row: any) => {
currentRow.value = row;
if (row.name.endsWith('.csv')) {
showCsvFileDialog.value = true;
} else {
previewVisible.value = true;
}
previewVisible.value = true;
};
const fileList = ref<any>([]);

17
src/views/task/execution/components/runDetailPage/runPagecomponent/resultData.vue
View File

@@ -43,13 +43,7 @@
</template>
</BaseTable>
</div>
<FilePreview v-model="previewVisible" :fileId="currentRow?.fileId" />
<csvFileReview
v-if="showCsvFileDialog"
:file-id="currentRow?.fileId"
:row="currentRow"
@close="showCsvFileDialog = false"
></csvFileReview>
<FilePreview v-model="previewVisible" :fileId="currentRow?.fileId" :csvData="currentRow" />
</div>
<el-drawer
v-model="visible"
@@ -456,7 +450,6 @@ import { FILE_TYPE } from '@/utils/enum/file';
import TableForm from '@/components/common/table/tableForm.vue';
import FilePreview from '@/components/common/filePreview/index.vue';
import { downloadFileById } from '@/utils/file';
import csvFileReview from '@/views/data/analysis/components/csvFileReview.vue';
import Dialog from '@/components/common/dialog/index.vue';
import { groupBy } from 'lodash-es';
import { getFileBaseInfoApi } from '@/api/data/data';
@@ -488,7 +481,6 @@ const visible = ref(false);
const runInfo = ref<any>({});
const currentDirName = ref<any>();
const currentFileInfo = ref<any>({});
const showCsvFileDialog = ref(false);
const diaPngVisible = ref(false);
const columnPngData = ref<number>(1);
const comparePngData = ref<any>([]);
@@ -703,12 +695,7 @@ const currentRow = ref();
const previewVisible = ref(false);
const previewFileFun = (row: any) => {
currentRow.value = row;
if (row.name.endsWith('.csv')) {
showCsvFileDialog.value = true;
} else {
previewVisible.value = true;
}
previewVisible.value = true;
};
const fileList = ref<any>([]);