admin-sjzx/src/views/pqs/runManage/assessment/components/assess/outcome.vue

<template>
    <div>
        <el-collapse v-model="activeNames">
            <el-collapse v-model="activeNames">
                <el-collapse-item title="电压波动/闪变评估结果" :name="1">
                    <div class="flickerWaves">
                        <vxe-table
                            :data="undulation"
                            height="110px"
                            v-bind="defaultAttribute"
                            :cell-class-name="getCellClassName"
                            style="width: 60%"
                        >
                            <vxe-column title="估算方式" field="name" />
                            <vxe-column title="冲击负荷数量" field="name1" />
                            <vxe-column title="电压波动" field="name2" />
                            <vxe-column title="国标限值" field="name3" />
                            <vxe-column title="判断">
                                <template #default="{ row }">
                                    <el-tag v-if="row.name2 > row.name3" type="warning">不合格</el-tag>
                                    <el-tag v-else type="success">合格</el-tag>
                                </template>
                            </vxe-column>
                        </vxe-table>
                        <vxe-table
                            :data="flicker"
                            height="110px"
                            v-bind="defaultAttribute"
                            :cell-class-name="getCellClassName"
                            style="width: 40%"
                        >
                            <vxe-column title="冲击负荷数量" field="name1" />
                            <vxe-column title="闪变" field="name2" />
                            <vxe-column title="国标限值" field="name3" />
                            <vxe-column title="判断">
                                <template #default="{ row }">
                                    <span v-if="row.name2 == null"></span>
                                    <el-tag v-else-if="row.name2 > row.name3" type="warning">不合格</el-tag>

                                    <el-tag v-else type="success">合格</el-tag>
                                </template>
                            </vxe-column>
                        </vxe-table>
                    </div>
                </el-collapse-item>
                <el-collapse-item title="电压偏差评估结果" :name="2">
                    <vxe-table
                        :data="voltageDeviation"
                        height="330px"
                        :merge-cells="mergeCells"
                        v-bind="defaultAttribute"
                        style="width: 100%"
                    >
                        <vxe-column field="name" width="80px">
                            <template #default="{ row }">
                                <div class="textName">{{ row.name }}</div>
                            </template>
                        </vxe-column>
                        <vxe-colgroup title="用户无功设备情况">
                            <vxe-column field="name1" title="用户项目负载/出力(%)" min-width="160px" />
                        </vxe-colgroup>
                        <vxe-colgroup title="用户无功设备不运行">
                            <vxe-column field="name2" title="百分比(%)" min-width="90px" />
                            <vxe-column field="name3" title="有名值(%)" min-width="90px" />
                            <vxe-column field="name4" title="上限值(%)" min-width="90px" />
                            <vxe-column field="name5" title="下限值(%)" min-width="90px" />
                            <vxe-column title="判断" min-width="80px">
                                <template #default="{ row }">
                                    <el-tag type="success">合格</el-tag>
                                </template>
                            </vxe-column>
                        </vxe-colgroup>
                        <vxe-colgroup title="用户无功设备全部运行">
                            <vxe-column field="name6" title="百分比(%)" min-width="90px" />
                            <vxe-column field="name7" title="有名值(%)" min-width="90px" />
                            <vxe-column field="name8" title="上限值(%)" min-width="90px" />
                            <vxe-column field="name9" title="下限值(%)" min-width="90px" />
                            <vxe-column title="判断" min-width="80px">
                                <template #default="{ row }">
                                    <el-tag type="success">合格</el-tag>
                                </template>
                            </vxe-column>
                        </vxe-colgroup>
                    </vxe-table>
                </el-collapse-item>
                <el-collapse-item title="三相电压不平衡评估结果" :name="3">
                    <vxe-table
                        :data="imbalance"
                        height="110px"
                        v-bind="defaultAttribute"
                        :cell-class-name="getCellClassName"
                        style="width: 100%"
                    >
                        <vxe-column title="估算方式" field="name" />
                        <vxe-column title="负序电压不平衡度(%)" field="name2" />
                        <vxe-column title="国标限值(%)" field="name3" />
                        <vxe-column title="判断">
                            <template #default="{ row }">
                                
                                <el-tag v-if="row.name2 > row.name3" type="warning">不合格</el-tag>
                                <el-tag v-else type="success">合格</el-tag>
                            </template>
                        </vxe-column>
                    </vxe-table>
                </el-collapse-item>
                <el-collapse-item title="谐波电压/电流评估结果" :name="4">
                    <div class="flickerWaves" style="height: 520px">
                        <vxe-table
                            :data="harmonicVoltage"
                            height="520px"
                            v-bind="defaultAttribute"
                            :cell-class-name="getCellClassName"
                            style="width: 50%"
                        >
                            <vxe-column title="谐波次数" field="name" />
                            <vxe-colgroup title="电容器谐波电流评估值(A)">
                                <vxe-column field="name1" title="未投入" min-width="160px" />
                                <vxe-column field="name2" title="已投入" min-width="160px" />
                            </vxe-colgroup>
                            <vxe-column title="国标限值(A)" field="name3" />
                            <vxe-column title="判断">
                                <template #default="{ row }">
                                    <!-- <span v-if="row.name2 == null"></span>
                                    <el-tag v-if="row.name2 > row.name3" type="warning">不合格</el-tag>
                                    <el-tag v-else type="success">合格</el-tag> -->
                                </template>
                            </vxe-column>
                        </vxe-table>
                        <vxe-table :data="harmonicCurrents" height="520px" v-bind="defaultAttribute" style="width: 50%">
                            <vxe-column title="谐波次数" field="name" />
                            <vxe-colgroup title="电容器谐波电压评估值(%)">
                                <vxe-column field="name1" title="未投入" min-width="160px" />
                                <vxe-column field="name2" title="已投入" min-width="160px" />
                            </vxe-colgroup>
                            <vxe-column title="国标限值(%)" field="name3" />
                            <vxe-column title="判断">
                                <template #default="{ row }">
                                    <span v-if="row.name2 == null"></span>
                                    <el-tag v-else-if="row.name2 > row.name3" type="warning">不合格</el-tag>

                                    <el-tag v-else type="success">合格</el-tag>
                                </template>
                            </vxe-column>
                        </vxe-table>
                    </div>
                </el-collapse-item>
            </el-collapse>
        </el-collapse>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { defaultAttribute } from '@/components/table/defaultAttribute'
