From c709e3310a786033efeb19581bf539660fb62fa3 Mon Sep 17 00:00:00 2001
From: fl <3098731433@qq.com>
Date: Wed, 23 Jul 2025 22:24:56 +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 | 548 ++++++++-----------
 pages/newDataAnalysis/environDetection.html  | 174 ++++--
 2 files changed, 367 insertions(+), 355 deletions(-)

diff --git a/js/pages/newDataAnalysis/environDetection.js b/js/pages/newDataAnalysis/environDetection.js
index 557ad94..f6c4ad6 100644
--- a/js/pages/newDataAnalysis/environDetection.js
+++ b/js/pages/newDataAnalysis/environDetection.js
@@ -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();
+        });
 }
\ No newline at end of file
diff --git a/pages/newDataAnalysis/environDetection.html b/pages/newDataAnalysis/environDetection.html
index 4167e0c..5699d73 100644
--- a/pages/newDataAnalysis/environDetection.html
+++ b/pages/newDataAnalysis/environDetection.html
@@ -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>
\ No newline at end of file