admin-sjzx/src/views/LN/newEnergy/highAndLowPressure/index.vue

<template>
    <div class="default-main">
        <TableHeader datePicker theCurrentTime area ref="header">
            <!-- <template v-slot:select>
               
            </template> -->
        </TableHeader>
        <div v-loading="tableStore.table.loading">
            <el-row :gutter="10" class="pd10">
                <el-col :span="11" style="position: relative">
                    <el-card>
                        <el-radio-group
                            v-model="tableStore.table.params.type"
                            class="group"
                            @change="tableStore.index()"
                        >
                            <el-radio-button label="风电场" value="1" />
                            <el-radio-button label="光伏电站" value="2" />
                        </el-radio-group>
                        <MyEchartMap
                            ref="EchartMap"
                            :options="echartMapList"
                            class="map"
                            @eliminate="eliminate"
                            @getRegionByRegion="getRegionByRegion"
                            @clickMap="clickMap"
                        />
                    </el-card>
                </el-col>
                <el-col :span="13">
                    <el-card>
                        <template #header>
                            <div class="card-header">
                                <span>暂降列表</span>
                            </div>
                        </template>

                        <!-- <h3 class="mb10">暂降列表</h3> -->
                        <div class="tall1">
                            <vxe-table
                                height="auto"
                                auto-resize
                                :data="distributionData"
                                v-loading="loading"
                                v-bind="defaultAttribute"
                            >
                                <vxe-column
                                    field="newStationName"
                                    title="新能源站名称"
                                    min-width="150px"
                                    show-overflow-tooltip
                                ></vxe-column>
                                <vxe-column field="startTime" title="暂降发生时刻" min-width="150px"></vxe-column>
                                <vxe-column
                                    field="featureAmplitude"
                                    title="暂降(骤升)幅值(%)"
                                    sortable
                                    min-width="150px"
                                ></vxe-column>
                                <vxe-column
                                    field="advanceReason"
                                    title="暂降原因"
                                    sortable
                                    :formatter="formFilter"
                                    min-width="100px"
                                ></vxe-column>
                                <vxe-column field="severity" title="严重度" min-width="100px" sortable></vxe-column>
                                <vxe-column title="操作" width="80px">
                                    <template #default="{ row }">
                                        <el-button
                                            type="primary"
                                            v-if="row.wavePath != null"
                                            size="small"
                                            link
                                            @click="boxi(row)"
                                        >
                                            查看波形
                                        </el-button>
                                        <el-button v-else disabled size="small" link>暂无波形</el-button>
                                    </template>
                                </vxe-column>
                            </vxe-table>
                        </div>
                    </el-card>
                    <el-card class="mt10">
                        <template #header>
                            <div class="card-header">
                                <span>暂降波形</span>
                            </div>
                        </template>
                        <div class="tall" v-loading="loading1">
                            <!-- <h3 class="mb10">暂降波形</h3> -->
                            <div v-if="wp != null">
                                <rmsboxi :value="1" :height="height" :boxoList="boxoList" :wp="wp" />
                            </div>
                            <el-empty v-else description="暂无数据" class="custom-empty" />
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script setup lang="ts">
import TableHeader from '@/components/table/header/index.vue'

import { useDictData } from '@/stores/dictData'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import MyEchartMap from '@/components/echarts/MyEchartMap.vue'
import TableStore from '@/utils/tableStore'
import { voltageRideThroughEventQueryPage } from '@/api/event-boot/highAndLowPressure'
import { getMonitorEventAnalyseWave, getTransientDetailById } from '@/api/event-boot/transient'
import rmsboxi from '@/components/echarts/rmsboxi.vue'
import { ref, onMounted, provide } from 'vue'
import { mainHeight } from '@/utils/layout'
import { FormItem } from 'vxe-table'
defineOptions({
    name: 'newEnergy/highAndLowPressure'
})
const EchartMap = ref()
const dictData = useDictData()
const reason = dictData.getBasicData('Event_Reason')
const triggerType = dictData.getBasicData('Event_Statis')
const echartMapList: any = ref({})
const header = ref()
const distributionData: any = ref([])
const loading = ref(false)
const loading1 = ref(false)
const boxoList = ref(null)
const wp = ref(null)
const tableStore = new TableStore({
    url: '/event-boot/voltageRideThrough/view',
    method: 'POST',
    column: [],
    beforeSearchFun: () => {
        tableStore.table.params.areaId = tableStore.table.params.deptIndex
    },
    loadCallback: () => {
        // 处理地图数据
        map(tableStore.table.data)
        // tabulation(tableStore.table.data)
        EchartMap.value.GetEchar(header.value.areaRef.areaName)
        if (tableStore.table.data.length > 0) {
            tabulation({ data: tableStore.table.data[0], seriesName: '高压' })
        }
    }
})
const height = mainHeight(200, 2).height
provide('tableStore', tableStore)
tableStore.table.params.type = '1'

// 地图点击事件
const getRegionByRegion = (list: any) => {
    tableStore.table.params.deptIndex = list.id
    tableStore.onTableAction('search', {})
}
// 消除点
const eliminate = (name: string) => {
    echartMapList.value.options.series = []
    EchartMap.value.GetEchar(name)
}

