修改很多很多很多

guonan

2025-05-13 75134e86655dedcb2ad574146dadaad1a24f6f01

 src/views/left/KGSimOption/RealTimeSimulation.vue

@@ -6,82 +6,65 @@
        isCollapsed ? "展开" : "收起"
      }}</span>
    </div>
    <div class="details" :class="{ hidden: isCollapsed }">
      <div class="input-group">
        <div class="input-item">
          <label>方案名称:</label>
          <el-input
            v-model="schemeName"
            type="text"
            placeholder="请输入"
          ></el-input>

    <el-form
      :model="formData"
      label-width="auto"
      style="max-width: 600px; padding-right: 10px; box-sizing: border-box"
    >
      <el-collapse-transition style="margin-top: 10px">
        <div v-show="!isCollapsed">
          <el-form-item label="方案名称:">
            <el-input
              v-model="formData.name"
              type="text"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="雨量数据:">
            <el-select
              v-model="formData.selectedRainfall"
              placeholder="请选择"
              popper-class="mySelectStyle"
            >
              <el-option
                v-for="item in rainfallData"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <div class="table-container">
              <div
                class="table-row"
                v-for="(item, index) in filteredTableData"
                :key="index"
              >
                <input type="checkbox" v-model="item.selected" />
                <span>{{ item.name }}</span>
              </div>
            </div>
          </el-form-item>
        </div>
        <div class="input-item">
          <label>雨量数据:</label>
          <el-select
            v-model="selectedRainfall"
            placeholder="请选择"
            popper-class="mySelectStyle"
          >
            <el-option
              v-for="item in rainfallData"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </div>
      </div>
      <div class="table-container">
        <div
          class="table-row"
          v-for="(item, index) in filteredTableData"
          :key="index"
        >
          <input type="checkbox" v-model="item.selected" />
          <span>{{ item.name }}</span>
        </div>
      </div>
      <!-- <div style="margin-top: 10px;">
      </el-collapse-transition>
    </el-form>

    <!-- <div style="margin-top: 10px;">
        <label>仿真参数:</label>
        <div style="width: 100%; height: 60px; background-color: #fff;"></div>
      </div> -->
    </div>
    <div class="buttons">
      <el-button type="primary" @click="openSaveDialog">保存方案</el-button>
      <el-button type="success" @click="startPlay">开始模拟</el-button>
      <el-button type="success" @click="futurePredictions">未来预测</el-button>
    </div>

    <!-- 保存方案对话框
    <el-dialog
      v-model="saveDialogVisible"
      title="保存方案"
      width="50%"
      :before-close="handleClose"
       custom-class="custom-dialog"
    >
      <div class="dialog-content">
        <p><strong>所选重点沟：</strong>{{ props.selectedArea }}</p>
        <p><strong>模拟类型：</strong>实时模拟</p>
        <p><strong>雨量数据类型：</strong>{{ selectedRainfallName }}</p>
        <p><strong>设备信息：</strong></p>
        <ul>
          <li v-for="item in selectedDevices" :key="item.id">{{ item.name }}</li>
        </ul>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="saveDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmSave">确定保存</el-button>
        </span>
      </template>
    </el-dialog> -->
  </div>
</template>

<script setup>
import { ref, watch, defineProps, computed, inject } from "vue";
import { ref, watch, defineProps, computed, inject, reactive } from "vue";
import { ElMessage } from "element-plus";
import { initeWaterPrimitiveView } from "@/utils/water";
import { SimAPIStore } from "@/store/simAPI";
@@ -90,27 +73,28 @@
// 获取 Store 实例
const simStore = SimAPIStore();

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

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

