[fix] configuration refresh bug

package-lock.json

@@ -1168,6 +1168,16 @@
         "minimist": "^1.2.0"
       }
     },
+    "@fontsource/source-code-pro": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/@fontsource/source-code-pro/-/source-code-pro-4.5.0.tgz",
+      "integrity": "sha512-IKB+oQfwjj9DzEM2sc5rO70BZV7+ksmZbB+1KzyiZp2VroPw7Lm1ovXBU2JYWIWXmNY+gDudvyZXZHE+6cG47Q=="
+    },
+    "@fontsource/source-sans-pro": {
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/@fontsource/source-sans-pro/-/source-sans-pro-4.5.1.tgz",
+      "integrity": "sha512-JYEldSfnqxoDVUL6QgqT8Fiyjh0p7WlKcqKNevzDylpWabdejVRyFzPhTk2ZceKZd02KEOaL+K462U6u0/PQiA=="
+    },
     "@hapi/address": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
@@ -7536,6 +7546,11 @@
         "schema-utils": "^2.5.0"
       }
     },
+    "file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
+    },
     "file-uri-to-path": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
@@ -8580,6 +8595,11 @@
       "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==",
       "dev": true
     },
+    "immediate": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha1-nbHb0Pr43m++D13V5Wu2BigN5ps="
+    },
     "import-cwd": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz",
@@ -10360,6 +10380,14 @@
         "type-check": "~0.3.2"
       }
     },
+    "lie": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/lie/-/lie-3.1.1.tgz",
+      "integrity": "sha1-mkNrLMd0bKWd56QfpGmz77dr2H4=",
+      "requires": {
+        "immediate": "~3.0.5"
+      }
+    },
     "lines-and-columns": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.1.6.tgz",
@@ -10924,6 +10952,14 @@
         }
       }
     },
+    "localforage": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/localforage/-/localforage-1.10.0.tgz",
+      "integrity": "sha512-14/H1aX7hzBBmmh7sGPd+AOMkkIrHM3Z1PAyGgZigA1H1p5O5ANnMyWzvpAETtG68/dC4pC0ncy3+PPGzXZHPg==",
+      "requires": {
+        "lie": "3.1.1"
+      }
+    },
     "locate-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
@@ -17255,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",

package.json