// 地图数处理
const map = (res: any) => {
    echartMapList.value = {
        title: {
            text: '高/低电压穿越'
        },
        tooltip: {
            trigger: 'item',
            formatter: function (params) {
                if (params.seriesType == 'bar3D') {
                    return [params.seriesName, params.name + '：' + params.value[2] + (params.value[3] || '')].join(
                        '<br />'
                    )
                }
            }
        },

        legend: {
            selectedMode: false
        },
        geo3D: {
            show: true,
            // name: '浙江',
            itemStyle: {
                color: getComputedStyle(document.documentElement).getPropertyValue('--el-color-primary-light-3'),
                borderWidth: 1,
                borderColor: '#fff'
            },
            emphasis: {
                label: { show: true, fontSize: 16 },
                itemStyle: {
                    color: getComputedStyle(document.documentElement).getPropertyValue('--el-color-primary-light-7')
                }
            },
            viewControl: {
                alpha: 60,
                distance: 120,
                panMouseButton: 'right', //平移操作使用的鼠标按键
                rotateMouseButton: 'left' //旋转操作使用的鼠标按键
            },
            label: {
                show: true,
                color: '#000',
                fontSize: 14,
                distance: 0,
                textStyle: {
                    color: '#000',
                    backgroundColor: '#000'
                }
            },

            data: [
                { name: '低压', field: 'lowPressure', unit: '次' },
                { name: '高压', field: 'highPressure', unit: '次' }
            ]
        },
        options: {
            series: [
                {
                    name: '低压',
                    type: 'bar3D',
                    coordinateSystem: 'geo3D',
                    shading: 'lambert',
                    label: {
                        show: true,
                        position: 'top',
                        formatter: params => {
                            return params.value[2]
                        }
                    },

                    data:
                        res.length == 0
                            ? []
                            : res.map((item: any) => {
                                  return {
                                      ...item,
                                      value: [item.lng, item.lat, item.lowPressure || 0]
                                  }
                              }),
                    // data:[],
                    barSize: 1,
                    minHeight: 1,
                    itemStyle: {
                        color: '#77DA63'
                    },
                    emphasis: {
                        label: { show: true }
                    }
                },
                {
                    name: '高压',
                    type: 'bar3D',
                    coordinateSystem: 'geo3D',
                    shading: 'lambert',
                    label: {
                        show: true,
                        // position: 'top',
                        formatter: params => {
                            return params.value[2]
                        }
                    },

                    data:
                        res.length == 0
                            ? []
                            : res.map((item: any) => {
                                  return {
                                      ...item,
                                      value: [item.lng - 0.1, item.lat, item.highPressure || 0]
                                  }
                              }),
                    // [

                    //     {
                    //         adcode: 330400,
                    //         name: '大连',

                    //         wcs: 10,
                    //         mbs: 40,
                    //         wcl: 100,
                    //         value: [121.67391, 38.947468, 40, '']
                    //     }
                    // ],
                    barSize: 1,
                    minHeight: 1,
                    itemStyle: {
                        color: '#FFBF00'
                    },
                    emphasis: {
                        label: { show: true }
                    }
                }
            ]
        }
    }
}

// 点击地图
const clickMap = (e: any) => {
    tabulation(e)
}
// 表格数据处理
const tabulation = (e: any) => {
    console.log()

    loading.value = true
    voltageRideThroughEventQueryPage({
        ...tableStore.table.params,
        areaId: e.data.id,
        frequencyType:
            e.seriesName == '高压'
                ? triggerType.filter(item => item.code == 'Voltage_Rise')[0].id
                : triggerType.filter(item => item.code == 'Voltage_Dip')[0].id
    })
        .then(res => {
            distributionData.value = res.data

            for (let i = 0; i < res.data.length; i++) {
                if (res.data[i].wavePath != null) {
                    boxi(res.data[i])
                    break
                }
            }

            // res.data.forEach((item: any) => {
            //     if (item.wavePath != null) {
            //         boxi(item)
            //         return
            //     }
            // })
            // 。wavePath
            loading.value = false
        })
        .catch(() => {
            loading.value = false
        })
}

const formFilter = (row: any) => {
    if (row.column.property == 'advanceReason') {
        let title = ''
        reason.forEach(item => {
            if (item.id == row.row.advanceReason) {
                title = item.name
            } else if (row.row.advanceReason == null || row.row.advanceReason == '') {
                title = '/'
            }
        })
        return title
    } else {
        return row.row[row.column.property]
    }
}
// 查看波形数据
const boxi = async (row: any) => {
    loading1.value = true
    wp.value = null
    await getTransientDetailById({
        eventId: row.eventId,
        sysType: 0,
        smallType: 0
    }).then(res => {
        boxoList.value = res.data
    })

    await getMonitorEventAnalyseWave({
        id: row.eventId,
        systemType: 0,
        type: 0
    }).then(res => {
        if (res != undefined) {
            wp.value = res.data
        }
        loading1.value = false
    })
}

onMounted(() => {
    tableStore.index()
})
const layout = mainHeight(83) as any
const layout1 = mainHeight(93) as any
</script>
<style lang="scss" scoped>
.map {
    height: calc(v-bind('layout1.height') - 30px);
}
.tall {
    height: calc((v-bind('layout1.height') - 100px) / 2);
}
.tall1 {
    height: calc((v-bind('layout1.height') - 100px) / 2 - 50px);
}

.group {
    position: absolute;
    top: 15px;
    right: 20px;
    z-index: 10;
}

:deep(.el-card__body) {
    padding: 10px;
}
/* 自定义 el-empty 的样式 */
:deep(.custom-empty) {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%; /* 调整高度 */
    padding: 20px; /* 调整内边距 */
    .el-empty__image {
        display: none; /* 隐藏默认图片 */
    }
    .el-empty__description {
        font-size: 14px; /* 调整字体大小 */
        color: var(--vxe-font-color);
    }
}
</style>