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

<template>
    <div>
        <splitpanes :style="{ height: height }" class="default-theme" id="navigation-splitpanes">
            <pane :size="size">
                <PointTree
                    :default-expand-all="false"
                    :default-expanded-keys="monitoringPoint.state.lineId ? [monitoringPoint.state.lineId] : []"
                    :current-node-key="monitoringPoint.state.lineId"
                    @node-click="handleNodeClick"
                    @init="handleNodeClick"
                ></PointTree>
            </pane>
            <pane style="background: #fff">
                <el-form :inline="true">
                    <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-DocumentAdd">离线导入</el-button>
                    </el-form-item>
                </el-form>

                <el-descriptions class="mb10" title="基础数据" :column="2" size="" border>
                    <el-descriptions-item label="电压等级" label-align="center" width="25%">12</el-descriptions-item>
                    <el-descriptions-item label="额定容量" label-align="center" width="25%">12</el-descriptions-item>
                    <el-descriptions-item label="待评估用户" label-align="center" width="25%">
                        <el-select
                            v-model="user"
                            placeholder="请选择待评估用户"
                            size="small"
                            clearable
                            filterable
                            style="width: 240px"
                        >
                            <el-option
                                v-for="item in userList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-descriptions-item>
                    <el-descriptions-item label="拟接入光伏容量" label-align="center" width="25%">
                        12
                    </el-descriptions-item>
                </el-descriptions>
                <el-tabs v-model="activeName" class="mb10" :style="`height: calc(${tabsHeight} / 2)`">
                    <el-tab-pane label="有功功率" name="1" class="mt10">
                        <MyEChart :options="options" />
                    </el-tab-pane>
                    <el-tab-pane label="无功功率" name="2"></el-tab-pane>
                    <el-tab-pane label="谐波电流幅值" name="3"></el-tab-pane>
                    <el-tab-pane label="首端电压模型参数" name="4"></el-tab-pane>
                </el-tabs>
                <div class="bottomBox">
                    <el-row v-if="showAssess">
                        <el-col :span="16" :style="`height: calc(${tabsHeight} / 2)`">
                            <vxe-table
                                style="flex: 1.5"
                                v-bind="defaultAttribute"
                                height="auto"
                                ref="xTable"
                                :data="tableData"
                            >
                                <vxe-column field="name" title="等级"></vxe-column>
                                <vxe-column field="role" title="安全"></vxe-column>
                                <vxe-column field="num6" title="III级预警"></vxe-column>
                                <vxe-column field="date12" title="II级预警"></vxe-column>
                                <vxe-column field="date13" title="I级预警"></vxe-column>
                            </vxe-table>
                        </el-col>
                        <el-col :span="8" :style="`height: calc(${tabsHeight} / 2)`">
                            <MyEChart style="flex: 1" :options="pieCharts" />
                        </el-col>
                    </el-row>

                    <el-button type="primary" icon="el-icon-Document" @click="assess">承载能力评估</el-button>
                </div>
            </pane>
        </splitpanes>
    </div>
</template>
<script setup lang="ts">
import { onMounted, ref, provide } from 'vue'
import 'splitpanes/dist/splitpanes.css'
import { Splitpanes, Pane } from 'splitpanes'
import PointTree from '@/components/tree/pqs/loadBearingTree.vue'
import DatePicker from '@/components/form/datePicker/index.vue'
import { mainHeight } from '@/utils/layout'
import { text } from '../text'
import MyEChart from '@/components/echarts/MyEchart.vue'
import { useMonitoringPoint } from '@/stores/monitoringPoint'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import { ElMessage } from 'element-plus'
const monitoringPoint = useMonitoringPoint()

const size = ref(0)
const datePickerRef = ref()
const height = mainHeight(80).height
const tabsHeight = mainHeight(260).height
const tableData = ref([
    {
        id: 10001,
        name: '配变首端电压',
        role: '/',
        num6: '/',
        date12: '/',
        date13: '/'
    },
    {
        id: 10002,
        name: '配变功率因素',
        role: '/',
        num6: '/',
        date12: '/',
        date13: '/'
    },
    {
        id: 10003,
        name: '等效负载率最小值',
        role: '/',
        date12: '/',
        num6: '/',
        date13: '/'
    },
    {
        id: 10004,
        name: '各次谐波电流幅值',
        role: '/',
        date12: '/',
        num6: '/',
        date13: '/'
    }
])
const showAssess = ref(false)
const user = ref('')
const userList = [
    {
        value: 'Option1',
        label: '光伏电站用户1'
    },
    {
        value: 'Option2',
        label: '光伏电站用户2'
    },
    {
        value: 'Option3',
        label: '光伏电站用户3'
    }
]
const options = ref({})
const pieCharts = ref({})
const activeName = ref('1')

const dotList: any = ref({
    name: monitoringPoint.state.lineName.split('>')[3],
    id: monitoringPoint.state.lineId,
    level: 6
})
onMounted(() => {
    const dom = document.getElementById('navigation-splitpanes')
    if (dom) {
        size.value = Math.round((280 / dom.offsetHeight) * 100)
    }
    datePickerRef.value.setTimeOptions([{ label: '周', value: 4 }])
    datePickerRef.value.setInterval(4)
})

// 查询
const onSubmit = () => {
    console.log(text.data.data)

    options.value = {
        title: {
            text: '在线率统计',
            x: 'center',
            textStyle: {
                fontWeight: 'normal'
            }
        },
        xAxis: {
            data: text.data.data.filter(item => item.phaseType == 'A').map(item => item.time),
            // name: '时间',
            onZero: false,
            position: 'bottom' // 设置 x 轴在底部
        },
        yAxis: {
            type: 'value',
            max: Math.ceil(Math.max(...text.data.data.map(item => item.value))),
            min: Math.floor(Math.min(...text.data.data.map(item => item.value)))
        },
        legend: {
            data: ['A', 'B', 'C']
            // selectedMode: false,
        },
        grid: {
            left: '30px'
        },
        series: [
            {
                name: 'A',
                type: 'line',
                // smooth: true,
                symbol: 'none',
                data: text.data.data.filter(item => item.phaseType == 'A').map(item => item.value.toFixed(3))
            },
            {
                name: 'B',
                type: 'line',
                // smooth: true,
                symbol: 'none',
                data: text.data.data.filter(item => item.phaseType == 'B').map(item => item.value.toFixed(3))
            },
            {
                name: 'C',
                type: 'line',
                // smooth: true,
                symbol: 'none',
                data: text.data.data.filter(item => item.phaseType == 'C').map(item => item.value.toFixed(3))
            }
        ]
    }
}
// 承载能力评估
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
                    }
                ]
            }
        ]
    }
    showAssess.value = true
}
const handleNodeClick = (data: any, node: any) => {
    dotList.value = data
}
</script>
<style lang="scss">
.splitpanes.default-theme .splitpanes__pane {
    background: #eaeef1;
}
.grid-content {
    text-align: center;
}
.bottomBox {
    position: relative;
    .el-button {
        position: absolute;
        top: 0;
        right: 10px;
    }
}
</style>