@@ -13,6 +13,8 @@
     "test:unit": "vue-cli-service test:unit"
   },
   "dependencies": {
+    "@fontsource/source-code-pro": "^4.5.0",
+    "@fontsource/source-sans-pro": "^4.5.1",
     "@types/jest": "^24.0.11",
     "amcharts3": "^3.21.14",
     "ammap3": "^3.21.14",
@@ -27,11 +29,13 @@
     "element-resize-detector": "^1.1.15",
     "epic-spinners": "^1.1.0",
     "extend": "3.0.2",
+    "file-saver": "^2.0.5",
     "flag-icon-css": "^3.4.5",
     "font-awesome": "^4.7.0",
     "google-maps": "^3.3.0",
     "ionicons": "^4.6.3",
     "leaflet-map": "^0.2.1",
+    "localforage": "^1.10.0",
     "lodash": "^4.17.21",
     "medium-editor": "^5.23.3",
     "normalize.css": "^8.0.1",
@@ -55,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",

public/index.html

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

src/app/main.js

@@ -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://' + location.href.split('/')[2] + ':8083')
 // Vue.use(VueMqtt, 'ws://' + '192.168.151.125' + ':8083')
-Vue.use(VueMqtt, 'ws://' + '192.168.3.48' + ':8083')
+// Vue.use(VueMqtt, 'ws://' + '192.168.3.211' + ':8083')
 
 Vue.prototype.GLOBAL = global_
 

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

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

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

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

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

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

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

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

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

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

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

@@ -40,13 +40,13 @@ export const navigationRoutes = {
       //   },
       // ],
     },
-    {
-      name: 'task-content-g-m',
-      displayName: 'Task-Gimer',
-      meta: {
-        iconClass: 'vuestic-iconset vuestic-iconset-statistics',
-      },
-    },
+    // {
+    //   name: 'task-content-g-m',
+    //   displayName: 'Gimer',
+    //   meta: {
+    //     iconClass: 'vuestic-iconset vuestic-iconset-statistics',
+    //   },
+    // },
     {
       name: 'file',
       displayName: 'File',

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

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

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

@@ -9,7 +9,7 @@
                 <span slot="header">Control Panel</span>
                 <div slot="body">
                   <div>
-                    <top-control-panel :ref="'top_control_panel'" @refreshChart="setOption" @changeAxis="changeAxis"/>
+                    <top-control-panel :ref="'top_control_panel'" @refreshChart="setOption" @changeAxis="changeAxis" @changeOverviewDataZoom="changeOverviewDataZoom"/>
                   </div>
                 </div>
               </va-collapse>
@@ -64,6 +64,9 @@ export default {
       'chartOverviewData',
       'chartDetailData',
       'currentScale',
+      'startTime',
+      'endTime',
+      'windowLength',
       'axisXDataType',
       'axisYDataType',
       'axisXLabelScale',
@@ -100,8 +103,6 @@ export default {
       detailchartheight: '88vh',
       dataInfo: {},
       maxTime: 0,
-      startTime: 0,
-      endTime: 0,
       zoomTime: 0,
       initDone: false,
       chartAreaClass: ['flex', 'xs12', 'sm12', 'md12', 'xl9', 'pa-0'],
@@ -230,21 +231,32 @@ export default {
         e.batch.forEach(dataZoom => {
           const id = parseInt(dataZoom.dataZoomId.substr(dataZoom.dataZoomId.length - 3, dataZoom.dataZoomId.length - 1))
           if (id === 1) {
-            this.startTime = this.maxTime * dataZoom.start / 100
-            this.endTime = this.maxTime * dataZoom.end / 100
+            this.startTime = parseInt(this.maxTime * dataZoom.start / 100)
+            this.endTime = parseInt(this.maxTime * dataZoom.end / 100)
+            this.windowLength = this.endTime - this.startTime
+            this.chartOverviewData.dataZoom[0].start = dataZoom.start
+            this.chartOverviewData.dataZoom[0].end = dataZoom.end
             // console.log(this.startTime, this.endTime)
           }
         })
       } else {
         const id = parseInt(e.dataZoomId.substr(e.dataZoomId.length - 3, e.dataZoomId.length - 1))
         if (id === 0) {
-          this.startTime = this.maxTime * e.start / 100
-          this.endTime = this.maxTime * e.end / 100
+          this.startTime = parseInt(this.maxTime * e.start / 100)
+          this.endTime = parseInt(this.maxTime * e.end / 100)
+          this.windowLength = this.endTime - this.startTime
+          this.chartOverviewData.dataZoom[0].start = e.start
+          this.chartOverviewData.dataZoom[0].end = e.end
           // console.log(this.startTime, this.endTime)
         }
       }
       this.zoomTime = 0
     },
+    changeOverviewDataZoom () {
+      this.chartOverviewData.dataZoom[0].start = this.startTime * 100 / this.maxTime
+      this.chartOverviewData.dataZoom[0].end = this.endTime * 100 / this.maxTime
+      this.$refs.chart_overview.mergeOptions(this.chartOverviewData)
+    },
     async computeResampleScale (meta, duration) {
       const sampleRate = meta.parameter_set.SAMPLE_RATE / 10
       const dataPointNum = (parseInt(duration) / 1e6) * sampleRate // us -> s: /1e6
@@ -323,6 +335,7 @@ export default {
         // push downloaded data to chart series
         let seriesIndex = 0
         for (const ch in this.dataInfo[meta]) {
+          this.chartOverviewData.series[seriesIndex].data.length = 0
           const dataList = this.dataInfo[meta][ch][scale]
           for (let i = 0; i < dataList.length; i++) {
             this.chartOverviewData.series[seriesIndex].data.push(...dataList[i].data)
@@ -372,9 +385,9 @@ export default {
         const dataListY = this.dataInfo[meta][channelY][scale]
 
         const isThisModeHasCycle = this.GLOBAL.hasCycleMode(metaInfo.parameter_set.MODE, metaInfo.device.library_name)
-        let startTime
-        let endTime
-        if (isThisModeHasCycle === true && this.axisXDataType.description !== 'Time') { // if有cycle的mode且目前x軸不為時間，抓出第一圈所在的時間段，初始化時先畫第一圈就好，加快初始時間
+        let _startTime
+        let _endTime
+        if (isThisModeHasCycle === true) {
           const cycleDataID = 3 // recorded cycle 所在的channel index
           const dataCycleList = this.dataInfo[meta][cycleDataID][this.currentScale]
           const cycleDataList = []
@@ -387,21 +400,21 @@ export default {
             }
           }
           const cycleDict = this.getCycleDictRec()(cycleDataList)
-          startTime = cycleDict[1][0] // [1]: 第一圈
-          endTime = cycleDict[1][1] // [1]: 第一圈
+          _startTime = cycleDict[1][0] // [1]: 第一圈
+          _endTime = cycleDict[1][1] // [1]: 第一圈
         } else {
-          startTime = this.startTimeCurrent
-          endTime = this.endTimeCurrent
+          _startTime = this.startTimeCurrent
+          _endTime = this.endTimeCurrent
         }
 
         let startIndex = 0
         let endIndex = 0
         // get the subfile index
         for (let i = 0; i < dataListY.length; i++) {
-          if (startTime >= parseInt(dataListY[i].start_time) && startTime <= parseInt(dataListY[i].end_time)) {
+          if (_startTime >= parseInt(dataListY[i].start_time) && _startTime <= parseInt(dataListY[i].end_time)) {
             startIndex = i
           }
-          if (endTime >= parseInt(dataListY[i].start_time) && endTime <= parseInt(dataListY[i].end_time)) {
+          if (_endTime >= parseInt(dataListY[i].start_time) && _endTime <= parseInt(dataListY[i].end_time)) {
             endIndex = i
           }
         }
@@ -414,7 +427,7 @@ export default {
           }
           for (let j = 0, len = data.length; j < len; j++) {
             // check which channel and push processed data (i.e. merge two channel data, now data is (time, value) format)
-            if (parseInt(data[j][0]) >= startTime && parseInt(data[j][0]) <= endTime) {
+            if (parseInt(data[j][0]) >= _startTime && parseInt(data[j][0]) <= _endTime) {
               const processedData = data[j]
               if (dataX !== undefined) {
                 processedData[0] = dataX[j][1]
@@ -432,8 +445,8 @@ export default {
         }
 
         if (this.axisXDataType.description === 'Time') {
-          this.chartDetailData.xAxis[_gridNumber].min = this.startTimeCurrent
-          this.chartDetailData.xAxis[_gridNumber].max = this.endTimeCurrent
+          this.chartDetailData.xAxis[_gridNumber].min = _startTime
+          this.chartDetailData.xAxis[_gridNumber].max = _endTime
         } else {
           this.chartDetailData.xAxis[_gridNumber].min = 'dataMin'
           this.chartDetailData.xAxis[_gridNumber].max = 'dataMax'
@@ -492,13 +505,16 @@ export default {
           channelY: this.axisYDataType.id + 1,
         })
       }
+      if (this.axisXDataType.description === 'Time') {
+        this.drawOverviewData()
+      }
       this.drawDetailData() // reDraw
     },
     ...mapActions('replay', [types.chart.init, types.chart.register, types.chart.clear, types.chart.updateGridList, types.chart.updateDataZoom, types.chart.setAxisDisplay]),
     ...mapActions('replay', [types.meta.init]),
     ...mapActions('replay', [types.rec.init, types.rec.intoData, types.rec.initDisplaySetting, types.rec.updateDisplaySetting]),
 
-    ...mapMutations('replay', [types.chart.updateRegistered, types.chart.updateAxisSplitNumber, types.chart.updateChartSampling]),
+    ...mapMutations('replay', [types.chart.updateRegistered, types.chart.updateAxisSplitNumber, types.chart.updateChartSampling, types.chart.setOverviewDataZoomStartAndEnd]),
     ...mapMutations('replay', [types.meta.updateByIndex]),
 
     ...mapGetters('replay', [types.meta.getAll]),
@@ -514,9 +530,9 @@ export default {
     console.log(this.metaList)
     console.log(this.dataInfo)
     await this.register()
+    this.setOverviewDataZoomStartAndEndChart()
     this.$refs.top_control_panel.init() // will call changeAxis() here
     this.$refs.set_min_max.init()
-    this.drawOverviewData()
     this.turnOnAxisEventHandler('click', 'yAxis.axisLabel', this.showMinMaxPanel, { axis: 'y' })
     this.updateAxisSplitNumberChart({ chartID: this.chartDetailData.chartID, axis: 'x' })
     this.updateAxisSplitNumberChart({ chartID: this.chartDetailData.chartID, axis: 'y' })
@@ -535,6 +551,9 @@ export default {
       delete this.chartData[id]
     }
     this.clearChart({ chartAllData: this.chartData })
+    this.startTime = 0
+    this.endTime = 0
+    this.windowLength = 0
   },
   destroyed () {
     clearInterval(this.dataZoomTimer)

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

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

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

@@ -7,7 +7,6 @@
 </template>
 
 <script>
-// import { chartData } from '../../../../data/task/ChartsManagement'
 
 export default {
   name: 'elite-replay-overview-chart',
@@ -54,6 +53,9 @@ export default {
     updateZoom: function (e) {
       this.$emit('dataZoomEvent', e)
     },
+    mergeOptions (options) {
+      this.$refs.chart_ref.mergeOptions(options)
+    },
     showLoading (options) {
       this.$refs.chart_ref.showLoading(options)
     },

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

@@ -1,28 +1,71 @@
 <template>
   <div>
     <va-card>
-      <div class="flex-container">
-        <edit-file-name class="flex-child" :ref="'edit_file_name'"/>
-        <download-file class="flex-child"/>
-        <delete-file class="flex-child"/>
+      <div class="flex-container mb-1">
+        <div class="flex sm8 xl8 md8 xs8 px-0 py-0">
+          <edit-file-name :ref="'edit_file_name'"/>
+        </div>
+        <div class="flex sm2 xl2 md2 xs2 px-0 py-0">
+          <download-file style="float: right;" />
+        </div>
+        <div class="flex sm2 xl2 md2 xs2 px-0 py-0">
+          <delete-file />
+        </div>
       </div>
-      <div class="flex-container">
-        <p class="display-6"> x axis <p/>
-        <change-axis class="flex-child" :ref="'change_axis_x'" axis="x" @changeAxis="changeAxis" @changeUnit="changeUnit" @clearCycle="clearCycle"/>
-        <change-unit class="flex-child" :ref="'change_unit_x'" axis="x" @refreshChart="refreshChart"/>
-        <change-scale class="flex-child" :ref="'change_scale_x'" axis="x" @refreshChart="refreshChart" @clearCycle="clearCycle" @changeAxis="changeAxis"/>
+
+      <div class="flex-container mb-2">
+        <div class="flex sm2 xl2 md2 xs2 px-0 py-0">
+          <p class="display-6"> X-axis <p/>
+        </div>
+        <div class="flex sm5 xl5 md5 xs5 pl-1 pr-0 py-0">
+          <change-axis :ref="'change_axis_x'" axis="x" @changeAxis="changeAxis" @changeUnit="changeUnit" @clearCycle="clearCycle"/>
+        </div>
+        <div class="flex sm5 xl5 md5 xs5 pl-1 pr-0 py-0">
+          <change-unit :ref="'change_unit_x'" axis="x" @refreshChart="refreshChart"/>
+        </div>
       </div>
-      <abs-toggle :ref="'abs_x'" axis="x" @changeAxis="changeAxis"/>
-      <div class="flex-container">
-        <p class="display-6"> y axis <p/>
-        <change-axis class="flex-child" :ref="'change_axis_y'" axis="y" @changeAxis="changeAxis" @changeUnit="changeUnit" @clearCycle="clearCycle"/>
-        <change-unit class="flex-child" :ref="'change_unit_y'" axis="y" @refreshChart="refreshChart"/>
-        <change-scale class="flex-child" :ref="'change_scale_y'" axis="y" @refreshChart="refreshChart" @clearCycle="clearCycle" @changeAxis="changeAxis"/>
+      <div class="flex-container mb-2">
+        <div class="flex sm2 xl2 md2 xs2 px-0 py-0" />
+        <div class="flex sm5 xl5 md5 xs5 pl-1 pr-0 py-0">
+          <change-scale :ref="'change_scale_x'" axis="x" @refreshChart="refreshChart" @clearCycle="clearCycle" @changeAxis="changeAxis"/>
+        </div>
+        <div class="flex sm5 xl5 md5 xs5 px-0 py-0">
+          <abs-toggle :ref="'abs_x'" axis="x" @changeAxis="changeAxis"/>
+        </div>
       </div>
-      <abs-toggle :ref="'abs_y'" axis="y" @changeAxis="changeAxis"/>
-      <change-cycle v-show="showCyclePanel" style="margin: 3px;" :ref="'change_cycle'" @refreshChart="refreshChart"/>
-      <show-resample-rate style="margin: 3px;"/>
-      <show-parameter style="margin: 3px;" :ref="'show_param'"/>
+
+      <div class="flex-container mb-2">
+        <div class="flex sm2 xl2 md2 xs2 px-0 py-0">
+          <p class="display-6"> Y-axis <p/>
+        </div>
+        <div class="flex sm5 xl5 md5 xs5 pl-1 pr-0 py-0">
+          <change-axis :ref="'change_axis_y'" axis="y" @changeAxis="changeAxis" @changeUnit="changeUnit" @clearCycle="clearCycle"/>
+        </div>
+        <div class="flex sm5 xl5 md5 xs5 pl-1 pr-0 py-0">
+          <change-unit :ref="'change_unit_y'" axis="y" @refreshChart="refreshChart"/>
+        </div>
+      </div>
+      <div class="flex-container mb-2">
+        <div class="flex sm2 xl2 md2 xs2 px-0 py-0" />
+        <div class="flex sm5 xl5 md5 xs5 pl-1 pr-0 py-0">
+          <change-scale :ref="'change_scale_y'" axis="y" @refreshChart="refreshChart" @clearCycle="clearCycle" @changeAxis="changeAxis"/>
+        </div>
+        <div class="flex sm5 xl5 md5 xs5 px-0 py-0">
+          <abs-toggle :ref="'abs_y'" axis="y" @changeAxis="changeAxis"/>
+        </div>
+      </div>
+
+      <div class="flex-container mb-2">
+        <div class="flex sm10 xl10 md10 xs10 px-0 py-0">
+          <change-window-start-and-size :ref="'change_window_start_and_size'" @changeOverviewDataZoom="changeOverviewDataZoom"/>
+        </div>
+        <div class="flex sm1 xl1 md1 xs1 px-0 py-0">
+          <lock-data-zoom :chartID="0"/>
+        </div>
+      </div>
+      <change-cycle v-show="showCyclePanel" :ref="'change_cycle'" @refreshChart="refreshChart"/>
+      <show-resample-rate/>
+      <show-parameter :ref="'show_param'"/>
     </va-card>
   </div>
 </template>
@@ -38,6 +81,8 @@ import DownloadFile from '@/components/analysis/replay/toolbox/DownloadFile.vue'
 import DeleteFile from '@/components/analysis/replay/toolbox/DeleteFile.vue'
 import EditFileName from '@/components/analysis/replay/toolbox/EditFileName.vue'
 import ShowParameter from '@/components/analysis/replay/toolbox/ShowParameter.vue'
+import LockDataZoom from '@/components/analysis/replay/toolbox/LockDataZoom.vue'
+import ChangeWindowStartAndSize from '@/components/analysis/replay/toolbox/ChangeWindowStartAndSize.vue'
 import { mapFields } from 'vuex-map-fields'
 
 export default {
@@ -53,6 +98,8 @@ export default {
     DeleteFile,
     EditFileName,
     ShowParameter,
+    LockDataZoom,
+    ChangeWindowStartAndSize,
   },
   computed: {
     ...mapFields('replay', [
@@ -86,6 +133,10 @@ export default {
       this.$refs.change_cycle.init()
       this.$refs.edit_file_name.init()
       this.$refs.show_param.init(this.deviceName)
+      this.$refs.change_window_start_and_size.init()
+    },
+    changeOverviewDataZoom () {
+      this.$emit('changeOverviewDataZoom')
     },
     refreshChart (options) {
       this.$emit('refreshChart', options)
@@ -112,15 +163,6 @@ export default {
 <style lang="scss">
   .flex-container {
     display: flex;
-    flex-wrap: wrap;
-  }
-
-  .flex-child {
-    flex-direction: row;
-    // flex: 2;
-  }
-
-  .flex-child:first-child {
-    margin-right: 1px;
+    align-items: center;
   }
 </style>

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

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

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

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

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

@@ -1,7 +1,14 @@
 <template>
   <div>
-    <p class="display-6">abs<p/>
-    <va-toggle v-model="absToggleStatus[axis]" small @click.native="performABS()"/>
+    <va-button
+      :color="buttonColor"
+      :key="clickTime"
+      v-model="absToggleStatus[axis]"
+      @click="performABS()"
+      class="round-button px-1 py-1"
+    >
+      ABS
+    </va-button>
   </div>
 </template>
 
@@ -9,7 +16,6 @@
 
 import { mapActions, mapMutations } from 'vuex'
 import { mapFields } from 'vuex-map-fields'
-import { download } from '@/data/download/Download'
 import types from '@/store/modules/analysis/replay/types'
 
 export default {
@@ -49,6 +55,8 @@ export default {
     return {
       metaID: 0,
       metaInfo: null,
+      buttonColor: 'gray',
+      clickTime: 0,
     }
   },
   mqtt: {
@@ -58,11 +66,15 @@ export default {
       this.deviceName = deviceName
       this.metaInfo = this.metaList[this.metaIndex]
       this.metaID = this.metaInfo.id
+      this.absToggleStatus[this.axis] = false
     },
     performABS () {
+      this.absToggleStatus[this.axis] = !this.absToggleStatus[this.axis]
       if (this.deviceName === 'EliteZM15' || this.deviceName === 'EliteEIS') {
         this.calculateHelper(this.metaIndex) // [TODO] elite tmp use metaIndex for grid index
       }
+      this.clickTime++
+      this.buttonColor = this.clickTime % 2 === 1 ? 'success' : 'gray'
     },
     async calculateHelper (gridIndex) {
       let seriesData
@@ -86,17 +98,6 @@ export default {
         }
       }
     },
-    getData: async function (scale, sampleMethod, id, channel, meta) {
-      if (scale === 1) {
-        return await download.rawByIDChannels(id, channel, meta)
-      } else {
-        if (sampleMethod === 'mean') {
-          return await download.miniMeanByIDChannel(id, channel, meta)
-        } else if (sampleMethod === 'random') {
-          return await download.miniRandomByIDChannel(id, channel, meta)
-        }
-      }
-    },
 
     ...mapActions('replay', [types.chart.setAxisDisplay]),
     ...mapMutations('replay', [types.chart.updateSeries]),
@@ -111,7 +112,7 @@ export default {
 </script>
 
 <style lang="scss">
-  .box_inline-block {
-    display: inline-block;
+  .round-button {
+    border-radius: 12px;
   }
 </style>

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

@@ -1,28 +1,48 @@
 <template>
   <div>
-    <div v-if="axis === 'x'" style="display: inline;">
-      <select v-if="deviceName!=='EliteEIS'" v-model="channelFormat" @change="changeAxis()">
-        <option v-for="option in channelOptions" :key="option.id" :value="option">
-          {{ option.description }}
-        </option>
-      </select>
-      <select v-if="deviceName==='EliteEIS'" v-model="channelFormat" @change="changeAxis()">
-        <option v-for="option in eisChannelOptions" :key="option.id" :value="option">
-          {{ option.description }}
-        </option>
-      </select>
+    <div v-if="axis === 'x'">
+      <va-select
+        @input="changeAxis()"
+        :label="''"
+        v-if="deviceName!=='EliteEIS'"
+        v-model="channelFormat"
+        textBy="description"
+        class="va-select-without-margin"
+        :options="channelOptions"
+        :noClear='true'
+      />
+      <va-select
+        @input="changeAxis()"
+        :label="''"
+        v-if="deviceName==='EliteEIS'"
+        v-model="channelFormat"
+        textBy="description"
+        class="va-select-without-margin"
+        :options="eisChannelOptions"
+        :noClear='true'
+      />
     </div>
-    <div v-if="axis === 'y'" style="display: inline;">
-      <select v-if="deviceName!=='EliteEIS'" v-model="channelFormat" @change="changeAxis()">
-        <option v-for="option in channelYOptions" :key="option.id" :value="option">
-          {{ option.description }}
-        </option>
-      </select>
-      <select v-if="deviceName==='EliteEIS'" v-model="channelFormat" @change="changeAxis()">
-        <option v-for="option in eisChannelYOptions" :key="option.id" :value="option">
-          {{ option.description }}
-        </option>
-      </select>
+    <div v-if="axis === 'y'">
+      <va-select
+        @input="changeAxis()"
+        :label="''"
+        v-if="deviceName!=='EliteEIS'"
+        v-model="channelFormat"
+        textBy="description"
+        class="va-select-without-margin"
+        :options="channelYOptions"
+        :noClear='true'
+      />
+      <va-select
+        @input="changeAxis()"
+        :label="''"
+        v-if="deviceName==='EliteEIS'"
+        v-model="channelFormat"
+        textBy="description"
+        class="va-select-without-margin"
+        :options="eisChannelYOptions"
+        :noClear='true'
+      />
     </div>
   </div>
 </template>
@@ -298,3 +318,11 @@ export default {
 }
 
 </script>
+
+<style lang="scss">
+  .va-select-without-margin {
+    .va-select {
+      margin-bottom: 0;
+    }
+  }
+</style>

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

@@ -34,13 +34,28 @@ export default {
     return {
       showPanel: false,
       metaID: 0,
-      showWhichCycles: '1',
       cycleNum: 0,
       cycleDataID: 3, // [TODO] manage by data type factory
     }
   },
   computed: {
-    slices: function () {
+    ...mapFields('replay', [
+      'chartData',
+      'recInfo',
+      'metaList',
+      'currentScale',
+      'sampleMethod',
+      'axisXDataType',
+      'axisYDataType',
+      'axisXLabelScale',
+      'axisYLabelScale',
+      'showWhichCycles',
+    ]),
+  },
+  watch: {
+  },
+  methods: {
+    slices () {
       const cycleList = this.showWhichCycles.split(',')
       if (cycleList.length === 1 && cycleList[0] === '') {
         return ''
@@ -58,24 +73,8 @@ export default {
       }
       const cycleSet = new Set(cycleList)
       const sortedCycleList = [...cycleSet].sort() // ref: https://stackoverflow.com/questions/33089695/how-can-i-sort-an-es6-set
-      // console.log(sortedCycleList)
       return sortedCycleList
     },
-    ...mapFields('replay', [
-      'chartData',
-      'recInfo',
-      'metaList',
-      'currentScale',
-      'sampleMethod',
-      'axisXDataType',
-      'axisYDataType',
-      'axisXLabelScale',
-      'axisYLabelScale',
-    ]),
-  },
-  watch: {
-  },
-  methods: {
     init () {
       this.cycleNum = this.metaList[this.metaIndex].parameter_set.CYCLE_NUMBER
       const meta = this.metaList[this.metaIndex]
@@ -104,13 +103,18 @@ export default {
           }
         }
         const cycleDict = this.getCycleDictRec()(cycleDataList)
-
-        const dataXList = this.recInfo[this.metaID][this.axisXDataType.id][this.currentScale]
+        this.cycleNum = Object.keys(cycleDict).length
+        let dataXList
+        if (this.axisXDataType.description !== 'Time') {
+          dataXList = this.recInfo[this.metaID][this.axisXDataType.id][this.currentScale]
+        }
         const dataYList = this.recInfo[this.metaID][this.axisYDataType.id][this.currentScale]
         const filteredData = []
+
+        let counter = 0
         for (let sliceIndex = 0; sliceIndex < this.cycleNum; sliceIndex++) {
           // console.log(this.slices)
-          if (this.slices === '' || this.slices.includes((sliceIndex + 1).toString())) {
+          if (this.slices() === '' || this.slices().includes((sliceIndex + 1).toString())) {
             // slice data
             const value = cycleDict[sliceIndex + 1]
             const startTime = value[0]
@@ -135,12 +139,12 @@ export default {
                     let x
                     let y
                     if (this.axisXLabelScale.description === 'Log') {
-                      x = Math.log10(Math.abs(dataX[j][1]))
+                      x = Math.abs(dataX[j][1])
                     } else if (this.axisXLabelScale.description === 'Linear') {
                       x = dataX[j][1]
                     }
                     if (this.axisYLabelScale.description === 'Log') {
-                      y = Math.log10(Math.abs(dataY[j][1]))
+                      y = Math.abs(dataY[j][1])
                     } else if (this.axisYLabelScale.description === 'Linear') {
                       y = dataY[j][1]
                     }
@@ -151,7 +155,7 @@ export default {
                 for (let j = 0, len = dataY.length; j < len; j++) {
                   if (parseInt(dataY[j][0]) >= startTime && parseInt(dataY[j][0]) <= endTime) {
                     if (this.axisYLabelScale.description === 'Log') {
-                      dataY[j][1] = Math.log10(Math.abs(dataY[j][1]))
+                      dataY[j][1] = Math.abs(dataY[j][1])
                     } else if (this.axisYLabelScale.description === 'Linear') {
                       // do nothing
                     }
@@ -166,6 +170,13 @@ export default {
               seriesIndex: this.metaIndex,
               data: filteredData,
             })
+            if (this.axisXDataType.description === 'Time') {
+              if (counter === 0) {
+                this.chartData[this.chartID].xAxis[this.metaIndex].min = startTime
+              }
+              this.chartData[this.chartID].xAxis[this.metaIndex].max = endTime
+              counter++
+            }
             // this.$emit('refreshChart', this.chartData[this.chartID])
           }
         }

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

@@ -1,10 +1,14 @@
 <template>
   <div>
-    <select v-model="scaleFormat" @change="changeScale()">
-      <option v-for="option in scaleOptions" :key="option.id" :value="option">
-        {{ option.description }}
-      </option>
-    </select>
+    <va-select
+      @input="changeScale()"
+      :label="''"
+      v-model="scaleFormat"
+      textBy="description"
+      class="va-select-without-margin"
+      :options="scaleOptions"
+      :noClear='true'
+    />
   </div>
 </template>
 
@@ -137,6 +141,7 @@ export default {
           }
         } else if (this.deviceName === 'EliteZM15' || this.deviceName === 'EliteEIS') {
           this.$emit('changeAxis', this.metaIndex)
+          this.$emit('clearCycle')
         }
       }
       this.setAxisDisplayChart({ type: this.displayType[this.axis], axis: this.axis, chartID: this.chartID, gridIndex: gridIndex })
@@ -181,3 +186,11 @@ export default {
 }
 
 </script>
+
+<style lang="scss">
+  .va-select-without-margin {
+    .va-select {
+      margin-bottom: 0;
+    }
+  }
+</style>

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

@@ -1,15 +1,25 @@
 <template>
   <div>
-    <select v-if="deviceName!=='EliteEIS'" v-model="valueFormat" @change="changeUnit()">
-      <option v-for="option in valueFormatOptions[dataType]" :key="option.id" :value="option">
-        {{ option.unit }}
-      </option>
-    </select>
-    <select v-if="deviceName==='EliteEIS'" v-model="valueFormat" @change="changeUnit()">
-      <option v-for="option in eisValueFormatOptions[dataType]" :key="option.id" :value="option">
-        {{ option.unit }}
-      </option>
-    </select>
+    <va-select
+      @input="changeUnit()"
+      :label="''"
+      v-if="deviceName!=='EliteEIS'"
+      v-model="valueFormat"
+      textBy="unit"
+      class="va-select-without-margin"
+      :options="valueFormatOptions[dataType]"
+      :noClear='true'
+    />
+    <va-select
+      @input="changeUnit()"
+      :label="''"
+      v-if="deviceName==='EliteEIS'"
+      v-model="valueFormat"
+      textBy="unit"
+      class="va-select-without-margin"
+      :options="eisValueFormatOptions[dataType]"
+      :noClear='true'
+    />
   </div>
 </template>
 
@@ -394,3 +404,11 @@ export default {
 }
 
 </script>
+
+<style lang="scss">
+  .va-select-without-margin {
+    .va-select {
+      margin-bottom: 0;
+    }
+  }
+</style>

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

@@ -1,30 +1,28 @@
 <template>
-  <div class="row flex sm12 xl12 md12 xs12 align--center my-0 py-0">
+  <div class="row flex sm12 xl12 md12 xs12 px-0 py-0 mx-0 my-0">
     <div class="flex sm6 xl6 md6 xs6 px-0 mx-0">
-      Window Start
+      <p class="display-6"> Window Start <p/>
       <va-input
-        @mouseleave.native="itemChange(startTime)"
-        @keyup.enter="itemChange(startTime)"
-        @blur="itemChange(startTime)"
-        v-model="startTime"
+        @keyup.enter="startItemChange(startTimeInput)"
+        @blur="startItemChange(startTimeInput)"
+        v-model="startTimeInput"
         class="mb-0 flex-child"
       >
         <p slot="append" style="margin-right: 0;" small>
-          µs
+          ms
         </p>
       </va-input>
     </div>
     <div class="flex sm6 xl6 md6 xs6 px-0 mx-0">
-      Window Size
+      <p class="display-6"> Window Size <p/>
       <va-input
-        @mouseleave.native="itemChange(windowLength)"
-        @keyup.enter="itemChange(windowLength)"
-        @blur="itemChange(windowLength)"
-        v-model="windowLength"
+        @keyup.enter="lenItemChange(windowLengthInput)"
+        @blur="lenItemChange(windowLengthInput)"
+        v-model="windowLengthInput"
         class="mb-0 flex-child"
       >
         <p slot="append" style="margin-right: 0;" small>
-          µs
+          ms
         </p>
       </va-input>
     </div>
@@ -42,6 +40,25 @@ export default {
   props: {
   },
   computed: {
+    startTimeInput: {
+      get () {
+        return this.startTime / 1e3
+      },
+      set (val) {
+        this.startTime = val * 1e3
+        this.endTime = this.startTime + this.windowLength
+      },
+    },
+    windowLengthInput: {
+      get () {
+        return this.windowLength / 1e3
+      },
+      set (val) {
+        this.windowLength = val * 1e3
+        this.endTime = this.startTime + this.windowLength
+      },
+    },
+
     ...mapFields('replay', [
       'startTime',
       'endTime',
@@ -60,12 +77,18 @@ export default {
     init () {
       this.windowLength = parseInt(this.endTime) - parseInt(this.startTime)
     },
-    itemChange (val) {
-      this.startTime = parseInt(this.startTime)
+    startItemChange (val) {
+      this.startTime = parseInt(val * 1e3) // us
       this.windowLength = parseInt(this.windowLength)
       this.endTime = this.startTime + this.windowLength
       this.$emit('changeOverviewDataZoom')
     },
+    lenItemChange (val) {
+      this.startTime = parseInt(this.startTime)
+      this.windowLength = parseInt(val * 1e3) // us
+      this.endTime = this.startTime + this.windowLength
+      this.$emit('changeOverviewDataZoom')
+    },
   },
   async mounted () {
   },

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

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <va-button flat small class="resize-va-button" color="gray" icon="fa fa-trash" @click.stop="deleteFileConfirm()"/>
+    <va-button flat small color="gray" icon="fa fa-trash" @click.stop="deleteFileConfirm()"/>
     <va-modal
       v-model="showModal.deleteFile"
       size="small"
@@ -90,15 +90,3 @@ export default {
 }
 
 </script>
-
-<style lang="scss">
-  .resize-va-button {
-    .va-button {
-      margin: 0.375rem 0.5rem 0.375rem 0.1px;
-    }
-
-    .va-button--small {
-      padding: 0.1px;
-    }
-  }
-</style>

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

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <va-button flat small class="resize-va-button" color="gray" icon="fa fa-download" @click.stop="downloadCSV()"/>
+    <va-button flat small color="gray" icon="fa fa-download" @click.stop="downloadCSV()"/>
   </div>
 </template>
 
@@ -47,15 +47,3 @@ export default {
 }
 
 </script>
-
-<style lang="scss">
-  .resize-va-button {
-    .va-button {
-      margin: 0.375rem 0.5rem 0.375rem 0.1px;
-    }
-
-    .va-button--small {
-      padding: 0.1px;
-    }
-  }
-</style>

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

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <va-button flat small class="resize-va-button" color="gray" icon="fa fa-file-text-o" @click.stop="editFileConfirm()"> {{ filename }} </va-button>
+    <va-button flat small color="gray" icon="fa fa-file-text-o" @click.stop="editFileConfirm()"> {{ filename }} </va-button>
     <va-modal
       class="flex sm12 xl12 md12 xs12"
       v-model="showModal.editFile"
@@ -139,15 +139,3 @@ export default {
 }
 
 </script>
-
-<style lang="scss">
-  .resize-va-button {
-    .va-button {
-      margin: 0.375rem 0.5rem 0.375rem 0.1px;
-    }
-
-    .va-button--small {
-      padding: 0.1px;
-    }
-  }
-</style>

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

@@ -8,6 +8,7 @@
 
 <script>
 import { mapFields } from 'vuex-map-fields'
+import paramTable from '@/data/param-table/index.js'
 
 export default {
   name: 'show-parameter',
@@ -25,6 +26,7 @@ export default {
     return {
       deviceName: '',
       content: '',
+      showDict: {},
       // [region] for neulive
       ampGainOptions: [
         {
@@ -44,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',
@@ -169,43 +119,27 @@ export default {
         },
         {
           id: 6,
-          description: 'Constant Current',
+          description: 'ADC_Test',
         },
         {
           id: 7,
-          description: 'Cyclic Voltammetry',
+          description: 'Constant Current',
         },
         {
           id: 8,
-          description: 'Linear Sweep Voltammetry',
+          description: 'Cyclic Voltammetry',
         },
         {
           id: 9,
-          description: 'Chronoamperometric Graph',
+          description: 'Cyclic Voltammetry-hi-cycles',
         },
         {
           id: 10,
-          description: 'Cali DAC - test',
+          description: 'Linear Sweep Voltammetry',
         },
         {
           id: 11,
-          description: 'Cali ADC - test',
-        },
-        {
-          id: 12,
-          description: 'Dev Mode',
-        },
-        {
-          id: 13,
-          description: 'Open Circuit Potential',
-        },
-        {
-          id: 14,
-          description: 'Pulse Sensing',
-        },
-        {
-          id: 15,
-          description: 'Differential Pulse Voltammetry (DPV)',
+          description: 'Chronoamperometric Graph',
         },
       ],
       currentRangeOptions: [
@@ -295,21 +229,6 @@ export default {
         },
       ],
       // [Endregion]
-      // [region] for EliteEIS
-      eisWorkingModeOptions: [
-        {
-          id: 0,
-          description: 'Potentiostatic Electrochemical Impedance Spectroscopy',
-        },
-        {
-          id: 1,
-          description: 'CV',
-        },
-        {
-          id: 2,
-          description: 'Dev Tools',
-        },
-      ],
     }
   },
   computed: {
@@ -324,11 +243,11 @@ export default {
       this.deviceName = deviceName
       const meta = this.metaList[this.metaIndex]
       const params = meta.parameter_set
-      this.content += 'Duration: ' + parseInt(parseInt(meta.time_duration / 1000000) / 60) + ' m ' + parseInt((meta.time_duration % 60000000) / 1000000) + ' s<br/>'
+      this.content += 'Duration: ' + parseInt(parseInt(meta.time_duration / 1e6) / 60) + ' m ' + parseInt((meta.time_duration % 6e7) / 1e6) + ' s<br/>'
       this.content += '<br/>Parameter: <br/>'
-      this.content += '<br/>  Recording: <br/>'
       if (this.deviceName.startsWith('Neulive')) {
         // recording param
+        this.content += '<br/>  Recording: <br/>'
         for (const [key, value] of Object.entries(params)) {
           if (!(key.includes('sti') || key.includes('STI'))) {
             let showKey = ''
@@ -380,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/>'
             }
@@ -462,181 +377,47 @@ export default {
           this.content += '    Frequency: ' + String(1000 / period) + ' Hz' + '<br/>' // 1000 is cuz 1s = 1000ms
           this.content += '    Period: ' + String(period) + ' ms' + '<br/>'
         }
-      } else if (this.deviceName === 'EliteZM15') {
-        for (const [key, value] of Object.entries(params)) {
-          let showKey = ''
-          let showValue = value
-          if (key === 'MODE') {
-            showKey = 'MODE'
-            for (let i = 0; i < this.workingModeOptions.length; i++) {
-              if (this.workingModeOptions[i].id === value) {
-                showValue = this.workingModeOptions[i].description
+      } else if (this.deviceName === 'EliteZM15' || this.deviceName === 'EliteEIS') {
+        const mode = params.MODE
+        const modeName = paramTable[this.deviceName].MODE[mode].name
+        const showParams = paramTable[this.deviceName].MODE[mode].showParameter
+        this.showDict.MODE = modeName
+        if (modeName === 'Pulse Sensing') {
+          const duplicateParam = ['V_initial', 't_pulse', 'CURR_REC_START', 'CURR_REC_END']
+          for (let i = 0; i < 4; i++) {
+            const key = 'segment_order_' + String(i)
+            const order = paramTable[this.deviceName][key].rev_func(params[key])
+            if (parseInt(order) !== 0) { // if === 0, 代表沒有使用這個block
+              for (let key of duplicateParam) {
+                key = key + '_' + String(i)
+                this.fillShowDict(key, params[key])
               }
             }
-          } else if (key === 'ADC_LEVEL') {
-            showKey = 'Current Range'
-            for (let i = 0; i < this.currentRangeOptions.length; i++) {
-              if (this.currentRangeOptions[i].value === value) {
-                showValue = this.currentRangeOptions[i].label
-              }
-            }
-          } else if (key === 'VOLT_ORIGIN') {
-            showKey = 'Volt start'
-            showValue = (value / 5000) - 5 + 'V'
-          } else if (key === 'VOLT_FINAL') {
-            showKey = 'Volt stop'
-            showValue = (value / 5000) - 5 + 'V'
-          } else if (key === 'VOLT_STEP') {
-            showKey = 'Volt step'
-            showValue = ((value * 2) + 2) / 10 + 'mV'
-          } else if (key === 'STEP_TIME') {
-            showKey = 'Step time'
-            for (let i = 0; i < this.stepTimeOptions.length; i++) {
-              if (this.stepTimeOptions[i].value === value) {
-                showValue = this.stepTimeOptions[i].label
-              }
-            }
-          } else if (key === 'CYCLE_NUMBER') {
-            showKey = 'Cycle number'
-            showValue = value
-          } else if (key === 'DAC_VOLT') {
-            showKey = 'Volt out'
-            showValue = (value / 5000) - 5 + 'V'
-          } else if (key === 'Resister_LEVEL') {
-            showKey = 'Resister Range'
-            for (let i = 0; i < this.resisterRangeOptions.length; i++) {
-              if (this.resisterRangeOptions[i].value === value) {
-                showValue = this.resisterRangeOptions[i].label
-              }
-            }
-          } else if (key === 'SAMPLE_RATE') {
-            showKey = 'Sample rate'
-            for (let i = 0; i < this.eliteSampleRateOptions.length; i++) {
-              if (this.eliteSampleRateOptions[i].value === value) {
-                showValue = this.eliteSampleRateOptions[i].label
-              }
-            }
-          } else if (key === 'Const_Current_value') {
-            showKey = 'Current'
-            showValue = value + 'μA'
-          } else if (key === 'VOLTSTOP_MAX') {
-            showKey = 'Volt max stop'
-            showValue = (value / 5000) - 5 + 'V'
-          } else if (key === 'VOLTSTOP_MIN') {
-            showKey = 'Volt min stop'
-            showValue = (value / 5000) - 5 + 'V'
-          } else if (key === 'Charge') {
-            showKey = 'Charge'
-            for (let i = 0; i < this.chargeOptions.length; i++) {
-              if (this.chargeOptions[i].value === value) {
-                showValue = this.chargeOptions[i].label
-              }
-            }
-          } else if (key === 'VOLT_INITIAL') {
-            showKey = 'E-Initial'
-            showValue = (value / 5000) - 5 + 'V'
-          } else if (key === 'VOLT_MAX') {
-            showKey = 'Volt max stop'
-            showValue = (value / 5000) - 5 + 'V'
-          } else if (key === 'VOLT_MIN') {
-            showKey = 'Volt min stop'
-            showValue = (value / 5000) - 5 + 'V'
-          } else if (key === 'Scan_Rate') {
-            showKey = 'ScanRate'
-            showValue = (value / 100) + 0.01 + 'mV/s'
-          } else if (key === 'Data_Resolution_Scan') {
-            showKey = 'Resolution'
-            showValue = (value / 10) + 0.1 + 'sps'
-          } else if (key === 'VOLT_EFINAL') {
-            showKey = 'E-Final'
-            showValue = (value / 5000) - 5 + 'V'
-          } else if (key === 'VOLT_VSCAN') {
-            showKey = 'VScan'
-            showValue = (value / 5000) - 5 + 'V'
-          } else {
-            continue
           }
-          this.content += '    ' + showKey + ': ' + showValue + '<br/>'
-        }
-      } else if (this.deviceName === 'EliteEIS') {
-        for (const [key, value] of Object.entries(params)) {
-          let showKey = ''
-          let showValue = value
-          if (key === 'MODE') {
-            showKey = 'MODE'
-            for (let i = 0; i < this.eisWorkingModeOptions.length; i++) {
-              if (this.eisWorkingModeOptions[i].id === value) {
-                showValue = this.eisWorkingModeOptions[i].description
-              }
-            }
-          // EIS
-          } else if (key === 'DC_BIAS') {
-            showKey = 'DC Voltage'
-            showValue = String(Math.round((parseInt(value) * 2200) / 4095)) + 'mV' // [TODO] unit
-          } else if (key === 'AC_AMP') {
-            showKey = 'AC Amplitude'
-            showValue = String(Math.round(parseInt(value) / 2047 * 800)) // [TODO] unit
-          } else if (key === 'FREQ_START') {
-            showKey = 'Frequency Range Start'
-            showValue = String(parseFloat(Math.round(parseFloat((value * 0.0149) * 100)) / 100).toFixed(1)) === '0.0' ? '0.015' : String(parseFloat(Math.round(parseFloat((value * 0.0149) * 100)) / 100).toFixed(1))
-          } else if (key === 'FREQ_STOP') {
-            showKey = 'Frequency Range End'
-            showValue = String(parseFloat(Math.round(parseFloat((value * 0.0149) * 100)) / 100).toFixed(1)) === '0.0' ? '0.015' : String(parseFloat(Math.round(parseFloat((value * 0.0149) * 100)) / 100).toFixed(1))
-          } else if (key === 'PPD') {
-            showKey = 'Points Per Decades'
-            showValue = value
-          } else if (key === 'SCALE') {
-            showKey = 'Point Spacing'
-            const scaleArr = ['Logarithm', 'Linear']
-            showValue = scaleArr[value]
-          } else if (key === 'DELAY') {
-            showKey = 'Delay'
-            showValue = parseFloat((value / 10)).toFixed(1)
-          } else if (key === 'AVERAGE_NUM') {
-            showKey = 'Average'
-            const numArr = ['2', '4', '6', '8']
-            showValue = numArr[value]
-          } else if (key === 'RTIA') {
-            showKey = 'Current Range'
-            const numArr = ['1', '2', '3', '4', 'Auto']
-            showValue = numArr[value]
-          // CV
-          } else if (key === 'ADC_LEVEL_I_15') {
-            showKey = 'Current Range'
-            const currentRangeArr = ['<1.5 μA', '1-60 μA', '40-175 μA', '>120 uA', 'Auto']
-            showValue = currentRangeArr[value]
-          } else if (key === 'ADC_LEVEL_V_IN_15') {
-            showKey = 'Voltage Range'
-            const voltageInRangeArr = ['1', '2', '3', 'Auto']
-            showValue = voltageInRangeArr[value]
-          } else if (key === 'CTRL_HIGH_Z_15') {
-            showKey = 'High Z'
-            const highzArr = ['On', 'Off']
-            showValue = highzArr[value]
-          } else if (key === 'VOLT_INITIAL') {
-            showKey = 'E Initial'
-            showValue = parseInt((parseFloat(value) - 25000) / 5) / 1000 + 'V' // [TODO] unit
-          } else if (key === 'VOLT_MAX') {
-            showKey = 'E1'
-            showValue = parseInt((parseFloat(value) - 25000) / 5) / 1000 + 'V' // [TODO] unit
-          } else if (key === 'VOLT_MIN') {
-            showKey = 'E2'
-            showValue = parseInt((parseFloat(value) - 25000) / 5) / 1000 + 'V' // [TODO] unit
-          } else if (key === 'Scan_Rate') {
-            showKey = 'Voltage Scan Rate'
-            showValue = parseFloat(value) / 100 // [TODO] unit
-          } else if (key === 'SAMPLE_RATE') {
-            showKey = 'Resolution'
-            showValue = parseFloat(value) / 10 // [TODO] unit
-          } else if (key === 'CYCLE_NUMBER') {
-            showKey = 'Cycle'
-            showValue = parseInt(value)
-          } else {
-            continue
+          const remainParams = showParams.filter((e) => { // 差集
+            return duplicateParam.indexOf(e) === -1
+          })
+          for (const key of remainParams) {
+            this.fillShowDict(key, params[key])
+          }
+        } else {
+          for (const key of showParams) {
+            this.fillShowDict(key, params[key])
           }
-          this.content += '    ' + showKey + ': ' + showValue + '<br/>'
         }
       }
+      this.dump()
+    },
+    fillShowDict (key, value) {
+      const expVal = paramTable[this.deviceName][key].rev_func(value)
+      const name = paramTable[this.deviceName][key].showName
+      const unit = paramTable[this.deviceName][key].defaultUnit
+      this.showDict[name] = unit !== undefined ? expVal.toString() + unit : expVal.toString()
+    },
+    dump () {
+      for (const [showKey, showValue] of Object.entries(this.showDict)) {
+        this.content += '    ' + showKey + ': ' + showValue + '<br/>'
+      }
     },
   },
 }

src/components/analysis/spike/Spike.vue

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

src/components/analysis/spike/SpikeChart.vue

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

src/components/analysis/spike/SpikeOverviewChart.vue

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

src/components/common/progressBarByValueModal/progressBar.vue

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

src/components/common/progressBarByValueModal/progressModal.vue

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

src/components/common/progressBarModal/progressBar.vue

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

src/components/common/progressBarModal/progressModal.vue

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

src/components/devices/DevicesOverview.vue

@@ -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 {
@@ -346,14 +346,14 @@ export default {
         default:
           break
       }
-      console.log(String.fromCharCode.apply(null, data), topic)
+      //  console.log(String.fromCharCode.apply(null, data), topic)
     },
   },
   methods: {
     getControllerList: async function () {
       const update = async () => {
         this.controllerList.push({
-          id: 'tommy_test',
+          id: taskInfo.getTaskInfo().controllerID,
           mac: '',
           status: 'loading',
           isScan: true,
@@ -403,9 +403,9 @@ export default {
         this.mqttPub(controller.id + '_user', JSON.stringify({
           header: 'hardware_info/0',
         }))
-        this.mqttPub(controller.id + '_user', JSON.stringify({
-          header: 'device_update_usb/0',
-        }))
+        // this.mqttPub(controller.id + '_user', JSON.stringify({
+        //   header: 'device_update_usb/0',
+        // }))
         this.createInitialCollection('admin')
       })
     },
@@ -516,6 +516,7 @@ export default {
   watch: {
   },
   async mounted () {
+    await taskInfo.updateTaskInfo()
     await this.getControllerList()
 
     this.pageMqttSub()

src/components/download/Download.vue

@@ -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,
@@ -57,21 +58,32 @@ export default {
         position: 'bottom-right',
       })
     },
+    chunkArray (rawDataIDArray, chunkSize) {
+      const arrayLength = rawDataIDArray.length
+      const results = []
+      for (let index = 0; index < arrayLength; index += chunkSize) {
+        results.push(rawDataIDArray.slice(index, index + chunkSize))
+      }
+      return results
+    },
     ...mapActions('download',
       [
         types.raw.rawDataByID,
+        types.raw.rawDataByIDs,
         types.raw.rawSdDataByID,
         types.export.setHeader,
         types.export.setTitle,
         types.export.setData,
-        types.downloadStream.writerClose,
-        types.downloadStream.setDownloadStream,
+        types.download.closeWriter,
+        types.download.setStream,
+        types.download.setSampleRate,
+        types.download.setIDList,
+        types.download.clearStream,
       ],
     ),
     ...mapMutations('download',
       [
-        types.download.setSampleRate,
-        types.download.setdownloadIdList,
+        types.download.clearIDList,
       ],
     ),
   },
@@ -97,96 +109,123 @@ export default {
         const channelArray = JSON.parse(this.metaInfo.channels)
         const channelList = []
 
+        // split to different subfile by channel
         if (meta.device.library_name.indexOf('Neulive') >= 0) {
           if (channelArray.some(el => el >= 256)) {
-            channelList.push(channelArray.filter(el => el < 256))
             channelList.push(channelArray.filter(el => (el >= 256 && el <= 259)))
+            channelList.push(channelArray.filter(el => el < 256))
           } else {
             channelList.push(channelArray)
           }
         } else if (meta.device.library_name.indexOf('Elite') >= 0) {
           channelList.push(channelArray)
         }
+
         while (channelList.length > 0) {
-          this.downloadInfo = newDownload()
-          this.downloadInfo.channel = channelList.pop()
+          const channels = channelList.pop()
 
-          // download format
-          this.downloadInfo.format = format
+          let maxSplitFiles = 1
+          let fileIndex = 0
 
-          // download device and filename
-          if (meta.device.library_name.indexOf('Neulive') >= 0) {
-            this.downloadInfo.device = [meta.device.library_name.slice(0, 7), meta.device.library_name.slice(7)]
-            if (this.downloadInfo.channel.some(el => el >= 256 && el <= 259)) {
-              this.downloadInfo.filename = meta.name + '-accerlate-' + format
-              this.downloadInfo.size = parseInt(parseInt(meta.size) / 76)
-            } else {
-              this.downloadInfo.filename = meta.name + '-' + format
-              this.downloadInfo.size = parseInt(meta.size)
+          // find max raw data need sub file
+          for (const rawDataIndex of channels) {
+            const dataLength = meta.raw_data[rawDataIndex].length
+
+            maxSplitFiles = Math.max(maxSplitFiles, Math.ceil(meta.raw_data[rawDataIndex].length / dataLength))
+            meta.raw_data[rawDataIndex] = this.chunkArray(meta.raw_data[rawDataIndex], dataLength)
+          }
+
+          while (fileIndex < maxSplitFiles) {
+            // create new download info & add channel
+            if (this.downloadInfo === null) {
+              this.downloadInfo = newDownload()
             }
-          } else if (meta.device.library_name.indexOf('Elite') >= 0) {
-            this.downloadInfo.device = [meta.device.library_name.slice(0, 5), meta.device.library_name.slice(5)]
-            this.downloadInfo.filename = meta.name + '-' + format
-            this.downloadInfo.size = parseInt(meta.size)
-          }
+            this.downloadInfo.channel = channels
 
-          // init
+            // download format
+            this.downloadInfo.format = format
 
-          // get sampleRate && downloadList
-          for (const channel of this.downloadInfo.channel) {
-            this.downloadInfo.channelInfo[channel] = newChannel()
-            this.setSampleRateDownload({ channel: channel })
-            this.setdownloadIdListDownload({ channel: channel })
-          }
+            // download device and filename
+            if (meta.device.library_name.indexOf('Neulive') >= 0) {
+              this.downloadInfo.device = [meta.device.library_name.slice(0, 7), meta.device.library_name.slice(7)]
+              if (this.downloadInfo.channel.some(el => el >= 256 && el <= 259)) {
+                this.downloadInfo.filename = meta.name + '-accerlate'
+                this.downloadInfo.filename += (sd !== undefined) ? '-sd' : ''
+                this.downloadInfo.size = parseInt(parseInt(meta.size) / (76 * (maxSplitFiles)))
+              } else {
+                this.downloadInfo.filename = meta.name
+                this.downloadInfo.filename += (sd !== undefined) ? '-sd' : ''
+                this.downloadInfo.size = parseInt(meta.size / (maxSplitFiles))
+              }
+            } else if (meta.device.library_name.indexOf('Elite') >= 0) {
+              this.downloadInfo.device = [meta.device.library_name.slice(0, 5), meta.device.library_name.slice(5)]
+              this.downloadInfo.filename = meta.name
+              this.downloadInfo.size = parseInt(meta.size / (maxSplitFiles))
+            }
 
-          // create writer
-          this.setDownloadStream()
-
-          console.log(this.downloadInfo)
-          console.log(this.metaInfo)
-
-          // set Header
-          if (this.downloadInfo.format !== 'csv-edf') {
-            this.setHeaderExport()
-          }
-          this.setTitleExport()
-
-          // start download data
-          let rowIndex = 0
-
-          while (rowIndex < this.downloadInfo.maxRows) {
+            // create new channel info & get sample rate
             for (const channel of this.downloadInfo.channel) {
-              for (const idx in this.downloadInfo.channelInfo[channel].downloadIDList) {
-                const _idx = parseInt(idx)
-                const rawID = this.downloadInfo.channelInfo[channel].downloadIDList[_idx][rowIndex]
-                // console.log(rowIndex, _idx, rawID)
-                if (rawID !== undefined) {
-                  if (sd === 'sd') {
-                    await this.rawSdDataByIDRaw({
-                      channel: channel,
-                      rawID: rawID,
-                      idx: _idx,
-                      api: api,
-                    })
-                  } else {
-                    await this.rawDataByIDRaw({
-                      channel: channel,
-                      rawID: rawID,
-                      idx: _idx,
-                      api: api,
-                    })
+              if (this.downloadInfo.channelInfo[channel] === undefined) {
+                this.downloadInfo.channelInfo[channel] = newChannel()
+                this.setSampleRateDownload({ channel: channel })
+              }
+            }
+
+            // set download ID list
+            this.clearIDListDownload()
+            for (const channel of this.downloadInfo.channel) {
+              this.setIDListDownload({ channel: channel, fileIndex: fileIndex })
+            }
+
+            // if create writer
+            this.clearStreamDownload()
+            this.setStreamDownload()
+
+            // set Header
+            if (this.downloadInfo.format !== 'csv-edf') {
+              await this.setHeaderExport()
+            }
+            await this.setTitleExport()
+
+            // start download data
+            let rowIndex = 0
+
+            while (rowIndex < this.downloadInfo.maxRows) {
+              for (const channel of this.downloadInfo.channel) {
+                for (const idx in this.downloadInfo.channelInfo[channel].downloadIDList) {
+                  const _idx = parseInt(idx)
+                  const rawID = this.downloadInfo.channelInfo[channel].downloadIDList[_idx][rowIndex]
+                  // const rawID = this.downloadInfo.channelInfo[channel].downloadIDList[_idx].splice(0, 10).join(',')
+                  // console.log(rowIndex, _idx, rawID)
+                  if (rawID !== undefined) {
+                    if (sd === 'sd') {
+                      await this.rawSdDataByIDRaw({
+                        channel: channel,
+                        rawID: rawID,
+                        idx: _idx,
+                        api: api,
+                      })
+                    } else {
+                      await this.rawDataByIDRaw({
+                        channel: channel,
+                        rawID: rawID,
+                        idx: _idx,
+                        api: api,
+                      })
+                    }
                   }
                 }
               }
+              await this.setDataExport({ last: (rowIndex >= this.downloadInfo.maxRows - 1) })
+              rowIndex += 1
             }
-            this.setDataExport({ last: (rowIndex === this.downloadInfo.maxRows - 1) })
-            rowIndex += 1
+            this.closeWriterDownload()
+            fileIndex += 1
           }
-          this.writerCloseDownloadStream()
         }
       }
     }
-    await new Promise(resolve => setTimeout(resolve, 2000)) // sleep
+    await new Promise(resolve => setTimeout(resolve, 2000)) // sleep 2s prevent window close
     window.close()
   },
   destroyed () {

src/components/download/DownloadOffline.vue

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

src/components/download/_Download.vue

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

src/components/file/File.vue

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

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

@@ -175,7 +175,7 @@
         <template slot="actions" slot-scope="props" >
           <va-popover :message="`sdcard ${props.rowData.name}`" placement="top">
             <sd-card-button
-              v-if="props.rowData.type !== 'folder' && props.rowData.device.library_name.indexOf('Neulive') >= 0 && SDuuidList.includes(props.rowData.uuid)"
+              v-if="(props.rowData.type !== 'folder') && (props.rowData.device.library_name.indexOf('Neulive') >= 0) && (props.rowData.sd_data_record === true)"
               :meta="props.rowData"
               :uuidList="SDuuidList"
               :controller="controllerList[0]"
@@ -661,36 +661,48 @@ export default {
     },
     downloadCsv: async function (meta) {
       const href = location.href.split('/')[2]
-      if (meta.device.library_name.indexOf('Elite') >= 0) {
-        window.open('http://' + href + '/#/download/csv/' + meta.id)
-      } else if (meta.device.library_name.indexOf('Neulive') >= 0) {
-        window.open('http://' + href + '/#/download/csv/' + meta.id)
+      const connectCheck = await api.connection.check()
+      if (connectCheck.status === 200) {
+        window.open('http://' + href + '/#/download/online/csv/' + meta.id)
+      } else {
+        window.open('http://' + href + '/#/download/offline/csv/' + meta.id)
       }
     },
     downloadExcel: async function (meta) {
       const href = location.href.split('/')[2]
+      const connectCheck = await api.connection.check()
       if (meta.device.library_name.indexOf('Elite') >= 0) {
-        window.open('http://' + href + '/#/download/excel/' + meta.id)
+        if (connectCheck.status === 200) {
+          window.open('http://' + href + '/#/download/online/excel/' + meta.id)
+        } else {
+          window.open('http://' + href + '/#/download/offline/excel/' + meta.id)
+        }
       } else if (meta.device.library_name.indexOf('Neulive') >= 0) {
-        window.open('http://' + href + '/#/download/csv-edf/' + meta.id)
+        if (connectCheck.status === 200) {
+          window.open('http://' + href + '/#/download/online/csv-edf/' + meta.id)
+        } else {
+          window.open('http://' + href + '/#/download/offline/csv-edf/' + meta.id)
+        }
       }
     },
     downloadSdCard: async function (meta) {
       const href = location.href.split('/')[2]
       if (meta.device.library_name.indexOf('Neulive') >= 0) {
-        window.open('http://' + href + '/#/download/csv/' + meta.id + '/sd')
+        if (window.navigator.onLine) {
+          window.open('http://' + href + '/#/download/online/csv/' + meta.id + '/sd')
+        } else {
+          window.open('http://' + href + '/#/download/offline/csv/' + meta.id + '/sd')
+        }
       }
     },
     async getSDuuidList () {
       // const uuidList = ['32abdb14-fc0c-11eb-9aa8-dca6326cbc6b', '940ca938-f662-11eb-8a41-dca6326cbc6b']
       if (this.controllerList.length > 0) {
         if (this.controllerList[0].sd_uploading === false) {
-          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
+          }
         }
       }
     },

src/components/file/sdcard/SdCardApiAction.vue

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

src/components/file/sdcard/SdCardButton.vue

@@ -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
     >
@@ -90,14 +90,17 @@ 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()
         }
       }
     },
     async moveToDB () {
-      this.$refs.progressModalRef.show()
       await this.executeUpload()
       this.$emit('refreshPage')
     },
@@ -105,7 +108,16 @@ export default {
     //   return await this.$refs.sd_card_api.checkInSD(this.meta)
     // },
     async executeUpload () {
-      await this.$refs.sd_card_api.moveToDB(this.meta, this.controller)
+      this.$refs.progressModalRef.show()
+      const result = await this.$refs.sd_card_api.moveToDB(this.meta, this.controller).catch(_ => {
+        this.$refs.progressModalRef.hide()
+        this.pageToast('Upload SD card data error, please connect Neullive to Hub by usb or data corrupted.')
+      })
+      if (result.data === true) {
+        this.pageToast('Upload SD card data done.')
+      } else {
+        this.pageToast('Upload SD card data error, please connect Neullive to Hub by usb or data corrupted.')
+      }
       this.$refs.progressModalRef.progressDone()
       // remove delete sd card first, still have problem.
       // await this.$refs.sd_card_api.deleteSDCard(this.meta, this.controller)
@@ -113,6 +125,16 @@ export default {
     executeDownload () {
       this.$emit('downloadSdCard', this.meta)
     },
+    pageToast: function (mes) {
+      this.showToast(
+        mes,
+        {
+          icon: 'fa-bell',
+          position: 'bottom-right',
+          duration: 7000,
+        },
+      )
+    },
   },
   async mounted () {
     this.init()

src/components/setting/deviceInfo.vue

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

src/components/task/content/TaskContent.vue

@@ -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,11 +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 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
@@ -110,11 +112,15 @@ export default {
   components: {
     CanvasChart,
     TaskDevices,
-    // TaskFormula,
   },
-  // async created () {
-  //   await taskInfo.updateTaskInfo(this.$route.params.taskID)
-  // },
+  computed: {
+    ...mapFields('taskContent', [
+      'deviceList',
+      'chartData',
+      'taskContentChartPanelKey',
+      'taskContentChartNumber',
+    ]),
+  },
   data () {
     return {
       // modal
@@ -122,29 +128,23 @@ export default {
       showRemoveChartModal: false,
       // refresh timer
       dataRefreshTimer: null,
-      // charts data
-      chartDataAll: chartData.getAllChartsData(),
-      // chart refresh key
-      chartKey: 0,
-      chartNumber: taskInfo.getTaskInfo().chartList.length,
+
       selectChartID: null,
       showDeviceSetting: true,
       chartAreaClass: ['flex', 'xs12', 'sm12', 'md12', 'xl8', 'pa-0'],
-
       getParmDone: false,
-
-      deviceList: {},
     }
   },
   mqtt: {
     async '+/get_device_info_all/+' (data, topic) {
-      await taskInfo.deviceInfo(String.fromCharCode.apply(null, data))
+      await taskInfo.deviceInfo(String.fromCharCode.apply(null, data), this.deviceList)
       this.refreshDevicesWindow()
     },
     async '+/get_device_info/+' (data, topic) {
-      await taskInfo.deviceInfo(String.fromCharCode.apply(null, data))
+      await taskInfo.deviceInfo(String.fromCharCode.apply(null, data), this.deviceList)
       this.refreshDevicesWindow()
       this.getParmDone = true
+      this.checkStiStatus()
     },
     async '+/device_parameter/+' (data, topic) {
       await taskInfo.deviceParameter(String.fromCharCode.apply(null, data))
@@ -155,69 +155,37 @@ export default {
       this.refreshDevicesWindow()
     },
     async '+/hardware_device/+' (data, topic) {
-      await taskInfo.deviceInfo(String.fromCharCode.apply(null, data))
-      // console.log(this.deviceList)
-      // for (const d1 in taskInfo.getTaskInfo().deviceList) {
-      //   if (taskInfo.getTaskInfo().deviceList[d1].info.device_address.length > 0) {
-      //     const addr1 = taskInfo.getTaskInfo().deviceList[d1].info.device_address.join()
-      //     let parameter, content
-      //     for (const d2 in this.deviceList) {
-      //       const addr2 = this.deviceList[d2].info.device_address.join()
-      //       if (addr1 === addr2) {
-      //         console.log(this.deviceList[d2].parameterSet)
-      //         for (const p in this.deviceList[d2].parameterSet) {
-      //           if (p !== 'STIMULATING') {
-      //             if (parameter == null) {
-      //               parameter = p
-      //             } else {
-      //               parameter = parameter + '|' + p
-      //             }
-      //             let c
-      //             if (Array.isArray(this.deviceList[d2].parameterSet[p])) {
-      //               c = '0:' + this.deviceList[d2].parameterSet[p].length + '=' + this.deviceList[d2].parameterSet[p]
-      //             } else {
-      //               c = this.deviceList[d2].parameterSet[p]
-      //             }
-
-      //             if (content == null) {
-      //               content = c
-      //             } else {
-      //               content = content + '|' + c
-      //             }
-      //           }
-      //         }
-      //         console.log('****', parameter, content)
-      //         // this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
-      //         //   header: 'device_parameter/0',
-      //         //   device: parseInt(d1),
-      //         //   parameter: parameter,
-      //         //   content: content,
-      //         // }))
-      //       }
-      //     }
-      // }
-      // }
+      await taskInfo.deviceInfo(String.fromCharCode.apply(null, data), this.deviceList)
       if (this.$refs.devices_ref != null) {
         await this.$refs.devices_ref.loadingDone()
+        await this.taskContentChartInitCustomizedFromCache()
       }
     },
     // listen datastream [ topic: controllerID/data_server/device_data_stream/deviceID/channel ]
     async '+/data_server/device_data_stream/+/+' (data, topic) {
       const topicSplit = topic.split('/')
-      if (this.getParmDone & !taskInfo.getDeviceInfoByRawID(parseInt(topicSplit[3])).info.isSync) {
-        if (chartData.defaultChartGenerator(taskInfo.getDeviceIDByRaw(parseInt(topicSplit[3])), null, 'device')) {
-          taskInfo.deviceStart(parseInt(topicSplit[3]))
+      const deviceID = parseInt(topicSplit[3])
+      const channel = parseInt(topicSplit[4])
+      if (this.getParmDone & !taskInfo.getDeviceInfoByRawID(deviceID).info.isSync) {
+        const result = await this.taskContentChartDefaultChartGenerator({
+          _deviceList: this.deviceList,
+          _itemID: taskInfo.getDeviceIDByRaw(deviceID),
+          _chartID: null,
+          _type: 'device',
+        })
+        if (result) {
+          taskInfo.deviceStart(deviceID, this.deviceList)
         }
       }
-      dataStreamBuffer.into(String.fromCharCode.apply(null, data), parseInt(topicSplit[3]), (parseInt(topicSplit[4]) + 1))
+      dataStreamBuffer.into(String.fromCharCode.apply(null, data), deviceID, (channel + 1))
     },
     '+/device_save_path/+' (data, topic) {
       taskInfo.deviceSavePath(String.fromCharCode.apply(null, data))
-      console.log(taskInfo.getTaskInfo())
+      //  console.log(taskInfo.getTaskInfo())
     },
     '+/device_save_path_set/+' (data, topic) {
       taskInfo.deviceSavePath(String.fromCharCode.apply(null, data))
-      console.log(taskInfo.getTaskInfo())
+      //  console.log(taskInfo.getTaskInfo())
     },
     async '+/device_sd_card_status/+' (data, topic) {
       const dataDecode = JSON.parse(String.fromCharCode.apply(null, data))
@@ -257,14 +225,20 @@ export default {
           taskInfo.deviceConnected(mes[1])
           break
         case 'shutdown':
-          taskInfo.controllerShutdown()
+          taskInfo.controllerShutdown(this.deviceList)
           this.showShutdownModal = true
           break
         case 'start':
-          if (!taskInfo.getDeviceInfoByRawID(parseInt(parseInt(mes[1]))).info.isSync) {
-            taskInfo.deviceStart(parseInt(mes[1]))
-            if (chartData.defaultChartGenerator(taskInfo.getDeviceIDByRaw(parseInt(parseInt(mes[1]))), null, 'device')) {
-              taskInfo.deviceStart(parseInt(parseInt(mes[1])))
+          if (!taskInfo.getDeviceInfoByRawID(parseInt(mes[1])).info.isSync) {
+            taskInfo.deviceStart(parseInt(mes[1]), this.deviceList)
+            const result = await this.taskContentChartDefaultChartGenerator({
+              _deviceList: this.deviceList,
+              _itemID: taskInfo.getDeviceIDByRaw(parseInt(mes[1])),
+              _chartID: null,
+              _type: 'device',
+            })
+            if (result) {
+              taskInfo.deviceStart(parseInt(parseInt(mes[1])), this.deviceList)
             }
           }
           break
@@ -272,7 +246,7 @@ export default {
           if (mes[1] === 'all') {
             return false
           }
-          taskInfo.deviceStop(parseInt(mes[1]))
+          taskInfo.deviceStop(parseInt(mes[1]), this.deviceList)
           break
         case 'device_timeout':
           this.pageToast('The device [' + taskInfo.getDeviceIDByRaw(parseInt(mes[1])) + '] is timeout, please check its status or parameters.')
@@ -288,7 +262,7 @@ export default {
         default:
           break
       }
-      console.log(String.fromCharCode.apply(null, data), topic)
+      //  console.log(String.fromCharCode.apply(null, data), topic)
     },
   },
   methods: {
@@ -334,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(
@@ -352,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 () {
@@ -365,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) {
@@ -424,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) {
@@ -447,6 +410,8 @@ export default {
           })
         }
       }
+
+      await this.taskContentChartSaveToCache()
       this.pageToast('The chart has been removed.')
     },
     showDeviceSettingClick: function () {
@@ -461,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()
@@ -480,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)
         }
@@ -501,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()
@@ -513,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)
         }
@@ -522,7 +479,7 @@ export default {
       this.pageToast('The formula [' + formulaID + '] has been removed.')
     },
     startAllClick: async function () {
-      for (const device of taskInfo.getDeviceListRegister()) {
+      for (const device of this.deviceList) {
         if (this.$refs.devices_ref === undefined) {
           this.startDevice(device)
         } else {
@@ -533,7 +490,12 @@ export default {
       this.pageToast('The all devices have been started')
     },
     startDevice: async function (device) {
-      chartData.defaultChartGenerator(device.id, null, 'device')
+      await this.taskContentChartDefaultChartGenerator({
+        _deviceList: this.deviceList,
+        _itemID: device.id,
+        _chartID: null,
+        _type: 'device',
+      })
       if (!taskInfo.getDeviceInfo(device.id).info.isSync) {
         if (taskInfo.getDeviceInfo(device.id).info.library_name.startsWith('Neulive')) {
           this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
@@ -542,7 +504,7 @@ export default {
             instruction: 'record',
           }))
         } else if (taskInfo.getDeviceInfo(device.id).info.library_name.startsWith('Elite')) {
-          console.log('elite')
+          //  console.log('elite')
           this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
             header: 'device_instruction/0',
             device: taskInfo.getRawDeviceID(device.id),
@@ -553,11 +515,11 @@ export default {
         device.isSync = true
         // this.$emit('refreshSetting')
         // ### show device info
-        console.log(taskInfo.getDeviceInfo(device.id))
+        //  console.log(taskInfo.getDeviceInfo(device.id))
       }
     },
     stopAllClick: function () {
-      for (const device of taskInfo.getDeviceListRegister()) {
+      for (const device of this.deviceList) {
         if (this.$refs.devices_ref === undefined) {
           this.stopDevice(device)
         } else {
@@ -585,44 +547,38 @@ export default {
         device.stopping = true
       }
     },
+    checkStiStatus: function () {
+      this.$refs.devices_ref.checkStiStatus()
+    },
     exit: function () {
       this.$router.push({
         path: '/',
       })
     },
+
+    ...mapActions('taskContent', [
+      taskTypes.chart.initCustomizedFromCache,
+      taskTypes.chart.saveToCache,
+      taskTypes.chart.add,
+      taskTypes.chart.defaultChartGenerator,
+      taskTypes.chart.reset,
+      taskTypes.chart.refreshData,
+      taskTypes.chart.refreshChart,
+      taskTypes.chart.refreshPanel,
+    ]),
   },
   watch: {
   },
   async mounted () {
-    this.deviceList = await taskInfo.updateTaskInfo(this.$route.params.taskID)
-    console.log(taskInfo.getTaskInfo())
+    await taskInfo.updateTaskInfo(this.$route.params.taskID)
+    //  console.log(taskInfo.getTaskInfo())
     // this.screenHeight = document.documentElement.clientHeight
     this.pageMqttSub(taskInfo.getTaskInfo().controllerID)
-    console.log(taskInfo.getTaskInfo().controllerID)
+    //  console.log(taskInfo.getTaskInfo().controllerID)
     await this.pageInit()
-    // this.chartNumber = taskInfo.getTaskInfo().chartNumber
 
     this.dataRefreshTimer = setInterval(this.refreshData, 100)
 
-    const ret = await api.analysis.IIRFilter({
-      type: 'lowpass',
-      order: 15,
-      fs: 1000,
-      f0: 10,
-      f1: 20,
-      f2: 50,
-    })
-
-    console.log(ret.data)
-    const sos = ret.data.split('/')
-    sos.forEach((v, vi) => {
-      sos[vi] = v.split(',')
-      sos[vi].forEach((s, si) => {
-        sos[vi][si] = parseFloat(s)
-      })
-    })
-    console.log(sos)
-
     // const _this = this
     // window.onresize = function () { // define the event of window size changing
     //   // _this.screenWidth = document.documentElement.clientWidth
@@ -630,8 +586,8 @@ export default {
     // }
   },
   destroyed () {
-    taskInfo.destroyed()
-    for (const chart in chartData.getAllChartsData()) {
+    taskInfo.destroyed(this.deviceList)
+    for (const chart in this.chartData) {
       this.removeChart(chart)
     }
     clearInterval(this.dataRefreshTimer)

src/components/task/content/TaskContentGM.vue

@@ -40,10 +40,6 @@
               <va-card
                 stripe="primary"
               >
-                <template slot="header">
-                  <va-icon name="fa fa-gears mr-3" color="primary"/>
-                  <h5 class="mt-0 mb-0">CONTROL</h5>
-                </template>
                 <va-button class="no-dark-style-va-button" v-if="!showDeviceSetting" color="primary" target="_blank" @click="showDeviceSettingClick()" small>
                   SHOW DEVICES
                 </va-button>
@@ -64,7 +60,7 @@
 
             <div :key="chartKey">
               <div
-                v-for="chart in chartDataAll"
+                v-for="chart in chartData"
                 :key="chart.chartID"
               >
                 <canvas-chart
@@ -97,32 +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 () {
@@ -132,29 +125,25 @@ 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'],
-
       getParmDone: false,
-
-      deviceList: {},
     }
   },
   mqtt: {
     async '+/get_device_info_all/+' (data, topic) {
-      await taskInfo.deviceInfo(String.fromCharCode.apply(null, data))
+      await taskInfo.deviceInfo(String.fromCharCode.apply(null, data), this.deviceList)
       this.refreshDevicesWindow()
     },
     async '+/get_device_info/+' (data, topic) {
-      await taskInfo.deviceInfo(String.fromCharCode.apply(null, data))
+      await taskInfo.deviceInfo(String.fromCharCode.apply(null, data), this.deviceList)
       this.refreshDevicesWindow()
       this.getParmDone = true
+      this.checkStiStatus()
     },
     async '+/device_parameter/+' (data, topic) {
       await taskInfo.deviceParameter(String.fromCharCode.apply(null, data))
@@ -165,48 +154,7 @@ export default {
       this.refreshDevicesWindow()
     },
     async '+/hardware_device/+' (data, topic) {
-      await taskInfo.deviceInfo(String.fromCharCode.apply(null, data))
-      // console.log(this.deviceList)
-      // for (const d1 in taskInfo.getTaskInfo().deviceList) {
-      //   if (taskInfo.getTaskInfo().deviceList[d1].info.device_address.length > 0) {
-      //     const addr1 = taskInfo.getTaskInfo().deviceList[d1].info.device_address.join()
-      //     let parameter, content
-      //     for (const d2 in this.deviceList) {
-      //       const addr2 = this.deviceList[d2].info.device_address.join()
-      //       if (addr1 === addr2) {
-      //         console.log(this.deviceList[d2].parameterSet)
-      //         for (const p in this.deviceList[d2].parameterSet) {
-      //           if (p !== 'STIMULATING') {
-      //             if (parameter == null) {
-      //               parameter = p
-      //             } else {
-      //               parameter = parameter + '|' + p
-      //             }
-      //             let c
-      //             if (Array.isArray(this.deviceList[d2].parameterSet[p])) {
-      //               c = '0:' + this.deviceList[d2].parameterSet[p].length + '=' + this.deviceList[d2].parameterSet[p]
-      //             } else {
-      //               c = this.deviceList[d2].parameterSet[p]
-      //             }
-
-      //             if (content == null) {
-      //               content = c
-      //             } else {
-      //               content = content + '|' + c
-      //             }
-      //           }
-      //         }
-      //         console.log('****', parameter, content)
-      //         // this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
-      //         //   header: 'device_parameter/0',
-      //         //   device: parseInt(d1),
-      //         //   parameter: parameter,
-      //         //   content: content,
-      //         // }))
-      //       }
-      //     }
-      // }
-      // }
+      await taskInfo.deviceInfo(String.fromCharCode.apply(null, data), this.deviceList)
       if (this.$refs.devices_ref != null) {
         await this.$refs.devices_ref.loadingDone()
       }
@@ -215,19 +163,25 @@ 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(taskInfo.getDeviceIDByRaw(parseInt(topicSplit[3])), null, 'device')) {
-          taskInfo.deviceStart(parseInt(topicSplit[3]))
+        const result = await this.taskContentChartDefaultChartGenerator({
+          _deviceList: this.deviceList,
+          _itemID: taskInfo.getDeviceIDByRaw(parseInt(topicSplit[3])),
+          _chartID: null,
+          _type: 'device',
+        })
+        if (result) {
+          taskInfo.deviceStart(parseInt(topicSplit[3]), this.deviceList)
         }
       }
       dataStreamBuffer.into(String.fromCharCode.apply(null, data), parseInt(topicSplit[3]), (parseInt(topicSplit[4]) + 1))
     },
     '+/device_save_path/+' (data, topic) {
       taskInfo.deviceSavePath(String.fromCharCode.apply(null, data))
-      console.log(taskInfo.getTaskInfo())
+    //  console.log(taskInfo.getTaskInfo())
     },
     '+/device_save_path_set/+' (data, topic) {
       taskInfo.deviceSavePath(String.fromCharCode.apply(null, data))
-      console.log(taskInfo.getTaskInfo())
+    //  console.log(taskInfo.getTaskInfo())
     },
     async '+/broadcast' (data, topic) {
       const mes = String.fromCharCode.apply(null, data).split(':')
@@ -257,14 +211,20 @@ export default {
           taskInfo.deviceConnected(mes[1])
           break
         case 'shutdown':
-          taskInfo.controllerShutdown()
+          taskInfo.controllerShutdown(this.deviceList)
           this.showShutdownModal = true
           break
         case 'start':
-          if (!taskInfo.getDeviceInfoByRawID(parseInt(parseInt(mes[1]))).info.isSync) {
-            taskInfo.deviceStart(parseInt(mes[1]))
-            if (chartData.defaultChartGenerator(taskInfo.getDeviceIDByRaw(parseInt(parseInt(mes[1]))), null, 'device')) {
-              taskInfo.deviceStart(parseInt(parseInt(mes[1])))
+          if (!taskInfo.getDeviceInfoByRawID(parseInt(mes[1])).info.isSync) {
+            taskInfo.deviceStart(parseInt(mes[1]), this.deviceList)
+            const result = await this.taskContentChartDefaultChartGenerator({
+              _deviceList: this.deviceList,
+              _itemID: taskInfo.getDeviceIDByRaw(parseInt(mes[1])),
+              _chartID: null,
+              _type: 'device',
+            })
+            if (result) {
+              taskInfo.deviceStart(parseInt(mes[1]), this.deviceList)
             }
           }
           break
@@ -272,7 +232,7 @@ export default {
           if (mes[1] === 'all') {
             return false
           }
-          taskInfo.deviceStop(parseInt(mes[1]))
+          taskInfo.deviceStop(parseInt(mes[1]), this.deviceList)
           break
         case 'device_timeout':
           this.pageToast('The device [' + taskInfo.getDeviceIDByRaw(parseInt(mes[1])) + '] is timeout, please check its status or parameters.')
@@ -288,7 +248,7 @@ export default {
         default:
           break
       }
-      console.log(String.fromCharCode.apply(null, data), topic)
+    //  console.log(String.fromCharCode.apply(null, data), topic)
     },
   },
   methods: {
@@ -335,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(
@@ -350,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 () {
@@ -359,24 +321,28 @@ export default {
       if (this.$refs.devices_ref != null) {
         this.$refs.devices_ref.refresh()
       }
-      // api.task.update({
-      //   device_config: taskInfo.getTaskInfo().deviceList,
-      // })
+    },
+    checkStiStatus: function () {
+      this.$refs.devices_ref.checkStiStatus()
     },
     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) {
@@ -387,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) {
@@ -410,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) {
@@ -422,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) {
@@ -459,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()
@@ -478,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)
         }
@@ -501,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()
@@ -511,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)
         }
@@ -520,7 +481,7 @@ export default {
       this.pageToast('The formula [' + formulaID + '] has been removed.')
     },
     startAllClick: async function () {
-      for (const device of taskInfo.getDeviceListRegister()) {
+      for (const device of this.deviceList) {
         if (this.$refs.devices_ref === undefined) {
           this.startDevice(device)
         } else {
@@ -531,7 +492,12 @@ export default {
       this.pageToast('The all devices have been started')
     },
     startDevice: async function (device) {
-      chartData.defaultChartGenerator(device.id, null, 'device')
+      await this.taskContentChartDefaultChartGenerator({
+        _deviceList: this.deviceList,
+        _itemID: device.id,
+        _chartID: null,
+        _type: 'device',
+      })
       if (!taskInfo.getDeviceInfo(device.id).info.isSync) {
         if (taskInfo.getDeviceInfo(device.id).info.library_name.startsWith('Neulive')) {
           this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
@@ -540,7 +506,7 @@ export default {
             instruction: 'record',
           }))
         } else if (taskInfo.getDeviceInfo(device.id).info.library_name.startsWith('Elite')) {
-          console.log('elite')
+          //  console.log('elite')
           this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
             header: 'device_instruction/0',
             device: taskInfo.getRawDeviceID(device.id),
@@ -551,11 +517,11 @@ export default {
         device.isSync = true
         // this.$emit('refreshSetting')
         // ### show device info
-        console.log(taskInfo.getDeviceInfo(device.id))
+        //  console.log(taskInfo.getDeviceInfo(device.id))
       }
     },
     stopAllClick: function () {
-      for (const device of taskInfo.getDeviceListRegister()) {
+      for (const device of this.deviceList) {
         if (this.$refs.devices_ref === undefined) {
           this.stopDevice(device)
         } else {
@@ -588,15 +554,22 @@ export default {
         path: '/',
       })
     },
+
+    ...mapActions('taskContent', [
+      taskTypes.chart.add,
+      taskTypes.chart.refreshData,
+      taskTypes.chart.defaultChartGenerator,
+      taskTypes.chart.reset,
+    ]),
   },
   watch: {
   },
   async mounted () {
-    this.deviceList = await taskInfo.updateTaskInfo(this.$route.params.taskID)
-    console.log(taskInfo.getTaskInfo())
+    await taskInfo.updateTaskInfo(this.$route.params.taskID)
+    //  console.log(taskInfo.getTaskInfo())
     // this.screenHeight = document.documentElement.clientHeight
     this.pageMqttSub(taskInfo.getTaskInfo().controllerID)
-    console.log(taskInfo.getTaskInfo().controllerID)
+    //  console.log(taskInfo.getTaskInfo().controllerID)
     await this.pageInit()
     // this.chartNumber = taskInfo.getTaskInfo().chartNumber
 
@@ -609,8 +582,8 @@ export default {
     // }
   },
   destroyed () {
-    taskInfo.destroyed()
-    for (const chart in chartData.getAllChartsData()) {
+    taskInfo.destroyed(this.deviceList)
+    for (const chart in this.chartData) {
       this.removeChart(chart)
     }
     clearInterval(this.dataRefreshTimer)

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

@@ -13,7 +13,6 @@
                 color="white"
               />
             </va-button>
-            <!-- <canvas-chart-filter /> -->
           </div>
         </div>
       </template>
@@ -26,32 +25,39 @@
         </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>
+        <!-- <canvas-chart-setting :chartID="chartID"></canvas-chart-setting> -->
       </div>
-      <div class="row flex align--center ma-0 pa-0">
-        <canvas-chart-filter />
+      <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)"
           v-model="timeIntervalInput"
-          :label="'time-interval'"
+          :label="'time-grid'"
         >
           <p slot="append" style="margin-right: 0;" small>
             ms
           </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)"
@@ -59,7 +65,7 @@
           :label="'x-grid'"
         >
           <p slot="append" style="margin-right: 0;" small>
-            {{data.chartXUnit}}
+            {{chartData[chartID].chartXUnit}}
           </p>
         </va-input>
         <va-input
@@ -70,40 +76,48 @@
           :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)"
           v-model="threeAxisIntervalInput"
-          :label="'3axis-interval'"
+          :label="'3axis-grid'"
         >
           <p slot="append" style="margin-right: 0;" small>
             g
           </p>
         </va-input>
       </div>
+      <div class="row flex ma-0 pa-0">
+        <canvas-chart-filter :chartID="chartID" :filterIndex="0" />
+        <canvas-chart-filter :chartID="chartID" :filterIndex="1" />
+        <canvas-chart-filter :chartID="chartID" :filterIndex="2" />
+      </div>
     </va-card>
+    <canvas-chart-filter-popup :ref="'filter_popup_ref'" :chartID="chartID" :chartRef="this.$refs.chart_ref" />
   </div>
 </template>
 
 <script>
-// import { InitChartsData, getChartsData } from '../../../../../data/task/ChartsManagement'
 import 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',
   components: {
-    CanvasChartSetting,
+    // CanvasChartSetting,
     CanvasChartSource,
     CanvasChartFilter,
+    CanvasChartFilterPopup,
   },
   props: {
     chartID: {
@@ -125,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',
@@ -144,58 +160,55 @@ 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)
+              //  console.log(y.interval)
             } else {
               y.interval = val * 1000
             }
             const maxList = []
             const minList = []
             y.seriesIndex.forEach(i => {
-              maxList.push(Math.max(...chartData.getAllChartsData()[this.chartID].series[i].data.map(p => p[1])))
-              minList.push(Math.min(...chartData.getAllChartsData()[this.chartID].series[i].data.map(p => p[1])))
+              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)
@@ -208,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'
@@ -216,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
           }
@@ -252,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')
   },

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

@@ -1,85 +1,207 @@
 <template>
   <div class="row flex pa-0 ma-0">
-    <div class="sm3 xl3 md3 xs3 my-0 pa-0 mx-1">
+    <div class="filter-input my-0 pa-0 mx-1">
       <va-select
         small
-        :label="'FILTER'"
+        noClear
+        :label="'FILTER ' + (filterIndex + 1)"
         v-model="selectFilter"
         textBy="name"
         :options="optionFilter"
       />
     </div>
     <va-input
-      v-if="[1, 2].indexOf(selectFilter.id) >= 0"
+      :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"
-      v-modal="input1"
-    />
+      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 > 2"
+      v-if="selectFilter.id > 3"
       :label="'FREQ MIN'"
-      class="mx-1"
-      v-modal="input1"
-    />
+      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 > 2"
+      v-if="selectFilter.id > 3"
       :label="'FREQ MAX'"
-      class="mx-1"
-      v-modal="input1"
-    />
+      class="mx-1 freq-input"
+      v-model="freq1"
+    >
+      <p slot="append" style="margin-right: 0;" small>
+        Hz
+      </p>
+    </va-input>
+    <va-button
+      flat
+      small
+      :color="buttonColor"
+      class="circle-button pa-0 mx-0 filter-apply-button"
+      :icon="buttonIcon"
+      @click.stop="updateFilterInfo(filterIndex)"/>
   </div>
 </template>
 
 <script>
-import { chartData } from '../../../../data/task/ChartsManagement'
+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-setting',
+  name: 'canvas-chart-filter',
   props: {
     chartID: {
       type: Number,
       required: true,
     },
+    filterIndex: {
+      type: Number,
+      required: true,
+    },
   },
   computed: {
     ...mapFields('taskContent', [
       'filter',
+      'chartData',
     ]),
+    buttonIcon () {
+      if (this.chartData[this.chartID].series.length > 0 && this.chartData[this.chartID].series.every(item => item != null)) {
+        return this.chartData[this.chartID].series.every(item => item.filter[this.filterIndex].filter != null) ? 'fa fa-stop' : 'fa fa-play'
+      }
+      return 'fa fa-play'
+    },
+    buttonColor () {
+      if (this.chartData[this.chartID].series.length > 0 && this.chartData[this.chartID].series.every(item => item != null)) {
+        return this.chartData[this.chartID].series.every(item => item.filter[this.filterIndex].filter != null) ? 'danger' : 'primary'
+      }
+      return 'primary'
+    },
   },
   data () {
     return {
-      data: chartData.getAllChartsData()[this.chartID],
       selectFilter: {
-        id: 0,
-        name: 'none',
+        id: 1,
+        name: 'notch',
       },
-      input1: '',
+      order: 20,
+      freq0: 60,
+      freq1: 60,
+      freq2: 60,
       optionFilter: [
-        {
-          id: 0,
-          name: 'none',
-        },
         {
           id: 1,
-          name: 'lowpass',
+          name: 'notch',
         },
         {
           id: 2,
-          name: 'highpass',
+          name: 'lowpass',
         },
         {
           id: 3,
-          name: 'bandstop',
+          name: 'highpass',
         },
         {
           id: 4,
+          name: 'bandstop',
+        },
+        {
+          id: 5,
           name: 'bandpass',
         },
       ],
     }
   },
   methods: {
+    async updateFilterInfo (index) {
+      let closeFilter = false
+      for (let i = 0; i < this.chartData[this.chartID].series.length; i++) {
+        if (this.chartData[this.chartID].series[i].filter[this.filterIndex].filter != null) {
+          this.chartData[this.chartID].series[i].filter[this.filterIndex].filter = null
+          closeFilter = true
+        }
+      }
+      if (closeFilter) {
+        return false
+      }
+      let fs = 0
+      let sos = []
+      for (let i = 0; i < this.chartData[this.chartID].series.length; i++) {
+        const deviceID = this.chartData[this.chartID].series[i].yAxisSource[0]
+        // const _fs = taskInfo.getDeviceInfo(deviceID).parameterSet.SAMPLE_RATE
+        const _fs = 1000
+        const _chNum = taskInfo.getDeviceInfo(deviceID).parameterSet.CH_NUMBER
+        // console.log(_fs, _chNum)
+        if (fs !== _fs) {
+          fs = _fs
+          const ret = await api.analysis.IIRFilter({
+            type: this.selectFilter.name,
+            order: this.order,
+            fs: parseFloat(_fs / _chNum),
+            f0: parseFloat(this.freq0),
+            f1: parseFloat(this.freq1),
+            f2: parseFloat(this.freq2),
+          })
+
+          if (ret.status !== 200) {
+            return false
+          }
+
+          const _sosRet = ret.data.split('/')
+          const _sos = []
+          _sosRet.forEach((v, vi) => {
+            const _tmp = v.split(',')
+            const _arr = []
+            _tmp.forEach(s => {
+              _arr.push(parseFloat(s))
+            })
+            _sos.push(_arr)
+          })
+          sos = _sos
+        }
+        this.chartData[this.chartID].series[i].filter[index].type = this.selectFilter.name
+        this.chartData[this.chartID].series[i].filter[index].order = this.order
+        // sampling rate changed by channel number
+        this.chartData[this.chartID].series[i].filter[index].fs = parseFloat(_fs / _chNum)
+        this.chartData[this.chartID].series[i].filter[index].f0 = parseFloat(this.freq0)
+        this.chartData[this.chartID].series[i].filter[index].f1 = parseFloat(this.freq1)
+        this.chartData[this.chartID].series[i].filter[index].f2 = parseFloat(this.freq2)
+        this.chartData[this.chartID].series[i].filter[index].sos = sos
+        this.chartData[this.chartID].series[i].filter[index].filter = IIRFilter.init(sos)
+      }
+      //  console.log(this.chartData[this.chartID])
+    },
   },
 }
 </script>
+
+<style lang='scss'>
+  .filter-input {
+    max-width: 100px;
+  }
+
+  .freq-input {
+    max-width: 80px;
+  }
+
+  .order-input {
+    max-width: 50px;
+  }
+
+  .filter-apply-button {
+    max-width: 25px;
+  }
+</style>

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

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

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

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

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

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

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

@@ -45,7 +45,6 @@
             v-model="gridSelection"
             textBy="value"
             :options="gridOptions"
-            @click.enter="updateGridOptions()"
           />
         </div>
         <va-button :disabled="sourceAddStatus" class="flex md3 xl3 xs3 sm3 pa-1" @click="addRegisterDeviceChannel(gridSelection.id)" >
@@ -56,11 +55,12 @@
     <va-tree-root>
       <va-tree-category
         style="font-size: 20px;"
-        v-for="grid in grids"
+        v-for="grid in chartData[chartID].grid"
         :key="grid.index"
-        :label="'Subplot ' + grid.index">
+        :label="'Subplot ' + grid.index"
+      >
         <va-tree-node
-          v-for="series in gridSource[grid.index]"
+          v-for="series in chartData[chartID].gridSource[grid.index]"
           :key="series.name"
         >
           <div class="flex row align--center">
@@ -86,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()
@@ -205,7 +199,7 @@ export default {
         this.channelSelectDisableY = true
       } else if (taskInfo.getDeviceInfo(this.deviceSelectY.id).info.library_name.indexOf('Neulive') >= 0) {
         const channelSet = taskInfo.getDeviceInfo(this.deviceSelectY.id).parameterSet.RECORDING_CH.toString(2).split('').reverse()
-        console.log(channelSet)
+        //  console.log(channelSet)
         channelSet.forEach((element, index) => {
           if (parseInt(element) > 0) {
             channelOptions.push({
@@ -249,7 +243,7 @@ export default {
         } else {
           channelSet = taskInfo.getDeviceInfo(this.deviceSelectY.id).parameterSet.CHANNEL_LABEL
         }
-        console.log(channelSet)
+        //  console.log(channelSet)
         channelSet.forEach((element, index) => {
           channelOptions.push({
             id: index + 1,
@@ -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>

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

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

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

@@ -1,6 +1,6 @@
 <template>
   <div class="flex" :class="cardclass">
-    <va-card style="height: 88vh; overflow: auto;">
+    <va-card>
       <template slot="header">
         <va-icon name="fa fa-bluetooth-b mr-3" color="primary"/>
         <h5 class="mt-0 mb-0">DEVICES</h5>
@@ -15,18 +15,6 @@
       </div>
 
       <div v-else class="flex row align--center">
-        <!-- <task-device-list-g-m
-          :ref="'pdlist_ref'"
-          :deviceList="deviceList"
-          @start="startDevice($event)"
-          @stop="stopDevice($event)"
-          @record="record($event)"
-          @stopRecord="stopRecord($event)"
-          @sti="sti($event)" @sti_stop="stiStop($event)"
-          @fast_settle="fastSettle($event)"
-          @generate="generateChart($event)"
-          @detect="detectDevice($event)"
-        /> -->
         <task-device-list
           :ref="'pdlist_ref'"
           :deviceList="deviceList"
@@ -41,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>
@@ -68,9 +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',
@@ -87,16 +61,22 @@ export default {
       },
     },
   },
+  computed: {
+    ...mapFields('taskContent', [
+      'deviceList',
+    ]),
+  },
   created () {
   },
   data () {
     return {
       deviceSelect: '',
       deviceOptions: taskInfo.getDeviceListNotRegister(),
-      deviceList: taskInfo.getDeviceListRegister(),
+      // deviceList: this.deviceList,
       state: {
         LOADING: false,
       },
+      stiTimeOut: null,
     }
   },
   mqtt: {
@@ -113,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) {
@@ -142,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) {
-      await chartData.defaultChartGenerator(device.id, null, 'device')
       if (!taskInfo.getDeviceInfo(device.id).info.isSync) {
         if (taskInfo.getDeviceInfo(device.id).info.library_name.startsWith('Neulive')) {
+          await this.taskContentChartDefaultChartGenerator({
+            _deviceList: this.deviceList,
+            _itemID: device.id,
+            _chartID: null,
+            _type: 'device',
+          })
           this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
             header: 'device_instruction/0',
             device: taskInfo.getRawDeviceID(device.id),
@@ -175,6 +144,26 @@ export default {
 
           device.isStimulate = true
         } else if (taskInfo.getDeviceInfo(device.id).info.library_name.startsWith('Elite')) {
+          const e1 = parseInt((taskInfo.getDeviceInfo(device.id).parameterSet.DPV_e_1 - 25000) / 5)
+          const e2 = parseInt((taskInfo.getDeviceInfo(device.id).parameterSet.DPV_e_2 - 25000) / 5)
+          const eFinal = parseInt((taskInfo.getDeviceInfo(device.id).parameterSet.DPV_e_final - 25000) / 5)
+          const isDPVMode = taskInfo.getDeviceInfo(device.id).parameterSet.MODE === 15
+          if (isDPVMode) {
+            if (e1 >= e2 && !(e1 >= eFinal && eFinal >= e2)) {
+              this.pageToast('[Error] Please set E Final correctly.')
+              return false
+            } else if (e2 > e1 && !(e2 >= eFinal && eFinal >= e1)) {
+              this.pageToast('[Error] Please set E Final correctly.')
+              return false
+            }
+          }
+
+          await this.taskContentChartDefaultChartGenerator({
+            _deviceList: this.deviceList,
+            _itemID: device.id,
+            _chartID: null,
+            _type: 'device',
+          })
           this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
             header: 'device_instruction/0',
             device: taskInfo.getRawDeviceID(device.id),
@@ -188,7 +177,7 @@ export default {
         api.task.update({
           device_config: taskInfo.getTaskInfo().deviceList,
         })
-        console.log(taskInfo.getDeviceInfo(device.id))
+        //  // console.log(taskInfo.getDeviceInfo(device.id))
       }
     },
     stopDevice: async function (device) {
@@ -198,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',
@@ -238,7 +227,16 @@ export default {
       }, 5000)
     },
     record: async function (device) {
-      await chartData.defaultChartGenerator(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',
@@ -253,7 +251,7 @@ export default {
         })
 
         // ### show device info
-        console.log(taskInfo.getDeviceInfo(device.id))
+        //  // console.log(taskInfo.getDeviceInfo(device.id))
       }
     },
     stopRecord: function (device) {
@@ -286,6 +284,13 @@ export default {
         device_config: taskInfo.getTaskInfo().deviceList,
       })
       device.isStimulate = true
+      const stiExTime = taskInfo.getDeviceInfo(device.id).parameterSet.REPEAT_INTERVAL_littleEndian * taskInfo.getDeviceInfo(device.id).parameterSet.REPEAT_TIME_littleEndian
+      clearTimeout(this.stiTimeOut)
+      if (taskInfo.getDeviceInfo(device.id).parameterSet.CONTINUOUS_STI < 0) {
+        this.stiTimeOut = setTimeout(() => {
+          this.stiStop(device)
+        }, (stiExTime + 3000))
+      }
     },
     stiStop: function (device) {
       this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
@@ -300,6 +305,7 @@ export default {
         content: 0,
       }))
       device.isStimulate = false
+      clearTimeout(this.stiTimeOut)
     },
     fastSettle: function (device) {
       this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
@@ -337,12 +343,6 @@ export default {
         type = 'Neulive'
       }
 
-      const macAddress = taskInfo.getDeviceInfoByRawID(selectID).info.device_address.map(data =>
-        data.toString(16)
-          .padStart(2, '0')
-          .toUpperCase()).join(':')
-      const deviceInfo = await api.device.getByMac(macAddress)
-
       const _device = {
         id: taskInfo.getTaskInfo().taskDeviceID.indexOf(selectID),
         name: '[' + taskInfo.getTaskInfo().taskDeviceID.indexOf(selectID) + '] ' + taskInfo.getDeviceInfoByRawID(selectID).info.device_name,
@@ -355,7 +355,8 @@ export default {
         isSync: taskInfo.getDeviceInfoByRawID(selectID).info.isSync,
         isStimulate: taskInfo.getDeviceInfoByRawID(selectID).info.isStimulate,
         sdCardStatus: taskInfo.getDeviceInfoByRawID(selectID).info.sd_card_status,
-        transmission_type: (deviceInfo.data.length > 0) ? deviceInfo.data[0].transmission_type : 1,
+        transmission_type: taskInfo.getDeviceInfoByRawID(selectID).info.transmission_type,
+        stimulation_last_time: taskInfo.getDeviceInfoByRawID(selectID).info.stimulation_last_time,
         // stopping: false,
       }
       this.deviceList.push(_device)
@@ -385,6 +386,23 @@ export default {
       this.deviceList.length = 0
       taskInfo.updateAllList()
     },
+    checkStiStatus: function () {
+      this.deviceList.forEach(device => {
+        if (device.stimulation_last_time > 0) {
+          const stiExTime = taskInfo.getDeviceInfo(device.id).parameterSet.REPEAT_INTERVAL_littleEndian * taskInfo.getDeviceInfo(device.id).parameterSet.REPEAT_TIME_littleEndian
+          const now = parseInt(Date.now() / 1000)
+          let stiExTimeOut = (stiExTime / 1000) - (now - parseInt(parseFloat(device.stimulation_last_time)))
+          stiExTimeOut = stiExTimeOut > 0 ? stiExTimeOut : 0
+          console.log(stiExTime, now, parseInt(parseFloat(device.stimulation_last_time)), stiExTimeOut)
+          clearTimeout(this.stiTimeOut)
+          if (taskInfo.getDeviceInfo(device.id).parameterSet.CONTINUOUS_STI < 0) {
+            this.stiTimeOut = setTimeout(() => {
+              this.stiStop(device)
+            }, (stiExTimeOut * 1000) + 3000)
+          }
+        }
+      })
+    },
     generateChart: function (device) {
       this.$emit('add', device.id)
     },
@@ -400,17 +418,20 @@ export default {
         }
       })
     },
-  },
-  async mounted () {
-    // this.pageMqttSub()
-    // for (const device in this.deviceOptions) {
-    //   this.deviceSelect = this.deviceOptions[device]
-    //   await this.addDevice()
-    // }
-  },
-  destroyed () {
-    // this.loadingDone()
-    // this.pageMqttUnSub()
+    pageToast: function (mes) {
+      this.showToast(
+        mes,
+        {
+          icon: 'fa-bell',
+          position: 'bottom-right',
+          duration: 4000,
+        },
+      )
+    },
+
+    ...mapActions('taskContent', [
+      taskTypes.chart.defaultChartGenerator,
+    ]),
   },
   watch: {
   },

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

@@ -114,6 +114,7 @@ export default {
       })
     },
     refresh: function () {
+      //  console.log(this.deviceList)
       this.$nextTick(() => {
         if (this.$refs.elewindow_ref != null) {
           this.$refs.elewindow_ref.refresh()

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

@@ -1,6 +1,6 @@
 <template>
   <div class="flex" :class="cardclass">
-    <va-card style="height: 88vh; overflow: auto;">
+    <va-card>
       <template slot="header">
         <va-icon name="fa fa-bluetooth-b mr-3" color="primary"/>
         <h5 class="mt-0 mb-0">DEVICES</h5>
@@ -36,11 +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 types from '@/store/modules/task/content/types'
+import { mapFields } from 'vuex-map-fields'
+import taskTypes from '@/store/modules/task/content/types'
 
 export default {
   name: 'TaskDevices',
@@ -63,12 +63,18 @@ export default {
     return {
       deviceSelect: '',
       deviceOptions: taskInfo.getDeviceListNotRegister(),
-      deviceList: taskInfo.getDeviceListRegister(),
+      // deviceList: this.deviceList,
       state: {
         LOADING: false,
       },
+      stiTimeOut: null,
     }
   },
+  computed: {
+    ...mapFields('taskContent', [
+      'deviceList',
+    ]),
+  },
   mqtt: {
   },
   methods: {
@@ -83,15 +89,7 @@ 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)
+      //  console.log(this.deviceOptions)
       for (let i = 0; i <= 11; i++) {
         if (taskInfo.getDeviceInfoByRawID(i).info.status === 'connected') {
           const index = this.deviceList.findIndex(d => taskInfo.getRawDeviceID(d.id) === i)
@@ -112,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({
@@ -147,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({
@@ -156,13 +160,7 @@ export default {
           }))
         }
       })
-      await chartData.defaultChartGenerator(device.id, null, 'device')
       if (!taskInfo.getDeviceInfo(device.id).info.isSync) {
-        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
-          header: 'device_instruction/0',
-          device: taskInfo.getRawDeviceID(device.id),
-          instruction: 'record_para_set',
-        }))
         this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
           header: 'device_instruction/0',
           device: taskInfo.getRawDeviceID(device.id),
@@ -176,7 +174,7 @@ export default {
         })
 
         // ### show device info
-        console.log(taskInfo.getDeviceInfo(device.id))
+        //  console.log(taskInfo.getDeviceInfo(device.id))
       }
     },
     stopRecord: async function (device) {
@@ -221,11 +219,6 @@ export default {
         this.pageToast('[Stimulation] Please run recording first.')
         return false
       }
-      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
-        header: 'device_instruction/0',
-        device: taskInfo.getRawDeviceID(device.id),
-        instruction: 'stimulate_para_set',
-      }))
       this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
         header: 'device_instruction/0',
         device: taskInfo.getRawDeviceID(device.id),
@@ -243,6 +236,11 @@ export default {
         device_config: taskInfo.getTaskInfo().deviceList,
       })
       device.isStimulate = true
+      const stiExTime = taskInfo.getDeviceInfo(device.id).parameterSet.REPEAT_INTERVAL_littleEndian * taskInfo.getDeviceInfo(device.id).parameterSet.REPEAT_TIME_littleEndian
+      clearTimeout(this.stiTimeOut)
+      this.stiTimeOut = setTimeout(() => {
+        this.stiStop(device)
+      }, (stiExTime + 3000))
       this.pageToast('The device ' + device.name + ' start stimulate.')
     },
     stiStop: function (device) {
@@ -258,6 +256,7 @@ export default {
         content: 0,
       }))
       device.isStimulate = false
+      clearTimeout(this.stiTimeOut)
     },
     fastSettle: function (device) {
       this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
@@ -266,37 +265,6 @@ export default {
         instruction: 'FAST_SET',
       }))
     },
-    // addDevice: async function () {
-    //   if (this.deviceSelect.id == null) {
-    //     return false
-    //   }
-    //   await taskInfo.getTaskInfo().deviceAddrList.push(taskInfo.getDeviceInfoByRawID(this.deviceSelect.id).info.device_address)
-    //   await taskInfo.getTaskInfo().taskDeviceID.push(this.deviceSelect.id)
-    //   const _address = this.GLOBAL.transMac(taskInfo.getDeviceInfoByRawID(this.deviceSelect.id).info.device_address)
-
-    //   const pic = taskInfo.getDevicePic(taskInfo.getDeviceInfoByRawID(this.deviceSelect.id).info.library_name)
-    //   let type = ''
-    //   if (taskInfo.getDeviceInfoByRawID(this.deviceSelect.id).info.library_name.indexOf('Elite') >= 0) {
-    //     type = 'Elite'
-    //   } else if (taskInfo.getDeviceInfoByRawID(this.deviceSelect.id).info.library_name.indexOf('Neulive') >= 0) {
-    //     type = 'Neulive'
-    //   }
-
-    //   const _device = {
-    //     id: taskInfo.getTaskInfo().taskDeviceID.indexOf(this.deviceSelect.id),
-    //     name: '[' + taskInfo.getTaskInfo().taskDeviceID.indexOf(this.deviceSelect.id) + '] ' + taskInfo.getDeviceInfoByRawID(this.deviceSelect.id).info.device_name,
-    //     addr: taskInfo.getDeviceInfoByRawID(this.deviceSelect.id).info.device_address,
-    //     address: _address,
-    //     picture: pic,
-    //     type: type,
-    //     isSync: taskInfo.getDeviceInfoByRawID(this.deviceSelect.id).info.isSync,
-    //     stopping: false,
-    //   }
-    //   this.deviceList.push(_device)
-    //   this.deviceSelect = ''
-    //   taskInfo.updateAllList()
-    //   this.$emit('add', _device.id)
-    // },
     addDevice: async function (selectID) {
       if (selectID == null) {
         return false
@@ -331,9 +299,12 @@ export default {
         type: type,
         isSync: taskInfo.getDeviceInfoByRawID(selectID).info.isSync,
         isStimulate: taskInfo.getDeviceInfoByRawID(selectID).info.isStimulate,
+        stimulation_last_time: taskInfo.getDeviceInfoByRawID(selectID).info.stimulation_last_time,
+        sdCardStatus: taskInfo.getDeviceInfoByRawID(selectID).info.sd_card_status,
         // stopping: false,
       }
       this.deviceList.push(_device)
+      //  console.log('sss', this.deviceList)
       this.deviceSelect = ''
       taskInfo.updateAllList()
       this.$emit('add', _device.id)
@@ -354,6 +325,21 @@ export default {
       taskInfo.updateAllList()
       this.$emit('remove', device.id)
     },
+    checkStiStatus: function () {
+      this.deviceList.forEach(device => {
+        if (device.stimulation_last_time > 0) {
+          const stiExTime = taskInfo.getDeviceInfo(device.id).parameterSet.REPEAT_INTERVAL_littleEndian * taskInfo.getDeviceInfo(device.id).parameterSet.REPEAT_TIME_littleEndian
+          const now = parseInt(Date.now() / 1000)
+          let stiExTimeOut = (stiExTime / 1000) - (now - parseInt(parseFloat(device.stimulation_last_time)))
+          stiExTimeOut = stiExTimeOut > 0 ? stiExTimeOut : 0
+          console.log(stiExTime, now, parseInt(parseFloat(device.stimulation_last_time)), stiExTimeOut)
+          clearTimeout(this.stiTimeOut)
+          this.stiTimeOut = setTimeout(() => {
+            this.stiStop(device)
+          }, (stiExTimeOut * 1000) + 3000)
+        }
+      })
+    },
     clearDevice: async function () {
       taskInfo.getTaskInfo().deviceAddrList.length = 0
       taskInfo.getTaskInfo().taskDeviceID.length = 0
@@ -385,19 +371,15 @@ export default {
         },
       )
     },
-    ...mapActions('taskContent', [types.gimer.checkDeviceStatus]),
+
+    ...mapActions('taskContent', [
+      taskTypes.gimer.checkDeviceStatus,
+      taskTypes.chart.defaultChartGenerator,
+    ]),
   },
   async mounted () {
-    console.log('sss', taskInfo.getDeviceList(), this.deviceList)
-    // this.pageMqttSub()
-    // for (const device in this.deviceOptions) {
-    //   this.deviceSelect = this.deviceOptions[device]
-    //   await this.addDevice()
-    // }
   },
   destroyed () {
-    // this.loadingDone()
-    // this.pageMqttUnSub()
   },
   watch: {
   },

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

@@ -104,7 +104,8 @@
 
 <script>
 import { taskInfo } from '../../../../data/task/TaskInfo'
-import { chartData } from '../../../../data/task/ChartsManagement'
+import { mapActions } from 'vuex'
+import taskTypes from '@/store/modules/task/content/types'
 
 export default {
   name: 'TaskFormula',
@@ -122,6 +123,7 @@ export default {
   },
   data () {
     return {
+      deviceList: [],
       showFormulaModal: false,
       formulaSelect: '',
       formulaOptions: [
@@ -172,11 +174,16 @@ export default {
       this.formulaNumber--
       this.$emit('remove', this.formulaRemoveSelect.id)
     },
-    generate: function (formula) {
+    generate: async function (formula) {
       switch (formula.type) {
         case 'Sheet Resistance':
           formula.dataNow = 0
-          chartData.defaultChartGenerator(formula.id, null, 'formula')
+          await this.taskContentChartDefaultChartGenerator({
+            _deviceList: this.deviceList,
+            _itemID: formula.id,
+            _chartID: null,
+            _type: 'formula',
+          })
           break
       }
       this.pageToast('The ' + formula.name + 'has been applied.')
@@ -191,6 +198,10 @@ export default {
         },
       )
     },
+
+    ...mapActions('taskContent', [
+      taskTypes.chart.defaultChartGenerator,
+    ]),
   },
   mounted () {
     // this.pageMqttSub()

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

@@ -1,83 +0,0 @@
-<template>
-  <div>
-    <fieldset>
-      <va-radio-button
-        option="Auto"
-        v-model="optionValue"
-        label="Auto"
-      />
-      <br v-if="optionValue === 'Auto'"/>
-      <auto-block v-if="optionValue === 'Auto'" :ref="'AutoBlock'" :deviceID="deviceID"/>
-      <va-radio-button
-        option="Advanced"
-        v-model="optionValue"
-        label="Advanced"
-      />
-      <br v-if="optionValue === 'Advanced'"/>
-      <advanced-block v-if="optionValue === 'Advanced'" :ref="'AdvancedBlock'" :deviceID="deviceID"/>
-    </fieldset>
-  </div>
-</template>
-
-<script>
-
-import { taskInfo } from '../../../../data/task/TaskInfo'
-import AutoBlock from '../parameter/item/DPV/AutoBlock'
-import AdvancedBlock from '../parameter/item/DPV/AdvancedBlock'
-
-export default {
-  name: 'EliteParameterRecordingEliteDPV',
-  components: {
-    AutoBlock,
-    AdvancedBlock,
-  },
-  props: {
-    deviceID: {
-      type: Number,
-      required: true,
-    },
-    deviceName: {
-      type: String,
-      default: 'Elite',
-    },
-  },
-  created () {
-  },
-  data () {
-    return {
-      optionValue: 'Auto',
-    }
-  },
-  mqtt: {
-  },
-  methods: {
-    mqttPub: function (topic, mes) {
-      this.$mqtt.publish(topic, mes)
-    },
-    // Array[String of Parameter Nmae, Value]
-    deviceParameterChange: function (e) {
-      console.log('e[0],e[1]', e[0], ',', e[1])
-      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
-        header: 'device_parameter/0',
-        device: taskInfo.getRawDeviceID(this.deviceID),
-        parameter: e[0],
-        content: e[1],
-      }))
-    },
-    refresh () {
-      if (this.$refs.AutoBlock != null) {
-        this.$refs.AutoBlock.refresh()
-      }
-      if (this.$refs.AdvancedBlock != null) {
-        this.$refs.AdvancedBlock.refresh()
-      }
-    },
-  },
-  mounted () {
-  },
-  watch: {
-  },
-  destroyed () {
-  },
-}
-</script>

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

@@ -489,7 +489,7 @@ export default {
 
       if (this.workingModeSelect.id !== taskInfo.getDeviceInfo(this.deviceID).parameterSet.MODE) {
         this.deviceParameterChange(['MODE', this.workingModeSelect.id])
-        console.log(this.workingModeSelect.id, this.workingModeSelect.description)
+        //  console.log(this.workingModeSelect.id, this.workingModeSelect.description)
       }
     },
     instruParameterChange: function (e) {

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

@@ -1,34 +1,32 @@
 <template>
-  <div class="flex">
-    <va-tree-root>
-      <div class="row pt-0 pb-0">
-        <div class="flex sm12 xl12 md12 xs12">
-          <va-select
-            @input="workingModeSelectChange(workingModeSelect)"
-            :label="'WORKING MODE'"
-            v-model="workingModeSelect"
-            textBy="description"
-            :options="workingModeOptions"
-            noClear
-            style="width: 200px;"
-          />
-          <va-button
-            v-if="!measureEocButton.status && workingModeSelect != null && (workingModeSelect.id == 7 || workingModeSelect.id == 8 || workingModeSelect.id == 9)"
-            color="primary"
-            target="_blank"
-            @click="measureEoc()"
-            small>
-            {{measureEocButton.start}}
-          </va-button>
-          <va-button
-            v-if="measureEocButton.status && workingModeSelect != null && (workingModeSelect.id == 7 || workingModeSelect.id == 8 || workingModeSelect.id == 9)"
-            color="danger"
-            target="_blank"
-            @click="measureEocStop()"
-            small>
-            {{measureEocButton.stop}}
-          </va-button>
-        </div>
+  <div class="flex px-0 mx-0 my-0 py-0">
+    <va-tree-root class="flex sm12 xl12 md12 xs12 px-0 mx-0 my-0 py-0">
+      <div class="flex sm12 xl12 md12 xs12 px-0 mx-0 my-0 py-0">
+        <va-select
+          @input="workingModeSelectChange(workingModeSelect)"
+          :label="'WORKING MODE'"
+          v-model="workingModeSelect"
+          textBy="description"
+          :options="workingModeOptions"
+          noClear
+          style="width: 300px;"
+        />
+        <va-button
+          v-if="!measureEocButton.status && workingModeSelect != null && (workingModeSelect.id == 7 || workingModeSelect.id == 8 || workingModeSelect.id == 9)"
+          color="primary"
+          target="_blank"
+          @click="measureEoc()"
+          small>
+          {{measureEocButton.start}}
+        </va-button>
+        <va-button
+          v-if="measureEocButton.status && workingModeSelect != null && (workingModeSelect.id == 7 || workingModeSelect.id == 8 || workingModeSelect.id == 9)"
+          color="danger"
+          target="_blank"
+          @click="measureEocStop()"
+          small>
+          {{measureEocButton.stop}}
+        </va-button>
       </div>
 
       <!-- 1.5ui -->
@@ -239,7 +237,7 @@
         </va-tree-node>
       </va-tree-category>
 
-      <va-tree-category
+      <!-- <va-tree-category
         v-if="workingModeSelect != null && workingModeSelect.id == 13"
         style="font-size: 20px;"
         :label="'Duration ( ' + duration + timeOptions[timeUnit].label + ' )'">
@@ -256,7 +254,7 @@
             </div>
           </div>
         </va-tree-node>
-      </va-tree-category>
+      </va-tree-category> -->
 
       <va-tree-category
         v-if="workingModeSelect != null && workingModeSelect.id == 12"
@@ -381,8 +379,8 @@ import OppLevelButton from '../parameter/item/OppLevelButton'
 import MicroAmpereRange from '../parameter/item/MicroAmpereRange'
 import ScanRateRange from '../parameter/item/ScanRateRange'
 import ResolutionRange from '../parameter/item/ResolutionRange'
-import EliteParameterRecordingElitePulseSensing from './EliteParameterRecordingElitePulseSensing'
-import EliteParameterRecordingEliteDPV from './EliteParameterRecordingEliteDPV'
+import EliteParameterRecordingElitePulseSensing from '../parameter/item/PulseSensing/EliteParameterRecordingElitePulseSensing'
+import EliteParameterRecordingEliteDPV from '../parameter/item/DPV/EliteParameterRecordingEliteDPV'
 
 export default {
   name: 'EliteParameterRecordingElitezm15',
@@ -629,7 +627,7 @@ export default {
     },
     // Array[String of Parameter Nmae, Value]
     deviceParameterChange: function (e) {
-      console.log('e[0],e[1]', e[0], ',', e[1])
+      //  console.log('e[0],e[1]', e[0], ',', e[1])
       this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
         header: 'device_parameter/0',
         device: taskInfo.getRawDeviceID(this.deviceID),
@@ -777,7 +775,7 @@ export default {
 
       if (this.workingModeSelect.id !== taskInfo.getDeviceInfo(this.deviceID).parameterSet.MODE) {
         this.deviceParameterChange(['MODE', this.workingModeSelect.id])
-        console.log(this.workingModeSelect.id, this.workingModeSelect.description)
+        //  console.log(this.workingModeSelect.id, this.workingModeSelect.description)
       }
     },
     measureEoc () {

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

@@ -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,10 +258,14 @@ 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 = 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
         }
       })
       this.ampGainSelect = this.ampGainOptions[(taskInfo.getDeviceInfo(this.deviceID).parameterSet.AMP_GAIN) % 4]
@@ -328,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),
@@ -369,7 +389,7 @@ export default {
           device: taskInfo.getRawDeviceID(this.deviceID),
           content: this.acceleratorSensitivitySelect.value,
         }))
-        const charts = chartData.getAllChartsData()
+        const charts = this.chartData
         for (const chartID in charts) {
           for (const seriesIndex in charts[chartID].series) {
             if (charts[chartID].series[seriesIndex].yAxisSource[1] >= 256 && charts[chartID].series[seriesIndex].yAxisSource[1] <= 260) {

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

@@ -13,7 +13,7 @@
                 :key="channel"
               >
                 <va-button
-                  class="mx-1 px-1"
+                  class="ma-1 pa-0 circle-button"
                   v-if="channelList != null && channelList.indexOf(channel) >= 0"
                   @click="channelClickRemove(channel)"
                   small
@@ -21,7 +21,7 @@
                   {{channel}}
                 </va-button>
                 <va-button
-                  class="mx-1 px-1"
+                  class="ma-1 pa-0 circle-button"
                   v-if="channelList == null || channelList.indexOf(channel) < 0"
                   @click="channelClickAdd(channel)"
                   small outline
@@ -46,7 +46,7 @@
                 :key="axisChannel"
               >
                 <va-button
-                  class="mx-1 px-1"
+                  class="ma-1 pa-0 circle-button"
                   v-if="axisChannelList != null && axisChannelList.indexOf(axisChannel) >= 0"
                   @click="axisChannelClickRemove(axisChannel)"
                   small
@@ -54,7 +54,7 @@
                   {{axisChannel}}
                 </va-button>
                 <va-button
-                  class="mx-1 px-1"
+                  class="ma-1 pa-0 circle-button"
                   v-if="axisChannelList == null || axisChannelList.indexOf(axisChannel) < 0"
                   @click="axisChannelClickAdd(axisChannel)"
                   small outline
@@ -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: [],
@@ -160,12 +165,12 @@ export default {
           description: '100',
         },
         {
-          id: 1,
-          description: '400',
+          id: 2,
+          description: '300',
         },
         {
-          id: 2,
-          description: '800',
+          id: 1,
+          description: '500',
         },
       ],
       sampleRateSelect: null,
@@ -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,19 +289,29 @@ 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
         }
       })
       const channelSetHight = taskInfo.getDeviceInfo(this.deviceID).parameterSet.RECORDING_CH_H.toString(2).split('').reverse()
       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
+        }
+      })
+      this.ampGainOptions.forEach(option => {
+        if (option.id === taskInfo.getDeviceInfo(this.deviceID).parameterSet.AMP_GAIN) {
+          this.ampGainSelect = option
         }
       })
-      this.ampGainSelect = this.ampGainOptions[(taskInfo.getDeviceInfo(this.deviceID).parameterSet.AMP_GAIN) % 4]
       this.sampleRateSelect = this.sampleRateOptions[this.sampleRateOptions.findIndex(ele => ele.value === taskInfo.getDeviceInfo(this.deviceID).parameterSet.SAMPLE_RATE)]
       this.recordOn = taskInfo.getDeviceInfo(this.deviceID).parameterSet.RECORDING
       this.axisChannelList.length = 0
@@ -481,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) {
@@ -587,3 +602,11 @@ export default {
   },
 }
 </script>
+
+<style lang="scss">
+  .circle-button {
+    height: 25px;
+    width: 25px;
+    border-radius: '50%';
+  }
+</style>

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

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

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

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

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

@@ -51,11 +51,11 @@
           <div class="flex sm12 xl12 md12 xs12">
             <div
               style='display: inline-block;'
-              v-for="channel in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]"
+              v-for="channel in [17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32]"
               :key="channel"
             >
               <va-button
-                class="mx-1 px-2"
+                class="ma-1 pa-0 circle-button"
                 color="success"
                 v-if="posChannelList.indexOf(channel) >= 0 && negChannelList.indexOf(channel) < 0"
                 @click="channelClick(channel)"
@@ -64,7 +64,7 @@
                 {{channel}}
               </va-button>
               <va-button
-                class="mx-1 px-2"
+                class="ma-1 pa-0 circle-button"
                 color="danger"
                 v-if="posChannelList.indexOf(channel) < 0 && negChannelList.indexOf(channel) >= 0"
                 @click="channelClick(channel)"
@@ -73,7 +73,7 @@
                 {{channel}}
               </va-button>
               <va-button
-                class="mx-1 px-2"
+                class="ma-1 pa-0 circle-button"
                 v-if="posChannelList.indexOf(channel) < 0 && negChannelList.indexOf(channel) < 0"
                 @click="channelClick(channel)"
                 small outline
@@ -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">
@@ -116,20 +117,65 @@
                   Rounds
                 </p>
               </va-input>
-              <va-button slot="append" class="ml-2 pa-1 shrink" small @click="cycleNumberChange(256)">
-                256
+              <va-button slot="append" class="ml-2 pa-1 shrink" small @click="cycleNumberChange(255)">
+                255
               </va-button>
             </div>
-            <va-slider
-              class="flex sm12 xl12 md12 xs12"
-              @mouseup.native="cycleNumberChange(cycleNumber)"
-              @mouseleave.native="cycleNumberChange(cycleNumber)"
-              @touchend.native="cycleNumberChange(cycleNumber)"
-              value-visible
-              v-model="cycleNumber"
-              :min="1"
-              :max="256"
-            />
+          </div>
+        </div>
+      </div>
+
+      <div class="mt-4" 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('SKETCHMAP')"/>
+        </div>
+
+        <div class="row">
+          <div class="flex sm12 xl12 md12 xs12">
+            <div class="flex row align--center">
+              <va-button slot="append" class="mr-2 pa-1 shrink" small @click="repeatNumberChange(1)">
+                1
+              </va-button>
+              <va-input
+                @keyup.enter="repeatNumberChange(repeatNumberInput)"
+                v-model="repeatNumberInput"
+                class="mb-0"
+              >
+                <p slot="append" style="margin-right: 0;" small>
+                  Rounds
+                </p>
+              </va-input>
+              <va-button slot="append" class="ml-2 pa-1 shrink" small @click="repeatNumberChange(255)">
+                255
+              </va-button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <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('SKETCHMAP')"/>
+        </div>
+
+        <div class="row">
+          <div class="flex sm12 xl12 md12 xs12">
+            <div class="flex row align--center">
+              <va-input
+                @keyup.enter="repeatIntervalChange(repeatIntervalInput)"
+                v-model="repeatIntervalInput"
+                class="mb-0"
+                :key="repeatIntervalErrorMsg.key"
+                :error="repeatIntervalErrorMsg.showError"
+                :error-messages="repeatIntervalErrorMsg.errorMsg"
+              >
+                <p slot="append" style="margin-right: 0;" small>
+                  s
+                </p>
+              </va-input>
+            </div>
           </div>
         </div>
       </div>
@@ -158,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>
@@ -196,7 +232,7 @@
                 4000
               </va-button>
             </div>
-            <va-slider
+            <!-- <va-slider
               class="flex sm12 xl12 md12 xs12"
               @mouseup.native="amplitudeNumberChange(amplitudeNumber.PHASE2, 'PHASE2')"
               @mouseleave.native="amplitudeNumberChange(amplitudeNumber.PHASE2, 'PHASE2')"
@@ -205,7 +241,7 @@
               v-model="amplitudeNumber.PHASE2"
               :min="5"
               :max="4000"
-            />
+            /> -->
           </div>
         </div>
       </div>
@@ -243,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"
@@ -257,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"
@@ -398,15 +431,27 @@
     >
       <img src='@/assets/img/sti_user_guide.png' class="sti_guideline">
     </va-modal>
+    <va-modal
+      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: {
@@ -420,7 +465,7 @@ export default {
   },
   data () {
     return {
-      showGuideLineModal: { ELECTRODE: false, PATTERN: false },
+      showGuideLineModal: { ELECTRODE: false, PATTERN: false, SKETCHMAP: false },
       stimulationOn: false,
       posChannelList: [2],
       negChannelList: [1],
@@ -439,16 +484,21 @@ export default {
       cycleNumberSelect: null,
       cycleNumberOptions: [
         {
-          label: 'limite',
+          label: 'limited',
           value: 0,
         },
         {
-          label: 'Unlimite',
+          label: 'Unlimited',
           value: 1,
         },
       ],
       cycleNumberInput: '1',
       cycleNumber: 1,
+      repeatIntervalErrorMsg: { id: 1, key: 0, showError: false, errorMsg: [''] },
+      repeatNumberInput: '1',
+      repeatNumber: 1,
+      repeatIntervalInput: '65.54', // s
+      repeatInterval: 65535, // ms
       // cycleNumberArray: Array(9).fill(1),
       amplitudeNumberInput: {
         PHASE1: '50',
@@ -506,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: {
@@ -518,6 +596,19 @@ export default {
         return true
       }
     },
+  },
+  mqtt: {
+  },
+  methods: {
+    toggleModal (which) {
+      if (which === 'ELECTRODE') {
+        this.showGuideLineModal.ELECTRODE = true
+      } else if (which === 'PATTERN') {
+        this.showGuideLineModal.PATTERN = true
+      } else if (which === 'REPEAT') {
+        this.showGuideLineModal.REPEAT = true
+      }
+    },
     TRangeStatusCheck () {
       let flag = true
       for (let i = 0; i < this.TRangeErrorMsgList.length; i++) {
@@ -532,23 +623,35 @@ export default {
         return false
       }
     },
-  },
-  mqtt: {
-  },
-  methods: {
-    toggleModal (which) {
-      if (which === 'ELECTRODE') {
-        this.showGuideLineModal.ELECTRODE = true
-      } else if (which === 'PATTERN') {
-        this.showGuideLineModal.PATTERN = true
+    repeatIntervalCheck () {
+      // * 1000 -> ms to us
+      if (this.repeatInterval * 1e3 > this.periodNumber * this.cycleNumber + taskInfo.getDeviceInfo(this.deviceID).parameterSet.STI_T5_CH1) {
+        return true
       }
+      return false
     },
     mqttPub: function (topic, mes) {
       this.$mqtt.publish(topic, mes)
     },
+    deviceInstruction: function (id, instr) {
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_instruction/0',
+        device: taskInfo.getRawDeviceID(id),
+        instruction: instr,
+      }))
+    },
+    deviceParameterChange: async function (id, name, content) {
+      taskInfo.getDeviceInfo(id).parameterSet[name] = content
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_parameter/0',
+        device: taskInfo.getRawDeviceID(id),
+        parameter: name,
+        content: content,
+      }))
+    },
     refreshPattern () {
       this.patternModeSelect = taskInfo.getDeviceInfo(this.deviceID).parameterSet.STI_PATTERN ? 1 : 0
-      if (this.TRangeStatusCheck === true) {
+      if (this.TRangeStatusCheck() === true) {
         // if t1~t4 is not valid input, not need to refresh
         this.t1Range = taskInfo.getDeviceInfo(this.deviceID).parameterSet.STI_T1_CH0
         this.t1RangeInput = String((this.t1Range * 10) / this.unitMultiply)
@@ -584,9 +687,9 @@ export default {
       stiChannelSet.forEach((element, index) => {
         if (parseInt(element) > 0) {
           if (parseInt(stiPolaritySet[index]) > 0) {
-            this.posChannelList.push(index + 1)
+            this.posChannelList.push(index + 17)
           } else {
-            this.negChannelList.push(index + 1)
+            this.negChannelList.push(index + 17)
           }
         }
       })
@@ -594,6 +697,10 @@ export default {
       this.cycleNumberSelect = taskInfo.getDeviceInfo(this.deviceID).parameterSet.CONTINUOUS_STI ? 1 : 0
       this.cycleNumber = (taskInfo.getDeviceInfo(this.deviceID).parameterSet.STI_CYCLE_CH0 + 1)
       this.cycleNumberInput = String(this.cycleNumber)
+      this.repeatNumber = (taskInfo.getDeviceInfo(this.deviceID).parameterSet.REPEAT_TIME_littleEndian)
+      this.repeatNumberInput = String(this.repeatNumber)
+      this.repeatInterval = (taskInfo.getDeviceInfo(this.deviceID).parameterSet.REPEAT_INTERVAL_littleEndian) // unit: ms
+      this.repeatIntervalInput = String(this.repeatInterval / 1e3)
       // this.cycleNumberArray = taskInfo.getDeviceInfo(this.deviceID).parameterSet.STI_CYCLE_LIST
       this.amplitudeNumber.PHASE1 = taskInfo.getDeviceInfo(this.deviceID).parameterSet.STI_AMPLITUDE_L1 * 5
       this.amplitudeNumberInput.PHASE1 = String(this.amplitudeNumber.PHASE1)
@@ -606,6 +713,7 @@ export default {
       for (let i = 0; i <= 3; i++) {
         this.TRangeErrorMsgList[i].key++
       }
+      this.repeatIntervalErrorMsg.key++
     },
     transUnit () {
       if (this.unitSelect === 0) { // s
@@ -704,39 +812,61 @@ export default {
         }
       }
     },
+    repeatNumberChange (val) {
+      if (isNaN(val) || parseInt(val) > 256 || parseInt(val) < 1) {
+        this.repeatNumberInput = '1'
+        this.repeatNumber = 1
+      } else {
+        this.repeatNumberInput = String(val)
+        this.repeatNumber = parseInt(val)
+      }
+
+      if (this.repeatNumber !== taskInfo.getDeviceInfo(this.deviceID).REPEAT_TIME_littleEndian) {
+        this.deviceParameterChange(this.deviceID, 'REPEAT_TIME_littleEndian', String(this.repeatNumber))
+      }
+    },
+    repeatIntervalChange (val) {
+      this.repeatIntervalInput = String(parseFloat(val).toFixed(2))
+      this.repeatInterval = parseFloat(this.repeatIntervalInput) * 1e3
+      if (this.repeatInterval !== taskInfo.getDeviceInfo(this.deviceID).REPEAT_INTERVAL_littleEndian) {
+        if (this.repeatIntervalCheck()) {
+          this.deviceParameterChange(this.deviceID, 'REPEAT_INTERVAL_littleEndian', this.repeatInterval)
+          this.resetRepeatIntervalErrorMsg()
+        } else {
+          this.updateRepeatIntervalErrorMsg({ status: true, msg: `Ti < ${this.periodNumberInput}${this.unitOptions[this.unitSelect].label} (period) * 1 (cycle)` })
+        }
+      }
+      this.updateStiParamCheck()
+    },
+    updateRepeatIntervalErrorMsg (payload) {
+      this.repeatIntervalErrorMsg.showError = payload.status
+      this.repeatIntervalErrorMsg.errorMsg[0] = payload.msg
+    },
+    resetRepeatIntervalErrorMsg () {
+      this.updateRepeatIntervalErrorMsg({ status: false, msg: '' })
+    },
     amplitudeNumberChange (val, type) {
       if (this.amplitudeNumber[type] == null) {
         return false
       }
-      if (typeof (val) === 'string') {
-        if (isNaN(val) || parseInt(val) > 4000 || parseInt(val) < 5) {
-          val = '50'
-          this.amplitudeNumberInput[type] = '50'
-          this.amplitudeNumber[type] = 50
-        }
-        if (parseInt(this.amplitudeNumberInput[type]) !== parseInt(this.amplitudeNumber)) {
-          this.amplitudeNumber[type] = 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) {
-          val = 50
-          this.amplitudeNumberInput[type] = '50'
-          this.amplitudeNumber[type] = 50
-        }
-        if (parseInt(this.amplitudeNumberInput[type]) !== parseInt(this.amplitudeNumber[type]) || this.amplitudeNumber[type] !== val) {
-          this.amplitudeNumberInput[type] = String(val)
-          this.amplitudeNumber[type] = val
-        }
+        val -= remainder
       }
+
+      if (isNaN(val) || val > 4000 || val < 5) {
+        val = 50
+      }
+      this.amplitudeNumberInput[type] = String(val)
+      this.amplitudeNumber[type] = val
       if (parseInt(this.amplitudeNumber[type] / 5) !== parseInt(taskInfo.getDeviceInfo(this.deviceID).parameterSet['STI_AMPLITUDE_' + this.amplitudeName[type][1]])) {
         const content2 = parseInt(this.amplitudeNumber[type] / 5)
-        const content1 = parseInt(this.amplitudeNumber[type] / 5 / 2)
-        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
-          header: 'device_parameter/0',
-          device: taskInfo.getRawDeviceID(this.deviceID),
-          parameter: `STI_AMPLITUDE_${this.amplitudeName[type][0]}|STI_AMPLITUDE_${this.amplitudeName[type][1]}`,
-          content: `${content1}|${content2}`,
-        }))
+        const content1 = parseInt(this.amplitudeNumber[type] / 5)
+        this.deviceParameterChange(this.deviceID, `STI_AMPLITUDE_${this.amplitudeName[type][0]}|STI_AMPLITUDE_${this.amplitudeName[type][1]}`, `${content1}|${content2}`)
       }
     },
 
@@ -825,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)
@@ -900,12 +1030,7 @@ export default {
     },
 
     updateStiParamCheck () {
-      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
-        header: 'device_parameter/0',
-        device: taskInfo.getRawDeviceID(this.deviceID),
-        parameter: 'sti_trange_set_done',
-        content: this.TRangeStatusCheck,
-      }))
+      this.deviceParameterChange(this.deviceID, 'sti_trange_set_done', this.TRangeStatusCheck() && this.repeatIntervalCheck())
     },
     autoResetAllTRange () {
       if (this.patternModeSelect === 0) { // Monophasic
@@ -1012,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' })
         }
@@ -1032,7 +1157,7 @@ export default {
       let stiChannelSet = ''
       let stiPolaritySet = ''
 
-      for (let i = 16; i >= 1; i--) {
+      for (let i = 32; i >= 17; i--) {
         if (this.posChannelList.indexOf(i) >= 0) {
           stiChannelSet += '1'
           stiPolaritySet += '1'
@@ -1148,4 +1273,10 @@ export default {
     justify-content: center;
     position: relative;
   }
+
+  .circle-button {
+    height: 25px;
+    width: 25px;
+    border-radius: '50%';
+  }
 </style>

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

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

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

@@ -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: {
@@ -140,7 +155,7 @@ export default {
   mounted () {
     this.pageInit()
     this.device = taskInfo.getDeviceInfo(this.deviceID)
-    console.log(taskInfo.getDeviceInfo(this.deviceID).info)
+    //  console.log(taskInfo.getDeviceInfo(this.deviceID).info)
   },
   watch: {
     deviceID: function (val) {

src/components/task/content/parameter/item/AnalogCurrentControl/ChannelBlock.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="row flex sm12 xl12 md12 xs12 my-0 py-0 align--center">
-    <div class="flex sm3 xl3 md3 xs3 px-0 mx-0 my-0 py-0">
+  <div class="row flex sm12 xl12 md12 xs12 mb-2 pb-1 align--center">
+    <div class="flex sm4 xl4 md4 xs4 px-0 mx-0 my-0 py-0">
       <p class="display-6"> CHANNEL {{ channel }} <p/>
     </div>
     <div class="flex sm3 xl3 md3 xs3 px-0 mx-0 my-0 py-0">
@@ -10,19 +10,18 @@
         @blur="itemChange(currentNumberInput)"
         v-model="currentNumberInput"
         :disabled="!channelToggle"
-        class="mb-0"
+        class="mb-0 small-va-input"
       >
         <p slot="append" style="margin-right: 0;" small>
           mA
         </p>
       </va-input>
     </div>
-    <div class="flex sm6 xl6 md6 xs6 px-0 mx-0 my-0 py-0">
-      <va-toggle v-model="channelToggle" style="float: right;" small @click.native="switchToggle()"/>
+    <div class="flex sm5 xl5 md5 xs5 px-0 mx-0 my-0 py-0">
+      <va-toggle v-model="channelToggle" color="success" style="float: right;" small @click.native="switchToggle()"/>
     </div>
     <div class="flex sm12 xl12 md12 xs12 my-1 py-1" :key="inputeKey">
       <va-slider
-        @mouseup.native="itemChange(currentNumber)"
         @mouseleave.native="itemChange(currentNumber)"
         @touchend.native="itemChange(currentNumber)"
         pins
@@ -30,6 +29,7 @@
         :max="200"
         value-visible
         :step="10"
+        :color="channelToggle === true ? 'primary' : 'gray'"
         :disabled="!channelToggle"
         v-model="currentNumber"
       />
@@ -76,16 +76,15 @@ export default {
       this.$mqtt.publish(topic, mes)
     },
     itemChange (val) {
-      this.currentNumberInput = parseFloat(val).toFixed(1)
-      this.currentNumber = parseFloat(this.currentNumberInput)
+      this.currentNumberInput = parseFloat(parseFloat(val).toFixed(1))
+      this.currentNumber = this.currentNumberInput
       if (this.currentNumber !== parseFloat(taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName + String(this.channel - 1) + '_current']) / 250) {
         this.$emit('parameterChange', [this.parameterName + String(this.channel - 1) + '_current', String(this.currentNumberInput * 250)])
       }
       this.inputeKey++
     },
     switchToggle () {
-      const serverStatus = taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName + String(this.channel - 1)] === 1
-      if (this.channelToggle !== serverStatus) {
+      if (this.channelToggle !== (taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName + String(this.channel - 1)] === 1)) {
         this.$emit('parameterChange', [this.parameterName + String(this.channel - 1), this.channelToggle])
       }
       this.inputeKey++
@@ -93,7 +92,7 @@ export default {
     refresh () {
       this.channelToggle = taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName + String(this.channel - 1)] === 1
       this.currentNumber = parseFloat(taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName + String(this.channel - 1) + '_current']) / 250
-      this.currentNumberInput = String(this.currentNumber)
+      this.currentNumberInput = this.currentNumber
     },
   },
   mounted () {
@@ -105,3 +104,18 @@ export default {
   },
 }
 </script>
+
+<style lang="scss">
+  .small-va-input {
+    .va-input {
+      &__container {
+        min-height: 1rem;
+      }
+
+      &__container__input {
+        margin-bottom: 0.001rem;
+        padding: 0.8rem 0.5rem;
+      }
+    }
+  }
+</style>

src/components/task/content/parameter/item/AnalogCurrentControl/EliteParameterRecordingEliteACC.vue

@@ -4,20 +4,18 @@
       <channel-block :ref="'ChannelBlock'" :deviceID="deviceID" :channel="channel" :parameterName="'ACC_a_out'" @parameterChange="deviceParameterChange($event)"/>
     </div>
 
-    <va-tree-root>
-      <va-tree-category
-        style="font-size: 20px;"
-        :label="'Advanced Setting'">
-        <va-tree-node>
-          <div v-for="triggerIndex in triggerList" :key="'trigger_' + triggerIndex">
-            <trigger-block :ref="'TriggerBlock'" :deviceID="deviceID" :triggerIndex="triggerIndex" :parameterName="''" @parameterChange="deviceParameterChange($event)"/>
-          </div>
-          <div v-for="timerIndex in timerList" :key="'timer_' + timerIndex">
-            <timer-block :ref="'TimerBlock'" :deviceID="deviceID" :timerIndex="timerIndex" :parameterName="''" :channelList="channelList" @parameterChange="deviceParameterChange($event)"/>
-          </div>
-        </va-tree-node>
-      </va-tree-category>
-    </va-tree-root>
+    <div class="row px-0 mx-0">
+      <p class="display-6"> ADVANCED SETTING </p>
+      <va-toggle flat small color="success" v-model="openAdvanced"/>
+    </div>
+    <div v-if="openAdvanced">
+      <div v-for="triggerIndex in triggerList" :key="'trigger_' + triggerIndex">
+        <trigger-block :ref="'TriggerBlock'" :deviceID="deviceID" :triggerIndex="triggerIndex" @parameterChange="deviceParameterChange($event)"/>
+      </div>
+      <!-- <div v-for="timerIndex in timerList" :key="'timer_' + timerIndex">
+        <timer-block :ref="'TimerBlock'" :deviceID="deviceID" :timerIndex="timerIndex" :channelList="channelList" @parameterChange="deviceParameterChange($event)"/>
+      </div> -->
+    </div>
   </div>
 </template>
 
@@ -26,14 +24,14 @@
 import { taskInfo } from '@/data/task/TaskInfo'
 import ChannelBlock from './ChannelBlock'
 import TriggerBlock from './TriggerBlock'
-import TimerBlock from './TimerBlock'
+// import TimerBlock from './TimerBlock'
 
 export default {
   name: 'EliteParameterRecordingEliteACC',
   components: {
     ChannelBlock,
     TriggerBlock,
-    TimerBlock,
+    // TimerBlock,
   },
   props: {
     deviceID: {
@@ -52,6 +50,7 @@ export default {
       channelList: [1, 2, 3, 4],
       triggerList: [1, 2],
       timerList: [1, 2],
+      openAdvanced: false,
     }
   },
   mqtt: {
@@ -81,11 +80,11 @@ export default {
           this.$refs.TriggerBlock[i].refresh()
         }
       }
-      if (this.$refs.TimerBlock != null) {
-        for (let i = 0; i < this.$refs.TimerBlock.length; i++) {
-          this.$refs.TimerBlock[i].refresh()
-        }
-      }
+      // if (this.$refs.TimerBlock != null) {
+      //   for (let i = 0; i < this.$refs.TimerBlock.length; i++) {
+      //     this.$refs.TimerBlock[i].refresh()
+      //   }
+      // }
     },
   },
   mounted () {

src/components/task/content/parameter/item/AnalogCurrentControl/TriggerBlock.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="row flex sm12 xl12 md12 xs12 my-0 py-0 align--center">
-    <div class="flex sm3 xl3 md3 xs3 px-0 mx-0 my-0 py-0">
+  <div class="row flex sm12 xl12 md12 xs12 my-0 py-0">
+    <div class="flex sm3 xl3 md3 xs3 pl-0 mr-0 my-0 py-0">
       <p class="display-6"> TRIGGER {{ triggerIndex }} <p/>
     </div>
-    <div class="flex sm8 xl8 md8 xs8 px-0 mx-0 my-0 py-0">
+    <div class="flex sm9 xl9 md9 xs9 px-0 mx-0 my-0 py-0" :key="inputeKey">
       <va-radio-button
         v-for="(option, index) in optionTrigger"
         :key="index"
@@ -12,18 +12,16 @@
         :option="optionTrigger[index]"
         :label="optionTrigger[index]"
         :disabled="!triggerToggle"
-        @click.native.stop="paraSend()"
+        @click.native.stop="itemChange(index)"
       />
-    </div>
-    <div class="flex sm1 xl1 md1 xs1 px-0 mx-0 my-0 py-0">
-      <va-toggle v-model="triggerToggle" style="float: right;" small @click.native="switchToggle()"/>
+      <va-toggle v-model="triggerToggle" color="success" small @click.native="switchToggle()"/>
     </div>
   </div>
 </template>
 
 <script>
 
-// import { taskInfo } from '@/data/task/TaskInfo'
+import { taskInfo } from '@/data/task/TaskInfo'
 
 export default {
   name: 'TriggerBlock',
@@ -38,10 +36,6 @@ export default {
       type: Number,
       required: true,
     },
-    parameterName: {
-      type: String,
-      required: true,
-    },
   },
   created () {
   },
@@ -52,6 +46,7 @@ export default {
       optionTrigger: [
         'RISING',
         'FALLING',
+        'BOTH',
       ],
       triggerToggle: false,
     }
@@ -62,21 +57,23 @@ export default {
     mqttPub: function (topic, mes) {
       this.$mqtt.publish(topic, mes)
     },
-    switchToggle () {
-      // const serverStatus = taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName + String(this.channel - 1)] ? true : false
-      // if (this.channelToggle !== serverStatus) {
-      //   this.$emit('parameterChange', [this.parameterName + String(this.channel - 1), this.channelToggle])
-      // }
-      // this.inputeKey++
+    itemChange (val) {
+      const paramName = `TRIG${this.triggerIndex - 1}_edge_type`
+      if (val !== taskInfo.getDeviceInfo(this.deviceID).parameterSet[paramName]) {
+        this.$emit('parameterChange', [paramName, val])
+      }
+      this.inputeKey++
     },
-    paraSend () {
-
+    switchToggle () {
+      const paramName = `TRIG${this.triggerIndex - 1}_en`
+      if (this.triggerToggle !== (taskInfo.getDeviceInfo(this.deviceID).parameterSet[paramName] === 1)) {
+        this.$emit('parameterChange', [paramName, this.triggerToggle])
+      }
+      this.inputeKey++
     },
     refresh () {
-      this.selectTrigger = 'RISING'
-      this.triggerToggle = false
-      // this.selectTrigger = taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName + String(this.channel - 1)] ? true : false
-      // this.triggerToggle = taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName + String(this.channel - 1) + '_current']
+      this.selectTrigger = this.optionTrigger[taskInfo.getDeviceInfo(this.deviceID).parameterSet[`TRIG${this.triggerIndex - 1}_edge_type`]]
+      this.triggerToggle = (taskInfo.getDeviceInfo(this.deviceID).parameterSet[`TRIG${this.triggerIndex - 1}_en`] === 1)
     },
   },
   mounted () {

src/components/task/content/parameter/item/DPV/AdvancedBlock.vue

@@ -1,14 +1,16 @@
 <template>
   <div>
-    <e-initial :ref="'EInitial'" :deviceID="deviceID" :parameterName="'E_initial'" @parameterChange="deviceParameterChange($event)" />
-    <e-1 :ref="'E1'" :deviceID="deviceID" :parameterName="'E1'" @parameterChange="deviceParameterChange($event)" />
-    <e-2 :ref="'E2'" :deviceID="deviceID" :parameterName="'E1'" @parameterChange="deviceParameterChange($event)" />
-    <e-final :ref="'EFinal'" :deviceID="deviceID" :parameterName="'E_final'" @parameterChange="deviceParameterChange($event)" />
-    <pulse-amp :ref="'PulseAmp'" :deviceID="deviceID" :parameterName="'Pulse_Amp'" @parameterChange="deviceParameterChange($event)" />
-    <pulse-width :ref="'PulseWidth'" :deviceID="deviceID" :parameterName="'Pulse_Width'" @parameterChange="deviceParameterChange($event)" />
-    <increment :ref="'Increment'" :deviceID="deviceID" :parameterName="'Increment'" @parameterChange="deviceParameterChange($event)" />
-    <step-time :ref="'StepTime'" :deviceID="deviceID" :parameterName="'Step_time'" @parameterChange="deviceParameterChange($event)" />
-    <current-recording-period :ref="'CURR_REC'" :deviceID="deviceID" :parameterName="'CURR_REC_'" @parameterChange="deviceParameterChange($event)" />
+    <e-initial :ref="'EInitial'" class="my-2" :deviceID="deviceID" :parameterName="'DPV_e_init'" @parameterChange="deviceParameterChange($event)" />
+    <e-1 :ref="'E1'" class="my-2" :deviceID="deviceID" :parameterName="'DPV_e_1'" :disabled="false" @parameterChange="deviceParameterChange($event)" />
+    <e-2 :ref="'E2'" class="my-2" :deviceID="deviceID" :parameterName="'DPV_e_2'" :disabled="false" @parameterChange="deviceParameterChange($event)" />
+    <e-final :ref="'EFinal'" class="my-2" :deviceID="deviceID" :parameterName="'DPV_e_final'" @parameterChange="deviceParameterChange($event)" />
+    <increment :ref="'Increment'" class="my-2" :deviceID="deviceID" :parameterName="'DPV_increment'" @parameterChange="deviceParameterChange($event)" />
+    <pulse-amp :ref="'PulseAmp'" class="my-2" :deviceID="deviceID" :parameterName="'DPV_amp'" @parameterChange="deviceParameterChange($event)" />
+    <pulse-width :ref="'PulseWidth'" class="my-2" :deviceID="deviceID" :parameterName="'DPV_pul_width'" @parameterChange="deviceParameterChange($event)" />
+    <period :ref="'Period'" class="my-2" :deviceID="deviceID" :parameterName="'DPV_step_time'" @parameterChange="deviceParameterChange($event)" />
+    <cycle :ref="'Cycle'" class="my-2" :deviceID="deviceID" :parameterName="'CYCLE_NUMBER'" @parameterChange="deviceParameterChange($event)" />
+    <pulse-option :ref="'PulseOption'" class="my-2" :deviceID="deviceID" :parameterName="'DPV_pulse_option'" :disabled="false" @parameterChange="deviceParameterChange($event)" />
+    <current-recording-period :ref="'CURR_REC'" :deviceID="deviceID" :parameterName="'DPV_curr_rec_'" @parameterChange="deviceParameterChange($event)" />
   </div>
 </template>
 
@@ -22,11 +24,13 @@ import EFinal from './EFinal'
 import PulseAmp from './PulseAmp'
 import PulseWidth from './PulseWidth'
 import Increment from './Increment'
-import StepTime from './StepTime'
+import Period from './Period'
+import PulseOption from './PulseOption'
+import Cycle from './Cycle'
 import CurrentRecordingPeriod from './CurrentRecordingPeriod'
 
 export default {
-  name: 'SegmentBlock',
+  name: 'AdvancedBlock',
   components: {
     EInitial,
     E1,
@@ -35,7 +39,9 @@ export default {
     PulseAmp,
     PulseWidth,
     Increment,
-    StepTime,
+    Period,
+    PulseOption,
+    Cycle,
     CurrentRecordingPeriod,
   },
   props: {
@@ -70,6 +76,12 @@ export default {
       if (this.$refs.EInitial != null) {
         this.$refs.EInitial.refresh()
       }
+      if (this.$refs.DPV_e_1 != null) {
+        this.$refs.DPV_e_1.refresh()
+      }
+      if (this.$refs.DPV_e_2 != null) {
+        this.$refs.DPV_e_2.refresh()
+      }
       if (this.$refs.EFinal != null) {
         this.$refs.EFinal.refresh()
       }
@@ -82,8 +94,17 @@ export default {
       if (this.$refs.Increment != null) {
         this.$refs.Increment.refresh()
       }
-      if (this.$refs.StepTime != null) {
-        this.$refs.StepTime.refresh()
+      if (this.$refs.Period != null) {
+        this.$refs.Period.refresh()
+      }
+      if (this.$refs.PulseOption != null) {
+        this.$refs.PulseOption.refresh()
+      }
+      if (this.$refs.Cycle != null) {
+        this.$refs.Cycle.refresh()
+      }
+      if (this.$refs.CURR_REC != null) {
+        this.$refs.CURR_REC.refresh()
       }
     },
   },

src/components/task/content/parameter/item/DPV/AutoBlock.vue

@@ -1,11 +1,11 @@
 <template>
   <div>
-    <e-initial :ref="'EInitial'" :deviceID="deviceID" :parameterName="'E_initial'" @parameterChange="deviceParameterChange($event)" />
-    <e-final :ref="'EFinal'" :deviceID="deviceID" :parameterName="'E_final'" @parameterChange="deviceParameterChange($event)" />
-    <pulse-amp :ref="'PulseAmp'" :deviceID="deviceID" :parameterName="'Pulse_Amp'" @parameterChange="deviceParameterChange($event)" />
-    <pulse-width :ref="'PulseWidth'" :deviceID="deviceID" :parameterName="'Pulse_Width'" @parameterChange="deviceParameterChange($event)" />
-    <increment :ref="'Increment'" :deviceID="deviceID" :parameterName="'Increment'" @parameterChange="deviceParameterChange($event)" />
-    <step-time :ref="'StepTime'" :deviceID="deviceID" :parameterName="'Step_time'" @parameterChange="deviceParameterChange($event)" />
+    <e-initial :ref="'EInitial'" class="my-2" :deviceID="deviceID" :parameterName="'DPV_e_init'" @parameterChange="deviceParameterChange($event)" />
+    <e-final :ref="'EFinal'" class="my-2" :deviceID="deviceID" :parameterName="'DPV_e_final'" @parameterChange="deviceParameterChange($event)" />
+    <increment :ref="'Increment'" class="my-2" :deviceID="deviceID" :parameterName="'DPV_increment'" @parameterChange="deviceParameterChange($event)" />
+    <pulse-amp :ref="'PulseAmp'" class="my-2" :deviceID="deviceID" :parameterName="'DPV_amp'" @parameterChange="deviceParameterChange($event)" />
+    <pulse-width :ref="'PulseWidth'" class="my-2" :deviceID="deviceID" :parameterName="'DPV_pul_width'" @parameterChange="deviceParameterChange($event)" />
+    <period :ref="'Period'" class="my-2" :deviceID="deviceID" :parameterName="'DPV_step_time'" @parameterChange="deviceParameterChange($event)" />
   </div>
 </template>
 
@@ -17,17 +17,17 @@ import EFinal from './EFinal'
 import PulseAmp from './PulseAmp'
 import PulseWidth from './PulseWidth'
 import Increment from './Increment'
-import StepTime from './StepTime'
+import Period from './Period'
 
 export default {
-  name: 'SegmentBlock',
+  name: 'AutoBlock',
   components: {
     EInitial,
     EFinal,
     PulseAmp,
     PulseWidth,
     Increment,
-    StepTime,
+    Period,
   },
   props: {
     deviceID: {
@@ -73,12 +73,15 @@ export default {
       if (this.$refs.Increment != null) {
         this.$refs.Increment.refresh()
       }
-      if (this.$refs.StepTime != null) {
-        this.$refs.StepTime.refresh()
+      if (this.$refs.Period != null) {
+        this.$refs.Period.refresh()
       }
     },
   },
   mounted () {
+    // switch to auto mode, set slider min = 50 & max = 100
+    this.deviceParameterChange(['DPV_curr_rec_min', 50])
+    this.deviceParameterChange(['DPV_curr_rec_max', 100])
     this.refresh()
   },
   watch: {

src/components/task/content/parameter/item/DPV/CurrentRecordingPeriod.vue

@@ -1,35 +1,36 @@
 <template>
-  <div>
-    <div class="row flex sm12 xl12 md12 xs12 align--center">
-      <div class="flex sm9 xl9 md9 xs9 px-0 mx-0">
-        <p class="display-6">Current Recording Period<p/>
-      </div>
-      <div class="flex sm3 xl3 md3 xs3 px-0 mx-0">
-        <p small> {{ itemInput }} ~ 100% </p>
-        <!-- <va-input
-          @mouseleave.native="itemChange(itemInput)"
-          @keyup.enter="itemChange(itemInput)"
-          @blur="itemChange(itemInput)"
-          v-model="itemInput"
-          class="mb-0"
-        >
-          <p slot="append" style="margin-right: 0;" small>
-            %
-          </p>
-        </va-input> -->
-      </div>
+  <div class="row flex">
+    <div class="flex sm12 xl12 md12 xs12 px-0 mx-0 my-0 py-1">
+      <p class="display-6">Current Recording -<p/>
     </div>
-    <div class="flex sm12 xl12 md12 xs12" :key="inputeKey">
+    <div class="flex sm6 xl6 md6 xs6 px-0 mx-0 mt-2 py-3">
+      <p class="display-6">Pre- / Post-Pulse Width<p/>
+    </div>
+    <div class="flex sm2 xl2 md2 xs2 px-0 mx-0 mt-2 py-3" :key="inputeKey">
+      <va-input
+        @mouseleave.native="inputItemMinChange(itemInputMin)"
+        @keyup.enter="inputItemMinChange(itemInputMin)"
+        @blur="inputItemMinChange(itemInputMin)"
+        v-model="itemInputMin"
+        class="mb-0"
+      >
+        <p slot="append" style="margin-right: 0;" small>
+          %
+        </p>
+      </va-input>
+    </div>
+    <div class="flex sm12 xl12 md12 xs12 py-0 my-0" :key="inputeKey+1">
       <va-slider
-        @mouseup.native="itemChange(itemInput)"
-        @mouseleave.native="itemChange(itemInput)"
-        @touchend.native="itemChange(itemInput)"
+        @mouseup.native="itemChange(currentRange)"
+        @mouseleave.native="itemChange(currentRange)"
+        @touchend.native="itemChange(currentRange)"
+        range
         pins
         :min="0"
-        :max="90"
+        :max="100"
         value-visible
-        :step="10"
-        v-model="itemInput"
+        :step="25"
+        v-model="currentRange"
       />
     </div>
   </div>
@@ -57,41 +58,51 @@ export default {
   },
   data () {
     return {
-      disableSlider: false,
       inputeKey: 0,
-      itemInput: Math.round(taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName]),
-      // duration: Math.round(taskInfo.getDeviceInfo(this.deviceID).parameterSet['t_pulse_' + String(this.segmentID)]) / 10,
+      currentRange: [],
+      itemInputMin: parseInt(taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName + 'min']),
+      itemInputMax: parseInt(taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName + 'max']),
     }
   },
   mqtt: {
   },
   methods: {
-    itemChange (val) {
-      this.itemInput = val
-      this.$emit('parameterChange', [this.parameterName, val])
-    },
-    checkSliderRange (duration) {
-      if (duration <= 10) {
-        this.disableSlider = true
+    inputItemMinChange (val) {
+      val = parseInt(val)
+      const remainder = val % 25
+      if (remainder > 13) {
+        val += (25 - remainder)
       } else {
-        this.disableSlider = false
-        const percent = parseFloat((5 / duration) * 100)
-        if (percent > 5) {
-          this.itemChange([this.itemInputMin, this.itemInputMax])
-        } else if (percent >= 1.1 && percent <= 5) {
-          this.itemChange([this.itemInputMin, this.itemInputMax])
-        } else if (percent < 1.1) {
-          this.itemChange([this.itemInputMin, this.itemInputMax])
-        }
+        val -= remainder
       }
+      if (val < 0 || isNaN(val)) {
+        val = 0
+      } else if (val > 75) {
+        val = 75
+      }
+      this.itemInputMin = val
+      if (val !== parseInt(taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName + 'min'])) {
+        this.$emit('parameterChange', [this.parameterName + 'min', this.itemInputMin])
+      }
+      this.currentRange = [this.itemInputMin, this.itemInputMax]
+    },
+    itemChange (val) {
+      this.itemInputMax = 100 // [2021/10/28] max val is fixed to 100 now
+      if (val[0] < this.itemInputMax) { // [2021/10/28] min can't equal 100 now
+        this.itemInputMin = val[0]
+      }
+      if (parseInt(this.itemInputMin) !== parseInt(taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName + 'min'])) {
+        this.$emit('parameterChange', [this.parameterName + 'min', this.itemInputMin])
+      }
+      this.currentRange = [this.itemInputMin, this.itemInputMax]
     },
     refresh () {
-      // this.itemInput
-      // this.duration = Math.round(taskInfo.getDeviceInfo(this.deviceID).parameterSet['t_pulse_' + String(this.segmentID)]) / 10
+      this.itemInputMin = parseInt(taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName + 'min'])
+      this.itemInputMax = parseInt(taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName + 'max'])
     },
   },
   async mounted () {
-    // this.checkSliderRange(this.duration)
+    this.currentRange = [this.itemInputMin, this.itemInputMax]
   },
   destroyed () {
   },

src/components/task/content/parameter/item/DPV/Cycle.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="row flex px-0 mx-0 my-0 py-0">
+    <div class="flex sm4 xl4 md4 xs4 px-0 mx-0 my-0 py-2">
+      <p class="display-6">Cycle Number<p/>
+    </div>
+    <div class="flex sm3 xl3 md3 xs3 px-0 mx-0 my-0 py-0">
+      <va-input
+        @mouseleave.native="itemChange(itemInput)"
+        @keyup.enter="itemChange(itemInput)"
+        @blur="itemChange(itemInput)"
+        :key="inputeKey"
+        v-model="itemInput"
+        class="mb-0"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+
+import { taskInfo } from '@/data/task/TaskInfo'
+
+export default {
+  name: 'Cycle',
+  components: {
+  },
+  props: {
+    deviceID: {
+      type: Number,
+      required: true,
+    },
+    parameterName: {
+      type: String,
+      required: true,
+    },
+  },
+  created () {
+  },
+  data () {
+    return {
+      inputeKey: 0,
+      itemInput: taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName],
+      minValue: 1,
+      maxValue: 50000,
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    itemChange (val) {
+      this.inputeKey++
+      this.itemInput = parseInt(val)
+      if (isNaN(val) || parseInt(val) > this.maxValue || parseInt(val) < this.minValue) {
+        this.itemInput = this.minValue
+      }
+      if (this.itemInput !== taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName]) {
+        this.$emit('parameterChange', [this.parameterName, this.itemInput])
+      }
+    },
+    refresh () {
+      this.itemInput = taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName]
+    },
+  },
+  async mounted () {
+  },
+  destroyed () {
+  },
+  watch: {
+  },
+}
+</script>

src/components/task/content/parameter/item/DPV/E1.vue

@@ -1,23 +1,33 @@
 <template>
-  <div class="flex-container">
-    <p class="display-6 flex-child">E 1<p/>
-    <va-input
-      @mouseleave.native="itemChange(itemInput)"
-      @keyup.enter="itemChange(itemInput)"
-      @blur="itemChange(itemInput)"
-      v-model="itemInput"
-      class="mb-0 flex-child1"
-      :error="showError"
-      :error-messages="errorMsg"
-    >
-    </va-input>
-    <va-button
-      @click="unitChange()"
-      v-model="unitSelect"
-      class="px-2 py-0 mr-0 flex-child2"
-    >
-      {{ unitSelect }}
-    </va-button>
+  <div class="row flex px-0 mx-0 my-0 py-0">
+    <div class="flex sm4 xl4 md4 xs4 px-0 mx-0 my-0 py-2">
+      <p :style="disabled !== true ? '' : {color: this.$themes.gray}" class="display-6">E 1<p/>
+    </div>
+    <div class="flex sm3 xl3 md3 xs3 px-0 mx-0 my-0 py-0">
+      <va-input
+        @mouseleave.native="itemChange(itemInput)"
+        @keyup.enter="itemChange(itemInput)"
+        @blur="itemChange(itemInput)"
+        :key="inputeKey"
+        v-model="itemInput"
+        class="mb-0"
+        :error="showError"
+        :error-messages="errorMsg"
+        :disabled="disabled"
+      />
+    </div>
+    <div class="flex sm5 xl5 md5 xs5 px-0 mx-0 my-0 py-0">
+      <va-button
+        @click="unitChange()"
+        v-model="unitSelect"
+        class="px-3 py-1"
+        style="border-radius: 12px;"
+        :color="disabled !== true ? 'primary' : 'gray'"
+        :disabled="disabled"
+      >
+        {{ unitSelect }}
+      </va-button>
+    </div>
   </div>
 </template>
 
@@ -38,13 +48,17 @@ export default {
       type: String,
       required: true,
     },
+    disabled: {
+      type: Boolean,
+      required: true,
+    },
   },
   created () {
   },
   data () {
     return {
       inputeKey: 0,
-      itemInput: String(Math.round((taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName + String(this.segmentID)] - 25000) / 5)),
+      itemInput: String(parseInt((taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName] - 25000) / 5)),
       unitSelect: 'mV',
       unitClickTime: 0,
       showError: false,
@@ -62,13 +76,14 @@ export default {
       if (this.unitSelect === 'V') {
         val = parseFloat(val) * 1000
       }
-      if (parseInt(val) < -5000 || parseInt(val) > 5000) {
+      val = parseInt(val) // each step: 1mV
+      if (val < -5000 || val > 5000) {
         this.showError = true
         this.errorMsg[0] = '-5 ~ 5V'
         return
       }
-      if (parseFloat(val) !== Math.round((taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName + String(this.segmentID)] - 25000) / 5)) {
-        this.$emit('parameterChange', [this.parameterName + String(this.segmentID), parseFloat(val) * 5 + 25000])
+      if (val !== parseInt((taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName] - 25000) / 5)) {
+        this.$emit('parameterChange', [this.parameterName, val * 5 + 25000])
       }
     },
     unitChange () {
@@ -82,7 +97,7 @@ export default {
       }
     },
     refresh () {
-      let volt = Math.round((taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName + String(this.segmentID)] - 25000) / 5)
+      let volt = parseInt((taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName] - 25000) / 5)
       if (this.unitSelect === 'V') {
         volt /= 1000
       }
@@ -97,25 +112,3 @@ export default {
   },
 }
 </script>
-
-<style lang="scss">
-  .flex-container {
-    display: flex;
-  }
-
-  .flex-child {
-    flex: 2;
-  }
-
-  .flex-child1 {
-    flex: 1;
-  }
-
-  .flex-child2 {
-    flex: 0;
-  }
-
-  .flex-child:first-child {
-    margin-right: 1px;
-  }
-</style>

src/components/task/content/parameter/item/DPV/E2.vue

@@ -1,23 +1,33 @@
 <template>
-  <div class="flex-container">
-    <p class="display-6 flex-child">E 2<p/>
-    <va-input
-      @mouseleave.native="itemChange(itemInput)"
-      @keyup.enter="itemChange(itemInput)"
-      @blur="itemChange(itemInput)"
-      v-model="itemInput"
-      class="mb-0 flex-child1"
-      :error="showError"
-      :error-messages="errorMsg"
-    >
-    </va-input>
-    <va-button
-      @click="unitChange()"
-      v-model="unitSelect"
-      class="px-2 py-0 mr-0 flex-child2"
-    >
-      {{ unitSelect }}
-    </va-button>
+  <div class="row flex px-0 mx-0 my-0 py-0">
+    <div class="flex sm4 xl4 md4 xs4 px-0 mx-0 my-0 py-2">
+      <p :style="disabled !== true ? '' : {color: this.$themes.gray}" class="display-6">E 2<p/>
+    </div>
+    <div class="flex sm3 xl3 md3 xs3 px-0 mx-0 my-0 py-0">
+      <va-input
+        @mouseleave.native="itemChange(itemInput)"
+        @keyup.enter="itemChange(itemInput)"
+        @blur="itemChange(itemInput)"
+        :key="inputeKey"
+        v-model="itemInput"
+        class="mb-0"
+        :error="showError"
+        :error-messages="errorMsg"
+        :disabled="disabled"
+      />
+    </div>
+    <div class="flex sm5 xl5 md5 xs5 px-0 mx-0 my-0 py-0">
+      <va-button
+        @click="unitChange()"
+        v-model="unitSelect"
+        class="px-3 py-1"
+        style="border-radius: 12px;"
+        :color="disabled !== true ? 'primary' : 'gray'"
+        :disabled="disabled"
+      >
+        {{ unitSelect }}
+      </va-button>
+    </div>
   </div>
 </template>
 
@@ -38,13 +48,17 @@ export default {
       type: String,
       required: true,
     },
+    disabled: {
+      type: Boolean,
+      required: true,
+    },
   },
   created () {
   },
   data () {
     return {
       inputeKey: 0,
-      itemInput: String(Math.round((taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName + String(this.segmentID)] - 25000) / 5)),
+      itemInput: String(parseInt((taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName] - 25000) / 5)),
       unitSelect: 'mV',
       unitClickTime: 0,
       showError: false,
@@ -62,13 +76,14 @@ export default {
       if (this.unitSelect === 'V') {
         val = parseFloat(val) * 1000
       }
-      if (parseInt(val) < -5000 || parseInt(val) > 5000) {
+      val = parseInt(val) // each step: 1mV
+      if (val < -5000 || val > 5000) {
         this.showError = true
         this.errorMsg[0] = '-5 ~ 5V'
         return
       }
-      if (parseFloat(val) !== Math.round((taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName + String(this.segmentID)] - 25000) / 5)) {
-        this.$emit('parameterChange', [this.parameterName + String(this.segmentID), parseFloat(val) * 5 + 25000])
+      if (val !== parseInt((taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName] - 25000) / 5)) {
+        this.$emit('parameterChange', [this.parameterName, val * 5 + 25000])
       }
     },
     unitChange () {
@@ -82,7 +97,7 @@ export default {
       }
     },
     refresh () {
-      let volt = Math.round((taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName + String(this.segmentID)] - 25000) / 5)
+      let volt = parseInt((taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName] - 25000) / 5)
       if (this.unitSelect === 'V') {
         volt /= 1000
       }
@@ -97,25 +112,3 @@ export default {
   },
 }
 </script>
-
-<style lang="scss">
-  .flex-container {
-    display: flex;
-  }
-
-  .flex-child {
-    flex: 2;
-  }
-
-  .flex-child1 {
-    flex: 1;
-  }
-
-  .flex-child2 {
-    flex: 0;
-  }
-
-  .flex-child:first-child {
-    margin-right: 1px;
-  }
-</style>

src/components/task/content/parameter/item/DPV/EFinal.vue

@@ -1,23 +1,30 @@
 <template>
-  <div class="flex-container">
-    <p class="display-6 flex-child">E Final<p/>
-    <va-input
-      @mouseleave.native="itemChange(itemInput)"
-      @keyup.enter="itemChange(itemInput)"
-      @blur="itemChange(itemInput)"
-      v-model="itemInput"
-      class="mb-0 flex-child1"
-      :error="showError"
-      :error-messages="errorMsg"
-    >
-    </va-input>
-    <va-button
-      @click="unitChange()"
-      v-model="unitSelect"
-      class="px-2 py-0 mr-0 flex-child2"
-    >
-      {{ unitSelect }}
-    </va-button>
+  <div class="row flex px-0 mx-0 my-0 py-0">
+    <div class="flex sm4 xl4 md4 xs4 px-0 mx-0 my-0 py-2">
+      <p class="display-6">E Final<p/>
+    </div>
+    <div class="flex sm3 xl3 md3 xs3 px-0 mx-0 my-0 py-0">
+      <va-input
+        @mouseleave.native="itemChange(itemInput)"
+        @keyup.enter="itemChange(itemInput)"
+        @blur="itemChange(itemInput)"
+        :key="inputeKey"
+        v-model="itemInput"
+        class="mb-0"
+        :error="showError"
+        :error-messages="errorMsg"
+      />
+    </div>
+    <div class="flex sm5 xl5 md5 xs5 px-0 mx-0 my-0 py-0">
+      <va-button
+        @click="unitChange()"
+        v-model="unitSelect"
+        class="px-3 py-1"
+        style="border-radius: 12px;"
+      >
+        {{ unitSelect }}
+      </va-button>
+    </div>
   </div>
 </template>
 
@@ -49,6 +56,8 @@ export default {
       unitClickTime: 0,
       showError: false,
       errorMsg: [''],
+      e1: parseInt((taskInfo.getDeviceInfo(this.deviceID).parameterSet.DPV_e_1 - 25000) / 5),
+      e2: parseInt((taskInfo.getDeviceInfo(this.deviceID).parameterSet.DPV_e_2 - 25000) / 5),
     }
   },
   mqtt: {
@@ -56,19 +65,19 @@ export default {
   methods: {
     itemChange (val) {
       this.itemInput = val
-      this.inputeKey++
       this.showError = false
       this.errorMsg[0] = ''
       if (this.unitSelect === 'V') {
         val = parseFloat(val) * 1000
       }
-      if (parseInt(val) < -5000 || parseInt(val) > 5000) {
+      val = parseInt(val) // each step: 1mV
+      if (val < -5000 || val > 5000) {
         this.showError = true
         this.errorMsg[0] = '-5 ~ 5V'
         return
       }
-      if (parseFloat(val) !== Math.round((taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName + String(this.segmentID)] - 25000) / 5)) {
-        this.$emit('parameterChange', [this.parameterName + String(this.segmentID), parseFloat(val) * 5 + 25000])
+      if (this.checkE1E2(val) && val !== parseInt((taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName] - 25000) / 5)) {
+        this.$emit('parameterChange', [this.parameterName, val * 5 + 25000])
       }
     },
     unitChange () {
@@ -81,12 +90,29 @@ export default {
         this.itemInput = String(parseFloat(this.itemInput) / 1000)
       }
     },
+    checkE1E2 (val) {
+      let flag = true
+      if ((this.e1 >= this.e2) && !(this.e1 >= val && val >= this.e2)) {
+        this.showError = true
+        this.errorMsg[0] = 'Ef should be a value between E1 and E2'
+        flag = false
+      } else if ((this.e2 > this.e1) && !(this.e2 >= val && val >= this.e1)) {
+        this.showError = true
+        this.errorMsg[0] = 'Ef should be a value between E1 and E2'
+        flag = false
+      }
+      this.inputeKey++
+      return flag
+    },
     refresh () {
-      let volt = Math.round((taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName + String(this.segmentID)] - 25000) / 5)
+      let volt = parseInt((taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName] - 25000) / 5)
       if (this.unitSelect === 'V') {
         volt /= 1000
       }
       this.itemInput = String(volt)
+      this.e1 = parseInt((taskInfo.getDeviceInfo(this.deviceID).parameterSet.DPV_e_1 - 25000) / 5)
+      this.e2 = parseInt((taskInfo.getDeviceInfo(this.deviceID).parameterSet.DPV_e_2 - 25000) / 5)
+      this.checkE1E2(this.itemInput)
     },
   },
   async mounted () {
@@ -97,25 +123,3 @@ export default {
   },
 }
 </script>
-
-<style lang="scss">
-  .flex-container {
-    display: flex;
-  }
-
-  .flex-child {
-    flex: 2;
-  }
-
-  .flex-child1 {
-    flex: 1;
-  }
-
-  .flex-child2 {
-    flex: 0;
-  }
-
-  .flex-child:first-child {
-    margin-right: 1px;
-  }
-</style>

src/components/task/content/parameter/item/DPV/EInitial.vue

@@ -1,23 +1,30 @@
 <template>
-  <div class="flex-container">
-    <p class="display-6 flex-child">E Initial<p/>
-    <va-input
-      @mouseleave.native="itemChange(itemInput)"
-      @keyup.enter="itemChange(itemInput)"
-      @blur="itemChange(itemInput)"
-      v-model="itemInput"
-      class="mb-0 flex-child1"
-      :error="showError"
-      :error-messages="errorMsg"
-    >
-    </va-input>
-    <va-button
-      @click="unitChange()"
-      v-model="unitSelect"
-      class="px-2 py-0 mr-0 flex-child2"
-    >
-      {{ unitSelect }}
-    </va-button>
+  <div class="row flex px-0 mx-0 my-0 py-0">
+    <div class="flex sm4 xl4 md4 xs4 px-0 mx-0 my-0 py-2">
+      <p class="display-6">E Initial<p/>
+    </div>
+    <div class="flex sm3 xl3 md3 xs3 px-0 mx-0 my-0 py-0">
+      <va-input
+        @mouseleave.native="itemChange(itemInput)"
+        @keyup.enter="itemChange(itemInput)"
+        @blur="itemChange(itemInput)"
+        :key="inputeKey"
+        v-model="itemInput"
+        class="mb-0"
+        :error="showError"
+        :error-messages="errorMsg"
+      />
+    </div>
+    <div class="flex sm5 xl5 md5 xs5 px-0 mx-0 my-0 py-0">
+      <va-button
+        @click="unitChange()"
+        v-model="unitSelect"
+        class="px-3 py-1"
+        style="border-radius: 12px;"
+      >
+        {{ unitSelect }}
+      </va-button>
+    </div>
   </div>
 </template>
 
@@ -44,7 +51,7 @@ export default {
   data () {
     return {
       inputeKey: 0,
-      itemInput: String(Math.round((taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName + String(this.segmentID)] - 25000) / 5)),
+      itemInput: String(parseInt((taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName] - 25000) / 5)),
       unitSelect: 'mV',
       unitClickTime: 0,
       showError: false,
@@ -62,13 +69,14 @@ export default {
       if (this.unitSelect === 'V') {
         val = parseFloat(val) * 1000
       }
-      if (parseInt(val) < -5000 || parseInt(val) > 5000) {
+      val = parseInt(val) // each step: 1mV
+      if (val < -5000 || val > 5000) {
         this.showError = true
         this.errorMsg[0] = '-5 ~ 5V'
         return
       }
-      if (parseFloat(val) !== Math.round((taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName + String(this.segmentID)] - 25000) / 5)) {
-        this.$emit('parameterChange', [this.parameterName + String(this.segmentID), parseFloat(val) * 5 + 25000])
+      if (val !== parseInt((taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName] - 25000) / 5)) {
+        this.$emit('parameterChange', [this.parameterName, val * 5 + 25000])
       }
     },
     unitChange () {
@@ -82,7 +90,7 @@ export default {
       }
     },
     refresh () {
-      let volt = Math.round((taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName + String(this.segmentID)] - 25000) / 5)
+      let volt = parseInt((taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName] - 25000) / 5)
       if (this.unitSelect === 'V') {
         volt /= 1000
       }
@@ -97,25 +105,3 @@ export default {
   },
 }
 </script>
-
-<style lang="scss">
-  .flex-container {
-    display: flex;
-  }
-
-  .flex-child {
-    flex: 2;
-  }
-
-  .flex-child1 {
-    flex: 1;
-  }
-
-  .flex-child2 {
-    flex: 0;
-  }
-
-  .flex-child:first-child {
-    margin-right: 1px;
-  }
-</style>

src/components/task/content/parameter/item/DPV/EliteParameterRecordingEliteDPV.vue

@@ -0,0 +1,102 @@
+<template>
+  <div>
+    <fieldset>
+      <va-radio-button
+        option="0"
+        v-model="optionValue"
+        label="AUTO"
+        @click.native.stop="switchMode(optionValue)"
+      />
+      <auto-block v-if="optionValue === '0'" class="ml-4 pl-2" :ref="'AutoBlock'" :deviceID="deviceID"/>
+      <va-radio-button
+        option="1"
+        v-model="optionValue"
+        label="ADVANCED"
+        @click.native.stop="switchMode(optionValue)"
+      />
+      <advanced-block v-if="optionValue === '1'" class="ml-4 pl-2" :ref="'AdvancedBlock'" :deviceID="deviceID"/>
+      <va-radio-button
+        option="2"
+        v-model="optionValue"
+        label="ENGINEERING"
+        @click.native.stop="switchMode(optionValue)"
+      />
+      <engineering-block v-if="optionValue === '2'" class="ml-4 pl-2" :ref="'EngineeringBlock'" :deviceID="deviceID" :devMode="engineerMode"/>
+    </fieldset>
+  </div>
+</template>
+
+<script>
+
+import { taskInfo } from '@/data/task/TaskInfo'
+import AutoBlock from './AutoBlock'
+import AdvancedBlock from './AdvancedBlock'
+import EngineeringBlock from './EngineeringBlock'
+
+export default {
+  name: 'EliteParameterRecordingEliteDPV',
+  components: {
+    AutoBlock,
+    AdvancedBlock,
+    EngineeringBlock,
+  },
+  props: {
+    deviceID: {
+      type: Number,
+      required: true,
+    },
+    deviceName: {
+      type: String,
+      default: 'Elite',
+    },
+  },
+  created () {
+  },
+  data () {
+    return {
+      engineerMode: false,
+      optionValue: '0',
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    mqttPub: function (topic, mes) {
+      this.$mqtt.publish(topic, mes)
+    },
+    // Array[String of Parameter Nmae, Value]
+    deviceParameterChange: function (e) {
+      //  console.log('e[0],e[1]', e[0], ',', e[1])
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_parameter/0',
+        device: taskInfo.getRawDeviceID(this.deviceID),
+        parameter: e[0],
+        content: e[1],
+      }))
+    },
+    switchMode (val) {
+      if (parseInt(val) !== taskInfo.getDeviceInfo(this.deviceID).parameterSet.DPV_mode) {
+        this.deviceParameterChange(['DPV_mode', parseInt(val)])
+      }
+    },
+    refresh () {
+      this.optionValue = String(taskInfo.getDeviceInfo(this.deviceID).parameterSet.DPV_mode)
+      if (this.$refs.AutoBlock != null) {
+        this.$refs.AutoBlock.refresh()
+      }
+      if (this.$refs.AdvancedBlock != null) {
+        this.$refs.AdvancedBlock.refresh()
+      }
+      if (this.$refs.EngineeringBlock != null) {
+        this.$refs.EngineeringBlock.refresh()
+      }
+    },
+  },
+  mounted () {
+  },
+  watch: {
+  },
+  destroyed () {
+  },
+}
+</script>

src/components/task/content/parameter/item/DPV/EngineeringBlock.vue

@@ -0,0 +1,104 @@
+<template>
+  <div>
+    <e-initial :ref="'EInitial'" class="my-2" :deviceID="deviceID" :parameterName="'DPV_e_init'" @parameterChange="deviceParameterChange($event)" />
+    <e-final :ref="'EFinal'" class="my-2" :deviceID="deviceID" :parameterName="'DPV_e_final'" @parameterChange="deviceParameterChange($event)" />
+    <increment :ref="'Increment'" class="my-2" :deviceID="deviceID" :parameterName="'DPV_increment'" @parameterChange="deviceParameterChange($event)" />
+    <pulse-amp :ref="'PulseAmp'" class="my-2" :deviceID="deviceID" :parameterName="'DPV_amp'" @parameterChange="deviceParameterChange($event)" />
+    <pulse-width :ref="'PulseWidth'" class="my-2" :deviceID="deviceID" :parameterName="'DPV_pul_width'" @parameterChange="deviceParameterChange($event)" />
+    <period :ref="'Period'" class="my-2" :deviceID="deviceID" :parameterName="'DPV_step_time'" @parameterChange="deviceParameterChange($event)" />
+    <sample-rate :ref="'SampleRate'" class="my-2" :deviceID="deviceID" :parameterName="'DPV_notify_rate'" @parameterChange="deviceParameterChange($event)" />
+    <cycle :ref="'Cycle'" class="my-2" :deviceID="deviceID" :parameterName="'CYCLE_NUMBER'" @parameterChange="deviceParameterChange($event)" />
+    <engineering-switch :ref="'EngineeringSwitch'" class="my-2" :deviceID="deviceID" />
+  </div>
+</template>
+
+<script>
+
+import { taskInfo } from '@/data/task/TaskInfo'
+import EInitial from './EInitial'
+import EFinal from './EFinal'
+import PulseAmp from './PulseAmp'
+import PulseWidth from './PulseWidth'
+import Increment from './Increment'
+import Period from './Period'
+import SampleRate from './SampleRate'
+import Cycle from './Cycle'
+import EngineeringSwitch from './EngineeringSwitch.vue'
+
+export default {
+  name: 'EngineerBlock',
+  components: {
+    EInitial,
+    EFinal,
+    Increment,
+    PulseAmp,
+    PulseWidth,
+    Period,
+    SampleRate,
+    Cycle,
+    EngineeringSwitch,
+  },
+  props: {
+    deviceID: {
+      type: Number,
+      required: true,
+    },
+  },
+  created () {
+  },
+  data () {
+    return {
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    mqttPub: function (topic, mes) {
+      this.$mqtt.publish(topic, mes)
+    },
+    // Array[String of Parameter Name, Value]
+    deviceParameterChange: function (e) {
+      console.log('e[0],e[1]', e[0], ',', e[1])
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_parameter/0',
+        device: taskInfo.getRawDeviceID(this.deviceID),
+        parameter: e[0],
+        content: e[1],
+      }))
+    },
+    refresh () {
+      if (this.$refs.EInitial != null) {
+        this.$refs.EInitial.refresh()
+      }
+      if (this.$refs.EFinal != null) {
+        this.$refs.EFinal.refresh()
+      }
+      if (this.$refs.Increment != null) {
+        this.$refs.Increment.refresh()
+      }
+      if (this.$refs.PulseAmp != null) {
+        this.$refs.PulseAmp.refresh()
+      }
+      if (this.$refs.PulseWidth != null) {
+        this.$refs.PulseWidth.refresh()
+      }
+      if (this.$refs.Period != null) {
+        this.$refs.Period.refresh()
+      }
+      if (this.$refs.SampleRate != null) {
+        this.$refs.SampleRate.refresh()
+      }
+      if (this.$refs.EngineeringSwitch != null) {
+        this.$refs.EngineeringSwitch.refresh()
+      }
+    },
+  },
+  mounted () {
+    this.refresh()
+  },
+  watch: {
+  },
+  destroyed () {
+  },
+}
+</script>

src/components/task/content/parameter/item/DPV/EngineeringSwitch.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="row flex px-0 mx-0 my-0 py-0">
+    <div class="flex sm7 xl7 md7 xs7 px-0 mx-0 my-0 py-0" />
+    <div class="flex sm5 xl5 md5 xs5 px-0 mx-0 my-0 py-0">
+      <va-toggle class="mt-1" v-model="engineerEnable" small color="success" @click.native="engineerModeChange(engineerEnable)"/>
+    </div>
+    <div class="flex sm12 xl12 md12 xs12 px-0 mx-0 my-0 py-0">
+      <e-1 :ref="'E1'" class="my-2" :deviceID="deviceID" :parameterName="'DPV_e_1'" :disabled="!engineerEnable" @parameterChange="deviceParameterChange($event)" />
+    </div>
+    <div class="flex sm12 xl12 md12 xs12 px-0 mx-0 my-0 py-0">
+      <e-2 :ref="'E2'" class="my-2" :deviceID="deviceID" :parameterName="'DPV_e_2'" :disabled="!engineerEnable" @parameterChange="deviceParameterChange($event)" />
+    </div>
+    <div class="flex sm12 xl12 md12 xs12 px-0 mx-0 my-0 py-0">
+      <pulse-option :ref="'PulseOption'" class="my-2" :deviceID="deviceID" :parameterName="'DPV_pulse_option'" :disabled="!engineerEnable" @parameterChange="deviceParameterChange($event)" />
+    </div>
+  </div>
+</template>
+
+<script>
+
+import { taskInfo } from '@/data/task/TaskInfo'
+import E1 from './E1'
+import E2 from './E2'
+import PulseOption from './PulseOption'
+
+export default {
+  name: 'EngineeringSwitch',
+  components: {
+    E1,
+    E2,
+    PulseOption,
+  },
+  props: {
+    deviceID: {
+      type: Number,
+      required: true,
+    },
+  },
+  created () {
+  },
+  data () {
+    return {
+      engineerEnable: false,
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    mqttPub: function (topic, mes) {
+      this.$mqtt.publish(topic, mes)
+    },
+    // Array[String of Parameter Name, Value]
+    deviceParameterChange: function (e) {
+      console.log('e[0],e[1]', e[0], ',', e[1])
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_parameter/0',
+        device: taskInfo.getRawDeviceID(this.deviceID),
+        parameter: e[0],
+        content: e[1],
+      }))
+    },
+    engineerModeChange (val) {
+      if (val !== (taskInfo.getDeviceInfo(this.deviceID).parameterSet.DPV_engineering_enable === 1)) {
+        this.deviceParameterChange(['DPV_engineering_enable', val])
+      }
+    },
+    refresh () {
+      this.engineerEnable = (taskInfo.getDeviceInfo(this.deviceID).parameterSet.DPV_engineering_enable === 1)
+      if (this.$refs.DPV_e_1 != null) {
+        this.$refs.DPV_e_1.refresh()
+      }
+      if (this.$refs.DPV_e_2 != null) {
+        this.$refs.DPV_e_2.refresh()
+      }
+      if (this.$refs.PulseOption != null) {
+        this.$refs.PulseOption.refresh()
+      }
+    },
+  },
+  mounted () {
+    this.refresh()
+  },
+  watch: {
+  },
+  destroyed () {
+  },
+}
+</script>

src/components/task/content/parameter/item/DPV/Increment.vue

@@ -1,23 +1,30 @@
 <template>
-  <div class="flex-container">
-    <p class="display-6 flex-child">Increment<p/>
-    <va-input
-      @mouseleave.native="itemChange(itemInput)"
-      @keyup.enter="itemChange(itemInput)"
-      @blur="itemChange(itemInput)"
-      v-model="itemInput"
-      class="mb-0 flex-child1"
-      :error="showError"
-      :error-messages="errorMsg"
-    >
-    </va-input>
-    <va-button
-      @click="unitChange()"
-      v-model="unitSelect"
-      class="px-2 py-0 mr-0 flex-child2"
-    >
-      {{ unitSelect }}
-    </va-button>
+  <div class="row flex px-0 mx-0 my-0 py-0">
+    <div class="flex sm4 xl4 md4 xs4 px-0 mx-0 my-0 py-2">
+      <p class="display-6">Increment<p/>
+    </div>
+    <div class="flex sm3 xl3 md3 xs3 px-0 mx-0 my-0 py-0">
+      <va-input
+        @mouseleave.native="itemChange(itemInput)"
+        @keyup.enter="itemChange(itemInput)"
+        @blur="itemChange(itemInput)"
+        :key="inputeKey"
+        v-model="itemInput"
+        class="mb-0"
+        :error="showError"
+        :error-messages="errorMsg"
+      />
+    </div>
+    <div class="flex sm5 xl5 md5 xs5 px-0 mx-0 my-0 py-0">
+      <va-button
+        @click="unitChange()"
+        v-model="unitSelect"
+        class="px-3 py-1"
+        style="border-radius: 12px;"
+      >
+        {{ unitSelect }}
+      </va-button>
+    </div>
   </div>
 </template>
 
@@ -44,7 +51,7 @@ export default {
   data () {
     return {
       inputeKey: 0,
-      itemInput: String(Math.round((taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName + String(this.segmentID)] - 25000) / 5)),
+      itemInput: String(parseInt((taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName] - 25000) / 5)),
       unitSelect: 'mV',
       unitClickTime: 0,
       showError: false,
@@ -62,13 +69,14 @@ export default {
       if (this.unitSelect === 'V') {
         val = parseFloat(val) * 1000
       }
-      if (parseInt(val) < -5000 || parseInt(val) > 5000) {
+      val = parseInt(val) // each step: 1mV
+      if (val < -5000 || val > 5000) {
         this.showError = true
         this.errorMsg[0] = '-5 ~ 5V'
         return
       }
-      if (parseFloat(val) !== Math.round((taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName + String(this.segmentID)] - 25000) / 5)) {
-        this.$emit('parameterChange', [this.parameterName + String(this.segmentID), parseFloat(val) * 5 + 25000])
+      if (val !== parseInt((taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName] - 25000) / 5)) {
+        this.$emit('parameterChange', [this.parameterName, val * 5 + 25000])
       }
     },
     unitChange () {
@@ -82,7 +90,7 @@ export default {
       }
     },
     refresh () {
-      let volt = Math.round((taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName + String(this.segmentID)] - 25000) / 5)
+      let volt = parseInt((taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName] - 25000) / 5)
       if (this.unitSelect === 'V') {
         volt /= 1000
       }
@@ -97,25 +105,3 @@ export default {
   },
 }
 </script>
-
-<style lang="scss">
-  .flex-container {
-    display: flex;
-  }
-
-  .flex-child {
-    flex: 2;
-  }
-
-  .flex-child1 {
-    flex: 1;
-  }
-
-  .flex-child2 {
-    flex: 0;
-  }
-
-  .flex-child:first-child {
-    margin-right: 1px;
-  }
-</style>

src/components/task/content/parameter/item/DPV/Period.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="row flex px-0 mx-0 my-0 py-0">
+    <div class="flex sm4 xl4 md4 xs4 px-0 mx-0 my-0 py-2">
+      <p class="display-6">Period<p/>
+    </div>
+    <div class="flex sm3 xl3 md3 xs3 px-0 mx-0 my-0 py-0">
+      <va-input
+        @mouseleave.native="itemChange(itemInput)"
+        @keyup.enter="itemChange(itemInput)"
+        @blur="itemChange(itemInput)"
+        :key="inputeKey"
+        v-model="itemInput"
+        class="mb-0"
+        :error="showError"
+        :error-messages="errorMsg"
+      />
+    </div>
+    <div class="flex sm5 xl5 md5 xs5 px-0 mx-0 my-0 py-0">
+      <va-button
+        @click="unitChange()"
+        v-model="unitSelect"
+        class="px-3 py-1"
+        style="border-radius: 12px;"
+      >
+        {{ unitSelect }}
+      </va-button>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import { taskInfo } from '@/data/task/TaskInfo'
+
+export default {
+  name: 'Period',
+  components: {
+  },
+  props: {
+    deviceID: {
+      type: Number,
+      required: true,
+    },
+    parameterName: {
+      type: String,
+      required: true,
+    },
+  },
+  created () {
+  },
+  data () {
+    return {
+      inputeKey: 0,
+      itemInput: String(parseInt(taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName])),
+      unitSelect: 'ms',
+      unitClickTime: 0,
+      showError: false,
+      errorMsg: [''],
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    itemChange (val) {
+      this.itemInput = val
+      this.inputeKey++
+      this.showError = false
+      this.errorMsg[0] = ''
+      if (this.unitSelect === 's') {
+        val = parseFloat(val) * 1000
+      }
+      val = parseInt(val) // each step: 1ms
+
+      if (val < 0 || val > 1e6) {
+        this.showError = true
+        this.errorMsg[0] = '0 ~ 1000s'
+        return
+      }
+      if (val !== parseInt(taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName])) {
+        this.$emit('parameterChange', [this.parameterName, val])
+      }
+    },
+    unitChange () {
+      this.unitClickTime += 1
+      if (this.unitClickTime % 2 === 0) {
+        this.unitSelect = 'ms'
+        this.itemInput = String(parseFloat(this.itemInput) * 1000)
+      } else {
+        this.unitSelect = 's'
+        this.itemInput = String(parseFloat(this.itemInput) / 1000)
+      }
+    },
+    refresh () {
+      if (this.showError === false) {
+        let duration = parseInt(taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName])
+        if (this.unitSelect === 's') {
+          duration /= 1000
+        }
+        this.itemInput = String(duration)
+      }
+    },
+  },
+  async mounted () {
+  },
+  destroyed () {
+  },
+  watch: {
+  },
+}
+</script>

src/components/task/content/parameter/item/DPV/PulseAmp.vue

@@ -1,23 +1,30 @@
 <template>
-  <div class="flex-container">
-    <p class="display-6 flex-child">Pulse Amplitude<p/>
-    <va-input
-      @mouseleave.native="itemChange(itemInput)"
-      @keyup.enter="itemChange(itemInput)"
-      @blur="itemChange(itemInput)"
-      v-model="itemInput"
-      class="mb-0 flex-child1"
-      :error="showError"
-      :error-messages="errorMsg"
-    >
-    </va-input>
-    <va-button
-      @click="unitChange()"
-      v-model="unitSelect"
-      class="px-2 py-0 mr-0 flex-child2"
-    >
-      {{ unitSelect }}
-    </va-button>
+  <div class="row flex px-0 mx-0 my-0 py-0">
+    <div class="flex sm4 xl4 md4 xs4 px-0 mx-0 my-0 py-2">
+      <p class="display-6">Pulse Amplitude<p/>
+    </div>
+    <div class="flex sm3 xl3 md3 xs3 px-0 mx-0 my-0 py-0">
+      <va-input
+        @mouseleave.native="itemChange(itemInput)"
+        @keyup.enter="itemChange(itemInput)"
+        @blur="itemChange(itemInput)"
+        :key="inputeKey"
+        v-model="itemInput"
+        class="mb-0"
+        :error="showError"
+        :error-messages="errorMsg"
+      />
+    </div>
+    <div class="flex sm5 xl5 md5 xs5 px-0 mx-0 my-0 py-0">
+      <va-button
+        @click="unitChange()"
+        v-model="unitSelect"
+        class="px-3 py-1"
+        style="border-radius: 12px;"
+      >
+        {{ unitSelect }}
+      </va-button>
+    </div>
   </div>
 </template>
 
@@ -44,7 +51,7 @@ export default {
   data () {
     return {
       inputeKey: 0,
-      itemInput: String(Math.round((taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName + String(this.segmentID)] - 25000) / 5)),
+      itemInput: String(parseInt((taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName] - 25000) / 5)),
       unitSelect: 'mV',
       unitClickTime: 0,
       showError: false,
@@ -62,13 +69,14 @@ export default {
       if (this.unitSelect === 'V') {
         val = parseFloat(val) * 1000
       }
-      if (parseInt(val) < -5000 || parseInt(val) > 5000) {
+      val = parseInt(val) // each step: 1mV
+      if (val < -5000 || val > 5000) {
         this.showError = true
         this.errorMsg[0] = '-5 ~ 5V'
         return
       }
-      if (parseFloat(val) !== Math.round((taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName + String(this.segmentID)] - 25000) / 5)) {
-        this.$emit('parameterChange', [this.parameterName + String(this.segmentID), parseFloat(val) * 5 + 25000])
+      if (val !== parseInt((taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName] - 25000) / 5)) {
+        this.$emit('parameterChange', [this.parameterName, val * 5 + 25000])
       }
     },
     unitChange () {
@@ -82,7 +90,7 @@ export default {
       }
     },
     refresh () {
-      let volt = Math.round((taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName + String(this.segmentID)] - 25000) / 5)
+      let volt = parseInt((taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName] - 25000) / 5)
       if (this.unitSelect === 'V') {
         volt /= 1000
       }
@@ -97,25 +105,3 @@ export default {
   },
 }
 </script>
-
-<style lang="scss">
-  .flex-container {
-    display: flex;
-  }
-
-  .flex-child {
-    flex: 2;
-  }
-
-  .flex-child1 {
-    flex: 1;
-  }
-
-  .flex-child2 {
-    flex: 0;
-  }
-
-  .flex-child:first-child {
-    margin-right: 1px;
-  }
-</style>

src/components/task/content/parameter/item/DPV/PulseOption.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="row flex px-0 mx-0 my-0 py-0">
+    <div class="flex sm4 xl4 md4 xs4 px-0 mx-0 my-0 py-2">
+      <p :style="disabled !== true ? '' : {color: this.$themes.gray}" class="display-6">Pulse Option<p/>
+    </div>
+    <div class="flex sm1 xl1 md1 xs1 px-0 mx-0 my-0 py-0">
+      <va-checkbox v-model="itemInput" @input="itemChange(itemInput)" :disabled="disabled"/>
+    </div>
+    <div class="flex sm7 xl7 md7 xs7 px-0 mx-0 my-0 py-1">
+      <p :style="{color: this.$themes.gray}" style="font-weight: bold;"> Invert pulses during E1 to E2 </p>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import { taskInfo } from '@/data/task/TaskInfo'
+
+export default {
+  name: 'PulseOption',
+  components: {
+  },
+  props: {
+    deviceID: {
+      type: Number,
+      required: true,
+    },
+    parameterName: {
+      type: String,
+      required: true,
+    },
+    disabled: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  created () {
+  },
+  data () {
+    return {
+      inputeKey: 0,
+      itemInput: parseInt(taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName]) === 1,
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    itemChange (val) {
+      if (val !== (parseInt(taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName]) === 1)) {
+        this.$emit('parameterChange', [this.parameterName, val])
+      }
+    },
+    refresh () {
+      this.itemInput = parseInt(taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName]) === 1
+    },
+  },
+  async mounted () {
+  },
+  destroyed () {
+  },
+  watch: {
+  },
+}
+</script>

src/components/task/content/parameter/item/DPV/PulseWidth.vue

@@ -1,23 +1,30 @@
 <template>
-  <div class="flex-container">
-    <p class="display-6 flex-child">Pulse Width<p/>
-    <va-input
-      @mouseleave.native="itemChange(itemInput)"
-      @keyup.enter="itemChange(itemInput)"
-      @blur="itemChange(itemInput)"
-      v-model="itemInput"
-      class="mb-0 flex-child1"
-      :error="showError"
-      :error-messages="errorMsg"
-    >
-    </va-input>
-    <va-button
-      @click="unitChange()"
-      v-model="unitSelect"
-      class="px-2 py-0 mr-0 flex-child2"
-    >
-      {{ unitSelect }}
-    </va-button>
+  <div class="row flex px-0 mx-0 my-0 py-0">
+    <div class="flex sm4 xl4 md4 xs4 px-0 mx-0 my-0 py-2">
+      <p class="display-6">Pulse Width<p/>
+    </div>
+    <div class="flex sm3 xl3 md3 xs3 px-0 mx-0 my-0 py-0">
+      <va-input
+        @mouseleave.native="itemChange(itemInput)"
+        @keyup.enter="itemChange(itemInput)"
+        @blur="itemChange(itemInput)"
+        :key="inputeKey"
+        v-model="itemInput"
+        class="mb-0"
+        :error="showError"
+        :error-messages="errorMsg"
+      />
+    </div>
+    <div class="flex sm5 xl5 md5 xs5 px-0 mx-0 my-0 py-0">
+      <va-button
+        @click="unitChange()"
+        v-model="unitSelect"
+        class="px-3 py-1"
+        style="border-radius: 12px;"
+      >
+        {{ unitSelect }}
+      </va-button>
+    </div>
   </div>
 </template>
 
@@ -44,8 +51,8 @@ export default {
   data () {
     return {
       inputeKey: 0,
-      itemInput: String(Math.round((taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName + String(this.segmentID)]) / 10)),
-      unitSelect: 'msec',
+      itemInput: String(parseInt(taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName])),
+      unitSelect: 'ms',
       unitClickTime: 0,
       showError: false,
       errorMsg: [''],
@@ -59,39 +66,34 @@ export default {
       this.inputeKey++
       this.showError = false
       this.errorMsg[0] = ''
-      if (this.unitSelect === 'sec') {
-        val = parseInt(val) * 1000
+      if (this.unitSelect === 's') {
+        val = parseFloat(val) * 1000
       }
+      val = parseInt(val) // each step: 1ms
 
-      // 5 ms a step
-      const remainder = parseInt(val) % 5
-      if (remainder !== 0) {
-        val = parseInt(val) + (5 - remainder)
-      }
-      if (parseInt(val) < 1 || parseInt(val) > 100000) {
+      if (val < 0 || val > 1e6) {
         this.showError = true
-        this.errorMsg[0] = '1ms ~ 100s'
+        this.errorMsg[0] = '0 ~ 1000s'
         return
       }
-      if (parseFloat(val) !== Math.round(taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName + String(this.segmentID)] / 10)) {
-        this.$emit('parameterChange', [this.parameterName + String(this.segmentID), parseInt(val) * 10])
-        this.$emit('checkCurrentRecording', val)
+      if (val !== parseInt(taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName])) {
+        this.$emit('parameterChange', [this.parameterName, val])
       }
     },
     unitChange () {
       this.unitClickTime += 1
       if (this.unitClickTime % 2 === 0) {
-        this.unitSelect = 'msec'
+        this.unitSelect = 'ms'
         this.itemInput = String(parseFloat(this.itemInput) * 1000)
       } else {
-        this.unitSelect = 'sec'
+        this.unitSelect = 's'
         this.itemInput = String(parseFloat(this.itemInput) / 1000)
       }
     },
     refresh () {
       if (this.showError === false) {
-        let duration = Math.round((taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName + String(this.segmentID)]) / 10)
-        if (this.unitSelect === 'sec') {
+        let duration = parseInt(taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName])
+        if (this.unitSelect === 's') {
           duration /= 1000
         }
         this.itemInput = String(duration)
@@ -106,25 +108,3 @@ export default {
   },
 }
 </script>
-
-<style lang="scss">
-  .flex-container {
-    display: flex;
-  }
-
-  .flex-child {
-    flex: 2;
-  }
-
-  .flex-child1 {
-    flex: 1;
-  }
-
-  .flex-child2 {
-    flex: 0;
-  }
-
-  .flex-child:first-child {
-    margin-right: 1px;
-  }
-</style>

src/components/task/content/parameter/item/DPV/SampleRate.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="row flex px-0 mx-0 my-0 py-0">
+    <div class="flex sm4 xl4 md4 xs4 px-0 mx-0 my-0 py-2">
+      <p class="display-6">Sample Rate<p/>
+    </div>
+    <div class="flex sm3 xl3 md3 xs3 px-0 mx-0 my-0 py-0">
+      <va-input
+        @mouseleave.native="itemChange(itemInput)"
+        @keyup.enter="itemChange(itemInput)"
+        @blur="itemChange(itemInput)"
+        :key="inputeKey"
+        v-model="itemInput"
+        class="mb-0"
+        :error="showError"
+        :error-messages="errorMsg"
+      />
+    </div>
+    <div class="flex sm5 xl5 md5 xs5 px-0 mx-0 my-0 py-0">
+      <va-button
+        flat
+        color="gray"
+        class="px-3 py-1"
+        style="border-radius: 12px; opacity: 1;"
+        disabled
+      >
+        {{ unitSelect }}
+      </va-button>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import { taskInfo } from '@/data/task/TaskInfo'
+
+export default {
+  name: 'SampleRate',
+  components: {
+  },
+  props: {
+    deviceID: {
+      type: Number,
+      required: true,
+    },
+    parameterName: {
+      type: String,
+      required: true,
+    },
+  },
+  created () {
+  },
+  data () {
+    return {
+      inputeKey: 0,
+      itemInput: taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName] / 10,
+      unitSelect: 'sps',
+      showError: false,
+      errorMsg: [''],
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    itemChange (val) {
+      val = parseFloat(val).toFixed(1) // 一個間距最小為0.1sps
+      this.itemInput = val
+      if (val < 0.1 || val > 100) {
+        this.showError = true
+        this.errorMsg[0] = '0.1 ~ 100sps'
+        return
+      } else {
+        this.showError = false
+        this.errorMsg[0] = ''
+      }
+      this.inputeKey++
+
+      if (parseFloat(val) !== taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName] / 10) {
+        this.$emit('parameterChange', [this.parameterName, val * 10])
+      }
+    },
+    refresh () {
+      this.itemInput = taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName] / 10
+    },
+  },
+  async mounted () {
+  },
+  destroyed () {
+  },
+  watch: {
+  },
+}
+</script>

src/components/task/content/parameter/item/DPV/StepTime.vue

@@ -1,130 +0,0 @@
-<template>
-  <div class="flex-container">
-    <p class="display-6 flex-child">Step Time<p/>
-    <va-input
-      @mouseleave.native="itemChange(itemInput)"
-      @keyup.enter="itemChange(itemInput)"
-      @blur="itemChange(itemInput)"
-      v-model="itemInput"
-      class="mb-0 flex-child1"
-      :error="showError"
-      :error-messages="errorMsg"
-    >
-    </va-input>
-    <va-button
-      @click="unitChange()"
-      v-model="unitSelect"
-      class="px-2 py-0 mr-0 flex-child2"
-    >
-      {{ unitSelect }}
-    </va-button>
-  </div>
-</template>
-
-<script>
-
-import { taskInfo } from '@/data/task/TaskInfo'
-
-export default {
-  name: 'StepTime',
-  components: {
-  },
-  props: {
-    deviceID: {
-      type: Number,
-      required: true,
-    },
-    parameterName: {
-      type: String,
-      required: true,
-    },
-  },
-  created () {
-  },
-  data () {
-    return {
-      inputeKey: 0,
-      itemInput: String(Math.round((taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName + String(this.segmentID)]) / 10)),
-      unitSelect: 'msec',
-      unitClickTime: 0,
-      showError: false,
-      errorMsg: [''],
-    }
-  },
-  mqtt: {
-  },
-  methods: {
-    itemChange (val) {
-      this.itemInput = val
-      this.inputeKey++
-      this.showError = false
-      this.errorMsg[0] = ''
-      if (this.unitSelect === 'sec') {
-        val = parseInt(val) * 1000
-      }
-
-      // 5 ms a step
-      const remainder = parseInt(val) % 5
-      if (remainder !== 0) {
-        val = parseInt(val) + (5 - remainder)
-      }
-      if (parseInt(val) < 1 || parseInt(val) > 100000) {
-        this.showError = true
-        this.errorMsg[0] = '1ms ~ 100s'
-        return
-      }
-      if (parseFloat(val) !== Math.round(taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName + String(this.segmentID)] / 10)) {
-        this.$emit('parameterChange', [this.parameterName + String(this.segmentID), parseInt(val) * 10])
-        this.$emit('checkCurrentRecording', val)
-      }
-    },
-    unitChange () {
-      this.unitClickTime += 1
-      if (this.unitClickTime % 2 === 0) {
-        this.unitSelect = 'msec'
-        this.itemInput = String(parseFloat(this.itemInput) * 1000)
-      } else {
-        this.unitSelect = 'sec'
-        this.itemInput = String(parseFloat(this.itemInput) / 1000)
-      }
-    },
-    refresh () {
-      if (this.showError === false) {
-        let duration = Math.round((taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName + String(this.segmentID)]) / 10)
-        if (this.unitSelect === 'sec') {
-          duration /= 1000
-        }
-        this.itemInput = String(duration)
-      }
-    },
-  },
-  async mounted () {
-  },
-  destroyed () {
-  },
-  watch: {
-  },
-}
-</script>
-
-<style lang="scss">
-  .flex-container {
-    display: flex;
-  }
-
-  .flex-child {
-    flex: 2;
-  }
-
-  .flex-child1 {
-    flex: 1;
-  }
-
-  .flex-child2 {
-    flex: 0;
-  }
-
-  .flex-child:first-child {
-    margin-right: 1px;
-  }
-</style>

src/components/task/content/parameter/item/PulseSensing/EliteParameterRecordingElitePulseSensing.vue

@@ -27,11 +27,11 @@
 
 <script>
 
-import { taskInfo } from '../../../../data/task/TaskInfo'
-import SegmentBlock from '../parameter/item/PulseSensing/SegmentBlock'
-// import DataNumber from '../parameter/item/PulseSensing/DataNumber'
-import DataOutput from '../parameter/item/PulseSensing/DataOutput'
-import CycleNumber from '../parameter/item/PulseSensing/CycleNumber'
+import { taskInfo } from '@/data/task/TaskInfo'
+import SegmentBlock from './SegmentBlock'
+// import DataNumber from './DataNumber'
+import DataOutput from './DataOutput'
+import CycleNumber from './CycleNumber'
 import { SlickList, SlickItem } from 'vue-slicksort'
 import _ from 'lodash'
 
@@ -71,7 +71,7 @@ export default {
     },
     // Array[String of Parameter Nmae, Value]
     deviceParameterChange: function (e) {
-      console.log('e[0],e[1]', e[0], ',', e[1])
+      //  console.log('e[0],e[1]', e[0], ',', e[1])
       this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
         header: 'device_parameter/0',
         device: taskInfo.getRawDeviceID(this.deviceID),

src/components/task/content/parameter/neulive-gimer/NeuliveParameterRecordingGM.vue

@@ -98,12 +98,20 @@
 
 <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'
 
 export default {
   name: 'NeuliveParameterRecording',
   components: {
   },
+  computed: {
+    ...mapFields('taskContent', [
+      'deviceList',
+      'chartData',
+    ]),
+  },
   props: {
     deviceID: {
       type: Number,
@@ -119,10 +127,6 @@ export default {
       channelList: [],
       ampGainSelect: null,
       ampGainOptions: [
-        // {
-        //   id: 0,
-        //   description: '25',
-        // },
         {
           id: 0,
           description: '100',
@@ -249,8 +253,39 @@ export default {
     mqttPub: function (topic, mes) {
       this.$mqtt.publish(topic, mes)
     },
+    deviceInstruction: function (id, instr) {
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_instruction/0',
+        device: taskInfo.getRawDeviceID(id),
+        instruction: instr,
+      }))
+    },
+    deviceParameterChange: async function (id, name, content) {
+      // const test = await this.taskGimerCheckDeviceStatus({
+      //   deviceList: this.deviceList,
+      //   type: 'allFree',
+      //   libraryNameREC: 'Neulive3.5-REC',
+      //   libraryNameSTI: 'Neulive3.5-STI',
+      // })
+      // if (!test) {
+      //   this.pageToast('Please close recording and stimulation.')
+      //   this.refresh()
+      //   return false
+      // }
+      taskInfo.getDeviceInfo(id).parameterSet[name] = content
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_parameter/0',
+        device: taskInfo.getRawDeviceID(id),
+        parameter: name,
+        content: content,
+      }))
+    },
     refresh () {
-      this.ampGainSelect = this.ampGainOptions[(taskInfo.getDeviceInfo(this.deviceID).parameterSet.AMP_GAIN) % 4]
+      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
@@ -286,17 +321,11 @@ export default {
         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: 'RECORDING_CH_L',
-            content: channelValue,
-          }))
+          this.deviceParameterChange(this.deviceID, 'RECORDING_CH_L', channelValue)
         }
         this.recordingChannelReset(this.channelList)
       } else if (this.channelList.indexOf(val) < 0 && val <= 32 && val > 16) {
         this.channelList.push(val)
-
         let channelSet = ''
         for (let i = 32; i >= 17; i--) {
           if (this.channelList.indexOf(i) >= 0) {
@@ -308,12 +337,7 @@ export default {
         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: 'RECORDING_CH_H',
-            content: channelValue,
-          }))
+          this.deviceParameterChange(this.deviceID, 'RECORDING_CH_H', channelValue)
         }
         this.recordingChannelReset(this.channelList)
       } else {
@@ -333,12 +357,7 @@ export default {
         }
         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: 'RECORDING_CH_L',
-            content: channelValue,
-          }))
+          this.deviceParameterChange(this.deviceID, 'RECORDING_CH_L', channelValue)
         }
         this.recordingChannelReset(this.channelList)
       } else if (this.channelList.indexOf(val) >= 0 && val <= 32 && val > 16) {
@@ -353,12 +372,7 @@ export default {
         }
         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: 'RECORDING_CH_H',
-            content: channelValue,
-          }))
+          this.deviceParameterChange(this.deviceID, 'RECORDING_CH_H', channelValue)
         }
         this.recordingChannelReset(this.channelList)
       }
@@ -374,68 +388,31 @@ export default {
       }
       const channelValue = parseInt(channelSet, 2)
       if (channelValue !== taskInfo.getDeviceInfo(this.deviceID).RECORDING_CH) {
-        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
-          header: 'device_parameter/0',
-          device: taskInfo.getRawDeviceID(this.deviceID),
-          parameter: 'RECORDING_CH',
-          content: channelValue,
-        }))
+        this.deviceParameterChange(this.deviceID, 'RECORDING_CH', 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),
-        }))
+        this.deviceParameterChange(this.deviceID, 'AMP_GAIN', this.ampGainSelect.id)
       }
     },
     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)}`,
-        }))
+        this.deviceParameterChange(this.deviceID, 'SAMPLE_RATE|ADC_CLOCK', `${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
-        }
+        const scaleRange = Math.pow(2, this.acceleratorSensitivitySelect.id + 1) * 100
 
-        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.deviceParameterChange(this.deviceID, 'ACCELERATOR_S', this.acceleratorSensitivitySelect.id)
         this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
           header: 'device_update_accelerator_sensitivity/0',
           device: taskInfo.getRawDeviceID(this.deviceID),
           content: this.acceleratorSensitivitySelect.value,
         }))
-        const charts = chartData.getAllChartsData()
+        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) {
@@ -451,30 +428,6 @@ export default {
         }
       }
     },
-    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']
@@ -489,12 +442,7 @@ export default {
         }
         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,
-          }))
+          this.deviceParameterChange(this.deviceID, 'AXIS_CH', axisChannelValue)
         }
       }
     },
@@ -512,12 +460,7 @@ export default {
         }
         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,
-          }))
+          this.deviceParameterChange(this.deviceID, 'AXIS_CH', axisChannelValue)
         }
       }
     },
@@ -531,6 +474,8 @@ export default {
         },
       )
     },
+
+    ...mapActions('taskContent', [types.gimer.checkDeviceStatus]),
   },
   mounted () {
     this.refresh()

src/components/task/content/parameter/neulive-gimer/NeuliveParameterStimulationGM.vue

@@ -20,48 +20,6 @@
         </div>
       </div>
 
-      <!-- <div class="mt-4">
-        <div class="row sm12 xl12 md12 xs12">
-          <p class="display-6">CHANNELS</p>
-        </div>
-        <div class="row">
-          <div class="flex sm12 xl12 md12 xs12">
-            <div
-              style='display: inline-block;'
-              v-for="channel in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]"
-              :key="channel"
-            >
-              <va-button
-                class="mx-1 px-2"
-                color="success"
-                v-if="posChannelList.indexOf(channel) >= 0 && negChannelList.indexOf(channel) < 0"
-                @click="channelClick(channel)"
-                small
-              >
-                {{channel}}
-              </va-button>
-              <va-button
-                class="mx-1 px-2"
-                color="danger"
-                v-if="posChannelList.indexOf(channel) < 0 && negChannelList.indexOf(channel) >= 0"
-                @click="channelClick(channel)"
-                small
-              >
-                {{channel}}
-              </va-button>
-              <va-button
-                class="mx-1 px-2"
-                v-if="posChannelList.indexOf(channel) < 0 && negChannelList.indexOf(channel) < 0"
-                @click="channelClick(channel)"
-                small outline
-              >
-                {{channel}}
-              </va-button>
-            </div>
-          </div>
-        </div>
-      </div> -->
-
       <div class="mt-4">
         <div class="row sm12 xl12 md12 xs12">
           <p class="display-6">CYCLE NUMBER = 1</p>
@@ -93,16 +51,6 @@
                 255
               </va-button>
             </div>
-            <!-- <va-slider
-              class="flex sm12 xl12 md12 xs12"
-              @mouseup.native="repeatNumberChange(repeatNumber)"
-              @mouseleave.native="repeatNumberChange(repeatNumber)"
-              @touchend.native="repeatNumberChange(repeatNumber)"
-              value-visible
-              v-model="repeatNumber"
-              :min="1"
-              :max="256"
-            /> -->
           </div>
         </div>
       </div>
@@ -142,7 +90,7 @@
           <div class="flex sm12 xl12 md12 xs12">
             <div class="flex row align--center">
               <va-button slot="append" class="mr-2 pa-1 shrink" small @click="amplitudeNumberChange(5, 'PHASE1')">
-                5
+                50
               </va-button>
               <va-input
                 @keyup.enter="amplitudeNumberChange(amplitudeNumberInput.PHASE1, 'PHASE1')"
@@ -154,10 +102,10 @@
                 </p>
               </va-input>
               <va-button slot="append" class="ml-2 pa-1 shrink" small @click="amplitudeNumberChange(4000, 'PHASE1')">
-                4000
+                40000
               </va-button>
             </div>
-            <va-slider
+            <!-- <va-slider
               class="flex sm12 xl12 md12 xs12"
               @mouseup.native="amplitudeNumberChange(amplitudeNumber.PHASE1, 'PHASE1')"
               @mouseleave.native="amplitudeNumberChange(amplitudeNumber.PHASE1, 'PHASE1')"
@@ -166,7 +114,7 @@
               v-model="amplitudeNumber.PHASE1"
               :min="5"
               :max="4000"
-            />
+            /> -->
           </div>
         </div>
       </div>
@@ -180,7 +128,7 @@
           <div class="flex sm12 xl12 md12 xs12">
             <div class="flex row align--center">
               <va-button slot="append" class="mr-2 pa-1 shrink" small @click="amplitudeNumberChange(5, 'PHASE2')">
-                5
+                50
               </va-button>
               <va-input
                 @keyup.enter="amplitudeNumberChange(amplitudeNumberInput.PHASE2, 'PHASE2')"
@@ -192,10 +140,10 @@
                 </p>
               </va-input>
               <va-button slot="append" class="ml-2 pa-1 shrink" small @click="amplitudeNumberChange(4000, 'PHASE2')">
-                4000
+                40000
               </va-button>
             </div>
-            <va-slider
+            <!-- <va-slider
               class="flex sm12 xl12 md12 xs12"
               @mouseup.native="amplitudeNumberChange(amplitudeNumber.PHASE2, 'PHASE2')"
               @mouseleave.native="amplitudeNumberChange(amplitudeNumber.PHASE2, 'PHASE2')"
@@ -204,7 +152,7 @@
               v-model="amplitudeNumber.PHASE2"
               :min="5"
               :max="4000"
-            />
+            /> -->
           </div>
         </div>
       </div>
@@ -278,9 +226,6 @@
         <div class="row">
           <div class="flex sm12 xl12 md12 xs12">
             <div class="flex row align--center">
-              <!-- <va-button slot="append" class="mr-2 pa-1 shrink" small @click="timeRangeChange(1, 0.1)">
-                0.1
-              </va-button> -->
               <va-input
                 @keyup.enter="timeRangeChange(1, t1RangeInput)"
                 v-model="t1RangeInput"
@@ -294,9 +239,6 @@
                   {{unitOptions[unitSelect].label}}
                 </p>
               </va-input>
-              <!-- <va-button slot="append" class="ml-2 pa-1 shrink" small @click="timeRangeChange(1, 10.23)">
-                10.23
-              </va-button> -->
             </div>
           </div>
         </div>
@@ -304,9 +246,6 @@
         <div class="row" v-if="patternModeSelect==1">
           <div class="flex sm12 xl12 md12 xs12">
             <div class="flex row align--center">
-              <!-- <va-button slot="append" class="mr-2 pa-1 shrink" small @click="timeRangeChange(2, 0)">
-                0
-              </va-button> -->
               <va-input
                 @keyup.enter="timeRangeChange(2, t2RangeInput)"
                 v-model="t2RangeInput"
@@ -320,9 +259,6 @@
                   {{unitOptions[unitSelect].label}}
                 </p>
               </va-input>
-              <!-- <va-button slot="append" class="ml-2 pa-1 shrink" small @click="timeRangeChange(2, 10.23)">
-                10.23
-              </va-button> -->
             </div>
           </div>
         </div>
@@ -330,9 +266,6 @@
         <div class="row" v-if="patternModeSelect==1">
           <div class="flex sm12 xl12 md12 xs12">
             <div class="flex row align--center">
-              <!-- <va-button slot="append" class="mr-2 pa-1 shrink" small @click="timeRangeChange(3, 0.1)">
-                0.1
-              </va-button> -->
               <va-input
                 @keyup.enter="timeRangeChange(3, t3RangeInput)"
                 v-model="t3RangeInput"
@@ -346,9 +279,6 @@
                   {{unitOptions[unitSelect].label}}
                 </p>
               </va-input>
-              <!-- <va-button slot="append" class="ml-2 pa-1 shrink" small @click="timeRangeChange(3, 10.23)">
-                10.23
-              </va-button> -->
             </div>
           </div>
         </div>
@@ -356,9 +286,6 @@
         <div class="row">
           <div class="flex sm12 xl12 md12 xs12">
             <div class="flex row align--center">
-              <!-- <va-button slot="append" class="mr-2 pa-1 shrink" small @click="timeRangeChange(4, 0)">
-                0
-              </va-button> -->
               <va-input
                 @keyup.enter="timeRangeChange(4, t4RangeInput)"
                 readonly
@@ -373,9 +300,6 @@
                   {{unitOptions[unitSelect].label}}
                 </p>
               </va-input>
-              <!-- <va-button slot="append" class="ml-2 pa-1 shrink" small @click="timeRangeChange(4, 1310.71)">
-                1310.71
-              </va-button> -->
             </div>
           </div>
         </div>
@@ -409,6 +333,9 @@
 
 <script>
 import { taskInfo } from '@/data/task/TaskInfo'
+import { mapActions } from 'vuex'
+import { mapFields } from 'vuex-map-fields'
+import types from '@/store/modules/task/content/types'
 
 export default {
   name: 'NeuliveParameterStimulation',
@@ -449,8 +376,8 @@ export default {
       repeatInterval: 65535, // ms
       // repeatNumberArray: Array(9).fill(1),
       amplitudeNumberInput: {
-        PHASE1: '50',
-        PHASE2: '50',
+        PHASE1: '500',
+        PHASE2: '500',
       },
       amplitudeNumber: {
         PHASE1: 50,
@@ -494,28 +421,22 @@ export default {
       periodNumber: 0,
       t1RangeInput: '0',
       t1Range: 0,
-      // t1RangeArray: Array(9).fill(0),
       t2RangeInput: '0',
       t2Range: 0,
-      // t2RangeArray: Array(9).fill(0),
       t3RangeInput: '0',
       t3Range: 0,
-      // t3RangeArray: Array(9).fill(0),
       t4RangeInput: '0',
       t4Range: 0,
-      // t4RangeArray: Array(9).fill(0),
     }
   },
   computed: {
-    stimulateDisable () {
-      // posChannel and negChannel at least one && t1 ~ t4 > 0
-      const totalStiTime = (this.t1Range + this.t2Range + this.t3Range + this.t4Range) * 10
-      if (this.t1Range >= 0 && this.t2Range >= 0 && this.t3Range >= 0 && this.t4Range >= 0 && this.periodNumber === totalStiTime) {
-        return this.stimulateElectrodeSelect ? !(this.posChannelList.length > 0 && this.negChannelList.length > 0) : !(this.posChannelList.length > 0 || this.negChannelList.length > 0)
-      } else {
-        return true
-      }
-    },
+    ...mapFields('taskContent', [
+      'deviceList',
+    ]),
+  },
+  mqtt: {
+  },
+  methods: {
     TRangeStatusCheck () {
       let flag = true
       for (let i = 0; i < this.TRangeErrorMsgList.length; i++) {
@@ -538,10 +459,6 @@ export default {
       }
       return false
     },
-  },
-  mqtt: {
-  },
-  methods: {
     toggleModal (which) {
       if (which === 'ELECTRODE') {
         this.showGuideLineModal.ELECTRODE = true
@@ -554,22 +471,45 @@ export default {
     mqttPub: function (topic, mes) {
       this.$mqtt.publish(topic, mes)
     },
+    deviceInstruction: function (id, instr) {
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_instruction/0',
+        device: taskInfo.getRawDeviceID(id),
+        instruction: instr,
+      }))
+    },
+    deviceParameterChange: async function (id, name, content) {
+      // const test = await this.taskGimerCheckDeviceStatus({
+      //   deviceList: this.deviceList,
+      //   type: 'allFree',
+      //   libraryNameREC: 'Neulive3.5-REC',
+      //   libraryNameSTI: 'Neulive3.5-STI',
+      // })
+      // if (!test) {
+      //   this.pageToast('Please close recording and stimulation.')
+      //   this.refresh()
+      //   return false
+      // }
+      taskInfo.getDeviceInfo(id).parameterSet[name] = content
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_parameter/0',
+        device: taskInfo.getRawDeviceID(id),
+        parameter: name,
+        content: content,
+      }))
+    },
     refreshPattern () {
       this.patternModeSelect = taskInfo.getDeviceInfo(this.deviceID).parameterSet.STI_PATTERN ? 1 : 0
-      if (this.TRangeStatusCheck === true) {
+      if (this.TRangeStatusCheck()) {
         // if t1~t4 is not valid input, not need to refresh
         this.t1Range = taskInfo.getDeviceInfo(this.deviceID).parameterSet.STI_T1_CH1
         this.t1RangeInput = String((this.t1Range * 10) / this.unitMultiply)
-        // this.t1RangeArray.fill(this.t1Range, 0)
         this.t2Range = taskInfo.getDeviceInfo(this.deviceID).parameterSet.STI_T2_CH1
         this.t2RangeInput = String((this.t2Range * 10) / this.unitMultiply)
-        // this.t2RangeArray.fill(this.t2Range, 0)
         this.t3Range = taskInfo.getDeviceInfo(this.deviceID).parameterSet.STI_T3_CH1
         this.t3RangeInput = String((this.t3Range * 10) / this.unitMultiply)
-        // this.t3RangeArray.fill(this.t3Range, 0)
         this.t4Range = taskInfo.getDeviceInfo(this.deviceID).parameterSet.STI_T4_CH1
         this.t4RangeInput = String((this.t4Range * 10) / this.unitMultiply)
-        // this.t4RangeArray.fill(this.t4Range, 0)
       }
       this.periodNumber = (this.t1Range + this.t2Range + this.t3Range + this.t4Range) * 10
       this.periodNumberInput = String((this.periodNumber) / this.unitMultiply)
@@ -581,39 +521,16 @@ export default {
     },
     refresh () {
       this.stimulationOn = taskInfo.getDeviceInfo(this.deviceID).parameterSet.STIMULATING
-
-      // stichannel (+,-), stiPolarity (+)
-      // const stiChannelSet = taskInfo.getDeviceInfo(this.deviceID).parameterSet.STI_CHANNEL.toString(2).split('').reverse()
-      // const stiPolaritySet = taskInfo.getDeviceInfo(this.deviceID).parameterSet.STI_POLARITY.toString(2).split('').reverse()
-
-      // if (stiPolaritySet.length >= stiChannelSet.length) {
-      // this.posChannelList.length = 0
-      // this.negChannelList.length = 0
-      // stiChannelSet.forEach((element, index) => {
-      //   if (parseInt(element) > 0) {
-      //     if (parseInt(stiPolaritySet[index]) > 0) {
-      //       this.posChannelList.push(index + 1)
-      //     } else {
-      //       this.negChannelList.push(index + 1)
-      //     }
-      //   }
-      // })
       this.stimulateElectrodeSelect = taskInfo.getDeviceInfo(this.deviceID).parameterSet.STI_H_BRIDGE ? 1 : 0
-      this.repeatNumberSelect = taskInfo.getDeviceInfo(this.deviceID).parameterSet.CONTINUOUS_STI ? 1 : 0
       this.repeatNumber = (taskInfo.getDeviceInfo(this.deviceID).parameterSet.REPEAT_TIME_littleEndian)
       this.repeatNumberInput = String(this.repeatNumber)
-      if (this.repeatIntervalCheck) {
-        // if not valid input, not need to refresh
-        this.repeatInterval = (taskInfo.getDeviceInfo(this.deviceID).parameterSet.REPEAT_INTERVAL_littleEndian) // unit: ms
-        this.repeatIntervalInput = String(this.repeatInterval / 1e3)
-      } else {
-        this.updateRepeatIntervalErrorMsg({ status: true, msg: `Ti < ${this.periodNumberInput}${this.unitOptions[this.unitSelect].label} (period) * 1 (cycle)` })
-      }
+      this.repeatInterval = (taskInfo.getDeviceInfo(this.deviceID).parameterSet.REPEAT_INTERVAL_littleEndian) // unit: ms
+      this.repeatIntervalInput = String(this.repeatInterval / 1e3)
       // this.repeatNumberArray = taskInfo.getDeviceInfo(this.deviceID).parameterSet.STI_CYCLE_LIST
       this.amplitudeNumber.PHASE1 = taskInfo.getDeviceInfo(this.deviceID).parameterSet.STI_AMPLITUDE_L1 * 5
-      this.amplitudeNumberInput.PHASE1 = String(this.amplitudeNumber.PHASE1)
+      this.amplitudeNumberInput.PHASE1 = String(this.amplitudeNumber.PHASE1) + '0'
       this.amplitudeNumber.PHASE2 = taskInfo.getDeviceInfo(this.deviceID).parameterSet.STI_AMPLITUDE_H3 * 5
-      this.amplitudeNumberInput.PHASE2 = String(this.amplitudeNumber.PHASE2)
+      this.amplitudeNumberInput.PHASE2 = String(this.amplitudeNumber.PHASE2) + '0'
 
       this.refreshPattern()
 
@@ -624,52 +541,19 @@ export default {
       this.repeatIntervalErrorMsg.key++
     },
     transUnit () {
-      if (this.unitSelect === 0) { // s
-        this.unitMultiply = 1000000
-      } else if (this.unitSelect === 1) { // ms
-        this.unitMultiply = 1000
-      } else { // us
-        this.unitMultiply = 1
-      }
+      this.unitMultiply = 1e6 / Math.pow(1e3, this.unitSelect)
       this.t1RangeInput = String((this.t1Range * 10) / this.unitMultiply)
       this.t2RangeInput = String((this.t2Range * 10) / this.unitMultiply)
       this.t3RangeInput = String((this.t3Range * 10) / this.unitMultiply)
       this.t4RangeInput = String((this.t4Range * 10) / this.unitMultiply)
       this.periodNumberInput = String((this.periodNumber) / this.unitMultiply)
     },
-    stimulateClick () {
-      this.stimulationOn = !this.stimulationOn
-      if (this.stimulationOn) {
-        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
-          header: 'device_instruction/0',
-          device: taskInfo.getRawDeviceID(this.deviceID),
-          instruction: 'stimulate',
-        }))
-      } else {
-        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
-          header: 'device_instruction/0',
-          device: taskInfo.getRawDeviceID(this.deviceID),
-          instruction: 'stop_stimulate',
-        }))
-      }
-      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
-        header: 'device_parameter/0',
-        device: taskInfo.getRawDeviceID(this.deviceID),
-        parameter: 'STIMULATING',
-        content: this.stimulationOn,
-      }))
-    },
     stimulateElectrodeSelectChange () {
       if (this.stimulateElectrodeSelect == null) {
         return false
       }
       if (this.stimulateElectrodeSelect !== taskInfo.getDeviceInfo(this.deviceID).parameterSet.STI_H_BRIDGE) {
-        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
-          header: 'device_parameter/0',
-          device: taskInfo.getRawDeviceID(this.deviceID),
-          parameter: 'STI_H_BRIDGE',
-          content: this.stimulateElectrodeSelect,
-        }))
+        this.deviceParameterChange(this.deviceID, 'STI_H_BRIDGE', this.stimulateElectrodeSelect)
       }
     },
     channelClick (val) {
@@ -693,25 +577,15 @@ export default {
       }
 
       if (this.repeatNumber !== taskInfo.getDeviceInfo(this.deviceID).REPEAT_TIME_littleEndian) {
-        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
-          header: 'device_parameter/0',
-          device: taskInfo.getRawDeviceID(this.deviceID),
-          parameter: 'REPEAT_TIME_littleEndian',
-          content: String(this.repeatNumber),
-        }))
+        this.deviceParameterChange(this.deviceID, 'REPEAT_TIME_littleEndian', String(this.repeatNumber))
       }
     },
     repeatIntervalChange (val) {
       this.repeatIntervalInput = String(parseFloat(val).toFixed(2))
       this.repeatInterval = parseFloat(this.repeatIntervalInput) * 1e3
       if (this.repeatInterval !== taskInfo.getDeviceInfo(this.deviceID).REPEAT_INTERVAL_littleEndian) {
-        if (this.repeatIntervalCheck) {
-          this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
-            header: 'device_parameter/0',
-            device: taskInfo.getRawDeviceID(this.deviceID),
-            parameter: 'REPEAT_INTERVAL_littleEndian',
-            content: this.repeatInterval,
-          }))
+        if (this.repeatIntervalCheck()) {
+          this.deviceParameterChange(this.deviceID, 'REPEAT_INTERVAL_littleEndian', this.repeatInterval)
           this.resetRepeatIntervalErrorMsg()
         } else {
           this.updateRepeatIntervalErrorMsg({ status: true, msg: `Ti < ${this.periodNumberInput}${this.unitOptions[this.unitSelect].label} (period) * 1 (cycle)` })
@@ -724,50 +598,27 @@ export default {
         return false
       }
       if (typeof (val) === 'string') {
-        if (isNaN(val) || parseInt(val) > 4000 || parseInt(val) < 5) {
-          val = '50'
-          this.amplitudeNumberInput[type] = '50'
-          this.amplitudeNumber[type] = 50
-        }
-        if (parseInt(this.amplitudeNumberInput[type]) !== parseInt(this.amplitudeNumber)) {
-          this.amplitudeNumber[type] = parseInt(val)
-        }
-      } else {
-        if (isNaN(val) || parseInt(val) > 4000 || parseInt(val) < 5) {
-          val = 50
-          this.amplitudeNumberInput[type] = '50'
-          this.amplitudeNumber[type] = 50
-        }
-        if (parseInt(this.amplitudeNumberInput[type]) !== parseInt(this.amplitudeNumber[type]) || this.amplitudeNumber[type] !== val) {
-          this.amplitudeNumberInput[type] = String(val)
-          this.amplitudeNumber[type] = val
-        }
+        val = parseInt(parseInt(val / 10) / 5) * 5
       }
+      if (isNaN(val) || parseInt(val) > 4000 || parseInt(val) < 5) {
+        val = 50
+        this.amplitudeNumberInput[type] = '500'
+        this.amplitudeNumber[type] = 50
+      }
+      this.amplitudeNumberInput[type] = String(val) + '0'
+      this.amplitudeNumber[type] = val
       if (parseInt(this.amplitudeNumber[type] / 5) !== parseInt(taskInfo.getDeviceInfo(this.deviceID).parameterSet['STI_AMPLITUDE_' + this.amplitudeName[type][1]])) {
         const content2 = parseInt(this.amplitudeNumber[type] / 5)
         const content1 = parseInt(this.amplitudeNumber[type] / 5 / 2)
-        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
-          header: 'device_parameter/0',
-          device: taskInfo.getRawDeviceID(this.deviceID),
-          parameter: `STI_AMPLITUDE_${this.amplitudeName[type][0]}|STI_AMPLITUDE_${this.amplitudeName[type][1]}`,
-          content: `${content1}|${content2}`,
-        }))
+        this.deviceParameterChange(this.deviceID, `STI_AMPLITUDE_${this.amplitudeName[type][0]}|STI_AMPLITUDE_${this.amplitudeName[type][1]}`, `${content1}|${content2}`)
       }
     },
