468 lines
16 KiB
JavaScript
468 lines
16 KiB
JavaScript
let table, layer, form;
|
|
let myChart = null, myChart2 = null;
|
|
let bidCode = parent.parent.$('#bidPro').val()
|
|
layui.use(['layer', 'table', 'form', 'laydate'], function () {
|
|
layer = layui.layer;
|
|
table = layui.table;
|
|
form = layui.form;
|
|
var laydate = layui.laydate;
|
|
|
|
var defaultDate = '2025-03-14';
|
|
var defaultHour = '08';
|
|
|
|
// 初始化日期选择器
|
|
laydate.render({
|
|
elem: '#layuiDate',
|
|
type: 'date',
|
|
format: 'yyyy-MM-dd',
|
|
theme: '#00C6BE',
|
|
trigger: 'click',
|
|
value: defaultDate,
|
|
max: '2025-03-14',
|
|
done: function(value, date, endDate){
|
|
// 选中日期后的回调，自动查询
|
|
initEcharts();
|
|
}
|
|
});
|
|
|
|
// 生成小时下拉选项
|
|
var $hour = $('#layuiHour');
|
|
$hour.empty();
|
|
for (let i = 0; i < 24; i++) {
|
|
let hour = (i < 10 ? '0' : '') + i;
|
|
$hour.append(`<option value="${hour}">${hour}</option>`);
|
|
}
|
|
$hour.val(defaultHour);
|
|
// 监听小时变化
|
|
$hour.on('change', function() {
|
|
initEcharts();
|
|
});
|
|
|
|
initEcharts();
|
|
});
|
|
|
|
|
|
// 初始化 echarts
|
|
function initEcharts() {
|
|
// 获取页面选择的日期和小时
|
|
var currentDay = $('#layuiDate').val();
|
|
var hour = $('#layuiHour').val();
|
|
// 兼容小时前导零
|
|
if (hour && hour.length === 1) hour = '0' + hour;
|
|
// 后端查询数据
|
|
const url = commonUrl + "screen/largeScreen/environment/getEnvironmentList?currentDay=" + currentDay + "&hour=" + hour + "&proId=" + bidCode;
|
|
ajaxRequest(url, "get", null , true, function () {
|
|
}, function (result) {
|
|
if (result.code === 200 && result.data) {
|
|
initEchartsOne(result.data);
|
|
} else {
|
|
layer.msg('<span style="color:#00C6BE">暂无数据</span>', {
|
|
icon: 0
|
|
});
|
|
clearEchartsAndData();
|
|
}
|
|
}, function (xhr) {
|
|
layer.msg(xhr, { icon: 2 });
|
|
});
|
|
|
|
}
|
|
|
|
function clearEchartsAndData() {
|
|
// 清空echarts实例
|
|
if (window.trendChart) {
|
|
window.trendChart.dispose();
|
|
window.trendChart = null;
|
|
}
|
|
if (window.gisChart) {
|
|
window.gisChart.dispose();
|
|
window.gisChart = null;
|
|
}
|
|
if (window.spaceChart) {
|
|
window.spaceChart.dispose();
|
|
window.spaceChart = null;
|
|
}
|
|
// 清空六大指标数据
|
|
$('#slopeDisplacementValue').text('--');
|
|
$('#slopeDisplacementStatus').text('--').removeClass().addClass('px-1.5 py-0.5 rounded-full text-xs bg-gray-200 text-gray-400');
|
|
$('#temperatureValue').text('--');
|
|
$('#temperatureStatus').text('--').removeClass().addClass('px-1.5 py-0.5 rounded-full text-xs bg-gray-200 text-gray-400');
|
|
$('#humidityValue').text('--');
|
|
$('#humidityStatus').text('--').removeClass().addClass('px-1.5 py-0.5 rounded-full text-xs bg-gray-200 text-gray-400');
|
|
$('#airQualityIndexValue').text('--');
|
|
$('#airQualityIndexStatus').text('--').removeClass().addClass('px-1.5 py-0.5 rounded-full text-xs bg-gray-200 text-gray-400');
|
|
$('#noiseLevelValue').text('--');
|
|
$('#noiseLevelStatus').text('--').removeClass().addClass('px-1.5 py-0.5 rounded-full text-xs bg-gray-200 text-gray-400');
|
|
$('#illuminationValue').text('--');
|
|
$('#illuminationStatus').text('--').removeClass().addClass('px-1.5 py-0.5 rounded-full text-xs bg-gray-200 text-gray-400');
|
|
}
|
|
|
|
// 监听日期和小时选择器变化，自动刷新数据
|
|
// $(document).on('change', '#layuiDate', function() {
|
|
// initEcharts();
|
|
// });
|
|
// $(document).on('change', '#layuiHour', function() {
|
|
// initEcharts();
|
|
// });
|
|
|
|
function initEchartsOne(obj) {
|
|
|
|
//六大指标设置
|
|
getEnvironment(obj);
|
|
|
|
// 通过obj动态填充
|
|
const trendOption = getTrendOption(obj.list);
|
|
const gisOption = getGisOption(obj);
|
|
const spaceOption = getSpaceOption(obj);
|
|
|
|
window.trendChart = echarts.init(document.getElementById('trendChart'));
|
|
window.gisChart = echarts.init(document.getElementById('gisChart'));
|
|
window.spaceChart = echarts.init(document.getElementById('spaceChart'));
|
|
|
|
const lineChartBtn = document.getElementById('lineChartBtn');
|
|
const barChartBtn = document.getElementById('barChartBtn');
|
|
const updateChartType = (type) => {
|
|
const newOption = { ...trendOption };
|
|
newOption.series = newOption.series.map(series => ({
|
|
...series,
|
|
type: type
|
|
}));
|
|
trendChart.setOption(newOption);
|
|
};
|
|
lineChartBtn.addEventListener('click', () => {
|
|
lineChartBtn.classList.add('bg-primary/10', 'text-primary');
|
|
lineChartBtn.classList.remove('text-gray-600', 'hover:bg-gray-100');
|
|
barChartBtn.classList.remove('bg-primary/10', 'text-primary');
|
|
barChartBtn.classList.add('text-gray-600', 'hover:bg-gray-100');
|
|
updateChartType('line');
|
|
});
|
|
barChartBtn.addEventListener('click', () => {
|
|
barChartBtn.classList.add('bg-primary/10', 'text-primary');
|
|
barChartBtn.classList.remove('text-gray-600', 'hover:bg-gray-100');
|
|
lineChartBtn.classList.remove('bg-primary/10', 'text-primary');
|
|
lineChartBtn.classList.add('text-gray-600', 'hover:bg-gray-100');
|
|
updateChartType('bar');
|
|
});
|
|
trendChart.setOption(trendOption);
|
|
gisChart.setOption(gisOption);
|
|
spaceChart.setOption(spaceOption);
|
|
window.addEventListener('resize', function () {
|
|
trendChart.resize();
|
|
gisChart.resize();
|
|
spaceChart.resize();
|
|
});
|
|
}
|
|
|
|
function getEnvironment(obj) {
|
|
const slopeDisplacement = obj.slopeDisplacement
|
|
const temperature = obj.temperature
|
|
const humidity = obj.humidity
|
|
const airQualityIndex = obj.airQualityIndex
|
|
const noiseLevel = obj.noiseLevel
|
|
const illumination = obj.illumination
|
|
|
|
const slopeDisplacementStandard = 0.8
|
|
const temperatureStandard = 35
|
|
const humidityStandard = 75
|
|
const airQualityIndexStandard = 75
|
|
const noiseLevelStandard = 90
|
|
const illuminationStandard = 100000
|
|
|
|
const slopeDisplacementDanger = 1.2
|
|
const temperatureDanger = 40
|
|
const humidityDanger = 85
|
|
const airQualityIndexDanger = 100
|
|
const noiseLevelDanger = 110
|
|
const illuminationDanger = 110000
|
|
|
|
// 状态判断逻辑
|
|
function getStatus(value, standard, danger) {
|
|
if (value < standard) return '正常';
|
|
if (value >= standard && value < danger) return '警告';
|
|
return '异常';
|
|
}
|
|
|
|
const slopeDisplacementStatus = getStatus(slopeDisplacement, slopeDisplacementStandard, slopeDisplacementDanger);
|
|
const temperatureStatus = getStatus(temperature, temperatureStandard, temperatureDanger);
|
|
const humidityStatus = getStatus(humidity, humidityStandard, humidityDanger);
|
|
const airQualityIndexStatus = getStatus(airQualityIndex, airQualityIndexStandard, airQualityIndexDanger);
|
|
const noiseLevelStatus = getStatus(noiseLevel, noiseLevelStandard, noiseLevelDanger);
|
|
const illuminationStatus = getStatus(illumination, illuminationStandard, illuminationDanger);
|
|
|
|
// 填充实时数据
|
|
$('#slopeDisplacementValue').text(slopeDisplacement + ' mm');
|
|
$('#slopeDisplacementStatus').text(slopeDisplacementStatus)
|
|
.removeClass()
|
|
.addClass('px-1.5 py-0.5 rounded-full text-xs ' +
|
|
(slopeDisplacementStatus === '正常' ? 'bg-[#004446] text-[#00C6BE]' :
|
|
slopeDisplacementStatus === '警告' ? 'bg-[#2d4446] text-[#FFB020]' :
|
|
'bg-[#2d4446] text-[#FF4444]'));
|
|
|
|
$('#temperatureValue').text(temperature + ' ℃');
|
|
$('#temperatureStatus').text(temperatureStatus)
|
|
.removeClass()
|
|
.addClass('px-1.5 py-0.5 rounded-full text-xs ' +
|
|
(temperatureStatus === '正常' ? 'bg-[#004446] text-[#00C6BE]' :
|
|
temperatureStatus === '警告' ? 'bg-[#2d4446] text-[#FFB020]' :
|
|
'bg-[#2d4446] text-[#FF4444]'));
|
|
|
|
$('#humidityValue').text(humidity + ' %');
|
|
$('#humidityStatus').text(humidityStatus)
|
|
.removeClass()
|
|
.addClass('px-1.5 py-0.5 rounded-full text-xs ' +
|
|
(humidityStatus === '正常' ? 'bg-[#004446] text-[#00C6BE]' :
|
|
humidityStatus === '警告' ? 'bg-[#2d4446] text-[#FFB020]' :
|
|
'bg-[#2d4446] text-[#FF4444]'));
|
|
|
|
$('#airQualityIndexValue').text(airQualityIndex + ' AQI');
|
|
$('#airQualityIndexStatus').text(airQualityIndexStatus)
|
|
.removeClass()
|
|
.addClass('px-1.5 py-0.5 rounded-full text-xs ' +
|
|
(airQualityIndexStatus === '正常' ? 'bg-[#004446] text-[#00C6BE]' :
|
|
airQualityIndexStatus === '警告' ? 'bg-[#2d4446] text-[#FFB020]' :
|
|
'bg-[#2d4446] text-[#FF4444]'));
|
|
|
|
$('#noiseLevelValue').text(noiseLevel + ' dB');
|
|
$('#noiseLevelStatus').text(noiseLevelStatus)
|
|
.removeClass()
|
|
.addClass('px-1.5 py-0.5 rounded-full text-xs ' +
|
|
(noiseLevelStatus === '正常' ? 'bg-[#004446] text-[#00C6BE]' :
|
|
noiseLevelStatus === '警告' ? 'bg-[#2d4446] text-[#FFB020]' :
|
|
'bg-[#2d4446] text-[#FF4444]'));
|
|
|
|
$('#illuminationValue').text(illumination + ' lx');
|
|
$('#illuminationStatus').text(illuminationStatus)
|
|
.removeClass()
|
|
.addClass('px-1.5 py-0.5 rounded-full text-xs ' +
|
|
(illuminationStatus === '正常' ? 'bg-[#004446] text-[#00C6BE]' :
|
|
illuminationStatus === '警告' ? 'bg-[#2d4446] text-[#FFB020]' :
|
|
'bg-[#2d4446] text-[#FF4444]'));
|
|
}
|
|
|
|
function getTrendOption(trendData) {
|
|
const xAxis = trendData.map(item => item.currentDay);
|
|
// 保留两位有效小数
|
|
function fix2(val) {
|
|
if (val === null || val === undefined || isNaN(val)) return val;
|
|
return Number(val).toFixed(2);
|
|
}
|
|
const a = trendData.map(item => fix2(item.temperature));
|
|
const b = trendData.map(item => fix2(item.humidity));
|
|
const c = trendData.map(item => fix2(item.airQualityIndex));
|
|
const d = trendData.map(item => fix2(item.noiseLevel));
|
|
const e = trendData.map(item => fix2(item.illumination));
|
|
|
|
const trendOption = {
|
|
animation: false,
|
|
backgroundColor: 'transparent',
|
|
textStyle: {
|
|
color: '#00C6BE'
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
legend: {
|
|
data: ['温度', '湿度', '空气质量', '噪音', '光照度'],
|
|
textStyle: {
|
|
color: '#00FFD0'
|
|
},
|
|
itemWidth: 24,
|
|
itemHeight: 14
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: xAxis
|
|
},
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
name: '温度/湿度',
|
|
},
|
|
{
|
|
type: 'value',
|
|
name: '其他指标',
|
|
splitLine: {
|
|
show: false
|
|
}
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: '温度',
|
|
type: 'line',
|
|
smooth: true,
|
|
data: a
|
|
},
|
|
{
|
|
name: '湿度',
|
|
type: 'line',
|
|
smooth: true,
|
|
data: b
|
|
},
|
|
{
|
|
name: '空气质量',
|
|
type: 'line',
|
|
yAxisIndex: 1,
|
|
smooth: true,
|
|
data: c
|
|
},
|
|
{
|
|
name: '噪音',
|
|
type: 'line',
|
|
yAxisIndex: 1,
|
|
smooth: true,
|
|
data: d
|
|
},
|
|
{
|
|
name: '光照度',
|
|
type: 'line',
|
|
yAxisIndex: 1,
|
|
smooth: true,
|
|
data: e
|
|
}
|
|
]
|
|
};
|
|
|
|
return trendOption;
|
|
}
|
|
|
|
function getGisOption(gisData) {
|
|
const array = []
|
|
array[0] = gisData.gisInstallationTemp
|
|
array[1] = gisData.gisInstallationHumidity
|
|
array[2] = gisData.gisInstallationDustConcentration
|
|
|
|
const gisOption = {
|
|
animation: false,
|
|
backgroundColor: 'transparent',
|
|
textStyle: {
|
|
color: '#00C6BE'
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
},
|
|
legend: {
|
|
data: ['实时值', '标准值'],
|
|
textStyle: {
|
|
color: '#00FFD0'
|
|
},
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: ['温度 (℃)', '湿度 (%)', '粉尘度 (mg/m³)']
|
|
},
|
|
yAxis: {
|
|
type: 'value'
|
|
},
|
|
series: [
|
|
{
|
|
name: '实时值',
|
|
type: 'bar',
|
|
barGap: 0,
|
|
data: array,
|
|
itemStyle: {
|
|
color: '#2563eb'
|
|
}
|
|
},
|
|
{
|
|
name: '标准值',
|
|
type: 'bar',
|
|
data: [25, 50, 0.50],
|
|
itemStyle: {
|
|
color: '#94a3b8'
|
|
}
|
|
}
|
|
]
|
|
};
|
|
|
|
return gisOption;
|
|
}
|
|
|
|
function getSpaceOption(spaceData) {
|
|
|
|
var array = []
|
|
array[0] = spaceData.confinedSpaceOxygen
|
|
array[1] = spaceData.confinedSpaceCarbonMonoxide
|
|
array[2] = spaceData.confinedSpaceHydrogenSulfide
|
|
array[3] = spaceData.confinedSpaceCombustibleGas
|
|
|
|
const spaceOption = {
|
|
animation: false,
|
|
backgroundColor: 'transparent',
|
|
textStyle: {
|
|
color: '#00C6BE'
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
},
|
|
formatter: function (params) {
|
|
const units = {
|
|
'氧气': '%',
|
|
'一氧化碳': 'ppm',
|
|
'硫化氢': 'ppm',
|
|
'可燃气体': '%LEL'
|
|
};
|
|
let result = params[0].axisValueLabel + '<br/>';
|
|
params.forEach(param => {
|
|
result += param.marker + param.seriesName + ': ' + param.value + ' ' + '<br/>';
|
|
});
|
|
return result;
|
|
}
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
data: ['氧气 (%)', '一氧化碳 (ppm)', '硫化氢 (ppm)', '可燃气体 (%LEL)'],
|
|
axisTick: {
|
|
alignWithLabel: true
|
|
},
|
|
axisLabel: {
|
|
interval: 0,
|
|
rotate: 15
|
|
}
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
name: '监测值',
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: '监测值',
|
|
type: 'bar',
|
|
barWidth: '60%',
|
|
data: array,
|
|
itemStyle: {
|
|
color: '#2563eb'
|
|
}
|
|
}
|
|
]
|
|
};
|
|
|
|
return spaceOption;
|
|
} |