[fix] configuration refresh bug

To be tested: elite if scale = 100 or 1000, will close chart averaging

package-lock.json

@@ -1168,6 +1168,16 @@
         "minimist": "^1.2.0"
       }
     },
+    "@fontsource/source-code-pro": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/@fontsource/source-code-pro/-/source-code-pro-4.5.0.tgz",
+      "integrity": "sha512-IKB+oQfwjj9DzEM2sc5rO70BZV7+ksmZbB+1KzyiZp2VroPw7Lm1ovXBU2JYWIWXmNY+gDudvyZXZHE+6cG47Q=="
+    },
+    "@fontsource/source-sans-pro": {
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/@fontsource/source-sans-pro/-/source-sans-pro-4.5.1.tgz",
+      "integrity": "sha512-JYEldSfnqxoDVUL6QgqT8Fiyjh0p7WlKcqKNevzDylpWabdejVRyFzPhTk2ZceKZd02KEOaL+K462U6u0/PQiA=="
+    },
     "@hapi/address": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
@@ -7536,6 +7546,11 @@
         "schema-utils": "^2.5.0"
       }
     },
+    "file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
+    },
     "file-uri-to-path": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
@@ -8580,6 +8595,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",
@@ -10360,6 +10380,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",
@@ -10924,6 +10952,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",
@@ -12106,6 +12142,11 @@
         "set-blocking": "~2.0.0"
       }
     },
+    "nprogress": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/nprogress/-/nprogress-0.2.0.tgz",
+      "integrity": "sha1-y480xTIT2JVyP8urkH6UIq28r7E="
+    },
     "nth-check": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-1.0.2.tgz",
@@ -14857,6 +14898,11 @@
         "is-plain-obj": "^1.0.0"
       }
     },
+    "sortablejs": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.10.2.tgz",
+      "integrity": "sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A=="
+    },
     "source-list-map": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
@@ -15169,6 +15215,11 @@
       "resolved": "https://registry.npmjs.org/stream-shift/-/stream-shift-1.0.1.tgz",
       "integrity": "sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ=="
     },
+    "streamsaver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/streamsaver/-/streamsaver-2.0.5.tgz",
+      "integrity": "sha512-KIWtBvi8A6FiFZGNSyuIZRZM6C8AvnWTiCx/TYa7so420vC5sQwcBKkdqInuGWoWMfeWy/P+/cRqMtWVf4RW9w=="
+    },
     "strict-uri-encode": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
@@ -17196,6 +17247,11 @@
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.3.4.tgz",
       "integrity": "sha512-SdKRBeoXUjaZ9R/8AyxsdTqkOfMcI5tWxPZOUX5Ie1BTL5rPSZ0O++pbiZCeYeythiZIdLEfkDiQPKIaWk5hDg=="
     },
+    "vue-slicksort": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/vue-slicksort/-/vue-slicksort-1.2.0.tgz",
+      "integrity": "sha512-k1324l+AnYy6MrpySN7PYL165z2EkvZmMe+BS7H/EugzS8IrZYRtoqa3QxSSWB34C7cplV1hj3c+7peKpxpYxg=="
+    },
     "vue-style-loader": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz",
@@ -17235,6 +17291,11 @@
       "resolved": "https://registry.npmjs.org/vue-toasted/-/vue-toasted-1.1.28.tgz",
       "integrity": "sha512-UUzr5LX51UbbiROSGZ49GOgSzFxaMHK6L00JV8fir/CYNJCpIIvNZ5YmS4Qc8Y2+Z/4VVYRpeQL2UO0G800Raw=="
     },
+    "vue-toastification": {
+      "version": "1.7.14",
+      "resolved": "https://registry.npmjs.org/vue-toastification/-/vue-toastification-1.7.14.tgz",
+      "integrity": "sha512-khZR8t3NWZ/JJ2MZxXLbesHrRJ8AKa75PY5Zq8yMifF9x8lHq8ljYkC0d2PD9yahooygQB5tcFyRDkbbIPx8hw=="
+    },
     "vue-worker": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/vue-worker/-/vue-worker-1.2.1.tgz",
@@ -17248,6 +17309,14 @@
       "resolved": "https://registry.npmjs.org/vue-yandex-maps/-/vue-yandex-maps-0.9.0.tgz",
       "integrity": "sha512-6gXec68eXNHvo5d6m43lGCDMShYRpciWWy55VA1RiFtMkLHIDeK4CJzYmkfAec32vpzYEqdcNBJh9b93wqtp8w=="
     },
+    "vuedraggable": {
+      "version": "2.24.3",
+      "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-2.24.3.tgz",
+      "integrity": "sha512-6/HDXi92GzB+Hcs9fC6PAAozK1RLt1ewPTLjK0anTYguXLAeySDmcnqE8IC0xa7shvSzRjQXq3/+dsZ7ETGF3g==",
+      "requires": {
+        "sortablejs": "1.10.2"
+      }
+    },
     "vuestic-ui": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/vuestic-ui/-/vuestic-ui-0.2.2.tgz",

package.json

@@ -13,6 +13,8 @@
     "test:unit": "vue-cli-service test:unit"
   },
   "dependencies": {
+    "@fontsource/source-code-pro": "^4.5.0",
+    "@fontsource/source-sans-pro": "^4.5.1",
     "@types/jest": "^24.0.11",
     "amcharts3": "^3.21.14",
     "ammap3": "^3.21.14",
@@ -27,17 +29,21 @@
     "element-resize-detector": "^1.1.15",
     "epic-spinners": "^1.1.0",
     "extend": "3.0.2",
+    "file-saver": "^2.0.5",
     "flag-icon-css": "^3.4.5",
     "font-awesome": "^4.7.0",
     "google-maps": "^3.3.0",
     "ionicons": "^4.6.3",
     "leaflet-map": "^0.2.1",
+    "localforage": "^1.10.0",
     "lodash": "^4.17.21",
     "medium-editor": "^5.23.3",
     "normalize.css": "^8.0.1",
+    "nprogress": "^0.2.0",
     "popper.js": "^1.16.0",
     "regenerator-runtime": "^0.13.3",
     "register-service-worker": "^1.6.2",
+    "streamsaver": "^2.0.5",
     "v-tooltip": "^2.0.2",
     "vee-validate": "^2.2.13",
     "vue": "^2.6.10",
@@ -52,8 +58,11 @@
     "vue-gtm": "^2.2.0",
     "vue-mqtt": "^2.0.3",
     "vue-router": "^3.1.3",
+    "vue-slicksort": "^1.2.0",
+    "vue-toastification": "^1.7.14",
     "vue-worker": "^1.2.1",
     "vue-yandex-maps": "^0.9.0",
+    "vuedraggable": "^2.24.3",
     "vuestic-ui": "~0.2.2",
     "vuetable-2": "^1.7.5",
     "vuex": "^3.1.2",

public/index.html

@@ -3,9 +3,6 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
-    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:400" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 
     <title>BioPro Scientific</title>

shell_script/README.md

@@ -10,5 +10,5 @@ burn_to_raspberry.sh
 ```shell
 sh ./burn_to_raspberry.sh <HOST> <PASSWORD> 
 
-e.g. sh ./burn_to_raspberry.sh pi@192.168.3.53 raspberry
+e.g. sh ./burn_to_raspberry.sh pi@192.168.2.1 raspberry
 ```

src/app/main.js

@@ -18,6 +18,9 @@ import 'echarts/lib/chart/line'
 import 'echarts/lib/component/dataZoom'
 import 'echarts/lib/component/tooltip'
 import 'echarts/lib/component/legend'
+import 'echarts/lib/component/legend/ScrollableLegendModel.js'
+import 'echarts/lib/component/legend/ScrollableLegendView.js'
+import 'echarts/lib/component/legend/scrollableLegendAction.js'
 import 'echarts/lib/component/axisPointer'
 import 'echarts/lib/component/grid'
 import 'echarts/lib/component/markArea'
@@ -28,10 +31,18 @@ import VueWorker from 'vue-worker'
 
 import axios from 'axios'
 import VueAxios from 'vue-axios'
+import 'nprogress/nprogress.css'
+
+import Toast from 'vue-toastification'
+import 'vue-toastification/dist/index.css'
+
+import localforage from 'localforage'
 
 import '../metrics'
 import '../registerServiceWorker'
 
+localforage.config({ name: 'bioprovue' })
+
 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}`
@@ -48,9 +59,12 @@ Vue.use(VueClipboard)
 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://52.194.17.114:8083')
+Vue.use(VueMqtt, 'ws://' + location.href.split('/')[2] + ':8083')
+// Vue.use(VueMqtt, 'ws://' + '192.168.151.125' + ':8083')
+// Vue.use(VueMqtt, 'ws://' + '192.168.3.211' + ':8083')
 
 Vue.prototype.GLOBAL = global_
 

src/assets/icons/sd-card-solid.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="sd-card" class="svg-inline--fa fa-sd-card fa-w-12" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="#6c7fee" d="M320 0H128L0 128v320c0 35.3 28.7 64 64 64h256c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64zM160 160h-48V64h48v96zm80 0h-48V64h48v96zm80 0h-48V64h48v96z"></path></svg>

src/components/admin/AppLayout.vue

@@ -60,7 +60,7 @@ export default {
   data () {
     return {
       isTopBar: false,
-      minimized: false,
+      minimized: true,
       mobileWidth: 767,
     }
   },
@@ -134,3 +134,9 @@ export default {
   }
 }
 </style>
+
+<style lang='scss'>
+  // .layout.gutter--xl {
+  //   padding: 0.5rem;
+  // }
+</style>

src/components/admin/AppPageLayout.vue

@@ -29,7 +29,7 @@ export default {
     },
     updateSidebarState () {
       if (this.checkIsDesktop()) {
-        this.$emit('update:minimized', false)
+        this.$emit('update:minimized', true)
       } else {
         this.$emit('update:minimized', true)
       }

src/components/admin/app-navbar/AppNavbar.vue

@@ -44,15 +44,6 @@
             contact@bioproweb.com
           </a>
         </span>
-        <!-- <va-button
-          href="https://github.com/epicmaxco/vuestic-admin"
-          color="#000000"
-          class="app-navbar__button"
-          icon="fa fa-github"
-          target="_blank"
-        >
-          {{$t('navbar.repository')}}
-        </va-button> -->
       </div>
       <app-navbar-actions
         class="app-navbar__actions md5 lg4"

src/components/admin/app-navbar/components/AppNavbarActions.vue

@@ -1,13 +1,15 @@
 <template>
   <div class="app-navbar-actions">
-    <!-- <color-dropdown class="app-navbar-actions__item"/> -->
-    <!-- <message-dropdown class="app-navbar-actions__item"/>
-    <notification-dropdown class="app-navbar-actions__item"/> -->
-    <!-- <settings-dropdown
+    <!-- <color-dropdown class="app-navbar-actions__item"/>
+    <message-dropdown class="app-navbar-actions__item"/>
+    <notification-dropdown class="app-navbar-actions__item"/>
+    <settings-dropdown
       :is-top-bar.sync="isTopBarProxy"
       class="app-navbar-actions__item"
-    /> -->
-    <!-- <language-dropdown class="app-navbar-actions__item"/> -->
+    />
+    <language-dropdown class="app-navbar-actions__item"/> -->
+    <license-check-button :ref="'license_check_button_ref'" @updateLicense="updateLicense"/>
+    <license-update-modal :title="'Update'" :ref="'license_update_modal_ref'" @refresh="refresh"/>
     <profile-dropdown class="app-navbar-actions__item app-navbar-actions__item--profile">
       <span>{{userName}}</span>
     </profile-dropdown>
@@ -16,11 +18,13 @@
 
 <script>
 // import LanguageDropdown from './dropdowns/LanguageDropdown'
-import ProfileDropdown from './dropdowns/ProfileDropdown'
 // import NotificationDropdown from './dropdowns/NotificationDropdown'
 // import MessageDropdown from './dropdowns/MessageDropdown'
 // import ColorDropdown from './dropdowns/ColorDropdown'
 // import SettingsDropdown from './dropdowns/SettingsDropdown'
+import ProfileDropdown from './dropdowns/ProfileDropdown'
+import LicenseUpdateModal from './modals/LicenseUpdateModal'
+import LicenseCheckButton from './buttons/LicenseCheckButton'
 import { ColorThemeMixin } from '../../../../services/vuestic-ui'
 
 export default {
@@ -33,6 +37,8 @@ export default {
     // MessageDropdown,
     // NotificationDropdown,
     // LanguageDropdown,
+    LicenseCheckButton,
+    LicenseUpdateModal,
     ProfileDropdown,
   },
   props: {
@@ -55,6 +61,16 @@ export default {
       },
     },
   },
+  methods: {
+    updateLicense () {
+      this.$refs.license_update_modal_ref.show()
+      this.$refs.license_update_modal_ref.licenseUpdate()
+    },
+    refresh () {
+      this.$refs.license_check_button_ref.refresh()
+      this.$refs.license_update_modal_ref.hide()
+    },
+  },
 }
 </script>
 

src/components/admin/app-navbar/components/buttons/LicenseCheckButton.vue

@@ -0,0 +1,96 @@
+<template>
+  <div v-if="!licenseCheck">
+    <va-button color="warning" class="mb-2" @click="licenseUpdateModalShow" small>
+      Update
+    </va-button>
+  </div>
+</template>
+
+<script>
+import api from '@/data/api/index'
+import { mapFields } from 'vuex-map-fields'
+
+export default {
+  name: 'license-check-button',
+  components: {
+  },
+  computed: {
+    ...mapFields('', [
+      'licenseCheck',
+    ]),
+  },
+  data () {
+    return {
+      popoverShow: true,
+      licenseCheckObj: {
+        pass: true,
+        outdated: false,
+        fail: false,
+      },
+      authText: {
+        outdated: 'New version released. Update by pressing the button above.',
+        fail: 'System file is missing, contact us by following as: contact@bioproweb.com.',
+      },
+      toastOptions: {
+        theme: 'none',
+        position: 'bottom-center',
+        className: 'vuestic-toast',
+        iconPack: 'fontawesome',
+        duration: 2500,
+      },
+    }
+  },
+  methods: {
+    licenseUpdateModalShow () {
+      this.$emit('updateLicense')
+    },
+    showNotify (licenseCheckResponse) {
+      this.$toast(this.authText[licenseCheckResponse], {
+        closeButtonClassName: 'my-button-class',
+        containerClassName: 'my-container-class',
+        toastClassName: 'my-custom-toast-class',
+        timeout: false,
+        icon: 'fa fa-exclamation',
+      })
+    },
+    closeNotify () {
+      this.$toast.clear()
+    },
+    async refresh () {
+      this.closeNotify()
+      const licenseCheckResponse = await api.auth.licenseCheck()
+      this.licenseCheck = this.licenseCheckObj[licenseCheckResponse.data]
+      if (this.licenseCheck === false) {
+        this.showNotify(licenseCheckResponse.data)
+      }
+    },
+  },
+  async mounted () {
+    await this.refresh()
+  },
+  destroyed () {
+  },
+}
+</script>
+
+<style>
+  .Vue-Toastification__toast--default.my-custom-toast-class {
+    background-color: rgba(255, 214, 82, 1);
+    color: black;
+  }
+
+  .Vue-Toastification__container.top-right {
+    top: 3rem !important;
+  }
+
+  .my-button-class {
+    opacity: 1 !important;
+    color: black !important;
+  }
+
+  .custom-toast {
+    background-color: rgba(255, 214, 82, 1) !important;
+    transform: translateX(50px) translateY(-75px) !important;
+    color: black !important;
+  }
+</style>

src/components/admin/app-navbar/components/modals/LicenseUpdateModal.vue

@@ -0,0 +1,74 @@
+<template>
+  <va-modal
+    class="flex sm12 xl12 md12 xs12"
+    v-model="showModal"
+    :title="title"
+    noOutsideDismiss
+    hideDefaultActions
+  >
+    <div v-if="loading" class="row flex sm12 xl12 md12 xs12">
+      <div class="flex-center spinner-box mt-4 mb-5">
+        <fulfilling-bouncing-circle-spinner
+          :animation-duration="3000"
+          :color="'#6c7fee'"
+          :size="60"
+        >
+        </fulfilling-bouncing-circle-spinner>
+      </div>
+    </div>
+    <div v-else class="row flex sm12 xl12 md12 xs12">
+      {{ modalMessage }}
+      <div class="row flex-center sm12 xl12 md12 xs12 mt-2">
+        <va-button small @click="hide">close</va-button>
+      </div>
+    </div>
+  </va-modal>
+</template>
+<script>
+import api from '@/data/api/index'
+import { FulfillingBouncingCircleSpinner } from 'epic-spinners'
+
+export default {
+  name: 'license-check-modal',
+  components: {
+    FulfillingBouncingCircleSpinner,
+  },
+  props: {
+    title: {
+      type: String,
+      default: '',
+    },
+  },
+  data () {
+    return {
+      showModal: false,
+      hideDefaultActions: false,
+      loading: true,
+      modalMessage: '',
+    }
+  },
+  methods: {
+    show () {
+      this.showModal = true
+    },
+    hide () {
+      this.showModal = false
+    },
+    async licenseUpdate () {
+      this.hideDefaultActions = true
+      this.loading = true
+      const updateResponse = await api.auth.licenseUpdate()
+      console.log('updateResponse', updateResponse)
+      setTimeout(() => {
+        if (updateResponse.status === 200) {
+          this.loading = false
+          this.$emit('refresh')
+        } else if (updateResponse.status === 202 || updateResponse.status === 203) {
+          this.loading = false
+          this.modalMessage = 'An unknown error occurred while updating, please contact us by following as: contact@bioproweb.com'
+        }
+      }, 5000)
+    },
+  },
+}
+</script>

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

@@ -40,6 +40,13 @@ export const navigationRoutes = {
       //   },
       // ],
     },
+    // {
+    //   name: 'task-content-g-m',
+    //   displayName: 'Gimer',
+    //   meta: {
+    //     iconClass: 'vuestic-iconset vuestic-iconset-statistics',
+    //   },
+    // },
     {
       name: 'file',
       displayName: 'File',
@@ -47,6 +54,13 @@ export const navigationRoutes = {
         iconClass: 'vuestic-iconset vuestic-iconset-files',
       },
     },
+    {
+      name: 'settings',
+      displayName: 'Settings',
+      meta: {
+        iconClass: 'vuestic-iconset vuestic-iconset-settings',
+      },
+    },
     // {
     //   name: 'forms',
     //   displayName: 'menu.forms',

src/components/admin/app-sidebar/components/AppSidebarLink.vue

@@ -11,12 +11,26 @@
       :to="to"
       :target="target"
     >
-      <va-icon
-        v-if="icon"
-        class="app-sidebar-link__item-icon"
-        :style="computedIconStyles"
-        :name="icon"
-      />
+      <template v-if="title == 'Gimer'">
+        <img
+          v-if="this.isHovered || this.isActive"
+          class="app-sidebar-link__item-icon"
+          src="@/assets/img/gimer_white.png"
+        >
+        <img
+          v-else
+          class="app-sidebar-link__item-icon"
+          src="@/assets/img/gimer_gray.png"
+        >
+      </template>
+      <template v-else>
+        <va-icon
+          v-if="icon"
+          class="app-sidebar-link__item-icon"
+          :style="computedIconStyles"
+          :name="icon"
+        />
+      </template>
       <div class="app-sidebar-link__item-title" v-if="title">
         <slot>
           {{title}}
@@ -140,6 +154,21 @@ export default {
         color: 'white',
       }
     },
+    computedGimerIcon () {
+      if (this.contextConfig.invertedColor) {
+        if (this.isHovered || this.isActive) {
+          return 'gimer_white.png'
+        }
+
+        return 'gimer_gray.png'
+      }
+
+      if (this.isHovered || this.isActive) {
+        return 'gimer_white.png'
+      }
+
+      return 'gimer_white.png'
+    },
   },
   methods: {
     updateHoverState (isHovered) {

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

@@ -1,16 +1,14 @@
 <template>
   <div class="flex" :class="cardclass">
-    <va-card>
-      <template slot="header">
-        <!-- <va-icon name="fa fa-area-chart mr-3" color="primary"/> -->
-      </template>
-      <chart :ref="'chart_ref'" :style="'width: '+ cardwidth + '; height: ' + cardheight + ';'" :options="data" @dataZoom="updateZoom" :auto-resize="true"></chart>
+    <va-card :style="'height: ' + cardheight + ';'">
+      <chart :ref="'chart_ref'" :style="'width: '+ cardwidth + '; height: ' + chartheight + ';'" :options="data" @dataZoom="updateZoom" :auto-resize="true"></chart>
     </va-card>
   </div>
 </template>
 
 <script>
-// import { chartData } from '../../../../data/task/ChartsManagement'
+import { mapMutations } from 'vuex'
+import types from '@/store/modules/analysis/replay/types'
 
 export default {
   name: 'elite-replay-chart',
@@ -37,6 +35,10 @@ export default {
       type: String,
       default: 'auto',
     },
+    chartheight: {
+      type: String,
+      default: '88vh',
+    },
   },
   created () {
   },
@@ -57,6 +59,40 @@ export default {
     updateZoom: function (e) {
       this.$emit('dataZoomEvent', e)
     },
+    mergeOptions (options) {
+      this.$refs.chart_ref.mergeOptions(options)
+    },
+    turnOnAxisEventHandler (eventName, query, handler, attr) {
+      const chartID = 1
+      this.updateAxisEventHandlerChart({
+        chartID: chartID,
+        axis: attr.axis,
+        status: 'on',
+      })
+      // doc: https://echarts.apache.org/zh/api.html#echartsInstance.on
+      this.$refs.chart_ref.chart._zr.on(eventName, query, handler)
+    },
+    turnOffAxisEventHandler (eventName, handler, attr) {
+      const chartID = 1
+      this.updateAxisEventHandlerChart({
+        chartID: chartID,
+        axis: attr.axis,
+        status: 'off',
+      })
+      // doc: https://echarts.apache.org/zh/api.html#echartsInstance.off
+      this.$refs.chart_ref.chart._zr.off(eventName, handler)
+    },
+    showLoading (options) {
+      this.$refs.chart_ref.showLoading(options)
+    },
+    hideLoading () {
+      this.$refs.chart_ref.hideLoading()
+    },
+    clear () {
+      this.$refs.chart_ref.clear()
+    },
+
+    ...mapMutations('replay', [types.chart.updateAxisEventHandler]),
   },
   async mounted () {
     this.resizeTimer = setInterval(this.resize, 1000)
@@ -67,3 +103,11 @@ export default {
 }
 
 </script>
+
+<style lang='scss'>
+  .va-card {
+    &__body {
+      padding-top: 0.25rem;
+    }
+  }
+</style>

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

@@ -0,0 +1,85 @@
+<template>
+  <div class="flex" :class="cardclass">
+    <va-card :style="'height: 8vh;'">
+      <chart :ref="'chart_ref'" :style="'width: '+ cardwidth + '; height: ' + cardheight + ';'" :options="data" @dataZoom="updateZoom" :auto-resize="true"></chart>
+    </va-card>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'elite-replay-overview-chart',
+  components: {
+  },
+  props: {
+    data: {
+      type: Object,
+      default: function () {
+        return {}
+      },
+    },
+    cardclass: {
+      type: Array,
+      default: function () {
+        return ['xs12', 'md12', 'xl12', 'sm12']
+      },
+    },
+    cardheight: {
+      type: String,
+      default: '82vh',
+    },
+    cardwidth: {
+      type: String,
+      default: 'auto',
+    },
+  },
+  created () {
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+  },
+  watch: {
+  },
+  methods: {
+    resize: function () {
+      if (this.$refs.chart_ref != null) {
+        this.$refs.chart_ref.resize()
+      }
+    },
+    updateZoom: function (e) {
+      this.$emit('dataZoomEvent', e)
+    },
+    mergeOptions (options) {
+      this.$refs.chart_ref.mergeOptions(options)
+    },
+    showLoading (options) {
+      this.$refs.chart_ref.showLoading(options)
+    },
+    hideLoading () {
+      this.$refs.chart_ref.hideLoading()
+    },
+    clear () {
+      this.$refs.chart_ref.clear()
+    },
+  },
+  async mounted () {
+    this.resizeTimer = setInterval(this.resize, 1000)
+  },
+  destroyed () {
+    clearInterval(this.resizeTimer)
+  },
+}
+
+</script>
+
+<style lang='scss'>
+  .va-card {
+    &__body {
+      padding: 0.75rem;
+    }
+  }
+</style>

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

@@ -0,0 +1,168 @@
+<template>
+  <div>
+    <va-card>
+      <div class="flex-container mb-1">
+        <div class="flex sm8 xl8 md8 xs8 px-0 py-0">
+          <edit-file-name :ref="'edit_file_name'"/>
+        </div>
+        <div class="flex sm2 xl2 md2 xs2 px-0 py-0">
+          <download-file style="float: right;" />
+        </div>
+        <div class="flex sm2 xl2 md2 xs2 px-0 py-0">
+          <delete-file />
+        </div>
+      </div>
+
+      <div class="flex-container mb-2">
+        <div class="flex sm2 xl2 md2 xs2 px-0 py-0">
+          <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"/>
+        </div>
+        <div class="flex sm5 xl5 md5 xs5 pl-1 pr-0 py-0">
+          <change-unit :ref="'change_unit_x'" axis="x" @refreshChart="refreshChart"/>
+        </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-scale :ref="'change_scale_x'" axis="x" @refreshChart="refreshChart" @clearCycle="clearCycle" @changeAxis="changeAxis"/>
+        </div>
+        <div class="flex sm5 xl5 md5 xs5 px-0 py-0">
+          <abs-toggle :ref="'abs_x'" axis="x" @changeAxis="changeAxis"/>
+        </div>
+      </div>
+
+      <div class="flex-container mb-2">
+        <div class="flex sm2 xl2 md2 xs2 px-0 py-0">
+          <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"/>
+        </div>
+        <div class="flex sm5 xl5 md5 xs5 pl-1 pr-0 py-0">
+          <change-unit :ref="'change_unit_y'" axis="y" @refreshChart="refreshChart"/>
+        </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-scale :ref="'change_scale_y'" axis="y" @refreshChart="refreshChart" @clearCycle="clearCycle" @changeAxis="changeAxis"/>
+        </div>
+        <div class="flex sm5 xl5 md5 xs5 px-0 py-0">
+          <abs-toggle :ref="'abs_y'" axis="y" @changeAxis="changeAxis"/>
+        </div>
+      </div>
+
+      <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"/>
+        </div>
+        <div class="flex sm1 xl1 md1 xs1 px-0 py-0">
+          <lock-data-zoom :chartID="0"/>
+        </div>
+      </div>
+      <change-cycle v-show="showCyclePanel" :ref="'change_cycle'" @refreshChart="refreshChart"/>
+      <show-resample-rate/>
+      <show-parameter :ref="'show_param'"/>
+    </va-card>
+  </div>
+</template>
+
+<script>
+import ShowResampleRate from '@/components/analysis/replay/toolbox/ShowResampleRate.vue'
+import ChangeAxis from '@/components/analysis/replay/toolbox/ChangeAxis.vue'
+import ChangeUnit from '@/components/analysis/replay/toolbox/ChangeUnit.vue'
+import ChangeScale from '@/components/analysis/replay/toolbox/ChangeScale.vue'
+import ChangeCycle from '@/components/analysis/replay/toolbox/ChangeCycle.vue'
+import AbsToggle from '@/components/analysis/replay/toolbox/AbsToggle.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 { mapFields } from 'vuex-map-fields'
+
+export default {
+  name: 'top-control-panel',
+  components: {
+    ShowResampleRate,
+    ChangeAxis,
+    ChangeUnit,
+    ChangeScale,
+    ChangeCycle,
+    AbsToggle,
+    DownloadFile,
+    DeleteFile,
+    EditFileName,
+    ShowParameter,
+    LockDataZoom,
+    ChangeWindowStartAndSize,
+  },
+  computed: {
+    ...mapFields('replay', [
+      'metaList',
+      'showCyclePanel',
+    ]),
+  },
+  props: {
+  },
+  async created () {
+  },
+  data () {
+    return {
+      deviceName: '',
+      showCycle: false,
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    init () {
+      this.deviceName = this.metaList[0].device.library_name
+      this.$refs.change_axis_x.init(this.deviceName)
+      this.$refs.change_axis_y.init(this.deviceName)
+      this.$refs.change_unit_x.init(this.deviceName)
+      this.$refs.change_unit_y.init(this.deviceName)
+      this.$refs.change_scale_x.init(this.deviceName)
+      this.$refs.change_scale_y.init(this.deviceName)
+      this.$refs.abs_x.init(this.deviceName)
+      this.$refs.abs_y.init(this.deviceName)
+      this.$refs.change_cycle.init()
+      this.$refs.edit_file_name.init()
+      this.$refs.show_param.init(this.deviceName)
+      this.$refs.change_window_start_and_size.init()
+    },
+    changeOverviewDataZoom () {
+      this.$emit('changeOverviewDataZoom')
+    },
+    refreshChart (options) {
+      this.$emit('refreshChart', options)
+    },
+    changeAxis (gridIndex) {
+      this.$emit('changeAxis', gridIndex)
+    },
+    changeUnit (axis) {
+      if (axis === 'x') {
+        this.$refs.change_unit_x.changeUnitByAxis()
+      } else if (axis === 'y') {
+        this.$refs.change_unit_y.changeUnitByAxis()
+      }
+    },
+    clearCycle () {
+      this.$refs.change_cycle.clear()
+    },
+  },
+  mounted () {
+  },
+}
+</script>
+
+<style lang="scss">
+  .flex-container {
+    display: flex;
+    align-items: center;
+  }
+</style>

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

@@ -7,7 +7,8 @@
 </template>
 
 <script>
-// import { chartData } from '../../../../data/task/ChartsManagement'
+import { mapMutations } from 'vuex'
+import types from '@/store/modules/analysis/replay/types'
 
 export default {
   name: 'neulive-replay-chart',
@@ -54,6 +55,40 @@ export default {
     updateZoom: function (e) {
       this.$emit('dataZoomEvent', e)
     },
+    mergeOptions (options) {
+      this.$refs.chart_ref.mergeOptions(options)
+    },
+    turnOnAxisEventHandler (eventName, query, handler, attr) {
+      const chartID = 1
+      this.updateAxisEventHandlerChart({
+        chartID: chartID,
+        axis: attr.axis,
+        status: 'on',
+      })
+      // doc: https://echarts.apache.org/zh/api.html#echartsInstance.on
+      this.$refs.chart_ref.chart._zr.on(eventName, query, handler)
+    },
+    turnOffAxisEventHandler (eventName, handler, attr) {
+      const chartID = 1
+      this.updateAxisEventHandlerChart({
+        chartID: chartID,
+        axis: attr.axis,
+        status: 'off',
+      })
+      // doc: https://echarts.apache.org/zh/api.html#echartsInstance.off
+      this.$refs.chart_ref.chart._zr.off(eventName, handler)
+    },
+    showLoading (options) {
+      this.$refs.chart_ref.showLoading(options)
+    },
+    hideLoading () {
+      this.$refs.chart_ref.hideLoading()
+    },
+    clear () {
+      this.$refs.chart_ref.clear()
+    },
+
+    ...mapMutations('replay', [types.chart.updateAxisEventHandler]),
   },
   async mounted () {
     this.resizeTimer = setInterval(this.resize, 1000)

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

@@ -0,0 +1,85 @@
+<template>
+  <div class="flex" :class="cardclass">
+    <va-card :style="'height: 8vh;'">
+      <chart :ref="'chart_ref'" :style="'width: '+ cardwidth + '; height: ' + cardheight + ';'" :options="data" @dataZoom="updateZoom" :auto-resize="true"></chart>
+    </va-card>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'neulive-replay-overview-chart',
+  components: {
+  },
+  props: {
+    data: {
+      type: Object,
+      default: function () {
+        return {}
+      },
+    },
+    cardclass: {
+      type: Array,
+      default: function () {
+        return ['xs12', 'md12', 'xl12', 'sm12']
+      },
+    },
+    cardheight: {
+      type: String,
+      default: '82vh',
+    },
+    cardwidth: {
+      type: String,
+      default: 'auto',
+    },
+  },
+  created () {
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+  },
+  watch: {
+  },
+  methods: {
+    resize: function () {
+      if (this.$refs.chart_ref != null) {
+        this.$refs.chart_ref.resize()
+      }
+    },
+    updateZoom: function (e) {
+      this.$emit('dataZoomEvent', e)
+    },
+    mergeOptions (options) {
+      this.$refs.chart_ref.mergeOptions(options)
+    },
+    showLoading (options) {
+      this.$refs.chart_ref.showLoading(options)
+    },
+    hideLoading () {
+      this.$refs.chart_ref.hideLoading()
+    },
+    clear () {
+      this.$refs.chart_ref.clear()
+    },
+  },
+  async mounted () {
+    this.resizeTimer = setInterval(this.resize, 1000)
+  },
+  destroyed () {
+    clearInterval(this.resizeTimer)
+  },
+}
+
+</script>
+
+<style lang='scss'>
+  .va-card {
+    &__body {
+      padding: 0.75rem;
+    }
+  }
+</style>

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

@@ -0,0 +1,126 @@
+<template>
+  <div>
+    <va-card>
+      <div class="flex-container">
+        <edit-file-name class="flex-child" :ref="'edit_file_name'"/>
+        <download-file class="flex-child2"/>
+        <delete-file class="flex-child2"/>
+      </div>
+      <show-resample-rate/>
+      <div class="flex-container">
+        <change-window-start-and-size class="flex-child" :ref="'change_window_start_and_size'" @changeOverviewDataZoom="changeOverviewDataZoom"/>
+        <lock-data-zoom class="flex-child2" :chartID="0"/>
+      </div>
+      <change-axis v-show="showXAxis" :ref="'change_axis_x'" axis="x"/>
+      <change-axis v-show="showYAxis" :ref="'change_axis_y'" axis="y"/>
+      <change-unit v-show="showXUnit" :ref="'change_unit_x'" axis="x" @refreshChart="refreshChart"/>
+      <change-unit :ref="'change_unit_y'" class="box_inline-block" axis="y" @refreshChart="refreshChart"/>
+      <change-scale :ref="'change_scale_y'" class="box_inline-block" axis="y"/>
+      <sd-card-toggle :ref="'sd_card_toggle'" :metaIndex="0"/>
+      <show-parameter :ref="'show_param'"/>
+    </va-card>
+  </div>
+</template>
+
+<script>
+import ShowResampleRate from '@/components/analysis/replay/toolbox/ShowResampleRate.vue'
+import ChangeAxis from '@/components/analysis/replay/toolbox/ChangeAxis.vue'
+import ChangeUnit from '@/components/analysis/replay/toolbox/ChangeUnit.vue'
+import ChangeScale from '@/components/analysis/replay/toolbox/ChangeScale.vue'
+import DownloadFile from '@/components/analysis/replay/toolbox/DownloadFile.vue'
+import DeleteFile from '@/components/analysis/replay/toolbox/DeleteFile.vue'
+import EditFileName from '@/components/analysis/replay/toolbox/EditFileName.vue'
+import ShowParameter from '@/components/analysis/replay/toolbox/ShowParameter.vue'
+import SdCardToggle from '@/components/analysis/replay/toolbox/SdCardToggle.vue'
+import LockDataZoom from '@/components/analysis/replay/toolbox/LockDataZoom.vue'
+import ChangeWindowStartAndSize from '@/components/analysis/replay/toolbox/ChangeWindowStartAndSize.vue'
+import { mapFields } from 'vuex-map-fields'
+
+export default {
+  name: 'top-control-panel',
+  components: {
+    ShowResampleRate,
+    ChangeAxis,
+    ChangeUnit,
+    ChangeScale,
+    DownloadFile,
+    DeleteFile,
+    EditFileName,
+    ShowParameter,
+    SdCardToggle,
+    LockDataZoom,
+    ChangeWindowStartAndSize,
+  },
+  computed: {
+    ...mapFields('replay', [
+      'metaList',
+      'showCyclePanel',
+    ]),
+  },
+  async created () {
+  },
+  data () {
+    return {
+      deviceName: '',
+      showXAxis: false,
+      showYAxis: false,
+      showXUnit: false,
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    init () {
+      this.deviceName = this.metaList[0].device.library_name
+      this.$refs.change_axis_x.init(this.deviceName)
+      this.$refs.change_axis_y.init(this.deviceName)
+      this.$refs.change_unit_x.init(this.deviceName)
+      this.$refs.change_unit_y.init(this.deviceName)
+      this.$refs.change_scale_y.init(this.deviceName)
+      this.$refs.edit_file_name.init()
+      this.$refs.show_param.init(this.deviceName)
+      this.$refs.change_window_start_and_size.init()
+      this.$refs.sd_card_toggle.init()
+    },
+    changeOverviewDataZoom () {
+      this.$emit('changeOverviewDataZoom')
+    },
+    refreshChart (options) {
+      this.$emit('refreshChart', options)
+    },
+  },
+  // use watch because va-select with @change will have bug
+  watch: {
+  },
+  mounted () {
+  },
+}
+</script>
+
+<style lang="scss">
+  .box_inline-block {
+    padding: 2px;
+    margin: 2px;
+    display: inline-block;
+  }
+
+  .flex-container {
+    display: flex;
+  }
+
+  .flex-child {
+    flex: 2;
+  }
+
+  .flex-child1 {
+    flex: 1;
+  }
+
+  .flex-child2 {
+    flex: 0;
+  }
+
+  .flex-child:first-child {
+    margin-right: 1px;
+  }
+</style>

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

@@ -0,0 +1,118 @@
+<template>
+  <div>
+    <va-button
+      :color="buttonColor"
+      :key="clickTime"
+      v-model="absToggleStatus[axis]"
+      @click="performABS()"
+      class="round-button px-1 py-1"
+    >
+      ABS
+    </va-button>
+  </div>
+</template>
+
+<script>
+
+import { mapActions, mapMutations } from 'vuex'
+import { mapFields } from 'vuex-map-fields'
+import types from '@/store/modules/analysis/replay/types'
+
+export default {
+  name: 'AbsToggle',
+  components: {
+  },
+  computed: {
+    displayType () {
+      return {
+        x: this.axisXLabelScale.description === 'Log' ? 'log' : 'value',
+        y: this.axisYLabelScale.description === 'Log' ? 'log' : 'value',
+      }
+    },
+
+    ...mapFields('replay', [
+      'chartData',
+      'metaList',
+      'absToggleStatus',
+    ]),
+  },
+  props: {
+    chartID: {
+      type: Number, // detail data
+      default: 1,
+    },
+    axis: {
+      type: String, // x or y
+    },
+    metaIndex: {
+      type: Number, // which meta file
+      default: 0,
+    },
+  },
+  created () {
+  },
+  data () {
+    return {
+      metaID: 0,
+      metaInfo: null,
+      buttonColor: 'gray',
+      clickTime: 0,
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    init (deviceName) {
+      this.deviceName = deviceName
+      this.metaInfo = this.metaList[this.metaIndex]
+      this.metaID = this.metaInfo.id
+      this.absToggleStatus[this.axis] = false
+    },
+    performABS () {
+      this.absToggleStatus[this.axis] = !this.absToggleStatus[this.axis]
+      if (this.deviceName === 'EliteZM15' || this.deviceName === 'EliteEIS') {
+        this.calculateHelper(this.metaIndex) // [TODO] elite tmp use metaIndex for grid index
+      }
+      this.clickTime++
+      this.buttonColor = this.clickTime % 2 === 1 ? 'success' : 'gray'
+    },
+    async calculateHelper (gridIndex) {
+      let seriesData
+      if (this.absToggleStatus[this.axis]) {
+        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])
+          }
+        }
+        this.updateSeriesChart({
+          chartID: this.chartID,
+          seriesIndex: gridIndex,
+          data: seriesData,
+        })
+      } else {
+        if (this.deviceName === 'EliteZM15' || this.deviceName === 'EliteEIS') {
+          this.$emit('changeAxis', this.metaIndex) // [TODO] elite tmp use metaIndex for grid index
+        }
+      }
+    },
+
+    ...mapActions('replay', [types.chart.setAxisDisplay]),
+    ...mapMutations('replay', [types.chart.updateSeries]),
+  },
+  async mounted () {
+  },
+  destroyed () {
+  },
+  watch: {
+  },
+}
+</script>
+
+<style lang="scss">
+  .round-button {
+    border-radius: 12px;
+  }
+</style>

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

@@ -0,0 +1,328 @@
+<template>
+  <div>
+    <div v-if="axis === 'x'">
+      <va-select
+        @input="changeAxis()"
+        :label="''"
+        v-if="deviceName!=='EliteEIS'"
+        v-model="channelFormat"
+        textBy="description"
+        class="va-select-without-margin"
+        :options="channelOptions"
+        :noClear='true'
+      />
+      <va-select
+        @input="changeAxis()"
+        :label="''"
+        v-if="deviceName==='EliteEIS'"
+        v-model="channelFormat"
+        textBy="description"
+        class="va-select-without-margin"
+        :options="eisChannelOptions"
+        :noClear='true'
+      />
+    </div>
+    <div v-if="axis === 'y'">
+      <va-select
+        @input="changeAxis()"
+        :label="''"
+        v-if="deviceName!=='EliteEIS'"
+        v-model="channelFormat"
+        textBy="description"
+        class="va-select-without-margin"
+        :options="channelYOptions"
+        :noClear='true'
+      />
+      <va-select
+        @input="changeAxis()"
+        :label="''"
+        v-if="deviceName==='EliteEIS'"
+        v-model="channelFormat"
+        textBy="description"
+        class="va-select-without-margin"
+        :options="eisChannelYOptions"
+        :noClear='true'
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapFields } from 'vuex-map-fields'
+
+export default {
+  name: 'change-axis',
+  components: {
+  },
+  props: {
+    axis: {
+      type: String, // x or y
+    },
+    metaIndex: {
+      type: Number, // which meta file
+      default: 0,
+    },
+  },
+  created () {
+  },
+  computed: {
+    ...mapFields('replay', [
+      'chartData',
+      'metaList',
+      'axisXDataType',
+      'axisYDataType',
+      'showCyclePanel',
+    ]),
+  },
+  methods: {
+    init (deviceName) {
+      this.deviceName = deviceName
+      if (this.deviceName.startsWith('Neulive')) {
+        // now neulive only v-t
+        if (this.axis === 'x') {
+          this.axisXDataType = this.channelOptions[3]
+        } else if (this.axis === 'y') {
+          this.axisYDataType = this.channelOptions[1]
+        }
+      } else if (this.deviceName === 'EliteZM15') {
+        // 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]
+        const xValue = setting[1]
+        const yType = setting[2]
+        const yValue = setting[3]
+        let settingType
+        let settingValue
+        if (this.axis === 'x') {
+          settingType = xType
+          settingValue = xValue
+          if (settingType === 'Elite') {
+            // 1: I, 2: V, 3: R
+            if (settingValue === 1) {
+              this.axisXDataType = this.channelOptions[0]
+            } else if (settingValue === 2) {
+              this.axisXDataType = this.channelOptions[1]
+            } else if (settingValue === 3) {
+              this.axisXDataType = this.channelOptions[2]
+            } else if (settingValue === 4) {
+              this.axisXDataType = this.channelOptions[3]
+            }
+          } else if (settingType === 'Time') {
+            this.axisXDataType = this.channelOptions[4]
+          }
+          this.channelFormat = this.axisXDataType
+        } else if (this.axis === 'y') {
+          settingType = yType
+          settingValue = yValue
+          if (settingType === 'Elite') {
+            // 1: I, 2: V, 3: R
+            if (settingValue === 1) {
+              this.axisYDataType = this.channelOptions[0]
+            } else if (settingValue === 2) {
+              this.axisYDataType = this.channelOptions[1]
+            } else if (settingValue === 3) {
+              this.axisYDataType = this.channelOptions[2]
+            } else if (settingValue === 4) {
+              this.axisXDataType = this.channelOptions[3]
+            }
+          } else if (settingType === 'Time') {
+            this.axisYDataType = this.channelOptions[4]
+          }
+          this.channelFormat = this.axisYDataType
+        }
+      } else if (this.deviceName === 'EliteEIS') {
+        const setting = this.GLOBAL.getDefaultChartTypeByMode(this.metaList[this.metaIndex].parameter_set.MODE, this.deviceName)
+        const xType = setting[0]
+        const xValue = setting[1]
+        const yType = setting[2]
+        const yValue = setting[3]
+        let settingType
+        let settingValue
+        if (this.axis === 'x') {
+          settingType = xType
+          settingValue = xValue
+          if (settingType === 'EliteEIS') {
+            this.axisXDataType = this.eisChannelOptions.find(element => element.id === parseInt(settingValue) - 1)
+          } else if (settingType === 'Elite') {
+            // 1: I, 2: V, 3: R
+            if (settingValue === 1) {
+              this.axisXDataType = this.channelOptions[0]
+            } else if (settingValue === 2) {
+              this.axisXDataType = this.channelOptions[1]
+            } else if (settingValue === 3) {
+              this.axisXDataType = this.channelOptions[2]
+            }
+          } else if (settingType === 'Time') {
+            this.axisXDataType = this.channelOptions[3]
+          }
+          this.channelFormat = this.axisXDataType
+        } else if (this.axis === 'y') {
+          settingType = yType
+          settingValue = yValue
+          if (settingType === 'EliteEIS') {
+            this.axisYDataType = this.eisChannelOptions.find(element => element.id === parseInt(settingValue) - 1)
+          } else if (settingType === 'Elite') {
+            // 1: I, 2: V, 3: R
+            if (settingValue === 1) {
+              this.axisYDataType = this.channelOptions[0]
+            } else if (settingValue === 2) {
+              this.axisYDataType = this.channelOptions[1]
+            } else if (settingValue === 3) {
+              this.axisYDataType = this.channelOptions[2]
+            }
+          } else if (settingType === 'Time') {
+            this.axisYDataType = this.channelOptions[3]
+          }
+          this.channelFormat = this.axisYDataType
+        }
+      }
+      if (this.axis === 'y') { // only need to draw once time when init
+        this.changeAxis()
+      }
+    },
+    changeAxis () {
+      if (this.deviceName.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') {
+        if (this.axis === 'x') {
+          this.axisXDataType = this.channelFormat
+        } else if (this.axis === 'y') {
+          this.axisYDataType = this.channelFormat
+        }
+        if (this.metaList[this.metaIndex].parameter_set.CYCLE_NUMBER > 0) {
+          this.showCyclePanel = true
+        } else {
+          this.showCyclePanel = false
+        }
+        this.$emit('changeAxis', this.metaIndex) // temporarily use metaIndex for gridIndex
+        this.$emit('changeUnit', this.axis)
+        this.$emit('clearCycle')
+      }
+    },
+  },
+  mounted () {
+  },
+  data () {
+    return {
+      deviceName: '',
+      channelFormat: {},
+      channelOptions: [
+        {
+          id: 0,
+          description: 'Current',
+        },
+        {
+          id: 1,
+          description: 'Voltage',
+        },
+        {
+          id: 2,
+          description: 'Resistance',
+        },
+        {
+          id: 3,
+          description: 'Cycle',
+        },
+        {
+          id: 100, // no usage, so assign a large number to avoid conflicting with existing channel data
+          description: 'Time',
+        },
+      ],
+      channelYOptions: [
+        {
+          id: 0,
+          description: 'Current',
+        },
+        {
+          id: 1,
+          description: 'Voltage',
+        },
+        {
+          id: 2,
+          description: 'Resistance',
+        },
+        {
+          id: 3,
+          description: 'Cycle',
+        },
+      ],
+      eisChannelOptions: [ // id 0 (Raw Imag), 1 (Raw Real), 3 (Cycle) 不用給user選
+        {
+          id: 2,
+          description: 'Frequency',
+        },
+        {
+          id: 4,
+          description: 'Z_imag',
+        },
+        {
+          id: 5,
+          description: 'Z_real',
+        },
+        {
+          id: 6,
+          description: 'Impedance',
+        },
+        {
+          id: 7,
+          description: 'Phase',
+        },
+        {
+          id: 8,
+          description: 'Current',
+        },
+        {
+          id: 9,
+          description: 'Gain Level',
+        },
+        {
+          id: 100, // no usage, so assign a large number to avoid conflicting with existing channel data
+          description: 'Time',
+        },
+      ],
+      eisChannelYOptions: [ // id 0 (Raw Imag), 1 (Raw Real), 3 (Cycle) 不用給user選
+        {
+          id: 2,
+          description: 'Frequency',
+        },
+        {
+          id: 4,
+          description: 'Z_imag',
+        },
+        {
+          id: 5,
+          description: 'Z_real',
+        },
+        {
+          id: 6,
+          description: 'Impedance',
+        },
+        {
+          id: 7,
+          description: 'Phase',
+        },
+        {
+          id: 8,
+          description: 'Current',
+        },
+        {
+          id: 9,
+          description: 'Gain Level',
+        },
+      ],
+    }
+  },
+  destroyed () {
+  },
+}
+
+</script>
+
+<style lang="scss">
+  .va-select-without-margin {
+    .va-select {
+      margin-bottom: 0;
+    }
+  }
+</style>

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

@@ -0,0 +1,99 @@
+<template>
+  <div>
+    <va-modal
+      class="flex sm12 xl12 md12 xs12"
+      v-model="showModal.minMaxPanel"
+      size="small"
+      :position="position"
+      :title="'Set min max (if blank, will be auto-set)'"
+      :okText=" $t('modal.confirm') "
+      @ok="setMinMax()"
+    >
+      <va-input
+        v-model="minMaxInfo[gridIndex].max"
+        :label="'Max'"
+      />
+      <va-input
+        v-model="minMaxInfo[gridIndex].min"
+        :label="'Min'"
+      />
+    </va-modal>
+  </div>
+</template>
+
+<script>
+import { mapMutations } from 'vuex'
+import { mapFields } from 'vuex-map-fields'
+import types from '@/store/modules/analysis/replay/types'
+
+export default {
+  name: 'change-channel-value-min-max',
+  components: {
+  },
+  props: {
+    chartID: {
+      type: Number,
+      default: 1, // detail data
+    },
+  },
+  created () {
+  },
+  data () {
+    return {
+      gridIndex: 0,
+      axis: 'y',
+      showModal: {
+        minMaxPanel: false,
+      },
+      minMaxInfo: { 0: { min: '', max: '' } }, // will be set by init()
+      position: 'center',
+    }
+  },
+  computed: {
+    ...mapFields('replay', [
+      'chartData',
+    ]),
+  },
+  watch: {
+  },
+  methods: {
+    init () {
+      const len = this.chartData[this.chartID].series.length
+      for (let i = 0; i < len; i++) {
+        this.minMaxInfo[i] = { min: '', max: '' }
+      }
+    },
+    showPanel (params) {
+      if (params.target !== undefined) {
+        if (params.target.eventData.componentType === 'xAxis' && params.target.eventData.targetType === 'axisLabel') {
+          this.gridIndex = params.target.eventData.xAxisIndex
+          this.axis = 'x'
+          this.position = 'bottom'
+        } else if (params.target.eventData.componentType === 'yAxis' && params.target.eventData.targetType === 'axisLabel') {
+          this.gridIndex = params.target.eventData.yAxisIndex
+          this.axis = 'y'
+          this.position = 'left'
+        }
+        this.showModal.minMaxPanel = true
+      }
+    },
+    setMinMax () {
+      this.updateAxisValMinMaxChart({
+        chartID: this.chartID,
+        axis: this.axis,
+        axisIndex: this.gridIndex,
+        minVal: this.minMaxInfo[this.gridIndex].min,
+        maxVal: this.minMaxInfo[this.gridIndex].max,
+      })
+      this.$emit('refreshChart', this.chartData[this.chartID])
+    },
+    ...mapMutations('replay', [types.chart.updateAxisValMinMax]),
+  },
+  mounted () {
+
+  },
+  destroyed () {
+  },
+}
+
+</script>

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

@@ -0,0 +1,206 @@
+<template>
+  <div v-if="showPanel">
+    <va-input
+      v-model="showWhichCycles"
+      @change="setCycle"
+      :label="$t('See which cycles')"
+    />
+  </div>
+</template>
+
+<script>
+import { mapMutations, mapGetters } from 'vuex'
+import { mapFields } from 'vuex-map-fields'
+import types from '@/store/modules/analysis/replay/types'
+import { download } from '@/data/download/Download'
+
+export default {
+  name: 'change-cycle',
+  components: {
+  },
+  props: {
+    chartID: {
+      type: Number,
+      default: 1, // detail data
+    },
+    metaIndex: {
+      type: Number, // which meta file
+      default: 0,
+    },
+  },
+  created () {
+  },
+  data () {
+    return {
+      showPanel: false,
+      metaID: 0,
+      cycleNum: 0,
+      cycleDataID: 3, // [TODO] manage by data type factory
+    }
+  },
+  computed: {
+    ...mapFields('replay', [
+      'chartData',
+      'recInfo',
+      'metaList',
+      'currentScale',
+      'sampleMethod',
+      'axisXDataType',
+      'axisYDataType',
+      'axisXLabelScale',
+      'axisYLabelScale',
+      'showWhichCycles',
+    ]),
+  },
+  watch: {
+  },
+  methods: {
+    slices () {
+      const cycleList = this.showWhichCycles.split(',')
+      if (cycleList.length === 1 && cycleList[0] === '') {
+        return ''
+      }
+      for (let i = 0; i < cycleList.length; i++) {
+        const element = cycleList[i]
+        if (element.includes('-')) {
+          const startIndex = element.split('-')[0]
+          const endIndex = element.split('-')[1]
+          cycleList[i] = startIndex
+          for (let j = endIndex; j >= parseInt(startIndex) + 1; j--) {
+            cycleList.splice(i + 1, 0, j.toString()) // arr.splice(index, 0, item); will insert item into arr at the specified index (deleting 0 items first, that is, it's just an insert).
+          }
+        }
+      }
+      const cycleSet = new Set(cycleList)
+      const sortedCycleList = [...cycleSet].sort() // ref: https://stackoverflow.com/questions/33089695/how-can-i-sort-an-es6-set
+      return sortedCycleList
+    },
+    init () {
+      this.cycleNum = this.metaList[this.metaIndex].parameter_set.CYCLE_NUMBER
+      const meta = this.metaList[this.metaIndex]
+      this.metaID = meta.id
+      this.isThisModeHasCycle = this.GLOBAL.hasCycleMode(this.metaList[this.metaIndex].parameter_set.MODE, meta.device.library_name)
+      if (this.isThisModeHasCycle === true) {
+        this.showPanel = true
+      } else {
+        this.showPanel = false
+      }
+    },
+    clear () {
+      this.showWhichCycles = '1'
+    },
+    async setCycle () {
+      console.log('setCycle')
+      if (this.isThisModeHasCycle === true) {
+        const dataCycleList = this.recInfo[this.metaID][this.cycleDataID][this.currentScale]
+        const cycleDataList = []
+        for (let i = 0; i < dataCycleList.length; i++) {
+          if (dataCycleList[i].data.length === 0) {
+            const data = await this.getData(parseInt(this.currentScale), this.sampleMethod, dataCycleList[i].id, this.cycleDataID, this.metaList[this.metaIndex])
+            cycleDataList.push({ data: data })
+          } else {
+            cycleDataList.push({ data: dataCycleList[i].data })
+          }
+        }
+        const cycleDict = this.getCycleDictRec()(cycleDataList)
+        this.cycleNum = Object.keys(cycleDict).length
+        let dataXList
+        if (this.axisXDataType.description !== 'Time') {
+          dataXList = this.recInfo[this.metaID][this.axisXDataType.id][this.currentScale]
+        }
+        const dataYList = this.recInfo[this.metaID][this.axisYDataType.id][this.currentScale]
+        const filteredData = []
+
+        let counter = 0
+        for (let sliceIndex = 0; sliceIndex < this.cycleNum; sliceIndex++) {
+          // console.log(this.slices)
+          if (this.slices() === '' || this.slices().includes((sliceIndex + 1).toString())) {
+            // slice data
+            const value = cycleDict[sliceIndex + 1]
+            const startTime = value[0]
+            const endTime = value[1]
+            let startIndex = 0
+            let endIndex = 0
+            for (let i = 0; i < dataYList.length; i++) {
+              if (startTime >= parseInt(dataYList[i].start_time) && startTime <= parseInt(dataYList[i].end_time)) {
+                startIndex = i
+              }
+              if (endTime >= parseInt(dataYList[i].start_time) && endTime <= parseInt(dataYList[i].end_time)) {
+                endIndex = i
+              }
+            }
+
+            for (let i = startIndex; i <= endIndex; i++) {
+              const dataY = await this.getData(parseInt(this.currentScale), this.sampleMethod, dataYList[i].id, this.axisYDataType.id, this.metaList[this.metaIndex])
+              if (this.axisXDataType.description !== 'Time') {
+                const dataX = await this.getData(parseInt(this.currentScale), this.sampleMethod, dataXList[i].id, this.axisXDataType.id, this.metaList[this.metaIndex])
+                for (let j = 0, len = dataY.length; j < len; j++) {
+                  if (parseInt(dataY[j][0]) >= startTime && parseInt(dataY[j][0]) <= endTime) {
+                    let x
+                    let y
+                    if (this.axisXLabelScale.description === 'Log') {
+                      x = Math.abs(dataX[j][1])
+                    } else if (this.axisXLabelScale.description === 'Linear') {
+                      x = dataX[j][1]
+                    }
+                    if (this.axisYLabelScale.description === 'Log') {
+                      y = Math.abs(dataY[j][1])
+                    } else if (this.axisYLabelScale.description === 'Linear') {
+                      y = dataY[j][1]
+                    }
+                    filteredData.push([x, y])
+                  }
+                }
+              } else {
+                for (let j = 0, len = dataY.length; j < len; j++) {
+                  if (parseInt(dataY[j][0]) >= startTime && parseInt(dataY[j][0]) <= endTime) {
+                    if (this.axisYLabelScale.description === 'Log') {
+                      dataY[j][1] = Math.abs(dataY[j][1])
+                    } else if (this.axisYLabelScale.description === 'Linear') {
+                      // do nothing
+                    }
+                    filteredData.push(dataY[j])
+                  }
+                }
+              }
+            }
+
+            this.updateSeriesChart({
+              chartID: this.chartID,
+              seriesIndex: this.metaIndex,
+              data: filteredData,
+            })
+            if (this.axisXDataType.description === 'Time') {
+              if (counter === 0) {
+                this.chartData[this.chartID].xAxis[this.metaIndex].min = startTime
+              }
+              this.chartData[this.chartID].xAxis[this.metaIndex].max = endTime
+              counter++
+            }
+            // this.$emit('refreshChart', this.chartData[this.chartID])
+          }
+        }
+      }
+    },
+    getData: async function (scale, sampleMethod, id, channel, meta) {
+      if (scale === 1) {
+        return await download.rawByIDChannels(id, channel, meta)
+      } else {
+        if (sampleMethod === 'mean') {
+          return await download.miniMeanByIDChannel(id, channel, meta)
+        } else if (sampleMethod === 'random') {
+          return await download.miniRandomByIDChannel(id, channel, meta)
+        }
+      }
+    },
+    ...mapMutations('replay', [types.chart.updateSeries]),
+    ...mapGetters('replay', [types.rec.getCycleDict]),
+  },
+  mounted () {
+
+  },
+  destroyed () {
+  },
+}
+
+</script>

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

@@ -0,0 +1,196 @@
+<template>
+  <div>
+    <va-select
+      @input="changeScale()"
+      :label="''"
+      v-model="scaleFormat"
+      textBy="description"
+      class="va-select-without-margin"
+      :options="scaleOptions"
+      :noClear='true'
+    />
+  </div>
+</template>
+
+<script>
+import { mapActions, mapMutations, mapGetters } from 'vuex'
+import { mapFields } from 'vuex-map-fields'
+import types from '@/store/modules/analysis/replay/types'
+import { download } from '@/data/download/Download'
+
+export default {
+  name: 'change-scale',
+  components: {
+  },
+  props: {
+    chartID: {
+      type: Number, // detail data
+      default: 1,
+    },
+    axis: {
+      type: String, // x or y
+    },
+    metaIndex: {
+      type: Number, // which meta file
+      default: 0,
+    },
+  },
+  created () {
+  },
+  computed: {
+    displayType () {
+      return {
+        x: this.axisXLabelScale.description === 'Log' ? 'log' : 'value',
+        y: this.axisYLabelScale.description === 'Log' ? 'log' : 'value',
+      }
+    },
+
+    ...mapFields('replay', [
+      'chartData',
+      'recInfo',
+      'metaList',
+      'axisXLabelScale',
+      'axisYLabelScale',
+      'axisXDataType',
+      'axisYDataType',
+      'absToggleStatus',
+      'startTimeCurrent',
+      'endTimeCurrent',
+      'currentScale',
+      'sampleMethod',
+    ]),
+  },
+  methods: {
+    init (deviceName) {
+      this.deviceName = deviceName
+      this.metaInfo = this.metaList[this.metaIndex]
+      this.metaID = this.metaInfo.id
+      if (this.axis === 'x') {
+        this.axisXLabelScale = this.scaleOptions[0] // 0 mean use default unit
+        this.scaleFormat = this.axisXLabelScale
+      } else if (this.axis === 'y') {
+        this.axisYLabelScale = this.scaleOptions[0] // 0 mean use default unit
+        this.scaleFormat = this.axisYLabelScale
+      }
+    },
+    changeScale () {
+      if (this.axis === 'x') {
+        this.axisXLabelScale = this.scaleFormat
+      } else if (this.axis === 'y') {
+        this.axisYLabelScale = this.scaleFormat
+      }
+      if (this.deviceName.startsWith('Neulive')) {
+        const keys = Object.keys(this.metaInfo.mini_data)
+        for (let gridIndex = 0; gridIndex < keys.length; gridIndex++) {
+          const ch = keys[gridIndex]
+          if (parseInt(ch) < 256) { // 256: x, 257: y, 258: z, 259: mag
+            this.calculateScaleHelper(gridIndex, ch)
+          }
+        }
+      } else if (this.deviceName === 'EliteZM15' || this.deviceName === 'EliteEIS') {
+        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])
+          }
+        }
+        this.updateSeriesChart({
+          chartID: this.chartID,
+          seriesIndex: gridIndex,
+          data: seriesData,
+        })
+      } else if (this.scaleFormat.description === 'Linear') {
+        // console.log(this.recInfo)
+        if (this.deviceName.startsWith('Neulive')) {
+          // [Region] get the subfile index
+          seriesData = []
+          const dataYList = this.recInfo[this.metaID][ch][this.currentScale]
+          let startIndex = 0
+          let endIndex = 0
+          for (let i = 0; i < dataYList.length; i++) {
+            if (this.startTimeCurrent >= parseInt(dataYList[i].start_time) && this.startTimeCurrent <= parseInt(dataYList[i].end_time)) {
+              startIndex = i
+            }
+            if (this.endTimeCurrent >= parseInt(dataYList[i].start_time) && this.endTimeCurrent <= parseInt(dataYList[i].end_time)) {
+              endIndex = i
+            }
+          }
+          // [EndRegion]
+          for (let i = startIndex; i <= endIndex; i++) {
+            const data = await this.getData(parseInt(this.currentScale), this.sampleMethod, dataYList[i].id, ch, this.metaInfo)
+            for (let j = 0, len = data.length; j < len; j++) {
+              if (parseInt(data[j][0]) >= this.startTimeCurrent && parseInt(data[j][0]) <= this.endTimeCurrent) {
+                const processedData = data[j]
+                if (this.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])
+                }
+                seriesData.push(processedData)
+              }
+            }
+          }
+        } else if (this.deviceName === 'EliteZM15' || this.deviceName === 'EliteEIS') {
+          this.$emit('changeAxis', this.metaIndex)
+          this.$emit('clearCycle')
+        }
+      }
+      this.setAxisDisplayChart({ type: this.displayType[this.axis], axis: this.axis, chartID: this.chartID, gridIndex: gridIndex })
+    },
+    getData: async function (scale, sampleMethod, id, channel, meta) {
+      if (scale === 1) {
+        return await download.rawByIDChannels(id, channel, meta)
+      } else {
+        if (sampleMethod === 'mean') {
+          return await download.miniMeanByIDChannel(id, channel, meta)
+        } else if (sampleMethod === 'random') {
+          return await download.miniRandomByIDChannel(id, channel, meta)
+        }
+      }
+    },
+    ...mapActions('replay', [types.chart.setAxisDisplay]),
+    ...mapMutations('replay', [types.chart.updateSeries]),
+    ...mapGetters('replay', [types.rec.getCycleDict]),
+  },
+  mounted () {
+  },
+  data () {
+    return {
+      deviceName: '',
+      metaID: 0,
+      metaInfo: null,
+      scaleFormat: { id: 0, description: 'Linear' },
+      scaleOptions: [
+        {
+          id: 0,
+          description: 'Linear',
+        },
+        {
+          id: 1,
+          description: 'Log',
+        },
+      ],
+    }
+  },
+  destroyed () {
+  },
+}
+
+</script>
+
+<style lang="scss">
+  .va-select-without-margin {
+    .va-select {
+      margin-bottom: 0;
+    }
+  }
+</style>

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

@@ -0,0 +1,414 @@
+<template>
+  <div>
+    <va-select
+      @input="changeUnit()"
+      :label="''"
+      v-if="deviceName!=='EliteEIS'"
+      v-model="valueFormat"
+      textBy="unit"
+      class="va-select-without-margin"
+      :options="valueFormatOptions[dataType]"
+      :noClear='true'
+    />
+    <va-select
+      @input="changeUnit()"
+      :label="''"
+      v-if="deviceName==='EliteEIS'"
+      v-model="valueFormat"
+      textBy="unit"
+      class="va-select-without-margin"
+      :options="eisValueFormatOptions[dataType]"
+      :noClear='true'
+    />
+  </div>
+</template>
+
+<script>
+import { mapMutations } from 'vuex'
+import { mapFields } from 'vuex-map-fields'
+import types from '@/store/modules/analysis/replay/types'
+
+export default {
+  name: 'change-unit',
+  components: {
+  },
+  props: {
+    axis: {
+      type: String, // x or y
+    },
+    metaIndex: {
+      type: Number, // which meta file
+      default: 0,
+    },
+  },
+  created () {
+  },
+  computed: {
+    ...mapFields('replay', [
+      'chartData',
+      'metaList',
+      'valueFormatX',
+      'valueFormatY',
+      'axisXDataType',
+      'axisYDataType',
+    ]),
+  },
+  methods: {
+    initDefaultUnit (axis) {
+      if (this.deviceName.startsWith('Neulive')) {
+        if (axis === 'x') {
+          return this.valueFormatOptions[this.dataType].find(function (item, index, array) {
+            return item.unit === 'auto'
+          })
+        } else if (axis === 'y') {
+          return this.valueFormatOptions[this.dataType].find(function (item, index, array) {
+            return item.unit === 'uV'
+          })
+        }
+      } else if (this.deviceName === 'EliteZM15') {
+        return this.valueFormatOptions[this.dataType][0]
+      } else if (this.deviceName === 'EliteEIS') {
+        return this.eisValueFormatOptions[this.dataType][0]
+      }
+    },
+    init (deviceName) {
+      this.deviceName = deviceName
+      if (this.deviceName.startsWith('Neulive')) {
+        // now neulive only v-t
+        if (this.axis === 'x') {
+          this.dataType = 'time'
+        } else if (this.axis === 'y') {
+          this.dataType = 'voltage'
+        }
+      } else if (this.deviceName === 'EliteZM15') {
+        // 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]
+        const xValue = setting[1]
+        const yType = setting[2]
+        const yValue = setting[3]
+        let settingType
+        let settingValue
+        if (this.axis === 'x') {
+          settingType = xType
+          settingValue = xValue
+        } else if (this.axis === 'y') {
+          settingType = yType
+          settingValue = yValue
+        }
+
+        if (settingType === 'Elite') {
+          // 1: I, 2: V, 3: R
+          if (settingValue === 1) {
+            this.dataType = 'current'
+          } else if (settingValue === 2) {
+            this.dataType = 'voltage'
+          } else if (settingValue === 3) {
+            this.dataType = 'resistance'
+          } else if (settingValue === 4) {
+            this.dataType = 'cycle'
+          }
+        } else if (settingType === 'Time') {
+          this.dataType = 'time'
+        }
+      } else if (this.deviceName === 'EliteEIS') {
+        const setting = this.GLOBAL.getDefaultChartTypeByMode(this.metaList[this.metaIndex].parameter_set.MODE, this.deviceName)
+        const xType = setting[0]
+        const xValue = setting[1]
+        const yType = setting[2]
+        const yValue = setting[3]
+        let settingType
+        let settingValue
+        if (this.axis === 'x') {
+          settingType = xType
+          settingValue = xValue
+        } else if (this.axis === 'y') {
+          settingType = yType
+          settingValue = yValue
+        }
+
+        if (settingType === 'EliteEIS') {
+          if (settingValue === 3) {
+            this.dataType = 'frequency'
+          } else if (settingValue === 5 || settingValue === 6 || settingValue === 7) {
+            this.dataType = 'impedance'
+          } else if (settingValue === 8) {
+            this.dataType = 'phase'
+          } else if (settingValue === 9) {
+            this.dataType = 'current'
+          } else if (settingValue === 10) {
+            this.dataType = 'default'
+          }
+        } else if (settingType === 'Elite') {
+          // 1: I, 2: V, 3: R
+          if (settingValue === 1) {
+            this.dataType = 'current'
+          } else if (settingValue === 2) {
+            this.dataType = 'voltage'
+          } else if (settingValue === 3) {
+            this.dataType = 'resistance'
+          }
+        } else if (settingType === 'Time') {
+          this.dataType = 'time'
+        }
+      }
+      if (this.axis === 'x') {
+        this.valueFormatX = this.initDefaultUnit(this.axis)
+        this.valueFormat = this.valueFormatX
+      } else if (this.axis === 'y') {
+        this.valueFormatY = this.initDefaultUnit(this.axis)
+        this.valueFormat = this.valueFormatY
+      }
+      this.changeUnit()
+    },
+    changeUnit () {
+      if (this.axis === 'x') {
+        this.valueFormatX = this.valueFormat
+      } else if (this.axis === 'y') {
+        this.valueFormatY = this.valueFormat
+      }
+      const chartID = 1 // detail data
+      if (this.deviceName.startsWith('Neulive')) {
+        const keys = Object.keys(this.metaList[this.metaIndex].mini_data)
+        for (let axisIndex = 0; axisIndex < keys.length; axisIndex++) {
+          const key = keys[axisIndex]
+          this.updateAxisLabelChart({
+            chartID: chartID,
+            axis: this.axis,
+            axisIndex: axisIndex,
+            channel: parseInt(key),
+          })
+        }
+      } else if (this.deviceName === 'EliteZM15' || this.deviceName === 'EliteEIS') {
+        this.updateAxisLabelChart({
+          chartID: chartID,
+          axis: this.axis,
+          axisIndex: this.metaIndex,
+          channel: -1, // any num < 256, cuz channel only use for determining whether add unit text
+        })
+      }
+      this.$emit('refreshChart', this.chartData[chartID])
+    },
+    changeUnitByAxis () {
+      if (this.axis === 'x') {
+        if (this.axisXDataType.description === 'Current') {
+          this.dataType = 'current'
+        } else if (this.axisXDataType.description === 'Voltage') {
+          this.dataType = 'voltage'
+        } else if (this.axisXDataType.description === 'Resistance') {
+          this.dataType = 'resistance'
+        } else if (this.axisXDataType.description === 'Time') {
+          this.dataType = 'time'
+        } else if (this.axisXDataType.description === 'Cycle') {
+          this.dataType = 'cycle'
+        } else if (this.axisXDataType.description === 'Frequency') {
+          this.dataType = 'frequency'
+        } else if (this.axisXDataType.description === 'Z_imag' || this.axisXDataType.description === 'Z_real' || this.axisXDataType.description === 'Impedance') {
+          this.dataType = 'impedance'
+        } else if (this.axisXDataType.description === 'Phase') {
+          this.dataType = 'phase'
+        } else if (this.axisXDataType.description === 'Gain Level') {
+          this.dataType = 'default'
+        }
+      } else if (this.axis === 'y') {
+        if (this.axisYDataType.description === 'Current') {
+          this.dataType = 'current'
+        } else if (this.axisYDataType.description === 'Voltage') {
+          this.dataType = 'voltage'
+        } else if (this.axisYDataType.description === 'Resistance') {
+          this.dataType = 'resistance'
+        } else if (this.axisYDataType.description === 'Cycle') {
+          this.dataType = 'cycle'
+        } else if (this.axisYDataType.description === 'Frequency') {
+          this.dataType = 'frequency'
+        } else if (this.axisYDataType.description === 'Z_imag' || this.axisYDataType.description === 'Z_real' || this.axisYDataType.description === 'Impedance') {
+          this.dataType = 'impedance'
+        } else if (this.axisYDataType.description === 'Phase') {
+          this.dataType = 'phase'
+        } else if (this.axisYDataType.description === 'Gain Level') {
+          this.dataType = 'default'
+        }
+      }
+      if (this.deviceName === 'EliteZM15') {
+        this.valueFormat = this.valueFormatOptions[this.dataType][0]
+      } else if (this.deviceName === 'EliteEIS') {
+        this.valueFormat = this.eisValueFormatOptions[this.dataType][0]
+      }
+      this.changeUnit()
+    },
+    // call vuex to mutate chart label formatter by unit and axis
+    ...mapMutations('replay', [types.chart.updateAxisLabel]),
+  },
+  mounted () {
+  },
+  data () {
+    return {
+      deviceName: '',
+      dataType: '',
+      valueFormat: {},
+      valueFormatOptions: { // below id: 0 mean default
+        current: [
+          {
+            id: 1,
+            unit: 'uA',
+            unitScale: 1000,
+          },
+          {
+            id: 0,
+            unit: 'nA',
+            unitScale: 1,
+          },
+          {
+            id: 2,
+            unit: 'mA',
+            unitScale: 1000000,
+          },
+        ],
+        voltage: [ // Voltage
+          {
+            id: 1,
+            unit: 'mV',
+            unitScale: 1000,
+          },
+          {
+            id: 0,
+            unit: 'uV',
+            unitScale: 1,
+          },
+          {
+            id: 2,
+            unit: 'V',
+            unitScale: 1000000,
+          },
+        ],
+        resistance: [ // Resistance
+          {
+            id: 1,
+            unit: 'Ω',
+            unitScale: 1000,
+          },
+          {
+            id: 0,
+            unit: 'mΩ',
+            unitScale: 1,
+          },
+          {
+            id: 2,
+            unit: 'kΩ',
+            unitScale: 1000000,
+          },
+          {
+            id: 3,
+            unit: 'MΩ',
+            unitScale: 1000000000,
+          },
+        ],
+        cycle: [ // Time
+          {
+            id: 0,
+            unit: 'cycle',
+            unitScale: 1,
+          },
+        ],
+        time: [ // Time
+          {
+            id: 0,
+            unit: 'auto',
+            unitScale: 1,
+          },
+        ],
+      },
+      eisValueFormatOptions: { // below id: 0 mean default
+        default: [
+          {
+            id: 0,
+            unit: 'default',
+            unitScale: 1,
+          },
+        ],
+        current: [
+          {
+            id: 0,
+            unit: 'nA',
+            unitScale: 1,
+          },
+          {
+            id: 1,
+            unit: 'uA',
+            unitScale: 1e3,
+          },
+          {
+            id: 2,
+            unit: 'mA',
+            unitScale: 1e6,
+          },
+        ],
+        frequency: [ // Frequency
+          {
+            id: 0,
+            unit: 'mHz',
+            unitScale: 1,
+          },
+          {
+            id: 1,
+            unit: 'Hz',
+            unitScale: 1e3,
+          },
+          {
+            id: 2,
+            unit: 'kHz',
+            unitScale: 1e6,
+          },
+        ],
+        impedance: [ // Impedance
+          {
+            id: 1,
+            unit: 'Ω',
+            unitScale: 1,
+          },
+          {
+            id: 0,
+            unit: 'mΩ',
+            unitScale: 1e-3,
+          },
+          {
+            id: 2,
+            unit: 'kΩ',
+            unitScale: 1e3,
+          },
+          {
+            id: 3,
+            unit: 'MΩ',
+            unitScale: 1e6,
+          },
+        ],
+        time: [ // Time
+          {
+            id: 0,
+            unit: 'auto',
+            unitScale: 1,
+          },
+        ],
+        phase: [ // Phase
+          {
+            id: 0,
+            unit: '°',
+            unitScale: 1,
+          },
+        ],
+      },
+    }
+  },
+  destroyed () {
+  },
+}
+
+</script>
+
+<style lang="scss">
+  .va-select-without-margin {
+    .va-select {
+      margin-bottom: 0;
+    }
+  }
+</style>

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

@@ -0,0 +1,60 @@
+<template>
+  <div class="row flex sm12 xl12 md12 xs12 align--center my-0 py-0">
+    <div class="flex sm4 xl4 md4 xs4 px-0 mx-0">
+      <p class="display-6">Window size<p/>
+    </div>
+    <div class="flex sm8 xl8 md8 xs8 px-0 mx-0">
+      <va-input
+        @keyup.enter="itemChange(windowSize)"
+        @blur="itemChange(windowSize)"
+        v-model="windowSize"
+        class="mb-0"
+      >
+        <p slot="append" style="margin-right: 0;" small>
+          µs
+        </p>
+      </va-input>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import { mapFields } from 'vuex-map-fields'
+
+export default {
+  name: 'ChangeWindowSize',
+  components: {
+  },
+  computed: {
+    ...mapFields('replay', [
+      'startTimeCurrent',
+      'endTimeCurrent',
+      'windowSize',
+    ]),
+  },
+  props: {
+  },
+  created () {
+  },
+  data () {
+    return {
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    itemChange (val) {
+      this.windowSize = parseInt(val)
+      // this.endTimeCurrent = this.startTimeCurrent + parseInt(val)
+      // this.$emit('reDraw')
+    },
+  },
+  async mounted () {
+  },
+  destroyed () {
+  },
+  watch: {
+  },
+}
+</script>

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

@@ -0,0 +1,118 @@
+<template>
+  <div class="row flex sm12 xl12 md12 xs12 px-0 py-0 mx-0 my-0">
+    <div class="flex sm6 xl6 md6 xs6 px-0 mx-0">
+      <p class="display-6"> Window Start <p/>
+      <va-input
+        @keyup.enter="startItemChange(startTimeInput)"
+        @blur="startItemChange(startTimeInput)"
+        v-model="startTimeInput"
+        class="mb-0 flex-child"
+      >
+        <p slot="append" style="margin-right: 0;" small>
+          ms
+        </p>
+      </va-input>
+    </div>
+    <div class="flex sm6 xl6 md6 xs6 px-0 mx-0">
+      <p class="display-6"> Window Size <p/>
+      <va-input
+        @keyup.enter="lenItemChange(windowLengthInput)"
+        @blur="lenItemChange(windowLengthInput)"
+        v-model="windowLengthInput"
+        class="mb-0 flex-child"
+      >
+        <p slot="append" style="margin-right: 0;" small>
+          ms
+        </p>
+      </va-input>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import { mapFields } from 'vuex-map-fields'
+
+export default {
+  name: 'change-window-start-and-size',
+  components: {
+  },
+  props: {
+  },
+  computed: {
+    startTimeInput: {
+      get () {
+        return this.startTime / 1e3
+      },
+      set (val) {
+        this.startTime = val * 1e3
+        this.endTime = this.startTime + this.windowLength
+      },
+    },
+    windowLengthInput: {
+      get () {
+        return this.windowLength / 1e3
+      },
+      set (val) {
+        this.windowLength = val * 1e3
+        this.endTime = this.startTime + this.windowLength
+      },
+    },
+
+    ...mapFields('replay', [
+      'startTime',
+      'endTime',
+      'windowLength',
+    ]),
+  },
+  created () {
+  },
+  data () {
+    return {
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    init () {
+      this.windowLength = parseInt(this.endTime) - parseInt(this.startTime)
+    },
+    startItemChange (val) {
+      this.startTime = parseInt(val * 1e3) // us
+      this.windowLength = parseInt(this.windowLength)
+      this.endTime = this.startTime + this.windowLength
+      this.$emit('changeOverviewDataZoom')
+    },
+    lenItemChange (val) {
+      this.startTime = parseInt(this.startTime)
+      this.windowLength = parseInt(val * 1e3) // us
+      this.endTime = this.startTime + this.windowLength
+      this.$emit('changeOverviewDataZoom')
+    },
+  },
+  async mounted () {
+  },
+  destroyed () {
+  },
+  watch: {
+  },
+}
+</script>
+
+<style lang="scss">
+  .flex-container {
+    display: flex;
+  }
+
+  .flex-child {
+    flex: 2;
+  }
+
+  .flex-child2 {
+    flex: 0;
+  }
+
+  .flex-child:first-child {
+    margin-right: 1px;
+  }
+</style>

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

@@ -0,0 +1,92 @@
+<template>
+  <div>
+    <va-button flat small color="gray" icon="fa fa-trash" @click.stop="deleteFileConfirm()"/>
+    <va-modal
+      v-model="showModal.deleteFile"
+      size="small"
+      :title="'DELETE'"
+      :message="`Delete File?`"
+      :okText=" $t('modal.confirm') "
+      @ok="deleteFile()"
+    >
+    </va-modal>
+  </div>
+</template>
+
+<script>
+import api from '@/data/api/index'
+import { mapFields } from 'vuex-map-fields'
+
+export default {
+  name: 'delete-file',
+  components: {
+  },
+  props: {
+  },
+  created () {
+  },
+  data () {
+    return {
+      showModal: {
+        deleteFile: false,
+      },
+      deleteInfoList: [],
+      deleteInfoTemplate: {
+        path: '',
+        name: '',
+        metaID: 0, // id will be set later
+        rawChannelAndIDArrays: [], // list of lists
+        miniChannelAndIDArrays: [], // list of lists
+      },
+    }
+  },
+  computed: {
+    ...mapFields('replay', [
+      'metaList',
+    ]),
+  },
+  watch: {
+  },
+  methods: {
+    deleteFileConfirm: function () {
+      for (let i = 0; i < this.metaList.length; i++) {
+        const info = this.metaList[i]
+        this.deleteInfoTemplate.path = info.path
+        this.deleteInfoTemplate.name = info.name
+        this.deleteInfoTemplate.metaID = info.id
+        this.deleteInfoTemplate.rawChannelAndIDArrays = [] // list of lists
+        this.deleteInfoTemplate.miniChannelAndIDArrays = [] // list of lists
+        for (const [channel, idArray] of Object.entries(info.raw_data)) {
+          this.deleteInfoTemplate.rawChannelAndIDArrays.push([channel, idArray[0]])
+        }
+        for (const [channel, scaleObject] of Object.entries(info.mini_data)) {
+          for (const idArray of Object.values(scaleObject)) {
+            this.deleteInfoTemplate.miniChannelAndIDArrays.push([channel, idArray[0]])
+          }
+        }
+        this.deleteInfoList.push(JSON.parse(JSON.stringify(this.deleteInfoTemplate))) // deep copy data
+      }
+      this.showModal.deleteFile = true
+    },
+    deleteFile: async function () {
+      for (let i = 0; i < this.deleteInfoList.length; i++) {
+        const deleteInfo = this.deleteInfoList[i]
+        await api.meta.update(deleteInfo.metaID, { deleted: true })
+        await api.meta.clearDel()
+      }
+      await this.deleteFileDone()
+    },
+    deleteFileDone: async function () {
+      this.showToast('Deleted success', {
+        position: 'bottom-right',
+      })
+      this.$router.go(-1)
+    },
+  },
+  mounted () {
+  },
+  destroyed () {
+  },
+}
+
+</script>

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

@@ -0,0 +1,49 @@
+<template>
+  <div>
+    <va-button flat small color="gray" icon="fa fa-download" @click.stop="downloadCSV()"/>
+  </div>
+</template>
+
+<script>
+// import { download } from '@/data/download/Download'
+// import { exportData } from '@/data/export/export'
+import { mapFields } from 'vuex-map-fields'
+
+export default {
+  name: 'download-file',
+  components: {
+  },
+  props: {
+  },
+  created () {
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+    ...mapFields('replay', [
+      'metaList',
+    ]),
+  },
+  watch: {
+  },
+  methods: {
+    downloadCSV: async function () {
+      for (let i = 0; i < this.metaList.length; i++) {
+        const meta = this.metaList[i]
+        if (meta.device.library_name.indexOf('Elite') >= 0) {
+          window.open('http://' + location.href.split('/')[2].split(':')[0] + '/#/download/excel/' + meta.id)
+        } else if (meta.device.library_name.indexOf('Neulive') >= 0) {
+          window.open('http://' + location.href.split('/')[2].split(':')[0] + '/#/download/csv/' + meta.id)
+        }
+      }
+    },
+  },
+  mounted () {
+  },
+  destroyed () {
+  },
+}
+
+</script>

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

@@ -0,0 +1,141 @@
+<template>
+  <div>
+    <va-button flat small color="gray" icon="fa fa-file-text-o" @click.stop="editFileConfirm()"> {{ filename }} </va-button>
+    <va-modal
+      class="flex sm12 xl12 md12 xs12"
+      v-model="showModal.editFile"
+      size="small"
+      :title="'CHANGE FILE NAME'"
+      :okText=" $t('modal.confirm') "
+      @ok="editFile()"
+      @cancel="undoEdit()"
+    >
+      <va-input
+        :value="editInfo.changedName"
+        :label="'Name'"
+        :placeholder="editInfo.name"
+        :success="editInfo.success"
+        :error="editInfo.error"
+        :error-messages="editInfo.errorMessages"
+        @input="checkFileNameValidate"
+        removable
+      />
+    </va-modal>
+  </div>
+</template>
+
+<script>
+import api from '@/data/api/index'
+import { debounce } from 'lodash'
+import { file } from '@/data/file/File'
+import { mapFields } from 'vuex-map-fields'
+
+export default {
+  name: 'edit-file-name',
+  components: {
+  },
+  props: {
+  },
+  created () {
+  },
+  data () {
+    return {
+      fileLists: [],
+      showModal: {
+        editFile: false,
+      },
+      editInfo: {
+        info: { id: 0 }, // id will be set in init()
+        changedName: '',
+        success: false,
+        error: false,
+        errorMessagesAll: ['File name contains illegal character', 'File name empty', 'File name exist'],
+        errorMessages: [],
+      },
+      filename: '',
+    }
+  },
+  computed: {
+    ...mapFields('replay', [
+      'metaList',
+    ]),
+  },
+  watch: {
+  },
+  methods: {
+    init () {
+      // [TODO] 0: not sure future UX design
+      const meta = this.metaList[0]
+      this.updateFileLists()
+      this.filename = meta.name
+      this.editInfo.changedName = meta.name
+      this.editInfo.info.id = meta.id
+    },
+    editFileConfirm () {
+      this.updateFileLists()
+      this.showModal.editFile = true
+    },
+    async updateFileLists () {
+      this.fileLists = []
+      // [TODO] 0: not sure future UX design
+      const meta = this.metaList[0]
+      file.clearFileList()
+      const files = await api.meta.getByParent('folder', meta.parent.folder[0])
+      file.updateFileList(files)
+      const tmpFiles = file.getFileList()
+      for (let i = 0; i < tmpFiles.length; i++) {
+        const tmp = tmpFiles[i]
+        this.fileLists.push(tmp)
+      }
+    },
+    editFile: async function () {
+      if (this.editInfo.success === true) {
+        await api.meta.update(this.editInfo.info.id, { name: this.editInfo.changedName })
+        this.editInfo.name = this.editInfo.changedName
+        this.filename = this.editInfo.changedName
+      }
+    },
+    undoEdit: function () {
+      this.editInfo.success = false
+      this.editInfo.error = false
+      this.editInfo.changedName = this.filename
+      this.editInfo.name = ''
+      this.editInfo.path = ''
+    },
+    checkFileNameValidate: debounce(function (term) {
+      const illegalChar = term.match(/[^(\w\-)]+/gm)
+      if (term.length === 0) {
+        // input text empty
+        this.editInfo.error = true
+        this.editInfo.success = false
+        this.editInfo.errorMessages.pop()
+        this.editInfo.errorMessages.push(this.editInfo.errorMessagesAll[1])
+      } else if (illegalChar !== null) {
+        // input text illegal
+        this.editInfo.error = true
+        this.editInfo.success = false
+        this.editInfo.errorMessages.pop()
+        this.editInfo.errorMessages.push(this.editInfo.errorMessagesAll[0] + ' ' + illegalChar[0])
+      } else {
+        const existedFile = this.fileLists.filter(file => file.name.replace('/', '') === term)
+        if (existedFile.length === 0) {
+          this.editInfo.error = false
+          this.editInfo.success = true
+        } else {
+          // file name exist
+          this.editInfo.error = true
+          this.editInfo.success = false
+          this.editInfo.errorMessages.pop()
+          this.editInfo.errorMessages.push(this.editInfo.errorMessagesAll[2])
+        }
+      }
+      this.editInfo.changedName = term
+    }, 200),
+  },
+  mounted () {
+  },
+  destroyed () {
+  },
+}
+
+</script>

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

@@ -0,0 +1,60 @@
+<template>
+  <div>
+    <va-button :icon="icon" @click="lockDataZoom"/>
+  </div>
+</template>
+
+<script>
+
+import { mapMutations } from 'vuex'
+import types from '@/store/modules/analysis/replay/types'
+import { mapFields } from 'vuex-map-fields'
+
+export default {
+  name: 'lock-data-zoom',
+  components: {
+  },
+  props: {
+    chartID: {
+      type: Number, // detail data
+      default: 0,
+    },
+  },
+  created () {
+  },
+  data () {
+    return {
+      icon: 'fa fa-unlock',
+    }
+  },
+  computed: {
+    ...mapFields('replay', [
+      'chartData',
+      'isLockDataZoom',
+    ]),
+  },
+  watch: {
+  },
+  methods: {
+    lockDataZoom () {
+      this.isLockDataZoom = !this.isLockDataZoom
+      this.lockDataZoomChart({
+        chartAllData: this.chartData,
+        chartID: 0,
+        zoomLock: this.isLockDataZoom,
+      })
+      if (this.isLockDataZoom === true) {
+        this.icon = 'fa fa-lock'
+      } else if (this.isLockDataZoom === false) {
+        this.icon = 'fa fa-unlock'
+      }
+    },
+    ...mapMutations('replay', [types.chart.lockDataZoom]),
+  },
+  mounted () {
+  },
+  destroyed () {
+  },
+}
+
+</script>

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

@@ -0,0 +1,62 @@
+<template>
+  <div>
+    <span class="box_inline-block"> use SD card data </span>
+    <va-toggle :disable="disableToggle" flat small class="box_inline-block" v-model="useSdCardData"/>
+  </div>
+</template>
+
+<script>
+
+import { mapFields } from 'vuex-map-fields'
+
+export default {
+  name: 'SdCardToggle',
+  components: {
+  },
+  computed: {
+    ...mapFields('replay', [
+      'metaList',
+      'useSdCardData',
+    ]),
+  },
+  props: {
+    metaIndex: {
+      type: Number,
+      default: 0,
+    },
+  },
+  created () {
+  },
+  data () {
+    return {
+      disableToggle: true,
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    init () {
+      if (this.metaList[this.metaIndex].sd_data_uploaded === true) {
+        this.disableToggle = false
+      } else {
+        this.disableToggle = true
+        this.useSdCardData = false
+      }
+    },
+  },
+  async mounted () {
+  },
+  destroyed () {
+  },
+  watch: {
+  },
+}
+</script>
+
+<style lang="scss">
+  .box_inline-block {
+    padding: 1px;
+    margin: 1px;
+    display: inline-block;
+  }
+</style>

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

@@ -0,0 +1,425 @@
+<template>
+  <va-tree-root>
+    <va-tree-category label="Experiment Setting" :isOpen="false">
+      <pre><div style="text-transform: none;" class="title mb-3" :style="{color: this.$themes.primary}" v-html="content"></div></pre>
+    </va-tree-category>
+  </va-tree-root>
+</template>
+
+<script>
+import { mapFields } from 'vuex-map-fields'
+import paramTable from '@/data/param-table/index.js'
+
+export default {
+  name: 'show-parameter',
+  components: {
+  },
+  props: {
+    metaIndex: {
+      type: Number, // which meta file
+      default: 0,
+    },
+  },
+  created () {
+  },
+  data () {
+    return {
+      deviceName: '',
+      content: '',
+      showDict: {},
+      // [region] for neulive
+      ampGainOptions: [
+        {
+          id: 0,
+          description: '25',
+        },
+        {
+          id: 1,
+          description: '100',
+        },
+        {
+          id: 2,
+          description: '400',
+        },
+        {
+          id: 3,
+          description: '800',
+        },
+      ],
+      stimulateElectrodeOptions: [
+        {
+          label: 'Monopolar',
+          value: 0,
+        },
+        {
+          label: 'Bipolar',
+          value: 1,
+        },
+      ],
+      cycleNumberOptions: [
+        {
+          label: 'limite',
+          value: 0,
+        },
+        {
+          label: 'Unlimite',
+          value: 1,
+        },
+      ],
+      patternModeOptions: [
+        {
+          label: 'Monophasic',
+          value: 0,
+        },
+        {
+          label: 'Biphasic',
+          value: 1,
+        },
+      ],
+      unitOptions: [
+        {
+          label: 's',
+          value: 0,
+        },
+        {
+          label: 'ms',
+          value: 1,
+        },
+        {
+          label: 'us',
+          value: 2,
+        },
+      ],
+      // [Endregion]
+      // [region] for elite
+      workingModeOptions: [
+        {
+          id: 0,
+          description: 'I-V Curve',
+        },
+        {
+          id: 1,
+          description: 'Cycle I-V',
+        },
+        {
+          id: 2,
+          description: 'Function Generator',
+        },
+        {
+          id: 3,
+          description: 'R-T Graph',
+        },
+        {
+          id: 4,
+          description: 'V-T Graph',
+        },
+        {
+          id: 5,
+          description: 'I-T Graph',
+        },
+        {
+          id: 6,
+          description: 'ADC_Test',
+        },
+        {
+          id: 7,
+          description: 'Constant Current',
+        },
+        {
+          id: 8,
+          description: 'Cyclic Voltammetry',
+        },
+        {
+          id: 9,
+          description: 'Cyclic Voltammetry-hi-cycles',
+        },
+        {
+          id: 10,
+          description: 'Linear Sweep Voltammetry',
+        },
+        {
+          id: 11,
+          description: 'Chronoamperometric Graph',
+        },
+      ],
+      currentRangeOptions: [
+        {
+          value: 0,
+          label: '<40 μA',
+        },
+        {
+          value: 1,
+          label: '30-1350 μA',
+        },
+        {
+          value: 2,
+          label: '>1000 μA',
+        },
+        {
+          value: 3,
+          label: 'Auto',
+        },
+      ],
+      stepTimeOptions: [
+        {
+          value: 0,
+          label: '0.5s',
+        },
+        {
+          value: 1,
+          label: '1.0s',
+        },
+        {
+          value: 2,
+          label: '2.0s',
+        },
+      ],
+      resisterRangeOptions: [
+        {
+          value: 0,
+          label: '>50 kΩ',
+        },
+        {
+          value: 1,
+          label: '2-100 kΩ',
+        },
+        {
+          value: 2,
+          label: '<10 kΩ',
+        },
+        {
+          value: 3,
+          label: 'Auto',
+        },
+      ],
+      eliteSampleRateOptions: [
+        {
+          value: 0,
+          label: '100',
+        },
+        {
+          value: 1,
+          label: '10',
+        },
+        {
+          value: 2,
+          label: '5',
+        },
+        {
+          value: 3,
+          label: '1',
+        },
+        {
+          value: 4,
+          label: '0.1',
+        },
+        {
+          value: 5,
+          label: '0.01',
+        },
+      ],
+      chargeOptions: [
+        {
+          value: 0,
+          label: 'Charge',
+        },
+        {
+          value: 1,
+          label: 'Discharge',
+        },
+      ],
+      // [Endregion]
+    }
+  },
+  computed: {
+    ...mapFields('replay', [
+      'metaList',
+    ]),
+  },
+  watch: {
+  },
+  methods: {
+    init (deviceName) {
+      this.deviceName = deviceName
+      const meta = this.metaList[this.metaIndex]
+      const params = meta.parameter_set
+      this.content += 'Duration: ' + parseInt(parseInt(meta.time_duration / 1e6) / 60) + ' m ' + parseInt((meta.time_duration % 6e7) / 1e6) + ' s<br/>'
+      this.content += '<br/>Parameter: <br/>'
+      if (this.deviceName.startsWith('Neulive')) {
+        // recording param
+        this.content += '<br/>  Recording: <br/>'
+        for (const [key, value] of Object.entries(params)) {
+          if (!(key.includes('sti') || key.includes('STI'))) {
+            let showKey = ''
+            let showValue = value
+            if (key === 'RECORDING_CH' || key === 'AXIS_CH' || key === 'AMP_GAIN' || key === 'SAMPLE_RATE') {
+              if (key === 'RECORDING_CH') {
+                showKey = 'Channels'
+                // convert decimal to binary
+                const binaryChannelValue = showValue.toString(2)
+                const channelValue = binaryChannelValue.split('')
+                showValue = ''
+                channelValue.forEach(function (value, i) {
+                  if (value === '1') {
+                    showValue += `${i + 1}  `
+                  }
+                })
+                if (showValue === '') {
+                  showValue = 'None'
+                }
+              } else if (key === 'AXIS_CH') {
+                showKey = '3-AXIS'
+                // convert decimal to binary
+                const binaryChannelValue = showValue.toString(2)
+                const channelValue = binaryChannelValue.split('').reverse()
+                showValue = ''
+                channelValue.forEach(function (value, i) {
+                  if (value === '1') {
+                    if (i === 0) {
+                      showValue += 'x '
+                    } else if (i === 1) {
+                      showValue += 'y '
+                    } else if (i === 2) {
+                      showValue += 'z '
+                    } else if (i === 3) {
+                      showValue += 'mag '
+                    }
+                  }
+                })
+                if (showValue === '') {
+                  showValue = 'None'
+                }
+              } else if (key === 'AMP_GAIN') {
+                showKey = 'Amp gain'
+                const targetID = (value + 1) % 4
+                for (let i = 0; i < this.ampGainOptions.length; i++) {
+                  if (this.ampGainOptions[i].id === targetID) {
+                    showValue = this.ampGainOptions[i].description
+                  }
+                }
+              } else if (key === 'SAMPLE_RATE') {
+                showKey = 'Sample Rate'
+                showValue = value
+              }
+              this.content += '    ' + showKey + ': ' + showValue + '<br/>'
+            }
+          }
+        }
+        // stimulation param
+        this.content += '<br/>  Stimulation: <br/>'
+        for (const [key, value] of Object.entries(params)) {
+          if (key.includes('sti') || key.includes('STI')) {
+            let showKey = ''
+            let showValue = value
+            if (key === 'STI_H_BRIDGE' || key === 'STI_CHANNEL' || key === 'STI_POLARITY' || key === 'CONTINUOUS_STI' ||
+                key === 'STI_AMPLITUDE' || key === 'STI_PATTERN' || key === 'STI_T1' || key === 'STI_T2' || key === 'STI_T3' || key === 'STI_T4') {
+              if (key === 'STI_H_BRIDGE') {
+                showKey = 'ELECTRODE'
+                if (value === true) {
+                  showValue = this.stimulateElectrodeOptions[1].label
+                } else {
+                  showValue = this.stimulateElectrodeOptions[0].label
+                }
+              } else if (key === 'STI_CHANNEL' || key === 'STI_POLARITY') {
+                if (key === 'STI_CHANNEL') {
+                  showKey = 'Channels'
+                } else {
+                  showKey = 'Polarity'
+                }
+                // convert decimal to binary
+                const binaryChannelValue = showValue.toString(2)
+                const channelValue = binaryChannelValue.split('')
+                showValue = ''
+                channelValue.forEach(function (value, i) {
+                  if (value === '1') {
+                    showValue += `${i + 1}  `
+                  }
+                })
+                if (showValue === '') {
+                  showValue = 'None'
+                }
+              } else if (key === 'CONTINUOUS_STI') {
+                showKey = 'CYCLE NUMBER'
+                if (value === true) {
+                  showValue = this.cycleNumberOptions[1].label
+                } else {
+                  showValue = this.cycleNumberOptions[0].label
+                }
+              } else if (key === 'STI_AMPLITUDE') {
+                showKey = 'AMPLITUDE (uA)'
+                showValue = value * 5
+              } else if (key === 'STI_PATTERN') {
+                showKey = 'PATTERN'
+                if (value === true) {
+                  showValue = this.patternModeOptions[1].label
+                } else {
+                  showValue = this.patternModeOptions[0].label
+                }
+              } else if (key === 'STI_T1') {
+                showKey = 'T1 Range'
+                showValue = `${value[0] * 10 / 1000} ms` // 10 is cuz 1 value = 10us, [0] is cuz now all values in array are same
+              } else if (key === 'STI_T2') {
+                showKey = 'T2 Range'
+                showValue = `${value[0] * 10 / 1000} ms` // 10 is cuz 1 value = 10us
+              } else if (key === 'STI_T3') {
+                showKey = 'T3 Range'
+                showValue = `${value[0] * 10 / 1000} ms` // 10 is cuz 1 value = 10us
+              } else if (key === 'STI_T4') {
+                showKey = 'T4 Range'
+                showValue = `${value[0] * 10 / 1000} ms` // 10 is cuz 1 value = 10us
+              }
+              this.content += '    ' + showKey + ': ' + showValue + '<br/>'
+            }
+          }
+        }
+        if ('STI_T1' in params && 'STI_T2' in params && 'STI_T3' in params && 'STI_T4' in params) {
+          const period = (params.STI_T1[0] + params.STI_T2[0] + params.STI_T3[0] + params.STI_T4[0]) * 10 / 1000 // 10 is cuz 1 value = 10us
+          this.content += '    Frequency: ' + String(1000 / period) + ' Hz' + '<br/>' // 1000 is cuz 1s = 1000ms
+          this.content += '    Period: ' + String(period) + ' ms' + '<br/>'
+        }
+      } else if (this.deviceName === 'EliteZM15' || this.deviceName === 'EliteEIS') {
+        const mode = params.MODE
+        const modeName = paramTable[this.deviceName].MODE[mode].name
+        const showParams = paramTable[this.deviceName].MODE[mode].showParameter
+        this.showDict.MODE = modeName
+        if (modeName === 'Pulse Sensing') {
+          const duplicateParam = ['V_initial', 't_pulse', 'CURR_REC_START', 'CURR_REC_END']
+          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 remainParams = showParams.filter((e) => { // 差集
+            return duplicateParam.indexOf(e) === -1
+          })
+          for (const key of remainParams) {
+            this.fillShowDict(key, params[key])
+          }
+        } else {
+          for (const key of showParams) {
+            this.fillShowDict(key, params[key])
+          }
+        }
+      }
+      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
+      this.showDict[name] = unit !== undefined ? expVal.toString() + unit : expVal.toString()
+    },
+    dump () {
+      for (const [showKey, showValue] of Object.entries(this.showDict)) {
+        this.content += '    ' + showKey + ': ' + showValue + '<br/>'
+      }
+    },
+  },
+}
+
+</script>

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

@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <p class="display-6"> Resample: {{ currentScale }} to 1 <p/>
+  </div>
+</template>
+
+<script>
+import { mapFields } from 'vuex-map-fields'
+
+export default {
+  name: 'show-resample-rate',
+  components: {
+  },
+  props: {
+  },
+  created () {
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+    ...mapFields('replay', [
+      'currentScale',
+    ]),
+  },
+  watch: {
+  },
+  methods: {
+  },
+  mounted () {
+  },
+  destroyed () {
+  },
+}
+
+</script>

src/components/analysis/spike/ControlPanel.vue

@@ -0,0 +1,115 @@
+<template>
+  <div>
+    <va-card>
+      <p style="font-size: 125%; text-decoration: underline;"> Channel </p>
+      <channels/>
+      <p style="font-size: 125%; text-decoration: underline;"> Detect </p>
+      <p :style="{color: this.$themes.primary}" class="display-6"> High pass filter </p>
+      <cutoff-freq/>
+      <filter-order/>
+      <filter-button ref="filterButtonRef" @loadFilterData="loadFilterData"/>
+      <p :style="{color: this.$themes.danger}" class="display-6"> Threshold </p>
+      <threshold/>
+      <br/>
+      <p class="display-6"> Waveform </p>
+      <wave-length/>
+      <prethreshold/>
+      <refractory-period/>
+      <detect-button ref="detectButtonRef" @loadThresholdData="loadThresholdData"/>
+    </va-card>
+  </div>
+</template>
+
+<script>
+import Channels from '@/components/analysis/spike/item/Channels.vue'
+import CutoffFreq from '@/components/analysis/spike/item/CutoffFreq.vue'
+import FilterOrder from '@/components/analysis/spike/item/FilterOrder.vue'
+import Prethreshold from '@/components/analysis/spike/item/Prethreshold.vue'
+import RefractoryPeriod from '@/components/analysis/spike/item/RefractoryPeriod.vue'
+import Threshold from '@/components/analysis/spike/item/Threshold.vue'
+import WaveLength from '@/components/analysis/spike/item/WaveLength.vue'
+import DetectButton from '@/components/analysis/spike/item/DetectButton.vue'
+import FilterButton from '@/components/analysis/spike/item/FilterButton.vue'
+
+export default {
+  name: 'control-panel',
+  components: {
+    Channels,
+    CutoffFreq,
+    FilterOrder,
+    FilterButton,
+    Prethreshold,
+    RefractoryPeriod,
+    Threshold,
+    WaveLength,
+    DetectButton,
+  },
+  props: {
+  },
+  async created () {
+  },
+  data () {
+    return {
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    init () {
+      this.enableFilterButton()
+    },
+    refreshChart (options) {
+      this.$emit('refreshChart', options)
+    },
+    loadThresholdData () {
+      this.$emit('loadThresholdData')
+    },
+    loadFilterData () {
+      this.$emit('loadFilterData')
+    },
+    enableFilterButton () {
+      this.$refs.filterButtonRef.enableButton()
+    },
+    disableFilterButton () {
+      this.$refs.filterButtonRef.disableButton()
+    },
+    enableDetectButton () {
+      this.$refs.detectButtonRef.enableButton()
+    },
+    disableDetectButton () {
+      this.$refs.detectButtonRef.disableButton()
+    },
+  },
+  // use watch because va-select with @change will have bug
+  watch: {
+  },
+  mounted () {
+  },
+}
+</script>
+
+<style lang="scss">
+  .flex-container {
+    display: flex;
+  }
+
+  .flex-child {
+    flex: 2;
+  }
+
+  .flex-child1 {
+    flex: 1;
+  }
+
+  .flex-child2 {
+    flex: 0;
+  }
+
+  .flex-child:first-child {
+    margin-right: 1px;
+  }
+
+  .right {
+    float: right;
+  }
+</style>

src/components/analysis/spike/Spike.vue

@@ -0,0 +1,436 @@
+<template>
+  <div>
+    <div class="row row-equal">
+      <div class="flex md12 xl3 xs12 sm12">
+        <div class="row">
+          <div class="flex sm12 xl12 md12 xs12">
+            <va-accordion>
+              <va-collapse class="mb-2" :isOpenDefault="true">
+                <span slot="header">Control Panel</span>
+                <div slot="body">
+                  <div>
+                    <control-panel
+                      :ref="'control_panel'"
+                      @loadFilterData="loadFilterData"
+                      @loadThresholdData="loadThresholdData"
+                    />
+                  </div>
+                </div>
+              </va-collapse>
+            </va-accordion>
+          </div>
+        </div>
+      </div>
+
+      <div :class="chartAreaClass">
+        <div class="row" >
+          <div class="flex sm12 xl12 md12 xs12">
+            <spike-overview-chart :ref="'chart_overview'" :cardheight="'30vh'" :data="chartOverviewData"/>
+            <spike-chart :ref="'chart_detail'" :cardheight="'60vh'" :data="chartDetailData"/>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapActions, mapGetters, mapMutations } from 'vuex'
+import SpikeOverviewChart from './SpikeOverviewChart.vue'
+import SpikeChart from './SpikeChart.vue'
+import ControlPanel from './ControlPanel.vue'
+import api from '@/data/api/index'
+import { taskInfo } from '@/data/task/TaskInfo'
+import types from '@/store/modules/analysis/spike/types'
+import { mapFields } from 'vuex-map-fields'
+import newSeries from '@/factories/chart/seriesFactory'
+
+export default {
+  name: 'spike-data-replay',
+  components: {
+    SpikeOverviewChart,
+    SpikeChart,
+    ControlPanel,
+  },
+  computed: {
+    ...mapFields('spike', [
+      'chartData',
+      'chartOverviewData',
+      'chartDetailData',
+      'metaList',
+      'selectedChannel',
+      'cutoffFreq',
+      'filterOrder',
+      'selectedThreshold',
+      'upperThreshold',
+      'lowerThreshold',
+      'waveLength',
+      'preThreshold',
+      'refractoryPeriod',
+    ]),
+  },
+  props: {
+  },
+  async created () {
+    this.chartOverviewData = await this.initChart({
+      chartAllData: this.chartData,
+      chartID: 0,
+      gridLength: 1,
+      type: 'overview',
+      device: 'neulive',
+      mode: 0,
+    })
+    this.chartDetailData = await this.initChart({
+      chartAllData: this.chartData,
+      chartID: 1,
+      gridLength: 1,
+      type: 'detail',
+      device: 'neulive',
+      mode: 0,
+    })
+  },
+  data () {
+    return {
+      dataInfo: {},
+      maxTime: 0,
+      chartAreaClass: ['flex', 'xs12', 'sm12', 'md12', 'xl9', 'pa-0'],
+      randomColorArray: [],
+      controllerList: [],
+    }
+  },
+  mqtt: {
+    async '+/analysis/spike_detect/+/+/+' (data, topic) {
+      const topicSplitArray = topic.split('/')
+      if (this.metaList.some(e => e.id === parseInt(topicSplitArray[4]))) {
+        if (topicSplitArray[3] === 'data') {
+          const utf8decoder = new TextDecoder()
+          const dataStr = utf8decoder.decode(data)
+          const dataArray = JSON.parse(dataStr)
+
+          this.chartOverviewData.series[0].data.push(...dataArray)
+        } else if (topicSplitArray[3] === 'time_mark') {
+          const utf8decoder = new TextDecoder()
+          const timeMarkStr = JSON.parse(utf8decoder.decode(data))
+          const timeMarkObj = timeMarkStr.split(' ')
+
+          this.drawTimeMark(timeMarkObj)
+        } else if (topicSplitArray[3] === 'detect_signal') {
+          const utf8decoder = new TextDecoder()
+          const detectSignalStr = utf8decoder.decode(data)
+          const detectSignalObj = Object.values(JSON.parse(detectSignalStr))
+
+          this.drawThresholdData(detectSignalObj)
+        }
+      }
+    },
+  },
+  methods: {
+    getControllerList: async function () {
+      const update = async () => {
+        this.controllerList.push({
+          id: taskInfo.getTaskInfo().controllerID,
+          mac: '',
+          status: 'loading',
+          isScan: true,
+        })
+      }
+      await update()
+    },
+    mqttSub: function (val) {
+      this.$mqtt.subscribe(val)
+    },
+    mqttUnSub: function (val) {
+      this.$mqtt.unsubscribe(val)
+    },
+    mqttPub: function (topic, mes) {
+      this.$mqtt.publish(topic, mes)
+    },
+    pageMqttSub: function (id) {
+      this.mqttSub(id + '/analysis/spike_detect/+/+/+')
+    },
+    pageMqttUnSub: function (id) {
+      this.mqttUnSub(id + '/analysis/spike_detect/+/+')
+    },
+    showChartLoading: function (chart) {
+      const loadStyle = {
+        text: '',
+        color: '#cccccc',
+        maskColor: 'rgba(255, 255, 255, 0.8)',
+        zlevel: 0,
+      }
+      switch (chart) {
+        case 'overview':
+          this.$refs.chart_overview.showLoading(loadStyle)
+          break
+        case 'detail':
+          this.$refs.chart_detail.showLoading(loadStyle)
+          break
+        default:
+          this.$refs.chart_overview.showLoading(loadStyle)
+          this.$refs.chart_detail.showLoading(loadStyle)
+          break
+      }
+    },
+    hideChartLoading: function (chart) {
+      switch (chart) {
+        case 'overview':
+          this.$refs.chart_overview.hideLoading()
+          break
+        case 'detail':
+          this.$refs.chart_detail.hideLoading()
+          break
+        default:
+          this.$refs.chart_overview.hideLoading()
+          this.$refs.chart_detail.hideLoading()
+          break
+      }
+    },
+    register: async function () {
+      const gridLength = 1
+      this.updateGridListChart({
+        chartAllData: this.chartData,
+        chartID: this.chartDetailData.chartID,
+        gridLength: gridLength,
+      })
+      const register = this.metaList.map(meta => {
+        this.registerChart({
+          chartAllData: this.chartData,
+          chartID: this.chartOverviewData.chartID,
+          gridIndex: 0,
+          deviceNameX: 'Time',
+          deviceNameY: 'Neulive',
+          deviceIDY: meta.name,
+          channelY: this.selectedChannel,
+        })
+        this.registerChart({
+          chartAllData: this.chartData,
+          chartID: this.chartDetailData.chartID,
+          gridIndex: 0,
+          deviceNameX: 'Time',
+          deviceNameY: 'Neulive',
+          deviceIDY: meta.name,
+          channelY: this.selectedChannel,
+        })
+        if (this.maxTime < parseInt(meta.time_duration)) {
+          this.maxTime = parseInt(meta.time_duration)
+        }
+      })
+      await Promise.all(register)
+
+      for (let i = 0; i < 2; i++) {
+        // ID 0 = overview, ID 1 = detail
+        this.updateAxisLabelChart({
+          chartID: i,
+          axis: 'x',
+          axisIndex: 0,
+          channel: this.selectedChannel,
+        })
+        this.updateAxisLabelChart({
+          chartID: i,
+          axis: 'y',
+          axisIndex: 0,
+          channel: this.selectedChannel,
+        })
+        this.updateDataZoomChart({
+          chartAllData: this.chartData,
+          chartID: i,
+        })
+      }
+
+      // this.updateChartSamplingChart({ chartID: this.chartOverviewData.chartID, seriesIndex: 0, method: function (frame) { return frame[0] } })
+      this.chartOverviewData.xAxis[0].min = 0
+      this.chartOverviewData.xAxis[0].max = this.maxTime
+    },
+    loadFilterData: async function () {
+      this.showChartLoading('overview')
+      this.$refs.chart_detail.clear()
+      this.$refs.control_panel.disableDetectButton()
+
+      for (const meta in this.dataInfo) {
+        // reset overview chart
+
+        this.chartOverviewData.series[0].data.length = 0
+        this.chartOverviewData.series[0].markArea.data.length = 0
+        this.chartOverviewData.color = ['#000000'] // black
+
+        await api.analysis.spikeDetect({
+          controller_id: this.controllerList[0].id,
+          meta_id: meta,
+          channel: this.selectedChannel,
+          filter_order: this.filterOrder,
+          cut_off_freq: this.cutoffFreq,
+          data_type: 'filter_data',
+        })
+
+        this.hideChartLoading('overview')
+        this.$refs.control_panel.enableDetectButton()
+        console.log(this.chartOverviewData)
+      }
+    },
+    loadThresholdData: async function () {
+      this.showChartLoading('detail')
+
+      for (const meta in this.dataInfo) {
+        let thresholdValue
+        if (this.selectedThreshold === 'over') {
+          thresholdValue = this.upperThreshold
+        } else if (this.selectedThreshold === 'bellow') {
+          thresholdValue = this.lowerThreshold
+        }
+
+        for (let i = 0; i < this.chartDetailData.series.length; i++) {
+          this.chartDetailData.series[i].name = ''
+          this.chartDetailData.series[i].data.length = 0
+        }
+
+        await api.analysis.spikeDetect({
+          controller_id: this.controllerList[0].id,
+          meta_id: meta,
+          channel: this.selectedChannel,
+          cut_off_freq: this.cutoffFreq,
+          filter_order: this.filterOrder,
+          threshold: [
+            `'${this.selectedThreshold}'`,
+            thresholdValue,
+          ],
+          waveForm: [this.waveLength, this.preThreshold, this.refractoryPeriod],
+          ret_data_type: 'threshold_data',
+        })
+      }
+      this.hideChartLoading('detail')
+    },
+    drawThresholdData (detailSignalArray) {
+      if (detailSignalArray.length <= 8) {
+        this.chartDetailData.tooltip.show = true
+      } else {
+        this.chartDetailData.tooltip.show = false
+      }
+      this.chartDetailData.legend.data.length = 0
+      this.chartDetailData.legend.type = 'scroll'
+      this.chartDetailData.legend.top = '0.25%'
+      // this.chartDetailData.legendpageButtonPosition = 'start'
+      this.chartDetailData.animation = false
+      this.chartDetailData.color = []
+
+      for (let i = 0; i < detailSignalArray.length; i++) {
+        const detailSignal = detailSignalArray[i].split(' ')
+        const arrayLength = detailSignal.length
+        const step = parseInt(this.waveLength) / (arrayLength - 1)
+        const xAxisIndex = 0
+        const yAxisIndex = 0
+        const legendName = 'T_' + String(i + 1)
+        if (this.chartDetailData.series.length <= i) {
+          const _series = newSeries('line', legendName, xAxisIndex, yAxisIndex, [-1, -1], ['metaInfo.name', this.selectedChannel], null, null)
+          this.chartDetailData.series.push(_series)
+        }
+        for (let j = 0; j < arrayLength; j++) {
+          this.chartDetailData.series[i].data.push([j * step, detailSignal[j]])
+        }
+        // push legendName
+        this.chartDetailData.legend.data.push(legendName)
+        this.chartDetailData.series[i].name = legendName
+        // set legend and series color
+        this.chartDetailData.color.push(this.randomColorArray[i])
+      }
+      this.chartDetailData.xAxis[0].min = 0
+      this.chartDetailData.xAxis[0].max = parseInt(this.waveLength)
+      this.chartDetailData.xAxis[0].axisLabel.show = true
+    },
+    drawTimeMark (timeMarkArray, period) {
+      // reset overview
+      this.chartOverviewData.series[0].markArea.data.length = 0
+
+      const timeMarkLength = timeMarkArray.length
+
+      for (let i = 0; i < timeMarkLength; i++) {
+        // generate color array for overview markArea and detail chart series
+        const randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16) // ref: https://css-tricks.com/snippets/javascript/random-hex-color/
+        this.randomColorArray.push(randomColor)
+        if (Number.isInteger(parseInt(timeMarkArray[i]))) { // cuz maybe is '' if no any match after filtering
+          const timeMark = parseInt(timeMarkArray[i])
+
+          let startTime = timeMark - parseInt(this.preThreshold)
+          let endTime = timeMark + parseInt(this.refractoryPeriod)
+          if (startTime < 0) {
+            startTime = 0
+          }
+          if (endTime > timeMark) {
+            endTime = timeMark
+          }
+
+          const overviewSignal = this.chartOverviewData.series[0].data
+
+          let startIndex = 0
+          let endIndex = 0
+
+          for (let i = 0; i < overviewSignal.length; i++) {
+            if (startTime <= overviewSignal[i][0]) {
+              startIndex = i
+              break
+            }
+          }
+          for (let i = 0; i < overviewSignal.length; i++) {
+            if (endTime <= overviewSignal[i][0]) {
+              endIndex = i
+              break
+            }
+          }
+
+          this.chartOverviewData.series[0].markArea.data.push([
+            {
+              itemStyle: {
+                color: randomColor,
+                borderColor: randomColor,
+                borderWidth: 1,
+              },
+              name: String(i + 1),
+              xAxis: overviewSignal[startIndex][0],
+            },
+            {
+              xAxis: overviewSignal[endIndex][0],
+            },
+          ])
+        }
+      }
+    },
+    ...mapActions('spike', [types.chart.init, types.chart.initSelectedChannel, types.chart.register, types.chart.clear, types.chart.updateGridList, types.chart.updateDataZoom]),
+    ...mapActions('spike', [types.meta.init]),
+    ...mapActions('spike', [types.rec.init, types.rec.intoData, types.rec.initDisplaySetting, types.rec.updateDisplaySetting]),
+
+    ...mapMutations('spike', [types.chart.updateAxisLabel, types.chart.updateChartSampling]),
+    ...mapMutations('spike', [types.meta.updateByIndex]),
+
+    ...mapGetters('spike', [types.meta.getAll]),
+    ...mapGetters('spike', [types.rec.getAll]),
+  },
+  // use watch because va-select with @change will have bug
+  watch: {
+  },
+  async mounted () {
+    this.getControllerList()
+    this.pageMqttSub(this.controllerList[0].id)
+
+    const metaIDList = this.$route.params.metaList.split('-')
+    await this.initMeta({ metaIDList: metaIDList, api: api })
+    this.metaList = this.getAllMeta()
+    this.initSelectedChannelChart({ metaIndex: 0 })
+    await this.initRec({ api: api })
+    this.dataInfo = this.getAllRec()
+    console.log(this.metaList)
+    console.log(this.dataInfo)
+    await this.register()
+    this.$refs.control_panel.init()
+  },
+  beforeDestroy () {
+    this.pageMqttUnSub(this.controllerList[0].id)
+    this.$refs.chart_detail.clear()
+    for (const id in this.chartData) {
+      for (const _series of this.chartData[id].series) {
+        _series.length = 0
+      }
+      delete this.chartData[id]
+    }
+    this.clearChart({ chartAllData: this.chartData })
+  },
+}
+</script>

src/components/analysis/spike/SpikeChart.vue

@@ -0,0 +1,109 @@
+<template>
+  <div class="flex" :class="cardclass">
+    <va-card :style="'height: ' + cardheight + ';'">
+      <chart :ref="'chart_ref'" :style="'width: '+ cardwidth + '; height: ' + cardheight + ';'" :options="data" @dataZoom="updateZoom" :auto-resize="true"></chart>
+    </va-card>
+  </div>
+</template>
+
+<script>
+import { mapMutations } from 'vuex'
+import types from '@/store/modules/analysis/spike/types'
+
+export default {
+  name: 'spike-replay-chart',
+  components: {
+  },
+  props: {
+    data: {
+      type: Object,
+      default: function () {
+        return {}
+      },
+    },
+    cardclass: {
+      type: Array,
+      default: function () {
+        return ['xs12', 'md12', 'xl12', 'sm12']
+      },
+    },
+    cardheight: {
+      type: String,
+      default: '82vh',
+    },
+    cardwidth: {
+      type: String,
+      default: 'auto',
+    },
+  },
+  created () {
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+  },
+  watch: {
+  },
+  methods: {
+    resize: function () {
+      if (this.$refs.chart_ref != null) {
+        this.$refs.chart_ref.resize()
+      }
+    },
+    updateZoom: function (e) {
+      this.$emit('dataZoomEvent', e)
+    },
+    mergeOptions (options) {
+      this.$refs.chart_ref.mergeOptions(options)
+    },
+    turnOnAxisEventHandler (eventName, query, handler, attr) {
+      const chartID = 1
+      this.updateAxisEventHandlerChart({
+        chartID: chartID,
+        axis: attr.axis,
+        status: 'on',
+      })
+      // doc: https://echarts.apache.org/zh/api.html#echartsInstance.on
+      this.$refs.chart_ref.chart._zr.on(eventName, query, handler)
+    },
+    turnOffAxisEventHandler (eventName, handler, attr) {
+      const chartID = 1
+      this.updateAxisEventHandlerChart({
+        chartID: chartID,
+        axis: attr.axis,
+        status: 'off',
+      })
+      // doc: https://echarts.apache.org/zh/api.html#echartsInstance.off
+      this.$refs.chart_ref.chart._zr.off(eventName, handler)
+    },
+    showLoading (options) {
+      this.$refs.chart_ref.showLoading(options)
+    },
+    hideLoading () {
+      this.$refs.chart_ref.hideLoading()
+    },
+    clear () {
+      this.$refs.chart_ref.clear()
+    },
+
+    ...mapMutations('spike', [types.chart.updateAxisEventHandler]),
+  },
+  async mounted () {
+    this.resizeTimer = setInterval(this.resize, 1000)
+  },
+  destroyed () {
+    clearInterval(this.resizeTimer)
+  },
+}
+
+</script>
+
+<style lang='scss'>
+  .va-card {
+    &__body {
+      padding-top: 0.25rem;
+    }
+  }
+</style>

src/components/analysis/spike/SpikeOverviewChart.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="flex" :class="cardclass">
+    <va-card :style="'height: ' + cardheight + ';'">
+      <chart :ref="'chart_ref'" :style="'width: '+ cardwidth + '; height: ' + cardheight + ';'" :options="data" @dataZoom="updateZoom" :auto-resize="true"></chart>
+    </va-card>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'spike-overview-chart',
+  components: {
+  },
+  props: {
+    data: {
+      type: Object,
+      default: function () {
+        return {}
+      },
+    },
+    cardclass: {
+      type: Array,
+      default: function () {
+        return ['xs12', 'md12', 'xl12', 'sm12']
+      },
+    },
+    cardheight: {
+      type: String,
+      default: '82vh',
+    },
+    cardwidth: {
+      type: String,
+      default: 'auto',
+    },
+  },
+  created () {
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+  },
+  watch: {
+  },
+  methods: {
+    resize: function () {
+      if (this.$refs.chart_ref != null) {
+        this.$refs.chart_ref.resize()
+      }
+    },
+    mergeOptions (options) {
+      this.$refs.chart_ref.mergeOptions(options)
+    },
+    updateZoom: function (e) {
+      this.$emit('dataZoomEvent', e)
+    },
+    showLoading (options) {
+      this.$refs.chart_ref.showLoading(options)
+    },
+    hideLoading () {
+      this.$refs.chart_ref.hideLoading()
+    },
+    clear () {
+      this.$refs.chart_ref.clear()
+    },
+  },
+  async mounted () {
+    this.resizeTimer = setInterval(this.resize, 1000)
+  },
+  destroyed () {
+    clearInterval(this.resizeTimer)
+  },
+}
+
+</script>
+
+<style lang='scss'>
+  .va-card {
+    &__body {
+      padding-top: 0.25rem;
+    }
+  }
+</style>

src/components/analysis/spike/item/Channels.vue

@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <va-button-toggle small flat v-model="selectedChannel" :options="selectedChannelOptions" @click.native="reloadData(selectedChannel)"/>
+  </div>
+</template>
+
+<script>
+
+import { mapFields } from 'vuex-map-fields'
+
+export default {
+  name: 'Channels',
+  components: {
+  },
+  computed: {
+    ...mapFields('spike', [
+      'selectedChannel',
+      'selectedChannelOptions',
+    ]),
+  },
+  props: {
+  },
+  created () {
+  },
+  data () {
+    return {
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    reloadData (val) {
+      this.selectedChannel = val
+    },
+  },
+  async mounted () {
+  },
+  destroyed () {
+  },
+  watch: {
+  },
+}
+</script>

src/components/analysis/spike/item/CutoffFreq.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="row flex sm12 xl12 md12 xs12 align--center my-0 py-0">
+    <div class="flex sm6 xl6 md6 xs6 px-0 mx-0">
+      <p>Cut-off Freq<p/>
+    </div>
+    <div class="flex sm6 xl6 md6 xs6 px-0 mx-0">
+      <va-input
+        @mouseleave.native="itemChange(cutoffFreq)"
+        @keyup.enter="itemChange(cutoffFreq)"
+        @blur="itemChange(cutoffFreq)"
+        v-model="cutoffFreq"
+        class="mb-0"
+      >
+        <p slot="append" style="margin-right: 0;" small>
+          Hz
+        </p>
+      </va-input>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import { mapFields } from 'vuex-map-fields'
+
+export default {
+  name: 'CutoffFreq',
+  components: {
+  },
+  computed: {
+    ...mapFields('spike', [
+      'cutoffFreq',
+    ]),
+  },
+  props: {
+  },
+  created () {
+  },
+  data () {
+    return {
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    itemChange (val) {
+      this.cutoffFreq = val
+    },
+  },
+  async mounted () {
+  },
+  destroyed () {
+  },
+  watch: {
+  },
+}
+</script>

src/components/analysis/spike/item/DetectButton.vue

@@ -0,0 +1,56 @@
+<template>
+  <div>
+    <va-button class="right" small @click="startDetect" :disabled="isDisable">
+      Start Detect
+    </va-button>
+  </div>
+</template>
+
+<script>
+
+import types from '@/store/modules/analysis/spike/types'
+import { mapFields } from 'vuex-map-fields'
+import { mapMutations } from 'vuex'
+
+export default {
+  name: 'Channels',
+  components: {
+  },
+  computed: {
+    ...mapFields('spike', [
+      'chartDetailData',
+      'selectedChannel',
+      'waveLength',
+    ]),
+  },
+  props: {
+  },
+  created () {
+  },
+  data () {
+    return {
+      isDisable: true,
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    startDetect () {
+      this.$emit('loadThresholdData')
+    },
+    enableButton () {
+      this.isDisable = false
+    },
+    disableButton () {
+      this.isDisable = true
+    },
+    ...mapMutations('spike', [types.chart.updateAxisLabel]),
+  },
+  async mounted () {
+  },
+  destroyed () {
+  },
+  watch: {
+  },
+}
+</script>

src/components/analysis/spike/item/FilterButton.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="flex xl12 md12 sm12 xs12 mb-4">
+    <va-button class="right" small @click="startFilter" :disabled="isDisable">
+      Start Filter
+    </va-button>
+  </div>
+</template>
+
+<script>
+
+import types from '@/store/modules/analysis/spike/types'
+import { mapFields } from 'vuex-map-fields'
+import { mapMutations } from 'vuex'
+
+export default {
+  name: 'FilterButton',
+  components: {
+  },
+  computed: {
+    ...mapFields('spike', [
+      'chartDetailData',
+      'selectedChannel',
+      'waveLength',
+    ]),
+  },
+  props: {
+  },
+  created () {
+  },
+  data () {
+    return {
+      isDisable: true,
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    startFilter () {
+      this.$emit('loadFilterData')
+    },
+    enableButton () {
+      this.isDisable = false
+    },
+    disableButton () {
+      this.isDisable = true
+    },
+    ...mapMutations('spike', [types.chart.updateAxisLabel]),
+  },
+  async mounted () {
+  },
+  destroyed () {
+  },
+  watch: {
+  },
+}
+</script>

src/components/analysis/spike/item/FilterOrder.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="row flex sm12 xl12 md12 xs12 align--center my-0 py-0">
+    <div class="flex sm6 xl6 md6 xs6 px-0 mx-0">
+      <p>Filter order<p/>
+    </div>
+    <div class="flex sm6 xl6 md6 xs6 px-0 mx-0">
+      <va-input
+        @mouseleave.native="itemChange(filterOrder)"
+        @keyup.enter="itemChange(filterOrder)"
+        @blur="itemChange(filterOrder)"
+        v-model="filterOrder"
+        class="mb-0"
+      >
+      </va-input>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import { mapFields } from 'vuex-map-fields'
+
+export default {
+  name: 'FilterOrder',
+  components: {
+  },
+  computed: {
+    ...mapFields('spike', [
+      'filterOrder',
+    ]),
+  },
+  props: {
+  },
+  created () {
+  },
+  data () {
+    return {
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    itemChange (val) {
+      this.filterOrder = val
+    },
+  },
+  async mounted () {
+  },
+  destroyed () {
+  },
+  watch: {
+  },
+}
+</script>

src/components/analysis/spike/item/Prethreshold.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="row flex sm12 xl12 md12 xs12 align--center my-0 py-0">
+    <div class="flex sm6 xl6 md6 xs6 px-0 mx-0">
+      <p>Prethreshold<p/>
+    </div>
+    <div class="flex sm6 xl6 md6 xs6 px-0 mx-0">
+      <va-input
+        @mouseleave.native="itemChange(preThreshold)"
+        @keyup.enter="itemChange(preThreshold)"
+        @blur="itemChange(preThreshold)"
+        v-model="preThreshold"
+        class="mb-0"
+      >
+        <p slot="append" style="margin-right: 0;" small>
+          µs
+        </p>
+      </va-input>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import { mapFields } from 'vuex-map-fields'
+
+export default {
+  name: 'Prethreshold',
+  components: {
+  },
+  computed: {
+    ...mapFields('spike', [
+      'preThreshold',
+    ]),
+  },
+  props: {
+  },
+  created () {
+  },
+  data () {
+    return {
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    itemChange (val) {
+      this.preThreshold = val
+    },
+  },
+  async mounted () {
+  },
+  destroyed () {
+  },
+  watch: {
+  },
+}
+</script>

src/components/analysis/spike/item/RefractoryPeriod.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="row flex sm12 xl12 md12 xs12 align--center my-0 py-0">
+    <div class="flex sm7 xl7 md7 xs7 px-0 mx-0">
+      <p>Refractory period<p/>
+    </div>
+    <div class="flex sm5 xl5 md5 xs5 px-0 mx-0">
+      <va-input
+        @mouseleave.native="itemChange(refractoryPeriod)"
+        @keyup.enter="itemChange(refractoryPeriod)"
+        @blur="itemChange(refractoryPeriod)"
+        v-model="refractoryPeriod"
+        class="mb-0"
+      >
+        <p slot="append" style="margin-right: 0;" small>
+          µs
+        </p>
+      </va-input>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import { mapFields } from 'vuex-map-fields'
+
+export default {
+  name: 'RefractoryPeriod',
+  components: {
+  },
+  computed: {
+    ...mapFields('spike', [
+      'refractoryPeriod',
+    ]),
+  },
+  props: {
+  },
+  created () {
+  },
+  data () {
+    return {
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    itemChange (val) {
+      this.refractoryPeriod = val
+    },
+  },
+  async mounted () {
+  },
+  destroyed () {
+  },
+  watch: {
+  },
+}
+</script>

src/components/analysis/spike/item/Threshold.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="row flex sm12 xl12 md12 xs12 align--center my-0 py-0">
+    <va-radio-button
+      v-for="(option, index) in options"
+      :key="index"
+      v-model="selectedThreshold"
+      :option="option"
+      :label="`${option}`"
+    />
+    <va-input
+      v-if="selectedThreshold === 'over'"
+      @mouseleave.native="itemChange(upperThreshold, 'upper')"
+      @keyup.enter="itemChange(upperThreshold, 'upper')"
+      @blur="itemChange(upperThreshold, 'upper')"
+      v-model="upperThreshold"
+      class="mb-0"
+    >
+      <p slot="append" style="margin-right: 0;" small>
+        µV
+      </p>
+    </va-input>
+    <va-input
+      v-if="selectedThreshold === 'bellow'"
+      @mouseleave.native="itemChange(lowerThreshold, 'lower')"
+      @keyup.enter="itemChange(lowerThreshold, 'lower')"
+      @blur="itemChange(lowerThreshold, 'lower')"
+      v-model="lowerThreshold"
+      class="mb-0"
+    >
+      <p slot="append" style="margin-right: 0;" small>
+        µV
+      </p>
+    </va-input>
+  </div>
+</template>
+
+<script>
+
+import { mapFields } from 'vuex-map-fields'
+
+export default {
+  name: 'Threshold',
+  components: {
+  },
+  computed: {
+    ...mapFields('spike', [
+      'selectedThreshold',
+      'upperThreshold',
+      'lowerThreshold',
+    ]),
+  },
+  props: {
+  },
+  created () {
+  },
+  data () {
+    return {
+      options: [
+        // 'Auto',
+        'over',
+        'bellow',
+      ],
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    itemChange (val, type) {
+      if (type === 'upper') {
+        this.upperThreshold = val
+      } else if (type === 'lower') {
+        this.lowerThreshold = val
+      }
+    },
+  },
+  async mounted () {
+  },
+  destroyed () {
+  },
+  watch: {
+  },
+}
+</script>

src/components/analysis/spike/item/WaveLength.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="row flex sm12 xl12 md12 xs12 align--center my-0 py-0">
+    <div class="flex sm7 xl7 md7 xs7 px-0 mx-0">
+      <p>Waveform length<p/>
+    </div>
+    <div class="flex sm5 xl5 md5 xs5 px-0 mx-0">
+      <va-input
+        @mouseleave.native="itemChange(waveLength)"
+        @keyup.enter="itemChange(waveLength)"
+        @blur="itemChange(waveLength)"
+        v-model="waveLength"
+        class="mb-0"
+      >
+        <p slot="append" style="margin-right: 0;" small>
+          µs
+        </p>
+      </va-input>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import { mapFields } from 'vuex-map-fields'
+
+export default {
+  name: 'WaveLength',
+  components: {
+  },
+  computed: {
+    ...mapFields('spike', [
+      'waveLength',
+    ]),
+  },
+  props: {
+  },
+  created () {
+  },
+  data () {
+    return {
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    itemChange (val) {
+      this.waveLength = val
+    },
+  },
+  async mounted () {
+  },
+  destroyed () {
+  },
+  watch: {
+  },
+}
+</script>

src/components/analysis/spike/toolbox/ShowResampleRate.vue

@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <span> Resample: {{ currentScale }} to 1 </span>
+  </div>
+</template>
+
+<script>
+import { mapFields } from 'vuex-map-fields'
+
+export default {
+  name: 'show-resample-rate',
+  components: {
+  },
+  props: {
+  },
+  created () {
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+    ...mapFields('spike', [
+      'currentScale',
+    ]),
+  },
+  watch: {
+  },
+  methods: {
+  },
+  mounted () {
+  },
+  destroyed () {
+  },
+}
+
+</script>

src/components/common/progressBarByValueModal/progressBar.vue

@@ -0,0 +1,37 @@
+<template>
+  <!-- <va-card
+    class="horizontal-bars"
+  > -->
+  <div class="row">
+    <div class="flex md12 xs12">
+      <va-progress-bar
+        :value="value"
+      >
+        {{ value }} %
+      </va-progress-bar>
+    </div>
+  </div>
+  <!-- </va-card> -->
+</template>
+
+<script>
+export default {
+  name: 'progress-bar',
+  data () {
+    return {
+    }
+  },
+  props: {
+    value: {
+      type: Number,
+      required: true,
+    },
+  },
+  methods: {
+  },
+  mounted () {
+  },
+  destroyed () {
+  },
+}
+</script>

src/components/common/progressBarByValueModal/progressModal.vue

@@ -0,0 +1,56 @@
+<template>
+  <va-modal
+    class="flex sm12 xl12 md12 xs12"
+    v-model="showProgressModal"
+    size="small"
+    :title="title"
+    hide-default-actions
+  >
+    <progressBar
+      :value="value"
+      :ref="'progressBarRef'"
+    />
+  </va-modal>
+</template>
+<script>
+import progressBar from '@/components/common/progressBarByValueModal/progressBar.vue'
+
+export default {
+  name: 'progress-bar-modal',
+  components: {
+    progressBar,
+  },
+
+  data () {
+    return {
+      showProgressModal: false,
+      value: 0,
+      title: '',
+    }
+  },
+  methods: {
+    show () {
+      this.showProgressModal = true
+    },
+    hide () {
+      this.showProgressModal = false
+    },
+    setTitle (title) {
+      this.title = title
+    },
+    setValue (value) {
+      this.value = value
+    },
+    addValue () {
+      this.value += 1
+    },
+    reset () {
+      this.value = 0
+    },
+    progressDone () {
+      this.$refs.progressBarRef.progressDone()
+      this.hide()
+    },
+  },
+}
+</script>

src/components/common/progressBarModal/progressBar.vue

@@ -0,0 +1,54 @@
+<template>
+  <!-- <va-card
+    class="horizontal-bars"
+  > -->
+  <div class="row">
+    <div class="flex md12 xs12 mb-2 mt-2">
+      <va-progress-bar
+        :value="progressValue"
+      >
+        {{ progressValue }} %
+      </va-progress-bar>
+    </div>
+  </div>
+  <!-- </va-card> -->
+</template>
+
+<script>
+export default {
+  name: 'progress-bar',
+  data () {
+    return {
+      progressValue: 0,
+      timeInterval: null,
+    }
+  },
+  props: {
+    // unit: sec
+    time: {
+      type: String,
+      required: true,
+    },
+  },
+  methods: {
+    animateValues () {
+      this.timeInterval = setInterval(() => {
+        this.progressValue += 1
+
+        if (this.progressValue === 99) {
+          clearInterval(this.timeInterval)
+        }
+      }, parseInt(this.time * 10))
+    },
+    progressDone () {
+      this.progressValue = 100
+    },
+  },
+  mounted () {
+    this.animateValues()
+  },
+  destroyed () {
+    clearInterval(this.timeInterval)
+  },
+}
+</script>

src/components/common/progressBarModal/progressModal.vue

@@ -0,0 +1,56 @@
+<template>
+  <va-modal
+    class="flex sm12 xl12 md12 xs12"
+    v-model="showProgressModal"
+    size="small"
+    :title="title"
+    :noOutsideDismiss="true"
+    hide-default-actions
+  >
+    <progressBar
+      :time="time"
+      :ref="'progressBarRef'"
+    />
+    <div class="flex-center sm12 xl12 md12 xs12">
+      <va-button @click="hide">Cancel</va-button>
+    </div>
+  </va-modal>
+</template>
+<script>
+import progressBar from '@/components/common/progressBarModal/progressBar.vue'
+
+export default {
+  name: 'progress-bar-modal',
+  components: {
+    progressBar,
+  },
+  props: {
+    title: {
+      type: String,
+      default: '',
+    },
+    // unit: sec
+    time: {
+      type: String,
+      required: true,
+    },
+  },
+  data () {
+    return {
+      showProgressModal: false,
+    }
+  },
+  methods: {
+    show () {
+      this.showProgressModal = true
+    },
+    hide () {
+      this.showProgressModal = false
+    },
+    progressDone () {
+      this.$refs.progressBarRef.progressDone()
+      this.hide()
+    },
+  },
+}
+</script>

src/components/devices/DevicesOverview.vue

@@ -86,7 +86,7 @@
                       <div>
                         <va-button style="width: 100px;" @click.stop="connect(controller.id, device)" v-if="device.status == 'scanned' && !device.loading" class="pl-2 pr-2 mt-2" color="success" small>CONNECT</va-button>
                         <va-button style="width: 100px;" @click.stop="disconnectCheck(controller.id, device)" :disabled="controller.isScan" v-if="device.status == 'connected' && !device.loading" class="pl-2 pr-2 mt-2" color="danger" small>DISCONNECT</va-button>
-                        <va-button @click.stop="detect(controller.id, device)" :disabled="controller.isScan" v-if="device.status == 'connected' && !device.loading && device.library_name.indexOf('Elite') !== -1" class="pl-2 pr-2 mt-2" color="primary" small>DETECT</va-button>
+                        <va-button id="detectButton" @click.stop="detect(controller.id, device)" :disabled="controller.isScan" v-if="device.status == 'connected' && !device.loading && device.library_name.indexOf('Elite') !== -1" class="pl-2 pr-2 mt-2" color="primary" small>DETECT</va-button>
                       </div>
                     </va-item-section>
                   </va-item>
@@ -137,9 +137,9 @@
 </template>
 
 <script>
-import { taskInfo } from '../../data/task/TaskInfo'
+import api from '@/data/api/index'
+import { taskInfo } from '@/data/task/TaskInfo'
 import { FulfillingBouncingCircleSpinner } from 'epic-spinners'
-import api from '../../data/api/index'
 
 export default {
   name: 'devices-overview',
@@ -189,6 +189,7 @@ export default {
             battery: device.battery,
             library_name: device.library_name,
             library_version: device.library_version,
+            record_in_sd: device.record_in_sd,
             status: device.status,
             pic: taskInfo.getDevicePic(device.device_name),
             loading: false,
@@ -208,16 +209,27 @@ export default {
       })
       // console.log(this.controllerList)
     },
-    '+/hardware_info/+' (data, topic) {
+    async '+/hardware_info/+' (data, topic) {
       const topicSplit = topic.split('/')
       const rawDevices = JSON.parse(String.fromCharCode.apply(null, data)).data
-      this.controllerList.forEach(controller => {
+      for (let i = 0; i < this.controllerList.length; i++) {
+        const controller = this.controllerList[i]
         if (controller.id === topicSplit[0]) {
           if (rawDevices.device_mac !== null) {
             controller.mac = rawDevices.device_mac.toUpperCase()
+            // const info = await api.controller.getByMac(controller.mac)
+            // if (info.data.length === 0) {
+            //   const req = {
+            //     mac_address: controller.mac,
+            //     mqtt_id: controller.id,
+            //     status: controller.status,
+            //   }
+            //   api.controller.create(req)
+            // }
+            // console.log(info)
           }
         }
-      })
+      }
       // console.log(this.controllerList)
     },
     '+/hardware_device_connect/+' (data, topic) {
@@ -276,6 +288,10 @@ export default {
             header: 'device_update_calibration/0',
             device: parseInt(mes[1]),
           }))
+          this.mqttPub(topicSplit[0] + '_user', JSON.stringify({
+            header: 'device_sd_card_status/0',
+            device: parseInt(mes[1]),
+          }))
           // this.mqttPub(topicSplit[0] + '_user', JSON.stringify({
           //   header: 'device_parent/0',
           //   device: parseInt(mes[1]),
@@ -330,14 +346,14 @@ export default {
         default:
           break
       }
-      console.log(String.fromCharCode.apply(null, data), topic)
+      //  console.log(String.fromCharCode.apply(null, data), topic)
     },
   },
   methods: {
     getControllerList: async function () {
       const update = async () => {
         this.controllerList.push({
-          id: 'tommy_test',
+          id: taskInfo.getTaskInfo().controllerID,
           mac: '',
           status: 'loading',
           isScan: true,
@@ -387,6 +403,9 @@ export default {
         this.mqttPub(controller.id + '_user', JSON.stringify({
           header: 'hardware_info/0',
         }))
+        // this.mqttPub(controller.id + '_user', JSON.stringify({
+        //   header: 'device_update_usb/0',
+        // }))
         this.createInitialCollection('admin')
       })
     },
@@ -459,6 +478,7 @@ export default {
           device: device.id,
           instruction: 'VIS_DEVICE_DONE',
         }))
+        document.getElementById('detectButton').className += ' no-dark-style-va-button'
       }, 5000)
     },
     sleep: function (milliseconds) {
@@ -470,9 +490,9 @@ export default {
       }
     },
     createInitialCollection: async function (user) {
-      const root = await api.getCollectionsByParentName('folder', 0, 'root')
+      const root = await api.collection.getByParentName('folder', 0, 'root')
       if (root.data.length === 0) {
-        await api.createCollection({
+        await api.collection.create({
           name: 'root',
           type: 'folder',
           parent: { folder: [0] },
@@ -481,10 +501,10 @@ export default {
       }
 
       // init check and create collection
-      const _root = await api.getCollectionsByName('root')
-      const USER = await api.getCollectionsByName(user)
+      const _root = await api.collection.getByName('root')
+      const USER = await api.collection.getByName(user)
       if (USER.data.length === 0) {
-        api.createCollection({
+        api.collection.create({
           name: user,
           parent: { folder: [_root.data[0].id] },
           type: 'folder',
@@ -496,6 +516,7 @@ export default {
   watch: {
   },
   async mounted () {
+    await taskInfo.updateTaskInfo()
     await this.getControllerList()
 
     this.pageMqttSub()

src/components/download/Download.vue

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

src/components/download/DownloadOffline.vue

@@ -0,0 +1,239 @@
+<template>
+  <div>
+    <div class="row flex sm12 xl12 md12 xs12" style="height: 100vh;">
+      <div class="flex-center spinner-box mt-4 mb-5">
+        <fulfilling-bouncing-circle-spinner
+          :animation-duration="3000"
+          :color="'#6c7fee'"
+          :size="60"
+        >
+        </fulfilling-bouncing-circle-spinner>
+        <progress-modal
+          :ref="'progressModalRef'"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import api from '@/data/api/index'
+import types from '@/store/modules/download/types'
+import { mapActions, mapMutations } from 'vuex'
+import { FulfillingBouncingCircleSpinner } from 'epic-spinners'
+import { mapFields } from 'vuex-map-fields'
+import newDownload from '@/factories/file/downloadFactory'
+import newChannel from '@/factories/file/channelFactory'
+import progressModal from '@/components/common/progressBarByValueModal/progressModal.vue'
+import { taskInfo } from '@/data/task/TaskInfo'
+
+export default {
+  name: 'DownloadOffline',
+  components: {
+    FulfillingBouncingCircleSpinner,
+    progressModal,
+  },
+  data: () => {
+    return {
+      controllerList: [],
+    }
+  },
+  computed: {
+    ...mapFields('download', [
+      'metaList',
+      'downloadInfo',
+      'metaInfo',
+    ]),
+  },
+  methods: {
+    getControllerList: async function () {
+      const update = async () => {
+        this.controllerList.push({
+          id: taskInfo.getTaskInfo().controllerID,
+          mac: '',
+          status: 'loading',
+          isScan: true,
+          files: [],
+        })
+      }
+      await update()
+    },
+    notify (name) {
+      this.showToast(`done ${name}`, {
+        position: 'bottom-right',
+      })
+    },
+    chunkArray (rawDataIDArray, chunkSize) {
+      const arrayLength = rawDataIDArray.length
+      const results = []
+      for (let index = 0; index < arrayLength; index += chunkSize) {
+        results.push(rawDataIDArray.slice(index, index + chunkSize))
+      }
+      return results
+    },
+    ...mapActions('download',
+      [
+        types.raw.rawDataByID,
+        types.raw.rawDataByIDs,
+        types.raw.rawSdDataByID,
+        types.export.setHeader,
+        types.export.setTitle,
+        types.export.setData,
+        types.export.setAll,
+        types.download.closeWriter,
+        types.download.setStream,
+        types.download.setSampleRate,
+        types.download.setIDList,
+      ],
+    ),
+    ...mapMutations('download',
+      [
+        types.download.clearIDList,
+      ],
+    ),
+  },
+  watch: {
+  },
+  async mounted () {
+    await this.getControllerList()
+    // TODO authorization
+    const format = this.$route.params.format
+    this.metaList = this.$route.params.metaList.split('-')
+    const sd = this.$route.params.sd
+
+    while (this.metaList.length !== 0) {
+      let meta
+      const metaID = this.metaList.pop()
+      const ret = await api.meta.getByID(metaID)
+
+      if (ret.status === 200) {
+        meta = ret.data[0]
+      }
+      if (meta !== undefined) {
+        this.metaInfo = meta
+        const channelArray = JSON.parse(this.metaInfo.channels)
+        const channelList = []
+
+        if (meta.device.library_name.indexOf('Neulive') >= 0) {
+          if (channelArray.some(el => el >= 256)) {
+            channelList.push(channelArray.filter(el => (el >= 256 && el <= 259)))
+            channelList.push(channelArray.filter(el => el < 256))
+          } else {
+            channelList.push(channelArray)
+          }
+        } else if (meta.device.library_name.indexOf('Elite') >= 0) {
+          channelList.push(channelArray)
+        }
+
+        this.$refs.progressModalRef.show()
+
+        while (channelList.length > 0) {
+          const channels = channelList.pop()
+
+          let maxSplitFiles = 1
+          let fileIndex = 0
+
+          // find max raw data need sub file
+          for (const rawDataIndex of Object.keys(meta.raw_data)) {
+            let dataLength = 0
+            if (rawDataIndex >= 256) {
+              dataLength = meta.raw_data[rawDataIndex].length
+            } else {
+              dataLength = 160
+            }
+
+            maxSplitFiles = Math.max(maxSplitFiles, Math.ceil(meta.raw_data[rawDataIndex].length / dataLength))
+            meta.raw_data[rawDataIndex] = this.chunkArray(meta.raw_data[rawDataIndex], dataLength)
+          }
+
+          while (fileIndex < maxSplitFiles) {
+            if (this.downloadInfo === null) {
+              this.downloadInfo = newDownload()
+            }
+            this.downloadInfo.channel = channels
+            // download format
+            this.downloadInfo.format = format
+
+            // download device and filename
+            if (meta.device.library_name.indexOf('Neulive') >= 0) {
+              this.downloadInfo.device = [meta.device.library_name.slice(0, 7), meta.device.library_name.slice(7)]
+              if (this.downloadInfo.channel.some(el => el >= 256 && el <= 259)) {
+                this.downloadInfo.filename = meta.name + '-accerlate-' + format
+                this.downloadInfo.filename += (sd !== undefined) ? '-sd' : ''
+                this.downloadInfo.size = parseInt(parseInt(meta.size) / 76)
+              } else {
+                this.downloadInfo.filename = meta.name + '-' + format
+                this.downloadInfo.filename += (sd !== undefined) ? '-sd' : ''
+                this.downloadInfo.size = parseInt(meta.size)
+              }
+            } else if (meta.device.library_name.indexOf('Elite') >= 0) {
+              this.downloadInfo.device = [meta.device.library_name.slice(0, 5), meta.device.library_name.slice(5)]
+              this.downloadInfo.filename = meta.name + '-' + (fileIndex + 1).toString()
+              this.downloadInfo.size = parseInt(meta.size)
+            }
+
+            this.$refs.progressModalRef.setTitle(this.downloadInfo.filename)
+
+            // get sampleRate && downloadList
+            for (const channel of this.downloadInfo.channel) {
+              if (this.downloadInfo.channelInfo[channel] === undefined) {
+                this.downloadInfo.channelInfo[channel] = newChannel()
+                this.setSampleRateDownload({ channel: channel })
+              }
+            }
+
+            this.clearIDListDownload()
+            for (const channel of this.downloadInfo.channel) {
+              this.setIDListDownload({ channel: channel, fileIndex: fileIndex })
+            }
+
+            // start download data
+            fileIndex += 1
+            let rowIndex = 0
+
+            while (rowIndex < this.downloadInfo.maxRows) {
+              this.$refs.progressModalRef.setValue(parseInt((rowIndex / this.downloadInfo.maxRows) * 100))
+              for (const channel of this.downloadInfo.channel) {
+                for (const idx in this.downloadInfo.channelInfo[channel].downloadIDList) {
+                  const _idx = parseInt(idx)
+                  const rawID = this.downloadInfo.channelInfo[channel].downloadIDList[_idx][rowIndex]
+                  // console.log(rowIndex, _idx, rawID)
+                  if (rawID !== undefined) {
+                    if (sd === 'sd') {
+                      await this.rawSdDataByIDRaw({
+                        channel: channel,
+                        rawID: rawID,
+                        idx: _idx,
+                        api: api,
+                      })
+                    } else {
+                      await this.rawDataByIDRaw({
+                        channel: channel,
+                        rawID: rawID,
+                        idx: _idx,
+                        api: api,
+                      })
+                    }
+                  }
+                }
+              }
+              rowIndex += 1
+            }
+            await this.setAllExport({ last: (rowIndex >= this.downloadInfo.maxRows - 1) })
+            this.$refs.progressModalRef.setValue(100)
+          }
+        }
+      }
+    }
+    await new Promise(resolve => setTimeout(resolve, 2000)) // sleep
+    window.close()
+  },
+  destroyed () {
+  },
+}
+</script>
+<style>
+  .filter-button {
+    text-align: center;
+  }
+</style>

src/components/file/File.vue

@@ -1,45 +1,34 @@
 <template>
   <div>
-    <div class="row">
-      <div class="flex md12 xl12 xs12 sm12" :style="AreaStyle">
-        <file-table :ref="'file_ref'" @download="addDownloadTask"/>
-      </div>
-      <div class="flex md12 xl12 xs12 sm12" :style="AreaStyle">
-        <download :ref="'download_ref'" @download="downloadingFile"></download>
-      </div>
-    </div>
+    <file-table :ref="'file_ref'"/>
   </div>
 </template>
 
 <script>
 import FileTable from './file-table/FileTable.vue'
-import Download from '../download/Download.vue'
+// import Download from '../download/Download.vue'
 import { file } from '../../data/file/File'
 import api from '../../data/api/index'
+import { taskInfo } from '@/data/task/TaskInfo'
 
 export default {
   components: {
     FileTable,
-    Download,
   },
   data () {
     return {
       controllerList: [],
-      AreaStyle: {
-        height: 'auto',
-        'overflow-y': 'hidden',
-        'overflow-x': 'hidden',
-      },
     }
   },
   methods: {
     getControllerList: async function () {
       const update = async () => {
         this.controllerList.push({
-          id: 'tommy_test',
+          id: taskInfo.getTaskInfo().controllerID,
           mac: '',
           status: 'loading',
           isScan: true,
+          devices: [],
         })
       }
       await update()
@@ -71,15 +60,15 @@ export default {
         this.$refs.file_ref.currentPathIndex = file.getPathMaxIndex()
         file.clearFileList()
 
-        const initCollection = await api.getCollectionsByName('admin')
+        const initCollection = await api.collection.getByName('admin')
 
         if (initCollection.data !== 0) {
           file.addPath(initCollection.data[0])
           this.$refs.file_ref.currentPathIndex = file.getPathMaxIndex()
           this.$refs.file_ref.currentInfo = initCollection.data[0]
 
-          const folders = await api.getCollectionsByParent('folder', initCollection.data[0].id)
-          const files = await api.getFolderMetaFileByParent('folder', initCollection.data[0].id)
+          const folders = await api.collection.getByParent('folder', initCollection.data[0].id)
+          const files = await api.meta.getByParent('folder', initCollection.data[0].id)
           file.updateFileList(folders)
           file.updateFileList(files)
 
@@ -91,8 +80,10 @@ export default {
     },
   },
   async mounted () {
+    await taskInfo.updateTaskInfo()
     await this.getControllerList()
-    await api.getJwtData()
+    await api.auth.getJwtData()
+    console.log(await api.meta.getByParentWithLimit('folder', 2, 5, 0, 'DESC'))
     this.pageMqttSub()
     this.pageInitPub()
   },
@@ -103,5 +94,3 @@ export default {
   },
 }
 </script>
-<style lang="scss">
-</style>

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

@@ -45,23 +45,33 @@
       v-model="showModal.deleteFile"
       size="small"
       :title="'DELETE'"
-      :message="`Delete File ${deleteInfo.name}.`"
+      :message="`Delete File ${deleteInfo.name}?`"
       :okText=" $t('modal.confirm') "
       @ok="deleteFile()"
     >
     </va-modal>
 
+    <va-modal
+      v-model="showModal.deleteMultiFiles"
+      size="small"
+      :title="'DELETE'"
+      :message="'Delete select files?'"
+      :okText=" $t('modal.confirm') "
+      @ok="deleteMultiFiles()"
+    >
+    </va-modal>
+
     <va-card class="flex sm12 xl12 md12 xs12">
-      <!-- <template slot="header">
+      <template slot="header">
         <div class="flex sm12 xl12 md12 xs12" style="text-align: end;">
-          <va-button class="" color="success" v-if="selected.length" @click="showrefs" target="_blank" small>
+          <!-- <va-button class="" color="success" v-if="selected.length" @click="downloadSelected" target="_blank" small>
             DOWNLOAD
-          </va-button>
-          <va-button class="" color="danger" v-if="selected.length" target="_blank" small>
+          </va-button> -->
+          <va-button class="" color="danger" v-if="selected.length" @click="deleteMultiFilesConfirm" target="_blank" small>
             DELETE
           </va-button>
         </div>
-      </template> -->
+      </template>
 
       <!-- SearchField & perPageSelect-->
       <div class="row align--center">
@@ -137,9 +147,9 @@
         v-else
         :ref="'datatable_ref'"
       >
-        <!-- <template slot="select" slot-scope="props">
+        <template slot="select" slot-scope="props">
           <va-checkbox :value="props.rowData.checked" @input="select(props.rowData)"/>
-        </template> -->
+        </template>
         <template slot="name" slot-scope="props">
           <va-icon
             :name="(props.rowData.type==='folder')?'fa fa-folder':'fa fa-file'"
@@ -163,12 +173,31 @@
           {{transDeviceInfo(props.rowData.configuration)}}
         </template>
         <template slot="actions" slot-scope="props" >
-          <va-popover :message="`download ${props.rowData.name}`" placement="top">
-            <va-button flat small color="gray" icon="fa fa-download" v-if="props.rowData.type !== 'folder'" @click.stop="download(props.rowData)"/>
+          <va-popover :message="`sdcard ${props.rowData.name}`" placement="top">
+            <sd-card-button
+              v-if="(props.rowData.type !== 'folder') && (props.rowData.device.library_name.indexOf('Neulive') >= 0) && (props.rowData.sd_data_record === true)"
+              :meta="props.rowData"
+              :uuidList="SDuuidList"
+              :controller="controllerList[0]"
+              @refreshPage="refreshPage"
+              @downloadSdCard="downloadSdCard"
+            />
+          </va-popover>
+          <va-popover :message="`download ${props.rowData.name} in csv format`" placement="top">
+            <va-button flat small color="gray" icon="fa fa-download" v-if="props.rowData.type !== 'folder' && props.rowData.device.library_name.indexOf('Neulive') >= 0" @click.stop="downloadCsv(props.rowData)"/>
+          </va-popover>
+          <va-popover :message="`download ${props.rowData.name} in excel format`" placement="top">
+            <va-button flat small color="gray" icon="fa fa-download" v-if="props.rowData.type !== 'folder' && props.rowData.device.library_name.indexOf('Elite') >= 0" @click.stop="downloadExcel(props.rowData)"/>
+          </va-popover>
+          <va-popover :message="`download ${props.rowData.name} in csv-edf format`" placement="top">
+            <va-button flat small color="gray" icon="fa fa-download" v-if="props.rowData.type !== 'folder' && props.rowData.device.library_name.indexOf('Neulive') >= 0" @click.stop="downloadExcel(props.rowData)"/>
           </va-popover>
           <va-popover :message="`replay ${props.rowData.name}`" placement="top">
             <va-button flat small color="gray" icon="fa fa-eye" v-if="props.rowData.type !== 'folder'" @click.stop="replay(props.rowData)"/>
           </va-popover>
+          <va-popover :message="`spike ${props.rowData.name}`" placement="top">
+            <va-button flat small color="gray" icon="fa fa-filter" v-if="props.rowData.type !== 'folder' && props.rowData.device.library_name.indexOf('Neulive') >= 0" @click.stop="spike(props.rowData)"/>
+          </va-popover>
           <va-popover :message="`edit ${props.rowData.name}`" placement="top">
             <va-button flat small color="gray" icon="fa fa-pencil" @click.stop="editFileConfirm(props.rowData)"/>
           </va-popover>
@@ -186,16 +215,18 @@ import { debounce } from 'lodash'
 import { file } from '../../../data/file/File'
 import { FulfillingBouncingCircleSpinner } from 'epic-spinners'
 import api from '../../../data/api/index'
+import SdCardButton from '../sdcard/SdCardButton.vue'
 
 export default {
   name: 'FileTable',
   components: {
     FulfillingBouncingCircleSpinner,
+    SdCardButton,
   },
   data () {
     return {
       term: null,
-      perPage: '160',
+      perPage: '80',
       perPageOptions: ['20', '40', '80', '160'],
 
       fileLists: [],
@@ -208,6 +239,7 @@ export default {
       showModal: {
         createFolder: false,
         deleteFile: false,
+        deleteMultiFiles: false,
         editFile: false,
       },
 
@@ -241,19 +273,22 @@ export default {
           height: '2rem',
         },
       },
+      SDuuidList: [],
+      controllerList: [],
     }
   },
   computed: {
     fields () {
       return [
-        // {
-        //   name: '__slot:select',
-        // },
+        {
+          name: '__slot:select',
+          width: '5%',
+        },
         {
           name: '__slot:name',
           title: 'name',
           sortField: 'name',
-          width: '20%',
+          width: '15%',
           titleClass: 'text-center',
         },
         // {
@@ -295,7 +330,7 @@ export default {
         {
           name: '__slot:actions',
           dataClass: 'text-right',
-          width: '15%',
+          width: '25%',
         },
       ]
     },
@@ -323,7 +358,7 @@ export default {
     // },
     select: function (file) {
       event.stopPropagation()
-      const idx = this.fileLists.findIndex(f => f.name === file.name)
+      const idx = this.fileLists.findIndex(f => f.id === file.id)
       this.fileLists[idx].checked = !this.fileLists[idx].checked
     },
     search: debounce(function (term) {
@@ -364,8 +399,8 @@ export default {
         this.currentPathIndex = file.getPathMaxIndex()
 
         // call getfolder api and update
-        const folders = await api.getCollectionsByParent('folder', info.id)
-        const files = await api.getFolderMetaFileByParent('folder', info.id)
+        const folders = await api.collection.getByParent('folder', info.id)
+        const files = await api.meta.getByParent('folder', info.id)
         file.updateFileList(folders)
         file.updateFileList(files)
 
@@ -384,8 +419,8 @@ export default {
         this.currentPathIndex = file.getPathMaxIndex()
         this.currentInfo = item
         // call getfolder api and update
-        const folders = await api.getCollectionsByParent('folder', item.id)
-        const files = await api.getFolderMetaFileByParent('folder', item.id)
+        const folders = await api.collection.getByParent('folder', item.id)
+        const files = await api.meta.getByParent('folder', item.id)
         file.updateFileList(folders)
         file.updateFileList(files)
 
@@ -401,12 +436,12 @@ export default {
       this.currentPathIndex = -1
 
       // call getfolder api and update
-      const initCollection = await api.getCollectionsByParentName('folder', 0, 'root')
+      const initCollection = await api.collection.getByParentName('folder', 0, 'root')
 
       if (initCollection.data.length === 1) {
         this.currentInfo = initCollection.data[0]
-        const folders = await api.getCollectionsByParent('folder', initCollection.data[0].id)
-        const files = await api.getFolderMetaFileByParent('folder', initCollection.data[0].id)
+        const folders = await api.collection.getByParent('folder', initCollection.data[0].id)
+        const files = await api.meta.getByParent('folder', initCollection.data[0].id)
         file.updateFileList(folders)
         file.updateFileList(files)
         this.fileLists = file.getFileList()
@@ -424,7 +459,7 @@ export default {
         this.setInputFieldError(this.createInfo.errorMessagesAll[0] + ' ' + illegalChar[0], this.createInfo)
       } else {
         // folder name existed
-        const existedFolder = await api.getCollectionsByParentName(this.currentInfo.type, this.currentInfo.id, term)
+        const existedFolder = await api.collection.getByParentName(this.currentInfo.type, this.currentInfo.id, term)
         if (existedFolder.data.length === 0) {
           this.setInputFieldSuccess(this.createInfo)
         } else {
@@ -440,7 +475,7 @@ export default {
     createFolder: async function () {
       const parent = [].concat((this.pathLists.length === 0) ? this.currentInfo.id : this.pathLists[this.pathLists.length - 1].id)
       const type = 'folder'
-      await api.createCollection({
+      await api.collection.create({
         name: this.createInfo.changedName,
         parent: { [type]: parent },
         type: type,
@@ -465,7 +500,7 @@ export default {
     editFile: async function () {
       // TODO editFile
       if (this.editInfo.type !== 'folder') {
-        await api.updateMetaFile(this.editInfo.info.id, { name: this.editInfo.changedName })
+        await api.meta.update(this.editInfo.info.id, { name: this.editInfo.changedName })
       } else {
       }
       await this.editFileDone()
@@ -523,8 +558,7 @@ export default {
     },
     removeFileFromList: function () {
     },
-    deleteFileConfirm: function (info) {
-      // console.log(info)
+    fillDeleteInfo (info) {
       this.deleteInfo.path = info.path
       this.deleteInfo.name = info.name
       this.deleteInfo.metaID = info.id
@@ -538,26 +572,17 @@ export default {
           this.deleteInfo.miniChannelAndIDArrays.push([channel, idArray[0]])
         }
       }
-      // console.log(this.deleteInfo.rawChannelAndIDArrays)
-      // console.log(this.deleteInfo.miniChannelAndIDArrays)
-      // console.log(this.deleteInfo.metaID)
+    },
+    async deleteSingleFileByDeleteInfo () {
+      await api.meta.update(this.deleteInfo.metaID, { deleted: true })
+      await api.meta.clearDel()
+    },
+    deleteFileConfirm: function (info) {
+      this.fillDeleteInfo(info)
       this.showModal.deleteFile = true
     },
     deleteFile: async function () {
-      for (const item of this.deleteInfo.rawChannelAndIDArrays) {
-        const channel = item[0]
-        const id = item[1]
-        await api.updateRawFile(channel, id, { deleted: true })
-        await api.clearDeleteRawFile(channel, id)
-      }
-      for (const item of this.deleteInfo.miniChannelAndIDArrays) {
-        const channel = item[0]
-        const id = item[1]
-        await api.updateMiniFile(channel, id, { deleted: true })
-        await api.clearDeleteMiniFile(channel, id)
-      }
-      await api.updateMetaFile(this.deleteInfo.metaID, { deleted: true })
-      await api.clearDeleteMetaFile(this.deleteInfo.metaID)
+      await this.deleteSingleFileByDeleteInfo()
       await this.deleteFileDone()
     },
     deleteFileDone: async function () {
@@ -572,6 +597,12 @@ export default {
         position: 'bottom-right',
       })
     },
+    deleteMultiFilesConfirm: function () {
+      this.showModal.deleteMultiFiles = true
+    },
+    deleteMultiFiles: async function () {
+      this.deleteSelected()
+    },
     inputFieldReset: function (info) {
       info.name = ''
       info.changedName = ''
@@ -597,8 +628,8 @@ export default {
         file.clearFileList()
 
         // call getfolder api and update
-        const folders = await api.getCollectionsByParent('folder', this.currentInfo.id)
-        const files = await api.getFolderMetaFileByParent('folder', this.currentInfo.id)
+        const folders = await api.collection.getByParent('folder', this.currentInfo.id)
+        const files = await api.meta.getByParent('folder', this.currentInfo.id)
         file.updateFileList(folders)
         file.updateFileList(files)
 
@@ -608,17 +639,78 @@ export default {
       // this.$refs.datatable_ref.refresh()
       // this.$refs.datatable_ref.currentPage = 1
     },
-    showrefs: function () {
-      this.$emit('download', this.selected)
+    // downloadSelected: function () {
+    //   for (let i = 0; i < this.selected.length; i++) {
+    //     const meta = this.selected[i]
+    //     this.downloadCsv(meta)
+    //   }
+    // },
+    async deleteSelected () {
+      for (let i = 0; i < this.selected.length; i++) {
+        const meta = this.selected[i]
+        this.fillDeleteInfo(meta)
+        await this.deleteSingleFileByDeleteInfo()
+        this.showToast(`deleted ${this.deleteInfo.name}`, {
+          position: 'bottom-right',
+        })
+      }
+      const tmpCurrentPage = this.$refs.datatable_ref.currentPage
+      await this.refreshPage()
+      this.$refs.datatable_ref.currentPage = tmpCurrentPage
+      this.$refs.datatable_ref.inputPage(tmpCurrentPage)
     },
-    download: async function (info) {
-      this.$emit('download', info)
+    downloadCsv: async function (meta) {
+      const href = location.href.split('/')[2]
+      const connectCheck = await api.connection.check()
+      if (connectCheck.status === 200) {
+        window.open('http://' + href + '/#/download/online/csv/' + meta.id)
+      } else {
+        window.open('http://' + href + '/#/download/offline/csv/' + meta.id)
+      }
+    },
+    downloadExcel: async function (meta) {
+      const href = location.href.split('/')[2]
+      const connectCheck = await api.connection.check()
+      if (meta.device.library_name.indexOf('Elite') >= 0) {
+        if (connectCheck.status === 200) {
+          window.open('http://' + href + '/#/download/online/excel/' + meta.id)
+        } else {
+          window.open('http://' + href + '/#/download/offline/excel/' + meta.id)
+        }
+      } else if (meta.device.library_name.indexOf('Neulive') >= 0) {
+        if (connectCheck.status === 200) {
+          window.open('http://' + href + '/#/download/online/csv-edf/' + meta.id)
+        } else {
+          window.open('http://' + href + '/#/download/offline/csv-edf/' + meta.id)
+        }
+      }
+    },
+    downloadSdCard: async function (meta) {
+      const href = location.href.split('/')[2]
+      if (meta.device.library_name.indexOf('Neulive') >= 0) {
+        if (window.navigator.onLine) {
+          window.open('http://' + href + '/#/download/online/csv/' + meta.id + '/sd')
+        } else {
+          window.open('http://' + href + '/#/download/offline/csv/' + meta.id + '/sd')
+        }
+      }
+    },
+    async getSDuuidList () {
+      // const uuidList = ['32abdb14-fc0c-11eb-9aa8-dca6326cbc6b', '940ca938-f662-11eb-8a41-dca6326cbc6b']
+      if (this.controllerList.length > 0) {
+        if (this.controllerList[0].sd_uploading === false) {
+          const ret = await api.sdcard.getuuidList()
+          if (ret.status === 200) {
+            this.SDuuidList = ret.data
+          }
+        }
+      }
     },
     replay: function (meta) {
       if (meta.device.library_name.includes('Neulive') === true) {
-        // window.open('http://' + location.href.split('/')[2].split(':')[0] + '/#/admin/data-replay/neulive/' + meta.id)
+        // window.open('http://' + location.href.split('/')[2].split(':')[0] + '/#/admin/data-replay/' + meta.id)
         this.$router.push({
-          path: '/admin/data-replay/neulive/' + meta.id,
+          path: '/admin/data-replay/' + meta.id,
         })
       } else if (meta.device.library_name.includes('Elite') === true) {
         // window.open('http://' + location.href.split('/')[2].split(':')[0] + '/#/admin/data-replay/elite/' + meta.id)
@@ -627,8 +719,18 @@ export default {
         })
       }
     },
+    spike: function (meta) {
+      if (meta.device.library_name.includes('Neulive') === true) {
+        this.$router.push({
+          path: '/admin/data-spike/' + meta.id,
+        })
+      }
+    },
   },
-  mounted () {
+  async mounted () {
+    const controllerList = await api.controller.getAll()
+    this.controllerList = controllerList.data
+    this.getSDuuidList()
   },
   destroyed () {
   },

src/components/file/sdcard/SdCardApiAction.vue

@@ -0,0 +1,84 @@
+<template>
+  <div/>
+</template>
+
+<script>
+
+import { apiManager } from './apiManager'
+
+export default {
+  name: 'SdCardApiAction',
+  components: {
+  },
+  props: {
+  },
+  data () {
+    return {
+      metaID: '',
+      mac_address: '',
+      uuid: '',
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    initMetaInfo (meta) {
+      this.metaID = meta.id
+      // bytes array to hex string formamt
+      this.mac_address = meta.device.device_address.map(data =>
+        data.toString(16)
+          .padStart(2, '0')
+          .toUpperCase()).join(':')
+      this.uuid = meta.uuid
+    },
+    // async checkInSD (meta) {
+    //   this.initMetaInfo(meta)
+    //   this.pageToast('Start checking in SD card...')
+    //   apiManager.startProgressBar()
+    //   const result = await apiManager.call('Check_in_SD', this.metaID, this.mac_address, this.uuid)
+    //   this.checkSDresult = result.data
+    //   this.pageToast('In SD card: ' + this.checkSDresult)
+    //   apiManager.endProgressBar()
+    //   return result.data
+    // },
+    async moveToDB (meta, controller) {
+      this.initMetaInfo(meta)
+      this.pageToast('Start Moving to database...')
+      const result = await apiManager.call('Move_to_DB', controller.id, this.metaID, this.mac_address, this.uuid)
+      return result
+    },
+    async deleteSDCard (meta, controller) {
+      this.initMetaInfo(meta)
+      this.pageToast('Start deleting in SD card...')
+      await apiManager.call('Delete_SD', controller.id, this.metaID, this.mac_address, this.uuid)
+    },
+    pageToast: function (mes) {
+      this.showToast(
+        mes,
+        {
+          icon: 'fa-bell',
+          position: 'bottom-right',
+          duration: 4000,
+        },
+      )
+    },
+  },
+  async mounted () {
+  },
+  destroyed () {
+  },
+  watch: {
+  },
+}
+</script>
+
+<style lang="scss">
+  #nprogress .bar {
+    background: red;
+  }
+
+  #nprogress .spinner-icon {
+    border-top-color: red;
+    border-left-color: red;
+  }
+</style>

src/components/file/sdcard/SdCardButton.vue

@@ -0,0 +1,148 @@
+<template>
+  <div>
+    <!-- recorded = false, no icon; recorded = true, gray icon; uploaded = true, blue icon; in uuid list: gray icon + red exclam -->
+    <va-button
+      class="va-button--with-left-icon va-button--without-title"
+      v-show="meta.sd_data_record === true"
+      :icon="meta.sd_data_uploaded === true ? 'fa fa-download' : ''"
+      :color="this.$themes.primary"
+      @click.native.stop="performButtonAction()"
+      flat
+      small
+    >
+      <va-icon
+        v-if="meta.sd_data_uploaded === false"
+        class="va-button__content__icon va-button__content__icon-left"
+        name="material-icons"
+        color="grey"
+        @click.native.stop="performButtonAction()"
+        small
+        fixed-width
+      > sd_card
+      </va-icon>
+    </va-button>
+
+    <sd-card-api-action :ref="'sd_card_api'"/>
+    <va-modal
+      class="flex sm12 xl12 md12 xs12"
+      v-model="moveToDBModal"
+      size="small"
+      :title="'UPLOAD SD CARD DATA'"
+      :okText=" $t('modal.confirm') "
+      @ok="moveToDB()"
+    />
+    <progress-modal
+      title="SD card data uploading"
+      :time="(parseInt(meta.time_duration) / 2e6).toString()"
+      :ref="'progressModalRef'"
+    />
+  </div>
+</template>
+
+<script>
+import SdCardApiAction from './SdCardApiAction.vue'
+import progressModal from '@/components/common/progressBarModal/progressModal.vue'
+
+export default {
+  name: 'SdCardButton',
+  components: {
+    SdCardApiAction,
+    progressModal,
+  },
+  props: {
+    controller: {
+      type: Object,
+      required: true,
+    },
+    uuidList: {
+      type: Array,
+      required: true,
+    },
+    meta: {
+      type: Object,
+      required: true,
+    },
+  },
+  data () {
+    return {
+      isSdCardDataLoaded: false,
+      moveToDBModal: false,
+      checkSDresult: '',
+      metaID: '',
+      mac_address: '',
+      uuid: '',
+      icon: 'fa fa-usb',
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    init () {
+      this.metaID = this.meta.id
+      this.mac_address = this.meta.device.device_address.map(data =>
+        data.toString(16)
+          .padStart(2, '0')
+          .toUpperCase()).join(':')
+      this.uuid = this.meta.uuid
+    },
+    async performButtonAction () {
+      const recorded = this.meta.sd_data_record // true or false
+      const uploaded = this.meta.sd_data_uploaded // true or false
+      if (recorded === true) {
+        if (uploaded !== true) {
+          if (this.uuidList.includes(this.uuid)) {
+            this.moveToDBModal = true
+          } else {
+            this.pageToast('Can not access data. Please connect your device to hub by usb.')
+          }
+        } else {
+          this.executeDownload()
+        }
+      }
+    },
+    async moveToDB () {
+      await this.executeUpload()
+      this.$emit('refreshPage')
+    },
+    // async executeCheckInSD () {
+    //   return await this.$refs.sd_card_api.checkInSD(this.meta)
+    // },
+    async executeUpload () {
+      this.$refs.progressModalRef.show()
+      const result = await this.$refs.sd_card_api.moveToDB(this.meta, this.controller).catch(_ => {
+        this.$refs.progressModalRef.hide()
+        this.pageToast('Upload SD card data error, please connect Neullive to Hub by usb or data corrupted.')
+      })
+      if (result.data === true) {
+        this.pageToast('Upload SD card data done.')
+      } else {
+        this.pageToast('Upload SD card data error, please connect Neullive to Hub by usb or data corrupted.')
+      }
+      this.$refs.progressModalRef.progressDone()
+      // remove delete sd card first, still have problem.
+      // await this.$refs.sd_card_api.deleteSDCard(this.meta, this.controller)
+    },
+    executeDownload () {
+      this.$emit('downloadSdCard', this.meta)
+    },
+    pageToast: function (mes) {
+      this.showToast(
+        mes,
+        {
+          icon: 'fa-bell',
+          position: 'bottom-right',
+          duration: 7000,
+        },
+      )
+    },
+  },
+  async mounted () {
+    this.init()
+  },
+  watch: { // cuz data table will not call mounted
+    meta: function (val) {
+      this.init()
+    },
+  },
+}
+</script>

src/components/file/sdcard/apiManager.js

@@ -0,0 +1,35 @@
+import api from '@/data/api/index'
+import nProgress from 'nprogress'
+
+export const apiManager = {
+  call: async (instruction, controllerID, metaID, macAddress, uuid) => {
+    if (instruction === 'Check_in_SD') {
+      return await api.sdcard.exist({
+        controllerID: controllerID,
+        metaID: metaID,
+        mac: macAddress,
+        uuid: uuid,
+      })
+    } else if (instruction === 'Delete_SD') {
+      return await api.sdcard.deleted({
+        controllerID: controllerID,
+        metaID: metaID,
+        mac: macAddress,
+        uuid: uuid,
+      })
+    } else if (instruction === 'Move_to_DB') {
+      return await api.sdcard.upload({
+        controllerID: controllerID,
+        metaID: metaID,
+        mac: macAddress,
+        uuid: uuid,
+      })
+    }
+  },
+  startProgressBar: () => {
+    nProgress.start()
+  },
+  endProgressBar: () => {
+    nProgress.done()
+  },
+}

src/components/project/items/ConditionWindow.vue

@@ -1,146 +0,0 @@
-<template>
-  <div class="modal">
-    <va-modal
-      v-model="showModal"
-      size="small"
-      :title=" $t('Set condition')"
-      :okText=" $t('modal.confirm') "
-      :cancelText=" $t('modal.cancel') "
-      @ok="sendCondition"
-      @cancel="cancel"
-    >
-      <va-input
-        v-if="isTmp"
-        v-model="conditionAlias"
-        :label="$t('Condition name')"
-        required
-      />
-      <p v-if="!isTmp"> {{ 'Condition name: '.concat(conditionAlias) }} </p>
-      <div
-        v-for="condition in conditions"
-        :key="condition.id"
-      >
-        <div class="flex row align--center">
-          <va-input
-            v-model="condition.startTime"
-            :label="$t('StartTime')"
-          />
-          <va-input
-            v-model="condition.duration"
-            :label="$t('Duration')"
-          />
-          <va-icon
-            name="ion ion-md-close"
-            color="info"
-            class="ml-2 pa-1 shrink"
-            style="cursor: pointer;"
-            @click.native="removeConditionButton(condition)"
-          />
-          <select class="param-selection" v-model="condition.paramID">
-            <option v-for="(option, key) in allParams" :key="key" :value="key" >{{ option.paramsSet.alias }}</option>
-          </select>
-        </div>
-      </div>
-      <va-button class="mb-2" @click="addConditionButton()">
-        Add new condition
-      </va-button>
-    </va-modal>
-  </div>
-</template>
-
-<script>
-import { mapActions, mapGetters } from 'vuex'
-import types from '@/store/modules/project/content/types'
-import { getUniqueID } from '@/data/tool'
-
-export default {
-  name: 'ConditionWindow',
-  components: {
-  },
-  computed: {
-    ...mapGetters('projectContent', {
-      allParams: types.params.getAll,
-    }),
-  },
-  props: {
-    conditionID: {
-      type: String,
-    },
-    conditionName: {
-      type: String,
-      default: '',
-    },
-  },
-  data () {
-    return {
-      conditionAlias: this.conditionName,
-      conditions: [],
-      backupConditions: [],
-      showModal: false,
-      isTmp: false,
-    }
-  },
-  mqtt: {
-  },
-  methods: {
-    ...mapActions('projectContent', [types.devices.updateSetting]),
-    ...mapActions('projectContent', [types.params.updateTmp]),
-    backupCondition () {
-      this.backupConditions = JSON.parse(JSON.stringify(this.conditions)) // deep copy
-    },
-    restoreToBackupCondition () {
-      this.conditions = JSON.parse(JSON.stringify(this.backupConditions)) // deep copy
-    },
-    addConditionButton () {
-      const firstKey = Object.keys(this.allParams)[0]
-      const id = getUniqueID()
-      const condition = {
-        id: id,
-        startTime: 0,
-        duration: 0,
-        paramID: firstKey,
-      }
-      this.conditions.push(condition)
-    },
-    removeConditionButton (condition) {
-      this.conditions = this.conditions.filter(conditionToFilter => conditionToFilter.id !== condition.id)
-    },
-    async sendCondition () {
-      await this.updateSettingDevice({ conditionID: this.conditionID, alias: this.conditionAlias, conditions: this.conditions })
-      this.showModal = false
-      if (this.isTmp) {
-        this.conditions = []
-        this.conditionAlias = ''
-        this.isTmp = false
-      }
-      this.backupCondition()
-      this.$emit('updateParentView')
-    },
-    cancel () {
-      this.showModal = false
-      if (this.isTmp) {
-        this.conditionAlias = ''
-        this.isTmp = false
-      }
-      this.restoreToBackupCondition()
-    },
-
-    pageToast: function (mes) {
-      this.showToast(
-        mes,
-        {
-          icon: 'fa-bell',
-          position: 'bottom-right',
-          duration: 4000,
-        },
-      )
-    },
-  },
-  mounted () {
-  },
-  destroyed () {
-  },
-  watch: {
-  },
-}
-</script>

src/components/project/items/DeviceAndConditionMapping.vue

@@ -1,181 +0,0 @@
-<template>
-  <div class="modal">
-    <va-modal
-      v-model="showModal"
-      size="small"
-      :title=" $t('Set timer and parameters')"
-      :okText=" $t('modal.confirm') "
-      :cancelText=" $t('modal.cancel') "
-      @ok="sendMapping"
-      @cancel="cancel"
-    >
-      Use condition template
-      <select class="condition-selection" v-model="selectedTemplateID" @change="onChangeTemplate($event)">
-        <option v-for="(condition, key) in allConditions" :key="key" :value="key" >{{ condition.alias }}</option>
-      </select>
-      <br/>
-      <div
-        v-for="mapping in mappings"
-        :key="mapping.id"
-      >
-        <div class="flex row align--center">
-          <va-input
-            v-model="mapping.startTime"
-            :label="$t('StartTime')"
-          />
-          <va-input
-            v-model="mapping.duration"
-            :label="$t('Duration')"
-          />
-          <va-icon
-            name="ion ion-md-close"
-            color="info"
-            class="ml-2 pa-1 shrink"
-            style="cursor: pointer;"
-            @click.native="removeMappingButton(mapping)"
-          />
-          <select class="param-selection" v-model="mapping.paramID">
-            <option v-for="(option, key) in allParams" :key="key" :value="key" >{{ option.paramsSet.alias }}</option>
-          </select>
-        </div>
-      </div>
-      <va-button class="mb-2" @click="addMappingButton()">
-        Add new mapping
-      </va-button>
-    </va-modal>
-  </div>
-</template>
-
-<script>
-import { mapActions, mapGetters } from 'vuex'
-import types from '@/store/modules/project/content/types'
-import { getUniqueID } from '@/data/tool'
-
-export default {
-  name: 'DeviceAndConditionMapping',
-  components: {
-  },
-  computed: {
-    ...mapGetters('projectContent', {
-      allConditions: types.devices.getAllConditions,
-    }),
-    ...mapGetters('projectContent', {
-      allParams: types.params.getAll,
-    }),
-  },
-  props: {
-    taskID: {
-      type: String,
-      required: true,
-    },
-    deviceID: {
-      type: String,
-      required: true,
-    },
-    deviceName: {
-      type: String,
-      default: 'Neulive',
-    },
-  },
-  data () {
-    return {
-      mappings: [],
-      backupMappings: [],
-      showModal: false,
-      selectedTemplateID: '',
-      lastSelectedID: '',
-    }
-  },
-  mqtt: {
-  },
-  methods: {
-    ...mapActions('projectContent', [types.tasks.updateMapping, types.tasks.deleteMapping]),
-    ...mapActions('projectContent', [types.params.updateTmp]),
-    getDefaultMapping () {
-      const firstKey = Object.keys(this.allParams)[0]
-      const id = getUniqueID()
-      const startConditionID = getUniqueID()
-      const durationConditionID = getUniqueID()
-      const startRecordingID = getUniqueID()
-      const endRecordingID = getUniqueID()
-      const startStimulationID = getUniqueID()
-      const endStimulationID = getUniqueID()
-      const mapping = {
-        id: id,
-        deviceID: this.deviceID,
-        startTime: 0,
-        duration: 0,
-        paramID: firstKey,
-        startConditionID: startConditionID,
-        durationConditionID: durationConditionID,
-        startRecordingID: startRecordingID,
-        endRecordingID: endRecordingID,
-        startStimulationID: startStimulationID,
-        endStimulationID: endStimulationID,
-      }
-      return mapping
-    },
-    backupMapping () {
-      this.backupMappings = JSON.parse(JSON.stringify(this.mappings)) // deep copy
-    },
-    restoreToBackupMapping () {
-      this.mappings = JSON.parse(JSON.stringify(this.backupMappings)) // deep copy
-    },
-    resetMapping () {
-      this.mappings = []
-    },
-    addMappingButton () {
-      const mapping = this.getDefaultMapping()
-      this.mappings.push(mapping)
-    },
-    async removeMappingButton (mapping) {
-      await this.deleteMappingTask({ taskID: this.taskID, mapping: mapping })
-      this.mappings = this.mappings.filter(mappingToFilter => mappingToFilter.id !== mapping.id)
-    },
-    async sendMapping () {
-      await this.updateMappingTask({ taskID: this.taskID, mappingList: this.mappings })
-      this.showModal = false
-      this.backupMapping()
-      this.lastSelectedID = this.selectedTemplateID
-    },
-    cancel () {
-      this.showModal = false
-      this.selectedTemplateID = this.lastSelectedID
-      this.restoreToBackupMapping()
-    },
-
-    onChangeTemplate (event) {
-      this.resetMapping()
-      const conditions = this.allConditions[this.selectedTemplateID]
-      for (const [_key, _value] of Object.entries(conditions)) {
-        var mapping = this.getDefaultMapping()
-        if (_key !== 'alias') {
-          mapping.id = _key
-          for (const [_k, _v] of Object.entries(_value)) {
-            mapping[_k] = _v
-          }
-          this.mappings.push(mapping)
-        }
-      }
-      this.backupMapping()
-    },
-
-    pageToast: function (mes) {
-      this.showToast(
-        mes,
-        {
-          icon: 'fa-bell',
-          position: 'bottom-right',
-          duration: 4000,
-        },
-      )
-    },
-  },
-  mounted () {
-  },
-  destroyed () {
-  },
-  watch: {
-  },
-}
-</script>

src/components/project/items/NeuliveParameterRecording.vue

@@ -1,205 +0,0 @@
-<template>
-  <div class="flex" >
-    <div class="row">
-      <div class="flex sm12 xl12 md12 xs12">
-        Record
-        <div
-          style='display: inline-block;'
-          v-for="channel in [1, 2, 3, 4, 5, 6, 7, 8]"
-          :key="channel"
-        >
-          <va-button
-            class="mx-1 px-1"
-            v-if="channelList != null && channelList.indexOf(channel) >= 0"
-            @click="channelClickRemove(channel)"
-            small
-          >
-            {{channel}}
-          </va-button>
-          <va-button
-            class="mx-1 px-1"
-            v-if="channelList == null || channelList.indexOf(channel) < 0"
-            @click="channelClickAdd(channel)"
-            small outline
-          >
-            {{channel}}
-          </va-button>
-        </div>
-      </div>
-    </div>
-
-    <div class="row">
-      <div class="flex sm12 xl12 md12 xs12">
-        <va-select
-          :on-change="ampGainSelectChange()"
-          :label="''"
-          v-model="ampGainSelect"
-          textBy="description"
-          :options="ampGainOptions"
-        />
-      </div>
-    </div>
-
-    <div class="row">
-      <div class="flex sm12 xl12 md12 xs12">
-        <div class="flex row align--center">
-          <va-button slot="append" class="mr-2 pa-1 shrink" small @click="sampleRateChange(4)">
-            4
-          </va-button>
-          <va-input
-            @keyup.enter="sampleRateChange(sampleRateInput)"
-            v-model="sampleRateInput"
-            class="mb-0"
-            style="width: 100px;"
-          >
-            <p slot="append" style="margin-right: 0;" small>
-              Hz
-            </p>
-          </va-input>
-          <va-button slot="append" class="ml-2 pa-1 shrink" small @click="sampleRateChange(1000)">
-            1000
-          </va-button>
-        </div>
-        <va-slider
-          @mouseup.native="sampleRateChange(sampleRate)"
-          @mouseleave.native="sampleRateChange(sampleRate)"
-          @touchend.native="sampleRateChange(sampleRate)"
-          class="flex sm12 xl12 md12 xs12"
-          value-visible
-          v-model="sampleRate"
-          :min="4"
-          :max="1000"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { mapActions } from 'vuex'
-import types from '@/store/modules/project/content/types'
-
-export default {
-  name: 'NeuliveParameterRecording',
-  components: {
-  },
-  data () {
-    return {
-      channelList: [],
-      ampGainOptions: [
-        {
-          id: 0,
-          description: '25',
-        },
-        {
-          id: 1,
-          description: '100',
-        },
-        {
-          id: 2,
-          description: '400',
-        },
-        {
-          id: 3,
-          description: '800',
-        },
-      ],
-      ampGainSelect: { id: 2, description: '400' },
-      sampleRateInput: '1000',
-      sampleRate: 1000,
-
-      tmpParam: {},
-    }
-  },
-  mqtt: {
-  },
-  methods: {
-    ...mapActions('projectContent', [types.params.updateTmp]),
-
-    init () {
-      this.tmpParam = { paramsSet: { recording: { RECORDING_CH: 0, AMP_GAIN: 1, ADC_CLOCK: parseInt(parseFloat(1 / parseFloat(this.sampleRate / 200)) * 1000) } } }
-    },
-    reset () {
-      this.tmpParam = { paramsSet: { recording: {} } }
-    },
-    async channelClickAdd (val) {
-      if (this.channelList.indexOf(val) < 0) {
-        this.channelList.push(val)
-
-        let channelSet = ''
-        for (let i = 8; i >= 1; i--) {
-          if (this.channelList.indexOf(i) >= 0) {
-            channelSet += '1'
-          } else {
-            channelSet += '0'
-          }
-        }
-        const channelValue = parseInt(channelSet, 2)
-        this.updateTmp('RECORDING_CH', channelValue)
-        await this.updateTmpParam(this.tmpParam)
-      }
-    },
-    async channelClickRemove (val) {
-      if (this.channelList.indexOf(val) >= 0) {
-        this.channelList.splice(this.channelList.indexOf(val), 1)
-        let channelSet = ''
-        for (let i = 8; i >= 1; i--) {
-          if (this.channelList.indexOf(i) >= 0) {
-            channelSet += '1'
-          } else {
-            channelSet += '0'
-          }
-        }
-        const channelValue = parseInt(channelSet, 2)
-        this.updateTmp('RECORDING_CH', channelValue)
-        await this.updateTmpParam(this.tmpParam)
-      }
-    },
-    async ampGainSelectChange () {
-      if (this.ampGainSelect != null) {
-        this.updateTmp('AMP_GAIN', (this.ampGainSelect.id + 3) % 4)
-        await this.updateTmpParam(this.tmpParam)
-      }
-    },
-    async sampleRateChange (val) {
-      if (this.sampleRate == null) {
-        return false
-      }
-      if (isNaN(val) || parseInt(val) > 1000 || parseInt(val) < 4) {
-        this.sampleRateInput = '1000'
-        this.sampleRate = 1000
-        return false
-      }
-      if (parseInt(this.sampleRateInput) !== this.sampleRate || this.sampleRate !== parseInt(val)) {
-        this.sampleRateInput = String(val)
-        this.sampleRate = parseInt(val)
-      }
-      this.updateTmp('ADC_CLOCK', parseInt(parseFloat(1 / parseFloat(this.sampleRate / 200)) * 1000))
-      await this.updateTmpParam(this.tmpParam)
-    },
-    updateTmp (key, value) {
-      this.tmpParam.paramsSet.recording[key] = value
-    },
-
-    pageToast: function (mes) {
-      this.showToast(
-        mes,
-        {
-          icon: 'fa-bell',
-          position: 'bottom-right',
-          duration: 4000,
-        },
-      )
-    },
-  },
-  async created () {
-    this.init()
-    await this.updateTmpParam(this.tmpParam)
-  },
-  async destroyed () {
-    this.reset()
-  },
-  watch: {
-  },
-}
-</script>

src/components/project/items/NeuliveParameterStimulation.vue

@@ -1,678 +0,0 @@
-<template>
-  <div class="flex">
-    <div>
-      Stimulate
-      <div class="mt-4">
-        <div class="row sm12 xl12 md12 xs12">
-          <p class="display-6">ELECTRODE</p>
-        </div>
-        <div class="row">
-          <div class="flex sm12 xl12 md12 xs12">
-            <va-button-toggle
-              :on-change="stimulateElectrodeSelectChange()"
-              small
-              outline
-              v-model="stimulateElectrodeSelect"
-              :options="stimulateElectrodeOptions"
-            />
-          </div>
-        </div>
-      </div>
-
-      <div class="mt-4">
-        <div class="row sm12 xl12 md12 xs12">
-          <p class="display-6">CHANNELS</p>
-        </div>
-        <div class="row">
-          <div class="flex sm12 xl12 md12 xs12">
-            <div
-              style='display: inline-block;'
-              v-for="channel in [1, 2, 3, 4, 5, 6, 7, 8]"
-              :key="channel"
-            >
-              <va-button
-                class="mx-1 px-2"
-                color="success"
-                v-if="posChannelList.indexOf(channel) >= 0 && negChannelList.indexOf(channel) < 0"
-                @click="channelClick(channel)"
-                small
-              >
-                {{channel}}
-              </va-button>
-              <va-button
-                class="mx-1 px-2"
-                color="danger"
-                v-if="posChannelList.indexOf(channel) < 0 && negChannelList.indexOf(channel) >= 0"
-                @click="channelClick(channel)"
-                small
-              >
-                {{channel}}
-              </va-button>
-              <va-button
-                class="mx-1 px-2"
-                v-if="posChannelList.indexOf(channel) < 0 && negChannelList.indexOf(channel) < 0"
-                @click="channelClick(channel)"
-                small outline
-              >
-                {{channel}}
-              </va-button>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="mt-4">
-        <div class="row sm12 xl12 md12 xs12">
-          <p class="display-6">CYCLE NUMBER</p>
-        </div>
-        <div class="row">
-          <div class="flex sm12 xl12 md12 xs12">
-            <va-button-toggle
-              :on-change="cycleNumberSelectChange()"
-              small
-              outline
-              v-model="cycleNumberSelect"
-              :options="cycleNumberOptions"
-            />
-          </div>
-        </div>
-
-        <div class="row" v-if="cycleNumberSelect==0">
-          <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="cycleNumberChange(1)">
-                1
-              </va-button>
-              <va-input
-                @keyup.enter="cycleNumberChange(cycleNumberInput)"
-                v-model="cycleNumberInput"
-                class="mb-0"
-              >
-                <p slot="append" style="margin-right: 0;" small>
-                  Rounds
-                </p>
-              </va-input>
-              <va-button slot="append" class="ml-2 pa-1 shrink" small @click="cycleNumberChange(256)">
-                256
-              </va-button>
-            </div>
-            <va-slider
-              class="flex sm12 xl12 md12 xs12"
-              @mouseup.native="cycleNumberChange(cycleNumber)"
-              @mouseleave.native="cycleNumberChange(cycleNumber)"
-              @touchend.native="cycleNumberChange(cycleNumber)"
-              value-visible
-              v-model="cycleNumber"
-              :min="1"
-              :max="256"
-            />
-          </div>
-        </div>
-      </div>
-
-      <div class="mt-4">
-        <div class="row sm12 xl12 md12 xs12">
-          <p class="display-6">AMPLITUDE (uA)</p>
-        </div>
-
-        <div class="row">
-          <div class="flex sm12 xl12 md12 xs12">
-            <div class="flex row align--center">
-              <va-button slot="append" class="mr-2 pa-1 shrink" small @click="amplitudeNumberChange(5)">
-                5
-              </va-button>
-              <va-input
-                @keyup.enter="amplitudeNumberChange(amplitudeNumberInput)"
-                v-model="amplitudeNumberInput"
-                class="mb-0"
-              >
-                <p slot="append" style="margin-right: 0;" small>
-                  uA
-                </p>
-              </va-input>
-              <va-button slot="append" class="ml-2 pa-1 shrink" small @click="amplitudeNumberChange(4000)">
-                4000
-              </va-button>
-            </div>
-            <va-slider
-              class="flex sm12 xl12 md12 xs12"
-              @mouseup.native="amplitudeNumberChange(amplitudeNumber)"
-              @mouseleave.native="amplitudeNumberChange(amplitudeNumber)"
-              @touchend.native="amplitudeNumberChange(amplitudeNumber)"
-              value-visible
-              v-model="amplitudeNumber"
-              :min="5"
-              :max="4000"
-            />
-          </div>
-        </div>
-      </div>
-
-      <div class="mt-4">
-        <div class="row sm12 xl12 md12 xs12">
-          <p class="display-6">PATTERN</p>
-        </div>
-        <div class="row">
-          <div class="flex sm12 xl12 md12 xs12">
-            <va-button-toggle
-              :on-change="patternModeSelectChange()"
-              small
-              outline
-              v-model="patternModeSelect"
-              :options="patternModeOptions"
-            />
-          </div>
-        </div>
-
-        <div class="row">
-          <div class="flex sm12 xl12 md12 xs12">
-            <va-button-toggle
-              small
-              outline
-              v-model="unitSelect"
-              :options="unitOptions"
-              @click.native="transUnit()"
-            />
-          </div>
-        </div>
-
-        <div class="row">
-          <div class="flex sm12 xl12 md12 xs12">
-            <div class="flex row align--center">
-              <va-input
-                v-model="frequencyNumberInput"
-                class="mb-0"
-                :label="'Frequency'"
-                @keyup.enter="frequencyNumberChange(frequencyNumberInput)"
-              >
-                <p slot="append" style="margin-right: 0;" small>
-                  Hz
-                </p>
-              </va-input>
-            </div>
-          </div>
-        </div>
-
-        <div class="row">
-          <div class="flex sm12 xl12 md12 xs12">
-            <div class="flex row align--center">
-              <va-input
-                v-model="periodNumberInput"
-                class="mb-0"
-                :label="'Period'"
-                @keyup.enter="periodNumberChange(periodNumberInput)"
-              >
-                <p slot="append" style="margin-right: 0;" small>
-                  {{unitOptions[unitSelect].label}}
-                </p>
-              </va-input>
-            </div>
-          </div>
-        </div>
-
-        <div class="row">
-          <div class="flex sm12 xl12 md12 xs12">
-            <div class="flex row align--center">
-              <va-button slot="append" class="mr-2 pa-1 shrink" small @click="patternModeSelect?timeRangeChange(1, 0):timeRangeChange(1, 0)">
-                0
-              </va-button>
-              <va-input
-                @keyup.enter="timeRangeChange(1, t1RangeInput)"
-                v-model="t1RangeInput"
-                class="mb-0"
-                :label="'T1 RANGE'"
-              >
-                <p slot="append" style="margin-right: 0;" small>
-                  {{unitOptions[unitSelect].label}}
-                </p>
-              </va-input>
-              <va-button slot="append" class="ml-2 pa-1 shrink" small @click="timeRangeChange(1, 10.23)">
-                10.23
-              </va-button>
-            </div>
-          </div>
-        </div>
-
-        <div class="row" v-if="patternModeSelect==1">
-          <div class="flex sm12 xl12 md12 xs12">
-            <div class="flex row align--center">
-              <va-button slot="append" class="mr-2 pa-1 shrink" small @click="timeRangeChange(2, 0)">
-                0
-              </va-button>
-              <va-input
-                @keyup.enter="timeRangeChange(2, t2RangeInput)"
-                v-model="t2RangeInput"
-                class="mb-0"
-                :label="'T2 RANGE'"
-              >
-                <p slot="append" style="margin-right: 0;" small>
-                  {{unitOptions[unitSelect].label}}
-                </p>
-              </va-input>
-              <va-button slot="append" class="ml-2 pa-1 shrink" small @click="timeRangeChange(2, 10.23)">
-                10.23
-              </va-button>
-            </div>
-          </div>
-        </div>
-
-        <div class="row" v-if="patternModeSelect==1">
-          <div class="flex sm12 xl12 md12 xs12">
-            <div class="flex row align--center">
-              <va-button slot="append" class="mr-2 pa-1 shrink" small @click="timeRangeChange(3, 0)">
-                0
-              </va-button>
-              <va-input
-                @keyup.enter="timeRangeChange(3, t3RangeInput)"
-                v-model="t3RangeInput"
-                class="mb-0"
-                :label="'T3 RANGE'"
-              >
-                <p slot="append" style="margin-right: 0;" small>
-                  {{unitOptions[unitSelect].label}}
-                </p>
-              </va-input>
-              <va-button slot="append" class="ml-2 pa-1 shrink" small @click="timeRangeChange(3, 10.23)">
-                10.23
-              </va-button>
-            </div>
-          </div>
-        </div>
-
-        <div class="row">
-          <div class="flex sm12 xl12 md12 xs12">
-            <div class="flex row align--center">
-              <va-button slot="append" class="mr-2 pa-1 shrink" small @click="timeRangeChange(4, 0)">
-                0
-              </va-button>
-              <va-input
-                @keyup.enter="timeRangeChange(4, t4RangeInput)"
-                v-model="t4RangeInput"
-                class="mb-0"
-                :label="'T4 RANGE'"
-              >
-                <p slot="append" style="margin-right: 0;" small>
-                  {{unitOptions[unitSelect].label}}
-                </p>
-              </va-input>
-              <va-button slot="append" class="ml-2 pa-1 shrink" small @click="timeRangeChange(4, 1310.71)">
-                1310.71
-              </va-button>
-            </div>
-          </div>
-        </div>
-
-      </div>
-
-    </div>
-  </div>
-</template>
-
-<script>
-import { mapActions } from 'vuex'
-import types from '@/store/modules/project/content/types'
-
-export default {
-  name: 'NeuliveParameterStimulation',
-  components: {
-  },
-  data () {
-    return {
-      posChannelList: [2],
-      negChannelList: [1],
-      stimulateElectrodeSelect: null,
-      stimulateElectrodeOptions: [
-        {
-          label: 'Monopolar',
-          value: 0,
-        },
-        {
-          label: 'Bipolar',
-          value: 1,
-        },
-      ],
-      cycleNumberSelect: null,
-      cycleNumberOptions: [
-        {
-          label: 'limite',
-          value: 0,
-        },
-        {
-          label: 'Unlimite',
-          value: 1,
-        },
-      ],
-      cycleNumberInput: '1',
-      cycleNumber: 1,
-      cycleNumberArray: Array(9).fill(1),
-      amplitudeNumberInput: '50',
-      amplitudeNumber: 50,
-      patternModeSelect: null,
-      patternModeOptions: [
-        {
-          label: 'Monophasic',
-          value: 0,
-        },
-        {
-          label: 'Biphasic',
-          value: 1,
-        },
-      ],
-      unitSelect: 1,
-      unitOptions: [
-        {
-          label: 's',
-          value: 0,
-        },
-        {
-          label: 'ms',
-          value: 1,
-        },
-        {
-          label: 'us',
-          value: 2,
-        },
-      ],
-      unitMultiply: 1000,
-      // period = (t1 + t2 + t3 + t4) * 10
-      frequencyNumberInput: '0',
-      frequencyNumber: 0,
-      periodNumberInput: '0',
-      periodNumber: 0,
-      t1RangeInput: '0',
-      t1Range: 0,
-      t1RangeArray: Array(9).fill(0),
-      t2RangeInput: '0',
-      t2Range: 0,
-      t2RangeArray: Array(9).fill(0),
-      t3RangeInput: '0',
-      t3Range: 0,
-      t3RangeArray: Array(9).fill(0),
-      t4RangeInput: '0',
-      t4Range: 0,
-      t4RangeArray: Array(9).fill(0),
-
-      tmpParam: {},
-    }
-  },
-  computed: {
-  },
-  mqtt: {
-  },
-  methods: {
-    ...mapActions('projectContent', [types.params.updateTmp]),
-
-    refresh () {
-      console.log('[TODO] stimulation refresh')
-    },
-    init () {
-      this.tmpParam = { paramsSet: { stimulation: { STI_H_BRIDGE: 1, CONTINUOUS_STI: 1, STI_CYCLE_LIST: '0:9=' + this.cycleNumberArray.toString(), STI_AMPLITUDE: 0, STI_PATTERN: 1, STI_CHANNEL: 0, STI_POLARITY: 0, STI_T1: '0:9=' + String(this.t1RangeArray), STI_T2: '0:9=' + String(this.t2RangeArray), STI_T3: '0:9=' + String(this.t3RangeArray), STI_T4: '0:9=' + String(this.t4RangeArray) } } }
-    },
-    reset () {
-      this.tmpParam = { paramsSet: { stimulation: {} } }
-    },
-    transUnit () {
-      if (this.unitSelect === 0) {
-        this.unitMultiply = 1000000
-      } else if (this.unitSelect === 1) {
-        this.unitMultiply = 1000
-      } else {
-        this.unitMultiply = 1
-      }
-      this.refresh()
-    },
-    async stimulateElectrodeSelectChange () {
-      if (this.stimulateElectrodeSelect == null) {
-        return false
-      }
-      this.updateTmp('STI_H_BRIDGE', this.stimulateElectrodeSelect)
-      await this.updateTmpParam(this.tmpParam)
-    },
-    channelClick (val) {
-      if (this.posChannelList.indexOf(val) >= 0) {
-        this.posChannelList.splice(this.posChannelList.indexOf(val), 1)
-        this.negChannelList.push(val)
-      } else if (this.negChannelList.indexOf(val) >= 0) {
-        this.negChannelList.splice(this.negChannelList.indexOf(val), 1)
-      } else {
-        this.posChannelList.push(val)
-      }
-      this.updateStiChannel()
-    },
-    async cycleNumberSelectChange () {
-      if (this.cycleNumberSelect == null) {
-        return false
-      }
-      this.updateTmp('CONTINUOUS_STI', this.cycleNumberSelect)
-      await this.updateTmpParam(this.tmpParam)
-    },
-    async cycleNumberChange (val) {
-      if (isNaN(val) || parseInt(val) > 256 || parseInt(val) < 1) {
-        this.cycleNumberInput = '1'
-        this.cycleNumber = 1
-      }
-      this.cycleNumberInput = String(val)
-      this.cycleNumber = parseInt(val)
-
-      if (this.cycleNumberArray[0] !== this.cycleNumber) {
-        this.cycleNumberArray.fill(this.cycleNumber, 0)
-        this.updateTmp('STI_CYCLE_LIST', '0:9=' + this.cycleNumberArray.toString())
-        await this.updateTmpParam(this.tmpParam)
-      }
-    },
-    async amplitudeNumberChange (val) {
-      if (this.amplitudeNumber == null) {
-        return false
-      }
-      if (typeof (val) === 'string') {
-        if (isNaN(val) || parseInt(val) > 4000 || parseInt(val) < 5) {
-          this.amplitudeNumberInput = '50'
-          this.amplitudeNumber = 50
-        }
-        if (parseInt(this.amplitudeNumberInput) !== parseInt(this.amplitudeNumber)) {
-          this.amplitudeNumber = parseInt(val)
-        }
-      } else {
-        if (isNaN(val) || parseInt(val) > 4000 || parseInt(val) < 5) {
-          this.amplitudeNumberInput = '50'
-          this.samplitudeNumber = 50
-        }
-        if (parseInt(this.amplitudeNumberInput) !== parseInt(this.amplitudeNumber) || this.amplitudeNumber !== val) {
-          this.amplitudeNumberInput = String(val)
-          this.amplitudeNumber = val
-        }
-      }
-
-      this.updateTmp('STI_AMPLITUDE', parseInt(this.amplitudeNumber / 5))
-      await this.updateTmpParam(this.tmpParam)
-    },
-    async patternModeSelectChange () {
-      if (this.patternModeSelect == null) {
-        return false
-      }
-      if (this.patternModeSelect === 0) {
-        this.t2Range = 0
-        this.t2RangeInput = '0'
-        this.t3Range = 0
-        this.t3RangeInput = '0'
-        this.t4Range = (this.periodNumber / 10) - this.t1Range
-        this.t4RangeInput = String((this.t4Range * 10) / this.unitMultiply)
-      } else {
-        this.t3Range = this.t1Range
-        this.t3RangeInput = this.t1RangeInput
-        this.t4Range = (this.periodNumber / 10) - this.t1Range - this.t2Range - this.t3Range
-        this.t4RangeInput = String((this.t4Range * 10) / this.unitMultiply)
-      }
-
-      this.updateTmp('STI_PATTERN', this.patternModeSelect)
-      await this.updateTmpParam(this.tmpParam)
-    },
-    frequencyNumberChange (val) {
-      if (this.frequencyNumberInput == null) {
-        return false
-      }
-      if (typeof (val) === 'string') {
-        if (isNaN(val) || parseInt(val) < 1 || parseInt(val) > 10000) {
-          this.frequencyNumberInput = '100'
-          this.frequencyNumber = 100
-        }
-        if (parseInt(this.frequencyNumberInput) !== parseInt(this.frequencyNumber)) {
-          this.frequencyNumber = parseInt(val)
-        }
-      }
-      this.periodNumber = (1 / this.frequencyNumber * 1e6).toFixed(3)
-      this.periodNumberInput = String(this.periodNumber / this.unitMultiply)
-
-      if (this.t1Range === 0 || this.t3Range === 0) {
-        this.t1Range = 10
-        this.t1RangeInput = String((this.t1Range * 10) / this.unitMultiply)
-        this.t3Range = 10
-        this.t3RangeInput = String((this.t3Range * 10) / this.unitMultiply)
-        this.t4Range = (this.periodNumber / 10) - (this.t1Range + this.t2Range + this.t3Range)
-        this.t4RangeInput = String((this.t4Range * 10) / this.unitMultiply)
-      } else {
-        this.t4Range = (this.periodNumber / 10) - (this.t1Range + this.t2Range + this.t3Range)
-        this.t4RangeInput = String((this.t4Range * 10) / this.unitMultiply)
-      }
-
-      this.updateTimeRange()
-    },
-    periodNumberChange (val) {
-      if (this.periodNumberInput === null) {
-        return false
-      }
-      if (typeof (val) === 'string') {
-        if (isNaN(val) || parseFloat(val) < 0 || parseFloat(val / this.unitMultiply) > 1) {
-          this.periodNumber = 1000
-          this.periodNumberInput = String(this.periodNumber / this.unitMultiply)
-        }
-        if (parseInt(this.periodNumberInput) !== parseInt(this.periodNumber)) {
-          this.periodNumber = parseFloat(val * this.unitMultiply)
-          this.periodNumberInput = val
-        }
-      }
-      this.frequencyNumber = parseInt(1 / (this.periodNumber * 1e-6))
-      this.frequencyNumberInput = String(this.frequencyNumber)
-
-      if (this.t1Range === 0 || this.t3Range === 0) {
-        this.t1Range = 10
-        this.t1RangeInput = String((this.t1Range * 10) / this.unitMultiply)
-        this.t3Range = 10
-        this.t3RangeInput = String((this.t3Range * 10) / this.unitMultiply)
-        this.t4Range = (this.periodNumber / 10) - (this.t1Range + this.t2Range + this.t3Range)
-        this.t4RangeInput = String((this.t4Range * 10) / this.unitMultiply)
-      } else {
-        this.t4Range = (this.periodNumber / 10) - (this.t1Range + this.t2Range + this.t3Range)
-        this.t4RangeInput = String((this.t4Range * 10) / this.unitMultiply)
-      }
-
-      this.updateTimeRange()
-    },
-    timeRangeChange (stiIimeSelect, val) {
-      switch (stiIimeSelect) {
-        case 1:
-          this.t1Range = parseInt((val * this.unitMultiply) / 10)
-          this.t1RangeInput = val
-          this.t3Range = parseInt((val * this.unitMultiply) / 10)
-          this.t3RangeInput = val
-          break
-        case 2:
-          this.t2Range = parseInt((val * this.unitMultiply) / 10)
-          this.t2RangeInput = val
-          break
-        case 3:
-          this.t1Range = parseInt((val * this.unitMultiply) / 10)
-          this.t1RangeInput = val
-          this.t3Range = parseInt((val * this.unitMultiply) / 10)
-          this.t3RangeInput = val
-          break
-        case 4:
-          this.t4Range = parseInt((val * this.unitMultiply) / 10)
-          this.t4RangeInput = val
-          if (this.frequencyNumber > 0) {
-            this.t2Range = (this.periodNumber / 10) - this.t1Range - this.t3Range - this.t4Range
-            this.t2RangeInput = String((this.t2Range * 10) / this.unitMultiply)
-          }
-          break
-      }
-      if (this.frequencyNumber > 0 && stiIimeSelect !== 4) {
-        this.t4Range = (this.periodNumber / 10) - this.t1Range - this.t2Range - this.t3Range
-        this.t4RangeInput = String((this.t4Range * 10) / this.unitMultiply)
-      }
-
-      this.updateTimeRange()
-    },
-    async updateStiChannel () {
-      // stiChannelSet (+,-), stiPolaritySet (+)
-      let stiChannelSet = ''
-      let stiPolaritySet = ''
-
-      for (let i = 8; i >= 1; i--) {
-        if (this.posChannelList.indexOf(i) >= 0) {
-          stiChannelSet += '1'
-          stiPolaritySet += '1'
-        } else if (this.negChannelList.indexOf(i) >= 0) {
-          stiChannelSet += '1'
-          stiPolaritySet += '0'
-        } else {
-          stiChannelSet += '0'
-          stiPolaritySet += '0'
-        }
-      }
-      const stiChannelValue = parseInt(stiChannelSet, 2)
-      const stiPolarityValue = parseInt(stiPolaritySet, 2)
-
-      this.updateTmp('STI_CHANNEL', stiChannelValue)
-      this.updateTmp('STI_POLARITY', stiPolarityValue)
-      await this.updateTmpParam(this.tmpParam)
-    },
-
-    async updateTimeRange () {
-      if (this.t1RangeArray[0] !== this.t1Range) {
-        this.t1RangeArray.fill(this.t1Range, 0)
-        this.updateTmp('STI_T1', '0:9=' + String(this.t1RangeArray))
-        await this.updateTmpParam(this.tmpParam)
-      }
-      if (this.t2RangeArray[0] !== this.t2Range) {
-        this.t2RangeArray.fill(this.t2Range, 0)
-        this.updateTmp('STI_T2', '0:9=' + String(this.t2RangeArray))
-        await this.updateTmpParam(this.tmpParam)
-      }
-      if (this.t3RangeArray[0] !== this.t3Range) {
-        this.t3RangeArray.fill(this.t3Range, 0)
-        this.updateTmp('STI_T3', '0:9=' + String(this.t3RangeArray))
-        await this.updateTmpParam(this.tmpParam)
-      }
-      if (this.t4RangeArray[0] !== this.t4Range) {
-        this.t4RangeArray.fill(this.t4Range, 0)
-        this.updateTmp('STI_T4', '0:9=' + String(this.t4RangeArray))
-        await this.updateTmpParam(this.tmpParam)
-      }
-    },
-
-    updateTmp (key, value) {
-      this.tmpParam.paramsSet.stimulation[key] = value
-    },
-
-    pageToast: function (mes) {
-      this.showToast(
-        mes,
-        {
-          icon: 'fa-bell',
-          position: 'bottom-right',
-          duration: 4000,
-        },
-      )
-    },
-  },
-  async created () {
-    this.init()
-    await this.updateTmpParam(this.tmpParam)
-  },
-  async destroyed () {
-    this.reset()
-  },
-  watch: {
-  },
-}
-</script>

src/components/project/items/NeuliveParameterWindow.vue

@@ -1,119 +0,0 @@
-<template>
-  <div class="flex">
-    <va-modal
-      v-model="showModal"
-      size="small"
-      :title=" $t('Set parameters')"
-      :okText=" $t('modal.confirm') "
-      :cancelText=" $t('modal.cancel') "
-      @ok="AddParams"
-      @cancel="Cancel"
-    >
-      <va-input
-        @input="paramAliasChange(paramAlias)"
-        v-model="paramAlias"
-        :label="$t('Parameter set name')"
-        required
-      />
-      <va-item>
-        <va-item-section side>
-          <va-checkbox v-model="recordingCheck" />
-        </va-item-section>
-        <va-item-section>
-          <va-item-label>
-            Recording
-          </va-item-label>
-        </va-item-section>
-      </va-item>
-      <va-item>
-        <va-item-section side>
-          <va-checkbox v-model="stimulationCheck" />
-        </va-item-section>
-        <va-item-section>
-          <va-item-label>
-            Stimulation
-          </va-item-label>
-        </va-item-section>
-      </va-item>
-
-      <neulive-parameter-recording v-if="recordingCheck"/>
-      <br/>
-      <neulive-parameter-stimulation v-if="stimulationCheck"/>
-    </va-modal>
-  </div>
-</template>
-
-<script>
-import { mapActions, mapGetters } from 'vuex'
-import types from '@/store/modules/project/content/types'
-import NeuliveParameterRecording from './NeuliveParameterRecording'
-import NeuliveParameterStimulation from './NeuliveParameterStimulation'
-import { getUniqueID } from '@/data/tool'
-
-export default {
-  name: 'NeuliveParameterWindow',
-  components: {
-    NeuliveParameterRecording,
-    NeuliveParameterStimulation,
-  },
-  computed: {
-    ...mapGetters('projectContent', {
-      tmpParam: types.params.getTmp,
-    }),
-  },
-  data () {
-    return {
-      paramAlias: '',
-      showModal: false,
-      recordingCheck: false,
-      stimulationCheck: false,
-    }
-  },
-  mqtt: {
-  },
-  methods: {
-    ...mapActions('projectContent', [types.params.add, types.params.delete, types.params.resetTmp, types.params.deleteTmp, types.params.updateTmp]),
-
-    async paramAliasChange () {
-      await this.updateTmpParam({ paramsSet: { alias: this.paramAlias, desc: '' } })
-    },
-
-    async AddParams () {
-      if (typeof this.tmpParam !== 'undefined') {
-        if (typeof this.tmpParam.recording !== 'undefined' || typeof this.tmpParam.stimulation !== 'undefined') {
-          if (typeof this.tmpParam.alias === 'undefined') {
-            await this.updateTmpParam({ paramsSet: { alias: getUniqueID() } })
-          }
-          await this.updateTmpParam({ paramsSet: { id: getUniqueID() } })
-          if (!this.recordingCheck) {
-            await this.deleteTmpParam({ key: 'recording' })
-          }
-          if (!this.stimulationCheck) {
-            await this.deleteTmpParam({ key: 'stimulation' })
-          }
-          await this.addParam({ id: getUniqueID(), paramsSet: this.tmpParam })
-          await this.resetTmpParam()
-          this.reset()
-        }
-      }
-      this.$emit('updateParentView')
-    },
-    async Cancel () {
-      await this.resetTmpParam()
-      this.reset()
-    },
-    reset () {
-      this.paramAlias = ''
-      this.recordingCheck = false
-      this.stimulationCheck = false
-    },
-    printTmpParam: function () {
-      console.log(this.tmpParam)
-    },
-  },
-  mounted () {
-  },
-  destroyed () {
-  },
-}
-</script>

src/components/project/items/Task.vue

@@ -1,215 +0,0 @@
-<template>
-  <div id="Task">
-    <h3> {{ 'Task: '.concat(String(taskNum)) }} </h3>
-    <br/>
-    <p> {{ 'Time settings' }} </p>
-    <div slot="body">
-      <va-input
-        v-model="maxCycle"
-        :label="$t('Max cycle')"
-        :readonly="TimeSettingDone"
-      />
-      Start time
-      <va-checkbox v-model="startImmediatelyCheck" :label="'Right Now'"/>
-      <VueCtkDateTimePicker v-model="startTimeStringFormat" v-show="!startImmediatelyCheck" :no-button-now=true label='Pick date and time' :disabled="TimeSettingDone" :format="'YYYY-MM-DDTHH:mm:ss'"/>
-      <br/>
-      <va-input
-        v-model="duration"
-        :label="$t('Duration')"
-        :readonly="TimeSettingDone"
-      />
-      <va-button @click="SetTaskInit"> Next </va-button>
-    </div>
-
-    <div v-if="TimeSettingDone">
-      Connected Devices
-      <va-button v-for="(deviceID, index) in availableDeviceIDs" :key="index" @click="toggleMappingModal(index)">
-        <!-- {{ getDeviceByID(deviceID).device_name }} -->
-        {{ 'Neulive' }}
-        <device-and-condition-mapping :ref="'condition_mapping'" :taskID="taskID" :deviceID="deviceID" :deviceName="getDeviceByID(deviceID).device_name"/>
-      </va-button>
-    </div>
-
-    <div v-if="TimeSettingDone">
-      Condition settings
-      <va-button id='conditionSetting' @click="toggleConditionModal(tmpConditionID, -1)">
-        +
-        <condition-window :ref="'new_condition'" :conditionID="tmpConditionID" @updateParentView="updateView"/>
-      </va-button>
-      <br/>
-      <va-button v-for="(value, key, index) in allConditions" :key="key" @click="toggleConditionModal(key, index)">
-        {{ value.alias }}
-        <condition-window :ref="'exist_condition'" :conditionID="key" :conditionName="value.alias"/>
-      </va-button>
-    </div>
-
-    <div v-if="TimeSettingDone">
-      Parameters settings
-      <va-button id='paramSetting' @click="toggleParamModal()">
-        +
-        <neulive-parameter-window :ref="'parameter_window'" @updateParentView="updateView"/>
-      </va-button>
-    </div>
-
-    <div
-      v-for="(param, key) in allParams"
-      :key="key"
-    >
-      <va-list-label :key="key"> {{ processed_param(param) }} </va-list-label>
-      <!-- <va-icon
-        name="ion ion-md-close"
-        color="info"
-        class="ml-2 pa-1 shrink"
-        style="cursor: pointer;"
-        @click.native="removeParamButton(key)"
-      /> -->
-    </div>
-  </div>
-</template>
-
-<script>
-import { mapActions, mapGetters } from 'vuex'
-import types from '@/store/modules/project/content/types'
-import NeuliveParameterWindow from './NeuliveParameterWindow'
-import ConditionWindow from './ConditionWindow'
-import DeviceAndConditionMapping from './DeviceAndConditionMapping'
-import { getUniqueID } from '@/data/tool'
-import VueCtkDateTimePicker from 'vue-ctk-date-time-picker'
-import 'vue-ctk-date-time-picker/dist/vue-ctk-date-time-picker.css'
-
-export default {
-  name: 'Task',
-  components: {
-    NeuliveParameterWindow,
-    DeviceAndConditionMapping,
-    ConditionWindow,
-    VueCtkDateTimePicker,
-  },
-  computed: {
-    ...mapGetters('projectContent', {
-      allTasks: types.tasks.getAll,
-    }),
-    ...mapGetters('projectContent', {
-      availableDeviceIDs: types.devices.getAllAvaliable,
-      getDeviceByID: types.devices.getByID,
-      allConditions: types.devices.getAllConditions,
-    }),
-    ...mapGetters('projectContent', {
-      allParams: types.params.getAll,
-      tmpParam: types.params.getTmp,
-    }),
-  },
-  props: {
-    taskID: {
-      type: String,
-      required: true,
-    },
-    taskNum: {
-      type: Number,
-    },
-  },
-  async created () {
-  },
-  data () {
-    return {
-      maxCycle: 1,
-      startTimeStringFormat: '',
-      startTime: 0,
-      startImmediatelyCheck: false,
-      duration: '',
-      TimeSettingDone: false,
-      showParamModal: false,
-      tmpConditionID: null,
-    }
-  },
-  methods: {
-    ...mapActions('projectContent', [types.tasks.update, types.tasks.setInfo]),
-    ...mapActions('projectContent', [types.devices.add]),
-    ...mapActions('projectContent', [types.params.add, types.params.delete, types.params.resetTmp, types.params.deleteTmp, types.params.updateTmp]),
-
-    toggleMappingModal (index) {
-      this.$refs.condition_mapping[index].showModal = true
-    },
-    toggleConditionModal (key, index) {
-      if (index === -1) {
-        this.tmpConditionID = getUniqueID()
-        this.$refs.new_condition.showModal = true
-        this.$refs.new_condition.isTmp = true
-      } else {
-        var oldConditions = []
-        for (const [_key, _value] of Object.entries(this.allConditions[key])) {
-          if (_key !== 'alias') {
-            var condition = Object.assign({}, _value)
-            condition.id = _key
-            oldConditions.push(condition)
-          }
-        }
-        this.$refs.exist_condition[index].conditions = oldConditions
-        this.$refs.exist_condition[index].showModal = true
-      }
-    },
-    toggleParamModal () {
-      this.$refs.parameter_window.showModal = true
-    },
-    pageToast: function (mes) {
-      this.showToast(
-        mes,
-        {
-          icon: 'fa-bell',
-          position: 'bottom-right',
-          duration: 4000,
-        },
-      )
-    },
-    async SetDuration () {
-      const dateTime = new Date(this.startTimeStringFormat).getTime()
-      this.startTime = Math.floor(dateTime / 1000)
-      if (this.isNumeric(this.startTime) && this.isNumeric(this.duration) && (this.duration > 0)) {
-        this.TimeSettingDone = true
-        var conditionID = getUniqueID()
-        var randomID = getUniqueID()
-        if (this.startImmediatelyCheck) {
-          this.startTime = 0
-        }
-        await this.setInfoTask({ taskID: this.taskID, infos: { conditions: { [conditionID]: { time: { absolute: { equal: this.startTime } } } }, actions: { [randomID]: { desc: 'task status running', condition: [conditionID], content: { '-1': 'start' } } } } })
-        conditionID = getUniqueID()
-        randomID = getUniqueID()
-        await this.setInfoTask({ taskID: this.taskID, infos: { conditions: { [conditionID]: { time: { relative: { equal: this.duration } } } }, actions: { [randomID]: { desc: 'task status done add cycle', condition: [conditionID], content: { '-1': 'done' } } } } })
-      } else {
-        this.pageToast('Please set start and end time correctly')
-      }
-    },
-    async SetTaskInit () {
-      await this.setInfoTask({ taskID: this.taskID, infos: { max_cycle: this.maxCycle } })
-      await this.SetDuration()
-      console.log(this.allTasks)
-    },
-    async removeParamButton (key) {
-      if (Object.keys(this.allParams).length > 1) {
-        await this.deleteParam({ id: key })
-        // this.$forceUpdate()
-      } else {
-        this.pageToast('[Notice] need to have at least one param setting')
-      }
-    },
-    updateView () {
-      this.$forceUpdate()
-    },
-    processed_param (param) {
-      const _param = param.paramsSet.alias.concat(': ', JSON.stringify(param.paramsSet))
-      return _param
-    },
-    isNumeric: function (n) {
-      return !isNaN(parseFloat(n)) && isFinite(n)
-    },
-  },
-  async mounted () {
-  },
-  destroyed () {
-  },
-
-}
-</script>
-
-<style lang="scss">
-</style>

src/components/project/projectContent.vue

@@ -1,101 +0,0 @@
-<template>
-  <div id="ProjectContent">
-    <div class="tasks">
-      <va-button class="" color="primary" target="_blank" @click="AddTask()" small>
-        ADD TASK
-      </va-button>
-      <va-card stripe='info' :title="$t('AllTasks')" class='flex md12 xl4 xs12 sm12'>
-        <task v-for="(task, key, index) in allTasks" :key="key" :taskID="key" :taskNum="index+1"/>
-      </va-card>
-    </div>
-    <va-button @click="generateJson"> Generate Json </va-button>
-  </div>
-</template>
-
-<script>
-import Task from './items/Task.vue'
-import { mapActions, mapGetters } from 'vuex'
-import types from '@/store/modules/project/content/types'
-import { getUniqueID, getDefaultInstruction } from '@/data/tool'
-
-export default {
-  name: 'ProjectContent',
-  components: {
-    Task,
-  },
-  computed: {
-    ...mapGetters('projectContent', {
-      allTasks: types.tasks.getAll,
-    }),
-    ...mapGetters('projectContent', {
-      allDevices: types.devices.getAll,
-      availableDeviceIDs: types.devices.getAllAvaliable,
-    }),
-    ...mapGetters('projectContent', {
-      allParams: types.params.getAll,
-    }),
-  },
-  async created () {
-    await this.initAll()
-  },
-  data () {
-    return {
-      devices: [],
-    }
-  },
-  methods: {
-    ...mapActions('projectContent', [types.tasks.init, types.tasks.add]),
-    ...mapActions('projectContent', [types.devices.init]),
-    ...mapActions('projectContent', [types.params.init]),
-
-    async initAll () {
-      await this.initTask({ id: getUniqueID(), desc: 'task description', instructions: getDefaultInstruction() })
-      await this.initDevice({ availableDevice: ['4'], deviceInfo: { 4: { battery: 0, device_name: '', device_address: [], device_version: '', library_name: '', library_version: '', serial_number: [], status: '', isSync: false, isStimulatemulate: false, parent: '' } } })
-      await this.initParam({ id: getUniqueID(), paramsSet: { alias: 'default', desc: '', recording: { ADC_CLOCK: 200, AMP_GAIN: 0, RECORDING_CH: 0 } } })
-    },
-    async AddTask () {
-      await this.initAll()
-      this.$forceUpdate()
-    },
-
-    generateJson () {
-      var _json = { project: { desc: 'project description', available_device: this.availableDeviceIDs, tasks: {} } }
-      for (const [taskID, task] of Object.entries(this.allTasks)) {
-        _json.project.tasks[taskID] = { desc: task.desc, devices: {}, events: {}, triggers: {}, parameter_sets: {}, instructions: {}, actions: {}, conditions: {} }
-        _json.project.tasks[taskID].start = 'timestamp'
-        _json.project.tasks[taskID].status = 'prepare'
-        _json.project.tasks[taskID].max_cycle = 1
-        _json.project.tasks[taskID].cycle = 0
-        _json.project.tasks[taskID].devices = this.allDevices
-        for (const [paramID, param] of Object.entries(this.allParams)) {
-          _json.project.tasks[taskID].parameter_sets[paramID] = param.paramsSet
-        }
-        _json.project.tasks[taskID].instructions = task.instructions
-        _json.project.tasks[taskID].actions = task.actions
-        _json.project.tasks[taskID].conditions = task.conditions
-      }
-      console.log(_json)
-    },
-    pageToast: function (mes) {
-      this.showToast(
-        mes,
-        {
-          icon: 'fa-bell',
-          position: 'bottom-right',
-          duration: 4000,
-        },
-      )
-    },
-  },
-  watch: {
-  },
-  async mounted () {
-  },
-  destroyed () {
-  },
-
-}
-</script>
-
-<style lang="scss">
-</style>

src/components/setting/controllerInfo.vue

@@ -0,0 +1,140 @@
+<template>
+  <div class="controller-info">
+    <div class="row flex">
+      <div
+        class="flex sm12 xl12 md12 xs12 ma-2"
+        v-for="controller in controllers" :key="controller.mac_address"
+      >
+        <va-card
+          style="border: 5px solid #78ceff; border-radius: 30px; font-size: 1.5rem;"
+        >
+          <!-- {{ controller }} -->
+          <va-item :key="controller.device_mac" class="pa-0 ma-0"
+          >
+            <va-item-section avatar class="ml-4 mr-4">
+              <img
+                :src="getImageUrl()"
+                :alt="'BPS-CONTROLLER'"
+                width="200px"
+                height="200px"
+                contain
+              />
+            </va-item-section>
+            <va-item-section class="ml-5 mr-4" >
+              <va-item-label style="font-size: 2rem;">
+                {{ controller.wifi_name }}
+              </va-item-label>
+              <va-item-label>
+                Mac Address :
+                {{ controller.mac_address.toUpperCase() }}
+              </va-item-label>
+              <va-item-label>
+                Build Version : #
+                {{ controller.software_version }}
+              </va-item-label>
+              <va-item-label>
+                Update Time :
+                {{ GLOBAL.dateToStr(controller.updated_at) }}
+              </va-item-label>
+            </va-item-section>
+          </va-item>
+        </va-card>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { mapActions, mapGetters, mapMutations } from 'vuex'
+import api from '@/data/api/index'
+import types from '@/store/modules/setting/types'
+import controllerImgUrl from '@/assets/img/controller.png'
+
+export default {
+  name: 'controller-info',
+  components: {
+  },
+  // props: {
+  //   data: {
+  //     type: Object,
+  //     default: function () {
+  //       return {}
+  //     },
+  //   },
+  //   cardclass: {
+  //     type: Array,
+  //     default: function () {
+  //       return ['xs12', 'md12', 'xl12', 'sm12']
+  //     },
+  //   },
+  //   cardheight: {
+  //     type: String,
+  //     default: '82vh',
+  //   },
+  //   cardwidth: {
+  //     type: String,
+  //     default: 'auto',
+  //   },
+  // },
+  created () {
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+    controllers () {
+      return this.getAllController()
+    },
+  },
+  watch: {
+  },
+  methods: {
+    getImageUrl () {
+      return controllerImgUrl
+    },
+    ...mapActions('setting', [types.controller.init]),
+    ...mapMutations('setting', [types.controller.set, types.controller.updateByIndex]),
+    ...mapGetters('setting', [types.controller.getAll]),
+  },
+  async mounted () {
+    this.initController({ api: api })
+    console.log(this.getAllController())
+  },
+  destroyed () {
+  },
+}
+
+</script>
+<style lang="scss">
+  .area-style-setting-controller {
+    height: auto;
+    overflow-y: hidden;
+    overflow-x: hidden;
+
+    @include media-breakpoint-only(xl) {
+      overflow-y: scroll;
+      overflow-x: hidden;
+    }
+  }
+
+  .drag-flex {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+
+  .font-small {
+    color: rgb(113, 186, 255);
+    font-size: 16px;
+  }
+
+  .center-medium {
+    text-align: center;
+    font-size: 20px;
+  }
+
+  .center-large {
+    text-align: center;
+    font-size: 28px;
+  }
+</style>

src/components/setting/deviceInfo.vue

@@ -0,0 +1,178 @@
+<template>
+  <div class="device-info">
+    <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" > -->
+        <div
+          class="flex d-flex sm12 xl3 md6 xs12 ma-0"
+          v-for="(device, index) in devicesList" :key="device.id"
+        >
+          <va-card
+            :noPadding="true"
+            style="border: 5px solid #78ceff; border-radius: 30px;"
+          >
+            <div class="center-large" >
+              <div class="flex d-flex sm12 xl12 md12 xs12 ">
+                <div class="sm11 xl11 md11 xs11 ml-2" style="text-align: start;">
+                  {{ device.name }}
+                </div>
+                <div class="sm1 xl1 md1 xs1" style="text-align: right;">
+                  <va-icon
+                    name="ion ion-md-close"
+                    class="mr-1"
+                    color="#babfc2"
+                    style="cursor: pointer;"
+                    @click.native.stop="remove(index, device)"
+                  />
+                </div>
+              </div>
+            </div>
+            <div class="center-medium">
+              <p> {{ device.name }} </p>
+            </div>
+            <div class="center-medium">
+              <p> {{ device.mac_address }} </p>
+            </div>
+            <div class="mt-4 mb-4" style="text-align: center;">
+              <img
+                :src="getImageUrl(device.library)"
+                :alt="device.name"
+                width="150px"
+                height="100px"
+                contain
+              />
+            </div>
+            <div class="center-medium">
+              <p> {{ device.device_version }} </p>
+              <p> {{ timeStampToLocaleTime(device.updated_at) }} </p>
+            </div>
+            <div class="flex sm12 xl12 md12 xs12" style="text-align: center;">
+              <va-button v-if="device.auto_connect" color="success" @click="autoConnect(index, device)">Auto Connect</va-button>
+              <va-button v-if="!device.auto_connect" color="#babfc2" @click="autoConnect(index, device)" outline>Auto Connect</va-button>
+              <va-button @click="openGuide(device.library)">User Guide</va-button>
+            </div>
+          </va-card>
+        </div>
+      </div>
+      <!-- </draggable> -->
+    </div>
+  </div>
+</template>
+<script>
+import { mapActions, mapGetters, mapMutations } from 'vuex'
+import { mapFields } from 'vuex-map-fields'
+import api from '@/data/api/index'
+import types from '@/store/modules/setting/types'
+import neuliveImgUrl from '@/assets/img/neulive_img.png'
+import eliteImgUrl from '@/assets/img/elite_img_v2.png'
+// import draggable from 'vuedraggable'
+
+export default {
+  name: 'device-info',
+  components: {
+  },
+  created () {
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+    ...mapFields('setting', [
+      'devicesList',
+    ]),
+    devices: {
+      get () {
+        return this.getAllDevice()
+      },
+      set (deviceList) {
+        this.reorderDevice({ deviceList: deviceList, api: api })
+      },
+    },
+  },
+  watch: {
+  },
+  methods: {
+    macArrayToString: function (macAddress) {
+      return this.GLOBAL.transMac(JSON.parse(macAddress))
+    },
+    timeStampToLocaleTime: function (time) {
+      return this.GLOBAL.dateToStr(time)
+    },
+    getImageUrl: function (libraryName) {
+      if (libraryName !== null) {
+        if (libraryName.indexOf('Neulive') >= 0) {
+          return neuliveImgUrl
+        } else if (libraryName.indexOf('Elite') >= 0) {
+          return eliteImgUrl
+        }
+      }
+      return null
+    },
+    autoConnect: async function (index, device) {
+      device.auto_connect = !device.auto_connect
+      await api.device.update(device.id, { auto_connect: device.auto_connect })
+    },
+    remove (index, device) {
+      console.log('removeDevcie', index, device)
+      this.removeDevice({ id: device.id, index: index, api: api })
+    },
+    openGuide: async function (library) {
+      if (library.indexOf('3.1') !== -1) {
+        window.open('http://' + location.href.split('/')[2] + '/NeuLive31_quickstart_patents.pdf')
+      }
+    },
+    ...mapActions('setting', [types.device.init, types.device.remove, types.device.reorder]),
+    ...mapMutations('setting', [types.device.set, types.device.updateByIndex]),
+    ...mapGetters('setting', [types.device.getAll]),
+  },
+  async mounted () {
+    const devices = await api.device.getAll()
+    if (devices.status === 200) {
+      this.devicesList = devices.data
+    }
+  },
+  destroyed () {
+  },
+}
+</script>
+<style lang="scss">
+  .area-style-setting-device {
+    height: auto;
+    overflow-y: hidden;
+    overflow-x: hidden;
+
+    @include media-breakpoint-only(xl) {
+      height: auto;
+      overflow-y: scroll;
+      overflow-x: hidden;
+    }
+  }
+
+  .drag-flex {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+
+  .font-small {
+    color: rgb(113, 186, 255);
+    font-size: 16px;
+  }
+
+  .center-medium {
+    text-align: center;
+    font-size: 20px;
+  }
+
+  .center-large {
+    text-align: center;
+    font-size: 28px;
+  }
+
+  .flex-wrap-setting {
+    display: flex;
+    flex-direction: horizontal;
+    flex-wrap: wrap;
+  }
+</style>

src/components/setting/settingContent.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="about">
+    <div class="row">
+      <div class="flex sm12 xl12 md12 xs12">
+        <controller-info/>
+      </div>
+    </div>
+    <div class="row">
+      <div class="flex sm12 xl12 md12 xs12">
+        <device-info/>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import DeviceInfo from './deviceInfo.vue'
+import ControllerInfo from './controllerInfo.vue'
+
+export default {
+  name: 'about-content',
+  components: {
+    ControllerInfo,
+    DeviceInfo,
+  },
+  created () {
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+  },
+  watch: {
+  },
+  methods: {
+  },
+  async mounted () {
+  },
+  destroyed () {
+  },
+}
+
+</script>

src/components/task/content/TaskContent.vue

@@ -21,7 +21,7 @@
     />
 
     <div class="row row-equal">
-      <div v-if="showDeviceSetting" class="flex md12 xl4 xs12 sm12 area-style">
+      <div v-if="showDeviceSetting" class="flex md12 xl4 xs12 sm12">
         <div class="row">
           <div class="flex sm12 xl12 md12 xs12">
             <task-devices :ref="'devices_ref'" @add="addDevice($event)" @remove="removeDevice($event)" @refreshSetting="refreshChartSetting($event)" class="pa-0" />
@@ -33,17 +33,18 @@
 
       </div>
 
-      <div :class="chartAreaClass" class="area-style">
+      <div :class="chartAreaClass">
         <div class="row" >
           <div class="flex sm12 xl12 md12 xs12">
             <div class="flex sm12 xl12 md12 xs12" style="text-align: center;">
               <va-card
+                class="ma-0 pa-0"
                 stripe="primary"
               >
-                <template slot="header">
+                <!-- <template slot="header">
                   <va-icon name="fa fa-gears mr-3" color="primary"/>
                   <h5 class="mt-0 mb-0">CONTROL</h5>
-                </template>
+                </template> -->
                 <va-button class="no-dark-style-va-button" v-if="!showDeviceSetting" color="primary" target="_blank" @click="showDeviceSettingClick()" small>
                   SHOW DEVICES
                 </va-button>
@@ -56,15 +57,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
@@ -95,10 +96,13 @@
 
 <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 api from '@/data/api'
+import { mapFields } from 'vuex-map-fields'
+import { mapActions } from 'vuex'
+import taskTypes from '@/store/modules/task/content/types'
 // import TaskFormula from './formula/TaskFormula'
 
 // TODO change chart data tag format
@@ -108,10 +112,14 @@ export default {
   components: {
     CanvasChart,
     TaskDevices,
-    // TaskFormula,
   },
-  async created () {
-    await taskInfo.updateTaskInfo(this.$route.params.taskID)
+  computed: {
+    ...mapFields('taskContent', [
+      'deviceList',
+      'chartData',
+      'taskContentChartPanelKey',
+      'taskContentChartNumber',
+    ]),
   },
   data () {
     return {
@@ -120,24 +128,23 @@ 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'],
+      getParmDone: false,
     }
   },
   mqtt: {
     async '+/get_device_info_all/+' (data, topic) {
-      await taskInfo.deviceInfo(String.fromCharCode.apply(null, data))
+      await taskInfo.deviceInfo(String.fromCharCode.apply(null, data), this.deviceList)
       this.refreshDevicesWindow()
     },
     async '+/get_device_info/+' (data, topic) {
-      await taskInfo.deviceInfo(String.fromCharCode.apply(null, data))
+      await taskInfo.deviceInfo(String.fromCharCode.apply(null, data), this.deviceList)
       this.refreshDevicesWindow()
+      this.getParmDone = true
+      this.checkStiStatus()
     },
     async '+/device_parameter/+' (data, topic) {
       await taskInfo.deviceParameter(String.fromCharCode.apply(null, data))
@@ -148,27 +155,47 @@ export default {
       this.refreshDevicesWindow()
     },
     async '+/hardware_device/+' (data, topic) {
-      await taskInfo.deviceInfo(String.fromCharCode.apply(null, data))
+      await taskInfo.deviceInfo(String.fromCharCode.apply(null, data), this.deviceList)
       if (this.$refs.devices_ref != null) {
         await this.$refs.devices_ref.loadingDone()
+        await this.taskContentChartInitCustomizedFromCache()
       }
     },
     // listen datastream [ topic: controllerID/data_server/device_data_stream/deviceID/channel ]
     async '+/data_server/device_data_stream/+/+' (data, topic) {
       const topicSplit = topic.split('/')
-      if (!taskInfo.getDeviceInfoByRawID(parseInt(topicSplit[3])).info.isSync) {
-        taskInfo.deviceStart(parseInt(topicSplit[3]))
-        chartData.defaultChartGenerator(taskInfo.getDeviceIDByRaw(parseInt(topicSplit[3])), null, 'device')
+      const deviceID = parseInt(topicSplit[3])
+      const channel = parseInt(topicSplit[4])
+      if (this.getParmDone & !taskInfo.getDeviceInfoByRawID(deviceID).info.isSync) {
+        const result = await this.taskContentChartDefaultChartGenerator({
+          _deviceList: this.deviceList,
+          _itemID: taskInfo.getDeviceIDByRaw(deviceID),
+          _chartID: null,
+          _type: 'device',
+        })
+        if (result) {
+          taskInfo.deviceStart(deviceID, this.deviceList)
+        }
       }
-      dataStreamBuffer.into(String.fromCharCode.apply(null, data), parseInt(topicSplit[3]), (parseInt(topicSplit[4]) + 1))
+      dataStreamBuffer.into(String.fromCharCode.apply(null, data), deviceID, (channel + 1))
     },
     '+/device_save_path/+' (data, topic) {
       taskInfo.deviceSavePath(String.fromCharCode.apply(null, data))
-      console.log(taskInfo.getTaskInfo())
+      //  console.log(taskInfo.getTaskInfo())
     },
     '+/device_save_path_set/+' (data, topic) {
       taskInfo.deviceSavePath(String.fromCharCode.apply(null, data))
-      console.log(taskInfo.getTaskInfo())
+      //  console.log(taskInfo.getTaskInfo())
+    },
+    async '+/device_sd_card_status/+' (data, topic) {
+      const dataDecode = JSON.parse(String.fromCharCode.apply(null, data))
+      for (const device of this.$refs.devices_ref.deviceList) {
+        if (dataDecode.device === taskInfo.getRawDeviceID(device.id)) {
+          device.sdCardStatus = dataDecode.data
+        }
+      }
+      await taskInfo.updateSdCardStatus(String.fromCharCode.apply(null, data))
+      this.refreshDevicesWindow()
     },
     async '+/broadcast' (data, topic) {
       const mes = String.fromCharCode.apply(null, data).split(':')
@@ -185,6 +212,10 @@ export default {
           break
         case 'disconnected':
           taskInfo.deviceDisconnected(mes[1])
+          this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+            header: 'get_device_info/0',
+            device: parseInt(mes[1]),
+          }))
           break
         case 'connected':
           this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
@@ -194,17 +225,28 @@ export default {
           taskInfo.deviceConnected(mes[1])
           break
         case 'shutdown':
-          taskInfo.controllerShutdown()
+          taskInfo.controllerShutdown(this.deviceList)
           this.showShutdownModal = true
           break
         case 'start':
-          taskInfo.deviceStart(parseInt(mes[1]))
+          if (!taskInfo.getDeviceInfoByRawID(parseInt(mes[1])).info.isSync) {
+            taskInfo.deviceStart(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(parseInt(mes[1])), this.deviceList)
+            }
+          }
           break
         case 'stop':
           if (mes[1] === 'all') {
             return false
           }
-          taskInfo.deviceStop(parseInt(mes[1]))
+          taskInfo.deviceStop(parseInt(mes[1]), this.deviceList)
           break
         case 'device_timeout':
           this.pageToast('The device [' + taskInfo.getDeviceIDByRaw(parseInt(mes[1])) + '] is timeout, please check its status or parameters.')
@@ -220,7 +262,7 @@ export default {
         default:
           break
       }
-      console.log(String.fromCharCode.apply(null, data), topic)
+      //  console.log(String.fromCharCode.apply(null, data), topic)
     },
   },
   methods: {
@@ -240,6 +282,7 @@ export default {
       this.mqttSub(id + '/get_device_info/+')
       this.mqttSub(id + '/device_parameter/+')
       this.mqttSub(id + '/device_parameter_value/+')
+      this.mqttSub(id + '/device_sd_card_status/+')
     },
     pageMqttUnSub: function (id) {
       for (const device in taskInfo.getTaskInfo().deviceList) {
@@ -251,16 +294,26 @@ export default {
       this.mqttUnSub(id + '/get_device_info/+')
       this.mqttUnSub(id + '/device_parameter/+')
       this.mqttUnSub(id + '/device_parameter_value/+')
+      this.mqttUnSub(id + '/device_sd_card_status/+')
     },
     pageInit: async function () {
       if (await this.$refs.devices_ref != null) {
         await this.$refs.devices_ref.loadingStart()
       }
+      // let _parameter, _content
+
+      // this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+      //   header: 'device_parameter/0',
+      //   device: 7,
+      //   parameter: 'RECORDING_CH|AXIS_CH',
+      //   content: '7|1',
+      // }))
+      console.log(taskInfo.getTaskInfo().controllerID)
       this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
         header: 'hardware_device/0',
       }))
-      await taskInfo.updateChartInfo()
-      this.chartNumber = taskInfo.getTaskInfo().chartNumber
+
+      this.taskContentChartNumber = Object.keys(this.chartData).length
     },
     pageToast: function (mes) {
       this.showToast(
@@ -274,63 +327,56 @@ 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 () {
+      // console.log(taskInfo.getTaskInfo())
       if (this.$refs.devices_ref != null) {
         this.$refs.devices_ref.refresh()
       }
+      // api.task.update({
+      //   device_config: taskInfo.getTaskInfo().deviceList,
+      // })
     },
-    addChart: async function () {
-      const defaultID = {}
-      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()
-
-      for (const chart in chartData.getAllChartsData()) {
-        chartData.getAllChartsData()[chart].mappingID = defaultID[chart]
-      }
-
+    addChart: async function (isDefault) {
+      this.taskContentChartAdd({
+        chartID: this.taskContentChartNumber,
+        maxDots: 4000,
+        gridLength: 1,
+      })
       if (this.$refs.chart_ref != null) {
         this.$refs.chart_ref.forEach(ref => {
           ref.refreshMappingSelect()
         })
       }
+      this.taskContentChartRefreshPanel()
+      this.taskContentChartNumber++
+
+      if (!isDefault) {
+        await this.taskContentChartSaveToCache()
+      }
       this.pageToast('The chart has been added.')
 
-      return this.chartNumber - 1
-      // chartData.updateGridList(0, 4)
+      return this.taskContentChartNumber - 1
     },
     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) {
@@ -342,21 +388,20 @@ 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]
-          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) {
@@ -365,6 +410,8 @@ export default {
           })
         }
       }
+
+      await this.taskContentChartSaveToCache()
       this.pageToast('The chart has been removed.')
     },
     showDeviceSettingClick: function () {
@@ -377,26 +424,33 @@ export default {
       this.chartAreaClass[3] = 'md12'
       this.chartAreaClass[4] = 'xl12'
     },
-    addDevice: async function (deviceID) {
-      this.mqttSub(taskInfo.getTaskInfo().controllerID + '/data_server/device_data_stream/' + taskInfo.getRawDeviceID(deviceID) + '/+')
-      const chart = await this.addChart()
+    addMappingChart: async function (deviceID) {
+      // if have chart with device ID
+      for (const chart in this.chartData) {
+        if (this.chartData[chart].mappingID === deviceID) {
+          return false
+        }
+      }
+      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()
           })
         }
       })
-      if (taskInfo.getDeviceInfo(deviceID).info.isSync) {
-        chartData.defaultChartGenerator(deviceID, chart, 'device')
-      }
+      return chart
+    },
+    addDevice: async function (deviceID) {
+      this.mqttSub(taskInfo.getTaskInfo().controllerID + '/data_server/device_data_stream/' + taskInfo.getRawDeviceID(deviceID) + '/+')
+      this.addMappingChart(deviceID)
       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)
         }
@@ -404,9 +458,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()
@@ -416,8 +470,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)
         }
@@ -425,7 +479,7 @@ export default {
       this.pageToast('The formula [' + formulaID + '] has been removed.')
     },
     startAllClick: async function () {
-      for (const device of taskInfo.getDeviceListRegister()) {
+      for (const device of this.deviceList) {
         if (this.$refs.devices_ref === undefined) {
           this.startDevice(device)
         } else {
@@ -436,7 +490,12 @@ export default {
       this.pageToast('The all devices have been started')
     },
     startDevice: async function (device) {
-      chartData.defaultChartGenerator(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({
@@ -445,7 +504,7 @@ export default {
             instruction: 'record',
           }))
         } else if (taskInfo.getDeviceInfo(device.id).info.library_name.startsWith('Elite')) {
-          console.log('elite')
+          //  console.log('elite')
           this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
             header: 'device_instruction/0',
             device: taskInfo.getRawDeviceID(device.id),
@@ -456,11 +515,11 @@ export default {
         device.isSync = true
         // this.$emit('refreshSetting')
         // ### show device info
-        console.log(taskInfo.getDeviceInfo(device.id))
+        //  console.log(taskInfo.getDeviceInfo(device.id))
       }
     },
     stopAllClick: function () {
-      for (const device of taskInfo.getDeviceListRegister()) {
+      for (const device of this.deviceList) {
         if (this.$refs.devices_ref === undefined) {
           this.stopDevice(device)
         } else {
@@ -488,24 +547,36 @@ export default {
         device.stopping = true
       }
     },
+    checkStiStatus: function () {
+      this.$refs.devices_ref.checkStiStatus()
+    },
     exit: function () {
       this.$router.push({
         path: '/',
       })
     },
+
+    ...mapActions('taskContent', [
+      taskTypes.chart.initCustomizedFromCache,
+      taskTypes.chart.saveToCache,
+      taskTypes.chart.add,
+      taskTypes.chart.defaultChartGenerator,
+      taskTypes.chart.reset,
+      taskTypes.chart.refreshData,
+      taskTypes.chart.refreshChart,
+      taskTypes.chart.refreshPanel,
+    ]),
   },
   watch: {
   },
   async mounted () {
-    // await taskInfo.updateTaskInfo(this.$route.params.taskID)
-    console.log(taskInfo.getTaskInfo())
+    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)
 
     // const _this = this
@@ -515,8 +586,8 @@ export default {
     // }
   },
   destroyed () {
-    taskInfo.destroyed()
-    for (const chart in chartData.getAllChartsData()) {
+    taskInfo.destroyed(this.deviceList)
+    for (const chart in this.chartData) {
       this.removeChart(chart)
     }
     clearInterval(this.dataRefreshTimer)
@@ -527,17 +598,17 @@ export default {
 </script>
 
 <style lang="scss">
-  .area-style {
-    height: auto;
-    overflow-y: hidden;
-    overflow-x: hidden;
+  // .area-style {
+  //   height: 100%;
+  //   overflow-y: hidden;
+  //   overflow-x: hidden;
 
-    @include media-breakpoint-only(xl) {
-      height: 88vh;
-      overflow-y: scroll;
-      overflow-x: hidden;
-    }
-  }
+  //   @include media-breakpoint-only(xl) {
+  //     height: 94vh;
+  //     overflow-y: scroll;
+  //     overflow-x: hidden;
+  //   }
+  // }
 
   .no-dark-style-va-button {
     &:focus {

src/components/task/content/TaskContentGM.vue

@@ -0,0 +1,614 @@
+<template>
+  <div class="task-content">
+
+    <va-modal
+      v-model="showShutdownModal"
+      size="small"
+      :title="'SHUTDOWN'"
+      :message="'The controller shutdown.'"
+      :okText=" $t('modal.confirm') "
+      @ok="exit()"
+      @cancel="exit()"
+    />
+
+    <va-modal
+      v-model="showRemoveChartModal"
+      size="small"
+      :title="'REMOVE CHART'"
+      :message="'The chart will be removed.'"
+      :okText=" $t('modal.confirm') "
+      @ok="removeChart(null)"
+    />
+
+    <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-g-m :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" />
+          </div> -->
+        </div>
+
+      </div>
+
+      <div :class="chartAreaClass">
+        <div class="row" >
+          <div class="flex sm12 xl12 md12 xs12">
+            <div class="flex sm12 xl12 md12 xs12" style="text-align: center;">
+              <va-card
+                stripe="primary"
+              >
+                <va-button class="no-dark-style-va-button" v-if="!showDeviceSetting" color="primary" target="_blank" @click="showDeviceSettingClick()" small>
+                  SHOW DEVICES
+                </va-button>
+                <va-button  class="no-dark-style-va-button" v-if="showDeviceSetting" color="primary" target="_blank" @click="hideDeviceSettingClick()" small>
+                  HIDE DEVICES
+                </va-button>
+                <!-- <va-button class="" color="success" target="_blank" @click="startAllClick()" small>
+                  START ALL
+                </va-button>
+                <va-button class="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>
+                  ADD CHART
+                </va-button>
+              </va-card>
+            </div>
+
+            <div :key="chartKey">
+              <div
+                v-for="chart in chartData"
+                :key="chart.chartID"
+              >
+                <canvas-chart
+                  :id="'chart' + chart.chartID"
+                  :ref="'chart_ref'"
+                  :cardheight="'400px'"
+                  :cardwidth="'auto'"
+                  :chartID="chart.chartID"
+                  @init="initChart(chart.chartID)"
+                  @remove="removeChartCheck(chart.chartID)"
+                />
+              </div>
+            </div>
+
+            <div style="height: 150px;">
+            </div>
+
+          </div>
+
+        </div>
+
+      </div>
+
+    </div>
+
+    <task-content-modal />
+
+  </div>
+</template>
+
+<script>
+import { dataStreamBuffer } from '../../../data/task/DataStreamBuffer'
+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 { mapActions } from 'vuex'
+import taskTypes from '@/store/modules/task/content/types'
+
+// TODO change chart data tag format
+
+export default {
+  name: 'TaskContentGM',
+  components: {
+    CanvasChart,
+    TaskDevicesGM,
+    TaskContentModal,
+  },
+  computed: {
+    ...mapFields('taskContent', [
+      'deviceList',
+      'showTaskModal',
+      'taskModalText',
+      'chartData',
+    ]),
+  },
+  data () {
+    return {
+      // modal
+      showShutdownModal: false,
+      showRemoveChartModal: false,
+      // refresh timer
+      dataRefreshTimer: null,
+      // chart refresh key
+      chartKey: 0,
+      chartNumber: 0,
+      selectChartID: null,
+      showDeviceSetting: true,
+      chartAreaClass: ['flex', 'xs12', 'sm12', 'md12', 'xl8', 'pa-0'],
+      getParmDone: false,
+    }
+  },
+  mqtt: {
+    async '+/get_device_info_all/+' (data, topic) {
+      await taskInfo.deviceInfo(String.fromCharCode.apply(null, data), this.deviceList)
+      this.refreshDevicesWindow()
+    },
+    async '+/get_device_info/+' (data, topic) {
+      await taskInfo.deviceInfo(String.fromCharCode.apply(null, data), this.deviceList)
+      this.refreshDevicesWindow()
+      this.getParmDone = true
+      this.checkStiStatus()
+    },
+    async '+/device_parameter/+' (data, topic) {
+      await taskInfo.deviceParameter(String.fromCharCode.apply(null, data))
+      this.refreshDevicesWindow()
+    },
+    async '+/device_parameter_value/+' (data, topic) {
+      await taskInfo.deviceParameter(String.fromCharCode.apply(null, data))
+      this.refreshDevicesWindow()
+    },
+    async '+/hardware_device/+' (data, topic) {
+      await taskInfo.deviceInfo(String.fromCharCode.apply(null, data), this.deviceList)
+      if (this.$refs.devices_ref != null) {
+        await this.$refs.devices_ref.loadingDone()
+      }
+    },
+    // 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) {
+        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)
+        }
+      }
+      dataStreamBuffer.into(String.fromCharCode.apply(null, data), parseInt(topicSplit[3]), (parseInt(topicSplit[4]) + 1))
+    },
+    '+/device_save_path/+' (data, topic) {
+      taskInfo.deviceSavePath(String.fromCharCode.apply(null, data))
+    //  console.log(taskInfo.getTaskInfo())
+    },
+    '+/device_save_path_set/+' (data, topic) {
+      taskInfo.deviceSavePath(String.fromCharCode.apply(null, data))
+    //  console.log(taskInfo.getTaskInfo())
+    },
+    async '+/broadcast' (data, topic) {
+      const mes = String.fromCharCode.apply(null, data).split(':')
+      // let content
+      switch (mes[0]) {
+        case 'state':
+          switch (mes[1]) {
+            case 'device_available':
+              this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+                header: 'hardware_device/0',
+              }))
+              break
+          }
+          break
+        case 'disconnected':
+          taskInfo.deviceDisconnected(mes[1])
+          this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+            header: 'get_device_info/0',
+            device: parseInt(mes[1]),
+          }))
+          break
+        case 'connected':
+          this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+            header: 'get_device_info/0',
+            device: parseInt(mes[1]),
+          }))
+          taskInfo.deviceConnected(mes[1])
+          break
+        case 'shutdown':
+          taskInfo.controllerShutdown(this.deviceList)
+          this.showShutdownModal = true
+          break
+        case 'start':
+          if (!taskInfo.getDeviceInfoByRawID(parseInt(mes[1])).info.isSync) {
+            taskInfo.deviceStart(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
+        case 'stop':
+          if (mes[1] === 'all') {
+            return false
+          }
+          taskInfo.deviceStop(parseInt(mes[1]), this.deviceList)
+          break
+        case 'device_timeout':
+          this.pageToast('The device [' + taskInfo.getDeviceIDByRaw(parseInt(mes[1])) + '] is timeout, please check its status or parameters.')
+          break
+        case 'device_mission_done':
+          this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+            header: 'device_instruction/0',
+            device: parseInt(mes[1]),
+            instruction: 'interrupt',
+          }))
+          this.pageToast('The device [' + taskInfo.getDeviceIDByRaw(parseInt(mes[1])) + '] mission is done.')
+          break
+        default:
+          break
+      }
+    //  console.log(String.fromCharCode.apply(null, data), topic)
+    },
+  },
+  methods: {
+    mqttSub: function (val) {
+      this.$mqtt.subscribe(val)
+    },
+    mqttUnSub: function (val) {
+      this.$mqtt.unsubscribe(val)
+    },
+    mqttPub: function (topic, mes) {
+      this.$mqtt.publish(topic, mes)
+    },
+    pageMqttSub: function (id) {
+      this.mqttSub(id + '/hardware_device/+')
+      this.mqttSub(id + '/broadcast')
+      this.mqttSub(id + '/get_device_info_all/+')
+      this.mqttSub(id + '/get_device_info/+')
+      this.mqttSub(id + '/device_parameter/+')
+      this.mqttSub(id + '/device_parameter_value/+')
+    },
+    pageMqttUnSub: function (id) {
+      for (const device in taskInfo.getTaskInfo().deviceList) {
+        this.mqttUnSub(id + '/data_server/device_data_stream/' + device + '/+')
+      }
+      this.mqttUnSub(id + '/hardware_device/+')
+      this.mqttUnSub(id + '/broadcast')
+      this.mqttUnSub(id + '/get_device_info_all/+')
+      this.mqttUnSub(id + '/get_device_info/+')
+      this.mqttUnSub(id + '/device_parameter/+')
+      this.mqttUnSub(id + '/device_parameter_value/+')
+    },
+    pageInit: async function () {
+      if (await this.$refs.devices_ref != null) {
+        await this.$refs.devices_ref.loadingStart()
+      }
+      // let _parameter, _content
+
+      // this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+      //   header: 'device_parameter/0',
+      //   device: 7,
+      //   parameter: 'RECORDING_CH|AXIS_CH',
+      //   content: '7|1',
+      // }))
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'hardware_device/0',
+      }))
+
+      this.chartNumber = Object.keys(this.chartData).length
+    },
+    pageToast: function (mes) {
+      this.showToast(
+        mes,
+        {
+          icon: 'fa-bell',
+          position: 'bottom-right',
+          duration: 4000,
+        },
+      )
+    },
+    refreshData: function () {
+      // TODO don't need to refresh chart with stop status
+      for (const chart in this.chartData) {
+        this.taskContentChartRefreshData({
+          chartID: parseInt(chart),
+        })
+      }
+    },
+    refreshDevicesWindow: function () {
+      // console.log(taskInfo.getTaskInfo())
+      if (this.$refs.devices_ref != null) {
+        this.$refs.devices_ref.refresh()
+      }
+    },
+    checkStiStatus: function () {
+      this.$refs.devices_ref.checkStiStatus()
+    },
+    addChart: async function () {
+      const defaultID = {}
+      const update = async () => {
+        for (const chart in this.chartData) {
+          defaultID[chart] = this.chartData[chart].mappingID
+        }
+        this.taskContentChartAdd({
+          chartID: this.chartNumber,
+          maxDots: 4000,
+          gridLength: 1,
+        })
+        this.chartNumber++
+        this.chartKey++
+      }
+      await update()
+
+      for (const chart in this.chartData) {
+        this.chartData[chart].mappingID = defaultID[chart]
+      }
+
+      if (this.$refs.chart_ref != null) {
+        this.$refs.chart_ref.forEach(ref => {
+          ref.refreshMappingSelect()
+        })
+      }
+      // this.pageToast('The chart has been added.')
+
+      return this.chartNumber - 1
+    },
+    refreshChartSetting: async function () {
+      const defaultID = {}
+      const update = async () => {
+        for (const chart in this.chartData) {
+          defaultID[chart] = this.chartData[chart].mappingID
+        }
+        this.chartKey++
+      }
+      await update()
+
+      for (const chart in this.chartData) {
+        this.chartData[chart].mappingID = defaultID[chart]
+      }
+
+      if (this.$refs.chart_ref != null) {
+        this.$refs.chart_ref.forEach(ref => {
+          ref.refreshMappingSelect()
+        })
+      }
+    },
+    initChart: function (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) {
+      if (chartID == null) {
+        chartID = this.selectChartID
+      }
+      dataStreamBuffer.removeByChart(chartID)
+      if (this.chartData[chartID] != null) {
+        const defaultID = {}
+        const update = async () => {
+          for (const chart in this.chartData) {
+            if (chart !== chartID) {
+              defaultID[chart] = this.chartData[chart].mappingID
+            }
+          }
+          delete this.chartData[chartID]
+          this.chartKey++
+        }
+        await update()
+
+        for (const chart in this.chartData) {
+          this.chartData[chart].mappingID = defaultID[chart]
+        }
+
+        if (this.$refs.chart_ref != null) {
+          this.$refs.chart_ref.forEach(ref => {
+            ref.refreshMappingSelect()
+          })
+        }
+      }
+      // this.pageToast('The chart has been removed.')
+    },
+    showDeviceSettingClick: function () {
+      this.showDeviceSetting = true
+      this.chartAreaClass[3] = 'md12'
+      this.chartAreaClass[4] = 'xl8'
+    },
+    hideDeviceSettingClick: function () {
+      this.showDeviceSetting = false
+      this.chartAreaClass[3] = 'md12'
+      this.chartAreaClass[4] = 'xl12'
+    },
+    addMappingChart: async function (deviceID) {
+      // if have chart with device ID
+      for (const chart in this.chartData) {
+        if (this.chartData[chart].mappingID === deviceID) {
+          return false
+        }
+      }
+      const chart = await this.addChart()
+      await this.$nextTick(async () => {
+        this.chartData[chart].mappingID = deviceID
+        if (this.$refs.chart_ref != null) {
+          this.$refs.chart_ref.forEach(ref => {
+            ref.refreshMappingSelect()
+          })
+        }
+      })
+      return chart
+    },
+    addDevice: async function (deviceID) {
+      this.mqttSub(taskInfo.getTaskInfo().controllerID + '/data_server/device_data_stream/' + taskInfo.getRawDeviceID(deviceID) + '/+')
+      this.addMappingChart(deviceID)
+      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 this.chartData) {
+        if (this.chartData[chart].mappingID === deviceID) {
+          dataStreamBuffer.removeByChart(chart)
+          this.removeChart(chart)
+        }
+      }
+      this.pageToast('The device [' + deviceID + '] has been removed.')
+    },
+    addFormula: async function (formulaID) {
+      const chart = await this.addChart()
+      await this.$nextTick(async () => {
+        this.chartData[chart].mappingID = formulaID
+        if (this.$refs.chart_ref != null) {
+          this.$refs.chart_ref.forEach(ref => {
+            ref.refreshMappingSelect()
+          })
+        }
+      })
+      this.pageToast('The formula [' + formulaID + '] has been registered.')
+    },
+    removeFormula: function (formulaID) {
+      for (const chart in this.chartData) {
+        if (this.chartData[chart].mappingID === formulaID) {
+          dataStreamBuffer.removeByChart(chart)
+          this.removeChart(chart)
+        }
+      }
+      this.pageToast('The formula [' + formulaID + '] has been removed.')
+    },
+    startAllClick: async function () {
+      for (const device of this.deviceList) {
+        if (this.$refs.devices_ref === undefined) {
+          this.startDevice(device)
+        } else {
+          await this.$refs.devices_ref.$refs.pdlist_ref.start(device)
+        }
+      }
+      this.refreshDevicesWindow()
+      this.pageToast('The all devices have been started')
+    },
+    startDevice: async function (device) {
+      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({
+            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))
+      }
+    },
+    stopAllClick: function () {
+      for (const device of this.deviceList) {
+        if (this.$refs.devices_ref === undefined) {
+          this.stopDevice(device)
+        } else {
+          this.$refs.devices_ref.stopDevice(device)
+        }
+      }
+      this.pageToast('The all devices have been stopped')
+    },
+    stopDevice: async function (device) {
+      dataStreamBuffer.removeByDevice(taskInfo.getRawDeviceID(device.id))
+      if (taskInfo.getDeviceInfo(device.id).info.isSync) {
+        if (taskInfo.getDeviceInfo(device.id).info.library_name.startsWith('Neulive')) {
+          this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+            header: 'device_instruction/0',
+            device: taskInfo.getRawDeviceID(device.id),
+            instruction: 'stop_record',
+          }))
+        } else if (taskInfo.getDeviceInfo(device.id).info.library_name.startsWith('Elite')) {
+          this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+            header: 'device_instruction/0',
+            device: taskInfo.getRawDeviceID(device.id),
+            instruction: 'interrupt',
+          }))
+        }
+        device.stopping = true
+      }
+    },
+    exit: function () {
+      this.$router.push({
+        path: '/',
+      })
+    },
+
+    ...mapActions('taskContent', [
+      taskTypes.chart.add,
+      taskTypes.chart.refreshData,
+      taskTypes.chart.defaultChartGenerator,
+      taskTypes.chart.reset,
+    ]),
+  },
+  watch: {
+  },
+  async mounted () {
+    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)
+
+    // const _this = this
+    // window.onresize = function () { // define the event of window size changing
+    //   // _this.screenWidth = document.documentElement.clientWidth
+    //   _this.screenHeight = document.documentElement.clientHeight
+    // }
+  },
+  destroyed () {
+    taskInfo.destroyed(this.deviceList)
+    for (const chart in this.chartData) {
+      this.removeChart(chart)
+    }
+    clearInterval(this.dataRefreshTimer)
+    this.pageMqttUnSub(taskInfo.getTaskInfo().controllerID)
+  },
+
+}
+</script>
+
+<style lang="scss">
+  // .area-style {
+  //   height: 100%;
+  //   overflow-y: hidden;
+  //   overflow-x: hidden;
+
+  //   @include media-breakpoint-only(xl) {
+  //     height: 94vh;
+  //     overflow-y: scroll;
+  //     overflow-x: hidden;
+  //   }
+  // }
+
+  .no-dark-style-va-button {
+    &:focus {
+      filter: brightness(100%);
+    }
+  }
+</style>

src/components/task/content/TaskContentModal.vue

@@ -0,0 +1,33 @@
+<template>
+  <va-modal
+    v-model="showTaskModal"
+    size="small"
+    :title="''"
+    :message="taskModalText"
+    :okText=" $t('modal.confirm') "
+    :cancelText=" $t('modal.cancel') "
+  />
+</template>
+
+<script>
+import { mapFields } from 'vuex-map-fields'
+
+export default {
+  components: {
+  },
+  props: {
+  },
+  computed: {
+    ...mapFields('taskContent', [
+      'showTaskModal',
+      'taskModalText',
+    ]),
+  },
+  data () {
+    return {
+    }
+  },
+  methods: {
+  },
+}
+</script>

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

@@ -2,8 +2,19 @@
   <div class="flex" :class="cardclass">
     <va-card>
       <template slot="header">
-        <va-icon name="fa fa-area-chart mr-3" color="primary"/>
-        <h5 class="mt-0 mb-0">{{nameCard}}</h5>
+        <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>
+          </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()">
+              <va-icon
+                name="fa fa-times"
+                color="white"
+              />
+            </va-button>
+          </div>
+        </div>
       </template>
       <va-tabs v-model="tabValue" class="mb-3" style="width: 100%; min-width: 100px;">
         <va-tab>
@@ -12,58 +23,101 @@
         <va-tab>
           {{'SOURCE'}}
         </va-tab>
-        <!-- <va-tab>
-          {{'SETTING'}}
-        </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>
-        <div v-else>
-          Please add the source or choose a item to mapping.
+        <div v-if="chartData[chartID].legend.data.length != 0">
+          <chart :key="taskContentChartKey" :ref="'chart_ref'" :style="'width: '+ cardwidth + '; height: ' + cardheight + ';'" :options="data" :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" />
       </div>
       <div v-else :style="'width: '+ cardwidth + '; height: ' + cardheight + ';'" >
-        <canvas-chart-setting></canvas-chart-setting>
+        <!-- <canvas-chart-setting :chartID="chartID"></canvas-chart-setting> -->
       </div>
-      <div class="flex row xs12 md12 xl12 sm12" style="text-align: center;" >
-        <div>
-          <va-select
-            class="xs6 md6 xl6 sm6"
-            :on-change="mappingSelectChange()"
-            small
-            :label="'MAPPING'"
-            v-model="mappingSelect"
-            textBy="name"
-            :options="mappingOptions"
-          />
-        </div>
-        <div>
-          <va-button small @click="init()">INIT</va-button>
-          <va-button small color="dark" @click="remove()">REMOVE</va-button>
-        </div>
-
+      <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">
+        <va-input
+          v-if="chartData[chartID].chartXMode === 'time'"
+          class="mx-1"
+          @keyup.enter="timeIntervalChange(timeIntervalInput)"
+          @blur="timeIntervalChange(timeIntervalInput)"
+          v-model="timeIntervalInput"
+          :label="'time-grid'"
+        >
+          <p slot="append" style="margin-right: 0;" small>
+            ms
+          </p>
+        </va-input>
+        <va-input
+          v-if="chartData[chartID].chartXMode === 'value'"
+          class="mx-1"
+          @keyup.enter="xIntervalChange(xIntervalInput)"
+          @blur="xIntervalChange(xIntervalInput)"
+          v-model="xIntervalInput"
+          :label="'x-grid'"
+        >
+          <p slot="append" style="margin-right: 0;" small>
+            {{chartData[chartID].chartXUnit}}
+          </p>
+        </va-input>
+        <va-input
+          class="mx-1"
+          @keyup.enter="yIntervalChange(yIntervalInput)"
+          @blur="yIntervalChange(yIntervalInput)"
+          v-model="yIntervalInput"
+          :label="'y-grid'"
+        >
+          <p slot="append" style="margin-right: 0;" small>
+            {{chartData[chartID].chartYUnit}}
+          </p>
+        </va-input>
+        <va-input
+          v-if="chartData[chartID].chartDevice === 'neulive'"
+          class="mx-1"
+          @keyup.enter="threeAxisIntervalChange(threeAxisIntervalInput)"
+          @blur="threeAxisIntervalChange(threeAxisIntervalInput)"
+          v-model="threeAxisIntervalInput"
+          :label="'3axis-grid'"
+        >
+          <p slot="append" style="margin-right: 0;" small>
+            g
+          </p>
+        </va-input>
+      </div>
+      <div class="row flex ma-0 pa-0">
+        <canvas-chart-filter :chartID="chartID" :filterIndex="0" />
+        <canvas-chart-filter :chartID="chartID" :filterIndex="1" />
+        <canvas-chart-filter :chartID="chartID" :filterIndex="2" />
       </div>
     </va-card>
+    <canvas-chart-filter-popup :ref="'filter_popup_ref'" :chartID="chartID" :chartRef="this.$refs.chart_ref" />
   </div>
 </template>
 
 <script>
-// import { InitChartsData, getChartsData } from '../../../../../data/task/ChartsManagement'
-import CanvasChartSetting from './CanvasChartSetting'
+import CanvasChartFilter from './CanvasChartFilter.vue'
+import CanvasChartFilterPopup from './CanvasChartFilterPopup.vue'
 import CanvasChartSource from './CanvasChartSource'
 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: 'CanvasChart',
   components: {
-    CanvasChartSetting,
+    // CanvasChartSetting,
     CanvasChartSource,
+    CanvasChartFilter,
+    CanvasChartFilterPopup,
   },
   props: {
     chartID: {
@@ -85,26 +139,114 @@ export default {
       default: 'auto',
     },
   },
-  created () {
+  computed: {
+    ...mapFields('taskContent', [
+      'chartData',
+      'taskContentChartKey',
+    ]),
   },
   data () {
     return {
-      // chartData: InitChartsData(this.chartID, 2000, 1, 1),
+      data: 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',
     }
   },
-  computed: {
-  },
-  watch: {
-  },
   methods: {
+    timeIntervalChange: function (val) {
+      if (!isNaN(parseInt(val))) {
+        this.chartData[this.chartID].xAxis.forEach(x => {
+          if (x.type === 'time') {
+            x.interval = val * 1000
+          }
+        })
+      } else {
+        this.timeIntervalInput = 'auto'
+        this.chartData[this.chartID].xAxis.forEach(x => {
+          if (x.type === 'time') {
+            x.interval = 500 * 1000
+          }
+        })
+      }
+    },
+    xIntervalChange: async function (val) {
+      if (!isNaN(parseInt(val))) {
+        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()
+    },
+    yIntervalChange: async function (val) {
+      if (!isNaN(parseInt(val))) {
+        this.chartData[this.chartID].yAxis.forEach(y => {
+          if (parseInt(y.channel) <= 255) {
+            if (this.chartData[this.chartID].chartYUnit === 'uV') {
+              y.interval = parseInt(val)
+              //  console.log(y.interval)
+            } else {
+              y.interval = val * 1000
+            }
+            const maxList = []
+            const minList = []
+            y.seriesIndex.forEach(i => {
+              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
+          }
+        })
+      } else {
+        this.timeIntervalInput = 'auto'
+        this.chartData[this.chartID].yAxis.forEach(y => {
+          if (parseInt(y.channel) <= 255) {
+            y.interval = null
+            y.max = 'dataMax'
+            y.min = 'dataMin'
+          }
+        })
+      }
+      await this.taskContentChartSaveToCache()
+    },
+    threeAxisIntervalChange: function (val) {
+      if (!isNaN(parseInt(val))) {
+        this.chartData[this.chartID].yAxis.forEach(y => {
+          if (parseInt(y.channel) >= 255) {
+            y.interval = val * 1
+          }
+        })
+      } else {
+        this.timeIntervalInput = 'auto'
+        this.chartData[this.chartID].yAxis.forEach(y => {
+          if (parseInt(y.channel) >= 255) {
+            y.interval = null
+          }
+        })
+      }
+    },
     init: function () {
       this.mappingSelect = ''
       this.nameCard = 'chart' + this.chartID
@@ -124,44 +266,79 @@ 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) {
             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()
       }
     },
+    showFilterPopup (params) {
+      this.$refs.filter_popup_ref.showPanel(params)
+    },
+    setCursor (params) {
+      this.$refs.chart_ref.chart._zr.setCursorStyle('copy')
+    },
+    legendChange (params) {
+      const activeLegendLen = Object.values(params.selected).filter(val => val === true).length
+      let index = 0
+      for (const [gridIndex, value] of Object.values(params.selected).entries()) { // [TODO] 技術債，目前real time chart一個grid只對應一條series
+        if (value === true) {
+          this.chartData[this.chartID].grid[gridIndex].height = (85 / activeLegendLen) + '%'
+          this.chartData[this.chartID].grid[gridIndex].top = index * (85 / activeLegendLen) + 1 + '%'
+          index++
+        } else {
+          this.chartData[this.chartID].grid[gridIndex].height = '0%'
+          this.chartData[this.chartID].grid[gridIndex].top = '0%'
+        }
+      }
+    },
+    selectAllSeries () {
+      this.$refs.chart_ref.dispatchAction({
+        type: 'legendAllSelect',
+      })
+    },
+    inverseSelectAllSeries () {
+      this.$refs.chart_ref.dispatchAction({
+        type: 'legendInverseSelect',
+      })
+    },
+
+    ...mapActions('taskContent', [
+      taskTypes.chart.saveToCache,
+    ]),
   },
   async mounted () {
+    this.data = this.chartData[this.chartID]
     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.on('legendselectchanged', this.legendChange)
+      this.$refs.chart_ref.chart.on('legendselectall', this.legendChange)
+      this.$refs.chart_ref.chart.on('legendinverseselect', this.legendChange)
+    }
+    // this.timeIntervalInput = '500'
+    // this.timeIntervalChange('500')
   },
   destroyed () {
     clearInterval(this.resizeTimer)
@@ -169,3 +346,17 @@ export default {
 }
 
 </script>
+
+<style lang="scss">
+  .circle-button {
+    height: 25px;
+    width: 25px;
+    border-radius: '50%';
+  }
+
+  .no-dark-style-va-button {
+    &:focus {
+      filter: brightness(100%);
+    }
+  }
+</style>

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

@@ -0,0 +1,207 @@
+<template>
+  <div class="row flex pa-0 ma-0">
+    <div class="filter-input my-0 pa-0 mx-1">
+      <va-select
+        small
+        noClear
+        :label="'FILTER ' + (filterIndex + 1)"
+        v-model="selectFilter"
+        textBy="name"
+        :options="optionFilter"
+      />
+    </div>
+    <va-input
+      :label="'order'"
+      class="mx-1 order-input"
+      v-model="order"
+    />
+    <va-input
+      v-if="[1, 2, 3].indexOf(selectFilter.id) >= 0"
+      :label="'FREQ'"
+      class="mx-1 freq-input"
+      v-model="freq2"
+    >
+      <p slot="append" style="margin-right: 0;" small>
+        Hz
+      </p>
+    </va-input>
+    <va-input
+      v-if="selectFilter.id > 3"
+      :label="'FREQ MIN'"
+      class="mx-1 freq-input"
+      v-model="freq0"
+    >
+      <p slot="append" style="margin-right: 0;" small>
+        Hz
+      </p>
+    </va-input>
+    <va-input
+      v-if="selectFilter.id > 3"
+      :label="'FREQ MAX'"
+      class="mx-1 freq-input"
+      v-model="freq1"
+    >
+      <p slot="append" style="margin-right: 0;" small>
+        Hz
+      </p>
+    </va-input>
+    <va-button
+      flat
+      small
+      :color="buttonColor"
+      class="circle-button pa-0 mx-0 filter-apply-button"
+      :icon="buttonIcon"
+      @click.stop="updateFilterInfo(filterIndex)"/>
+  </div>
+</template>
+
+<script>
+import { taskInfo } from '@/data/task/TaskInfo'
+import api from '@/data/api'
+import { mapFields } from 'vuex-map-fields'
+import { IIRFilter } from '@/data/task/filter/IIRFilter.js'
+
+export default {
+  name: 'canvas-chart-filter',
+  props: {
+    chartID: {
+      type: Number,
+      required: true,
+    },
+    filterIndex: {
+      type: Number,
+      required: true,
+    },
+  },
+  computed: {
+    ...mapFields('taskContent', [
+      'filter',
+      'chartData',
+    ]),
+    buttonIcon () {
+      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.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 'primary'
+    },
+  },
+  data () {
+    return {
+      selectFilter: {
+        id: 1,
+        name: 'notch',
+      },
+      order: 20,
+      freq0: 60,
+      freq1: 60,
+      freq2: 60,
+      optionFilter: [
+        {
+          id: 1,
+          name: 'notch',
+        },
+        {
+          id: 2,
+          name: 'lowpass',
+        },
+        {
+          id: 3,
+          name: 'highpass',
+        },
+        {
+          id: 4,
+          name: 'bandstop',
+        },
+        {
+          id: 5,
+          name: 'bandpass',
+        },
+      ],
+    }
+  },
+  methods: {
+    async updateFilterInfo (index) {
+      let closeFilter = false
+      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
+        }
+      }
+      if (closeFilter) {
+        return false
+      }
+      let fs = 0
+      let sos = []
+      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
+        // console.log(_fs, _chNum)
+        if (fs !== _fs) {
+          fs = _fs
+          const ret = await api.analysis.IIRFilter({
+            type: this.selectFilter.name,
+            order: this.order,
+            fs: parseFloat(_fs / _chNum),
+            f0: parseFloat(this.freq0),
+            f1: parseFloat(this.freq1),
+            f2: parseFloat(this.freq2),
+          })
+
+          if (ret.status !== 200) {
+            return false
+          }
+
+          const _sosRet = ret.data.split('/')
+          const _sos = []
+          _sosRet.forEach((v, vi) => {
+            const _tmp = v.split(',')
+            const _arr = []
+            _tmp.forEach(s => {
+              _arr.push(parseFloat(s))
+            })
+            _sos.push(_arr)
+          })
+          sos = _sos
+        }
+        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.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.chartData[this.chartID])
+    },
+  },
+}
+</script>
+
+<style lang='scss'>
+  .filter-input {
+    max-width: 100px;
+  }
+
+  .freq-input {
+    max-width: 80px;
+  }
+
+  .order-input {
+    max-width: 50px;
+  }
+
+  .filter-apply-button {
+    max-width: 25px;
+  }
+</style>

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

@@ -0,0 +1,87 @@
+<template>
+  <div>
+    <va-modal
+      class="flex sm12 xl12 md12 xs12"
+      v-model="showModal"
+      :title="'Grid ' + (gridIndex + 1)"
+      :position="position"
+      cancelText=""
+      okText=""
+      size="small"
+    >
+      <div class="row flex ma-0 pa-0">
+        <canvas-chart-individual-filter :chartID="chartID" :seriesIndex="gridIndex" :filterIndex="0" />
+        <canvas-chart-individual-filter :chartID="chartID" :seriesIndex="gridIndex" :filterIndex="1" />
+        <canvas-chart-individual-filter :chartID="chartID" :seriesIndex="gridIndex" :filterIndex="2" />
+      </div>
+    </va-modal>
+  </div>
+</template>
+
+<script>
+import CanvasChartIndividualFilter from './CanvasChartIndividualFilter.vue'
+import { mapFields } from 'vuex-map-fields'
+
+export default {
+  name: 'canvas-chart-filter-popup',
+  components: {
+    CanvasChartIndividualFilter,
+  },
+  props: {
+    chartID: {
+      type: Number,
+      required: true,
+    },
+    chartRef: {
+      type: Object,
+    },
+  },
+  computed: {
+    ...mapFields('taskContent', [
+      'chartData',
+    ]),
+  },
+  data () {
+    return {
+      showModal: false,
+      position: 'center',
+      gridIndex: 0,
+    }
+  },
+  methods: {
+    showPanel (params) {
+      if (this.chartRef != null) {
+        let _gridIndex = 0
+        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
+            break
+          }
+        }
+        this.gridIndex = _gridIndex
+      }
+    },
+  },
+  mounted () {
+  },
+}
+</script>
+
+<style lang='scss'>
+  .filter-input {
+    max-width: 100px;
+  }
+
+  .freq-input {
+    max-width: 80px;
+  }
+
+  .order-input {
+    max-width: 50px;
+  }
+
+  .filter-apply-button {
+    max-width: 25px;
+  }
+</style>

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

@@ -0,0 +1,213 @@
+<template>
+  <div>
+    <div class="filter-input my-0 pa-0 mx-1">
+      <va-select
+        small
+        noClear
+        :label="'FILTER ' + (filterIndex + 1)"
+        v-model="selectFilter"
+        textBy="name"
+        :options="optionFilter"
+      />
+    </div>
+    <va-input
+      :label="'order'"
+      class="mx-1 order-input"
+      v-model="order"
+    />
+    <va-input
+      v-if="[1, 2, 3].indexOf(selectFilter.id) >= 0"
+      :label="'FREQ'"
+      class="mx-1 freq-input"
+      v-model="freq2"
+    >
+      <p slot="append" style="margin-right: 0;" small>
+        Hz
+      </p>
+    </va-input>
+    <va-input
+      v-if="selectFilter.id > 3"
+      :label="'FREQ MIN'"
+      class="mx-1 freq-input"
+      v-model="freq0"
+    >
+      <p slot="append" style="margin-right: 0;" small>
+        Hz
+      </p>
+    </va-input>
+    <va-input
+      v-if="selectFilter.id > 3"
+      :label="'FREQ MAX'"
+      class="mx-1 freq-input"
+      v-model="freq1"
+    >
+      <p slot="append" style="margin-right: 0;" small>
+        Hz
+      </p>
+    </va-input>
+    <va-button
+      flat
+      small
+      :color="buttonColor"
+      class="circle-button pa-0 mx-0 filter-apply-button"
+      :icon="buttonIcon"
+      @click.stop="updateFilterInfo(filterIndex, seriesIndex)"
+    />
+  </div>
+</template>
+
+<script>
+import { taskInfo } from '@/data/task/TaskInfo'
+import api from '@/data/api'
+import { mapFields } from 'vuex-map-fields'
+import { IIRFilter } from '@/data/task/filter/IIRFilter.js'
+
+export default {
+  name: 'canvas-chart-filter-individual-filter',
+  props: {
+    chartID: {
+      type: Number,
+      required: true,
+    },
+    seriesIndex: {
+      type: Number,
+      required: true,
+    },
+    filterIndex: {
+      type: Number,
+      required: true,
+    },
+  },
+  computed: {
+    ...mapFields('taskContent', [
+      'filter',
+      'chartData',
+    ]),
+    buttonIcon () {
+      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.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 {
+      selectFilter: {
+        id: 1,
+        name: 'notch',
+      },
+      order: 20,
+      freq0: 0,
+      freq1: 0,
+      freq2: 0,
+      optionFilter: [
+        {
+          id: 1,
+          name: 'notch',
+        },
+        {
+          id: 2,
+          name: 'lowpass',
+        },
+        {
+          id: 3,
+          name: 'highpass',
+        },
+        {
+          id: 4,
+          name: 'bandstop',
+        },
+        {
+          id: 5,
+          name: 'bandpass',
+        },
+      ],
+    }
+  },
+  methods: {
+    async updateFilterInfo (_filterIndex, _seriesIndex) {
+      let closeFilter = false
+      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) {
+        return false
+      }
+      let fs = 0
+      let sos = []
+      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
+      // console.log(_fs, _chNum)
+      if (fs !== _fs) {
+        fs = _fs
+        const ret = await api.analysis.IIRFilter({
+          type: this.selectFilter.name,
+          order: this.order,
+          fs: parseInt(_fs / _chNum),
+          f0: parseInt(this.freq0),
+          f1: parseInt(this.freq1),
+          f2: parseInt(this.freq2),
+        })
+
+        if (ret.status !== 200) {
+          return false
+        }
+
+        const _sosRet = ret.data.split('/')
+        const _sos = []
+        _sosRet.forEach((v, vi) => {
+          const _tmp = v.split(',')
+          const _arr = []
+          _tmp.forEach(s => {
+            _arr.push(parseFloat(s))
+          })
+          _sos.push(_arr)
+        })
+        sos = _sos
+      }
+      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.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.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>
+
+<style lang='scss'>
+  .filter-input {
+    max-width: 100px;
+  }
+
+  .freq-input {
+    max-width: 80px;
+  }
+
+  .order-input {
+    max-width: 50px;
+  }
+
+  .filter-apply-button {
+    max-width: 25px;
+  }
+</style>

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

@@ -1,90 +1,49 @@
 <template>
   <div>
-    <va-tree-root>
-      <va-tree-category isOpen label="Products">
-        <va-tree-node
-          v-for="product in products"
-          :key="product.id"
-        >
-          <div class="flex row align--center">
-            <va-input v-model="product.name" class="mb-0"/>
-            <va-icon
-              name="ion ion-md-close"
-              color="info"
-              class="ml-2 pa-1 shrink"
-              style="cursor: pointer;"
-              @click.native="removeProduct(product)"
-            />
-          </div>
-        </va-tree-node>
-        <va-tree-node>
-          <va-button class="mb-2" @click="addProduct()">
-            Add new product
-          </va-button>
-        </va-tree-node>
-      </va-tree-category>
-
-      <va-tree-category label="Electronics">
-        <va-tree-node v-for="electronic in electronics" :key="electronic.id">
-          <va-input v-model="electronic.name" class="mb-0"/>
-        </va-tree-node>
-      </va-tree-category>
-
-      <va-tree-category isOpen label="Products">
-        <va-tree-node
-          v-for="product in products"
-          :key="product.id"
-        >
-          <div class="flex row align--center">
-            <va-input v-model="product.name" class="mb-0"/>
-            <va-icon
-              name="ion ion-md-close"
-              color="info"
-              class="ml-2 pa-1 shrink"
-              style="cursor: pointer;"
-              @click.native="removeProduct(product)"
-            />
-          </div>
-        </va-tree-node>
-        <va-tree-node>
-          <va-button class="mb-2" @click="addProduct()">
-            Add new product
-          </va-button>
-        </va-tree-node>
-      </va-tree-category>
-
-    </va-tree-root>
+    <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/>
+      </div>
+      <div class="flex sm3 xl3 md3 xs3 pa-0 ma-0">
+        <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/>
+      </div>
+      <div class="flex sm12 xl12 md12 xs12 px-0 mx-0">
+        <va-radio-button
+          v-for="(option, index) in optionProtectRec"
+          :key="index"
+          v-model="selectProtectRec"
+          :option="optionProtectRec[index]"
+          :label="optionProtectRec[index]"
+        />
+      </div> -->
+    </div>
   </div>
 </template>
 
 <script>
+import { mapFields } from 'vuex-map-fields'
+
 export default {
   name: 'canvas-chart-setting',
+  props: {
+    chartID: {
+      type: Number,
+      required: true,
+    },
+  },
+  computed: {
+    ...mapFields('taskContent', [
+      'chartData',
+    ]),
+  },
   data () {
     return {
-      gridNumber: 8,
-      electronics: [
-        { id: 1, name: 'Cellphones' },
-        { id: 2, name: 'Camera Body Kits' },
-        { id: 3, name: 'External HDDs' },
-      ],
-      products: [
-        { id: 4, name: 'Cables' },
-        { id: 5, name: 'Monitors' },
-        { id: 6, name: 'Keyboards' },
-      ],
     }
   },
   methods: {
-    addProduct () {
-      this.products.push({
-        id: Math.floor(Math.random() * 100000),
-        name: 'New product',
-      })
-    },
-    removeProduct (product) {
-      this.products = this.products.filter(productToFilter => productToFilter !== product)
-    },
   },
 }
 </script>

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

@@ -1,91 +1,99 @@
 <template>
   <div style="height: 350px; overflow-y: scroll; overflow-x: hidden;">
+    <div>
+      <div class="flex row align--center">
+        <div class="flex md3 xl3 xs3 sm3">
+          <va-select
+            small
+            :label="'X SOURCE'"
+            v-model="deviceSelectX"
+            textBy="name"
+            :options="deviceOptions"
+          />
+        </div>
+        <div class="flex md3 xl3 xs3 sm3">
+          <va-select
+            :on-change="channelSelectXChange()"
+            :label="'X CHANNEL'"
+            v-model="channelSelectX"
+            textBy="channel"
+            :options="channelOptionsX"
+            :disabled="channelSelectDisableX"
+          />
+        </div>
+        <div class="flex md3 xl3 xs3 sm3">
+          <va-select
+            :label="'Y SOURCE'"
+            v-model="deviceSelectY"
+            textBy="name"
+            :options="deviceOptions"
+          />
+        </div>
+        <div class="flex md3 xl3 xs3 sm3">
+          <va-select
+            :on-change="channelSelectYChange()"
+            :label="'Y CHANNEL'"
+            v-model="channelSelectY"
+            textBy="channel"
+            :options="channelOptionsY"
+            :disabled="channelSelectDisableY"
+          />
+        </div>
+        <div class="flex md3 xl3 xs3 sm3">
+          <va-select
+            :label="'SubPlot'"
+            v-model="gridSelection"
+            textBy="value"
+            :options="gridOptions"
+          />
+        </div>
+        <va-button :disabled="sourceAddStatus" class="flex md3 xl3 xs3 sm3 pa-1" @click="addRegisterDeviceChannel(gridSelection.id)" >
+          Add
+        </va-button><span class="ml-2" style="color: red;">{{error}}</span>
+      </div>
+    </div>
     <va-tree-root>
       <va-tree-category
         style="font-size: 20px;"
-        v-for="grid in grids"
+        v-for="grid in chartData[chartID].grid"
         :key="grid.index"
-        :label="'GRID ' + grid.index">
+        :label="'Subplot ' + grid.index"
+      >
         <va-tree-node
-          v-for="series in grid.series"
+          v-for="series in chartData[chartID].gridSource[grid.index]"
           :key="series.name"
         >
           <div class="flex row align--center">
             <va-badge class="mb-0" style="font-size: 14px;" color="primary">{{series.name}}</va-badge>
             <va-badge class="mb-0" style="font-size: 14px;" color="primary" outline>{{series.xAxis}}</va-badge>
             <va-badge class="mb-0" style="font-size: 14px;" color="primary" outline>{{series.yAxis}}</va-badge>
-            <va-icon
+            <!-- <va-icon
               name="ion ion-md-close"
               color="info"
               class="ml-2 pa-1 shrink"
               style="cursor: pointer;"
               @click.native="removeProduct(product)"
-            />
-          </div>
-        </va-tree-node>
-        <va-tree-node>
-          <div class="flex row align--center">
-            <div class="flex md6 xl6 xs6 sm6">
-              <va-select
-                small
-                :label="'X DEVICE'"
-                v-model="deviceSelectX"
-                textBy="name"
-                :options="deviceOptions"
-              />
-            </div>
-            <div class="flex md6 xl6 xs6 sm6">
-              <va-select
-                :on-change="channelSelectXChange()"
-                :label="'X CHANNEL'"
-                v-model="channelSelectX"
-                textBy="channel"
-                :options="channelOptionsX"
-                :disabled="channelSelectDisableX"
-              />
-            </div>
-            <div class="flex md6 xl6 xs6 sm6">
-              <va-select
-                :label="'Y DEVICE'"
-                v-model="deviceSelectY"
-                textBy="name"
-                :options="deviceOptions"
-              />
-            </div>
-            <div class="flex md6 xl6 xs6 sm6">
-              <va-select
-                :on-change="channelSelectYChange()"
-                :label="'Y CHANNEL'"
-                v-model="channelSelectY"
-                textBy="channel"
-                :options="channelOptionsY"
-                :disabled="channelSelectDisableY"
-              />
-            </div>
-            <va-button :disabled="sourceAddStatus" class="flex md6 xl6 xs6 sm6 pa-1" @click="addRegisterDeviceChannel(grid.index)" >
-              Add
-            </va-button>
+            /> -->
           </div>
         </va-tree-node>
       </va-tree-category>
 
     </va-tree-root>
+    <va-button @click="addGrid()">
+      Add Subplot
+    </va-button>
   </div>
 </template>
 
 <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,
       required: true,
@@ -93,17 +101,9 @@ export default {
   },
   data () {
     return {
-      grids: this.gridInfo,
-      electronics: [
-        { id: 1, name: 'Cellphones' },
-        { id: 2, name: 'Camera Body Kits' },
-        { id: 3, name: 'External HDDs' },
-      ],
-      products: [
-        { id: 4, name: 'Cables' },
-        { id: 5, name: 'Monitors' },
-        { id: 6, name: 'Keyboards' },
-      ],
+      error: '',
+      gridSelection: '',
+      gridOptions: [],
       channelSelectX: '',
       channelOptionsX: [],
       channelSelectY: '',
@@ -114,8 +114,14 @@ export default {
       deviceSelectY: '',
       deviceOptions: taskInfo.getDeviceList(),
       sourceAddStatus: true,
+      sourceList: [],
     }
   },
+  computed: {
+    ...mapFields('taskContent', [
+      'chartData',
+    ]),
+  },
   watch: {
     deviceOptions: function (val) {
       this.clearSelectOptions()
@@ -164,7 +170,12 @@ export default {
         })
         this.channelSelectDisableX = false
       } else if (taskInfo.getDeviceInfo(this.deviceSelectX.id).info.library_name.indexOf('Elite') >= 0) {
-        const channelSet = taskInfo.getDeviceInfo(this.deviceSelectX.id).parameterSet.CHANNEL_LABEL
+        let channelSet
+        if (taskInfo.getDeviceInfo(this.deviceSelectX.id).info.library_name === 'EliteEIS' && taskInfo.getDeviceInfo(this.deviceSelectX.id).parameterSet.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
+        }
         // console.log(channelSet)
         channelSet.forEach((element, index) => {
           channelOptions.push({
@@ -188,7 +199,7 @@ export default {
         this.channelSelectDisableY = true
       } else if (taskInfo.getDeviceInfo(this.deviceSelectY.id).info.library_name.indexOf('Neulive') >= 0) {
         const channelSet = taskInfo.getDeviceInfo(this.deviceSelectY.id).parameterSet.RECORDING_CH.toString(2).split('').reverse()
-        console.log(channelSet)
+        //  console.log(channelSet)
         channelSet.forEach((element, index) => {
           if (parseInt(element) > 0) {
             channelOptions.push({
@@ -226,8 +237,13 @@ export default {
         })
         this.channelSelectDisableY = false
       } else if (taskInfo.getDeviceInfo(this.deviceSelectY.id).info.library_name.indexOf('Elite') >= 0) {
-        const channelSet = taskInfo.getDeviceInfo(this.deviceSelectY.id).parameterSet.CHANNEL_LABEL
-        console.log(channelSet)
+        let channelSet
+        if (taskInfo.getDeviceInfo(this.deviceSelectY.id).info.library_name === 'EliteEIS' && taskInfo.getDeviceInfo(this.deviceSelectY.id).parameterSet.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
+        }
+        //  console.log(channelSet)
         channelSet.forEach((element, index) => {
           channelOptions.push({
             id: index + 1,
@@ -245,6 +261,15 @@ export default {
     },
   },
   methods: {
+    updateGridOptions () {
+      this.gridOptions = []
+      for (let i = 0; i < this.chartData[this.chartID].grid.length; i++) {
+        this.gridOptions.push({
+          id: i,
+          value: String(i),
+        })
+      }
+    },
     channelSelectYChange: function () {
       this.checkSourceAddStatus()
     },
@@ -258,8 +283,9 @@ export default {
       this.channelOptionsY = []
       this.deviceSelectX = ''
       this.deviceSelectY = ''
+      this.gridSelection = ''
     },
-    addRegisterDeviceChannel: function (gridIndex) {
+    async addRegisterDeviceChannel (gridIndex) {
       let deviceNameX
       let deviceNameY
       const deviceIDX = this.deviceSelectX.id
@@ -269,23 +295,71 @@ export default {
       if (this.deviceSelectX.name.indexOf('Neulive') >= 0) {
         deviceNameX = 'Neulive'
       } else if (this.deviceSelectX.name.indexOf('Elite') >= 0) {
-        deviceNameX = 'Elite'
+        if (taskInfo.getDeviceInfo(this.deviceSelectX.id).info.library_name === 'EliteEIS') {
+          deviceNameX = 'EliteEIS'
+        } else {
+          deviceNameX = 'Elite'
+        }
       } else if (this.deviceSelectX.name.indexOf('Time') >= 0) {
         deviceNameX = 'Time'
       }
       if (this.deviceSelectY.name.indexOf('Neulive') >= 0) {
         deviceNameY = 'Neulive'
       } else if (this.deviceSelectY.name.indexOf('Elite') >= 0) {
-        deviceNameY = 'Elite'
+        if (taskInfo.getDeviceInfo(this.deviceSelectY.id).info.library_name === 'EliteEIS') {
+          deviceNameY = 'EliteEIS'
+        } else {
+          deviceNameY = 'Elite'
+        }
       } 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.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,
+      })
+      if (deviceNameX !== 'Time') {
+        this.sourceList.push([this.deviceSelectX.name, deviceIDX, channelX].toString())
+      }
+      if (deviceNameY !== 'Time') {
+        this.sourceList.push([this.deviceSelectY.name, deviceIDY, channelY].toString())
+      }
       this.sourceAddStatus = true
       this.clearSelectOptions()
+      await this.taskContentChartSaveToCache()
+    },
+    async addGrid () {
+      this.taskContentChartUpdateGridList({
+        chartID: this.chartID,
+        length: this.chartData[this.chartID].grid.length + 1,
+      })
+      this.updateGridOptions()
+      await this.taskContentChartSaveToCache()
     },
     checkSourceAddStatus () {
+      if (this.sourceList.indexOf([this.deviceSelectX.name, this.deviceSelectX.id, this.channelSelectX.id].toString()) >= 0) {
+        this.error = 'The same source has been selected in a subplot.'
+        this.sourceAddStatus = true
+        return
+      }
+      if (this.sourceList.indexOf([this.deviceSelectY.name, this.deviceSelectY.id, this.channelSelectY.id].toString()) >= 0) {
+        this.sourceAddStatus = true
+        this.error = 'The same source has been selected in a subplot.'
+        return
+      }
+      this.error = ''
+      if (this.gridSelection.id == null) {
+        this.sourceAddStatus = true
+        return
+      }
       if (this.channelSelectX.id != null && this.channelSelectY.id != null) {
         this.sourceAddStatus = false
       } else if (this.channelSelectX.id != null && this.deviceSelectY.id < 0) {
@@ -296,15 +370,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)
     },
+
+    ...mapActions('taskContent', [
+      taskTypes.chart.register,
+      taskTypes.chart.updateGridList,
+      taskTypes.chart.saveToCache,
+    ]),
+  },
+  mounted () {
+    this.updateGridOptions()
   },
 }
 </script>

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

@@ -10,17 +10,17 @@
       @ok="remove()"
     />
     <va-accordion v-for="device in deviceList" :key="device.id">
-      <va-collapse class="mb-2">
+      <va-collapse class="mb-2" :isOpenDefault='true'>
         <span slot="header" >
           <va-item :key="device.id" class="pa-0 ma-0"
           >
-            <va-icon
+            <!-- <va-icon
               name="ion ion-md-close"
               color="danger"
               class="ml-0 mr-3 pa-0 shrink"
               style="cursor: pointer;"
               @click.native.stop="removeCheck(device)"
-            />
+            /> -->
 
             <va-item-section avatar class="ml-0">
               <va-avatar style="border-radius: 0;">
@@ -28,37 +28,53 @@
               </va-avatar>
             </va-item-section>
 
-            <va-item-section class="ml-3">
+            <va-item-section class="ml-3" caption>
               <va-item-label>
                 {{ device.name }}
               </va-item-label>
-
               <va-item-label caption>
                 {{ device.address }}
               </va-item-label>
-
             </va-item-section>
 
+            <va-item-section class="mr-3" v-if="device.type == 'Neulive'" side>
+              <i v-if="!device.sdCardStatus" class="i-sd-card mr-3" style="width: 1rem; height: 1rem;"></i>
+              <!-- <va-icon
+                name="fas fa-sd-card"
+                :color="(device.sdCardStatus === true) ? 'primary' : 'grey'"
+                class="mr-3"
+                @click.native.stop="sdCardStatus(device)"
+              >
+              </va-icon> -->
+              <va-icon
+                size="1rem"
+                :name="(device.transmission_type === 0) ? 'fa fa-bluetooth-b' : 'fa fa-usb'"
+                color="primary"
+              >
+              </va-icon>
+            </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.isSync" class="px-2 py-0 mr-0" color="success" small>START</va-button>
-                <va-button @click.stop="stop(device)" v-if="device.isSync" :disabled="device.stopping" class="px-2 py-0 mr-0" color="danger" small>STOP</va-button>
-                <va-button @click.stop="detect(device)" v-if="device.type == 'Elite'" color="primary" class="px-2 py-0 mr-0" small>DETECT</va-button>
-                <va-button @click.stop="stimulate(device)" v-if="device.type == 'Neulive' && !device.isStimulate" color="warning" class="px-2 py-0 mr-0" small>STIMULATE</va-button>
-                <va-button @click.stop="stopStimulate(device)" v-if="device.type == 'Neulive' && device.isStimulate" color="danger" class="px-2 py-0 mr-0" small>STOP</va-button>
-                <va-button @click.stop="fastSettle(device)" v-if="device.type == 'Neulive'" color="info" class="px-2 py-0 mr-0" small>R</va-button>
+                <va-button @click.stop="start(device)" v-if="(device.type == 'Neulive' && !device.isSync && !device.isStimulate) || (device.type == 'Elite' && !device.isSync)" class="px-2 py-0 mr-0" color="success" small>START</va-button>
+                <va-button @click.stop="stop(device)" v-if="(device.type == 'Neulive' && (device.isSync || device.isStimulate)) || (device.type == 'Elite' && device.isSync)" class="px-2 py-0 mr-0" color="danger" small>STOP</va-button>
+                <va-button id="detectButton" @click.stop="detect(device)" v-if="device.type == 'Elite'" color="primary" class="px-2 py-0 mr-0" small>DETECT</va-button>
+                <va-button @click.stop="record(device)" v-if="device.type == 'Neulive' && !device.isSync" color="primary" class="px-2 py-0 mr-0 no-dark-style-va-button" small>RECORD</va-button>
+                <va-button @click.stop="stopRecord(device)" v-if="device.type == 'Neulive' && device.isSync" color="danger" class="px-2 py-0 mr-0 no-dark-style-va-button" small>STOP REC</va-button>
+                <va-button @click.stop="stimulate(device)" v-if="device.type == 'Neulive' && !device.isStimulate" color="warning" class="px-2 py-0 mr-0 no-dark-style-va-button" small>STIMULATE</va-button>
+                <va-button @click.stop="stopStimulate(device)" v-if="device.type == 'Neulive' && device.isStimulate" color="danger" class="px-2 py-0 mr-0" small>STOP STI</va-button>
+                <va-button @click.stop="fastSettle(device)" v-if="device.type == 'Neulive'" color="info" class="px-2 py-0 mr-0 no-dark-style-va-button" small>R</va-button>
               </va-item-label>
             </va-item-section>
           </va-item>
         </span>
         <div slot="body">
-          <div class="mt-0 mb-0" style="height: 350px; overflow-y: scroll; overflow-x: hidden;" :key="'detail' + device.id">
-            <div style="text-align: center;">
-              <va-button @click.stop="generateChart(device)" class="pl-2 pr-2 mr-0" small>GENERATE MAPPING CHART</va-button>
-            </div>
+          <div class="mt-0 mb-0" style="height: 60vh; overflow-y: scroll; overflow-x: hidden;" :key="'detail' + device.id">
+            <!-- <div style="text-align: center;">
+              <va-button @click.stop="generateChart(device)" class="pl-2 pr-2 mr-0 no-dark-style-va-button" small>GENERATE MAPPING CHART</va-button>
+            </div> -->
             <div>
               <file-control-window :ref="'fcwindow_ref'" :deviceID="device.id" class="pl-0 pr-0" />
             </div>
@@ -80,6 +96,8 @@
 import EliteParameterWindow from '../parameter/EliteParameterWindow'
 import NeuliveParameterWindow from '../parameter/NeuliveParameterWindow'
 import FileControlWindow from '../meta/FileControlWindow'
+import { mapActions } from 'vuex'
+import types from '@/store/modules/task/content/types'
 
 export default {
   name: 'TaskDeviceList',
@@ -104,6 +122,12 @@ export default {
   computed: {
   },
   methods: {
+    sdCardStatus: function (device) {
+      this.$emit('sd_card_status', {
+        id: device.id,
+        sdCardStatus: device.sdCardStatus,
+      })
+    },
     removeCheck: function (device) {
       this.selectDevice = device
       this.showDeleteModal = true
@@ -111,27 +135,42 @@ export default {
     remove: function () {
       this.$emit('remove', this.selectDevice)
     },
-    start: function (device) {
+    start: async function (device) {
+      // const checkParam = await this.checkIfDeviceSetDoneParam({ device: device })
+      // const status = checkParam.status
+      // const message = checkParam.message
+      // if (status === true) {
       this.setArchiveSettings()
       // this.$emit('start', device)
       setTimeout(() => {
         this.$emit('start', device)
-      }, 100)
+      }, 500)
       this.pageToast('The device ' + device.name + ' has been started.')
+      // } else {
+      //   this.pageToast('The device cannot be started because:' + message)
+      // }
     },
     stop: function (device) {
       this.$emit('stop', device)
       this.pageToast('The device ' + device.name + ' has been stopped.')
     },
-    record_start: function (device) {
+    record: async function (device) {
+      // const checkParam = await this.checkIfRecordingSetDoneParam({ device: device })
+      // const status = checkParam.status
+      // const message = checkParam.message
+      // if (status === true) {
+      // device.stopping = false
       this.setArchiveSettings()
-      this.$emit('record_start', device)
-      device.stopping = false
+      setTimeout(() => {
+        this.$emit('record', device)
+      }, 500)
       this.pageToast('The device ' + device.name + ' has been started.')
+      // } else {
+      //   this.pageToast('Recording cannot be started because:' + message)
+      // }
     },
-    record_stop: function (device) {
-      device.stopping = true
-      this.$emit('record_stop', device)
+    stopRecord: function (device) {
+      this.$emit('stopRecord', device)
       this.pageToast('The device ' + device.name + ' has been stopped.')
     },
     generateChart: function (device) {
@@ -175,9 +214,16 @@ export default {
       this.$emit('detect', device)
       this.pageToast('The device ' + device.name + ' has been detect.')
     },
-    stimulate: function (device) {
-      this.$emit('sti', device)
-      this.pageToast('The device ' + device.name + ' start stimulate.')
+    stimulate: async function (device) {
+      const checkParam = await this.checkIfStimulationSetDoneParam({ device: device })
+      const status = checkParam.status
+      const message = checkParam.message
+      if (status === true) {
+        this.$emit('sti', device)
+        this.pageToast('The device ' + device.name + ' start stimulate.')
+      } else {
+        this.pageToast('Stimulation cannot be started because:' + message)
+      }
     },
     stopStimulate: function (device) {
       this.$emit('sti_stop', device)
@@ -187,6 +233,21 @@ export default {
       this.$emit('fast_settle', device)
       this.pageToast('The device ' + device.name + ' fast settle.')
     },
+    recoverDetectButton () {
+      document.getElementById('detectButton').className += ' no-dark-style-va-button'
+    },
+    ...mapActions('taskContent', [types.param.checkIfRecordingSetDone, types.param.checkIfStimulationSetDone, types.param.checkIfDeviceSetDone]),
+  },
+  destroyed () {
+    // this.deviceList.length = 0
   },
 }
 </script>
+
+<style lang="scss">
+  .no-dark-style-va-button {
+    &:focus {
+      filter: brightness(100%);
+    }
+  }
+</style>

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

@@ -15,23 +15,20 @@
       </div>
 
       <div v-else class="flex row align--center">
-        <task-device-list :ref="'pdlist_ref'" :deviceList="deviceList" @remove="removeDevice($event)" @start="startDevice($event)" @stop="stopDevice($event)" @record_start="startRecord($event)" @record_stop="stopRecord($event)" @sti="sti($event)" @sti_stop="stiStop($event)" @fast_settle="fastSettle($event)" @generate="generateChart($event)" @detect="detectDevice($event)" />
-
-        <div class="row flex xs12 md12 xl12 sm12 mt-2" style="text-align: center;">
-          <div class="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>
+        <task-device-list
+          :ref="'pdlist_ref'"
+          :deviceList="deviceList"
+          @start="startDevice($event)"
+          @stop="stopDevice($event)"
+          @record="record($event)"
+          @stopRecord="stopRecord($event)"
+          @sti="sti($event)"
+          @sti_stop="stiStop($event)"
+          @fast_settle="fastSettle($event)"
+          @generate="generateChart($event)"
+          @detect="detectDevice($event)"
+          @sd_card_status="sdCardStatus($event)"
+        />
       </div>
 
     </va-card>
@@ -41,13 +38,18 @@
 <script>
 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',
   components: {
+    // TaskDeviceListGM,
     FulfillingBouncingCircleSpinner,
     TaskDeviceList,
   },
@@ -59,16 +61,22 @@ export default {
       },
     },
   },
+  computed: {
+    ...mapFields('taskContent', [
+      'deviceList',
+    ]),
+  },
   created () {
   },
   data () {
     return {
       deviceSelect: '',
       deviceOptions: taskInfo.getDeviceListNotRegister(),
-      deviceList: taskInfo.getDeviceListRegister(),
+      // deviceList: this.deviceList,
       state: {
         LOADING: false,
       },
+      stiTimeOut: null,
     }
   },
   mqtt: {
@@ -85,48 +93,114 @@ export default {
     },
     loadingDone: async function () {
       this.state.LOADING = false
-      console.log(this.deviceOptions)
-      for (let i = this.deviceOptions.length - 1; i >= 0; i--) {
-        this.deviceSelect = this.deviceOptions[i]
-        await this.addDevice(this.deviceOptions[i].id)
-        // this.sleep(500).then(() => {
-        //   this.addDevice(this.deviceOptions[i].id)
-        // })
+
+      for (let i = 0; i <= 11; i++) { // 0~7: memboard, 8~11: usb
+        if (taskInfo.getDeviceInfoByRawID(i).info.status === 'connected') {
+          const index = this.deviceList.findIndex(d => taskInfo.getRawDeviceID(d.id) === i)
+          if (index < 0) {
+            await this.addDevice(i)
+          }
+        } else {
+          const index = this.deviceList.findIndex(d => taskInfo.getRawDeviceID(d.id) === i)
+          if (index > 0) {
+            await this.removeDevice(this.deviceList[index])
+          }
+        }
       }
+
+      taskInfo.getDeviceList().length = 0
+      taskInfo.getDeviceList().push({
+        id: -1,
+        name: 'Time',
+      })
+      taskInfo.getDeviceList().push(...this.deviceList)
     },
     startDevice: async function (device) {
-      await chartData.defaultChartGenerator(device.id, null, 'device')
       if (!taskInfo.getDeviceInfo(device.id).info.isSync) {
         if (taskInfo.getDeviceInfo(device.id).info.library_name.startsWith('Neulive')) {
+          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),
             instruction: 'record',
           }))
+          this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+            header: 'device_instruction/0',
+            device: taskInfo.getRawDeviceID(device.id),
+            instruction: 'stimulate',
+          }))
+          this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+            header: 'device_parameter/0',
+            device: taskInfo.getRawDeviceID(device.id),
+            parameter: 'STIMULATING',
+            content: 1,
+          }))
+          taskInfo.getTaskInfo().deviceList[(taskInfo.getRawDeviceID(device.id)).toString()].parameterSet.STIMULATING = 1
+
+          device.isStimulate = true
         } else if (taskInfo.getDeviceInfo(device.id).info.library_name.startsWith('Elite')) {
-          console.log('elite')
+          const e1 = parseInt((taskInfo.getDeviceInfo(device.id).parameterSet.DPV_e_1 - 25000) / 5)
+          const e2 = parseInt((taskInfo.getDeviceInfo(device.id).parameterSet.DPV_e_2 - 25000) / 5)
+          const eFinal = parseInt((taskInfo.getDeviceInfo(device.id).parameterSet.DPV_e_final - 25000) / 5)
+          const isDPVMode = taskInfo.getDeviceInfo(device.id).parameterSet.MODE === 15
+          if (isDPVMode) {
+            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
+            }
+          }
+
+          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),
             instruction: 'start',
           }))
         }
-        device.stopping = false
+        // device.stopping = false
         device.isSync = true
         this.$emit('refreshSetting')
         // ### show device info
-        console.log(taskInfo.getDeviceInfo(device.id))
+        api.task.update({
+          device_config: taskInfo.getTaskInfo().deviceList,
+        })
+        //  // console.log(taskInfo.getDeviceInfo(device.id))
       }
     },
     stopDevice: async function (device) {
       await dataStreamBuffer.removeByDevice(taskInfo.getRawDeviceID(device.id))
       if (taskInfo.getDeviceInfo(device.id).info.isSync) {
         if (taskInfo.getDeviceInfo(device.id).info.library_name.startsWith('Neulive')) {
+          this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+            header: 'device_instruction/0',
+            device: taskInfo.getRawDeviceID(device.id),
+            instruction: 'stop_stimulate',
+          }))
           this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
             header: 'device_instruction/0',
             device: taskInfo.getRawDeviceID(device.id),
             instruction: 'stop_record',
           }))
+          this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+            header: 'device_parameter/0',
+            device: taskInfo.getRawDeviceID(device.id),
+            parameter: 'STIMULATING',
+            content: 0,
+          }))
+          device.isStimulate = false
         } else if (taskInfo.getDeviceInfo(device.id).info.library_name.startsWith('Elite')) {
           this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
             header: 'device_instruction/0',
@@ -134,7 +208,7 @@ export default {
             instruction: 'interrupt',
           }))
         }
-        device.stopping = true
+        // device.stopping = true
       }
     },
     detectDevice: function (device) {
@@ -149,28 +223,48 @@ export default {
           device: taskInfo.getRawDeviceID(device.id),
           instruction: 'VIS_DEVICE_DONE',
         }))
+        this.$refs.pdlist_ref.recoverDetectButton()
       }, 5000)
     },
-    startRecord: async function (device) {
-      await chartData.defaultChartGenerator(device.id, null, 'device')
+    record: async function (device) {
+      if (taskInfo.getDeviceInfo(device.id).parameterSet.CH_NUMBER === 0) {
+        this.pageToast('[Recording] Please select recording channels.')
+        return false
+      }
+      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',
+          device: taskInfo.getRawDeviceID(device.id),
+          instruction: 'record',
+        }))
         device.isSync = true
+        // device.stopping = false
         this.$emit('refreshSetting')
+        api.task.update({
+          device_config: taskInfo.getTaskInfo().deviceList,
+        })
 
         // ### show device info
-        console.log(taskInfo.getDeviceInfo(device.id))
+        //  // console.log(taskInfo.getDeviceInfo(device.id))
       }
     },
     stopRecord: function (device) {
       dataStreamBuffer.removeByDevice(taskInfo.getRawDeviceID(device.id))
       if (taskInfo.getDeviceInfo(device.id).info.isSync) {
-        // this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
-        //   header: 'device_instruction/0',
-        //   device: taskInfo.getRawDeviceID(device.id),
-        //   instruction: 'interrupt',
-        // }))
+        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+          header: 'device_instruction/0',
+          device: taskInfo.getRawDeviceID(device.id),
+          instruction: 'stop_record',
+        }))
       }
-      // device.isSync = false
+      device.isSync = false
+      // device.stopping = true
     },
     sti: function (device) {
       this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
@@ -184,7 +278,19 @@ export default {
         parameter: 'STIMULATING',
         content: 1,
       }))
+      taskInfo.getTaskInfo().deviceList[(taskInfo.getRawDeviceID(device.id)).toString()].parameterSet.STIMULATING = 1
+
+      api.task.update({
+        device_config: taskInfo.getTaskInfo().deviceList,
+      })
       device.isStimulate = true
+      const stiExTime = taskInfo.getDeviceInfo(device.id).parameterSet.REPEAT_INTERVAL_littleEndian * taskInfo.getDeviceInfo(device.id).parameterSet.REPEAT_TIME_littleEndian
+      clearTimeout(this.stiTimeOut)
+      if (taskInfo.getDeviceInfo(device.id).parameterSet.CONTINUOUS_STI < 0) {
+        this.stiTimeOut = setTimeout(() => {
+          this.stiStop(device)
+        }, (stiExTime + 3000))
+      }
     },
     stiStop: function (device) {
       this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
@@ -199,6 +305,7 @@ export default {
         content: 0,
       }))
       device.isStimulate = false
+      clearTimeout(this.stiTimeOut)
     },
     fastSettle: function (device) {
       this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
@@ -207,42 +314,23 @@ export default {
         instruction: 'FAST_SET',
       }))
     },
-    // addDevice: async function () {
-    //   if (this.deviceSelect.id == null) {
-    //     return false
-    //   }
-    //   await taskInfo.getTaskInfo().deviceAddrList.push(taskInfo.getDeviceInfoByRawID(this.deviceSelect.id).info.device_address)
-    //   await taskInfo.getTaskInfo().taskDeviceID.push(this.deviceSelect.id)
-    //   const _address = this.GLOBAL.transMac(taskInfo.getDeviceInfoByRawID(this.deviceSelect.id).info.device_address)
-
-    //   const pic = taskInfo.getDevicePic(taskInfo.getDeviceInfoByRawID(this.deviceSelect.id).info.library_name)
-    //   let type = ''
-    //   if (taskInfo.getDeviceInfoByRawID(this.deviceSelect.id).info.library_name.indexOf('Elite') >= 0) {
-    //     type = 'Elite'
-    //   } else if (taskInfo.getDeviceInfoByRawID(this.deviceSelect.id).info.library_name.indexOf('Neulive') >= 0) {
-    //     type = 'Neulive'
-    //   }
-
-    //   const _device = {
-    //     id: taskInfo.getTaskInfo().taskDeviceID.indexOf(this.deviceSelect.id),
-    //     name: '[' + taskInfo.getTaskInfo().taskDeviceID.indexOf(this.deviceSelect.id) + '] ' + taskInfo.getDeviceInfoByRawID(this.deviceSelect.id).info.device_name,
-    //     addr: taskInfo.getDeviceInfoByRawID(this.deviceSelect.id).info.device_address,
-    //     address: _address,
-    //     picture: pic,
-    //     type: type,
-    //     isSync: taskInfo.getDeviceInfoByRawID(this.deviceSelect.id).info.isSync,
-    //     stopping: false,
-    //   }
-    //   this.deviceList.push(_device)
-    //   this.deviceSelect = ''
-    //   taskInfo.updateAllList()
-    //   this.$emit('add', _device.id)
-    // },
+    sdCardStatus: function (device) {
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_sd_card_status/0',
+        device: taskInfo.getRawDeviceID(device.id),
+      }))
+    },
     addDevice: async function (selectID) {
       if (selectID == null) {
         return false
       }
-
+      const addr = taskInfo.getDeviceInfoByRawID(selectID).info.device_address
+      if (addr.length === 0) {
+        return false
+      }
+      if (taskInfo.getTaskInfo().taskDeviceID.indexOf(selectID) > 0) {
+        return false
+      }
       await taskInfo.getTaskInfo().deviceAddrList.push(taskInfo.getDeviceInfoByRawID(selectID).info.device_address)
       await taskInfo.getTaskInfo().taskDeviceID.push(selectID)
       const _address = this.GLOBAL.transMac(taskInfo.getDeviceInfoByRawID(selectID).info.device_address)
@@ -260,11 +348,16 @@ export default {
         name: '[' + taskInfo.getTaskInfo().taskDeviceID.indexOf(selectID) + '] ' + taskInfo.getDeviceInfoByRawID(selectID).info.device_name,
         addr: taskInfo.getDeviceInfoByRawID(selectID).info.device_address,
         address: _address,
+        library_name: taskInfo.getDeviceInfoByRawID(selectID).info.library_name,
+        library_version: taskInfo.getDeviceInfoByRawID(selectID).info.library_version,
         picture: pic,
         type: type,
         isSync: taskInfo.getDeviceInfoByRawID(selectID).info.isSync,
         isStimulate: taskInfo.getDeviceInfoByRawID(selectID).info.isStimulate,
-        stopping: false,
+        sdCardStatus: taskInfo.getDeviceInfoByRawID(selectID).info.sd_card_status,
+        transmission_type: taskInfo.getDeviceInfoByRawID(selectID).info.transmission_type,
+        stimulation_last_time: taskInfo.getDeviceInfoByRawID(selectID).info.stimulation_last_time,
+        // stopping: false,
       }
       this.deviceList.push(_device)
       this.deviceSelect = ''
@@ -287,6 +380,29 @@ export default {
       taskInfo.updateAllList()
       this.$emit('remove', device.id)
     },
+    clearDevice: async function () {
+      taskInfo.getTaskInfo().deviceAddrList.length = 0
+      taskInfo.getTaskInfo().taskDeviceID.length = 0
+      this.deviceList.length = 0
+      taskInfo.updateAllList()
+    },
+    checkStiStatus: function () {
+      this.deviceList.forEach(device => {
+        if (device.stimulation_last_time > 0) {
+          const stiExTime = taskInfo.getDeviceInfo(device.id).parameterSet.REPEAT_INTERVAL_littleEndian * taskInfo.getDeviceInfo(device.id).parameterSet.REPEAT_TIME_littleEndian
+          const now = parseInt(Date.now() / 1000)
+          let stiExTimeOut = (stiExTime / 1000) - (now - parseInt(parseFloat(device.stimulation_last_time)))
+          stiExTimeOut = stiExTimeOut > 0 ? stiExTimeOut : 0
+          console.log(stiExTime, now, parseInt(parseFloat(device.stimulation_last_time)), stiExTimeOut)
+          clearTimeout(this.stiTimeOut)
+          if (taskInfo.getDeviceInfo(device.id).parameterSet.CONTINUOUS_STI < 0) {
+            this.stiTimeOut = setTimeout(() => {
+              this.stiStop(device)
+            }, (stiExTimeOut * 1000) + 3000)
+          }
+        }
+      })
+    },
     generateChart: function (device) {
       this.$emit('add', device.id)
     },
@@ -302,17 +418,20 @@ 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()
+    pageToast: function (mes) {
+      this.showToast(
+        mes,
+        {
+          icon: 'fa-bell',
+          position: 'bottom-right',
+          duration: 4000,
+        },
+      )
+    },
+
+    ...mapActions('taskContent', [
+      taskTypes.chart.defaultChartGenerator,
+    ]),
   },
   watch: {
   },

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

@@ -0,0 +1,183 @@
+<template>
+  <div class="flex sm12 xl12 md12 xs12">
+    <recording-site :ref="'elewindow_ref'" :deviceList="deviceList" />
+    <va-accordion v-for="device in deviceList" :key="device.id">
+      <va-collapse class="mb-2">
+        <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">
+              <va-item-label>
+                {{ '[' + device.id + '] ' + device.library_name }}
+              </va-item-label>
+
+              <va-item-label caption>
+                {{ device.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="record(device)" v-if="device.library_name == 'Neulive3.5-REC' && !device.isSync" color="primary" class="px-2 py-0 mr-0 no-dark-style-va-button" small>RECORD</va-button>
+                <va-button @click.stop="stopRecord(device)" v-if="device.library_name == 'Neulive3.5-REC' && device.isSync" color="danger" class="px-2 py-0 mr-0 no-dark-style-va-button" small>STOP REC</va-button>
+                <va-button @click.stop="stimulate(device)" v-if="device.library_name == 'Neulive3.5-STI' && !device.isStimulate" color="warning" class="px-2 py-0 mr-0 no-dark-style-va-button" small>STIMULATE</va-button>
+                <va-button @click.stop="stopStimulate(device)" v-if="device.library_name == 'Neulive3.5-STI' && device.isStimulate" color="danger" class="px-2 py-0 mr-0" small>STOP STI</va-button>
+                <va-button @click.stop="fastSettle(device)" v-if="device.library_name == 'Neulive3.5-REC'" color="info" class="px-2 py-0 mr-0 no-dark-style-va-button" small>R</va-button>
+              </va-item-label>
+            </va-item-section>
+          </va-item>
+        </span>
+        <div slot="body">
+          <div class="mt-0 mb-0" style="height: 350px; overflow-y: scroll; overflow-x: hidden;" :key="'detail' + device.id">
+            <!-- <div style="text-align: center;">
+              <va-button @click.stop="generateChart(device)" class="pl-2 pr-2 mr-0 no-dark-style-va-button" small>GENERATE MAPPING CHART</va-button>
+            </div> -->
+            <div>
+              <file-control-window :ref="'fcwindow_ref'" :deviceID="device.id" class="pl-0 pr-0" />
+            </div>
+            <div v-if="device.type == 'Neulive'">
+              <neulive-parameter-window-g-m :ref="'npwindow_ref'" :deviceID="device.id" class="pl-0 pr-0" @record="record_start(device)" @record_stop="record_stop(device)"/>
+            </div>
+          </div>
+        </div>
+      </va-collapse>
+    </va-accordion>
+  </div>
+</template>
+
+<script>
+// import NeuliveParameterWindow from '../parameter/NeuliveParameterWindow'
+import RecordingSite from '@/components/task/content/parameter/neulive-gimer/RecordingSite.vue'
+import NeuliveParameterWindowGM from '@/components/task/content/parameter/neulive-gimer/NeuliveParameterWindowGM'
+import FileControlWindow from '../../meta/FileControlWindow'
+import { mapActions } from 'vuex'
+import types from '@/store/modules/task/content/types'
+
+export default {
+  name: 'TaskDeviceList',
+  components: {
+    RecordingSite,
+    NeuliveParameterWindowGM,
+    FileControlWindow,
+  },
+  props: {
+    deviceList: {
+      type: Array,
+      required: true,
+    },
+  },
+  data () {
+    return {
+      showDeleteModal: false,
+      selectDevice: null,
+      deviceStopping: false,
+    }
+  },
+  computed: {
+  },
+  methods: {
+    removeCheck: function (device) {
+      this.selectDevice = device
+      this.showDeleteModal = true
+    },
+    remove: function () {
+      this.$emit('remove', this.selectDevice)
+    },
+    record: async function (device) {
+      this.setArchiveSettings()
+      setTimeout(() => {
+        this.$emit('record', device)
+      }, 500)
+      this.pageToast('The device ' + device.name + ' has been started.')
+    },
+    stopRecord: function (device) {
+      this.$emit('stopRecord', device)
+      this.pageToast('The device ' + device.name + ' has been stopped.')
+    },
+    generateChart: function (device) {
+      this.$emit('generate', device)
+    },
+    setArchiveSettings: function () {
+      this.$refs.fcwindow_ref.forEach(ref => {
+        ref.setArchiveSettings()
+      })
+    },
+    refresh: function () {
+      //  console.log(this.deviceList)
+      this.$nextTick(() => {
+        if (this.$refs.elewindow_ref != null) {
+          this.$refs.elewindow_ref.refresh()
+        }
+        if (this.$refs.fcwindow_ref != null) {
+          this.$refs.fcwindow_ref.forEach(ref => {
+            ref.refresh()
+          })
+        }
+        if (this.$refs.npwindow_ref != null) {
+          this.$refs.npwindow_ref.forEach(ref => {
+            ref.refresh()
+          })
+        }
+      })
+    },
+    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.')
+    },
+    stimulate: async function (device) {
+      const checkParam = await this.checkIfStimulationSetDoneParam({ device: device })
+      const status = checkParam.status
+      const message = checkParam.message
+      if (status === true) {
+        this.$emit('sti', device)
+      } else {
+        this.pageToast('Stimulation cannot be started because:' + message)
+      }
+    },
+    stopStimulate: function (device) {
+      this.$emit('sti_stop', device)
+      this.pageToast('The device ' + device.name + ' stop stimulate.')
+    },
+    fastSettle: function (device) {
+      this.$emit('fast_settle', device)
+      this.pageToast('The device ' + device.name + ' fast settle.')
+    },
+    recoverDetectButton () {
+      document.getElementById('detectButton').className += ' no-dark-style-va-button'
+    },
+    ...mapActions('taskContent', [types.param.checkIfRecordingSetDone, types.param.checkIfStimulationSetDone, types.param.checkIfDeviceSetDone]),
+  },
+  destroyed () {
+    // this.deviceList.length = 0
+  },
+}
+</script>
+
+<style lang="scss">
+  .no-dark-style-va-button {
+    &:focus {
+      filter: brightness(100%);
+    }
+  }
+</style>

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

@@ -0,0 +1,387 @@
+<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-g-m
+          :ref="'pdlist_ref'"
+          :deviceList="deviceList"
+          @record="record($event)"
+          @stopRecord="stopRecord($event)"
+          @sti="sti($event)" @sti_stop="stiStop($event)"
+          @fast_settle="fastSettle($event)"
+          @generate="generateChart($event)"
+          @detect="detectDevice($event)"
+        />
+      </div>
+
+    </va-card>
+  </div>
+</template>
+
+<script>
+import { FulfillingBouncingCircleSpinner } from 'epic-spinners'
+// import TaskDeviceList from './TaskDeviceList'
+import TaskDeviceListGM from './TaskDeviceListGM'
+import { taskInfo } from '@/data/task/TaskInfo'
+import { dataStreamBuffer } from '@/data/task/DataStreamBuffer'
+import api from '@/data/api'
+import { mapActions } from 'vuex'
+import { mapFields } from 'vuex-map-fields'
+import taskTypes from '@/store/modules/task/content/types'
+
+export default {
+  name: 'TaskDevices',
+  components: {
+    TaskDeviceListGM,
+    FulfillingBouncingCircleSpinner,
+    // TaskDeviceList,
+  },
+  props: {
+    cardclass: {
+      type: Array,
+      default: function () {
+        return ['xs12', 'md12', 'xl12', 'sm12']
+      },
+    },
+  },
+  created () {
+  },
+  data () {
+    return {
+      deviceSelect: '',
+      deviceOptions: taskInfo.getDeviceListNotRegister(),
+      // deviceList: this.deviceList,
+      state: {
+        LOADING: false,
+      },
+      stiTimeOut: null,
+    }
+  },
+  computed: {
+    ...mapFields('taskContent', [
+      'deviceList',
+    ]),
+  },
+  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
+      //  console.log(this.deviceOptions)
+      for (let i = 0; i <= 11; i++) {
+        if (taskInfo.getDeviceInfoByRawID(i).info.status === 'connected') {
+          const index = this.deviceList.findIndex(d => taskInfo.getRawDeviceID(d.id) === i)
+          if (index < 0) {
+            await this.addDevice(i)
+          }
+        } else {
+          const index = this.deviceList.findIndex(d => taskInfo.getRawDeviceID(d.id) === i)
+          if (index > 0) {
+            await this.removeDevice(this.deviceList[index])
+          }
+        }
+      }
+
+      taskInfo.getDeviceList().length = 0
+      taskInfo.getDeviceList().push({
+        id: -1,
+        name: 'Time',
+      })
+      taskInfo.getDeviceList().push(...this.deviceList)
+    },
+    detectDevice: function (device) {
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_instruction/0',
+        device: taskInfo.getRawDeviceID(device.id),
+        instruction: 'VIS_DEVICE_DETECT',
+      }))
+      setTimeout(() => {
+        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+          header: 'device_instruction/0',
+          device: taskInfo.getRawDeviceID(device.id),
+          instruction: 'VIS_DEVICE_DONE',
+        }))
+        this.$refs.pdlist_ref.recoverDetectButton()
+      }, 5000)
+    },
+    record: async function (device) {
+      const test = await this.taskGimerCheckDeviceStatus({
+        deviceList: this.deviceList,
+        type: 'allFree',
+        libraryNameREC: 'Neulive3.5-REC',
+        libraryNameSTI: 'Neulive3.5-STI',
+      })
+      if (!test) {
+        this.pageToast('[Stimulation] Please connect "Neulive3.5-REC" and "Neulive3.5-STI".')
+        return false
+      }
+      const channelSet = taskInfo.getDeviceInfo(device.id).parameterSet.RECORDING_CH.toString(2).split('')
+      const channelLen = channelSet.filter(function (value) {
+        return parseInt(value) > 0
+      }).length
+      if (channelLen === 0) {
+        this.pageToast('[Recording] Please select recording channels.')
+        return false
+      }
+      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({
+            header: 'device_instruction/0',
+            device: taskInfo.getRawDeviceID(_device.id),
+            instruction: 'SET_POWER_SAVE_EN_LOW',
+          }))
+        }
+      })
+      if (!taskInfo.getDeviceInfo(device.id).info.isSync) {
+        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+          header: 'device_instruction/0',
+          device: taskInfo.getRawDeviceID(device.id),
+          instruction: 'record',
+        }))
+        device.isSync = true
+        // device.stopping = false
+        this.$emit('refreshSetting')
+        api.task.update({
+          device_config: taskInfo.getTaskInfo().deviceList,
+        })
+
+        // ### show device info
+        //  console.log(taskInfo.getDeviceInfo(device.id))
+      }
+    },
+    stopRecord: async function (device) {
+      const test = await this.taskGimerCheckDeviceStatus({
+        deviceList: this.deviceList,
+        type: 'stiRun',
+        libraryNameREC: 'Neulive3.5-REC',
+        libraryNameSTI: 'Neulive3.5-STI',
+      })
+      if (test) {
+        this.pageToast('[Recording] Please stop stimulation first.')
+        return false
+      }
+      dataStreamBuffer.removeByDevice(taskInfo.getRawDeviceID(device.id))
+      if (taskInfo.getDeviceInfo(device.id).info.isSync) {
+        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+          header: 'device_instruction/0',
+          device: taskInfo.getRawDeviceID(device.id),
+          instruction: 'stop_record',
+        }))
+      }
+      device.isSync = false
+      this.deviceList.forEach(_device => {
+        if (_device.library_name === 'Neulive3.5-STI') {
+          this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+            header: 'device_instruction/0',
+            device: taskInfo.getRawDeviceID(_device.id),
+            instruction: 'SET_POWER_SAVE',
+          }))
+        }
+      })
+      // device.stopping = true
+    },
+    sti: async function (device) {
+      const test = await this.taskGimerCheckDeviceStatus({
+        deviceList: this.deviceList,
+        type: 'recRun',
+        libraryNameREC: 'Neulive3.5-REC',
+        libraryNameSTI: 'Neulive3.5-STI',
+      })
+      if (!test) {
+        this.pageToast('[Stimulation] Please run recording first.')
+        return false
+      }
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_instruction/0',
+        device: taskInfo.getRawDeviceID(device.id),
+        instruction: 'stimulate',
+      }))
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_parameter/0',
+        device: taskInfo.getRawDeviceID(device.id),
+        parameter: 'STIMULATING',
+        content: 1,
+      }))
+      taskInfo.getTaskInfo().deviceList[(taskInfo.getRawDeviceID(device.id)).toString()].parameterSet.STIMULATING = 1
+
+      api.task.update({
+        device_config: taskInfo.getTaskInfo().deviceList,
+      })
+      device.isStimulate = true
+      const stiExTime = taskInfo.getDeviceInfo(device.id).parameterSet.REPEAT_INTERVAL_littleEndian * taskInfo.getDeviceInfo(device.id).parameterSet.REPEAT_TIME_littleEndian
+      clearTimeout(this.stiTimeOut)
+      this.stiTimeOut = setTimeout(() => {
+        this.stiStop(device)
+      }, (stiExTime + 3000))
+      this.pageToast('The device ' + device.name + ' start stimulate.')
+    },
+    stiStop: function (device) {
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_instruction/0',
+        device: taskInfo.getRawDeviceID(device.id),
+        instruction: 'stop_stimulate',
+      }))
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_parameter/0',
+        device: taskInfo.getRawDeviceID(device.id),
+        parameter: 'STIMULATING',
+        content: 0,
+      }))
+      device.isStimulate = false
+      clearTimeout(this.stiTimeOut)
+    },
+    fastSettle: function (device) {
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_instruction/0',
+        device: taskInfo.getRawDeviceID(device.id),
+        instruction: 'FAST_SET',
+      }))
+    },
+    addDevice: async function (selectID) {
+      if (selectID == null) {
+        return false
+      }
+      const addr = taskInfo.getDeviceInfoByRawID(selectID).info.device_address
+      if (addr.length === 0) {
+        return false
+      }
+      if (taskInfo.getTaskInfo().taskDeviceID.indexOf(selectID) > 0) {
+        return false
+      }
+      await taskInfo.getTaskInfo().deviceAddrList.push(taskInfo.getDeviceInfoByRawID(selectID).info.device_address)
+      await taskInfo.getTaskInfo().taskDeviceID.push(selectID)
+      const _address = this.GLOBAL.transMac(taskInfo.getDeviceInfoByRawID(selectID).info.device_address)
+
+      const pic = taskInfo.getDevicePic(taskInfo.getDeviceInfoByRawID(selectID).info.library_name)
+      let type = ''
+      if (taskInfo.getDeviceInfoByRawID(selectID).info.library_name.indexOf('Elite') >= 0) {
+        type = 'Elite'
+      } else if (taskInfo.getDeviceInfoByRawID(selectID).info.library_name.indexOf('Neulive') >= 0) {
+        type = 'Neulive'
+      }
+
+      const _device = {
+        id: taskInfo.getTaskInfo().taskDeviceID.indexOf(selectID),
+        name: '[' + taskInfo.getTaskInfo().taskDeviceID.indexOf(selectID) + '] ' + taskInfo.getDeviceInfoByRawID(selectID).info.device_name,
+        addr: taskInfo.getDeviceInfoByRawID(selectID).info.device_address,
+        address: _address,
+        library_name: taskInfo.getDeviceInfoByRawID(selectID).info.library_name,
+        library_version: taskInfo.getDeviceInfoByRawID(selectID).info.library_version,
+        picture: pic,
+        type: type,
+        isSync: taskInfo.getDeviceInfoByRawID(selectID).info.isSync,
+        isStimulate: taskInfo.getDeviceInfoByRawID(selectID).info.isStimulate,
+        stimulation_last_time: taskInfo.getDeviceInfoByRawID(selectID).info.stimulation_last_time,
+        sdCardStatus: taskInfo.getDeviceInfoByRawID(selectID).info.sd_card_status,
+        // stopping: false,
+      }
+      this.deviceList.push(_device)
+      //  console.log('sss', this.deviceList)
+      this.deviceSelect = ''
+      taskInfo.updateAllList()
+      this.$emit('add', _device.id)
+    },
+    removeDevice: async function (device) {
+      taskInfo.getTaskInfo().deviceAddrList.forEach(addr => {
+        if (addr === device.addr) {
+          taskInfo.getTaskInfo().deviceAddrList.splice(taskInfo.getTaskInfo().deviceAddrList.indexOf(addr), 1)
+        }
+      })
+      taskInfo.getTaskInfo().taskDeviceID.forEach(realID => {
+        if (realID === device.id) {
+          taskInfo.getTaskInfo().taskDeviceID.splice(taskInfo.getTaskInfo().taskDeviceID.indexOf(realID), 1)
+        }
+      })
+      this.deviceList.splice(this.deviceList.indexOf(device), 1)
+      this.deviceSelect = ''
+      taskInfo.updateAllList()
+      this.$emit('remove', device.id)
+    },
+    checkStiStatus: function () {
+      this.deviceList.forEach(device => {
+        if (device.stimulation_last_time > 0) {
+          const stiExTime = taskInfo.getDeviceInfo(device.id).parameterSet.REPEAT_INTERVAL_littleEndian * taskInfo.getDeviceInfo(device.id).parameterSet.REPEAT_TIME_littleEndian
+          const now = parseInt(Date.now() / 1000)
+          let stiExTimeOut = (stiExTime / 1000) - (now - parseInt(parseFloat(device.stimulation_last_time)))
+          stiExTimeOut = stiExTimeOut > 0 ? stiExTimeOut : 0
+          console.log(stiExTime, now, parseInt(parseFloat(device.stimulation_last_time)), stiExTimeOut)
+          clearTimeout(this.stiTimeOut)
+          this.stiTimeOut = setTimeout(() => {
+            this.stiStop(device)
+          }, (stiExTimeOut * 1000) + 3000)
+        }
+      })
+    },
+    clearDevice: async function () {
+      taskInfo.getTaskInfo().deviceAddrList.length = 0
+      taskInfo.getTaskInfo().taskDeviceID.length = 0
+      this.deviceList.length = 0
+      taskInfo.updateAllList()
+    },
+    generateChart: function (device) {
+      this.$emit('add', device.id)
+    },
+    setArchiveSettings: function () {
+      if (this.$refs.pdlist_ref != null) {
+        this.$refs.pdlist_ref.setArchiveSettings()
+      }
+    },
+    refresh: function () {
+      this.$nextTick(() => {
+        if (this.$refs.pdlist_ref != null) {
+          this.$refs.pdlist_ref.refresh()
+        }
+      })
+    },
+    pageToast: function (mes) {
+      this.showToast(
+        mes,
+        {
+          icon: 'fa-bell',
+          position: 'bottom-right',
+          duration: 4000,
+        },
+      )
+    },
+
+    ...mapActions('taskContent', [
+      taskTypes.gimer.checkDeviceStatus,
+      taskTypes.chart.defaultChartGenerator,
+    ]),
+  },
+  async mounted () {
+  },
+  destroyed () {
+  },
+  watch: {
+  },
+}
+</script>

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',
@@ -122,6 +123,7 @@ export default {
   },
   data () {
     return {
+      deviceList: [],
       showFormulaModal: false,
       formulaSelect: '',
       formulaOptions: [
@@ -172,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(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.')
@@ -191,6 +198,10 @@ export default {
         },
       )
     },
+
+    ...mapActions('taskContent', [
+      taskTypes.chart.defaultChartGenerator,
+    ]),
   },
   mounted () {
     // this.pageMqttSub()

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

@@ -1,37 +1,25 @@
 <template>
-  <div class="flex mt-0 pt-0">
-    <div>
-      <div class="row flex sm12 xl12 md12 xs12">
-        <div>
-          <div class="flex">
-            <va-tree-root>
-              <div class="row pt-0 pb-0">
-                <div class="flex sm12 xl12 md12 xs12">
-                  <va-input
-                    @mouseup.native="fileNameChange(fileNameInput)"
-                    @mouseleave.native="fileNameChange(fileNameInput)"
-                    @touchend.native="fileNameChange(fileNameInput)"
-                    @keyup.enter="fileNameChange(fileNameInput)"
-                    v-model="fileNameInput"
-                    :label="'FILE NAME'"
-                    style="width: 200px;"
-                  >
-                  </va-input>
-                  <va-select
-                    :on-change="directorySelect(directory)"
-                    :label="'DIRECTORY'"
-                    v-model="directory"
-                    textBy="name"
-                    :options="directoryOptions"
-                    noClear
-                    style="width: 200px;"
-                  />
-                </div>
-              </div>
-            </va-tree-root>
-          </div>
-        </div>
-      </div>
+  <div class="flex row mt-0 pt-0 sm12 xl12 md12 xs12">
+    <div class="flex sm6 xl6 md6 xs6">
+      <va-select
+        :on-change="directorySelect(directory)"
+        :label="'DIRECTORY'"
+        v-model="directory"
+        textBy="name"
+        :options="directoryOptions"
+        noClear
+      />
+    </div>
+    <div class="flex sm6 xl6 md6 xs6">
+      <va-input
+        @mouseup.native="fileNameChange(fileNameInput)"
+        @mouseleave.native="fileNameChange(fileNameInput)"
+        @touchend.native="fileNameChange(fileNameInput)"
+        @keyup.enter="fileNameChange(fileNameInput)"
+        v-model="fileNameInput"
+        :label="'FILE NAME'"
+      >
+      </va-input>
     </div>
 
   </div>
@@ -76,26 +64,26 @@ export default {
     fileNameChange: async function (name) {
       if (this.enableSetting) {
         if (this.deviceInfo.info.isSync === false) {
-          let fileNameCount = await api.getMetaFilesByName(name)
+          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.getMetaFilesByName(fileName)
+              fileNameCount = await api.meta.getByName(fileName)
               duplicateCount += 1
             }
             this.fileNameInput = fileName
-          }
 
-          if (name !== this.deviceInfo.info.recording_file_name) {
-            this.deviceInfo.info.recording_file_name = name
-            this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
-              header: 'device_recording_file_name/0',
-              device: taskInfo.getRawDeviceID(this.deviceID),
-              content: name,
-            }))
+            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,
+              }))
+            }
           }
         }
       }
@@ -143,7 +131,7 @@ export default {
         this.fileNameChange(this.fileNameInput)
 
         // directory init
-        const collection = await api.getCollectionsAll()
+        const collection = await api.collection.getAll()
         this.directoryOptions = collection.data.filter(el => el.name !== 'root')
 
         if (Object.keys(this.deviceInfo.info.parent).length === 0) {
@@ -178,7 +166,7 @@ export default {
   },
   mounted () {
     this.pageInit()
-    this.enableTimer = setTimeout(this.enableChangeFile, 1500)
+    this.enableTimer = setTimeout(this.enableChangeFile, 1000)
   },
   destroyed () {
     clearTimeout(this.enableTimer)

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

@@ -214,8 +214,8 @@
           <div class="row">
             <div class="flex sm12 xl12 md12 xs12">
               <div class="flex row align--center">
-                <va-button slot="append" class="mr-2 pa-1 shrink" small @click="cycleNoNumberChange(0)">
-                  0
+                <va-button slot="append" class="mr-2 pa-1 shrink" small @click="cycleNoNumberChange(1)">
+                  1
                 </va-button>
                 <va-input
                   @keyup.enter="cycleNoNumberChange(cycleNoNumberInput)"
@@ -235,7 +235,7 @@
                 class="flex sm12 xl12 md12 xs12"
                 value-visible
                 v-model="cycleNoNumber"
-                :min="0"
+                :min="1"
                 :max="249"
               />
             </div>
@@ -718,8 +718,8 @@
           <div class="row">
             <div class="flex sm12 xl12 md12 xs12">
               <div class="flex row align--center">
-                <va-button slot="append" class="mr-2 pa-1 shrink" small @click="cycleNoNumberChange(0)">
-                  0
+                <va-button slot="append" class="mr-2 pa-1 shrink" small @click="cycleNoNumberChange(1)">
+                  1
                 </va-button>
                 <va-input
                   @keyup.enter="cycleNoNumberChange(cycleNoNumberInput)"
@@ -739,7 +739,7 @@
                 class="flex sm12 xl12 md12 xs12"
                 value-visible
                 v-model="cycleNoNumber"
-                :min="0"
+                :min="1"
                 :max="249"
               />
             </div>

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

@@ -0,0 +1,565 @@
+<template>
+  <div>
+    <div class="row flex sm12 xl12 md12 xs12 align--center my-0 py-0">
+      <va-select
+        @input="workingModeSelectChange(workingModeSelect)"
+        :label="'WORKING MODE'"
+        v-model="workingModeSelect"
+        textBy="description"
+        :options="workingModeOptions"
+        noClear
+      />
+    </div>
+    <!-- EIS -->
+    <div v-if="workingModeSelect != null && workingModeSelect.id == 0">
+      <d-c-volt :ref="'DCVolt'" :deviceID="deviceID" :parameterName="'DC_BIAS'" @parameterChange="deviceParameterChange($event)" />
+      <a-c-amplitude :ref="'ACAmplitude'" :deviceID="deviceID" :parameterName="'AC_AMP'" @parameterChange="deviceParameterChange($event)" />
+      <freq-range :ref="'FreqRange'" :deviceID="deviceID" :parameterName="'FREQ'" @parameterChange="deviceParameterChange($event)" />
+      <points-per-decades :ref="'PointsPerDecades'" :deviceID="deviceID" :parameterName="'PPD'" @parameterChange="deviceParameterChange($event)" />
+      <point-spacing :ref="'PointSpacing'" :deviceID="deviceID" :parameterName="'SCALE'" @parameterChange="deviceParameterChange($event)" />
+      <delay :ref="'Delay'" :deviceID="deviceID" :parameterName="'DELAY'" @parameterChange="deviceParameterChange($event)" />
+      <average :ref="'Average'" :deviceID="deviceID" :parameterName="'AVERAGE_NUM'" @parameterChange="deviceParameterChange($event)" />
+      <current-range :ref="'CurrentRange'" :deviceID="deviceID" :parameterName="'RTIA'" @parameterChange="deviceParameterChange($event)" />
+    </div>
+    <!-- CV -->
+    <div v-if="workingModeSelect != null && workingModeSelect.id == 1">
+      <va-button
+        color="primary"
+        target="_blank"
+        @click="measureEoc()"
+        small>
+        {{measureEocButton.start}}
+      </va-button>
+      <va-button
+        color="danger"
+        target="_blank"
+        @click="measureEocStop()"
+        small>
+        {{measureEocButton.stop}}
+      </va-button>
+      <div class="flex row mt-3 pt-0 sm12 xl12 md12 xs12 align--center">
+        <div class="flex sm12 xl12 md12 xs12 pa-0 ma-0">
+          <p class="display-6">Current Range<p/>
+        </div>
+        <div class="flex sm12 xl12 md12 xs12 pa-0 ma-1" >
+          <level-button :ref="'currentRangeSelect'" :deviceID="deviceID" :options="currentRangeOptions" :parameterName="'ADC_LEVEL_I_15'" @parameterChange="deviceParameterChange($event)" />
+        </div>
+      </div>
+      <div class="flex row mt-0 pt-0 sm12 xl12 md12 xs12 align--center">
+        <div class="flex sm12 xl12 md12 xs12 pa-0 ma-0">
+          <p class="display-6">Voltage Range<p/>
+        </div>
+        <div class="flex sm12 xl12 md12 xs12 pa-0 ma-1" >
+          <level-button :ref="'voltageInRangeSelect'" :deviceID="deviceID" :options="voltageInRangeOptions" :parameterName="'ADC_LEVEL_V_IN_15'" @parameterChange="deviceParameterChange($event)" />
+        </div>
+      </div>
+      <div class="flex row mt-0 pt-0 sm12 xl12 md12 xs12 align--center">
+        <div class="flex sm12 xl12 md12 xs12 pa-0 ma-0">
+          <p class="display-6">High Z<p/>
+        </div>
+        <div class="flex sm12 xl12 md12 xs12 pa-0 ma-1" >
+          <level-button :ref="'highzSelect'" :deviceID="deviceID" :options="highzOptions" :parameterName="'CTRL_HIGH_Z_15'" @parameterChange="deviceParameterChange($event)" />
+        </div>
+      </div>
+      <div class="flex row mt-0 pt-0 sm12 xl12 md12 xs12 align--center">
+        <div class="flex sm12 xl12 md12 xs12 pa-0 ma-0">
+          <p class="display-6">E Initial<p/>
+        </div>
+        <div class="flex sm12 xl12 md12 xs12 pa-0 ma-1" >
+          <volt-range :ref="'voltInitialNumber'" :deviceID="deviceID" :parameterName="'VOLT_INITIAL'" :minValue="-1.8" :maxValue="2" @parameterChange="deviceParameterChange($event)" />
+        </div>
+      </div>
+      <div class="flex row mt-0 pt-0 sm12 xl12 md12 xs12 align--center">
+        <div class="flex sm12 xl12 md12 xs12 pa-0 ma-0">
+          <p class="display-6">E1<p/>
+        </div>
+        <div class="flex sm12 xl12 md12 xs12 pa-0 ma-1" >
+          <volt-range :ref="'voltMaxNumber'" :deviceID="deviceID" :parameterName="'VOLT_MAX'" :minValue="-1.8" :maxValue="2" @parameterChange="deviceParameterChange($event)" />
+        </div>
+      </div>
+      <div class="flex row mt-0 pt-0 sm12 xl12 md12 xs12 align--center">
+        <div class="flex sm12 xl12 md12 xs12 pa-0 ma-0">
+          <p class="display-6">E2<p/>
+        </div>
+        <div class="flex sm12 xl12 md12 xs12 pa-0 ma-1" >
+          <volt-range :ref="'voltMinNumber'" :deviceID="deviceID" :parameterName="'VOLT_MIN'" :minValue="-1.8" :maxValue="2" @parameterChange="deviceParameterChange($event)" />
+        </div>
+      </div>
+      <div class="flex row mt-0 pt-0 sm12 xl12 md12 xs12 align--center">
+        <div class="flex sm12 xl12 md12 xs12 pa-0 ma-0">
+          <p class="display-6">Voltage Scan Rate<p/>
+        </div>
+        <div class="flex sm12 xl12 md12 xs12 pa-0 ma-1" >
+          <scan-rate-range :ref="'voltScanRateNumber'" :deviceID="deviceID" :parameterName="'Scan_Rate'" :minValue="0.01" :maxValue="1000" @parameterChange="deviceParameterChange($event)" />
+        </div>
+      </div>
+      <div class="flex row mt-0 pt-0 sm12 xl12 md12 xs12 align--center">
+        <div class="flex sm12 xl12 md12 xs12 pa-0 ma-0">
+          <p class="display-6">Resolution<p/>
+        </div>
+        <div class="flex sm12 xl12 md12 xs12 pa-0 ma-1" >
+          <resolution-range :ref="'sampleRateNumber'" :deviceID="deviceID" :parameterName="'SAMPLE_RATE'" :minValue="0.1" :maxValue="100" @parameterChange="deviceParameterChange($event)" />
+        </div>
+      </div>
+      <div class="flex row mt-0 pt-0 sm12 xl12 md12 xs12 align--center">
+        <div class="flex sm12 xl12 md12 xs12 pa-0 ma-0">
+          <p class="display-6">Cycle<p/>
+        </div>
+        <div class="flex sm12 xl12 md12 xs12 pa-0 ma-1" >
+          <cycle-range :ref="'cycleNoNumber'" :deviceID="deviceID" :parameterName="'CYCLE_NUMBER'" :minValue="1" :maxValue="50000" @parameterChange="deviceParameterChange($event)" />
+        </div>
+      </div>
+    </div>
+
+    <!-- DEV -->
+    <va-tree-category
+      v-if="workingModeSelect != null && workingModeSelect.id == 2"
+      style="font-size: 20px;"
+      :label="'RIS instruction (HEX)'">
+      <div class="row">
+        <div class="flex sm12 xl12 md12 xs12">
+          <div class="flex row align--center">
+            <va-input
+              @keyup.enter="instruParameterChange([instru.parameterName, instru.write])"
+              @blur="instruParameterChange([instru.parameterName, instru.write])"
+              class="mb-0"
+              v-model="instru.write"
+              label="Write value (0x3000FF ... )"
+              style="width: 100px;"
+              maxlength="34"
+            />
+            <va-button slot="append" class="mr-2 pa-1 shrink" style="width: 2em; height: 2em; border-radius: 50%; font-size: 20px;" small @click="sendInstr()">
+              W
+            </va-button>
+          </div>
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="flex sm12 xl12 md12 xs12">
+          <div class="flex row align--center">
+            <va-input
+              disabled="disabled"
+              class="mb-0"
+              v-model="instru.read"
+              label="Read value"
+              style="width: 100px; font-size: 30px;"
+            />
+            <va-button slot="append" class="mr-2 pa-1 shrink" style="width: 2em; height: 2em; border-radius: 50%; font-size: 20px;" small @click="readCisData()">
+              R
+            </va-button>
+          </div>
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="flex sm12 xl12 md12 xs12">
+          <div class="flex row align--center">
+            <va-input
+              disabled="disabled"
+              class="mb-0"
+              v-model="instru.notify"
+              label="Notify value"
+              style="width: 100px;"
+            />
+            <va-button slot="append" class="mr-2 pa-1 shrink" style="width: 2em; height: 2em; border-radius: 50%; font-size: 20px;" small @click="detect()">
+              N
+            </va-button>
+          </div>
+        </div>
+      </div>
+    </va-tree-category>
+
+    <va-tree-category
+      v-if="workingModeSelect != null && workingModeSelect.id == 2"
+      style="font-size: 20px;"
+      :label="'VIS & CIS instruction'">
+      <va-card>
+        <div class="row">
+          <div class="flex sm12 xl12 md12 xs12">
+            <div class="flex row align--center">
+              <va-input
+                disabled="disabled"
+                class="mb-0"
+                v-model="instru.read"
+                label="Read value"
+                style="width: 100px; font-size: 30px;"
+              />
+              <va-button slot="append" class="mr-2 pa-1 shrink" style="width: 2em; height: 2em; border-radius: 50%; font-size: 20px;" small @click="readCisData()">
+                R
+              </va-button>
+            </div>
+          </div>
+        </div>
+
+        <div>
+          <va-button class="mr-2 pa-1" style="width: 4em; height: 2em; font-size: 15px;" small @click="detect()">
+            Detect
+          </va-button>
+        </div>
+        <div>
+          <va-button class="mr-2 pa-1" style="width: 4em; height: 2em; font-size: 15px;" small @click="version()">
+            Version
+          </va-button>
+        </div>
+        <div>
+          <va-button class="mr-2 pa-1" style="width: 4em; height: 2em; font-size: 15px;" small @click="battery()">
+            Battery
+          </va-button>
+        </div>
+
+      </va-card>
+    </va-tree-category>
+  </div>
+</template>
+
+<script>
+
+import { taskInfo } from '../../../../data/task/TaskInfo.js'
+import DCVolt from '../parameter/item/EIS/DCVolt.vue'
+import ACAmplitude from '../parameter/item/EIS/ACAmplitude.vue'
+import FreqRange from '../parameter/item/EIS/FreqRange.vue'
+import PointsPerDecades from '../parameter/item/EIS/PointsPerDecades.vue'
+import PointSpacing from '../parameter/item/EIS/PointSpacing.vue'
+import Delay from '../parameter/item/EIS/Delay.vue'
+import Average from '../parameter/item/EIS/Average.vue'
+import CurrentRange from '../parameter/item/EIS/CurrentRange.vue'
+// import SingalMode from '../parameter/item/EIS/SingalMode'
+
+// CV
+import LevelButton from '../parameter/item/LevelButton.vue'
+import VoltRange from '../parameter/item/EIS/VoltRange.vue'
+import ScanRateRange from '../parameter/item/ScanRateRange.vue'
+import ResolutionRange from '../parameter/item/ResolutionRange.vue'
+import CycleRange from '../parameter/item/CycleRange.vue'
+
+export default {
+  name: 'EliteParameterRecordingEliteEIS',
+  components: {
+    DCVolt,
+    ACAmplitude,
+    FreqRange,
+    PointsPerDecades,
+    PointSpacing,
+    Delay,
+    Average,
+    CurrentRange,
+    LevelButton,
+    VoltRange,
+    ScanRateRange,
+    ResolutionRange,
+    CycleRange,
+  },
+  props: {
+    deviceID: {
+      type: Number,
+      required: true,
+    },
+    deviceName: {
+      type: String,
+      default: 'Elite',
+    },
+  },
+  created () {
+  },
+  data () {
+    return {
+      workingModeSelect: {
+        id: -1,
+        description: 'Init',
+      },
+      workingModeOptions: [
+        {
+          id: 0,
+          description: 'Potentiostatic Electrochemical Impedance Spectroscopy',
+        },
+        {
+          id: 1,
+          description: 'CV',
+        },
+        {
+          id: 2,
+          description: 'Dev Tools',
+        },
+      ],
+      DCVolt: null,
+      AC_AMP: null,
+      FreqStart: null,
+      FreqStop: null,
+      PointsPerDecades: null,
+      PointSpacing: null,
+      Delay: null,
+      Average: null,
+      CurrentRange: null,
+      instru: {
+        write: '',
+        read: '',
+        notify: '',
+      },
+      measureEocButton: {
+        start: 'OCP',
+        stop: 'Stop',
+        status: false,
+      },
+      // CV
+      currentRangeSelect: null,
+      currentRangeOptions: [
+        {
+          value: 0,
+          label: '<1.5 μA',
+        },
+        {
+          value: 1,
+          label: '1-60 μA',
+        },
+        {
+          value: 2,
+          label: '40-175 μA',
+        },
+        {
+          value: 3,
+          label: '>120 uA',
+        },
+        {
+          value: 4,
+          label: 'Auto',
+        },
+      ],
+      voltageInRangeSelect: null,
+      voltageInRangeOptions: [
+        {
+          value: 0,
+          label: '1',
+        },
+        {
+          value: 1,
+          label: '2',
+        },
+        {
+          value: 2,
+          label: '3',
+        },
+        {
+          value: 3,
+          label: 'Auto',
+        },
+      ],
+      highzSelect: null,
+      highzOptions: [
+        {
+          value: 0,
+          label: 'On',
+        },
+        {
+          value: 1,
+          label: 'Off',
+        },
+      ],
+      voltInitialNumber: null,
+      stopVoltMaxNumber: null,
+      stopVoltMinNumber: null,
+      voltScanRateNumber: null,
+      sampleRateNumber: null,
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    mqttPub: function (topic, mes) {
+      this.$mqtt.publish(topic, mes)
+    },
+    // Array[String of Parameter Nmae, Value]
+    deviceParameterChange: function (e) {
+      // console.log('e[0],e[1]', e[0], ',', e[1])
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_parameter/0',
+        device: taskInfo.getRawDeviceID(this.deviceID),
+        parameter: e[0],
+        content: e[1],
+      }))
+    },
+    measureEoc () {
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_instruction/0',
+        device: taskInfo.getRawDeviceID(this.deviceID),
+        instruction: 'VIS_CC_ZERO',
+      }))
+      this.measureEocButton.status = true
+    },
+    measureEocStop () {
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_instruction/0',
+        device: taskInfo.getRawDeviceID(this.deviceID),
+        instruction: 'interrupt',
+      }))
+      this.measureEocButton.status = false
+    },
+    refresh () {
+      // taskInfo.getDeviceInfo(this.deviceID).parameterSet.CHANNEL_LABEL = ['Z_image_Raw', 'Z_Real_Raw', 'Frequency', 'Cycle', 'Z_imag', 'Z_real', 'Impedance', 'Phase', 'Current', 'Level gain']
+      this.workingModeSelect = this.workingModeOptions[taskInfo.getDeviceInfo(this.deviceID).parameterSet.MODE]
+      if (this.workingModeSelect != null) {
+        this.workingModeSelectChange(this.workingModeSelect)
+      }
+      this.ACAmplitude = String(Math.round((taskInfo.getDeviceInfo(this.deviceID).parameterSet.AC_AMP) / 2047 * 800))
+      if (this.$refs.ACAmplitude != null) {
+        this.$refs.ACAmplitude.itemChange(this.ACAmplitude)
+      }
+      this.Average = taskInfo.getDeviceInfo(this.deviceID).parameterSet.AVERAGE_NUM
+      if (this.$refs.Average != null) {
+        this.$refs.Average.itemChange(this.Average)
+      }
+      this.CurrentRange = taskInfo.getDeviceInfo(this.deviceID).parameterSet.RTIA
+      if (this.$refs.CurrentRange != null) {
+        this.$refs.CurrentRange.itemChange(this.CurrentRange)
+      }
+      this.PointSpacing = taskInfo.getDeviceInfo(this.deviceID).parameterSet.SCALE
+      if (this.$refs.PointSpacing != null) {
+        this.$refs.PointSpacing.itemChange(this.PointSpacing)
+      }
+      this.DCVolt = String(Math.round((taskInfo.getDeviceInfo(this.deviceID).parameterSet.DC_BIAS) * 2200 / 4095))
+      if (this.$refs.DCVolt != null) {
+        this.$refs.DCVolt.itemChange(this.DCVolt)
+      }
+      this.Delay = String(parseFloat((taskInfo.getDeviceInfo(this.deviceID).parameterSet.DELAY) / 10).toFixed(1))
+      if (this.$refs.Delay != null) {
+        this.$refs.Delay.itemChange(this.Delay)
+      }
+      this.FreqStart = String(parseFloat(Math.round(parseFloat((taskInfo.getDeviceInfo(this.deviceID).parameterSet.FREQ_START * 0.0149) * 100)) / 100).toFixed(1)) === '0.0' ? '0.015' : String(parseFloat(Math.round(parseFloat((taskInfo.getDeviceInfo(this.deviceID).parameterSet.FREQ_START * 0.0149) * 100)) / 100).toFixed(1))
+      if (this.$refs.FreqRange != null) {
+        this.$refs.FreqRange.itemChangeMax(this.FreqStart)
+      }
+      this.FreqStop = String(parseFloat(Math.round(parseFloat((taskInfo.getDeviceInfo(this.deviceID).parameterSet.FREQ_STOP * 0.0149) * 100)) / 100).toFixed(1)) === '0.0' ? '0.015' : String(parseFloat(Math.round(parseFloat((taskInfo.getDeviceInfo(this.deviceID).parameterSet.FREQ_STOP * 0.0149) * 100)) / 100).toFixed(1))
+      if (this.$refs.FreqRange != null) {
+        this.$refs.FreqRange.itemChangeMin(this.FreqStop)
+      }
+      this.PointsPerDecades = String(Math.round((taskInfo.getDeviceInfo(this.deviceID).parameterSet.PPD)))
+      if (this.$refs.PointsPerDecades != null) {
+        this.$refs.PointsPerDecades.itemChange(this.PointsPerDecades)
+      }
+
+      // CV
+      this.currentRangeSelect = taskInfo.getDeviceInfo(this.deviceID).parameterSet.ADC_LEVEL_I_15
+      if (this.$refs.currentRangeSelect != null) {
+        this.$refs.currentRangeSelect.updateLevelButton(this.currentRangeSelect)
+      }
+
+      this.voltageInRangeSelect = taskInfo.getDeviceInfo(this.deviceID).parameterSet.ADC_LEVEL_V_IN_15
+      if (this.$refs.voltageInRangeSelect != null) {
+        this.$refs.voltageInRangeSelect.updateLevelButton(this.voltageInRangeSelect)
+      }
+
+      this.highzSelect = taskInfo.getDeviceInfo(this.deviceID).parameterSet.CTRL_HIGH_Z_15
+      if (this.$refs.highzSelect != null) {
+        this.$refs.highzSelect.updateLevelButton(this.highzSelect)
+      }
+
+      this.stopVoltMaxNumber = this.voltInitialNumber = (taskInfo.getDeviceInfo(this.deviceID).parameterSet.VOLTSTOP_MAX - 25000) / 5
+      if (this.$refs.stopVoltMaxNumber != null) {
+        this.$refs.stopVoltMaxNumber.updateVoltNumber(this.stopVoltMaxNumber)
+      }
+
+      this.stopVoltMinNumber = (taskInfo.getDeviceInfo(this.deviceID).parameterSet.VOLTSTOP_MIN - 25000) / 5
+      if (this.$refs.stopVoltMinNumber != null) {
+        this.$refs.stopVoltMinNumber.updateVoltNumber(this.stopVoltMinNumber)
+      }
+
+      this.voltInitialNumber = (taskInfo.getDeviceInfo(this.deviceID).parameterSet.VOLT_INITIAL - 25000) / 5
+      if (this.$refs.voltInitialNumber != null) {
+        this.$refs.voltInitialNumber.updateVoltNumber(this.voltInitialNumber)
+      }
+
+      this.voltScanRateNumber = taskInfo.getDeviceInfo(this.deviceID).parameterSet.Scan_Rate
+      if (this.$refs.voltScanRateNumber != null) {
+        this.$refs.voltScanRateNumber.updateVoltScanRateNumber(this.voltScanRateNumber)
+      }
+
+      this.sampleRateNumber = taskInfo.getDeviceInfo(this.deviceID).parameterSet.SAMPLE_RATE
+      if (this.$refs.sampleRateNumber != null) {
+        this.$refs.sampleRateNumber.updateResolutionNumber(this.sampleRateNumber)
+      }
+
+      this.instru.read = (taskInfo.getDeviceInfo(this.deviceID).parameterSet.ADC_VALUE_I).toString(16).toUpperCase()
+    },
+    workingModeSelectChange (val) {
+      if (this.workingModeSelect.id === -1) {
+        return false
+      }
+
+      this.workingModeSelect = val
+
+      if (this.workingModeSelect.id !== taskInfo.getDeviceInfo(this.deviceID).parameterSet.MODE) {
+        this.deviceParameterChange(['MODE', this.workingModeSelect.id])
+        //  console.log(this.workingModeSelect.id, this.workingModeSelect.description)
+      }
+    },
+    instruParameterChange: function (e) {
+      while (e[1].length <= 33) {
+        e[1] = e[1] + '0'
+      }
+
+      const sendIns = new Array(17).fill(0)
+      for (let i = 0; i <= 16; i++) {
+        const startIndex = i * 2
+        sendIns[i] = e[1].substring(startIndex, startIndex + 2)
+        sendIns[i] = parseInt(sendIns[i], 16)
+      }
+
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_parameter/0',
+        device: taskInfo.getRawDeviceID(this.deviceID),
+        parameter: 'BLE_WRITE',
+        content: '0:16=' + String(sendIns),
+      }))
+    },
+    sendInstr () {
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_instruction/0',
+        device: taskInfo.getRawDeviceID(this.deviceID),
+        instruction: 'ble_instru_send',
+      }))
+    },
+    readCisData () {
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_parameter_value/0',
+        device: taskInfo.getRawDeviceID(this.deviceID),
+        parameter: 'ADC_VALUE_I',
+      }))
+    },
+    detect () {
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_instruction/0',
+        device: taskInfo.getRawDeviceID(this.deviceID),
+        instruction: 'VIS_DEVICE_DETECT',
+      }))
+      setTimeout(() => {
+        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+          header: 'device_instruction/0',
+          device: taskInfo.getRawDeviceID(this.deviceID),
+          instruction: 'VIS_DEVICE_DONE',
+        }))
+      }, 5000)
+    },
+    version () {
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_instruction/0',
+        device: taskInfo.getRawDeviceID(this.deviceID),
+        instruction: 'dev_version',
+      }))
+    },
+    battery () {
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_instruction/0',
+        device: taskInfo.getRawDeviceID(this.deviceID),
+        instruction: 'dev_battery',
+      }))
+    },
+  },
+  mounted () {
+    this.refresh()
+  },
+  watch: {
+  },
+  destroyed () {
+  },
+}
+</script>

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

@@ -0,0 +1,106 @@
+<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">
+        <va-select
+          @input="workingModeSelectChange(workingModeSelect)"
+          :label="'WORKING MODE'"
+          v-model="workingModeSelect"
+          textBy="description"
+          :options="workingModeOptions"
+          style="width: 300px;"
+          noClear
+        />
+      </div>
+
+      <div v-if="workingModeSelect != null && workingModeSelect.id == 0">
+        <elite-parameter-recording-elite-a-c-c :ref="'CurrentControl'" :deviceID="deviceID" :deviceName="deviceName"/>
+      </div>
+    </va-tree-root>
+  </div>
+</template>
+
+<script>
+
+import { taskInfo } from '@/data/task/TaskInfo'
+import EliteParameterRecordingEliteACC from '../parameter/item/AnalogCurrentControl/EliteParameterRecordingEliteACC'
+
+export default {
+  name: 'EliteParameterRecordingEliteTrigger',
+  components: {
+    EliteParameterRecordingEliteACC,
+  },
+  props: {
+    deviceID: {
+      type: Number,
+      required: true,
+    },
+    deviceName: {
+      type: String,
+      default: 'Elite',
+    },
+  },
+  created () {
+  },
+  data () {
+    return {
+      workingModeSelect: {
+        id: -1,
+        description: 'Init',
+      },
+      workingModeOptions: [
+        {
+          id: 0,
+          description: 'Analog Current Control (ACC)',
+        },
+      ],
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    mqttPub: function (topic, mes) {
+      this.$mqtt.publish(topic, mes)
+    },
+    // Array[String of Parameter Nmae, Value]
+    deviceParameterChange: function (e) {
+      console.log('e[0],e[1]', e[0], ',', e[1])
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_parameter/0',
+        device: taskInfo.getRawDeviceID(this.deviceID),
+        parameter: e[0],
+        content: e[1],
+      }))
+    },
+    refresh () {
+      this.workingModeSelect = this.workingModeOptions[taskInfo.getDeviceInfo(this.deviceID).parameterSet.MODE]
+      if (this.workingModeSelect != null) {
+        this.workingModeSelectChange(this.workingModeSelect)
+      }
+
+      if (this.$refs.CurrentControl != null) {
+        this.$refs.CurrentControl.refresh()
+      }
+    },
+    workingModeSelectChange (val) {
+      if (this.workingModeSelect.id === -1) {
+        return false
+      }
+
+      this.workingModeSelect = val
+
+      if (this.workingModeSelect.id !== taskInfo.getDeviceInfo(this.deviceID).parameterSet.MODE) {
+        this.deviceParameterChange(['MODE', this.workingModeSelect.id])
+        console.log(this.workingModeSelect.id, this.workingModeSelect.description)
+      }
+    },
+  },
+  mounted () {
+    this.refresh()
+  },
+  watch: {
+  },
+  destroyed () {
+  },
+}
+</script>