admin-sjzx/src/views/pqs/bearingCapacity/evaluationList/components/charge.vue

<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"
                                />
                            </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-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>
                    </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-col>
            <el-col :span="8" :style="`height: calc(${height} / 2 - 100px)`">
                <MyEChart style="flex: 1" :options="pieCharts" />
            </el-col>
        </el-row>
        <el-button type="primary" icon="el-icon-Document" @click="assess">承载能力评估</el-button>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive } 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'
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 factor = [
    {
        name: 0.95,
        id: 0.95
    },
    {
        name: 0.96,
        id: 0.96
    },
    {
        name: 0.97,
        id: 0.97
    },
    {
        name: 0.98,
        id: 0.98
    },
    {
        name: 0.99,
        id: 0.99
    },
    {
        name: 1.0,
        id: 1.0
    }
]

const tableData = ref([
    {
        name: '谐波电流幅值(A)',
        role: '/',
        num6: '/',
        date12: '/',
        date13: '/'
    },
    {
        name: '国标限值(A)',
        role: '/',
        num6: '/',
        date12: '/',
        date13: '/'
    },
    {
        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'
    }
])
const form: any = ref({
    ptType: '0',
    connectionMode: '',
    k: '1',
    scale: '',
    shortCapacity: '',
    deviceCapacity: ''
})
const pieCharts = ref({})
// 承载能力评估
const assess = () => {
    pieCharts.value = {
        title: {
            text: '承载能力评估结果',
            x: 'center',
            top: `30px`,
            textStyle: {
                fontWeight: 'normal'
            }
        },
        legend: {
            type: 'scroll',
            orient: 'vertical',
            left: 10,
            top: '10%',
            tooltip: {
                show: true
            }
        },

        xAxis: {
            show: false
        },
        yAxis: {
            show: false
        },
        color: ['#77DA63', '#00BFF5', '#FFBF00', '#Ff6600'],
        dataZoom: { show: false },
        series: [
            {
                type: 'pie',
                center: ['50%', '50%'],
                radius: ['35%', '48%'],
                selectedOffset: 30,
                clockwise: true,
                label: {
                    formatter: '{b}：{c}'
                },
                labelLine: {
                    length: 1,
                    length2: 20
                },

                data: [
                    {
                        name: '安全',
                        value: 1
                    },
                    {
                        name: 'III级',
                        value: 3
                    },
                    {
                        name: 'II级',
                        value: 3
                    },
                    {
                        name: 'I级',
                        value: 2
                    }
                ]
            }
        ]
    }
}
</script>
<style lang="scss" scoped>
.bottomBox {
    position: relative;
    .el-button {
        position: absolute;
        top: 0;
        right: 10px;
    }
}
.card-header {
    font-weight: 600;
    display: FLEX;
    justify-content: space-between;
}
</style>