添加振动监控图表

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 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,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>