81 lines
		
	
	
		
			1.5 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
			
		
		
	
	
			81 lines
		
	
	
		
			1.5 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
| <!--
 | |
|  * @Author: zhp
 | |
|  * @Date: 2024-05-30 16:00:50
 | |
|  * @LastEditTime: 2024-06-03 16:26:03
 | |
|  * @LastEditors: zhp
 | |
|  * @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>
 |