<template>
|
<div class="right">
|
<div class="right-top">
|
<span>模拟结果</span>
|
</div>
|
<div class="echartsBox" id="layerBox">
|
<div class="echartCont">
|
<p style="cursor: pointer" @click="rainClick">降雨数据</p>
|
<div class="echartBox">
|
<div id="echarts1" style="width: 100%; height: 100%"></div>
|
</div>
|
</div>
|
<div class="echartCont">
|
<p>断面模拟</p>
|
<div class="echartBox">
|
<div id="echarts2" style="width: 100%; height: 100%"></div>
|
</div>
|
</div>
|
<div class="echartCont">
|
<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%"
|
@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>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import * as echarts from "echarts";
|
import { EventBus } from "@/eventBus"; // 引入事件总线
|
import {
|
ref,
|
onMounted,
|
onBeforeUnmount,
|
nextTick,
|
watch,
|
onUnmounted,
|
} from "vue";
|
import dayjs from "dayjs";
|
import { getRainfall } from "@/api";
|
|
let dataIntervalId = null; // 表格定时器 ID
|
const jsonData = ref([]); // JSON 数据
|
const tableData = ref([]); // 表格数据
|
const currentIndex = ref(0); // 当前加载索引
|
const isPaused = ref(false); // 是否暂停标志
|
const chart1Data = ref(null); //降雨数据
|
const chart2Data = ref(null); //断面数据
|
let intervalId1 = null; //降雨数据定时器
|
let intervalId2 = null; //断面数据定时器
|
|
// 根据时间轴匹配的x轴的时间显示
|
const nowTime = ref(null);
|
|
const props = defineProps({
|
isDynamicMode: {
|
type: Boolean,
|
},
|
isFinish: {
|
type: Boolean,
|
},
|
});
|
|
watch(
|
() => props.isFinish,
|
(newVal) => {
|
if (!newVal) {
|
resetTable();
|
chart1Data.value.resetLoading();
|
chart1Data.value.startUpdating(1000); // 每隔 1 秒更新一次
|
chart2Data.value.resetLoading();
|
chart2Data.value.startUpdating(1000); // 每隔 1 秒更新一次
|
}
|
}
|
);
|
// 清除函数=====================================================================
|
// 监听事件总线的自定义事件
|
EventBus.on("reset-table", () => {
|
resetTable(); // 调用重置表格的函数
|
});
|
|
// 清除echarts图表
|
EventBus.on("clear-echart", () => {
|
chart1Data.value.resetLoading();
|
chart2Data.value.resetLoading();
|
});
|
|
// 清除威胁对象中的数据
|
const resetTable = () => {
|
currentIndex.value = 0;
|
tableData.value = [];
|
if (dataIntervalId) {
|
clearInterval(dataIntervalId);
|
}
|
startAddingData();
|
};
|
|
// 暂停时停止所有的更新
|
const handleHideSchemeInfo = () => {
|
// 停止所有动态更新
|
if (intervalId1) {
|
clearInterval(intervalId1);
|
chart1Data.value.stopUpdating(); // 每隔 1 秒更新一次
|
intervalId1 = null;
|
}
|
if (intervalId2) {
|
clearInterval(intervalId2);
|
chart2Data.value.stopUpdating(); // 每隔 1 秒更新一次
|
intervalId2 = null;
|
}
|
if (dataIntervalId) {
|
clearInterval(dataIntervalId);
|
dataIntervalId = null;
|
}
|
};
|
|
// 监听时间轴结束模拟
|
EventBus.on("hide-schemeInfo", handleHideSchemeInfo);
|
|
// 监听父组件传递的数据变化
|
watch(
|
() => props.isDynamicMode,
|
(isEnabled) => {
|
isPaused.value = !isEnabled;
|
|
if (isEnabled) {
|
// 如果启用了动态模式
|
if (jsonData.value.length === 0) {
|
getDangerInfo(); // 加载初始数据
|
} else {
|
startAddingData(); // 开始添加数据
|
}
|
|
// 启动第一个图表的定时更新
|
if (!intervalId1 && chart1Data.value) {
|
intervalId1 = setInterval(() => {
|
chart1Data.value.startUpdating(1000);
|
}, 10);
|
}
|
|
// 启动第二个图表的定时更新
|
if (!intervalId2 && chart2Data.value) {
|
intervalId2 = setInterval(() => {
|
chart2Data.value.startUpdating(1000); // 每隔 1 秒更新一次
|
}, 10);
|
}
|
} else {
|
handleHideSchemeInfo();
|
}
|
},
|
{ 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,
|
9.17, 0, 0.09, 0.86, 8.15, 44.8, 21.86, 6.2, 4.98, 2.82, 2.36, 3.1, 1.06,
|
]);
|
const rainChangeShow = ref(false);
|
const tableContainer = ref(null);
|
|
let myChart1 = null;
|
let myChart2 = null;
|
|
// 威胁对象数据
|
const getDangerInfo = async () => {
|
try {
|
const response = await fetch(
|
"/json/listMaxInfluenceArea_wgs84_output.json"
|
);
|
const result = await response.json();
|
console.log("Loaded JSON data:", result);
|
if (result && result.data && Array.isArray(result.data.items)) {
|
jsonData.value = result.data.items;
|
console.log("jsonData is an array with length:", jsonData.value.length);
|
startAddingData();
|
} else {
|
console.error(
|
"Invalid JSON format: 'data.items' is missing or not an array!"
|
);
|
}
|
} catch (error) {
|
console.error("Error fetching data:", error);
|
}
|
};
|
|
const startAddingData = () => {
|
// 如果定时器已存在，先清除
|
if (dataIntervalId) {
|
clearInterval(dataIntervalId);
|
}
|
|
dataIntervalId = setInterval(() => {
|
if (isPaused.value) {
|
console.log("Loading is paused. Waiting for resume...");
|
return; // 如果暂停，则不执行后续逻辑
|
}
|
|
if (currentIndex.value < jsonData.value.length) {
|
const newItem = jsonData.value[currentIndex.value];
|
tableData.value.unshift(newItem);
|
scrollToTop();
|
currentIndex.value++;
|
} else {
|
console.log("All items added.");
|
clearInterval(dataIntervalId);
|
}
|
}, 2000);
|
};
|
|
const scrollToTop = () => {
|
nextTick(() => {
|
if (tableContainer.value) {
|
tableContainer.value.scrollTop = 0;
|
}
|
});
|
};
|
|
const rainClick = () => {
|
rainChangeShow.value = !rainChangeShow.value;
|
let desc = { func_name: "RainChange", visibility: rainChangeShow.value };
|
ps.emitMessage(desc);
|
};
|
|
const debuffClick = () => {
|
// Assuming you have access to parent components in a different way in Vue 3
|
// You might need to use provide/inject or props/emits instead
|
console.log("Debuff click");
|
};
|
|
const chartssize = (container, charts) => {
|
if (!charts || !charts.style) return;
|
const style = window.getComputedStyle(container);
|
charts.style.width = style.width;
|
charts.style.height = style.height;
|
};
|
|
// 时间轴时间截取处理
|
const syncTimeWithTimeline = () => {
|
// 2025-05-24 00:25
|
// // 将时间字符串转换为分钟数 (格式: "YYYY-MM-DD mm:ss")
|
const timeParts = nowTime.value.split(" ");
|
const timeOnly = timeParts[1]; // 获取 "mm:ss" 部分
|
return timeOnly;
|
};
|
|
//初始化并配置第一个ECharts图表（降雨数据图表）
|
const setEcharts1 = () => {
|
// 获取DOM元素并初始化ECharts实例
|
const chartDom = document.getElementById("echarts1");
|
myChart1 = echarts.init(chartDom);
|
|
// 响应式数据定义
|
let rainfallData = ref([]); // 存储从JSON加载的原始降雨数据
|
let data1 = ref([]); // 存储降雨数据（mm/min）
|
let data2 = ref([]); // 存储累计雨量数据（mm）
|
let xAxisData = ref([]); // 存储x轴时间数据
|
let updateInterval = null; // 定时器ID
|
let dataIndex = ref(0); // 当前数据索引
|
|
// 从JSON文件加载降雨数据
|
const loadJsonData = async () => {
|
try {
|
// 发起网络请求获取数据
|
const response = await fetch("/json/rainfall.json");
|
const result = await response.json();
|
|
// 验证数据格式
|
if (result && result.data && Array.isArray(result.data)) {
|
rainfallData.value = result.data;
|
|
// 计算数据的最大值用于y轴刻度
|
const maxValue = Math.max(
|
...rainfallData.value.map((item) => item.value)
|
);
|
const maxTotal = Math.max(
|
...rainfallData.value.map((item) => item.total)
|
);
|
|
// 初始化时间轴和第一个数据点
|
xAxisData.value = ["00:00"]; // 起始时间
|
if (rainfallData.value.length > 0) {
|
data1.value.push(rainfallData.value[0].value); // 添加第一个降雨数据
|
data2.value.push(rainfallData.value[0].total); // 添加第一个累计雨量
|
}
|
|
// 计算y轴参数并更新图表
|
const yAxis1Params = calculateYAxisParams(maxValue); // 左侧y轴（降雨数据）
|
const yAxis2Params = calculateYAxisParams(maxTotal); // 右侧y轴（累计雨量）
|
updateChart(yAxis1Params, yAxis2Params);
|
} else {
|
console.error(
|
"Invalid JSON format: 'data' is missing or not an array!"
|
);
|
}
|
} catch (error) {
|
console.error("Error fetching data:", error);
|
}
|
};
|
|
/**
|
* 计算y轴参数（生成均匀分布的刻度）
|
* @param {number} max - 数据最大值
|
* @returns {Object} 包含max和interval的对象
|
*/
|
const calculateYAxisParams = (max) => {
|
const step = Math.ceil(max / 3); // 将范围分成3等份（产生4个刻度点）
|
return {
|
max: step * 3, // 确保最大值是步长的整数倍
|
interval: step, // 刻度间隔
|
};
|
};
|
|
/**
|
* 更新图表配置
|
* @param {Object} yAxis1Params - 左侧y轴参数
|
* @param {Object} yAxis2Params - 右侧y轴参数
|
*/
|
const updateChart = (yAxis1Params, yAxis2Params) => {
|
const option = {
|
animation: false, // 禁用动画提高性能
|
|
// 提示框配置
|
tooltip: {
|
trigger: "axis", // 坐标轴触发
|
axisPointer: {
|
// 指示器样式
|
type: "cross", // 十字准星指示器
|
crossStyle: { color: "#fff" }, // 白色线条
|
},
|
},
|
|
// 图表布局
|
grid: {
|
left: "1%",
|
right: "1%",
|
bottom: "1%", // 边距
|
containLabel: true, // 包含坐标轴标签
|
},
|
|
// 图例配置
|
legend: {
|
data: ["降雨数据", "累计雨量"], // 系列名称
|
textStyle: { color: "#fff" }, // 白色文字
|
right: "10px", // 靠右对齐
|
},
|
|
// x轴配置（时间轴）
|
xAxis: [
|
{
|
type: "category", // 类目轴
|
data: xAxisData.value, // 时间数据
|
axisPointer: { type: "shadow" }, // 阴影指示器
|
axisLabel: {
|
color: "#fff", // 白色标签
|
rotate: 0, // 不旋转
|
},
|
},
|
],
|
|
// y轴配置（双y轴）
|
yAxis: [
|
// 左侧y轴（降雨数据）
|
{
|
type: "value",
|
name: "单位:mm",
|
min: 0, // 最小值为0
|
max: yAxis1Params.max, // 动态计算的最大值
|
interval: yAxis1Params.interval, // 动态计算的间隔
|
axisLabel: {
|
formatter: "{value}",
|
color: "#fff",
|
align: "right", // 标签右对齐
|
},
|
nameTextStyle: {
|
padding: [0, 0, 0, 30], // 名称右侧内边距
|
color: "#fff",
|
},
|
splitLine: { show: false }, // 不显示网格线
|
},
|
// 右侧y轴（累计雨量）
|
{
|
type: "value",
|
name: "单位:mm",
|
min: 0,
|
max: yAxis2Params.max,
|
interval: yAxis2Params.interval,
|
axisLabel: {
|
formatter: "{value}",
|
color: "#fff",
|
align: "left", // 标签左对齐
|
},
|
nameTextStyle: {
|
padding: [0, 10, 0, 0], // 名称左侧内边距
|
color: "#fff",
|
},
|
splitLine: { show: true }, // 显示网格线
|
},
|
],
|
|
// 数据系列配置
|
series: [
|
// 柱状图（降雨数据）
|
{
|
name: "降雨数据",
|
type: "bar", // 柱状图
|
tooltip: {
|
valueFormatter: (value) => value + " mm/min", // 提示框单位
|
},
|
data: data1.value, // 绑定数据
|
itemStyle: { color: "#3268fe" }, // 蓝色柱状图
|
label: { show: false, color: "#fff" }, // 不显示数据标签
|
},
|
// 折线图（累计雨量）
|
{
|
name: "累计雨量",
|
type: "line", // 折线图
|
yAxisIndex: 1, // 使用第二个y轴
|
tooltip: {
|
valueFormatter: (value) => value + " mm", // 提示框单位
|
},
|
data: data2.value, // 绑定数据
|
lineStyle: { color: "#ffb637" }, // 黄色线条
|
label: { show: false, color: "#fff" }, // 不显示数据标签
|
},
|
],
|
};
|
|
// 应用配置到图表
|
myChart1.setOption(option);
|
};
|
|
// 定时更新图表数据
|
const updateData = () => {
|
// 检查是否还有数据需要显示
|
if (dataIndex.value < rainfallData.value.length) {
|
const newItem = rainfallData.value[dataIndex.value];
|
|
// 添加新数据
|
data1.value.push(newItem.value); // 添加降雨数据
|
data2.value.push(newItem.total); // 添加累计雨量
|
xAxisData.value.push(syncTimeWithTimeline()); // 添加时间点
|
|
dataIndex.value++; // 递增索引
|
|
// 更新图表（保持原有y轴范围）
|
updateChart(
|
{
|
max: myChart1.getOption().yAxis[0].max,
|
interval: myChart1.getOption().yAxis[0].interval,
|
},
|
{
|
max: myChart1.getOption().yAxis[1].max,
|
interval: myChart1.getOption().yAxis[1].interval,
|
}
|
);
|
} else {
|
console.log("All data has been displayed.");
|
stopUpdating(); // 数据全部显示完成后停止更新
|
}
|
};
|
|
//启动定时更新
|
const startUpdating = (interval = 1000) => {
|
if (!updateInterval) {
|
updateInterval = setInterval(updateData, interval);
|
console.log("Started updating...");
|
}
|
};
|
|
//停止定时更新
|
const stopUpdating = () => {
|
if (updateInterval) {
|
clearInterval(updateInterval);
|
updateInterval = null;
|
console.log("Stopped updating...");
|
}
|
};
|
|
//重置图表数据和状态
|
const resetLoading = () => {
|
stopUpdating(); // 停止当前更新
|
|
// 重置状态
|
dataIndex.value = 0;
|
data1.value = [];
|
data2.value = [];
|
xAxisData.value = ["00:00"];
|
|
// 重新加载第一个数据点（如果有数据）
|
if (rainfallData.value.length > 0) {
|
data1.value.push(rainfallData.value[0].value);
|
data2.value.push(rainfallData.value[0].total);
|
}
|
|
// 重新绘制图表（保持原有y轴范围）
|
updateChart(
|
{
|
max: myChart1.getOption().yAxis[0].max,
|
interval: myChart1.getOption().yAxis[0].interval,
|
},
|
{
|
max: myChart1.getOption().yAxis[1].max,
|
interval: myChart1.getOption().yAxis[1].interval,
|
}
|
);
|
|
console.log("Reset loading...");
|
};
|
|
// 初始化：加载数据
|
loadJsonData();
|
|
// 返回公共接口
|
return {
|
myChart1, // 图表实例
|
startUpdating, // 启动更新方法
|
stopUpdating, // 停止更新方法
|
resetLoading, // 重置方法
|
};
|
};
|
|
const setEcharts2 = () => {
|
const chartDom = document.getElementById("echarts2");
|
myChart2 = echarts.init(chartDom);
|
|
let jsonData = ref([]); // 存储从 JSON 文件中加载的数据
|
let data1 = ref([]); // 实时流量数据
|
let data2 = ref([]); // 累计流量数据
|
let xAxisData = ref([]); // 动态时间轴
|
let updateInterval = null; // 定时器变量
|
let dataIndex = ref(0); // 当前数据索引，用于按顺序更新
|
|
// 加载 JSON 数据
|
const loadJsonData = async () => {
|
try {
|
const response = await fetch("/json/于家西沟断面下数据.json");
|
const result = await response.json();
|
if (result && result.data && Array.isArray(result.data)) {
|
jsonData.value = result.data;
|
|
// 计算 value 和 total 的最大值
|
const maxValue = Math.max(...jsonData.value.map((item) => item.value));
|
const maxTotal = Math.max(...jsonData.value.map((item) => item.total));
|
|
// 初始化时间轴（从00:00开始）
|
xAxisData.value = ["00:00"] || syncTimeWithTimeline(); // 初始时间点
|
|
// 初始化图表（仅加载第一个数据点）
|
if (jsonData.value.length > 0) {
|
data1.value.push(jsonData.value[0].value); // 实时流量
|
data2.value.push(jsonData.value[0].total); // 累计流量
|
}
|
|
// 根据最大值设置 y 轴参数并初始化图表
|
const yAxis1Params = calculateYAxisParams(maxValue);
|
const yAxis2Params = calculateYAxisParams(maxTotal);
|
updateChart(yAxis1Params, yAxis2Params);
|
} else {
|
console.error(
|
"Invalid JSON format: 'data' is missing or not an array!"
|
);
|
}
|
} catch (error) {
|
console.error("Error fetching data:", error);
|
}
|
};
|
|
// 计算 y 轴参数（最多有 4 个点）
|
const calculateYAxisParams = (max) => {
|
const step = Math.ceil(max / 3); // 最多有 4 个点（包括 0），所以分成 3 份
|
return {
|
max: step * 3, // 确保最大值是步长的整数倍
|
interval: step,
|
};
|
};
|
|
// 更新图表配置
|
const updateChart = (yAxis1Params, yAxis2Params) => {
|
const option = {
|
animation: false, // 禁用动画
|
tooltip: {
|
trigger: "axis",
|
axisPointer: {
|
type: "cross",
|
crossStyle: {
|
color: "#fff",
|
},
|
},
|
},
|
grid: {
|
left: "1%",
|
right: "1%",
|
bottom: "1%",
|
containLabel: true,
|
},
|
legend: {
|
data: ["实时流量", "累计流量"],
|
textStyle: {
|
color: "#fff",
|
},
|
right: "10px", // 将图例靠右贴边
|
},
|
xAxis: [
|
{
|
type: "category",
|
data: xAxisData.value, // 使用动态时间轴
|
axisPointer: {
|
type: "shadow",
|
},
|
axisLabel: {
|
color: "#fff",
|
rotate: 0, // 将旋转角度设置为0，取消倾斜
|
},
|
},
|
],
|
yAxis: [
|
{
|
type: "value",
|
name: "单位:m³/min",
|
min: 0,
|
max: yAxis1Params.max,
|
interval: yAxis1Params.interval,
|
axisLabel: {
|
formatter: "{value}",
|
color: "#fff",
|
align: "right", // 将标签右对齐
|
},
|
nameTextStyle: {
|
padding: [0, 0, 0, 20], // 在右侧添加一些内边距
|
color: "#fff",
|
},
|
splitLine: {
|
show: false, // 关闭左侧 y 轴的横线
|
},
|
},
|
{
|
type: "value",
|
name: "单位:m³",
|
min: 0,
|
max: yAxis2Params.max,
|
interval: yAxis2Params.interval,
|
axisLabel: {
|
formatter: "{value}",
|
color: "#fff",
|
align: "left", // 将标签右对齐
|
},
|
nameTextStyle: {
|
padding: [0, 10, 0, 0], // 在右侧添加一些内边距
|
color: "#fff",
|
},
|
splitLine: {
|
show: true, // 保留右侧 y 轴的横线
|
},
|
},
|
],
|
series: [
|
{
|
name: "实时流量",
|
type: "bar",
|
tooltip: {
|
valueFormatter: function (value) {
|
return value + " m³/min";
|
},
|
},
|
data: data1.value,
|
itemStyle: {
|
color: "blue", // 设置柱状图颜色为蓝色
|
},
|
label: {
|
show: false,
|
color: "#fff",
|
},
|
},
|
{
|
name: "累计流量",
|
type: "line",
|
yAxisIndex: 1,
|
tooltip: {
|
valueFormatter: function (value) {
|
return value + " m³";
|
},
|
},
|
data: data2.value,
|
lineStyle: {
|
color: "#ffb637", // 设置折线图线条颜色为黄色
|
},
|
label: {
|
show: false, // 确保标签不显示
|
color: "#fff",
|
},
|
},
|
],
|
};
|
|
myChart2.setOption(option);
|
};
|
|
// 定义按顺序更新数据的方法
|
const updateData = () => {
|
if (dataIndex.value < jsonData.value.length) {
|
// 获取当前索引的数据项
|
const newItem = jsonData.value[dataIndex.value];
|
data1.value.push(newItem.value); // 添加实时流量
|
data2.value.push(newItem.total); // 添加累计流量
|
|
const nextTime = syncTimeWithTimeline();
|
xAxisData.value.push(nextTime);
|
|
// 更新当前索引
|
dataIndex.value += 2;
|
|
// 更新图表
|
updateChart(
|
{
|
max: myChart2.getOption().yAxis[0].max,
|
interval: myChart2.getOption().yAxis[0].interval,
|
}, // 左侧 y 轴保持不变
|
{
|
max: myChart2.getOption().yAxis[1].max,
|
interval: myChart2.getOption().yAxis[1].interval,
|
} // 右侧 y 轴保持不变
|
);
|
} else {
|
console.log("All data has been displayed.");
|
stopUpdating(); // 停止定时更新
|
}
|
};
|
|
// 启动定时更新
|
const startUpdating = (interval = 1000) => {
|
if (!updateInterval) {
|
updateInterval = setInterval(updateData, interval); // 每隔 interval 毫秒更新一次数据
|
console.log("Started updating...");
|
}
|
};
|
|
// 停止定时更新
|
const stopUpdating = () => {
|
if (updateInterval) {
|
clearInterval(updateInterval);
|
updateInterval = null;
|
console.log("Stopped updating...");
|
}
|
};
|
|
// 重置加载
|
const resetLoading = () => {
|
stopUpdating(); // 停止定时器
|
dataIndex.value = 0; // 重置数据索引
|
data1.value = []; // 清空实时流量数据
|
data2.value = []; // 清空累计流量数据
|
xAxisData.value = ["00:00"]; // 重置时间轴
|
|
// 重新加载第一个数据点
|
if (jsonData.value.length > 0) {
|
data1.value.push(jsonData.value[0].value); // 实时流量
|
data2.value.push(jsonData.value[0].total); // 累计流量
|
}
|
|
// 重新绘制图表
|
updateChart(
|
{
|
max: myChart2.getOption().yAxis[0].max,
|
interval: myChart2.getOption().yAxis[0].interval,
|
}, // 左侧 y 轴保持不变
|
{
|
max: myChart2.getOption().yAxis[1].max,
|
interval: myChart2.getOption().yAxis[1].interval,
|
} // 右侧 y 轴保持不变
|
);
|
|
console.log("Reset loading...");
|
};
|
|
// 初始化加载 JSON 数据
|
loadJsonData();
|
|
return {
|
myChart2,
|
startUpdating,
|
stopUpdating,
|
resetLoading,
|
};
|
};
|
|
const handleResize = () => {
|
const chartBox1 = document.getElementById("echarts1");
|
const chartBox2 = document.getElementById("echarts2");
|
if (chartBox1 && myChart1) chartssize(chartBox1, myChart1);
|
if (chartBox2 && myChart2) chartssize(chartBox2, myChart2);
|
};
|
|
onMounted(() => {
|
// 时间轴时间的变化
|
EventBus.on("time-update", (time) => {
|
nowTime.value = time;
|
});
|
chart1Data.value = setEcharts1();
|
chart2Data.value = setEcharts2();
|
myChart1 = chart1Data.value.myChart1;
|
myChart2 = chart2Data.value.myChart2;
|
window.addEventListener("resize", handleResize);
|
});
|
|
onBeforeUnmount(() => {
|
nowTime.value = null;
|
if (intervalId1) clearInterval(intervalId1);
|
if (intervalId2) clearInterval(intervalId2);
|
if (dataIntervalId) clearInterval(dataIntervalId);
|
if (myChart1) myChart1.dispose();
|
if (myChart2) myChart2.dispose();
|
window.removeEventListener("resize", handleResize);
|
});
|
onUnmounted(() => {
|
EventBus.off("reset-table"); // 移除事件监听
|
EventBus.off("clear-echart");
|
EventBus.off("time-update"); // 清理事件监听
|
});
|
</script>
|
|
<style lang="less" scoped>
|
@import url("../../assets/css/right.css");
|
@import url("../../assets/css/infobox.css");
|
|
:deep(.el-table td),
|
:deep(.el-table th) {
|
padding: 0 !important;
|
}
|
|
:deep(.el-table .cell) {
|
line-height: normal !important;
|
padding: 0 1px !important;
|
}
|
|
.table-container {
|
margin-left: 20px;
|
max-height: 100%;
|
overflow-y: auto;
|
}
|
|
.warp {
|
height: calc(27% - 1px);
|
width: 95%;
|
position: absolute;
|
margin: 0 auto;
|
overflow: hidden;
|
color: white;
|
|
ul {
|
list-style: none;
|
padding: 0;
|
margin: 0 auto;
|
|
li,
|
a {
|
display: block;
|
height: 30px;
|
line-height: 30px;
|
display: flex;
|
justify-content: space-between;
|
font-size: 15px;
|
}
|
|
.date {
|
width: 85px;
|
}
|
}
|
}
|
</style>
|
