[update] update button icon

[debug]  fix the conflict between display tool and funtional tool

See merge request wisetop/controller/wisetopvue!1

package-lock.json

@@ -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=="
+        }
+      }
     }
   }
 }

package.json

@@ -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",

src/app/main.js

@@ -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,65 @@ 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.66:8083'
+  // 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 +96,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, {

src/assets/img/toolbox/LogX.svg

@@ -0,0 +1,4 @@
+<svg width="55" height="30" viewBox="0 0 55 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="55" height="30" rx="15" fill="#45589E"/>
+<path d="M10.8849 20V9.81818H13.0376V18.2251H17.4027V20H10.8849ZM22.2388 20.1491C21.4666 20.1491 20.7987 19.9851 20.2353 19.657C19.6751 19.3255 19.2426 18.8648 18.9377 18.2749C18.6328 17.6816 18.4803 16.9938 18.4803 16.2116C18.4803 15.4228 18.6328 14.7334 18.9377 14.1435C19.2426 13.5502 19.6751 13.0895 20.2353 12.7614C20.7987 12.4299 21.4666 12.2642 22.2388 12.2642C23.0111 12.2642 23.6773 12.4299 24.2374 12.7614C24.8008 13.0895 25.235 13.5502 25.54 14.1435C25.8449 14.7334 25.9973 15.4228 25.9973 16.2116C25.9973 16.9938 25.8449 17.6816 25.54 18.2749C25.235 18.8648 24.8008 19.3255 24.2374 19.657C23.6773 19.9851 23.0111 20.1491 22.2388 20.1491ZM22.2488 18.5085C22.6001 18.5085 22.8934 18.4091 23.1287 18.2102C23.3641 18.008 23.5414 17.733 23.6607 17.3849C23.7833 17.0369 23.8446 16.6409 23.8446 16.1967C23.8446 15.7526 23.7833 15.3565 23.6607 15.0085C23.5414 14.6605 23.3641 14.3854 23.1287 14.1832C22.8934 13.9811 22.6001 13.88 22.2488 13.88C21.8941 13.88 21.5958 13.9811 21.3539 14.1832C21.1152 14.3854 20.9346 14.6605 20.812 15.0085C20.6926 15.3565 20.633 15.7526 20.633 16.1967C20.633 16.6409 20.6926 17.0369 20.812 17.3849C20.9346 17.733 21.1152 18.008 21.3539 18.2102C21.5958 18.4091 21.8941 18.5085 22.2488 18.5085ZM30.8148 23.0227C30.1287 23.0227 29.5404 22.9283 29.0499 22.7393C28.5627 22.5537 28.1749 22.3002 27.8865 21.9787C27.5982 21.6572 27.4109 21.2959 27.3248 20.8949L29.2836 20.6314C29.3432 20.7839 29.4377 20.9264 29.5669 21.0589C29.6962 21.1915 29.8669 21.2976 30.079 21.3771C30.2944 21.46 30.5563 21.5014 30.8645 21.5014C31.3252 21.5014 31.7047 21.3887 32.003 21.1634C32.3046 20.9413 32.4554 20.5684 32.4554 20.0447V18.6477H32.3659C32.2731 18.8598 32.1339 19.0604 31.9483 19.2493C31.7627 19.4382 31.5241 19.5923 31.2324 19.7116C30.9408 19.831 30.5927 19.8906 30.1884 19.8906C29.615 19.8906 29.093 19.758 28.6223 19.4929C28.155 19.2244 27.7821 18.8151 27.5037 18.2649C27.2286 17.7114 27.0911 17.0121 27.0911 16.1669C27.0911 15.3018 27.2319 14.5793 27.5137 13.9993C27.7954 13.4193 28.1699 12.9851 28.6373 12.6967C29.1079 12.4084 29.6233 12.2642 30.1834 12.2642C30.611 12.2642 30.9689 12.3371 31.2573 12.483C31.5456 12.6255 31.7776 12.8045 31.9533 13.0199C32.1323 13.232 32.2698 13.4408 32.3659 13.6463H32.4455V12.3636H34.5485V20.0746C34.5485 20.7242 34.3894 21.2678 34.0712 21.7053C33.753 22.1428 33.3122 22.4709 32.7488 22.6896C32.1886 22.9117 31.544 23.0227 30.8148 23.0227ZM30.8596 18.2997C31.2009 18.2997 31.4893 18.2152 31.7246 18.0462C31.9632 17.8738 32.1455 17.6286 32.2715 17.3104C32.4007 16.9889 32.4654 16.6044 32.4654 16.157C32.4654 15.7095 32.4024 15.3217 32.2765 14.9936C32.1505 14.6622 31.9682 14.4053 31.7296 14.223C31.4909 14.0407 31.2009 13.9496 30.8596 13.9496C30.5115 13.9496 30.2182 14.044 29.9796 14.233C29.7409 14.4186 29.5603 14.6771 29.4377 15.0085C29.315 15.34 29.2537 15.7228 29.2537 16.157C29.2537 16.5978 29.315 16.9789 29.4377 17.3004C29.5636 17.6186 29.7443 17.8655 29.9796 18.0412C30.2182 18.2135 30.5115 18.2997 30.8596 18.2997ZM38.2921 9.81818L40.3453 13.2884H40.4249L42.4881 9.81818H44.9192L41.812 14.9091L44.9888 20H42.513L40.4249 16.5249H40.3453L38.2573 20H35.7914L38.9782 14.9091L35.851 9.81818H38.2921Z" fill="white"/>
+</svg>

src/assets/img/toolbox/LogX_clicked.svg

@@ -0,0 +1,4 @@
+<svg width="55" height="30" viewBox="0 0 55 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="55" height="30" rx="15" fill="#E34A4A"/>
+<path d="M10.8849 20V9.81818H13.0376V18.2251H17.4027V20H10.8849ZM22.2388 20.1491C21.4666 20.1491 20.7987 19.9851 20.2353 19.657C19.6751 19.3255 19.2426 18.8648 18.9377 18.2749C18.6328 17.6816 18.4803 16.9938 18.4803 16.2116C18.4803 15.4228 18.6328 14.7334 18.9377 14.1435C19.2426 13.5502 19.6751 13.0895 20.2353 12.7614C20.7987 12.4299 21.4666 12.2642 22.2388 12.2642C23.0111 12.2642 23.6773 12.4299 24.2374 12.7614C24.8008 13.0895 25.235 13.5502 25.54 14.1435C25.8449 14.7334 25.9973 15.4228 25.9973 16.2116C25.9973 16.9938 25.8449 17.6816 25.54 18.2749C25.235 18.8648 24.8008 19.3255 24.2374 19.657C23.6773 19.9851 23.0111 20.1491 22.2388 20.1491ZM22.2488 18.5085C22.6001 18.5085 22.8934 18.4091 23.1287 18.2102C23.3641 18.008 23.5414 17.733 23.6607 17.3849C23.7833 17.0369 23.8446 16.6409 23.8446 16.1967C23.8446 15.7526 23.7833 15.3565 23.6607 15.0085C23.5414 14.6605 23.3641 14.3854 23.1287 14.1832C22.8934 13.9811 22.6001 13.88 22.2488 13.88C21.8941 13.88 21.5958 13.9811 21.3539 14.1832C21.1152 14.3854 20.9346 14.6605 20.812 15.0085C20.6926 15.3565 20.633 15.7526 20.633 16.1967C20.633 16.6409 20.6926 17.0369 20.812 17.3849C20.9346 17.733 21.1152 18.008 21.3539 18.2102C21.5958 18.4091 21.8941 18.5085 22.2488 18.5085ZM30.8148 23.0227C30.1287 23.0227 29.5404 22.9283 29.0499 22.7393C28.5627 22.5537 28.1749 22.3002 27.8865 21.9787C27.5982 21.6572 27.4109 21.2959 27.3248 20.8949L29.2836 20.6314C29.3432 20.7839 29.4377 20.9264 29.5669 21.0589C29.6962 21.1915 29.8669 21.2976 30.079 21.3771C30.2944 21.46 30.5563 21.5014 30.8645 21.5014C31.3252 21.5014 31.7047 21.3887 32.003 21.1634C32.3046 20.9413 32.4554 20.5684 32.4554 20.0447V18.6477H32.3659C32.2731 18.8598 32.1339 19.0604 31.9483 19.2493C31.7627 19.4382 31.5241 19.5923 31.2324 19.7116C30.9408 19.831 30.5927 19.8906 30.1884 19.8906C29.615 19.8906 29.093 19.758 28.6223 19.4929C28.155 19.2244 27.7821 18.8151 27.5037 18.2649C27.2286 17.7114 27.0911 17.0121 27.0911 16.1669C27.0911 15.3018 27.2319 14.5793 27.5137 13.9993C27.7954 13.4193 28.1699 12.9851 28.6373 12.6967C29.1079 12.4084 29.6233 12.2642 30.1834 12.2642C30.611 12.2642 30.9689 12.3371 31.2573 12.483C31.5456 12.6255 31.7776 12.8045 31.9533 13.0199C32.1323 13.232 32.2698 13.4408 32.3659 13.6463H32.4455V12.3636H34.5485V20.0746C34.5485 20.7242 34.3894 21.2678 34.0712 21.7053C33.753 22.1428 33.3122 22.4709 32.7488 22.6896C32.1886 22.9117 31.544 23.0227 30.8148 23.0227ZM30.8596 18.2997C31.2009 18.2997 31.4893 18.2152 31.7246 18.0462C31.9632 17.8738 32.1455 17.6286 32.2715 17.3104C32.4007 16.9889 32.4654 16.6044 32.4654 16.157C32.4654 15.7095 32.4024 15.3217 32.2765 14.9936C32.1505 14.6622 31.9682 14.4053 31.7296 14.223C31.4909 14.0407 31.2009 13.9496 30.8596 13.9496C30.5115 13.9496 30.2182 14.044 29.9796 14.233C29.7409 14.4186 29.5603 14.6771 29.4377 15.0085C29.315 15.34 29.2537 15.7228 29.2537 16.157C29.2537 16.5978 29.315 16.9789 29.4377 17.3004C29.5636 17.6186 29.7443 17.8655 29.9796 18.0412C30.2182 18.2135 30.5115 18.2997 30.8596 18.2997ZM38.2921 9.81818L40.3453 13.2884H40.4249L42.4881 9.81818H44.9192L41.812 14.9091L44.9888 20H42.513L40.4249 16.5249H40.3453L38.2573 20H35.7914L38.9782 14.9091L35.851 9.81818H38.2921Z" fill="white"/>
+</svg>

src/assets/img/toolbox/LogY.svg

@@ -0,0 +1,4 @@
+<svg width="55" height="30" viewBox="0 0 55 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="55" height="30" rx="15" fill="#6CB0A4"/>
+<path d="M10.8849 20V9.81818H13.0376V18.2251H17.4027V20H10.8849ZM22.2388 20.1491C21.4666 20.1491 20.7987 19.9851 20.2353 19.657C19.6751 19.3255 19.2426 18.8648 18.9377 18.2749C18.6328 17.6816 18.4803 16.9938 18.4803 16.2116C18.4803 15.4228 18.6328 14.7334 18.9377 14.1435C19.2426 13.5502 19.6751 13.0895 20.2353 12.7614C20.7987 12.4299 21.4666 12.2642 22.2388 12.2642C23.0111 12.2642 23.6773 12.4299 24.2374 12.7614C24.8008 13.0895 25.235 13.5502 25.54 14.1435C25.8449 14.7334 25.9973 15.4228 25.9973 16.2116C25.9973 16.9938 25.8449 17.6816 25.54 18.2749C25.235 18.8648 24.8008 19.3255 24.2374 19.657C23.6773 19.9851 23.0111 20.1491 22.2388 20.1491ZM22.2488 18.5085C22.6001 18.5085 22.8934 18.4091 23.1287 18.2102C23.3641 18.008 23.5414 17.733 23.6607 17.3849C23.7833 17.0369 23.8446 16.6409 23.8446 16.1967C23.8446 15.7526 23.7833 15.3565 23.6607 15.0085C23.5414 14.6605 23.3641 14.3854 23.1287 14.1832C22.8934 13.9811 22.6001 13.88 22.2488 13.88C21.8941 13.88 21.5958 13.9811 21.3539 14.1832C21.1152 14.3854 20.9346 14.6605 20.812 15.0085C20.6926 15.3565 20.633 15.7526 20.633 16.1967C20.633 16.6409 20.6926 17.0369 20.812 17.3849C20.9346 17.733 21.1152 18.008 21.3539 18.2102C21.5958 18.4091 21.8941 18.5085 22.2488 18.5085ZM30.8148 23.0227C30.1287 23.0227 29.5404 22.9283 29.0499 22.7393C28.5627 22.5537 28.1749 22.3002 27.8865 21.9787C27.5982 21.6572 27.4109 21.2959 27.3248 20.8949L29.2836 20.6314C29.3432 20.7839 29.4377 20.9264 29.5669 21.0589C29.6962 21.1915 29.8669 21.2976 30.079 21.3771C30.2944 21.46 30.5563 21.5014 30.8645 21.5014C31.3252 21.5014 31.7047 21.3887 32.003 21.1634C32.3046 20.9413 32.4554 20.5684 32.4554 20.0447V18.6477H32.3659C32.2731 18.8598 32.1339 19.0604 31.9483 19.2493C31.7627 19.4382 31.5241 19.5923 31.2324 19.7116C30.9408 19.831 30.5927 19.8906 30.1884 19.8906C29.615 19.8906 29.093 19.758 28.6223 19.4929C28.155 19.2244 27.7821 18.8151 27.5037 18.2649C27.2286 17.7114 27.0911 17.0121 27.0911 16.1669C27.0911 15.3018 27.2319 14.5793 27.5137 13.9993C27.7954 13.4193 28.1699 12.9851 28.6373 12.6967C29.1079 12.4084 29.6233 12.2642 30.1834 12.2642C30.611 12.2642 30.9689 12.3371 31.2573 12.483C31.5456 12.6255 31.7776 12.8045 31.9533 13.0199C32.1323 13.232 32.2698 13.4408 32.3659 13.6463H32.4455V12.3636H34.5485V20.0746C34.5485 20.7242 34.3894 21.2678 34.0712 21.7053C33.753 22.1428 33.3122 22.4709 32.7488 22.6896C32.1886 22.9117 31.544 23.0227 30.8148 23.0227ZM30.8596 18.2997C31.2009 18.2997 31.4893 18.2152 31.7246 18.0462C31.9632 17.8738 32.1455 17.6286 32.2715 17.3104C32.4007 16.9889 32.4654 16.6044 32.4654 16.157C32.4654 15.7095 32.4024 15.3217 32.2765 14.9936C32.1505 14.6622 31.9682 14.4053 31.7296 14.223C31.4909 14.0407 31.2009 13.9496 30.8596 13.9496C30.5115 13.9496 30.2182 14.044 29.9796 14.233C29.7409 14.4186 29.5603 14.6771 29.4377 15.0085C29.315 15.34 29.2537 15.7228 29.2537 16.157C29.2537 16.5978 29.315 16.9789 29.4377 17.3004C29.5636 17.6186 29.7443 17.8655 29.9796 18.0412C30.2182 18.2135 30.5115 18.2997 30.8596 18.2997ZM35.677 9.81818H38.0882L40.41 14.2031H40.5094L42.8311 9.81818H45.2424L41.5286 16.4006V20H39.3908V16.4006L35.677 9.81818Z" fill="white"/>
+</svg>

src/assets/img/toolbox/LogY_clicked.svg

@@ -0,0 +1,4 @@
+<svg width="55" height="30" viewBox="0 0 55 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="55" height="30" rx="15" fill="#E34A4A"/>
+<path d="M10.8849 20V9.81818H13.0376V18.2251H17.4027V20H10.8849ZM22.2388 20.1491C21.4666 20.1491 20.7987 19.9851 20.2353 19.657C19.6751 19.3255 19.2426 18.8648 18.9377 18.2749C18.6328 17.6816 18.4803 16.9938 18.4803 16.2116C18.4803 15.4228 18.6328 14.7334 18.9377 14.1435C19.2426 13.5502 19.6751 13.0895 20.2353 12.7614C20.7987 12.4299 21.4666 12.2642 22.2388 12.2642C23.0111 12.2642 23.6773 12.4299 24.2374 12.7614C24.8008 13.0895 25.235 13.5502 25.54 14.1435C25.8449 14.7334 25.9973 15.4228 25.9973 16.2116C25.9973 16.9938 25.8449 17.6816 25.54 18.2749C25.235 18.8648 24.8008 19.3255 24.2374 19.657C23.6773 19.9851 23.0111 20.1491 22.2388 20.1491ZM22.2488 18.5085C22.6001 18.5085 22.8934 18.4091 23.1287 18.2102C23.3641 18.008 23.5414 17.733 23.6607 17.3849C23.7833 17.0369 23.8446 16.6409 23.8446 16.1967C23.8446 15.7526 23.7833 15.3565 23.6607 15.0085C23.5414 14.6605 23.3641 14.3854 23.1287 14.1832C22.8934 13.9811 22.6001 13.88 22.2488 13.88C21.8941 13.88 21.5958 13.9811 21.3539 14.1832C21.1152 14.3854 20.9346 14.6605 20.812 15.0085C20.6926 15.3565 20.633 15.7526 20.633 16.1967C20.633 16.6409 20.6926 17.0369 20.812 17.3849C20.9346 17.733 21.1152 18.008 21.3539 18.2102C21.5958 18.4091 21.8941 18.5085 22.2488 18.5085ZM30.8148 23.0227C30.1287 23.0227 29.5404 22.9283 29.0499 22.7393C28.5627 22.5537 28.1749 22.3002 27.8865 21.9787C27.5982 21.6572 27.4109 21.2959 27.3248 20.8949L29.2836 20.6314C29.3432 20.7839 29.4377 20.9264 29.5669 21.0589C29.6962 21.1915 29.8669 21.2976 30.079 21.3771C30.2944 21.46 30.5563 21.5014 30.8645 21.5014C31.3252 21.5014 31.7047 21.3887 32.003 21.1634C32.3046 20.9413 32.4554 20.5684 32.4554 20.0447V18.6477H32.3659C32.2731 18.8598 32.1339 19.0604 31.9483 19.2493C31.7627 19.4382 31.5241 19.5923 31.2324 19.7116C30.9408 19.831 30.5927 19.8906 30.1884 19.8906C29.615 19.8906 29.093 19.758 28.6223 19.4929C28.155 19.2244 27.7821 18.8151 27.5037 18.2649C27.2286 17.7114 27.0911 17.0121 27.0911 16.1669C27.0911 15.3018 27.2319 14.5793 27.5137 13.9993C27.7954 13.4193 28.1699 12.9851 28.6373 12.6967C29.1079 12.4084 29.6233 12.2642 30.1834 12.2642C30.611 12.2642 30.9689 12.3371 31.2573 12.483C31.5456 12.6255 31.7776 12.8045 31.9533 13.0199C32.1323 13.232 32.2698 13.4408 32.3659 13.6463H32.4455V12.3636H34.5485V20.0746C34.5485 20.7242 34.3894 21.2678 34.0712 21.7053C33.753 22.1428 33.3122 22.4709 32.7488 22.6896C32.1886 22.9117 31.544 23.0227 30.8148 23.0227ZM30.8596 18.2997C31.2009 18.2997 31.4893 18.2152 31.7246 18.0462C31.9632 17.8738 32.1455 17.6286 32.2715 17.3104C32.4007 16.9889 32.4654 16.6044 32.4654 16.157C32.4654 15.7095 32.4024 15.3217 32.2765 14.9936C32.1505 14.6622 31.9682 14.4053 31.7296 14.223C31.4909 14.0407 31.2009 13.9496 30.8596 13.9496C30.5115 13.9496 30.2182 14.044 29.9796 14.233C29.7409 14.4186 29.5603 14.6771 29.4377 15.0085C29.315 15.34 29.2537 15.7228 29.2537 16.157C29.2537 16.5978 29.315 16.9789 29.4377 17.3004C29.5636 17.6186 29.7443 17.8655 29.9796 18.0412C30.2182 18.2135 30.5115 18.2997 30.8596 18.2997ZM35.677 9.81818H38.0882L40.41 14.2031H40.5094L42.8311 9.81818H45.2424L41.5286 16.4006V20H39.3908V16.4006L35.677 9.81818Z" fill="white"/>
+</svg>

