[fix] configuration refresh bug

[modify] separate chartKey and panelKey
[add] can save chart source setting
2022-02-12 17:17:34 +08:00 · 2022-01-14 17:26:13 +08:00 · 2022-01-14 15:54:06 +08:00 · 2022-01-12 18:06:11 +08:00 · 2022-01-12 18:01:06 +08:00 · 2022-01-12 15:52:23 +08:00
68 changed files with 4647 additions and 1999 deletions
@@ -8595,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",
@@ -10375,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",
@@ -10939,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",
@@ -17270,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",
@@ -35,6 +35,7 @@
    "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",
@@ -58,6 +59,7 @@
    "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",
@@ -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>
@@ -33,9 +33,16 @@ 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}`
@@ -52,11 +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://' + '192.168.151.125' + ':8083')
-// Vue.use(VueMqtt, 'ws://' + '192.168.3.208' + ':8083')
+// Vue.use(VueMqtt, 'ws://' + '192.168.3.211' + ':8083')

 Vue.prototype.GLOBAL = global_

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

@@ -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>
@@ -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>
@@ -9,7 +9,6 @@
 <script>
 import { mapMutations } from 'vuex'
 import types from '@/store/modules/analysis/replay/types'
-// import { chartData } from '../../../../data/task/ChartsManagement'

 export default {
  name: 'elite-replay-chart',
@@ -7,7 +7,6 @@
 </template>

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

 export default {
  name: 'elite-replay-overview-chart',
@@ -9,7 +9,6 @@
 <script>
 import { mapMutations } from 'vuex'
 import types from '@/store/modules/analysis/replay/types'
-// import { chartData } from '../../../../data/task/ChartsManagement'

 export default {
  name: 'neulive-replay-chart',
@@ -7,7 +7,6 @@
 </template>

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

 export default {
  name: 'neulive-replay-overview-chart',
@@ -46,58 +46,6 @@ export default {
          description: '800',
        },
      ],
-      neuliveSampleRateOptions: [
-        {
-          id: 0,
-          value: 1000,
-          description: '1k',
-        },
-        {
-          id: 1,
-          value: 2000,
-          description: '2k',
-        },
-        {
-          id: 2,
-          value: 4000,
-          description: '4k',
-        },
-        {
-          id: 3,
-          value: 5000,
-          description: '5k',
-        },
-        {
-          id: 4,
-          value: 8000,
-          description: '8k',
-        },
-        {
-          id: 5,
-          value: 10000,
-          description: '10k',
-        },
-        {
-          id: 6,
-          value: 20000,
-          description: '20k',
-        },
-        {
-          id: 7,
-          value: 40000,
-          description: '40k',
-        },
-        {
-          id: 8,
-          value: 80000,
-          description: '80k',
-        },
-        {
-          id: 9,
-          value: 100000,
-          description: '100k',
-        },
-      ],
      stimulateElectrodeOptions: [
        {
          label: 'Monopolar',
@@ -351,11 +299,7 @@ export default {
                }
              } else if (key === 'SAMPLE_RATE') {
                showKey = 'Sample Rate'
-                for (let i = 0; i < this.neuliveSampleRateOptions.length; i++) {
-                  if (this.neuliveSampleRateOptions[i].value === value) {
-                    showValue = this.neuliveSampleRateOptions[i].description
-                  }
-                }
+                showValue = value
              }
              this.content += '    ' + showKey + ': ' + showValue + '<br/>'
            }
@@ -40,6 +40,7 @@ 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'
@@ -127,7 +128,7 @@ export default {
    getControllerList: async function () {
      const update = async () => {
        this.controllerList.push({
-          id: 'tommy_test',
+          id: taskInfo.getTaskInfo().controllerID,
          mac: '',
          status: 'loading',
          isScan: true,
@@ -9,7 +9,6 @@
 <script>
 import { mapMutations } from 'vuex'
 import types from '@/store/modules/analysis/spike/types'
-// import { chartData } from '../../../../data/task/ChartsManagement'

 export default {
  name: 'spike-replay-chart',
@@ -7,7 +7,6 @@
 </template>

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

 export default {
  name: 'spike-overview-chart',
@@ -1,17 +1,17 @@
 <template>
-  <va-card
+  <!-- <va-card
    class="horizontal-bars"
-  >
-    <div class="row">
-      <div class="flex md12 xs12">
-        <va-progress-bar
-          :value="progressValue"
-        >
-          {{ progressValue }} %
-        </va-progress-bar>
-      </div>
+  > -->
+  <div class="row">
+    <div class="flex md12 xs12 mb-2 mt-2">
+      <va-progress-bar
+        :value="progressValue"
+      >
+        {{ progressValue }} %
+      </va-progress-bar>
    </div>
-  </va-card>
+  </div>
+  <!-- </va-card> -->
 </template>

 <script>
@@ -4,12 +4,16 @@
    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>
@@ -138,7 +138,7 @@

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

 export default {
@@ -353,7 +353,7 @@ export default {
    getControllerList: async function () {
      const update = async () => {
        this.controllerList.push({
-          id: 'tommy_test',
+          id: taskInfo.getTaskInfo().controllerID,
          mac: '',
          status: 'loading',
          isScan: true,
@@ -516,6 +516,7 @@ export default {
  watch: {
  },
  async mounted () {
+    await taskInfo.updateTaskInfo()
    await this.getControllerList()

    this.pageMqttSub()
@@ -21,6 +21,7 @@ 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',
@@ -43,7 +44,7 @@ export default {
    getControllerList: async function () {
      const update = async () => {
        this.controllerList.push({
-          id: 'tommy_test',
+          id: taskInfo.getTaskInfo().controllerID,
          mac: '',
          status: 'loading',
          isScan: true,
@@ -149,9 +150,11 @@ export default {
              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) {
@@ -25,6 +25,7 @@ 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',
@@ -48,7 +49,7 @@ export default {
    getControllerList: async function () {
      const update = async () => {
        this.controllerList.push({
-          id: 'tommy_test',
+          id: taskInfo.getTaskInfo().controllerID,
          mac: '',
          status: 'loading',
          isScan: true,
@@ -157,10 +158,12 @@ export default {
            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-' + (fileIndex + 1).toString()
+                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 + '-' + (fileIndex + 1).toString()
+                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) {
@@ -9,6 +9,7 @@ import FileTable from './file-table/FileTable.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: {
@@ -23,10 +24,11 @@ export default {
    getControllerList: async function () {
      const update = async () => {
        this.controllerList.push({
-          id: 'tommy_test',
+          id: taskInfo.getTaskInfo().controllerID,
          mac: '',
          status: 'loading',
          isScan: true,
+          devices: [],
        })
      }
      await update()
@@ -78,6 +80,7 @@ export default {
    },
  },
  async mounted () {
+    await taskInfo.updateTaskInfo()
    await this.getControllerList()
    await api.auth.getJwtData()
    console.log(await api.meta.getByParentWithLimit('folder', 2, 5, 0, 'DESC'))
@@ -699,12 +699,10 @@ export default {
      // const uuidList = ['32abdb14-fc0c-11eb-9aa8-dca6326cbc6b', '940ca938-f662-11eb-8a41-dca6326cbc6b']
      if (this.controllerList.length > 0) {
        if (this.controllerList[0].sd_uploading === false) {
-          api.sdcard.getuuidList().then((response) => {
-            console.log('uuidList', response)
-            this.SDuuidList = response.split(' ')
-          }).catch(error => {
-            console.log(error)
-          })
+          const ret = await api.sdcard.getuuidList()
+          if (ret.status === 200) {
+            this.SDuuidList = ret.data
+          }
        }
      }
    },
@@ -732,7 +730,7 @@ export default {
  async mounted () {
    const controllerList = await api.controller.getAll()
    this.controllerList = controllerList.data
-    // this.getSDuuidList()
+    this.getSDuuidList()
  },
  destroyed () {
  },
@@ -44,16 +44,13 @@ export default {
    async moveToDB (meta, controller) {
      this.initMetaInfo(meta)
      this.pageToast('Start Moving to database...')
-      apiManager.startProgressBar()
-      await apiManager.call('Move_to_DB', controller.id, this.metaID, this.mac_address, this.uuid)
-      apiManager.endProgressBar()
+      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...')
-      apiManager.startProgressBar()
      await apiManager.call('Delete_SD', controller.id, this.metaID, this.mac_address, this.uuid)
-      apiManager.endProgressBar()
    },
    pageToast: function (mes) {
      this.showToast(
@@ -6,7 +6,7 @@
      v-show="meta.sd_data_record === true"
      :icon="meta.sd_data_uploaded === true ? 'fa fa-download' : ''"
      :color="this.$themes.primary"
-      @click.stop="performButtonAction()"
+      @click.native.stop="performButtonAction()"
      flat
      small
    >
@@ -42,7 +42,6 @@
 <script>
 import SdCardApiAction from './SdCardApiAction.vue'
 import progressModal from '@/components/common/progressBarModal/progressModal.vue'
-import { apiManager } from './apiManager'

 export default {
  name: 'SdCardButton',
@@ -91,7 +90,11 @@ export default {
      const uploaded = this.meta.sd_data_uploaded // true or false
      if (recorded === true) {
        if (uploaded !== true) {
-          this.moveToDBModal = 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()
        }
@@ -106,11 +109,15 @@ export default {
    // },
    async executeUpload () {
      this.$refs.progressModalRef.show()
-      await this.$refs.sd_card_api.moveToDB(this.meta, this.controller).catch(_ => {
+      const result = await this.$refs.sd_card_api.moveToDB(this.meta, this.controller).catch(_ => {
        this.$refs.progressModalRef.hide()
-        apiManager.endProgressBar()
        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)
@@ -49,7 +49,7 @@
            <div class="flex sm12 xl12 md12 xs12" style="text-align: center;">
              <va-button v-if="device.auto_connect" color="success" @click="autoConnect(index, device)">Auto Connect</va-button>
              <va-button v-if="!device.auto_connect" color="#babfc2" @click="autoConnect(index, device)" outline>Auto Connect</va-button>
-              <va-button >User Guide</va-button>
+              <va-button @click="openGuide(device.library)">User Guide</va-button>
            </div>
          </va-card>
        </div>
@@ -117,6 +117,11 @@ export default {
      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]),
@@ -57,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
@@ -96,12 +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
@@ -111,11 +112,13 @@ export default {
  components: {
    CanvasChart,
    TaskDevices,
-    // TaskFormula,
  },
  computed: {
    ...mapFields('taskContent', [
      'deviceList',
+      'chartData',
+      'taskContentChartPanelKey',
+      'taskContentChartNumber',
    ]),
  },
  data () {
@@ -125,11 +128,7 @@ export default {
      showRemoveChartModal: false,
      // refresh timer
      dataRefreshTimer: null,
-      // charts data
-      chartDataAll: chartData.getAllChartsData(),
-      // chart refresh key
-      chartKey: 0,
-      chartNumber: taskInfo.getTaskInfo().chartList.length,
+
      selectChartID: null,
      showDeviceSetting: true,
      chartAreaClass: ['flex', 'xs12', 'sm12', 'md12', 'xl8', 'pa-0'],
@@ -157,60 +156,28 @@ export default {
    },
    async '+/hardware_device/+' (data, topic) {
      await taskInfo.deviceInfo(String.fromCharCode.apply(null, data), this.deviceList)
-      // console.log(this.deviceList)
-      // for (const d1 in taskInfo.getTaskInfo().deviceList) {
-      //   if (taskInfo.getTaskInfo().deviceList[d1].info.device_address.length > 0) {
-      //     const addr1 = taskInfo.getTaskInfo().deviceList[d1].info.device_address.join()
-      //     let parameter, content
-      //     for (const d2 in this.deviceList) {
-      //       const addr2 = this.deviceList[d2].info.device_address.join()
-      //       if (addr1 === addr2) {
-      //     //  console.log(this.deviceList[d2].parameterSet)
-      //         for (const p in this.deviceList[d2].parameterSet) {
-      //           if (p !== 'STIMULATING') {
-      //             if (parameter == null) {
-      //               parameter = p
-      //             } else {
-      //               parameter = parameter + '|' + p
-      //             }
-      //             let c
-      //             if (Array.isArray(this.deviceList[d2].parameterSet[p])) {
-      //               c = '0:' + this.deviceList[d2].parameterSet[p].length + '=' + this.deviceList[d2].parameterSet[p]
-      //             } else {
-      //               c = this.deviceList[d2].parameterSet[p]
-      //             }
-
-      //             if (content == null) {
-      //               content = c
-      //             } else {
-      //               content = content + '|' + c
-      //             }
-      //           }
-      //         }
-      //     //  console.log('****', parameter, content)
-      //         // this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
-      //         //   header: 'device_parameter/0',
-      //         //   device: parseInt(d1),
-      //         //   parameter: parameter,
-      //         //   content: content,
-      //         // }))
-      //       }
-      //     }
-      // }
-      // }
      if (this.$refs.devices_ref != null) {
        await this.$refs.devices_ref.loadingDone()
+        await this.taskContentChartInitCustomizedFromCache()
      }
    },
    // listen datastream [ topic: controllerID/data_server/device_data_stream/deviceID/channel ]
    async '+/data_server/device_data_stream/+/+' (data, topic) {
      const topicSplit = topic.split('/')
-      if (this.getParmDone & !taskInfo.getDeviceInfoByRawID(parseInt(topicSplit[3])).info.isSync) {
-        if (chartData.defaultChartGenerator(this.deviceList, taskInfo.getDeviceIDByRaw(parseInt(topicSplit[3])), null, 'device')) {
-          taskInfo.deviceStart(parseInt(topicSplit[3]), this.deviceList)
+      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))
@@ -262,9 +229,15 @@ export default {
          this.showShutdownModal = true
          break
        case 'start':
-          if (!taskInfo.getDeviceInfoByRawID(parseInt(parseInt(mes[1]))).info.isSync) {
+          if (!taskInfo.getDeviceInfoByRawID(parseInt(mes[1])).info.isSync) {
            taskInfo.deviceStart(parseInt(mes[1]), this.deviceList)
-            if (chartData.defaultChartGenerator(this.deviceList, taskInfo.getDeviceIDByRaw(parseInt(parseInt(mes[1]))), null, 'device')) {
+            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)
            }
          }
@@ -335,11 +308,12 @@ export default {
      //   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(
@@ -353,8 +327,10 @@ export default {
    },
    refreshData: function () {
      // TODO don't need to refresh chart with stop status
-      for (const chart in this.chartDataAll) {
-        chartData.refresh(parseInt(chart))
+      for (const chart in this.chartData) {
+        this.taskContentChartRefreshData({
+          chartID: parseInt(chart),
+        })
      }
    },
    refreshDevicesWindow: function () {
@@ -366,54 +342,41 @@ export default {
      //   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) {
@@ -425,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) {
@@ -448,6 +410,8 @@ export default {
          })
        }
      }
+
+      await this.taskContentChartSaveToCache()
      this.pageToast('The chart has been removed.')
    },
    showDeviceSettingClick: function () {
@@ -462,14 +426,14 @@ export default {
    },
    addMappingChart: async function (deviceID) {
      // if have chart with device ID
-      for (const chart in chartData.getAllChartsData()) {
-        if (chartData.getAllChartsData()[chart].mappingID === deviceID) {
+      for (const chart in this.chartData) {
+        if (this.chartData[chart].mappingID === deviceID) {
          return false
        }
      }
-      const chart = await this.addChart()
+      const chart = await this.addChart(true)
      await this.$nextTick(async () => {
-        chartData.getAllChartsData()[chart].mappingID = deviceID
+        this.chartData[chart].mappingID = deviceID
        if (this.$refs.chart_ref != null) {
          this.$refs.chart_ref.forEach(ref => {
            ref.refreshMappingSelect()
@@ -481,20 +445,12 @@ export default {
    addDevice: async function (deviceID) {
      this.mqttSub(taskInfo.getTaskInfo().controllerID + '/data_server/device_data_stream/' + taskInfo.getRawDeviceID(deviceID) + '/+')
      this.addMappingChart(deviceID)
-      // if (taskInfo.getDeviceInfo(deviceID).info.isSync) {
-      //   chartData.defaultChartGenerator(deviceID, chart, 'device')
-      // }
-      // console.log(chartData.getAllChartsData())
-      // console.log(taskInfo.getTaskInfo())
-      // await api.task.update({
-      //   device_config: taskInfo.getTaskInfo().deviceList,
-      // })
      this.pageToast('The device [' + deviceID + '] has been registered.')
    },
    removeDevice: function (deviceID) {
      this.mqttUnSub(taskInfo.getTaskInfo().controllerID + '/data_server/device_data_stream/' + taskInfo.getRawDeviceID(deviceID) + '/+')
-      for (const chart in chartData.getAllChartsData()) {
-        if (chartData.getAllChartsData()[chart].mappingID === deviceID) {
+      for (const chart in this.chartData) {
+        if (this.chartData[chart].mappingID === deviceID) {
          dataStreamBuffer.removeByChart(chart)
          this.removeChart(chart)
        }
@@ -502,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()
@@ -514,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)
        }
@@ -534,7 +490,12 @@ export default {
      this.pageToast('The all devices have been started')
    },
    startDevice: async function (device) {
-      chartData.defaultChartGenerator(this.deviceList, device.id, null, 'device')
+      await this.taskContentChartDefaultChartGenerator({
+        _deviceList: this.deviceList,
+        _itemID: device.id,
+        _chartID: null,
+        _type: 'device',
+      })
      if (!taskInfo.getDeviceInfo(device.id).info.isSync) {
        if (taskInfo.getDeviceInfo(device.id).info.library_name.startsWith('Neulive')) {
          this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
@@ -594,6 +555,17 @@ export default {
        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: {
  },
@@ -604,7 +576,6 @@ export default {
    this.pageMqttSub(taskInfo.getTaskInfo().controllerID)
    //  console.log(taskInfo.getTaskInfo().controllerID)
    await this.pageInit()
-    // this.chartNumber = taskInfo.getTaskInfo().chartNumber

    this.dataRefreshTimer = setInterval(this.refreshData, 100)

@@ -616,7 +587,7 @@ export default {
  },
  destroyed () {
    taskInfo.destroyed(this.deviceList)
-    for (const chart in chartData.getAllChartsData()) {
+    for (const chart in this.chartData) {
      this.removeChart(chart)
    }
    clearInterval(this.dataRefreshTimer)
@@ -60,7 +60,7 @@

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

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

 // TODO change chart data tag format

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

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

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

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

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

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

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

        if (this.$refs.chart_ref != null) {
@@ -413,14 +428,14 @@ export default {
    },
    addMappingChart: async function (deviceID) {
      // if have chart with device ID
-      for (const chart in chartData.getAllChartsData()) {
-        if (chartData.getAllChartsData()[chart].mappingID === deviceID) {
+      for (const chart in this.chartData) {
+        if (this.chartData[chart].mappingID === deviceID) {
          return false
        }
      }
      const chart = await this.addChart()
      await this.$nextTick(async () => {
-        chartData.getAllChartsData()[chart].mappingID = deviceID
+        this.chartData[chart].mappingID = deviceID
        if (this.$refs.chart_ref != null) {
          this.$refs.chart_ref.forEach(ref => {
            ref.refreshMappingSelect()
@@ -432,20 +447,12 @@ export default {
    addDevice: async function (deviceID) {
      this.mqttSub(taskInfo.getTaskInfo().controllerID + '/data_server/device_data_stream/' + taskInfo.getRawDeviceID(deviceID) + '/+')
      this.addMappingChart(deviceID)
-      // if (taskInfo.getDeviceInfo(deviceID).info.isSync) {
-      //   chartData.defaultChartGenerator(deviceID, chart, 'device')
-      // }
-      // console.log(chartData.getAllChartsData())
-      // console.log(taskInfo.getTaskInfo())
-      // await api.task.update({
-      //   device_config: taskInfo.getTaskInfo().deviceList,
-      // })
      this.pageToast('The device [' + deviceID + '] has been registered.')
    },
    removeDevice: function (deviceID) {
      this.mqttUnSub(taskInfo.getTaskInfo().controllerID + '/data_server/device_data_stream/' + taskInfo.getRawDeviceID(deviceID) + '/+')
-      for (const chart in chartData.getAllChartsData()) {
-        if (chartData.getAllChartsData()[chart].mappingID === deviceID) {
+      for (const chart in this.chartData) {
+        if (this.chartData[chart].mappingID === deviceID) {
          dataStreamBuffer.removeByChart(chart)
          this.removeChart(chart)
        }
@@ -455,7 +462,7 @@ export default {
    addFormula: async function (formulaID) {
      const chart = await this.addChart()
      await this.$nextTick(async () => {
-        chartData.getAllChartsData()[chart].mappingID = formulaID
+        this.chartData[chart].mappingID = formulaID
        if (this.$refs.chart_ref != null) {
          this.$refs.chart_ref.forEach(ref => {
            ref.refreshMappingSelect()
@@ -465,8 +472,8 @@ export default {
      this.pageToast('The formula [' + formulaID + '] has been registered.')
    },
    removeFormula: function (formulaID) {
-      for (const chart in chartData.getAllChartsData()) {
-        if (chartData.getAllChartsData()[chart].mappingID === formulaID) {
+      for (const chart in this.chartData) {
+        if (this.chartData[chart].mappingID === formulaID) {
          dataStreamBuffer.removeByChart(chart)
          this.removeChart(chart)
        }
@@ -485,7 +492,12 @@ export default {
      this.pageToast('The all devices have been started')
    },
    startDevice: async function (device) {
-      chartData.defaultChartGenerator(this.deviceList, device.id, null, 'device')
+      await this.taskContentChartDefaultChartGenerator({
+        _deviceList: this.deviceList,
+        _itemID: device.id,
+        _chartID: null,
+        _type: 'device',
+      })
      if (!taskInfo.getDeviceInfo(device.id).info.isSync) {
        if (taskInfo.getDeviceInfo(device.id).info.library_name.startsWith('Neulive')) {
          this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
@@ -542,6 +554,13 @@ export default {
        path: '/',
      })
    },
+
+    ...mapActions('taskContent', [
+      taskTypes.chart.add,
+      taskTypes.chart.refreshData,
+      taskTypes.chart.defaultChartGenerator,
+      taskTypes.chart.reset,
+    ]),
  },
  watch: {
  },
@@ -564,7 +583,7 @@ export default {
  },
  destroyed () {
    taskInfo.destroyed(this.deviceList)
-    for (const chart in chartData.getAllChartsData()) {
+    for (const chart in this.chartData) {
      this.removeChart(chart)
    }
    clearInterval(this.dataRefreshTimer)
@@ -25,19 +25,27 @@
        </va-tab>
      </va-tabs>
      <div v-if="tabValue == 0" >
-        <div v-if="data.legend.data.length != 0">
-          <chart :ref="'chart_ref'" :style="'width: '+ cardwidth + '; height: ' + cardheight + ';'" :options="data" :auto-resize="true"></chart>
+        <div v-if="chartData[chartID].legend.data.length != 0">
+          <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 :chartID="chartID"></canvas-chart-setting> -->
      </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="data.chartXMode === 'time'"
+          v-if="chartData[chartID].chartXMode === 'time'"
          class="mx-1"
          @keyup.enter="timeIntervalChange(timeIntervalInput)"
          @blur="timeIntervalChange(timeIntervalInput)"
@@ -49,7 +57,7 @@
          </p>
        </va-input>
        <va-input
-          v-if="data.chartXMode === 'value'"
+          v-if="chartData[chartID].chartXMode === 'value'"
          class="mx-1"
          @keyup.enter="xIntervalChange(xIntervalInput)"
          @blur="xIntervalChange(xIntervalInput)"
@@ -57,7 +65,7 @@
          :label="'x-grid'"
        >
          <p slot="append" style="margin-right: 0;" small>
-            {{data.chartXUnit}}
+            {{chartData[chartID].chartXUnit}}
          </p>
        </va-input>
        <va-input
@@ -68,11 +76,11 @@
          :label="'y-grid'"
        >
          <p slot="append" style="margin-right: 0;" small>
-            {{data.chartYUnit}}
+            {{chartData[chartID].chartYUnit}}
          </p>
        </va-input>
        <va-input
-          v-if="data.chartDevice === 'neulive'"
+          v-if="chartData[chartID].chartDevice === 'neulive'"
          class="mx-1"
          @keyup.enter="threeAxisIntervalChange(threeAxisIntervalInput)"
          @blur="threeAxisIntervalChange(threeAxisIntervalInput)"
@@ -90,16 +98,18 @@
        <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 CanvasChartFilter from './CanvasChartFilter.vue'
-// import CanvasChartSetting from './CanvasChartSetting'
+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',
@@ -107,6 +117,7 @@ export default {
    // CanvasChartSetting,
    CanvasChartSource,
    CanvasChartFilter,
+    CanvasChartFilterPopup,
  },
  props: {
    chartID: {
@@ -128,18 +139,20 @@ 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',
@@ -147,48 +160,45 @@ export default {
      yIntervalInput: 'auto',
    }
  },
-  computed: {
-  },
-  watch: {
-  },
  methods: {
    timeIntervalChange: function (val) {
      if (!isNaN(parseInt(val))) {
-        chartData.getAllChartsData()[this.chartID].xAxis.forEach(x => {
+        this.chartData[this.chartID].xAxis.forEach(x => {
          if (x.type === 'time') {
            x.interval = val * 1000
          }
        })
      } else {
        this.timeIntervalInput = 'auto'
-        chartData.getAllChartsData()[this.chartID].xAxis.forEach(x => {
+        this.chartData[this.chartID].xAxis.forEach(x => {
          if (x.type === 'time') {
            x.interval = 500 * 1000
          }
        })
      }
    },
-    xIntervalChange: function (val) {
+    xIntervalChange: async function (val) {
      if (!isNaN(parseInt(val))) {
-        chartData.getAllChartsData()[this.chartID].xAxis.forEach(x => {
+        this.chartData[this.chartID].xAxis.forEach(x => {
          if (x.type === 'value') {
            x.interval = val * 1000
          }
        })
      } else {
        this.timeIntervalInput = 'auto'
-        chartData.getAllChartsData()[this.chartID].xAxis.forEach(x => {
+        this.chartData[this.chartID].xAxis.forEach(x => {
          if (x.type === 'value') {
            x.interval = null
          }
        })
      }
+      await this.taskContentChartSaveToCache()
    },
-    yIntervalChange: function (val) {
+    yIntervalChange: async function (val) {
      if (!isNaN(parseInt(val))) {
-        chartData.getAllChartsData()[this.chartID].yAxis.forEach(y => {
+        this.chartData[this.chartID].yAxis.forEach(y => {
          if (parseInt(y.channel) <= 255) {
-            if (chartData.getAllChartsData()[this.chartID].chartYUnit === 'uV') {
+            if (this.chartData[this.chartID].chartYUnit === 'uV') {
              y.interval = parseInt(val)
              //  console.log(y.interval)
            } else {
@@ -197,8 +207,8 @@ export default {
            const maxList = []
            const minList = []
            y.seriesIndex.forEach(i => {
-              maxList.push(Math.max(...chartData.getAllChartsData()[this.chartID].series[i].data.map(p => p[1])))
-              minList.push(Math.min(...chartData.getAllChartsData()[this.chartID].series[i].data.map(p => p[1])))
+              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)
@@ -211,7 +221,7 @@ export default {
        })
      } else {
        this.timeIntervalInput = 'auto'
-        chartData.getAllChartsData()[this.chartID].yAxis.forEach(y => {
+        this.chartData[this.chartID].yAxis.forEach(y => {
          if (parseInt(y.channel) <= 255) {
            y.interval = null
            y.max = 'dataMax'
@@ -219,17 +229,18 @@ export default {
          }
        })
      }
+      await this.taskContentChartSaveToCache()
    },
    threeAxisIntervalChange: function (val) {
      if (!isNaN(parseInt(val))) {
-        chartData.getAllChartsData()[this.chartID].yAxis.forEach(y => {
+        this.chartData[this.chartID].yAxis.forEach(y => {
          if (parseInt(y.channel) >= 255) {
            y.interval = val * 1
          }
        })
      } else {
        this.timeIntervalInput = 'auto'
-        chartData.getAllChartsData()[this.chartID].yAxis.forEach(y => {
+        this.chartData[this.chartID].yAxis.forEach(y => {
          if (parseInt(y.channel) >= 255) {
            y.interval = null
          }
@@ -255,44 +266,77 @@ 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')
  },
@@ -56,7 +56,6 @@
 </template>

 <script>
-import { chartData } from '@/data/task/ChartsManagement'
 import { taskInfo } from '@/data/task/TaskInfo'
 import api from '@/data/api'
 import { mapFields } from 'vuex-map-fields'
@@ -77,23 +76,23 @@ export default {
  computed: {
    ...mapFields('taskContent', [
      'filter',
+      'chartData',
    ]),
    buttonIcon () {
-      if (this.data.series[0] != null) {
-        return this.data.series[0].filter[this.filterIndex].filter != null ? 'fa fa-stop' : 'fa fa-play'
+      if (this.chartData[this.chartID].series.length > 0 && this.chartData[this.chartID].series.every(item => item != null)) {
+        return this.chartData[this.chartID].series.every(item => item.filter[this.filterIndex].filter != null) ? 'fa fa-stop' : 'fa fa-play'
      }
      return 'fa fa-play'
    },
    buttonColor () {
-      if (this.data.series[0] != null) {
-        return this.data.series[0].filter[this.filterIndex].filter != null ? 'danger' : 'primary'
+      if (this.chartData[this.chartID].series.length > 0 && this.chartData[this.chartID].series.every(item => item != null)) {
+        return this.chartData[this.chartID].series.every(item => item.filter[this.filterIndex].filter != null) ? 'danger' : 'primary'
      }
-      return 'fa fa-play'
+      return 'primary'
    },
  },
  data () {
    return {
-      data: chartData.getAllChartsData()[this.chartID],
      selectFilter: {
        id: 1,
        name: 'notch',
@@ -129,9 +128,9 @@ export default {
  methods: {
    async updateFilterInfo (index) {
      let closeFilter = false
-      for (let i = 0; i < this.data.series.length; i++) {
-        if (this.data.series[i].filter[this.filterIndex].filter != null) {
-          this.data.series[i].filter[this.filterIndex].filter = null
+      for (let i = 0; i < this.chartData[this.chartID].series.length; i++) {
+        if (this.chartData[this.chartID].series[i].filter[this.filterIndex].filter != null) {
+          this.chartData[this.chartID].series[i].filter[this.filterIndex].filter = null
          closeFilter = true
        }
      }
@@ -140,20 +139,21 @@ export default {
      }
      let fs = 0
      let sos = []
-      for (let i = 0; i < this.data.series.length; i++) {
-        const deviceID = this.data.series[i].yAxisSource[0]
+      for (let i = 0; i < this.chartData[this.chartID].series.length; i++) {
+        const deviceID = this.chartData[this.chartID].series[i].yAxisSource[0]
        // const _fs = taskInfo.getDeviceInfo(deviceID).parameterSet.SAMPLE_RATE
        const _fs = 1000
        const _chNum = taskInfo.getDeviceInfo(deviceID).parameterSet.CH_NUMBER
+        // 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),
+            fs: parseFloat(_fs / _chNum),
+            f0: parseFloat(this.freq0),
+            f1: parseFloat(this.freq1),
+            f2: parseFloat(this.freq2),
          })

          if (ret.status !== 200) {
@@ -172,17 +172,17 @@ export default {
          })
          sos = _sos
        }
-        this.data.series[i].filter[index].type = this.selectFilter.name
-        this.data.series[i].filter[index].order = this.order
+        this.chartData[this.chartID].series[i].filter[index].type = this.selectFilter.name
+        this.chartData[this.chartID].series[i].filter[index].order = this.order
        // sampling rate changed by channel number
-        this.data.series[i].filter[index].fs = parseInt(_fs / _chNum)
-        this.data.series[i].filter[index].f0 = parseInt(this.freq0)
-        this.data.series[i].filter[index].f1 = parseInt(this.freq1)
-        this.data.series[i].filter[index].f2 = parseInt(this.freq2)
-        this.data.series[i].filter[index].sos = sos
-        this.data.series[i].filter[index].filter = IIRFilter.init(sos)
+        this.chartData[this.chartID].series[i].filter[index].fs = parseFloat(_fs / _chNum)
+        this.chartData[this.chartID].series[i].filter[index].f0 = parseFloat(this.freq0)
+        this.chartData[this.chartID].series[i].filter[index].f1 = parseFloat(this.freq1)
+        this.chartData[this.chartID].series[i].filter[index].f2 = parseFloat(this.freq2)
+        this.chartData[this.chartID].series[i].filter[index].sos = sos
+        this.chartData[this.chartID].series[i].filter[index].filter = IIRFilter.init(sos)
      }
-      //  console.log(this.data)
+      //  console.log(this.chartData[this.chartID])
    },
  },
 }
@@ -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>
@@ -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>
@@ -5,7 +5,7 @@
        <p class="display-6">filter<p/>
      </div>
      <div class="flex sm3 xl3 md3 xs3 pa-0 ma-0">
-        <va-toggle v-model="data.filter.open" small @click.native="() => {}"/>
+        <va-toggle v-model="chartData[chartID].filter.open" small @click.native="() => {}"/>
      </div>
      <!-- <div class="flex sm12 xl12 md12 xs12 px-0 mx-0">
        <p class="display-6">Protect recording channels<p/>
@@ -24,7 +24,7 @@
 </template>

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

 export default {
  name: 'canvas-chart-setting',
@@ -34,9 +34,13 @@ export default {
      required: true,
    },
  },
+  computed: {
+    ...mapFields('taskContent', [
+      'chartData',
+    ]),
+  },
  data () {
    return {
-      data: chartData.getAllChartsData()[this.chartID],
    }
  },
  methods: {
@@ -45,7 +45,6 @@
            v-model="gridSelection"
            textBy="value"
            :options="gridOptions"
-            @click.enter="updateGridOptions()"
          />
        </div>
        <va-button :disabled="sourceAddStatus" class="flex md3 xl3 xs3 sm3 pa-1" @click="addRegisterDeviceChannel(gridSelection.id)" >
@@ -56,11 +55,12 @@
    <va-tree-root>
      <va-tree-category
        style="font-size: 20px;"
-        v-for="grid in grids"
+        v-for="grid in chartData[chartID].grid"
        :key="grid.index"
-        :label="'Subplot ' + grid.index">
+        :label="'Subplot ' + grid.index"
+      >
        <va-tree-node
-          v-for="series in gridSource[grid.index]"
+          v-for="series in chartData[chartID].gridSource[grid.index]"
          :key="series.name"
        >
          <div class="flex row align--center">
@@ -86,18 +86,14 @@
 </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,
@@ -107,14 +103,7 @@ export default {
    return {
      error: '',
      gridSelection: '',
-      gridOptions: [
-        {
-          id: 0,
-          value: 0,
-        },
-      ],
-      grids: this.gridInfo,
-      gridSource: chartData.getAllChartsData()[this.chartID].gridSource,
+      gridOptions: [],
      channelSelectX: '',
      channelOptionsX: [],
      channelSelectY: '',
@@ -128,6 +117,11 @@ export default {
      sourceList: [],
    }
  },
+  computed: {
+    ...mapFields('taskContent', [
+      'chartData',
+    ]),
+  },
  watch: {
    deviceOptions: function (val) {
      this.clearSelectOptions()
@@ -269,7 +263,7 @@ export default {
  methods: {
    updateGridOptions () {
      this.gridOptions = []
-      for (let i = 0; i < this.grids.length; i++) {
+      for (let i = 0; i < this.chartData[this.chartID].grid.length; i++) {
        this.gridOptions.push({
          id: i,
          value: String(i),
@@ -291,7 +285,7 @@ export default {
      this.deviceSelectY = ''
      this.gridSelection = ''
    },
-    addRegisterDeviceChannel: function (gridIndex) {
+    async addRegisterDeviceChannel (gridIndex) {
      let deviceNameX
      let deviceNameY
      const deviceIDX = this.deviceSelectX.id
@@ -320,9 +314,18 @@ export default {
      } else if (this.deviceSelectY.name.indexOf('Time') >= 0) {
        deviceNameY = 'Time'
      }
-      chartData.register(this.chartID, gridIndex, deviceNameX, deviceIDX, channelX, deviceNameY, deviceIDY, channelY, null)
-      //  console.log(this.chartID, gridIndex, deviceNameX, deviceIDX, channelX, deviceNameY, deviceIDY, channelY, null)
-      //  console.log(this.deviceSelectX, this.channelSelectX, this.deviceSelectY, this.channelSelectY)
+
+      this.taskContentChartRegister({
+        chartID: this.chartID,
+        gridIndex: gridIndex,
+        deviceNameX: deviceNameX,
+        deviceIDX: deviceIDX,
+        channelX: channelX,
+        deviceNameY: deviceNameY,
+        deviceIDY: deviceIDY,
+        channelY: channelY,
+        formula: null,
+      })
      if (deviceNameX !== 'Time') {
        this.sourceList.push([this.deviceSelectX.name, deviceIDX, channelX].toString())
      }
@@ -331,19 +334,15 @@ export default {
      }
      this.sourceAddStatus = true
      this.clearSelectOptions()
+      await this.taskContentChartSaveToCache()
    },
-    addGrid () {
-      chartData.updateGridList(this.chartID, chartData.getAllChartsData()[this.chartID].grid.length + 1)
-      this.grids = chartData.getAllChartsData()[this.chartID].grid
-      this.treeKey++
-      this.gridOptions = []
-      for (let i = 0; i < this.grids.length; i++) {
-        this.gridOptions.push({
-          id: i,
-          value: String(i),
-        })
-      }
-      //  console.log(chartData.getAllChartsData()[this.chartID])
+    async addGrid () {
+      this.taskContentChartUpdateGridList({
+        chartID: this.chartID,
+        length: this.chartData[this.chartID].grid.length + 1,
+      })
+      this.updateGridOptions()
+      await this.taskContentChartSaveToCache()
    },
    checkSourceAddStatus () {
      if (this.sourceList.indexOf([this.deviceSelectX.name, this.deviceSelectX.id, this.channelSelectX.id].toString()) >= 0) {
@@ -371,17 +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)
    },
-    mounted () {
-    },
+
+    ...mapActions('taskContent', [
+      taskTypes.chart.register,
+      taskTypes.chart.updateGridList,
+      taskTypes.chart.saveToCache,
+    ]),
+  },
+  mounted () {
+    this.updateGridOptions()
  },
 }
 </script>
@@ -10,7 +10,7 @@
      @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"
          >
@@ -38,14 +38,16 @@
            </va-item-section>

            <va-item-section class="mr-3" v-if="device.type == 'Neulive'" side>
-              <va-icon
-                name="material-icons"
+              <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)"
-              > sd_card
-              </va-icon>
+              >
+              </va-icon> -->
              <va-icon
+                size="1rem"
                :name="(device.transmission_type === 0) ? 'fa fa-bluetooth-b' : 'fa fa-usb'"
                color="primary"
              >
@@ -29,22 +29,6 @@
          @detect="detectDevice($event)"
          @sd_card_status="sdCardStatus($event)"
        />
-
-        <!-- <div class="row flex xs12 md12 xl12 sm12 mt-2" style="text-align: center;">
-          <div class="xs10 md10 xl10 sm10">
-            <va-select
-              small
-              v-model="deviceSelect"
-              textBy="name"
-              :options="deviceOptions"
-            />
-          </div>
-          <div>
-            <va-button class="ma-0" color="primary" target="_blank" @click="addDevice(deviceSelect.id)" :disabled="deviceSelect.id == null">
-              REGISTER
-            </va-button>
-          </div>
-        </div> -->
      </div>

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

 export default {
  name: 'TaskDevices',
@@ -108,16 +93,8 @@ export default {
    },
    loadingDone: async function () {
      this.state.LOADING = false
-      // const ret = await api.task.getAll()
-      // if (ret.data.length > 0) {
-      //   for (const device in ret.data[0].device_config) {
-      //     if (ret.data[0].device_config[device].device_address) {

-      //     }
-      //   }
-      // }
-      //  // console.log(this.deviceOptions)
-      for (let i = 0; i <= 11; i++) {
+      for (let i = 0; i <= 11; i++) { // 0~7: memboard, 8~11: usb
        if (taskInfo.getDeviceInfoByRawID(i).info.status === 'connected') {
          const index = this.deviceList.findIndex(d => taskInfo.getRawDeviceID(d.id) === i)
          if (index < 0) {
@@ -137,19 +114,16 @@ export default {
        name: 'Time',
      })
      taskInfo.getDeviceList().push(...this.deviceList)
-      //  // console.log(taskInfo.getDeviceList())
-      // for (let i = this.deviceOptions.length - 1; i >= 0; i--) {
-      //   this.deviceSelect = this.deviceOptions[i]
-      //   await this.addDevice(this.deviceOptions[i].id)
-      //   // this.sleep(500).then(() => {
-      //   //   this.addDevice(this.deviceOptions[i].id)
-      //   // })
-      // }
    },
    startDevice: async function (device) {
      if (!taskInfo.getDeviceInfo(device.id).info.isSync) {
        if (taskInfo.getDeviceInfo(device.id).info.library_name.startsWith('Neulive')) {
-          await chartData.defaultChartGenerator(this.deviceList, device.id, null, 'device')
+          await this.taskContentChartDefaultChartGenerator({
+            _deviceList: this.deviceList,
+            _itemID: device.id,
+            _chartID: null,
+            _type: 'device',
+          })
          this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
            header: 'device_instruction/0',
            device: taskInfo.getRawDeviceID(device.id),
@@ -184,7 +158,12 @@ export default {
            }
          }

-          await chartData.defaultChartGenerator(this.deviceList, device.id, null, 'device')
+          await this.taskContentChartDefaultChartGenerator({
+            _deviceList: this.deviceList,
+            _itemID: device.id,
+            _chartID: null,
+            _type: 'device',
+          })
          this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
            header: 'device_instruction/0',
            device: taskInfo.getRawDeviceID(device.id),
@@ -208,12 +187,12 @@ export default {
          this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
            header: 'device_instruction/0',
            device: taskInfo.getRawDeviceID(device.id),
-            instruction: 'stop_record',
+            instruction: 'stop_stimulate',
          }))
          this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
            header: 'device_instruction/0',
            device: taskInfo.getRawDeviceID(device.id),
-            instruction: 'stop_stimulate',
+            instruction: 'stop_record',
          }))
          this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
            header: 'device_parameter/0',
@@ -248,7 +227,16 @@ export default {
      }, 5000)
    },
    record: async function (device) {
-      await chartData.defaultChartGenerator(this.deviceList, device.id, null, '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',
@@ -298,9 +286,11 @@ export default {
      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))
+      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({
@@ -405,9 +395,11 @@ export default {
          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)
+          if (taskInfo.getDeviceInfo(device.id).parameterSet.CONTINUOUS_STI < 0) {
+            this.stiTimeOut = setTimeout(() => {
+              this.stiStop(device)
+            }, (stiExTimeOut * 1000) + 3000)
+          }
        }
      })
    },
@@ -436,17 +428,10 @@ export default {
        },
      )
    },
-  },
-  async mounted () {
-    // this.pageMqttSub()
-    // for (const device in this.deviceOptions) {
-    //   this.deviceSelect = this.deviceOptions[device]
-    //   await this.addDevice()
-    // }
-  },
-  destroyed () {
-    // this.loadingDone()
-    // this.pageMqttUnSub()
+
+    ...mapActions('taskContent', [
+      taskTypes.chart.defaultChartGenerator,
+    ]),
  },
  watch: {
  },
@@ -36,12 +36,11 @@ import { FulfillingBouncingCircleSpinner } from 'epic-spinners'
 // import TaskDeviceList from './TaskDeviceList'
 import TaskDeviceListGM from './TaskDeviceListGM'
 import { taskInfo } from '@/data/task/TaskInfo'
-import { chartData } from '@/data/task/ChartsManagement'
 import { dataStreamBuffer } from '@/data/task/DataStreamBuffer'
 import api from '@/data/api'
 import { mapActions } from 'vuex'
 import { mapFields } from 'vuex-map-fields'
-import types from '@/store/modules/task/content/types'
+import taskTypes from '@/store/modules/task/content/types'

 export default {
  name: 'TaskDevices',
@@ -111,14 +110,6 @@ export default {
        name: 'Time',
      })
      taskInfo.getDeviceList().push(...this.deviceList)
-      // console.log('ppp', taskInfo.getDeviceList(), this.deviceList)
-      // for (let i = this.deviceOptions.length - 1; i >= 0; i--) {
-      //   this.deviceSelect = this.deviceOptions[i]
-      //   await this.addDevice(this.deviceOptions[i].id)
-      //   // this.sleep(500).then(() => {
-      //   //   this.addDevice(this.deviceOptions[i].id)
-      //   // })
-      // }
    },
    detectDevice: function (device) {
      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
@@ -146,6 +137,20 @@ export default {
        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({
@@ -155,7 +160,6 @@ export default {
          }))
        }
      })
-      await chartData.defaultChartGenerator(this.deviceList, device.id, null, 'device')
      if (!taskInfo.getDeviceInfo(device.id).info.isSync) {
        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
          header: 'device_instruction/0',
@@ -367,19 +371,15 @@ export default {
        },
      )
    },
-    ...mapActions('taskContent', [types.gimer.checkDeviceStatus]),
+
+    ...mapActions('taskContent', [
+      taskTypes.gimer.checkDeviceStatus,
+      taskTypes.chart.defaultChartGenerator,
+    ]),
  },
  async mounted () {
-    //  console.log('sss', taskInfo.getDeviceList(), this.deviceList)
-    // this.pageMqttSub()
-    // for (const device in this.deviceOptions) {
-    //   this.deviceSelect = this.deviceOptions[device]
-    //   await this.addDevice()
-    // }
  },
  destroyed () {
-    // this.loadingDone()
-    // this.pageMqttUnSub()
  },
  watch: {
  },
@@ -104,7 +104,8 @@

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

 export default {
  name: 'TaskFormula',
@@ -173,11 +174,16 @@ export default {
      this.formulaNumber--
      this.$emit('remove', this.formulaRemoveSelect.id)
    },
-    generate: function (formula) {
+    generate: async function (formula) {
      switch (formula.type) {
        case 'Sheet Resistance':
          formula.dataNow = 0
-          chartData.defaultChartGenerator(this.deviceList, formula.id, null, 'formula')
+          await this.taskContentChartDefaultChartGenerator({
+            _deviceList: this.deviceList,
+            _itemID: formula.id,
+            _chartID: null,
+            _type: 'formula',
+          })
          break
      }
      this.pageToast('The ' + formula.name + 'has been applied.')
@@ -192,6 +198,10 @@ export default {
        },
      )
    },
+
+    ...mapActions('taskContent', [
+      taskTypes.chart.defaultChartGenerator,
+    ]),
  },
  mounted () {
    // this.pageMqttSub()
@@ -2,6 +2,7 @@
  <div class="flex" >
    <va-tree-root >
      <va-tree-category
+        isOpen
        style="font-size: 20px;"
        :label="'Channels'">
        <va-tree-node>
@@ -129,7 +130,7 @@

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

 export default {
  name: 'NeuliveParameterRecording',
@@ -145,6 +146,11 @@ export default {
      default: 'Neulive',
    },
  },
+  computed: {
+    ...mapFields('taskContent', [
+      'chartData',
+    ]),
+  },
  data () {
    return {
      channelList: [],
@@ -204,6 +210,16 @@ export default {
          value: 20000,
          description: '20k',
        },
+        {
+          id: 7,
+          value: 25000,
+          description: '25k',
+        },
+        {
+          id: 8,
+          value: 31250,
+          description: '31.25k',
+        },
      ],
      acceleratorSensitivitySelect: null,
      acceleratorSensitivityOptions: [
@@ -242,11 +258,13 @@ export default {
    },
    refresh () {
      this.channelList.length = 0
+      taskInfo.getDeviceInfo(this.deviceID).parameterSet.CH_LIST = Array(16).fill(0)
      const channelSet = taskInfo.getDeviceInfo(this.deviceID).parameterSet.RECORDING_CH.toString(2).split('').reverse()
-      taskInfo.getDeviceInfo(this.deviceID).parameterSet.CH_NUMBER = 1
+      taskInfo.getDeviceInfo(this.deviceID).parameterSet.CH_NUMBER = 0
      channelSet.forEach((element, index) => {
        if (parseInt(element) > 0) {
          this.channelList.push(index + 1)
+          taskInfo.getDeviceInfo(this.deviceID).parameterSet.CH_LIST[index] = 1
          taskInfo.getDeviceInfo(this.deviceID).parameterSet.CH_NUMBER += 1
        }
      })
@@ -330,7 +348,7 @@ export default {
    },
    sampleRateSelectChange () {
      if (this.sampleRateSelect != null && this.sampleRateSelect.value !== ((taskInfo.getDeviceInfo(this.deviceID).parameterSet.SAMPLE_RATE))) {
-        const adcClock = 8e5 / this.sampleRateSelect.value
+        const adcClock = 1e6 / this.sampleRateSelect.value
        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
          header: 'device_parameter/0',
          device: taskInfo.getRawDeviceID(this.deviceID),
@@ -371,7 +389,7 @@ export default {
          device: taskInfo.getRawDeviceID(this.deviceID),
          content: this.acceleratorSensitivitySelect.value,
        }))
-        const charts = chartData.getAllChartsData()
+        const charts = this.chartData
        for (const chartID in charts) {
          for (const seriesIndex in charts[chartID].series) {
            if (charts[chartID].series[seriesIndex].yAxisSource[1] >= 256 && charts[chartID].series[seriesIndex].yAxisSource[1] <= 260) {
@@ -130,7 +130,7 @@

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

 export default {
  name: 'NeuliveParameterRecording',
@@ -146,6 +146,11 @@ export default {
      default: 'Neulive',
    },
  },
+  computed: {
+    ...mapFields('taskContent', [
+      'chartData',
+    ]),
+  },
  data () {
    return {
      channelList: [],
@@ -202,43 +207,43 @@ export default {
        },
        {
          id: 6,
+          value: 16000,
+          description: '16k',
+        },
+        {
+          id: 7,
          value: 20000,
          description: '20k',
        },
        {
-          id: 7,
-          value: 30000,
-          description: '30k',
+          id: 8,
+          value: 25000,
+          description: '25k',
        },
        {
-          id: 8,
+          id: 9,
+          value: 32000,
+          description: '32k',
+        },
+        {
+          id: 10,
          value: 40000,
          description: '40k',
        },
        {
-          id: 9,
+          id: 11,
          value: 50000,
          description: '50k',
        },
-        {
-          id: 10,
-          value: 60000,
-          description: '60k',
-        },
-        {
-          id: 11,
-          value: 70000,
-          description: '70k',
-        },
        {
          id: 12,
-          value: 80000,
-          description: '80k',
+          value: 64000,
+          description: '64k',
        },
        {
          id: 13,
-          value: 90000,
-          description: '90k',
+          value: 80000,
+          description: '80k',
        },
        {
          id: 14,
@@ -284,11 +289,13 @@ export default {
    refresh () {
      this.channelList.length = 0
      // todo RECORDING_CH to RECORDING_CH_H & L
+      taskInfo.getDeviceInfo(this.deviceID).parameterSet.CH_LIST = Array(32).fill(0)
      const channelSetLow = taskInfo.getDeviceInfo(this.deviceID).parameterSet.RECORDING_CH_L.toString(2).split('').reverse()
      taskInfo.getDeviceInfo(this.deviceID).parameterSet.CH_NUMBER = 0
      channelSetLow.forEach((element, index) => {
        if (parseInt(element) > 0) {
          this.channelList.push(index + 1)
+          taskInfo.getDeviceInfo(this.deviceID).parameterSet.CH_LIST[index + 0] = 1
          taskInfo.getDeviceInfo(this.deviceID).parameterSet.CH_NUMBER += 1
        }
      })
@@ -296,6 +303,7 @@ export default {
      channelSetHight.forEach((element, index) => {
        if (parseInt(element) > 0) {
          this.channelList.push(index + 17)
+          taskInfo.getDeviceInfo(this.deviceID).parameterSet.CH_LIST[index + 16] = 1
          taskInfo.getDeviceInfo(this.deviceID).parameterSet.CH_NUMBER += 1
        }
      })
@@ -488,7 +496,7 @@ export default {
          device: taskInfo.getRawDeviceID(this.deviceID),
          content: this.acceleratorSensitivitySelect.value,
        }))
-        const charts = chartData.getAllChartsData()
+        const charts = this.chartData
        for (const chartID in charts) {
          for (const seriesIndex in charts[chartID].series) {
            if (charts[chartID].series[seriesIndex].yAxisSource[1] >= 256 && charts[chartID].series[seriesIndex].yAxisSource[1] <= 260) {
@@ -0,0 +1,589 @@
+<template>
+  <div class="flex" >
+    <va-tree-root >
+      <va-tree-category
+        style="font-size: 20px;"
+        :label="'Channels'">
+        <va-tree-node>
+          <div class="row">
+            <div class="flex sm12 xl12 md12 xs12">
+              <div
+                style='display: inline-block;'
+                v-for="channel in channelArray"
+                :key="channel"
+              >
+                <va-button
+                  class="ma-1 pa-0 circle-button"
+                  v-if="channelList != null && channelList.indexOf(channel) >= 0"
+                  @click="channelClickRemove(channel)"
+                  small
+                >
+                  {{channel}}
+                </va-button>
+                <va-button
+                  class="ma-1 pa-0 circle-button"
+                  v-if="channelList == null || channelList.indexOf(channel) < 0"
+                  @click="channelClickAdd(channel)"
+                  small outline
+                >
+                  {{channel}}
+                </va-button>
+              </div>
+            </div>
+          </div>
+        </va-tree-node>
+      </va-tree-category>
+
+      <va-tree-category
+        style="font-size: 20px;"
+        :label="'3-AXIS'">
+        <va-tree-node>
+          <div class="row">
+            <div class="flex sm12 xl12 md12 xs12">
+              <div
+                style='display: inline-block;'
+                v-for="axisChannel in ['x','y','z','m']"
+                :key="axisChannel"
+              >
+                <va-button
+                  class="ma-1 pa-0 circle-button"
+                  v-if="axisChannelList != null && axisChannelList.indexOf(axisChannel) >= 0"
+                  @click="axisChannelClickRemove(axisChannel)"
+                  small
+                >
+                  {{axisChannel}}
+                </va-button>
+                <va-button
+                  class="ma-1 pa-0 circle-button"
+                  v-if="axisChannelList == null || axisChannelList.indexOf(axisChannel) < 0"
+                  @click="axisChannelClickAdd(axisChannel)"
+                  small outline
+                >
+                  {{axisChannel}}
+                </va-button>
+              </div>
+            </div>
+          </div>
+        </va-tree-node>
+      </va-tree-category>
+
+      <va-tree-category
+        style="font-size: 20px;"
+        :label="'Amp gain'">
+        <va-tree-node>
+          <div class="row">
+            <div class="flex sm12 xl12 md12 xs12">
+              <va-select
+                @input="ampGainSelectChange()"
+                :label="''"
+                v-model="ampGainSelect"
+                textBy="description"
+                :options="ampGainOptions"
+                :noClear='true'
+              />
+            </div>
+          </div>
+        </va-tree-node>
+      </va-tree-category>
+
+      <va-tree-category
+        style="font-size: 20px;"
+        :label="'Sample Rate'">
+        <va-tree-node>
+          <div class="row">
+            <div class="flex sm12 xl12 md12 xs12">
+              <va-select
+                @input="sampleRateSelectChange()"
+                :label="''"
+                v-model="sampleRateSelect"
+                textBy="description"
+                :options="sampleRateOptions"
+                :noClear='true'
+              />
+            </div>
+          </div>
+        </va-tree-node>
+      </va-tree-category>
+
+      <va-tree-category
+        style="font-size: 20px;"
+        :label="'Accelerator Sensitivity'">
+        <va-tree-node>
+          <div class="row">
+            <div class="flex sm12 xl12 md12 xs12">
+              <va-select
+                @input="acceleratorSensitivitySelectChange()"
+                :label="''"
+                v-model="acceleratorSensitivitySelect"
+                textBy="description"
+                :options="acceleratorSensitivityOptions"
+                :noClear='true'
+              />
+            </div>
+          </div>
+        </va-tree-node>
+      </va-tree-category>
+    </va-tree-root>
+
+  </div>
+</template>
+
+<script>
+import { taskInfo } from '../../../../data/task/TaskInfo'
+import { mapFields } from 'vuex-map-fields'
+
+export default {
+  name: 'NeuliveParameterRecording',
+  components: {
+  },
+  props: {
+    deviceID: {
+      type: Number,
+      required: true,
+    },
+    deviceName: {
+      type: String,
+      default: 'Neulive',
+    },
+  },
+  computed: {
+    ...mapFields('taskContent', [
+      'chartData',
+    ]),
+  },
+  data () {
+    return {
+      channelArray: Array.from({ length: 64 }, (_, i) => i + 1),
+      channelList: [],
+      ampGainSelect: null,
+      ampGainOptions: [
+        // {
+        //   id: 0,
+        //   description: '25',
+        // },
+        {
+          id: 0,
+          description: '100',
+        },
+        {
+          id: 2,
+          description: '300',
+        },
+        {
+          id: 1,
+          description: '500',
+        },
+      ],
+      sampleRateSelect: null,
+      sampleRateOptions: [
+        {
+          id: 0,
+          value: 1000,
+          description: '1k',
+        },
+        {
+          id: 1,
+          value: 2000,
+          description: '2k',
+        },
+        {
+          id: 2,
+          value: 4000,
+          description: '4k',
+        },
+        {
+          id: 3,
+          value: 5000,
+          description: '5k',
+        },
+        {
+          id: 4,
+          value: 8000,
+          description: '8k',
+        },
+        {
+          id: 5,
+          value: 10000,
+          description: '10k',
+        },
+        {
+          id: 6,
+          value: 20000,
+          description: '20k',
+        },
+        {
+          id: 7,
+          value: 30000,
+          description: '30k',
+        },
+        {
+          id: 8,
+          value: 40000,
+          description: '40k',
+        },
+        {
+          id: 9,
+          value: 50000,
+          description: '50k',
+        },
+        {
+          id: 10,
+          value: 60000,
+          description: '60k',
+        },
+        {
+          id: 11,
+          value: 70000,
+          description: '70k',
+        },
+        {
+          id: 12,
+          value: 80000,
+          description: '80k',
+        },
+        {
+          id: 13,
+          value: 90000,
+          description: '90k',
+        },
+        {
+          id: 14,
+          value: 100000,
+          description: '100k',
+        },
+      ],
+      acceleratorSensitivitySelect: null,
+      acceleratorSensitivityOptions: [
+        {
+          id: 0,
+          value: 3,
+          description: '2G',
+        },
+        {
+          id: 1,
+          value: 5,
+          description: '4G',
+        },
+        {
+          id: 2,
+          value: 8,
+          description: '8G',
+        },
+        {
+          id: 3,
+          value: 12,
+          description: '16G',
+        },
+      ],
+      // sampleRateInput: '1000',
+      // sampleRate: null,
+      recordOn: false,
+      axisChannelList: [],
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    mqttPub: function (topic, mes) {
+      this.$mqtt.publish(topic, mes)
+    },
+    refresh () {
+      this.channelList.length = 0
+      taskInfo.getDeviceInfo(this.deviceID).parameterSet.CH_LIST = Array(64).fill(0)
+      const channelSetLow = taskInfo.getDeviceInfo(this.deviceID).parameterSet.REC_CH_DEV00.toString(2).split('').reverse()
+      taskInfo.getDeviceInfo(this.deviceID).parameterSet.CH_NUMBER = 0
+      channelSetLow.forEach((element, index) => {
+        if (parseInt(element) > 0) {
+          this.channelList.push(index + 1)
+          taskInfo.getDeviceInfo(this.deviceID).parameterSet.CH_LIST[index + 0] = 1
+          taskInfo.getDeviceInfo(this.deviceID).parameterSet.CH_NUMBER += 1
+        }
+      })
+      const channelSetHight = taskInfo.getDeviceInfo(this.deviceID).parameterSet.REC_CH_DEV01.toString(2).split('').reverse()
+      channelSetHight.forEach((element, index) => {
+        if (parseInt(element) > 0) {
+          this.channelList.push(index + 33)
+          taskInfo.getDeviceInfo(this.deviceID).parameterSet.CH_LIST[index + 32] = 1
+          taskInfo.getDeviceInfo(this.deviceID).parameterSet.CH_NUMBER += 1
+        }
+      })
+      this.ampGainOptions.forEach(option => {
+        if (option.id === taskInfo.getDeviceInfo(this.deviceID).parameterSet.AMP_GAIN) {
+          this.ampGainSelect = option
+        }
+      })
+      this.sampleRateSelect = this.sampleRateOptions[this.sampleRateOptions.findIndex(ele => ele.value === taskInfo.getDeviceInfo(this.deviceID).parameterSet.SAMPLE_RATE)]
+      this.recordOn = taskInfo.getDeviceInfo(this.deviceID).parameterSet.RECORDING
+      this.axisChannelList.length = 0
+      const axisChannelSet = taskInfo.getDeviceInfo(this.deviceID).parameterSet.AXIS_CH.toString(2).split('').reverse()
+      axisChannelSet.forEach((element, index) => {
+        if (parseInt(element) === 1) {
+          if (index === 0) {
+            this.axisChannelList.push('x')
+          } else if (index === 1) {
+            this.axisChannelList.push('y')
+          } else if (index === 2) {
+            this.axisChannelList.push('z')
+          } else if (index === 3) {
+            this.axisChannelList.push('m')
+          }
+        }
+      })
+
+      this.acceleratorSensitivitySelect = this.acceleratorSensitivityOptions[taskInfo.getDeviceInfo(this.deviceID).parameterSet.ACCELERATOR_S]
+    },
+    channelClickAdd (val) {
+      if (this.channelList.indexOf(val) < 0 && val <= 32 && val > 0) {
+        this.channelList.push(val)
+
+        let channelSet = ''
+        for (let i = 32; i >= 1; i--) {
+          if (this.channelList.indexOf(i) >= 0) {
+            channelSet += '1'
+          } else {
+            channelSet += '0'
+          }
+        }
+        const channelValue = parseInt(channelSet, 2)
+
+        if (channelValue !== taskInfo.getDeviceInfo(this.deviceID).RECORDING_CH_L) {
+          this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+            header: 'device_parameter/0',
+            device: taskInfo.getRawDeviceID(this.deviceID),
+            parameter: 'REC_CH_DEV00',
+            content: channelValue,
+          }))
+        }
+      } else if (this.channelList.indexOf(val) < 0 && val <= 64 && val > 32) {
+        this.channelList.push(val)
+
+        let channelSet = ''
+        for (let i = 64; i >= 33; i--) {
+          if (this.channelList.indexOf(i) >= 0) {
+            channelSet += '1'
+          } else {
+            channelSet += '0'
+          }
+        }
+        const channelValue = parseInt(channelSet, 2)
+
+        if (channelValue !== taskInfo.getDeviceInfo(this.deviceID).RECORDING_CH_H) {
+          this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+            header: 'device_parameter/0',
+            device: taskInfo.getRawDeviceID(this.deviceID),
+            parameter: 'REC_CH_DEV01',
+            content: channelValue,
+          }))
+        }
+      } else {
+        this.pageToast('Recording channels cannot choose more than 64.')
+      }
+    },
+    channelClickRemove (val) {
+      if (this.channelList.indexOf(val) >= 0 && val <= 32 && val > 0) {
+        this.channelList.splice(this.channelList.indexOf(val), 1)
+        let channelSet = ''
+        for (let i = 32; i >= 1; i--) {
+          if (this.channelList.indexOf(i) >= 0) {
+            channelSet += '1'
+          } else {
+            channelSet += '0'
+          }
+        }
+        const channelValue = parseInt(channelSet, 2)
+        if (channelValue !== taskInfo.getDeviceInfo(this.deviceID).RECORDING_CH_L) {
+          this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+            header: 'device_parameter/0',
+            device: taskInfo.getRawDeviceID(this.deviceID),
+            parameter: 'REC_CH_DEV00',
+            content: channelValue,
+          }))
+        }
+      } else if (this.channelList.indexOf(val) >= 0 && val <= 64 && val > 32) {
+        this.channelList.splice(this.channelList.indexOf(val), 1)
+        let channelSet = ''
+        for (let i = 64; i >= 33; i--) {
+          if (this.channelList.indexOf(i) >= 0) {
+            channelSet += '1'
+          } else {
+            channelSet += '0'
+          }
+        }
+        const channelValue = parseInt(channelSet, 2)
+        if (channelValue !== taskInfo.getDeviceInfo(this.deviceID).RECORDING_CH_H) {
+          this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+            header: 'device_parameter/0',
+            device: taskInfo.getRawDeviceID(this.deviceID),
+            parameter: 'REC_CH_DEV01',
+            content: channelValue,
+          }))
+        }
+      }
+    },
+    ampGainSelectChange () {
+      if (this.ampGainSelect != null && this.ampGainSelect.id !== ((taskInfo.getDeviceInfo(this.deviceID).parameterSet.AMP_GAIN) % 4)) {
+        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+          header: 'device_parameter/0',
+          device: taskInfo.getRawDeviceID(this.deviceID),
+          parameter: 'AMP_GAIN',
+          content: ((this.ampGainSelect.id) % 4),
+        }))
+      }
+    },
+    sampleRateSelectChange () {
+      if (this.sampleRateSelect != null && this.sampleRateSelect.value !== ((taskInfo.getDeviceInfo(this.deviceID).parameterSet.SAMPLE_RATE))) {
+        const adcClock = 8e6 / this.sampleRateSelect.value
+        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+          header: 'device_parameter/0',
+          device: taskInfo.getRawDeviceID(this.deviceID),
+          parameter: 'SAMPLE_RATE|ADC_CLOCK',
+          content: `${this.sampleRateSelect.value}|${String(adcClock)}`,
+        }))
+      }
+    },
+    acceleratorSensitivitySelectChange () {
+      if (this.acceleratorSensitivitySelect != null && this.acceleratorSensitivitySelect.id !== ((taskInfo.getDeviceInfo(this.deviceID).parameterSet.ACCELERATOR_S))) {
+        let scaleRange
+        switch (this.acceleratorSensitivitySelect.id) {
+          case 0:
+            scaleRange = 200
+            break
+          case 1:
+            scaleRange = 400
+            break
+          case 2:
+            scaleRange = 800
+            break
+          case 3:
+            scaleRange = 1600
+            break
+          default:
+            scaleRange = 0
+            break
+        }
+
+        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+          header: 'device_parameter/0',
+          device: taskInfo.getRawDeviceID(this.deviceID),
+          parameter: 'ACCELERATOR_S',
+          content: this.acceleratorSensitivitySelect.id,
+        }))
+        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+          header: 'device_update_accelerator_sensitivity/0',
+          device: taskInfo.getRawDeviceID(this.deviceID),
+          content: this.acceleratorSensitivitySelect.value,
+        }))
+        const charts = this.chartData
+        for (const chartID in charts) {
+          for (const seriesIndex in charts[chartID].series) {
+            if (charts[chartID].series[seriesIndex].yAxisSource[1] >= 256 && charts[chartID].series[seriesIndex].yAxisSource[1] <= 260) {
+              if (parseInt(charts[chartID].series[seriesIndex].yAxisSource[1]) === 260) {
+                charts[chartID].yAxis[seriesIndex].min = 0
+                charts[chartID].yAxis[seriesIndex].max = Math.ceil(Math.sqrt(Math.pow(scaleRange, 2) * 3))
+              } else {
+                charts[chartID].yAxis[seriesIndex].min = -scaleRange
+                charts[chartID].yAxis[seriesIndex].max = scaleRange
+              }
+            }
+          }
+        }
+      }
+    },
+    recordClick () {
+      this.recordOn = !this.recordOn
+      if (this.recordOn) {
+        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+          header: 'device_instruction/0',
+          device: taskInfo.getRawDeviceID(this.deviceID),
+          instruction: 'record',
+        }))
+        this.$emit('record')
+      } else {
+        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+          header: 'device_instruction/0',
+          device: taskInfo.getRawDeviceID(this.deviceID),
+          instruction: 'stop_record',
+        }))
+        this.$emit('record_stop')
+      }
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_parameter/0',
+        device: taskInfo.getRawDeviceID(this.deviceID),
+        parameter: 'RECORDING',
+        content: this.recordOn,
+      }))
+    },
+    axisChannelClickAdd (val) {
+      if (this.axisChannelList.indexOf(val) < 0) {
+        const axisChannel = ['m', 'z', 'y', 'x']
+        this.axisChannelList.push(val)
+        let axisChannelSet = ''
+        for (const axis of axisChannel) {
+          if (this.axisChannelList.indexOf(axis) >= 0) {
+            axisChannelSet += '1'
+          } else {
+            axisChannelSet += '0'
+          }
+        }
+        const axisChannelValue = parseInt(axisChannelSet, 2)
+        if (axisChannelValue !== taskInfo.getDeviceInfo(this.deviceID).AXIS_CH) {
+          this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+            header: 'device_parameter/0',
+            device: taskInfo.getRawDeviceID(this.deviceID),
+            parameter: 'AXIS_CH',
+            content: axisChannelValue,
+          }))
+        }
+      }
+    },
+    axisChannelClickRemove (val) {
+      if (this.axisChannelList.indexOf(val) >= 0) {
+        const axisChannel = ['m', 'z', 'y', 'x']
+        this.axisChannelList.splice(this.axisChannelList.indexOf(val), 1)
+        let axisChannelSet = ''
+        for (const axis of axisChannel) {
+          if (this.axisChannelList.indexOf(axis) >= 0) {
+            axisChannelSet += '1'
+          } else {
+            axisChannelSet += '0'
+          }
+        }
+        const axisChannelValue = parseInt(axisChannelSet, 2)
+        if (axisChannelValue !== taskInfo.getDeviceInfo(this.deviceID).AXIS_CH) {
+          this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+            header: 'device_parameter/0',
+            device: taskInfo.getRawDeviceID(this.deviceID),
+            parameter: 'AXIS_CH',
+            content: axisChannelValue,
+          }))
+        }
+      }
+    },
+    pageToast: function (mes) {
+      this.showToast(
+        mes,
+        {
+          icon: 'fa-bell',
+          position: 'bottom-right',
+          duration: 4000,
+        },
+      )
+    },
+  },
+  mounted () {
+    this.refresh()
+  },
+  destroyed () {
+  },
+  watch: {
+  },
+}
+</script>
+
+<style lang="scss">
+  .circle-button {
+    height: 25px;
+    width: 25px;
+    border-radius: '50%';
+  }
+</style>
@@ -167,6 +167,7 @@
              v-model="amplitudeNumber"
              :min="5"
              :max="4000"
+              :step="5"
            />
          </div>
        </div>
@@ -292,7 +293,7 @@
                0.1
              </va-button> -->
              <va-input
-                @keyup.enter="timeRangeChange(3, t3RangeInput)"
+                readonly
                v-model="t3RangeInput"
                class="mb-0"
                :label="'T3 RANGE'"
@@ -317,7 +318,6 @@
                0
              </va-button> -->
              <va-input
-                @keyup.enter="timeRangeChange(4, t4RangeInput)"
                readonly
                v-model="t4RangeInput"
                class="mb-0"
@@ -394,11 +394,11 @@ export default {
      cycleNumberSelect: null,
      cycleNumberOptions: [
        {
-          label: 'limite',
+          label: 'limited',
          value: 0,
        },
        {
-          label: 'Unlimite',
+          label: 'Unlimited',
          value: 1,
        },
      ],
@@ -637,24 +637,21 @@ export default {
      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)
-        }
+
+      val = parseInt(val)
+      const remainder = val % 5
+      if (remainder >= 3) {
+        val += (5 - remainder)
      } 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
-        }
+        val -= remainder
      }
+
+      if (isNaN(val) || val > 4000 || val < 5) {
+        val = 50
+      }
+      this.amplitudeNumberInput = String(val)
+      this.amplitudeNumber = val
+
      if (parseInt(this.amplitudeNumber / 5) !== parseInt(taskInfo.getDeviceInfo(this.deviceID).parameterSet.STI_AMPLITUDE)) {
        const content = parseInt(this.amplitudeNumber / 5)
        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
@@ -684,7 +681,7 @@ export default {
        this.t3Range = 0
      } else if (this.patternModeSelect === 1) {
        this.t2Range = 0
-        this.t3Range = 10
+        this.t3Range = this.t1Range
        this.t3RangeInput = String((this.t3Range * 10) / this.unitMultiply)
      }

@@ -770,28 +767,30 @@ export default {
      this.updateStiTRangeCheckParam()
    },
    timeRangeChange (stiIimeSelect, inputVal) {
-      inputVal = parseFloat(inputVal)
+      let tRangeInput = parseFloat(inputVal * this.unitMultiply)
+      const remainder = tRangeInput % 10
+      if (remainder >= 5) {
+        tRangeInput += (10 - remainder)
+      } else {
+        tRangeInput -= remainder
+      }

      switch (stiIimeSelect) {
        case 1:
-          this.t1RangeInput = inputVal
-          this.t1Range = parseFloat((inputVal * this.unitMultiply) / 10)
+          this.t1RangeInput = String(tRangeInput / this.unitMultiply)
+          this.t1Range = parseFloat(tRangeInput / 10)
+          if (this.patternModeSelect === 1) { // biphasic
+            this.t3RangeInput = this.t1RangeInput
+            this.t3Range = this.t1Range
+          }
          this.autoComputeT4()
          break
        case 2:
-          this.t2RangeInput = inputVal
-          this.t2Range = parseFloat((inputVal * this.unitMultiply) / 10)
+          this.t2RangeInput = String(tRangeInput / this.unitMultiply)
+          this.t2Range = parseFloat(tRangeInput / 10)
          this.autoComputeT4()
          break
-        case 3:
-          this.t3RangeInput = inputVal
-          this.t3Range = parseFloat((inputVal * this.unitMultiply) / 10)
-          this.autoComputeT4()
-          break
-        case 4:
-          this.t4RangeInput = inputVal
-          this.t4Range = parseFloat((inputVal * this.unitMultiply) / 10)
-          break
+        // T3 / T4 will be set automatically
      }

      const status1 = this.checkIndividualTRange(1, this.t1Range)
@@ -824,7 +823,7 @@ export default {
        this.t1RangeInput = String((this.t1Range * 10) / this.unitMultiply)
        this.t2Range = 10
        this.t2RangeInput = String((this.t2Range * 10) / this.unitMultiply)
-        this.t3Range = 10
+        this.t3Range = this.t1Range
        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)
@@ -862,8 +861,8 @@ export default {

      switch (stiIimeSelect) {
        case 1:
-          if (val < 100 || val > 10230) { // us
-            this.updateTRangeErrorMsg({ stiIimeSelect: stiIimeSelect, status: true, msg: '0.1ms <= T1 <= 10.23ms' })
+          if (val < 10 || val > 10230) { // us
+            this.updateTRangeErrorMsg({ stiIimeSelect: stiIimeSelect, status: true, msg: '0.01ms <= T1 <= 10.23ms' })
            return false
          } else if (val > this.periodNumber) {
            this.updateTRangeErrorMsg({ stiIimeSelect: stiIimeSelect, status: true, msg: 'T1 > PERIOD' })
@@ -890,8 +889,8 @@ export default {
          }
        case 3:
          if (this.patternModeSelect === 1) { // biphasic
-            if (val < 100 || val > 10230) { // us
-              this.updateTRangeErrorMsg({ stiIimeSelect: stiIimeSelect, status: true, msg: '0.1ms <= T3 <= 10.23ms' })
+            if (val < 10 || val > 10230) { // us
+              this.updateTRangeErrorMsg({ stiIimeSelect: stiIimeSelect, status: true, msg: '0.01ms <= T3 <= 10.23ms' })
              return false
            } else if (val > this.periodNumber) {
              this.updateTRangeErrorMsg({ stiIimeSelect: stiIimeSelect, status: true, msg: 'T3 > PERIOD' })
@@ -88,6 +88,7 @@
      <div class="mt-4">
        <div class="row sm12 xl12 md12 xs12">
          <p class="display-6">CYCLE NUMBER</p>
+          <va-button flat color="gray" icon="fa fa-info-circle" style="margin: 0.001rem; padding: 0.001rem;" @click.stop="toggleModal('SKETCHMAP')"/>
        </div>
        <div class="row">
          <div class="flex sm12 xl12 md12 xs12">
@@ -124,10 +125,10 @@
        </div>
      </div>

-      <div class="mt-4">
+      <div class="mt-4" v-if="cycleNumberSelect==0">
        <div class="row sm12 xl12 md12 xs12">
          <p class="display-6">REPEAT NUMBER</p>
-          <va-button flat color="gray" icon="fa fa-info-circle" style="margin: 0.001rem; padding: 0.001rem;" @click.stop="toggleModal('REPEAT')"/>
+          <va-button flat color="gray" icon="fa fa-info-circle" style="margin: 0.001rem; padding: 0.001rem;" @click.stop="toggleModal('SKETCHMAP')"/>
        </div>

        <div class="row">
@@ -153,10 +154,10 @@
        </div>
      </div>

-      <div class="mt-4">
+      <div class="mt-4" v-if="cycleNumberSelect==0">
        <div class="row sm12 xl12 md12 xs12">
          <p class="display-6">REPEAT INTERVAL = Ti = (Ts + Tr)</p>
-          <va-button flat color="gray" icon="fa fa-info-circle" style="margin: 0.001rem; padding: 0.001rem;" @click.stop="toggleModal('REPEAT')"/>
+          <va-button flat color="gray" icon="fa fa-info-circle" style="margin: 0.001rem; padding: 0.001rem;" @click.stop="toggleModal('SKETCHMAP')"/>
        </div>

        <div class="row">
@@ -203,16 +204,6 @@
                4000
              </va-button>
            </div>
-            <!-- <va-slider
-              class="flex sm12 xl12 md12 xs12"
-              @mouseup.native="amplitudeNumberChange(amplitudeNumber.PHASE1, 'PHASE1')"
-              @mouseleave.native="amplitudeNumberChange(amplitudeNumber.PHASE1, 'PHASE1')"
-              @touchend.native="amplitudeNumberChange(amplitudeNumber.PHASE1, 'PHASE1')"
-              value-visible
-              v-model="amplitudeNumber.PHASE1"
-              :min="5"
-              :max="4000"
-            /> -->
          </div>
        </div>
      </div>
@@ -288,7 +279,7 @@
        </div>

        <div class="row">
-          <div class="flex sm12 xl12 md12 xs12">
+          <div class="flex sm12 xl6 md6 xs12">
            <div class="flex row align--center">
              <va-input
                v-model="frequencyNumberInput"
@@ -302,10 +293,7 @@
              </va-input>
            </div>
          </div>
-        </div>
-
-        <div class="row">
-          <div class="flex sm12 xl12 md12 xs12">
+          <div class="flex sm12 xl6 md6 xs12">
            <div class="flex row align--center">
              <va-input
                v-model="periodNumberInput"
@@ -443,23 +431,27 @@
    >
      <img src='@/assets/img/sti_user_guide.png' class="sti_guideline">
    </va-modal>
-
    <va-modal
-      v-model="showGuideLineModal.REPEAT"
+      v-model="showGuideLineModal.SKETCHMAP"
      position="right"
      cancelText=""
    >
      <img src='@/assets/img/repeat.jpg' class="sti_guideline">
+      <p class="display-6 my-2"> Pattern: </p>
+      <chart :ref="'chart_ref'" :style="'width: '+ cardwidth + '; height: ' + cardheight + ';'" :options="sketchmapData" :auto-resize="true"></chart>
+      <neulive-parameter-stimulation-sketchmap-param class="my-2" :deviceID="deviceID" :unitMultiply="unitMultiply" />
    </va-modal>
  </div>
 </template>

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

 export default {
-  name: 'NeuliveParameterStimulation',
+  name: 'NeuliveParameterStimulation35',
  components: {
+    NeuliveParameterStimulationSketchmapParam,
  },
  props: {
    deviceID: {
@@ -473,7 +465,7 @@ export default {
  },
  data () {
    return {
-      showGuideLineModal: { ELECTRODE: false, PATTERN: false, REPEAT: false },
+      showGuideLineModal: { ELECTRODE: false, PATTERN: false, SKETCHMAP: false },
      stimulationOn: false,
      posChannelList: [2],
      negChannelList: [1],
@@ -492,11 +484,11 @@ export default {
      cycleNumberSelect: null,
      cycleNumberOptions: [
        {
-          label: 'limite',
+          label: 'limited',
          value: 0,
        },
        {
-          label: 'Unlimite',
+          label: 'Unlimited',
          value: 1,
        },
      ],
@@ -564,6 +556,34 @@ export default {
      t4RangeInput: '0',
      t4Range: 0,
      // t4RangeArray: Array(9).fill(0),
+      cardheight: '400px',
+      cardwidth: 'auto',
+      sketchmapData: {
+        xAxis: {
+          type: 'value',
+        },
+        yAxis: {
+          type: 'value',
+          axisLabel: {
+          },
+        },
+        tooltip: {
+          trigger: 'axis',
+        },
+        series: [
+          {
+            type: 'line',
+            step: 'start',
+            data: [],
+          },
+        ],
+        grid: {
+          top: '2%',
+          left: '10%',
+          right: '2%',
+          bottom: '6%',
+        },
+      },
    }
  },
  computed: {
@@ -829,13 +849,17 @@ export default {
      if (this.amplitudeNumber[type] == null) {
        return false
      }
-      if (typeof (val) === 'string') {
-        val = parseInt(parseInt(val) / 5) * 5
+
+      val = parseInt(val)
+      const remainder = val % 5
+      if (remainder >= 3) {
+        val += (5 - remainder)
+      } else {
+        val -= remainder
      }
-      if (isNaN(val) || parseInt(val) > 4000 || parseInt(val) < 5) {
+
+      if (isNaN(val) || val > 4000 || val < 5) {
        val = 50
-        this.amplitudeNumberInput[type] = '50'
-        this.amplitudeNumber[type] = 50
      }
      this.amplitudeNumberInput[type] = String(val)
      this.amplitudeNumber[type] = val
@@ -931,10 +955,10 @@ export default {
        return false
      }

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

-      if (val < 80) { // us
+      if (val < 10) { // us
        for (const tRange of [1, 2, 3, 4]) {
          this.updateTRangeErrorMsg({ stiIimeSelect: tRange, status: true, msg: 'Period < 0.08ms' })
        }
@@ -0,0 +1,139 @@
+<template>
+  <div>
+    <p class="display-6">
+      Frequency: {{ frequencyNumberInput }} Hz
+    </p>
+    <p class="display-6">
+      Period: {{ periodNumberInput + unit }}
+    </p>
+    <p class="display-6">
+      T1: {{ t1RangeInput + unit }}
+    </p>
+    <p class="display-6">
+      T2: {{ t2RangeInput + unit }}
+    </p>
+    <p class="display-6">
+      T3: {{ t3RangeInput + unit }}
+    </p>
+    <p class="display-6">
+      T4: {{ t4RangeInput + unit }}
+    </p>
+    <p class="display-6">
+      Cycle: {{ cycleNumberInput }}
+    </p>
+    <p class="display-6">
+      Repeat: {{ repeatNumberInput }}
+    </p>
+    <p class="display-6" v-if="cycleNumberSelect === 0">
+      Ts: {{ periodNumberInput * cycleNumberInput + unit }}
+    </p>
+    <p class="display-6" v-if="cycleNumberSelect === 1">
+      Ts: ∞
+    </p>
+    <p class="display-6">
+      Tr: {{ repeatIntervalInput + unit }}
+    </p>
+    <p class="display-6" v-if="cycleNumberSelect === 0">
+      Ti: {{ String(parseFloat(periodNumberInput * cycleNumberInput) + parseFloat(repeatIntervalInput)) + unit }}
+    </p>
+    <p class="display-6" v-if="cycleNumberSelect === 1">
+      Ti: ∞
+    </p>
+  </div>
+</template>
+
+<script>
+import { taskInfo } from '../../../../data/task/TaskInfo'
+
+export default {
+  name: 'NeuliveParameterStimulationSketchmapParam',
+  components: {
+  },
+  props: {
+    deviceID: {
+      type: Number,
+      required: true,
+    },
+    unitMultiply: {
+      type: Number,
+      required: true,
+    },
+  },
+  computed: {
+  },
+  data () {
+    return {
+      unit: 'ms',
+      cycleNumberSelect: null,
+      cycleNumberInput: '1',
+      repeatNumberInput: '1',
+      repeatInterval: 65535, // ms
+      repeatIntervalInput: '65.54', // s
+      // cycleNumberArray: Array(9).fill(1),
+      amplitudeNumberInput: {
+        PHASE1: '50',
+        PHASE2: '50',
+      },
+      amplitudeNumber: {
+        PHASE1: 50,
+        PHASE2: 50,
+      },
+      frequencyNumberInput: '0',
+      frequencyNumber: 0,
+      periodNumberInput: '0',
+      periodNumber: 0,
+      t1RangeInput: '0',
+      t1Range: 0,
+      t2RangeInput: '0',
+      t2Range: 0,
+      t3RangeInput: '0',
+      t3Range: 0,
+      t4RangeInput: '0',
+      t4Range: 0,
+    }
+  },
+  methods: {
+    getUnit () {
+      if (this.unitMultiply === 1e6) {
+        return 's'
+      } else if (this.unitMultiply === 1e3) {
+        return 'ms'
+      } else {
+        return 'us'
+      }
+    },
+    refresh () {
+      this.unit = this.getUnit()
+      this.cycleNumberSelect = taskInfo.getDeviceInfo(this.deviceID).parameterSet.CONTINUOUS_STI ? 1 : 0
+      this.cycleNumberInput = this.cycleNumberSelect === 1 ? '∞' : String(taskInfo.getDeviceInfo(this.deviceID).parameterSet.STI_CYCLE_CH0 + 1)
+      this.repeatNumberInput = String(taskInfo.getDeviceInfo(this.deviceID).parameterSet.REPEAT_TIME_littleEndian)
+      this.repeatInterval = (taskInfo.getDeviceInfo(this.deviceID).parameterSet.REPEAT_INTERVAL_littleEndian) // unit: ms
+      this.repeatIntervalInput = String(this.repeatInterval * 1e3 / this.unitMultiply)
+      this.amplitudeNumber.PHASE1 = taskInfo.getDeviceInfo(this.deviceID).parameterSet.STI_AMPLITUDE_L1 * 5
+      this.amplitudeNumberInput.PHASE1 = String(this.amplitudeNumber.PHASE1)
+      this.amplitudeNumber.PHASE2 = taskInfo.getDeviceInfo(this.deviceID).parameterSet.STI_AMPLITUDE_H3 * 5
+      this.amplitudeNumberInput.PHASE2 = String(this.amplitudeNumber.PHASE2)
+
+      this.t1Range = taskInfo.getDeviceInfo(this.deviceID).parameterSet.STI_T1_CH0
+      this.t1RangeInput = String((this.t1Range * 10) / this.unitMultiply)
+      this.t2Range = taskInfo.getDeviceInfo(this.deviceID).parameterSet.STI_T2_CH0
+      this.t2RangeInput = String((this.t2Range * 10) / this.unitMultiply)
+      this.t3Range = taskInfo.getDeviceInfo(this.deviceID).parameterSet.STI_T3_CH0
+      this.t3RangeInput = String((this.t3Range * 10) / this.unitMultiply)
+      this.t4Range = taskInfo.getDeviceInfo(this.deviceID).parameterSet.STI_T4_CH0
+      this.t4RangeInput = String((this.t4Range * 10) / this.unitMultiply)
+
+      this.periodNumber = (this.t1Range + this.t2Range + this.t3Range + this.t4Range) * 10
+      this.periodNumberInput = String(this.periodNumber / this.unitMultiply)
+
+      if (this.periodNumber !== 0) {
+        this.frequencyNumber = (1e6 / this.periodNumber).toFixed(2)
+        this.frequencyNumberInput = String(this.frequencyNumber)
+      }
+    },
+  },
+  mounted () {
+    this.refresh()
+  },
+}
+</script>
@@ -3,15 +3,15 @@

    <va-tree-root>
      <va-tree-category
+        v-if="device != null"
+        isOpen
        style="font-size: 20px;"
        :label="'RECORDING'"
      >
        <va-tree-node>
          <neulive-parameter-recording
            v-if="
-              (device)
-                ? (device.info.library_name.indexOf('3.0') !== -1 || device.info.library_name.indexOf('3.1') !== -1)
-                : false
+              (device.info.library_name == 'Neulive3.0' || device.info.library_name == 'Neulive3.1')
            "
            :ref="'rec_ref'" :deviceID="deviceID"
            @record="start()"
@@ -19,9 +19,16 @@
          />
          <neulive-parameter-recording35
            v-if="
-              (device)
-                ? (device.info.library_name.indexOf('3.5') !== -1)
-                : false
+              (device.info.library_name == 'Neulive3.5')
+            "
+            :ref="'rec_ref'"
+            :deviceID="deviceID"
+            @record="start()"
+            @record_stop="stop()"
+          />
+          <neulive-parameter-recording35-ex
+            v-if="
+              (device.info.library_name == 'Neulive3.5ex')
            "
            :ref="'rec_ref'"
            :deviceID="deviceID"
@@ -31,24 +38,28 @@
        </va-tree-node>
      </va-tree-category>
      <va-tree-category
+        v-if="device != null"
        style="font-size: 20px;"
        :label="'STIMULATION'"
      >
        <va-tree-node>
          <neulive-parameter-stimulation
            v-if="
-              (device)
-                ? (device.info.library_name.indexOf('3.0') !== -1 || device.info.library_name.indexOf('3.1') !== -1)
-                : false
+              (device.info.library_name == 'Neulive3.0' || device.info.library_name == 'Neulive3.1')
            "
            :ref="'sti_ref'"
            :deviceID="deviceID"
          />
          <neulive-parameter-stimulation35
            v-if="
-              (device)
-                ? (device.info.library_name.indexOf('3.5') !== -1)
-                : false
+              (device.info.library_name == 'Neulive3.5')
+            "
+            :ref="'sti_ref'"
+            :deviceID="deviceID"
+          />
+          <neulive-parameter-stimulation35-ex
+            v-if="
+              (device.info.library_name == 'Neulive3.5ex')
            "
            :ref="'sti_ref'"
            :deviceID="deviceID"
@@ -76,6 +87,8 @@ import NeuliveParameterRecording from './NeuliveParameterRecording'
 import NeuliveParameterStimulation from './NeuliveParameterStimulation'
 import NeuliveParameterRecording35 from './NeuliveParameterRecording35'
 import NeuliveParameterStimulation35 from './NeuliveParameterStimulation35'
+import NeuliveParameterRecording35Ex from './NeuliveParameterRecording35Ex'
+import NeuliveParameterStimulation35Ex from './NeuliveParameterStimulation35Ex'
 import NeuliveParameterSetting from './NeuliveParameterSetting'

 export default {
@@ -85,6 +98,8 @@ export default {
    NeuliveParameterStimulation,
    NeuliveParameterRecording35,
    NeuliveParameterStimulation35,
+    NeuliveParameterRecording35Ex,
+    NeuliveParameterStimulation35Ex,
    NeuliveParameterSetting,
  },
  props: {
@@ -98,7 +98,6 @@

 <script>
 import { taskInfo } from '@/data/task/TaskInfo'
-import { chartData } from '@/data/task/ChartsManagement'
 import { mapActions } from 'vuex'
 import { mapFields } from 'vuex-map-fields'
 import types from '@/store/modules/task/content/types'
@@ -110,6 +109,7 @@ export default {
  computed: {
    ...mapFields('taskContent', [
      'deviceList',
+      'chartData',
    ]),
  },
  props: {
@@ -412,7 +412,7 @@ export default {
          device: taskInfo.getRawDeviceID(this.deviceID),
          content: this.acceleratorSensitivitySelect.value,
        }))
-        const charts = chartData.getAllChartsData()
+        const charts = this.chartData
        for (const chartID in charts) {
          for (const seriesIndex in charts[chartID].series) {
            if (charts[chartID].series[seriesIndex].yAxisSource[1] >= 256 && charts[chartID].series[seriesIndex].yAxisSource[1] <= 260) {
@@ -19,9 +19,29 @@ async function getJwtData () {
  setHeader(_jwt.data)
 }

+async function licenseCheck () {
+  const _header = auth.getHeader()
+  try {
+    return await api.axios.get('/public/auth/check_license', { headers: _header })
+  } catch (e) {
+    console.error(e)
+  }
+}
+
+async function licenseUpdate () {
+  const _header = auth.getHeader()
+  try {
+    return await api.axios.get('/public/auth/update_license', { headers: _header })
+  } catch (e) {
+    console.error(e)
+  }
+}
+
 const auth = {
  getHeader,
  getJwtData,
+  licenseCheck,
+  licenseUpdate,
 }

 export default auth
@@ -11,7 +11,7 @@ import analysis from './analysis'
 import sdcard from './sdcard'
 import connection from './connection'

-// axios.defaults.baseURL = 'http://192.168.3.208:3000'
+// axios.defaults.baseURL = 'http://192.168.3.211:3000'
 axios.defaults.baseURL = 'http://' + location.href.split('/')[2].split(':')[0] + ':3000'

 const api = {
@@ -30,7 +30,11 @@ async function upload (attrs) {

 async function getuuidList () {
  const _header = auth.getHeader()
-  return api.axios.get('/api/file/sdcard/get', { headers: _header }).then(response => response.data)
+  try {
+    return await api.axios.get('/api/file/sdcard/get', { headers: _header })
+  } catch (e) {
+    console.error(e)
+  }
 }

 const sdcard = {
@@ -1,9 +1,3 @@
-// import _global from '../global/global'
-// import { chartData } from './ChartsManagement'
-// import { taskInfo } from './TaskInfo'
-
-// const IIRFilter2 = IIRFilter.init(sos2)
-
 const _dataStreamBuffer = {}
 const _dataStreamBufferSize = 1000

@@ -4,7 +4,6 @@ import api from '@/data/api'

 const eliteImgUrl = require('@/assets/img/elite_img.png')
 const neuliveImgUrl = require('@/assets/img/neulive_img.png')
-// import { chartData } from './ChartsManagement'

 let _taskInfo = newTask()
 // show the devices which mac is included in task
@@ -98,7 +97,6 @@ export const taskInfo = {
      }
    }
    // _taskInfo.deviceAddrList = [[128, 111, 176, 237, 124, 140], [164, 218, 50, 212, 231, 58], [24, 4, 237, 55, 198, 53]]
-    // _taskInfo.chartNumber = _taskInfo.deviceAddrList.length
    await update()
    // return deviceList
  },
@@ -126,17 +124,6 @@ export const taskInfo = {
    _deviceListAll.length = 0
    _mappingList.length = 0
    deviceListState.length = 0
-    // _taskInfo.controllerID = ''
-    // _taskInfo.deviceAddrList.length = 0
-    // _taskInfo.taskDeviceID.length = 0
-    // _taskInfo.chartNumber = 0
-    // deviceListRegister.length = 0
-    // for (const device in _taskInfo.deviceList) {
-    //   _taskInfo.deviceList[device].info.status = ''
-    //   _taskInfo.deviceList[device].info.isSync = false
-    //   _taskInfo.deviceList[device].info.isStimulate = false
-    // }
-    // _taskInfo.formulaList.length = 0
  },

  deviceInfo: async (mes, deviceListState) => {
@@ -289,31 +276,6 @@ export const taskInfo = {
    await update()
  },

-  updateChartInfo: async () => {
-    // for (const chartID in _taskInfo.chartList) {
-    //   if (chartData.getChartsData(chartID) == null) {
-    //     chartData.init(chartID, 2000, 1, 1)
-    //   }
-    //   chartData.getChartsData(chartID).cardName = _taskInfo.chartList[chartID].cardName
-    //   chartData.getChartsData(chartID).run = _taskInfo.chartList[chartID].run
-    //   chartData.getChartsData(chartID).cardHeight = _taskInfo.chartList[chartID].cardHeight
-    //   chartData.getChartsData(chartID).cardWidth = _taskInfo.chartList[chartID].cardWidth
-    //   chartData.getChartsData(chartID).maxDots = _taskInfo.chartList[chartID].maxDots
-    //   chartData.getChartsData(chartID).samplingRate = _taskInfo.chartList[chartID].samplingRate
-    //   chartData.updateGridList(chartID, _taskInfo.chartList[chartID].grids.length)
-    //   for (let i = 0; i < _taskInfo.chartList[chartID].grids.length; i++) {
-    //     _taskInfo.chartList[chartID].grids[i].forEach(line => {
-    //       if (line.x[0] === -1) {
-    //         chartData.register('NeuLive', i, chartID, line.y[0], line.y[1])
-    //       } else {
-    //         chartData.register('Elite', i, chartID, line.x[0], line.x[1], line.y[0], line.y[1])
-    //       }
-    //     })
-    //   }
-    // }
-    // return _taskInfo
-  },
-
  getDevicePic: (libraryName) => {
    if (libraryName == null) {
      return false
@@ -15,6 +15,7 @@ function newChart (chartID) {
    run: false,
    timer: 0,
    legend: {
+      type: 'scroll',
      data: [],
      x: 'center',
      y: '92%',
@@ -3,32 +3,32 @@ function newSeries (type, legendName, xAxisIndex, yAxisIndex, xAxisSource, yAxis
    name: legendName,
    type: type,
    filter: [{
-      type: 'none',
-      order: 4,
+      type: 'notch',
+      order: 20,
      fs: 1000,
-      f0: 10,
-      f1: 20,
-      f2: 50,
+      f0: 0,
+      f1: 0,
+      f2: 0,
      sos: [],
      filter: null,
    },
    {
-      type: 'none',
-      order: 4,
+      type: 'notch',
+      order: 20,
      fs: 1000,
-      f0: 10,
-      f1: 20,
-      f2: 50,
+      f0: 0,
+      f1: 0,
+      f2: 0,
      sos: [],
      filter: null,
    },
    {
-      type: 'none',
-      order: 4,
+      type: 'notch',
+      order: 20,
      fs: 1000,
-      f0: 10,
-      f1: 20,
-      f2: 50,
+      f0: 0,
+      f1: 0,
+      f2: 0,
      sos: [],
      filter: null,
    }],
@@ -19,6 +19,7 @@ function newState () {
      },
    },
    isLoading: true,
+    licenseCheck: true,
  }
 }

@@ -154,6 +154,10 @@ function newParameterSet () {
    BLOCK_CH: 65535,
    REPEAT_TIME_littleEndian: 0,
    REPEAT_INTERVAL_littleEndian: 0,
+    // Neulive 3.5ex
+    REC_CH_DEV00: 0,
+    REC_CH_DEV01: 0,
+    CH_LIST: [],
    // Eilte
    ADC_LEVEL: 0,
    ADC_VALUE_I: 0,
@@ -43,6 +43,13 @@
  background: url('./../assets/icons/menu-collapsed.svg') no-repeat center center;
 }

+.i-sd-card {
+  @extend .i-nav;
+
+  color: red;
+  background: url('./../assets/icons/sd-card-solid.svg') no-repeat center;
+}
+
 // Catchall baseclass
 .glyphicon {
  position: relative;
@@ -18,7 +18,6 @@ $icon-font-svg-id: 'glyphicons_halflingsregular';
 $icon-font-path: './../fonts/';

 // Fonts //
-// @import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro);
@import '~@fontsource/source-sans-pro/index.css';
@import '~@fontsource/source-sans-pro/400.css';
@import '~@fontsource/source-sans-pro/700.css';
@@ -1,3 +1,4 @@
+import { getField } from 'vuex-map-fields'
 const config = state => state.app.config
 const palette = state => state.app.config.palette
 const isLoading = state => state.app.isLoading
@@ -6,4 +7,5 @@ export {
  config,
  palette,
  isLoading,
+  getField,
 }
@@ -92,7 +92,7 @@ const rawActs = {
      if (raw.sd_data !== null && raw.sd_data.length > 0) {
        const encodedData = raw.sd_data.split('"***"').slice(0, -1)
        const unzipDatas = encodedData.map(ctx => {
-          return ctx.split(' ')
+          return ctx.split(' ').filter(el => el !== '')
        })

        for (let i = 0; i <= unzipDatas.length - 1; i++) {
@@ -1,7 +1,9 @@
 import paramAct from './paramAct'
 import gimerAct from './gimerAct'
+import chartAct from './chartAct'

 export default {
  ...paramAct,
  ...gimerAct,
+  ...chartAct,
 }
@@ -4,6 +4,11 @@ function newState () {
    filter: {},
    showTaskModal: false,
    taskModalText: '[Recording] At least one channel is opened.',
+
+    chartData: {},
+    taskContentChartKey: 0,
+    taskContentChartPanelKey: 0,
+    taskContentChartNumber: 0,
  }
 }

@@ -1,5 +1,18 @@

 const types = {
+  chart: {
+    initCustomizedFromCache: 'taskContentChartInitCustomizedFromCache',
+    saveToCache: 'taskContentChartSaveToCache',
+    add: 'taskContentChartAdd',
+    registerFromCache: 'taskContentChartRegisterFromCache',
+    register: 'taskContentChartRegister',
+    updateGridList: 'taskContentChartUpdateGridList',
+    defaultChartGenerator: 'taskContentChartDefaultChartGenerator',
+    reset: 'taskContentChartReset',
+    refreshData: 'taskContentChartRefreshData',
+    refreshChart: 'taskContentChartRefreshChart',
+    refreshPanel: 'taskContentChartRefreshPanel',
+  },
  param: {
    checkIfRecordingSetDone: 'checkIfRecordingSetDoneParam',
    checkIfStimulationSetDone: 'checkIfStimulationSetDoneParam',
@@ -1,7 +1,9 @@
 import app from './app'
+import { updateField } from 'vuex-map-fields'

 const mutations = {
  ...app,
+  updateField,
 }

 export default mutations
Author	SHA1	Message	Date
Jordan Hsu	0ecd2b50dd	[fix] configuration refresh bug	2022-02-12 17:17:34 +08:00
Jordan Hsu	c984bebf6f	[modify] separate chartKey and panelKey	2022-01-14 17:26:13 +08:00
Jordan Hsu	06766f1ac4	[add] can save chart source setting	2022-01-14 15:54:06 +08:00
Jordan Hsu	9981958160	typo	2022-01-12 18:06:11 +08:00
Jordan Hsu	e1d6dbd38e	fix chart data display bug	2022-01-12 18:01:06 +08:00
Jordan Hsu	96b38e5570	fix cache chart bug	2022-01-12 15:52:23 +08:00
Jordan Hsu	ffd246124f	tmp	2022-01-10 17:12:27 +08:00
Jordan Hsu	834bcbc4df	add missing code	2022-01-10 15:56:25 +08:00
Jordan Hsu	8f6f437f14	[add] missing localforage package dependency	2022-01-10 15:49:17 +08:00
Jordan Hsu	e5bc63e5d5	[add] real-time chart add / remove update with cache	2022-01-10 15:38:55 +08:00
Jordan Hsu	5d3dbbac4f	[modify] real-time chart data object to vuex	2022-01-10 12:56:35 +08:00
Jordan Hsu	9a77e6dcff	[modify] neulive 3.5 sti constraint	2022-01-06 13:09:52 +08:00
peterlu14	5328bd76ba	[fix] sd data from api	2022-01-04 14:13:38 +08:00
Jordan Hsu	9d19fd3fc9	add neu 3.1 sample rate option	2022-01-04 11:14:46 +08:00
Alan Lin	1e2bf182bf	neu31 update adc_clk ratio formula	2022-01-04 11:03:23 +08:00
Alan Lin	288f9b325c	update download SD function	2021-12-27 18:22:03 +08:00
peterlu14	444663def3	Merge branch 'feature/dpv' into testing/security	2021-12-22 13:36:39 +08:00
Alan Lin	0afd9edd7b	[fix] download & sd_card click	2021-12-15 17:32:51 +08:00
TommyXin	d567186240	fix sti3.5ex channel display	2021-12-07 13:38:46 +08:00
TommyXin	cbb81add56	fix 3.5 sti ex ch error	2021-12-07 13:31:50 +08:00
TommyXin	c8dded35f5	neulive3.5 sti ex	2021-12-06 18:26:50 +08:00
TommyXin	d5dac7a9b3	Merge branch 'neulive_hide_gimer' into testing/security	2021-12-01 16:31:27 +08:00
TommyXin	1a183322ab	fix device id not found	2021-12-01 10:55:54 +08:00
TommyXin	7e401621c7	fix default chart generator only consider RECORDING_CH	2021-12-01 10:45:10 +08:00
TommyXin	1485eba2b3	fix check ch number	2021-11-30 10:31:59 +08:00
TommyXin	e908f73857	fix file can not show data	2021-11-29 18:40:30 +08:00
TommyXin	f587f2b689	fix sd-card api	2021-11-29 18:20:32 +08:00
TommyXin	12eb41fcad	fix sd-card icon	2021-11-29 17:38:34 +08:00
TommyXin	4a2b3f6a94	fix font error & auto get controller id	2021-11-29 17:03:34 +08:00
TommyXin	8e9dd79002	change id	2021-11-26 10:34:33 +08:00
TommyXin	ea2f9c6748	Merge branch 'neulive_hide_gimer' into testing/security	2021-11-26 10:31:42 +08:00
TommyXin	4af2178225	Merge remote-tracking branch 'origin/feature/AS_wish' into testing/security	2021-11-26 10:31:26 +08:00
peterlu14	cc451f53cc	[update] fix realtime filter channel & collapse open	2021-11-25 15:15:14 +08:00
Jordan Hsu	419b8e373f	[add] sti pattern sketch map	2021-11-25 15:13:55 +08:00
peterlu14	ffd2b611d3	[update] fix realtime filter channel & collapse open	2021-11-25 14:43:57 +08:00
Jordan Hsu	e05fa1c26b	[add] chart pointer	2021-11-25 11:00:19 +08:00
Jordan Hsu	98d431fac0	[modify] filter popup without confirm button	2021-11-25 10:31:50 +08:00
Jordan Hsu	c1fb4e3488	[add] select all / inverse select button	2021-11-24 18:17:55 +08:00
Jordan Hsu	3239728b0d	[add] auto-resize real-time grid	2021-11-24 17:54:06 +08:00
Jordan Hsu	8941e827c1	[add] individual grid iir filter	2021-11-24 15:14:06 +08:00
Jordan Hsu	d2eb180381	tmp	2021-11-23 18:14:59 +08:00
peterlu14	01a55781dd	[update] sdcard filename change & modal style	2021-11-23 16:39:39 +08:00
peterlu14	594fc9da13	[update] update message & api server fail not show	2021-11-22 18:38:06 +08:00
peterlu14	6b7828a944	[update] sd card upload show message	2021-11-19 18:03:14 +08:00
peterlu14	75db0a3c13	[update] new module vue notification	2021-11-18 20:42:15 +08:00
Alan Lin	802d6f7d3a	swap stop all ins	2021-11-18 17:22:10 +08:00
peterlu14	830e93d9d1	[update] notify rebuild	2021-11-18 14:15:52 +08:00
Jordan Hsu	09c46a282b	Merge remote-tracking branch 'origin/feature/download_offline' into neulive_hide_gimer	2021-11-18 12:04:44 +08:00
peterlu14	50693075f9	[update] add sercurity feature	2021-11-17 19:06:48 +08:00
peterlu14	dfbbcdedf1	[update] remove download time limit	2021-11-12 11:01:30 +08:00
peterlu14	282e435217	[update] add user guide	2021-11-10 16:22:23 +08:00
peterlu14	23d45cfa2f	[update] remove device store	2021-11-10 16:19:02 +08:00
peterlu14	da4049bf77	[update] remove guide doc	2021-11-10 16:08:52 +08:00
Jordan Hsu	25f36a54dd	[fix] pdf path error	2021-11-10 11:59:31 +08:00
Jordan Hsu	5e0b14c8e0	[add] device guideline pdf	2021-11-09 20:23:50 +08:00
peterlu14	36c72e27a6	Merge branch 'feature/download_offline' into neulive_hide_gimer	2021-11-05 18:40:24 +08:00
peterlu14	a141535fc9	Merge remote-tracking branch 'origin/feature/neulive31_35_sti_1104' into neulive_hide_gimer	2021-11-05 18:40:11 +08:00
peterlu14	50a2254d44	[update] hide gimer icon	2021-11-05 18:39:55 +08:00
Jordan Hsu	8e7f0ecb71	[modify] neulive 3.1/3.5 sti	2021-11-04 14:08:16 +08:00
TommyXin	fc65108051	fix bug repeat interval	2021-11-02 17:05:12 +08:00
TommyXin	ff0be97176	hide repeatNumber when unlimit cycle	2021-11-02 17:00:29 +08:00
TommyXin	6cdd0f772e	fix check recording channels	2021-11-02 16:29:34 +08:00
TommyXin	b61f51cab2	cycle unlimited no setStiTimeout & check recording one channel at least	2021-11-02 15:43:26 +08:00
				`@@ -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>`