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

<template>
    <div>
        <!--指标越限明细 -->
        <TableHeader :showReset="false" @selectChange="selectChange" datePicker v-if="fullscreen"></TableHeader>
        <el-calendar
            v-model="value"
            :style="{
                height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px )`,
                overflow: 'auto'
            }"
        >
            <template #date-cell="{ data }">
                <div style="height: 100%; padding: 8px" :style="{ background: setBackground(data.day) }">
                    <p :class="data.isSelected ? 'is-selected' : ''">
                        {{ data.day.split('-').slice(2).join('-') }}
                    </p>
                    <el-tooltip effect="dark" placement="top" :hide-after="0" v-if="getTextForDate(data.day)">
                        <template #content>
                            <span v-html="getTextForDate(data.day)"></span>
                        </template>
                        <div
                            :style="{
                                height: `calc(${prop.height} / 5 ) `,
                                overflow: 'auto'
                            }"
                            v-html="getTextForDate(data.day)"
                        ></div>
                    </el-tooltip>
                </div>
            </template>
        </el-calendar>
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted, provide, reactive, watch, h } from 'vue'
import TableStore from '@/utils/tableStore'
import TableHeader from '@/components/table/header/index.vue'
import { dayjs } from 'element-plus'

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

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

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 getTextForDate = (date: string) => {
    const item = list.value?.find((item: any) => item.time === date)
    return item ? item.text : ''
}

const tableStore: any = new TableStore({
    // url: '/user-boot/role/selectRoleDetail?id=0',
    url: '/harmonic-boot/limitRateDetailD/limitCalendarData',
    method: 'POST',
    showPage: false,
    column: [],
    beforeSearchFun: () => {
        tableStore.table.params.searchBeginTime = tableStore.table.params.searchBeginTime || prop.timeValue?.[0]
        tableStore.table.params.searchEndTime = tableStore.table.params.searchEndTime || prop.timeValue?.[1]
    },
    loadCallback: () => {
        // 将后端返回的数据整合到 list 中
        //     tableStore.table.data = [
        //     {
        //         "time": "2025-11-13",
        //         "items": [
        //             "闪变越限",
        //             "谐波电流越限"
        //         ],
        //         "status": 1
        //     },
        //     {
        //         "time": "2025-11-14",
        //         "items": [
        //             "频率偏差越限",
        //             "三相电压不平衡越限",
        //             "谐波电压越限",
        //             "谐波电流越限",
        //              "频率偏差越限",
        //             "三相电压不平衡越限",
        //             "谐波电压越限",
        //             "谐波电流越限",
        //              "频率偏差越限",
        //             "三相电压不平衡越限",
        //             "谐波电压越限",
        //             "谐波电流越限"
        //         ],
        //         "status": 2
        //     }
        // ]
        if (tableStore.table.data && tableStore.table.data.length > 0) {
            list.value = tableStore.table.data.map((item: any) => {
                // 将 items 数组转换为带换行的文本
                const text = item.items && item.items.length > 0 ? item.items.join('<br/>') : ''

                return {
                    time: item.time,
                    key: item.status || 0,
                    text: text
                }
            })
        } else {
            list.value = []
        }
    }
})

const setBackground = (value: string) => {
    const data = list.value?.find((item: any) => item.time === value)

    if (data) {
        // 根据 status 值返回对应的颜色
        switch (data.key) {
            case 0: // 无越限
                return '#33996690'
            case 1: // 一般越限
                return '#FFCC3390'
            case 2: // 严重越限
                return '#Ff660090'
            default:
                return '#fff' // 默认白色背景
        }
    }

    return '#fff' // 默认白色背景
}

provide('tableStore', tableStore)

onMounted(() => {
    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()
        }
    },
    {
        deep: true
    }
)

const addMenu = () => {}
</script>
<style lang="scss" scoped>
:deep(.el-calendar) {
    .el-calendar__header {
        display: none;
    }
    .el-calendar__body {
        padding: 0px !important;
        height: 100%;
        .el-calendar-table {
            height: 100%;
        }
    }
    .el-calendar-day {
        height: 100%;
        padding: 0px;
        overflow: hidden;
    }
    .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>