<!-- 首页看板 -->
<script lang="ts" setup name="Dashboard">
import { ElMessage, ElMessageBox } from 'element-plus'
import dayjs from 'dayjs'
import verificationDetail from './components/verificationDetail.vue'
import deviceDetail from './components/deviceDetail.vue'
import deviceList from './components/deviceList.vue'
import rightBox from './components/rightBox.vue'
import editScheduleDialog from './components/editScheduleDialog.vue'
import { delSchedule, getCalendarList } from '@/api/eqpt/dashboard/calendar'
import useUserStore from '@/store/modules/user'
const height = ref(document.body.clientHeight - 50 - 60 - 10)
const user = useUserStore()// 用户信息
// ------------------------------------UI------------------------------------------
const blockHeight = ref(300) // 每个展示块高度
const bigBlockHeight = ref(300) // 大展示块的高度
const blockWidth = ref(400)
// 计算工作台区域高度 - 顶部-面包屑-边距
const benchDivHeight = ref()
function calcBlockSize() { // 36是消息滚动栏的高度
const bodyHeight = document.body.clientHeight - 60 - 20 - 50 - 36
bigBlockHeight.value = bodyHeight
blockHeight.value = bodyHeight > 610 ? (bodyHeight - 10) / 2 : 300
blockWidth.value = (document.body.clientWidth - 180 - 20 - 20) / 3
console.log(blockHeight.value, blockWidth.value - 20)
benchDivHeight.value = blockHeight.value - 60
}
// -----------------------------------日历--------------------------------------------
const calendarValue = ref(new Date())
const selectedDate = ref('') // 选中的日期
const selectDateRecord = ref('') // 选中的日期记录--完整日期
const editScheduleRef = ref() // 编辑日程ref
const redCircleData = ref() // 日程列表
// 点击编辑日程
const editSchedule = () => {
editScheduleRef.value.initDialog()
}
// 获取日程列表
const fetchCalendarList = () => {
const param = {
userId: user.id,
calendarMonth: selectedDate.value,
}
getCalendarList(param).then((res) => {
redCircleData.value = res.data
})
}
// 点击日期
const clickDate = (day: string) => {
selectDateRecord.value = day
selectedDate.value = day.slice(0, 7)
fetchCalendarList() // 获取日历列表
}
// 点击删除icon
const deleteData = () => {
if (!redCircleData.value || (Object.keys(redCircleData.value).length && !redCircleData.value[selectDateRecord.value].length)) {
ElMessage.warning(`${selectDateRecord.value}没有日程，无法删除`)
return false
}
ElMessageBox.confirm(
`确定删除${selectDateRecord.value}的日程吗？`,
'提示',
{
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
},
)
.then(() => {
const param = {
userId: user.id,
scheduleDate: selectDateRecord.value,
}
delSchedule(param).then((res) => {
ElMessage({
type: 'success',
message: '删除成功',
})
fetchCalendarList() // 获取日历列表
})
})
}
// 编辑日程成功
const editScheduleSuccess = () => {
fetchCalendarList() // 获取日历列表
}
// -----------------------------------------检定详情-------------------------------------
const measureDetailLoading = ref(false) // 检定详情loading
const measureDetailXData = ref([]) as any // 检定详情x轴数据
const measureDetailYDataMax = ref() // 检定详情Y轴数据最大值
const measureDetailData = ref([]) as any // 检定详情数据
const measureDetailYearCount = ref(0) // 年度已检数量
const measureDetailMonthCount = ref(0) // 年度应检数量
// 获取检定详情
const fetchMeasureDetail = () => {
measureDetailLoading.value = true
// getMeasureDetail().then((res: any) => {
// measureDetailXData.value = res.data.map((item: any) => item.date)
// const yValue = res.data.map((item: any) => Number(item.count))
// measureDetailYDataMax.value = Math.max(yValue) > 10 ? Math.max(yValue) : 10
// measureDetailData.value = [{ name: '到期设备', data: yValue }]
// measureDetailLoading.value = false
// })
// 模拟数据
setTimeout(() => {
measureDetailMonthCount.value = 200
measureDetailYearCount.value = 100
measureDetailXData.value = ['2023-01', '2023-02', '2023-03', '2023-04', '2023-05', '2023-06', '2023-07', '2023-08', '2023-09'] // x轴
measureDetailData.value = [
{
name: '已检设备数量',
data: [1, 2, 3, 4, 5, 6, 7, 8, 9],
},
{
name: '应检设备数量',
data: [9, 8, 7, 6, 5, 4, 3, 2, 1],
},
]
measureDetailLoading.value = false // 关闭loading
}, 2000)
}
// ------------------------------------------------------------------------------------
onMounted(() => {
calcBlockSize()
selectedDate.value = dayjs().format('YYYY-MM')
selectDateRecord.value = dayjs().format('YYYY-MM-DD')
fetchMeasureDetail() // 获取检定详情
// fetchApprovalMessageData() // 审批提醒
// fetchWorkMessageData() // 工作提醒
// fetchNoticeList() // 获取通知公告列表
fetchCalendarList() // 获取日历列表
// -------------------监听日历三个按钮操作（上个月、今天、下个月）------------------
// 点击上个月
const prevBtn = document.querySelector(
'.el-calendar__button-group .el-button-group>button:nth-child(1)',
)
prevBtn!.addEventListener('click', (e) => {
const day = dayjs(calendarValue.value).format('YYYY-MM')
clickDate(day)
})
// 点击下一个月
const nextBtn = document.querySelector(
'.el-calendar__button-group .el-button-group>button:nth-child(3)',
)
nextBtn!.addEventListener('click', () => {
const day = dayjs(calendarValue.value).format('YYYY-MM')
clickDate(day)
})
// 点击今天
const todayBtn = document.querySelector(
'.el-calendar__button-group .el-button-group>button:nth-child(2)',
)
todayBtn!.addEventListener('click', () => {
const day = dayjs(calendarValue.value).format('YYYY-MM')
clickDate(day)
})
// ------------------------------------------------------------------------------
})
</script>
<template>
<app-container>
<el-row :gutter="10">
<el-col :span="8">
<bench-col
style="overflow: auto;"
icon="icon-calendar"
title="工作日历"
:height="bigBlockHeight"
:is-edit="true"
:is-show-delete="true"
@edit-data="editSchedule"
@delete-data="deleteData"
>
<el-calendar v-model="calendarValue">
<template #dateCell="{ data }">
<div style="width: 100%;height: 100%;text-align: center;" @click="clickDate(data.day)">
<span>
{{ data.day.split("-").slice(2).join() }}
</span>
</div>
<div v-for="(value, key, index) in redCircleData" :key="index">
<el-popover
v-if="key === data.day && value.length"
placement="top-start"
trigger="hover"
width="auto"
>
<div class="popover-content-area-class">
<span style="font-weight: 600;">{{ key }}</span>
<li v-for="(e, i) in value" :key="i" class="calendar-li-item">
{{ e.scheduleMatters }}
</li>
</div>
<template #reference>
<div style="width: 100%;height: 100%;display: flex;flex-direction: column;align-items: center;" @click="clickDate(data.day)">
<!-- <span>
{{ data.day.split("-").slice(2).join() }}
</span> -->
<span style="margin-top: -30px;">
<el-icon :size="20" color="#f56c6c">
<alarm-clock />
</el-icon>
<!-- <span v-if="key === data.day" class="redCircle" /> -->
</span>
</div>
</template>
</el-popover>
</div>
</template>
</el-calendar>
</bench-col>
</el-col>
<el-col :span="8">
<bench-col
v-loading="measureDetailLoading"
icon="icon-line"
title="检定详情"
:height="blockHeight"
>
<div style="display: flex;margin-bottom: 10px;">
<div style="display: flex;margin-right: 20px;">
<span style="font-size: 14px;">年度已检数量</span>
<span style="margin-left: 10px;color: #000;font-weight: 600;">{{ measureDetailYearCount }}</span>
</div>
<div style="display: flex;">
<span style="font-size: 14px;">年度应检数量</span>
<span style="margin-left: 10px;color: #000;font-weight: 600;">{{ measureDetailMonthCount }}</span>
</div>
</div>
<line-chart
style="width: 100%; height: 90%;"
:x-axis-data="measureDetailXData"
:width="`${blockWidth - 20}px`"
:data="measureDetailData"
/>
</bench-col>
</el-col>
</el-row>
<!-- 编辑日程组件 -->
<edit-schedule-dialog ref="editScheduleRef" @edit-schedule-success="editScheduleSuccess" />
</app-container>
</template>
<style lang="scss" scoped>
.container {
// width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
padding: 0;
overflow: hidden;
}
</style>