src/assets/img/toolbox/capture.svg

@@ -0,0 +1,9 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M30 15C30 23.2843 23.2843 30 15 30C6.71573 30 0 23.2843 0 15C0 6.71573 6.71573 0 15 0C23.2843 0 30 6.71573 30 15Z" fill="#D6860F"/>
+<mask id="mask0_4_143" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="5" y="5" width="20" height="19">
+<rect x="5" y="5" width="20" height="19" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_4_143)">
+<path d="M20.8334 11.3333V9.75001H19.1667V8.16668H20.8334V6.58334H22.5V8.16668H24.1667V9.75001H22.5V11.3333H20.8334ZM7.50004 22.4167C7.04171 22.4167 6.64949 22.2618 6.32337 21.952C5.99671 21.6416 5.83337 21.2688 5.83337 20.8333V11.3333C5.83337 10.8979 5.99671 10.5253 6.32337 10.2155C6.64949 9.90518 7.04171 9.75001 7.50004 9.75001H10.125L11.6667 8.16668H16.6667V9.75001H12.3959L10.875 11.3333H7.50004V20.8333H20.8334V13.7083H22.5V20.8333C22.5 21.2688 22.337 21.6416 22.0109 21.952C21.6842 22.2618 21.2917 22.4167 20.8334 22.4167H7.50004ZM14.1667 19.6458C15.2084 19.6458 16.0939 19.2996 16.8234 18.6072C17.5523 17.9142 17.9167 17.0729 17.9167 16.0833C17.9167 15.0938 17.5523 14.2525 16.8234 13.5595C16.0939 12.8671 15.2084 12.5208 14.1667 12.5208C13.125 12.5208 12.2395 12.8671 11.51 13.5595C10.7812 14.2525 10.4167 15.0938 10.4167 16.0833C10.4167 17.0729 10.7812 17.9142 11.51 18.6072C12.2395 19.2996 13.125 19.6458 14.1667 19.6458ZM14.1667 18.0625C13.5834 18.0625 13.0903 17.8712 12.6875 17.4886C12.2848 17.1059 12.0834 16.6375 12.0834 16.0833C12.0834 15.5292 12.2848 15.0608 12.6875 14.6781C13.0903 14.2955 13.5834 14.1042 14.1667 14.1042C14.75 14.1042 15.2431 14.2955 15.6459 14.6781C16.0487 15.0608 16.25 15.5292 16.25 16.0833C16.25 16.6375 16.0487 17.1059 15.6459 17.4886C15.2431 17.8712 14.75 18.0625 14.1667 18.0625Z" fill="white"/>
+</g>
+</svg>

src/assets/img/toolbox/dx.svg

@@ -0,0 +1,6 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="15" cy="15" r="15" fill="#8D8D8D"/>
+<path d="M6.61364 12.0888C6.19934 12.0888 5.8241 11.9822 5.48793 11.7692C5.15412 11.5537 4.88897 11.2377 4.69247 10.821C4.49834 10.402 4.40128 9.88826 4.40128 9.27983C4.40128 8.65483 4.50189 8.13518 4.70312 7.72088C4.90436 7.30421 5.17188 6.9929 5.50568 6.78693C5.84186 6.5786 6.20999 6.47443 6.61009 6.47443C6.91548 6.47443 7.16998 6.52652 7.37358 6.63068C7.57955 6.73248 7.74527 6.86032 7.87074 7.0142C7.99858 7.16572 8.09564 7.31487 8.16193 7.46165H8.2081V4.72727H9.71733V12H8.22585V11.1264H8.16193C8.09091 11.2779 7.99029 11.4283 7.86009 11.5774C7.73224 11.7242 7.56534 11.8461 7.35938 11.9432C7.15578 12.0402 6.9072 12.0888 6.61364 12.0888ZM7.09304 10.8849C7.33688 10.8849 7.54285 10.8187 7.71094 10.6861C7.88139 10.5511 8.0116 10.3629 8.10156 10.1214C8.19389 9.87997 8.24006 9.59706 8.24006 9.27273C8.24006 8.94839 8.19508 8.66667 8.10511 8.42756C8.01515 8.18845 7.88494 8.00379 7.71449 7.87358C7.54403 7.74337 7.33688 7.67827 7.09304 7.67827C6.84446 7.67827 6.63494 7.74574 6.46449 7.88068C6.29403 8.01562 6.16501 8.20265 6.07741 8.44176C5.98982 8.68087 5.94602 8.95786 5.94602 9.27273C5.94602 9.58996 5.98982 9.8705 6.07741 10.1143C6.16738 10.3558 6.2964 10.5452 6.46449 10.6825C6.63494 10.8175 6.84446 10.8849 7.09304 10.8849ZM11.8951 14.0455C11.7033 14.0455 11.5234 14.0301 11.3553 13.9993C11.1896 13.9709 11.0523 13.9342 10.9434 13.8892L11.2843 12.7599C11.4618 12.8144 11.6216 12.844 11.7637 12.8487C11.9081 12.8535 12.0324 12.8203 12.1365 12.7493C12.2431 12.6783 12.3295 12.5575 12.3958 12.3871L12.4846 12.1562L10.5279 6.54545H12.1188L13.248 10.5511H13.3049L14.4448 6.54545H16.0463L13.9263 12.5895C13.8245 12.883 13.686 13.1387 13.5108 13.3565C13.338 13.5767 13.119 13.746 12.8539 13.8643C12.5887 13.9851 12.2691 14.0455 11.8951 14.0455Z" fill="white"/>
+<path d="M15.6136 25.0888C15.1993 25.0888 14.8241 24.9822 14.4879 24.7692C14.1541 24.5537 13.889 24.2377 13.6925 23.821C13.4983 23.402 13.4013 22.8883 13.4013 22.2798C13.4013 21.6548 13.5019 21.1352 13.7031 20.7209C13.9044 20.3042 14.1719 19.9929 14.5057 19.7869C14.8419 19.5786 15.21 19.4744 15.6101 19.4744C15.9155 19.4744 16.17 19.5265 16.3736 19.6307C16.5795 19.7325 16.7453 19.8603 16.8707 20.0142C16.9986 20.1657 17.0956 20.3149 17.1619 20.4616H17.2081V17.7273H18.7173V25H17.2259V24.1264H17.1619C17.0909 24.2779 16.9903 24.4283 16.8601 24.5774C16.7322 24.7242 16.5653 24.8461 16.3594 24.9432C16.1558 25.0402 15.9072 25.0888 15.6136 25.0888ZM16.093 23.8849C16.3369 23.8849 16.5429 23.8187 16.7109 23.6861C16.8814 23.5511 17.0116 23.3629 17.1016 23.1214C17.1939 22.88 17.2401 22.5971 17.2401 22.2727C17.2401 21.9484 17.1951 21.6667 17.1051 21.4276C17.0152 21.1884 16.8849 21.0038 16.7145 20.8736C16.544 20.7434 16.3369 20.6783 16.093 20.6783C15.8445 20.6783 15.6349 20.7457 15.4645 20.8807C15.294 21.0156 15.165 21.2027 15.0774 21.4418C14.9898 21.6809 14.946 21.9579 14.946 22.2727C14.946 22.59 14.9898 22.8705 15.0774 23.1143C15.1674 23.3558 15.2964 23.5452 15.4645 23.6825C15.6349 23.8175 15.8445 23.8849 16.093 23.8849ZM21.2253 19.5455L22.2267 21.4524L23.253 19.5455H24.8049L23.2246 22.2727L24.8475 25H23.3027L22.2267 23.1143L21.1685 25H19.606L21.2253 22.2727L19.6628 19.5455H21.2253Z" fill="white"/>
+<line x1="6.81281" y1="22.7756" x2="21.9396" y2="7.02154" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+</svg>

src/assets/img/toolbox/dx_clicked.svg

@@ -0,0 +1,6 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="15" cy="15" r="15" fill="#E34A4A"/>
+<path d="M6.61364 12.0888C6.19934 12.0888 5.8241 11.9822 5.48793 11.7692C5.15412 11.5537 4.88897 11.2377 4.69247 10.821C4.49834 10.402 4.40128 9.88826 4.40128 9.27983C4.40128 8.65483 4.50189 8.13518 4.70312 7.72088C4.90436 7.30421 5.17188 6.9929 5.50568 6.78693C5.84186 6.5786 6.20999 6.47443 6.61009 6.47443C6.91548 6.47443 7.16998 6.52652 7.37358 6.63068C7.57955 6.73248 7.74527 6.86032 7.87074 7.0142C7.99858 7.16572 8.09564 7.31487 8.16193 7.46165H8.2081V4.72727H9.71733V12H8.22585V11.1264H8.16193C8.09091 11.2779 7.99029 11.4283 7.86009 11.5774C7.73224 11.7242 7.56534 11.8461 7.35938 11.9432C7.15578 12.0402 6.9072 12.0888 6.61364 12.0888ZM7.09304 10.8849C7.33688 10.8849 7.54285 10.8187 7.71094 10.6861C7.88139 10.5511 8.0116 10.3629 8.10156 10.1214C8.19389 9.87997 8.24006 9.59706 8.24006 9.27273C8.24006 8.94839 8.19508 8.66667 8.10511 8.42756C8.01515 8.18845 7.88494 8.00379 7.71449 7.87358C7.54403 7.74337 7.33688 7.67827 7.09304 7.67827C6.84446 7.67827 6.63494 7.74574 6.46449 7.88068C6.29403 8.01562 6.16501 8.20265 6.07741 8.44176C5.98982 8.68087 5.94602 8.95786 5.94602 9.27273C5.94602 9.58996 5.98982 9.8705 6.07741 10.1143C6.16738 10.3558 6.2964 10.5452 6.46449 10.6825C6.63494 10.8175 6.84446 10.8849 7.09304 10.8849ZM11.8951 14.0455C11.7033 14.0455 11.5234 14.0301 11.3553 13.9993C11.1896 13.9709 11.0523 13.9342 10.9434 13.8892L11.2843 12.7599C11.4618 12.8144 11.6216 12.844 11.7637 12.8487C11.9081 12.8535 12.0324 12.8203 12.1365 12.7493C12.2431 12.6783 12.3295 12.5575 12.3958 12.3871L12.4846 12.1562L10.5279 6.54545H12.1188L13.248 10.5511H13.3049L14.4448 6.54545H16.0463L13.9263 12.5895C13.8245 12.883 13.686 13.1387 13.5108 13.3565C13.338 13.5767 13.119 13.746 12.8539 13.8643C12.5887 13.9851 12.2691 14.0455 11.8951 14.0455Z" fill="white"/>
+<path d="M15.6136 25.0888C15.1993 25.0888 14.8241 24.9822 14.4879 24.7692C14.1541 24.5537 13.889 24.2377 13.6925 23.821C13.4983 23.402 13.4013 22.8883 13.4013 22.2798C13.4013 21.6548 13.5019 21.1352 13.7031 20.7209C13.9044 20.3042 14.1719 19.9929 14.5057 19.7869C14.8419 19.5786 15.21 19.4744 15.6101 19.4744C15.9155 19.4744 16.17 19.5265 16.3736 19.6307C16.5795 19.7325 16.7453 19.8603 16.8707 20.0142C16.9986 20.1657 17.0956 20.3149 17.1619 20.4616H17.2081V17.7273H18.7173V25H17.2259V24.1264H17.1619C17.0909 24.2779 16.9903 24.4283 16.8601 24.5774C16.7322 24.7242 16.5653 24.8461 16.3594 24.9432C16.1558 25.0402 15.9072 25.0888 15.6136 25.0888ZM16.093 23.8849C16.3369 23.8849 16.5429 23.8187 16.7109 23.6861C16.8814 23.5511 17.0116 23.3629 17.1016 23.1214C17.1939 22.88 17.2401 22.5971 17.2401 22.2727C17.2401 21.9484 17.1951 21.6667 17.1051 21.4276C17.0152 21.1884 16.8849 21.0038 16.7145 20.8736C16.544 20.7434 16.3369 20.6783 16.093 20.6783C15.8445 20.6783 15.6349 20.7457 15.4645 20.8807C15.294 21.0156 15.165 21.2027 15.0774 21.4418C14.9898 21.6809 14.946 21.9579 14.946 22.2727C14.946 22.59 14.9898 22.8705 15.0774 23.1143C15.1674 23.3558 15.2964 23.5452 15.4645 23.6825C15.6349 23.8175 15.8445 23.8849 16.093 23.8849ZM21.2253 19.5455L22.2267 21.4524L23.253 19.5455H24.8049L23.2246 22.2727L24.8475 25H23.3027L22.2267 23.1143L21.1685 25H19.606L21.2253 22.2727L19.6628 19.5455H21.2253Z" fill="white"/>
+<line x1="6.81281" y1="22.7756" x2="21.9396" y2="7.02154" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+</svg>

src/assets/img/toolbox/integral.svg

@@ -0,0 +1,4 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="15" cy="15" r="15" fill="#4597B1"/>
+<path d="M15.0199 20.2131C14.8021 21.5199 14.3073 22.5213 13.5355 23.2173C12.7637 23.9134 11.7576 24.2614 10.517 24.2614C10.2424 24.2614 9.98911 24.2495 9.7571 24.2259C9.52036 24.2022 9.28835 24.1619 9.06108 24.1051L9.60085 21.7685C9.72396 21.7969 9.86127 21.8229 10.0128 21.8466C10.1643 21.8703 10.3442 21.8821 10.5526 21.8821C10.9976 21.8821 11.3456 21.759 11.5966 21.5128C11.8523 21.2713 12.0204 20.8949 12.1009 20.3835L13.9972 8.94886C14.2197 7.6089 14.7334 6.58144 15.5384 5.86648C16.3433 5.15151 17.392 4.79403 18.6847 4.79403C18.9356 4.79403 19.1889 4.81297 19.4446 4.85085C19.7003 4.884 19.9702 4.93845 20.2543 5.0142L19.6364 7.27983C19.4991 7.25142 19.3168 7.23011 19.0895 7.21591C18.867 7.2017 18.642 7.1946 18.4148 7.1946C17.9886 7.1946 17.6548 7.30824 17.4134 7.53551C17.1766 7.76278 17.018 8.1179 16.9375 8.60085L15.0199 20.2131Z" fill="white"/>
+</svg>

src/assets/img/toolbox/integral_clicked.svg

@@ -0,0 +1,4 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="15" cy="15" r="15" fill="#E34A4A"/>
+<path d="M15.0199 20.2131C14.8021 21.5199 14.3073 22.5213 13.5355 23.2173C12.7637 23.9134 11.7576 24.2614 10.517 24.2614C10.2424 24.2614 9.98911 24.2495 9.7571 24.2259C9.52036 24.2022 9.28835 24.1619 9.06108 24.1051L9.60085 21.7685C9.72396 21.7969 9.86127 21.8229 10.0128 21.8466C10.1643 21.8703 10.3442 21.8821 10.5526 21.8821C10.9976 21.8821 11.3456 21.759 11.5966 21.5128C11.8523 21.2713 12.0204 20.8949 12.1009 20.3835L13.9972 8.94886C14.2197 7.6089 14.7334 6.58144 15.5384 5.86648C16.3433 5.15151 17.392 4.79403 18.6847 4.79403C18.9356 4.79403 19.1889 4.81297 19.4446 4.85085C19.7003 4.884 19.9702 4.93845 20.2543 5.0142L19.6364 7.27983C19.4991 7.25142 19.3168 7.23011 19.0895 7.21591C18.867 7.2017 18.642 7.1946 18.4148 7.1946C17.9886 7.1946 17.6548 7.30824 17.4134 7.53551C17.1766 7.76278 17.018 8.1179 16.9375 8.60085L15.0199 20.2131Z" fill="white"/>
+</svg>

src/components/admin/app-sidebar/NavigationRoutes.js

@@ -61,6 +61,14 @@ export const navigationRoutes = {
         iconClass: 'vuestic-iconset vuestic-iconset-settings',
       },
     },
