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

<template>
    <div>
        <!--暂态事件明细 -->
        <TableHeader
            :showReset="false"
            ref="TableHeaderRef"
            @selectChange="selectChange"
            datePicker
            v-if="fullscreen"
            :timeCacheFlag="false"
        ></TableHeader>
        <el-calendar
            v-model="value"
            :style="{
                height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px  )`,
                overflow: 'auto'
            }"
            v-loading="tableStore.table.loading"
        >
            <template #date-cell="{ data }">
                <div
                    style="padding: 8px"
                    :style="{
                        background: setBackground(data.day),
                        height: `calc((${prop.height} - 100px - ${headerHeight}px + ${fullscreen ? 0 : 56}px) / 5 )`
                    }"
                >
                    <p :class="data.isSelected ? 'is-selected' : ''">
                        {{ data.day.split('-').slice(2).join('-') }}
                    </p>
                    <el-tooltip effect="dark" placement="top" :hide-after="0" v-if="hasEventData(data.day)">
                        <template #content>
                            <!-- <span v-html="list?.filter(item => item.time == data.day)[0]?.type || ''"></span> -->
                            <div v-for="item in list?.filter((item:any) => item.name == data.day)">
                                <div>电压暂降：{{ item.eventDown || 0 }}</div>
                                <div>电压中断：{{ item.eventOff || 0 }}</div>
                                <div>电压暂升：{{ item.eventUp || 0 }}</div>
                            </div>
                        </template>
                        <div
                            style="text-decoration: underline"
                            class="details"
                            v-for="item in list?.filter((item:any) => item.name == data.day)"
                        >
                            <div @click="descentClick">电压暂降:{{ item.eventDown || 0 }}</div>
                            <div>电压中断:{{ item.eventOff || 0 }}</div>
                            <div>电压暂升:{{ item.eventUp || 0 }}</div>
                        </div>
                    </el-tooltip>
                </div>
            </template>
        </el-calendar>
        <!-- 暂态事件列表  -->
        <TransientList ref="transientListRef" />
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted, provide, reactive, watch, nextTick } from 'vue'
import TableStore from '@/utils/tableStore'
import { dayjs } from 'element-plus'
import TransientList from './components/transientList.vue'
import TableHeader from '@/components/table/header/index.vue'

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 TableHeaderRef = ref()

const hasEventData = (day: string) => {
    const item = list.value?.find((item: any) => item.name == day)
    if (!item) return false

    return (item.eventDown || item.eventOff || item.eventUp) > 0
}

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
    }
})

dayjs.en.weekStart = 1 //设置日历的周起始日为星期一
const value = ref(new Date())

const transientListRef = ref()
const list = ref()

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

    showPage: false,

    column: [],

    beforeSearchFun: () => {
        if (!fullscreen.value && prop.timeValue && Array.isArray(prop.timeValue)) {
            tableStore.table.params.searchBeginTime = prop.timeValue[0]
            tableStore.table.params.searchEndTime = prop.timeValue[1]
        }
    },

    loadCallback: () => {
        value.value = tableStore.table.params.searchBeginTime
        list.value = tableStore.table.data
    }
})

const setBackground = (value: string) => {
    let data = []
    data = list.value?.filter((item: any) => item.name == value)

    if (data && data?.length > 0) {
        if (data[0].eventDown > 0 || data[0].eventOff > 0 || data[0].eventUp > 0) {
            return '#Ff660090'
        }
    }

    return '#fff'
}

provide('tableStore', tableStore)

onMounted(() => {
    nextTick(() => {
        if (TableHeaderRef.value && typeof TableHeaderRef.value.setDatePicker === 'function') {
            TableHeaderRef.value.setDatePicker([{ label: '月份', value: 3 }])
        }
        if (fullscreen.value) {
            TableHeaderRef.value.setInterval(3)
        }
        tableStore.index()
    })
})
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()
    //     }
    // },
    val => {
        tableStore.index()
    },

    {
        deep: true
    }
)

// 电压暂降点击事件
const descentClick = () => {
    transientListRef.value.open()
}
</script>
<style lang="scss" scoped>
:deep(.el-calendar) {
    .el-calendar__button-group {
        display: none;
    }
    .el-calendar__body {
        padding: 0px !important;
        height: calc(100% - 46px);
        .el-calendar-table {
            height: 100%;
        }
    }
    .el-calendar-day {
        // height: calc(912px / 5 );
        height: 100%;
        padding: 0px;
        overflow: hidden;
        .details {
            height: calc(100% - 20px);
            overflow-y: auto;
        }
    }
    .el-calendar-table__row {
        .next {
            pointer-events: none;
        }
        .prev {
            pointer-events: none;
        }
    }
    .el-calendar-table .el-calendar-day:hover {
        background-color: #ffffff00;
    }
    .el-calendar-table td.is-selected {
        background-color: #ffffff00;
    }
}

// /*calendar_class 是el-calendar所在父标签的css*/
// .calendar_class >>> .el-calendar-table:not(.is-range) td.next {
//     pointer-events: none;
// }
// .calendar_class >>> .el-calendar-table:not(.is-range) td.prev {
//     pointer-events: none;
// }
</style>