pqs-9100_client/frontend/src/views/home/components/channelsTestTable.vue

<template>
    <div class="table-container table-main">
        <el-table
            :data="tableData"
            :header-cell-style="{ textAlign: 'center' }"
            :cell-style="{ textAlign: 'center' }"
            style="width: 100%"
            max-height="400px"
            :span-method="objectSpanMethod"
        >
            <el-table-column prop="monitorNum" label="监测点序号" width="80" />
            <el-table-column prop="desc" label="描述" width="90" />
            <el-table-column label="电压通道">
                <el-table-column prop="Ua" label="A相">
                    <el-table-column prop="aVuData" label="被检值(V)" width="100px">
                        <template #default="scope">
                            <el-icon v-if="scope.row.aVuData === '—' && scope.row.loading" class="loading-box">
                                <el-icon-loading />
                            </el-icon>
                            <span v-else>
                                {{ scope.row.aVuData }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="aVuXi" label="检测结果" width="90px">
                        <template #default="scope">
                            <el-tooltip
                                v-if="scope.row.aVuXi === '不合格'"
                                class="item"
                                effect="dark"
                                placement="bottom-start"
                            >
                                <template #content>
                                    误差范围：
                                    {{
                                        (-0.001 * props.curV).toFixed(4) + 'V~' + (0.001 * props.curV).toFixed(4) + 'V'
                                    }}
                                    <br />
                                    误差值：{{ scope.row.aV + 'V' }}
                                </template>
                                <el-tag type="danger" class="tooltip-content">
                                    {{ scope.row.aVuXi }}
                                </el-tag>
                            </el-tooltip>
                            <el-tooltip
                                v-else-if="scope.row.aVuXi === '合格'"
                                class="item"
                                effect="dark"
                                placement="bottom-start"
                            >
                                <template #content>
                                    误差范围：
                                    {{
                                        (-0.001 * props.curV).toFixed(4) + 'V~' + (0.001 * props.curV).toFixed(4) + 'V'
                                    }}
                                    <br />
                                    误差值：{{ scope.row.aV + 'V' }}
                                </template>
                                <el-tag type="success" class="tooltip-content">{{ scope.row.aVuXi }}</el-tag>
                            </el-tooltip>
                            <!-- <el-tag type="danger" v-if="scope.row.aVuXi === '不合格'">
                                {{ scope.row.aVuXi }}
                              </el-tag> -->
                            <el-icon v-else-if="scope.row.aVuXi === '—' && scope.row.loading" class="loading-box">
                                <el-icon-loading />
                            </el-icon>
                            <!-- <span v-else>
                                {{ scope.row.aVuXi }}
                              </span> -->
                        </template>
                    </el-table-column>
                </el-table-column>
                <el-table-column prop="Ub" label="B相">
                    <el-table-column prop="bVuData" label="被检值(V)" width="100px">
                        <template #default="scope">
                            <el-icon v-if="scope.row.bVuData === '—' && scope.row.loading" class="loading-box">
                                <el-icon-loading />
                            </el-icon>
                            <span v-else>
                                {{ scope.row.bVuData }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="bVuXi" label="检测结果" width="90px">
                        <template #default="scope">
                            <el-tooltip
                                v-if="scope.row.bVuXi === '不合格'"
                                class="item"
                                effect="dark"
                                placement="bottom-start"
                            >
                                <template #content>
                                    误差范围：
                                    {{
                                        (-0.001 * props.curV).toFixed(4) + 'V~' + (0.001 * props.curV).toFixed(4) + 'V'
                                    }}
                                    <br />
                                    误差值：{{ scope.row.bV + 'V' }}
                                </template>
                                <el-tag type="danger" class="tooltip-content">
                                    {{ scope.row.bVuXi }}
                                </el-tag>
                            </el-tooltip>
                            <el-tooltip
                                v-else-if="scope.row.bVuXi === '合格'"
                                class="item"
                                effect="dark"
                                placement="bottom-start"
                            >
                                <template #content>
                                    误差范围：
                                    {{
                                        (-0.001 * props.curV).toFixed(4) + 'V~' + (0.001 * props.curV).toFixed(4) + 'V'
                                    }}
                                    <br />
                                    误差值：{{ scope.row.bV + 'V' }}
                                </template>
                                <el-tag type="success" class="tooltip-content">{{ scope.row.bVuXi }}</el-tag>
                            </el-tooltip>
                            <el-icon v-else-if="scope.row.bVuXi === '—' && scope.row.loading" class="loading-box">
                                <el-icon-loading />
                            </el-icon>
                        </template>
                    </el-table-column>
                </el-table-column>
                <el-table-column prop="Uc" label="C相">
                    <el-table-column prop="cVuData" label="被检值(V)" width="100px">
                        <template #default="scope">
                            <el-icon v-if="scope.row.cVuData === '—' && scope.row.loading" class="loading-box">
                                <el-icon-loading />
                            </el-icon>
                            <span v-else>
                                {{ scope.row.cVuData }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="cVuXi" label="检测结果" width="90px">
                        <template #default="scope">
                            <el-tooltip
                                v-if="scope.row.cVuXi === '不合格'"
                                class="item"
                                effect="dark"
                                placement="bottom-start"
                            >
                                <template #content>
                                    误差范围：
                                    {{
                                        (-0.001 * props.curV).toFixed(4) + 'V~' + (0.001 * props.curV).toFixed(4) + 'V'
                                    }}
                                    <br />
                                    误差值：{{ scope.row.cV + 'V' }}
                                </template>
                                <el-tag type="danger" class="tooltip-content">
                                    {{ scope.row.cVuXi }}
                                </el-tag>
                            </el-tooltip>
                            <el-tooltip
                                v-else-if="scope.row.cVuXi === '合格'"
                                class="item"
                                effect="dark"
                                placement="bottom-start"
                            >
                                <template #content>
                                    误差范围：
                                    {{
                                        (-0.001 * props.curV).toFixed(4) + 'V~' + (0.001 * props.curV).toFixed(4) + 'V'
                                    }}
                                    <br />
                                    误差值：{{ scope.row.cV + 'V' }}
                                </template>
                                <el-tag type="success" class="tooltip-content">{{ scope.row.cVuXi }}</el-tag>
                            </el-tooltip>
                            <el-icon v-else-if="scope.row.cVuXi === '—' && scope.row.loading" class="loading-box">
                                <el-icon-loading />
                            </el-icon>
                        </template>
                    </el-table-column>
                </el-table-column>
            </el-table-column>
            <el-table-column label="电流通道">
                <el-table-column prop="Ia" label="A相">
                    <el-table-column prop="aIeData" label="被检值(A)" width="100px">
                        <template #default="scope">
                            <el-icon v-if="scope.row.aIeData === '—' && scope.row.loading" class="loading-box">
                                <el-icon-loading />
                            </el-icon>
                            <span v-else>
                                {{ scope.row.aIeData }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="aIeXi" label="检测结果" width="90px">
                        <template #default="scope">
                            <el-tooltip
                                v-if="scope.row.aIeXi === '不合格'"
                                class="item"
                                effect="dark"
                                placement="bottom-start"
                            >
                                <template #content>
                                    误差范围： {{ -0.5 + '%~' + 0.5 + '%' }}
                                    <br />
                                    误差值：{{ scope.row.aI + '%' }}
                                </template>
                                <el-tag type="danger" class="tooltip-content">
                                    {{ scope.row.aIeXi }}
                                </el-tag>
                            </el-tooltip>
                            <el-tooltip
                                v-else-if="scope.row.aIeXi === '合格'"
                                class="item"
                                effect="dark"
                                placement="bottom-start"
                            >
                                <template #content>
                                    误差范围： {{ -0.5 + '%~' + 0.5 + '%' }}
                                    <br />
                                    误差值：{{ scope.row.aI + '%' }}
                                </template>
                                <el-tag type="success" class="tooltip-content">{{ scope.row.aIeXi }}</el-tag>
                            </el-tooltip>
                            <el-icon v-else-if="scope.row.aIeXi === '—' && scope.row.loading" class="loading-box">
                                <el-icon-loading />
                            </el-icon>
                        </template>
                    </el-table-column>
                </el-table-column>
                <el-table-column prop="Ib" label="B相">
                    <el-table-column prop="bIeData" label="被检值(A)" width="100px">
                        <template #default="scope">
                            <el-icon v-if="scope.row.bIeData === '—' && scope.row.loading" class="loading-box">
                                <el-icon-loading />
                            </el-icon>
                            <span v-else>
                                {{ scope.row.bIeData }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="bIeXi" label="检测结果" width="90px">
                        <template #default="scope">
                            <el-tooltip
                                v-if="scope.row.bIeXi === '不合格'"
                                class="item"
                                effect="dark"
                                placement="bottom-start"
                            >
                                <template #content>
                                    误差范围： {{ -0.5 + '%~' + 0.5 + '%' }}
                                    <br />
                                    误差值：{{ scope.row.bI + '%' }}
                                </template>
                                <el-tag type="danger" class="tooltip-content">
                                    {{ scope.row.bIeXi }}
                                </el-tag>
                            </el-tooltip>
                            <el-tooltip
                                v-else-if="scope.row.bIeXi === '合格'"
                                class="item"
                                effect="dark"
                                placement="bottom-start"
                            >
                                <template #content>
                                    误差范围： {{ -0.5 + '%~' + 0.5 + '%' }}
                                    <br />
                                    误差值：{{ scope.row.bI + '%' }}
                                </template>
                                <el-tag type="success" class="tooltip-content">{{ scope.row.bIeXi }}</el-tag>
                            </el-tooltip>
                            <el-icon v-else-if="scope.row.bIeXi === '—' && scope.row.loading" class="loading-box">
                                <el-icon-loading />
                            </el-icon>
                        </template>
                    </el-table-column>
                </el-table-column>
                <el-table-column prop="Ic" label="C相">
                    <el-table-column prop="cIeData" label="被检值(A)" width="100px">
                        <template #default="scope">
                            <el-icon v-if="scope.row.cIeData === '—' && scope.row.loading" class="loading-box">
                                <el-icon-loading />
                            </el-icon>
                            <span v-else>
                                {{ scope.row.cIeData }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="cIeXi" label="检测结果" width="90px">
                        <template #default="scope">
                            <el-tooltip
                                v-if="scope.row.cIeXi === '不合格'"
                                class="item"
                                effect="dark"
                                placement="bottom-start"
                            >
                                <template #content>
                                    误差范围： {{ -0.5 + '%~' + 0.5 + '%' }}
                                    <br />
                                    误差值：{{ scope.row.cI + '%' }}
                                </template>
                                <el-tag type="danger" class="tooltip-content">
                                    {{ scope.row.cIeXi }}
                                </el-tag>
                            </el-tooltip>
                            <el-tooltip
                                v-else-if="scope.row.cIeXi === '合格'"
                                class="item"
                                effect="dark"
                                placement="bottom-start"
                            >
                                <template #content>
                                    误差范围： {{ -0.5 + '%~' + 0.5 + '%' }}
                                    <br />
                                    误差值：{{ scope.row.cI + '%' }}
                                </template>
                                <el-tag type="success" class="tooltip-content">{{ scope.row.cIeXi }}</el-tag>
                            </el-tooltip>
                            <el-icon v-else-if="scope.row.cIeXi === '—' && scope.row.loading" class="loading-box">
                                <el-icon-loading />
                            </el-icon>
                        </template>
                    </el-table-column>
                </el-table-column>
            </el-table-column>
        </el-table>
    </div>
</template>

<script lang="ts" setup name="ErrorSystemDialog">
import { ElIcon, ElTag } from 'element-plus'
import type { ChannelsTest } from '@/api/home/interface/channelsTest'

interface Props {
    tableData: ChannelsTest.CoefficientVO[]
    big_V_loading: boolean
    curV: number
}

const props = withDefaults(defineProps<Props>(), {
    tableData: () => [],
    big_V_loading: false,
    curV: 0
})

function objectSpanMethod({
    row,
    column,
    rowIndex,
    columnIndex
}: {
    row: any
    column: any
    rowIndex: number
    columnIndex: number
}) {
    if (columnIndex === 0) {
        if (rowIndex % 4 === 0) {
            return {
                rowspan: 4,
                colspan: 1
            }
        } else {
            return {
                rowspan: 0,
                colspan: 0
            }
        }
    }
    if (columnIndex === 1) {
        if (rowIndex % 2 === 0) {
            return {
                rowspan: 2,
                colspan: 1
            }
        } else {
            return {
                rowspan: 0,
                colspan: 0
            }
        }
    }
}
</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; /* 所有单元格文字居中 */
}

.table-container {
    max-height: 400px; /* 根据需要调整高度 */
    overflow-y: auto; /* 允许垂直滚动 */
    overflow-x: hidden; /* 隐藏水平滚动条 */
}

/* 确保 el-icon-loading 的动画效果没有被覆盖 */
.loading-box {
    animation: rotate 2s linear infinite;
}

.icon-margin {
    margin-left: 0px;
}

.icon-align {
    vertical-align: 0px;
}

.tooltip-content {
    cursor: pointer;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
</style>