yudao-dev/src/views/databoard/wholePlant/DefectClass.vue
2024-01-18 14:05:39 +08:00

51 lines
1.3 KiB
Vue

<template>
<Container name="产线当日缺陷分类" size="middle">
<TimePrompt class="timeShow" :timestr="timestr" />
<DropDownBtn class="typeToggle" :options="['Y61', 'Y62', 'Y63', 'Y64', 'Y65']" @emitFun='toggleType' :active='chartType' />
<div class="chart" style="height: 375px; margin-top: 8px;">
<DefectClassChart :chartType='chartType' @emitFun='dateUpdate'/>
</div>
</Container>
</template>
<script>
import Container from '../components/Container';
import DropDownBtn from '../components/DropDownBtn';
import DefectClassChart from '../components/DefectClassChart';
import TimePrompt from '../components/TimePrompt';
import { switchShowTime } from '../utils'
export default {
name: 'DefectClass',
components: { Container, DropDownBtn, DefectClassChart, TimePrompt },
data() {
return {
chartType:'Y61',
timestr: ''
}
},
mounted() {
this.timestr = switchShowTime('日')
},
methods: {
// 切换产线
toggleType(val) {
this.chartType = val
},
// 数据更新
dateUpdate() {
this.timestr = switchShowTime('日')
}
}
}
</script>
<style lang='scss' scoped>
.timeShow {
position: absolute;
top: 18px;
left: 260px;
}
.typeToggle {
position: absolute;
right: 20px;
top: 15px;
}
</style>