224 lines
6.9 KiB
Vue
224 lines
6.9 KiB
Vue
<template>
|
|
<a-card ref="dashboard" :body-style="{ ...style, minHeight: isFullscreen ? '100vh' : '100px' }" :bordered="false">
|
|
<a-row :gutter="[16, 16]">
|
|
<a-col :span="4"></a-col>
|
|
<a-col :span="16" style="text-align: center">
|
|
<a-typography-title>
|
|
<span :style="style">{{ currentTeam?.name }}班组数据采集</span>
|
|
</a-typography-title>
|
|
</a-col>
|
|
<a-col :span="4">
|
|
<a-radio-group v-model:value="team" button-style="solid" size="large">
|
|
<a-radio-button v-for="t in teams" :key="t.id" :value="t.id">{{ t.name }}</a-radio-button>
|
|
</a-radio-group>
|
|
</a-col>
|
|
<a-col :span="24">
|
|
<a-card :body-style="cardStyle" :bordered="false">
|
|
<a-row justify="center">
|
|
<a-col :span="4" style="text-align: center">
|
|
<a-statistic
|
|
:value="stationStatusStatistic?.powered ?? 0"
|
|
style="margin-right: 50px"
|
|
:value-style="{ fontFamily: 'digii', fontSize: '40px', fontWeight: 700, ...cardStyle }"
|
|
>
|
|
<template #title>
|
|
<span style="font-size: 20px" :style="cardStyle">开机工位</span>
|
|
</template>
|
|
<template #suffix>
|
|
<span>/ {{ stations.length }}</span>
|
|
</template>
|
|
</a-statistic>
|
|
</a-col>
|
|
<a-col :span="4" style="text-align: center">
|
|
<a-statistic
|
|
:value="stationStatusStatistic?.working ?? 0"
|
|
style="margin-right: 50px"
|
|
:value-style="{ fontFamily: 'digii', fontSize: '40px', fontWeight: 700, ...cardStyle }"
|
|
>
|
|
<template #title>
|
|
<span style="font-size: 20px" :style="cardStyle">有效工作</span>
|
|
</template>
|
|
<template #suffix>
|
|
<span>/ {{ stations.length }}</span>
|
|
</template>
|
|
</a-statistic>
|
|
</a-col>
|
|
<a-col :span="4" style="text-align: center">
|
|
<a-statistic
|
|
:value="XEUtils.commafy(dayStatistic?.powerHours ?? 0, { digits: 3 })"
|
|
style="margin-right: 50px"
|
|
:value-style="{ fontFamily: 'digii', fontSize: '40px', fontWeight: 700, ...cardStyle }"
|
|
>
|
|
<template #title>
|
|
<span style="font-size: 20px" :style="cardStyle">当日开机时长</span>
|
|
</template>
|
|
<template #suffix>
|
|
<span>H</span>
|
|
</template>
|
|
</a-statistic>
|
|
</a-col>
|
|
<a-col :span="4" style="text-align: center">
|
|
<a-statistic
|
|
:value="XEUtils.commafy(dayStatistic?.workingHours ?? 0, { digits: 3 })"
|
|
style="margin-right: 50px"
|
|
:value-style="{ fontFamily: 'digii', fontSize: '40px', fontWeight: 700, ...cardStyle }"
|
|
>
|
|
<template #title>
|
|
<span style="font-size: 20px" :style="cardStyle">当日焊接时长</span>
|
|
</template>
|
|
<template #suffix>
|
|
<span>H</span>
|
|
</template>
|
|
</a-statistic>
|
|
</a-col>
|
|
<a-col :span="4" style="text-align: center">
|
|
<a-statistic
|
|
:value="XEUtils.commafy(monthStatistic?.powerHours ?? 0, { digits: 3 })"
|
|
style="margin-right: 50px"
|
|
:value-style="{ fontFamily: 'digii', fontSize: '40px', fontWeight: 700, ...cardStyle }"
|
|
>
|
|
<template #title>
|
|
<span style="font-size: 20px" :style="cardStyle">当月开机时长</span>
|
|
</template>
|
|
<template #suffix>
|
|
<span>H</span>
|
|
</template>
|
|
</a-statistic>
|
|
</a-col>
|
|
<a-col :span="4" style="text-align: center">
|
|
<a-statistic
|
|
:value="XEUtils.commafy(monthStatistic?.workingHours ?? 0, { digits: 3 })"
|
|
style="margin-right: 50px"
|
|
:value-style="{ fontFamily: 'digii', fontSize: '40px', fontWeight: 700, ...cardStyle }"
|
|
>
|
|
<template #title>
|
|
<span style="font-size: 20px" :style="cardStyle">当月焊接时长</span>
|
|
</template>
|
|
<template #suffix>
|
|
<span>H</span>
|
|
</template>
|
|
</a-statistic>
|
|
</a-col>
|
|
</a-row>
|
|
</a-card>
|
|
</a-col>
|
|
<a-col :span="24">
|
|
<a-card :body-style="cardStyle" :bordered="false">
|
|
<a-card-grid
|
|
v-for="(station, index) in stations"
|
|
:key="index"
|
|
:style="{
|
|
width: '13.8%',
|
|
marginTop: isFullscreen ? '55px' : '20px',
|
|
marginBottom: isFullscreen ? '55px' : '20px',
|
|
marginRight: index % 7 === 6 ? '0.08%' : '0.54%',
|
|
marginLeft: index % 7 === 0 ? '0.08%' : '0',
|
|
paddingRight: 0,
|
|
paddingBottom: 0,
|
|
paddingTop: '4px',
|
|
boxShadow:
|
|
'1px 0 0 0 #1362e5,0 1px 0 0 #1362e5,1px 1px 0 0 #1362e5,1px 0 0 0 #1362e5 inset,0 1px 0 0 #1362e5 inset',
|
|
...style,
|
|
}"
|
|
:bordered="false"
|
|
>
|
|
<station-card v-if="team && station" :station="station" :team-id="team"></station-card>
|
|
</a-card-grid>
|
|
</a-card>
|
|
</a-col>
|
|
</a-row>
|
|
</a-card>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import api from '@/api'
|
|
import StationCard from './station-card.vue'
|
|
import dayjs from 'dayjs'
|
|
import XEUtils from 'xe-utils'
|
|
const stations = ref<station.Station[]>([])
|
|
// api.stationApi.station.stations({ page: 1, size: 100 }, (data) => {
|
|
// stations.value = data.records ?? []
|
|
// })
|
|
stations.value = Array.from({ length: 14 }).map((_, index) => ({
|
|
id: index + 1,
|
|
name: `工位${index + 1}`,
|
|
channel: 1,
|
|
standby: 69.2,
|
|
working: 23.8,
|
|
key: '1',
|
|
maxGap: 15,
|
|
uid: '',
|
|
}))
|
|
const teams = ref<station.Team[]>([])
|
|
const team = ref<number>()
|
|
api.stationApi.team.teams({}, (data) => {
|
|
teams.value = data.records ?? []
|
|
team.value = teams.value[0].id
|
|
})
|
|
const currentTeam = computed(() => teams.value.find((t) => t.id === team.value))
|
|
const stationStatusStatistic = ref<station.StationStatusStatistic>()
|
|
const loadStationStatusStatistic = () => {
|
|
api.stationApi.stationStatus.statistic((data) => {
|
|
stationStatusStatistic.value = data
|
|
})
|
|
}
|
|
|
|
const teamStatistics = ref<station.Statistic[]>([])
|
|
const loadTeamStatistics = (_teamId: number) => {
|
|
api.stationApi.team.statistics(_teamId, (data) => {
|
|
teamStatistics.value = data
|
|
})
|
|
}
|
|
|
|
const timer = ref()
|
|
const loadData = (_id?: number) => {
|
|
timer.value = setInterval(() => {
|
|
loadStationStatusStatistic()
|
|
if (_id) {
|
|
loadTeamStatistics(Number(_id))
|
|
}
|
|
}, 10000)
|
|
}
|
|
watch(
|
|
team,
|
|
(val) => {
|
|
clearInterval(timer.value)
|
|
loadData(val)
|
|
},
|
|
{ immediate: true },
|
|
)
|
|
onBeforeUnmount(() => {
|
|
clearInterval(timer.value)
|
|
})
|
|
|
|
const dayStatistic = computed(() => {
|
|
return teamStatistics.value.find((s) => s.scale === dayjs().format('YYYY-MM-DD'))
|
|
})
|
|
const monthStatistic = computed(() => {
|
|
return teamStatistics.value.find((s) => s.scale === dayjs().format('YYYY-MM'))
|
|
})
|
|
const dashboard = ref<HTMLElement | null>(null)
|
|
const { toggle, isFullscreen } = useFullscreen(dashboard)
|
|
onKeyStroke('ArrowUp', () => {
|
|
toggle()
|
|
})
|
|
const style = computed(() => {
|
|
return {
|
|
backgroundColor: '#155bd5',
|
|
color: '#fff',
|
|
}
|
|
})
|
|
const cardStyle = computed(() => {
|
|
return {
|
|
backgroundColor: '#1362e5',
|
|
color: '#fff',
|
|
}
|
|
})
|
|
</script>
|
|
<style lang="css" scoped>
|
|
@font-face {
|
|
font-family: digii;
|
|
src: url('/DS-DIGII-3.ttf');
|
|
}
|
|
</style>
|