240 lines
7.5 KiB
Vue
240 lines
7.5 KiB
Vue
<template>
|
||
<div>
|
||
<!--暂态事件明细 -->
|
||
<TableHeader
|
||
:showReset="false"
|
||
ref="TableHeaderRef"
|
||
@selectChange="selectChange"
|
||
datePicker
|
||
v-if="fullscreen"
|
||
:timeKeyList="['3']"
|
||
></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)"
|
||
@click="descentClick(item)"
|
||
>
|
||
<!-- <div>电压暂降:{{ item.eventDown || 0 }}</div>
|
||
<div>电压中断:{{ item.eventOff || 0 }}</div>
|
||
<div>电压暂升:{{ item.eventUp || 0 }}</div> -->
|
||
<template v-if="fullscreen">
|
||
<div>电压暂降:{{ item.eventDown || 0 }}</div>
|
||
<div>电压中断:{{ item.eventOff || 0 }}</div>
|
||
<div>电压暂升:{{ item.eventUp || 0 }}</div>
|
||
</template>
|
||
<template v-else>暂态事件</template>
|
||
</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'
|
||
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: [String, Number] },
|
||
timeValue: { type: Object },
|
||
interval: { type: Number }
|
||
})
|
||
|
||
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: () => {
|
||
setTime()
|
||
},
|
||
|
||
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(() => {
|
||
tableStore.index()
|
||
})
|
||
})
|
||
|
||
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 不是一个有效数组')
|
||
}
|
||
}
|
||
|
||
watch(
|
||
() => prop.timeValue,
|
||
(newVal, oldVal) => {
|
||
tableStore.index()
|
||
},
|
||
{
|
||
deep: true
|
||
}
|
||
)
|
||
|
||
// 电压暂降点击事件
|
||
const descentClick = (item: any) => {
|
||
transientListRef.value.open(item.name)
|
||
}
|
||
</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>
|