数据分析-

2025-10-16 18:13:19 +08:00 · 2025-10-16 18:13:19 +08:00 · 2ae475daee
parent 59da35f420
commit 2ae475daee
8 changed files with 602 additions and 0 deletions
--- a/img/dataAnalysisOctober/airQuality.png
+++ b/img/dataAnalysisOctober/airQuality.png
--- a/img/dataAnalysisOctober/environmentalWarning.png
+++ b/img/dataAnalysisOctober/environmentalWarning.png
--- a/img/dataAnalysisOctober/humiture.png
+++ b/img/dataAnalysisOctober/humiture.png
--- a/img/dataAnalysisOctober/noise.png
+++ b/img/dataAnalysisOctober/noise.png
--- a/img/dataAnalysisOctober/windSpeed.png
+++ b/img/dataAnalysisOctober/windSpeed.png
--- a/js/pages/dataAnalysisOctober/environDetection.js
+++ b/js/pages/dataAnalysisOctober/environDetection.js
@ -0,0 +1,473 @@
+let table, layer, form;
+let fontSize = '14', fontFamily = 'Alibaba PuHuiTi R', fontColor = '#fff';
+
+const bidCode = parent.$('#bidPro').val();
+layui.use(["layer", "table", "form"], function () {
+    layer = layui.layer;
+    table = layui.table;
+    form = layui.form;
+
+    getTemperatureHumidityChart();
+
+    getNoiseChart();
+
+    getWindSpeedChart();
+
+    getAirQualityChart();
+
+    wearGarList();
+});
+
+function getTemperatureHumidityChart() {
+    const timeData = ["8:00", "9:00", "10:00", "11:00", "12:00", "13:00", "14:00"]
+    const temperatureData = [22, 28, 18, 35, 15, 26, 20] // Temperature in °C
+    const humidityData = [65, 70, 62, 75, 58, 72, 68] // Humidity in %
+    initTemperatureHumidityChart(timeData, temperatureData, humidityData)
+}
+
+function initTemperatureHumidityChart(timeData, temperatureData, humidityData) {
+    const myChart = echarts.init(document.getElementById("temperatureHumidityChart"));
+    const option = {
+        grid: {
+            left: "8%",
+            right: "8%",
+            top: "20%",
+            bottom: "5%",
+            containLabel: true,
+        },
+        legend: {
+            data: ["温度", "湿度"],
+            top: "12%",
+            right: "15%",
+            textStyle: {
+                color: "#ffffff",
+                fontSize: 12,
+            },
+            itemWidth: 14,
+            itemHeight: 4,
+            icon: "rect",
+        },
+        xAxis: {
+            type: "category",
+            data: timeData,
+            axisLine: {
+                lineStyle: {
+                    color: "#A6B8BB",
+                },
+            },
+            axisLabel: {
+                color: "#A6B8BB",
+                fontSize: 14,
+            },
+            axisTick: {
+                show: false,
+            },
+        },
+        yAxis: [
+            {
+                type: "value",
+                name: "°C",
+                nameTextStyle: {
+                    color: "#ffffff",
+                    fontSize: 12,
+                },
+                axisLine: {
+                    show: false,
+                },
+                axisLabel: {
+                    color: "#A6B8BB",
+                    fontSize: 12,
+                },
+                splitLine: {
+                    lineStyle: {
+                        color: 'rgba(255, 255, 255, 0.2)',
+                        type: 'dashed'
+                    }
+                },
+            },
+            {
+                type: "value",
+                name: "%",
+                nameTextStyle: {
+                    color: "#ffffff",
+                    fontSize: 12,
+                },
+                axisLine: {
+                    show: false,
+                },
+                axisLabel: {
+                    color: "#A6B8BB",
+                    fontSize: 12,
+                },
+                splitLine: {
+                    show: false,
+                },
+            },
+        ],
+        series: [
+            {
+                name: "温度",
+                type: "bar",
+                data: temperatureData,
+                barWidth: "35%",
+                itemStyle: {
+                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {offset: 1, color: "#134045"},
+                        {offset: 0.5, color: "#3EB2BB"},
+                        {offset: 0, color: "#59E1FF"},
+                    ]),
+                    borderRadius: [4, 4, 0, 0],
+                },
+
+            },
+            {
+                name: "湿度",
+                type: "line",
+                yAxisIndex: 1,
+                data: humidityData,
+                smooth: true,
+                lineStyle: {
+                    color: "#00ff88",
+                    width: 3,
+                    shadowColor: "rgba(0, 255, 136, 0.5)",
+                    shadowBlur: 10,
+                },
+                itemStyle: {
+                    color: "#00ff88",
+                    borderWidth: 2,
+                    borderColor: "#00ff88",
+                },
+                symbolSize: 0,
+            },
+        ],
+    }
+    myChart.setOption(option)
+    // 响应窗口大小变化
+    window.addEventListener('resize', function () {
+        myChart.resize();
+    });
+}
+
+function getNoiseChart() {
+    var timeData = ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00'];
+    var noiseData = [20, 35, 45, 60, 75, 65, 50];
+    initNoiseChart(timeData, noiseData);
+}
+
+function initNoiseChart(timeData, noiseData) {
+    var myChart = echarts.init(document.getElementById('noiseChart'));
+    var option = {
+        grid: {
+            left: '5%',
+            right: '5%',
+            bottom: '5%',
+            top: '23%',
+            containLabel: true
+        },
+        xAxis: {
+            type: 'category',
+            data: timeData,
+            axisLine: {
+                lineStyle: {
+                    color: '#A6B8BB'
+                }
+            },
+            axisLabel: {
+                color: '#A6B8BB',
+                fontSize: 12
+            },
+            axisTick: {
+                show: false
+            }
+        },
+        yAxis: {
+            type: 'value',
+            name: '分贝',
+            nameTextStyle: {
+                color: '#ffffff',
+                fontSize: 12,
+            },
+            axisLine: {
+                show: false,
+            },
+            axisLabel: {
+                color: '#A6B8BB',
+                fontSize: 12,
+            },
+            splitLine: {
+                lineStyle: {
+                    color: 'rgba(255, 255, 255, 0.2)',
+                    type: 'dashed'
+                }
+            }
+        },
+        series: [
+            {
+                name: '噪声',
+                type: 'line',
+                data: noiseData,
+                symbolSize: 0,
+                lineStyle: {
+                    color: "#00FEFC",
+                    width: 3,
+                    shadowColor: "rgba(0, 255, 136, 0.5)",
+                    shadowBlur: 10,
+                },
+                itemStyle: {
+                    color: "#00ff88",
+                    borderWidth: 2,
+                    borderColor: "#00ff88",
+                },
+                areaStyle: {
+                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {offset: 0, color: '#1ED6FF'},
+                        {offset: 1, color: 'rgba(30,214,255,0)'}
+                    ])
+                }
+            }]
+    };
+    myChart.setOption(option);
+    // 响应窗口大小变化
+    window.addEventListener('resize', function () {
+        myChart.resize();
+    });
+}
+
+function getWindSpeedChart() {
+    var timeData = ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00'];
+    var noiseData = [20, 35, 45, 60, 75, 65, 50];
+    initWindSpeedChart(timeData, noiseData);
+}
+
+function initWindSpeedChart(timeData, noiseData) {
+    var myChart = echarts.init(document.getElementById('windSpeedChart'));
+    var option = {
+        grid: {
+            left: '5%',
+            right: '5%',
+            bottom: '5%',
+            top: '23%',
+            containLabel: true
+        },
+        xAxis: {
+            type: 'category',
+            data: timeData,
+            axisLine: {
+                lineStyle: {
+                    color: '#A6B8BB'
+                }
+            },
+            axisLabel: {
+                color: '#A6B8BB',
+                fontSize: 12
+            },
+            axisTick: {
+                show: false
+            }
+        },
+        yAxis: {
+            type: 'value',
+            name: 'm/s',
+            nameTextStyle: {
+                color: '#ffffff',
+                fontSize: 12,
+            },
+            axisLine: {
+                show: false,
+            },
+            axisLabel: {
+                color: '#A6B8BB',
+                fontSize: 12,
+            },
+            splitLine: {
+                lineStyle: {
+                    color: 'rgba(255, 255, 255, 0.2)',
+                    type: 'dashed'
+                }
+            }
+        },
+        series: [
+            {
+                name: '噪声',
+                type: 'line',
+                data: noiseData,
+                symbolSize: 0,
+                lineStyle: {
+                    color: "#1CFFA3 ",
+                    width: 3,
+                    shadowColor: "rgba(0, 255, 136, 0.5)",
+                    shadowBlur: 10,
+                },
+                itemStyle: {
+                    color: "#00ff88",
+                    borderWidth: 2,
+                    borderColor: "#00ff88",
+                },
+                areaStyle: {
+                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {offset: 0, color: '#1CFFA3'},
+                        {offset: 1, color: 'rgba(28,255,163,0)'}
+                    ])
+                }
+            }]
+    };
+    myChart.setOption(option);
+    // 响应窗口大小变化
+    window.addEventListener('resize', function () {
+        myChart.resize();
+    });
+}
+
+function getAirQualityChart() {
+    var timeData = ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00'];
+    var pm25Data = [45, 60, 75, 85, 95, 80, 70];
+    var pm10Data = [55, 70, 85, 95, 105, 90, 80];
+    initAirQualityChart(timeData, pm25Data, pm10Data);
+}
+
+function initAirQualityChart(timeData, pm25Data, pm10Data) {
+    var myChart = echarts.init(document.getElementById('airQualityChart'));
+    var option = {
+        legend: {
+            data: ['PM2.5', 'PM10'],
+            top: "12%",
+            right: "5%",
+            textStyle: {
+                color: "#ffffff",
+                fontSize: 12,
+            },
+            itemWidth: 14,
+            itemHeight: 4,
+            icon: "rect",
+        },
+
+        grid: {
+            left: '5%',
+            right: '5%',
+            bottom: '5%',
+            top: '22%',
+            containLabel: true
+        },
+        xAxis: {
+            type: 'category',
+            data: timeData,
+            axisLine: {
+                lineStyle: {
+                    color: '#A6B8BB'
+                }
+            },
+            axisLabel: {
+                color: '#A6B8BB',
+                fontSize: 12
+            },
+            axisTick: {
+                show: false
+            }
+        },
+        yAxis: {
+            type: 'value',
+            name: 'Jpg/m³',
+            nameTextStyle: {
+                color: 'rgba(255,255,255,0.8)',
+                fontSize: 12
+            },
+            axisLine: {
+                show:false,
+            },
+            axisLabel: {
+                color: '#A6B8BB',
+                fontSize: 12,
+                formatter: '{value}'
+            },
+            splitLine: {
+                lineStyle: {
+                    color: 'rgba(255, 255, 255, 0.2)',
+                    type: 'dashed'
+                }
+            }
+        },
+        series: [
+            {
+                name: 'PM2.5',
+                type: 'line',
+                data: pm25Data,
+                symbolSize: 0,
+                color: '#00FEFC', // 添加color属性
+                lineStyle: {
+                    color: '#00FEFC',
+                    width: 3
+                },
+                areaStyle: {
+                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {offset: 0, color: '#1ED6FF'},
+                        {offset: 1, color: 'rgba(30,214,255,0)'}
+                    ])
+                }
+            },
+            {
+                name: 'PM10',
+                type: 'line',
+                data: pm10Data,
+                color: '#1CFFA3', // 添加color属性
+                symbolSize: 0,
+                lineStyle: {
+                    color: '#1CFFA3',
+                    width: 3
+                },
+                areaStyle: {
+                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {offset: 0, color: '#1CFFA3'},
+                        {offset: 1, color: 'rgba(28,255,163,0)'}
+                    ])
+                }
+            }
+        ]
+    };
+
+    // 使用配置项和数据显示图表
+    myChart.setOption(option);
+
+    // 响应窗口大小变化
+    window.addEventListener('resize', function () {
+        myChart.resize();
+    });
+}
+
+function wearGarList(){
+    const url = commonUrl + "screen/largeScreen/personnelControl/getWearEquipmentList";
+
+    table.render({
+        elem: '#dome1',
+        url: url,
+        skin: 'line',
+        page: false,
+        headers:{
+            decrypt:"decrypt",
+            "Authorization":token
+        },
+        where: {
+            roleCode: roleCode,
+            orgId: orgId,
+            userId: userId,
+            bidCode: bidCode
+        },
+        cols: [[
+            {field: 'number', width:'10%',title: '序号', align: 'center', type: 'numbers'},
+            {field: 'deviceType', width:'30%', align: 'center', title: '预警类型'},
+            {field: 'deviceName', width:'30%', align: 'center', title: '预警时间'},
+            {field: 'userName', width:'30%', align: 'center', title: '预警内容'},
+        ]],
+        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);
+        }
+    })
+
+}
--- a/pages/dataAnalysisOctober/energySavingAnalysis.html
+++ b/pages/dataAnalysisOctober/energySavingAnalysis.html
@ -3,6 +3,7 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title> 节能减排分析</title>
    <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">
