From d8114d76cdfae4e929381cb8d1e2145cae0bc677 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 14:59:26 +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 | 155 ++++++++++--------
 1 file changed, 83 insertions(+), 72 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 e865d80..4f50880 100644
--- a/ruoyi-admin/src/main/resources/templates/system/TVibrationsensorData/RealTimeMonitor.html
+++ b/ruoyi-admin/src/main/resources/templates/system/TVibrationsensorData/RealTimeMonitor.html
@@ -29,7 +29,7 @@
 
   .chartDiv .time {
     font-size: 16px;
-    color:#0003;
+    color: #0003;
     width: 100%;
     text-align: center;
   }
@@ -37,7 +37,7 @@
   .chartDiv .mileage {
     position: absolute;
     top: 70%;
-    left: 29%;
+    left: 24.2%;
     transform: translateX(-50%);
   }
 
@@ -45,7 +45,7 @@
     font-size: 1.25vw;
     position: absolute;
     top: 80%;
-    left: 29%;
+    left: 24.2%;
     transform: translateX(-50%);
   }
 
@@ -87,20 +87,8 @@
     <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 id="chartDivs">
+
         </div>
 
       </div>
@@ -139,64 +127,87 @@
 
     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 || []
+          let html = ''
+          data.forEach(v => {
+            html += `
+          <div class="chartDiv" id="chartDiv">
+          <div class="title">${v.monitorName}</div>
+          <div class="time">${v.collectTime}</div>
+          <div class="chart" id="chart">
+          </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").html(html)
+
+          let chart = echarts.init(document.getElementById('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)
+        }
+      })
     }
   }
 
-  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>