环境监测
This commit is contained in:
parent
f5c5d4140c
commit
616ec0e872
|
|
@ -1,17 +1,59 @@
|
||||||
let table, layer, form;
|
let table, layer, form;
|
||||||
let myChart = null, myChart2 = null;
|
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;
|
layer = layui.layer;
|
||||||
table = layui.table;
|
table = layui.table;
|
||||||
form = layui.form;
|
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(`<option value="${hour}">${hour}</option>`);
|
||||||
|
}
|
||||||
|
$hour.val(defaultHour);
|
||||||
|
// 监听小时变化
|
||||||
|
$hour.on('change', function() {
|
||||||
|
initEcharts();
|
||||||
|
});
|
||||||
|
|
||||||
initEcharts();
|
initEcharts();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
// 初始化 echarts
|
// 初始化 echarts
|
||||||
function initEcharts() {
|
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 () {
|
ajaxRequest(url, "get", null , true, function () {
|
||||||
}, function (result) {
|
}, function (result) {
|
||||||
if (result.code === 200) {
|
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) {
|
function initEchartsOne(obj) {
|
||||||
const dateInput = document.querySelector('input[type="datetime-local"]');
|
|
||||||
dateInput.addEventListener('change', function () {
|
//六大指标设置
|
||||||
const selectedDate = new Date(this.value);
|
getEnvironment(obj);
|
||||||
const formattedDate = selectedDate.toLocaleString('zh-CN', {
|
|
||||||
year: 'numeric',
|
// 通过obj动态填充
|
||||||
month: '2-digit',
|
const trendOption = getTrendOption(obj.list);
|
||||||
day: '2-digit',
|
const gisOption = getGisOption(obj);
|
||||||
hour: '2-digit',
|
const spaceOption = getSpaceOption(obj);
|
||||||
minute: '2-digit'
|
|
||||||
});
|
|
||||||
});
|
|
||||||
const trendChart = echarts.init(document.getElementById('trendChart'));
|
const trendChart = echarts.init(document.getElementById('trendChart'));
|
||||||
const gisChart = echarts.init(document.getElementById('gisChart'));
|
const gisChart = echarts.init(document.getElementById('gisChart'));
|
||||||
const spaceChart = echarts.init(document.getElementById('spaceChart'));
|
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 + '<br/>';
|
|
||||||
params.forEach(param => {
|
|
||||||
result += param.marker + param.seriesName + ': ' + param.value + ' ' + units[param.axisValueLabel] + '<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: [20.9, 0.5, 0.2, 0.8],
|
|
||||||
itemStyle: {
|
|
||||||
color: '#2563eb'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
|
||||||
const lineChartBtn = document.getElementById('lineChartBtn');
|
const lineChartBtn = document.getElementById('lineChartBtn');
|
||||||
const barChartBtn = document.getElementById('barChartBtn');
|
const barChartBtn = document.getElementById('barChartBtn');
|
||||||
const updateChartType = (type) => {
|
const updateChartType = (type) => {
|
||||||
|
|
@ -255,4 +122,319 @@ function initEchartsOne(obj) {
|
||||||
gisChart.resize();
|
gisChart.resize();
|
||||||
spaceChart.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 + '<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;
|
||||||
}
|
}
|
||||||
|
|
@ -65,10 +65,9 @@
|
||||||
</h1>
|
</h1>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-center gap-6">
|
<div class="flex items-center gap-6">
|
||||||
<div class="relative">
|
<div class="relative flex items-center gap-2">
|
||||||
<input type="datetime-local"
|
<input type="text" id="layuiDate" class="!rounded-button px-4 py-2 text-[#00C6BE] bg-[#002628] border border-[#004446] focus:outline-none focus:border-primary cursor-pointer" placeholder="请选择日期" readonly>
|
||||||
class="!rounded-button px-4 py-2 text-[#00C6BE] bg-[#002628] border border-[#004446] focus:outline-none focus:border-primary cursor-pointer"
|
<select id="layuiHour" class="!rounded-button px-4 py-2 w-20 text-[#00C6BE] bg-[#002628] border border-[#004446] focus:outline-none focus:border-primary cursor-pointer"></select>
|
||||||
value="2024-01-20T12:00">
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -90,44 +89,44 @@
|
||||||
<div class="p-3 rounded-lg bg-[#003436] border border-[#004446]">
|
<div class="p-3 rounded-lg bg-[#003436] border border-[#004446]">
|
||||||
<div class="flex items-center justify-between mb-1">
|
<div class="flex items-center justify-between mb-1">
|
||||||
<span class="text-[#00C6BE] text-sm">边坡位移</span>
|
<span class="text-[#00C6BE] text-sm">边坡位移</span>
|
||||||
<span class="px-1.5 py-0.5 rounded-full text-xs bg-[#004446] text-[#00C6BE]">正常</span>
|
<span class="px-1.5 py-0.5 rounded-full text-xs bg-[#004446] text-[#00C6BE]" id="slopeDisplacementStatus">正常</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="text-lg font-medium text-[#00C6BE]">0.5 mm</div>
|
<div class="text-lg font-medium text-[#00C6BE]" id="slopeDisplacementValue">0.5 mm</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-3 rounded-lg bg-[#003436] border border-[#004446]">
|
<div class="p-3 rounded-lg bg-[#003436] border border-[#004446]">
|
||||||
<div class="flex items-center justify-between mb-1">
|
<div class="flex items-center justify-between mb-1">
|
||||||
<span class="text-[#00C6BE] text-sm">温度</span>
|
<span class="text-[#00C6BE] text-sm">温度</span>
|
||||||
<span class="px-1.5 py-0.5 rounded-full text-xs bg-[#004446] text-[#00C6BE]">正常</span>
|
<span class="px-1.5 py-0.5 rounded-full text-xs bg-[#004446] text-[#00C6BE]" id="temperatureStatus">正常</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="text-lg font-medium text-[#00C6BE]">23.5 ℃</div>
|
<div class="text-lg font-medium text-[#00C6BE]" id="temperatureValue">23.5 ℃</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-3 rounded-lg bg-[#003436] border border-[#004446]">
|
<div class="p-3 rounded-lg bg-[#003436] border border-[#004446]">
|
||||||
<div class="flex items-center justify-between mb-1">
|
<div class="flex items-center justify-between mb-1">
|
||||||
<span class="text-[#00C6BE] text-sm">湿度</span>
|
<span class="text-[#00C6BE] text-sm">湿度</span>
|
||||||
<span class="px-1.5 py-0.5 rounded-full text-xs bg-[#2d4446] text-[#FFB020]">警告</span>
|
<span class="px-1.5 py-0.5 rounded-full text-xs bg-[#2d4446] text-[#FFB020]" id="humidityStatus">警告</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="text-lg font-medium text-[#00C6BE]">85 %</div>
|
<div class="text-lg font-medium text-[#00C6BE]" id="humidityValue">85 %</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-3 rounded-lg bg-[#003436] border border-[#004446]">
|
<div class="p-3 rounded-lg bg-[#003436] border border-[#004446]">
|
||||||
<div class="flex items-center justify-between mb-1">
|
<div class="flex items-center justify-between mb-1">
|
||||||
<span class="text-[#00C6BE] text-sm">空气质量</span>
|
<span class="text-[#00C6BE] text-sm">空气质量</span>
|
||||||
<span class="px-1.5 py-0.5 rounded-full text-xs bg-[#004446] text-[#00C6BE]">正常</span>
|
<span class="px-1.5 py-0.5 rounded-full text-xs bg-[#004446] text-[#00C6BE]" id="airQualityIndexStatus">正常</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="text-lg font-medium text-[#00C6BE]">75 AQI</div>
|
<div class="text-lg font-medium text-[#00C6BE]" id="airQualityIndexValue">75 AQI</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-3 rounded-lg bg-[#003436] border border-[#004446]">
|
<div class="p-3 rounded-lg bg-[#003436] border border-[#004446]">
|
||||||
<div class="flex items-center justify-between mb-1">
|
<div class="flex items-center justify-between mb-1">
|
||||||
<span class="text-[#00C6BE] text-sm">噪音</span>
|
<span class="text-[#00C6BE] text-sm">噪音</span>
|
||||||
<span class="px-1.5 py-0.5 rounded-full text-xs bg-[#004446] text-[#00C6BE]">正常</span>
|
<span class="px-1.5 py-0.5 rounded-full text-xs bg-[#004446] text-[#00C6BE]" id="noiseLevelStatus">正常</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="text-lg font-medium text-[#00C6BE]">65 dB</div>
|
<div class="text-lg font-medium text-[#00C6BE]" id="noiseLevelValue">65 dB</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-3 rounded-lg bg-[#003436] border border-[#004446]">
|
<div class="p-3 rounded-lg bg-[#003436] border border-[#004446]">
|
||||||
<div class="flex items-center justify-between mb-1">
|
<div class="flex items-center justify-between mb-1">
|
||||||
<span class="text-[#00C6BE] text-sm">光照度</span>
|
<span class="text-[#00C6BE] text-sm">光照度</span>
|
||||||
<span class="px-1.5 py-0.5 rounded-full text-xs bg-[#2d4446] text-[#FF4444]">危险</span>
|
<span class="px-1.5 py-0.5 rounded-full text-xs bg-[#2d4446] text-[#FF4444]" id="illuminationStatus">危险</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="text-lg font-medium text-[#00C6BE]">2000 lx</div>
|
<div class="text-lg font-medium text-[#00C6BE]" id="illuminationValue">2000 lx</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue