写一个基于 Echarts + Python Flask框架动态实时大屏——油井加热炉可视化平台,要求如下:有多个加热炉设备,设备的信息存储到csv文件中,要在大屏中实时显示加热炉的最新温度,并生成一个折线图,在折线图中能查询到不同时间段的温度曲线,在加热炉的温度中设置一个阈值,超过这个阈值能给出提示信息,请给出完整代码
时间: 2024-04-09 21:32:38 浏览: 31
当然,这是一个完整的基于Echarts和Python Flask框架的动态实时大屏油井加热炉可视化平台的示例代码。请参考以下代码:
```python
# app.py
from flask import Flask, render_template, jsonify, request
import csv
import time
app = Flask(__name__)
# 读取CSV文件中的设备信息
def read_csv():
devices = []
with open('devices.csv', 'r') as file:
reader = csv.reader(file)
for row in reader:
devices.append({
'device_id': row[0],
'timestamp': row[1],
'temperature': float(row[2])
})
return devices
# 获取最新温度数据
def get_latest_temperature():
devices = read_csv()
latest_device = max(devices, key=lambda x: x['timestamp'])
return latest_device['temperature']
# 获取时间段内的温度曲线数据
def get_temperature_curve(start_time, end_time):
devices = read_csv()
curve_data = []
for device in devices:
if start_time <= device['timestamp'] <= end_time:
curve_data.append({
'timestamp': device['timestamp'],
'temperature': device['temperature']
})
return curve_data
# 判断温度是否超过阈值
def check_threshold(temperature, threshold):
if temperature > threshold:
return True
else:
return False
# 首页路由
@app.route('/')
def index():
return render_template('index.html')
# 实时温度接口
@app.route('/api/realtime_temperature')
def realtime_temperature():
temperature = get_latest_temperature()
threshold = 80 # 设置温度阈值
is_over_threshold = check_threshold(temperature, threshold)
return jsonify({
'temperature': temperature,
'is_over_threshold': is_over_threshold
})
# 温度曲线接口
@app.route('/api/temperature_curve')
def temperature_curve():
start_time = request.args.get('start_time')
end_time = request.args.get('end_time')
curve_data = get_temperature_curve(start_time, end_time)
return jsonify(curve_data)
if __name__ == '__main__':
app.run(debug=True)
```
```html
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>油井加热炉可视化平台</title>
<!-- 引入Echarts库 -->
<script src="https://cdn.staticfile.org/echarts/4.8.0/echarts.min.js"></script>
</head>
<body>
<!-- 实时温度显示区域 -->
<div id="realtime-temperature"></div>
<!-- 温度曲线显示区域 -->
<div id="temperature-curve"></div>
<!-- JavaScript代码 -->
<script>
// 获取实时温度数据并更新页面
function updateRealtimeTemperature() {
fetch('/api/realtime_temperature')
.then(response => response.json())
.then(data => {
const temperature = data.temperature;
const isOverThreshold = data.is_over_threshold;
document.getElementById('realtime-temperature').innerText = `当前温度:${temperature}℃`;
if (isOverThreshold) {
alert('温度超过阈值!');
}
});
}
// 绘制温度曲线图
function drawTemperatureCurve(start_time, end_time) {
fetch(`/api/temperature_curve?start_time=${start_time}&end_time=${end_time}`)
.then(response => response.json())
.then(data => {
const timestamps = data.map(item => item.timestamp);
const temperatures = data.map(item => item.temperature);
// 使用Echarts绘制折线图
const chart = echarts.init(document.getElementById('temperature-curve'));
const option = {
title: {
text: '温度曲线'
},
xAxis: {
type: 'category',
data: timestamps
},
yAxis: {
type: 'value'
},
series: [{
data: temperatures,
type: 'line'
}]
};
chart.setOption(option);
});
}
// 页面加载完成后执行以下操作
window.onload = function() {
// 每隔5秒更新实时温度
setInterval(updateRealtimeTemperature, 5000);
// 初始化温度曲线,显示最近一小时的数据
const endTime = new Date().toISOString();
const startTime = new Date(Date.now() - 60 * 60 * 1000).toISOString();
drawTemperatureCurve(startTime, endTime);
};
</script>
</body>
</html>
```
请确保在同一目录下创建名为`devices.csv`的CSV文件,并按照以下格式存储加热炉设备的信息:
```
device_id,timestamp,temperature
device1,2022-01-01 12:00:00,70.5
device2,2022-01-01 12:01:00,75.2
device1,2022-01-01 12:02:00,80.8
...
```
在终端中运行`python app.py`启动应用,然后在浏览器中访问`http://localhost:5000`即可查看油井加热炉可视化平台的实时温度和温度曲线。