完善

guonan

2025-04-17 e15245c624a20a3b46e428d646f5f2dd863cd1bc

 src/views/left/CitySim.vue

@@ -2,16 +2,24 @@
  <div style="width: 100%; height: 100%">
    <div
      class="left-top"
      v-if="disForm == '行政区划仿真'"
      v-if="simStore.selectTab == '行政区划仿真'"
      style="margin-top: 0px"
    >
      行政区划仿真（30m精度）
    </div>
    <div class="left-top" v-if="disForm == '重点区域仿真'">
    <div class="left-top" v-if="simStore.selectTab == '重点区域仿真'">
      重点区域仿真（10m精度）
    </div>
    <div class="forms">
      <el-form :model="forms" label-width="auto" style="max-width: 600px">
        <el-form-item label="方案名称:">
          <el-input
            v-model="forms.name"
            style="max-width: 600px"
            placeholder="Please input"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="上传参数">
          <el-upload
            v-model:file-list="forms.fileList"
@@ -28,7 +36,10 @@
            <template #append>mm/h</template>
          </el-upload>
        </el-form-item>
        <el-form-item label="行政区域:" v-if="disForm == '行政区划仿真'">
        <el-form-item
          label="行政区域:"
          v-if="simStore.selectTab == '行政区划仿真'"
        >
          <el-select
            v-model="forms.eare"
            placeholder="Select"
@@ -42,7 +53,10 @@
            />
          </el-select>
        </el-form-item>
        <el-form-item label="重点区域:" v-if="disForm == '重点区域仿真'">
        <el-form-item
          label="重点区域:"
          v-if="simStore.selectTab == '重点区域仿真'"
        >
          <el-select
            v-model="forms.eares"
            placeholder="Select"
@@ -93,7 +107,7 @@
        <el-button type="primary" @click="openSaveDialog">保存方案</el-button>
        <el-button type="success" @click="startPlay">开始模拟</el-button>
      </div>
      <!-- 保存方案对话框 -->
      <!---------------------------- 保存方案对话框（接口版本需删除） -------------------------------->
      <el-dialog
        v-model="saveDialogVisible"
        :title="dialogTitle"
@@ -129,14 +143,20 @@
import { reactive, ref, watch, inject, computed } from "vue";
import * as XLSX from "xlsx";
import Papa from "papaparse";
import { ElMessage } from "element-plus";
import { ElMessage, ElMessageBox } from "element-plus";
import { initeWaterPrimitiveView } from "@/utils/water";
import { createSimData } from "@/api/trApi";

import { useSimStore } from "@/store/simulation";

const simStore = useSimStore();

// 注入父组件提供的方法
const { startSimulate, endSimulate } = inject("simulateActions");
const saveDialogVisible = ref(false); // 控制保存方案对话框的显示状态
const saveDialogVisible = ref(false); // 控制保存方案对话框的显示状态（接口版本删除）
// 表单数据
const forms = reactive({
  name: "",
  eare: "北京市",
  eares: "孙胡沟",
  rainfall: "",
@@ -175,7 +195,9 @@

// 计算属性：获取对话框标题
const dialogTitle = computed(() => {
  return disForm.value === "行政区划仿真" ? "行政区划仿真" : "重点区域仿真";
  return simStore.selectTab === "行政区划仿真"
    ? "行政区划仿真"
    : "重点区域仿真";
});

// 计算属性：获取上传文件的名称列表
@@ -183,22 +205,21 @@
  return forms.fileList.map((file) => file.name).join(", ") || "无";
});

////////////////////////////////////// 接口版本需删除//////////////////////////////////////
// 打开保存方案对话框
const openSaveDialog = () => {
  if (
    !forms.rainfall ||
    !forms.duration ||
    !forms.intensity ||
    (disForm.value === "行政区划仿真" && !forms.eare) ||
    (disForm.value === "重点区域仿真" && !forms.eares)
    (simStore.selectTab === "行政区划仿真" && !forms.eare) ||
    (simStore.selectTab === "重点区域仿真" && !forms.eares)
  ) {
    ElMessage.warning("请先填写所有必填项");
    return;
  }
  saveDialogVisible.value = true;
};

// 关闭保存方案对话框
}
const handleClose = () => {
  saveDialogVisible.value = false;
};
@@ -207,8 +228,8 @@
const confirmSave = () => {
  console.log("保存方案成功", {
    模拟类型: dialogTitle.value,
    行政区域: disForm.value === "行政区划仿真" ? forms.eare : null,
    重点区域: disForm.value === "重点区域仿真" ? forms.eares : null,
    行政区域: simStore.selectTab === "行政区划仿真" ? forms.eare : null,
    重点区域: simStore.selectTab === "重点区域仿真" ? forms.eares : null,
    降雨量: `${forms.rainfall} mm`,
    降雨时长: `${forms.duration} h`,
    降雨强度: `${forms.intensity} mm/h`,
@@ -218,6 +239,53 @@
  saveDialogVisible.value = false;
  resetForm();
};
////////////////////////////////////// 结束删除//////////////////////////////////////

//////////////////////////////////接口版本启用//////////////////////////////////
// const isLoading = ref(false);
// // 保存方案
// const openSaveDialog = () => {
//   if (
//     !forms.rainfall ||
//     !forms.duration ||
//     !forms.intensity ||
//     (simStore.selectTab === "行政区划仿真" && !forms.eare) ||
//     (simStore.selectTab === "重点区域仿真" && !forms.eares)
//   ) {
//     ElMessage.warning("请先填写所有必填项");
//     return;
//   }
//   ElMessageBox.confirm("确定要保存当前方案吗?", dialogTitle.value, {
//     confirmButtonText: "确定",
//     cancelButtonText: "取消",
//     type: "warning",
//   })
//     .then(confirmSave)
//     .catch(() => {
//       ElMessage({
//         type: "info",
//         message: "已取消保存",
//       });
//     });
// };
// const confirmSave = async () => {
//   if (isLoading.value) {
//     ElMessage.warning("正在保存，请稍候...");
//     return; // 防止重复提交
//   }
//   isLoading.value = true; // 开始加载状态
//   try {
//     await simStore.createSimulation(forms); // 调用 Store 中的保存方法
//     ElMessage.success("保存成功");
//     saveDialogVisible.value = true; // 显示保存对话框（如果需要）
//   } catch (error) {
//     console.error("保存失败:", error);
//     ElMessage.error("保存失败，请稍后重试");
//   } finally {
//     isLoading.value = false; // 结束加载状态
//   }
// };
//////////////////////////////////接口版本启用//////////////////////////////////

// 重置表单
const resetForm = () => {
@@ -345,21 +413,6 @@
  return true;
};

const disForm = ref("");

// 定义 Props
const props = defineProps({
  clickValue: String,
});

// 监听 Props 变化
watch(
  () => props.clickValue,
  (newValue) => {
    disForm.value = newValue || "行政区划仿真";
  },
  { immediate: true, deep: true }
);

// 开始模拟
function startPlay() {