update:新的需求显示更新
This commit is contained in:
@@ -72,14 +72,14 @@ const modelAttribute = ref<any>([
|
||||
name: '所属阶段',
|
||||
value: 'ownPhaseName',
|
||||
},
|
||||
{
|
||||
name: '所属机台',
|
||||
value: 'ownMachineName',
|
||||
},
|
||||
{
|
||||
name: '所属工位',
|
||||
value: 'ownWorkspaceName',
|
||||
},
|
||||
// {
|
||||
// name: '所属机台',
|
||||
// value: 'ownMachineName',
|
||||
// },
|
||||
// {
|
||||
// name: '所属工位',
|
||||
// value: 'ownWorkspaceName',
|
||||
// },
|
||||
{
|
||||
name: '所属工况',
|
||||
value: 'owntaskName',
|
||||
|
||||
@@ -30,17 +30,24 @@
|
||||
<div class="task-img-item">
|
||||
<div class="img-box" @click="reviewFileFun(item_2.id)">
|
||||
<img class="img-item" :src="getImgPathFun(item_2.id)" alt="" />
|
||||
<div>{{ item_2.originalName }}</div>
|
||||
<!-- <div>{{ item_2.originalName }}</div> -->
|
||||
</div>
|
||||
<div class="img-attribute">{{ getFIleSuffix(item_2.originalName) }}</div>
|
||||
<div class="img-attribute">{{ item_2.formatFileSize }}</div>
|
||||
<div class="img-attribute">{{ item_2.createTime }}</div>
|
||||
<div class="img-attribute">{{ item_2.ownProjectName }}</div>
|
||||
<div class="img-attribute">{{ item_2.ownPhaseName }}</div>
|
||||
<div class="img-attribute">{{ item_2.runName }}</div>
|
||||
<!-- <div class="img-attribute">{{ getFIleSuffix(item_2.originalName) }}</div> -->
|
||||
<div class="img-attribute">{{ item_2.showName }}</div>
|
||||
<div class="img-attribute">
|
||||
<el-button type="primary" link @click="reviewFun(item_2)">预览</el-button>
|
||||
<el-button type="primary" link @click="downLoadFun(item_2)">下载</el-button>
|
||||
|
||||
<el-popover placement="right" :width="400" trigger="click">
|
||||
<template #reference>
|
||||
<el-button type="primary" link>详情</el-button>
|
||||
</template>
|
||||
<!-- <div class="img-attribute">{{ item_2.createTime }}</div> -->
|
||||
<div class="img-attribute">所属项目: {{ item_2.ownProjectName }}</div>
|
||||
<div class="img-attribute">所属阶段:{{ item_2.ownPhaseName }}</div>
|
||||
<div class="img-attribute">所属算例:{{ item_2.runName }}</div>
|
||||
<div class="img-attribute">文件大小:{{ item_2.formatFileSize }}</div>
|
||||
</el-popover>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
@@ -51,7 +58,6 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, nextTick, watch } from 'vue';
|
||||
import BaseTable from '@/components/common/table/baseTable.vue';
|
||||
import { objectTypeArrayRemovesDuplicates } from '@/utils/common';
|
||||
import FilePreview from '@/components/common/filePreview/index.vue';
|
||||
import { downloadFileByStream } from '@/utils/file';
|
||||
@@ -78,13 +84,6 @@ const env = import.meta.env;
|
||||
const previewVisible = ref(false);
|
||||
const fileId = ref<any>('');
|
||||
|
||||
const cloudTableRef = ref();
|
||||
const showTableContent = ref(false);
|
||||
|
||||
const tableColumns = ref<any>([]);
|
||||
|
||||
const tableData = ref<any>([]);
|
||||
|
||||
const imgLists = ref<any>([]);
|
||||
|
||||
const getTableColumnFun = (data: any) => {
|
||||
@@ -101,16 +100,35 @@ const getTableColumnFun = (data: any) => {
|
||||
return item[key];
|
||||
});
|
||||
|
||||
const checkNames: any = objectTypeArrayRemovesDuplicates(names, 1);
|
||||
// for (let i = 0; i < checkNames?.length; i++) {
|
||||
// const obj: any = {
|
||||
// name: checkNames[i],
|
||||
// img: [],
|
||||
// };
|
||||
|
||||
for (let i = 0; i < checkNames?.length; i++) {
|
||||
// for (let j = 0; j < data.length; j++) {
|
||||
// if (checkNames[i] === data[j][key]) {
|
||||
// obj.img.push(data[j]);
|
||||
// }
|
||||
// }
|
||||
|
||||
// imgLists.value.push(obj);
|
||||
// }
|
||||
|
||||
const picNames = data.map((item: any) => {
|
||||
return item.originalName;
|
||||
});
|
||||
|
||||
const checkPicNames: any = objectTypeArrayRemovesDuplicates(picNames, 1);
|
||||
|
||||
for (let i = 0; i < checkPicNames.length; i++) {
|
||||
const obj: any = {
|
||||
name: checkNames[i],
|
||||
name: checkPicNames[i],
|
||||
img: [],
|
||||
};
|
||||
|
||||
for (let j = 0; j < data.length; j++) {
|
||||
if (checkNames[i] === data[j][key]) {
|
||||
if (checkPicNames[i] === data[j].originalName) {
|
||||
data[j].showName = data[j][key];
|
||||
obj.img.push(data[j]);
|
||||
}
|
||||
}
|
||||
@@ -118,6 +136,8 @@ const getTableColumnFun = (data: any) => {
|
||||
imgLists.value.push(obj);
|
||||
}
|
||||
|
||||
console.log(imgLists.value, 'imgLists');
|
||||
|
||||
return;
|
||||
};
|
||||
|
||||
@@ -125,12 +145,6 @@ const getImgPathFun = (id: any) => {
|
||||
return `${env.VITE_API_IMAGE_PREVIEW_URL}/data/previewImage?fileId=${id}`;
|
||||
};
|
||||
|
||||
const getFIleSuffix = (name: any) => {
|
||||
let suffix: any = '';
|
||||
suffix = name.split('.').at(-1);
|
||||
return suffix;
|
||||
};
|
||||
|
||||
const reviewFileFun = (ids: any) => {
|
||||
fileId.value = ids;
|
||||
previewVisible.value = true;
|
||||
@@ -147,6 +161,10 @@ const downLoadFun = (column: any) => {
|
||||
downloadFileByStream(fileId.value);
|
||||
};
|
||||
|
||||
const detailFun = (column: any) => {
|
||||
console.log(column, 'column');
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.checkTaskInfo,
|
||||
(newVal) => {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="model-file-page">
|
||||
<BaseTable
|
||||
v-if="showTableContent"
|
||||
v-if="false"
|
||||
:row-config="{
|
||||
height: 400,
|
||||
}"
|
||||
@@ -18,6 +18,43 @@
|
||||
</div>
|
||||
</template>
|
||||
</BaseTable>
|
||||
|
||||
<div class="show-csv-box">
|
||||
<div class="csv-tree">
|
||||
<div class="tree-title">对比曲线</div>
|
||||
<div class="tree-file-item" v-for="item in tableData" :key="item.id">
|
||||
<el-checkbox v-model="item.select" :label="item.originalName" @change="initCsvChartFun" />
|
||||
<div>
|
||||
图:<el-input
|
||||
size="small"
|
||||
class="num-input"
|
||||
v-model="item.num"
|
||||
@change="initCsvChartFun"
|
||||
></el-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="csv-chart-box">
|
||||
<div class="csv-operate">
|
||||
<el-form>
|
||||
<el-form-item label="列数">
|
||||
<el-input-number v-model="columnsNum" :min="1" :max="10" @change="handleChangeFun" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="csv-content">
|
||||
<div
|
||||
class="csv-content-item"
|
||||
:style="{ width: `calc(100% / ${columnsNum})`, height: `calc(800px / ${columnsNum})` }"
|
||||
v-for="item in csvContents"
|
||||
:key="item.num"
|
||||
>
|
||||
<div class="chart-title">图:{{ item.num }}</div>
|
||||
<div class="chart-inner" :id="'csv-chart-' + item.num"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -48,9 +85,19 @@ const showTableContent = ref(false);
|
||||
const tableColumns = ref<any>([]);
|
||||
|
||||
const tableData = ref<any>([]);
|
||||
|
||||
const columnsNum = ref(1);
|
||||
const getTableColumnFun = (data: any) => {
|
||||
showTableContent.value = false;
|
||||
tableData.value = data.map((item: any) => {
|
||||
return {
|
||||
...item,
|
||||
select: false,
|
||||
num: 1,
|
||||
};
|
||||
});
|
||||
console.log(data, 'data');
|
||||
|
||||
return;
|
||||
tableData.value = [];
|
||||
tableColumns.value = [];
|
||||
const list: any = data || [];
|
||||
@@ -191,10 +238,59 @@ const getCsvFormatDataFun = (data: any, ids: any) => {
|
||||
},
|
||||
};
|
||||
|
||||
const elementId = 'curve-chart-' + ids;
|
||||
const elementId = 'csv-chart-' + ids;
|
||||
initEcharts(elementId, elementId, 'lineChart', options);
|
||||
};
|
||||
|
||||
const handleChangeFun = () => {};
|
||||
const csvContents = ref<any>([]);
|
||||
const initCsvChartFun = async () => {
|
||||
csvContents.value = [];
|
||||
const selectFiles = tableData.value.filter((item: any) => {
|
||||
return item.select;
|
||||
});
|
||||
|
||||
let lineNum: any =
|
||||
selectFiles.map((item: any) => {
|
||||
return item.num;
|
||||
}) || [];
|
||||
|
||||
lineNum = objectTypeArrayRemovesDuplicates(lineNum, 1);
|
||||
|
||||
for (let i = 0; i < lineNum.length; i++) {
|
||||
const obj: any = {
|
||||
num: lineNum[i],
|
||||
files: [],
|
||||
};
|
||||
for (let j = 0; j < selectFiles.length; j++) {
|
||||
if (selectFiles[j].num === lineNum[i]) {
|
||||
obj.files.push(selectFiles[j]);
|
||||
}
|
||||
}
|
||||
csvContents.value.push(obj);
|
||||
}
|
||||
|
||||
for (let i = 0; i < csvContents.value.length; i++) {
|
||||
let ids: any = csvContents.value[i].files.map((item: any) => {
|
||||
return item.id;
|
||||
});
|
||||
ids = ids.join(',');
|
||||
|
||||
const res: any = await getCSVDataApi({ fileId: ids });
|
||||
|
||||
if (res && res.code === 200) {
|
||||
const obj = {
|
||||
xData: res.data?.xData,
|
||||
yData: res.data?.yData,
|
||||
};
|
||||
getCsvFormatDataFun(obj, csvContents.value[i].num);
|
||||
}
|
||||
}
|
||||
|
||||
console.log(selectFiles, 'selectFiles');
|
||||
console.log(csvContents.value, 'selectFiles');
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.checkTaskInfo,
|
||||
(newVal) => {
|
||||
@@ -223,5 +319,80 @@ watch(
|
||||
min-height: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
.show-csv-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.csv-tree {
|
||||
width: 350px;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
|
||||
.tree-title {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #f5f5f5;
|
||||
line-height: 50px;
|
||||
padding-left: 10px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.tree-file-item {
|
||||
width: 100%;
|
||||
min-height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.csv-chart-box {
|
||||
width: calc(100% - 350px);
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
|
||||
.csv-operate {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.csv-content {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
overflow: auto;
|
||||
|
||||
.csv-content-item {
|
||||
width: 100%;
|
||||
height: 800px;
|
||||
padding: 10px;
|
||||
|
||||
.chart-title {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.chart-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 30px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.num-input {
|
||||
width: 40px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -71,14 +71,14 @@ const modelAttribute = ref<any>([
|
||||
name: '所属阶段',
|
||||
value: 'ownPhaseName',
|
||||
},
|
||||
{
|
||||
name: '所属机台',
|
||||
value: 'ownMachineName',
|
||||
},
|
||||
{
|
||||
name: '所属工位',
|
||||
value: 'ownWorkspaceName',
|
||||
},
|
||||
// {
|
||||
// name: '所属机台',
|
||||
// value: 'ownMachineName',
|
||||
// },
|
||||
// {
|
||||
// name: '所属工位',
|
||||
// value: 'ownWorkspaceName',
|
||||
// },
|
||||
{
|
||||
name: '所属工况',
|
||||
value: 'owntaskName',
|
||||
|
||||
@@ -10,6 +10,20 @@
|
||||
<template #performanceInfo="{ row }">
|
||||
{{ row.performanceInfo }}
|
||||
</template>
|
||||
|
||||
<template v-for="item in tableColumns" :key="item.key" #[item.key]="{ row }">
|
||||
<div v-if="item.key === 'performanceInfo'">
|
||||
{{ row.performanceInfo }}
|
||||
</div>
|
||||
<div class="num-box" v-else>
|
||||
<StatusDot
|
||||
v-if="row[item.key + '_completeStatus']"
|
||||
:status="getTaskAchieveStyleClass(row[item.key + '_completeStatus'] || '0')"
|
||||
:title="''"
|
||||
/>
|
||||
{{ row[item.key] || '--' }}
|
||||
</div>
|
||||
</template>
|
||||
</BaseTable>
|
||||
</div>
|
||||
</template>
|
||||
@@ -20,12 +34,10 @@ import BaseTable from '@/components/common/table/baseTable.vue';
|
||||
import { objectTypeArrayRemovesDuplicates } from '@/utils/common';
|
||||
import { useDict } from '@/utils/useDict';
|
||||
// import { getTaskAchieveStyleClass } from '@/components/common/statusDot/statusMap';
|
||||
// import StatusDot from '@/components/common/statusDot/index.vue';
|
||||
import StatusDot from '@/components/common/statusDot/index.vue';
|
||||
import { getTaskAchieveStyleClass } from '@/components/common/statusDot/statusMap';
|
||||
|
||||
const { PERFORMANCE_UNIT, RESULT_ACHIEVE_STATUS } = useDict(
|
||||
'PERFORMANCE_UNIT',
|
||||
'RESULT_ACHIEVE_STATUS'
|
||||
);
|
||||
const { PERFORMANCE_UNIT } = useDict('PERFORMANCE_UNIT');
|
||||
|
||||
const props = defineProps({
|
||||
checkTaskInfo: {
|
||||
@@ -75,6 +87,8 @@ const getTableColumnsFun = (data: any) => {
|
||||
const method = item.method || '';
|
||||
const targetValue = Number(item.targetValue) ?? '';
|
||||
const unitLabel = PERFORMANCE_UNIT.value?.O?.[item.unit] || item.unit || '';
|
||||
const completeStatus = getPerformanceSTatus(item) || 0;
|
||||
|
||||
const obj: any = {
|
||||
name: `${nodeName} (${method} ${targetValue} ${unitLabel})`,
|
||||
value: type ? item.taskId : item.runId,
|
||||
@@ -82,6 +96,7 @@ const getTableColumnsFun = (data: any) => {
|
||||
};
|
||||
|
||||
obj[type ? item.taskId : item.runId] = item.resultValue;
|
||||
obj[type ? item.taskId : item.runId + '_completeStatus'] = completeStatus;
|
||||
return obj;
|
||||
});
|
||||
|
||||
@@ -125,6 +140,7 @@ const getTableColumnsFun = (data: any) => {
|
||||
title: `${type ? list[i].taskName : list[i].runName}`,
|
||||
key: `${type ? list[i].taskId : list[i].runId}`,
|
||||
isShow: true,
|
||||
align: 'center',
|
||||
};
|
||||
modelcolumns.push(obj);
|
||||
}
|
||||
@@ -144,11 +160,16 @@ const getTableColumnsFun = (data: any) => {
|
||||
obj[tableColumns.value[j].key] = listData[i].name;
|
||||
} else {
|
||||
obj[tableColumns.value[j].key] = listData[i][tableColumns.value[j].key];
|
||||
obj[tableColumns.value[j].key + '_completeStatus'] =
|
||||
listData[i][tableColumns.value[j].key + '_completeStatus'];
|
||||
}
|
||||
}
|
||||
|
||||
tableData.value.push(obj);
|
||||
}
|
||||
|
||||
console.log(tableData.value, 'tableData.value');
|
||||
|
||||
showTableContent.value = true;
|
||||
nextTick(() => {
|
||||
performanceTableRef.value.setDataFun(tableData.value);
|
||||
@@ -163,13 +184,13 @@ const getPerformanceSTatus = (row: any) => {
|
||||
}
|
||||
|
||||
if (row?.method && row?.resultValue && row?.targetValue) {
|
||||
const resultValue = Number(row?.resultValue);
|
||||
const targetValue = Number(row?.targetValue);
|
||||
const highValue = Number(row?.targetValue);
|
||||
const targetValue = Number(row?.resultValue);
|
||||
const lowValue = Number(row?.lowValue);
|
||||
|
||||
// 小于等于
|
||||
if (row.method === '≤') {
|
||||
if (targetValue <= resultValue) {
|
||||
if (targetValue <= highValue) {
|
||||
status = 2;
|
||||
} else {
|
||||
status = 1;
|
||||
@@ -178,7 +199,7 @@ const getPerformanceSTatus = (row: any) => {
|
||||
|
||||
// 小于
|
||||
if (row.method === '<') {
|
||||
if (targetValue < resultValue) {
|
||||
if (targetValue < highValue) {
|
||||
status = 2;
|
||||
} else {
|
||||
status = 1;
|
||||
@@ -186,7 +207,7 @@ const getPerformanceSTatus = (row: any) => {
|
||||
}
|
||||
// 大于
|
||||
if (row.method === '>') {
|
||||
if (targetValue > resultValue) {
|
||||
if (targetValue > highValue) {
|
||||
status = 2;
|
||||
} else {
|
||||
status = 1;
|
||||
@@ -194,7 +215,7 @@ const getPerformanceSTatus = (row: any) => {
|
||||
}
|
||||
// 大于等于
|
||||
if (row.method === '≥') {
|
||||
if (targetValue >= resultValue) {
|
||||
if (targetValue >= highValue) {
|
||||
status = 2;
|
||||
} else {
|
||||
status = 1;
|
||||
@@ -202,7 +223,7 @@ const getPerformanceSTatus = (row: any) => {
|
||||
}
|
||||
// 包含
|
||||
if (row.method === '[]') {
|
||||
if (targetValue <= resultValue && targetValue >= lowValue) {
|
||||
if (targetValue <= highValue && targetValue >= lowValue) {
|
||||
status = 2;
|
||||
} else {
|
||||
status = 1;
|
||||
@@ -229,5 +250,11 @@ watch(
|
||||
.performance-page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.num-box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -72,14 +72,14 @@ const modelAttribute = ref<any>([
|
||||
name: '所属阶段',
|
||||
value: 'ownPhaseName',
|
||||
},
|
||||
{
|
||||
name: '所属机台',
|
||||
value: 'ownMachineName',
|
||||
},
|
||||
{
|
||||
name: '所属工位',
|
||||
value: 'ownWorkspaceName',
|
||||
},
|
||||
// {
|
||||
// name: '所属机台',
|
||||
// value: 'ownMachineName',
|
||||
// },
|
||||
// {
|
||||
// name: '所属工位',
|
||||
// value: 'ownWorkspaceName',
|
||||
// },
|
||||
{
|
||||
name: '所属工况',
|
||||
value: 'owntaskName',
|
||||
|
||||
Reference in New Issue
Block a user