Merge branch 'master' of http://103.135.160.14:9034/r/NslWeb

wangjuncheng

2025-04-22 5caf72a91b204c78cdc91ce116beae5d445dc73d

Merge branch 'master' of http://103.135.160.14:9034/r/NslWeb

 src/components/monifangzhen/schemeCard.vue

@@ -345,6 +345,7 @@

/////////////////////// è°ƒç”¨æŽ¥å£ï¼ˆä½¿ç”¨æ—¶æ‰“开） ///////////////////////
import { getData, getSimData, deleteSimData } from "@/api/trApi.js";

onMounted(() => {
  getScheme();
  getData({ type:2 })
@@ -358,8 +359,31 @@

const props = defineProps({
  deleteSim: Boolean, // æŽ¥æ”¶çˆ¶ç»„件传递的函数
  showAddIns: Boolean,
});

// èŽ·å–仿真列表
const schemeList = ref([]);
async function getScheme() {
  try {
    const res = await getSimData();
    schemeList.value = res.data;
  } catch (error) {
    console.error("Error fetching data:", error);
  }
}

// æ–°å»ºæ–¹æ¡ˆå®Œæˆä¹‹åŽæ–¹æ¡ˆåˆ—表需实时刷新
watch(
  () => props.showAddIns,
  (newVal) => {
    if (newVal == false) {
      getScheme();
    }
  }
);

// åˆ é™¤ä»¿çœŸåˆ—表
watch(
  () => props.deleteSim,
  (newVal) => {
@@ -370,17 +394,6 @@
    }
  }
);

const schemeList = ref([]);

async function getScheme() {
  try {
    const res = await getSimData();
    schemeList.value = res.data;
  } catch (error) {
    console.error("Error fetching data:", error);
  }
}

const deleteSim = () => {
  ElMessageBox.confirm("确定要删除该方案吗?", "删除方案", {

 src/store/simAPI.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,131 @@
import { defineStore } from 'pinia'
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { createSimData } from '@/api/trApi';

export const SimAPIStore = defineStore('SimAPI', () => {
    const selectTab = ref("行政区划仿真")

    const isLoading = ref(false)

    const handleClickTab = (data) => {
        selectTab.value = data
    }

    // èŽ·å–区域类型
    const getAreaType = (tabName) => {
        switch (tabName) {
            case '行政区划仿真': return 1
            case '重点区域仿真': return 2
            case '重点沟仿真': return 3
            default: return 0
        }
    }

    // èŽ·å–降雨类型
    const getRainType = (tabName) => {
        switch (tabName) {
            case '预测模拟': return 1
            case '实时模拟': return 2
            case '历史模拟': return 3
            default: return 0
        }
    }

    // éªŒè¯è¡¨å•
    const validateForm = (forms) => {
        if (!forms?.name) {
            ElMessage.warning('请输入方案名称')
            return false
        }
        if (!forms.name) {
            ElMessage.warning('请确保表单均已填写')
            return false
        }
        return true
    }

    // å¼¹çª—
    const openSaveDialog = async (forms) => {
        if (!validateForm(forms)) return

        try {
            await ElMessageBox.confirm('确定要保存当前方案吗?', '新建方案', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
            })
            // ç”¨æˆ·ç¡®è®¤åŽæ‰§è¡Œä¿å­˜
            await saveScheme(forms)
        } catch (error) {
            if (error !== 'cancel') {
                console.error('保存出错:', error)
                ElMessage.error('保存过程中出现错误')
            } else {
                ElMessage.info('已取消保存')
            }
        }
    }

    const saveScheme = async (forms) => {
        if (isLoading.value) {
            ElMessage.warning('正在保存，请稍候...')
            return
        }

        isLoading.value = true

        try {
            const params = {
                areaType: getAreaType(selectTab.value),
                createTime: Date.now(),
                name: forms.name,
                type: getRainType(forms.type),
                status: 0,
                data: forms.data
            }

            const response = await createSimData(params)
            ElMessage.success('方案保存成功')
            return response
        } catch (error) {
            console.error('保存失败:', error)
            ElMessage.error('保存失败: ' + (error.message || '请稍后重试'))
            throw error
        } finally {
            isLoading.value = false
        }
    }


    // // æ–°å»ºæ–¹æ¡ˆ
    // const createSimulation = async (forms) => {
    //     console.log(forms, 'ffffffff')

    //     const params = {
    //         areaType: getAreaType(selectTab),
    //         createTime: Date.now(),
    //         name: forms.name,
    //         // 1为预测模拟，2为实时模拟，3为历史模拟
    //         type: getRainType(forms.type),
    //         // 0为创建仿真，1为预处理，2为分析中，10为完成，20为出错
    //         status: 0,
    //         data: forms.data
    //     }
    //     console.log(params, 'params')

    //     try {
    //         await createSimData(params)
    //     } catch (error) {
    //         console.error('创建仿真失败:', error)
    //     }
    // }
    return {
        // çŠ¶æ€
        selectTab,
        isLoading,
        // æ–¹æ³•
        handleClickTab,
        openSaveDialog,
        saveScheme,
    }
})

 src/store/simulation.js

@@ -3,7 +3,7 @@
import { ref } from 'vue'
import { createSimData } from '@/api/trApi';

export const useSimStore = defineStore('ui', () => {
export const useSimStore = defineStore('simulation', () => {
    // æ‰€æœ‰UI状态
    const navigationShow = ref(true)
    const leftShow = ref(false)
@@ -25,7 +25,6 @@
    const showLayerTree = ref(true)
    const showDangerAssess = ref(false)
    const schemCard = ref([])
    const selectTab = ref("行政区划仿真")
    const backToHome = ref(false)

    // åˆå§‹åŒ–方法
@@ -47,42 +46,6 @@
        showResultAssess.value = false
        showDangerAssess.value = false
        schemCard.value = []
        selectTab.value = "行政区划仿真"

    }

    const handleClickTab = (data) => {
        selectTab.value = data
    }

    // æ–°å»ºæ–¹æ¡ˆ
    const createSimulation = async (forms) => {
        const getAreaType = (tabName) => {
            switch (tabName) {
                case '行政区划仿真':
                    return 1
                case '重点区域仿真':
                    return 2
                case '重点沟仿真':
                    return 3
                default:
                    return 0 // è‡ªå®šä¹‰
            }
        }
        const params = {
            areaType: getAreaType(selectTab),
            createTime: Date.now(),
            name: forms.name,
            // 1为预测模拟，2为实时模拟，3为历史模拟
            type: 1,
            // 0为创建仿真，1为预处理，2为分析中，10为完成，20为出错
            status: 0,
        }
        try {
            await createSimData(params)
        } catch (error) {
            console.error('创建仿真失败:', error)
        }
    }

    // æ–¹æ¡ˆç›¸å…³
@@ -172,7 +135,8 @@
        showLayerTree,
        showDangerAssess,
        schemCard,
        selectTab,
        // selectTab,
        backToHome,
        handleNavClick,
        init,
        startYHGL,
@@ -183,9 +147,8 @@
        addSchemCard,
        removeSchemCardItem,
        updateSchemCardItem,
        handleClickTab,
        createSimulation,
        backToHome,
        // handleClickTab,
        // createSimulation,
        setBackToHome
    }
})

 src/views/left/CitySim.vue

@@ -107,34 +107,6 @@
        <el-button type="primary" @click="openSaveDialog">保存方案</el-button>
        <el-button type="success" @click="startPlay">开始模拟</el-button>
      </div>
      <!---------------------------- ä¿å­˜æ–¹æ¡ˆå¯¹è¯æ¡†ï¼ˆæŽ¥å£ç‰ˆæœ¬éœ€åˆ é™¤ï¼‰ -------------------------------->
      <!-- <el-dialog
        v-model="saveDialogVisible"
        :title="dialogTitle"
        width="50%"
        :before-close="handleClose"
        custom-class="custom-dialog"
      >
        <div class="dialog-content">
          <p><strong>模拟类型：</strong>{{ dialogTitle }}</p>
          <p v-if="disForm === '行政区划仿真'">
            <strong>行政区域：</strong>{{ forms.eare }}
          </p>
          <p v-if="disForm === '重点区域仿真'">
            <strong>重点区域：</strong>{{ forms.eares }}
          </p>
          <p><strong>降雨量：</strong>{{ forms.rainfall }} mm</p>
          <p><strong>降雨时长：</strong>{{ forms.duration }} h</p>
          <p><strong>降雨强度：</strong>{{ forms.intensity }} mm/h</p>
          <p><strong>上传文件：</strong>{{ uploadedFilesText }}</p>
        </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>
  </div>
</template>
@@ -145,13 +117,12 @@
import Papa from "papaparse";
import { ElMessage, ElMessageBox } from "element-plus";
import { initeWaterPrimitiveView } from "@/utils/water";
import { useSimStore } from "@/store/simulation";
import { SimAPIStore } from "@/store/simAPI";

const simStore = useSimStore();
const simStore = SimAPIStore();

// æ³¨å…¥çˆ¶ç»„件提供的方法
const { startSimulate, endSimulate } = inject("simulateActions");
const saveDialogVisible = ref(false); // æŽ§åˆ¶ä¿å­˜æ–¹æ¡ˆå¯¹è¯æ¡†çš„显示状态（接口版本删除）
// è¡¨å•æ•°æ®
const forms = reactive({
  name: "",
@@ -203,8 +174,13 @@
  return forms.fileList.map((file) => file.name).join(", ") || "无";
});

////////////////////////////////////// æŽ¥å£ç‰ˆæœ¬éœ€åˆ é™¤//////////////////////////////////////
// // æ‰“开保存方案对话框
//////////////////////////////////接口版本启用//////////////////////////////////
const openSaveDialog = async () => {
  await simStore.openSaveDialog(forms);
};

// const isLoading = ref(false);
// // ä¿å­˜æ–¹æ¡ˆ
// const openSaveDialog = () => {
//   if (
//     !forms.rainfall ||
@@ -216,73 +192,36 @@
//     ElMessage.warning("请先填写所有必填项");
//     return;
//   }
//   saveDialogVisible.value = true;
// }
// const handleClose = () => {
//   saveDialogVisible.value = false;
//   ElMessageBox.confirm("确定要保存当前方案吗?", dialogTitle.value, {
//     confirmButtonText: "确定",
//     cancelButtonText: "取消",
//     type: "warning",
//   })
//     .then(confirmSave)
//     .catch(() => {
//       ElMessage({
//         type: "info",
//         message: "已取消保存",
//       });
//     });
// };

// // ç¡®è®¤ä¿å­˜
// const confirmSave = () => {
//   console.log("保存方案成功", {
//     æ¨¡æ‹Ÿç±»åž‹: dialogTitle.value,
//     è¡Œæ”¿åŒºåŸŸ: simStore.selectTab === "行政区划仿真" ? forms.eare : null,
//     é‡ç‚¹åŒºåŸŸ: simStore.selectTab === "重点区域仿真" ? forms.eares : null,
//     é™é›¨é‡: `${forms.rainfall} mm`,
//     é™é›¨æ—¶é•¿: `${forms.duration} h`,
//     é™é›¨å¼ºåº¦: `${forms.intensity} mm/h`,
//     ä¸Šä¼ æ–‡ä»¶: forms.fileList.map((file) => file.name),
//   });
//   ElMessage.success("方案已保存");
//   saveDialogVisible.value = false;
//   resetForm();
// 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 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; // ç»“束加载状态
  }
};
//////////////////////////////////接口版本启用//////////////////////////////////

// é‡ç½®è¡¨å•
@@ -410,7 +349,6 @@
  }
  return true;
};


