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>
      <copilot-select @update:active="handleActiveUpdate" :options="cityOptions" />
      <div class="flex-1 stretch">
        <DoubleRingChartVue :data-source="dataSource" :period="period" :than="than" :factoryId="factoryId" />
      </div>
    </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: "日",
    },
    than: {
      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>