NslWeb.git - Gitblit

<template>
  <div class="listCard">
    <!-- <div>方案数量: {{ simStore.schemCard.length }}</div> -->
    <el-card
      v-if="!schemeInfoShow"
      v-for="(item, key) in schemeList"
      :key="key"
      :class="{ selected: selectedId === item.id }"
      @click="selectScheme(item.id)"
    >
      <div>
        <p>方案名称 : {{ item.name }}</p>
        <p>创建时间 : {{ formatTime(item.createTime) }}</p>
        <p>
          方案状态 :
          <span style="color: aquamarine">
            {{ item.result === "-1" ? "出错" : item.result || "创建仿真" }}
          </span>
        </p>
      </div>
      <div class="cardMenu">
        <div style="float: right; margin-top: 3px">
          <el-button size="small" @click="setSchemClick(item)"
            >方案详情</el-button
          >
          <el-button
            size="small"
            v-show="item.type !== 2"
            @click="startPlay(item)"
            >进入模拟</el-button
          >
          <!--  :disabled="item.status !== 2" -->
        </div>
      </div>
    </el-card>
    <schemeInfo
      v-if="schemeInfoShow"
      :selectedScheme="currentScheme"
      @back="handleBack"
    />
    <flowRateTab v-if="schemeInfoShow"> 123 </flowRateTab>
  </div>
  <Message
    @close="close"
    class="mess"
    v-show="messageShow"
    :mesData="mesData"
  />
</template>
 
<script setup>
import { EventBus } from "@/eventBus"; // 引入事件总线
import { onMounted, ref, watch, defineEmits, onUnmounted } from "vue";
import dayjs from "dayjs";
import { initeWaterPrimitiveView } from "@/utils/water";
import Message from "@/components/tools/Message.vue";
import { useSimStore } from "@/store/simulation.js";
import { SimAPIStore } from "@/store/simAPI";
import schemeInfo from "@/components/monifangzhen/schemeInfo.vue";
import flowRateTab from "@/components/monifangzhen/flowRateTab.vue";
import { ElMessage, ElMessageBox } from "element-plus";
const emit = defineEmits(["start", "end", "reset", "closeBtn"]);
import {
  getRegionData,
  getSimData,
  deleteSimData,
  getSimStart,
  getSimDataById,
} from "@/api/trApi.js";
 
const simStore = useSimStore();
const simAPIStore = SimAPIStore();
// 选中的方案 ID
const selectedId = ref(null);
// 当前选中的方案信息
const currentScheme = ref(null);
// 选中方案
function selectScheme(id) {
  selectedId.value = id;
}
 
function formatTime(time) {
  return dayjs(time).format("YYYY-MM-DD HH:mm:ss");
}
 
const messageShow = ref(false);
 
const schemeInfoShow = ref(false);
 
const mesData = ref(null);
 
function setSchemClick(item) {
  mesData.value = item;
  messageShow.value = true;
}
 
function close() {
  messageShow.value = false;
}
 
// 实时模拟五分钟请求一次的定时器
const realTimeSimInterval = ref(null);
 
async function startPlay(item) {
  console.log(item, "item");
  if (item.status === 2) {
    ElMessage.warning("当前方案正在分析中,无法进入模拟！");
    return;
  }
 
  if (item.status === 20) {
    ElMessage.error("当前方案分析出错,请重新新建方案！");
    return;
  }
 
  // 如果是已完成的方案（status == 10）
  if (item.status === 10) {
    const flyHeight = item.areaType === 1 ? 100000 : 50000;
    simStore.setSelectedScheme(item);
 
    if (item.areaType === 1) {
      EventBus.emit("select-geom", {
        geom: item.geom,
        flyHeight,
        shouldShowFill: false,
      });
    } else {
      initeWaterPrimitiveView();
    }
 
    currentScheme.value = item;
    schemeInfoShow.value = true;
    emit("closeBtn", false);
    emit("start");
    return;
  }
 
  // 新建方案，没有 status 和 serviceName 且 type != 2
  if (!item.status && !item.serviceName && item.type !== 2) {
    try {
      await getSimStart(item.id);
      const res = await getSimDataById(item.id);
 
      item.serviceName = res.data[0]?.serviceName || null;
      simStore.setSelectedScheme(item);
      ElMessage.warning("当前方案正在分析中,请稍后再模拟");
      getScheme();
    } catch (e) {
      console.error("获取模拟数据失败：", e);
    }
    return;
  }
 
  // 处理 type == 2 的情况（实时模拟）
  if (item.type === 2) {
    // 清除已有定时器，防止重复启动
    if (realTimeSimInterval.value) {
      clearInterval(realTimeSimInterval.value);
    }
 
    // 即刻执行一次
    await executeRealTimeSimulation(item);
 
    // 每隔 5 分钟执行一次
    realTimeSimInterval.value = setInterval(() => {
      executeRealTimeSimulation(item);
    }, 5 * 60 * 1000); // 5分钟
 
    return;
  }
 
  // 默认情况：有服务名称
  simStore.setSelectedScheme(item);
}
 
