From 616ec0e872680f0e520864dabcddf36e5b6c74c4 Mon Sep 17 00:00:00 2001
From: fl <3098731433@qq.com>
Date: Wed, 23 Jul 2025 23:57:49 +0800
Subject: [PATCH] =?UTF-8?q?=E7=8E=AF=E5=A2=83=E7=9B=91=E6=B5=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
js/pages/newDataAnalysis/environDetection.js | 572 ++++++++++++-------
pages/newDataAnalysis/environDetection.html | 31 +-
2 files changed, 392 insertions(+), 211 deletions(-)
diff --git a/js/pages/newDataAnalysis/environDetection.js b/js/pages/newDataAnalysis/environDetection.js
index f6c4ad6..cff24da 100644
--- a/js/pages/newDataAnalysis/environDetection.js
+++ b/js/pages/newDataAnalysis/environDetection.js
@@ -1,17 +1,59 @@
let table, layer, form;
let myChart = null, myChart2 = null;
-layui.use(['layer', 'table', 'form'], function () {
+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 now = new Date();
+ var defaultDate = now.getFullYear() + '-' +
+ ('0' + (now.getMonth() + 1)).slice(-2) + '-' +
+ ('0' + now.getDate()).slice(-2);
+ var defaultHour = ('0' + now.getHours()).slice(-2);
+
+ // 初始化日期选择器
+ laydate.render({
+ elem: '#layuiDate',
+ type: 'date',
+ format: 'yyyy-MM-dd',
+ theme: '#00C6BE',
+ trigger: 'click',
+ value: defaultDate,
+ 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(``);
+ }
+ $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="+ "2025-07-23" + "&hour=" + "8"+ "&proId=" + "1";
+ 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) {
@@ -26,203 +68,28 @@ function initEcharts() {
}
+// 监听日期和小时选择器变化，自动刷新数据
+// $(document).on('change', '#layuiDate', function() {
+// initEcharts();
+// });
+// $(document).on('change', '#layuiHour', function() {
+// initEcharts();
+// });
+
function initEchartsOne(obj) {
- const dateInput = document.querySelector('input[type="datetime-local"]');
- dateInput.addEventListener('change', function () {
- const selectedDate = new Date(this.value);
- const formattedDate = selectedDate.toLocaleString('zh-CN', {
- year: 'numeric',
- month: '2-digit',
- day: '2-digit',
- hour: '2-digit',
- minute: '2-digit'
- });
- });
+
+ //六大指标设置
+ getEnvironment(obj);
+
+ // 通过obj动态填充
+ const trendOption = getTrendOption(obj.list);
+ const gisOption = getGisOption(obj);
+ const spaceOption = getSpaceOption(obj);
+
const trendChart = echarts.init(document.getElementById('trendChart'));
const gisChart = echarts.init(document.getElementById('gisChart'));
const spaceChart = echarts.init(document.getElementById('spaceChart'));
- const trendOption = {
- animation: false,
- backgroundColor: 'transparent',
- textStyle: {
- color: '#00C6BE'
- },
- tooltip: {
- trigger: 'axis'
- },
- legend: {
- data: ['温度', '湿度', '空气质量', '噪音', '光照度']
- },
- grid: {
- left: '3%',
- right: '4%',
- bottom: '3%',
- containLabel: true
- },
- xAxis: {
- type: 'category',
- boundaryGap: false,
- data: ['1月14日', '1月15日', '1月16日', '1月17日', '1月18日', '1月19日', '1月20日']
- },
- yAxis: [
- {
- type: 'value',
- name: '温度/湿度',
- },
- {
- type: 'value',
- name: '其他指标',
- splitLine: {
- show: false
- }
- }
- ],
- series: [
- {
- name: '温度',
- type: 'line',
- smooth: true,
- data: [23, 24, 23.5, 22, 23.5, 24.5, 23.5]
- },
- {
- name: '湿度',
- type: 'line',
- smooth: true,
- data: [75, 78, 80, 82, 85, 83, 85]
- },
- {
- name: '空气质量',
- type: 'line',
- yAxisIndex: 1,
- smooth: true,
- data: [65, 70, 75, 72, 68, 73, 75]
- },
- {
- name: '噪音',
- type: 'line',
- yAxisIndex: 1,
- smooth: true,
- data: [60, 62, 65, 63, 61, 64, 65]
- },
- {
- name: '光照度',
- type: 'line',
- yAxisIndex: 1,
- smooth: true,
- data: [1800, 1900, 2000, 1950, 1850, 1950, 2000]
- }
- ]
- };
- const gisOption = {
- animation: false,
- backgroundColor: 'transparent',
- textStyle: {
- color: '#00C6BE'
- },
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'shadow'
- }
- },
- legend: {
- data: ['实时值', '标准值']
- },
- 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: [23.5, 45, 0.08],
- itemStyle: {
- color: '#2563eb'
- }
- },
- {
- name: '标准值',
- type: 'bar',
- data: [25, 50, 0.10],
- itemStyle: {
- color: '#94a3b8'
- }
- }
- ]
- };
- 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 + '
';
- params.forEach(param => {
- result += param.marker + param.seriesName + ': ' + param.value + ' ' + units[param.axisValueLabel] + '
';
- });
- 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: [20.9, 0.5, 0.2, 0.8],
- itemStyle: {
- color: '#2563eb'
- }
- }
- ]
- };
+
const lineChartBtn = document.getElementById('lineChartBtn');
const barChartBtn = document.getElementById('barChartBtn');
const updateChartType = (type) => {
@@ -255,4 +122,319 @@ function initEchartsOne(obj) {
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 = 1200
+
+ const slopeDisplacementDanger = 1.2
+ const temperatureDanger = 40
+ const humidityDanger = 85
+ const airQualityIndexDanger = 100
+ const noiseLevelDanger = 110
+ const illuminationDanger = 1500
+
+ // 状态判断逻辑
+ 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.10],
+ 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 + '
';
+ params.forEach(param => {
+ result += param.marker + param.seriesName + ': ' + param.value + ' ' + '
';
+ });
+ 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;
}
\ No newline at end of file
diff --git a/pages/newDataAnalysis/environDetection.html b/pages/newDataAnalysis/environDetection.html
index 5699d73..4f39549 100644
--- a/pages/newDataAnalysis/environDetection.html
+++ b/pages/newDataAnalysis/environDetection.html
@@ -65,10 +65,9 @@
@@ -90,44 +89,44 @@
边坡位移
- 正常
+ 正常
-
0.5 mm
+
0.5 mm
温度
- 正常
+ 正常
-
23.5 ℃
+
23.5 ℃
湿度
- 警告
+ 警告
-
85 %
+
85 %
空气质量
- 正常
+ 正常
-
75 AQI
+
75 AQI
噪音
- 正常
+ 正常
-
65 dB
+
65 dB
光照度
- 危险
+ 危险
-
2000 lx
+
2000 lx