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" v-loading="loading">
            <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:
                                    anotherName == '电压偏差(%)'
                                        ? tableData[0].limit < row.minphaseA || tableData[1].limit > row.minphaseA
                                            ? 'red'
                                            : ''
                                        : row.limit < row.minphaseA
                                        ? 'red'
                                        : ''
                            }"
                        >
                            {{ row.minphaseA || '/' }}
                        </span>
                    </template>
                </vxe-column>
                <vxe-column field="minphaseB" title="B">
                    <template #default="{ row }">
                        <span
                            :style="{
                                color:
                                    anotherName == '电压偏差(%)'
                                        ? tableData[0].limit < row.minphaseB || tableData[1].limit > row.minphaseB
                                            ? 'red'
                                            : ''
                                        : row.limit < row.minphaseB
                                        ? 'red'
                                        : ''
                            }"
                        >
                            {{ row.minphaseB || '/' }}
                        </span>
                    </template>
                </vxe-column>
                <vxe-column field="minphaseC" title="C">
                    <template #default="{ row }">
                        <span
                            :style="{
                                color:
                                    anotherName == '电压偏差(%)'
                                        ? tableData[0].limit < row.minphaseC || tableData[1].limit > row.minphaseC
                                            ? 'red'
                                            : ''
                                        : 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:
                                    anotherName == '电压偏差(%)'
                                        ? tableData[0].limit < row.maxphaseA || tableData[1].limit > row.maxphaseA
                                            ? 'red'
                                            : ''
                                        : row.limit < row.maxphaseA
                                        ? 'red'
                                        : ''
                            }"
                        >
                            {{ row.maxphaseA || '/' }}
                        </span>
                    </template>
                </vxe-column>
                <vxe-column field="maxphaseB" title="B">
                    <template #default="{ row }">
                        <span
                            :style="{
                                color:
                                    anotherName == '电压偏差(%)'
                                        ? tableData[0].limit < row.maxphaseB || tableData[1].limit > row.maxphaseB
                                            ? 'red'
                                            : ''
                                        : row.limit < row.maxphaseB
                                        ? 'red'
                                        : ''
                            }"
                        >
                            {{ row.maxphaseB || '/' }}
                        </span>
                    </template>
                </vxe-column>
                <vxe-column field="maxphaseC" title="C">
                    <template #default="{ row }">
                        <span
                            :style="{
                                color:
                                    anotherName == '电压偏差(%)'
                                        ? tableData[0].limit < row.maxphaseC || tableData[1].limit > row.maxphaseC
                                            ? 'red'
                                            : ''
                                        : 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:
                                    anotherName == '电压偏差(%)'
                                        ? tableData[0].limit < row.avgphaseA || tableData[1].limit > row.avgphaseA
                                            ? 'red'
                                            : ''
                                        : row.limit < row.avgphaseA
                                        ? 'red'
                                        : ''
                            }"
                        >
                            {{ row.avgphaseA || '/' }}
                        </span>
                    </template>
                </vxe-column>
                <vxe-column field="avgphaseB" title="B">
                    <template #default="{ row }">
                        <span
                            :style="{
                                color:
                                    anotherName == '电压偏差(%)'
                                        ? tableData[0].limit < row.avgphaseB || tableData[1].limit > row.avgphaseB
                                            ? 'red'
                                            : ''
                                        : row.limit < row.avgphaseB
                                        ? 'red'
                                        : ''
                            }"
                        >
                            {{ row.avgphaseB || '/' }}
                        </span>
                    </template>
                </vxe-column>
                <vxe-column field="avgphaseC" title="C">
                    <template #default="{ row }">
                        <span
                            :style="{
                                color:
                                    anotherName == '电压偏差(%)'
                                        ? tableData[0].limit < row.avgphaseC || tableData[1].limit > row.avgphaseC
                                            ? 'red'
                                            : ''
                                        : 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:
                                    anotherName == '电压偏差(%)'
                                        ? tableData[0].limit < row.cp95PhaseA || tableData[1].limit > row.cp95PhaseA
                                            ? 'red'
                                            : ''
                                        : row.limit < row.cp95PhaseA
                                        ? 'red'
                                        : ''
                            }"
                        >
                            {{ row.cp95PhaseA || '/' }}
                        </span>
                    </template>
                </vxe-column>
                <vxe-column field="cp95PhaseB" title="B">
                    <template #default="{ row }">
                        <span
                            :style="{
                                color:
                                    anotherName == '电压偏差(%)'
                                        ? tableData[0].limit < row.cp95PhaseB || tableData[1].limit > row.cp95PhaseB
                                            ? 'red'
                                            : ''
                                        : row.limit < row.cp95PhaseB
                                        ? 'red'
                                        : ''
                            }"
                        >
                            {{ row.cp95PhaseB || '/' }}
                        </span>
                    </template>
                </vxe-column>
                <vxe-column field="cp95PhaseC" title="C">
                    <template #default="{ row }">
                        <span
                            :style="{
                                color:
                                    anotherName == '电压偏差(%)'
                                        ? tableData[0].limit < row.cp95PhaseC || tableData[1].limit > row.cp95PhaseC
                                            ? 'red'
                                            : ''
                                        : 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'
import { getTargetByTime } from '@/api/harmonic-boot/pollution'
const dialogVisible = ref(false)
const title = ref('')
const anotherName = ref('')
const loading = ref(false)
const tableData: any = ref([])
const open = (row: any) => {
    title.value = row.title + ' - ' + row.row.time + ' - 越限详情'
    anotherName.value = row.title
    loading.value = true
    getTargetByTime({
        field: row.field,
        lineId: row.lineId,
        searchBeginTime: row.row.time,
        searchEndTime: row.row.time,
        statisticalId: row.key == '2' ? 2 : row.key == '3' ? 3 : row.key == '4' ? 4 : 1,
        code: row.key == '2' ? '' : row.key == '3' ? '' : row.key == '4' ? '' : row.key //row.key
    }).then((res: any) => {
        tableData.value = res.data
        loading.value = false
    })
    dialogVisible.value = true
}
defineExpose({ open })
</script>
<style lang="scss" scoped></style>