From a1694891fc35dab7f109602c15f32fb5692a7197 Mon Sep 17 00:00:00 2001
From: suixy <2277317060@qq.com>
Date: Wed, 3 Dec 2025 17:05:22 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=9B=BE=E8=A1=A8=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../templates/report/VibrationDataCurve.html  | 822 ++++++++++--------
 .../TVibrationsensorData/RealTimeMonitor.html | 533 ++++++------
 2 files changed, 720 insertions(+), 635 deletions(-)
diff --git a/ruoyi-admin/src/main/resources/templates/report/VibrationDataCurve.html b/ruoyi-admin/src/main/resources/templates/report/VibrationDataCurve.html
index a6bf787..3e450db 100644
--- a/ruoyi-admin/src/main/resources/templates/report/VibrationDataCurve.html
+++ b/ruoyi-admin/src/main/resources/templates/report/VibrationDataCurve.html
@@ -1,75 +1,80 @@
 <!DOCTYPE html>
 <html lang="zh" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro" xmlns:th="http://www.thymeleaf.org">
 <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"/>
+    <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>
 <style>
-  .echarts{
-    width: 49%;
-    display: inline-block;
-  }
+    .echarts {
+        width: 49%;
+        display: inline-block;
+    }
 </style>
 <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 class="btn btn-box-tool" href="#" onclick="dept()" title="测控点信息" type="button"><i class="fa fa-edit"></i></a>
-        <button class="btn btn-box-tool" id="btnExpand" style="display:none;" title="展开" type="button"><i
-                class="fa fa-chevron-up"></i></button>
-        <button class="btn btn-box-tool" id="btnCollapse" title="折叠" type="button"><i class="fa fa-chevron-down"></i>
-        </button>
-        <button class="btn btn-box-tool" id="btnRefresh" title="刷新" type="button"><i class="fa fa-refresh"></i></button>
-      </div>
+    <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 class="btn btn-box-tool" href="#" onclick="dept()" title="测控点信息" type="button"><i
+                        class="fa fa-edit"></i></a>
+                <button class="btn btn-box-tool" id="btnExpand" style="display:none;" title="展开" type="button"><i
+                        class="fa fa-chevron-up"></i></button>
+                <button class="btn btn-box-tool" id="btnCollapse" title="折叠" type="button"><i
+                        class="fa fa-chevron-down"></i>
+                </button>
+                <button class="btn btn-box-tool" id="btnRefresh" title="刷新" type="button"><i
+                        class="fa fa-refresh"></i></button>
+            </div>
+        </div>
+        <div class="ui-layout-content">
+            <div class="ztree" id="tree"></div>
+        </div>
     </div>
-    <div class="ui-layout-content">
-      <div class="ztree" id="tree"></div>
-    </div>
-  </div>
 </div>
 
 <div class="ui-layout-center">
-  <div class="container-div">
-    <div class="row">
-      <div class="col-sm-12 search-collapse">
-        <form id="formId">
-          <input id="monitorId" name="monitorId" type="hidden">
-          <div class="select-list">
-            <ul>
-              <li class="select-time">
-                <label>采集时间：</label><input class="form-control" id="laydate-demo-3" name="params[beginCollectTime]"
-                                           placeholder="开始时间"
-                                           style="width: 150px" type="text"/>
-                <span>-</span>
-                <input class="form-control" id="laydate-demo-4" name="params[endCollectTime]" placeholder="结束时间"
-                       style="width: 150px"
-                       type="text"/>
-              </li>
-              <li>
-                <!--                                <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search();"><i class="fa fa-search"></i>&nbsp;搜索</a>-->
-                <!--                                <a class="btn btn-primary btn-rounded btn-sm" onclick="getdata($('#monitorId').val())"><i class="fa fa-search"></i>&nbsp;搜索</a>-->
-                <!--                                <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>-->
-              </li>
+    <div class="container-div">
+        <div class="row">
+            <div class="col-sm-12 search-collapse">
+                <form id="formId">
+                    <input id="monitorId" name="monitorId" type="hidden">
+                    <div class="select-list">
+                        <ul>
+                            <li class="select-time">
+                                <label>采集时间：</label><input class="form-control" id="laydate-demo-3"
+                                                               name="params[beginCollectTime]"
+                                                               placeholder="开始时间"
+                                                               style="width: 150px" type="text"/>
+                                <span>-</span>
+                                <input class="form-control" id="laydate-demo-4" name="params[endCollectTime]"
+                                       placeholder="结束时间"
+                                       style="width: 150px"
+                                       type="text"/>
+                            </li>
+                            <li>
+                                <!--                                <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search();"><i class="fa fa-search"></i>&nbsp;搜索</a>-->
+                                <!--                                <a class="btn btn-primary btn-rounded btn-sm" onclick="getdata($('#monitorId').val())"><i class="fa fa-search"></i>&nbsp;搜索</a>-->
+                                <!--                                <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>-->
+                            </li>
 
