[init] spike ui

Merge remote-tracking branch 'origin/release/0812_test' into feature/spike_UI
Merge remote-tracking branch 'origin/release/0812_test' into release/0812_test
2021-08-26 02:03:30 +08:00 · 2021-08-20 16:08:37 +08:00 · 2021-08-20 15:49:07 +08:00 · 2021-08-20 15:48:18 +08:00 · 2021-08-19 10:40:27 +08:00 · 2021-08-19 10:40:12 +08:00
218 changed files with 30062 additions and 14047 deletions
@@ -3012,11 +3012,18 @@
      "dev": true
    },
    "axios": {
-      "version": "0.19.2",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz",
-      "integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz",
+      "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==",
      "requires": {
-        "follow-redirects": "1.5.10"
+        "follow-redirects": "^1.10.0"
+      },
+      "dependencies": {
+        "follow-redirects": {
+          "version": "1.13.3",
+          "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.3.tgz",
+          "integrity": "sha512-DUgl6+HDzB0iEptNQEXLx/KhTmDb8tZUHSeLqpnjpknR70H0nC2t9N73BK6fN4hOvJ84pKlIQVQ4k5FFlBedKA=="
+        }
      }
    },
    "babel-code-frame": {
@@ -3465,9 +3472,9 @@
      }
    },
    "bl": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/bl/-/bl-1.2.2.tgz",
-      "integrity": "sha512-e8tQYnZodmebYDWGH7KMRvtzKXaJHx3BbilrgZCfvyLUYdKpK1t5PSPmpkny/SgiTSCnjfLW7v5rlONXVFkQEA==",
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/bl/-/bl-1.2.3.tgz",
+      "integrity": "sha512-pvcNpa0UU69UT341rO6AYy4FVAIkUHuZXRIWbq+zHnsVcRzDDjIAhGuuYoi0d//cwIwtt4pkpKycWEfjdV+vww==",
      "requires": {
        "readable-stream": "^2.3.5",
        "safe-buffer": "^5.1.1"
@@ -5114,9 +5121,9 @@
      "dev": true
    },
    "copy-webpack-plugin": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-5.1.1.tgz",
-      "integrity": "sha512-P15M5ZC8dyCjQHWwd4Ia/dm0SgVvZJMYeykVIVYXbGyqO4dWB5oyPHp9i7wjwo5LhtlhKbiBCdS2NvM07Wlybg==",
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-5.1.2.tgz",
+      "integrity": "sha512-Uh7crJAco3AjBvgAy9Z75CjK8IG+gxaErro71THQ+vv/bl4HaQcpkexAY8KVW/T6D2W2IRr+couF/knIRkZMIQ==",
      "dev": true,
      "requires": {
        "cacache": "^12.0.3",
@@ -5129,7 +5136,7 @@
        "normalize-path": "^3.0.0",
        "p-limit": "^2.2.1",
        "schema-utils": "^1.0.0",
-        "serialize-javascript": "^2.1.2",
+        "serialize-javascript": "^4.0.0",
        "webpack-log": "^2.0.0"
      },
      "dependencies": {
@@ -5180,10 +5187,13 @@
          }
        },
        "serialize-javascript": {
-          "version": "2.1.2",
-          "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-2.1.2.tgz",
-          "integrity": "sha512-rs9OggEUF0V4jUSecXazOYsLfu7OGK2qIn3c7IPBiffz32XniEp/TX9Xmc9LQfK2nQ2QKHvZ2oygKUGU0lG4jQ==",
-          "dev": true
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-4.0.0.tgz",
+          "integrity": "sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==",
+          "dev": true,
+          "requires": {
+            "randombytes": "^2.1.0"
+          }
        },
        "slash": {
          "version": "1.0.0",
@@ -5643,6 +5653,7 @@
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
      "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+      "dev": true,
      "requires": {
        "ms": "2.0.0"
      }
@@ -6248,24 +6259,24 @@
      }
    },
    "elliptic": {
-      "version": "6.5.3",
-      "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.3.tgz",
-      "integrity": "sha512-IMqzv5wNQf+E6aHeIqATs0tOLeOTwj1QKbRcS3jBbYkl5oLAserA8yJTT7/VyHUYG91PRmPyeQDObKLPpeS4dw==",
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.4.tgz",
+      "integrity": "sha512-iLhC6ULemrljPZb+QutR5TQGB+pdW6KGD5RSegS+8sorOZT+rdQFbsQFJgvN3eRqNALqJer4oQ16YvJHlU8hzQ==",
      "dev": true,
      "requires": {
-        "bn.js": "^4.4.0",
-        "brorand": "^1.0.1",
+        "bn.js": "^4.11.9",
+        "brorand": "^1.1.0",
        "hash.js": "^1.0.0",
-        "hmac-drbg": "^1.0.0",
-        "inherits": "^2.0.1",
-        "minimalistic-assert": "^1.0.0",
-        "minimalistic-crypto-utils": "^1.0.0"
+        "hmac-drbg": "^1.0.1",
+        "inherits": "^2.0.4",
+        "minimalistic-assert": "^1.0.1",
+        "minimalistic-crypto-utils": "^1.0.1"
      },
      "dependencies": {
        "bn.js": {
-          "version": "4.11.9",
-          "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.11.9.tgz",
-          "integrity": "sha512-E6QoYqCKZfgatHTdHzs1RRKP7ip4vvm+EyRUeE2RF0NblwVvb0p6jSVeNTOFxPn26QXN2o6SMfNxKp6kU8zQaw==",
+          "version": "4.12.0",
+          "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz",
+          "integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==",
          "dev": true
        }
      }
@@ -7482,15 +7493,6 @@
        "reusify": "^1.0.4"
      }
    },
-    "faye-websocket": {
-      "version": "0.10.0",
-      "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.10.0.tgz",
-      "integrity": "sha1-TkkvjQTftviQA1B/btvy1QHnxvQ=",
-      "dev": true,
-      "requires": {
-        "websocket-driver": ">=0.5.1"
-      }
-    },
    "fb-watchman": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/fb-watchman/-/fb-watchman-2.0.1.tgz",
@@ -7691,6 +7693,7 @@
      "version": "1.5.10",
      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
      "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
+      "dev": true,
      "requires": {
        "debug": "=3.1.0"
      }
@@ -8478,6 +8481,12 @@
        }
      }
    },
+    "http-parser-js": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.3.tgz",
+      "integrity": "sha512-t7hjvef/5HEK7RWTdUzVUhl8zkEu+LlaE0IYzdMuvbSDipxBRpOn4Uhw8ZyECEa808iVT8XCjzo6xmYt4CiLZg==",
+      "dev": true
+    },
    "http-proxy": {
      "version": "1.18.1",
      "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz",
@@ -8660,9 +8669,9 @@
      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
    },
    "ini": {
-      "version": "1.3.5",
-      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz",
-      "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==",
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
      "dev": true
    },
    "inquirer": {
@@ -10926,9 +10935,9 @@
      }
    },
    "lodash": {
-      "version": "4.17.15",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
-      "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
    },
    "lodash._reinterpolate": {
      "version": "3.0.0",
@@ -11635,6 +11644,14 @@
      "resolved": "https://registry.npmjs.org/moment/-/moment-2.27.0.tgz",
      "integrity": "sha512-al0MUK7cpIcglMv3YF13qSgdAIqxHTO7brRtaz3DlSULbqfazqkc5kEjNrLDOM7fsjshoFIihnU8snrP7zUvhQ=="
    },
+    "moment-range": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/moment-range/-/moment-range-4.0.2.tgz",
+      "integrity": "sha512-n8sceWwSTjmz++nFHzeNEUsYtDqjgXgcOBzsHi+BoXQU2FW+eU92LUaK8gqOiSu5PG57Q9sYj1Fz4LRDj4FtKA==",
+      "requires": {
+        "es6-symbol": "^3.1.0"
+      }
+    },
    "move-concurrently": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
@@ -11806,12 +11823,6 @@
        }
      }
    },
-    "node-forge": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.9.0.tgz",
-      "integrity": "sha512-7ASaDa3pD+lJ3WvXFsxekJQelBKRpne+GOVbLbtHYdd7pFspyeuJHnWfLplGf3SwKGbfs/aYl5V/JCIaHVUKKQ==",
-      "dev": true
-    },
    "node-gyp": {
      "version": "3.8.0",
      "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-3.8.0.tgz",
@@ -14434,15 +14445,6 @@
      "integrity": "sha1-Yl2GWPhlr0Psliv8N2o3NZpJlMo=",
      "dev": true
    },
-    "selfsigned": {
-      "version": "1.10.7",
-      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.7.tgz",
-      "integrity": "sha512-8M3wBCzeWIJnQfl43IKwOmC4H/RAp50S8DF60znzjW5GVqTcSe2vWclt7hmYVPkKPlHWOu5EaWOMZ2Y6W8ZXTA==",
-      "dev": true,
-      "requires": {
-        "node-forge": "0.9.0"
-      }
-    },
    "semver": {
      "version": "5.7.1",
      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
@@ -14846,57 +14848,6 @@
        }
      }
    },
-    "sockjs": {
-      "version": "0.3.20",
-      "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.20.tgz",
-      "integrity": "sha512-SpmVOVpdq0DJc0qArhF3E5xsxvaiqGNb73XfgBpK1y3UD5gs8DSo8aCTsuT5pX8rssdc2NDIzANwP9eCAiSdTA==",
-      "dev": true,
-      "requires": {
-        "faye-websocket": "^0.10.0",
-        "uuid": "^3.4.0",
-        "websocket-driver": "0.6.5"
-      }
-    },
-    "sockjs-client": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/sockjs-client/-/sockjs-client-1.4.0.tgz",
-      "integrity": "sha512-5zaLyO8/nri5cua0VtOrFXBPK1jbL4+1cebT/mmKA1E1ZXOvJrII75bPu0l0k843G/+iAbhEqzyKr0w/eCCj7g==",
-      "dev": true,
-      "requires": {
-        "debug": "^3.2.5",
-        "eventsource": "^1.0.7",
-        "faye-websocket": "~0.11.1",
-        "inherits": "^2.0.3",
-        "json3": "^3.3.2",
-        "url-parse": "^1.4.3"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "3.2.6",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
-          "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
-          "dev": true,
-          "requires": {
-            "ms": "^2.1.1"
-          }
-        },
-        "faye-websocket": {
-          "version": "0.11.3",
-          "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.3.tgz",
-          "integrity": "sha512-D2y4bovYpzziGgbHYtGCMjlJM36vAl/y+xUyn1C+FVx8szd1E+86KwVw6XvYSzOP8iMpm1X0I4xJD+QtUb36OA==",
-          "dev": true,
-          "requires": {
-            "websocket-driver": ">=0.5.1"
-          }
-        },
-        "ms": {
-          "version": "2.1.2",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-          "dev": true
-        }
-      }
-    },
    "sort-keys": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/sort-keys/-/sort-keys-1.1.2.tgz",
@@ -14906,6 +14857,11 @@
        "is-plain-obj": "^1.0.0"
      }
    },
+    "sortablejs": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.10.2.tgz",
+      "integrity": "sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A=="
+    },
    "source-list-map": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
@@ -15218,6 +15174,11 @@
      "resolved": "https://registry.npmjs.org/stream-shift/-/stream-shift-1.0.1.tgz",
      "integrity": "sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ=="
    },
+    "streamsaver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/streamsaver/-/streamsaver-2.0.5.tgz",
+      "integrity": "sha512-KIWtBvi8A6FiFZGNSyuIZRZM6C8AvnWTiCx/TYa7so420vC5sQwcBKkdqInuGWoWMfeWy/P+/cRqMtWVf4RW9w=="
+    },
    "strict-uri-encode": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
@@ -16933,6 +16894,11 @@
      "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
      "dev": true
    },
+    "v-click-outside": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/v-click-outside/-/v-click-outside-2.1.5.tgz",
+      "integrity": "sha512-VPNCOTZK6WZy73lcWc+R7IW1uaBFEO3/Csrs5CzWVOdvE30V8Y1+BE/BtTlcEmeDGx0eqdE7bSCg55Jj37PMJg=="
+    },
    "v-tooltip": {
      "version": "2.0.3",
      "resolved": "https://registry.npmjs.org/v-tooltip/-/v-tooltip-2.0.3.tgz",
@@ -17083,6 +17049,17 @@
        "tinycolor2": "^1.1.2"
      }
    },
+    "vue-ctk-date-time-picker": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/vue-ctk-date-time-picker/-/vue-ctk-date-time-picker-2.5.0.tgz",
+      "integrity": "sha512-s4AO+5xnPlX+LD5UPQcjLBnv8MwcEJKlKUnkTLQeXRV0xqpH9pWRe6aJ8N2+506mEN6b7iwhlFox6uKKdtK+gw==",
+      "requires": {
+        "moment": "^2.24.0",
+        "moment-range": "^4.0.1",
+        "v-click-outside": "^2.0.2",
+        "vue": "^2.6.9"
+      }
+    },
    "vue-echarts": {
      "version": "5.0.0-beta.0",
      "resolved": "https://registry.npmjs.org/vue-echarts/-/vue-echarts-5.0.0-beta.0.tgz",
@@ -17229,6 +17206,11 @@
      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.3.4.tgz",
      "integrity": "sha512-SdKRBeoXUjaZ9R/8AyxsdTqkOfMcI5tWxPZOUX5Ie1BTL5rPSZ0O++pbiZCeYeythiZIdLEfkDiQPKIaWk5hDg=="
    },
+    "vue-slicksort": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/vue-slicksort/-/vue-slicksort-1.2.0.tgz",
+      "integrity": "sha512-k1324l+AnYy6MrpySN7PYL165z2EkvZmMe+BS7H/EugzS8IrZYRtoqa3QxSSWB34C7cplV1hj3c+7peKpxpYxg=="
+    },
    "vue-style-loader": {
      "version": "4.1.2",
      "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz",
@@ -17281,6 +17263,14 @@
      "resolved": "https://registry.npmjs.org/vue-yandex-maps/-/vue-yandex-maps-0.9.0.tgz",
      "integrity": "sha512-6gXec68eXNHvo5d6m43lGCDMShYRpciWWy55VA1RiFtMkLHIDeK4CJzYmkfAec32vpzYEqdcNBJh9b93wqtp8w=="
    },
+    "vuedraggable": {
+      "version": "2.24.3",
+      "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-2.24.3.tgz",
+      "integrity": "sha512-6/HDXi92GzB+Hcs9fC6PAAozK1RLt1ewPTLjK0anTYguXLAeySDmcnqE8IC0xa7shvSzRjQXq3/+dsZ7ETGF3g==",
+      "requires": {
+        "sortablejs": "1.10.2"
+      }
+    },
    "vuestic-ui": {
      "version": "0.2.2",
      "resolved": "https://registry.npmjs.org/vuestic-ui/-/vuestic-ui-0.2.2.tgz",
@@ -17369,6 +17359,11 @@
      "resolved": "https://registry.npmjs.org/vuex-i18n/-/vuex-i18n-1.13.1.tgz",
      "integrity": "sha512-VTy5QAyMI6BJwpRfN5qncWQT0ohKiAYK+iTRW4JxgV9dkNoPMuKKDqExbOm1fzpitdrIoIipC3Zqr5fJ706VQg=="
    },
+    "vuex-map-fields": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/vuex-map-fields/-/vuex-map-fields-1.4.1.tgz",
+      "integrity": "sha512-jvIcpvoIPqwvJCOfRkPU9Rj0EbjWuk7GlNC5LXU9mCXVGZph6bWGHZssnoUzpLMxJtXQEHoVyZkKf7YQV+/bnQ=="
+    },
    "vuex-router-sync": {
      "version": "5.0.0",
      "resolved": "https://registry.npmjs.org/vuex-router-sync/-/vuex-router-sync-5.0.0.tgz",
@@ -17665,9 +17660,9 @@
      }
    },
    "webpack-dev-server": {
-      "version": "3.11.0",
-      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-3.11.0.tgz",
-      "integrity": "sha512-PUxZ+oSTxogFQgkTtFndEtJIPNmml7ExwufBZ9L2/Xyyd5PnOL5UreWe5ZT7IU25DSdykL9p1MLQzmLh2ljSeg==",
+      "version": "3.11.2",
+      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-3.11.2.tgz",
+      "integrity": "sha512-A80BkuHRQfCiNtGBS1EMf2ChTUs0x+B3wGDFmOeT4rmJOHhHTCH2naNxIHhmkr0/UillP4U3yeIyv1pNp+QDLQ==",
      "dev": true,
      "requires": {
        "ansi-html": "0.0.7",
@@ -17690,11 +17685,11 @@
        "p-retry": "^3.0.1",
        "portfinder": "^1.0.26",
        "schema-utils": "^1.0.0",
-        "selfsigned": "^1.10.7",
+        "selfsigned": "^1.10.8",
        "semver": "^6.3.0",
        "serve-index": "^1.9.1",
-        "sockjs": "0.3.20",
-        "sockjs-client": "1.4.0",
+        "sockjs": "^0.3.21",
+        "sockjs-client": "^1.5.0",
        "spdy": "^4.0.2",
        "strip-ansi": "^3.0.1",
        "supports-color": "^6.1.0",
@@ -17759,12 +17754,21 @@
          }
        },
        "debug": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
-          "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
+          "version": "4.3.1",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
+          "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
          "dev": true,
          "requires": {
-            "ms": "^2.1.1"
+            "ms": "2.1.2"
+          }
+        },
+        "faye-websocket": {
+          "version": "0.11.3",
+          "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.3.tgz",
+          "integrity": "sha512-D2y4bovYpzziGgbHYtGCMjlJM36vAl/y+xUyn1C+FVx8szd1E+86KwVw6XvYSzOP8iMpm1X0I4xJD+QtUb36OA==",
+          "dev": true,
+          "requires": {
+            "websocket-driver": ">=0.5.1"
          }
        },
        "fsevents": {
@@ -17808,6 +17812,12 @@
          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
          "dev": true
        },
+        "node-forge": {
+          "version": "0.10.0",
+          "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.10.0.tgz",
+          "integrity": "sha512-PPmu8eEeG9saEUvI97fm4OYxXVB6bFvyNTyiUOBichBpFG8A1Ljw3bY62+5oOjDEMHRnd0Y7HQ+x7uzxOzC6JA==",
+          "dev": true
+        },
        "readdirp": {
          "version": "2.2.1",
          "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-2.2.1.tgz",
@@ -17830,12 +17840,57 @@
            "ajv-keywords": "^3.1.0"
          }
        },
+        "selfsigned": {
+          "version": "1.10.8",
+          "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.8.tgz",
+          "integrity": "sha512-2P4PtieJeEwVgTU9QEcwIRDQ/mXJLX8/+I3ur+Pg16nS8oNbrGxEso9NyYWy8NAmXiNl4dlAp5MwoNeCWzON4w==",
+          "dev": true,
+          "requires": {
+            "node-forge": "^0.10.0"
+          }
+        },
        "semver": {
          "version": "6.3.0",
          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
          "dev": true
        },
+        "sockjs": {
+          "version": "0.3.21",
+          "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.21.tgz",
+          "integrity": "sha512-DhbPFGpxjc6Z3I+uX07Id5ZO2XwYsWOrYjaSeieES78cq+JaJvVe5q/m1uvjIQhXinhIeCFRH6JgXe+mvVMyXw==",
+          "dev": true,
+          "requires": {
+            "faye-websocket": "^0.11.3",
+            "uuid": "^3.4.0",
+            "websocket-driver": "^0.7.4"
+          }
+        },
+        "sockjs-client": {
+          "version": "1.5.1",
+          "resolved": "https://registry.npmjs.org/sockjs-client/-/sockjs-client-1.5.1.tgz",
+          "integrity": "sha512-VnVAb663fosipI/m6pqRXakEOw7nvd7TUgdr3PlR/8V2I95QIdwT8L4nMxhyU8SmDBHYXU1TOElaKOmKLfYzeQ==",
+          "dev": true,
+          "requires": {
+            "debug": "^3.2.6",
+            "eventsource": "^1.0.7",
+            "faye-websocket": "^0.11.3",
+            "inherits": "^2.0.4",
+            "json3": "^3.3.3",
+            "url-parse": "^1.5.1"
+          },
+          "dependencies": {
+            "debug": {
+              "version": "3.2.7",
+              "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+              "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+              "dev": true,
+              "requires": {
+                "ms": "^2.1.1"
+              }
+            }
+          }
+        },
        "strip-ansi": {
          "version": "3.0.1",
          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
@@ -17854,6 +17909,27 @@
            "has-flag": "^3.0.0"
          }
        },
+        "url-parse": {
+          "version": "1.5.1",
+          "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.1.tgz",
+          "integrity": "sha512-HOfCOUJt7iSYzEx/UqgtwKRMC6EU91NFhsCHMv9oM03VJcVo2Qrp8T8kI9D7amFf1cu+/3CEhgb3rF9zL7k85Q==",
+          "dev": true,
+          "requires": {
+            "querystringify": "^2.1.1",
+            "requires-port": "^1.0.0"
+          }
+        },
+        "websocket-driver": {
+          "version": "0.7.4",
+          "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.4.tgz",
+          "integrity": "sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==",
+          "dev": true,
+          "requires": {
+            "http-parser-js": ">=0.5.1",
+            "safe-buffer": ">=5.1.0",
+            "websocket-extensions": ">=0.1.1"
+          }
+        },
        "ws": {
          "version": "6.2.1",
          "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.1.tgz",
@@ -17902,15 +17978,6 @@
        }
      }
    },
-    "websocket-driver": {
-      "version": "0.6.5",
-      "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.6.5.tgz",
-      "integrity": "sha1-XLJVbOuF9Dc8bYI4qmkchFThOjY=",
-      "dev": true,
-      "requires": {
-        "websocket-extensions": ">=0.1.1"
-      }
-    },
    "websocket-extensions": {
      "version": "0.1.4",
      "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.4.tgz",
@@ -18297,9 +18364,9 @@
      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ=="
    },
    "y18n": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.0.tgz",
-      "integrity": "sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w==",
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
+      "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==",
      "dev": true
    },
    "yallist": {
@@ -18,7 +18,7 @@
    "ammap3": "^3.21.14",
    "approximate-number": "^2.0.0",
    "asva-executors": "^0.1.22",
-    "axios": "^0.19.0",
+    "axios": "^0.21.1",
    "babel-polyfill": "^6.26.0",
    "chart.js": "^2.9.3",
    "core-js": "3",
@@ -32,12 +32,13 @@
    "google-maps": "^3.3.0",
    "ionicons": "^4.6.3",
    "leaflet-map": "^0.2.1",
-    "lodash": "4.17.15",
+    "lodash": "^4.17.21",
    "medium-editor": "^5.23.3",
    "normalize.css": "^8.0.1",
    "popper.js": "^1.16.0",
    "regenerator-runtime": "^0.13.3",
    "register-service-worker": "^1.6.2",
+    "streamsaver": "^2.0.5",
    "v-tooltip": "^2.0.2",
    "vee-validate": "^2.2.13",
    "vue": "^2.6.10",
@@ -46,17 +47,21 @@
    "vue-chartjs": "^3.4.0",
    "vue-clipboard2": "^0.3.1",
    "vue-color": "^2.7.0",
+    "vue-ctk-date-time-picker": "^2.5.0",
    "vue-echarts": "^5.0.0-beta.0",
    "vue-epic-bus": "^0.1.2",
    "vue-gtm": "^2.2.0",
    "vue-mqtt": "^2.0.3",
    "vue-router": "^3.1.3",
+    "vue-slicksort": "^1.2.0",
    "vue-worker": "^1.2.1",
    "vue-yandex-maps": "^0.9.0",
+    "vuedraggable": "^2.24.3",
    "vuestic-ui": "~0.2.2",
    "vuetable-2": "^1.7.5",
    "vuex": "^3.1.2",
    "vuex-i18n": "^1.13.1",
+    "vuex-map-fields": "^1.4.1",
    "vuex-router-sync": "^5.0.0"
  },
  "devDependencies": {
@@ -8,7 +8,7 @@
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">

-    <title>Vuestic Admin</title>
+    <title>BioPro Scientific</title>
  </head>
  <body>
    <div id="app"></div>
@@ -0,0 +1,14 @@
+* This is shell_script dir
+
+# 檔案說明
+burn_to_raspberry.sh : 用scp複製local npm build好的東西 & burn_to_raspberry_util.sh 去遠端（raspberry），然後在raspberry內execute 複製過去的burn_to_raspberry_util.sh 
+
+burn_to_raspberry_util.sh : 給burn_to_raspberry.sh用的，裡面的指令為在raspberry內所有要執行的指令
+
+# Usage
+burn_to_raspberry.sh
+```shell
+sh ./burn_to_raspberry.sh <HOST> <PASSWORD> 
+
+e.g. sh ./burn_to_raspberry.sh pi@192.168.3.53 raspberry
+```
@@ -0,0 +1,15 @@
+#!/bin/bash
+
+# sshpass: https://shazi.info/ssh-%E7%94%A8-sshpass-%E5%8F%96%E4%BB%A3-expect-%E8%87%AA%E5%8B%95%E8%BC%B8%E5%85%A5%E5%AF%86%E7%A2%BC/
+
+HOST=$1  # e.g. "pi@192.168.3.53"
+PASSWORD=$2  # e.g. raspberry
+SCP_HOST=$HOST":"
+
+cd ..
+npm run build
+sshpass -p $PASSWORD ssh $HOST "rm -rf dist"  
+sshpass -p $PASSWORD scp -r dist $SCP_HOST
+sshpass -p $PASSWORD scp shell_script/burn_to_raspberry_util.sh $SCP_HOST
+sshpass -p $PASSWORD ssh $HOST "sh ./burn_to_raspberry_util.sh"  
+# sshpass -p raspberry scp -r dist pi@192.168.3.53:
@@ -0,0 +1,7 @@
+#!/bin/bash
+
+#run in raspberry
+
+cd 
+sudo rm -rf /var/www/bioprovuebuild/*
+sudo cp -r dist/* /var/www/bioprovuebuild/
@@ -1,6 +1,9 @@
 <template>
  <div id="app" class="app">
-    <router-view />
+    <keep-alive>
+      <router-view v-if="$route.meta.keepAlive"></router-view>
+    </keep-alive>
+    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
 </template>

@@ -18,6 +18,9 @@ import 'echarts/lib/chart/line'
 import 'echarts/lib/component/dataZoom'
 import 'echarts/lib/component/tooltip'
 import 'echarts/lib/component/legend'
+import 'echarts/lib/component/legend/ScrollableLegendModel.js'
+import 'echarts/lib/component/legend/ScrollableLegendView.js'
+import 'echarts/lib/component/legend/scrollableLegendAction.js'
 import 'echarts/lib/component/axisPointer'
 import 'echarts/lib/component/grid'
 import 'echarts/lib/component/markArea'
@@ -49,8 +52,10 @@ Vue.component('chart', ECharts)
 Vue.use(VueWorker)
 Vue.use(VueAxios, axios)

-Vue.use(VueMqtt, 'ws://52.194.17.114:8083')
+// Vue.use(VueMqtt, 'ws://52.194.17.114:8083')
 // Vue.use(VueMqtt, 'ws://' + location.href.split('/')[2] + ':8083')
+// Vue.use(VueMqtt, 'ws://' + '192.168.151.125' + ':8083')
+Vue.use(VueMqtt, 'ws://' + '192.168.151.125' + ':8083')

 Vue.prototype.GLOBAL = global_

@@ -60,7 +60,7 @@ export default {
  data () {
    return {
      isTopBar: false,
-      minimized: false,
+      minimized: true,
      mobileWidth: 767,
    }
  },
@@ -87,7 +87,7 @@ export default {
    },
  },
  mounted () {
-
+    this.minimized = true
  },
 }
 </script>
@@ -134,3 +134,9 @@ export default {
  }
 }
 </style>
+
+<style lang='scss'>
+  // .layout.gutter--xl {
+  //   padding: 0.5rem;
+  // }
+</style>
@@ -29,7 +29,7 @@ export default {
    },
    updateSidebarState () {
      if (this.checkIsDesktop()) {
-        this.$emit('update:minimized', false)
+        this.$emit('update:minimized', true)
      } else {
        this.$emit('update:minimized', true)
      }
@@ -25,7 +25,7 @@
        >
          <!-- *** icon -->
          <!-- <va-icon-vuestic /> -->
-          <img v-bind:src="'https://www.bioproweb.com/wp-content/uploads/2020/01/BPS-LOGO_60.png'">
+          <img src='@/assets/img/bps_logo.png'>
        </router-link>
      </div>
      <!-- <img style="height: 40px;" v-bind:src="'https://www.bioproweb.com/wp-content/uploads/2020/01/BPS-LOGO_60.png'"> -->
@@ -96,7 +96,7 @@ export default {
      theme: 'info',
      items: navigationRoutes.routes,
      hoverState: false,
-      minimized: false,
+      minimized: true,
    }
  },
 }
@@ -47,6 +47,13 @@ export const navigationRoutes = {
        iconClass: 'vuestic-iconset vuestic-iconset-files',
      },
    },
+    {
+      name: 'settings',
+      displayName: 'Settings',
+      meta: {
+        iconClass: 'vuestic-iconset vuestic-iconset-settings',
+      },
+    },
    // {
    //   name: 'forms',
    //   displayName: 'menu.forms',
@@ -1,412 +0,0 @@
-<template>
-  <div class="devices-overview">
-
-    <div >
-      <replay-chart-detail class="mb-2" :key="overviewChartKey" :cardheight="'5vh'" :data="chartOverviewData"/>
-      <replay-chart-detail @dblclick.native="distribute()"  :cardheight="'72vh'" :data="chartDetailData" @dataZoomEvent="dataZoomEvent($event)"/>
-      <!-- <va-button class="mt-2" color="primary" target="_blank" @click="distribute()" small>
-        DISTRIBUTE
-      </va-button> -->
-    </div>
-  </div>
-
-</template>
-
-<script>
-import ReplayChartDetail from './ReplayChartDetail.vue'
-import api from '../../../data/api/index'
-import { chartData } from '../../../data/analysis/replay/ChartsManagement'
-import { download } from '../../../data/download/Download'
-
-export default {
-  name: 'data-replay',
-  components: {
-    ReplayChartDetail,
-  },
-  props: {
-  },
-  created () {
-  },
-  data () {
-    return {
-      metaIDList: this.$route.params.metaList.split('-'),
-      metaList: null,
-      dataInfo: {},
-      // dataInfo format:
-      // {
-      //   scale: [
-      //     {
-      //       id: _id,
-      //       start_time: _start_time,
-      //       end_time: _end_time,
-      //     }
-      //   ]
-      // }
-      overviewChartKey: 0,
-      chartOverviewData: chartData.init(0, 1),
-      chartDetailData: chartData.init(1, 1),
-      maxTime: 0,
-      startTimeCurrent: 0,
-      endTimeCurrent: 0,
-      startTime: 0,
-      endTime: 0,
-      zoomTime: 0,
-      maxScaleDefault: '1000',
-    }
-  },
-  mqtt: {
-  },
-  methods: {
-    getMetaInfo: async function () {
-      const promises = this.metaIDList.map(async id => {
-        const metaRes = await api.getMetaFilesByID(id)
-        return metaRes.data[0]
-      })
-      this.metaList = await Promise.all(promises)
-    },
-    getDataInfo: async function () {
-      this.metaList.forEach(meta => {
-        this.dataInfo[meta.id] = {}
-        JSON.parse(meta.channels).forEach(ch => {
-          this.dataInfo[meta.id][ch] = {
-            1: [],
-            10: [],
-            100: [],
-            1000: [],
-          }
-        })
-      })
-      const getRawInfo = this.metaList.map(async meta => {
-        const getData = JSON.parse(meta.channels).map(async ch => {
-          const res = await api.getRawFilesAttrByParent(ch, meta.id, 'id-start_time-end_time')
-          res.data.forEach(_data => {
-            _data.load = false
-            _data.data = []
-            if (_data.end_time < 0) {
-              _data.end_time = meta.time_duration
-            }
-            this.dataInfo[meta.id][ch][1].push(_data)
-          })
-          return res.data
-        })
-        return await Promise.all(getData)
-      })
-      await Promise.all(getRawInfo)
-
-      const getMiniInfo = this.metaList.map(async meta => {
-        const getData = JSON.parse(meta.channels).map(async ch => {
-          const res = await api.getMiniFilesAttrByParent(ch, meta.id, 'id-start_time-end_time-scale')
-          res.data.forEach(_data => {
-            _data.load = false
-            _data.data = []
-            if (_data.end_time < 0) {
-              _data.end_time = meta.time_duration
-            }
-            this.dataInfo[meta.id][ch][parseInt(_data.scale)].push(_data)
-          })
-          return res.data
-        })
-        return await Promise.all(getData)
-      })
-      await Promise.all(getMiniInfo)
-    },
-    getData: async function (scale, id, channel) {
-      if (scale === 1) {
-        return await download.rawByIDChannels(id, channel)
-      } else {
-        return await download.miniMeanByIDChannel(id, channel)
-      }
-    },
-    register: async function () {
-      let chNumber = 0
-      this.metaList.forEach(meta => {
-        chNumber += JSON.parse(meta.channels).length
-      })
-      chartData.updateGridList(this.chartDetailData.chartID, chNumber)
-      let _chNumber = 0
-      const register = this.metaList.map(meta => {
-        // if (meta.device.library_name.indexOf('Neulive') >= 0) {
-        this.metaList.map(meta => {
-          JSON.parse(meta.channels).map(ch => {
-            chartData.register(this.chartDetailData.chartID, _chNumber, 'Time', 0, 0, 'Neulive', meta.name, ch, null)
-            chartData.register(this.chartOverviewData.chartID, 0, 'Time', 0, 0, 'Neulive', meta.name, ch, null)
-            _chNumber++
-          })
-        })
-        if (this.maxTime < meta.time_duration) {
-          this.maxTime = meta.time_duration
-          this.endTime = this.endTimeCurrent = this.maxTime
-        }
-        // }
-      })
-      await Promise.all(register)
-      this.chartDetailData.series.forEach((series, index) => {
-        this.chartDetailData.xAxis[series.xAxisIndex].min = 0
-        this.chartDetailData.xAxis[series.xAxisIndex].max = this.maxTime
-      })
-      this.chartOverviewData.series.forEach((series, index) => {
-        this.chartOverviewData.xAxis[series.xAxisIndex].min = 0
-        this.chartOverviewData.xAxis[series.xAxisIndex].max = this.maxTime
-      })
-      this.chartDetailData.xAxis[this.chartDetailData.xAxis.length - 1].axisLabel.show = true
-      this.chartOverviewData.dataZoom = null
-    },
-    dataZoomEvent: function (e) {
-      // console.log(e)
-      if (e.batch != null) {
-        // console.log(e.batch)
-        e.batch.forEach(dataZoom => {
-          const id = parseInt(dataZoom.dataZoomId.substr(dataZoom.dataZoomId.length - 3, dataZoom.dataZoomId.length - 1))
-          if (id === 1) {
-            this.startTime = this.maxTime * dataZoom.start / 100
-            this.endTime = this.maxTime * dataZoom.end / 100
-            // console.log(this.startTime, this.endTime)
-          }
-        })
-      } else {
-        const id = parseInt(e.dataZoomId.substr(e.dataZoomId.length - 3, e.dataZoomId.length - 1))
-        if (id === 0) {
-          this.startTime = this.maxTime * e.start / 100
-          this.endTime = this.maxTime * e.end / 100
-          // console.log(this.startTime, this.endTime)
-        }
-      }
-      this.chartOverviewData.series.forEach(series => {
-        if (series.markArea != null) {
-          series.markArea.data[0][0].xAxis = parseInt(this.startTime)
-          series.markArea.data[0][1].xAxis = parseInt(this.endTime)
-        } else {
-          const _markArea = {
-            // silent: true,
-            itemStyle: {
-              color: '#ccc',
-              opacity: 0.1,
-            },
-            data: [
-              [{
-                xAxis: parseInt(this.startTime),
-              }, {
-                xAxis: parseInt(this.endTime),
-              }],
-            ],
-          }
-          series.markArea = _markArea
-        }
-      })
-      this.overviewChartKey++
-      this.zoomTime = 0
-    },
-    downloadDataAll: async function () {
-      for (const meta in this.dataInfo) {
-        for (const ch in this.dataInfo[meta]) {
-          const scaleList = this.dataInfo[meta][ch]
-          for (const scale in scaleList) {
-            const dataList = this.dataInfo[meta][ch][scale]
-            for (let i = 0; i < dataList.length; i++) {
-              const data = await this.getData(parseInt(scale), dataList[i].id, ch)
-              dataList[i].data = data
-              dataList[i].load = true
-            }
-          }
-        }
-      }
-    },
-    drawData: async function () {
-      const timeZone = this.endTimeCurrent - this.startTimeCurrent
-      let maxScale = '-1'
-      for (const meta in this.dataInfo) {
-        for (const ch in this.dataInfo[meta]) {
-          const scaleList = this.dataInfo[meta][ch]
-          let getMetaScale = false
-          for (const scale in scaleList) {
-            const dataList = this.dataInfo[meta][ch][scale]
-            for (let i = 0; i < dataList.length; i++) {
-              const _timeZone = dataList[i].end_time - dataList[i].start_time
-              if (timeZone <= _timeZone) {
-                this.metaList.forEach(_meta => {
-                  if (parseInt(_meta.id) === parseInt(meta)) {
-                    _meta.scaleCurrent = scale
-                    if (parseInt(scale) > parseInt(maxScale)) {
-                      maxScale = scale
-                    }
-                  }
-                })
-                getMetaScale = true
-              }
-            }
-            if (getMetaScale) {
-              break
-            }
-          }
-        }
-      }
-      if (parseInt(maxScale) < 0) {
-        maxScale = this.maxScaleDefault
-      }
-      this.metaList.forEach(_meta => {
-        if (_meta.scaleCurrent == null) {
-          _meta.scaleCurrent = maxScale
-        }
-      })
-      // console.log(this.metaList)
-
-      for (const meta in this.dataInfo) {
-        let scale
-        let metaName
-        this.metaList.forEach(_meta => {
-          if (parseInt(_meta.id) === parseInt(meta)) {
-            metaName = _meta.name
-            scale = _meta.scaleCurrent
-          }
-        })
-        for (const ch in this.dataInfo[meta]) {
-          const dataList = this.dataInfo[meta][ch][scale]
-          for (let i = 0; i < dataList.length; i++) {
-            if ((this.startTimeCurrent >= dataList[i].start_time && this.startTimeCurrent <= dataList[i].end_time) || (this.endTimeCurrent >= dataList[i].start_time && this.endTimeCurrent <= dataList[i].end_time)) {
-              if (dataList[i].data.length === 0) {
-                dataList[i].data = await this.getData(parseInt(scale), dataList[i].id, ch)
-                dataList[i].load = true
-              }
-              const data = dataList[i].data
-
-              this.chartOverviewData.series.forEach(series => {
-                if (series.data.length === 0) {
-                  if (series.yAxisSource[0] === metaName && series.yAxisSource[1] === parseInt(ch)) {
-                    let deStartIndex = 0
-                    let deEndIndex = 0
-                    series.data.forEach((_data, index) => {
-                      if (_data[0] >= data[0][0] && deStartIndex === 0) {
-                        deStartIndex = index
-                      } else if (_data[0] > data[data.length - 1][0] && deEndIndex === 0) {
-                        deEndIndex = index
-                      }
-                    })
-                    if (deEndIndex === 0) {
-                      deEndIndex = series.data.length
-                    }
-                    series.data.splice(deStartIndex, deEndIndex - deStartIndex, ...data)
-                    series.data.sort(function (a, b) {
-                      return a[0] - b[0]
-                    })
-                  }
-                  const _markArea = {
-                    // silent: true,
-                    itemStyle: {
-                      color: '#ccc',
-                      opacity: 0.1,
-                    },
-                    data: [
-                      [{
-                        xAxis: parseInt(this.startTime),
-                      }, {
-                        xAxis: parseInt(this.endTime),
-                      }],
-                    ],
-                  }
-                  series.markArea = _markArea
-                  // console.log(series.data)
-                }
-              })
-              // console.log(this.chartOverviewData)
-              this.chartDetailData.series.forEach(series => {
-                if (series.yAxisSource[0] === metaName && series.yAxisSource[1] === parseInt(ch)) {
-                  let deStartIndex = 0
-                  let deEndIndex = 0
-                  series.data.forEach((_data, index) => {
-                    if (_data[0] >= data[0][0] && deStartIndex === 0) {
-                      deStartIndex = index
-                    } else if (_data[0] > data[data.length - 1][0] && deEndIndex === 0) {
-                      deEndIndex = index
-                    }
-                  })
-                  if (deEndIndex === 0) {
-                    deEndIndex = series.data.length
-                  }
-                  series.data.splice(deStartIndex, deEndIndex - deStartIndex, ...data)
-                  series.data.sort(function (a, b) {
-                    return a[0] - b[0]
-                  })
-                  // console.log(series.data)
-                }
-              })
-            }
-          }
-        }
-      }
-    },
-    checkDataZoom: function () {
-      this.zoomTime++
-      if (this.zoomTime >= 2) {
-        if (this.startTimeCurrent !== this.startTime || this.endTimeCurrent !== this.endTime) {
-          this.startTimeCurrent = this.startTime
-          this.endTimeCurrent = this.endTime
-          this.drawData()
-        }
-      }
-    },
-    distribute: function () {
-      console.log(this.chartDetailData)
-      if (this.chartDetailData.grid.length === 1) {
-        this.chartDetailData.xAxis[0].axisLabel.show = false
-        chartData.updateGridList(this.chartDetailData.chartID, this.chartDetailData.series.length)
-        this.chartDetailData.series.forEach((series, index) => {
-          series.xAxisIndex = index
-          series.yAxisIndex = index
-        })
-        this.chartDetailData.xAxis[this.chartDetailData.xAxis.length - 1].axisLabel.show = true
-      } else {
-        chartData.updateGridList(this.chartDetailData.chartID, 1)
-        this.chartDetailData.series.forEach(series => {
-          series.xAxisIndex = 0
-          series.yAxisIndex = 0
-        })
-        this.chartDetailData.xAxis[0].axisLabel.show = true
-      }
-      console.log(this.chartDetailData)
-    },
-  },
-  watch: {
-  },
-  async mounted () {
-    // this.chartOverviewData.legend.show = false
-    // console.log(this.chartOverviewData)
-    // console.log(this.metaIDList)
-    await this.getMetaInfo()
-    console.log(this.metaList)
-    await this.getDataInfo()
-    // console.log(this.dataInfo)
-    await this.register()
-    // await this.downloadDataAll()
-    console.log(this.dataInfo)
-    this.drawData()
-    this.dataZoomTimer = setInterval(this.checkDataZoom, 1000)
-    console.log(this.chartDetailData)
-  },
-  beforeDestroy () {
-    for (const id in chartData.getAllChartsData()) {
-      for (const _series of chartData.getAllChartsData()[id].series) {
-        _series.length = 0
-      }
-      delete chartData.getAllChartsData()[id]
-    }
-  },
-  destroyed () {
-    clearInterval(this.dataZoomTimer)
-  },
-
-}
-</script>
-
-<style lang="scss">
-  .area-style {
-    height: auto;
-    overflow-y: hidden;
-    overflow-x: hidden;
-
-    @include media-breakpoint-only(xl) {
-      height: 88vh;
-      overflow-y: scroll;
-      overflow-x: hidden;
-    }
-  }
-</style>
@@ -0,0 +1,526 @@
+<template>
+  <div>
+    <div class="row row-equal">
+      <div class="flex md12 xl3 xs12 sm12">
+        <div class="row">
+          <div class="flex sm12 xl12 md12 xs12">
+            <va-accordion>
+              <va-collapse class="mb-2" :isOpenDefault="true">
+                <span slot="header">Control Panel</span>
+                <div slot="body">
+                  <div>
+                    <top-control-panel :ref="'top_control_panel'" @refreshChart="setOption" @changeAxis="changeAxis"/>
+                  </div>
+                </div>
+              </va-collapse>
+            </va-accordion>
+          </div>
+        </div>
+      </div>
+
+      <div :class="chartAreaClass">
+        <div class="row" >
+          <div class="flex sm12 xl12 md12 xs12">
+            <elite-replay-overview-chart v-show="showOverviewChart" :ref="'chart_overview'" class="mb-1" :cardheight="'7vh'" :data="chartOverviewData" @dataZoomEvent="dataZoomEvent($event)"/>
+            <elite-replay-chart :ref="'chart_detail'" @dblclick.native="distribute()" :cardheight="'88vh'" :chartheight="detailchartheight" :data="chartDetailData" />
+            <change-channel-value-min-max :ref="'set_min_max'"/>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapActions, mapGetters, mapMutations } from 'vuex'
+import EliteReplayChart from './EliteReplayChart.vue'
+import TopControlPanel from './TopControlPanel.vue'
+import EliteReplayOverviewChart from './EliteReplayOverviewChart.vue'
+import ChangeChannelValueMinMax from '@/components/analysis/replay/toolbox/ChangeChannelValueMinMax.vue'
+import api from '@/data/api/index'
+import { download } from '@/data/download/Download'
+import types from '@/store/modules/analysis/replay/types'
+import { mapFields } from 'vuex-map-fields'
+
+export default {
+  name: 'elite-data-replay',
+  components: {
+    TopControlPanel,
+    EliteReplayChart,
+    EliteReplayOverviewChart,
+    ChangeChannelValueMinMax,
+  },
+  computed: {
+    ...mapFields('replay', [
+      'metaList',
+      'chartData',
+      'chartOverviewData',
+      'chartDetailData',
+      'currentScale',
+      'axisXDataType',
+      'axisYDataType',
+      'startTimeCurrent',
+      'endTimeCurrent',
+      'sampleMethod',
+    ]),
+  },
+  props: {
+  },
+  async created () {
+    this.chartOverviewData = await this.initChart({
+      chartAllData: this.chartData,
+      chartID: 0,
+      gridLength: 1,
+      type: 'overview',
+      device: 'elite',
+      mode: 0,
+    })
+    this.chartDetailData = await this.initChart({
+      chartAllData: this.chartData,
+      chartID: 1,
+      gridLength: 1,
+      type: 'detail',
+      device: 'elite',
+      mode: 0,
+    })
+  },
+  data () {
+    return {
+      showOverviewChart: false,
+      detailchartheight: '88vh',
+      dataInfo: {},
+      maxTime: 0,
+      startTime: 0,
+      endTime: 0,
+      zoomTime: 0,
+      initDone: false,
+      chartAreaClass: ['flex', 'xs12', 'sm12', 'md12', 'xl9', 'pa-0'],
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    turnOnAxisEventHandler (eventName, query, handler, attr) {
+      this.$refs.chart_detail.turnOnAxisEventHandler(eventName, query, handler, attr)
+    },
+    turnOffAxisEventHandler (eventName, handler, attr) {
+      this.$refs.chart_detail.turnOffAxisEventHandler(eventName, handler, attr)
+    },
+    showMinMaxPanel (params) {
+      this.$refs.set_min_max.showPanel(params)
+    },
+    setOption (options) {
+      this.$refs.chart_detail.mergeOptions(options)
+    },
+    showChartLoading: function (chart) {
+      const loadStyle = {
+        text: '',
+        color: '#cccccc',
+        maskColor: 'rgba(255, 255, 255, 0.8)',
+        zlevel: 0,
+      }
+      switch (chart) {
+        case 'overview':
+          this.$refs.chart_overview.showLoading(loadStyle)
+          break
+        case 'detail':
+          this.$refs.chart_detail.showLoading(loadStyle)
+          break
+        default:
+          this.$refs.chart_overview.showLoading(loadStyle)
+          this.$refs.chart_detail.showLoading(loadStyle)
+          break
+      }
+    },
+    hideChartLoading: function () {
+      this.$refs.chart_overview.hideLoading()
+      this.$refs.chart_detail.hideLoading()
+    },
+    getData: async function (scale, sampleMethod, id, channel, meta) {
+      if (scale === 1) {
+        return await download.rawByIDChannels(id, channel, meta)
+      } else {
+        if (sampleMethod === 'mean') {
+          return await download.miniMeanByIDChannel(id, channel, meta)
+        } else if (sampleMethod === 'random') {
+          return await download.miniRandomByIDChannel(id, channel, meta)
+        }
+      }
+    },
+    register: async function () {
+      // [TODO] support data source from different file
+      this.updateGridListChart({
+        chartAllData: this.chartData,
+        chartID: this.chartDetailData.chartID,
+        gridLength: this.metaList.length,
+      })
+      let _gridNumber = 0
+      const register = this.metaList.map(meta => {
+        const setting = this.GLOBAL.getDefaultChartTypeByMode(meta.parameter_set.MODE)
+        const xType = setting[0] // Elite or Time
+        const yType = setting[2] // Elite or Time
+        const xValue = setting[1] // 1: I, 2: V, 3: R
+        const yValue = setting[3] // 1: I, 2: V, 3: R
+        console.log(setting)
+        this.registerChart({
+          chartAllData: this.chartData,
+          chartID: this.chartDetailData.chartID,
+          gridIndex: _gridNumber,
+          deviceNameX: xType,
+          deviceIDX: meta.name,
+          channelX: xValue,
+          deviceNameY: yType,
+          deviceIDY: '',
+          channelY: yValue,
+        })
+        JSON.parse(meta.channels).map(ch => {
+          this.registerChart({
+            chartAllData: this.chartData,
+            chartID: this.chartOverviewData.chartID,
+            gridIndex: 0,
+            deviceNameX: 'Time',
+            deviceNameY: 'Elite',
+            deviceIDY: meta.name,
+            channelY: ch,
+          })
+        })
+        this.chartDetailData.xAxis[_gridNumber].axisLabel.show = true
+        if (this.maxTime < parseInt(meta.time_duration)) {
+          this.maxTime = parseInt(meta.time_duration)
+          this.endTime = this.endTimeCurrent = this.maxTime
+        }
+        if (xType === 'Time') {
+          this.chartDetailData.xAxis[_gridNumber].min = 0
+          this.chartDetailData.xAxis[_gridNumber].max = this.maxTime
+        } else {
+          this.chartDetailData.xAxis[_gridNumber].min = 'dataMin'
+          this.chartDetailData.xAxis[_gridNumber].max = 'dataMax'
+        }
+        this.chartDetailData.yAxis[_gridNumber].min = 'dataMin'
+        this.chartDetailData.yAxis[_gridNumber].max = 'dataMax'
+        _gridNumber++
+      })
+      await Promise.all(register)
+      this.chartOverviewData.series.forEach((series, index) => { // [TODO]
+        this.chartOverviewData.xAxis[series.xAxisIndex].min = 0
+        this.chartOverviewData.xAxis[series.xAxisIndex].max = this.maxTime
+      })
+      this.updateDataZoomChart({
+        chartAllData: this.chartData,
+        chartID: 0,
+      })
+      this.updateDataZoomChart({
+        chartAllData: this.chartData,
+        chartID: 1,
+      })
+    },
+    dataZoomEvent: function (e) {
+      if (e.batch != null) {
+        // console.log(e.batch)
+        e.batch.forEach(dataZoom => {
+          const id = parseInt(dataZoom.dataZoomId.substr(dataZoom.dataZoomId.length - 3, dataZoom.dataZoomId.length - 1))
+          if (id === 1) {
+            this.startTime = this.maxTime * dataZoom.start / 100
+            this.endTime = this.maxTime * dataZoom.end / 100
+            // console.log(this.startTime, this.endTime)
+          }
+        })
+      } else {
+        const id = parseInt(e.dataZoomId.substr(e.dataZoomId.length - 3, e.dataZoomId.length - 1))
+        if (id === 0) {
+          this.startTime = this.maxTime * e.start / 100
+          this.endTime = this.maxTime * e.end / 100
+          // console.log(this.startTime, this.endTime)
+        }
+      }
+      this.zoomTime = 0
+    },
+    drawOverviewData: async function () {
+      this.showChartLoading('overview')
+      for (const meta in this.dataInfo) {
+        let metaInfo
+        this.metaList.forEach(_meta => {
+          if (parseInt(_meta.id) === parseInt(meta)) {
+            metaInfo = _meta
+          }
+        })
+        let scale = '100'
+        if (this.axisXDataType.description === 'Time') {
+          const sampleRate = metaInfo.parameter_set.SAMPLE_RATE / 10
+          const dataPointNum = (parseInt(metaInfo.time_duration) / 1e6) * sampleRate // us -> s: /1e6
+          if (dataPointNum > 2e6) { // 2000 (points) * 1000 (resample) = 2e6
+            scale = '1000'
+          } else if (dataPointNum > 2e5) { // 2000 (points) * 100 (resample) = 2e5
+            scale = '100'
+          } else if (dataPointNum > 2e4) { // 2000 (points) * 10 (resample) = 2e4
+            scale = '10'
+          } else {
+            scale = '1'
+          }
+        } else {
+          scale = '1' // [TODO] select by user
+        }
+        console.log('overview scale:', scale)
+        // download data
+        const getAllData = async function (_this) {
+          for (const ch in _this.dataInfo[meta]) {
+            const dataList = _this.dataInfo[meta][ch][scale]
+            for (let i = 0; i < dataList.length; i++) {
+              if (dataList[i].data.length === 0) {
+                _this.intoDataRec({
+                  index: i,
+                  metaID: meta,
+                  channel: ch,
+                  scale: scale,
+                  data: await _this.getData(parseInt(scale), _this.sampleMethod, dataList[i].id, ch, metaInfo),
+                })
+              }
+            }
+          }
+        }
+        await getAllData(this)
+        // push downloaded data to chart series
+        let seriesIndex = 0
+        for (const ch in this.dataInfo[meta]) {
+          const dataList = this.dataInfo[meta][ch][scale]
+          for (let i = 0; i < dataList.length; i++) {
+            this.chartOverviewData.series[seriesIndex].data.push(...dataList[i].data)
+          }
+          seriesIndex++
+        }
+      }
+      this.hideChartLoading()
+    },
+    drawDetailData: async function () {
+      this.showChartLoading('detail')
+      const timeDur = this.endTimeCurrent - this.startTimeCurrent
+      let _gridNumber = 0
+      for (const meta in this.dataInfo) {
+        let metaInfo
+        this.metaList.forEach(_meta => {
+          if (parseInt(_meta.id) === parseInt(meta)) {
+            metaInfo = _meta
+          }
+        })
+
+        let scale = '100'
+        if (this.axisXDataType.description === 'Time') {
+          const sampleRate = metaInfo.parameter_set.SAMPLE_RATE / 10
+          const dataPointNum = (parseInt(timeDur) / 1e6) * sampleRate // us -> s: /1e6
+          if (dataPointNum > 2e6) { // 2000 (points) * 1000 (resample) = 2e6
+            scale = '1000'
+          } else if (dataPointNum > 2e5) { // 2000 (points) * 100 (resample) = 2e5
+            scale = '100'
+          } else if (dataPointNum > 2e4) { // 2000 (points) * 10 (resample) = 2e4
+            scale = '10'
+          } else {
+            scale = '1'
+          }
+        } else {
+          scale = '1' // [TODO] select by user
+        }
+        // elite的sample rate不像neulive這麼高，因此試試scale = 100 or 1000時不要再sampling一次了，不然有些形狀（e.g. peak）會不一樣
+        if (scale === '100' || scale === '1000') {
+          this.updateChartSamplingChart({ chartID: this.chartDetailData.chartID, seriesIndex: _gridNumber, method: null })
+        } else {
+          this.updateChartSamplingChart({ chartID: this.chartDetailData.chartID, seriesIndex: _gridNumber, method: 'lttb' })
+        }
+
+        this.currentScale = scale
+        this.chartDetailData.series[_gridNumber].data.length = 0
+        let dataListX
+        const channelX = parseInt(this.axisXDataType.id)
+        if (this.axisXDataType.description !== 'Time') {
+          dataListX = this.dataInfo[meta][channelX][scale]
+        }
+        const channelY = parseInt(this.axisYDataType.id)
+        const dataListY = this.dataInfo[meta][channelY][scale]
+
+        const isThisModeHasCycle = this.GLOBAL.hasCycleMode(metaInfo.parameter_set.MODE)
+        let startTime
+        let endTime
+        if (isThisModeHasCycle === true && this.axisXDataType.description !== 'Time') { // if有cycle的mode且目前x軸不為時間，抓出第一圈所在的時間段，初始化時先畫第一圈就好，加快初始時間
+          const cycleDataID = 3 // recorded cycle 所在的channel index
+          const dataCycleList = this.dataInfo[meta][cycleDataID][this.currentScale]
+          const cycleDataList = []
+          for (let i = 0; i < dataCycleList.length; i++) {
+            if (dataCycleList[i].data.length === 0) {
+              const data = await this.getData(parseInt(this.currentScale), this.sampleMethod, dataCycleList[i].id, cycleDataID, metaInfo)
+              cycleDataList.push({ data: data })
+            } else {
+              cycleDataList.push({ data: dataCycleList[i].data })
+            }
+          }
+          const cycleDict = this.getCycleDictRec()(cycleDataList)
+          startTime = cycleDict[1][0] // [1]: 第一圈
+          endTime = cycleDict[1][1] // [1]: 第一圈
+        } else {
+          startTime = this.startTimeCurrent
+          endTime = this.endTimeCurrent
+        }
+
+        let startIndex = 0
+        let endIndex = 0
+        // get the subfile index
+        for (let i = 0; i < dataListY.length; i++) {
+          if (startTime >= parseInt(dataListY[i].start_time) && startTime <= parseInt(dataListY[i].end_time)) {
+            startIndex = i
+          }
+          if (endTime >= parseInt(dataListY[i].start_time) && endTime <= parseInt(dataListY[i].end_time)) {
+            endIndex = i
+          }
+        }
+        // download and push into chart
+        for (let i = startIndex; i <= endIndex; i++) {
+          const data = await this.getData(parseInt(scale), this.sampleMethod, dataListY[i].id, channelY, metaInfo)
+          let dataX
+          if (this.axisXDataType.description !== 'Time') {
+            dataX = await this.getData(parseInt(scale), this.sampleMethod, dataListX[i].id, channelX, metaInfo)
+          }
+          for (let j = 0, len = data.length; j < len; j++) {
+            // check which channel and push processed data (i.e. merge two channel data, now data is (time, value) format)
+            if (parseInt(data[j][0]) >= startTime && parseInt(data[j][0]) <= endTime) {
+              const processedData = JSON.parse(JSON.stringify(data[j]))
+              if (dataX !== undefined) {
+                processedData[0] = dataX[j][1]
+              }
+              // console.log(data)
+              this.chartDetailData.series[_gridNumber].data.push(processedData)
+            }
+          }
+        }
+
+        if (this.axisXDataType.description === 'Time') {
+          this.chartDetailData.xAxis[_gridNumber].min = this.startTimeCurrent
+          this.chartDetailData.xAxis[_gridNumber].max = this.endTimeCurrent
+        } else {
+          this.chartDetailData.xAxis[_gridNumber].min = 'dataMin'
+          this.chartDetailData.xAxis[_gridNumber].max = 'dataMax'
+        }
+        _gridNumber += 1
+      }
+
+      if (this.axisXDataType.description !== 'Time') {
+        this.showOverviewChart = false
+        this.detailchartheight = '88vh'
+        // this.$refs.chart_detail.updateChartHeight()
+        this.turnOnAxisEventHandler('click', 'xAxis.axisLabel', this.showMinMaxPanel, { axis: 'x' })
+      } else {
+        this.showOverviewChart = true
+        this.detailchartheight = '80vh'
+        this.turnOffAxisEventHandler('click', this.showMinMaxPanel, { axis: 'x' })
+        this.turnOnAxisEventHandler('click', 'yAxis.axisLabel', this.showMinMaxPanel, { axis: 'y' })
+      }
+      this.hideChartLoading()
+    },
+    checkDataZoom: function () {
+      this.zoomTime++
+      if (this.zoomTime >= 2) {
+        if (this.startTimeCurrent !== this.startTime || this.endTimeCurrent !== this.endTime) {
+          this.startTimeCurrent = this.startTime
+          this.endTimeCurrent = this.endTime
+          this.drawDetailData()
+          this.$refs.top_control_panel.resetScale()
+        }
+      }
+    },
+    changeAxis (gridIndex) {
+      if (this.initDone) {
+        let xType
+        let xValue // 1: I, 2: V, 3: R
+        if (this.axisXDataType.description === 'Time') {
+          xType = 'Time'
+        } else {
+          xType = 'Elite'
+          xValue = this.axisXDataType.id + 1
+        }
+        this.updateRegisteredChart({
+          chartAllData: this.chartData,
+          chartID: this.chartDetailData.chartID,
+          gridIndex: gridIndex,
+          deviceNameX: xType,
+          deviceIDX: this.metaList[gridIndex].name,
+          channelX: xValue,
+          deviceNameY: 'Elite',
+          deviceIDY: '',
+          channelY: this.axisYDataType.id + 1,
+        })
+      }
+      this.drawDetailData() // reDraw
+    },
+    distribute: function () {
+      // if (this.chartDetailData.grid.length === 1) {
+      //   this.chartDetailData.xAxis[0].axisLabel.show = false
+      //   this.updateGridListChart({
+      //     chartAllData: this.chartData,
+      //     chartID: this.chartDetailData.chartID,
+      //     gridLength: this.chartDetailData.series.length,
+      //   })
+      //   this.chartDetailData.series.forEach((series, index) => {
+      //     series.xAxisIndex = index
+      //     series.yAxisIndex = index
+      //   })
+      //   this.chartDetailData.xAxis[this.chartDetailData.xAxis.length - 1].axisLabel.show = true
+      // } else {
+      //   this.updateGridListChart({
+      //     chartAllData: this.chartData,
+      //     chartID: this.chartDetailData.chartID,
+      //     gridLength: 1,
+      //   })
+      //   this.chartDetailData.series.forEach(series => {
+      //     series.xAxisIndex = 0
+      //     series.yAxisIndex = 0
+      //   })
+      //   this.chartDetailData.xAxis[0].axisLabel.show = true
+      // }
+    },
+    ...mapActions('replay', [types.chart.init, types.chart.register, types.chart.clear, types.chart.updateGridList, types.chart.updateDataZoom]),
+    ...mapActions('replay', [types.meta.init]),
+    ...mapActions('replay', [types.rec.init, types.rec.intoData, types.rec.initDisplaySetting, types.rec.updateDisplaySetting]),
+
+    ...mapMutations('replay', [types.chart.updateRegistered, types.chart.updateAxisSplitNumber, types.chart.updateChartSampling]),
+    ...mapMutations('replay', [types.meta.updateByIndex]),
+
+    ...mapGetters('replay', [types.meta.getAll]),
+    ...mapGetters('replay', [types.rec.getAll, types.rec.getCycleDict]),
+  },
+  // use watch because va-select with @change will have bug
+  watch: {
+  },
+  async mounted () {
+    this.showChartLoading()
+    const metaIDList = this.$route.params.metaList.split('-')
+    await this.initMeta({ metaIDList: metaIDList, api: api })
+    this.metaList = this.getAllMeta()
+    await this.initRec({ api: api })
+    this.dataInfo = this.getAllRec()
+    console.log(this.metaList)
+    console.log(this.dataInfo)
+    await this.register()
+    this.$refs.top_control_panel.init() // will call changeAxis() here
+    this.$refs.set_min_max.init()
+    this.drawOverviewData()
+    this.turnOnAxisEventHandler('click', 'yAxis.axisLabel', this.showMinMaxPanel, { axis: 'y' })
+    this.updateAxisSplitNumberChart({ chartID: this.chartDetailData.chartID, axis: 'x' })
+    this.updateAxisSplitNumberChart({ chartID: this.chartDetailData.chartID, axis: 'y' })
+    this.dataZoomTimer = setInterval(this.checkDataZoom, 1000)
+    this.initDone = true
+    console.log(this.chartOverviewData)
+    console.log(this.chartDetailData)
+  },
+  beforeDestroy () {
+    this.$refs.chart_overview.clear()
+    this.$refs.chart_detail.clear()
+    for (const id in this.chartData) {
+      for (const _series of this.chartData[id].series) {
+        _series.length = 0
+      }
+      delete this.chartData[id]
+    }
+    this.clearChart({ chartAllData: this.chartData })
+  },
+  destroyed () {
+    clearInterval(this.dataZoomTimer)
+  },
+}
+</script>
@@ -0,0 +1,114 @@
+<template>
+  <div class="flex" :class="cardclass">
+    <va-card :style="'height: ' + cardheight + ';'">
+      <chart :ref="'chart_ref'" :style="'width: '+ cardwidth + '; height: ' + chartheight + ';'" :options="data" @dataZoom="updateZoom" :auto-resize="true"></chart>
+    </va-card>
+  </div>
+</template>
+
+<script>
+import { mapMutations } from 'vuex'
+import types from '@/store/modules/analysis/replay/types'
+// import { chartData } from '../../../../data/task/ChartsManagement'
+
+export default {
+  name: 'elite-replay-chart',
+  components: {
+  },
+  props: {
+    data: {
+      type: Object,
+      default: function () {
+        return {}
+      },
+    },
+    cardclass: {
+      type: Array,
+      default: function () {
+        return ['xs12', 'md12', 'xl12', 'sm12']
+      },
+    },
+    cardheight: {
+      type: String,
+      default: '88vh',
+    },
+    cardwidth: {
+      type: String,
+      default: 'auto',
+    },
+    chartheight: {
+      type: String,
+      default: '88vh',
+    },
+  },
+  created () {
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+  },
+  watch: {
+  },
+  methods: {
+    resize: function () {
+      if (this.$refs.chart_ref != null) {
+        this.$refs.chart_ref.resize()
+      }
+    },
+    updateZoom: function (e) {
+      this.$emit('dataZoomEvent', e)
+    },
+    mergeOptions (options) {
+      this.$refs.chart_ref.mergeOptions(options)
+    },
+    turnOnAxisEventHandler (eventName, query, handler, attr) {
+      const chartID = 1
+      this.updateAxisEventHandlerChart({
+        chartID: chartID,
+        axis: attr.axis,
+        status: 'on',
+      })
+      // doc: https://echarts.apache.org/zh/api.html#echartsInstance.on
+      this.$refs.chart_ref.chart._zr.on(eventName, query, handler)
+    },
+    turnOffAxisEventHandler (eventName, handler, attr) {
+      const chartID = 1
+      this.updateAxisEventHandlerChart({
+        chartID: chartID,
+        axis: attr.axis,
+        status: 'off',
+      })
+      // doc: https://echarts.apache.org/zh/api.html#echartsInstance.off
+      this.$refs.chart_ref.chart._zr.off(eventName, handler)
+    },
+    showLoading (options) {
+      this.$refs.chart_ref.showLoading(options)
+    },
+    hideLoading () {
+      this.$refs.chart_ref.hideLoading()
+    },
+    clear () {
+      this.$refs.chart_ref.clear()
+    },
+
+    ...mapMutations('replay', [types.chart.updateAxisEventHandler]),
+  },
+  async mounted () {
+    this.resizeTimer = setInterval(this.resize, 1000)
+  },
+  destroyed () {
+    clearInterval(this.resizeTimer)
+  },
+}
+
+</script>
+
+<style lang='scss'>
+  .va-card {
+    &__body {
+      padding-top: 0.25rem;
+    }
+  }
+</style>
@@ -1,10 +1,6 @@
 <template>
  <div class="flex" :class="cardclass">
-    <va-card>
-      <template slot="header">
-        <!-- <va-icon name="fa fa-area-chart mr-3" color="primary"/> -->
-      </template>
-
+    <va-card :style="'height: 8vh;'">
      <chart :ref="'chart_ref'" :style="'width: '+ cardwidth + '; height: ' + cardheight + ';'" :options="data" @dataZoom="updateZoom" :auto-resize="true"></chart>
    </va-card>
  </div>
@@ -14,7 +10,7 @@
 // import { chartData } from '../../../../data/task/ChartsManagement'

 export default {
-  name: 'replay-chart-detail',
+  name: 'elite-replay-overview-chart',
  components: {
  },
  props: {
@@ -32,7 +28,7 @@ export default {
    },
    cardheight: {
      type: String,
-      default: '88vh',
+      default: '82vh',
    },
    cardwidth: {
      type: String,
@@ -58,6 +54,15 @@ export default {
    updateZoom: function (e) {
      this.$emit('dataZoomEvent', e)
    },
+    showLoading (options) {
+      this.$refs.chart_ref.showLoading(options)
+    },
+    hideLoading () {
+      this.$refs.chart_ref.hideLoading()
+    },
+    clear () {
+      this.$refs.chart_ref.clear()
+    },
  },
  async mounted () {
    this.resizeTimer = setInterval(this.resize, 1000)
@@ -68,3 +73,11 @@ export default {
 }

 </script>
+
+<style lang='scss'>
+  .va-card {
+    &__body {
+      padding: 0.75rem;
+    }
+  }
+</style>
@@ -0,0 +1,134 @@
+<template>
+  <div>
+    <va-card>
+      <div class="flex-container">
+        <edit-file-name class="flex-child" :ref="'edit_file_name'"/>
+        <download-file class="flex-child2"/>
+        <delete-file class="flex-child2"/>
+      </div>
+      <div class="flex-container">
+        <change-axis class="flex-child" :ref="'change_axis_x'" deviceName="elite" axis="x" @changeAxis="changeAxis" @changeUnit="changeUnit" @clearCycle="clearCycle" @resetScale="resetScale"/>
+        <change-unit class="flex-child2" :ref="'change_unit_x'" deviceName="elite" axis="x" @refreshChart="refreshChart"/>
+        <change-scale class="flex-child1" :ref="'change_scale_x'" deviceName="elite" axis="x" @refreshChart="refreshChart" @clearCycle="clearCycle"/>
+      </div>
+      <div class="flex-container">
+        <change-axis class="flex-child" :ref="'change_axis_y'" deviceName="elite" axis="y" @changeAxis="changeAxis" @changeUnit="changeUnit" @clearCycle="clearCycle" @resetScale="resetScale"/>
+        <change-unit class="flex-child2" :ref="'change_unit_y'" deviceName="elite" axis="y" @refreshChart="refreshChart"/>
+        <change-scale class="flex-child1" :ref="'change_scale_y'" deviceName="elite" axis="y" @refreshChart="refreshChart" @clearCycle="clearCycle"/>
+      </div>
+      <change-cycle v-show="showCyclePanel" style="margin: 3px;" :ref="'change_cycle'" @refreshChart="refreshChart"/>
+      <show-resample-rate style="margin: 3px;"/>
+      <show-parameter style="margin: 3px;" :ref="'show_param'" deviceName="elite"/>
+    </va-card>
+  </div>
+</template>
+
+<script>
+import ShowResampleRate from '@/components/analysis/replay/toolbox/ShowResampleRate.vue'
+import ChangeAxis from '@/components/analysis/replay/toolbox/ChangeAxis.vue'
+import ChangeUnit from '@/components/analysis/replay/toolbox/ChangeUnit.vue'
+import ChangeScale from '@/components/analysis/replay/toolbox/ChangeScale.vue'
+import ChangeCycle from '@/components/analysis/replay/toolbox/ChangeCycle.vue'
+import DownloadFile from '@/components/analysis/replay/toolbox/DownloadFile.vue'
+import DeleteFile from '@/components/analysis/replay/toolbox/DeleteFile.vue'
+import EditFileName from '@/components/analysis/replay/toolbox/EditFileName.vue'
+import ShowParameter from '@/components/analysis/replay/toolbox/ShowParameter.vue'
+import { mapFields } from 'vuex-map-fields'
+
+export default {
+  name: 'top-control-panel',
+  components: {
+    ShowResampleRate,
+    ChangeAxis,
+    ChangeUnit,
+    ChangeScale,
+    ChangeCycle,
+    DownloadFile,
+    DeleteFile,
+    EditFileName,
+    ShowParameter,
+  },
+  computed: {
+    ...mapFields('replay', [
+      'showCyclePanel',
+    ]),
+  },
+  props: {
+  },
+  async created () {
+  },
+  data () {
+    return {
+      showCycle: false,
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    init () {
+      this.$refs.change_axis_x.init()
+      this.$refs.change_axis_y.init()
+      this.$refs.change_unit_x.init()
+      this.$refs.change_unit_y.init()
+      this.$refs.change_scale_x.init()
+      this.$refs.change_scale_y.init()
+      this.$refs.change_cycle.init()
+      this.$refs.edit_file_name.init()
+      this.$refs.show_param.init()
+    },
+    refreshChart (options) {
+      this.$emit('refreshChart', options)
+    },
+    changeAxis (gridIndex) {
+      this.$emit('changeAxis', gridIndex)
+    },
+    changeUnit (axis) {
+      if (axis === 'x') {
+        this.$refs.change_unit_x.changeUnitByAxis()
+      } else if (axis === 'y') {
+        this.$refs.change_unit_y.changeUnitByAxis()
+      }
+    },
+    clearCycle () {
+      this.$refs.change_cycle.clear()
+    },
+    resetScale () {
+      this.$refs.change_scale_x.reset()
+      this.$refs.change_scale_y.reset()
+    },
+  },
+  // use watch because va-select with @change will have bug
+  watch: {
+  },
+  mounted () {
+  },
+}
+</script>
+
+<style lang="scss">
+  .box_inline-block {
+    padding: 2px;
+    margin: 2px;
+    display: inline-block;
+  }
+
+  .flex-container {
+    display: flex;
+  }
+
+  .flex-child {
+    flex: 2;
+  }
+
+  .flex-child1 {
+    flex: 1;
+  }
+
+  .flex-child2 {
+    flex: 0;
+  }
+
+  .flex-child:first-child {
+    margin-right: 1px;
+  }
+</style>
@@ -0,0 +1,493 @@
+<template>
+  <div>
+    <div class="row row-equal">
+      <div class="flex md12 xl3 xs12 sm12">
+        <div class="row">
+          <div class="flex sm12 xl12 md12 xs12">
+            <va-accordion>
+              <va-collapse class="mb-2" :isOpenDefault="true">
+                <span slot="header">Control Panel</span>
+                <div slot="body">
+                  <div>
+                    <top-control-panel :ref="'top_control_panel'" @refreshChart="setOption"/>
+                  </div>
+                </div>
+              </va-collapse>
+            </va-accordion>
+          </div>
+        </div>
+      </div>
+
+      <div :class="chartAreaClass">
+        <div class="row" >
+          <div class="flex sm12 xl12 md12 xs12">
+            <neulive-replay-overview-chart :ref="'chart_overview'" class="mb-1" :cardheight="'7vh'" :data="chartOverviewData" @dataZoomEvent="dataZoomEvent($event)"/>
+            <neulive-replay-chart :ref="'chart_detail'" @dblclick.native="distribute()"  :cardheight="'80vh'" :data="chartDetailData" @dataZoomEvent="updateMarkArea($event)" />
+            <change-channel-value-min-max :ref="'set_min_max'"/>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapActions, mapGetters, mapMutations } from 'vuex'
+import NeuliveReplayChart from './NeuliveReplayChart.vue'
+import NeuliveReplayOverviewChart from './NeuliveReplayOverviewChart.vue'
+import TopControlPanel from './TopControlPanel.vue'
+import ChangeChannelValueMinMax from '@/components/analysis/replay/toolbox/ChangeChannelValueMinMax.vue'
+import api from '@/data/api/index'
+import { download } from '@/data/download/Download'
+import types from '@/store/modules/analysis/replay/types'
+import { mapFields } from 'vuex-map-fields'
+
+export default {
+  name: 'neulive-data-replay',
+  components: {
+    NeuliveReplayChart,
+    NeuliveReplayOverviewChart,
+    TopControlPanel,
+    ChangeChannelValueMinMax,
+  },
+  computed: {
+    ...mapFields('replay', [
+      'chartData',
+      'chartOverviewData',
+      'chartDetailData',
+      'currentScale',
+      'startTimeCurrent',
+      'endTimeCurrent',
+      'sampleMethod',
+    ]),
+  },
+  props: {
+  },
+  async created () {
+    this.chartOverviewData = await this.initChart({
+      chartAllData: this.chartData,
+      chartID: 0,
+      gridLength: 1,
+      type: 'overview',
+      device: 'neulive',
+      mode: 0,
+    })
+    this.chartDetailData = await this.initChart({
+      chartAllData: this.chartData,
+      chartID: 1,
+      gridLength: 1,
+      type: 'detail',
+      device: 'neulive',
+      mode: 0,
+    })
+  },
+  data () {
+    return {
+      metaList: null,
+      dataInfo: {},
+      maxTime: 0,
+      startTime: 0,
+      endTime: 0,
+      zoomTime: 0,
+      chartAreaClass: ['flex', 'xs12', 'sm12', 'md12', 'xl9', 'pa-0'],
+      dataZoomStart: 0,
+      dataZoomEnd: 100,
+      inDistributeMode: false,
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    turnOnAxisEventHandler (eventName, query, handler, attr) {
+      this.$refs.chart_detail.turnOnAxisEventHandler(eventName, query, handler, attr)
+    },
+    showMinMaxPanel (params) {
+      this.$refs.set_min_max.showPanel(params)
+    },
+    setOption (options) {
+      this.$refs.chart_detail.mergeOptions(options)
+    },
+    showChartLoading: function (chart) {
+      const loadStyle = {
+        text: '',
+        color: '#cccccc',
+        maskColor: 'rgba(255, 255, 255, 0.8)',
+        zlevel: 0,
+      }
+      switch (chart) {
+        case 'overview':
+          this.$refs.chart_overview.showLoading(loadStyle)
+          break
+        case 'detail':
+          this.$refs.chart_detail.showLoading(loadStyle)
+          break
+        default:
+          this.$refs.chart_overview.showLoading(loadStyle)
+          this.$refs.chart_detail.showLoading(loadStyle)
+          break
+      }
+    },
+    hideChartLoading: function () {
+      this.$refs.chart_overview.hideLoading()
+      this.$refs.chart_detail.hideLoading()
+    },
+    getData: async function (scale, sampleMethod, id, channel, meta) {
+      if (scale === 1) {
+        return await download.rawByIDChannels(id, channel, meta)
+      } else {
+        if (sampleMethod === 'mean') {
+          return await download.miniMeanByIDChannel(id, channel, meta)
+        } else if (sampleMethod === 'random') {
+          return await download.miniRandomByIDChannel(id, channel, meta)
+        }
+      }
+    },
+    register: async function () {
+      let chNumber = 0
+      this.metaList.forEach(meta => {
+        chNumber += JSON.parse(meta.channels).length
+      })
+      this.updateGridListChart({
+        chartAllData: this.chartData,
+        chartID: this.chartDetailData.chartID,
+        gridLength: chNumber,
+      })
+      let _chNumber = 0
+      // console.log(this.chartDetailData)
+
+      const register = this.metaList.map(meta => {
+        this.metaList.map(meta => {
+          JSON.parse(meta.channels).map(ch => {
+            this.registerChart({
+              chartAllData: this.chartData,
+              chartID: this.chartDetailData.chartID,
+              gridIndex: _chNumber,
+              deviceNameX: 'Time',
+              deviceNameY: 'Neulive',
+              deviceIDY: meta.name,
+              channelY: ch,
+            })
+            this.registerChart({
+              chartAllData: this.chartData,
+              chartID: this.chartOverviewData.chartID,
+              gridIndex: 0,
+              deviceNameX: 'Time',
+              deviceNameY: 'Neulive',
+              deviceIDY: meta.name,
+              channelY: ch,
+            })
+            _chNumber++
+          })
+        })
+        if (this.maxTime < parseInt(meta.time_duration)) {
+          this.maxTime = parseInt(meta.time_duration)
+          this.endTime = this.endTimeCurrent = this.maxTime
+        }
+      })
+      await Promise.all(register)
+      this.chartDetailData.series.forEach((series, index) => {
+        this.chartDetailData.xAxis[series.xAxisIndex].min = 0
+        this.chartDetailData.xAxis[series.xAxisIndex].max = this.maxTime
+      })
+      this.chartOverviewData.series.forEach((series, index) => {
+        this.chartOverviewData.xAxis[series.xAxisIndex].min = 0
+        this.chartOverviewData.xAxis[series.xAxisIndex].max = this.maxTime
+      })
+      this.chartDetailData.xAxis[this.chartDetailData.xAxis.length - 1].axisLabel.show = true
+      this.updateDataZoomChart({
+        chartAllData: this.chartData,
+        chartID: 0,
+      })
+      this.updateDataZoomChart({
+        chartAllData: this.chartData,
+        chartID: 1,
+      })
+    },
+    updateMarkArea: function (e) {
+      console.log(e)
+      if (e.batch != null) {
+        // console.log(e.batch)
+        e.batch.forEach(dataZoom => {
+          const id = parseInt(dataZoom.dataZoomId.substr(dataZoom.dataZoomId.length - 3, dataZoom.dataZoomId.length - 1))
+          if (id === 1) {
+            this.dataZoomStart = dataZoom.start
+            this.dataZoomEnd = dataZoom.end
+            const startTime = (this.endTime - this.startTime) * dataZoom.start / 100
+            const endTime = (this.endTime - this.startTime) * dataZoom.end / 100
+            this.chartOverviewData.series[0].markArea.data[0][0].xAxis = this.startTime + startTime
+            this.chartOverviewData.series[0].markArea.data[0][1].xAxis = this.startTime + endTime
+            // console.log(this.startTime, this.endTime)
+          }
+        })
+      } else {
+        const id = parseInt(e.dataZoomId.substr(e.dataZoomId.length - 3, e.dataZoomId.length - 1))
+        if (id === 0) {
+          this.dataZoomStart = e.start
+          this.dataZoomEnd = e.end
+          const startTime = (this.endTime - this.startTime) * e.start / 100
+          const endTime = (this.endTime - this.startTime) * e.end / 100
+          this.chartOverviewData.series[0].markArea.data[0][0].xAxis = this.startTime + startTime
+          this.chartOverviewData.series[0].markArea.data[0][1].xAxis = this.startTime + endTime
+          // console.log(this.startTime, this.endTime)
+        }
+      }
+    },
+    dataZoomEvent: function (e) {
+      // console.log(e)
+      if (e.batch != null) {
+        // console.log(e.batch)
+        e.batch.forEach(dataZoom => {
+          const id = parseInt(dataZoom.dataZoomId.substr(dataZoom.dataZoomId.length - 3, dataZoom.dataZoomId.length - 1))
+          if (id === 1) {
+            this.startTime = this.maxTime * dataZoom.start / 100
+            this.endTime = this.maxTime * dataZoom.end / 100
+            // console.log(this.startTime, this.endTime)
+          }
+        })
+      } else {
+        const id = parseInt(e.dataZoomId.substr(e.dataZoomId.length - 3, e.dataZoomId.length - 1))
+        if (id === 0) {
+          this.startTime = this.maxTime * e.start / 100
+          this.endTime = this.maxTime * e.end / 100
+          // console.log(this.startTime, this.endTime)
+        }
+      }
+      this.chartOverviewData.series[0].markArea.data[0][0].xAxis = this.startTime + ((this.endTime - this.startTime) * (this.dataZoomStart / 100))
+      this.chartOverviewData.series[0].markArea.data[0][1].xAxis = this.startTime + ((this.endTime - this.startTime) * (this.dataZoomEnd / 100))
+      this.zoomTime = 0
+    },
+    drawInitData: async function () {
+      this.showChartLoading('overview')
+      for (const meta in this.dataInfo) {
+        let metaInfo
+        this.metaList.forEach(_meta => {
+          if (parseInt(_meta.id) === parseInt(meta)) {
+            metaInfo = _meta
+          }
+        })
+        let scale = '1000'
+        const sampleRate = (800000 / metaInfo.parameter_set.ADC_CLOCK) // Hz
+        const dataPointNum = (parseInt(metaInfo.time_duration) / 1e6) * sampleRate // us -> s: /1e6
+        if (dataPointNum > 2e6) { // 2000 (points) * 1000 (resample) = 2e6
+          scale = '1000'
+        } else if (dataPointNum > 2e5) { // 2000 (points) * 100 (resample) = 2e5
+          scale = '100'
+        } else if (dataPointNum > 2e4) { // 2000 (points) * 10 (resample) = 2e4
+          scale = '10'
+        } else {
+          scale = '1'
+        }
+        this.currentScale = scale
+        console.log('overview scale:', scale)
+        const getAllData = async function (_this) {
+          let seriesIndex = 0
+          for (const ch in _this.dataInfo[meta]) {
+            const dataList = _this.dataInfo[meta][ch][scale]
+            for (let i = 0; i < dataList.length; i++) {
+              _this.intoDataRec({
+                index: i,
+                metaID: meta,
+                channel: ch,
+                scale: scale,
+                data: await _this.getData(parseInt(scale), _this.sampleMethod, dataList[i].id, ch, metaInfo),
+              })
+              _this.chartOverviewData.series[seriesIndex].data.push(...dataList[i].data)
+              _this.chartDetailData.series[seriesIndex].data.push(...dataList[i].data)
+            }
+            seriesIndex++
+          }
+        }
+        await getAllData(this)
+      }
+      this.hideChartLoading()
+    },
+    drawDetailData: async function () {
+      this.showChartLoading('detail')
+      const timeDur = this.endTimeCurrent - this.startTimeCurrent
+      for (const meta in this.dataInfo) {
+        let metaInfo
+        this.metaList.forEach(_meta => {
+          if (parseInt(_meta.id) === parseInt(meta)) {
+            metaInfo = _meta
+          }
+        })
+        let scale = '1000'
+        const sampleRate = (800000 / metaInfo.parameter_set.ADC_CLOCK) // Hz
+        const dataPointNum = (timeDur / 1e6) * sampleRate // us -> s: /1e6
+        if (dataPointNum > 2e6) { // 2000 (points) * 1000 (resample) = 2e6
+          scale = '1000'
+        } else if (dataPointNum > 2e5) { // 2000 (points) * 100 (resample) = 2e5
+          scale = '100'
+        } else if (dataPointNum > 2e4) { // 2000 (points) * 10 (resample) = 2e4
+          scale = '10'
+        } else {
+          scale = '1'
+        }
+        this.currentScale = scale
+        let seriesIndex = 0
+        this.updateChartSamplingChart({ chartID: this.chartDetailData.chartID, seriesIndex: seriesIndex, method: function (frame) { return frame[0] } })
+        for (const ch in this.dataInfo[meta]) {
+          this.chartDetailData.series[seriesIndex].data.length = 0
+          const dataList = this.dataInfo[meta][ch][scale]
+          let startIndex = 0
+          let endIndex = 0
+          // get the subfile index
+          for (let i = 0; i < dataList.length; i++) {
+            if (this.startTimeCurrent >= parseInt(dataList[i].start_time) && this.startTimeCurrent <= parseInt(dataList[i].end_time)) {
+              startIndex = i
+            }
+            if (this.endTimeCurrent >= parseInt(dataList[i].start_time) && this.endTimeCurrent <= parseInt(dataList[i].end_time)) {
+              endIndex = i
+            }
+          }
+          // download and push into chart
+          let endFlag = false // because data is sorted by time, so if current processed data piece exceeds endTimeCurrent, can early stop
+          for (let i = startIndex; i <= endIndex; i++) {
+            const data = await this.getData(parseInt(scale), this.sampleMethod, dataList[i].id, ch, metaInfo)
+            for (let j = 0, len = data.length; j < len; j++) {
+              if (parseInt(data[j][0]) >= this.startTimeCurrent && parseInt(data[j][0]) <= this.endTimeCurrent) {
+                this.chartDetailData.series[seriesIndex].data.push(data[j])
+              }
+              // early stop
+              if (parseInt(data[j][0]) > this.endTimeCurrent) {
+                endFlag = true
+                break
+              }
+            }
+            // early stop
+            if (endFlag === true) {
+              break
+            }
+          }
+          for (let i = 0, len = this.chartDetailData.xAxis.length; i < len; i++) {
+            this.chartDetailData.xAxis[i].min = this.startTimeCurrent
+            this.chartDetailData.xAxis[i].max = this.endTimeCurrent
+          }
+          seriesIndex++
+        }
+      }
+      this.hideChartLoading()
+    },
+    checkDataZoom: function () {
+      this.zoomTime++
+      if (this.zoomTime >= 2) {
+        if (this.startTimeCurrent !== this.startTime || this.endTimeCurrent !== this.endTime) {
+          this.startTimeCurrent = this.startTime
+          this.endTimeCurrent = this.endTime
+          this.drawDetailData()
+          this.$refs.top_control_panel.resetScale()
+        }
+      }
+    },
+    distribute: function () {
+      if (this.inDistributeMode) {
+        let seriesIndex = 0
+        for (const meta in this.dataInfo) {
+          for (const ch in this.dataInfo[meta]) {
+            this.chartDetailData.series[seriesIndex].xAxisIndex = seriesIndex
+            this.chartDetailData.series[seriesIndex].yAxisIndex = seriesIndex
+            this.updateAxisLabelChart({
+              chartID: this.chartDetailData.chartID,
+              axis: 'y',
+              axisIndex: seriesIndex,
+              channel: ch,
+            })
+            seriesIndex++
+          }
+        }
+        this.updateGridListChart({
+          chartAllData: this.chartData,
+          chartID: this.chartDetailData.chartID,
+          gridLength: seriesIndex,
+        })
+
+        for (let i = 0; i < this.chartDetailData.xAxis.length; i++) {
+          this.chartDetailData.xAxis[i].axisLabel.show = false
+        }
+        this.chartDetailData.xAxis[this.chartDetailData.xAxis.length - 1].axisLabel.show = true
+        this.inDistributeMode = false
+      } else {
+        let gridLength = 1
+        this.chartDetailData.xAxis[0].axisLabel.show = true
+        for (const meta in this.dataInfo) {
+          for (const ch in this.dataInfo[meta]) {
+            if (parseInt(ch) >= 256) { // x, y, z, mag
+              gridLength = 2
+              this.chartDetailData.xAxis[0].axisLabel.show = false
+              this.chartDetailData.xAxis[1].axisLabel.show = true
+              break
+            }
+          }
+          this.updateGridListChart({
+            chartAllData: this.chartData,
+            chartID: this.chartDetailData.chartID,
+            gridLength: gridLength,
+          })
+          let seriesIndex = 0
+          for (const ch in this.dataInfo[meta]) {
+            if (parseInt(ch) < 256) {
+              this.chartDetailData.series[seriesIndex].xAxisIndex = 0
+              this.chartDetailData.series[seriesIndex].yAxisIndex = 0
+            } else { // x, y, z, mag
+              this.chartDetailData.series[seriesIndex].xAxisIndex = 1
+              this.chartDetailData.series[seriesIndex].yAxisIndex = 1
+              this.updateAxisLabelChart({
+                chartID: this.chartDetailData.chartID,
+                axis: 'y',
+                axisIndex: 1,
+                channel: ch,
+              })
+            }
+            seriesIndex++
+          }
+        }
+        this.inDistributeMode = true
+      }
+    },
+    ...mapActions('replay', [types.chart.init, types.chart.register, types.chart.clear, types.chart.updateGridList, types.chart.updateDataZoom]),
+    ...mapActions('replay', [types.meta.init]),
+    ...mapActions('replay', [types.rec.init, types.rec.intoData, types.rec.initDisplaySetting, types.rec.updateDisplaySetting]),
+
+    ...mapMutations('replay', [types.chart.updateAxisLabel, types.chart.updateChartSampling]),
+    ...mapMutations('replay', [types.meta.updateByIndex]),
+
+    ...mapGetters('replay', [types.meta.getAll]),
+    ...mapGetters('replay', [types.rec.getAll]),
+  },
+  // use watch because va-select with @change will have bug
+  watch: {
+  },
+  async mounted () {
+    this.showChartLoading()
+    const metaIDList = this.$route.params.metaList.split('-')
+    await this.initMeta({ metaIDList: metaIDList, api: api })
+    this.metaList = this.getAllMeta()
+    await this.initRec({ api: api })
+    this.dataInfo = this.getAllRec()
+    console.log(this.metaList)
+    console.log(this.dataInfo)
+    await this.register()
+    await this.drawInitData()
+    this.dataZoomTimer = setInterval(this.checkDataZoom, 1000)
+    this.$refs.top_control_panel.init()
+    this.$refs.set_min_max.init()
+    this.turnOnAxisEventHandler('click', 'yAxis.axisLabel', this.showMinMaxPanel, { axis: 'y' })
+    console.log(this.chartOverviewData)
+    console.log(this.chartDetailData)
+  },
+  beforeDestroy () {
+    this.$refs.chart_overview.clear()
+    this.$refs.chart_detail.clear()
+    for (const id in this.chartData) {
+      for (const _series of this.chartData[id].series) {
+        _series.length = 0
+      }
+      delete this.chartData[id]
+    }
+    this.clearChart({ chartAllData: this.chartData })
+  },
+  destroyed () {
+    clearInterval(this.dataZoomTimer)
+  },
+}
+</script>
@@ -0,0 +1,110 @@
+<template>
+  <div class="flex" :class="cardclass">
+    <va-card :style="'height: ' + cardheight + ';'">
+      <chart :ref="'chart_ref'" :style="'width: '+ cardwidth + '; height: ' + cardheight + ';'" :options="data" @dataZoom="updateZoom" :auto-resize="true"></chart>
+    </va-card>
+  </div>
+</template>
+
+<script>
+import { mapMutations } from 'vuex'
+import types from '@/store/modules/analysis/replay/types'
+// import { chartData } from '../../../../data/task/ChartsManagement'
+
+export default {
+  name: 'neulive-replay-chart',
+  components: {
+  },
+  props: {
+    data: {
+      type: Object,
+      default: function () {
+        return {}
+      },
+    },
+    cardclass: {
+      type: Array,
+      default: function () {
+        return ['xs12', 'md12', 'xl12', 'sm12']
+      },
+    },
+    cardheight: {
+      type: String,
+      default: '82vh',
+    },
+    cardwidth: {
+      type: String,
+      default: 'auto',
+    },
+  },
+  created () {
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+  },
+  watch: {
+  },
+  methods: {
+    resize: function () {
+      if (this.$refs.chart_ref != null) {
+        this.$refs.chart_ref.resize()
+      }
+    },
+    updateZoom: function (e) {
+      this.$emit('dataZoomEvent', e)
+    },
+    mergeOptions (options) {
+      this.$refs.chart_ref.mergeOptions(options)
+    },
+    turnOnAxisEventHandler (eventName, query, handler, attr) {
+      const chartID = 1
+      this.updateAxisEventHandlerChart({
+        chartID: chartID,
+        axis: attr.axis,
+        status: 'on',
+      })
+      // doc: https://echarts.apache.org/zh/api.html#echartsInstance.on
+      this.$refs.chart_ref.chart._zr.on(eventName, query, handler)
+    },
+    turnOffAxisEventHandler (eventName, handler, attr) {
+      const chartID = 1
+      this.updateAxisEventHandlerChart({
+        chartID: chartID,
+        axis: attr.axis,
+        status: 'off',
+      })
+      // doc: https://echarts.apache.org/zh/api.html#echartsInstance.off
+      this.$refs.chart_ref.chart._zr.off(eventName, handler)
+    },
+    showLoading (options) {
+      this.$refs.chart_ref.showLoading(options)
+    },
+    hideLoading () {
+      this.$refs.chart_ref.hideLoading()
+    },
+    clear () {
+      this.$refs.chart_ref.clear()
+    },
+
+    ...mapMutations('replay', [types.chart.updateAxisEventHandler]),
+  },
+  async mounted () {
+    this.resizeTimer = setInterval(this.resize, 1000)
+  },
+  destroyed () {
+    clearInterval(this.resizeTimer)
+  },
+}
+
+</script>
+
+<style lang='scss'>
+  .va-card {
+    &__body {
+      padding-top: 0.25rem;
+    }
+  }
+</style>
@@ -0,0 +1,83 @@
+<template>
+  <div class="flex" :class="cardclass">
+    <va-card :style="'height: 8vh;'">
+      <chart :ref="'chart_ref'" :style="'width: '+ cardwidth + '; height: ' + cardheight + ';'" :options="data" @dataZoom="updateZoom" :auto-resize="true"></chart>
+    </va-card>
+  </div>
+</template>
+
+<script>
+// import { chartData } from '../../../../data/task/ChartsManagement'
+
+export default {
+  name: 'neulive-replay-overview-chart',
+  components: {
+  },
+  props: {
+    data: {
+      type: Object,
+      default: function () {
+        return {}
+      },
+    },
+    cardclass: {
+      type: Array,
+      default: function () {
+        return ['xs12', 'md12', 'xl12', 'sm12']
+      },
+    },
+    cardheight: {
+      type: String,
+      default: '82vh',
+    },
+    cardwidth: {
+      type: String,
+      default: 'auto',
+    },
+  },
+  created () {
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+  },
+  watch: {
+  },
+  methods: {
+    resize: function () {
+      if (this.$refs.chart_ref != null) {
+        this.$refs.chart_ref.resize()
+      }
+    },
+    updateZoom: function (e) {
+      this.$emit('dataZoomEvent', e)
+    },
+    showLoading (options) {
+      this.$refs.chart_ref.showLoading(options)
+    },
+    hideLoading () {
+      this.$refs.chart_ref.hideLoading()
+    },
+    clear () {
+      this.$refs.chart_ref.clear()
+    },
+  },
+  async mounted () {
+    this.resizeTimer = setInterval(this.resize, 1000)
+  },
+  destroyed () {
+    clearInterval(this.resizeTimer)
+  },
+}
+
+</script>
+
+<style lang='scss'>
+  .va-card {
+    &__body {
+      padding: 0.75rem;
+    }
+  }
+</style>
@@ -0,0 +1,81 @@
+<template>
+  <div>
+    <va-card>
+      <edit-file-name style="display: inline;" :ref="'edit_file_name'"/>
+      <download-file style="display: inline;"/>
+      <delete-file style="display: inline;"/>
+      <show-resample-rate/>
+      <change-axis v-show="showXAxis" :ref="'change_axis_x'" deviceName="neulive" axis="x"/>
+      <change-axis v-show="showYAxis" :ref="'change_axis_y'" deviceName="neulive" axis="y"/>
+      <change-unit v-show="showXUnit" :ref="'change_unit_x'" deviceName="neulive" axis="x" @refreshChart="refreshChart"/>
+      <change-unit :ref="'change_unit_y'" deviceName="neulive" axis="y" @refreshChart="refreshChart"/>
+      <change-scale :ref="'change_scale_y'" deviceName="neulive" axis="y"/>
+      <show-parameter :ref="'show_param'" deviceName="neulive"/>
+    </va-card>
+  </div>
+</template>
+
+<script>
+import ShowResampleRate from '@/components/analysis/replay/toolbox/ShowResampleRate.vue'
+import ChangeAxis from '@/components/analysis/replay/toolbox/ChangeAxis.vue'
+import ChangeUnit from '@/components/analysis/replay/toolbox/ChangeUnit.vue'
+import ChangeScale from '@/components/analysis/replay/toolbox/ChangeScale.vue'
+import DownloadFile from '@/components/analysis/replay/toolbox/DownloadFile.vue'
+import DeleteFile from '@/components/analysis/replay/toolbox/DeleteFile.vue'
+import EditFileName from '@/components/analysis/replay/toolbox/EditFileName.vue'
+import ShowParameter from '@/components/analysis/replay/toolbox/ShowParameter.vue'
+
+export default {
+  name: 'top-control-panel',
+  components: {
+    ShowResampleRate,
+    ChangeAxis,
+    ChangeUnit,
+    ChangeScale,
+    DownloadFile,
+    DeleteFile,
+    EditFileName,
+    ShowParameter,
+  },
+  computed: {
+  },
+  props: {
+  },
+  async created () {
+  },
+  data () {
+    return {
+      showXAxis: false,
+      showYAxis: false,
+      showXUnit: false,
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    init () {
+      this.$refs.change_axis_x.init()
+      this.$refs.change_axis_y.init()
+      this.$refs.change_unit_x.init()
+      this.$refs.change_unit_y.init()
+      this.$refs.change_scale_y.init()
+      this.$refs.edit_file_name.init()
+      this.$refs.show_param.init()
+    },
+    refreshChart (options) {
+      this.$emit('refreshChart', options)
+    },
+    resetScale () {
+      this.$refs.change_scale_y.reset()
+    },
+  },
+  // use watch because va-select with @change will have bug
+  watch: {
+  },
+  mounted () {
+  },
+}
+</script>
+
+<style lang="scss">
+</style>
@@ -0,0 +1,172 @@
+<template>
+  <div>
+    <span> {{ axis }} axis: </span>
+    <div v-if="axis === 'x'" style="display: inline;">
+      <select v-model="channelFormat" @change="changeAxis()">
+        <option v-for="option in channelOptions" :key="option.id" :value="option">
+          {{ option.description }}
+        </option>
+      </select>
+    </div>
+    <div v-if="axis === 'y'" style="display: inline;">
+      <select v-model="channelFormat" @change="changeAxis()">
+        <option v-for="option in channelYOptions" :key="option.id" :value="option">
+          {{ option.description }}
+        </option>
+      </select>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapFields } from 'vuex-map-fields'
+
+export default {
+  name: 'change-axis',
+  components: {
+  },
+  props: {
+    deviceName: {
+      type: String, // elite or neulive
+    },
+    axis: {
+      type: String, // x or y
+    },
+    metaIndex: {
+      type: Number, // which meta file
+      default: 0,
+    },
+  },
+  created () {
+  },
+  computed: {
+    ...mapFields('replay', [
+      'chartData',
+      'metaList',
+      'axisXDataType',
+      'axisYDataType',
+      'showCyclePanel',
+    ]),
+  },
+  methods: {
+    init () {
+      if (this.deviceName === 'neulive') {
+        // now neulive only v-t
+        if (this.axis === 'x') {
+          this.axisXDataType = this.channelOptions[3]
+        } else if (this.axis === 'y') {
+          this.axisYDataType = this.channelOptions[1]
+        }
+      } else if (this.deviceName === 'elite') {
+        // use state meta to decide which default unit need to be used (like check I-V mode...)
+        const setting = this.GLOBAL.getDefaultChartTypeByMode(this.metaList[this.metaIndex].parameter_set.MODE)
+        const xType = setting[0]
+        const xValue = setting[1]
+        const yType = setting[2]
+        const yValue = setting[3]
+        let settingType
+        let settingValue
+        if (this.axis === 'x') {
+          settingType = xType
+          settingValue = xValue
+          if (settingType === 'Elite') {
+            // 1: I, 2: V, 3: R
+            if (settingValue === 1) {
+              this.axisXDataType = this.channelOptions[0]
+            } else if (settingValue === 2) {
+              this.axisXDataType = this.channelOptions[1]
+            } else if (settingValue === 3) {
+              this.axisXDataType = this.channelOptions[2]
+            }
+          } else if (settingType === 'Time') {
+            this.axisXDataType = this.channelOptions[3]
+          }
+          this.channelFormat = this.axisXDataType
+        } else if (this.axis === 'y') {
+          settingType = yType
+          settingValue = yValue
+          if (settingType === 'Elite') {
+            // 1: I, 2: V, 3: R
+            if (settingValue === 1) {
+              this.axisYDataType = this.channelOptions[0]
+            } else if (settingValue === 2) {
+              this.axisYDataType = this.channelOptions[1]
+            } else if (settingValue === 3) {
+              this.axisYDataType = this.channelOptions[2]
+            }
+          } else if (settingType === 'Time') {
+            this.axisYDataType = this.channelOptions[3]
+          }
+          this.channelFormat = this.axisYDataType
+        }
+      }
+      if (this.axis === 'y') { // only need to draw once time when init
+        this.changeAxis()
+      }
+    },
+    changeAxis () {
+      if (this.deviceName === 'neulive') {
+        // for elite now, cuz neulive now only have v-t graph, for future neulive replay need to adjust'
+        // console.log('(Last updated: 2021/06/19)')
+      } else if (this.deviceName === 'elite') {
+        if (this.axis === 'x') {
+          this.axisXDataType = this.channelFormat
+        } else if (this.axis === 'y') {
+          this.axisYDataType = this.channelFormat
+        }
+        if (this.axisXDataType.description !== 'Time' && this.metaList[this.metaIndex].parameter_set.CYCLE_NUMBER > 0) {
+          this.showCyclePanel = true
+        } else {
+          this.showCyclePanel = false
+        }
+        this.$emit('changeAxis', this.metaIndex) // temporarily use metaIndex for gridIndex
+        this.$emit('changeUnit', this.axis)
+        this.$emit('resetScale')
+        this.$emit('clearCycle')
+      }
+    },
+  },
+  mounted () {
+  },
+  data () {
+    return {
+      channelFormat: {},
+      channelOptions: [
+        {
+          id: 0,
+          description: 'Current',
+        },
+        {
+          id: 1,
+          description: 'Voltage',
+        },
+        {
+          id: 2,
+          description: 'Resistance',
+        },
+        {
+          id: 100, // no usage, so assign a large number to avoid conflicting with existing channel data
+          description: 'Time',
+        },
+      ],
+      channelYOptions: [
+        {
+          id: 0,
+          description: 'Current',
+        },
+        {
+          id: 1,
+          description: 'Voltage',
+        },
+        {
+          id: 2,
+          description: 'Resistance',
+        },
+      ],
+    }
+  },
+  destroyed () {
+  },
+}
+
+</script>
@@ -0,0 +1,99 @@
+<template>
+  <div>
+    <va-modal
+      class="flex sm12 xl12 md12 xs12"
+      v-model="showModal.minMaxPanel"
+      size="small"
+      :position="position"
+      :title="'Set min max (if blank, will be auto-set)'"
+      :okText=" $t('modal.confirm') "
+      @ok="setMinMax()"
+    >
+      <va-input
+        v-model="minMaxInfo[gridIndex].max"
+        :label="'Max'"
+      />
+      <va-input
+        v-model="minMaxInfo[gridIndex].min"
+        :label="'Min'"
+      />
+    </va-modal>
+  </div>
+</template>
+
+<script>
+import { mapMutations } from 'vuex'
+import { mapFields } from 'vuex-map-fields'
+import types from '@/store/modules/analysis/replay/types'
+
+export default {
+  name: 'change-channel-value-min-max',
+  components: {
+  },
+  props: {
+    chartID: {
+      type: Number,
+      default: 1, // detail data
+    },
+  },
+  created () {
+  },
+  data () {
+    return {
+      gridIndex: 0,
+      axis: 'y',
+      showModal: {
+        minMaxPanel: false,
+      },
+      minMaxInfo: { 0: { min: '', max: '' } }, // will be set by init()
+      position: 'center',
+    }
+  },
+  computed: {
+    ...mapFields('replay', [
+      'chartData',
+    ]),
+  },
+  watch: {
+  },
+  methods: {
+    init () {
+      const len = this.chartData[this.chartID].series.length
+      for (let i = 0; i < len; i++) {
+        this.minMaxInfo[i] = { min: '', max: '' }
+      }
+    },
+    showPanel (params) {
+      if (params.target !== undefined) {
+        if (params.target.eventData.componentType === 'xAxis' && params.target.eventData.targetType === 'axisLabel') {
+          this.gridIndex = params.target.eventData.xAxisIndex
+          this.axis = 'x'
+          this.position = 'bottom'
+        } else if (params.target.eventData.componentType === 'yAxis' && params.target.eventData.targetType === 'axisLabel') {
+          this.gridIndex = params.target.eventData.yAxisIndex
+          this.axis = 'y'
+          this.position = 'left'
+        }
+        this.showModal.minMaxPanel = true
+      }
+    },
+    setMinMax () {
+      this.updateAxisValMinMaxChart({
+        chartID: this.chartID,
+        axis: this.axis,
+        axisIndex: this.gridIndex,
+        minVal: this.minMaxInfo[this.gridIndex].min,
+        maxVal: this.minMaxInfo[this.gridIndex].max,
+      })
+      this.$emit('refreshChart', this.chartData[this.chartID])
+    },
+    ...mapMutations('replay', [types.chart.updateAxisValMinMax]),
+  },
+  mounted () {
+
+  },
+  destroyed () {
+  },
+}
+
+</script>
@@ -0,0 +1,194 @@
+<template>
+  <div v-if="showPanel">
+    <va-input
+      v-model="showWhichCycles"
+      @change="setCycle"
+      :label="$t('See which cycles')"
+    />
+  </div>
+</template>
+
+<script>
+import { mapMutations, mapGetters } from 'vuex'
+import { mapFields } from 'vuex-map-fields'
+import types from '@/store/modules/analysis/replay/types'
+import { download } from '@/data/download/Download'
+
+export default {
+  name: 'change-cycle',
+  components: {
+  },
+  props: {
+    chartID: {
+      type: Number,
+      default: 1, // detail data
+    },
+    metaIndex: {
+      type: Number, // which meta file
+      default: 0,
+    },
+  },
+  created () {
+  },
+  data () {
+    return {
+      showPanel: false,
+      metaID: 0,
+      showWhichCycles: '1',
+      cycleNum: 0,
+      cycleDataID: 3, // [TODO] manage by data type factory
+    }
+  },
+  computed: {
+    slices: function () {
+      const cycleList = this.showWhichCycles.split(',')
+      if (cycleList.length === 1 && cycleList[0] === '') {
+        return ''
+      }
+      for (let i = 0; i < cycleList.length; i++) {
+        const element = cycleList[i]
+        if (element.includes('-')) {
+          const startIndex = element.split('-')[0]
+          const endIndex = element.split('-')[1]
+          cycleList[i] = startIndex
+          for (let j = endIndex; j >= parseInt(startIndex) + 1; j--) {
+            cycleList.splice(i + 1, 0, j.toString()) // arr.splice(index, 0, item); will insert item into arr at the specified index (deleting 0 items first, that is, it's just an insert).
+          }
+        }
+      }
+      const cycleSet = new Set(cycleList)
+      const sortedCycleList = [...cycleSet].sort() // ref: https://stackoverflow.com/questions/33089695/how-can-i-sort-an-es6-set
+      // console.log(sortedCycleList)
+      return sortedCycleList
+    },
+    ...mapFields('replay', [
+      'chartData',
+      'recInfo',
+      'metaList',
+      'currentScale',
+      'sampleMethod',
+      'axisXDataType',
+      'axisYDataType',
+      'axisXLabelScale',
+      'axisYLabelScale',
+    ]),
+  },
+  watch: {
+  },
+  methods: {
+    init () {
+      this.isThisModeHasCycle = this.GLOBAL.hasCycleMode(this.metaList[this.metaIndex].parameter_set.MODE)
+      this.cycleNum = this.metaList[this.metaIndex].parameter_set.CYCLE_NUMBER
+      this.metaID = this.metaList[this.metaIndex].id
+      if (this.isThisModeHasCycle === true) {
+        this.showPanel = true
+      } else {
+        this.showPanel = false
+      }
+    },
+    clear () {
+      this.showWhichCycles = '1'
+    },
+    async setCycle () {
+      console.log('setCycle')
+      if (this.isThisModeHasCycle === true) {
+        const dataCycleList = this.recInfo[this.metaID][this.cycleDataID][this.currentScale]
+        const cycleDataList = []
+        for (let i = 0; i < dataCycleList.length; i++) {
+          if (dataCycleList[i].data.length === 0) {
+            const data = await this.getData(parseInt(this.currentScale), this.sampleMethod, dataCycleList[i].id, this.cycleDataID, this.metaList[this.metaIndex])
+            cycleDataList.push({ data: data })
+          } else {
+            cycleDataList.push({ data: dataCycleList[i].data })
+          }
+        }
+        const cycleDict = this.getCycleDictRec()(cycleDataList)
+
+        const dataXList = this.recInfo[this.metaID][this.axisXDataType.id][this.currentScale]
+        const dataYList = this.recInfo[this.metaID][this.axisYDataType.id][this.currentScale]
+        const filteredData = []
+        for (let sliceIndex = 0; sliceIndex < this.cycleNum; sliceIndex++) {
+          // console.log(this.slices)
+          if (this.slices === '' || this.slices.includes((sliceIndex + 1).toString())) {
+            // slice data
+            const value = cycleDict[sliceIndex + 1]
+            const startTime = value[0]
+            const endTime = value[1]
+            let startIndex = 0
+            let endIndex = 0
+            for (let i = 0; i < dataYList.length; i++) {
+              if (startTime >= parseInt(dataYList[i].start_time) && startTime <= parseInt(dataYList[i].end_time)) {
+                startIndex = i
+              }
+              if (endTime >= parseInt(dataYList[i].start_time) && endTime <= parseInt(dataYList[i].end_time)) {
+                endIndex = i
+              }
+            }
+
+            for (let i = startIndex; i <= endIndex; i++) {
+              const dataY = await this.getData(parseInt(this.currentScale), this.sampleMethod, dataYList[i].id, this.axisYDataType.id, this.metaList[this.metaIndex])
+              if (this.axisXDataType.description !== 'Time') {
+                const dataX = await this.getData(parseInt(this.currentScale), this.sampleMethod, dataXList[i].id, this.axisXDataType.id, this.metaList[this.metaIndex])
+                for (let j = 0, len = dataY.length; j < len; j++) {
+                  if (parseInt(dataY[j][0]) >= startTime && parseInt(dataY[j][0]) <= endTime) {
+                    let x
+                    let y
+                    if (this.axisXLabelScale.description === 'Log') {
+                      x = Math.log10(Math.abs(dataX[j][1]))
+                    } else if (this.axisXLabelScale.description === 'Linear') {
+                      x = dataX[j][1]
+                    }
+                    if (this.axisYLabelScale.description === 'Log') {
+                      y = Math.log10(Math.abs(dataY[j][1]))
+                    } else if (this.axisYLabelScale.description === 'Linear') {
+                      y = dataY[j][1]
+                    }
+                    filteredData.push([x, y])
+                  }
+                }
+              } else {
+                for (let j = 0, len = dataY.length; j < len; j++) {
+                  if (parseInt(dataY[j][0]) >= startTime && parseInt(dataY[j][0]) <= endTime) {
+                    if (this.axisYLabelScale.description === 'Log') {
+                      dataY[j][1] = Math.log10(Math.abs(dataY[j][1]))
+                    } else if (this.axisYLabelScale.description === 'Linear') {
+                      // do nothing
+                    }
+                    filteredData.push(dataY[j])
+                  }
+                }
+              }
+            }
+
+            this.updateSeriesChart({
+              chartID: this.chartID,
+              seriesIndex: this.metaIndex,
+              data: filteredData,
+            })
+            // this.$emit('refreshChart', this.chartData[this.chartID])
+          }
+        }
+      }
+    },
+    getData: async function (scale, sampleMethod, id, channel, meta) {
+      if (scale === 1) {
+        return await download.rawByIDChannels(id, channel, meta)
+      } else {
+        if (sampleMethod === 'mean') {
+          return await download.miniMeanByIDChannel(id, channel, meta)
+        } else if (sampleMethod === 'random') {
+          return await download.miniRandomByIDChannel(id, channel, meta)
+        }
+      }
+    },
+    ...mapMutations('replay', [types.chart.updateSeries]),
+    ...mapGetters('replay', [types.rec.getCycleDict]),
+  },
+  mounted () {
+
+  },
+  destroyed () {
+  },
+}
+
+</script>
@@ -0,0 +1,243 @@
+<template>
+  <div>
+    <select v-model="scaleFormat" @change="changeScale()">
+      <option v-for="option in scaleOptions" :key="option.id" :value="option">
+        {{ option.description }}
+      </option>
+    </select>
+  </div>
+</template>
+
+<script>
+import { mapMutations, mapGetters } from 'vuex'
+import { mapFields } from 'vuex-map-fields'
+import types from '@/store/modules/analysis/replay/types'
+import { download } from '@/data/download/Download'
+
+export default {
+  name: 'change-scale',
+  components: {
+  },
+  props: {
+    deviceName: {
+      type: String, // elite or neulive
+    },
+    chartID: {
+      type: Number, // detail data
+      default: 1,
+    },
+    axis: {
+      type: String, // x or y
+    },
+    metaIndex: {
+      type: Number, // which meta file
+      default: 0,
+    },
+  },
+  created () {
+  },
+  computed: {
+    ...mapFields('replay', [
+      'chartData',
+      'recInfo',
+      'metaList',
+      'axisXLabelScale',
+      'axisYLabelScale',
+      'axisXDataType',
+      'axisYDataType',
+      'startTimeCurrent',
+      'endTimeCurrent',
+      'currentScale',
+      'sampleMethod',
+    ]),
+  },
+  methods: {
+    init () {
+      this.metaInfo = this.metaList[this.metaIndex]
+      this.metaID = this.metaInfo.id
+      if (this.axis === 'x') {
+        this.axisXLabelScale = this.scaleOptions[0] // 0 mean use default unit
+        this.scaleFormat = this.axisXLabelScale
+      } else if (this.axis === 'y') {
+        this.axisYLabelScale = this.scaleOptions[0] // 0 mean use default unit
+        this.scaleFormat = this.axisYLabelScale
+      }
+    },
+    changeScale () {
+      if (this.axis === 'x') {
+        this.axisXLabelScale = this.scaleFormat
+      } else if (this.axis === 'y') {
+        this.axisYLabelScale = this.scaleFormat
+      }
+      if (this.deviceName === 'neulive') {
+        const keys = Object.keys(this.metaInfo.mini_data)
+        for (let gridIndex = 0; gridIndex < keys.length; gridIndex++) {
+          const ch = keys[gridIndex]
+          if (parseInt(ch) < 256) { // 256: x, 257: y, 258: z, 259: mag
+            this.calculateScaleHelper(gridIndex, ch)
+          }
+        }
+      } else if (this.deviceName === 'elite') {
+        this.calculateScaleHelper(this.metaIndex, -1) // [TODO] elite tmp use metaIndex for grid index
+      }
+    },
+    async calculateScaleHelper (gridIndex, ch) {
+      let seriesData
+      if (this.scaleFormat.description === 'Log') {
+        seriesData = JSON.parse(JSON.stringify(this.chartData[this.chartID].series[gridIndex].data))
+        for (let i = 0; i < seriesData.length; i++) {
+          if (this.axis === 'x') {
+            seriesData[i][0] = Math.log10(Math.abs(seriesData[i][0]))
+          } else if (this.axis === 'y') {
+            seriesData[i][1] = Math.log10(Math.abs(seriesData[i][1]))
+          }
+        }
+      } else if (this.scaleFormat.description === 'Linear') {
+        // console.log(this.recInfo)
+        if (this.deviceName === 'neulive') {
+          // [Region] get the subfile index
+          seriesData = []
+          const dataYList = this.recInfo[this.metaID][ch][this.currentScale]
+          let startIndex = 0
+          let endIndex = 0
+          for (let i = 0; i < dataYList.length; i++) {
+            if (this.startTimeCurrent >= parseInt(dataYList[i].start_time) && this.startTimeCurrent <= parseInt(dataYList[i].end_time)) {
+              startIndex = i
+            }
+            if (this.endTimeCurrent >= parseInt(dataYList[i].start_time) && this.endTimeCurrent <= parseInt(dataYList[i].end_time)) {
+              endIndex = i
+            }
+          }
+          // [EndRegion]
+          for (let i = startIndex; i <= endIndex; i++) {
+            const data = await this.getData(parseInt(this.currentScale), this.sampleMethod, dataYList[i].id, ch, this.metaInfo)
+            for (let j = 0, len = data.length; j < len; j++) {
+              if (parseInt(data[j][0]) >= this.startTimeCurrent && parseInt(data[j][0]) <= this.endTimeCurrent) {
+                const processedData = data[j]
+                if (this.axisXLabelScale.description === 'Log') {
+                  processedData[0] = Math.log10(Math.abs(processedData[0]))
+                }
+                if (this.axisYLabelScale.description === 'Log') {
+                  processedData[1] = Math.log10(Math.abs(processedData[1]))
+                }
+                seriesData.push(processedData)
+              }
+            }
+          }
+        } else if (this.deviceName === 'elite') {
+          seriesData = []
+
+          const isThisModeHasCycle = this.GLOBAL.hasCycleMode(this.metaInfo.parameter_set.MODE)
+          let startTime
+          let endTime
+          if (isThisModeHasCycle === true && this.axisXDataType.description !== 'Time') { // if有cycle的mode且目前x軸不為時間，抓出第一圈所在的時間段，初始化時先畫第一圈就好，加快初始時間
+            const cycleDataID = 3 // recorded cycle 所在的channel index
+            const dataCycleList = this.recInfo[this.metaID][cycleDataID][this.currentScale]
+            const cycleDataList = []
+            for (let i = 0; i < dataCycleList.length; i++) {
+              if (dataCycleList[i].data.length === 0) {
+                const data = await this.getData(parseInt(this.currentScale), this.sampleMethod, dataCycleList[i].id, cycleDataID, this.metaInfo)
+                cycleDataList.push({ data: data })
+              } else {
+                cycleDataList.push({ data: dataCycleList[i].data })
+              }
+            }
+            const cycleDict = this.getCycleDictRec()(cycleDataList)
+            startTime = cycleDict[1][0] // [1]: 第一圈
+            endTime = cycleDict[1][1] // [1]: 第一圈
+            this.$emit('clearCycle')
+          } else {
+            startTime = this.startTimeCurrent
+            endTime = this.endTimeCurrent
+          }
+
+          const dataYList = this.recInfo[this.metaID][this.axisYDataType.id][this.currentScale]
+          let startIndex = 0
+          let endIndex = 0
+          for (let i = 0; i < dataYList.length; i++) {
+            if (startTime >= parseInt(dataYList[i].start_time) && startTime <= parseInt(dataYList[i].end_time)) {
+              startIndex = i
+            }
+            if (endTime >= parseInt(dataYList[i].start_time) && endTime <= parseInt(dataYList[i].end_time)) {
+              endIndex = i
+            }
+          }
+          // [EndRegion]
+          for (let i = startIndex; i <= endIndex; i++) {
+            const dataY = await this.getData(parseInt(this.currentScale), this.sampleMethod, dataYList[i].id, this.axisYDataType.id, this.metaInfo)
+            let dataX
+            if (this.axisXDataType.description !== 'Time') {
+              const dataXList = this.recInfo[this.metaID][this.axisXDataType.id][this.currentScale]
+              dataX = await this.getData(parseInt(this.currentScale), this.sampleMethod, dataXList[i].id, this.axisXDataType.id, this.metaInfo)
+            }
+            for (let j = 0, len = dataY.length; j < len; j++) {
+              if (parseInt(dataY[j][0]) >= startTime && parseInt(dataY[j][0]) <= endTime) {
+                const processedData = dataY[j]
+                if (this.axisXDataType.description !== 'Time') {
+                  processedData[0] = dataX[j][1]
+                }
+                if (this.axisXLabelScale.description === 'Log') {
+                  processedData[0] = Math.log10(Math.abs(processedData[0]))
+                }
+                if (this.axisYLabelScale.description === 'Log') {
+                  processedData[1] = Math.log10(Math.abs(processedData[1]))
+                }
+                seriesData.push(processedData)
+              }
+            }
+          }
+        }
+      }
+      this.updateSeriesChart({
+        chartID: this.chartID,
+        seriesIndex: gridIndex,
+        data: seriesData,
+      })
+    },
+    reset () {
+      if (this.axis === 'x') {
+        this.axisXLabelScale = this.scaleOptions[0] // 0 mean use default unit
+        this.scaleFormat = this.axisXLabelScale
+      } else if (this.axis === 'y') {
+        this.axisYLabelScale = this.scaleOptions[0] // 0 mean use default unit
+        this.scaleFormat = this.axisYLabelScale
+      }
+    },
+    getData: async function (scale, sampleMethod, id, channel, meta) {
+      if (scale === 1) {
+        return await download.rawByIDChannels(id, channel, meta)
+      } else {
+        if (sampleMethod === 'mean') {
+          return await download.miniMeanByIDChannel(id, channel, meta)
+        } else if (sampleMethod === 'random') {
+          return await download.miniRandomByIDChannel(id, channel, meta)
+        }
+      }
+    },
+    ...mapMutations('replay', [types.chart.updateSeries]),
+    ...mapGetters('replay', [types.rec.getCycleDict]),
+  },
+  mounted () {
+  },
+  data () {
+    return {
+      metaID: 0,
+      metaInfo: null,
+      scaleFormat: { id: 0, description: 'Linear' },
+      scaleOptions: [
+        {
+          id: 0,
+          description: 'Linear',
+        },
+        {
+          id: 1,
+          description: 'Log',
+        },
+      ],
+    }
+  },
+  destroyed () {
+  },
+}
+
+</script>
@@ -0,0 +1,223 @@
+<template>
+  <div>
+    <select v-model="valueFormat" @change="changeUnit()">
+      <option v-for="option in valueFormatOptions[dataType]" :key="option.id" :value="option">
+        {{ option.unit }}
+      </option>
+    </select>
+  </div>
+</template>
+
+<script>
+import { mapMutations } from 'vuex'
+import { mapFields } from 'vuex-map-fields'
+import types from '@/store/modules/analysis/replay/types'
+
+export default {
+  name: 'change-unit',
+  components: {
+  },
+  props: {
+    deviceName: {
+      type: String, // elite or neulive
+    },
+    axis: {
+      type: String, // x or y
+    },
+    metaIndex: {
+      type: Number, // which meta file
+      default: 0,
+    },
+  },
+  created () {
+  },
+  computed: {
+    ...mapFields('replay', [
+      'chartData',
+      'metaList',
+      'valueFormatX',
+      'valueFormatY',
+      'axisXDataType',
+      'axisYDataType',
+    ]),
+  },
+  methods: {
+    init () {
+      if (this.deviceName === 'neulive') {
+        // now neulive only v-t
+        if (this.axis === 'x') {
+          this.dataType = 'time'
+        } else if (this.axis === 'y') {
+          this.dataType = 'voltage'
+        }
+      } else if (this.deviceName === 'elite') {
+        // use state meta to decide which default unit need to be used (like check I-V mode...)
+        const setting = this.GLOBAL.getDefaultChartTypeByMode(this.metaList[this.metaIndex].parameter_set.MODE)
+        const xType = setting[0]
+        const xValue = setting[1]
+        const yType = setting[2]
+        const yValue = setting[3]
+        let settingType
+        let settingValue
+        if (this.axis === 'x') {
+          settingType = xType
+          settingValue = xValue
+        } else if (this.axis === 'y') {
+          settingType = yType
+          settingValue = yValue
+        }
+
+        if (settingType === 'Elite') {
+          // 1: I, 2: V, 3: R
+          if (settingValue === 1) {
+            this.dataType = 'current'
+          } else if (settingValue === 2) {
+            this.dataType = 'voltage'
+          } else if (settingValue === 3) {
+            this.dataType = 'resistance'
+          }
+        } else if (settingType === 'Time') {
+          this.dataType = 'time'
+        }
+      }
+      if (this.axis === 'x') {
+        this.valueFormatX = this.valueFormatOptions[this.dataType][0]
+        this.valueFormat = this.valueFormatX
+      } else if (this.axis === 'y') {
+        this.valueFormatY = this.valueFormatOptions[this.dataType][0] // 0 mean use default unit
+        this.valueFormat = this.valueFormatY
+      }
+      this.changeUnit()
+    },
+    changeUnit () {
+      if (this.axis === 'x') {
+        this.valueFormatX = this.valueFormat
+      } else if (this.axis === 'y') {
+        this.valueFormatY = this.valueFormat
+      }
+      const chartID = 1 // detail data
+      if (this.deviceName === 'neulive') {
+        const keys = Object.keys(this.metaList[this.metaIndex].mini_data)
+        for (let axisIndex = 0; axisIndex < keys.length; axisIndex++) {
+          const key = keys[axisIndex]
+          this.updateAxisLabelChart({
+            chartID: chartID,
+            axis: this.axis,
+            axisIndex: axisIndex,
+            channel: parseInt(key),
+          })
+        }
+      } else if (this.deviceName === 'elite') {
+        this.updateAxisLabelChart({
+          chartID: chartID,
+          axis: this.axis,
+          axisIndex: this.metaIndex,
+          channel: -1, // any num < 256, cuz channel only use for determining whether add unit text
+        })
+      }
+      this.$emit('refreshChart', this.chartData[chartID])
+    },
+    changeUnitByAxis () {
+      if (this.axis === 'x') {
+        if (this.axisXDataType.description === 'Current') {
+          this.dataType = 'current'
+        } else if (this.axisXDataType.description === 'Voltage') {
+          this.dataType = 'voltage'
+        } else if (this.axisXDataType.description === 'Resistance') {
+          this.dataType = 'resistance'
+        } else if (this.axisXDataType.description === 'Time') {
+          this.dataType = 'time'
+        }
+      } else if (this.axis === 'y') {
+        if (this.axisYDataType.description === 'Current') {
+          this.dataType = 'current'
+        } else if (this.axisYDataType.description === 'Voltage') {
+          this.dataType = 'voltage'
+        } else if (this.axisYDataType.description === 'Resistance') {
+          this.dataType = 'resistance'
+        }
+      }
+      this.valueFormat = this.valueFormatOptions[this.dataType][0]
+      this.changeUnit()
+    },
+    // call vuex to mutate chart label formatter by unit and axis
+    ...mapMutations('replay', [types.chart.updateAxisLabel]),
+  },
+  mounted () {
+  },
+  data () {
+    return {
+      dataType: '',
+      valueFormat: {},
+      valueFormatOptions: { // below id: 0 mean default
+        current: [
+          {
+            id: 1,
+            unit: 'uA',
+            unitScale: 1000,
+          },
+          {
+            id: 0,
+            unit: 'nA',
+            unitScale: 1,
+          },
+          {
+            id: 2,
+            unit: 'mA',
+            unitScale: 1000000,
+          },
+        ],
+        voltage: [ // Voltage
+          {
+            id: 1,
+            unit: 'mV',
+            unitScale: 1000,
+          },
+          {
+            id: 0,
+            unit: 'uV',
+            unitScale: 1,
+          },
+          {
+            id: 2,
+            unit: 'V',
+            unitScale: 1000000,
+          },
+        ],
+        resistance: [ // Resistance
+          {
+            id: 1,
+            unit: 'Ω',
+            unitScale: 1000,
+          },
+          {
+            id: 0,
+            unit: 'mΩ',
+            unitScale: 1,
+          },
+          {
+            id: 2,
+            unit: 'kΩ',
+            unitScale: 1000000,
+          },
+          {
+            id: 3,
+            unit: 'MΩ',
+            unitScale: 1000000000,
+          },
+        ],
+        time: [ // Time
+          {
+            id: 0,
+            unit: 'auto',
+            unitScale: 1,
+          },
+        ],
+      },
+    }
+  },
+  destroyed () {
+  },
+}
+
+</script>
@@ -0,0 +1,104 @@
+<template>
+  <div>
+    <va-button flat small class="resize-va-button" color="gray" icon="fa fa-trash" @click.stop="deleteFileConfirm()"/>
+    <va-modal
+      v-model="showModal.deleteFile"
+      size="small"
+      :title="'DELETE'"
+      :message="`Delete File?`"
+      :okText=" $t('modal.confirm') "
+      @ok="deleteFile()"
+    >
+    </va-modal>
+  </div>
+</template>
+
+<script>
+import api from '@/data/api/index'
+import { mapFields } from 'vuex-map-fields'
+
+export default {
+  name: 'delete-file',
+  components: {
+  },
+  props: {
+  },
+  created () {
+  },
+  data () {
+    return {
+      showModal: {
+        deleteFile: false,
+      },
+      deleteInfoList: [],
+      deleteInfoTemplate: {
+        path: '',
+        name: '',
+        metaID: 0, // id will be set later
+        rawChannelAndIDArrays: [], // list of lists
+        miniChannelAndIDArrays: [], // list of lists
+      },
+    }
+  },
+  computed: {
+    ...mapFields('replay', [
+      'metaList',
+    ]),
+  },
+  watch: {
+  },
+  methods: {
+    deleteFileConfirm: function () {
+      for (let i = 0; i < this.metaList.length; i++) {
+        const info = this.metaList[i]
+        this.deleteInfoTemplate.path = info.path
+        this.deleteInfoTemplate.name = info.name
+        this.deleteInfoTemplate.metaID = info.id
+        this.deleteInfoTemplate.rawChannelAndIDArrays = [] // list of lists
+        this.deleteInfoTemplate.miniChannelAndIDArrays = [] // list of lists
+        for (const [channel, idArray] of Object.entries(info.raw_data)) {
+          this.deleteInfoTemplate.rawChannelAndIDArrays.push([channel, idArray[0]])
+        }
+        for (const [channel, scaleObject] of Object.entries(info.mini_data)) {
+          for (const idArray of Object.values(scaleObject)) {
+            this.deleteInfoTemplate.miniChannelAndIDArrays.push([channel, idArray[0]])
+          }
+        }
+        this.deleteInfoList.push(JSON.parse(JSON.stringify(this.deleteInfoTemplate))) // deep copy data
+      }
+      this.showModal.deleteFile = true
+    },
+    deleteFile: async function () {
+      for (let i = 0; i < this.deleteInfoList.length; i++) {
+        const deleteInfo = this.deleteInfoList[i]
+        await api.meta.update(deleteInfo.metaID, { deleted: true })
+        await api.meta.clearDel()
+      }
+      await this.deleteFileDone()
+    },
+    deleteFileDone: async function () {
+      this.showToast('Deleted success', {
+        position: 'bottom-right',
+      })
+      this.$router.go(-1)
+    },
+  },
+  mounted () {
+  },
+  destroyed () {
+  },
+}
+
+</script>
+
+<style lang="scss">
+  .resize-va-button {
+    .va-button {
+      margin: 0.375rem 0.5rem 0.375rem 0.1px;
+    }
+
+    .va-button--small {
+      padding: 0.1px;
+    }
+  }
+</style>
@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <va-button flat small class="resize-va-button" color="gray" icon="fa fa-download" @click.stop="downloadCSV()"/>
+  </div>
+</template>
+
+<script>
+// import { download } from '@/data/download/Download'
+// import { exportData } from '@/data/export/export'
+import { mapFields } from 'vuex-map-fields'
+
+export default {
+  name: 'download-file',
+  components: {
+  },
+  props: {
+  },
+  created () {
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+    ...mapFields('replay', [
+      'metaList',
+    ]),
+  },
+  watch: {
+  },
+  methods: {
+    downloadCSV: async function () {
+      for (let i = 0; i < this.metaList.length; i++) {
+        const meta = this.metaList[i]
+        if (meta.device.library_name.indexOf('Elite') >= 0) {
+          window.open('http://' + location.href.split('/')[2].split(':')[0] + '/#/download/excel/' + meta.id)
+        } else if (meta.device.library_name.indexOf('Neulive') >= 0) {
+          window.open('http://' + location.href.split('/')[2].split(':')[0] + '/#/download/csv/' + meta.id)
+        }
+      }
+    },
+  },
+  mounted () {
+  },
+  destroyed () {
+  },
+}
+
+</script>
+
+<style lang="scss">
+  .resize-va-button {
+    .va-button {
+      margin: 0.375rem 0.5rem 0.375rem 0.1px;
+    }
+
+    .va-button--small {
+      padding: 0.1px;
+    }
+  }
+</style>
@@ -0,0 +1,153 @@
+<template>
+  <div>
+    <va-button flat small class="resize-va-button" color="gray" icon="fa fa-file-text-o" @click.stop="editFileConfirm()"> {{ filename }} </va-button>
+    <va-modal
+      class="flex sm12 xl12 md12 xs12"
+      v-model="showModal.editFile"
+      size="small"
+      :title="'CHANGE FILE NAME'"
+      :okText=" $t('modal.confirm') "
+      @ok="editFile()"
+      @cancel="undoEdit()"
+    >
+      <va-input
+        :value="editInfo.changedName"
+        :label="'Name'"
+        :placeholder="editInfo.name"
+        :success="editInfo.success"
+        :error="editInfo.error"
+        :error-messages="editInfo.errorMessages"
+        @input="checkFileNameValidate"
+        removable
+      />
+    </va-modal>
+  </div>
+</template>
+
+<script>
+import api from '@/data/api/index'
+import { debounce } from 'lodash'
+import { file } from '@/data/file/File'
+import { mapFields } from 'vuex-map-fields'
+
+export default {
+  name: 'edit-file-name',
+  components: {
+  },
+  props: {
+  },
+  created () {
+  },
+  data () {
+    return {
+      fileLists: [],
+      showModal: {
+        editFile: false,
+      },
+      editInfo: {
+        info: { id: 0 }, // id will be set in init()
+        changedName: '',
+        success: false,
+        error: false,
+        errorMessagesAll: ['File name contains illegal character', 'File name empty', 'File name exist'],
+        errorMessages: [],
+      },
+      filename: '',
+    }
+  },
+  computed: {
+    ...mapFields('replay', [
+      'metaList',
+    ]),
+  },
+  watch: {
+  },
+  methods: {
+    init () {
+      // [TODO] 0: not sure future UX design
+      const meta = this.metaList[0]
+      this.updateFileLists()
+      this.filename = meta.name
+      this.editInfo.changedName = meta.name
+      this.editInfo.info.id = meta.id
+    },
+    editFileConfirm () {
+      this.updateFileLists()
+      this.showModal.editFile = true
+    },
+    async updateFileLists () {
+      this.fileLists = []
+      // [TODO] 0: not sure future UX design
+      const meta = this.metaList[0]
+      file.clearFileList()
+      const files = await api.meta.getByParent('folder', meta.parent.folder[0])
+      file.updateFileList(files)
+      const tmpFiles = file.getFileList()
+      for (let i = 0; i < tmpFiles.length; i++) {
+        const tmp = tmpFiles[i]
+        this.fileLists.push(tmp)
+      }
+    },
+    editFile: async function () {
+      if (this.editInfo.success === true) {
+        await api.meta.update(this.editInfo.info.id, { name: this.editInfo.changedName })
+        this.editInfo.name = this.editInfo.changedName
+        this.filename = this.editInfo.changedName
+      }
+    },
+    undoEdit: function () {
+      this.editInfo.success = false
+      this.editInfo.error = false
+      this.editInfo.changedName = this.filename
+      this.editInfo.name = ''
+      this.editInfo.path = ''
+    },
+    checkFileNameValidate: debounce(function (term) {
+      const illegalChar = term.match(/[^(\w\-)]+/gm)
+      if (term.length === 0) {
+        // input text empty
+        this.editInfo.error = true
+        this.editInfo.success = false
+        this.editInfo.errorMessages.pop()
+        this.editInfo.errorMessages.push(this.editInfo.errorMessagesAll[1])
+      } else if (illegalChar !== null) {
+        // input text illegal
+        this.editInfo.error = true
+        this.editInfo.success = false
+        this.editInfo.errorMessages.pop()
+        this.editInfo.errorMessages.push(this.editInfo.errorMessagesAll[0] + ' ' + illegalChar[0])
+      } else {
+        const existedFile = this.fileLists.filter(file => file.name.replace('/', '') === term)
+        if (existedFile.length === 0) {
+          this.editInfo.error = false
+          this.editInfo.success = true
+        } else {
+          // file name exist
+          this.editInfo.error = true
+          this.editInfo.success = false
+          this.editInfo.errorMessages.pop()
+          this.editInfo.errorMessages.push(this.editInfo.errorMessagesAll[2])
+        }
+      }
+      this.editInfo.changedName = term
+    }, 200),
+  },
+  mounted () {
+  },
+  destroyed () {
+  },
+}
+
+</script>
+
+<style lang="scss">
+  .resize-va-button {
+    .va-button {
+      margin: 0.375rem 0.5rem 0.375rem 0.1px;
+    }
+
+    .va-button--small {
+      padding: 0.1px;
+    }
+  }
+</style>
@@ -0,0 +1,516 @@
+<template>
+  <va-tree-root>
+    <va-tree-category label="Experiment Setting" :isOpen="false">
+      <pre><div style="text-transform: none;" class="title mb-3" :style="{color: this.$themes.primary}" v-html="content"></div></pre>
+    </va-tree-category>
+  </va-tree-root>
+</template>
+
+<script>
+import { mapFields } from 'vuex-map-fields'
+
+export default {
+  name: 'show-parameter',
+  components: {
+  },
+  props: {
+    deviceName: {
+      type: String, // elite or neulive
+    },
+    metaIndex: {
+      type: Number, // which meta file
+      default: 0,
+    },
+  },
+  created () {
+  },
+  data () {
+    return {
+      content: '',
+      // [region] for neulive
+      ampGainOptions: [
+        {
+          id: 0,
+          description: '25',
+        },
+        {
+          id: 1,
+          description: '100',
+        },
+        {
+          id: 2,
+          description: '400',
+        },
+        {
+          id: 3,
+          description: '800',
+        },
+      ],
+      neuliveSampleRateOptions: [
+        {
+          id: 0,
+          value: 800,
+          description: '1k',
+        },
+        {
+          id: 1,
+          value: 400,
+          description: '2k',
+        },
+        {
+          id: 2,
+          value: 200,
+          description: '4k',
+        },
+        {
+          id: 3,
+          value: 160,
+          description: '5k',
+        },
+        {
+          id: 4,
+          value: 100,
+          description: '8k',
+        },
+        {
+          id: 5,
+          value: 80,
+          description: '10k',
+        },
+      ],
+      stimulateElectrodeOptions: [
+        {
+          label: 'Monopolar',
+          value: 0,
+        },
+        {
+          label: 'Bipolar',
+          value: 1,
+        },
+      ],
+      cycleNumberOptions: [
+        {
+          label: 'limite',
+          value: 0,
+        },
+        {
+          label: 'Unlimite',
+          value: 1,
+        },
+      ],
+      patternModeOptions: [
+        {
+          label: 'Monophasic',
+          value: 0,
+        },
+        {
+          label: 'Biphasic',
+          value: 1,
+        },
+      ],
+      unitOptions: [
+        {
+          label: 's',
+          value: 0,
+        },
+        {
+          label: 'ms',
+          value: 1,
+        },
+        {
+          label: 'us',
+          value: 2,
+        },
+      ],
+      // [Endregion]
+      // [region] for elite
+      workingModeOptions: [
+        {
+          id: 0,
+          description: 'I-V Curve',
+        },
+        {
+          id: 1,
+          description: 'Cycle I-V',
+        },
+        {
+          id: 2,
+          description: 'Function Generator',
+        },
+        {
+          id: 3,
+          description: 'R-T Graph',
+        },
+        {
+          id: 4,
+          description: 'V-T Graph',
+        },
+        {
+          id: 5,
+          description: 'I-T Graph',
+        },
+        {
+          id: 6,
+          description: 'ADC_Test',
+        },
+        {
+          id: 7,
+          description: 'Constant Current',
+        },
+        {
+          id: 8,
+          description: 'Cyclic Voltammetry',
+        },
+        {
+          id: 9,
+          description: 'Cyclic Voltammetry-hi-cycles',
+        },
+        {
+          id: 10,
+          description: 'Linear Sweep Voltammetry',
+        },
+        {
+          id: 11,
+          description: 'Chronoamperometric Graph',
+        },
+      ],
+      currentRangeOptions: [
+        {
+          value: 0,
+          label: '<40 μA',
+        },
+        {
+          value: 1,
+          label: '30-1350 μA',
+        },
+        {
+          value: 2,
+          label: '>1000 μA',
+        },
+        {
+          value: 3,
+          label: 'Auto',
+        },
+      ],
+      stepTimeOptions: [
+        {
+          value: 0,
+          label: '0.5s',
+        },
+        {
+          value: 1,
+          label: '1.0s',
+        },
+        {
+          value: 2,
+          label: '2.0s',
+        },
+      ],
+      resisterRangeOptions: [
+        {
+          value: 0,
+          label: '>50 kΩ',
+        },
+        {
+          value: 1,
+          label: '2-100 kΩ',
+        },
+        {
+          value: 2,
+          label: '<10 kΩ',
+        },
+        {
+          value: 3,
+          label: 'Auto',
+        },
+      ],
+      eliteSampleRateOptions: [
+        {
+          value: 0,
+          label: '100',
+        },
+        {
+          value: 1,
+          label: '10',
+        },
+        {
+          value: 2,
+          label: '5',
+        },
+        {
+          value: 3,
+          label: '1',
+        },
+        {
+          value: 4,
+          label: '0.1',
+        },
+        {
+          value: 5,
+          label: '0.01',
+        },
+      ],
+      chargeOptions: [
+        {
+          value: 0,
+          label: 'Charge',
+        },
+        {
+          value: 1,
+          label: 'Discharge',
+        },
+      ],
+      // [Endregion]
+    }
+  },
+  computed: {
+    ...mapFields('replay', [
+      'metaList',
+    ]),
+  },
+  watch: {
+  },
+  methods: {
+    init () {
+      const meta = this.metaList[this.metaIndex]
+      const params = meta.parameter_set
+      this.content += 'Duration: ' + parseInt(parseInt(meta.time_duration / 1000000) / 60) + ' m ' + parseInt((meta.time_duration % 60000000) / 1000000) + ' s<br/>'
+      this.content += '<br/>Parameter: <br/>'
+      this.content += '<br/>  Recording: <br/>'
+      if (this.deviceName === 'neulive') {
+        // recording param
+        for (const [key, value] of Object.entries(params)) {
+          if (!(key.includes('sti') || key.includes('STI'))) {
+            let showKey = ''
+            let showValue = value
+            if (key === 'RECORDING_CH' || key === 'AXIS_CH' || key === 'AMP_GAIN' || key === 'ADC_CLOCK') {
+              if (key === 'RECORDING_CH') {
+                showKey = 'Channels'
+                // convert decimal to binary
+                const binaryChannelValue = showValue.toString(2)
+                const channelValue = binaryChannelValue.split('')
+                showValue = ''
+                channelValue.forEach(function (value, i) {
+                  if (value === '1') {
+                    showValue += `${i + 1}  `
+                  }
+                })
+                if (showValue === '') {
+                  showValue = 'None'
+                }
+              } else if (key === 'AXIS_CH') {
+                showKey = '3-AXIS'
+                // convert decimal to binary
+                const binaryChannelValue = showValue.toString(2)
+                const channelValue = binaryChannelValue.split('').reverse()
+                showValue = ''
+                channelValue.forEach(function (value, i) {
+                  if (value === '1') {
+                    if (i === 0) {
+                      showValue += 'x '
+                    } else if (i === 1) {
+                      showValue += 'y '
+                    } else if (i === 2) {
+                      showValue += 'z '
+                    } else if (i === 3) {
+                      showValue += 'mag '
+                    }
+                  }
+                })
+                if (showValue === '') {
+                  showValue = 'None'
+                }
+              } else if (key === 'AMP_GAIN') {
+                showKey = 'Amp gain'
+                const targetID = (value + 1) % 4
+                for (let i = 0; i < this.ampGainOptions.length; i++) {
+                  if (this.ampGainOptions[i].id === targetID) {
+                    showValue = this.ampGainOptions[i].description
+                  }
+                }
+              } else if (key === 'ADC_CLOCK') {
+                showKey = 'Sample Rate'
+                for (let i = 0; i < this.neuliveSampleRateOptions.length; i++) {
+                  if (this.neuliveSampleRateOptions[i].value === value) {
+                    showValue = this.neuliveSampleRateOptions[i].description
+                  }
+                }
+              }
+              this.content += '    ' + showKey + ': ' + showValue + '<br/>'
+            }
+          }
+        }
+        // stimulation param
+        this.content += '<br/>  Stimulation: <br/>'
+        for (const [key, value] of Object.entries(params)) {
+          if (key.includes('sti') || key.includes('STI')) {
+            let showKey = ''
+            let showValue = value
+            if (key === 'STI_H_BRIDGE' || key === 'STI_CHANNEL' || key === 'STI_POLARITY' || key === 'CONTINUOUS_STI' ||
+                key === 'STI_AMPLITUDE' || key === 'STI_PATTERN' || key === 'STI_T1' || key === 'STI_T2' || key === 'STI_T3' || key === 'STI_T4') {
+              if (key === 'STI_H_BRIDGE') {
+                showKey = 'ELECTRODE'
+                if (value === true) {
+                  showValue = this.stimulateElectrodeOptions[1].label
+                } else {
+                  showValue = this.stimulateElectrodeOptions[0].label
+                }
+              } else if (key === 'STI_CHANNEL' || key === 'STI_POLARITY') {
+                if (key === 'STI_CHANNEL') {
+                  showKey = 'Channels'
+                } else {
+                  showKey = 'Polarity'
+                }
+                // convert decimal to binary
+                const binaryChannelValue = showValue.toString(2)
+                const channelValue = binaryChannelValue.split('')
+                showValue = ''
+                channelValue.forEach(function (value, i) {
+                  if (value === '1') {
+                    showValue += `${i + 1}  `
+                  }
+                })
+                if (showValue === '') {
+                  showValue = 'None'
+                }
+              } else if (key === 'CONTINUOUS_STI') {
+                showKey = 'CYCLE NUMBER'
+                if (value === true) {
+                  showValue = this.cycleNumberOptions[1].label
+                } else {
+                  showValue = this.cycleNumberOptions[0].label
+                }
+              } else if (key === 'STI_AMPLITUDE') {
+                showKey = 'AMPLITUDE (uA)'
+                showValue = value * 5
+              } else if (key === 'STI_PATTERN') {
+                showKey = 'PATTERN'
+                if (value === true) {
+                  showValue = this.patternModeOptions[1].label
+                } else {
+                  showValue = this.patternModeOptions[0].label
+                }
+              } else if (key === 'STI_T1') {
+                showKey = 'T1 Range'
+                showValue = `${value[0] * 10 / 1000} ms` // 10 is cuz 1 value = 10us, [0] is cuz now all values in array are same
+              } else if (key === 'STI_T2') {
+                showKey = 'T2 Range'
+                showValue = `${value[0] * 10 / 1000} ms` // 10 is cuz 1 value = 10us
+              } else if (key === 'STI_T3') {
+                showKey = 'T3 Range'
+                showValue = `${value[0] * 10 / 1000} ms` // 10 is cuz 1 value = 10us
+              } else if (key === 'STI_T4') {
+                showKey = 'T4 Range'
+                showValue = `${value[0] * 10 / 1000} ms` // 10 is cuz 1 value = 10us
+              }
+              this.content += '    ' + showKey + ': ' + showValue + '<br/>'
+            }
+          }
+        }
+        if ('STI_T1' in params && 'STI_T2' in params && 'STI_T3' in params && 'STI_T4' in params) {
+          const period = (params.STI_T1[0] + params.STI_T2[0] + params.STI_T3[0] + params.STI_T4[0]) * 10 / 1000 // 10 is cuz 1 value = 10us
+          this.content += '    Frequency: ' + String(1000 / period) + ' Hz' + '<br/>' // 1000 is cuz 1s = 1000ms
+          this.content += '    Period: ' + String(period) + ' ms' + '<br/>'
+        }
+      } else if (this.deviceName === 'elite') {
+        for (const [key, value] of Object.entries(params)) {
+          let showKey = ''
+          let showValue = value
+          if (key === 'MODE') {
+            showKey = 'MODE'
+            for (let i = 0; i < this.workingModeOptions.length; i++) {
+              if (this.workingModeOptions[i].id === value) {
+                showValue = this.workingModeOptions[i].description
+              }
+            }
+          } else if (key === 'ADC_LEVEL') {
+            showKey = 'Current Range'
+            for (let i = 0; i < this.currentRangeOptions.length; i++) {
+              if (this.currentRangeOptions[i].value === value) {
+                showValue = this.currentRangeOptions[i].label
+              }
+            }
+          } else if (key === 'VOLT_ORIGIN') {
+            showKey = 'Volt start'
+            showValue = (value / 5000) - 5 + 'V'
+          } else if (key === 'VOLT_FINAL') {
+            showKey = 'Volt stop'
+            showValue = (value / 5000) - 5 + 'V'
+          } else if (key === 'VOLT_STEP') {
+            showKey = 'Volt step'
+            showValue = ((value * 2) + 2) / 10 + 'mV'
+          } else if (key === 'STEP_TIME') {
+            showKey = 'Step time'
+            for (let i = 0; i < this.stepTimeOptions.length; i++) {
+              if (this.stepTimeOptions[i].value === value) {
+                showValue = this.stepTimeOptions[i].label
+              }
+            }
+          } else if (key === 'CYCLE_NUMBER') {
+            showKey = 'Cycle number'
+            showValue = value
+          } else if (key === 'DAC_VOLT') {
+            showKey = 'Volt out'
+            showValue = (value / 5000) - 5 + 'V'
+          } else if (key === 'Resister_LEVEL') {
+            showKey = 'Resister Range'
+            for (let i = 0; i < this.resisterRangeOptions.length; i++) {
+              if (this.resisterRangeOptions[i].value === value) {
+                showValue = this.resisterRangeOptions[i].label
+              }
+            }
+          } else if (key === 'SAMPLE_RATE') {
+            showKey = 'Sample rate'
+            for (let i = 0; i < this.eliteSampleRateOptions.length; i++) {
+              if (this.eliteSampleRateOptions[i].value === value) {
+                showValue = this.eliteSampleRateOptions[i].label
+              }
+            }
+          } else if (key === 'Const_Current_value') {
+            showKey = 'Current'
+            showValue = value + 'μA'
+          } else if (key === 'VOLTSTOP_MAX') {
+            showKey = 'Volt max stop'
+            showValue = (value / 5000) - 5 + 'V'
+          } else if (key === 'VOLTSTOP_MIN') {
+            showKey = 'Volt min stop'
+            showValue = (value / 5000) - 5 + 'V'
+          } else if (key === 'Charge') {
+            showKey = 'Charge'
+            for (let i = 0; i < this.chargeOptions.length; i++) {
+              if (this.chargeOptions[i].value === value) {
+                showValue = this.chargeOptions[i].label
+              }
+            }
+          } else if (key === 'VOLT_INITIAL') {
+            showKey = 'E-Initial'
+            showValue = (value / 5000) - 5 + 'V'
+          } else if (key === 'VOLT_MAX') {
+            showKey = 'Volt max stop'
+            showValue = (value / 5000) - 5 + 'V'
+          } else if (key === 'VOLT_MIN') {
+            showKey = 'Volt min stop'
+            showValue = (value / 5000) - 5 + 'V'
+          } else if (key === 'Scan_Rate') {
+            showKey = 'ScanRate'
+            showValue = (value / 100) + 0.01 + 'mV/s'
+          } else if (key === 'Data_Resolution_Scan') {
+            showKey = 'Resolution'
+            showValue = (value / 10) + 0.1 + 'sps'
+          } else if (key === 'VOLT_EFINAL') {
+            showKey = 'E-Final'
+            showValue = (value / 5000) - 5 + 'V'
+          } else if (key === 'VOLT_VSCAN') {
+            showKey = 'VScan'
+            showValue = (value / 5000) - 5 + 'V'
+          } else {
+            continue
+          }
+          this.content += '    ' + showKey + ': ' + showValue + '<br/>'
+        }
+      }
+    },
+  },
+}
+
+</script>
@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <span> Resample: {{ currentScale }} to 1 </span>
+  </div>
+</template>
+
+<script>
+import { mapFields } from 'vuex-map-fields'
+
+export default {
+  name: 'show-resample-rate',
+  components: {
+  },
+  props: {
+  },
+  created () {
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+    ...mapFields('replay', [
+      'currentScale',
+    ]),
+  },
+  watch: {
+  },
+  methods: {
+  },
+  mounted () {
+  },
+  destroyed () {
+  },
+}
+
+</script>
@@ -0,0 +1,96 @@
+<template>
+  <div>
+    <va-card>
+      <p style="font-size: 125%; text-decoration: underline;"> Channel </p>
+      <channels/>
+      <p style="font-size: 125%; text-decoration: underline;"> Detect </p>
+      <p :style="{color: this.$themes.primary}" class="display-6"> High pass filter </p>
+      <cutoff-freq/>
+      <filter-order/>
+      <p :style="{color: this.$themes.danger}" class="display-6"> Threshold </p>
+      <threshold/>
+      <br/>
+      <p class="display-6"> Waveform </p>
+      <wave-length/>
+      <prethreshold/>
+      <refractory-period/>
+      <detect-button @loadChartData="loadChartData"/>
+    </va-card>
+  </div>
+</template>
+
+<script>
+import Channels from '@/components/analysis/spike/item/Channels.vue'
+import CutoffFreq from '@/components/analysis/spike/item/CutoffFreq.vue'
+import FilterOrder from '@/components/analysis/spike/item/FilterOrder.vue'
+import Prethreshold from '@/components/analysis/spike/item/Prethreshold.vue'
+import RefractoryPeriod from '@/components/analysis/spike/item/RefractoryPeriod.vue'
+import Threshold from '@/components/analysis/spike/item/Threshold.vue'
+import WaveLength from '@/components/analysis/spike/item/WaveLength.vue'
+import DetectButton from '@/components/analysis/spike/item/DetectButton.vue'
+
+export default {
+  name: 'control-panel',
+  components: {
+    Channels,
+    CutoffFreq,
+    FilterOrder,
+    Prethreshold,
+    RefractoryPeriod,
+    Threshold,
+    WaveLength,
+    DetectButton,
+  },
+  props: {
+  },
+  async created () {
+  },
+  data () {
+    return {
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    init () {
+    },
+    refreshChart (options) {
+      this.$emit('refreshChart', options)
+    },
+    loadChartData () {
+      this.$emit('loadChartData')
+    },
+  },
+  // use watch because va-select with @change will have bug
+  watch: {
+  },
+  mounted () {
+  },
+}
+</script>
+
+<style lang="scss">
+  .flex-container {
+    display: flex;
+  }
+
+  .flex-child {
+    flex: 2;
+  }
+
+  .flex-child1 {
+    flex: 1;
+  }
+
+  .flex-child2 {
+    flex: 0;
+  }
+
+  .flex-child:first-child {
+    margin-right: 1px;
+  }
+
+  .right {
+    float: right;
+  }
+</style>
@@ -0,0 +1,354 @@
+<template>
+  <div>
+    <div class="row row-equal">
+      <div class="flex md12 xl3 xs12 sm12">
+        <div class="row">
+          <div class="flex sm12 xl12 md12 xs12">
+            <va-accordion>
+              <va-collapse class="mb-2" :isOpenDefault="true">
+                <span slot="header">Control Panel</span>
+                <div slot="body">
+                  <div>
+                    <control-panel :ref="'control_panel'" @loadChartData="drawSpikeData"/>
+                  </div>
+                </div>
+              </va-collapse>
+            </va-accordion>
+          </div>
+        </div>
+      </div>
+
+      <div :class="chartAreaClass">
+        <div class="row" >
+          <div class="flex sm12 xl12 md12 xs12">
+            <spike-overview-chart :ref="'chart_overview'" :cardheight="'30vh'" :data="chartOverviewData"/>
+            <spike-chart :ref="'chart_detail'" :cardheight="'60vh'" :data="chartDetailData"/>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapActions, mapGetters, mapMutations } from 'vuex'
+import SpikeOverviewChart from './SpikeOverviewChart.vue'
+import SpikeChart from './SpikeChart.vue'
+import ControlPanel from './ControlPanel.vue'
+import api from '@/data/api/index'
+import types from '@/store/modules/analysis/spike/types'
+import { mapFields } from 'vuex-map-fields'
+import newSeries from '@/factories/chart/seriesFactory'
+
+export default {
+  name: 'spike-data-replay',
+  components: {
+    SpikeOverviewChart,
+    SpikeChart,
+    ControlPanel,
+  },
+  computed: {
+    ...mapFields('spike', [
+      'chartData',
+      'chartOverviewData',
+      'chartDetailData',
+      'metaList',
+      'selectedChannel',
+      'cutoffFreq',
+      'selectedThreshold',
+      'upperThreshold',
+      'lowerThreshold',
+      'waveLength',
+      'preThreshold',
+      'refractoryPeriod',
+    ]),
+  },
+  props: {
+  },
+  async created () {
+    this.chartOverviewData = await this.initChart({
+      chartAllData: this.chartData,
+      chartID: 0,
+      gridLength: 1,
+      type: 'overview',
+      device: 'neulive',
+      mode: 0,
+    })
+    this.chartDetailData = await this.initChart({
+      chartAllData: this.chartData,
+      chartID: 1,
+      gridLength: 1,
+      type: 'detail',
+      device: 'neulive',
+      mode: 0,
+    })
+  },
+  data () {
+    return {
+      dataInfo: {},
+      maxTime: 0,
+      chartAreaClass: ['flex', 'xs12', 'sm12', 'md12', 'xl9', 'pa-0'],
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    showChartLoading: function (chart) {
+      const loadStyle = {
+        text: '',
+        color: '#cccccc',
+        maskColor: 'rgba(255, 255, 255, 0.8)',
+        zlevel: 0,
+      }
+      switch (chart) {
+        case 'overview':
+          this.$refs.chart_overview.showLoading(loadStyle)
+          break
+        case 'detail':
+          this.$refs.chart_detail.showLoading(loadStyle)
+          break
+        default:
+          this.$refs.chart_overview.showLoading(loadStyle)
+          this.$refs.chart_detail.showLoading(loadStyle)
+          break
+      }
+    },
+    hideChartLoading: function (chart) {
+      switch (chart) {
+        case 'overview':
+          this.$refs.chart_overview.hideLoading()
+          break
+        case 'detail':
+          this.$refs.chart_detail.hideLoading()
+          break
+        default:
+          this.$refs.chart_overview.hideLoading()
+          this.$refs.chart_detail.hideLoading()
+          break
+      }
+    },
+    register: async function () {
+      const gridLength = 1
+      this.updateGridListChart({
+        chartAllData: this.chartData,
+        chartID: this.chartDetailData.chartID,
+        gridLength: gridLength,
+      })
+      const register = this.metaList.map(meta => {
+        this.registerChart({
+          chartAllData: this.chartData,
+          chartID: this.chartOverviewData.chartID,
+          gridIndex: 0,
+          deviceNameX: 'Time',
+          deviceNameY: 'Neulive',
+          deviceIDY: meta.name,
+          channelY: this.selectedChannel,
+        })
+        this.registerChart({
+          chartAllData: this.chartData,
+          chartID: this.chartDetailData.chartID,
+          gridIndex: 0,
+          deviceNameX: 'Time',
+          deviceNameY: 'Neulive',
+          deviceIDY: meta.name,
+          channelY: this.selectedChannel,
+        })
+        if (this.maxTime < parseInt(meta.time_duration)) {
+          this.maxTime = parseInt(meta.time_duration)
+        }
+      })
+      await Promise.all(register)
+
+      for (let i = 0; i < 2; i++) {
+        // ID 0 = overview, ID 1 = detail
+        this.updateAxisLabelChart({
+          chartID: i,
+          axis: 'x',
+          axisIndex: 0,
+          channel: this.selectedChannel,
+        })
+        this.updateAxisLabelChart({
+          chartID: i,
+          axis: 'y',
+          axisIndex: 0,
+          channel: this.selectedChannel,
+        })
+        this.updateDataZoomChart({
+          chartAllData: this.chartData,
+          chartID: i,
+        })
+      }
+
+      this.updateChartSamplingChart({ chartID: this.chartOverviewData.chartID, seriesIndex: 0, method: function (frame) { return frame[0] } })
+      this.chartOverviewData.xAxis[0].min = 0
+      this.chartOverviewData.xAxis[0].max = this.maxTime
+    },
+    drawSpikeData: async function () {
+      this.showChartLoading('overview')
+      this.showChartLoading('detail')
+      for (const meta in this.dataInfo) {
+        let metaInfo
+        this.metaList.forEach(_meta => {
+          if (parseInt(_meta.id) === parseInt(meta)) {
+            metaInfo = _meta
+          }
+        })
+        const sampleRate = (800000 / metaInfo.parameter_set.ADC_CLOCK) / JSON.parse(metaInfo.channels).length // Hz
+        const period = 1e6 / sampleRate
+
+        let thresholdValue
+        if (this.selectedThreshold === 'over') {
+          thresholdValue = this.upperThreshold
+        } else if (this.selectedThreshold === 'bellow') {
+          thresholdValue = this.lowerThreshold
+        }
+
+        const randomColorArray = []
+
+        // [Region] whole processed signal
+        const allSpikeData = await api.analysis.spikeDetect({
+          id: meta,
+          channel: this.selectedChannel,
+          cut_off_freq: this.cutoffFreq,
+          threshold: [
+            `'${this.selectedThreshold}'`,
+            thresholdValue,
+          ],
+          waveForm: [this.waveLength, this.preThreshold, this.refractoryPeriod],
+          ret_data_type: 'all',
+        })
+
+        this.chartOverviewData.series[0].data.length = 0
+        this.chartOverviewData.color = ['#000000'] // black
+        const splitData = allSpikeData.data.split('\n')
+        const allTimeArray = splitData[0].split(' ')
+        const allTimeArrayLength = allTimeArray.length
+        const allSignalArray = splitData[1].split(' ')
+        const allTimeMarkIndexArray = splitData[2].split(' ')
+        for (let i = 0; i < allTimeArrayLength; i++) {
+          this.chartOverviewData.series[0].data.push([parseInt(allTimeArray[i]), allSignalArray[i]])
+        }
+        this.chartOverviewData.xAxis[0].min = parseInt(allTimeArray[0])
+        this.chartOverviewData.xAxis[0].max = parseInt(allTimeArray[allTimeArrayLength - 1])
+        this.chartOverviewData.xAxis[0].axisLabel.show = true
+
+        this.chartOverviewData.series[0].markArea.data.length = 0
+        for (let i = 0; i < allTimeMarkIndexArray.length; i++) {
+          // generate color array for overview markArea and detail chart series
+          const randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16) // ref: https://css-tricks.com/snippets/javascript/random-hex-color/
+          randomColorArray.push(randomColor)
+          if (Number.isInteger(parseInt(allTimeMarkIndexArray[i]))) { // cuz maybe is '' if no any match after filtering
+            const timeMarkIndex = parseInt(allTimeMarkIndexArray[i])
+            const start = parseInt(this.chartOverviewData.series[0].data[timeMarkIndex - parseInt(this.preThreshold / period)][0])
+            const end = parseInt(this.chartOverviewData.series[0].data[timeMarkIndex + parseInt(this.refractoryPeriod / period)][0])
+            this.chartOverviewData.series[0].markArea.data.push([
+              {
+                itemStyle: {
+                  color: randomColor,
+                },
+                name: String(i + 1),
+                xAxis: start,
+              },
+              {
+                xAxis: end,
+              },
+            ])
+          }
+        }
+        // [EndRegion]
+
+        // [Region] each detailed signal piece
+        const spikeData = await api.analysis.spikeDetect({
+          id: meta,
+          channel: this.selectedChannel,
+          cut_off_freq: this.cutoffFreq,
+          threshold: [
+            `'${this.selectedThreshold}'`,
+            thresholdValue,
+          ],
+          waveForm: [this.waveLength, this.preThreshold, this.refractoryPeriod],
+          ret_data_type: 'partial',
+        })
+
+        for (let i = 0; i < this.chartDetailData.series.length; i++) {
+          this.chartDetailData.series[i].name = ''
+          this.chartDetailData.series[i].data.length = 0
+        }
+        const detailSignalArray = Object.values(spikeData.data)
+        if (detailSignalArray.length <= 8) {
+          this.chartDetailData.tooltip.show = true
+        } else {
+          this.chartDetailData.tooltip.show = false
+        }
+        this.chartDetailData.legend.data.length = 0
+        this.chartDetailData.legend.type = 'scroll'
+        this.chartDetailData.legend.top = '0.25%'
+        // this.chartDetailData.legendpageButtonPosition = 'start'
+        this.chartDetailData.animation = false
+        this.chartDetailData.color = []
+        for (let i = 0; i < detailSignalArray.length; i++) {
+          const detailSignal = detailSignalArray[i].split(' ')
+          const arrayLength = detailSignal.length
+          const step = parseInt(this.waveLength) / (arrayLength - 1)
+          const xAxisIndex = 0
+          const yAxisIndex = 0
+          const legendName = 'T_' + String(i + 1)
+          if (this.chartDetailData.series.length <= i) {
+            const _series = newSeries('line', legendName, xAxisIndex, yAxisIndex, [-1, -1], [metaInfo.name, this.selectedChannel], null, null)
+            this.chartDetailData.series.push(_series)
+          }
+          for (let j = 0; j < arrayLength; j++) {
+            this.chartDetailData.series[i].data.push([j * step, detailSignal[j]])
+          }
+          // push legendName
+          this.chartDetailData.legend.data.push(legendName)
+          this.chartDetailData.series[i].name = legendName
+          // set legend and series color
+          this.chartDetailData.color.push(randomColorArray[i])
+        }
+        this.chartDetailData.xAxis[0].min = 0
+        this.chartDetailData.xAxis[0].max = parseInt(this.waveLength)
+        this.chartDetailData.xAxis[0].axisLabel.show = true
+        // [EndRegion]
+      }
+      this.hideChartLoading()
+      console.log(this.chartOverviewData)
+      console.log(this.chartDetailData)
+    },
+    ...mapActions('spike', [types.chart.init, types.chart.initSelectedChannel, types.chart.register, types.chart.clear, types.chart.updateGridList, types.chart.updateDataZoom]),
+    ...mapActions('spike', [types.meta.init]),
+    ...mapActions('spike', [types.rec.init, types.rec.intoData, types.rec.initDisplaySetting, types.rec.updateDisplaySetting]),
+
+    ...mapMutations('spike', [types.chart.updateAxisLabel, types.chart.updateChartSampling]),
+    ...mapMutations('spike', [types.meta.updateByIndex]),
+
+    ...mapGetters('spike', [types.meta.getAll]),
+    ...mapGetters('spike', [types.rec.getAll]),
+  },
+  // use watch because va-select with @change will have bug
+  watch: {
+  },
+  async mounted () {
+    const metaIDList = this.$route.params.metaList.split('-')
+    await this.initMeta({ metaIDList: metaIDList, api: api })
+    this.metaList = this.getAllMeta()
+    this.initSelectedChannelChart({ metaIndex: 0 })
+    await this.initRec({ api: api })
+    this.dataInfo = this.getAllRec()
+    console.log(this.metaList)
+    console.log(this.dataInfo)
+    await this.register()
+    this.$refs.control_panel.init()
+  },
+  beforeDestroy () {
+    this.$refs.chart_detail.clear()
+    for (const id in this.chartData) {
+      for (const _series of this.chartData[id].series) {
+        _series.length = 0
+      }
+      delete this.chartData[id]
+    }
+    this.clearChart({ chartAllData: this.chartData })
+  },
+}
+</script>
@@ -0,0 +1,110 @@
+<template>
+  <div class="flex" :class="cardclass">
+    <va-card :style="'height: ' + cardheight + ';'">
+      <chart :ref="'chart_ref'" :style="'width: '+ cardwidth + '; height: ' + cardheight + ';'" :options="data" @dataZoom="updateZoom" :auto-resize="true"></chart>
+    </va-card>
+  </div>
+</template>
+
+<script>
+import { mapMutations } from 'vuex'
+import types from '@/store/modules/analysis/spike/types'
+// import { chartData } from '../../../../data/task/ChartsManagement'
+
+export default {
+  name: 'spike-replay-chart',
+  components: {
+  },
+  props: {
+    data: {
+      type: Object,
+      default: function () {
+        return {}
+      },
+    },
+    cardclass: {
+      type: Array,
+      default: function () {
+        return ['xs12', 'md12', 'xl12', 'sm12']
+      },
+    },
+    cardheight: {
+      type: String,
+      default: '82vh',
+    },
+    cardwidth: {
+      type: String,
+      default: 'auto',
+    },
+  },
+  created () {
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+  },
+  watch: {
+  },
+  methods: {
+    resize: function () {
+      if (this.$refs.chart_ref != null) {
+        this.$refs.chart_ref.resize()
+      }
+    },
+    updateZoom: function (e) {
+      this.$emit('dataZoomEvent', e)
+    },
+    mergeOptions (options) {
+      this.$refs.chart_ref.mergeOptions(options)
+    },
+    turnOnAxisEventHandler (eventName, query, handler, attr) {
+      const chartID = 1
+      this.updateAxisEventHandlerChart({
+        chartID: chartID,
+        axis: attr.axis,
+        status: 'on',
+      })
+      // doc: https://echarts.apache.org/zh/api.html#echartsInstance.on
+      this.$refs.chart_ref.chart._zr.on(eventName, query, handler)
+    },
+    turnOffAxisEventHandler (eventName, handler, attr) {
+      const chartID = 1
+      this.updateAxisEventHandlerChart({
+        chartID: chartID,
+        axis: attr.axis,
+        status: 'off',
+      })
+      // doc: https://echarts.apache.org/zh/api.html#echartsInstance.off
+      this.$refs.chart_ref.chart._zr.off(eventName, handler)
+    },
+    showLoading (options) {
+      this.$refs.chart_ref.showLoading(options)
+    },
+    hideLoading () {
+      this.$refs.chart_ref.hideLoading()
+    },
+    clear () {
+      this.$refs.chart_ref.clear()
+    },
+
+    ...mapMutations('spike', [types.chart.updateAxisEventHandler]),
+  },
+  async mounted () {
+    this.resizeTimer = setInterval(this.resize, 1000)
+  },
+  destroyed () {
+    clearInterval(this.resizeTimer)
+  },
+}
+
+</script>
+
+<style lang='scss'>
+  .va-card {
+    &__body {
+      padding-top: 0.25rem;
+    }
+  }
+</style>
@@ -0,0 +1,86 @@
+<template>
+  <div class="flex" :class="cardclass">
+    <va-card :style="'height: ' + cardheight + ';'">
+      <chart :ref="'chart_ref'" :style="'width: '+ cardwidth + '; height: ' + cardheight + ';'" :options="data" @dataZoom="updateZoom" :auto-resize="true"></chart>
+    </va-card>
+  </div>
+</template>
+
+<script>
+// import { chartData } from '../../../../data/task/ChartsManagement'
+
+export default {
+  name: 'spike-overview-chart',
+  components: {
+  },
+  props: {
+    data: {
+      type: Object,
+      default: function () {
+        return {}
+      },
+    },
+    cardclass: {
+      type: Array,
+      default: function () {
+        return ['xs12', 'md12', 'xl12', 'sm12']
+      },
+    },
+    cardheight: {
+      type: String,
+      default: '82vh',
+    },
+    cardwidth: {
+      type: String,
+      default: 'auto',
+    },
+  },
+  created () {
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+  },
+  watch: {
+  },
+  methods: {
+    resize: function () {
+      if (this.$refs.chart_ref != null) {
+        this.$refs.chart_ref.resize()
+      }
+    },
+    mergeOptions (options) {
+      this.$refs.chart_ref.mergeOptions(options)
+    },
+    updateZoom: function (e) {
+      this.$emit('dataZoomEvent', e)
+    },
+    showLoading (options) {
+      this.$refs.chart_ref.showLoading(options)
+    },
+    hideLoading () {
+      this.$refs.chart_ref.hideLoading()
+    },
+    clear () {
+      this.$refs.chart_ref.clear()
+    },
+  },
+  async mounted () {
+    this.resizeTimer = setInterval(this.resize, 1000)
+  },
+  destroyed () {
+    clearInterval(this.resizeTimer)
+  },
+}
+
+</script>
+
+<style lang='scss'>
+  .va-card {
+    &__body {
+      padding-top: 0.25rem;
+    }
+  }
+</style>
@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <va-button-toggle small flat v-model="selectedChannel" :options="selectedChannelOptions" @click.native="reloadData(selectedChannel)"/>
+  </div>
+</template>
+
+<script>
+
+import { mapFields } from 'vuex-map-fields'
+
+export default {
+  name: 'Channels',
+  components: {
+  },
+  computed: {
+    ...mapFields('spike', [
+      'selectedChannel',
+      'selectedChannelOptions',
+    ]),
+  },
+  props: {
+  },
+  created () {
+  },
+  data () {
+    return {
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    reloadData (val) {
+      this.selectedChannel = val
+    },
+  },
+  async mounted () {
+  },
+  destroyed () {
+  },
+  watch: {
+  },
+}
+</script>
@@ -0,0 +1,57 @@
+<template>
+  <div class="row flex sm12 xl12 md12 xs12 align--center my-0 py-0">
+    <div class="flex sm6 xl6 md6 xs6 px-0 mx-0">
+      <p>Cut-off Freq<p/>
+    </div>
+    <div class="flex sm6 xl6 md6 xs6 px-0 mx-0">
+      <va-input
+        @mouseleave.native="itemChange(cutoffFreq)"
+        @keyup.enter="itemChange(cutoffFreq)"
+        @blur="itemChange(cutoffFreq)"
+        v-model="cutoffFreq"
+        class="mb-0"
+      >
+        <p slot="append" style="margin-right: 0;" small>
+          Hz
+        </p>
+      </va-input>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import { mapFields } from 'vuex-map-fields'
+
+export default {
+  name: 'CutoffFreq',
+  components: {
+  },
+  computed: {
+    ...mapFields('spike', [
+      'cutoffFreq',
+    ]),
+  },
+  props: {
+  },
+  created () {
+  },
+  data () {
+    return {
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    itemChange (val) {
+      this.cutoffFreq = val
+    },
+  },
+  async mounted () {
+  },
+  destroyed () {
+  },
+  watch: {
+  },
+}
+</script>
@@ -0,0 +1,49 @@
+<template>
+  <div>
+    <va-button class="right" small @click="startDetect">
+      Start Detect
+    </va-button>
+  </div>
+</template>
+
+<script>
+
+import types from '@/store/modules/analysis/spike/types'
+import { mapFields } from 'vuex-map-fields'
+import { mapMutations } from 'vuex'
+
+export default {
+  name: 'Channels',
+  components: {
+  },
+  computed: {
+    ...mapFields('spike', [
+      'chartDetailData',
+      'selectedChannel',
+      'waveLength',
+    ]),
+  },
+  props: {
+  },
+  created () {
+  },
+  data () {
+    return {
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    startDetect () {
+      this.$emit('loadChartData')
+    },
+    ...mapMutations('spike', [types.chart.updateAxisLabel]),
+  },
+  async mounted () {
+  },
+  destroyed () {
+  },
+  watch: {
+  },
+}
+</script>
@@ -0,0 +1,54 @@
+<template>
+  <div class="row flex sm12 xl12 md12 xs12 align--center my-0 py-0">
+    <div class="flex sm6 xl6 md6 xs6 px-0 mx-0">
+      <p>Filter order<p/>
+    </div>
+    <div class="flex sm6 xl6 md6 xs6 px-0 mx-0">
+      <va-input
+        @mouseleave.native="itemChange(filterOrder)"
+        @keyup.enter="itemChange(filterOrder)"
+        @blur="itemChange(filterOrder)"
+        v-model="filterOrder"
+        class="mb-0"
+      >
+      </va-input>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import { mapFields } from 'vuex-map-fields'
+
+export default {
+  name: 'FilterOrder',
+  components: {
+  },
+  computed: {
+    ...mapFields('spike', [
+      'filterOrder',
+    ]),
+  },
+  props: {
+  },
+  created () {
+  },
+  data () {
+    return {
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    itemChange (val) {
+      this.filterOrder = val
+    },
+  },
+  async mounted () {
+  },
+  destroyed () {
+  },
+  watch: {
+  },
+}
+</script>
@@ -0,0 +1,57 @@
+<template>
+  <div class="row flex sm12 xl12 md12 xs12 align--center my-0 py-0">
+    <div class="flex sm6 xl6 md6 xs6 px-0 mx-0">
+      <p>Prethreshold<p/>
+    </div>
+    <div class="flex sm6 xl6 md6 xs6 px-0 mx-0">
+      <va-input
+        @mouseleave.native="itemChange(preThreshold)"
+        @keyup.enter="itemChange(preThreshold)"
+        @blur="itemChange(preThreshold)"
+        v-model="preThreshold"
+        class="mb-0"
+      >
+        <p slot="append" style="margin-right: 0;" small>
+          µs
+        </p>
+      </va-input>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import { mapFields } from 'vuex-map-fields'
+
+export default {
+  name: 'Prethreshold',
+  components: {
+  },
+  computed: {
+    ...mapFields('spike', [
+      'preThreshold',
+    ]),
+  },
+  props: {
+  },
+  created () {
+  },
+  data () {
+    return {
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    itemChange (val) {
+      this.preThreshold = val
+    },
+  },
+  async mounted () {
+  },
+  destroyed () {
+  },
+  watch: {
+  },
+}
+</script>
@@ -0,0 +1,57 @@
+<template>
+  <div class="row flex sm12 xl12 md12 xs12 align--center my-0 py-0">
+    <div class="flex sm7 xl7 md7 xs7 px-0 mx-0">
+      <p>Refractory period<p/>
+    </div>
+    <div class="flex sm5 xl5 md5 xs5 px-0 mx-0">
+      <va-input
+        @mouseleave.native="itemChange(refractoryPeriod)"
+        @keyup.enter="itemChange(refractoryPeriod)"
+        @blur="itemChange(refractoryPeriod)"
+        v-model="refractoryPeriod"
+        class="mb-0"
+      >
+        <p slot="append" style="margin-right: 0;" small>
+          µs
+        </p>
+      </va-input>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import { mapFields } from 'vuex-map-fields'
+
+export default {
+  name: 'RefractoryPeriod',
+  components: {
+  },
+  computed: {
+    ...mapFields('spike', [
+      'refractoryPeriod',
+    ]),
+  },
+  props: {
+  },
+  created () {
+  },
+  data () {
+    return {
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    itemChange (val) {
+      this.refractoryPeriod = val
+    },
+  },
+  async mounted () {
+  },
+  destroyed () {
+  },
+  watch: {
+  },
+}
+</script>
@@ -0,0 +1,83 @@
+<template>
+  <div class="row flex sm12 xl12 md12 xs12 align--center my-0 py-0">
+    <va-radio-button
+      v-for="(option, index) in options"
+      :key="index"
+      v-model="selectedThreshold"
+      :option="option"
+      :label="`${option}`"
+    />
+    <va-input
+      v-if="selectedThreshold === 'over'"
+      @mouseleave.native="itemChange(upperThreshold, 'upper')"
+      @keyup.enter="itemChange(upperThreshold, 'upper')"
+      @blur="itemChange(upperThreshold, 'upper')"
+      v-model="upperThreshold"
+      class="mb-0"
+    >
+      <p slot="append" style="margin-right: 0;" small>
+        µV
+      </p>
+    </va-input>
+    <va-input
+      v-if="selectedThreshold === 'bellow'"
+      @mouseleave.native="itemChange(lowerThreshold, 'lower')"
+      @keyup.enter="itemChange(lowerThreshold, 'lower')"
+      @blur="itemChange(lowerThreshold, 'lower')"
+      v-model="lowerThreshold"
+      class="mb-0"
+    >
+      <p slot="append" style="margin-right: 0;" small>
+        µV
+      </p>
+    </va-input>
+  </div>
+</template>
+
+<script>
+
+import { mapFields } from 'vuex-map-fields'
+
+export default {
+  name: 'Threshold',
+  components: {
+  },
+  computed: {
+    ...mapFields('spike', [
+      'selectedThreshold',
+      'upperThreshold',
+      'lowerThreshold',
+    ]),
+  },
+  props: {
+  },
+  created () {
+  },
+  data () {
+    return {
+      options: [
+        // 'Auto',
+        'over',
+        'bellow',
+      ],
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    itemChange (val, type) {
+      if (type === 'upper') {
+        this.upperThreshold = val
+      } else if (type === 'lower') {
+        this.lowerThreshold = val
+      }
+    },
+  },
+  async mounted () {
+  },
+  destroyed () {
+  },
+  watch: {
+  },
+}
+</script>
@@ -0,0 +1,57 @@
+<template>
+  <div class="row flex sm12 xl12 md12 xs12 align--center my-0 py-0">
+    <div class="flex sm7 xl7 md7 xs7 px-0 mx-0">
+      <p>Waveform length<p/>
+    </div>
+    <div class="flex sm5 xl5 md5 xs5 px-0 mx-0">
+      <va-input
+        @mouseleave.native="itemChange(waveLength)"
+        @keyup.enter="itemChange(waveLength)"
+        @blur="itemChange(waveLength)"
+        v-model="waveLength"
+        class="mb-0"
+      >
+        <p slot="append" style="margin-right: 0;" small>
+          µs
+        </p>
+      </va-input>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import { mapFields } from 'vuex-map-fields'
+
+export default {
+  name: 'WaveLength',
+  components: {
+  },
+  computed: {
+    ...mapFields('spike', [
+      'waveLength',
+    ]),
+  },
+  props: {
+  },
+  created () {
+  },
+  data () {
+    return {
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    itemChange (val) {
+      this.waveLength = val
+    },
+  },
+  async mounted () {
+  },
+  destroyed () {
+  },
+  watch: {
+  },
+}
+</script>
@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <span> Resample: {{ currentScale }} to 1 </span>
+  </div>
+</template>
+
+<script>
+import { mapFields } from 'vuex-map-fields'
+
+export default {
+  name: 'show-resample-rate',
+  components: {
+  },
+  props: {
+  },
+  created () {
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+    ...mapFields('spike', [
+      'currentScale',
+    ]),
+  },
+  watch: {
+  },
+  methods: {
+  },
+  mounted () {
+  },
+  destroyed () {
+  },
+}
+
+</script>
@@ -12,7 +12,7 @@
        <div v-if="controller.status === 'running'">
          <div class="flex xs12 md12 xl12 sm12 mb-3" style="text-align: center;" >

-            <va-button color="primary" target="_blank" @click="scan(controller.id)" small :disabled="controller.isScan">
+            <va-button class="no-dark-style-va-button" color="primary" target="_blank" @click="scan(controller.id)" small :disabled="controller.isScan">
              SCAN
            </va-button>
            <va-button color="dark" target="_blank" @click="restartCheck(controller.id, controller.mac)" small>
@@ -53,27 +53,28 @@
                      <va-badge v-if="device.status == 'scanned'" class="px-1 py-0" color="primary">scanned</va-badge>
                      <va-badge v-if="device.status == 'connected'" class="px-1 py-0" color="success">connected</va-badge>
                    </div> -->
-
                    <va-item-section avatar class="ml-1">
                      <va-avatar style="border-radius: 0;">
                        <img :src="device.pic" :alt="device.name">
                      </va-avatar>
                    </va-item-section>
-
                    <va-item-section class="ml-3">
-
                      <va-item-label>
                        {{ device.name }}
                        <va-badge v-if="device.status == 'scanned'" class="px-1 py-0 ml-2 mt-0" color="primary">scanned</va-badge>
                        <va-badge v-if="device.status == 'connected'" class="px-1 py-0 ml-2 mt-0" color="success">connected</va-badge>
                      </va-item-label>
-
                      <va-item-label caption>
                        {{ device.addr }}
                      </va-item-label>
                    </va-item-section>
+                    <!--<div>
+                      <va-icon name="fa fa-battery-1" style="font-size: 1.5rem;" color="primary"/>
+                    </div>-->
+                  </va-item>

-                    <va-item-section side >
+                  <va-item class="pa-0 ma-0 mt-2">
+                    <va-item-section>
                      <div v-if="device.loading" class="mr-3">
                        <fulfilling-bouncing-circle-spinner
                          :animation-duration="3000"
@@ -82,11 +83,14 @@
                        >
                        </fulfilling-bouncing-circle-spinner>
                      </div>
-                      <va-button @click.stop="connect(controller.id, device)" v-if="device.status == 'scanned' && !device.loading" class="pl-2 pr-2" color="success" small>CONNECT</va-button>
-                      <va-button @click.stop="disconnectCheck(controller.id, device)" :disabled="controller.isScan" v-if="device.status == 'connected' && !device.loading" class="pl-2 pr-2" color="danger" small>DISCONNECT</va-button>
+                      <div>
+                        <va-button style="width: 100px;" @click.stop="connect(controller.id, device)" v-if="device.status == 'scanned' && !device.loading" class="pl-2 pr-2 mt-2" color="success" small>CONNECT</va-button>
+                        <va-button style="width: 100px;" @click.stop="disconnectCheck(controller.id, device)" :disabled="controller.isScan" v-if="device.status == 'connected' && !device.loading" class="pl-2 pr-2 mt-2" color="danger" small>DISCONNECT</va-button>
+                        <va-button id="detectButton" @click.stop="detect(controller.id, device)" :disabled="controller.isScan" v-if="device.status == 'connected' && !device.loading && device.library_name.indexOf('Elite') !== -1" class="pl-2 pr-2 mt-2" color="primary" small>DETECT</va-button>
+                      </div>
                    </va-item-section>
-
                  </va-item>
+
                </va-card>
              </div>
            </div>
@@ -133,9 +137,9 @@
 </template>

 <script>
+import api from '@/data/api/index'
 import { taskInfo } from '../../data/task/TaskInfo'
 import { FulfillingBouncingCircleSpinner } from 'epic-spinners'
-import api from '../../data/api/index'

 export default {
  name: 'devices-overview',
@@ -204,14 +208,27 @@ export default {
      })
      // console.log(this.controllerList)
    },
-    '+/hardware_info/+' (data, topic) {
+    async '+/hardware_info/+' (data, topic) {
      const topicSplit = topic.split('/')
      const rawDevices = JSON.parse(String.fromCharCode.apply(null, data)).data
-      this.controllerList.forEach(controller => {
+      for (let i = 0; i < this.controllerList.length; i++) {
+        const controller = this.controllerList[i]
        if (controller.id === topicSplit[0]) {
-          controller.mac = rawDevices.device_mac.toUpperCase()
+          if (rawDevices.device_mac !== null) {
+            controller.mac = rawDevices.device_mac.toUpperCase()
+            // const info = await api.controller.getByMac(controller.mac)
+            // if (info.data.length === 0) {
+            //   const req = {
+            //     mac_address: controller.mac,
+            //     mqtt_id: controller.id,
+            //     status: controller.status,
+            //   }
+            //   api.controller.create(req)
+            // }
+            // console.log(info)
+          }
        }
-      })
+      }
      // console.log(this.controllerList)
    },
    '+/hardware_device_connect/+' (data, topic) {
@@ -244,6 +261,10 @@ export default {
                  controller.status = 'running'
                }
              })
+              this.mqttPub(topicSplit[0] + '_user', JSON.stringify({
+                header: 'hardware_datetime/0',
+                content: String(Date.now()),
+              }))
              this.mqttPub(topicSplit[0] + '_user', JSON.stringify({
                header: 'hardware_device/0',
              }))
@@ -262,6 +283,10 @@ export default {
          this.mqttPub(topicSplit[0] + '_user', JSON.stringify({
            header: 'hardware_device/0',
          }))
+          this.mqttPub(topicSplit[0] + '_user', JSON.stringify({
+            header: 'device_update_calibration/0',
+            device: parseInt(mes[1]),
+          }))
          // this.mqttPub(topicSplit[0] + '_user', JSON.stringify({
          //   header: 'device_parent/0',
          //   device: parseInt(mes[1]),
@@ -343,6 +368,7 @@ export default {
    },
    pageMqttSub: function () {
      this.controllerList.forEach(controller => {
+        this.mqttSub(controller.id + '/hardware_datetime/+')
        this.mqttSub(controller.id + '/hardware_device/+')
        this.mqttSub(controller.id + '/hardware_info/+')
        this.mqttSub(controller.id + '/hardware_device_connect/+')
@@ -352,6 +378,7 @@ export default {
    },
    pageMqttUnSub: function () {
      this.controllerList.forEach(controller => {
+        this.mqttUnSub(controller.id + '/hardware_datetime/+')
        this.mqttUnSub(controller.id + '/hardware_device/+')
        this.mqttUnSub(controller.id + '/hardware_info/+')
        this.mqttUnSub(controller.id + '/hardware_device_connect/+')
@@ -361,6 +388,10 @@ export default {
    },
    pageInitPub: function () {
      this.controllerList.forEach(controller => {
+        this.mqttPub(controller.id + '_user', JSON.stringify({
+          header: 'hardware_datetime/0',
+          content: String(Date.now()),
+        }))
        this.mqttPub(controller.id + '_user', JSON.stringify({
          header: 'hardware_device/0',
        }))
@@ -427,6 +458,21 @@ export default {
        device: this.selectDevice.id,
      }))
    },
+    detect (controllerID, device) {
+      this.mqttPub(controllerID + '_user', JSON.stringify({
+        header: 'device_instruction/0',
+        device: device.id,
+        instruction: 'VIS_DEVICE_DETECT',
+      }))
+      setTimeout(() => {
+        this.mqttPub(controllerID + '_user', JSON.stringify({
+          header: 'device_instruction/0',
+          device: device.id,
+          instruction: 'VIS_DEVICE_DONE',
+        }))
+        document.getElementById('detectButton').className += ' no-dark-style-va-button'
+      }, 5000)
+    },
    sleep: function (milliseconds) {
      var start = new Date().getTime()
      while (1) {
@@ -436,20 +482,21 @@ export default {
      }
    },
    createInitialCollection: async function (user) {
-      const root = await api.getCollectionsByName('root')
+      const root = await api.collection.getByParentName('folder', 0, 'root')
      if (root.data.length === 0) {
-        await api.createCollection({
+        await api.collection.create({
          name: 'root',
          type: 'folder',
+          parent: { folder: [0] },
          size: 0,
        })
      }

      // init check and create collection
-      const _root = await api.getCollectionsByName('root')
-      const USER = await api.getCollectionsByName(user)
+      const _root = await api.collection.getByName('root')
+      const USER = await api.collection.getByName(user)
      if (USER.data.length === 0) {
-        api.createCollection({
+        api.collection.create({
          name: user,
          parent: { folder: [_root.data[0].id] },
          type: 'folder',
@@ -476,3 +523,11 @@ export default {

 }
 </script>
+
+<style lang="scss">
+  .no-dark-style-va-button {
+    &:focus {
+      filter: brightness(100%);
+    }
+  }
+</style>
@@ -1,143 +1,26 @@
 <template>
  <div>
-    <va-modal
-      class="flex sm12 xl12 md12 xs12 pa-0 ma-0"
-      v-model="showDownload"
-      size="small"
-      :hideDefaultActions="true"
-      :mobileFullscreen="false"
-    >
-      <template slot="header">
-        <div class="row mb-2">
-          <va-icon name="fa fa-download mr-3 " color="primary"/>
-          <h5 class="mt-0 mb-0">{{'Download'}}</h5>
-        </div>
-      </template>
-
-      <div class="downloadOptionsList">
-        <template v-for="(downloadOptions, i) in downloadOptionsList">
-          <va-accordion :key="downloadOptions.filename">
-            <va-collapse>
-              <va-item :key="downloadOptions.filename" slot="header" clickable>
-                <va-item-section avatar>
-                  <va-item-label>
-                    {{ downloadOptions.filename }}
-                  </va-item-label>
-                </va-item-section>
-
-                <va-item-section>
-                  <!-- <va-item-label>
-                {{ downloadInfo.minTime }}
-              </va-item-label>
-
-              <va-item-label caption>
-                {{ downloadInfo.maxTime }}
-              </va-item-label> -->
-                </va-item-section>
-
-                <va-item-section v-if="downloadOptions.download.status == 'idle'" side>
-                  <va-icon name="fa fa-play" color="gray" @click.native.stop="confirmDownload(downloadOptions.metaPath)"/>
-                </va-item-section>
-                <va-item-section v-else side class="md4 offset--md8">
-                  <div class="row flex sm12 xl12 md12 xs12">
-                    <div class="flex-center spinner-box">
-                      <fulfilling-bouncing-circle-spinner
-                        :animation-duration="3000"
-                        :color="'#6c7fee'"
-                        :size="20"
-                      >
-                      </fulfilling-bouncing-circle-spinner>
-                      <span class="ml-3">{{loaded}}</span>
-                    </div>
-                  </div>
-                </va-item-section>
-
-              </va-item>
-              <div slot="body">
-                <div v-if="downloadOptions.download.status == 'downloading'" class="row flex sm12 xl12 md12 xs12">
-                  <div class="row flex sm12 xl12 md12 xs12">
-                    <div class="flex-center spinner-box mt-4 mb-5">
-                      <fulfilling-bouncing-circle-spinner
-                        :animation-duration="3000"
-                        :color="'#6c7fee'"
-                        :size="60"
-                      >
-                      </fulfilling-bouncing-circle-spinner>
-                    </div>
-                  </div>
-                </div>
-                <div v-else>
-                  <div class="mb-5">
-                    <va-item class="flex sm12 xl12 md12 xs12 mr-1 pa-0">
-                      <va-icon
-                        class="flex sm1 xl1 md1 xs1 start "
-                        name="glyphicon glyphicon-filter"
-                        size="1.0rem"
-                        :fixedWidth = "Boolean('true')"
-                      />
-                      <div class="flex sm11 xl11 md11 xs11 row">
-                        <div v-for="(item,index) in downloadOptions.channel" :key="item.channel" class="filter-button">
-                          <va-button
-                            class="mx-1 px-1"
-                            v-if="item.checked"
-                            @click="channelUnchecked(index,downloadOptions.metaPath)"
-                            small
-                          >
-                            {{item.alias}}
-                          </va-button>
-                          <va-button
-                            class="mx-1 px-1"
-                            v-else
-                            @click="channelChecked(index,downloadOptions.metaPath)"
-                            small outline
-                          >
-                            {{item.alias}}
-                          </va-button>
-                        </div>
-                      </div>
-                    </va-item>
-                  </div>
-                  <div class="mb-5">
-                    <va-item class="flex sm12 xl12 md12 xs12 pa-0">
-                      <va-icon
-                        class="flex sm1 xl1 md1 xs1 mr-4"
-                        :fixedWidth="true"
-                        name="va-icon glyphicon glyphicon-time"
-                        size="1.0rem"
-                      />
-                      <div class="flex">
-                        <va-slider
-                          class="flex sm11 xl11 md11 xs11 filter-button"
-                          value-visible
-                          range
-                          v-model="downloadOptions.timeRange"
-                          @click.native="timeRangeChange(downloadOptions.timeRange,downloadOptions.metaPath)"
-                          @mouseup.native="timeRangeChange(downloadOptions.timeRange,downloadOptions.metaPath)"
-                          @mouseleave.native="timeRangeChange(downloadOptions.timeRange,downloadOptions.metaPath)"
-                          @touchend.native="timeRangeChange(downloadOptions.timeRange,downloadOptions.metaPath)"
-                          :min="downloadOptions.minTime"
-                          :max="downloadOptions.maxTime"
-                        />
-                        <span> {{ transTime(downloadOptions.timeRange) }} </span>
-                      </div>
-                    </va-item>
-                  </div>
-                </div>
-              </div>
-            </va-collapse>
-          </va-accordion>
-          <va-list-separator v-if="i < downloadOptionsList.length - 1" :key="'separator' + downloadOptions.filename" />
-        </template>
+    <div class="row flex sm12 xl12 md12 xs12" style="height: 100vh;">
+      <div class="flex-center spinner-box mt-4 mb-5">
+        <fulfilling-bouncing-circle-spinner
+          :animation-duration="3000"
+          :color="'#6c7fee'"
+          :size="60"
+        >
+        </fulfilling-bouncing-circle-spinner>
      </div>
-    </va-modal>
+    </div>
  </div>
 </template>

 <script>
-import { file } from '../../data/file/File'
-import { download } from '../../data/download/Download'
-import { exportData } from '../../data/export/export'
+import api from '@/data/api/index'
+import types from '@/store/modules/download/types'
+import { mapActions, mapMutations } from 'vuex'
 import { FulfillingBouncingCircleSpinner } from 'epic-spinners'
+import { mapFields } from 'vuex-map-fields'
+import newDownload from '@/factories/file/downloadFactory'
+import newChannel from '@/factories/file/channelFactory'

 export default {
  name: 'Download',
@@ -146,377 +29,17 @@ export default {
  },
  data: () => {
    return {
-      showDownload: false,
      controllerList: [],
-      downloadList: [],
-      downloadListRecord: [],
-      downloadOptionsList: [],
-      // downloadInfo: {
-      //   metaPath: '',
-      //   previousPath: '',
-      //   filenameWithType: '',
-      //   filename: '',
-      //   channel: [],
-      //   timeRange: [0, 0],
-      //   minTime: 0,
-      //   maxTime: 0,
-      //   status: 'idle',
-      //   device: '',
-      // },
-      currentlyDownloadInfo: {
-        metaPath: '',
-        previousPath: '',
-        filenameWithType: '',
-        filename: '',
-        channel: [],
-        timeRange: [0, 0],
-        minTime: 0,
-        maxTime: 0,
-        download: {
-          status: 'idle',
-          rate: 0,
-        },
-        device: '',
-      },
-      estimatedTime: 0,
-      fileSegmentIndex: 0,
-      fileSegmentMax: 0,
-      totoalFileSize: 0,
-      loadingPercent: 0,
-      loadTime: 0,
-      interval: null,
-      data: '',
    }
  },
  computed: {
-    // transTime (min,max) {
-    //   return this.getTimeInFormat(min) + ' - ' + this.getTimeInFormat(max)
-    // },
-    loaded () {
-      return this.loadingPercent + '%'
-    },
+    ...mapFields('download', [
+      'metaList',
+      'downloadInfo',
+      'metaInfo',
+    ]),
  },
-  // mqtt: {
-  //   async '+/file_segment/+' (data, topic) {
-  //     console.log('file_segment')
-  //     console.log(String.fromCharCode.apply(null, data))
-  //     // console.log(navigator.connection.downlink)
-  //     // console.log(this.fileNum)
-  //     // console.log(this.downloadOptionsList.length)
-  //     // console.log(JSON.parse(String.fromCharCode.apply(null, data)).data.file_size)
-
-  //     if (this.downloadOptionsList.length > 0) {
-  //       await download.updateFileSegmentInfo(String.fromCharCode.apply(null, data))
-  //       this.fileSegmentMax = download.getFileSegmentMaxIndex()
-  //       this.checkFileSegmentGetOrNot()
-  //     }
-  //   },
-  //   async '+/file_segment_get/+' (data, topic) {
-  //     console.log('file_segment_get')
-  //     console.log(JSON.parse(new TextDecoder('utf-8').decode(data)))
-  //     if (this.downloadOptionsList.length > 0) {
-  //       const segmentData = atob(JSON.parse(new TextDecoder('utf-8').decode(data)).data.segment)
-  //       this.data += segmentData
-
-  //       this.fileSegmentIndex += 1
-  //       this.checkFileSegmentGetOrNot()
-  //     }
-  //   },
-  // },
  methods: {
-    transTime (timeRange) {
-      return this.getTimeInFormat(timeRange[0]) + ' - ' + this.getTimeInFormat(timeRange[1])
-    },
-    notify (name) {
-      this.showToast(`done ${name}`, {
-        position: 'bottom-right',
-      })
-    },
-    showDownloadModal: function () {
-      this.showDownload = true
-    },
-    channelChecked: function (channelIndex, path) {
-      download.getDownloadOptions(path).channel[channelIndex].checked = true
-      this.refresh()
-    },
-    channelUnchecked: function (channelIndex, path) {
-      download.getDownloadOptions(path).channel[channelIndex].checked = false
-      this.refresh()
-    },
-    getTimeInFormat: function (time) {
-      if (time < 60) {
-        const second = time
-        return `${second}s`
-      } else if (time < 3600) {
-        const second = time % 60
-        const minute = parseInt(time / 60)
-        return `${minute}m${second}s`
-      } else {
-        const hour = parseInt(time / 3600)
-        const hourRemain = time % 3600
-        const minute = parseInt(hourRemain / 60)
-        const second = hourRemain % 60
-        return `${hour}h${minute}m${second}s`
-      }
-    },
-    getCurrentFullPathName: function () {
-      return this.currentlyDownloadInfo.previousPath + '/' + this.currentlyDownloadInfo.filenameWithType
-    },
-    downloading: async function (info) {
-      this.$emit('download')
-    },
-    addDownloadTask: async function (info) {
-      this.downloading()
-      console.log('download')
-      console.time()
-      const rawData = await download.rawByParentChannels(info.id, info.channels)
-      console.timeEnd()
-      exportData.exportCSV(info, rawData)
-      this.downloading()
-    },
-    _addDownloadTask: function (downloadPath) {
-      if (Array.isArray(downloadPath)) {
-        downloadPath.forEach(path => {
-          this.downloadList.push(path.path)
-          this.updateDownloadInfo(path.path)
-        })
-      } else {
-        this.downloadList.push(downloadPath)
-        this.updateDownloadInfo(downloadPath)
-      }
-      this.confirmDownload()
-    },
-    refresh: function () {
-      this.downloadOptionsList = download.getDownloadOptionsList()
-      console.log(this.downloadOptionsList)
-    },
-    confirmDownload: function (path) {
-      console.log('confirmDownload')
-      console.log(download.getDownloadOptionsList())
-      console.log(download.isFileDownloading())
-      console.log(download.downloadTaskRemain())
-      if (!download.isFileDownloading() && download.downloadTaskRemain()) {
-        const downloadOptionsIndex = download.getDownloadOptionsList().findIndex(downloadInfo => downloadInfo.metaPath === path)
-        // this.downloadBlockList[downloadInfoIndex].status = 'downloading'
-        this.currentlyDownloadInfo = download.getDownloadOptionsList()[downloadOptionsIndex]
-        this.currentlyDownloadInfo.download.status = 'downloading'
-        console.log(this.currentlyDownloadInfo)
-        console.log(download.getDownloadOptionsList())
-
-        download.updateDownloadSubFileList(
-          this.currentlyDownloadInfo.metaPath,
-          this.currentlyDownloadInfo.channel,
-          this.currentlyDownloadInfo.timeRange,
-        )
-        this.calculateFileSize(this.currentlyDownloadInfo.metaPath)
-        console.log('getactualsize')
-        this.subfileListRemain()
-      }
-      // if (this.downloadList.length > 0 && this.currentlyDownloadInfo.status === 'idle') {
-      //   this.showDownload()
-      //   this.updateDownloadSubFileList(this.downloadList[0])
-      // } else {
-      //   /* TODO If file downloading then waiting */
-      //   console.log('no download task or file downloading')
-      // }
-    },
-    _confirmDownload: function () {
-      console.log('confirmDownload')
-      console.log(download.getDownloadOptionsList())
-      // if (this.downloadList.length > 0 && this.currentlyDownloadInfo.status === 'idle') {
-      //   this.showDownload()
-      //   this.updateDownloadSubFileList(this.downloadList[0])
-      // } else {
-      //   /* TODO If file downloading then waiting */
-      //   console.log('no download task or file downloading')
-      // }
-    },
-    downloadAllSubFileList: async function (path) {
-      this.currentlyDownloadInfo = this.downloadInfo
-      download.downloadAllSubFileList(path)
-      this.subfileListRemain()
-    },
-    // updateDownloadInfo: function (path) {
-    //   console.log(path)
-    //   const metaInfo = file.getMetaInfo(path)
-    //   const downloadInfoIndex = this.downloadBlockList.findIndex(downloadInfo => downloadInfo.metaPath === path)
-
-    //   if (downloadInfoIndex === -1) {
-    //     this.downloadInfo.library = metaInfo.configuration._LIBRARY_
-    //     this.downloadInfo.channel = metaInfo.channel.map(ch => {
-    //       let channel = ''
-    //       if (this.downloadInfo.library.includes('Elite')) {
-    //         channel = (ch === 0) ? 'current' : (ch === 1) ? 'voltage' : (ch === 2) ? 'resistance' : ''
-    //       } else {
-    //         channel = 'channel' + ch
-    //       }
-    //       return {
-    //         alias: channel,
-    //         channel: ch,
-    //         checked: true,
-    //       }
-    //     })
-
-    //     this.downloadInfo.metaPath = path
-    //     this.downloadInfo.previousPath = path.split('/').slice(0, -1).join('/')
-    //     this.downloadInfo.filename = path.split(/[\/.]+/).slice(0, -1).pop()
-    //     this.downloadInfo.minTime = parseInt([...new Set(metaInfo['start-time'])][0] / 1000)
-    //     this.downloadInfo.maxTime = parseInt(metaInfo.time_duration / 1000)
-    //     this.downloadInfo.timeRange = [this.downloadInfo.minTime, this.downloadInfo.maxTime]
-    //     this.downloadInfo.status = 'idle'
-    //     this.downloadBlockList.push(JSON.parse(JSON.stringify(this.downloadInfo)))
-    //   } else {
-    //     for (var item in this.downloadInfo) {
-    //       this.downloadInfo[item] = this.downloadBlockList[downloadInfoIndex][item]
-    //     }
-    //   }
-    // },
-    updatecurrentlyDownloadInfo: function () {
-      const downloadInfoIndex = this.downloadBlockList.findIndex(downloadInfo => downloadInfo.metaPath === this.currentlyDownloadInfo.metaPath)
-      if (downloadInfoIndex !== -1) {
-        for (var item in this.downloadBlockList[downloadInfoIndex]) {
-          this.downloadBlockList[downloadInfoIndex][item] = this.currentlyDownloadInfo[item]
-        }
-      }
-    },
-    updateMetaDownloadInfo: function () {
-      download.updateDownloadSubFileList(
-        this.currentlyDownloadInfo.metaPath,
-        this.currentlyDownloadInfo.channel,
-        this.currentlyDownloadInfo.timeRange,
-      )
-    },
-    updateDownloadSubFileList: function (path) {
-      console.log('updateDownloadSubFileList')
-      const downloadOptionsIndex = this.downloadBlockList.findIndex(downloadInfo => downloadInfo.metaPath === path)
-      this.downloadBlockList[downloadOptionsIndex].status = 'downloading'
-      this.currentlyDownloadInfo = this.downloadBlockList[downloadOptionsIndex]
-      this.updatecurrentlyDownloadInfo()
-
-      download.updateDownloadSubFileList(
-        this.currentlyDownloadInfo.metaPath,
-        this.currentlyDownloadInfo.channel,
-        this.currentlyDownloadInfo.timeRange,
-      )
-      this.subfileListRemain()
-    },
-    _updateDownloadSubFileList: function (path) {
-      console.log(path)
-      console.log(this.downloadInfo)
-      const downloadOptionsIndex = this.downloadBlockList.findIndex(downloadInfo => downloadInfo.metaPath === path)
-      this.downloadBlockList[downloadOptionsIndex].status = 'downloading'
-      this.currentlyDownloadInfo = this.downloadBlockList[downloadOptionsIndex]
-      // this.updatecurrentlyDownloadInfo()
-
-      download.updateDownloadSubFileList(
-        this.currentlyDownloadInfo.metaPath,
-        this.currentlyDownloadInfo.channel,
-        this.currentlyDownloadInfo.timeRange,
-      )
-      this.subfileListRemain()
-    },
-    subfileListRemain: function () {
-      console.log('subfileListRemain')
-      if (download.checkDownloadSubFileList(this.currentlyDownloadInfo.metaPath)) {
-        this.currentlyDownloadInfo.filenameWithType = download.getFirstSubfile(this.currentlyDownloadInfo.metaPath)
-        this.mqttPub('tommy_test_user', JSON.stringify({
-          header: 'file_segment/0',
-          method: 'new',
-          path: this.getCurrentFullPathName(),
-        }))
-      } else {
-        this.loadingPercent = 100
-        console.log(this.currentlyDownloadInfo.filenameWithType + ' download complete')
-        console.log(performance.now())
-        this.exportCSV()
-        this.test(this.downloadDone)
-        // this.currentlyDownloadInfo.status = this.currentlyDownloadInfo.status = 'idle'
-        // this.updatecurrentlyDownloadInfo()
-        // this.loadingPercent = 0
-      }
-    },
-    checkFileSegmentGetOrNot: function () {
-      console.log('checkFileSegmentGetOrNot')
-      if (this.fileSegmentIndex >= this.fileSegmentMax) {
-        const subfile = file.shiftDownloadSubFileList(this.currentlyDownloadInfo.metaPath)
-        file.pushDownloadData(this.currentlyDownloadInfo.metaPath, subfile, this.data)
-
-        this.data = ''
-        this.fileSegmentIndex = 0
-        this.subfileListRemain()
-      } else {
-        this.mqttPub('tommy_test_user', JSON.stringify({
-          header: 'file_segment_get/0',
-          segment: this.fileSegmentIndex,
-          path: this.getCurrentFullPathName(),
-        }))
-      }
-    },
-    exportCSV: function () {
-      exportData.exportCSV(this.currentlyDownloadInfo)
-    },
-    exportTXT: function () {
-    },
-    timeRangeChange: function (timeRange, path) {
-      download.getDownloadOptions(path).timeRange = timeRange
-      this.refresh()
-    },
-    calculateFileSize: function () {
-      this.totoalFileSize = file.getFileSize(this.currentlyDownloadInfo.metaPath)
-      // const allSubfile = download.getAllSubfile(this.currentlyDownloadInfo.metaPath)
-      // this.fileNum = allSubfile.length
-      const downlinkSpeed = this.getNetSpeed('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAABTVBMVEX////qQzU0qFNChfT7vAU/g/RZlPU5gPT7uQCxyPqXufn/vQDpNCLqQTMwp1D7uADpOCfqPS4fo0bpMiD8wADpLxwopUv0paD1q6b86ObpOiv4/Pn+9/b4xcH2ubX1r6rsXVIre/NwvoOf0qvO6NQzqUm/4cf5zMn739zrSz398O/sVEjvdWz2t7PvenP4ycb7wir96Lf+8tb8zFH93pj+9eH//PD92Yvw9v7+7cP80Xb95q6pxPnq9u1PsmigvvlunvaJyZiGrvjD1vvyl5HtamHoJgzwhH3zmpTtXlLvenHuYSzygCL2mxjsUzDwcSf0jx34phH8z2DxfVHX5P38x0KHvnDOtiGjsjJ0rkLhuRW4tCnS4PyMsDtZq0it2bhmmvbO5OE1noBft3U1pWA/jNc8lLk5nJNBieSSy58+j8t5wIo6mKY2o25FrmBHQXgmAAAIJUlEQVR4nO2b2V/bRhCAhbADxJLQYQvwgcE2PsAhEHK0SUxigoGkTdMj6ZXDTdw2JbT+/x9r+QDZllYra8da85vvKU/yfszszO5IEQQEQRAEQRAEQRAEQRAEQRAEQRAEQRAEQRAEQRDWpLfXSplbqysWq9n1Unk7HfaSmJFey6ycNipGwpDUAZKRSMxt7B6vl7fDXl5QyqvVHdVQk5o8N4osa0nJqDSOSzNrmc7sVlRVk8fl7J4dTbmRXQt7sf5JZ6onkkPknC3VxE52tiJZPtUMjcru0lI1dkthL5uaTMNI0kVvOJLGRnYmCmx2R/IXPpukVFnh3nG9IvkPn81R1bJhKxC5vWME8evHMRO2hitr1URQv65jospp81jRkgz8LJLaStgyDpSfqywC2ENWN7gL48rJpAXUGe3kVthKQ2w3DKZ+c9ZuPOWocZQqrHagHY4yNRuoBbqjaZyc444D90A35AQPmzFdlYD8uorht410Q4UTnJON0A3TOxA15pLE6nUXvOYRlI3wI9gAFZRCFxReQBaZufAjKBwDtgkeioyQZX4UtcFDIyz5PqrJsqYlk2oymdQ8hqhc7MHtih9Ba+4rVTaqp6fHZ2fHp7sNaxDuPk3lQVCo+iijmmQ0zjJr9ncx6e3Syq6WcBk6crAHhVXqTSirJ7sZ53l2unQsGQ6R5GAPCuUT2vCpz28RL7K3q+pIIDlo9B026EYWmlT1vuGVT1X707jYg8IKVauXjQbdDbZctd0wuYjgGtU7peTcOvUTM/KgcPFQZDqnNYo6Khu7fh6ZftENo8yHYCnhLajN+R3NZzsFh489KAg73jk6yZisXNE4EVz3boXG7iSjzrUKH4KC93EtcTzZkzmZAD9a/obsJ0tnYa8xEKm9SPxboqHEwZkrCPuLkUj8JSFRpdOwlxiQg0iH+PJ3boJqNewVBuTOYqSrGH/lLKjtcFIuJuZhz7Dj+L1jldHKYa8wIKnIJfEfHDJVoj+Kcsr+sk1xvG0kZ30T9uvMleNI25DV2fo2zYH7y5FhxZdDhgbfH/vQsL8YGVG0tw15J+z1BefHUcNIPPLqsvsbt8NeX2BSo35DbUPbCHt9wbkzFsJe2+iHkN/P0ai562gYiS9abUPeCHt5DDhwFOy3DZWT62sQ7u+5GVq3DY2bz3sm555zkvYUl38Ke3kM2F92N4wsPqJ8ytKNwLyGMnxAiGFk+T6t4WY0IJtLUIYPSYZ7tE9ZWpgPyMJNKMM3pCR9MD3D6FMgwftxUpLuT89wfh7KkMk2ZGG4CWR4j1RK49SPYWH4FYzh1yTDN1M1BGoXjwhZuvhwqobvYAxdzt09Q+pSysJw4VkIhnevvSHtmY2NIdChhnRom7Lh42tv+AQNJ4OjfRiG4XRraRiG0+2HQJWGnzMNVLcgnksPpmoI1PH5uVtAGXJ0PwQ6efNzx4e6PXEzpwG7AXMzawObYrCalwaftUWhDIkz72XqmffmAg0kwxtQhqT3FrH4z5RPeXeThiOC4cIRlCHh3VPsF0Wpsfyt14QgQh3aBPf3h7HYr6Jo5ln+FGm3QjV8wfXsHYv8Joqicsjyp46i7oZgzcLtPX7sd0W00IsMf4qwDcGG+oLLtxixt2IPpcXul95tuvuBvZixGP+eJhZ5Lw5gGMQj0jYEuv92GfsmKrb34VJQVNrMfmiBtA2Bzt1dRr9r6zQJ0YbeZPQ7pEoanYcrNMJIv+g2iSF0Rj2RVGZAt+Hwwa3XJIZQckx+hXh0Bd2GQ9V00CSGg8gkT28QduH8AtiXGD0ub1Cxtw6CIpOz2xPi7QPs2N2n3/RjsfcOft16mgr6E69JhRTwQ4wBB70M/eAs2DmeBu77xBwFT9JeSxxpEiNbsR7sB0jN3oKNBom98SYxohjokrFEOK/Ng1fSLo/GmwRDxWceEQS8V1whElI0aKI+I1aZTrsHu97bKepehqKem6yiegnCnkmvOPQMYqeiTtIXH296CEb/YO3iTME7iJ1M9n+V8qqinRDCzS+GyZkUivqFv0z9OO8pCDdGHKXmnaZWpio+wpi60D/d8FIEHEGNkqfIUyuMrQLd81J50RS3/vyLrDitXdiFotjQO9bybd16nmL+TVQEe+XkuCiqIHYdD5vk/Vi4UMzB32vrc9S9mi48nY5bH7o87TnquaKLZKpwruj2dNj67x/XMEancZyx0aKopzbJ1nmxVrN5pmq14nnL1EefoihfXBShPk9wpdam24qDlZu6Lh7mLur183r9Itc6FHXddLxDb/3rmKnA4xknaPr+WIDMHopC+PNsfXLqjNPOUYumf0U6ttrjbWNqp5kh6lCKytZo24B7ZUiG5vQ2GVuf5+2bcXrHtRFSfgqqT0V72wAecxMVD8EUTeXL5TwDfvpEUvTVM3wxaBvRKR64HRXBothpG91MhfvPeJSKcHuxd9sIW7CjmINqGt22Eb6gANgXLcWPYdt1aepA9UZRKK/Q4BREkM1otpl+hRSIWgsgUyedugKRZ52pSrD3HwDU2HZGU+RlC9rIk259/lDMOlcZOqCWY5Sq+iGHAexROGTgaJqsvssBoSgGdDTNcy4T1EYzQBwVU6nz0wPdKbbGpoR0fno7Pwt+FoW64jeQiuk+OeaSVDHnMhF10Zud8F3RkRSt2aiHXMdObDVnT69PoZlrm7qzpzUg1s12Ll+YpeR0IFUr5i9abd2iP/M2u/9ut+r5Ym3G7a5IpWqFYrOZt2g2i4VCLXVt3BAEQRAEQRAEQRAEQRAEQRAEQRAEQRAEQRAE4Yf/AZmODCZml4YgAAAAAElFTkSuQmCC', 3)
-      // this.totoalFileSize = (allSubfile.length) * 1000000
-      console.log(downlinkSpeed)
-      console.log(this.totoalFileSize)
-      this.estimatedTime = this.totoalFileSize / (downlinkSpeed * 1024)
-      if (this.totoalFileSize >= 1 * 1024 * 1024) {
-        console.log('size big')
-        this.estimatedTime = this.estimatedTime * 10
-      }
-      console.log(this.estimatedTime)
-      this.loadTime = parseInt((this.estimatedTime / 1000) % 60) * 100
-      console.log(this.loadTime)
-      this.doProgress()
-      // allSubfile.forEach(subfile => {
-      //   console.log(subfile)
-      //   this.currentlyDownloadInfo.filenameWithType = subfile
-      //   this.mqttPub('tommy_test_user', JSON.stringify({
-      //     header: 'file_segment/0',
-      //     method: 'new',
-      //     path: this.getCurrentFullPathName(),
-      //   }))
-      // })
-    },
-    doProgress () {
-      const step = this.estimatedTime / 100 * 1000
-      this.interval = setInterval(() => {
-        if (this.loadingPercent >= 99) {
-          console.log('complete')
-          clearInterval(this.interval)
-          this.estimatedTime = 0
-        } else {
-          this.loadingPercent++
-        }
-      }, step)
-    },
-    getNetSpeed (url, times) {
-      const connection = window.navigator.connection
-      if (connection && connection.downlink) {
-        return connection.downlink * 1024 / 8
-      }
-    },
-    test: async function (fn) {
-      return await setTimeout(async function () {
-        await fn()
-      }, 1000)
-    },
-    downloadDone: function () {
-      download.getDownloadOptionsList().shift()
-      this.loadingPercent = 0
-      this.refresh()
-      this.confirmDownload()
-    },
    getControllerList: async function () {
      const update = async () => {
        this.controllerList.push({
@@ -529,43 +52,131 @@ export default {
      }
      await update()
    },
-    mqttPub: function (topic, mes) {
-      this.$mqtt.publish(topic, mes)
-    },
-    mqttSub: function (val) {
-      this.$mqtt.subscribe(val)
-    },
-    mqttUnSub: function (val) {
-      this.$mqtt.unsubscribe(val)
-    },
-    pageMqttSub: function () {
-      this.controllerList.forEach(controller => {
-        // this.mqttSub(controller.id + '/broadcast')
-        this.mqttSub(controller.id + '/file_meta_info/+')
-        this.mqttSub(controller.id + '/file_segment/+')
-        this.mqttSub(controller.id + '/file_segment_get/+')
-      })
-    },
-    pageMqttUnSub: function () {
-      this.controllerList.forEach(controller => {
-        // this.mqttUnSub(controller.id + '/broadcast')
-        this.mqttUnSub(controller.id + '/file_meta_info/+')
-        this.mqttUnSub(controller.id + '/file_segment/+')
-        this.mqttUnSub(controller.id + '/file_segment_get/+')
+    notify (name) {
+      this.showToast(`done ${name}`, {
+        position: 'bottom-right',
      })
    },
+    ...mapActions('download',
+      [
+        types.raw.rawDataByID,
+        types.export.setHeader,
+        types.export.setTitle,
+        types.export.setData,
+        types.downloadStream.writerClose,
+        types.downloadStream.setDownloadStream,
+      ],
+    ),
+    ...mapMutations('download',
+      [
+        types.download.setSampleRate,
+        types.download.setdownloadIdList,
+      ],
+    ),
+  },
+  watch: {
  },
-  // watch: {
-  //   loadingPercent(val) {
-  //     if (val >= 100) {
-  //       console.log('complete');
-  //       clearInterval(this.interval)
-  //     }
-  //   }
-  // },
  async mounted () {
    await this.getControllerList()
-    this.pageMqttSub()
+    // TODO authorization
+    const format = this.$route.params.format
+    this.metaList = this.$route.params.metaList.split('-')
+
+    while (this.metaList.length !== 0) {
+      let meta
+      const metaID = this.metaList.pop()
+      const ret = await api.meta.getByID(metaID)
+
+      if (ret.status === 200) {
+        meta = ret.data[0]
+      }
+      if (meta !== undefined) {
+        this.metaInfo = meta
+        const channelArray = JSON.parse(this.metaInfo.channels)
+        const channelList = []
+
+        if (meta.device.library_name.indexOf('Neulive') >= 0) {
+          if (channelArray.some(el => el >= 256)) {
+            channelList.push(channelArray.filter(el => el < 256))
+            channelList.push(channelArray.filter(el => (el >= 256 && el <= 259)))
+          } else {
+            channelList.push(channelArray)
+          }
+        } else if (meta.device.library_name.indexOf('Elite') >= 0) {
+          channelList.push(channelArray)
+        }
+        while (channelList.length > 0) {
+          this.downloadInfo = newDownload()
+          this.downloadInfo.channel = channelList.pop()
+
+          // download format
+          this.downloadInfo.format = format
+
+          // download device and filename
+          if (meta.device.library_name.indexOf('Neulive') >= 0) {
+            this.downloadInfo.device = [meta.device.library_name.slice(0, 7), meta.device.library_name.slice(7)]
+            if (this.downloadInfo.channel.some(el => el >= 256 && el <= 259)) {
+              this.downloadInfo.filename = meta.name + '-accerlate-' + format
+              this.downloadInfo.size = parseInt(parseInt(meta.size) / 78)
+            } else {
+              this.downloadInfo.filename = meta.name + '-' + format
+              this.downloadInfo.size = parseInt(meta.size)
+            }
+          } else if (meta.device.library_name.indexOf('Elite') >= 0) {
+            this.downloadInfo.device = [meta.device.library_name.slice(0, 5), meta.device.library_name.slice(5)]
+            this.downloadInfo.filename = meta.name + '-' + format
+            this.downloadInfo.size = parseInt(meta.size)
+          }
+
+          // init
+
+          // get sampleRate && downloadList
+          for (const channel of this.downloadInfo.channel) {
+            this.downloadInfo.channelInfo[channel] = newChannel()
+            this.setSampleRateDownload({ channel: channel })
+            this.setdownloadIdListDownload({ channel: channel })
+          }
+
+          // create writer
+          this.setDownloadStream()
+
+          console.log(this.downloadInfo)
+          console.log(this.metaInfo)
+
+          // set Header
+          if (this.downloadInfo.format !== 'csv-edf') {
+            this.setHeaderExport()
+          }
+          this.setTitleExport()
+
+          // start download data
+          let rowIndex = 0
+
+          while (rowIndex < this.downloadInfo.maxRows) {
+            for (const channel of this.downloadInfo.channel) {
+              for (const idx in this.downloadInfo.channelInfo[channel].downloadIDList) {
+                const _idx = parseInt(idx)
+                const rawID = this.downloadInfo.channelInfo[channel].downloadIDList[_idx][rowIndex]
+                // console.log(rowIndex, _idx, rawID)
+                if (rawID !== undefined) {
+                  await this.rawDataByIDRaw({
+                    channel: channel,
+                    rawID: rawID,
+                    idx: _idx,
+                    api: api,
+                  })
+                }
+              }
+            }
+            this.setDataExport({ last: (rowIndex === this.downloadInfo.maxRows - 1) })
+            rowIndex += 1
+          }
+          this.writerCloseDownloadStream()
+        }
+      }
+    }
+    await new Promise(resolve => setTimeout(resolve, 2000)) // sleep
+    window.close()
  },
  destroyed () {
    this.pageMqttUnSub()
@@ -0,0 +1,589 @@
+<template>
+  <div>
+    <va-modal
+      class="flex sm12 xl12 md12 xs12 pa-0 ma-0"
+      v-model="showDownload"
+      size="small"
+      :hideDefaultActions="true"
+      :mobileFullscreen="false"
+    >
+      <template slot="header">
+        <div class="row mb-2">
+          <va-icon name="fa fa-download mr-3 " color="primary"/>
+          <h5 class="mt-0 mb-0">{{'Download'}}</h5>
+        </div>
+      </template>
+
+      <div class="downloadOptionsList">
+        <template v-for="(downloadOptions, i) in downloadOptionsList">
+          <va-accordion :key="downloadOptions.filename">
+            <va-collapse>
+              <va-item :key="downloadOptions.filename" slot="header" clickable>
+                <va-item-section avatar>
+                  <va-item-label>
+                    {{ downloadOptions.filename }}
+                  </va-item-label>
+                </va-item-section>
+
+                <va-item-section>
+                  <!-- <va-item-label>
+                {{ downloadInfo.minTime }}
+              </va-item-label>
+
+              <va-item-label caption>
+                {{ downloadInfo.maxTime }}
+              </va-item-label> -->
+                </va-item-section>
+
+                <va-item-section v-if="downloadOptions.download.status == 'idle'" side>
+                  <va-icon name="fa fa-play" color="gray" @click.native.stop="confirmDownload(downloadOptions.metaPath)"/>
+                </va-item-section>
+                <va-item-section v-else side class="md4 offset--md8">
+                  <div class="row flex sm12 xl12 md12 xs12">
+                    <div class="flex-center spinner-box">
+                      <fulfilling-bouncing-circle-spinner
+                        :animation-duration="3000"
+                        :color="'#6c7fee'"
+                        :size="20"
+                      >
+                      </fulfilling-bouncing-circle-spinner>
+                      <span class="ml-3">{{loaded}}</span>
+                    </div>
+                  </div>
+                </va-item-section>
+
+              </va-item>
+              <div slot="body">
+                <div v-if="downloadOptions.download.status == 'downloading'" class="row flex sm12 xl12 md12 xs12">
+                  <div class="row flex sm12 xl12 md12 xs12">
+                    <div class="flex-center spinner-box mt-4 mb-5">
+                      <fulfilling-bouncing-circle-spinner
+                        :animation-duration="3000"
+                        :color="'#6c7fee'"
+                        :size="60"
+                      >
+                      </fulfilling-bouncing-circle-spinner>
+                    </div>
+                  </div>
+                </div>
+                <div v-else>
+                  <div class="mb-5">
+                    <va-item class="flex sm12 xl12 md12 xs12 mr-1 pa-0">
+                      <va-icon
+                        class="flex sm1 xl1 md1 xs1 start "
+                        name="glyphicon glyphicon-filter"
+                        size="1.0rem"
+                        :fixedWidth = "Boolean('true')"
+                      />
+                      <div class="flex sm11 xl11 md11 xs11 row">
+                        <div v-for="(item,index) in downloadOptions.channel" :key="item.channel" class="filter-button">
+                          <va-button
+                            class="mx-1 px-1"
+                            v-if="item.checked"
+                            @click="channelUnchecked(index,downloadOptions.metaPath)"
+                            small
+                          >
+                            {{item.alias}}
+                          </va-button>
+                          <va-button
+                            class="mx-1 px-1"
+                            v-else
+                            @click="channelChecked(index,downloadOptions.metaPath)"
+                            small outline
+                          >
+                            {{item.alias}}
+                          </va-button>
+                        </div>
+                      </div>
+                    </va-item>
+                  </div>
+                  <div class="mb-5">
+                    <va-item class="flex sm12 xl12 md12 xs12 pa-0">
+                      <va-icon
+                        class="flex sm1 xl1 md1 xs1 mr-4"
+                        :fixedWidth="true"
+                        name="va-icon glyphicon glyphicon-time"
+                        size="1.0rem"
+                      />
+                      <div class="flex">
+                        <va-slider
+                          class="flex sm11 xl11 md11 xs11 filter-button"
+                          value-visible
+                          range
+                          v-model="downloadOptions.timeRange"
+                          @click.native="timeRangeChange(downloadOptions.timeRange,downloadOptions.metaPath)"
+                          @mouseup.native="timeRangeChange(downloadOptions.timeRange,downloadOptions.metaPath)"
+                          @mouseleave.native="timeRangeChange(downloadOptions.timeRange,downloadOptions.metaPath)"
+                          @touchend.native="timeRangeChange(downloadOptions.timeRange,downloadOptions.metaPath)"
+                          :min="downloadOptions.minTime"
+                          :max="downloadOptions.maxTime"
+                        />
+                        <span> {{ transTime(downloadOptions.timeRange) }} </span>
+                      </div>
+                    </va-item>
+                  </div>
+                </div>
+              </div>
+            </va-collapse>
+          </va-accordion>
+          <va-list-separator v-if="i < downloadOptionsList.length - 1" :key="'separator' + downloadOptions.filename" />
+        </template>
+      </div>
+    </va-modal>
+  </div>
+</template>
+
+<script>
+import { file } from '../../data/file/File'
+import { download } from '../../data/download/Download'
+import { exportData } from '../../data/export/export'
+import { FulfillingBouncingCircleSpinner } from 'epic-spinners'
+
+export default {
+  name: 'Download',
+  components: {
+    FulfillingBouncingCircleSpinner,
+  },
+  data: () => {
+    return {
+      showDownload: false,
+      controllerList: [],
+      downloadList: [],
+      downloadListRecord: [],
+      downloadOptionsList: [],
+      // downloadInfo: {
+      //   metaPath: '',
+      //   previousPath: '',
+      //   filenameWithType: '',
+      //   filename: '',
+      //   channel: [],
+      //   timeRange: [0, 0],
+      //   minTime: 0,
+      //   maxTime: 0,
+      //   status: 'idle',
+      //   device: '',
+      // },
+      currentlyDownloadInfo: {
+        metaPath: '',
+        previousPath: '',
+        filenameWithType: '',
+        filename: '',
+        channel: [],
+        timeRange: [0, 0],
+        minTime: 0,
+        maxTime: 0,
+        download: {
+          status: 'idle',
+          rate: 0,
+        },
+        device: '',
+      },
+      estimatedTime: 0,
+      fileSegmentIndex: 0,
+      fileSegmentMax: 0,
+      totoalFileSize: 0,
+      loadingPercent: 0,
+      loadTime: 0,
+      interval: null,
+      data: '',
+    }
+  },
+  computed: {
+    // transTime (min,max) {
+    //   return this.getTimeInFormat(min) + ' - ' + this.getTimeInFormat(max)
+    // },
+    loaded () {
+      return this.loadingPercent + '%'
+    },
+  },
+  // mqtt: {
+  //   async '+/file_segment/+' (data, topic) {
+  //     console.log('file_segment')
+  //     console.log(String.fromCharCode.apply(null, data))
+  //     // console.log(navigator.connection.downlink)
+  //     // console.log(this.fileNum)
+  //     // console.log(this.downloadOptionsList.length)
+  //     // console.log(JSON.parse(String.fromCharCode.apply(null, data)).data.file_size)
+
+  //     if (this.downloadOptionsList.length > 0) {
+  //       await download.updateFileSegmentInfo(String.fromCharCode.apply(null, data))
+  //       this.fileSegmentMax = download.getFileSegmentMaxIndex()
+  //       this.checkFileSegmentGetOrNot()
+  //     }
+  //   },
+  //   async '+/file_segment_get/+' (data, topic) {
+  //     console.log('file_segment_get')
+  //     console.log(JSON.parse(new TextDecoder('utf-8').decode(data)))
+  //     if (this.downloadOptionsList.length > 0) {
+  //       const segmentData = atob(JSON.parse(new TextDecoder('utf-8').decode(data)).data.segment)
+  //       this.data += segmentData
+
+  //       this.fileSegmentIndex += 1
+  //       this.checkFileSegmentGetOrNot()
+  //     }
+  //   },
+  // },
+  methods: {
+    transTime (timeRange) {
+      return this.getTimeInFormat(timeRange[0]) + ' - ' + this.getTimeInFormat(timeRange[1])
+    },
+    notify (name) {
+      this.showToast(`done ${name}`, {
+        position: 'bottom-right',
+      })
+    },
+    showDownloadModal: function () {
+      this.showDownload = true
+    },
+    channelChecked: function (channelIndex, path) {
+      download.getDownloadOptions(path).channel[channelIndex].checked = true
+      this.refresh()
+    },
+    channelUnchecked: function (channelIndex, path) {
+      download.getDownloadOptions(path).channel[channelIndex].checked = false
+      this.refresh()
+    },
+    getTimeInFormat: function (time) {
+      if (time < 60) {
+        const second = time
+        return `${second}s`
+      } else if (time < 3600) {
+        const second = time % 60
+        const minute = parseInt(time / 60)
+        return `${minute}m${second}s`
+      } else {
+        const hour = parseInt(time / 3600)
+        const hourRemain = time % 3600
+        const minute = parseInt(hourRemain / 60)
+        const second = hourRemain % 60
+        return `${hour}h${minute}m${second}s`
+      }
+    },
+    getCurrentFullPathName: function () {
+      return this.currentlyDownloadInfo.previousPath + '/' + this.currentlyDownloadInfo.filenameWithType
+    },
+    downloading: async function (info) {
+      this.$emit('download')
+    },
+    addDownloadTask: async function (info) {
+      this.downloading()
+      /*
+      ** download all
+      */
+      if (parseInt(info.time_duration) < 18e8) {
+        const rawData = await download.getAllRawDatas(info)
+        exportData.exportCSV(info, rawData)
+      } else {
+        for (const channelID in info.raw_data) {
+          const rawDataIDList = info.raw_data[channelID]
+
+          while (rawDataIDList.length > 1000) {
+            const _list = rawDataIDList.splice(0, 1000)
+            const rawData = await download.getIndexRawDatas(info, channelID, _list)
+            exportData.exportCSV(info, rawData)
+          }
+          const rawData = await download.getIndexRawDatas(info, channelID, rawDataIDList)
+          exportData.exportCSV(info, rawData, channelID)
+          rawData[channelID].length = 0
+          // const rawData = await download.getAllRawDatas(info)
+          // console.timeEnd('download')
+        }
+      }
+      // console.time('download')
+      // const rawData = await download.getAllRawDatas(info)
+      // console.timeEnd('download')
+      // exportData.exportCSV(info, rawData)
+
+      /*
+      ** download split
+      */
+      this.downloading()
+    },
+    _addDownloadTask: function (downloadPath) {
+      if (Array.isArray(downloadPath)) {
+        downloadPath.forEach(path => {
+          this.downloadList.push(path.path)
+          this.updateDownloadInfo(path.path)
+        })
+      } else {
+        this.downloadList.push(downloadPath)
+        this.updateDownloadInfo(downloadPath)
+      }
+      this.confirmDownload()
+    },
+    refresh: function () {
+      this.downloadOptionsList = download.getDownloadOptionsList()
+      console.log(this.downloadOptionsList)
+    },
+    confirmDownload: function (path) {
+      console.log('confirmDownload')
+      console.log(download.getDownloadOptionsList())
+      console.log(download.isFileDownloading())
+      console.log(download.downloadTaskRemain())
+      if (!download.isFileDownloading() && download.downloadTaskRemain()) {
+        const downloadOptionsIndex = download.getDownloadOptionsList().findIndex(downloadInfo => downloadInfo.metaPath === path)
+        // this.downloadBlockList[downloadInfoIndex].status = 'downloading'
+        this.currentlyDownloadInfo = download.getDownloadOptionsList()[downloadOptionsIndex]
+        this.currentlyDownloadInfo.download.status = 'downloading'
+        console.log(this.currentlyDownloadInfo)
+        console.log(download.getDownloadOptionsList())
+
+        download.updateDownloadSubFileList(
+          this.currentlyDownloadInfo.metaPath,
+          this.currentlyDownloadInfo.channel,
+          this.currentlyDownloadInfo.timeRange,
+        )
+        this.calculateFileSize(this.currentlyDownloadInfo.metaPath)
+        console.log('getactualsize')
+        this.subfileListRemain()
+      }
+      // if (this.downloadList.length > 0 && this.currentlyDownloadInfo.status === 'idle') {
+      //   this.showDownload()
+      //   this.updateDownloadSubFileList(this.downloadList[0])
+      // } else {
+      //   /* TODO If file downloading then waiting */
+      //   console.log('no download task or file downloading')
+      // }
+    },
+    _confirmDownload: function () {
+      console.log('confirmDownload')
+      console.log(download.getDownloadOptionsList())
+      // if (this.downloadList.length > 0 && this.currentlyDownloadInfo.status === 'idle') {
+      //   this.showDownload()
+      //   this.updateDownloadSubFileList(this.downloadList[0])
+      // } else {
+      //   /* TODO If file downloading then waiting */
+      //   console.log('no download task or file downloading')
+      // }
+    },
+    downloadAllSubFileList: async function (path) {
+      this.currentlyDownloadInfo = this.downloadInfo
+      download.downloadAllSubFileList(path)
+      this.subfileListRemain()
+    },
+    // updateDownloadInfo: function (path) {
+    //   console.log(path)
+    //   const metaInfo = file.getMetaInfo(path)
+    //   const downloadInfoIndex = this.downloadBlockList.findIndex(downloadInfo => downloadInfo.metaPath === path)
+
+    //   if (downloadInfoIndex === -1) {
+    //     this.downloadInfo.library = metaInfo.configuration._LIBRARY_
+    //     this.downloadInfo.channel = metaInfo.channel.map(ch => {
+    //       let channel = ''
+    //       if (this.downloadInfo.library.includes('Elite')) {
+    //         channel = (ch === 0) ? 'current' : (ch === 1) ? 'voltage' : (ch === 2) ? 'resistance' : ''
+    //       } else {
+    //         channel = 'channel' + ch
+    //       }
+    //       return {
+    //         alias: channel,
+    //         channel: ch,
+    //         checked: true,
+    //       }
+    //     })
+
+    //     this.downloadInfo.metaPath = path
+    //     this.downloadInfo.previousPath = path.split('/').slice(0, -1).join('/')
+    //     this.downloadInfo.filename = path.split(/[\/.]+/).slice(0, -1).pop()
+    //     this.downloadInfo.minTime = parseInt([...new Set(metaInfo['start-time'])][0] / 1000)
+    //     this.downloadInfo.maxTime = parseInt(metaInfo.time_duration / 1000)
+    //     this.downloadInfo.timeRange = [this.downloadInfo.minTime, this.downloadInfo.maxTime]
+    //     this.downloadInfo.status = 'idle'
+    //     this.downloadBlockList.push(JSON.parse(JSON.stringify(this.downloadInfo)))
+    //   } else {
+    //     for (var item in this.downloadInfo) {
+    //       this.downloadInfo[item] = this.downloadBlockList[downloadInfoIndex][item]
+    //     }
+    //   }
+    // },
+    updatecurrentlyDownloadInfo: function () {
+      const downloadInfoIndex = this.downloadBlockList.findIndex(downloadInfo => downloadInfo.metaPath === this.currentlyDownloadInfo.metaPath)
+      if (downloadInfoIndex !== -1) {
+        for (var item in this.downloadBlockList[downloadInfoIndex]) {
+          this.downloadBlockList[downloadInfoIndex][item] = this.currentlyDownloadInfo[item]
+        }
+      }
+    },
+    updateMetaDownloadInfo: function () {
+      download.updateDownloadSubFileList(
+        this.currentlyDownloadInfo.metaPath,
+        this.currentlyDownloadInfo.channel,
+        this.currentlyDownloadInfo.timeRange,
+      )
+    },
+    updateDownloadSubFileList: function (path) {
+      console.log('updateDownloadSubFileList')
+      const downloadOptionsIndex = this.downloadBlockList.findIndex(downloadInfo => downloadInfo.metaPath === path)
+      this.downloadBlockList[downloadOptionsIndex].status = 'downloading'
+      this.currentlyDownloadInfo = this.downloadBlockList[downloadOptionsIndex]
+      this.updatecurrentlyDownloadInfo()
+
+      download.updateDownloadSubFileList(
+        this.currentlyDownloadInfo.metaPath,
+        this.currentlyDownloadInfo.channel,
+        this.currentlyDownloadInfo.timeRange,
+      )
+      this.subfileListRemain()
+    },
+    _updateDownloadSubFileList: function (path) {
+      console.log(path)
+      console.log(this.downloadInfo)
+      const downloadOptionsIndex = this.downloadBlockList.findIndex(downloadInfo => downloadInfo.metaPath === path)
+      this.downloadBlockList[downloadOptionsIndex].status = 'downloading'
+      this.currentlyDownloadInfo = this.downloadBlockList[downloadOptionsIndex]
+      // this.updatecurrentlyDownloadInfo()
+
+      download.updateDownloadSubFileList(
+        this.currentlyDownloadInfo.metaPath,
+        this.currentlyDownloadInfo.channel,
+        this.currentlyDownloadInfo.timeRange,
+      )
+      this.subfileListRemain()
+    },
+    subfileListRemain: function () {
+      console.log('subfileListRemain')
+      if (download.checkDownloadSubFileList(this.currentlyDownloadInfo.metaPath)) {
+        this.currentlyDownloadInfo.filenameWithType = download.getFirstSubfile(this.currentlyDownloadInfo.metaPath)
+      } else {
+        this.loadingPercent = 100
+        console.log(this.currentlyDownloadInfo.filenameWithType + ' download complete')
+        console.log(performance.now())
+        this.exportCSV()
+        this.test(this.downloadDone)
+        // this.currentlyDownloadInfo.status = this.currentlyDownloadInfo.status = 'idle'
+        // this.updatecurrentlyDownloadInfo()
+        // this.loadingPercent = 0
+      }
+    },
+    checkFileSegmentGetOrNot: function () {
+      console.log('checkFileSegmentGetOrNot')
+      if (this.fileSegmentIndex >= this.fileSegmentMax) {
+        const subfile = file.shiftDownloadSubFileList(this.currentlyDownloadInfo.metaPath)
+        file.pushDownloadData(this.currentlyDownloadInfo.metaPath, subfile, this.data)
+
+        this.data = ''
+        this.fileSegmentIndex = 0
+        this.subfileListRemain()
+      } else {
+      }
+    },
+    exportCSV: function () {
+      exportData.exportCSV(this.currentlyDownloadInfo)
+    },
+    exportTXT: function () {
+    },
+    timeRangeChange: function (timeRange, path) {
+      download.getDownloadOptions(path).timeRange = timeRange
+      this.refresh()
+    },
+    calculateFileSize: function () {
+      this.totoalFileSize = file.getFileSize(this.currentlyDownloadInfo.metaPath)
+      // const allSubfile = download.getAllSubfile(this.currentlyDownloadInfo.metaPath)
+      // this.fileNum = allSubfile.length
+      const downlinkSpeed = this.getNetSpeed('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAABTVBMVEX////qQzU0qFNChfT7vAU/g/RZlPU5gPT7uQCxyPqXufn/vQDpNCLqQTMwp1D7uADpOCfqPS4fo0bpMiD8wADpLxwopUv0paD1q6b86ObpOiv4/Pn+9/b4xcH2ubX1r6rsXVIre/NwvoOf0qvO6NQzqUm/4cf5zMn739zrSz398O/sVEjvdWz2t7PvenP4ycb7wir96Lf+8tb8zFH93pj+9eH//PD92Yvw9v7+7cP80Xb95q6pxPnq9u1PsmigvvlunvaJyZiGrvjD1vvyl5HtamHoJgzwhH3zmpTtXlLvenHuYSzygCL2mxjsUzDwcSf0jx34phH8z2DxfVHX5P38x0KHvnDOtiGjsjJ0rkLhuRW4tCnS4PyMsDtZq0it2bhmmvbO5OE1noBft3U1pWA/jNc8lLk5nJNBieSSy58+j8t5wIo6mKY2o25FrmBHQXgmAAAIJUlEQVR4nO2b2V/bRhCAhbADxJLQYQvwgcE2PsAhEHK0SUxigoGkTdMj6ZXDTdw2JbT+/x9r+QDZllYra8da85vvKU/yfszszO5IEQQEQRAEQRAEQRAEQRAEQRAEQRAEQRAEQRAEQRDWpLfXSplbqysWq9n1Unk7HfaSmJFey6ycNipGwpDUAZKRSMxt7B6vl7fDXl5QyqvVHdVQk5o8N4osa0nJqDSOSzNrmc7sVlRVk8fl7J4dTbmRXQt7sf5JZ6onkkPknC3VxE52tiJZPtUMjcru0lI1dkthL5uaTMNI0kVvOJLGRnYmCmx2R/IXPpukVFnh3nG9IvkPn81R1bJhKxC5vWME8evHMRO2hitr1URQv65jospp81jRkgz8LJLaStgyDpSfqywC2ENWN7gL48rJpAXUGe3kVthKQ2w3DKZ+c9ZuPOWocZQqrHagHY4yNRuoBbqjaZyc444D90A35AQPmzFdlYD8uorht410Q4UTnJON0A3TOxA15pLE6nUXvOYRlI3wI9gAFZRCFxReQBaZufAjKBwDtgkeioyQZX4UtcFDIyz5PqrJsqYlk2oymdQ8hqhc7MHtih9Ba+4rVTaqp6fHZ2fHp7sNaxDuPk3lQVCo+iijmmQ0zjJr9ncx6e3Syq6WcBk6crAHhVXqTSirJ7sZ53l2unQsGQ6R5GAPCuUT2vCpz28RL7K3q+pIIDlo9B026EYWmlT1vuGVT1X707jYg8IKVauXjQbdDbZctd0wuYjgGtU7peTcOvUTM/KgcPFQZDqnNYo6Khu7fh6ZftENo8yHYCnhLajN+R3NZzsFh489KAg73jk6yZisXNE4EVz3boXG7iSjzrUKH4KC93EtcTzZkzmZAD9a/obsJ0tnYa8xEKm9SPxboqHEwZkrCPuLkUj8JSFRpdOwlxiQg0iH+PJ3boJqNewVBuTOYqSrGH/lLKjtcFIuJuZhz7Dj+L1jldHKYa8wIKnIJfEfHDJVoj+Kcsr+sk1xvG0kZ30T9uvMleNI25DV2fo2zYH7y5FhxZdDhgbfH/vQsL8YGVG0tw15J+z1BefHUcNIPPLqsvsbt8NeX2BSo35DbUPbCHt9wbkzFsJe2+iHkN/P0ai562gYiS9abUPeCHt5DDhwFOy3DZWT62sQ7u+5GVq3DY2bz3sm555zkvYUl38Ke3kM2F92N4wsPqJ8ytKNwLyGMnxAiGFk+T6t4WY0IJtLUIYPSYZ7tE9ZWpgPyMJNKMM3pCR9MD3D6FMgwftxUpLuT89wfh7KkMk2ZGG4CWR4j1RK49SPYWH4FYzh1yTDN1M1BGoXjwhZuvhwqobvYAxdzt09Q+pSysJw4VkIhnevvSHtmY2NIdChhnRom7Lh42tv+AQNJ4OjfRiG4XRraRiG0+2HQJWGnzMNVLcgnksPpmoI1PH5uVtAGXJ0PwQ6efNzx4e6PXEzpwG7AXMzawObYrCalwaftUWhDIkz72XqmffmAg0kwxtQhqT3FrH4z5RPeXeThiOC4cIRlCHh3VPsF0Wpsfyt14QgQh3aBPf3h7HYr6Jo5ln+FGm3QjV8wfXsHYv8Joqicsjyp46i7oZgzcLtPX7sd0W00IsMf4qwDcGG+oLLtxixt2IPpcXul95tuvuBvZixGP+eJhZ5Lw5gGMQj0jYEuv92GfsmKrb34VJQVNrMfmiBtA2Bzt1dRr9r6zQJ0YbeZPQ7pEoanYcrNMJIv+g2iSF0Rj2RVGZAt+Hwwa3XJIZQckx+hXh0Bd2GQ9V00CSGg8gkT28QduH8AtiXGD0ub1Cxtw6CIpOz2xPi7QPs2N2n3/RjsfcOft16mgr6E69JhRTwQ4wBB70M/eAs2DmeBu77xBwFT9JeSxxpEiNbsR7sB0jN3oKNBom98SYxohjokrFEOK/Ng1fSLo/GmwRDxWceEQS8V1whElI0aKI+I1aZTrsHu97bKepehqKem6yiegnCnkmvOPQMYqeiTtIXH296CEb/YO3iTME7iJ1M9n+V8qqinRDCzS+GyZkUivqFv0z9OO8pCDdGHKXmnaZWpio+wpi60D/d8FIEHEGNkqfIUyuMrQLd81J50RS3/vyLrDitXdiFotjQO9bybd16nmL+TVQEe+XkuCiqIHYdD5vk/Vi4UMzB32vrc9S9mi48nY5bH7o87TnquaKLZKpwruj2dNj67x/XMEancZyx0aKopzbJ1nmxVrN5pmq14nnL1EefoihfXBShPk9wpdam24qDlZu6Lh7mLur183r9Itc6FHXddLxDb/3rmKnA4xknaPr+WIDMHopC+PNsfXLqjNPOUYumf0U6ttrjbWNqp5kh6lCKytZo24B7ZUiG5vQ2GVuf5+2bcXrHtRFSfgqqT0V72wAecxMVD8EUTeXL5TwDfvpEUvTVM3wxaBvRKR64HRXBothpG91MhfvPeJSKcHuxd9sIW7CjmINqGt22Eb6gANgXLcWPYdt1aepA9UZRKK/Q4BREkM1otpl+hRSIWgsgUyedugKRZ52pSrD3HwDU2HZGU+RlC9rIk259/lDMOlcZOqCWY5Sq+iGHAexROGTgaJqsvssBoSgGdDTNcy4T1EYzQBwVU6nz0wPdKbbGpoR0fno7Pwt+FoW64jeQiuk+OeaSVDHnMhF10Zud8F3RkRSt2aiHXMdObDVnT69PoZlrm7qzpzUg1s12Ll+YpeR0IFUr5i9abd2iP/M2u/9ut+r5Ym3G7a5IpWqFYrOZt2g2i4VCLXVt3BAEQRAEQRAEQRAEQRAEQRAEQRAEQRAEQRAE4Yf/AZmODCZml4YgAAAAAElFTkSuQmCC', 3)
+      // this.totoalFileSize = (allSubfile.length) * 1000000
+      console.log(downlinkSpeed)
+      console.log(this.totoalFileSize)
+      this.estimatedTime = this.totoalFileSize / (downlinkSpeed * 1024)
+      if (this.totoalFileSize >= 1 * 1024 * 1024) {
+        console.log('size big')
+        this.estimatedTime = this.estimatedTime * 10
+      }
+      console.log(this.estimatedTime)
+      this.loadTime = parseInt((this.estimatedTime / 1000) % 60) * 100
+      console.log(this.loadTime)
+      this.doProgress()
+      // allSubfile.forEach(subfile => {
+      //   console.log(subfile)
+      //   this.currentlyDownloadInfo.filenameWithType = subfile
+      // })
+    },
+    doProgress () {
+      const step = this.estimatedTime / 100 * 1000
+      this.interval = setInterval(() => {
+        if (this.loadingPercent >= 99) {
+          console.log('complete')
+          clearInterval(this.interval)
+          this.estimatedTime = 0
+        } else {
+          this.loadingPercent++
+        }
+      }, step)
+    },
+    getNetSpeed (url, times) {
+      const connection = window.navigator.connection
+      if (connection && connection.downlink) {
+        return connection.downlink * 1024 / 8
+      }
+    },
+    test: async function (fn) {
+      return await setTimeout(async function () {
+        await fn()
+      }, 1000)
+    },
+    downloadDone: function () {
+      download.getDownloadOptionsList().shift()
+      this.loadingPercent = 0
+      this.refresh()
+      this.confirmDownload()
+    },
+    getControllerList: async function () {
+      const update = async () => {
+        this.controllerList.push({
+          id: 'tommy_test',
+          mac: '',
+          status: 'loading',
+          isScan: true,
+          files: [],
+        })
+      }
+      await update()
+    },
+    mqttPub: function (topic, mes) {
+      this.$mqtt.publish(topic, mes)
+    },
+    mqttSub: function (val) {
+      this.$mqtt.subscribe(val)
+    },
+    mqttUnSub: function (val) {
+      this.$mqtt.unsubscribe(val)
+    },
+    pageMqttSub: function () {
+      this.controllerList.forEach(controller => {
+        // this.mqttSub(controller.id + '/broadcast')
+        this.mqttSub(controller.id + '/file_meta_info/+')
+        this.mqttSub(controller.id + '/file_segment/+')
+        this.mqttSub(controller.id + '/file_segment_get/+')
+      })
+    },
+    pageMqttUnSub: function () {
+      this.controllerList.forEach(controller => {
+        // this.mqttUnSub(controller.id + '/broadcast')
+        this.mqttUnSub(controller.id + '/file_meta_info/+')
+        this.mqttUnSub(controller.id + '/file_segment/+')
+        this.mqttUnSub(controller.id + '/file_segment_get/+')
+      })
+    },
+  },
+  // watch: {
+  //   loadingPercent(val) {
+  //     if (val >= 100) {
+  //       console.log('complete');
+  //       clearInterval(this.interval)
+  //     }
+  //   }
+  // },
+  async mounted () {
+    await this.getControllerList()
+    this.pageMqttSub()
+  },
+  destroyed () {
+    this.pageMqttUnSub()
+  },
+}
+</script>
+<style>
+  .filter-button {
+    text-align: center;
+  }
+</style>
@@ -1,42 +1,29 @@
 <template>
  <div>
-    <div class="row">
-      <div class="flex md12 xl12 xs12 sm12" :style="AreaStyle">
-        <file-table :ref="'file_ref'" @download="addDownloadTask"/>
-      </div>
-      <div class="flex md12 xl12 xs12 sm12" :style="AreaStyle">
-        <download :ref="'download_ref'" @download="downloadingFile"></download>
-      </div>
-    </div>
+    <file-table :ref="'file_ref'"/>
  </div>
 </template>

 <script>
 import FileTable from './file-table/FileTable.vue'
-import Download from '../download/Download.vue'
+// import Download from '../download/Download.vue'
 import { file } from '../../data/file/File'
 import api from '../../data/api/index'

 export default {
  components: {
    FileTable,
-    Download,
  },
  data () {
    return {
      controllerList: [],
-      AreaStyle: {
-        height: 'auto',
-        'overflow-y': 'hidden',
-        'overflow-x': 'hidden',
-      },
    }
  },
  methods: {
    getControllerList: async function () {
      const update = async () => {
        this.controllerList.push({
-          id: 'BPS_FF',
+          id: 'tommy_test',
          mac: '',
          status: 'loading',
          isScan: true,
@@ -71,15 +58,15 @@ export default {
        this.$refs.file_ref.currentPathIndex = file.getPathMaxIndex()
        file.clearFileList()

-        const initCollection = await api.getCollectionsByName('admin')
+        const initCollection = await api.collection.getByName('admin')

        if (initCollection.data !== 0) {
          file.addPath(initCollection.data[0])
          this.$refs.file_ref.currentPathIndex = file.getPathMaxIndex()
          this.$refs.file_ref.currentInfo = initCollection.data[0]

-          const folders = await api.getCollectionsByParent('folder', initCollection.data[0].id)
-          const files = await api.getFolderMetaFileByParent('folder', initCollection.data[0].id)
+          const folders = await api.collection.getByParent('folder', initCollection.data[0].id)
+          const files = await api.meta.getByParent('folder', initCollection.data[0].id)
          file.updateFileList(folders)
          file.updateFileList(files)

@@ -92,7 +79,8 @@ export default {
  },
  async mounted () {
    await this.getControllerList()
-    await api.getJwtData()
+    await api.auth.getJwtData()
+    console.log(await api.meta.getByParentWithLimit('folder', 2, 5, 0, 'DESC'))
    this.pageMqttSub()
    this.pageInitPub()
  },
@@ -103,5 +91,3 @@ export default {
  },
 }
 </script>
-<style lang="scss">
-</style>
@@ -45,23 +45,33 @@
      v-model="showModal.deleteFile"
      size="small"
      :title="'DELETE'"
-      :message="`Delete File ${deleteInfo.name}.`"
+      :message="`Delete File ${deleteInfo.name}?`"
      :okText=" $t('modal.confirm') "
      @ok="deleteFile()"
    >
    </va-modal>

+    <va-modal
+      v-model="showModal.deleteMultiFiles"
+      size="small"
+      :title="'DELETE'"
+      :message="'Delete select files?'"
+      :okText=" $t('modal.confirm') "
+      @ok="deleteMultiFiles()"
+    >
+    </va-modal>
+
    <va-card class="flex sm12 xl12 md12 xs12">
-      <!-- <template slot="header">
+      <template slot="header">
        <div class="flex sm12 xl12 md12 xs12" style="text-align: end;">
-          <va-button class="" color="success" v-if="selected.length" @click="showrefs" target="_blank" small>
+          <!-- <va-button class="" color="success" v-if="selected.length" @click="downloadSelected" target="_blank" small>
            DOWNLOAD
-          </va-button>
-          <va-button class="" color="danger" v-if="selected.length" target="_blank" small>
+          </va-button> -->
+          <va-button class="" color="danger" v-if="selected.length" @click="deleteMultiFilesConfirm" target="_blank" small>
            DELETE
          </va-button>
        </div>
-      </template> -->
+      </template>

      <!-- SearchField & perPageSelect-->
      <div class="row align--center">
@@ -137,9 +147,9 @@
        v-else
        :ref="'datatable_ref'"
      >
-        <!-- <template slot="select" slot-scope="props">
+        <template slot="select" slot-scope="props">
          <va-checkbox :value="props.rowData.checked" @input="select(props.rowData)"/>
-        </template> -->
+        </template>
        <template slot="name" slot-scope="props">
          <va-icon
            :name="(props.rowData.type==='folder')?'fa fa-folder':'fa fa-file'"
@@ -163,17 +173,23 @@
          {{transDeviceInfo(props.rowData.configuration)}}
        </template>
        <template slot="actions" slot-scope="props" >
-          <va-popover :message="`download ${props.rowData.name}`" placement="top">
-            <va-button flat small color="gray" icon="fa fa-download" v-if="props.rowData.type !== 'folder'" @click.stop="download(props.rowData)"/>
+          <va-popover :message="`download ${props.rowData.name} in csv format`" placement="top">
+            <va-button flat small color="gray" icon="fa fa-download" v-if="props.rowData.type !== 'folder' && props.rowData.device.library_name.indexOf('Neulive') >= 0" @click.stop="downloadCsv(props.rowData)"/>
+          </va-popover>
+          <va-popover :message="`download ${props.rowData.name} in excel format`" placement="top">
+            <va-button flat small color="gray" icon="fa fa-download" v-if="props.rowData.type !== 'folder'" @click.stop="downloadExcel(props.rowData)"/>
          </va-popover>
          <va-popover :message="`replay ${props.rowData.name}`" placement="top">
            <va-button flat small color="gray" icon="fa fa-eye" v-if="props.rowData.type !== 'folder'" @click.stop="replay(props.rowData)"/>
          </va-popover>
+          <va-popover :message="`spike ${props.rowData.name}`" placement="top">
+            <va-button flat small color="gray" icon="fa fa-filter" v-if="props.rowData.type !== 'folder'" @click.stop="spike(props.rowData)"/>
+          </va-popover>
          <va-popover :message="`edit ${props.rowData.name}`" placement="top">
            <va-button flat small color="gray" icon="fa fa-pencil" @click.stop="editFileConfirm(props.rowData)"/>
          </va-popover>
          <va-popover :message="`delete ${props.rowData.name}`" placement="top">
-            <va-button flat small color="gray" icon="fa fa-trash" @click.stop="deleteFileConfirm(props.rowData.path, props.rowData.name)"/>
+            <va-button flat small color="gray" icon="fa fa-trash" @click.stop="deleteFileConfirm(props.rowData)"/>
          </va-popover>
        </template>
      </va-data-table>
@@ -195,8 +211,8 @@ export default {
  data () {
    return {
      term: null,
-      perPage: '6',
-      perPageOptions: ['4', '6', '10', '20'],
+      perPage: '160',
+      perPageOptions: ['20', '40', '80', '160'],

      fileLists: [],
      pathLists: [],
@@ -208,6 +224,7 @@ export default {
      showModal: {
        createFolder: false,
        deleteFile: false,
+        deleteMultiFiles: false,
        editFile: false,
      },

@@ -230,6 +247,9 @@ export default {
      deleteInfo: {
        path: '',
        name: '',
+        metaID: '',
+        rawChannelAndIDArrays: [], // list of lists
+        miniChannelAndIDArrays: [], // list of lists
      },

      styleList: {
@@ -243,14 +263,15 @@ export default {
  computed: {
    fields () {
      return [
-        // {
-        //   name: '__slot:select',
-        // },
+        {
+          name: '__slot:select',
+          width: '5%',
+        },
        {
          name: '__slot:name',
          title: 'name',
          sortField: 'name',
-          width: '20%',
+          width: '15%',
          titleClass: 'text-center',
        },
        // {
@@ -292,7 +313,7 @@ export default {
        {
          name: '__slot:actions',
          dataClass: 'text-right',
-          width: '15%',
+          width: '20%',
        },
      ]
    },
@@ -301,7 +322,9 @@ export default {
        return this.fileLists
      }
      return this.fileLists.filter(item => {
-        return item.name.toLowerCase().includes(this.term.toLowerCase())
+        if (item.name !== null) {
+          return item.name.toLowerCase().includes(this.term.toLowerCase())
+        }
      })
    },
    selected () {
@@ -318,7 +341,7 @@ export default {
    // },
    select: function (file) {
      event.stopPropagation()
-      const idx = this.fileLists.findIndex(f => f.name === file.name)
+      const idx = this.fileLists.findIndex(f => f.id === file.id)
      this.fileLists[idx].checked = !this.fileLists[idx].checked
    },
    search: debounce(function (term) {
@@ -350,8 +373,8 @@ export default {
    },

    openFile: async function (info) {
-      this.currentInfo = info
      if (info.type === 'folder') {
+        this.currentInfo = info
        this.loadingFiles = true
        // clear file and add path
        file.clearFileList()
@@ -359,8 +382,8 @@ export default {
        this.currentPathIndex = file.getPathMaxIndex()

        // call getfolder api and update
-        const folders = await api.getCollectionsByParent('folder', info.id)
-        const files = await api.getFolderMetaFileByParent('folder', info.id)
+        const folders = await api.collection.getByParent('folder', info.id)
+        const files = await api.meta.getByParent('folder', info.id)
        file.updateFileList(folders)
        file.updateFileList(files)

@@ -377,9 +400,10 @@ export default {
        file.clearFileList()
        file.slicePathList(index)
        this.currentPathIndex = file.getPathMaxIndex()
+        this.currentInfo = item
        // call getfolder api and update
-        const folders = await api.getCollectionsByParent('folder', item.id)
-        const files = await api.getFolderMetaFileByParent('folder', item.id)
+        const folders = await api.collection.getByParent('folder', item.id)
+        const files = await api.meta.getByParent('folder', item.id)
        file.updateFileList(folders)
        file.updateFileList(files)

@@ -395,11 +419,12 @@ export default {
      this.currentPathIndex = -1

      // call getfolder api and update
-      const initCollection = await api.getCollectionsByName('root')
+      const initCollection = await api.collection.getByParentName('folder', 0, 'root')

-      if (initCollection.data !== 0) {
-        const folders = await api.getCollectionsByParent('folder', initCollection.data[0].id)
-        const files = await api.getFolderMetaFileByParent('folder', initCollection.data[0].id)
+      if (initCollection.data.length === 1) {
+        this.currentInfo = initCollection.data[0]
+        const folders = await api.collection.getByParent('folder', initCollection.data[0].id)
+        const files = await api.meta.getByParent('folder', initCollection.data[0].id)
        file.updateFileList(folders)
        file.updateFileList(files)
        this.fileLists = file.getFileList()
@@ -417,7 +442,7 @@ export default {
        this.setInputFieldError(this.createInfo.errorMessagesAll[0] + ' ' + illegalChar[0], this.createInfo)
      } else {
        // folder name existed
-        const existedFolder = await api.getCollectionsByName(term)
+        const existedFolder = await api.collection.getByParentName(this.currentInfo.type, this.currentInfo.id, term)
        if (existedFolder.data.length === 0) {
          this.setInputFieldSuccess(this.createInfo)
        } else {
@@ -429,17 +454,17 @@ export default {
        this.setInputFieldError(this.createInfo.errorMessagesAll[1], this.createInfo)
      }
      this.createInfo.changedName = term
-    }, 200),
+    }, 250),
    createFolder: async function () {
-      const parent = [].concat((this.pathLists.length === 0) ? 0 : this.pathLists[this.pathLists.length - 1].id)
+      const parent = [].concat((this.pathLists.length === 0) ? this.currentInfo.id : this.pathLists[this.pathLists.length - 1].id)
      const type = 'folder'
-      await api.createCollection({
+      await api.collection.create({
        name: this.createInfo.changedName,
        parent: { [type]: parent },
        type: type,
        size: 0,
      })
-      this.refreshPage()
+      await this.refreshPage()
      this.showToast(`Folder ${this.createInfo.changedName} create.`, {
        position: 'bottom-right',
      })
@@ -458,13 +483,14 @@ export default {
    editFile: async function () {
      // TODO editFile
      if (this.editInfo.type !== 'folder') {
-        await api.updateMetaFile(this.editInfo.info.id, { name: this.editInfo.changedName })
+        await api.meta.update(this.editInfo.info.id, { name: this.editInfo.changedName })
      } else {
      }
-      this.editFileDone()
+      await this.editFileDone()
    },
    checkFileNameValidate: debounce(function (term) {
      const illegalChar = term.match(/[^(\w\-)]+/gm)
+      this.editInfo.changedName = term
      if (term.length === 0) {
        // input text empty
        this.editInfo.error = true
@@ -478,7 +504,13 @@ export default {
        this.editInfo.errorMessages.pop()
        this.editInfo.errorMessages.push(this.editInfo.errorMessagesAll[0] + ' ' + illegalChar[0])
      } else {
-        const existedFile = this.fileLists.filter(file => file.name.replace('/', '') === term)
+        const existedFile = this.fileLists.filter((file) => {
+          if (file.name != null) {
+            return file.name.replace('/', '') === term
+          } else {
+            return false
+          }
+        })
        if (existedFile.length === 0) {
          this.editInfo.error = false
          this.editInfo.success = true
@@ -490,10 +522,12 @@ export default {
          this.editInfo.errorMessages.push(this.editInfo.errorMessagesAll[2])
        }
      }
-      this.editInfo.changedName = term
    }, 200),
-    editFileDone: function () {
-      this.refreshPage()
+    editFileDone: async function () {
+      const tmpCurrentPage = this.$refs.datatable_ref.currentPage
+      await this.refreshPage()
+      this.$refs.datatable_ref.currentPage = tmpCurrentPage
+      this.$refs.datatable_ref.inputPage(tmpCurrentPage)
      this.showToast(`${this.editInfo.info.name} -> ${this.editInfo.changedName}`, {
        position: 'bottom-right',
      })
@@ -507,23 +541,51 @@ export default {
    },
    removeFileFromList: function () {
    },
-    deleteFileConfirm: function (path, name) {
-      this.deleteInfo.path = path
-      this.deleteInfo.name = name
+    fillDeleteInfo (info) {
+      this.deleteInfo.path = info.path
+      this.deleteInfo.name = info.name
+      this.deleteInfo.metaID = info.id
+      this.deleteInfo.rawChannelAndIDArrays = [] // list of lists
+      this.deleteInfo.miniChannelAndIDArrays = [] // list of lists
+      for (const [channel, idArray] of Object.entries(info.raw_data)) {
+        this.deleteInfo.rawChannelAndIDArrays.push([channel, idArray[0]])
+      }
+      for (const [channel, scaleObject] of Object.entries(info.mini_data)) {
+        for (const idArray of Object.values(scaleObject)) {
+          this.deleteInfo.miniChannelAndIDArrays.push([channel, idArray[0]])
+        }
+      }
+    },
+    async deleteSingleFileByDeleteInfo () {
+      await api.meta.update(this.deleteInfo.metaID, { deleted: true })
+      await api.meta.clearDel()
+    },
+    deleteFileConfirm: function (info) {
+      this.fillDeleteInfo(info)
      this.showModal.deleteFile = true
    },
-    deleteFile: function () {
-      // delete editFile
+    deleteFile: async function () {
+      await this.deleteSingleFileByDeleteInfo()
+      await this.deleteFileDone()
    },
-    deleteFileDone: function () {
+    deleteFileDone: async function () {
+      const tmpCurrentPage = this.$refs.datatable_ref.currentPage
      // rebuild table
      this.fileLists = this.fileLists.filter(file => file.name !== this.deleteInfo.name)
-
+      await this.refreshPage()
+      this.$refs.datatable_ref.currentPage = tmpCurrentPage
+      this.$refs.datatable_ref.inputPage(tmpCurrentPage)
      // this.loadingFiles = false
      this.showToast(`deleted ${this.deleteInfo.name}`, {
        position: 'bottom-right',
      })
    },
+    deleteMultiFilesConfirm: function () {
+      this.showModal.deleteMultiFiles = true
+    },
+    deleteMultiFiles: async function () {
+      this.deleteSelected()
+    },
    inputFieldReset: function (info) {
      info.name = ''
      info.changedName = ''
@@ -549,8 +611,8 @@ export default {
        file.clearFileList()

        // call getfolder api and update
-        const folders = await api.getCollectionsByParent('folder', this.currentInfo.id)
-        const files = await api.getFolderMetaFileByParent('folder', this.currentInfo.id)
+        const folders = await api.collection.getByParent('folder', this.currentInfo.id)
+        const files = await api.meta.getByParent('folder', this.currentInfo.id)
        file.updateFileList(folders)
        file.updateFileList(files)

@@ -560,16 +622,58 @@ export default {
      // this.$refs.datatable_ref.refresh()
      // this.$refs.datatable_ref.currentPage = 1
    },
-    showrefs: function () {
-      this.$emit('download', this.selected)
+    // downloadSelected: function () {
+    //   for (let i = 0; i < this.selected.length; i++) {
+    //     const meta = this.selected[i]
+    //     this.downloadCsv(meta)
+    //   }
+    // },
+    async deleteSelected () {
+      for (let i = 0; i < this.selected.length; i++) {
+        const meta = this.selected[i]
+        this.fillDeleteInfo(meta)
+        await this.deleteSingleFileByDeleteInfo()
+        this.showToast(`deleted ${this.deleteInfo.name}`, {
+          position: 'bottom-right',
+        })
+      }
+      const tmpCurrentPage = this.$refs.datatable_ref.currentPage
+      await this.refreshPage()
+      this.$refs.datatable_ref.currentPage = tmpCurrentPage
+      this.$refs.datatable_ref.inputPage(tmpCurrentPage)
    },
-    download: async function (info) {
-      this.$emit('download', info)
+    downloadCsv: async function (meta) {
+      const href = location.href.split('/')[2]
+      if (meta.device.library_name.indexOf('Elite') >= 0) {
+        window.open('http://' + href + '/#/download/csv/' + meta.id)
+      } else if (meta.device.library_name.indexOf('Neulive') >= 0) {
+        window.open('http://' + href + '/#/download/csv/' + meta.id)
+      }
+    },
+    downloadExcel: async function (meta) {
+      const href = location.href.split('/')[2]
+      if (meta.device.library_name.indexOf('Elite') >= 0) {
+        window.open('http://' + href + '/#/download/excel/' + meta.id)
+      } else if (meta.device.library_name.indexOf('Neulive') >= 0) {
+        window.open('http://' + href + '/#/download/csv-edf/' + meta.id)
+      }
    },
    replay: function (meta) {
-      console.log(this.$router)
+      if (meta.device.library_name.includes('Neulive') === true) {
+        // window.open('http://' + location.href.split('/')[2].split(':')[0] + '/#/admin/data-replay/' + meta.id)
+        this.$router.push({
+          path: '/admin/data-replay/' + meta.id,
+        })
+      } else if (meta.device.library_name.includes('Elite') === true) {
+        // window.open('http://' + location.href.split('/')[2].split(':')[0] + '/#/admin/data-replay/elite/' + meta.id)
+        this.$router.push({
+          path: '/admin/data-replay/elite/' + meta.id,
+        })
+      }
+    },
+    spike: function (meta) {
      this.$router.push({
-        path: '/admin/data-replay/' + meta.id,
+        path: '/admin/data-spike/' + meta.id,
      })
    },
  },
@@ -0,0 +1,140 @@
+<template>
+  <div class="controller-info">
+    <div class="row flex">
+      <div
+        class="flex sm12 xl12 md12 xs12 ma-2"
+        v-for="controller in controllers" :key="controller.mac_address"
+      >
+        <va-card
+          style="border: 5px solid #78ceff; border-radius: 30px; font-size: 1.5rem;"
+        >
+          <!-- {{ controller }} -->
+          <va-item :key="controller.device_mac" class="pa-0 ma-0"
+          >
+            <va-item-section avatar class="ml-4 mr-4">
+              <img
+                :src="getImageUrl()"
+                :alt="'BPS-CONTROLLER'"
+                width="200px"
+                height="200px"
+                contain
+              />
+            </va-item-section>
+            <va-item-section class="ml-5 mr-4" >
+              <va-item-label style="font-size: 2rem;">
+                {{ controller.wifi_name }}
+              </va-item-label>
+              <va-item-label>
+                Mac Address :
+                {{ controller.mac_address.toUpperCase() }}
+              </va-item-label>
+              <va-item-label>
+                Build Version : #
+                {{ controller.software_version }}
+              </va-item-label>
+              <va-item-label>
+                Update Time :
+                {{ GLOBAL.dateToStr(controller.updated_at) }}
+              </va-item-label>
+            </va-item-section>
+          </va-item>
+        </va-card>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { mapActions, mapGetters, mapMutations } from 'vuex'
+import api from '@/data/api/index'
+import types from '@/store/modules/setting/types'
+import eliteImgUrl from '@/assets/img/elite_img.png'
+
+export default {
+  name: 'controller-info',
+  components: {
+  },
+  // props: {
+  //   data: {
+  //     type: Object,
+  //     default: function () {
+  //       return {}
+  //     },
+  //   },
+  //   cardclass: {
+  //     type: Array,
+  //     default: function () {
+  //       return ['xs12', 'md12', 'xl12', 'sm12']
+  //     },
+  //   },
+  //   cardheight: {
+  //     type: String,
+  //     default: '82vh',
+  //   },
+  //   cardwidth: {
+  //     type: String,
+  //     default: 'auto',
+  //   },
+  // },
+  created () {
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+    controllers () {
+      return this.getAllController()
+    },
+  },
+  watch: {
+  },
+  methods: {
+    getImageUrl () {
+      return eliteImgUrl
+    },
+    ...mapActions('setting', [types.controller.init]),
+    ...mapMutations('setting', [types.controller.set, types.controller.updateByIndex]),
+    ...mapGetters('setting', [types.controller.getAll]),
+  },
+  async mounted () {
+    this.initController({ api: api })
+    console.log(this.getAllController())
+  },
+  destroyed () {
+  },
+}
+
+</script>
+<style lang="scss">
+  .area-style-setting-controller {
+    height: auto;
+    overflow-y: hidden;
+    overflow-x: hidden;
+
+    @include media-breakpoint-only(xl) {
+      overflow-y: scroll;
+      overflow-x: hidden;
+    }
+  }
+
+  .drag-flex {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+
+  .font-small {
+    color: rgb(113, 186, 255);
+    font-size: 16px;
+  }
+
+  .center-medium {
+    text-align: center;
+    font-size: 20px;
+  }
+
+  .center-large {
+    text-align: center;
+    font-size: 28px;
+  }
+</style>
@@ -0,0 +1,166 @@
+<template>
+  <div class="device-info">
+    <div class="row flex">
+      <draggable class="flex d-flex sm12 xl12 md12 xs12" v-model="devicesList" @start="drag=true" @end="drag=false" >
+        <div
+          class="flex d-flex sm12 xl3 md4 xs12 ma-0 area-style-setting-device "
+          v-for="(device, index) in devicesList" :key="device.id"
+        >
+          <va-card
+            :noPadding="true"
+            style="border: 5px solid #78ceff; border-radius: 30px;"
+          >
+            <div class="center-large" >
+              <div class="flex d-flex sm12 xl12 md12 xs12 ">
+                <div class="sm11 xl11 md11 xs11 ml-2" style="text-align: start;">
+                  {{ device.name }}
+                </div>
+                <div class="sm1 xl1 md1 xs1" style="text-align: right;">
+                  <va-icon
+                    name="ion ion-md-close"
+                    class="mr-1"
+                    color="#babfc2"
+                    style="cursor: pointer;"
+                    @click.native.stop="remove(index, device)"
+                  />
+                </div>
+              </div>
+            </div>
+            <div class="center-medium">
+              <p> {{ device.name }} </p>
+            </div>
+            <div class="center-medium">
+              <p> {{ macArrayToString(device.mac_address) }} </p>
+            </div>
+            <div class="mt-4 mb-4" style="text-align: center;">
+              <img
+                :src="getImageUrl(device.library)"
+                :alt="device.name"
+                width="150px"
+                height="100px"
+                contain
+              />
+            </div>
+            <div class="center-medium">
+              <p> {{ device.device_version }} </p>
+              <p> {{ timeStampToLocaleTime(device.updated_at) }} </p>
+            </div>
+            <div class="flex sm12 xl12 md12 xs12" style="text-align: center;">
+              <va-button v-if="device.auto_connect" color="success" @click="autoConnect(index, device)">Auto Connect</va-button>
+              <va-button v-if="!device.auto_connect" color="#babfc2" @click="autoConnect(index, device)" outline>Auto Connect</va-button>
+              <va-button >User Guide</va-button>
+            </div>
+          </va-card>
+        </div>
+      </draggable>
+    </div>
+  </div>
+</template>
+<script>
+import { mapActions, mapGetters, mapMutations } from 'vuex'
+import { mapFields } from 'vuex-map-fields'
+import api from '@/data/api/index'
+import types from '@/store/modules/setting/types'
+import neuliveImgUrl from '@/assets/img/neulive_img.png'
+import eliteImgUrl from '@/assets/img/elite_img.png'
+import draggable from 'vuedraggable'
+
+export default {
+  name: 'device-info',
+  components: {
+    draggable,
+  },
+  created () {
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+    ...mapFields('setting', [
+      'devicesList',
+    ]),
+    devices: {
+      get () {
+        return this.getAllDevice()
+      },
+      set (deviceList) {
+        this.reorderDevice({ deviceList: deviceList, api: api })
+      },
+    },
+  },
+  watch: {
+  },
+  methods: {
+    macArrayToString: function (macAddress) {
+      return this.GLOBAL.transMac(JSON.parse(macAddress))
+    },
+    timeStampToLocaleTime: function (time) {
+      return this.GLOBAL.dateToStr(time)
+    },
+    getImageUrl: function (libraryName) {
+      if (libraryName !== null) {
+        if (libraryName.indexOf('Neulive') >= 0) {
+          return neuliveImgUrl
+        } else if (libraryName.indexOf('Elite') >= 0) {
+          return eliteImgUrl
+        }
+      }
+      return null
+    },
+    autoConnect: async function (index, device) {
+      device.auto_connect = !device.auto_connect
+      await api.device.updateByID(device.id, { auto_connect: device.auto_connect })
+    },
+    remove (index, device) {
+      console.log('removeDevcie', index, device)
+      this.removeDevice({ id: device.id, index: index, api: api })
+    },
+    ...mapActions('setting', [types.device.init, types.device.remove, types.device.reorder]),
+    ...mapMutations('setting', [types.device.set, types.device.updateByIndex]),
+    ...mapGetters('setting', [types.device.getAll]),
+  },
+  async mounted () {
+    const devices = await api.device.getAll()
+    if (devices.status === 200) {
+      this.devicesList = devices.data
+    }
+  },
+  destroyed () {
+  },
+}
+</script>
+<style lang="scss">
+  .area-style-setting-device {
+    height: auto;
+    overflow-y: hidden;
+    overflow-x: hidden;
+
+    @include media-breakpoint-only(xl) {
+      height: auto;
+      overflow-y: scroll;
+      overflow-x: hidden;
+    }
+  }
+
+  .drag-flex {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+
+  .font-small {
+    color: rgb(113, 186, 255);
+    font-size: 16px;
+  }
+
+  .center-medium {
+    text-align: center;
+    font-size: 20px;
+  }
+
+  .center-large {
+    text-align: center;
+    font-size: 28px;
+  }
+</style>
@@ -0,0 +1,35 @@
+<template>
+  <div class="about">
+    <controller-info/>
+    <device-info/>
+  </div>
+</template>
+<script>
+import DeviceInfo from './deviceInfo.vue'
+import ControllerInfo from './controllerInfo.vue'
+
+export default {
+  name: 'about-content',
+  components: {
+    ControllerInfo,
+    DeviceInfo,
+  },
+  created () {
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+  },
+  watch: {
+  },
+  methods: {
+  },
+  async mounted () {
+  },
+  destroyed () {
+  },
+}
+
+</script>
@@ -21,19 +21,19 @@
    />

    <div class="row row-equal">
-      <div v-if="showDeviceSetting" class="flex md12 xl4 xs12 sm12 area-style">
+      <div v-if="showDeviceSetting" class="flex md12 xl4 xs12 sm12">
        <div class="row">
          <div class="flex sm12 xl12 md12 xs12">
            <task-devices :ref="'devices_ref'" @add="addDevice($event)" @remove="removeDevice($event)" @refreshSetting="refreshChartSetting($event)" class="pa-0" />
          </div>
-          <div class="flex sm12 xl12 md12 xs12">
+          <!-- <div class="flex sm12 xl12 md12 xs12">
            <task-formula :ref="'formula_ref'" @add="addFormula($event)" @remove="removeFormula($event)" class="pa-0" />
-          </div>
+          </div> -->
        </div>

      </div>

-      <div :class="chartAreaClass" class="area-style">
+      <div :class="chartAreaClass">
        <div class="row" >
          <div class="flex sm12 xl12 md12 xs12">
            <div class="flex sm12 xl12 md12 xs12" style="text-align: center;">
@@ -44,19 +44,19 @@
                  <va-icon name="fa fa-gears mr-3" color="primary"/>
                  <h5 class="mt-0 mb-0">CONTROL</h5>
                </template>
-                <va-button class="" v-if="!showDeviceSetting" color="primary" target="_blank" @click="showDeviceSettingClick()" small>
+                <va-button class="no-dark-style-va-button" v-if="!showDeviceSetting" color="primary" target="_blank" @click="showDeviceSettingClick()" small>
                  SHOW DEVICES
                </va-button>
-                <va-button  class="" v-if="showDeviceSetting" color="primary" target="_blank" @click="hideDeviceSettingClick()" small>
+                <va-button  class="no-dark-style-va-button" v-if="showDeviceSetting" color="primary" target="_blank" @click="hideDeviceSettingClick()" small>
                  HIDE DEVICES
                </va-button>
                <va-button class="" color="success" target="_blank" @click="startAllClick()" small>
                  START ALL
                </va-button>
-                <va-button class="" color="danger" target="_blank" @click="stopAllClick()" small>
+                <va-button class="no-dark-style-va-button" color="danger" target="_blank" @click="stopAllClick()" small>
                  STOP ALL
                </va-button>
-                <va-button class="" color="primary" target="_blank" @click.stop="addChart()" small>
+                <va-button class="no-dark-style-va-button" color="primary" target="_blank" @click.stop="addChart()" small>
                  ADD CHART
                </va-button>
              </va-card>
@@ -99,7 +99,8 @@ import { chartData } from '../../../data/task/ChartsManagement'
 import { taskInfo } from '../../../data/task/TaskInfo'
 import CanvasChart from './chart/CanvasChart'
 import TaskDevices from './controller/TaskDevices'
-import TaskFormula from './formula/TaskFormula'
+// import api from '../../../data/api'
+// import TaskFormula from './formula/TaskFormula'

 // TODO change chart data tag format

@@ -108,11 +109,11 @@ export default {
  components: {
    CanvasChart,
    TaskDevices,
-    TaskFormula,
-  },
-  async created () {
-    await taskInfo.updateTaskInfo(this.$route.params.taskID)
+    // TaskFormula,
  },
+  // async created () {
+  //   await taskInfo.updateTaskInfo(this.$route.params.taskID)
+  // },
  data () {
    return {
      // modal
@@ -128,6 +129,10 @@ export default {
      selectChartID: null,
      showDeviceSetting: true,
      chartAreaClass: ['flex', 'xs12', 'sm12', 'md12', 'xl8', 'pa-0'],
+
+      getParmDone: false,
+
+      deviceList: {},
    }
  },
  mqtt: {
@@ -138,13 +143,59 @@ export default {
    async '+/get_device_info/+' (data, topic) {
      await taskInfo.deviceInfo(String.fromCharCode.apply(null, data))
      this.refreshDevicesWindow()
+      this.getParmDone = true
    },
    async '+/device_parameter/+' (data, topic) {
      await taskInfo.deviceParameter(String.fromCharCode.apply(null, data))
      this.refreshDevicesWindow()
    },
+    async '+/device_parameter_value/+' (data, topic) {
+      await taskInfo.deviceParameter(String.fromCharCode.apply(null, data))
+      this.refreshDevicesWindow()
+    },
    async '+/hardware_device/+' (data, topic) {
      await taskInfo.deviceInfo(String.fromCharCode.apply(null, data))
+      // console.log(this.deviceList)
+      // for (const d1 in taskInfo.getTaskInfo().deviceList) {
+      //   if (taskInfo.getTaskInfo().deviceList[d1].info.device_address.length > 0) {
+      //     const addr1 = taskInfo.getTaskInfo().deviceList[d1].info.device_address.join()
+      //     let parameter, content
+      //     for (const d2 in this.deviceList) {
+      //       const addr2 = this.deviceList[d2].info.device_address.join()
+      //       if (addr1 === addr2) {
+      //         console.log(this.deviceList[d2].parameterSet)
+      //         for (const p in this.deviceList[d2].parameterSet) {
+      //           if (p !== 'STIMULATING') {
+      //             if (parameter == null) {
+      //               parameter = p
+      //             } else {
+      //               parameter = parameter + '|' + p
+      //             }
+      //             let c
+      //             if (Array.isArray(this.deviceList[d2].parameterSet[p])) {
+      //               c = '0:' + this.deviceList[d2].parameterSet[p].length + '=' + this.deviceList[d2].parameterSet[p]
+      //             } else {
+      //               c = this.deviceList[d2].parameterSet[p]
+      //             }
+
+      //             if (content == null) {
+      //               content = c
+      //             } else {
+      //               content = content + '|' + c
+      //             }
+      //           }
+      //         }
+      //         console.log('****', parameter, content)
+      //         // this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+      //         //   header: 'device_parameter/0',
+      //         //   device: parseInt(d1),
+      //         //   parameter: parameter,
+      //         //   content: content,
+      //         // }))
+      //       }
+      //     }
+      // }
+      // }
      if (this.$refs.devices_ref != null) {
        await this.$refs.devices_ref.loadingDone()
      }
@@ -152,10 +203,10 @@ export default {
    // listen datastream [ topic: controllerID/data_server/device_data_stream/deviceID/channel ]
    async '+/data_server/device_data_stream/+/+' (data, topic) {
      const topicSplit = topic.split('/')
-      if (!taskInfo.getDeviceInfoByRawID(parseInt(topicSplit[3])).info.isSync) {
-        taskInfo.deviceStart(parseInt(topicSplit[3]))
-        this.$refs.devices_ref.setArchiveSettings()
-        chartData.defaultChartGenerator(taskInfo.getDeviceIDByRaw(parseInt(topicSplit[3])), null, 'device')
+      if (this.getParmDone & !taskInfo.getDeviceInfoByRawID(parseInt(topicSplit[3])).info.isSync) {
+        if (chartData.defaultChartGenerator(taskInfo.getDeviceIDByRaw(parseInt(topicSplit[3])), null, 'device')) {
+          taskInfo.deviceStart(parseInt(topicSplit[3]))
+        }
      }
      dataStreamBuffer.into(String.fromCharCode.apply(null, data), parseInt(topicSplit[3]), (parseInt(topicSplit[4]) + 1))
    },
@@ -182,6 +233,10 @@ export default {
          break
        case 'disconnected':
          taskInfo.deviceDisconnected(mes[1])
+          this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+            header: 'get_device_info/0',
+            device: parseInt(mes[1]),
+          }))
          break
        case 'connected':
          this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
@@ -195,7 +250,12 @@ export default {
          this.showShutdownModal = true
          break
        case 'start':
-          taskInfo.deviceStart(parseInt(mes[1]))
+          if (!taskInfo.getDeviceInfoByRawID(parseInt(parseInt(mes[1]))).info.isSync) {
+            taskInfo.deviceStart(parseInt(mes[1]))
+            if (chartData.defaultChartGenerator(taskInfo.getDeviceIDByRaw(parseInt(parseInt(mes[1]))), null, 'device')) {
+              taskInfo.deviceStart(parseInt(parseInt(mes[1])))
+            }
+          }
          break
        case 'stop':
          if (mes[1] === 'all') {
@@ -207,6 +267,11 @@ export default {
          this.pageToast('The device [' + taskInfo.getDeviceIDByRaw(parseInt(mes[1])) + '] is timeout, please check its status or parameters.')
          break
        case 'device_mission_done':
+          this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+            header: 'device_instruction/0',
+            device: parseInt(mes[1]),
+            instruction: 'interrupt',
+          }))
          this.pageToast('The device [' + taskInfo.getDeviceIDByRaw(parseInt(mes[1])) + '] mission is done.')
          break
        default:
@@ -231,6 +296,7 @@ export default {
      this.mqttSub(id + '/get_device_info_all/+')
      this.mqttSub(id + '/get_device_info/+')
      this.mqttSub(id + '/device_parameter/+')
+      this.mqttSub(id + '/device_parameter_value/+')
    },
    pageMqttUnSub: function (id) {
      for (const device in taskInfo.getTaskInfo().deviceList) {
@@ -241,11 +307,20 @@ export default {
      this.mqttUnSub(id + '/get_device_info_all/+')
      this.mqttUnSub(id + '/get_device_info/+')
      this.mqttUnSub(id + '/device_parameter/+')
+      this.mqttUnSub(id + '/device_parameter_value/+')
    },
    pageInit: async function () {
      if (await this.$refs.devices_ref != null) {
        await this.$refs.devices_ref.loadingStart()
      }
+      // let _parameter, _content
+
+      // this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+      //   header: 'device_parameter/0',
+      //   device: 7,
+      //   parameter: 'RECORDING_CH|AXIS_CH',
+      //   content: '7|1',
+      // }))
      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
        header: 'hardware_device/0',
      }))
@@ -269,9 +344,13 @@ export default {
      }
    },
    refreshDevicesWindow: function () {
+      // console.log(taskInfo.getTaskInfo())
      if (this.$refs.devices_ref != null) {
        this.$refs.devices_ref.refresh()
      }
+      // api.task.update({
+      //   device_config: taskInfo.getTaskInfo().deviceList,
+      // })
    },
    addChart: async function () {
      const defaultID = {}
@@ -367,8 +446,13 @@ export default {
      this.chartAreaClass[3] = 'md12'
      this.chartAreaClass[4] = 'xl12'
    },
-    addDevice: async function (deviceID) {
-      this.mqttSub(taskInfo.getTaskInfo().controllerID + '/data_server/device_data_stream/' + taskInfo.getRawDeviceID(deviceID) + '/+')
+    addMappingChart: async function (deviceID) {
+      // if have chart with device ID
+      for (const chart in chartData.getAllChartsData()) {
+        if (chartData.getAllChartsData()[chart].mappingID === deviceID) {
+          return false
+        }
+      }
      const chart = await this.addChart()
      await this.$nextTick(async () => {
        chartData.getAllChartsData()[chart].mappingID = deviceID
@@ -378,9 +462,19 @@ export default {
          })
        }
      })
-      if (taskInfo.getDeviceInfo(deviceID).info.isSync) {
-        chartData.defaultChartGenerator(deviceID, chart, 'device')
-      }
+      return chart
+    },
+    addDevice: async function (deviceID) {
+      this.mqttSub(taskInfo.getTaskInfo().controllerID + '/data_server/device_data_stream/' + taskInfo.getRawDeviceID(deviceID) + '/+')
+      this.addMappingChart(deviceID)
+      // if (taskInfo.getDeviceInfo(deviceID).info.isSync) {
+      //   chartData.defaultChartGenerator(deviceID, chart, 'device')
+      // }
+      // console.log(chartData.getAllChartsData())
+      // console.log(taskInfo.getTaskInfo())
+      // await api.task.update({
+      //   device_config: taskInfo.getTaskInfo().deviceList,
+      // })
      this.pageToast('The device [' + deviceID + '] has been registered.')
    },
    removeDevice: function (deviceID) {
@@ -414,33 +508,69 @@ export default {
      }
      this.pageToast('The formula [' + formulaID + '] has been removed.')
    },
-    startAllClick: function () {
-      taskInfo.getDeviceListRegister().forEach(device => {
-        chartData.defaultChartGenerator(device.id, null, 'device')
-        if (!taskInfo.getDeviceInfo(device.id).info.isSync) {
+    startAllClick: async function () {
+      for (const device of taskInfo.getDeviceListRegister()) {
+        if (this.$refs.devices_ref === undefined) {
+          this.startDevice(device)
+        } else {
+          await this.$refs.devices_ref.$refs.pdlist_ref.start(device)
+        }
+      }
+      this.refreshDevicesWindow()
+      this.pageToast('The all devices have been started')
+    },
+    startDevice: async function (device) {
+      chartData.defaultChartGenerator(device.id, null, 'device')
+      if (!taskInfo.getDeviceInfo(device.id).info.isSync) {
+        if (taskInfo.getDeviceInfo(device.id).info.library_name.startsWith('Neulive')) {
+          this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+            header: 'device_instruction/0',
+            device: taskInfo.getRawDeviceID(device.id),
+            instruction: 'record',
+          }))
+        } else if (taskInfo.getDeviceInfo(device.id).info.library_name.startsWith('Elite')) {
+          console.log('elite')
          this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
            header: 'device_instruction/0',
            device: taskInfo.getRawDeviceID(device.id),
            instruction: 'start',
          }))
-          device.isSync = true
        }
-      })
-      this.pageToast('The all devices have been started')
+        device.stopping = false
+        device.isSync = true
+        // this.$emit('refreshSetting')
+        // ### show device info
+        console.log(taskInfo.getDeviceInfo(device.id))
+      }
    },
    stopAllClick: function () {
-      dataStreamBuffer.removeAll()
-      taskInfo.getDeviceListRegister().forEach(device => {
-        if (taskInfo.getDeviceInfo(device.id).info.isSync) {
+      for (const device of taskInfo.getDeviceListRegister()) {
+        if (this.$refs.devices_ref === undefined) {
+          this.stopDevice(device)
+        } else {
+          this.$refs.devices_ref.stopDevice(device)
+        }
+      }
+      this.pageToast('The all devices have been stopped')
+    },
+    stopDevice: async function (device) {
+      dataStreamBuffer.removeByDevice(taskInfo.getRawDeviceID(device.id))
+      if (taskInfo.getDeviceInfo(device.id).info.isSync) {
+        if (taskInfo.getDeviceInfo(device.id).info.library_name.startsWith('Neulive')) {
+          this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+            header: 'device_instruction/0',
+            device: taskInfo.getRawDeviceID(device.id),
+            instruction: 'stop_record',
+          }))
+        } else if (taskInfo.getDeviceInfo(device.id).info.library_name.startsWith('Elite')) {
          this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
            header: 'device_instruction/0',
            device: taskInfo.getRawDeviceID(device.id),
            instruction: 'interrupt',
          }))
        }
-        // device.isSync = false
-      })
-      this.pageToast('The all devices have been stopped')
+        device.stopping = true
+      }
    },
    exit: function () {
      this.$router.push({
@@ -451,16 +581,15 @@ export default {
  watch: {
  },
  async mounted () {
-    // await taskInfo.updateTaskInfo(this.$route.params.taskID)
+    this.deviceList = await taskInfo.updateTaskInfo(this.$route.params.taskID)
    console.log(taskInfo.getTaskInfo())
    // this.screenHeight = document.documentElement.clientHeight
-
    this.pageMqttSub(taskInfo.getTaskInfo().controllerID)
+    console.log(taskInfo.getTaskInfo().controllerID)
    await this.pageInit()
-
    // this.chartNumber = taskInfo.getTaskInfo().chartNumber

-    this.dataRefreshTimer = setInterval(this.refreshData, 700)
+    this.dataRefreshTimer = setInterval(this.refreshData, 100)

    // const _this = this
    // window.onresize = function () { // define the event of window size changing
@@ -481,15 +610,21 @@ export default {
 </script>

 <style lang="scss">
-  .area-style {
-    height: auto;
-    overflow-y: hidden;
-    overflow-x: hidden;
+  // .area-style {
+  //   height: 100%;
+  //   overflow-y: hidden;
+  //   overflow-x: hidden;

-    @include media-breakpoint-only(xl) {
-      height: 88vh;
-      overflow-y: scroll;
-      overflow-x: hidden;
+  //   @include media-breakpoint-only(xl) {
+  //     height: 94vh;
+  //     overflow-y: scroll;
+  //     overflow-x: hidden;
+  //   }
+  // }
+
+  .no-dark-style-va-button {
+    &:focus {
+      filter: brightness(100%);
    }
  }
 </style>
@@ -21,7 +21,7 @@
          <chart :ref="'chart_ref'" :style="'width: '+ cardwidth + '; height: ' + cardheight + ';'" :options="data" :auto-resize="true"></chart>
        </div>
        <div v-else>
-          Please add the source or choose a item to mapping.
+          Please add the source from device.
        </div>
      </div>
      <div v-else-if="tabValue == 1" :style="'width: '+ cardwidth + '; height: ' + cardheight + ';'" >
@@ -30,23 +30,71 @@
      <div v-else :style="'width: '+ cardwidth + '; height: ' + cardheight + ';'" >
        <canvas-chart-setting></canvas-chart-setting>
      </div>
-      <div class="flex row xs12 md12 xl12 sm12" style="text-align: center;" >
-        <div>
-          <va-select
-            class="xs6 md6 xl6 sm6"
+      <div class="flex row">
+        <div class="flex row xs12 md12 xl12 sm12" style="text-align: center;" >
+          <!-- <va-select
+            class="ma-1"
            :on-change="mappingSelectChange()"
            small
            :label="'MAPPING'"
            v-model="mappingSelect"
            textBy="name"
            :options="mappingOptions"
-          />
-        </div>
-        <div>
-          <va-button small @click="init()">INIT</va-button>
+          /> -->
+          <va-input
+            v-if="data.chartXMode === 'time'"
+            class="ma-1"
+            @keyup.enter="timeIntervalChange(timeIntervalInput)"
+            @blur="timeIntervalChange(timeIntervalInput)"
+            v-model="timeIntervalInput"
+            :label="'time-interval'"
+          >
+            <p slot="append" style="margin-right: 0;" small>
+              ms
+            </p>
+          </va-input>
+          <va-input
+            v-if="data.chartXMode === 'value'"
+            class="ma-1"
+            @keyup.enter="xIntervalChange(xIntervalInput)"
+            @blur="xIntervalChange(xIntervalInput)"
+            v-model="xIntervalInput"
+            :label="'x-grid'"
+          >
+            <p slot="append" style="margin-right: 0;" small>
+              {{data.chartXUnit}}
+            </p>
+          </va-input>
+          <va-input
+            class="ma-1"
+            @keyup.enter="yIntervalChange(yIntervalInput)"
+            @blur="yIntervalChange(yIntervalInput)"
+            v-model="yIntervalInput"
+            :label="'y-grid'"
+          >
+            <p slot="append" style="margin-right: 0;" small>
+              {{data.chartYUnit}}
+            </p>
+          </va-input>
+          <va-input
+            v-if="data.chartDevice === 'neulive'"
+            class="ma-1"
+            @keyup.enter="threeAxisIntervalChange(threeAxisIntervalInput)"
+            @blur="threeAxisIntervalChange(threeAxisIntervalInput)"
+            v-model="threeAxisIntervalInput"
+            :label="'3axis-interval'"
+          >
+            <p slot="append" style="margin-right: 0;" small>
+              g
+            </p>
+          </va-input>
+          <!-- <va-button class="no-dark-style-va-button" small @click="init()">INIT</va-button> -->
          <va-button small color="dark" @click="remove()">REMOVE</va-button>
        </div>
-
+        <!-- <div class="xs2 md2 xl2 sm2" style="text-align: center;" >
+          <va-button class="no-dark-style-va-button" small @click="init()">INIT</va-button>
+          <va-button small color="dark" @click="remove()">REMOVE</va-button>
+        </div> -->
      </div>
    </va-card>
  </div>
@@ -98,6 +146,10 @@ export default {
      mappingOptions: taskInfo.getMappingList(),
      nameCard: chartData.getAllChartsData()[this.chartID].cardName,
      initDone: false,
+      timeIntervalInput: 'auto',
+      threeAxisIntervalInput: 'auto',
+      xIntervalInput: 'auto',
+      yIntervalInput: 'auto',
    }
  },
  computed: {
@@ -105,6 +157,60 @@ export default {
  watch: {
  },
  methods: {
+    timeIntervalChange: function (val) {
+      chartData.getAllChartsData()[this.chartID].xAxis.forEach(x => {
+        if (x.type === 'time') {
+          x.interval = val * 1000
+        }
+      })
+    },
+    xIntervalChange: function (val) {
+      chartData.getAllChartsData()[this.chartID].xAxis.forEach(x => {
+        if (x.type === 'value') {
+          x.interval = val * 1000
+          // const maxList = []
+          // const minList = []
+          // x.seriesIndex.forEach(i => {
+          //   maxList.push(Math.max(...chartData.getAllChartsData()[this.chartID].series[i].data.map(p => p[0])))
+          //   minList.push(Math.min(...chartData.getAllChartsData()[this.chartID].series[i].data.map(p => p[0])))
+          // })
+          // const max = Math.max(maxList)
+          // const min = Math.min(minList)
+          // const center = (max + min) / 2
+          // x.max = center + (max - min)
+          // x.min = center - (max - min)
+          // x.max = (parseInt(x.max / (val * 1000)) + 1) * (val * 1000)
+          // x.min = (parseInt(x.min / (val * 1000)) - 1) * (val * 1000)
+        }
+      })
+    },
+    yIntervalChange: function (val) {
+      chartData.getAllChartsData()[this.chartID].yAxis.forEach(y => {
+        if (parseInt(y.channel) <= 255) {
+          y.interval = val * 1000
+          const maxList = []
+          const minList = []
+          y.seriesIndex.forEach(i => {
+            maxList.push(Math.max(...chartData.getAllChartsData()[this.chartID].series[i].data.map(p => p[1])))
+            minList.push(Math.min(...chartData.getAllChartsData()[this.chartID].series[i].data.map(p => p[1])))
+          })
+          const max = Math.max(maxList)
+          const min = Math.min(minList)
+          const center = (max + min) / 2
+          y.max = center + (max - min)
+          y.min = center - (max - min)
+          y.max = (parseInt(y.max / (val * 1000)) + 1) * (val * 1000)
+          y.min = (parseInt(y.min / (val * 1000)) - 1) * (val * 1000)
+        }
+      })
+    },
+    threeAxisIntervalChange: function (val) {
+      chartData.getAllChartsData()[this.chartID].yAxis.forEach(y => {
+        if (parseInt(y.channel) >= 255) {
+          y.interval = val * 1
+        }
+      })
+    },
    init: function () {
      this.mappingSelect = ''
      this.nameCard = 'chart' + this.chartID
@@ -162,6 +268,8 @@ export default {
    this.nameCard = chartData.getAllChartsData()[this.chartID].cardName
    await this.refreshMappingSelect()
    this.initDone = true
+    this.timeIntervalInput = '500'
+    this.timeIntervalChange('500')
  },
  destroyed () {
    clearInterval(this.resizeTimer)
@@ -169,3 +277,11 @@ export default {
 }

 </script>
+
+<style lang="scss">
+  .no-dark-style-va-button {
+    &:focus {
+      filter: brightness(100%);
+    }
+  }
+</style>
@@ -1,75 +1,87 @@
 <template>
  <div style="height: 350px; overflow-y: scroll; overflow-x: hidden;">
+    <div>
+      <div class="flex row align--center">
+        <div class="flex md3 xl3 xs3 sm3">
+          <va-select
+            small
+            :label="'X SOURCE'"
+            v-model="deviceSelectX"
+            textBy="name"
+            :options="deviceOptions"
+          />
+        </div>
+        <div class="flex md3 xl3 xs3 sm3">
+          <va-select
+            :on-change="channelSelectXChange()"
+            :label="'X CHANNEL'"
+            v-model="channelSelectX"
+            textBy="channel"
+            :options="channelOptionsX"
+            :disabled="channelSelectDisableX"
+          />
+        </div>
+        <div class="flex md3 xl3 xs3 sm3">
+          <va-select
+            :label="'Y SOURCE'"
+            v-model="deviceSelectY"
+            textBy="name"
+            :options="deviceOptions"
+          />
+        </div>
+        <div class="flex md3 xl3 xs3 sm3">
+          <va-select
+            :on-change="channelSelectYChange()"
+            :label="'Y CHANNEL'"
+            v-model="channelSelectY"
+            textBy="channel"
+            :options="channelOptionsY"
+            :disabled="channelSelectDisableY"
+          />
+        </div>
+        <div class="flex md3 xl3 xs3 sm3">
+          <va-select
+            :label="'SubPlot'"
+            v-model="gridSelection"
+            textBy="value"
+            :options="gridOptions"
+            @click.enter="updateGridOptions()"
+          />
+        </div>
+        <va-button :disabled="sourceAddStatus" class="flex md3 xl3 xs3 sm3 pa-1" @click="addRegisterDeviceChannel(gridSelection.id)" >
+          Add
+        </va-button><span class="ml-2" style="color: red;">{{error}}</span>
+      </div>
+    </div>
    <va-tree-root>
      <va-tree-category
        style="font-size: 20px;"
        v-for="grid in grids"
        :key="grid.index"
-        :label="'GRID ' + grid.index">
+        :label="'Subplot ' + grid.index">
        <va-tree-node
-          v-for="series in grid.series"
+          v-for="series in gridSource[grid.index]"
          :key="series.name"
        >
          <div class="flex row align--center">
            <va-badge class="mb-0" style="font-size: 14px;" color="primary">{{series.name}}</va-badge>
            <va-badge class="mb-0" style="font-size: 14px;" color="primary" outline>{{series.xAxis}}</va-badge>
            <va-badge class="mb-0" style="font-size: 14px;" color="primary" outline>{{series.yAxis}}</va-badge>
-            <va-icon
+            <!-- <va-icon
              name="ion ion-md-close"
              color="info"
              class="ml-2 pa-1 shrink"
              style="cursor: pointer;"
              @click.native="removeProduct(product)"
-            />
-          </div>
-        </va-tree-node>
-        <va-tree-node>
-          <div class="flex row align--center">
-            <div class="flex md6 xl6 xs6 sm6">
-              <va-select
-                small
-                :label="'X DEVICE'"
-                v-model="deviceSelectX"
-                textBy="name"
-                :options="deviceOptions"
-              />
-            </div>
-            <div class="flex md6 xl6 xs6 sm6">
-              <va-select
-                :on-change="channelSelectXChange()"
-                :label="'X CHANNEL'"
-                v-model="channelSelectX"
-                textBy="channel"
-                :options="channelOptionsX"
-                :disabled="channelSelectDisableX"
-              />
-            </div>
-            <div class="flex md6 xl6 xs6 sm6">
-              <va-select
-                :label="'Y DEVICE'"
-                v-model="deviceSelectY"
-                textBy="name"
-                :options="deviceOptions"
-              />
-            </div>
-            <div class="flex md6 xl6 xs6 sm6">
-              <va-select
-                :on-change="channelSelectYChange()"
-                :label="'Y CHANNEL'"
-                v-model="channelSelectY"
-                textBy="channel"
-                :options="channelOptionsY"
-                :disabled="channelSelectDisableY"
-              />
-            </div>
-            <va-button :disabled="sourceAddStatus" class="flex md6 xl6 xs6 sm6 pa-1" @click="addRegisterDeviceChannel(grid.index)" >
-              Add
-            </va-button>
+            /> -->
          </div>
        </va-tree-node>
      </va-tree-category>

    </va-tree-root>
+    <va-button @click="addGrid()">
+      Add Subplot
+    </va-button>
  </div>
 </template>

@@ -93,17 +105,16 @@ export default {
  },
  data () {
    return {
+      error: '',
+      gridSelection: '',
+      gridOptions: [
+        {
+          id: 0,
+          value: 0,
+        },
+      ],
      grids: this.gridInfo,
-      electronics: [
-        { id: 1, name: 'Cellphones' },
-        { id: 2, name: 'Camera Body Kits' },
-        { id: 3, name: 'External HDDs' },
-      ],
-      products: [
-        { id: 4, name: 'Cables' },
-        { id: 5, name: 'Monitors' },
-        { id: 6, name: 'Keyboards' },
-      ],
+      gridSource: chartData.getAllChartsData()[this.chartID].gridSource,
      channelSelectX: '',
      channelOptionsX: [],
      channelSelectY: '',
@@ -114,6 +125,7 @@ export default {
      deviceSelectY: '',
      deviceOptions: taskInfo.getDeviceList(),
      sourceAddStatus: true,
+      sourceList: [],
    }
  },
  watch: {
@@ -136,6 +148,32 @@ export default {
            // console.log(index, element)
          }
        })
+        const axisChannelSet = taskInfo.getDeviceInfo(this.deviceSelectX.id).parameterSet.AXIS_CH.toString(2).split('').reverse()
+        axisChannelSet.forEach((element, index) => {
+          if (parseInt(element) === 1) {
+            if (index === 0) {
+              channelOptions.push({
+                id: 257,
+                channel: 'X-AXIS',
+              })
+            } else if (index === 1) {
+              channelOptions.push({
+                id: 258,
+                channel: 'Y-AXIS',
+              })
+            } else if (index === 2) {
+              channelOptions.push({
+                id: 259,
+                channel: 'Z-AXIS',
+              })
+            } else if (index === 3) {
+              channelOptions.push({
+                id: 260,
+                channel: 'M-AXIS',
+              })
+            }
+          }
+        })
        this.channelSelectDisableX = false
      } else if (taskInfo.getDeviceInfo(this.deviceSelectX.id).info.library_name.indexOf('Elite') >= 0) {
        const channelSet = taskInfo.getDeviceInfo(this.deviceSelectX.id).parameterSet.CHANNEL_LABEL
@@ -172,6 +210,32 @@ export default {
            // console.log(index, element)
          }
        })
+        const axisChannelSet = taskInfo.getDeviceInfo(this.deviceSelectY.id).parameterSet.AXIS_CH.toString(2).split('').reverse()
+        axisChannelSet.forEach((element, index) => {
+          if (parseInt(element) === 1) {
+            if (index === 0) {
+              channelOptions.push({
+                id: 257,
+                channel: 'X-AXIS',
+              })
+            } else if (index === 1) {
+              channelOptions.push({
+                id: 258,
+                channel: 'Y-AXIS',
+              })
+            } else if (index === 2) {
+              channelOptions.push({
+                id: 259,
+                channel: 'Z-AXIS',
+              })
+            } else if (index === 3) {
+              channelOptions.push({
+                id: 260,
+                channel: 'M-AXIS',
+              })
+            }
+          }
+        })
        this.channelSelectDisableY = false
      } else if (taskInfo.getDeviceInfo(this.deviceSelectY.id).info.library_name.indexOf('Elite') >= 0) {
        const channelSet = taskInfo.getDeviceInfo(this.deviceSelectY.id).parameterSet.CHANNEL_LABEL
@@ -193,6 +257,15 @@ export default {
    },
  },
  methods: {
+    updateGridOptions () {
+      this.gridOptions = []
+      for (let i = 0; i < this.grids.length; i++) {
+        this.gridOptions.push({
+          id: i,
+          value: String(i),
+        })
+      }
+    },
    channelSelectYChange: function () {
      this.checkSourceAddStatus()
    },
@@ -206,6 +279,7 @@ export default {
      this.channelOptionsY = []
      this.deviceSelectX = ''
      this.deviceSelectY = ''
+      this.gridSelection = ''
    },
    addRegisterDeviceChannel: function (gridIndex) {
      let deviceNameX
@@ -229,11 +303,46 @@ export default {
        deviceNameY = 'Time'
      }
      chartData.register(this.chartID, gridIndex, deviceNameX, deviceIDX, channelX, deviceNameY, deviceIDY, channelY, null)
+      console.log(this.chartID, gridIndex, deviceNameX, deviceIDX, channelX, deviceNameY, deviceIDY, channelY, null)
      console.log(this.deviceSelectX, this.channelSelectX, this.deviceSelectY, this.channelSelectY)
+      if (deviceNameX !== 'Time') {
+        this.sourceList.push([this.deviceSelectX.name, deviceIDX, channelX].toString())
+      }
+      if (deviceNameY !== 'Time') {
+        this.sourceList.push([this.deviceSelectY.name, deviceIDY, channelY].toString())
+      }
      this.sourceAddStatus = true
      this.clearSelectOptions()
    },
+    addGrid () {
+      chartData.updateGridList(this.chartID, chartData.getAllChartsData()[this.chartID].grid.length + 1)
+      this.grids = chartData.getAllChartsData()[this.chartID].grid
+      this.treeKey++
+      this.gridOptions = []
+      for (let i = 0; i < this.grids.length; i++) {
+        this.gridOptions.push({
+          id: i,
+          value: String(i),
+        })
+      }
+      console.log(chartData.getAllChartsData()[this.chartID])
+    },
    checkSourceAddStatus () {
+      if (this.sourceList.indexOf([this.deviceSelectX.name, this.deviceSelectX.id, this.channelSelectX.id].toString()) >= 0) {
+        this.error = 'some source have been registered'
+        this.sourceAddStatus = true
+        return
+      }
+      if (this.sourceList.indexOf([this.deviceSelectY.name, this.deviceSelectY.id, this.channelSelectY.id].toString()) >= 0) {
+        this.sourceAddStatus = true
+        this.error = 'some source have been registered'
+        return
+      }
+      this.error = ''
+      if (this.gridSelection.id == null) {
+        this.sourceAddStatus = true
+        return
+      }
      if (this.channelSelectX.id != null && this.channelSelectY.id != null) {
        this.sourceAddStatus = false
      } else if (this.channelSelectX.id != null && this.deviceSelectY.id < 0) {
@@ -253,6 +362,8 @@ export default {
    removeProduct (product) {
      this.products = this.products.filter(productToFilter => productToFilter !== product)
    },
+    mounted () {
+    },
  },
 }
 </script>
@@ -14,13 +14,13 @@
        <span slot="header" >
          <va-item :key="device.id" class="pa-0 ma-0"
          >
-            <va-icon
+            <!-- <va-icon
              name="ion ion-md-close"
              color="danger"
              class="ml-0 mr-3 pa-0 shrink"
              style="cursor: pointer;"
              @click.native.stop="removeCheck(device)"
-            />
+            /> -->

            <va-item-section avatar class="ml-0">
              <va-avatar style="border-radius: 0;">
@@ -31,8 +31,6 @@
            <va-item-section class="ml-3">
              <va-item-label>
                {{ device.name }}
-                <va-button @click.stop="start(device)" v-if="!device.isSync" class="px-2 py-0 mr-0" color="success" small>START</va-button>
-                <va-button @click.stop="stop(device)" v-if="device.isSync" :disabled="device.stopping" class="px-2 py-0 mr-0" color="danger" small>STOP</va-button>
              </va-item-label>

              <va-item-label caption>
@@ -42,12 +40,27 @@
            </va-item-section>

          </va-item>
+
+          <va-item class="pa-0 ma-0 mt-2">
+            <va-item-section class="ml-3">
+              <va-item-label>
+                <va-button @click.stop="start(device)" v-if="(device.type == 'Neulive' && !device.isSync && !device.isStimulate) || (device.type == 'Elite' && !device.isSync)" class="px-2 py-0 mr-0" color="success" small>START</va-button>
+                <va-button @click.stop="stop(device)" v-if="(device.type == 'Neulive' && (device.isSync || device.isStimulate)) || (device.type == 'Elite' && device.isSync)" class="px-2 py-0 mr-0" color="danger" small>STOP</va-button>
+                <va-button id="detectButton" @click.stop="detect(device)" v-if="device.type == 'Elite'" color="primary" class="px-2 py-0 mr-0" small>DETECT</va-button>
+                <va-button @click.stop="record(device)" v-if="device.type == 'Neulive' && !device.isSync" color="primary" class="px-2 py-0 mr-0 no-dark-style-va-button" small>RECORD</va-button>
+                <va-button @click.stop="stopRecord(device)" v-if="device.type == 'Neulive' && device.isSync" color="danger" class="px-2 py-0 mr-0 no-dark-style-va-button" small>STOP REC</va-button>
+                <va-button @click.stop="stimulate(device)" v-if="device.type == 'Neulive' && !device.isStimulate" color="warning" class="px-2 py-0 mr-0 no-dark-style-va-button" small>STIMULATE</va-button>
+                <va-button @click.stop="stopStimulate(device)" v-if="device.type == 'Neulive' && device.isStimulate" color="danger" class="px-2 py-0 mr-0" small>STOP STI</va-button>
+                <va-button @click.stop="fastSettle(device)" v-if="device.type == 'Neulive'" color="info" class="px-2 py-0 mr-0 no-dark-style-va-button" small>R</va-button>
+              </va-item-label>
+            </va-item-section>
+          </va-item>
        </span>
        <div slot="body">
          <div class="mt-0 mb-0" style="height: 350px; overflow-y: scroll; overflow-x: hidden;" :key="'detail' + device.id">
-            <div style="text-align: center;">
-              <va-button @click.stop="generateChart(device)" class="pl-2 pr-2 mr-0" small>GENERATE MAPPING CHART</va-button>
-            </div>
+            <!-- <div style="text-align: center;">
+              <va-button @click.stop="generateChart(device)" class="pl-2 pr-2 mr-0 no-dark-style-va-button" small>GENERATE MAPPING CHART</va-button>
+            </div> -->
            <div>
              <file-control-window :ref="'fcwindow_ref'" :deviceID="device.id" class="pl-0 pr-0" />
            </div>
@@ -55,7 +68,7 @@
              <elite-parameter-window :ref="'epwindow_ref'" :deviceID="device.id" class="pl-0 pr-0" />
            </div>
            <div v-if="device.type == 'Neulive'">
-              <neulive-parameter-window :ref="'npwindow_ref'" :deviceID="device.id" class="pl-0 pr-0" />
+              <neulive-parameter-window :ref="'npwindow_ref'" :deviceID="device.id" class="pl-0 pr-0" @record="record_start(device)" @record_stop="record_stop(device)"/>
            </div>
          </div>
        </div>
@@ -69,6 +82,8 @@
 import EliteParameterWindow from '../parameter/EliteParameterWindow'
 import NeuliveParameterWindow from '../parameter/NeuliveParameterWindow'
 import FileControlWindow from '../meta/FileControlWindow'
+import { mapActions } from 'vuex'
+import types from '@/store/modules/task/content/types'

 export default {
  name: 'TaskDeviceList',
@@ -100,15 +115,47 @@ export default {
    remove: function () {
      this.$emit('remove', this.selectDevice)
    },
-    start: function (device) {
-      this.$emit('start', device)
-      device.stopping = false
-      this.pageToast('The device ' + device.name + ' has been started.')
+    start: async function (device) {
+      const checkParam = await this.checkIfDeviceSetDoneParam({ device: device })
+      const status = checkParam.status
+      const message = checkParam.message
+      if (status === true) {
+        this.setArchiveSettings()
+        // this.$emit('start', device)
+        setTimeout(() => {
+          this.$emit('start', device)
+        }, 500)
+        this.pageToast('The device ' + device.name + ' has been started.')
+      } else {
+        this.pageToast('The device cannot be started because:' + message)
+      }
    },
    stop: function (device) {
-      device.stopping = true
-      this.$emit('stop', device)
-      this.pageToast('The device ' + device.name + ' has been stopped.')
+      if (!device.stopping) {
+        this.$emit('stop', device)
+        this.pageToast('The device ' + device.name + ' has been stopped.')
+      }
+    },
+    record: async function (device) {
+      const checkParam = await this.checkIfRecordingSetDoneParam({ device: device })
+      const status = checkParam.status
+      const message = checkParam.message
+      if (status === true) {
+        device.stopping = false
+        this.setArchiveSettings()
+        setTimeout(() => {
+          this.$emit('record', device)
+        }, 500)
+        this.pageToast('The device ' + device.name + ' has been started.')
+      } else {
+        this.pageToast('Recording cannot be started because:' + message)
+      }
+    },
+    stopRecord: function (device) {
+      if (!device.stopping) {
+        this.$emit('stopRecord', device)
+        this.pageToast('The device ' + device.name + ' has been stopped.')
+      }
    },
    generateChart: function (device) {
      this.$emit('generate', device)
@@ -147,6 +194,44 @@ export default {
        },
      )
    },
+    detect: function (device) {
+      this.$emit('detect', device)
+      this.pageToast('The device ' + device.name + ' has been detect.')
+    },
+    stimulate: async function (device) {
+      const checkParam = await this.checkIfStimulationSetDoneParam({ device: device })
+      const status = checkParam.status
+      const message = checkParam.message
+      if (status === true) {
+        this.$emit('sti', device)
+        this.pageToast('The device ' + device.name + ' start stimulate.')
+      } else {
+        this.pageToast('Stimulation cannot be started because:' + message)
+      }
+    },
+    stopStimulate: function (device) {
+      this.$emit('sti_stop', device)
+      this.pageToast('The device ' + device.name + ' stop stimulate.')
+    },
+    fastSettle: function (device) {
+      this.$emit('fast_settle', device)
+      this.pageToast('The device ' + device.name + ' fast settle.')
+    },
+    recoverDetectButton () {
+      document.getElementById('detectButton').className += ' no-dark-style-va-button'
+    },
+    ...mapActions('taskContent', [types.param.checkIfRecordingSetDone, types.param.checkIfStimulationSetDone, types.param.checkIfDeviceSetDone]),
+  },
+  destroyed () {
+    this.deviceList.length = 0
  },
 }
 </script>
+
+<style lang="scss">
+  .no-dark-style-va-button {
+    &:focus {
+      filter: brightness(100%);
+    }
+  }
+</style>
@@ -1,6 +1,6 @@
 <template>
  <div class="flex" :class="cardclass">
-    <va-card>
+    <va-card style="height: 88vh; overflow: auto;">
      <template slot="header">
        <va-icon name="fa fa-bluetooth-b mr-3" color="primary"/>
        <h5 class="mt-0 mb-0">DEVICES</h5>
@@ -15,9 +15,20 @@
      </div>

      <div v-else class="flex row align--center">
-        <task-device-list :ref="'pdlist_ref'" :deviceList="deviceList" @remove="removeDevice($event)" @start="startDevice($event)" @stop="stopDevice($event)" @generate="generateChart($event)" />
+        <task-device-list
+          :ref="'pdlist_ref'"
+          :deviceList="deviceList"
+          @start="startDevice($event)"
+          @stop="stopDevice($event)"
+          @record="record($event)"
+          @stopRecord="stopRecord($event)"
+          @sti="sti($event)" @sti_stop="stiStop($event)"
+          @fast_settle="fastSettle($event)"
+          @generate="generateChart($event)"
+          @detect="detectDevice($event)"
+        />

-        <div class="row flex xs12 md12 xl12 sm12 mt-2" style="text-align: center;">
+        <!-- <div class="row flex xs12 md12 xl12 sm12 mt-2" style="text-align: center;">
          <div class="xs10 md10 xl10 sm10">
            <va-select
              small
@@ -31,7 +42,7 @@
              REGISTER
            </va-button>
          </div>
-        </div>
+        </div> -->
      </div>

    </va-card>
@@ -44,6 +55,7 @@ import TaskDeviceList from './TaskDeviceList'
 import { taskInfo } from '../../../../data/task/TaskInfo'
 import { chartData } from '../../../../data/task/ChartsManagement'
 import { dataStreamBuffer } from '../../../../data/task/DataStreamBuffer'
+import api from '@/data/api'

 export default {
  name: 'TaskDevices',
@@ -85,40 +97,204 @@ export default {
    },
    loadingDone: async function () {
      this.state.LOADING = false
+      // const ret = await api.task.getAll()
+      // if (ret.data.length > 0) {
+      //   for (const device in ret.data[0].device_config) {
+      //     if (ret.data[0].device_config[device].device_address) {
+
+      //     }
+      //   }
+      // }
      console.log(this.deviceOptions)
-      for (let i = this.deviceOptions.length - 1; i >= 0; i--) {
-        this.deviceSelect = this.deviceOptions[i]
-        await this.addDevice(this.deviceOptions[i].id)
-        // this.sleep(500).then(() => {
-        //   this.addDevice(this.deviceOptions[i].id)
-        // })
+      for (let i = 4; i <= 7; i++) {
+        if (taskInfo.getDeviceInfoByRawID(i).info.status === 'connected') {
+          const index = this.deviceList.findIndex(d => taskInfo.getRawDeviceID(d.id) === i)
+          if (index < 0) {
+            await this.addDevice(i)
+          }
+        } else {
+          console.log(this.deviceList)
+          const index = this.deviceList.findIndex(d => taskInfo.getRawDeviceID(d.id) === i)
+          console.log(index)
+          if (index > 0) {
+            await this.removeDevice(this.deviceList[index])
+          }
+        }
      }
+
+      taskInfo.getDeviceList().length = 0
+      taskInfo.getDeviceList().push({
+        id: -1,
+        name: 'Time',
+      })
+      taskInfo.getDeviceList().push(...this.deviceList)
+      console.log(taskInfo.getDeviceList())
+      // for (let i = this.deviceOptions.length - 1; i >= 0; i--) {
+      //   this.deviceSelect = this.deviceOptions[i]
+      //   await this.addDevice(this.deviceOptions[i].id)
+      //   // this.sleep(500).then(() => {
+      //   //   this.addDevice(this.deviceOptions[i].id)
+      //   // })
+      // }
    },
    startDevice: async function (device) {
+      await chartData.defaultChartGenerator(device.id, null, 'device')
+      if (!taskInfo.getDeviceInfo(device.id).info.isSync) {
+        if (taskInfo.getDeviceInfo(device.id).info.library_name.startsWith('Neulive')) {
+          this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+            header: 'device_instruction/0',
+            device: taskInfo.getRawDeviceID(device.id),
+            instruction: 'record',
+          }))
+          this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+            header: 'device_instruction/0',
+            device: taskInfo.getRawDeviceID(device.id),
+            instruction: 'stimulate',
+          }))
+          this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+            header: 'device_parameter/0',
+            device: taskInfo.getRawDeviceID(device.id),
+            parameter: 'STIMULATING',
+            content: 1,
+          }))
+          taskInfo.getTaskInfo().deviceList[(taskInfo.getRawDeviceID(device.id)).toString()].parameterSet.STIMULATING = 1
+
+          device.isStimulate = true
+        } else if (taskInfo.getDeviceInfo(device.id).info.library_name.startsWith('Elite')) {
+          this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+            header: 'device_instruction/0',
+            device: taskInfo.getRawDeviceID(device.id),
+            instruction: 'start',
+          }))
+        }
+        device.stopping = false
+        device.isSync = true
+        this.$emit('refreshSetting')
+        // ### show device info
+        api.task.update({
+          device_config: taskInfo.getTaskInfo().deviceList,
+        })
+        console.log(taskInfo.getDeviceInfo(device.id))
+      }
+    },
+    stopDevice: async function (device) {
+      await dataStreamBuffer.removeByDevice(taskInfo.getRawDeviceID(device.id))
+      if (taskInfo.getDeviceInfo(device.id).info.isSync) {
+        if (taskInfo.getDeviceInfo(device.id).info.library_name.startsWith('Neulive')) {
+          this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+            header: 'device_instruction/0',
+            device: taskInfo.getRawDeviceID(device.id),
+            instruction: 'stop_record',
+          }))
+          this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+            header: 'device_instruction/0',
+            device: taskInfo.getRawDeviceID(device.id),
+            instruction: 'stop_stimulate',
+          }))
+          this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+            header: 'device_parameter/0',
+            device: taskInfo.getRawDeviceID(device.id),
+            parameter: 'STIMULATING',
+            content: 0,
+          }))
+          device.isStimulate = false
+        } else if (taskInfo.getDeviceInfo(device.id).info.library_name.startsWith('Elite')) {
+          this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+            header: 'device_instruction/0',
+            device: taskInfo.getRawDeviceID(device.id),
+            instruction: 'interrupt',
+          }))
+        }
+        device.stopping = true
+      }
+    },
+    detectDevice: function (device) {
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_instruction/0',
+        device: taskInfo.getRawDeviceID(device.id),
+        instruction: 'VIS_DEVICE_DETECT',
+      }))
+      setTimeout(() => {
+        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+          header: 'device_instruction/0',
+          device: taskInfo.getRawDeviceID(device.id),
+          instruction: 'VIS_DEVICE_DONE',
+        }))
+        this.$refs.pdlist_ref.recoverDetectButton()
+      }, 5000)
+    },
+    record: async function (device) {
      await chartData.defaultChartGenerator(device.id, null, 'device')
      if (!taskInfo.getDeviceInfo(device.id).info.isSync) {
        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
          header: 'device_instruction/0',
          device: taskInfo.getRawDeviceID(device.id),
-          instruction: 'start',
+          instruction: 'record',
        }))
        device.isSync = true
+        device.stopping = false
        this.$emit('refreshSetting')
+        api.task.update({
+          device_config: taskInfo.getTaskInfo().deviceList,
+        })

        // ### show device info
        console.log(taskInfo.getDeviceInfo(device.id))
      }
    },
-    stopDevice: function (device) {
-      dataStreamBuffer.removeByDevice(taskInfo.getRawDeviceID(device.id))
-      if (taskInfo.getDeviceInfo(device.id).info.isSync) {
-        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
-          header: 'device_instruction/0',
-          device: taskInfo.getRawDeviceID(device.id),
-          instruction: 'interrupt',
-        }))
+    stopRecord: function (device) {
+      if (!device.stopping) {
+        dataStreamBuffer.removeByDevice(taskInfo.getRawDeviceID(device.id))
+        if (taskInfo.getDeviceInfo(device.id).info.isSync) {
+          this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+            header: 'device_instruction/0',
+            device: taskInfo.getRawDeviceID(device.id),
+            instruction: 'stop_record',
+          }))
+        }
+        device.isSync = false
+        device.stopping = true
      }
-      // device.isSync = false
+    },
+    sti: function (device) {
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_instruction/0',
+        device: taskInfo.getRawDeviceID(device.id),
+        instruction: 'stimulate',
+      }))
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_parameter/0',
+        device: taskInfo.getRawDeviceID(device.id),
+        parameter: 'STIMULATING',
+        content: 1,
+      }))
+      taskInfo.getTaskInfo().deviceList[(taskInfo.getRawDeviceID(device.id)).toString()].parameterSet.STIMULATING = 1
+
+      api.task.update({
+        device_config: taskInfo.getTaskInfo().deviceList,
+      })
+      device.isStimulate = true
+    },
+    stiStop: function (device) {
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_instruction/0',
+        device: taskInfo.getRawDeviceID(device.id),
+        instruction: 'stop_stimulate',
+      }))
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_parameter/0',
+        device: taskInfo.getRawDeviceID(device.id),
+        parameter: 'STIMULATING',
+        content: 0,
+      }))
+      device.isStimulate = false
+    },
+    fastSettle: function (device) {
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_instruction/0',
+        device: taskInfo.getRawDeviceID(device.id),
+        instruction: 'FAST_SET',
+      }))
    },
    // addDevice: async function () {
    //   if (this.deviceSelect.id == null) {
@@ -155,7 +331,13 @@ export default {
      if (selectID == null) {
        return false
      }
-
+      const addr = taskInfo.getDeviceInfoByRawID(selectID).info.device_address
+      if (addr.length === 0) {
+        return false
+      }
+      if (taskInfo.getTaskInfo().taskDeviceID.indexOf(selectID) > 0) {
+        return false
+      }
      await taskInfo.getTaskInfo().deviceAddrList.push(taskInfo.getDeviceInfoByRawID(selectID).info.device_address)
      await taskInfo.getTaskInfo().taskDeviceID.push(selectID)
      const _address = this.GLOBAL.transMac(taskInfo.getDeviceInfoByRawID(selectID).info.device_address)
@@ -176,6 +358,7 @@ export default {
        picture: pic,
        type: type,
        isSync: taskInfo.getDeviceInfoByRawID(selectID).info.isSync,
+        isStimulate: taskInfo.getDeviceInfoByRawID(selectID).info.isStimulate,
        stopping: false,
      }
      this.deviceList.push(_device)
@@ -199,11 +382,19 @@ export default {
      taskInfo.updateAllList()
      this.$emit('remove', device.id)
    },
+    clearDevice: async function () {
+      taskInfo.getTaskInfo().deviceAddrList.length = 0
+      taskInfo.getTaskInfo().taskDeviceID.length = 0
+      this.deviceList.length = 0
+      taskInfo.updateAllList()
+    },
    generateChart: function (device) {
      this.$emit('add', device.id)
    },
    setArchiveSettings: function () {
-      this.$refs.pdlist_ref.setArchiveSettings()
+      if (this.$refs.pdlist_ref != null) {
+        this.$refs.pdlist_ref.setArchiveSettings()
+      }
    },
    refresh: function () {
      this.$nextTick(() => {
@@ -1,37 +1,25 @@
 <template>
-  <div class="flex mt-0 pt-0">
-    <div>
-      <div class="row flex sm12 xl12 md12 xs12">
-        <div>
-          <div class="flex">
-            <va-tree-root>
-              <div class="row pt-0 pb-0">
-                <div class="flex sm12 xl12 md12 xs12">
-                  <va-input
-                    @mouseup.native="fileNameChange(fileNameInput)"
-                    @mouseleave.native="fileNameChange(fileNameInput)"
-                    @touchend.native="fileNameChange(fileNameInput)"
-                    @keyup.enter="fileNameChange(fileNameInput)"
-                    v-model="fileNameInput"
-                    :label="'FILE NAME'"
-                    style="width: 200px;"
-                  >
-                  </va-input>
-                  <va-select
-                    :on-change="directorySelect(directory)"
-                    :label="'DIRECTORY'"
-                    v-model="directory"
-                    textBy="name"
-                    :options="directoryOptions"
-                    noClear
-                    style="width: 200px;"
-                  />
-                </div>
-              </div>
-            </va-tree-root>
-          </div>
-        </div>
-      </div>
+  <div class="flex row mt-0 pt-0 sm12 xl12 md12 xs12">
+    <div class="flex sm6 xl6 md6 xs6">
+      <va-select
+        :on-change="directorySelect(directory)"
+        :label="'DIRECTORY'"
+        v-model="directory"
+        textBy="name"
+        :options="directoryOptions"
+        noClear
+      />
+    </div>
+    <div class="flex sm6 xl6 md6 xs6">
+      <va-input
+        @mouseup.native="fileNameChange(fileNameInput)"
+        @mouseleave.native="fileNameChange(fileNameInput)"
+        @touchend.native="fileNameChange(fileNameInput)"
+        @keyup.enter="fileNameChange(fileNameInput)"
+        v-model="fileNameInput"
+        :label="'FILE NAME'"
+      >
+      </va-input>
    </div>

  </div>
@@ -65,51 +53,94 @@ export default {
      fileNameInput: '',
      directory: '',
      directoryOptions: [],
-      deviceInfo: {},
+      deviceInfo: null,
+      enableSetting: false,
+      enableTimer: null,
    }
  },
  mqtt: {
  },
  methods: {
-    fileNameChange: function (name) {
-      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
-        header: 'device_recording_file_name/0',
-        device: taskInfo.getRawDeviceID(this.deviceID),
-        content: name,
-      }))
+    fileNameChange: async function (name) {
+      if (this.enableSetting) {
+        if (this.deviceInfo.info.isSync === false) {
+          let fileNameCount = await api.meta.getByName(name)
+          if (fileNameCount.data != null) {
+            let duplicateCount = 1
+            let fileName = name
+            while (fileNameCount.data.length !== 0) {
+              const res = name.split('(')[0]
+              fileName = `${res}(${duplicateCount})`
+              fileNameCount = await api.meta.getByName(fileName)
+              duplicateCount += 1
+            }
+            this.fileNameInput = fileName
+
+            if (fileName !== this.deviceInfo.info.recording_file_name) {
+              this.deviceInfo.info.recording_file_name = fileName
+              this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+                header: 'device_recording_file_name/0',
+                device: taskInfo.getRawDeviceID(this.deviceID),
+                content: fileName,
+              }))
+            }
+          }
+        }
+      }
    },
    directorySelect: function (directoryInfo) {
-      if (typeof directoryInfo === 'object') {
-        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
-          header: 'device_parent/0',
-          device: taskInfo.getRawDeviceID(this.deviceID),
-          content: {
-            folder: [directoryInfo.id],
-          },
-        }))
+      if (this.enableSetting) {
+        if (typeof directoryInfo === 'object') {
+          if (this.deviceInfo.info.parent.folder === undefined || this.deviceInfo.info.parent.folder.indexOf(directoryInfo.id) === -1) {
+            if (this.deviceInfo.info.isSync === false) {
+              this.deviceInfo.info.parent.folder = []
+              this.deviceInfo.info.parent.folder.push(directoryInfo.id)
+              this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+                header: 'device_parent/0',
+                device: taskInfo.getRawDeviceID(this.deviceID),
+                content: {
+                  folder: [directoryInfo.id],
+                },
+              }))
+            }
+          }
+        }
      }
    },
+    enableChangeFile: function () {
+      this.enableSetting = true
+      this.setArchiveSettings()
+    },
    setArchiveSettings: async function () {
-      this.deviceInfo = taskInfo.getDeviceInfo(this.deviceID)
-      const now = this.getCurrentTime()
-      // filename init
-      // TODO this.deviceInfo.info.isSync is false, beacause refresh is faster than get_device_info response
-      if (this.deviceInfo.info.isSync) {
-        this.fileNameInput = this.deviceInfo.info.recording_file_name
-      } else {
-        this.fileNameInput = now
-      }
+      if (this.enableSetting) {
+        if (this.deviceInfo === null) {
+          this.deviceInfo = taskInfo.getDeviceInfo(this.deviceID)
+        }
+        const now = this.getCurrentTime()
+        // filename init
+        if (this.deviceInfo.info.isSync) {
+          this.fileNameInput = this.deviceInfo.info.recording_file_name
+        } else {
+          if (this.deviceInfo.info.recording_file_name === 'recording_data' || this.deviceInfo.info.recording_file_name.split('-').length === 7) {
+            this.fileNameInput = now
+          } else {
+            this.fileNameInput = this.deviceInfo.info.recording_file_name
+          }
+        }

-      // directory init
-      const collection = await api.getCollectionsAll()
-      this.directoryOptions = collection.data.filter(el => el.name !== 'root')
+        this.fileNameChange(this.fileNameInput)

-      if (Object.keys(this.deviceInfo.info.parent).length === 0) {
-        this.directory = this.directoryOptions[0]
-      } else {
-        for (const directory of this.directoryOptions) {
-          if (this.deviceInfo.info.parent.folder.includes(directory.id)) {
-            this.directory = directory
+        // directory init
+        const collection = await api.collection.getAll()
+        this.directoryOptions = collection.data.filter(el => el.name !== 'root')
+
+        if (Object.keys(this.deviceInfo.info.parent).length === 0) {
+          this.directory = this.directoryOptions[0]
+        } else {
+          for (const directory of this.directoryOptions) {
+            if (this.deviceInfo.info.parent.folder.includes(directory.id)) {
+              this.directory = directory
+            }
          }
        }
      }
@@ -135,6 +166,10 @@ export default {
  },
  mounted () {
    this.pageInit()
+    this.enableTimer = setTimeout(this.enableChangeFile, 1000)
+  },
+  destroyed () {
+    clearTimeout(this.enableTimer)
  },
  watch: {
    deviceID: function (val) {
@@ -214,8 +214,8 @@
          <div class="row">
            <div class="flex sm12 xl12 md12 xs12">
              <div class="flex row align--center">
-                <va-button slot="append" class="mr-2 pa-1 shrink" small @click="cycleNoNumberChange(0)">
-                  0
+                <va-button slot="append" class="mr-2 pa-1 shrink" small @click="cycleNoNumberChange(1)">
+                  1
                </va-button>
                <va-input
                  @keyup.enter="cycleNoNumberChange(cycleNoNumberInput)"
@@ -235,7 +235,7 @@
                class="flex sm12 xl12 md12 xs12"
                value-visible
                v-model="cycleNoNumber"
-                :min="0"
+                :min="1"
                :max="249"
              />
            </div>
@@ -718,8 +718,8 @@
          <div class="row">
            <div class="flex sm12 xl12 md12 xs12">
              <div class="flex row align--center">
-                <va-button slot="append" class="mr-2 pa-1 shrink" small @click="cycleNoNumberChange(0)">
-                  0
+                <va-button slot="append" class="mr-2 pa-1 shrink" small @click="cycleNoNumberChange(1)">
+                  1
                </va-button>
                <va-input
                  @keyup.enter="cycleNoNumberChange(cycleNoNumberInput)"
@@ -739,7 +739,7 @@
                class="flex sm12 xl12 md12 xs12"
                value-visible
                v-model="cycleNoNumber"
-                :min="0"
+                :min="1"
                :max="249"
              />
            </div>
@@ -0,0 +1,83 @@
+<template>
+  <div>
+    <fieldset>
+      <va-radio-button
+        option="Auto"
+        v-model="optionValue"
+        label="Auto"
+      />
+      <br v-if="optionValue === 'Auto'"/>
+      <auto-block v-if="optionValue === 'Auto'" :ref="'AutoBlock'" :deviceID="deviceID"/>
+      <va-radio-button
+        option="Advanced"
+        v-model="optionValue"
+        label="Advanced"
+      />
+      <br v-if="optionValue === 'Advanced'"/>
+      <advanced-block v-if="optionValue === 'Advanced'" :ref="'AdvancedBlock'" :deviceID="deviceID"/>
+    </fieldset>
+  </div>
+</template>
+
+<script>
+
+import { taskInfo } from '../../../../data/task/TaskInfo'
+import AutoBlock from '../parameter/item/DPV/AutoBlock'
+import AdvancedBlock from '../parameter/item/DPV/AdvancedBlock'
+
+export default {
+  name: 'EliteParameterRecordingEliteDPV',
+  components: {
+    AutoBlock,
+    AdvancedBlock,
+  },
+  props: {
+    deviceID: {
+      type: Number,
+      required: true,
+    },
+    deviceName: {
+      type: String,
+      default: 'Elite',
+    },
+  },
+  created () {
+  },
+  data () {
+    return {
+      optionValue: 'Auto',
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    mqttPub: function (topic, mes) {
+      this.$mqtt.publish(topic, mes)
+    },
+    // Array[String of Parameter Nmae, Value]
+    deviceParameterChange: function (e) {
+      console.log('e[0],e[1]', e[0], ',', e[1])
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_parameter/0',
+        device: taskInfo.getRawDeviceID(this.deviceID),
+        parameter: e[0],
+        content: e[1],
+      }))
+    },
+    refresh () {
+      if (this.$refs.AutoBlock != null) {
+        this.$refs.AutoBlock.refresh()
+      }
+      if (this.$refs.AdvancedBlock != null) {
+        this.$refs.AdvancedBlock.refresh()
+      }
+    },
+  },
+  mounted () {
+  },
+  watch: {
+  },
+  destroyed () {
+  },
+}
+</script>
@@ -0,0 +1,564 @@
+<template>
+  <div>
+    <div class="row flex sm12 xl12 md12 xs12 align--center my-0 py-0">
+      <va-select
+        @input="workingModeSelectChange(workingModeSelect)"
+        :label="'WORKING MODE'"
+        v-model="workingModeSelect"
+        textBy="description"
+        :options="workingModeOptions"
+        noClear
+      />
+    </div>
+    <!-- EIS -->
+    <div v-if="workingModeSelect != null && workingModeSelect.id == 0">
+      <d-c-volt :ref="'DCVolt'" :deviceID="deviceID" :parameterName="'DC_BIAS'" @parameterChange="deviceParameterChange($event)" />
+      <a-c-amplitude :ref="'ACAmplitude'" :deviceID="deviceID" :parameterName="'AC_AMP'" @parameterChange="deviceParameterChange($event)" />
+      <freq-range :ref="'FreqRange'" :deviceID="deviceID" :parameterName="'FREQ'" @parameterChange="deviceParameterChange($event)" />
+      <points-per-decades :ref="'PointsPerDecades'" :deviceID="deviceID" :parameterName="'PPD'" @parameterChange="deviceParameterChange($event)" />
+      <point-spacing :ref="'PointSpacing'" :deviceID="deviceID" :parameterName="'SCALE'" @parameterChange="deviceParameterChange($event)" />
+      <delay :ref="'Delay'" :deviceID="deviceID" :parameterName="'DELAY'" @parameterChange="deviceParameterChange($event)" />
+      <average :ref="'Average'" :deviceID="deviceID" :parameterName="'AVERAGE_NUM'" @parameterChange="deviceParameterChange($event)" />
+      <current-range :ref="'CurrentRange'" :deviceID="deviceID" :parameterName="'RTIA'" @parameterChange="deviceParameterChange($event)" />
+    </div>
+    <!-- CV -->
+    <div v-if="workingModeSelect != null && workingModeSelect.id == 1">
+      <va-button
+        color="primary"
+        target="_blank"
+        @click="measureEoc()"
+        small>
+        {{measureEocButton.start}}
+      </va-button>
+      <va-button
+        color="danger"
+        target="_blank"
+        @click="measureEocStop()"
+        small>
+        {{measureEocButton.stop}}
+      </va-button>
+      <div class="flex row mt-3 pt-0 sm12 xl12 md12 xs12 align--center">
+        <div class="flex sm12 xl12 md12 xs12 pa-0 ma-0">
+          <p class="display-6">Current Range<p/>
+        </div>
+        <div class="flex sm12 xl12 md12 xs12 pa-0 ma-0" >
+          <level-button :ref="'currentRangeSelect'" :deviceID="deviceID" :options="currentRangeOptions" :parameterName="'ADC_LEVEL_I_15'" @parameterChange="deviceParameterChange($event)" />
+        </div>
+      </div>
+      <div class="flex row mt-0 pt-0 sm12 xl12 md12 xs12 align--center">
+        <div class="flex sm4 xl4 md4 xs4 pa-0 ma-0">
+          <p class="display-6">Voltage Range<p/>
+        </div>
+        <div class="flex sm6 xl6 md6 xs6 pa-0 ma-0" >
+          <level-button :ref="'voltageInRangeSelect'" :deviceID="deviceID" :options="voltageInRangeOptions" :parameterName="'ADC_LEVEL_V_IN_15'" @parameterChange="deviceParameterChange($event)" />
+        </div>
+      </div>
+      <div class="flex row mt-0 pt-0 sm12 xl12 md12 xs12 align--center">
+        <div class="flex sm4 xl4 md4 xs4 pa-0 ma-0">
+          <p class="display-6">High Z<p/>
+        </div>
+        <div class="flex sm6 xl6 md6 xs6 pa-0 ma-0" >
+          <level-button :ref="'highzSelect'" :deviceID="deviceID" :options="highzOptions" :parameterName="'CTRL_HIGH_Z_15'" @parameterChange="deviceParameterChange($event)" />
+        </div>
+      </div>
+      <div class="flex row mt-0 pt-0 sm12 xl12 md12 xs12 align--center">
+        <div class="flex sm4 xl4 md4 xs4 pa-0 ma-0">
+          <p class="display-6">Voltage Initial<p/>
+        </div>
+        <div class="flex sm6 xl6 md6 xs6 pa-0 ma-0" >
+          <volt-range :ref="'voltInitialNumber'" :deviceID="deviceID" :parameterName="'VOLT_INITIAL'" :minValue="-5" :maxValue="5" @parameterChange="deviceParameterChange($event)" />
+        </div>
+      </div>
+      <div class="flex row mt-0 pt-0 sm12 xl12 md12 xs12 align--center">
+        <div class="flex sm4 xl4 md4 xs4 pa-0 ma-0">
+          <p class="display-6">Voltage Max<p/>
+        </div>
+        <div class="flex sm6 xl6 md6 xs6 pa-0 ma-0" >
+          <volt-range :ref="'voltMaxNumber'" :deviceID="deviceID" :parameterName="'VOLT_MAX'" :minValue="-5" :maxValue="5" @parameterChange="deviceParameterChange($event)" />
+        </div>
+      </div>
+      <div class="flex row mt-0 pt-0 sm12 xl12 md12 xs12 align--center">
+        <div class="flex sm4 xl4 md4 xs4 pa-0 ma-0">
+          <p class="display-6">Voltage Min<p/>
+        </div>
+        <div class="flex sm6 xl6 md6 xs6 pa-0 ma-0" >
+          <volt-range :ref="'voltMinNumber'" :deviceID="deviceID" :parameterName="'VOLT_MIN'" :minValue="-5" :maxValue="5" @parameterChange="deviceParameterChange($event)" />
+        </div>
+      </div>
+      <div class="flex row mt-0 pt-0 sm12 xl12 md12 xs12 align--center">
+        <div class="flex sm4 xl4 md4 xs4 pa-0 ma-0">
+          <p class="display-6">Voltage Scan Rate<p/>
+        </div>
+        <div class="flex sm6 xl6 md6 xs6 pa-0 ma-0" >
+          <scan-rate-range :ref="'voltScanRateNumber'" :deviceID="deviceID" :parameterName="'Scan_Rate'" :minValue="0.01" :maxValue="1000" @parameterChange="deviceParameterChange($event)" />
+        </div>
+      </div>
+      <div class="flex row mt-0 pt-0 sm12 xl12 md12 xs12 align--center">
+        <div class="flex sm4 xl4 md4 xs4 pa-0 ma-0">
+          <p class="display-6">Resolution<p/>
+        </div>
+        <div class="flex sm6 xl6 md6 xs6 pa-0 ma-0" >
+          <resolution-range :ref="'sampleRateNumber'" :deviceID="deviceID" :parameterName="'SAMPLE_RATE'" :minValue="0.1" :maxValue="100" @parameterChange="deviceParameterChange($event)" />
+        </div>
+      </div>
+      <div class="flex row mt-0 pt-0 sm12 xl12 md12 xs12 align--center">
+        <div class="flex sm4 xl4 md4 xs4 pa-0 ma-0">
+          <p class="display-6">Cycle<p/>
+        </div>
+        <div class="flex sm6 xl6 md6 xs6 pa-0 ma-0" >
+          <cycle-range :ref="'cycleNoNumber'" :deviceID="deviceID" :parameterName="'CYCLE_NUMBER'" :minValue="1" :maxValue="50000" @parameterChange="deviceParameterChange($event)" />
+        </div>
+      </div>
+    </div>
+
+    <!-- DEV -->
+    <va-tree-category
+      v-if="workingModeSelect != null && workingModeSelect.id == 2"
+      style="font-size: 20px;"
+      :label="'RIS instruction (HEX)'">
+      <div class="row">
+        <div class="flex sm12 xl12 md12 xs12">
+          <div class="flex row align--center">
+            <va-input
+              @keyup.enter="instruParameterChange([instru.parameterName, instru.write])"
+              @blur="instruParameterChange([instru.parameterName, instru.write])"
+              class="mb-0"
+              v-model="instru.write"
+              label="Write value (0x3000FF ... )"
+              style="width: 100px;"
+              maxlength="34"
+            />
+            <va-button slot="append" class="mr-2 pa-1 shrink" style="width: 2em; height: 2em; border-radius: 50%; font-size: 20px;" small @click="sendInstr()">
+              W
+            </va-button>
+          </div>
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="flex sm12 xl12 md12 xs12">
+          <div class="flex row align--center">
+            <va-input
+              disabled="disabled"
+              class="mb-0"
+              v-model="instru.read"
+              label="Read value"
+              style="width: 100px; font-size: 30px;"
+            />
+            <va-button slot="append" class="mr-2 pa-1 shrink" style="width: 2em; height: 2em; border-radius: 50%; font-size: 20px;" small @click="readCisData()">
+              R
+            </va-button>
+          </div>
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="flex sm12 xl12 md12 xs12">
+          <div class="flex row align--center">
+            <va-input
+              disabled="disabled"
+              class="mb-0"
+              v-model="instru.notify"
+              label="Notify value"
+              style="width: 100px;"
+            />
+            <va-button slot="append" class="mr-2 pa-1 shrink" style="width: 2em; height: 2em; border-radius: 50%; font-size: 20px;" small @click="detect()">
+              N
+            </va-button>
+          </div>
+        </div>
+      </div>
+    </va-tree-category>
+
+    <va-tree-category
+      v-if="workingModeSelect != null && workingModeSelect.id == 2"
+      style="font-size: 20px;"
+      :label="'VIS & CIS instruction'">
+      <va-card>
+        <div class="row">
+          <div class="flex sm12 xl12 md12 xs12">
+            <div class="flex row align--center">
+              <va-input
+                disabled="disabled"
+                class="mb-0"
+                v-model="instru.read"
+                label="Read value"
+                style="width: 100px; font-size: 30px;"
+              />
+              <va-button slot="append" class="mr-2 pa-1 shrink" style="width: 2em; height: 2em; border-radius: 50%; font-size: 20px;" small @click="readCisData()">
+                R
+              </va-button>
+            </div>
+          </div>
+        </div>
+
+        <div>
+          <va-button class="mr-2 pa-1" style="width: 4em; height: 2em; font-size: 15px;" small @click="detect()">
+            Detect
+          </va-button>
+        </div>
+        <div>
+          <va-button class="mr-2 pa-1" style="width: 4em; height: 2em; font-size: 15px;" small @click="version()">
+            Version
+          </va-button>
+        </div>
+        <div>
+          <va-button class="mr-2 pa-1" style="width: 4em; height: 2em; font-size: 15px;" small @click="battery()">
+            Battery
+          </va-button>
+        </div>
+
+      </va-card>
+    </va-tree-category>
+  </div>
+</template>
+
+<script>
+
+import { taskInfo } from '../../../../data/task/TaskInfo.js'
+import DCVolt from '../parameter/item/EIS/DCVolt.vue'
+import ACAmplitude from '../parameter/item/EIS/ACAmplitude.vue'
+import FreqRange from '../parameter/item/EIS/FreqRange.vue'
+import PointsPerDecades from '../parameter/item/EIS/PointsPerDecades.vue'
+import PointSpacing from '../parameter/item/EIS/PointSpacing.vue'
+import Delay from '../parameter/item/EIS/Delay.vue'
+import Average from '../parameter/item/EIS/Average.vue'
+import CurrentRange from '../parameter/item/EIS/CurrentRange.vue'
+// import SingalMode from '../parameter/item/EIS/SingalMode'
+
+// CV
+import LevelButton from '../parameter/item/LevelButton.vue'
+import VoltRange from '../parameter/item/EIS/VoltRange.vue'
+import ScanRateRange from '../parameter/item/ScanRateRange.vue'
+import ResolutionRange from '../parameter/item/ResolutionRange.vue'
+import CycleRange from '../parameter/item/CycleRange.vue'
+
+export default {
+  name: 'EliteParameterRecordingEliteEIS',
+  components: {
+    DCVolt,
+    ACAmplitude,
+    FreqRange,
+    PointsPerDecades,
+    PointSpacing,
+    Delay,
+    Average,
+    CurrentRange,
+    LevelButton,
+    VoltRange,
+    ScanRateRange,
+    ResolutionRange,
+    CycleRange,
+  },
+  props: {
+    deviceID: {
+      type: Number,
+      required: true,
+    },
+    deviceName: {
+      type: String,
+      default: 'Elite',
+    },
+  },
+  created () {
+  },
+  data () {
+    return {
+      workingModeSelect: {
+        id: -1,
+        description: 'Init',
+      },
+      workingModeOptions: [
+        {
+          id: 0,
+          description: 'Potentiostatic Electrochemical Impedance Spectroscopy',
+        },
+        {
+          id: 1,
+          description: 'CV',
+        },
+        {
+          id: 2,
+          description: 'Dev Tools',
+        },
+      ],
+      DCVolt: null,
+      AC_AMP: null,
+      FreqStart: null,
+      FreqStop: null,
+      PointsPerDecades: null,
+      PointSpacing: null,
+      Delay: null,
+      Average: null,
+      CurrentRange: null,
+      instru: {
+        write: '',
+        read: '',
+        notify: '',
+      },
+      measureEocButton: {
+        start: 'OCP',
+        stop: 'Stop',
+        status: false,
+      },
+      // CV
+      currentRangeSelect: null,
+      currentRangeOptions: [
+        {
+          value: 0,
+          label: '<1.5 μA',
+        },
+        {
+          value: 1,
+          label: '1-60 μA',
+        },
+        {
+          value: 2,
+          label: '40-175 μA',
+        },
+        {
+          value: 3,
+          label: '>120 uA',
+        },
+        {
+          value: 4,
+          label: 'Auto',
+        },
+      ],
+      voltageInRangeSelect: null,
+      voltageInRangeOptions: [
+        {
+          value: 0,
+          label: '1',
+        },
+        {
+          value: 1,
+          label: '2',
+        },
+        {
+          value: 2,
+          label: '3',
+        },
+        {
+          value: 3,
+          label: 'Auto',
+        },
+      ],
+      highzSelect: null,
+      highzOptions: [
+        {
+          value: 0,
+          label: 'On',
+        },
+        {
+          value: 1,
+          label: 'Off',
+        },
+      ],
+      voltInitialNumber: null,
+      stopVoltMaxNumber: null,
+      stopVoltMinNumber: null,
+      voltScanRateNumber: null,
+      sampleRateNumber: null,
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    mqttPub: function (topic, mes) {
+      this.$mqtt.publish(topic, mes)
+    },
+    // Array[String of Parameter Nmae, Value]
+    deviceParameterChange: function (e) {
+      console.log('e[0],e[1]', e[0], ',', e[1])
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_parameter/0',
+        device: taskInfo.getRawDeviceID(this.deviceID),
+        parameter: e[0],
+        content: e[1],
+      }))
+    },
+    measureEoc () {
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_instruction/0',
+        device: taskInfo.getRawDeviceID(this.deviceID),
+        instruction: 'VIS_CC_ZERO',
+      }))
+      this.measureEocButton.status = true
+    },
+    measureEocStop () {
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_instruction/0',
+        device: taskInfo.getRawDeviceID(this.deviceID),
+        instruction: 'interrupt',
+      }))
+      this.measureEocButton.status = false
+    },
+    refresh () {
+      this.workingModeSelect = this.workingModeOptions[taskInfo.getDeviceInfo(this.deviceID).parameterSet.MODE]
+      if (this.workingModeSelect != null) {
+        this.workingModeSelectChange(this.workingModeSelect)
+      }
+      this.ACAmplitude = String(Math.round((taskInfo.getDeviceInfo(this.deviceID).parameterSet.AC_AMP) / 2047 * 800))
+      if (this.$refs.ACAmplitude != null) {
+        this.$refs.ACAmplitude.itemChange(this.ACAmplitude)
+      }
+      this.Average = taskInfo.getDeviceInfo(this.deviceID).parameterSet.AVERAGE_NUM
+      if (this.$refs.Average != null) {
+        this.$refs.Average.itemChange(this.Average)
+      }
+      this.CurrentRange = taskInfo.getDeviceInfo(this.deviceID).parameterSet.RTIA
+      if (this.$refs.CurrentRange != null) {
+        this.$refs.CurrentRange.itemChange(this.CurrentRange)
+      }
+      this.PointSpacing = taskInfo.getDeviceInfo(this.deviceID).parameterSet.SCALE
+      if (this.$refs.PointSpacing != null) {
+        this.$refs.PointSpacing.itemChange(this.PointSpacing)
+      }
+      this.DCVolt = String(Math.round((taskInfo.getDeviceInfo(this.deviceID).parameterSet.DC_BIAS) * 2200 / 4095))
+      if (this.$refs.DCVolt != null) {
+        this.$refs.DCVolt.itemChange(this.DCVolt)
+      }
+      this.Delay = String(parseFloat((taskInfo.getDeviceInfo(this.deviceID).parameterSet.DELAY) / 10).toFixed(1))
+      if (this.$refs.Delay != null) {
+        this.$refs.Delay.itemChange(this.Delay)
+      }
+      this.FreqStart = String(parseFloat(Math.round(parseFloat((taskInfo.getDeviceInfo(this.deviceID).parameterSet.FREQ_START * 0.0149) * 100)) / 100).toFixed(1)) === '0.0' ? '0.015' : String(parseFloat(Math.round(parseFloat((taskInfo.getDeviceInfo(this.deviceID).parameterSet.FREQ_START * 0.0149) * 100)) / 100).toFixed(1))
+      if (this.$refs.FreqRange != null) {
+        this.$refs.FreqRange.itemChangeMin(this.FreqStart)
+      }
+      this.FreqStop = String(parseFloat(Math.round(parseFloat((taskInfo.getDeviceInfo(this.deviceID).parameterSet.FREQ_STOP * 0.0149) * 100)) / 100).toFixed(1)) === '0.0' ? '0.015' : String(parseFloat(Math.round(parseFloat((taskInfo.getDeviceInfo(this.deviceID).parameterSet.FREQ_STOP * 0.0149) * 100)) / 100).toFixed(1))
+      if (this.$refs.FreqRange != null) {
+        this.$refs.FreqRange.itemChangeMax(this.FreqStop)
+      }
+      this.PointsPerDecades = String(Math.round((taskInfo.getDeviceInfo(this.deviceID).parameterSet.PPD)))
+      if (this.$refs.PointsPerDecades != null) {
+        this.$refs.PointsPerDecades.itemChange(this.PointsPerDecades)
+      }
+
+      // CV
+      this.currentRangeSelect = taskInfo.getDeviceInfo(this.deviceID).parameterSet.ADC_LEVEL_I_15
+      if (this.$refs.currentRangeSelect != null) {
+        this.$refs.currentRangeSelect.updateLevelButton(this.currentRangeSelect)
+      }
+
+      this.voltageInRangeSelect = taskInfo.getDeviceInfo(this.deviceID).parameterSet.ADC_LEVEL_V_IN_15
+      if (this.$refs.voltageInRangeSelect != null) {
+        this.$refs.voltageInRangeSelect.updateLevelButton(this.voltageInRangeSelect)
+      }
+
+      this.highzSelect = taskInfo.getDeviceInfo(this.deviceID).parameterSet.CTRL_HIGH_Z_15
+      if (this.$refs.highzSelect != null) {
+        this.$refs.highzSelect.updateLevelButton(this.highzSelect)
+      }
+
+      this.stopVoltMaxNumber = this.voltInitialNumber = (taskInfo.getDeviceInfo(this.deviceID).parameterSet.VOLTSTOP_MAX - 25000) / 5
+      if (this.$refs.stopVoltMaxNumber != null) {
+        this.$refs.stopVoltMaxNumber.updateVoltNumber(this.stopVoltMaxNumber)
+      }
+
+      this.stopVoltMinNumber = (taskInfo.getDeviceInfo(this.deviceID).parameterSet.VOLTSTOP_MIN - 25000) / 5
+      if (this.$refs.stopVoltMinNumber != null) {
+        this.$refs.stopVoltMinNumber.updateVoltNumber(this.stopVoltMinNumber)
+      }
+
+      this.voltInitialNumber = (taskInfo.getDeviceInfo(this.deviceID).parameterSet.VOLT_INITIAL - 25000) / 5
+      if (this.$refs.voltInitialNumber != null) {
+        this.$refs.voltInitialNumber.updateVoltNumber(this.voltInitialNumber)
+      }
+
+      this.voltScanRateNumber = taskInfo.getDeviceInfo(this.deviceID).parameterSet.Scan_Rate
+      if (this.$refs.voltScanRateNumber != null) {
+        this.$refs.voltScanRateNumber.updateVoltScanRateNumber(this.voltScanRateNumber)
+      }
+
+      this.sampleRateNumber = taskInfo.getDeviceInfo(this.deviceID).parameterSet.SAMPLE_RATE
+      if (this.$refs.sampleRateNumber != null) {
+        this.$refs.sampleRateNumber.updateResolutionNumber(this.sampleRateNumber)
+      }
+
+      this.instru.read = (taskInfo.getDeviceInfo(this.deviceID).parameterSet.ADC_VALUE_I).toString(16).toUpperCase()
+    },
+    workingModeSelectChange (val) {
+      if (this.workingModeSelect.id === -1) {
+        return false
+      }
+
+      this.workingModeSelect = val
+
+      if (this.workingModeSelect.id !== taskInfo.getDeviceInfo(this.deviceID).parameterSet.MODE) {
+        this.deviceParameterChange(['MODE', this.workingModeSelect.id])
+        console.log(this.workingModeSelect.id, this.workingModeSelect.description)
+      }
+    },
+    instruParameterChange: function (e) {
+      while (e[1].length <= 33) {
+        e[1] = e[1] + '0'
+      }
+
+      const sendIns = new Array(17).fill(0)
+      for (let i = 0; i <= 16; i++) {
+        const startIndex = i * 2
+        sendIns[i] = e[1].substring(startIndex, startIndex + 2)
+        sendIns[i] = parseInt(sendIns[i], 16)
+      }
+
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_parameter/0',
+        device: taskInfo.getRawDeviceID(this.deviceID),
+        parameter: 'BLE_WRITE',
+        content: '0:16=' + String(sendIns),
+      }))
+    },
+    sendInstr () {
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_instruction/0',
+        device: taskInfo.getRawDeviceID(this.deviceID),
+        instruction: 'ble_instru_send',
+      }))
+    },
+    readCisData () {
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_parameter_value/0',
+        device: taskInfo.getRawDeviceID(this.deviceID),
+        parameter: 'ADC_VALUE_I',
+      }))
+    },
+    detect () {
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_instruction/0',
+        device: taskInfo.getRawDeviceID(this.deviceID),
+        instruction: 'VIS_DEVICE_DETECT',
+      }))
+      setTimeout(() => {
+        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+          header: 'device_instruction/0',
+          device: taskInfo.getRawDeviceID(this.deviceID),
+          instruction: 'VIS_DEVICE_DONE',
+        }))
+      }, 5000)
+    },
+    version () {
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_instruction/0',
+        device: taskInfo.getRawDeviceID(this.deviceID),
+        instruction: 'dev_version',
+      }))
+    },
+    battery () {
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_instruction/0',
+        device: taskInfo.getRawDeviceID(this.deviceID),
+        instruction: 'dev_battery',
+      }))
+    },
+  },
+  mounted () {
+    this.refresh()
+  },
+  watch: {
+  },
+  destroyed () {
+  },
+}
+</script>
@@ -0,0 +1,190 @@
+<template>
+  <div>
+    <SlickList lockAxis="y" class="long-list" :pressDelay='300' v-model="blockList" @sort-end="dragEnd">
+      <SlickItem v-for="(block, i) in blockList" :key="block.id" :index="i">
+        <segment-block :ref="'SegmentBlock'" :deviceID="deviceID" :segmentIndex="i" :segmentID="block.id" @deleteBlock="deleteBlock"/>
+      </SlickItem>
+    </SlickList>
+    <div style="text-align: center;">
+      <va-button :disabled="this.blockList.length >= 4" @click="addSegmentBlock">
+        +
+      </va-button>
+    </div>
+
+    <va-tree-root>
+      <va-tree-category
+        style="font-size: 20px;"
+        :label="'Advanced Setting'">
+        <va-tree-node>
+          <!-- <data-number :ref="'DataNumber'" :deviceID="deviceID" :parameterName="'DataNumber'" @parameterChange="deviceParameterChange($event)" /> -->
+          <data-output :ref="'DataOutput'" :deviceID="deviceID" :parameterName="'DATA_OUTPUT'" @parameterChange="deviceParameterChange($event)" />
+          <cycle-number :ref="'CycleNumber'" :deviceID="deviceID" :parameterName="'CYCLE_NUMBER'" @parameterChange="deviceParameterChange($event)" />
+        </va-tree-node>
+      </va-tree-category>
+    </va-tree-root>
+  </div>
+</template>
+
+<script>
+
+import { taskInfo } from '../../../../data/task/TaskInfo'
+import SegmentBlock from '../parameter/item/PulseSensing/SegmentBlock'
+// import DataNumber from '../parameter/item/PulseSensing/DataNumber'
+import DataOutput from '../parameter/item/PulseSensing/DataOutput'
+import CycleNumber from '../parameter/item/PulseSensing/CycleNumber'
+import { SlickList, SlickItem } from 'vue-slicksort'
+import _ from 'lodash'
+
+export default {
+  name: 'EliteParameterRecordingElitePulseSensing',
+  components: {
+    SegmentBlock,
+    // DataNumber,
+    DataOutput,
+    CycleNumber,
+    SlickList,
+    SlickItem,
+  },
+  props: {
+    deviceID: {
+      type: Number,
+      required: true,
+    },
+    deviceName: {
+      type: String,
+      default: 'Elite',
+    },
+  },
+  created () {
+  },
+  data () {
+    return {
+      blockList: [],
+      maxSegment: 4,
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    mqttPub: function (topic, mes) {
+      this.$mqtt.publish(topic, mes)
+    },
+    // Array[String of Parameter Nmae, Value]
+    deviceParameterChange: function (e) {
+      console.log('e[0],e[1]', e[0], ',', e[1])
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_parameter/0',
+        device: taskInfo.getRawDeviceID(this.deviceID),
+        parameter: e[0],
+        content: e[1],
+      }))
+    },
+    updateSegmentOrderParam () {
+      for (let i = 0; i < this.blockList.length; i++) {
+        const id = this.blockList[i].id
+        this.deviceParameterChange(['segment_ui_order_' + i, id + 1]) // 因為json那邊不能設負數（最小為0），所以有設segment的話傳過去的值要+1
+        this.deviceParameterChange(['segment_order_' + String(id), i + 1]) // 因為json那邊不能設負數（最小為0），所以有設segment的話傳過去的值要+1
+      }
+    },
+    clearSegmentOrderParam () {
+      const newIDArray = []
+      for (let i = 0; i < this.blockList.length; i++) {
+        const id = this.blockList[i].id
+        newIDArray.push(id)
+      }
+      for (let i = 0; i < newIDArray.length; i++) {
+        const id = newIDArray[i]
+        this.deviceParameterChange(['segment_ui_order_' + String(i), id + 1])
+        this.deviceParameterChange(['segment_order_' + String(id), i + 1])
+      }
+      for (let i = newIDArray.length; i < this.maxSegment; i++) {
+        this.deviceParameterChange(['segment_ui_order_' + String(i), 0]) // 因為json那邊不能設負數（最小為0），所以將沒有用到的segment ID設為0
+      }
+
+      const totalIDArray = []
+      for (let i = 0; i < this.maxSegment; i++) {
+        totalIDArray.push(i)
+      }
+      const diff = _.differenceWith(totalIDArray, newIDArray, _.isEqual) // 兩array的差集
+      for (let i = 0; i < diff.length; i++) {
+        const id = diff[i]
+        this.deviceParameterChange(['segment_order_' + String(id), 0]) // 因為json那邊不能設負數（最小為0），所以將沒有用到的segment ID設為0
+      }
+    },
+    addSegmentBlock () {
+      let availableID
+      for (let i = 0; i < this.maxSegment; i++) {
+        if (this.blockList.some(block => block.id === i) === false) { // ref: https://www.tutorialrepublic.com/faq/how-to-check-if-an-array-includes-an-object-in-javascript.php
+          availableID = i
+          break
+        }
+      }
+      this.blockList.push({ id: availableID })
+      this.updateSegmentOrderParam()
+    },
+    deleteBlock (segmentID) {
+      let deleteIndex = 0
+      for (let i = 0; i < this.blockList.length; i++) {
+        if (this.blockList[i].id === segmentID) {
+          deleteIndex = i
+          break
+        }
+      }
+      this.blockList.splice(deleteIndex, 1) // splice(starting index, how many values to remove);
+      this.clearSegmentOrderParam()
+    },
+    dragEnd (event) {
+      // console.log(this.blockList) // 尚未變換順序前的list
+      // console.log(event)
+      // console.log(event.newIndex)
+      // console.log(event.oldIndex)
+
+      // one-line swap two element of array, ref: https://stackoverflow.com/questions/872310/javascript-swap-array-elements
+      [this.blockList[event.oldIndex], this.blockList[event.newIndex]] = [this.blockList[event.newIndex], this.blockList[event.oldIndex]]
+      this.updateSegmentOrderParam()
+    },
+    refresh () {
+      const segmentOrderDict = {}
+      let order = 0
+      for (let i = 0; i < this.maxSegment; i++) {
+        const id = taskInfo.getDeviceInfo(this.deviceID).parameterSet['segment_ui_order_' + String(i)]
+        if (id > 0) {
+          segmentOrderDict[order] = id - 1 // 因為json那邊不能設負數，所以json上ID value = 0為沒設定此segment，有設的話實際ID要扣1回來
+          order += 1
+        }
+      }
+      const orderIDList = Object.values(segmentOrderDict)
+      this.blockList.length = 0
+      for (let i = 0; i < orderIDList.length; i++) {
+        if (this.blockList.some(block => block.id === orderIDList[i]) === false) {
+          this.blockList.push({ id: orderIDList[i] })
+        }
+      }
+      if (this.$refs.SegmentBlock != null) {
+        for (let i = 0; i < this.$refs.SegmentBlock.length; i++) {
+          this.$refs.SegmentBlock[i].refresh()
+        }
+      }
+      if (this.$refs.DataOutput != null) {
+        this.$refs.DataOutput.refresh()
+      }
+      if (this.$refs.CycleNumber != null) {
+        this.$refs.CycleNumber.refresh()
+      }
+    },
+  },
+  mounted () {
+  },
+  watch: {
+  },
+  destroyed () {
+  },
+}
+</script>
+
+<style scoped>
+  .long-list {
+    max-height: 300px;
+    overflow: auto;
+  }
+</style>
@@ -0,0 +1,888 @@
+<template>
+  <div class="flex">
+    <va-tree-root>
+      <div class="row pt-0 pb-0">
+        <div class="flex sm12 xl12 md12 xs12">
+          <va-select
+            @input="workingModeSelectChange(workingModeSelect)"
+            :label="'WORKING MODE'"
+            v-model="workingModeSelect"
+            textBy="description"
+            :options="workingModeOptions"
+            noClear
+            style="width: 200px;"
+          />
+          <va-button
+            v-if="!measureEocButton.status && workingModeSelect != null && (workingModeSelect.id == 7 || workingModeSelect.id == 8 || workingModeSelect.id == 9)"
+            color="primary"
+            target="_blank"
+            @click="measureEoc()"
+            small>
+            {{measureEocButton.start}}
+          </va-button>
+          <va-button
+            v-if="measureEocButton.status && workingModeSelect != null && (workingModeSelect.id == 7 || workingModeSelect.id == 8 || workingModeSelect.id == 9)"
+            color="danger"
+            target="_blank"
+            @click="measureEocStop()"
+            small>
+            {{measureEocButton.stop}}
+          </va-button>
+        </div>
+      </div>
+
+      <!-- 1.5ui -->
+      <va-tree-category
+        v-if="workingModeSelect != null && workingModeSelect.id == 0 || workingModeSelect.id == 1 || workingModeSelect.id == 5 || workingModeSelect.id == 6 || workingModeSelect.id == 7 || workingModeSelect.id == 8 || workingModeSelect.id == 9 || workingModeSelect.id == 11"
+        style="font-size: 20px;"
+        :label="'Range ( ' + currentRangeOptions[currentRangeSelect].label + ' )'">
+        <va-tree-node>
+          <level-button :ref="'currentRangeSelect'" :deviceID="deviceID" :options="currentRangeOptions" :parameterName="'ADC_LEVEL_I_15'" @parameterChange="deviceParameterChange($event)" />
+        </va-tree-node>
+      </va-tree-category>
+
+      <va-tree-category
+        v-if="workingModeSelect != null && workingModeSelect.id == 0 || workingModeSelect.id == 1 || workingModeSelect.id == 4 ||workingModeSelect.id == 6 || workingModeSelect.id == 7 || workingModeSelect.id == 8 || workingModeSelect.id == 9 || workingModeSelect.id == 11 || workingModeSelect.id == 13"
+        style="font-size: 20px;"
+        :label="'Range ( ' + voltageInRangeOptions[voltageInRangeSelect].label + ' )'">
+        <va-tree-node>
+          <level-button :ref="'voltageInRangeSelect'" :deviceID="deviceID" :options="voltageInRangeOptions" :parameterName="'ADC_LEVEL_V_IN_15'" @parameterChange="deviceParameterChange($event)" />
+        </va-tree-node>
+      </va-tree-category>
+
+      <va-tree-category
+        v-if="workingModeSelect != null && workingModeSelect.id == 0 || workingModeSelect.id == 1 || workingModeSelect.id == 2 || workingModeSelect.id == 3 || workingModeSelect.id == 4 || workingModeSelect.id == 5 || workingModeSelect.id == 6 || workingModeSelect.id == 7 || workingModeSelect.id == 8 || workingModeSelect.id == 9 || workingModeSelect.id == 10"
+        style="font-size: 20px;"
+        :label="'HighZ ( ' + highzOptions[highzSelect].label + ' )'">
+        <va-tree-node>
+          <level-button :ref="'highzSelect'" :deviceID="deviceID" :options="highzOptions" :parameterName="'CTRL_HIGH_Z_15'" @parameterChange="deviceParameterChange($event)" />
+        </va-tree-node>
+      </va-tree-category>
+
+      <va-tree-category
+        v-if="workingModeSelect != null && workingModeSelect.id == 11"
+        style="font-size: 20px;"
+        :label="'Cali Channel ( ' + caliChannelOptions[caliChannelSelect].label + ' )'">
+        <va-tree-node>
+          <level-button :ref="'caliChannelSelect'" :deviceID="deviceID" :options="caliChannelOptions" :parameterName="'ADC_DAC_CHANNEL_15'" @parameterChange="deviceParameterChange($event)" />
+        </va-tree-node>
+      </va-tree-category>
+
+      <va-tree-category
+        v-if="workingModeSelect != null && workingModeSelect.id == 10"
+        style="font-size: 20px;"
+        :label="'cali Volt ( ' + caliVoltNumber + ' )'">
+        <va-tree-node>
+          <cycle-range :ref="'caliVoltNumber'" :deviceID="deviceID" :parameterName="'DAC_VOLT'" :minValue="0" :maxValue="65535" @parameterChange="deviceParameterChange($event)" />
+        </va-tree-node>
+      </va-tree-category>
+
+      <va-tree-category
+        v-if="workingModeSelect != null && workingModeSelect.id == 0 || workingModeSelect.id == 1"
+        style="font-size: 20px;"
+        :label="'Volt start ( ' + startVoltNumber/1000 + 'V )'">
+        <va-tree-node>
+          <volt-range :ref="'startVoltNumber'" :deviceID="deviceID" :parameterName="'VOLT_ORIGIN'" :minValue="-5" :maxValue="5" @parameterChange="deviceParameterChange($event)" />
+        </va-tree-node>
+      </va-tree-category>
+
+      <va-tree-category
+        v-if="workingModeSelect != null && workingModeSelect.id == 0 || workingModeSelect.id == 1"
+        style="font-size: 20px;"
+        :label="'Volt stop ( ' + stopVoltNumber/1000 + 'V )'">
+        <va-tree-node>
+          <volt-range :ref="'stopVoltNumber'" :deviceID="deviceID" :parameterName="'VOLT_FINAL'" :minValue="-5" :maxValue="5" @parameterChange="deviceParameterChange($event)" />
+        </va-tree-node>
+      </va-tree-category>
+
+      <va-tree-category
+        v-if="workingModeSelect != null && workingModeSelect.id == 0 || workingModeSelect.id == 1"
+        style="font-size: 20px;"
+        :label="'Volt step ( ' + stepVoltNumber/10 + 'mV )'">
+        <va-tree-node>
+          <milli-volt-range :ref="'stepVoltNumber'" :deviceID="deviceID" :parameterName="'VOLT_STEP'" :minValue="0.2" :maxValue="100" @parameterChange="deviceParameterChange($event)" />
+        </va-tree-node>
+      </va-tree-category>
+
+      <va-tree-category
+        v-if="workingModeSelect != null && workingModeSelect.id == 0 || workingModeSelect.id == 1"
+        style="font-size: 20px;"
+        :label="'Step time ( ' + stepTimeOptions[stepTimeSelect].label + ' )'">
+        <va-tree-node>
+          <level-button :ref="'stepTimeSelect'" :deviceID="deviceID" :options="stepTimeOptions" :parameterName="'STEP_TIME'" @parameterChange="deviceParameterChange($event)" />
+        </va-tree-node>
+      </va-tree-category>
+
+      <va-tree-category
+        v-if="workingModeSelect != null && workingModeSelect.id == 2 || workingModeSelect.id == 3 || workingModeSelect.id == 5"
+        style="font-size: 20px;"
+        :label="'Volt out ( ' + outputVoltNumber/1000 + 'V )'">
+        <va-tree-node>
+          <volt-range :ref="'outputVoltNumber'" :deviceID="deviceID" :parameterName="'DAC_VOLT'" :minValue="-5" :maxValue="5" @parameterChange="deviceParameterChange($event)" />
+        </va-tree-node>
+      </va-tree-category>
+
+      <va-tree-category
+        v-if="workingModeSelect != null && workingModeSelect.id == 0 || workingModeSelect.id == 1 || workingModeSelect.id == 2 || workingModeSelect.id == 3 || workingModeSelect.id == 4 || workingModeSelect.id == 5 || workingModeSelect.id == 6 || workingModeSelect.id == 13"
+        style="font-size: 20px;"
+        :label="'Sample rate ( ' + sampleRateNumber/10 + 'sps )'">
+        <va-tree-node>
+          <resolution-range :ref="'sampleRateNumber'" :deviceID="deviceID" :parameterName="'SAMPLE_RATE'" :minValue="0.1" :maxValue="100" @parameterChange="deviceParameterChange($event)" />
+        </va-tree-node>
+      </va-tree-category>
+
+      <va-tree-category
+        v-if="workingModeSelect != null && workingModeSelect.id == 6"
+        style="font-size: 20px;"
+        :label="'Charge ( ' + chargeOptions[chargeSelect].label + ' )'">
+        <va-tree-node>
+          <opp-level-button :ref="'chargeSelect'" :deviceID="deviceID" :options="chargeOptions" :parameterName="'Charge'" @parameterChange="deviceParameterChange($event)" />
+        </va-tree-node>
+      </va-tree-category>
+
+      <va-tree-category
+        v-if="workingModeSelect != null && workingModeSelect.id == 6"
+        style="font-size: 20px;"
+        :label="'Current ( ' + parseFloat(currentNumber / 100) + 'μA )'">
+        <va-tree-node>
+          <micro-ampere-range :ref="'currentNumber'" :deviceID="deviceID" :parameterName="'Const_Current_value'" :minValue="0" :maxValue="15000" @parameterChange="deviceParameterChange($event)" />
+        </va-tree-node>
+      </va-tree-category>
+
+      <va-tree-category
+        v-if="workingModeSelect != null && workingModeSelect.id == 6"
+        style="font-size: 20px;"
+        :label="'Volt max stop ( ' + stopVoltMaxNumber/1000 + 'V )'">
+        <va-tree-node>
+          <volt-range :ref="'stopVoltMaxNumber'" :deviceID="deviceID" :parameterName="'VOLTSTOP_MAX'" :minValue="-5" :maxValue="5" @parameterChange="deviceParameterChange($event)" />
+        </va-tree-node>
+      </va-tree-category>
+
+      <va-tree-category
+        v-if="workingModeSelect != null && workingModeSelect.id == 6"
+        style="font-size: 20px;"
+        :label="'Volt min stop ( ' + stopVoltMinNumber/1000 + 'V )'">
+        <va-tree-node>
+          <volt-range :ref="'stopVoltMinNumber'" :deviceID="deviceID" :parameterName="'VOLTSTOP_MIN'" :minValue="-5" :maxValue="5" @parameterChange="deviceParameterChange($event)" />
+        </va-tree-node>
+      </va-tree-category>
+
+      <va-tree-category
+        v-if="workingModeSelect != null && workingModeSelect.id == 7 || workingModeSelect.id == 8"
+        style="font-size: 20px;"
+        :label="'E-Initial ( ' + voltInitialNumber/1000 + 'V )'">
+        <va-tree-node>
+          <volt-range :ref="'voltInitialNumber'" :deviceID="deviceID" :parameterName="'VOLT_INITIAL'" :minValue="-5" :maxValue="5" @parameterChange="deviceParameterChange($event)" />
+        </va-tree-node>
+      </va-tree-category>
+
+      <va-tree-category
+        v-if="workingModeSelect != null && workingModeSelect.id == 7"
+        style="font-size: 20px;"
+        :label="'E1 ( ' + voltMaxNumber/1000 + 'V )'">
+        <va-tree-node>
+          <volt-range :ref="'voltMaxNumber'" :deviceID="deviceID" :parameterName="'VOLT_MAX'" :minValue="-5" :maxValue="5" @parameterChange="deviceParameterChange($event)" />
+        </va-tree-node>
+      </va-tree-category>
+
+      <va-tree-category
+        v-if="workingModeSelect != null && workingModeSelect.id == 7"
+        style="font-size: 20px;"
+        :label="'E2 ( ' + voltMinNumber/1000 + 'V )'">
+        <va-tree-node>
+          <volt-range :ref="'voltMinNumber'" :deviceID="deviceID" :parameterName="'VOLT_MIN'" :minValue="-5" :maxValue="5" @parameterChange="deviceParameterChange($event)" />
+        </va-tree-node>
+      </va-tree-category>
+
+      <va-tree-category
+        v-if="workingModeSelect != null && workingModeSelect.id == 8"
+        style="font-size: 20px;"
+        :label="'E-Final ( ' + voltEFinalNumber/1000 + 'V )'">
+        <va-tree-node>
+          <volt-range :ref="'voltEFinalNumber'" :deviceID="deviceID" :parameterName="'VOLT_EFINAL'" :minValue="-5" :maxValue="5" @parameterChange="deviceParameterChange($event)" />
+        </va-tree-node>
+      </va-tree-category>
+
+      <va-tree-category
+        v-if="workingModeSelect != null && workingModeSelect.id == 9"
+        style="font-size: 20px;"
+        :label="'VScan ( ' + voltVScanNumber/1000 + 'V )'">
+        <va-tree-node>
+          <volt-range :ref="'voltVScanNumber'" :deviceID="deviceID" :parameterName="'VOLT_VSCAN'" :minValue="-5" :maxValue="5" @parameterChange="deviceParameterChange($event)" />
+        </va-tree-node>
+      </va-tree-category>
+
+      <va-tree-category
+        v-if="workingModeSelect != null && workingModeSelect.id == 7 || workingModeSelect.id == 8"
+        style="font-size: 20px;"
+        :label="'ScanRate ( ' + voltScanRateNumber/100 + 'mV/s )'">
+        <va-tree-node>
+          <scan-rate-range :ref="'voltScanRateNumber'" :deviceID="deviceID" :parameterName="'Scan_Rate'" :minValue="0.01" :maxValue="1000" @parameterChange="deviceParameterChange($event)" />
+        </va-tree-node>
+      </va-tree-category>
+
+      <va-tree-category
+        v-if="workingModeSelect != null && workingModeSelect.id == 7 || workingModeSelect.id == 8 || workingModeSelect.id == 9"
+        style="font-size: 20px;"
+        :label="'Resolution ( ' + sampleRateNumber/10 + 'sps )'">
+        <va-tree-node>
+          <resolution-range :ref="'sampleRateNumber'" :deviceID="deviceID" :parameterName="'SAMPLE_RATE'" :minValue="0.1" :maxValue="100" @parameterChange="deviceParameterChange($event)" />
+        </va-tree-node>
+      </va-tree-category>
+
+      <va-tree-category
+        v-if="workingModeSelect != null && workingModeSelect.id == 1 || workingModeSelect.id == 7"
+        style="font-size: 20px;"
+        :label="'Cycle ( ' + cycleNoNumber + ' )'">
+        <va-tree-node>
+          <cycle-range :ref="'cycleNoNumber'" :deviceID="deviceID" :parameterName="'CYCLE_NUMBER'" :minValue="1" :maxValue="50000" @parameterChange="deviceParameterChange($event)" />
+        </va-tree-node>
+      </va-tree-category>
+
+      <va-tree-category
+        v-if="workingModeSelect != null && workingModeSelect.id == 13"
+        style="font-size: 20px;"
+        :label="'Duration ( ' + duration + timeOptions[timeUnit].label + ' )'">
+        <va-tree-node>
+          <div class="row">
+            <div class="flex sm12 xl12 md12 xs12">
+              <div class="flex row align--center">
+                <va-input
+                  class="mb-0"
+                  v-model="duration"
+                />
+                <level-button :ref="'timeUnit'" :deviceID="deviceID" :options="timeOptions" :parameterName="'TIME_UNIT'" @parameterChange="deviceParameterChange($event)" />
+              </div>
+            </div>
+          </div>
+        </va-tree-node>
+      </va-tree-category>
+
+      <va-tree-category
+        v-if="workingModeSelect != null && workingModeSelect.id == 12"
+        style="font-size: 20px;"
+        :label="'RIS instruction (HEX)'">
+        <va-card>
+          <div class="row">
+            <div class="flex sm12 xl12 md12 xs12">
+              <div class="flex row align--center">
+                <va-input
+                  @keyup.enter="instruParameterChange([instru.parameterName, instru.write])"
+                  @blur="instruParameterChange([instru.parameterName, instru.write])"
+                  class="mb-0"
+                  v-model="instru.write"
+                  label="Write value (0x3000FF ... )"
+                  style="width: 100px;"
+                  maxlength="34"
+                />
+                <va-button slot="append" class="mr-2 pa-1 shrink" style="width: 2em; height: 2em; border-radius: 50%; font-size: 20px;" small @click="sendInstr()">
+                  W
+                </va-button>
+              </div>
+            </div>
+          </div>
+
+          <div class="row">
+            <div class="flex sm12 xl12 md12 xs12">
+              <div class="flex row align--center">
+                <va-input
+                  disabled="disabled"
+                  class="mb-0"
+                  v-model="instru.read"
+                  label="Read value"
+                  style="width: 100px; font-size: 30px;"
+                />
+                <va-button slot="append" class="mr-2 pa-1 shrink" style="width: 2em; height: 2em; border-radius: 50%; font-size: 20px;" small @click="readCisData()">
+                  R
+                </va-button>
+              </div>
+            </div>
+          </div>
+
+          <div class="row">
+            <div class="flex sm12 xl12 md12 xs12">
+              <div class="flex row align--center">
+                <va-input
+                  disabled="disabled"
+                  class="mb-0"
+                  v-model="instru.notify"
+                  label="Notify value"
+                  style="width: 100px;"
+                />
+                <va-button slot="append" class="mr-2 pa-1 shrink" style="width: 2em; height: 2em; border-radius: 50%; font-size: 20px;" small @click="detect()">
+                  N
+                </va-button>
+              </div>
+            </div>
+          </div>
+        </va-card>
+      </va-tree-category>
+
+      <va-tree-category
+        v-if="workingModeSelect != null && workingModeSelect.id == 12"
+        style="font-size: 20px;"
+        :label="'VIS & CIS instruction'">
+        <va-card>
+          <div class="row">
+            <div class="flex sm12 xl12 md12 xs12">
+              <div class="flex row align--center">
+                <va-input
+                  disabled="disabled"
+                  class="mb-0"
+                  v-model="instru.read"
+                  label="Read value"
+                  style="width: 100px; font-size: 30px;"
+                />
+                <va-button slot="append" class="mr-2 pa-1 shrink" style="width: 2em; height: 2em; border-radius: 50%; font-size: 20px;" small @click="readCisData()">
+                  R
+                </va-button>
+              </div>
+            </div>
+          </div>
+
+          <div>
+            <va-button class="mr-2 pa-1" style="width: 4em; height: 2em; font-size: 15px;" small @click="detect()">
+              Detect
+            </va-button>
+          </div>
+          <div>
+            <va-button class="mr-2 pa-1" style="width: 4em; height: 2em; font-size: 15px;" small @click="version()">
+              Version
+            </va-button>
+          </div>
+          <div>
+            <va-button class="mr-2 pa-1" style="width: 4em; height: 2em; font-size: 15px;" small @click="battery()">
+              Battery
+            </va-button>
+          </div>
+
+        </va-card>
+      </va-tree-category>
+
+      <div v-if="workingModeSelect != null && workingModeSelect.id == 14">
+        <elite-parameter-recording-elite-pulse-sensing :ref="'PulseSensingMode'" :deviceID="deviceID" :deviceName="deviceName"/>
+      </div>
+
+      <div v-if="workingModeSelect != null && workingModeSelect.id == 15">
+        <elite-parameter-recording-elite-d-p-v :ref="'DPVMode'" :deviceID="deviceID" :deviceName="deviceName"/>
+      </div>
+    </va-tree-root>
+  </div>
+</template>
+
+<script>
+
+import { taskInfo } from '../../../../data/task/TaskInfo'
+import VoltRange from '../parameter/item/VoltRange'
+import MilliVoltRange from '../parameter/item/MilliVoltRange'
+import CycleRange from '../parameter/item/CycleRange'
+import LevelButton from '../parameter/item/LevelButton'
+import OppLevelButton from '../parameter/item/OppLevelButton'
+import MicroAmpereRange from '../parameter/item/MicroAmpereRange'
+import ScanRateRange from '../parameter/item/ScanRateRange'
+import ResolutionRange from '../parameter/item/ResolutionRange'
+import EliteParameterRecordingElitePulseSensing from './EliteParameterRecordingElitePulseSensing'
+import EliteParameterRecordingEliteDPV from './EliteParameterRecordingEliteDPV'
+
+export default {
+  name: 'EliteParameterRecordingElitezm15',
+  components: {
+    VoltRange,
+    MilliVoltRange,
+    CycleRange,
+    LevelButton,
+    OppLevelButton,
+    MicroAmpereRange,
+    ScanRateRange,
+    ResolutionRange,
+    EliteParameterRecordingElitePulseSensing,
+    EliteParameterRecordingEliteDPV,
+  },
+  props: {
+    deviceID: {
+      type: Number,
+      required: true,
+    },
+    deviceName: {
+      type: String,
+      default: 'Elite',
+    },
+  },
+  created () {
+  },
+  data () {
+    return {
+      workingModeSelect: {
+        id: -1,
+        description: 'Init',
+      },
+      workingModeOptions: [
+        {
+          id: 0,
+          description: 'I-V Curve',
+        },
+        {
+          id: 1,
+          description: 'Cycle I-V',
+        },
+        {
+          id: 2,
+          description: 'Function Generator',
+        },
+        {
+          id: 3,
+          description: 'R-T Graph',
+        },
+        {
+          id: 4,
+          description: 'V-T Graph',
+        },
+        {
+          id: 5,
+          description: 'I-T Graph',
+        },
+        {
+          id: 6,
+          description: 'Constant Current',
+        },
+        {
+          id: 7,
+          description: 'Cyclic Voltammetry',
+        },
+        {
+          id: 8,
+          description: 'Linear Sweep Voltammetry',
+        },
+        {
+          id: 9,
+          description: 'Chronoamperometric Graph',
+        },
+        {
+          id: 10,
+          description: 'Cali DAC - test',
+        },
+        {
+          id: 11,
+          description: 'Cali ADC - test',
+        },
+        {
+          id: 12,
+          description: 'Dev Mode',
+        },
+        {
+          id: 13,
+          description: 'Open Circuit Potential',
+        },
+        {
+          id: 14,
+          description: 'Pulse Sensing',
+        },
+        {
+          id: 15,
+          description: 'Differential Pulse Voltammetry (DPV)',
+        },
+      ],
+      currentRangeSelect: null,
+      currentRangeOptions: [
+        {
+          value: 0,
+          label: '<4 μA',
+        },
+        {
+          value: 1,
+          label: '2.5-100 μA',
+        },
+        {
+          value: 2,
+          label: '85-2050 μA',
+        },
+        {
+          value: 3,
+          label: '1800 uA',
+        },
+        {
+          value: 4,
+          label: 'Auto',
+        },
+      ],
+      voltageInRangeSelect: null,
+      voltageInRangeOptions: [
+        {
+          value: 0,
+          label: '<7 mV',
+        },
+        {
+          value: 1,
+          label: '5-300 mV',
+        },
+        {
+          value: 2,
+          label: '>250 mV',
+        },
+        {
+          value: 3,
+          label: 'Auto',
+        },
+      ],
+      caliChannelSelect: null,
+      caliChannelOptions: [
+        {
+          value: 0,
+          label: 'Iin',
+        },
+        {
+          value: 1,
+          label: 'Vin',
+        },
+      ],
+      startVoltNumber: null,
+      stopVoltNumber: null,
+      stepVoltNumber: null,
+      stepTimeSelect: null,
+      stepTimeOptions: [
+        {
+          value: 0,
+          label: '0.5s',
+        },
+        {
+          value: 1,
+          label: '1.0s',
+        },
+        {
+          value: 2,
+          label: '2.0s',
+        },
+      ],
+      cycleNoNumber: null,
+      outputVoltNumber: null,
+      sampleRateNumber: null,
+      chargeSelect: null,
+      chargeOptions: [
+        {
+          value: 0,
+          label: 'Charge',
+        },
+        {
+          value: 1,
+          label: 'Discharge',
+        },
+      ],
+      highzSelect: null,
+      highzOptions: [
+        {
+          value: 0,
+          label: 'On',
+        },
+        {
+          value: 1,
+          label: 'Off',
+        },
+      ],
+      currentNumber: null,
+      stopVoltMaxNumber: null,
+      stopVoltMinNumber: null,
+      voltInitialNumber: null,
+      voltMaxNumber: null,
+      voltMinNumber: null,
+      voltScanRateNumber: null,
+      resolutionNumber: null,
+      measureEocButton: {
+        start: 'OCP',
+        stop: 'Stop',
+        status: false,
+      },
+      voltEFinalNumber: null,
+      voltVScanNumber: null,
+      caliVoltNumber: null,
+      instru: {
+        write: '',
+        read: '',
+        notify: '',
+      },
+      duration: 0,
+      timeUnit: null,
+      timeOptions: [
+        {
+          value: 0,
+          label: 'h',
+        },
+        {
+          value: 1,
+          label: 'm',
+        },
+        {
+          value: 2,
+          label: 's',
+        },
+        {
+          value: 3,
+          label: 'ms',
+        },
+      ],
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    mqttPub: function (topic, mes) {
+      this.$mqtt.publish(topic, mes)
+    },
+    // Array[String of Parameter Nmae, Value]
+    deviceParameterChange: function (e) {
+      console.log('e[0],e[1]', e[0], ',', e[1])
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_parameter/0',
+        device: taskInfo.getRawDeviceID(this.deviceID),
+        parameter: e[0],
+        content: e[1],
+      }))
+    },
+    refresh () {
+      this.workingModeSelect = this.workingModeOptions[taskInfo.getDeviceInfo(this.deviceID).parameterSet.MODE]
+      if (this.workingModeSelect != null) {
+        this.workingModeSelectChange(this.workingModeSelect)
+      }
+
+      this.currentRangeSelect = taskInfo.getDeviceInfo(this.deviceID).parameterSet.ADC_LEVEL_I_15
+      if (this.$refs.currentRangeSelect != null) {
+        this.$refs.currentRangeSelect.updateLevelButton(this.currentRangeSelect)
+      }
+
+      this.voltageInRangeSelect = taskInfo.getDeviceInfo(this.deviceID).parameterSet.ADC_LEVEL_V_IN_15
+      if (this.$refs.voltageInRangeSelect != null) {
+        this.$refs.voltageInRangeSelect.updateLevelButton(this.voltageInRangeSelect)
+      }
+
+      this.highzSelect = taskInfo.getDeviceInfo(this.deviceID).parameterSet.CTRL_HIGH_Z_15
+      if (this.$refs.highzSelect != null) {
+        this.$refs.highzSelect.updateLevelButton(this.highzSelect)
+      }
+
+      this.caliChannelSelect = taskInfo.getDeviceInfo(this.deviceID).parameterSet.ADC_DAC_CHANNEL_15
+      if (this.$refs.caliChannelSelect != null) {
+        this.$refs.caliChannelSelect.updateLevelButton(this.caliChannelSelect)
+      }
+
+      this.caliVoltNumber = taskInfo.getDeviceInfo(this.deviceID).parameterSet.DAC_VOLT
+      if (this.$refs.caliVoltNumber != null) {
+        this.$refs.caliVoltNumber.updateCycleNumber(this.caliVoltNumber)
+      }
+
+      this.startVoltNumber = (taskInfo.getDeviceInfo(this.deviceID).parameterSet.VOLT_ORIGIN - 25000) / 5
+      if (this.$refs.startVoltNumber != null) {
+        this.$refs.startVoltNumber.updateVoltNumber(this.startVoltNumber)
+      }
+
+      this.stopVoltNumber = (taskInfo.getDeviceInfo(this.deviceID).parameterSet.VOLT_FINAL - 25000) / 5
+      if (this.$refs.stopVoltNumber != null) {
+        this.$refs.stopVoltNumber.updateVoltNumber(this.stopVoltNumber)
+      }
+
+      this.stepVoltNumber = (taskInfo.getDeviceInfo(this.deviceID).parameterSet.VOLT_STEP)
+      if (this.$refs.stepVoltNumber != null) {
+        this.$refs.stepVoltNumber.updateStepVoltNumber(this.stepVoltNumber)
+      }
+
+      this.stepTimeSelect = taskInfo.getDeviceInfo(this.deviceID).parameterSet.STEP_TIME
+      if (this.$refs.stepTimeSelect != null) {
+        this.$refs.stepTimeSelect.updateLevelButton(this.stepTimeSelect)
+      }
+
+      this.cycleNoNumber = taskInfo.getDeviceInfo(this.deviceID).parameterSet.CYCLE_NUMBER
+      if (this.$refs.cycleNoNumber != null) {
+        this.$refs.cycleNoNumber.updateCycleNumber(this.cycleNoNumber)
+      }
+
+      this.timeUnit = taskInfo.getDeviceInfo(this.deviceID).parameterSet.TIME_UNIT
+      if (this.$refs.timeUnit != null) {
+        this.$refs.timeUnit.updateLevelButton(this.timeUnit)
+      }
+
+      this.outputVoltNumber = (taskInfo.getDeviceInfo(this.deviceID).parameterSet.DAC_VOLT - 25000) / 5
+      if (this.$refs.outputVoltNumber != null) {
+        this.$refs.outputVoltNumber.updateVoltNumber(this.outputVoltNumber)
+      }
+
+      this.sampleRateNumber = taskInfo.getDeviceInfo(this.deviceID).parameterSet.SAMPLE_RATE
+      if (this.$refs.sampleRateNumber != null) {
+        this.$refs.sampleRateNumber.updateResolutionNumber(this.sampleRateNumber)
+      }
+
+      this.chargeSelect = (taskInfo.getDeviceInfo(this.deviceID).parameterSet.Charge + 1) % 2
+      if (this.$refs.chargeSelect != null) {
+        this.$refs.chargeSelect.updateLevelButton(this.chargeSelect)
+      }
+
+      this.currentNumber = taskInfo.getDeviceInfo(this.deviceID).parameterSet.Const_Current_value
+      if (this.$refs.currentNumber != null) {
+        this.$refs.currentNumber.updateMicroAmpereNumber(this.currentNumber)
+      }
+
+      this.stopVoltMaxNumber = this.voltInitialNumber = (taskInfo.getDeviceInfo(this.deviceID).parameterSet.VOLTSTOP_MAX - 25000) / 5
+      if (this.$refs.stopVoltMaxNumber != null) {
+        this.$refs.stopVoltMaxNumber.updateVoltNumber(this.stopVoltMaxNumber)
+      }
+
+      this.stopVoltMinNumber = (taskInfo.getDeviceInfo(this.deviceID).parameterSet.VOLTSTOP_MIN - 25000) / 5
+      if (this.$refs.stopVoltMinNumber != null) {
+        this.$refs.stopVoltMinNumber.updateVoltNumber(this.stopVoltMinNumber)
+      }
+
+      this.voltInitialNumber = (taskInfo.getDeviceInfo(this.deviceID).parameterSet.VOLT_INITIAL - 25000) / 5
+      if (this.$refs.voltInitialNumber != null) {
+        this.$refs.voltInitialNumber.updateVoltNumber(this.voltInitialNumber)
+      }
+
+      this.voltMaxNumber = (taskInfo.getDeviceInfo(this.deviceID).parameterSet.VOLT_MAX - 25000) / 5
+      if (this.$refs.voltMaxNumber != null) {
+        this.$refs.voltMaxNumber.updateVoltNumber(this.voltMaxNumber)
+      }
+
+      this.voltMinNumber = (taskInfo.getDeviceInfo(this.deviceID).parameterSet.VOLT_MIN - 25000) / 5
+      if (this.$refs.voltMinNumber != null) {
+        this.$refs.voltMinNumber.updateVoltNumber(this.voltMinNumber)
+      }
+
+      this.voltEFinalNumber = (taskInfo.getDeviceInfo(this.deviceID).parameterSet.VOLT_EFINAL - 25000) / 5
+      if (this.$refs.voltEFinalNumber != null) {
+        this.$refs.voltEFinalNumber.updateVoltNumber(this.voltEFinalNumber)
+      }
+
+      this.voltVScanNumber = (taskInfo.getDeviceInfo(this.deviceID).parameterSet.VOLT_VSCAN - 25000) / 5
+      if (this.$refs.voltVScanNumber != null) {
+        this.$refs.voltVScanNumber.updateVoltNumber(this.voltVScanNumber)
+      }
+
+      this.voltScanRateNumber = taskInfo.getDeviceInfo(this.deviceID).parameterSet.Scan_Rate
+      if (this.$refs.voltScanRateNumber != null) {
+        this.$refs.voltScanRateNumber.updateVoltScanRateNumber(this.voltScanRateNumber)
+      }
+
+      this.instru.read = (taskInfo.getDeviceInfo(this.deviceID).parameterSet.ADC_VALUE_I).toString(16).toUpperCase()
+
+      if (this.$refs.PulseSensingMode != null) {
+        this.$refs.PulseSensingMode.refresh()
+      }
+
+      if (this.$refs.DPVMode != null) {
+        this.$refs.DPVMode.refresh()
+      }
+    },
+    workingModeSelectChange (val) {
+      if (this.workingModeSelect.id === -1) {
+        return false
+      }
+
+      this.workingModeSelect = val
+
+      if (this.workingModeSelect.id !== taskInfo.getDeviceInfo(this.deviceID).parameterSet.MODE) {
+        this.deviceParameterChange(['MODE', this.workingModeSelect.id])
+        console.log(this.workingModeSelect.id, this.workingModeSelect.description)
+      }
+    },
+    measureEoc () {
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_instruction/0',
+        device: taskInfo.getRawDeviceID(this.deviceID),
+        instruction: 'VIS_CC_ZERO',
+      }))
+      this.measureEocButton.status = true
+    },
+    measureEocStop () {
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_instruction/0',
+        device: taskInfo.getRawDeviceID(this.deviceID),
+        instruction: 'interrupt',
+      }))
+      this.measureEocButton.status = false
+    },
+    instruParameterChange: function (e) {
+      while (e[1].length <= 33) {
+        e[1] = e[1] + '0'
+      }
+
+      const sendIns = new Array(17).fill(0)
+      for (let i = 0; i <= 16; i++) {
+        const startIndex = i * 2
+        sendIns[i] = e[1].substring(startIndex, startIndex + 2)
+        sendIns[i] = parseInt(sendIns[i], 16)
+      }
+
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_parameter/0',
+        device: taskInfo.getRawDeviceID(this.deviceID),
+        parameter: 'BLE_WRITE',
+        content: '0:16=' + String(sendIns),
+      }))
+    },
+    sendInstr () {
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_instruction/0',
+        device: taskInfo.getRawDeviceID(this.deviceID),
+        instruction: 'ble_instru_send',
+      }))
+    },
+    readCisData () {
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_parameter_value/0',
+        device: taskInfo.getRawDeviceID(this.deviceID),
+        parameter: 'ADC_VALUE_I',
+      }))
+    },
+    detect () {
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_instruction/0',
+        device: taskInfo.getRawDeviceID(this.deviceID),
+        instruction: 'VIS_DEVICE_DETECT',
+      }))
+      setTimeout(() => {
+        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+          header: 'device_instruction/0',
+          device: taskInfo.getRawDeviceID(this.deviceID),
+          instruction: 'VIS_DEVICE_DONE',
+        }))
+      }, 5000)
+    },
+    version () {
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_instruction/0',
+        device: taskInfo.getRawDeviceID(this.deviceID),
+        instruction: 'dev_version',
+      }))
+    },
+    battery () {
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_instruction/0',
+        device: taskInfo.getRawDeviceID(this.deviceID),
+        instruction: 'dev_battery',
+      }))
+    },
+    setDuration () {
+      let totalTime = 0 // ms
+      if (this.timeOptions[this.timeUnit].label === 'h') {
+        totalTime = this.duration * 1000 * 60 * 60
+      } else if (this.timeOptions[this.timeUnit].label === 'm') {
+        totalTime = this.duration * 1000 * 60
+      } else if (this.timeOptions[this.timeUnit].label === 's') {
+        totalTime = this.duration * 1000
+      } else if (this.timeOptions[this.timeUnit].label === 'ms') {
+        totalTime = this.duration
+      }
+      setTimeout(() => {
+        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+          header: 'device_instruction/0',
+          device: taskInfo.getRawDeviceID(this.deviceID),
+          instruction: 'interrupt',
+        }))
+      }, totalTime)
+    },
+  },
+  mounted () {
+    this.refresh()
+  },
+  watch: {
+  },
+  destroyed () {
+  },
+}
+</script>
@@ -1,13 +1,12 @@
 <template>
-  <div class="flex mt-0 pt-0">
-    <div>
-      <div class="row flex sm12 xl12 md12 xs12">
+  <div>

-        <div>
-          <elite-parameter-recording :ref="'rec_ref'" :deviceID="deviceID"/>
-        </div>
-      </div>
-    </div>
+    <elite-parameter-recording v-if="eliteVer=='1'" :ref="'rec_ref'" :deviceID="deviceID"/>
+    <!-- <elite-parameter-recording-elitezm15 :ref="'rec_ref'" :deviceID="deviceID"/> -->
+    <!--<elite-parameter-recording :ref="'rec_ref'" :deviceID="deviceID"/>-->
+    <elite-parameter-recording-elitezm15 v-else-if="eliteVer=='2'" :ref="'rec_ref'" :deviceID="deviceID"/>
+    <elite-parameter-recording-elite-e-i-s v-else :ref="'rec_ref'" :deviceID="deviceID"/>
+    <!--<elite-parameter-recording :ref="'rec_ref'" :deviceID="deviceID"/>-->

  </div>
 </template>
@@ -15,12 +14,16 @@
 <script>

 import EliteParameterRecording from './EliteParameterRecording'
+import EliteParameterRecordingElitezm15 from './EliteParameterRecordingElitezm15'
+import EliteParameterRecordingEliteEIS from './EliteParameterRecordingEliteEIS'
 import { taskInfo } from '../../../../data/task/TaskInfo'

 export default {
  name: 'EliteParameterWindow',
  components: {
    EliteParameterRecording,
+    EliteParameterRecordingElitezm15,
+    EliteParameterRecordingEliteEIS,
  },
  props: {
    deviceID: {
@@ -34,19 +37,37 @@ export default {
  },
  data () {
    return {
+      eliteVer: 0,
    }
  },
  mqtt: {
  },
  methods: {
+    compareEliteVer: function (ver) {
+      if (JSON.stringify(ver.slice(0, 4)) === JSON.stringify([0, 2, 1, 5])) {
+        this.eliteVer = '1' // 1.4
+        // console.log('1:', JSON.stringify(ver.slice(0, 4)), ',', JSON.stringify([0, 2, 1, 5]))
+      } else if (JSON.stringify(ver.slice(0, 4)) === JSON.stringify([0, 2, 1, 6])) {
+        this.eliteVer = '2' // 1.5
+        // console.log('2:', JSON.stringify(ver.slice(0, 4)), ',', JSON.stringify([0, 2, 1, 6]))
+      } else if (JSON.stringify(ver.slice(0, 4)) === JSON.stringify([0, 2, 1, 7])) {
+        this.eliteVer = '3' // megafly
+        // console.log('3:', JSON.stringify(ver.slice(0, 4)), ',', JSON.stringify([0, 2, 1, 7]))
+      }
+    },
    mqttPub: function (topic, mes) {
      this.$mqtt.publish(topic, mes)
+      // console.log('window:1,mqttPub(topic:', topic, ',mes:', mes, ')')
    },
    pageInit: function () {
      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
        header: 'get_device_info/0',
        device: taskInfo.getRawDeviceID(this.deviceID),
      }))
+
+      // console.log('window:2,pageInit(taskInfo.getDeviceInfo:', taskInfo.getDeviceInfo(this.deviceID).info.serial_number, ')')
+
+      this.compareEliteVer(taskInfo.getDeviceInfo(this.deviceID).info.serial_number)
    },
    refresh: function () {
      this.$nextTick(() => {
@@ -54,10 +75,13 @@ export default {
          this.$refs.rec_ref.refresh()
        }
      })
+      // console.log('window:3,refresh(this.$nextTick:', this.$nextTick, ',this.$refs:', this.$refs, ')')
    },
+
  },
  mounted () {
    this.pageInit()
+    // console.log('window:4,mounted(pageInit)')
  },
  watch: {
    deviceID: function (val) {
@@ -65,6 +89,7 @@ export default {
        header: 'get_device_info/0',
        device: taskInfo.getRawDeviceID(val),
      }))
+      // console.log('window:5,deviceID(taskInfo:', taskInfo, ')')
    },
  },
 }
@@ -1,5 +1,27 @@
 <template>
  <div class="flex" >
+    <!-- <div>
+      <div class="row sm12 xl12 md12 xs12">
+        <va-button
+          class="mx-1 px-2 mb-3"
+          color="success"
+          v-if="!recordOn"
+          @click="recordClick"
+          small
+        >
+          Record
+        </va-button>
+        <va-button
+          class="mx-1 px-2 mb-3"
+          color="danger"
+          v-else
+          @click="recordClick"
+          small
+        >
+          Stop
+        </va-button>
+      </div>
+    </div> -->

    <va-tree-root >
      <va-tree-category
@@ -10,7 +32,7 @@
            <div class="flex sm12 xl12 md12 xs12">
              <div
                style='display: inline-block;'
-                v-for="channel in [1, 2, 3, 4, 5, 6, 7, 8]"
+                v-for="channel in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]"
                :key="channel"
              >
                <va-button
@@ -35,6 +57,39 @@
        </va-tree-node>
      </va-tree-category>

+      <va-tree-category
+        style="font-size: 20px;"
+        :label="'3-AXIS'">
+        <va-tree-node>
+          <div class="row">
+            <div class="flex sm12 xl12 md12 xs12">
+              <div
+                style='display: inline-block;'
+                v-for="axisChannel in ['x','y','z','m']"
+                :key="axisChannel"
+              >
+                <va-button
+                  class="mx-1 px-1"
+                  v-if="axisChannelList != null && axisChannelList.indexOf(axisChannel) >= 0"
+                  @click="axisChannelClickRemove(axisChannel)"
+                  small
+                >
+                  {{axisChannel}}
+                </va-button>
+                <va-button
+                  class="mx-1 px-1"
+                  v-if="axisChannelList == null || axisChannelList.indexOf(axisChannel) < 0"
+                  @click="axisChannelClickAdd(axisChannel)"
+                  small outline
+                >
+                  {{axisChannel}}
+                </va-button>
+              </div>
+            </div>
+          </div>
+        </va-tree-node>
+      </va-tree-category>
+
      <va-tree-category
        style="font-size: 20px;"
        :label="'Amp gain'">
@@ -42,11 +97,12 @@
          <div class="row">
            <div class="flex sm12 xl12 md12 xs12">
              <va-select
-                :on-change="ampGainSelectChange()"
+                @input="ampGainSelectChange()"
                :label="''"
                v-model="ampGainSelect"
                textBy="description"
                :options="ampGainOptions"
+                :noClear='true'
              />
            </div>
          </div>
@@ -54,6 +110,100 @@
      </va-tree-category>

      <va-tree-category
+        style="font-size: 20px;"
+        :label="'Sample Rate'">
+        <va-tree-node>
+          <div class="row">
+            <div class="flex sm12 xl12 md12 xs12">
+              <va-select
+                @input="sampleRateSelectChange()"
+                :label="''"
+                v-model="sampleRateSelect"
+                textBy="description"
+                :options="sampleRateOptions"
+                :noClear='true'
+              />
+            </div>
+          </div>
+        </va-tree-node>
+      </va-tree-category>
+
+      <va-tree-category
+        style="font-size: 20px;"
+        :label="'Radio Frequency'">
+        <va-tree-node>
+          <div class="row">
+            <div class="flex sm12 xl12 md12 xs12">
+              <va-select
+                @input="radioFrequencySelectChange()"
+                :label="''"
+                v-model="radioFrequencySelect"
+                textBy="description"
+                :options="radioFrequencyOptions"
+                :noClear='true'
+              />
+            </div>
+          </div>
+        </va-tree-node>
+      </va-tree-category>
+
+      <va-tree-category
+        style="font-size: 20px;"
+        :label="'Mem Radio Frequency'">
+        <va-tree-node>
+          <div class="row">
+            <div class="flex sm12 xl12 md12 xs12">
+              <va-select
+                @input="memRadioFrequencySelectChange()"
+                :label="''"
+                v-model="memRadioFrequencySelect"
+                textBy="description"
+                :options="memRadioFrequencyOptions"
+              />
+            </div>
+          </div>
+        </va-tree-node>
+      </va-tree-category>
+
+      <va-tree-category
+        style="font-size: 20px;"
+        :label="'Led Brightness'">
+        <va-tree-node>
+          <div class="row">
+            <div class="flex sm12 xl12 md12 xs12">
+              <va-select
+                @input="ledBrightnessSelectChange()"
+                :label="''"
+                v-model="ledBrightnessSelect"
+                textBy="description"
+                :options="ledBrightnessOptions"
+                :noClear='true'
+              />
+            </div>
+          </div>
+        </va-tree-node>
+      </va-tree-category>
+
+      <va-tree-category
+        style="font-size: 20px;"
+        :label="'Accelerator Sensitivity'">
+        <va-tree-node>
+          <div class="row">
+            <div class="flex sm12 xl12 md12 xs12">
+              <va-select
+                @input="acceleratorSensitivitySelectChange()"
+                :label="''"
+                v-model="acceleratorSensitivitySelect"
+                textBy="description"
+                :options="acceleratorSensitivityOptions"
+                :noClear='true'
+              />
+            </div>
+          </div>
+        </va-tree-node>
+      </va-tree-category>
+
+      <!-- <va-tree-category
        style="font-size: 20px;"
        :label="'Sample rate'">
        <va-tree-node>
@@ -90,7 +240,7 @@
            </div>
          </div>
        </va-tree-node>
-      </va-tree-category>
+      </va-tree-category> -->
    </va-tree-root>

  </div>
@@ -98,6 +248,7 @@

 <script>
 import { taskInfo } from '../../../../data/task/TaskInfo'
+import { chartData } from '../../../../data/task/ChartsManagement'

 export default {
  name: 'NeuliveParameterRecording',
@@ -118,25 +269,192 @@ export default {
      channelList: [],
      ampGainSelect: null,
      ampGainOptions: [
+        // {
+        //   id: 0,
+        //   description: '25',
+        // },
        {
          id: 0,
-          description: '25',
-        },
-        {
-          id: 1,
          description: '100',
        },
        {
-          id: 2,
+          id: 1,
          description: '400',
        },
        {
-          id: 3,
+          id: 2,
          description: '800',
        },
      ],
-      sampleRateInput: '1000',
-      sampleRate: null,
+      sampleRateSelect: null,
+      sampleRateOptions: [
+        {
+          id: 0,
+          value: 800,
+          description: '1k',
+        },
+        {
+          id: 1,
+          value: 400,
+          description: '2k',
+        },
+        {
+          id: 2,
+          value: 200,
+          description: '4k',
+        },
+        {
+          id: 3,
+          value: 160,
+          description: '5k',
+        },
+        {
+          id: 4,
+          value: 100,
+          description: '8k',
+        },
+        {
+          id: 5,
+          value: 80,
+          description: '10k',
+        },
+        {
+          id: 6,
+          value: 40,
+          description: '20k',
+        },
+      ],
+      radioFrequencySelect: null,
+      radioFrequencyOptions: [
+        {
+          id: 0,
+          value: -20,
+          description: '-20',
+        },
+        {
+          id: 1,
+          value: -16,
+          description: '-16',
+        },
+        {
+          id: 2,
+          value: -12,
+          description: '-12',
+        },
+        {
+          id: 3,
+          value: -8,
+          description: '-8',
+        },
+        {
+          id: 4,
+          value: -4,
+          description: '-4',
+        },
+        {
+          id: 5,
+          value: 0,
+          description: '0',
+        },
+        {
+          id: 6,
+          value: 4,
+          description: '4',
+        },
+        {
+          id: 7,
+          value: 8,
+          description: '8',
+        },
+      ],
+      memRadioFrequencySelect: null,
+      memRadioFrequencyOptions: [
+        {
+          id: 0,
+          value: -20,
+          description: '-20',
+        },
+        {
+          id: 1,
+          value: -16,
+          description: '-16',
+        },
+        {
+          id: 2,
+          value: -12,
+          description: '-12',
+        },
+        {
+          id: 3,
+          value: -8,
+          description: '-8',
+        },
+        {
+          id: 4,
+          value: -4,
+          description: '-4',
+        },
+        {
+          id: 5,
+          value: 0,
+          description: '0',
+        },
+        {
+          id: 6,
+          value: 4,
+          description: '4',
+        },
+        {
+          id: 7,
+          value: 8,
+          description: '8',
+        },
+      ],
+      ledBrightnessSelect: null,
+      ledBrightnessOptions: [
+        {
+          id: 0,
+          value: 0,
+          description: 'off',
+        },
+        {
+          id: 1,
+          value: 1,
+          description: 'bright',
+        },
+        {
+          id: 2,
+          value: 2,
+          description: 'normal',
+        },
+      ],
+      acceleratorSensitivitySelect: null,
+      acceleratorSensitivityOptions: [
+        {
+          id: 0,
+          value: 3,
+          description: '2G',
+        },
+        {
+          id: 1,
+          value: 5,
+          description: '4G',
+        },
+        {
+          id: 2,
+          value: 8,
+          description: '8G',
+        },
+        {
+          id: 3,
+          value: 12,
+          description: '16G',
+        },
+      ],
+      // sampleRateInput: '1000',
+      // sampleRate: null,
+      recordOn: false,
+      axisChannelList: [],
    }
  },
  mqtt: {
@@ -153,16 +471,36 @@ export default {
          this.channelList.push(index + 1)
        }
      })
-      this.ampGainSelect = this.ampGainOptions[(taskInfo.getDeviceInfo(this.deviceID).parameterSet.AMP_GAIN + 1) % 4]
-      this.sampleRate = parseInt(200 / parseFloat(taskInfo.getDeviceInfo(this.deviceID).parameterSet.ADC_CLOCK / 1000))
-      this.sampleRateInput = String(this.sampleRate)
+      this.ampGainSelect = this.ampGainOptions[(taskInfo.getDeviceInfo(this.deviceID).parameterSet.AMP_GAIN) % 4]
+      this.sampleRateSelect = this.sampleRateOptions[this.sampleRateOptions.findIndex(ele => ele.value === taskInfo.getDeviceInfo(this.deviceID).parameterSet.ADC_CLOCK)]
+      this.recordOn = taskInfo.getDeviceInfo(this.deviceID).parameterSet.RECORDING
+      this.axisChannelList.length = 0
+      const axisChannelSet = taskInfo.getDeviceInfo(this.deviceID).parameterSet.AXIS_CH.toString(2).split('').reverse()
+      axisChannelSet.forEach((element, index) => {
+        if (parseInt(element) === 1) {
+          if (index === 0) {
+            this.axisChannelList.push('x')
+          } else if (index === 1) {
+            this.axisChannelList.push('y')
+          } else if (index === 2) {
+            this.axisChannelList.push('z')
+          } else if (index === 3) {
+            this.axisChannelList.push('m')
+          }
+        }
+      })
+
+      this.radioFrequencySelect = this.radioFrequencyOptions[taskInfo.getDeviceInfo(this.deviceID).parameterSet.RADIO_FREQUENCY]
+      this.memRadioFrequencySelect = this.memRadioFrequencyOptions[taskInfo.getDeviceInfo(this.deviceID).parameterSet.MEM_RADIO_FREQUENCY]
+      this.ledBrightnessSelect = this.ledBrightnessOptions[taskInfo.getDeviceInfo(this.deviceID).parameterSet.LED_BRIGHTNESS]
+      this.acceleratorSensitivitySelect = this.acceleratorSensitivityOptions[taskInfo.getDeviceInfo(this.deviceID).parameterSet.ACCELERATOR_S]
    },
    channelClickAdd (val) {
-      if (this.channelList.indexOf(val) < 0) {
+      if (this.channelList.indexOf(val) < 0 && this.channelList.length < 15) {
        this.channelList.push(val)

        let channelSet = ''
-        for (let i = 8; i >= 1; i--) {
+        for (let i = 16; i >= 1; i--) {
          if (this.channelList.indexOf(i) >= 0) {
            channelSet += '1'
          } else {
@@ -179,13 +517,15 @@ export default {
            content: channelValue,
          }))
        }
+      } else if (this.channelList.length === 15) {
+        this.pageToast('Recording channels cannot choose more than 15.')
      }
    },
    channelClickRemove (val) {
      if (this.channelList.indexOf(val) >= 0) {
        this.channelList.splice(this.channelList.indexOf(val), 1)
        let channelSet = ''
-        for (let i = 8; i >= 1; i--) {
+        for (let i = 16; i >= 1; i--) {
          if (this.channelList.indexOf(i) >= 0) {
            channelSet += '1'
          } else {
@@ -204,37 +544,220 @@ export default {
      }
    },
    ampGainSelectChange () {
-      if (this.ampGainSelect != null && this.ampGainSelect.id !== ((taskInfo.getDeviceInfo(this.deviceID).parameterSet.AMP_GAIN + 1) % 4)) {
+      if (this.ampGainSelect != null && this.ampGainSelect.id !== ((taskInfo.getDeviceInfo(this.deviceID).parameterSet.AMP_GAIN) % 4)) {
        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
          header: 'device_parameter/0',
          device: taskInfo.getRawDeviceID(this.deviceID),
          parameter: 'AMP_GAIN',
-          content: ((this.ampGainSelect.id + 3) % 4),
+          content: ((this.ampGainSelect.id) % 4),
        }))
      }
    },
-    sampleRateChange (val) {
-      if (this.sampleRate == null) {
-        return false
-      }
-      if (isNaN(val) || parseInt(val) > 1000 || parseInt(val) < 4) {
-        this.sampleRateInput = '1000'
-        this.sampleRate = 1000
-        return false
-      }
-      if (parseInt(this.sampleRateInput) !== this.sampleRate || this.sampleRate !== parseInt(val)) {
-        this.sampleRateInput = String(val)
-        this.sampleRate = parseInt(val)
-      }
-      if (this.sampleRate !== parseInt(200 / parseFloat(taskInfo.getDeviceInfo(this.deviceID).parameterSet.ADC_CLOCK / 1000))) {
+    sampleRateSelectChange () {
+      if (this.sampleRateSelect != null && this.sampleRateSelect.value !== ((taskInfo.getDeviceInfo(this.deviceID).parameterSet.ADC_CLOCK))) {
        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
          header: 'device_parameter/0',
          device: taskInfo.getRawDeviceID(this.deviceID),
          parameter: 'ADC_CLOCK',
-          content: parseInt(parseFloat(1 / parseFloat(this.sampleRate / 200)) * 1000),
+          content: this.sampleRateSelect.value,
        }))
      }
    },
+    radioFrequencySelectChange () {
+      if (this.radioFrequencySelect != null && this.radioFrequencySelect.id !== ((taskInfo.getDeviceInfo(this.deviceID).parameterSet.RADIO_FREQUENCY))) {
+        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+          header: 'device_parameter/0',
+          device: taskInfo.getRawDeviceID(this.deviceID),
+          parameter: 'RADIO_FREQUENCY',
+          content: this.radioFrequencySelect.id,
+        }))
+        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+          header: 'device_update_radio_frequency/0',
+          device: taskInfo.getRawDeviceID(this.deviceID),
+          content: this.radioFrequencySelect.value,
+        }))
+      }
+    },
+    memRadioFrequencySelectChange () {
+      if (this.memRadioFrequencySelect != null && this.memRadioFrequencySelect.id !== ((taskInfo.getDeviceInfo(this.deviceID).parameterSet.MEM_RADIO_FREQUENCY))) {
+        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+          header: 'device_parameter/0',
+          device: taskInfo.getRawDeviceID(this.deviceID),
+          parameter: 'MEM_RADIO_FREQUENCY',
+          content: this.memRadioFrequencySelect.id,
+        }))
+        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+          header: 'device_set_central_rf/0',
+          device: taskInfo.getRawDeviceID(this.deviceID),
+          content: this.memRadioFrequencySelect.value,
+        }))
+      }
+    },
+    ledBrightnessSelectChange () {
+      if (this.ledBrightnessSelect != null && this.ledBrightnessSelect.id !== ((taskInfo.getDeviceInfo(this.deviceID).parameterSet.LED_BRIGHTNESS))) {
+        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+          header: 'device_parameter/0',
+          device: taskInfo.getRawDeviceID(this.deviceID),
+          parameter: 'LED_BRIGHTNESS',
+          content: this.ledBrightnessSelect.id,
+        }))
+        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+          header: 'device_update_led_brightness/0',
+          device: taskInfo.getRawDeviceID(this.deviceID),
+          content: this.ledBrightnessSelect.value,
+        }))
+      }
+    },
+    acceleratorSensitivitySelectChange () {
+      if (this.acceleratorSensitivitySelect != null && this.acceleratorSensitivitySelect.id !== ((taskInfo.getDeviceInfo(this.deviceID).parameterSet.ACCELERATOR_S))) {
+        let scaleRange
+        switch (this.acceleratorSensitivitySelect.id) {
+          case 0:
+            scaleRange = 200
+            break
+          case 1:
+            scaleRange = 400
+            break
+          case 2:
+            scaleRange = 800
+            break
+          case 3:
+            scaleRange = 1600
+            break
+          default:
+            scaleRange = 0
+            break
+        }
+
+        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+          header: 'device_parameter/0',
+          device: taskInfo.getRawDeviceID(this.deviceID),
+          parameter: 'ACCELERATOR_S',
+          content: this.acceleratorSensitivitySelect.id,
+        }))
+        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+          header: 'device_update_accelerator_sensitivity/0',
+          device: taskInfo.getRawDeviceID(this.deviceID),
+          content: this.acceleratorSensitivitySelect.value,
+        }))
+        const charts = chartData.getAllChartsData()
+        for (const chartID in charts) {
+          for (const seriesIndex in charts[chartID].series) {
+            if (charts[chartID].series[seriesIndex].yAxisSource[1] >= 256 && charts[chartID].series[seriesIndex].yAxisSource[1] <= 260) {
+              if (parseInt(charts[chartID].series[seriesIndex].yAxisSource[1]) === 260) {
+                charts[chartID].yAxis[seriesIndex].min = 0
+                charts[chartID].yAxis[seriesIndex].max = Math.ceil(Math.sqrt(Math.pow(scaleRange, 2) * 3))
+              } else {
+                charts[chartID].yAxis[seriesIndex].min = -scaleRange
+                charts[chartID].yAxis[seriesIndex].max = scaleRange
+              }
+            }
+          }
+        }
+      }
+    },
+    // sampleRateChange (val) {
+    //   if (this.sampleRate == null) {
+    //     return false
+    //   }
+    //   if (isNaN(val) || parseInt(val) > 1000 || parseInt(val) < 4) {
+    //     this.sampleRateInput = '1000'
+    //     this.sampleRate = 1000
+    //     return false
+    //   }
+    //   if (parseInt(this.sampleRateInput) !== this.sampleRate || this.sampleRate !== parseInt(val)) {
+    //     this.sampleRateInput = String(val)
+    //     this.sampleRate = parseInt(val)
+    //   }
+    //   if (this.sampleRate !== parseInt(200 / parseFloat(taskInfo.getDeviceInfo(this.deviceID).parameterSet.ADC_CLOCK / 1000))) {
+    //     this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+    //       header: 'device_parameter/0',
+    //       device: taskInfo.getRawDeviceID(this.deviceID),
+    //       parameter: 'ADC_CLOCK',
+    //       content: parseInt(parseFloat(1 / parseFloat(this.sampleRate / 200)) * 1000),
+    //     }))
+    //   }
+    // },
+    recordClick () {
+      this.recordOn = !this.recordOn
+      if (this.recordOn) {
+        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+          header: 'device_instruction/0',
+          device: taskInfo.getRawDeviceID(this.deviceID),
+          instruction: 'record',
+        }))
+        this.$emit('record')
+      } else {
+        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+          header: 'device_instruction/0',
+          device: taskInfo.getRawDeviceID(this.deviceID),
+          instruction: 'stop_record',
+        }))
+        this.$emit('record_stop')
+      }
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_parameter/0',
+        device: taskInfo.getRawDeviceID(this.deviceID),
+        parameter: 'RECORDING',
+        content: this.recordOn,
+      }))
+    },
+    axisChannelClickAdd (val) {
+      if (this.axisChannelList.indexOf(val) < 0) {
+        const axisChannel = ['m', 'z', 'y', 'x']
+        this.axisChannelList.push(val)
+        let axisChannelSet = ''
+        for (const axis of axisChannel) {
+          if (this.axisChannelList.indexOf(axis) >= 0) {
+            axisChannelSet += '1'
+          } else {
+            axisChannelSet += '0'
+          }
+        }
+        const axisChannelValue = parseInt(axisChannelSet, 2)
+        if (axisChannelValue !== taskInfo.getDeviceInfo(this.deviceID).AXIS_CH) {
+          this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+            header: 'device_parameter/0',
+            device: taskInfo.getRawDeviceID(this.deviceID),
+            parameter: 'AXIS_CH',
+            content: axisChannelValue,
+          }))
+        }
+      }
+    },
+    axisChannelClickRemove (val) {
+      if (this.axisChannelList.indexOf(val) >= 0) {
+        const axisChannel = ['m', 'z', 'y', 'x']
+        this.axisChannelList.splice(this.axisChannelList.indexOf(val), 1)
+        let axisChannelSet = ''
+        for (const axis of axisChannel) {
+          if (this.axisChannelList.indexOf(axis) >= 0) {
+            axisChannelSet += '1'
+          } else {
+            axisChannelSet += '0'
+          }
+        }
+        const axisChannelValue = parseInt(axisChannelSet, 2)
+        if (axisChannelValue !== taskInfo.getDeviceInfo(this.deviceID).AXIS_CH) {
+          this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+            header: 'device_parameter/0',
+            device: taskInfo.getRawDeviceID(this.deviceID),
+            parameter: 'AXIS_CH',
+            content: axisChannelValue,
+          }))
+        }
+      }
+    },
+    pageToast: function (mes) {
+      this.showToast(
+        mes,
+        {
+          icon: 'fa-bell',
+          position: 'bottom-right',
+          duration: 4000,
+        },
+      )
+    },
  },
  mounted () {
    this.refresh()
@@ -1,7 +1,7 @@
 <template>
  <div class="flex">
    <div>
-      <div>
+      <!-- <div>
        <div class="row sm12 xl12 md12 xs12">
          <va-button
            class="mx-1 px-2"
@@ -23,16 +23,17 @@
            Stop
          </va-button>
        </div>
-      </div>
+      </div> -->

      <div class="mt-4">
        <div class="row sm12 xl12 md12 xs12">
          <p class="display-6">ELECTRODE</p>
+          <va-button flat color="gray" icon="fa fa-info-circle" style="margin: 0.001rem; padding: 0.001rem;" @click.stop="toggleModal('ELECTRODE')"/>
        </div>
        <div class="row">
          <div class="flex sm12 xl12 md12 xs12">
            <va-button-toggle
-              :on-change="stimulateElectrodeSelectChange()"
+              @click.native="stimulateElectrodeSelectChange()"
              small
              outline
              v-model="stimulateElectrodeSelect"
@@ -91,7 +92,7 @@
        <div class="row">
          <div class="flex sm12 xl12 md12 xs12">
            <va-button-toggle
-              :on-change="cycleNumberSelectChange()"
+              @click.native="cycleNumberSelectChange()"
              small
              outline
              v-model="cycleNumberSelect"
@@ -115,8 +116,8 @@
                  Rounds
                </p>
              </va-input>
-              <va-button slot="append" class="ml-2 pa-1 shrink" small @click="cycleNumberChange(256)">
-                256
+              <va-button slot="append" class="ml-2 pa-1 shrink" small @click="cycleNumberChange(255)">
+                255
              </va-button>
            </div>
            <va-slider
@@ -126,8 +127,8 @@
              @touchend.native="cycleNumberChange(cycleNumber)"
              value-visible
              v-model="cycleNumber"
-              :min="1"
-              :max="256"
+              :min="0"
+              :max="255"
            />
          </div>
        </div>
@@ -174,16 +175,20 @@
      <div class="mt-4">
        <div class="row sm12 xl12 md12 xs12">
          <p class="display-6">PATTERN</p>
+          <va-button flat color="gray" icon="fa fa-info-circle" style="margin: 0.001rem; padding: 0.001rem;" @click.stop="toggleModal('PATTERN')"/>
        </div>
        <div class="row">
          <div class="flex sm12 xl12 md12 xs12">
            <va-button-toggle
-              :on-change="patternModeSelectChange()"
+              @click.native="patternModeSelectChange()"
              small
              outline
              v-model="patternModeSelect"
              :options="patternModeOptions"
-            />
+            >
+            </va-button-toggle>
+            <img src='@/assets/img/Monophasic.png' v-if="patternModeSelect==0" class="sti_pattern_img">
+            <img src='@/assets/img/Biphasic.png' v-if="patternModeSelect==1" class="sti_pattern_img">
          </div>
        </div>

@@ -236,22 +241,24 @@
        <div class="row">
          <div class="flex sm12 xl12 md12 xs12">
            <div class="flex row align--center">
-              <va-button slot="append" class="mr-2 pa-1 shrink" small @click="patternModeSelect?timeRangeChange(1, 0):timeRangeChange(1, 0)">
-                0
-              </va-button>
+              <!-- <va-button slot="append" class="mr-2 pa-1 shrink" small @click="timeRangeChange(1, 0.1)">
+                0.1
+              </va-button> -->
              <va-input
                @keyup.enter="timeRangeChange(1, t1RangeInput)"
                v-model="t1RangeInput"
                class="mb-0"
                :label="'T1 RANGE'"
+                :error="TRangeErrorMsgList[0].showError"
+                :error-messages="TRangeErrorMsgList[0].errorMsg"
              >
                <p slot="append" style="margin-right: 0;" small>
                  {{unitOptions[unitSelect].label}}
                </p>
              </va-input>
-              <va-button slot="append" class="ml-2 pa-1 shrink" small @click="timeRangeChange(1, 10.23)">
+              <!-- <va-button slot="append" class="ml-2 pa-1 shrink" small @click="timeRangeChange(1, 10.23)">
                10.23
-              </va-button>
+              </va-button> -->
            </div>
          </div>
        </div>
@@ -259,22 +266,24 @@
        <div class="row" v-if="patternModeSelect==1">
          <div class="flex sm12 xl12 md12 xs12">
            <div class="flex row align--center">
-              <va-button slot="append" class="mr-2 pa-1 shrink" small @click="timeRangeChange(2, 0)">
+              <!-- <va-button slot="append" class="mr-2 pa-1 shrink" small @click="timeRangeChange(2, 0)">
                0
-              </va-button>
+              </va-button> -->
              <va-input
                @keyup.enter="timeRangeChange(2, t2RangeInput)"
                v-model="t2RangeInput"
                class="mb-0"
                :label="'T2 RANGE'"
+                :error="TRangeErrorMsgList[1].showError"
+                :error-messages="TRangeErrorMsgList[1].errorMsg"
              >
                <p slot="append" style="margin-right: 0;" small>
                  {{unitOptions[unitSelect].label}}
                </p>
              </va-input>
-              <va-button slot="append" class="ml-2 pa-1 shrink" small @click="timeRangeChange(2, 10.23)">
+              <!-- <va-button slot="append" class="ml-2 pa-1 shrink" small @click="timeRangeChange(2, 10.23)">
                10.23
-              </va-button>
+              </va-button> -->
            </div>
          </div>
        </div>
@@ -282,22 +291,24 @@
        <div class="row" v-if="patternModeSelect==1">
          <div class="flex sm12 xl12 md12 xs12">
            <div class="flex row align--center">
-              <va-button slot="append" class="mr-2 pa-1 shrink" small @click="timeRangeChange(3, 0)">
-                0
-              </va-button>
+              <!-- <va-button slot="append" class="mr-2 pa-1 shrink" small @click="timeRangeChange(3, 0.1)">
+                0.1
+              </va-button> -->
              <va-input
                @keyup.enter="timeRangeChange(3, t3RangeInput)"
                v-model="t3RangeInput"
                class="mb-0"
                :label="'T3 RANGE'"
+                :error="TRangeErrorMsgList[2].showError"
+                :error-messages="TRangeErrorMsgList[2].errorMsg"
              >
                <p slot="append" style="margin-right: 0;" small>
                  {{unitOptions[unitSelect].label}}
                </p>
              </va-input>
-              <va-button slot="append" class="ml-2 pa-1 shrink" small @click="timeRangeChange(3, 10.23)">
+              <!-- <va-button slot="append" class="ml-2 pa-1 shrink" small @click="timeRangeChange(3, 10.23)">
                10.23
-              </va-button>
+              </va-button> -->
            </div>
          </div>
        </div>
@@ -305,29 +316,46 @@
        <div class="row">
          <div class="flex sm12 xl12 md12 xs12">
            <div class="flex row align--center">
-              <va-button slot="append" class="mr-2 pa-1 shrink" small @click="timeRangeChange(4, 0)">
+              <!-- <va-button slot="append" class="mr-2 pa-1 shrink" small @click="timeRangeChange(4, 0)">
                0
-              </va-button>
+              </va-button> -->
              <va-input
                @keyup.enter="timeRangeChange(4, t4RangeInput)"
+                readonly
                v-model="t4RangeInput"
                class="mb-0"
                :label="'T4 RANGE'"
+                :error="TRangeErrorMsgList[3].showError"
+                :error-messages="TRangeErrorMsgList[3].errorMsg"
              >
                <p slot="append" style="margin-right: 0;" small>
                  {{unitOptions[unitSelect].label}}
                </p>
              </va-input>
-              <va-button slot="append" class="ml-2 pa-1 shrink" small @click="timeRangeChange(4, 1310.71)">
+              <!-- <va-button slot="append" class="ml-2 pa-1 shrink" small @click="timeRangeChange(4, 1310.71)">
                1310.71
-              </va-button>
+              </va-button> -->
            </div>
          </div>
        </div>

      </div>
-
    </div>
+
+    <va-modal
+      v-model="showGuideLineModal.ELECTRODE"
+      position="right"
+      cancelText=""
+    >
+      <img src='@/assets/img/sti_user_guide.png' class="sti_guideline">
+    </va-modal>
+    <va-modal
+      v-model="showGuideLineModal.PATTERN"
+      position="right"
+      cancelText=""
+    >
+      <img src='@/assets/img/sti_user_guide.png' class="sti_guideline">
+    </va-modal>
  </div>
 </template>

@@ -350,6 +378,7 @@ export default {
  },
  data () {
    return {
+      showGuideLineModal: { ELECTRODE: false, PATTERN: false },
      stimulationOn: false,
      posChannelList: [2],
      negChannelList: [1],
@@ -364,6 +393,7 @@ export default {
          value: 1,
        },
      ],
+      TRangeErrorMsgList: [{ id: 1, showError: false, errorMsg: [''] }, { id: 2, showError: false, errorMsg: [''] }, { id: 3, showError: false, errorMsg: [''] }, { id: 4, showError: false, errorMsg: [''] }],
      cycleNumberSelect: null,
      cycleNumberOptions: [
        {
@@ -431,18 +461,64 @@ export default {
      // posChannel and negChannel at least one && t1 ~ t4 > 0
      const totalStiTime = (this.t1Range + this.t2Range + this.t3Range + this.t4Range) * 10
      if (this.t1Range >= 0 && this.t2Range >= 0 && this.t3Range >= 0 && this.t4Range >= 0 && this.periodNumber === totalStiTime) {
-        return !(this.posChannelList.length > 0 && this.negChannelList.length > 0)
+        return this.stimulateElectrodeSelect ? !(this.posChannelList.length > 0 && this.negChannelList.length > 0) : !(this.posChannelList.length > 0 || this.negChannelList.length > 0)
      } else {
        return true
      }
    },
+    TRangeStatusCheck () {
+      let flag = true
+      for (let i = 0; i < this.TRangeErrorMsgList.length; i++) {
+        if (this.TRangeErrorMsgList[i].showError === true) {
+          flag = false
+          break
+        }
+      }
+      if (flag === true) {
+        return true
+      } else {
+        return false
+      }
+    },
  },
  mqtt: {
  },
  methods: {
+    toggleModal (which) {
+      if (which === 'ELECTRODE') {
+        this.showGuideLineModal.ELECTRODE = true
+      } else if (which === 'PATTERN') {
+        this.showGuideLineModal.PATTERN = true
+      }
+    },
    mqttPub: function (topic, mes) {
      this.$mqtt.publish(topic, mes)
    },
+    refreshPattern () {
+      this.patternModeSelect = taskInfo.getDeviceInfo(this.deviceID).parameterSet.STI_PATTERN ? 1 : 0
+      if (this.TRangeStatusCheck === true) { // if t1~t4 is not valid input, not need to refresh
+        this.t1Range = taskInfo.getDeviceInfo(this.deviceID).parameterSet.STI_T1[0]
+        this.t1RangeInput = String((this.t1Range * 10) / this.unitMultiply)
+        this.t1RangeArray.fill(this.t1Range, 0)
+        this.t2Range = taskInfo.getDeviceInfo(this.deviceID).parameterSet.STI_T2[0]
+        this.t2RangeInput = String((this.t2Range * 10) / this.unitMultiply)
+        this.t2RangeArray.fill(this.t2Range, 0)
+        this.t3Range = taskInfo.getDeviceInfo(this.deviceID).parameterSet.STI_T3[0]
+        this.t3RangeInput = String((this.t3Range * 10) / this.unitMultiply)
+        this.t3RangeArray.fill(this.t3Range, 0)
+        this.t4Range = taskInfo.getDeviceInfo(this.deviceID).parameterSet.STI_T4[0]
+        this.t4RangeInput = String((this.t4Range * 10) / this.unitMultiply)
+        this.t4RangeArray.fill(this.t4Range, 0)
+      }
+
+      this.periodNumber = (this.t1Range + this.t2Range + this.t3Range + this.t4Range) * 10
+      this.periodNumberInput = String((this.periodNumber) / this.unitMultiply)
+
+      if (this.periodNumber !== 0) {
+        this.frequencyNumber = parseInt(1 / (this.periodNumber * 1e-6))
+        this.frequencyNumberInput = String(this.frequencyNumber)
+      }
+    },
    refresh () {
      this.stimulationOn = taskInfo.getDeviceInfo(this.deviceID).parameterSet.STIMULATING

@@ -462,11 +538,6 @@ export default {
          }
        }
      })
-      // }
-      // console.log('cha',stiChannelSet)
-      // console.log('pol',stiPolaritySet)
-      // console.log('pos',this.posChannelList)
-      // console.log('neg',this.negChannelList)
      this.stimulateElectrodeSelect = taskInfo.getDeviceInfo(this.deviceID).parameterSet.STI_H_BRIDGE ? 1 : 0
      this.cycleNumberSelect = taskInfo.getDeviceInfo(this.deviceID).parameterSet.CONTINUOUS_STI ? 1 : 0
      this.cycleNumber = taskInfo.getDeviceInfo(this.deviceID).parameterSet.STI_CYCLE_LIST[0]
@@ -475,45 +546,14 @@ export default {
      this.amplitudeNumber = taskInfo.getDeviceInfo(this.deviceID).parameterSet.STI_AMPLITUDE * 5
      this.amplitudeNumberInput = String(this.amplitudeNumber)

-      this.patternModeSelect = taskInfo.getDeviceInfo(this.deviceID).parameterSet.STI_PATTERN ? 1 : 0
-      this.t1Range = taskInfo.getDeviceInfo(this.deviceID).parameterSet.STI_T1[0]
-      this.t1RangeInput = String((this.t1Range * 10) / this.unitMultiply)
-      this.t2Range = taskInfo.getDeviceInfo(this.deviceID).parameterSet.STI_T2[0]
-      this.t2RangeInput = String((this.t2Range * 10) / this.unitMultiply)
-      this.t3Range = taskInfo.getDeviceInfo(this.deviceID).parameterSet.STI_T3[0]
-      this.t3RangeInput = String((this.t3Range * 10) / this.unitMultiply)
-      this.t4Range = taskInfo.getDeviceInfo(this.deviceID).parameterSet.STI_T4[0]
-      this.t4RangeInput = String((this.t4Range * 10) / this.unitMultiply)
-
-      if (this.pattternModeSelect === 0) {
-        this.periodNumber = (this.t1Range + this.t4Range) * 10
-      } else {
-        this.periodNumber = (this.t1Range + this.t2Range + this.t3Range + this.t4Range) * 10
-      }
-      this.periodNumberInput = String((this.periodNumber) / this.unitMultiply)
-
-      if (this.periodNumber !== 0) {
-        this.frequencyNumber = parseInt(1 / (this.periodNumber * 1e-6))
-        this.frequencyNumberInput = String(this.frequencyNumber)
-      }
-      // console.log('STI_CONTINUOUS', this.cycleNumberSelect)
-      // console.log('STI_H_BRIDGE', this.stimulateElectrodeSelect)
-      // console.log('STI_PATTERN', this.patternModeSelect)
-      // console.log('STI_T1', taskInfo.getDeviceInfo(this.deviceID).parameterSet.STI_T1[0])
-      // console.log('STI_T2', taskInfo.getDeviceInfo(this.deviceID).parameterSet.STI_T2[0])
-      // console.log('STI_T3', taskInfo.getDeviceInfo(this.deviceID).parameterSet.STI_T3[0])
-      // console.log('STI_T4', taskInfo.getDeviceInfo(this.deviceID).parameterSet.STI_T4[0])
-      // console.log(this.periodNumber)
-      // console.log(this.periodNumberInput)
-      // console.log(this.frequencyNumber)
-      // console.log(this.frequencyNumberInput)
+      this.refreshPattern()
    },
    transUnit () {
-      if (this.unitSelect === 0) {
+      if (this.unitSelect === 0) { // s
        this.unitMultiply = 1000000
-      } else if (this.unitSelect === 1) {
+      } else if (this.unitSelect === 1) { // ms
        this.unitMultiply = 1000
-      } else {
+      } else { // us
        this.unitMultiply = 1
      }
      this.refresh()
@@ -578,12 +618,13 @@ export default {
      }
    },
    cycleNumberChange (val) {
-      if (isNaN(val) || parseInt(val) > 256 || parseInt(val) < 1) {
+      if (isNaN(val) || parseInt(val) > 255 || parseInt(val) < 1) {
        this.cycleNumberInput = '1'
        this.cycleNumber = 1
+      } else {
+        this.cycleNumberInput = String(val)
+        this.cycleNumber = parseInt(val)
      }
-      this.cycleNumberInput = String(val)
-      this.cycleNumber = parseInt(val)

      if (this.cycleNumberArray[0] !== this.cycleNumber) {
        this.cycleNumberArray.fill(this.cycleNumber, 0)
@@ -618,135 +659,237 @@ export default {
        }
      }
      if (parseInt(this.amplitudeNumber / 5) !== parseInt(taskInfo.getDeviceInfo(this.deviceID).parameterSet.STI_AMPLITUDE)) {
+        const content = parseInt(this.amplitudeNumber / 5)
        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
          header: 'device_parameter/0',
          device: taskInfo.getRawDeviceID(this.deviceID),
-          parameter: 'STI_AMPLITUDE',
-          content: parseInt(this.amplitudeNumber / 5),
+          parameter: 'STI_AMPLITUDE|STI_AMPLITUDE_H|STI_AMPLITUDE_L',
+          content: `${content}|${content}|${content}`,
        }))
      }
    },
+
+    // [Region] Neulive sti pattern block
    patternModeSelectChange () {
      if (this.patternModeSelect == null) {
        return false
      }
+
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_parameter/0',
+        device: taskInfo.getRawDeviceID(this.deviceID),
+        parameter: 'STI_PATTERN',
+        content: this.patternModeSelect,
+      }))
+
      if (this.patternModeSelect === 0) {
        this.t2Range = 0
-        this.t2RangeInput = '0'
        this.t3Range = 0
-        this.t3RangeInput = '0'
-        this.t4Range = (this.periodNumber / 10) - this.t1Range
-        this.t4RangeInput = String((this.t4Range * 10) / this.unitMultiply)
-      } else {
-        this.t3Range = this.t1Range
-        this.t3RangeInput = this.t1RangeInput
-        this.t4Range = (this.periodNumber / 10) - this.t1Range - this.t2Range - this.t3Range
-        this.t4RangeInput = String((this.t4Range * 10) / this.unitMultiply)
+      } else if (this.patternModeSelect === 1) {
+        this.t2Range = 0
+        this.t3Range = 10
+        this.t3RangeInput = String((this.t3Range * 10) / this.unitMultiply)
      }
-      if (this.patternModeSelect !== taskInfo.getDeviceInfo(this.deviceID).parameterSet.STI_PATTERN) {
-        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
-          header: 'device_parameter/0',
-          device: taskInfo.getRawDeviceID(this.deviceID),
-          parameter: 'STI_PATTERN',
-          content: this.patternModeSelect,
-        }))
+
+      this.autoComputeT4()
+      const check4 = this.checkIndividualTRange(4, this.t4Range)
+      if (check4) {
+        this.updateTimeRange()
      }
+      this.updateStiTRangeCheckParam()
    },
    frequencyNumberChange (val) {
-      if (this.frequencyNumberInput == null) {
+      if (this.frequencyNumberInput == null || isNaN(val)) {
        return false
      }
-      if (typeof (val) === 'string') {
-        if (isNaN(val) || parseInt(val) < 1 || parseInt(val) > 10000) {
-          this.frequencyNumberInput = '100'
-          this.frequencyNumber = 100
-        }
-        if (parseInt(this.frequencyNumberInput) !== parseInt(this.frequencyNumber)) {
-          this.frequencyNumber = parseInt(val)
-        }
+      val = parseInt(val)
+      if (val < 1) {
+        this.frequencyNumberInput = '1'
+        this.frequencyNumber = 1
+        this.pageToast('Reset to 1 Hz')
+      } else if (val > 20000) {
+        this.frequencyNumberInput = '20000'
+        this.frequencyNumber = 20000
+        this.pageToast('Reset to 20000 Hz')
+      } else {
+        this.frequencyNumberInput = val.toString()
+        this.frequencyNumber = val
      }
-      this.periodNumber = (1 / this.frequencyNumber * 1e6).toFixed(3)
+
+      this.periodNumber = (1e6 / this.frequencyNumber).toFixed(3) // us
      this.periodNumberInput = String(this.periodNumber / this.unitMultiply)

-      if (this.t1Range === 0 || this.t3Range === 0) {
-        this.t1Range = 10
-        this.t1RangeInput = String((this.t1Range * 10) / this.unitMultiply)
-        this.t3Range = 10
-        this.t3RangeInput = String((this.t3Range * 10) / this.unitMultiply)
-        this.t4Range = (this.periodNumber / 10) - (this.t1Range + this.t2Range + this.t3Range)
-        this.t4RangeInput = String((this.t4Range * 10) / this.unitMultiply)
-      } else {
-        this.t4Range = (this.periodNumber / 10) - (this.t1Range + this.t2Range + this.t3Range)
-        this.t4RangeInput = String((this.t4Range * 10) / this.unitMultiply)
-      }
+      this.autoResetAllTRange()

-      this.updateTimeRange()
+      const check1 = this.checkIndividualTRange(1, this.t1Range)
+      const check2 = this.checkIndividualTRange(2, this.t2Range)
+      const check3 = this.checkIndividualTRange(3, this.t3Range)
+      const check4 = this.checkIndividualTRange(4, this.t4Range)
+      // if pass, call this.updateTimeRange(), if any fail, call updateErrorMsg in this.checkIndividualTRange()
+      if (check1 && check2 && check3 && check4) {
+        this.updateTimeRange()
+      }
+      this.updateStiTRangeCheckParam()
    },
    periodNumberChange (val) {
-      if (this.periodNumberInput === null) {
+      const usVal = parseFloat(val * this.unitMultiply) // us
+      if (this.periodNumberInput == null || isNaN(usVal)) {
        return false
      }
-      if (typeof (val) === 'string') {
-        if (isNaN(val) || parseFloat(val) < 0 || parseFloat(val / this.unitMultiply) > 1) {
-          this.periodNumber = 1000
-          this.periodNumberInput = String(this.periodNumber / this.unitMultiply)
-        }
-        if (parseInt(this.periodNumberInput) !== parseInt(this.periodNumber)) {
-          this.periodNumber = parseFloat(val * this.unitMultiply)
-          this.periodNumberInput = val
-        }
+
+      if (usVal < 50) { // freq: 1 to 20000Hz, so period > 50us (1e6/50=20000)
+        this.periodNumber = 50
+        this.periodNumberInput = String(50 / this.unitMultiply)
+        this.pageToast('Reset to 50 us')
+      } else if (usVal > 1e6) { // freq: 1 to 20000Hz, so period < 1e6us (1e6/1e6=1)
+        this.periodNumber = 1e6
+        this.periodNumberInput = String(1e6 / this.unitMultiply)
+        this.pageToast('Reset to 1 s')
+      } else {
+        this.periodNumber = usVal
+        this.periodNumberInput = val
      }
-      this.frequencyNumber = parseInt(1 / (this.periodNumber * 1e-6))
+
+      this.frequencyNumber = parseInt(1e6 / this.periodNumber)
      this.frequencyNumberInput = String(this.frequencyNumber)

-      if (this.t1Range === 0 || this.t3Range === 0) {
-        this.t1Range = 10
-        this.t1RangeInput = String((this.t1Range * 10) / this.unitMultiply)
-        this.t3Range = 10
-        this.t3RangeInput = String((this.t3Range * 10) / this.unitMultiply)
-        this.t4Range = (this.periodNumber / 10) - (this.t1Range + this.t2Range + this.t3Range)
-        this.t4RangeInput = String((this.t4Range * 10) / this.unitMultiply)
-      } else {
-        this.t4Range = (this.periodNumber / 10) - (this.t1Range + this.t2Range + this.t3Range)
-        this.t4RangeInput = String((this.t4Range * 10) / this.unitMultiply)
-      }
+      this.autoResetAllTRange()

-      this.updateTimeRange()
+      const check1 = this.checkIndividualTRange(1, this.t1Range)
+      const check2 = this.checkIndividualTRange(2, this.t2Range)
+      const check3 = this.checkIndividualTRange(3, this.t3Range)
+      const check4 = this.checkIndividualTRange(4, this.t4Range)
+      // if pass, call this.updateTimeRange(), if any fail, call updateErrorMsg in this.checkIndividualTRange()
+      if (check1 && check2 && check3 && check4) {
+        this.updateTimeRange()
+      }
+      this.updateStiTRangeCheckParam()
    },
-    timeRangeChange (stiIimeSelect, val) {
+    timeRangeChange (stiIimeSelect, inputVal) {
+      inputVal = parseFloat(inputVal)
+
      switch (stiIimeSelect) {
        case 1:
-          this.t1Range = parseInt((val * this.unitMultiply) / 10)
-          this.t1RangeInput = val
-          this.t3Range = parseInt((val * this.unitMultiply) / 10)
-          this.t3RangeInput = val
+          this.t1RangeInput = inputVal
+          this.t1Range = parseFloat((inputVal * this.unitMultiply) / 10)
+          this.autoComputeT4()
          break
        case 2:
-          this.t2Range = parseInt((val * this.unitMultiply) / 10)
-          this.t2RangeInput = val
+          this.t2RangeInput = inputVal
+          this.t2Range = parseFloat((inputVal * this.unitMultiply) / 10)
+          this.autoComputeT4()
          break
        case 3:
-          this.t1Range = parseInt((val * this.unitMultiply) / 10)
-          this.t1RangeInput = val
-          this.t3Range = parseInt((val * this.unitMultiply) / 10)
-          this.t3RangeInput = val
+          this.t3RangeInput = inputVal
+          this.t3Range = parseFloat((inputVal * this.unitMultiply) / 10)
+          this.autoComputeT4()
          break
        case 4:
-          this.t4Range = parseInt((val * this.unitMultiply) / 10)
-          this.t4RangeInput = val
-          if (this.frequencyNumber > 0) {
-            this.t2Range = (this.periodNumber / 10) - this.t1Range - this.t3Range - this.t4Range
-            this.t2RangeInput = String((this.t2Range * 10) / this.unitMultiply)
-          }
+          this.t4RangeInput = inputVal
+          this.t4Range = parseFloat((inputVal * this.unitMultiply) / 10)
          break
      }
-      if (this.frequencyNumber > 0 && stiIimeSelect !== 4) {
-        this.t4Range = (this.periodNumber / 10) - this.t1Range - this.t2Range - this.t3Range
+
+      const status1 = this.checkIndividualTRange(1, this.t1Range)
+      const status2 = this.checkIndividualTRange(2, this.t2Range)
+      const status3 = this.checkIndividualTRange(3, this.t3Range)
+      const status4 = this.checkIndividualTRange(4, this.t4Range)
+      if (status1 && status2 && status3 && status4) {
+        this.resetAllTRangeErrorMsg({ totalT: 4 })
+        this.updateTimeRange()
+      }
+      this.updateStiTRangeCheckParam()
+    },
+
+    updateStiTRangeCheckParam () {
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_parameter/0',
+        device: taskInfo.getRawDeviceID(this.deviceID),
+        parameter: 'sti_trange_set_done',
+        content: this.TRangeStatusCheck,
+      }))
+    },
+    autoResetAllTRange () {
+      if (this.patternModeSelect === 0) { // Monophasic
+        this.t1Range = 10
+        this.t1RangeInput = String((this.t1Range * 10) / this.unitMultiply)
+        this.t4Range = this.periodNumber / 10 - this.t1Range
+        this.t4RangeInput = String((this.t4Range * 10) / this.unitMultiply)
+      } else if (this.patternModeSelect === 1) { // Biphasic
+        this.t1Range = 10
+        this.t1RangeInput = String((this.t1Range * 10) / this.unitMultiply)
+        this.t2Range = 10
+        this.t2RangeInput = String((this.t2Range * 10) / this.unitMultiply)
+        this.t3Range = 10
+        this.t3RangeInput = String((this.t3Range * 10) / this.unitMultiply)
+        this.t4Range = this.periodNumber / 10 - this.t1Range - this.t2Range - this.t3Range
        this.t4RangeInput = String((this.t4Range * 10) / this.unitMultiply)
      }
-
-      this.updateTimeRange()
    },
+    autoComputeT4 () {
+      this.t4Range = (this.periodNumber / 10) - this.t1Range - this.t2Range - this.t3Range
+      this.t4RangeInput = String((this.t4Range * 10) / this.unitMultiply)
+      this.pageToast('Auto complete T4 value')
+    },
+
+    // [SubRegion] check sti T range setting helper function
+    // update individual t range error msg
+    updateTRangeErrorMsg (payload) {
+      const index = payload.stiIimeSelect - 1
+      this.TRangeErrorMsgList[index].showError = payload.status
+      this.TRangeErrorMsgList[index].errorMsg[0] = payload.msg
+    },
+    resetAllTRangeErrorMsg (payload) {
+      for (let i = 1; i <= payload.totalT; i++) {
+        this.updateTRangeErrorMsg({ stiIimeSelect: i, status: false, msg: '' })
+      }
+    },
+    checkIndividualTRange (stiIimeSelect, val) {
+      // val unit: us
+      val = parseFloat(val) * 10 // UI us
+      if (val < 0 || isNaN(val)) {
+        this.updateTRangeErrorMsg({ stiIimeSelect: stiIimeSelect, status: true, msg: 'T > 0' })
+        return false
+      }
+
+      switch (stiIimeSelect) {
+        case 1:
+          if (val < 100 || val > 10230) { // us
+            this.updateTRangeErrorMsg({ stiIimeSelect: stiIimeSelect, status: true, msg: '0.1ms <= T1 <= 10.23ms' })
+            return false
+          } else {
+            this.updateTRangeErrorMsg({ stiIimeSelect: stiIimeSelect, status: false, msg: '' })
+            return true
+          }
+        case 2:
+          if (val < 0 || val > 10230) { // us
+            this.updateTRangeErrorMsg({ stiIimeSelect: stiIimeSelect, status: true, msg: '0ms <= T2 <= 10.23ms' })
+            return false
+          } else {
+            this.updateTRangeErrorMsg({ stiIimeSelect: stiIimeSelect, status: false, msg: '' })
+            return true
+          }
+        case 3:
+          if (val < 100 || val > 10230) { // us
+            this.updateTRangeErrorMsg({ stiIimeSelect: stiIimeSelect, status: true, msg: '0.1ms <= T3 <= 10.23ms' })
+            return false
+          } else {
+            this.updateTRangeErrorMsg({ stiIimeSelect: stiIimeSelect, status: false, msg: '' })
+            return true
+          }
+        case 4:
+          if (val < 0 || val > 1310710) { // us
+            this.updateTRangeErrorMsg({ stiIimeSelect: stiIimeSelect, status: true, msg: '0ms <= T4 <= 1310.71ms' })
+            return false
+          } else {
+            this.updateTRangeErrorMsg({ stiIimeSelect: stiIimeSelect, status: false, msg: '' })
+            return true
+          }
+      }
+    },
+    // [EndSubRegion]
+    // [EndRegion]
+
    updateStiChannel () {
      // stiChannelSet (+,-), stiPolaritySet (+)
      let stiChannelSet = ''
@@ -768,61 +911,59 @@ export default {
      const stiChannelValue = parseInt(stiChannelSet, 2)
      const stiPolarityValue = parseInt(stiPolaritySet, 2)

-      if (stiChannelValue !== taskInfo.getDeviceInfo(this.deviceID).STI_CHANNEL) {
+      if (stiChannelValue !== taskInfo.getDeviceInfo(this.deviceID).STI_CHANNEL || stiPolarityValue !== taskInfo.getDeviceInfo(this.deviceID).STI_POLARITY) {
        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
          header: 'device_parameter/0',
          device: taskInfo.getRawDeviceID(this.deviceID),
-          parameter: 'STI_CHANNEL',
-          content: stiChannelValue,
-        }))
-      }
-      if (stiPolarityValue !== taskInfo.getDeviceInfo(this.deviceID).STI_POLARITY) {
-        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
-          header: 'device_parameter/0',
-          device: taskInfo.getRawDeviceID(this.deviceID),
-          parameter: 'STI_POLARITY',
-          content: stiPolarityValue,
+          parameter: 'STI_CHANNEL|STI_POLARITY',
+          content: `${stiChannelValue}|${stiPolarityValue}`,
        }))
      }
    },
    updateTimeRange () {
+      let parameter = ''
+      let content = ''
      if (this.t1RangeArray[0] !== this.t1Range) {
        this.t1RangeArray.fill(this.t1Range, 0)
-        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
-          header: 'device_parameter/0',
-          device: taskInfo.getRawDeviceID(this.deviceID),
-          parameter: 'STI_T1',
-          content: '0:9=' + String(this.t1RangeArray),
-        }))
+        parameter += 'STI_T1|'
+        content += '0:9=' + String(this.t1RangeArray) + '|'
      }
      if (this.t2RangeArray[0] !== this.t2Range) {
        this.t2RangeArray.fill(this.t2Range, 0)
-        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
-          header: 'device_parameter/0',
-          device: taskInfo.getRawDeviceID(this.deviceID),
-          parameter: 'STI_T2',
-          content: '0:9=' + String(this.t2RangeArray),
-        }))
+        parameter += 'STI_T2|'
+        content += '0:9=' + String(this.t2RangeArray) + '|'
      }
      if (this.t3RangeArray[0] !== this.t3Range) {
        this.t3RangeArray.fill(this.t3Range, 0)
-        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
-          header: 'device_parameter/0',
-          device: taskInfo.getRawDeviceID(this.deviceID),
-          parameter: 'STI_T3',
-          content: '0:9=' + String(this.t3RangeArray),
-        }))
+        parameter += 'STI_T3|'
+        content += '0:9=' + String(this.t3RangeArray) + '|'
      }
      if (this.t4RangeArray[0] !== this.t4Range) {
        this.t4RangeArray.fill(this.t4Range, 0)
+        parameter += 'STI_T4|'
+        content += '0:9=' + String(this.t4RangeArray) + '|'
+      }
+      if (parameter.length > 0) {
+        parameter = parameter.slice(0, -1)
+        content = content.slice(0, -1)
        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
          header: 'device_parameter/0',
          device: taskInfo.getRawDeviceID(this.deviceID),
-          parameter: 'STI_T4',
-          content: '0:9=' + String(this.t4RangeArray),
+          parameter: parameter,
+          content: content,
        }))
      }
    },
+    pageToast: function (mes) {
+      this.showToast(
+        mes,
+        {
+          icon: 'fa-bell',
+          position: 'bottom-right',
+          duration: 4000,
+        },
+      )
+    },
  },
  mounted () {
    this.refresh()
@@ -831,3 +972,21 @@ export default {
  },
 }
 </script>
+
+<style lang="scss">
+  .sti_guideline {
+    height: 75vh;
+    width: 65vw;
+    text-align: left;
+    justify-content: center;
+    position: relative;
+  }
+
+  .sti_pattern_img {
+    height: 22.5vh;
+    width: 17.5vw;
+    text-align: center;
+    justify-content: center;
+    position: relative;
+  }
+</style>
@@ -7,7 +7,7 @@
        :label="'RECORDING'"
      >
        <va-tree-node>
-          <neulive-parameter-recording :ref="'rec_ref'" :deviceID="deviceID"/>
+          <neulive-parameter-recording :ref="'rec_ref'" :deviceID="deviceID" @record="start()" @record_stop="stop()"/>
        </va-tree-node>
      </va-tree-category>
      <va-tree-category
@@ -72,6 +72,12 @@ export default {
        }
      })
    },
+    start: function () {
+      this.$emit('record')
+    },
+    stop: function () {
+      this.$emit('record_stop')
+    },
  },
  mounted () {
    this.pageInit()
@@ -0,0 +1,104 @@
+<template>
+  <div class="row">
+    <div class="flex sm12 xl12 md12 xs12">
+      <div class="flex row align--center" :key="inputeKey">
+        <va-button slot="append" class="mr-2 pa-1 shrink" small @click="cycleNumberChange(minValue)">
+          {{ minValue }}
+        </va-button>
+        <va-input
+          @mouseleave.native="cycleNumberChange(cycleNoNumberInput)"
+          @keyup.enter="cycleNumberChange(cycleNoNumberInput)"
+          @blur="cycleNumberChange(cycleNoNumberInput)"
+          v-model="cycleNoNumberInput"
+          class="mb-0"
+          style="width: 100px;"
+        >
+        </va-input>
+        <va-button slot="append" class="ml-2 pa-1 shrink" small @click="cycleNumberChange(maxValue)">
+          {{ maxValue }}
+        </va-button>
+      </div>
+      <va-slider
+        @mouseup.native="cycleNumberChange(cycleNoNumber)"
+        @mouseleave.native="cycleNumberChange(cycleNoNumber)"
+        @touchend.native="cycleNumberChange(cycleNoNumber)"
+        @click.native="cycleNumberChange(cycleNoNumber)"
+        class="flex sm12 xl12 md12 xs12"
+        v-model="cycleNoNumber"
+        :min="minValue"
+        :max="maxValue"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+
+import { taskInfo } from '../../../../../data/task/TaskInfo'
+
+export default {
+  name: 'CycleRange',
+  components: {
+  },
+  props: {
+    deviceID: {
+      type: Number,
+      required: true,
+    },
+    parameterName: {
+      type: String,
+      required: true,
+    },
+    minValue: {
+      type: Number,
+      default: 1,
+    },
+    maxValue: {
+      type: Number,
+      default: 250,
+    },
+  },
+  created () {
+  },
+  data () {
+    return {
+      inputeKey: 0,
+      cycleNoNumber: taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName],
+      cycleNoNumberInput: String(taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName]),
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    cycleNumberChange (val) {
+      this.inputeKey++
+      if (this.cycleNoNumber == null) {
+        return false
+      }
+      if (isNaN(val) || parseInt(val) > this.maxValue || parseInt(val) < this.minValue) {
+        this.cycleNoNumber = this.minValue
+        this.cycleNoNumberInput = String(this.minValue)
+        return false
+      }
+      if (this.cycleNoNumberInput !== this.cycleNoNumber || this.cycleNoNumber !== val) {
+        this.cycleNoNumberInput = String(val)
+        this.cycleNoNumber = parseInt(val)
+      }
+      if (this.cycleNoNumber !== taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName]) {
+        this.$emit('parameterChange', [this.parameterName, this.cycleNoNumber])
+      }
+    },
+    updateCycleNumber (val) {
+      this.cycleNumberChange(val)
+    },
+  },
+  async mounted () {
+  },
+  destroyed () {
+  },
+  watch: {
+
+  },
+}
+
+</script>
@@ -0,0 +1,98 @@
+<template>
+  <div>
+    <e-initial :ref="'EInitial'" :deviceID="deviceID" :parameterName="'E_initial'" @parameterChange="deviceParameterChange($event)" />
+    <e-1 :ref="'E1'" :deviceID="deviceID" :parameterName="'E1'" @parameterChange="deviceParameterChange($event)" />
+    <e-2 :ref="'E2'" :deviceID="deviceID" :parameterName="'E1'" @parameterChange="deviceParameterChange($event)" />
+    <e-final :ref="'EFinal'" :deviceID="deviceID" :parameterName="'E_final'" @parameterChange="deviceParameterChange($event)" />
+    <pulse-amp :ref="'PulseAmp'" :deviceID="deviceID" :parameterName="'Pulse_Amp'" @parameterChange="deviceParameterChange($event)" />
+    <pulse-width :ref="'PulseWidth'" :deviceID="deviceID" :parameterName="'Pulse_Width'" @parameterChange="deviceParameterChange($event)" />
+    <increment :ref="'Increment'" :deviceID="deviceID" :parameterName="'Increment'" @parameterChange="deviceParameterChange($event)" />
+    <step-time :ref="'StepTime'" :deviceID="deviceID" :parameterName="'Step_time'" @parameterChange="deviceParameterChange($event)" />
+    <current-recording-period :ref="'CURR_REC'" :deviceID="deviceID" :parameterName="'CURR_REC_'" @parameterChange="deviceParameterChange($event)" />
+  </div>
+</template>
+
+<script>
+
+import { taskInfo } from '@/data/task/TaskInfo'
+import EInitial from './EInitial'
+import E1 from './E1'
+import E2 from './E2'
+import EFinal from './EFinal'
+import PulseAmp from './PulseAmp'
+import PulseWidth from './PulseWidth'
+import Increment from './Increment'
+import StepTime from './StepTime'
+import CurrentRecordingPeriod from './CurrentRecordingPeriod'
+
+export default {
+  name: 'SegmentBlock',
+  components: {
+    EInitial,
+    E1,
+    E2,
+    EFinal,
+    PulseAmp,
+    PulseWidth,
+    Increment,
+    StepTime,
+    CurrentRecordingPeriod,
+  },
+  props: {
+    deviceID: {
+      type: Number,
+      required: true,
+    },
+  },
+  created () {
+  },
+  data () {
+    return {
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    mqttPub: function (topic, mes) {
+      this.$mqtt.publish(topic, mes)
+    },
+    // Array[String of Parameter Name, Value]
+    deviceParameterChange: function (e) {
+      console.log('e[0],e[1]', e[0], ',', e[1])
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_parameter/0',
+        device: taskInfo.getRawDeviceID(this.deviceID),
+        parameter: e[0],
+        content: e[1],
+      }))
+    },
+    refresh () {
+      if (this.$refs.EInitial != null) {
+        this.$refs.EInitial.refresh()
+      }
+      if (this.$refs.EFinal != null) {
+        this.$refs.EFinal.refresh()
+      }
+      if (this.$refs.PulseAmp != null) {
+        this.$refs.PulseAmp.refresh()
+      }
+      if (this.$refs.PulseWidth != null) {
+        this.$refs.PulseWidth.refresh()
+      }
+      if (this.$refs.Increment != null) {
+        this.$refs.Increment.refresh()
+      }
+      if (this.$refs.StepTime != null) {
+        this.$refs.StepTime.refresh()
+      }
+    },
+  },
+  mounted () {
+    this.refresh()
+  },
+  watch: {
+  },
+  destroyed () {
+  },
+}
+</script>
@@ -0,0 +1,89 @@
+<template>
+  <div>
+    <e-initial :ref="'EInitial'" :deviceID="deviceID" :parameterName="'E_initial'" @parameterChange="deviceParameterChange($event)" />
+    <e-final :ref="'EFinal'" :deviceID="deviceID" :parameterName="'E_final'" @parameterChange="deviceParameterChange($event)" />
+    <pulse-amp :ref="'PulseAmp'" :deviceID="deviceID" :parameterName="'Pulse_Amp'" @parameterChange="deviceParameterChange($event)" />
+    <pulse-width :ref="'PulseWidth'" :deviceID="deviceID" :parameterName="'Pulse_Width'" @parameterChange="deviceParameterChange($event)" />
+    <increment :ref="'Increment'" :deviceID="deviceID" :parameterName="'Increment'" @parameterChange="deviceParameterChange($event)" />
+    <step-time :ref="'StepTime'" :deviceID="deviceID" :parameterName="'Step_time'" @parameterChange="deviceParameterChange($event)" />
+  </div>
+</template>
+
+<script>
+
+import { taskInfo } from '@/data/task/TaskInfo'
+import EInitial from './EInitial'
+import EFinal from './EFinal'
+import PulseAmp from './PulseAmp'
+import PulseWidth from './PulseWidth'
+import Increment from './Increment'
+import StepTime from './StepTime'
+
+export default {
+  name: 'SegmentBlock',
+  components: {
+    EInitial,
+    EFinal,
+    PulseAmp,
+    PulseWidth,
+    Increment,
+    StepTime,
+  },
+  props: {
+    deviceID: {
+      type: Number,
+      required: true,
+    },
+  },
+  created () {
+  },
+  data () {
+    return {
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    mqttPub: function (topic, mes) {
+      this.$mqtt.publish(topic, mes)
+    },
+    // Array[String of Parameter Name, Value]
+    deviceParameterChange: function (e) {
+      console.log('e[0],e[1]', e[0], ',', e[1])
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_parameter/0',
+        device: taskInfo.getRawDeviceID(this.deviceID),
+        parameter: e[0],
+        content: e[1],
+      }))
+    },
+    refresh () {
+      if (this.$refs.EInitial != null) {
+        this.$refs.EInitial.refresh()
+      }
+      if (this.$refs.EFinal != null) {
+        this.$refs.EFinal.refresh()
+      }
+      if (this.$refs.PulseAmp != null) {
+        this.$refs.PulseAmp.refresh()
+      }
+      if (this.$refs.PulseWidth != null) {
+        this.$refs.PulseWidth.refresh()
+      }
+      if (this.$refs.Increment != null) {
+        this.$refs.Increment.refresh()
+      }
+      if (this.$refs.StepTime != null) {
+        this.$refs.StepTime.refresh()
+      }
+    },
+  },
+  mounted () {
+    this.refresh()
+  },
+  watch: {
+  },
+  destroyed () {
+  },
+}
+</script>
@@ -0,0 +1,101 @@
+<template>
+  <div>
+    <div class="row flex sm12 xl12 md12 xs12 align--center">
+      <div class="flex sm9 xl9 md9 xs9 px-0 mx-0">
+        <p class="display-6">Current Recording Period<p/>
+      </div>
+      <div class="flex sm3 xl3 md3 xs3 px-0 mx-0">
+        <p small> {{ itemInput }} ~ 100% </p>
+        <!-- <va-input
+          @mouseleave.native="itemChange(itemInput)"
+          @keyup.enter="itemChange(itemInput)"
+          @blur="itemChange(itemInput)"
+          v-model="itemInput"
+          class="mb-0"
+        >
+          <p slot="append" style="margin-right: 0;" small>
+            %
+          </p>
+        </va-input> -->
+      </div>
+    </div>
+    <div class="flex sm12 xl12 md12 xs12" :key="inputeKey">
+      <va-slider
+        @mouseup.native="itemChange(itemInput)"
+        @mouseleave.native="itemChange(itemInput)"
+        @touchend.native="itemChange(itemInput)"
+        pins
+        :min="0"
+        :max="90"
+        value-visible
+        :step="10"
+        v-model="itemInput"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+
+import { taskInfo } from '@/data/task/TaskInfo'
+
+export default {
+  name: 'CurrentRecordingPeriod',
+  components: {
+  },
+  props: {
+    deviceID: {
+      type: Number,
+      required: true,
+    },
+    parameterName: {
+      type: String,
+      required: true,
+    },
+  },
+  created () {
+  },
+  data () {
+    return {
+      disableSlider: false,
+      inputeKey: 0,
+      itemInput: Math.round(taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName]),
+      // duration: Math.round(taskInfo.getDeviceInfo(this.deviceID).parameterSet['t_pulse_' + String(this.segmentID)]) / 10,
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    itemChange (val) {
+      this.itemInput = val
+      this.$emit('parameterChange', [this.parameterName, val])
+    },
+    checkSliderRange (duration) {
+      if (duration <= 10) {
+        this.disableSlider = true
+      } else {
+        this.disableSlider = false
+        const percent = parseFloat((5 / duration) * 100)
+        if (percent > 5) {
+          this.itemChange([this.itemInputMin, this.itemInputMax])
+        } else if (percent >= 1.1 && percent <= 5) {
+          this.itemChange([this.itemInputMin, this.itemInputMax])
+        } else if (percent < 1.1) {
+          this.itemChange([this.itemInputMin, this.itemInputMax])
+        }
+      }
+    },
+    refresh () {
+      // this.itemInput
+      // this.duration = Math.round(taskInfo.getDeviceInfo(this.deviceID).parameterSet['t_pulse_' + String(this.segmentID)]) / 10
+    },
+  },
+  async mounted () {
+    // this.checkSliderRange(this.duration)
+  },
+  destroyed () {
+  },
+  watch: {
+  },
+}
+</script>
@@ -0,0 +1,121 @@
+<template>
+  <div class="flex-container">
+    <p class="display-6 flex-child">E 1<p/>
+    <va-input
+      @mouseleave.native="itemChange(itemInput)"
+      @keyup.enter="itemChange(itemInput)"
+      @blur="itemChange(itemInput)"
+      v-model="itemInput"
+      class="mb-0 flex-child1"
+      :error="showError"
+      :error-messages="errorMsg"
+    >
+    </va-input>
+    <va-button
+      @click="unitChange()"
+      v-model="unitSelect"
+      class="px-2 py-0 mr-0 flex-child2"
+    >
+      {{ unitSelect }}
+    </va-button>
+  </div>
+</template>
+
+<script>
+
+import { taskInfo } from '@/data/task/TaskInfo'
+
+export default {
+  name: 'E1',
+  components: {
+  },
+  props: {
+    deviceID: {
+      type: Number,
+      required: true,
+    },
+    parameterName: {
+      type: String,
+      required: true,
+    },
+  },
+  created () {
+  },
+  data () {
+    return {
+      inputeKey: 0,
+      itemInput: String(Math.round((taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName + String(this.segmentID)] - 25000) / 5)),
+      unitSelect: 'mV',
+      unitClickTime: 0,
+      showError: false,
+      errorMsg: [''],
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    itemChange (val) {
+      this.itemInput = val
+      this.inputeKey++
+      this.showError = false
+      this.errorMsg[0] = ''
+      if (this.unitSelect === 'V') {
+        val = parseFloat(val) * 1000
+      }
+      if (parseInt(val) < -5000 || parseInt(val) > 5000) {
+        this.showError = true
+        this.errorMsg[0] = '-5 ~ 5V'
+        return
+      }
+      if (parseFloat(val) !== Math.round((taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName + String(this.segmentID)] - 25000) / 5)) {
+        this.$emit('parameterChange', [this.parameterName + String(this.segmentID), parseFloat(val) * 5 + 25000])
+      }
+    },
+    unitChange () {
+      this.unitClickTime += 1
+      if (this.unitClickTime % 2 === 0) {
+        this.unitSelect = 'mV'
+        this.itemInput = String(parseFloat(this.itemInput) * 1000)
+      } else {
+        this.unitSelect = 'V'
+        this.itemInput = String(parseFloat(this.itemInput) / 1000)
+      }
+    },
+    refresh () {
+      let volt = Math.round((taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName + String(this.segmentID)] - 25000) / 5)
+      if (this.unitSelect === 'V') {
+        volt /= 1000
+      }
+      this.itemInput = String(volt)
+    },
+  },
+  async mounted () {
+  },
+  destroyed () {
+  },
+  watch: {
+  },
+}
+</script>
+
+<style lang="scss">
+  .flex-container {
+    display: flex;
+  }
+
+  .flex-child {
+    flex: 2;
+  }
+
+  .flex-child1 {
+    flex: 1;
+  }
+
+  .flex-child2 {
+    flex: 0;
+  }
+
+  .flex-child:first-child {
+    margin-right: 1px;
+  }
+</style>
@@ -0,0 +1,121 @@
+<template>
+  <div class="flex-container">
+    <p class="display-6 flex-child">E 2<p/>
+    <va-input
+      @mouseleave.native="itemChange(itemInput)"
+      @keyup.enter="itemChange(itemInput)"
+      @blur="itemChange(itemInput)"
+      v-model="itemInput"
+      class="mb-0 flex-child1"
+      :error="showError"
+      :error-messages="errorMsg"
+    >
+    </va-input>
+    <va-button
+      @click="unitChange()"
+      v-model="unitSelect"
+      class="px-2 py-0 mr-0 flex-child2"
+    >
+      {{ unitSelect }}
+    </va-button>
+  </div>
+</template>
+
+<script>
+
+import { taskInfo } from '@/data/task/TaskInfo'
+
+export default {
+  name: 'E2',
+  components: {
+  },
+  props: {
+    deviceID: {
+      type: Number,
+      required: true,
+    },
+    parameterName: {
+      type: String,
+      required: true,
+    },
+  },
+  created () {
+  },
+  data () {
+    return {
+      inputeKey: 0,
+      itemInput: String(Math.round((taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName + String(this.segmentID)] - 25000) / 5)),
+      unitSelect: 'mV',
+      unitClickTime: 0,
+      showError: false,
+      errorMsg: [''],
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    itemChange (val) {
+      this.itemInput = val
+      this.inputeKey++
+      this.showError = false
+      this.errorMsg[0] = ''
+      if (this.unitSelect === 'V') {
+        val = parseFloat(val) * 1000
+      }
+      if (parseInt(val) < -5000 || parseInt(val) > 5000) {
+        this.showError = true
+        this.errorMsg[0] = '-5 ~ 5V'
+        return
+      }
+      if (parseFloat(val) !== Math.round((taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName + String(this.segmentID)] - 25000) / 5)) {
+        this.$emit('parameterChange', [this.parameterName + String(this.segmentID), parseFloat(val) * 5 + 25000])
+      }
+    },
+    unitChange () {
+      this.unitClickTime += 1
+      if (this.unitClickTime % 2 === 0) {
+        this.unitSelect = 'mV'
+        this.itemInput = String(parseFloat(this.itemInput) * 1000)
+      } else {
+        this.unitSelect = 'V'
+        this.itemInput = String(parseFloat(this.itemInput) / 1000)
+      }
+    },
+    refresh () {
+      let volt = Math.round((taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName + String(this.segmentID)] - 25000) / 5)
+      if (this.unitSelect === 'V') {
+        volt /= 1000
+      }
+      this.itemInput = String(volt)
+    },
+  },
+  async mounted () {
+  },
+  destroyed () {
+  },
+  watch: {
+  },
+}
+</script>
+
+<style lang="scss">
+  .flex-container {
+    display: flex;
+  }
+
+  .flex-child {
+    flex: 2;
+  }
+
+  .flex-child1 {
+    flex: 1;
+  }
+
+  .flex-child2 {
+    flex: 0;
+  }
+
+  .flex-child:first-child {
+    margin-right: 1px;
+  }
+</style>
@@ -0,0 +1,121 @@
+<template>
+  <div class="flex-container">
+    <p class="display-6 flex-child">E Final<p/>
+    <va-input
+      @mouseleave.native="itemChange(itemInput)"
+      @keyup.enter="itemChange(itemInput)"
+      @blur="itemChange(itemInput)"
+      v-model="itemInput"
+      class="mb-0 flex-child1"
+      :error="showError"
+      :error-messages="errorMsg"
+    >
+    </va-input>
+    <va-button
+      @click="unitChange()"
+      v-model="unitSelect"
+      class="px-2 py-0 mr-0 flex-child2"
+    >
+      {{ unitSelect }}
+    </va-button>
+  </div>
+</template>
+
+<script>
+
+import { taskInfo } from '@/data/task/TaskInfo'
+
+export default {
+  name: 'EFinal',
+  components: {
+  },
+  props: {
+    deviceID: {
+      type: Number,
+      required: true,
+    },
+    parameterName: {
+      type: String,
+      required: true,
+    },
+  },
+  created () {
+  },
+  data () {
+    return {
+      inputeKey: 0,
+      itemInput: String(Math.round((taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName + String(this.segmentID)] - 25000) / 5)),
+      unitSelect: 'mV',
+      unitClickTime: 0,
+      showError: false,
+      errorMsg: [''],
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    itemChange (val) {
+      this.itemInput = val
+      this.inputeKey++
+      this.showError = false
+      this.errorMsg[0] = ''
+      if (this.unitSelect === 'V') {
+        val = parseFloat(val) * 1000
+      }
+      if (parseInt(val) < -5000 || parseInt(val) > 5000) {
+        this.showError = true
+        this.errorMsg[0] = '-5 ~ 5V'
+        return
+      }
+      if (parseFloat(val) !== Math.round((taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName + String(this.segmentID)] - 25000) / 5)) {
+        this.$emit('parameterChange', [this.parameterName + String(this.segmentID), parseFloat(val) * 5 + 25000])
+      }
+    },
+    unitChange () {
+      this.unitClickTime += 1
+      if (this.unitClickTime % 2 === 0) {
+        this.unitSelect = 'mV'
+        this.itemInput = String(parseFloat(this.itemInput) * 1000)
+      } else {
+        this.unitSelect = 'V'
+        this.itemInput = String(parseFloat(this.itemInput) / 1000)
+      }
+    },
+    refresh () {
+      let volt = Math.round((taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName + String(this.segmentID)] - 25000) / 5)
+      if (this.unitSelect === 'V') {
+        volt /= 1000
+      }
+      this.itemInput = String(volt)
+    },
+  },
+  async mounted () {
+  },
+  destroyed () {
+  },
+  watch: {
+  },
+}
+</script>
+
+<style lang="scss">
+  .flex-container {
+    display: flex;
+  }
+
+  .flex-child {
+    flex: 2;
+  }
+
+  .flex-child1 {
+    flex: 1;
+  }
+
+  .flex-child2 {
+    flex: 0;
+  }
+
+  .flex-child:first-child {
+    margin-right: 1px;
+  }
+</style>
@@ -0,0 +1,121 @@
+<template>
+  <div class="flex-container">
+    <p class="display-6 flex-child">E Initial<p/>
+    <va-input
+      @mouseleave.native="itemChange(itemInput)"
+      @keyup.enter="itemChange(itemInput)"
+      @blur="itemChange(itemInput)"
+      v-model="itemInput"
+      class="mb-0 flex-child1"
+      :error="showError"
+      :error-messages="errorMsg"
+    >
+    </va-input>
+    <va-button
+      @click="unitChange()"
+      v-model="unitSelect"
+      class="px-2 py-0 mr-0 flex-child2"
+    >
+      {{ unitSelect }}
+    </va-button>
+  </div>
+</template>
+
+<script>
+
+import { taskInfo } from '@/data/task/TaskInfo'
+
+export default {
+  name: 'EInitial',
+  components: {
+  },
+  props: {
+    deviceID: {
+      type: Number,
+      required: true,
+    },
+    parameterName: {
+      type: String,
+      required: true,
+    },
+  },
+  created () {
+  },
+  data () {
+    return {
+      inputeKey: 0,
+      itemInput: String(Math.round((taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName + String(this.segmentID)] - 25000) / 5)),
+      unitSelect: 'mV',
+      unitClickTime: 0,
+      showError: false,
+      errorMsg: [''],
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    itemChange (val) {
+      this.itemInput = val
+      this.inputeKey++
+      this.showError = false
+      this.errorMsg[0] = ''
+      if (this.unitSelect === 'V') {
+        val = parseFloat(val) * 1000
+      }
+      if (parseInt(val) < -5000 || parseInt(val) > 5000) {
+        this.showError = true
+        this.errorMsg[0] = '-5 ~ 5V'
+        return
+      }
+      if (parseFloat(val) !== Math.round((taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName + String(this.segmentID)] - 25000) / 5)) {
+        this.$emit('parameterChange', [this.parameterName + String(this.segmentID), parseFloat(val) * 5 + 25000])
+      }
+    },
+    unitChange () {
+      this.unitClickTime += 1
+      if (this.unitClickTime % 2 === 0) {
+        this.unitSelect = 'mV'
+        this.itemInput = String(parseFloat(this.itemInput) * 1000)
+      } else {
+        this.unitSelect = 'V'
+        this.itemInput = String(parseFloat(this.itemInput) / 1000)
+      }
+    },
+    refresh () {
+      let volt = Math.round((taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName + String(this.segmentID)] - 25000) / 5)
+      if (this.unitSelect === 'V') {
+        volt /= 1000
+      }
+      this.itemInput = String(volt)
+    },
+  },
+  async mounted () {
+  },
+  destroyed () {
+  },
+  watch: {
+  },
+}
+</script>
+
+<style lang="scss">
+  .flex-container {
+    display: flex;
+  }
+
+  .flex-child {
+    flex: 2;
+  }
+
+  .flex-child1 {
+    flex: 1;
+  }
+
+  .flex-child2 {
+    flex: 0;
+  }
+
+  .flex-child:first-child {
+    margin-right: 1px;
+  }
+</style>
@@ -0,0 +1,121 @@
+<template>
+  <div class="flex-container">
+    <p class="display-6 flex-child">Increment<p/>
+    <va-input
+      @mouseleave.native="itemChange(itemInput)"
+      @keyup.enter="itemChange(itemInput)"
+      @blur="itemChange(itemInput)"
+      v-model="itemInput"
+      class="mb-0 flex-child1"
+      :error="showError"
+      :error-messages="errorMsg"
+    >
+    </va-input>
+    <va-button
+      @click="unitChange()"
+      v-model="unitSelect"
+      class="px-2 py-0 mr-0 flex-child2"
+    >
+      {{ unitSelect }}
+    </va-button>
+  </div>
+</template>
+
+<script>
+
+import { taskInfo } from '@/data/task/TaskInfo'
+
+export default {
+  name: 'Increment',
+  components: {
+  },
+  props: {
+    deviceID: {
+      type: Number,
+      required: true,
+    },
+    parameterName: {
+      type: String,
+      required: true,
+    },
+  },
+  created () {
+  },
+  data () {
+    return {
+      inputeKey: 0,
+      itemInput: String(Math.round((taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName + String(this.segmentID)] - 25000) / 5)),
+      unitSelect: 'mV',
+      unitClickTime: 0,
+      showError: false,
+      errorMsg: [''],
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    itemChange (val) {
+      this.itemInput = val
+      this.inputeKey++
+      this.showError = false
+      this.errorMsg[0] = ''
+      if (this.unitSelect === 'V') {
+        val = parseFloat(val) * 1000
+      }
+      if (parseInt(val) < -5000 || parseInt(val) > 5000) {
+        this.showError = true
+        this.errorMsg[0] = '-5 ~ 5V'
+        return
+      }
+      if (parseFloat(val) !== Math.round((taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName + String(this.segmentID)] - 25000) / 5)) {
+        this.$emit('parameterChange', [this.parameterName + String(this.segmentID), parseFloat(val) * 5 + 25000])
+      }
+    },
+    unitChange () {
+      this.unitClickTime += 1
+      if (this.unitClickTime % 2 === 0) {
+        this.unitSelect = 'mV'
+        this.itemInput = String(parseFloat(this.itemInput) * 1000)
+      } else {
+        this.unitSelect = 'V'
+        this.itemInput = String(parseFloat(this.itemInput) / 1000)
+      }
+    },
+    refresh () {
+      let volt = Math.round((taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName + String(this.segmentID)] - 25000) / 5)
+      if (this.unitSelect === 'V') {
+        volt /= 1000
+      }
+      this.itemInput = String(volt)
+    },
+  },
+  async mounted () {
+  },
+  destroyed () {
+  },
+  watch: {
+  },
+}
+</script>
+
+<style lang="scss">
+  .flex-container {
+    display: flex;
+  }
+
+  .flex-child {
+    flex: 2;
+  }
+
+  .flex-child1 {
+    flex: 1;
+  }
+
+  .flex-child2 {
+    flex: 0;
+  }
+
+  .flex-child:first-child {
+    margin-right: 1px;
+  }
+</style>
@@ -0,0 +1,121 @@
+<template>
+  <div class="flex-container">
+    <p class="display-6 flex-child">Pulse Amplitude<p/>
+    <va-input
+      @mouseleave.native="itemChange(itemInput)"
+      @keyup.enter="itemChange(itemInput)"
+      @blur="itemChange(itemInput)"
+      v-model="itemInput"
+      class="mb-0 flex-child1"
+      :error="showError"
+      :error-messages="errorMsg"
+    >
+    </va-input>
+    <va-button
+      @click="unitChange()"
+      v-model="unitSelect"
+      class="px-2 py-0 mr-0 flex-child2"
+    >
+      {{ unitSelect }}
+    </va-button>
+  </div>
+</template>
+
+<script>
+
+import { taskInfo } from '@/data/task/TaskInfo'
+
+export default {
+  name: 'PulseAmp',
+  components: {
+  },
+  props: {
+    deviceID: {
+      type: Number,
+      required: true,
+    },
+    parameterName: {
+      type: String,
+      required: true,
+    },
+  },
+  created () {
+  },
+  data () {
+    return {
+      inputeKey: 0,
+      itemInput: String(Math.round((taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName + String(this.segmentID)] - 25000) / 5)),
+      unitSelect: 'mV',
+      unitClickTime: 0,
+      showError: false,
+      errorMsg: [''],
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    itemChange (val) {
+      this.itemInput = val
+      this.inputeKey++
+      this.showError = false
+      this.errorMsg[0] = ''
+      if (this.unitSelect === 'V') {
+        val = parseFloat(val) * 1000
+      }
+      if (parseInt(val) < -5000 || parseInt(val) > 5000) {
+        this.showError = true
+        this.errorMsg[0] = '-5 ~ 5V'
+        return
+      }
+      if (parseFloat(val) !== Math.round((taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName + String(this.segmentID)] - 25000) / 5)) {
+        this.$emit('parameterChange', [this.parameterName + String(this.segmentID), parseFloat(val) * 5 + 25000])
+      }
+    },
+    unitChange () {
+      this.unitClickTime += 1
+      if (this.unitClickTime % 2 === 0) {
+        this.unitSelect = 'mV'
+        this.itemInput = String(parseFloat(this.itemInput) * 1000)
+      } else {
+        this.unitSelect = 'V'
+        this.itemInput = String(parseFloat(this.itemInput) / 1000)
+      }
+    },
+    refresh () {
+      let volt = Math.round((taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName + String(this.segmentID)] - 25000) / 5)
+      if (this.unitSelect === 'V') {
+        volt /= 1000
+      }
+      this.itemInput = String(volt)
+    },
+  },
+  async mounted () {
+  },
+  destroyed () {
+  },
+  watch: {
+  },
+}
+</script>
+
+<style lang="scss">
+  .flex-container {
+    display: flex;
+  }
+
+  .flex-child {
+    flex: 2;
+  }
+
+  .flex-child1 {
+    flex: 1;
+  }
+
+  .flex-child2 {
+    flex: 0;
+  }
+
+  .flex-child:first-child {
+    margin-right: 1px;
+  }
+</style>
@@ -0,0 +1,130 @@
+<template>
+  <div class="flex-container">
+    <p class="display-6 flex-child">Pulse Width<p/>
+    <va-input
+      @mouseleave.native="itemChange(itemInput)"
+      @keyup.enter="itemChange(itemInput)"
+      @blur="itemChange(itemInput)"
+      v-model="itemInput"
+      class="mb-0 flex-child1"
+      :error="showError"
+      :error-messages="errorMsg"
+    >
+    </va-input>
+    <va-button
+      @click="unitChange()"
+      v-model="unitSelect"
+      class="px-2 py-0 mr-0 flex-child2"
+    >
+      {{ unitSelect }}
+    </va-button>
+  </div>
+</template>
+
+<script>
+
+import { taskInfo } from '@/data/task/TaskInfo'
+
+export default {
+  name: 'PulseWidth',
+  components: {
+  },
+  props: {
+    deviceID: {
+      type: Number,
+      required: true,
+    },
+    parameterName: {
+      type: String,
+      required: true,
+    },
+  },
+  created () {
+  },
+  data () {
+    return {
+      inputeKey: 0,
+      itemInput: String(Math.round((taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName + String(this.segmentID)]) / 10)),
+      unitSelect: 'msec',
+      unitClickTime: 0,
+      showError: false,
+      errorMsg: [''],
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    itemChange (val) {
+      this.itemInput = val
+      this.inputeKey++
+      this.showError = false
+      this.errorMsg[0] = ''
+      if (this.unitSelect === 'sec') {
+        val = parseInt(val) * 1000
+      }
+
+      // 5 ms a step
+      const remainder = parseInt(val) % 5
+      if (remainder !== 0) {
+        val = parseInt(val) + (5 - remainder)
+      }
+      if (parseInt(val) < 1 || parseInt(val) > 100000) {
+        this.showError = true
+        this.errorMsg[0] = '1ms ~ 100s'
+        return
+      }
+      if (parseFloat(val) !== Math.round(taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName + String(this.segmentID)] / 10)) {
+        this.$emit('parameterChange', [this.parameterName + String(this.segmentID), parseInt(val) * 10])
+        this.$emit('checkCurrentRecording', val)
+      }
+    },
+    unitChange () {
+      this.unitClickTime += 1
+      if (this.unitClickTime % 2 === 0) {
+        this.unitSelect = 'msec'
+        this.itemInput = String(parseFloat(this.itemInput) * 1000)
+      } else {
+        this.unitSelect = 'sec'
+        this.itemInput = String(parseFloat(this.itemInput) / 1000)
+      }
+    },
+    refresh () {
+      if (this.showError === false) {
+        let duration = Math.round((taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName + String(this.segmentID)]) / 10)
+        if (this.unitSelect === 'sec') {
+          duration /= 1000
+        }
+        this.itemInput = String(duration)
+      }
+    },
+  },
+  async mounted () {
+  },
+  destroyed () {
+  },
+  watch: {
+  },
+}
+</script>
+
+<style lang="scss">
+  .flex-container {
+    display: flex;
+  }
+
+  .flex-child {
+    flex: 2;
+  }
+
+  .flex-child1 {
+    flex: 1;
+  }
+
+  .flex-child2 {
+    flex: 0;
+  }
+
+  .flex-child:first-child {
+    margin-right: 1px;
+  }
+</style>
@@ -0,0 +1,130 @@
+<template>
+  <div class="flex-container">
+    <p class="display-6 flex-child">Step Time<p/>
+    <va-input
+      @mouseleave.native="itemChange(itemInput)"
+      @keyup.enter="itemChange(itemInput)"
+      @blur="itemChange(itemInput)"
+      v-model="itemInput"
+      class="mb-0 flex-child1"
+      :error="showError"
+      :error-messages="errorMsg"
+    >
+    </va-input>
+    <va-button
+      @click="unitChange()"
+      v-model="unitSelect"
+      class="px-2 py-0 mr-0 flex-child2"
+    >
+      {{ unitSelect }}
+    </va-button>
+  </div>
+</template>
+
+<script>
+
+import { taskInfo } from '@/data/task/TaskInfo'
+
+export default {
+  name: 'StepTime',
+  components: {
+  },
+  props: {
+    deviceID: {
+      type: Number,
+      required: true,
+    },
+    parameterName: {
+      type: String,
+      required: true,
+    },
+  },
+  created () {
+  },
+  data () {
+    return {
+      inputeKey: 0,
+      itemInput: String(Math.round((taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName + String(this.segmentID)]) / 10)),
+      unitSelect: 'msec',
+      unitClickTime: 0,
+      showError: false,
+      errorMsg: [''],
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    itemChange (val) {
+      this.itemInput = val
+      this.inputeKey++
+      this.showError = false
+      this.errorMsg[0] = ''
+      if (this.unitSelect === 'sec') {
+        val = parseInt(val) * 1000
+      }
+
+      // 5 ms a step
+      const remainder = parseInt(val) % 5
+      if (remainder !== 0) {
+        val = parseInt(val) + (5 - remainder)
+      }
+      if (parseInt(val) < 1 || parseInt(val) > 100000) {
+        this.showError = true
+        this.errorMsg[0] = '1ms ~ 100s'
+        return
+      }
+      if (parseFloat(val) !== Math.round(taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName + String(this.segmentID)] / 10)) {
+        this.$emit('parameterChange', [this.parameterName + String(this.segmentID), parseInt(val) * 10])
+        this.$emit('checkCurrentRecording', val)
+      }
+    },
+    unitChange () {
+      this.unitClickTime += 1
+      if (this.unitClickTime % 2 === 0) {
+        this.unitSelect = 'msec'
+        this.itemInput = String(parseFloat(this.itemInput) * 1000)
+      } else {
+        this.unitSelect = 'sec'
+        this.itemInput = String(parseFloat(this.itemInput) / 1000)
+      }
+    },
+    refresh () {
+      if (this.showError === false) {
+        let duration = Math.round((taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName + String(this.segmentID)]) / 10)
+        if (this.unitSelect === 'sec') {
+          duration /= 1000
+        }
+        this.itemInput = String(duration)
+      }
+    },
+  },
+  async mounted () {
+  },
+  destroyed () {
+  },
+  watch: {
+  },
+}
+</script>
+
+<style lang="scss">
+  .flex-container {
+    display: flex;
+  }
+
+  .flex-child {
+    flex: 2;
+  }
+
+  .flex-child1 {
+    flex: 1;
+  }
+
+  .flex-child2 {
+    flex: 0;
+  }
+
+  .flex-child:first-child {
+    margin-right: 1px;
+  }
+</style>
@@ -0,0 +1,66 @@
+<template>
+  <div class="row flex sm12 xl12 md12 xs12 align--center my-0 py-0">
+    <div class="flex sm6 xl6 md6 xs6 px-0 mx-0">
+      <p class="display-6">AC Amplitude<p/>
+    </div>
+    <div class="flex sm6 xl6 md6 xs6 px-0 mx-0" :key="inputeKey">
+      <va-input
+        @mouseleave.native="itemChange(itemInput)"
+        @keyup.enter="itemChange(itemInput)"
+        @blur="itemChange(itemInput)"
+        v-model="itemInput"
+        class="mb-0"
+      >
+        <p slot="append" style="margin-right: 0;" small>
+          mV
+        </p>
+      </va-input>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import { taskInfo } from '@/data/task/TaskInfo'
+
+export default {
+  name: 'ACAmplitude',
+  components: {
+  },
+  props: {
+    deviceID: {
+      type: Number,
+      required: true,
+    },
+    parameterName: {
+      type: String,
+      required: true,
+    },
+  },
+  created () {
+  },
+  data () {
+    return {
+      inputeKey: 0,
+      itemInput: String(Math.round((taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName]) / 2047 * 800)),
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    itemChange (val) {
+      this.itemInput = val
+      this.inputeKey++
+      if (parseInt(this.itemInput) !== Math.round(taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName] / 2047 * 800)) {
+        this.$emit('parameterChange', [this.parameterName, Math.round(parseInt(this.itemInput) / 800 * 2047)])
+      }
+    },
+  },
+  async mounted () {
+  },
+  destroyed () {
+  },
+  watch: {
+  },
+}
+</script>
@@ -0,0 +1,80 @@
+<template>
+  <div class="row flex sm12 xl12 md12 xs12 align--center my-0 py-0">
+    <div class="flex sm6 xl6 md6 xs6 px-0 mx-0">
+      <p class="display-6">Average<p/>
+    </div>
+    <div class="flex sm6 xl6 md6 xs6 px-0 mx-0" :key="inputeKey">
+      <va-button-toggle
+        @click.native="itemChange(itemSelect)"
+        small
+        outline
+        v-model="itemSelect"
+        :options="options"
+        class="mb-0"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+
+import { taskInfo } from '@/data/task/TaskInfo'
+export default {
+  name: 'Average',
+  components: {
+  },
+  props: {
+    deviceID: {
+      type: Number,
+      required: true,
+    },
+    parameterName: {
+      type: String,
+      required: true,
+    },
+  },
+  created () {
+  },
+  data () {
+    return {
+      inputeKey: 0,
+      options: [
+        {
+          value: 0,
+          label: '2',
+        },
+        {
+          value: 1,
+          label: '4',
+        },
+        {
+          value: 2,
+          label: '6',
+        },
+        {
+          value: 3,
+          label: '8',
+        },
+      ],
+      itemSelect: taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName],
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    itemChange (val) {
+      this.itemSelect = val
+      this.inputeKey++
+      if (this.itemSelect !== taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName]) {
+        this.$emit('parameterChange', [this.parameterName, this.itemSelect])
+      }
+    },
+  },
+  async mounted () {
+  },
+  destroyed () {
+  },
+  watch: {
+  },
+}
+</script>
@@ -0,0 +1,84 @@
+<template>
+  <div class="flex row mt-0 pt-0 sm12 xl12 md12 xs12 align--center">
+    <div class="flex sm4 xl4 md4 xs4 pa-0 ma-0">
+      <p class="display-6">Current Range<p/>
+    </div>
+    <div class="flex sm6 xl6 md6 xs6 pa-0 ma-0" :key="inputeKey">
+      <va-button-toggle
+        @click.native="itemChange(itemSelect)"
+        small
+        outline
+        v-model="itemSelect"
+        :options="options"
+        class="mb-0"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+
+import { taskInfo } from '@/data/task/TaskInfo'
+export default {
+  name: 'CurrentRange',
+  components: {
+  },
+  props: {
+    deviceID: {
+      type: Number,
+      required: true,
+    },
+    parameterName: {
+      type: String,
+      required: true,
+    },
+  },
+  created () {
+  },
+  data () {
+    return {
+      inputeKey: 0,
+      options: [
+        {
+          value: 0,
+          label: '1',
+        },
+        {
+          value: 1,
+          label: '2',
+        },
+        {
+          value: 2,
+          label: '3',
+        },
+        {
+          value: 3,
+          label: '4',
+        },
+        {
+          value: 4,
+          label: 'Auto',
+        },
+      ],
+      itemSelect: taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName],
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    itemChange (val) {
+      this.itemInput = val
+      this.inputeKey++
+      if (this.itemSelect !== taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName]) {
+        this.$emit('parameterChange', [this.parameterName, this.itemSelect])
+      }
+    },
+  },
+  async mounted () {
+  },
+  destroyed () {
+  },
+  watch: {
+  },
+}
+</script>
@@ -0,0 +1,66 @@
+<template>
+  <div class="row flex sm12 xl12 md12 xs12 align--center my-0 py-0">
+    <div class="flex sm6 xl6 md6 xs6 px-0 mx-0">
+      <p class="display-6">DC Voltage<p/>
+    </div>
+    <div class="flex sm6 xl6 md6 xs6 px-0 mx-0" :key="inputeKey">
+      <va-input
+        @mouseleave.native="itemChange(itemInput)"
+        @keyup.enter="itemChange(itemInput)"
+        @blur="itemChange(itemInput)"
+        v-model="itemInput"
+        class="mb-0"
+      >
+        <p slot="append" style="margin-right: 0;" small>
+          mV
+        </p>
+      </va-input>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import { taskInfo } from '@/data/task/TaskInfo'
+
+export default {
+  name: 'DCVolt',
+  components: {
+  },
+  props: {
+    deviceID: {
+      type: Number,
+      required: true,
+    },
+    parameterName: {
+      type: String,
+      required: true,
+    },
+  },
+  created () {
+  },
+  data () {
+    return {
+      inputeKey: 0,
+      itemInput: String(Math.round((taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName]) * 2200 / 4095)),
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    itemChange (val) {
+      this.itemInput = val
+      this.inputeKey++
+      if (parseInt(this.itemInput) !== Math.round((taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName]) * 2200 / 4095)) {
+        this.$emit('parameterChange', [this.parameterName, Math.round((parseInt(this.itemInput) * 4095) / 2200)])
+      }
+    },
+  },
+  async mounted () {
+  },
+  destroyed () {
+  },
+  watch: {
+  },
+}
+</script>
@@ -0,0 +1,66 @@
+<template>
+  <div class="row flex sm12 xl12 md12 xs12 align--center my-0 py-0">
+    <div class="flex sm6 xl6 md6 xs6 px-0 mx-0">
+      <p class="display-6">Delay<p/>
+    </div>
+    <div class="flex sm6 xl6 md6 xs6 px-0 mx-0" :key="inputeKey">
+      <va-input
+        @mouseleave.native="itemChange(itemInput)"
+        @keyup.enter="itemChange(itemInput)"
+        @blur="itemChange(itemInput)"
+        v-model="itemInput"
+        class="mb-0"
+      >
+        <p slot="append" style="margin-right: 0;" small>
+          period
+        </p>
+      </va-input>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import { taskInfo } from '@/data/task/TaskInfo'
+
+export default {
+  name: 'Delay',
+  components: {
+  },
+  props: {
+    deviceID: {
+      type: Number,
+      required: true,
+    },
+    parameterName: {
+      type: String,
+      required: true,
+    },
+  },
+  created () {
+  },
+  data () {
+    return {
+      inputeKey: 0,
+      itemInput: String(parseFloat((taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName] / 10)).toFixed(1)),
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    itemChange (val) {
+      this.itemInput = val
+      this.inputeKey++
+      if (parseFloat(this.itemInput).toFixed(1) !== parseFloat(taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName] / 10).toFixed(1)) {
+        this.$emit('parameterChange', [this.parameterName, parseInt((parseFloat(this.itemInput) * 10))])
+      }
+    },
+  },
+  async mounted () {
+  },
+  destroyed () {
+  },
+  watch: {
+  },
+}
+</script>
@@ -0,0 +1,95 @@
+<template>
+  <div class="row flex sm12 xl12 md12 xs12 align--center my-0 py-0">
+    <div class="flex sm4 xl4 md4 xs4 px-0 mx-0">
+      <p class="display-6">Frequency Range<p/>
+    </div>
+    <div class="row flex sm8 xl8 md8 xs8 px-0 mx-0" :key="inputeKey">
+      <va-input
+        @mouseleave.native="itemChangeMin(itemInputMin)"
+        @keyup.enter="itemChangeMin(itemInputMin)"
+        @blur="itemChangeMin(itemInputMin)"
+        v-model="itemInputMin"
+        class="my-0 py-0"
+        :label="'Min'"
+      >
+        <p slot="append" style="margin-right: 0;" small>
+          Hz
+        </p>
+      </va-input>
+      <va-input
+        @mouseleave.native="itemChangeMax(itemInputMax)"
+        @keyup.enter="itemChangeMax(itemInputMax)"
+        @blur="itemChangeMax(itemInputMax)"
+        v-model="itemInputMax"
+        class="my-0 py-0"
+        :label="'Max'"
+      >
+        <p slot="append" style="margin-right: 0;" small>
+          Hz
+        </p>
+      </va-input>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import { taskInfo } from '@/data/task/TaskInfo'
+export default {
+  name: 'FreqRange',
+  components: {
+  },
+  props: {
+    deviceID: {
+      type: Number,
+      required: true,
+    },
+    parameterName: {
+      type: String,
+      required: true,
+    },
+  },
+  created () {
+  },
+  data () {
+    return {
+      inputeKey: 0,
+      itemInputMin: String(parseFloat(Math.round(parseFloat((taskInfo.getDeviceInfo(this.deviceID).parameterSet.FREQ_START * 0.0149) * 100)) / 100).toFixed(1)) === '0.0' ? '0.015' : String(parseFloat(Math.round(parseFloat((taskInfo.getDeviceInfo(this.deviceID).parameterSet.FREQ_START * 0.0149) * 100)) / 100).toFixed(1)),
+      itemInputMax: String(parseFloat(Math.round(parseFloat((taskInfo.getDeviceInfo(this.deviceID).parameterSet.FREQ_STOP * 0.0149) * 100)) / 100).toFixed(1)) === '0.0' ? '0.015' : String(parseFloat(Math.round(parseFloat((taskInfo.getDeviceInfo(this.deviceID).parameterSet.FREQ_STOP * 0.0149) * 100)) / 100).toFixed(1)),
+
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    itemChangeMin (val) {
+      this.itemInputMin = val
+      this.inputeKey++
+      if (parseFloat(this.itemInputMin).toFixed(1) !== parseFloat(Math.round(parseFloat((taskInfo.getDeviceInfo(this.deviceID).parameterSet.FREQ_START * 0.0149) * 100)) / 100).toFixed(1)) {
+        if (parseFloat(this.itemInputMin) < 0.1) {
+          this.$emit('parameterChange', [this.parameterName + '_START', 1])
+        } else {
+          this.$emit('parameterChange', [this.parameterName + '_START', Math.round((parseFloat(this.itemInputMin)) / 0.0149)])
+        }
+      }
+    },
+    itemChangeMax (val) {
+      this.itemInputMax = val
+      this.inputeKey++
+      if (parseFloat(this.itemInputMax).toFixed(1) !== parseFloat(Math.round(parseFloat((taskInfo.getDeviceInfo(this.deviceID).parameterSet.FREQ_STOP * 0.0149) * 100)) / 100).toFixed(1)) {
+        if (parseFloat(this.itemInputMax) < 0.1) {
+          this.$emit('parameterChange', [this.parameterName + '_START', 1])
+        } else {
+          this.$emit('parameterChange', [this.parameterName + '_STOP', Math.round((parseFloat(this.itemInputMax)) / 0.0149)])
+        }
+      }
+    },
+  },
+  async mounted () {
+  },
+  destroyed () {
+  },
+  watch: {
+  },
+}
+</script>
@@ -0,0 +1,71 @@
+<template>
+  <div class="row flex sm12 xl12 md12 xs12 align--center my-0 py-0">
+    <div class="flex sm5 xl5 md5 xs5 px-0 mx-0">
+      <p class="display-6">Point Spacing<p/>
+    </div>
+    <div class="flex sm6 xl6 md6 xs6 px-0 mx-0" :key="inputeKey">
+      <va-button-toggle
+        @click.native="itemChange(itemSelect)"
+        small
+        outline
+        v-model="itemSelect"
+        :options="options"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+
+import { taskInfo } from '@/data/task/TaskInfo'
+export default {
+  name: 'PointSpacing',
+  components: {
+  },
+  props: {
+    deviceID: {
+      type: Number,
+      required: true,
+    },
+    parameterName: {
+      type: String,
+      required: true,
+    },
+  },
+  created () {
+  },
+  data () {
+    return {
+      inputeKey: 0,
+      options: [
+        {
+          value: 0,
+          label: 'Logarithm',
+        },
+        {
+          value: 1,
+          label: 'Linear',
+        },
+      ],
+      itemSelect: taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName],
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    itemChange (val) {
+      this.itemInput = val
+      this.inputeKey++
+      if (this.itemSelect !== taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName]) {
+        this.$emit('parameterChange', [this.parameterName, this.itemSelect])
+      }
+    },
+  },
+  async mounted () {
+  },
+  destroyed () {
+  },
+  watch: {
+  },
+}
+</script>
@@ -0,0 +1,66 @@
+<template>
+  <div class="row flex sm12 xl12 md12 xs12 align--center my-0 py-0">
+    <div class="flex sm6 xl6 md6 xs6 px-0 mx-0">
+      <p class="display-6">Points Per Decades<p/>
+    </div>
+    <div class="flex sm6 xl6 md6 xs6 px-0 mx-0" :key="inputeKey">
+      <va-input
+        @mouseleave.native="itemChange(itemInput)"
+        @keyup.enter="itemChange(itemInput)"
+        @blur="itemChange(itemInput)"
+        v-model="itemInput"
+        class="mb-0"
+      >
+        <p slot="append" style="margin-right: 0;" small>
+          points
+        </p>
+      </va-input>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import { taskInfo } from '@/data/task/TaskInfo'
+
+export default {
+  name: 'PointsPerDecades',
+  components: {
+  },
+  props: {
+    deviceID: {
+      type: Number,
+      required: true,
+    },
+    parameterName: {
+      type: String,
+      required: true,
+    },
+  },
+  created () {
+  },
+  data () {
+    return {
+      inputeKey: 0,
+      itemInput: String(parseInt((taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName]))),
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    itemChange (val) {
+      this.itemInput = val
+      this.inputeKey++
+      if (String(this.itemInput) !== String(Math.round(taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName]))) {
+        this.$emit('parameterChange', [this.parameterName, parseInt(this.itemInput)])
+      }
+    },
+  },
+  async mounted () {
+  },
+  destroyed () {
+  },
+  watch: {
+  },
+}
+</script>
@@ -0,0 +1,117 @@
+<template>
+  <div class="row">
+    <div class="flex sm12 xl12 md12 xs12">
+      <div class="flex row align--center" :key="inputeKey">
+        <va-button slot="append" class="mr-2 pa-1 shrink" small @click="voltNumberChange(minValue*1000)">
+          {{ minValue }}
+        </va-button>
+        <va-input
+          @mouseleave.native="voltNumberChange(voltNumberInput)"
+          @keyup.enter="voltNumberChange(voltNumberInput)"
+          @blur="voltNumberChange(voltNumberInput)"
+          v-model="voltNumberInput"
+          class="mb-0"
+          style="width: 100px;"
+        >
+          <p slot="append" style="margin-right: 0;" small>
+            V
+          </p>
+        </va-input>
+        <va-button slot="append" class="ml-2 pa-1 shrink" small @click="voltNumberChange(maxValue*1000)">
+          {{ maxValue }}
+        </va-button>
+      </div>
+      <va-slider
+        @mouseup.native="voltNumberChange(voltNumber)"
+        @mouseleave.native="voltNumberChange(voltNumber)"
+        @touchend.native="voltNumberChange(voltNumber)"
+        @click.native="voltNumberChange(voltNumber)"
+        class="flex sm12 xl12 md12 xs12"
+        v-model="voltNumber"
+        :min="minValue*1000"
+        :max="maxValue*1000"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+
+import { taskInfo } from '@/data/task/TaskInfo'
+
+export default {
+  name: 'VoltRange',
+  components: {
+  },
+  props: {
+    deviceID: {
+      type: Number,
+      required: true,
+    },
+    parameterName: {
+      type: String,
+      required: true,
+    },
+    minValue: {
+      type: Number,
+      default: -5,
+    },
+    maxValue: {
+      type: Number,
+      default: 5,
+    },
+  },
+  created () {
+  },
+  data () {
+    return {
+      inputeKey: 0,
+      voltNumber: (taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName] - 25000) / 12.5,
+      voltNumberInput: String(parseFloat((taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName] - 25000) / 12500).toFixed(3)),
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    voltNumberChange (val) {
+      this.inputeKey++
+      if (this.voltNumber == null) {
+        return false
+      }
+      if (typeof (val) === 'string') {
+        if (isNaN(val) || parseFloat(val) > 2 || parseFloat(val) < -1.8) {
+          this.voltNumberInput = '0.00'
+          this.voltNumber = 0
+          return false
+        }
+        if (parseFloat(this.voltNumberInput) !== parseFloat(this.voltNumber / 1000)) {
+          this.voltNumber = parseInt(parseFloat(val).toFixed(3) * 1000)
+          this.voltNumberInput = String(parseFloat(this.voltNumber / 1000).toFixed(3))
+        }
+      } else {
+        if (isNaN(val) || parseFloat(val) > 2000 || parseFloat(val) < -1800) {
+          this.voltNumberInput = '0.00'
+          this.voltNumber = 0
+          return false
+        }
+        if (parseFloat(this.voltNumberInput) !== parseFloat(this.voltNumber / 1000) || this.voltNumber !== val) {
+          this.voltNumberInput = String(parseFloat(val / 1000).toFixed(3))
+          this.voltNumber = val
+        }
+      }
+      if (this.voltNumber !== (taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName] - 25000) / 12.5) {
+        this.$emit('parameterChange', [this.parameterName, this.voltNumber * 12.5 + 25000])
+      }
+    },
+    updateVoltNumber (val) {
+      this.voltNumberChange(val)
+    },
+  },
+  async mounted () {
+  },
+  destroyed () {
+  },
+  watch: {
+  },
+}
+</script>
@@ -0,0 +1,71 @@
+<template>
+  <div class="row">
+    <div class="flex sm12 xl12 md12 xs12">
+      <va-button-toggle
+        @click.native="levelButtonSelectChange(levelButtonSelect)"
+        small
+        outline
+        v-model="levelButtonSelect"
+        :options="options"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+
+import { taskInfo } from '../../../../../data/task/TaskInfo'
+
+export default {
+  name: 'LevelButton',
+  components: {
+  },
+  props: {
+    deviceID: {
+      type: Number,
+      required: true,
+    },
+    parameterName: {
+      type: String,
+      required: true,
+    },
+    options: {
+      type: Array,
+      required: true,
+    },
+  },
+  created () {
+  },
+  data () {
+    return {
+      levelButtonSelect: taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName],
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    levelButtonSelectChange (val) {
+      if (this.levelButtonSelect == null) {
+        return false
+      }
+
+      this.levelButtonSelect = val
+
+      if (this.levelButtonSelect !== taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName]) {
+        this.$emit('parameterChange', [this.parameterName, this.levelButtonSelect])
+      }
+    },
+    updateLevelButton (val) {
+      this.levelButtonSelectChange(val)
+    },
+  },
+  async mounted () {
+  },
+  destroyed () {
+  },
+  watch: {
+
+  },
+}
+
+</script>
@@ -0,0 +1,117 @@
+<template>
+  <div class="row">
+    <div class="flex sm12 xl12 md12 xs12">
+      <div class="flex row align--center" :key="inputeKey">
+        <va-button slot="append" class="mr-2 pa-1 shrink" small @click="currentNumberChange(minValue*100)">
+          {{ minValue }}
+        </va-button>
+        <va-input
+          @mouseleave.native="currentNumberChange(currentNumberInput)"
+          @keyup.enter="currentNumberChange(currentNumberInput)"
+          @blur="currentNumberChange(currentNumberInput)"
+          v-model="currentNumberInput"
+          class="mb-0"
+          style="width: 100px;"
+        >
+          <p slot="append" style="margin-right: 0;" small>
+            μA
+          </p>
+        </va-input>
+        <va-button slot="append" class="ml-2 pa-1 shrink" small @click="currentNumberChange(maxValue*100)">
+          {{ maxValue }}
+        </va-button>
+      </div>
+      <va-slider
+        @mouseup.native="currentNumberChange(currentNumber)"
+        @mouseleave.native="currentNumberChange(currentNumber)"
+        @touchend.native="currentNumberChange(currentNumber)"
+        @click.native="currentNumberChange(currentNumber)"
+        class="flex sm12 xl12 md12 xs12"
+        v-model="currentNumber"
+        :min="minValue*100"
+        :max="maxValue*100"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+
+import { taskInfo } from '../../../../../data/task/TaskInfo'
+
+export default {
+  name: 'MicroAmpereRange',
+  components: {
+  },
+  props: {
+    deviceID: {
+      type: Number,
+      required: true,
+    },
+    parameterName: {
+      type: String,
+      required: true,
+    },
+    minValue: {
+      type: Number,
+      default: 0.2,
+    },
+    maxValue: {
+      type: Number,
+      default: 100,
+    },
+  },
+  created () {
+  },
+  data () {
+    return {
+      inputeKey: 0,
+      currentNumber: taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName],
+      currentNumberInput: String(parseFloat(taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName] / 100).toFixed(2)),
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    currentNumberChange (val) {
+      this.inputeKey++
+      if (this.currentNumber == null) {
+        return false
+      }
+      if (typeof (val) === 'string') {
+        if (isNaN(val) || parseFloat(val) > this.maxValue * 100 || parseFloat(val) < this.minValue * 100) {
+          this.currentNumberInput = '0.00'
+          this.currentNumber = 0
+          return false
+        }
+        if (parseFloat(this.currentNumberInput) !== parseFloat(this.currentNumber / 100)) {
+          this.currentNumber = parseInt(parseFloat(val).toFixed(2) * 100)
+          this.currentNumberInput = String(parseFloat(this.currentNumber / 100).toFixed(2))
+        }
+      } else {
+        if (isNaN(val) || parseFloat(val) > this.maxValue * 100 || parseFloat(val) < this.minValue * 100) {
+          this.currentNumberInput = '0.00'
+          this.currentNumber = 0
+          return false
+        }
+        if (parseFloat(this.currentNumberInput) !== parseFloat(this.currentNumber / 100) || this.currentNumber !== val) {
+          this.currentNumberInput = String(parseFloat(val / 100).toFixed(2))
+          this.currentNumber = val
+        }
+      }
+      if (this.currentNumber !== taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName]) {
+        this.$emit('parameterChange', [this.parameterName, this.currentNumber])
+      }
+    },
+    updateMicroAmpereNumber (val) {
+      this.currentNumberChange(val)
+    },
+  },
+  async mounted () {
+  },
+  destroyed () {
+  },
+  watch: {
+  },
+}
+</script>
@@ -0,0 +1,126 @@
+<template>
+  <div class="row">
+    <div class="flex sm12 xl12 md12 xs12">
+      <div class="flex row align--center" :key="inputeKey">
+        <va-button slot="append" class="mr-2 pa-1 shrink" small @click="stepVoltNumberChange(minValue*10)">
+          {{ minValue }}
+        </va-button>
+        <va-input
+          @mouseleave.native="stepVoltNumberChange(voltNumberInput)"
+          @keyup.enter="stepVoltNumberChange(voltNumberInput)"
+          @blur="stepVoltNumberChange(voltNumberInput)"
+          v-model="voltNumberInput"
+          class="mb-0"
+          style="width: 100px;"
+        >
+          <p slot="append" style="margin-right: 0;" small>
+            mV
+          </p>
+        </va-input>
+        <va-button slot="append" class="ml-2 pa-1 shrink" small @click="stepVoltNumberChange(maxValue*10)">
+          {{ maxValue }}
+        </va-button>
+      </div>
+      <va-slider
+        @mouseup.native="stepVoltNumberChange(voltNumber)"
+        @mouseleave.native="stepVoltNumberChange(voltNumber)"
+        @touchend.native="stepVoltNumberChange(voltNumber)"
+        @click.native="stepVoltNumberChange(voltNumber)"
+        class="flex sm12 xl12 md12 xs12"
+        v-model="voltNumber"
+        :min="minValue*10"
+        :max="maxValue*10"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+
+import { taskInfo } from '../../../../../data/task/TaskInfo'
+
+export default {
+  name: 'MilliVoltRange',
+  components: {
+  },
+  props: {
+    deviceID: {
+      type: Number,
+      required: true,
+    },
+    parameterName: {
+      type: String,
+      required: true,
+    },
+    minValue: {
+      type: Number,
+      default: 0.2,
+    },
+    maxValue: {
+      type: Number,
+      default: 100,
+    },
+  },
+  created () {
+  },
+  data () {
+    return {
+      inputeKey: 0,
+      voltNumber: taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName],
+      voltNumberInput: String(parseFloat(taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName] / 10).toFixed(1)),
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    stepVoltNumberChange (val) {
+      this.inputeKey++
+      if (this.voltNumber == null) {
+        return false
+      }
+      if (typeof (val) === 'string') {
+        if (isNaN(val) || parseFloat(val) > 100 || parseFloat(val) < 0.2) {
+          this.voltNumberInput = '0.2'
+          this.voltNumber = 2
+          return false
+        }
+        // console.log('conpare',parseFloat(this.voltNumberInput),parseFloat(this.voltNumber / 10))
+        if (parseFloat(this.voltNumberInput) !== parseFloat(this.voltNumber / 10)) {
+          if (Math.floor(parseFloat(val) * 10) % 2 !== 0) { // odd number
+            this.voltNumber = Math.floor(parseFloat(val) * 10) + 1
+            this.voltNumberInput = String(parseFloat(this.voltNumber / 10).toFixed(1))
+          } else {
+            this.voltNumber = Math.floor(parseFloat(val) * 10)
+            this.voltNumberInput = String(parseFloat(this.voltNumber / 10).toFixed(1))
+          }
+        }
+      } else {
+        if (isNaN(val) || parseFloat(val) > 1000 || parseFloat(val) < 2) {
+          this.voltNumberInput = '0.2'
+          this.voltNumber = 2
+          return false
+        }
+        if (parseFloat(this.voltNumberInput) !== parseFloat(this.voltNumber / 10) || this.voltNumber !== val) {
+          if (this.voltNumber % 2 !== 0) { // odd number
+            val = val + 1
+          }
+          this.voltNumberInput = String(parseFloat(val / 10).toFixed(1))
+          this.voltNumber = val
+        }
+      }
+      if (this.voltNumber !== taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName]) {
+        this.$emit('parameterChange', [this.parameterName, this.voltNumber])
+      }
+    },
+    updateStepVoltNumber (val) {
+      this.stepVoltNumberChange(val)
+    },
+  },
+  async mounted () {
+  },
+  destroyed () {
+  },
+  watch: {
+  },
+}
+</script>
@@ -0,0 +1,78 @@
+<template>
+  <div class="row">
+    <div class="flex sm12 xl12 md12 xs12">
+      <va-button-toggle
+        @click.native="levelButtonSelectChange(levelButtonSelect)"
+        small
+        outline
+        v-model="levelButtonSelect"
+        :options="options"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+
+import { taskInfo } from '../../../../../data/task/TaskInfo'
+
+export default {
+  name: 'LevelButton',
+  components: {
+  },
+  props: {
+    deviceID: {
+      type: Number,
+      required: true,
+    },
+    parameterName: {
+      type: String,
+      required: true,
+    },
+    options: {
+      type: Array,
+      required: true,
+    },
+  },
+  created () {
+  },
+  data () {
+    return {
+      levelButtonSelect: (taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName] + 1) % 2,
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    levelButtonSelectChange (val) {
+      if (this.levelButtonSelect == null) {
+        return false
+      }
+
+      this.levelButtonSelect = val
+      let _charge
+
+      if (this.levelButtonSelect === 0) {
+        _charge = 1
+      } else {
+        _charge = 0
+      }
+
+      if (_charge !== taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName]) {
+        this.$emit('parameterChange', [this.parameterName, _charge])
+      }
+    },
+    updateLevelButton (val) {
+      this.levelButtonSelectChange(val)
+    },
+  },
+  async mounted () {
+  },
+  destroyed () {
+  },
+  watch: {
+
+  },
+}
+
+</script>
@@ -0,0 +1,175 @@
+<template>
+  <div>
+    <div class="row flex sm12 xl12 md12 xs12 align--center">
+      <div class="flex sm9 xl9 md9 xs9 px-0 mx-0">
+        <p class="display-6">Current Recording Period<p/>
+      </div>
+      <div class="flex sm3 xl3 md3 xs3 px-0 mx-0">
+        <p small> {{ this.sliderMin }} ~ {{ this.sliderMax }} % </p>
+      </div>
+    </div>
+    <div class="flex sm12 xl12 md12 xs12" :key="inputeKey">
+      <va-slider
+        @mouseup.native="itemChange(currentRange)"
+        @mouseleave.native="itemChange(currentRange)"
+        @touchend.native="itemChange(currentRange)"
+        :disabled="disableSlider"
+        range
+        pins
+        :min="sliderMin"
+        :max="sliderMax"
+        value-visible
+        :step="5"
+        v-model="currentRange"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+
+import { taskInfo } from '@/data/task/TaskInfo'
+
+export default {
+  name: 'CurrentRecordingPeriod',
+  components: {
+  },
+  props: {
+    deviceID: {
+      type: Number,
+      required: true,
+    },
+    segmentID: {
+      type: Number,
+      required: true,
+    },
+    parameterName: {
+      type: String,
+      required: true,
+    },
+  },
+  created () {
+  },
+  data () {
+    return {
+      disableSlider: false,
+      sliderMin: 35,
+      sliderMax: 100,
+      currentRange: [],
+      inputeKey: 0,
+      itemInputMin: Math.round(taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName + 'START_' + String(this.segmentID)]),
+      itemInputMax: Math.round(taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName + 'END_' + String(this.segmentID)]),
+      duration: Math.round(taskInfo.getDeviceInfo(this.deviceID).parameterSet['t_pulse_' + String(this.segmentID)]) / 10,
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    itemChange (val) {
+      let updateMin = val[0]
+      let updateMax = val[1]
+      this.inputeKey++
+      if (this.sliderMin > updateMin) {
+        updateMin = this.sliderMin
+      }
+      if (this.sliderMax < updateMax) {
+        updateMax = this.sliderMax
+      }
+      this.itemInputMin = updateMin
+      this.itemInputMax = updateMax
+      if (parseFloat(this.itemInputMin) !== Math.round(taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName + 'START_' + String(this.segmentID)])) {
+        if (this.itemInputMin === 0) {
+          updateMin = 1
+        }
+        this.$emit('parameterChange', [this.parameterName + 'START_' + String(this.segmentID), updateMin])
+      }
+      if (parseFloat(this.itemInputMax) !== Math.round(taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName + 'END_' + String(this.segmentID)])) {
+        if (this.itemInputMax === 100) {
+          updateMax = 99
+        }
+        this.$emit('parameterChange', [this.parameterName + 'END_' + String(this.segmentID), updateMax])
+      }
+      this.currentRange = [this.itemInputMin, this.itemInputMax]
+      // console.log(val)
+      // console.log(this.currentRange)
+    },
+    setSliderMinMax (min, max) {
+      this.sliderMin = min
+      this.sliderMax = max
+    },
+    checkSliderRange (duration) {
+      if (duration <= 10) {
+        this.disableSlider = true
+      } else {
+        this.disableSlider = false
+        const percent = parseFloat((5 / duration) * 100)
+        if (percent > 5) {
+          let tick
+          for (let i = 5; i < 50; i += 5) {
+            if (parseFloat(i) < percent && percent <= parseFloat(i + 5)) {
+              tick = i + 5
+              break
+            }
+          }
+          this.setSliderMinMax(tick, 100 - tick)
+          this.itemChange([this.itemInputMin, this.itemInputMax])
+        } else if (percent >= 1.1 && percent <= 5) {
+          this.setSliderMinMax(5, 95)
+          this.itemChange([this.itemInputMin, this.itemInputMax])
+        } else if (percent < 1.1) {
+          this.setSliderMinMax(0, 100)
+          this.itemChange([this.itemInputMin, this.itemInputMax])
+        }
+      }
+    },
+    reset () {
+      this.$emit('parameterChange', [this.parameterName + 'START_' + String(this.segmentID), 35])
+      this.$emit('parameterChange', [this.parameterName + 'END_' + String(this.segmentID), 95])
+    },
+    refresh () {
+      let start = Math.round(taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName + 'START_' + String(this.segmentID)])
+      let end = Math.round(taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName + 'END_' + String(this.segmentID)])
+      if (start === 1) {
+        start = 0
+      }
+      if (end === 99) {
+        end = 100
+      }
+      this.itemInputMin = start
+      this.itemInputMax = end
+      this.duration = Math.round(taskInfo.getDeviceInfo(this.deviceID).parameterSet['t_pulse_' + String(this.segmentID)]) / 10
+    },
+  },
+  async mounted () {
+    if (this.itemInputMin === 1) {
+      this.itemInputMin = 0
+    }
+    if (this.itemInputMax === 99) {
+      this.itemInputMax = 100
+    }
+    this.checkSliderRange(this.duration)
+  },
+  destroyed () {
+  },
+  watch: {
+  },
+}
+</script>
+
+<style lang="scss">
+  .flex-container {
+    display: flex;
+  }
+
+  .flex-child {
+    flex: 2;
+  }
+
+  .flex-child2 {
+    flex: 0;
+  }
+
+  .flex-child:first-child {
+    margin-right: 1px;
+  }
+</style>
--- a/Show More
+++ b/Show More