From 1b17abfb64d51db4f56af32a1a7795d4d68a6a10 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=9C=E7=AC=99=E6=AD=8C?= <2277317060@qq.com>
Date: Thu, 5 Sep 2024 11:14:00 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=8C=AF=E5=8A=A8=E7=9B=91?=
 =?UTF-8?q?=E6=8E=A7=E5=9B=BE=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../TVibrationsensorData/RealTimeMonitor.html | 393 +++++++++---------
 .../TVibrationsensorData.html                 |   2 +-
 2 files changed, 186 insertions(+), 209 deletions(-)
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 3ece4dd..e865d80 100644
--- a/ruoyi-admin/src/main/resources/templates/system/TVibrationsensorData/RealTimeMonitor.html
+++ b/ruoyi-admin/src/main/resources/templates/system/TVibrationsensorData/RealTimeMonitor.html
@@ -1,226 +1,203 @@
 <!DOCTYPE html>
-<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
+<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: 50%;
+    height: 22vw;
+    position: relative;
+  }
+
+  .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 .time {
+    font-size: 16px;
+    color:#0003;
+    width: 100%;
+    text-align: center;
+  }
+
+  .chartDiv .mileage {
+    position: absolute;
+    top: 70%;
+    left: 29%;
+    transform: translateX(-50%);
+  }
+
+  .chartDiv .text {
+    font-size: 1.25vw;
+    position: absolute;
+    top: 80%;
+    left: 29%;
+    transform: translateX(-50%);
+  }
+
+  .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 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 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>
 
 <div class="ui-layout-center">
-     <div class="container-div">
-        <div class="row">
-            <div class="col-sm-12 search-collapse">
-                <form id="formId">
-                    <input type="hidden" id="sensorId" name="sensorId">
-                    <div class="select-list">
-                        <ul>
-                            <li class="select-time">
-                                <label>采集时间：</label>
-                                <input type="text" style="width: 150px" class="form-control" id="laydate-demo-3" placeholder="开始时间" name="params[beginCollectTime]"/>
-                                <span>-</span>
-                                <input type="text" style="width: 150px" class="form-control" id="laydate-demo-4" placeholder="结束时间" name="params[endCollectTime]"/>
-                            </li>
-<!--                            <li>-->
-<!--                                <label>振动传感器ID：</label>-->
-<!--                                <input type="text" name="sensorId"/>-->
-<!--                            </li>-->
-<!--                            <li class="select-time">-->
-<!--                                <label>记录时间：</label>-->
-<!--                                <input type="text" class="time-input" id="startTime" placeholder="开始时间" name="params[beginRecodeTime]"/>-->
-<!--                                <span>-</span>-->
-<!--                                <input type="text" class="time-input" id="endTime" placeholder="结束时间" name="params[endRecodeTime]"/>-->
-<!--                            </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-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
-                            </li>
-                        </ul>
-                    </div>
-                </form>
-            </div>
-
-            <div class="btn-group-sm" id="toolbar" role="group">
-<!--                <a class="btn btn-success" onclick="$.operate.add()" shiro:hasPermission="system:TVibrationsensorData:add">-->
-<!--                    <i class="fa fa-plus"></i> 添加-->
-<!--                </a>-->
-<!--                <a class="btn btn-primary single disabled" onclick="$.operate.edit()" shiro:hasPermission="system:TVibrationsensorData:edit">-->
-<!--                    <i class="fa fa-edit"></i> 修改-->
-<!--                </a>-->
-<!--                <a class="btn btn-danger multiple disabled" onclick="$.operate.removeAll()" shiro:hasPermission="system:TVibrationsensorData:remove">-->
-<!--                    <i class="fa fa-remove"></i> 删除-->
-<!--                </a>-->
-                <a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="system:TVibrationsensorData:export">
-                    <i class="fa fa-download"></i> 导出
-                </a>
-            </div>
-            <div class="col-sm-12 select-table table-striped">
-                <table id="bootstrap-table"></table>
-            </div>
+  <div class="container-div">
+    <div class="row">
+      <div class="col-sm-12 search-collapse">
+
+        <div class="chartDiv">
+          <div class="title">1</div>
+          <div class="time">2024-01-01 00:00:00</div>
+          <div class="chart" id="chart">
+          </div>
+          <div class="mileage">
+            <div class="num">1</div>
+            <div class="num">2</div>
+            <div class="num">1</div>
+            <div class="num">2</div>
+            <div class="num">1</div>
+            <div class="num">2</div>
+          </div>
+          <div class="text">位移(um)</div>
         </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 :: datetimepicker-js"/>