-            </ul>
-          </div>
-        </form>
-      </div>
-      <div class="ibox-content" style="margin-top: 80px;margin-right: 0px;">
-        <div class="echarts" id="echarts-line-chart" style="height: 40vh"></div>
-        <div class="echarts" id="echarts-line-chart1" style="height: 40vh"></div>
-        <div class="echarts" id="echarts-line-chart2" style="height: 40vh"></div>
-        <div class="echarts" id="echarts-line-chart3" style="height: 40vh"></div>
-      </div>
+                        </ul>
+                    </div>
+                </form>
+            </div>
+            <div class="ibox-content" style="margin-top: 80px;margin-right: 0px;">
+                <div class="echarts" id="echarts-line-chart" style="height: 80vh;width: 100%"></div>
+                <div class="echarts" id="echarts-line-chart1" style="height: 40vh"></div>
+                <div class="echarts" id="echarts-line-chart2" style="height: 40vh"></div>
+                <div class="echarts" id="echarts-line-chart3" style="height: 40vh"></div>
+            </div>
+        </div>
     </div>
-  </div>
 </div>
 
 <th:block th:include="include :: footer"/>
@@ -81,344 +86,401 @@
 <script th:inline="javascript">
 
 
-  var prefix = ctx + "report/temandhumreport"
-  var timedata = [];
-  var tempreturedata = [];
-  var humdata = [];
-  layui.use('laydate', function () {
-    var laydate = layui.laydate;
+    var prefix = ctx + "report/temandhumreport"
+    var timedata = [];
+    var tempreturedata = [];
+    var humdata = [];
+    layui.use('laydate', function () {
+        var laydate = layui.laydate;
 
-    laydate.render({
-      elem: '#laydate-demo-3',
-      type: 'datetime',
-      trigger: 'click'
+        laydate.render({
+            elem: '#laydate-demo-3',
+            type: 'datetime',
+            trigger: 'click'
+        });
+
+        laydate.render({
+            elem: '#laydate-demo-4',
+            type: 'datetime',
+            trigger: 'click'
+        });
+    });
+    $(function () {
+
+        var panehHidden = false;
+        // var time=getNowFormatDate();
+        // console.log(time);
+
+        getdata(null);
+
+        if ($(this).width() < 769) {
+            panehHidden = true;
+        }
+        $('body').layout({initClosed: panehHidden, west__size: 185});
+        // initTable();
+        queryUserList();
+        queryDeptTree();
     });
 
-    laydate.render({
-      elem: '#laydate-demo-4',
-      type: 'datetime',
-      trigger: 'click'
-    });
-  });
-  $(function () {
+    function queryUserList() {
+        var options = {
+            url: prefix + "/list",
+            modalName: "压缩空气数据曲线",
+            columns: [{
+                checkbox: true
+            },
+                {
+                    field: 'objid',
+                    title: '自增标识',
+                    visible: false
+                },
+                {
+                    field: 'monitorId',
+                    title: '测控点编号'
+                },
+                {
+                    field: 'between',
+                    title: '采集时间'
+                },
+                {
+                    field: 'temmaxNumber',
+                    title: '温度最大值'
+                },
+                {
+                    field: 'temminNumber',
+                    title: '温度最小值'
+                },
+                {
+                    field: 'temavgNumber',
+                    title: '温度平均值'
+                },
+                {
+                    field: 'hummaxNumber',
+                    title: '湿度最大值'
+                },
+                {
+                    field: 'humminNumber',
+                    title: '湿度最小值'
+                },
+                {
+                    field: 'humavgNumber',
+                    title: '湿度平均值'
+                },
 
-    var panehHidden = false;
-    // var time=getNowFormatDate();
-    // console.log(time);
 
-    getdata(null);
-
-    if ($(this).width() < 769) {
-      panehHidden = true;
+            ]
+        };
+        $.table.init(options);
     }
-    $('body').layout({initClosed: panehHidden, west__size: 185});
-    // initTable();
-    queryUserList();
-    queryDeptTree();
-  });
 
-  function queryUserList() {
-    var options = {
-      url: prefix + "/list",
-      modalName: "压缩空气数据曲线",
-      columns: [{
-        checkbox: true
-      },
-        {
-          field: 'objid',
-          title: '自增标识',
-          visible: false
-        },
-        {
-          field: 'monitorId',
-          title: '测控点编号'
-        },
-        {
-          field: 'between',
-          title: '采集时间'
-        },
-        {
-          field: 'temmaxNumber',
-          title: '温度最大值'
-        },
-        {
-          field: 'temminNumber',
-          title: '温度最小值'
-        },
-        {
-          field: 'temavgNumber',
-          title: '温度平均值'
-        },
-        {
-          field: 'hummaxNumber',
-          title: '湿度最大值'
-        },
-        {
-          field: 'humminNumber',
-          title: '湿度最小值'
-        },
-        {
-          field: 'humavgNumber',
-          title: '湿度平均值'
-        },
+    function queryDeptTree() {
+        var url = ctx + "system/Monitor/treeData?monitorType=20";
+        var options = {
+            url: url,
+            expandLevel: 1,
+            onClick: zOnClick,
 
+        };
+        $.tree.init(options);
 
-      ]
-    };
-    $.table.init(options);
-  }
-
-  function queryDeptTree() {
-    var url = ctx + "system/Monitor/treeData?monitorType=20";
-    var options = {
-      url: url,
-      expandLevel: 1,
-      onClick: zOnClick,
-
-    };
-    $.tree.init(options);
-
-    function zOnClick(event, treeId, treeNode) {
-      $("#monitorId").val(treeNode.id);
-      /*alert(treeNode.id)*/
-      $.table.search();
-      getdata(treeNode.id);
+        function zOnClick(event, treeId, treeNode) {
+            $("#monitorId").val(treeNode.id);
+            /*alert(treeNode.id)*/
+            $.table.search();
+            getdata(treeNode.id);
+        }
     }
-  }
 
-  $('#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";
-    $.modal.openTab("社区信息", url);
-  }
-
-  function getdata(monitorId) {
-    var formData = new FormData();
-    formData.append("sensorId", monitorId);
-    formData.append("params[beginCollectTime]",  $("#laydate-demo-3").val());
-    formData.append("params[endCollectTime]",$("#laydate-demo-4").val());
-    $.ajax({
-      url: ctx + "system/TVibrationsensorData/sensorList",
-      type: 'post',
-      cache: false,
-      data: formData,
-      processData: false,
-      contentType: false,
-      dataType: "json",
-      success: function (result) {
-        design(result.data);
-      }
+    $('#btnExpand').click(function () {
+        $._tree.expandAll(true);
+        $(this).hide();
+        $('#btnCollapse').show();
     });
-  }
 
-  function design(e) {
-    console.log(e)
-    let lineChart = echarts.init(document.getElementById("echarts-line-chart"));
-    let lineChart1 = echarts.init(document.getElementById("echarts-line-chart1"));
-    let lineChart2 = echarts.init(document.getElementById("echarts-line-chart2"));
-    let lineChart3 = echarts.init(document.getElementById("echarts-line-chart3"));
-    lineChart.setOption({
-      title: {
-        text: '温度数据曲线(℃)',
-        left: 'center'
-      },
-      tooltip: {
-        trigger: 'axis',
-        axisPointer: {
-          animation: false
-        }
-      },
-      legend: {
-        data: ['温度'],
-        left: 10
-      },
-      dataZoom: [
-        {
-          show: true,
-          realtime: true,
-          start: 0,
-          end: 100,
-          xAxisIndex: 0
-        },
-        {
-          type: 'inside',
-          realtime: true,
-          start: 30,
-          end: 70,
-          xAxisIndex: 0
-        }
-      ],
-      xAxis: {
-        type: 'category',
-        data: e.map(v=>v.collectTime)
-      },
-      yAxis: {
-        type: 'value'
-      },
-      series: [
-        {
-          data: e.map(v=>v.temperature),
-          type: 'line'
-        }
-      ]
+    $('#btnCollapse').click(function () {
+        $._tree.expandAll(false);
+        $(this).hide();
+        $('#btnExpand').show();
     });
-    lineChart1.setOption({
-      title: {
-        text: '速度数据曲线(mm/s)',
-        left: 'center'
-      },
-      tooltip: {
-        trigger: 'axis',
-        axisPointer: {
-          animation: false
-        }
-      },
-      legend: {
-        data: ['速度'],
-        left: 10
-      },
-      dataZoom: [
-        {
-          show: true,
-          realtime: true,
-          start: 0,
-          end: 100,
-          xAxisIndex: 0
-        },
-        {
-          type: 'inside',
-          realtime: true,
-          start: 30,
-          end: 70,
-          xAxisIndex: 0
-        }
-      ],
-      xAxis: {
-        type: 'category',
-        data: e.map(v=>v.collectTime)
-      },
-      yAxis: {
-        type: 'value'
-      },
-      series: [
-        {
-          data: e.map(v=>v.speed),
-          type: 'line'
-        }
-      ]
-    }, true);
-    lineChart2.setOption({
-      title: {
-        text: '位移数据曲线(um)',
-        left: 'center'
-      },
-      tooltip: {
-        trigger: 'axis',
-        axisPointer: {
-          animation: false
-        }
-      },
-      legend: {
-        data: ['位移'],
-        left: 10
-      },
-      dataZoom: [
-        {
-          show: true,
-          realtime: true,
-          start: 0,
-          end: 100,
-          xAxisIndex: 0
-        },
-        {
-          type: 'inside',
-          realtime: true,
-          start: 30,
-          end: 70,
-          xAxisIndex: 0
-        }
-      ],
-      xAxis: {
-        type: 'category',
-        data: e.map(v=>v.collectTime)
-      },
-      yAxis: {
-        type: 'value'
-      },
-      series: [
-        {
-          data: e.map(v=>v.displacement),
-          type: 'line'
-        }
-      ]
-    }, true);
-    lineChart3.setOption({
-      title: {
-        text: '加速度数据曲线(g)',
-        left: 'center'
-      },
-      tooltip: {
-        trigger: 'axis',
-        axisPointer: {
-          animation: false
-        }
-      },
-      legend: {
-        data: ['加速度'],
-        left: 10
-      },
-      dataZoom: [
-        {
-          show: true,
-          realtime: true,
-          start: 0,
-          end: 100,
-          xAxisIndex: 0
-        },
-        {
-          type: 'inside',
-          realtime: true,
-          start: 30,
-          end: 70,
-          xAxisIndex: 0
-        }
-      ],
-      xAxis: {
-        type: 'category',
-        data: e.map(v=>v.collectTime)
-      },
-      yAxis: {
-        type: 'value'
-      },
-      series: [
-        {
-          data: e.map(v=>v.acceleration),
-          type: 'line'
-        }
-      ]
-    }, true);
 
-    $(window).resize(lineChart.resize);
-    $(window).resize(lineChart1.resize);
-    $(window).resize(lineChart2.resize);
-    $(window).resize(lineChart3.resize);
-  }
+    $('#btnRefresh').click(function () {
+        queryDeptTree();
+    });
+
+    /* 社区信息 */
+    function dept() {
+        var url = ctx + "system/Monitor";
+        $.modal.openTab("社区信息", url);
+    }
+
+    function getdata(monitorId) {
+        var formData = new FormData();
+        formData.append("sensorId", monitorId);
+        formData.append("params[beginCollectTime]", $("#laydate-demo-3").val());
+        formData.append("params[endCollectTime]", $("#laydate-demo-4").val());
+        $.ajax({
+            url: ctx + "system/TVibrationsensorData/sensorList",
+            type: 'post',
+            cache: false,
+            data: formData,
+            processData: false,
+            contentType: false,
+            dataType: "json",
+            success: function (result) {
+                design(result.data);
+            }
+        });
+    }
+
+    function design(e) {
+        console.log(e)
+        let lineChart = echarts.init(document.getElementById("echarts-line-chart"));
+        lineChart.setOption({
+            title: {
+                text: '温度、速度、位移数据曲线',
+                left: 'center',
+                top: 20
+            },
+            tooltip: {
+                trigger: 'axis',
+                axisPointer: {
+                    animation: false
+                }
+            },
+            grid: {
+                right: 100,
+                left: 80
+            },
+            legend: {
+                x: 'center'
+            },
+            dataZoom: [
+                {
+                    show: false,
+                    realtime: true,
+                    start: 0,
+                    end: 100,
+                    xAxisIndex: 0
+                },
+                {
+                    type: 'inside',
+                    realtime: true,
+                    start: 30,
+                    end: 70,
+                    xAxisIndex: 0
+                }
+            ],
+            xAxis: {
+                type: 'category',
+                data: e.map(v => v.collectTime)
+            },
+            yAxis: [
+                {
+                    type: 'value',
+                    name: '℃',
+                    axisLine: {
+                        show: true
+                    }
+                },
+                {
+                    name: 'mm/s',
+                    type: 'value',
+                    axisLine: {
+                        show: true
+                    },
+                    offset: 25,
+                    position: 'left'
+                },
+                {
+                    name: 'um',
+                    type: 'value',
+                    axisLine: {
+                        show: true
+                    },
+                    offset: 50
+                },
+                // {
+                //     name: 'g',
+                //     type: 'value',
+                //     axisLine: {
+                //         show: true
+                //     }
+                // },
+            ],
+            series: [
+                {
+                    name: '温度',
+                    data: e.map(v => v.temperature),
+                    type: 'line',
+                    yAxisIndex: 0
+                },
+                {
+                    name: '速度',
+                    data: e.map(v => v.speed),
+                    type: 'line',
+                    yAxisIndex: 1
+                },
+                {
+                    name: '位移',
+                    data: e.map(v => v.displacement),
+                    type: 'line',
+                    yAxisIndex: 2
+                },
+                // {
+                //     name: '加速度',
+                //     data: e.map(v => v.acceleration),
+                //     type: 'line',
+                //     yAxisIndex: 3
+                // },
+            ]
+        });
+        $(window).resize(lineChart.resize);
+
+
+        // let lineChart1 = echarts.init(document.getElementById("echarts-line-chart1"));
+        // let lineChart2 = echarts.init(document.getElementById("echarts-line-chart2"));
+        // let lineChart3 = echarts.init(document.getElementById("echarts-line-chart3"));
+
+        // lineChart1.setOption({
+        //     title: {
+        //         text: '速度数据曲线(mm/s)',
+        //         left: 'center'
+        //     },
+        //     tooltip: {
+        //         trigger: 'axis',
+        //         axisPointer: {
+        //             animation: false
+        //         }
+        //     },
+        //     legend: {
+        //         data: ['速度'],
+        //         left: 10
+        //     },
+        //     dataZoom: [
+        //         {
+        //             show: true,
+        //             realtime: true,
+        //             start: 0,
+        //             end: 100,
+        //             xAxisIndex: 0
+        //         },
+        //         {
+        //             type: 'inside',
+        //             realtime: true,
+        //             start: 30,
+        //             end: 70,
+        //             xAxisIndex: 0
+        //         }
+        //     ],
+        //     xAxis: {
+        //         type: 'category',
+        //         data: e.map(v => v.collectTime)
+        //     },
+        //     yAxis: {
+        //         type: 'value'
+        //     },
+        //     series: [
+        //         {
+        //             data: e.map(v => v.speed),
+        //             type: 'line'
+        //         }
+        //     ]
+        // }, true);
+        // lineChart2.setOption({
+        //     title: {
+        //         text: '位移数据曲线(um)',
+        //         left: 'center'
+        //     },
+        //     tooltip: {
+        //         trigger: 'axis',
+        //         axisPointer: {
+        //             animation: false
+        //         }
+        //     },
+        //     legend: {
+        //         data: ['位移'],
+        //         left: 10
+        //     },
+        //     dataZoom: [
+        //         {
+        //             show: true,
+        //             realtime: true,
+        //             start: 0,
+        //             end: 100,
+        //             xAxisIndex: 0
+        //         },
+        //         {
+        //             type: 'inside',
+        //             realtime: true,
+        //             start: 30,
+        //             end: 70,
+        //             xAxisIndex: 0
+        //         }
+        //     ],
+        //     xAxis: {
+        //         type: 'category',
+        //         data: e.map(v => v.collectTime)
+        //     },
+        //     yAxis: {
+        //         type: 'value'
+        //     },
+        //     series: [
+        //         {
+        //             data: e.map(v => v.displacement),
+        //             type: 'line'
+        //         }
+        //     ]
+        // }, true);
+        // lineChart3.setOption({
+        //     title: {
+        //         text: '加速度数据曲线(g)',
+        //         left: 'center'
+        //     },
+        //     tooltip: {
+        //         trigger: 'axis',
+        //         axisPointer: {
+        //             animation: false
+        //         }
+        //     },
+        //     legend: {
+        //         data: ['加速度'],
+        //         left: 10
+        //     },
+        //     dataZoom: [
+        //         {
+        //             show: true,
+        //             realtime: true,
+        //             start: 0,
+        //             end: 100,
+        //             xAxisIndex: 0
+        //         },
+        //         {
+        //             type: 'inside',
+        //             realtime: true,
+        //             start: 30,
+        //             end: 70,
+        //             xAxisIndex: 0
+        //         }
+        //     ],
+        //     xAxis: {
+        //         type: 'category',
+        //         data: e.map(v => v.collectTime)
+        //     },
+        //     yAxis: {
+        //         type: 'value'
+        //     },
+        //     series: [
+        //         {
+        //             data: e.map(v => v.acceleration),
+        //             type: 'line'
+        //         }
+        //     ]
+        // }, true);
+
+        // $(window).resize(lineChart1.resize);
+        // $(window).resize(lineChart2.resize);
+        // $(window).resize(lineChart3.resize);
+    }
 </script>
 </body>
 </html>
diff --git a/ruoyi-admin/src/main/resources/templates/system/TVibrationsensorData/RealTimeMonitor.html b/ruoyi-admin/src/main/resources/templates/system/TVibrationsensorData/RealTimeMonitor.html
index 039fdd9..4144e37 100644
--- a/ruoyi-admin/src/main/resources/templates/system/TVibrationsensorData/RealTimeMonitor.html
+++ b/ruoyi-admin/src/main/resources/templates/system/TVibrationsensorData/RealTimeMonitor.html
@@ -1,101 +1,102 @@
 <!DOCTYPE html>
 <html lang="zh" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro" xmlns:th="http://www.thymeleaf.org">
 <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"/>
+    <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>
 <style>
-  .chartDiv {
-    width: 49%;
-    height: 22vw;
-    position: relative;
-    display: inline-block;
-  }
+    .chartDiv {
+        width: 32.5%;
+        height: 22vw;
+        position: relative;
+        display: inline-block;
+    }
 
-  .chartDiv .chart {
-    width: 100%;
-    height: calc(100% - 50px);
-    position: absolute;
-    bottom: 0
-  }
+    .chartDiv .chart {
+        width: 100%;
+        height: calc(100% - 50px);
+        position: absolute;
+        bottom: 0
+    }
 
-  .chartDiv .title {
-    font-size: 22px;
-    font-weight: 700;
-    width: 100%;
-    text-align: center;
-  }
+    .chartDiv .title {
+        font-size: 22px;
+        font-weight: 700;
+        width: 100%;
+        text-align: center;
+    }
 
-  .chartDiv .time {
-    font-size: 16px;
-    color: #0003;
-    width: 100%;
-    text-align: center;
-  }
+    .chartDiv .time {
+        font-size: 16px;
+        color: #0003;
+        width: 100%;
+        text-align: center;
+    }
 
-  .chartDiv .mileage {
-    position: absolute;
-    top: 70%;
-    left: 24.2%;
-    transform: translateX(-50%);
-  }
+    .chartDiv .mileage {
+        position: absolute;
+        top: 74%;
+        left: 50%;
+        transform: translateX(-50%);
+    }
 
-  .chartDiv .text {
-    font-size: 1.25vw;
-    position: absolute;
-    top: 80%;
-    left: 24.2%;
-    transform: translateX(-50%);
-  }
+    .chartDiv .text {
+        font-size: 1.25vw;
+        position: absolute;
+        top: 80%;
+        left: 50%;
+        transform: translateX(-50%);
+    }
 
-  .chartDiv .mileage .num {
-    font-size: 1vw;
-    margin: 0 0.1vw;
-    padding: 0.05vw 0.1vw;
-    background-color: #0001;
-    display: inline-block;
-  }
+    .chartDiv .mileage .num {
+        font-size: 1vw;
+        margin: 0 0.1vw;
+        padding: 0.05vw 0.1vw;
+        background-color: #0001;
+        display: inline-block;
+    }
 </style>
 <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 class="btn btn-box-tool" href="#" onclick="dept()" title="测控点信息" type="button"><i
-                class="fa fa-edit"></i></a>
-        <button class="btn btn-box-tool" id="btnExpand" style="display:none;" title="展开" type="button"><i
-                class="fa fa-chevron-up"></i></button>
-        <button class="btn btn-box-tool" id="btnCollapse" title="折叠" type="button"><i
-                class="fa fa-chevron-down"></i></button>
-        <button class="btn btn-box-tool" id="btnRefresh" title="刷新" type="button"><i class="fa fa-refresh"></i>
-        </button>
-      </div>
+    <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 class="btn btn-box-tool" href="#" onclick="dept()" title="测控点信息" type="button"><i
+                        class="fa fa-edit"></i></a>
+                <button class="btn btn-box-tool" id="btnExpand" style="display:none;" title="展开" type="button"><i
+                        class="fa fa-chevron-up"></i></button>
+                <button class="btn btn-box-tool" id="btnCollapse" title="折叠" type="button"><i
+                        class="fa fa-chevron-down"></i></button>
+                <button class="btn btn-box-tool" id="btnRefresh" title="刷新" type="button"><i
+                        class="fa fa-refresh"></i>
+                </button>
+            </div>
+        </div>
+        <div class="ui-layout-content">
+            <div class="ztree" id="tree"></div>
+        </div>
     </div>
-    <div class="ui-layout-content">
-      <div class="ztree" id="tree"></div>
-    </div>
-  </div>
 </div>
 
 <div class="ui-layout-center">
-  <div class="container-div">
-    <div class="row">
-      <div class="col-sm-12 search-collapse">
+    <div class="container-div">
+        <div class="row">
+            <div class="col-sm-12 search-collapse">
 
-        <div id="chartDivs">
+                <div id="chartDivs">
+
+                </div>
+
+            </div>
 
         </div>
-
-      </div>
-
     </div>
-  </div>
 </div>
 <th:block th:include="include :: footer"/>
 <th:block th:include="include :: layout-latest-js"/>
@@ -103,203 +104,225 @@
 <th:block th:include="include :: datetimepicker-js"/>
 <script src="../../../js/common/echarts.min.js"></script>
 <script th:inline="javascript">
-  var editFlag = [[${@permission.hasPermi('system:TVibrationsensorData:edit')}]];
-  var removeFlag = [[${@permission.hasPermi('system:TVibrationsensorData:remove')}]];
-  var prefix = ctx + "system/TVibrationsensorData";
+    var editFlag = [[${@permission.hasPermi('system:TVibrationsensorData:edit')}]];
+    var removeFlag = [[${@permission.hasPermi('system:TVibrationsensorData:remove')}]];
+    var prefix = ctx + "system/TVibrationsensorData";
 
-  $(function () {
-    var panehHidden = false;
-    if ($(this).width() < 769) {
-      panehHidden = true;
-    }
-    $('body').layout({initClosed: panehHidden, west__size: 245});
-    queryDeptTree();
-  });
-
-  let time1 = null
-
-  function queryDeptTree() {
-    var url = ctx + "system/Monitor/treeData?monitorType=" + 20;
-    var options = {
-      url: url,
-      expandLevel: 1,
-      onClick: zOnClick
-    };
-    $.tree.init(options);
-
-    function zOnClick(event, treeId, treeNode) {
-      $.post(ctx + 'system/TVibrationsensorData/realTimeMonitor', {sensorId: treeNode.id}, (e) => {
-        if (e.code === 0) {
-          let data = e.data || []
-          $("#chartDivs").html('')
-          data.forEach((v, k) => {
-            let html = `
-          <div class="chartDiv" id="chartDiv">
-          <div class="title">${v.monitorName}</div>
-          <div class="time">${v.collectTime}</div>
-          <div class="chart" id="chart${k}">
-          </div>
-          <div class="mileage">
-          ${v.displacement.toString().split('').map(vv => {
-              return `<div class="num">${vv}</div>`
-            }).join('')}
-          </div>
-          <div class="text">位移(um)</div>
-          </div>
-          `
-            $("#chartDivs").append(html)
-
-            let chart = echarts.init(document.getElementById(`chart${k}`))
-
-            let option = {
-              series: [
-                {
-                  name: 'Pressure',
-                  type: 'gauge',
-                  animation: false,
-                  detail: {
-                    formatter: '{value}',
-                    offsetCenter: [0, '20%'],
-                    // offsetCenter: [0, '-40%'] ,
-                  },
-                  center: ['25%', '50%'],
-                  radius: '90%',
-                  max: Math.max(Math.ceil(v.speed / 100),1 ) * 100,
-                  data: [
-                    {
-                      value: v.speed,
-                      name: '速度(mm/s)',
-                      title: {
-                        offsetCenter: [0, '-20%'],
-                      },
-                    }
-                  ]
-                },
-                {
-                  name: 'Pressure',
-                  type: 'gauge',
-                  animation: false,
-                  detail: {
-                    fontSize: 20,
-                    formatter: '{value}'
-                  },
-                  center: ['60%', '70%'],
-                  radius: '65%',
-                  axisTick: {
-
-                    distance: 4
-                  },
-                  pointer: {
-                    length: '50%',
-                    width: 4
-                  },
-                  data: [
-                    {
-                      value: v.temperature,
-                      name: '温度(℃)',
-                      detail: {
-                        fontSize: 12,
-                      },
-                    }
-                  ]
-                },
-              ]
-            };
-            chart.setOption(option)
-          })
+    $(function () {
+        var panehHidden = false;
+        if ($(this).width() < 769) {
+            panehHidden = true;
         }
-      })
+        $('body').layout({initClosed: panehHidden, west__size: 245});
+        queryDeptTree();
+    });
 
-      if(time1){
-        clearInterval(time1)
-        time1 = null
-      }
+    let time1 = null
 
-      time1 = setInterval(()=>{
-        $.post(ctx + 'system/TVibrationsensorData/realTimeMonitor', {sensorId: treeNode.id}, (e) => {
-          if (e.code === 0) {
-            let data = e.data || []
-            $("#chartDivs").html('')
-            data.forEach((v, k) => {
-              let html = `
+    function queryDeptTree() {
+        var url = ctx + "system/Monitor/treeData?monitorType=" + 20;
+        var options = {
+            url: url,
+            expandLevel: 1,
+            onClick: zOnClick
+        };
+        $.tree.init(options);
+
+        function zOnClick(event, treeId, treeNode) {
+            $.post(ctx + 'system/TVibrationsensorData/realTimeMonitor', {sensorId: treeNode.id}, (e) => {
+                if (e.code === 0) {
+                    let data = e.data || []
+                    $("#chartDivs").html('')
+                    data.forEach((v, k) => {
+                        let html = `
           <div class="chartDiv" id="chartDiv">
           <div class="title">${v.monitorName}</div>
           <div class="time">${v.collectTime}</div>
           <div class="chart" id="chart${k}">
           </div>
           <div class="mileage">
-          ${v.displacement.toString().split('').map(vv => {
-                return `<div class="num">${vv}</div>`
-              }).join('')}
+          ${v.temperature.toString().split('').map(vv => {
+                            return `<div class="num">${vv}</div>`
+                        }).join('')}
           </div>
-          <div class="text">位移(um)</div>
+          <div class="text">温度(℃)</div>
           </div>
           `
-              $("#chartDivs").append(html)
+                        $("#chartDivs").append(html)
 
-              let chart = echarts.init(document.getElementById(`chart${k}`))
+                        let chart = echarts.init(document.getElementById(`chart${k}`))
 
-              let option = {
-                series: [
-                  {
-                    name: 'Pressure',
-                    type: 'gauge',
-                    animation: false,
-                    detail: {
-                      formatter: '{value}',
-                      offsetCenter: [0, '20%'],
-                      // offsetCenter: [0, '-40%'] ,
-                    },
-                    center: ['25%', '50%'],
-                    radius: '90%',
-                    max: Math.max(Math.ceil(v.speed / 100),1 ) * 100,
-                    data: [
-                      {
-                        value: v.speed,
-                        name: '速度(mm/s)',
-                        title: {
-                          offsetCenter: [0, '-20%'],
-                        },
-                      }
-                    ]
-                  },
-                  {
-                    name: 'Pressure',
-                    type: 'gauge',
-                    animation: false,
-                    detail: {
-                      fontSize: 20,
-                      formatter: '{value}'
-                    },
-                    center: ['60%', '70%'],
-                    radius: '65%',
-                    axisTick: {
-
-                      distance: 4
-                    },
-                    pointer: {
-                      length: '50%',
-                      width: 4
-                    },
-                    data: [
-                      {
-                        value: v.temperature,
-                        name: '温度(℃)',
-                        detail: {
-                          fontSize: 12,
-                        },
-                      }
-                    ]
-                  },
-                ]
-              };
-              chart.setOption(option)
+                        let option = {
+                            series: [
+                                {
+                                    name: 'Pressure',
+                                    type: 'gauge',
+                                    animation: false,
+                                    detail: {
+                                        formatter: '{value}',
+                                        offsetCenter:
+                                            [0, '20%'],
+                                        // offsetCenter: [0, '-40%'] ,
+                                    },
+                                    center: ['50%', '50%'],
+                                    radius:
+                                        '90%',
+                                    max:
+                                        Math.max(Math.ceil(v.speed / 100), 1) * 100,
+                                    data:
+                                        [
+                                            {
+                                                value: v.speed,
+                                                name: 'mm/s',
+                                                title: {
+                                                    offsetCenter: ['50%', '65%'],
+                                                    fontSize: 12,
+                                                    color: '#000'
+                                                },
+                                                detail: {
+                                                    show: false,
+                                                    fontSize: 12,
+                                                },
+                                            }
+                                        ]
+                                },
+                                {
+                                    name: 'Pressure',
+                                    type: 'gauge',
+                                    animation: false,
+                                    splitNumber: 4,
+                                    axisLine: {
+                                        show: false
+                                    },
+                                    center: ['50%', '50%'],
+                                    radius:
+                                        '50%',
+                                    max: Math.max(Math.ceil(v.displacement / 100), 1) * 100,
+                                    data: [
+                                        {
+                                            value: v.displacement,
+                                            name: 'um',
+                                            title: {
+                                                offsetCenter: ['45%', '55%'],
+                                                fontSize: 12,
+                                                color: '#000'
+                                            },
+                                            detail: {
+                                                show: false,
+                                                fontSize: 12,
+                                            },
+                                        },
+                                    ]
+                                },
+                            ]
+                        };
+                        chart.setOption(option)
+                    })
+                }
             })
-          }
-        })
-      },5*1000)
+
+            if (time1) {
+                clearInterval(time1)
+                time1 = null
+            }
+
+            time1 = setInterval(() => {
+                $.post(ctx + 'system/TVibrationsensorData/realTimeMonitor', {sensorId: treeNode.id}, (e) => {
+                    if (e.code === 0) {
+                        let data = e.data || []
+                        $("#chartDivs").html('')
+                        data.forEach((v, k) => {
+                            let html = `
+          <div class="chartDiv" id="chartDiv">
+          <div class="title">${v.monitorName}</div>
+          <div class="time">${v.collectTime}</div>
+          <div class="chart" id="chart${k}">
+          </div>
+
+          <div class="mileage">
+          ${v.temperature.toString().split('').map(vv => {
+                                return `<div class="num">${vv}</div>`
+                            }).join('')}
+          </div>
+          <div class="text">温度(℃)</div>
+          </div>
+          `
+                            $("#chartDivs").append(html)
+
+                            let chart = echarts.init(document.getElementById(`chart${k}`))
+
+                            let option = {
+                                series: [
+                                    {
+                                        name: 'Pressure',
+                                        type: 'gauge',
+                                        animation: false,
+                                        detail: {
+                                            formatter: '{value}',
+                                            offsetCenter: [0, '20%'],
+                                            // offsetCenter: [0, '-40%'] ,
+                                        },
+                                        center: ['50%', '50%'],
+                                        radius: '90%',
+                                        max: Math.max(Math.ceil(v.displacement / 100), 1) * 100,
+                                        data: [
+                                            {
+                                                value: v.displacement,
+                                                name: '位移(um)',
+                                                title: {
+                                                    show: false
+                                                },
+                                                detail: {
+                                                    show: false,
+                                                    fontSize: 12,
+                                                },
+                                            },
+                                        ]
+                                    },
+                                    {
+                                        name: 'Pressure',
+                                        type: 'gauge',
+                                        axisLine: {
+                                            show: false
+                                        },
+                                        animation: false,
+                                        splitNumber: 4,
+                                        detail: {
+                                            formatter: '{value}',
+                                            offsetCenter:
+                                                [0, '20%'],
+                                            // offsetCenter: [0, '-40%'] ,
+                                        }
+                                        ,
+                                        center: ['50%', '50%'],
+                                        radius:
+                                            '50%',
+                                        max:
+                                            Math.max(Math.ceil(v.speed / 100), 1) * 100,
+                                        data:
+                                            [
+                                                {
+                                                    value: v.speed,
+                                                    name: '速度(mm/s)',
+                                                    title: {
+                                                        show: false
+                                                    },
+                                                    detail: {
+                                                        show: false,
+                                                        fontSize: 12,
+                                                    },
+                                                }
+                                            ]
+                                    },
+                                ]
+                            };
+                            chart.setOption(option)
+                        })
+                    }
+                })
+            }, 5000 * 1000)
+        }
     }
-  }
 
 
 </script>
