yudao-init/src/views/copilot/components/charts/base/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 :period="period" />
      </div>
    </template>
    <template v-else>
      <CityData :data-source="dataSource" :period="period" />
    </template>
  </div>
</template>

<script>
import CopilotSelect from "../../select.vue";
import fetcher from "./fetcherDoubleRing";
import DoubleRingChartVue from "./DoubleRingChart.vue";
import CityData from './CityData.vue';

export default {
  name: "DoubleRingWrapper",
  components: { CopilotSelect, DoubleRingChartVue, CityData },
  props: {
    dataSource: {
      type: Object,
      default: () => ({}),
    },
    period: {
      type: String,
      default: "日",
    },
  },
  data() {
    return {
      cityOptions: [
        "成都",
        "邯郸",
        "株洲",
        "瑞昌",
        "佳木斯",
        "凯盛光伏",
        "蚌埠兴科",
      ],
    };
  },
  computed: {},
  mounted() {
    fetcher.getData().then((res) => {
      console.log("getData--->", res);
    });
  },
  methods: {
    handleActiveUpdate(val) {
      console.log("handleActiveUpdate--->", val);
    },
  },
};
</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>