实时模拟

guonan

2025-04-23 f4551c852cfe34e70a4ea4e84680907e189673ec

实时模拟

 src/store/simAPI.js

@@ -22,29 +22,24 @@
        }
    }

    // 获取降雨类型
    const getRainType = (tabName) => {
        switch (tabName) {
            case '预测模拟': return 1
            case '实时模拟': return 2
            case '历史模拟': return 3
            default: return 3
        }
    }

    // 验证表单
    const validateForm = (forms) => {
        if (!forms?.name) {
            ElMessage.warning('请输入方案名称')
            return false
        }
        if (!forms.name
            || !forms.geom
            || !forms.rainfall
            || !forms.intensity
            || !forms.duration) {
            ElMessage.warning('请确保表单均已填写')
            return false

        if (forms.type === 1 || forms.type === 3) {
            if (!forms.geom || !forms.rainfall || !forms.intensity || !forms.duration) {
                ElMessage.warning('请确保表单均已填写')
                return false
            }
        }
        if (forms.type === 2) {
            if (!forms.geom || !forms.gauges) {
                ElMessage.warning('请确保表单均已填写')
                return false
            }
        }
        return true
    }
@@ -74,6 +69,7 @@
                    prediction: forms.prediction,
                    history: forms.history,
                    mode: forms.mode,
                    gauges: forms.gauges
                })
            }
            const res = await createSimData(params)

 src/views/left/KGSimOption/HistorySimulation.vue

@@ -72,7 +72,7 @@
    </div>

    <!-- 保存方案对话框 -->
    <el-dialog
    <!-- <el-dialog
      v-model="saveDialogVisible"
      title="保存方案"
      width="50%"
@@ -94,7 +94,7 @@
          <el-button type="primary" @click="confirmSave">确定保存</el-button>
        </span>
      </template>
    </el-dialog>
    </el-dialog> -->
  </div>
</template>


 src/views/left/KGSimOption/RealTimeSimulation.vue

@@ -2,7 +2,9 @@
  <div class="real-time-simulation">
    <div class="left-top">
      <span>实时模拟</span>
      <span class="clickable-text" @click="toggleDetails">{{ isCollapsed ? '展开' : '收起' }}</span>
      <span class="clickable-text" @click="toggleDetails">{{
        isCollapsed ? "展开" : "收起"
      }}</span>
    </div>
    <div class="details" :class="{ hidden: isCollapsed }">
      <div class="input-group">
@@ -16,7 +18,11 @@
        </div>
        <div class="input-item">
          <label>雨量数据:</label>
          <el-select v-model="selectedRainfall" placeholder="请选择" popper-class="mySelectStyle">
          <el-select
            v-model="selectedRainfall"
            placeholder="请选择"
            popper-class="mySelectStyle"
          >
            <el-option
              v-for="item in rainfallData"
              :key="item.id"
@@ -27,7 +33,11 @@
        </div>
      </div>
      <div class="table-container">
        <div class="table-row" v-for="(item, index) in filteredTableData" :key="index">
        <div
          class="table-row"
          v-for="(item, index) in filteredTableData"
          :key="index"
        >
          <input type="checkbox" v-model="item.selected" />
          <span>{{ item.name }}</span>
        </div>
@@ -43,7 +53,7 @@
      <el-button type="success" @click="futurePredictions">未来预测</el-button>
    </div>

    <!-- 保存方案对话框 -->
    <!-- 保存方案对话框
    <el-dialog
      v-model="saveDialogVisible"
      title="保存方案"
@@ -66,32 +76,37 @@
          <el-button type="primary" @click="confirmSave">确定保存</el-button>
        </span>
      </template>
    </el-dialog>
    </el-dialog> -->
  </div>
</template>

<script setup>
import { ref, watch, defineProps, computed, inject } from 'vue';
import { ElMessage } from 'element-plus';
import { ref, watch, defineProps, computed, inject } from "vue";
import { ElMessage } from "element-plus";
import { initeWaterPrimitiveView } from "@/utils/water";
import { useSimStore } from "@/store/simulation.js"; // 引入 Store
import { SimAPIStore } from "@/store/simAPI";

// 获取 Store 实例
const simStore = useSimStore();
const simStore = SimAPIStore();

// 获取 Store 实例
const schemeName = ref("方案名称"); // 方案名称

// 注入模拟操作方法
const { startSimulate, endSimulate } = inject("simulateActions");

