[update] testChart, testMQTT

src/app/main.js

@@ -47,7 +47,7 @@ localforage.config({ name: 'bioprovue' })
 let MqttUrl
 // for developer
 if (process.env.NODE_ENV === 'development') {
-  MqttUrl = 'ws://192.168.5.240:8083'
+  MqttUrl = 'ws://192.168.5.42:8083'
 } else {
   // for user
   MqttUrl = `ws://${location.href.split('/')[2]}:8083`

src/components/task/content/TaskContent.vue

@@ -33,7 +33,6 @@
             <task-formula :ref="'formula_ref'" @add="addFormula($event)" @remove="removeFormula($event)" class="pa-0" />
           </div>
         </div>
-
       </div>
 
       <div :class="chartAreaClass">

src/components/test/testChart.vue

@@ -0,0 +1,125 @@
+<template>
+  <div style="background-color: #ffffff;">
+    <chart
+      style="width: 100%;"
+      :options="statistic1"
+      :auto-resize="true">
+    </chart>
+    <chart
+      style="width: 100%;"
+      :options="statistic2"
+      :auto-resize="true">
+    </chart>
+    <button @click="click()">
+      <p v-if="isRecord">Stop Record</p>
+      <p v-else>Start Record</p>
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      rec: null,
+      recLength: 100,
+      isRecord: false,
+      counter: 0,
+      statistic1: {
+        xAxis: {
+          type: 'time',
+        },
+        yAxis: {
+          type: 'value',
+          boundaryGap: ['50%', '50%'],
+        },
+        series: [
+          {
+            data: [],
+            type: 'line',
+            showSymbol: false,
+          },
+        ],
+        visualMap: [
+          {
+            show: false,
+            type: 'continuous',
+          },
+        ],
+        grid: [
+          {
+            bottom: '10%',
+          },
+          {
+            top: '60%',
+          },
+        ],
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            animation: false,
+          },
+        },
+      },
+      statistic2: {
+        xAxis: {
+          type: 'time',
+        },
+        yAxis: {
+          type: 'value',
+          boundaryGap: ['50%', '50%'],
+        },
+        series: [
+          {
+            data: [],
+            type: 'line',
+            showSymbol: false,
+            lineStyle: {
+              color: '#234324',
+            },
+          },
+        ],
+        visualMap: [
+          {
+            show: false,
+            type: 'continuous',
+          },
+        ],
+        grid: [
+          {
+            bottom: '10%',
+          },
+          {
+            top: '10%',
+          },
+        ],
+      },
+    }
+  },
+  mounted () {
+    for (let i = 1; i <= this.recLength; i++) {
+      let v = [100 * i, Math.random()]
+      this.statistic1.series[0].data.push(v)
+      v = [100 * i, Math.random()]
+      this.statistic2.series[0].data.push(v)
+    }
+    this.counter = this.recLength + 1
+  },
+  methods: {
+    click: function () {
+      this.isRecord = !this.isRecord
+      if (this.isRecord) {
+        this.rec = setInterval(this.update, 100)
+      } else {
+        clearInterval(this.rec)
+      }
+    },
+    update: function () {
+      this.statistic1.series[0].data.shift()
+      this.statistic1.series[0].data.push([100 * this.counter, Math.random()])
+      this.statistic2.series[0].data.shift()
+      this.statistic2.series[0].data.push([100 * this.counter++, Math.random()])
+    },
+  },
+}
+</script>

src/components/test/testMQTT.vue

