<!-- 设备管理 -->
<script lang="ts" setup name="EquipmentManage">
import { ElMessage } from 'element-plus'
import { position } from 'html2canvas/dist/types/css/property-descriptors/position'
import { getDictByCode } from '@/api/system/dict'
import type { deptType, dictType } from '@/global'
import { getEquipmentCount, getEquipmentStatus, getEquipmentTrace, getEquipmentType, getExpireTrend } from '@/api/workBench/equipmentManage'
import useUserStore from '@/store/modules/user'
const user = useUserStore() // 用户信息
const loading = ref(false)
const showEmpty = ref(false)
const labCode = ref('') // 实验室
const groupCode = ref('') as any // 部门
const isAdministrator = ref('0') // 是不是超级管理员
const emptyDisc = ref('') // 描述文字
const equipmentTotal = ref('-') // 设备总数
const equipmentExpireTotal = ref('-') // 到期设备总数
// 设备到期趋势
const measureDetailLoading = ref(false) // 检定详情loading
const equipmentExpireTrendXDataMonth = ref<string[]>([]) as any // 设备到期趋势月
const equipmentExpireTrendDataMonth = ref([]) as any // 检定详情数据月
const equipmentExpireTrendXDataQuarter = ref<string[]>([]) as any // 设备到期趋势季度
const equipmentExpireTrendDataQuarter = ref([]) as any // 检定详情数据季度
const equipmentExpireTrendXDataYear = ref<string[]>([]) as any // 设备到期趋势年
const equipmentExpireTrendDataYear = ref([]) as any // 检定详情数据年
const equipmentExpireCurrent = ref('month') // 折线图选中tab: month月、quarter季度、year年
// 设备类型分析
const equipmentTypeAnalysis = ref([]) as any
// 设备状态分析
const equipmentStatusAnalysisXData = ref([]) as any // x轴
const equipmentStatusAnalysisData = ref([]) as any
// 设备溯源分析
const equipmentSourceAnalysisXData = ref([]) as any // x轴
const equipmentSourceAnalysisData = ref([]) as any
// ------------------------------------------字典----------------------------------------------
const groupCodeList = ref([]) as any // 部门
const labCodeList = ref<dictType[]>([]) // 实验室
/**
* 获取字典
*/
function getDict() {
// 部门
getDictByCode('bizGroupCode').then((response) => {
const tempMenu = ['电学电源组', '热工力学组', '无线电脉冲组']
tempMenu.forEach((item) => {
const tempFindData = response.data.find((e: { name: string; value: string }) => e.name === item)
if (tempFindData) {
groupCodeList.value.push({
name: tempFindData.name,
id: `${tempFindData.id}`,
value: `${tempFindData.value}`,
})
}
})
groupCodeList.value.unshift({
id: 'A',
name: '全部',
value: 'A',
})
})
// 实验室
getDictByCode('bizLabCode').then((response) => {
labCodeList.value = response.data
})
}
getDict()
// --------------------------------------------获取数据----------------------------------------------
// 设备状态分析
const fetchEquipmentStatus = () => {
getEquipmentStatus({
endDate: '', // 结束日期（检校设备分析/检校结果分析查询条件）
groupCode: groupCode.value === 'A' ? null : groupCode.value, // 部门编号（当是管理组人员时，为下拉选择的部门）
labCode: labCode.value === 'A' ? null : labCode.value, // 实验室编号
startDate: '', // 起始日期（检校设备分析/检校结果分析查询条件）
}).then((res) => {
if (res.data && res.data.length) {
res.data.forEach((item: any) => {
equipmentStatusAnalysisXData.value = res.data.map((item: any) => item.dimension)
const tempData = res.data.map((item: any) => item.amount)
equipmentStatusAnalysisData.value = [{ name: '数量', data: [...tempData] }]
})
loading.value = false
}
})
}
// 设备类型分析
const fetchEquipmentType = () => {
getEquipmentType({
endDate: '', // 结束日期（检校设备分析/检校结果分析查询条件）
groupCode: groupCode.value === 'A' ? null : groupCode.value, // 部门编号（当是管理组人员时，为下拉选择的部门）
labCode: labCode.value === 'A' ? null : labCode.value, // 实验室编号
startDate: '', // 起始日期（检校设备分析/检校结果分析查询条件）
}).then((res) => {
if (res.data && res.data.length) {
equipmentTypeAnalysis.value = res.data.map((item: any) => {
return {
name: item.dimension,
value: Number(item.amount),
}
})
}
loading.value = false
})
}
// 设备溯源分析
const fetchEquipmentTrace = () => {
getEquipmentTrace({
endDate: '', // 结束日期（检校设备分析/检校结果分析查询条件）
groupCode: groupCode.value === 'A' ? null : groupCode.value, // 部门编号（当是管理组人员时，为下拉选择的部门）
labCode: labCode.value === 'A' ? null : labCode.value, // 实验室编号
startDate: '', // 起始日期（检校设备分析/检校结果分析查询条件）
}).then((res) => {
if (res.data && res.data.length) {
equipmentSourceAnalysisXData.value = res.data.map((item: any) => item.dimension)
const tempData = res.data.map((item: any) => item.amount)
equipmentSourceAnalysisData.value = [{ name: '数量', data: [...tempData] }]
}
loading.value = false
})
}
// 设备到期趋势
const fetchExpireTrend = () => {
getExpireTrend({
endDate: '', // 结束日期（检校设备分析/检校结果分析查询条件）
groupCode: groupCode.value === 'A' ? null : groupCode.value, // 部门编号（当是管理组人员时，为下拉选择的部门）
labCode: labCode.value === 'A' ? null : labCode.value, // 实验室编号
startDate: '', // 起始日期（检校设备分析/检校结果分析查询条件）
}).then((res) => {
if (res.data && res.data.length) {
const indexMonth = res.data.findIndex((item: { dimension: string }) => item.dimension === '月')
const indexQuarter = res.data.findIndex((item: { dimension: string }) => item.dimension === '季度')
const indexYear = res.data.findIndex((item: { dimension: string }) => item.dimension === '年')
if (indexMonth !== -1) {
equipmentExpireTrendXDataMonth.value = res.data[indexMonth].dataList.map((item: { timePoint: string }) => item.timePoint) // 设备到期趋势月
const tempData = res.data[indexMonth].dataList.map((item: { equipmentOverdueAmount: string }) => item.equipmentOverdueAmount) // 设备到期趋势月
equipmentExpireTrendDataMonth.value = [{ name: '设备到期数量', color: '#ed3f14', data: [...tempData] }]
}
if (indexQuarter !== -1) {
equipmentExpireTrendXDataQuarter.value = res.data[indexQuarter].dataList.map((item: { timePoint: string }) => item.timePoint) // 设备到期趋势季度
const tempData = res.data[indexQuarter].dataList.map((item: { equipmentOverdueAmount: string }) => item.equipmentOverdueAmount) // 设备到期趋势季度
equipmentExpireTrendDataQuarter.value = [{ name: '设备到期数量', color: '#9A66E4', data: [...tempData] }]
}
if (indexYear !== -1) {
equipmentExpireTrendXDataYear.value = res.data[indexYear].dataList.map((item: { timePoint: string }) => item.timePoint) // 设备到期趋势年
const tempData = res.data[indexYear].dataList.map((item: { equipmentOverdueAmount: string }) => item.equipmentOverdueAmount) // 设备到期趋势年
equipmentExpireTrendDataYear.value = [{ name: '设备到期数量', color: '#19be6b', data: [...tempData] }]
}
loading.value = false
}
})
}
// 设备总数
const fetchEquipmentCount = () => {
getEquipmentCount({
endDate: '', // 结束日期（检校设备分析/检校结果分析查询条件）
groupCode: groupCode.value === 'A' ? null : groupCode.value, // 部门编号（当是管理组人员时，为下拉选择的部门）
labCode: labCode.value === 'A' ? null : labCode.value, // 实验室编号
startDate: '', // 起始日期（检校设备分析/检校结果分析查询条件）
}).then((res) => {
if (res.data) {
equipmentTotal.value = res.data.equipmentAmount // 设备总数
equipmentExpireTotal.value = res.data.equipmentOverdueAmount // 到期设备总数
loading.value = false
}
})
}
const fetchData = () => {
loading.value = true
fetchEquipmentStatus()
fetchEquipmentType()
fetchEquipmentTrace()
fetchExpireTrend()
fetchEquipmentCount()
}
// --------------------------------------------钩子-------------------------------------------------
// 改变实验室\部门
const changeSelect = () => {
if (!showEmpty.value && (isAdministrator.value === '1' || (user.bizLabCode && user.groupNo))) {
fetchData()
}
}
onMounted(() => {
isAdministrator.value = user.roleTips.includes('administrator') ? '1' : '0' // 是否是超级管理员
console.log('是否是超级管理员', user.roleTips, isAdministrator.value)
if (isAdministrator.value === '1') { // 超级管理员
labCode.value = user.bizLabCode || 'A' // 有实验室就默认本人实验室，没有实验室就默认全站
groupCode.value = 'A' // 超级管理员默认查看全部
fetchData()
}
else { // 不是超级管理员
if (!user.bizLabCode) { // 没有实验室
emptyDisc.value = '此用户非超级管理员且无实验室，无权限查看'
showEmpty.value = true
}
else if (!user.groupNo) { // 有实验室但没有组
emptyDisc.value = '此用户非超级管理员且无部门，无权限查看'
showEmpty.value = true
}
else { // 有实验室且有组
showEmpty.value = false
if (user.groupNo === 'GL') { // 综合管理组
labCode.value = user.bizLabCode // 实验室
// 综合管理组默认查实验室下面的所有数据，不筛选部门
groupCode.value = 'A'
// 综合管理组可以查看待分发
}
else { // 其他组
labCode.value = user.bizLabCode // 实验室
// 其他组默认筛选自己组
groupCode.value = user.groupNo
}
fetchData()
}
}
})
</script>
<template>
<el-empty v-show="showEmpty" style="height: 100%;" :description="emptyDisc" />
<div v-show="!showEmpty" class="workBench-equipment-manage">
<!-- 超级管理员才可以筛选实验室 -->
<el-select v-model="labCode" :disabled="isAdministrator === '0'" style="width: 130px;position: absolute; top: 5px;right: 150px;" class="short-input" placeholder="实验室" @change="changeSelect">
<el-option v-for="item in labCodeList" :key="item.id" :label="item.name" :value="item.value" />
</el-select>
<!-- 综合管理组才可以筛选部门 -->
<el-select v-model="groupCode" :disabled="isAdministrator === '0' && user.groupNo !== 'GL'" style="width: 130px;position: absolute; top: 5px;right: 10px;" class="short-input" placeholder="部门" @change="changeSelect">
<el-option v-for="item in groupCodeList" :key="item.id" :label="item.name" :value="item.value" />
</el-select>
<!-- 筛选框和设备总数 -->
<div v-loading="loading" style="width: 100%; height: 100%;">
<div style="display: flex;margin: 16px 0;justify-content: space-around;">
<div style="display: flex;margin-right: 20px;">
<el-icon :size="30" color="#3d7eff">
<svg-icon name="icon-device" />
</el-icon>
<div>
<div style="font-size: 14px;">
设备总数
</div>
<div style="margin-left: 10px;color: #000;font-weight: 600;">
{{ equipmentTotal }}
</div>
</div>
</div>
<div style="display: flex;">
<el-icon :size="30" color="#ed3f14">
<svg-icon name="icon-device" />
</el-icon>
<div>
<div style="font-size: 14px;">
当月到期设备总数
</div>
<div style="margin-left: 10px;color: #000;font-weight: 600;">
{{ equipmentExpireTotal }}
</div>
</div>
</div>
</div>
<div style="width: 100%; height: 100%;display: flex;flex-direction: column;box-sizing: border-box;">
<!-- 上面俩图 -->
<div style="width: 100%; height: 40%;display: flex;">
<div style="width: 50%; height: 100%;position: relative;">
<!-- 设备到期趋势 -->
<el-radio-group v-model="equipmentExpireCurrent" style="z-index: 1;position: absolute; right: 0;top: 0;">
<el-radio-button label="month" size="small">
月
</el-radio-button>
<el-radio-button label="quarter" size="small">
季度
</el-radio-button>
<el-radio-button label="year" size="small">
年
</el-radio-button>
</el-radio-group>
<line-chart
v-if="equipmentExpireCurrent === 'month'"
style="flex: 1;z-index: 0;"
:x-axis-data="equipmentExpireTrendXDataMonth"
:data="equipmentExpireTrendDataMonth"
title="设备到期趋势"
:legend="{ show: false }"
/>
<line-chart
v-if="equipmentExpireCurrent === 'quarter'"
style="flex: 1;z-index: 0;"
:x-axis-data="equipmentExpireTrendXDataQuarter"
:data="equipmentExpireTrendDataQuarter"
title="设备到期趋势"
:legend="{ show: false }"
/>
<line-chart
v-if="equipmentExpireCurrent === 'year'"
style="flex: 1;z-index: 0;"
:x-axis-data="equipmentExpireTrendXDataYear"
:data="equipmentExpireTrendDataYear"
title="设备到期趋势"
:legend="{ show: false }"
/>
<el-empty v-if="equipmentExpireCurrent === 'month' && !equipmentExpireTrendXDataMonth.length " style="height: 100%;" description="暂无数据" />
<el-empty v-if="equipmentExpireCurrent === 'quarter' && !equipmentExpireTrendXDataQuarter.length" style="height: 100%;" description="暂无数据" />
<el-empty v-if="equipmentExpireCurrent === 'year' && !equipmentExpireTrendXDataYear.length" style="height: 100%;" description="暂无数据" />
</div>
<!-- 设备类型分析 -->
<pie-chart
v-if="equipmentTypeAnalysis.length"
style="flex: 1;margin-left: 10px;"
:data="equipmentTypeAnalysis"
:radius="['70%']"
:label-show="false"
title="设备类型分析"
:emphasis="{ show: false }"
/>
<el-empty v-if="!equipmentTypeAnalysis.length" style="margin: 0 auto;" description="暂无数据" />
</div>
<!-- 下面俩图 -->
<div style="width: 100%; height: 40%;margin-top: 30px; display: flex;box-sizing: border-box;">
<!-- 设备状态分析 -->
<bar-chart-vertical
v-if="equipmentStatusAnalysisData.length"
style="width: 50%;"
:x-axis-data="equipmentStatusAnalysisXData"
:data="equipmentStatusAnalysisData"
title="设备状态分析"
:legend="{ show: false }"
:bar-width="20"
:bar-coner="0"
:gradient="false"
label-color="#feb501"
/>
<el-empty v-if="!equipmentStatusAnalysisData.length" style="margin: 0 auto;" description="暂无数据" />
<!-- 设备溯源分析 -->
<bar-chart-horizontal
v-if="equipmentSourceAnalysisData.length"
style="width: 50%;"
:x-axis-data="equipmentSourceAnalysisXData"
:data="equipmentSourceAnalysisData"
title="设备溯源分析"
:legend="{ show: false }"
:bar-width="10"
:bar-coner="20"
:gradient="false"
label-color="#3e29ce"
/>
<el-empty v-if="!equipmentSourceAnalysisData.length" style="margin: 0 auto;" description="暂无数据" />
</div>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.workBench-equipment-manage {
width: 100%;
height: 100%;
}
</style>
