171 lines
9.2 KiB
HTML
171 lines
9.2 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<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/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="../../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>
|
||
|
|
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>
|
||
|
|
<style>
|
||
|
|
body{
|
||
|
|
background-color: transparent !important;
|
||
|
|
}
|
||
|
|
.shadow-sm{
|
||
|
|
background: linear-gradient(135deg, rgba(22, 186, 170, 0.1) 0%, rgba(22, 186, 170, 0.05) 100%) !important;
|
||
|
|
border: 1px solid rgba(22, 186, 170, 0.3) !important;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body class="bg-[#001d1e] min-h-[1024px]">
|
||
|
|
<nav class="fixed top-0 left-0 right-0 bg-[#002628] shadow-sm z-50" style="margin-top: 10px;">
|
||
|
|
<div class="max-w-[1440px] mx-auto px-6 h-16 flex items-center justify-between" style="align-items: end;">
|
||
|
|
<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 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>
|
||
|
|
</nav>
|
||
|
|
<main class="max-w-[1440px] mx-auto px-6 pt-20">
|
||
|
|
<div class="h-4"></div>
|
||
|
|
<div class="grid grid-cols-4 gap-6">
|
||
|
|
|
||
|
|
<div class="col-span-2 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]" id="slopeDisplacementStatus">正常</span>
|
||
|
|
</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]" id="temperatureStatus">正常</span>
|
||
|
|
</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]" id="humidityStatus">警告</span>
|
||
|
|
</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]" id="airQualityIndexStatus">正常</span>
|
||
|
|
</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]" id="noiseLevelStatus">正常</span>
|
||
|
|
</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]" id="illuminationStatus">危险</span>
|
||
|
|
</div>
|
||
|
|
<div class="text-lg font-medium text-[#00C6BE]" id="illuminationValue">2000 lx</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-span-1 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="col-span-1 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>
|
||
|
|
<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>
|
||
|
|
<script src="../../js/pages/newDataAnalysis/environDetection.js" type="text/javascript"></script>
|
||
|
|
|
||
|
|
</html>
|