@@ -0,0 +1,223 @@
+<template>
+  <div style="background-color: #ffffff;">
+    <chart
+      style="width: 100%;"
+      :options="statistic1"
+      :auto-resize="true">
+    </chart>
+    <chart
+      style="width: 100%;"
+      :options="statistic2"
+      :auto-resize="true">
+    </chart>
+    <button @click="click()" class="center">
+      <p v-if="isRecord">Stop Record</p>
+      <p v-else>Start Record</p>
+    </button>
+    <button @click="cleanAll()" class="center">
+      clean
+    </button>
+  </div>
+</template>
+
+<script>
+
+export default {
+  data () {
+    return {
+      rec: null,
+      recLength: 200,
+      isRecord: false,
+      counter1: 0,
+      counter2: 0,
+      buffer: [],
+      statistic1: {
+        xAxis: {
+          type: 'time',
+          boundaryGap: false,
+          interval: 10 * 1e6,
+          axisLabel: {
+            formatter: function (val) {
+              val = parseInt(val) / 1e6
+              return val.toString() + 's'
+            },
+          },
+        },
+        yAxis: {
+          type: 'value',
+          boundaryGap: ['50%', '50%'],
+        },
+        series: [
+          {
+            data: [],
+            type: 'line',
+            showSymbol: false,
+          },
+        ],
+        visualMap: [
+          {
+            show: false,
+            type: 'continuous',
+          },
+        ],
+        grid: [
+          {
+            bottom: '10%',
+          },
+          {
+            top: '60%',
+          },
+        ],
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            animation: false,
+          },
+        },
+        toolbox: {
+          feature: {
+            dataZoom: {
+              yAxisIndex: 'none',
+            },
+          },
+        },
+        dataZoom: [
+          {
+            id: 'dataZoomX',
+            type: 'slider',
+            start: 0,
+            minSpan: 8, // 5min
+            // xAxisIndex: [0],
+            // filterMode: 'none',
+          },
+          {
+            id: 'dataZoomY',
+            type: 'inside',
+            yAxisIndex: [0],
+            filterMode: 'none',
+          },
+        ],
+      },
+      statistic2: {
+        xAxis: {
+          data: [],
+          type: 'category',
+        },
+        yAxis: {
+          type: 'value',
+          boundaryGap: ['50%', '50%'],
+        },
+        series: [
+          {
+            data: [],
+            type: 'line',
+            showSymbol: false,
+            lineStyle: {
+              color: '#234324',
+            },
+          },
+        ],
+        visualMap: [
+          {
+            show: false,
+            type: 'continuous',
+          },
+        ],
+        grid: [
+          {
+            bottom: '10%',
+          },
+          {
+            top: '10%',
+          },
+        ],
+      },
+    }
+  },
+  mounted () {
+    // chart init
+    this.counter2 = 0
+    // MQTT init
+    this.mqttSub('+/+/device_data_stream/+/0')
+  },
+  destroyed () {
+    this.mqttUnSub('+/+/device_data_stream/+/0')
+  },
+  methods: {
+    // button
+    click: function () {
+      this.isRecord = !this.isRecord
+      if (this.isRecord) {
+        this.rec = setInterval(this.update, 0)
+      } else {
+        this.cleanBuffer()
+        clearInterval(this.rec)
+      }
+    },
+    cleanAll: function () {
+      this.buffer = []
+      this.statistic1.series[0].data = []
+      this.statistic2.xAxis.data = []
+      this.statistic2.series[0].data = []
+      this.counter1 = 0
+      this.counter2 = 0
+    },
+    cleanBuffer: function () {
+      this.buffer = []
+    },
+    // dynamic chart
+    update: function () {
+      // figure #1
+      if (this.statistic1.series[0].data.length > this.recLength) {
+        // this.statistic1.series[0].data.shift()
+      }
+      if (this.buffer.length > 0) {
+        this.statistic1.series[0].data.push(this.buffer[0])
+        this.buffer.shift()
+      }
+      // figure #2
+      this.counter2 = new Date().toLocaleTimeString()
+      if (this.statistic2.series[0].data.length > this.recLength) {
+        this.statistic2.xAxis.data.shift()
+        this.statistic2.series[0].data.shift()
+      }
+      this.statistic2.xAxis.data.push(this.counter2)
+      this.statistic2.series[0].data.push(Math.random())
+    },
+    // MQTT
+    mqttSub: function (val) {
+      this.$mqtt.subscribe(val)
+    },
+    mqttUnSub: function (val) {
+      this.$mqtt.unsubscribe(val)
+    },
+    mqttPub: function (topic, mes) {
+      this.$mqtt.publish(topic, mes)
+    },
+  },
+  mqtt: {
+    '+/+/device_data_stream/+/0' (data, topic) {
+      const dataStream = String.fromCharCode.apply(null, data).split(' ').map(Number)
+      const samplePeriod = (dataStream[dataStream.length - 1] - dataStream[0]) / (dataStream.length - 2)
+
+      if (this.isRecord) {
+        this.counter1 = dataStream[0]
+        for (let i = 1; i <= dataStream.length - 2; i++) {
+          this.buffer.push([this.counter1, dataStream[i]])
+          this.counter1 = this.counter1 + samplePeriod
+        }
+      }
+    },
+  },
+}
+</script>
+
+<style>
+.center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  left: 50%;
+  position: relative;
+}
+</style>

src/router/index.js

@@ -91,6 +91,11 @@ export default new Router({
       path: '/admin/:mode?',
       component: AppLayout,
       children: [
+        {
+          name: 'test',
+          path: 'test',
+          component: () => import('../components/test/testMQTT.vue'),
+        },
         {
           name: 'dashboard',
           path: 'dashboard',