yudao-dev/src/views/databoard/wholePlant/DefectClass.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>