// å¼€å§‹æ¨¡æ‹Ÿ
function startPlay() {

 src/views/left/KGSimOption/HistorySimulation.vue

@@ -10,30 +10,54 @@
      <div class="input-group">
        <div class="input-item">
          <label>历史雨情:</label>
          <el-select v-model="rainfallHistory" placeholder="请选择" popper-class="mySelectStyle">
            <el-option v-for="item in HistoricalRainData" :key="item.id" :label="item.name"
              :value="item.id"></el-option>
          <el-select
            v-model="rainfallHistory"
            placeholder="请选择"
            popper-class="mySelectStyle"
          >
            <el-option
              v-for="item in HistoricalRainData"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </div>
      </div>
      <div class="input-group">
        <div class="input-item">
          <label>方案名称:</label>
          <el-input v-model="schemeName" type="text" placeholder="请输入"></el-input>
          <el-input
            v-model="schemeName"
            type="text"
            placeholder="请输入"
          ></el-input>
        </div>
        <div class="input-item">
          <label>降雨总量:</label>
          <el-input v-model="totalRainfall" type="number" placeholder="请输入"></el-input>
          <el-input
            v-model="totalRainfall"
            type="number"
            placeholder="请输入"
          ></el-input>
          <span>mm</span>
        </div>
        <div class="input-item">
          <label>降雨强度:</label>
          <el-input v-model="rainfallIntensity" type="number" placeholder="请输入"></el-input>
          <el-input
            v-model="rainfallIntensity"
            type="number"
            placeholder="请输入"
          ></el-input>
          <span>mm/h</span>
        </div>
        <div class="input-item">
          <label>降雨时长:</label>
          <el-input v-model="rainfallDuration" type="number" placeholder="请输入"></el-input>
          <el-input
            v-model="rainfallDuration"
            type="number"
            placeholder="请输入"
          ></el-input>
          <span>h</span>
        </div>
      </div>
@@ -48,8 +72,13 @@
    </div>

    <!-- ä¿å­˜æ–¹æ¡ˆå¯¹è¯æ¡† -->
    <el-dialog v-model="saveDialogVisible" title="保存方案" width="50%" :before-close="handleClose"
      custom-class="custom-dialog">
    <el-dialog
      v-model="saveDialogVisible"
      title="保存方案"
      width="50%"
      :before-close="handleClose"
      custom-class="custom-dialog"
    >
      <div class="dialog-content">
        <p><strong>方案名称：</strong>{{ schemeName }}</p>
        <p><strong>所选重点沟：</strong>{{ props.selectedArea }}</p>
@@ -71,10 +100,11 @@

<script setup>
import { ref, computed, inject } from "vue";
import { ElMessage } from "element-plus";
import { ElMessage, ElMessageBox } from "element-plus";
import { initeWaterPrimitiveView } from "@/utils/water";
import { useSimStore } from "@/store/simulation.js"; // å¼•å…¥ Store
import { getRainfallData  } from "@/api/hpApi.js"
import { getRainfallData } from "@/api/hpApi.js";

// èŽ·å– Store å®žä¾‹
const simStore = useSimStore();
// æµ‹è¯•èŽ·å–雨量数据
@@ -99,7 +129,7 @@
// æ•°æ®ç»‘定
const rainfallHistory = ref("2"); // é»˜è®¤é€‰ä¸­ç¬¬äºŒé¡¹
const totalRainfall = ref(50); // é™é›¨æ€»é‡
const schemeName = ref('方案名称'); // æ–¹æ¡ˆåç§°
const schemeName = ref("方案名称"); // æ–¹æ¡ˆåç§°
const rainfallIntensity = ref(70); // é™é›¨å¼ºåº¦
const rainfallDuration = ref(5); // é™é›¨æ—¶é•¿
const isCollapsed = ref(false); // æŽ§åˆ¶è¯¦æƒ…的展开/收起状态
@@ -140,7 +170,47 @@
    ElMessage.warning("请先填写所有必填项");
    return;
  }
  saveDialogVisible.value = true;
  ElMessageBox.confirm("确定要保存当前方案吗?", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(confirmSave)
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消保存",
      });
    });
  // saveDialogVisible.value = true;
};
const params = {
  name: schemeName.value,
  type: "历史模拟",
  data: {
    rainFall: totalRainfall.value,
    rainfallIntensity: rainfallIntensity.value,
    rainfallDuration: rainfallDuration.value,
    rainfallHistory: rainfallHistory.value,
  },
};
const isLoading = ref(false);
const confirmSave = async () => {
  if (isLoading.value) {
    ElMessage.warning("正在保存，请稍候...");
    return; // é˜²æ­¢é‡å¤æäº¤
  }
  isLoading.value = true; // å¼€å§‹åŠ è½½çŠ¶æ€
  try {
    await simStore.createSimulation(params); // è°ƒç”¨ Store ä¸­çš„保存方法
    ElMessage.success("保存成功");
    saveDialogVisible.value = true; // æ˜¾ç¤ºä¿å­˜å¯¹è¯æ¡†ï¼ˆå¦‚果需要）
  } catch (error) {
    console.error("保存失败:", error);
    ElMessage.error("保存失败，请稍后重试");
  } finally {
    isLoading.value = false; // ç»“束加载状态
  }
};

