752 lines
21 KiB
JavaScript
752 lines
21 KiB
JavaScript
let table, layer, form, laydate;
|
||
let temperatureHumidityChart = null;
|
||
let windSpeedChart = null;
|
||
let airQualityChart = null;
|
||
|
||
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();
|
||
}
|
||
|
||
// 初始化日期范围选择器
|
||
function initDateRangePicker() {
|
||
laydate.render({
|
||
elem: '#dateRange',
|
||
type: 'date',
|
||
range: true,
|
||
format: 'yyyy-MM-dd',
|
||
theme: 'dark',
|
||
max: 0,
|
||
done: function(value, date, endDate) {
|
||
// 日期范围选择完成
|
||
}
|
||
});
|
||
}
|
||
|
||
// 查询数据
|
||
function queryData() {
|
||
const dateRange = $('#dateRange').val();
|
||
// 重新加载图表数据
|
||
getTemperatureHumidityData();
|
||
getWindSpeedData();
|
||
getAirQualityData();
|
||
queryRecords();
|
||
}
|
||
|
||
// 初始化温湿度图表（柱状图+折线图，双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();
|
||
}
|
||
});
|
||
}
|
||
|
||
// 初始化空气质量图表（双折线图）
|
||
function initAirQualityChart() {
|
||
const chartDom = document.getElementById('airQualityChart');
|
||
if (!chartDom) return;
|
||
|
||
if (airQualityChart) {
|
||
airQualityChart.dispose();
|
||
}
|
||
|
||
airQualityChart = echarts.init(chartDom);
|
||
|
||
// 模拟数据 - 后续替换为真实接口数据
|
||
const times = ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00'];
|
||
const pm25 = [35, 38, 42, 40, 38, 36, 34]; // PM2.5
|
||
const pm10 = [55, 60, 65, 62, 58, 56, 54]; // PM10
|
||
|
||
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', 'PM10'],
|
||
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,
|
||
label: {
|
||
show: false
|
||
}
|
||
},
|
||
{
|
||
name: 'PM10',
|
||
type: 'line',
|
||
data: pm10,
|
||
itemStyle: {
|
||
color: '#50E3C2'
|
||
},
|
||
lineStyle: {
|
||
width: 2,
|
||
color: '#50E3C2'
|
||
},
|
||
symbol: 'circle',
|
||
symbolSize: 6,
|
||
label: {
|
||
show: false
|
||
}
|
||
}
|
||
]
|
||
};
|
||
|
||
airQualityChart.setOption(option);
|
||
|
||
// 响应式调整
|
||
window.addEventListener('resize', function() {
|
||
if (airQualityChart) {
|
||
airQualityChart.resize();
|
||
}
|
||
});
|
||
}
|
||
|
||
// 生成模拟数据
|
||
function generateEnvironmentMockData() {
|
||
const projectNames = ['安徽淮北凌云220kv 变电站新建工程'];
|
||
const workPlans = ['WP001', 'WP002', 'WP003', 'WP004', 'WP005'];
|
||
const locations = ['主变区', '开关站', '控制室', '配电室', '电缆沟'];
|
||
const monitoringPoints = ['MP001', 'MP002', 'MP003', 'MP004', 'MP005', 'MP006'];
|
||
const pointNames = ['临建区道路施工 监测点', '主变区监测点', '开关站监测点', '控制室监测点', '配电室监测点', '电缆沟监测点'];
|
||
|
||
const mockData = [];
|
||
const today = new Date();
|
||
|
||
for (let i = 0; i < 25; i++) {
|
||
const date = new Date(today);
|
||
date.setDate(date.getDate() - Math.floor(i / 3));
|
||
const timeStr = date.getFullYear() + '-' +
|
||
String(date.getMonth() + 1).padStart(2, '0') + '-' +
|
||
String(date.getDate()).padStart(2, '0') + ' ' +
|
||
String(8 + (i % 7)).padStart(2, '0') + ':' +
|
||
String(Math.floor(Math.random() * 60)).padStart(2, '0') + ':' +
|
||
String(Math.floor(Math.random() * 60)).padStart(2, '0');
|
||
|
||
mockData.push({
|
||
projectName: projectNames[0],
|
||
workPlanNumber: workPlans[Math.floor(Math.random() * workPlans.length)],
|
||
workLocation: locations[Math.floor(Math.random() * locations.length)],
|
||
monitoringPointNumber: monitoringPoints[Math.floor(Math.random() * monitoringPoints.length)],
|
||
monitoringPointName: pointNames[Math.floor(Math.random() * pointNames.length)],
|
||
monitoringTime: timeStr,
|
||
temperature: (20 + Math.floor(Math.random() * 15)).toFixed(1),
|
||
humidity: (50 + Math.floor(Math.random() * 30)).toFixed(1),
|
||
windSpeed: (3 + Math.random() * 5).toFixed(1),
|
||
airQuality: (30 + Math.floor(Math.random() * 40)).toFixed(0)
|
||
});
|
||
}
|
||
|
||
return mockData;
|
||
}
|
||
|
||
// 初始化环境监测记录表格
|
||
function initEnvironmentRecordTable() {
|
||
const mockData = generateEnvironmentMockData();
|
||
|
||
table.render({
|
||
elem: '#environmentRecordTable',
|
||
data: mockData,
|
||
skin: 'line',
|
||
page: {
|
||
layout: ['prev', 'page', 'next', 'count', 'skip'],
|
||
groups: 5,
|
||
limit: 10,
|
||
limits: [10, 20, 30]
|
||
},
|
||
height: 'full',
|
||
cols: [[
|
||
{field: 'projectName', title: '工程名称', width: '15%', align: 'center'},
|
||
{field: 'workPlanNumber', title: '作业计划编号', width: '10%', align: 'center'},
|
||
{field: 'workLocation', title: '作业地点', width: '10%', align: 'center'},
|
||
{field: 'monitoringPointNumber', title: '监测点编号', width: '10%', align: 'center'},
|
||
{field: 'monitoringPointName', title: '监测点名称', width: '15%', align: 'center'},
|
||
{field: 'monitoringTime', title: '监测时间', width: '12%', align: 'center'},
|
||
{field: 'temperature', title: '温度', width: '6%', align: 'center'},
|
||
{field: 'humidity', title: '湿度', width: '6%', align: 'center'},
|
||
{field: 'windSpeed', 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>';
|
||
}},
|
||
{title: '分析改进', width: '8%', align: 'center', templet: function(d) {
|
||
return '<a href="javascript:void(0)" style="color: #00FFB8;" onclick="analyzeImprove(\'' + d.monitoringPointNumber + '\')">分析与改进</a>';
|
||
}}
|
||
]]
|
||
});
|
||
}
|
||
|
||
// 查询记录
|
||
function queryRecords() {
|
||
const keyword = $('#keywordInput').val();
|
||
const dateRange = $('#dateRange').val();
|
||
|
||
table.reload('environmentRecordTable', {
|
||
where: {
|
||
keyword: keyword,
|
||
dateRange: dateRange,
|
||
bidCode: parent.parent.$('#bidPro').val() || ''
|
||
},
|
||
page: {
|
||
curr: 1
|
||
}
|
||
});
|
||
}
|
||
|
||
// 查看视频
|
||
function viewVideo(monitoringPointNumber) {
|
||
layer.msg('查看视频: ' + monitoringPointNumber, {icon: 1});
|
||
// 后续实现视频查看功能
|
||
}
|
||
|
||
// 分析与改进
|
||
function analyzeImprove(monitoringPointNumber) {
|
||
layer.msg('分析与改进: ' + monitoringPointNumber, {icon: 1});
|
||
// 后续实现分析改进功能
|
||
}
|
||
|
||
// 获取温湿度数据（接口调用）
|
||
function getTemperatureHumidityData() {
|
||
const bidCode = parent.parent.$('#bidPro').val() || '';
|
||
const dateRange = $('#dateRange').val();
|
||
const url = commonUrl + 'screen/largeScreen/dataAnalysis/getTemperatureHumidity';
|
||
|
||
$.ajax({
|
||
url: url,
|
||
type: 'GET',
|
||
headers: {
|
||
decrypt: 'decrypt',
|
||
Authorization: token
|
||
},
|
||
data: {
|
||
bidCode: bidCode,
|
||
dateRange: dateRange
|
||
},
|
||
success: function(res) {
|
||
if (res.code === 200 && res.data) {
|
||
updateTemperatureHumidityChart(res.data);
|
||
}
|
||
},
|
||
error: function(err) {
|
||
console.error('获取温湿度数据失败:', err);
|
||
}
|
||
});
|
||
}
|
||
|
||
// 更新温湿度图表
|
||
function updateTemperatureHumidityChart(data) {
|
||
if (!temperatureHumidityChart) return;
|
||
|
||
const times = data.map(item => item.time);
|
||
const temperatures = data.map(item => item.temperature);
|
||
const humidities = data.map(item => item.humidity);
|
||
|
||
temperatureHumidityChart.setOption({
|
||
xAxis: {
|
||
data: times
|
||
},
|
||
series: [
|
||
{
|
||
name: '温度',
|
||
data: temperatures
|
||
},
|
||
{
|
||
name: '湿度',
|
||
data: humidities
|
||
}
|
||
]
|
||
});
|
||
}
|
||
|
||
// 获取风速数据（接口调用）
|
||
function getWindSpeedData() {
|
||
const bidCode = parent.parent.$('#bidPro').val() || '';
|
||
const dateRange = $('#dateRange').val();
|
||
const url = commonUrl + 'screen/largeScreen/dataAnalysis/getWindSpeed';
|
||
|
||
$.ajax({
|
||
url: url,
|
||
type: 'GET',
|
||
headers: {
|
||
decrypt: 'decrypt',
|
||
Authorization: token
|
||
},
|
||
data: {
|
||
bidCode: bidCode,
|
||
dateRange: dateRange
|
||
},
|
||
success: function(res) {
|
||
if (res.code === 200 && res.data) {
|
||
updateWindSpeedChart(res.data);
|
||
}
|
||
},
|
||
error: function(err) {
|
||
console.error('获取风速数据失败:', err);
|
||
}
|
||
});
|
||
}
|
||
|
||
// 更新风速图表
|
||
function updateWindSpeedChart(data) {
|
||
if (!windSpeedChart) return;
|
||
|
||
const times = data.map(item => item.time);
|
||
const windSpeeds = data.map(item => item.windSpeed);
|
||
|
||
windSpeedChart.setOption({
|
||
xAxis: {
|
||
data: times
|
||
},
|
||
series: [{
|
||
name: '风速',
|
||
data: windSpeeds
|
||
}]
|
||
});
|
||
}
|
||
|
||
// 获取空气质量数据（接口调用）
|
||
function getAirQualityData() {
|
||
const bidCode = parent.parent.$('#bidPro').val() || '';
|
||
const dateRange = $('#dateRange').val();
|
||
const url = commonUrl + 'screen/largeScreen/dataAnalysis/getAirQuality';
|
||
|
||
$.ajax({
|
||
url: url,
|
||
type: 'GET',
|
||
headers: {
|
||
decrypt: 'decrypt',
|
||
Authorization: token
|
||
},
|
||
data: {
|
||
bidCode: bidCode,
|
||
dateRange: dateRange
|
||
},
|
||
success: function(res) {
|
||
if (res.code === 200 && res.data) {
|
||
updateAirQualityChart(res.data);
|
||
}
|
||
},
|
||
error: function(err) {
|
||
console.error('获取空气质量数据失败:', err);
|
||
}
|
||
});
|
||
}
|
||
|
||
// 更新空气质量图表
|
||
function updateAirQualityChart(data) {
|
||
if (!airQualityChart) return;
|
||
|
||
const times = data.map(item => item.time);
|
||
const pm25 = data.map(item => item.pm25);
|
||
const pm10 = data.map(item => item.pm10);
|
||
|
||
airQualityChart.setOption({
|
||
xAxis: {
|
||
data: times
|
||
},
|
||
series: [
|
||
{
|
||
name: 'PM2.5',
|
||
data: pm25
|
||
},
|
||
{
|
||
name: 'PM10',
|
||
data: pm10
|
||
}
|
||
]
|
||
});
|
||
}
|