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

联调 承载能力评估

Browse Source
This commit is contained in:
GGJ
2024-03-06 20:37:36 +08:00
parent e4745f891f
commit f92e820986
18 changed files with 168 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

199
src/views/pqs/bearingCapacity/evaluationList/components/charge.vue Normal file
View File

@@ -0,0 +1,199 @@
<template>
<el-row :gutter="30" class="mb20">
<el-col :span="8">
<el-card >
<template #header>
<div class="card-header">
<span>公共连接点参数</span>
</div>
</template>
<div :style="`height: calc(${height} / 2 - 117px);overflow-y: auto`">
<el-form :model="form" label-width="auto" style="max-width: 500px; margin: auto">
<el-form-item label="变压器接线方式">
<el-input v-model="form.name" />
</el-form-item>
<el-form-item label="电压等级">
<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)">
<el-input v-model="form.name" />
</el-form-item>
<el-form-item label="最小短路容量(MVA)">
<el-input v-model="form.name" />
</el-form-item>
</el-form>
</div>
</el-card>
</el-col>
<el-col :span="16">
<el-card>
<template #header>
<div class="card-header">
<span>干扰源用户</span>
<el-button type="primary" size="default" icon="el-icon-Plus">新增</el-button>
</div>
</template>
<div :style="`height: calc(${height} / 2 - 128px);overflow-y: auto`">
<vxe-table v-bind="defaultAttribute" height="auto" ref="xTable" :data="tableData">
<vxe-column field="name" title="预评估用户"></vxe-column>
<vxe-column field="role" title="用户协议容量(MVA)"></vxe-column>
<vxe-column field="num6" title="操作" width="120">
<template #default="{ row }">
<el-button type="danger" link>删除</el-button>
</template>
</vxe-column>
</vxe-table>
</div>
</el-card>
</el-col>
</el-row>
<div class="bottomBox">
<div style="height: 70px">一级评估：0.02% &lt; 0.1% 满足</div>
<div style="height: 20px" class="mb10">二级评估:</div>
<el-row>
<el-col :span="16" :style="`height: calc(${height} / 2 - 100px)`">
<vxe-table style="flex: 1.5" v-bind="defaultAttribute" height="auto" ref="xTable" :data="tableData">
<vxe-column field="name" title="等级"></vxe-column>
<vxe-column field="role" title="安全"></vxe-column>
<vxe-column field="num6" title="III级预警"></vxe-column>
<vxe-column field="date12" title="II级预警"></vxe-column>
<vxe-column field="date13" title="I级预警"></vxe-column>
</vxe-table>
</el-col>
<el-col :span="8" :style="`height: calc(${height} / 2 - 100px)`">
<MyEChart style="flex: 1" :options="pieCharts" />
</el-col>
</el-row>
<el-button type="primary" icon="el-icon-Document" @click="assess">承载能力评估</el-button>
</div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import MyEChart from '@/components/echarts/MyEchart.vue'
import { useDictData } from '@/stores/dictData'
import { mainHeight } from '@/utils/layout'
const dictData = useDictData()
const height = mainHeight(80).height
const levelList = dictData.getBasicData('Dev_Voltage_Stand')
const tableData = ref([
{
id: 10001,
name: '配变首端电压',
role: '/',
num6: '/',
date12: '/',
date13: '/'
},
{
id: 10002,
name: '配变功率因素',
role: '/',
num6: '/',
date12: '/',
date13: '/'
},
{
id: 10003,
name: '等效负载率最小值',
role: '/',
date12: '/',
num6: '/',
date13: '/'
},
{
id: 10004,
name: '各次谐波电流幅值',
role: '/',
date12: '/',
num6: '/',
date13: '/'
}
])
const form: any = ref({})
const pieCharts = ref({})
// 承载能力评估
const assess = () => {
pieCharts.value = {
title: {
text: '承载能力评估结果',
x: 'center',
top: `30px`,
textStyle: {
fontWeight: 'normal'
}
},
legend: {
type: 'scroll',
orient: 'vertical',
left: 10,
top: '10%',
tooltip: {
show: true
}
},
xAxis: {
show: false
},
yAxis: {
show: false
},
color: ['#77DA63', '#00BFF5', '#FFBF00', '#Ff6600'],
dataZoom: { show: false },
series: [
{
type: 'pie',
center: ['50%', '50%'],
radius: ['35%', '48%'],
selectedOffset: 30,
clockwise: true,
label: {
formatter: '{b}：{c}'
},
labelLine: {
length: 1,
length2: 20
},
data: [
{
name: '安全',
value: 1
},
{
name: 'III级',
value: 3
},
{
name: 'II级',
value: 3
},
{
name: 'I级',
value: 2
}
]
}
]
}
}
</script>
<style lang="scss" scoped>
.bottomBox {
position: relative;
.el-button {
position: absolute;
top: 0;
right: 10px;
}
}
.card-header {
font-weight: 600;
display: FLEX;
justify-content: space-between;
}
</style>

