From f37845dd0a787dd42bf6c72e923433f30fcd8cc3 Mon Sep 17 00:00:00 2001
From: guonan <guonan201020@163.com>
Date: 星期四, 03 七月 2025 15:40:09 +0800
Subject: [PATCH] 实时模拟

---
 src/views/left/KGSimOption/RealTimeSimulation.vue |  549 +++++++++++++++++++++++++++++++++++-------------------
 1 files changed, 353 insertions(+), 196 deletions(-)

diff --git a/src/views/left/KGSimOption/RealTimeSimulation.vue b/src/views/left/KGSimOption/RealTimeSimulation.vue
index 3d5675c..14c3105 100644
--- a/src/views/left/KGSimOption/RealTimeSimulation.vue
+++ b/src/views/left/KGSimOption/RealTimeSimulation.vue
@@ -2,257 +2,408 @@
   <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">
-        <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
+              @change="handleChange"
+              v-model="formData.selectedRainfall"
+              placeholder="璇烽�夋嫨"
+              popper-class="mySelectStyle"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.id"
+                :label="item.name"
+                :value="item.name"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <div class="table-container">
+              <div
+                class="table-row"
+                v-for="(item, index) in shgList"
+                :key="index"
+              >
+                <input type="checkbox" v-model="item.selected" />
+                <span>{{ item.deviceName }}</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="primary" @click="saveSim">淇濆瓨鏂规</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 { ElMessage } from 'element-plus';
+import {
+  ref,
+  watch,
+  defineProps,
+  computed,
+  inject,
+  reactive,
+  onMounted,
+  onUnmounted,
+} from "vue";
+import { ElMessage } from "element-plus";
 import { initeWaterPrimitiveView } from "@/utils/water";
-import { useSimStore } from "@/store/simulation.js"; // 寮曞叆 Store
+import { SimAPIStore } from "@/store/simAPI";
+import { useSimStore } from "@/store/simulation.js";
+import { EventBus } from "@/eventBus"; // 寮曞叆浜嬩欢鎬荤嚎
+import { getDeviceInfoSHG, getYLJData } from "@/api/hpApi";
+import { getSimStart, getSimDataById, getSimresult } from "@/api/trApi";
+import { ControlSchemeType } from "@/assets/js/lib-pixelstreamingfrontend.esm";
 
 // 鑾峰彇 Store 瀹炰緥
+const simAPIStore = SimAPIStore();
+
 const simStore = useSimStore();
-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();
-}
-
-// 宸ュ叿鍑芥暟锛氭繁鎷疯礉骞惰缃粯璁ら�変腑鐘舵��
-function deepCloneAndSetSelected(data) {
-  const newData = {};
-  for (const key in data) {
-    newData[key] = data[key].map(item => ({ ...item, selected: true }));
-  }
-  return newData;
-}
+// 琛ㄥ崟鏁版嵁
+const formData = reactive({
+  name: "鏂规鍚嶇О",
+  selectedRainfall: "",
+  type: 2,
+  gauges: [],
+});
 
 // 鎺ユ敹鐖剁粍浠朵紶閫掔殑 props
 const props = defineProps({
   selectedArea: {
-    type: String,
-    required: true
-  }
+    type: Object,
+    required: true,
+  },
 });
 
-// 瀛愮粍浠跺唴閮ㄧ姸鎬�
-const rainfallData = ref([]); // 闆ㄩ噺鏁版嵁
 const tableData = ref({}); // 琛ㄦ牸鏁版嵁锛堟寜闆ㄩ噺鏁版嵁鍒嗙粍锛�
-const selectedRainfall = ref(''); // 褰撳墠閫変腑鐨勯洦閲忔暟鎹�
 const isCollapsed = ref(false); // 鎺у埗灞曞紑/鏀惰捣鐘舵��
-const saveDialogVisible = ref(false); // 鎺у埗淇濆瓨鏂规瀵硅瘽妗嗘樉绀虹姸鎬�
 
