Files
pqs-9100_client/frontend/src/views/home/components/dataCheckResultTable.vue
2025-01-06 08:51:14 +08:00

131 lines
4.7 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div class="table-main">
<el-table v-if="info.length <= 0" :data="tableData" height="335px" :header-cell-style="{ textAlign: 'center' } "
:cell-style="{ textAlign: 'center' }">
<!-- <el-table-column prop="chnNum" label="通道号" width="80">-->
<!-- <template #default="{row}">-->
<!-- {{ '通道' + row.chnNum }}-->
<!-- </template>-->
<!-- </el-table-column>-->
<template v-if="phaseFlag === 0">
<el-table-column :label="`A${unit}`">
<el-table-column prop="aStd" width="79" label="标准值"/>
<el-table-column prop="aData" width="79" label="被检值"/>
<el-table-column prop="aError" width="79" label="误差值"/>
</el-table-column>
<el-table-column :label="`B${unit}`">
<el-table-column prop="bStd" width="79" label="标准值"/>
<el-table-column prop="bData" width="79" label="被检值"/>
<el-table-column prop="bError" width="79" label="误差值"/>
</el-table-column>
<el-table-column :label="`C${unit}`">
<el-table-column prop="cStd" width="79" label="标准值"/>
<el-table-column prop="cData" width="79" label="被检值"/>
<el-table-column prop="cError" width="79" label="误差值"/>
</el-table-column>
<el-table-column prop="maxError" :label="`最大误差(${unit}`"/>
<el-table-column prop="result" label="检测结果" width="70">
<template #default="scope">
<el-tag type="danger" v-if="scope.row.result === '不符合'">{{ scope.row.result }}</el-tag>
<span v-if="scope.row.result != '不符合'">{{ scope.row.result }}</span>
</template>
</el-table-column>
</template>
<template v-if="phaseFlag === 1">
<el-table-column :label="`T${unit}`">
<el-table-column prop="tStd" label="标准值V"/>
<el-table-column prop="tData" label="被检值"/>
<el-table-column prop="tError" label="误差值"/>
</el-table-column>
<el-table-column prop="maxError" label="最大误差V"/>
<el-table-column prop="result" label="检测结果">
<template #default="scope">
<el-tag type="danger" v-if="scope.row.result === '不符合'">{{ scope.row.result }}</el-tag>
<span v-if="scope.row.result != '不符合'">{{ scope.row.result }}</span>
</template>
</el-table-column>
</template>
</el-table>
<el-collapse v-else v-model="activeNames">
<el-collapse-item v-for="(item, index) in info" :key="index" :title="item.title" :name="item.name">
<el-table :data="[tableData[index]]" :header-cell-style="{ textAlign: 'center' } "
:cell-style="{ textAlign: 'center' }">
<el-table-column :label="`T${unit}`">
<el-table-column prop="tStd" label="标准值V"/>
<el-table-column prop="tData" label="被检值"/>
<el-table-column prop="tError" label="误差值"/>
</el-table-column>
<el-table-column prop="maxError" label="最大误差V"/>
<el-table-column prop="result" label="检测结果">
<template #default="scope">
<el-tag type="danger" v-if="scope.row.result === '不符合'">{{ scope.row.result }}</el-tag>
<span v-if="scope.row.result != '不符合'">{{ scope.row.result }}</span>
</template>
</el-table-column>
</el-table>
</el-collapse-item>
</el-collapse>
</div>
</template>
<script lang="tsx" setup>
import {defineProps} from 'vue';
import {CheckData} from "@/api/check/interface";
const {tableData} = defineProps<{
info: { title: string, name: string }[],
tableData: CheckData.CheckResult[],
}>();
const activeNames = ref(["Voltage"])
const unit = computed(() => {
return "V"
})
const phaseFlag = computed(() => {
let result = 0;
if (tableData.length > 0) {
result = !tableData[0].tData ? 0 : 1;
}
return result;
})
</script>
<style scoped>
.form-grid {
display: flex;
flex-direction: row; /* 横向排列 */
flex-wrap: wrap; /* 允许换行 */
}
.form-grid .el-form-item {
flex: 1 1 30%; /* 控件宽度 */
margin-right: 20px; /* 控件间距 */
}
.form-grid .el-form-item:last-child {
margin-right: 0; /* 最后一个控件不需要右边距 */
}
.dialog-footer {
display: flex;
justify-content: flex-start;
margin-bottom: 10px; /* 调整这里的值以增加或减少间距 */
}
.el-tabs {
margin-bottom: 20px; /* 添加底部边距 */
}
.el-table th, .el-table td {
text-align: center; /* 所有单元格文字居中 */
}
</style>