环境监测
This commit is contained in:
parent
d09de4d09d
commit
c709e3310a
|
|
@ -4,343 +4,255 @@ layui.use(['layer', 'table', 'form'], function () {
|
|||
layer = layui.layer;
|
||||
table = layui.table;
|
||||
form = layui.form;
|
||||
let bidCode = parent.parent.$('#bidPro').val()
|
||||
let filterList = dataList.filter(item => {
|
||||
return item.bidCode === bidCode;
|
||||
});
|
||||
initTable(filterList[0].list || []);
|
||||
initEcharts(filterList[0].list[0]);
|
||||
initEcharts();
|
||||
});
|
||||
|
||||
|
||||
function initTable(data) {
|
||||
table.render({
|
||||
elem: '#demo2',
|
||||
id: 'demo2',
|
||||
skin: 'line',
|
||||
page: true,
|
||||
height: 'full-140',
|
||||
headers: {
|
||||
"decrypt": "decrypt",
|
||||
"Authorization": token
|
||||
},
|
||||
data: data,
|
||||
cols: [[
|
||||
{ type: 'numbers', title: '序号', width: '10%' }, // 添加序号列
|
||||
{ field: 'userName', title: '工人', align: 'center', width: '10%' },
|
||||
{ field: 'teamName', title: '班组', align: 'center', width: '10%' },
|
||||
{ field: 'postName', title: '工种', align: 'center', width: '10%' },
|
||||
{ field: 'attDay', title: '出勤天数', align: 'center', width: '10%' },
|
||||
{
|
||||
field: 'workTime', title: '工作时长', align: 'center', width: '10%',
|
||||
templet: function (d) {
|
||||
return d.workTime + '小时';
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'completeWorkload', title: '完成工作量', align: 'center', width: '10%',
|
||||
templet: function (d) {
|
||||
return d.completeWorkload + d.completeWorkloadUnit;
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'unitTimeOutput', title: '单位时间产量', align: 'center', width: '10%',
|
||||
templet: function (d) {
|
||||
return d.unitTimeOutput + d.unitTimeOutputUnit;
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'unitTimeOutput', title: '单位时间标准产量', align: 'center', width: '10%',
|
||||
templet: function (d) {
|
||||
return d.standardTimeOutput + d.unitTimeOutputUnit;
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'rateLevel', title: '效率评级', align: 'center', width: '10%',
|
||||
templet: function (d) {
|
||||
let color = '';
|
||||
if (d.rateLevel === '高效') {
|
||||
color = 'green';
|
||||
} else if (d.rateLevel === '达标') {
|
||||
color = 'yellow';
|
||||
} else if (d.rateLevel === '低效') {
|
||||
color = 'red';
|
||||
}
|
||||
return '<p style="color:' + color + '">' + d.rateLevel + '</p>';
|
||||
}
|
||||
|
||||
}
|
||||
]],
|
||||
initComplete: function () {
|
||||
// 在表格渲染完成后，重新渲染序号列
|
||||
var that = this.elem.next();
|
||||
var tool = that.children('.layui-table-box').children('.layui-table-fixed').children('.layui-table-body').children('.layui-table');
|
||||
tool.find("tr").each(function (index, item) {
|
||||
$(this).find('td[data-field="LAY_TABLE_INDEX"]').text(index + 1);
|
||||
});
|
||||
},
|
||||
done: function (res, curr, count, origin) {
|
||||
// console.log(res);
|
||||
}
|
||||
})
|
||||
table.on('rowDouble(demo2)', function (obj) {
|
||||
initEcharts(obj.data);
|
||||
});
|
||||
}
|
||||
|
||||
function query(type) {
|
||||
let userName = $('#userName').val();
|
||||
let bidCode = parent.parent.$('#bidPro').val()
|
||||
let filterList = dataList.filter(item => {
|
||||
return item.bidCode === bidCode;
|
||||
});
|
||||
let list = filterList[0].list || []
|
||||
let data = [];
|
||||
if (userName) {
|
||||
data = list.filter(item => {
|
||||
return item.userName.indexOf(userName) > -1;
|
||||
});
|
||||
} else {
|
||||
data = list;
|
||||
}
|
||||
initTable(data);
|
||||
if(data && data.length > 0){
|
||||
initEcharts(data[0]);
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化 echarts
|
||||
function initEcharts(data) {
|
||||
if (myChart && myChart2) {
|
||||
myChart.dispose();
|
||||
myChart2.dispose();
|
||||
}
|
||||
myChart = echarts.init(document.getElementById("oneEcharts"));
|
||||
myChart2 = echarts.init(document.getElementById("twoEcharts"));
|
||||
initEchartsOne(data);
|
||||
function initEcharts() {
|
||||
// 后端查询数据
|
||||
const url = commonUrl + "screen/largeScreen/environment/getEnvironmentList?currentDay="+ "2025-07-23" + "&hour=" + "8"+ "&proId=" + "1";
|
||||
ajaxRequest(url, "get", null , true, function () {
|
||||
}, function (result) {
|
||||
if (result.code === 200) {
|
||||
console.log(result.data);
|
||||
initEchartsOne(result.data);
|
||||
} else if (result.code === 500) {
|
||||
layer.msg(result.msg, { icon: 2 });
|
||||
}
|
||||
}, function (xhr) {
|
||||
layer.msg(xhr, { icon: 2 });
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
function initEchartsOne(obj) {
|
||||
const data = [obj.unitTimeOutput];
|
||||
const data2 = [obj.standardTimeOutput];
|
||||
const colorArr1 = ["rgba(11, 83, 128)", "rgba(2, 143, 224)", "#2a7fcc"];
|
||||
const colorArr2 = ["rgb(12, 109, 122)", "rgba(1, 241, 228)", "#5ce1d6"];
|
||||
var color1 = {
|
||||
type: "linear",
|
||||
x: 0,
|
||||
x2: 1,
|
||||
y: 0,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: colorArr1[0],
|
||||
},
|
||||
{
|
||||
offset: 0.5,
|
||||
color: colorArr1[0],
|
||||
},
|
||||
{
|
||||
offset: 0.5,
|
||||
color: colorArr1[1],
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: colorArr1[1],
|
||||
},
|
||||
],
|
||||
};
|
||||
var color2 = {
|
||||
type: "linear",
|
||||
x: 0,
|
||||
x2: 1,
|
||||
y: 0,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: colorArr2[0],
|
||||
},
|
||||
{
|
||||
offset: 0.5,
|
||||
color: colorArr2[0],
|
||||
},
|
||||
{
|
||||
offset: 0.5,
|
||||
color: colorArr2[1],
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: colorArr2[1],
|
||||
},
|
||||
],
|
||||
};
|
||||
var barWidth = 18;
|
||||
const option = {
|
||||
backgroundColor: 'transparent',
|
||||
legend: {
|
||||
top: '3%',
|
||||
right: '3%',
|
||||
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'
|
||||
});
|
||||
});
|
||||
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: {
|
||||
fontSize: '12px',
|
||||
color: '#FFF',
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: function (params) {
|
||||
var str = params[0].name + ":";
|
||||
params.filter(function (item) {
|
||||
if (item.componentSubType == "bar") {
|
||||
str += "<br/>" + item.seriesName + "：" + item.value + obj.unitTimeOutputUnit;
|
||||
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
|
||||
}
|
||||
});
|
||||
return str;
|
||||
},
|
||||
},
|
||||
//图表大小位置限制
|
||||
grid: {
|
||||
x: '10%',
|
||||
x2: '5%',
|
||||
y: '15%',
|
||||
y2: '15%',
|
||||
},
|
||||
xAxis: {
|
||||
data: [obj.userName],
|
||||
//坐标轴
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: '#214776'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '温度',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
data: [23, 24, 23.5, 22, 23.5, 24.5, 23.5]
|
||||
},
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: '10'
|
||||
{
|
||||
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'
|
||||
}
|
||||
},
|
||||
type: 'category',
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#C5DFFB',
|
||||
fontWeight: 500,
|
||||
fontSize: '14'
|
||||
}
|
||||
legend: {
|
||||
data: ['实时值', '标准值']
|
||||
},
|
||||
axisTick: {
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: '16'
|
||||
},
|
||||
show: false,
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
axisLine: {
|
||||
//坐标轴轴线相关设置。数学上的x轴
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: 'dashed',//线的类型 虚线
|
||||
color: '#DEDEDE',
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['温度 (℃)', '湿度 (%)', '粉尘度 (mg/m³)']
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
name: '效率对标分析',
|
||||
nameTextStyle: {
|
||||
color: '#DEDEDE',
|
||||
fontSize: 12,
|
||||
padding: 10,
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
min: 0,//最小
|
||||
max: obj.max,//最大
|
||||
interval: obj.interval,//相差
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: 'dashed',//线的类型 虚线0
|
||||
opacity: 0.2//透明度
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
//坐标值标注
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#C5DFFB',
|
||||
}
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
z: 1,
|
||||
name: '单位时间产量',
|
||||
type: "bar",
|
||||
barWidth: barWidth,
|
||||
barGap: "0%",
|
||||
data: data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: color1,
|
||||
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'
|
||||
},
|
||||
{
|
||||
z: 3,
|
||||
name: '单位时间产量',
|
||||
type: "pictorialBar",
|
||||
symbolPosition: "end",
|
||||
data: data,
|
||||
symbol: "diamond",
|
||||
symbolOffset: ["-75%", "-60%"],
|
||||
symbolSize: [18, 12],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderWidth: 2,
|
||||
color: colorArr1[2]
|
||||
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
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
z: 1,
|
||||
name: '单位时间标准产量',
|
||||
type: "bar",
|
||||
barWidth: barWidth,
|
||||
barGap: "50%",
|
||||
data: data2,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: color2,
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
rotate: 15
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
z: 3,
|
||||
name: '单位时间标准产量',
|
||||
type: "pictorialBar",
|
||||
symbolPosition: "end",
|
||||
data: data2,
|
||||
symbol: "diamond",
|
||||
symbolOffset: ["75%", "-60%"],
|
||||
symbolSize: [18, 12],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderWidth: 2,
|
||||
color: colorArr2[2]
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
myChart.setOption(option, true);
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize();
|
||||
});
|
||||
}
|
||||
],
|
||||
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) => {
|
||||
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();
|
||||
});
|
||||
}
|
||||
|
|
@ -1,62 +1,162 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html lang="zh-CN">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>历史环境监测数据</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
|
||||
<link rel="stylesheet" href="../../css/font.css">
|
||||
<link rel="stylesheet" href="../../plugin/layui-v2.9.7/layui/css/layui.css">
|
||||
<link rel="stylesheet" href="../../css/dataAnalysis/commonStyle.css">
|
||||
<link rel="stylesheet" href="../../css/dataAnalysis/dataAnalysis.css">
|
||||
<link rel="stylesheet" href="../../css/shuiYin/shuiYin.css">
|
||||
<link rel="stylesheet" href="../../css/coreTable.css"/>
|
||||
<link rel="stylesheet" href="../../css/accessMge/accessMge.css">
|
||||
|
||||
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"></script>
|
||||
|
||||
<script src="../../js/publics/sm4.js" type="text/javascript"></script>
|
||||
<script src="../../js/publics/jquery-3.6.0.min.js" type="text/javascript"></script>
|
||||
<script src="../../js/publics/public.js"></script>
|
||||
<script src="../../plugin/scroll/jquery.nicescroll.min.js"></script>
|
||||
<script src="../../js/publics/echarts.js"></script>
|
||||
<script src="../../plugin/layui-v2.9.7/layui/layui.js"></script>
|
||||
<script src="../../js/publics/aescbc.js"></script>
|
||||
<script src="../../js/publics/sm3.js"></script>
|
||||
<script src="../../api/commonRequest.js"></script>
|
||||
<script src="../../plugin/watermark.js"></script>
|
||||
<title>环境检测</title>
|
||||
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primary: '#00C6BE',
|
||||
secondary: '#064446'
|
||||
},
|
||||
borderRadius: {
|
||||
'none': '0px',
|
||||
'sm': '2px',
|
||||
DEFAULT: '4px',
|
||||
'md': '8px',
|
||||
'lg': '12px',
|
||||
'xl': '16px',
|
||||
'2xl': '20px',
|
||||
'3xl': '24px',
|
||||
'full': '9999px',
|
||||
'button': '4px'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="main-box" class="layout">
|
||||
<div id="left-box">
|
||||
<div class="basic-search-box layout">
|
||||
<form class="layui-form basic-form layout" onclick="return false;" onsubmit="return false;">
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label" style="width: 80px;">工人:</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" id="userName" class="layui-input" autocomplete="off">
|
||||
</div>
|
||||
|
||||
<body class="bg-[#001d1e] min-h-[1024px]">
|
||||
<nav class="fixed top-0 left-0 right-0 bg-[#002628] shadow-sm z-50">
|
||||
<div class="max-w-[1440px] mx-auto px-6 h-16 flex items-center justify-between">
|
||||
<div class="flex items-center gap-8">
|
||||
<h1 class="text-2xl text-primary flex items-center gap-2">
|
||||
<i class="fas fa-leaf text-2xl w-8 h-8 flex items-center justify-center"></i>
|
||||
<span class="font-medium">环境监测</span>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<main class="max-w-[1440px] mx-auto px-6 pt-20">
|
||||
<div class="h-4"></div>
|
||||
<div class="grid grid-cols-3 gap-6">
|
||||
<div class="bg-[#002628] rounded-lg shadow-sm p-6 border border-[#004446]">
|
||||
<h3 class="text-lg font-medium mb-6 text-[#00C6BE]">GIS 无尘化安装监测</h3>
|
||||
<div id="gisChart" class="w-full h-[300px]"></div>
|
||||
</div>
|
||||
<div class="bg-[#002628] rounded-lg shadow-sm p-6 border border-[#004446]">
|
||||
<h3 class="text-lg font-medium mb-6 text-[#00C6BE]">有限空间监测</h3>
|
||||
<div id="spaceChart" class="w-full h-[300px]"></div>
|
||||
</div>
|
||||
<div class="bg-[#002628] rounded-lg shadow-sm p-6 border border-[#004446]">
|
||||
<h3 class="text-lg font-medium mb-6 text-[#00C6BE]">实时数据</h3>
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<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>
|
||||
</div>
|
||||
<button type="button" class="layui-btn layui-btn-normal" onclick="query(1)">
|
||||
<i class="layui-icon layui-icon-query"></i>查询
|
||||
</button>
|
||||
<div class="text-lg font-medium text-[#00C6BE]">0.5 mm</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<table id="demo2" lay-filter="demo2"></table>
|
||||
</div>
|
||||
<div id="right-box" class="layout">
|
||||
<div id="oneEcharts">
|
||||
|
||||
</div>
|
||||
<div id="twoEcharts">
|
||||
|
||||
<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>
|
||||
</div>
|
||||
<div class="text-lg font-medium text-[#00C6BE]">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>
|
||||
</div>
|
||||
<div class="text-lg font-medium text-[#00C6BE]">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>
|
||||
</div>
|
||||
<div class="text-lg font-medium text-[#00C6BE]">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>
|
||||
</div>
|
||||
<div class="text-lg font-medium text-[#00C6BE]">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>
|
||||
</div>
|
||||
<div class="text-lg font-medium text-[#00C6BE]">2000 lx</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-6"></div>
|
||||
<div class="grid grid-cols-12 gap-6">
|
||||
<div class="col-span-12">
|
||||
<div class="bg-[#002628] rounded-lg shadow-sm p-6 border border-[#004446]">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h3 class="text-lg font-medium text-[#00C6BE]">监测数据趋势</h3>
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="!rounded-button px-3 py-1.5 bg-primary/10 text-primary" id="lineChartBtn">
|
||||
折线图
|
||||
</button>
|
||||
<button class="!rounded-button px-3 py-1.5 text-gray-600 hover:bg-gray-100"
|
||||
id="barChartBtn">
|
||||
柱状图
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="trendChart" class="w-full h-[500px]"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
|
||||
</script>
|
||||
</body>
|
||||
<style>
|
||||
.layui-table-init {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
</style>
|
||||
<script src="../../js/pages/newDataAnalysis/environDetectionData.js" type="text/javascript"></script>
|
||||
<script src="../../js/pages/newDataAnalysis/environDetection.js" type="text/javascript"></script>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
Loading…
Reference in New Issue