绘制二级评估页面
This commit is contained in:
@@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<div :style="height">
|
||||
<splitpanes style="height: 100%" class="default-theme" id="navigation-splitpanes">
|
||||
<pane :size="size">
|
||||
<AssessTree
|
||||
:default-expand-all="false"
|
||||
@node-click="handleNodeClick"
|
||||
@init="handleNodeClick"
|
||||
></AssessTree>
|
||||
</pane>
|
||||
<pane style="background: #fff">
|
||||
<div class="actionButtons mb10">
|
||||
<el-button type="primary" icon="el-icon-Upload">导入数据背景</el-button>
|
||||
<el-button type="primary" icon="el-icon-Memo" @click="assess">评估</el-button>
|
||||
<el-button type="primary" icon="el-icon-Download">导出报告</el-button>
|
||||
</div>
|
||||
<div :style="collapseHeight" style="overflow-y: auto">
|
||||
<el-collapse v-model="collapseName">
|
||||
<el-collapse-item title="基本信息" :name="1">
|
||||
<information />
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="评估结果信息" :name="2">
|
||||
<Outcome />
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</div>
|
||||
</pane>
|
||||
</splitpanes>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref, provide } from 'vue'
|
||||
import 'splitpanes/dist/splitpanes.css'
|
||||
import { Splitpanes, Pane } from 'splitpanes'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import AssessTree from '@/components/tree/pqs/assessTree.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import information from './information.vue'
|
||||
import Outcome from './outcome.vue'
|
||||
|
||||
defineOptions({
|
||||
// name: 'harmonic-boot/report/word'
|
||||
})
|
||||
const collapseName = ref([1, 2])
|
||||
const height = mainHeight(80)
|
||||
const collapseHeight = mainHeight(125)
|
||||
const size = ref(0)
|
||||
const dotList: any = ref({})
|
||||
|
||||
const tableStore = new TableStore({
|
||||
url: '',
|
||||
method: 'POST',
|
||||
column: [],
|
||||
beforeSearchFun: () => {},
|
||||
loadCallback: () => {}
|
||||
})
|
||||
provide('tableStore', tableStore)
|
||||
// 评估
|
||||
const assess = () => {
|
||||
collapseName.value = [2]
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
const dom = document.getElementById('navigation-splitpanes')
|
||||
|
||||
setTimeout(() => {
|
||||
if (dom) {
|
||||
size.value = Math.round((180 / dom.offsetHeight) * 100)
|
||||
}
|
||||
}, 100)
|
||||
})
|
||||
|
||||
const handleNodeClick = (data: any, node: any) => {
|
||||
dotList.value = data
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.splitpanes.default-theme .splitpanes__pane {
|
||||
background: #eaeef1;
|
||||
}
|
||||
|
||||
:deep(.el-collapse-item__header) {
|
||||
font-family: AlimamaDongFangDaKai;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.actionButtons {
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,259 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-collapse v-model="activeNames">
|
||||
<el-collapse v-model="activeNames">
|
||||
<el-collapse-item title="用户参数维护" :name="1">
|
||||
<el-descriptions :column="4" border>
|
||||
<el-descriptions-item label="所在地市">张家口</el-descriptions-item>
|
||||
<el-descriptions-item label="用户名称">名称1</el-descriptions-item>
|
||||
<el-descriptions-item label="用户协议容量(MVA)">100</el-descriptions-item>
|
||||
<el-descriptions-item label="是否包含电容器">否</el-descriptions-item>
|
||||
<el-descriptions-item label="风电场装机容量"></el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="系统参数维护" :name="2">
|
||||
<el-descriptions :column="4" border>
|
||||
<el-descriptions-item label="接入变电站">变电站1</el-descriptions-item>
|
||||
<el-descriptions-item label="变电站电压等级">220V</el-descriptions-item>
|
||||
<el-descriptions-item label="接入母线">母线1</el-descriptions-item>
|
||||
<el-descriptions-item label="母线电压等级">220V</el-descriptions-item>
|
||||
<el-descriptions-item label="供电设备容量(MVA)">100</el-descriptions-item>
|
||||
<el-descriptions-item label="最小短路容量(MVA)">10</el-descriptions-item>
|
||||
<el-descriptions-item label="PCC点名称">名称1</el-descriptions-item>
|
||||
<el-descriptions-item label="PCC点电网电阻">20</el-descriptions-item>
|
||||
<el-descriptions-item label="长度">30</el-descriptions-item>
|
||||
<el-descriptions-item label="回路数">2</el-descriptions-item>
|
||||
<el-descriptions-item label="导线类型"></el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item :title="item.name" v-for="(item, index) in column" :name="index + 3">
|
||||
<div style="height: 200px">
|
||||
<vxe-table height="auto" :data="form[item.key]" v-bind="defaultAttribute">
|
||||
<vxe-column type="checkbox" width="60"></vxe-column>
|
||||
<vxe-column type="seq" title="序号" width="60px"></vxe-column>
|
||||
|
||||
<vxe-column
|
||||
v-for="(k, index) in item.child"
|
||||
:key="index"
|
||||
:field="k.field"
|
||||
:title="k.title"
|
||||
></vxe-column>
|
||||
</vxe-table>
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</el-collapse>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from 'vue'
|
||||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||
const activeNames = ref([1, 2, 3, 4, 5, 6, 7])
|
||||
const form: any = ref({
|
||||
city: '',
|
||||
windFarms: '',
|
||||
transformer: [
|
||||
{
|
||||
name: '变压器1',
|
||||
name1: '变压器型号1',
|
||||
name2: '100'
|
||||
},
|
||||
{
|
||||
name: '变压器2',
|
||||
name1: '变压器型号2',
|
||||
name2: '100'
|
||||
}
|
||||
], //变压器
|
||||
capacitor: [
|
||||
{
|
||||
name: '电容器1',
|
||||
name1: '20',
|
||||
name2: '100',
|
||||
name3: '72.73',
|
||||
name4: '400V'
|
||||
},
|
||||
{
|
||||
name: '电容器2',
|
||||
name1: '20',
|
||||
name2: '100',
|
||||
name3: '72.73',
|
||||
name4: '400V'
|
||||
}
|
||||
], //电容器
|
||||
windPower: [
|
||||
{
|
||||
name: '风机1',
|
||||
name1: '0.1',
|
||||
name2: '100'
|
||||
},
|
||||
{
|
||||
name: '风机2',
|
||||
name1: '0.1',
|
||||
name2: '100'
|
||||
}
|
||||
], //风电
|
||||
load: [], //用户负荷
|
||||
impact: [] //冲击性负荷
|
||||
})
|
||||
const column: any = ref([
|
||||
{
|
||||
name: '变压器参数维护',
|
||||
key: 'transformer',
|
||||
child: [
|
||||
{
|
||||
title: '用户变压器名称',
|
||||
field: 'name'
|
||||
},
|
||||
{
|
||||
title: '变压器型号',
|
||||
field: 'name1'
|
||||
},
|
||||
{
|
||||
title: '变压器台数',
|
||||
field: 'name2'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '电容器组参数维护',
|
||||
key: 'capacitor',
|
||||
child: [
|
||||
{
|
||||
title: '用户电容器名称',
|
||||
field: 'name'
|
||||
},
|
||||
{
|
||||
title: '电容器组数量',
|
||||
field: 'name1'
|
||||
},
|
||||
{
|
||||
title: '单组容量(kVar)',
|
||||
field: 'name2'
|
||||
},
|
||||
{
|
||||
title: '电抗率(%)',
|
||||
field: 'name3'
|
||||
},
|
||||
{
|
||||
title: '电压等级',
|
||||
field: 'name4'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '风电参数',
|
||||
key: 'windPower',
|
||||
child: [
|
||||
{
|
||||
title: '风机名称',
|
||||
field: 'name'
|
||||
},
|
||||
{
|
||||
title: '风机闪变系数',
|
||||
field: 'name1'
|
||||
},
|
||||
{
|
||||
title: '风机额定视在功率',
|
||||
field: 'name2'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '用户负荷',
|
||||
key: 'load',
|
||||
child: [
|
||||
{
|
||||
title: '配电窒名称',
|
||||
field: 'name'
|
||||
},
|
||||
{
|
||||
title: '进线电压',
|
||||
field: 'name1'
|
||||
},
|
||||
{
|
||||
title: '配变容量(kVA)',
|
||||
field: 'name2'
|
||||
},
|
||||
{
|
||||
title: '配电变压器阻抗(%)',
|
||||
field: 'name3'
|
||||
},
|
||||
{
|
||||
title: '谐波源特性',
|
||||
field: 'name4'
|
||||
},
|
||||
{
|
||||
title: '配变低压侧电压',
|
||||
field: 'name5'
|
||||
},
|
||||
{
|
||||
title: '非线性负荷功率(kW)',
|
||||
field: 'name6'
|
||||
},
|
||||
{
|
||||
title: '功率因素',
|
||||
field: 'name7'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '冲击性负荷',
|
||||
key: 'impact',
|
||||
child: [
|
||||
{
|
||||
title: '冲击负荷类型',
|
||||
field: 'name'
|
||||
},
|
||||
{
|
||||
title: '冲击负荷功率(MVA)',
|
||||
field: 'name1'
|
||||
},
|
||||
{
|
||||
title: '数量',
|
||||
field: 'name2'
|
||||
},
|
||||
{
|
||||
title: '启动方式',
|
||||
field: 'name3'
|
||||
},
|
||||
{
|
||||
title: '启动容量倍数',
|
||||
field: 'name4'
|
||||
},
|
||||
{
|
||||
title: '冲击负荷高压侧电压',
|
||||
field: 'name5'
|
||||
},
|
||||
{
|
||||
title: '有无隔离变',
|
||||
field: 'name6'
|
||||
},
|
||||
{
|
||||
title: '隔离变阻抗(%)',
|
||||
field: 'name7'
|
||||
},
|
||||
{
|
||||
title: '低压侧电压',
|
||||
field: 'name8'
|
||||
},
|
||||
{
|
||||
title: '负荷频度选择',
|
||||
field: 'name9'
|
||||
},
|
||||
{
|
||||
title: '闪变叠加系数',
|
||||
field: 'name10'
|
||||
}
|
||||
]
|
||||
}
|
||||
])
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-collapse-item__header) {
|
||||
padding-left: 20px;
|
||||
font-size: 16px !important;
|
||||
}
|
||||
:deep(.el-descriptions__cell) {
|
||||
width: 12.5%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,11 @@
|
||||
<template>
|
||||
|
||||
<div>123 </div>
|
||||
|
||||
</template>
|
||||
<script setup lang='ts'>
|
||||
import { ref, reactive } from 'vue'
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user