-// 妯℃嫙涓嶅悓鍖哄煙鐨勬暟鎹�
-const areaDataMap = {
-  瀛欒儭娌�: {
-    rainfallData: [
-      { id: '1', name: '姘旇薄瀹炴椂鏁版嵁 - 瀛欒儭娌�' },
-      { id: '2', name: '闆ㄩ噺璁″疄鏃舵暟鎹� - 瀛欒儭娌�' }
-    ],
-    tableData: {
-      '1': [
-        { id: '001', name: '瀛欒儭娌熸皵璞＄珯001' },
-        { id: '002', name: '瀛欒儭娌熸皵璞＄珯002' } 
-      ],
-      '2': [
-        { id: '003', name: '瀛欒儭娌熼洦閲忚003' },
-        { id: '004', name: '瀛欒儭娌熼洦閲忚004' } 
-      ]
+// 闆ㄩ噺璁′笅鎷夋
+const options = ref([
+  { id: "1", name: "姘旇薄瀹炴椂鏁版嵁" },
+  { id: "2", name: "闆ㄩ噺璁″疄鏃舵暟鎹�" },
+]);
+
+// 闆ㄩ噺璁″垪琛�
+const shgList = ref([]);
+// 鎵�鏈夌殑闆ㄩ噺璁″垪琛�
+const rainListNoFilter = ref([]);
+
+// 鑾峰彇鎵�鏈夐洦閲忚鏁版嵁锛堟潵鑷帴鍙ｏ級
+const getRainListAll = () => {
+  // 闆ㄩ噺璁＄被鍨媔d
+  const ids = "1917487171642212354";
+  getDeviceInfoSHG(ids).then((res) => {
+    rainListNoFilter.value = res.data.pageData;
+    // 鏍规嵁褰撳墠閫夋嫨鐨勫尯鍩熻嚜鍔ㄨ繃婊�
+    updateShgListByArea();
+  });
+};
+
+// 鏍规嵁 props.selectedArea.label 杩囨护闆ㄩ噺璁″垪琛紝骞惰缃� selected: true
+const updateShgListByArea = () => {
+  const currentArea = props.selectedArea?.label;
+
+  if (!currentArea) {
+    shgList.value = [];
+    return;
+  }
+
+  shgList.value = rainListNoFilter.value
+    .filter((item) => item.deviceName?.includes(currentArea))
+    .map((device) => ({
+      ...device,
+      selected: true, // 榛樿閫変腑
+    }));
+
+  console.log(shgList.value, "shgList.valueshgList.value");
+};
+
+// 涓嬫媺妗嗛�変腑鍊肩殑琛ㄦ牸鏁版嵁鍙樺寲
+const handleChange = async (item) => {
+  formData.selectedRainfall = item;
+
+  if (item === "闆ㄩ噺璁″疄鏃舵暟鎹�") {
+    if (!props.selectedArea) {
+      ElMessage.warning("璇峰厛閫夋嫨鍖哄煙");
+      shgList.value = [];
+      return;
     }
-  },
-  楸兼按娲炲悗娌�: {
-    rainfallData: [
-      { id: '1', name: '姘旇薄瀹炴椂鏁版嵁 - 楸兼按娲炲悗娌�' },
-      { id: '2', name: '闆ㄩ噺璁″疄鏃舵暟鎹� - 楸兼按娲炲悗娌�' }
-    ],
-    tableData: {
-      '1': [
-        { id: '005', name: '楸兼按娲炲悗娌熸皵璞＄珯005' },
-        { id: '006', name: '楸兼按娲炲悗娌熸皵璞＄珯006' } 
-      ],
-      '2': [
-        { id: '007', name: '楸兼按娲炲悗娌熼洦閲忚007' },
-        { id: '008', name: '楸兼按娲炲悗娌熼洦閲忚008' } 
-      ]
+    // 濡傛灉杩樻病鏈夊姞杞借繃鏁版嵁锛屽垯鍏堣姹傛帴鍙ｅ姞杞�
+    if (rainListNoFilter.value.length === 0) {
+      getRainListAll(); // 鍔犺浇鍏ㄩ儴鏁版嵁鍚庝細鑷姩杩囨护
+    } else {
+      updateShgListByArea(); // 宸叉湁鏁版嵁灏辩洿鎺ヨ繃婊�
     }
-  },
-  浜庡瑗挎矡: {
-    rainfallData: [
-      { id: '1', name: '姘旇薄瀹炴椂鏁版嵁 - 浜庡瑗挎矡' },
-      { id: '2', name: '闆ㄩ噺璁″疄鏃舵暟鎹� - 浜庡瑗挎矡' }
-    ],
-    tableData: {
-      '1': [
-        { id: '009', name: '浜庡瑗挎矡姘旇薄绔�009' },
-        { id: '010', name: '浜庡瑗挎矡姘旇薄绔�010' } 
-      ],
-      '2': [
-        { id: '011', name: '浜庡瑗挎矡闆ㄩ噺璁�011' },
-        { id: '012', name: '浜庡瑗挎矡闆ㄩ噺璁�012' } 
-      ]
-    }
+  } else {
+    shgList.value = [];
   }
 };
 
-// 鏍规嵁 selectedArea 鏇存柊鏁版嵁
+// 鐩戝惉鍖哄煙鍙樺寲锛岄噸鏂拌繃婊ゆ暟鎹�
 watch(
   () => props.selectedArea,
   (newArea) => {
-    if (areaDataMap[newArea]) {
-      rainfallData.value = areaDataMap[newArea].rainfallData;
-      // 浣跨敤娣辨嫹璐濊缃粯璁ら�変腑鐘舵��
-      tableData.value = deepCloneAndSetSelected(areaDataMap[newArea].tableData);
-      selectedRainfall.value = ''; // 娓呯┖閫変腑鐨勯洦閲忔暟鎹�
-    } else {
-      rainfallData.value = [];
-      tableData.value = {};
-      selectedRainfall.value = '';
+    if (!newArea) {
+      ElMessage.warning("璇烽�夋嫨涓�涓尯鍩�");
+      shgList.value = [];
+    } else if (formData.selectedRainfall === "闆ㄩ噺璁″疄鏃舵暟鎹�") {
+      handleChange(formData.selectedRainfall);
     }
   },
-  { immediate: true } // 绔嬪嵆鎵ц涓�娆★紝纭繚鍒濆鏁版嵁姝ｇ‘
+  { immediate: true }
 );
 
-// 鍔ㄦ�佽绠楄〃鏍兼暟鎹�
-const filteredTableData = computed(() => {
-  return selectedRainfall.value && tableData.value[selectedRainfall.value]
-    ? tableData.value[selectedRainfall.value]
-    : [];
-});
+// 閲嶇疆琛ㄥ崟
+const resetForm = () => {
+  formData.name = "";
+  formData.selectedRainfall = "";
+  shgList.value = [];
+};
 
-// 鑾峰彇褰撳墠閫変腑鐨勯洦閲忔暟鎹悕绉�
-const selectedRainfallName = computed(() => {
-  const selected = rainfallData.value.find(item => item.id === selectedRainfall.value);
-  return selected ? selected.name : '';
-});
+const updateSelectedGauges = () => {
+  formData.gauges = shgList.value
+    .filter((item) => item.selected)
+    .map((item) => ({
+      id: item.deviceCode,
+      name: item.deviceName,
+      x: item.longitude,
+      y: item.latitude,
+      r: 10000,
+    }));
+};
 
-// 鑾峰彇褰撳墠閫変腑鐨勮澶囦俊鎭�
-const selectedDevices = computed(() => {
-  return filteredTableData.value.filter(item => item.selected);
-});
+// 淇濆瓨鏂规
+const saveSim = async () => {
+  try {
+    // getYLJData("1101160300070101")
+    updateSelectedGauges();
+    formData.geom = props.selectedArea;
+    await simAPIStore.addSimCheme(formData);
+    resetForm();
+    EventBus.emit("close-selectArea");
+  } catch (err) {}
+};
 
-// 鎵撳紑淇濆瓨鏂规瀵硅瘽妗�
-const openSaveDialog = () => {
-  if (!props.selectedArea || !selectedRainfall.value || selectedDevices.value.length === 0) {
-    ElMessage.warning('璇峰厛閫夋嫨鍖哄煙銆侀洦閲忔暟鎹苟鍕鹃�夎澶�');
+// 娉ㄥ叆妯℃嫙鎿嶄綔鏂规硶
+const { startSimulate, endSimulate } = inject("simulateActions");
+
+// 瀹炴椂妯℃嫙瀹氭椂鍣�
+let pollingInterval = null;
+// 鐢ㄤ簬璁板綍涓婃鏁版嵁鏉℃暟
+let lastDataLength = 0;
+
+let pollingTimer = null; // 鐢ㄤ簬淇濆瓨瀹氭椂鍣ㄥ紩鐢�
+
+async function startPlay() {
+  updateSelectedGauges();
+  formData.geom = props.selectedArea;
+
+  const resApi = await simAPIStore.addSimCheme(formData);
+  const schemeId = resApi.data?.data?.id;
+
+  if (!schemeId) {
+    ElMessage.error("鏂规淇濆瓨澶辫触锛屾湭鑾峰彇鍒版湁鏁� ID");
     return;
   }
-  saveDialogVisible.value = true;
-};
 
-// 鍏抽棴淇濆瓨鏂规瀵硅瘽妗�
-const handleClose = () => {
-  saveDialogVisible.value = false;
-};
+  EventBus.emit("close-selectArea");
 
-// 纭淇濆瓨
-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 loadingMessage = ElMessage({
+    type: "info",
+    message: "姝ｅ湪鍚姩妯℃嫙...",
+    duration: 0,
+    offset: 80,
+  });
 
-  // 璋冪敤 Store 鐨勬柟娉曟坊鍔犳柟妗�
-  simStore.addSchemCard(newScheme);
+  try {
+    await getSimStart(schemeId);
 
-  console.log("淇濆瓨鏂规鎴愬姛", newScheme);
-  ElMessage.success("鏂规宸蹭繚瀛�");
+    // 瀹氫箟涓�涓嚱鏁扮敤浜庤疆璇㈣幏鍙栨暟鎹�
+    const pollForResult = async () => {
+      try {
+        const res = await getSimresult(schemeId);
+        console.log(res.data, "瀹炴椂妯℃嫙 - 杞缁撴灉");
 
-  // 鍏抽棴瀵硅瘽妗�
-  saveDialogVisible.value = false;
-};
+        if (res.code === 200 && res.data.length > 0) {
+          // 鎴愬姛鎷垮埌鏁版嵁
+          loadingMessage.close();
+          handleNewData(res.data, schemeId);
+          startPolling(schemeId);
+
+          // 鉁� 娓呴櫎瀹氭椂鍣�
+          if (pollingTimer) {
+            clearTimeout(pollingTimer);
+            pollingTimer = null;
+          }
+        } else {
+          // 鏁版嵁鏃犳晥锛岀户缁疆璇�
+          pollingTimer = setTimeout(pollForResult, 10 * 1000);
+        }
+      } catch (error) {
+        console.error("璇锋眰妯℃嫙缁撴灉澶辫触", error);
+        pollingTimer = setTimeout(pollForResult, 10 * 1000); // 璇锋眰鍑洪敊涔熺户缁疆璇�
+      }
+    };
+
+    // 棣栨寤惰繜 2 鍒嗛挓寮�濮嬭疆璇�
+    pollingTimer = setTimeout(async () => {
+      await pollForResult(); // 寮�濮嬬涓�娆¤疆璇�
+    }, 3 * 60 * 1000); // 3鍒嗛挓鍚庣涓�娆¤姹�
+  } catch (error) {
+    loadingMessage.close();
+    ElMessage.error("璇锋眰澶辫触锛�" + (error.message || "鏈煡閿欒"));
+    console.error("璋冪敤 getSimStart 鍑洪敊锛�", error);
+
+    if (pollingTimer) {
+      clearTimeout(pollingTimer);
+      pollingTimer = null;
+    }
+  }
+}
+
+// 瀹氭椂浜斿垎閽熻姹�
+function startPolling(schemeId) {
+  stopPolling(); // 纭繚涓嶄細閲嶅鍚姩
+
+  pollingInterval = setInterval(async () => {
+    try {
+      const res = await getSimresult(schemeId);
+
+      if (res.data && res.data.length > 0) {
+        if (res.data.length === lastDataLength) {
+          console.log("涓昏疆璇細鏃犳柊鏁版嵁锛屽垏鎹负 10 绉掗珮棰戣疆璇�");
+
+          clearInterval(pollingInterval);
+          pollingInterval = null;
+
+          startFastPolling(schemeId); // 鍚姩楂橀杞
+        } else {
+          handleNewData(res.data, schemeId);
+        }
+      }
+    } catch (error) {
+      console.error("杞鑾峰彇妯℃嫙缁撴灉澶辫触", error);
+    }
+  }, 5.6 * 60 * 1000); // 姣� 5.5 鍒嗛挓鎵ц涓�娆�
+}
+
+let fastPollingInterval = null;
+// 濡傛灉浜斿垎閽熸病鎷垮埌鏈�鏂扮殑鏁版嵁锛屽垯寮�鍚崄绉掗挓璋冪敤涓�娆★紝鎷垮埌鏈�鏂扮殑鏁版嵁灏卞仠姝�
+function startFastPolling(schemeId) {
+  fastPollingInterval = setInterval(async () => {
+    try {
+      const res = await getSimresult(schemeId);
+
+      if (res.data && res.data.length > 0) {
+        if (res.data.length !== lastDataLength) {
+          console.log("楂橀杞锛氭娴嬪埌鏂版暟鎹紝鎭㈠涓昏疆璇�");
+
+          clearInterval(fastPollingInterval);
+          fastPollingInterval = null;
+
+          handleNewData(res.data, schemeId);
+
+          startPolling(schemeId); // 閲嶆柊鍚姩涓昏疆璇�
+        }
+      }
+    } catch (error) {
+      console.error("楂橀杞鑾峰彇妯℃嫙缁撴灉澶辫触", error);
+    }
+  }, 10 * 1000); // 姣� 10 绉掓墽琛屼竴娆�
+}
+
+// 鎷垮彇鏈�鏂扮殑layer.json瀛樺偍鍒皃inia涓�
+async function handleNewData(dataArray, schemeId) {
+  // 鎷挎湇鍔″悕绉�
+  const res = await getSimDataById(schemeId);
+  simStore.setSelectedScheme(res.data[0]); // 鏇存柊鏂规鏁版嵁
+
+  const latestItem = dataArray[dataArray.length - 1];
+  const currentLength = dataArray.length;
+
+  if (currentLength <= lastDataLength) {
+    console.log("鏈疆鏃犳柊鏁版嵁锛堥暱搴︽湭鍙樺寲锛�");
+    return;
+  }
+
+  // 鏇存柊鏍囪瘑
+  lastDataLength = currentLength;
+
+  // 鎵ц鏇存柊閫昏緫
+  console.log("妫�娴嬪埌鏂版暟鎹紝鏇存柊涓�...");
+  console.log(latestItem, "last");
+  simStore.layerDate = latestItem;
+  initeWaterPrimitiveView();
+
+  try {
+    startSimulate();
+  } catch (error) {
+    console.error("璋冪敤 startSimulate 鍑洪敊锛�", error);
+  }
+}
+
+// 鍋滄杞鍑芥暟
+function stopPolling() {
+  if (pollingInterval) {
+    clearInterval(pollingInterval);
+    pollingInterval = null;
+  }
+
+  if (fastPollingInterval) {
+    clearInterval(fastPollingInterval);
+    fastPollingInterval = null;
+  }
+
+  console.log("杞宸插仠姝�");
+}
+
+EventBus.on("close-time", () => {
+  stopPolling();
+});
 
 const toggleDetails = () => {
   isCollapsed.value = !isCollapsed.value;
 };
 
 const futurePredictions = () => {
-  console.log('鏈潵棰勬祴鎸夐挳琚偣鍑�');
+  console.log("鏈潵棰勬祴鎸夐挳琚偣鍑�");
 };
+
+onUnmounted(() => {
+  EventBus.off("close-time");
+  stopPolling();
+});
 </script>
 
 <style scoped>
@@ -285,6 +436,8 @@
   display: flex;
   flex-direction: column;
   gap: 10px;
+  padding-right: 10px;
+  box-sizing: border-box;
 }
 
 .input-item {
@@ -307,6 +460,7 @@
 .table-container {
   font-size: 12px;
   height: 120px;
+  width: 96%;
   overflow-y: auto;
   border: 1px solid #ddd;
   border-radius: 4px;
@@ -336,10 +490,13 @@
 .buttons {
   margin-top: 20px;
   display: flex;
+  justify-content: flex-end;
   gap: 10px;
+  padding-right: 10px;
+  box-sizing: border-box;
 }
 
 .el-button {
   flex: 1;
 }
-</style>
\ No newline at end of file
+</style>

--
Gitblit v1.9.3