Web/admin-sjzx
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

承载能力评估页面 绘制 79%

Browse Source
This commit is contained in:
GGJ
2024-03-04 20:33:32 +08:00
parent cf70adb959
commit 4b30fc8a01
15 changed files with 950 additions and 252 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/views/pqs/bearingCapacity/evaluationList/added.vue Normal file
View File

@@ -0,0 +1,11 @@
<template>
<el-tabs v-model="activeName" type="border-card">
<el-tab-pane label="光伏电站承载能力评估" name="1">User</el-tab-pane>
<el-tab-pane label="充电站、电加热负荷、电气化铁路承载能力评估" name="2">Config</el-tab-pane>
</el-tabs>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
const activeName = ref('1')
</script>
<style lang="scss" scoped></style>

201
src/views/pqs/bearingCapacity/evaluationList/index.vue Normal file
View File

@@ -0,0 +1,201 @@
<template>
<div class="default-main">
<div v-show="addedShow">
<TableHeader datePicker ref="TableHeaderRef">
<template #select>
<el-form-item label="用户类型">
<el-input
v-model="tableStore.table.params.searchValue"
clearable
placeholder="输入关键字筛选"
/>
</el-form-item>
</template>
<template #operation>
<el-button icon="el-icon-Setting" type="primary" @click="configuration">承载能力评估策略</el-button>
<el-button icon="el-icon-Plus" type="primary" @click="addedShow = false">
新增承载能力评估
</el-button>
</template>
</TableHeader>
<Table ref="tableRef" />
<el-dialog v-model="view" :title="title" width="600" :before-close="handleClose">
<el-form ref="ruleFormRef" :model="form" label-width="auto" :disabled="disabled" :rules="rules">
<el-form-item label="用户名称：" prop="name">
<el-input v-model="form.name" clearable placeholder="请输入用户名称" />
</el-form-item>
<el-form-item label="用户类型：" prop="userType">
<el-select v-model="form.userType" clearable collapse-tagsplaceholder="请选择用户类型">
<el-option v-for="item in uesrList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="电压等级：" prop="level">
<el-select v-model="form.level" clearable collapse-tags placeholder="请选择电压等级">
<el-option v-for="item in levelList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="用户协议容量(MVA)：" prop="mav1">
<el-input v-model="form.mav1" clearable placeholder="请输入用户协议容量" />
</el-form-item>
<el-form-item label="拟接入容量(MVA)：" prop="mav2">
<el-input v-model="form.mav2" clearable placeholder="请输入拟接入容量" />
</el-form-item>
<el-form-item label="区域">
<Area v-model="form.deptIndex" style="width: 100%" />
</el-form-item>
<el-form-item label="详细地址：" prop="detailed">
<el-input
clearable
v-model="form.detailed"
:autosize="{ minRows: 2, maxRows: 4 }"
type="textarea"
placeholder="请输入详细地址"
/>
</el-form-item>
</el-form>
</el-dialog>
<policy v-if="policyView" @View="policyView = false" />
</div>
<Added v-if="!addedShow" />
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, provide, reactive } from 'vue'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import Area from '@/components/form/area/index.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import Added from './added.vue'
import policy from './policy.vue'
import { mainHeight } from '@/utils/layout'
import { useDictData } from '@/stores/dictData'
defineOptions({
name: 'estimate/evaluationList'
})
const dictData = useDictData()
const levelList = dictData.getBasicData('Dev_Voltage_Stand')
const uesrList = dictData.getBasicData('Interference_Source')
const view = ref(false)
const disabled = ref(false)
const policyView = ref(false)
const addedShow = ref(false)
const TableHeaderRef = ref()
const title = ref('')
const form = ref({
name: '',
level: '',
deptIndex: dictData.state.area[0].id,
userType: '光伏电站',
type: '光伏电站',
mav1: '100',
mav2: '100',
user: 'Admin',
time: '2024-01-03',
detailed: '详细地址'
})
const rules = {
name: [{ required: true, message: '请输入用户名称', trigger: 'blur' }],
userType: [{ required: true, message: '请选择用户类型', trigger: 'change' }],
level: [{ required: true, message: '请选择电压等级', trigger: 'change' }],
mav1: [{ required: true, message: '请输入用户协议容量', trigger: 'blur' }],
mav2: [{ required: true, message: '请输入拟接入容量', trigger: 'blur' }],
detailed: [{ required: true, message: '请输入详细地址', trigger: 'blur' }]
}
const ruleFormRef = ref()
const tableStore = new TableStore({
url: '/advance-boot/process/querySagEventsPage',
method: 'POST',
column: [
{ width: '60', type: 'checkbox' },
{
field: 'index',
title: '序号',
width: '60',
formatter: (row: any) => {
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
}
},
{ field: 'name', title: '配变台区' },
{ field: 'type', title: '评估类型' },
{ field: 'Area', title: '预评估用户' },
{ field: 'level', title: '评估结果' },
{ field: 'mav1', title: '评估日期' },
{
title: '操作',
width: '180',
render: 'buttons',
buttons: [
{
name: 'edit',
title: '查看',
type: 'primary',
icon: 'el-icon-Plus',
render: 'basicButton',
click: row => {
if (ruleFormRef.value) ruleFormRef.value.resetFields()
disabled.value = true
title.value = '查看承载能力预评估用户'
form.value = JSON.parse(JSON.stringify(row))
view.value = true
}
},
{
name: 'del',
text: '删除',
type: 'danger',
icon: 'el-icon-Delete',
render: 'confirmButton',
popconfirm: {
confirmButtonText: '确认',
cancelButtonText: '取消',
confirmButtonType: 'danger',
title: '确定删除？'
},
click: row => {}
}
]
}
],
loadCallback: () => {
tableStore.table.data = [
{
name: '光伏电站用户1',
type: '光伏电站',
Area: '中国',
level: '220',
mav1: '100',
mav2: '100',
detailed: '详情',
user: 'Admin',
time: '2024-01-03'
}
]
}
})
tableStore.table.params.searchValue = ''
provide('tableStore', tableStore)
onMounted(() => {
TableHeaderRef.value.setDatePicker([{ label: '周', value: 4 }])
TableHeaderRef.value.setInterval(4)
tableStore.index()
})
// 配置
const configuration = () => {
policyView.value = true
}
// 取消
const handleClose = () => {
ruleFormRef.value.resetFields()
view.value = false
}
</script>

231
src/views/pqs/bearingCapacity/evaluationList/policy.vue Normal file
View File

@@ -0,0 +1,231 @@
<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>

242
src/views/pqs/bearingCapacity/userManagement/index.vue Normal file
View File

@@ -0,0 +1,242 @@
<template>
<div class="default-main">
<div>
<TableHeader datePicker ref="TableHeaderRef">
<template #select>
<el-form-item label="用户类型">
<el-input
v-model="tableStore.table.params.searchValue"
clearable
placeholder="输入关键字筛选"
/>
</el-form-item>
</template>
<template #operation>
<el-button icon="el-icon-Plus" type="primary" @click="add">新增</el-button>
</template>
</TableHeader>
<Table ref="tableRef" />
<el-dialog v-model="dialogVisible" :title="title" width="600" :before-close="handleClose">
<el-form ref="ruleFormRef" :model="form" label-width="auto" :disabled="disabled" :rules="rules">
<el-form-item label="用户名称：" prop="name">
<el-input v-model="form.name" clearable placeholder="请输入用户名称" />
</el-form-item>
<el-form-item label="用户类型：" prop="userType">
<el-select v-model="form.userType" clearable collapse-tagsplaceholder="请选择用户类型">
<el-option v-for="item in uesrList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="电压等级：" prop="level">
<el-select v-model="form.level" clearable collapse-tags placeholder="请选择电压等级">
<el-option v-for="item in levelList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="用户协议容量(MVA)：" prop="mav1">
<el-input v-model="form.mav1" clearable placeholder="请输入用户协议容量" />
</el-form-item>
<el-form-item label="拟接入容量(MVA)：" prop="mav2">
<el-input v-model="form.mav2" clearable placeholder="请输入拟接入容量" />
</el-form-item>
<el-form-item label="区域">
<Area v-model="form.deptIndex" style="width: 100%" />
</el-form-item>
<el-form-item label="详细地址：" prop="detailed">
<el-input
clearable
v-model="form.detailed"
:autosize="{ minRows: 2, maxRows: 4 }"
type="textarea"
placeholder="请输入详细地址"
/>
</el-form-item>
</el-form>
<template #footer v-if="!disabled">
<div class="dialog-footer">
<el-button @click="handleClose">取消</el-button>
<el-button type="primary" @click="onSubmit">确定</el-button>
</div>
</template>
</el-dialog>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, provide, reactive } from 'vue'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import Area from '@/components/form/area/index.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { mainHeight } from '@/utils/layout'
import { useDictData } from '@/stores/dictData'
defineOptions({
name: 'estimate/userManagement'
})
const dictData = useDictData()
const levelList = dictData.getBasicData('Dev_Voltage_Stand')
const uesrList = dictData.getBasicData('Interference_Source')
const dialogVisible = ref(false)
const disabled = ref(false)
const TableHeaderRef = ref()
const title = ref('')
interface RuleForm {
name: string
level: string
deptIndex: string
userType: string
type: string
mav1: string
mav2: string
user: string
time: string
detailed: string
}
const form = ref<RuleForm>({
name: '',
level: '',
deptIndex: dictData.state.area[0].id,
userType: '光伏电站',
type: '光伏电站',
mav1: '100',
mav2: '100',
user: 'Admin',
time: '2024-01-03',
detailed: '详细地址'
})
const rules = {
name: [{ required: true, message: '请输入用户名称', trigger: 'blur' }],
userType: [{ required: true, message: '请选择用户类型', trigger: 'change' }],
level: [{ required: true, message: '请选择电压等级', trigger: 'change' }],
mav1: [{ required: true, message: '请输入用户协议容量', trigger: 'blur' }],
mav2: [{ required: true, message: '请输入拟接入容量', trigger: 'blur' }],
detailed: [{ required: true, message: '请输入详细地址', trigger: 'blur' }]
}
const ruleFormRef = ref()
const tableStore = new TableStore({
url: '/advance-boot/process/querySagEventsPage',
method: 'POST',
column: [
{ width: '60', type: 'checkbox' },
{
field: 'index',
title: '序号',
width: '60',
formatter: (row: any) => {
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
}
},
{ field: 'name', title: '用户名称' },
{ field: 'type', title: '用户类型' },
{ field: 'Area', title: '所属区域' },
{ field: 'level', title: '电压等级(V)' },
{ field: 'mav1', title: '用户协议容量(MVA)' },
{ field: 'mav2', title: '拟接入容量(MVA)' },
{ field: 'detailed', title: '详细地址' },
{ field: 'user', title: '创建者' },
{ field: 'time', title: '创建日期' },
{
title: '操作',
width: '180',
render: 'buttons',
buttons: [
{
name: 'edit',
title: '查看',
type: 'primary',
icon: 'el-icon-Plus',
render: 'basicButton',
click: row => {
if (ruleFormRef.value) ruleFormRef.value.resetFields()
disabled.value = true
title.value = '查看承载能力预评估用户'
form.value = JSON.parse(JSON.stringify(row))
dialogVisible.value = true
}
},
{
name: 'edit',
title: '编辑',
type: '',
icon: 'el-icon-Plus',
render: 'basicButton',
click: row => {
if (ruleFormRef.value) ruleFormRef.value.resetFields()
disabled.value = false
title.value = '编辑承载能力预评估用户'
form.value = JSON.parse(JSON.stringify(row))
dialogVisible.value = true
}
},
{
name: 'del',
text: '删除',
type: 'danger',
icon: 'el-icon-Delete',
render: 'confirmButton',
popconfirm: {
confirmButtonText: '确认',
cancelButtonText: '取消',
confirmButtonType: 'danger',
title: '确定删除？'
},
click: row => {
}
}
]
}
],
loadCallback: () => {
tableStore.table.data = [
{
name: '光伏电站用户1',
type: '光伏电站',
Area: '中国',
level: '220',
mav1: '100',
mav2: '100',
detailed: '详情',
user: 'Admin',
time: '2024-01-03'
}
]
}
})
tableStore.table.params.searchValue = ''
provide('tableStore', tableStore)
onMounted(() => {
TableHeaderRef.value.setDatePicker([{ label: '周', value: 4 }])
TableHeaderRef.value.setInterval(4)
tableStore.index()
})
// 新增
const add = () => {
disabled.value = false
title.value = '新增承载能力预评估用户'
dialogVisible.value = true
}
// 保存
const onSubmit = () => {
ruleFormRef.value.validate((valid: boolean) => {
if (valid) {
if (title.value == '新增承载能力预评估用户') {
} else if (title.value == '编辑承载能力预评估用户') {
}
}
})
}
// 取消
const handleClose = () => {
ruleFormRef.value.resetFields()
dialogVisible.value = false
}
</script>