niushuai233/gas-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 💯 第一版

Browse Source
This commit is contained in:
niushuai233 2024-06-08 17:05:27 +08:00
parent 0f6f0b1d55
commit 9e16f14a6d
4 changed files with 268 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/main/java/cc/niushuai/gasweb/controller/ChartController.java
View File

@ -16,16 +16,24 @@
package cc.niushuai.gasweb.controller;
import cc.niushuai.gasweb.entity.ChartResp;
import cc.niushuai.gasweb.entity.Gas;
import cc.niushuai.gasweb.repository.GasRepository;
import cn.hutool.core.collection.CollUtil;
import cn.hutool.core.date.DateUtil;
import io.swagger.v3.oas.annotations.Operation;
import io.swagger.v3.oas.annotations.tags.Tag;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import javax.annotation.Resource;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
/**
* 图表请求入口
@ -50,4 +58,44 @@ public class ChartController {
return "hello test";
}
@Operation(summary = "根据类型获取不同表的数据")
@PostMapping("/fetch")
@ResponseBody
public Map<String, ChartResp> fetch(String startDateTime, String endDateTime) {
Map<String, ChartResp> map = new HashMap<>();
List<Gas> allList = gasRepository.findAllByTimeBetweenOrderByIdAsc(DateUtil.parseDateTime(startDateTime), DateUtil.parseDateTime(endDateTime));
if (CollUtil.isNotEmpty(allList)) {
ChartResp co = new ChartResp("CO浓度");
ChartResp co2 = new ChartResp("CO2浓度");
ChartResp ch4 = new ChartResp("CH4浓度");
ChartResp temperature = new ChartResp("环境温度");
ChartResp rp2024_temperature = new ChartResp("rp2024温度");
for (Gas gas : allList) {
String dateTime = DateUtil.formatDateTime(gas.getTime());
co.getData().add(new ChartResp.Data(dateTime, gas.getCo()));
co2.getData().add(new ChartResp.Data(dateTime, gas.getCo2()));
ch4.getData().add(new ChartResp.Data(dateTime, gas.getCh4()));
temperature.getData().add(new ChartResp.Data(dateTime, gas.getTemperature()));
rp2024_temperature.getData().add(new ChartResp.Data(dateTime, gas.getRp2040Temperature()));
}
map.put("co", co);
map.put("co2", co2);
map.put("ch4", ch4);
map.put("temperature", temperature);
map.put("rp2024_temperature", rp2024_temperature);
}
return map;
}
}

6
src/main/java/cc/niushuai/gasweb/repository/GasRepository.java
View File

@ -20,6 +20,9 @@ import cc.niushuai.gasweb.entity.Gas;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;
import java.util.Date;
import java.util.List;
/**
* gas sql repository
*
@ -29,4 +32,7 @@ import org.springframework.stereotype.Repository;
*/
@Repository
public interface GasRepository extends JpaRepository<Gas, Long> {
List<Gas> findAllByTimeBetweenOrderByIdAsc(Date startDateTime, Date endDateTime);
}

3
src/main/resources/application.yml
View File

@ -48,6 +48,9 @@ spring:
username: ${MYSQL_USERNAME}
password: ${MYSQL_PASSWORD}
jpa:
open-in-view: false
logging:
file:
name: logs/gas-web.log

260
src/main/resources/templates/index.ftl
View File

