yudao-init/src/views/copilot/yield/components/sub/ring/DoubleRingWrapper.vue
‘937886381’ 83ad88858b 驾驶舱
2024-05-20 10:20:37 +08:00

87 lines
1.6 KiB
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>