// å…³é—­ä¿å­˜æ–¹æ¡ˆå¯¹è¯æ¡†
@@ -148,26 +218,26 @@
  saveDialogVisible.value = false;
};

// ç¡®è®¤ä¿å­˜
const confirmSave = () => {
  // æž„造新的方案对象
  const newScheme = {
    id: Date.now().toString(), // å”¯ä¸€ ID
    area: props.selectedArea, // åŒºåŸŸ
    name: selectedRainfallName.value, // æ–¹æ¡ˆåç§°
    createTime: new Date().toISOString(), // åˆ›å»ºæ—¶é—´
    taskStatus: 1, // åˆå§‹çŠ¶æ€ä¸ºæœªå¼€å§‹
    totalRainfall: totalRainfall.value, // é™é›¨æ€»é‡
    schemeName: schemeName.value, // é™é›¨æ€»é‡
    rainfallIntensity: rainfallIntensity.value, // é™é›¨å¼ºåº¦
    rainfallDuration: rainfallDuration.value, // é™é›¨æ—¶é•¿
  };
// // ç¡®è®¤ä¿å­˜
// const confirmSave = () => {
//   // æž„造新的方案对象
//   const newScheme = {
//     id: Date.now().toString(), // å”¯ä¸€ ID
//     area: props.selectedArea, // åŒºåŸŸ
//     name: selectedRainfallName.value, // æ–¹æ¡ˆåç§°
//     createTime: new Date().toISOString(), // åˆ›å»ºæ—¶é—´
//     taskStatus: 1, // åˆå§‹çŠ¶æ€ä¸ºæœªå¼€å§‹
//     totalRainfall: totalRainfall.value, // é™é›¨æ€»é‡
//     schemeName: schemeName.value, // é™é›¨æ€»é‡
//     rainfallIntensity: rainfallIntensity.value, // é™é›¨å¼ºåº¦
//     rainfallDuration: rainfallDuration.value, // é™é›¨æ—¶é•¿
//   };

  simStore.addSchemCard(newScheme);
  ElMessage.success("方案已保存");
  // å…³é—­å¯¹è¯æ¡†
  saveDialogVisible.value = false;
};
//   simStore.addSchemCard(newScheme);
//   ElMessage.success("方案已保存");
//   // å…³é—­å¯¹è¯æ¡†
//   saveDialogVisible.value = false;
// };

