fix: 👍 纠正RP2040显示错误

README.md

@@ -1,11 +1,13 @@
 # Gas Web Application
 
-##### 1、CO折线图
+##### 1、CO浓度折线图
 
-##### 2、CO2折线图
+##### 2、CO2浓度折线图
 
-##### 3、CH4折线图
+##### 3、CH4浓度折线图
 
-##### 4、温度
+##### 4、温度折线图
 
-##### 5、rp2040温度
+##### 5、rp2040温度折线图
+
+##### 6、CH2O浓度折线图

pom.xml

@@ -10,7 +10,7 @@
     </parent>
     <groupId>cc.niushuai</groupId>
     <artifactId>gas-web</artifactId>
-    <version>0.0.1-SNAPSHOT</version>
+    <version>0.1.0</version>
     <name>gas-web</name>
     <description>gas-web</description>
     <properties>
@@ -94,6 +94,7 @@
     </pluginRepositories>
 
     <build>
+        <finalName>gas-web</finalName>
         <plugins>
             <plugin>
                 <groupId>org.springframework.boot</groupId>

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

@@ -16,16 +16,26 @@
 
 package cc.niushuai.gasweb.controller;
 
+import cc.niushuai.gasweb.entity.CH2O;
+import cc.niushuai.gasweb.entity.ChartResp;
+import cc.niushuai.gasweb.entity.Gas;
+import cc.niushuai.gasweb.repository.CH2ORepository;
 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;
 
 /**
  * 图表请求入口
@@ -42,6 +52,8 @@ public class ChartController {
 
     @Resource
     private GasRepository gasRepository;
+    @Resource
+    private CH2ORepository ch2ORepository;
 
     @Operation(summary = "test")
     @GetMapping("/test")
@@ -50,4 +62,79 @@ 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<>();
+        fetchGas(startDateTime, endDateTime, map);
+        fetchCH2O(startDateTime, endDateTime, map);
+
+        return map;
+    }
+
+    private void fetchCH2O(String startDateTime, String endDateTime, Map<String, ChartResp> map) {
+        try {
+            List<CH2O> allList = ch2ORepository.findAllByTimeBetweenOrderByIdAsc(DateUtil.parseDateTime(startDateTime), DateUtil.parseDateTime(endDateTime));
+
+            if (CollUtil.isNotEmpty(allList)) {
+
+                ChartResp ch2o = new ChartResp("CH2O浓度");
+
+                for (CH2O ch2O : allList) {
+
+                    String dateTime = DateUtil.formatDateTime(ch2O.getTime());
+
+                    ch2o.getData().add(new ChartResp.Data(dateTime, ch2O.getCh2o()));
+                }
+
+                map.put("ch2o", ch2o);
+            }
+        } catch (Exception e) {
+            log.error("fetch ch2o failed", e);
+            map.put("ch2oError", new ChartResp("fetch error: " + e.getMessage()));
+        }
+    }
+
+    private void fetchGas(String startDateTime, String endDateTime, Map<String, ChartResp> map) {
+
+        try {
+            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 RP2040_temperature = new ChartResp("RP2040温度");
+
+
+                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()));
+                    RP2040_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("RP2040_temperature", RP2040_temperature);
+            }
+        } catch (Exception e) {
+            log.error("fetch gas failed", e);
+            map.put("gasError", new ChartResp("fetch error: " + e.getMessage()));
+        }
+
+    }
+
+
 }

src/main/java/cc/niushuai/gasweb/entity/CH2O.java

@@ -0,0 +1,59 @@
+/*
+ * Copyright (C) 2023 niushuai233 niushuai.cc
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package cc.niushuai.gasweb.entity;
+
+import io.swagger.v3.oas.annotations.media.Schema;
+import lombok.Data;
+
+import javax.persistence.Column;
+import javax.persistence.Entity;
+import javax.persistence.Id;
+import javax.persistence.Table;
+import java.util.Date;
+
+/**
+ * 甲烷数据
+ *
+ * @author niushuai233
+ * @date 2024/11/18 15:41
+ * @since 0.0.1
+ */
+@Data
+@Entity
+@Table(name = "ch2o")
+@Schema(title = "甲烷数据")
+public class CH2O {
+
+    @Id
+    @Schema(title = "id")
+    private Long id;
+
+    /**
+     * 记录时间
+     */
+    @Schema(title = "记录时间")
+    @Column(name = "time")
+    private Date time;
+
+    /**
+     * 一氧化碳气体
+     */
+    @Schema(title = "甲烷浓度")
+    @Column(name = "ch2o")
+    private String ch2o;
+
+}

src/main/java/cc/niushuai/gasweb/entity/ChartResp.java

@@ -0,0 +1,39 @@
+package cc.niushuai.gasweb.entity;
+
+import lombok.AllArgsConstructor;
+import lombok.Data;
+
+import java.util.ArrayList;
+import java.util.List;
+
+/**
+ * data
+ *
+ * @author niushuai233
+ * @date: 2022/12/16 21:36
+ */
+@Data
+public class ChartResp {
+
+    private String title;
+    private List<Data> data = new ArrayList<>();
+
+    public ChartResp(String title) {
+        this.title = title;
+    }
+
+    @lombok.Data
+    @AllArgsConstructor
+    public static class Data {
+        private String x;
+        private String y;
+
+        public String getY() {
+            return y
+                    .replace("ppm", "")
+                    .replace("ppb", "")
+                    .replace("°C", "")
+                    ;
+        }
+    }
+}

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

