229 lines
9.0 KiB
Vue
229 lines
9.0 KiB
Vue
<template>
|
||
<div class="default-main">
|
||
<div v-show="addedShow">
|
||
<TableHeader datePicker ref="TableHeaderRef">
|
||
<template #select>
|
||
<el-form-item label="用户类型">
|
||
<el-select
|
||
v-model="tableStore.table.params.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>
|
||
</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" @quit="addedShow = true" /> -->
|
||
<div v-if="!addedShow" style="position: relative">
|
||
<el-tabs v-model="activeName" type="border-card" :style="{ height: height }">
|
||
<el-tab-pane label="光伏电站承载能力评估" name="1"><photovoltaic /></el-tab-pane>
|
||
<el-tab-pane label="充电站、电加热负荷、电气化铁路承载能力评估" name="2">
|
||
<charge />
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
<el-button class="quit" icon="el-icon-Close" type="primary" @click="addedShow = true">返回</el-button>
|
||
</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 policy from './components/policy.vue'
|
||
import photovoltaic from './components/photovoltaic.vue'
|
||
import charge from './components/charge.vue'
|
||
|
||
import { mainHeight } from '@/utils/layout'
|
||
import { useDictData } from '@/stores/dictData'
|
||
defineOptions({
|
||
name: 'estimate/evaluationList'
|
||
})
|
||
const height = mainHeight(20).height
|
||
const dictData = useDictData()
|
||
const levelList = dictData.getBasicData('Dev_Voltage_Stand')
|
||
const uesrList = dictData.getBasicData('CARRY_CAPCITY_USER_TYPE')
|
||
const view = ref(false)
|
||
const activeName = ref('1')
|
||
const disabled = ref(false)
|
||
const policyView = ref(false)
|
||
const addedShow = ref(true)
|
||
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/carrycapacity/queryCarryCapacityData',
|
||
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.userType = ''
|
||
tableStore.table.params.userId = dictData.state.area[0].id
|
||
|
||
provide('tableStore', tableStore)
|
||
onMounted(() => {
|
||
TableHeaderRef.value.setDatePicker([{ label: '周', value: 4 }])
|
||
TableHeaderRef.value.setInterval(4)
|
||
setTimeout(() => {
|
||
tableStore.table.params.startTime = TableHeaderRef.value.datePickerRef.timeValue[0]
|
||
tableStore.table.params.endTime = TableHeaderRef.value.datePickerRef.timeValue[1]
|
||
tableStore.index()
|
||
}, 100)
|
||
})
|
||
// 配置
|
||
const configuration = () => {
|
||
policyView.value = true
|
||
}
|
||
|
||
// 取消
|
||
const handleClose = () => {
|
||
ruleFormRef.value.resetFields()
|
||
view.value = false
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.quit {
|
||
position: absolute;
|
||
top: 5px;
|
||
right: 10px;
|
||
}
|
||
</style>
|