-    <script th:inline="javascript">
-        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});
-            queryUserList();
-            queryDeptTree();
-        });
-
-        function queryUserList() {
-            var options = {
-                url: prefix + "/list",
-                createUrl: prefix + "/add",
-                updateUrl: prefix + "/edit/{id}",
-                removeUrl: prefix + "/remove",
-                exportUrl: prefix + "/export",
-                modalName: "振动传感器数据",
-                columns: [{
-                    checkbox: true
-                },
-                {
-                    field: 'objId',
-                    title: '主键标识',
-                    visible: false
-                },
-                {
-                    field: 'sensorId',
-                    title: '振动传感器ID'
-                },
-                {
-                    field: 'speed',
-                    title: '速度(mm/s)'
-                },
-                {
-                    field: 'displacement',
-                    title: '位移(um)'
-                },
-                {
-                    field: 'acceleration',
-                    title: '加速度(g)'
-                },
-                {
-                    field: 'temperature',
-                    title: '温度(℃)'
-                },
-                {
-                        field: 'collectTime',
-                        title: '采集时间'
-                },
-                {
-                    field: 'recodeTime',
-                    title: '记录时间'
-                },
-                {
-                    field: 'remark',
-                    title: '备注',
-                    visible: false
-                },
-                // {
-                //     title: '操作',
-                //     align: 'center',
-                //     formatter: function(value, row, index) {
-                //         var actions = [];
-                //         actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.edit(\'' + row.objId + '\')"><i class="fa fa-edit"></i>编辑</a> ');
-                //         actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.objId + '\')"><i class="fa fa-remove"></i>删除</a>');
-                //         return actions.join('');
-                //     }
-                // }
-                ]
-            };
-            $.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) {
-                $("#sensorId").val(treeNode.id);
-                /*alert(treeNode.id)*/
-                $.table.search();
-            }
-        }
-
-        $('#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=20";
-            $.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>
+<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";
+
+  $(function () {
+    var panehHidden = false;
+    if ($(this).width() < 769) {
+      panehHidden = true;
+    }
+    $('body').layout({initClosed: panehHidden, west__size: 245});
+    queryDeptTree();
+  });
+
+
+  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) {
+      console.log(treeNode)
+    }
+  }
+
+  let chart = echarts.init(document.getElementById('chart'))
+  console.log(chart)
+
+  let option = {
+    series: [
+      {
+        name: 'Pressure',
+        type: 'gauge',
+        detail: {
+          formatter: '{value}',
+          offsetCenter: [0, '20%'],
+          // offsetCenter: [0, '-40%'] ,
+        },
+        center: ['25%', '50%'],
+        radius: '90%',
+        data: [
+          {
+            value: 21,
+            name: '速度(mm/s)',
+            title: {
+              offsetCenter: [0, '-20%'],
+            },
+          }
+        ]
+      },
+      {
+        name: 'Pressure',
+        type: 'gauge',
+        detail: {
+          fontSize: 20,
+          formatter: '{value}'
+        },
+        center: ['60%', '70%'],
+        radius: '65%',
+        axisTick: {
+
+          distance: 4
+        },
+        pointer: {
+          length: '50%',
+          width: 4
+        },
+        data: [
+          {
+            value: 32,
+            name: '温度(℃)',
+            detail: {
+              fontSize: 12,
+            },
+          }
+        ]
+      },
+    ]
+  };
+  chart.setOption(option)
+
+</script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/ruoyi-admin/src/main/resources/templates/system/TVibrationsensorData/TVibrationsensorData.html b/ruoyi-admin/src/main/resources/templates/system/TVibrationsensorData/TVibrationsensorData.html
index 0046fc3..4008029 100644
--- a/ruoyi-admin/src/main/resources/templates/system/TVibrationsensorData/TVibrationsensorData.html
+++ b/ruoyi-admin/src/main/resources/templates/system/TVibrationsensorData/TVibrationsensorData.html
@@ -223,4 +223,4 @@
 
     </script>
 </body>
-</html>
\ No newline at end of file
+</html>
