| | |
| | | |
| | | <!-- 历史模拟 --> |
| | | <div class="history-simulation-wrapper"> |
| | | <el-radio-group v-model="selectedSimulation" style="margin-bottom: 10px;"> |
| | | <el-radio-group v-model="selectedSimulation" style="margin-bottom: 10px"> |
| | | <el-radio label="历史模拟">历史模拟</el-radio> |
| | | <el-radio label="实时模拟">实时模拟</el-radio> |
| | | <el-radio label="预测模拟">预测模拟</el-radio> |
| | | </el-radio-group> |
| | | <div v-if="selectedSimulation === '历史模拟'"> |
| | | <HistorySimulation :selectedArea="selectedArea"/> |
| | | <HistorySimulation :selectedArea="selectedArea" /> |
| | | </div> |
| | | <div v-if="selectedSimulation === '实时模拟'"> |
| | | <RealTimeSimulation :selectedArea="selectedArea" /> |
| | | <!-- <RealTimeSimulation :selectedArea="selectedArea" /> --> |
| | | </div> |
| | | <div v-if="selectedSimulation === '预测模拟'"> |
| | | <PredictiveSimulation :selectedArea="selectedArea"/> |
| | | <!-- <PredictiveSimulation :selectedArea="selectedArea" /> --> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | | <script setup> |
| | | import { ref, computed } from 'vue'; |
| | | import HistorySimulation from './KGSimOption/HistorySimulation.vue'; |
| | | import PredictiveSimulation from './KGSimOption/PredictiveSimulation.vue'; |
| | | import RealTimeSimulation from './KGSimOption/RealTimeSimulation.vue'; |
| | | import { ref, computed } from "vue"; |
| | | import HistorySimulation from "./KGSimOption/HistorySimulation.vue"; |
| | | import PredictiveSimulation from "./KGSimOption/PredictiveSimulation.vue"; |
| | | import RealTimeSimulation from "./KGSimOption/RealTimeSimulation.vue"; |
| | | |
| | | const selectedSimulation = ref('历史模拟'); |
| | | const selectedArea = ref('孙胡沟'); |
| | | const selectedSimulation = ref("历史模拟"); |
| | | const selectedArea = ref("孙胡沟"); |
| | | const earesOptions = [ |
| | | { value: "孙胡沟", label: "孙胡沟" }, |
| | | { value: "鱼水洞后沟", label: "鱼水洞后沟" }, |
| | |
| | | ]; |
| | | |
| | | // 动态过滤选项 |
| | | const searchQuery = ref(''); |
| | | const searchQuery = ref(""); |
| | | const filteredOptions = computed(() => { |
| | | return earesOptions.filter(option => |
| | | return earesOptions.filter((option) => |
| | | option.label.toLowerCase().includes(searchQuery.value.toLowerCase()) |
| | | ); |
| | | }); |
| | |
| | | }; |
| | | |
| | | const handleStart = () => { |
| | | console.log('开始按钮被点击'); |
| | | console.log("开始按钮被点击"); |
| | | }; |
| | | |
| | | const handleAdd = () => { |
| | | console.log('加载按钮被点击'); |
| | | console.log("加载按钮被点击"); |
| | | }; |
| | | </script> |
| | | |
| | | <style scoped> |
| | | /* 样式保持不变 */ |
| | | </style> |
| | | |
| | | <style scoped> |
| | | .simulation-module { |
| | | color: #61f7d4; |
| | | color: #61f7d4; |
| | | } |
| | | |
| | | .simulation-area { |
| | |
| | | } |
| | | |
| | | .engineering-buttons { |
| | | .el-button{ |
| | | .el-button { |
| | | width: 100px; |
| | | } |
| | | } |
| | |
| | | .history-simulation-wrapper { |
| | | margin-bottom: 20px; |
| | | height: 100%; /* 固定高度 */ |
| | | overflow: auto; |
| | | overflow: auto; |
| | | } |
| | | /* 自定义单选框样式 */ |
| | | :deep(.el-radio__input.is-checked .el-radio__inner) { |
| | |
| | | :deep(.el-radio__input.is-checked + .el-radio__label) { |
| | | color: inherit; /* 让文字颜色跟随父级 */ |
| | | } |
| | | :deep(.el-select__placeholder ) { |
| | | :deep(.el-select__placeholder) { |
| | | color: #fff; /* 让文字颜色跟随父级 */ |
| | | } |
| | | :deep(.el-radio ) { |
| | | :deep(.el-radio) { |
| | | color: #fff; /* 让文字颜色跟随父级 */ |
| | | } |
| | | :deep(.el-input__inner ) { |
| | | :deep(.el-input__inner) { |
| | | color: #fff; /* 让文字颜色跟随父级 */ |
| | | } |
| | | /* .mySelectStyle { |
| | |
| | | color: #009688 !important; |
| | | } |
| | | } */ |
| | | </style> |
| | | </style> |