<!-- 受检设备分析 --数据看板 -->
<script name="EqptDeviceTrend" lang="ts" setup>
import dayjs from 'dayjs'
import draggable from 'vuedraggable'
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import { colors } from '../environment/colors'
import { getRangeAllTime } from '@/utils/date'
import type { deptType, dictType } from '@/global'
import { getDictByCode } from '@/api/system/dict'
import { exportFile } from '@/utils/exportUtils'
import { getCustomerInfoList } from '@/api/resource/customer'
import { getBaseInfo, getNoVerificationAmount, getDeviceSource, getDeviceType, getAlreadyMeasured, getShouldMeasured, getDevicePerformance, exportDeviceType, getDeviceSourceDept, getDeviceTypeList } from '@/api/dataManagement/data/eqptDevice'
import { eqptDevice } from './img'
import { getEquipmentList } from '@/api/business/manager/order'
import { uniqueMultiArray } from '@/utils/Array'
import { SCHEDULE } from '@/utils/scheduleDict'
const props = defineProps({
lab: {
type: String,
default: ''
}
})
// 日期查询条件
const dateRef = ref()
const current = ref('')
// 组别
const groupCodeList = ref<dictType[]>([])
const checkDestinationList = ref<dictType[]>([])
// 受检设备
const sampleNameList = ref<any[]>([])
// 规格型号
const modelList = ref<any[]>([])
// 辅助字段
const helpInstructionList = ref<any[]>([])
// 所有受检设备
const allDeviceList = ref<any[]>([])
// 委托方
const customerList = ref<any[]>([])
setTimeout(() => {
current.value = '近7日'
})
const selectCurrentTime = ref()
const menu = ref(['当日', '近7日', '近14天', '自定义时间'])
// 时间筛选条件
const startTime = ref()
const calendarChange = (e: any) => {
startTime.value = e[0].getTime()
}
const pickerOptions = (time: any) => {
if (startTime.value) {
const timeRange = 1 * 24 * 60 * 60 * 1000 // 1天时间戳
const minTime = startTime.value - timeRange * 2
const maxTime = startTime.value + timeRange * 15
return (
time.getTime() <= minTime ||
time.getTime() >= maxTime ||
time.getTime() === startTime.value
)
} else {
return false
}
}
// 点击自定义时间
// const clickBtn = (event: any) => {
// const select = event.target.innerText
// if (select && select === '自定义时间') {
// console.log('自定义时间', 'innerText')
// console.log(dateRef.value)
// dateRef.value.focus(true)
// // dateRef.value.click()
// } else if (select && select !== '自定义时间') {
// selectCurrentTime.value = []
// startTime.value = ''
// }
// }
const currentBak = ref('')
const handlerFocus = () => {
console.log('获取焦点')
// 记录之前
currentBak.value = current.value
current.value = '自定义时间'
}
const handlerBlur = () => {
console.log('失去焦点')
if (!selectCurrentTime.value.length) {
current.value = currentBak.value || '近7日'
}
}
const timeDate = ref<string[]>([])
watch(() => current.value, newVal => {
if (newVal) {
if (newVal === '当日') {
timeDate.value = [dayjs().format('YYYY-MM-DD')]
} else if (newVal === '近7日') {
timeDate.value = getRangeAllTime(
dayjs().subtract(7, 'day').format('YYYY-MM-DD'),
dayjs().format('YYYY-MM-DD')
)
} else if (newVal === '近14天') {
timeDate.value = getRangeAllTime(
dayjs().subtract(14, 'day').format('YYYY-MM-DD'),
dayjs().format('YYYY-MM-DD')
)
}
if (!newVal.includes('自定义')) {
fetchData()
selectCurrentTime.value = []
}
}
})
watch(() => selectCurrentTime.value, newVal => {
if (newVal.length === 2) {
console.log('确定时间')
timeDate.value = getRangeAllTime(newVal[0], newVal[1])
fetchData()
}
})
// 公共查询条件
const searchQueryResult = ref({
groupCode: '',
labCode: '',
timeStart: '',
timeEnd: ''
})
// 受检设备各种类数量分析 查询条件
const searchQueryForTypeSoure = ref({
// labCode: '',
groupCode: '',
customerId: ''
})
// 获取受检设备各种类数量分析数据
const fetchQueryForTypeSoure = () => {
const current = showChart.value.filter(item => item.name === '受检设备各种类数量分析')[0]
current.loading = true
getDeviceType({ ...searchQueryResult.value, ...searchQueryForTypeSoure.value }).then(res => {
current.data = []
const data = []
for (const i in res.data) {
data.push({
name: i,
value: res.data[i]
})
}
current.data = data
current.loading = false
// 判断数据是否为空
if (current.data.length) {
current.isEmpty = false
}
else {
current.isEmpty = true
}
}).catch(() => {
current.loading = false
})
}
// 改变受检设备各种类数量分析 查询条件
const changeSearchQueryForTypeSoure = () => {
fetchQueryForTypeSoure()
}
// 受检设备已检数量趋势 查询条件
const searchQueryForMeasured = ref({
timeStart: '',
timeEnd: '',
customerId: '',
checkDestination: ''
})
const selectForMeasured = ref<any[]>([])
setTimeout(() => {
selectForMeasured.value = [dayjs().format('YYYY-MM-DD'), dayjs().add(6, 'month').format('YYYY-MM-DD')]
}, 2000);
watch(() => selectForMeasured.value, (newVal) => {
if (newVal && newVal?.length === 2) {
searchQueryForMeasured.value.timeStart = `${newVal[0]} 00:00:00`
searchQueryForMeasured.value.timeEnd = `${newVal[1]} 23:59:59`
}
else {
searchQueryForMeasured.value.timeStart = ''
searchQueryForMeasured.value.timeEnd = ''
}
fetchQueryForMeasured()
})
// 获取受检设备已检数量趋势 数据
const fetchQueryForMeasured = () => {
const current = showChart.value.filter(item => item.name === '受检设备已检数量趋势')[0]
current.loading = true
getAlreadyMeasured({
...searchQueryResult.value,
...searchQueryForMeasured.value,
timeStart: searchQueryForMeasured.value.timeStart ? searchQueryForMeasured.value.timeStart : searchQueryResult.value.timeStart,
timeEnd: searchQueryForMeasured.value.timeEnd ? searchQueryForMeasured.value.timeEnd : searchQueryResult.value.timeEnd,
}).then(res => {
// console.log(res.data, '受检设备已检数量趋势')
const initData = [
{
name: '海口实验室',
value: 'hAmount',
data: '',
showLab: ['H', '']
},
{
name: '西昌实验室',
value: 'xAmount',
data: '',
showLab: ['X', '']
},
{
name: '外送',
value: 'outAmount',
data: '',
showLab: ['X', 'H', '']
},
]
const data = initData.filter((item: any) => item.showLab.includes(props.lab === '全站' ? '' : props.lab))
current.xAxisData = res.data.map((item: any) => item.dimension)
current.data = data.map((item: any) => ({
name: item.name,
symbol: 'emptyCircle',
data: res.data.map((citem: any) => String(citem[data.filter((ccitem: any) => ccitem.name === item.name)[0].value]))
}))
current.loading = false
}).catch(() => {
current.loading = false
})
}
// 改变受检设备已检数量趋势 查询条件
const changeSearchQueryForMeasured = () => {
fetchQueryForMeasured()
}
// 受检设备应检数量趋势 查询条件
const searchQueryForShouldMeasured = ref({
timeStart: '',
timeEnd: '',
customerId: '',
checkDestination: ''
})
const selectForShouldMeasured = ref<any[]>([])
setTimeout(() => {
selectForShouldMeasured.value = [dayjs().format('YYYY-MM-DD'), dayjs().add(6, 'month').format('YYYY-MM-DD')]
}, 2000);
watch(() => selectForShouldMeasured.value, (newVal) => {
if (newVal && newVal?.length === 2) {
searchQueryForShouldMeasured.value.timeStart = `${newVal[0]} 00:00:00`
searchQueryForShouldMeasured.value.timeEnd = `${newVal[1]} 23:59:59`
fetchQueryForShouldMeasured()
}
else {
searchQueryForShouldMeasured.value.timeStart = ''
searchQueryForShouldMeasured.value.timeEnd = ''
}
fetchQueryForShouldMeasured()
})
const contextmenu = (name: string) => {
// console.log(name)
if (name === '受检设备已检数量趋势') {
selectForMeasured.value = []
// fetchQueryForMeasured()
} else if (name === '受检设备应检数量趋势') {
selectForShouldMeasured.value = []
// fetchQueryForShouldMeasured()
}
}
// 获取受检设备已检数量趋势 数据
const fetchQueryForShouldMeasured = () => {
const current = showChart.value.filter(item => item.name === '受检设备应检数量趋势')[0]
current.loading = true
getShouldMeasured({
...searchQueryResult.value,
...searchQueryForShouldMeasured.value,
timeStart: searchQueryForShouldMeasured.value.timeStart ? searchQueryForShouldMeasured.value.timeStart : searchQueryResult.value.timeStart,
timeEnd: searchQueryForShouldMeasured.value.timeEnd ? searchQueryForShouldMeasured.value.timeEnd : searchQueryResult.value.timeEnd,
}).then(res => {
// console.log(res.data, '受检设备应检数量趋势')
const initData = [
{
name: '海口实验室',
value: 'hAmount',
data: '',
showLab: ['H', '']
},
{
name: '西昌实验室',
value: 'xAmount',
data: '',
showLab: ['X', '']
},
{
name: '外送',
value: 'outAmount',
data: '',
showLab: ['X', 'H', '']
},
]
const data = initData.filter((item: any) => item.showLab.includes(props.lab === '全站' ? '' : props.lab))
console.log(data, props.lab)
current.xAxisData = res.data.map((item: any) => item.dimension)
current.data = data.map((item: any) => ({
name: item.name,
symbol: 'circle',
data: res.data.map((citem: any) => String(citem[data.filter((ccitem: any) => ccitem.name === item.name)[0].value]))
}))
current.loading = false
}).catch(() => {
current.loading = false
})
}
// 改变受检设备应检数量趋势 查询条件
const changeSearchQueryForShouldMeasured = () => {
fetchQueryForShouldMeasured()
}
watch(() => props.lab, newVal => {
if (newVal) {
searchQueryResult.value.labCode = props.lab === '全站' ? '' : props.lab
fetchData()
}
})
// 基础信息展示数据
const baseInfo = ref([
{
name: '任务单总量',
value: 'orderAmount',
data: '',
icon: eqptDevice['任务单总量'],
color: '#1AAF8B'
},
{
name: '受检设备规格型号总量',
value: 'modelAmount',
data: '',
icon: eqptDevice['受检设备规格型号总量'],
color: '#1AAF8B'
},
{
name: '受检设备总量',
value: 'sampleAmount',
data: '',
icon: eqptDevice['受检设备总量'],
color: '#1AAF8B'
},
{
name: '受检设备年度到期应检总量',
value: 'expireAmount',
data: '',
icon: eqptDevice['受检设备年度到期应检总量'],
color: '#1AAF8B'
},
{
name: '受检设备已检总量',
value: 'measuredAmount',
data: '',
icon: eqptDevice['受检设备已检总量'],
color: '#1AAF8B'
}
])
const showChart = ref<any[]>([
{
name: '未检定设备数量分析',
type: 'rank-table',
source: 'system',
data: [],
columns: [
{
text: '部门',
value: 'dept',
align: 'center'
},
{
text: '数量',
value: 'count',
align: 'center'
}
],
loading: false, // 加载中
isEmpty: false, // 是否为空
},
{
name: '受检设备来源分析',
type: 'pie',
source: 'system',
center: ['50%', '60%'],
labelPosition: 'outside',
radius: '70%',
data: [],
loading: false, // 加载中
isEmpty: false, // 是否为空
},
{
name: '受检设备各种类数量分析',
type: 'pie',
source: 'system',
// labelPosition: 'outside',
// radius: '70%',
center: ['50%', '60%'],
data: [],
loading: false, // 加载中
isEmpty: false, // 是否为空
},
{
name: '受检设备已检数量趋势',
type: 'line',
source: 'system',
xAxisData: [],
data: [],
smooth: false,
gradient: false,
loading: false, // 加载中
isEmpty: false, // 是否为空
},
{
name: '受检设备应检数量趋势',
type: 'line',
source: 'system',
xAxisData: [],
data: [],
smooth: false,
gradient: false,
loading: false, // 加载中
isEmpty: false, // 是否为空
},
{
name: '受检设备性能趋势',
type: 'rank-table',
source: 'system',
data: [],
columns: [
{
text: '设备名称',
value: 'sampleName',
align: 'center'
},
{
text: '规格型号',
value: 'model',
align: 'center'
},
{
text: '辅助字段',
value: 'helpInstruction',
align: 'center'
},
{
text: '生产厂家',
value: 'manufacturer',
align: 'center'
},
{
text: '报废次数',
value: 'discardAmount',
align: 'center'
},
{
text: '维修次数',
value: 'repairAmount',
align: 'center'
},
{
text: '总次数',
value: 'totalAmount',
align: 'center'
}
],
loading: false, // 加载中
isEmpty: false, // 是否为空
}
])
watch(() => showChart.value.length, () => {
setTimeout(() => {
const resize = new Event('resize')
window.dispatchEvent(resize)
})
})
// 受检设备性能趋势查询条件
const searchQueryForDevicePerformance = ref({
sampleName: '',
helpInstruction: '',
model: '',
manufacturer: ''
})
// 改变设备名称查询条件
const changeSampleName = (value: string) => {
modelList.value = []
helpInstructionList.value = []
searchQueryForDevicePerformance.value.model = ''
searchQueryForDevicePerformance.value.helpInstruction = ''
modelList.value = uniqueMultiArray(allDeviceList.value.filter((item: any) => item.equipmentName === value).map((item: any) => ({ sampleName: item.equipmentName, model: item.model, helpInstruction: item.helpInstruction, })), 'model',)
helpInstructionList.value = modelList.value
}
// 改变规格型号查询条件
const changeHelpInstruction = (value: string) => {
helpInstructionList.value = []
searchQueryForDevicePerformance.value.helpInstruction = ''
helpInstructionList.value = modelList.value.filter(item => item.model === value)
}
watch(() => searchQueryForDevicePerformance.value, () => {
fetchQueryForDevicePerformance()
}, {
deep: true
})
// 获取受检设备性能趋势数据
const fetchQueryForDevicePerformance = () => {
const current3 = showChart.value.filter(item => item.name === '受检设备性能趋势')[0]
current3.loading = true
getDevicePerformance({ ...searchQueryForDevicePerformance.value, ...searchQueryResult.value, offset: 1, limit: 9999 }).then(res => {
// console.log(res.data, '受检设备性能趋势')
current3.data = res.data.rows.map((item: any, index: number) => ({ ...item, index: index + 1 }))
current3.loading = false
}).catch(() => {
current3.loading = false
})
}
// 获取数据
const loadingBase = ref(false)
function fetchData() {
if (current.value !== '自定义时间') {
if (current.value === '当日') {
searchQueryResult.value.timeStart = `${timeDate.value[0]} 00:00:00`
searchQueryResult.value.timeEnd = `${timeDate.value[0]} 23:59:59`
} else {
searchQueryResult.value.timeStart = `${timeDate.value[0]} 00:00:00`
searchQueryResult.value.timeEnd = `${timeDate.value[timeDate.value.length - 1]} 23:59:59`
}
} else {
searchQueryResult.value.timeStart = `${selectCurrentTime.value[0]} 00:00:00`
searchQueryResult.value.timeEnd = `${selectCurrentTime.value[1]} 23:59:59`
}
// 获取基础数据
loadingBase.value = true
getBaseInfo(searchQueryResult.value).then(res => {
baseInfo.value.forEach(item => {
item.data = res.data[item.value]
})
loadingBase.value = false
}).catch(() => {
loadingBase.value = false
})
// 未检定数量分析
const current1 = showChart.value.filter(item => item.name === '未检定设备数量分析')[0]
current1.loading = true
getNoVerificationAmount(searchQueryResult.value).then(res => {
current1.data = []
for (const i in res.data) {
current1.data.push({
dept: i,
count: res.data[i]
})
}
current1.loading = false
}).catch(() => {
current1.loading = false
})
// 受检设备来源分析
const current2 = showChart.value.filter(item => item.name === '受检设备来源分析')[0]
current2.loading = true
getDeviceSource(searchQueryResult.value).then(res => {
const data = []
for (const i in res.data) {
const obj = { name: '', id: '', value: '' }
obj.name = i
for (const j in res.data[i]) {
obj.id = j
obj.value = res.data[i][j]
}
data.push(obj)
}
current2.data = data
current2.loading = false
// 判断是否有数据
if (current2.data.length) {
current2.isEmpty = false
}
else {
current2.isEmpty = true
}
}).catch(() => {
current2.loading = false
})
// 受检设备各种类数量分析
fetchQueryForTypeSoure()
// 受检设备已检数量趋势
fetchQueryForMeasured()
// 受检设备应检数量趋势
fetchQueryForShouldMeasured()
// 受检设备性能趋势
const current3 = showChart.value.filter(item => item.name === '受检设备性能趋势')[0]
current3.loading = true
getDevicePerformance({ ...searchQueryResult.value, offset: 1, limit: 9999 }).then(res => {
// console.log(res.data, '受检设备性能趋势')
current3.data = res.data.rows.map((item: any, index: number) => ({ ...item, index: index + 1 }))
current3.loading = false
}).catch(() => {
current3.loading = false
})
//
// loading.value = true
// setTimeout(() => {
// // 任务单来源分析
// const name1 = ['西昌发射站/一连', '西昌发射站/二连', '文昌发射站/一连', '文昌发射站/二连', '文昌地面站/一连', '西昌地面站/一连']
// showChart.value.filter((item: any) => item.name === '任务单来源分析')[0].data = name1.map((item: string) => ({
// name: item,
// value: String(Math.floor(Math.random() * 100) + 1),
// }))
// // 受检设备种类分析
// const name2 = ['一般压力表', '精密压力表', '数字多用表', '频谱分析仪', '三线表', '铷钟', '数字计数器']
// showChart.value.filter((item: any) => item.name === '受检设备种类分析')[0].data = name2.map((item: string) => ({
// name: item,
// value: String(Math.floor(Math.random() * 100) + 1),
// }))
// // 受检设备数量趋势
// showChart.value.filter((item: any) => item.name === '受检设备数量趋势')[0].data = name2.slice(0, 4).map((item: string) => ({
// name: item,
// // symbol: 'emptyCircle',
// symbol: 'circle',
// data: timeDate.value.map(item => Math.floor(Math.random() * 100) + 1),
// }))
// showChart.value.filter((item: any) => item.name === '受检设备数量趋势')[0].xAxisData = timeDate.value
// // 受检设备性能趋势
// const name3 = ['禁用', '故障维修', '报废']
// showChart.value.filter((item: any) => item.name === '受检设备性能趋势')[0].data = name3.map((item: string) => ({
// name: item,
// symbol: 'emptyCircle',
// data: timeDate.value.map(item => Math.floor(Math.random() * 100) + 1),
// }))
// showChart.value.filter((item: any) => item.name === '受检设备性能趋势')[0].xAxisData = timeDate.value
// // 受检设备来源排行榜
// showChart.value.filter((item: any) => item.name === '受检设备来源排行榜')[0].data = name1.map(() => (Math.floor(Math.random() * 100) + 1)).sort((a: any, b: any) => b - a)
// showChart.value.filter((item: any) => item.name === '受检设备来源排行榜')[0].xAxisData = name1
// loading.value = false
// }, 3000)
}
defineExpose({ showChart })
// 拖拽结束
const onEnd = () => {
console.log('拖拽结束')
const resize = new Event('resize')
window.dispatchEvent(resize)
}
onMounted(() => {
// year.value = String(currentYear)
if (props.lab) {
searchQueryResult.value.labCode = props.lab === '全站' ? '' : props.lab
// setTimeout(() => {
// fetchData()
// }, 10)
}
})
// 获取字典
const fetchDict = () => {
// 组别
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}`
})
}
})
})
// 检定去向
getDictByCode('eqptCheckDirection').then(res => {
checkDestinationList.value = res.data
})
// 获取委托方列表
getCustomerInfoList({ limit: 9999, offset: 1, approvalStatus: '0', formId: 'zyglwtfml' }).then(res => {
customerList.value = res.data.rows.map((item: any) => ({
name: item.customerName,
id: item.id,
value: item.id
}))
})
getEquipmentList({ offset: 1, limit: 9999 }).then((res) => {
console.log(res.data, '手贱设备')
allDeviceList.value = res.data.rows
sampleNameList.value = uniqueMultiArray(res.data.rows.map((item: any) => ({ sampleName: item.equipmentName, model: item.model, helpInstruction: item.helpInstruction, })), 'sampleName',)
modelList.value = uniqueMultiArray(res.data.rows.map((item: any) => ({ sampleName: item.equipmentName, model: item.model, helpInstruction: item.helpInstruction, })), 'model',)
helpInstructionList.value = uniqueMultiArray(res.data.rows.map((item: any) => ({ sampleName: item.equipmentName, model: item.model, helpInstruction: item.helpInstruction, })), 'helpInstruction',)
})
}
fetchDict()
// 受检设备种类数量分析-列表导出
const exportType = () => {
const loading = ElLoading.service({
lock: true,
text: '下载中请稍后',
background: 'rgba(255, 255, 255, 0.8)',
})
exportDeviceType({ ...searchQueryResult.value, ...searchQueryForTypeSoure.value }).then(res => {
const blob = new Blob([res.data])
exportFile(blob, '受检设备种类数量分析.xlsx')
loading.close()
}).catch(() => {
loading.close()
})
}
// 备份数据 -- 受检设备来源分析
const deviceSourceData = ref({})
// 备份数据 -- 受检设备各种类数量分析
const deviceTypeData = ref({})
// 点击饼图
const clickPie = (params: any, ele: any) => {
// console.log(params, ele, '点击饼图')
const current = showChart.value.filter((item: any) => item.name === ele.name)[0]
current.loading = true
if (ele.name === '受检设备来源分析') {
deviceSourceData.value = JSON.parse(JSON.stringify(current))
current.data = []
getDeviceSourceDept({ ...searchQueryResult.value, customerId: params.data.id }).then(res => {
current.data = res.data.rows.map((item: any) => ({ ...item, companyName: params.data.name }))
current.loading = false
}).catch(() => {
current.loading = false
})
}
else if (ele.name === '受检设备各种类数量分析') {
deviceTypeData.value = JSON.parse(JSON.stringify(current))
current.data = []
getDeviceTypeList({ ...searchQueryResult.value, ...searchQueryForTypeSoure.value, sampleName: params.data.name }).then(res => {
// console.log(res.data, '123')
current.data = res.data.rows
current.loading = false
}).catch(() => {
current.loading = false
})
}
current.type = 'rank-table'
current.columns = [
{
text: '单位名称',
value: 'companyName',
align: 'center',
},
{
text: '设备名称',
value: 'equipmentName',
align: 'center',
},
{
text: '规格型号',
value: 'model',
align: 'center',
},
{
text: '辅助字段',
value: 'helpInstruction',
align: 'center',
},
{
text: '负责人',
value: 'directorName',
align: 'center',
},
]
}
// 切换表格
const changeTable = (name: string) => {
if (name !== '受检设备来源分析' && name !== '受检设备各种类数量分析') {
return
}
// if (name === '受检设备来源分析') {
let current = showChart.value.findIndex((item: any) => item.name === name)
if (showChart.value[current].type !== 'rank-table') {
return
}
showChart.value[current] = name === '受检设备来源分析' ? deviceSourceData.value : deviceTypeData.value
// console.log(current, 'current')
showChart.value[current].loading = false
// }
}
</script>
<template>
<div class="container">
<!-- 查询条件 -->
<div class="btns">
<div />
<div style="position: relative">
<el-radio-group v-model="current">
<el-radio-button v-for="item in menu" :key="item" :label="item">
{{ item }}
</el-radio-button>
</el-radio-group>
<!-- 自定义时间选择 --移花接木 -->
<div style="width: 101px; position: absolute; top: 0; right: 0; opacity: 0">
<el-date-picker style="width: 101px" ref="dateRef" v-model="selectCurrentTime" type="daterange"
range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" class="time-daterange"
format="YYYY-MM-DD" value-format="YYYY-MM-DD" @focus="handlerFocus" @blur="handlerBlur" />
</div>
</div>
</div>
<!-- 展示内容 -->
<div class="content-count">
<!-- 统计数据 -->
<div v-loading="loadingBase" class="count">
<div class="count-item" v-for="item in baseInfo" :key="item.value">
<div class="header-icon" style="width: 55px">
<img :src="item.icon" width="55px" height="50px" />
</div>
<div class="header-content">
<div class="content-title">
{{ item.name }}
</div>
<div class="content-count" :style="{ color: item.color }">
{{ item.data }}
</div>
</div>
</div>
</div>
<!-- 图表区域 -->
<!-- <div class="chart"> -->
<draggable v-model="showChart" item-key="name" class="chart" animation="300" drag-class="dragClass"
ghost-class="ghostClass" chosen-class="chosenClass" @end="onEnd">
<template #item="{ element, index }">
<div :style="{ width: `${'31.5%'}` }" class="chart-item">
<div class="chart-name">
<!-- {{ element.name }} -->
</div>
<div v-loading="element.loading" class="chart-page">
<div style="width: 100%; height: 100%">
<div class="chart-name"
:class="element.name === '受检设备各种类数量分析' || element.name === '受检设备来源分析' ? 'point' : ''"
style="width: 100%;height: 10%;display: flex;margin-top: 25px;" @click="changeTable(element.name)">
{{ element.name }}
<div v-if="element.name === '受检设备各种类数量分析'" style="margin-left: 40px">
<!-- 部门 -->
<el-select v-model="searchQueryForTypeSoure.groupCode" style="width: 130px" class="short-input"
placeholder="组别" clearable @change="changeSearchQueryForTypeSoure">
<el-option v-for="item in groupCodeList" :key="item.id" :label="item.name" :value="item.value" />
</el-select>
<!-- 委托方 -->
<el-select v-model="searchQueryForTypeSoure.customerId" filterable style="width: 130px"
class="short-input" placeholder="委托方" clearable @change="changeSearchQueryForTypeSoure">
<el-option v-for="item in customerList" :key="item.id" :label="item.name" :value="item.value" />
</el-select>
<!-- 导出 -->
<el-button type="primary" @click="exportType">导出</el-button>
</div>
<div v-if="element.name === '受检设备已检数量趋势'" style="margin-left: 40px;position: relative;">
<!-- 委托方 -->
<el-select v-model="searchQueryForMeasured.customerId" filterable style="width: 130px"
class="short-input" placeholder="委托方" clearable @change="changeSearchQueryForMeasured">
<el-option v-for="item in customerList" :key="item.id" :label="item.name" :value="item.value" />
</el-select>
<!-- 自定义时间 -->
<el-button>自定义时间</el-button>
<div style="width: 102px; position: absolute; top: 0; right: 130px; opacity: 0"
@contextmenu="contextmenu(element.name)">
<el-date-picker style="width: 101px" v-model="selectForMeasured" type="daterange"
range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" class="time-daterange"
format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
</div>
<!-- 检定去向 -->
<el-select v-model="searchQueryForMeasured.checkDestination" filterable style="width: 130px"
class="short-input" placeholder="检定去向" clearable @change="changeSearchQueryForMeasured">
<el-option v-for="item in checkDestinationList" :key="item.id" :label="item.name"
:value="item.value" />
</el-select>
</div>
<div v-if="element.name === '受检设备应检数量趋势'" style="margin-left: 40px;position: relative;">
<!-- 委托方 -->
<el-select v-model="searchQueryForShouldMeasured.customerId" filterable style="width: 130px"
class="short-input" placeholder="委托方" clearable @change="changeSearchQueryForShouldMeasured">
<el-option v-for="item in customerList" :key="item.id" :label="item.name" :value="item.value" />
</el-select>
<!-- 自定义时间 -->
<el-button>自定义时间</el-button>
<div style="width: 102px; position: absolute; top: 0; right: 130px; opacity: 0"
@contextmenu="contextmenu(element.name)">
<el-date-picker style="width: 101px" v-model="selectForShouldMeasured" type="daterange"
range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" class="time-daterange"
format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
</div>
<!-- 检定去向 -->
<el-select v-model="searchQueryForShouldMeasured.checkDestination" filterable style="width: 130px"
class="short-input" placeholder="检定去向" clearable @change="changeSearchQueryForShouldMeasured">
<el-option v-for="item in checkDestinationList" :key="item.id" :label="item.name"
:value="item.value" />
</el-select>
</div>
<div v-if="element.name === '受检设备性能趋势'" style="margin-left: 40px">
<!-- 设备名称 -->
<el-select v-model="searchQueryForDevicePerformance.sampleName" filterable style="width: 100px;"
class="short-input" placeholder="受检设备名称" clearable @change="changeSampleName">
<el-option v-for="item in sampleNameList" :key="item.sampleName" :label="item.sampleName"
:value="item.sampleName" />
</el-select>
<!-- 规格型号 -->
<el-select v-model="searchQueryForDevicePerformance.model" filterable style="width: 100px;" class="short-input"
placeholder="规格型号" clearable @change="changeHelpInstruction">
<el-option v-for="item in modelList" :key="item.model" :label="item.model" :value="item.model" />
</el-select>
<!-- 辅助字段 -->
<el-select v-model="searchQueryForDevicePerformance.helpInstruction" filterable style="width: 100px;"
class="short-input" placeholder="辅助字段" clearable>
<el-option v-for="item in helpInstructionList" :key="item.helpInstruction"
:label="item.helpInstruction" :value="item.helpInstruction" />
</el-select>
<!-- 出场编号 -->
<el-input v-model="searchQueryForDevicePerformance.manufacturer" style="width: 100px;" placeholder="出厂编号" />
</div>
</div>
<div style="width: 100%; height: 80%">
<pie-chart v-if="element.type === 'pie' && !element.isEmpty" :title="element.title"
:show-total="element.showTotal" :data="element.data" :colors="colors" :center="element.center"
label-formatter="{style1|{c}}" :label-position="element.labelPosition" :radius="element.radius"
:grid="{ top: 50, left: 15, right: 15, bottom: 10, containLabel: true }"
:legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }"
@clickPie="(params: any) => { clickPie(params, element) }" />
<line-chart v-if="element.type === 'line' && !element.isEmpty" :colors="colors"
:gradient="element.gradient" :x-axis-data="element.xAxisData" :data="element.data"
:smooth="element.smooth" :grid="{ top: 47, left: 5, right: 5, bottom: 10, containLabel: true }"
:legend="{ itemWidth: 8, itemHeight: 2, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '5' }" />
<bar-chart-double v-if="element.type === 'bar-double' && !element.isEmpty"
:legend-data="element.legendData" :data1="element.data1" :data2="element.data2"
:x-axis-data="element.xAxisData"
:legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
<bar-chart-vertical v-if="element.type === 'bar-vertical' && !element.isEmpty" :bar-coner="0"
:data="element.data" :x-axis-data="element.xAxisData"
:legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
<bar-chart-horizontal v-if="element.type === 'bar-horizontal' && !element.isEmpty" bar-width="10"
:bar-coner="0" :data="element.data" :x-axis-data="element.xAxisData"
:legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', left: '0', top: '10' }" />
<scroll-table v-if="element.type === 'rank-table' && !element.isEmpty" style="width: 100%"
:height="300" :data="element.data" :columns="element.columns" />
<el-empty v-if="element.isEmpty" description="暂无数据" />
</div>
</div>
</div>
</div>
</template>
</draggable>
<!-- </div> -->
</div>
</div>
</template>
<style lang="scss" scoped>
.point {
&:hover {
cursor: pointer;
}
}
.dragClass {
/* background-color: blueviolet !important; */
opacity: 1 !important;
box-shadow: none !important;
outline: none !important;
background-image: none !important;
color: #6ff !important;
}
.ghostClass {
/* background-color: blue !important; */
}
.chosenClass {
color: #6ff !important;
/* background-color: #ccc !important; */
/* opacity: 1 !important; */
/* width: 32.5% !important; */
}
.icon-button-icon {
width: 50px;
height: 50px;
}
.container {
position: relative;
// height: 500px;
.btns {
width: 100%;
position: absolute;
top: -36px;
right: 50%;
// left: 50%;
display: flex;
justify-content: space-between;
padding: 0 120px;
}
.count {
display: flex;
width: 70%;
margin: 0 auto;
position: absolute;
top: -40px;
left: 44%;
transform: translateX(-50%);
.count-item {
margin-left: 20px;
// width: 30%;
height: 75px;
display: flex;
padding: 0 10px;
.header-icon {
width: 20%;
display: flex;
flex-direction: column;
justify-content: center;
}
.header-content {
// width: 60%;
padding: 10px;
display: flex;
flex-direction: column;
justify-content: space-around;
.content-title {
font-weight: 700;
}
.content-count {
font-weight: 700;
font-size: 24px;
color: #1aaf8b;
text-align: center;
}
}
}
}
.chart {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
// margin-top: 15px;
padding-top: 10px;
.chart-item {
width: 33%;
height: 348px;
// border: 1px solid red;
margin-top: 10px;
.chart-name {
color: #3d6fb6;
font-size: 18px;
font-weight: 700;
}
.chart-page {
height: 330px;
}
}
}
}
</style>
