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(); // 初始化顶部单个日期选择器 initDatePicker(); // 初始化质量监测记录模块的日期范围选择器 initRecordDateRangePicker(); }); // 初始化页面 function initPage() { initTemperatureHumidityChart(); initWindSpeedChart(); initAirQualityChart(); initEnvironmentRecordTable(); // 页面初始化时,按默认当天日期加载一次接口数据 refreshAllModules(); } // 初始化顶部单个日期选择器 function initDatePicker() { // 设置初始显示值为当天 const initialValue = queryParams.startTestDay; $('#dateRange').val(initialValue); // 使用单个日期选择器 laydate.render({ elem: '#dateRange', type: 'date', format: 'yyyy-MM-dd', theme: 'dark', // 默认值使用当天 value: queryParams.startTestDay, done: function (value, date) { if (value && value.trim() !== '') { // 更新查询参数,startTestDay和endTestDay传相同的值 queryParams.startTestDay = value.trim(); queryParams.endTestDay = value.trim(); $('#dateRange').val(value.trim()); // 日期变化后,重新调用所有模块接口(不包括质量监测记录表格) refreshAllModules(); } else { // 清空时,重置为当天日期 const today = getTodayDate(); queryParams.startTestDay = today; queryParams.endTestDay = today; $('#dateRange').val(today); refreshAllModules(); } } }); } // 初始化质量监测记录模块的日期范围选择器 function initRecordDateRangePicker() { const today = getTodayDate(); // 设置初始显示值为当天范围 const initialValue = today + ' ~ ' + today; $('#recordDateRange').val(initialValue); // 使用范围选择器 laydate.render({ elem: '#recordDateRange', type: 'date', range: true, // 启用范围选择 format: 'yyyy-MM-dd', theme: 'dark', // 默认值使用当天范围 value: today + ' - ' + today, done: function (value, date, endDate) { console.log('日期范围选择器回调:', { value, date, endDate }); if (value && value.trim() !== '') { // laydate返回的格式是 "2026-01-14 - 2026-01-31" const dates = value.split(' - '); if (dates.length === 2) { const startDate = dates[0].trim(); const endDateStr = dates[1].trim(); // 在输入框中显示日期范围(使用 ~ 分隔符) const displayValue = startDate + ' ~ ' + endDateStr; // 使用setTimeout确保DOM更新完成 setTimeout(function () { $('#recordDateRange').val(displayValue); console.log('设置日期范围值:', displayValue, '当前输入框值:', $('#recordDateRange').val()); }, 0); } else { // 如果格式不正确,重置为当天日期范围 $('#recordDateRange').val(today + ' ~ ' + today); } } else { // 清空时,重置为当天日期范围 $('#recordDateRange').val(today + ' ~ ' + today); } } }); } // 刷新所有模块数据(不包括质量监测记录表格,它使用自己的日期范围) function refreshAllModules() { // 重新调用接口获取数据(使用顶部单个日期,startTestDay和endTestDay相同) getTemperatureHumidityData(); getQualityDetectionRecord(); // 注意:质量监测记录表格不在这里刷新,它使用自己的日期范围筛选 } // 查询数据(统一刷新所有模块) 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() { // 初始化时使用当天日期范围 const today = getTodayDate(); table.render({ elem: '#environmentRecordTable', url: commonUrl + 'screen/project/projectSafety/list', headers: { decrypt: 'decrypt', Authorization: token }, method: 'GET', where: { projectId: bidCode, startTestDay: today, endTestDay: today, 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) { return '查看'; } }, { field: 'analysis', title: '分析改进', width: '18%', align: 'left', fixed: 'right', templet: function (d) { const text = d.analysis || ''; return '
' + text + '
'; } }, // { // title: '分析改进', width: '8%', align: 'center', templet: function (d) { // return '分析与改进'; // } // } ]] }); } // 查询记录(监测点输入框查询) function queryRecords() { keyword = $('#keywordInput').val() || ''; // 获取质量监测记录模块的日期范围 const recordDateRangeInput = document.getElementById('recordDateRange'); const recordDateRange = recordDateRangeInput ? recordDateRangeInput.value || '' : ''; let recordStartDate = ''; let recordEndDate = ''; console.log('查询时获取的日期范围输入框值:', recordDateRange); // 解析日期范围,支持两种格式:"2026-01-14 ~ 2026-01-31" 或 "2026-01-14 - 2026-01-31" if (recordDateRange && recordDateRange.trim() !== '') { let dates = []; if (recordDateRange.includes(' ~ ')) { dates = recordDateRange.split(' ~ '); } else if (recordDateRange.includes(' - ')) { dates = recordDateRange.split(' - '); } if (dates.length === 2) { recordStartDate = dates[0].trim(); recordEndDate = dates[1].trim(); } } // 如果没有选择日期范围,使用当天 if (!recordStartDate || !recordEndDate) { const today = getTodayDate(); recordStartDate = today; recordEndDate = today; console.log('未获取到日期范围,使用默认当天:', today); } console.log('查询参数:', { keyword: keyword, recordDateRange: recordDateRange, recordStartDate: recordStartDate, recordEndDate: recordEndDate }); // 重新加载表格,使用质量监测记录模块的日期范围 table.reload('environmentRecordTable', { where: { projectId: bidCode, startTestDay: recordStartDate, endTestDay: recordEndDate, monitorName: keyword }, page: { curr: 1 } }); } // 查看视频 function viewVideo() { // 清空视频源(占位) const videoPlayer = document.getElementById('videoPlayer'); if (videoPlayer) { videoPlayer.src = ''; } // 显示弹框 $('#videoModal').addClass('show'); } // 关闭视频查看弹框 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 } ] }); }