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-12 11:16:54 +08:00
parent 3ba3016135
commit fd8742555f
24 changed files with 1898 additions and 242186 deletions
Download Patch File Download Diff File Expand all files Collapse all files

472
src/views/pqs/bearingCapacity/evaluationList/components/photovoltaic.vue
View File

@@ -17,65 +17,116 @@
</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-button type="primary" icon="el-icon-Download" @click="exportTemplate">导出模板</el-button>
<el-upload action="" :show-file-list="false" :auto-upload="false" :on-change="choose">
<el-button type="primary" class="ml10" icon="el-icon-Upload">离线导入</el-button>
</el-upload>
</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"
<div v-loading="loading">
<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"
value-key="id"
@change="userChange"
>
<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>
<el-option
v-for="item in userList"
:key="item.userId"
:label="item.userName"
:value="item"
/>
</el-select>
</el-descriptions-item>
<el-descriptions-item label="拟接入光伏容量(MVA)" label-align="center" width="25%">
{{ userData?.protocolCapacity }}
</el-descriptions-item>
</el-descriptions>
<el-tabs v-model="activeName" class="mb10" :style="`height: calc(${tabsHeight} / 2 + 100px)`">
<el-tab-pane label="有功功率" name="1" class="mt10">
<MyEChart v-if="activeName == '1'" :options="options1" />
</el-tab-pane>
<el-tab-pane label="无功功率" name="2">
<MyEChart v-if="activeName == '2'" :options="options2" />
</el-tab-pane>
<el-tab-pane label="谐波电流幅值" name="3">
<MyEChart v-if="activeName == '3'" :options="options3" />
</el-tab-pane>
<el-tab-pane label="首端电压模型参数" name="4">
<vxe-table
v-if="activeName == '4'"
height="auto"
v-bind="defaultAttribute"
:data="voltageList"
>
<vxe-column field="name" title="项别模型参数"></vxe-column>
<vxe-column field="c" title="C"></vxe-column>
<vxe-column field="a" title="a"></vxe-column>
<vxe-column field="b" title="b"></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-tab-pane>
</el-tabs>
<div class="bottomBox">
<el-row v-if="showAssess">
<el-col :span="16" :style="`height: calc(${tabsHeight} / 2 - 105px)`">
<vxe-table
style="flex: 1.5"
v-bind="defaultAttribute"
height="auto"
ref="xTable"
:data="tableData"
>
<vxe-colgroup field="group0" title="等级" align="right">
<vxe-column field="name" width="180" title="结果"></vxe-column>
</vxe-colgroup>
<vxe-column field="level1" title="安全">
<template #default="{ row }">
<Select v-if="row.level1 == 1" class="SelectIcon" />
<span v-else>{{ row.level1 }}</span>
</template>
</vxe-column>
<vxe-column field="level2" title="III级预警">
<template #default="{ row }">
<Select v-if="row.level2 == 1" class="SelectIcon" />
<span v-else>{{ row.level2 }}</span>
</template>
</vxe-column>
<vxe-column field="level3" title="II级预警">
<template #default="{ row }">
<Select v-if="row.level3 == 1" class="SelectIcon" />
<span v-else>{{ row.level3 }}</span>
</template>
</vxe-column>
<vxe-column field="level4" title="I级预警">
<template #default="{ row }">
<Select v-if="row.level4 == 1" class="SelectIcon" />
<span v-else>{{ row.level4 }}</span>
</template>
</vxe-column>
</vxe-table>
</el-col>
<el-col :span="8" :style="`height: calc(${tabsHeight} / 2 - 100px)`">
<MyEChart style="flex: 1" :options="pieCharts" />
</el-col>
</el-row>
<el-button type="primary" icon="el-icon-Document" @click="assess">承载能力评估</el-button>
<el-button type="primary" icon="el-icon-Document" @click="assess" v-show="!loading">
承载能力评估
</el-button>
</div>
</div>
</pane>
</splitpanes>
@@ -88,71 +139,74 @@ 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 { Select } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import {
queryCarryCapacityData,
uploadExcel,
queyDetailUser,
queryCarryCapacityQData,
queryCarryCapacityIData,
carryCapacityCal,
getExcelTemplate
} from '@/api/advance-boot/bearingCapacity'
import { useDictData } from '@/stores/dictData'
const monitoringPoint = useMonitoringPoint()
const size = ref(0)
const dictData = useDictData()
const datePickerRef = ref()
const height = mainHeight(80).height
const tabsHeight = mainHeight(260).height
const tableData = ref([
{
id: 10001,
name: '配变首端电压',
role: '/',
num6: '/',
date12: '/',
date13: '/'
level1: '/',
level2: '/',
level3: '/',
level4: '/'
},
{
id: 10002,
name: '配变功率因素',
role: '/',
num6: '/',
date12: '/',
date13: '/'
level1: '/',
level2: '/',
level3: '/',
level4: '/'
},
{
id: 10003,
name: '等效负载率最小值',
role: '/',
date12: '/',
num6: '/',
date13: '/'
level1: '/',
level2: '/',
level3: '/',
level4: '/'
},
{
id: 10004,
name: '各次谐波电流幅值',
role: '/',
date12: '/',
num6: '/',
date13: '/'
level1: '/',
level2: '/',
level3: '/',
level4: '/'
}
])
const voltageList: any = ref([])
const showAssess = ref(false)
const loading = ref(false)
const user = ref('')
const userList = [
{
value: 'Option1',
label: '光伏电站用户1'
},
{
value: 'Option2',
label: '光伏电站用户2'
},
{
value: 'Option3',
label: '光伏电站用户3'
}
]
const options = ref({})
const userList: any = ref([])
const options1 = ref({})
const options2 = ref({})
const options3 = ref({})
const pieCharts = ref({})
const activeName = ref('1')
const userData: any = ref({})
const stringMap: any = ref({})
const p_βminMap: any = ref({})
const i_βmax: any = ref({})
const q_βminMap: any = ref({})
const dotList: any = ref({
name: monitoringPoint.state.lineName.split('>')[3],
id: monitoringPoint.state.lineId,
@@ -165,13 +219,74 @@ onMounted(() => {
}
datePickerRef.value.setTimeOptions([{ label: '周', value: 4 }])
datePickerRef.value.setInterval(4)
info()
})
const info = () => {
queyDetailUser({
pageNum: 1,
pageSize: 1000,
userType: dictData.getBasicData('CARRY_CAPCITY_USER_TYPE', [
'Electrified_Rail_Users',
'Charging_Station_Users',
'Electric_Heating_Load_Users'
])[0]?.id
}).then(res => {
userList.value = res.data.records
})
setTimeout(() => {
onSubmit()
}, 100)
}
// 查询
const onSubmit = () => {
console.log(text.data.data)
const onSubmit = async () => {
if (dotList.value.level != 6) {
return ElMessage.error('请选择线路')
}
loading.value = true
let data: any = []
options.value = {
let form = {
// endTime: datePickerRef.value.timeValue[1],
// lineId: dotList.value.id,
// startTime: datePickerRef.value.timeValue[0],
lineId: '086c7774e30839d30fdfb0544bf776de',
startTime: '2024-02-05',
endTime: '2024-02-11',
userId: dictData.state.area[0].id
}
Promise.all([queryCarryCapacityData(form), queryCarryCapacityQData(form), queryCarryCapacityIData(form)]).then(
res => {
// 有功功率
voltageList.value = []
stringMap.value = res[0].data.stringMap
p_βminMap.value = res[0].data.p_βminMap
q_βminMap.value = res[1].data.q_βminMap
i_βmax.value = res[2].data.i_βmax
for (let k in res[0].data.stringMap) {
voltageList.value.push({
name: k,
c: res[0].data.stringMap[k][0],
a: res[0].data.stringMap[k][1],
b: res[0].data.stringMap[k][2]
})
}
setEChart(1, res[0].data.data)
setEChart(2, res[1].data.data)
setEChart(3, res[2].data.data)
loading.value = false
}
)
}
// 用户变化
const userChange = e => {
userData.value = e
}
const setEChart = (val: any, data: any) => {
let options = {
title: {
text: '在线率统计',
x: 'center',
@@ -180,15 +295,15 @@ const onSubmit = () => {
}
},
xAxis: {
data: text.data.data.filter(item => item.phaseType == 'A').map(item => item.time),
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)))
max: Math.ceil(Math.max(...data.map(item => item.value))),
min: Math.floor(Math.min(...data.map(item => item.value)))
},
legend: {
data: ['A', 'B', 'C']
@@ -203,27 +318,78 @@ const onSubmit = () => {
type: 'line',
// smooth: true,
symbol: 'none',
data: text.data.data.filter(item => item.phaseType == 'A').map(item => item.value.toFixed(3))
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))
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))
data: data.filter(item => item.phaseType == 'C').map(item => item.value.toFixed(3))
}
]
}
val == 1
? (options1.value = options)
: val == 2
? (options2.value = options)
: val == 3
? (options3.value = options)
: ''
}
// 承载能力评估
const assess = () => {
let ChartsList = [
{
name: '安全',
value: 0
},
{
name: 'III级',
value: 0
},
{
name: 'II级',
value: 0
},
{
name: 'I级',
value: 0
},
{
name: '禁止接入',
value: 0
}
]
carryCapacityCal({
startTime: '2024-02-05', //修改
endTime: '2024-02-11', //修改
i_βmax: i_βmax.value,
lineId: '086c7774e30839d30fdfb0544bf776de', //修改
p_βminMap: p_βminMap.value,
q_βminMap: q_βminMap.value,
s_T: 200, //修改
s_pv: 200, //修改
scale: '220', //修改
stringMap: stringMap.value,
userId: '49d45dc6390690874b5df064deec56c7'
}).then(res => {
tableData.value[0][`level` + res.data.utlevel] = 1
tableData.value[1][`level` + res.data.pfTLevel] = 1
tableData.value[2][`level` + res.data.btlevel] = 1
tableData.value[3][`level` + res.data.ilevel] = 1
ChartsList[res.data.reslutLevel - 1].value = 1
showAssess.value = true
})
pieCharts.value = {
title: {
text: '承载能力评估结果',
@@ -237,10 +403,7 @@ const assess = () => {
type: 'scroll',
orient: 'vertical',
left: 10,
top: '10%',
tooltip: {
show: true
}
top: '10%'
},
xAxis: {
@@ -249,51 +412,61 @@ const assess = () => {
yAxis: {
show: false
},
color: ['#77DA63', '#00BFF5', '#FFBF00', '#Ff6600'],
color: ['#77DA63', '#00BFF5', '#FFBF00', '#Ff6600', '#ff0000'],
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
normal: {
show: false
}
]
},
data: ChartsList
}
]
}
showAssess.value = true
}
// 下载模版
const exportTemplate = () => {
getExcelTemplate().then(res => {
let blob = new Blob([res], {
type: "application/vnd.ms-excel;charset=UTF-8",
})
const url = window.URL.createObjectURL(blob)
const link = document.createElement('a') // 创建a标签
link.href = url
// link.download = "电压暂降事件分析报告"; // 设置下载的文件名
link.download = '数据模版' // 设置下载的文件名
document.body.appendChild(link)
link.click() //执行下载
document.body.removeChild(link)
})
}
// 离线导入
const choose = (e: any) => {
if (dotList.value.level != 6) {
return ElMessage.error('请选择线路')
}
let form = {
endTime: datePickerRef.value.timeValue[1],
lineId: dotList.value.id,
startTime: datePickerRef.value.timeValue[0]
}
uploadExcel(e.raw, form).then(res => {
ElMessage.success('导入成功')
})
}
const handleNodeClick = (data: any, node: any) => {
console.log('🚀 ~ handleNodeClick ~ data:', data)
dotList.value = data
}
</script>
<style lang="scss">
<style lang="scss" scoped>
.splitpanes.default-theme .splitpanes__pane {
background: #eaeef1;
}
@@ -305,7 +478,42 @@ const handleNodeClick = (data: any, node: any) => {
.el-button {
position: absolute;
top: 0;
z-index: 1;
right: 10px;
}
}
::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;
}
.SelectIcon {
height: 30px;
margin-top: 5px;
color: blue;
}
</style>