@ -18,6 +19,7 @@
    <script src="../../js/publics/aescbc.js"></script>
    <script src="../../js/publics/sm3.js"></script>
    <script src="../../api/commonRequest.js"></script>
+
    <style>
        #proQuality {
            width: 100%;
--- a/pages/dataAnalysisOctober/environDetection.html
+++ b/pages/dataAnalysisOctober/environDetection.html
@ -0,0 +1,127 @@
+<!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="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">
+    <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/4.3.0/echarts.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>
+
+    <style type="text/css">
+        #proQuality {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            flex-direction: row;
+        }
+
+        .left-box{
+            width: 33%;
+            height: 100%;
+        }
+        .center-box{
+            margin-left: 1%;
+            width: 33%;
+            height: 100%;
+        }
+        .right-box{
+            margin-left: 1%;
+            width: 33%;
+            height: 100%;
+            background: url("../../img/dataAnalysisOctober/environmentalWarning.png") no-repeat 0 0 / 100% 100%;
+            background-position: center center !important;
+        }
+
+        .left-box-top{
+            background: url("../../img/dataAnalysisOctober/humiture.png") no-repeat 0 0 / 100% 100%;
+            background-position: center center !important;
+            height: 49%;
+            width: 100%;
+        }
+        .left-box-bottom{
+            background: url("../../img/dataAnalysisOctober/noise.png") no-repeat 0 0 / 100% 100%;
+            background-position: center center !important;
+            height: 49%;
+            width: 100%;
+            margin-top: 2%;
+        }
+
+        .center-box-top{
+            background: url("../../img/dataAnalysisOctober/windSpeed.png") no-repeat 0 0 / 100% 100%;
+            background-position: center center !important;
+            height: 49%;
+            width: 100%;
+        }
+
+        .center-box-bottom{
+            background: url("../../img/dataAnalysisOctober/airQuality.png") no-repeat 0 0 / 100% 100%;
+            background-position: center center !important;
+            height: 49%;
+            width: 100%;
+            margin-top: 2%;
+        }
+
+        #temperatureHumidityChart {
+            width: 100%;
+            height: 100%;
+        }
+        #noiseChart{
+            width: 100%;
+            height: 100%;
+        }
+
+        #windSpeedChart{
+            width: 100%;
+            height: 100%;
+        }
+
+        #airQualityChart{
+            width: 100%;
+            height: 100%;
+        }
+    </style>
+
+</head>
+
+<body >
+    <div id="proQuality">
+        <div class="left-box">
+            <div class="left-box-top">
+                <div id="temperatureHumidityChart"></div>
+            </div>
+            <div class="left-box-bottom">
+                <div id="noiseChart"></div>
+            </div>
+        </div>
+        <div class="center-box">
+            <div class="center-box-top">
+                <div id="windSpeedChart"></div>
+            </div>
+            <div class="center-box-bottom">
+                <div id="airQualityChart"></div>
+            </div>
+        </div>
+        <div class="right-box">
+            <div style="height: 94%;width: 96%;overflow: auto;margin-top: 6%;margin-left: 2%;">
+                <table id="dome1" lay-filter="test"></table>
+            </div>
+        </div>
+    </div>
+</body>
+<script src="../../js/pages/dataAnalysisOctober/environDetection.js" type="text/javascript"></script>
+
+</html>