diff --git a/img/dataAnalysisOctober/airQuality.png b/img/dataAnalysisOctober/airQuality.png new file mode 100644 index 0000000..2c52503 Binary files /dev/null and b/img/dataAnalysisOctober/airQuality.png differ diff --git a/img/dataAnalysisOctober/environmentalWarning.png b/img/dataAnalysisOctober/environmentalWarning.png new file mode 100644 index 0000000..ed80cda Binary files /dev/null and b/img/dataAnalysisOctober/environmentalWarning.png differ diff --git a/img/dataAnalysisOctober/humiture.png b/img/dataAnalysisOctober/humiture.png new file mode 100644 index 0000000..2417865 Binary files /dev/null and b/img/dataAnalysisOctober/humiture.png differ diff --git a/img/dataAnalysisOctober/noise.png b/img/dataAnalysisOctober/noise.png new file mode 100644 index 0000000..c704827 Binary files /dev/null and b/img/dataAnalysisOctober/noise.png differ diff --git a/img/dataAnalysisOctober/windSpeed.png b/img/dataAnalysisOctober/windSpeed.png new file mode 100644 index 0000000..9890311 Binary files /dev/null and b/img/dataAnalysisOctober/windSpeed.png differ diff --git a/js/pages/dataAnalysisOctober/environDetection.js b/js/pages/dataAnalysisOctober/environDetection.js new file mode 100644 index 0000000..0e00aac --- /dev/null +++ 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); + } + }) + +} diff --git a/pages/dataAnalysisOctober/energySavingAnalysis.html b/pages/dataAnalysisOctober/energySavingAnalysis.html index 44e8c14..089104a 100644 --- a/pages/dataAnalysisOctober/energySavingAnalysis.html +++ b/pages/dataAnalysisOctober/energySavingAnalysis.html @@ -3,6 +3,7 @@
+