添加振动监控图表

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

@@ -130,13 +130,13 @@
       $.post(ctx + 'system/TVibrationsensorData/realTimeMonitor', {sensorId: treeNode.id}, (e) => {
         if (e.code === 0) {
           let data = e.data || []
-          let html = ''
+          $("#chartDivs").html('')
-          data.forEach(v => {
+          data.forEach((v, k) => {
-            html += `
+            let html = `
           <div class="chartDiv" id="chartDiv">
           <div class="title">${v.monitorName}</div>
           <div class="time">${v.collectTime}</div>
-          <div class="chart" id="chart">
+          <div class="chart" id="chart${k}">
           </div>
           <div class="mileage">
           ${v.displacement.toString().split('').map(vv => {
@@ -146,63 +146,64 @@
           <div class="text">位移(um)</div>
           </div>
           `
-          })
+            $("#chartDivs").append(html)
-          $("#chartDivs").html(html)
+
-
+            let chart = echarts.init(document.getElementById(`chart${k}`))
-          let chart = echarts.init(document.getElementById('chart'))
+
-
+            let option = {
-          let option = {
+              series: [
-            series: [
+                {
-              {
+                  name: 'Pressure',
-                name: 'Pressure',
+                  type: 'gauge',
-                type: 'gauge',
+                  detail: {
-                detail: {
+                    formatter: '{value}',
-                  formatter: '{value}',
+                    offsetCenter: [0, '20%'],
-                  offsetCenter: [0, '20%'],
+                    // offsetCenter: [0, '-40%'] ,
-                  // offsetCenter: [0, '-40%'] ,
+                  },
-                },
+                  center: ['25%', '50%'],
-                center: ['25%', '50%'],
+                  radius: '90%',
-                radius: '90%',
+                  max: Math.ceil(v.speed / 100) * 100,
-                data: [
+                  data: [
-                  {
+                    {
-                    value: 21,
+                      value: v.speed,
-                    name: '速度(mm/s)',
+                      name: '速度(mm/s)',
-                    title: {
+                      title: {
-                      offsetCenter: [0, '-20%'],
+                        offsetCenter: [0, '-20%'],
-                    },
+                      },
-                  }
+                    }
-                ]
+                  ]
-              },
-              {
-                name: 'Pressure',
-                type: 'gauge',
-                detail: {
-                  fontSize: 20,
-                  formatter: '{value}'
                 },
-                center: ['60%', '70%'],
+                {
-                radius: '65%',
+                  name: 'Pressure',
-                axisTick: {
+                  type: 'gauge',
-
+                  detail: {
-                  distance: 4
+                    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,
+                      },
+                    }
+                  ]
                 },
-                pointer: {
+              ]
-                  length: '50%',
+            };
-                  width: 4
+            chart.setOption(option)
-                },
+          })
-                data: [
-                  {
-                    value: 32,
-                    name: '温度(℃)',
-                    detail: {
-                      fontSize: 12,
-                    },
-                  }
-                ]
-              },
-            ]
-          };
-          chart.setOption(option)
         }
       })
     }