@@ -0,0 +1,38 @@
+/*
+ * Copyright (C) 2023 niushuai233 niushuai.cc
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package cc.niushuai.gasweb.repository;
+
+import cc.niushuai.gasweb.entity.CH2O;
+import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.stereotype.Repository;
+
+import java.util.Date;
+import java.util.List;
+
+/**
+ * ch2o sql repository
+ *
+ * @author niushuai233
+ * @date 2024/11/18 15:47
+ * @since 0.0.1
+ */
+@Repository
+public interface CH2ORepository extends JpaRepository<CH2O, Long> {
+
+    List<CH2O> findAllByTimeBetweenOrderByIdAsc(Date startDateTime, Date endDateTime);
+
+}

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/static/chart/options.js

@@ -0,0 +1,42 @@
+// 包装options
+function getOption(title, xData, yData, unit) {
+    return {
+        title: {
+            text: title
+        },
+        tooltip: {
+            show: true,
+            trigger: 'item',
+            formatter: '时间点: {b0}<br />当前值: {c0}' + unit,
+        },
+        dataZoom: [{
+            id: "slider",
+            type: 'slider'
+        }],
+        xAxis: {
+            type: 'category',
+            data: xData
+        },
+        yAxis: {
+            type: 'value'
+        },
+        series: [
+            {
+                data: yData,
+                type: 'line',
+                smooth: true
+            }
+        ]
+    };
+}
+
+
+function rebuildChart(instance, data, unit) {
+
+    var xData = data.data.map(item => item.x);
+    var yData = data.data.map(item => item.y);
+
+    // coChart.setOption(getOption('CO浓度', ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], [820, 932, 901, 934, 1290, 1330, 1320]));
+    instance.setOption(getOption(data.title, xData, yData, unit));
+    console.log('rebuild chart', instance, data.title);
+}

src/main/resources/static/datepicker/datepicker.en.js

