feat: 💯 第一版

src/main/java/cc/niushuai/gasweb/controller/ChartController.java

@@ -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;
+    }
+
+
 }

src/main/java/cc/niushuai/gasweb/repository/GasRepository.java

@@ -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);
+
 }

src/main/resources/application.yml

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

src/main/resources/templates/index.ftl

@@ -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>
+    <#--datepicker-->
-    <script src="${request.contextPath}/bootstrap-3.4.1/bootstrap.min.js"></script>
+    <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 coChart = echarts.init(document.getElementById('coDiv'));
-    var myChart2 = echarts.init(document.getElementById('main2'));
+    var co2Chart = echarts.init(document.getElementById('co2Div'));
-    var myChart3 = echarts.init(document.getElementById('main3'));
+    var ch4Chart = echarts.init(document.getElementById('ch4Div'));
-    var myChart4 = echarts.init(document.getElementById('main4'));
+    var tempChart = echarts.init(document.getElementById('tempDiv'));
-    var myChart5 = echarts.init(document.getElementById('main5'));
+    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);
+    coChart.setOption(getOption('CO浓度', ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], [820, 932, 901, 934, 1290, 1330, 1320], 'ppm'));
-    myChart2.setOption(option);
+    co2Chart.setOption(getOption('CO2浓度', ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], [820, 932, 901, 934, 1290, 1330, 1320], 'ppm'));
-    myChart3.setOption(option);
+    ch4Chart.setOption(getOption('CH4浓度', ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], [820, 932, 901, 934, 1290, 1330, 1320], 'ppm'));
-    myChart4.setOption(option);
+    tempChart.setOption(getOption('环境温度', ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], [820, 932, 901, 934, 1290, 1330, 1320], '°C'));
-    myChart5.setOption(option);
+    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);
+        coChart.resize();
-        myChart1.resize();
+        co2Chart.resize();
-        myChart2.resize();
+        ch4Chart.resize();
-        myChart3.resize();
+        tempChart.resize();
-        myChart4.resize();
+        rp2040_tempChart.resize();
-        myChart5.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>