<script>
import PieChart3D from "@/components/PieChart3D.vue";
import Maintenance3D from "@/components/Maintenance3D.vue";
import Overhaul3D from "@/components/Overhaul3D.vue";
export default {
  name: "AutonomousManagement",
  components: {
    PieChart3D,
    Maintenance3D,
    Overhaul3D,
  },
  data() {
    return {
      flag: 0,
    };
  },
  methods: {
    change(index) {
      this.flag = index;
    },
  },
};
</script>

<template>
  <div class="autonomous-management">
    <div class="autonomous-management_header">
      <button-group @change="change">
        <button-group-item> 管理形式 </button-group-item>
        <button-group-item> 维护形式 </button-group-item>
        <button-group-item>大修基金</button-group-item>
      </button-group>
    </div>
    <div>
      <PieChart3D v-if="flag == 0" />
      <Maintenance3D v-if="flag == 1" />
      <Overhaul3D v-if="flag == 2" />
    </div>
  </div>
</template>

<style scoped lang="less">
.autonomous-management {
  padding: 10px 10px 0px 10px;
  .autonomous-management_header {
    border-bottom: 1px solid #154956;
    padding-bottom: 2px;
  }
}
</style>
