驾驶舱页面绘制
绘制2、稳态电能质量分析、稳态治理效果分析、暂态电能质量分析页面
This commit is contained in:
guanj
199
src/components/cockpit/transientDetails/index.vue
Normal file
199
src/components/cockpit/transientDetails/index.vue
Normal file
@@ -0,0 +1,199 @@
|
||||
<template>
|
||||
<div>
|
||||
<!--暂态事件明细 -->
|
||||
|
||||
<el-calendar v-model="value" :style="{ height: prop.height, 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="list?.filter(item => item.time == data.day)[0]?.type || false"
|
||||
>
|
||||
<template #content>
|
||||
<!-- <span v-html="list?.filter(item => item.time == data.day)[0]?.type || ''"></span> -->
|
||||
<div v-for="item in list?.filter(item => item.time == data.day)">
|
||||
<div>电压暂降：{{ item.type || '' }}</div>
|
||||
<div>电压中断：{{ item.type1 || '' }}</div>
|
||||
<div>电压暂升：{{ item.type2 || '' }}</div>
|
||||
</div>
|
||||
</template>
|
||||
<div
|
||||
:style="{ height: `calc(${prop.height} / 5 - 47px)`, overflow: 'auto' }"
|
||||
v-for="item in list?.filter(item => item.time == data.day)"
|
||||
>
|
||||
<div>电压暂降:{{ item.type || '' }}</div>
|
||||
<div>电压中断:{{ item.type1 || '' }}</div>
|
||||
<div>电压暂升:{{ item.type2 || '' }}</div>
|
||||
</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 Table from '@/components/table/index.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { getTimeOfTheMonth } from '@/utils/formatTime'
|
||||
import { overflow } from 'html2canvas/dist/types/css/property-descriptors/overflow'
|
||||
import { dayjs } from 'element-plus'
|
||||
|
||||
dayjs.en.weekStart = 1 //设置日历的周起始日为星期一
|
||||
const value = ref(new Date())
|
||||
const prop = defineProps({
|
||||
width: { type: String },
|
||||
height: { type: String },
|
||||
timeKey: { type: String },
|
||||
timeValue: { type: Object }
|
||||
})
|
||||
const list = ref([
|
||||
{
|
||||
time: '2025-10-01',
|
||||
key: 81,
|
||||
type: 1,
|
||||
type1: 1,
|
||||
type2: 1
|
||||
},
|
||||
{
|
||||
time: '2025-10-31',
|
||||
key: 81,
|
||||
type: 1,
|
||||
type1: 1,
|
||||
type2: 1
|
||||
},
|
||||
{
|
||||
time: '2025-10-08',
|
||||
key: 20,
|
||||
type: 1,
|
||||
type1: 1,
|
||||
type2: 1
|
||||
},
|
||||
{
|
||||
time: '2025-10-16',
|
||||
key: 20,
|
||||
type: 1,
|
||||
type1: 1,
|
||||
type2: 1
|
||||
},
|
||||
{
|
||||
time: '2025-10-23',
|
||||
key: 20,
|
||||
type: 1,
|
||||
type1: 1,
|
||||
type2: 1
|
||||
},
|
||||
{
|
||||
time: '2025-10-04',
|
||||
key: 0
|
||||
},
|
||||
{
|
||||
time: '2025-10-05',
|
||||
key: 0
|
||||
}
|
||||
])
|
||||
const tableStore: any = new TableStore({
|
||||
url: '/user-boot/dept/deptTree',
|
||||
method: 'POST',
|
||||
|
||||
showPage: false,
|
||||
|
||||
column: [],
|
||||
beforeSearchFun: () => {
|
||||
tableStore.table.params.searchBeginTime = prop.timeValue?.[0] || getTimeOfTheMonth(prop.timeKey)[0]
|
||||
tableStore.table.params.searchEndTime = prop.timeValue?.[1] || getTimeOfTheMonth(prop.timeKey)[1]
|
||||
// value.value = new Date(prop.timeValue?.[0])
|
||||
},
|
||||
loadCallback: () => {
|
||||
tableStore.table.data = []
|
||||
}
|
||||
})
|
||||
|
||||
const tableRef = ref([])
|
||||
|
||||
const setBackground = (value: string) => {
|
||||
let data = []
|
||||
data = list.value?.filter(item => item.time == value)
|
||||
|
||||
if (data && data?.length > 0) {
|
||||
if (data[0].key > 0) {
|
||||
return '#Ff660090'
|
||||
}
|
||||
}
|
||||
|
||||
return '#fff'
|
||||
}
|
||||
|
||||
provide('tableRef', tableRef)
|
||||
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
onMounted(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
watch(
|
||||
() => prop.timeKey,
|
||||
val => {
|
||||
tableStore.index()
|
||||
}
|
||||
)
|
||||
watch(
|
||||
() => prop.timeValue, // 监听的目标（函数形式避免直接传递 props 导致的警告）
|
||||
(newVal, oldVal) => {
|
||||
tableStore.index()
|
||||
},
|
||||
{
|
||||
deep: true // 若 timeValue 是对象/数组，需开启深度监听
|
||||
}
|
||||
)
|
||||
|
||||
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>
|
||||
Reference in New Issue
Block a user