const activeNames = ref([1, 2, 3, 4, 5, 6, 7])
// 波动
const undulation = ref([
    {
        name: '近似计算',
        name1: '1',
        name2: '6.94',
        name3: '3.00'
    },
    {
        name: '精确估算',
        name1: '1',
        name2: '6.94',
        name3: '3.00'
    }
])
// 闪变
const flicker = ref([
    {
        name1: '1',
        name2: '1.1',
        name3: '0.8'
    },
    {}
])
// 电压偏差
const voltageDeviation = ref([
    {
        name: '电网高峰负荷',
        name1: '100',
        name2: '2.14',
        name3: '107.65',
        name4: '10.00',
        name5: '-10.00',
        name6: '2.14',
        name7: '107.65',
        name8: '10.00',
        name9: '-10.00'
    },
    {
        name: '电网高峰负荷',
        name1: '100',
        name2: '2.14',
        name3: '107.65',
        name4: '10.00',
        name5: '-10.00',
        name6: '2.14',
        name7: '107.65',
        name8: '10.00',
        name9: '-10.00'
    },
    {
        name: '电网高峰负荷',
        name1: '100',
        name2: '2.14',
        name3: '107.65',
        name4: '10.00',
        name5: '-10.00',
        name6: '2.14',
        name7: '107.65',
        name8: '10.00',
        name9: '-10.00'
    },
    {
        name: '电网低谷负荷',
        name1: '100',
        name2: '2.14',
        name3: '107.65',
        name4: '10.00',
        name5: '-10.00',
        name6: '2.14',
        name7: '107.65',
        name8: '10.00',
        name9: '-10.00'
    },
    {
        name: '电网低谷负荷',
        name1: '100',
        name2: '2.14',
        name3: '107.65',
        name4: '10.00',
        name5: '-10.00',
        name6: '2.14',
        name7: '107.65',
        name8: '10.00',
        name9: '-10.00'
    },
    {
        name: '电网低谷负荷',
        name1: '100',
        name2: '2.14',
        name3: '107.65',
        name4: '10.00',
        name5: '-10.00',
        name6: '2.14',
        name7: '107.65',
        name8: '10.00',
        name9: '-10.00'
    }
])
// 三相电压
const imbalance = ref([
    {
        name: '近似计算',
        name2: '2.1',
        name3: '1.3'
    },
    {
        name: '精确估算',
        name2: '1.6',
        name3: '1.3'
    }
])
// 谐波电压
const harmonicVoltage:any = ref([])
// 谐波电流
const harmonicCurrents:any = ref([])
// 合并单元格
const mergeCells = ref([
    { row: 0, col: 0, rowspan: 3, colspan: 1 },
    { row: 3, col: 0, rowspan: 3, colspan: 1 }
])
// 添加单元格class
const getCellClassName = ({ row, columnIndex }) => {
    if (row.name2 > row.name3 && columnIndex == 2) {
        return 'custom-cell-bg' // 为 Alice 的单元格添加背景
    }
    return ''
}
onMounted(() => {
    for (let i = 2; i < 51; i++) {
        harmonicVoltage.value.push({
            name: i
            
        })
        harmonicCurrents.value.push({
            name: i
        })
    }
})
</script>
<style lang="scss" scoped>
:deep(.el-collapse-item__header) {
    padding-left: 20px;
    font-size: 16px !important;
    &::before {
        content: '' !important; /* 添加星号 */
  
  
    }
    
}
:deep(.el-descriptions__cell) {
    width: 12.5%;
}
:deep(.custom-cell-bg) {
    background-color: var(--el-color-warning-light-7);
}
.flickerWaves {
    // height: 120px;
    display: flex;
}
.textName {
    white-space: pre-line;

    font-weight: 600 !important;
}
</style>