联调 承载能力评估
This commit is contained in:
@@ -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>
|
||||
Reference in New Issue
Block a user