feat(homePage): 获取流量数据并分组

src/api/dcs/dcs.js

@@ -66,7 +66,21 @@ export function getChartsDataByTime(params, bucketName, timeArr, time) {
 }
 
 export function getHourFlowData() {
-  const data = "union(tables: [from(bucket: \"mybucket\") |> range(start: -1h) |> filter(fn: (r) => r[\"_measurement\"] == \"sensor_test\") |> filter(fn: (r) => r[\"_field\"] == \"flow\") |> aggregateWindow(every: 1m, fn: mean, createEmpty: false), from(bucket: \"mybucket02\") |> range(start: -1h) |> filter(fn: (r) => r[\"_measurement\"] == \"sensor_test\") |> filter(fn: (r) => r[\"_field\"] == \"flow\") |> aggregateWindow(every: 1m, fn: mean, createEmpty: false), from(bucket: \"mybucket03\") |> range(start: -1h) |> filter(fn: (r) => r[\"_measurement\"] == \"sensor_test\") |> filter(fn: (r) => r[\"_field\"] == \"flow\") |> aggregateWindow(every: 1m, fn: mean, createEmpty: false), from(bucket: \"mybucket04\") |> range(start: -1h) |> filter(fn: (r) => r[\"_measurement\"] == \"sensor_test\") |> filter(fn: (r) => r[\"_field\"] == \"flow\") |> aggregateWindow(every: 1m, fn: mean, createEmpty: false), from(bucket: \"mybucket05\") |> range(start: -1h) |> filter(fn: (r) => r[\"_measurement\"] == \"sensor_test\") |> filter(fn: (r) => r[\"_field\"] == \"flow\") |> aggregateWindow(every: 1m, fn: mean, createEmpty: false), from(bucket: \"mybucket06\") |> range(start: -1h) |> filter(fn: (r) => r[\"_measurement\"] == \"sensor_test\") |> filter(fn: (r) => r[\"_field\"] == \"flow\") |> aggregateWindow(every: 1m, fn: mean, createEmpty: false), from(bucket: \"mybucket07\") |> range(start: -1h) |> filter(fn: (r) => r[\"_measurement\"] == \"sensor_test\") |> filter(fn: (r) => r[\"_field\"] == \"flow\") |> aggregateWindow(every: 1m, fn: mean, createEmpty: false), from(bucket: \"mybucket08\") |> range(start: -1h) |> filter(fn: (r) => r[\"_measurement\"] == \"sensor_test\") |> filter(fn: (r) => r[\"_field\"] == \"flow\") |> aggregateWindow(every: 1m, fn: mean, createEmpty: false)])";
+  // 破解 query语句
+  let data = `union(tables: [`;
+  for (let index = 1; index <= 8; index++) {
+    let i = index.toString().padStart(2, '0');
+    if (index == 1) {
+      i = ''
+    }
+    data += `from(bucket: "mybucket${i}") 
+    |> range(start: -1h) 
+    |> filter(fn: (r) => r["_measurement"] == "sensor_test") 
+    |> filter(fn: (r) => r["_field"] == "flow") 
+    |> aggregateWindow(every: 1m, fn: mean, createEmpty: false)
+    |> map(fn: (r) => ({ bucket: "mybucket${i}", time: r._time, flow: r._value })),`
+  }
+  data += `])`
   return request({
     baseURL: '/api',
     url: '/api/v2/query?org=myorg',

src/views/dcs/homePage/index.vue

@@ -12,7 +12,7 @@
                         <dv-border-box-1>
                             <!-- <div class="el_col_box_title">设备状态</div> -->
                             <div class="chart">
-                                <div ref="chartLeftTop" style="width: 100%; height: 300px;" />
+                                <div ref="chartLeftTop" class="chart_left_top chart_content" />
                             </div>
                         </dv-border-box-1>
                     </el-col>
@@ -103,15 +103,15 @@ export default {
                     },
                 ],
                 series: [
-                {
-                    type: 'bar',
-                },
-                {
-                    type: 'bar',
-                },
-                {
-                    type: 'bar',
-                }]
+                    {
+                        type: 'bar',
+                    },
+                    {
+                        type: 'bar',
+                    },
+                    {
+                        type: 'bar',
+                    }]
             },
 
             // 设备状态
@@ -163,13 +163,22 @@ export default {
         //初始化左上图表
         initchartLeftTop() {
             getHourFlowData().then(res => {
-                console.log('getHourFlowData: ', res)
+                // console.log('getHourFlowData: ', res)
+                const data = res.split(',').filter(item => item != '').map(item => item.trim())
+                const tableField = data.slice(0, 5)
+                const tableData = []
+                for (let index = 1; index < data.length / 5; index++) {
+                    const i = 5 * index
+                    tableData.push(data.slice(i, i + 5))
+                }
+                console.log('tableField: ', tableField)
+                console.log('tableData: ', tableData)
             })
             const chart = echarts.init(this.$refs.chartLeftTop);
             this.chartInstance = chart;
             this.chartInstance.setOption({
                 ...this.options,
-            })     
+            })
         },
         //初始化右中图表
         initchartRightMiddle() {
@@ -254,8 +263,19 @@ export default {
         width: 1920px;
         height: 800px;
 
+        .chart {
+            padding-top: 10px;
+            // width: 80%;
+            background: rgba($color: #0c2839, $alpha: 0.3);
+
+            .chart_content {
+                width: 100%;
+                height: 280px;
+            }
+        }
+
         .el_first_row {
-            margin-top: 25px;
+            padding-top: 25px;
 
             .el_col_box {
                 text-align: center;
@@ -268,10 +288,7 @@ export default {
                     // padding-top: 15px;
                 }
 
-                .chart {
-                    // width: 80%;
-                    background: rgba($color: #0c2839, $alpha: 0.3);
-                }
+
             }
         }