<!-- 受检设备分析 --数据看板 -->
<script name="EqptDeviceTrend" lang="ts" setup>
import dayjs from 'dayjs'
import draggable from 'vuedraggable'
import { colors } from '../environment/colors'
import { getRangeAllTime } from '@/utils/date'
import { getBaseInfo, getNoVerificationAmount, getDeviceSource } from '@/api/dataManagement/data/eqptDevice'
import { eqptDevice } from './img'
const props = defineProps({
lab: {
type: String,
default: ''
}
})
// 日期查询条件
const dateRef = ref()
const current = ref('')
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: ''
})
watch(
() => props.lab,
newVal => {
if (newVal) {
searchQueryResult.value.labCode = 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'
},
]
},
{
name: '受检设备来源分析',
type: 'pie',
source: 'system',
center: ['50%', '60%'],
labelPosition: 'outside',
radius: '70%',
data: []
},
{
name: '任务单来源分析',
type: 'pie',
source: 'system',
center: ['50%', '60%'],
labelPosition: 'outside',
radius: '70%',
data: []
},
{
name: '受检设备种类分析',
type: 'pie',
source: 'system',
data: []
},
{
name: '受检设备数量趋势',
type: 'line',
source: 'system',
xAxisData: [],
data: [],
smooth: false,
gradient: false
},
{
name: '受检设备性能趋势',
type: 'line',
source: 'system',
xAxisData: [],
data: [],
smooth: true,
gradient: true
}
])
watch(
() => showChart.value.length,
() => {
setTimeout(() => {
const resize = new Event('resize')
window.dispatchEvent(resize)
})
}
)
// 模拟数据
const loading = ref(false)
function fetchData() {
console.log(current.value, '当前日期类型---要查询了')
if (current.value !== '自定义时间') {
console.log(timeDate.value, 'timeDate')
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[1]} 23:59:59`
}
} else {
searchQueryResult.value.timeStart = `${selectCurrentTime.value[0]} 00:00:00`
searchQueryResult.value.timeEnd = `${selectCurrentTime.value[1]} 23:59:59`
console.log(selectCurrentTime.value, 'selectCurrentTime.value')
}
searchQueryResult.value.timeStart = `2024-01-01 00:00:00`
searchQueryResult.value.timeEnd = `2024-12-31 23:59:59`
// 获取基础数据
getBaseInfo(searchQueryResult.value).then(res => {
baseInfo.value.forEach(item => {
item.data = res.data[item.value]
})
})
// 未检定数量分析
getNoVerificationAmount(searchQueryResult.value).then(res => {
console.log(res.data, '未检定数量分析')
const current = showChart.value.filter(
item => item.name === '未检定设备数量分析'
)[0]
current.data = []
for(const i in res.data) {
current.data.push({
dept: i,
count: res.data[i]
})
}
})
// 受检设备来源分析
getDeviceSource(searchQueryResult.value).then(res => {
console.log(res.data, '受检设备来源分析')
})
// 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
// setTimeout(() => {
// fetchData()
// }, 10)
}
})
</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"
:disabled-date="pickerOptions"
@calendar-change="calendarChange"
@focus="handlerFocus"
@blur="handlerBlur"
/>
</div>
</div>
</div>
<!-- 展示内容 -->
<div class="content-count">
<!-- 统计数据 -->
<div 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="loading" class="chart-page">
<div style="width: 100%; height: 100%">
<div
class="chart-name"
style="width: 100%; height: 10%; display: flex"
>
{{ element.name }}
<div
v-if="element.name === '人员持证到期趋势'"
style="width: 350px; margin-left: 40px"
>
<el-date-picker
v-model="datetimerange"
type="daterange"
value-format="YYYY-MM-DD"
format="YYYY-MM-DD"
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
/>
</div>
</div>
<div style="width: 100%; height: 90%">
<pie-chart
v-if="element.type === 'pie'"
: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'
}"
/>
<line-chart
v-if="element.type === 'line'"
: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'"
: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'"
: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'"
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'"
style="width: 100%"
:height="300"
:data="element.data"
:columns="element.columns"
/>
</div>
</div>
</div>
</div>
</template>
</draggable>
<!-- </div> -->
</div>
</div>
</template>
<style lang="scss" scoped>
.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: 20px;
.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>
