change

wangjuncheng

2025-04-21 51af02271fe8a6d3e2db7bef90df1ea5f571a173

 src/components/monifangzhen/echartInfo.vue

@@ -25,70 +25,21 @@
        <p style="cursor: pointer" @click="debuffClick">威胁对象</p>
        <div class="echartBox">
          <div class="table-container" ref="tableContainer">
            <el-table
              :data="tableData"
              style="width: 100%; font-size: 10px"
              height="100%"
            >
            <el-table :data="tableData" style="width: 100%; font-size: 10px" height="100%" @row-click="handleRowClick">
              <el-table-column label="影响区名称" width="30" align="center">
                <template #default="scope">
                  影响区{{ scope.row.zoneId }}
                </template>
              </el-table-column>
              <el-table-column
                prop="time"
                label="影响时间"
                width="50"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="population"
                label="人员(人)"
                width="23"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="room"
                label="房屋(间)"
                width="23"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="households"
                label="户数(户)"
                width="23"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="property"
                label="财产(万元)"
                width="23"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="maxDepth"
                label="最大水深(米)"
                width="28"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="maxVelocity"
                label="最大流速(m/s)"
                width="35"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="raininess"
                label="雨强(mm/h)"
                width="28"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="warningLevel"
                label="预警等级"
                width="28"
                align="center"
              ></el-table-column>
              <el-table-column prop="time" label="影响时间" width="50" align="center"></el-table-column>
              <el-table-column prop="population" label="人员(人)" width="23" align="center"></el-table-column>
              <el-table-column prop="room" label="房屋(间)" width="23" align="center"></el-table-column>
              <el-table-column prop="households" label="户数(户)" width="23" align="center"></el-table-column>
              <el-table-column prop="property" label="财产(万元)" width="23" align="center"></el-table-column>
              <el-table-column prop="maxDepth" label="最大水深(米)" width="28" align="center"></el-table-column>
              <el-table-column prop="maxVelocity" label="最大流速(m/s)" width="35" align="center"></el-table-column>
              <el-table-column prop="raininess" label="雨强(mm/h)" width="28" align="center"></el-table-column>
              <el-table-column prop="warningLevel" label="预警等级" width="28" align="center"></el-table-column>
            </el-table>
          </div>
        </div>
@@ -99,7 +50,8 @@

<script setup>
import * as echarts from "echarts";
import { ref, onMounted, onBeforeUnmount, nextTick, watch } from "vue";
import { EventBus } from "@/eventBus"; // 引入事件总线
import { ref, onMounted, onBeforeUnmount, nextTick, watch, onUnmounted } from "vue";
import dayjs from "dayjs";
import { getRainfall } from "@/api";

@@ -137,21 +89,43 @@
    }
  }
);

// 重置威胁对象中的数据
// 清除函数=====================================================================
// 监听事件总线的自定义事件
EventBus.on("reset-table", () => {
  resetTable(); // 调用重置表格的函数
});
EventBus.on("clear-echart", () => {
  clearEchartData(); // 调用清除函数
});
// 清除 echart1/2数据的函数
const clearEchartData = () => {
  if (myChart1) {
    const currentOption = myChart1.getOption(); // 获取当前图表配置
    currentOption.series.forEach((series) => {
      series.data = []; // 清空每个系列的数据
    });
    currentOption.xAxis[0].data = [];
    myChart1.setOption(currentOption);
  }
  if (myChart2) {
    const currentOption = myChart2.getOption();
    currentOption.series.forEach((series) => {
      series.data = [];
    });
    currentOption.xAxis[0].data = [];
    myChart2.setOption(currentOption);
  }
};
// 清除威胁对象中的数据
const resetTable = () => {
  // 1. 重置表格数据
  currentIndex.value = 0;
  tableData.value = [];

  // 2. 停止并重新开始数据加载
  if (dataIntervalId) {
    clearInterval(dataIntervalId);
  }
  startAddingData();
};

// 监听父组件传递的数据变化
// 监听父组件传递的数据变化
watch(
  () => props.isDynamicMode,
@@ -201,6 +175,12 @@
  },
  { immediate: true } // 立即执行监听器
);
// 点击数据实现面片闪动的触发函数
function handleRowClick(row) {
  console.log("Row clicked:", row);
  // 触发事件，将当前行的 ID 发送到地图组件
  EventBus.emit("row-clicked", row.id);
}
const listData = cityData.listData;
const data = ref([
  8.16, 15.38, 13.94, 9.46, 86.42, 71.32, 28.52, 25.9, 13.74, 14.54, 15.53,
@@ -1739,8 +1719,6 @@
};

const startAddingData = () => {
  console.log("Starting timer with jsonData length:", jsonData.value.length);

  // 如果定时器已存在，先清除
  if (dataIntervalId) {
    clearInterval(dataIntervalId);
@@ -1851,7 +1829,7 @@
    const [hours, mins] = currentTime.split(':').map(Number);
    let newHours = hours;
    let newMins = mins + 10;
    

    if (newMins >= 60) {
      newMins = 0;
      newHours += 1;
@@ -1859,7 +1837,7 @@
    if (newHours >= 24) {
      newHours = 0;
    }
    

    return `${String(newHours).padStart(2, "0")}:${String(newMins).padStart(2, "0")}`;
  };

@@ -1980,7 +1958,7 @@
          },
          data: data2.value,
          lineStyle: {
            color: "#ffb637", 
            color: "#ffb637",
          },
          label: {
            show: false, // 确保标签不显示
@@ -2134,7 +2112,7 @@
    const [hours, mins] = currentTime.split(':').map(Number);
    let newHours = hours;
    let newMins = mins + 10;
    

    if (newMins >= 60) {
      newMins = 0;
      newHours += 1;
@@ -2142,7 +2120,7 @@
    if (newHours >= 24) {
      newHours = 0;
    }
    

    return `${String(newHours).padStart(2, "0")}:${String(newMins).padStart(2, "0")}`;
  };

@@ -2290,7 +2268,7 @@
      xAxisData.value.push(nextTime);

      // 更新当前索引
      dataIndex.value+= 2;
      dataIndex.value += 2;

      // 更新图表
      updateChart(
@@ -2390,6 +2368,10 @@
  if (myChart2) myChart2.dispose();
  window.removeEventListener("resize", handleResize);
});
onUnmounted(() => {
  EventBus.off("reset-table"); // 移除事件监听
  EventBus.off("clear-echart");
});
</script>

<style lang="less" scoped>