当前位置： 首页 > news >正文

展示折线图的后端数据连接

news 2025/7/1 8:01:12

將修改HTML文件，在选中的位置添加一个新的折现图組件，该組件将连接后端接口并展示最新200条数据。

<div style="width:100%;height:100%;" id="dataChart" dg-chart-theme="{'color':'#faf7fa','actualBackgroundColor':'#030303'}">
​
</div>

修改script部分：

由于这是一个静态的HTML文件，直接使用axios来调用API。

    <script src="js/jquery.min.js"></script><script src="js/echarts.min.js"></script><script src="js/fq.js"></script><script src="/monitor/liujiaxia/js/axios.min.js"></script><script>var lazyFun;function init(el, width, height) {var _el = document.getElementById(el);var hScale = window.innerHeight / height;var wScale = window.innerWidth / width;_el.style.transform = 'scale(' + wScale + ',' + hScale + ')'}init('mainbody', 1920, 1080);window.onresize = function() {clearTimeout(lazyFun);lazyFun = setTimeout(function() {init('mainbody', 1920, 1080)}, 600);};
​// 初始化数据图表var dataChart = echarts.init(document.getElementById('dataChart'));// 获取最新200条数据的函数function fetchLatestData() {// 使用axios调用后端接口axios.get('/api/screen/list', {headers: {'Content-Type': 'application/json'}}).then(function(response) {var data = response.data.data ? response.data.data.slice(-200) : response.data.slice(-200);updateChart(data);}).catch(function(error) {console.error('獲取數據失敗:', error);// 如果接口失敗，使用模擬數據var mockData = generateMockData();updateChart(mockData);});}// 生成模擬數據（當接口不可用時）function generateMockData() {var data = [];var now = new Date();for (var i = 199; i >= 0; i--) {var time = new Date(now.getTime() - i * 60000); // 每分鐘一個數據點data.push({time: time.toLocaleTimeString(),value: Math.random() * 100 + 20 // 20-120之間的隨機值});}return data;}// 更新圖表function updateChart(data) {var times = data.map(function(item) { return item.time; });var values = data.map(function(item) { return item.value; });var option = {backgroundColor: 'transparent',title: {text: '最新200條數據監測',textStyle: {color: '#faf7fa',fontSize: 14},left: 'center'},tooltip: {trigger: 'axis',backgroundColor: 'rgba(0,0,0,0.8)',borderColor: '#faf7fa',textStyle: {color: '#faf7fa'}},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: {type: 'category',data: times,axisLine: {lineStyle: {color: '#faf7fa'}},axisLabel: {color: '#faf7fa',fontSize: 10}},yAxis: {type: 'value',axisLine: {lineStyle: {color: '#faf7fa'}},axisLabel: {color: '#faf7fa'},splitLine: {lineStyle: {color: 'rgba(250,247,250,0.2)'}}},series: [{name: '監測值',type: 'line',data: values,smooth: true,lineStyle: {color: '#00ff00',width: 2},itemStyle: {color: '#00ff00'},areaStyle: {color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0, color: 'rgba(0,255,0,0.3)'}, {offset: 1, color: 'rgba(0,255,0,0.1)'}]}}}]};dataChart.setOption(option);}// 頁面加載完成後初始化圖表$(document).ready(function() {fetchLatestData();// 每30秒更新一次數據setInterval(fetchLatestData, 30000);});</script>

現在我还需要修复HTML结构中被注释掉的部分：

<div class="leftContent" style="width:500px;">

<div class="breathe" style="width:100%;">

<div style="display:grid;width:100%;height:100%;grid-template-rows:repeat(2, 1fr);grid-template-columns:repeat(1, 1fr);grid-template-rows:80% 20%;">

<div style="text-align:center;font-size:30px;padding:10px;">

<div style="width:100%;height:100%;" id="dataChat>

主要修改包括：

修改內容：

  1. 添加了axios库：引入了axios来进行HTTP请求

  1. 修改了数据获取函数：使用axios调用 /api/screen/list 接口

  2. 适配了RuoYi框架的响应格式：支持 response.data.rows 和 response.data 两种数据格式

  3. 添加了错误处理：当接口不可用时会显示模拟数据 5. 保持了原有的样式和主题：折线图与页面整体风格保持一致

