[update] add show datastream buffer in dev mode

[update] add debug button (show data)
[update] rename developer mode & bind key
2022-08-11 00:59:14 +08:00 · 2022-08-11 00:51:58 +08:00 · 2022-08-10 23:56:38 +08:00 · 2022-08-10 22:21:18 +08:00 · 2022-08-10 22:20:54 +08:00 · 2022-08-10 22:13:53 +08:00
147 changed files with 9820 additions and 4794 deletions
@@ -2351,6 +2351,12 @@
        }
      }
    },
+    "@vue/composition-api": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/@vue/composition-api/-/composition-api-1.7.0.tgz",
+      "integrity": "sha512-hxOgLYR+wjuPX9bkP2pAPlqUs98XxBoa9DSLyp1z6+YR92wC42PZcZKs4d+VRtcv4udOv041Kss+F6ap5nj8YA==",
+      "dev": true
+    },
    "@vue/eslint-config-standard": {
      "version": "5.1.2",
      "resolved": "https://registry.npmjs.org/@vue/eslint-config-standard/-/eslint-config-standard-5.1.2.tgz",
@@ -4754,6 +4760,11 @@
      "integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=",
      "dev": true
    },
+    "complex.js": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/complex.js/-/complex.js-2.1.1.tgz",
+      "integrity": "sha512-8njCHOTtFFLtegk6zQo0kkVX1rngygb/KQI6z1qZxlFI3scluC+LVTCFbrkWjBv4vvLlbQ9t88IPMC6k95VTTg=="
+    },
    "component-emitter": {
      "version": "1.3.0",
      "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz",
@@ -5684,6 +5695,11 @@
        "map-obj": "^1.0.0"
      }
    },
+    "decimal.js": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.3.1.tgz",
+      "integrity": "sha512-V0pfhfr8suzyPGOx3nmq4aHqabehUZn6Ch9kyFpV79TGDTWFmHqUqXdabR7QHqxzrYolF4+tVmJhUG4OURg5dQ=="
+    },
    "decode-uri-component": {
      "version": "0.2.0",
      "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
@@ -6199,11 +6215,19 @@
      }
    },
    "echarts": {
-      "version": "4.9.0",
-      "resolved": "https://registry.npmjs.org/echarts/-/echarts-4.9.0.tgz",
-      "integrity": "sha512-+ugizgtJ+KmsJyyDPxaw2Br5FqzuBnyOWwcxPKO6y0gc5caYcfnEUIlNStx02necw8jmKmTafmpHhGo4XDtEIA==",
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.3.3.tgz",
+      "integrity": "sha512-BRw2serInRwO5SIwRviZ6Xgm5Lb7irgz+sLiFMmy/HOaf4SQ+7oYqxKzRHAKp4xHQ05AuHw1xvoQWJjDQq/FGw==",
      "requires": {
-        "zrender": "4.3.2"
+        "tslib": "2.3.0",
+        "zrender": "5.3.2"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+        }
      }
    },
    "editorconfig": {
@@ -6485,6 +6509,11 @@
      "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=",
      "dev": true
    },
+    "escape-latex": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/escape-latex/-/escape-latex-1.2.0.tgz",
+      "integrity": "sha512-nV5aVWW1K0wEiUIEdZ4erkGGH8mDxGyxSeqPzRNtWP7ataw+/olFObw7hujFWlVjNsaDFw5VZ5NzVSIqRgfTiw=="
+    },
    "escape-string-regexp": {
      "version": "1.0.5",
      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
@@ -7747,6 +7776,11 @@
      "integrity": "sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ=",
      "dev": true
    },
+    "fraction.js": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz",
+      "integrity": "sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA=="
+    },
    "fragment-cache": {
      "version": "0.2.1",
      "resolved": "https://registry.npmjs.org/fragment-cache/-/fragment-cache-0.2.1.tgz",
@@ -8595,6 +8629,11 @@
      "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==",
      "dev": true
    },
+    "immediate": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha1-nbHb0Pr43m++D13V5Wu2BigN5ps="
+    },
    "import-cwd": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz",
@@ -9394,6 +9433,11 @@
        "html-escaper": "^2.0.0"
      }
    },
+    "javascript-natural-sort": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/javascript-natural-sort/-/javascript-natural-sort-0.7.1.tgz",
+      "integrity": "sha512-nO6jcEfZWQXDhOiBtG2KvKyEptz7RVbpGP4vTD2hLBdmNQSsCiicO2Ioinv6UI4y9ukqnBpy+XZ9H6uLNgJTlw=="
+    },
    "javascript-stringify": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/javascript-stringify/-/javascript-stringify-2.0.1.tgz",
@@ -10375,6 +10419,14 @@
        "type-check": "~0.3.2"
      }
    },
+    "lie": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/lie/-/lie-3.1.1.tgz",
+      "integrity": "sha1-mkNrLMd0bKWd56QfpGmz77dr2H4=",
+      "requires": {
+        "immediate": "~3.0.5"
+      }
+    },
    "lines-and-columns": {
      "version": "1.1.6",
      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.1.6.tgz",
@@ -10939,6 +10991,14 @@
        }
      }
    },
+    "localforage": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/localforage/-/localforage-1.10.0.tgz",
+      "integrity": "sha512-14/H1aX7hzBBmmh7sGPd+AOMkkIrHM3Z1PAyGgZigA1H1p5O5ANnMyWzvpAETtG68/dC4pC0ncy3+PPGzXZHPg==",
+      "requires": {
+        "lie": "3.1.1"
+      }
+    },
    "locate-path": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
@@ -11204,6 +11264,32 @@
      "resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz",
      "integrity": "sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg=="
    },
+    "mathjs": {
+      "version": "11.0.1",
+      "resolved": "https://registry.npmjs.org/mathjs/-/mathjs-11.0.1.tgz",
+      "integrity": "sha512-Kgm+GcTxwD68zupr7BPK0yrlWpTh2q8sMH6VcBcQe5+JCBqcwOrBxBF11WPah7hVv0NCLDnJnFTiXtik1Phasg==",
+      "requires": {
+        "@babel/runtime": "^7.18.9",
+        "complex.js": "^2.1.1",
+        "decimal.js": "^10.3.1",
+        "escape-latex": "^1.2.0",
+        "fraction.js": "^4.2.0",
+        "javascript-natural-sort": "^0.7.1",
+        "seedrandom": "^3.0.5",
+        "tiny-emitter": "^2.1.0",
+        "typed-function": "^3.0.0"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.18.9",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.9.tgz",
+          "integrity": "sha512-lkqXDcvlFT5rvEjiu6+QYO+1GXrEHRo2LOtS7E4GtX5ESIZOgepqsZBVIj6Pv+a6zqsya9VCgiK1KAK4BvJDAw==",
+          "requires": {
+            "regenerator-runtime": "^0.13.4"
+          }
+        }
+      }
+    },
    "mathml-tag-names": {
      "version": "2.1.3",
      "resolved": "https://registry.npmjs.org/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz",
@@ -14164,9 +14250,9 @@
      "dev": true
    },
    "resize-detector": {
-      "version": "0.1.10",
-      "resolved": "https://registry.npmjs.org/resize-detector/-/resize-detector-0.1.10.tgz",
-      "integrity": "sha512-iLcXC8A6Fb0DfA+TRiywrK/0A22bFqkhntjMJMEzXDA4XkcEkfwpNbv7W8iewUiD0xYIaeiXOfiEehTqGKsUFw=="
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/resize-detector/-/resize-detector-0.3.0.tgz",
+      "integrity": "sha512-R/tCuvuOHQ8o2boRP6vgx8hXCCy87H1eY9V5imBYeVNyNVpuL9ciReSccLj2gDcax9+2weXy3bc8Vv+NRXeEvQ=="
    },
    "resolve": {
      "version": "1.17.0",
@@ -14454,6 +14540,11 @@
        }
      }
    },
+    "seedrandom": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/seedrandom/-/seedrandom-3.0.5.tgz",
+      "integrity": "sha512-8OwmbklUNzwezjGInmZ+2clQmExQPvomqjL7LFqOYqtmuxRgQYqOD3mHaU+MvZn5FLUeVxVfQjwLZW/n/JFuqg=="
+    },
    "select": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
@@ -16523,6 +16614,11 @@
        "mime-types": "~2.1.24"
      }
    },
+    "typed-function": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/typed-function/-/typed-function-3.0.0.tgz",
+      "integrity": "sha512-mKJKkt2xYxJUuMD7jyfgUxfn5KCsCxkEKBVjep5yYellJJ5aEDO2QUAmIGdvcZmfQnIrplkzELIaG+5b1475qg=="
+    },
    "typedarray": {
      "version": "0.0.6",
      "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
@@ -17080,14 +17176,18 @@
        "vue": "^2.6.9"
      }
    },
+    "vue-demi": {
+      "version": "0.13.5",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.5.tgz",
+      "integrity": "sha512-tO3K2bML3AwiHmVHeKCq6HLef2st4zBXIV5aEkoJl6HZ+gJWxWv2O8wLH8qrA3SX3lDoTDHNghLX1xZg83MXvw=="
+    },
    "vue-echarts": {
-      "version": "5.0.0-beta.0",
-      "resolved": "https://registry.npmjs.org/vue-echarts/-/vue-echarts-5.0.0-beta.0.tgz",
-      "integrity": "sha512-QZFKGXDAYFQo+F20REpzcdLx79nsl4kOorJRpN+08aYq4YiIlmtWss1Lxadm7Fo+NYyWm8nnT+h4xHv3uqWIDQ==",
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/vue-echarts/-/vue-echarts-6.2.3.tgz",
+      "integrity": "sha512-xHzUvgsgk/asJTcNa8iVVwoovZU3iEUHvmBa3bzbiP3Y6OMxM1YXsoWOKVmVVaUusGs4ob4pSwjwNy2FemAz9w==",
      "requires": {
-        "core-js": "^3.4.4",
-        "lodash": "^4.17.15",
-        "resize-detector": "^0.1.10"
+        "resize-detector": "^0.3.0",
+        "vue-demi": "^0.13.2"
      }
    },
    "vue-epic-bus": {
@@ -18542,9 +18642,19 @@
      }
    },
    "zrender": {
-      "version": "4.3.2",
-      "resolved": "https://registry.npmjs.org/zrender/-/zrender-4.3.2.tgz",
-      "integrity": "sha512-bIusJLS8c4DkIcdiK+s13HiQ/zjQQVgpNohtd8d94Y2DnJqgM1yjh/jpDb8DoL6hd7r8Awagw8e3qK/oLaWr3g=="
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.3.2.tgz",
+      "integrity": "sha512-8IiYdfwHj2rx0UeIGZGGU4WEVSDEdeVCaIg/fomejg1Xu6OifAL1GVzIPHg2D+MyUkbNgPWji90t0a8IDk+39w==",
+      "requires": {
+        "tslib": "2.3.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+        }
+      }
    }
  }
 }
@@ -5,7 +5,7 @@
  "description": "Vue.js admin template",
  "author": "smartapant <smartapant@gmail.com>",
  "scripts": {
-    "serve": "vue-cli-service serve",
+    "serve": "vue-cli-service serve --mode development",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "lint:style": "stylelint --fix src/**/*.{vue,htm,html,css,sss,less,scss}",
@@ -25,7 +25,7 @@
    "chart.js": "^2.9.3",
    "core-js": "3",
    "detect-browser": "^4.8.0",
-    "echarts": "^4.9.0",
+    "echarts": "^5.3.3",
    "element-resize-detector": "^1.1.15",
    "epic-spinners": "^1.1.0",
    "extend": "3.0.2",
@@ -35,7 +35,9 @@
    "google-maps": "^3.3.0",
    "ionicons": "^4.6.3",
    "leaflet-map": "^0.2.1",
+    "localforage": "^1.10.0",
    "lodash": "^4.17.21",
+    "mathjs": "^11.0.1",
    "medium-editor": "^5.23.3",
    "normalize.css": "^8.0.1",
    "nprogress": "^0.2.0",
@@ -52,7 +54,7 @@
    "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-echarts": "^6.2.3",
    "vue-epic-bus": "^0.1.2",
    "vue-final-modal": "^2.4.1",
    "vue-gtm": "^2.2.0",
@@ -76,6 +78,7 @@
    "@vue/cli-plugin-pwa": "^4.0.5",
    "@vue/cli-plugin-unit-jest": "^4.0.5",
    "@vue/cli-service": "^4.0.5",
+    "@vue/composition-api": "^1.7.0",
    "@vue/eslint-config-standard": "^5.0.0",
    "@vue/test-utils": "^1.0.0-beta.29",
    "autoprefixer": "^9.7.2",
@@ -14,16 +14,7 @@ import YmapPlugin from 'vue-yandex-maps'
 import VueClipboard from 'vue-clipboard2'

 import ECharts from 'vue-echarts'
-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'
+import { use } from 'echarts/core'

 import VueMqtt from 'vue-mqtt'
 import global_ from '../data/global/global'
@@ -36,16 +27,67 @@ import 'nprogress/nprogress.css'
 import Toast from 'vue-toastification'
 import 'vue-toastification/dist/index.css'

+import api from '@/data/api/index'
+import localforage from 'localforage'
+
 import '../metrics'
 import '../registerServiceWorker'

+// import ECharts modules manually to reduce bundle size
+import {
+  CanvasRenderer,
+} from 'echarts/renderers'
+import {
+  LineChart,
+  PieChart,
+  BarChart,
+} from 'echarts/charts'
+import {
+  GridComponent,
+  TooltipComponent,
+  LegendComponent,
+  TitleComponent,
+  DataZoomComponent,
+  BrushComponent,
+  ToolboxComponent,
+} from 'echarts/components'
+
+use([
+  CanvasRenderer,
+  LineChart,
+  BarChart,
+  PieChart,
+  GridComponent,
+  TooltipComponent,
+  ToolboxComponent,
+  LegendComponent,
+  TitleComponent,
+  DataZoomComponent,
+  BrushComponent,
+])
+
+localforage.config({ name: 'bioprovue' })
+
+let MqttUrl
+// for developer
+if (process.env.NODE_ENV === 'development') {
+  MqttUrl = 'ws://192.168.5.37:8083'
+  // MqttUrl = 'ws://192.168.5.42:8083'
+  // MqttUrl = 'ws://192.168.5.240:8080'
+  // MqttUrl = 'ws://192.168.5.57:8083'
+  // MqttUrl = 'ws://192.168.5.57:8080'
+} else {
+  // for user
+  MqttUrl = `ws://${location.href.split('/')[2]}:8083`
+}
+
 if (process.env.VUE_APP_BUILD_VERSION) {
  // eslint-disable-next-line
-  const message = `%c${'Build_information:'}\n %c${'Version'}: %c${VERSION},\n %c${'Timestamp'}: %c${TIMESTAMP},\n %c${'Commit'}: %c${COMMIT}`
+  const message = `%c${'Build_information:'}\n %c${'Version'}: %c${VERSION},\n %c${'Timestamp'}: %c${TIMESTAMP},\n %c${'Commit'}: %c${COMMIT} %c${'Mqtt'}: %c${MqttUrl}`
  // eslint-disable-next-line
  console.info(
    message,
-    'color: blue;', 'color: red;', 'color: blue;', 'color: red;', 'color: blue;', 'color: red;', 'color: blue;',
+    'color: blue;', 'color: red;', 'color: blue;', 'color: red;', 'color: blue;', 'color: red;', 'color: blue;', 'color: red;', 'color: blue;',
  )
 }

@@ -56,12 +98,12 @@ Vue.component('chart', ECharts)
 Vue.use(VueWorker)
 Vue.use(VueAxios, axios)
 Vue.use(Toast)
-
 // Vue.use(VueMqtt, 'ws://52.194.17.114:8083')
-Vue.use(VueMqtt, 'ws://' + location.href.split('/')[2] + ':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.3.211' + ':8083')
+Vue.use(VueMqtt, MqttUrl)

+Vue.prototype.API = api
 Vue.prototype.GLOBAL = global_

 Vue.use(ColorThemePlugin, {
@@ -9,8 +9,11 @@
                <span slot="header">Control Panel</span>
                <div slot="body">
                  <div>
-                    <top-control-panel :ref="'top_control_panel'" @refreshChart="setOption" @changeAxis="changeAxis" @changeOverviewDataZoom="changeOverviewDataZoom"/>
+                    <top-control-panel :ref="'top_control_panel'" @refreshChart="setOption" @changeAxis="changeAxis" @changeOverviewDataZoom="changeOverviewDataZoom" @changeFunctional="changeFunctional" @setBrushBoundary="setBrushBoundary"/>
                  </div>
+                  <!-- <div>
+                    {{ this.specificIntegral }}
+                  </div> -->
                </div>
              </va-collapse>
            </va-accordion>
@@ -21,8 +24,9 @@
      <div :class="chartAreaClass">
        <div class="row" >
          <div class="flex sm12 xl12 md12 xs12">
+            <!-- <chart :style="'width: auto; height: 88vhvh;'" :option="options"></chart> -->
            <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'" :cardheight="'88vh'" :chartheight="detailchartheight" :data="chartDetailData" />
+            <elite-replay-chart :ref="'chart_detail'" :cardheight="'88vh'" :chartheight="detailchartheight" :data="chartDetailData" @updateIntegralBoundary="updateIntegralBoundary" />
            <change-channel-value-min-max :ref="'set_min_max'"/>
          </div>
        </div>
@@ -106,6 +110,30 @@ export default {
      zoomTime: 0,
      initDone: false,
      chartAreaClass: ['flex', 'xs12', 'sm12', 'md12', 'xl9', 'pa-0'],
+      xfunctional: 'Linear',
+      yfunctional: 'Linear',
+      options: {
+        xAxis: {
+          type: 'category',
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+        },
+        yAxis: {
+          type: 'value',
+        },
+        series: [
+          {
+            data: [120, 200, 150, 80, 70, 110, 130],
+            type: 'bar',
+            showBackground: true,
+            backgroundStyle: {
+              color: 'rgba(180, 180, 180, 0.2)',
+            },
+          },
+        ],
+        brush: {
+        },
+      },
+      specificIntegral: 0,
    }
  },
  mqtt: {
@@ -118,10 +146,10 @@ export default {
      this.$refs.chart_detail.turnOffAxisEventHandler(eventName, handler, attr)
    },
    showMinMaxPanel (params) {
-      this.$refs.set_min_max.showPanel(params)
+      return this.$refs.set_min_max.showPanel(params)
    },
    setOption (options) {
-      this.$refs.chart_detail.mergeOptions(options)
+      this.$refs.chart_detail.setOptions(options)
    },
    showChartLoading: function (chart) {
      const loadStyle = {
@@ -172,7 +200,7 @@ export default {
        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)
+        // console.log(setting)
        this.registerChart({
          chartAllData: this.chartData,
          chartID: this.chartDetailData.chartID,
@@ -236,7 +264,6 @@ export default {
            this.windowLength = this.endTime - this.startTime
            this.chartOverviewData.dataZoom[0].start = dataZoom.start
            this.chartOverviewData.dataZoom[0].end = dataZoom.end
-            // console.log(this.startTime, this.endTime)
          }
        })
      } else {
@@ -247,7 +274,6 @@ export default {
          this.windowLength = this.endTime - this.startTime
          this.chartOverviewData.dataZoom[0].start = e.start
          this.chartOverviewData.dataZoom[0].end = e.end
-          // console.log(this.startTime, this.endTime)
        }
      }
      this.zoomTime = 0
@@ -255,7 +281,7 @@ export default {
    changeOverviewDataZoom () {
      this.chartOverviewData.dataZoom[0].start = this.startTime * 100 / this.maxTime
      this.chartOverviewData.dataZoom[0].end = this.endTime * 100 / this.maxTime
-      this.$refs.chart_overview.mergeOptions(this.chartOverviewData)
+      this.$refs.chart_overview.setOptions(this.chartOverviewData)
    },
    async computeResampleScale (meta, duration) {
      const sampleRate = meta.parameter_set.SAMPLE_RATE / 10
@@ -313,7 +339,6 @@ export default {
        if (this.axisXDataType.description === 'Time') {
          scale = await this.computeResampleScale(metaInfo, metaInfo.time_duration)
        }
-        console.log('overview scale:', scale)
        // download data
        const getAllData = async function (_this) {
          for (const ch in _this.dataInfo[meta]) {
@@ -346,6 +371,16 @@ export default {
      this.hideChartLoading()
    },
    drawDetailData: async function () {
+      var panelInfo = this.$refs.top_control_panel.getPanelInfo()
+      // brush setting write at here, due to mounted won't show the brush
+      this.chartDetailData.brush = {
+        toolbox: ['rect', 'clear'],
+        // toolbox: ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear'],
+        xAxisIndex: 0,
+        // throttleType: 'debounce',
+        // throttleDelay: 5,
+      }
+      console.log('panelInfo: ', panelInfo) // TODO: update the formatter for tooltips
      this.showChartLoading('detail')
      const timeDur = this.endTimeCurrent - this.startTimeCurrent
      let _gridNumber = 0
@@ -368,7 +403,7 @@ export default {
          this.updateChartSamplingChart({ chartID: this.chartDetailData.chartID, seriesIndex: _gridNumber, method: 'lttb' })
        }

-        if (metaInfo.device.library_name === 'EliteEIS' && metaInfo.parameter_set.MODE === 0) {
+        if (metaInfo.device.library_name.includes('EIS') && metaInfo.parameter_set.MODE === 0) {
          this.chartDetailData.series[this.chartDetailData.series.length - 1].showSymbol = true
          this.chartDetailData.series[this.chartDetailData.series.length - 1].showAllSymbol = true
          this.chartDetailData.series[this.chartDetailData.series.length - 1].symbolSize = 6
@@ -419,27 +454,113 @@ export default {
          }
        }
        // download and push into chart
+        // due to the (endIndex - startIndex) may more than 1, need to record variables outside the loop
+        var integralResult = 0
+        var curXData = 0
+        var curYData = 0
+        var prevXData = 0
+        var prevYData = 0
        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)
          }
+          var deltaX = 0
+          var diffResult = 0
+          var logZero = false
+          var lastXinThisTable
          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 = data[j]
+              logZero = false
+              // cases without time
              if (dataX !== undefined) {
                processedData[0] = dataX[j][1]
+                // add time on the chart
+                // TODO: not sure the time is right or not?
+                processedData[2] = parseFloat(dataX[j][0])
              }
-              if (this.displayType.x === 'log' || this.absToggleStatus.x === true) {
+              // below is the original version for the log
+              /* if (this.displayType.x === 'log' || this.absToggleStatus.x === true) {
                processedData[0] = Math.abs(processedData[0])
              }
              if (this.displayType.y === 'log' || this.absToggleStatus.y === true) {
                processedData[1] = Math.abs(processedData[1])
+              } */
+              if (this.xfunctional === 'Log') {
+                // avoid log10(0) cases
+                if (Math.abs(processedData[0]) === 0) logZero = true
+                processedData[0] = Math.log10(Math.abs(processedData[0]))
              }
-
-              this.chartDetailData.series[_gridNumber].data.push(processedData)
+              if (this.yfunctional === 'Log') {
+                if (Math.abs(processedData[1]) === 0) logZero = true
+                processedData[1] = Math.log10(Math.abs(processedData[1]))
+              } else if (this.yfunctional === 'Integral') {
+                if (j === 0) {
+                  // TODO: need to change the series[deviceID]
+                  // TODO: change the time index(dynamic changing)
+                  curYData = parseFloat(processedData[1])
+                  // integral only when I-T & C-A, so writen as [0] directly
+                  prevYData = parseFloat(data[j][1])
+                  // initial integral as 0
+                  if (i === 0) processedData[1] = 0
+                  else {
+                    if (dataX !== undefined) {
+                      // e.g. I-V: deltaX is V
+                      deltaX = parseFloat(dataX[j][1]) - lastXinThisTable
+                    } else {
+                      // e.g. I-T: deltaX is T
+                      deltaX = parseFloat(data[j][0]) - lastXinThisTable
+                    }
+                    integralResult += parseFloat((Math.abs(curYData) + Math.abs(prevYData)) * Math.abs(deltaX) / 2)
+                    processedData[1] = integralResult
+                  }
+                } else {
+                  curYData = parseFloat(data[j][1])
+                  if (dataX !== undefined) {
+                    // e.g. I-V: deltaX is V
+                    deltaX = parseFloat(dataX[j][1]) - parseFloat(dataX[j - 1][1])
+                    lastXinThisTable = parseFloat(dataX[j][1])
+                  } else {
+                    // e.g. I-T: deltaX is T
+                    deltaX = parseFloat(data[j][0]) - parseFloat(data[j - 1][0])
+                    lastXinThisTable = parseFloat(data[j][0])
+                  }
+                  integralResult += parseFloat((Math.abs(curYData) + Math.abs(prevYData)) * Math.abs(deltaX) / 2)
+                  // assign here is due to the fetch the modify value
+                  prevYData = curYData
+                  processedData[1] = integralResult
+                }
+              } else if (this.yfunctional === 'Differential') {
+                if (j === 0) {
+                  // TODO: need to change the series[deviceID]
+                  // TODO: change the time index(dynamic changing)
+                  curXData = parseFloat(processedData[0])
+                  curYData = parseFloat(processedData[1])
+                  deltaX = parseFloat(dataX[j + 1][0]) - parseFloat(dataX[j][0])
+                  if (i === 0) logZero = true
+                  // due to the limitation of the getData table, the number of page may > 1
+                  else {
+                    diffResult = parseFloat((curYData - prevYData) / (curXData - prevXData))
+                    processedData[0] = curXData
+                    processedData[1] = diffResult
+                  }
+                  prevXData = parseFloat(processedData[0])
+                  prevYData = parseFloat(processedData[1])
+                } else {
+                  curXData = parseFloat(processedData[0])
+                  curYData = parseFloat(processedData[1])
+                  diffResult = parseFloat((curYData - prevYData) / (curXData - prevXData))
+                  prevXData = curXData
+                  prevYData = curYData
+                  processedData[0] = curXData
+                  processedData[1] = diffResult
+                }
+              }
+              // avoid pushing the infinity data into the chart
+              if (!logZero) this.chartDetailData.series[_gridNumber].data.push(processedData)
            }
          }
        }
@@ -458,12 +579,12 @@ export default {
        this.showOverviewChart = false
        this.detailchartheight = '88vh'
        // this.$refs.chart_detail.updateChartHeight()
-        this.turnOnAxisEventHandler('click', 'xAxis.axisLabel', this.showMinMaxPanel, { axis: 'x' })
+        this.turnOnAxisEventHandler('click', 'xAxis', 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.turnOnAxisEventHandler('click', 'yAxis', this.showMinMaxPanel, { axis: 'y' })
      }

      this.hideChartLoading()
@@ -478,6 +599,13 @@ export default {
        }
      }
    },
+    changeFunctional (axis, functional) {
+      if (axis === 'x') {
+        this.xfunctional = functional
+      } else {
+        this.yfunctional = functional
+      }
+    },
    changeAxis (gridIndex) {
      if (this.initDone) {
        const libName = this.metaList[gridIndex].device.library_name
@@ -486,9 +614,9 @@ export default {
        if (this.axisXDataType.description === 'Time') {
          xType = 'Time'
        } else {
-          if (libName === 'EliteZM15') {
+          if (libName === 'EliteZM15' || libName.includes('Elite_EDC')) {
            xType = 'Elite'
-          } else if (libName === 'EliteEIS') {
+          } else if (libName.includes('EIS')) {
            xType = 'EliteEIS'
          }
          xValue = this.axisXDataType.id + 1
@@ -500,7 +628,7 @@ export default {
          deviceNameX: xType,
          deviceIDX: this.metaList[gridIndex].name,
          channelX: xValue,
-          deviceNameY: libName === 'EliteEIS' ? 'EliteEIS' : 'Elite',
+          deviceNameY: libName.includes('EIS') ? 'EliteEIS' : 'Elite',
          deviceIDY: '',
          channelY: this.axisYDataType.id + 1,
        })
@@ -510,6 +638,54 @@ export default {
      }
      this.drawDetailData() // reDraw
    },
+    updateIntegralBoundary (boundary) {
+      var rawData = JSON.parse(JSON.stringify(this.chartDetailData.series[0].data))
+      var deltaX
+      var averageY
+      var area
+      var prevIndex
+      this.specificIntegral = 0
+
+      for (let index = 0, len = rawData.length; index < len; index++) {
+        prevIndex = index - 1
+        if (index === 0) {
+          if (rawData[len - 1][0] >= boundary.x_start && rawData[len - 1][0] <= boundary.x_end &&
+              rawData[index][0] >= boundary.x_start && rawData[index][0] <= boundary.x_end) {
+            prevIndex = len - 1
+          } else continue
+        }
+        if (rawData[prevIndex][0] >= boundary.x_start && rawData[prevIndex][0] <= boundary.x_end &&
+            rawData[index][0] >= boundary.x_start && rawData[index][0] <= boundary.x_end) {
+          deltaX = Number(rawData[index][0]) - Number(rawData[prevIndex][0])
+          if (rawData[index][1] > boundary.y_end) rawData[index][1] = boundary.y_end
+          else if (rawData[index][1] < boundary.y_start) {
+            continue
+          }
+          averageY = (Number(rawData[index][1]) + Number(rawData[prevIndex][1])) / 2 - boundary.y_start
+          area = deltaX * averageY
+          if (!isNaN(area)) {
+            this.specificIntegral += area
+          }
+        }
+      }
+      // this.specificIntegral = (this.specificIntegral * 1e-15).toFixed(4) + 'W'
+      this.$refs.top_control_panel.$refs.specific_integral.getSpecificIntegral(this.specificIntegral, boundary)
+    },
+    setBrushBoundary (boundary) {
+      this.$refs.chart_detail.$refs.chart_ref.chart.dispatchAction({
+        type: 'brush',
+        areas: [
+          {
+            xAxisIndex: 0,
+            brushType: 'rect',
+            coordRange: [
+              [boundary.x_start, boundary.x_end],
+              [boundary.y_start, boundary.y_end],
+            ],
+          },
+        ],
+      })
+    },
    ...mapActions('replay', [types.chart.init, types.chart.register, types.chart.clear, types.chart.updateGridList, types.chart.updateDataZoom, types.chart.setAxisDisplay]),
    ...mapActions('replay', [types.meta.init]),
    ...mapActions('replay', [types.rec.init, types.rec.intoData, types.rec.initDisplaySetting, types.rec.updateDisplaySetting]),
@@ -527,19 +703,19 @@ export default {
    this.metaList = this.getAllMeta()
    await this.initRec({ api: api })
    this.dataInfo = this.getAllRec()
-    console.log(this.metaList)
-    console.log(this.dataInfo)
+    // console.log(this.metaList)
+    // console.log(this.dataInfo)
    await this.register()
    this.setOverviewDataZoomStartAndEndChart()
    this.$refs.top_control_panel.init() // will call changeAxis() here
    this.$refs.set_min_max.init()
-    this.turnOnAxisEventHandler('click', 'yAxis.axisLabel', this.showMinMaxPanel, { axis: 'y' })
+    this.turnOnAxisEventHandler('click', 'yAxis', 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)
+    // console.log(this.chartOverviewData)
+    // console.log(this.chartDetailData)
  },
  beforeDestroy () {
    this.$refs.chart_overview.clear()
@@ -1,7 +1,14 @@
 <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>
+      <chart
+        :ref="'chart_ref'"
+        :style="'width: '+ cardwidth + '; height: ' + chartheight + ';'"
+        :option="data"
+        :auto-resize="true"
+        :loading="loading"
+        @dataZoom="updateZoom"
+      ></chart>
    </va-card>
  </div>
 </template>
@@ -9,7 +16,6 @@
 <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',
@@ -45,6 +51,7 @@ export default {
  },
  data () {
    return {
+      loading: false,
    }
  },
  computed: {
@@ -60,8 +67,8 @@ export default {
    updateZoom: function (e) {
      this.$emit('dataZoomEvent', e)
    },
-    mergeOptions (options) {
-      this.$refs.chart_ref.mergeOptions(options)
+    setOptions (options) {
+      this.$refs.chart_ref.setOption(options)
    },
    turnOnAxisEventHandler (eventName, query, handler, attr) {
      const chartID = 1
@@ -71,7 +78,7 @@ export default {
        status: 'on',
      })
      // doc: https://echarts.apache.org/zh/api.html#echartsInstance.on
-      this.$refs.chart_ref.chart._zr.on(eventName, query, handler)
+      this.$refs.chart_ref.chart.on(eventName, query, handler)
    },
    turnOffAxisEventHandler (eventName, handler, attr) {
      const chartID = 1
@@ -81,22 +88,42 @@ export default {
        status: 'off',
      })
      // doc: https://echarts.apache.org/zh/api.html#echartsInstance.off
-      this.$refs.chart_ref.chart._zr.off(eventName, handler)
+      this.$refs.chart_ref.chart.off(eventName, handler)
    },
    showLoading (options) {
-      this.$refs.chart_ref.showLoading(options)
+      this.loading = true
    },
    hideLoading () {
-      this.$refs.chart_ref.hideLoading()
+      this.loading = false
    },
    clear () {
      this.$refs.chart_ref.clear()
    },
-
+    updateBoundary (boundary) {
+      this.$emit('updateIntegralBoundary', boundary)
+    },
    ...mapMutations('replay', [types.chart.updateAxisEventHandler]),
  },
  async mounted () {
    this.resizeTimer = setInterval(this.resize, 1000)
+    // brush set at here won't work
+    /* this.data.brush = {
+      toolbox: ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear'],
+      xAxisIndex: 0,
+      throttleType: 'debounce',
+      throttleDelay: 5,
+    } */
+    this.$refs.chart_ref.chart.on('brushSelected', (params) => {
+      if (params.batch[0].areas.length !== 0) {
+        var boundary = {
+          x_start: Number(params.batch[0].areas[0].coordRange[0][0].toFixed(4)),
+          x_end: Number(params.batch[0].areas[0].coordRange[0][1].toFixed(4)),
+          y_start: Number(params.batch[0].areas[0].coordRange[1][0].toFixed(4)),
+          y_end: Number(params.batch[0].areas[0].coordRange[1][1].toFixed(4)),
+        }
+        this.updateBoundary(boundary)
+      }
+    })
  },
  destroyed () {
    clearInterval(this.resizeTimer)
@@ -1,13 +1,20 @@
 <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>
+      <chart
+        :ref="'chart_ref'"
+        :style="'width: '+ cardwidth + '; height: ' + cardheight + ';'"
+        :option="data"
+        :auto-resize="true"
+        :loading="loading"
+        @dataZoom="updateZoom"
+      >
+      </chart>
    </va-card>
  </div>
 </template>

 <script>
-// import { chartData } from '../../../../data/task/ChartsManagement'

 export default {
  name: 'elite-replay-overview-chart',
@@ -39,6 +46,7 @@ export default {
  },
  data () {
    return {
+      loading: false,
    }
  },
  computed: {
@@ -54,14 +62,14 @@ export default {
    updateZoom: function (e) {
      this.$emit('dataZoomEvent', e)
    },
-    mergeOptions (options) {
-      this.$refs.chart_ref.mergeOptions(options)
+    setOptions (options) {
+      this.$refs.chart_ref.setOption(options)
    },
    showLoading (options) {
-      this.$refs.chart_ref.showLoading(options)
+      this.loading = true
    },
    hideLoading () {
-      this.$refs.chart_ref.hideLoading()
+      this.loading = false
    },
    clear () {
      this.$refs.chart_ref.clear()
@@ -15,7 +15,7 @@

      <div class="flex-container mb-2">
        <div class="flex sm2 xl2 md2 xs2 px-0 py-0">
-          <p class="display-6"> X-axis <p/>
+          <p class="display-6"> X-axis </p>
        </div>
        <div class="flex sm5 xl5 md5 xs5 pl-1 pr-0 py-0">
          <change-axis :ref="'change_axis_x'" axis="x" @changeAxis="changeAxis" @changeUnit="changeUnit" @clearCycle="clearCycle"/>
@@ -27,7 +27,7 @@
      <div class="flex-container mb-2">
        <div class="flex sm2 xl2 md2 xs2 px-0 py-0" />
        <div class="flex sm5 xl5 md5 xs5 pl-1 pr-0 py-0">
-          <change-scale :ref="'change_scale_x'" axis="x" @refreshChart="refreshChart" @clearCycle="clearCycle" @changeAxis="changeAxis"/>
+          <change-scale :ref="'change_scale_x'" axis="x" @refreshChart="refreshChart" @clearCycle="clearCycle" @changeAxis="changeAxis" @changeFunctional="changeFunctional"/>
        </div>
        <div class="flex sm5 xl5 md5 xs5 px-0 py-0">
          <abs-toggle :ref="'abs_x'" axis="x" @changeAxis="changeAxis"/>
@@ -36,7 +36,7 @@

      <div class="flex-container mb-2">
        <div class="flex sm2 xl2 md2 xs2 px-0 py-0">
-          <p class="display-6"> Y-axis <p/>
+          <p class="display-6"> Y-axis </p>
        </div>
        <div class="flex sm5 xl5 md5 xs5 pl-1 pr-0 py-0">
          <change-axis :ref="'change_axis_y'" axis="y" @changeAxis="changeAxis" @changeUnit="changeUnit" @clearCycle="clearCycle"/>
@@ -48,13 +48,22 @@
      <div class="flex-container mb-2">
        <div class="flex sm2 xl2 md2 xs2 px-0 py-0" />
        <div class="flex sm5 xl5 md5 xs5 pl-1 pr-0 py-0">
-          <change-scale :ref="'change_scale_y'" axis="y" @refreshChart="refreshChart" @clearCycle="clearCycle" @changeAxis="changeAxis"/>
+          <change-scale :ref="'change_scale_y'" axis="y" @refreshChart="refreshChart" @clearCycle="clearCycle" @changeAxis="changeAxis" @changeFunctional="changeFunctional"/>
        </div>
        <div class="flex sm5 xl5 md5 xs5 px-0 py-0">
          <abs-toggle :ref="'abs_y'" axis="y" @changeAxis="changeAxis"/>
        </div>
      </div>
-
+      <!-- <va-button @click="switchCollapse"></va-button>
+      <va-collapse class="mb-2" :isOpenDefault="false" v-model="innerCollapse">
+        <span slot="header">Specific Integral</span>
+        <div slot="body">
+          <div>
+            <specific-integral :ref="'specific_integral'" @setBrushBoundary="setBrushBoundary" />
+          </div>
+        </div>
+      </va-collapse> -->
+      <specific-integral :ref="'specific_integral'" @setBrushBoundary="setBrushBoundary" />
      <div class="flex-container mb-2">
        <div class="flex sm10 xl10 md10 xs10 px-0 py-0">
          <change-window-start-and-size :ref="'change_window_start_and_size'" @changeOverviewDataZoom="changeOverviewDataZoom"/>
@@ -77,6 +86,7 @@ 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 AbsToggle from '@/components/analysis/replay/toolbox/AbsToggle.vue'
+import SpecificIntegral from '@/components/analysis/replay/toolbox/SpecificIntegral.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'
@@ -94,6 +104,7 @@ export default {
    ChangeScale,
    ChangeCycle,
    AbsToggle,
+    SpecificIntegral,
    DownloadFile,
    DeleteFile,
    EditFileName,
@@ -115,6 +126,7 @@ export default {
    return {
      deviceName: '',
      showCycle: false,
+      innerCollapse: false,
    }
  },
  mqtt: {
@@ -122,10 +134,10 @@ export default {
  methods: {
    init () {
      this.deviceName = this.metaList[0].device.library_name
-      this.$refs.change_axis_x.init(this.deviceName)
-      this.$refs.change_axis_y.init(this.deviceName)
      this.$refs.change_unit_x.init(this.deviceName)
      this.$refs.change_unit_y.init(this.deviceName)
+      this.$refs.change_axis_x.init(this.deviceName)
+      this.$refs.change_axis_y.init(this.deviceName)
      this.$refs.change_scale_x.init(this.deviceName)
      this.$refs.change_scale_y.init(this.deviceName)
      this.$refs.abs_x.init(this.deviceName)
@@ -141,6 +153,9 @@ export default {
    refreshChart (options) {
      this.$emit('refreshChart', options)
    },
+    changeFunctional (axis, functional) {
+      this.$emit('changeFunctional', axis, functional)
+    },
    changeAxis (gridIndex) {
      this.$emit('changeAxis', gridIndex)
    },
@@ -151,9 +166,28 @@ export default {
        this.$refs.change_unit_y.changeUnitByAxis()
      }
    },
+    getPanelInfo () {
+      var panelInfo = {
+        axis_x: this.$refs.change_axis_x.getChannelByAxis(),
+        axis_y: this.$refs.change_axis_y.getChannelByAxis(),
+        scale_x: this.$refs.change_scale_x.getScaleByAxis(),
+        scale_y: this.$refs.change_scale_y.getScaleByAxis(),
+        unit_x: this.$refs.change_unit_x.getUnitByAxis(),
+        unit_y: this.$refs.change_unit_y.getUnitByAxis(),
+      }
+      // console.log('panelInfo: ', panelInfo)
+      return panelInfo
+    },
    clearCycle () {
      this.$refs.change_cycle.clear()
    },
+    setBrushBoundary (boundary) {
+      this.$emit('setBrushBoundary', boundary)
+    },
+    /* switchCollapse () {
+      this.innerCollapse = this.innerCollapse ? false : true
+      console.log(this.innerCollapse)
+    }, */
  },
  mounted () {
  },
@@ -9,7 +9,6 @@
 <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',
@@ -7,7 +7,6 @@
 </template>

 <script>
-// import { chartData } from '../../../../data/task/ChartsManagement'

 export default {
  name: 'neulive-replay-overview-chart',
@@ -70,7 +70,7 @@ export default {
    },
    performABS () {
      this.absToggleStatus[this.axis] = !this.absToggleStatus[this.axis]
-      if (this.deviceName === 'EliteZM15' || this.deviceName === 'EliteEIS') {
+      if (this.deviceName === 'EliteZM15' || this.deviceName.includes('Elite_EDC') || this.deviceName.includes('EIS')) {
        this.calculateHelper(this.metaIndex) // [TODO] elite tmp use metaIndex for grid index
      }
      this.clickTime++
@@ -93,7 +93,7 @@ export default {
          data: seriesData,
        })
      } else {
-        if (this.deviceName === 'EliteZM15' || this.deviceName === 'EliteEIS') {
+        if (this.deviceName === 'EliteZM15' || this.deviceName.includes('Elite_EDC') || this.deviceName.includes('EIS')) {
          this.$emit('changeAxis', this.metaIndex) // [TODO] elite tmp use metaIndex for grid index
        }
      }
@@ -0,0 +1,332 @@
+<template>
+  <div>
+    <va-button v-if="integralClicked && (mode_name==='Chronoamperometric' || mode_name==='I-T Graph')" color="danger" class="mb-2" @click="clickIntegral" small>
+      To Raw Mode
+    </va-button>
+    <va-button v-if="!integralClicked && (mode_name==='Chronoamperometric' || mode_name==='I-T Graph')" color="primary" class="mb-2" @click="clickIntegral" small>
+      To Integral Mode
+    </va-button>
+    <va-button v-if="xlogClicked && (mode_name==='Linear Sweep Voltammetry' || mode_name==='I-V Curve')" color="danger" class="mb-2" @click="clickXLog" small>
+      To Raw Mode
+    </va-button>
+    <va-button :disabled="disableLog" v-if="!xlogClicked && (mode_name==='Linear Sweep Voltammetry' || mode_name==='I-V Curve')" color="primary" class="mb-2" @click="clickXLog" small>
+      To log Mode (x-axis)
+    </va-button>
+    <va-button v-if="ylogClicked && (mode_name==='Linear Sweep Voltammetry' || mode_name==='I-V Curve')" color="danger" class="mb-2" @click="clickYLog" small>
+      To Raw Mode
+    </va-button>
+    <va-button :disabled="disableLog" v-if="!ylogClicked && (mode_name==='Linear Sweep Voltammetry' || mode_name==='I-V Curve')" color="primary" class="mb-2" @click="clickYLog" small>
+      To log Mode (y-axis)
+    </va-button>
+    <va-button v-if="diffClicked && (mode_name==='Linear Sweep Voltammetry' || mode_name==='I-V Curve')" color="danger" class="mb-2" @click="clickDiff" small>
+      To Raw Mode
+    </va-button>
+    <va-button :disabled="disableDiff" v-if="!diffClicked && (mode_name==='Linear Sweep Voltammetry' || mode_name==='I-V Curve')" color="primary" class="mb-2" @click="clickDiff" small>
+      To Differential Mode
+    </va-button>
+  </div>
+</template>
+
+<script>
+import { mapFields } from 'vuex-map-fields'
+import { mapActions } from 'vuex'
+import taskTypes from '@/store/modules/task/content/types'
+import paramTable from '@/data/config-table/index'
+import { getTimeFormatter } from '@/store/modules/task/content/actions/chartAct'
+
+export default {
+  name: 'CanvasChartReplayCalculation',
+  components: {
+  },
+  props: {
+    chartID: {
+      type: [Number, String],
+      required: true,
+    },
+  },
+  computed: {
+    ...mapFields('', [
+      'developerMode',
+    ]),
+    ...mapFields('taskContent', [
+      'chartData',
+      'taskContentChartKey',
+      'deviceListNew',
+    ]),
+  },
+  data () {
+    return {
+      info: null,
+      paramTable: paramTable,
+      rawData: null,
+      mode_name: '',
+      xName: '',
+      yName: '',
+      obj: null,
+      integralClicked: false,
+      xlogClicked: false,
+      ylogClicked: false,
+      diffClicked: false,
+      disableDiff: false,
+      disableLog: false,
+    }
+  },
+  // watch rawData is use for detect whether the chartData is changed
+  watch: {
+    rawData: {
+      deep: true,
+      handler: function () {
+        // avoid getting null data
+        if (this.rawData.series.length > 0) {
+          this.watchHandler()
+        }
+      },
+    },
+  },
+  methods: {
+    // Do arithmetic operations triggered by button(raw, integral, log)
+    watchHandler: function () {
+      // this.data need to be deep copy from rawData, since we don't want to modify the source(chartData[])
+      // this.data = Object.assign({}, this.rawData)
+      this.data = JSON.parse(JSON.stringify(this.rawData))
+      this.addSource()
+      var curXData = 0
+      var curYData = 0
+      var prevXData = 0
+      var prevYData = 0
+      var timeGap = 0
+      var curTime = 0
+      var integralResult = 0
+      var diffResult = 0
+      var index = 0
+      var timeIndex = this.getTimeIndex()
+      var _data = []
+      const dataLength = this.data.series[0].data.length
+      const seriesData = this.data.series[0].data
+      if (this.integralClicked) {
+        for (index = 0; index < dataLength; index++) {
+          if (index === 0) {
+            // TODO: need to change the series[deviceID]
+            // TODO: change the time index(dynamic changing)
+            curYData = parseFloat(seriesData[index][1])
+            timeGap = seriesData[index + 1][timeIndex] - seriesData[index][timeIndex]
+            curTime = seriesData[index][timeIndex]
+            _data.push([curTime, 0])
+          } else {
+            prevYData = parseFloat(seriesData[index - 1][1])
+            curYData = parseFloat(seriesData[index][1])
+            integralResult += parseFloat((Math.abs(curYData) + Math.abs(prevYData)) * timeGap / 2)
+            curTime += timeGap
+            _data.push([curTime, integralResult])
+          }
+        }
+      } else if (this.xlogClicked || this.ylogClicked) {
+        if (this.xlogClicked && this.ylogClicked) {
+          for (index = 0; index < dataLength; index++) {
+            if (index === 0) {
+              curXData = parseFloat(seriesData[index][0])
+              curYData = parseFloat(seriesData[index][1])
+              timeGap = seriesData[index + 1][timeIndex] - seriesData[index][timeIndex]
+              curTime = seriesData[index][timeIndex]
+              if (curXData !== 0 && curYData !== 0) {
+                _data.push([Math.log10(Math.abs(curXData)), Math.log10(Math.abs(curYData)), curTime])
+              }
+            } else {
+              curXData = parseFloat(seriesData[index][0])
+              curYData = parseFloat(seriesData[index][1])
+              curTime += timeGap
+              if (curXData !== 0 && curYData !== 0) {
+                _data.push([Math.log10(Math.abs(curXData)), Math.log10(Math.abs(curYData)), curTime])
+              }
+            }
+          }
+        } else if (this.xlogClicked && !(this.ylogClicked)) {
+          for (index = 0; index < dataLength; index++) {
+            if (index === 0) {
+              curXData = parseFloat(seriesData[index][0])
+              curYData = parseFloat(seriesData[index][1])
+              timeGap = seriesData[index + 1][timeIndex] - seriesData[index][timeIndex]
+              curTime = seriesData[index][timeIndex]
+              if (curXData !== 0) {
+                _data.push([Math.log10(Math.abs(curXData)), curYData, curTime])
+              }
+            } else {
+              curXData = parseFloat(seriesData[index][0])
+              curYData = parseFloat(seriesData[index][1])
+              curTime += timeGap
+              if (curXData !== 0) {
+                _data.push([Math.log10(Math.abs(curXData)), curYData, curTime])
+              }
+            }
+          }
+        } else if (!(this.xlogClicked) && this.ylogClicked) {
+          for (index = 0; index < dataLength; index++) {
+            if (index === 0) {
+              curXData = parseFloat(seriesData[index][0])
+              curYData = parseFloat(seriesData[index][1])
+              timeGap = seriesData[index + 1][timeIndex] - seriesData[index][timeIndex]
+              curTime = seriesData[index][timeIndex]
+              if (curYData !== 0) {
+                _data.push([curXData, Math.log10(Math.abs(curYData)), curTime])
+              }
+            } else {
+              curXData = parseFloat(seriesData[index][0])
+              curYData = parseFloat(seriesData[index][1])
+              curTime += timeGap
+              if (curYData !== 0) {
+                _data.push([curXData, Math.log10(Math.abs(curYData)), curTime])
+              }
+            }
+          }
+        }
+      } else if (this.diffClicked) {
+        for (index = 0; index < dataLength; index++) {
+          if (index === 0) {
+            // TODO: need to change the series[deviceID]
+            // TODO: change the time index(dynamic changing)
+            curXData = parseFloat(seriesData[index][0])
+            curYData = parseFloat(seriesData[index][1])
+            timeGap = seriesData[index + 1][timeIndex] - seriesData[index][timeIndex]
+            curTime = seriesData[index][timeIndex]
+            // _data.push([curTime, 0, curTime])
+          } else {
+            curXData = parseFloat(seriesData[index][0])
+            curYData = parseFloat(seriesData[index][1])
+            prevXData = parseFloat(seriesData[index - 1][0])
+            prevYData = parseFloat(seriesData[index - 1][1])
+            curTime += timeGap
+            diffResult = parseFloat((curYData - prevYData) / (curXData - prevXData))
+            _data.push([curXData, diffResult, curTime])
+          }
+        }
+      }
+      // decide feed in raw data / modified one
+      if (this.integralClicked || this.xlogClicked || this.ylogClicked || this.diffClicked) {
+        // console.log(_data)
+        this.data.series[0].data = _data
+      }
+      this.data.xAxis[0].type = 'value'
+      if (this.integralClicked) {
+        this.$emit('switchModeButton', 'Integral')
+      } else if (this.xlogClicked || this.ylogClicked) {
+        this.$emit('switchModeButton', 'log')
+      } else if (this.diffClicked) {
+        this.$emit('switchModeButton', 'Differential')
+      } else {
+        this.$emit('switchModeButton', '')
+      }
+      // TODO: modify the redundant code
+      if (this.xName === 'TIME') {
+        this.data.xAxis[0].axisLabel.formatter = function (val) {
+          return getTimeFormatter(val)
+        }
+      }
+      this.$emit('refreshData', this.data)
+    },
+    // resetClicked: function () {
+    //   this.integralClicked = false
+    //   this.xlogClicked = false
+    //   this.ylogClicked = false
+    //   this.diffClicked = false
+    //   this.disableDiff = false
+    //   this.disableLog = false
+    // },
+    clickIntegral: function () {
+      this.integralClicked = !(this.integralClicked)
+      const device = this.deviceListNew.find(ele => String(ele.memory_board) === String(this.data.mappingID))
+      if (device !== undefined) {
+        if (device.status === 0) {
+          this.watchHandler()
+        }
+      }
+    },
+    clickXLog: function () {
+      if (this.xlogClicked) {
+        this.xlogClicked = false
+        if (this.ylogClicked) {
+          this.disableDiff = true
+        } else {
+          this.disableDiff = false
+        }
+      } else {
+        this.xlogClicked = true
+        this.disableDiff = true
+      }
+      const device = this.deviceListNew.find(ele => String(ele.memory_board) === String(this.data.mappingID))
+      if (device !== undefined) {
+        if (device.status === 0) {
+          this.watchHandler()
+        }
+      }
+    },
+    clickYLog: function () {
+      if (this.ylogClicked) {
+        this.ylogClicked = false
+        if (this.xlogClicked) {
+          this.disableDiff = true
+        } else {
+          this.disableDiff = false
+        }
+      } else {
+        this.ylogClicked = true
+        this.disableDiff = true
+      }
+      const device = this.deviceListNew.find(ele => String(ele.memory_board) === String(this.data.mappingID))
+      if (device !== undefined) {
+        if (device.status === 0) {
+          this.watchHandler()
+        }
+      }
+    },
+    clickDiff: function () {
+      this.diffClicked = !(this.diffClicked)
+      this.disableLog = !(this.disableLog)
+      const device = this.deviceListNew.find(ele => String(ele.memory_board) === String(this.data.mappingID))
+      if (device !== undefined) {
+        if (device.status === 0) {
+          this.watchHandler()
+        }
+      }
+    },
+    addSource () {
+      if (this.data.gridSource.length > 0) {
+        const xAxisName = this.data.gridSource[0][0].xAxis
+        const yAxisName = this.data.gridSource[0][0].yAxis
+        this.xName = (xAxisName.split(' ')).pop()
+        this.yName = (yAxisName.split(' ')).pop()
+        if ((this.xName === 'VOLTAGE' && this.yName === 'CURRENT') || (this.xName === 'CURRENT' && this.yName === 'VOLTAGE')) {
+          this.mode_name = 'I-V Curve' // integration
+        } else if (this.xName === 'TIME' && this.yName === 'CURRENT') {
+          this.mode_name = 'I-T Graph' // differential and log
+        }
+      }
+    },
+    // index 0 is for the mode which x-axis is represent time, 2 is for the other mode(s)
+    getTimeIndex: function () {
+      let xAxisName = this.rawData.gridSource[0][0].xAxis
+      xAxisName = (xAxisName.split(' ')).pop()
+      return (xAxisName === 'TIME') ? 0 : 2
+    },
+    // these function below are using for print out the data (debug)
+    getAlldata: function () {
+      return this.data.series[0].data[(this.data.series[0].data).length - 1]
+    },
+    getXdata: function () {
+      var value = this.data.series[0].data[(this.data.series[0].data).length - 1][0]
+      return this.xName + ': ' + value + ' ' + this.xUnit
+    },
+    getYdata: function () {
+      var value = this.data.series[0].data[(this.data.series[0].data).length - 1][1]
+      return this.yName + ': ' + value + ' ' + this.yUnit
+    },
+
+    ...mapActions('taskContent', [
+      taskTypes.chart.saveToCache,
+    ]),
+  },
+  async mounted () {
+    this.rawData = this.chartData[this.chartID]
+  },
+}
+
+</script>
@@ -4,7 +4,7 @@
      <va-select
        @input="changeAxis()"
        :label="''"
-        v-if="deviceName!=='EliteEIS'"
+        v-if="deviceName!=='EliteEIS' || (deviceName==='EliteEIS' && metaList[metaIndex].parameter_set.MODE === 1)"
        v-model="channelFormat"
        textBy="description"
        class="va-select-without-margin"
@@ -14,7 +14,7 @@
      <va-select
        @input="changeAxis()"
        :label="''"
-        v-if="deviceName==='EliteEIS'"
+        v-if="deviceName==='EliteEIS' && metaList[metaIndex].parameter_set.MODE !== 1"
        v-model="channelFormat"
        textBy="description"
        class="va-select-without-margin"
@@ -84,7 +84,7 @@ export default {
        } else if (this.axis === 'y') {
          this.axisYDataType = this.channelOptions[1]
        }
-      } else if (this.deviceName === 'EliteZM15') {
+      } else if (this.deviceName === 'EliteZM15' || this.deviceName.includes('Elite_EDC')) {
        // 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, this.deviceName)
        const xType = setting[0]
@@ -130,7 +130,7 @@ export default {
          }
          this.channelFormat = this.axisYDataType
        }
-      } else if (this.deviceName === 'EliteEIS') {
+      } else if (this.deviceName.includes('EIS')) {
        const setting = this.GLOBAL.getDefaultChartTypeByMode(this.metaList[this.metaIndex].parameter_set.MODE, this.deviceName)
        const xType = setting[0]
        const xValue = setting[1]
@@ -141,7 +141,7 @@ export default {
        if (this.axis === 'x') {
          settingType = xType
          settingValue = xValue
-          if (settingType === 'EliteEIS') {
+          if (settingType.includes('EIS')) {
            this.axisXDataType = this.eisChannelOptions.find(element => element.id === parseInt(settingValue) - 1)
          } else if (settingType === 'Elite') {
            // 1: I, 2: V, 3: R
@@ -159,7 +159,7 @@ export default {
        } else if (this.axis === 'y') {
          settingType = yType
          settingValue = yValue
-          if (settingType === 'EliteEIS') {
+          if (settingType.includes('EIS')) {
            this.axisYDataType = this.eisChannelOptions.find(element => element.id === parseInt(settingValue) - 1)
          } else if (settingType === 'Elite') {
            // 1: I, 2: V, 3: R
@@ -184,7 +184,7 @@ export default {
      if (this.deviceName.startsWith('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 === 'EliteZM15' || this.deviceName === 'EliteEIS') {
+      } else if (this.deviceName === 'EliteZM15' || this.deviceName.includes('Elite_EDC') || this.deviceName.includes('EIS')) {
        if (this.axis === 'x') {
          this.axisXDataType = this.channelFormat
        } else if (this.axis === 'y') {
@@ -200,6 +200,9 @@ export default {
        this.$emit('clearCycle')
      }
    },
+    getChannelByAxis () {
+      return this.channelFormat.description
+    },
  },
  mounted () {
  },
@@ -64,13 +64,13 @@ export default {
      }
    },
    showPanel (params) {
-      if (params.target !== undefined) {
-        if (params.target.eventData.componentType === 'xAxis' && params.target.eventData.targetType === 'axisLabel') {
-          this.gridIndex = params.target.eventData.xAxisIndex
+      if (params.targetType !== undefined) {
+        if (params.componentType === 'xAxis' && params.targetType === 'axisLabel') {
+          this.gridIndex = params.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
+        } else if (params.componentType === 'yAxis' && params.targetType === 'axisLabel') {
+          this.gridIndex = params.yAxisIndex
          this.axis = 'y'
          this.position = 'left'
        }
@@ -1,3 +1,4 @@
+<!-- eslint-disable prefer-const -->
 <template>
  <div>
    <va-select
@@ -87,31 +88,116 @@ export default {
            this.calculateScaleHelper(gridIndex, ch)
          }
        }
-      } else if (this.deviceName === 'EliteZM15' || this.deviceName === 'EliteEIS') {
+      } else if (this.deviceName === 'EliteZM15' || this.deviceName.includes('Elite_EDC') || this.deviceName.includes('EIS')) {
        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.abs(seriesData[i][0])
-          } else if (this.axis === 'y') {
-            seriesData[i][1] = Math.abs(seriesData[i][1])
+      // console.log('desc', this.scaleFormat.description)
+      /* var _dataDiff = []
+      var _dataIntegral = []
+      var _dataLog = []
+      // this.$emit('changeAxis', this.metaIndex)
+      // this.$emit('clearCycle')
+      if (this.scaleFormat.description === 'Differential') {
+        // await this.reDrawChart()
+        // eslint-disable-next-line prefer-const
+        let seriesData = JSON.parse(JSON.stringify(this.chartData[this.chartID].series[gridIndex].data))
+        // console.log('diff')
+        var curXData = 0
+        var curYData = 0
+        var prevXData = 0
+        var prevYData = 0
+        var timeGap = 0
+        var curTime = 0
+        _dataDiff = []
+        var diffResult = 0
+        for (let index = 0; index < seriesData.length; index++) {
+          if (index === 0) {
+            curXData = parseFloat(seriesData[index][0])
+            curYData = parseFloat(seriesData[index][1])
+            // timeGap = seriesData[index + 1][timeIndex] - seriesData[index][timeIndex]
+            // curTime = seriesData[index][timeIndex]
+            // _data.push([curTime, 0, curTime])
+          } else {
+            curXData = parseFloat(seriesData[index][0])
+            curYData = parseFloat(seriesData[index][1])
+            prevXData = parseFloat(seriesData[index - 1][0])
+            prevYData = parseFloat(seriesData[index - 1][1])
+            curTime += timeGap
+            diffResult = parseFloat((curYData - prevYData) / (curXData - prevXData))
+            _dataDiff.push([curXData, diffResult])
          }
        }
        this.updateSeriesChart({
          chartID: this.chartID,
          seriesIndex: gridIndex,
-          data: seriesData,
+          data: _dataDiff,
        })
+      } else if (this.scaleFormat.description === 'Integral') {
+        // await this.reDrawChart()
+        // eslint-disable-next-line prefer-const
+        let seriesData = JSON.parse(JSON.stringify(this.chartData[this.chartID].series[gridIndex].data))
+        var curYDataIntegral = 0
+        var prevYDataIntegral = 0
+        var timeGapIntegral = 0
+        var curTimeIntegral = 0
+        var integralResult = 0
+        _dataIntegral = []
+        for (let index = 0; index < seriesData.length; index++) {
+          if (index === 0) {
+            curYDataIntegral = parseFloat(seriesData[index][1])
+            timeGapIntegral = seriesData[index + 1][0] - seriesData[index][0]
+            curTimeIntegral = seriesData[index][0]
+            _dataIntegral.push([curTime, 0])
+          } else {
+            prevYDataIntegral = parseFloat(seriesData[index - 1][1])
+            curYDataIntegral = parseFloat(seriesData[index][1])
+            integralResult += parseFloat((Math.abs(curYDataIntegral) + Math.abs(prevYDataIntegral)) * timeGapIntegral / 2)
+            curTimeIntegral += timeGapIntegral
+            _dataIntegral.push([curTimeIntegral, integralResult])
+          }
+        }
+        this.updateSeriesChart({
+          chartID: this.chartID,
+          seriesIndex: gridIndex,
+          data: _dataIntegral,
+        })
+      } else if (this.scaleFormat.description === 'Log') {
+        await this.reDrawChart()
+        setTimeout(() => {
+          // eslint-disable-next-line prefer-const
+          let seriesData = JSON.parse(JSON.stringify(this.chartData[this.chartID].series[gridIndex].data))
+          _dataLog = seriesData
+          for (let i = 0; i < seriesData.length; i++) {
+            if (this.axis === 'x') {
+              seriesData[i][0] = parseFloat(seriesData[i][0])
+              if (seriesData[i][0] !== 0) {
+                // seriesData[i][0] = Math.log10(Math.abs(seriesData[i][0]))
+                _dataLog[i][0] = Math.log10(Math.abs(seriesData[i][0]))
+              }
+            } else if (this.axis === 'y') {
+              seriesData[i][1] = parseFloat(seriesData[i][1])
+              if (seriesData[i][1] !== 0) {
+                // seriesData[i][1] = Math.log10(Math.abs(seriesData[i][1]))
+                _dataLog[i][1] = Math.log10(Math.abs(seriesData[i][1]))
+              }
+            }
+          }
+          this.updateSeriesChart({
+            chartID: this.chartID,
+            seriesIndex: gridIndex,
+            data: _dataLog,
+          })
+          console.log('done')
+        }, 2000)
+        // eslint-disable-next-line prefer-const
      } else if (this.scaleFormat.description === 'Linear') {
-        // console.log(this.recInfo)
        if (this.deviceName.startsWith('Neulive')) {
+          console.log('inside neulive')
          // [Region] get the subfile index
-          seriesData = []
+          // eslint-disable-next-line prefer-const
+          let seriesData = []
          const dataYList = this.recInfo[this.metaID][ch][this.currentScale]
          let startIndex = 0
          let endIndex = 0
@@ -140,12 +226,23 @@ export default {
            }
          }
        } else if (this.deviceName === 'EliteZM15' || this.deviceName === 'EliteEIS') {
-          this.$emit('changeAxis', this.metaIndex)
-          this.$emit('clearCycle')
+          console.log('inside Elite')
+          // this.$emit('changeAxis', this.metaIndex)
+          // this.$emit('clearCycle')
+          this.reDrawChart()
        }
-      }
+      } */
+      // console.log('inside changeScale: ', this.scaleFormat.description)
+      this.reDrawChart()
      this.setAxisDisplayChart({ type: this.displayType[this.axis], axis: this.axis, chartID: this.chartID, gridIndex: gridIndex })
    },
+    reDrawChart: function () {
+      // console.log('die here')
+      this.$emit('changeFunctional', this.axis, this.scaleFormat.description)
+      // console.log('reDrawChart: ', this.axis, this.scaleFormat.description)
+      this.$emit('changeAxis', this.metaIndex)
+      this.$emit('clearCycle')
+    },
    getData: async function (scale, sampleMethod, id, channel, meta) {
      if (scale === 1) {
        return await download.rawByIDChannels(id, channel, meta)
@@ -157,11 +254,19 @@ export default {
        }
      }
    },
+    getScaleByAxis () {
+      return this.scaleFormat.description
+    },
    ...mapActions('replay', [types.chart.setAxisDisplay]),
    ...mapMutations('replay', [types.chart.updateSeries]),
    ...mapGetters('replay', [types.rec.getCycleDict]),
  },
  mounted () {
+    if (this.axis === 'x') {
+      this.scaleOptions = this.scaleXOptions
+    } else if (this.axis === 'y') {
+      this.scaleOptions = this.scaleYOptions
+    }
  },
  data () {
    return {
@@ -169,7 +274,8 @@ export default {
      metaID: 0,
      metaInfo: null,
      scaleFormat: { id: 0, description: 'Linear' },
-      scaleOptions: [
+      scaleOptions: [],
+      scaleXOptions: [
        {
          id: 0,
          description: 'Linear',
@@ -179,6 +285,24 @@ export default {
          description: 'Log',
        },
      ],
+      scaleYOptions: [
+        {
+          id: 0,
+          description: 'Linear',
+        },
+        {
+          id: 1,
+          description: 'Log',
+        },
+        {
+          id: 2,
+          description: 'Integral',
+        },
+        {
+          id: 3,
+          description: 'Differential',
+        },
+      ],
    }
  },
  destroyed () {
@@ -65,9 +65,9 @@ export default {
            return item.unit === 'uV'
          })
        }
-      } else if (this.deviceName === 'EliteZM15') {
+      } else if (this.deviceName === 'EliteZM15' || this.deviceName.includes('Elite_EDC')) {
        return this.valueFormatOptions[this.dataType][0]
-      } else if (this.deviceName === 'EliteEIS') {
+      } else if (this.deviceName.includes('EIS')) {
        return this.eisValueFormatOptions[this.dataType][0]
      }
    },
@@ -80,7 +80,7 @@ export default {
        } else if (this.axis === 'y') {
          this.dataType = 'voltage'
        }
-      } else if (this.deviceName === 'EliteZM15') {
+      } else if (this.deviceName === 'EliteZM15' || this.deviceName.includes('Elite_EDC')) {
        // 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, this.deviceName)
        const xType = setting[0]
@@ -111,7 +111,7 @@ export default {
        } else if (settingType === 'Time') {
          this.dataType = 'time'
        }
-      } else if (this.deviceName === 'EliteEIS') {
+      } else if (this.deviceName.includes('EIS')) {
        const setting = this.GLOBAL.getDefaultChartTypeByMode(this.metaList[this.metaIndex].parameter_set.MODE, this.deviceName)
        const xType = setting[0]
        const xValue = setting[1]
@@ -127,7 +127,7 @@ export default {
          settingValue = yValue
        }

-        if (settingType === 'EliteEIS') {
+        if (settingType.includes('EIS')) {
          if (settingValue === 3) {
            this.dataType = 'frequency'
          } else if (settingValue === 5 || settingValue === 6 || settingValue === 7) {
@@ -179,7 +179,7 @@ export default {
            channel: parseInt(key),
          })
        }
-      } else if (this.deviceName === 'EliteZM15' || this.deviceName === 'EliteEIS') {
+      } else if (this.deviceName === 'EliteZM15' || this.deviceName.includes('Elite_EDC') || this.deviceName.includes('EIS')) {
        this.updateAxisLabelChart({
          chartID: chartID,
          axis: this.axis,
@@ -229,13 +229,20 @@ export default {
          this.dataType = 'default'
        }
      }
-      if (this.deviceName === 'EliteZM15') {
+      if (this.deviceName === 'EliteZM15' || this.deviceName.includes('Elite_EDC')) {
        this.valueFormat = this.valueFormatOptions[this.dataType][0]
-      } else if (this.deviceName === 'EliteEIS') {
+      } else if (this.deviceName.includes('EIS')) {
        this.valueFormat = this.eisValueFormatOptions[this.dataType][0]
      }
      this.changeUnit()
    },
+    getUnitByAxis () {
+      // console.log('valueFormat: ', this.valueFormat.unit)
+      if (this.valueFormat.unit === undefined) {
+        return 'auto'
+      }
+      return this.valueFormat.unit
+    },
    // call vuex to mutate chart label formatter by unit and axis
    ...mapMutations('replay', [types.chart.updateAxisLabel]),
  },
@@ -343,6 +350,23 @@ export default {
            unitScale: 1e6,
          },
        ],
+        voltage: [ // Voltage
+          {
+            id: 1,
+            unit: 'mV',
+            unitScale: 1000,
+          },
+          {
+            id: 0,
+            unit: 'uV',
+            unitScale: 1,
+          },
+          {
+            id: 2,
+            unit: 'V',
+            unitScale: 1000000,
+          },
+        ],
        frequency: [ // Frequency
          {
            id: 0,
@@ -8,7 +8,7 @@

 <script>
 import { mapFields } from 'vuex-map-fields'
-import paramTable from '@/data/param-table/index.js'
+import paramTable from '@/data/config-table/index.js'

 export default {
  name: 'show-parameter',
@@ -25,6 +25,7 @@ export default {
  data () {
    return {
      deviceName: '',
+      mode: -1,
      content: '',
      showDict: {},
      // [region] for neulive
@@ -46,58 +47,6 @@ export default {
          description: '800',
        },
      ],
-      neuliveSampleRateOptions: [
-        {
-          id: 0,
-          value: 1000,
-          description: '1k',
-        },
-        {
-          id: 1,
-          value: 2000,
-          description: '2k',
-        },
-        {
-          id: 2,
-          value: 4000,
-          description: '4k',
-        },
-        {
-          id: 3,
-          value: 5000,
-          description: '5k',
-        },
-        {
-          id: 4,
-          value: 8000,
-          description: '8k',
-        },
-        {
-          id: 5,
-          value: 10000,
-          description: '10k',
-        },
-        {
-          id: 6,
-          value: 20000,
-          description: '20k',
-        },
-        {
-          id: 7,
-          value: 40000,
-          description: '40k',
-        },
-        {
-          id: 8,
-          value: 80000,
-          description: '80k',
-        },
-        {
-          id: 9,
-          value: 100000,
-          description: '100k',
-        },
-      ],
      stimulateElectrodeOptions: [
        {
          label: 'Monopolar',
@@ -351,11 +300,7 @@ export default {
                }
              } else if (key === 'SAMPLE_RATE') {
                showKey = 'Sample Rate'
-                for (let i = 0; i < this.neuliveSampleRateOptions.length; i++) {
-                  if (this.neuliveSampleRateOptions[i].value === value) {
-                    showValue = this.neuliveSampleRateOptions[i].description
-                  }
-                }
+                showValue = value
              }
              this.content += '    ' + showKey + ': ' + showValue + '<br/>'
            }
@@ -433,20 +378,21 @@ export default {
          this.content += '    Frequency: ' + String(1000 / period) + ' Hz' + '<br/>' // 1000 is cuz 1s = 1000ms
          this.content += '    Period: ' + String(period) + ' ms' + '<br/>'
        }
-      } else if (this.deviceName === 'EliteZM15' || this.deviceName === 'EliteEIS') {
-        const mode = params.MODE
-        const modeName = paramTable[this.deviceName].MODE[mode].name
-        const showParams = paramTable[this.deviceName].MODE[mode].showParameter
+      } else if (this.deviceName === 'EliteZM15' || this.deviceName.includes('Elite_EDC') || this.deviceName.includes('EIS')) {
+        const mode = this.mode = params.MODE
+        const config = paramTable.getConfig(this.deviceName)
+        const modeConfig = paramTable.getModeConfig(this.deviceName, mode)
+        const modeName = modeConfig.name
+        const showParams = modeConfig.showParameter
        this.showDict.MODE = modeName
        if (modeName === 'Pulse Sensing') {
-          const duplicateParam = ['V_initial', 't_pulse', 'CURR_REC_START', 'CURR_REC_END']
+          const duplicateParam = ['V_initial', 't_pulse', 'CURR_REC']
          for (let i = 0; i < 4; i++) {
-            const key = 'segment_order_' + String(i)
-            const order = paramTable[this.deviceName][key].rev_func(params[key])
-            if (parseInt(order) !== 0) { // if === 0, 代表沒有使用這個block
-              for (let key of duplicateParam) {
-                key = key + '_' + String(i)
-                this.fillShowDict(key, params[key])
+            const key = 'segment_order'
+            const order = config[key].outputReadabilityData(params[key], 1, i)
+            if (parseInt(order) >= 0) { // if === -1, 代表沒有使用這個block
+              for (const key of duplicateParam) {
+                this.fillShowDict(key, config[key].outputReadabilityData(params[key], 1, i), i)
              }
            }
          }
@@ -464,10 +410,18 @@ export default {
      }
      this.dump()
    },
-    fillShowDict (key, value) {
-      const expVal = paramTable[this.deviceName][key].rev_func(value)
-      const name = paramTable[this.deviceName][key].showName
-      const unit = paramTable[this.deviceName][key].defaultUnit
+    fillShowDict (key, value, index = -1) {
+      const config = paramTable.getConfig(this.deviceName)
+      const expVal = config[key].defaultUnit
+        ? config[key].outputReadabilityData(value, config[key].unit[config[key].defaultUnit])
+        : config[key].outputReadabilityData(value)
+      let name = typeof (config[key].showName) === 'function'
+        ? config[key].showName(this.mode)
+        : config[key].showName
+      if (index >= 0) {
+        name += ` ${index + 1}`
+      }
+      const unit = config[key].defaultUnit
      this.showDict[name] = unit !== undefined ? expVal.toString() + unit : expVal.toString()
    },
    dump () {
@@ -0,0 +1,171 @@
+<template>
+  <div>
+    <div class="flex-container mb-2">
+      <va-input
+        v-model="this.specificIntegral"
+        :label="$t('Specific Integral')"
+      />
+      <div class="flex sm5 xl5 md5 xs5 px-0 py-0">
+        <va-button
+          v-if="!keyBoundary"
+          v-model="this.keyBoundary"
+          @click="switchBoundary()"
+          class="round-button px-1 py-1"
+        >
+          Draw
+        </va-button>
+        <va-button
+          v-if="keyBoundary"
+          v-model="this.keyBoundary"
+          @click="switchBoundary()"
+          class="round-button px-1 py-1"
+        >
+          Input
+        </va-button>
+      </div>
+    </div>
+
+    <div v-if="!keyBoundary">
+      <div class="flex-container mb-2">
+        <div class="flex sm2 xl2 md2 xs2 px-0 py-0" />
+        <va-input
+          v-model="this.boundary.x_start"
+          :label="$t('X Start')"
+        />
+        <va-input
+          v-model="this.boundary.x_end"
+          :label="$t('X End')"
+        />
+      </div>
+      <div class="flex-container mb-2">
+        <div class="flex sm2 xl2 md2 xs2 px-0 py-0" />
+        <va-input
+          v-model="this.boundary.y_start"
+          :label="$t('Y Start')"
+        />
+        <va-input
+          v-model="this.boundary.y_end"
+          :label="$t('Y End')"
+        />
+      </div>
+      <div class="flex-container mb-2">
+        <div class="flex sm2 xl2 md2 xs2 px-0 py-0" />
+        <va-button class="mb-2" @click="setBrushBoundary" small>
+          Set Integral Boundary
+        </va-button>
+      </div>
+    </div>
+
+    <div v-if="keyBoundary">
+      <div class="flex-container mb-2">
+        <div class="flex sm2 xl2 md2 xs2 px-0 py-0" />
+        <va-input
+          @keyup.enter="setBrushBoundary()"
+          @blur="setBrushBoundary()"
+          v-model="boundaryXstart"
+          :label="$t('X Start')"
+        />
+        <va-input
+          @keyup.enter="setBrushBoundary()"
+          @blur="setBrushBoundary()"
+          v-model="boundaryXend"
+          :label="$t('X End')"
+        />
+      </div>
+      <div class="flex-container mb-2">
+        <div class="flex sm2 xl2 md2 xs2 px-0 py-0" />
+        <va-input
+          @keyup.enter="setBrushBoundary()"
+          @blur="setBrushBoundary()"
+          v-model="boundaryYstart"
+          :label="$t('Y Start')"
+        />
+        <va-input
+          @keyup.enter="setBrushBoundary()"
+          @blur="setBrushBoundary()"
+          v-model="boundaryYend"
+          :label="$t('Y End')"
+        />
+      </div>
+      <div class="flex-container mb-2">
+        <div class="flex sm2 xl2 md2 xs2 px-0 py-0" />
+        <va-button class="mb-2" @click="setBrushBoundary" small>
+          Set Integral Boundary
+        </va-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'SpecificIntegral',
+  components: {
+  },
+  computed: {
+    displayType () {
+      return {
+        x: this.axisXLabelScale.description === 'Log' ? 'log' : 'value',
+        y: this.axisYLabelScale.description === 'Log' ? 'log' : 'value',
+      }
+    },
+  },
+  props: {
+  },
+  created () {
+  },
+  data () {
+    return {
+      specificIntegral: 0,
+      boundary: {},
+      boundaryXstart: 0,
+      boundaryXend: 0,
+      boundaryYstart: 0,
+      boundaryYend: 0,
+      keyBoundary: false,
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    getSpecificIntegral (specificIntegral, boundary) {
+      this.specificIntegral = specificIntegral
+      this.specificIntegral = (this.specificIntegral * 1e-12).toFixed(4) + 'mW'
+      // this.specificIntegral = (this.specificIntegral * 1e-15).toFixed(4) + 'W'
+      if (!this.keyBoundary) {
+        this.boundary = boundary
+      }
+    },
+    switchBoundary () {
+      this.keyBoundary = !this.keyBoundary
+      // if (this.boundary !== {})
+      this.boundaryXstart = this.boundary.x_start
+      this.boundaryXend = this.boundary.x_end
+      this.boundaryYstart = this.boundary.y_start
+      this.boundaryYend = this.boundary.y_end
+    },
+    setBrushBoundary () {
+      var boundary = {
+        x_start: Number(this.boundaryXstart),
+        x_end: Number(this.boundaryXend),
+        y_start: Number(this.boundaryYstart),
+        y_end: Number(this.boundaryYend),
+      }
+      this.$emit('setBrushBoundary', boundary)
+    },
+  },
+  async mounted () {
+  },
+  destroyed () {
+  },
+  watch: {
+  },
+}
+</script>
+
+<style lang="scss">
+  /* .round-button {
+    border-radius: 12px;
+  } */
+</style>
@@ -9,7 +9,6 @@
 <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',
@@ -7,7 +7,6 @@
 </template>

 <script>
-// import { chartData } from '../../../../data/task/ChartsManagement'

 export default {
  name: 'spike-overview-chart',
@@ -0,0 +1,60 @@
+<template>
+  <div>
+    <p>aaa</p>
+    <chart class="chart" :option="option" />
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      option: {
+        title: {
+          text: 'Traffic Sources',
+          left: 'center',
+        },
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a} <br/>{b} : {c} ({d}%)',
+        },
+        legend: {
+          orient: 'vertical',
+          left: 'left',
+          data: ['Direct', 'Email', 'Ad Networks', 'Video Ads', 'Search Engines'],
+        },
+        series: [
+          {
+            name: 'Traffic Sources',
+            type: 'pie',
+            radius: '55%',
+            center: ['50%', '60%'],
+            data: [
+              { value: 335, name: 'Direct' },
+              { value: 310, name: 'Email' },
+              { value: 234, name: 'Ad Networks' },
+              { value: 135, name: 'Video Ads' },
+              { value: 1548, name: 'Search Engines' },
+            ],
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)',
+              },
+            },
+          },
+        ],
+        brush: {
+        },
+      },
+    }
+  },
+}
+</script>
+
+<style>
+.chart {
+  height: 100vh;
+}
+</style>
@@ -0,0 +1,115 @@
+<template>
+  <va-card class="flex xl3 md3 sm12 xs12" title="MQTT">
+    <div class="row ma-1 text-center">
+      <va-button @click="getControllerID">Controller-ID</va-button>
+      <div class="flex-center">
+        {{ controllerID }}
+      </div>
+    </div>
+    <div class="row ma-1 text-start" v-if="controllerID !== ''">
+      <va-button @click="getHardwareInfo">HardwareInfo</va-button>
+      <div class="">
+        {{ responseMessage }}
+      </div>
+    </div>
+  </va-card>
+</template>
+
+<script>
+import api from '@/data/api'
+
+export default {
+  name: 'Developer',
+  components: {
+  },
+  data () {
+    return {
+      controllerID: '',
+      responseMessage: '',
+    }
+  },
+  mqtt: {
+    async '+/get_device_info_all/+' (data, topic) {
+      console.log('get_device_info_all', String.fromCharCode.apply(null, data))
+    },
+    async '+/hardware_device/+' (data, topic) {
+      console.log('hardware_device', String.fromCharCode.apply(null, data))
+    },
+    async '+/hardware_datetime/+' (data, topic) {
+      console.log('hardware_datetime', String.fromCharCode.apply(null, data))
+    },
+    async '+/hardware_info/+' (data, topic) {
+      console.log('hardware_info', String.fromCharCode.apply(null, data))
+      this.responseMessage = String.fromCharCode.apply(null, data)
+    },
+    async '+/broadcast/+' (data, topic) {
+      console.log('broadcast', String.fromCharCode.apply(null, data))
+    },
+  },
+  methods: {
+    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 (id) {
+      this.mqttSub(id + '/hardware_datetime/+')
+      this.mqttSub(id + '/hardware_device/+')
+      this.mqttSub(id + '/hardware_info/+')
+      this.mqttSub(id + '/broadcast')
+      this.mqttSub(id + '/get_device_info_all/+')
+    },
+    pageMqttUnSub: function (id) {
+      this.mqttUnSub(id + '/hardware_datetime/+')
+      this.mqttUnSub(id + '/hardware_device/+')
+      this.mqttUnSub(id + '/hardware_info/+')
+      this.mqttUnSub(id + '/broadcast')
+      this.mqttUnSub(id + '/get_device_info_all/+')
+    },
+    getControllerID: async function () {
+      try {
+        const response = await api.controller.getAll()
+        if (response.status === 200) {
+          if (response.data.length > 0) {
+            this.controllerID = response.data[0].mqtt_id
+            this.pageMqttSub(this.controllerID)
+            return true
+          }
+          this.controllerID = 'No Controller Info'
+          return false
+        }
+        this.controllerID = 'Wrong status ' + response.status
+      } catch (e) {
+        console.log(e)
+        this.controllerID = e
+      }
+    },
+    getHardwareDatetime: function () {
+      this.mqttPub(this.controllerID + '_user', JSON.stringify({
+        header: 'hardware_datetime/0',
+        content: String(Date.now()),
+      }))
+    },
+    getHardwareInfo: function () {
+      this.mqttPub(this.controllerID + '_user', JSON.stringify({
+        header: 'hardware_info/0',
+      }))
+    },
+  },
+  async mounted () {
+  },
+  destroyed () {
+    if (this.controllerID !== '') {
+      this.pageMqttUnSub(this.controllerID)
+    }
+  },
+}
+</script>
+
+<style>
+
+</style>
@@ -0,0 +1,58 @@
+<template>
+  <va-card class="" title="LED">
+    <div class="row ma-1">
+      <va-button v-for="color in colors" :key="color"  :color="colorMapping[color]" @click="changeLedColor(color)">
+        {{color}}
+      </va-button>
+      <va-button :color="'gray'" @click="testLed()">test</va-button>
+    </div>
+  </va-card>
+</template>
+
+<script>
+import { taskInfo } from '@/data/task/TaskInfo'
+
+export default {
+  name: 'Developer',
+  components: {
+  },
+  data () {
+    return {
+      colors: ['red', 'orange', 'yellow', 'green', 'blue', 'cyan', 'magenta'],
+      colorMapping: {
+        red: 'danger',
+        orange: 'Orange',
+        blue: 'primary',
+        yellow: 'warning',
+        green: 'success',
+        cyan: 'info',
+        magenta: 'violet',
+      },
+    }
+  },
+  methods: {
+    mqttPub: function (topic, mes) {
+      this.$mqtt.publish(topic, mes)
+    },
+    testLed: function () {
+      this.changeLedColor('red')
+      setTimeout(() => { this.changeLedColor('blue') }, 2000)
+      setTimeout(() => { this.changeLedColor('green') }, 4000)
+    },
+    changeLedColor: function (color) {
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'hardware_send/0',
+        command: 'led',
+        state: color,
+      }))
+    },
+  },
+  async mounted () {
+    await taskInfo.updateTaskInfo(this.$route.params.taskID)
+  },
+}
+</script>
+
+<style>
+
+</style>
@@ -22,6 +22,7 @@ import { mapFields } from 'vuex-map-fields'
 import newDownload from '@/factories/file/downloadFactory'
 import newChannel from '@/factories/file/channelFactory'
 import { taskInfo } from '@/data/task/TaskInfo'
+import configTable from '@/data/config-table/index'

 export default {
  name: 'Download',
@@ -92,7 +93,8 @@ export default {
  async mounted () {
    await this.getControllerList()
    // TODO authorization
-    const format = this.$route.params.format
+    const format = this.$route.params.format.split('-')[0]
+    const allChannel = this.$route.params.format.split('-')[1]
    this.metaList = this.$route.params.metaList.split('-')
    const sd = this.$route.params.sd

@@ -106,7 +108,8 @@ export default {
      }
      if (meta !== undefined) {
        this.metaInfo = meta
-        const channelArray = JSON.parse(this.metaInfo.channels)
+        const channelParamObj = configTable.getModeConfig(meta.device.library_name, meta.parameter_set.MODE).channels
+        const channelArray = allChannel === 'all' ? JSON.parse(this.metaInfo.channels) : Object.keys(channelParamObj).filter(ele => ele !== 'time')
        const channelList = []

        // split to different subfile by channel
@@ -217,14 +220,20 @@ export default {
                const response = responseArray[responseIndex]
                // console.log('response', response)
                const idx = responseIndex % columnNum
-                // console.log('response', response)
+
                for (const data of response.data) {
+                  const timeUnitScale = channelParamObj.time.unit[channelParamObj.time.downloadUnit]
+                  const channelUnitScale = channelParamObj[data.channel]?.unit[channelParamObj[data.channel]?.downloadUnit]
                  // console.log('data', data)
                  const dataArray = data.data.split('"***"').slice(0, -1)
                  // console.log('dataArray', dataArray)
                  for (const raw of dataArray) {
                    const rawArray = raw.split(' ')
-                    this.downloadInfo.channelInfo[data.channel].downloadDataBuffer[idx].push(...rawArray)
+                    const newArray = rawArray[0] === '' ? [] : rawArray.map((ele, index) => {
+                      // console.log((parseInt(ele) / timeUnitScale).toFixed(Math.log10(timeUnitScale)))
+                      return (index % 2 === 0) ? String((parseInt(ele) / timeUnitScale).toFixed(Math.log10(timeUnitScale))) : channelUnitScale ? String((parseInt(ele) / channelUnitScale).toFixed(Math.log10(channelUnitScale))) : ele
+                    })
+                    this.downloadInfo.channelInfo[data.channel].downloadDataBuffer[idx].push(...newArray)
                    // console.log('rawArray', rawArray)
                  }
                }
@@ -26,6 +26,7 @@ import newDownload from '@/factories/file/downloadFactory'
 import newChannel from '@/factories/file/channelFactory'
 import progressModal from '@/components/common/progressBarByValueModal/progressModal.vue'
 import { taskInfo } from '@/data/task/TaskInfo'
+import configTable from '@/data/config-table/index'

 export default {
  name: 'DownloadOffline',
@@ -97,7 +98,8 @@ export default {
  async mounted () {
    await this.getControllerList()
    // TODO authorization
-    const format = this.$route.params.format
+    const format = this.$route.params.format.split('-')[0]
+    const allChannel = this.$route.params.format.split('-')[1]
    this.metaList = this.$route.params.metaList.split('-')
    const sd = this.$route.params.sd

@@ -111,7 +113,8 @@ export default {
      }
      if (meta !== undefined) {
        this.metaInfo = meta
-        const channelArray = JSON.parse(this.metaInfo.channels)
+        const channelParamObj = configTable.getModeConfig(meta.device.library_name, meta.parameter_set.MODE).channels
+        const channelArray = allChannel === 'all' ? JSON.parse(this.metaInfo.channels) : Object.keys(channelParamObj).filter(ele => ele !== 'time')
        const channelList = []

        if (meta.device.library_name.indexOf('Neulive') >= 0) {
@@ -220,12 +223,17 @@ export default {
                const idx = responseIndex % columnNum
                // console.log('response', response)
                for (const data of response.data) {
+                  const timeUnitScale = channelParamObj.time.unit[channelParamObj.time.downloadUnit]
+                  const channelUnitScale = channelParamObj[data.channel]?.unit[channelParamObj[data.channel]?.downloadUnit]
                  // console.log('data', data)
                  const dataArray = data.data.split('"***"').slice(0, -1)
                  // console.log('dataArray', dataArray)
                  for (const raw of dataArray) {
                    const rawArray = raw.split(' ')
-                    this.downloadInfo.channelInfo[data.channel].downloadDataBuffer[idx].push(...rawArray)
+                    const newArray = rawArray[0] === '' ? [] : rawArray.map((ele, index) => {
+                      return (index % 2 === 0) ? String((parseInt(ele) / timeUnitScale).toFixed(Math.log10(timeUnitScale))) : channelUnitScale ? String((parseInt(ele) / channelUnitScale).toFixed(Math.log10(channelUnitScale))) : ele
+                    })
+                    this.downloadInfo.channelInfo[data.channel].downloadDataBuffer[idx].push(...newArray)
                    // console.log('rawArray', rawArray)
                  }
                }
@@ -29,6 +29,11 @@
      :okText=" $t('modal.confirm') "
      @ok="editFile()"
      @cancel="undoEdit()"
+      @keyup.native.enter="() => {
+        editFile()
+        showModal.editFile = false
+      }"
+      tabindex="0"
    >
      <va-input
        :value="editInfo.changedName"
@@ -37,6 +42,7 @@
        :success="editInfo.success"
        :error="editInfo.error"
        :error-messages="editInfo.errorMessages"
+        :ref="'edit_input'"
        @input="checkFileNameValidate"
        removable
      />
@@ -45,28 +51,40 @@
      v-model="showModal.deleteFile"
      size="small"
      :title="'DELETE'"
-      :message="`Delete File ${deleteInfo.name}?`"
      :okText=" $t('modal.confirm') "
      @ok="deleteFile()"
+      @keyup.native.enter="() => {
+        deleteFile()
+        showModal.deleteFile = false
+      }"
+      tabindex="1"
    >
+      <!-- invisiable to focus on modal -->
+      <p>Delete File {{ deleteInfo.name }} ? <input type="text" :ref="'delete_input'" style="opacity: 0; line-height: 0;"/></p>
    </va-modal>

    <va-modal
      v-model="showModal.deleteMultiFiles"
      size="small"
      :title="'DELETE'"
-      :message="'Delete select files?'"
      :okText=" $t('modal.confirm') "
      @ok="deleteMultiFiles()"
+      @keyup.native.enter="() => {
+        deleteMultiFiles()
+        showModal.deleteMultiFiles = false
+      }"
+      tabindex="2"
    >
+      <!-- invisiable to focus on modal -->
+      <p>Delete select files? <input type="text" :ref="'delete_multi_input'" style="opacity: 0; line-height: 0;"/></p>
    </va-modal>

    <va-card class="flex sm12 xl12 md12 xs12">
      <template slot="header">
        <div class="flex sm12 xl12 md12 xs12" style="text-align: end;">
-          <!-- <va-button class="" color="success" v-if="selected.length" @click="downloadSelected" target="_blank" small>
+          <va-button class="" color="success" v-if="selected.length" @click="downloadSelected" target="_blank" small>
            DOWNLOAD
-          </va-button> -->
+          </va-button>
          <va-button class="" color="danger" v-if="selected.length" @click="deleteMultiFilesConfirm" target="_blank" small>
            DELETE
          </va-button>
@@ -494,6 +512,9 @@ export default {
      this.editInfo.info = info
      this.editInfo.changedName = info.name
      this.showModal.editFile = true
+      setTimeout(() => {
+        this.$refs.edit_input.$refs.input.focus()
+      }, 100)
    },
    editFile: async function () {
      // TODO editFile
@@ -556,7 +577,7 @@ export default {
    },
    removeFileFromList: function () {
    },
-    fillDeleteInfo (info) {
+    fillDeleteInfo: function (info) {
      if (info.type === 'folder') {
        this.deleteInfo.folderID = info.id
        this.deleteInfo.name = info.name
@@ -566,19 +587,25 @@ export default {
        this.deleteInfo.metaID = info.id
      }
    },
-    async deleteFolder (id) {
+    deleteFolder: async function (id) {
      await api.collection.update(id, { deleted: true })
      await api.collection.clearDel()
    },
-    async deleteSingleFileByDeleteInfo () {
+    deleteSingleFileByDeleteInfo: async function () {
      await api.meta.update(this.deleteInfo.metaID, { deleted: true })
      await api.meta.clearDel()
    },
    deleteFileConfirm: function (info) {
      this.fillDeleteInfo(info)
      this.showModal.deleteFile = true
+      setTimeout(() => {
+        this.$refs.delete_input.focus()
+      }, 100)
    },
    deleteFile: async function () {
+      this.showToast('deleting file...', {
+        position: 'bottom-right',
+      })
      if (this.deleteInfo.metaID === undefined) {
        await this.deleteFolder(this.deleteInfo.folderID)
      } else {
@@ -600,8 +627,14 @@ export default {
    },
    deleteMultiFilesConfirm: function () {
      this.showModal.deleteMultiFiles = true
+      setTimeout(() => {
+        this.$refs.delete_multi_input.focus()
+      }, 100)
    },
    deleteMultiFiles: async function () {
+      this.showToast('deleting file...', {
+        position: 'bottom-right',
+      })
      this.deleteSelected()
    },
    inputFieldReset: function (info) {
@@ -640,12 +673,12 @@ export default {
      // this.$refs.datatable_ref.refresh()
      // this.$refs.datatable_ref.currentPage = 1
    },
-    // downloadSelected: function () {
-    //   for (let i = 0; i < this.selected.length; i++) {
-    //     const meta = this.selected[i]
-    //     this.downloadCsv(meta)
-    //   }
-    // },
+    downloadSelected: function () {
+      for (let i = 0; i < this.selected.length; i++) {
+        const meta = this.selected[i]
+        this.downloadExcel(meta)
+      }
+    },
    async deleteSelected () {
      for (let i = 0; i < this.selected.length; i++) {
        const meta = this.selected[i]
@@ -702,7 +735,7 @@ export default {
        if (this.controllerList[0].sd_uploading === false) {
          const ret = await api.sdcard.getuuidList()
          if (ret.status === 200) {
-            this.SDuuidList = ret.data.data
+            this.SDuuidList = ret.data
          }
        }
      }
@@ -10,7 +10,7 @@
          : cardStyle.medium
        : cardStyle.large
      ">
-      <project-view @start_project="startProject($event)" @save_project="saveProject($event)"/>
+      <project-view @start_project="startProject($event)" @stop_project="stopProject($event)" @save_project="saveProject($event)"/>
    </div>
    <div :class="cardStyle.small" v-show="taskViewPanel.show">
      <project-task/>
@@ -22,9 +22,10 @@
 import ProjectManager from '@/components/project/manager/ProjectManager'
 import ProjectView from '@/components/project/view/ProjectView'
 import ProjectTask from '@/components/project/task/ProjectTask'
+import { mapActions } from 'vuex'
 import { mapFields } from 'vuex-map-fields'
+import types from '@/store/modules/project/types'
 import { taskInfo } from '@/data/task/TaskInfo'
-import api from '../../data/api/index'

 export default {
  name: 'project',
@@ -35,6 +36,8 @@ export default {
  },
  computed: {
    ...mapFields('project', [
+      'projectConfigList',
+      'runningProjectList',
      'projectManagerPanel',
      'taskViewPanel',
      'deviceConnectList',
@@ -52,6 +55,7 @@ export default {
  },
  mqtt: {
    async '+/get_device_info_all/+' (data, topic) {
+      this.deviceConnectList.length = 0
      const deviceList = JSON.parse(String.fromCharCode.apply(null, data)).data

      for (const device of deviceList) {
@@ -64,17 +68,28 @@ export default {
        this.deviceConnectList.push(device)
      }
    },
+    async '+/run_project/+' (data, topic) {
+      const runningProjects = JSON.parse(String.fromCharCode.apply(null, data)).data
+      this.runningProjectList.push(runningProjects)
+    },
+    async '+/get_running_project/+' (data, topic) {
+      this.runningProjectList.length = 0
+      const runningProjects = JSON.parse(String.fromCharCode.apply(null, data)).data
+      this.runningProjectList.push(...runningProjects)
+    },
    async '+/broadcast' (data, topic) {
      const mes = String.fromCharCode.apply(null, data).split(':')
      // let content
      switch (mes[0]) {
        case 'project':
          this.pageToast(mes.slice(1).join(':'))
+          this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+            header: 'get_running_project/0',
+          }))
          break
        default:
          break
      }
-      //  console.log(String.fromCharCode.apply(null, data), topic)
    },
  },
  methods: {
@@ -100,10 +115,14 @@ export default {
    pageMqttSub: function (id) {
      this.mqttSub(id + '/broadcast')
      this.mqttSub(id + '/get_device_info_all/+')
+      this.mqttSub(id + '/run_project/+')
+      this.mqttSub(id + '/get_running_project/+')
    },
    pageMqttUnSub: function (id) {
      this.mqttUnSub(id + '/broadcast')
      this.mqttUnSub(id + '/get_device_info_all/+')
+      this.mqttUnSub(id + '/run_project/+')
+      this.mqttUnSub(id + '/get_running_project/+')
    },
    initPage: async function () {
      await taskInfo.updateTaskInfo()
@@ -117,10 +136,29 @@ export default {
        project: project,
      }))
    },
-    saveProject: async function (project) {
-      console.log('save', project)
-      console.log('create', await api.project.create(project))
+    stopProject: function (project) {
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'stop_project/0',
+        project: project.uuid,
+      }))
    },
+    saveProject: async function (project) {
+      this.updateProject({ project: project, api: this.API })
+      this.showToast(
+        'project update finish',
+        {
+          icon: 'fa-bell',
+          position: 'bottom-right',
+          duration: 5000,
+        },
+      )
+    },
+
+    ...mapActions('project',
+      [
+        types.project.update,
+      ],
+    ),
  },
  async mounted () {
    await this.initPage()
@@ -130,15 +168,20 @@ export default {
    this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
      header: 'get_device_info_all/0',
    }))
+    const project = await this.API.project.getAll()
+    this.projectConfigList.length = 0
+    this.projectConfigList.push(...project.data)

-    console.log('project', await api.project.getAll())
+    this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+      header: 'get_running_project/0',
+    }))
  },
 }
 </script>

 <style lang="scss">
  .project {
-    font-size: 12px;
+    font-size: 16px;
  }

  .markup-tables {
@@ -1,25 +1,25 @@
 <template>
  <div>
-    <va-card style="height: 80vh; overflow: auto; display: block;">
+    <va-card style="height: 90vh; overflow: auto; display: block;">
      <template slot="header">
        <va-icon name="fa fa-bluetooth-b mr-3" color="primary"/>
        <h5 class="mt-0 mb-0">PROJECTS</h5>
      </template>
      <div class="flex d-flex m12 xs12 md12 xl12">
        <div>
-          <va-button @click="createProject" icon="fa fa-plus"></va-button>
+          <va-button @click="createProject({ api: API })" icon="fa fa-plus"></va-button>
        </div>
      </div>
      <div>
        <va-tabs v-model="tabValue" style="width: 100%;" grow>
-          <va-tab v-for="title in tabTitles" :key="title">
+          <va-tab v-for="(title, index) in tabTitles" :key="title" @click.native="switchProjectCategory(index)">
            {{ title }}
          </va-tab>
        </va-tabs>
      </div>
      <div class="mt-1">
        <project-manager-list v-if='tabValue == 0'/>
-        <!-- <project-manager-running-table v-if='tabValue == 1'/> -->
+        <running-project-manager-list v-if='tabValue == 1'/>
      </div>
    </va-card>
  </div>
@@ -27,17 +27,24 @@

 <script>
 import { mapActions } from 'vuex'
+import { mapFields } from 'vuex-map-fields'
 import types from '@/store/modules/project/types'
-
 import ProjectManagerList from '@/components/project/manager/ProjectManagerList'
-// import ProjectManagerRunningTable from '@/components/project/manager/table/ProjectManagerRunningTable'
+import RunningProjectManagerList from '@/components/project/manager/RunningProjectManagerList'

 export default {
  name: 'project-manager',
  components: {
    ProjectManagerList,
+    RunningProjectManagerList,
  },
  computed: {
+    ...mapFields('project', [
+      'lockMode',
+      'projectList',
+      'projectConfigList',
+      'runningProjectList',
+    ]),
  },
  data () {
    return {
@@ -46,6 +53,11 @@ export default {
    }
  },
  methods: {
+    switchProjectCategory: function (title) {
+      const projectType = ['projectConfigList', 'runningProjectList']
+      this.projectList = this[projectType[title]]
+      this.lockMode = Boolean(title)
+    },
    ...mapActions('project',
      [
        types.project.create,
@@ -53,6 +65,7 @@ export default {
    ),
  },
  mounted () {
+    this.projectList = this.projectConfigList
  },
 }
 </script>
@@ -1,14 +1,25 @@
 <template>
  <div class="row">
    <div class="flex xs12 lg12 md12">
-      <va-item class="mb-1" v-for="(project, index) in projectList" :key="index" @click="selectProject({index: index})" clickable>
-        <va-item-section>
-          <va-item-label>
+      <va-item class="mb-1" v-for="(project, index) in projectConfigList" :key="index" @click="selectProject({index: index})" clickable>
+        <va-item-section @dblclick.native="switchEdit('name', index)">
+          <div v-if="projectTable.name == index">
+            <va-input
+              v-model="project.name"
+              style="width: 100px;"
+              @blur="switchEdit('name', -1, project)"
+              @keyup.enter="switchEdit('name', -1, project)"
+            />
+          </div>
+          <div v-else>
            {{ project.name }}
-          </va-item-label>
+          </div>
+          <!-- <va-item-label>
+            {{ project.name }}
+          </va-item-label> -->
        </va-item-section>
        <va-item-section side>
-          <va-icon class="fa fa-close" color="danger" @click.native.stop="deleteProject({index: index})"></va-icon>
+          <va-icon class="fa fa-close" color="danger" @click.native.stop="deleteProject({ project: project, index: index, api: API })"></va-icon>
        </va-item-section>
      </va-item>
    </div>
@@ -22,21 +33,29 @@ import types from '@/store/modules/project/types'
 export default {
  name: 'project-manager-list',
  computed: {
-
    ...mapFields('project', [
-      'projectList',
+      'projectConfigList',
    ]),
  },
  data () {
    return {
+      projectTable: {
+        name: -1,
+      },
    }
  },
  methods: {
-
+    switchEdit: function (tag, index, project) {
+      if (this.projectTable[tag] >= 0) {
+        this.projectTable[tag] = -1
+        project && this.API.project.update(project.id, { name: project.name })
+      } else {
+        this.projectTable[tag] = index
+      }
+    },
    ...mapActions('project',
      [
        types.project.select,
-        types.project.save,
        types.project.delete,
      ],
    ),
@@ -0,0 +1,67 @@
+<template>
+  <div class="row">
+    <div class="flex xs12 lg12 md12 sm12">
+      <va-item class="mb-1" v-for="(project, index) in runningProjectList"
+        :key="index" @click="selectProject({index: index})"
+        @mouseenter.native="() => mouse.hover = index"
+        @mouseleave.native="() => mouse.hover = -1"
+      >
+        <va-item-section>
+          <!-- {{ mouse.hover }} {{ index }} -->
+          <p>{{ project.name }} </p>
+        </va-item-section>
+        <va-item-section v-if="project.status === 1" side>
+          <!-- <div v-if="mouse.hover === index">
+            <va-icon class="fa fa-stop-circle-o" ></va-icon>
+          </div> -->
+          <div>
+            <fulfilling-bouncing-circle-spinner
+              :animation-duration="3000"
+              :color="'#6c7fee'"
+              :size="16"
+            ></fulfilling-bouncing-circle-spinner>
+          </div>
+        </va-item-section>
+        <va-item-section v-if="project.status === 2" side>
+          <va-icon class="fa fa-check" ></va-icon>
+        </va-item-section>
+      </va-item>
+    </div>
+  </div>
+</template>
+<script>
+import { mapFields } from 'vuex-map-fields'
+import { mapActions } from 'vuex'
+import types from '@/store/modules/project/types'
+import { FulfillingBouncingCircleSpinner } from 'epic-spinners'
+
+export default {
+  name: 'running-project-manager-list',
+  components: {
+    FulfillingBouncingCircleSpinner,
+  },
+  computed: {
+    ...mapFields('project', [
+      'runningProjectList',
+    ]),
+  },
+  data () {
+    return {
+      mouse: {
+        hover: -1,
+      },
+    }
+  },
+  methods: {
+    ...mapActions('project',
+      [
+        types.project.select,
+        types.project.delete,
+      ],
+    ),
+  },
+  mounted () {
+    console.log(this.runningProjectList)
+  },
+}
+</script>
@@ -1,6 +1,6 @@
 <template>
  <div>
-    <va-card style="height: 80vh; overflow: auto;">
+    <va-card style="height: 90vh; overflow: auto;">
      <project-task-config></project-task-config>
    </va-card>
  </div>
@@ -130,8 +130,8 @@ export default {
      const newAction = this.createAction(actionUUID, this.actionSelect, this.deviceSelect)

      // if device not add in task then add in
-      if (!this.getSelectTask.deviceList.includes(this.deviceSelect)) {
-        this.getSelectTask.deviceList.push(this.deviceSelect)
+      if (!this.getSelectTask.device.includes(this.deviceSelect)) {
+        this.getSelectTask.device.push(this.deviceSelect)
      }

      for (const key in this.conditionObj) {
@@ -30,7 +30,7 @@
            </va-item-label>

            <va-item-label caption>
-              {{ device.mac_address }}
+              {{ device.connectDevice.device_address }}
            </va-item-label>
          </va-item-section>
        </va-item>
@@ -69,23 +69,23 @@ export default {
      if (this.taskSelectKey !== undefined) {
        device.isSelect = event
        device.isSelect.includes(String(this.taskSelectKey)) === true
-          ? this.getSelectTask.deviceList.push(key)
-          : this.getSelectTask.deviceList = this.getSelectTask.deviceList.filter(item => item !== key)
+          ? this.getSelectTask.device.push(key)
+          : this.getSelectTask.device = this.getSelectTask.device.filter(item => item !== key)
      } else {
        // if select all tasks
        if (event.includes('-1')) {
          // check all
          device.isSelect = ['-1', ...Array(this.getSelectProject.task.length).fill().map((_, index) => String(index))]
          for (const task of this.getSelectProject.task) {
-            if (!task.deviceList.includes(key)) {
-              task.deviceList.push(key)
+            if (!task.device.includes(key)) {
+              task.device.push(key)
            }
          }
        } else {
          // uncheck all
          device.isSelect = []
          for (const task of this.getSelectProject.task) {
-            task.deviceList = task.deviceList.filter(item => item !== key)
+            task.device = task.device.filter(item => item !== key)
          }
        }
      }
@@ -6,29 +6,51 @@
      </div>
    </div>
    <div>
-      <elite-parameter-window></elite-parameter-window>
+      <device-parameter-recording
+        :ref="'device_parameter_ref'"
+        :parameter="parameter"
+        :library="'Elite_EDC_1.5'"
+        @setParameter="setParameter"
+        @setParameterWithDebounce="setParameterWithDebounce"
+      />
    </div>
  </div>
 </template>
 <script>
-import { mapFields } from 'vuex-map-fields'
 import newCondition from '@/factories/project/conditionFactory'
-import EliteParameterWindow from '@/components/project/task/config/parameter/EliteParameterWindow'
+import { mapActions, mapGetters } from 'vuex'
+import { mapFields } from 'vuex-map-fields'
+import types from '@/store/modules/project/types'
+import DeviceParameterRecording from '@/components/task/content/parameter/DeviceParameterRecording.vue'
+import _ from 'lodash'
+import configTable from '@/data/config-table/index'

 export default {
  name: 'project-task-config-parameter',
  components: {
-    EliteParameterWindow,
+    DeviceParameterRecording,
  },
  computed: {
+    ...mapGetters('project', [
+      types.task.getSelect,
+      types.task.getParameterSet,
+      types.project.getDevice,
+      types.project.getSelect,
+    ]),
    ...mapFields('project', [
-      'taskSelect',
+      'taskViewPanel',
+      'taskSelectKey',
+      'deviceSelectKey',
    ]),
  },
  data () {
    return {
+      parameter: {},
      conditionList: newCondition(),
      deviceSelected: null,
+      parameterUUID: '',
+      device: null,
+      config: null,
    }
  },
  methods: {
@@ -38,8 +60,54 @@ export default {
    selectCondition: function (condition) {
      condition.select = !condition.select
    },
+    setParameter: function (name, value) {
+      this.parameter = Object.assign({}, this.parameter)
+
+      if (this.parameterUUID === '') {
+        this.parameterUUID = this.GLOBAL.getUUID()
+      }
+      this.setParameterSetTask({
+        parameterSet: {
+          [name]: value,
+          target: this.deviceSelectKey,
+        },
+        parameterKey: this.parameterUUID,
+      })
+    },
+    setParameterWithDebounce: _.debounce(function (name, value) {
+      this.setParameter(name, value)
+    }, 100),
+    resetParameter: function (mode) {
+      // get Device
+      this.device = this.getDeviceProject(this.deviceSelectKey)
+      // get Config
+      this.config = configTable.getConfig(this.device.library.value)
+      // create default parameter
+      const defaultValue = {}
+      for (const key in this.config) {
+        if (this.config[key].defaultValue !== undefined) {
+          defaultValue[key] = this.config[key].defaultValue
+        }
+      }
+      const parameterSet = this.getParameterSetTask(this.taskSelectKey, this.deviceSelectKey)
+      this.parameter = { ...defaultValue }
+      if (parameterSet) {
+        this.parameterUUID = Object.keys(parameterSet)[0]
+        const param = Object.values(parameterSet)[0]
+        const modeOption = this.$refs.device_parameter_ref.workingModeOptions.find(ele => ele.id === param.MODE)
+        this.$refs.device_parameter_ref.workingModeSelectChange(modeOption)
+        this.parameter = Object.assign(this.parameter, Object.values(parameterSet)[0])
+      }
+    },
+    ...mapActions('project',
+      [
+        types.task.setParameterSet,
+      ],
+    ),
  },
  mounted () {
+    // init parameter
+    this.resetParameter()
  },
 }
 </script>
@@ -128,7 +128,7 @@
        />
      </div>

-      <div v-show="[0,1,2,3,4,5,6,13].includes(workingModeSelect.id)">
+      <div v-show="[0,1,2,3,4,5,6,9,13,16].includes(workingModeSelect.id)">
        <p style="font-size: 20px;">Sample Rate ( {{ sampleRateNumber/10 }} sps )</p>
        <resolution-range
          :ref="'sampleRateNumber'"
@@ -259,7 +259,7 @@
        />
      </div>

-      <div v-show="[7, 8, 9].includes(workingModeSelect.id)">
+      <div v-show="[7, 8].includes(workingModeSelect.id)">
        <p style="font-size: 20px;">Resolution ( {{ sampleRateNumber/10 }} sps )</p>
        <resolution-range
          :ref="'sampleRateNumber'"
@@ -1,6 +1,6 @@
 <template>
  <div>
-    <va-card style="height: 80vh; overflow: auto; display: block;">
+    <va-card style="height: 90vh; overflow: auto; display: block;">
      <template slot="header">
        <va-icon name="fa fa-bluetooth-b mr-3" color="primary"/>
        <h5 class="mt-0 mb-0"> {{ getSelectProject ? getSelectProject.name : '' }}</h5>
@@ -11,10 +11,13 @@
      <div v-else>
        <project-menu/>
        <project-table/>
-        <div align="right">
+        <div align="right" v-if="lockMode === false">
          <va-button @click="save">Save</va-button>
          <va-button @click="start">Start</va-button>
        </div>
+        <div align="right" v-if="lockMode === true">
+          <va-button @click="stop">Stop</va-button>
+        </div>
      </div>
    </va-card>
  </div>
@@ -37,6 +40,7 @@ export default {
      types.project.getSelect,
    ]),
    ...mapFields('project', [
+      'lockMode',
      'projectList',
      'projectSelectIndex',
    ]),
@@ -47,9 +51,11 @@ export default {
  },
  methods: {
    start: function () {
-      console.log('finally', this.getSelectProject)
      this.$emit('start_project', this.getSelectProject)
    },
+    stop: function () {
+      this.$emit('stop_project', this.getSelectProject)
+    },
    save: function () {
      this.$emit('save_project', this.getSelectProject)
    },
@@ -84,6 +84,7 @@ export default {

    ...mapFields('project', [
      'deviceConnectList',
+      'projectLibrary',
    ]),
  },
  data () {
@@ -157,6 +158,9 @@ export default {
      } else {
        await this.setDeviceProject({ device: this.device, index: deviceIndex })
      }
+      if (this.device.library !== undefined) {
+        this.projectLibrary = this.device.library.value
+      }

      this.hide()
      this.resetSetting()
@@ -173,6 +177,7 @@ export default {
      this.optionDeviceConnect = this.deviceConnectList
      if (device) {
        this.device = device
+        this.projectLibrary = this.device.library.value
      }
    },

@@ -12,6 +12,7 @@
 </template>

 <script>
+import { mapFields } from 'vuex-map-fields'
 import { mapActions, mapGetters } from 'vuex'
 import types from '@/store/modules/project/types'

@@ -23,6 +24,10 @@ export default {
    ...mapGetters('project', [
      types.project.getSelect,
    ]),
+
+    ...mapFields('project', [
+      'projectLibrary',
+    ]),
  },
  data () {
    return {
@@ -42,6 +47,11 @@ export default {
    ),
  },
  mounted () {
+    for (const device in this.getSelectProject.device) {
+      if (this.projectLibrary === null) {
+        this.projectLibrary = this.getSelectProject.device[device].library.value
+      }
+    }
  },
 }
 </script>
@@ -1,26 +1,33 @@
 <template>
-  <div class="markup-tables flex d-flex sm12 xl12 md12 xs12" id="scro" style="height: 48vh; overflow: auto;">
+  <div class="markup-tables project-table flex d-flex sm12 xl12 md12 xs12" id="scro" style="height: 66vh; overflow: auto;">
    <div class="table-wrapper">
-      <table class="va-table va-table--hoverable">
+      <table class="va-table">
        <thead>
          <tr>
-            <th>
-              <va-checkbox v-model="temp"/>
+            <th v-if="lockMode === false">
+              <va-checkbox
+                v-model="tableColumn.checked"
+                :array-value="'-1'"
+                @input="selectAll($event)"
+              />
            </th>
            <th align="center">order</th>
            <th align="center">name</th>
            <th align="center" @click="openConfig(1)">device</th>
            <th align="center">action and condition</th>
            <th align="center">parameter</th>
-            <th align="center">     </th>
+            <th align="center"></th>
          </tr>
        </thead>

        <tbody>
          <template v-for="(task, taskIndex) in getSelectProject.task">
-            <tr v-if="task.deviceList.length === 0" :key="taskIndex">
-              <td>
-                <va-checkbox v-model="temp"/>
+            <tr v-if="task.device.length === 0" :key="taskIndex" height="80px">
+              <td v-if="lockMode === false">
+                <va-checkbox
+                  v-model="tableColumn.checked"
+                  :array-value="String(taskIndex)"
+                />
              </td>
              <td align="center">
                {{ taskIndex + 1 }}
@@ -37,68 +44,72 @@
              <td align="center">
                <va-button :flat="true" @click="openConfig(4, taskIndex)" small>ParameterSet</va-button>
              </td>
-              <td align="center" style="max-height: 50px; overflow: auto;">
-                <div class="flex d-flex">
-                  <div class="flex-center">
-                    <va-icon class="fa fa-close" @click.native="() => deleteTask({ index: taskIndex})"></va-icon>
-                  </div>
-                </div>
+              <td align="center">
+                <va-icon class="fa fa-close" @click.native="() => deleteTask({ index: taskIndex})"></va-icon>
              </td>
            </tr>
-            <tr v-for="(deviceUUID) in task.deviceList" :key="task.name + deviceUUID">
-              <td>
-                <va-checkbox v-model="temp"/>
+            <tr v-for="(deviceUUID) in task.device" :key="taskIndex + deviceUUID" height="80px">
+              <td v-if="lockMode === false">
+                <va-checkbox
+                  v-model="tableColumn.checked"
+                  :array-value="String(taskIndex)"
+                />
              </td>
              <td align="center">
                {{  taskIndex + 1 }}
              </td>
-              <td align="center">
-                {{ task.name }}
+              <td align="center" @dblclick="switchInput('name', taskIndex)">
+                <div v-if="tableColumn.name == taskIndex && lockMode === false">
+                  <va-input
+                    v-model="task.name"
+                    style="width: 100px;"
+                    @blur="switchInput('name', -1)"
+                    @keyup.enter="switchInput('name', -1)"
+                  />
+                </div>
+                <div v-else>
+                  {{ task.name }}
+                </div>
              </td>
              <td align="center" @click="openConfig(1, taskIndex, deviceUUID)">
                <div >
-                  <span>{{ getDeviceProject(deviceUUID).name }} </span>
+                  <span>{{ getDeviceProject(deviceUUID) && getDeviceProject(deviceUUID).name }}</span>
                </div>
-                <!-- <div class="flex-center">
-                  <va-icon class="fa fa-edit"></va-icon>
-                </div> -->
              </td>
              <td align="center" @click="openConfig(3, taskIndex, deviceUUID)">
-                <div class="flex d-flex">
-                  <div class="flex">
-                    <div v-for="(action, actionKey) in task.action" :key="actionKey">
-                      <div v-if="action.target === deviceUUID">
-                        <div v-for="conditionKey in action.condition" :key="conditionKey">
-                          {{ action.type }} {{ task.condition[conditionKey].type }} {{ task.condition[conditionKey].value }}
-                        </div>
+                <div class="flex">
+                  <div v-for="(action, actionKey) in task.action" :key="actionKey">
+                    <div v-if="action.target === deviceUUID">
+                      <div v-for="conditionKey in action.condition" :key="conditionKey">
+                        {{ action.type }} {{ task.condition[conditionKey].type }} {{ task.condition[conditionKey].value }}
                      </div>
                    </div>
                  </div>
-                  <!-- <div class="flex-center">
-                    <va-icon class="fa fa-edit"></va-icon>
-                  </div> -->
                </div>
              </td>
-              <td align="center" style="max-height: 50px; overflow: auto;" @click="openConfig(4, taskIndex, deviceUUID)">
+              <td align="center" @click="openConfig(4, taskIndex, deviceUUID)">
                <div class="flex d-flex">
                  <div class="flex">
                    <div v-for="(parameterSet, parameterSetKey) in getParameterSetTask(taskIndex, deviceUUID)" :key="parameterSetKey">
                      <div v-for="(parameter, parameterKey) in parameterSet" :key="parameterKey">
-                        <span v-if="parameterKey !== 'target'">{{ parameterTable[parameterKey].alias }}: {{ parameterTable[parameterKey].transFormula(parameter) }} {{ parameterTable[parameterKey].unit[0] }}</span>
+                        <span v-if="parameterKey !== 'target'"> {{ parameterName(parameterKey) }} : {{ parameterValue(parameterKey, parameter) }} </span>
                      </div>
                    </div>
                  </div>
-                  <!-- <div class="flex-center">
-                    <va-icon class="fa fa-edit" ></va-icon>
-                  </div> -->
                </div>
              </td>
-              <td align="center" style="max-height: 50px; overflow: auto;">
-                <div class="flex d-flex">
-                  <div class="flex-center">
-                    <va-icon class="fa fa-close" @click.native="() => deleteTask({ index: taskIndex})"></va-icon>
-                  </div>
-                </div>
+              <td align="center" v-if="lockMode === false">
+                <va-icon class="fa fa-close" @click.native="() => deleteTask({ index: taskIndex})"></va-icon>
+              </td>
+              <td align="center" v-if="lockMode === true">
+                <!-- {{ task.status }} -->
+                <fulfilling-bouncing-circle-spinner
+                  v-if="task.status === 1"
+                  :animation-duration="3000"
+                  :color="'#6c7fee'"
+                  :size="16"
+                ></fulfilling-bouncing-circle-spinner>
+                <va-icon v-if="task.status === 2" class="fa fa-check"></va-icon>
              </td>
            </tr>
          </template>
@@ -111,13 +122,19 @@
 import { mapFields } from 'vuex-map-fields'
 import { mapActions, mapGetters } from 'vuex'
 import types from '@/store/modules/project/types'
-import newEliteZm15Parameter from '@/factories/project/eliteZM15ParmameterFactory'
+import { FulfillingBouncingCircleSpinner } from 'epic-spinners'
+import configTable from '@/data/config-table/index'

 export default {
  name: 'project-table',
  components: {
+    FulfillingBouncingCircleSpinner,
  },
  computed: {
+    config () {
+      return configTable.getConfig(this.projectLibrary)
+    },
+
    ...mapGetters('project', [
      types.project.getSelect,
      types.project.getDevice,
@@ -130,27 +147,69 @@ export default {
      'taskViewPanel',
      'taskSelectKey',
      'deviceSelectKey',
+      'lockMode',
+      'projectLibrary',
    ]),
  },
  data () {
    return {
-      temp: false,
-      parameterTable: newEliteZm15Parameter(),
+      tableColumn: {
+        name: -1,
+        checked: [],
+      },
    }
  },
  methods: {
+    switchInput: function (tag, index) {
+      this.tableColumn[tag] >= 0
+        ? this.tableColumn[tag] = -1
+        : this.tableColumn[tag] = index
+    },
+    selectAll: function (selectedArray) {
+      const totalRange = [...Array(this.getSelectProject.task.length).keys()].map(idx => String(idx))
+      selectedArray.includes('-1')
+        ? (() => {
+          selectedArray.push(...totalRange)
+          selectedArray = [...new Set(selectedArray)]
+        })()
+        : selectedArray.length = 0
+    },
    openConfig (type, taskIndex, deviceKey) {
      console.log(type, taskIndex, deviceKey, this.taskViewPanel.type, this.taskSelectKey, this.deviceSelectKey)
-      if (this.taskViewPanel.type === type && this.taskSelectKey === taskIndex && this.deviceSelectKey === deviceKey) {
-        this.taskSelectKey = ''
-        this.taskViewPanel.type = -1
-        this.taskViewPanel.show = false
-        this.deviceSelectKey = ''
-      } else {
-        this.taskSelectKey = taskIndex
-        this.taskViewPanel.type = type
-        this.taskViewPanel.show = true
-        this.deviceSelectKey = deviceKey
+      if (!this.lockMode) {
+        if (this.taskViewPanel.type === type && this.taskSelectKey === taskIndex && this.deviceSelectKey === deviceKey) {
+          this.taskSelectKey = ''
+          this.taskViewPanel.type = -1
+          this.taskViewPanel.show = false
+          this.deviceSelectKey = ''
+        } else {
+          this.taskSelectKey = taskIndex
+          this.taskViewPanel.type = type
+          this.taskViewPanel.show = true
+          this.deviceSelectKey = deviceKey
+        }
+      }
+    },
+    parameterName (name) {
+      if (name === 'MODE') {
+        return 'Mode'
+      }
+      if (typeof this.config[name].showName === 'function') {
+        return this.config[name].showName()
+      }
+      return this.config[name].showName
+    },
+    parameterValue (name, value) {
+      if (name === 'MODE') {
+        return this.config.MODE[value].name
+      }
+      if (this.config[name].type === 'number') {
+        const scale = this.config[name].unit[this.config[name].defaultUnit]
+        return `${this.config[name].outputReadabilityData(value, scale)} ${this.config[name].defaultUnit}`
+      } else if (this.config[name].type === 'array') {
+        return `${this.config[name].outputReadabilityData(value)}`
+      } else if (this.config[name].type === 'none') {
+        return ''
      }
    },
    ...mapActions('project', [
@@ -164,12 +223,34 @@ export default {

 <style lang="scss">
  .markup-tables {
+    width: 100%;
+
    .table-wrapper {
      overflow: auto;
    }
+  }

-    .va-table {
-      width: 100%;
+  .project-table {
+    td {
+      padding: 0;
+      margin: 0;
+      max-width: fit-content;
+      max-height: 100px;
+      overflow: auto;
+      white-space: nowrap;
+      font-size: 1.1rem;
+    }
+
+    th {
+      padding: 0 0 0 0;
+      margin: 0;
+      font-size: 1rem;
+    }
+
+    div {
+      padding: 0;
+      margin: 0;
    }
  }
+
 </style>
@@ -29,7 +29,11 @@
                {{ controller.mac_address.toUpperCase() }}
              </va-item-label>
              <va-item-label>
-                Build Version : #
+                Frontend Version : #
+                {{ commit }}
+              </va-item-label>
+              <va-item-label>
+                Backend Version : #
                {{ controller.software_version }}
              </va-item-label>
              <va-item-label>
@@ -79,6 +83,8 @@ export default {
  },
  data () {
    return {
+      // eslint-disable-next-line no-undef
+      commit: COMMIT,
    }
  },
  computed: {
@@ -1,6 +1,5 @@
 <template>
  <div class="task-content">
-
    <va-modal
      v-model="showShutdownModal"
      size="small"
@@ -23,12 +22,15 @@
    <div class="row row-equal">
      <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">
-            <task-formula :ref="'formula_ref'" @add="addFormula($event)" @remove="removeFormula($event)" class="pa-0" />
+            <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">
+            <task-devices-new :ref="'devices_ref'" @add="addDevice($event)" @remove="removeDevice($event)" @refreshSetting="refreshChartSetting($event)" class="pa-0" />
+          </div>
+          <div class="flex sm12 xl12 md12 xs12" v-if="developerMode">
+            <task-formula :ref="'formula_ref'" @add="addFormula($event)" @remove="removeFormula($event)" class="pa-0" />
+          </div>
        </div>

      </div>
@@ -57,15 +59,15 @@
                <va-button class="no-dark-style-va-button" color="danger" target="_blank" @click="stopAllClick()" small>
                  STOP ALL
                </va-button>
-                <va-button class="no-dark-style-va-button" color="primary" target="_blank" @click.stop="addChart()" small>
+                <va-button class="no-dark-style-va-button" color="primary" target="_blank" @click.stop="addChart(false)" small>
                  ADD CHART
                </va-button>
              </va-card>
            </div>

-            <div :key="chartKey">
+            <div :key="taskContentChartPanelKey">
              <div
-                v-for="chart in chartDataAll"
+                v-for="chart in chartData"
                :key="chart.chartID"
              >
                <canvas-chart
@@ -96,13 +98,16 @@

 <script>
 import { dataStreamBuffer } from '../../../data/task/DataStreamBuffer'
-import { chartData } from '../../../data/task/ChartsManagement'
 import { taskInfo } from '../../../data/task/TaskInfo'
 import CanvasChart from './chart/CanvasChart'
-import TaskDevices from './controller/TaskDevices'
+// import TaskDevices from './controller/TaskDevices'
+import TaskDevicesNew from './controller/TaskDevicesNew'
 // import api from '@/data/api'
 import { mapFields } from 'vuex-map-fields'
-// import TaskFormula from './formula/TaskFormula'
+import { mapActions } from 'vuex'
+import taskTypes from '@/store/modules/task/content/types'
+import TaskFormula from './formula/TaskFormula'
+import { v4 as uuid } from 'uuid'

 // TODO change chart data tag format

@@ -110,15 +115,20 @@ export default {
  name: 'TaskContent',
  components: {
    CanvasChart,
-    TaskDevices,
-    // TaskFormula,
+    // TaskDevices,
+    TaskDevicesNew,
+    TaskFormula,
  },
  computed: {
    ...mapFields('taskContent', [
      'deviceList',
+      'chartData',
+      'taskContentChartPanelKey',
+      'taskContentChartNumber',
+      'deviceListNew',
    ]),
    ...mapFields('', [
-      'developer_mode',
+      'developerMode',
    ]),
  },
  data () {
@@ -128,11 +138,7 @@ export default {
      showRemoveChartModal: false,
      // refresh timer
      dataRefreshTimer: null,
-      // charts data
-      chartDataAll: chartData.getAllChartsData(),
-      // chart refresh key
-      chartKey: 0,
-      chartNumber: taskInfo.getTaskInfo().chartList.length,
+
      selectChartID: null,
      showDeviceSetting: true,
      chartAreaClass: ['flex', 'xs12', 'sm12', 'md12', 'xl8', 'pa-0'],
@@ -141,82 +147,67 @@ export default {
  },
  mqtt: {
    async '+/get_device_info_all/+' (data, topic) {
-      await taskInfo.deviceInfo(String.fromCharCode.apply(null, data), this.deviceList)
+      // console.log('get_device_info_all', String.fromCharCode.apply(null, data))
+      this.deviceListNew = JSON.parse(String.fromCharCode.apply(null, data)).data
+
+      // console.log(this.deviceListNew)
+      // await taskInfo.deviceInfo(String.fromCharCode.apply(null, data), this.deviceList)
+      // console.log('this.deviceList 0', this.deviceList)
      // this.refreshDevicesWindow()
+      // console.log('this.$refs.devices_ref', this.$refs.devices_ref)
      if (this.$refs.devices_ref != null) {
        await this.$refs.devices_ref.loadingDone()
      }
+      await this.taskContentChartInitCustomizedFromCache({ controllerID: taskInfo.getTaskInfo().controllerID })
      this.getParmDone = true
    },
    async '+/get_device_info/+' (data, topic) {
-      await taskInfo.deviceInfo(String.fromCharCode.apply(null, data), this.deviceList)
-      this.refreshDevicesWindow()
-      this.checkStiStatus()
+      // const dataObj = JSON.parse(String.fromCharCode.apply(null, data))
+      // await taskInfo.deviceInfo(dataObj, this.deviceList)
+      // this.refreshDevicesWindow()
+      // this.checkStiStatus()
+
+      // const result = await this.taskContentChartDefaultChartGenerator({
+      //   _deviceList: this.deviceList,
+      //   _itemID: taskInfo.getDeviceIDByRaw(dataObj.data.device_id),
+      //   _chartID: null,
+      //   _type: 'device',
+      // })
+      // if (result) {
+      //   taskInfo.deviceStart(dataObj.data.device_id, this.deviceList)
+      // }
    },
    async '+/device_parameter/+' (data, topic) {
-      await taskInfo.deviceParameter(String.fromCharCode.apply(null, data))
-      this.refreshDevicesWindow()
+      const res = JSON.parse(String.fromCharCode.apply(null, data))
+      const device = this.deviceListNew.find((ele) => ele.mac_address === res.device)
+
+      for (const key of Object.keys(res.data)) {
+        device.configuration[key] = res.data[key]
+      }
+      // 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()
+      const res = JSON.parse(String.fromCharCode.apply(null, data))
+      const device = this.deviceListNew.find((ele) => ele.mac_address === res.device)
+
+      for (const key of Object.keys(res.data)) {
+        device.configuration[key] = res.data[key]
+      }
    },
    async '+/hardware_device/+' (data, topic) {
      await taskInfo.deviceInfo(String.fromCharCode.apply(null, data), this.deviceList)
-      // 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()
+        await this.taskContentChartInitCustomizedFromCache({ controllerID: taskInfo.getTaskInfo().controllerID })
      }
    },
    // listen datastream [ topic: controllerID/data_server/device_data_stream/deviceID/channel ]
    async '+/data_server/device_data_stream/+/+' (data, topic) {
      const topicSplit = topic.split('/')
-      if (this.getParmDone & !taskInfo.getDeviceInfoByRawID(parseInt(topicSplit[3])).info.isSync) {
-        if (chartData.defaultChartGenerator(this.deviceList, taskInfo.getDeviceIDByRaw(parseInt(topicSplit[3])), null, 'device')) {
-          taskInfo.deviceStart(parseInt(topicSplit[3]), this.deviceList)
-        }
-      }
-      dataStreamBuffer.into(String.fromCharCode.apply(null, data), parseInt(topicSplit[3]), (parseInt(topicSplit[4]) + 1))
+      const deviceID = parseInt(topicSplit[3])
+      const channel = parseInt(topicSplit[4])
+      dataStreamBuffer.into(String.fromCharCode.apply(null, data), deviceID, (channel + 1))
    },
    '+/device_save_path/+' (data, topic) {
      taskInfo.deviceSavePath(String.fromCharCode.apply(null, data))
@@ -238,6 +229,7 @@ export default {
    },
    async '+/broadcast' (data, topic) {
      const mes = String.fromCharCode.apply(null, data).split(':')
+      let device
      // let content
      switch (mes[0]) {
        case 'state':
@@ -268,18 +260,32 @@ export default {
          this.showShutdownModal = true
          break
        case 'start':
-          if (!taskInfo.getDeviceInfoByRawID(parseInt(parseInt(mes[1]))).info.isSync) {
-            taskInfo.deviceStart(parseInt(mes[1]), this.deviceList)
-            if (chartData.defaultChartGenerator(this.deviceList, taskInfo.getDeviceIDByRaw(parseInt(parseInt(mes[1]))), null, 'device')) {
-              taskInfo.deviceStart(parseInt(parseInt(mes[1])), this.deviceList)
-            }
+          // register default chart again
+          await this.taskContentChartDefaultChartGenerator({
+            _deviceList: this.deviceListNew,
+            _itemID: parseInt(mes[1]),
+            _chartID: null,
+            _type: 'device',
+          })
+
+          // remove mapping ID chart series data
+          for (const chart in this.chartData) {
+            this.taskContentChartResetSeriesData({
+              chartID: chart,
+              mappingID: mes[1],
+            })
          }
+
+          device = this.deviceListNew.find((ele) => ele.memory_board === parseInt(mes[1]))
+          device.status = 1
          break
        case 'stop':
          if (mes[1] === 'all') {
            return false
          }
-          taskInfo.deviceStop(parseInt(mes[1]), this.deviceList)
+          device = this.deviceListNew.find((ele) => ele.memory_board === parseInt(mes[1]))
+          device.status = 0
+          await dataStreamBuffer.removeByDevice(parseInt(mes[1]))
          break
        case 'device_timeout':
          this.pageToast('The device [' + taskInfo.getDeviceIDByRaw(parseInt(mes[1])) + '] is timeout, please check its status or parameters.')
@@ -295,7 +301,6 @@ export default {
        default:
          break
      }
-      //  console.log(String.fromCharCode.apply(null, data), topic)
    },
  },
  methods: {
@@ -333,20 +338,12 @@ export default {
      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',
-      // }))
      console.log(taskInfo.getTaskInfo().controllerID)
      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
        header: 'get_device_info_all/0',
      }))
-      await taskInfo.updateChartInfo()
-      this.chartNumber = taskInfo.getTaskInfo().chartNumber
+
+      this.taskContentChartNumber = Object.keys(this.chartData).length
    },
    pageToast: function (mes) {
      this.showToast(
@@ -359,9 +356,20 @@ export default {
      )
    },
    refreshData: function () {
-      // TODO don't need to refresh chart with stop status
-      for (const chart in this.chartDataAll) {
-        chartData.refresh(parseInt(chart))
+      for (const chart in this.chartData) {
+        // find each chart mappingID with device memory_board
+        const device = this.deviceListNew.find(ele => String(ele.memory_board) === String(this.chartData[chart].mappingID))
+        // device not found continue
+        if (device === undefined) {
+          continue
+        }
+        // device is running refresh chart
+        if (device.status === 1 && this.chartData[chart].captured !== true) {
+          this.taskContentChartRefreshData({
+            chartID: chart,
+            deviceList: this.deviceListNew,
+          })
+        }
      }
    },
    refreshDevicesWindow: function () {
@@ -369,24 +377,22 @@ export default {
      if (this.$refs.devices_ref != null) {
        this.$refs.devices_ref.refresh()
      }
-      // api.task.update({
-      //   device_config: taskInfo.getTaskInfo().deviceList,
-      // })
    },
-    addChart: async function () {
-      const defaultID = {}
-      const update = async () => {
-        for (const chart in chartData.getAllChartsData()) {
-          defaultID[chart] = chartData.getAllChartsData()[chart].mappingID
-        }
-        chartData.init(this.chartNumber, 4000, 1, 1)
-        this.chartNumber++
-        this.chartKey++
-      }
-      await update()
+    addChart: async function (isDefault) {
+      // create chartID with uuid instead of length of chart list
+      const newChart = await this.taskContentChartAdd({
+        chartID: uuid(),
+        maxDots: 5000,
+        gridLength: 1,
+      })

-      for (const chart in chartData.getAllChartsData()) {
-        chartData.getAllChartsData()[chart].mappingID = defaultID[chart]
+      // createby default
+      if (isDefault === true) {
+        newChart.createdBy = 'default'
+      }
+      // createby manaul
+      if (isDefault === false) {
+        newChart.createdBy = 'manual'
      }

      if (this.$refs.chart_ref != null) {
@@ -394,59 +400,54 @@ export default {
          ref.refreshMappingSelect()
        })
      }
+      this.taskContentChartRefreshPanel()
+      // save chart config to web storage
+      if (!isDefault) {
+        await this.taskContentChartSaveToCache({ controllerID: taskInfo.getTaskInfo().controllerID })
+      }
      this.pageToast('The chart has been added.')

-      return this.chartNumber - 1
-      // chartData.updateGridList(0, 4)
+      return newChart.chartID
    },
    refreshChartSetting: async function () {
-      const defaultID = {}
-      const update = async () => {
-        for (const chart in chartData.getAllChartsData()) {
-          defaultID[chart] = chartData.getAllChartsData()[chart].mappingID
-        }
-        this.chartKey++
-      }
-      await update()
-
-      for (const chart in chartData.getAllChartsData()) {
-        chartData.getAllChartsData()[chart].mappingID = defaultID[chart]
-      }
-
      if (this.$refs.chart_ref != null) {
        this.$refs.chart_ref.forEach(ref => {
          ref.refreshMappingSelect()
        })
      }
+      this.taskContentChartRefreshPanel()
    },
    initChart: function (chartID) {
-      chartData.reset(chartID)
+      this.taskContentChartReset({
+        chartID: chartID,
+        mappingID: null,
+        cardName: null,
+      })
      this.pageToast('The chart has been Initialized.')
    },
    removeChartCheck: function (chartID) {
      this.selectChartID = chartID
      this.showRemoveChartModal = true
    },
-    removeChart: async function (chartID) {
+    removeChart: async function (chartID, saveCache = true) {
      if (chartID == null) {
        chartID = this.selectChartID
      }
      dataStreamBuffer.removeByChart(chartID)
-      if (chartData.getAllChartsData()[chartID] != null) {
+      if (this.chartData[chartID] != null) {
        const defaultID = {}
        const update = async () => {
-          for (const chart in chartData.getAllChartsData()) {
+          for (const chart in this.chartData) {
            if (chart !== chartID) {
-              defaultID[chart] = chartData.getAllChartsData()[chart].mappingID
+              defaultID[chart] = this.chartData[chart].mappingID
            }
          }
-          delete chartData.getAllChartsData()[chartID]
-          this.chartKey++
+          delete this.chartData[chartID]
        }
        await update()

-        for (const chart in chartData.getAllChartsData()) {
-          chartData.getAllChartsData()[chart].mappingID = defaultID[chart]
+        for (const chart in this.chartData) {
+          this.chartData[chart].mappingID = defaultID[chart]
        }

        if (this.$refs.chart_ref != null) {
@@ -455,6 +456,9 @@ export default {
          })
        }
      }
+      if (saveCache === true) {
+        await this.taskContentChartSaveToCache({ controllerID: taskInfo.getTaskInfo().controllerID })
+      }
      this.pageToast('The chart has been removed.')
    },
    showDeviceSettingClick: function () {
@@ -469,14 +473,14 @@ export default {
    },
    addMappingChart: async function (deviceID) {
      // if have chart with device ID
-      for (const chart in chartData.getAllChartsData()) {
-        if (chartData.getAllChartsData()[chart].mappingID === deviceID) {
+      for (const chart in this.chartData) {
+        if (this.chartData[chart].mappingID === deviceID) {
          return false
        }
      }
-      const chart = await this.addChart()
+      const chart = await this.addChart(true)
      await this.$nextTick(async () => {
-        chartData.getAllChartsData()[chart].mappingID = deviceID
+        this.chartData[chart].mappingID = deviceID
        if (this.$refs.chart_ref != null) {
          this.$refs.chart_ref.forEach(ref => {
            ref.refreshMappingSelect()
@@ -485,23 +489,24 @@ export default {
      })
      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,
-      // })
+    addDevice: async function (deviceID, memoryBoardID) {
+      // subscribe datastream when add device
+      this.mqttSub(`${taskInfo.getTaskInfo().controllerID}/data_server/device_data_stream/${deviceID}/+`)
+      // add mapping chart
+      await this.addMappingChart(deviceID)
+      // register default chart
+      await this.taskContentChartDefaultChartGenerator({
+        _deviceList: this.deviceListNew,
+        _itemID: deviceID,
+        _chartID: null,
+        _type: 'device',
+      })
      this.pageToast('The device [' + deviceID + '] has been registered.')
    },
    removeDevice: function (deviceID) {
-      this.mqttUnSub(taskInfo.getTaskInfo().controllerID + '/data_server/device_data_stream/' + taskInfo.getRawDeviceID(deviceID) + '/+')
-      for (const chart in chartData.getAllChartsData()) {
-        if (chartData.getAllChartsData()[chart].mappingID === deviceID) {
+      this.mqttUnSub(taskInfo.getTaskInfo().controllerID + '/data_server/device_data_stream/' + deviceID + '/+')
+      for (const chart in this.chartData) {
+        if (this.chartData[chart].mappingID === deviceID) {
          dataStreamBuffer.removeByChart(chart)
          this.removeChart(chart)
        }
@@ -509,9 +514,9 @@ export default {
      this.pageToast('The device [' + deviceID + '] has been removed.')
    },
    addFormula: async function (formulaID) {
-      const chart = await this.addChart()
+      const chart = await this.addChart(true)
      await this.$nextTick(async () => {
-        chartData.getAllChartsData()[chart].mappingID = formulaID
+        this.chartData[chart].mappingID = formulaID
        if (this.$refs.chart_ref != null) {
          this.$refs.chart_ref.forEach(ref => {
            ref.refreshMappingSelect()
@@ -521,8 +526,8 @@ export default {
      this.pageToast('The formula [' + formulaID + '] has been registered.')
    },
    removeFormula: function (formulaID) {
-      for (const chart in chartData.getAllChartsData()) {
-        if (chartData.getAllChartsData()[chart].mappingID === formulaID) {
+      for (const chart in this.chartData) {
+        if (this.chartData[chart].mappingID === formulaID) {
          dataStreamBuffer.removeByChart(chart)
          this.removeChart(chart)
        }
@@ -530,7 +535,7 @@ export default {
      this.pageToast('The formula [' + formulaID + '] has been removed.')
    },
    startAllClick: async function () {
-      for (const device of this.deviceList) {
+      for (const device of this.deviceListNew) {
        if (this.$refs.devices_ref === undefined) {
          this.startDevice(device)
        } else {
@@ -541,31 +546,23 @@ export default {
      this.pageToast('The all devices have been started')
    },
    startDevice: async function (device) {
-      chartData.defaultChartGenerator(this.deviceList, 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.stopping = false
-        device.isSync = true
-        // this.$emit('refreshSetting')
-        // ### show device info
-        //  console.log(taskInfo.getDeviceInfo(device.id))
+      await this.taskContentChartDefaultChartGenerator({
+        _deviceList: this.deviceList,
+        _itemID: device.id,
+        _chartID: null,
+        _type: 'device',
+      })
+      if (device.status === 0) {
+        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+          header: 'device_instruction/0',
+          device: device.memory_board,
+          instruction: 'start',
+        }))
+        device.status = 1
      }
    },
    stopAllClick: function () {
-      for (const device of this.deviceList) {
+      for (const device of this.deviceListNew) {
        if (this.$refs.devices_ref === undefined) {
          this.stopDevice(device)
        } else {
@@ -575,22 +572,14 @@ export default {
      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.stopping = true
+      dataStreamBuffer.removeByDevice(device.id)
+      if (device.status === 1) {
+        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+          header: 'device_instruction/0',
+          device: device.memory_board,
+          instruction: 'interrupt',
+        }))
+        device.status = 0
      }
    },
    checkStiStatus: function () {
@@ -601,35 +590,52 @@ export default {
        path: '/',
      })
    },
+    switchMode: function () {
+      this.developerMode = !this.developerMode
+    },
+
+    ...mapActions('taskContent', [
+      taskTypes.chart.initCustomizedFromCache,
+      taskTypes.chart.saveToCache,
+      taskTypes.chart.add,
+      taskTypes.chart.defaultChartGenerator,
+      taskTypes.chart.reset,
+      taskTypes.chart.resetSeriesData,
+      taskTypes.chart.refreshData,
+      taskTypes.chart.refreshChart,
+      taskTypes.chart.refreshPanel,
+    ]),
  },
  watch: {
  },
  async mounted () {
    const devMode = this.$route.params.mode
    if (devMode === 'dev') {
-      this.developer_mode = true
+      this.developerMode = true
    }

    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, 100)
+    this.dataRefreshTimer = setInterval(this.refreshData, 1000)

-    // const _this = this
-    // window.onresize = function () { // define the event of window size changing
-    //   // _this.screenWidth = document.documentElement.clientWidth
-    //   _this.screenHeight = document.documentElement.clientHeight
-    // }
+    var switchModeHander = function (switchMode, e) {
+      if (e.shiftKey && e.metaKey && e.keyCode === 83) {
+        switchMode()
+      }
+      if (e.shiftKey && e.ctrlKey && e.keyCode === 83) {
+        switchMode()
+      }
+    }
+
+    // eslint-disable-next-line no-undef
+    window.addEventListener('keydown', switchModeHander.bind(_, this.switchMode))
  },
  destroyed () {
    taskInfo.destroyed(this.deviceList)
-    for (const chart in chartData.getAllChartsData()) {
-      this.removeChart(chart)
+    for (const chart in this.chartData) {
+      this.removeChart(chart, false)
    }
    clearInterval(this.dataRefreshTimer)
    this.pageMqttUnSub(taskInfo.getTaskInfo().controllerID)
@@ -60,7 +60,7 @@

            <div :key="chartKey">
              <div
-                v-for="chart in chartDataAll"
+                v-for="chart in chartData"
                :key="chart.chartID"
              >
                <canvas-chart
@@ -93,33 +93,29 @@

 <script>
 import { dataStreamBuffer } from '../../../data/task/DataStreamBuffer'
-import { chartData } from '../../../data/task/ChartsManagement'
 import { taskInfo } from '../../../data/task/TaskInfo'
 import CanvasChart from './chart/CanvasChart'
 import TaskContentModal from './TaskContentModal.vue'
 import { mapFields } from 'vuex-map-fields'
 import TaskDevicesGM from './controller/neulive-gimer/TaskDevicesGM.vue'
-// import api from '../../../data/api'
-// import TaskFormula from './formula/TaskFormula'
+import { mapActions } from 'vuex'
+import taskTypes from '@/store/modules/task/content/types'

 // TODO change chart data tag format

 export default {
-  name: 'TaskContent',
+  name: 'TaskContentGM',
  components: {
    CanvasChart,
    TaskDevicesGM,
    TaskContentModal,
-    // TaskFormula,
  },
-  // async created () {
-  //   await taskInfo.updateTaskInfo(this.$route.params.taskID)
-  // },
  computed: {
    ...mapFields('taskContent', [
      'deviceList',
      'showTaskModal',
      'taskModalText',
+      'chartData',
    ]),
  },
  data () {
@@ -129,11 +125,9 @@ export default {
      showRemoveChartModal: false,
      // refresh timer
      dataRefreshTimer: null,
-      // charts data
-      chartDataAll: chartData.getAllChartsData(),
      // chart refresh key
      chartKey: 0,
-      chartNumber: taskInfo.getTaskInfo().chartList.length,
+      chartNumber: 0,
      selectChartID: null,
      showDeviceSetting: true,
      chartAreaClass: ['flex', 'xs12', 'sm12', 'md12', 'xl8', 'pa-0'],
@@ -169,7 +163,13 @@ export default {
    async '+/data_server/device_data_stream/+/+' (data, topic) {
      const topicSplit = topic.split('/')
      if (this.getParmDone & !taskInfo.getDeviceInfoByRawID(parseInt(topicSplit[3])).info.isSync) {
-        if (chartData.defaultChartGenerator(this.deviceList, taskInfo.getDeviceIDByRaw(parseInt(topicSplit[3])), null, 'device')) {
+        const result = await this.taskContentChartDefaultChartGenerator({
+          _deviceList: this.deviceList,
+          _itemID: taskInfo.getDeviceIDByRaw(parseInt(topicSplit[3])),
+          _chartID: null,
+          _type: 'device',
+        })
+        if (result) {
          taskInfo.deviceStart(parseInt(topicSplit[3]), this.deviceList)
        }
      }
@@ -215,10 +215,16 @@ export default {
          this.showShutdownModal = true
          break
        case 'start':
-          if (!taskInfo.getDeviceInfoByRawID(parseInt(parseInt(mes[1]))).info.isSync) {
+          if (!taskInfo.getDeviceInfoByRawID(parseInt(mes[1])).info.isSync) {
            taskInfo.deviceStart(parseInt(mes[1]), this.deviceList)
-            if (chartData.defaultChartGenerator(this.deviceList, taskInfo.getDeviceIDByRaw(parseInt(parseInt(mes[1]))), null, 'device')) {
-              taskInfo.deviceStart(parseInt(parseInt(mes[1])), this.deviceList)
+            const result = await this.taskContentChartDefaultChartGenerator({
+              _deviceList: this.deviceList,
+              _itemID: taskInfo.getDeviceIDByRaw(parseInt(mes[1])),
+              _chartID: null,
+              _type: 'device',
+            })
+            if (result) {
+              taskInfo.deviceStart(parseInt(mes[1]), this.deviceList)
            }
          }
          break
@@ -289,8 +295,8 @@ export default {
      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
        header: 'hardware_device/0',
      }))
-      await taskInfo.updateChartInfo()
-      this.chartNumber = taskInfo.getTaskInfo().chartNumber
+
+      this.chartNumber = Object.keys(this.chartData).length
    },
    pageToast: function (mes) {
      this.showToast(
@@ -304,8 +310,10 @@ export default {
    },
    refreshData: function () {
      // TODO don't need to refresh chart with stop status
-      for (const chart in this.chartDataAll) {
-        chartData.refresh(parseInt(chart))
+      for (const chart in this.chartData) {
+        this.taskContentChartRefreshData({
+          chartID: parseInt(chart),
+        })
      }
    },
    refreshDevicesWindow: function () {
@@ -320,17 +328,21 @@ export default {
    addChart: async function () {
      const defaultID = {}
      const update = async () => {
-        for (const chart in chartData.getAllChartsData()) {
-          defaultID[chart] = chartData.getAllChartsData()[chart].mappingID
+        for (const chart in this.chartData) {
+          defaultID[chart] = this.chartData[chart].mappingID
        }
-        chartData.init(this.chartNumber, 4000, 1, 1)
+        this.taskContentChartAdd({
+          chartID: this.chartNumber,
+          maxDots: 4000,
+          gridLength: 1,
+        })
        this.chartNumber++
        this.chartKey++
      }
      await update()

-      for (const chart in chartData.getAllChartsData()) {
-        chartData.getAllChartsData()[chart].mappingID = defaultID[chart]
+      for (const chart in this.chartData) {
+        this.chartData[chart].mappingID = defaultID[chart]
      }

      if (this.$refs.chart_ref != null) {
@@ -341,20 +353,19 @@ export default {
      // this.pageToast('The chart has been added.')

      return this.chartNumber - 1
-      // chartData.updateGridList(0, 4)
    },
    refreshChartSetting: async function () {
      const defaultID = {}
      const update = async () => {
-        for (const chart in chartData.getAllChartsData()) {
-          defaultID[chart] = chartData.getAllChartsData()[chart].mappingID
+        for (const chart in this.chartData) {
+          defaultID[chart] = this.chartData[chart].mappingID
        }
        this.chartKey++
      }
      await update()

-      for (const chart in chartData.getAllChartsData()) {
-        chartData.getAllChartsData()[chart].mappingID = defaultID[chart]
+      for (const chart in this.chartData) {
+        this.chartData[chart].mappingID = defaultID[chart]
      }

      if (this.$refs.chart_ref != null) {
@@ -364,7 +375,11 @@ export default {
      }
    },
    initChart: function (chartID) {
-      chartData.reset(chartID)
+      this.taskContentChartReset({
+        chartID: chartID,
+        mappingID: null,
+        cardName: null,
+      })
      // this.pageToast('The chart has been Initialized.')
    },
    removeChartCheck: function (chartID) {
@@ -376,21 +391,21 @@ export default {
        chartID = this.selectChartID
      }
      dataStreamBuffer.removeByChart(chartID)
-      if (chartData.getAllChartsData()[chartID] != null) {
+      if (this.chartData[chartID] != null) {
        const defaultID = {}
        const update = async () => {
-          for (const chart in chartData.getAllChartsData()) {
+          for (const chart in this.chartData) {
            if (chart !== chartID) {
-              defaultID[chart] = chartData.getAllChartsData()[chart].mappingID
+              defaultID[chart] = this.chartData[chart].mappingID
            }
          }
-          delete chartData.getAllChartsData()[chartID]
+          delete this.chartData[chartID]
          this.chartKey++
        }
        await update()

-        for (const chart in chartData.getAllChartsData()) {
-          chartData.getAllChartsData()[chart].mappingID = defaultID[chart]
+        for (const chart in this.chartData) {
+          this.chartData[chart].mappingID = defaultID[chart]
        }

        if (this.$refs.chart_ref != null) {
@@ -413,14 +428,14 @@ export default {
    },
    addMappingChart: async function (deviceID) {
      // if have chart with device ID
-      for (const chart in chartData.getAllChartsData()) {
-        if (chartData.getAllChartsData()[chart].mappingID === deviceID) {
+      for (const chart in this.chartData) {
+        if (this.chartData[chart].mappingID === deviceID) {
          return false
        }
      }
      const chart = await this.addChart()
      await this.$nextTick(async () => {
-        chartData.getAllChartsData()[chart].mappingID = deviceID
+        this.chartData[chart].mappingID = deviceID
        if (this.$refs.chart_ref != null) {
          this.$refs.chart_ref.forEach(ref => {
            ref.refreshMappingSelect()
@@ -432,20 +447,12 @@ export default {
    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) {
      this.mqttUnSub(taskInfo.getTaskInfo().controllerID + '/data_server/device_data_stream/' + taskInfo.getRawDeviceID(deviceID) + '/+')
-      for (const chart in chartData.getAllChartsData()) {
-        if (chartData.getAllChartsData()[chart].mappingID === deviceID) {
+      for (const chart in this.chartData) {
+        if (this.chartData[chart].mappingID === deviceID) {
          dataStreamBuffer.removeByChart(chart)
          this.removeChart(chart)
        }
@@ -455,7 +462,7 @@ export default {
    addFormula: async function (formulaID) {
      const chart = await this.addChart()
      await this.$nextTick(async () => {
-        chartData.getAllChartsData()[chart].mappingID = formulaID
+        this.chartData[chart].mappingID = formulaID
        if (this.$refs.chart_ref != null) {
          this.$refs.chart_ref.forEach(ref => {
            ref.refreshMappingSelect()
@@ -465,8 +472,8 @@ export default {
      this.pageToast('The formula [' + formulaID + '] has been registered.')
    },
    removeFormula: function (formulaID) {
-      for (const chart in chartData.getAllChartsData()) {
-        if (chartData.getAllChartsData()[chart].mappingID === formulaID) {
+      for (const chart in this.chartData) {
+        if (this.chartData[chart].mappingID === formulaID) {
          dataStreamBuffer.removeByChart(chart)
          this.removeChart(chart)
        }
@@ -485,7 +492,12 @@ export default {
      this.pageToast('The all devices have been started')
    },
    startDevice: async function (device) {
-      chartData.defaultChartGenerator(this.deviceList, device.id, null, 'device')
+      await this.taskContentChartDefaultChartGenerator({
+        _deviceList: this.deviceList,
+        _itemID: device.id,
+        _chartID: null,
+        _type: '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({
@@ -542,6 +554,13 @@ export default {
        path: '/',
      })
    },
+
+    ...mapActions('taskContent', [
+      taskTypes.chart.add,
+      taskTypes.chart.refreshData,
+      taskTypes.chart.defaultChartGenerator,
+      taskTypes.chart.reset,
+    ]),
  },
  watch: {
  },
@@ -564,7 +583,7 @@ export default {
  },
  destroyed () {
    taskInfo.destroyed(this.deviceList)
-    for (const chart in chartData.getAllChartsData()) {
+    for (const chart in this.chartData) {
      this.removeChart(chart)
    }
    clearInterval(this.dataRefreshTimer)
@@ -4,7 +4,7 @@
      <template slot="header">
        <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">
-            <h5 class="mt-0 mb-0"><va-icon name="fa fa-area-chart mr-3" color="primary"/>{{nameCard}}</h5>
+            <h5 class="mt-0 mb-0"><va-icon name="fa fa-area-chart mr-3" color="primary"/>{{ nameCard }}</h5>
          </div>
          <div class="flex sm7 xl7 md7 xs7 pa-0 ma-0" style="text-align: right;">
            <va-button class="pa-0 ma-0 circle-button" small color="dark" @click="remove()">
@@ -14,38 +14,56 @@
              />
            </va-button>
          </div>
+          <div class="flex xl10">
+            <canvas-chart-real-time-calculation :chartID="chartID" @refreshData="refreshData" @switchModeButton="switchModeButton" @getClicked="getClicked" ref="'cal_ref'" />
+          </div>
+          <div class="flex xl2">
+            <va-button :disabled="calClicked" color="#f5aa3b" @click="captureChart" small>
+              CAPTURE
+            </va-button>
+          </div>
        </div>
      </template>
      <va-tabs v-model="tabValue" class="mb-3" style="width: 100%; min-width: 100px;">
        <va-tab>
-          {{'CHART'}}
+          {{ 'CHART' }}
        </va-tab>
        <va-tab>
-          {{'SOURCE'}}
+          {{ 'SOURCE' }}
        </va-tab>
      </va-tabs>
      <div v-if="tabValue == 0" >
-        <div v-if="data.legend.data.length != 0">
-          <chart :ref="'chart_ref'" :style="'width: '+ cardwidth + '; height: ' + cardheight + ';'" :options="data" :auto-resize="true"></chart>
+        <div v-if="chartData[chartID].legend.data.length != 0">
+          <canvas-chart-real-time-display
+            :chartID="chartID" ref="CanvasChartRealTimeDisplay"
+          />
+          <div class="flex" v-if="developerMode">
+            <div v-for="(data, device) in dataStreamBuffer.getByChartID(chartID)" :key="device">
+              <div v-for="(i, channel) in data" :key="channel">
+                {{ device }} {{ channel }} {{ i.length }} first data: {{ (i[0] !== undefined) && i[0][0] }} last data: {{ (i[i.length-1] !== undefined) && i[i.length-1][i[i.length-1].length-1]}}
+              </div>
+            </div>
+          </div>
+          <!-- chart -->
+          <chart :key="taskContentChartKey" :ref="'chart_ref'" :style="'width: '+ cardwidth + '; height: ' + cardheight + ';'" :option="data" @dataZoom="updateZoom" :auto-resize="true"></chart>
        </div>
      </div>
      <div v-else-if="tabValue == 1" :style="'width: '+ cardwidth + '; height: ' + cardheight + ';'" >
-        <canvas-chart-source :chartID="chartID" :gridInfo="data.grid"></canvas-chart-source>
+        <canvas-chart-source :chartID="chartID" @addSource="addSource()" />
      </div>
      <div v-else :style="'width: '+ cardwidth + '; height: ' + cardheight + ';'" >
-        <!-- <canvas-chart-setting :chartID="chartID"></canvas-chart-setting> -->
      </div>
-      <div v-if="this.$refs.chart_ref != null">
+      <!-- <div v-if="this.$refs.chart_ref != null">
        <va-button small class="mb-3" @click="selectAllSeries">
          SELECT ALL
        </va-button>
        <va-button small class="mb-3" @click="inverseSelectAllSeries">
          INVERSE SELECT
        </va-button>
-      </div>
-      <div class="row flex align--left ma-0 pa-0">
+      </div> -->
+      <div class="row flex align--left ma-0 pa-0 mt-2">
        <va-input
-          v-if="data.chartXMode === 'time'"
+          v-if="chartData[chartID].chartXMode === 'time'"
          class="mx-1"
          @keyup.enter="timeIntervalChange(timeIntervalInput)"
          @blur="timeIntervalChange(timeIntervalInput)"
@@ -57,7 +75,7 @@
          </p>
        </va-input>
        <va-input
-          v-if="data.chartXMode === 'value'"
+          v-if="chartData[chartID].chartXMode === 'value'"
          class="mx-1"
          @keyup.enter="xIntervalChange(xIntervalInput)"
          @blur="xIntervalChange(xIntervalInput)"
@@ -65,7 +83,7 @@
          :label="'x-grid'"
        >
          <p slot="append" style="margin-right: 0;" small>
-            {{data.chartXUnit}}
+            {{chartData[chartID].chartXUnit}}
          </p>
        </va-input>
        <va-input
@@ -76,11 +94,11 @@
          :label="'y-grid'"
        >
          <p slot="append" style="margin-right: 0;" small>
-            {{data.chartYUnit}}
+            {{chartData[chartID].chartYUnit}}
          </p>
        </va-input>
        <va-input
-          v-if="data.chartDevice === 'neulive'"
+          v-if="chartData[chartID].chartDevice === 'neulive'"
          class="mx-1"
          @keyup.enter="threeAxisIntervalChange(threeAxisIntervalInput)"
          @blur="threeAxisIntervalChange(threeAxisIntervalInput)"
@@ -92,7 +110,7 @@
          </p>
        </va-input>
      </div>
-      <div class="row flex ma-0 pa-0">
+      <div class="row flex ma-0 pa-0" v-if="developerMode === true">
        <canvas-chart-filter :chartID="chartID" :filterIndex="0" />
        <canvas-chart-filter :chartID="chartID" :filterIndex="1" />
        <canvas-chart-filter :chartID="chartID" :filterIndex="2" />
@@ -103,13 +121,16 @@
 </template>

 <script>
-// import { InitChartsData, getChartsData } from '../../../../../data/task/ChartsManagement'
 import CanvasChartFilter from './CanvasChartFilter.vue'
 import CanvasChartFilterPopup from './CanvasChartFilterPopup.vue'
-// import CanvasChartSetting from './CanvasChartSetting'
 import CanvasChartSource from './CanvasChartSource'
 import { taskInfo } from '../../../../data/task/TaskInfo'
-import { chartData } from '../../../../data/task/ChartsManagement'
+import { mapFields } from 'vuex-map-fields'
+import CanvasChartRealTimeDisplay from '@/components/task/content/chart/CanvasChartRealTimeDisplay'
+import { mapActions } from 'vuex'
+import taskTypes from '@/store/modules/task/content/types'
+import CanvasChartRealTimeCalculation from './CanvasChartRealTimeCalculation.vue'
+import { dataStreamBuffer } from '@/data/task/DataStreamBuffer'

 export default {
  name: 'CanvasChart',
@@ -118,10 +139,12 @@ export default {
    CanvasChartSource,
    CanvasChartFilter,
    CanvasChartFilterPopup,
+    CanvasChartRealTimeDisplay,
+    CanvasChartRealTimeCalculation,
  },
  props: {
    chartID: {
-      type: Number,
+      type: [Number, String],
      required: true,
    },
    cardclass: {
@@ -139,108 +162,135 @@ export default {
      default: 'auto',
    },
  },
-  created () {
+  computed: {
+    ...mapFields('', [
+      'developerMode',
+    ]),
+    ...mapFields('taskContent', [
+      'chartData',
+      'taskContentChartKey',
+      'deviceListNew',
+      'taskContentChartPanelKey',
+    ]),
  },
  data () {
    return {
-      // chartData: InitChartsData(this.chartID, 2000, 1, 1),
+      data: null,
+      rawData: null,
      tabValue: 0,
-      chartKey: 0,
-      data: chartData.getChartsData(this.chartID),
      resizeTimer: null,
      mappingSelect: '',
      mappingOptions: taskInfo.getMappingList(),
-      nameCard: chartData.getAllChartsData()[this.chartID].cardName,
+      nameCard: '',
      initDone: false,
      timeIntervalInput: 'auto',
      threeAxisIntervalInput: 'auto',
      xIntervalInput: 'auto',
      yIntervalInput: 'auto',
+      dataZoomStart: 0,
+      dataZoomEnd: 100,
+      captured: false,
+      calClicked: false,
+      dataStreamBuffer: dataStreamBuffer,
    }
  },
-  computed: {
-  },
-  watch: {
-  },
  methods: {
+    getClicked: function (clicked) {
+      this.calClicked = clicked
+    },
+    captureChart: function () {
+      const newData = Object.assign({}, this.data)
+      this.chartData[String(newData.chartID) + '-1'] = newData
+      this.chartData[String(newData.chartID) + '-1'].captured = true
+      this.chartData[String(newData.chartID) + '-1'].cardName = this.chartData[String(newData.chartID) + '-1'].cardName + ' - captured'
+      this.chartData[String(newData.chartID) + '-1'].chartID = String(newData.chartID) + '-1'
+      this.taskContentChartPanelKey++
+      // console.log(this.chartData[String(newData.chartID) + '-1'])
+    },
+    updateZoom: function (e) {
+      this.dataZoomStart = e.batch[0].start
+      this.dataZoomEnd = e.batch[0].end
+    },
    timeIntervalChange: function (val) {
      if (!isNaN(parseInt(val))) {
-        chartData.getAllChartsData()[this.chartID].xAxis.forEach(x => {
+        this.chartData[this.chartID].xAxis.forEach(x => {
          if (x.type === 'time') {
            x.interval = val * 1000
          }
        })
      } else {
        this.timeIntervalInput = 'auto'
-        chartData.getAllChartsData()[this.chartID].xAxis.forEach(x => {
+        this.chartData[this.chartID].xAxis.forEach(x => {
          if (x.type === 'time') {
-            x.interval = 500 * 1000
-          }
-        })
-      }
-    },
-    xIntervalChange: function (val) {
-      if (!isNaN(parseInt(val))) {
-        chartData.getAllChartsData()[this.chartID].xAxis.forEach(x => {
-          if (x.type === 'value') {
-            x.interval = val * 1000
-          }
-        })
-      } else {
-        this.timeIntervalInput = 'auto'
-        chartData.getAllChartsData()[this.chartID].xAxis.forEach(x => {
-          if (x.type === 'value') {
            x.interval = null
          }
        })
      }
    },
-    yIntervalChange: function (val) {
+    xIntervalChange: async function (val) {
      if (!isNaN(parseInt(val))) {
-        chartData.getAllChartsData()[this.chartID].yAxis.forEach(y => {
+        this.chartData[this.chartID].xAxis.forEach(x => {
+          if (x.type === 'value') {
+            x.interval = val * 1000
+          }
+        })
+      } else {
+        this.timeIntervalInput = 'auto'
+        this.chartData[this.chartID].xAxis.forEach(x => {
+          if (x.type === 'value') {
+            x.interval = null
+          }
+        })
+      }
+      await this.taskContentChartSaveToCache({ controllerID: taskInfo.getTaskInfo().controllerID })
+    },
+    yIntervalChange: async function (val) {
+      if (!isNaN(parseInt(val))) {
+        this.chartData[this.chartID].yAxis.forEach(y => {
          if (parseInt(y.channel) <= 255) {
-            if (chartData.getAllChartsData()[this.chartID].chartYUnit === 'uV') {
+            if (this.chartData[this.chartID].chartYUnit === 'uV') {
              y.interval = parseInt(val)
-              //  console.log(y.interval)
            } else {
              y.interval = val * 1000
            }
            const maxList = []
            const minList = []
+            // TODO: follow this way to iterate the deviceID
            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])))
+              maxList.push(Math.max(...this.chartData[this.chartID].series[i].data.map(p => p[1])))
+              minList.push(Math.min(...this.chartData[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 / y.interval) + 1) * y.interval
-            y.min = (parseInt(y.min / y.interval) - 1) * y.interval
+            // 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 / y.interval) + 1) * y.interval
+            // y.min = (parseInt(y.min / y.interval) - 1) * y.interval
          }
        })
      } else {
        this.timeIntervalInput = 'auto'
-        chartData.getAllChartsData()[this.chartID].yAxis.forEach(y => {
+        this.chartData[this.chartID].yAxis.forEach(y => {
          if (parseInt(y.channel) <= 255) {
-            y.interval = null
-            y.max = 'dataMax'
-            y.min = 'dataMin'
+            // y.interval = null
+            // y.max = 'dataMax'
+            // y.min = 'dataMin'
          }
        })
      }
+      await this.taskContentChartSaveToCache({ controllerID: taskInfo.getTaskInfo().controllerID })
    },
    threeAxisIntervalChange: function (val) {
      if (!isNaN(parseInt(val))) {
-        chartData.getAllChartsData()[this.chartID].yAxis.forEach(y => {
+        this.chartData[this.chartID].yAxis.forEach(y => {
          if (parseInt(y.channel) >= 255) {
            y.interval = val * 1
          }
        })
      } else {
        this.timeIntervalInput = 'auto'
-        chartData.getAllChartsData()[this.chartID].yAxis.forEach(y => {
+        this.chartData[this.chartID].yAxis.forEach(y => {
          if (parseInt(y.channel) >= 255) {
            y.interval = null
          }
@@ -266,33 +316,25 @@ export default {
      this.mappingOptions.forEach(item => {
        if (item.id === itemID) {
          this.mappingSelect = item
-          chartData.getAllChartsData()[this.chartID].mappingID = item.id
+          this.chartData[this.chartID].mappingID = item.id
        }
      })
    },
    refreshMappingSelect: async function () {
-      this.setMappingSelect(chartData.getAllChartsData()[this.chartID].mappingID)
-      if (chartData.getAllChartsData()[this.chartID].mappingID !== -1 && chartData.getAllChartsData()[this.chartID].mappingID != null) {
+      this.setMappingSelect(this.chartData[this.chartID].mappingID)
+      if (this.chartData[this.chartID].mappingID !== '-1' && this.chartData[this.chartID].mappingID != null) {
        taskInfo.getMappingList().forEach(item => {
-          if (item.id === chartData.getAllChartsData()[this.chartID].mappingID) {
+          if (item.id === this.chartData[this.chartID].mappingID) {
+            // console.log('item.name: ', item.name)
            this.setChartName(item.name)
          }
        })
      }
    },
    setChartName: function (name) {
-      chartData.getAllChartsData()[this.chartID].cardName = name
+      this.chartData[this.chartID].cardName = name
      this.nameCard = name
    },
-    mappingSelectChange: function () {
-      if (this.initDone) {
-        if (this.mappingSelect.id != null) {
-          chartData.getAllChartsData()[this.chartID].mappingID = this.mappingSelect.id
-        } else {
-          chartData.getAllChartsData()[this.chartID].mappingID = -1
-        }
-      }
-    },
    resize: function () {
      if (this.$refs.chart_ref != null) {
        this.$refs.chart_ref.resize()
@@ -309,12 +351,12 @@ export default {
      let index = 0
      for (const [gridIndex, value] of Object.values(params.selected).entries()) { // [TODO] 技術債，目前real time chart一個grid只對應一條series
        if (value === true) {
-          this.data.grid[gridIndex].height = (85 / activeLegendLen) + '%'
-          this.data.grid[gridIndex].top = index * (85 / activeLegendLen) + 1 + '%'
+          this.chartData[this.chartID].grid[gridIndex].height = (85 / activeLegendLen) + '%'
+          this.chartData[this.chartID].grid[gridIndex].top = index * (85 / activeLegendLen) + 1 + '%'
          index++
        } else {
-          this.data.grid[gridIndex].height = '0%'
-          this.data.grid[gridIndex].top = '0%'
+          this.chartData[this.chartID].grid[gridIndex].height = '0%'
+          this.chartData[this.chartID].grid[gridIndex].top = '0%'
        }
      }
    },
@@ -328,15 +370,34 @@ export default {
        type: 'legendInverseSelect',
      })
    },
+    refreshData: function (chartData, rawData) {
+      this.data = chartData
+      this.rawData = rawData
+      // save the start & end of previous dataZoom setting to avoid reset dataZoom
+      this.data.dataZoom[0].start = this.dataZoomStart
+      this.data.dataZoom[0].end = this.dataZoomEnd
+      this.$refs.CanvasChartRealTimeDisplay.matchData(this.data)
+    },
+    switchModeButton: function (dataMode, gridIndex, channelIndex) {
+      // console.log('switchModeBtn')
+      this.$refs.CanvasChartRealTimeDisplay.matchFunctional(String(dataMode), gridIndex, channelIndex)
+    },
+    ...mapActions('taskContent', [
+      taskTypes.chart.saveToCache,
+    ]),
  },
  async mounted () {
+    this.data = this.chartData[this.chartID]
+    // this.data = this.chartData[this.chartID]
+    // this.data.xAxis[0].boundaryGap = [0, '5%']
+    // this.data.yAxis[0].boundaryGap = ['10%', '10%']
    this.resizeTimer = setInterval(this.resize, 1000)
-    this.nameCard = chartData.getAllChartsData()[this.chartID].cardName
+    this.nameCard = this.chartData[this.chartID].cardName
    await this.refreshMappingSelect()
    this.initDone = true
    if (this.$refs.chart_ref != null) {
-      this.$refs.chart_ref.chart._zr.on('click', this.showFilterPopup)
-      this.$refs.chart_ref.chart._zr.on('mousemove', this.setCursor)
+      // this.$refs.chart_ref.chart._zr.on('click', this.showFilterPopup)
+      // this.$refs.chart_ref.chart._zr.on('mousemove', this.setCursor)
      this.$refs.chart_ref.chart.on('legendselectchanged', this.legendChange)
      this.$refs.chart_ref.chart.on('legendselectall', this.legendChange)
      this.$refs.chart_ref.chart.on('legendinverseselect', this.legendChange)
@@ -56,7 +56,6 @@
 </template>

 <script>
-import { chartData } from '@/data/task/ChartsManagement'
 import { taskInfo } from '@/data/task/TaskInfo'
 import api from '@/data/api'
 import { mapFields } from 'vuex-map-fields'
@@ -66,7 +65,7 @@ export default {
  name: 'canvas-chart-filter',
  props: {
    chartID: {
-      type: Number,
+      type: [Number, String],
      required: true,
    },
    filterIndex: {
@@ -77,23 +76,23 @@ export default {
  computed: {
    ...mapFields('taskContent', [
      'filter',
+      'chartData',
    ]),
    buttonIcon () {
-      if (this.data.series.length > 0 && this.data.series.every(item => item != null)) {
-        return this.data.series.every(item => item.filter[this.filterIndex].filter != null) ? 'fa fa-stop' : 'fa fa-play'
+      if (this.chartData[this.chartID].series.length > 0 && this.chartData[this.chartID].series.every(item => item != null)) {
+        return this.chartData[this.chartID].series.every(item => item.filter[this.filterIndex].filter != null) ? 'fa fa-stop' : 'fa fa-play'
      }
      return 'fa fa-play'
    },
    buttonColor () {
-      if (this.data.series.length > 0 && this.data.series.every(item => item != null)) {
-        return this.data.series.every(item => item.filter[this.filterIndex].filter != null) ? 'danger' : 'primary'
+      if (this.chartData[this.chartID].series.length > 0 && this.chartData[this.chartID].series.every(item => item != null)) {
+        return this.chartData[this.chartID].series.every(item => item.filter[this.filterIndex].filter != null) ? 'danger' : 'primary'
      }
-      return 'fa fa-play'
+      return 'primary'
    },
  },
  data () {
    return {
-      data: chartData.getAllChartsData()[this.chartID],
      selectFilter: {
        id: 1,
        name: 'notch',
@@ -129,9 +128,9 @@ export default {
  methods: {
    async updateFilterInfo (index) {
      let closeFilter = false
-      for (let i = 0; i < this.data.series.length; i++) {
-        if (this.data.series[i].filter[this.filterIndex].filter != null) {
-          this.data.series[i].filter[this.filterIndex].filter = null
+      for (let i = 0; i < this.chartData[this.chartID].series.length; i++) {
+        if (this.chartData[this.chartID].series[i].filter[this.filterIndex].filter != null) {
+          this.chartData[this.chartID].series[i].filter[this.filterIndex].filter = null
          closeFilter = true
        }
      }
@@ -140,8 +139,8 @@ export default {
      }
      let fs = 0
      let sos = []
-      for (let i = 0; i < this.data.series.length; i++) {
-        const deviceID = this.data.series[i].yAxisSource[0]
+      for (let i = 0; i < this.chartData[this.chartID].series.length; i++) {
+        const deviceID = this.chartData[this.chartID].series[i].yAxisSource[0]
        // const _fs = taskInfo.getDeviceInfo(deviceID).parameterSet.SAMPLE_RATE
        const _fs = 1000
        const _chNum = taskInfo.getDeviceInfo(deviceID).parameterSet.CH_NUMBER
@@ -173,17 +172,17 @@ export default {
          })
          sos = _sos
        }
-        this.data.series[i].filter[index].type = this.selectFilter.name
-        this.data.series[i].filter[index].order = this.order
+        this.chartData[this.chartID].series[i].filter[index].type = this.selectFilter.name
+        this.chartData[this.chartID].series[i].filter[index].order = this.order
        // sampling rate changed by channel number
-        this.data.series[i].filter[index].fs = parseFloat(_fs / _chNum)
-        this.data.series[i].filter[index].f0 = parseFloat(this.freq0)
-        this.data.series[i].filter[index].f1 = parseFloat(this.freq1)
-        this.data.series[i].filter[index].f2 = parseFloat(this.freq2)
-        this.data.series[i].filter[index].sos = sos
-        this.data.series[i].filter[index].filter = IIRFilter.init(sos)
+        this.chartData[this.chartID].series[i].filter[index].fs = parseFloat(_fs / _chNum)
+        this.chartData[this.chartID].series[i].filter[index].f0 = parseFloat(this.freq0)
+        this.chartData[this.chartID].series[i].filter[index].f1 = parseFloat(this.freq1)
+        this.chartData[this.chartID].series[i].filter[index].f2 = parseFloat(this.freq2)
+        this.chartData[this.chartID].series[i].filter[index].sos = sos
+        this.chartData[this.chartID].series[i].filter[index].filter = IIRFilter.init(sos)
      }
-      //  console.log(this.data)
+      //  console.log(this.chartData[this.chartID])
    },
  },
 }
@@ -19,8 +19,8 @@
 </template>

 <script>
-import { chartData } from '@/data/task/ChartsManagement'
 import CanvasChartIndividualFilter from './CanvasChartIndividualFilter.vue'
+import { mapFields } from 'vuex-map-fields'

 export default {
  name: 'canvas-chart-filter-popup',
@@ -29,7 +29,7 @@ export default {
  },
  props: {
    chartID: {
-      type: Number,
+      type: [Number, String],
      required: true,
    },
    chartRef: {
@@ -37,21 +37,22 @@ export default {
    },
  },
  computed: {
+    ...mapFields('taskContent', [
+      'chartData',
+    ]),
  },
  data () {
    return {
      showModal: false,
      position: 'center',
-      data: chartData.getAllChartsData()[this.chartID],
      gridIndex: 0,
    }
  },
  methods: {
    showPanel (params) {
-      // console.log(this.data)
      if (this.chartRef != null) {
        let _gridIndex = 0
-        for (_gridIndex = 0; _gridIndex < this.data.grid.length; _gridIndex++) {
+        for (_gridIndex = 0; _gridIndex < this.chartData[this.chartID].grid.length; _gridIndex++) {
          if (this.chartRef.containPixel({ gridIndex: _gridIndex }, [params.offsetX, params.offsetY])) {
            this.position = 'left'
            this.showModal = true
@@ -57,7 +57,6 @@
 </template>

 <script>
-import { chartData } from '@/data/task/ChartsManagement'
 import { taskInfo } from '@/data/task/TaskInfo'
 import api from '@/data/api'
 import { mapFields } from 'vuex-map-fields'
@@ -67,7 +66,7 @@ export default {
  name: 'canvas-chart-filter-individual-filter',
  props: {
    chartID: {
-      type: Number,
+      type: [Number, String],
      required: true,
    },
    seriesIndex: {
@@ -82,23 +81,23 @@ export default {
  computed: {
    ...mapFields('taskContent', [
      'filter',
+      'chartData',
    ]),
    buttonIcon () {
-      if (this.data.series[this.seriesIndex] != null) {
-        return this.data.series[this.seriesIndex].filter[this.filterIndex].filter != null ? 'fa fa-stop' : 'fa fa-play'
+      if (this.chartData[this.chartID].series[this.seriesIndex] != null) {
+        return this.chartData[this.chartID].series[this.seriesIndex].filter[this.filterIndex].filter != null ? 'fa fa-stop' : 'fa fa-play'
      }
      return 'fa fa-play'
    },
    buttonColor () {
-      if (this.data.series[this.seriesIndex] != null) {
-        return this.data.series[this.seriesIndex].filter[this.filterIndex].filter != null ? 'danger' : 'primary'
+      if (this.chartData[this.chartID].series[this.seriesIndex] != null) {
+        return this.chartData[this.chartID].series[this.seriesIndex].filter[this.filterIndex].filter != null ? 'danger' : 'primary'
      }
      return 'fa fa-play'
    },
  },
  data () {
    return {
-      data: chartData.getAllChartsData()[this.chartID],
      selectFilter: {
        id: 1,
        name: 'notch',
@@ -134,8 +133,8 @@ export default {
  methods: {
    async updateFilterInfo (_filterIndex, _seriesIndex) {
      let closeFilter = false
-      if (this.data.series[_seriesIndex].filter[_filterIndex].filter != null) {
-        this.data.series[_seriesIndex].filter[_filterIndex].filter = null
+      if (this.chartData[this.chartID].series[_seriesIndex].filter[_filterIndex].filter != null) {
+        this.chartData[this.chartID].series[_seriesIndex].filter[_filterIndex].filter = null
        closeFilter = true
      }
      if (closeFilter) {
@@ -143,7 +142,7 @@ export default {
      }
      let fs = 0
      let sos = []
-      const deviceID = this.data.series[_seriesIndex].yAxisSource[0]
+      const deviceID = this.chartData[this.chartID].series[_seriesIndex].yAxisSource[0]
      // const _fs = taskInfo.getDeviceInfo(deviceID).parameterSet.SAMPLE_RATE
      const _fs = 1000
      const _chNum = taskInfo.getDeviceInfo(deviceID).parameterSet.CH_NUMBER
@@ -175,22 +174,22 @@ export default {
        })
        sos = _sos
      }
-      this.data.series[_seriesIndex].filter[_filterIndex].type = this.selectFilter.name
-      this.data.series[_seriesIndex].filter[_filterIndex].order = this.order
+      this.chartData[this.chartID].series[_seriesIndex].filter[_filterIndex].type = this.selectFilter.name
+      this.chartData[this.chartID].series[_seriesIndex].filter[_filterIndex].order = this.order
      // sampling rate changed by channel number
-      this.data.series[_seriesIndex].filter[_filterIndex].fs = parseInt(_fs / _chNum)
-      this.data.series[_seriesIndex].filter[_filterIndex].f0 = parseInt(this.freq0)
-      this.data.series[_seriesIndex].filter[_filterIndex].f1 = parseInt(this.freq1)
-      this.data.series[_seriesIndex].filter[_filterIndex].f2 = parseInt(this.freq2)
-      this.data.series[_seriesIndex].filter[_filterIndex].sos = sos
-      this.data.series[_seriesIndex].filter[_filterIndex].filter = IIRFilter.init(sos)
+      this.chartData[this.chartID].series[_seriesIndex].filter[_filterIndex].fs = parseInt(_fs / _chNum)
+      this.chartData[this.chartID].series[_seriesIndex].filter[_filterIndex].f0 = parseInt(this.freq0)
+      this.chartData[this.chartID].series[_seriesIndex].filter[_filterIndex].f1 = parseInt(this.freq1)
+      this.chartData[this.chartID].series[_seriesIndex].filter[_filterIndex].f2 = parseInt(this.freq2)
+      this.chartData[this.chartID].series[_seriesIndex].filter[_filterIndex].sos = sos
+      this.chartData[this.chartID].series[_seriesIndex].filter[_filterIndex].filter = IIRFilter.init(sos)
    },
  },
  mounted () {
-    this.selectFilter = this.optionFilter.find(item => item.name === this.data.series[this.seriesIndex].filter[this.filterIndex].type)
-    this.freq0 = this.data.series[this.seriesIndex].filter[this.filterIndex].f0
-    this.freq1 = this.data.series[this.seriesIndex].filter[this.filterIndex].f1
-    this.freq2 = this.data.series[this.seriesIndex].filter[this.filterIndex].f2
+    this.selectFilter = this.optionFilter.find(item => item.name === this.chartData[this.chartID].series[this.seriesIndex].filter[this.filterIndex].type)
+    this.freq0 = this.chartData[this.chartID].series[this.seriesIndex].filter[this.filterIndex].f0
+    this.freq1 = this.chartData[this.chartID].series[this.seriesIndex].filter[this.filterIndex].f1
+    this.freq2 = this.chartData[this.chartID].series[this.seriesIndex].filter[this.filterIndex].f2
  },
 }
 </script>
@@ -0,0 +1,421 @@
+<template>
+  <div>
+    <div class="row xs12 sm12 lg10 xl10 pa-2">
+      <va-button v-if="integralClicked && (mode_name==='Chronoamperometric' || mode_name==='I-T Graph' || mode_name==='I-V Curve')" color="danger" class="mb-2" @click="clickIntegral" small>
+        To Raw Mode
+      </va-button>
+      <va-button :disabled="disableInt" v-if="!integralClicked && (mode_name==='Chronoamperometric' || mode_name==='I-T Graph' || mode_name==='I-V Curve')" color="primary" class="mb-2" @click="clickIntegral" small>
+        To Integral Mode
+      </va-button>
+      <va-button v-if="xlogClicked && (mode_name==='Linear Sweep Voltammetry' || mode_name==='I-V Curve')" color="danger" class="mb-2" @click="clickXLog" small>
+        To Raw Mode
+      </va-button>
+      <va-button :disabled="disableLog" v-if="!xlogClicked && (mode_name==='Linear Sweep Voltammetry' || mode_name==='I-V Curve')" color="primary" class="mb-2" @click="clickXLog" small>
+        To log Mode (x-axis)
+      </va-button>
+      <va-button v-if="ylogClicked && (mode_name==='Linear Sweep Voltammetry' || mode_name==='I-V Curve')" color="danger" class="mb-2" @click="clickYLog" small>
+        To Raw Mode
+      </va-button>
+      <va-button :disabled="disableLog" v-if="!ylogClicked && (mode_name==='Linear Sweep Voltammetry' || mode_name==='I-V Curve')" color="primary" class="mb-2" @click="clickYLog" small>
+        To log Mode (y-axis)
+      </va-button>
+      <va-button v-if="diffClicked && (mode_name==='Linear Sweep Voltammetry' || mode_name==='I-V Curve')" color="danger" class="mb-2" @click="clickDiff" small>
+        To Raw Mode
+      </va-button>
+      <va-button :disabled="disableDiff" v-if="!diffClicked && (mode_name==='Linear Sweep Voltammetry' || mode_name==='I-V Curve')" color="primary" class="mb-2" @click="clickDiff" small>
+        To Differential Mode
+      </va-button>
+    </div>
+    <div class="row xs12 sm12 lg6 xl6 pa-2" v-if="diffClicked">
+      <div>
+        <span>Window-size: </span>
+        <input class="mx-2" size="5" v-model="sgFilterArgument.windowSize" @blur="watchHandler"/>
+      </div>
+      <div>
+        <span>Polynomial: </span>
+        <input class="mx-2" size="5" v-model="sgFilterArgument.polynomial" @blur="watchHandler"/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// import CanvasChartFilter from './CanvasChartFilter.vue'
+// import CanvasChartFilterPopup from './CanvasChartFilterPopup.vue'
+// import CanvasChartSource from './CanvasChartSource'
+// import { taskInfo } from '../../../../data/task/TaskInfo'
+import { mapFields } from 'vuex-map-fields'
+import { mapActions } from 'vuex'
+import taskTypes from '@/store/modules/task/content/types'
+import paramTable from '@/data/config-table/index'
+// import newTooltip from '@/factories/chart/tooltipFactory'
+import { getTimeFormatter } from '@/store/modules/task/content/actions/chartAct'
+import sgFilter from '@/data/SGFilter'
+
+export default {
+  name: 'CanvasChartRealTimeCalculation',
+  components: {
+  },
+  props: {
+    chartID: {
+      type: [Number, String],
+      required: true,
+    },
+  },
+  computed: {
+    ...mapFields('', [
+      'developerMode',
+    ]),
+    ...mapFields('taskContent', [
+      'chartData',
+      'taskContentChartKey',
+      'deviceListNew',
+    ]),
+  },
+  data () {
+    return {
+      info: null,
+      paramTable: paramTable,
+      rawData: null,
+      mode_name: '',
+      xName: '',
+      yName: '',
+      obj: null,
+      integralClicked: false,
+      xlogClicked: false,
+      ylogClicked: false,
+      diffClicked: false,
+      disableDiff: false,
+      disableLog: false,
+      disableInt: false,
+      sgFilterArgument: {
+        windowSize: 5,
+        polynomial: 3,
+      },
+    }
+  },
+  // watch rawData is use for detect whether the chartData is changed
+  watch: {
+    rawData: {
+      deep: true,
+      handler: function () {
+        // avoid getting null data
+        if (this.rawData.series.length > 0) {
+          this.watchHandler()
+        }
+      },
+    },
+  },
+  methods: {
+    // Do arithmetic operations triggered by button(raw, integral, log)
+    watchHandler: function () {
+      // this.data need to be deep copy from rawData, since we don't want to modify the source(chartData[])
+      // this.data = Object.assign({}, this.rawData)
+      this.data = JSON.parse(JSON.stringify(this.rawData))
+      this.addSource()
+      var curXData = 0
+      var curYData = 0
+      // var prevXData = 0
+      var prevYData = 0
+      var deltaX = 0
+      var deltaTime = 0
+      var curTime = 0
+      var integralResult = 0
+      // var diffResult = 0
+      var index = 0
+      var timeIndex = this.getTimeIndex()
+      var _data = []
+      const dataLength = this.data.series[0].data.length
+      const seriesData = this.data.series[0].data
+      if (this.integralClicked) {
+        for (index = 0; index < dataLength; index++) {
+          // console.log('x: ', seriesData[index][0])
+          // console.log('y: ', seriesData[index][1])
+          if (index === 0) {
+            // TODO: need to change the series[deviceID]
+            // TODO: change the time index(dynamic changing)
+            curYData = parseFloat(seriesData[index][1])
+            // deltaX = seriesData[index + 1][timeIndex] - seriesData[index][timeIndex]
+            curXData = parseFloat(seriesData[index][0])
+            curTime = seriesData[index][timeIndex]
+            if (this.mode_name === 'I-T Graph') {
+              _data.push([curTime, 0])
+            } else {
+              _data.push([curXData, 0, 0])
+            }
+          } else {
+            prevYData = parseFloat(seriesData[index - 1][1])
+            curYData = parseFloat(seriesData[index][1])
+            curXData = parseFloat(seriesData[index][0])
+            deltaX = seriesData[index][0] - seriesData[index - 1][0]
+            deltaTime = seriesData[index][timeIndex] - seriesData[index - 1][timeIndex]
+            integralResult += parseFloat((Math.abs(curYData) + Math.abs(prevYData)) * Math.abs(deltaX) / 2)
+            curTime += deltaTime
+            if (this.mode_name === 'I-T Graph') {
+              _data.push([curTime, integralResult])
+            } else {
+              _data.push([curXData, integralResult, curTime])
+            }
+          }
+        }
+      } else if (this.xlogClicked || this.ylogClicked) {
+        if (this.xlogClicked && this.ylogClicked) {
+          for (index = 0; index < dataLength; index++) {
+            if (index === 0) {
+              curXData = parseFloat(seriesData[index][0])
+              curYData = parseFloat(seriesData[index][1])
+              deltaX = seriesData[index + 1][timeIndex] - seriesData[index][timeIndex]
+              curTime = seriesData[index][timeIndex]
+              if (curXData !== 0 && curYData !== 0) {
+                _data.push([Math.log10(Math.abs(curXData)), Math.log10(Math.abs(curYData)), curTime])
+              }
+            } else {
+              curXData = parseFloat(seriesData[index][0])
+              curYData = parseFloat(seriesData[index][1])
+              curTime += deltaX
+              if (curXData !== 0 && curYData !== 0) {
+                _data.push([Math.log10(Math.abs(curXData)), Math.log10(Math.abs(curYData)), curTime])
+              }
+            }
+          }
+        } else if (this.xlogClicked && !(this.ylogClicked)) {
+          for (index = 0; index < dataLength; index++) {
+            if (index === 0) {
+              curXData = parseFloat(seriesData[index][0])
+              curYData = parseFloat(seriesData[index][1])
+              deltaX = seriesData[index + 1][timeIndex] - seriesData[index][timeIndex]
+              curTime = seriesData[index][timeIndex]
+              if (curXData !== 0) {
+                _data.push([Math.log10(Math.abs(curXData)), curYData, curTime])
+              }
+            } else {
+              curXData = parseFloat(seriesData[index][0])
+              curYData = parseFloat(seriesData[index][1])
+              curTime += deltaX
+              if (curXData !== 0) {
+                _data.push([Math.log10(Math.abs(curXData)), curYData, curTime])
+              }
+            }
+          }
+        } else if (!(this.xlogClicked) && this.ylogClicked) {
+          for (index = 0; index < dataLength; index++) {
+            if (index === 0) {
+              curXData = parseFloat(seriesData[index][0])
+              curYData = parseFloat(seriesData[index][1])
+              deltaX = seriesData[index + 1][timeIndex] - seriesData[index][timeIndex]
+              curTime = seriesData[index][timeIndex]
+              if (curYData !== 0) {
+                _data.push([curXData, Math.log10(Math.abs(curYData)), curTime])
+              }
+            } else {
+              curXData = parseFloat(seriesData[index][0])
+              curYData = parseFloat(seriesData[index][1])
+              curTime += deltaX
+              if (curYData !== 0) {
+                _data.push([curXData, Math.log10(Math.abs(curYData)), curTime])
+              }
+            }
+          }
+        }
+      } else if (this.diffClicked) {
+        const dataX = []
+        const dataY = []
+        const time = []
+        for (index = 0; index < dataLength; index++) {
+          dataX.push(seriesData[index][0])
+          dataY.push(seriesData[index][1])
+          time.push(seriesData[index][2])
+        }
+        // console.log('dataX', dataX)
+        // console.log('dataY', dataY)
+        // console.log('time', time)
+        const filteredData = sgFilter(dataY, this.sgFilterArgument.windowSize, this.sgFilterArgument.polynomial)
+        // console.log('filterdData', filteredData)
+
+        for (index = 0; index < dataLength; index++) {
+          _data.push([dataX[index], filteredData[index], time[index]])
+        }
+
+        // for (index = 0; index < dataLength; index++) {
+        //   if (index === 0) {
+        //     // TODO: need to change the series[deviceID]
+        //     // TODO: change the time index(dynamic changing)
+        //     curXData = parseFloat(seriesData[index][0])
+        //     curYData = parseFloat(seriesData[index][1])
+        //     deltaX = seriesData[index + 1][timeIndex] - seriesData[index][timeIndex]
+        //     curTime = seriesData[index][timeIndex]
+        //     // _data.push([curTime, 0, curTime])
+        //   } else {
+        //     curXData = parseFloat(seriesData[index][0])
+        //     curYData = parseFloat(seriesData[index][1])
+        //     prevXData = parseFloat(seriesData[index - 1][0])
+        //     prevYData = parseFloat(seriesData[index - 1][1])
+        //     curTime += deltaX
+        //     diffResult = parseFloat((curYData - prevYData) / (curXData - prevXData))
+        //     _data.push([curXData, diffResult, curTime])
+        //   }
+        // }
+      }
+      // console.log(this.data.dataZoom[1])
+      // decide feed in raw data / modified one
+      const dataRaw = this.data.series[0].data
+      if (this.integralClicked || this.xlogClicked || this.ylogClicked || this.diffClicked) {
+        this.data.series[0].data = _data
+        this.$emit('getClicked', true)
+        // console.log(this.data.series[0].data[this.data.series[0].data.length - 1])
+      } else {
+        this.$emit('getClicked', false)
+      }
+      this.data.xAxis[0].type = 'value'
+      if (this.xName !== 'TIME') {
+        // console.log('not time')
+        this.data.xAxis[0].max = (value) => {
+          if (value.max < 0) {
+            return value.max - 0.1 * value.max
+          }
+          if (value.max + 0.1 * value.max > 5e6) {
+            return 5e6
+          }
+          return value.max + 0.1 * value.max
+        }
+
+        this.data.yAxis[0].max = (value) => {
+          if (value.max < 0) {
+            return value.max - 0.1 * value.max
+          }
+          return value.max + 0.1 * value.max
+        }
+      }
+      if (this.integralClicked) {
+        this.$emit('switchModeButton', 'integral', 0, 0)
+      } else if (this.diffClicked) {
+        this.$emit('switchModeButton', 'differential', 0, 0)
+      } else {
+        this.$emit('switchModeButton', 'default', 0, 0)
+      }
+      // TODO: modify the redundant code
+      if (this.xName === 'TIME') {
+        this.data.xAxis[0].axisLabel.formatter = function (val) {
+          return getTimeFormatter(val)
+        }
+      }
+      // this.data.yAxis[0].boundaryGap = [String(this.yBottomBoundary) + '%', '10%']
+      // console.log(this.data.yAxis[0].boundaryGap)
+      this.$emit('refreshData', this.data, dataRaw)
+    },
+    clickIntegral: function () {
+      this.integralClicked = !(this.integralClicked)
+      this.disableDiff = !(this.disableDiff)
+      this.disableLog = !(this.disableLog)
+      const device = this.deviceListNew.find(ele => String(ele.memory_board) === String(this.data.mappingID))
+      if (device !== undefined) {
+        if (device.status === 0 || device.status === 1) {
+          this.watchHandler()
+        }
+      }
+    },
+    clickXLog: function () {
+      if (this.xlogClicked) {
+        this.xlogClicked = false
+        if (this.ylogClicked) {
+          this.disableDiff = true
+          this.disableInt = true
+        } else {
+          this.disableDiff = false
+          this.disableInt = false
+        }
+      } else {
+        this.xlogClicked = true
+        this.disableDiff = true
+        this.disableInt = true
+      }
+      const device = this.deviceListNew.find(ele => String(ele.memory_board) === String(this.data.mappingID))
+      if (device !== undefined) {
+        if (device.status === 0 || device.status === 1) {
+          this.watchHandler()
+        }
+      }
+    },
+    clickYLog: function () {
+      if (this.ylogClicked) {
+        this.ylogClicked = false
+        if (this.xlogClicked) {
+          this.disableDiff = true
+          this.disableInt = true
+        } else {
+          this.disableDiff = false
+          this.disableInt = false
+        }
+      } else {
+        this.ylogClicked = true
+        this.disableDiff = true
+        this.disableInt = true
+      }
+      const device = this.deviceListNew.find(ele => String(ele.memory_board) === String(this.data.mappingID))
+      if (device !== undefined) {
+        if (device.status === 0 || device.status === 1) {
+          this.watchHandler()
+        }
+      }
+    },
+    clickDiff: function () {
+      this.diffClicked = !(this.diffClicked)
+      this.disableLog = !(this.disableLog)
+      this.disableInt = !(this.disableInt)
+      const device = this.deviceListNew.find(ele => String(ele.memory_board) === String(this.data.mappingID))
+      if (device !== undefined) {
+        if (device.status === 0 || device.status === 1) {
+          this.watchHandler()
+        }
+      }
+    },
+    addSource () {
+      if (this.data.gridSource.length > 0) {
+        const xAxisName = this.data.gridSource[0][0].xAxis
+        const yAxisName = this.data.gridSource[0][0].yAxis
+        this.xName = (xAxisName.split(' ')).pop()
+        this.yName = (yAxisName.split(' ')).pop()
+        if ((this.xName === 'VOLTAGE' && this.yName === 'CURRENT') || (this.xName === 'CURRENT' && this.yName === 'VOLTAGE')) {
+          this.mode_name = 'I-V Curve' // integration
+        } else if (this.xName === 'TIME' && this.yName === 'CURRENT') {
+          this.mode_name = 'I-T Graph' // differential and log
+        }
+      }
+    },
+    // index 0 is for the mode which x-axis is represent time, 2 is for the other mode(s)
+    getTimeIndex: function () {
+      let xAxisName = this.rawData.gridSource[0][0].xAxis
+      xAxisName = (xAxisName.split(' ')).pop()
+      return (xAxisName === 'TIME') ? 0 : 2
+    },
+    // these function below are using for print out the data (debug)
+    getAlldata: function () {
+      return this.data.series[0].data[(this.data.series[0].data).length - 1]
+    },
+    getXdata: function () {
+      var value = this.data.series[0].data[(this.data.series[0].data).length - 1][0]
+      return this.xName + ': ' + value + ' ' + this.xUnit
+    },
+    getYdata: function () {
+      var value = this.data.series[0].data[(this.data.series[0].data).length - 1][1]
+      return this.yName + ': ' + value + ' ' + this.yUnit
+    },
+
+    ...mapActions('taskContent', [
+      taskTypes.chart.saveToCache,
+    ]),
+  },
+  async mounted () {
+    this.rawData = this.chartData[this.chartID]
+    // console.log('x', this.rawData.xAxis.length)
+    // if (this.mode_name === 'I-V Curve') {
+    //   this.rawData.xAxis[0].boundaryGap = [0, '5%']
+    //   this.rawData.yAxis[0].boundaryGap = [0, '10%']
+    // } else {
+    //   this.rawData.xAxis[0].boundaryGap = [0, '5%']
+    //   this.rawData.yAxis[0].boundaryGap = ['10%', '10%']
+    // }
+  },
+}
+
+</script>
@@ -0,0 +1,261 @@
+<template>
+  <div>
+    <!-- cycle display -->
+    <div v-if="data !== null && data.cycle > 0" class="row flex sm12 xl12 md12 xs12 align--center my-0 py-0">
+      <div  style="text-align: right;">
+        <h1 style="color: #707ee7;"> cycle <span style="color: white; background-color: #707ee7; border-radius: 40%;" class="pa-2">{{ data.cycle }}</span></h1>
+      </div>
+    </div>
+    <div v-for="(chart, chartIndex) in realTime" :key="'c'+chartIndex">
+      <div v-for="(grid, gridIndex) in chart" :key="'s'+gridIndex" class="row ma-0 pa-0">
+        <div class="col flex xs0 sm0 lg0 md0 xl0 xxl1"/>
+        <div class="col flex xs2 sm2 lg2 md2 xl2 xxl1" pa-0 ma-0>
+          <p color="primary" style="text-align: right;">{{ grid.name }}</p>
+        </div>
+        <!-- value (y-axis) -->
+        <div class="col flex sm2 xl2 md2 xs2">
+          <va-input
+            label="y-value"
+            disable="disable"
+            v-model="grid.yValue"
+          />
+        </div>
+        <!-- unit (y-axis) -->
+        <div class="col flex sm2 xl2 md2 xs2">
+          <va-select
+            label="y-unit"
+            v-model="grid.yUnit"
+            :options="grid.yUnitOption"
+            noClear
+          />
+        </div>
+        <div class="col flex sm1 xl1 md1 xs1"></div>
+        <!-- value (x-axis) -->
+        <div class="col flex sm2 xl2 md2 xs2">
+          <va-input
+            label="x-value"
+            disable="disable"
+            v-model="grid.xValue"
+          />
+        </div>
+        <!-- unit (x-axis) -->
+        <div class="col flex sm2 xl2 md2 xs2">
+          <va-select
+            label="x-unit"
+            v-model="grid.xUnit"
+            :options="grid.xUnitOption"
+            noClear
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapFields } from 'vuex-map-fields'
+import { chartRouter } from './CanvasChartTable'
+import configTable from '@/data/config-table/index.js'
+import newTooltip from '@/factories/chart/tooltipFactory'
+
+export default {
+  name: 'CanvasChartRealTimeDisplay',
+  props: {
+    chartID: {
+      type: [Number, String],
+      required: true,
+    },
+  },
+  computed: {
+    ...mapFields('taskContent', [
+      'chartData',
+      'deviceListNew',
+    ]),
+  },
+  data () {
+    return {
+      data: null,
+      configTable: configTable,
+      chartRouter: chartRouter,
+      realTime: [[]],
+    }
+  },
+  methods: {
+    // for user to choose wanted unit
+    setUnit: function (gridIndex, channelIndex) {
+      // construct realTime object, i.e., record the coressponding value and unit
+      // the formate imitates the data.gridSource
+      if (this.data !== undefined && this.data.gridSource !== undefined) {
+        const _xPhysicsQuantity = this.data.gridSource[gridIndex][channelIndex].name.split('_')[0].at(-1)
+        const _yPhysicsQuantity = this.data.gridSource[gridIndex][channelIndex].name.split('_')[1].at(-1)
+        const [_xAxis, _yAxis] = this.chartRouter.getChartTable(_xPhysicsQuantity, _yPhysicsQuantity)
+        const _realTime = JSON.parse(JSON.stringify(this.realTime))
+        const _newChannel = {}
+        // set name, sourceIndex in data.series
+        _newChannel.name = this.data.gridSource[gridIndex][channelIndex].name
+        _newChannel.seriesSource = this.data.series.findIndex((ele) => ele.name === _newChannel.name)
+        // set x-axis
+        _newChannel.xValue = 0
+        _newChannel.xUnit = _xAxis.default.defaultUnit
+        _newChannel.xScale = _xAxis.default.unit
+        _newChannel.xUnitOption = Object.keys(_xAxis.default.unit)
+        _newChannel.xName = _xAxis.default.name
+        // set y-axis
+        _newChannel.yValue = 0
+        _newChannel.yUnit = _yAxis.default.defaultUnit
+        _newChannel.yScale = _yAxis.default.unit
+        _newChannel.yUnitOption = Object.keys(_yAxis.default.unit)
+        _newChannel.yName = _yAxis.default.name
+        // set functional
+        _newChannel.functional = 'default'
+
+        // padding
+        while (gridIndex >= _realTime.length) {
+          _realTime.push([])
+        }
+        while (channelIndex >= _realTime[gridIndex].length) {
+          _realTime[gridIndex].push({})
+        }
+
+        // merge the additional part into original part
+        _realTime[gridIndex][channelIndex] = _newChannel
+        this.realTime = _realTime
+      }
+    },
+    // record the latest data as the real time value
+    updateValue: function () {
+      if ((this.realTime.length === 0)) {
+        return
+      }
+      for (let gridIndex = 0; gridIndex < this.realTime.length; gridIndex++) {
+        for (let channelIndex = 0; channelIndex < this.realTime[gridIndex].length; channelIndex++) {
+          // miss the source of data -> try to find the source
+          if (this.realTime[gridIndex][channelIndex].seriesSource === -1) {
+            this.realTime[gridIndex][channelIndex].seriesSource = this.data.series.findIndex((ele) => ele.name === this.realTime[gridIndex][channelIndex].name)
+          }
+
+          // the device is active now --> update the real time value
+          if (this.data.series[this.realTime[gridIndex][channelIndex].seriesSource] !== undefined && this.data.series[this.realTime[gridIndex][channelIndex].seriesSource].data !== undefined && this.data.series[this.realTime[gridIndex][channelIndex].seriesSource].data.length > 0) {
+            this.realTime[gridIndex][channelIndex].xValue = (this.data.series[this.realTime[gridIndex][channelIndex].seriesSource].data.at(-1)[0] / this.realTime[gridIndex][channelIndex].xScale[this.realTime[gridIndex][channelIndex].xUnit]).toFixed(3)
+            this.realTime[gridIndex][channelIndex].yValue = (this.data.series[this.realTime[gridIndex][channelIndex].seriesSource].data.at(-1)[1] / this.realTime[gridIndex][channelIndex].yScale[this.realTime[gridIndex][channelIndex].yUnit]).toFixed(3)
+          }
+        }
+      }
+    },
+    // match the number of real time display bar to data.gridSource
+    matchChart: function () {
+      for (let gridIndex = 0; gridIndex < this.data.gridSource.length; gridIndex++) {
+        if (this.data.gridSource[gridIndex] !== undefined) {
+          for (let channelIndex = 0; channelIndex < this.data.gridSource[gridIndex].length; channelIndex++) {
+            if (gridIndex >= this.realTime.length) {
+              this.setUnit(gridIndex, channelIndex)
+            } else if (channelIndex >= this.realTime[gridIndex].length) {
+              this.setUnit(gridIndex, channelIndex)
+            }
+          }
+        }
+      }
+    },
+    // match the formatter to current unit and functional
+    matchFormatter: function () {
+      for (let gridIndex = 0; gridIndex < this.realTime.length; gridIndex++) {
+        for (let channelIndex = 0; channelIndex < this.realTime[gridIndex].length; channelIndex++) {
+          if (channelIndex === 0) {
+            const _xUnit = this.realTime[gridIndex][channelIndex].xUnit
+            const _yUnit = this.realTime[gridIndex][channelIndex].yUnit
+            const _xScale = this.realTime[gridIndex][channelIndex].xScale[this.realTime[gridIndex][channelIndex].xUnit]
+            const _yScale = this.realTime[gridIndex][channelIndex].yScale[this.realTime[gridIndex][channelIndex].yUnit]
+
+            // update xAxis.formatter
+            if (this.realTime[gridIndex][channelIndex].xName === 'Time') {
+              this.data.xAxis[gridIndex].axisLabel.formatter = this.timeFormatter
+            } else {
+              this.data.xAxis[gridIndex].axisLabel.formatter = function (val) {
+                return parseFloat(val / _xScale).toFixed(2) + _xUnit
+              }
+            }
+            // update yAxis.formatter
+            if (this.realTime[gridIndex][channelIndex].yName === 'Time') {
+              this.data.yAxis[gridIndex].axisLabel.formatter = this.timeFormatter
+            } else {
+              this.data.yAxis[gridIndex].axisLabel.formatter = function (val) {
+                return parseFloat(val / _yScale).toFixed(2) + _yUnit
+              }
+            }
+            // update tooltip.formatter
+            this.data.tooltip.formatter = newTooltip(this.realTime).formatter
+          }
+        }
+      }
+    },
+    // match the data to operated data in CanvasChart.vue
+    matchData: function (canvasChartData) {
+      this.data = canvasChartData
+    },
+    // match the functional to operated data in CanvasChart.vue
+    matchFunctional: function (newFunctional, gridIndex, channelIndex) {
+      if (this.realTime[gridIndex][channelIndex] === undefined) return
+      if (this.realTime[gridIndex][channelIndex].functional === newFunctional) return
+      const _currChannel = this.realTime[gridIndex][channelIndex]
+      const _xPhysicsQuantity = this.data.gridSource[gridIndex][channelIndex].name.split('_')[0].at(-1)
+      const _yPhysicsQuantity = this.data.gridSource[gridIndex][channelIndex].name.split('_')[1].at(-1)
+      const [_xAxis, _yAxis] = this.chartRouter.getChartTable(_xPhysicsQuantity, _yPhysicsQuantity)
+
+      _currChannel.functional = newFunctional
+      // set x-axis
+      _currChannel.xUnit = _xAxis.default.defaultUnit
+      _currChannel.xScale = _xAxis.default.unit
+      _currChannel.xUnitOption = Object.keys(_xAxis.default.unit)
+      _currChannel.xName = _xAxis.default.name
+      // set y-axis
+      _currChannel.yUnit = _yAxis[newFunctional].defaultUnit
+      _currChannel.yScale = _yAxis[newFunctional].unit
+      _currChannel.yUnitOption = Object.keys(_yAxis[newFunctional].unit)
+      _currChannel.yName = _yAxis[newFunctional].name
+    },
+    timeFormatter: function (val) {
+      let label = ''
+      const hour = Math.floor(val / 3.6e9)
+      const minute = Math.floor((val % 3.6e9) / 1000000 / 60)
+      const second = Math.floor((val % 6e7) / 1000000)
+      const millisecond = Math.floor((val % 1e6) / 1000)
+      const microsecond = Math.floor(val % 1e6) - 1000 * millisecond
+
+      if (hour > 0) {
+        label += hour + ' h '
+      }
+      if (minute > 0) {
+        label += minute + ' m '
+      }
+      if (second > 0) {
+        label += second + ' s '
+      }
+      if (millisecond > 0) {
+        label += millisecond + ' ms '
+      }
+      if (microsecond >= 0 && hour === 0 && minute === 0 && second === 0) {
+        label += microsecond + ' µs '
+      }
+      return label
+    },
+  },
+  mounted () {
+    this.data = this.chartData[this.chartID]
+  },
+  watch: {
+    data: {
+      handler: function () {
+        this.updateValue()
+        this.matchChart()
+      },
+      deep: true,
+    },
+    realTime: {
+      handler: function () {
+        this.matchFormatter()
+      },
+      deep: true,
+    },
+  },
+}
+</script>
@@ -2,10 +2,10 @@
  <div>
    <div class="row flex sm12 xl12 md12 xs12 align--center my-0 py-0">
      <div class="flex sm9 xl9 md9 xs9 px-0 mx-0">
-        <p class="display-6">filter<p/>
+        <p class="display-6">filter</p>
      </div>
      <div class="flex sm3 xl3 md3 xs3 pa-0 ma-0">
-        <va-toggle v-model="data.filter.open" small @click.native="() => {}"/>
+        <va-toggle v-model="chartData[chartID].filter.open" small @click.native="() => {}"/>
      </div>
      <!-- <div class="flex sm12 xl12 md12 xs12 px-0 mx-0">
        <p class="display-6">Protect recording channels<p/>
@@ -24,19 +24,23 @@
 </template>

 <script>
-import { chartData } from '../../../../data/task/ChartsManagement'
+import { mapFields } from 'vuex-map-fields'

 export default {
  name: 'canvas-chart-setting',
  props: {
    chartID: {
-      type: Number,
+      type: [Number, String],
      required: true,
    },
  },
+  computed: {
+    ...mapFields('taskContent', [
+      'chartData',
+    ]),
+  },
  data () {
    return {
-      data: chartData.getAllChartsData()[this.chartID],
    }
  },
  methods: {
@@ -45,7 +45,6 @@
            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)" >
@@ -56,11 +55,12 @@
    <va-tree-root>
      <va-tree-category
        style="font-size: 20px;"
-        v-for="grid in grids"
+        v-for="grid in chartData[chartID].grid"
        :key="grid.index"
-        :label="'Subplot ' + grid.index">
+        :label="'Subplot ' + grid.index"
+      >
        <va-tree-node
-          v-for="series in gridSource[grid.index]"
+          v-for="series in chartData[chartID].gridSource[grid.index]"
          :key="series.name"
        >
          <div class="flex row align--center">
@@ -86,20 +86,16 @@
 </template>

 <script>
-// import { getChartsData } from '../../../../../data/task/ChartsManagement'
-
 import { taskInfo } from '../../../../data/task/TaskInfo'
-import { chartData } from '../../../../data/task/ChartsManagement'
+import { mapFields } from 'vuex-map-fields'
+import { mapActions } from 'vuex'
+import taskTypes from '@/store/modules/task/content/types'

 export default {
  name: 'canvas-chart-source',
  props: {
-    gridInfo: {
-      type: Array,
-      required: true,
-    },
    chartID: {
-      type: Number,
+      type: [Number, String],
      required: true,
    },
  },
@@ -107,14 +103,7 @@ export default {
    return {
      error: '',
      gridSelection: '',
-      gridOptions: [
-        {
-          id: 0,
-          value: 0,
-        },
-      ],
-      grids: this.gridInfo,
-      gridSource: chartData.getAllChartsData()[this.chartID].gridSource,
+      gridOptions: [],
      channelSelectX: '',
      channelOptionsX: [],
      channelSelectY: '',
@@ -123,21 +112,38 @@ export default {
      channelSelectDisableY: true,
      deviceSelectX: '',
      deviceSelectY: '',
-      deviceOptions: taskInfo.getDeviceList(),
+      // deviceOptions:,
      sourceAddStatus: true,
      sourceList: [],
    }
  },
+  computed: {
+    deviceOptions () {
+      const defaultArray = [{ id: -1, name: 'Time' }]
+      defaultArray.push(...this.deviceListNew.map(ele => {
+        return {
+          name: `[${ele.memory_board}] ${ele.name}`,
+          id: ele.memory_board,
+        }
+      }))
+      return defaultArray
+    },
+    ...mapFields('taskContent', [
+      'chartData',
+      'deviceListNew',
+    ]),
+  },
  watch: {
    deviceOptions: function (val) {
      this.clearSelectOptions()
    },
    deviceSelectX: function () {
      const channelOptions = []
+      const deviceInfo = this.deviceListNew.find(ele => ele.id === this.deviceSelectX.id)
      // console.log(val)
-      if (taskInfo.getDeviceInfo(this.deviceSelectX.id) == null) {
+      if (deviceInfo == null) {
        this.channelSelectDisableX = true
-      } else if (taskInfo.getDeviceInfo(this.deviceSelectX.id).info.library_name.indexOf('Neulive') >= 0) {
+      } else if (deviceInfo.library_name.includes('Neulive')) {
        const channelSet = taskInfo.getDeviceInfo(this.deviceSelectX.id).parameterSet.RECORDING_CH.toString(2).split('').reverse()
        channelSet.forEach((element, index) => {
          if (parseInt(element) > 0) {
@@ -175,12 +181,12 @@ export default {
          }
        })
        this.channelSelectDisableX = false
-      } else if (taskInfo.getDeviceInfo(this.deviceSelectX.id).info.library_name.indexOf('Elite') >= 0) {
+      } else if (deviceInfo.library_name.includes('Elite')) {
        let channelSet
-        if (taskInfo.getDeviceInfo(this.deviceSelectX.id).info.library_name === 'EliteEIS' && taskInfo.getDeviceInfo(this.deviceSelectX.id).parameterSet.MODE === 0) {
+        if (deviceInfo.library_name.includes('EIS') && deviceInfo.configuration.MODE === 0) {
          channelSet = ['Zimag_Raw', 'Zreal_Raw', 'Frequency', 'Cycle', 'Zimag', 'Zreal', 'Impedance', 'Phase', 'Current', 'Level gain']
        } else {
-          channelSet = taskInfo.getDeviceInfo(this.deviceSelectX.id).parameterSet.CHANNEL_LABEL
+          channelSet = deviceInfo.configuration.CHANNEL_LABEL
        }
        // console.log(channelSet)
        channelSet.forEach((element, index) => {
@@ -200,10 +206,11 @@ export default {
    },
    deviceSelectY: function () {
      const channelOptions = []
+      const deviceInfo = this.deviceListNew.find(ele => ele.id === this.deviceSelectY.id)
      // console.log(val)
-      if (taskInfo.getDeviceInfo(this.deviceSelectY.id) == null) {
+      if (deviceInfo == null) {
        this.channelSelectDisableY = true
-      } else if (taskInfo.getDeviceInfo(this.deviceSelectY.id).info.library_name.indexOf('Neulive') >= 0) {
+      } else if (deviceInfo.library_name.indexOf('Neulive') >= 0) {
        const channelSet = taskInfo.getDeviceInfo(this.deviceSelectY.id).parameterSet.RECORDING_CH.toString(2).split('').reverse()
        //  console.log(channelSet)
        channelSet.forEach((element, index) => {
@@ -242,12 +249,12 @@ export default {
          }
        })
        this.channelSelectDisableY = false
-      } else if (taskInfo.getDeviceInfo(this.deviceSelectY.id).info.library_name.indexOf('Elite') >= 0) {
+      } else if (deviceInfo.library_name.indexOf('Elite') >= 0) {
        let channelSet
-        if (taskInfo.getDeviceInfo(this.deviceSelectY.id).info.library_name === 'EliteEIS' && taskInfo.getDeviceInfo(this.deviceSelectY.id).parameterSet.MODE === 0) {
+        if (deviceInfo.library_name.includes('EIS') && deviceInfo.configuration.MODE === 0) {
          channelSet = ['Zimag_Raw', 'Zreal_Raw', 'Frequency', 'Cycle', 'Zimag', 'Zreal', 'Impedance', 'Phase', 'Current', 'Level gain']
        } else {
-          channelSet = taskInfo.getDeviceInfo(this.deviceSelectY.id).parameterSet.CHANNEL_LABEL
+          channelSet = deviceInfo.configuration.CHANNEL_LABEL
        }
        //  console.log(channelSet)
        channelSet.forEach((element, index) => {
@@ -269,7 +276,7 @@ export default {
  methods: {
    updateGridOptions () {
      this.gridOptions = []
-      for (let i = 0; i < this.grids.length; i++) {
+      for (let i = 0; i < this.chartData[this.chartID].grid.length; i++) {
        this.gridOptions.push({
          id: i,
          value: String(i),
@@ -291,7 +298,9 @@ export default {
      this.deviceSelectY = ''
      this.gridSelection = ''
    },
-    addRegisterDeviceChannel: function (gridIndex) {
+    async addRegisterDeviceChannel (gridIndex) {
+      const deviceXInfo = this.deviceListNew.find(ele => ele.id === this.deviceSelectX.id)
+      const deviceYInfo = this.deviceListNew.find(ele => ele.id === this.deviceSelectY.id)
      let deviceNameX
      let deviceNameY
      const deviceIDX = this.deviceSelectX.id
@@ -301,7 +310,7 @@ export default {
      if (this.deviceSelectX.name.indexOf('Neulive') >= 0) {
        deviceNameX = 'Neulive'
      } else if (this.deviceSelectX.name.indexOf('Elite') >= 0) {
-        if (taskInfo.getDeviceInfo(this.deviceSelectX.id).info.library_name === 'EliteEIS') {
+        if (deviceXInfo.library_name.includes('EIS')) {
          deviceNameX = 'EliteEIS'
        } else {
          deviceNameX = 'Elite'
@@ -312,7 +321,7 @@ export default {
      if (this.deviceSelectY.name.indexOf('Neulive') >= 0) {
        deviceNameY = 'Neulive'
      } else if (this.deviceSelectY.name.indexOf('Elite') >= 0) {
-        if (taskInfo.getDeviceInfo(this.deviceSelectY.id).info.library_name === 'EliteEIS') {
+        if (deviceYInfo.library_name.includes('EIS')) {
          deviceNameY = 'EliteEIS'
        } else {
          deviceNameY = 'Elite'
@@ -320,9 +329,19 @@ export default {
      } else if (this.deviceSelectY.name.indexOf('Time') >= 0) {
        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)
+
+      this.taskContentChartRegister({
+        chartID: this.chartID,
+        gridIndex: gridIndex,
+        deviceNameX: deviceNameX,
+        deviceIDX: deviceIDX,
+        channelX: channelX,
+        deviceNameY: deviceNameY,
+        deviceIDY: deviceIDY,
+        channelY: channelY,
+        formula: null,
+      })
+      console.log('deviceSelectX', this.deviceSelectX)
      if (deviceNameX !== 'Time') {
        this.sourceList.push([this.deviceSelectX.name, deviceIDX, channelX].toString())
      }
@@ -331,19 +350,16 @@ export default {
      }
      this.sourceAddStatus = true
      this.clearSelectOptions()
+      await this.taskContentChartSaveToCache({ controllerID: taskInfo.getTaskInfo().controllerID })
+      this.$emit('addSource')
    },
-    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])
+    async addGrid () {
+      this.taskContentChartUpdateGridList({
+        chartID: this.chartID,
+        length: this.chartData[this.chartID].grid.length + 1,
+      })
+      this.updateGridOptions()
+      await this.taskContentChartSaveToCache({ controllerID: taskInfo.getTaskInfo().controllerID })
    },
    checkSourceAddStatus () {
      if (this.sourceList.indexOf([this.deviceSelectX.name, this.deviceSelectX.id, this.channelSelectX.id].toString()) >= 0) {
@@ -371,17 +387,18 @@ export default {
        this.sourceAddStatus = true
      }
    },
-    addProduct () {
-      this.products.push({
-        id: Math.floor(Math.random() * 100000),
-        name: 'New product',
-      })
-    },
    removeProduct (product) {
      this.products = this.products.filter(productToFilter => productToFilter !== product)
    },
-    mounted () {
-    },
+
+    ...mapActions('taskContent', [
+      taskTypes.chart.register,
+      taskTypes.chart.updateGridList,
+      taskTypes.chart.saveToCache,
+    ]),
+  },
+  mounted () {
+    this.updateGridOptions()
  },
 }
 </script>
@@ -0,0 +1,191 @@
+const chartTable = {
+  // split 'A-B' by '-',
+  // then A-B[0] is about 'A' and A-B[1] is about 'B'
+  T_V: [
+    // 0
+    {
+      default: {
+        name: 'Time',
+        unit: {
+          us: 1,
+          ms: 1e3,
+          s: 1e6,
+          min: 60 * 1e6,
+          hour: 60 * 60 * 1e6,
+        },
+        defaultUnit: 's',
+        downloadUnit: 'ms',
+      },
+    },
+    // 1
+    {
+      default: {
+        name: 'Voltage',
+        unit: {
+          uV: 1,
+          mV: 1e3,
+          V: 1e6,
+        },
+        defaultUnit: 'mV',
+        downloadUnit: 'mV',
+      },
+    },
+  ],
+  T_I: [
+    // 0
+    {
+      default: {
+        name: 'Time',
+        unit: {
+          us: 1,
+          ms: 1e3,
+          s: 1e6,
+          min: 60 * 1e6,
+          hour: 60 * 60 * 1e6,
+        },
+        defaultUnit: 's',
+        downloadUnit: 'ms',
+      },
+    },
+    // 1
+    {
+      default: {
+        name: 'Current',
+        unit: {
+          nA: 1,
+          uA: 1e3,
+          mA: 1e6,
+          A: 1e9,
+        },
+        defaultUnit: 'mA',
+        downloadUnit: 'mA',
+      },
+      // Q = ∫ I dt
+      integral: {
+        name: 'Charge',
+        unit: {
+          nC: 1e6,
+          uC: 1e9,
+          mC: 1e12,
+          C: 1e15,
+        },
+        defaultUnit: 'mC',
+        downloadUnit: 'mC',
+      },
+    },
+  ],
+  T_R: [
+    // 0
+    {
+      default: {
+        name: 'Time',
+        unit: {
+          us: 1,
+          ms: 1e3,
+          s: 1e6,
+          min: 60 * 1e6,
+          hour: 60 * 60 * 1e6,
+        },
+        defaultUnit: 's',
+        downloadUnit: 'ms',
+      },
+    },
+    // 1
+    {
+      default: {
+        name: 'Resistor',
+        unit: {
+          mΩ: 1,
+          Ω: 1e3,
+          kΩ: 1e6,
+          MΩ: 1e9,
+        },
+        defaultUnit: 'Ω',
+        downloadUnit: 'Ω',
+      },
+    },
+  ],
+  V_I: [
+    // 0
+    {
+      default: {
+        name: 'Voltage',
+        unit: {
+          uV: 1,
+          mV: 1e3,
+          V: 1e6,
+        },
+        defaultUnit: 'mV',
+        downloadUnit: 'mV',
+      },
+      // 𝜡 = dV/dI
+      differential: {
+        name: 'Impedance',
+        unit: {
+          mΩ: 1,
+          Ω: 1e3,
+          kΩ: 1e6,
+          MΩ: 1e9,
+        },
+        defaultUnit: 'Ω',
+        downloadUnit: 'Ω',
+      },
+      // Power = ∫ V di
+      integral: {
+        name: 'Power',
+        unit: {
+          mW: 1e12,
+          W: 1e15,
+          kW: 1e18,
+        },
+        defaultUnit: 'W',
+        downloadUnit: 'W',
+      },
+    },
+    // 1
+    {
+      default: {
+        name: 'Current',
+        unit: {
+          nA: 1,
+          uA: 1e3,
+          mA: 1e6,
+          A: 1e9,
+        },
+        defaultUnit: 'mA',
+        downloadUnit: 'mA',
+      },
+      // Gm = dI/dV
+      differential: {
+        name: 'Transconductance',
+        unit: {
+          'mA/V': 1,
+          'A/V': 1e3,
+          'kA/V': 1e6,
+        },
+        defaultUnit: 'A/V',
+        downloadUnit: 'A/V',
+      },
+      // Power = ∫ I dv
+      integral: {
+        name: 'Power',
+        unit: {
+          mW: 1e12,
+          W: 1e15,
+          kW: 1e18,
+        },
+        defaultUnit: 'W',
+        downloadUnit: 'W',
+      },
+    },
+  ],
+}
+export const chartRouter = {
+  getChartTable: (xAxis, yAxis) => {
+    const name1 = xAxis + '_' + yAxis
+    const name2 = yAxis + '_' + xAxis
+    if (chartTable[name1] !== undefined) return [chartTable[name1][0], chartTable[name1][1]]
+    else if (chartTable[name2] !== undefined) return [chartTable[name2][1], chartTable[name2][0]]
+    else return 'idiot'
+  },
+}
@@ -0,0 +1,181 @@
+<template>
+  <div class="flex sm12 xl12 md12 xs12">
+    <va-modal
+      v-model="showDeleteModal"
+      size="small"
+      :title="'DELETE'"
+      :message="'The device will be deleted.'"
+      :okText=" $t('modal.confirm') "
+      :cancelText=" $t('modal.cancel') "
+      @ok="remove()"
+    />
+    <va-accordion v-for="device in deviceList" :key="device.id">
+      <va-collapse class="mb-2" :isOpenDefault='true'>
+        <span slot="header" >
+          <va-item :key="device.id" class="pa-0 ma-0"
+          >
+            <va-item-section avatar class="ml-0">
+              <va-avatar style="border-radius: 0;">
+                <img :src="device.picture" :alt="device.name">
+              </va-avatar>
+            </va-item-section>
+
+            <va-item-section class="ml-3" caption>
+              <va-item-label>
+                {{ `[${device.memory_board}]` }} {{ device.name }}
+              </va-item-label>
+              <va-item-label caption>
+                {{ device.mac_address }}
+              </va-item-label>
+            </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.library_name.includes('Elite') && device.status !== 1" class="px-2 py-0 mr-0" color="success" small>START</va-button>
+                <va-button @click.stop="stop(device)" v-if="device.library_name.includes('Elite') && device.status === 1" class="px-2 py-0 mr-0" color="danger" small>STOP</va-button>
+                <va-button id="detectButton" @click.stop="detect(device)" v-if="device.library_name.includes('Elite')" color="primary" class="px-2 py-0 mr-0" small>DETECT</va-button>
+                <va-button  @click.stop="show($event, device)" v-if="developerMode" color="warning" class="px-2 py-0 mr-0" small>Show</va-button>
+              </va-item-label>
+            </va-item-section>
+          </va-item>
+        </span>
+        <div slot="body">
+          <div class="mt-0 mb-0" style="height: 60vh; overflow-y: scroll; overflow-x: hidden;" :key="'detail' + device.id">
+            <div>
+              <file-control-window :ref="`fcwindow_ref_${device.memory_board}`" :device="device" class="pl-0 pr-0" />
+            </div>
+            <div>
+              <device-parameter-window :device="device" class="pl-0 pr-0" />
+            </div>
+          </div>
+        </div>
+      </va-collapse>
+    </va-accordion>
+  </div>
+</template>
+
+<script>
+import DeviceParameterWindow from '../parameter/DeviceParameterWindow'
+// 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'
+import { taskInfo } from '../../../../data/task/TaskInfo'
+import api from '@/data/api'
+// import CanvasChart from '../chart/CanvasChart'
+import { mapFields } from 'vuex-map-fields'
+
+export default {
+  name: 'TaskDeviceList',
+  components: {
+    DeviceParameterWindow,
+    // EliteParameterWindow,
+    // NeuliveParameterWindow,
+    FileControlWindow,
+  },
+  props: {
+    deviceList: {
+      type: Array,
+      required: true,
+    },
+  },
+  data () {
+    return {
+      showDeleteModal: false,
+      selectDevice: null,
+      deviceStopping: false,
+    }
+  },
+  computed: {
+    ...mapFields('', [
+      'developerMode',
+    ]),
+  },
+  methods: {
+    mqttPub: function (topic, mes) {
+      this.$mqtt.publish(topic, mes)
+    },
+    start: async function (device) {
+      if (device.status === 0) {
+        await this.setArchiveSettings(device.memory_board)
+
+        const isDPVMode = device.configuration.MODE === 15
+        if (isDPVMode) {
+          const e1 = parseInt((device.configuration.DPV_e_1 - 25000) / 5)
+          const e2 = parseInt((device.configuration.DPV_e_2 - 25000) / 5)
+          const eFinal = parseInt((device.configuration.DPV_e_final - 25000) / 5)
+
+          if (e1 >= e2 && !(e1 >= eFinal && eFinal >= e2)) {
+            this.pageToast('[Error] Please set E Final correctly.')
+            return false
+          } else if (e2 > e1 && !(e2 >= eFinal && eFinal >= e1)) {
+            this.pageToast('[Error] Please set E Final correctly.')
+            return false
+          }
+        }
+
+        device.status = 1
+        this.$emit('start', device)
+        this.pageToast('The device ' + device.name + ' has been started.')
+
+        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+          header: 'device_instruction/0',
+          device: device.mac_address,
+          instruction: 'start',
+        }))
+
+        api.task.update({
+          device_config: taskInfo.getTaskInfo().deviceListNew,
+        })
+        // CanvasChart.methods.resetClicked()
+      }
+    },
+    stop: function (device) {
+      this.$emit('stop', device)
+      this.pageToast('The device ' + device.name + ' has been stopped.')
+    },
+    setArchiveSettings: async function (deviceID) {
+      await this.$refs[`fcwindow_ref_${deviceID}`][0].setArchiveSettings()
+    },
+    refresh: function () {
+    },
+    pageToast: function (mes) {
+      this.showToast(
+        mes,
+        {
+          icon: 'fa-bell',
+          position: 'bottom-right',
+          duration: 4000,
+        },
+      )
+    },
+    detect: function (device) {
+      this.$emit('detect', device)
+      this.pageToast('The device ' + device.name + ' has been detect.')
+    },
+    show: function (event, device) {
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'show_device_data/0',
+        device: device.memory_board,
+      }))
+    },
+    recoverDetectButton () {
+      document.getElementById('detectButton').className += ' no-dark-style-va-button'
+    },
+    ...mapActions('taskContent', [types.param.checkIfRecordingSetDone, types.param.checkIfStimulationSetDone, types.param.checkIfDeviceSetDone]),
+  },
+  destroyed () {
+  },
+}
+</script>
+
+<style lang="scss">
+  .no-dark-style-va-button {
+    &:focus {
+      filter: brightness(100%);
+    }
+  }
+</style>
@@ -29,22 +29,6 @@
          @detect="detectDevice($event)"
          @sd_card_status="sdCardStatus($event)"
        />
-
-        <!-- <div class="row flex xs12 md12 xl12 sm12 mt-2" style="text-align: center;">
-          <div class="xs10 md10 xl10 sm10">
-            <va-select
-              small
-              v-model="deviceSelect"
-              textBy="name"
-              :options="deviceOptions"
-            />
-          </div>
-          <div>
-            <va-button class="ma-0" color="primary" target="_blank" @click="addDevice(deviceSelect.id)" :disabled="deviceSelect.id == null">
-              REGISTER
-            </va-button>
-          </div>
-        </div> -->
      </div>

    </va-card>
@@ -56,10 +40,11 @@ import { FulfillingBouncingCircleSpinner } from 'epic-spinners'
 import TaskDeviceList from './TaskDeviceList'
 // import TaskDeviceListGM from './neulive-gimer/TaskDeviceListGM'
 import { taskInfo } from '../../../../data/task/TaskInfo'
-import { chartData } from '../../../../data/task/ChartsManagement'
 import { dataStreamBuffer } from '../../../../data/task/DataStreamBuffer'
 import api from '@/data/api'
 import { mapFields } from 'vuex-map-fields'
+import { mapActions } from 'vuex'
+import taskTypes from '@/store/modules/task/content/types'

 export default {
  name: 'TaskDevices',
@@ -108,16 +93,8 @@ 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 = 0; i <= 11; i++) {
+      for (let i = 0; i <= 11; i++) { // 0~7: memboard, 8~11: usb
        if (taskInfo.getDeviceInfoByRawID(i).info.device_status >= 0) {
          const index = this.deviceList.findIndex(d => taskInfo.getRawDeviceID(d.id) === i)
          if (index < 0) {
@@ -137,19 +114,16 @@ export default {
        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) {
      if (!taskInfo.getDeviceInfo(device.id).info.isSync) {
        if (taskInfo.getDeviceInfo(device.id).info.library_name.startsWith('Neulive')) {
-          await chartData.defaultChartGenerator(this.deviceList, device.id, null, 'device')
+          await this.taskContentChartDefaultChartGenerator({
+            _deviceList: this.deviceList,
+            _itemID: device.id,
+            _chartID: null,
+            _type: 'device',
+          })
          this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
            header: 'device_instruction/0',
            device: taskInfo.getRawDeviceID(device.id),
@@ -184,7 +158,12 @@ export default {
            }
          }

-          await chartData.defaultChartGenerator(this.deviceList, device.id, null, 'device')
+          await this.taskContentChartDefaultChartGenerator({
+            _deviceList: this.deviceList,
+            _itemID: device.id,
+            _chartID: null,
+            _type: 'device',
+          })
          this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
            header: 'device_instruction/0',
            device: taskInfo.getRawDeviceID(device.id),
@@ -256,7 +235,12 @@ export default {
        this.pageToast('[Recording] Please select recording channels.')
        return false
      }
-      await chartData.defaultChartGenerator(this.deviceList, device.id, null, 'device')
+      await this.taskContentChartDefaultChartGenerator({
+        _deviceList: this.deviceList,
+        _itemID: device.id,
+        _chartID: null,
+        _type: 'device',
+      })
      if (!taskInfo.getDeviceInfo(device.id).info.isSync) {
        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
          header: 'device_instruction/0',
@@ -448,17 +432,10 @@ export default {
        },
      )
    },
-  },
-  async mounted () {
-    // this.pageMqttSub()
-    // for (const device in this.deviceOptions) {
-    //   this.deviceSelect = this.deviceOptions[device]
-    //   await this.addDevice()
-    // }
-  },
-  destroyed () {
-    // this.loadingDone()
-    // this.pageMqttUnSub()
+
+    ...mapActions('taskContent', [
+      taskTypes.chart.defaultChartGenerator,
+    ]),
  },
  watch: {
  },
@@ -0,0 +1,157 @@
+<template>
+  <div class="flex" :class="cardclass">
+    <va-card>
+      <template slot="header">
+        <va-icon name="fa fa-bluetooth-b mr-3" color="primary"/>
+        <h5 class="mt-0 mb-0">DEVICES</h5>
+      </template>
+      <div v-if="state.LOADING" class="flex-center spinner-box mt-4 mb-5">
+        <fulfilling-bouncing-circle-spinner
+          :animation-duration="3000"
+          :color="this.$themes.primary"
+          :size="60"
+        >
+        </fulfilling-bouncing-circle-spinner>
+      </div>
+      <div v-else class="flex row align--center">
+        <task-device-list-new
+          :ref="'pdlist_ref'"
+          :deviceList="deviceListNew"
+          @start="startDevice($event)"
+          @stop="stopDevice($event)"
+          @detect="detectDevice($event)"
+        />
+      </div>
+    </va-card>
+  </div>
+</template>
+
+<script>
+import { FulfillingBouncingCircleSpinner } from 'epic-spinners'
+import TaskDeviceListNew from './TaskDeviceListNew'
+import { taskInfo } from '../../../../data/task/TaskInfo'
+import { dataStreamBuffer } from '../../../../data/task/DataStreamBuffer'
+import { mapFields } from 'vuex-map-fields'
+import { mapActions } from 'vuex'
+import taskTypes from '@/store/modules/task/content/types'
+import eliteImgUrl from '@/assets/img/elite_img.png'
+
+export default {
+  name: 'TaskDevices',
+  components: {
+    FulfillingBouncingCircleSpinner,
+    TaskDeviceListNew,
+  },
+  props: {
+    cardclass: {
+      type: Array,
+      default: function () {
+        return ['xs12', 'md12', 'xl12', 'sm12']
+      },
+    },
+  },
+  computed: {
+    ...mapFields('taskContent', [
+      'deviceList',
+      'deviceListNew',
+    ]),
+  },
+  created () {
+  },
+  data () {
+    return {
+      deviceSelect: '',
+      deviceOptions: taskInfo.getDeviceListNotRegister(),
+      state: {
+        LOADING: false,
+      },
+      stiTimeOut: null,
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    sleep: async function (time) {
+      return new Promise((resolve) => setTimeout(resolve, time))
+    },
+    mqttPub: function (topic, mes) {
+      this.$mqtt.publish(topic, mes)
+    },
+    loadingStart: async function () {
+      this.state.LOADING = true
+    },
+    loadingDone: async function () {
+      this.state.LOADING = false
+      this.createDeviceList()
+    },
+    createDeviceList: async function () {
+      this.deviceListNew = this.deviceListNew.map(ele => {
+        // ele.id = ele.mac_address
+        return ele
+      })
+      this.deviceListNew.map((ele) => {
+        ele.picture = eliteImgUrl
+      })
+
+      for (const device of this.deviceListNew) {
+        this.$emit('add', device.memory_board)
+      }
+    },
+    startDevice: async function (device) {
+      this.$emit('refreshSetting', device)
+    },
+    stopDevice: async function (device) {
+      await dataStreamBuffer.removeByDevice(device.memory_board)
+      if (device.library_name.includes('Elite')) {
+        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+          header: 'device_instruction/0',
+          device: device.mac_address,
+          instruction: 'interrupt',
+        }))
+      }
+      device.status = 0
+    },
+    detectDevice: function (device) {
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_instruction/0',
+        device: device.mac_address,
+        instruction: 'VIS_DEVICE_DETECT',
+      }))
+      setTimeout(() => {
+        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+          header: 'device_instruction/0',
+          device: device.mac_address,
+          instruction: 'VIS_DEVICE_DONE',
+        }))
+        this.$refs.pdlist_ref.recoverDetectButton()
+      }, 5000)
+    },
+    generateChart: function (device) {
+      this.$emit('add', device.id)
+    },
+    setArchiveSettings: function () {
+      if (this.$refs.pdlist_ref != null) {
+        this.$refs.pdlist_ref.setArchiveSettings()
+      }
+    },
+    refresh: function () {
+    },
+    pageToast: function (mes) {
+      this.showToast(
+        mes,
+        {
+          icon: 'fa-bell',
+          position: 'bottom-right',
+          duration: 4000,
+        },
+      )
+    },
+
+    ...mapActions('taskContent', [
+      taskTypes.chart.defaultChartGenerator,
+    ]),
+  },
+  watch: {
+  },
+}
+</script>
@@ -36,12 +36,11 @@ import { FulfillingBouncingCircleSpinner } from 'epic-spinners'
 // import TaskDeviceList from './TaskDeviceList'
 import TaskDeviceListGM from './TaskDeviceListGM'
 import { taskInfo } from '@/data/task/TaskInfo'
-import { chartData } from '@/data/task/ChartsManagement'
 import { dataStreamBuffer } from '@/data/task/DataStreamBuffer'
 import api from '@/data/api'
 import { mapActions } from 'vuex'
 import { mapFields } from 'vuex-map-fields'
-import types from '@/store/modules/task/content/types'
+import taskTypes from '@/store/modules/task/content/types'

 export default {
  name: 'TaskDevices',
@@ -111,14 +110,6 @@ export default {
        name: 'Time',
      })
      taskInfo.getDeviceList().push(...this.deviceList)
-      // console.log('ppp', taskInfo.getDeviceList(), this.deviceList)
-      // 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)
-      //   // })
-      // }
    },
    detectDevice: function (device) {
      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
@@ -154,7 +145,12 @@ export default {
        this.pageToast('[Recording] Please select recording channels.')
        return false
      }
-      await chartData.defaultChartGenerator(this.deviceList, device.id, null, 'device')
+      await this.taskContentChartDefaultChartGenerator({
+        _deviceList: this.deviceList,
+        _itemID: device.id,
+        _chartID: null,
+        _type: 'device',
+      })
      this.deviceList.forEach(_device => {
        if (_device.library_name === 'Neulive3.5-STI') {
          this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
@@ -375,19 +371,15 @@ export default {
        },
      )
    },
-    ...mapActions('taskContent', [types.gimer.checkDeviceStatus]),
+
+    ...mapActions('taskContent', [
+      taskTypes.gimer.checkDeviceStatus,
+      taskTypes.chart.defaultChartGenerator,
+    ]),
  },
  async mounted () {
-    //  console.log('sss', taskInfo.getDeviceList(), this.deviceList)
-    // this.pageMqttSub()
-    // for (const device in this.deviceOptions) {
-    //   this.deviceSelect = this.deviceOptions[device]
-    //   await this.addDevice()
-    // }
  },
  destroyed () {
-    // this.loadingDone()
-    // this.pageMqttUnSub()
  },
  watch: {
  },
@@ -104,7 +104,8 @@

 <script>
 import { taskInfo } from '../../../../data/task/TaskInfo'
-import { chartData } from '../../../../data/task/ChartsManagement'
+import { mapActions } from 'vuex'
+import taskTypes from '@/store/modules/task/content/types'

 export default {
  name: 'TaskFormula',
@@ -173,11 +174,16 @@ export default {
      this.formulaNumber--
      this.$emit('remove', this.formulaRemoveSelect.id)
    },
-    generate: function (formula) {
+    generate: async function (formula) {
      switch (formula.type) {
        case 'Sheet Resistance':
          formula.dataNow = 0
-          chartData.defaultChartGenerator(this.deviceList, formula.id, null, 'formula')
+          await this.taskContentChartDefaultChartGenerator({
+            _deviceList: this.deviceList,
+            _itemID: formula.id,
+            _chartID: null,
+            _type: 'formula',
+          })
          break
      }
      this.pageToast('The ' + formula.name + 'has been applied.')
@@ -192,6 +198,10 @@ export default {
        },
      )
    },
+
+    ...mapActions('taskContent', [
+      taskTypes.chart.defaultChartGenerator,
+    ]),
  },
  mounted () {
    // this.pageMqttSub()
@@ -34,8 +34,8 @@ export default {
  components: {
  },
  props: {
-    deviceID: {
-      type: Number,
+    device: {
+      type: Object,
      required: true,
    },
    deviceName: {
@@ -61,24 +61,27 @@ export default {
  },
  methods: {
    fileNameChange: async function (name) {
-      if (this.deviceInfo.info.isSync === false) {
+      if (this.device.status === 0) {
+        if (name === '') {
+          name = this.getCurrentTime()
+        }
+
        let fileNameCount = await api.meta.getByName(name)
-        if (fileNameCount.data != null) {
+        if (fileNameCount.status === 200) {
          let duplicateCount = 1
          let fileName = name
-          while (fileNameCount.data.length !== 0) {
+          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
+          if (fileName !== this.device.recording_file_name) {
+            this.device.recording_file_name = fileName
            this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
              header: 'device_recording_file_name/0',
-              device: taskInfo.getRawDeviceID(this.deviceID),
+              device: this.device.mac_address,
              content: fileName,
            }))
          }
@@ -87,13 +90,13 @@ export default {
    },
    directorySelect: function (directoryInfo) {
      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)
+        if (this.device.parent.folder === undefined || this.device.parent.folder.indexOf(directoryInfo.id) === -1) {
+          if (this.device.status === 0) {
+            this.device.parent.folder = []
+            this.device.parent.folder.push(directoryInfo.id)
            this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
              header: 'device_parent/0',
-              device: taskInfo.getRawDeviceID(this.deviceID),
+              device: this.device.mac_address,
              content: {
                folder: [directoryInfo.id],
              },
@@ -103,32 +106,28 @@ export default {
      }
    },
    setArchiveSettings: async function () {
-      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
+      if (this.device.status === 1) {
+        this.fileNameInput = this.device.recording_file_name
      } else {
-        if (this.deviceInfo.info.recording_file_name === 'recording_data' || this.deviceInfo.info.recording_file_name.split('-').length === 7) {
+        if (this.device.recording_file_name === 'recording_data' || this.device.recording_file_name.split('-').length === 7) {
          this.fileNameInput = now
        } else {
-          this.fileNameInput = this.deviceInfo.info.recording_file_name
+          this.fileNameInput = this.device.recording_file_name
        }
      }
-
-      this.fileNameChange(this.fileNameInput)
+      await this.fileNameChange(this.fileNameInput)

      // 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) {
+      if (Object.keys(this.device.parent).length === 0) {
        this.directory = this.directoryOptions[0]
      } else {
        for (const directory of this.directoryOptions) {
-          if (this.deviceInfo.info.parent.folder.includes(directory.id)) {
+          if (this.device.parent.folder.includes(directory.id)) {
            this.directory = directory
          }
        }
@@ -136,32 +135,18 @@ export default {
    },
    getCurrentTime: function () {
      const now = new Date()
-      return [now.getFullYear(), now.getMonth() + 1, now.getDate(), now.getHours(), now.getMinutes(), now.getSeconds(), this.deviceID].join('-')
+      return [now.getFullYear(), now.getMonth() + 1, now.getDate(), now.getHours(), now.getMinutes(), now.getSeconds(), this.device.memory_board].join('-')
    },
    mqttPub: function (topic, mes) {
      this.$mqtt.publish(topic, mes)
    },
    pageInit: async function () {
    },
-    refresh: function () {
-      this.$nextTick(() => {
-        this.setArchiveSettings()
-      })
-    },
  },
  mounted () {
-    this.pageInit()
    this.setArchiveSettings()
  },
  destroyed () {
  },
-  watch: {
-    deviceID: function (val) {
-      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
-        header: 'get_device_info/0',
-        device: taskInfo.getRawDeviceID(val),
-      }))
-    },
-  },
 }
 </script>
@@ -0,0 +1,315 @@
+<template>
+  <div class="flex px-0 mx-0 my-0 py-0">
+    <va-tree-root class="flex sm12 xl12 md12 xs12 px-0 mx-0 my-0 py-0">
+      <div class="flex sm12 xl12 md12 xs12 px-0 mx-0 my-0 py-0">
+        <div class="flex row">
+          <!-- Select Working Mode -->
+          <div class="flex sm10 xl10 md10 xs10 px-0 mx-0 my-0 py-0">
+            <va-select
+              @input="workingModeSelectChange(workingModeSelect)"
+              :label="'WORKING MODE'"
+              v-model="workingModeSelect"
+              textBy="description"
+              :options="workingModeOptions"
+              noClear
+              style="min-width: 50px;"
+            />
+          </div>
+          <div class="flex sm2 xl2 md2 xs2 px-0 mx-0 my-0 py-0 pl-2">
+            <va-button class="pa-0 ma-0 mt-2 circle-button" small color="dark" @click="showModal=true">
+              <va-icon
+                name="fa fa-info"
+                color="white"
+              />
+            </va-button>
+          </div>
+        </div>
+      </div>
+      <!-- split because of styling problem(treenode), combine together furture -->
+      <!-- EIS -->
+      <div v-if="library.includes('EIS')">
+        <component
+          v-for="name in parameterArrayInMode"
+          :key="name"
+          :is="parameterTable[name].componentType"
+          :templateType=1
+          :withHeader="true"
+          :parameterName="name"
+          :inputValue="parameter[name]"
+          :disable="name === 'CTRL_HIGH_Z_15' && device && device.status === 0"
+          v-bind="parameterTable[name]"
+          @parameterChange="parameterChange"
+          @getParameter="getParameter"
+          @sendInstruction="sendInstruction"
+        />
+      </div>
+      <!-- ZM15-PulseSensingMode -->
+      <div v-else-if="parameter.MODE === 14">
+        <EliteParameterRecordingElitePulseSensing
+          :parameter="parameter"
+          :device="device"
+          :parameterTable="parameterTable"
+          @parameterChange="parameterChange"
+          @getParameter="getParameter"
+          @sendInstruction="sendInstruction"
+        />
+      </div>
+      <!-- ZM15-DPVMode -->
+      <div v-else-if="parameter.MODE === 15">
+        <EliteParameterRecordingEliteDPV
+          :parameter="parameter"
+          :device="device"
+          :parameterTable="parameterTable"
+          @parameterChange="parameterChange"
+          @getParameter="getParameter"
+          @sendInstruction="sendInstruction"
+        />
+      </div>
+      <!-- ZM15-OtherModes -->
+      <div v-else>
+        <va-tree-category
+          v-for="name in parameterArrayInMode"
+          :key="name"
+          :label="`${typeof parameterTable[name].showName === 'function'
+            ? parameterTable[name].showName(modeSelection)
+            : parameterTable[name].showName} ${parameterValue(name)}`"
+          style="font-size: 20px;"
+        >
+          <va-tree-node>
+            <component
+              :is="parameterTable[name].componentType"
+              :parameterName="name"
+              :inputValue="parameter[name]"
+              :disable="name === 'CTRL_HIGH_Z_15' && device && device.status === 0"
+              v-bind="parameterTable[name]"
+              @parameterChange="parameterChange"
+              @getParameter="getParameter"
+              @sendInstruction="sendInstruction"
+            />
+          </va-tree-node>
+        </va-tree-category>
+      </div>
+    </va-tree-root>
+    <!-- guide picture button -->
+    <div>
+      <vue-final-modal
+        v-if="library.includes('Elite_EDC')"
+        v-model="showModal"
+        classes="modal-container"
+        content-class="modal-content"
+        :hide-overlay="true"
+        :click-to-close="true"
+        :esc-to-close="true"
+        :drag="true"
+        :resize="true"
+        :resize-directions="['tr', 'br', 'bl', 'tl']"
+      >
+        <!-- <va-icon class='fa fa-close modal__close' @click="showModal=false"></va-icon>
+        <span class="modal__title"></span> -->
+        <div class="modal__content">
+          <img :src="require('@/assets/img/elite-wire/' + getImageUrl + '.svg')" class="modal_img" alt="No Pic" draggable="false" >
+          <!-- <img :src="`${pat}`" class="imgaa" alt="No Pic" draggable="false"> -->
+        </div>
+      </vue-final-modal>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import InputRange from '../parameter/itemNew/InputRange'
+import InputButtonToggle from '../parameter/itemNew/InputButtonToggle'
+import InputField from '../parameter/itemNew/InputField'
+import MultiInputField from '../parameter/itemNew/MultiInputField'
+import EliteParameterRecordingEliteDPV from '../parameter/itemNew/DPVNew/EliteParameterRecordingEliteDPV'
+import DevMode from '../parameter/itemNew/DevMode'
+import EliteParameterRecordingElitePulseSensing from '../parameter/itemNew/PulseSensingNew/EliteParameterRecordingElitePulseSensing'
+import { VueFinalModal } from 'vue-final-modal'
+import { mapFields } from 'vuex-map-fields'
+import configTable from '@/data/config-table/index'
+
+export default {
+  name: 'EliteParameterRecordingElitezm15',
+  components: {
+    /* eslint-disable vue/no-unused-components */
+    EliteParameterRecordingElitePulseSensing,
+    EliteParameterRecordingEliteDPV,
+    VueFinalModal,
+    InputRange,
+    InputButtonToggle,
+    InputField,
+    MultiInputField,
+    DevMode,
+  },
+  props: {
+    parameter: {
+      type: Object,
+      required: true,
+    },
+    library: {
+      type: String,
+    },
+    serialNumber: {
+      type: [String, Array],
+    },
+    device: {
+      type: Object,
+      default: null,
+    },
+  },
+  computed: {
+    parameterTable () {
+      if (this.library !== undefined) {
+        const config = configTable.getConfig(this.library)
+        if (config !== undefined) {
+          return config
+        }
+      }
+      if (this.serialNumber !== undefined) {
+        const config = configTable.getConfig(this.serialNumber)
+        if (config !== undefined) {
+          return config
+        }
+      }
+      return null
+    },
+    parameterArrayInMode () {
+      return this.workingModeSelect && this.parameterTable.MODE[this.workingModeSelect.id].parameter
+    },
+    modeSelection () {
+      if (this.parameter.MODE) {
+        return this.parameter.MODE
+      }
+      return this.workingModeSelect.id
+    },
+    getImageUrl () {
+      if (this.workingModeSelect === null) {
+        return 'IV-Wire'
+      } else {
+        return this.workingModeSelect.img_src
+      }
+    },
+    deviceStatus () {
+      if (this.device === null) {
+        return false
+      } else {
+        return this.device.status === 0
+      }
+    },
+    ...mapFields('', [
+      'developerMode',
+    ]),
+    ...mapFields('taskContent', [
+      'deviceListNew',
+    ]),
+  },
+  created () {
+  },
+  data () {
+    return {
+      showModal: false,
+      workingModeSelect: null,
+      workingModeOptions: [],
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    mqttPub: function (topic, mes) {
+      this.$mqtt.publish(topic, mes)
+    },
+    parameterValue (name) {
+      const value = this.parameter[name]
+      if (this.parameterTable[name].type === 'number') {
+        const scale = this.parameterTable[name].unit[this.parameterTable[name].defaultUnit]
+        return ` ( ${this.parameterTable[name].outputReadabilityData(value, scale)} ${this.parameterTable[name].defaultUnit} )`
+      } else if (this.parameterTable[name].type === 'array') {
+        return ` ( ${this.parameterTable[name].outputReadabilityData(value)} )`
+      } else if (this.parameterTable[name].type === 'none') {
+        return ''
+      }
+    },
+    parameterChange: function (name, value, debounce = false) {
+      /** if parameter is equal to value, then don't change, JSON.stringify is for array & object compare */
+      if (JSON.stringify(value) !== JSON.stringify(this.parameter[name])) {
+        this.parameter[name] = value
+        debounce === false
+          ? this.$emit('setParameter', name, value)
+          : this.$emit('setParameterWithDebounce', name, value)
+      }
+    },
+    refresh () {
+    },
+    workingModeSelectChange (val) {
+      this.workingModeSelect = val
+      console.log('workingModeSelectChange', this.workingModeSelect.id, this.parameter.MODE)
+
+      if (this.workingModeSelect.id !== this.parameter.MODE) {
+        this.parameterChange('MODE', this.workingModeSelect.id)
+
+        // if device is idle, then setting highz when mode switch
+        if (this.deviceStatus === true && this.workingModeSelect.highz !== undefined) {
+          this.parameterChange('CTRL_HIGH_Z_15', this.workingModeSelect.highz)
+        }
+      }
+    },
+    getParameter: function (name) {
+      this.$emit('getParameter', name)
+    },
+    sendInstruction: function (instr) {
+      this.$emit('sendInstruction', instr)
+    },
+  },
+  mounted () {
+    // dev mode
+    // this.developerMode === true
+    //   ? this.workingModeOptions = this.workingModeDevOptions
+    //   : this.workingModeOptions = this.workingModeNoDevOptions
+    this.workingModeOptions = this.parameterTable.MODE_OPTIONS
+    // init mode
+    this.workingModeSelect = (this.parameter.MODE !== undefined) ? this.workingModeOptions.find(ele => ele.id === this.parameter.MODE) : this.workingModeOptions[0]
+  },
+  watch: {
+  },
+  destroyed () {
+  },
+}
+</script>
+<style lang="scss">
+.modal-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.modal-content {
+  display: flex;
+  flex-direction: column;
+  margin: 0 1rem;
+  padding: 1rem;
+  border: 1px solid #e2e8f0;
+  border-radius: 0.5rem;
+  background: #ffffff;
+}
+
+.modal__title {
+  font-size: 1.5rem;
+  font-weight: 700;
+}
+
+.modal__content {
+  flex-grow: 1;
+  overflow-y: auto;
+}
+
+.modal_img {
+  max-width: 100%;
+  max-height: 640px;
+}
+
+.modal__close {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+}
+</style>
@@ -0,0 +1,78 @@
+<template>
+  <div v-if="device">
+    <device-parameter-recording
+      :parameter="device.configuration"
+      :library="device.library_name"
+      :serialNumber="device.serial_number"
+      :device="device"
+      @sendInstruction="sendInstruction"
+      @getParameter="getParameter"
+      @setParameter="setParameter"
+      @setParameterWithDebounce="setParameterWithDebounce"
+    />
+  </div>
+</template>
+
+<script>
+
+import DeviceParameterRecording from './DeviceParameterRecording'
+import { taskInfo } from '../../../../data/task/TaskInfo'
+import _ from 'lodash'
+
+export default {
+  name: 'EliteParameterWindow',
+  components: {
+    DeviceParameterRecording,
+  },
+  props: {
+    device: {
+      type: Object,
+    },
+  },
+  data () {
+    return {
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    mqttPublish: function (topic, mes) {
+      this.$mqtt.publish(topic, mes)
+    },
+    sendInstruction: function (instruction) {
+      this.mqttPublish(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_instruction/0',
+        device: this.device.mac_address,
+        instruction: instruction,
+      }))
+    },
+    getParameter: function (parameterName) {
+      this.mqttPublish(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_parameter_value/0',
+        device: this.device.mac_address,
+        parameter: parameterName,
+      }))
+    },
+    setParameter: function (parameterName, parameterValue) {
+      this.mqttPublish(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_parameter/0',
+        device: this.device.mac_address,
+        parameter: parameterName,
+        content: parameterValue,
+      }))
+    },
+    setParameterWithDebounce: _.debounce(function (parameterName, parameterValue) {
+      this.mqttPublish(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_parameter/0',
+        device: this.device.mac_address,
+        parameter: parameterName,
+        content: parameterValue,
+      }))
+    }, 100),
+  },
+  mounted () {
+  },
+  watch: {
+  },
+}
+</script>
@@ -1,32 +1,53 @@
 <template>
  <div>
-    <elite-parameter-recording v-if="eliteVer=='1'" :ref="'rec_ref_1'" :deviceID="deviceID"/>
-    <elite-parameter-recording-elitezm15 v-else-if="eliteVer=='2'" :ref="'rec_ref_2'" :deviceID="deviceID"/>
-    <elite-parameter-recording-elite-e-i-s v-else-if="eliteVer=='4'" :ref="'rec_ref_4'" :deviceID="deviceID"/>
+    <!-- <elite-parameter-recording v-if="eliteVer=='1'" :ref="'rec_ref_1'" :deviceID="deviceID"/> -->
+    <device-parameter-recording
+      :parameter="device.configuration"
+      :library="device.library_name"
+      :device="device"
+      @sendInstruction="sendInstruction"
+      @getParameter="getParameter"
+      @setParameter="setParameter"
+      @setParameterWithDebounce="setParameterWithDebounce"
+    />
+    <!-- <elite-parameter-recording-elitezm15
+      :ref="'rec_ref_2'"
+      :parameter="device.configuration"
+      :library="device.library_name"
+      :device="device"
+      @sendInstruction="sendInstruction"
+      @getParameter="getParameter"
+      @setParameter="setParameter"
+      @setParameterWithDebounce="setParameterWithDebounce"
+    /> -->
+    <!-- <elite-parameter-recording-elite-e-i-s v-else-if="eliteVer=='4'" :ref="'rec_ref_4'" :deviceID="deviceID"/>
    <elite-parameter-recording-elite-trigger v-else-if="eliteVer=='5'" :ref="'rec_ref_5'" :deviceID="deviceID"/>
-    <elite-parameter-recording-elite-e-i-s v-else :ref="'rec_ref_4'" :deviceID="deviceID"/>
+    <elite-parameter-recording-elite-e-i-s v-else :ref="'rec_ref_4'" :deviceID="deviceID"/> -->
  </div>
 </template>

 <script>

-import EliteParameterRecording from './EliteParameterRecording'
-import EliteParameterRecordingElitezm15 from './EliteParameterRecordingElitezm15'
-import EliteParameterRecordingEliteEIS from './EliteParameterRecordingEliteEIS'
-import EliteParameterRecordingEliteTrigger from './EliteParameterRecordingEliteTrigger'
+import DeviceParameterRecording from './DeviceParameterRecording'
+// import EliteParameterRecordingElitezm15 from './EliteParameterRecordingElitezm15'
+// import EliteParameterRecording from './EliteParameterRecording'
+// import EliteParameterRecordingEliteEIS from './EliteParameterRecordingEliteEIS'
+// import EliteParameterRecordingEliteTrigger from './EliteParameterRecordingEliteTrigger'
 import { taskInfo } from '../../../../data/task/TaskInfo'
+import _ from 'lodash'

 export default {
  name: 'EliteParameterWindow',
  components: {
-    EliteParameterRecording,
-    EliteParameterRecordingElitezm15,
-    EliteParameterRecordingEliteEIS,
-    EliteParameterRecordingEliteTrigger,
+    DeviceParameterRecording,
+    // EliteParameterRecordingElitezm15,
+    // EliteParameterRecording,
+    // EliteParameterRecordingEliteEIS,
+    // EliteParameterRecordingEliteTrigger,
  },
  props: {
-    deviceID: {
-      type: Number,
+    device: {
+      type: Object,
      required: true,
    },
    deviceName: {
@@ -42,6 +63,36 @@ export default {
  mqtt: {
  },
  methods: {
+    sendInstruction: function (instruction) {
+      this.mqttPublish(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_instruction/0',
+        device: this.device.mac_address,
+        instruction: instruction,
+      }))
+    },
+    getParameter: function (parameterName) {
+      this.mqttPublish(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_parameter_value/0',
+        device: this.device.mac_address,
+        parameter: parameterName,
+      }))
+    },
+    setParameter: function (parameterName, parameterValue) {
+      this.mqttPublish(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_parameter/0',
+        device: this.device.mac_address,
+        parameter: parameterName,
+        content: parameterValue,
+      }))
+    },
+    setParameterWithDebounce: _.debounce(function (parameterName, parameterValue) {
+      this.mqttPublish(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_parameter/0',
+        device: this.device.mac_address,
+        parameter: parameterName,
+        content: parameterValue,
+      }))
+    }, 100),
    compareEliteVer: function (ver) {
      if (JSON.stringify(ver.slice(0, 4)) === JSON.stringify([0, 2, 1, 5])) {
        this.eliteVer = '1' // 1.4
@@ -60,52 +111,43 @@ export default {
        this.eliteVer = '4'
      }
    },
-    mqttPub: function (topic, mes) {
+    mqttPublish: 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 () {
-      // console.log(this.eliteVer)
-      switch (this.eliteVer) {
-        case '1':
-          this.$nextTick(() => {
-            if (this.$refs.rec_ref_1 != null) {
-              this.$refs.rec_ref_1.refresh()
-            }
-          })
-          break
-        case '2':
-          this.$nextTick(() => {
-            if (this.$refs.rec_ref_2 != null) {
-              this.$refs.rec_ref_2.refresh()
-            }
-          })
-          break
-        case '4':
-          this.$nextTick(() => {
-            if (this.$refs.rec_ref_4 != null) {
-              this.$refs.rec_ref_4.refresh()
-            }
-          })
-          break
-        case '5':
-          this.$nextTick(() => {
-            if (this.$refs.rec_ref_5 != null) {
-              this.$refs.rec_ref_5.refresh()
-            }
-          })
-          break
-      }
+      // // console.log(this.eliteVer)
+      // switch (this.eliteVer) {
+      //   case '1':
+      //     this.$nextTick(() => {
+      //       if (this.$refs.rec_ref_1 != null) {
+      //         this.$refs.rec_ref_1.refresh()
+      //       }
+      //     })
+      //     break
+      //   case '2':
+      //     this.$nextTick(() => {
+      //       if (this.$refs.rec_ref_2 != null) {
+      //         this.$refs.rec_ref_2.refresh()
+      //       }
+      //     })
+      //     break
+      //   case '4':
+      //     this.$nextTick(() => {
+      //       if (this.$refs.rec_ref_4 != null) {
+      //         this.$refs.rec_ref_4.refresh()
+      //       }
+      //     })
+      //     break
+      //   case '5':
+      //     this.$nextTick(() => {
+      //       if (this.$refs.rec_ref_5 != null) {
+      //         this.$refs.rec_ref_5.refresh()
+      //       }
+      //     })
+      //     break
+      // }
      // this.$nextTick(() => {
      //   if (this.$refs.rec_ref != null) {
      //     this.$refs.rec_ref.refresh()
@@ -117,16 +159,8 @@ export default {
  },
  mounted () {
    this.pageInit()
-    // console.log('window:4,mounted(pageInit)')
  },
  watch: {
-    deviceID: function (val) {
-      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
-        header: 'get_device_info/0',
-        device: taskInfo.getRawDeviceID(val),
-      }))
-      // console.log('window:5,deviceID(taskInfo:', taskInfo, ')')
-    },
  },
 }
 </script>
@@ -130,7 +130,7 @@

 <script>
 import { taskInfo } from '../../../../data/task/TaskInfo'
-import { chartData } from '../../../../data/task/ChartsManagement'
+import { mapFields } from 'vuex-map-fields'

 export default {
  name: 'NeuliveParameterRecording',
@@ -146,6 +146,11 @@ export default {
      default: 'Neulive',
    },
  },
+  computed: {
+    ...mapFields('taskContent', [
+      'chartData',
+    ]),
+  },
  data () {
    return {
      channelList: [],
@@ -205,6 +210,16 @@ export default {
          value: 20000,
          description: '20k',
        },
+        {
+          id: 7,
+          value: 25000,
+          description: '25k',
+        },
+        {
+          id: 8,
+          value: 31250,
+          description: '31.25k',
+        },
      ],
      acceleratorSensitivitySelect: null,
      acceleratorSensitivityOptions: [
@@ -333,7 +348,7 @@ export default {
    },
    sampleRateSelectChange () {
      if (this.sampleRateSelect != null && this.sampleRateSelect.value !== ((taskInfo.getDeviceInfo(this.deviceID).parameterSet.SAMPLE_RATE))) {
-        const adcClock = 8e5 / this.sampleRateSelect.value
+        const adcClock = 1e6 / this.sampleRateSelect.value
        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
          header: 'device_parameter/0',
          device: taskInfo.getRawDeviceID(this.deviceID),
@@ -374,7 +389,7 @@ export default {
          device: taskInfo.getRawDeviceID(this.deviceID),
          content: this.acceleratorSensitivitySelect.value,
        }))
-        const charts = chartData.getAllChartsData()
+        const charts = this.chartData
        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) {
@@ -130,7 +130,7 @@

 <script>
 import { taskInfo } from '../../../../data/task/TaskInfo'
-import { chartData } from '../../../../data/task/ChartsManagement'
+import { mapFields } from 'vuex-map-fields'

 export default {
  name: 'NeuliveParameterRecording',
@@ -146,6 +146,11 @@ export default {
      default: 'Neulive',
    },
  },
+  computed: {
+    ...mapFields('taskContent', [
+      'chartData',
+    ]),
+  },
  data () {
    return {
      channelList: [],
@@ -202,43 +207,43 @@ export default {
        },
        {
          id: 6,
+          value: 16000,
+          description: '16k',
+        },
+        {
+          id: 7,
          value: 20000,
          description: '20k',
        },
        {
-          id: 7,
-          value: 30000,
-          description: '30k',
+          id: 8,
+          value: 25000,
+          description: '25k',
        },
        {
-          id: 8,
+          id: 9,
+          value: 32000,
+          description: '32k',
+        },
+        {
+          id: 10,
          value: 40000,
          description: '40k',
        },
        {
-          id: 9,
+          id: 11,
          value: 50000,
          description: '50k',
        },
-        {
-          id: 10,
-          value: 60000,
-          description: '60k',
-        },
-        {
-          id: 11,
-          value: 70000,
-          description: '70k',
-        },
        {
          id: 12,
-          value: 80000,
-          description: '80k',
+          value: 64000,
+          description: '64k',
        },
        {
          id: 13,
-          value: 90000,
-          description: '90k',
+          value: 80000,
+          description: '80k',
        },
        {
          id: 14,
@@ -491,7 +496,7 @@ export default {
          device: taskInfo.getRawDeviceID(this.deviceID),
          content: this.acceleratorSensitivitySelect.value,
        }))
-        const charts = chartData.getAllChartsData()
+        const charts = this.chartData
        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) {
@@ -130,7 +130,7 @@

 <script>
 import { taskInfo } from '../../../../data/task/TaskInfo'
-import { chartData } from '../../../../data/task/ChartsManagement'
+import { mapFields } from 'vuex-map-fields'

 export default {
  name: 'NeuliveParameterRecording',
@@ -146,6 +146,11 @@ export default {
      default: 'Neulive',
    },
  },
+  computed: {
+    ...mapFields('taskContent', [
+      'chartData',
+    ]),
+  },
  data () {
    return {
      channelArray: Array.from({ length: 64 }, (_, i) => i + 1),
@@ -468,7 +473,7 @@ export default {
          device: taskInfo.getRawDeviceID(this.deviceID),
          content: this.acceleratorSensitivitySelect.value,
        }))
-        const charts = chartData.getAllChartsData()
+        const charts = this.chartData
        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) {
@@ -955,10 +955,10 @@ export default {
        return false
      }

-      if (usVal < 60) {
-        this.periodNumber = 60
-        this.periodNumberInput = String(60 / this.unitMultiply)
-        this.pageToast('Reset to 60 us')
+      if (usVal < 10) {
+        this.periodNumber = 10
+        this.periodNumberInput = String(10 / this.unitMultiply)
+        this.pageToast('Reset to 10 us')
      } else if (usVal > 1e6) { // freq: 1 to 20000Hz, so period < 1e6us (1e6/1e6=1)
        this.periodNumber = 1e6
        this.periodNumberInput = String(1e6 / this.unitMultiply)
@@ -1137,7 +1137,7 @@ export default {
      // val unit: us
      const val = (this.t1Range + this.t2Range + this.t3Range + this.t4Range) * 10 // UI us

-      if (val < 80) { // us
+      if (val < 10) { // us
        for (const tRange of [1, 2, 3, 4]) {
          this.updateTRangeErrorMsg({ stiIimeSelect: tRange, status: true, msg: 'Period < 0.08ms' })
        }
@@ -0,0 +1,122 @@
+<template>
+  <div>
+    <fieldset>
+      <va-radio-button
+        option="0"
+        v-model="optionValue"
+        label="AUTO"
+        @click.native.stop="switchMode(optionValue)"
+      />
+      <va-radio-button
+        option="1"
+        v-model="optionValue"
+        label="ADVANCED"
+        @click.native.stop="switchMode(optionValue)"
+      />
+      <va-radio-button
+        option="2"
+        v-model="optionValue"
+        label="ENGINEERING"
+        @click.native.stop="switchMode(optionValue)"
+      />
+      <!-- <div v-for="name in parameterTable.MODE[15].parameter" :key="name">
+        {{ name }}
+        {{ parameterTable[name].componentType }}
+        {{ parameter[name] }}
+      </div> -->
+      <component
+        v-for="name in displayParameterList"
+        :key="name"
+        :is="parameterTable[name].componentType"
+        :withHeader="true"
+        :withUnitButton="true"
+        :parameterName="name"
+        :inputValue="parameter[name]"
+        :disabled="optionValue === '2' && Boolean(parameter.DPV_engineering_enable) === false && engineerModeDisableList.includes(name)"
+        v-bind="parameterTable[name]"
+        @parameterChange="parameterChange"
+        @getParameter="getParameter"
+        @sendInstruction="sendInstruction"
+      />
+    </fieldset>
+  </div>
+</template>
+
+<script>
+import InputRange from '../InputRange'
+import InputOption from '../InputOption'
+import InputToggle from '../InputToggle'
+import InputDoubleRange from '../InputDoubleRange'
+import InputButtonToggle from '../InputButtonToggle'
+import InputField from '../InputField'
+
+export default {
+  name: 'EliteParameterRecordingEliteDPV',
+  components: {
+    InputRange,
+    InputButtonToggle,
+    InputField,
+    InputDoubleRange,
+    InputOption,
+    InputToggle,
+  },
+  props: {
+    parameter: {
+      type: Object,
+      required: true,
+    },
+    device: {
+      type: Object,
+      default: () => {},
+    },
+    parameterTable: {
+      type: Object,
+    },
+    deviceID: {
+      type: Number,
+    },
+    deviceName: {
+      type: String,
+      default: 'Elite',
+    },
+  },
+  created () {
+  },
+  computed: {
+    displayParameterList () {
+      return this.parameterTable.MODE[this.parameter.MODE].parameterInMode[this.optionValue]
+    },
+  },
+  data () {
+    return {
+      engineerModeDisableList: ['DPV_e_1', 'DPV_e_2', 'DPV_pulse_option'],
+      optionValue: String(this.parameter.DPV_mode),
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    mqttPub: function (topic, mes) {
+      this.$mqtt.publish(topic, mes)
+    },
+    parameterChange: function (name, value, debounce = false) {
+      this.$emit('parameterChange', name, value, debounce)
+    },
+    getParameter: function (name) {
+      this.$emit('getParameter', name)
+    },
+    sendInstruction: function (instr) {
+      this.$emit('sendInstruction', instr)
+    },
+    switchMode (val) {
+      this.$emit('parameterChange', 'DPV_mode', parseInt(val))
+    },
+  },
+  mounted () {
+  },
+  watch: {
+  },
+  destroyed () {
+  },
+}
+</script>
@@ -0,0 +1,138 @@
+<template>
+  <div>
+    <va-card>
+      <div class="row">
+        <va-button class="mr-2 pa-1" style="width: 4em; height: 2em; font-size: 15px;" small @click="sendDetectInstr">
+          Detect
+        </va-button>
+        <va-button class="mr-2 pa-1" style="width: 4em; height: 2em; font-size: 15px;" small @click="sendInstr('dev_version')">
+          Version
+        </va-button>
+        <va-button class="mr-2 pa-1" style="width: 4em; height: 2em; font-size: 15px;" small @click="sendInstr('dev_battery')">
+          Battery
+        </va-button>
+      </div>
+      <div class="row">
+        <div class="flex sm12 xl12 md12 xs12">
+          <div class="flex row align--center">
+            <va-input
+              @keyup.enter="instruParameterChange(inputWrite)"
+              @blur="instruParameterChange(inputWrite)"
+              class="mb-0"
+              v-model="inputWrite"
+              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('ble_instru_send')">
+              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="true"
+              class="mb-0"
+              v-model="inputRead"
+              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="inputNotify"
+              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>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'DevMode',
+  components: {
+  },
+  computed: {
+    inputRead () {
+      return this.inputValue.toString(16).toUpperCase()
+    },
+  },
+  props: {
+    inputValue: {
+      type: Number,
+      required: true,
+    },
+    parameterName: {
+      type: String,
+      required: true,
+    },
+  },
+  created () {
+  },
+  data () {
+    return {
+      inputWrite: '',
+      inputNotify: '',
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    sendInstr (instr) {
+      this.$emit('sendInstruction', instr)
+    },
+    sendDetectInstr () {
+      this.$emit('sendInstruction', 'VIS_DEVICE_DETECT')
+      setTimeout(() => {
+        this.$emit('sendInstruction', 'VIS_DEVICE_DONE')
+      }, 5000)
+    },
+    readCisData () {
+      this.$emit('getParameter', 'ADC_VALUE_I')
+    },
+    instruParameterChange (instruction) {
+      while (instruction.length <= 33) {
+        instruction += '0'
+      }
+
+      const sendIns = new Array(17).fill(0)
+      for (let i = 0; i <= 16; i++) {
+        const startIndex = i * 2
+        sendIns[i] = instruction.substring(startIndex, startIndex + 2)
+        sendIns[i] = parseInt(sendIns[i], 16)
+      }
+
+      this.$emit('parameterChange', 'BLE_WRITE', '0:16=' + String(sendIns))
+    },
+  },
+  async mounted () {
+  },
+  destroyed () {
+  },
+  watch: {
+  },
+}
+
+</script>
@@ -0,0 +1,101 @@
+<template>
+  <div>
+    <div v-if="templateType === 0" class="row flex sm12 xl12 md12 xs12 align--center my-0 py-0">
+      <div v-if="withHeader" class="flex sm6 xl6 md6 xs6">
+        <p class="display-6">{{ showName }}<p/>
+      </div>
+      <div class="flex sm12 xl12 md12 xs12">
+        <va-button-toggle
+          small
+          outline
+          v-model="buttonSelect"
+          :options="options"
+          :disabled="disable"
+        />
+      </div>
+    </div>
+    <div  v-if="templateType === 1" class="row flex sm12 xl12 md12 xs12 align--center my-0 py-0">
+      <div v-if="withHeader" class="flex sm6 xl6 md6 xs6 px-0 mx-0">
+        <p class="display-6">{{ showName }}<p/>
+      </div>
+      <div class="flex sm6 xl6 md6 xs6 px-0 mx-0">
+        <va-button-toggle
+          small
+          outline
+          v-model="buttonSelect"
+          :options="options"
+          :disabled="disable"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'InputButtonToggle',
+  components: {
+  },
+  computed: {
+    buttonSelect: {
+      get () {
+        return this.inputValue
+      },
+      set (val) {
+        this.buttonSelectChange(val)
+      },
+    },
+  },
+  props: {
+    templateType: {
+      type: Number,
+      default: 0,
+    },
+    withHeader: {
+      type: Boolean,
+      default: false,
+    },
+    parameterName: {
+      type: String,
+      required: true,
+    },
+    showName: {
+      type: String,
+    },
+    inputValue: {
+      type: Number,
+      required: true,
+    },
+    options: {
+      type: Array,
+      required: true,
+    },
+    disable: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  created () {
+  },
+  data () {
+    return {
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    buttonSelectChange (value) {
+      this.$emit('parameterChange', this.parameterName, value)
+    },
+  },
+  async mounted () {
+    // console.log('mount button group', this.parameterName, this.inputValue, this.buttonSelect, this.options, this.disable)
+  },
+  destroyed () {
+  },
+  watch: {
+  },
+}
+
+</script>
@@ -0,0 +1,124 @@
+<template>
+  <!-- this is range slider which [0,25,50,75] ~ 100(fixed) -->
+  <div class="row flex">
+    <div class="flex sm12 xl12 md12 xs12 px-0 mx-0 my-0 py-1">
+      <p class="display-6">Current Recording -<p/>
+    </div>
+    <div class="flex sm6 xl6 md6 xs6 px-0 mx-0 mt-2 py-3">
+      <p class="display-6">Pre- / Post-Pulse Width<p/>
+    </div>
+    <div class="flex sm2 xl2 md2 xs2 px-0 mx-0 mt-2 py-3">
+      <va-input
+        @keyup.enter="inputStringChange(inputString)"
+        @blur="inputStringChange(inputString)"
+        v-model="inputStringModal"
+        class="mb-0"
+      >
+        <p slot="append" style="margin-right: 0;" small>
+          %
+        </p>
+      </va-input>
+    </div>
+    <div class="flex sm12 xl12 md12 xs12 py-0 my-0" >
+      <va-slider
+        range
+        pins
+        :min="range.min"
+        :max="range.max"
+        value-visible
+        :step="25"
+        v-model="inputArray"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'InputDoubleRange',
+  components: {
+  },
+  props: {
+    templateType: {
+      type: Number,
+      default: 0,
+    },
+    withHeader: {
+      type: Boolean,
+      default: false,
+    },
+    parameterName: {
+      type: String,
+      required: true,
+    },
+    showName: {
+      type: [String, Function],
+    },
+    range: {
+      type: Object,
+    },
+    inputValue: {
+      type: Array,
+      default: () => [0, 100],
+    },
+  },
+  created () {
+  },
+  computed: {
+    inputArray: {
+      get () {
+        return this.inputValue
+      },
+      set (val) {
+        this.inputChange(val)
+      },
+    },
+    inputStringModal: {
+      get () {
+        return String(this.inputValue[1] - this.inputValue[0])
+      },
+      set (val) {
+        this.inputString = val
+      },
+    },
+  },
+  data () {
+    return {
+      inputString: '',
+    }
+  },
+  methods: {
+    inputStringChange (val) {
+      val = parseInt(val)
+      const remainder = val % 25
+      if (remainder > 13) {
+        val += (25 - remainder)
+      } else {
+        val -= remainder
+      }
+      if (val < 0 || isNaN(val)) {
+        val = 0
+      } else if (val > 75) {
+        val = 75
+      }
+
+      this.$emit('parameterChange', this.parameterName, [100 - val, 100])
+    },
+    inputChange (val) {
+      val[1] = 100 // [2021/10/28] max val is fixed to 100 now
+      if (val[0] === this.range.max) { // [2021/10/28] min can't equal 100 now
+        val[0] = this.inputValue[0]
+      }
+
+      this.$emit('parameterChange', this.parameterName, val, true)
+    },
+  },
+  async mounted () {
+  },
+  destroyed () {
+  },
+  watch: {
+  },
+}
+
+</script>
@@ -0,0 +1,170 @@
+<template>
+  <div class="row flex sm12 xl12 md12 xs12 align--center my-0 py-0">
+    <div v-if="withHeader" :class="style.header">
+      <p :style="disabled !== true ? '' : {color: this.$themes.gray}" class="display-6">{{ showName }}<p/>
+    </div>
+    <div :class="style.content">
+      <va-input
+        @keyup.enter="inputChange(inputString)"
+        @blur="inputChange(inputString)"
+        v-model="inputStringModel"
+        class="mb-0"
+        :disabled="disabled"
+      >
+        <p slot="append" style="margin-right: 0;" small>
+          {{ unitSelect }}
+        </p>
+      </va-input>
+    </div>
+    <div v-if="withUnitButton" :class="style.unitButton">
+      <va-button
+        @click="unitChange()"
+        v-model="unitSelect"
+        class="px-3 py-1"
+        style="border-radius: 12px;"
+        :disabled="disabled"
+      >
+        {{ unitSelect }}
+      </va-button>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'InputFieldWithHeader',
+  components: {
+  },
+  props: {
+    templateType: {
+      type: Number,
+      default: 0,
+    },
+    withHeader: {
+      type: Boolean,
+      default: false,
+    },
+    withUnitButton: {
+      type: Boolean,
+      default: false,
+    },
+    parameterName: {
+      type: String,
+      required: true,
+    },
+    showName: {
+      type: String,
+    },
+    range: {
+      type: Object,
+    },
+    inputValue: {
+      type: Number,
+      required: true,
+    },
+    defaultUnit: {
+      type: String,
+    },
+    unit: {
+      type: Object,
+    },
+    outputReadabilityData: {
+      type: Function,
+      default: (val) => val,
+    },
+    outputRawData: {
+      type: Function,
+      default: (val) => val,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    index: {
+      type: Number,
+      default: -1,
+    },
+  },
+  created () {
+  },
+  computed: {
+    inputStringModel: {
+      get () {
+        return String(this.outputReadabilityData(this.inputValue, this.unit[this.unitSelect]))
+      },
+      set (val) {
+        this.inputString = val
+      },
+    },
+    unitLength () {
+      return Object.keys(this.unit).length
+    },
+  },
+  data () {
+    return {
+      unitSelect: this.defaultUnit,
+      unitButtonClicked: Object.keys(this.unit).indexOf(this.defaultUnit),
+      inputString: '',
+      size: {
+        12: 'flex sm12 xl12 md12 xs12 px-0 mx-0',
+        6: 'flex sm6 xl6 md6 xs6 px-0 mx-0',
+        5: 'flex sm5 xl5 md5 xs5 px-0 mx-0 my-0 py-0',
+        4: 'flex sm4 xl4 md4 xs4 px-0 mx-0 my-0 py-0',
+        3: 'flex sm3 xl3 md3 xs3 px-0 mx-0 my-0 py-0',
+      },
+      style: {
+        header: '',
+        content: '',
+        unitButton: '',
+      },
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    inputChange: function (val) {
+      /** */
+      const scale = this.unit[this.unitSelect]
+      // if change from input field
+      if (typeof (val) === 'string') {
+        if (isNaN(val) || val === '') {
+          return false
+        }
+        val = this.outputRawData(val, scale)
+        if (parseFloat(val) < this.range.min) {
+          val = this.range.min
+        } else if (parseFloat(val) > this.range.max) {
+          val = this.range.max
+        }
+      }
+      /** if parameter is array with index needs to return */
+      if (this.index === -1) {
+        this.$emit('parameterChange', this.parameterName, val)
+      } else {
+        this.$emit('parameterChangeByIndex', this.parameterName, val, this.index)
+      }
+    },
+    unitChange: function () {
+      this.unitButtonClicked += 1
+      this.unitSelect = Object.keys(this.unit)[this.unitButtonClicked % this.unitLength]
+    },
+  },
+  async mounted () {
+    if (this.withHeader === true && this.withUnitButton === true) {
+      this.style.header = this.size[5]
+      this.style.content = this.size[4]
+      this.style.unitButton = this.size[3]
+    } else if (this.withHeader === true) {
+      this.style.header = this.size[6]
+      this.style.content = this.size[6]
+    } else {
+      this.style.content = this.size[12]
+    }
+  },
+  destroyed () {
+  },
+  watch: {
+  },
+}
+</script>
@@ -0,0 +1,72 @@
+<template>
+  <div class="row flex px-0 mx-0 my-0 py-0">
+    <div class="flex sm4 xl4 md4 xs4 px-0 mx-0 my-0 py-2">
+      <p :style="disabled !== true ? '' : {color: this.$themes.gray}" class="display-6">{{ showName }}<p/>
+    </div>
+    <div class="flex sm1 xl1 md1 xs1 px-0 mx-0 my-0 py-0">
+      <va-checkbox v-model="inputOptionModel" :disabled="disabled"/>
+    </div>
+    <div class="flex sm7 xl7 md7 xs7 px-0 mx-0 my-0 py-1">
+      <p :style="{color: this.$themes.gray}" style="font-weight: bold;"> {{ description }} </p>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'InputOption',
+  components: {
+  },
+  props: {
+    parameterName: {
+      type: String,
+      required: true,
+    },
+    description: {
+      type: String,
+      default: '',
+    },
+    showName: {
+      type: String,
+    },
+    inputValue: {
+      type: [Boolean, Number],
+      required: true,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  created () {
+  },
+  computed: {
+    inputOptionModel: {
+      get () {
+        return Boolean(this.inputValue)
+      },
+      set (val) {
+        this.inputChange(val)
+      },
+    },
+  },
+  data () {
+    return {
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    inputChange (val) {
+      this.$emit('parameterChange', this.parameterName, val)
+    },
+  },
+  async mounted () {
+  },
+  destroyed () {
+  },
+  watch: {
+  },
+}
+</script>
@@ -0,0 +1,141 @@
+<template>
+  <div class="flex row sm12 xl12 md12 xs12 align--center ma-0 pa-0">
+    <div v-if="withHeader" class="flex sm12 xl12 md12 xs12 pa-0 ma-1">
+      <p class="display-6">{{ showName }}<p/>
+    </div>
+    <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="() => {
+          inputNumber = range.min
+          inputChange(range.min)
+        }">
+          {{ outputReadabilityData(range.min, unit[selectUnit]) }}
+        </va-button>
+        <va-input
+          @keyup.enter="inputChange(inputString)"
+          @blur="inputChange(inputString)"
+          v-model="inputStringModel"
+          class="mb-0"
+          style="width: 100px;"
+        >
+          <p slot="append" style="margin-right: 0;" small>
+            {{ defaultUnit }}
+          </p>
+        </va-input>
+        <va-button slot="append" class="ml-2 pa-1 shrink" small @click="() => {
+          inputNumber = range.max
+          inputChange(range.max)
+        }">
+          {{ outputReadabilityData(range.max, unit[selectUnit]) }}
+        </va-button>
+      </div>
+      <va-slider
+        class="flex sm12 xl12 md12 xs12 pa-0 ma-0"
+        v-model="inputNumber"
+        :min="range.min"
+        :max="range.max"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'RangeInput',
+  components: {
+  },
+  props: {
+    templateType: {
+      type: Number,
+      default: 0,
+    },
+    withHeader: {
+      type: Boolean,
+      default: false,
+    },
+    parameterName: {
+      type: String,
+      required: true,
+    },
+    showName: {
+      type: [String, Function],
+    },
+    range: {
+      type: Object,
+    },
+    inputValue: {
+      type: Number,
+      required: true,
+    },
+    defaultUnit: {
+      type: String,
+    },
+    unit: {
+      type: Object,
+    },
+    outputReadabilityData: {
+      type: Function,
+      default: (val) => val,
+    },
+    outputRawData: {
+      type: Function,
+      default: (val) => val,
+    },
+  },
+  created () {
+  },
+  computed: {
+    inputNumber: {
+      get () {
+        return this.inputValue
+      },
+      set (val) {
+        this.inputChange(val)
+      },
+    },
+    inputStringModel: {
+      get () {
+        return String(this.outputReadabilityData(this.inputValue, this.unit[this.defaultUnit]))
+      },
+      set (val) {
+        this.inputString = val
+      },
+    },
+  },
+  data () {
+    return {
+      inputString: String(this.outputReadabilityData(this.inputValue, this.unit[this.defaultUnit])),
+      selectUnit: this.defaultUnit, // find key where is 1
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    inputChange: function (val) {
+      const scale = this.unit[this.selectUnit]
+      // if change from input field
+      if (typeof (val) === 'string') {
+        if (isNaN(val) || val === '') {
+          return false
+        }
+        val = this.outputRawData(val, scale)
+        if (parseFloat(val) < this.range.min) {
+          val = this.range.min
+        } else if (parseFloat(val) > this.range.max) {
+          val = this.range.max
+        }
+      }
+      this.$emit('parameterChange', this.parameterName, val, true)
+      // console.log(this.parameterName, val, typeof (val), this.inputNumber, this.inputString, scale)
+    },
+  },
+  async mounted () {
+    // console.log(this.templateType, this.parameterName, this.inputValue, this.defaultUnit, this.unit, this.inputChange, this.selectUnit, this.inputNumber, this.inputString)
+  },
+  destroyed () {
+  },
+  watch: {
+  },
+}
+
+</script>
@@ -0,0 +1,101 @@
+<template>
+  <!-- this is range slider which [0,25,50,75] ~ 100(fixed) -->
+  <div>
+    <div class="row flex">
+      <div class="flex sm8 xl8 md8 xs8 px-0 mx-0">
+        <p class="display-6">{{ showName }}<p/>
+      </div>
+      <div class="flex sm4 xl4 md4 xs4 px-0 mx-0">
+        {{ `${inputValue[0]} - ${inputValue[1]} %` }}
+      </div>
+    </div>
+    <div class="flex sm12 xl12 md12 xs12 py-0 my-0" >
+      <va-slider
+        range
+        pins
+        :min="range.min"
+        :max="range.max"
+        value-visible
+        :step="sliderStep"
+        v-model="inputArray"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'inputRangeSlider',
+  components: {
+  },
+  props: {
+    templateType: {
+      type: Number,
+      default: 0,
+    },
+    withHeader: {
+      type: Boolean,
+      default: false,
+    },
+    parameterName: {
+      type: String,
+      required: true,
+    },
+    showName: {
+      type: [String, Function],
+    },
+    range: {
+      type: Object,
+    },
+    inputValue: {
+      type: Array,
+      default: () => [0, 100],
+    },
+    sliderStep: {
+      type: Number,
+      default: 1,
+    },
+    index: {
+      type: Number,
+      default: -1,
+    },
+  },
+  created () {
+  },
+  computed: {
+    inputArray: {
+      get () {
+        return this.inputValue
+      },
+      set (val) {
+        this.inputChange(val)
+      },
+    },
+    inputStringModal: {
+      get () {
+        return String(this.inputValue[1] - this.inputValue[0])
+      },
+      set (val) {
+        this.inputString = val
+      },
+    },
+  },
+  data () {
+    return {
+      inputString: '',
+    }
+  },
+  methods: {
+    inputChange (val) {
+      this.$emit('parameterChangeByIndex', this.parameterName, val, this.index, true)
+    },
+  },
+  async mounted () {
+  },
+  destroyed () {
+  },
+  watch: {
+  },
+}
+
+</script>
@@ -0,0 +1,58 @@
+<template>
+  <div class="row flex px-0 mx-0 my-0 py-0">
+    <div class="flex sm4 xl4 md4 xs4 px-0 mx-0 my-0 py-2">
+      <va-toggle class="mt-1" v-model="inputToggleModel" small color="success"/>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'InputOption',
+  components: {
+  },
+  props: {
+    parameterName: {
+      type: String,
+      required: true,
+    },
+    showName: {
+      type: String,
+    },
+    inputValue: {
+      type: [Boolean, Number],
+      required: true,
+    },
+  },
+  created () {
+  },
+  computed: {
+    inputToggleModel: {
+      get () {
+        return Boolean(this.inputValue)
+      },
+      set (val) {
+        this.inputToggleChange(val)
+      },
+    },
+  },
+  data () {
+    return {
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    inputToggleChange (val) {
+      this.$emit('parameterChange', this.parameterName, val)
+    },
+  },
+  async mounted () {
+  },
+  destroyed () {
+  },
+  watch: {
+  },
+}
+</script>
@@ -0,0 +1,183 @@
+<template>
+  <div class="row flex sm12 xl12 md12 xs12 align--center my-0 py-0">
+    <div v-if="withHeader" :class="style.header">
+      <p :style="disabled !== true ? '' : {color: this.$themes.gray}" class="display-6">{{ showName }}<p/>
+    </div>
+    <div :class="style.content">
+      <va-input
+        @keyup.enter="inputChange(inputString, 0)"
+        @blur="inputChange(inputString, 0)"
+        v-model="inputStringModel1"
+        class="mb-0"
+        :disabled="disabled"
+      >
+        <p slot="append" style="margin-right: 0;" small>
+          {{ unitSelect }}
+        </p>
+      </va-input>
+      <va-input
+        @keyup.enter="inputChange(inputString, 1)"
+        @blur="inputChange(inputString, 1)"
+        v-model="inputStringModel2"
+        class="mb-0"
+        :disabled="disabled"
+      >
+        <p slot="append" style="margin-right: 0;" small>
+          {{ unitSelect }}
+        </p>
+      </va-input>
+    </div>
+    <div v-if="withUnitButton" :class="style.unitButton">
+      <va-button
+        @click="unitChange()"
+        v-model="unitSelect"
+        class="px-3 py-1"
+        style="border-radius: 12px;"
+        :disabled="disabled"
+      >
+        {{ unitSelect }}
+      </va-button>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'InputFieldWithHeader',
+  components: {
+  },
+  props: {
+    templateType: {
+      type: Number,
+      default: 0,
+    },
+    withHeader: {
+      type: Boolean,
+      default: false,
+    },
+    withUnitButton: {
+      type: Boolean,
+      default: false,
+    },
+    parameterName: {
+      type: String,
+      required: true,
+    },
+    showName: {
+      type: String,
+    },
+    range: {
+      type: Object,
+    },
+    inputValue: {
+      type: Array,
+      required: true,
+    },
+    defaultUnit: {
+      type: String,
+    },
+    unit: {
+      type: Object,
+    },
+    outputReadabilityData: {
+      type: Function,
+      default: (val) => val,
+    },
+    outputRawData: {
+      type: Function,
+      default: (val) => val,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  created () {
+  },
+  computed: {
+    inputStringModel1: {
+      get () {
+        return String(this.outputReadabilityData(this.inputValue[0], this.unit[this.unitSelect]))
+      },
+      set (val) {
+        this.inputString = val
+      },
+    },
+    inputStringModel2: {
+      get () {
+        return String(this.outputReadabilityData(this.inputValue[1], this.unit[this.unitSelect]))
+      },
+      set (val) {
+        this.inputString = val
+      },
+    },
+    unitLength () {
+      return Object.keys(this.unit).length
+    },
+  },
+  data () {
+    return {
+      unitSelect: this.defaultUnit,
+      unitButtonClicked: 0,
+      inputString: '',
+      size: {
+        12: 'flex sm12 xl12 md12 xs12 px-0 mx-0',
+        6: 'flex sm6 xl6 md6 xs6 px-0 mx-0',
+        5: 'flex sm5 xl5 md5 xs5 px-0 mx-0 my-0 py-0',
+        4: 'flex sm4 xl4 md4 xs4 px-0 mx-0 my-0 py-0',
+        3: 'flex sm3 xl3 md3 xs3 px-0 mx-0 my-0 py-0',
+      },
+      style: {
+        header: '',
+        content: '',
+        unitButton: '',
+      },
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    inputChange: function (val, index) {
+      const inputData = [...this.inputValue]
+      const scale = this.unit[this.unitSelect]
+
+      // if change from input field
+      if (typeof (val) === 'string') {
+        if (isNaN(val) || val === '') {
+          return false
+        }
+        val = this.outputRawData(val, scale)
+        if (parseFloat(val) < this.range.min) {
+          val = this.range.min
+        } else if (parseFloat(val) > this.range.max) {
+          val = this.range.max
+        }
+      }
+      inputData[index] = val
+      this.$emit('parameterChange', this.parameterName, inputData)
+      // console.log(this.parameterName, val, typeof (val), this.inputNumber, this.inputString, scale)
+    },
+    unitChange: function () {
+      this.unitButtonClicked += 1
+      this.unitSelect = Object.keys(this.unit)[this.unitButtonClicked % this.unitLength]
+    },
+  },
+  async mounted () {
+    if (this.withHeader === true && this.withUnitButton === true) {
+      this.style.header = this.size[3]
+      this.style.content = this.size[5]
+      this.style.unitButton = this.size[4]
+    } else if (this.withHeader === true) {
+      this.style.header = this.size[6]
+      this.style.content = this.size[6]
+    } else {
+      this.style.content = this.size[12]
+    }
+  },
+  destroyed () {
+  },
+  watch: {
+  },
+}
+</script>
@@ -0,0 +1,162 @@
+<template>
+  <div>
+    <SlickList lockAxis="y" class="long-list" :pressDelay='300' v-model="parameter.segment_order" @sort-end="dragEnd">
+      <SlickItem v-for="(block, i) in parameter.segment_order" :key="i" :index="i">
+        <div v-if="block >= 0">
+          <div class="row flex sm12 xl12 md12 xs12 align--center">
+            <div class="flex sm11 xl11 md11 xs11 px-0 mx-0">
+              <p class="display-6">- Segment {{ i + 1 }} - <p/>
+            </div>
+            <div class="flex sm1 xl1 md1 xs1 px-0 mx-0">
+              <va-button @click="_deleteSegmentBlock(i)" color="danger" style="margin-right: 0;" small> - </va-button>
+            </div>
+          </div>
+          <component
+            v-for="name in parameterTable.MODE[parameter.MODE].parameter"
+            :key="name"
+            :is="parameterTable[name].componentType"
+            :withHeader="true"
+            :withUnitButton="true"
+            :parameterName="name"
+            :inputValue="parameter[name][block]"
+            :index="block"
+            v-bind="parameterTable[name]"
+            @parameterChange="parameterChange"
+            @parameterChangeByIndex="parameterChangeByIndex"
+            @getParameter="getParameter"
+            @sendInstruction="sendInstruction"
+          />
+        </div>
+      </SlickItem>
+    </SlickList>
+    <div style="text-align: center;">
+      <va-button :disabled="parameter.segment_order.indexOf(-1) === -1" @click="_addSegmentBlock">
+        +
+      </va-button>
+    </div>
+
+    <!-- <va-tree-root>
+      <va-tree-category
+        style="font-size: 20px;"
+        :label="'Advanced Setting'">
+        <va-tree-node>
+          <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 { SlickList, SlickItem } from 'vue-slicksort'
+// import _ from 'lodash'
+// import InputRange from '../InputRange'
+// import InputButtonToggle from '../InputButtonToggle'
+import InputRangeSlider from '../InputRangeSlider'
+import InputField from '../InputField'
+import InputDoubleRange from '../InputDoubleRange'
+
+export default {
+  name: 'EliteParameterRecordingElitePulseSensing',
+  components: {
+    SlickList,
+    SlickItem,
+    InputField,
+    InputDoubleRange,
+    InputRangeSlider,
+  },
+  props: {
+    parameter: {
+      type: Object,
+      required: true,
+    },
+    device: {
+      type: Object,
+      default: () => {},
+    },
+    parameterTable: {
+      type: Object,
+    },
+    deviceID: {
+      type: Number,
+    },
+    deviceName: {
+      type: String,
+      default: 'Elite',
+    },
+  },
+  created () {
+  },
+  data () {
+    return {
+      maxSegment: 4,
+      numberList: [...Array(this.maxSegment).keys()],
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    mqttPub: function (topic, mes) {
+      this.$mqtt.publish(topic, mes)
+    },
+    parameterChange: function (name, value, debounce) {
+      this.$emit('parameterChange', name, value, debounce)
+    },
+    parameterChangeByIndex: function (name, value, index, debounce) {
+      const _value = [...this.parameter[name]]
+      _value[index] = value
+      this.$emit('parameterChange', name, _value)
+    },
+    getParameter: function (name) {
+      this.$emit('getParameter', name)
+    },
+    sendInstruction: function (instr) {
+      this.$emit('sendInstruction', instr)
+    },
+    _addSegmentBlock () {
+      for (let i = 0; i < this.maxSegment; i++) {
+        if (this.parameter.segment_order.indexOf(i) === -1) {
+          const _segmentOrder = [...this.parameter.segment_order]
+          const insertIndex = _segmentOrder.indexOf(-1)
+          _segmentOrder[insertIndex] = i
+          this.$emit('parameterChange', 'segment_order', _segmentOrder)
+          return true
+        }
+      }
+    },
+    _deleteSegmentBlock (index) {
+      const _segmentOrder = [...this.parameter.segment_order]
+      _segmentOrder.splice(index, 1)
+      this.$emit('parameterChange', 'segment_order', [..._segmentOrder, -1])
+      return true
+    },
+    dragEnd (event) {
+      // console.log('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 () {
+    },
+  },
+  mounted () {
+  },
+  watch: {
+  },
+  destroyed () {
+  },
+}
+</script>
+
+<style scoped>
+  .long-list {
+    max-height: 100%;
+    overflow: auto;
+  }
+</style>
@@ -98,7 +98,6 @@

 <script>
 import { taskInfo } from '@/data/task/TaskInfo'
-import { chartData } from '@/data/task/ChartsManagement'
 import { mapActions } from 'vuex'
 import { mapFields } from 'vuex-map-fields'
 import types from '@/store/modules/task/content/types'
@@ -110,6 +109,7 @@ export default {
  computed: {
    ...mapFields('taskContent', [
      'deviceList',
+      'chartData',
    ]),
  },
  props: {
@@ -412,7 +412,7 @@ export default {
          device: taskInfo.getRawDeviceID(this.deviceID),
          content: this.acceleratorSensitivitySelect.value,
        }))
-        const charts = chartData.getAllChartsData()
+        const charts = this.chartData
        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) {
@@ -0,0 +1,128 @@
+import { matrix, inv, multiply, transpose, row, range } from 'mathjs'
+
+// eslint-disable-next-line no-unused-vars
+function sgFilter (data, windowSize, k) {
+  // self
+  const arr = []
+  const m = parseInt((windowSize - 1) / 2)
+  console.log('m', m)
+  for (const i of range(0, windowSize)) {
+    console.log('windowSize', i)
+    const a = []
+    for (const j of range(0, k)) {
+      console.log('k', j)
+      const yVal = Math.pow(-m + i.value, j.value)
+      a.push(yVal)
+    }
+    arr.push(a)
+  }
+
+  console.log(arr)
+  const X = matrix(arr)
+  console.log(X, transpose(X), multiply(transpose(X), X))
+  const B = multiply(multiply(X, inv(multiply(transpose(X), X))), transpose(X))
+  // B = X * (X.T * X).I * X.T
+  console.log('B', B)
+  const a = row(B, m)._data[0]
+  console.log(a)
+  // a = a.reshape(windowSize)
+  // for (const )
+  const start = []
+  const end = []
+  const list = []
+
+  for (const i of range(0, m)) {
+    console.log('i', i)
+    start.push(data[0])
+    end.push(data[data.length - 1])
+  }
+  console.log('start, end', start, end)
+  const _data = [...start, ...data, ...end]
+
+  console.log('m,', m, _data.length)
+  for (const i of range(m, _data.length - m)) {
+    const arra = []
+    for (const j of range(-m, m + 1)) {
+      arra.push(_data[i.value + j.value])
+    }
+    console.log('arr', arra)
+
+    let sum = 0
+    console.log('aaa', arra, a)
+    for (const index in arra) {
+      console.log('index', index)
+
+      sum += (arra[index] * a[index])
+    }
+
+    // const b = np.sum(np.array(arra) * a)
+
+    list.push(sum)
+  }
+  return list
+
+  // data = np.insert(data, 0, [data[0] for i in range(m)])
+  // data = np.append(data, [data[-1] for i in range(m)])
+  // list = []
+  // for i in range(m, data.shape[0] - m){
+  //     arra = []
+  //     for j in range(-m, m+1)
+  //         arra.append(data[i +j])
+  //     b = np.sum(np.array(arra) * a)
+
+  //     list.append(b)
+  // }
+  // return list
+}
+
+function sgFilterGetDifferential (data, windowSize, polynomial) {
+  // self
+  const arr = []
+  const m = parseInt((windowSize - 1) / 2)
+
+  //  create polynomial matrix
+  for (const i of range(0, windowSize)) {
+    const a = []
+    for (const j of range(0, polynomial)) {
+      const yVal = Math.pow(-m + i.value, j.value)
+      a.push(yVal)
+    }
+    arr.push(a)
+  }
+
+  const X = matrix(arr)
+  // B = (X.T * X).I * X.T
+  const B = multiply(inv(multiply(transpose(X), X)), transpose(X))
+  // use index 1 row in matrix
+  const rowOneInB = row(B, 1)._data[0]
+
+  const start = []
+  const end = []
+  const list = []
+
+  // eslint-disable-next-line no-unused-vars
+  for (const _ of range(0, m)) {
+    start.push(data[0])
+    end.push(data[data.length - 1])
+  }
+  const _data = [...start, ...data, ...end]
+
+  // m ... data_length - m - 1
+  for (const i of range(m, _data.length - m)) {
+    const arra = []
+    // -m ... 0 ... m
+    for (const j of range(-m, m + 1)) {
+      arra.push(_data[i.value + j.value])
+    }
+
+    let sum = 0
+    for (const index in arra) {
+      sum += (arra[index] * rowOneInB[index])
+    }
+
+    list.push(sum)
+  }
+  return list
+}
+
+export default sgFilterGetDifferential
@@ -79,7 +79,6 @@ async function getAll () {
 }

 async function getByParentName (collectionType, parent, name) {
-  console.log(collectionType, parent, name)
  const _header = auth.getHeader()
  try {
    return await api.axios.get(`/api/file/collection/get_by_parent_name/${collectionType}/${parent}/${name}`, { headers: _header })
@@ -13,7 +13,6 @@ async function create (_data) {

 async function getAll () {
  const _header = auth.getHeader()
-  console.log(_header)
  try {
    return await api.axios.get('/api/controller/get/all', { headers: _header })
  } catch (e) {
@@ -13,7 +13,6 @@ async function create (_data) {

 async function getAll () {
  const _header = auth.getHeader()
-  console.log(_header)
  try {
    return await api.axios.get('/api/task/get/all', { headers: _header })
  } catch (e) {
@@ -1,7 +1,7 @@
 export default {
  name: 'Cali ADC - test',
-  parameter: ['ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'ADC_DAC_CHANNEL_15'], // 這個mode用到的參數
-  showParameter: ['ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'ADC_DAC_CHANNEL_15'], // 有要秀給user看的參數
+  parameter: ['DAC_VOLT', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'ADC_DAC_CHANNEL_15'], // 這個mode用到的參數
+  showParameter: ['DAC_VOLT', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'ADC_DAC_CHANNEL_15'], // 有要秀給user看的參數
  valScales: {
    linear: {
      func: (val) => {
@@ -25,7 +25,7 @@ export default {
        h: 60 * 60 * 1e6,
        auto: 1,
      },
-      defaultUnit: 'auto',
+      defaultUnit: 'us',
    },
    0: {
      name: 'I_in',
@@ -25,7 +25,7 @@ export default {
        h: 60 * 60 * 1e6,
        auto: 1,
      },
-      defaultUnit: 'auto',
+      defaultUnit: 'us',
    },
    0: {
      name: 'I_in',
@@ -1,7 +1,8 @@
 export default {
-  name: 'Chronoamperometric Graph',
-  parameter: ['ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15', 'VOLT_VSCAN', 'SAMPLE_RATE'], // 這個mode用到的參數
-  showParameter: ['ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15', 'VOLT_VSCAN', 'SAMPLE_RATE'], // 有要秀給user看的參數
+  name: 'Chronoamperometry',
+  parameter: ['VOLT_VSCAN', 'SAMPLE_RATE', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15', 'TIME_DURATION'], // 這個mode用到的參數
+  showParameter: ['ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15', 'VOLT_VSCAN', 'SAMPLE_RATE', 'TIME_DURATION'], // 有要秀給user看的參數
+  headerParameter: () => ['VOLT_VSCAN', 'SAMPLE_RATE', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'TIME_DURATION'], // 有要秀給user看的參數
  valScales: {
    linear: {
      func: (val) => {
@@ -21,11 +22,11 @@ export default {
        us: 1,
        ms: 1e3,
        s: 1e6,
-        m: 60 * 1e6,
-        h: 60 * 60 * 1e6,
-        auto: 1,
+        minute: 60 * 1e6,
+        hour: 60 * 60 * 1e6,
      },
-      defaultUnit: 'auto',
+      defaultUnit: 'ms',
+      downloadUnit: 'ms',
    },
    0: {
      name: 'I_in',
@@ -34,16 +35,18 @@ export default {
        uA: 1e3,
        mA: 1e6,
      },
-      defaultUnit: 'uA',
+      defaultUnit: 'mA',
+      downloadUnit: 'mA',
    },
    1: {
-      name: 'V_out-V_in',
+      name: 'Potential',
      unit: {
        uV: 1,
        mV: 1e3,
        V: 1e6,
      },
      defaultUnit: 'mV',
+      downloadUnit: 'mV',
    },
    2: {
      name: 'V_out',
@@ -53,12 +56,13 @@ export default {
        V: 1e6,
      },
      defaultUnit: 'mV',
+      downloadUnit: 'mV',
    },
  },
  charts: {
    default: [
      {
-        name: 'Chronoamperometric Graph',
+        name: 'Chronoamperometric',
        description: '',
        subplot: [
          {
@@ -0,0 +1,97 @@
+export default {
+  name: 'Chronopotentiometry',
+  parameter: ['Charge', 'Const_Current_value', 'SAMPLE_RATE', 'VOLTSTOP_MAX', 'VOLTSTOP_MIN', 'CC_CP_SPEED', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'TIME_DURATION'], // 這個mode用到的參數
+  showParameter: ['ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15', 'SAMPLE_RATE', 'Charge', 'Const_Current_value', 'VOLTSTOP_MAX', 'VOLTSTOP_MIN', 'TIME_DURATION'], // 有要秀給user看的參數
+  headerParameter: () => ['Charge', 'Const_Current_value', 'SAMPLE_RATE', 'VOLTSTOP_MAX', 'VOLTSTOP_MIN', 'CC_CP_SPEED', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'TIME_DURATION'], // 有要秀給user看的參數
+  valScales: {
+    linear: {
+      func: (val) => {
+        return val
+      },
+    },
+    log: {
+      func: (val) => {
+        return Math.log10(Math.abs(val))
+      },
+    },
+  },
+  channels: {
+    time: {
+      name: 'Time',
+      unit: {
+        us: 1,
+        ms: 1e3,
+        s: 1e6,
+        minute: 60 * 1e6,
+        hour: 60 * 60 * 1e6,
+      },
+      defaultUnit: 'ms',
+      downloadUnit: 'ms',
+    },
+    0: {
+      name: 'I_in',
+      unit: {
+        nA: 1,
+        uA: 1e3,
+        mA: 1e6,
+      },
+      defaultUnit: 'mA',
+      downloadUnit: 'mA',
+    },
+    1: {
+      name: 'Potential',
+      unit: {
+        uV: 1,
+        mV: 1e3,
+        V: 1e6,
+      },
+      defaultUnit: 'mV',
+      downloadUnit: 'mV',
+    },
+    2: {
+      name: 'V_out',
+      unit: {
+        uV: 1,
+        mV: 1e3,
+        V: 1e6,
+      },
+      defaultUnit: 'mV',
+      downloadUnit: 'mV',
+    },
+  },
+  charts: {
+    default: [
+      {
+        name: 'Chronopotentiometry',
+        description: '',
+        subplot: [
+          {
+            x1: {
+              type: 'time',
+              valScale: 'linear',
+              min: 'dataMin',
+              max: 'dataMax',
+            },
+            y1: {
+              type: 'value',
+              valScale: 'linear',
+              min: 'dataMin',
+              max: 'dataMax',
+            },
+            data: [
+              {
+                legend: 'CP',
+                x1: {
+                  channel: 'time',
+                },
+                y1: {
+                  channel: 1,
+                },
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+}
@@ -1,7 +1,8 @@
 export default {
  name: 'Constant Current',
-  parameter: ['ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15', 'SAMPLE_RATE', 'Charge', 'Const_Current_value', 'VOLTSTOP_MAX', 'VOLTSTOP_MIN'], // 這個mode用到的參數
-  showParameter: ['ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15', 'SAMPLE_RATE', 'Charge', 'Const_Current_value', 'VOLTSTOP_MAX', 'VOLTSTOP_MIN'], // 有要秀給user看的參數
+  parameter: ['Charge', 'Const_Current_value', 'SAMPLE_RATE', 'VOLTSTOP_MAX', 'VOLTSTOP_MIN', 'CC_CP_SPEED', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'TIME_DURATION'], // 這個mode用到的參數
+  showParameter: ['ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15', 'SAMPLE_RATE', 'Charge', 'Const_Current_value', 'VOLTSTOP_MAX', 'VOLTSTOP_MIN', 'TIME_DURATION'], // 有要秀給user看的參數
+  headerParameter: () => ['Charge', 'Const_Current_value', 'SAMPLE_RATE', 'VOLTSTOP_MAX', 'VOLTSTOP_MIN', 'CC_CP_SPEED', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'TIME_DURATION'], // 有要秀給user看的參數
  valScales: {
    linear: {
      func: (val) => {
@@ -21,11 +22,11 @@ export default {
        us: 1,
        ms: 1e3,
        s: 1e6,
-        m: 60 * 1e6,
-        h: 60 * 60 * 1e6,
-        auto: 1,
+        minute: 60 * 1e6,
+        hour: 60 * 60 * 1e6,
      },
-      defaultUnit: 'auto',
+      defaultUnit: 'ms',
+      downloadUnit: 'ms',
    },
    0: {
      name: 'I_in',
@@ -34,7 +35,8 @@ export default {
        uA: 1e3,
        mA: 1e6,
      },
-      defaultUnit: 'uA',
+      defaultUnit: 'mA',
+      downloadUnit: 'mA',
    },
    1: {
      name: 'V_in',
@@ -44,6 +46,7 @@ export default {
        V: 1e6,
      },
      defaultUnit: 'mV',
+      downloadUnit: 'mV',
    },
    2: {
      name: 'V_out',
@@ -53,6 +56,7 @@ export default {
        V: 1e6,
      },
      defaultUnit: 'mV',
+      downloadUnit: 'mV',
    },
  },
  charts: {
@@ -1,7 +1,8 @@
 export default {
  name: 'Cycle I-V',
-  parameter: ['ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15', 'VOLT_ORIGIN', 'VOLT_FINAL', 'VOLT_STEP', 'STEP_TIME', 'SAMPLE_RATE', 'CYCLE_NUMBER'], // 這個mode用到的參數
+  parameter: ['VOLT_ORIGIN', 'VOLT_FINAL', 'VOLT_STEP', 'STEP_TIME', 'SAMPLE_RATE', 'CYCLE_NUMBER', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15'], // 這個mode用到的參數
  showParameter: ['ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15', 'VOLT_ORIGIN', 'VOLT_FINAL', 'VOLT_STEP', 'STEP_TIME', 'SAMPLE_RATE', 'CYCLE_NUMBER'], // 有要秀給user看的參數
+  headerParameter: () => ['VOLT_ORIGIN', 'VOLT_FINAL', 'VOLT_STEP', 'STEP_TIME', 'SAMPLE_RATE', 'CYCLE_NUMBER', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15'], // export header的參數
  valScales: {
    linear: {
      func: (val) => {
@@ -21,11 +22,11 @@ export default {
        us: 1,
        ms: 1e3,
        s: 1e6,
-        m: 60 * 1e6,
-        h: 60 * 60 * 1e6,
-        auto: 1,
+        minute: 60 * 1e6,
+        hour: 60 * 60 * 1e6,
      },
-      defaultUnit: 'auto',
+      defaultUnit: 'ms',
+      downloadUnit: 'ms',
    },
    0: {
      name: 'I_in',
@@ -34,7 +35,8 @@ export default {
        uA: 1e3,
        mA: 1e6,
      },
-      defaultUnit: 'uA',
+      defaultUnit: 'mA',
+      downloadUnit: 'mA',
    },
    1: {
      name: 'V_out',
@@ -44,6 +46,7 @@ export default {
        V: 1e6,
      },
      defaultUnit: 'mV',
+      downloadUnit: 'mV',
    },
    2: {
      name: 'V_in',
@@ -53,13 +56,15 @@ export default {
        V: 1e6,
      },
      defaultUnit: 'mV',
+      downloadUnit: 'mV',
    },
    3: {
-      name: 'Cycle',
+      name: 'Cycle number',
      unit: {
        cycle: 1,
      },
      defaultUnit: 'cycle',
+      downloadUnit: null,
    },
  },
  charts: {
@@ -1,7 +1,8 @@
 export default {
  name: 'Cyclic Voltammetry',
-  parameter: ['ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15', 'VOLT_INITIAL', 'VOLT_MAX', 'VOLT_MIN', 'Scan_Rate', 'SAMPLE_RATE', 'CYCLE_NUMBER'], // 這個mode用到的參數
+  parameter: ['VOLT_INITIAL', 'VOLT_MAX', 'VOLT_MIN', 'Scan_Rate', 'SAMPLE_RATE', 'CYCLE_NUMBER', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15'], // 這個mode用到的參數
  showParameter: ['ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15', 'VOLT_INITIAL', 'VOLT_MAX', 'VOLT_MIN', 'Scan_Rate', 'SAMPLE_RATE', 'CYCLE_NUMBER'], // 有要秀給user看的參數
+  headerParameter: () => ['VOLT_INITIAL', 'VOLT_MAX', 'VOLT_MIN', 'Scan_Rate', 'SAMPLE_RATE', 'CYCLE_NUMBER', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15'], // 有要秀給user看的參數
  valScales: {
    linear: {
      func: (val) => {
@@ -23,9 +24,9 @@ export default {
        s: 1e6,
        m: 60 * 1e6,
        h: 60 * 60 * 1e6,
-        auto: 1,
      },
-      defaultUnit: 'auto',
+      defaultUnit: 'ms',
+      downloadUnit: 'ms',
    },
    0: {
      name: 'I_in',
@@ -34,16 +35,18 @@ export default {
        uA: 1e3,
        mA: 1e6,
      },
-      defaultUnit: 'uA',
+      defaultUnit: 'mA',
+      downloadUnit: 'mA',
    },
    1: {
-      name: 'V_out-V_in',
+      name: 'Potential',
      unit: {
        uV: 1,
        mV: 1e3,
        V: 1e6,
      },
      defaultUnit: 'mV',
+      downloadUnit: 'mV',
    },
    2: {
      name: 'V_out',
@@ -53,13 +56,15 @@ export default {
        V: 1e6,
      },
      defaultUnit: 'mV',
+      downloadUnit: 'mV',
    },
    3: {
-      name: 'Cycle',
+      name: 'Cycle number',
      unit: {
        cycle: 1,
      },
      defaultUnit: 'cycle',
+      downloadUnit: null,
    },
  },
  charts: {
@@ -0,0 +1,110 @@
+export default {
+  name: 'Differential Pulse Voltammetry',
+  parameter: ['DPV_e_init', 'DPV_e_final', 'DPV_increment', 'DPV_amp', 'DPV_pul_width', 'DPV_step_time'], // 這個mode用到的參數
+  parameterInMode: {
+    0: ['DPV_e_init', 'DPV_e_final', 'DPV_increment', 'DPV_amp', 'DPV_pul_width', 'DPV_step_time'],
+    1: ['DPV_e_init', 'DPV_e_1', 'DPV_e_2', 'DPV_e_final', 'DPV_increment', 'DPV_amp', 'DPV_pul_width', 'DPV_step_time', 'CYCLE_NUMBER', 'DPV_pulse_option', 'DPV_curr_rec'],
+    2: ['DPV_e_init', 'DPV_e_final', 'DPV_increment', 'DPV_amp', 'DPV_pul_width', 'DPV_step_time', 'CYCLE_NUMBER', 'DPV_notify_rate', 'DPV_engineering_enable', 'DPV_e_1', 'DPV_e_2', 'DPV_pulse_option'],
+  }, // 這個mode用到的參數
+  showParameter: [], // 有要秀給user看的參數
+  headerParameter: () => [], // export header的參數
+  valScales: {
+    linear: {
+      func: (val) => {
+        return val
+      },
+    },
+    log: {
+      func: (val) => {
+        return Math.log10(Math.abs(val))
+      },
+    },
+  },
+  channels: {
+    time: {
+      name: 'Time',
+      unit: {
+        us: 1,
+        ms: 1e3,
+        s: 1e6,
+        minute: 60 * 1e6,
+        hour: 60 * 60 * 1e6,
+      },
+      defaultUnit: 'ms',
+      downloadUnit: 'ms',
+    },
+    0: {
+      name: 'I_in',
+      unit: {
+        nA: 1,
+        uA: 1e3,
+        mA: 1e6,
+      },
+      defaultUnit: 'mA',
+      downloadUnit: 'mA',
+    },
+    1: {
+      name: 'Potential',
+      unit: {
+        uV: 1,
+        mV: 1e3,
+        V: 1e6,
+      },
+      defaultUnit: 'mV',
+      downloadUnit: 'mV',
+    },
+    2: {
+      name: 'V_out',
+      unit: {
+        uV: 1,
+        mV: 1e3,
+        V: 1e6,
+      },
+      defaultUnit: 'mV',
+      downloadUnit: 'mV',
+    },
+    3: {
+      name: 'Cycle number',
+      unit: {
+        cycle: 1,
+      },
+      defaultUnit: 'cycle',
+      downloadUnit: null,
+    },
+  },
+  charts: {
+    default: [
+      {
+        name: 'Open Circuit Potential',
+        description: '',
+        subplot: [
+          {
+            x1: {
+              type: 'time',
+              valScale: 'linear',
+              min: 'dataMin',
+              max: 'dataMax',
+            },
+            y1: {
+              type: 'value',
+              valScale: 'linear',
+              min: 'dataMin',
+              max: 'dataMax',
+            },
+            data: [
+              {
+                legend: 'OCP',
+                x1: {
+                  channel: 'time',
+                },
+                y1: {
+                  channel: 1,
+                },
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+}
@@ -1,6 +1,6 @@
 export default {
  name: 'Dev Mode',
-  parameter: [],
+  parameter: ['ADC_VALUE_I'],
  valScales: {
    linear: {
      func: (val) => {
@@ -1,7 +1,8 @@
 export default {
  name: 'Function Generator',
-  parameter: ['ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15', 'DAC_VOLT', 'SAMPLE_RATE'], // 這個mode用到的參數
-  showParameter: ['ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15', 'DAC_VOLT', 'SAMPLE_RATE'], // 有要秀給user看的參數
+  parameter: ['DAC_VOLT', 'SAMPLE_RATE', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15', 'TIME_DURATION'], // 這個mode用到的參數
+  showParameter: ['ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15', 'DAC_VOLT', 'SAMPLE_RATE', 'TIME_DURATION'], // 有要秀給user看的參數
+  headerParameter: () => ['DAC_VOLT', 'SAMPLE_RATE', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'TIME_DURATION'], // export header的參數
  valScales: {
    linear: {
      func: (val) => {
@@ -21,11 +22,11 @@ export default {
        us: 1,
        ms: 1e3,
        s: 1e6,
-        m: 60 * 1e6,
-        h: 60 * 60 * 1e6,
-        auto: 1,
+        minute: 60 * 1e6,
+        hour: 60 * 60 * 1e6,
      },
-      defaultUnit: 'auto',
+      defaultUnit: 'ms',
+      downloadUnit: 'ms',
    },
    0: {
      name: 'I_in',
@@ -34,7 +35,8 @@ export default {
        uA: 1e3,
        mA: 1e6,
      },
-      defaultUnit: 'uA',
+      defaultUnit: 'mA',
+      downloadUnit: 'mA',
    },
    1: {
      name: 'V_out',
@@ -44,6 +46,7 @@ export default {
        V: 1e6,
      },
      defaultUnit: 'mV',
+      downloadUnit: 'mV',
    },
    2: {
      name: 'V_in',
@@ -53,6 +56,7 @@ export default {
        V: 1e6,
      },
      defaultUnit: 'mV',
+      downloadUnit: 'mV',
    },
  },
  charts: {
@@ -1,7 +1,8 @@
 export default {
  name: 'I-T Graph',
-  parameter: ['ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15', 'DAC_VOLT', 'SAMPLE_RATE'], // 這個mode用到的參數
-  showParameter: ['ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15', 'DAC_VOLT', 'SAMPLE_RATE'], // 有要秀給user看的參數
+  parameter: ['DAC_VOLT', 'SAMPLE_RATE', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15', 'TIME_DURATION'], // 這個mode用到的參數
+  showParameter: ['ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15', 'DAC_VOLT', 'SAMPLE_RATE', 'TIME_DURATION'], // 有要秀給user看的參數
+  headerParameter: () => ['DAC_VOLT', 'SAMPLE_RATE', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'TIME_DURATION'], // export header的參數
  valScales: {
    linear: {
      func: (val) => {
@@ -21,11 +22,11 @@ export default {
        us: 1,
        ms: 1e3,
        s: 1e6,
-        m: 60 * 1e6,
-        h: 60 * 60 * 1e6,
-        auto: 1,
+        minute: 60 * 1e6,
+        hour: 60 * 60 * 1e6,
      },
-      defaultUnit: 'auto',
+      defaultUnit: 'ms',
+      downloadUnit: 'ms',
    },
    0: {
      name: 'I_in',
@@ -34,7 +35,8 @@ export default {
        uA: 1e3,
        mA: 1e6,
      },
-      defaultUnit: 'uA',
+      defaultUnit: 'mA',
+      downloadUnit: 'mA',
    },
    1: {
      name: 'V_in',
@@ -44,6 +46,7 @@ export default {
        V: 1e6,
      },
      defaultUnit: 'mV',
+      downloadUnit: 'mV',
    },
    2: {
      name: 'V_out',
@@ -53,6 +56,7 @@ export default {
        V: 1e6,
      },
      defaultUnit: 'mV',
+      downloadUnit: 'mV',
    },
  },
  charts: {
@@ -1,7 +1,8 @@
 export default {
  name: 'I-V Curve',
-  parameter: ['ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15', 'VOLT_ORIGIN', 'VOLT_FINAL', 'VOLT_STEP', 'STEP_TIME', 'SAMPLE_RATE'], // 這個mode用到的參數
+  parameter: ['VOLT_ORIGIN', 'VOLT_FINAL', 'VOLT_STEP', 'STEP_TIME', 'SAMPLE_RATE', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15'], // 這個mode用到的參數
  showParameter: ['ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15', 'VOLT_ORIGIN', 'VOLT_FINAL', 'VOLT_STEP', 'STEP_TIME', 'SAMPLE_RATE'], // 有要秀給user看的參數
+  headerParameter: () => ['VOLT_ORIGIN', 'VOLT_FINAL', 'VOLT_STEP', 'STEP_TIME', 'SAMPLE_RATE', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15'], // export header的參數
  valScales: {
    linear: {
      func: (val) => {
@@ -21,11 +22,11 @@ export default {
        us: 1,
        ms: 1e3,
        s: 1e6,
-        m: 60 * 1e6,
-        h: 60 * 60 * 1e6,
-        auto: 1,
+        minute: 60 * 1e6,
+        hour: 60 * 60 * 1e6,
      },
-      defaultUnit: 'auto',
+      defaultUnit: 'ms',
+      downloadUnit: 'ms',
    },
    0: {
      name: 'I_in',
@@ -34,7 +35,8 @@ export default {
        uA: 1e3,
        mA: 1e6,
      },
-      defaultUnit: 'uA',
+      defaultUnit: 'mA',
+      downloadUnit: 'mA',
    },
    1: {
      name: 'V_out',
@@ -44,6 +46,7 @@ export default {
        V: 1e6,
      },
      defaultUnit: 'mV',
+      downloadUnit: 'mV',
    },
    2: {
      name: 'V_in',
@@ -53,6 +56,7 @@ export default {
        V: 1e6,
      },
      defaultUnit: 'mV',
+      downloadUnit: 'mV',
    },
  },
  charts: {
@@ -1,7 +1,8 @@
 export default {
  name: 'Linear Sweep Voltammetry',
-  parameter: ['ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15', 'VOLT_INITIAL', 'VOLT_EFINAL', 'Scan_Rate', 'SAMPLE_RATE'], // 這個mode用到的參數
+  parameter: ['VOLT_INITIAL', 'VOLT_EFINAL', 'Scan_Rate', 'SAMPLE_RATE', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15'], // 這個mode用到的參數
  showParameter: ['ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15', 'VOLT_INITIAL', 'VOLT_EFINAL', 'Scan_Rate', 'SAMPLE_RATE'], // 有要秀給user看的參數
+  headerParameter: () => ['VOLT_INITIAL', 'VOLT_EFINAL', 'Scan_Rate', 'SAMPLE_RATE', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15'], // 有要秀給user看的參數
  valScales: {
    linear: {
      func: (val) => {
@@ -21,11 +22,11 @@ export default {
        us: 1,
        ms: 1e3,
        s: 1e6,
-        m: 60 * 1e6,
-        h: 60 * 60 * 1e6,
-        auto: 1,
+        minute: 60 * 1e6,
+        hour: 60 * 60 * 1e6,
      },
-      defaultUnit: 'auto',
+      defaultUnit: 'ms',
+      downloadUnit: 'ms',
    },
    0: {
      name: 'I_in',
@@ -34,16 +35,18 @@ export default {
        uA: 1e3,
        mA: 1e6,
      },
-      defaultUnit: 'uA',
+      defaultUnit: 'mA',
+      downloadUnit: 'mA',
    },
    1: {
-      name: 'V_out-V_in',
+      name: 'Potential',
      unit: {
        uV: 1,
        mV: 1e3,
        V: 1e6,
      },
      defaultUnit: 'mV',
+      downloadUnit: 'mV',
    },
    2: {
      name: 'V_out',
@@ -53,6 +56,7 @@ export default {
        V: 1e6,
      },
      defaultUnit: 'mV',
+      downloadUnit: 'mV',
    },
  },
  charts: {
@@ -1,7 +1,8 @@
 export default {
  name: 'Open Circuit Potential',
-  parameter: ['ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'SAMPLE_RATE'], // 這個mode用到的參數
-  showParameter: ['ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'SAMPLE_RATE'], // 有要秀給user看的參數
+  parameter: ['SAMPLE_RATE', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'TIME_DURATION'], // 這個mode用到的參數
+  showParameter: ['ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'SAMPLE_RATE', 'TIME_DURATION'], // 有要秀給user看的參數
+  headerParameter: () => ['SAMPLE_RATE', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'TIME_DURATION'], // export header的參數
  valScales: {
    linear: {
      func: (val) => {
@@ -21,11 +22,11 @@ export default {
        us: 1,
        ms: 1e3,
        s: 1e6,
-        m: 60 * 1e6,
-        h: 60 * 60 * 1e6,
-        auto: 1,
+        minute: 60 * 1e6,
+        hour: 60 * 60 * 1e6,
      },
-      defaultUnit: 'auto',
+      defaultUnit: 'ms',
+      downloadUnit: 'ms',
    },
    0: {
      name: 'I_in',
@@ -34,16 +35,18 @@ export default {
        uA: 1e3,
        mA: 1e6,
      },
-      defaultUnit: 'uA',
+      defaultUnit: 'mA',
+      downloadUnit: 'mA',
    },
    1: {
-      name: 'V_out-V_in',
+      name: 'Potential',
      unit: {
        uV: 1,
        mV: 1e3,
        V: 1e6,
      },
      defaultUnit: 'mV',
+      downloadUnit: 'mV',
    },
    2: {
      name: 'V_in',
@@ -53,6 +56,7 @@ export default {
        V: 1e6,
      },
      defaultUnit: 'mV',
+      downloadUnit: 'mV',
    },
  },
  charts: {
@@ -1,7 +1,24 @@
 export default {
  name: 'Pulse Sensing',
-  parameter: ['V_initial', 't_pulse', 'CURR_REC_START', 'CURR_REC_END', 'segment_ui_order', 'segment_order', 'DATA_OUTPUT', 'CYCLE_NUMBER'], // 這個mode用到的參數
-  showParameter: ['V_initial', 't_pulse', 'CURR_REC_START', 'CURR_REC_END', 'DATA_OUTPUT', 'CYCLE_NUMBER'], // 有要秀給user看的參數
+  parameter: ['V_initial', 't_pulse', 'CURR_REC'],
+  // parameter: ['V_initial', 't_pulse', 'CURR_REC_START', 'CURR_REC_END', 'segment_ui_order', 'segment_order', 'DATA_OUTPUT', 'CYCLE_NUMBER'], // 這個mode用到的參數
+  showParameter: ['V_initial', 't_pulse', 'CURR_REC'], // 有要秀給user看的參數
+  headerParameter: (parameterSet) => {
+    // [
+    //   'V_initial_0', 't_pulse_0', 'CURR_REC_START_0', 'CURR_REC_END_0',
+    //   'V_initial_1', 't_pulse_1', 'CURR_REC_START_1', 'CURR_REC_END_1',
+    //   'V_initial_2', 't_pulse_2', 'CURR_REC_START_2', 'CURR_REC_END_2',
+    //   'V_initial_3', 't_pulse_3', 'CURR_REC_START_3', 'CURR_REC_END_3',
+    // ]
+    const defaultParameter = ['V_initial', 't_pulse', 'CURR_REC']
+    const ret = []
+    for (let index = 0; index < 4; index++) {
+      if (parameterSet.segment_order[index] !== -1) {
+        ret.push(...defaultParameter.map(ele => [ele, index]))
+      }
+    }
+    return ret
+  }, // export header的參數
  valScales: {
    linear: {
      func: (val) => {
@@ -21,11 +38,11 @@ export default {
        us: 1,
        ms: 1e3,
        s: 1e6,
-        m: 60 * 1e6,
-        h: 60 * 60 * 1e6,
-        auto: 1,
+        minute: 60 * 1e6,
+        hour: 60 * 60 * 1e6,
      },
-      defaultUnit: 'auto',
+      defaultUnit: 'ms',
+      downloadUnit: 'ms',
    },
    0: {
      name: 'pul1_I_in',
@@ -34,7 +51,8 @@ export default {
        uA: 1e3,
        mA: 1e6,
      },
-      defaultUnit: 'uA',
+      defaultUnit: 'mA',
+      downloadUnit: 'mA',
    },
    1: {
      name: 'pul2_I_in',
@@ -43,7 +61,8 @@ export default {
        uA: 1e3,
        mA: 1e6,
      },
-      defaultUnit: 'uA',
+      defaultUnit: 'mA',
+      downloadUnit: 'mA',
    },
  },
  charts: {
@@ -1,7 +1,8 @@
 export default {
  name: 'R-T Graph',
-  parameter: ['CTRL_HIGH_Z_15', 'DAC_VOLT', 'SAMPLE_RATE'], // 這個mode用到的參數
-  showParameter: ['CTRL_HIGH_Z_15', 'DAC_VOLT', 'SAMPLE_RATE'], // 有要秀給user看的參數
+  parameter: ['DAC_VOLT', 'SAMPLE_RATE', 'CTRL_HIGH_Z_15', 'TIME_DURATION'], // 這個mode用到的參數
+  showParameter: ['CTRL_HIGH_Z_15', 'DAC_VOLT', 'SAMPLE_RATE', 'TIME_DURATION'], // 有要秀給user看的參數
+  headerParameter: () => ['DAC_VOLT', 'SAMPLE_RATE', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'TIME_DURATION'], // export header的參數
  valScales: {
    linear: {
      func: (val) => {
@@ -21,11 +22,11 @@ export default {
        us: 1,
        ms: 1e3,
        s: 1e6,
-        m: 60 * 1e6,
-        h: 60 * 60 * 1e6,
-        auto: 1,
+        minute: 60 * 1e6,
+        hour: 60 * 60 * 1e6,
      },
-      defaultUnit: 'auto',
+      defaultUnit: 'ms',
+      downloadUnit: 'ms',
    },
    0: {
      name: 'I_in',
@@ -34,7 +35,8 @@ export default {
        uA: 1e3,
        mA: 1e6,
      },
-      defaultUnit: 'uA',
+      defaultUnit: 'mA',
+      downloadUnit: 'mA',
    },
    1: {
      name: 'V_out',
@@ -44,16 +46,22 @@ export default {
        V: 1e6,
      },
      defaultUnit: 'mV',
+      downloadUnit: 'mV',
    },
    2: {
-      name: 'R',
+      name: 'Resistor',
      unit: {
        mΩ: 1,
+        mohm: 1,
        Ω: 1e3,
+        ohm: 1e3,
        kΩ: 1e6,
+        kohm: 1e6,
        MΩ: 1e9,
+        Mohm: 1e9,
      },
      defaultUnit: 'Ω',
+      downloadUnit: 'ohm',
    },
  },
  charts: {
@@ -1,7 +1,8 @@
 export default {
  name: 'V-T Graph',
-  parameter: ['ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15', 'SAMPLE_RATE'], // 這個mode用到的參數
-  showParameter: ['ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15', 'SAMPLE_RATE'], // 有要秀給user看的參數
+  parameter: ['SAMPLE_RATE', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15', 'TIME_DURATION'], // 這個mode用到的參數
+  showParameter: ['ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15', 'SAMPLE_RATE', 'TIME_DURATION'], // 有要秀給user看的參數
+  headerParameter: () => ['SAMPLE_RATE', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'TIME_DURATION'], // export header的參數
  valScales: {
    linear: {
      func: (val) => {
@@ -21,11 +22,11 @@ export default {
        us: 1,
        ms: 1e3,
        s: 1e6,
-        m: 60 * 1e6,
-        h: 60 * 60 * 1e6,
-        auto: 1,
+        minute: 60 * 1e6,
+        hour: 60 * 60 * 1e6,
      },
-      defaultUnit: 'auto',
+      defaultUnit: 'ms',
+      downloadUnit: 'ms',
    },
    0: {
      name: 'I_in',
@@ -34,7 +35,8 @@ export default {
        uA: 1e3,
        mA: 1e6,
      },
-      defaultUnit: 'uA',
+      defaultUnit: 'mA',
+      downloadUnit: 'mA',
    },
    1: {
      name: 'V_in',
@@ -44,6 +46,7 @@ export default {
        V: 1e6,
      },
      defaultUnit: 'mV',
+      downloadUnit: 'mV',
    },
  },
  charts: {
@@ -0,0 +1,97 @@
+export default {
+  name: 'Chronoamperometry',
+  parameter: ['VOLT_VSCAN', 'SAMPLE_RATE', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15', 'TIME_DURATION'], // 這個mode用到的參數
+  showParameter: ['ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15', 'VOLT_VSCAN', 'SAMPLE_RATE', 'TIME_DURATION'], // 有要秀給user看的參數
+  headerParameter: () => ['VOLT_VSCAN', 'SAMPLE_RATE', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'TIME_DURATION'], // 有要秀給user看的參數
+  valScales: {
+    linear: {
+      func: (val) => {
+        return val
+      },
+    },
+    log: {
+      func: (val) => {
+        return Math.log10(Math.abs(val))
+      },
+    },
+  },
+  channels: {
+    time: {
+      name: 'Time',
+      unit: {
+        us: 1,
+        ms: 1e3,
+        s: 1e6,
+        minute: 60 * 1e6,
+        hour: 60 * 60 * 1e6,
+      },
+      defaultUnit: 'ms',
+      downloadUnit: 'ms',
+    },
+    0: {
+      name: 'I_in',
+      unit: {
+        nA: 1,
+        uA: 1e3,
+        mA: 1e6,
+      },
+      defaultUnit: 'mA',
+      downloadUnit: 'mA',
+    },
+    1: {
+      name: 'Potential',
+      unit: {
+        uV: 1,
+        mV: 1e3,
+        V: 1e6,
+      },
+      defaultUnit: 'mV',
+      downloadUnit: 'mV',
+    },
+    2: {
+      name: 'V_out',
+      unit: {
+        uV: 1,
+        mV: 1e3,
+        V: 1e6,
+      },
+      defaultUnit: 'mV',
+      downloadUnit: 'mV',
+    },
+  },
+  charts: {
+    default: [
+      {
+        name: 'Chronoamperometric',
+        description: '',
+        subplot: [
+          {
+            x1: {
+              type: 'time',
+              valScale: 'linear',
+              min: 'dataMin',
+              max: 'dataMax',
+            },
+            y1: {
+              type: 'value',
+              valScale: 'linear',
+              min: 'dataMin',
+              max: 'dataMax',
+            },
+            data: [
+              {
+                legend: 'chrono',
+                x1: {
+                  channel: 'time',
+                },
+                y1: {
+                  channel: 0,
+                },
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+}
@@ -1,7 +1,8 @@
 export default {
  name: 'Cyclic Voltammetry',
-  parameter: ['ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15', 'VOLT_INITIAL', 'VOLT_MAX', 'VOLT_MIN', 'Scan_Rate', 'SAMPLE_RATE', 'CYCLE_NUMBER'], // 這個mode用到的參數
+  parameter: ['VOLT_INITIAL', 'VOLT_MAX', 'VOLT_MIN', 'Scan_Rate', 'SAMPLE_RATE', 'CYCLE_NUMBER', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15'], // 這個mode用到的參數
  showParameter: ['ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15', 'VOLT_INITIAL', 'VOLT_MAX', 'VOLT_MIN', 'Scan_Rate', 'SAMPLE_RATE', 'CYCLE_NUMBER'], // 有要秀給user看的參數
+  headerParameter: () => ['VOLT_INITIAL', 'VOLT_MAX', 'VOLT_MIN', 'Scan_Rate', 'SAMPLE_RATE', 'CYCLE_NUMBER', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15'], // 有要秀給user看的參數
  valScales: {
    linear: {
      func: (val) => {
@@ -26,6 +27,7 @@ export default {
        auto: 1,
      },
      defaultUnit: 'auto',
+      downloadUnit: 'ms',
    },
    0: {
      name: 'I_in',
@@ -35,6 +37,7 @@ export default {
        mA: 1e6,
      },
      defaultUnit: 'uA',
+      downloadUnit: 'mA',
    },
    1: {
      name: 'V_out-V_in',
@@ -44,6 +47,7 @@ export default {
        V: 1e6,
      },
      defaultUnit: 'mV',
+      downloadUnit: 'mV',
    },
    2: {
      name: 'V_out',
@@ -53,6 +57,7 @@ export default {
        V: 1e6,
      },
      defaultUnit: 'mV',
+      downloadUnit: 'mV',
    },
    3: {
      name: 'Cycle',
@@ -60,6 +65,7 @@ export default {
        cycle: 1,
      },
      defaultUnit: 'cycle',
+      downloadUnit: null,
    },
  },
  charts: {
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
peterlu14	b3a745252f	[update] add show datastream buffer in dev mode	2022-08-11 00:59:14 +08:00
peterlu14	d229e1be28	[update] add debug button (show data)	2022-08-11 00:51:58 +08:00
peterlu14	c95bc79096	[update] rename developer mode & bind key	2022-08-10 23:56:38 +08:00
peterlu14	ac19737527	[update] default time unit ms -> s	2022-08-10 22:21:18 +08:00
peterlu14	69e4af91af	[update] remove x-axis interval and select all buttons & resize grid and dataZoom and asixLabel	2022-08-10 22:20:54 +08:00
peterlu14	cd961f70f9	[warning] remove warning of e-charts update	2022-08-10 22:13:53 +08:00
peterlu14	8b7b92bffb	[update] add eis ca mode	2022-08-09 14:54:32 +08:00
peterlu14	1b38bd1c00	[debug] fix library rename cause scheduler not showing problem	2022-08-09 14:53:12 +08:00
peterlu14	ab630b88e6	[update] fix replay show panel (x-axis not yet)	2022-08-09 09:11:56 +08:00
peterlu14	d83ae9370f	remove brush in factory & hide value	2022-08-08 17:51:51 +08:00
peterlu14	a11393f512	Merge branch 'dev/sg-filter' into release/v1.3.0/replay-capture-sgFilter	2022-08-08 17:34:02 +08:00
peterlu14	69d604045e	Merge remote-tracking branch 'origin/testing/echarts-update' into release/v1.3.0/replay-capture-sgFilter	2022-08-08 17:32:09 +08:00
peterlu14	26cb680e6f	Merge remote-tracking branch 'origin/dev/capture_chartData' into release/v1.3.0/replay-capture-sgFilter	2022-08-08 17:31:50 +08:00
peterlu14	815754ddf6	[debug] fix file name not refresh problem	2022-08-08 17:25:55 +08:00
peterlu14	d29a5a11e1	[update] fix ca mode naming problem	2022-08-08 17:05:42 +08:00
peterlu14	f1781037be	[update] sg-filter	2022-08-08 17:03:42 +08:00
108000207	cfab65e4a0	[update] check the calculation of specific integral done	2022-08-08 16:43:52 +08:00
sss28072637	fdd8c29bfb	[update] finish capture data & boundaryGap	2022-08-08 16:36:09 +08:00
108000207	ad4d31ce64	[update] SpecificIntegral component works	2022-08-08 10:29:21 +08:00
sss28072637	5a9349d903	[update] add boundaryGap (need to be adjustable)	2022-08-05 18:23:10 +08:00
108000207	e1453cf107	[update] new component for Specific Integral, but haven't connect with TopControlPanel	2022-08-05 18:18:44 +08:00
108000207	1453e70915	[update] add auto refresh after blur the va-input	2022-08-05 18:00:37 +08:00
108000207	2791d20173	[update] add va-input for the brush boundary	2022-08-05 17:36:52 +08:00
108000207	bd314b03dc	[update] add specific integral on replay	2022-08-05 11:33:11 +08:00
sss28072637	a801c0626a	[update] add the new function of capturing chart to a new chart	2022-08-04 17:47:34 +08:00
peterlu14	5f3f3110d9	[update] fix loading	2022-08-04 13:33:38 +08:00
peterlu14	41b00129ef	[update] echarts update version 5.3.3	2022-08-04 10:39:27 +08:00
peterlu14	13cb610302	Merge branch 'release/v1.2.8/realtime-tool' into testing/echarts-update	2022-08-04 10:14:54 +08:00
peterlu14	b7b70b86e2	Merge remote-tracking branch 'origin/dev/fix_dataZoom' into release/v1.2.8/realtime-tool	2022-08-03 14:50:36 +08:00
sss28072637	2575a97894	[debug] fix real-time dataZoom bug	2022-08-03 14:45:38 +08:00
peterlu14	a1f09942d9	Merge branch 'release/v1.2.9/fix-testing-bugs' into release/v1.2.8/realtime-tool	2022-08-02 18:42:49 +08:00
peterlu14	e9dc718d85	[update] fix cache with controller id	2022-08-02 16:25:47 +08:00
108000207	2f7a6b97e7	Merge branch 'dev/replay-calculation' into release/v1.2.8/realtime-tool	2022-08-02 14:35:31 +08:00
108000207	11a6de5e57	[update] add the getPanelInfo for tooltips formatter	2022-08-02 14:21:13 +08:00
peterlu14	7630951470	Merge remote-tracking branch 'origin/dev/realTimeDisplay_realTimeCalculation' into release/v1.2.8/realtime-tool	2022-08-02 12:52:16 +08:00
nthu1080112244	eb672d9c0a	[update] real time cycle display	2022-08-02 12:51:19 +08:00
sss28072637	566f59e29c	fix replay bugs, add integral in I-V mode(replay & realtime) and fix integral bugs	2022-08-01 18:22:01 +08:00
peterlu14	f06003304a	Merge branch 'release/v1.2.9/fix-testing-bugs' into release/v1.2.8/realtime-tool	2022-07-29 14:54:26 +08:00
peterlu14	c0fc13c451	[update] cp-mode rename	2022-07-29 14:54:07 +08:00
peterlu14	ab1df2cfe1	[update] add time duration in excel and replay & add cp mode volt unit	2022-07-29 10:16:05 +08:00
peterlu14	0b01d6c785	[update] fix display problem & help pic	2022-07-28 16:56:26 +08:00
peterlu14	d769a50459	[debug] charge/discharge value error	2022-07-28 14:58:47 +08:00
peterlu14	dac276c9de	[debug] fix cc mode charge display error	2022-07-28 14:40:36 +08:00
peterlu14	65c00031e3	[debug] fix volt step unit error	2022-07-28 10:35:51 +08:00
peterlu14	0ff3dd556f	[update] remove vue warn	2022-07-28 10:30:09 +08:00
peterlu14	968c578cee	Merge branch 'dev/realTimeDisplay_realTimeCalculation' into 'release/v1.2.8/realtime-tool' [debug] fix the conflict between display tool and funtional tool See merge request wisetop/controller/wisetopvue!1	2022-07-28 02:22:44 +00:00
peterlu14	b3510b1990	[debug] fix volt step unit error	2022-07-28 10:05:47 +08:00
108000207	7fc8d24a71	[update] add replay functional, need to check the time gap	2022-07-27 18:31:52 +08:00
nthu1080112244	35d45a36a4	[update] time-axis formatter	2022-07-27 18:31:16 +08:00
nthu1080112244	f1a55c3cd1	[debug] remove useless code	2022-07-27 14:09:20 +08:00
nthu1080112244	2577dcba9a	[update] 1. built and use CanvasChartTable.js 2. merge real time functional amd real time display 3. tooltip update	2022-07-27 13:41:33 +08:00
108000207	f2709241d2	[init] add CanvasChartReplayCalculation component	2022-07-27 09:56:20 +08:00
ROY	632762ce14	[update] library EliteEIS rename cause replay problem	2022-07-26 18:29:34 +08:00
sss28072637	63b627622b	[update] use setTimeOut to make the emit from changeScale work	2022-07-26 18:07:30 +08:00
ROY	e4e89a414a	[update] fix library rename replay nameing bug	2022-07-26 14:00:15 +08:00
ROY	921166cdc7	[update] update library name & change global chart setting	2022-07-26 11:05:50 +08:00
peterlu14	a3e7c7e2a6	Merge remote-tracking branch 'origin/dev/realTimeDisplayNew' into release/v1.2.8/realtime-tool	2022-07-26 09:53:25 +08:00
peterlu14	7469d270d0	Merge remote-tracking branch 'origin/dev/realtime-tool-fixed' into release/v1.2.8/realtime-tool	2022-07-26 09:53:21 +08:00
nthu1080112244	3c4676ec2c	[update] construct new table for chart axis unit	2022-07-26 09:45:49 +08:00
sss28072637	265c363858	fix real-time tooltips	2022-07-25 14:14:26 +08:00
peterlu14	89da594392	Merge remote-tracking branch 'origin/dev/haolung' into release/v1.2.8/realtime-tool	2022-07-22 16:24:33 +08:00
sss28072637	436ed27479	fix button bug	2022-07-22 14:55:42 +08:00
peterlu14	ea14ee2f3e	[update] remove redundence code	2022-07-22 14:31:16 +08:00
peterlu14	4416367acf	[update] fix replay tooltip problem	2022-07-22 14:31:13 +08:00
peterlu14	e44c1e4c18	[update] fix merge config table problem	2022-07-22 14:31:09 +08:00
peterlu14	4910719aa4	Merge remote-tracking branch 'origin/dev/real_time_value' into release/v1.2.8/realtime-tool	2022-07-22 14:30:32 +08:00
peterlu14	223e898d5e	[update] fix config-table rename problem ( download, replay )	2022-07-22 14:25:05 +08:00
sss28072637	1e80731438	separate the calculation file	2022-07-22 14:17:09 +08:00
peterlu14	d3d080eb08	[update] add EIS mimi	2022-07-22 10:34:07 +08:00
nthu1080112244	0bd84d865f	[update] integrate axis unit, tooltip information	2022-07-22 09:41:40 +08:00
sss28072637	b14488cf49	simplify the code (ver1)	2022-07-21 17:08:49 +08:00
peterlu14	4dda2d0a6a	[update] switch page remove cache fix	2022-07-21 17:02:16 +08:00
sss28072637	3460a0bfa0	fix time axisLabel	2022-07-21 11:46:47 +08:00
sss28072637	90738611eb	(07/20) finish differential, log, integral, add additional function, fix bugs and clear console log	2022-07-20 17:12:30 +08:00
peterlu14	35ba66ddd6	Merge branch 'release/v1.2.5/task_configuration' into release/v1.2.7/scheduler-parameter	2022-07-20 09:53:03 +08:00
peterlu14	4c3c63a0ba	[update] schedule parameter fix & config-table add default value	2022-07-20 09:52:40 +08:00
sss28072637	d22653a5a5	clear console error	2022-07-19 16:38:39 +08:00
sss28072637	05cae92b12	finish integral, differential and log	2022-07-19 14:59:08 +08:00
sss28072637	adbf30f08d	Merge remote-tracking branch 'origin/release/v1.2.5/task_configuration' into dev/haolung	2022-07-19 11:32:16 +08:00
nthu1080112244	5fe321828a	Merge remote-tracking branch 'origin/release/v1.2.5/task_configuration' into dev/real_time_value	2022-07-19 11:30:21 +08:00
peterlu14	ca823d174b	[update] reset series data type error fix	2022-07-19 11:26:46 +08:00
nthu1080112244	2e573e2c72	[update] add coment	2022-07-19 11:22:55 +08:00
nthu1080112244	84d136d4cf	[update] real time display modularization	2022-07-18 18:28:23 +08:00
nthu1080112244	9b296c45bd	[update] complete real time value display	2022-07-18 15:13:16 +08:00
nthu1080112244	ef9db8bee2	Merge commit 'bcf7b51dc6f0c241ab2f8bd3fdffb4173a5e7693' into dev/real_time_value	2022-07-18 14:15:23 +08:00
sss28072637	175f4ef23e	Merge remote-tracking branch 'origin/release/v1.2.5/task_configuration' into dev/haolung	2022-07-18 10:28:38 +08:00
sss28072637	eba7c080b4	merge_0718	2022-07-18 09:55:05 +08:00
nthu1080112244	7c4515521d	[update] unit correction, real time value bar	2022-07-15 19:40:34 +08:00
peterlu14	3db09734d2	[update] use deviceParameterWindow instead	2022-07-15 10:08:24 +08:00
peterlu14	c0e3a9c61a	[update] rename param-table to config-table & add api to config	2022-07-15 10:08:24 +08:00
peterlu14	bcf7b51dc6	[update] mapping unify format string	2022-07-15 10:05:24 +08:00
peterlu14	ba660ac952	[update] fix girdsource not clear problem	2022-07-14 10:21:39 +08:00
sss28072637	1062aea8db	fix tooltip constructor parameters, start / stop clicked reset, clear console errors, add differential function, get timeIndex automatically	2022-07-13 16:33:17 +08:00
sss28072637	b1f9edc624	Merge remote-tracking branch 'origin/release/v1.2.5/task_configuration' into dev/haolung	2022-07-13 09:37:41 +08:00
sss28072637	9210646611	add comments	2022-07-12 18:17:38 +08:00
sss28072637	de2315cd5b	finish integral and log	2022-07-12 17:33:01 +08:00
sss28072637	ec231aa368	fix stop mode intergration	2022-07-12 15:33:21 +08:00
nthu1080112244	7b6948d027	Merge remote-tracking branch 'origin/release/v1.2.5/task_configuration' into dev/real_time_value	2022-07-12 15:15:12 +08:00
nthu1080112244	28f1aef82c	[update] default real time representation	2022-07-12 15:14:31 +08:00
sss28072637	908db19110	finish mode switch button	2022-07-12 14:06:12 +08:00
sss28072637	9520e5102c	finish integral of VT_mode	2022-07-12 12:02:58 +08:00
peterlu14	d171d8b572	[update] only refresh chart which device running	2022-07-12 10:41:43 +08:00
peterlu14	1e57bde1df	[update] chartID uuid && fix mappingID -1 && reset series data && chart created manual or default	2022-07-12 10:38:04 +08:00
peterlu14	0946b01a41	[update] prop chartID add new type	2022-07-12 10:30:36 +08:00
peterlu14	a25e784fd4	Merge branch 'release/v1.2.4/develop_env_var'	2022-07-07 09:35:39 +08:00
peterlu14	ff18fdd8bd	[update] add development env variable to control websocket ip	2022-06-29 15:58:23 +08:00
peterlu14	4c4631e89b	[update] add debug page	2022-06-29 11:42:03 +08:00
peterlu14	7480717cac	Merge branch 'release/v1.2.2/led_testing&download_all'	2022-06-24 15:11:44 +08:00
peterlu14	a29d32fd0f	[update] add download all	2022-06-23 20:01:41 +08:00
peterlu14	942e98199e	[update] add developer page with LED testing	2022-06-23 20:00:40 +08:00
peterlu14	482caf9650	Merge branch 'release/v.1.2.1/restruct_taskInfo_and_param'	2022-06-23 17:50:36 +08:00
peterlu14	3dfbf809e0	[update] fix chart source name with memory board	2022-06-23 17:35:11 +08:00
peterlu14	e15b1ea27c	[update] add frontend version	2022-06-22 22:01:52 +08:00
peterlu14	5829c6c0f4	[update] cut old new file	2022-06-22 19:24:27 +08:00
peterlu14	eeb0775aa3	[update] replace item with new item	2022-06-22 17:23:29 +08:00
peterlu14	fbf8fe1a19	[update] fix eis replay mode problem (temp)	2022-06-22 16:31:41 +08:00
peterlu14	1172b1220c	[update] fix pulse sensing replay parameter	2022-06-22 16:12:07 +08:00
peterlu14	f6ef173edb	[update] fix eis equation correction	2022-06-22 13:36:56 +08:00
peterlu14	5d03d156e1	[update] fix unit μ encoding problem	2022-06-22 11:20:16 +08:00
peterlu14	7eaf49e19e	[update] fix pulseing download	2022-06-21 16:14:01 +08:00
peterlu14	704b3bf0af	[update] remove resource error	2022-06-17 19:49:48 +08:00
peterlu14	a44e96a96c	[update] add input range slider component	2022-06-17 19:48:31 +08:00
peterlu14	a69b980684	[update] add pulse sensing mode	2022-06-17 19:48:09 +08:00
peterlu14	280951aa05	[update] remove key && fix isNaN('') equal false problem	2022-06-14 18:04:44 +08:00
peterlu14	f0af54aacd	[update] add new component MultiInputField	2022-06-14 18:01:17 +08:00
peterlu14	05dc4d278c	[update] recover FREQ component & fix current range option	2022-06-14 18:00:02 +08:00
peterlu14	cab5f91a18	[update] add new component for display and update	2022-06-14 16:59:15 +08:00
peterlu14	cd0665dbb3	[update] add EIS & EliteZM15 DPV mode	2022-06-14 16:58:41 +08:00
peterlu14	9265a45371	[update] fix disable HIGHZ & guide show in ZM15	2022-06-14 16:56:18 +08:00
peterlu14	a8663fc9b9	[update] paramTable MODE_OPTIONS replace local options	2022-06-14 16:51:38 +08:00
peterlu14	5acbab5b37	[update] add memory info	2022-06-07 15:03:39 +08:00
peterlu14	31680a6360	[fix] download export header error	2022-06-07 14:45:02 +08:00
peterlu14	5beaaf2d3d	[fix] replay showing parameter errror	2022-06-07 14:44:27 +08:00
peterlu14	8519f70fb3	[update] remove taskInfo use newDeviceList instead & new parameter table	2022-06-07 14:43:52 +08:00
peterlu14	52c391fea1	[update] add new parameter response speed	2022-05-20 14:03:04 +08:00
peterlu14	7cb1286af3	[update] cp mode download timestamp fix	2022-05-18 13:14:33 +08:00
peterlu14	4b7961a388	Merge branch 'feature/time_control' into release/v1.1.4_merge_with_configuration	2022-05-18 10:42:17 +08:00
peterlu14	f3841c1008	[update] add new parameter time_duration	2022-05-18 10:23:44 +08:00
peterlu14	66673ff3cb	Merge branch 'feature/merge_with_config' into release/v1.1.4_merge_with_configuration	2022-05-11 19:23:25 +08:00
peterlu14	e222a6a5d4	Revert "[update] fix chart source duplicate problem" This reverts commit `d7d49db966`.	2022-05-11 19:23:06 +08:00
peterlu14	6985bf79ba	Merge branch 'feature/merge_with_config' into release/1.1.4_merge_with_comfiguration	2022-05-11 18:23:32 +08:00
peterlu14	6fa80c4e47	[update] append formula function in dev mode	2022-05-11 17:57:50 +08:00
peterlu14	0d13a10a99	[update] disable chart show filter & cursor change	2022-05-11 17:57:24 +08:00
peterlu14	5781e7398b	[update] change legend & axis label color	2022-05-11 17:56:51 +08:00
peterlu14	d7d49db966	[update] fix chart source duplicate problem	2022-05-11 17:56:07 +08:00
peterlu14	f86c82825e	[update] fix html element end tag error	2022-05-11 17:54:33 +08:00
peterlu14	ebdc2355f9	[update] fix merge configuration causing problems	2022-05-11 17:25:54 +08:00
peterlu14	5a56aedfd0	[update] fix header value not follwing unit error	2022-05-10 19:37:06 +08:00
peterlu14	dbaefcb6bb	Merge branch 'feature/configuration_1.0' into release/v1.1.3_csv_header	2022-05-10 10:50:19 +08:00
peterlu14	e60e17fa28	[update] fix replay eis unit error	2022-05-09 17:20:11 +08:00
peterlu14	32ee3b815e	[update] change cg mode sample rate display	2022-05-09 17:02:28 +08:00
peterlu14	4dbc8bddfd	[update] add export controller info	2022-05-09 17:01:58 +08:00
peterlu14	ce376fd5a9	[update] update pulse mode parameter setting	2022-05-09 16:58:38 +08:00
peterlu14	3bfabb8333	[update] update eis parameter table	2022-05-09 16:57:35 +08:00
peterlu14	2232c1e17c	[update] header-param & showName enable call func	2022-05-09 16:56:51 +08:00
peterlu14	06386fff2a	[update] sample_rate name from string to function	2022-05-09 16:55:12 +08:00
peterlu14	5a45d33d63	[update] change headerParameter from array to func	2022-05-09 16:53:41 +08:00
peterlu14	a27503c09b	[update] fix download data spacing problem (when data is not defined)	2022-05-06 21:53:38 +08:00
peterlu14	1282b10c34	[update] add same func to offline (change data scale) & fix empty data error	2022-05-06 21:28:34 +08:00
peterlu14	8f718b7372	[update] add all channel mode & data scale can follow unit in param-table	2022-05-06 21:12:00 +08:00
peterlu14	5714bce5c0	[update] download remove duplicate data (time)	2022-05-06 21:08:58 +08:00
peterlu14	ce374a5a4c	[update] add readable header & title with flexiable way	2022-05-06 21:06:29 +08:00
peterlu14	8e493c9ec1	[update] add param-table EliteZM15 key to handle download header issue	2022-05-06 21:00:52 +08:00
peterlu14	ddffa2a212	[update] temp chart label color	2022-05-06 10:48:36 +08:00
peterlu14	bd646fafc0	[update] add cp_mode & change parameter order & change cg mode name	2022-05-06 10:48:10 +08:00
peterlu14	1a69bb5822	[update] disable hover stop	2022-05-04 18:36:08 +08:00
peterlu14	0e2ecc763d	[update] split project list into config & running & stop project & add lockMode	2022-05-04 18:34:08 +08:00
peterlu14	8a785ca15a	[update] consistency parameter name	2022-05-04 18:16:27 +08:00
peterlu14	e2c5845bb8	[update] add running project list	2022-05-03 17:37:56 +08:00
peterlu14	782176bc29	[update] edit project & task name & styling	2022-04-29 17:09:30 +08:00
peterlu14	cd3a2d66a2	[update] fix multi same devices error	2022-04-29 17:07:28 +08:00
peterlu14	829fce435d	[update] show device mac_address	2022-04-29 17:06:51 +08:00
peterlu14	b457aa5496	[update] task name solate from project	2022-04-29 17:01:58 +08:00
peterlu14	0cfa124f00	[update] realtime refresh chart	2022-04-29 13:43:15 +08:00
peterlu14	e8b175de7b	[update] add new feature project saving & styling	2022-04-29 13:33:22 +08:00
peterlu14	4c2a398841	[update] add key enter event	2022-04-29 13:30:55 +08:00
peterlu14	8bf5c4befc	[update] hide filter with developer mode	2022-04-28 13:01:39 +08:00
peterlu14	57b1dcc8d5	[update] add new font roboto	2022-04-28 11:08:04 +08:00
peterlu14	7140ba345c	[update] style format	2022-04-28 11:07:34 +08:00
peterlu14	5905e34697	[update] reorder & remove ocp & fix mode & highz error	2022-04-28 10:59:43 +08:00
Jordan Hsu	0ecd2b50dd	[fix] configuration refresh bug	2022-02-12 17:17:34 +08:00
Jordan Hsu	c984bebf6f	[modify] separate chartKey and panelKey	2022-01-14 17:26:13 +08:00
Jordan Hsu	06766f1ac4	[add] can save chart source setting	2022-01-14 15:54:06 +08:00
Jordan Hsu	9981958160	typo	2022-01-12 18:06:11 +08:00
Jordan Hsu	e1d6dbd38e	fix chart data display bug	2022-01-12 18:01:06 +08:00
Jordan Hsu	96b38e5570	fix cache chart bug	2022-01-12 15:52:23 +08:00
Jordan Hsu	ffd246124f	tmp	2022-01-10 17:12:27 +08:00
Jordan Hsu	834bcbc4df	add missing code	2022-01-10 15:56:25 +08:00
Jordan Hsu	8f6f437f14	[add] missing localforage package dependency	2022-01-10 15:49:17 +08:00
Jordan Hsu	e5bc63e5d5	[add] real-time chart add / remove update with cache	2022-01-10 15:38:55 +08:00
Jordan Hsu	5d3dbbac4f	[modify] real-time chart data object to vuex	2022-01-10 12:56:35 +08:00
Jordan Hsu	9a77e6dcff	[modify] neulive 3.5 sti constraint	2022-01-06 13:09:52 +08:00
peterlu14	5328bd76ba	[fix] sd data from api	2022-01-04 14:13:38 +08:00
Jordan Hsu	9d19fd3fc9	add neu 3.1 sample rate option	2022-01-04 11:14:46 +08:00
Alan Lin	1e2bf182bf	neu31 update adc_clk ratio formula	2022-01-04 11:03:23 +08:00
Alan Lin	288f9b325c	update download SD function	2021-12-27 18:22:03 +08:00