347 lines
13 KiB
Vue
347 lines
13 KiB
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>
|