admin-govern/src/components/cockpit/transientStatistics/index.vue

<template>
    <div>
        <!--暂态事件统计 -->
        <TableHeader :showReset="false" @selectChange="selectChange" datePicker v-if="fullscreen"></TableHeader>
        <my-echart
            class="tall"
            :options="echartList"
            :style="{
                width: prop.width,
                height: `calc(${prop.height} / 2 - ${headerHeight / 2}px + ${fullscreen ? 0 : 28}px )`
            }"
        />
        <Table
            ref="tableRef"
            @cell-click="cellClickEvent"
            :height="`calc(${prop.height} / 2 - ${headerHeight / 2}px + ${fullscreen ? 0 : 28}px )`"
            isGroup
        ></Table>
        <TransientStatisticsDetail ref="transientStatisticsDetailRef"></TransientStatisticsDetail>
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted, provide, reactive, watch, h } from 'vue'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import MyEchart from '@/components/echarts/MyEchart.vue'
import { useConfig } from '@/stores/config'
import TransientStatisticsDetail from '@/components/cockpit/transientStatistics/components/transientStatisticsDetail.vue'
import TableHeader from '@/components/table/header/index.vue'
import { netEventEcharts } from '@/api/harmonic-boot/cockpit/cockpit'

const prop = defineProps({
    w: { type: [String, Number] },
    h: { type: [String, Number] },
    width: { type: [String, Number] },
    height: { type: [String, Number] },
    timeKey: { type: [String, Number] },
    timeValue: { type: Object }
})

const headerHeight = ref(57)

const selectChange = (showSelect: any, height: any, datePickerValue?: any) => {
    headerHeight.value = height

    if (datePickerValue && datePickerValue.timeValue) {
        // 更新时间参数
        tableStore.table.params.searchBeginTime = datePickerValue.timeValue[0]
        tableStore.table.params.searchEndTime = datePickerValue.timeValue[1]
    }
}

// 计算是否全屏展示
const fullscreen = computed(() => {
    const w = Number(prop.w)
    const h = Number(prop.h)
    if (!isNaN(w) && !isNaN(h) && w === 12 && h === 6) {
        // 执行相应逻辑
        return true
    } else {
        return false
    }
})
const config = useConfig()

const data = ref()

const echartList = ref()

const eventEcharts = () => {
    netEventEcharts({
        searchBeginTime: tableStore.table.params.searchBeginTime || prop.timeValue?.[0],
        searchEndTime: tableStore.table.params.searchEndTime || prop.timeValue?.[1]
    }).then(res => {
        // 整理接口数据为图表所需格式
        const rawData = res.data || {}
        data.value = [
            {
                name: '电压中断',
                value: rawData.eventOff || 0
            },
            {
                name: '电压暂降',
                value: rawData.eventDown || 0
            },
            {
                name: '电压暂升',
                value: rawData.eventUp || 0
            }
        ]

        echartList.value = {
            title: {},
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                top: 'center',
                right: '5%',
                formatter: function (e: any) {
                    return e + '   ' + data.value.filter((item: any) => item.name == e)[0].value + '次'
                }
            },
            xAxis: {
                show: false
            },
            yAxis: {
                show: false
            },
            grid: {
                left: '10px',
                right: '20px'
            },
            color: ['#FF9100', '#FFBF00', config.layout.elementUiPrimary[0]],
            options: {
                dataZoom: null,
                title: [
                    {
                        text: '暂态事件统计',
                        left: 'center'
                    },
                    {
                        text: rawData.eventOff + rawData.eventDown + rawData.eventUp + '次',
                        left: 'center',
                        top: 'center'
                    }
                ],
                series: [
                    {
                        type: 'pie',
                        center: 'center',
                        radius: ['50%', '70%'],
                        label: {
                            show: false,
                            position: 'outside'
                        },
                        name: '事件统计',
                        data: data.value
                    }
                ]
            }
        }
    })
}

const transientStatisticsDetailRef = ref()

const tableStore: any = new TableStore({
    url: '/cs-harmonic-boot/csevent/netEventTable',
    method: 'POST',

    showPage: false,

    column: [
        {
            field: 'index',
            title: '序号',
            width: '80',
            formatter: (row: any) => {
                return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
            }
        },
        {
            title: '名称',
            field: 'name',
            minWidth: '90'
        },

        {
            title: '电压中断(次)',
            field: 'eventOff',
            minWidth: '70',
            sortable: true,
            render: 'customTemplate',
            customTemplate: (row: any) => {
                return `<span style='cursor: pointer;text-decoration: underline;'>${row.eventOff}</span>`
            }
        },
        {
            title: '电压暂降(次)',
            field: 'eventDown',
            minWidth: '80',
            sortable: true,
            render: 'customTemplate',
            customTemplate: (row: any) => {
                return `<span style='cursor: pointer;text-decoration: underline;'>${row.eventDown}</span>`
            }
        },
        {
            title: '电压暂升(次)',
            field: 'eventUp',
            minWidth: '80',
            sortable: true,
            render: 'customTemplate',
            customTemplate: (row: any) => {
                return `<span style='cursor: pointer;text-decoration: underline;'>${row.eventUp}</span>`
            }
        }
    ],
    beforeSearchFun: () => {
        tableStore.table.params.searchBeginTime = tableStore.table.params.searchBeginTime || prop.timeValue?.[0]
        tableStore.table.params.searchEndTime = tableStore.table.params.searchEndTime || prop.timeValue?.[1]
    },
    loadCallback: () => {
        eventEcharts()
    }
})

const tableRef = ref()
provide('tableRef', tableRef)

provide('tableStore', tableStore)

// 点击行
const cellClickEvent = ({ row, column }: any) => {
    if (column.field != 'name') {
        transientStatisticsDetailRef.value.open(
            row,
            tableStore.table.params.searchBeginTime || prop.timeValue?.[0],
            tableStore.table.params.searchEndTime || prop.timeValue?.[1]
        )
    }
}

onMounted(() => {
    setTimeout(() => {
        tableStore.index()
    }, 200)
})
watch(
    () => prop.timeKey,
    val => {
        tableStore.index()
    }
)
watch(
    () => prop.timeValue,
    (newVal, oldVal) => {
        // 当外部时间值变化时，更新表格的时间参数
        if (newVal && (!oldVal || newVal[0] !== oldVal[0] || newVal[1] !== oldVal[1])) {
            tableStore.table.params.searchBeginTime = newVal[0]
            tableStore.table.params.searchEndTime = newVal[1]
            tableStore.index()
        }
    },
    {
        deep: true
    }
)
</script>
<style lang="scss" scoped></style>