yudao-init/src/views/copilot/yield/components/sub/ring/DoubleRingWrapper.vue

<!-- 
    filename: DoubleRingWrapper.vue
    author: liubin
    date: 2024-04-17 09:55:12
    description: 
-->

<template>
  <div class="double-ring-wrapper">
    <template v-if="period == '月' || period == '年'">
      <copilot-select
        @update:active="handleActiveUpdate"
        :options="cityOptions"
      />
      <div class="flex-1 stretch">
        <DoubleRingChartVue
          :data-source="dataSource"
          :period="period"
          :factoryId="factoryId"
        />
      </div>
    </template>
    <template v-else>
      <CityData :data-source="dataSource" :period="period" />
    </template>
  </div>
</template>

<script>
import CopilotSelect from "@/views/copilot/components/select.vue";
import DoubleRingChartVue from "./DoubleRingChart.vue";
import CityData from "../city/CityData.vue";

export default {
  name: "DoubleRingWrapper",
  components: { CopilotSelect, DoubleRingChartVue, CityData },
  props: {
    dataSource: {
      type: String,
      default: null,
    },
    period: {
      type: String,
      default: "日",
    },
  },
  data() {
    return {
      factoryId: 4, // 默认成都
      cityOptions: [
        "成都",
        "邯郸",
        "株洲",
        "瑞昌",
        "佳木斯",
        "凯盛光伏",
        "蚌埠兴科",
      ],
    };
  },
  methods: {
    handleActiveUpdate(index) {
      this.factoryId = index;
    },
  },
};
</script>

<style scoped lang="scss">
.double-ring-wrapper {
  height: 100%;
  padding: 12px 24px;
  display: flex;
  gap: 12px;
  flex-direction: column;
  align-items: center;
}

.flex-1 {
  flex: 1;
}

.stretch {
  align-self: stretch;
}
</style>