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

联调承载能力评估 技术监督ui绘制

Browse Source
This commit is contained in:
GGJ
2024-03-15 16:31:06 +08:00
parent 02cb3fa518
commit 1b6b8c8777
8 changed files with 571 additions and 331 deletions
Download Patch File Download Diff File Expand all files Collapse all files

637
src/views/pqs/bearingCapacity/evaluationList/components/charge.vue
View File

@@ -1,115 +1,213 @@
<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="150px" style="max-width: 500px; margin: auto">
<el-form-item label="接线类型">
<el-select v-model="form.ptType" collapse-tags placeholder="请选择接线类型">
<el-option
v-for="item in connection"
:key="item.value"
:label="item.name"
:value="item.value"
<div>
<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
ref="formRef"
:model="form"
label-width="150px"
:rules="rules"
style="max-width: 500px; margin: auto"
>
<el-form-item label="用户模式" prop="ptType">
<el-select v-model="form.userMode" placeholder="请选择用户模式">
<el-option
v-for="item in ModeList"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item label="接线类型" prop="ptType">
<el-select
v-model="form.ptType"
@change="form.connectionMode = ''"
placeholder="请选择接线类型"
>
<el-option
v-for="item in connection"
:key="item.value"
:label="item.name"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="连接方式" v-if="form.ptType == 0" prop="connectionMode">
<el-select v-model="form.connectionMode" clearable placeholder="请选择连接方式">
<el-option
v-for="item in method"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item label="功率因数" prop="k">
<el-select v-model="form.k" clearable placeholder="请选择功率因数">
<el-option
v-for="item in factor"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item label="电压等级" prop="scale">
<el-select v-model="form.scale" clearable 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)" prop="deviceCapacity">
<el-input-number
v-model="form.deviceCapacity"
style="width: 100%"
:min="0.000001"
placeholder="请填入供电设备容量"
/>
</el-select>
</el-form-item>
<el-form-item label="连接方式" v-if="form.ptType == 0">
<el-select
v-model="form.connectionMode"
clearable
collapse-tags
placeholder="请选择连接方式"
>
<el-option v-for="item in method" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="功率因数">
<el-select v-model="form.k" clearable collapse-tags placeholder="请选择功率因数">
<el-option v-for="item in factor" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="电压等级">
<el-select v-model="form.scale" clearable collapse-tags placeholder="请选择电压等级">
<el-option
v-for="item in levelList"
:key="item.id"
:label="item.name"
:value="item.id"
</el-form-item>
<el-form-item label="最小短路容量(MVA)" prop="shortCapacity">
<el-input-number
v-model="form.shortCapacity"
style="width: 100%"
:min="0.000001"
placeholder="请填入最小短路容量"
/>
</el-select>
</el-form-item>
<el-form-item label="供电设备容量(MVA)">
<el-input-number v-model="form.deviceCapacity" style="width: 100%;" :min="0" placeholder="请填入供电设备容量" />
</el-form-item>
<el-form-item label="最小短路容量(MVA)">
<el-input-number v-model="form.shortCapacity" style="width: 100%;" :min="0" placeholder="请填入最小短路容量" />
</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>
</el-form-item>
</el-form>
</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="谐波次数" width="180"></vxe-column>
<vxe-column
v-for="item in column"
:field="item.field"
:title="item.title"
:width="item.width"
></vxe-column>
</vxe-table>
</el-card>
</el-col>
<el-col :span="8" :style="`height: calc(${height} / 2 - 100px)`">
<MyEChart style="flex: 1" :options="pieCharts" />
<el-col :span="16">
<el-card>
<template #header>
<div class="card-header">
<span>干扰源用户</span>
<el-button type="primary" size="default" icon="el-icon-Plus" @click="add">新增</el-button>
</div>
</template>
<div :style="`height: calc(${height} / 2 - 128px);overflow-y: auto`">
<vxe-table v-bind="defaultAttribute" height="auto" :data="tableData">
<vxe-column field="userName" title="用户名称"></vxe-column>
<vxe-column field="userType" title="用户类型" :formatter="formatter"></vxe-column>
<vxe-column field="voltage" title="电压等级(V)" :formatter="formatter"></vxe-column>
<vxe-column field="protocolCapacity" title="用户协议容量(MVA)"></vxe-column>
<vxe-column field="num6" title="操作" width="120">
<template #default="{ row }">
<el-button type="danger" link @click="deleteData(row)">删除</el-button>
</template>
</vxe-column>
</vxe-table>
</div>
</el-card>
</el-col>
</el-row>
<el-button type="primary" icon="el-icon-Document" @click="assess">承载能力评估</el-button>
<div class="bottomBox">
<div v-if="showFlag">
<div style="height: 70px">
一级评估：0.02% &lt; 0.1%
<!-- <span>{{ 0.02 < outcome.firstresult && outcome.firstresult < 0.1 ? '满足' : '不满足' }}</span> -->
<el-tag v-if="0.02 < outcome.firstresult && outcome.firstresult < 0.1" type="success" effect="dark">
满足
</el-tag>
<el-tag v-else type="warning" effect="dark">不满足</el-tag>
</div>
<div
style="height: 20px"
v-if="!(0.02 < outcome.firstresult && outcome.firstresult < 0.1)"
class="mb10"
>
二级评估:
<el-row>
<el-col :span="16" :style="`height: calc(${height} / 2 - 100px)`">
<vxe-table style="flex: 1.5" v-bind="defaultAttribute" height="auto" :data="level2Data">
<vxe-column field="name" title="谐波次数" width="180"></vxe-column>
<vxe-column v-for="item in column" :field="item.field" :title="item.title">
<template #default="row">
<span @click="log(row)" v-if="row.row.name == '是否允许值'">
<Select v-if="row.row[row.column.field]" class="SelectIcon" />
<InfoFilled v-else class="SelectIcon" style="color: #f38d07;"/>
</span>
<span @click="log(row)" v-else>{{ row.row[row.column.field] }}</span>
</template>
</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>
</div>
</div>
<el-button type="primary" icon="el-icon-Document" @click="assess">承载能力评估</el-button>
</div>
<el-dialog v-model="dialogVisible" title="新增干扰源类型" width="70%">
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="用户类型">
<el-select v-model="formInline.userType" placeholder="请选择用户类型">
<el-option v-for="item in uesrList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="电压等级">
<el-select v-model="formInline.voltage" 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>
<el-button type="primary" icon="el-icon-Search" @click="getUser">查询</el-button>
</el-form-item>
</el-form>
<vxe-table v-bind="defaultAttribute" height="400px" ref="xTable" :data="userData">
<vxe-column type="checkbox" width="60"></vxe-column>
<vxe-column field="userName" title="用户名称"></vxe-column>
<vxe-column field="userType" title="用户类型" :formatter="formatter"></vxe-column>
<vxe-column field="voltage" title="电压等级(V)" :formatter="formatter"></vxe-column>
<vxe-column field="protocolCapacity" title="用户协议容量(MVA)"></vxe-column>
</vxe-table>
<template #footer>
<div class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="addUse">确定</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ref, reactive, onMounted } 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'
import { Select ,InfoFilled} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { queyDetailUser, carryCapacityEvaluate } from '@/api/advance-boot/bearingCapacity'
const dictData = useDictData()
const height = mainHeight(80).height
const levelList = dictData.getBasicData('Dev_Voltage_Stand')
const connection: any = dictData.getBasicData('Dev_Connect')
const method = dictData.getBasicData('Connet_Group_Way')
const method = dictData.getBasicData('carry_capcity_connection_mode')
const ModeList = dictData.getBasicData('carry_capcity_user_mode')
const uesrList = dictData.getBasicData('CARRY_CAPCITY_USER_TYPE', ['Power_Station_Users'])
const xTable = ref()
const formRef = ref()
const outcome: any = ref([])
const factor = [
{
name: 0.95,
@@ -137,226 +235,180 @@ const factor = [
}
]
const tableData = ref([
const dialogVisible = ref(false)
const showFlag = ref(false)
const tableData = ref([])
const level2Data = ref([
{
name: '谐波电流幅值(A)',
role: '/',
num6: '/',
date12: '/',
date13: '/'
name: '谐波电流幅值(A)'
},
{
name: '国标限值(A)',
role: '/',
num6: '/',
date12: '/',
date13: '/'
name: '国际限值(A)'
},
{
name: '是否允许值',
role: '/',
date12: '/',
num6: '/',
date13: '/'
}
])
const column = ref([
{
title: '2次',
field: 'role',
width: '80px'
},
{
title: '3次',
field: 'role',
width: '80px'
},
{
title: '4次',
field: 'role',
width: '80px'
},
{
title: '5次',
field: 'role',
width: '80px'
},
{
title: '6次',
field: 'role',
width: '80px'
},
{
title: '7次',
field: 'role',
width: '80px'
},
{
title: '8次',
field: 'role',
width: '80px'
},
{
title: '9次',
field: 'role',
width: '80px'
},
{
title: '10次',
field: 'role',
width: '80px'
},
{
title: '11次',
field: 'role',
width: '80px'
},
{
title: '12次',
field: 'role',
width: '80px'
},
{
title: '13次',
field: 'role',
width: '80px'
},
{
title: '14次',
field: 'role',
width: '80px'
},
{
title: '15次',
field: 'role',
width: '80px'
},
{
title: '16次',
field: 'role',
width: '80px'
},
{
title: '17次',
field: 'role',
width: '80px'
},
{
title: '18次',
field: 'role',
width: '80px'
},
{
title: '19次',
field: 'role',
width: '80px'
},
{
title: '20次',
field: 'role',
width: '80px'
},
{
title: '21次',
field: 'role',
width: '80px'
},
{
title: '22次',
field: 'role',
width: '80px'
},
{
title: '23次',
field: 'role',
width: '80px'
},
{
title: '24次',
field: 'role',
width: '80px'
},
{
title: '25次',
field: 'role',
width: '80px'
name: '是否允许值'
}
])
const column: any = ref([])
const userData = ref([])
const formInline = ref({
userType: uesrList[0].id,
voltage: levelList[0].id,
pageNum: 1,
pageSize: 10000
})
const form: any = ref({
ptType: '0',
connectionMode: '',
userMode: '',
k: '1',
scale: '',
shortCapacity: '',
deviceCapacity: ''
shortCapacity: 1,
deviceCapacity: 1,
userList: []
})
const rules = {
userMode: [{ required: true, message: '请选用户', trigger: 'change' }],
ptType: [{ required: true, message: '请选择接线类型', trigger: 'change' }],
connectionMode: [{ required: true, message: '请选择连接方式', trigger: 'change' }],
k: [{ required: true, message: '请选择功率因数', trigger: 'change' }],
scale: [{ required: true, message: '请选择电压等级', trigger: 'change' }],
shortCapacity: [{ required: true, message: '请填入供电设备容量', trigger: 'blur' }],
deviceCapacity: [{ required: true, message: '请填入最小短路容量', trigger: 'blur' }]
}
const pieCharts = ref({})
// 新增
const add = () => {
dialogVisible.value = true
xTable.value?.clearCheckboxRow()
xTable.value?.setCheckboxRow(tableData.value, true)
}
// 查询用户
const getUser = () => {
queyDetailUser(formInline.value).then(res => {
userData.value = res.data.records
})
}
// 添加用户
const addUse = () => {
tableData.value = []
tableData.value.push(...xTable.value.getCheckboxRecords())
// const res = new Map()
// tableData.value = tableData.value.filter((arr: any) => !res.has(arr.userId) && res.set(arr.userId, 1))
dialogVisible.value = false
}
// 删除
const deleteData = (row: any) => {
tableData.value = tableData.value.filter((item: any) => {
return !row.userId.includes(item.userId)
})
}
// 承载能力评估
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}'
if (tableData.value.length == 0) {
return ElMessage.warning('请选择用户')
}
formRef.value.validate((valid: any) => {
if (valid) {
column.value = []
let ChartsList = [
{
name: '安全',
value: 0
},
labelLine: {
length: 1,
length2: 20
{
name: 'III级',
value: 0
},
{
name: 'II级',
value: 0
},
{
name: 'I级',
value: 0
},
{
name: '禁止接入',
value: 0
}
]
form.value.userList = tableData.value
carryCapacityEvaluate(form.value).then(res => {
outcome.value = res.data
res.data.iresultList.forEach((item: any) => {
column.value.push({
title: item.time + '次',
field: 'num' + item.time
})
level2Data.value[0]['num' + item.time] = item.i.toFixed(3)
level2Data.value[1]['num' + item.time] = item.i_limit.toFixed(3)
level2Data.value[2]['num' + item.time] = item.i < item.i_limit ? true : false
})
showFlag.value = true
res.data.reslutLevel == null ? '' : (ChartsList[res.data.reslutLevel - 1].value = 1)
})
pieCharts.value = {
title: {
text: '承载能力评估结果',
x: 'center',
top: `30px`,
textStyle: {
fontWeight: 'normal'
}
},
legend: {
type: 'scroll',
orient: 'vertical',
left: 10,
top: '10%'
},
data: [
xAxis: {
show: false
},
yAxis: {
show: false
},
color: ['#77DA63', '#00BFF5', '#FFBF00', '#Ff6600', '#ff0000'],
dataZoom: { show: false },
series: [
{
name: '安全',
value: 1
},
{
name: 'III级',
value: 3
},
{
name: 'II级',
value: 3
},
{
name: 'I级',
value: 2
type: 'pie',
center: ['50%', '50%'],
radius: ['35%', '48%'],
label: {
normal: {
show: false
}
},
data: ChartsList
}
]
}
]
}
})
}
// 过滤数据
const formatter = (row: any) => {
if (row.column.field == 'userType') {
return uesrList.filter(item => item.id == row.cellValue)[0].name
} else if (row.column.field == 'voltage') {
return levelList.filter(item => item.id == row.cellValue)[0].name
} else {
return row.cellValue
}
}
const log = row => {
console.log('🚀 ~ log ~ row:', row)
}
onMounted(() => {
getUser()
})
</script>
<style lang="scss" scoped>
.bottomBox {
@@ -369,7 +421,12 @@ const assess = () => {
}
.card-header {
font-weight: 600;
display: FLEX;
display: flex;
justify-content: space-between;
}
.SelectIcon {
height: 30px;
margin-top: 5px;
color: blue;
}
</style>