添加振动监控图表

ruoyi-admin/src/main/resources/templates/system/TVibrationsensorData/RealTimeMonitor.html

@@ -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 id="chartDivs">
-          <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>
@@ -139,11 +127,29 @@
 
     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'))
-  console.log(chart)
 
           let option = {
             series: [
@@ -197,6 +203,11 @@
             ]
           };
           chart.setOption(option)
+        }
+      })
+    }
+  }
+
 
 </script>
 </body>