let table, layer, form, laydate;
let temperatureHumidityChart = null;
let windSpeedChart = null;
let airQualityChart = null;
let currentPage = 1;
let pageSize = 10;
let bidCode = parent.parent.$('#bidPro').val();
let keyword = ''; // 监测点关键字
// 获取当天日期
function getTodayDate() {
const now = new Date();
const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, '0');
const day = String(now.getDate()).padStart(2, '0');
return year + '-' + month + '-' + day;
}
// 获取当月第一天和最后一天(保留用于其他功能)
function getCurrentMonthRange() {
const now = new Date();
const year = now.getFullYear();
const month = now.getMonth();
// 当月第一天
const firstDay = new Date(year, month, 1);
const startDate = year + '-' + String(month + 1).padStart(2, '0') + '-' + String(firstDay.getDate()).padStart(2, '0');
// 当月最后一天
const lastDay = new Date(year, month + 1, 0);
const endDate = year + '-' + String(month + 1).padStart(2, '0') + '-' + String(lastDay.getDate()).padStart(2, '0');
return { startDate, endDate };
}
const today = getTodayDate();
let queryParams = {
projectId: bidCode,
startTestDay: today,
endTestDay: today,
}
layui.use(["layer", "table", "form", "laydate"], function () {
layer = layui.layer;
table = layui.table;
form = layui.form;
laydate = layui.laydate;
// 响应成功后的拦截器
$.ajaxSetup({
beforeSend: function (xhr, options) {
var originalSuccess = options.success;
options.success = function (data, textStatus, jqXhr) {
data = modifyResponseData(data);
originalSuccess.apply(this, arguments);
};
},
});
// 初始化页面
initPage();
// 初始化日期范围选择器
initDateRangePicker();
});
// 初始化页面
function initPage() {
initTemperatureHumidityChart();
initWindSpeedChart();
initAirQualityChart();
initEnvironmentRecordTable();
// 页面初始化时,按默认当天日期加载一次接口数据
refreshAllModules();
}
// 初始化日期范围选择器(逻辑与工程质量分析模块保持一致)
function initDateRangePicker() {
// 设置初始显示值为当天范围
const initialValue = queryParams.startTestDay + ' ~ ' + queryParams.endTestDay;
$('#dateRange').val(initialValue);
// 使用范围选择器,单个输入框显示日期范围
laydate.render({
elem: '#dateRange',
type: 'date',
range: true, // 启用范围选择
format: 'yyyy-MM-dd',
theme: 'dark',
// 默认值使用当天范围
value: queryParams.startTestDay + ' - ' + queryParams.endTestDay,
done: function (value, date, endDate) {
// 重置为当天日期的函数
const resetToToday = function () {
const today = getTodayDate();
queryParams.startTestDay = today;
queryParams.endTestDay = today;
$('#dateRange').val(today + ' ~ ' + today);
refreshAllModules();
};
if (value && value.trim() !== '') {
const dates = value.split(' - ');
if (dates.length === 2) {
const startDate = dates[0].trim();
const endDateStr = dates[1].trim();
// 在单个输入框中显示日期范围(格式:2026-01-15 ~ 2026-01-15)
$('#dateRange').val(startDate + ' ~ ' + endDateStr);
// 更新查询参数
queryParams.startTestDay = startDate;
queryParams.endTestDay = endDateStr;
// 日期变化后,重新调用所有模块接口
refreshAllModules();
} else {
// 如果格式不正确,重置为当天日期
resetToToday();
}
} else {
// 清空时,重置为当天日期
resetToToday();
}
}
});
}
// 刷新所有模块数据
function refreshAllModules() {
// 重新调用接口获取数据
getTemperatureHumidityData();
getQualityDetectionRecord();
// 重新加载表格
if (table) {
table.reload('environmentRecordTable', {
where: {
projectId: bidCode,
startTestDay: queryParams.startTestDay,
endTestDay: queryParams.endTestDay,
monitoringPointName: keyword || ''
},
page: {
curr: 1
}
});
}
}
// 查询数据(统一刷新所有模块)
function queryData() {
refreshAllModules();
}
// 初始化温湿度图表(柱状图+折线图,双Y轴)
function initTemperatureHumidityChart() {
const chartDom = document.getElementById('temperatureHumidityChart');
if (!chartDom) return;
if (temperatureHumidityChart) {
temperatureHumidityChart.dispose();
}
temperatureHumidityChart = echarts.init(chartDom);
// 模拟数据 - 后续替换为真实接口数据
const times = ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00'];
const temperatures = [25, 28, 30, 32, 30, 28, 26]; // 温度(°C)
const humidities = [60, 65, 70, 75, 72, 68, 65]; // 湿度(%)
const option = {
backgroundColor: 'transparent',
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(13, 34, 37, 0.95)',
borderColor: 'rgba(6, 189, 221, 0.8)',
borderWidth: 1,
borderRadius: 4,
padding: [12, 16],
textStyle: {
color: '#FFFFFF',
fontSize: 12
}
},
legend: {
data: ['温度', '湿度'],
top: '5%',
right: '5%',
textStyle: {
color: '#FFFFFF',
fontSize: 12
},
itemWidth: 12,
itemHeight: 12,
icon: 'rect'
},
grid: {
left: '10%',
right: '10%',
bottom: '15%',
top: '20%',
containLabel: true
},
xAxis: {
type: 'category',
data: times,
axisLabel: {
color: '#FFFFFF',
fontSize: 12
},
axisLine: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)',
width: 1
}
},
axisTick: {
show: false
}
},
yAxis: [
{
type: 'value',
name: '°C',
nameTextStyle: {
color: '#FFFFFF',
fontSize: 12
},
axisLabel: {
color: '#FFFFFF',
fontSize: 12
},
axisLine: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)',
width: 1
}
},
splitLine: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.15)',
type: 'dashed',
width: 1
}
}
},
{
type: 'value',
name: '%',
nameTextStyle: {
color: '#FFFFFF',
fontSize: 12
},
axisLabel: {
color: '#FFFFFF',
fontSize: 12
},
axisLine: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)',
width: 1
}
},
splitLine: {
show: false
}
}
],
series: [
{
name: '温度',
type: 'bar',
yAxisIndex: 0,
data: temperatures,
barWidth: '40%',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#4A90E2'
}, {
offset: 1,
color: '#2E5C8A'
}]),
borderRadius: [2, 2, 0, 0]
},
label: {
show: false
}
},
{
name: '湿度',
type: 'line',
yAxisIndex: 1,
data: humidities,
itemStyle: {
color: '#50E3C2'
},
lineStyle: {
width: 2,
color: '#50E3C2'
},
symbol: 'circle',
symbolSize: 6,
label: {
show: false
}
}
]
};
temperatureHumidityChart.setOption(option);
// 响应式调整
window.addEventListener('resize', function () {
if (temperatureHumidityChart) {
temperatureHumidityChart.resize();
}
});
}
// 初始化风速图表(折线图)
function initWindSpeedChart() {
const chartDom = document.getElementById('windSpeedChart');
if (!chartDom) return;
if (windSpeedChart) {
windSpeedChart.dispose();
}
windSpeedChart = echarts.init(chartDom);
// 模拟数据 - 后续替换为真实接口数据
const times = ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00'];
const windSpeeds = [5.2, 6.1, 5.8, 4.5, 5.0, 6.2, 5.5]; // 风速(m/s)
const option = {
backgroundColor: 'transparent',
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(13, 34, 37, 0.95)',
borderColor: 'rgba(6, 189, 221, 0.8)',
borderWidth: 1,
borderRadius: 4,
padding: [12, 16],
textStyle: {
color: '#FFFFFF',
fontSize: 12
}
},
legend: {
data: ['风速'],
top: '5%',
right: '5%',
textStyle: {
color: '#FFFFFF',
fontSize: 12
},
itemWidth: 12,
itemHeight: 12,
icon: 'rect'
},
grid: {
left: '10%',
right: '10%',
bottom: '15%',
top: '20%',
containLabel: true
},
xAxis: {
type: 'category',
data: times,
axisLabel: {
color: '#FFFFFF',
fontSize: 12
},
axisLine: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)',
width: 1
}
},
axisTick: {
show: false
}
},
yAxis: {
type: 'value',
name: 'm/s',
nameTextStyle: {
color: '#FFFFFF',
fontSize: 12
},
axisLabel: {
color: '#FFFFFF',
fontSize: 12
},
axisLine: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)',
width: 1
}
},
splitLine: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.15)',
type: 'dashed',
width: 1
}
}
},
series: [
{
name: '风速',
type: 'line',
data: windSpeeds,
itemStyle: {
color: '#50E3C2'
},
lineStyle: {
width: 2,
color: '#50E3C2'
},
symbol: 'circle',
symbolSize: 6,
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(80, 227, 194, 0.3)'
}, {
offset: 1,
color: 'rgba(80, 227, 194, 0.05)'
}])
},
label: {
show: false
}
}
]
};
windSpeedChart.setOption(option);
// 响应式调整
window.addEventListener('resize', function () {
if (windSpeedChart) {
windSpeedChart.resize();
}
});
}
// 初始化空气质量图表(单折线图,只显示PM2.5)
function initAirQualityChart() {
const chartDom = document.getElementById('airQualityChart');
if (!chartDom) return;
if (airQualityChart) {
airQualityChart.dispose();
}
airQualityChart = echarts.init(chartDom);
// 默认空数据
const times = [];
const pm25 = [];
const option = {
backgroundColor: 'transparent',
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(13, 34, 37, 0.95)',
borderColor: 'rgba(6, 189, 221, 0.8)',
borderWidth: 1,
borderRadius: 4,
padding: [12, 16],
textStyle: {
color: '#FFFFFF',
fontSize: 12
}
},
legend: {
data: ['PM2.5'],
top: '5%',
right: '5%',
textStyle: {
color: '#FFFFFF',
fontSize: 12
},
itemWidth: 12,
itemHeight: 12,
icon: 'rect'
},
grid: {
left: '10%',
right: '10%',
bottom: '15%',
top: '20%',
containLabel: true
},
xAxis: {
type: 'category',
data: times,
axisLabel: {
color: '#FFFFFF',
fontSize: 12
},
axisLine: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)',
width: 1
}
},
axisTick: {
show: false
}
},
yAxis: {
type: 'value',
name: 'µg/m³',
nameTextStyle: {
color: '#FFFFFF',
fontSize: 12
},
axisLabel: {
color: '#FFFFFF',
fontSize: 12
},
axisLine: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)',
width: 1
}
},
splitLine: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.15)',
type: 'dashed',
width: 1
}
}
},
series: [
{
name: 'PM2.5',
type: 'line',
data: pm25,
itemStyle: {
color: '#87CEEB'
},
lineStyle: {
width: 2,
color: '#87CEEB'
},
symbol: 'circle',
symbolSize: 6,
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(135, 206, 235, 0.3)'
}, {
offset: 1,
color: 'rgba(135, 206, 235, 0.05)'
}])
},
label: {
show: false
}
}
]
};
airQualityChart.setOption(option);
// 响应式调整
window.addEventListener('resize', function () {
if (airQualityChart) {
airQualityChart.resize();
}
});
}
// 初始化环境监测记录表格
function initEnvironmentRecordTable() {
table.render({
elem: '#environmentRecordTable',
url: commonUrl + 'screen/project/projectSafety/list',
headers: {
decrypt: 'decrypt',
Authorization: token
},
method: 'GET',
where: {
projectId: bidCode,
startTestDay: queryParams.startTestDay,
endTestDay: queryParams.endTestDay,
monitoringPointName: keyword || ''
},
skin: 'line',
page: {
layout: ['prev', 'page', 'next', 'count', 'skip'],
groups: 5,
limit: pageSize,
limits: [10, 20, 30, 50]
},
height: 'full',
request: {
pageName: 'pageNum',
limitName: 'pageSize'
},
response: {
statusName: 'code',
statusCode: 200,
msgName: 'msg',
countName: 'total',
dataName: 'rows'
},
cols: [[
{ type: 'numbers', title: '序号', width: '8%', align: 'center' },
{ field: 'proName', title: '工程名称', width: '15%', align: 'center' },
{ field: 'planNum', title: '作业计划编号', width: '10%', align: 'center' },
{ field: 'workLocation', title: '作业地点', width: '10%', align: 'center' },
{ field: 'monitorCode', title: '监测点编号', width: '10%', align: 'center' },
{ field: 'monitorName', title: '监测点名称', width: '15%', align: 'center' },
{ field: 'detectionTime', title: '监测时间', width: '12%', align: 'center' },
{ field: 'wd', title: '温度', width: '6%', align: 'center' },
{ field: 'sd', title: '湿度', width: '6%', align: 'center' },
{ field: 'speed', title: '风速', width: '6%', align: 'center' },
{ field: 'airQuality', title: '空气质量', width: '6%', align: 'center' },
{
title: '视频查看', width: '6%', align: 'center', templet: function (d) {
const videoUrl = d.videoUrl || d.video || '';
if (videoUrl) {
// 将视频URL编码后传递
return '查看';
} else {
return '暂无视频';
}
}
},
{ field: 'analysis', title: '分析改进', width: '6%', align: 'center' },
// {
// title: '分析改进', width: '8%', align: 'center', templet: function (d) {
// return '分析与改进';
// }
// }
]]
});
}
// 查询记录(监测点输入框查询)
function queryRecords() {
keyword = $('#keywordInput').val() || '';
// 重新加载表格
table.reload('environmentRecordTable', {
where: {
projectId: bidCode,
startTestDay: queryParams.startTestDay,
endTestDay: queryParams.endTestDay,
monitorName: keyword
},
page: {
curr: 1
}
});
}
// 查看视频
function viewVideo(videoUrlEncoded) {
try {
// 解码视频URL
const videoUrl = decodeURIComponent(videoUrlEncoded);
// 设置视频源
const videoPlayer = document.getElementById('videoPlayer');
if (videoPlayer) {
videoPlayer.src = videoUrl;
videoPlayer.load();
}
// 显示弹框
$('#videoModal').addClass('show');
} catch (e) {
console.error('解析视频URL失败:', e);
layer.msg('视频URL格式错误', { icon: 2 });
}
}
// 关闭视频查看弹框
function closeVideoModal() {
const videoPlayer = document.getElementById('videoPlayer');
if (videoPlayer) {
// 暂停视频并清空源
videoPlayer.pause();
videoPlayer.src = '';
}
// 隐藏弹框
$('#videoModal').removeClass('show');
}
// 分析与改进
function analyzeImprove(monitoringPointNumber) {
layer.msg('分析与改进: ' + monitoringPointNumber, { icon: 1 });
// 后续实现分析改进功能
}
// 从detectionTime字段提取时:分格式
function extractTime(detectionTime) {
if (!detectionTime) return '';
// 如果包含时间部分(格式:2026-01-24 07:08:00)
if (detectionTime.includes(' ')) {
const timePart = detectionTime.split(' ')[1];
if (timePart) {
// 提取时:分(前5个字符,例如 "07:08")
return timePart.substring(0, 5);
}
}
// 如果只有日期,返回空字符串或默认值
return '';
}
// 获取温湿度 风速 空气质量 3个图表数据(只调用一次接口,渲染3个图表)
function getTemperatureHumidityData() {
const url = commonUrl +
'screen/project/projectSafety/hjlist?projectId=' + bidCode +
'&startTestDay=' + queryParams.startTestDay +
'&endTestDay=' + queryParams.endTestDay;
ajaxRequestGet(
url,
'GET',
true,
function () { },
function (result) {
console.log(result, '温湿度/风速/空气质量 3个图表数据');
if (result && result.rows && Array.isArray(result.rows)) {
const data = result.rows;
// 处理数据:提取时间和各字段值,只保留有完整时间的数据
const processedData = data
.map(item => {
const time = extractTime(item.detectionTime);
if (time === '') return null; // 过滤掉没有时间的数据
return {
time: time,
temperature: parseFloat(item.wd) || 0,
humidity: parseFloat(item.sd) || 0,
windSpeed: parseFloat(item.speed) || 0,
airQuality: parseFloat(item.airQuality) || 0
};
})
.filter(item => item !== null); // 过滤掉null值
// 提取各字段数组
const times = processedData.map(item => item.time);
const temperatures = processedData.map(item => item.temperature);
const humidities = processedData.map(item => item.humidity);
const windSpeeds = processedData.map(item => item.windSpeed);
const airQualities = processedData.map(item => item.airQuality);
// 更新3个图表
updateTemperatureHumidityChart(times, temperatures, humidities);
updateWindSpeedChart(times, windSpeeds);
updateAirQualityChart(times, airQualities);
}
},
aqEnnable
);
}
// 获取质量检测记录(完善查询逻辑)
function getQualityDetectionRecord() {
const url = commonUrl +
'screen/project/projectSafety/list?projectId=' + bidCode +
'&startTestDay=' + queryParams.startTestDay +
'&endTestDay=' + queryParams.endTestDay;
ajaxRequestGet(
url,
'GET',
true,
function () { },
function (result) {
console.log(result, '环境监测记录(工程安全分析)');
// 表格数据通过layui table的url自动加载,这里只打印返回数据
},
aqEnnable
);
}
// 更新温湿度图表
function updateTemperatureHumidityChart(times, temperatures, humidities) {
if (!temperatureHumidityChart) return;
temperatureHumidityChart.setOption({
xAxis: {
data: times
},
series: [
{
name: '温度',
data: temperatures
},
{
name: '湿度',
data: humidities
}
]
});
}
// 更新风速图表
function updateWindSpeedChart(times, windSpeeds) {
if (!windSpeedChart) return;
windSpeedChart.setOption({
xAxis: {
data: times
},
series: [{
name: '风速',
data: windSpeeds
}]
});
}
// 更新空气质量图表(单折线,只显示PM2.5)
function updateAirQualityChart(times, airQualities) {
if (!airQualityChart) return;
airQualityChart.setOption({
xAxis: {
data: times
},
series: [
{
name: 'PM2.5',
data: airQualities
}
]
});
}