<script lang="ts" setup name="DeviceBench">
import { getCurrentInstance, ref } from 'vue'
import type { Ref } from 'vue'
import Linechart from '@/components/Echart/LineChart.vue'
import type { lineDataI } from '@/components/Echart/echart-interface'
// 每个展示块高度
const blockHeight = ref(300)
const blockWidth = ref(400)
const { proxy } = getCurrentInstance() as any
// 设备台账检定提醒表格数据
const standingBookTableData = ref([
{
equipmentName: '设备1',
usePersonName: '负责人1',
lastTime: '2022-12-21 12:10:30',
},
{
equipmentName: '设备1',
usePersonName: '负责人1',
lastTime: '2022-12-21 12:10:30',
},
{
equipmentName: '设备1',
usePersonName: '负责人1',
lastTime: '2022-12-21 12:10:30',
},
{
equipmentName: '设备1',
usePersonName: '负责人1',
lastTime: '2022-12-21 12:10:30',
},
{
equipmentName: '设备1',
usePersonName: '负责人1',
lastTime: '2022-12-21 12:10:30',
},
{
equipmentName: '设备1',
usePersonName: '负责人1',
lastTime: '2022-12-21 12:10:30',
},
{
equipmentName: '设备1',
usePersonName: '负责人1',
lastTime: '2022-12-21 12:10:30',
},
{
equipmentName: '设备1',
usePersonName: '负责人1',
lastTime: '2022-12-21 12:10:30',
},
{
equipmentName: '设备1',
usePersonName: '负责人1',
lastTime: '2022-12-21 12:10:30',
},
])
// 设备台账检定提醒表头
const standingBookTableHead = [
{ text: '设备名称', value: 'equipmentName' },
{ text: '负责人', value: 'usePersonName', width: '120' },
{ text: '上次检定时间', value: 'lastTime', width: '180' },
]
// 标准装置到期提醒表格数据
const standardTableData = ref([
{
equipmentName: '设备1',
usePersonName: '负责人1',
lastTime: '2022-12-21 12:10:30',
},
])
// 标准装置到期提醒表头
const standardTableHead = [
{ text: '设备名称', value: 'equipmentName' },
{ text: '负责人', value: 'usePersonName', width: '120' },
{ text: '上次检定时间', value: 'lastTime', width: '180' },
]
// 设备检定趋势x轴
const equipmentTestXData: Ref<string[]> = ref([])
// 设备检定趋势数据
const equipmentTestData: Ref<lineDataI[]> = ref([])
// 设备检定趋势y轴最大值
const equipmentTestYDataMax = ref()
// 装置检定趋势x轴
const standardTestXData: Ref<string[]> = ref([])
// 装置检定趋势数据
const standardTestData: Ref<lineDataI[]> = ref([])
// 装置检定趋势y轴最大值
const standardTestYDataMax = ref()
// 我的设备
const myEquipment = ref({
stay: 10, // 待检测设备数量
not: 10, // 超期未检测设备数量
})
// 本月统计数据
const theMonthTotalData = ref({
testValue: 10, // 测量设备
testIn: 10, // 在用
testLeave: 10, // 闲置设备
testSeal: 10, // 封存
standardValue: 20, // 标准装置
standardIn: 20, // 在用
standardStop: 20, // 暂停
standardAnnul: 20, // 撤销
receive: 15, // 领用
borrow: 15, // 借用
})
function calcBlockSize() {
// 计算工作台区域高度 - 顶部-面包屑-边距
const bodyHeight = document.body.clientHeight - 60 - 50 - 20
blockHeight.value = bodyHeight > 610 ? (bodyHeight - 10) / 2 : 300
blockWidth.value = (document.body.clientWidth - 180 - 20 - 20) / 3
console.log(blockHeight.value, blockWidth.value - 20)
}
window.addEventListener('resize', () => {
calcBlockSize()
})
onMounted(() => {
calcBlockSize()
setTimeout(() => {
equipmentTestXData.value = ['2022-08', '2022-12']
equipmentTestData.value = [{ name: '到期设备', data: [1, 11] }]
standardTestXData.value = ['2022-01', '2022-12', '2023-09']
standardTestData.value = [{ name: '标准装置', data: [1, 10, 2] }]
})
})
</script>
<template>
<app-container>
<div class="device-bench">
<el-row :gutter="10">
<el-col :span="8">
<bench-col
icon="icon-book"
title="设备台账检定提醒"
path-url="/standingBook/adjustDevice"
:style="{ height: blockHeight }"
:height="blockHeight"
>
<el-table :data="standingBookTableData" :height="blockHeight - 60" style="width: 100%; height: 100%;" stripe header-row-class-name="bench-table-header" row-class-name="bench-table-row" class="bench-table">
<el-table-column
v-for="item in standingBookTableHead"
:key="item.value"
:prop="item.value"
align="center"
:label="item.text"
:width="item.width"
/>
</el-table>
</bench-col>
</el-col>
<el-col :span="8">
<bench-col
icon="icon-line"
title="设备检定趋势"
:height="blockHeight"
>
<line-chart
:x-axis-data="equipmentTestXData"
:width="`${blockWidth - 20}px`"
:data="equipmentTestData"
unit="件"
/>
</bench-col>
</el-col>
<el-col :span="8">
<bench-col
icon="icon-book"
title="本月统计数据"
:height="blockHeight"
>
<div class="the-month-total-Data">
<div>
<div class="title">
<span>测量设备</span>
<span style="margin-right: 6px;">{{ theMonthTotalData.testValue }}</span>
</div>
<div class="content">
<el-row :gutter="10">
<el-col :span="8">
<div class="item">
<span>在用设备</span>
<span style="margin-top: 6px;">
{{ theMonthTotalData.testIn }}
</span>
</div>
</el-col>
<el-col :span="8">
<div class="item">
<span>闲置设备</span>
<span style="margin-top: 6px;">{{ theMonthTotalData.testLeave }}</span>
</div>
</el-col>
<el-col :span="8">
<div class="item">
<span>封存设备</span>
<span style="margin-top: 6px;">{{ theMonthTotalData.testSeal }}</span>
</div>
</el-col>
</el-row>
</div>
</div>
<div>
<div class="title">
<span>标准装置</span>
<span style="margin-right: 6px;">{{ theMonthTotalData.standardValue }}</span>
</div>
<div class="content">
<el-row :gutter="10">
<el-col :span="8">
<div class="item">
<span>在用装置</span>
<span style="margin-top: 6px;">{{ theMonthTotalData.standardIn }}</span>
</div>
</el-col>
<el-col :span="8">
<div class="item">
<span>暂停装置</span>
<span style="margin-top: 6px;">{{ theMonthTotalData.standardStop }}</span>
</div>
</el-col>
<el-col :span="8">
<div class="item">
<span>撤销装置</span>
<span style="margin-top: 6px;">{{ theMonthTotalData.standardAnnul }}</span>
</div>
</el-col>
</el-row>
</div>
</div>
<div class="content">
<el-row :gutter="20">
<el-col :span="12">
<div class="item">
<span>本月设备领用</span>
<span style="margin-top: 6px;">{{ theMonthTotalData.receive }}</span>
</div>
</el-col>
<el-col :span="12">
<div class="item">
<span>本月设备借用</span>
<span style="margin-top: 6px;">{{ theMonthTotalData.borrow }}</span>
</div>
</el-col>
</el-row>
</div>
</div>
</bench-col>
</el-col>
</el-row>
</div>
<div class="device-bench" style="margin-top: 10px;">
<el-row :gutter="10">
<el-col :span="8">
<bench-col
icon="icon-book"
title="标准装置到期提醒"
path-url="/standard/expirationRemind"
:style="{ height: blockHeight }"
:height="blockHeight"
>
<el-table :data="standardTableData" :height="blockHeight - 60" style="width: 100%; height: 100%;" stripe header-row-class-name="bench-table-header" row-class-name="bench-table-row" class="bench-table">
<el-table-column
v-for="item in standardTableHead"
:key="item.value"
:prop="item.value"
align="center"
:label="item.text"
:width="item.width"
/>
</el-table>
</bench-col>
</el-col>
<el-col :span="8">
<bench-col
icon="icon-line"
title="设备检定趋势"
:height="blockHeight"
>
<line-chart
:x-axis-data="standardTestXData"
:width="`${blockWidth - 20}px`"
:data="standardTestData"
unit="件"
/>
</bench-col>
</el-col>
<el-col :span="8">
<bench-col
icon="icon-book"
title="我的设备"
:height="blockHeight"
>
<div class="my-equipment">
<div class="item">
<span>待检定设备数量</span>
<span style="margin-top: 16px;">{{ myEquipment.stay }}</span>
</div>
<div class="item">
<span>超期未检定设备数量</span>
<span style="margin-top: 16px;">{{ myEquipment.not }}</span>
</div>
</div>
</bench-col>
</el-col>
</el-row>
</div>
</app-container>
</template>
<style lang="scss" scoped>
.device-bench {
width: 100%;
height: 100%;
box-sizing: border-box;
.the-month-total-Data {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
padding: 0 20px;
.title {
display: flex;
justify-content: space-between;
font-weight: 500;
margin-bottom: 3px;
}
.content {
width: 100%;
.item {
display: flex;
flex-direction: column;
flex: 1;
margin-right: 10px;
padding: 3px 0;
justify-content: center;
align-items: center;
background-image: linear-gradient(to bottom, #e9f5ff, #3d7eff);
border-radius: 8px;
&:last-child {
margin-right: 0;
}
}
}
}
.my-equipment {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
padding: 20px;
.item {
height: 40%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-image: linear-gradient(to right, #caddff, #3d7eff);
border-radius: 16px;
}
}
}
</style>
<style lang="scss">
.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;
}
</style>
