<!-- 首页看板 -->
<script lang="ts" setup name="Dashboard">
import { ElMessage, ElMessageBox } from 'element-plus'
import dayjs from 'dayjs'
import { Search } from '@element-plus/icons-vue'
import editScheduleDialog from './components/editScheduleDialog.vue'
import tableList from './components/tableList.vue'
import BarChartVerticalCom from './components/BarChartVertical.vue'
import { pic } from './pic'
import BarChartHorizontalCom from './components/BarChartHorizontalCom.vue'
import BarChartVerticalCustom from './components/BarChartHorizontalCustom.vue'
import BarChartVerticalCircle from './components/BarChartVerticalCircle.vue'
// import { delSchedule, getCalendarList } from '@/api/eqpt/dashboard/calendar'
import { delSchedule, getBoardMessage, getCalendarList, getDeviceClassify, getDeviceStatus, getDeviceType, getMeasureDetail, getMeasureDetailTrend, inCheckInfo, inUseInfo, toCheckInfo } from '@/api/eqpt/dashboard/index'
import { getUserDept, getUserDeptSon } from '@/api/system/user'
import { toTreeList, underlineToHump } from '@/utils/structure'
import useUserStore from '@/store/modules/user'
import img1 from '@/assets/images/bench/在检设备.png'
import img2 from '@/assets/images/bench/待检设备.png'
import img3 from '@/assets/images/bench/在用设备.png'
import { getDeptTreeList } from '@/api/system/dept'
const height = ref(document.body.clientHeight - 50 - 60 - 10)
const user = useUserStore()// 用户信息
const companyId = ref() // 用户单位
const isAdmin = user.roleNames.join().includes('管理员')
// ------------------------------------UI------------------------------------------
const blockHeight = ref(300) // 每个展示块高度
const bigBlockHeight = ref(300) // 大展示块的高度
const blockWidth = ref(400)
const smallBlockHeight = ref()
// 计算工作台区域高度 - 顶部-面包屑-边距
const benchDivHeight = ref(215)
function calcBlockSize() { // 36是消息滚动栏的高度
const bodyHeight = document.body.clientHeight - 60 - 20 - 50 - 15
bigBlockHeight.value = bodyHeight
blockHeight.value = bodyHeight > 610 ? (bodyHeight) / 3 : 300
smallBlockHeight.value = bodyHeight > 610 ? (bodyHeight) / 4 : 215
blockWidth.value = (document.body.clientWidth - 180 - 20 - 20) / 3
benchDivHeight.value = blockHeight.value - 60
}
// -----------------------------------日历--------------------------------------------
const calendarValue = ref(new Date())
const selectedDate = ref('') // 选中的日期
const selectDateRecord = ref('') // 选中的日期记录--完整日期
const editScheduleRef = ref() // 编辑日程ref
const redCircleData = ref() // 日程列表
// 获取当前月份全部日期
const getDaysMonth = (time: string) => {
// time => '2023-12'
const currentMonth = dayjs(time).startOf('month')
const daysInMonth = currentMonth.daysInMonth()
const dates = []
for (let i = 1; i <= daysInMonth; i++) { const date = currentMonth.date(i); dates.push(dayjs(date).format('YYYY-MM-DD')) }
return dates as string[]
}
// 点击编辑日程
const editSchedule = () => {
editScheduleRef.value.initDialog(selectDateRecord.value)
}
// 获取日程列表
const fetchCalendarList = () => {
const paramas = {
companyId: companyId.value,
startDate: `${selectedDate.value}-01`,
endDate: `${selectedDate.value}-31`,
}
const dates = getDaysMonth(selectedDate.value)
const timeObj: { [key: string]: any } = {}
dates.forEach((item) => {
timeObj[item] = []
})
getCalendarList(paramas).then((res) => {
redCircleData.value = res.data.forEach((item: any) => {
for (const i in timeObj) {
if (i === item.markDate) {
timeObj[i].push(item)
}
}
})
redCircleData.value = timeObj
// console.log(redCircleData.value, 'redCircleData.value')
})
}
// 点击日期
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(() => {
for (const i in redCircleData.value) {
if (selectDateRecord.value === i && redCircleData.value[i].length) {
delSchedule({ id: redCircleData.value[i][0].id }).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) => {
measureDetailMonthCount.value = res.data.yearToCheck
measureDetailYearCount.value = res.data.yearChecked
})
getMeasureDetailTrend().then((res) => {
measureDetailXData.value = res.data.map((item: any) => item.time)
measureDetailData.value = [
{
name: '已检设备数量',
data: res.data.map((item: any) => item.haveChecked),
color: '#19be6b',
},
{
name: '应检设备数量',
data: res.data.map((item: any) => item.shouldCheck),
color: '#2d8cf0',
},
]
measureDetailLoading.value = false
})
}
// -----------------------------------------设备详情-------------------------------------
const resizePage = () => {
setTimeout(() => {
const resize = new Event('resize')
window.dispatchEvent(resize)
}, 500)
}
const Devicedept = ref()// 所属部门
const Devicedept1 = ref()// 所属部门
const Devicelegend = ref({ // 饼图legend
show: true,
orient: 'horizontal',
// right: '20%',
top: '0',
icon: 'circle',
itemWidth: 12,
itemHeight: 12,
itemStyle: {
fontSize: 18,
},
})
// 设备分类
const ClassifyData = ref([])
// 设备状态
const StatusData = ref([])
// 设备类型
const TypeData = ref([])
const TypeXData = ref([])
// 获取设备详情数据
const fecthDeviceDetail = (id: string) => {
// 获取设备类型
getDeviceType({ deptIds: id }).then((res) => {
TypeData.value = res.data.map((item: any) => item.count)
TypeXData.value = res.data.map((item: any) => item.name)
resizePage()
})
// 设备状态
getDeviceStatus({ deptIds: id }).then((res) => {
StatusData.value = res.data.map((item: any) => {
return {
name: item.name,
value: item.count,
}
})
resizePage()
})
// 设备分类
getDeviceClassify({ deptIds: id }).then((res) => {
ClassifyData.value = res.data.map((item: any) => {
return {
name: item.name,
value: item.count,
}
})
resizePage()
})
}
fecthDeviceDetail('')
// 设备详情搜索
const searchDeviceDetail = () => {
if (Devicedept.value) {
fecthDeviceDetail(Devicedept.value)
}
else {
fecthDeviceDetail('')
}
}
// -----------------------------------------设备状态-------------------------------------
// 导航菜单
const deviceTable = ref([
{
name: '在检设备',
img: img1,
},
{
name: '待检设备',
img: img2,
},
{
name: '在用设备',
img: img3,
},
])
// 部门
const deptList = ref<{ id: string; value: string; name: string }[]>([])
// 展示 0在检设备 1待检设备 2在用设备
const showDevice = ref(0)
const changeShow = (index: number) => {
showDevice.value = index
resizePage()
}
const tableDept = ref() // 所属部门
const columns = ref([
{ text: '设备名称', value: 'planName' },
{ text: '规格型号', value: 'director' },
{ text: '所属部门', value: 'trainTime' },
{ text: '在检数量', value: 'count' },
])
const haveCheckList = ref([
{
planName: '1',
director: '123',
trainTime: '顶级',
count: '1',
},
{
planName: '2',
director: '123',
trainTime: '顶级',
count: '9',
},
{
planName: '3',
director: '123',
trainTime: '顶级',
count: '7',
},
{
planName: '5',
director: '123',
trainTime: '顶级',
count: '4',
},
{
planName: '6',
director: '123',
trainTime: '顶级',
count: '6',
},
{
planName: '8',
director: '123',
trainTime: '顶级',
count: '8',
},
])
const scrollTable = ref()
const scrolltimer = ref()
// 设置自动滚动
const autoScroll = (stop: boolean, list: any[]) => {
const table = scrollTable.value
// 拿到表格中承载数据的div元素
const divData = table?.$refs.bodyWrapper.getElementsByClassName('el-scrollbar__wrap')[0]
// console.log(divData, 'divData')
// 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
if (stop || list.length < 5) {
// 再通过事件监听，监听到 组件销毁 后，再执行关闭计时器。
window.clearInterval(scrolltimer.value)
scrolltimer.value = null
}
else {
if (list.length < 5 || stop) {
return
}
if (divData) {
scrolltimer.value = window.setInterval(() => {
// divData.style.transition = 'all 1s'
// 元素自增距离顶部1像素
divData.scrollTop += 1
// 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {
// 重置table距离顶部距离
divData.scrollTop = 0
// 重置table距离顶部距离。值=(滚动到底部时，距离顶部的大小) - 整个高度/2
// divData.scrollTop = divData.scrollTop - divData.scrollHeight / 2
}
}, 100) // 滚动速度
}
}
}
// 设备态势分析-在检
const inCheckStatisticData = ref([])
// 部门排行 - 在检
const inCheckDeptSeriesData = ref<any[]>([])
// 部门排行 - 在检
const inCheckDeptAxisData = ref([])
// 设备列表 - 在检
const inCheckTable = ref()
const inCheckTableColumns = ref([
{ text: '设备名称', value: 'equipmentName' },
{ text: '规格型号', value: 'model' },
{ text: '所属部门', value: 'deptName' },
{ text: '在检数量', value: 'count' },
])
// :series-data="[{ width: 8, data: [9, 13, 15, 19, 12, 15, 13, 16, 18, 20, 21, 14, 13] },
// { width: 1, data: [22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22] }]"
// :y-axis-data="['data1-1-9', 'data2-2-13', 'data3-3-15', 'data4-4-19', '
// 设备态势分析-待检
const toCheckStatisticData = ref([])
// 部门排行 - 待检
const toCheckDeptSeriesData = ref<any[]>([])
// 部门排行 - 待检
const toCheckDeptAxisData = ref([])
// 设备列表 - 待检
const toCheckTable = ref([])
// 设备态势 - 在用
const inUseStatisticData = ref([])
const inUseSeriesData = ref([])
const inUseYAxisData = ref([])
const inUseData = ref([])
const inUseXAxisData = ref([])
// 获取设备状态数据
const fecthDeviceStatus = (id: string) => {
// 在检设备
inCheckInfo({ deptIds: id }).then((res) => {
const data = res.data
// 设备态势分析
inCheckStatisticData.value = data.statistic.map((item: any) => ({ name: item.name, value: item.count })).filter((item: any) => item.value)
// 部门排行榜
if (isAdmin) {
const max = Math.max(...data.dircetorAggrList.map((item: any) => item.count))
inCheckDeptSeriesData.value = [
{ width: 8, data: data.dircetorAggrList.map((item: any) => item.count) },
{ width: 1, data: data.dircetorAggrList.map(() => max) },
]
inCheckDeptAxisData.value = data.dircetorAggrList.map((item: any, index: number) => `${item.name}-${index + 1}-${item.count}`)
}
else {
const max = Math.max(...data.companyAggrList.map((item: any) => item.count))
inCheckDeptSeriesData.value = [
{ width: 8, data: data.companyAggrList.map((item: any) => item.count) },
{ width: 1, data: data.companyAggrList.map(() => max) },
]
inCheckDeptAxisData.value = data.companyAggrList.map((item: any, index: number) => `${item.name}-${index + 1}-${item.count}`)
}
// 设备列表
if (isAdmin) {
inCheckTable.value = data.companyList
}
else {
inCheckTable.value = data.deptList
}
if (inCheckTable.value.length) {
autoScroll(false, inCheckTable.value)
}
resizePage()
})
// 待检设备
toCheckInfo({ deptIds: id }).then((res) => {
const data = res.data
// 设备态势分析
toCheckStatisticData.value = data.statistic.map((item: any) => ({ name: item.name, value: item.count })).filter((item: any) => item.value)
// 部门排行榜
if (isAdmin) {
const max = Math.max(...data.dircetorAggrList.map((item: any) => item.count))
toCheckDeptSeriesData.value = [
{ width: 8, data: data.dircetorAggrList.map((item: any) => item.count) },
{ width: 1, data: data.dircetorAggrList.map(() => max) },
]
toCheckDeptAxisData.value = data.dircetorAggrList.map((item: any, index: number) => `${item.name}-${index + 1}-${item.count}`)
}
else {
const max = Math.max(...data.companyAggrList.map((item: any) => item.count))
toCheckDeptSeriesData.value = [
{ width: 8, data: data.companyAggrList.map((item: any) => item.count) },
{ width: 1, data: data.companyAggrList.map(() => max) },
]
toCheckDeptAxisData.value = data.companyAggrList.map((item: any, index: number) => `${item.name}-${index + 1}-${item.count}`)
}
// 设备列表
if (isAdmin) {
toCheckTable.value = data.companyList
}
else {
toCheckTable.value = data.deptList
}
if (toCheckTable.value.length) {
autoScroll(false, toCheckTable.value)
}
resizePage()
})
// 再用设备
inUseInfo({ deptIds: id }).then((res) => {
const data = res.data
inUseStatisticData.value = data.statistic.map((item: any) => ({ name: item.name, value: item.count }))
inUseSeriesData.value = data.nameAggrList.map((item: any) => item.count)
inUseYAxisData.value = data.nameAggrList.map((item: any) => item.name)
// console.log(inUseSeriesData.value, 'inUseSeriesData')
inUseSeriesData.value = data.nameAggrList.map((item: any) => ({
value: item.count,
name: item.name,
}))
if (inUseSeriesData.value.length) {
autoScroll(false, inUseSeriesData.value)
}
inUseData.value = data.meterAggrList.map((item: any) => ({
value: item.count,
name: item.name,
}))
inUseXAxisData.value = data.meterAggrList.map((item: any) => item.name)
resizePage()
})
}
fecthDeviceStatus('')
// 设备状态搜索
const searchDeviceStatus = () => {
if (tableDept.value) {
fecthDeviceStatus(tableDept.value)
}
else {
fecthDeviceStatus('')
}
resizePage()
}
// ------------------------------------------------------------------------------------
onMounted(async () => {
const user = await getUserDept()
companyId.value = user.data.id
// // 获取当前用户所在单位
getDeptTreeList({ pid: '0' }).then((res1) => {
deptList.value = toTreeList(res1.data.map((item: any) => ({ ...item, label: item.name, value: item.id }))) as any[]
})
// getUserDeptSon({}).then((res) => {
// deptList.value = res.data.map((item: any) => ({ id: item.id, value: item.id, name: item.fullName }))
// })
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)
})
autoScroll(false, [])
// ------------------------------------------------------------------------------
resizePage()
})
onBeforeUnmount(() => {
autoScroll(true, [])
})
</script>
<template>
<app-container>
<div class="container">
<div class="container" style="width: 66.66%;">
<bench-col
style="position: relative;overflow-y: scroll;width: 49%;"
icon="icon-calendar"
title="工作日历"
:height="blockHeight"
:is-edit="true"
:is-show-delete="true"
@edit-data="editSchedule"
@delete-data="deleteData"
>
<el-calendar v-model="calendarValue" class="calendar" :style="`height:${blockHeight}px`">
<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.markContent }}
</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>
<bench-col
v-loading="measureDetailLoading"
style="width: 49%;position: relative;"
icon="icon-line"
title="检定详情"
:height="blockHeight"
>
<div style="display: flex;margin-bottom: 10px;position: absolute; top: 5px;right: 10px;">
<div style="display: flex;margin-right: 20px;">
<img src="../../../assets/images/bench/have.png" width="40" height="40">
<div>
<div style="font-size: 14px;">
年度已检数量
</div>
<div style="margin-left: 10px;color: #000;font-weight: 600;">
{{ measureDetailYearCount }}
</div>
</div>
</div>
<div style="display: flex;">
<img src="../../../assets/images/bench/to.png" width="40" height="40">
<div>
<div style="font-size: 14px;">
年度应检数量
</div>
<div style="margin-left: 10px;color: #000;font-weight: 600;">
{{ measureDetailMonthCount }}
</div>
</div>
</div>
</div>
<line-chart
style="width: 100%; height: 100%;"
:x-axis-data="measureDetailXData"
:width="`${blockWidth - 20}px`"
:data="measureDetailData"
/>
</bench-col>
<bench-col
v-loading="false"
style="width: 99%;margin-top: 6px;position: relative;"
icon="icon-line"
title="设备详情"
:height="blockHeight"
>
<div class="device-search">
<!-- <dept-select v-model="Devicedept" placeholder="所属部门" style="width: 150px;" /> -->
<!-- <el-select v-model="Devicedept" filterable clearable placeholder="所属部门" style="width: 150px;">
<el-option v-for="item in deptList" :key="item.id" :label="item.name" :value="item.id" />
</el-select> -->
<el-tree-select
v-model="Devicedept"
style="width: 200px;"
:data="deptList"
:render-after-expand="false"
check-strictly
placeholder="部门"
clearable
/>
<el-icon class="search" style="font-size: 28px;" @click="searchDeviceDetail">
<search style=" margin-left: 8px;" />
</el-icon>
</div>
<div class="device-name">
<div>设备分类分析</div>
<div>设备状态分析</div>
<div>设备类型分析</div>
</div>
<div :style="`height:${blockHeight - 65}px`" class="device-container">
<!-- 设备分类分析 -->
<pie-chart v-show="ClassifyData.length" style="width: 33%; height: 100%;" title="" label-position="outside" :legend="Devicelegend" :width="`${(blockWidth * 2) / 3 - 10}px`" :data="ClassifyData" :radius="['70%']" />
<el-empty v-show="!ClassifyData.length" style="margin: 0 auto;" description="暂无数据" :image-size="50" />
<!-- 设备状态分析 -->
<pie-chart v-show="StatusData.length" style="width: 33%; height: 100%;" label-position="outside" :legend="Devicelegend" :width="`${(blockWidth * 2) / 3 - 10}px`" :data="StatusData" :radius="['70%']" />
<el-empty v-show="!StatusData.length" style="margin: 0 auto;" description="暂无数据" :image-size="50" />
<!-- 设备类型分析 -->
<bar-chart-vertical-com v-show="TypeData.length" style="width: 33%; height: 100%;" title="设备类型分析" :width="`${(blockWidth * 2) / 3 - 10}px`" :legend="{ show: false }" :data="TypeData" :x-axis-data="TypeXData" />
<el-empty v-show="!TypeData.length" style="margin: 0 auto;" description="暂无数据" :image-size="50" />
</div>
</bench-col>
<bench-col
v-loading="false"
style="width: 99%; margin-top: 6px;position: relative;"
icon=""
title=""
:height="blockHeight"
>
<div class="device-table">
<div v-for="(item, index) in deviceTable" :key="item.name" class="tab" :class="`${showDevice === index ? 'tab-active' : ''}`">
<img :src="item.img" width="30" height="30">
<span class="content" @click="changeShow(index)"> {{ item.name }}</span>
</div>
</div>
<div v-show="showDevice === 0" class="device-name">
<div>检定设备态势</div>
<!-- <div>部门排行榜</div> -->
<div>在检设备列表</div>
</div>
<div v-show="showDevice === 1" class="device-name">
<div>待检设备态势</div>
<!-- <div>部门排行榜</div> -->
<div>待检设备列表</div>
</div>
<div v-show="showDevice === 2" class="device-name">
<div>在用设备分类</div>
<div>在用设备类型</div>
<div>在用设备计量标识</div>
</div>
<div class="device-search-table" style="z-index: 999;top: 5px;">
<!-- <dept-select v-model="tableDept" placeholder="所属部门" style="width: 150px;" /> -->
<!-- <el-select v-model="tableDept" filterable clearable placeholder="所属部门" style="width: 150px;">
<el-option v-for="item in deptList" :key="item.id" :label="item.name" :value="item.id" />
</el-select> -->
<el-tree-select
v-model="tableDept"
style="width: 200px;"
:data="deptList"
:render-after-expand="false"
check-strictly
placeholder="部门"
/>
<el-icon class="search" style="font-size: 28px;" @click="searchDeviceStatus">
<search style=" margin-left: 8px;" />
</el-icon>
<span class="more" style="margin-left: 20px;" @click="$router.push('/tdashboard/verification')">更多 ></span>
</div>
<!-- 在检设备 -->
<div :class="`${showDevice === 0 ? 'top' : 'none'}`" :style="`height:${blockHeight - 65}px`" class="device-container">
<!-- 检定设备态势 -->
<pie-chart v-show="inCheckStatisticData.length" value-type="percentage" style="width: 33%; height: 97%;" title="检定设备态势" :legend="Devicelegend" :width="`${(blockWidth * 2) / 3 - 10}px`" :data="inCheckStatisticData" :radius="['70%', '50%']" />
<el-empty v-show="!inCheckStatisticData.length" style="margin: 0 auto;" description="暂无数据" :image-size="50" />
<!-- 部门排行榜 -->
<!-- <el-empty style="margin: 0 auto;" :image="pic" description=" " :image-size="120" /> -->
<!-- <bar-chart-horizontal-com
v-show="inCheckDeptAxisData.length"
style="width: 33%; height: 97%;" title="部门排行榜" :width="`${(blockWidth * 2) / 3 - 10}px`" :series-data="inCheckDeptSeriesData" :y-axis-data="inCheckDeptAxisData"
/>
<el-empty v-show="!inCheckDeptAxisData.length" style="margin: 0 auto;" description="暂无数据" :image-size="50" /> -->
<!-- 在检设备列表 -->
<el-table
ref="scrollTable"
:data="inCheckTable"
style="width: 62%; height: 100%;"
:height="blockHeight - 65 - 20"
stripe
header-row-class-name="bench-table-header"
row-class-name="bench-table-row"
class="bench-table"
@mouseenter="autoScroll(true, [])"
@mouseleave="autoScroll(false, inCheckTable)"
>
<el-table-column
v-for="item in inCheckTableColumns"
:key="item.value"
:prop="item.value"
align="center"
:label="item.text"
:width="item.width"
show-overflow-tooltip
/>
</el-table>
</div>
<div :class="`${showDevice === 1 ? 'top' : 'none'}`" :style="`height:${blockHeight - 65}px`" class="device-container">
<!-- 检定设备态势 -->
<pie-chart v-show="toCheckStatisticData.length" value-type="percentage" style="width: 33%; height: 97%;" title="检定设备态势" :legend="Devicelegend" :width="`${(blockWidth * 2) / 3 - 10}px`" :data="toCheckStatisticData" :radius="['70%', '50%']" />
<el-empty v-show="!toCheckStatisticData.length" style="margin: 0 auto;" description="暂无数据" :image-size="50" />
<!-- 部门排行榜 -->
<!-- <bar-chart-horizontal-com
v-show="toCheckDeptAxisData.length"
style="width: 33%; height: 97%;" title="部门排行榜" :width="`${(blockWidth * 2) / 3 - 10}px`" :series-data="toCheckDeptSeriesData" :y-axis-data="toCheckDeptAxisData"
/>
<el-empty v-show="!toCheckDeptAxisData.length" style="margin: 0 auto;" description="暂无数据" :image-size="50" /> -->
<!-- <el-empty style="margin: 0 auto;" :image="pic" description=" " :image-size="120" /> -->
<!-- 在检设备列表 -->
<el-table
ref="scrollTable"
:data="toCheckTable"
style="width: 62%; height: 100%;"
:height="blockHeight - 65 - 20"
stripe
header-row-class-name="bench-table-header"
row-class-name="bench-table-row"
class="bench-table"
@mouseenter="autoScroll(true, [])"
@mouseleave="autoScroll(false, toCheckTable)"
>
<el-table-column
v-for="item in inCheckTableColumns"
:key="item.value"
:prop="item.value"
align="center"
:label="item.text"
:width="item.width"
show-overflow-tooltip
/>
</el-table>
</div>
<div :class="`${showDevice === 2 ? 'top' : 'none'}`" :style="`height:${blockHeight - 65}px`" class="device-container">
<!-- 检定设备态势 -->
<pie-chart v-show="inUseStatisticData.length" value-type="percentage" style="width: 33%; height: 97%;" title="检定设备态势" :legend="Devicelegend" :width="`${(blockWidth * 2) / 3 - 10}px`" :data="inUseStatisticData" :radius="['70%', '50%']" />
<el-empty v-show="!inUseStatisticData.length" style="margin: 0 auto;" description="暂无数据" :image-size="50" />
<el-table
v-show="inUseSeriesData.length"
ref="scrollTable"
:data="inUseSeriesData"
style="width: 33%; height: 100%;"
:height="blockHeight - 65 - 20"
stripe
header-row-class-name="bench-table-header"
row-class-name="bench-table-row"
class="bench-table"
@mouseenter="autoScroll(true, [])"
@mouseleave="autoScroll(false, inUseSeriesData)"
>
<el-table-column
align="center"
label="设备名称"
prop="name"
show-overflow-tooltip
/>
<el-table-column
align="center"
label="数量"
prop="value"
show-overflow-tooltip
/>
</el-table>
<!-- <bar-chart-vertical-custom v-show="inUseYAxisData.length" style="width: 33%; height: 97%;" :width="`${(blockWidth * 2) / 3 - 10}px`" :series-data="inUseSeriesData" :y-axis-data="inUseYAxisData" /> -->
<el-empty v-show="!inUseYAxisData.length" style="margin: 0 auto;" description="暂无数据" :image-size="50" />
<pie-chart v-show="inUseXAxisData.length" value-type="percentage" style="width: 33%; height: 97%;" title="在用设备计量标识" :legend="Devicelegend" :width="`${(blockWidth * 2) / 3 - 10}px`" :data="inUseData" :radius="['70%', '50%']" />
<!-- <bar-chart-vertical-circle v-show="inUseXAxisData.length" style="width: 33%; height: 97%;" :width="`${(blockWidth * 2) / 3 - 10}px`" :data="inUseData" :x-axis-data="inUseXAxisData" /> -->
<el-empty v-show="!inUseXAxisData.length" style="margin: 0 auto;" description="暂无数据" :image-size="50" />
</div>
</bench-col>
</div>
<div class="container" style="width: 33.33%;">
<bench-col
v-loading="false"
path-url="/tdashboard/message/verification"
style="width: 98%;"
icon="icon-line"
title="检定通知"
:height="smallBlockHeight"
>
<table-list name="检定通知" :height="smallBlockHeight - 50" :limit="5" />
</bench-col>
<bench-col
v-loading="false"
path-url="/tdashboard/message/notice"
style="width: 98%; margin-top: 6px;"
icon="icon-line"
title="通知公告"
:height="smallBlockHeight"
>
<table-list name="通知公告" :height="smallBlockHeight - 50" :limit="5" />
</bench-col>
<bench-col
v-loading="false"
path-url="/tdashboard/message/approve"
style="width: 98%; margin-top: 6px;"
icon="icon-line"
title="审批提醒"
:height="smallBlockHeight"
>
<table-list name="审批提醒" :height="smallBlockHeight - 50" :limit="5" />
</bench-col>
<bench-col
v-loading="false"
path-url="/tdashboard/message/work"
style="width: 98%; margin-top: 6px;"
icon="icon-line"
title="工作提醒"
:height="smallBlockHeight"
>
<table-list name="工作提醒" :height="smallBlockHeight - 50" :limit="5" />
</bench-col>
</div>
</div>
<!-- 编辑日程组件 -->
<edit-schedule-dialog ref="editScheduleRef" @edit-schedule-success="editScheduleSuccess" />
</app-container>
</template>
<style lang="scss" scoped>
.top {
z-index: 9;
}
.none {
opacity: 0;
}
.more {
cursor: pointer;
font-size: 14px;
color: #ccc;
}
.device-name {
position: absolute;
bottom: 2px;
display: flex;
justify-content: space-around;
width: 100%;
z-index: 99;
}
.bench-table {
.el-table__header-wrapper {
border-radius: 8px;
}
}
.bench-table-header {
th {
font-weight: normal;
font-size: 14px;
}
}
.bench-table-row {
border-radius: 8px;
}
.device-search-table {
position: absolute;
top: 10px;
right: 15px;
display: flex;
align-items: center;
}
.tab-active {
background-color: #97b8fc !important;
}
.device-table {
position: relative;
top: 0;
left: 10px;
display: flex;
.tab {
background-color: #eee7e7;
// margin: 0 10px;
display: flex;
align-items: center;
border-radius: 5px;
font-size: 14px;
text-align: center;
margin-left: 10px;
&:hover {
cursor: pointer;
}
.content {
display: inline-block;
padding-right: 20px;
text-align: center;
margin-left: 10px;
}
}
}
.container {
// width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
padding: 0;
overflow: hidden;
.device-search {
position: absolute;
top: 10px;
left: 150px;
display: flex;
align-items: center;
}
}
.search {
&:hover {
cursor: pointer;
}
}
.device-container {
display: flex;
justify-content: space-around;
position: absolute;
width: 98% !important;
}
.calendar {
position: absolute;
top: 34px;
left: 0;
::v-deep(.el-calendar__body) {
transform: scaleY(0.6);
padding: 0 15px;
margin-top: -76px;
// position: absolute;
// top: 0;
}
}
</style>
