From ee46ee16b06e04a1dfb50597a1b586b9df2f84d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=9C=E7=AC=99=E6=AD=8C?= <2277317060@qq.com>
Date: Mon, 9 Sep 2024 08:47:18 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=AE=9E=E6=97=B6=E5=88=B7?=
 =?UTF-8?q?=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../TVibrationsensorData/RealTimeMonitor.html | 89 ++++++++++++++++++-
 1 file changed, 88 insertions(+), 1 deletion(-)

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 dcdaebc..4f16db3 100644
--- a/ruoyi-admin/src/main/resources/templates/system/TVibrationsensorData/RealTimeMonitor.html
+++ b/ruoyi-admin/src/main/resources/templates/system/TVibrationsensorData/RealTimeMonitor.html
@@ -116,6 +116,7 @@
     queryDeptTree();
   });
 
+  let time1 = null
 
   function queryDeptTree() {
     var url = ctx + "system/Monitor/treeData?monitorType=" + 20;
@@ -127,7 +128,6 @@
     $.tree.init(options);
 
     function zOnClick(event, treeId, treeNode) {
-      console.log(treeNode)
       $.post(ctx + 'system/TVibrationsensorData/realTimeMonitor', {sensorId: treeNode.id}, (e) => {
         if (e.code === 0) {
           let data = e.data || []
@@ -207,6 +207,93 @@
           })
         }
       })
+
+      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.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',
+                    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',
+                    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)
+            })
+          }
+        })
+      },5*1000)
     }
   }