function startPlay() {
  const selectedItems = filteredTableData.value.filter(item => item.selected);
  const selectedItems = filteredTableData.value.filter((item) => item.selected);
  if (selectedItems.length > 0) {
    console.log('选中的项：', selectedItems.map(item => item.name));
    console.log(
      "选中的项：",
      selectedItems.map((item) => item.name)
    );
  } else {
    console.log('未选中任何项');
    console.log("未选中任何项");
  }
  console.log('当前选中的区域：', props.selectedArea);
  console.log('当前选中的雨量数据：', selectedRainfall.value);
  console.log("当前选中的区域：", props.selectedArea);
  console.log("当前选中的雨量数据：", selectedRainfall.value);
  initeWaterPrimitiveView();
  startSimulate();
}
@@ -100,7 +115,7 @@
function deepCloneAndSetSelected(data) {
  const newData = {};
  for (const key in data) {
    newData[key] = data[key].map(item => ({ ...item, selected: true }));
    newData[key] = data[key].map((item) => ({ ...item, selected: true }));
  }
  return newData;
}
@@ -109,14 +124,14 @@
const props = defineProps({
  selectedArea: {
    type: String,
    required: true
  }
    required: true,
  },
});

// 子组件内部状态
const rainfallData = ref([]); // 雨量数据
const tableData = ref({}); // 表格数据（按雨量数据分组）
const selectedRainfall = ref(''); // 当前选中的雨量数据
const selectedRainfall = ref(""); // 当前选中的雨量数据
const isCollapsed = ref(false); // 控制展开/收起状态
const saveDialogVisible = ref(false); // 控制保存方案对话框显示状态

@@ -124,52 +139,52 @@
const areaDataMap = {
  孙胡沟: {
    rainfallData: [
      { id: '1', name: '气象实时数据 - 孙胡沟' },
      { id: '2', name: '雨量计实时数据 - 孙胡沟' }
      { id: "1", name: "气象实时数据 - 孙胡沟" },
      { id: "2", name: "雨量计实时数据 - 孙胡沟" },
    ],
    tableData: {
      '1': [
        { id: '001', name: '孙胡沟气象站001' },
        { id: '002', name: '孙胡沟气象站002' } 
      1: [
        { id: "001", name: "孙胡沟气象站001" },
        { id: "002", name: "孙胡沟气象站002" },
      ],
      '2': [
        { id: '003', name: '孙胡沟雨量计003' },
        { id: '004', name: '孙胡沟雨量计004' } 
      ]
    }
      2: [
        { id: "003", name: "孙胡沟雨量计003" },
        { id: "004", name: "孙胡沟雨量计004" },
      ],
    },
  },
  鱼水洞后沟: {
    rainfallData: [
      { id: '1', name: '气象实时数据 - 鱼水洞后沟' },
      { id: '2', name: '雨量计实时数据 - 鱼水洞后沟' }
      { id: "1", name: "气象实时数据 - 鱼水洞后沟" },
      { id: "2", name: "雨量计实时数据 - 鱼水洞后沟" },
    ],
    tableData: {
      '1': [
        { id: '005', name: '鱼水洞后沟气象站005' },
        { id: '006', name: '鱼水洞后沟气象站006' } 
      1: [
        { id: "005", name: "鱼水洞后沟气象站005" },
        { id: "006", name: "鱼水洞后沟气象站006" },
      ],
      '2': [
        { id: '007', name: '鱼水洞后沟雨量计007' },
        { id: '008', name: '鱼水洞后沟雨量计008' } 
      ]
    }
      2: [
        { id: "007", name: "鱼水洞后沟雨量计007" },
        { id: "008", name: "鱼水洞后沟雨量计008" },
      ],
    },
  },
  于家西沟: {
    rainfallData: [
      { id: '1', name: '气象实时数据 - 于家西沟' },
      { id: '2', name: '雨量计实时数据 - 于家西沟' }
      { id: "1", name: "气象实时数据 - 于家西沟" },
      { id: "2", name: "雨量计实时数据 - 于家西沟" },
    ],
    tableData: {
      '1': [
        { id: '009', name: '于家西沟气象站009' },
        { id: '010', name: '于家西沟气象站010' } 
      1: [
        { id: "009", name: "于家西沟气象站009" },
        { id: "010", name: "于家西沟气象站010" },
      ],
      '2': [
        { id: '011', name: '于家西沟雨量计011' },
        { id: '012', name: '于家西沟雨量计012' } 
      ]
    }
  }
      2: [
        { id: "011", name: "于家西沟雨量计011" },
        { id: "012", name: "于家西沟雨量计012" },
      ],
    },
  },
};

