232 lines
7.9 KiB
Vue
232 lines
7.9 KiB
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" >一键还原</el-button>
|
|||
|
|
</div>
|
|||
|
|
<el-divider content-position="left">光伏电站承载能力评估策略</el-divider>
|
|||
|
|
<vxe-table
|
|||
|
|
v-bind="defaultAttribute"
|
|||
|
|
ref="xTable"
|
|||
|
|
:column-config="{ resizable: true }"
|
|||
|
|
:loading="loading"
|
|||
|
|
:data="tableData"
|
|||
|
|
:edit-config="{ trigger: 'manual', mode: 'row', autoClear: false, showIcon: false }"
|
|||
|
|
>
|
|||
|
|
<vxe-colgroup field="group0" title="等级" align="right">
|
|||
|
|
<vxe-column field="name" width="180" title="结果" :edit-render="{}">
|
|||
|
|
<template #edit="{ row }">
|
|||
|
|
<vxe-input v-model="form.name" type="text"></vxe-input>
|
|||
|
|
</template>
|
|||
|
|
</vxe-column>
|
|||
|
|
</vxe-colgroup>
|
|||
|
|
|
|||
|
|
<vxe-column field="role" title="安全(个)" :edit-render="{}">
|
|||
|
|
<template #edit="{ row }">
|
|||
|
|
<vxe-input v-model="form.role" type="text" placeholder="请输入昵称"></vxe-input>
|
|||
|
|
</template>
|
|||
|
|
</vxe-column>
|
|||
|
|
|
|||
|
|
<vxe-column field="num6" title="III级预警(个)" :edit-render="{}">
|
|||
|
|
<template #edit="{ row }">
|
|||
|
|
<vxe-input v-model="form.num6" type="text"></vxe-input>
|
|||
|
|
</template>
|
|||
|
|
</vxe-column>
|
|||
|
|
<vxe-column field="date12" title="II级预警(个)" :edit-render="{}">
|
|||
|
|
<template #edit="{ row }">
|
|||
|
|
<vxe-input v-model="form.date12" type="text"></vxe-input>
|
|||
|
|
</template>
|
|||
|
|
</vxe-column>
|
|||
|
|
<vxe-column field="date13" title="I级预警(个)" :edit-render="{}">
|
|||
|
|
<template #edit="{ row }">
|
|||
|
|
<vxe-input v-model="form.date13" type="text"></vxe-input>
|
|||
|
|
</template>
|
|||
|
|
</vxe-column>
|
|||
|
|
|
|||
|
|
<vxe-column title="操作" width="160">
|
|||
|
|
<template #default="{ row }">
|
|||
|
|
<template v-if="isActiveStatus(row)">
|
|||
|
|
<el-button type="primary" size="small" @click="saveRowEvent(row)" link>保存</el-button>
|
|||
|
|
<el-button type="primary" size="small" @click="cancelRowEvent(row)" link>取消</el-button>
|
|||
|
|
</template>
|
|||
|
|
<template v-else>
|
|||
|
|
<el-button size="small" @click="editRowEvent(row)" link>编辑</el-button>
|
|||
|
|
</template>
|
|||
|
|
</template>
|
|||
|
|
</vxe-column>
|
|||
|
|
</vxe-table>
|
|||
|
|
<el-divider content-position="left">充电站、电加热负荷、电气化铁路承载能力评估</el-divider>
|
|||
|
|
<vxe-table
|
|||
|
|
v-bind="defaultAttribute"
|
|||
|
|
ref="xTable"
|
|||
|
|
:column-config="{ resizable: true }"
|
|||
|
|
:loading="loading"
|
|||
|
|
:data="tableData"
|
|||
|
|
:edit-config="{ trigger: 'manual', mode: 'row', autoClear: false, showIcon: false }"
|
|||
|
|
>
|
|||
|
|
<vxe-colgroup field="group0" title="等级" align="right">
|
|||
|
|
<vxe-column field="name" width="180" title="结果" :edit-render="{}">
|
|||
|
|
<template #edit="{ row }">
|
|||
|
|
<vxe-input v-model="form.name" type="text"></vxe-input>
|
|||
|
|
</template>
|
|||
|
|
</vxe-column>
|
|||
|
|
</vxe-colgroup>
|
|||
|
|
|
|||
|
|
<vxe-column field="role" title="THD(%)" :edit-render="{}">
|
|||
|
|
<template #edit="{ row }">
|
|||
|
|
<vxe-input v-model="form.role" type="text" placeholder="请输入昵称"></vxe-input>
|
|||
|
|
</template>
|
|||
|
|
</vxe-column>
|
|||
|
|
|
|||
|
|
<vxe-column field="num6" title="2~25次谐波合格个数" :edit-render="{}">
|
|||
|
|
<template #edit="{ row }">
|
|||
|
|
<vxe-input v-model="form.num6" type="text"></vxe-input>
|
|||
|
|
</template>
|
|||
|
|
</vxe-column>
|
|||
|
|
<vxe-column field="date12" title="畸次谐波合格个数" :edit-render="{}">
|
|||
|
|
<template #edit="{ row }">
|
|||
|
|
<vxe-input v-model="form.date12" type="text"></vxe-input>
|
|||
|
|
</template>
|
|||
|
|
</vxe-column>
|
|||
|
|
<vxe-column field="date13" title="偶次谐波合格个数" :edit-render="{}">
|
|||
|
|
<template #edit="{ row }">
|
|||
|
|
<vxe-input v-model="form.date13" type="text"></vxe-input>
|
|||
|
|
</template>
|
|||
|
|
</vxe-column>
|
|||
|
|
|
|||
|
|
<vxe-column title="操作" width="160">
|
|||
|
|
<template #default="{ row }">
|
|||
|
|
<template v-if="isActiveStatus(row)">
|
|||
|
|
<el-button type="primary" size="small" @click="saveRowEvent(row)" link>保存</el-button>
|
|||
|
|
<el-button type="primary" size="small" @click="cancelRowEvent(row)" link>取消</el-button>
|
|||
|
|
</template>
|
|||
|
|
<template v-else>
|
|||
|
|
<el-button size="small" @click="editRowEvent(row)" link>编辑</el-button>
|
|||
|
|
</template>
|
|||
|
|
</template>
|
|||
|
|
</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 { json } from 'stream/consumers'
|
|||
|
|
defineOptions({
|
|||
|
|
name: 'Advancedanalysis/eventcorrelation'
|
|||
|
|
})
|
|||
|
|
const emit = defineEmits(['View'])
|
|||
|
|
const view = ref(false)
|
|||
|
|
const policyView = ref(true)
|
|||
|
|
|
|||
|
|
const xTable = ref()
|
|||
|
|
const loading = ref(false)
|
|||
|
|
|
|||
|
|
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: ''
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const isActiveStatus = row => {
|
|||
|
|
return xTable.value.isEditByRow(row)
|
|||
|
|
}
|
|||
|
|
// 编辑配置
|
|||
|
|
const editRowEvent = row => {
|
|||
|
|
form.value = JSON.parse(JSON.stringify(row))
|
|||
|
|
xTable.value.setEditRow(row)
|
|||
|
|
}
|
|||
|
|
// 保存配置
|
|||
|
|
const saveRowEvent = row => {
|
|||
|
|
xTable.value.clearEdit().then(() => {
|
|||
|
|
loading.value = true
|
|||
|
|
setTimeout(() => {
|
|||
|
|
loading.value = false
|
|||
|
|
console.log('🚀 ~ saveRowEvent ~ row:', form.value)
|
|||
|
|
}, 300)
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
// 取消配置
|
|||
|
|
const cancelRowEvent = row => {
|
|||
|
|
xTable.value.clearEdit().then(() => {
|
|||
|
|
// 还原行数据
|
|||
|
|
xTable.value.revertData(row)
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 取消
|
|||
|
|
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>
|