+    {
+      name: 'project',
+      displayName: 'Scheduler',
+      meta: {
+        iconClass: 'vuestic-iconset vuestic-iconset-tables',
+        // iconClass: 'vuestic-iconset vuestic-iconset-browse-gallery',
+      },
+    },
     // {
     //   name: 'forms',
     //   displayName: 'menu.forms',

src/components/analysis/replay/elite/EliteDataReplay.vue

@@ -1,5 +1,6 @@
 <template>
   <div>
+    <pre>{{controlPanel}}</pre>
     <div class="row row-equal">
       <div class="flex md12 xl3 xs12 sm12">
         <div class="row">
@@ -9,8 +10,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 +25,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>
@@ -75,6 +80,7 @@ export default {
       'startTimeCurrent',
       'endTimeCurrent',
       'sampleMethod',
+      'controlPanel',
     ]),
   },
   props: {
@@ -106,6 +112,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 +148,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 +202,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 +266,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 +276,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 +283,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 +341,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 +373,14 @@ export default {
       this.hideChartLoading()
     },
     drawDetailData: async function () {
+      // 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,
+      }
       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()

src/components/analysis/replay/elite/EliteReplayChart.vue

@@ -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)

src/components/analysis/replay/elite/EliteReplayOverviewChart.vue

@@ -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()

src/components/analysis/replay/elite/TopControlPanel.vue

@@ -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,68 @@
       <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> -->
+      <!-- tang -->
+      <div class="flex-container mb-2">
+        <div class="flex sm2 xl2 md2 xs2 px-0 py-0">
+          <p class="display-6"> X-test </p>
+        </div>
+        <div class="flex sm5 xl5 md5 xs5 pl-1 pr-0 py-0">
+          <change-axis-b :ref="'axis_x'" axis="x" @changeType="refresh"/>
+        </div>
+        <div class="flex sm5 xl5 md5 xs5 pl-1 pr-0 py-0">
+          <change-unit-b
+            :ref="'unit_x'"
+            axis="x"
+            @changeUnit="refreshFormatter"
+          />
+        </div>
+      </div>
+      <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-funct-b :ref="'funct_x'" axis="x" @changeFunct="changeFunct"/>
+        </div>
+      </div>
+      <div class="flex-container mb-2">
+        <div class="flex sm2 xl2 md2 xs2 px-0 py-0">
+          <p class="display-6"> Y-test </p>
+        </div>
+        <div class="flex sm5 xl5 md5 xs5 pl-1 pr-0 py-0">
+          <change-axis-b
+            :ref="'axis_y'"
+            axis="y"
+            @changeType="refresh"
+          />
+        </div>
+        <div class="flex sm5 xl5 md5 xs5 pl-1 pr-0 py-0">
+          <change-unit-b
+            :ref="'unit_y'"
+            axis="y"
+            @changeUnit="refreshFormatter"/>
+        </div>
+      </div>
+      <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-funct-b :ref="'funct_y'" axis="y" @changeFunct="changeFunct"/>
+        </div>
+      </div>
+      <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"/>
@@ -73,27 +128,38 @@
 <script>
 import ShowResampleRate from '@/components/analysis/replay/toolbox/ShowResampleRate.vue'
 import ChangeAxis from '@/components/analysis/replay/toolbox/ChangeAxis.vue'
+import ChangeAxisB from '@/components/analysis/replay/toolbox/ChangeAxisB.vue'
 import ChangeUnit from '@/components/analysis/replay/toolbox/ChangeUnit.vue'
+import ChangeUnitB from '@/components/analysis/replay/toolbox/ChangeUnitB.vue'
 import ChangeScale from '@/components/analysis/replay/toolbox/ChangeScale.vue'
+import ChangeFunctB from '@/components/analysis/replay/toolbox/ChangeFunctB.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'
 import ShowParameter from '@/components/analysis/replay/toolbox/ShowParameter.vue'
 import LockDataZoom from '@/components/analysis/replay/toolbox/LockDataZoom.vue'
 import ChangeWindowStartAndSize from '@/components/analysis/replay/toolbox/ChangeWindowStartAndSize.vue'
+import { mapMutations } from 'vuex'
 import { mapFields } from 'vuex-map-fields'
+import { tableRouter } from '@/components/analysis/replay/toolbox/EliteReplayTable'
+import types from '@/store/modules/analysis/replay/types'
 
 export default {
   name: 'top-control-panel',
   components: {
     ShowResampleRate,
     ChangeAxis,
+    ChangeAxisB,
     ChangeUnit,
+    ChangeUnitB,
     ChangeScale,
+    ChangeFunctB,
     ChangeCycle,
     AbsToggle,
+    SpecificIntegral,
     DownloadFile,
     DeleteFile,
     EditFileName,
@@ -103,8 +169,10 @@ export default {
   },
   computed: {
     ...mapFields('replay', [
+      'chartData',
       'metaList',
       'showCyclePanel',
+      'controlPanel',
     ]),
   },
   props: {
@@ -115,17 +183,62 @@ export default {
     return {
       deviceName: '',
       showCycle: false,
+      innerCollapse: false,
+      tableRouter,
     }
   },
-  mqtt: {
-  },
   methods: {
+    ...mapMutations('replay', [types.chart.updateAxisLabel]),
+    refreshFormatter (axis) {
+      this.updateAxisLabelChart({
+        chartID: 1,
+        axis: axis,
+        axisIndex: 0,
+        channel: -1,
+      })
+      this.refreshChart(this.chartData[1])
+    },
+    changeFunct (axis) {
+      this.refreshUnit()
+      this.refreshFormatter(axis)
+      this.$emit('changeFunctional', axis, this.controlPanel[axis].funct)
+      this.$emit('changeAxis', 0)
+    },
+    refreshAxis () {
+      const xType = this.controlPanel.x.type
+      const yType = this.controlPanel.y.type
+      const xFunct = this.controlPanel.x.funct
+      const yFunct = this.controlPanel.y.funct
+      this.$refs.axis_x.refreshAxis(xType, xFunct, yType, yFunct)
+      this.$refs.axis_y.refreshAxis(xType, xFunct, yType, yFunct)
+    },
+    refreshUnit (axis) {
+      const xType = this.controlPanel.x.type
+      const yType = this.controlPanel.y.type
+      const xFunct = this.controlPanel.x.funct
+      const yFunct = this.controlPanel.y.funct
+      if (axis === 'x') {
+        this.$refs.unit_x.refreshUnit(xType, xFunct, yType, yFunct)
+      } else {
+        this.$refs.unit_y.refreshUnit(xType, xFunct, yType, yFunct)
+      }
+    },
     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)
+      // tang
+      this.initDefaultControlPanel()
+      this.$refs.axis_x.init()
+      this.$refs.funct_x.init()
+      this.$refs.unit_x.init(this.controlPanel.x.type)
+      this.$refs.axis_y.init()
+      this.$refs.funct_y.init()
+      this.$refs.unit_y.init(this.controlPanel.y.type)
+      //
       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)
@@ -135,12 +248,23 @@ export default {
       this.$refs.show_param.init(this.deviceName)
       this.$refs.change_window_start_and_size.init()
     },
+    refresh () {
+      this.$refs.axis_x.init()
+      this.$refs.funct_x.init()
+      this.$refs.unit_x.init(this.controlPanel.x.type)
+      this.$refs.axis_y.init()
+      this.$refs.funct_y.init()
+      this.$refs.unit_y.init(this.controlPanel.y.type)
+    },
     changeOverviewDataZoom () {
       this.$emit('changeOverviewDataZoom')
     },
     refreshChart (options) {
       this.$emit('refreshChart', options)
     },
+    changeFunctional (axis, functional) {
+      this.$emit('changeFunctional', axis, functional)
+    },
     changeAxis (gridIndex) {
       this.$emit('changeAxis', gridIndex)
     },
@@ -151,9 +275,123 @@ 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(),
+      }
+      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)
+    }, */
+    initDefaultControlPanel () {
+      // use state meta to decide which default unit need to be used (like check I-V mode...)
+      const setting = this.GLOBAL.getDefaultChartTypeByMode(this.metaList[0].parameter_set.MODE, this.deviceName)
+
+      // x-axis
+      let settingType = setting[0]
+      let settingValue = setting[1]
+
+      if (this.deviceName === 'EliteZM15' || this.deviceName.includes('Elite_EDC')) {
+        if (settingType === 'Elite') {
+          // 1: I, 2: V, 3: R, 4: cycle
+          if (settingValue === 1) {
+            this.controlPanel.x.type = 'Current'
+          } else if (settingValue === 2) {
+            this.controlPanel.x.type = 'Voltage'
+          } else if (settingValue === 3) {
+            this.controlPanel.x.type = 'Resistance'
+          } else if (settingValue === 4) {
+            this.controlPanel.x.type = 'Cycle'
+          }
+        } else if (settingType === 'Time') {
+          this.controlPanel.x.type = 'Time'
+        }
+      } else if (this.deviceName.includes('EIS')) {
+        if (settingType.includes('EIS')) {
+          if (settingValue === 3) {
+            this.controlPanel.x.type = 'Frequency'
+          } else if (settingValue === 5 || settingValue === 6 || settingValue === 7) {
+            this.controlPanel.x.type = 'Impedance'
+          } else if (settingValue === 8) {
+            this.controlPanel.x.type = 'Phase'
+          } else if (settingValue === 9) {
+            this.controlPanel.x.type = 'Current'
+          } else if (settingValue === 10) {
+            this.controlPanel.x.type = 'Default'
+          }
+        } else if (settingType === 'Elite') {
+          // 1: I, 2: V, 3: R
+          if (settingValue === 1) {
+            this.controlPanel.x.type = 'Current'
+          } else if (settingValue === 2) {
+            this.dataTcontrolPanel.xype = 'Voltage'
+          } else if (settingValue === 3) {
+            this.controlPanel.x.type = 'Resistance'
+          }
+        } else if (settingType === 'Time') {
+          this.controlPanel.x.type = 'Time'
+        }
+      }
+
+      // y-axis
+      settingType = setting[2]
+      settingValue = setting[3]
+
+      if (this.deviceName === 'EliteZM15' || this.deviceName.includes('Elite_EDC')) {
+        if (settingType === 'Elite') {
+          // 1: I, 2: V, 3: R, 4: cycle
+          if (settingValue === 1) {
+            this.controlPanel.y.type = 'Current'
+          } else if (settingValue === 2) {
+            this.controlPanel.y.type = 'Voltage'
+          } else if (settingValue === 3) {
+            this.controlPanel.y.type = 'Resistance'
+          } else if (settingValue === 4) {
+            this.controlPanel.y.type = 'Cycle'
+          }
+        } else if (settingType === 'Time') {
+          this.controlPanel.y.type = 'Time'
+        }
+      } else if (this.deviceName.includes('EIS')) {
+        if (settingType.includes('EIS')) {
+          if (settingValue === 3) {
+            this.controlPanel.y.type = 'Frequency'
+          } else if (settingValue === 5 || settingValue === 6 || settingValue === 7) {
+            this.controlPanel.y.type = 'Impedance'
+          } else if (settingValue === 8) {
+            this.controlPanel.y.type = 'Phase'
+          } else if (settingValue === 9) {
+            this.controlPanel.y.type = 'Current'
+          } else if (settingValue === 10) {
+            this.controlPanel.y.type = 'Default'
+          }
+        } else if (settingType === 'Elite') {
+          // 1: I, 2: V, 3: R
+          if (settingValue === 1) {
+            this.controlPanel.y.type = 'Current'
+          } else if (settingValue === 2) {
+            this.dataTcontrolPanel.xype = 'Voltage'
+          } else if (settingValue === 3) {
+            this.controlPanel.y.type = 'Resistance'
+          }
+        } else if (settingType === 'Time') {
+          this.controlPanel.y.type = 'Time'
+        }
+      }
+    },
   },
   mounted () {
   },

src/components/analysis/replay/neulive/NeuliveReplayChart.vue

@@ -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',

src/components/analysis/replay/neulive/NeuliveReplayOverviewChart.vue

@@ -7,7 +7,6 @@
 </template>
 
 <script>
-// import { chartData } from '../../../../data/task/ChartsManagement'
 
 export default {
   name: 'neulive-replay-overview-chart',

src/components/analysis/replay/toolbox/AbsToggle.vue

@@ -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
         }
       }

src/components/analysis/replay/toolbox/CanvasChartReplayCalculation.vue

@@ -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>

src/components/analysis/replay/toolbox/ChangeAxis.vue

@@ -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 () {
   },

src/components/analysis/replay/toolbox/ChangeAxisB.vue

