change - 噪声实时监控

2 months ago · 50e5639458
parent 30ee90b779
commit 50e5639458
2 changed files with 262 additions and 0 deletions
--- a/ruoyi-admin/src/main/java/com/ruoyi/web/controller/system/T_W_TemperturedataController.java
+++ b/ruoyi-admin/src/main/java/com/ruoyi/web/controller/system/T_W_TemperturedataController.java
@ -63,6 +63,9 @@ public class T_W_TemperturedataController extends BaseController
            case 40:
                url = "/noiseData";
                break;
+            case 41:
+                url = "/NoiseRealTimeMonitor";
+                break;
            default:
                break;
        }
@ -268,4 +271,38 @@ public class T_W_TemperturedataController extends BaseController
    {
        return toAjax(t_W_TemperturedataService.deleteT_W_TemperturedataByIds(ids));
    }
+
+
+    /**
+     * 噪声实时监控
+     * @param monitorId
+     * @return
+     */
+    @PostMapping("/getRealNoiseData")
+    @ResponseBody
+    public String getRealNoiseData(String monitorId){
+        List<MeterChartData> meterChartDataList = new ArrayList<>();
+        JSONArray jsonArray = JSONArray.parseArray(monitorId);
+        for (int i = 0; i < jsonArray.size(); i++) {
+            //得到对象
+            String monitorInfo = jsonArray.getString(i);
+
+            MeterChartData meterChartData = new MeterChartData();
+            T_W_Temperturedata t_w_temperturedata = new T_W_Temperturedata();
+
+            t_w_temperturedata.setMonitorId(monitorInfo);
+            T_W_Temperturedata info = t_W_TemperturedataService.selectTopOneData(t_w_temperturedata);
+
+            if (StringUtils.isNotNull(info)){
+                meterChartData.setValue(info.getNoise());
+                meterChartData.setName(info.getMonitorId());
+                meterChartData.setRefushTime(simpleDateFormat.format(info.getCollectTime()));
+                meterChartDataList.add(meterChartData);
+            }
+
+        }
+        String result = JSONArray.toJSONString(meterChartDataList);
+        return result;
+    }
+
 }