-
     // [Region] Neulive sti pattern block
     patternModeSelectChange () {
       if (this.patternModeSelect == null) {
         return false
       }
-
-      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
-        header: 'device_parameter/0',
-        device: taskInfo.getRawDeviceID(this.deviceID),
-        parameter: 'STI_PATTERN',
-        content: this.patternModeSelect,
-      }))
-
+      this.deviceParameterChange(this.deviceID, 'STI_PATTERN', this.patternModeSelect)
       if (this.patternModeSelect === 0) {
         this.t2Range = 0
         this.t3Range = 0
@@ -913,14 +764,8 @@ export default {
       }
       this.updateStiParamCheck()
     },
-
     updateStiParamCheck () {
-      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
-        header: 'device_parameter/0',
-        device: taskInfo.getRawDeviceID(this.deviceID),
-        parameter: 'sti_trange_set_done',
-        content: this.TRangeStatusCheck && this.repeatIntervalCheck,
-      }))
+      this.deviceParameterChange(this.deviceID, 'sti_trange_set_done', this.TRangeStatusCheck() && this.repeatIntervalCheck())
     },
     autoResetAllTRange () {
       if (this.patternModeSelect === 0) { // Monophasic
@@ -1086,12 +931,7 @@ export default {
       const stiPolarityValue = parseInt(stiPolaritySet, 2)
 
       if (stiChannelValue !== taskInfo.getDeviceInfo(this.deviceID).STI_CHANNEL || stiPolarityValue !== taskInfo.getDeviceInfo(this.deviceID).STI_POLARITY) {
-        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
-          header: 'device_parameter/0',
-          device: taskInfo.getRawDeviceID(this.deviceID),
-          parameter: 'STI_CHANNEL|STI_POLARITY',
-          content: `${stiChannelValue}|${stiPolarityValue}`,
-        }))
+        this.deviceParameterChange(this.deviceID, 'STI_CHANNEL|STI_POLARITY', `${stiChannelValue}|${stiPolarityValue}`)
       }
     },
     updateTimeRange () {
@@ -1124,19 +964,14 @@ export default {
 
       parameter += 'T3_COUNTER|'
       content += String(parseInt((this.t1Range + this.t2Range + this.t3Range) * 10 + 10)) + '|'
-      console.log(content)
+      //  console.log(content)
       parameter += 'T4_COUNTER|'
       content += String(parseInt((this.t4Range) * 10)) + '|'
 
       if (parameter.length > 0) {
         parameter = parameter.slice(0, -1)
         content = content.slice(0, -1)
-        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
-          header: 'device_parameter/0',
-          device: taskInfo.getRawDeviceID(this.deviceID),
-          parameter: parameter,
-          content: content,
-        }))
+        this.deviceParameterChange(this.deviceID, parameter, content)
       }
     },
     pageToast: function (mes) {
@@ -1149,6 +984,8 @@ export default {
         },
       )
     },
