hb_zhgd_screen/js/pages/dataAnalysisOctober/engineeringSafetyAnalysis.js

819 lines
24 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

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) {
return '<a href="javascript:void(0)" style="color: #00FFB8;" onclick="viewVideo(\'' + (d.monitoringPointNumber || '') + '\')">查看</a>';
}
},
{ field: 'analysis', title: '分析改进', width: '6%', align: 'center' },
// {
// title: '分析改进', width: '8%', align: 'center', templet: function (d) {
// return '<a href="javascript:void(0)" style="color: #00FFB8;" onclick="analyzeImprove(\'' + (d.monitoringPointNumber || '') + '\')">分析与改进</a>';
// }
// }
]]
});
}
// 查询记录(监测点输入框查询)
function queryRecords() {
keyword = $('#keywordInput').val() || '';
// 重新加载表格
table.reload('environmentRecordTable', {
where: {
projectId: bidCode,
startTestDay: queryParams.startTestDay,
endTestDay: queryParams.endTestDay,
monitorName: keyword
},
page: {
curr: 1
}
});
}
// 查看视频
function viewVideo(monitoringPointNumber) {
layer.msg('查看视频: ' + monitoringPointNumber, { icon: 1 });
// 后续实现视频查看功能
}
// 分析与改进
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
}
]
});
}