// 根据 selectedArea 更新数据
@@ -180,11 +195,11 @@
      rainfallData.value = areaDataMap[newArea].rainfallData;
      // 使用深拷贝设置默认选中状态
      tableData.value = deepCloneAndSetSelected(areaDataMap[newArea].tableData);
      selectedRainfall.value = ''; // 清空选中的雨量数据
      selectedRainfall.value = ""; // 清空选中的雨量数据
    } else {
      rainfallData.value = [];
      tableData.value = {};
      selectedRainfall.value = '';
      selectedRainfall.value = "";
    }
  },
  { immediate: true } // 立即执行一次，确保初始数据正确
@@ -199,22 +214,41 @@

// 获取当前选中的雨量数据名称
const selectedRainfallName = computed(() => {
  const selected = rainfallData.value.find(item => item.id === selectedRainfall.value);
  return selected ? selected.name : '';
  const selected = rainfallData.value.find(
    (item) => item.id === selectedRainfall.value
  );
  return selected ? selected.name : "";
});

// 获取当前选中的设备信息
const selectedDevices = computed(() => {
  return filteredTableData.value.filter(item => item.selected);
  return filteredTableData.value.filter((item) => item.selected);
});

// 打开保存方案对话框
const openSaveDialog = () => {
  if (!props.selectedArea || !selectedRainfall.value || selectedDevices.value.length === 0) {
    ElMessage.warning('请先选择区域、雨量数据并勾选设备');
    return;
  }
  saveDialogVisible.value = true;
const openSaveDialog = async () => {
  const forms = {
    name: schemeName.value,
    geom: props.selectedArea,
    type: 2,
    gauges: [
      {
        id: "xxxxxxxxxxxxxx",
        name: "雨量计1",
        x: 119.0,
        y: 28.0,
        r: 10000,
      },
      {
        id: "xxxxxxxxxxxxxx",
        name: "雨量计2",
        x: 119.0,
        y: 28.0,
        r: 10000,
      },
    ],
  };
  await simStore.addSimCheme(forms);
};

// 关闭保存方案对话框
@@ -222,36 +256,36 @@
  saveDialogVisible.value = false;
};

// 确认保存
const confirmSave = () => {
  // 构造新的方案对象
  const newScheme = {
    name: schemeName.value,//方案名称
    id: Date.now().toString(), // 唯一 ID
    area: props.selectedArea, // 区域
    name: selectedRainfallName.value, // 方案名称（雨量数据类型）
    createTime: new Date().toISOString(), // 创建时间
    taskStatus:1, // 初始状态为未开始
    rainfallType: selectedRainfallName.value, // 雨量数据类型
    devices: selectedDevices.value.map((item) => item.name), // 设备信息
  };
// // 确认保存
// const confirmSave = () => {
//   // 构造新的方案对象
//   const newScheme = {
//     name: schemeName.value,//方案名称
//     id: Date.now().toString(), // 唯一 ID
//     area: props.selectedArea, // 区域
//     name: selectedRainfallName.value, // 方案名称（雨量数据类型）
//     createTime: new Date().toISOString(), // 创建时间
//     taskStatus:1, // 初始状态为未开始
//     rainfallType: selectedRainfallName.value, // 雨量数据类型
//     devices: selectedDevices.value.map((item) => item.name), // 设备信息
//   };

  // 调用 Store 的方法添加方案
  simStore.addSchemCard(newScheme);
//   // 调用 Store 的方法添加方案
//   simStore.addSchemCard(newScheme);

  console.log("保存方案成功", newScheme);
  ElMessage.success("方案已保存");
//   console.log("保存方案成功", newScheme);
//   ElMessage.success("方案已保存");

  // 关闭对话框
  saveDialogVisible.value = false;
};
//   // 关闭对话框
//   saveDialogVisible.value = false;
// };

const toggleDetails = () => {
  isCollapsed.value = !isCollapsed.value;
};

const futurePredictions = () => {
  console.log('未来预测按钮被点击');
  console.log("未来预测按钮被点击");
};
</script>

@@ -342,4 +376,4 @@
.el-button {
  flex: 1;
}
</style>
</style>