259 lines
9.3 KiB
Vue
259 lines
9.3 KiB
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="'<'"><</el-radio>
|
||
<el-radio :label="'>='">>=</el-radio>
|
||
<el-radio :label="'<='"><=</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>
|