--- a/ruoyi-admin/src/main/resources/templates/system/TempertureData/NoiseRealTimeMonitor.html
+++ b/ruoyi-admin/src/main/resources/templates/system/TempertureData/NoiseRealTimeMonitor.html
@ -0,0 +1,225 @@
+<!DOCTYPE html>
+<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
+<head>
+    <th:block th:include="include :: header('噪声实时监控')"/>
+    <th:block th:include="include :: layout-latest-css"/>
+    <th:block th:include="include :: ztree-css"/>
+    <th:block th:include="include :: datetimepicker-css"/>
+</head>
+<body class="gray-bg">
+
+<div class="ui-layout-west">
+    <div class="box box-main">
+        <div class="box-header">
+            <div class="box-title">
+                <i class="fa icon-grid"></i> 测控点信息
+            </div>
+            <div class="box-tools pull-right">
+                <a type="button" class="btn btn-box-tool" href="#" onclick="dept()" title="测控点信息"><i
+                        class="fa fa-edit"></i></a>
+                <button type="button" class="btn btn-box-tool" id="btnExpand" title="展开" style="display:none;"><i
+                        class="fa fa-chevron-up"></i></button>
+                <button type="button" class="btn btn-box-tool" id="btnCollapse" title="折叠"><i
+                        class="fa fa-chevron-down"></i></button>
+                <button type="button" class="btn btn-box-tool" id="btnRefresh" title="刷新"><i class="fa fa-refresh"></i>
+                </button>
+            </div>
+        </div>
+        <div class="ui-layout-content">
+            <div id="tree" class="ztree"></div>
+        </div>
+    </div>
+</div>
+
+<div class="ui-layout-center">
+    <div class="container-div">
+        <div class="row">
+            <div class="col-sm-12 search-collapse" id="chartId">
+                <div id="tempDiv"></div>
+                <div id="humDiv"></div>
+                <!--<div class="echarts" id="temperatureChart" style="height: 400px;width: 50%;float: left"></div>-->
+
+                <!--<div class="echarts" id="humidityChart" style="height: 400px;width: 50%;float: right"></div>-->
+
+            </div>
+
+        </div>
+    </div>
+</div>
+<th:block th:include="include :: footer"/>
+<th:block th:include="include :: layout-latest-js"/>
+<th:block th:include="include :: ztree-js"/>
+<th:block th:include="include :: echarts-js"/>
+<th:block th:include="include :: datetimepicker-js"/>
+<script src="../../../static/js/jquery.min.js"></script>
+
+<script th:inline="javascript">
+    var editFlag = [[${@permission.hasPermi('system:TempertureData:edit')}]];
+    var removeFlag = [[${@permission.hasPermi('system:TempertureData:remove')}]];
+    var prefix = ctx + "system/TempertureData";
+
+    var monitorInfo = "";
+
+    var tempData = [];
+
+    var humData = [];
+
+    var monitorId = [];
+
+    var refreshInterval;
+
+    $(function () {
+        var panehHidden = false;
+        if ($(this).width() < 769) {
+            panehHidden = true;
+        }
+        $('body').layout({initClosed: panehHidden, west__size: 185});
+        queryDeptTree();
+        setInterval(meterChart, 1000 * 4)
+    });
+
+    function queryDeptTree() {
+        var url = ctx + "system/Monitor/treeData?monitorType=40";
+        var options = {
+            url: url,
+            expandLevel: 1,
+            onCheck: onCheck,
+            check: {
+                enable: true,
+                nocheckInherit: false,
+                chkboxType: {"Y": "", "N": ""},
+            },
+            data: {
+                simpleData: {
+                    enable: true
+                }
+            },
+        };
+        $.tree.init(options);
+    }
+
+    function zOnClick(event, treeId, treeNode) {
+        window.clearInterval(refreshInterval);
+        $("#monitorId").val(treeNode.id);
+        monitorInfo = treeNode.id;
+        meterChart()
+    }
+
+    function onCheck(e, treeId, treeNode) {
+        $("#monitorId").val(treeNode.id);
+        var treeObj = $.fn.zTree.getZTreeObj("tree");
+        var checkedNode = treeObj.getCheckedNodes();
+        monitorId.splice(0, monitorId.length)
+        checkedNode.forEach(function (e) {
+            monitorId.push(e.id);
+        });
+        monitorInfo = monitorId;
+        $.table.search();
+    }
+
+    function meterChart() {
+        var formData = new FormData();
+        formData.append("monitorId", monitorId);
+        $.ajax({
+            async: true,
+            type: 'post',
+            url: prefix + "/getRealNoiseData",
+            dataType: 'json',
+            data: {
+                monitorId: JSON.stringify(monitorId)
+            },
+            success: function (result) {
+                tempData = eval(result);
+                var tempInfo = '';
+                for (var i = 0; i < tempData.length; i++) {
+                    tempInfo += '<div class="echarts" id="' + tempData[i].name + '" style="height: 400px;width: 25%;float: left;" ></div>';
+                    /*info += '<div style="background-color: red;width: 200px;height: 200px;">'+tempData[i].name+'</div>' border: solid 1px greenyellow;padding: 10px 10px;;*/
+                }
+                $("#tempDiv").html(tempInfo);
+                for (var i = 0; i < tempData.length; i++) {
+                    var temperatureMeterChart = echarts.init(document.getElementById(tempData[i].name));
+                    var temperatureMeterOption = {
+                        title: {
+                            text: tempData[i].name,
+                            subtext: tempData[i].refushTime,
+                            left: 'center'
+                        },
+                        tooltip: {
+                            formatter: '{a} <br/>{b} : {c}dB'
+                        },
+                        series: [
+                            {
+                                name: "噪声传感器",
+                                type: 'gauge',
+                                detail: {formatter: '{value}dB', fontSize: 16},
+                                showSymbol: false,
+                                data: [{value: tempData[i].value}],
+                                axisLine: {            // 坐标轴线
+                                    lineStyle: {       // 属性lineStyle控制线条样式
+                                        width: 10
+                                    }
+                                },
+                                axisTick: {            // 坐标轴小标记
+                                    length: 10,        // 属性length控制线长
+                                    splitNumber: 2,
+                                    lineStyle: {       // 属性lineStyle控制线条样式
+                                        color: '#cdcdcd'
+                                    }
+                                },
+                                splitLine: {           // 分隔线
+                                    length: 10,         // 属性length控制线长
+                                    lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
+                                        color: 'auto'
+                                    }
+                                },
+                            }
+                        ]
+                    };
+                    temperatureMeterChart.clear();
+                    temperatureMeterChart.setOption(temperatureMeterOption, true);
+                }
+            }
+        });
+    }
+
+    $('#btnExpand').click(function () {
+        $._tree.expandAll(true);
+        $(this).hide();
+        $('#btnCollapse').show();
+    });
+
+    $('#btnCollapse').click(function () {
+        $._tree.expandAll(false);
+        $(this).hide();
+        $('#btnExpand').show();
+    });
+
+    $('#btnRefresh').click(function () {
+        queryDeptTree();
+    });
+
+    /* 测控点信息 */
+    function dept() {
+        var url = ctx + "system/Monitor?id=40";
+        $.modal.openTab("测控点信息", url);
+    }
+
+    layui.use('laydate', function () {
+        var laydate = layui.laydate;
+
+        laydate.render({
+            elem: '#laydate-demo-3',
+            type: 'datetime',
+            trigger: 'click'
+        });
+
+        laydate.render({
+            elem: '#laydate-demo-4',
+            type: 'datetime',
+            trigger: 'click'
+        });
+    });
+
+</script>
+</body>
+</html>