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

<template>
    <div>
        <!--暂降方向统计 -->
        <TableHeader
            ref="TableHeaderRef"
            :showReset="false"
            @selectChange="selectChange"
            datePicker
             :timeKeyList="prop.timeKey"
            v-if="fullscreen"
        ></TableHeader>
        <my-echart
            v-loading="tableStore.table.loading"
            class="tall"
            :options="echartList"
            :style="{ width: prop.width, height: `calc(${prop.height} )` }"
        />
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted, provide, reactive, watch, h } from 'vue'
import TableStore from '@/utils/tableStore'
import MyEchart from '@/components/echarts/MyEchart.vue'
import TableHeader from '@/components/table/header/index.vue'
import { getTime } from '@/utils/formatTime'

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

const headerHeight = ref(57)

const TableHeaderRef = ref()

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 echartList = ref({})

// const data = [
//     {
//         name: '来自电网',
//         value: 4
//     },
//     {
//         name: '来自负荷',
//         value: 41
//     }
// ]

const OverLimitDetailsRef = ref()
const tableStore: any = new TableStore({
    url: '/cs-harmonic-boot/csevent/getEventDirectionData',
    method: 'POST',
    showPage: false,
    column: [],
    beforeSearchFun: () => {
        setTime()
    },
    loadCallback: () => {
        if (!tableStore.table.data || !Array.isArray(tableStore.table.data)) {
            return []
        }
        const chartData = ref(
            tableStore.table.data.map((item: any) => ({
                name: item.source === 'load' ? '来自负荷' : '来自电网',
                value: item.times
            }))
        )

        const total = chartData.value.reduce((sum: any, item: any) => sum + item.value, 0)

        echartList.value = {
            title: {},

            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                top: '50',
                right: '10',
                formatter: function (name: string) {
                    const item = chartData.value.find((i: any) => i.name === name)
                    return item ? `${name}   ${item.value}次` : name
                }
            },
            xAxis: {
                show: false
            },
            yAxis: {
                show: false
            },
            grid: {
                left: '10px',
                right: '20px'
            },

            options: {
                dataZoom: null,
                title: [
                    {
                        text: '暂降方向统计',
                        left: 'center'
                    },
                    {
                        text: total + '次',
                        left: 'center',
                        top: 'center'
                    }
                ],
                series: [
                    {
                        type: 'pie',
                        center: 'center',
                        radius: ['55%', '75%'],
                        label: {
                            show: false,
                            position: 'outside',
                            textStyle: {
                                //数值样式
                            }
                        },
                        name: '事件统计',
                        data: chartData.value
                    }
                ]
            }
        }
    }
})

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

provide('tableStore', tableStore)

const setTime = () => {
    const time = getTime(
        (TableHeaderRef.value?.datePickerRef.interval || prop.interval) ?? 0,
        prop.timeKey,
        fullscreen.value
            ? [tableStore.table.params.searchBeginTime, tableStore.table.params.searchEndTime]
            : prop.timeValue
    )

    if (Array.isArray(time)) {
        tableStore.table.params.searchBeginTime = time[0]
        tableStore.table.params.searchEndTime = time[1]
        TableHeaderRef.value?.setInterval(time[2] - 0)
        TableHeaderRef.value?.setTimeInterval([time[0], time[1]])
    } else {
        console.warn('获取时间失败，time 不是一个有效数组')
    }
}

// 点击行
const cellClickEvent = ({ row, column }: any) => {
    if (column.field != 'name') {
        OverLimitDetailsRef.value.open(row)
    }
}

onMounted(() => {
    tableStore.index()
})
watch(
    () => prop.timeKey,
    val => {
        tableStore.index()
    }
)
watch(
    () => prop.timeValue,
    (newVal, oldVal) => {
        tableStore.index()
    },
    {
        deep: true
    }
)

const addMenu = () => {}
</script>
<style lang="scss" scoped></style>