yudao-init/src/views/copilot/components/charts/base/DoubleRingWrapper.vue

82 lines
1.5 KiB
Vue
Raw Normal View History

2024-04-18 17:01:10 +08:00
<!--
filename: DoubleRingWrapper.vue
author: liubin
date: 2024-04-17 09:55:12
description:
-->
<template>
<div class="double-ring-wrapper">
2024-04-24 16:31:27 +08:00
<template v-if="period == '月' || period == '年'">
<copilot-select
@update:active="handleActiveUpdate"
:options="cityOptions"
/>
<div class="flex-1 stretch">
2024-04-26 17:05:26 +08:00
<DoubleRingChartVue :data-source="dataSource" :period="period" />
2024-04-24 16:31:27 +08:00
</div>
</template>
<template v-else>
<CityData :data-source="dataSource" :period="period" />
</template>
2024-04-18 17:01:10 +08:00
</div>
</template>
<script>
import CopilotSelect from "../../select.vue";
import DoubleRingChartVue from "./DoubleRingChart.vue";
2024-04-25 17:07:44 +08:00
import CityData from "./CityData.vue";
2024-04-18 17:01:10 +08:00
export default {
name: "DoubleRingWrapper",
2024-04-24 16:31:27 +08:00
components: { CopilotSelect, DoubleRingChartVue, CityData },
props: {
dataSource: {
2024-04-25 17:07:44 +08:00
type: String,
default: null,
2024-04-24 16:31:27 +08:00
},
period: {
type: String,
default: "日",
},
},
2024-04-18 17:01:10 +08:00
data() {
return {
cityOptions: [
"成都",
"邯郸",
"株洲",
"瑞昌",
"佳木斯",
"凯盛光伏",
"蚌埠兴科",
],
};
},
2024-04-24 16:31:27 +08:00
methods: {
2024-04-26 17:05:26 +08:00
handleActiveUpdate(index) {
console.log("handleActiveUpdate--->", index);
2024-04-24 16:31:27 +08:00
},
},
2024-04-18 17:01:10 +08:00
};
</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>