+
+    ...mapActions('taskContent', [types.gimer.checkDeviceStatus]),
   },
   mounted () {
     this.refresh()

src/components/task/content/parameter/neulive-gimer/NeuliveParameterWindowGM.vue

@@ -117,7 +117,7 @@ export default {
   mounted () {
     this.pageInit()
     this.device = taskInfo.getDeviceInfo(this.deviceID)
-    console.log(taskInfo.getDeviceInfo(this.deviceID).info)
+    //  console.log(taskInfo.getDeviceInfo(this.deviceID).info)
   },
   watch: {
     deviceID: function (val) {

src/components/task/content/parameter/neulive-gimer/RecordingSite.vue

@@ -181,15 +181,18 @@ export default {
         content: content,
       }))
     },
+    deviceInstruction: function (id, instr) {
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_instruction/0',
+        device: taskInfo.getRawDeviceID(id),
+        instruction: instr,
+      }))
+    },
     savePowerChange () {
       this.deviceList.forEach(device => {
         if (device.library_name === this.libraryNameSTI) {
           this.deviceParameterChange(device.id, 'SAVE_POWER_MODE', this.savePower.sti + 0)
-          this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
-            header: 'device_instruction/0',
-            device: taskInfo.getRawDeviceID(device.id),
-            instruction: 'SET_POWER_SAVE',
-          }))
+          this.deviceInstruction(device.id, 'SET_POWER_SAVE')
         }
       })
     },
