联调二级评估页面
This commit is contained in:
guanj
@@ -1,169 +1,163 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-row :gutter="30" class="mb20">
|
||||
<el-col :span="10">
|
||||
<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"
|
||||
:disabled="props.rowList.id != undefined"
|
||||
style="max-width: 500px; margin: auto"
|
||||
>
|
||||
<el-form-item label="用户模式" prop="userMode">
|
||||
<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-form-item>
|
||||
<el-form-item label="最小短路容量(MVA)" prop="shortCapacity">
|
||||
<el-input-number
|
||||
v-model="form.shortCapacity"
|
||||
style="width: 100%"
|
||||
:min="0.000001"
|
||||
placeholder="请填入最小短路容量"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div v-loading="loading">
|
||||
<div class="card-container mb10">
|
||||
<el-card style="width: 700px">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span style="line-height: 32px">公共连接点参数</span>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="14">
|
||||
<el-card>
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>干扰源用户：</span>
|
||||
<el-select
|
||||
v-model="userId"
|
||||
placeholder="请选择用户"
|
||||
style="width: 240px; font-weight: normal"
|
||||
:disabled="props.rowList.id != undefined"
|
||||
@change="selChange"
|
||||
>
|
||||
</template>
|
||||
<div :style="`height: calc(${height} - 380px);overflow-y: auto;max-height:350px`">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
label-width="150px"
|
||||
:rules="rules"
|
||||
:disabled="props.rowList.id != undefined"
|
||||
style="max-width: 500px; margin: auto"
|
||||
>
|
||||
<el-form-item label="用户模式" prop="userMode">
|
||||
<el-select v-model="form.userMode" placeholder="请选择用户模式">
|
||||
<el-option
|
||||
v-for="item in userData"
|
||||
:key="item.userId"
|
||||
:label="item.userName"
|
||||
:value="item.userId"
|
||||
v-for="item in ModeList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
</template>
|
||||
<div :style="`height: calc(${height} / 2 - 128px);overflow-y: auto`">
|
||||
<vxe-table
|
||||
v-bind="defaultAttribute"
|
||||
ref="vxeRef"
|
||||
height="auto"
|
||||
v-loading="loading"
|
||||
:data="equipmentList"
|
||||
>
|
||||
<vxe-column field="devName" title="终端名称"></vxe-column>
|
||||
<vxe-column field="devScale" title="电压等级" :formatter="formatter"></vxe-column>
|
||||
<vxe-column field="protocolCapacity" title="终端容量(MVA)"></vxe-column>
|
||||
</vxe-table>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</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-form-item>
|
||||
<el-form-item label="最小短路容量(MVA)" prop="shortCapacity">
|
||||
<el-input-number
|
||||
v-model="form.shortCapacity"
|
||||
style="width: 100%"
|
||||
:min="0.000001"
|
||||
placeholder="请填入最小短路容量"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<div class="bottomBox">
|
||||
<el-card class="ml10" style="flex: 1">
|
||||
<template #header>
|
||||
<div>
|
||||
<span>干扰源用户：</span>
|
||||
<el-select
|
||||
v-model="userId"
|
||||
placeholder="请选择用户"
|
||||
size="small"
|
||||
style="width: 240px"
|
||||
:disabled="props.rowList.id != undefined"
|
||||
@change="selChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in userData"
|
||||
:key="item.userId"
|
||||
:label="item.userName"
|
||||
:value="item.userId"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
</template>
|
||||
<div :style="`height: calc(${height} - 380px);overflow-y: auto;max-height:350px`">
|
||||
<vxe-table v-bind="defaultAttribute" ref="vxeRef" height="auto" :data="equipmentList">
|
||||
<vxe-column field="devName" title="终端名称"></vxe-column>
|
||||
<vxe-column field="devScale" title="电压等级" :formatter="formatter"></vxe-column>
|
||||
<vxe-column field="protocolCapacity" title="终端容量(MVA)"></vxe-column>
|
||||
</vxe-table>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<div class="bottomBox pt1" id="exportId">
|
||||
<div v-if="showFlag">
|
||||
<div style="height: 70px">
|
||||
一级评估：{{ outcome.firstResult }}%
|
||||
<el-divider content-position="left">一级评估</el-divider>
|
||||
<div style="height: 40px" class="pl30">
|
||||
结果: {{ outcome.firstResult }}%
|
||||
{{ outcome.firstResult > 0.1 ? '>' : (outcome.firstResult = 0.1 ? '=' : '<') }} 0.1%
|
||||
<!-- <span>{{ 0.02 < outcome.firstResult && outcome.firstResult < 0.1 ? '满足' : '不满足' }}</span> -->
|
||||
|
||||
<el-tag v-if="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="!(outcome.firstResult < 0.1)" class="mb10">
|
||||
二级评估:
|
||||
<el-row>
|
||||
<el-col :span="16" :style="`height: calc(${height} / 2 - 100px)`">
|
||||
<div style="height: 220px" v-if="!(outcome.firstResult < 0.1)" class="mb10">
|
||||
<el-divider content-position="left">二级评估</el-divider>
|
||||
<div class="evaluateTheResults">
|
||||
<div style="height: 200px; flex: 1">
|
||||
<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 v-if="row.row.name == '是否允许值'">
|
||||
<Select v-if="row.row[row.column.field]" class="SelectIcon" />
|
||||
<InfoFilled v-else class="SelectIcon" style="color: #f38d07" />
|
||||
<CloseBold v-else class="SelectIcon" style="color: #f38d07" />
|
||||
</span>
|
||||
<span 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)`">
|
||||
</div>
|
||||
<div style="height: 200px; width: 350px">
|
||||
<MyEChart style="flex: 1" :options="pieCharts" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-button type="primary" icon="el-icon-Document" @click="assess" v-if="props.rowList.id == undefined">
|
||||
承载能力评估
|
||||
</el-button>
|
||||
<div class="button-group">
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-VideoPlay"
|
||||
@click="assess"
|
||||
class="mt10"
|
||||
v-if="props.rowList.id == undefined"
|
||||
>
|
||||
启动评估
|
||||
</el-button>
|
||||
<el-button type="primary" icon="el-icon-Download" @click="onExport" class="mt10" v-if="showFlag">
|
||||
导出结果
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-dialog draggable v-model="dialogVisible" title="新增干扰源类型" width="70%">
|
||||
@@ -189,7 +183,8 @@ 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 html2canvas from 'html2canvas'
|
||||
import { Select, CloseBold } from '@element-plus/icons-vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { queyDetailUser, carryCapacityEvaluate, queyDeviceList } from '@/api/advance-boot/bearingCapacity'
|
||||
const props = defineProps(['rowList'])
|
||||
@@ -232,6 +227,7 @@ const factor = [
|
||||
id: 1.0
|
||||
}
|
||||
]
|
||||
|
||||
const dialogVisible = ref(false)
|
||||
const showFlag = ref(false)
|
||||
const tableData = ref([])
|
||||
@@ -296,11 +292,13 @@ const assess = () => {
|
||||
if (equipmentList.value.length == null) {
|
||||
return ElMessage.warning('请选择用户')
|
||||
}
|
||||
loading.value = true
|
||||
formRef.value.validate((valid: any) => {
|
||||
if (valid) {
|
||||
form.value.devList = equipmentList.value
|
||||
carryCapacityEvaluate(form.value).then(res => {
|
||||
rendering(res.data)
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
})
|
||||
@@ -314,15 +312,15 @@ const rendering = (row: any) => {
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
name: 'III级',
|
||||
name: 'III级预警',
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
name: 'II级',
|
||||
name: 'II级预警',
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
name: 'I级',
|
||||
name: 'I级预警',
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
@@ -348,34 +346,34 @@ const rendering = (row: any) => {
|
||||
showFlag.value = true
|
||||
row.reslutLevel == null ? '' : (ChartsList[row.reslutLevel - 1].value = 1)
|
||||
pieCharts.value = {
|
||||
title: {
|
||||
text: '承载能力评估结果',
|
||||
x: 'center',
|
||||
top: `30px`,
|
||||
textStyle: {
|
||||
fontWeight: 'normal'
|
||||
}
|
||||
},
|
||||
// title: {
|
||||
// text: '评估结果',
|
||||
// x: 'center',
|
||||
|
||||
// textStyle: {
|
||||
// fontWeight: 'normal'
|
||||
// }
|
||||
// },
|
||||
legend: {
|
||||
type: 'scroll',
|
||||
orient: 'vertical',
|
||||
left: 10,
|
||||
top: '10%'
|
||||
right: '10px',
|
||||
selectedMode: false // 是否允许点击
|
||||
},
|
||||
|
||||
toolbox: { show: false },
|
||||
xAxis: {
|
||||
show: false
|
||||
},
|
||||
yAxis: {
|
||||
show: false
|
||||
},
|
||||
color: ['#339966', '#00BFF5', '#FFBF00', '#Ff6600', '#ff0000', '#07CCCA'],
|
||||
color: ['#2E7D32', '#0288D1', '#F57C00', '#E64A19', '#C62828', '#00897B'],
|
||||
dataZoom: { show: false },
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
center: ['60%', '70%'],
|
||||
radius: ['35%', '48%'],
|
||||
center: ['40%', '55%'],
|
||||
radius: ['55%', '68%'],
|
||||
label: {
|
||||
normal: {
|
||||
show: false
|
||||
@@ -383,7 +381,48 @@ const rendering = (row: any) => {
|
||||
},
|
||||
data: ChartsList
|
||||
}
|
||||
]
|
||||
],
|
||||
options: {
|
||||
title: [
|
||||
{
|
||||
text: '评估结果',
|
||||
left: '27%'
|
||||
},
|
||||
{
|
||||
text:
|
||||
row.reslutLevel == 6
|
||||
? '允许接入'
|
||||
: row.reslutLevel == 5
|
||||
? '禁止接入'
|
||||
: row.reslutLevel == 4
|
||||
? 'I级预警'
|
||||
: row.reslutLevel == 3
|
||||
? 'II级预警'
|
||||
: row.reslutLevel == 2
|
||||
? 'III级预警'
|
||||
: row.reslutLevel == 1
|
||||
? '安全'
|
||||
: '',
|
||||
left: row.reslutLevel == 1 ? '33%' : '29%',
|
||||
top: '48%',
|
||||
textStyle: {
|
||||
color:
|
||||
row.reslutLevel == 6
|
||||
? '#00897B'
|
||||
: row.reslutLevel == 5
|
||||
? '#C62828'
|
||||
: row.reslutLevel == 4
|
||||
? '#E64A19'
|
||||
: row.reslutLevel == 3
|
||||
? '#F57C00'
|
||||
: row.reslutLevel == 2
|
||||
? '#0288D1'
|
||||
: '#2E7D32',
|
||||
foontWeight: '500'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -400,21 +439,34 @@ const formatter = (row: any) => {
|
||||
}
|
||||
}
|
||||
// 查询终端
|
||||
const selChange = (e: any) => {
|
||||
const selChange = async (e: any) => {
|
||||
loading.value = true
|
||||
queyDeviceList({
|
||||
await queyDeviceList({
|
||||
userId: e
|
||||
}).then(res => {
|
||||
loading.value = false
|
||||
equipmentList.value = res.data
|
||||
})
|
||||
loading.value = false
|
||||
}
|
||||
// 导出
|
||||
const onExport = () => {
|
||||
// 转换成canvas
|
||||
html2canvas(document.getElementById('exportId'), {
|
||||
scale: 2
|
||||
}).then(function (canvas) {
|
||||
// 创建a标签，实现下载
|
||||
let creatIMg = document.createElement('a')
|
||||
creatIMg.download = '光伏电站承载能力评估结果.png' // 设置下载的文件名，
|
||||
creatIMg.href = canvas.toDataURL() // 下载url
|
||||
creatIMg.click()
|
||||
creatIMg.remove() // 下载之后把创建的元素删除
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getUser()
|
||||
formRef.value?.resetFields()
|
||||
// 查看
|
||||
console.log('🚀 ~ onMounted ~ props.rowList:', props.rowList)
|
||||
|
||||
if (props.rowList.userId != undefined) {
|
||||
form.value = props.rowList
|
||||
@@ -427,18 +479,30 @@ onMounted(() => {
|
||||
<style lang="scss" scoped>
|
||||
.bottomBox {
|
||||
position: relative;
|
||||
.el-button {
|
||||
.button-group {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
top: 0px;
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
.card-header {
|
||||
font-weight: 600;
|
||||
}
|
||||
// .card-header {
|
||||
// font-weight: 600;
|
||||
// }
|
||||
.SelectIcon {
|
||||
height: 30px;
|
||||
height: 18px;
|
||||
margin-top: 5px;
|
||||
color: blue;
|
||||
}
|
||||
:deep(.el-select__placeholder) {
|
||||
span {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
.card-container {
|
||||
display: flex;
|
||||
}
|
||||
.evaluateTheResults {
|
||||
display: flex;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
></bearingTree>
|
||||
</pane>
|
||||
<pane style="background: #fff">
|
||||
<TableHeader :showSearch="false">
|
||||
<TableHeader :showSearch="false" v-show="props.rowList.id == undefined">
|
||||
<template #select>
|
||||
<el-form-item label="时间">
|
||||
<DatePicker ref="datePickerRef"></DatePicker>
|
||||
@@ -32,92 +32,87 @@
|
||||
</el-upload>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<!-- <el-form :inline="true" v-show="props.rowList.id == undefined">
|
||||
<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-Download" @click="exportTemplate">导出模板</el-button>
|
||||
<el-upload action="" accept=".xlsx" :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> -->
|
||||
|
||||
<div v-loading="loading">
|
||||
<el-descriptions class="mb10" title="基础数据" :column="2" size="" border>
|
||||
<el-descriptions-item label="待评估用户" label-align="center" width="25%">
|
||||
<div v-loading="loading" class="pt5">
|
||||
<el-divider content-position="left">基础数据</el-divider>
|
||||
<el-descriptions class="mb10" :column="4" size="" border>
|
||||
<el-descriptions-item label="用户名称" label-align="center" width="20%">
|
||||
<el-select
|
||||
v-model="user"
|
||||
placeholder="请选择待评估用户"
|
||||
placeholder="请选择用户名称"
|
||||
size="small"
|
||||
filterable
|
||||
:disabled="props.rowList.id != undefined"
|
||||
style="width: 240px"
|
||||
v-if="props.rowList.id == undefined"
|
||||
style="width: 100%"
|
||||
value-key="userId"
|
||||
@change="userChange"
|
||||
>
|
||||
<el-option v-for="item in userList" :key="item" :label="item.userName" :value="item" />
|
||||
</el-select>
|
||||
<span v-else>{{ props.rowList.userName }}</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="拟接入光伏容量(MVA)" label-align="center" width="25%">
|
||||
{{ userData?.protocolCapacity }}
|
||||
<el-descriptions-item label="拟接入光伏容量" label-align="center" width="10%">
|
||||
{{ userData?.protocolCapacity }}MVA
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="电压等级" label-align="center" width="25%">
|
||||
<el-descriptions-item label="电压等级" label-align="center" width="10%">
|
||||
{{ voltageLevelArr.filter(item => item.id === userData?.voltage)[0]?.name }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="额定容量(MVA)" label-align="center" width="25%">
|
||||
{{ lineList?.standardCapacity }}
|
||||
<el-descriptions-item label="额定容量" label-align="center" width="10%">
|
||||
{{ lineList?.standardCapacity }}MVA
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<el-tabs v-model="activeName" class="mb10" :style="`height: calc(${tabsHeight} / 2 + 50px)`">
|
||||
<el-tab-pane label="有功功率" name="1" class="mt10">
|
||||
<MyEChart :options="options1" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="无功功率" name="2" class="mt10">
|
||||
<MyEChart :options="options2" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="谐波电流幅值" name="3" class="mt10" style="position: relative">
|
||||
<el-select
|
||||
v-model="harmonicValue"
|
||||
style="position: absolute; z-index: 99; top: -10px; right: 185px; width: 80px"
|
||||
placeholder="请选择谐波"
|
||||
@change="onSubmit"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in harmonic"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
<div :style="`height: calc(${tabsHeight} - ${props.rowList.id == undefined ? '256px' : '188px'})`">
|
||||
<el-tabs
|
||||
v-model="activeName"
|
||||
class="mb10"
|
||||
v-if="showTabs"
|
||||
@tab-change="tabChange"
|
||||
:style="`height: calc(${tabsHeight} - ${
|
||||
props.rowList.id == undefined ? '256px' : '188px'
|
||||
})`"
|
||||
>
|
||||
<el-tab-pane label="有功功率" name="1" class="mt10">
|
||||
<MyEChart :options="options1" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="无功功率" name="2" class="mt10">
|
||||
<MyEChart :options="options" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="谐波电流幅值" name="3" class="mt10" style="position: relative">
|
||||
<div style="position: absolute; z-index: 99; top: 10px; right: 200px; width: 80px">
|
||||
<el-select
|
||||
v-model="harmonicValue"
|
||||
placeholder="请选择谐波"
|
||||
@change="amplitudeQuery"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in harmonic"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
|
||||
<MyEChart :options="options3" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="首端电压模型参数" name="4">
|
||||
<vxe-table height="auto" v-bind="defaultAttribute" :data="voltageList">
|
||||
<!-- <vxe-column field="name" title="项别模型参数"></vxe-column> -->
|
||||
<vxe-colgroup field="group0" title="模型参数">
|
||||
<vxe-column field="name" width="180" title="相别"></vxe-column>
|
||||
</vxe-colgroup>
|
||||
<MyEChart :options="options" v-loading="currentLod" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="首端电压模型参数" name="4">
|
||||
<vxe-table height="auto" v-bind="defaultAttribute" :data="voltageList">
|
||||
<vxe-colgroup field="group0" title="模型参数">
|
||||
<vxe-column field="name" width="180" title="相别"></vxe-column>
|
||||
</vxe-colgroup>
|
||||
|
||||
<vxe-column field="a" title="a"></vxe-column>
|
||||
<vxe-column field="b" title="b"></vxe-column>
|
||||
<vxe-column field="c" title="c"></vxe-column>
|
||||
</vxe-table>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<vxe-column field="a" title="a"></vxe-column>
|
||||
<vxe-column field="b" title="b"></vxe-column>
|
||||
<vxe-column field="c" title="c"></vxe-column>
|
||||
</vxe-table>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
|
||||
<el-divider content-position="left" v-show="showBtn">评估结果</el-divider>
|
||||
<div class="bottomBox">
|
||||
<el-row v-if="showAssess">
|
||||
<el-col
|
||||
:span="16"
|
||||
:style="`height: calc(${tabsHeight} / 2 - ${
|
||||
props.rowList.id == undefined ? 12 + 45 : 12
|
||||
}px)`"
|
||||
>
|
||||
<div class="evaluateTheResults" id="evaluateTheResults" v-if="showAssess">
|
||||
<div style="height: 250px; flex: 1">
|
||||
<vxe-table
|
||||
style="flex: 1.5"
|
||||
v-bind="defaultAttribute"
|
||||
@@ -130,47 +125,45 @@
|
||||
</vxe-colgroup>
|
||||
<vxe-column field="level1" title="安全">
|
||||
<template #default="{ row }">
|
||||
<Select v-if="row.level1 == 1" class="SelectIcon" />
|
||||
<Select v-if="row.level1 == 1" class="SelectIcon" style="color: #2E7D32" />
|
||||
<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" />
|
||||
<Select v-if="row.level2 == 1" class="SelectIcon" style="color: #0288D1" />
|
||||
<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" />
|
||||
<Select v-if="row.level3 == 1" class="SelectIcon" style="color: #F57C00" />
|
||||
<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" />
|
||||
<Select v-if="row.level4 == 1" class="SelectIcon" style="color: #C62828" />
|
||||
<span v-else>{{ row.level4 }}</span>
|
||||
</template>
|
||||
</vxe-column>
|
||||
</vxe-table>
|
||||
</el-col>
|
||||
<el-col
|
||||
:span="8"
|
||||
:style="`height: calc(${tabsHeight} / 2 - ${
|
||||
props.rowList.id == undefined ? 62 + 45 : 62
|
||||
}px)`"
|
||||
>
|
||||
</div>
|
||||
<div style="height: 250px; width: 350px">
|
||||
<MyEChart style="flex: 1" :options="pieCharts" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-Document"
|
||||
icon="el-icon-VideoPlay"
|
||||
@click="assess"
|
||||
v-show="showBtn && props.rowList.id == undefined"
|
||||
v-if="showBtn && props.rowList.id == undefined && !showAssess"
|
||||
>
|
||||
承载能力评估
|
||||
启动评估
|
||||
</el-button>
|
||||
<el-button type="primary" icon="el-icon-Download" @click="onExport" v-if="showAssess">
|
||||
导出结果
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -202,13 +195,15 @@ import {
|
||||
carryCapacityCal,
|
||||
getExcelTemplate,
|
||||
getLineDetailData,
|
||||
modelTraining
|
||||
modelTraining,
|
||||
queryResultbyCondition
|
||||
} from '@/api/advance-boot/bearingCapacity'
|
||||
import html2canvas from 'html2canvas'
|
||||
import { yMethod } from '@/utils/echartMethod'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
const props = defineProps(['rowList'])
|
||||
const harmonic = harmonicOptions.filter(item => item.value < 26)
|
||||
|
||||
const currentLod = ref(false)
|
||||
const monitoringPoint = useMonitoringPoint()
|
||||
const size = ref(0)
|
||||
const dictData = useDictData()
|
||||
@@ -216,7 +211,7 @@ const datePickerRef = ref()
|
||||
const height = mainHeight(80).height
|
||||
const tabsHeight = mainHeight(260).height
|
||||
const voltageLevelArr = dictData.getBasicData('Dev_Voltage_Stand')
|
||||
const tableData = ref([
|
||||
const tableData: any = ref([
|
||||
{
|
||||
name: '配变首端电压',
|
||||
level1: '/',
|
||||
@@ -256,10 +251,13 @@ const loading = ref(false)
|
||||
const user = ref('')
|
||||
const userList: any = ref([])
|
||||
const lineList: any = ref([])
|
||||
const options = ref({})
|
||||
const options1 = ref({})
|
||||
const options2 = ref({})
|
||||
const options3 = ref({})
|
||||
const pieCharts = ref({})
|
||||
const showTabs = ref(false)
|
||||
|
||||
const activeName = ref('1')
|
||||
const userData: any = ref({})
|
||||
const stringMap: any = ref({})
|
||||
@@ -292,16 +290,26 @@ const info = () => {
|
||||
])[0]?.id
|
||||
}).then(res => {
|
||||
userList.value = res.data.records
|
||||
user.value = userList.value[0] || {}
|
||||
userData.value = res.data.records[0] || {}
|
||||
|
||||
if (props.rowList.id != undefined) {
|
||||
user.value = userList.value.filter(item => item.userId == props.rowList.userId)[0]
|
||||
userChange(user.value)
|
||||
} else {
|
||||
user.value = userList.value[0] || {}
|
||||
userData.value = res.data.records[0] || {}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 查询
|
||||
const onSubmit = async () => {
|
||||
activeName.value = '1'
|
||||
|
||||
if (dotList.value.level != 6) {
|
||||
return ElMessage.warning('请选择线路')
|
||||
}
|
||||
showAssess.value = false
|
||||
showTabs.value = false
|
||||
loading.value = true
|
||||
|
||||
let form = {
|
||||
@@ -311,41 +319,104 @@ const onSubmit = async () => {
|
||||
userId: dictData.state.area[0].id,
|
||||
time: harmonicValue.value
|
||||
}
|
||||
options1.value = {}
|
||||
options2.value = {}
|
||||
options3.value = {}
|
||||
initEchart(1, '有功功率')
|
||||
initEchart(2, '无功功率')
|
||||
initEchart(3, '谐波电流幅值')
|
||||
voltageList.value = []
|
||||
showBtn.value = false
|
||||
if (props.rowList.id != undefined) {
|
||||
user.value = props.rowList
|
||||
// user.value = props.rowList
|
||||
|
||||
rendering(props.rowList)
|
||||
}
|
||||
Promise.all([queryCarryCapacityData(form), queryCarryCapacityQData(form), queryCarryCapacityIData(form)])
|
||||
.then(res => {
|
||||
// 有功功率
|
||||
|
||||
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, '有功功率', 'w')
|
||||
setEChart(2, res[1].data.data, '无功功率', 'Var')
|
||||
setEChart(3, res[2].data.data, '谐波电流幅值', 'A')
|
||||
showBtn.value = true
|
||||
loading.value = false
|
||||
// props.rowList.id != undefined
|
||||
})
|
||||
.catch(err => {
|
||||
loading.value = false
|
||||
})
|
||||
try {
|
||||
// 显示加载状态
|
||||
|
||||
// 获取有功功率数据
|
||||
const res1 = await queryCarryCapacityData(form)
|
||||
stringMap.value = res1.data.stringMap
|
||||
p_βminMap.value = res1.data.p_βminMap
|
||||
|
||||
// 处理电压列表数据
|
||||
voltageList.value = Object.entries(res1.data.stringMap).map(([k, values]) => ({
|
||||
name: k,
|
||||
c: values[0],
|
||||
a: values[1],
|
||||
b: values[2]
|
||||
}))
|
||||
|
||||
// 设置有功功率图表
|
||||
setEChart(1, res1.data.data, '有功功率', 'w')
|
||||
|
||||
// 获取无功功率数据并设置图表
|
||||
const res2 = await queryCarryCapacityQData(form)
|
||||
q_βminMap.value = res2.data.q_βminMap
|
||||
setEChart(2, res2.data.data, '无功功率', 'Var')
|
||||
|
||||
// 获取谐波电流数据并设置图表
|
||||
const res3 = await queryCarryCapacityIData(form)
|
||||
i_βmax.value = res3.data.i_βmax
|
||||
setEChart(3, res3.data.data, '谐波电流幅值', 'A')
|
||||
|
||||
// 显示结果和按钮
|
||||
showTabs.value = true
|
||||
showBtn.value = true
|
||||
currentLod.value = false
|
||||
// 如果没有rowList.id，查询结果
|
||||
if (props.rowList.id === undefined) {
|
||||
const res4 = await queryResultbyCondition({ ...form, userId: user.value.userId })
|
||||
rendering(res4.data)
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('请求出错:', err)
|
||||
} finally {
|
||||
// 无论成功失败，都关闭加载状态
|
||||
loading.value = false
|
||||
}
|
||||
|
||||
// Promise.all([queryCarryCapacityData(form), queryCarryCapacityQData(form), queryCarryCapacityIData(form)])
|
||||
// .then(res => {
|
||||
// // 有功功率
|
||||
|
||||
// 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, '有功功率', 'w')
|
||||
// setEChart(2, res[1].data.data, '无功功率', 'Var')
|
||||
// setEChart(3, res[2].data.data, '谐波电流幅值', 'A')
|
||||
// showBtn.value = true
|
||||
// loading.value = false
|
||||
// // props.rowList.id != undefined
|
||||
// })
|
||||
// .catch(err => {
|
||||
// loading.value = false
|
||||
// })
|
||||
}
|
||||
// 谐波次数变化
|
||||
const amplitudeQuery = async (e: any) => {
|
||||
currentLod.value = true
|
||||
let form = {
|
||||
endTime: props.rowList.endTime || datePickerRef.value.timeValue[1],
|
||||
lineId: props.rowList.lineId || dotList.value.id,
|
||||
startTime: props.rowList.startTime || datePickerRef.value.timeValue[0],
|
||||
userId: dictData.state.area[0].id,
|
||||
time: harmonicValue.value
|
||||
}
|
||||
const res3 = await queryCarryCapacityIData(form)
|
||||
i_βmax.value = res3.data.i_βmax
|
||||
setEChart(3, res3.data.data, '谐波电流幅值', 'A')
|
||||
options.value=options3.value
|
||||
currentLod.value = false
|
||||
}
|
||||
// 用户变化
|
||||
const userChange = (e: any) => {
|
||||
@@ -390,8 +461,6 @@ const setEChart = (val: any, data: any, text: string, name: string) => {
|
||||
backgroundColor: 'rgba(0,0,0,0.55)',
|
||||
borderWidth: 0,
|
||||
formatter(params: any) {
|
||||
console.log(123, params)
|
||||
|
||||
const xname = params[0].value[0]
|
||||
let str = `${xname}<br>`
|
||||
params.forEach((el: any, index: any) => {
|
||||
@@ -421,17 +490,8 @@ const setEChart = (val: any, data: any, text: string, name: string) => {
|
||||
name: name,
|
||||
max: max,
|
||||
min: min
|
||||
// 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']
|
||||
// // selectedMode: false,
|
||||
// },
|
||||
grid: {
|
||||
top: '30px',
|
||||
left: '30px'
|
||||
},
|
||||
|
||||
color: ['#DAA520', '#2E8B57', '#A52a2a'],
|
||||
series: [
|
||||
{
|
||||
@@ -512,21 +572,51 @@ const assess = () => {
|
||||
})
|
||||
}
|
||||
const rendering = (data: any) => {
|
||||
tableData.value = [
|
||||
{
|
||||
name: '配变首端电压',
|
||||
level1: '/',
|
||||
level2: '/',
|
||||
level3: '/',
|
||||
level4: '/'
|
||||
},
|
||||
{
|
||||
name: '配变功率因素',
|
||||
level1: '/',
|
||||
level2: '/',
|
||||
level3: '/',
|
||||
level4: '/'
|
||||
},
|
||||
{
|
||||
name: '等效负载率最小值',
|
||||
level1: '/',
|
||||
level2: '/',
|
||||
level3: '/',
|
||||
level4: '/'
|
||||
},
|
||||
{
|
||||
name: '各次谐波电流幅值',
|
||||
level1: '/',
|
||||
level2: '/',
|
||||
level3: '/',
|
||||
level4: '/'
|
||||
}
|
||||
]
|
||||
let ChartsList = [
|
||||
{
|
||||
name: '安全',
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
name: 'III级',
|
||||
name: 'III级预警',
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
name: 'II级',
|
||||
name: 'II级预警',
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
name: 'I级',
|
||||
name: 'I级预警',
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
@@ -539,36 +629,30 @@ const rendering = (data: any) => {
|
||||
tableData.value[2][`level` + data.btlevel] = 1
|
||||
tableData.value[3][`level` + data.ilevel] = 1
|
||||
ChartsList[data.reslutLevel - 1].value = 1
|
||||
|
||||
showAssess.value = true
|
||||
pieCharts.value = {
|
||||
title: {
|
||||
text: '承载能力评估结果',
|
||||
x: 'center',
|
||||
top: `30px`,
|
||||
textStyle: {
|
||||
fontWeight: 'normal'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
type: 'scroll',
|
||||
orient: 'vertical',
|
||||
left: 10,
|
||||
top: '10%'
|
||||
right: '10px',
|
||||
top: '40px',
|
||||
selectedMode: false // 是否允许点击
|
||||
},
|
||||
|
||||
toolbox: { show: false },
|
||||
xAxis: {
|
||||
show: false
|
||||
},
|
||||
yAxis: {
|
||||
show: false
|
||||
},
|
||||
color: ['#77DA63', '#00BFF5', '#FFBF00', '#Ff6600', '#ff0000'],
|
||||
color: ['#2E7D32', '#0288D1', '#F57C00', '#F57C00', '#C62828'],
|
||||
dataZoom: { show: false },
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
center: ['60%', '70%'],
|
||||
radius: ['35%', '48%'],
|
||||
center: ['40%', '50%'],
|
||||
radius: ['45%', '58%'],
|
||||
label: {
|
||||
normal: {
|
||||
show: false
|
||||
@@ -576,7 +660,45 @@ const rendering = (data: any) => {
|
||||
},
|
||||
data: ChartsList
|
||||
}
|
||||
]
|
||||
],
|
||||
options: {
|
||||
title: [
|
||||
{
|
||||
text: '评估结果',
|
||||
left: '25%'
|
||||
// left: '25%'
|
||||
},
|
||||
{
|
||||
text:
|
||||
data.reslutLevel == 5
|
||||
? '禁止接入'
|
||||
: data.reslutLevel == 4
|
||||
? 'I级预警'
|
||||
: data.reslutLevel == 3
|
||||
? 'II级预警'
|
||||
: data.reslutLevel == 2
|
||||
? 'III级预警'
|
||||
: data.reslutLevel == 1
|
||||
? '安全'
|
||||
: '',
|
||||
left: data.reslutLevel == 1 ? '33%' : '29%',
|
||||
top: '45%',
|
||||
textStyle: {
|
||||
color:
|
||||
data.reslutLevel == 5
|
||||
? '#C62828'
|
||||
: data.reslutLevel == 4
|
||||
? '#F57C00'
|
||||
: data.reslutLevel == 3
|
||||
? '#F57C00'
|
||||
: data.reslutLevel == 2
|
||||
? '#0288D1'
|
||||
: '#2E7D32',
|
||||
foontWeight: '500'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
// 下载模版
|
||||
@@ -614,6 +736,11 @@ const choose = (e: any) => {
|
||||
ElMessage.success('导入成功')
|
||||
})
|
||||
}
|
||||
const tabChange = (e: any) => {
|
||||
nextTick(() => {
|
||||
e == 2 ? (options.value = options2.value) : e == 3 ? (options.value = options3.value) : ''
|
||||
})
|
||||
}
|
||||
const handleNodeClick = (data: any, node: any) => {
|
||||
if (flag.value) {
|
||||
lineList.value = {}
|
||||
@@ -632,6 +759,75 @@ const handleNodeClick = (data: any, node: any) => {
|
||||
flag.value = false
|
||||
}
|
||||
}
|
||||
// 初始化 echart 默认值
|
||||
const initEchart = (val: number, text: string) => {
|
||||
let list = {
|
||||
title: {
|
||||
text: text,
|
||||
x: 'center'
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
name: '时间',
|
||||
type: 'time',
|
||||
axisLabel: {
|
||||
formatter: {
|
||||
day: '{MM}-{dd}',
|
||||
month: '{MM}',
|
||||
year: '{yyyy}'
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: name
|
||||
},
|
||||
|
||||
color: ['#DAA520', '#2E8B57', '#A52a2a'],
|
||||
series: [
|
||||
{
|
||||
name: 'A相',
|
||||
type: 'line',
|
||||
// smooth: true,
|
||||
symbol: 'none',
|
||||
data: []
|
||||
},
|
||||
{
|
||||
name: 'B相',
|
||||
type: 'line',
|
||||
// smooth: true,
|
||||
symbol: 'none',
|
||||
data: []
|
||||
},
|
||||
{
|
||||
name: 'C相',
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
data: []
|
||||
}
|
||||
]
|
||||
}
|
||||
val == 1 ? (options1.value = list) : val == 2 ? (options2.value = list) : val == 3 ? (options3.value = list) : ''
|
||||
}
|
||||
// 导出
|
||||
const onExport = () => {
|
||||
// 转换成canvas
|
||||
html2canvas(document.getElementById('evaluateTheResults'), {
|
||||
scale: 2
|
||||
}).then(function (canvas) {
|
||||
// 创建a标签，实现下载
|
||||
let creatIMg = document.createElement('a')
|
||||
creatIMg.download = '光伏电站承载能力评估结果.png' // 设置下载的文件名，
|
||||
creatIMg.href = canvas.toDataURL() // 下载url
|
||||
creatIMg.click()
|
||||
creatIMg.remove() // 下载之后把创建的元素删除
|
||||
})
|
||||
}
|
||||
onMounted(() => {
|
||||
initEchart(1, '有功功率')
|
||||
initEchart(2, '无功功率')
|
||||
initEchart(3, '谐波电流幅值')
|
||||
})
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.splitpanes.default-theme .splitpanes__pane {
|
||||
@@ -650,11 +846,14 @@ const handleNodeClick = (data: any, node: any) => {
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
right: 10px;
|
||||
top: -10px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.vxe-table--header thead tr:first-of-type th:first-of-type) {
|
||||
background: #f8f8f9;
|
||||
// background: var(--vxe-table-header-background-color);
|
||||
background-image: linear-gradient(var(--vxe-table-border-color), var(--vxe-table-border-color)),
|
||||
linear-gradient(#e8eaec00, #e8eaec00);
|
||||
}
|
||||
|
||||
:deep(.vxe-table--header thead tr:first-of-type th:first-of-type:before) {
|
||||
@@ -690,12 +889,17 @@ const handleNodeClick = (data: any, node: any) => {
|
||||
}
|
||||
|
||||
.SelectIcon {
|
||||
height: 30px;
|
||||
height: 18px;
|
||||
margin-top: 5px;
|
||||
color: blue;
|
||||
}
|
||||
|
||||
.el-select {
|
||||
min-width: 80px;
|
||||
}
|
||||
:deep(.el-descriptions__body .el-descriptions__table .el-descriptions__cell.is-center) {
|
||||
width: 80px !important;
|
||||
}
|
||||
.evaluateTheResults {
|
||||
display: flex;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,47 +1,47 @@
|
||||
<template>
|
||||
<el-dialog draggable v-model="Views" title="承载能力评估策略" width="1400" :before-close="handleClose">
|
||||
<el-dialog v-model="Views" draggable title="评估策略配置" width="1000" :before-close="handleClose">
|
||||
<div style="display: flex; justify-content: end">
|
||||
<el-button icon="el-icon-Refresh" type="primary" @click="restores">一键还原</el-button>
|
||||
</div>
|
||||
<el-divider content-position="left">光伏电站承载能力评估策略</el-divider>
|
||||
<el-divider content-position="left">光伏电站评估策略配置</el-divider>
|
||||
<vxe-table v-bind="defaultAttribute" :loading="loading" :data="photovoltaicData" :span-method="mergeRowMethod">
|
||||
<vxe-colgroup field="group0" title="等级">
|
||||
<vxe-column field="name" width="180" title="结果"></vxe-column>
|
||||
</vxe-colgroup>
|
||||
<vxe-column field="comparisonOperators1" title="安全(个)">
|
||||
<template #default="row">
|
||||
<div @click="cells(row, row.row.comparisonOperators1, row.row.count1, 0)">
|
||||
{{ row.row.comparisonOperators1
|
||||
<div class="cellBox" @click="cells(row, row.row.comparisonOperators1, row.row.count1, 0)">
|
||||
{{ symbolJudgment(row.row.comparisonOperators1)
|
||||
}}{{ row.row.comparisonOperators1 == '/' ? '' : row.row.count1 }}
|
||||
</div>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="comparisonOperators2" title="III级预警(个)">
|
||||
<template #default="row">
|
||||
<div @click="cells(row, row.row.comparisonOperators2, row.row.count2, 0)">
|
||||
{{ row.row.comparisonOperators2
|
||||
<div class="cellBox" @click="cells(row, row.row.comparisonOperators2, row.row.count2, 0)">
|
||||
{{ symbolJudgment(row.row.comparisonOperators2)
|
||||
}}{{ row.row.comparisonOperators2 == '/' ? '' : row.row.count2 }}
|
||||
</div>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="comparisonOperators3" title="II级预警(个)">
|
||||
<template #default="row">
|
||||
<div @click="cells(row, row.row.comparisonOperators3, row.row.count3, 0)">
|
||||
{{ row.row.comparisonOperators3
|
||||
<div class="cellBox" @click="cells(row, row.row.comparisonOperators3, row.row.count3, 0)">
|
||||
{{ symbolJudgment(row.row.comparisonOperators3)
|
||||
}}{{ row.row.comparisonOperators3 == '/' ? '' : row.row.count3 }}
|
||||
</div>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="comparisonOperators4" title="I级预警(个)">
|
||||
<template #default="row">
|
||||
<div @click="cells(row, row.row.comparisonOperators4, row.row.count4, 0)">
|
||||
{{ row.row.comparisonOperators4
|
||||
<div class="cellBox" @click="cells(row, row.row.comparisonOperators4, row.row.count4, 0)">
|
||||
{{ symbolJudgment(row.row.comparisonOperators4)
|
||||
}}{{ row.row.comparisonOperators4 == '/' ? '' : row.row.count4 }}
|
||||
</div>
|
||||
</template>
|
||||
</vxe-column>
|
||||
</vxe-table>
|
||||
<el-divider content-position="left">充电站、电加热负荷、电气化铁路承载能力评估</el-divider>
|
||||
<el-divider content-position="left">充电站、电加热负荷、电气化铁路评估策略配置</el-divider>
|
||||
<vxe-table v-bind="defaultAttribute" ref="xTable" :loading="loading" :data="tableData">
|
||||
<vxe-colgroup field="group0" title="等级">
|
||||
<vxe-column field="name" width="180" title="结果"></vxe-column>
|
||||
@@ -49,8 +49,8 @@
|
||||
|
||||
<vxe-column field="comparisonOperators1" title="THD(%)">
|
||||
<template #default="row">
|
||||
<div @click="cells(row, row.row.comparisonOperators1, row.row.count1, 1)">
|
||||
{{ row.row.comparisonOperators1
|
||||
<div class="cellBox" @click="cells(row, row.row.comparisonOperators1, row.row.count1, 1)">
|
||||
{{ symbolJudgment(row.row.comparisonOperators1)
|
||||
}}{{ row.row.comparisonOperators1 == '/' ? '' : row.row.count1 }}
|
||||
</div>
|
||||
</template>
|
||||
@@ -58,31 +58,32 @@
|
||||
|
||||
<vxe-column field="comparisonOperators2" title="2~25次谐波合格个数">
|
||||
<template #default="row">
|
||||
<div @click="cells(row, row.row.comparisonOperators2, row.row.count2, 2)">
|
||||
{{ row.row.comparisonOperators2
|
||||
<div class="cellBox" @click="cells(row, row.row.comparisonOperators2, row.row.count2, 2)">
|
||||
{{ symbolJudgment(row.row.comparisonOperators2)
|
||||
}}{{ row.row.comparisonOperators2 == '/' ? '' : row.row.count2 }}
|
||||
</div>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="comparisonOperators3" title="畸次谐波合格个数">
|
||||
<template #default="row">
|
||||
<div @click="cells(row, row.row.comparisonOperators3, row.row.count3, 3)">
|
||||
{{ row.row.comparisonOperators3
|
||||
<div class="cellBox" @click="cells(row, row.row.comparisonOperators3, row.row.count3, 3)">
|
||||
{{ symbolJudgment(row.row.comparisonOperators3)
|
||||
}}{{ row.row.comparisonOperators3 == '/' ? '' : row.row.count3 }}
|
||||
</div>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="comparisonOperators4" title="偶次谐波合格个数">
|
||||
<template #default="row">
|
||||
<div @click="cells(row, row.row.comparisonOperators4, row.row.count4, 4)">
|
||||
{{ row.row.comparisonOperators4
|
||||
<div class="cellBox" @click="cells(row, row.row.comparisonOperators4, row.row.count4, 4)">
|
||||
{{ symbolJudgment(row.row.comparisonOperators4)
|
||||
}}{{ row.row.comparisonOperators4 == '/' ? '' : row.row.count4 }}
|
||||
</div>
|
||||
</template>
|
||||
</vxe-column>
|
||||
</vxe-table>
|
||||
<!-- 修改 -->
|
||||
<el-dialog draggable v-model="dialogVisible" title="安全等级配置" width="500">
|
||||
|
||||
<el-dialog class="dialogBox" draggable v-model="dialogVisible" title="安全等级配置" width="500">
|
||||
<el-form :model="form" label-width="auto">
|
||||
<el-form-item label="运算符号：">
|
||||
<el-radio-group v-model="form.comparisonOperators" @change="groupChang">
|
||||
@@ -90,7 +91,14 @@
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="数量：">
|
||||
<el-input-number v-model="form.count" :disabled="disabled" :min="0" :precision="0" :max="10000000" style="width: 100%" />
|
||||
<el-input-number
|
||||
v-model="form.count"
|
||||
:disabled="disabled"
|
||||
:min="0"
|
||||
:precision="0"
|
||||
:max="10000000"
|
||||
style="width: 200px"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
@@ -254,6 +262,13 @@ const mergeRowMethod = ({ row, _rowIndex, column, visibleData }) => {
|
||||
}
|
||||
}
|
||||
}
|
||||
const symbolJudgment = (value: string) => {
|
||||
if (value == '==') {
|
||||
return '='
|
||||
} else {
|
||||
return value
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
info()
|
||||
})
|
||||
@@ -265,7 +280,9 @@ const handleClose = () => {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep(.vxe-table--header thead tr:first-of-type th:first-of-type) {
|
||||
background: #f8f8f9;
|
||||
// background: var(--vxe-table-header-background-color);
|
||||
background-image: linear-gradient(var(--vxe-table-border-color), var(--vxe-table-border-color)),
|
||||
linear-gradient(#e8eaec00, #e8eaec00);
|
||||
}
|
||||
:deep(.vxe-table--header thead tr:first-of-type th:first-of-type:before) {
|
||||
content: '';
|
||||
@@ -293,4 +310,37 @@ const handleClose = () => {
|
||||
transform: rotate(-66deg); /*这里需要自己调整，根据线的位置*/
|
||||
transform-origin: bottom;
|
||||
}
|
||||
.cellBox {
|
||||
cursor: pointer;
|
||||
color: var(--el-color-primary);
|
||||
font-weight: 600;
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.el-dialog__body {
|
||||
max-height: none !important;
|
||||
}
|
||||
.dialogBox {
|
||||
margin-top: calc(15vh + 200px) !important;
|
||||
}
|
||||
/* 确保对话框在页面居中 */
|
||||
// .el-dialog {
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// margin: 0 !important;
|
||||
// position: absolute;
|
||||
// top: 50%;
|
||||
// left: 50%;
|
||||
// transform: translate(-50%, -50%);
|
||||
// max-height: calc(100% - 30px);
|
||||
// max-width: calc(100% - 30px);
|
||||
// }
|
||||
|
||||
// /* 确保遮罩层全屏显示 */
|
||||
// .el-dialog__wrapper {
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// justify-content: center;
|
||||
// }
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user