function startPlay() {
  const selectedItems = filteredTableData.value.filter((item) => item.selected);
  if (selectedItems.length > 0) {
    console.log(
      "选中的项：",
      selectedItems.map((item) => item.name)
    );
  } else {
    console.log("未选中任何项");
  }
  console.log("当前选中的区域：", props.selectedArea);
  console.log("当前选中的雨量数据：", selectedRainfall.value);
  initeWaterPrimitiveView();
  startSimulate();
}
// 表单数据
const formData = reactive({
  name: "方案名称",
  selectedRainfall: "",
  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,
    },
  ],
});

// 工具函数：深拷贝并设置默认选中状态
function deepCloneAndSetSelected(data) {
@@ -128,13 +112,9 @@
    required: true,
  },
});

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

// 模拟不同区域的数据
const areaDataMap = {
@@ -192,31 +172,34 @@
watch(
  () => props.selectedArea,
  (newArea) => {
    if (areaDataMap[newArea]) {
      rainfallData.value = areaDataMap[newArea].rainfallData;
    console.log(newArea.label, "new");
    if (areaDataMap[newArea.label]) {
      rainfallData.value = areaDataMap[newArea.label].rainfallData;
      // 使用深拷贝设置默认选中状态
      tableData.value = deepCloneAndSetSelected(areaDataMap[newArea].tableData);
      selectedRainfall.value = ""; // 清空选中的雨量数据
      tableData.value = deepCloneAndSetSelected(
        areaDataMap[newArea.label].tableData
      );
      formData.selectedRainfall = ""; // 清空选中的雨量数据
    } else {
      rainfallData.value = [];
      tableData.value = {};
      selectedRainfall.value = "";
      formData.selectedRainfall = "";
    }
  },
  { immediate: true } // 立即执行一次，确保初始数据正确
  }
  // { immediate: true } // 立即执行一次，确保初始数据正确
);

// 动态计算表格数据
const filteredTableData = computed(() => {
  return selectedRainfall.value && tableData.value[selectedRainfall.value]
    ? tableData.value[selectedRainfall.value]
  return formData.selectedRainfall && tableData.value[formData.selectedRainfall]
    ? tableData.value[formData.selectedRainfall]
    : [];
});

// 获取当前选中的雨量数据名称
const selectedRainfallName = computed(() => {
  const selected = rainfallData.value.find(
    (item) => item.id === selectedRainfall.value
    (item) => item.id === formData.selectedRainfall
  );
  return selected ? selected.name : "";
});
@@ -226,61 +209,42 @@
  return filteredTableData.value.filter((item) => item.selected);
});

const resetForm = () => {
  formData.name = "";
  formData.selectedRainfall = "";
};

// 打开保存方案对话框
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);
  try {
    formData.geom = props.selectedArea;
    await simStore.addSimCheme(formData);
    resetForm();
    EventBus.emit("close-selectArea");
  } catch (err) {}
};

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

async function startPlay() {
  const selectedItems = filteredTableData.value.filter((item) => item.selected);
  if (selectedItems.length > 0) {
    console.log(
      "选中的项：",
      selectedItems.map((item) => item.name)
    );
  } else {
    console.log("未选中任何项");
  }
  console.log("当前选中的区域：", props.selectedArea);
  // 开始模拟前需要先保存方案
  formData.geom = props.selectedArea;
  await simStore.addSimCheme(formData);
  EventBus.emit("close-selectArea");
};

// 关闭保存方案对话框
const handleClose = () => {
  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), // 设备信息
//   };

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

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

//   // 关闭对话框
//   saveDialogVisible.value = false;
// };
  initeWaterPrimitiveView();
  startSimulate();
}

const toggleDetails = () => {
  isCollapsed.value = !isCollapsed.value;
@@ -321,6 +285,8 @@
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 10px;
  box-sizing: border-box;
}

.input-item {
@@ -343,6 +309,7 @@
.table-container {
  font-size: 12px;
  height: 120px;
  width: 90%;
  overflow-y: auto;
  border: 1px solid #ddd;
  border-radius: 4px;
@@ -372,7 +339,10 @@
.buttons {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-right: 10px;
  box-sizing: border-box;
}

.el-button {