@@ -0,0 +1,65 @@
+<template>
+  <div>
+    <va-select
+      v-model="controlPanel[axis].type"
+      class="va-select-without-margin"
+      :options="typeOption"
+      :noClear='true'
+      @input="changeType()"
+    />
+  </div>
+</template>
+
+<script>
+import { mapFields } from 'vuex-map-fields'
+import { tableRouter } from '@/components/analysis/replay/toolbox/EliteReplayTable'
+
+export default {
+  name: 'change-axis-b',
+  props: {
+    axis: {
+      type: String, // x or y
+    },
+  },
+  data () {
+    return {
+      typeOption: [],
+      tableRouter,
+    }
+  },
+  computed: {
+    ...mapFields('replay', [
+      'controlPanel',
+    ]),
+  },
+  methods: {
+    init (type) {
+      this.typeOption = [
+        'Time',
+        'Current',
+        'Voltage',
+        'Resistance',
+      ]
+    },
+    refreshAxis (xType, xFunct, yType, yFunct) {
+      const [xTable, yTable] = this.tableRouter.getTable(xType, xFunct, yType, yFunct)
+      if (this.axis === 'x') {
+        this.controlPanel[this.axis].type = xTable.name
+      } else {
+        this.controlPanel[this.axis].type = yTable.name
+      }
+    },
+    changeType () {
+      this.$emit('changeType')
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+  .va-select-without-margin {
+    .va-select {
+      margin-bottom: 0;
+    }
+  }
+</style>

src/components/analysis/replay/toolbox/ChangeChannelValueMinMax.vue

@@ -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'
         }

src/components/analysis/replay/toolbox/ChangeFunctB.vue

@@ -0,0 +1,55 @@
+<template>
+  <div>
+    <va-radio-button
+      v-for="(funct, index) in functOption"
+      :key="index"
+      v-model="controlPanel[axis].funct"
+      :option="funct"
+      @input="changeFunct()"
+    />
+  </div>
+</template>
+
+<script>
+import { mapFields } from 'vuex-map-fields'
+import { tableRouter } from '@/components/analysis/replay/toolbox/EliteReplayTable'
+
+export default {
+  name: 'change-funct-b',
+  props: {
+    axis: {
+      type: String, // x or y
+    },
+  },
+  data () {
+    return {
+      funct: '',
+      functOption: [],
+      tableRouter,
+    }
+  },
+  computed: {
+    ...mapFields('replay', [
+      'controlPanel',
+    ]),
+  },
+  methods: {
+    init () {
+      this.controlPanel[this.axis].funct = 'Linear'
+      this.functOption = this.tableRouter.getFunct(this.axis)
+    },
+    changeFunct () {
+      this.$emit('changeFunct', this.axis)
+    },
+  },
+}
+
+</script>
+
+<style lang="scss">
+  .va-select-without-margin {
+    .va-select {
+      margin-bottom: 0;
+    }
+  }
+</style>

src/components/analysis/replay/toolbox/ChangeScale.vue

@@ -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 () {

src/components/analysis/replay/toolbox/ChangeUnit.vue

@@ -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,

src/components/analysis/replay/toolbox/ChangeUnitB.vue

@@ -0,0 +1,65 @@
+<template>
+  <div>
+    <va-select
+      @input="changeUnit()"
+      v-model="controlPanel[axis].unit"
+      class="va-select-without-margin"
+      :options="unitOption"
+      :noClear='true'
+    />
+  </div>
+</template>
+
+<script>
+import { mapFields } from 'vuex-map-fields'
+import { tableRouter } from '@/components/analysis/replay/toolbox/EliteReplayTable'
+
+export default {
+  name: 'change-unit-b',
+  props: {
+    axis: {
+      type: String, // x or y
+    },
+  },
+  data () {
+    return {
+      unit: '',
+      unitOption: [],
+      tableRouter,
+    }
+  },
+  computed: {
+    ...mapFields('replay', [
+      'controlPanel',
+    ]),
+  },
+  methods: {
+    init (type) {
+      this.controlPanel[this.axis].unit = this.tableRouter.getDefaultUnit(type)
+      this.unitOption = Object.keys(this.tableRouter.getOption(type))
+    },
+    refreshUnit (xType, xFunct, yType, yFunct) {
+      const [xTable, yTable] = this.tableRouter.getTable(xType, xFunct, yType, yFunct)
+      if (this.axis === 'x') {
+        this.controlPanel[this.axis].unit = xTable.defaultUnit
+        this.unitOption = Object.keys(xTable.option)
+      } else {
+        this.controlPanel[this.axis].unit = yTable.defaultUnit
+        this.unitOption = Object.keys(yTable.option)
+      }
+    },
+    changeUnit () {
+      this.$emit('changeUnit', this.axis)
+    },
+  },
+}
+
+</script>
+
+<style lang="scss">
+  .va-select-without-margin {
+    .va-select {
+      margin-bottom: 0;
+    }
+  }
+</style>

src/components/analysis/replay/toolbox/EditFileName.vue

@@ -80,7 +80,7 @@ export default {
       // [TODO] 0: not sure future UX design
       const meta = this.metaList[0]
       file.clearFileList()
-      const files = await api.meta.getByParent('folder', meta.parent.folder[0])
+      const files = await api.meta.getAttrByParent('folder', meta.parent.folder[0], 'id-path-name-parent-description-size-time_duration-uuid-device-channels-created_at')
       file.updateFileList(files)
       const tmpFiles = file.getFileList()
       for (let i = 0; i < tmpFiles.length; i++) {

src/components/analysis/replay/toolbox/EliteReplayTable.js

@@ -0,0 +1,143 @@
+const chartTable = {
+  // axis type
+  Time: {
+    name: 'Time',
+    option: {
+      auto: 1,
+    },
+    defaultUnit: 'auto',
+    downloadUnit: 'auto',
+  },
+  Current: {
+    name: 'Current',
+    option: {
+      nA: 1,
+      uA: 1e3,
+      mA: 1e6,
+      A: 1e9,
+    },
+    defaultUnit: 'A',
+    downloadUnit: 'A',
+  },
+  Voltage: {
+    name: 'Voltage',
+    option: {
+      uV: 1,
+      mV: 1e3,
+      V: 1e6,
+    },
+    defaultUnit: 'V',
+    downloadUnit: 'V',
+  },
+  Resistance: {
+    name: 'Resistance',
+    option: {
+      mΩ: 1,
+      Ω: 1e3,
+      kΩ: 1e6,
+      MΩ: 1e9,
+    },
+    defaultUnit: 'Ω',
+    downloadUnit: 'Ω',
+  },
+  Charge: {
+    name: 'Charge',
+    option: {
+      nC: 1e6,
+      uC: 1e9,
+      mC: 1e12,
+      C: 1e15,
+    },
+    defaultUnit: 'C',
+    downloadUnit: 'C',
+  },
+  Power: {
+    name: 'Power',
+    option: {
+      mW: 1e12,
+      W: 1e15,
+      kW: 1e18,
+    },
+    defaultUnit: 'W',
+    downloadUnit: 'W',
+  },
+  Transconductance: {
+    name: 'Transconductance',
+    option: {
+      'mA/V': 1,
+      'A/V': 1e3,
+      'kA/V': 1e6,
+    },
+    defaultUnit: 'A/V',
+    downloadUnit: 'A/V',
+  },
+  Idiot: {
+    name: 'Idiot',
+    option: {
+      idiot: 1,
+    },
+    defaultUnit: 'idiot',
+    downloadUnit: 'idiot',
+  },
+}
+export const tableRouter = {
+  getDefaultUnit: (axis) => {
+    return chartTable[axis].defaultUnit
+  },
+  getOption: (axis) => {
+    return chartTable[axis].option
+  },
+  getTable: (xAxis, xFunct, yAxis, yFunct) => {
+    var xTable = chartTable[xAxis]
+    var yTable = chartTable.Idiot
+    if (yFunct === 'Linear' || yFunct === 'Log') {
+      yTable = chartTable[yAxis]
+    } else if (yFunct === 'Integral') {
+      if (xAxis === 'Time' && yAxis === 'Current') {
+        yTable = chartTable.Charge
+      } else if (xAxis === 'Current' && yAxis === 'Voltage') {
+        yTable = chartTable.Power
+      } else if (xAxis === 'Voltage' && yAxis === 'Current') {
+        yTable = chartTable.Power
+      }
+    } else if (yFunct === 'Differential') {
+      if (xAxis === 'Current' && yAxis === 'Voltage') {
+        yTable = chartTable.Resistance
+      } else if (xAxis === 'Voltage' && yAxis === 'Current') {
+        yTable = chartTable.Transconductance
+      }
+    }
+    return [xTable, yTable]
+  },
+  getFunct (axis) {
+    if (axis === 'x') {
+      return ['Linear', 'Log']
+    } else {
+      return ['Linear', 'Log', 'Integral', 'Differential']
+    }
+  },
+  // axisLabel formatter
+  autoTimeFormatter (val) {
+    let label = ''
+    const hour = parseInt(val / 3.6e9)
+    const minute = parseInt((val % 3.6e9) / 1000000 / 60)
+    const second = parseInt((val % 6e7) / 1000000)
+    const millisecond = parseInt((val % 1e6) / 1000)
+    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 (hour === 0 && minute === 0 && second === 0 && millisecond === 0) {
+      label += ' 0 ms '
+    }
+    return label
+  },
+}

src/components/analysis/replay/toolbox/ShowParameter.vue

@@ -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 () {

src/components/analysis/replay/toolbox/SpecificIntegral.vue

@@ -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>

src/components/analysis/spike/SpikeChart.vue

@@ -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',

src/components/analysis/spike/SpikeOverviewChart.vue

@@ -7,7 +7,6 @@
 </template>
 
 <script>
-// import { chartData } from '../../../../data/task/ChartsManagement'
 
 export default {
   name: 'spike-overview-chart',

src/components/dashboard/test.vue

@@ -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>

src/components/debug/Debug.vue

@@ -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>

src/components/developer/Developer.vue

@@ -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>

src/components/download/Download.vue

@@ -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)
                   }
                 }

src/components/download/DownloadOffline.vue

@@ -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)
                   }
                 }

src/components/file/File.vue

@@ -68,7 +68,7 @@ export default {
           this.$refs.file_ref.currentInfo = initCollection.data[0]
 
           const folders = await api.collection.getByParent('folder', initCollection.data[0].id)
-          const files = await api.meta.getByParent('folder', initCollection.data[0].id)
+          const files = await api.meta.getAttrByParent('folder', initCollection.data[0].id, 'id-path-name-parent-description-size-time_duration-uuid-device-channels-created_at')
           file.updateFileList(folders)
           file.updateFileList(files)
 

src/components/file/file-table/FileTable.vue

@@ -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>
@@ -170,7 +188,7 @@
           {{transTime(props.rowData.time_duration)}}
         </template>
         <template slot="device_info" slot-scope="props">
-          {{transDeviceInfo(props.rowData.configuration)}}
+          {{transDeviceInfo(props.rowData.device)}}
         </template>
         <template slot="actions" slot-scope="props" >
           <va-popover :message="`sdcard ${props.rowData.name}`" placement="top">
@@ -263,8 +281,6 @@ export default {
         path: '',
         name: '',
         metaID: '',
-        rawChannelAndIDArrays: [], // list of lists
-        miniChannelAndIDArrays: [], // list of lists
       },
 
       styleList: {
@@ -381,11 +397,11 @@ export default {
         return this.GLOBAL.transTime(time)
       }
     },
-    transDeviceInfo: function (configuration) {
-      if (configuration === undefined) {
+    transDeviceInfo: function (device) {
+      if (device === undefined) {
         return '--'
       } else {
-        return configuration._DEVICE_NAME_ + '\n' + configuration._DEVICE_ADDR_
+        return device.device_name + '\n' + this.GLOBAL.transMac(device.device_address)
       }
     },
 
@@ -400,7 +416,7 @@ export default {
 
         // call getfolder api and update
         const folders = await api.collection.getByParent('folder', info.id)
-        const files = await api.meta.getByParent('folder', info.id)
+        const files = await api.meta.getAttrByParent('folder', info.id, 'id-path-name-parent-description-size-time_duration-uuid-device-channels-created_at')
         file.updateFileList(folders)
         file.updateFileList(files)
 
@@ -420,7 +436,7 @@ export default {
         this.currentInfo = item
         // call getfolder api and update
         const folders = await api.collection.getByParent('folder', item.id)
-        const files = await api.meta.getByParent('folder', item.id)
+        const files = await api.meta.getAttrByParent('folder', item.id, 'id-path-name-parent-description-size-time_duration-uuid-device-channels-created_at')
         file.updateFileList(folders)
         file.updateFileList(files)
 
@@ -441,7 +457,7 @@ export default {
       if (initCollection.data.length === 1) {
         this.currentInfo = initCollection.data[0]
         const folders = await api.collection.getByParent('folder', initCollection.data[0].id)
-        const files = await api.meta.getByParent('folder', initCollection.data[0].id)
+        const files = await api.meta.getAttrByParent('folder', initCollection.data[0].id, 'id-path-name-parent-description-size-time_duration-uuid-device-channels-created_at')
         file.updateFileList(folders)
         file.updateFileList(files)
         this.fileLists = file.getFileList()
@@ -496,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
@@ -558,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,32 +585,28 @@ export default {
         this.deleteInfo.path = info.path
         this.deleteInfo.name = info.name
         this.deleteInfo.metaID = info.id
-        this.deleteInfo.rawChannelAndIDArrays = [] // list of lists
-        this.deleteInfo.miniChannelAndIDArrays = [] // list of lists
-        for (const [channel, idArray] of Object.entries(info.raw_data)) {
-          this.deleteInfo.rawChannelAndIDArrays.push([channel, idArray[0]])
-        }
-        for (const [channel, scaleObject] of Object.entries(info.mini_data)) {
-          for (const idArray of Object.values(scaleObject)) {
-            this.deleteInfo.miniChannelAndIDArrays.push([channel, idArray[0]])
-          }
-        }
       }
     },
-    async 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 () {
-      if (this.deleteInfo.metaID !== undefined) {
+      this.showToast('deleting file...', {
+        position: 'bottom-right',
+      })
+      if (this.deleteInfo.metaID === undefined) {
         await this.deleteFolder(this.deleteInfo.folderID)
       } else {
         await this.deleteSingleFileByDeleteInfo()
@@ -612,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) {
@@ -642,7 +663,7 @@ export default {
 
         // call getfolder api and update
         const folders = await api.collection.getByParent('folder', this.currentInfo.id)
-        const files = await api.meta.getByParent('folder', this.currentInfo.id)
+        const files = await api.meta.getAttrByParent('folder', this.currentInfo.id, 'id-path-name-parent-description-size-time_duration-uuid-device-channels-created_at')
         file.updateFileList(folders)
         file.updateFileList(files)
 
@@ -652,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]
@@ -714,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
           }
         }
       }

src/components/project/Project.vue

@@ -10,7 +10,7 @@
           : cardStyle.medium
         : cardStyle.large
       ">
-      <project-view @start_project="startProject($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,7 +22,9 @@
 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'
 
 export default {
@@ -34,6 +36,8 @@ export default {
   },
   computed: {
     ...mapFields('project', [
+      'projectConfigList',
+      'runningProjectList',
       'projectManagerPanel',
       'taskViewPanel',
       'deviceConnectList',
@@ -51,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) {
@@ -63,8 +68,41 @@ 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
+      }
+    },
   },
   methods: {
+    pageToast: function (mes) {
+      this.showToast(
+        mes,
+        {
+          icon: 'fa-bell',
+          position: 'bottom-right',
+          duration: 10000,
+        },
+      )
+    },
     mqttSub: function (val) {
       this.$mqtt.subscribe(val)
     },
@@ -77,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()
@@ -94,22 +136,53 @@ export default {
         project: 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,
+        types.project.addDevice,
+      ],
+    ),
   },
   async mounted () {
     await this.initPage()
-    console.log('controllerID', taskInfo.getTaskInfo().controllerID)
+    // console.log('controllerID', taskInfo.getTaskInfo().controllerID)
 
     /** get connect device list */
     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)
+
+    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 {

src/components/project/manager/ProjectManager.vue

@@ -1,25 +1,49 @@
 <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>
+        <div class="row">
+          <div class="flex d-flex xs5 sm5 lg5 xl5">
+            <va-icon name="fa fa-bluetooth-b" color="primary"/>
+            <h5 class="mb-0">PROJECTS</h5>
+          </div>
+          <div class="flex xs7 sm7 lg7 xl7" style="text-align: right;">
+            <!-- <va-button v-if="projectConfigList.length !== 0" class="ma-0 circle-button" @click="closePanel"> -->
+            <va-icon v-if="projectConfigList.length !== 0" @click.native="closePanel"
+              name="fa fa-times"
+              color="black"
+            />
+            <!-- </va-button> -->
+          </div>
+        </div>
+        <!-- <div class="flex d-flex xl5 lg5 sm5 xs5 ma-0">
+          <va-icon name="fa fa-bluetooth-b mr-3" color="primary"/>
+          <h5 class="mb-0">PROJECTS</h5>
+        </div>
+        <div class="flex d-flex xl7 lg7 sm7 xs7 ma-0" style="text-align: right;">
+          <va-button v-if="projectConfigList.length !== 0" class="pa-0 ma-0 circle-button" small color="dark" @click="closePanel">
+            <va-icon
+              name="fa fa-times"
+              color="white"
+            />
+          </va-button>
+        </div> -->
       </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 +51,25 @@
 
 <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',
+      'projectManagerPanel',
+    ]),
   },
   data () {
     return {
@@ -46,13 +78,26 @@ export default {
     }
   },
   methods: {
+    switchProjectCategory: function (title) {
+      const projectType = ['projectConfigList', 'runningProjectList']
+      this.projectList = this[projectType[title]]
+      this.lockMode = Boolean(title)
+    },
     ...mapActions('project',
       [
         types.project.create,
       ],
     ),
+    closePanel: function () {
+      this.projectManagerPanel.show = !this.projectManagerPanel.show
+    },
   },
   mounted () {
+    this.projectList = this.projectConfigList
   },
 }
 </script>
+
+<style>
+
+</style>

src/components/project/manager/ProjectManagerList.vue

@@ -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,
       ],
     ),

src/components/project/manager/RunningProjectManagerList.vue

@@ -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>

src/components/project/task/ProjectTask.vue

@@ -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>

src/components/project/task/config/ProjectTaskConfigCondition.vue

@@ -3,6 +3,12 @@
     <div class="task-config__header-separator mb-1">
       <div class="task-config__header-text">
         <span>Action &#38; Condition</span>
+        <va-button class="circle-button" small color="dark" @click="closePanel">
+          <va-icon
+            name="fa fa-times"
+            color="white"
+          />
+        </va-button>
       </div>
     </div>
     <div>
@@ -76,6 +82,7 @@ export default {
 
     ...mapFields('project', [
       'taskSelectKey',
+      'taskViewPanel',
     ]),
   },
   data () {
@@ -95,6 +102,9 @@ export default {
     }
   },
   methods: {
+    closePanel: function () {
+      this.taskViewPanel.show = !(this.taskViewPanel.show)
+    },
     selectDevice: function (deviceKey) {
       this.settingStep = 1
       this.deviceSelect = deviceKey
@@ -130,8 +140,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) {

src/components/project/task/config/ProjectTaskConfigDevice.vue

@@ -2,12 +2,18 @@
   <div class="flex sm12 xl12 md12 xs12">
     <div class="task-config__header-separator mb-1">
       <div class="task-config__header-text">
-        <span >Device</span>
+        <span> Device </span>
+        <va-button class="circle-button" small color="dark" @click="closePanel">
+          <va-icon
+            name="fa fa-times"
+            color="white"
+          />
+        </va-button>
       </div>
     </div>
     <div>
       <va-list fit class="mb-2">
-        <va-item v-for="(device, index) in getSelectProject.deviceList" :key="index" >
+        <va-item v-for="(device, index) in getSelectProject.device" :key="index" >
           <va-item-section side>
             <va-checkbox
               :value="device.isSelect"
@@ -30,7 +36,7 @@
             </va-item-label>
 
             <va-item-label caption>
-              {{ device.mac_address }}
+              {{ device.connectDevice.device_address }}
             </va-item-label>
           </va-item-section>
         </va-item>
@@ -57,6 +63,7 @@ export default {
 
     ...mapFields('project', [
       'taskSelectKey',
+      'taskViewPanel',
     ]),
   },
   data () {
@@ -68,28 +75,32 @@ export default {
       // if select single task
       if (this.taskSelectKey !== undefined) {
         device.isSelect = event
+        // console.log('device.isSelect: ', device.isSelect)
         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.taskList.length).fill().map((_, index) => String(index))]
-          for (const task of this.getSelectProject.taskList) {
-            if (!task.deviceList.includes(key)) {
-              task.deviceList.push(key)
+          device.isSelect = ['-1', ...Array(this.getSelectProject.task.length).fill().map((_, index) => String(index))]
+          for (const task of this.getSelectProject.task) {
+            if (!task.device.includes(key)) {
+              task.device.push(key)
             }
           }
         } else {
           // uncheck all
           device.isSelect = []
-          for (const task of this.getSelectProject.taskList) {
-            task.deviceList = task.deviceList.filter(item => item !== key)
+          for (const task of this.getSelectProject.task) {
+            task.device = task.device.filter(item => item !== key)
           }
         }
       }
     },
+    closePanel: function () {
+      this.taskViewPanel.show = !(this.taskViewPanel.show)
+    },
   },
   mounted () {
   },

src/components/project/task/config/ProjectTaskConfigParameter.vue

@@ -3,43 +3,120 @@
     <div class="task-config__header-separator mb-1">
       <div class="task-config__header-text">
         <span >Parameter Set</span>
+        <va-button class="circle-button" small color="dark" @click="closePanel">
+          <va-icon
+            name="fa fa-times"
+            color="white"
+          />
+        </va-button>
       </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: {
+    closePanel: function () {
+      this.taskViewPanel.show = !(this.taskViewPanel.show)
+    },
     selectDevice: function (device) {
       this.deviceSelected = device
     },
     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>

src/components/project/task/config/parameter/EliteParameterRecordingElitezm15.vue

@@ -14,212 +14,274 @@
       </div>
 
       <!-- 1.5ui -->
-      <va-tree-category
-        v-if="workingModeSelect != null && workingModeSelect.id == 0 || workingModeSelect.id == 1 || workingModeSelect.id == 2 || workingModeSelect.id == 4 || workingModeSelect.id == 5 || workingModeSelect.id == 6 || workingModeSelect.id == 7 || workingModeSelect.id == 8 || workingModeSelect.id == 9 || workingModeSelect.id == 11 || workingModeSelect.id == 13"
-        style="font-size: 20px;"
-        :label="'Range ( ' + currentRangeOptions[currentRangeSelect].label + ' )'">
-        <va-tree-node>
-          <level-button :ref="'currentRangeSelect'" :deviceID="deviceID" :options="currentRangeOptions" :parameterName="'ADC_LEVEL_I_15'" @parameterChange="deviceParameterChange($event)" />
-        </va-tree-node>
-      </va-tree-category>
+      <div v-show="[0, 1, 2, 4, 5, 6, 7, 8, 9, 11, 13].includes(workingModeSelect.id)">
+        <p style="font-size: 20px;">Range ( {{ currentRangeOptions[currentRangeSelect].label }} )</p>
+        <level-button
+          :ref="'currentRangeSelect'"
+          :deviceID="deviceID"
+          :options="currentRangeOptions"
+          :parameterName="'ADC_LEVEL_I_15'"
+          @parameterChange="deviceParameterChange($event)"
+        />
+      </div>
 
-      <va-tree-category
-        v-if="workingModeSelect != null && workingModeSelect.id == 0 || workingModeSelect.id == 1 || workingModeSelect.id == 2 || workingModeSelect.id == 4 || workingModeSelect.id == 5 || workingModeSelect.id == 6 || workingModeSelect.id == 7 || workingModeSelect.id == 8 || workingModeSelect.id == 9 || workingModeSelect.id == 11 || workingModeSelect.id == 13"
-        style="font-size: 20px;"
-        :label="'Range ( ' + voltageInRangeOptions[voltageInRangeSelect].label + ' )'">
-        <va-tree-node>
-          <level-button :ref="'voltageInRangeSelect'" :deviceID="deviceID" :options="voltageInRangeOptions" :parameterName="'ADC_LEVEL_V_IN_15'" @parameterChange="deviceParameterChange($event)" />
-        </va-tree-node>
-      </va-tree-category>
+      <div v-show="[0, 1, 2, 4, 5, 6, 7, 8, 9, 11, 13].includes(workingModeSelect.id)">
+        <p style="font-size: 20px;">Range ( {{ voltageInRangeOptions[voltageInRangeSelect].label }} )</p>
+        <level-button
+          :ref="'voltageInRangeSelect'"
+          :deviceID="deviceID"
+          :options="voltageInRangeOptions"
+          :parameterName="'ADC_LEVEL_V_IN_15'"
+          @parameterChange="deviceParameterChange($event)"
+        />
+      </div>
 
-      <va-tree-category
-        v-if="workingModeSelect != null && workingModeSelect.id == 0 || workingModeSelect.id == 1 || workingModeSelect.id == 2 || workingModeSelect.id == 3 || workingModeSelect.id == 4 || workingModeSelect.id == 5 || workingModeSelect.id == 6 || workingModeSelect.id == 7 || workingModeSelect.id == 8 || workingModeSelect.id == 9 || workingModeSelect.id == 10"
-        style="font-size: 20px;"
-        :label="'HighZ ( ' + highzOptions[highzSelect].label + ' )'">
-        <va-tree-node>
-          <level-button :ref="'highzSelect'" :deviceID="deviceID" :options="highzOptions" :parameterName="'CTRL_HIGH_Z_15'" @parameterChange="deviceParameterChange($event)" />
-        </va-tree-node>
-      </va-tree-category>
+      <div v-show="[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10].includes(workingModeSelect.id)">
+        <p style="font-size: 20px;">HighZ ( {{ highzOptions[highzSelect].label }} )</p>
+        <level-button
+          :ref="'highzSelect'"
+          :deviceID="deviceID"
+          :options="highzOptions"
+          :parameterName="'CTRL_HIGH_Z_15'"
+          @parameterChange="deviceParameterChange($event)"
+        />
+      </div>
 
-      <va-tree-category
-        v-if="workingModeSelect != null && workingModeSelect.id == 11"
-        style="font-size: 20px;"
-        :label="'Cali Channel ( ' + caliChannelOptions[caliChannelSelect].label + ' )'">
-        <va-tree-node>
-          <level-button :ref="'caliChannelSelect'" :deviceID="deviceID" :options="caliChannelOptions" :parameterName="'ADC_DAC_CHANNEL_15'" @parameterChange="deviceParameterChange($event)" />
-        </va-tree-node>
-      </va-tree-category>
+      <div v-show="[11].includes(workingModeSelect.id)">
+        <p style="font-size: 20px;">Cali Channel ( {{ caliChannelOptions[caliChannelSelect].label }} )</p>
+        <level-button
+          :ref="'caliChannelSelect'"
+          :deviceID="deviceID"
+          :options="caliChannelOptions"
+          :parameterName="'ADC_DAC_CHANNEL_15'"
+          @parameterChange="deviceParameterChange($event)"
+        />
+      </div>
 
-      <va-tree-category
-        v-if="workingModeSelect != null && workingModeSelect.id == 10"
-        style="font-size: 20px;"
-        :label="'cali Volt ( ' + caliVoltNumber + ' )'">
-        <va-tree-node>
-          <cycle-range :ref="'caliVoltNumber'" :deviceID="deviceID" :parameterName="'DAC_VOLT'" :minValue="0" :maxValue="65535" @parameterChange="deviceParameterChange($event)" />
-        </va-tree-node>
-      </va-tree-category>
+      <div v-show="[10].includes(workingModeSelect.id)">
+        <p style="font-size: 20px;">Cali Volt ( {{ caliVoltNumber }} )</p>
+        <cycle-range
+          :ref="'caliVoltNumber'"
+          :deviceID="deviceID"
+          :parameterName="'DAC_VOLT'"
+          :minValue="0"
+          :maxValue="65535"
+          @parameterChange="deviceParameterChange($event)"
+        />
+      </div>
 
-      <va-tree-category
-        v-if="workingModeSelect != null && workingModeSelect.id == 0 || workingModeSelect.id == 1"
-        style="font-size: 20px;"
-        :label="'Volt start ( ' + startVoltNumber/1000 + 'V )'">
-        <va-tree-node>
-          <volt-range :ref="'startVoltNumber'" :deviceID="deviceID" :parameterName="'VOLT_ORIGIN'" :minValue="-5" :maxValue="5" @parameterChange="deviceParameterChange($event)" />
-        </va-tree-node>
-      </va-tree-category>
+      <div v-show="[0,1].includes(workingModeSelect.id)">
+        <p style="font-size: 20px;">Volt Start ( {{ (startVoltNumber - 25000 ) / 5000 }} V )</p>
+        <volt-range
+          :ref="'startVoltNumber'"
+          :deviceID="deviceID"
+          :parameterName="'VOLT_ORIGIN'"
+          :minValue="-5"
+          :maxValue="5"
+          @parameterChange="deviceParameterChange($event)"
+        />
+      </div>
 
-      <va-tree-category
-        v-if="workingModeSelect != null && workingModeSelect.id == 0 || workingModeSelect.id == 1"
-        style="font-size: 20px;"
-        :label="'Volt stop ( ' + stopVoltNumber/1000 + 'V )'">
-        <va-tree-node>
-          <volt-range :ref="'stopVoltNumber'" :deviceID="deviceID" :parameterName="'VOLT_FINAL'" :minValue="-5" :maxValue="5" @parameterChange="deviceParameterChange($event)" />
-        </va-tree-node>
-      </va-tree-category>
+      <div v-show="[0,1].includes(workingModeSelect.id)">
+        <p style="font-size: 20px;">Volt Stop ( {{ (stopVoltNumber - 25000 ) / 5000 }} V )</p>
+        <volt-range
+          :ref="'stopVoltNumber'"
+          :deviceID="deviceID"
+          :parameterName="'VOLT_FINAL'"
+          :minValue="-5"
+          :maxValue="5"
+          @parameterChange="deviceParameterChange($event)"
+        />
+      </div>
 
-      <va-tree-category
-        v-if="workingModeSelect != null && workingModeSelect.id == 0 || workingModeSelect.id == 1"
-        style="font-size: 20px;"
-        :label="'Volt step ( ' + stepVoltNumber/10 + 'mV )'">
-        <va-tree-node>
-          <milli-volt-range :ref="'stepVoltNumber'" :deviceID="deviceID" :parameterName="'VOLT_STEP'" :minValue="0.2" :maxValue="100" @parameterChange="deviceParameterChange($event)" />
-        </va-tree-node>
-      </va-tree-category>
+      <div v-show="[0,1].includes(workingModeSelect.id)">
+        <p style="font-size: 20px;">Volt Step ( {{ stepVoltNumber/10 }} mV )</p>
+        <milli-volt-range
+          :ref="'stepVoltNumber'"
+          :deviceID="deviceID"
+          :parameterName="'VOLT_STEP'"
+          :minValue="0.2" :maxValue="100"
+          @parameterChange="deviceParameterChange($event)"
+        />
+      </div>
 
-      <va-tree-category
-        v-if="workingModeSelect != null && workingModeSelect.id == 0 || workingModeSelect.id == 1"
-        style="font-size: 20px;"
-        :label="'Step time ( ' + stepTimeOptions[stepTimeSelect].label + ' )'">
-        <va-tree-node>
-          <level-button :ref="'stepTimeSelect'" :deviceID="deviceID" :options="stepTimeOptions" :parameterName="'STEP_TIME'" @parameterChange="deviceParameterChange($event)" />
-        </va-tree-node>
-      </va-tree-category>
+      <div v-show="[0,1].includes(workingModeSelect.id)">
+        <p style="font-size: 20px;">Step Time ( {{ stepTimeOptions[stepTimeSelect].label }} )</p>
+        <level-button
+          :ref="'stepTimeSelect'"
+          :deviceID="deviceID"
+          :options="stepTimeOptions"
+          :parameterName="'STEP_TIME'"
+          @parameterChange="deviceParameterChange($event)"
+        />
+      </div>
 
-      <va-tree-category
-        v-if="workingModeSelect != null && workingModeSelect.id == 2 || workingModeSelect.id == 3 || workingModeSelect.id == 5"
-        style="font-size: 20px;"
-        :label="'Volt out ( ' + outputVoltNumber/1000 + 'V )'">
-        <va-tree-node>
-          <volt-range :ref="'outputVoltNumber'" :deviceID="deviceID" :parameterName="'DAC_VOLT'" :minValue="-5" :maxValue="5" @parameterChange="deviceParameterChange($event)" />
-        </va-tree-node>
-      </va-tree-category>
+      <div v-show="[2,3,5].includes(workingModeSelect.id)">
+        <p style="font-size: 20px;">Volt Out ( {{ (outputVoltNumber - 25000 ) / 5000 }} V )</p>
+        <volt-range
+          :ref="'outputVoltNumber'"
+          :deviceID="deviceID"
+          :parameterName="'DAC_VOLT'"
+          :minValue="-5"
+          :maxValue="5"
+          @parameterChange="deviceParameterChange($event)"
+        />
+      </div>
 
-      <va-tree-category
-        v-if="workingModeSelect != null && workingModeSelect.id == 0 || workingModeSelect.id == 1 || workingModeSelect.id == 2 || workingModeSelect.id == 3 || workingModeSelect.id == 4 || workingModeSelect.id == 5 || workingModeSelect.id == 6 || workingModeSelect.id == 13"
-        style="font-size: 20px;"
-        :label="'Sample rate ( ' + sampleRateNumber/10 + 'sps )'">
-        <va-tree-node>
-          <resolution-range :ref="'sampleRateNumber'" :deviceID="deviceID" :parameterName="'SAMPLE_RATE'" :minValue="0.1" :maxValue="100" @parameterChange="deviceParameterChange($event)" />
-        </va-tree-node>
-      </va-tree-category>
+      <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'"
+          :deviceID="deviceID"
+          :parameterName="'SAMPLE_RATE'"
+          :minValue="0.1"
+          :maxValue="100"
+          @parameterChange="deviceParameterChange($event)"
+        />
+      </div>
 
-      <va-tree-category
-        v-if="workingModeSelect != null && workingModeSelect.id == 6"
-        style="font-size: 20px;"
-        :label="'Charge ( ' + chargeOptions[chargeSelect].label + ' )'">
-        <va-tree-node>
-          <opp-level-button :ref="'chargeSelect'" :deviceID="deviceID" :options="chargeOptions" :parameterName="'Charge'" @parameterChange="deviceParameterChange($event)" />
-        </va-tree-node>
-      </va-tree-category>
+      <div v-show="[6].includes(workingModeSelect.id)">
+        <p style="font-size: 20px;">Charge ( {{ chargeOptions[chargeSelect].label }} )</p>
+        <opp-level-button
+          :ref="'chargeSelect'"
+          :deviceID="deviceID"
+          :options="chargeOptions"
+          :parameterName="'Charge'"
+          @parameterChange="deviceParameterChange($event)"
+        />
+      </div>
 
-      <va-tree-category
-        v-if="workingModeSelect != null && workingModeSelect.id == 6"
-        style="font-size: 20px;"
-        :label="'Current ( ' + parseFloat(currentNumber / 100) + 'μA )'">
-        <va-tree-node>
-          <micro-ampere-range :ref="'currentNumber'" :deviceID="deviceID" :parameterName="'Const_Current_value'" :minValue="0" :maxValue="15000" @parameterChange="deviceParameterChange($event)" />
-        </va-tree-node>
-      </va-tree-category>
+      <div v-show="[6].includes(workingModeSelect.id)">
+        <p style="font-size: 20px;">Current ( {{ parseFloat(currentNumber / 100) }} μA )</p>
+        <micro-ampere-range
+          :ref="'currentNumber'"
+          :deviceID="deviceID"
+          :parameterName="'Const_Current_value'"
+          :minValue="0"
+          :maxValue="15000"
+          @parameterChange="deviceParameterChange($event)"
+        />
+      </div>
 
-      <va-tree-category
-        v-if="workingModeSelect != null && workingModeSelect.id == 6"
-        style="font-size: 20px;"
-        :label="'Volt max stop ( ' + stopVoltMaxNumber/1000 + 'V )'">
-        <va-tree-node>
-          <volt-range :ref="'stopVoltMaxNumber'" :deviceID="deviceID" :parameterName="'VOLTSTOP_MAX'" :minValue="-5" :maxValue="5" @parameterChange="deviceParameterChange($event)" />
-        </va-tree-node>
-      </va-tree-category>
+      <div v-show="[6].includes(workingModeSelect.id)">
+        <p style="font-size: 20px;">Volt Max Stop ( {{ (stopVoltMaxNumber - 25000 ) / 5000 }} V )</p>
+        <volt-range
+          :ref="'stopVoltMaxNumber'"
+          :deviceID="deviceID"
+          :parameterName="'VOLTSTOP_MAX'"
+          :minValue="-5"
+          :maxValue="5"
+          @parameterChange="deviceParameterChange($event)"
+        />
+      </div>
 
-      <va-tree-category
-        v-if="workingModeSelect != null && workingModeSelect.id == 6"
-        style="font-size: 20px;"
-        :label="'Volt min stop ( ' + stopVoltMinNumber/1000 + 'V )'">
-        <va-tree-node>
-          <volt-range :ref="'stopVoltMinNumber'" :deviceID="deviceID" :parameterName="'VOLTSTOP_MIN'" :minValue="-5" :maxValue="5" @parameterChange="deviceParameterChange($event)" />
-        </va-tree-node>
-      </va-tree-category>
+      <div v-show="[6].includes(workingModeSelect.id)">
+        <p style="font-size: 20px;">Volt Min Stop ( {{ (stopVoltMinNumber - 25000 ) / 5000 }} V )</p>
+        <volt-range
+          :ref="'stopVoltMinNumber'"
+          :deviceID="deviceID"
+          :parameterName="'VOLTSTOP_MIN'"
+          :minValue="-5"
+          :maxValue="5"
+          @parameterChange="deviceParameterChange($event)"
+        />
+      </div>
 
-      <va-tree-category
-        v-if="workingModeSelect != null && workingModeSelect.id == 7 || workingModeSelect.id == 8"
-        style="font-size: 20px;"
-        :label="'E-Initial ( ' + voltInitialNumber/1000 + 'V )'">
-        <va-tree-node>
-          <volt-range :ref="'voltInitialNumber'" :deviceID="deviceID" :parameterName="'VOLT_INITIAL'" :minValue="-5" :maxValue="5" @parameterChange="deviceParameterChange($event)" />
-        </va-tree-node>
-      </va-tree-category>
+      <div v-show="[7,8].includes(workingModeSelect.id)">
+        <p style="font-size: 20px;">E-Initial ( {{ (voltInitialNumber - 25000 ) / 5000 }} V )</p>
+        <volt-range
+          :ref="'voltInitialNumber'"
+          :deviceID="deviceID"
+          :parameterName="'VOLT_INITIAL'"
+          :minValue="-5"
+          :maxValue="5"
+          @parameterChange="deviceParameterChange($event)"
+        />
+      </div>
 
-      <va-tree-category
-        v-if="workingModeSelect != null && workingModeSelect.id == 7"
-        style="font-size: 20px;"
-        :label="'E1 ( ' + voltMaxNumber/1000 + 'V )'">
-        <va-tree-node>
-          <volt-range :ref="'voltMaxNumber'" :deviceID="deviceID" :parameterName="'VOLT_MAX'" :minValue="-5" :maxValue="5" @parameterChange="deviceParameterChange($event)" />
-        </va-tree-node>
-      </va-tree-category>
+      <div v-show="[7].includes(workingModeSelect.id)">
+        <p style="font-size: 20px;">E1 ( {{ (voltMaxNumber - 25000 ) / 5000 }} V )</p>
+        <volt-range
+          :ref="'voltMaxNumber'"
+          :deviceID="deviceID"
+          :parameterName="'VOLT_MAX'"
+          :minValue="-5"
+          :maxValue="5"
+          @parameterChange="deviceParameterChange($event)"
+        />
+      </div>
 
-      <va-tree-category
-        v-if="workingModeSelect != null && workingModeSelect.id == 7"
-        style="font-size: 20px;"
-        :label="'E2 ( ' + voltMinNumber/1000 + 'V )'">
-        <va-tree-node>
-          <volt-range :ref="'voltMinNumber'" :deviceID="deviceID" :parameterName="'VOLT_MIN'" :minValue="-5" :maxValue="5" @parameterChange="deviceParameterChange($event)" />
-        </va-tree-node>
-      </va-tree-category>
+      <div v-show="[7].includes(workingModeSelect.id)">
+        <p style="font-size: 20px;">E2 ( {{ (voltMinNumber - 25000 ) / 5000 }} V )</p>
+        <volt-range
+          :ref="'voltMinNumber'"
+          :deviceID="deviceID"
+          :parameterName="'VOLT_MIN'"
+          :minValue="-5"
+          :maxValue="5"
+          @parameterChange="deviceParameterChange($event)"
+        />
+      </div>
 
-      <va-tree-category
-        v-if="workingModeSelect != null && workingModeSelect.id == 8"
-        style="font-size: 20px;"
-        :label="'E-Final ( ' + voltEFinalNumber/1000 + 'V )'">
-        <va-tree-node>
-          <volt-range :ref="'voltEFinalNumber'" :deviceID="deviceID" :parameterName="'VOLT_EFINAL'" :minValue="-5" :maxValue="5" @parameterChange="deviceParameterChange($event)" />
-        </va-tree-node>
-      </va-tree-category>
+      <div v-show="[8].includes(workingModeSelect.id)">
+        <p style="font-size: 20px;">E-Final ( {{ (voltEFinalNumber - 25000 ) / 5000 }} V )</p>
+        <volt-range
+          :ref="'voltEFinalNumber'"
+          :deviceID="deviceID"
+          :parameterName="'VOLT_EFINAL'"
+          :minValue="-5"
+          :maxValue="5"
+          @parameterChange="deviceParameterChange($event)"
+        />
+      </div>
 
-      <va-tree-category
-        v-if="workingModeSelect != null && workingModeSelect.id == 9"
-        style="font-size: 20px;"
-        :label="'VScan ( ' + voltVScanNumber/1000 + 'V )'">
-        <va-tree-node>
-          <volt-range :ref="'voltVScanNumber'" :deviceID="deviceID" :parameterName="'VOLT_VSCAN'" :minValue="-5" :maxValue="5" @parameterChange="deviceParameterChange($event)" />
-        </va-tree-node>
-      </va-tree-category>
+      <div v-show="[9].includes(workingModeSelect.id)">
+        <p style="font-size: 20px;">VScan ( {{ voltVScanNumber / 1000 }} V )</p>
+        <volt-range
+          :ref="'voltVScanNumber'"
+          :deviceID="deviceID"
+          :parameterName="'VOLT_VSCAN'"
+          :minValue="-5"
+          :maxValue="5"
+          @parameterChange="deviceParameterChange($event)"
+        />
+      </div>
 
-      <va-tree-category
-        v-if="workingModeSelect != null && workingModeSelect.id == 7 || workingModeSelect.id == 8"
-        style="font-size: 20px;"
-        :label="'ScanRate ( ' + voltScanRateNumber/100 + 'mV/s )'">
-        <va-tree-node>
-          <scan-rate-range :ref="'voltScanRateNumber'" :deviceID="deviceID" :parameterName="'Scan_Rate'" :minValue="0.01" :maxValue="1000" @parameterChange="deviceParameterChange($event)" />
-        </va-tree-node>
-      </va-tree-category>
+      <div v-show="[7,8].includes(workingModeSelect.id)">
+        <p style="font-size: 20px;">ScanRate ( {{ voltScanRateNumber/100 }} mV/s )</p>
+        <scan-rate-range
+          :ref="'voltScanRateNumber'"
+          :deviceID="deviceID"
+          :parameterName="'Scan_Rate'"
+          :minValue="0.01"
+          :maxValue="1000"
+          @parameterChange="deviceParameterChange($event)"
+        />
+      </div>
 
-      <va-tree-category
-        v-if="workingModeSelect != null && workingModeSelect.id == 7 || workingModeSelect.id == 8 || workingModeSelect.id == 9"
-        style="font-size: 20px;"
-        :label="'Resolution ( ' + sampleRateNumber/10 + 'sps )'">
-        <va-tree-node>
-          <resolution-range :ref="'sampleRateNumber'" :deviceID="deviceID" :parameterName="'SAMPLE_RATE'" :minValue="0.1" :maxValue="100" @parameterChange="deviceParameterChange($event)" />
-        </va-tree-node>
-      </va-tree-category>
+      <div v-show="[7, 8].includes(workingModeSelect.id)">
+        <p style="font-size: 20px;">Resolution ( {{ sampleRateNumber/10 }} sps )</p>
+        <resolution-range
+          :ref="'sampleRateNumber'"
+          :deviceID="deviceID"
+          :parameterName="'SAMPLE_RATE'"
+          :minValue="0.1"
+          :maxValue="100"
+          @parameterChange="deviceParameterChange($event)"
+        />
+      </div>
 
-      <va-tree-category
-        v-if="workingModeSelect != null && workingModeSelect.id == 1 || workingModeSelect.id == 7"
-        style="font-size: 20px;"
-        :label="'Cycle ( ' + cycleNoNumber + ' )'">
-        <va-tree-node>
-          <cycle-range :ref="'cycleNoNumber'" :deviceID="deviceID" :parameterName="'CYCLE_NUMBER'" :minValue="1" :maxValue="50000" @parameterChange="deviceParameterChange($event)" />
-        </va-tree-node>
-      </va-tree-category>
+      <div v-show="[1, 7].includes(workingModeSelect.id)">
+        <p style="font-size: 20px;">Cycle ( {{ cycleNoNumber }} )</p>
+        <cycle-range
+          :ref="'cycleNoNumber'"
+          :deviceID="deviceID"
+          :parameterName="'CYCLE_NUMBER'"
+          :minValue="1"
+          :maxValue="50000"
+          @parameterChange="deviceParameterChange($event)"
+        />
+      </div>
 
       <!-- <va-tree-category
         v-if="workingModeSelect != null && workingModeSelect.id == 13"
@@ -391,6 +453,7 @@ export default {
   },
   data () {
     return {
+      incomingData: undefined,
       workingModeSelect: {
         id: -1,
         description: 'Init',
@@ -436,14 +499,14 @@ export default {
           id: 9,
           description: 'Chronoamperometric Graph',
         },
-        {
-          id: 10,
-          description: 'Cali DAC - test',
-        },
-        {
-          id: 11,
-          description: 'Cali ADC - test',
-        },
+        // {
+        //   id: 10,
+        //   description: 'Cali DAC - test',
+        // },
+        // {
+        //   id: 11,
+        //   description: 'Cali ADC - test',
+        // },
         // {
         //   id: 12,
         //   description: 'Dev Mode',
@@ -578,7 +641,7 @@ export default {
         read: '',
         notify: '',
       },
-      duration: 0,
+      duration: null,
       timeUnit: null,
       timeOptions: [
         {
@@ -598,30 +661,110 @@ export default {
           label: 'ms',
         },
       ],
+
+      emitFlag: true,
+      paramTransTable: {
+        // MODE: 'workingModeSelect',
+        ADC_LEVEL_I_15: 'currentRangeSelect',
+        ADC_LEVEL_V_IN_15: 'voltageInRangeSelect',
+        CTRL_HIGH_Z_15: 'highzSelect',
+        ADC_DAC_CHANNEL_15: 'caliChannelSelect',
+        DAC_VOLT: ['outputVoltNumber', 'caliVoltNumber'],
+        // DAC_VOLT: [-1].includes(mode) ? ['outputVoltNumber', 'caliVoltNumber'] : [2, 3, 5].includes(mode) ? 'outputVoltNumber' : [10].includes(mode) ? 'caliVoltNumber' : undefined,
+        VOLT_ORIGIN: 'startVoltNumber',
+        VOLT_FINAL: 'stopVoltNumber',
+        VOLT_STEP: 'stepVoltNumber',
+        STEP_TIME: 'stepTimeSelect',
+        SAMPLE_RATE: 'sampleRateNumber',
+        Charge: 'chargeSelect',
+        Const_Current_value: 'currentNumber',
+        VOLTSTOP_MAX: 'stopVoltMaxNumber',
+        VOLTSTOP_MIN: 'stopVoltMinNumber',
+        VOLT_INITIAL: 'voltInitialNumber',
+        VOLT_MAX: 'voltMaxNumber',
+        VOLT_MIN: 'voltMinNumber',
+        VOLT_EFINAL: 'voltEFinalNumber',
+        VOLT_VSCAN: 'voltVScanNumber',
+        Scan_Rate: 'voltScanRateNumber',
+        CYCLE_NUMBER: 'cycleNoNumber',
+      },
+      paramDefaultTable: {
+        // MODE: -1,
+        ADC_LEVEL_I_15: 4,
+        ADC_LEVEL_V_IN_15: 3,
+        CTRL_HIGH_Z_15: 1,
+        ADC_DAC_CHANNEL_15: 0,
+        DAC_VOLT: 25000,
+        VOLT_ORIGIN: 25000,
+        VOLT_FINAL: 25000,
+        VOLT_STEP: 1000,
+        STEP_TIME: 1,
+        SAMPLE_RATE: 1000,
+        Charge: 1,
+        Const_Current_value: 0,
+        VOLTSTOP_MAX: 50000,
+        VOLTSTOP_MIN: 0,
+        VOLT_INITIAL: 25000,
+        VOLT_MAX: 27500,
+        VOLT_MIN: 22500,
+        VOLT_EFINAL: 25000,
+        VOLT_VSCAN: 25000,
+        Scan_Rate: 10000,
+        CYCLE_NUMBER: 1,
+      },
     }
   },
   mqtt: {
   },
   methods: {
+    updateSetting: function () {
+      const data = this.incomingData
+      // update everything first
+      this.emitFlag = false
+      const paramTable = this.paramTransTable
+      for (const param in paramTable) {
+        const value = (data && data[param]) || this.paramDefaultTable[param]
+        // console.log(param, paramTable[param], value)
+
+        if (Array.isArray(paramTable[param]) === true) {
+          for (const paramName of paramTable[param]) {
+            this[paramName] = value
+            this.$refs[paramName] && this.$refs[paramName].update(value)
+          }
+        } else {
+          this[paramTable[param]] = value
+          this.$refs[paramTable[param]] && this.$refs[paramTable[param]].update(value)
+          // console.log(paramTable[param], this[paramTable[param]])
+        }
+      }
+      this.emitFlag = true
+    },
     mqttPub: function (topic, mes) {
       this.$mqtt.publish(topic, mes)
     },
     // Array[String of Parameter Nmae, Value]
     deviceParameterChange: function (e) {
-      console.log('e[0],e[1]', e[0], ',', e[1])
-      this.$emit('parameterChange', e)
+      const param = e[0]
+      const value = e[1]
+      // console.log('e[0],e[1]', e[0], ',', e[1])
+      if (this.emitFlag === true) {
+        this[this.paramTransTable[param]] = value
+        this.$emit('parameterChange', e)
+      }
     },
     workingModeSelectChange (val) {
-      if (this.workingModeSelect.id === -1) {
-        return false
+      if (typeof val === 'object') {
+        this.workingModeSelect = val
+      } else if (typeof val === 'number') {
+        this.workingModeSelect = this.workingModeOptions[val]
       }
 
-      this.workingModeSelect = val
-
+      this.updateSetting()
       this.deviceParameterChange(['MODE', this.workingModeSelect.id])
     },
   },
   mounted () {
+    // this.updateSetting()
   },
   watch: {
   },

src/components/project/task/config/parameter/EliteParameterWindow.vue

@@ -99,7 +99,14 @@ export default {
   },
   mounted () {
     // init grab new
-    console.log('getParameter', this.getParameterSetTask(this.deviceSelectKey))
+    // console.log('getParameter', this.getParameterSetTask(this.taskSelectKey, this.deviceSelectKey))
+    const parameterSet = this.getParameterSetTask(this.taskSelectKey, this.deviceSelectKey)
+    if (parameterSet) {
+      this.parameterUUID = Object.keys(parameterSet)[0]
+      const param = Object.values(parameterSet)[0]
+      this.$refs.rec_ref_2.incomingData = param
+      this.$refs.rec_ref_2.workingModeSelectChange(param.MODE)
+    }
   },
 }
 </script>

src/components/project/task/config/parameter/item/CycleRange.vue

@@ -2,27 +2,27 @@
   <div class="row">
     <div class="flex sm12 xl12 md12 xs12">
       <div class="flex row align--center" :key="inputeKey">
-        <va-button slot="append" class="mr-2 pa-1 shrink" small @click="cycleNumberChange(minValue)">
+        <va-button slot="append" class="mr-2 pa-1 shrink" small @click="change(minValue)">
           {{ minValue }}
         </va-button>
         <va-input
-          @mouseleave.native="cycleNumberChange(cycleNoNumberInput)"
-          @keyup.enter="cycleNumberChange(cycleNoNumberInput)"
-          @blur="cycleNumberChange(cycleNoNumberInput)"
+          @mouseleave.native="change(cycleNoNumberInput)"
+          @keyup.enter="change(cycleNoNumberInput)"
+          @blur="change(cycleNoNumberInput)"
           v-model="cycleNoNumberInput"
           class="mb-0"
           style="width: 100px;"
         >
         </va-input>
-        <va-button slot="append" class="ml-2 pa-1 shrink" small @click="cycleNumberChange(maxValue)">
+        <va-button slot="append" class="ml-2 pa-1 shrink" small @click="change(maxValue)">
           {{ maxValue }}
         </va-button>
       </div>
       <va-slider
-        @mouseup.native="cycleNumberChange(cycleNoNumber)"
-        @mouseleave.native="cycleNumberChange(cycleNoNumber)"
-        @touchend.native="cycleNumberChange(cycleNoNumber)"
-        @click.native="cycleNumberChange(cycleNoNumber)"
+        @mouseup.native="change(cycleNoNumber)"
+        @mouseleave.native="change(cycleNoNumber)"
+        @touchend.native="change(cycleNoNumber)"
+        @click.native="change(cycleNoNumber)"
         class="flex sm12 xl12 md12 xs12"
         v-model="cycleNoNumber"
         :min="minValue"
@@ -71,7 +71,7 @@ export default {
   mqtt: {
   },
   methods: {
-    cycleNumberChange (val) {
+    change (val) {
       this.inputeKey++
       if (this.cycleNoNumber == null) {
         return false
@@ -87,8 +87,8 @@ export default {
       }
       this.$emit('parameterChange', [this.parameterName, this.cycleNoNumber])
     },
-    updateCycleNumber (val) {
-      this.cycleNumberChange(val)
+    update (val) {
+      this.change(val)
     },
   },
   async mounted () {

src/components/project/task/config/parameter/item/LevelButton.vue

@@ -2,7 +2,7 @@
   <div class="row">
     <div class="flex sm12 xl12 md12 xs12">
       <va-button-toggle
-        @click.native="levelButtonSelectChange(levelButtonSelect)"
+        @click.native="change(levelButtonSelect)"
         small
         outline
         v-model="levelButtonSelect"
@@ -45,7 +45,7 @@ export default {
   mqtt: {
   },
   methods: {
-    levelButtonSelectChange (val) {
+    change (val) {
       if (this.levelButtonSelect == null) {
         return false
       }
@@ -54,8 +54,8 @@ export default {
 
       this.$emit('parameterChange', [this.parameterName, this.levelButtonSelect])
     },
-    updateLevelButton (val) {
-      this.levelButtonSelectChange(val)
+    update (val) {
+      this.change(val)
     },
   },
   async mounted () {

src/components/project/task/config/parameter/item/MicroAmpereRange.vue

@@ -2,13 +2,13 @@
   <div class="row">
     <div class="flex sm12 xl12 md12 xs12">
       <div class="flex row align--center" :key="inputeKey">
-        <va-button slot="append" class="mr-2 pa-1 shrink" small @click="currentNumberChange(minValue*100)">
+        <va-button slot="append" class="mr-2 pa-1 shrink" small @click="change(minValue*100)">
           {{ minValue }}
         </va-button>
         <va-input
-          @mouseleave.native="currentNumberChange(currentNumberInput)"
-          @keyup.enter="currentNumberChange(currentNumberInput)"
-          @blur="currentNumberChange(currentNumberInput)"
+          @mouseleave.native="change(currentNumberInput)"
+          @keyup.enter="change(currentNumberInput)"
+          @blur="change(currentNumberInput)"
           v-model="currentNumberInput"
           class="mb-0"
           style="width: 100px;"
@@ -17,15 +17,15 @@
             μA
           </p>
         </va-input>
-        <va-button slot="append" class="ml-2 pa-1 shrink" small @click="currentNumberChange(maxValue*100)">
+        <va-button slot="append" class="ml-2 pa-1 shrink" small @click="change(maxValue*100)">
           {{ maxValue }}
         </va-button>
       </div>
       <va-slider
-        @mouseup.native="currentNumberChange(currentNumber)"
-        @mouseleave.native="currentNumberChange(currentNumber)"
-        @touchend.native="currentNumberChange(currentNumber)"
-        @click.native="currentNumberChange(currentNumber)"
+        @mouseup.native="change(currentNumber)"
+        @mouseleave.native="change(currentNumber)"
+        @touchend.native="change(currentNumber)"
+        @click.native="change(currentNumber)"
         class="flex sm12 xl12 md12 xs12"
         v-model="currentNumber"
         :min="minValue*100"
@@ -74,7 +74,7 @@ export default {
   mqtt: {
   },
   methods: {
-    currentNumberChange (val) {
+    change (val) {
       this.inputeKey++
       if (this.currentNumber == null) {
         return false
@@ -102,8 +102,8 @@ export default {
       }
       this.$emit('parameterChange', [this.parameterName, this.currentNumber])
     },
-    updateMicroAmpereNumber (val) {
-      this.currentNumberChange(val)
+    update (val) {
+      this.change(val)
     },
   },
   async mounted () {

src/components/project/task/config/parameter/item/MilliVoltRange.vue

@@ -2,13 +2,13 @@
   <div class="row">
     <div class="flex sm12 xl12 md12 xs12">
       <div class="flex row align--center" :key="inputeKey">
-        <va-button slot="append" class="mr-2 pa-1 shrink" small @click="stepVoltNumberChange(minValue*10)">
+        <va-button slot="append" class="mr-2 pa-1 shrink" small @click="change(minValue*10)">
           {{ minValue }}
         </va-button>
         <va-input
-          @mouseleave.native="stepVoltNumberChange(voltNumberInput)"
-          @keyup.enter="stepVoltNumberChange(voltNumberInput)"
-          @blur="stepVoltNumberChange(voltNumberInput)"
+          @mouseleave.native="change(voltNumberInput)"
+          @keyup.enter="change(voltNumberInput)"
+          @blur="change(voltNumberInput)"
           v-model="voltNumberInput"
           class="mb-0"
           style="width: 100px;"
@@ -17,15 +17,15 @@
             mV
           </p>
         </va-input>
-        <va-button slot="append" class="ml-2 pa-1 shrink" small @click="stepVoltNumberChange(maxValue*10)">
+        <va-button slot="append" class="ml-2 pa-1 shrink" small @click="change(maxValue*10)">
           {{ maxValue }}
         </va-button>
       </div>
       <va-slider
-        @mouseup.native="stepVoltNumberChange(voltNumber)"
-        @mouseleave.native="stepVoltNumberChange(voltNumber)"
-        @touchend.native="stepVoltNumberChange(voltNumber)"
-        @click.native="stepVoltNumberChange(voltNumber)"
+        @mouseup.native="change(voltNumber)"
+        @mouseleave.native="change(voltNumber)"
+        @touchend.native="change(voltNumber)"
+        @click.native="change(voltNumber)"
         class="flex sm12 xl12 md12 xs12"
         v-model="voltNumber"
         :min="minValue*10"
@@ -74,7 +74,7 @@ export default {
   mqtt: {
   },
   methods: {
-    stepVoltNumberChange (val) {
+    change (val) {
       this.inputeKey++
       if (this.voltNumber == null) {
         return false
@@ -112,8 +112,8 @@ export default {
 
       this.$emit('parameterChange', [this.parameterName, this.voltNumber])
     },
-    updateStepVoltNumber (val) {
-      this.stepVoltNumberChange(val)
+    update (val) {
+      this.change(val)
     },
   },
   async mounted () {

src/components/project/task/config/parameter/item/OppLevelButton.vue

@@ -2,7 +2,7 @@
   <div class="row">
     <div class="flex sm12 xl12 md12 xs12">
       <va-button-toggle
-        @click.native="levelButtonSelectChange(levelButtonSelect)"
+        @click.native="change(levelButtonSelect)"
         small
         outline
         v-model="levelButtonSelect"
@@ -45,7 +45,7 @@ export default {
   mqtt: {
   },
   methods: {
-    levelButtonSelectChange (val) {
+    change (val) {
       if (this.levelButtonSelect == null) {
         return false
       }
@@ -61,8 +61,8 @@ export default {
 
       this.$emit('parameterChange', [this.parameterName, _charge])
     },
-    updateLevelButton (val) {
-      this.levelButtonSelectChange(val)
+    update (val) {
+      this.change(val)
     },
   },
   async mounted () {

src/components/project/task/config/parameter/item/ResolutionRange.vue

@@ -2,13 +2,13 @@
   <div class="row">
     <div class="flex sm12 xl12 md12 xs12">
       <div class="flex row align--center" :key="inputeKey">
-        <va-button slot="append" class="mr-2 pa-1 shrink" small @click="resolutionNumberChange(minValue*10)">
+        <va-button slot="append" class="mr-2 pa-1 shrink" small @click="change(minValue*10)">
           {{ minValue }}
         </va-button>
         <va-input
-          @mouseleave.native="resolutionNumberChange(resolutionNumberInput)"
-          @keyup.enter="resolutionNumberChange(resolutionNumberInput)"
-          @blur="resolutionNumberChange(resolutionNumberInput)"
+          @mouseleave.native="change(resolutionNumberInput)"
+          @keyup.enter="change(resolutionNumberInput)"
+          @blur="change(resolutionNumberInput)"
           v-model="resolutionNumberInput"
           class="mb-0"
           style="width: 100px;"
@@ -17,15 +17,15 @@
             sps
           </p>
         </va-input>
-        <va-button slot="append" class="ml-2 pa-1 shrink" small @click="resolutionNumberChange(maxValue*10)">
+        <va-button slot="append" class="ml-2 pa-1 shrink" small @click="change(maxValue*10)">
           {{ maxValue }}
         </va-button>
       </div>
       <va-slider
-        @mouseup.native="resolutionNumberChange(resolutionNumber)"
-        @mouseleave.native="resolutionNumberChange(resolutionNumber)"
-        @touchend.native="resolutionNumberChange(resolutionNumber)"
-        @click.native="resolutionNumberChange(resolutionNumber)"
+        @mouseup.native="change(resolutionNumber)"
+        @mouseleave.native="change(resolutionNumber)"
+        @touchend.native="change(resolutionNumber)"
+        @click.native="change(resolutionNumber)"
         class="flex sm12 xl12 md12 xs12"
         v-model="resolutionNumber"
         :min="minValue*10"
@@ -51,7 +51,7 @@ export default {
     },
     defaultValue: {
       type: Number,
-      default: 2,
+      default: 1000,
     },
     minValue: {
       type: Number,
@@ -68,13 +68,13 @@ export default {
     return {
       inputeKey: 0,
       resolutionNumber: this.defaultValue,
-      resolutionNumberInput: String(this.defaultValue),
+      resolutionNumberInput: String(this.defaultValue / 10),
     }
   },
   mqtt: {
   },
   methods: {
-    resolutionNumberChange (val) {
+    change (val) {
       this.inputeKey++
       if (this.resolutionNumber == null) {
         return false
@@ -103,8 +103,8 @@ export default {
 
       this.$emit('parameterChange', [this.parameterName, this.resolutionNumber])
     },
-    updateResolutionNumber (val) {
-      this.resolutionNumberChange(val)
+    update (val) {
+      this.change(val)
     },
   },
   async mounted () {

src/components/project/task/config/parameter/item/ScanRateRange.vue

@@ -2,13 +2,13 @@
   <div class="row">
     <div class="flex sm12 xl12 md12 xs12">
       <div class="flex row align--center" :key="inputeKey">
-        <va-button slot="append" class="mr-2 pa-1 shrink" small @click="voltScanRateNumberChange(minValue*100)">
+        <va-button slot="append" class="mr-2 pa-1 shrink" small @click="change(minValue*100)">
           {{ minValue }}
         </va-button>
         <va-input
-          @mouseleave.native="voltScanRateNumberChange(voltScanRateNumberInput)"
-          @keyup.enter="voltScanRateNumberChange(voltScanRateNumberInput)"
-          @blur="voltScanRateNumberChange(voltScanRateNumberInput)"
+          @mouseleave.native="change(voltScanRateNumberInput)"
+          @keyup.enter="change(voltScanRateNumberInput)"
+          @blur="change(voltScanRateNumberInput)"
           v-model="voltScanRateNumberInput"
           class="mb-0"
           style="width: 100px;"
@@ -17,15 +17,15 @@
             mV
           </p>
         </va-input>
-        <va-button slot="append" class="ml-2 pa-1 shrink" small @click="voltScanRateNumberChange(maxValue*100)">
+        <va-button slot="append" class="ml-2 pa-1 shrink" small @click="change(maxValue*100)">
           {{ maxValue }}
         </va-button>
       </div>
       <va-slider
-        @mouseup.native="voltScanRateNumberChange(voltScanRateNumber)"
-        @mouseleave.native="voltScanRateNumberChange(voltScanRateNumber)"
-        @touchend.native="voltScanRateNumberChange(voltScanRateNumber)"
-        @click.native="voltScanRateNumberChange(voltScanRateNumber)"
+        @mouseup.native="change(voltScanRateNumber)"
+        @mouseleave.native="change(voltScanRateNumber)"
+        @touchend.native="change(voltScanRateNumber)"
+        @click.native="change(voltScanRateNumber)"
         class="flex sm12 xl12 md12 xs12"
         v-model="voltScanRateNumber"
         :min="minValue*100"
@@ -74,7 +74,7 @@ export default {
   mqtt: {
   },
   methods: {
-    voltScanRateNumberChange (val) {
+    change (val) {
       this.inputeKey++
       if (this.voltScanRateNumber == null) {
         return false
@@ -103,8 +103,8 @@ export default {
 
       this.$emit('parameterChange', [this.parameterName, this.voltScanRateNumber])
     },
-    updateVoltScanRateNumber (val) {
-      this.voltScanRateNumberChange(val)
+    update (val) {
+      this.change(val)
     },
   },
   async mounted () {

src/components/project/task/config/parameter/item/VoltRange.vue

@@ -2,13 +2,13 @@
   <div class="row">
     <div class="flex sm12 xl12 md12 xs12">
       <div class="flex row align--center" :key="inputeKey">
-        <va-button slot="append" class="mr-2 pa-1 shrink" small @click="voltNumberChange(minValue*1000)">
+        <va-button slot="append" class="mr-2 pa-1 shrink" small @click="change(minValue*1000)">
           {{ minValue }}
         </va-button>
         <va-input
-          @mouseleave.native="voltNumberChange(voltNumberInput)"
-          @keyup.enter="voltNumberChange(voltNumberInput)"
-          @blur="voltNumberChange(voltNumberInput)"
+          @mouseleave.native="change(voltNumberInput)"
+          @keyup.enter="change(voltNumberInput)"
+          @blur="change(voltNumberInput)"
           v-model="voltNumberInput"
           class="mb-0"
           style="width: 100px;"
@@ -17,15 +17,15 @@
             V
           </p>
         </va-input>
-        <va-button slot="append" class="ml-2 pa-1 shrink" small @click="voltNumberChange(maxValue*1000)">
+        <va-button slot="append" class="ml-2 pa-1 shrink" small @click="change(maxValue*1000)">
           {{ maxValue }}
         </va-button>
       </div>
       <va-slider
-        @mouseup.native="voltNumberChange(voltNumber)"
-        @mouseleave.native="voltNumberChange(voltNumber)"
-        @touchend.native="voltNumberChange(voltNumber)"
-        @click.native="voltNumberChange(voltNumber)"
+        @mouseup.native="change(voltNumber)"
+        @mouseleave.native="change(voltNumber)"
+        @touchend.native="change(voltNumber)"
+        @click.native="change(voltNumber)"
         class="flex sm12 xl12 md12 xs12"
         v-model="voltNumber"
         :min="minValue*1000"
@@ -74,7 +74,7 @@ export default {
   mqtt: {
   },
   methods: {
-    voltNumberChange (val) {
+    change (val) {
       this.inputeKey++
       if (this.voltNumber == null) {
         return false
@@ -104,8 +104,8 @@ export default {
 
       this.$emit('parameterChange', [this.parameterName, this.voltNumber * 5 + 25000])
     },
-    updateVoltNumber (val) {
-      this.voltNumberChange(val)
+    update (val) {
+      this.change(val)
     },
   },
   async mounted () {

src/components/project/view/ProjectView.vue

@@ -1,19 +1,26 @@
 <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>
       </template>
+      <!-- <pre>
+        {{ getSelectProject ? getSelectProject: '' }}
+      </pre> -->
       <div v-if="getSelectProject === undefined">
         <span>please select project</span>
       </div>
       <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>
@@ -22,7 +29,7 @@
 import ProjectMenu from '@/components/project/view/menu/ProjectMenu'
 import ProjectTable from '@/components/project/view/table/ProjectTable'
 import { mapFields } from 'vuex-map-fields'
-import { mapGetters } from 'vuex'
+import { mapGetters, mapActions } from 'vuex'
 import types from '@/store/modules/project/types'
 
 export default {
@@ -36,7 +43,9 @@ export default {
       types.project.getSelect,
     ]),
     ...mapFields('project', [
+      'lockMode',
       'projectList',
+      'deviceConnectList',
       'projectSelectIndex',
     ]),
   },
@@ -46,9 +55,42 @@ 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)
+    },
+    ...mapActions('project',
+      [
+        types.project.update,
+        types.project.addDevice,
+      ],
+    ),
+  },
+  watch: {
+    projectSelectIndex: {
+      handler: async function () {
+        for (const device of this.deviceConnectList) {
+          var newDevice = {
+            uuid: this.GLOBAL.getUUID(),
+            name: device.mac_address,
+            product: device.device_name,
+            library: device.library_name,
+            connectDevice: device,
+            isSelect: [],
+          }
+          await this.addDeviceProject({ device: newDevice })
+        }
+      },
+    },
+  },
+  async mounted  () {
+    // console.log('mounted')
+    // console.log(this.deviceConnectList)
+    // console.log(this.deviceConnectList.length)
   },
 }
 </script>

src/components/project/view/menu/components/DeviceModal.vue

@@ -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
       }
     },
 

src/components/project/view/menu/components/ProjectDevice.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="row">
     <div class="flex d-flex">
-      <div v-for="(device, index) in getSelectProject.deviceList" :key="index">
+      <div v-for="(device, index) in getSelectProject.device" :key="index">
         <va-button color="info" @click="showDeviceModal(device)" small>
           <va-icon name="fa fa-close" @click.native.stop="deleteDevice(index)"></va-icon>
           {{ device.name }} {{ device.connectDevice && device.connectDevice.device_address }}
@@ -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>

src/components/project/view/table/ProjectTable.vue

@@ -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.taskList">
-            <tr v-if="task.deviceList.length === 0" :key="taskIndex">
-              <td>
-                <va-checkbox v-model="temp"/>
+          <template v-for="(task, taskIndex) in getSelectProject.task">
+            <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 }}
@@ -29,76 +36,111 @@
                 {{ task.name }}
               </td>
               <td align="center">
-                <va-button :flat="true" @click="openConfig(1, taskIndex)" small>Device</va-button>
+                <va-button :flat="true" @click="openConfig(1, taskIndex)" small>Add device</va-button>
               </td>
               <td align="center">
                 <va-button :flat="true" @click="openConfig(3, taskIndex)" small>Add event</va-button>
               </td>
               <td align="center">
-                <va-button :flat="true" @click="openConfig(4, taskIndex)" small>ParameterSet</va-button>
+                <va-button :flat="true" @click="openConfig(4, taskIndex)" small>Add parameter</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>
-              <td align="center">
-                <div >
-                  <span>{{ getDeviceProject(deviceUUID).name }} </span>
+              <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 class="flex-center">
-                  <va-icon class="fa fa-edit" @click.native="openConfig(1, taskIndex, deviceUUID)"></va-icon>
+                <div v-else>
+                  {{ task.name }}
                 </div>
               </td>
+              <!-- device -->
               <td align="center">
-                <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">
+                <div v-if="task.device.length === 0">
+                  <va-button :flat="true" @click="openConfig(1, taskIndex, deviceUUID)" small>
+                    Add device
+                  </va-button>
+                </div>
+                <div v-else>
+                  <va-button :flat="true" @click="openConfig(1, taskIndex, deviceUUID)" small>
+                    <span>{{ getDeviceProject(deviceUUID) && getDeviceProject(deviceUUID).name }}</span>
+                  </va-button>
+                </div>
+              </td>
+              <!-- device end -->
+              <!-- action -->
+              <td align="center">
+                <div v-if="Object.keys(task.action).length === 0">
+                  <va-button :flat="true" @click="openConfig(3, taskIndex, deviceUUID)" small>
+                    Add event
+                  </va-button>
+                </div>
+                <div v-else 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">
+                        <div small>
                           {{ action.type }} {{ task.condition[conditionKey].type }} {{ task.condition[conditionKey].value }}
+                          <va-icon class="fa fa-close" @click.native="delAction(action, conditionKey)"/>
                         </div>
+                        <va-button :flat="true" @click="openConfig(3, taskIndex, deviceUUID)" small>
+                          + New Action/Condition
+                        </va-button>
                       </div>
                     </div>
                   </div>
-                  <div class="flex-center">
-                    <va-icon class="fa fa-edit" @click.native="openConfig(3, taskIndex, deviceUUID)"></va-icon>
-                  </div>
                 </div>
               </td>
-              <td align="center" style="max-height: 50px; overflow: auto;">
-                <div class="flex d-flex">
-                  <div class="flex">
+              <!-- action end -->
+              <td align="center">
+                <div v-if="Object.keys(task.parameter_set).length === 0">
+                  <va-button :flat="true" @click="openConfig(4, taskIndex, deviceUUID)" small>
+                    Add parameter
+                  </va-button>
+                </div>
+                <va-button :flat="true" @click="openConfig(4, taskIndex, deviceUUID)" v-else class="flex d-flex">
+                  <div class="flex" small>
                     <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'">{{ parameterKey }}: {{ parameter }}</span>
+                        <span v-if="parameterKey !== 'target'">
+                          <div small>
+                            {{ parameterName(parameterKey) }} : {{ parameterValue(parameterKey, parameter) }}
+                          </div>
+                        </span>
                       </div>
                     </div>
                   </div>
-                  <div class="flex-center">
-                    <va-icon class="fa fa-edit" @click.native="openConfig(4, taskIndex, deviceUUID)"></va-icon>
-                  </div>
-                </div>
+                </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" 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,12 +153,19 @@
 import { mapFields } from 'vuex-map-fields'
 import { mapActions, mapGetters } from 'vuex'
 import types from '@/store/modules/project/types'
+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,
@@ -129,26 +178,84 @@ export default {
       'taskViewPanel',
       'taskSelectKey',
       'deviceSelectKey',
+      'lockMode',
+      'projectLibrary',
     ]),
   },
   data () {
     return {
-      temp: false,
+      tableColumn: {
+        name: -1,
+        checked: [],
+      },
     }
   },
   methods: {
+    delAction: function (action, conditionKey) {
+      // console.log(action.condition)
+      console.log(action.condition)
+      // console.log(conditionKey)
+      // console.log(action.condition[0])
+      // console.log(action.condition.length)
+      for (let i = 0; i < action.condition.length; i++) {
+        if (String(action.condition[i]) === String(conditionKey)) {
+          delete action.condition[i]
+          break
+        }
+      }
+      console.log(action.condition)
+      // delete action.condition[0]
+    },
+    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.taskViewPanel.show === true) {
+          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', [
@@ -162,12 +269,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>

src/components/setting/controllerInfo.vue

@@ -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: {

src/components/setting/deviceInfo.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="device-info">
+    456465
     <div class="row flex">
       <div class="flex-wrap-setting sm12 xl12 md12 xs12">
         <!-- <draggable class="flex d-flex sm12 xl12 md12 xs12" v-model="devicesList" @start="drag=true" @end="drag=false" > -->

src/components/task/content/TaskContent.vue

@@ -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,12 +115,20 @@ export default {
   name: 'TaskContent',
   components: {
     CanvasChart,
-    TaskDevices,
-    // TaskFormula,
+    // TaskDevices,
+    TaskDevicesNew,
+    TaskFormula,
   },
   computed: {
     ...mapFields('taskContent', [
       'deviceList',
+      'chartData',
+      'taskContentChartPanelKey',
+      'taskContentChartNumber',
+      'deviceListNew',
+    ]),
+    ...mapFields('', [
+      'developerMode',
     ]),
   },
   data () {
@@ -125,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'],
@@ -138,79 +147,67 @@ export default {
   },
   mqtt: {
     async '+/get_device_info_all/+' (data, topic) {
-      await taskInfo.deviceInfo(String.fromCharCode.apply(null, data), this.deviceList)
-      this.refreshDevicesWindow()
+      // 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.getParmDone = true
-      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))
@@ -232,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':
@@ -262,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.')
@@ -289,7 +301,6 @@ export default {
         default:
           break
       }
-      //  console.log(String.fromCharCode.apply(null, data), topic)
     },
   },
   methods: {
@@ -327,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: 'hardware_device/0',
+        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(
@@ -353,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 (this.chartData[chart].captured !== true) {
+          this.taskContentChartRefreshData({
+            chartID: chart,
+            deviceList: this.deviceListNew,
+          })
+        }
       }
     },
     refreshDevicesWindow: function () {
@@ -363,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) {
@@ -388,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) {
@@ -449,6 +456,9 @@ export default {
           })
         }
       }
+      if (saveCache === true) {
+        await this.taskContentChartSaveToCache({ controllerID: taskInfo.getTaskInfo().controllerID })
+      }
       this.pageToast('The chart has been removed.')
     },
     showDeviceSettingClick: function () {
@@ -463,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()
@@ -479,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)
         }
@@ -503,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()
@@ -515,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)
         }
@@ -524,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 {
@@ -535,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 {
@@ -569,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 () {
@@ -595,30 +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.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)

src/components/task/content/TaskContentGM.vue

@@ -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)

src/components/task/content/chart/CanvasChart.vue

@@ -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,51 @@
               />
             </va-button>
           </div>
+          <div class="flex d-flex xl10">
+            <canvas-chart-real-time-calculation :chartID="chartID" @refreshData="refreshData" @switchModeButton="switchModeButton" @getClicked="getClicked" ref="'cal_ref'" />
+          </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 +70,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 +78,7 @@
           :label="'x-grid'"
         >
           <p slot="append" style="margin-right: 0;" small>
-            {{data.chartXUnit}}
+            {{chartData[chartID].chartXUnit}}
           </p>
         </va-input>
         <va-input
@@ -76,11 +89,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 +105,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 +116,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 +134,12 @@ export default {
     CanvasChartSource,
     CanvasChartFilter,
     CanvasChartFilterPopup,
+    CanvasChartRealTimeDisplay,
+    CanvasChartRealTimeCalculation,
   },
   props: {
     chartID: {
-      type: Number,
+      type: [Number, String],
       required: true,
     },
     cardclass: {
@@ -139,108 +157,141 @@ 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: {
-    timeIntervalChange: function (val) {
-      if (!isNaN(parseInt(val))) {
-        chartData.getAllChartsData()[this.chartID].xAxis.forEach(x => {
-          if (x.type === 'time') {
-            x.interval = val * 1000
-          }
-        })
-      } else {
-        this.timeIntervalInput = 'auto'
-        chartData.getAllChartsData()[this.chartID].xAxis.forEach(x => {
-          if (x.type === 'time') {
-            x.interval = 500 * 1000
-          }
-        })
+    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) {
+      // console.log(e)
+      if (e.batch !== undefined && e.dataZoomId !== '\u0000series\u00002\u00000') {
+        this.dataZoomStart = e.batch[0].start
+        this.dataZoomEnd = e.batch[0].end
+      } else if (e.dataZoomId !== '\u0000series\u00002\u00000') {
+        this.dataZoomStart = e.start
+        this.dataZoomEnd = e.end
       }
     },
-    xIntervalChange: function (val) {
+    timeIntervalChange: function (val) {
       if (!isNaN(parseInt(val))) {
-        chartData.getAllChartsData()[this.chartID].xAxis.forEach(x => {
-          if (x.type === 'value') {
+        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 => {
-          if (x.type === 'value') {
+        this.chartData[this.chartID].xAxis.forEach(x => {
+          if (x.type === 'time') {
             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 +317,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 +352,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 +371,37 @@ 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.data.dataZoom[1].start = this.data.dataZoom[0].start
+      this.data.dataZoom[1].end = this.data.dataZoom[0].end
+      // console.log(this.data.dataZoom)
+      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)

src/components/task/content/chart/CanvasChartFilter.vue

@@ -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])
     },
   },
 }

src/components/task/content/chart/CanvasChartFilterPopup.vue

@@ -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

src/components/task/content/chart/CanvasChartIndividualFilter.vue

@@ -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>

src/components/task/content/chart/CanvasChartRealTimeCalculation.vue

@@ -0,0 +1,444 @@
+<template>
+  <div>
+    <div class="row xs12 sm12 lg10 xl10 pa-2">
+      <!-- <img v-if="!integralClicked && (mode_name==='Chronoamperometric' || mode_name==='I-T Graph' || mode_name==='I-V Curve')" src='@/assets/img/toolbox/integral.svg' @click="clickIntegral"> -->
+      <va-button :flat="true" class="pa-0 ma-0 mr-2" v-if="xlogClicked && (mode_name==='Linear Sweep Voltammetry' || mode_name==='I-V Curve')" color="danger" @click="clickXLog" small>
+        <!-- To Raw Mode -->
+        <img src='@/assets/img/toolbox/LogX_clicked.svg'>
+      </va-button>
+      <va-button :flat="true" class="pa-0 ma-0 mr-2" :disabled="disableLog" v-if="!xlogClicked && (mode_name==='Linear Sweep Voltammetry' || mode_name==='I-V Curve')" color="#ffffff" @click="clickXLog" small>
+        <!-- To log Mode (x-axis) -->
+        <img src='@/assets/img/toolbox/LogX.svg'>
+      </va-button>
+      <va-button :flat="true" class="pa-0 ma-0 mr-2" v-if="ylogClicked && (mode_name==='Linear Sweep Voltammetry' || mode_name==='I-V Curve')" color="danger" @click="clickYLog" small>
+        <!-- To Raw Mode -->
+        <img src='@/assets/img/toolbox/LogY_clicked.svg'>
+      </va-button>
+      <va-button :flat="true" :disabled="disableLog" class="pa-0 ma-0 mr-2" v-if="!ylogClicked && (mode_name==='Linear Sweep Voltammetry' || mode_name==='I-V Curve')" color="#ffffff" @click="clickYLog" small>
+        <!-- To log Mode (y-axis) -->
+        <img src='@/assets/img/toolbox/LogY.svg'>
+      </va-button>
+      <va-button :flat="true" class="pa-0 ma-0 mr-2" v-if="integralClicked && (mode_name==='Chronoamperometric' || mode_name==='I-T Graph' || mode_name==='I-V Curve')" color="danger" @click="clickIntegral" small>
+        <!-- To Raw Mode -->
+        <img src='@/assets/img/toolbox/integral_clicked.svg'>
+      </va-button>
+      <va-button class="pa-0 ma-0 mr-2" :flat="true" :disabled="disableInt" v-if="!integralClicked && (mode_name==='Chronoamperometric' || mode_name==='I-T Graph' || mode_name==='I-V Curve')" color="#ffffff" @click="clickIntegral" small>
+        <!-- To Integral Mode -->
+        <img src='@/assets/img/toolbox/integral.svg'>
+      </va-button>
+      <va-button :flat="true" class="pa-0 ma-0 mr-2" v-if="diffClicked && (mode_name==='Linear Sweep Voltammetry' || mode_name==='I-V Curve')" color="danger" @click="clickDiff" small>
+        <!-- To Raw Mode -->
+        <img src='@/assets/img/toolbox/dx_clicked.svg'>
+      </va-button>
+      <va-button :flat="true" :disabled="disableDiff" class="pa-0 ma-0 mr-2" v-if="!diffClicked && (mode_name==='Linear Sweep Voltammetry' || mode_name==='I-V Curve')" color="#ffffff" @click="clickDiff" small>
+        <!-- To Differential Mode -->
+        <img src='@/assets/img/toolbox/dx.svg'>
+      </va-button>
+      <va-button :flat="true" :disabled="calClicked" class="pa-0 ma-0" color="#ffffff" @click="captureChart" small>
+        <!-- CAPTURE -->
+        <img src='@/assets/img/toolbox/capture.svg'>
+      </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',
+      'taskContentChartPanelKey',
+      '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,
+      calClicked: 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: {
+    captureChart: function () {
+      const newData = Object.assign({}, this.chartData[this.chartID])
+      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'])
+    },
+    getClicked: function (clicked) {
+      this.calClicked = clicked
+    },
+    // 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.getClicked(true)
+        // console.log(this.data.series[0].data[this.data.series[0].data.length - 1])
+      } else {
+        this.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.05 * value.max
+          }
+          return value.max + 0.05 * value.max
+        }
+
+        this.data.yAxis[0].max = (value) => {
+          if (value.max < 0) {
+            return value.max - 0.05 * value.max
+          }
+          return value.max + 0.05 * 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>

src/components/task/content/chart/CanvasChartRealTimeDisplay.vue

@@ -0,0 +1,262 @@
+<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(3) + _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(3) + _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.updateValue()
+        this.matchFormatter()
+      },
+      deep: true,
+    },
+  },
+}
+</script>

src/components/task/content/chart/CanvasChartSetting.vue

@@ -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: {

src/components/task/content/chart/CanvasChartSource.vue

@@ -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>

src/components/task/content/chart/CanvasChartTable.js

@@ -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: 'Resistance',
+        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'
+  },
+}

src/components/task/content/controller/TaskDeviceListNew.vue

@@ -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>

src/components/task/content/controller/TaskDevices.vue

@@ -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,17 +93,9 @@ 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++) {
-        if (taskInfo.getDeviceInfoByRawID(i).info.status === 'connected') {
+      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) {
             await this.addDevice(i)
@@ -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),
@@ -193,6 +172,8 @@ export default {
         }
         // device.stopping = false
         device.isSync = true
+        device.device_status = 1
+        taskInfo.getDeviceInfo(device.id).info.device_status = 1
         this.$emit('refreshSetting')
         // ### show device info
         api.task.update({
@@ -230,6 +211,8 @@ export default {
           }))
         }
         // device.stopping = true
+        device.device_status = 0
+        taskInfo.getDeviceInfo(device.id).info.device_status = 0
       }
     },
     detectDevice: function (device) {
@@ -252,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',
@@ -444,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: {
   },

src/components/task/content/controller/TaskDevicesNew.vue

@@ -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>

src/components/task/content/controller/neulive-gimer/TaskDevicesGM.vue

@@ -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',
@@ -92,7 +91,7 @@ export default {
       this.state.LOADING = false
       //  console.log(this.deviceOptions)
       for (let i = 0; i <= 11; i++) {
-        if (taskInfo.getDeviceInfoByRawID(i).info.status === 'connected') {
+        if (taskInfo.getDeviceInfoByRawID(i).iinfo.device_status >= 0) {
           const index = this.deviceList.findIndex(d => taskInfo.getRawDeviceID(d.id) === i)
           if (index < 0) {
             await this.addDevice(i)
@@ -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: {
   },

src/components/task/content/formula/TaskFormula.vue

@@ -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()

src/components/task/content/meta/FileControlWindow.vue

@@ -12,8 +12,7 @@
     </div>
     <div class="flex sm6 xl6 md6 xs6">
       <va-input
-        @mouseup.native="fileNameChange(fileNameInput)"
-        @mouseleave.native="fileNameChange(fileNameInput)"
+        @blur="fileNameChange(fileNameInput)"
         @touchend.native="fileNameChange(fileNameInput)"
         @keyup.enter="fileNameChange(fileNameInput)"
         v-model="fileNameInput"
@@ -35,8 +34,8 @@ export default {
   components: {
   },
   props: {
-    deviceID: {
-      type: Number,
+    device: {
+      type: Object,
       required: true,
     },
     deviceName: {
@@ -62,122 +61,92 @@ export default {
   },
   methods: {
     fileNameChange: async function (name) {
-      if (this.enableSetting) {
-        if (this.deviceInfo.info.isSync === false) {
-          let fileNameCount = await api.meta.getByName(name)
-          if (fileNameCount.data != null) {
-            let duplicateCount = 1
-            let fileName = name
-            while (fileNameCount.data.length !== 0) {
-              const res = name.split('(')[0]
-              fileName = `${res}(${duplicateCount})`
-              fileNameCount = await api.meta.getByName(fileName)
-              duplicateCount += 1
-            }
-            this.fileNameInput = fileName
+      if (this.device.status === 0) {
+        if (name === '') {
+          name = this.getCurrentTime()
+        }
 
-            if (fileName !== this.deviceInfo.info.recording_file_name) {
-              this.deviceInfo.info.recording_file_name = fileName
-              this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
-                header: 'device_recording_file_name/0',
-                device: taskInfo.getRawDeviceID(this.deviceID),
-                content: fileName,
-              }))
-            }
+        let fileNameCount = await api.meta.getByName(name)
+        if (fileNameCount.status === 200) {
+          let duplicateCount = 1
+          let fileName = name
+          while (fileNameCount.data.length > 0) {
+            const res = name.split('(')[0]
+            fileName = `${res}(${duplicateCount})`
+            fileNameCount = await api.meta.getByName(fileName)
+            duplicateCount += 1
+          }
+          this.fileNameInput = fileName
+          if (fileName !== this.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: this.device.mac_address,
+              content: fileName,
+            }))
           }
         }
       }
     },
     directorySelect: function (directoryInfo) {
-      if (this.enableSetting) {
-        if (typeof directoryInfo === 'object') {
-          if (this.deviceInfo.info.parent.folder === undefined || this.deviceInfo.info.parent.folder.indexOf(directoryInfo.id) === -1) {
-            if (this.deviceInfo.info.isSync === false) {
-              this.deviceInfo.info.parent.folder = []
-              this.deviceInfo.info.parent.folder.push(directoryInfo.id)
-              this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
-                header: 'device_parent/0',
-                device: taskInfo.getRawDeviceID(this.deviceID),
-                content: {
-                  folder: [directoryInfo.id],
-                },
-              }))
-            }
+      if (typeof directoryInfo === 'object') {
+        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: this.device.mac_address,
+              content: {
+                folder: [directoryInfo.id],
+              },
+            }))
           }
         }
       }
     },
-    enableChangeFile: function () {
-      this.enableSetting = true
-      this.setArchiveSettings()
-    },
     setArchiveSettings: async function () {
-      if (this.enableSetting) {
-        if (this.deviceInfo === null) {
-          this.deviceInfo = taskInfo.getDeviceInfo(this.deviceID)
-        }
-        const now = this.getCurrentTime()
-        // filename init
-        if (this.deviceInfo.info.isSync) {
-          this.fileNameInput = this.deviceInfo.info.recording_file_name
+      const now = this.getCurrentTime()
+      // filename init
+      if (this.device.status === 1) {
+        this.fileNameInput = this.device.recording_file_name
+      } else {
+        if (this.device.recording_file_name === 'recording_data' || this.device.recording_file_name.split('-').length === 7) {
+          this.fileNameInput = now
         } else {
-          if (this.deviceInfo.info.recording_file_name === 'recording_data' || this.deviceInfo.info.recording_file_name.split('-').length === 7) {
-            this.fileNameInput = now
-          } else {
-            this.fileNameInput = this.deviceInfo.info.recording_file_name
-          }
+          this.fileNameInput = this.device.recording_file_name
         }
+      }
+      await this.fileNameChange(this.fileNameInput)
 
-        this.fileNameChange(this.fileNameInput)
+      // directory init
+      const collection = await api.collection.getAll()
+      this.directoryOptions = collection.data.filter(el => el.name !== 'root')
 
-        // directory init
-        const collection = await api.collection.getAll()
-        this.directoryOptions = collection.data.filter(el => el.name !== 'root')
-
-        if (Object.keys(this.deviceInfo.info.parent).length === 0) {
-          this.directory = this.directoryOptions[0]
-        } else {
-          for (const directory of this.directoryOptions) {
-            if (this.deviceInfo.info.parent.folder.includes(directory.id)) {
-              this.directory = directory
-            }
+      if (Object.keys(this.device.parent).length === 0) {
+        this.directory = this.directoryOptions[0]
+      } else {
+        for (const directory of this.directoryOptions) {
+          if (this.device.parent.folder.includes(directory.id)) {
+            this.directory = directory
           }
         }
       }
     },
     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 () {
-      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
-        header: 'get_device_info/0',
-        device: taskInfo.getRawDeviceID(this.deviceID),
-      }))
-    },
-    refresh: function () {
-      this.$nextTick(() => {
-        this.setArchiveSettings()
-      })
     },
   },
   mounted () {
-    this.pageInit()
-    this.enableTimer = setTimeout(this.enableChangeFile, 1000)
+    this.setArchiveSettings()
   },
   destroyed () {
-    clearTimeout(this.enableTimer)
-  },
-  watch: {
-    deviceID: function (val) {
-      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
-        header: 'get_device_info/0',
-        device: taskInfo.getRawDeviceID(val),
-      }))
-    },
   },
 }
 </script>

src/components/task/content/parameter/DeviceParameterRecording.vue

@@ -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>

src/components/task/content/parameter/DeviceParameterWindow.vue

@@ -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>

src/components/task/content/parameter/EliteParameterWindow.vue

@@ -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>

src/components/task/content/parameter/NeuliveParameterRecording.vue

@@ -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) {

src/components/task/content/parameter/NeuliveParameterRecording35.vue

@@ -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) {

src/components/task/content/parameter/NeuliveParameterRecording35Ex.vue

@@ -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) {

src/components/task/content/parameter/NeuliveParameterStimulation35.vue

@@ -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' })
         }

src/components/task/content/parameter/item/LevelButton.vue

@@ -7,6 +7,7 @@
         outline
         v-model="levelButtonSelect"
         :options="options"
+        :disabled="disable"
       />
     </div>
   </div>
@@ -33,6 +34,10 @@ export default {
       type: Array,
       required: true,
     },
+    disable: {
+      type: Boolean,
+      default: false,
+    },
   },
   created () {
   },

src/components/task/content/parameter/itemNew/DPVNew/EliteParameterRecordingEliteDPV.vue

@@ -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>

src/components/task/content/parameter/itemNew/DevMode.vue

@@ -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>

src/components/task/content/parameter/itemNew/InputButtonToggle.vue

@@ -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>

src/components/task/content/parameter/itemNew/InputDoubleRange.vue

@@ -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>

src/components/task/content/parameter/itemNew/InputField.vue

@@ -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>

src/components/task/content/parameter/itemNew/InputOption.vue

@@ -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>

src/components/task/content/parameter/itemNew/InputRange.vue

@@ -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>

src/components/task/content/parameter/itemNew/InputRangeSlider.vue

@@ -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>

src/components/task/content/parameter/itemNew/InputToggle.vue

@@ -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>