绘制用户二级评估、参数字典维护页面
This commit is contained in:
@@ -15,7 +15,7 @@
|
||||
<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 v-model="collapseName" class="pl10 pr10">
|
||||
<el-collapse-item title="基本信息" :name="1">
|
||||
<information />
|
||||
</el-collapse-item>
|
||||
@@ -84,6 +84,12 @@ const handleNodeClick = (data: any, node: any) => {
|
||||
:deep(.el-collapse-item__header) {
|
||||
font-family: AlimamaDongFangDaKai;
|
||||
font-size: 20px;
|
||||
&::before {
|
||||
content: '▍'; /* 添加星号 */
|
||||
font-size: 16px;
|
||||
color: var(--el-color-primary);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.actionButtons {
|
||||
|
||||
@@ -29,7 +29,7 @@
|
||||
<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
|
||||
@@ -252,6 +252,11 @@ const column: any = ref([
|
||||
:deep(.el-collapse-item__header) {
|
||||
padding-left: 20px;
|
||||
font-size: 16px !important;
|
||||
&::before {
|
||||
content: '' !important; /* 添加星号 */
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
:deep(.el-descriptions__cell) {
|
||||
width: 12.5%;
|
||||
|
||||
@@ -1,11 +1,318 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-collapse v-model="activeNames">
|
||||
<el-collapse v-model="activeNames">
|
||||
<el-collapse-item title="电压波动/闪变评估结果" :name="1">
|
||||
<div class="flickerWaves">
|
||||
<vxe-table
|
||||
:data="undulation"
|
||||
height="110px"
|
||||
v-bind="defaultAttribute"
|
||||
:cell-class-name="getCellClassName"
|
||||
style="width: 60%"
|
||||
>
|
||||
<vxe-column title="估算方式" field="name" />
|
||||
<vxe-column title="冲击负荷数量" field="name1" />
|
||||
<vxe-column title="电压波动" field="name2" />
|
||||
<vxe-column title="国标限值" field="name3" />
|
||||
<vxe-column title="判断">
|
||||
<template #default="{ row }">
|
||||
<el-tag v-if="row.name2 > row.name3" type="warning">不合格</el-tag>
|
||||
<el-tag v-else type="success">合格</el-tag>
|
||||
</template>
|
||||
</vxe-column>
|
||||
</vxe-table>
|
||||
<vxe-table
|
||||
:data="flicker"
|
||||
height="110px"
|
||||
v-bind="defaultAttribute"
|
||||
:cell-class-name="getCellClassName"
|
||||
style="width: 40%"
|
||||
>
|
||||
<vxe-column title="冲击负荷数量" field="name1" />
|
||||
<vxe-column title="闪变" field="name2" />
|
||||
<vxe-column title="国标限值" field="name3" />
|
||||
<vxe-column title="判断">
|
||||
<template #default="{ row }">
|
||||
<span v-if="row.name2 == null"></span>
|
||||
<el-tag v-else-if="row.name2 > row.name3" type="warning">不合格</el-tag>
|
||||
|
||||
<div>123 </div>
|
||||
<el-tag v-else type="success">合格</el-tag>
|
||||
</template>
|
||||
</vxe-column>
|
||||
</vxe-table>
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="电压偏差评估结果" :name="2">
|
||||
<vxe-table
|
||||
:data="voltageDeviation"
|
||||
height="330px"
|
||||
:merge-cells="mergeCells"
|
||||
v-bind="defaultAttribute"
|
||||
style="width: 100%"
|
||||
>
|
||||
<vxe-column field="name" width="80px">
|
||||
<template #default="{ row }">
|
||||
<div class="textName">{{ row.name }}</div>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-colgroup title="用户无功设备情况">
|
||||
<vxe-column field="name1" title="用户项目负载/出力(%)" min-width="160px" />
|
||||
</vxe-colgroup>
|
||||
<vxe-colgroup title="用户无功设备不运行">
|
||||
<vxe-column field="name2" title="百分比(%)" min-width="90px" />
|
||||
<vxe-column field="name3" title="有名值(%)" min-width="90px" />
|
||||
<vxe-column field="name4" title="上限值(%)" min-width="90px" />
|
||||
<vxe-column field="name5" title="下限值(%)" min-width="90px" />
|
||||
<vxe-column title="判断" min-width="80px">
|
||||
<template #default="{ row }">
|
||||
<el-tag type="success">合格</el-tag>
|
||||
</template>
|
||||
</vxe-column>
|
||||
</vxe-colgroup>
|
||||
<vxe-colgroup title="用户无功设备全部运行">
|
||||
<vxe-column field="name6" title="百分比(%)" min-width="90px" />
|
||||
<vxe-column field="name7" title="有名值(%)" min-width="90px" />
|
||||
<vxe-column field="name8" title="上限值(%)" min-width="90px" />
|
||||
<vxe-column field="name9" title="下限值(%)" min-width="90px" />
|
||||
<vxe-column title="判断" min-width="80px">
|
||||
<template #default="{ row }">
|
||||
<el-tag type="success">合格</el-tag>
|
||||
</template>
|
||||
</vxe-column>
|
||||
</vxe-colgroup>
|
||||
</vxe-table>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="三相电压不平衡评估结果" :name="3">
|
||||
<vxe-table
|
||||
:data="imbalance"
|
||||
height="110px"
|
||||
v-bind="defaultAttribute"
|
||||
:cell-class-name="getCellClassName"
|
||||
style="width: 100%"
|
||||
>
|
||||
<vxe-column title="估算方式" field="name" />
|
||||
<vxe-column title="负序电压不平衡度(%)" field="name2" />
|
||||
<vxe-column title="国标限值(%)" field="name3" />
|
||||
<vxe-column title="判断">
|
||||
<template #default="{ row }">
|
||||
<el-tag v-if="row.name2 > row.name3" type="warning">不合格</el-tag>
|
||||
<el-tag v-else type="success">合格</el-tag>
|
||||
</template>
|
||||
</vxe-column>
|
||||
</vxe-table>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="谐波电压/电流评估结果" :name="4">
|
||||
<div class="flickerWaves" style="height: 520px">
|
||||
<vxe-table
|
||||
:data="harmonicVoltage"
|
||||
height="520px"
|
||||
v-bind="defaultAttribute"
|
||||
:cell-class-name="getCellClassName"
|
||||
style="width: 50%"
|
||||
>
|
||||
<vxe-column title="谐波次数" field="name" />
|
||||
<vxe-colgroup title="电容器谐波电流评估值(A)">
|
||||
<vxe-column field="name1" title="未投入" min-width="160px" />
|
||||
<vxe-column field="name2" title="已投入" min-width="160px" />
|
||||
</vxe-colgroup>
|
||||
<vxe-column title="国标限值(A)" field="name3" />
|
||||
<vxe-column title="判断">
|
||||
<template #default="{ row }">
|
||||
<el-tag v-if="row.name2 > row.name3" type="warning">不合格</el-tag>
|
||||
<el-tag v-else type="success">合格</el-tag>
|
||||
</template>
|
||||
</vxe-column>
|
||||
</vxe-table>
|
||||
<vxe-table :data="harmonicCurrents" height="520px" v-bind="defaultAttribute" style="width: 50%">
|
||||
<vxe-column title="谐波次数" field="name" />
|
||||
<vxe-colgroup title="电容器谐波电压评估值(%)">
|
||||
<vxe-column field="name1" title="未投入" min-width="160px" />
|
||||
<vxe-column field="name2" title="已投入" min-width="160px" />
|
||||
</vxe-colgroup>
|
||||
<vxe-column title="国标限值(%)" field="name3" />
|
||||
<vxe-column title="判断">
|
||||
<template #default="{ row }">
|
||||
<span v-if="row.name2 == null"></span>
|
||||
<el-tag v-else-if="row.name2 > row.name3" type="warning">不合格</el-tag>
|
||||
|
||||
<el-tag v-else type="success">合格</el-tag>
|
||||
</template>
|
||||
</vxe-column>
|
||||
</vxe-table>
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</el-collapse>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang='ts'>
|
||||
import { ref, reactive } from 'vue'
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||
const activeNames = ref([1, 2, 3, 4, 5, 6, 7])
|
||||
// 波动
|
||||
const undulation = ref([
|
||||
{
|
||||
name: '近似计算',
|
||||
name1: '1',
|
||||
name2: '6.94',
|
||||
name3: '3.00'
|
||||
},
|
||||
{
|
||||
name: '精确估算',
|
||||
name1: '1',
|
||||
name2: '6.94',
|
||||
name3: '3.00'
|
||||
}
|
||||
])
|
||||
// 闪变
|
||||
const flicker = ref([
|
||||
{
|
||||
name1: '1',
|
||||
name2: '1.1',
|
||||
name3: '0.8'
|
||||
},
|
||||
{}
|
||||
])
|
||||
// 电压偏差
|
||||
const voltageDeviation = ref([
|
||||
{
|
||||
name: '电网高峰负荷',
|
||||
name1: '100',
|
||||
name2: '2.14',
|
||||
name3: '107.65',
|
||||
name4: '10.00',
|
||||
name5: '-10.00',
|
||||
name6: '2.14',
|
||||
name7: '107.65',
|
||||
name8: '10.00',
|
||||
name9: '-10.00'
|
||||
},
|
||||
{
|
||||
name: '电网高峰负荷',
|
||||
name1: '100',
|
||||
name2: '2.14',
|
||||
name3: '107.65',
|
||||
name4: '10.00',
|
||||
name5: '-10.00',
|
||||
name6: '2.14',
|
||||
name7: '107.65',
|
||||
name8: '10.00',
|
||||
name9: '-10.00'
|
||||
},
|
||||
{
|
||||
name: '电网高峰负荷',
|
||||
name1: '100',
|
||||
name2: '2.14',
|
||||
name3: '107.65',
|
||||
name4: '10.00',
|
||||
name5: '-10.00',
|
||||
name6: '2.14',
|
||||
name7: '107.65',
|
||||
name8: '10.00',
|
||||
name9: '-10.00'
|
||||
},
|
||||
{
|
||||
name: '电网低谷负荷',
|
||||
name1: '100',
|
||||
name2: '2.14',
|
||||
name3: '107.65',
|
||||
name4: '10.00',
|
||||
name5: '-10.00',
|
||||
name6: '2.14',
|
||||
name7: '107.65',
|
||||
name8: '10.00',
|
||||
name9: '-10.00'
|
||||
},
|
||||
{
|
||||
name: '电网低谷负荷',
|
||||
name1: '100',
|
||||
name2: '2.14',
|
||||
name3: '107.65',
|
||||
name4: '10.00',
|
||||
name5: '-10.00',
|
||||
name6: '2.14',
|
||||
name7: '107.65',
|
||||
name8: '10.00',
|
||||
name9: '-10.00'
|
||||
},
|
||||
{
|
||||
name: '电网低谷负荷',
|
||||
name1: '100',
|
||||
name2: '2.14',
|
||||
name3: '107.65',
|
||||
name4: '10.00',
|
||||
name5: '-10.00',
|
||||
name6: '2.14',
|
||||
name7: '107.65',
|
||||
name8: '10.00',
|
||||
name9: '-10.00'
|
||||
}
|
||||
])
|
||||
// 三相电压
|
||||
const imbalance = ref([
|
||||
{
|
||||
name: '近似计算',
|
||||
name2: '2.1',
|
||||
name3: '1.3'
|
||||
},
|
||||
{
|
||||
name: '精确估算',
|
||||
name2: '1.6',
|
||||
name3: '1.3'
|
||||
}
|
||||
])
|
||||
// 谐波电压
|
||||
const harmonicVoltage:any = ref([])
|
||||
// 谐波电流
|
||||
const harmonicCurrents:any = ref([])
|
||||
// 合并单元格
|
||||
const mergeCells = ref([
|
||||
{ row: 0, col: 0, rowspan: 3, colspan: 1 },
|
||||
{ row: 3, col: 0, rowspan: 3, colspan: 1 }
|
||||
])
|
||||
// 添加单元格class
|
||||
const getCellClassName = ({ row, columnIndex }) => {
|
||||
if (row.name2 > row.name3 && columnIndex == 2) {
|
||||
return 'custom-cell-bg' // 为 Alice 的单元格添加背景
|
||||
}
|
||||
return ''
|
||||
}
|
||||
onMounted(() => {
|
||||
for (let i = 2; i < 51; i++) {
|
||||
harmonicVoltage.value.push({
|
||||
name: i
|
||||
})
|
||||
harmonicCurrents.value.push({
|
||||
name: i
|
||||
})
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-collapse-item__header) {
|
||||
padding-left: 20px;
|
||||
font-size: 16px !important;
|
||||
&::before {
|
||||
content: '' !important; /* 添加星号 */
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
:deep(.el-descriptions__cell) {
|
||||
width: 12.5%;
|
||||
}
|
||||
:deep(.custom-cell-bg) {
|
||||
background-color: var(--el-color-warning-light-7);
|
||||
}
|
||||
.flickerWaves {
|
||||
// height: 120px;
|
||||
display: flex;
|
||||
}
|
||||
.textName {
|
||||
white-space: pre-line;
|
||||
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user