311
src/views/pqs/bearingCapacity/evaluationList/components/photovoltaic.vue Normal file
View File

@@ -0,0 +1,311 @@
<template>
<div>
<splitpanes :style="{ height: height }" class="default-theme" id="navigation-splitpanes">
<pane :size="size">
<PointTree
:default-expand-all="false"
:default-expanded-keys="monitoringPoint.state.lineId ? [monitoringPoint.state.lineId] : []"
:current-node-key="monitoringPoint.state.lineId"
@node-click="handleNodeClick"
@init="handleNodeClick"
></PointTree>
</pane>
<pane style="background: #fff">
<el-form :inline="true">
<el-form-item label="日期">
<DatePicker ref="datePickerRef"></DatePicker>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-Search" @click="onSubmit">查询</el-button>
<el-button type="primary" icon="el-icon-DocumentAdd">离线导入</el-button>
</el-form-item>
</el-form>
<el-descriptions class="mb10" title="基础数据" :column="2" size="" border>
<el-descriptions-item label="电压等级" label-align="center" width="25%">12</el-descriptions-item>
<el-descriptions-item label="额定容量" label-align="center" width="25%">12</el-descriptions-item>
<el-descriptions-item label="待评估用户" label-align="center" width="25%">
<el-select
v-model="user"
placeholder="请选择待评估用户"
size="small"
clearable
filterable
style="width: 240px"
>
<el-option
v-for="item in userList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-descriptions-item>
<el-descriptions-item label="拟接入光伏容量" label-align="center" width="25%">
12
</el-descriptions-item>
</el-descriptions>
<el-tabs v-model="activeName" class="mb10" :style="`height: calc(${tabsHeight} / 2)`">
<el-tab-pane label="有功功率" name="1" class="mt10">
<MyEChart :options="options" />
</el-tab-pane>
<el-tab-pane label="无功功率" name="2"></el-tab-pane>
<el-tab-pane label="谐波电流幅值" name="3"></el-tab-pane>
<el-tab-pane label="首端电压模型参数" name="4"></el-tab-pane>
</el-tabs>
<div class="bottomBox">
<el-row v-if="showAssess">
<el-col :span="16" :style="`height: calc(${tabsHeight} / 2)`">
<vxe-table
style="flex: 1.5"
v-bind="defaultAttribute"
height="auto"
ref="xTable"
:data="tableData"
>
<vxe-column field="name" title="等级"></vxe-column>
<vxe-column field="role" title="安全"></vxe-column>
<vxe-column field="num6" title="III级预警"></vxe-column>
<vxe-column field="date12" title="II级预警"></vxe-column>
<vxe-column field="date13" title="I级预警"></vxe-column>
</vxe-table>
</el-col>
<el-col :span="8" :style="`height: calc(${tabsHeight} / 2)`">
<MyEChart style="flex: 1" :options="pieCharts" />
</el-col>
</el-row>
<el-button type="primary" icon="el-icon-Document" @click="assess">承载能力评估</el-button>
</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 PointTree from '@/components/tree/pqs/loadBearingTree.vue'
import DatePicker from '@/components/form/datePicker/index.vue'
import { mainHeight } from '@/utils/layout'
import { text } from '../text'
import MyEChart from '@/components/echarts/MyEchart.vue'
import { useMonitoringPoint } from '@/stores/monitoringPoint'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import { ElMessage } from 'element-plus'
const monitoringPoint = useMonitoringPoint()
const size = ref(0)
const datePickerRef = ref()
const height = mainHeight(80).height
const tabsHeight = mainHeight(260).height
const tableData = ref([
{
id: 10001,
name: '配变首端电压',
role: '/',
num6: '/',
date12: '/',
date13: '/'
},
{
id: 10002,
name: '配变功率因素',
role: '/',
num6: '/',
date12: '/',
date13: '/'
},
{
id: 10003,
name: '等效负载率最小值',
role: '/',
date12: '/',
num6: '/',
date13: '/'
},
{
id: 10004,
name: '各次谐波电流幅值',
role: '/',
date12: '/',
num6: '/',
date13: '/'
}
])
const showAssess = ref(false)
const user = ref('')
const userList = [
{
value: 'Option1',
label: '光伏电站用户1'
},
{
value: 'Option2',
label: '光伏电站用户2'
},
{
value: 'Option3',
label: '光伏电站用户3'
}
]
const options = ref({})
const pieCharts = ref({})
const activeName = ref('1')
const dotList: any = ref({
name: monitoringPoint.state.lineName.split('>')[3],
id: monitoringPoint.state.lineId,
level: 6
})
onMounted(() => {
const dom = document.getElementById('navigation-splitpanes')
if (dom) {
size.value = Math.round((280 / dom.offsetHeight) * 100)
}
datePickerRef.value.setTimeOptions([{ label: '周', value: 4 }])
datePickerRef.value.setInterval(4)
})
// 查询
const onSubmit = () => {
console.log(text.data.data)
options.value = {
title: {
text: '在线率统计',
x: 'center',
textStyle: {
fontWeight: 'normal'
}
},
xAxis: {
data: text.data.data.filter(item => item.phaseType == 'A').map(item => item.time),
// name: '时间',
onZero: false,
position: 'bottom' // 设置 x 轴在底部
},
yAxis: {
type: 'value',
max: Math.ceil(Math.max(...text.data.data.map(item => item.value))),
min: Math.floor(Math.min(...text.data.data.map(item => item.value)))
},
legend: {
data: ['A', 'B', 'C']
// selectedMode: false,
},
grid: {
left: '30px'
},
series: [
{
name: 'A',
type: 'line',
// smooth: true,
symbol: 'none',
data: text.data.data.filter(item => item.phaseType == 'A').map(item => item.value.toFixed(3))
},
{
name: 'B',
type: 'line',
// smooth: true,
symbol: 'none',
data: text.data.data.filter(item => item.phaseType == 'B').map(item => item.value.toFixed(3))
},
{
name: 'C',
type: 'line',
// smooth: true,
symbol: 'none',
data: text.data.data.filter(item => item.phaseType == 'C').map(item => item.value.toFixed(3))
}
]
}
}
// 承载能力评估
const assess = () => {
pieCharts.value = {
title: {
text: '承载能力评估结果',
x: 'center',
top: `30px`,
textStyle: {
fontWeight: 'normal'
}
},
legend: {
type: 'scroll',
orient: 'vertical',
left: 10,
top: '10%',
tooltip: {
show: true
}
},
xAxis: {
show: false
},
yAxis: {
show: false
},
color: ['#77DA63', '#00BFF5', '#FFBF00', '#Ff6600'],
dataZoom: { show: false },
series: [
{
type: 'pie',
center: ['50%', '50%'],
radius: ['35%', '48%'],
selectedOffset: 30,
clockwise: true,
label: {
formatter: '{b}：{c}'
},
labelLine: {
length: 1,
length2: 20
},
data: [
{
name: '安全',
value: 1
},
{
name: 'III级',
value: 3
},
{
name: 'II级',
value: 3
},
{
name: 'I级',
value: 2
}
]
}
]
}
showAssess.value = true
}
const handleNodeClick = (data: any, node: any) => {
dotList.value = data
}
</script>
<style lang="scss">
.splitpanes.default-theme .splitpanes__pane {
background: #eaeef1;
}
.grid-content {
text-align: center;
}
.bottomBox {
position: relative;
.el-button {
position: absolute;
top: 0;
right: 10px;
}
}
</style>

231
src/views/pqs/bearingCapacity/evaluationList/components/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>