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

<template>
    <el-dialog v-model="Views" 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" :loading="loading" :data="photovoltaicData" :span-method="mergeRowMethod">
            <vxe-colgroup field="group0" title="等级" align="right">
                <vxe-column field="name" width="180" title="结果"></vxe-column>
            </vxe-colgroup>
            <vxe-column field="comparisonOperators1" title="安全(个)">
                <template #default="row">
                    <div @click="cells(row, row.row.comparisonOperators1, row.row.count1)">
                        {{ row.row.comparisonOperators1
                        }}{{ row.row.comparisonOperators1 == '/' ? '' : row.row.count1 }}
                    </div>
                </template>
            </vxe-column>
            <vxe-column field="comparisonOperators2" title="III级预警(个)">
                <template #default="row">
                    <div @click="cells(row, row.row.comparisonOperators2, row.row.count2)">
                        {{ row.row.comparisonOperators2
                        }}{{ row.row.comparisonOperators2 == '/' ? '' : row.row.count2 }}
                    </div>
                </template>
            </vxe-column>
            <vxe-column field="comparisonOperators3" title="II级预警(个)">
                <template #default="row">
                    <div @click="cells(row, row.row.comparisonOperators3, row.row.count3)">
                        {{ row.row.comparisonOperators3
                        }}{{ row.row.comparisonOperators3 == '/' ? '' : row.row.count3 }}
                    </div>
                </template>
            </vxe-column>
            <vxe-column field="comparisonOperators4" title="I级预警(个)">
                <template #default="row">
                    <div @click="cells(row, row.row.comparisonOperators4, row.row.count4)">
                        {{ row.row.comparisonOperators4
                        }}{{ row.row.comparisonOperators4 == '/' ? '' : row.row.count4 }}
                    </div>
                </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 v-model="dialogVisible" title="安全等级配置" width="500">
            <el-form :model="form" label-width="auto">
                <el-form-item label="运算符号：">
                    <el-radio-group v-model="form.comparisonOperators" @change="groupChang">
                        <el-radio :label="'>'">></el-radio>
                        <el-radio :label="'<'">&lt;</el-radio>
                        <el-radio :label="'>='">>=</el-radio>
                        <el-radio :label="'<='">&lt;=</el-radio>
                        <el-radio :label="'=='">==</el-radio>
                        <el-radio :label="'/'">/</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="用户名称：">
                    <el-input-number v-model="form.count" :disabled="disabled" :min="0" style="width: 100%" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="add">确定</el-button>
                </div>
            </template>
        </el-dialog>
    </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'
import { VxeTablePropTypes } from 'vxe-table'
defineOptions({
    name: 'Advancedanalysis/eventcorrelation'
})
const emit = defineEmits(['View'])

const Views = 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: any = ref({
    comparisonOperators: '',
    count: ''
})
const dialogVisible = ref(false)
const disabled = ref(false)
const info = () => {
    queyDetail().then(res => {
        photovoltaicData.value = []
        let title = ['安全', 'III级预警', 'II级预警', 'I级预警']
        let p = 0
        res.data.forEach((item: any, i: any) => {
            item.capacityStrategysingleVOList.forEach((item1: any, i1: any) => {
                photovoltaicData.value.push({
                    name: title[i],
                    id: item1.id,
                    result: item.result
                })
                p++
                item1.carryCapacityStrategyIndexVOList.forEach((item2: any) => {
                    photovoltaicData.value[p - 1]['comparisonOperators' + item2.indexResult] = item2.comparisonOperators
                    photovoltaicData.value[p - 1]['count' + item2.indexResult] = item2.count
                })
            })
        })
        console.log('🚀 ~ queyDetail ~ photovoltaicData.value:', photovoltaicData.value)
    })
}

// <span @click="cells(row,comparisonOperators2,count2)">
const cells = (row: any, comparisonOperators: any, count: any) => {
    form.value = {
        comparisonOperators: comparisonOperators,
        count: count,
        result: row.row.result,
        id: row.row.id,
        indexResult: row.columnIndex
    }

    groupChang(comparisonOperators)
    dialogVisible.value = true
}
// 运算符变化
const groupChang = e => {
    if (e == '/') {
        form.value.count = 0
        disabled.value = true
    } else {
        disabled.value = false
    }
}
// 安全等级配置确认
const add = () => {
    addCarryc(form.value).then(res => {
        ElMessage.success('修改成功!')
        dialogVisible.value = false
        info()
    })
}
// 还原
const restores = () => {
    restore().then(res => {
        ElMessage.success('还原成功!')
        info()
    })
}
// 通用行合并函数（将相同多列数据合并为一行）
const mergeRowMethod: VxeTablePropTypes.SpanMethod = ({ row, _rowIndex, column, visibleData }) => {
    const fields = ['name']
    const cellValue = row[column.field]
    if (cellValue && fields.includes(column.field)) {
        const prevRow = visibleData[_rowIndex - 1]
        let nextRow = visibleData[_rowIndex + 1]
        if (prevRow && prevRow[column.field] === cellValue) {
            return { rowspan: 0, colspan: 0 }
        } else {
            let countRowspan = 1
            while (nextRow && nextRow[column.field] === cellValue) {
                nextRow = visibleData[++countRowspan + _rowIndex]
            }
            if (countRowspan > 1) {
                return { rowspan: countRowspan, colspan: 1 }
            }
        }
    }
}
onMounted(() => {
    info()
})
// 取消
const handleClose = () => {
    emit('View')
}
</script>

<style lang="scss" scoped>
:deep(.vxe-table--header thead tr:first-of-type th:first-of-type) {
    background: #f8f8f9;
}
: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;
}
: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>