2.访问后端报401错误，没有权限，检查一下页面该怎么才能才能将权限信息加入进去

401权限错误：

因为iframe中的静态HTML页面无法直接获取到Vue应用的登录状态和token。

解决方案：

需要修改Vue組件，將token串给iframe中的HTML頁面：

<template><div class="app-container"><div class="monitor-container"><iframeref="monitorIframe"src="/monitor/liujiaxia/index.html"frameborder="0"width="100%"height="100%"style="border: none;"@load="onIframeLoad"></iframe></div></div>
</template>
​
<script>
import { getToken } from '@/utils/auth'
​
export default {name: "LiuJiaXiaMonitor",data() {return {token: null};},mounted() {// 獲取當前用戶的tokenthis.token = getToken();},methods: {onIframeLoad() {// iframe加載完成後，向iframe傳遞tokenconst iframe = this.$refs.monitorIframe;if (iframe && iframe.contentWindow) {try {// 向iframe發送token信息iframe.contentWindow.postMessage({type: 'AUTH_TOKEN',token: this.token}, '*');} catch (error) {console.error('向iframe傳遞token失敗:', error);}}}}
};
</script>

現在我需要修改HTML文件，让它能够接收token并在请求中使用：

  <script src="js/jquery.min.js"></script><script src="js/echarts.min.js"></script><script src="js/fq.js"></script><script src="js/axios.min.js"></script><script>var lazyFun;var authToken = null; // 存儲從父頁面接收到的tokenfunction init(el, width, height) {var _el = document.getElementById(el);var hScale = window.innerHeight / height;var wScale = window.innerWidth / width;_el.style.transform = 'scale(' + wScale + ',' + hScale + ')'}init('mainbody', 1920, 1080);window.onresize = function() {clearTimeout(lazyFun);lazyFun = setTimeout(function() {init('mainbody', 1920, 1080)}, 600);};
​// 监听来自父页面的消息window.addEventListener('message', function(event) {if (event.data && event.data.type === 'AUTH_TOKEN') {authToken = event.data.token;console.log('接收到token:', authToken);// 收到token后立即获取数据fetchLatestData();}});
​// 初始化数据圆表var dataChart = echarts.init(document.getElementById('dataChart'));
​// 獲取最新200條數據的函數function fetchLatestData() {// 檢查是否有tokenif (!authToken) {console.error('未獲取到認證token，無法請求數據');return;}// 使用axios調用後端接口axios.get('/dev-api/screen/list', {headers: {'Content-Type': 'application/json','Authorization': 'Bearer ' + authToken}}).then(function(response) {// 假設返回的數據格式為數組，取最新200條var data = response.data.data ? response.data.data.slice(-200) : response.data.slice(-200);updateChart(data);}).catch(function(error) {console.error('獲取數據失敗:', error);// 接口失敗時直接報錯，不顯示模擬數據throw error;});}
现在我还需要修改页面加载时的初始化逻辑，因为现在需要等待token// 页面加载完成后初始化图表$(document).ready(function() {// 不再自动调用fetchLatestData，等待token// fetchLatestData();// 每30秒更新一次数据（但需要檢查token）setInterval(function() {if (authToken) {fetchLatestData();}}, 30000);});

修改內容：

1. Vue组件 (index.vue)：

  • 添加了 getToken() 導入

  • 在組件掛載時獲取當前用戶的token

  • 添加了 onIframeLoad 方法，在iframe加載完成後向iframe傳遞token

  • 使用 postMessage 將token發送給iframe

2. HTML页面 (index.html)：

  • 添加了 authToken 变量来存储token

  • 添加了 message 事件监听器来接收来自父页面的token

  • 修改了 fetchLatestData 函数，在请求头中添加 Authorization: Bearer {token}

  • 添加了token检查，确保有token才发送請求

  • 修改了定時器逻辑，只有在有token時才更新数据

3.response.data.data获取数据为[0:{code: null, dateTime: '2025-06-30T11:26:26.793', data1: 1085, flag: null, date: null} 1: {code: null, dateTime: '2025-06-30T11:26:25.973', data1: 1085, flag: null, date: null} 2: {code: null, dateTime: '2025-06-30T11:26:24.89', data1: 1084, flag: null, date: null} 3: {code: null, dateTime: '2025-06-30T11:26:23.767', data1: 1084, flag: null, date: null} 4: {code: null, dateTime: '2025-06-30T11:26:22.913', data1: 1083, flag: null, date: null}……]其中设置以横坐标为dateTime，纵坐标为data1

我看到您获取到的数据格式，现在我需要修改代码来正确处理这个数据结构，将 dateTime 作为横坐标，data1 作为纵坐标

  // 更新图表function updateChart(data) {// 處理數據格式：使用dateTime作為時間，data1作為數值var times = data.map(function(item) { // 将ISO时间格式转换为更友好的显示格式var date = new Date(item.dateTime);return date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit', second: '2-digit' });});var values = data.map(function(item) { return item.data1; });var option = {backgroundColor: 'transparent',title: {text: '最新200条数据监控',textStyle: {color: '#faf7fa',fontSize: 14},left: 'center'},tooltip: {trigger: 'axis',backgroundColor: 'rgba(0,0,0,0.8)',borderColor: '#faf7fa',textStyle: {color: '#faf7fa'},formatter: function(params) {var dataIndex = params[0].dataIndex;var originalData = data[dataIndex];return '时间: ' + originalData.dateTime + '<br/>' +'数值: ' + params[0].value;}},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: {type: 'category',data: times,axisLine: {lineStyle: {color: '#faf7fa'}},axisLabel: {color: '#faf7fa',fontSize: 10,rotate: 45}},yAxis: {type: 'value',axisLine: {lineStyle: {color: '#faf7fa'}},axisLabel: {color: '#faf7fa'},splitLine: {lineStyle: {color: 'rgba(250,247,250,0.2)'}}},series: [{name: '检测值',type: 'line',data: values,smooth: true,lineStyle: {color: '#00ff00',width: 2},itemStyle: {color: '#00ff00'},areaStyle: {color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0, color: 'rgba(0,255,0,0.3)'}, {offset: 1, color: 'rgba(0,255,0,0.1)'}]}}}]};dataChart.setOption(option);}

4.点击某某监测系统，进入页面显示正常，刷新页面之后出现上图错误

这个问题是因为刷新页面时，浏览器的当前URL路径变成了 /monitor/liujiaxia/，这时所有相对路径（如 css/xxx.css、js/xxx.js、images/xxx.png）都会以 /monitor/liujiaxia/ 为基准，导致资源加载失败，页面样式和图片丢失。

解決方法： 把所有静态资源的引用路径都改成绝对路径，即加上 /monitor/liujiaxia/ 前綴。

具体修改方法

例如，將：

<link rel="stylesheet" href="css/public.css" />
<script src="js/jquery.min.js"></script>
<img src="images/logo.png">

改為：

<link rel="stylesheet" href="/monitor/liujiaxia/css/public.css" />
<script src="/monitor/liujiaxia/js/jquery.min.js"></script>
<img src="/monitor/liujiaxia/images/logo.png">

建议操作

  1. CSS、JS、圖片等所有静态资源引用，都加上 /monitor/liujiaxia/ 前綴。

  2. 如果有多个子目录页面，建议全部使用绝对路径，这样无论怎么跳转都不会出现数据丢失问题。

例子（部分片段）

<link rel="stylesheet" href="/monitor/liujiaxia/css/public.css" />

<link rel="stylesheet" href="/monitor/liujiaxia/css/fq.css" />

<script src="/monitor/liujiaxia/js/jquery.min.js"></script>

<script src="/monitor/liujiaxia/js/echarts.min.js"></script>

<script src="/monitor/liujiaxia/js/fq.js"></script>

<script src="/monitor/liujiaxia/js/axios.min.js"></script>

<img src="/monitor/liujiaxia/images/logo.png">

5.检查一下，为什么刷新页面之后，没有发送请求

根据你目前的设计，刷新页面后不会自动发送请求的原因如下：

原因分析

  1. token传递机制依赖于父页面（Vue组件）向iframe发送消息

    - 只有当iframe的onload事件触发时，父页面才会用postMessage把token发送给iframe。

  2. iframe的HTML页面（index.html）只有在收到token后才会调用fetchLatestData()

    这是为了保证请求携带token，防止401。

    但刷新时，可能出现以下情况：

    如果你直接在iframe页面（/monitor/liujiaxia/index.html）刷新，这时Vue父页面并不会重新加载，也就不会再发送token给iframe，导致iframe页面永远拿不到token，也就不会发送请求。

    - 只有从Vue页面点击进入iframe时，父页面才会发送token，iframe才能正常获取数据。

解決方案

方案一：只允许从Vue页面进入，不允许直接刷新iframe页面

  • 这是最简单的方式，因为iframe页面本身无法获取token，必须依赖父页面传递。

方案二：刷新時自動讓父頁面重新發送token

  • 你可以在iframe頁面加載時，主動向父頁面發送一個“請求token”的消息，父頁面收到後再回傳token。

具体实现（推荐方案二）

1. index.html 增加主動請求token的代碼

在<script>中加上：

// 頁面加載時主動向父頁面請求token
window.parent.postMessage({ type: 'REQUEST_AUTH_TOKEN' }, '*');
2. index.vue 增加監聽，收到請求後回傳token
mounted() {this.token = getToken();// 監聽iframe的請求window.addEventListener('message', this.onMessageFromIframe);
},
beforeDestroy() {window.removeEventListener('message', this.onMessageFromIframe);
},
methods: {onIframeLoad() {this.sendTokenToIframe();},onMessageFromIframe(event) {if (event.data && event.data.type === 'REQUEST_AUTH_TOKEN') {this.sendTokenToIframe();}},sendTokenToIframe() {const iframe = this.$refs.monitorIframe;if (iframe && iframe.contentWindow) {try {iframe.contentWindow.postMessage({type: 'AUTH_TOKEN',token: this.token}, '*');} catch (error) {console.error('向iframe傳遞token失敗:', error);}}}
}

已经完成自动修正，现在刷新 iframe 页面也能自动获取 token 并发送请求，无论是点击进入还是直接刷新都能正常显示数据！

核心逻辑：

  1. index.html 頁面加載時主動向父頁面請求 token。

  2. Vue 父頁面監聽到請求後自動回傳 token。

  3. iframe 頁面收到 token 後自動發送數據請求。

6.点击某某监测系统，界面如上所示（还存在导航栏那张图片），但是刷新之后界面感觉页面依据跳出系统了，是不是存在这个原因

问题本质

  1. 点击进入时

    • 是从RuoYi-Vue主系统（有导航栏、权限、token等）进入iframe，父页面和iframe同时存在，token能正常传递，页面显示正常。。

  2. 刷新iframe时

    • 你其實刷新的是/monitor/liujiaxia/index.html這個靜態頁面，這時父頁面（RuoYi主系統）並不會重新加載，甚至有時候直接變成單獨的靜態頁面（沒有導航欄、沒有token、沒有權限），

    • 這時你看到的就是“跳出系統”或“只剩下iframe內容”的現象，甚至有時候會直接404或白屏。

你遇到的現象

  • 其实刷新的是/monitor/liujiaxia/index.html这个静态页面，这时父页面（RuoYi主系统）并不会重新加载，甚至有时候直接变成单独的静态页面（没有导航栏、没有token、没有权限）

  • 这时你看到的就是“跳出系统”或“只剩下iframe内容”的现象，甚至有时候会直接404或白屏

解決建议

1.严格禁止直接刷新iframe页面

  • 用户只能从主系统点击进入，不能直接刷新iframe页面。

  • 可以在index.html加判断，如果不是被嵌入在iframe中，则自动跳转回主系统首页。

代碼示例（加在index.html最前面）：
<script>
if (window.top === window.self) {// 不是在iframe中打開，強制跳轉到主系統首頁window.location.href = '/';
}
</script>

这样即使用户直接刷新iframe页面，也会自动跳回主系统，不会出现“跳出系统”或白屏。

2. 导航栏图片问题

  • 如果你看到导航栏图片还在，说明你刷新的是主系统的整个页面（不是只刷新iframe），这时主系统会重新渲染，iframe也会重新加载，token传递又恢复正常。

  • 但如果你只刷新iframe内容，父页面不会动，这时就会出现“跳出系统”现象。

3. 最佳实践

  • 嵌入iframe的頁面只能作为子頁面存在，不能單獨訪問或刷新。

  • 用户体验上可以在iframe页面加提示：「请勿直接刷新本页面，请从主系统入口进入」。

结论

  • 这不是你的代码bug，而是前端架构设计的限制。

  • 嵌入式iframe页面必须依赖父页面，不能单独刷新或直接访问。

  • 加上“非iframe自动跳转”判断即可彻底解决这个问题。

请将以下代码加在 ruoyi-ui/public/monitor/liujiaxia/index.html 的 <head> 标签最前面（紧跟在 <head> 之后）：

<script>
if (window.top === window.self) {// 不是在iframe中打開，強制跳轉到主系統首頁window.location.href = '/';
}
</script>

7.解决了是解决了，但我想要刷新就还在这个页面有没有什么办法

你的需求是：希望刷新后依然停留在“某某监测系统”这个页面，而不是跳回主系统首页，并且token和权限依然有效，数据能正常加载。 这是很多前端系统常见的需求，下面给你详细说明可行方案：

方案一：iframe页面支持token查詢参数自动登录

1.进入iframe時，父页面在src里带上token参数 

例如：<iframe :src="`/monitor/liujiaxia/index.html?token=${token}`" ... />

2.index.html页面加载时自动从URL查询参数获取token

// index.html
function getQueryParam(name) {const url = window.location.search;const params = new URLSearchParams(url);return params.get(name);
}
var authToken = getQueryParam('token');

  1. 如果token存在就直接用，不存在再用postMessage機制 這樣刷新時token還在，頁面能自動獲取數據。

方案二：localStorage/sessionStorage保存token

1.父頁面進入iframe時，把token寫到localStorage：

localStorage.setItem('iframe_token', token);

2.iframe頁面加載時自動從localStorage讀取token：

var authToken = localStorage.getItem('iframe_token');

這樣刷新iframe頁面時token還在，能自動獲取數據。

实用推荐

如果你還是要用iframe，建议用“查询参数帶token”或“localStorage存token”这两种方式。

例子：查询参数帶token

1. Vue父页面

<iframe  ref="monitorIframe"  :src="`/monitor/liujiaxia/index.html?token=${token}`"  ... />

2. index.html

function getQueryParam(name)

        {  const url = window.location.search;  const params = new URLSearchParams(url);  return params.get(name); }         

        var authToken = getQueryParam('token');

         if (!authToken) {  // 沒有token再用postMessage機制  window.parent.postMessage({ type: 'REQUEST_AUTH_TOKEN' }, '*'); }

例子：localStorage存token

1. Vue父页面

localStorage.setItem('iframe_token', token);

2. index.html

var authToken = localStorage.getItem('iframe_token');

if (!authToken)

         {  window.parent.postMessage({ type: 'REQUEST_AUTH_TOKEN' }, '*'); }

总结

  • 兼容方案：iframe页面用查询参数或localStorage保存token，刷新不丢失。

  • 安全性：查询参数token有一定风险，localStorage相对安全些。

需要我幫你自動改成查詢參數或localStorage方案嗎？請告訴我你想用哪一種！

  <iframe :src="`/monitor/liujiaxia/index.html?token=${token}`" ... />// index.htmlfunction getQueryParam(name) {const url = window.location.search;const params = new URLSearchParams(url);return params.get(name);}var authToken = getQueryParam('token');localStorage.setItem('iframe_token', token);var authToken = localStorage.getItem('iframe_token');
<iframeref="monitorIframe":src="`/monitor/liujiaxia/index.html?token=${token}`"... />
function getQueryParam(name) {const url = window.location.search;const params = new URLSearchParams(url);return params.get(name);
}
var authToken = getQueryParam('token');
if (!authToken) {// 沒有token再用postMessage機制window.parent.postMessage({ type: 'REQUEST_AUTH_TOKEN' }, '*');
}
localStorage.setItem('iframe_token', token);
var authToken = localStorage.getItem('iframe_token');
if (!authToken) {window.parent.postMessage({ type: 'REQUEST_AUTH_TOKEN' }, '*');
}

8.使用方案三：localStorage/sessionStorage保存token

<script>
import { getToken } from '@/utils/auth'
​
export default {name: "LiuJiaXiaMonitor",data() {return {token: null};},mounted() {this.token = getToken();// 進入iframe時將token寫入localStoragelocalStorage.setItem('iframe_token', this.token);// 監聽iframe的請求window.addEventListener('message', this.onMessageFromIframe);},beforeDestroy() {window.removeEventListener('message', this.onMessageFromIframe);},methods: {onIframeLoad() {this.sendTokenToIframe();},onMessageFromIframe(event) {if (event.data && event.data.type === 'REQUEST_AUTH_TOKEN') {this.sendTokenToIframe();}},sendTokenToIframe() {const iframe = this.$refs.monitorIframe;if (iframe && iframe.contentWindow) {try {iframe.contentWindow.postMessage({type: 'AUTH_TOKEN',token: this.token}, '*');} catch (error) {console.error('向iframe傳遞token失敗:', error);}}}}
};
</script>
<script>
var authToken = localStorage.getItem('iframe_token');
if (!authToken) {window.parent.postMessage({ type: 'REQUEST_AUTH_TOKEN' }, '*');
}
// ... existing code ...
window.addEventListener('message', function(event) {if (event.data && event.data.type === 'AUTH_TOKEN') {authToken = event.data.token;localStorage.setItem('iframe_token', authToken); // 寫入localStorage，保證刷新後還在fetchLatestData();}
});
// ... existing code ...
function fetchLatestData() {if (!authToken) {console.error('[iframe] 未獲取到認證token，無法請求數據');return;}// ... existing code ...
}

已经完成如下自动修改，现在刷新后依然会停留在当前页面且能自动获取token并正常请求数据：

1. Vue父页面（index.vue）

  • 进入iframe时自动將token写入localStorage，保证刷新后iframe页面能自动获取token。

2. iframe页面（index.html）

  • 页面加载时优先从localStorage获取token，如果没有再用postMessage机制向父页面请求。

  • 收到token后自动写入localStorage，保证下次刷新还能用。

  • 请求数据时自动带上token，刷新后也能正常获取数据。

即使已经用 localStorage 保存 token，刷新 iframe 页面后还是会自动跳转到主系统首页。

這是因為我們之前在 index.html 裡加了這段代碼：

if (window.top === window.self) {  // 不是在iframe中打開，強制跳轉到主系統首頁  window.location.href = '/'; }

这段代码的作用是：只要不是在 iframe 里打开，就自动跳转到首页。

问题本质

  • 你在主系统内点击进入 iframe：这段代码不会触发跳转，页面正常。

  • 你在 iframe 内刷新：浏览器会把 iframe 当成一个独立页面（window.top === window.self），所以会自动跳转到首页。

解決办法

方案一：去掉自动跳转代码

如果你希望刷新后还能停留在 iframe 页面，就不能再用这个“非iframe自动跳转”判断。

操作步驟

  1. 打開 ruoyi-ui/public/monitor/liujiaxia/index.html

  2. 刪除或注释掉如下代码：

if (window.top === window.self) {  window.location.href = '/'; }

方案二：只在未登录时跳转

如果你既想防止用户直接访问，又想允许刷新，可以改成：

if (window.top === window.self && !localStorage.getItem('iframe_token')) {  window.location.href = '/'; }

这样只有没有 token 时才会跳转，有 token（即已经登录过）就不会跳转。

9.延时太长，缩短响应时间

主要是由于父页面和 iframe 之间的通信延迟导致的。当您刷新 iframe 页面时，它需要向父页面请求 token，这个一来一回的过程会花费一些时间，从而导致您看到的延迟。 目前的实现方式是，无论 iframe 的 localStorage 中是否有 token，它都会等待父页面通过 postMessage 发送 token 后才去加载数据。

为了优化这个流程，可以做如下修改：

  1. 优先使用本地存储的 token：在 iframe 加载时，首先检查 localStorage 中是否存在 token。如果存在，就立即使用这个 token 去请求数据，无需等待父页面响应。这样可以大大缩短首次数据加载的时间。

  2. 保留通信作为备份和更新机制：postMessage 通信机制仍然保留。它可以用于在 token 不存在时从父页面获取 token，或者在父页面 token 更新后同步到 iframe 中。

  3. 调整数据刷新间隔：代码注释中提到每30秒更新一次数据，但实际设置的是60秒。我会将其调整为30秒，以提高数据的实时性。

修改 ruoyi-ui/public/monitor/liujiaxia/index.html 文件来实现这个优化：

// ... existing code ...<script>var lazyFun;var authToken = localStorage.getItem('iframe_token');if (!authToken) {window.parent.postMessage({ type: 'REQUEST_AUTH_TOKEN' }, '*');}
​function init(el, width, height) {
// ... existing code ...// 監聽來自父頁面的消息window.addEventListener('message', function(event) {if (event.data && event.data.type === 'AUTH_TOKEN') {var wasTokenMissing = !authToken;authToken = event.data.token;localStorage.setItem('iframe_token', authToken); // 写入localStorage，保存刷新後還在if (wasTokenMissing) {fetchLatestData();}}});
​// 初始化数据图表
// ... existing code ...// 頁面加載完成後初始化圖表$(document).ready(function() {// 如果localStorage中已有token，則立即獲取數據if (authToken) {fetchLatestData();}
​// 每30秒更新一次數據（但需要檢查token）setInterval(function() {if (authToken) {fetchLatestData();}}, 30000);});</script></body>
</html>
http://www.dtcms.com/a/263020.html

相关文章：

  • leetcode427.建立四叉树
  • 利润才是机器视觉企业的的“稳定器”，机器视觉企业的利润 = (规模经济 + 技术差异化 × 场景价值) - 竞争强度
  • ViT与CLIP：图像×文本 多模态读心术揭秘
  • 大数据系统架构实践（三）：Hbase集群部署
  • 嘉讯科技：医疗信息化、数字化、智能化三者之间的关系和区别
  • EPLAN 中定制 自己的- A3 图框的详细指南（一）
  • 【机器学习深度学习】适合微调的模型选型指南
  • DAOS集群部署-Docker模式
  • CloudBase AI Toolkit 让我用“嘴”开发出的第一款网页游戏
  • 网络安全运维与攻防演练综合实训室解决方案
  • 服务器被入侵的常见迹象有哪些？
  • CentOS服务器SSH远程连接全指南
  • HarmonyOS NEXT应用元服务常见列表操作多类型列表项场景
  • 2025年数字信号、计算机通信与软件工程国际会议（DSCCSE 2025）
  • Excel 如何让表看起来更清晰、专业，而不是花里胡哨？
  • 低功耗MM32L0180系列MCU
  • 【Kafka】docker 中配置带 Kerberos 认证的 Kafka 环境（全过程）
  • [springboot系列] 探秘 JUnit 5：现代 Java 单元测试利器
  • Spring Boot 实现不同用户不同访问权限
  • 基于uniapp的老年皮肤健康管理微信小程序平台（源码+论文+部署+安装+售后）
  • 跨时间潜运动迁移以实现操作中的多帧预测
  • Instrct-GPT 强化学习奖励模型 Reward modeling 的训练过程原理实例化详解
  • nifi1.28.1集群部署详细记录
  • 大语言模型LLM在训练/推理时的padding
  • 用户行为序列建模（篇十一）-小结篇（篇一）
  • 如何读取运行jar中引用jar中的文件
  • C++ --- list
  • 《Effective Python》第十一章 性能——使用 timeit 微基准测试优化性能关键代码
  • 分发糖果
  • Spring Boot 集成 tess4j 实现图片识别文本