@ -5,14 +5,12 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<#--bootstrap-->
<link rel="stylesheet" href="${request.contextPath}/bootstrap-3.4.1/bootstrap.min.css"/>
<script src="${request.contextPath}/jquery-3.7.1/jquery.min.js"></script>
<script src="${request.contextPath}/bootstrap-3.4.1/bootstrap.min.js"></script>
<#--datepicker-->
<link rel="stylesheet" href="${request.contextPath}/datepicker/datepicker.css"/>
<script src="${request.contextPath}/echarts/echarts.min.js"></script>
<script src="${request.contextPath}/index/main.js"></script>
<style>
.container {
@ -20,7 +18,11 @@
}
.charts {
height: 350px;
height: 400px;
}
.J-datepicker-range {
text-align: right;
}
</style>
</head>
@ -29,78 +31,238 @@
<div class="container">
<div class="row">
<h2>Gas监控</h2>
<div class="c-datepicker-date-editor J-datepicker-range">
<i class="c-datepicker-range__icon kxiconfont icon-clock"></i>
<input autocomplete="off" placeholder="开始日期" id="startDateTime" name="" class="c-datepicker-data-input"
value="">
<span class="c-datepicker-range-separator">-</span>
<input autocomplete="off" placeholder="结束日期" id="endDateTime" name="" class="c-datepicker-data-input"
value="">
</div>
</div>
<br/><br/><br/>
<div class="row">
<div class="col-xs-6 col-md-4">
<div id="main1" class="charts"></div>
<div id="coDiv" class="charts"></div>
</div>
<div class="col-xs-6 col-md-4">
<div id="main2" class="charts"></div>
<div id="co2Div" class="charts"></div>
</div>
<div class="col-xs-6 col-md-4">
<div id="main3" class="charts"></div>
<div id="ch4Div" class="charts"></div>
</div>
</div>
<div class="row">
<div class="col-xs-9 col-md-6">
<div id="main4" class="charts"></div>
<div id="tempDiv" class="charts"></div>
</div>
<div class="col-xs-9 col-md-6">
<div id="main5" class="charts"></div>
<div id="rp2040_tempDiv" class="charts"></div>
</div>
</div>
</div>
</body>
<#--jq-->
<script src="${request.contextPath}/jquery-3.7.1/jquery.min.js"></script>
<#--bootstrap-->
<script src="${request.contextPath}/bootstrap-3.4.1/bootstrap.min.js"></script>
<#--datepicker-->
<script src="${request.contextPath}/datepicker/moment.min.js"></script>
<script src="${request.contextPath}/datepicker/datepicker.all.min.js"></script>
<script src="${request.contextPath}/datepicker/datepicker.en.js"></script>
<#--echarts-->
<script src="${request.contextPath}/echarts/echarts.min.js"></script>
<script src="${request.contextPath}/index/main.js"></script>
<script src="${request.contextPath}/chart/options.js"></script>
<script>
let contextPath = "${request.contextPath}/";
let startDateTime = moment().subtract(3600, 'seconds').format("YYYY-MM-DD HH:mm:ss");
$("#startDateTime").val(startDateTime);
let endDateTime = moment().format("YYYY-MM-DD HH:mm:ss");
$("#endDateTime").val(endDateTime);
// 基于准备好的dom，初始化echarts实例
var myChart1 = echarts.init(document.getElementById('main1'));
var myChart2 = echarts.init(document.getElementById('main2'));
var myChart3 = echarts.init(document.getElementById('main3'));
var myChart4 = echarts.init(document.getElementById('main4'));
var myChart5 = echarts.init(document.getElementById('main5'));
var coChart = echarts.init(document.getElementById('coDiv'));
var co2Chart = echarts.init(document.getElementById('co2Div'));
var ch4Chart = echarts.init(document.getElementById('ch4Div'));
var tempChart = echarts.init(document.getElementById('tempDiv'));
var rp2040_tempChart = echarts.init(document.getElementById('rp2040_tempDiv'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'COMPLE'
},
tooltip: {},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth: true
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart1.setOption(option);
myChart2.setOption(option);
myChart3.setOption(option);
myChart4.setOption(option);
myChart5.setOption(option);
coChart.setOption(getOption('CO浓度', ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], [820, 932, 901, 934, 1290, 1330, 1320], 'ppm'));
co2Chart.setOption(getOption('CO2浓度', ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], [820, 932, 901, 934, 1290, 1330, 1320], 'ppm'));
ch4Chart.setOption(getOption('CH4浓度', ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], [820, 932, 901, 934, 1290, 1330, 1320], 'ppm'));
tempChart.setOption(getOption('环境温度', ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], [820, 932, 901, 934, 1290, 1330, 1320], '°C'));
rp2040_tempChart.setOption(getOption('rp2040温度', ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], [820, 932, 901, 934, 1290, 1330, 1320], '°C'));
window.addEventListener('resize', function () {
console.log(myChart);
myChart1.resize();
myChart2.resize();
myChart3.resize();
myChart4.resize();
myChart5.resize();
coChart.resize();
co2Chart.resize();
ch4Chart.resize();
tempChart.resize();
rp2040_tempChart.resize();
});
function refreshChartDate() {
$.post(contextPath + "chart/fetch", {
"startDateTime": startDateTime,
"endDateTime": endDateTime
}, function (data) {
if (data) {
rebuildChart(coChart, data.co, 'ppm');
rebuildChart(co2Chart, data.co2, 'ppm');
rebuildChart(ch4Chart, data.ch4, 'ppm');
rebuildChart(tempChart, data.temperature, '°C');
rebuildChart(rp2040_tempChart, data.rp2024_temperature, '°C');
}
});
}
$(function () {
// buildTable($table, [])
var DATAPICKERAPI = {
// 填充当前月默认值函数
activeMonthRange: function () {
return {
begin: moment().set({'date': 1, 'hour': 0, 'minute': 0, 'second': 0}).format('YYYY-MM-DD HH:mm:ss'),
end: moment().set({'hour': 23, 'minute': 59, 'second': 59}).format('YYYY-MM-DD HH:mm:ss')
}
},
// 新增帮助生成近n小时快捷选项值
shortcutPrevHours: function (hour) {
var nowDay = moment().get('date');
var prevHours = moment().subtract(hour, 'hours');
var prevDate = prevHours.get('date') - nowDay;
var nowTime = moment().format('HH:mm:ss');
var prevTime = prevHours.format('HH:mm:ss');
return {
day: prevDate + ',0',
time: prevTime + ',' + nowTime,
name: '最近' + hour + '小时'
}
},
// 帮助生成当月快捷选项值
shortcutMonth: function () {
// 当月
var nowDay = moment().get('date');
var prevMonthFirstDay = moment().subtract(1, 'months').set({'date': 1});
var prevMonthDay = moment().diff(prevMonthFirstDay, 'days');
return {
now: '-' + nowDay + ',0',
prev: '-' + prevMonthDay + ',-' + nowDay
}
},
// 注意为函数：快捷选项option:只能同一个月份内的
rangeMonthShortcutOption1: function () {
var result = DATAPICKERAPI.shortcutMonth();
// 近18小时
var resultTime1 = DATAPICKERAPI.shortcutPrevHours(1);
var resultTime2 = DATAPICKERAPI.shortcutPrevHours(2);
var resultTime12 = DATAPICKERAPI.shortcutPrevHours(12);
return [
// 近n小时
{
name: resultTime1.name,
day: resultTime1.day,
time: resultTime1.time
}, {
name: resultTime2.name,
day: resultTime2.day,
time: resultTime2.time
}, {
name: resultTime12.name,
day: resultTime12.day,
time: resultTime12.time
}, {
name: '今天',
day: '-0,-0',
time: '00:00:00,23:59:59'
}, {
name: '昨天',
day: '-1,-1',
time: '00:00:00,23:59:59'
}, {
name: '最近一周',
day: '-7,0'
}, {
name: '最近一个月',
day: '-30,0'
}];
},
};
$('.J-datepicker-range').datePicker({
hasShortcut: true,
isRange: true,
format: 'YYYY-MM-DD HH:mm:ss',
shortcutOptions: DATAPICKERAPI.rangeMonthShortcutOption1(),
hide: function (type) {
console.info('type：', type)
if (type == 'confirm' || type == 'shortcut') {
startDateTime = $("#startDateTime").val();
endDateTime = $("#endDateTime").val();
console.info(startDateTime, endDateTime);
refreshChartDate();
} else {
console.log("should be attach?");
}
}
});
//时分秒年月日范围，包含最大最小值
// $('.J-datepicker-range').datePicker({
// hasShortcut: true,
// isRange: true,
// format:'YYYY-MM-DD HH:mm:ss',
// shortcutOptions: [{
// name: '今天',
// day: '-0,-0',
// time: '00:00:00,23:59:59'
// }, {
// name: '昨天',
// day: '-1,-1',
// time: '00:00:00,23:59:59'
// }, {
// name: '最近一周',
// day: '-7,0',
// time: '00:00:00,'
// }, {
// name: '最近一个月',
// day: '-30,0',
// time: '00:00:00,'
// }, {
// name: '最近三个月',
// day: '-90, 0',
// time: '00:00:00,'
// }],
// hide: function (type) {
// console.info('type：', type)
// if (type == 'confirm' || type == 'shortcut') {
//
// startDateTime = $("#startDateTime").val();
// endDateTime = $("#endDateTime").val();
//
// console.info(startDateTime, endDateTime);
//
// refreshChartDate();
// } else {
// console.log("should be attach?");
// }
// }
// });
refreshChartDate();
})
</script>
</html>