// 封装实时模拟的异步操作
async function executeRealTimeSimulation(item) {
  try {
    const ress = await getSimStart(item.id);
 
    const res = await getSimDataById(item.id);
 
    item.serviceName = res.data[0]?.serviceName || null;
    simStore.setSelectedScheme(item);
    getScheme();
 
    if (ress.code === 200) {
      simStore.layerDate = ress.data;
      initeWaterPrimitiveView();
      emit("start");
    }
  } catch (e) {
    console.error("实时模拟获取模拟数据失败：", e);
  }
}
 
function handleBack(value) {
  if (value === false) {
    schemeInfoShow.value = false;
  }
}
 
const handleHideSchemeInfo = () => {
  schemeInfoShow.value = false;
  emit("closeBtn", true);
};
 
// 注册事件监听器
EventBus.on("hide-schemeInfo", handleHideSchemeInfo);
 
const schemeList = ref([]);
let intervalId = null; // 用于存储 setInterval 的返回值
// 获取方案列表
async function getScheme() {
  try {
    const res = await getSimData();
    schemeList.value = res.data;
 
    const shouldStop = schemeList.value.every(
      (item) =>
        item.result == "创建仿真" ||
        item.result == "完成" ||
        item.result == "-1"
    );
    simAPIStore.shouldPoll = !shouldStop; // 修改 Pinia 状态
    // 3. 如果需要停止
    if (shouldStop) {
      if (intervalId) {
        clearInterval(intervalId);
        intervalId = null;
        console.log("停止轮询");
      }
      return;
    }
  } catch (error) {
    console.error("Error fetching data:", error);
  }
}
 
// 监听 shouldPoll 状态变化
watch(
  () => simAPIStore.shouldPoll,
  (isStarted) => {
    console.log(isStarted, "定时器");
    if (isStarted) {
      getScheme(); // 首次立即获取一次
      intervalId = setInterval(getScheme, 60 * 1000); // 每隔一分钟执行
    }
    // else if (intervalId !== null) {
    //   clearInterval(intervalId);
    //   intervalId = null;
    // }
  },
  { immediate: true }
);
 
const props = defineProps({
  deleteSim: Boolean, // 接收父组件传递的函数
  showAddIns: Boolean,
});
 
// 新建方案完成之后方案列表需实时刷新
watch(
  () => props.showAddIns,
  (newVal) => {
    if (newVal == false) {
      getScheme();
    }
  }
);
// 删除仿真列表
watch(
  () => props.deleteSim,
  (newVal) => {
    if (newVal) {
      deleteSim();
      emit("reset");
    }
  }
);
const deleteSim = () => {
  // 确保有选中的方案
  if (!selectedId.value) {
    ElMessage({
      type: "warning",
      message: "请先选择一个方案进行删除！",
    });
    return;
  }
  const selectedScheme = schemeList.value.find(
    (item) => item.id === selectedId.value
  );
  const schemeName = selectedScheme ? selectedScheme.name : "未知方案";
  ElMessageBox.confirm(`确定要删除方案 "${schemeName}" 吗?`, "删除方案", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      deleteSimData(selectedId.value).then((res) => {
        getScheme();
      });
      ElMessage({
        type: "success",
        message: `方案 "${schemeName}" 删除成功`,
      });
    })
    .catch(() => {});
};
 
onMounted(() => {
  getScheme(); // 页面加载时立即获取数据
});
 
onUnmounted(() => {
  EventBus.off("hide-schemeInfo", handleHideSchemeInfo);
 
  if (intervalId !== null) {
    clearInterval(intervalId); // 清除定时器
    intervalId = null; // 重置 intervalId
  }
});
</script>
 
<style lang="less" scoped>
.listCard {
  flex: none !important;
  height: calc(100% - 46px);
  width: 100%;
  overflow: auto;
  color: white !important;
  font-size: 14px;
 
  p {
    color: white !important;
  }
}
 
.cardMenu {
  padding-bottom: 30px;
  color: white !important;
 
  :last-child {
    float: right;
  }
}
 
.listCard-btn {
  float: right;
  background: url("@/assets/img/left/cardbtn.png") no-repeat;
  width: 105px;
  height: 35px;
  text-align: center;
  line-height: 35px;
  margin-left: 10px;
  cursor: pointer;
}
 
.listCard-btn-ac {
  background: url("@/assets/img/left/cardbtnac.png") no-repeat;
}
 
.listCard-btn:hover {
  background: url("@/assets/img/left/cardbtnac.png") no-repeat;
}
 
.mess {
  position: absolute;
  top: 10%;
  left: 100%;
  // top: 160px;
  // left: 460px;
}
 
/deep/.el-card__body {
  padding: 10px 5px 5px 10px;
  box-sizing: border-box;
}
 
/deep/.el-card {
  margin: 5px 10px 0px 5px;
  border: 1px solid #437a74;
  background: rgba(0, 0, 0, 0) !important;
}
 
/deep/.el-card:hover {
  scale: (1.02);
  border: 1px solid #acf1dd;
}
 
.selected {
  border: 2px solid #acf1dd !important;
  /* 选中时的边框样式 */
}
</style>