// å¼€å§‹æ¨¡æ‹Ÿ
function startPlay() {

 src/views/left/Left.vue

@@ -4,14 +4,20 @@
      <span>仿真推演方案</span>
    </div>
    <div class="left-content">
      <div style="
      <div
        style="
          display: flex;
          justify-content: space-evenly;
          padding: 8px 8px 8px 0px;
        "
        v-if="btnShow">
        <el-button style="width: 45%;" @click="handleClick">新建仿真方案</el-button>
        <el-button style="width: 45%;" @click="deleteSelectedScheme">删除仿真方案</el-button>
        v-if="btnShow"
      >
        <el-button style="width: 45%" @click="handleClick"
          >新建仿真方案</el-button
        >
        <el-button style="width: 45%" @click="deleteSelectedScheme"
          >删除仿真方案</el-button
        >
      </div>
      <!-- <schemeCard ref="schemeCardRef" @start="start" @end="end" @reset="reset" @closeBtn="handleBackFromParent" /> -->
      <schemeCard
@@ -20,6 +26,7 @@
        @end="end"
        @reset="reset"
        :deleteSim="deleteSim"
        :showAddIns="showAddIns"
        @closeBtn="handleBackFromParent"
      />
    </div>
@@ -296,8 +303,8 @@
}
function handleBackFromParent(value) {
  if (value === false) {
    btnShow.value = false
  } else btnShow.value = true
    btnShow.value = false;
  } else btnShow.value = true;
}
function initDevicePoint() {
  list.forEach((item) => {

 src/views/left/Simulation.vue

@@ -29,9 +29,9 @@
import citySim from "./CitySim.vue";
import kgSim from "./KGSim.vue";

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

const simStore = useSimStore();
const simStore = SimAPIStore();

// å®šä¹‰è¿”回事件
const emits = defineEmits(["back"]);
@@ -44,7 +44,7 @@

// æ ‡ç­¾ç‚¹å‡»äº‹ä»¶
const handleClick = (tab) => {
  simStore.handleClickTab(tab.props.label);
  SimAPIStore.handleClickTab(tab.props.label);
};

// è¿”回上一级