312 lines
10 KiB
Vue
312 lines
10 KiB
Vue
<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/pms/pointTree.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>
|