环境监测
This commit is contained in:
parent
f5c5d4140c
commit
616ec0e872
|
|
@ -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(`<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="+ "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 + '<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 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 + '<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>
|
||||
</div>
|
||||
<div class="flex items-center gap-6">
|
||||
<div class="relative">
|
||||
<input type="datetime-local"
|
||||
class="!rounded-button px-4 py-2 text-[#00C6BE] bg-[#002628] border border-[#004446] focus:outline-none focus:border-primary cursor-pointer"
|
||||
value="2024-01-20T12:00">
|
||||
<div class="relative flex items-center gap-2">
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -90,44 +89,44 @@
|
|||
<div class="p-3 rounded-lg bg-[#003436] border border-[#004446]">
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<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 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 class="p-3 rounded-lg bg-[#003436] border border-[#004446]">
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<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 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 class="p-3 rounded-lg bg-[#003436] border border-[#004446]">
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<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 class="text-lg font-medium text-[#00C6BE]">85 %</div>
|
||||
<div class="text-lg font-medium text-[#00C6BE]" id="humidityValue">85 %</div>
|
||||
</div>
|
||||
<div class="p-3 rounded-lg bg-[#003436] border border-[#004446]">
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<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 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 class="p-3 rounded-lg bg-[#003436] border border-[#004446]">
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<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 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 class="p-3 rounded-lg bg-[#003436] border border-[#004446]">
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<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 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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue