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

<template>
    <el-dialog v-model="Views" draggable title="评估策略配置" width="1000" :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="等级">
                <vxe-column field="name" width="180" title="结果"></vxe-column>
            </vxe-colgroup>
            <vxe-column field="comparisonOperators1" title="安全(个)">
                <template #default="row">
                    <div class="cellBox" @click="cells(row, row.row.comparisonOperators1, row.row.count1, 0)">
                        {{ symbolJudgment(row.row.comparisonOperators1)
                        }}{{ row.row.comparisonOperators1 == '/' ? '' : row.row.count1 }}
                    </div>
                </template>
            </vxe-column>
            <vxe-column field="comparisonOperators2" title="III级预警(个)">
                <template #default="row">
                    <div class="cellBox" @click="cells(row, row.row.comparisonOperators2, row.row.count2, 0)">
                        {{ symbolJudgment(row.row.comparisonOperators2)
                        }}{{ row.row.comparisonOperators2 == '/' ? '' : row.row.count2 }}
                    </div>
                </template>
            </vxe-column>
            <vxe-column field="comparisonOperators3" title="II级预警(个)">
                <template #default="row">
                    <div class="cellBox" @click="cells(row, row.row.comparisonOperators3, row.row.count3, 0)">
                        {{ symbolJudgment(row.row.comparisonOperators3)
                        }}{{ row.row.comparisonOperators3 == '/' ? '' : row.row.count3 }}
                    </div>
                </template>
            </vxe-column>
            <vxe-column field="comparisonOperators4" title="I级预警(个)">
                <template #default="row">
                    <div class="cellBox" @click="cells(row, row.row.comparisonOperators4, row.row.count4, 0)">
                        {{ symbolJudgment(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="等级">
                <vxe-column field="name" width="180" title="结果"></vxe-column>
            </vxe-colgroup>

            <vxe-column field="comparisonOperators1" title="THD(%)">
                <template #default="row">
                    <div class="cellBox" @click="cells(row, row.row.comparisonOperators1, row.row.count1, 1)">
                        {{ symbolJudgment(row.row.comparisonOperators1)
                        }}{{ row.row.comparisonOperators1 == '/' ? '' : row.row.count1 }}
                    </div>
                </template>
            </vxe-column>

            <vxe-column field="comparisonOperators2" title="2~25次谐波合格个数">
                <template #default="row">
                    <div class="cellBox" @click="cells(row, row.row.comparisonOperators2, row.row.count2, 2)">
                        {{ symbolJudgment(row.row.comparisonOperators2)
                        }}{{ row.row.comparisonOperators2 == '/' ? '' : row.row.count2 }}
                    </div>
                </template>
            </vxe-column>
            <vxe-column field="comparisonOperators3" title="奇次谐波合格个数">
                <template #default="row">
                    <div class="cellBox" @click="cells(row, row.row.comparisonOperators3, row.row.count3, 3)">
                        {{ symbolJudgment(row.row.comparisonOperators3)
                        }}{{ row.row.comparisonOperators3 == '/' ? '' : row.row.count3 }}
                    </div>
                </template>
            </vxe-column>
            <vxe-column field="comparisonOperators4" title="偶次谐波合格个数">
                <template #default="row">
                    <div class="cellBox" @click="cells(row, row.row.comparisonOperators4, row.row.count4, 4)">
                        {{ symbolJudgment(row.row.comparisonOperators4)
                        }}{{ row.row.comparisonOperators4 == '/' ? '' : row.row.count4 }}
                    </div>
                </template>
            </vxe-column>
        </vxe-table>
        <!-- 修改 -->

        <el-dialog class="dialogBox" draggable 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 v-for="item in sign" :label="item.name">{{ item.name }}</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="数量：">
                    <el-input-number
                        v-model="form.count"
                        :disabled="disabled"
                        :min="0"
                        :precision="0"
                        :max="10000000"
                        style="width: 200px"
                    />
                </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, queyDetailDhl, adddhl } 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 sum = ref(0)
const tableData: any = ref([])
const list: any = ref({})
const form: any = ref({
    comparisonOperators: '',
    count: ''
})
const sign = ref([
    {
        name: '>'
    },
    {
        name: '<'
    },
    {
        name: '>='
    },
    {
        name: '<='
    },
    {
        name: '=='
    },
    {
        name: '/'
    }
])
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)
    })
    // 电弧炉
    queyDetailDhl().then(res => {
        tableData.value = res.data
        tableData.value[0].name = '电弧炉'
        tableData.value[1].name = '充电桩'
        tableData.value[2].name = '电气化铁路'
    })
}

// <span @click="cells(row,comparisonOperators2,count2)">
const cells = (row: any, comparisonOperators: any, count: any, num: number) => {
    form.value = {
        comparisonOperators: comparisonOperators,
        count: count,
        result: row.row.result,
        id: row.row.id,
        indexResult: row.columnIndex
    }
    sum.value = num
    if (num != 0) {
        list.value = JSON.parse(JSON.stringify(row.row))
    }

    groupChang(comparisonOperators)
    dialogVisible.value = true
}
// 运算符变化
const groupChang = e => {
    if (e == '/') {
        form.value.count = 0
        disabled.value = true
    } else {
        disabled.value = false
    }
}
// 安全等级配置确认
const add = () => {
    if (sum.value == 0) {
        addCarryc(form.value).then(res => {
            ElMessage.success('修改成功!')
            dialogVisible.value = false
            info()
        })
    } else {
        // sum.value = num
        // list.value = row
        list.value['comparisonOperators' + sum.value] = form.value.comparisonOperators
        list.value['count' + sum.value] = form.value.count
        list.value.userFlag = 0
        list.value.protoFlag = 0
        adddhl(list.value).then(res => {
            ElMessage.success('修改成功!')
            dialogVisible.value = false
            info()
        })
    }
}
// 还原
const restores = () => {
    restore().then(res => {
        ElMessage.success('还原成功!')
        info()
    })
}
// 通用行合并函数（将相同多列数据合并为一行）
const mergeRowMethod = ({ 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 }
            }
        }
    }
}
const symbolJudgment = (value: string) => {
    if (value == '==') {
        return '='
    } else {
        return value
    }
}
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: var(--vxe-table-header-background-color);
    background-image: linear-gradient(var(--vxe-table-border-color), var(--vxe-table-border-color)),
        linear-gradient(#e8eaec00, #e8eaec00);
}
: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;
}
.cellBox {
    cursor: pointer;
    color: var(--el-color-primary);
    font-weight: 600;
    text-decoration: underline;
}
</style>
<style lang="scss">
.el-dialog__body {
    max-height: none !important;
}
.dialogBox {
    margin-top: calc(15vh + 200px) !important;
}
/* 确保对话框在页面居中 */
// .el-dialog {
//     display: flex;
//     flex-direction: column;
//     margin: 0 !important;
//     position: absolute;
//     top: 50%;
//     left: 50%;
//     transform: translate(-50%, -50%);
//     max-height: calc(100% - 30px);
//     max-width: calc(100% - 30px);
// }

// /* 确保遮罩层全屏显示 */
// .el-dialog__wrapper {
//     display: flex;
//     align-items: center;
//     justify-content: center;
// }
</style>