diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000000000000000000000000000000000000..714aee21d8a056413bc28e33ea23e7e87f4e5a9a
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,3 @@
+node_modules
+.quasar
+UI2.0/.quasar
\ No newline at end of file
diff --git a/UI2.0/package.json b/UI2.0/package.json
index f850cd8eaae1a4accd8a3569603c39c830b46588..b52707106269b4e9d9c8747b137f001fa3580bc2 100644
--- a/UI2.0/package.json
+++ b/UI2.0/package.json
@@ -6,7 +6,8 @@
   "author": "yang-ting-chen <bellahchate@qq.com>",
   "private": true,
   "scripts": {
-    "test": "echo \"No test specified\" && exit 0"
+    "test": "echo \"No test specified\" && exit 0",
+    "start": "quasar dev -H localhost"
   },
   "dependencies": {
     "@quasar/extras": "^1.0.0",
diff --git a/UI2.0/src/js/offline-tuning.js b/UI2.0/src/js/offline-tuning.js
index 8ffc2a44ce8130c1246cf09e213bc2d0788733ee..f6fd2b4cd1b0f91dbd7bb0a670b6cde5fda255ad 100644
--- a/UI2.0/src/js/offline-tuning.js
+++ b/UI2.0/src/js/offline-tuning.js
@@ -1,49 +1,193 @@
-import {defineComponent} from "vue";
-import * as charts from './utils/charts.js';
-import {updateTuningEvalData} from "./utils/charts.js";
+import { defineComponent } from "vue";
+import * as charts from "./utils/charts.js";
+import { getRandomInt } from "./utils/utils.js";
 
 export default defineComponent({
-  methods: {},
+  data() {
+    return {
+      a: [],
+      b: [],
+      myChart1: null,
+      myChart2: null,
+      myChart3: null,
+      myChart4: null,
+      timer: null,
+      ind: 2,
+      xValue: [],
+      yNames: ["test1", "test2", "test3"],
+      yValue: [],
+      yValue1: [],
+      yValue2: [],
+      yValue3: []
+    };
+  },
+  methods: {
+    updateChart1Data() {
+      charts.updateTuningEvalData(this.myChart1, this.yNames, this.yValue1);
+    },
+    updateChart2Data(newData) {
+      charts.appendLineChartData(
+        this.myChart2,
+        [this.ind],
+        this.yNames,
+        newData
+      );
+    },
+    updateChart3Data() {
+      charts.appendLineChartData(
+        this.myChart3,
+        [this.ind],
+        this.yNames,
+        this.b
+      );
+    },
+    updateChart4Data() {
+      charts.appendLineChartData(
+        this.myChart4,
+        [this.ind],
+        this.yNames,
+        this.a
+      );
+    },
+    initialData() {
+      for (let i = 0; i < this.yNames.length; i++) {
+        this.xValue = [1, 2];
+        this.yValue[i] = [];
+        this.yValue1[i] = [];
+        this.yValue2[i] = [];
+        this.yValue3[i] = [];
+        var randomValue = getRandomInt(100, 1000);
+        this.yValue[i].push(randomValue);
+        this.yValue1[i].push(randomValue);
+        this.yValue1[i].push(randomValue);
+        this.yValue2[i].push(randomValue);
+        this.yValue3[i].push(randomValue);
+        var randomValue = getRandomInt(100, 1000);
+        this.yValue[i].push(randomValue);
+        this.yValue1[i][1] = Math.max(
+          this.yValue1[i][1],
+          this.yValue[i][this.yValue[i].length - 1]
+        );
+        this.yValue3[i].push(randomValue);
+        this.yValue2[i].push(Math.max(this.yValue[i][0], this.yValue[i][1]));
+      }
+    },
+    start() {
+      this.timer = setInterval(() => {
+        this.ind += 1;
+        for (var i = 0; i < this.yNames.length; i++) {
+          this.a[i] = getRandomInt(100, 1000);
+          this.b[i] = getRandomInt(100, 1000);
+        }
+      }, 1000);
+    },
+
+    end() {
+      clearInterval(this.timer);
+      this.timer = null;
+    }
+  },
+  created() {
+    this.start();
+    this.initialData();
+  },
   mounted() {
     var echarts = require("echarts");
-    var myChart1 = echarts.init(document.getElementById("offline1"));
-    var myChart2 = echarts.init(document.getElementById("offline2"));
-    var myChart3 = echarts.init(document.getElementById("offline3"));
-    var myChart4 = echarts.init(document.getElementById("offline4"));
-
-    let xValue = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13',
-      '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27',
-      '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40'];
-    let yValue = [[
-      60000, 62000, 60000, 70000, 68000, 72000, 61000, 60000, 66000, 58000,
-      60000, 58000, 70000, 64000, 70000, 73000, 74000, 68000, 75000, 74000,
-      120000, 75000, 74500, 68000, 110000, 75000, 68000, 59000, 83000, 88000,
-      75000, 60000, 80000, 80000, 60000, 58000, 110000, 80000, 120000, 65000,
-    ], [
-      50000, 40000, 75000, 50000, 52000, 70000, 40000, 45000, 40000, 51000,
-      35000, 60000, 43000, 60000, 66000, 58000, 60000, 58000, 70000, 38000,
-      37000, 43000, 60000, 66000, 58000, 60000, 58000, 70000, 42000, 43000,
-      53000, 45000, 43000, 54000, 47000, 45000, 58000, 55000, 38000, 40000
-    ]];
-    charts.initBarChart(myChart1, "", "", [], "tuning");
-    charts.appendBarChartData(myChart1, ["before", "after"], ["test1"], [[0,5]]);
-    charts.updateTuningEvalData(myChart1, ["test1", "test2", "test3"], [[10], [1,7], [4]]);
-    charts.addOptions(myChart1, "grid", 0,{"top": "30"});
-    charts.addOptions(myChart1, "legend", 0,{"top": "0"});
+    this.myChart1 = echarts.init(document.getElementById("offline1"));
+    this.myChart2 = echarts.init(document.getElementById("offline2"));
+    this.myChart3 = echarts.init(document.getElementById("offline3"));
+    this.myChart4 = echarts.init(document.getElementById("offline4"));
+    // chart1
+    charts.initBarChart(this.myChart1, "", "", [], "tuning");
+    charts.appendBarChartData(
+      this.myChart1,
+      ["before", "after"],
+      this.yNames,
+      this.yValue1
+    );
+    charts.addOptions(this.myChart1, "grid", 0, { top: "30" });
+    charts.addOptions(this.myChart1, "legend", 0, { top: "0" });
 
-    charts.initLineChart(myChart2, "", "", ["test1", "test2"], "tuning");
-    charts.appendLineChartData(myChart2, xValue, ["test1", "test2"], yValue);
-    charts.addOptions(myChart2, "grid", 0,{"top": "30"});
-    charts.addOptions(myChart2, "legend", 0,{"top": "0"});
+    // chart2
+    charts.initLineChart(this.myChart2, "", "", [], "tuning");
+    charts.addOptions(this.myChart2, "grid", 0, { top: "30" });
+    charts.addOptions(this.myChart2, "legend", 0, { top: "0" });
+    charts.appendLineChartData(
+      this.myChart2,
+      this.xValue,
+      this.yNames,
+      this.yValue2
+    );
 
-    charts.initLineChart(myChart3, "", "", ["test1", "test2"], "tuning");
-    charts.appendLineChartData(myChart3, xValue, ["test1", "test2"], yValue);
-    charts.addOptions(myChart3, "grid", 0,{"top": "30"});
-    charts.addOptions(myChart3, "legend", 0,{"top": "0"});
+    // chart3
+    charts.initLineChart(this.myChart3, "", "", [], "tuning");
+    charts.addOptions(this.myChart3, "grid", 0, { top: "30" });
+    charts.addOptions(this.myChart3, "legend", 0, { top: "0" });
+    charts.appendLineChartData(
+      this.myChart3,
+      this.xValue,
+      this.yNames,
+      this.yValue3
+    );
 
-    charts.initLineChart(myChart4, "", "", ["test1", "test2"], "tuning");
-    charts.appendLineChartData(myChart4, xValue, ["test1", "test2"], yValue);
-    charts.addOptions(myChart4, "grid", 0,{"top": "30"});
-    charts.addOptions(myChart4, "legend", 0,{"top": "0"});
+    // chart4
+    charts.initLineChart(this.myChart4, "", "", [], "tuning");
+    charts.addOptions(this.myChart4, "grid", 0, { top: "30" });
+    charts.addOptions(this.myChart4, "legend", 0, { top: "0" });
+    charts.appendLineChartData(
+      this.myChart4,
+      this.xValue,
+      this.yNames,
+      this.yValue
+    );
+  },
+  watch: {
+    ind: function(newVal, oldVal) {
+      this.xValue.push(this.ind.toString());
+      if (this.ind == 20) {
+        this.end();
+      }
+    },
+    a: {
+      handler: function(newVal, oldVal) {
+        let newData = [];
+        if (this.a !== null) {
+          for (var i = 0; i < this.yNames.length; i++) {
+            newData[i] = [];
+            this.yValue[i].push(this.a[i]);
+            this.yValue2[i].push(
+              Math.max(
+                this.yValue2[i][this.yValue2[i].length - 1],
+                this.yValue[i][this.yValue[i].length - 1]
+              )
+            );
+            newData.push(this.yValue2[i][this.yValue2[i].length - 1]);
+            newData[i][0] = this.yValue2[i][this.yValue2[i].length - 1];
+            this.yValue1[i][1] = Math.max(
+              this.yValue1[i][1],
+              this.yValue[i][this.yValue[i].length - 1]
+            );
+          }
+          this.updateChart1Data();
+          this.updateChart2Data(newData);
+          this.updateChart4Data();
+        }
+      },
+      deep: true
+    },
+    b: {
+      handler: function(newVal, oldVal) {
+        if (this.b !== null) {
+          for (var i = 0; i < this.yNames.length; i++) {
+            this.yValue3[i].push(this.b[i]);
+          }
+          this.updateChart3Data();
+        }
+      },
+      deep: true
+    }
   },
+  beforeDestroy() {
+    clearInterval(this.timer);
+  }
 });
diff --git a/UI2.0/src/js/utils/utils.js b/UI2.0/src/js/utils/utils.js
index 62b015baf70eb06484052903a188dd9529b2065d..7aa92a94c5682277cf2cf9ae93a51c55c77a7ffc 100644
--- a/UI2.0/src/js/utils/utils.js
+++ b/UI2.0/src/js/utils/utils.js
@@ -2,4 +2,4 @@ export function getRandomInt(min, max) {
   min = Math.ceil(min);
   max = Math.floor(max);
   return Math.floor(Math.random() * (max - min) + min);
-}
+}
\ No newline at end of file