@@ -0,0 +1,26 @@
+/**
+ * Simplified Chinese translation for bootstrap-datetimepicker
+ * Yuan Cheung <advanimal@gmail.com>
+ */
+;(function ($) {
+    $.fn.datePicker.dates['en'] = {
+        days: ["Sun", 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+        months: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
+        now: "now",
+        clear: 'clear',
+        headerYearLink: '',
+        units: ['-', ''],
+        button: ["confirm", "cancel"],
+        confirm: 'confirm',
+        cancel: 'cancel',
+        chooseDay: 'Choose Day',
+        chooseTime: 'Choose Time',
+        begin: 'Start Time',
+        end: 'End Time',
+        prevYear: 'prevYear',
+        prevMonth: 'prevMonth',
+        nextYear: 'nextYear',
+        nextMonth: 'nextMonth',
+        zero: '0:00'
+    };
+}(jQuery));

src/main/resources/templates/backuo.ftl

@@ -1,163 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <title>Bootstrap Example</title>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-
-    <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>
-
-    <link rel="stylesheet" href="${request.contextPath}/bootstrap-table-1.22.5/bootstrap-table.min.css">
-    <link rel="stylesheet" href="${request.contextPath}/bootstrap-table-1.22.5/bootstrap-table-fixed-columns.min.css">
-
-    <script src="${request.contextPath}/bootstrap-table-1.22.5/bootstrap-table.min.js"></script>
-    <script src="${request.contextPath}/bootstrap-table-1.22.5/bootstrap-table-fixed-columns.min.js"></script>
-
-    <script src="${request.contextPath}/index/main.js"></script>
-
-    <style>
-        .container {
-            width: 85%;
-        }
-    </style>
-</head>
-<body>
-
-<div class="container">
-    <h2>车系配置数据提取器 v1.0</h2>
-    <p style="align-self: end">数据来源: <a href="https://dongchedi.com">懂车帝</a></p>
-    <div class="row">
-        <div class="col-lg-12">
-            <div class="input-group">
-                <input id="dcdUrl" type="text" class="form-control"
-                       placeholder="懂车帝url点击提取, eg: https://www.dongchedi.com/auto/series/8808, 输入其他点搜索, 可搜索内容包括: 品牌,系列">
-                <span class="input-group-btn">
-                    <button id="search" class="btn btn-primary" type="button" style="min-width: 150px">搜索</button>
-                    <button id="go" class="btn btn-danger" type="button" style="min-width: 150px">提取</button>
-                </span>
-            </div><!-- /input-group -->
-        </div><!-- /.col-lg-6 -->
-    </div><!-- /.row -->
-    <br/>
-    <#--<div class="progress">
-        <div id="progressBar" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="0"
-            aria-valuemin="0" aria-valuemax="100" style="width: 2%">
-            0%
-        </div>
-    </div>-->
-    <br/>
-    <button id="saveTableHead" class="btn btn-primary">保存展示表头配置</button>
-    <table id="table"/>
-</div>
-</body>
-<script>
-
-    var $table = $('#table')
-    var contextPath = "${request.contextPath}/";
-
-    $("#go").click(function () {
-        var url = $("#dcdUrl").val();
-
-        $.post(contextPath + "index/analyze", {"dcdUrl": url}, function (data) {
-            console.log("...ax", data);
-            buildTable($table, data);
-        });
-    });
-
-    $("#search").click(function () {
-        var url = $("#dcdUrl").val();
-
-        $.post(contextPath + "index/search", {}, function (data) {
-            console.log("...search", data);
-            buildTable($table, data);
-        });
-    });
-
-    $("#saveTableHead").click(function () {
-        var fields = $table.bootstrapTable('getHiddenColumns');
-        console.log(fields);
-
-        var str = "";
-        fields.forEach(item => {
-            str += item.field + ",";
-        })
-
-        var newRows = []
-        table_headers.forEach(item => {
-            if (str.indexOf(item.field) != -1) {
-                newRows.push(item);
-            }
-        })
-
-        localStorage.setItem("hiddenColumns", JSON.stringify(newRows))
-    })
-
-    function buildTable($el, rows) {
-
-        console.log("buildTable", rows);
-
-        var columns = []
-        for (i = 0; i < table_headers.length; i++) {
-            var header = table_headers[i];
-            columns.push({
-                field: header.field,
-                title: header.title,
-                sortable: true,
-                valign: 'left',
-                formatter: function (val) {
-                    var width = 100;
-                    if (header && header.width) {
-                        width = header.width;
-                    }
-                    // return '<div class="item_header" style="width: ' + width + 'px">' + val + '</div>'
-                    return val;
-                },
-                // events: {
-                //     'click .item': function (item) {
-                //         console.log('click', item)
-                //     }
-                // }
-            })
-        }
-
-        var datas = []
-        for (i = 0; i < rows.length; i++) {
-            datas.push(rows[i])
-        }
-        $el.bootstrapTable('destroy').bootstrapTable({
-            height: 600,
-            columns: columns,
-            data: datas,
-            cache: false,
-            search: true,
-            showColumns: true,
-            showToggle: false,
-            cardView: false,
-            striped: false,                         //是否显示行间隔色
-            pagination: true,
-            clickToSelect: true,
-            fixedColumns: true,
-            fixedNumber: 4,
-            fixedRightNumber: 0
-        })
-
-        hideColumns();
-    }
-
-    function hideColumns() {
-        var hiddenColumns = localStorage.getItem("hiddenColumns");
-        var fields = JSON.parse(hiddenColumns);
-        fields.forEach(item => {
-            $table.bootstrapTable('hideColumn', item.field);
-        })
-    }
-
-    $(function () {
-        // buildTable($table, [])
-    })
-</script>
-</html>
-

src/main/resources/templates/index.ftl

@@ -5,69 +5,272 @@
     <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 {
             width: 85%;
         }
 
-        #main {
+        .charts {
             height: 400px;
-            width: 45%;
+        }
+
+        .J-datepicker-range {
         }
     </style>
 </head>
 <body>
 
 <div class="container">
-    <div id="main"></div>
+    <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-12 col-md-4">
+            <div id="coDiv" class="charts"></div>
+        </div>
+        <div class="col-xs-12 col-md-4">
+            <div id="co2Div" class="charts"></div>
+        </div>
+        <div class="col-xs-12 col-md-4">
+            <div id="ch4Div" class="charts"></div>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-xs-12 col-md-6">
+            <div id="tempDiv" class="charts"></div>
+        </div>
+        <div class="col-xs-12 col-md-6">
+            <div id="rp2040_tempDiv" class="charts"></div>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-xs-12 col-md-6">
+            <div id="ch2oDiv" 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(1800, '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 myChart = echarts.init(document.getElementById('main'));
+    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 ch2oChart = echarts.init(document.getElementById('ch2oDiv'));
 
-    // 指定图表的配置项和数据
-    var option = {
-        title: {
-            text: ''
-        },
-        tooltip: {},
-        legend: {
-            data: ['销量']
-        },
-        xAxis: {
-            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
-        },
-        yAxis: {},
-        series: [
-            {
-                name: '销量',
-                type: 'bar',
-                data: [5, 20, 36, 10, 10, 20]
-            }
-        ]
-    };
 
     // 使用刚指定的配置项和数据显示图表。
-    myChart.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], 'ppm'));
+    ch2oChart.setOption(getOption('CH2O浓度', ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], [820, 932, 901, 934, 1290, 1330, 1320], 'ppb'));
 
     window.addEventListener('resize', function () {
-        console.log(myChart);
-        myChart.resize();
+        coChart.resize();
+        co2Chart.resize();
+        ch4Chart.resize();
+        tempChart.resize();
+        rp2040_tempChart.resize();
+        ch2oChart.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.RP2040_temperature, '°C');
+                rebuildChart(ch2oChart, data.ch2o, 'ppb');
+            }
+        });
+    }
+
     $(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>