<!-- 
    filename: index.vue
    author: liubin
    date: 2024-04-16 14:40:15
    description: 效率驾驶舱
-->

<template>
  <div class="efficiency-copilot">
    <Container title="芯片良率" icon="chip2">
      <ChipRate />
    </Container>
    <Container title="标准组件良率" icon="std">
      <StdRate />
    </Container>
    <Container title="芯片OEE" icon="chip">
      <ChipOee :period="period" />
    </Container>
    <Container title="转化效率" icon="cube">
      <TransformRate :period="period" />
    </Container>
  </div>
</template>

<script>
import Container from "@/views/copilot/components/Container.vue";
import ChipOeeVue from "./components/ChipOee.vue";
import ChipRateVue from "./components/ChipRate.vue";
import StdRateVue from "./components/StdRate.vue";
import TransformRateVue from "./components/TransformRate.vue";

export default {
  name: "EfficiencyCopilot",
  components: {
    Container,
    ChipOee: ChipOeeVue,
    ChipRate: ChipRateVue,
    StdRate: StdRateVue,
    TransformRate: TransformRateVue,
  },
  props: {
    period: {
      type: String,
      default: "日",
    },
  },
  data() {
    return {};
  },
  watch: {
    period: {
      handler(val) {
        val && this.fetchData(val);
      },
      immediate: true,
    },
  },
  methods: {
    fetchData(period = "日") {
      console.log(`效率驾驶舱，获取${period}数据`);
      this.$store.dispatch("copilot/initCopilot", {
        period,
        source: "efficiency",
      });
    },
  },
};
</script>

<style scoped>
.efficiency-copilot {
  flex: 1;
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.efficiency-copilot > div {
  height: 100%;
}
</style>
