870 lines
25 KiB
Vue
870 lines
25 KiB
Vue
<template>
|
||
<div class="gl-page-content">
|
||
<BaseTable
|
||
v-if="currentModel === '仿真工况'"
|
||
ref="tableRef"
|
||
:searchItems="searchItems"
|
||
:searchParams="{model:'仿真工况'}"
|
||
:api="getTaskListApi"
|
||
:searchLimitNum="3"
|
||
tableName="SIMULATION_TASK_ANALYSIS"
|
||
showIndex
|
||
showCheckbox
|
||
@searchChange="searchChangeFun"
|
||
:checkboxConfig= "{
|
||
checkMethod: ({ row }:any) => {
|
||
return !compareListIds.includes(row.id)
|
||
}
|
||
}"
|
||
>
|
||
<template #leftOptions>
|
||
<el-button type="primary" @click="addCompareListFun">加入对比池</el-button>
|
||
<el-button type="primary" @click="showCompareListFn">查看对比池</el-button>
|
||
<el-button type="primary" @click="compareFn('仿真工况')">对比</el-button>
|
||
</template>
|
||
<template #tableActions="{row}">
|
||
<el-link type="primary">查看详情</el-link>
|
||
</template>
|
||
</BaseTable>
|
||
<BaseTable
|
||
v-if="currentModel === '仿真算例'"
|
||
ref="tableRef"
|
||
:searchItems="searchItems"
|
||
:searchParams="{model:'仿真算例'}"
|
||
:api="getRunListApi"
|
||
:searchLimitNum="3"
|
||
tableName="SIMULATION_RUN_ANALYSIS"
|
||
showIndex
|
||
showCheckbox
|
||
@searchChange="searchChangeFun"
|
||
:checkboxConfig= "{
|
||
checkMethod: ({ row }:any) => {
|
||
return !compareListIds.includes(row.id)
|
||
}
|
||
}"
|
||
>
|
||
<template #leftOptions>
|
||
<el-button type="primary" @click="addCompareListFun">加入对比池</el-button>
|
||
<el-button type="primary" @click="showCompareListFn">查看对比池</el-button>
|
||
<el-button type="primary" @click="compareFn('仿真算例')">对比</el-button>
|
||
</template>
|
||
<template #tableActions="{row}">
|
||
<el-link type="primary">查看详情</el-link>
|
||
</template>
|
||
</BaseTable>
|
||
<BaseTable
|
||
v-if="currentModel === '数据指标'"
|
||
ref="tableRef"
|
||
:searchItems="searchItems"
|
||
:searchParams="{model:'数据指标'}"
|
||
:api="getPerformanceListApi"
|
||
:searchLimitNum="3"
|
||
tableName="SIMULATION_PERFORMANCE_ANALYSIS"
|
||
showIndex
|
||
showCheckbox
|
||
@searchChange="searchChangeFun"
|
||
:checkboxConfig= "{
|
||
checkMethod: ({ row }:any) => {
|
||
return !compareListIds.includes(row.id)
|
||
}
|
||
}"
|
||
>
|
||
<template #leftOptions>
|
||
<el-button type="primary" @click="addCompareListFun">加入对比池</el-button>
|
||
<el-button type="primary" @click="showCompareListFn">查看对比池</el-button>
|
||
<el-button type="primary" @click="compareFn('数据指标')">对比</el-button>
|
||
</template>
|
||
</BaseTable>
|
||
<BaseTable
|
||
v-if="currentModel === '模型文件'"
|
||
ref="tableRef"
|
||
:searchItems="searchItems"
|
||
:searchParams="{model:'模型文件'}"
|
||
:params="{ fileType:1}"
|
||
:api="getSimulationTaskFileApi"
|
||
:searchLimitNum="3"
|
||
tableName="RESULT_MODEL"
|
||
showIndex
|
||
showCheckbox
|
||
@searchChange="searchChangeFun"
|
||
:checkboxConfig= "{
|
||
checkMethod: ({ row }:any) => {
|
||
return !compareListIds.includes(row.id)
|
||
}
|
||
}"
|
||
>
|
||
<template #leftOptions>
|
||
<el-button type="primary" @click="addCompareListFun">加入对比池</el-button>
|
||
<el-button type="primary" @click="showCompareListFn">查看对比池</el-button>
|
||
<el-button type="primary" @click="compareFn('模型文件')">对比</el-button>
|
||
</template>
|
||
<template #tableActions="{row}">
|
||
<el-space>
|
||
<el-link type="primary">预览</el-link>
|
||
<UploadFile v-model="row.id" :name="$t('知识库.下载')" />
|
||
</el-space>
|
||
</template>
|
||
</BaseTable>
|
||
<BaseTable
|
||
v-if="currentModel === '仿真报告'"
|
||
ref="tableRef"
|
||
:searchItems="searchItems"
|
||
:searchParams="{model:'仿真报告'}"
|
||
:params="{ fileType:2}"
|
||
:api="getSimulationTaskFileApi"
|
||
:searchLimitNum="3"
|
||
tableName="RESULT_REPORT"
|
||
showIndex
|
||
showCheckbox
|
||
@searchChange="searchChangeFun"
|
||
:checkboxConfig= "{
|
||
checkMethod: ({ row }:any) => {
|
||
return !compareListIds.includes(row.id)
|
||
}
|
||
}"
|
||
>
|
||
<template #leftOptions>
|
||
<el-button type="primary" @click="addCompareListFun">加入对比池</el-button>
|
||
<el-button type="primary" @click="showCompareListFn">查看对比池</el-button>
|
||
<el-button type="primary" @click="compareFn('仿真报告')">对比</el-button>
|
||
</template>
|
||
<template #tableActions="{row}">
|
||
<el-space>
|
||
<el-link type="primary">预览</el-link>
|
||
<UploadFile v-model="row.id" :name="$t('知识库.下载')" />
|
||
</el-space>
|
||
</template>
|
||
</BaseTable>
|
||
<BaseTable
|
||
v-if="currentModel === '计算文件'"
|
||
ref="tableRef"
|
||
:searchItems="searchItems"
|
||
:searchParams="{model:'计算文件'}"
|
||
:params="{ fileType:3}"
|
||
:api="getSimulationTaskFileApi"
|
||
:searchLimitNum="3"
|
||
tableName="RESULT_FILE"
|
||
showIndex
|
||
showCheckbox
|
||
@searchChange="searchChangeFun"
|
||
:checkboxConfig= "{
|
||
checkMethod: ({ row }:any) => {
|
||
return !compareListIds.includes(row.id)
|
||
}
|
||
}"
|
||
>
|
||
<template #leftOptions>
|
||
<el-button type="primary" @click="addCompareListFun">加入对比池</el-button>
|
||
<el-button type="primary" @click="showCompareListFn">查看对比池</el-button>
|
||
<el-button type="primary" @click="compareFn('计算文件')">对比</el-button>
|
||
</template>
|
||
<template #tableActions="{row}">
|
||
<el-space>
|
||
<UploadFile v-model="row.id" :name="$t('知识库.下载')" />
|
||
</el-space>
|
||
</template>
|
||
</BaseTable>
|
||
<BaseTable
|
||
v-if="currentModel === '结果曲线'"
|
||
ref="tableRef"
|
||
:searchItems="searchItems"
|
||
:searchParams="{model:'结果曲线'}"
|
||
:params="{ fileType:4}"
|
||
:api="getSimulationTaskFileApi"
|
||
:searchLimitNum="3"
|
||
tableName="RESULT_CURVE"
|
||
showIndex
|
||
showCheckbox
|
||
@searchChange="searchChangeFun"
|
||
:checkboxConfig= "{
|
||
checkMethod: ({ row }:any) => {
|
||
return !compareListIds.includes(row.id)
|
||
}
|
||
}"
|
||
>
|
||
<template #leftOptions>
|
||
<el-button type="primary" @click="addCompareListFun">加入对比池</el-button>
|
||
<el-button type="primary" @click="showCompareListFn">查看对比池</el-button>
|
||
<el-button type="primary" @click="compareFn('结果曲线') ">对比</el-button>
|
||
</template>
|
||
<template #tableActions="{row}">
|
||
<el-space>
|
||
<el-link type="primary">预览</el-link>
|
||
<UploadFile v-model="row.id" :name="$t('知识库.下载')" />
|
||
</el-space>
|
||
</template>
|
||
</BaseTable>
|
||
<BaseTable
|
||
v-if="currentModel === '结果云图'"
|
||
ref="tableRef"
|
||
:searchItems="searchItems"
|
||
:searchParams="{model:'结果云图'}"
|
||
:params="{ fileType:5}"
|
||
:api="getSimulationTaskFileApi"
|
||
:searchLimitNum="3"
|
||
tableName="RESULT_PNG"
|
||
showIndex
|
||
showCheckbox
|
||
@searchChange="searchChangeFun"
|
||
:checkboxConfig= "{
|
||
checkMethod: ({ row }:any) => {
|
||
return !compareListIds.includes(row.id)
|
||
}
|
||
}"
|
||
>
|
||
<template #leftOptions>
|
||
<el-button type="primary" @click="addCompareListFun">加入对比池</el-button>
|
||
<el-button type="primary" @click="showCompareListFn">查看对比池</el-button>
|
||
<el-button type="primary" @click="compareFn('结果云图') ">对比</el-button>
|
||
</template>
|
||
<template #tableActions="{row}">
|
||
<el-space>
|
||
<el-link type="primary">预览</el-link>
|
||
<UploadFile v-model="row.id" :name="$t('知识库.下载')" />
|
||
</el-space>
|
||
</template>
|
||
</BaseTable>
|
||
<Dialog
|
||
v-model="diaVisible"
|
||
diaTitle="曲线对比"
|
||
:width="'90%'"
|
||
:height="'90%'"
|
||
:confirm-closable="false"
|
||
:zIndex="3000"
|
||
>
|
||
<div class="compare-container">
|
||
<div class="compare-container-left">
|
||
<BaseTable
|
||
ref="tableCompareRef"
|
||
tableName="COMPARE_CURVE"
|
||
showIndex
|
||
showCheckbox
|
||
hidePagination
|
||
:render="renderFun"
|
||
@checkbox-change="checkBoxChangeFun"
|
||
@checkbox-all="checkBoxChangeFun"
|
||
@searchChange="searchChangeFun"
|
||
>
|
||
<template #leftOptions>
|
||
<div class="compare-container-left-options">
|
||
<span>设置列数据：</span>
|
||
|
||
<el-input-number v-model="columnData" :min="1" :max="10" />
|
||
</div>
|
||
|
||
</template>
|
||
<template #tableActions="{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="{
|
||
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="closeFun">关闭</el-button>
|
||
</div>
|
||
</template>
|
||
</Dialog>
|
||
<Dialog
|
||
v-model="diaPngVisible"
|
||
diaTitle="云图对比"
|
||
:width="'90%'"
|
||
:height="'90%'"
|
||
:confirm-closable="false"
|
||
:zIndex="3000"
|
||
>
|
||
<div class="compare-container">
|
||
<div class="compare-container-left">
|
||
<BaseTable
|
||
ref="tableComparePngRef"
|
||
tableName="COMPARE_PNG"
|
||
showIndex
|
||
showCheckbox
|
||
hidePagination
|
||
:render="renderPngFun"
|
||
@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="{
|
||
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.originalName }}</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="compareListVisible"
|
||
diaTitle="对比池信息"
|
||
:width="'50%'"
|
||
:height="'50%'"
|
||
:confirm-closable="false"
|
||
:zIndex="3000"
|
||
@close="closeCompareListFn"
|
||
>
|
||
<div class="compare-content">
|
||
<BaseTable
|
||
ref="compareTableRef"
|
||
showIndex
|
||
showCheckbox
|
||
:head="compareListHead"
|
||
:table-name="''"
|
||
:hide-pagination="true"
|
||
>
|
||
|
||
<template #operate="{row}">
|
||
<el-button type="danger" link @click="deleteCompareDataFn(row)">删除</el-button>
|
||
</template>
|
||
</BaseTable>
|
||
</div>
|
||
</Dialog>
|
||
|
||
<analysisDataDialog v-if="loadcaseAnalysisVisable" @close="closeAnalysisFn" :analysis-data="selectAnalysisData"></analysisDataDialog>
|
||
|
||
</div>
|
||
</template>
|
||
<script setup lang="ts">
|
||
import { ref, onMounted, nextTick } from 'vue';
|
||
import BaseTable from '@/components/common/table/baseTable.vue';
|
||
import { queryNodeListApi, getChildrenNodeListApi } from '@/api/project/node';
|
||
import { getSimulationTaskFileApi, getCSVDataApi } from '@/api/data/dataAnalysis';
|
||
import { NODE_TYPE } from '@/utils/enum/node';
|
||
import { getTaskListApi, getPerformanceListApi, getRunListApi } from '@/api/project/analysis';
|
||
import { ElMessage } from 'element-plus';
|
||
import Dialog from '@/components/common/dialog/index.vue';
|
||
import EchartCard from '@/components/common/echartCard/index.vue';
|
||
import { groupBy } from 'lodash';
|
||
import UploadFile from '@/components/common/uploadFile/index.vue';
|
||
import analysisDataDialog from './components/analysisDataDialog.vue';
|
||
|
||
const tableRef = ref();
|
||
const searchChangeFun = ({ data, key, val }:any) => {
|
||
console.log('1740', data, key, val );
|
||
compareList.value = [];
|
||
compareListIds.value = [];
|
||
if (key === 'model') {
|
||
compareList.value = [];
|
||
currentModel.value = val;
|
||
}
|
||
if (val) {
|
||
if (key === 'project') {
|
||
getPhaseOptionsFun();
|
||
}
|
||
if (key === 'phase') {
|
||
getDisciplineOptionsFun();
|
||
}
|
||
} else {
|
||
if (key === 'project') {
|
||
tableRef.value?.setSearchParamByKeyFun('phase', '');
|
||
tableRef.value?.setOptionsFun('phase', []);
|
||
}
|
||
if (key === 'phase') {
|
||
tableRef.value?.setSearchParamByKeyFun('discipline', '');
|
||
tableRef.value?.setOptionsFun('discipline', []);
|
||
}
|
||
}
|
||
};
|
||
|
||
const currentModel = ref('仿真工况');
|
||
|
||
const projectOptions = ref<any[]>([]);
|
||
const phaseOptions = ref<any[]>([]);
|
||
const disciplineOptions = ref<any[]>([]);
|
||
const searchItems = [
|
||
{
|
||
title: '模块', key: 'model', type: 'select', inputMode: 'select', clearable: false, options: [
|
||
{ label: '仿真工况', value: '仿真工况' },
|
||
{ label: '仿真算例', value: '仿真算例' },
|
||
{ label: '数据指标', value: '数据指标' },
|
||
{ label: '模型文件', value: '模型文件' },
|
||
{ label: '仿真报告', value: '仿真报告' },
|
||
{ label: '计算文件', value: '计算文件' },
|
||
{ label: '结果曲线', value: '结果曲线' },
|
||
{ label: '结果云图', value: '结果云图' },
|
||
],
|
||
|
||
},
|
||
|
||
{
|
||
title: '项目', key: 'project', type: 'select', inputMode: 'select', clearable: true, options: [],
|
||
},
|
||
{
|
||
title: '阶段', key: 'phase', type: 'select', inputMode: 'select', clearable: true, options: [],
|
||
},
|
||
{
|
||
title: '学科', key: 'taskId', type: 'select', inputMode: 'select', clearable: true, options: [],
|
||
},
|
||
{ title: '名称', key: 'name', clearable: true, type: 'input', inputMode: 'input' },
|
||
{ title: '时间范围', key: 'dateRange', clearable: true, inputMode: 'daterange' },
|
||
|
||
];
|
||
|
||
const getProjectOptionsFun = () => {
|
||
queryNodeListApi({ current: 1, size: 999, nodeType: NODE_TYPE.PROJECT }).then((res: any) => {
|
||
console.log(res);
|
||
if (res.code === 200) {
|
||
projectOptions.value = res.data.data.map((item: any) => {
|
||
return {
|
||
label: item.nodeName,
|
||
value: item.id,
|
||
};
|
||
});
|
||
tableRef.value?.setOptionsFun( NODE_TYPE.PROJECT, projectOptions.value );
|
||
}
|
||
});
|
||
};
|
||
const getPhaseOptionsFun = () => {
|
||
const projectId = tableRef.value?.getSearchParamByKeyFun('project');
|
||
console.log('1440', projectId);
|
||
getChildrenNodeListApi({ current: 1, size: 999, nodeType: NODE_TYPE.PHASE, pid: projectId }).then((res: any) => {
|
||
console.log(res);
|
||
if (res.code === 200) {
|
||
phaseOptions.value = res.data?.data?.map((item: any) => {
|
||
return {
|
||
label: item.nodeName,
|
||
value: item.id,
|
||
};
|
||
});
|
||
tableRef.value?.setOptionsFun( NODE_TYPE.PHASE, phaseOptions.value );
|
||
}
|
||
});
|
||
};
|
||
const getDisciplineOptionsFun = () => {
|
||
const phaseId = tableRef.value?.getSearchParamByKeyFun('phase');
|
||
queryNodeListApi({ current: 1, size: 999, nodeType: 'discipline', pid: phaseId }).then((res: any) => {
|
||
console.log(res);
|
||
if (res.code === 200) {
|
||
disciplineOptions.value = res.data.data.map((item: any) => {
|
||
return {
|
||
label: item.nodeName,
|
||
value: item.id,
|
||
};
|
||
});
|
||
tableRef.value?.setOptionsFun( 'discipline', disciplineOptions.value );
|
||
}
|
||
});
|
||
};
|
||
const compareList = ref<any[]>([]);
|
||
const addCompareListFun = () => {
|
||
const selectedRows = tableRef.value?.tableRef?.getCheckboxRecords();
|
||
if (selectedRows && selectedRows.length > 0) {
|
||
selectedRows.forEach((item: any) => {
|
||
if (!compareList.value.some((val: any) => val.id === item.id)) {
|
||
compareList.value.push(item);
|
||
}
|
||
});
|
||
ElMessage.success('添加成功');
|
||
} else {
|
||
ElMessage.warning('请先选择要对比的数据');
|
||
}
|
||
|
||
compareListIds.value = compareList.value.map((item:any) => {return item.id;});
|
||
tableRef.value?.tableRef?.clearCheckboxRow();
|
||
};
|
||
|
||
const diaVisible = ref<boolean>(false);
|
||
const closeFun = () => {
|
||
diaVisible.value = false;
|
||
};
|
||
const displayCompareFun = (flag:any) => {
|
||
if (!compareList.value.length) {
|
||
ElMessage.warning('请先加入对比池');
|
||
return;
|
||
}
|
||
if (flag === '结果曲线') {
|
||
diaVisible.value = true;
|
||
} else {
|
||
diaPngVisible.value = true;
|
||
|
||
}
|
||
};
|
||
const columnData = ref<number>(1);
|
||
const renderFun = (data: any, render: (cbData: any) => void) => {
|
||
render(compareList.value.map((item:any) => {
|
||
return {
|
||
...item,
|
||
name: item.originalName,
|
||
imageNumber: 1,
|
||
};
|
||
}));
|
||
};
|
||
const tableCompareRef = ref();
|
||
const compareData = ref<any>({});
|
||
const projectStorageSpaceStatisticsRef = ref<any>({});
|
||
// 初始化图表chart-1
|
||
const initProjectTaskAchievementStatistics = async ({ dom, seriesData, 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: 'category',
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
},
|
||
series: seriesData,
|
||
// dataZoom:
|
||
// projectNames.length > 4
|
||
// ? [
|
||
// {
|
||
// type: 'slider',
|
||
// show: true,
|
||
// xAxisIndex: [0],
|
||
// start: 0,
|
||
// end: 100,
|
||
// textStyle: {
|
||
// color: 'transparent',
|
||
// },
|
||
// maxValueSpan: 4,
|
||
// minValueSpan: 4,
|
||
// moveHandleSize: 10,
|
||
// height: 0,
|
||
// filterMode: 'empty',
|
||
// bottom: 15,
|
||
// },
|
||
// ]
|
||
// : null,
|
||
|
||
};
|
||
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.id).join(',') }).then((res:any) => {
|
||
const seriesData:any = [];
|
||
const titleList: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]];
|
||
});
|
||
const title = compareData.value[key][index].originalName;
|
||
titleList.push(title);
|
||
seriesData.push({
|
||
name: title,
|
||
type: 'line',
|
||
stack: 'Total',
|
||
data,
|
||
});
|
||
});
|
||
}
|
||
console.log('1030', res);
|
||
|
||
initProjectTaskAchievementStatistics({ dom: projectStorageSpaceStatisticsRef.value[`chart-${key}`], seriesData, titleList, key });
|
||
});
|
||
}
|
||
});
|
||
}
|
||
};
|
||
const checkBoxChangeFun = () => {
|
||
setChartFun();
|
||
};
|
||
const changeImageNumberFun = () => {
|
||
setChartFun();
|
||
};
|
||
const tableComparePngRef = ref();
|
||
|
||
const diaPngVisible = ref<boolean>(false);
|
||
const compareListIds = ref<any[]>([]);
|
||
const columnPngData = ref<number>(1);
|
||
const comparePngData = ref<any>([]);
|
||
const closePngFun = () => {
|
||
diaPngVisible.value = false;
|
||
};
|
||
|
||
// 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 {
|
||
...item,
|
||
name: item.originalName,
|
||
};
|
||
}));
|
||
};
|
||
const env = import.meta.env;
|
||
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.id}`;
|
||
});
|
||
};
|
||
|
||
const loadcaseAnalysisVisable = ref(false);
|
||
|
||
const selectAnalysisData = ref<any>({});
|
||
|
||
const openDataAnalysisFn = (flag:any, tableName:any) => {
|
||
selectAnalysisData.value = {
|
||
flag,
|
||
data: compareList.value,
|
||
tableName,
|
||
};
|
||
loadcaseAnalysisVisable.value = true;
|
||
};
|
||
|
||
const closeAnalysisFn = () => {
|
||
loadcaseAnalysisVisable.value = false;
|
||
|
||
};
|
||
|
||
const compareFn = (flag:any) => {
|
||
|
||
if (!compareList.value.length) {
|
||
ElMessage.warning('对比池为空，无法对比');
|
||
return;
|
||
}
|
||
if (flag === '仿真工况') {
|
||
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 === '结果曲线') {
|
||
// openDataAnalysisFn( flag, 'RESULT_CURVE');
|
||
|
||
displayCompareFun('结果曲线');
|
||
}
|
||
if (flag === '结果云图') {
|
||
// openDataAnalysisFn( flag, 'RESULT_PNG');
|
||
|
||
displayCompareFun('结果云图');
|
||
}
|
||
};
|
||
|
||
const compareListHead = ref([
|
||
{
|
||
title: '对比名称',
|
||
key: 'compareName',
|
||
isShow: true,
|
||
},
|
||
{
|
||
title: '对比类型',
|
||
key: 'compareType',
|
||
isShow: true,
|
||
},
|
||
{
|
||
title: '操作',
|
||
key: 'operate',
|
||
isShow: true,
|
||
},
|
||
]);
|
||
|
||
const compareListVisible = ref(false);
|
||
const compareTableRef = ref();
|
||
// 查看对比池
|
||
const showCompareListFn = () => {
|
||
|
||
for (let i = 0;i < compareList.value.length;i++) {
|
||
|
||
let compareName:any = '';
|
||
if (currentModel.value === '仿真工况') {
|
||
compareName = compareList.value[i].taskName;
|
||
}
|
||
else if (currentModel.value === '仿真算例') {
|
||
compareName = compareList.value[i].runName;
|
||
}
|
||
else if (currentModel.value === '数据指标') {
|
||
compareName = compareList.value[i].performanceName;
|
||
}
|
||
else if (currentModel.value === '模型文件') {
|
||
compareName = compareList.value[i].performanceName;
|
||
} else {
|
||
compareName = compareList.value[i].fileName;
|
||
|
||
}
|
||
|
||
compareList.value[i].compareName = compareName;
|
||
compareList.value[i].compareType = currentModel.value;
|
||
|
||
}
|
||
|
||
console.log(compareList.value, 'compareList.value');
|
||
|
||
compareListVisible.value = true;
|
||
nextTick(() => {
|
||
compareTableRef.value?.setDataFun(compareList.value);
|
||
});
|
||
};
|
||
|
||
const closeCompareListFn = () => {
|
||
compareListVisible.value = false;
|
||
|
||
};
|
||
|
||
// 删除对比元素
|
||
const deleteCompareDataFn = (data:any) => {
|
||
compareList.value = compareList.value.filter((item:any) => {
|
||
return item.id != data.id;
|
||
});
|
||
compareListIds.value = compareList.value.map((item:any) => {return item.id;});
|
||
nextTick(() => {
|
||
compareTableRef.value?.setDataFun(compareList.value);
|
||
});
|
||
};
|
||
|
||
onMounted(() => {
|
||
getProjectOptionsFun();
|
||
});
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.gl-page-content {
|
||
|
||
.content {
|
||
height: 100%;
|
||
}
|
||
}
|
||
:deep(.compare-container){
|
||
height: 100%;
|
||
width: 100%;
|
||
display:flex;
|
||
justify-content: space-between;
|
||
.compare-container-left{
|
||
height: 100%;
|
||
width: 49%;
|
||
.compare-container-left-options{
|
||
display:flex;
|
||
align-items: center;
|
||
&>span{
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
}
|
||
.compare-container-right{
|
||
height: 100%;
|
||
width: 50%;
|
||
.image-number-input{
|
||
width: 50px;
|
||
}
|
||
.chart-container{
|
||
height: 100%;
|
||
width: 100%;
|
||
overflow-y: auto;
|
||
display: grid;
|
||
.chart-box{
|
||
height: 350px;
|
||
width:100%;
|
||
|
||
}
|
||
.chart-box-png{
|
||
height: 50%;
|
||
width:100%;
|
||
.png-container{
|
||
height: 100%;
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
.png-title{
|
||
margin-bottom: 12px;
|
||
width: 100%;
|
||
}
|
||
.png-image{
|
||
flex:1;
|
||
width: 100%;
|
||
.el-image{
|
||
height: 100%;
|
||
width: 100%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.compare-content{
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
</style>
|