admin-sjzx/src/views/LN/newEnergy/newEnergyAnalysis/components/detail.vue

<template>
    <el-dialog v-model="dialogVisible" :title="title" width="1200" draggable>
        <vxe-table v-bind="defaultAttribute" ref="vxeRef" height="500px" :data="tableData">
            <vxe-colgroup field="anotherName" title="指标" width="180" />
            <!-- <vxe-colgroup field="unit" title="单位" /> -->
            <vxe-colgroup title="最小值">
                <vxe-column field="minphaseA" title="A">
                    <template #default="{ row }">
                        <span :style="{ color: row.limit < row.minphaseA ? 'red' : '' }">
                            {{ row.minphaseA || '/' }}
                        </span>
                    </template>
                </vxe-column>
                <vxe-column field="minphaseB" title="B">
                    <template #default="{ row }">
                        <span :style="{ color: row.limit < row.minphaseB ? 'red' : '' }">
                            {{ row.minphaseB || '/' }}
                        </span>
                    </template>
                </vxe-column>
                <vxe-column field="minphaseC" title="C">
                    <template #default="{ row }">
                        <span :style="{ color: row.limit < row.minphaseC ? 'red' : '' }">
                            {{ row.minphaseC || '/' }}
                        </span>
                    </template>
                </vxe-column>
            </vxe-colgroup>
            <vxe-colgroup title="最大值">
                <vxe-column field="maxphaseA" title="A">
                    <template #default="{ row }">
                        <span :style="{ color: row.limit < row.maxphaseA ? 'red' : '' }">
                            {{ row.maxphaseA || '/' }}
                        </span>
                    </template>
                </vxe-column>
                <vxe-column field="maxphaseB" title="B">
                    <template #default="{ row }">
                        <span :style="{ color: row.limit < row.maxphaseB ? 'red' : '' }">
                            {{ row.maxphaseB || '/' }}
                        </span>
                    </template>
                </vxe-column>
                <vxe-column field="maxphaseC" title="C">
                    <template #default="{ row }">
                        <span :style="{ color: row.limit < row.maxphaseC ? 'red' : '' }">
                            {{ row.maxphaseC || '/' }}
                        </span>
                    </template>
                </vxe-column>
            </vxe-colgroup>
            <vxe-colgroup title="平均值">
                <vxe-column field="avgphaseA" title="A">
                    <template #default="{ row }">
                        <span :style="{ color: row.limit < row.avgphaseA ? 'red' : '' }">
                            {{ row.avgphaseA || '/' }}
                        </span>
                    </template>
                </vxe-column>
                <vxe-column field="avgphaseB" title="B">
                    <template #default="{ row }">
                        <span :style="{ color: row.limit < row.avgphaseB ? 'red' : '' }">
                            {{ row.avgphaseB || '/' }}
                        </span>
                    </template>
                </vxe-column>
                <vxe-column field="avgphaseC" title="C">
                    <template #default="{ row }">
                        <span :style="{ color: row.limit < row.avgphaseC ? 'red' : '' }">
                            {{ row.avgphaseC || '/' }}
                        </span>
                    </template>
                </vxe-column>
            </vxe-colgroup>
            <vxe-colgroup title="cp95值">
                <vxe-column field="cp95PhaseA" title="A">
                    <template #default="{ row }">
                        <span :style="{ color: row.limit < row.cp95PhaseA ? 'red' : '' }">
                            {{ row.cp95PhaseA || '/' }}
                        </span>
                    </template>
                </vxe-column>
                <vxe-column field="cp95PhaseB" title="B">
                    <template #default="{ row }">
                        <span :style="{ color: row.limit < row.cp95PhaseB ? 'red' : '' }">
                            {{ row.cp95PhaseB || '/' }}
                        </span>
                    </template>
                </vxe-column>
                <vxe-column field="cp95PhaseC" title="C">
                    <template #default="{ row }">
                        <span :style="{ color: row.limit < row.cp95PhaseC ? 'red' : '' }">
                            {{ row.cp95PhaseC || '/' }}
                        </span>
                    </template>
                </vxe-column>
            </vxe-colgroup>

            <vxe-column field="limit" title="国标限值" />
        </vxe-table>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { defaultAttribute } from '@/components/table/defaultAttribute'
const dialogVisible = ref(false)
const title = ref('')
const tableData: any = ref([])
const open = (row: any) => {
    title.value = row.title + ' - ' + row.row.time + ' - 越限详情'
    tableData.value = row.row[row.key]
    dialogVisible.value = true
}
defineExpose({ open })
</script>
<style lang="scss" scoped></style>