admin-sjzx/src/views/pqs/bearingCapacity/evaluationList/components/policy.vue

<template>
    <el-dialog v-model="policyView" title="承载能力评估策略" width="1400" :before-close="handleClose">
        <div style="display: flex; justify-content: end">
            <el-button icon="el-icon-Refresh" type="primary" @click="restores">一键还原</el-button>
        </div>
        <el-divider content-position="left">光伏电站承载能力评估策略</el-divider>
        <vxe-table
            v-bind="defaultAttribute"
            ref="xTable"
            :loading="loading"
            :data="photovoltaicData"
            :column-config="{ resizable: true }"
            :mouse-config="{ area: true, extension: false }"
        >
            <vxe-colgroup field="group0" title="等级" align="right">
                <vxe-column field="name" width="180" title="结果"></vxe-column>
            </vxe-colgroup>
            <vxe-column field="count1" title="安全(个)">
                <template #default="{ row }">
                    {{ row.comparisonOperators1 }}{{ row.comparisonOperators1 == '/' ? '' : row.count1 }}
                </template>
            </vxe-column>
            <vxe-column field="count2" title="III级预警(个)">
                <template #default="{ row }">
                    {{ row.comparisonOperators2 }}{{ row.comparisonOperators2 == '/' ? '' : row.count2 }}
                </template>
            </vxe-column>
            <vxe-column field="count3" title="II级预警(个)">
                <template #default="{ row }">
                    {{ row.comparisonOperators3 }}{{ row.comparisonOperators3 == '/' ? '' : row.count3 }}
                </template>
            </vxe-column>
            <vxe-column field="count4" title="I级预警(个)">
                <template #default="{ row }">
                    {{ row.comparisonOperators4 }}{{ row.comparisonOperators4 == '/' ? '' : row.count4 }}
                </template>
            </vxe-column>
        </vxe-table>
        <el-divider content-position="left">充电站、电加热负荷、电气化铁路承载能力评估</el-divider>
        <vxe-table v-bind="defaultAttribute" ref="xTable" :loading="loading" :data="tableData">
            <vxe-colgroup field="group0" title="等级" align="right">
                <vxe-column field="name" width="180" title="结果"></vxe-column>
            </vxe-colgroup>

            <vxe-column field="role" title="THD(%)"></vxe-column>

            <vxe-column field="num6" title="2~25次谐波合格个数"></vxe-column>
            <vxe-column field="date12" title="畸次谐波合格个数"></vxe-column>
            <vxe-column field="date13" title="偶次谐波合格个数"></vxe-column>
        </vxe-table>
    </el-dialog>
</template>
<script setup lang="ts">
import { ref, onMounted, provide, reactive } from 'vue'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import { mainHeight } from '@/utils/layout'
import { queyDetail, addCarryc, restore } from '@/api/advance-boot/bearingCapacity'
import { ElMessage, ElMessageBox } from 'element-plus'
defineOptions({
    name: 'Advancedanalysis/eventcorrelation'
})
const emit = defineEmits(['View'])
const view = ref(false)
const policyView = ref(true)

const xTable = ref()
const loading = ref(false)
const photovoltaicData: any = ref([])
const tableData = ref([
    {
        id: 10001,
        name: '安全',
        role: '0',
        num6: '0',
        date12: '0',
        date13: '0'
    },
    {
        id: 10002,
        name: 'III级预警',
        role: '0',
        num6: '0',
        date12: '0',
        date13: '0'
    },
    {
        id: 10003,
        name: 'II级预警',
        role: 'Test',
        date12: '0',
        num6: '0',
        date13: '0'
    },
    {
        id: 10004,
        name: 'I级预警',
        role: '0',
        date12: '0',
        num6: '0',
        date13: '0'
    }
])
const form = ref({
    id: '',
    name: '',
    role: '',
    num6: '',
    date12: '',
    date13: ''
})

queyDetail().then(res => {
    photovoltaicData.value = []
    let title = ['安全', 'III级预警', 'II级预警', 'I级预警']
    // photovoltaicData.value = res.data
    for (let i: number = 1; i < 5; i++) {
        photovoltaicData.value.push({ ...setData(res.data.filter(item => item.indexResult == i)), name: title[i - 1] })
    }
    console.log('🚀 ~ queyDetail ~ res.data.filter(item=>item.indexResult==1):', photovoltaicData.value)
})

const setData = (row: any) => {
    let data = {}
    row.forEach((item: any) => {
        data[`comparisonOperators${item.result}`] = item.comparisonOperators
        data[`count${item.result}`] = item.count
    })
    return data
}

// 还原
const restores = () => {
    restore().then(res => {
        ElMessage.success('还原成功!')
    })
}

// 取消
const handleClose = () => {
    emit('View')
}
</script>

<style lang="scss" scoped>
::v-deep .vxe-table--header thead tr:first-of-type th:first-of-type {
    background: #f8f8f9;
}
::v-deep .vxe-table--header thead tr:first-of-type th:first-of-type:before {
    content: '';
    position: absolute;
    width: 1px;
    height: 98px; /*这里需要自己调整，根据td的宽度和高度*/
    top: 0;
    left: 0;
    background-color: grey;
    opacity: 0.3;
    display: block;
    transform: rotate(-66deg); /*这里需要自己调整，根据线的位置*/
    transform-origin: top;
}
::v-deep .vxe-table--header thead tr:last-of-type th:first-of-type:before {
    content: '';
    position: absolute;
    width: 1px;
    height: 98px; /*这里需要自己调整，根据td的宽度和高度*/
    bottom: 0;
    right: 0;
    background-color: grey;
    opacity: 0.3;
    display: block;
    transform: rotate(-66deg); /*这里需要自己调整，根据线的位置*/
    transform-origin: bottom;
}
</style>