@@ -286,7 +289,7 @@ export default {
       this.paraSend()
     },
     setColor () {
-      console.log(this.channelList)
+      //  console.log(this.channelList)
       for (let i = 0; i < this.channelList.rec.length; i++) {
         if (this.channelList.rec[i] > 0 && this.channelList.stiPos[i] > 0) {
           this.channelList.color[i] = 'b-rec-sti-pos'
@@ -409,9 +412,11 @@ export default {
         this.selectProtectRec = taskInfo.getDeviceInfo(deviceID.REC).parameterSet.BLOCK_CH === 65535 ? 'all channels' : 'only sti channels'
         this.channelList.ref[taskInfo.getDeviceInfo(deviceID.REC).parameterSet.REF_CH] = 1
         const _recCH = taskInfo.getDeviceInfo(deviceID.REC).parameterSet.RECORDING_CH.toString(2).split('').reverse()
+        taskInfo.getDeviceInfo(deviceID.REC).parameterSet.CH_NUMBER = 0
         for (let i = 0; i < _recCH.length; i++) {
           if (_recCH[i] > 0) {
             this.channelList.rec[i] = 1
+            taskInfo.getDeviceInfo(deviceID.REC).parameterSet.CH_NUMBER += 1
           }
         }
       }

src/data/api/auth.js

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

src/data/api/connection.js

@@ -0,0 +1,15 @@
+import axios from 'axios'
+
+async function check () {
+  try {
+    return await axios.get('https://maps.googleapis.com/maps/api/timezone/json?location=39.6034810%2C-119.6822510&timestamp=1331161200', { timeout: 1000 })
+  } catch (e) {
+    return { status: 404 }
+  }
+}
+
+const connection = {
+  check,
+}
+
+export default connection

src/data/api/index.js

@@ -9,8 +9,9 @@ import raw from './raw'
 import mini from './mini'
 import analysis from './analysis'
 import sdcard from './sdcard'
+import connection from './connection'
 
-// axios.defaults.baseURL = 'http://192.168.3.53:3000'
+// axios.defaults.baseURL = 'http://192.168.3.211:3000'
 axios.defaults.baseURL = 'http://' + location.href.split('/')[2].split(':')[0] + ':3000'
 
 const api = {
@@ -25,6 +26,7 @@ const api = {
   mini,
   analysis,
   sdcard,
+  connection,
 }
 
 export default api

src/data/api/sdcard.js

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