联调承载能力评估 技术监督ui绘制
This commit is contained in:
@@ -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% < 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% < 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>
|
||||
|
||||
@@ -4,18 +4,11 @@
|
||||
<el-button icon="el-icon-Refresh" type="primary" @click="restores">一键还原</el-button>
|
||||
</div>
|
||||
<el-divider content-position="left">光伏电站承载能力评估策略</el-divider>
|
||||
<vxe-table
|
||||
v-bind="defaultAttribute"
|
||||
ref="xTable"
|
||||
:loading="loading"
|
||||
:data="photovoltaicData"
|
||||
:column-config="{ resizable: true }"
|
||||
:mouse-config="{ area: true, extension: false }"
|
||||
>
|
||||
<vxe-table v-bind="defaultAttribute" :loading="loading" :data="photovoltaicData" :span-method="mergeRowMethod">
|
||||
<vxe-colgroup field="group0" title="等级" align="right">
|
||||
<vxe-column field="name" width="180" title="结果"></vxe-column>
|
||||
</vxe-colgroup>
|
||||
<vxe-column field="count1" title="安全(个)">
|
||||
<vxe-column field="comparisonOperators1" title="安全(个)">
|
||||
<template #default="row">
|
||||
<div @click="cells(row, row.row.comparisonOperators1, row.row.count1)">
|
||||
{{ row.row.comparisonOperators1
|
||||
@@ -23,7 +16,7 @@
|
||||
</div>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="count2" title="III级预警(个)">
|
||||
<vxe-column field="comparisonOperators2" title="III级预警(个)">
|
||||
<template #default="row">
|
||||
<div @click="cells(row, row.row.comparisonOperators2, row.row.count2)">
|
||||
{{ row.row.comparisonOperators2
|
||||
@@ -31,7 +24,7 @@
|
||||
</div>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="count3" title="II级预警(个)">
|
||||
<vxe-column field="comparisonOperators3" title="II级预警(个)">
|
||||
<template #default="row">
|
||||
<div @click="cells(row, row.row.comparisonOperators3, row.row.count3)">
|
||||
{{ row.row.comparisonOperators3
|
||||
@@ -39,7 +32,7 @@
|
||||
</div>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="count4" title="I级预警(个)">
|
||||
<vxe-column field="comparisonOperators4" title="I级预警(个)">
|
||||
<template #default="row">
|
||||
<div @click="cells(row, row.row.comparisonOperators4, row.row.count4)">
|
||||
{{ row.row.comparisonOperators4
|
||||
@@ -92,7 +85,7 @@ import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import { queyDetail, addCarryc, restore } from '@/api/advance-boot/bearingCapacity'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
|
||||
import { VxeTablePropTypes } from 'vxe-table'
|
||||
defineOptions({
|
||||
name: 'Advancedanalysis/eventcorrelation'
|
||||
})
|
||||
@@ -147,32 +140,35 @@ const info = () => {
|
||||
queyDetail().then(res => {
|
||||
photovoltaicData.value = []
|
||||
let title = ['安全', 'III级预警', 'II级预警', 'I级预警']
|
||||
// photovoltaicData.value = res.data
|
||||
for (let i: number = 1; i < 5; i++) {
|
||||
photovoltaicData.value.push({
|
||||
...setData(res.data.filter(item => item.indexResult == i)),
|
||||
name: title[i - 1]
|
||||
let p = 0
|
||||
res.data.forEach((item: any, i: any) => {
|
||||
item.capacityStrategysingleVOList.forEach((item1: any, i1: any) => {
|
||||
photovoltaicData.value.push({
|
||||
name: title[i],
|
||||
id: item1.id,
|
||||
result: item.result
|
||||
})
|
||||
p++
|
||||
item1.carryCapacityStrategyIndexVOList.forEach((item2: any) => {
|
||||
photovoltaicData.value[p - 1]['comparisonOperators' + item2.indexResult] = item2.comparisonOperators
|
||||
photovoltaicData.value[p - 1]['count' + item2.indexResult] = item2.count
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
console.log('🚀 ~ queyDetail ~ photovoltaicData.value:', photovoltaicData.value)
|
||||
})
|
||||
}
|
||||
// 处理返回数据
|
||||
const setData = (row: any) => {
|
||||
let data = {}
|
||||
row.forEach((item: any) => {
|
||||
data[`comparisonOperators${item.result}`] = item.comparisonOperators
|
||||
data[`count${item.result}`] = item.count
|
||||
})
|
||||
return data
|
||||
}
|
||||
|
||||
// <span @click="cells(row,comparisonOperators2,count2)">
|
||||
const cells = (row: any, comparisonOperators: any, count: any) => {
|
||||
form.value = {
|
||||
comparisonOperators: comparisonOperators,
|
||||
count: count,
|
||||
result: row.columnIndex,
|
||||
indexResult: row.rowIndex + 1
|
||||
result: row.row.result,
|
||||
id: row.row.id,
|
||||
indexResult: row.columnIndex
|
||||
}
|
||||
|
||||
groupChang(comparisonOperators)
|
||||
dialogVisible.value = true
|
||||
}
|
||||
@@ -200,6 +196,26 @@ const restores = () => {
|
||||
info()
|
||||
})
|
||||
}
|
||||
// 通用行合并函数（将相同多列数据合并为一行）
|
||||
const mergeRowMethod: VxeTablePropTypes.SpanMethod = ({ row, _rowIndex, column, visibleData }) => {
|
||||
const fields = ['name']
|
||||
const cellValue = row[column.field]
|
||||
if (cellValue && fields.includes(column.field)) {
|
||||
const prevRow = visibleData[_rowIndex - 1]
|
||||
let nextRow = visibleData[_rowIndex + 1]
|
||||
if (prevRow && prevRow[column.field] === cellValue) {
|
||||
return { rowspan: 0, colspan: 0 }
|
||||
} else {
|
||||
let countRowspan = 1
|
||||
while (nextRow && nextRow[column.field] === cellValue) {
|
||||
nextRow = visibleData[++countRowspan + _rowIndex]
|
||||
}
|
||||
if (countRowspan > 1) {
|
||||
return { rowspan: countRowspan, colspan: 1 }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
info()
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user