[done] eis replay

package-lock.json

@@ -12106,6 +12106,11 @@
         "set-blocking": "~2.0.0"
       }
     },
+    "nprogress": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/nprogress/-/nprogress-0.2.0.tgz",
+      "integrity": "sha1-y480xTIT2JVyP8urkH6UIq28r7E="
+    },
     "nth-check": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-1.0.2.tgz",

package.json

@@ -35,6 +35,7 @@
     "lodash": "^4.17.21",
     "medium-editor": "^5.23.3",
     "normalize.css": "^8.0.1",
+    "nprogress": "^0.2.0",
     "popper.js": "^1.16.0",
     "regenerator-runtime": "^0.13.3",
     "register-service-worker": "^1.6.2",

shell_script/README.md

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

src/app/main.js

@@ -18,6 +18,9 @@ import 'echarts/lib/chart/line'
 import 'echarts/lib/component/dataZoom'
 import 'echarts/lib/component/tooltip'
 import 'echarts/lib/component/legend'
+import 'echarts/lib/component/legend/ScrollableLegendModel.js'
+import 'echarts/lib/component/legend/ScrollableLegendView.js'
+import 'echarts/lib/component/legend/scrollableLegendAction.js'
 import 'echarts/lib/component/axisPointer'
 import 'echarts/lib/component/grid'
 import 'echarts/lib/component/markArea'
@@ -28,6 +31,7 @@ import VueWorker from 'vue-worker'
 
 import axios from 'axios'
 import VueAxios from 'vue-axios'
+import 'nprogress/nprogress.css'
 
 import '../metrics'
 import '../registerServiceWorker'
@@ -51,7 +55,8 @@ Vue.use(VueAxios, axios)
 
 // Vue.use(VueMqtt, 'ws://52.194.17.114:8083')
 // Vue.use(VueMqtt, 'ws://' + location.href.split('/')[2] + ':8083')
-Vue.use(VueMqtt, 'ws://' + '192.168.3.48' + ':8083')
+// Vue.use(VueMqtt, 'ws://' + '192.168.151.125' + ':8083')
+Vue.use(VueMqtt, 'ws://' + '192.168.151.125' + ':8083')
 
 Vue.prototype.GLOBAL = global_
 

src/components/admin/AppLayout.vue

@@ -136,7 +136,7 @@ export default {
 </style>
 
 <style lang='scss'>
-  .layout.gutter--xl {
-    padding: 0.5rem;
-  }
+  // .layout.gutter--xl {
+  //   padding: 0.5rem;
+  // }
 </style>

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

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="row row-equal">
-      <div class="flex md12 xl3 xs12 sm12 area-style">
+      <div class="flex md12 xl3 xs12 sm12">
         <div class="row">
           <div class="flex sm12 xl12 md12 xs12">
             <va-accordion>
@@ -18,11 +18,11 @@
         </div>
       </div>
 
-      <div :class="chartAreaClass" class="area-style">
+      <div :class="chartAreaClass">
         <div class="row" >
           <div class="flex sm12 xl12 md12 xs12">
             <elite-replay-overview-chart v-show="showOverviewChart" :ref="'chart_overview'" class="mb-1" :cardheight="'7vh'" :data="chartOverviewData" @dataZoomEvent="dataZoomEvent($event)"/>
-            <elite-replay-chart :ref="'chart_detail'" @dblclick.native="distribute()" :cardheight="'88vh'" :chartheight="detailchartheight" :data="chartDetailData" />
+            <elite-replay-chart :ref="'chart_detail'" :cardheight="'88vh'" :chartheight="detailchartheight" :data="chartDetailData" />
             <change-channel-value-min-max :ref="'set_min_max'"/>
           </div>
         </div>
@@ -156,7 +156,7 @@ export default {
       })
       let _gridNumber = 0
       const register = this.metaList.map(meta => {
-        const setting = this.GLOBAL.getDefaultChartTypeByMode(meta.parameter_set.MODE)
+        const setting = this.GLOBAL.getDefaultChartTypeByMode(meta.parameter_set.MODE, meta.device.library_name)
         const xType = setting[0] // Elite or Time
         const yType = setting[2] // Elite or Time
         const xValue = setting[1] // 1: I, 2: V, 3: R
@@ -235,6 +235,49 @@ export default {
       }
       this.zoomTime = 0
     },
+    async computeResampleScale (meta, duration) {
+      const sampleRate = meta.parameter_set.SAMPLE_RATE / 10
+      const dataPointNum = (parseInt(duration) / 1e6) * sampleRate // us -> s: /1e6
+      let scale
+      if (dataPointNum > 2e6) { // 2000 (points) * 1000 (resample) = 2e6
+        scale = '1000'
+      } else if (dataPointNum > 2e5) { // 2000 (points) * 100 (resample) = 2e5
+        scale = '100'
+      } else if (dataPointNum > 2e4) { // 2000 (points) * 10 (resample) = 2e4
+        scale = '10'
+      } else {
+        scale = '1'
+      }
+      let dataExist = false
+      while (dataExist === false) {
+        if (scale === '1') {
+          break
+        } else {
+          let status
+          for (const ch in Object.keys(meta.mini_data)) {
+            let earlyStopFlag = false
+            const dataIDArray = meta.mini_data[ch][scale]
+            for (let i = 0; i < dataIDArray.length; i++) {
+              const dataID = dataIDArray[i]
+              const result = await download.getMiniExistOrNotByID(dataID, ch)
+              status = result.data
+              if (status === false) {
+                earlyStopFlag = true
+                scale = String(parseInt(scale) / 10)
+                break
+              }
+            }
+            if (earlyStopFlag === true) {
+              break
+            }
+          }
+          if (status === true) {
+            dataExist = true // break
+          }
+        }
+      }
+      return scale
+    },
     drawOverviewData: async function () {
       this.showChartLoading('overview')
       for (const meta in this.dataInfo) {
@@ -244,23 +287,9 @@ export default {
             metaInfo = _meta
           }
         })
-        let scale = '100'
+        let scale = '1'
         if (this.axisXDataType.description === 'Time') {
-          const sampleRate = metaInfo.parameter_set.SAMPLE_RATE / 10
-          scale = (((parseInt(metaInfo.time_duration) / 100000) * sampleRate) / 4000) * 0.1
-          console.log(scale)
-          // console.log(metaInfo.time_duration)
-          if (scale > 500) {
-            scale = '1000'
-          } else if (scale > 200) {
-            scale = '100'
-          } else if (scale > 30) {
-            scale = '10'
-          } else {
-            scale = '1'
-          }
-        } else {
-          scale = '1' // [TODO] select by user
+          scale = await this.computeResampleScale(metaInfo, metaInfo.time_duration)
         }
         console.log('overview scale:', scale)
         // download data
@@ -305,30 +334,15 @@ export default {
           }
         })
 
-        let scale = '100'
+        let scale = '1'
         if (this.axisXDataType.description === 'Time') {
-          const sampleRate = metaInfo.parameter_set.SAMPLE_RATE / 10
-          scale = (((timeDur / 100000) * sampleRate) / 4000) * 0.1
-          console.log(scale)
-          // console.log(timeDur)
-          if (scale > 500) {
-            scale = '1000'
-          } else if (scale > 200) {
-            scale = '100'
-          } else if (scale > 30) {
-            scale = '10'
-          } else {
-            scale = '1'
-          }
-        } else {
-          scale = '1' // [TODO] select by user
+          scale = await this.computeResampleScale(metaInfo, timeDur)
         }
-        // scale = '1000'
         // elite的sample rate不像neulive這麼高，因此試試scale = 100 or 1000時不要再sampling一次了，不然有些形狀（e.g. peak）會不一樣
         if (scale === '100' || scale === '1000') {
           this.updateChartSamplingChart({ chartID: this.chartDetailData.chartID, seriesIndex: _gridNumber, method: null })
         } else {
-          this.updateChartSamplingChart({ chartID: this.chartDetailData.chartID, seriesIndex: _gridNumber, method: function (frame) { return frame[0] } })
+          this.updateChartSamplingChart({ chartID: this.chartDetailData.chartID, seriesIndex: _gridNumber, method: 'lttb' })
         }
 
         this.currentScale = scale
@@ -341,7 +355,7 @@ export default {
         const channelY = parseInt(this.axisYDataType.id)
         const dataListY = this.dataInfo[meta][channelY][scale]
 
-        const isThisModeHasCycle = this.GLOBAL.hasCycleMode(metaInfo.parameter_set.MODE)
+        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軸不為時間，抓出第一圈所在的時間段，初始化時先畫第一圈就好，加快初始時間
@@ -431,12 +445,17 @@ export default {
     },
     changeAxis (gridIndex) {
       if (this.initDone) {
+        const libName = this.metaList[gridIndex].device.library_name
         let xType
-        let xValue // 1: I, 2: V, 3: R
+        let xValue
         if (this.axisXDataType.description === 'Time') {
           xType = 'Time'
         } else {
-          xType = 'Elite'
+          if (libName === 'EliteZM15') {
+            xType = 'Elite'
+          } else if (libName === 'EliteEIS') {
+            xType = 'EliteEIS'
+          }
           xValue = this.axisXDataType.id + 1
         }
         this.updateRegisteredChart({
@@ -446,39 +465,13 @@ export default {
           deviceNameX: xType,
           deviceIDX: this.metaList[gridIndex].name,
           channelX: xValue,
-          deviceNameY: 'Elite',
+          deviceNameY: libName === 'EliteEIS' ? 'EliteEIS' : 'Elite',
           deviceIDY: '',
           channelY: this.axisYDataType.id + 1,
         })
       }
       this.drawDetailData() // reDraw
     },
-    distribute: function () {
-      // if (this.chartDetailData.grid.length === 1) {
-      //   this.chartDetailData.xAxis[0].axisLabel.show = false
-      //   this.updateGridListChart({
-      //     chartAllData: this.chartData,
-      //     chartID: this.chartDetailData.chartID,
-      //     gridLength: this.chartDetailData.series.length,
-      //   })
-      //   this.chartDetailData.series.forEach((series, index) => {
-      //     series.xAxisIndex = index
-      //     series.yAxisIndex = index
-      //   })
-      //   this.chartDetailData.xAxis[this.chartDetailData.xAxis.length - 1].axisLabel.show = true
-      // } else {
-      //   this.updateGridListChart({
-      //     chartAllData: this.chartData,
-      //     chartID: this.chartDetailData.chartID,
-      //     gridLength: 1,
-      //   })
-      //   this.chartDetailData.series.forEach(series => {
-      //     series.xAxisIndex = 0
-      //     series.yAxisIndex = 0
-      //   })
-      //   this.chartDetailData.xAxis[0].axisLabel.show = true
-      // }
-    },
     ...mapActions('replay', [types.chart.init, types.chart.register, types.chart.clear, types.chart.updateGridList, types.chart.updateDataZoom]),
     ...mapActions('replay', [types.meta.init]),
     ...mapActions('replay', [types.rec.init, types.rec.intoData, types.rec.initDisplaySetting, types.rec.updateDisplaySetting]),
@@ -489,9 +482,6 @@ export default {
     ...mapGetters('replay', [types.meta.getAll]),
     ...mapGetters('replay', [types.rec.getAll, types.rec.getCycleDict]),
   },
-  // use watch because va-select with @change will have bug
-  watch: {
-  },
   async mounted () {
     this.showChartLoading()
     const metaIDList = this.$route.params.metaList.split('-')
@@ -502,14 +492,15 @@ export default {
     console.log(this.metaList)
     console.log(this.dataInfo)
     await this.register()
-    this.drawOverviewData()
     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' })
     this.dataZoomTimer = setInterval(this.checkDataZoom, 1000)
     this.initDone = true
+    console.log(this.chartOverviewData)
     console.log(this.chartDetailData)
   },
   beforeDestroy () {
@@ -528,21 +519,3 @@ export default {
   },
 }
 </script>
-
-<style lang="scss">
-  .area-style {
-    height: auto;
-    overflow-y: hidden;
-    overflow-x: hidden;
-
-    @include media-breakpoint-only(xl) {
-      height: 88vh;
-      overflow-y: scroll;
-      overflow-x: hidden;
-    }
-  }
-
-  .layout.gutter--xl .row .flex {
-    padding: 0.4rem 0.5rem 0.1rem 0.5rem;
-  }
-</style>

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

@@ -1,20 +1,24 @@
 <template>
   <div>
     <va-card>
-      <edit-file-name style="display: inline;" :ref="'edit_file_name'"/>
-      <download-file style="display: inline;"/>
-      <delete-file style="display: inline;"/>
-      <br/>
-      <change-axis class="box_inline-block" :ref="'change_axis_x'" deviceName="elite" axis="x" @changeAxis="changeAxis" @changeUnit="changeUnit" @clearCycle="clearCycle" @resetScale="resetScale"/>
-      <change-unit class="box_inline-block" :ref="'change_unit_x'" deviceName="elite" axis="x" @refreshChart="refreshChart"/>
-      <change-scale class="box_inline-block" :ref="'change_scale_x'" deviceName="elite" axis="x" @refreshChart="refreshChart" @clearCycle="clearCycle"/>
-      <br/>
-      <change-axis class="box_inline-block" :ref="'change_axis_y'" deviceName="elite" axis="y" @changeAxis="changeAxis" @changeUnit="changeUnit" @clearCycle="clearCycle" @resetScale="resetScale"/>
-      <change-unit class="box_inline-block" :ref="'change_unit_y'" deviceName="elite" axis="y" @refreshChart="refreshChart"/>
-      <change-scale class="box_inline-block" :ref="'change_scale_y'" deviceName="elite" axis="y" @refreshChart="refreshChart" @clearCycle="clearCycle"/>
+      <div class="flex-container">
+        <edit-file-name class="flex-child" :ref="'edit_file_name'"/>
+        <download-file class="flex-child2"/>
+        <delete-file class="flex-child2"/>
+      </div>
+      <div class="flex-container">
+        <change-axis class="flex-child" :ref="'change_axis_x'" axis="x" @changeAxis="changeAxis" @changeUnit="changeUnit" @clearCycle="clearCycle" @resetScale="resetScale"/>
+        <change-unit class="flex-child2" :ref="'change_unit_x'" axis="x" @refreshChart="refreshChart"/>
+        <change-scale class="flex-child1" :ref="'change_scale_x'" axis="x" @refreshChart="refreshChart" @clearCycle="clearCycle"/>
+      </div>
+      <div class="flex-container">
+        <change-axis class="flex-child" :ref="'change_axis_y'" axis="y" @changeAxis="changeAxis" @changeUnit="changeUnit" @clearCycle="clearCycle" @resetScale="resetScale"/>
+        <change-unit class="flex-child2" :ref="'change_unit_y'" axis="y" @refreshChart="refreshChart"/>
+        <change-scale class="flex-child1" :ref="'change_scale_y'" axis="y" @refreshChart="refreshChart" @clearCycle="clearCycle"/>
+      </div>
       <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'" deviceName="elite"/>
+      <show-parameter style="margin: 3px;" :ref="'show_param'"/>
     </va-card>
   </div>
 </template>
@@ -46,6 +50,7 @@ export default {
   },
   computed: {
     ...mapFields('replay', [
+      'metaList',
       'showCyclePanel',
     ]),
   },
@@ -55,6 +60,7 @@ export default {
   },
   data () {
     return {
+      deviceName: '',
       showCycle: false,
     }
   },
@@ -62,15 +68,16 @@ export default {
   },
   methods: {
     init () {
-      this.$refs.change_axis_x.init()
-      this.$refs.change_axis_y.init()
-      this.$refs.change_unit_x.init()
-      this.$refs.change_unit_y.init()
-      this.$refs.change_scale_x.init()
-      this.$refs.change_scale_y.init()
+      this.deviceName = this.metaList[0].device.library_name
+      this.$refs.change_axis_x.init(this.deviceName)
+      this.$refs.change_axis_y.init(this.deviceName)
+      this.$refs.change_unit_x.init(this.deviceName)
+      this.$refs.change_unit_y.init(this.deviceName)
+      this.$refs.change_scale_x.init(this.deviceName)
+      this.$refs.change_scale_y.init(this.deviceName)
       this.$refs.change_cycle.init()
       this.$refs.edit_file_name.init()
-      this.$refs.show_param.init()
+      this.$refs.show_param.init(this.deviceName)
     },
     refreshChart (options) {
       this.$emit('refreshChart', options)
@@ -93,18 +100,29 @@ export default {
       this.$refs.change_scale_y.reset()
     },
   },
-  // use watch because va-select with @change will have bug
-  watch: {
-  },
   mounted () {
   },
 }
 </script>
 
 <style lang="scss">
-  .box_inline-block {
-    padding: 2px;
-    margin: 2px;
-    display: inline-block;
+  .flex-container {
+    display: flex;
+  }
+
+  .flex-child {
+    flex: 2;
+  }
+
+  .flex-child1 {
+    flex: 1;
+  }
+
+  .flex-child2 {
+    flex: 0;
+  }
+
+  .flex-child:first-child {
+    margin-right: 1px;
   }
 </style>

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

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="row row-equal">
-      <div class="flex md12 xl3 xs12 sm12 area-style">
+      <div class="flex md12 xl3 xs12 sm12">
         <div class="row">
           <div class="flex sm12 xl12 md12 xs12">
             <va-accordion>
@@ -9,7 +9,7 @@
                 <span slot="header">Control Panel</span>
                 <div slot="body">
                   <div>
-                    <top-control-panel :ref="'top_control_panel'" @refreshChart="setOption"/>
+                    <top-control-panel :ref="'top_control_panel'" @refreshChart="setOption" @changeOverviewDataZoom="changeOverviewDataZoom"/>
                   </div>
                 </div>
               </va-collapse>
@@ -18,7 +18,7 @@
         </div>
       </div>
 
-      <div :class="chartAreaClass" class="area-style">
+      <div :class="chartAreaClass">
         <div class="row" >
           <div class="flex sm12 xl12 md12 xs12">
             <neulive-replay-overview-chart :ref="'chart_overview'" class="mb-1" :cardheight="'7vh'" :data="chartOverviewData" @dataZoomEvent="dataZoomEvent($event)"/>
@@ -56,9 +56,13 @@ export default {
       'chartOverviewData',
       'chartDetailData',
       'currentScale',
+      'startTime',
+      'endTime',
+      'windowLength',
       'startTimeCurrent',
       'endTimeCurrent',
       'sampleMethod',
+      'useSdCardData',
     ]),
   },
   props: {
@@ -86,8 +90,6 @@ export default {
       metaList: null,
       dataInfo: {},
       maxTime: 0,
-      startTime: 0,
-      endTime: 0,
       zoomTime: 0,
       chartAreaClass: ['flex', 'xs12', 'sm12', 'md12', 'xl9', 'pa-0'],
       dataZoomStart: 0,
@@ -133,7 +135,12 @@ export default {
     },
     getData: async function (scale, sampleMethod, id, channel, meta) {
       if (scale === 1) {
-        return await download.rawByIDChannels(id, channel, meta)
+        // [TODO] 0: assume first meta temporarily
+        if (this.useSdCardData && (this.metaList[0].sd_data_uploaded === true)) {
+          return await download.rawSdDataByIDChannels(id, channel, meta)
+        } else {
+          return await download.rawByIDChannels(id, channel, meta)
+        }
       } else {
         if (sampleMethod === 'mean') {
           return await download.miniMeanByIDChannel(id, channel, meta)
@@ -204,7 +211,7 @@ export default {
       })
     },
     updateMarkArea: function (e) {
-      console.log(e)
+      // console.log(e)
       if (e.batch != null) {
         // console.log(e.batch)
         e.batch.forEach(dataZoom => {
@@ -239,16 +246,22 @@ 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)
         }
       }
@@ -256,7 +269,14 @@ export default {
       this.chartOverviewData.series[0].markArea.data[0][1].xAxis = this.startTime + ((this.endTime - this.startTime) * (this.dataZoomEnd / 100))
       this.zoomTime = 0
     },
-    drawOverviewData: async function () {
+    changeOverviewDataZoom () {
+      this.chartOverviewData.dataZoom[0].start = this.startTime * 100 / this.maxTime
+      this.chartOverviewData.dataZoom[0].end = this.endTime * 100 / this.maxTime
+      this.chartOverviewData.series[0].markArea.data[0][0].xAxis = this.startTime + ((this.endTime - this.startTime) * (this.dataZoomStart / 100))
+      this.chartOverviewData.series[0].markArea.data[0][1].xAxis = this.startTime + ((this.endTime - this.startTime) * (this.dataZoomEnd / 100))
+      this.$refs.chart_overview.mergeOptions(this.chartOverviewData)
+    },
+    drawInitData: async function () {
       this.showChartLoading('overview')
       for (const meta in this.dataInfo) {
         let metaInfo
@@ -265,43 +285,39 @@ export default {
             metaInfo = _meta
           }
         })
-        const sampleRate = (800000 / metaInfo.parameter_set.ADC_CLOCK)
-        let scale = (((metaInfo.time_duration / 100000) * sampleRate) / 4000) * 0.1
-        if (scale > 500) {
+        let scale = '1000'
+        const sampleRate = (metaInfo.parameter_set.SAMPLE_RATE === 0) ? parseInt(8e5 / metaInfo.parameter_set.ADC_CLOCK) : metaInfo.parameter_set.SAMPLE_RATE // Hz
+        const dataPointNum = (parseInt(metaInfo.time_duration) / 1e6) * sampleRate // us -> s: /1e6
+        if (dataPointNum > 2e6) { // 2000 (points) * 1000 (resample) = 2e6
           scale = '1000'
-        } else if (scale > 200) {
+        } else if (dataPointNum > 2e5) { // 2000 (points) * 100 (resample) = 2e5
           scale = '100'
-        } else if (scale > 30) {
+        } else if (dataPointNum > 2e4) { // 2000 (points) * 10 (resample) = 2e4
           scale = '10'
         } else {
           scale = '1'
         }
+        this.currentScale = scale
         console.log('overview scale:', scale)
         const getAllData = async function (_this) {
+          let seriesIndex = 0
           for (const ch in _this.dataInfo[meta]) {
             const dataList = _this.dataInfo[meta][ch][scale]
             for (let i = 0; i < dataList.length; i++) {
-              if (dataList[i].data.length === 0) {
-                _this.intoDataRec({
-                  index: i,
-                  metaID: meta,
-                  channel: ch,
-                  scale: scale,
-                  data: await _this.getData(parseInt(scale), _this.sampleMethod, dataList[i].id, ch, metaInfo),
-                })
-              }
+              _this.intoDataRec({
+                index: i,
+                metaID: meta,
+                channel: ch,
+                scale: scale,
+                data: await _this.getData(parseInt(scale), _this.sampleMethod, dataList[i].id, ch, metaInfo),
+              })
+              _this.chartOverviewData.series[seriesIndex].data.push(...dataList[i].data)
+              _this.chartDetailData.series[seriesIndex].data.push(...dataList[i].data)
             }
+            seriesIndex++
           }
         }
         await getAllData(this)
-        let seriesIndex = 0
-        for (const ch in this.dataInfo[meta]) {
-          const dataList = this.dataInfo[meta][ch][scale]
-          for (let i = 0; i < dataList.length; i++) {
-            this.chartOverviewData.series[seriesIndex].data.push(...dataList[i].data)
-          }
-          seriesIndex++
-        }
       }
       this.hideChartLoading()
     },
@@ -315,19 +331,21 @@ export default {
             metaInfo = _meta
           }
         })
-        const sampleRate = (800000 / metaInfo.parameter_set.ADC_CLOCK)
-        let scale = (((timeDur / 100000) * sampleRate) / 4000) * 0.1
-        if (scale > 500) {
+        let scale = '1000'
+        const sampleRate = (metaInfo.parameter_set.SAMPLE_RATE === 0) ? parseInt(8e5 / metaInfo.parameter_set.ADC_CLOCK) : metaInfo.parameter_set.SAMPLE_RATE // Hz
+        const dataPointNum = (timeDur / 1e6) * sampleRate // us -> s: /1e6
+        if (dataPointNum > 2e6) { // 2000 (points) * 1000 (resample) = 2e6
           scale = '1000'
-        } else if (scale > 200) {
+        } else if (dataPointNum > 2e5) { // 2000 (points) * 100 (resample) = 2e5
           scale = '100'
-        } else if (scale > 30) {
+        } else if (dataPointNum > 2e4) { // 2000 (points) * 10 (resample) = 2e4
           scale = '10'
         } else {
           scale = '1'
         }
         this.currentScale = scale
         let seriesIndex = 0
+        this.updateChartSamplingChart({ chartID: this.chartDetailData.chartID, seriesIndex: seriesIndex, method: function (frame) { return frame[0] } })
         for (const ch in this.dataInfo[meta]) {
           this.chartDetailData.series[seriesIndex].data.length = 0
           const dataList = this.dataInfo[meta][ch][scale]
@@ -343,12 +361,22 @@ export default {
             }
           }
           // download and push into chart
+          let endFlag = false // because data is sorted by time, so if current processed data piece exceeds endTimeCurrent, can early stop
           for (let i = startIndex; i <= endIndex; i++) {
             const data = await this.getData(parseInt(scale), this.sampleMethod, dataList[i].id, ch, metaInfo)
             for (let j = 0, len = data.length; j < len; j++) {
               if (parseInt(data[j][0]) >= this.startTimeCurrent && parseInt(data[j][0]) <= this.endTimeCurrent) {
                 this.chartDetailData.series[seriesIndex].data.push(data[j])
               }
+              // early stop
+              if (parseInt(data[j][0]) > this.endTimeCurrent) {
+                endFlag = true
+                break
+              }
+            }
+            // early stop
+            if (endFlag === true) {
+              break
             }
           }
           for (let i = 0, len = this.chartDetailData.xAxis.length; i < len; i++) {
@@ -440,7 +468,7 @@ export default {
     ...mapActions('replay', [types.meta.init]),
     ...mapActions('replay', [types.rec.init, types.rec.intoData, types.rec.initDisplaySetting, types.rec.updateDisplaySetting]),
 
-    ...mapMutations('replay', [types.chart.updateAxisLabel]),
+    ...mapMutations('replay', [types.chart.updateAxisLabel, types.chart.updateChartSampling, types.chart.setOverviewDataZoomStartAndEnd]),
     ...mapMutations('replay', [types.meta.updateByIndex]),
 
     ...mapGetters('replay', [types.meta.getAll]),
@@ -459,12 +487,13 @@ export default {
     console.log(this.metaList)
     console.log(this.dataInfo)
     await this.register()
-    this.drawOverviewData()
-    this.drawDetailData()
+    this.setOverviewDataZoomStartAndEndChart()
+    await this.drawInitData()
     this.dataZoomTimer = setInterval(this.checkDataZoom, 1000)
     this.$refs.top_control_panel.init()
     this.$refs.set_min_max.init()
     this.turnOnAxisEventHandler('click', 'yAxis.axisLabel', this.showMinMaxPanel, { axis: 'y' })
+    console.log(this.chartOverviewData)
     console.log(this.chartDetailData)
   },
   beforeDestroy () {
@@ -483,21 +512,3 @@ export default {
   },
 }
 </script>
-
-<style lang="scss">
-  .area-style {
-    height: auto;
-    overflow-y: hidden;
-    overflow-x: hidden;
-
-    @include media-breakpoint-only(xl) {
-      height: 93vh;
-      overflow-y: scroll;
-      overflow-x: hidden;
-    }
-  }
-
-  .layout.gutter--xl .row .flex {
-    padding: 0.75rem 0.5rem 0.1rem 0.5rem;
-  }
-</style>

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

@@ -54,6 +54,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/neulive/TopControlPanel.vue

@@ -1,15 +1,22 @@
 <template>
   <div>
     <va-card>
-      <edit-file-name style="display: inline;" :ref="'edit_file_name'"/>
-      <download-file style="display: inline;"/>
-      <delete-file style="display: inline;"/>
+      <div class="flex-container">
+        <edit-file-name class="flex-child" :ref="'edit_file_name'"/>
+        <download-file class="flex-child2"/>
+        <delete-file class="flex-child2"/>
+      </div>
       <show-resample-rate/>
+      <div class="flex-container">
+        <change-window-start-and-size class="flex-child" :ref="'change_window_start_and_size'" @changeOverviewDataZoom="changeOverviewDataZoom"/>
+        <lock-data-zoom class="flex-child2" :chartID="0"/>
+      </div>
       <change-axis v-show="showXAxis" :ref="'change_axis_x'" deviceName="neulive" axis="x"/>
       <change-axis v-show="showYAxis" :ref="'change_axis_y'" deviceName="neulive" axis="y"/>
       <change-unit v-show="showXUnit" :ref="'change_unit_x'" deviceName="neulive" axis="x" @refreshChart="refreshChart"/>
-      <change-unit :ref="'change_unit_y'" deviceName="neulive" axis="y" @refreshChart="refreshChart"/>
-      <change-scale :ref="'change_scale_y'" deviceName="neulive" axis="y"/>
+      <change-unit :ref="'change_unit_y'" class="box_inline-block" deviceName="neulive" axis="y" @refreshChart="refreshChart"/>
+      <change-scale :ref="'change_scale_y'" class="box_inline-block" deviceName="neulive" axis="y"/>
+      <sd-card-toggle :ref="'sd_card_toggle'" :metaIndex="0"/>
       <show-parameter :ref="'show_param'" deviceName="neulive"/>
     </va-card>
   </div>
@@ -24,6 +31,9 @@ import DownloadFile from '@/components/analysis/replay/toolbox/DownloadFile.vue'
 import DeleteFile from '@/components/analysis/replay/toolbox/DeleteFile.vue'
 import EditFileName from '@/components/analysis/replay/toolbox/EditFileName.vue'
 import ShowParameter from '@/components/analysis/replay/toolbox/ShowParameter.vue'
+import SdCardToggle from '@/components/analysis/replay/toolbox/SdCardToggle.vue'
+import LockDataZoom from '@/components/analysis/replay/toolbox/LockDataZoom.vue'
+import ChangeWindowStartAndSize from '@/components/analysis/replay/toolbox/ChangeWindowStartAndSize.vue'
 
 export default {
   name: 'top-control-panel',
@@ -36,11 +46,12 @@ export default {
     DeleteFile,
     EditFileName,
     ShowParameter,
+    SdCardToggle,
+    LockDataZoom,
+    ChangeWindowStartAndSize,
   },
   computed: {
   },
-  props: {
-  },
   async created () {
   },
   data () {
@@ -61,6 +72,11 @@ export default {
       this.$refs.change_scale_y.init()
       this.$refs.edit_file_name.init()
       this.$refs.show_param.init()
+      this.$refs.change_window_start_and_size.init()
+      this.$refs.sd_card_toggle.init()
+    },
+    changeOverviewDataZoom () {
+      this.$emit('changeOverviewDataZoom')
     },
     refreshChart (options) {
       this.$emit('refreshChart', options)
@@ -78,4 +94,29 @@ export default {
 </script>
 
 <style lang="scss">
+  .box_inline-block {
+    padding: 2px;
+    margin: 2px;
+    display: inline-block;
+  }
+
+  .flex-container {
+    display: flex;
+  }
+
+  .flex-child {
+    flex: 2;
+  }
+
+  .flex-child1 {
+    flex: 1;
+  }
+
+  .flex-child2 {
+    flex: 0;
+  }
+
+  .flex-child:first-child {
+    margin-right: 1px;
+  }
 </style>

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

@@ -2,18 +2,28 @@
   <div>
     <span> {{ axis }} axis: </span>
     <div v-if="axis === 'x'" style="display: inline;">
-      <select v-model="channelFormat" @change="changeAxis()">
+      <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>
     <div v-if="axis === 'y'" style="display: inline;">
-      <select v-model="channelFormat" @change="changeAxis()">
+      <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>
   </div>
 </template>
@@ -26,9 +36,6 @@ export default {
   components: {
   },
   props: {
-    deviceName: {
-      type: String, // elite or neulive
-    },
     axis: {
       type: String, // x or y
     },
@@ -49,7 +56,8 @@ export default {
     ]),
   },
   methods: {
-    init () {
+    init (deviceName) {
+      this.deviceName = deviceName
       if (this.deviceName === 'neulive') {
         // now neulive only v-t
         if (this.axis === 'x') {
@@ -57,9 +65,9 @@ export default {
         } else if (this.axis === 'y') {
           this.axisYDataType = this.channelOptions[1]
         }
-      } else if (this.deviceName === 'elite') {
+      } else if (this.deviceName === 'EliteZM15') {
         // use state meta to decide which default unit need to be used (like check I-V mode...)
-        const setting = this.GLOBAL.getDefaultChartTypeByMode(this.metaList[this.metaIndex].parameter_set.MODE)
+        const setting = this.GLOBAL.getDefaultChartTypeByMode(this.metaList[this.metaIndex].parameter_set.MODE, this.deviceName)
         const xType = setting[0]
         const xValue = setting[1]
         const yType = setting[2]
@@ -70,6 +78,53 @@ export default {
           settingType = xType
           settingValue = xValue
           if (settingType === 'Elite') {
+            // 1: I, 2: V, 3: R
+            if (settingValue === 1) {
+              this.axisXDataType = this.channelOptions[0]
+            } else if (settingValue === 2) {
+              this.axisXDataType = this.channelOptions[1]
+            } else if (settingValue === 3) {
+              this.axisXDataType = this.channelOptions[2]
+            } else if (settingValue === 4) {
+              this.axisXDataType = this.channelOptions[3]
+            }
+          } else if (settingType === 'Time') {
+            this.axisXDataType = this.channelOptions[4]
+          }
+          this.channelFormat = this.axisXDataType
+        } else if (this.axis === 'y') {
+          settingType = yType
+          settingValue = yValue
+          if (settingType === 'Elite') {
+            // 1: I, 2: V, 3: R
+            if (settingValue === 1) {
+              this.axisYDataType = this.channelOptions[0]
+            } else if (settingValue === 2) {
+              this.axisYDataType = this.channelOptions[1]
+            } else if (settingValue === 3) {
+              this.axisYDataType = this.channelOptions[2]
+            } else if (settingValue === 4) {
+              this.axisXDataType = this.channelOptions[3]
+            }
+          } else if (settingType === 'Time') {
+            this.axisYDataType = this.channelOptions[4]
+          }
+          this.channelFormat = this.axisYDataType
+        }
+      } else if (this.deviceName === 'EliteEIS') {
+        const setting = this.GLOBAL.getDefaultChartTypeByMode(this.metaList[this.metaIndex].parameter_set.MODE, this.deviceName)
+        const xType = setting[0]
+        const xValue = setting[1]
+        const yType = setting[2]
+        const yValue = setting[3]
+        let settingType
+        let settingValue
+        if (this.axis === 'x') {
+          settingType = xType
+          settingValue = xValue
+          if (settingType === 'EliteEIS') {
+            this.axisXDataType = this.eisChannelOptions.find(element => element.id === parseInt(settingValue) - 1)
+          } else if (settingType === 'Elite') {
             // 1: I, 2: V, 3: R
             if (settingValue === 1) {
               this.axisXDataType = this.channelOptions[0]
@@ -85,7 +140,9 @@ export default {
         } else if (this.axis === 'y') {
           settingType = yType
           settingValue = yValue
-          if (settingType === 'Elite') {
+          if (settingType === 'EliteEIS') {
+            this.axisYDataType = this.eisChannelOptions.find(element => element.id === parseInt(settingValue) - 1)
+          } else if (settingType === 'Elite') {
             // 1: I, 2: V, 3: R
             if (settingValue === 1) {
               this.axisYDataType = this.channelOptions[0]
@@ -107,8 +164,8 @@ export default {
     changeAxis () {
       if (this.deviceName === 'neulive') {
         // for elite now, cuz neulive now only have v-t graph, for future neulive replay need to adjust'
-        console.log('(Last updated: 2021/06/19)')
-      } else if (this.deviceName === 'elite') {
+        // console.log('(Last updated: 2021/06/19)')
+      } else if (this.deviceName === 'EliteZM15' || this.deviceName === 'EliteEIS') {
         if (this.axis === 'x') {
           this.axisXDataType = this.channelFormat
         } else if (this.axis === 'y') {
@@ -130,6 +187,7 @@ export default {
   },
   data () {
     return {
+      deviceName: '',
       channelFormat: {},
       channelOptions: [
         {
@@ -144,6 +202,10 @@ export default {
           id: 2,
           description: 'Resistance',
         },
+        {
+          id: 3,
+          description: 'Cycle',
+        },
         {
           id: 100, // no usage, so assign a large number to avoid conflicting with existing channel data
           description: 'Time',
@@ -162,6 +224,74 @@ export default {
           id: 2,
           description: 'Resistance',
         },
+        {
+          id: 3,
+          description: 'Cycle',
+        },
+      ],
+      eisChannelOptions: [ // id 0 (Raw Imag), 1 (Raw Real), 3 (Cycle) 不用給user選
+        {
+          id: 2,
+          description: 'Frequency',
+        },
+        {
+          id: 4,
+          description: 'Z_imag',
+        },
+        {
+          id: 5,
+          description: 'Z_real',
+        },
+        {
+          id: 6,
+          description: 'Impedance',
+        },
+        {
+          id: 7,
+          description: 'Phase',
+        },
+        {
+          id: 8,
+          description: 'Current',
+        },
+        {
+          id: 9,
+          description: 'Gain Level',
+        },
+        {
+          id: 100, // no usage, so assign a large number to avoid conflicting with existing channel data
+          description: 'Time',
+        },
+      ],
+      eisChannelYOptions: [ // id 0 (Raw Imag), 1 (Raw Real), 3 (Cycle) 不用給user選
+        {
+          id: 2,
+          description: 'Frequency',
+        },
+        {
+          id: 4,
+          description: 'Z_imag',
+        },
+        {
+          id: 5,
+          description: 'Z_real',
+        },
+        {
+          id: 6,
+          description: 'Impedance',
+        },
+        {
+          id: 7,
+          description: 'Phase',
+        },
+        {
+          id: 8,
+          description: 'Current',
+        },
+        {
+          id: 9,
+          description: 'Gain Level',
+        },
       ],
     }
   },

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

@@ -77,9 +77,10 @@ export default {
   },
   methods: {
     init () {
-      this.isThisModeHasCycle = this.GLOBAL.hasCycleMode(this.metaList[this.metaIndex].parameter_set.MODE)
       this.cycleNum = this.metaList[this.metaIndex].parameter_set.CYCLE_NUMBER
-      this.metaID = this.metaList[this.metaIndex].id
+      const meta = this.metaList[this.metaIndex]
+      this.metaID = meta.id
+      this.isThisModeHasCycle = this.GLOBAL.hasCycleMode(this.metaList[this.metaIndex].parameter_set.MODE, meta.device.library_name)
       if (this.isThisModeHasCycle === true) {
         this.showPanel = true
       } else {

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

@@ -19,9 +19,6 @@ export default {
   components: {
   },
   props: {
-    deviceName: {
-      type: String, // elite or neulive
-    },
     chartID: {
       type: Number, // detail data
       default: 1,
@@ -52,7 +49,8 @@ export default {
     ]),
   },
   methods: {
-    init () {
+    init (deviceName) {
+      this.deviceName = deviceName
       this.metaInfo = this.metaList[this.metaIndex]
       this.metaID = this.metaInfo.id
       if (this.axis === 'x') {
@@ -77,7 +75,7 @@ export default {
             this.calculateScaleHelper(gridIndex, ch)
           }
         }
-      } else if (this.deviceName === 'elite') {
+      } else if (this.deviceName === 'EliteZM15' || this.deviceName === 'EliteEIS') {
         this.calculateScaleHelper(this.metaIndex, -1) // [TODO] elite tmp use metaIndex for grid index
       }
     },
@@ -87,9 +85,9 @@ export default {
         seriesData = JSON.parse(JSON.stringify(this.chartData[this.chartID].series[gridIndex].data))
         for (let i = 0; i < seriesData.length; i++) {
           if (this.axis === 'x') {
-            seriesData[i][0] = Math.log10(Math.abs(seriesData[i][0]))
+            seriesData[i][0] = Math.log10(Math.abs(seriesData[i][0])).toFixed(8)
           } else if (this.axis === 'y') {
-            seriesData[i][1] = Math.log10(Math.abs(seriesData[i][1]))
+            seriesData[i][1] = Math.log10(Math.abs(seriesData[i][1])).toFixed(8)
           }
         }
       } else if (this.scaleFormat.description === 'Linear') {
@@ -124,13 +122,13 @@ export default {
               }
             }
           }
-        } else if (this.deviceName === 'elite') {
+        } else if (this.deviceName === 'EliteZM15' || this.deviceName === 'EliteEIS') {
           seriesData = []
 
-          const cycleNum = this.metaInfo.parameter_set.CYCLE_NUMBER
+          const isThisModeHasCycle = this.GLOBAL.hasCycleMode(this.metaInfo.parameter_set.MODE, this.deviceName)
           let startTime
           let endTime
-          if (cycleNum > 0 && this.axisXDataType.description !== 'Time') { // if有cycle的mode且目前x軸不為時間，抓出第一圈所在的時間段，初始化時先畫第一圈就好，加快初始時間
+          if (isThisModeHasCycle === true && this.axisXDataType.description !== 'Time') { // if有cycle的mode且目前x軸不為時間，抓出第一圈所在的時間段，初始化時先畫第一圈就好，加快初始時間
             const cycleDataID = 3 // recorded cycle 所在的channel index
             const dataCycleList = this.recInfo[this.metaID][cycleDataID][this.currentScale]
             const cycleDataList = []
@@ -221,6 +219,7 @@ export default {
   },
   data () {
     return {
+      deviceName: '',
       metaID: 0,
       metaInfo: null,
       scaleFormat: { id: 0, description: 'Linear' },

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

@@ -1,10 +1,15 @@
 <template>
   <div>
-    <select v-model="valueFormat" @change="changeUnit()">
+    <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>
   </div>
 </template>
 
@@ -18,9 +23,6 @@ export default {
   components: {
   },
   props: {
-    deviceName: {
-      type: String, // elite or neulive
-    },
     axis: {
       type: String, // x or y
     },
@@ -42,7 +44,25 @@ export default {
     ]),
   },
   methods: {
-    init () {
+    initDefaultUnit (axis) {
+      if (this.deviceName === 'neulive') {
+        if (axis === 'x') {
+          return this.valueFormatOptions[this.dataType].find(function (item, index, array) {
+            return item.unit === 'auto'
+          })
+        } else if (axis === 'y') {
+          return this.valueFormatOptions[this.dataType].find(function (item, index, array) {
+            return item.unit === 'uV'
+          })
+        }
+      } else if (this.deviceName === 'EliteZM15') {
+        return this.valueFormatOptions[this.dataType][0]
+      } else if (this.deviceName === 'EliteEIS') {
+        return this.eisValueFormatOptions[this.dataType][0]
+      }
+    },
+    init (deviceName) {
+      this.deviceName = deviceName
       if (this.deviceName === 'neulive') {
         // now neulive only v-t
         if (this.axis === 'x') {
@@ -50,9 +70,9 @@ export default {
         } else if (this.axis === 'y') {
           this.dataType = 'voltage'
         }
-      } else if (this.deviceName === 'elite') {
+      } else if (this.deviceName === 'EliteZM15') {
         // use state meta to decide which default unit need to be used (like check I-V mode...)
-        const setting = this.GLOBAL.getDefaultChartTypeByMode(this.metaList[this.metaIndex].parameter_set.MODE)
+        const setting = this.GLOBAL.getDefaultChartTypeByMode(this.metaList[this.metaIndex].parameter_set.MODE, this.deviceName)
         const xType = setting[0]
         const xValue = setting[1]
         const yType = setting[2]
@@ -68,6 +88,48 @@ export default {
         }
 
         if (settingType === 'Elite') {
+          // 1: I, 2: V, 3: R
+          if (settingValue === 1) {
+            this.dataType = 'current'
+          } else if (settingValue === 2) {
+            this.dataType = 'voltage'
+          } else if (settingValue === 3) {
+            this.dataType = 'resistance'
+          } else if (settingValue === 4) {
+            this.dataType = 'cycle'
+          }
+        } else if (settingType === 'Time') {
+          this.dataType = 'time'
+        }
+      } else if (this.deviceName === 'EliteEIS') {
+        const setting = this.GLOBAL.getDefaultChartTypeByMode(this.metaList[this.metaIndex].parameter_set.MODE, this.deviceName)
+        const xType = setting[0]
+        const xValue = setting[1]
+        const yType = setting[2]
+        const yValue = setting[3]
+        let settingType
+        let settingValue
+        if (this.axis === 'x') {
+          settingType = xType
+          settingValue = xValue
+        } else if (this.axis === 'y') {
+          settingType = yType
+          settingValue = yValue
+        }
+
+        if (settingType === 'EliteEIS') {
+          if (settingValue === 3) {
+            this.dataType = 'frequency'
+          } else if (settingValue === 5 || settingValue === 6 || settingValue === 7) {
+            this.dataType = 'impedance'
+          } else if (settingValue === 8) {
+            this.dataType = 'phase'
+          } else if (settingValue === 9) {
+            this.dataType = 'current'
+          } else if (settingValue === 10) {
+            this.dataType = 'default'
+          }
+        } else if (settingType === 'Elite') {
           // 1: I, 2: V, 3: R
           if (settingValue === 1) {
             this.dataType = 'current'
@@ -81,10 +143,10 @@ export default {
         }
       }
       if (this.axis === 'x') {
-        this.valueFormatX = this.valueFormatOptions[this.dataType][0]
+        this.valueFormatX = this.initDefaultUnit(this.axis)
         this.valueFormat = this.valueFormatX
       } else if (this.axis === 'y') {
-        this.valueFormatY = this.valueFormatOptions[this.dataType][0] // 0 mean use default unit
+        this.valueFormatY = this.initDefaultUnit(this.axis)
         this.valueFormat = this.valueFormatY
       }
       this.changeUnit()
@@ -107,7 +169,7 @@ export default {
             channel: parseInt(key),
           })
         }
-      } else if (this.deviceName === 'elite') {
+      } else if (this.deviceName === 'EliteZM15' || this.deviceName === 'EliteEIS') {
         this.updateAxisLabelChart({
           chartID: chartID,
           axis: this.axis,
@@ -127,6 +189,16 @@ export default {
           this.dataType = 'resistance'
         } else if (this.axisXDataType.description === 'Time') {
           this.dataType = 'time'
+        } else if (this.axisXDataType.description === 'Cycle') {
+          this.dataType = 'cycle'
+        } else if (this.axisXDataType.description === 'Frequency') {
+          this.dataType = 'frequency'
+        } else if (this.axisXDataType.description === 'Z_imag' || this.axisXDataType.description === 'Z_real' || this.axisXDataType.description === 'Impedance') {
+          this.dataType = 'impedance'
+        } else if (this.axisXDataType.description === 'Phase') {
+          this.dataType = 'phase'
+        } else if (this.axisXDataType.description === 'Gain Level') {
+          this.dataType = 'default'
         }
       } else if (this.axis === 'y') {
         if (this.axisYDataType.description === 'Current') {
@@ -135,9 +207,23 @@ export default {
           this.dataType = 'voltage'
         } else if (this.axisYDataType.description === 'Resistance') {
           this.dataType = 'resistance'
+        } else if (this.axisYDataType.description === 'Cycle') {
+          this.dataType = 'cycle'
+        } else if (this.axisYDataType.description === 'Frequency') {
+          this.dataType = 'frequency'
+        } else if (this.axisYDataType.description === 'Z_imag' || this.axisYDataType.description === 'Z_real' || this.axisYDataType.description === 'Impedance') {
+          this.dataType = 'impedance'
+        } else if (this.axisYDataType.description === 'Phase') {
+          this.dataType = 'phase'
+        } else if (this.axisYDataType.description === 'Gain Level') {
+          this.dataType = 'default'
         }
       }
-      this.valueFormat = this.valueFormatOptions[this.dataType][0]
+      if (this.deviceName === 'EliteZM15') {
+        this.valueFormat = this.valueFormatOptions[this.dataType][0]
+      } else if (this.deviceName === 'EliteEIS') {
+        this.valueFormat = this.eisValueFormatOptions[this.dataType][0]
+      }
       this.changeUnit()
     },
     // call vuex to mutate chart label formatter by unit and axis
@@ -147,6 +233,7 @@ export default {
   },
   data () {
     return {
+      deviceName: '',
       dataType: '',
       valueFormat: {},
       valueFormatOptions: { // below id: 0 mean default
@@ -206,6 +293,13 @@ export default {
             unitScale: 1000000000,
           },
         ],
+        cycle: [ // Time
+          {
+            id: 0,
+            unit: 'cycle',
+            unitScale: 1,
+          },
+        ],
         time: [ // Time
           {
             id: 0,
@@ -214,6 +308,85 @@ export default {
           },
         ],
       },
+      eisValueFormatOptions: { // below id: 0 mean default
+        default: [
+          {
+            id: 0,
+            unit: 'default',
+            unitScale: 1,
+          },
+        ],
+        current: [
+          {
+            id: 0,
+            unit: 'nA',
+            unitScale: 1,
+          },
+          {
+            id: 1,
+            unit: 'uA',
+            unitScale: 1e3,
+          },
+          {
+            id: 2,
+            unit: 'mA',
+            unitScale: 1e6,
+          },
+        ],
+        frequency: [ // Frequency
+          {
+            id: 0,
+            unit: 'mHz',
+            unitScale: 1,
+          },
+          {
+            id: 1,
+            unit: 'Hz',
+            unitScale: 1e3,
+          },
+          {
+            id: 2,
+            unit: 'kHz',
+            unitScale: 1e6,
+          },
+        ],
+        impedance: [ // Impedance
+          {
+            id: 1,
+            unit: 'Ω',
+            unitScale: 1,
+          },
+          {
+            id: 0,
+            unit: 'mΩ',
+            unitScale: 1e-3,
+          },
+          {
+            id: 2,
+            unit: 'kΩ',
+            unitScale: 1e3,
+          },
+          {
+            id: 3,
+            unit: 'MΩ',
+            unitScale: 1e6,
+          },
+        ],
+        time: [ // Time
+          {
+            id: 0,
+            unit: 'auto',
+            unitScale: 1,
+          },
+        ],
+        phase: [ // Phase
+          {
+            id: 0,
+            unit: '°',
+            unitScale: 1,
+          },
+        ],
+      },
     }
   },
   destroyed () {

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

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

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

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

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

@@ -71,20 +71,8 @@ export default {
     deleteFile: async function () {
       for (let i = 0; i < this.deleteInfoList.length; i++) {
         const deleteInfo = this.deleteInfoList[i]
-        for (const item of deleteInfo.rawChannelAndIDArrays) {
-          const channel = item[0]
-          const id = item[1]
-          await api.raw.update(channel, id, { deleted: true })
-          await api.raw.clearDel(channel, id)
-        }
-        for (const item of deleteInfo.miniChannelAndIDArrays) {
-          const channel = item[0]
-          const id = item[1]
-          await api.mini.update(channel, id, { deleted: true })
-          await api.mini.clearDel(channel, id)
-        }
         await api.meta.update(deleteInfo.metaID, { deleted: true })
-        await api.meta.clearDel(deleteInfo.metaID)
+        await api.meta.clearDel()
       }
       await this.deleteFileDone()
     },

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

@@ -32,9 +32,10 @@ export default {
     downloadCSV: async function () {
       for (let i = 0; i < this.metaList.length; i++) {
         const meta = this.metaList[i]
-        window.open('http://' + location.href.split('/')[2].split(':')[0] + '/#/download/neulive/csv/' + meta.id + '/raw/true', 'raw')
-        if (JSON.parse(meta.channels).some(el => el >= 256)) {
-          window.open('http://' + location.href.split('/')[2].split(':')[0] + '/#/download/neulive/csv/' + meta.id + '/acc/true', 'acc')
+        if (meta.device.library_name.indexOf('Elite') >= 0) {
+          window.open('http://' + location.href.split('/')[2].split(':')[0] + '/#/download/excel/' + meta.id)
+        } else if (meta.device.library_name.indexOf('Neulive') >= 0) {
+          window.open('http://' + location.href.split('/')[2].split(':')[0] + '/#/download/csv/' + meta.id)
         }
       }
     },

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

@@ -80,7 +80,7 @@ export default {
       // [TODO] 0: not sure future UX design
       const meta = this.metaList[0]
       file.clearFileList()
-      const files = await api.meta.getCollectionByParent('folder', meta.parent.folder[0])
+      const files = await api.meta.getByParent('folder', meta.parent.folder[0])
       file.updateFileList(files)
       const tmpFiles = file.getFileList()
       for (let i = 0; i < tmpFiles.length; i++) {

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

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

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

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

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

@@ -14,9 +14,6 @@ export default {
   components: {
   },
   props: {
-    deviceName: {
-      type: String, // elite or neulive
-    },
     metaIndex: {
       type: Number, // which meta file
       default: 0,
@@ -26,6 +23,7 @@ export default {
   },
   data () {
     return {
+      deviceName: '',
       content: '',
       // [region] for neulive
       ampGainOptions: [
@@ -49,34 +47,54 @@ export default {
       neuliveSampleRateOptions: [
         {
           id: 0,
-          value: 800,
+          value: 1000,
           description: '1k',
         },
         {
           id: 1,
-          value: 400,
+          value: 2000,
           description: '2k',
         },
         {
           id: 2,
-          value: 200,
+          value: 4000,
           description: '4k',
         },
         {
           id: 3,
-          value: 160,
+          value: 5000,
           description: '5k',
         },
         {
           id: 4,
-          value: 100,
+          value: 8000,
           description: '8k',
         },
         {
           id: 5,
-          value: 80,
+          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: [
         {
@@ -261,6 +279,21 @@ export default {
         },
       ],
       // [Endregion]
+      // [region] for EliteEIS
+      eisWorkingModeOptions: [
+        {
+          id: 0,
+          description: 'Potentiostatic Electrochemical Impedance Spectroscopy',
+        },
+        {
+          id: 1,
+          description: 'CV',
+        },
+        {
+          id: 2,
+          description: 'Dev Tools',
+        },
+      ],
     }
   },
   computed: {
@@ -271,7 +304,8 @@ export default {
   watch: {
   },
   methods: {
-    init () {
+    init (deviceName) {
+      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/>'
@@ -283,7 +317,7 @@ export default {
           if (!(key.includes('sti') || key.includes('STI'))) {
             let showKey = ''
             let showValue = value
-            if (key === 'RECORDING_CH' || key === 'AXIS_CH' || key === 'AMP_GAIN' || key === 'ADC_CLOCK') {
+            if (key === 'RECORDING_CH' || key === 'AXIS_CH' || key === 'AMP_GAIN' || key === 'SAMPLE_RATE') {
               if (key === 'RECORDING_CH') {
                 showKey = 'Channels'
                 // convert decimal to binary
@@ -328,7 +362,7 @@ export default {
                     showValue = this.ampGainOptions[i].description
                   }
                 }
-              } else if (key === 'ADC_CLOCK') {
+              } else if (key === 'SAMPLE_RATE') {
                 showKey = 'Sample Rate'
                 for (let i = 0; i < this.neuliveSampleRateOptions.length; i++) {
                   if (this.neuliveSampleRateOptions[i].value === value) {
@@ -412,7 +446,7 @@ 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 === 'elite') {
+      } else if (this.deviceName === 'EliteZM15') {
         for (const [key, value] of Object.entries(params)) {
           let showKey = ''
           let showValue = value
@@ -508,6 +542,84 @@ export default {
           }
           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
+          }
+          this.content += '    ' + showKey + ': ' + showValue + '<br/>'
+        }
       }
     },
   },

src/components/analysis/spike/ControlPanel.vue

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

src/components/analysis/spike/Spike.vue

@@ -0,0 +1,384 @@
+<template>
+  <div>
+    <div class="row row-equal">
+      <div class="flex md12 xl3 xs12 sm12">
+        <div class="row">
+          <div class="flex sm12 xl12 md12 xs12">
+            <va-accordion>
+              <va-collapse class="mb-2" :isOpenDefault="true">
+                <span slot="header">Control Panel</span>
+                <div slot="body">
+                  <div>
+                    <control-panel :ref="'control_panel'" @loadChartData="drawSpikeData"/>
+                  </div>
+                </div>
+              </va-collapse>
+            </va-accordion>
+          </div>
+        </div>
+      </div>
+
+      <div :class="chartAreaClass">
+        <div class="row" >
+          <div class="flex sm12 xl12 md12 xs12">
+            <spike-overview-chart :ref="'chart_overview'" :cardheight="'30vh'" :data="chartOverviewData"/>
+            <spike-chart :ref="'chart_detail'" :cardheight="'60vh'" :data="chartDetailData"/>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapActions, mapGetters, mapMutations } from 'vuex'
+import SpikeOverviewChart from './SpikeOverviewChart.vue'
+import SpikeChart from './SpikeChart.vue'
+import ControlPanel from './ControlPanel.vue'
+import api from '@/data/api/index'
+import types from '@/store/modules/analysis/spike/types'
+import { mapFields } from 'vuex-map-fields'
+import newSeries from '@/factories/chart/seriesFactory'
+
+export default {
+  name: 'spike-data-replay',
+  components: {
+    SpikeOverviewChart,
+    SpikeChart,
+    ControlPanel,
+  },
+  computed: {
+    ...mapFields('spike', [
+      'chartData',
+      'chartOverviewData',
+      'chartDetailData',
+      'metaList',
+      'selectedChannel',
+      'cutoffFreq',
+      'selectedThreshold',
+      'upperThreshold',
+      'lowerThreshold',
+      'waveLength',
+      'preThreshold',
+      'refractoryPeriod',
+    ]),
+  },
+  props: {
+  },
+  async created () {
+    this.chartOverviewData = await this.initChart({
+      chartAllData: this.chartData,
+      chartID: 0,
+      gridLength: 1,
+      type: 'overview',
+      device: 'neulive',
+      mode: 0,
+    })
+    this.chartDetailData = await this.initChart({
+      chartAllData: this.chartData,
+      chartID: 1,
+      gridLength: 1,
+      type: 'detail',
+      device: 'neulive',
+      mode: 0,
+    })
+  },
+  data () {
+    return {
+      dataInfo: {},
+      maxTime: 0,
+      chartAreaClass: ['flex', 'xs12', 'sm12', 'md12', 'xl9', 'pa-0'],
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    showChartLoading: function (chart) {
+      const loadStyle = {
+        text: '',
+        color: '#cccccc',
+        maskColor: 'rgba(255, 255, 255, 0.8)',
+        zlevel: 0,
+      }
+      switch (chart) {
+        case 'overview':
+          this.$refs.chart_overview.showLoading(loadStyle)
+          break
+        case 'detail':
+          this.$refs.chart_detail.showLoading(loadStyle)
+          break
+        default:
+          this.$refs.chart_overview.showLoading(loadStyle)
+          this.$refs.chart_detail.showLoading(loadStyle)
+          break
+      }
+    },
+    hideChartLoading: function (chart) {
+      switch (chart) {
+        case 'overview':
+          this.$refs.chart_overview.hideLoading()
+          break
+        case 'detail':
+          this.$refs.chart_detail.hideLoading()
+          break
+        default:
+          this.$refs.chart_overview.hideLoading()
+          this.$refs.chart_detail.hideLoading()
+          break
+      }
+    },
+    register: async function () {
+      const gridLength = 1
+      this.updateGridListChart({
+        chartAllData: this.chartData,
+        chartID: this.chartDetailData.chartID,
+        gridLength: gridLength,
+      })
+      const register = this.metaList.map(meta => {
+        this.registerChart({
+          chartAllData: this.chartData,
+          chartID: this.chartOverviewData.chartID,
+          gridIndex: 0,
+          deviceNameX: 'Time',
+          deviceNameY: 'Neulive',
+          deviceIDY: meta.name,
+          channelY: this.selectedChannel,
+        })
+        this.registerChart({
+          chartAllData: this.chartData,
+          chartID: this.chartDetailData.chartID,
+          gridIndex: 0,
+          deviceNameX: 'Time',
+          deviceNameY: 'Neulive',
+          deviceIDY: meta.name,
+          channelY: this.selectedChannel,
+        })
+        if (this.maxTime < parseInt(meta.time_duration)) {
+          this.maxTime = parseInt(meta.time_duration)
+        }
+      })
+      await Promise.all(register)
+
+      for (let i = 0; i < 2; i++) {
+        // ID 0 = overview, ID 1 = detail
+        this.updateAxisLabelChart({
+          chartID: i,
+          axis: 'x',
+          axisIndex: 0,
+          channel: this.selectedChannel,
+        })
+        this.updateAxisLabelChart({
+          chartID: i,
+          axis: 'y',
+          axisIndex: 0,
+          channel: this.selectedChannel,
+        })
+        this.updateDataZoomChart({
+          chartAllData: this.chartData,
+          chartID: i,
+        })
+      }
+
+      // this.updateChartSamplingChart({ chartID: this.chartOverviewData.chartID, seriesIndex: 0, method: function (frame) { return frame[0] } })
+      this.chartOverviewData.xAxis[0].min = 0
+      this.chartOverviewData.xAxis[0].max = this.maxTime
+    },
+    drawSpikeData: async function () {
+      this.showChartLoading('overview')
+      this.showChartLoading('detail')
+      for (const meta in this.dataInfo) {
+        let metaInfo
+        this.metaList.forEach(_meta => {
+          if (parseInt(_meta.id) === parseInt(meta)) {
+            metaInfo = _meta
+          }
+        })
+        const sampleRate = metaInfo.parameter_set.SAMPLE_RATE / JSON.parse(metaInfo.channels).length // Hz
+        const period = 1e6 / sampleRate
+
+        let thresholdValue
+        if (this.selectedThreshold === 'over') {
+          thresholdValue = this.upperThreshold
+        } else if (this.selectedThreshold === 'bellow') {
+          thresholdValue = this.lowerThreshold
+        }
+
+        const randomColorArray = []
+
+        // [Region] whole processed signal
+        const allSpikeData = await api.analysis.spikeDetect({
+          id: meta,
+          channel: this.selectedChannel,
+          cut_off_freq: this.cutoffFreq,
+          threshold: [
+            `'${this.selectedThreshold}'`,
+            thresholdValue,
+          ],
+          waveForm: [this.waveLength, this.preThreshold, this.refractoryPeriod],
+          ret_data_type: 'all',
+        })
+
+        this.chartOverviewData.series[0].data.length = 0
+        this.chartOverviewData.color = ['#000000'] // black
+        const splitData = allSpikeData.data.split('\n')
+        const allTimeArray = splitData[0].split(' ')
+        const allTimeArrayLength = allTimeArray.length
+        const allSignalIndexArray = splitData[1].split(' ')
+        const allSignalArray = splitData[2].split(' ')
+        const allTimeMarkIndexArray = splitData[3].split(' ')
+        for (let i = 0; i < allSignalIndexArray.length; i++) {
+          const signalIndex = parseInt(allSignalIndexArray[i])
+          this.chartOverviewData.series[0].data.push([parseInt(allTimeArray[signalIndex]), allSignalArray[i]])
+        }
+        console.log('allTimeArray', allTimeArray)
+        console.log('allSignalIndexArray', allSignalIndexArray)
+        console.log('allSignalArray', allSignalArray)
+        console.log('allTimeMarkIndexArray', allTimeMarkIndexArray)
+        this.chartOverviewData.xAxis[0].min = parseInt(allTimeArray[0])
+        this.chartOverviewData.xAxis[0].max = parseInt(allTimeArray[allTimeArrayLength - 1])
+        this.chartOverviewData.xAxis[0].axisLabel.show = true
+
+        this.chartOverviewData.series[0].markArea.data.length = 0
+        const timeMarkLength = allTimeMarkIndexArray.length
+        for (let i = 0; i < timeMarkLength; i++) {
+          // generate color array for overview markArea and detail chart series
+          const randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16) // ref: https://css-tricks.com/snippets/javascript/random-hex-color/
+          randomColorArray.push(randomColor)
+          if (Number.isInteger(parseInt(allTimeMarkIndexArray[i]))) { // cuz maybe is '' if no any match after filtering
+            const timeMarkIndex = parseInt(allTimeMarkIndexArray[i])
+
+            let startIndex = timeMarkIndex - parseInt(this.preThreshold / period)
+            let endIndex = timeMarkIndex + parseInt(this.refractoryPeriod / period)
+            if (startIndex < 0) {
+              startIndex = 0
+            }
+            if (endIndex > allTimeArrayLength - 1) {
+              endIndex = allTimeArrayLength - 1
+            }
+            const startTime = parseInt(allTimeArray[startIndex])
+            const endTime = parseInt(allTimeArray[endIndex])
+            const overviewSignal = this.chartOverviewData.series[0].data
+
+            for (let i = 0; i < overviewSignal.length; i++) {
+              if (startTime <= overviewSignal[i][0]) {
+                startIndex = i
+                break
+              }
+            }
+            for (let i = 0; i < overviewSignal.length; i++) {
+              if (endTime <= overviewSignal[i][0]) {
+                endIndex = i
+                break
+              }
+            }
+            this.chartOverviewData.series[0].markArea.data.push([
+              {
+                itemStyle: {
+                  color: randomColor,
+                },
+                name: String(i + 1),
+                xAxis: overviewSignal[startIndex][0],
+              },
+              {
+                xAxis: overviewSignal[endIndex][0],
+              },
+            ])
+          }
+        }
+        // [EndRegion]
+
+        // [Region] each detailed signal piece
+        const spikeData = await api.analysis.spikeDetect({
+          id: meta,
+          channel: this.selectedChannel,
+          cut_off_freq: this.cutoffFreq,
+          threshold: [
+            `'${this.selectedThreshold}'`,
+            thresholdValue,
+          ],
+          waveForm: [this.waveLength, this.preThreshold, this.refractoryPeriod],
+          ret_data_type: 'partial',
+        })
+
+        for (let i = 0; i < this.chartDetailData.series.length; i++) {
+          this.chartDetailData.series[i].name = ''
+          this.chartDetailData.series[i].data.length = 0
+        }
+        const detailSignalArray = Object.values(spikeData.data)
+        if (detailSignalArray.length <= 8) {
+          this.chartDetailData.tooltip.show = true
+        } else {
+          this.chartDetailData.tooltip.show = false
+        }
+        this.chartDetailData.legend.data.length = 0
+        this.chartDetailData.legend.type = 'scroll'
+        this.chartDetailData.legend.top = '0.25%'
+        // this.chartDetailData.legendpageButtonPosition = 'start'
+        this.chartDetailData.animation = false
+        this.chartDetailData.color = []
+        for (let i = 0; i < detailSignalArray.length; i++) {
+          const detailSignal = detailSignalArray[i].split(' ')
+          const arrayLength = detailSignal.length
+          const step = parseInt(this.waveLength) / (arrayLength - 1)
+          const xAxisIndex = 0
+          const yAxisIndex = 0
+          const legendName = 'T_' + String(i + 1)
+          if (this.chartDetailData.series.length <= i) {
+            const _series = newSeries('line', legendName, xAxisIndex, yAxisIndex, [-1, -1], [metaInfo.name, this.selectedChannel], null, null)
+            this.chartDetailData.series.push(_series)
+          }
+          for (let j = 0; j < arrayLength; j++) {
+            this.chartDetailData.series[i].data.push([j * step, detailSignal[j]])
+          }
+          // push legendName
+          this.chartDetailData.legend.data.push(legendName)
+          this.chartDetailData.series[i].name = legendName
+          // set legend and series color
+          this.chartDetailData.color.push(randomColorArray[i])
+        }
+        this.chartDetailData.xAxis[0].min = 0
+        this.chartDetailData.xAxis[0].max = parseInt(this.waveLength)
+        this.chartDetailData.xAxis[0].axisLabel.show = true
+        // [EndRegion]
+      }
+      this.hideChartLoading()
+      console.log(this.chartOverviewData)
+      console.log(this.chartDetailData)
+    },
+    ...mapActions('spike', [types.chart.init, types.chart.initSelectedChannel, types.chart.register, types.chart.clear, types.chart.updateGridList, types.chart.updateDataZoom]),
+    ...mapActions('spike', [types.meta.init]),
+    ...mapActions('spike', [types.rec.init, types.rec.intoData, types.rec.initDisplaySetting, types.rec.updateDisplaySetting]),
+
+    ...mapMutations('spike', [types.chart.updateAxisLabel, types.chart.updateChartSampling]),
+    ...mapMutations('spike', [types.meta.updateByIndex]),
+
+    ...mapGetters('spike', [types.meta.getAll]),
+    ...mapGetters('spike', [types.rec.getAll]),
+  },
+  // use watch because va-select with @change will have bug
+  watch: {
+  },
+  async mounted () {
+    const metaIDList = this.$route.params.metaList.split('-')
+    await this.initMeta({ metaIDList: metaIDList, api: api })
+    this.metaList = this.getAllMeta()
+    this.initSelectedChannelChart({ metaIndex: 0 })
+    await this.initRec({ api: api })
+    this.dataInfo = this.getAllRec()
+    console.log(this.metaList)
+    console.log(this.dataInfo)
+    await this.register()
+    this.$refs.control_panel.init()
+  },
+  beforeDestroy () {
+    this.$refs.chart_detail.clear()
+    for (const id in this.chartData) {
+      for (const _series of this.chartData[id].series) {
+        _series.length = 0
+      }
+      delete this.chartData[id]
+    }
+    this.clearChart({ chartAllData: this.chartData })
+  },
+}
+</script>

src/components/analysis/spike/SpikeChart.vue

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

src/components/analysis/spike/SpikeOverviewChart.vue

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

src/components/download/Download.vue

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

src/components/download/_Download.vue

@@ -0,0 +1,589 @@
+<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/download/elite/csv/EliteDownloadCsv.vue

@@ -1,159 +0,0 @@
-<template>
-  <div>
-  </div>
-</template>
-
-<script>
-import api from '@/data/api/index'
-import types from '@/store/modules/file/elite/csv/types'
-import { mapActions, mapGetters, mapMutations } from 'vuex'
-// import { FulfillingBouncingCircleSpinner } from 'epic-spinners'
-
-export default {
-  name: 'Download',
-  components: {
-    // FulfillingBouncingCircleSpinner,
-  },
-  data: () => {
-    return {
-      controllerList: [],
-      spliceDataNumsLimit: 20,
-    }
-  },
-  computed: {
-    getByIndex (index) {
-      return this.getByIndexDownload(index)
-    },
-    getDownloading () {
-      return this.getDownloadingDownload()
-    },
-    getRemainIDLength (index) {
-      return this.getRemainIDLengthDownload(index)
-    },
-  },
-  methods: {
-    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/+')
-      })
-    },
-    notify (name) {
-      this.showToast(`done ${name}`, {
-        position: 'bottom-right',
-      })
-    },
-    ...mapActions('eliteCsv',
-      [
-        types.download.init,
-        types.download.rawDataByIDs,
-        types.export.createHeadersString,
-        types.export.createTitlesString,
-        types.export.createDataString,
-        types.export.closeFileStream,
-      ],
-    ),
-    ...mapMutations('eliteCsv',
-      [
-        types.download.setDownloading,
-        types.download.removeDownloadBuffer,
-      ],
-    ),
-    ...mapGetters('eliteCsv',
-      [
-        types.download.getByIndex,
-        types.download.getDownloading,
-        types.download.getAll,
-        types.download.getRemainIDLength,
-      ],
-    ),
-  },
-  watch: {
-  },
-  async mounted () {
-    await this.getControllerList()
-    // TODO authorization
-    this.pageMqttSub()
-
-    const metaIDList = this.$route.params.metaList.split('-')
-    const recoverData = this.$route.params.recover
-    await this.initDownload({ metaIDList: metaIDList, api: api })
-
-    // let first file download in download List
-    this.setDownloadingDownload()
-
-    const downloadingFile = this.getDownloading
-    downloadingFile.recoverData = recoverData
-    let spliceDataNums = 0
-    // console.log('downloadingFile', downloadingFile)
-    // console.log(this.getRemainIDLength(0))
-
-    // create headers and title
-    this.createHeadersStringExport()
-    this.createTitlesStringExport()
-    // loop until each channel's rawID List empty
-    while (this.getRemainIDLength(0)) {
-      // forEach channel in raw_data
-      for (const channel in downloadingFile.raw_data) {
-        // get spliceDataNumsLimit numbers of ID to download once time
-        if (downloadingFile.raw_data[channel].length >= this.spliceDataNumsLimit) {
-          spliceDataNums = this.spliceDataNumsLimit
-        } else {
-          spliceDataNums = downloadingFile.raw_data[channel].length
-        }
-        const rawID = downloadingFile.raw_data[channel].splice(0, spliceDataNums)
-        // console.log('rawID', channel, rawID)
-        // download data and save into dataBuffer by rawDataIDList
-        await this.rawDataByIDsDownload({
-          channel: channel,
-          rawDataIDList: rawID,
-          api: api,
-        })
-      }
-      // export data
-      this.createDataStringExport()
-      // this.removeDownloadBufferDownload()
-    }
-    this.closeFileStreamExport()
-  },
-  destroyed () {
-    this.pageMqttUnSub()
-  },
-}
-</script>
-<style>
-  .filter-button {
-    text-align: center;
-  }
-</style>

src/components/download/elite/excel/EliteDownloadExcel.vue

@@ -1,216 +0,0 @@
-<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>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import api from '@/data/api/index'
-import types from '@/store/modules/file/elite/excel/types'
-import { mapActions, mapGetters, mapMutations } from 'vuex'
-// 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 {
-      controllerList: [],
-    }
-  },
-  computed: {
-    getByIndex (index) {
-      return this.getByIndexDownload(index)
-    },
-    getDownloading () {
-      return this.getDownloadingDownload()
-    },
-    getRemainIDLength (index) {
-      return this.getRemainIDLengthDownload(index)
-    },
-    // transTime (min,max) {
-    //   return this.getTimeInFormat(min) + ' - ' + this.getTimeInFormat(max)
-    // },
-    loaded () {
-      return this.loadingPercent + '%'
-    },
-  },
-  methods: {
-    transTime (timeRange) {
-      return this.getTimeInFormat(timeRange[0]) + ' - ' + this.getTimeInFormat(timeRange[1])
-    },
-    notify (name) {
-      this.showToast(`done ${name}`, {
-        position: 'bottom-right',
-      })
-    },
-    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/+')
-      })
-    },
-
-    ...mapActions('eliteExcel',
-      [
-        types.download.init,
-        types.download.rawDataByIDs,
-        types.export.createHeadersString,
-        types.export.createTitlesString,
-        types.export.createDataString,
-        types.export.closeFileStream,
-      ],
-    ),
-    ...mapMutations('eliteExcel',
-      [
-        types.download.setDownloading,
-        types.download.removeDownloadBuffer,
-      ],
-    ),
-    ...mapGetters('eliteExcel',
-      [
-        types.download.getByIndex,
-        types.download.getDownloading,
-        types.download.getAll,
-        types.download.getRemainIDLength,
-      ],
-    ),
-  },
-  openPortal () {
-    this.windowRef = window.open('', '', 'width=600,height=400,left=200,top=200')
-    this.windowRef.document.body.appendChild(this.$el)
-    // copyStyles(window.document, this.windowRef.document)
-    this.windowRef.addEventListener('beforeunload', this.closePortal)
-  },
-  closePortal () {
-    if (this.windowRef) {
-      this.windowRef.close()
-      this.windowRef = null
-      this.$emit('close')
-    }
-  },
-  // watch: {
-  //   loadingPercent(val) {
-  //     if (val >= 100) {
-  //       console.log('complete');
-  //       clearInterval(this.interval)
-  //     }
-  //   }
-  // },
-  async mounted () {
-    await this.getControllerList()
-    // TODO authorization
-    this.pageMqttSub()
-
-    const metaIDList = this.$route.params.metaList.split('-')
-    await this.initDownload({ metaIDList: metaIDList, api: api })
-    this.setDownloadingDownload()
-
-    const downloadingFile = this.getDownloading
-
-    // create headers and title
-    this.createHeadersStringExport()
-    this.createTitlesStringExport()
-
-    // let spliceDataNums = 0
-    let rowIndex = 0
-    // let columnIndex = 0
-    // // while (this.getRemainIDLength(0)) {
-    while (rowIndex < downloadingFile.needRows) {
-      for (const channel in downloadingFile.downloadIDList) {
-        const rawID = downloadingFile.downloadIDList[channel][rowIndex]
-        // console.log('rawID', channel, rawID)
-        if (rawID !== undefined) {
-          await this.rawDataByIDsDownload({
-            channel: channel,
-            rawDataIDList: rawID,
-            api: api,
-          })
-        }
-      }
-      rowIndex += 1
-      this.createDataStringExport({ lastPartData: (rowIndex === downloadingFile.needRows) })
-      // this.removeDownloadBufferDownload()
-      // console.log('end', downloadingFile)
-    }
-    this.closeFileStreamExport()
-    await new Promise(resolve => setTimeout(resolve, 2000)) // sleep
-    window.close()
-    // }
-    //     if (downloadingFile.raw_data[channel].length >= 10) {
-    //       spliceDataNums = 10
-    //     } else {
-    //       spliceDataNums = downloadingFile.raw_data[channel].length
-    //     }
-    //     const rawID = downloadingFile.raw_data[channel].splice(0, spliceDataNums)
-    //     console.log('rawID', channel, rawID)
-    //     await this.rawDataByIDsDownload({
-    //       channel: channel,
-    //       rawDataIDList: rawID,
-    //       api: api,
-    //     })
-    //   }
-    //   // console.log('end', downloadingFile)
-    //   // export data
-    //   this.createDataStringExport({})
-    //   this.removeDownloadBufferDownload()
-    // }
-    // const rawData = await download.getAllRawDatas(meta.data[0])
-    // exportData.exportCSV(meta.data[0], rawData)
-    // await this.initMeta({ metaIDList: metaIDList, api: api })
-  },
-  destroyed () {
-    this.pageMqttUnSub()
-  },
-}
-</script>
-<style>
-  .filter-button {
-    text-align: center;
-  }
-</style>

src/components/download/neulive/csv/NeuliveDownloadCsv.vue

@@ -1,178 +0,0 @@
-<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>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import api from '@/data/api/index'
-import types from '@/store/modules/file/neulive/csv/types'
-import { mapActions, mapGetters, mapMutations } from 'vuex'
-import { FulfillingBouncingCircleSpinner } from 'epic-spinners'
-
-export default {
-  name: 'Download',
-  components: {
-    FulfillingBouncingCircleSpinner,
-  },
-  data: () => {
-    return {
-      controllerList: [],
-      spliceDataNumsLimit: 1,
-    }
-  },
-  computed: {
-    getByIndex (index) {
-      return this.getByIndexDownload(index)
-    },
-    getDownloading () {
-      return this.getDownloadingDownload()
-    },
-    getRemainIDLength (index) {
-      return this.getRemainIDLengthDownload(index)
-    },
-  },
-  methods: {
-    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/+')
-      })
-    },
-    notify (name) {
-      this.showToast(`done ${name}`, {
-        position: 'bottom-right',
-      })
-    },
-    ...mapActions('neuliveCsv',
-      [
-        types.download.init,
-        types.download.rawDataByIDs,
-        types.export.createHeadersString,
-        types.export.createTitlesString,
-        types.export.createDataString,
-        types.export.closeFileStream,
-      ],
-    ),
-    ...mapMutations('neuliveCsv',
-      [
-        types.download.setDownloading,
-        types.download.removeDownloadBuffer,
-      ],
-    ),
-    ...mapGetters('neuliveCsv',
-      [
-        types.download.getByIndex,
-        types.download.getDownloading,
-        types.download.getAll,
-        types.download.getRemainIDLength,
-      ],
-    ),
-  },
-  watch: {
-  },
-  async mounted () {
-    await this.getControllerList()
-    // TODO authorization
-    this.pageMqttSub()
-
-    const metaIDList = this.$route.params.metaList.split('-')
-    const recoverData = this.$route.params.recover
-    const rawData = this.$route.params.rawData
-    await this.initDownload({ metaIDList: metaIDList, api: api })
-
-    // let first file download in download List
-    this.setDownloadingDownload()
-
-    const downloadingFile = this.getDownloading
-    downloadingFile.recoverData = recoverData
-    let spliceDataNums = 0
-    // console.log(this.getRemainIDLength(0))
-
-    const channelArray = Object.keys(downloadingFile.raw_data)
-    const filterChannelArray = (rawData === 'acc') ? channelArray.filter(ch => parseInt(ch) >= 256) : channelArray.filter(ch => parseInt(ch) < 256)
-
-    // create headers and title
-    this.createHeadersStringExport()
-    this.createTitlesStringExport({ rawData: rawData })
-    // loop until each channel's rawID List empty
-    while (this.getRemainIDLength(0, filterChannelArray)) {
-      const lastPartData = ((this.getRemainIDLength(0, filterChannelArray) - this.spliceDataNumsLimit) <= 0)
-      // forEach channel in raw_data
-      for (const channel of filterChannelArray) {
-        // get spliceDataNumsLimit numbers of ID to download once time
-        if (downloadingFile.raw_data[channel].length >= this.spliceDataNumsLimit) {
-          spliceDataNums = this.spliceDataNumsLimit
-        } else {
-          spliceDataNums = downloadingFile.raw_data[channel].length
-        }
-        const rawID = downloadingFile.raw_data[channel].splice(0, spliceDataNums)
-        // download data and save into dataBuffer by rawDataIDList
-        await this.rawDataByIDsDownload({
-          channel: channel,
-          rawDataIDList: rawID,
-          api: api,
-        })
-      }
-      // export data
-      this.createDataStringExport({ lastPartData: lastPartData, rawData: rawData })
-      // if (this.spliceDataNumsLimit <= 10) {
-      //   this.spliceDataNumsLimit += 1
-      // }
-      // console.log('removeNeuliveCSV')
-      // this.removeDownloadBufferDownload()
-    }
-    this.closeFileStreamExport()
-    await new Promise(resolve => setTimeout(resolve, 2000)) // sleep
-    window.close()
-  },
-  destroyed () {
-    this.pageMqttUnSub()
-  },
-}
-</script>
-<style>
-  .filter-button {
-    text-align: center;
-  }
-</style>

src/components/download/neulive/excel/NeuliveDownloadExcel.vue

@@ -1,207 +0,0 @@
-<template>
-  <div>
-  </div>
-</template>
-
-<script>
-import api from '@/data/api/index'
-import types from '@/store/modules/file/neulive/excel/types'
-import { mapActions, mapGetters, mapMutations } from 'vuex'
-// 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 {
-      controllerList: [],
-    }
-  },
-  computed: {
-    getByIndex (index) {
-      return this.getByIndexDownload(index)
-    },
-    getDownloading () {
-      return this.getDownloadingDownload()
-    },
-    getRemainIDLength (index) {
-      return this.getRemainIDLengthDownload(index)
-    },
-    // transTime (min,max) {
-    //   return this.getTimeInFormat(min) + ' - ' + this.getTimeInFormat(max)
-    // },
-    loaded () {
-      return this.loadingPercent + '%'
-    },
-  },
-  methods: {
-    transTime (timeRange) {
-      return this.getTimeInFormat(timeRange[0]) + ' - ' + this.getTimeInFormat(timeRange[1])
-    },
-    notify (name) {
-      this.showToast(`done ${name}`, {
-        position: 'bottom-right',
-      })
-    },
-    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/+')
-      })
-    },
-
-    ...mapActions('neuliveExcel',
-      [
-        types.download.init,
-        types.download.rawDataByIDs,
-        types.export.createHeadersString,
-        types.export.createTitlesString,
-        types.export.createDataString,
-        types.export.closeFileStream,
-      ],
-    ),
-    ...mapMutations('neuliveExcel',
-      [
-        types.download.setDownloading,
-        types.download.removeDownloadBuffer,
-      ],
-    ),
-    ...mapGetters('neuliveExcel',
-      [
-        types.download.getByIndex,
-        types.download.getDownloading,
-        types.download.getAll,
-        types.download.getRemainIDLength,
-      ],
-    ),
-  },
-  openPortal () {
-    this.windowRef = window.open('', '', 'width=600,height=400,left=200,top=200')
-    this.windowRef.document.body.appendChild(this.$el)
-    // copyStyles(window.document, this.windowRef.document)
-    this.windowRef.addEventListener('beforeunload', this.closePortal)
-  },
-  closePortal () {
-    if (this.windowRef) {
-      this.windowRef.close()
-      this.windowRef = null
-      this.$emit('close')
-    }
-  },
-  // watch: {
-  //   loadingPercent(val) {
-  //     if (val >= 100) {
-  //       console.log('complete');
-  //       clearInterval(this.interval)
-  //     }
-  //   }
-  // },
-  async mounted () {
-    await this.getControllerList()
-    // TODO authorization
-    this.pageMqttSub()
-
-    const metaIDList = this.$route.params.metaList.split('-')
-    await this.initDownload({ metaIDList: metaIDList, api: api })
-    this.setDownloadingDownload()
-
-    const downloadingFile = this.getDownloading
-
-    console.log('downloadingFile', downloadingFile)
-    console.log(this.getRemainIDLength(0))
-
-    // create headers and title
-    this.createHeadersStringExport()
-    this.createTitlesStringExport()
-
-    // let spliceDataNums = 0
-    let rowIndex = 0
-    // let columnIndex = 0
-    // // while (this.getRemainIDLength(0)) {
-    while (rowIndex < downloadingFile.needRows) {
-      for (const channel in downloadingFile.downloadIDList) {
-        const rawID = downloadingFile.downloadIDList[channel][rowIndex]
-        // console.log('rawID', channel, rawID)
-        if (rawID !== undefined) {
-          await this.rawDataByIDsDownload({
-            channel: channel,
-            rawDataIDList: rawID,
-            api: api,
-          })
-        }
-      }
-      this.createDataStringExport()
-      this.removeDownloadBufferDownload()
-      // console.log('end', downloadingFile)
-      rowIndex += 1
-    }
-    this.closeFileStreamExport()
-    // }
-    //     if (downloadingFile.raw_data[channel].length >= 10) {
-    //       spliceDataNums = 10
-    //     } else {
-    //       spliceDataNums = downloadingFile.raw_data[channel].length
-    //     }
-    //     const rawID = downloadingFile.raw_data[channel].splice(0, spliceDataNums)
-    //     console.log('rawID', channel, rawID)
-    //     await this.rawDataByIDsDownload({
-    //       channel: channel,
-    //       rawDataIDList: rawID,
-    //       api: api,
-    //     })
-    //   }
-    //   // console.log('end', downloadingFile)
-    //   // export data
-    //   this.createDataStringExport({})
-    //   this.removeDownloadBufferDownload()
-    // }
-    // const rawData = await download.getAllRawDatas(meta.data[0])
-    // exportData.exportCSV(meta.data[0], rawData)
-    // await this.initMeta({ metaIDList: metaIDList, api: api })
-  },
-  destroyed () {
-    this.pageMqttUnSub()
-  },
-}
-</script>
-<style>
-  .filter-button {
-    text-align: center;
-  }
-</style>

src/components/file/File.vue

@@ -1,13 +1,6 @@
 <template>
   <div>
-    <div class="row">
-      <div class="flex md12 xl12 xs12 sm12" :style="AreaStyle">
-        <file-table :ref="'file_ref'" @download="addDownloadTask"/>
-      </div>
-      <div class="flex md12 xl12 xs12 sm12" :style="AreaStyle">
-        <!-- <download :ref="'download_ref'" @download="downloadingFile"></download> -->
-      </div>
-    </div>
+    <file-table :ref="'file_ref'"/>
   </div>
 </template>
 
@@ -24,11 +17,6 @@ export default {
   data () {
     return {
       controllerList: [],
-      AreaStyle: {
-        height: 'auto',
-        'overflow-y': 'hidden',
-        'overflow-x': 'hidden',
-      },
     }
   },
   methods: {
@@ -78,7 +66,7 @@ export default {
           this.$refs.file_ref.currentInfo = initCollection.data[0]
 
           const folders = await api.collection.getByParent('folder', initCollection.data[0].id)
-          const files = await api.meta.getCollectionByParent('folder', initCollection.data[0].id)
+          const files = await api.meta.getByParent('folder', initCollection.data[0].id)
           file.updateFileList(folders)
           file.updateFileList(files)
 
@@ -92,6 +80,7 @@ export default {
   async mounted () {
     await this.getControllerList()
     await api.auth.getJwtData()
+    console.log(await api.meta.getByParentWithLimit('folder', 2, 5, 0, 'DESC'))
     this.pageMqttSub()
     this.pageInitPub()
   },
@@ -102,5 +91,3 @@ export default {
   },
 }
 </script>
-<style lang="scss">
-</style>

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

@@ -173,15 +173,24 @@
           {{transDeviceInfo(props.rowData.configuration)}}
         </template>
         <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" :meta="props.rowData" :uuidList="SDuuidList" @refreshPage="refreshPage" @downloadSdCard="downloadSdCard"/>
+          </va-popover>
           <va-popover :message="`download ${props.rowData.name} in csv format`" placement="top">
             <va-button flat small color="gray" icon="fa fa-download" v-if="props.rowData.type !== 'folder' && props.rowData.device.library_name.indexOf('Neulive') >= 0" @click.stop="downloadCsv(props.rowData)"/>
           </va-popover>
           <va-popover :message="`download ${props.rowData.name} in excel format`" placement="top">
-            <va-button flat small color="gray" icon="fa fa-download" v-if="props.rowData.type !== 'folder'" @click.stop="downloadExcel(props.rowData)"/>
+            <va-button flat small color="gray" icon="fa fa-download" v-if="props.rowData.type !== 'folder' && props.rowData.device.library_name.indexOf('Elite') >= 0" @click.stop="downloadExcel(props.rowData)"/>
+          </va-popover>
+          <va-popover :message="`download ${props.rowData.name} in csv-edf format`" placement="top">
+            <va-button flat small color="gray" icon="fa fa-download" v-if="props.rowData.type !== 'folder' && props.rowData.device.library_name.indexOf('Neulive') >= 0" @click.stop="downloadExcel(props.rowData)"/>
           </va-popover>
           <va-popover :message="`replay ${props.rowData.name}`" placement="top">
             <va-button flat small color="gray" icon="fa fa-eye" v-if="props.rowData.type !== 'folder'" @click.stop="replay(props.rowData)"/>
           </va-popover>
+          <va-popover :message="`spike ${props.rowData.name}`" placement="top">
+            <va-button flat small color="gray" icon="fa fa-filter" v-if="props.rowData.type !== 'folder' && props.rowData.device.library_name.indexOf('Neulive') >= 0" @click.stop="spike(props.rowData)"/>
+          </va-popover>
           <va-popover :message="`edit ${props.rowData.name}`" placement="top">
             <va-button flat small color="gray" icon="fa fa-pencil" @click.stop="editFileConfirm(props.rowData)"/>
           </va-popover>
@@ -199,16 +208,18 @@ import { debounce } from 'lodash'
 import { file } from '../../../data/file/File'
 import { FulfillingBouncingCircleSpinner } from 'epic-spinners'
 import api from '../../../data/api/index'
+import SdCardButton from '../sdcard/SdCardButton.vue'
 
 export default {
   name: 'FileTable',
   components: {
     FulfillingBouncingCircleSpinner,
+    SdCardButton,
   },
   data () {
     return {
       term: null,
-      perPage: '160',
+      perPage: '80',
       perPageOptions: ['20', '40', '80', '160'],
 
       fileLists: [],
@@ -255,6 +266,7 @@ export default {
           height: '2rem',
         },
       },
+      SDuuidList: [],
     }
   },
   computed: {
@@ -310,7 +322,7 @@ export default {
         {
           name: '__slot:actions',
           dataClass: 'text-right',
-          width: '20%',
+          width: '25%',
         },
       ]
     },
@@ -380,7 +392,7 @@ export default {
 
         // call getfolder api and update
         const folders = await api.collection.getByParent('folder', info.id)
-        const files = await api.meta.getCollectionByParent('folder', info.id)
+        const files = await api.meta.getByParent('folder', info.id)
         file.updateFileList(folders)
         file.updateFileList(files)
 
@@ -400,7 +412,7 @@ export default {
         this.currentInfo = item
         // call getfolder api and update
         const folders = await api.collection.getByParent('folder', item.id)
-        const files = await api.meta.getCollectionByParent('folder', item.id)
+        const files = await api.meta.getByParent('folder', item.id)
         file.updateFileList(folders)
         file.updateFileList(files)
 
@@ -421,7 +433,7 @@ export default {
       if (initCollection.data.length === 1) {
         this.currentInfo = initCollection.data[0]
         const folders = await api.collection.getByParent('folder', initCollection.data[0].id)
-        const files = await api.meta.getCollectionByParent('folder', initCollection.data[0].id)
+        const files = await api.meta.getByParent('folder', initCollection.data[0].id)
         file.updateFileList(folders)
         file.updateFileList(files)
         this.fileLists = file.getFileList()
@@ -554,20 +566,8 @@ export default {
       }
     },
     async deleteSingleFileByDeleteInfo () {
-      for (const item of this.deleteInfo.rawChannelAndIDArrays) {
-        const channel = item[0]
-        const id = item[1]
-        await api.raw.update(channel, id, { deleted: true })
-        await api.raw.clearDel(channel, id)
-      }
-      for (const item of this.deleteInfo.miniChannelAndIDArrays) {
-        const channel = item[0]
-        const id = item[1]
-        await api.mini.update(channel, id, { deleted: true })
-        await api.mini.clearDel(channel, id)
-      }
       await api.meta.update(this.deleteInfo.metaID, { deleted: true })
-      await api.meta.clearDel(this.deleteInfo.metaID)
+      await api.meta.clearDel()
     },
     deleteFileConfirm: function (info) {
       this.fillDeleteInfo(info)
@@ -621,7 +621,7 @@ export default {
 
         // call getfolder api and update
         const folders = await api.collection.getByParent('folder', this.currentInfo.id)
-        const files = await api.meta.getCollectionByParent('folder', this.currentInfo.id)
+        const files = await api.meta.getByParent('folder', this.currentInfo.id)
         file.updateFileList(folders)
         file.updateFileList(files)
 
@@ -654,25 +654,35 @@ 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/elite/csv/' + meta.id)
+        window.open('http://' + href + '/#/download/csv/' + meta.id)
       } else if (meta.device.library_name.indexOf('Neulive') >= 0) {
-        window.open('http://' + href + '/#/download/neulive/csv/' + meta.id + '/raw', 'raw')
-        if (JSON.parse(meta.channels).some(el => el >= 256)) {
-          window.open('http://' + href + '/#/download/neulive/csv/' + meta.id + '/acc', 'acc')
-        }
+        window.open('http://' + href + '/#/download/csv/' + meta.id)
       }
     },
     downloadExcel: async function (meta) {
       const href = location.href.split('/')[2]
       if (meta.device.library_name.indexOf('Elite') >= 0) {
-        window.open('http://' + href + '/#/download/elite/excel/' + meta.id)
+        window.open('http://' + href + '/#/download/excel/' + meta.id)
       } else if (meta.device.library_name.indexOf('Neulive') >= 0) {
-        window.open('http://' + href + '/#/download/neulive/csv/' + meta.id + '/raw/true', 'raw')
-        if (JSON.parse(meta.channels).some(el => el >= 256)) {
-          window.open('http://' + href + '/#/download/neulive/csv/' + meta.id + '/acc/true', 'acc')
-        }
+        window.open('http://' + href + '/#/download/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')
+      }
+    },
+    async getSDuuidList () {
+      // const uuidList = ['32abdb14-fc0c-11eb-9aa8-dca6326cbc6b', '940ca938-f662-11eb-8a41-dca6326cbc6b']
+      let uuidList = []
+      const ret = await api.sdcard.getuuidList()
+      if (ret.status === 200) {
+        uuidList = ret.data.split(' ')
+      }
+
+      return uuidList
+    },
     replay: function (meta) {
       if (meta.device.library_name.includes('Neulive') === true) {
         // window.open('http://' + location.href.split('/')[2].split(':')[0] + '/#/admin/data-replay/' + meta.id)
@@ -686,8 +696,16 @@ export default {
         })
       }
     },
+    spike: function (meta) {
+      if (meta.device.library_name.includes('Neulive') === true) {
+        this.$router.push({
+          path: '/admin/data-spike/' + meta.id,
+        })
+      }
+    },
   },
-  mounted () {
+  async mounted () {
+    this.SDuuidList = await this.getSDuuidList()
   },
   destroyed () {
   },

src/components/file/sdcard/SdCardApiAction.vue

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

src/components/file/sdcard/SdCardButton.vue

@@ -0,0 +1,106 @@
+<template>
+  <div>
+    <!-- recorded = false, no icon; recorded = true, gray icon; uploaded = true, blue icon; in uuid list: gray icon + red exclam -->
+    <va-button
+      flat
+      small
+      :color="meta.sd_data_uploaded === true ? this.$themes.primary : 'gray'"
+      v-show="meta.sd_data_record === true"
+      :icon="meta.sd_data_uploaded === true ? 'fa fa-download' : 'fa fa-usb'"
+      @click.stop="performButtonAction()"
+    >
+      <!-- span -->
+      <p :style="{color: this.$themes.danger}" class="display-6" v-show="uuidList.includes(uuid) && !meta.sd_data_uploaded">
+        !
+      </p>
+    </va-button>
+
+    <sd-card-api-action :ref="'sd_card_api'"/>
+    <va-modal
+      class="flex sm12 xl12 md12 xs12"
+      v-model="moveToDBModal"
+      size="small"
+      :title="'UPLOAD SD CARD DATA'"
+      :okText=" $t('modal.confirm') "
+      @ok="moveToDB()"
+    />
+  </div>
+</template>
+
+<script>
+import SdCardApiAction from './SdCardApiAction.vue'
+
+export default {
+  name: 'SdCardButton',
+  components: {
+    SdCardApiAction,
+  },
+  props: {
+    uuidList: {
+      type: Array,
+      required: true,
+    },
+    meta: {
+      type: Object,
+      required: true,
+    },
+  },
+  data () {
+    return {
+      isSdCardDataLoaded: false,
+      moveToDBModal: false,
+      checkSDresult: '',
+      metaID: '',
+      mac_address: '',
+      uuid: '',
+      icon: 'fa fa-usb',
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    init () {
+      this.metaID = this.meta.id
+      this.mac_address = this.meta.device.device_address.toString()
+      this.uuid = this.meta.uuid
+    },
+    async performButtonAction () {
+      const recorded = this.meta.sd_data_record // true or false
+      const uploaded = this.meta.sd_data_uploaded // true or false
+      if (recorded === true) {
+        if (uploaded !== true) {
+          const checkResult = await this.executeCheckInSD()
+          if (checkResult === 'True') {
+            this.moveToDBModal = true
+          }
+        } else {
+          this.executeDownload()
+        }
+      }
+    },
+    async moveToDB () {
+      await this.executeUpload()
+      this.$emit('refreshPage')
+    },
+    async executeCheckInSD () {
+      return await this.$refs.sd_card_api.checkInSD(this.meta)
+    },
+    async executeUpload () {
+      await this.$refs.sd_card_api.moveToDB(this.meta)
+      // remove delete sd card first, still have problem.
+      // await this.$refs.sd_card_api.deleteSDCard(this.meta)
+    },
+    executeDownload () {
+      this.$emit('downloadSdCard', this.meta)
+    },
+  },
+  async mounted () {
+    this.init()
+  },
+  watch: { // cuz data table will not call mounted
+    meta: function (val) {
+      this.init()
+    },
+  },
+}
+</script>

src/components/file/sdcard/apiManager.js

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

src/components/setting/controllerInfo.vue

@@ -11,16 +11,16 @@
           <!-- {{ controller }} -->
           <va-item :key="controller.device_mac" class="pa-0 ma-0"
           >
-            <va-item-section avatar class="ml-2 mr-2">
+            <va-item-section avatar class="ml-4 mr-4">
               <img
                 :src="getImageUrl()"
                 :alt="'BPS-CONTROLLER'"
-                width="300px"
-                height="300px"
+                width="200px"
+                height="200px"
                 contain
               />
             </va-item-section>
-            <va-item-section class="ml-4" >
+            <va-item-section class="ml-5 mr-4" >
               <va-item-label style="font-size: 2rem;">
                 {{ controller.wifi_name }}
               </va-item-label>
@@ -46,8 +46,8 @@
 <script>
 import { mapActions, mapGetters, mapMutations } from 'vuex'
 import api from '@/data/api/index'
-import types from '@/store/modules/about/types'
-import eliteImgUrl from '@/assets/img/elite_img.png'
+import types from '@/store/modules/setting/types'
+import controllerImgUrl from '@/assets/img/controller.png'
 
 export default {
   name: 'controller-info',
@@ -90,11 +90,11 @@ export default {
   },
   methods: {
     getImageUrl () {
-      return eliteImgUrl
+      return controllerImgUrl
     },
-    ...mapActions('about', [types.controller.init]),
-    ...mapMutations('about', [types.controller.set, types.controller.updateByIndex]),
-    ...mapGetters('about', [types.controller.getAll]),
+    ...mapActions('setting', [types.controller.init]),
+    ...mapMutations('setting', [types.controller.set, types.controller.updateByIndex]),
+    ...mapGetters('setting', [types.controller.getAll]),
   },
   async mounted () {
     this.initController({ api: api })
@@ -106,8 +106,8 @@ export default {
 
 </script>
 <style lang="scss">
-  .area-style {
-    height: 100%;
+  .area-style-setting-controller {
+    height: auto;
     overflow-y: hidden;
     overflow-x: hidden;
 

src/components/setting/deviceInfo.vue

@@ -1,10 +1,11 @@
 <template>
   <div class="device-info">
     <div class="row flex">
-      <draggable class="flex d-flex sm12 xl12 md12 xs12" v-model="devices" @start="drag=true" @end="drag=false" >
+      <div class="flex-wrap-setting sm12 xl12 md12 xs12">
+        <!-- <draggable class="flex d-flex sm12 xl12 md12 xs12" v-model="devicesList" @start="drag=true" @end="drag=false" > -->
         <div
-          class="flex d-flex sm12 xl3 md4 xs12 ma-0 area-style-info "
-          v-for="(device, index) in devices" :key="device.id"
+          class="flex d-flex sm12 xl3 md6 xs12 ma-0"
+          v-for="(device, index) in devicesList" :key="device.id"
         >
           <va-card
             :noPadding="true"
@@ -21,7 +22,7 @@
                     class="mr-1"
                     color="#babfc2"
                     style="cursor: pointer;"
-                    @click.native.stop="removeCheck(index, device)"
+                    @click.native.stop="remove(index, device)"
                   />
                 </div>
               </div>
@@ -30,7 +31,7 @@
               <p> {{ device.name }} </p>
             </div>
             <div class="center-medium">
-              <p> {{ macArrayToString(device.mac_address) }} </p>
+              <p> {{ device.mac_address }} </p>
             </div>
             <div class="mt-4 mb-4" style="text-align: center;">
               <img
@@ -52,22 +53,23 @@
             </div>
           </va-card>
         </div>
-      </draggable>
+      </div>
+      <!-- </draggable> -->
     </div>
   </div>
 </template>
 <script>
 import { mapActions, mapGetters, mapMutations } from 'vuex'
+import { mapFields } from 'vuex-map-fields'
 import api from '@/data/api/index'
-import types from '@/store/modules/about/types'
+import types from '@/store/modules/setting/types'
 import neuliveImgUrl from '@/assets/img/neulive_img.png'
-import eliteImgUrl from '@/assets/img/elite_img.png'
-import draggable from 'vuedraggable'
+import eliteImgUrl from '@/assets/img/elite_img_v2.png'
+// import draggable from 'vuedraggable'
 
 export default {
   name: 'device-info',
   components: {
-    draggable,
   },
   created () {
   },
@@ -76,6 +78,9 @@ export default {
     }
   },
   computed: {
+    ...mapFields('setting', [
+      'devicesList',
+    ]),
     devices: {
       get () {
         return this.getAllDevice()
@@ -94,7 +99,7 @@ export default {
     timeStampToLocaleTime: function (time) {
       return this.GLOBAL.dateToStr(time)
     },
-    getImageUrl (libraryName) {
+    getImageUrl: function (libraryName) {
       if (libraryName !== null) {
         if (libraryName.indexOf('Neulive') >= 0) {
           return neuliveImgUrl
@@ -104,40 +109,36 @@ export default {
       }
       return null
     },
-    autoConnect (index, device) {
+    autoConnect: async function (index, device) {
       device.auto_connect = !device.auto_connect
-      this.updateDatabaseByIDDevice({
-        id: device.id,
-        request: { auto_connect: device.auto_connect },
-        api: api,
-      })
-      this.updateByIndexDevice({ index: index, item: { auto_connect: device.auto_connect } })
+      await api.device.updateByID(device.id, { auto_connect: device.auto_connect })
     },
-    removeCheck (index, device) {
-      /**
-       * TODO remove modal
-       */
-      this.removeDevice({ id: device.id, index: index, device, deviceList: this.devices, api: api })
+    remove (index, device) {
+      console.log('removeDevcie', index, device)
+      this.removeDevice({ id: device.id, index: index, api: api })
     },
-    ...mapActions('about', [types.device.init, types.device.remove, types.device.reorder, types.device.updateDatabaseByID]),
-    ...mapMutations('about', [types.device.set, types.device.updateByIndex]),
-    ...mapGetters('about', [types.device.getAll]),
+    ...mapActions('setting', [types.device.init, types.device.remove, types.device.reorder]),
+    ...mapMutations('setting', [types.device.set, types.device.updateByIndex]),
+    ...mapGetters('setting', [types.device.getAll]),
   },
   async mounted () {
-    this.initDevice({ api: api })
+    const devices = await api.device.getAll()
+    if (devices.status === 200) {
+      this.devicesList = devices.data
+    }
   },
   destroyed () {
   },
 }
 </script>
 <style lang="scss">
-  .area-style-info {
+  .area-style-setting-device {
     height: auto;
     overflow-y: hidden;
     overflow-x: hidden;
 
     @include media-breakpoint-only(xl) {
-      height: 48vh;
+      height: auto;
       overflow-y: scroll;
       overflow-x: hidden;
     }
@@ -163,4 +164,10 @@ export default {
     text-align: center;
     font-size: 28px;
   }
+
+  .flex-wrap-setting {
+    display: flex;
+    flex-direction: horizontal;
+    flex-wrap: wrap;
+  }
 </style>

src/components/setting/settingContent.vue

@@ -1,7 +1,15 @@
 <template>
   <div class="about">
-    <controller-info/>
-    <device-info/>
+    <div class="row">
+      <div class="flex sm12 xl12 md12 xs12">
+        <controller-info/>
+      </div>
+    </div>
+    <div class="row">
+      <div class="flex sm12 xl12 md12 xs12">
+        <device-info/>
+      </div>
+    </div>
   </div>
 </template>
 <script>

src/components/task/content/TaskContent.vue

@@ -21,7 +21,7 @@
     />
 
     <div class="row row-equal">
-      <div v-if="showDeviceSetting" class="flex md12 xl4 xs12 sm12 area-style">
+      <div v-if="showDeviceSetting" class="flex md12 xl4 xs12 sm12">
         <div class="row">
           <div class="flex sm12 xl12 md12 xs12">
             <task-devices :ref="'devices_ref'" @add="addDevice($event)" @remove="removeDevice($event)" @refreshSetting="refreshChartSetting($event)" class="pa-0" />
@@ -33,7 +33,7 @@
 
       </div>
 
-      <div :class="chartAreaClass" class="area-style">
+      <div :class="chartAreaClass">
         <div class="row" >
           <div class="flex sm12 xl12 md12 xs12">
             <div class="flex sm12 xl12 md12 xs12" style="text-align: center;">
@@ -130,6 +130,8 @@ export default {
       showDeviceSetting: true,
       chartAreaClass: ['flex', 'xs12', 'sm12', 'md12', 'xl8', 'pa-0'],
 
+      getParmDone: false,
+
       deviceList: {},
     }
   },
@@ -141,6 +143,7 @@ export default {
     async '+/get_device_info/+' (data, topic) {
       await taskInfo.deviceInfo(String.fromCharCode.apply(null, data))
       this.refreshDevicesWindow()
+      this.getParmDone = true
     },
     async '+/device_parameter/+' (data, topic) {
       await taskInfo.deviceParameter(String.fromCharCode.apply(null, data))
@@ -152,47 +155,47 @@ export default {
     },
     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]
-                  }
+      // console.log(this.deviceList)
+      // for (const d1 in taskInfo.getTaskInfo().deviceList) {
+      //   if (taskInfo.getTaskInfo().deviceList[d1].info.device_address.length > 0) {
+      //     const addr1 = taskInfo.getTaskInfo().deviceList[d1].info.device_address.join()
+      //     let parameter, content
+      //     for (const d2 in this.deviceList) {
+      //       const addr2 = this.deviceList[d2].info.device_address.join()
+      //       if (addr1 === addr2) {
+      //         console.log(this.deviceList[d2].parameterSet)
+      //         for (const p in this.deviceList[d2].parameterSet) {
+      //           if (p !== 'STIMULATING') {
+      //             if (parameter == null) {
+      //               parameter = p
+      //             } else {
+      //               parameter = parameter + '|' + p
+      //             }
+      //             let c
+      //             if (Array.isArray(this.deviceList[d2].parameterSet[p])) {
+      //               c = '0:' + this.deviceList[d2].parameterSet[p].length + '=' + this.deviceList[d2].parameterSet[p]
+      //             } else {
+      //               c = this.deviceList[d2].parameterSet[p]
+      //             }
 
-                  if (content == null) {
-                    content = c
-                  } else {
-                    content = content + '|' + c
-                  }
-                }
-              }
-              console.log('****', parameter, content)
-              // this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
-              //   header: 'device_parameter/0',
-              //   device: parseInt(d1),
-              //   parameter: parameter,
-              //   content: content,
-              // }))
-            }
-          }
-        }
-      }
+      //             if (content == null) {
+      //               content = c
+      //             } else {
+      //               content = content + '|' + c
+      //             }
+      //           }
+      //         }
+      //         console.log('****', parameter, content)
+      //         // this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+      //         //   header: 'device_parameter/0',
+      //         //   device: parseInt(d1),
+      //         //   parameter: parameter,
+      //         //   content: content,
+      //         // }))
+      //       }
+      //     }
+      // }
+      // }
       if (this.$refs.devices_ref != null) {
         await this.$refs.devices_ref.loadingDone()
       }
@@ -200,7 +203,7 @@ export default {
     // listen datastream [ topic: controllerID/data_server/device_data_stream/deviceID/channel ]
     async '+/data_server/device_data_stream/+/+' (data, topic) {
       const topicSplit = topic.split('/')
-      if (!taskInfo.getDeviceInfoByRawID(parseInt(topicSplit[3])).info.isSync) {
+      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]))
         }
@@ -230,6 +233,10 @@ export default {
           break
         case 'disconnected':
           taskInfo.deviceDisconnected(mes[1])
+          this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+            header: 'get_device_info/0',
+            device: parseInt(mes[1]),
+          }))
           break
         case 'connected':
           this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
@@ -243,7 +250,12 @@ export default {
           this.showShutdownModal = true
           break
         case 'start':
-          taskInfo.deviceStart(parseInt(mes[1]))
+          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])))
+            }
+          }
           break
         case 'stop':
           if (mes[1] === 'all') {
@@ -438,7 +450,6 @@ export default {
       // if have chart with device ID
       for (const chart in chartData.getAllChartsData()) {
         if (chartData.getAllChartsData()[chart].mappingID === deviceID) {
-          console.log('000')
           return false
         }
       }
@@ -455,10 +466,10 @@ export default {
     },
     addDevice: async function (deviceID) {
       this.mqttSub(taskInfo.getTaskInfo().controllerID + '/data_server/device_data_stream/' + taskInfo.getRawDeviceID(deviceID) + '/+')
-      const chart = this.addMappingChart(deviceID)
-      if (taskInfo.getDeviceInfo(deviceID).info.isSync) {
-        chartData.defaultChartGenerator(deviceID, chart, 'device')
-      }
+      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({
@@ -599,17 +610,17 @@ export default {
 </script>
 
 <style lang="scss">
-  .area-style {
-    height: 100%;
-    overflow-y: hidden;
-    overflow-x: hidden;
+  // .area-style {
+  //   height: 100%;
+  //   overflow-y: hidden;
+  //   overflow-x: hidden;
 
-    @include media-breakpoint-only(xl) {
-      height: 90vh;
-      overflow-y: scroll;
-      overflow-x: hidden;
-    }
-  }
+  //   @include media-breakpoint-only(xl) {
+  //     height: 94vh;
+  //     overflow-y: scroll;
+  //     overflow-x: hidden;
+  //   }
+  // }
 
   .no-dark-style-va-button {
     &:focus {

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

@@ -158,58 +158,88 @@ export default {
   },
   methods: {
     timeIntervalChange: function (val) {
-      chartData.getAllChartsData()[this.chartID].xAxis.forEach(x => {
-        if (x.type === 'time') {
-          x.interval = val * 1000
-        }
-      })
+      if (!isNaN(parseInt(val))) {
+        chartData.getAllChartsData()[this.chartID].xAxis.forEach(x => {
+          if (x.type === 'time') {
+            x.interval = val * 1000
+          }
+        })
+      } else {
+        this.timeIntervalInput = 'auto'
+        chartData.getAllChartsData()[this.chartID].xAxis.forEach(x => {
+          if (x.type === 'time') {
+            x.interval = 500 * 1000
+          }
+        })
+      }
     },
     xIntervalChange: function (val) {
-      chartData.getAllChartsData()[this.chartID].xAxis.forEach(x => {
-        if (x.type === 'value') {
-          x.interval = val * 1000
-          // const maxList = []
-          // const minList = []
-          // x.seriesIndex.forEach(i => {
-          //   maxList.push(Math.max(...chartData.getAllChartsData()[this.chartID].series[i].data.map(p => p[0])))
-          //   minList.push(Math.min(...chartData.getAllChartsData()[this.chartID].series[i].data.map(p => p[0])))
-          // })
-          // const max = Math.max(maxList)
-          // const min = Math.min(minList)
-          // const center = (max + min) / 2
-          // x.max = center + (max - min)
-          // x.min = center - (max - min)
-          // x.max = (parseInt(x.max / (val * 1000)) + 1) * (val * 1000)
-          // x.min = (parseInt(x.min / (val * 1000)) - 1) * (val * 1000)
-        }
-      })
+      if (!isNaN(parseInt(val))) {
+        chartData.getAllChartsData()[this.chartID].xAxis.forEach(x => {
+          if (x.type === 'value') {
+            x.interval = val * 1000
+          }
+        })
+      } else {
+        this.timeIntervalInput = 'auto'
+        chartData.getAllChartsData()[this.chartID].xAxis.forEach(x => {
+          if (x.type === 'value') {
+            x.interval = null
+          }
+        })
+      }
     },
     yIntervalChange: function (val) {
-      chartData.getAllChartsData()[this.chartID].yAxis.forEach(y => {
-        if (parseInt(y.channel) <= 255) {
-          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])))
-          })
-          const max = Math.max(maxList)
-          const min = Math.min(minList)
-          const center = (max + min) / 2
-          y.max = center + (max - min)
-          y.min = center - (max - min)
-          y.max = (parseInt(y.max / (val * 1000)) + 1) * (val * 1000)
-          y.min = (parseInt(y.min / (val * 1000)) - 1) * (val * 1000)
-        }
-      })
+      if (!isNaN(parseInt(val))) {
+        chartData.getAllChartsData()[this.chartID].yAxis.forEach(y => {
+          if (parseInt(y.channel) <= 255) {
+            if (chartData.getAllChartsData()[this.chartID].chartYUnit === 'uV') {
+              y.interval = parseInt(val)
+              console.log(y.interval)
+            } else {
+              y.interval = val * 1000
+            }
+            const maxList = []
+            const minList = []
+            y.seriesIndex.forEach(i => {
+              maxList.push(Math.max(...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])))
+            })
+            const max = Math.max(maxList)
+            const min = Math.min(minList)
+            const center = (max + min) / 2
+            y.max = center + (max - min)
+            y.min = center - (max - min)
+            y.max = (parseInt(y.max / y.interval) + 1) * y.interval
+            y.min = (parseInt(y.min / y.interval) - 1) * y.interval
+          }
+        })
+      } else {
+        this.timeIntervalInput = 'auto'
+        chartData.getAllChartsData()[this.chartID].yAxis.forEach(y => {
+          if (parseInt(y.channel) <= 255) {
+            y.interval = null
+            y.max = 'dataMax'
+            y.min = 'dataMin'
+          }
+        })
+      }
     },
     threeAxisIntervalChange: function (val) {
-      chartData.getAllChartsData()[this.chartID].yAxis.forEach(y => {
-        if (parseInt(y.channel) >= 255) {
-          y.interval = val * 1
-        }
-      })
+      if (!isNaN(parseInt(val))) {
+        chartData.getAllChartsData()[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 => {
+          if (parseInt(y.channel) >= 255) {
+            y.interval = null
+          }
+        })
+      }
     },
     init: function () {
       this.mappingSelect = ''
@@ -268,6 +298,8 @@ export default {
     this.nameCard = chartData.getAllChartsData()[this.chartID].cardName
     await this.refreshMappingSelect()
     this.initDone = true
+    // this.timeIntervalInput = '500'
+    // this.timeIntervalChange('500')
   },
   destroyed () {
     clearInterval(this.resizeTimer)

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

@@ -1,5 +1,58 @@
 <template>
   <div style="height: 350px; overflow-y: scroll; overflow-x: hidden;">
+    <div>
+      <div class="flex row align--center">
+        <div class="flex md3 xl3 xs3 sm3">
+          <va-select
+            small
+            :label="'X SOURCE'"
+            v-model="deviceSelectX"
+            textBy="name"
+            :options="deviceOptions"
+          />
+        </div>
+        <div class="flex md3 xl3 xs3 sm3">
+          <va-select
+            :on-change="channelSelectXChange()"
+            :label="'X CHANNEL'"
+            v-model="channelSelectX"
+            textBy="channel"
+            :options="channelOptionsX"
+            :disabled="channelSelectDisableX"
+          />
+        </div>
+        <div class="flex md3 xl3 xs3 sm3">
+          <va-select
+            :label="'Y SOURCE'"
+            v-model="deviceSelectY"
+            textBy="name"
+            :options="deviceOptions"
+          />
+        </div>
+        <div class="flex md3 xl3 xs3 sm3">
+          <va-select
+            :on-change="channelSelectYChange()"
+            :label="'Y CHANNEL'"
+            v-model="channelSelectY"
+            textBy="channel"
+            :options="channelOptionsY"
+            :disabled="channelSelectDisableY"
+          />
+        </div>
+        <div class="flex md3 xl3 xs3 sm3">
+          <va-select
+            :label="'SubPlot'"
+            v-model="gridSelection"
+            textBy="value"
+            :options="gridOptions"
+            @click.enter="updateGridOptions()"
+          />
+        </div>
+        <va-button :disabled="sourceAddStatus" class="flex md3 xl3 xs3 sm3 pa-1" @click="addRegisterDeviceChannel(gridSelection.id)" >
+          Add
+        </va-button><span class="ml-2" style="color: red;">{{error}}</span>
+      </div>
+    </div>
     <va-tree-root>
       <va-tree-category
         style="font-size: 20px;"
@@ -7,64 +60,20 @@
         :key="grid.index"
         :label="'Subplot ' + grid.index">
         <va-tree-node
-          v-for="series in grid.series"
+          v-for="series in gridSource[grid.index]"
           :key="series.name"
         >
           <div class="flex row align--center">
             <va-badge class="mb-0" style="font-size: 14px;" color="primary">{{series.name}}</va-badge>
             <va-badge class="mb-0" style="font-size: 14px;" color="primary" outline>{{series.xAxis}}</va-badge>
             <va-badge class="mb-0" style="font-size: 14px;" color="primary" outline>{{series.yAxis}}</va-badge>
-            <va-icon
+            <!-- <va-icon
               name="ion ion-md-close"
               color="info"
               class="ml-2 pa-1 shrink"
               style="cursor: pointer;"
               @click.native="removeProduct(product)"
-            />
-          </div>
-        </va-tree-node>
-        <va-tree-node>
-          <div class="flex row align--center">
-            <div class="flex md6 xl6 xs6 sm6">
-              <va-select
-                small
-                :label="'X SOURCE'"
-                v-model="deviceSelectX"
-                textBy="name"
-                :options="deviceOptions"
-              />
-            </div>
-            <div class="flex md6 xl6 xs6 sm6">
-              <va-select
-                :on-change="channelSelectXChange()"
-                :label="'X CHANNEL'"
-                v-model="channelSelectX"
-                textBy="channel"
-                :options="channelOptionsX"
-                :disabled="channelSelectDisableX"
-              />
-            </div>
-            <div class="flex md6 xl6 xs6 sm6">
-              <va-select
-                :label="'Y SOURCE'"
-                v-model="deviceSelectY"
-                textBy="name"
-                :options="deviceOptions"
-              />
-            </div>
-            <div class="flex md6 xl6 xs6 sm6">
-              <va-select
-                :on-change="channelSelectYChange()"
-                :label="'Y CHANNEL'"
-                v-model="channelSelectY"
-                textBy="channel"
-                :options="channelOptionsY"
-                :disabled="channelSelectDisableY"
-              />
-            </div>
-            <va-button :disabled="sourceAddStatus" class="flex md6 xl6 xs6 sm6 pa-1" @click="addRegisterDeviceChannel(grid.index)" >
-              Add
-            </va-button>
+            /> -->
           </div>
         </va-tree-node>
       </va-tree-category>
@@ -96,17 +105,16 @@ export default {
   },
   data () {
     return {
+      error: '',
+      gridSelection: '',
+      gridOptions: [
+        {
+          id: 0,
+          value: 0,
+        },
+      ],
       grids: this.gridInfo,
-      electronics: [
-        { id: 1, name: 'Cellphones' },
-        { id: 2, name: 'Camera Body Kits' },
-        { id: 3, name: 'External HDDs' },
-      ],
-      products: [
-        { id: 4, name: 'Cables' },
-        { id: 5, name: 'Monitors' },
-        { id: 6, name: 'Keyboards' },
-      ],
+      gridSource: chartData.getAllChartsData()[this.chartID].gridSource,
       channelSelectX: '',
       channelOptionsX: [],
       channelSelectY: '',
@@ -117,6 +125,7 @@ export default {
       deviceSelectY: '',
       deviceOptions: taskInfo.getDeviceList(),
       sourceAddStatus: true,
+      sourceList: [],
     }
   },
   watch: {
@@ -167,7 +176,12 @@ export default {
         })
         this.channelSelectDisableX = false
       } else if (taskInfo.getDeviceInfo(this.deviceSelectX.id).info.library_name.indexOf('Elite') >= 0) {
-        const channelSet = taskInfo.getDeviceInfo(this.deviceSelectX.id).parameterSet.CHANNEL_LABEL
+        let channelSet
+        if (taskInfo.getDeviceInfo(this.deviceSelectX.id).info.library_name === 'EliteEIS' && taskInfo.getDeviceInfo(this.deviceSelectX.id).parameterSet.MODE === 0) {
+          channelSet = ['Zimag_Raw', 'Zreal_Raw', 'Frequency', 'Cycle', 'Zimag', 'Zreal', 'Impedance', 'Phase', 'Current', 'Level gain']
+        } else {
+          channelSet = taskInfo.getDeviceInfo(this.deviceSelectX.id).parameterSet.CHANNEL_LABEL
+        }
         // console.log(channelSet)
         channelSet.forEach((element, index) => {
           channelOptions.push({
@@ -229,7 +243,12 @@ export default {
         })
         this.channelSelectDisableY = false
       } else if (taskInfo.getDeviceInfo(this.deviceSelectY.id).info.library_name.indexOf('Elite') >= 0) {
-        const channelSet = taskInfo.getDeviceInfo(this.deviceSelectY.id).parameterSet.CHANNEL_LABEL
+        let channelSet
+        if (taskInfo.getDeviceInfo(this.deviceSelectY.id).info.library_name === 'EliteEIS' && taskInfo.getDeviceInfo(this.deviceSelectY.id).parameterSet.MODE === 0) {
+          channelSet = ['Zimag_Raw', 'Zreal_Raw', 'Frequency', 'Cycle', 'Zimag', 'Zreal', 'Impedance', 'Phase', 'Current', 'Level gain']
+        } else {
+          channelSet = taskInfo.getDeviceInfo(this.deviceSelectY.id).parameterSet.CHANNEL_LABEL
+        }
         console.log(channelSet)
         channelSet.forEach((element, index) => {
           channelOptions.push({
@@ -248,6 +267,15 @@ export default {
     },
   },
   methods: {
+    updateGridOptions () {
+      this.gridOptions = []
+      for (let i = 0; i < this.grids.length; i++) {
+        this.gridOptions.push({
+          id: i,
+          value: String(i),
+        })
+      }
+    },
     channelSelectYChange: function () {
       this.checkSourceAddStatus()
     },
@@ -261,6 +289,7 @@ export default {
       this.channelOptionsY = []
       this.deviceSelectX = ''
       this.deviceSelectY = ''
+      this.gridSelection = ''
     },
     addRegisterDeviceChannel: function (gridIndex) {
       let deviceNameX
@@ -272,19 +301,34 @@ export default {
       if (this.deviceSelectX.name.indexOf('Neulive') >= 0) {
         deviceNameX = 'Neulive'
       } else if (this.deviceSelectX.name.indexOf('Elite') >= 0) {
-        deviceNameX = 'Elite'
+        if (taskInfo.getDeviceInfo(this.deviceSelectX.id).info.library_name === 'EliteEIS') {
+          deviceNameX = 'EliteEIS'
+        } else {
+          deviceNameX = 'Elite'
+        }
       } else if (this.deviceSelectX.name.indexOf('Time') >= 0) {
         deviceNameX = 'Time'
       }
       if (this.deviceSelectY.name.indexOf('Neulive') >= 0) {
         deviceNameY = 'Neulive'
       } else if (this.deviceSelectY.name.indexOf('Elite') >= 0) {
-        deviceNameY = 'Elite'
+        if (taskInfo.getDeviceInfo(this.deviceSelectY.id).info.library_name === 'EliteEIS') {
+          deviceNameY = 'EliteEIS'
+        } else {
+          deviceNameY = 'Elite'
+        }
       } else if (this.deviceSelectY.name.indexOf('Time') >= 0) {
         deviceNameY = 'Time'
       }
       chartData.register(this.chartID, gridIndex, deviceNameX, deviceIDX, channelX, deviceNameY, deviceIDY, channelY, null)
+      console.log(this.chartID, gridIndex, deviceNameX, deviceIDX, channelX, deviceNameY, deviceIDY, channelY, null)
       console.log(this.deviceSelectX, this.channelSelectX, this.deviceSelectY, this.channelSelectY)
+      if (deviceNameX !== 'Time') {
+        this.sourceList.push([this.deviceSelectX.name, deviceIDX, channelX].toString())
+      }
+      if (deviceNameY !== 'Time') {
+        this.sourceList.push([this.deviceSelectY.name, deviceIDY, channelY].toString())
+      }
       this.sourceAddStatus = true
       this.clearSelectOptions()
     },
@@ -292,8 +336,31 @@ export default {
       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])
     },
     checkSourceAddStatus () {
+      if (this.sourceList.indexOf([this.deviceSelectX.name, this.deviceSelectX.id, this.channelSelectX.id].toString()) >= 0) {
+        this.error = 'The same source has been selected in a subplot.'
+        this.sourceAddStatus = true
+        return
+      }
+      if (this.sourceList.indexOf([this.deviceSelectY.name, this.deviceSelectY.id, this.channelSelectY.id].toString()) >= 0) {
+        this.sourceAddStatus = true
+        this.error = 'The same source has been selected in a subplot.'
+        return
+      }
+      this.error = ''
+      if (this.gridSelection.id == null) {
+        this.sourceAddStatus = true
+        return
+      }
       if (this.channelSelectX.id != null && this.channelSelectY.id != null) {
         this.sourceAddStatus = false
       } else if (this.channelSelectX.id != null && this.deviceSelectY.id < 0) {
@@ -313,6 +380,8 @@ export default {
     removeProduct (product) {
       this.products = this.products.filter(productToFilter => productToFilter !== product)
     },
+    mounted () {
+    },
   },
 }
 </script>

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

@@ -14,13 +14,13 @@
         <span slot="header" >
           <va-item :key="device.id" class="pa-0 ma-0"
           >
-            <va-icon
+            <!-- <va-icon
               name="ion ion-md-close"
               color="danger"
               class="ml-0 mr-3 pa-0 shrink"
               style="cursor: pointer;"
               @click.native.stop="removeCheck(device)"
-            />
+            /> -->
 
             <va-item-section avatar class="ml-0">
               <va-avatar style="border-radius: 0;">
@@ -45,7 +45,7 @@
             <va-item-section class="ml-3">
               <va-item-label>
                 <va-button @click.stop="start(device)" v-if="(device.type == 'Neulive' && !device.isSync && !device.isStimulate) || (device.type == 'Elite' && !device.isSync)" class="px-2 py-0 mr-0" color="success" small>START</va-button>
-                <va-button @click.stop="stop(device)" v-if="(device.type == 'Neulive' && (device.isSync || device.isStimulate)) || (device.type == 'Elite' && device.isSync)" :disabled="device.stopping" class="px-2 py-0 mr-0" color="danger" small>STOP</va-button>
+                <va-button @click.stop="stop(device)" v-if="(device.type == 'Neulive' && (device.isSync || device.isStimulate)) || (device.type == 'Elite' && device.isSync)" class="px-2 py-0 mr-0" color="danger" small>STOP</va-button>
                 <va-button id="detectButton" @click.stop="detect(device)" v-if="device.type == 'Elite'" color="primary" class="px-2 py-0 mr-0" small>DETECT</va-button>
                 <va-button @click.stop="record(device)" v-if="device.type == 'Neulive' && !device.isSync" color="primary" class="px-2 py-0 mr-0 no-dark-style-va-button" small>RECORD</va-button>
                 <va-button @click.stop="stopRecord(device)" v-if="device.type == 'Neulive' && device.isSync" color="danger" class="px-2 py-0 mr-0 no-dark-style-va-button" small>STOP REC</va-button>
@@ -82,7 +82,7 @@
 import EliteParameterWindow from '../parameter/EliteParameterWindow'
 import NeuliveParameterWindow from '../parameter/NeuliveParameterWindow'
 import FileControlWindow from '../meta/FileControlWindow'
-import { mapGetters } from 'vuex'
+import { mapActions } from 'vuex'
 import types from '@/store/modules/task/content/types'
 
 export default {
@@ -115,42 +115,41 @@ export default {
     remove: function () {
       this.$emit('remove', this.selectDevice)
     },
-    start: function (device) {
-      const checkParam = this.getIsParamSetDoneParam()(device.type)
-      const status = checkParam.status
-      const message = checkParam.message
-      if (status === true) {
-        this.setArchiveSettings()
-        // this.$emit('start', device)
-        setTimeout(() => {
-          this.$emit('start', device)
-        }, 500)
-        this.pageToast('The device ' + device.name + ' has been started.')
-      } else {
-        this.pageToast('The device cannot be started because:' + message)
-      }
+    start: async function (device) {
+      // const checkParam = await this.checkIfDeviceSetDoneParam({ device: device })
+      // const status = checkParam.status
+      // const message = checkParam.message
+      // if (status === true) {
+      this.setArchiveSettings()
+      // this.$emit('start', device)
+      setTimeout(() => {
+        this.$emit('start', device)
+      }, 500)
+      this.pageToast('The device ' + device.name + ' has been started.')
+      // } else {
+      //   this.pageToast('The device cannot be started because:' + message)
+      // }
     },
     stop: function (device) {
       this.$emit('stop', device)
       this.pageToast('The device ' + device.name + ' has been stopped.')
     },
-    record: function (device) {
-      const checkParam = this.getIsRecordingParamSetDoneParam()(device.type)
-      const status = checkParam.status
-      const message = checkParam.message
-      if (status === true) {
-        device.stopping = false
-        this.setArchiveSettings()
-        setTimeout(() => {
-          this.$emit('record', device)
-        }, 500)
-        this.pageToast('The device ' + device.name + ' has been started.')
-      } else {
-        this.pageToast('Recording cannot be started because:' + message)
-      }
+    record: async function (device) {
+      // const checkParam = await this.checkIfRecordingSetDoneParam({ device: device })
+      // const status = checkParam.status
+      // const message = checkParam.message
+      // if (status === true) {
+      // device.stopping = false
+      this.setArchiveSettings()
+      setTimeout(() => {
+        this.$emit('record', device)
+      }, 500)
+      this.pageToast('The device ' + device.name + ' has been started.')
+      // } else {
+      //   this.pageToast('Recording cannot be started because:' + message)
+      // }
     },
     stopRecord: function (device) {
-      device.stopping = true
       this.$emit('stopRecord', device)
       this.pageToast('The device ' + device.name + ' has been stopped.')
     },
@@ -195,8 +194,8 @@ export default {
       this.$emit('detect', device)
       this.pageToast('The device ' + device.name + ' has been detect.')
     },
-    stimulate: function (device) {
-      const checkParam = this.getIsStimulationParamSetDoneParam()
+    stimulate: async function (device) {
+      const checkParam = await this.checkIfStimulationSetDoneParam({ device: device })
       const status = checkParam.status
       const message = checkParam.message
       if (status === true) {
@@ -217,7 +216,7 @@ export default {
     recoverDetectButton () {
       document.getElementById('detectButton').className += ' no-dark-style-va-button'
     },
-    ...mapGetters('taskContent', [types.param.getIsRecordingParamSetDone, types.param.getIsStimulationParamSetDone, types.param.getIsParamSetDone]),
+    ...mapActions('taskContent', [types.param.checkIfRecordingSetDone, types.param.checkIfStimulationSetDone, types.param.checkIfDeviceSetDone]),
   },
   destroyed () {
     this.deviceList.length = 0

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

@@ -1,6 +1,6 @@
 <template>
   <div class="flex" :class="cardclass">
-    <va-card>
+    <va-card style="height: 88vh; overflow: auto;">
       <template slot="header">
         <va-icon name="fa fa-bluetooth-b mr-3" color="primary"/>
         <h5 class="mt-0 mb-0">DEVICES</h5>
@@ -18,7 +18,6 @@
         <task-device-list
           :ref="'pdlist_ref'"
           :deviceList="deviceList"
-          @remove="removeDevice($event)"
           @start="startDevice($event)"
           @stop="stopDevice($event)"
           @record="record($event)"
@@ -29,7 +28,7 @@
           @detect="detectDevice($event)"
         />
 
-        <div class="row flex xs12 md12 xl12 sm12 mt-2" style="text-align: center;">
+        <!-- <div class="row flex xs12 md12 xl12 sm12 mt-2" style="text-align: center;">
           <div class="xs10 md10 xl10 sm10">
             <va-select
               small
@@ -43,7 +42,7 @@
               REGISTER
             </va-button>
           </div>
-        </div>
+        </div> -->
       </div>
 
     </va-card>
@@ -106,11 +105,30 @@ export default {
       //     }
       //   }
       // }
-      this.clearDevice()
       console.log(this.deviceOptions)
-      for (let i = 4; i <= 7; i++) {
-        await this.addDevice(i)
+      for (let i = 0; i <= 11; i++) {
+        if (taskInfo.getDeviceInfoByRawID(i).info.status === 'connected') {
+          const index = this.deviceList.findIndex(d => taskInfo.getRawDeviceID(d.id) === i)
+          if (index < 0) {
+            await this.addDevice(i)
+          }
+        } else {
+          console.log(this.deviceList)
+          const index = this.deviceList.findIndex(d => taskInfo.getRawDeviceID(d.id) === i)
+          console.log(index)
+          if (index > 0) {
+            await this.removeDevice(this.deviceList[index])
+          }
+        }
       }
+
+      taskInfo.getDeviceList().length = 0
+      taskInfo.getDeviceList().push({
+        id: -1,
+        name: 'Time',
+      })
+      taskInfo.getDeviceList().push(...this.deviceList)
+      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)
@@ -149,7 +167,7 @@ export default {
             instruction: 'start',
           }))
         }
-        device.stopping = false
+        // device.stopping = false
         device.isSync = true
         this.$emit('refreshSetting')
         // ### show device info
@@ -187,7 +205,7 @@ export default {
             instruction: 'interrupt',
           }))
         }
-        device.stopping = true
+        // device.stopping = true
       }
     },
     detectDevice: function (device) {
@@ -214,7 +232,7 @@ export default {
           instruction: 'record',
         }))
         device.isSync = true
-        device.stopping = false
+        // device.stopping = false
         this.$emit('refreshSetting')
         api.task.update({
           device_config: taskInfo.getTaskInfo().deviceList,
@@ -234,7 +252,7 @@ export default {
         }))
       }
       device.isSync = false
-      device.stopping = true
+      // device.stopping = true
     },
     sti: function (device) {
       this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
@@ -315,6 +333,9 @@ export default {
       if (addr.length === 0) {
         return false
       }
+      if (taskInfo.getTaskInfo().taskDeviceID.indexOf(selectID) > 0) {
+        return false
+      }
       await taskInfo.getTaskInfo().deviceAddrList.push(taskInfo.getDeviceInfoByRawID(selectID).info.device_address)
       await taskInfo.getTaskInfo().taskDeviceID.push(selectID)
       const _address = this.GLOBAL.transMac(taskInfo.getDeviceInfoByRawID(selectID).info.device_address)
@@ -332,11 +353,13 @@ export default {
         name: '[' + taskInfo.getTaskInfo().taskDeviceID.indexOf(selectID) + '] ' + taskInfo.getDeviceInfoByRawID(selectID).info.device_name,
         addr: taskInfo.getDeviceInfoByRawID(selectID).info.device_address,
         address: _address,
+        library_name: taskInfo.getDeviceInfoByRawID(selectID).info.library_name,
+        library_version: taskInfo.getDeviceInfoByRawID(selectID).info.library_version,
         picture: pic,
         type: type,
         isSync: taskInfo.getDeviceInfoByRawID(selectID).info.isSync,
         isStimulate: taskInfo.getDeviceInfoByRawID(selectID).info.isStimulate,
-        stopping: false,
+        // stopping: false,
       }
       this.deviceList.push(_device)
       this.deviceSelect = ''

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

@@ -41,71 +41,71 @@
         <div class="flex sm12 xl12 md12 xs12 pa-0 ma-0">
           <p class="display-6">Current Range<p/>
         </div>
-        <div class="flex sm12 xl12 md12 xs12 pa-0 ma-0" >
+        <div class="flex sm12 xl12 md12 xs12 pa-0 ma-1" >
           <level-button :ref="'currentRangeSelect'" :deviceID="deviceID" :options="currentRangeOptions" :parameterName="'ADC_LEVEL_I_15'" @parameterChange="deviceParameterChange($event)" />
         </div>
       </div>
       <div class="flex row mt-0 pt-0 sm12 xl12 md12 xs12 align--center">
-        <div class="flex sm4 xl4 md4 xs4 pa-0 ma-0">
+        <div class="flex sm12 xl12 md12 xs12 pa-0 ma-0">
           <p class="display-6">Voltage Range<p/>
         </div>
-        <div class="flex sm6 xl6 md6 xs6 pa-0 ma-0" >
+        <div class="flex sm12 xl12 md12 xs12 pa-0 ma-1" >
           <level-button :ref="'voltageInRangeSelect'" :deviceID="deviceID" :options="voltageInRangeOptions" :parameterName="'ADC_LEVEL_V_IN_15'" @parameterChange="deviceParameterChange($event)" />
         </div>
       </div>
       <div class="flex row mt-0 pt-0 sm12 xl12 md12 xs12 align--center">
-        <div class="flex sm4 xl4 md4 xs4 pa-0 ma-0">
+        <div class="flex sm12 xl12 md12 xs12 pa-0 ma-0">
           <p class="display-6">High Z<p/>
         </div>
-        <div class="flex sm6 xl6 md6 xs6 pa-0 ma-0" >
+        <div class="flex sm12 xl12 md12 xs12 pa-0 ma-1" >
           <level-button :ref="'highzSelect'" :deviceID="deviceID" :options="highzOptions" :parameterName="'CTRL_HIGH_Z_15'" @parameterChange="deviceParameterChange($event)" />
         </div>
       </div>
       <div class="flex row mt-0 pt-0 sm12 xl12 md12 xs12 align--center">
-        <div class="flex sm4 xl4 md4 xs4 pa-0 ma-0">
-          <p class="display-6">Voltage Initial<p/>
+        <div class="flex sm12 xl12 md12 xs12 pa-0 ma-0">
+          <p class="display-6">E Initial<p/>
         </div>
-        <div class="flex sm6 xl6 md6 xs6 pa-0 ma-0" >
-          <volt-range :ref="'voltInitialNumber'" :deviceID="deviceID" :parameterName="'VOLT_INITIAL'" :minValue="-5" :maxValue="5" @parameterChange="deviceParameterChange($event)" />
+        <div class="flex sm12 xl12 md12 xs12 pa-0 ma-1" >
+          <volt-range :ref="'voltInitialNumber'" :deviceID="deviceID" :parameterName="'VOLT_INITIAL'" :minValue="-1.8" :maxValue="2" @parameterChange="deviceParameterChange($event)" />
         </div>
       </div>
       <div class="flex row mt-0 pt-0 sm12 xl12 md12 xs12 align--center">
-        <div class="flex sm4 xl4 md4 xs4 pa-0 ma-0">
-          <p class="display-6">Voltage Max<p/>
+        <div class="flex sm12 xl12 md12 xs12 pa-0 ma-0">
+          <p class="display-6">E1<p/>
         </div>
-        <div class="flex sm6 xl6 md6 xs6 pa-0 ma-0" >
-          <volt-range :ref="'voltMaxNumber'" :deviceID="deviceID" :parameterName="'VOLT_MAX'" :minValue="-5" :maxValue="5" @parameterChange="deviceParameterChange($event)" />
+        <div class="flex sm12 xl12 md12 xs12 pa-0 ma-1" >
+          <volt-range :ref="'voltMaxNumber'" :deviceID="deviceID" :parameterName="'VOLT_MAX'" :minValue="-1.8" :maxValue="2" @parameterChange="deviceParameterChange($event)" />
         </div>
       </div>
       <div class="flex row mt-0 pt-0 sm12 xl12 md12 xs12 align--center">
-        <div class="flex sm4 xl4 md4 xs4 pa-0 ma-0">
-          <p class="display-6">Voltage Min<p/>
+        <div class="flex sm12 xl12 md12 xs12 pa-0 ma-0">
+          <p class="display-6">E2<p/>
         </div>
-        <div class="flex sm6 xl6 md6 xs6 pa-0 ma-0" >
-          <volt-range :ref="'voltMinNumber'" :deviceID="deviceID" :parameterName="'VOLT_MIN'" :minValue="-5" :maxValue="5" @parameterChange="deviceParameterChange($event)" />
+        <div class="flex sm12 xl12 md12 xs12 pa-0 ma-1" >
+          <volt-range :ref="'voltMinNumber'" :deviceID="deviceID" :parameterName="'VOLT_MIN'" :minValue="-1.8" :maxValue="2" @parameterChange="deviceParameterChange($event)" />
         </div>
       </div>
       <div class="flex row mt-0 pt-0 sm12 xl12 md12 xs12 align--center">
-        <div class="flex sm4 xl4 md4 xs4 pa-0 ma-0">
+        <div class="flex sm12 xl12 md12 xs12 pa-0 ma-0">
           <p class="display-6">Voltage Scan Rate<p/>
         </div>
-        <div class="flex sm6 xl6 md6 xs6 pa-0 ma-0" >
+        <div class="flex sm12 xl12 md12 xs12 pa-0 ma-1" >
           <scan-rate-range :ref="'voltScanRateNumber'" :deviceID="deviceID" :parameterName="'Scan_Rate'" :minValue="0.01" :maxValue="1000" @parameterChange="deviceParameterChange($event)" />
         </div>
       </div>
       <div class="flex row mt-0 pt-0 sm12 xl12 md12 xs12 align--center">
-        <div class="flex sm4 xl4 md4 xs4 pa-0 ma-0">
+        <div class="flex sm12 xl12 md12 xs12 pa-0 ma-0">
           <p class="display-6">Resolution<p/>
         </div>
-        <div class="flex sm6 xl6 md6 xs6 pa-0 ma-0" >
+        <div class="flex sm12 xl12 md12 xs12 pa-0 ma-1" >
           <resolution-range :ref="'sampleRateNumber'" :deviceID="deviceID" :parameterName="'SAMPLE_RATE'" :minValue="0.1" :maxValue="100" @parameterChange="deviceParameterChange($event)" />
         </div>
       </div>
       <div class="flex row mt-0 pt-0 sm12 xl12 md12 xs12 align--center">
-        <div class="flex sm4 xl4 md4 xs4 pa-0 ma-0">
+        <div class="flex sm12 xl12 md12 xs12 pa-0 ma-0">
           <p class="display-6">Cycle<p/>
         </div>
-        <div class="flex sm6 xl6 md6 xs6 pa-0 ma-0" >
+        <div class="flex sm12 xl12 md12 xs12 pa-0 ma-1" >
           <cycle-range :ref="'cycleNoNumber'" :deviceID="deviceID" :parameterName="'CYCLE_NUMBER'" :minValue="1" :maxValue="50000" @parameterChange="deviceParameterChange($event)" />
         </div>
       </div>
@@ -395,6 +395,7 @@ export default {
       this.measureEocButton.status = false
     },
     refresh () {
+      // taskInfo.getDeviceInfo(this.deviceID).parameterSet.CHANNEL_LABEL = ['Z_image_Raw', 'Z_Real_Raw', 'Frequency', 'Cycle', 'Z_imag', 'Z_real', 'Impedance', 'Phase', 'Current', 'Level gain']
       this.workingModeSelect = this.workingModeOptions[taskInfo.getDeviceInfo(this.deviceID).parameterSet.MODE]
       if (this.workingModeSelect != null) {
         this.workingModeSelectChange(this.workingModeSelect)

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

@@ -33,7 +33,7 @@
 
       <!-- 1.5ui -->
       <va-tree-category
-        v-if="workingModeSelect != null && workingModeSelect.id == 0 || workingModeSelect.id == 1 || workingModeSelect.id == 5 || workingModeSelect.id == 6 || workingModeSelect.id == 7 || workingModeSelect.id == 8 || workingModeSelect.id == 9 || workingModeSelect.id == 11"
+        v-if="workingModeSelect != null && workingModeSelect.id == 0 || workingModeSelect.id == 1 || workingModeSelect.id == 2 || workingModeSelect.id == 4 || workingModeSelect.id == 5 || workingModeSelect.id == 6 || workingModeSelect.id == 7 || workingModeSelect.id == 8 || workingModeSelect.id == 9 || workingModeSelect.id == 11 || workingModeSelect.id == 13"
         style="font-size: 20px;"
         :label="'Range ( ' + currentRangeOptions[currentRangeSelect].label + ' )'">
         <va-tree-node>
@@ -42,7 +42,7 @@
       </va-tree-category>
 
       <va-tree-category
-        v-if="workingModeSelect != null && workingModeSelect.id == 0 || workingModeSelect.id == 1 || workingModeSelect.id == 4 ||workingModeSelect.id == 6 || workingModeSelect.id == 7 || workingModeSelect.id == 8 || workingModeSelect.id == 9 || workingModeSelect.id == 11 || workingModeSelect.id == 13"
+        v-if="workingModeSelect != null && workingModeSelect.id == 0 || workingModeSelect.id == 1 || workingModeSelect.id == 2 || workingModeSelect.id == 4 || workingModeSelect.id == 5 || workingModeSelect.id == 6 || workingModeSelect.id == 7 || workingModeSelect.id == 8 || workingModeSelect.id == 9 || workingModeSelect.id == 11 || workingModeSelect.id == 13"
         style="font-size: 20px;"
         :label="'Range ( ' + voltageInRangeOptions[voltageInRangeSelect].label + ' )'">
         <va-tree-node>

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

@@ -1,11 +1,11 @@
 <template>
   <div>
 
-    <elite-parameter-recording v-if="eliteVer=='1'" :ref="'rec_ref'" :deviceID="deviceID"/>
+    <elite-parameter-recording v-if="eliteVer=='1'" :ref="'rec_ref_1'" :deviceID="deviceID"/>
     <!-- <elite-parameter-recording-elitezm15 :ref="'rec_ref'" :deviceID="deviceID"/> -->
     <!--<elite-parameter-recording :ref="'rec_ref'" :deviceID="deviceID"/>-->
-    <elite-parameter-recording-elitezm15 v-else-if="eliteVer=='2'" :ref="'rec_ref'" :deviceID="deviceID"/>
-    <elite-parameter-recording-elite-e-i-s v-else :ref="'rec_ref'" :deviceID="deviceID"/>
+    <elite-parameter-recording-elitezm15 v-else-if="eliteVer=='2'" :ref="'rec_ref_2'" :deviceID="deviceID"/>
+    <elite-parameter-recording-elite-e-i-s v-else :ref="'rec_ref_4'" :deviceID="deviceID"/>
     <!--<elite-parameter-recording :ref="'rec_ref'" :deviceID="deviceID"/>-->
 
   </div>
@@ -53,6 +53,8 @@ export default {
       } else if (JSON.stringify(ver.slice(0, 4)) === JSON.stringify([0, 2, 1, 7])) {
         this.eliteVer = '3' // megafly
         // console.log('3:', JSON.stringify(ver.slice(0, 4)), ',', JSON.stringify([0, 2, 1, 7]))
+      } else {
+        this.eliteVer = '4'
       }
     },
     mqttPub: function (topic, mes) {
@@ -70,11 +72,35 @@ export default {
       this.compareEliteVer(taskInfo.getDeviceInfo(this.deviceID).info.serial_number)
     },
     refresh: function () {
-      this.$nextTick(() => {
-        if (this.$refs.rec_ref != null) {
-          this.$refs.rec_ref.refresh()
-        }
-      })
+      // console.log(this.eliteVer)
+      switch (this.eliteVer) {
+        case '1':
+          this.$nextTick(() => {
+            if (this.$refs.rec_ref_1 != null) {
+              this.$refs.rec_ref_1.refresh()
+            }
+          })
+          break
+        case '2':
+          this.$nextTick(() => {
+            if (this.$refs.rec_ref_2 != null) {
+              this.$refs.rec_ref_2.refresh()
+            }
+          })
+          break
+        case '4':
+          this.$nextTick(() => {
+            if (this.$refs.rec_ref_4 != null) {
+              this.$refs.rec_ref_4.refresh()
+            }
+          })
+          break
+      }
+      // this.$nextTick(() => {
+      //   if (this.$refs.rec_ref != null) {
+      //     this.$refs.rec_ref.refresh()
+      //   }
+      // })
       // console.log('window:3,refresh(this.$nextTick:', this.$nextTick, ',this.$refs:', this.$refs, ')')
     },
 

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

@@ -1,28 +1,5 @@
 <template>
   <div class="flex" >
-    <!-- <div>
-      <div class="row sm12 xl12 md12 xs12">
-        <va-button
-          class="mx-1 px-2 mb-3"
-          color="success"
-          v-if="!recordOn"
-          @click="recordClick"
-          small
-        >
-          Record
-        </va-button>
-        <va-button
-          class="mx-1 px-2 mb-3"
-          color="danger"
-          v-else
-          @click="recordClick"
-          small
-        >
-          Stop
-        </va-button>
-      </div>
-    </div> -->
-
     <va-tree-root >
       <va-tree-category
         style="font-size: 20px;"
@@ -128,62 +105,6 @@
         </va-tree-node>
       </va-tree-category>
 
-      <va-tree-category
-        style="font-size: 20px;"
-        :label="'Radio Frequency'">
-        <va-tree-node>
-          <div class="row">
-            <div class="flex sm12 xl12 md12 xs12">
-              <va-select
-                @input="radioFrequencySelectChange()"
-                :label="''"
-                v-model="radioFrequencySelect"
-                textBy="description"
-                :options="radioFrequencyOptions"
-                :noClear='true'
-              />
-            </div>
-          </div>
-        </va-tree-node>
-      </va-tree-category>
-
-      <va-tree-category
-        style="font-size: 20px;"
-        :label="'Mem Radio Frequency'">
-        <va-tree-node>
-          <div class="row">
-            <div class="flex sm12 xl12 md12 xs12">
-              <va-select
-                @input="memRadioFrequencySelectChange()"
-                :label="''"
-                v-model="memRadioFrequencySelect"
-                textBy="description"
-                :options="memRadioFrequencyOptions"
-              />
-            </div>
-          </div>
-        </va-tree-node>
-      </va-tree-category>
-
-      <va-tree-category
-        style="font-size: 20px;"
-        :label="'Led Brightness'">
-        <va-tree-node>
-          <div class="row">
-            <div class="flex sm12 xl12 md12 xs12">
-              <va-select
-                @input="ledBrightnessSelectChange()"
-                :label="''"
-                v-model="ledBrightnessSelect"
-                textBy="description"
-                :options="ledBrightnessOptions"
-                :noClear='true'
-              />
-            </div>
-          </div>
-        </va-tree-node>
-      </va-tree-category>
-
       <va-tree-category
         style="font-size: 20px;"
         :label="'Accelerator Sensitivity'">
@@ -202,54 +123,13 @@
           </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">
-              <div class="flex row align--center">
-                <va-button slot="append" class="mr-2 pa-1 shrink" small @click="sampleRateChange(4)">
-                  4
-                </va-button>
-                <va-input
-                  @keyup.enter="sampleRateChange(sampleRateInput)"
-                  v-model="sampleRateInput"
-                  class="mb-0"
-                  style="width: 100px;"
-                >
-                  <p slot="append" style="margin-right: 0;" small>
-                    Hz
-                  </p>
-                </va-input>
-                <va-button slot="append" class="ml-2 pa-1 shrink" small @click="sampleRateChange(1000)">
-                  1000
-                </va-button>
-              </div>
-              <va-slider
-                @mouseup.native="sampleRateChange(sampleRate)"
-                @mouseleave.native="sampleRateChange(sampleRate)"
-                @touchend.native="sampleRateChange(sampleRate)"
-                class="flex sm12 xl12 md12 xs12"
-                value-visible
-                v-model="sampleRate"
-                :min="4"
-                :max="1000"
-              />
-            </div>
-          </div>
-        </va-tree-node>
-      </va-tree-category> -->
     </va-tree-root>
-
   </div>
 </template>
 
 <script>
 import { taskInfo } from '../../../../data/task/TaskInfo'
 import { chartData } from '../../../../data/task/ChartsManagement'
-import { mapFields } from 'vuex-map-fields'
 
 export default {
   name: 'NeuliveParameterRecording',
@@ -267,6 +147,7 @@ export default {
   },
   data () {
     return {
+      channelList: [],
       ampGainSelect: null,
       ampGainOptions: [
         // {
@@ -290,144 +171,40 @@ export default {
       sampleRateOptions: [
         {
           id: 0,
-          value: 800,
+          value: 1000,
           description: '1k',
         },
         {
           id: 1,
-          value: 400,
+          value: 2000,
           description: '2k',
         },
         {
           id: 2,
-          value: 200,
+          value: 4000,
           description: '4k',
         },
         {
           id: 3,
-          value: 160,
+          value: 5000,
           description: '5k',
         },
         {
           id: 4,
-          value: 100,
+          value: 8000,
           description: '8k',
         },
         {
           id: 5,
-          value: 80,
+          value: 10000,
           description: '10k',
         },
         {
           id: 6,
-          value: 40,
+          value: 20000,
           description: '20k',
         },
       ],
-      radioFrequencySelect: null,
-      radioFrequencyOptions: [
-        {
-          id: 0,
-          value: -20,
-          description: '-20',
-        },
-        {
-          id: 1,
-          value: -16,
-          description: '-16',
-        },
-        {
-          id: 2,
-          value: -12,
-          description: '-12',
-        },
-        {
-          id: 3,
-          value: -8,
-          description: '-8',
-        },
-        {
-          id: 4,
-          value: -4,
-          description: '-4',
-        },
-        {
-          id: 5,
-          value: 0,
-          description: '0',
-        },
-        {
-          id: 6,
-          value: 4,
-          description: '4',
-        },
-        {
-          id: 7,
-          value: 8,
-          description: '8',
-        },
-      ],
-      memRadioFrequencySelect: null,
-      memRadioFrequencyOptions: [
-        {
-          id: 0,
-          value: -20,
-          description: '-20',
-        },
-        {
-          id: 1,
-          value: -16,
-          description: '-16',
-        },
-        {
-          id: 2,
-          value: -12,
-          description: '-12',
-        },
-        {
-          id: 3,
-          value: -8,
-          description: '-8',
-        },
-        {
-          id: 4,
-          value: -4,
-          description: '-4',
-        },
-        {
-          id: 5,
-          value: 0,
-          description: '0',
-        },
-        {
-          id: 6,
-          value: 4,
-          description: '4',
-        },
-        {
-          id: 7,
-          value: 8,
-          description: '8',
-        },
-      ],
-      ledBrightnessSelect: null,
-      ledBrightnessOptions: [
-        {
-          id: 0,
-          value: 0,
-          description: 'off',
-        },
-        {
-          id: 1,
-          value: 1,
-          description: 'bright',
-        },
-        {
-          id: 2,
-          value: 2,
-          description: 'normal',
-        },
-      ],
       acceleratorSensitivitySelect: null,
       acceleratorSensitivityOptions: [
         {
@@ -457,11 +234,6 @@ export default {
       axisChannelList: [],
     }
   },
-  computed: {
-    ...mapFields('taskContent', [
-      'channelList',
-    ]),
-  },
   mqtt: {
   },
   methods: {
@@ -477,7 +249,7 @@ export default {
         }
       })
       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.ADC_CLOCK)]
+      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()
@@ -494,10 +266,6 @@ export default {
           }
         }
       })
-
-      this.radioFrequencySelect = this.radioFrequencyOptions[taskInfo.getDeviceInfo(this.deviceID).parameterSet.RADIO_FREQUENCY]
-      this.memRadioFrequencySelect = this.memRadioFrequencyOptions[taskInfo.getDeviceInfo(this.deviceID).parameterSet.MEM_RADIO_FREQUENCY]
-      this.ledBrightnessSelect = this.ledBrightnessOptions[taskInfo.getDeviceInfo(this.deviceID).parameterSet.LED_BRIGHTNESS]
       this.acceleratorSensitivitySelect = this.acceleratorSensitivityOptions[taskInfo.getDeviceInfo(this.deviceID).parameterSet.ACCELERATOR_S]
     },
     channelClickAdd (val) {
@@ -559,57 +327,13 @@ export default {
       }
     },
     sampleRateSelectChange () {
-      if (this.sampleRateSelect != null && this.sampleRateSelect.value !== ((taskInfo.getDeviceInfo(this.deviceID).parameterSet.ADC_CLOCK))) {
+      if (this.sampleRateSelect != null && this.sampleRateSelect.value !== ((taskInfo.getDeviceInfo(this.deviceID).parameterSet.SAMPLE_RATE))) {
+        const adcClock = 8e5 / this.sampleRateSelect.value
         this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
           header: 'device_parameter/0',
           device: taskInfo.getRawDeviceID(this.deviceID),
-          parameter: 'ADC_CLOCK',
-          content: this.sampleRateSelect.value,
-        }))
-      }
-    },
-    radioFrequencySelectChange () {
-      if (this.radioFrequencySelect != null && this.radioFrequencySelect.id !== ((taskInfo.getDeviceInfo(this.deviceID).parameterSet.RADIO_FREQUENCY))) {
-        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
-          header: 'device_parameter/0',
-          device: taskInfo.getRawDeviceID(this.deviceID),
-          parameter: 'RADIO_FREQUENCY',
-          content: this.radioFrequencySelect.id,
-        }))
-        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
-          header: 'device_update_radio_frequency/0',
-          device: taskInfo.getRawDeviceID(this.deviceID),
-          content: this.radioFrequencySelect.value,
-        }))
-      }
-    },
-    memRadioFrequencySelectChange () {
-      if (this.memRadioFrequencySelect != null && this.memRadioFrequencySelect.id !== ((taskInfo.getDeviceInfo(this.deviceID).parameterSet.MEM_RADIO_FREQUENCY))) {
-        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
-          header: 'device_parameter/0',
-          device: taskInfo.getRawDeviceID(this.deviceID),
-          parameter: 'MEM_RADIO_FREQUENCY',
-          content: this.memRadioFrequencySelect.id,
-        }))
-        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
-          header: 'device_set_central_rf/0',
-          device: taskInfo.getRawDeviceID(this.deviceID),
-          content: this.memRadioFrequencySelect.value,
-        }))
-      }
-    },
-    ledBrightnessSelectChange () {
-      if (this.ledBrightnessSelect != null && this.ledBrightnessSelect.id !== ((taskInfo.getDeviceInfo(this.deviceID).parameterSet.LED_BRIGHTNESS))) {
-        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
-          header: 'device_parameter/0',
-          device: taskInfo.getRawDeviceID(this.deviceID),
-          parameter: 'LED_BRIGHTNESS',
-          content: this.ledBrightnessSelect.id,
-        }))
-        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
-          header: 'device_update_led_brightness/0',
-          device: taskInfo.getRawDeviceID(this.deviceID),
-          content: this.ledBrightnessSelect.value,
+          parameter: 'SAMPLE_RATE|ADC_CLOCK',
+          content: `${this.sampleRateSelect.value}|${String(adcClock)}`,
         }))
       }
     },
@@ -649,35 +373,18 @@ export default {
         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) {
-              charts[chartID].yAxis[seriesIndex].min = -scaleRange
-              charts[chartID].yAxis[seriesIndex].max = scaleRange
+              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
+              }
             }
           }
         }
       }
     },
-    // sampleRateChange (val) {
-    //   if (this.sampleRate == null) {
-    //     return false
-    //   }
-    //   if (isNaN(val) || parseInt(val) > 1000 || parseInt(val) < 4) {
-    //     this.sampleRateInput = '1000'
-    //     this.sampleRate = 1000
-    //     return false
-    //   }
-    //   if (parseInt(this.sampleRateInput) !== this.sampleRate || this.sampleRate !== parseInt(val)) {
-    //     this.sampleRateInput = String(val)
-    //     this.sampleRate = parseInt(val)
-    //   }
-    //   if (this.sampleRate !== parseInt(200 / parseFloat(taskInfo.getDeviceInfo(this.deviceID).parameterSet.ADC_CLOCK / 1000))) {
-    //     this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
-    //       header: 'device_parameter/0',
-    //       device: taskInfo.getRawDeviceID(this.deviceID),
-    //       parameter: 'ADC_CLOCK',
-    //       content: parseInt(parseFloat(1 / parseFloat(this.sampleRate / 200)) * 1000),
-    //     }))
-    //   }
-    // },
     recordClick () {
       this.recordOn = !this.recordOn
       if (this.recordOn) {

src/components/task/content/parameter/NeuliveParameterRecording35.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 [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32]"
+                :key="channel"
+              >
+                <va-button
+                  class="mx-1 px-1"
+                  v-if="channelList != null && channelList.indexOf(channel) >= 0"
+                  @click="channelClickRemove(channel)"
+                  small
+                >
+                  {{channel}}
+                </va-button>
+                <va-button
+                  class="mx-1 px-1"
+                  v-if="channelList == null || channelList.indexOf(channel) < 0"
+                  @click="channelClickAdd(channel)"
+                  small outline
+                >
+                  {{channel}}
+                </va-button>
+              </div>
+            </div>
+          </div>
+        </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="mx-1 px-1"
+                  v-if="axisChannelList != null && axisChannelList.indexOf(axisChannel) >= 0"
+                  @click="axisChannelClickRemove(axisChannel)"
+                  small
+                >
+                  {{axisChannel}}
+                </va-button>
+                <va-button
+                  class="mx-1 px-1"
+                  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 { chartData } from '../../../../data/task/ChartsManagement'
+
+export default {
+  name: 'NeuliveParameterRecording',
+  components: {
+  },
+  props: {
+    deviceID: {
+      type: Number,
+      required: true,
+    },
+    deviceName: {
+      type: String,
+      default: 'Neulive',
+    },
+  },
+  data () {
+    return {
+      channelList: [],
+      ampGainSelect: null,
+      ampGainOptions: [
+        // {
+        //   id: 0,
+        //   description: '25',
+        // },
+        {
+          id: 0,
+          description: '100',
+        },
+        {
+          id: 1,
+          description: '400',
+        },
+        {
+          id: 2,
+          description: '800',
+        },
+      ],
+      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
+      // todo RECORDING_CH to RECORDING_CH_H & L
+      const channelSetLow = taskInfo.getDeviceInfo(this.deviceID).parameterSet.RECORDING_CH_L.toString(2).split('').reverse()
+      channelSetLow.forEach((element, index) => {
+        if (parseInt(element) > 0) {
+          this.channelList.push(index + 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)
+        }
+      })
+      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
+      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 <= 16 && val > 0) {
+        this.channelList.push(val)
+
+        let channelSet = ''
+        for (let i = 16; 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: 'RECORDING_CH_L',
+            content: 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) {
+            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: 'RECORDING_CH_H',
+            content: channelValue,
+          }))
+        }
+        this.recordingChannelReset(this.channelList)
+      } else {
+        this.pageToast('Recording channels cannot choose more than 32.')
+      }
+    },
+    channelClickRemove (val) {
+      if (this.channelList.indexOf(val) >= 0 && val <= 16 && val > 0) {
+        this.channelList.splice(this.channelList.indexOf(val), 1)
+        let channelSet = ''
+        for (let i = 16; 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: 'RECORDING_CH_L',
+            content: channelValue,
+          }))
+        }
+        this.recordingChannelReset(this.channelList)
+      } else if (this.channelList.indexOf(val) >= 0 && val <= 32 && val > 16) {
+        this.channelList.splice(this.channelList.indexOf(val), 1)
+        let channelSet = ''
+        for (let i = 32; i >= 17; 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: 'RECORDING_CH_H',
+            content: channelValue,
+          }))
+        }
+        this.recordingChannelReset(this.channelList)
+      }
+    },
+    recordingChannelReset (channelList) {
+      let channelSet = ''
+      for (let i = 32; i >= 1; i--) {
+        if (channelList.indexOf(i) >= 0) {
+          channelSet += '1'
+        } else {
+          channelSet += '0'
+        }
+      }
+      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,
+        }))
+      }
+    },
+    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 = chartData.getAllChartsData()
+        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>

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

@@ -0,0 +1,264 @@
+<template>
+  <div class="flex" >
+    <va-tree-root >
+      <va-tree-category
+        style="font-size: 20px;"
+        :label="'Radio Frequency'">
+        <va-tree-node>
+          <div class="row">
+            <div class="flex sm12 xl12 md12 xs12">
+              <va-select
+                @input="radioFrequencySelectChange()"
+                :label="''"
+                v-model="radioFrequencySelect"
+                textBy="description"
+                :options="radioFrequencyOptions"
+                :noClear='true'
+              />
+            </div>
+          </div>
+        </va-tree-node>
+      </va-tree-category>
+
+      <va-tree-category
+        style="font-size: 20px;"
+        :label="'Mem Radio Frequency'">
+        <va-tree-node>
+          <div class="row">
+            <div class="flex sm12 xl12 md12 xs12">
+              <va-select
+                @input="memRadioFrequencySelectChange()"
+                :label="''"
+                v-model="memRadioFrequencySelect"
+                textBy="description"
+                :options="memRadioFrequencyOptions"
+              />
+            </div>
+          </div>
+        </va-tree-node>
+      </va-tree-category>
+
+      <va-tree-category
+        style="font-size: 20px;"
+        :label="'Led Brightness'">
+        <va-tree-node>
+          <div class="row">
+            <div class="flex sm12 xl12 md12 xs12">
+              <va-select
+                @input="ledBrightnessSelectChange()"
+                :label="''"
+                v-model="ledBrightnessSelect"
+                textBy="description"
+                :options="ledBrightnessOptions"
+                :noClear='true'
+              />
+            </div>
+          </div>
+        </va-tree-node>
+      </va-tree-category>
+    </va-tree-root>
+
+  </div>
+</template>
+
+<script>
+import { taskInfo } from '../../../../data/task/TaskInfo'
+
+export default {
+  name: 'NeuliveParameterRecording',
+  components: {
+  },
+  props: {
+    deviceID: {
+      type: Number,
+      required: true,
+    },
+    deviceName: {
+      type: String,
+      default: 'Neulive',
+    },
+  },
+  data () {
+    return {
+      radioFrequencySelect: null,
+      radioFrequencyOptions: [
+        {
+          id: 0,
+          value: -20,
+          description: '-20',
+        },
+        {
+          id: 1,
+          value: -16,
+          description: '-16',
+        },
+        {
+          id: 2,
+          value: -12,
+          description: '-12',
+        },
+        {
+          id: 3,
+          value: -8,
+          description: '-8',
+        },
+        {
+          id: 4,
+          value: -4,
+          description: '-4',
+        },
+        {
+          id: 5,
+          value: 0,
+          description: '0',
+        },
+        {
+          id: 6,
+          value: 4,
+          description: '4',
+        },
+        {
+          id: 7,
+          value: 8,
+          description: '8',
+        },
+      ],
+      memRadioFrequencySelect: null,
+      memRadioFrequencyOptions: [
+        {
+          id: 0,
+          value: -20,
+          description: '-20',
+        },
+        {
+          id: 1,
+          value: -16,
+          description: '-16',
+        },
+        {
+          id: 2,
+          value: -12,
+          description: '-12',
+        },
+        {
+          id: 3,
+          value: -8,
+          description: '-8',
+        },
+        {
+          id: 4,
+          value: -4,
+          description: '-4',
+        },
+        {
+          id: 5,
+          value: 0,
+          description: '0',
+        },
+        {
+          id: 6,
+          value: 4,
+          description: '4',
+        },
+        {
+          id: 7,
+          value: 8,
+          description: '8',
+        },
+      ],
+      ledBrightnessSelect: null,
+      ledBrightnessOptions: [
+        {
+          id: 0,
+          value: 0,
+          description: 'off',
+        },
+        {
+          id: 1,
+          value: 1,
+          description: 'bright',
+        },
+        {
+          id: 2,
+          value: 2,
+          description: 'normal',
+        },
+      ],
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    mqttPub: function (topic, mes) {
+      this.$mqtt.publish(topic, mes)
+    },
+    refresh () {
+      this.radioFrequencySelect = this.radioFrequencyOptions[taskInfo.getDeviceInfo(this.deviceID).parameterSet.RADIO_FREQUENCY]
+      this.memRadioFrequencySelect = this.memRadioFrequencyOptions[taskInfo.getDeviceInfo(this.deviceID).parameterSet.MEM_RADIO_FREQUENCY]
+      this.ledBrightnessSelect = this.ledBrightnessOptions[taskInfo.getDeviceInfo(this.deviceID).parameterSet.LED_BRIGHTNESS]
+    },
+    radioFrequencySelectChange () {
+      if (this.radioFrequencySelect != null && this.radioFrequencySelect.id !== ((taskInfo.getDeviceInfo(this.deviceID).parameterSet.RADIO_FREQUENCY))) {
+        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+          header: 'device_parameter/0',
+          device: taskInfo.getRawDeviceID(this.deviceID),
+          parameter: 'RADIO_FREQUENCY',
+          content: this.radioFrequencySelect.id,
+        }))
+        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+          header: 'device_update_radio_frequency/0',
+          device: taskInfo.getRawDeviceID(this.deviceID),
+          content: this.radioFrequencySelect.value,
+        }))
+      }
+    },
+    memRadioFrequencySelectChange () {
+      if (this.memRadioFrequencySelect != null && this.memRadioFrequencySelect.id !== ((taskInfo.getDeviceInfo(this.deviceID).parameterSet.MEM_RADIO_FREQUENCY))) {
+        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+          header: 'device_parameter/0',
+          device: taskInfo.getRawDeviceID(this.deviceID),
+          parameter: 'MEM_RADIO_FREQUENCY',
+          content: this.memRadioFrequencySelect.id,
+        }))
+        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+          header: 'device_set_central_rf/0',
+          device: taskInfo.getRawDeviceID(this.deviceID),
+          content: this.memRadioFrequencySelect.value,
+        }))
+      }
+    },
+    ledBrightnessSelectChange () {
+      if (this.ledBrightnessSelect != null && this.ledBrightnessSelect.id !== ((taskInfo.getDeviceInfo(this.deviceID).parameterSet.LED_BRIGHTNESS))) {
+        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+          header: 'device_parameter/0',
+          device: taskInfo.getRawDeviceID(this.deviceID),
+          parameter: 'LED_BRIGHTNESS',
+          content: this.ledBrightnessSelect.id,
+        }))
+        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+          header: 'device_update_led_brightness/0',
+          device: taskInfo.getRawDeviceID(this.deviceID),
+          content: this.ledBrightnessSelect.value,
+        }))
+      }
+    },
+    pageToast: function (mes) {
+      this.showToast(
+        mes,
+        {
+          icon: 'fa-bell',
+          position: 'bottom-right',
+          duration: 4000,
+        },
+      )
+    },
+  },
+  mounted () {
+    this.refresh()
+  },
+  destroyed () {
+  },
+  watch: {
+  },
+}
+</script>

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

@@ -205,7 +205,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"
@@ -219,10 +219,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"
@@ -361,9 +358,6 @@
 
 <script>
 import { taskInfo } from '../../../../data/task/TaskInfo'
-import { mapActions, mapMutations } from 'vuex'
-import { mapFields } from 'vuex-map-fields'
-import types from '@/store/modules/task/content/types'
 
 export default {
   name: 'NeuliveParameterStimulation',
@@ -383,6 +377,9 @@ export default {
     return {
       showGuideLineModal: { ELECTRODE: false, PATTERN: false },
       stimulationOn: false,
+      posChannelList: [2],
+      negChannelList: [1],
+      stimulateElectrodeSelect: null,
       stimulateElectrodeOptions: [
         {
           label: 'Monopolar',
@@ -393,6 +390,7 @@ export default {
           value: 1,
         },
       ],
+      TRangeErrorMsgList: [{ id: 1, showError: false, errorMsg: [''] }, { id: 2, showError: false, errorMsg: [''] }, { id: 3, showError: false, errorMsg: [''] }, { id: 4, showError: false, errorMsg: [''] }],
       cycleNumberSelect: null,
       cycleNumberOptions: [
         {
@@ -456,12 +454,6 @@ export default {
     }
   },
   computed: {
-    ...mapFields('taskContent', [
-      'posChannelList',
-      'negChannelList',
-      'stimulateElectrodeSelect',
-      'TRangeErrorMsgList',
-    ]),
     stimulateDisable () {
       // posChannel and negChannel at least one && t1 ~ t4 > 0
       const totalStiTime = (this.t1Range + this.t2Range + this.t3Range + this.t4Range) * 10
@@ -471,6 +463,20 @@ export default {
         return true
       }
     },
+    TRangeStatusCheck () {
+      let flag = true
+      for (let i = 0; i < this.TRangeErrorMsgList.length; i++) {
+        if (this.TRangeErrorMsgList[i].showError === true) {
+          flag = false
+          break
+        }
+      }
+      if (flag === true) {
+        return true
+      } else {
+        return false
+      }
+    },
   },
   mqtt: {
   },
@@ -487,24 +493,22 @@ export default {
     },
     refreshPattern () {
       this.patternModeSelect = taskInfo.getDeviceInfo(this.deviceID).parameterSet.STI_PATTERN ? 1 : 0
-      this.t1Range = taskInfo.getDeviceInfo(this.deviceID).parameterSet.STI_T1[0]
-      this.t1RangeInput = String((this.t1Range * 10) / this.unitMultiply)
-      this.t1RangeArray.fill(this.t1Range, 0)
-      this.t2Range = taskInfo.getDeviceInfo(this.deviceID).parameterSet.STI_T2[0]
-      this.t2RangeInput = String((this.t2Range * 10) / this.unitMultiply)
-      this.t2RangeArray.fill(this.t2Range, 0)
-      this.t3Range = taskInfo.getDeviceInfo(this.deviceID).parameterSet.STI_T3[0]
-      this.t3RangeInput = String((this.t3Range * 10) / this.unitMultiply)
-      this.t3RangeArray.fill(this.t3Range, 0)
-      this.t4Range = taskInfo.getDeviceInfo(this.deviceID).parameterSet.STI_T4[0]
-      this.t4RangeInput = String((this.t4Range * 10) / this.unitMultiply)
-      this.t4RangeArray.fill(this.t4Range, 0)
-
-      if (this.patternModeSelect === 0) {
-        this.periodNumber = (this.t1Range + this.t4Range) * 10
-      } else {
-        this.periodNumber = (this.t1Range + this.t2Range + this.t3Range + this.t4Range) * 10
+      if (this.TRangeStatusCheck === true) { // if t1~t4 is not valid input, not need to refresh
+        this.t1Range = taskInfo.getDeviceInfo(this.deviceID).parameterSet.STI_T1[0]
+        this.t1RangeInput = String((this.t1Range * 10) / this.unitMultiply)
+        this.t1RangeArray.fill(this.t1Range, 0)
+        this.t2Range = taskInfo.getDeviceInfo(this.deviceID).parameterSet.STI_T2[0]
+        this.t2RangeInput = String((this.t2Range * 10) / this.unitMultiply)
+        this.t2RangeArray.fill(this.t2Range, 0)
+        this.t3Range = taskInfo.getDeviceInfo(this.deviceID).parameterSet.STI_T3[0]
+        this.t3RangeInput = String((this.t3Range * 10) / this.unitMultiply)
+        this.t3RangeArray.fill(this.t3Range, 0)
+        this.t4Range = taskInfo.getDeviceInfo(this.deviceID).parameterSet.STI_T4[0]
+        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)
 
       if (this.periodNumber !== 0) {
@@ -531,11 +535,6 @@ export default {
           }
         }
       })
-      // }
-      // console.log('cha',stiChannelSet)
-      // console.log('pol',stiPolaritySet)
-      // console.log('pos',this.posChannelList)
-      // console.log('neg',this.negChannelList)
       this.stimulateElectrodeSelect = taskInfo.getDeviceInfo(this.deviceID).parameterSet.STI_H_BRIDGE ? 1 : 0
       this.cycleNumberSelect = taskInfo.getDeviceInfo(this.deviceID).parameterSet.CONTINUOUS_STI ? 1 : 0
       this.cycleNumber = taskInfo.getDeviceInfo(this.deviceID).parameterSet.STI_CYCLE_LIST[0]
@@ -545,17 +544,6 @@ export default {
       this.amplitudeNumberInput = String(this.amplitudeNumber)
 
       this.refreshPattern()
-      // console.log('STI_CONTINUOUS', this.cycleNumberSelect)
-      // console.log('STI_H_BRIDGE', this.stimulateElectrodeSelect)
-      // console.log('STI_PATTERN', this.patternModeSelect)
-      // console.log('STI_T1', taskInfo.getDeviceInfo(this.deviceID).parameterSet.STI_T1[0])
-      // console.log('STI_T2', taskInfo.getDeviceInfo(this.deviceID).parameterSet.STI_T2[0])
-      // console.log('STI_T3', taskInfo.getDeviceInfo(this.deviceID).parameterSet.STI_T3[0])
-      // console.log('STI_T4', taskInfo.getDeviceInfo(this.deviceID).parameterSet.STI_T4[0])
-      // console.log(this.periodNumber)
-      // console.log(this.periodNumberInput)
-      // console.log(this.frequencyNumber)
-      // console.log(this.frequencyNumberInput)
     },
     transUnit () {
       if (this.unitSelect === 0) { // s
@@ -677,6 +665,8 @@ export default {
         }))
       }
     },
+
+    // [Region] Neulive sti pattern block
     patternModeSelectChange () {
       if (this.patternModeSelect == null) {
         return false
@@ -689,11 +679,26 @@ export default {
         content: this.patternModeSelect,
       }))
 
+      if (this.patternModeSelect === 0) {
+        this.t2Range = 0
+        this.t3Range = 0
+      } else if (this.patternModeSelect === 1) {
+        this.t2Range = 0
+        this.t3Range = 10
+        this.t3RangeInput = String((this.t3Range * 10) / this.unitMultiply)
+      }
+
       this.autoComputeT4()
+      const check1 = this.checkIndividualTRange(1, this.t1Range)
+      const check2 = this.checkIndividualTRange(2, this.t2Range)
+      const check3 = this.checkIndividualTRange(3, this.t3Range)
       const check4 = this.checkIndividualTRange(4, this.t4Range)
-      if (check4) {
+
+      // if pass, call this.updateTimeRange(), if any fail, call updateErrorMsg in this.checkIndividualTRange()
+      if (check1 === true && check2 === true && check3 === true && check4 === true) {
         this.updateTimeRange()
       }
+      this.updateStiTRangeCheckParam()
     },
     frequencyNumberChange (val) {
       if (this.frequencyNumberInput == null || isNaN(val)) {
@@ -716,16 +721,18 @@ export default {
       this.periodNumber = (1e6 / this.frequencyNumber).toFixed(3) // us
       this.periodNumberInput = String(this.periodNumber / this.unitMultiply)
 
-      this.autoResetAllTRange()
+      this.autoComputeT4()
 
       const check1 = this.checkIndividualTRange(1, this.t1Range)
       const check2 = this.checkIndividualTRange(2, this.t2Range)
       const check3 = this.checkIndividualTRange(3, this.t3Range)
       const check4 = this.checkIndividualTRange(4, this.t4Range)
+
       // if pass, call this.updateTimeRange(), if any fail, call updateErrorMsg in this.checkIndividualTRange()
-      if (check1 && check2 && check3 && check4) {
+      if (check1 === true && check2 === true && check3 === true && check4 === true) {
         this.updateTimeRange()
       }
+      this.updateStiTRangeCheckParam()
     },
     periodNumberChange (val) {
       const usVal = parseFloat(val * this.unitMultiply) // us
@@ -749,33 +756,18 @@ export default {
       this.frequencyNumber = parseInt(1e6 / this.periodNumber)
       this.frequencyNumberInput = String(this.frequencyNumber)
 
-      this.autoResetAllTRange()
+      this.autoComputeT4()
 
       const check1 = this.checkIndividualTRange(1, this.t1Range)
       const check2 = this.checkIndividualTRange(2, this.t2Range)
       const check3 = this.checkIndividualTRange(3, this.t3Range)
       const check4 = this.checkIndividualTRange(4, this.t4Range)
+
       // if pass, call this.updateTimeRange(), if any fail, call updateErrorMsg in this.checkIndividualTRange()
-      if (check1 && check2 && check3 && check4) {
+      if (check1 === true && check2 === true && check3 === true && check4 === true) {
         this.updateTimeRange()
       }
-    },
-    autoResetAllTRange () {
-      if (this.patternModeSelect === 0) { // Monophasic
-        this.t1Range = 10
-        this.t1RangeInput = String((this.t1Range * 10) / this.unitMultiply)
-        this.t4Range = this.periodNumber / 10 - this.t1Range
-        this.t4RangeInput = String((this.t4Range * 10) / this.unitMultiply)
-      } else if (this.patternModeSelect === 1) { // Biphasic
-        this.t1Range = 10
-        this.t1RangeInput = String((this.t1Range * 10) / this.unitMultiply)
-        this.t2Range = 10
-        this.t2RangeInput = String((this.t2Range * 10) / this.unitMultiply)
-        this.t3Range = 10
-        this.t3RangeInput = String((this.t3Range * 10) / this.unitMultiply)
-        this.t4Range = this.periodNumber / 10 - this.t1Range - this.t2Range - this.t3Range
-        this.t4RangeInput = String((this.t4Range * 10) / this.unitMultiply)
-      }
+      this.updateStiTRangeCheckParam()
     },
     timeRangeChange (stiIimeSelect, inputVal) {
       inputVal = parseFloat(inputVal)
@@ -802,90 +794,129 @@ export default {
           break
       }
 
-      const overallStatus = this.checkOverallTRange()
       const status1 = this.checkIndividualTRange(1, this.t1Range)
       const status2 = this.checkIndividualTRange(2, this.t2Range)
       const status3 = this.checkIndividualTRange(3, this.t3Range)
       const status4 = this.checkIndividualTRange(4, this.t4Range)
-      if (overallStatus && status1 && status2 && status3 && status4) {
-        this.resetAllTRangeErrorMsgParam({ totalT: 4 })
+      if (status1 && status2 && status3 && status4) {
+        this.resetAllTRangeErrorMsg({ totalT: 4 })
         this.updateTimeRange()
       }
+      this.updateStiTRangeCheckParam()
+    },
+
+    updateStiTRangeCheckParam () {
+      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,
+      }))
+    },
+    autoResetAllTRange () {
+      if (this.patternModeSelect === 0) { // Monophasic
+        this.t1Range = 10
+        this.t1RangeInput = String((this.t1Range * 10) / this.unitMultiply)
+        this.t4Range = this.periodNumber / 10 - this.t1Range
+        this.t4RangeInput = String((this.t4Range * 10) / this.unitMultiply)
+      } else if (this.patternModeSelect === 1) { // Biphasic
+        this.t1Range = 10
+        this.t1RangeInput = String((this.t1Range * 10) / this.unitMultiply)
+        this.t2Range = 10
+        this.t2RangeInput = String((this.t2Range * 10) / this.unitMultiply)
+        this.t3Range = 10
+        this.t3RangeInput = String((this.t3Range * 10) / this.unitMultiply)
+        this.t4Range = this.periodNumber / 10 - this.t1Range - this.t2Range - this.t3Range
+        this.t4RangeInput = String((this.t4Range * 10) / this.unitMultiply)
+      }
     },
     autoComputeT4 () {
-      if (this.patternModeSelect === 0) {
-        this.t4Range = (this.periodNumber / 10) - this.t1Range
-        this.t4RangeInput = String((this.t4Range * 10) / this.unitMultiply)
-        this.pageToast('Auto complete T4 value')
-      } else if (this.patternModeSelect === 1) {
-        this.t4Range = (this.periodNumber / 10) - this.t1Range - this.t2Range - this.t3Range
-        this.t4RangeInput = String((this.t4Range * 10) / this.unitMultiply)
-        this.pageToast('Auto complete T4 value')
+      this.t4Range = (this.periodNumber / 10) - this.t1Range - this.t2Range - this.t3Range
+      this.t4RangeInput = String((this.t4Range * 10) / this.unitMultiply)
+      if (this.t4Range >= 0) {
+        this.pageToast(`T4 = ${(this.t4Range / 100).toFixed(1)} ms`)
+      } else {
+        this.pageToast('T4 can not be negative. Please check T1~T3 setting.')
       }
     },
-    checkOverallTRange () {
-      let status = true
-      if (this.t1Range > this.periodNumber) {
-        this.updateTRangeErrorMsgParam({ stiIimeSelect: 1, status: true, msg: 'T1 > Period' })
-        status = false
+
+    // [SubRegion] check sti T range setting helper function
+    // update individual t range error msg
+    updateTRangeErrorMsg (payload) {
+      const index = payload.stiIimeSelect - 1
+      this.TRangeErrorMsgList[index].showError = payload.status
+      this.TRangeErrorMsgList[index].errorMsg[0] = payload.msg
+    },
+    resetAllTRangeErrorMsg (payload) {
+      for (let i = 1; i <= payload.totalT; i++) {
+        this.updateTRangeErrorMsg({ stiIimeSelect: i, status: false, msg: '' })
       }
-      if (this.t2Range > this.periodNumber) {
-        this.updateTRangeErrorMsgParam({ stiIimeSelect: 2, status: true, msg: 'T2 > Period' })
-        status = false
-      }
-      if (this.t3Range > this.periodNumber) {
-        this.updateTRangeErrorMsgParam({ stiIimeSelect: 3, status: true, msg: 'T3 > Period' })
-        status = false
-      }
-      if (this.t4Range > this.periodNumber) {
-        this.updateTRangeErrorMsgParam({ stiIimeSelect: 4, status: true, msg: 'T4 > Period' })
-        status = false
-      }
-      return status
     },
     checkIndividualTRange (stiIimeSelect, val) {
       // val unit: us
       val = parseFloat(val) * 10 // UI us
       if (val < 0 || isNaN(val)) {
-        this.updateTRangeErrorMsgParam({ stiIimeSelect: stiIimeSelect, status: true, msg: 'T > 0' })
+        this.updateTRangeErrorMsg({ stiIimeSelect: stiIimeSelect, status: true, msg: `T${stiIimeSelect} can not be negative. Please check your setting.` })
         return false
       }
 
       switch (stiIimeSelect) {
         case 1:
           if (val < 100 || val > 10230) { // us
-            this.updateTRangeErrorMsgParam({ stiIimeSelect: stiIimeSelect, status: true, msg: '0.1ms <= T1 <= 10.23ms' })
+            this.updateTRangeErrorMsg({ stiIimeSelect: stiIimeSelect, status: true, msg: '0.1ms <= T1 <= 10.23ms' })
+            return false
+          } else if (val > this.periodNumber) {
+            this.updateTRangeErrorMsg({ stiIimeSelect: stiIimeSelect, status: true, msg: 'T1 > PERIOD' })
             return false
           } else {
-            this.updateTRangeErrorMsgParam({ stiIimeSelect: stiIimeSelect, status: false, msg: '' })
+            this.updateTRangeErrorMsg({ stiIimeSelect: stiIimeSelect, status: false, msg: '' })
             return true
           }
         case 2:
-          if (val < 0 || val > 10230) { // us
-            this.updateTRangeErrorMsgParam({ stiIimeSelect: stiIimeSelect, status: true, msg: '0ms <= T2 <= 10.23ms' })
-            return false
-          } else {
-            this.updateTRangeErrorMsgParam({ stiIimeSelect: stiIimeSelect, status: false, msg: '' })
+          if (this.patternModeSelect === 1) { // biphasic
+            if (val < 0 || val > 10230) { // us
+              this.updateTRangeErrorMsg({ stiIimeSelect: stiIimeSelect, status: true, msg: '0ms <= T2 <= 10.23ms' })
+              return false
+            } else if (val > this.periodNumber) {
+              this.updateTRangeErrorMsg({ stiIimeSelect: stiIimeSelect, status: true, msg: 'T2 > PERIOD' })
+              return false
+            } else {
+              this.updateTRangeErrorMsg({ stiIimeSelect: stiIimeSelect, status: false, msg: '' })
+              return true
+            }
+          } else { // monophasic not need t2
+            this.updateTRangeErrorMsg({ stiIimeSelect: stiIimeSelect, status: false, msg: '' })
             return true
           }
         case 3:
-          if (val < 100 || val > 10230) { // us
-            this.updateTRangeErrorMsgParam({ stiIimeSelect: stiIimeSelect, status: true, msg: '0.1ms <= T3 <= 10.23ms' })
-            return false
-          } else {
-            this.updateTRangeErrorMsgParam({ stiIimeSelect: stiIimeSelect, status: false, msg: '' })
+          if (this.patternModeSelect === 1) { // biphasic
+            if (val < 100 || val > 10230) { // us
+              this.updateTRangeErrorMsg({ stiIimeSelect: stiIimeSelect, status: true, msg: '0.1ms <= T3 <= 10.23ms' })
+              return false
+            } else if (val > this.periodNumber) {
+              this.updateTRangeErrorMsg({ stiIimeSelect: stiIimeSelect, status: true, msg: 'T3 > PERIOD' })
+              return false
+            } else {
+              this.updateTRangeErrorMsg({ stiIimeSelect: stiIimeSelect, status: false, msg: '' })
+              return true
+            }
+          } else { // monophasic not need t3
+            this.updateTRangeErrorMsg({ stiIimeSelect: stiIimeSelect, status: false, msg: '' })
             return true
           }
         case 4:
           if (val < 0 || val > 1310710) { // us
-            this.updateTRangeErrorMsgParam({ stiIimeSelect: stiIimeSelect, status: true, msg: '0ms <= T4 <= 1310.71ms' })
+            this.updateTRangeErrorMsg({ stiIimeSelect: stiIimeSelect, status: true, msg: '0ms <= T4 <= 1310.71ms' })
             return false
           } else {
-            this.updateTRangeErrorMsgParam({ stiIimeSelect: stiIimeSelect, status: false, msg: '' })
+            this.updateTRangeErrorMsg({ stiIimeSelect: stiIimeSelect, status: false, msg: '' })
             return true
           }
       }
     },
+    // [EndSubRegion]
+    // [EndRegion]
+
     updateStiChannel () {
       // stiChannelSet (+,-), stiPolaritySet (+)
       let stiChannelSet = ''
@@ -960,12 +991,6 @@ export default {
         },
       )
     },
-
-    ...mapActions('taskContent', [types.param.resetAllTRangeErrorMsg]),
-    ...mapMutations('taskContent', [types.param.initTRangeErrorMsgList, types.param.updateTRangeErrorMsg]),
-  },
-  created () {
-    this.initTRangeErrorMsgListParam({ totalT: 4 })
   },
   mounted () {
     this.refresh()

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

@@ -7,7 +7,27 @@
         :label="'RECORDING'"
       >
         <va-tree-node>
-          <neulive-parameter-recording :ref="'rec_ref'" :deviceID="deviceID" @record="start()" @record_stop="stop()"/>
+          <neulive-parameter-recording
+            v-if="
+              (device)
+                ? (device.info.library_name.indexOf('3.0') !== -1 || device.info.library_name.indexOf('3.1') !== -1)
+                : false
+            "
+            :ref="'rec_ref'" :deviceID="deviceID"
+            @record="start()"
+            @record_stop="stop()"
+          />
+          <neulive-parameter-recording35
+            v-if="
+              (device)
+                ? (device.info.library_name.indexOf('3.5') !== -1)
+                : false
+            "
+            :ref="'rec_ref'"
+            :deviceID="deviceID"
+            @record="start()"
+            @record_stop="stop()"
+          />
         </va-tree-node>
       </va-tree-category>
       <va-tree-category
@@ -15,7 +35,35 @@
         :label="'STIMULATION'"
       >
         <va-tree-node>
-          <neulive-parameter-stimulation :ref="'sti_ref'" :deviceID="deviceID"/>
+          <neulive-parameter-stimulation
+            v-if="
+              (device)
+                ? (device.info.library_name.indexOf('3.0') !== -1 || device.info.library_name.indexOf('3.1') !== -1)
+                : false
+            "
+            :ref="'sti_ref'"
+            :deviceID="deviceID"
+          />
+          <neulive-parameter-stimulation35
+            v-if="
+              (device)
+                ? (device.info.library_name.indexOf('3.5') !== -1)
+                : false
+            "
+            :ref="'sti_ref'"
+            :deviceID="deviceID"
+          />
+        </va-tree-node>
+      </va-tree-category>
+      <va-tree-category
+        style="font-size: 20px;"
+        :label="'SETTING'"
+      >
+        <va-tree-node>
+          <neulive-parameter-setting
+            :ref="'set_ref'"
+            :deviceID="deviceID"
+          />
         </va-tree-node>
       </va-tree-category>
     </va-tree-root>
@@ -26,12 +74,18 @@
 import { taskInfo } from '../../../../data/task/TaskInfo'
 import NeuliveParameterRecording from './NeuliveParameterRecording'
 import NeuliveParameterStimulation from './NeuliveParameterStimulation'
+import NeuliveParameterRecording35 from './NeuliveParameterRecording35'
+import NeuliveParameterStimulation35 from './NeuliveParameterStimulation35'
+import NeuliveParameterSetting from './NeuliveParameterSetting'
 
 export default {
   name: 'NeuliveParameterWindow',
   components: {
     NeuliveParameterRecording,
     NeuliveParameterStimulation,
+    NeuliveParameterRecording35,
+    NeuliveParameterStimulation35,
+    NeuliveParameterSetting,
   },
   props: {
     deviceID: {
@@ -45,6 +99,7 @@ export default {
   },
   data () {
     return {
+      device: null,
     }
   },
   mqtt: {
@@ -70,6 +125,9 @@ export default {
         if (this.$refs.sti_ref != null) {
           this.$refs.sti_ref.refresh()
         }
+        if (this.$refs.set_ref != null) {
+          this.$refs.set_ref.refresh()
+        }
       })
     },
     start: function () {
@@ -81,6 +139,8 @@ export default {
   },
   mounted () {
     this.pageInit()
+    this.device = taskInfo.getDeviceInfo(this.deviceID)
+    console.log(taskInfo.getDeviceInfo(this.deviceID).info)
   },
   watch: {
     deviceID: function (val) {

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

@@ -99,21 +99,3 @@ export default {
   },
 }
 </script>
-
-<style lang="scss">
-  .flex-container {
-    display: flex;
-  }
-
-  .flex-child {
-    flex: 2;
-  }
-
-  .flex-child2 {
-    flex: 0;
-  }
-
-  .flex-child:first-child {
-    margin-right: 1px;
-  }
-</style>

src/components/task/content/parameter/item/EIS/FreqRange.vue

@@ -77,7 +77,7 @@ export default {
       this.itemInputMax = val
       this.inputeKey++
       if (parseFloat(this.itemInputMax).toFixed(1) !== parseFloat(Math.round(parseFloat((taskInfo.getDeviceInfo(this.deviceID).parameterSet.FREQ_STOP * 0.0149) * 100)) / 100).toFixed(1)) {
-        if (parseFloat(this.itemInputMin) < 0.1) {
+        if (parseFloat(this.itemInputMax) < 0.1) {
           this.$emit('parameterChange', [this.parameterName + '_START', 1])
         } else {
           this.$emit('parameterChange', [this.parameterName + '_STOP', Math.round((parseFloat(this.itemInputMax)) / 0.0149)])

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

@@ -85,7 +85,7 @@ export default {
           return false
         }
         if (parseFloat(this.currentNumberInput) !== parseFloat(this.currentNumber / 100)) {
-          this.currentNumber = parseInt(parseFloat(val).toFixed(2) * 100)
+          this.currentNumber = parseInt((parseFloat(val) * 100).toFixed(2))
           this.currentNumberInput = String(parseFloat(this.currentNumber / 100).toFixed(2))
         }
       } else {

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

@@ -111,16 +111,4 @@ export default {
   .block:hover {
     background-color: #d3d3d3;
   }
-
-  .flex-container {
-    display: flex;
-  }
-
-  .flex-child {
-    flex: 1;
-  }
-
-  .flex-child:first-child {
-    margin-right: 20px;
-  }
 </style>

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

@@ -85,7 +85,7 @@ export default {
           return false
         }
         if (parseFloat(this.voltNumberInput) !== parseFloat(this.voltNumber / 1000)) {
-          this.voltNumber = parseInt(parseFloat(val).toFixed(3) * 1000)
+          this.voltNumber = parseInt((parseFloat(val) * 1000).toFixed(3))
           this.voltNumberInput = String(parseFloat(this.voltNumber / 1000).toFixed(3))
         }
       } else {
@@ -98,6 +98,7 @@ export default {
           this.voltNumberInput = String(parseFloat(val / 1000).toFixed(3))
           this.voltNumber = val
         }
+        console.log('____val:', val, 'voltNumberInput:', this.voltNumberInput, 'voltNumber:', this.voltNumber)
       }
       if (this.voltNumber !== (taskInfo.getDeviceInfo(this.deviceID).parameterSet[this.parameterName] - 25000) / 5) {
         this.$emit('parameterChange', [this.parameterName, this.voltNumber * 5 + 25000])

src/data/api/analysis.js

@@ -0,0 +1,18 @@
+import api from './index'
+import auth from './auth'
+
+async function spikeDetect (attrs) {
+  const _header = auth.getHeader()
+  try {
+    return await api.axios.post('/api/analysis/spike_detect', attrs, { headers: _header })
+  } catch (e) {
+    console.error(e)
+    return false
+  }
+}
+
+const analysis = {
+  spikeDetect,
+}
+
+export default analysis

src/data/api/collection.js

@@ -11,7 +11,7 @@ async function create (attrs) {
   }
 
   try {
-    return await api.axios.post('/api/collection/create', _data, { headers: _header })
+    return await api.axios.post('/api/file/collection/create', _data, { headers: _header })
   } catch (e) {
     console.error(e)
     return false
@@ -21,7 +21,7 @@ async function create (attrs) {
 async function getByID (id) {
   const _header = auth.getHeader()
   try {
-    return await api.axios.get(`/api/collection/get_by_id/${id}`, { headers: _header })
+    return await api.axios.get(`/api/file/collection/get_by_id/${id}`, { headers: _header })
   } catch (e) {
     console.error(e)
     return false
@@ -31,7 +31,7 @@ async function getByID (id) {
 async function getByName (name) {
   const _header = auth.getHeader()
   try {
-    return await api.axios.get(`/api/collection/get_by_name/${name}`, { headers: _header })
+    return await api.axios.get(`/api/file/collection/get_by_name/${name}`, { headers: _header })
   } catch (e) {
     console.error(e)
     return false
@@ -41,7 +41,7 @@ async function getByName (name) {
 async function getByParent (type, parent) {
   const _header = auth.getHeader()
   try {
-    return await api.axios.get(`/api/collection/get_by_parent/${type}/${parent}`, { headers: _header })
+    return await api.axios.get(`/api/file/collection/get_by_parent/${type}/${parent}`, { headers: _header })
   } catch (e) {
     console.error(e)
     return false
@@ -51,7 +51,7 @@ async function getByParent (type, parent) {
 async function getAll () {
   const _header = auth.getHeader()
   try {
-    return await api.axios.get('/api/collection/get/all', { headers: _header })
+    return await api.axios.get('/api/file/collection/get/all', { headers: _header })
   } catch (e) {
     console.error(e)
     return false
@@ -62,7 +62,7 @@ async function getByParentName (collectionType, parent, name) {
   console.log(collectionType, parent, name)
   const _header = auth.getHeader()
   try {
-    return await api.axios.get(`/api/collection/get_by_parent_name/${collectionType}/${parent}/${name}`, { headers: _header })
+    return await api.axios.get(`/api/file/collection/get_by_parent_name/${collectionType}/${parent}/${name}`, { headers: _header })
   } catch (e) {
     console.error(e)
     return false

src/data/api/index.js

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

src/data/api/meta.js

@@ -21,18 +21,28 @@ async function update (id, attrs) {
   }
 }
 
-async function clearDel (id) {
+async function clearDel () {
   console.log('clearDelete')
   const _header = auth.getHeader()
   try {
-    return await api.axios.get(`/api/file/meta/clear_deleted/${id}`, { headers: _header })
+    return await api.axios.get('/api/file/meta/clear_deleted', { headers: _header })
   } catch (e) {
     console.error(e)
     return false
   }
 }
 
-async function getCollectionByParent (type, parent) {
+async function getByParentWithLimit (type, parent, limit, offset, order) {
+  const _header = auth.getHeader()
+  try {
+    return await api.axios.get(`/api/file/meta/get_by_parent_with_limit/${type}/${parent}/${limit}/${offset}/${order}`, { headers: _header })
+  } catch (e) {
+    console.error(e)
+    return false
+  }
+}
+
+async function getByParent (type, parent) {
   const _header = auth.getHeader()
   try {
     return await api.axios.get(`/api/file/meta/get_by_parent/${type}/${parent}`, { headers: _header })
@@ -66,7 +76,8 @@ const meta = {
   create,
   update,
   clearDel,
-  getCollectionByParent,
+  getByParent,
+  getByParentWithLimit,
   getByID,
   getByName,
 }

src/data/api/mini.js

@@ -31,6 +31,16 @@ async function getByID (channel, id) {
   }
 }
 
+async function getExistOrNotByID (channel, id) {
+  const _header = auth.getHeader()
+  try {
+    return await api.axios.get(`/api/file/mini/get_exist_or_not_by_id/${channel}/${id}`, { responseType: 'json', headers: _header })
+  } catch (e) {
+    console.error(e)
+    return false
+  }
+}
+
 async function getByParent (channel, parent) {
   const _header = auth.getHeader()
   try {
@@ -85,6 +95,7 @@ const mini = {
   update,
   clearDel,
   getByID,
+  getExistOrNotByID,
   getByParent,
   getAttrByParent,
   getAttrByID,

src/data/api/raw.js

@@ -31,6 +31,16 @@ async function getByID (channel, id) {
   }
 }
 
+async function getAttrByID (channel, id, attr) {
+  const _header = auth.getHeader()
+  try {
+    return await api.axios.get(`/api/file/raw/get_attr_by_id/${channel}/${id}/${attr}`, { responseType: 'json', headers: _header })
+  } catch (e) {
+    console.error(e)
+    return false
+  }
+}
+
 async function getByIDs (channel, ids) {
   const _header = auth.getHeader()
   try {
@@ -75,6 +85,7 @@ const raw = {
   update,
   clearDel,
   getByID,
+  getAttrByID,
   getByIDs,
   getAttrByIDs,
   getByParent,

src/data/api/sdcard.js

@@ -0,0 +1,51 @@
+import api from './index'
+import auth from './auth'
+
+async function exist (attrs) {
+  const _header = auth.getHeader()
+  try {
+    return await api.axios.post('/api/file/sdcard/exist', attrs, { headers: _header })
+  } catch (e) {
+    console.error(e)
+    return false
+  }
+}
+
+async function deleted (attrs) {
+  const _header = auth.getHeader()
+  try {
+    return await api.axios.post('/api/file/sdcard/delete', attrs, { headers: _header })
+  } catch (e) {
+    console.error(e)
+    return false
+  }
+}
+
+async function upload (attrs) {
+  const _header = auth.getHeader()
+  try {
+    return await api.axios.post('/api/file/sdcard/upload', attrs, { headers: _header })
+  } catch (e) {
+    console.error(e)
+    return false
+  }
+}
+
+async function getuuidList () {
+  const _header = auth.getHeader()
+  try {
+    return await api.axios.get('/api/file/sdcard/get', { headers: _header })
+  } catch (e) {
+    console.error(e)
+    return false
+  }
+}
+
+const sdcard = {
+  exist,
+  deleted,
+  upload,
+  getuuidList,
+}
+
+export default sdcard

src/data/download/Download.js

@@ -66,12 +66,22 @@ export const download = {
     await this.parseRawData(_data.data, prevLastTime, meta, result[channelID])
     return result
   },
+  getMiniExistOrNotByID: async function (id, channel) {
+    const result = await api.mini.getExistOrNotByID(channel, id)
+    return result
+  },
   rawByIDChannels: async function (id, channel, meta) {
     const data = []
     const rawData = await api.raw.getByID(channel, id)
     await this.parseRawData(rawData.data, null, meta, data)
     return data
   },
+  rawSdDataByIDChannels: async function (id, channel, meta) {
+    const data = []
+    const rawSdData = await api.raw.getByID(channel, id)
+    await this.parseRawSdData(rawSdData.data, null, meta, data)
+    return data
+  },
   miniMeanByIDChannel: async function (id, channel, meta) {
     const miniData = await api.mini.getByID(channel, id)
     return await this.parseMiniData(miniData, 'data_mean', meta)
@@ -97,6 +107,23 @@ export const download = {
     }
     return prevLastTime
   },
+  parseRawSdData: async function (rawData, prevLastTime, meta, dataArray) {
+    for (const raw of rawData) {
+      if (raw.sd_data !== null && raw.sd_data.length > 0) {
+        const encodedData = raw.sd_data.split('"***"').slice(0, -1)
+        const unzipDatas = encodedData.map(ctx => {
+          return ctx.split(' ')
+        })
+
+        for (let i = 0; i <= unzipDatas.length - 1; i++) {
+          if (unzipDatas[i].length > 0) {
+            prevLastTime = this.parseDataWithTimeStamp(unzipDatas[i], prevLastTime, meta, dataArray)
+          }
+        }
+      }
+    }
+    return prevLastTime
+  },
   parseMiniData: async function (miniData, miniType, meta) {
     const channelData = []
 

src/data/export/export.js

@@ -1,6 +1,6 @@
 import golbalMethods from '../global/global'
 
-const NeuliveParameterOrder = ['RECORDING_CH', 'AMP_GAIN', 'ADC_CLOCK']
+const NeuliveParameterOrder = ['RECORDING_CH', 'AMP_GAIN', 'SAMPLE_RATE']
 const NeuliveAmpGain = [100, 400, 800, 25]
 
 export const exportData = {
@@ -26,8 +26,8 @@ export const exportData = {
           parameter.push(['Record channels', result])
         } else if (p === 'AMP_GAIN') {
           parameter.push(['Amp gain', NeuliveAmpGain[value]])
-        } else if (p === 'ADC_CLOCK') {
-          parameter.push(['Sample Rate', parseInt(8e5 / (value * JSON.parse(headers.channels).length))])
+        } else if (p === 'SAMPLE_RATE') {
+          parameter.push(['Sample Rate', parseInt(value / (JSON.parse(headers.channels).length))])
         }
       })
     } else if (headers.device.library_name.indexOf('Elite') >= 0) {

src/data/global/global.js

@@ -9,32 +9,45 @@ const ChannelMaxNumber = 16
 
 // const getTimeInDateTime = /(\d{4}),(\d{1,2}),(\d{1,2}),(\d{1,2}),(\d{1,2}),(\d{1,2})/
 
-const hasCycleMode = (mode) => {
-  if (mode === 1 || mode === 7) {
-    return true
+const hasCycleMode = (mode, lib) => {
+  if (lib !== 'EliteEIS') {
+    if (mode === 1 || mode === 7) {
+      return true
+    }
+  } else {
+    if (mode === 1) {
+      return true
+    }
   }
   return false
 }
 
-const getDefaultChartTypeByMode = (mode) => {
-  // 1: I, 2: V, 3: R
-  const settings = {}
-  settings[0] = ['Elite', 2, 'Elite', 1]
-  settings[1] = ['Elite', 2, 'Elite', 1]
-  settings[2] = ['Time', 2, 'Elite', 2]
-  settings[3] = ['Time', 2, 'Elite', 3]
-  settings[4] = ['Time', 2, 'Elite', 2]
-  settings[5] = ['Time', 2, 'Elite', 1]
-  settings[6] = ['Time', 2, 'Elite', 2]
-  settings[7] = ['Elite', 2, 'Elite', 1]
-  settings[8] = ['Elite', 2, 'Elite', 1]
-  settings[9] = ['Time', 2, 'Elite', 1]
-  settings[10] = ['Elite', 2, 'Elite', 1]
-  settings[11] = ['Time', 2, 'Elite', 1]
-  settings[13] = ['Time', 2, 'Elite', 2]
-  settings[14] = ['Time', 2, 'Elite', 2]
-  settings[15] = ['Elite', 2, 'Elite', 1]
-  return settings[mode]
+const getDefaultChartTypeByMode = (mode, lib) => {
+  if (lib !== 'EliteEIS') {
+    const settings = {}
+    settings[0] = ['Elite', 2, 'Elite', 1]
+    settings[1] = ['Elite', 2, 'Elite', 1]
+    settings[2] = ['Time', 2, 'Elite', 2]
+    settings[3] = ['Time', 2, 'Elite', 3]
+    settings[4] = ['Time', 2, 'Elite', 2]
+    settings[5] = ['Time', 2, 'Elite', 1]
+    settings[6] = ['Time', 2, 'Elite', 2]
+    settings[7] = ['Elite', 2, 'Elite', 1]
+    settings[8] = ['Elite', 2, 'Elite', 1]
+    settings[9] = ['Time', 2, 'Elite', 1]
+    settings[10] = ['Elite', 2, 'Elite', 1]
+    settings[11] = ['Time', 2, 'Elite', 1]
+    settings[13] = ['Time', 2, 'Elite', 2]
+    settings[14] = ['Time', 2, 'Elite', 2]
+    settings[15] = ['Elite', 2, 'Elite', 1]
+    return settings[mode]
+  } else {
+    const settings = {}
+    settings[0] = ['EliteEIS', 6, 'EliteEIS', 5]
+    settings[1] = ['Elite', 2, 'Elite', 1]
+    settings[2] = ['Time', 2, 'Elite', 2]
+    return settings[mode]
+  }
 }
 
 const transMac = (rawAddr) => {

src/data/task/ChartsManagement.js

@@ -150,6 +150,43 @@ function getLegendName (sourceList, formulaID) {
               break
           }
           break
+        case 'EliteEIS':
+          switch (source.channel) {
+            case 1:
+              legendName += 'E' + source.id + '-Zimag_raw'
+              break
+            case 2:
+              legendName += 'E' + source.id + '-Zreal_raw'
+              break
+            case 3:
+              legendName += 'E' + source.id + '-Freq'
+              break
+            case 4:
+              legendName += 'E' + source.id + '-Cycle'
+              break
+            case 5:
+              legendName += 'E' + source.id + '-Zimag'
+              break
+            case 6:
+              legendName += 'E' + source.id + '-Zreal'
+              break
+            case 7:
+              legendName += 'E' + source.id + '-Imped'
+              break
+            case 8:
+              legendName += 'E' + source.id + '-Phase'
+              break
+            case 9:
+              legendName += 'E' + source.id + '-Current'
+              break
+            case 10:
+              legendName += 'E' + source.id + '-Level_gain'
+              break
+            default:
+              legendName += 'E' + source.id + 'CH' + source.channel
+              break
+          }
+          break
         default:
           legendName += 'D' + source.id + 'CH' + source.channel
           break
@@ -684,7 +721,7 @@ export const chartData = {
 
     const _chartRegisterDevice = (chartID, device) => {
       if (taskInfo.getDeviceInfo(device.id).info.library_name.indexOf('Elite') >= 0) {
-        const setting = global_.getDefaultChartTypeByMode(taskInfo.getDeviceInfo(device.id).parameterSet.MODE)
+        const setting = global_.getDefaultChartTypeByMode(taskInfo.getDeviceInfo(device.id).parameterSet.MODE, taskInfo.getDeviceInfo(device.id).info.library_name)
         console.log(setting)
         const xType = setting[0]
         const xValue = setting[1]
@@ -693,31 +730,68 @@ export const chartData = {
         chartRegister(chartID, 0, xType, device.id, xValue, yType, device.id, yValue, null)
         _chartData[chartID].chartDevice = 'elite'
         _chartData[chartID].chartMode = taskInfo.getDeviceInfo(device.id).parameterSet.MODE
-        switch (xValue) {
-          case 1:
-            _chartData[chartID].chartXUnit = 'uA' // nA * 1000
-            break
-          case 2:
-            _chartData[chartID].chartXUnit = 'mV' // uV * 1000
-            break
-          case 3:
-            _chartData[chartID].chartXUnit = 'Ω' // mOhm * 1000
-            break
-          default:
-            break
-        }
-        switch (yValue) {
-          case 1:
-            _chartData[chartID].chartYUnit = 'uA'
-            break
-          case 2:
-            _chartData[chartID].chartYUnit = 'mV'
-            break
-          case 3:
-            _chartData[chartID].chartYUnit = 'Ω'
-            break
-          default:
-            break
+        if (taskInfo.getDeviceInfo(device.id).info.library_name === 'EliteEIS') {
+          switch (xValue) {
+            case 3:
+              _chartData[chartID].chartXUnit = 'mHz'
+              break
+            case 4:
+              _chartData[chartID].chartXUnit = 'cycle'
+              break
+            case 8:
+              _chartData[chartID].chartXUnit = '˚'
+              break
+            case 9:
+              _chartData[chartID].chartXUnit = 'nA'
+              break
+            default:
+              _chartData[chartID].chartXUnit = 'ohm'
+              break
+          }
+          switch (yValue) {
+            case 3:
+              _chartData[chartID].chartYUnit = 'mHz'
+              break
+            case 4:
+              _chartData[chartID].chartYUnit = 'cycle'
+              break
+            case 8:
+              _chartData[chartID].chartYUnit = '˚'
+              break
+            case 9:
+              _chartData[chartID].chartYUnit = 'nA'
+              break
+            default:
+              _chartData[chartID].chartYUnit = 'ohm'
+              break
+          }
+        } else {
+          switch (xValue) {
+            case 1:
+              _chartData[chartID].chartXUnit = 'uA' // nA * 1000
+              break
+            case 2:
+              _chartData[chartID].chartXUnit = 'mV' // uV * 1000
+              break
+            case 3:
+              _chartData[chartID].chartXUnit = 'Ω' // mOhm * 1000
+              break
+            default:
+              break
+          }
+          switch (yValue) {
+            case 1:
+              _chartData[chartID].chartYUnit = 'uA'
+              break
+            case 2:
+              _chartData[chartID].chartYUnit = 'mV'
+              break
+            case 3:
+              _chartData[chartID].chartYUnit = 'Ω'
+              break
+            default:
+              break
+          }
         }
       } else if (taskInfo.getDeviceInfo(device.id).info.library_name.indexOf('Neulive') >= 0) {
         const channelSet = taskInfo.getDeviceInfo(device.id).parameterSet.RECORDING_CH.toString(2).split('').reverse()
@@ -762,7 +836,7 @@ export const chartData = {
           _chartData[chartID].xAxis[_chartData[chartID].series[i].xAxisIndex].axisLabel.show = false
         }
         _chartData[chartID].chartDevice = 'neulive'
-        _chartData[chartID].chartYUnit = 'mV'
+        _chartData[chartID].chartYUnit = 'uV'
       }
     }
 
@@ -777,6 +851,8 @@ export const chartData = {
     // TODO remove old buffer register
     if (_chartID != null) {
       // update only one
+      console.log(_chartID, _chartData)
+
       chartData.reset(_chartID, _chartData[_chartID].mappingID, _chartData[_chartID].cardName)
       _chartData[_chartID].mappingID = parseInt(item.id)
       switch (_type) {
@@ -966,6 +1042,7 @@ const chartRegister = (chartID, gridIndex, deviceNameX, deviceIDX, channelX, dev
       // const label = parseInt(parseInt(val / 1000000) / 60) + ' m ' + parseInt((val % 60000000) / 1000000) + ' s'
       return label
     }
+    _chartData[chartID].xAxis[_xAxisIndex].interval = 500 * 1000
   } else if (sourceList[0].name === 'Elite') {
     // _chartData[chartID].series[_chartData[chartID].series.length - 1].sampling = false
     switch (sourceList[0].channel) {
@@ -990,6 +1067,39 @@ const chartRegister = (chartID, gridIndex, deviceNameX, deviceIDX, channelX, dev
       default:
         break
     }
+  } else if (sourceList[0].name === 'EliteEIS') {
+    switch (sourceList[0].channel) {
+      case 3:
+        _chartData[chartID].xAxis[_xAxisIndex].axisLabel.formatter = function (val) {
+          return val + 'mHz'
+        }
+        _chartData[chartID].chartXUnit = 'mHz' // nA * 1000
+        break
+      case 4:
+        _chartData[chartID].xAxis[_xAxisIndex].axisLabel.formatter = function (val) {
+          return val + 'cycle'
+        }
+        _chartData[chartID].chartXUnit = 'cycle' // nA * 1000
+        break
+      case 8:
+        _chartData[chartID].xAxis[_xAxisIndex].axisLabel.formatter = function (val) {
+          return val + '˚'
+        }
+        _chartData[chartID].chartXUnit = '˚' // nA * 1000
+        break
+      case 9:
+        _chartData[chartID].xAxis[_xAxisIndex].axisLabel.formatter = function (val) {
+          return val + 'nA'
+        }
+        _chartData[chartID].chartXUnit = 'nA'
+        break
+      default:
+        _chartData[chartID].xAxis[_xAxisIndex].axisLabel.formatter = function (val) {
+          return val + 'ohm'
+        }
+        _chartData[chartID].chartXUnit = 'ohm'
+        break
+    }
   }
 
   // set yAxis format
@@ -1014,17 +1124,22 @@ const chartRegister = (chartID, gridIndex, deviceNameX, deviceIDX, channelX, dev
     }
 
     if (parseInt(sourceList[1].channel) >= 257 && parseInt(sourceList[1].channel) <= 260) {
-      _chartData[chartID].yAxis[_yAxisIndex].min = -scaleRange
-      _chartData[chartID].yAxis[_yAxisIndex].max = scaleRange
+      if (parseInt(sourceList[1].channel) === 260) {
+        _chartData[chartID].yAxis[_yAxisIndex].min = 0
+        _chartData[chartID].yAxis[_yAxisIndex].max = Math.ceil(Math.sqrt(Math.pow(scaleRange, 2) * 3))
+      } else {
+        _chartData[chartID].yAxis[_yAxisIndex].min = -scaleRange
+        _chartData[chartID].yAxis[_yAxisIndex].max = scaleRange
+      }
       _chartData[chartID].yAxis[_yAxisIndex].axisLabel.formatter = function (val) {
         return parseFloat(val / 100) + 'g'
       }
     } else {
       _chartData[chartID].yAxis[_yAxisIndex].axisLabel.formatter = function (val) {
-        return parseFloat(val / 1000).toFixed(2) + 'mV'
+        return parseFloat(val).toFixed(2) + 'uV'
       }
     }
-    _chartData[chartID].chartYUnit = 'mV' // nA * 1000
+    _chartData[chartID].chartYUnit = 'uV' // nA * 1000
   } else if (sourceList[1].name === 'Elite') {
     switch (sourceList[1].channel) {
       case 1:
@@ -1049,6 +1164,39 @@ const chartRegister = (chartID, gridIndex, deviceNameX, deviceIDX, channelX, dev
       default:
         break
     }
+  } else if (sourceList[1].name === 'EliteEIS') {
+    switch (sourceList[1].channel) {
+      case 3:
+        _chartData[chartID].yAxis[_yAxisIndex].axisLabel.formatter = function (val) {
+          return val + 'mHz'
+        }
+        _chartData[chartID].chartYUnit = 'mHz' // nA * 1000
+        break
+      case 4:
+        _chartData[chartID].yAxis[_yAxisIndex].axisLabel.formatter = function (val) {
+          return val + 'cycle'
+        }
+        _chartData[chartID].chartYUnit = 'cycle' // nA * 1000
+        break
+      case 8:
+        _chartData[chartID].yAxis[_yAxisIndex].axisLabel.formatter = function (val) {
+          return val + '˚'
+        }
+        _chartData[chartID].chartYUnit = '˚' // nA * 1000
+        break
+      case 9:
+        _chartData[chartID].yAxis[_yAxisIndex].axisLabel.formatter = function (val) {
+          return val + 'nA'
+        }
+        _chartData[chartID].chartYUnit = 'nA'
+        break
+      default:
+        _chartData[chartID].yAxis[_yAxisIndex].axisLabel.formatter = function (val) {
+          return val + 'ohm'
+        }
+        _chartData[chartID].chartYUnit = 'ohm'
+        break
+    }
   }
 
   // register series into grid
@@ -1085,6 +1233,46 @@ const chartRegister = (chartID, gridIndex, deviceNameX, deviceIDX, channelX, dev
               break
           }
           break
+        case 'EliteEIS':
+          _chartData[chartID].series[_chartData[chartID].series.length - 1].showSymbol = true
+          _chartData[chartID].series[_chartData[chartID].series.length - 1].showAllSymbol = true
+          dataStreamBuffer.register(chartID, taskInfo.getRawDeviceID(source.id), source.channel)
+          switch (source.channel) {
+            case 1:
+              _axisList.push(_axis + ' AXIS = ELITE ' + source.id + ' ZIMAG_RAW')
+              break
+            case 2:
+              _axisList.push(_axis + ' AXIS = ELITE ' + source.id + ' ZREAL_RAW')
+              break
+            case 3:
+              _axisList.push(_axis + ' AXIS = ELITE ' + source.id + ' FREQ')
+              break
+            case 4:
+              _axisList.push(_axis + ' AXIS = ELITE ' + source.id + ' CYCLE')
+              break
+            case 5:
+              _axisList.push(_axis + ' AXIS = ELITE ' + source.id + ' ZIMAG')
+              break
+            case 6:
+              _axisList.push(_axis + ' AXIS = ELITE ' + source.id + ' ZREAL')
+              break
+            case 7:
+              _axisList.push(_axis + ' AXIS = ELITE ' + source.id + ' IMPEDANCE')
+              break
+            case 8:
+              _axisList.push(_axis + ' AXIS = ELITE ' + source.id + ' PHASE')
+              break
+            case 9:
+              _axisList.push(_axis + ' AXIS = ELITE ' + source.id + ' CURRENT')
+              break
+            case 10:
+              _axisList.push(_axis + ' AXIS = ELITE ' + source.id + ' LEVEL_GAIN')
+              break
+            default:
+              _axisList.push(_axis + ' AXIS = ELITE ' + source.id + ' CHANNEL ' + source.channel)
+              break
+          }
+          break
         default:
           dataStreamBuffer.register(chartID, taskInfo.getRawDeviceID(source.id), source.channel)
           _axisList.push(_axis + ' AXIS = DEVICE ' + source.id + ' CHANNEL ' + source.channel)
@@ -1104,8 +1292,18 @@ const chartRegister = (chartID, gridIndex, deviceNameX, deviceIDX, channelX, dev
     xAxis: _axisList[0],
     yAxis: _axisList[1],
   }
-
-  _chartData[chartID].grid[gridIndex].series.push(_gridSeries)
+  if (_chartData[chartID].gridSource[gridIndex] == null) {
+    _chartData[chartID].gridSource[gridIndex] = []
+  }
+  let repeat = false
+  _chartData[chartID].gridSource[gridIndex].forEach(s => {
+    if (s.name === _gridSeries.name) {
+      repeat = true
+    }
+  })
+  if (!repeat) {
+    _chartData[chartID].gridSource[gridIndex].push(_gridSeries)
+  }
 
   // console.log(_chartData[chartID])
   return _chartData[chartID]

src/data/task/DataStreamBuffer.js

@@ -97,8 +97,8 @@ export const dataStreamBuffer = {
         //   }
         //   lastTime = samplingTime
         // })
-
-        _dataStreamBuffer[chart][currentDeviceID][currentChannel].push(dataBatch)
+        const _dataBatch = Array.from(dataBatch)
+        _dataStreamBuffer[chart][currentDeviceID][currentChannel].push(_dataBatch)
         if (_dataStreamBuffer[chart][currentDeviceID][currentChannel].length > _dataStreamBufferSize) {
           _dataStreamBuffer[chart][currentDeviceID][currentChannel].shift()
         }

src/data/task/TaskInfo.js

@@ -214,22 +214,22 @@ export const taskInfo = {
 
   deviceDisconnected: async (deviceID) => {
     const update = async () => {
-      taskInfo.getTaskInfo().deviceAddrList.splice(_taskInfo.taskDeviceID.indexOf(parseInt(deviceID)), 1)
-      deviceListRegister.forEach(device => {
-        if (device.id === _taskInfo.taskDeviceID.indexOf(parseInt(deviceID))) {
-          deviceListRegister.splice(deviceListRegister.indexOf(device), 1)
-        }
-      })
-      deviceListRegister.forEach(device => {
-        if (device.id > _taskInfo.taskDeviceID.indexOf(parseInt(deviceID))) {
-          device.id--
-        }
-      })
-      _taskInfo.taskDeviceID.splice(_taskInfo.taskDeviceID.indexOf(parseInt(deviceID)), 1)
+      // taskInfo.getTaskInfo().deviceAddrList.splice(_taskInfo.taskDeviceID.indexOf(parseInt(deviceID)), 1)
+      // deviceListRegister.forEach(device => {
+      //   if (device.id === _taskInfo.taskDeviceID.indexOf(parseInt(deviceID))) {
+      //     deviceListRegister.splice(deviceListRegister.indexOf(device), 1)
+      //   }
+      // })
+      // deviceListRegister.forEach(device => {
+      //   if (device.id > _taskInfo.taskDeviceID.indexOf(parseInt(deviceID))) {
+      //     device.id--
+      //   }
+      // })
+      // _taskInfo.taskDeviceID.splice(_taskInfo.taskDeviceID.indexOf(parseInt(deviceID)), 1)
       _taskInfo.deviceList[parseInt(deviceID)].info.status = 'disconnected'
     }
     await update()
-    await updateAllList()
+    // await updateAllList()
   },
 
   controllerShutdown: async () => {

src/factories/chart/chartFactory.js

@@ -25,6 +25,7 @@ function newChart (chartID) {
       snap: true,
     },
     grid: [],
+    gridSource: [],
     xAxis: [],
     yAxis: [],
     dataZoom: null,

src/factories/chart/dataZoomFactory.js

@@ -6,6 +6,7 @@ function newDataZoom () {
     height: '10px',
     // realtime: false,
     bottom: '8%',
+    zoomLock: false,
     handleStyle: {
       shadowColor: 'rgba(0, 0, 0, 0)',
     },

src/factories/chart/seriesFactory.js

@@ -5,7 +5,8 @@ function newSeries (type, legendName, xAxisIndex, yAxisIndex, xAxisSource, yAxis
     // symbol: 'circle',
     showSymbol: false,
     showAllSymbol: false,
-    symbolSize: 2,
+    symbolSize: 4,
+    // [modified 2021/08/10] sampling method managed by vuex
     // sampling: 'average',
     // sampling: function (frame) {
     //   return frame[0]

src/factories/chart/tooltipFactory.js

@@ -1,9 +1,10 @@
 function getTime (val) {
-  const hour = parseInt(val / 3.6e9)
-  const minute = parseInt((val % 3.6e9) / 1000000 / 60)
-  const second = parseInt((val % 6e7) / 1000000)
-  const millisecond = parseInt((val % 1e6) / 1000)
   let label = ''
+  const hour = Math.floor(val / 3.6e9)
+  const minute = Math.floor((val % 3.6e9) / 1000000 / 60)
+  const second = Math.floor((val % 6e7) / 1000000)
+  const millisecond = Math.floor((val % 1e6) / 1000)
+  const microsecond = Math.floor(val % 1e6) - 1000 * millisecond
   if (hour > 0) {
     label += hour + ' h '
   }
@@ -16,7 +17,9 @@ function getTime (val) {
   if (millisecond > 0) {
     label += millisecond + ' ms '
   }
-  // const label = parseInt(parseInt(val / 1000000) / 60) + ' m ' + parseInt((val % 60000000) / 1000000) + ' s'
+  if (microsecond > 0 && hour === 0 && minute === 0 && second === 0) {
+    label += microsecond + ' µs '
+  }
   return label
 }
 
@@ -54,22 +57,32 @@ function newTooltip (chartID) {
           if (param.seriesName === 'Time') {
             value = param.value[1]
           } else if (param.seriesName.split('_')[1] === 'T' && param.seriesName.split('_')[0] !== 'T') {
-            if (param.seriesName.split('_')[0][param.seriesName.split('_')[0].length - 1] === 'V') {
+            const physicalQuantity = param.seriesName.split('_')[0][param.seriesName.split('_')[0].length - 1]
+            if (physicalQuantity === 'V') {
               value = parseFloat(param.value[0]).toFixed(3) + ' μV'
-            } else if (param.seriesName.split('_')[0][param.seriesName.split('_')[0].length - 1] === 'I') {
+            } else if (physicalQuantity === 'I') {
               value = parseFloat(param.value[0]).toFixed(3) + ' nA'
-            } else if (param.seriesName.split('_')[0][param.seriesName.split('_')[0].length - 1] === 'R') {
+            } else if (physicalQuantity === 'R') {
               value = parseFloat(param.value[0]).toFixed(3) + ' mΩ'
+            } else if (physicalQuantity === 'X' || physicalQuantity === 'Y' || physicalQuantity === 'Z' || physicalQuantity === 'M') {
+              value = (parseFloat(param.value[0]) / 100).toFixed(3) + ' (g)'
+            } else if (!isNaN(physicalQuantity)) {
+              value = (parseFloat(param.value[0]) / 1000).toFixed(3) + ' (mV)'
             } else {
               value = parseFloat(param.value[0]).toFixed(3)
             }
           } else if (param.seriesName.split('_')[1] !== 'T' && param.seriesName.split('_')[0] === 'T') {
-            if (param.seriesName.split('_')[1][param.seriesName.split('_')[1].length - 1] === 'V') {
+            const physicalQuantity = param.seriesName.split('_')[1][param.seriesName.split('_')[1].length - 1]
+            if (physicalQuantity === 'V') {
               value = parseFloat(param.value[1]).toFixed(3) + ' μV'
-            } else if (param.seriesName.split('_')[1][param.seriesName.split('_')[1].length - 1] === 'I') {
+            } else if (physicalQuantity === 'I') {
               value = parseFloat(param.value[1]).toFixed(3) + ' nA'
-            } else if (param.seriesName.split('_')[1][param.seriesName.split('_')[1].length - 1] === 'R') {
+            } else if (physicalQuantity === 'R') {
               value = parseFloat(param.value[1]).toFixed(3) + ' mΩ'
+            } else if (physicalQuantity === 'X' || physicalQuantity === 'Y' || physicalQuantity === 'Z' || physicalQuantity === 'M') {
+              value = (parseFloat(param.value[1]) / 100).toFixed(3) + ' (g)'
+            } else if (!isNaN(physicalQuantity)) {
+              value = (parseFloat(param.value[1]) / 1000).toFixed(3) + ' (mV)'
             } else {
               value = parseFloat(param.value[1]).toFixed(3)
             }

src/factories/file/channelFactory.js

@@ -0,0 +1,12 @@
+function newChannel () {
+  return {
+    sampleRate: -1,
+    timeInterval: -1,
+    prevTime: -1,
+    prevData: -1,
+    downloadDataBuffer: [],
+    downloadIDList: [],
+  }
+}
+
+export default newChannel

src/factories/file/downloadFactory.js

@@ -1,11 +1,15 @@
 function newDownload () {
   return {
-    _downloadIDList: [],
-    _downloadBuffer: [],
-    downloadIDList: {},
-    downloadBuffer: {},
-    progress: 0,
-    status: '',
+    device: 'Neulive or Elite',
+    format: 'csv or csv-edf or excel',
+    filename: '',
+    size: 0,
+    downloadStream: null,
+    meta: {},
+    channel: [],
+    channelInfo: {},
+    maxRows: 0,
+    maxColumns: 0,
   }
 }
 

src/factories/file/downloadStreamFactory.js

@@ -0,0 +1,8 @@
+function newDownloadStream () {
+  return {
+    fileStream: null,
+    writer: null,
+  }
+}
+
+export default newDownloadStream

src/factories/task/parameterSetFactory.js

@@ -60,6 +60,93 @@ function newParameterSet () {
     ADC_CHANNEL: 0,
     // Neulive3.0
     AXIS_CH: 0,
+    // Neulive3.5
+    STI_T1_CH0: 0,
+    STI_T2_CH0: 0,
+    STI_T3_CH0: 0,
+    STI_T4_CH0: 0,
+    STI_T5_CH0: 0,
+    STI_T1_CH1: 0,
+    STI_T2_CH1: 0,
+    STI_T3_CH1: 0,
+    STI_T4_CH1: 0,
+    STI_T5_CH1: 0,
+    STI_T1_CH2: 0,
+    STI_T2_CH2: 0,
+    STI_T3_CH2: 0,
+    STI_T4_CH2: 0,
+    STI_T5_CH2: 0,
+    STI_T1_CH3: 0,
+    STI_T2_CH3: 0,
+    STI_T3_CH3: 0,
+    STI_T4_CH3: 0,
+    STI_T5_CH3: 0,
+    STI_T1_CH4: 0,
+    STI_T2_CH4: 0,
+    STI_T3_CH4: 0,
+    STI_T4_CH4: 0,
+    STI_T5_CH4: 0,
+    STI_T1_CH5: 0,
+    STI_T2_CH5: 0,
+    STI_T3_CH5: 0,
+    STI_T4_CH5: 0,
+    STI_T5_CH5: 0,
+    STI_T1_CH6: 0,
+    STI_T2_CH6: 0,
+    STI_T3_CH6: 0,
+    STI_T4_CH6: 0,
+    STI_T5_CH6: 0,
+    STI_T1_CH7: 0,
+    STI_T2_CH7: 0,
+    STI_T3_CH7: 0,
+    STI_T4_CH7: 0,
+    STI_T5_CH7: 0,
+    STI_T1_CH8: 0,
+    STI_T2_CH8: 0,
+    STI_T3_CH8: 0,
+    STI_T4_CH8: 0,
+    STI_T5_CH8: 0,
+    STI_T1_CH9: 0,
+    STI_T2_CH9: 0,
+    STI_T3_CH9: 0,
+    STI_T4_CH9: 0,
+    STI_T5_CH9: 0,
+    STI_T1_CH10: 0,
+    STI_T2_CH10: 0,
+    STI_T3_CH10: 0,
+    STI_T4_CH10: 0,
+    STI_T5_CH10: 0,
+    STI_T1_CH11: 0,
+    STI_T2_CH11: 0,
+    STI_T3_CH11: 0,
+    STI_T4_CH11: 0,
+    STI_T5_CH11: 0,
+    STI_T1_CH12: 0,
+    STI_T2_CH12: 0,
+    STI_T3_CH12: 0,
+    STI_T4_CH12: 0,
+    STI_T5_CH12: 0,
+    STI_T1_CH13: 0,
+    STI_T2_CH13: 0,
+    STI_T3_CH13: 0,
+    STI_T4_CH13: 0,
+    STI_T5_CH13: 0,
+    STI_T1_CH14: 0,
+    STI_T2_CH14: 0,
+    STI_T3_CH14: 0,
+    STI_T4_CH14: 0,
+    STI_T5_CH14: 0,
+    STI_T1_CH15: 0,
+    STI_T2_CH15: 0,
+    STI_T3_CH15: 0,
+    STI_T4_CH15: 0,
+    STI_T5_CH15: 0,
+    STI_AMPLITUDE_H1: 0,
+    STI_AMPLITUDE_L1: 0,
+    STI_AMPLITUDE_H2: 0,
+    STI_AMPLITUDE_L2: 0,
+    RECORDING_CH_L: 0,
+    RECORDING_CH_H: 0,
     // Eilte
     ADC_LEVEL: 0,
     ADC_VALUE_I: 0,

src/factories/task/taskFactory.js

@@ -7,10 +7,18 @@ function newTask () {
     taskDeviceID: [],
     chartNumber: 0,
     deviceList: {
+      0: newDevice(0),
+      1: newDevice(1),
+      2: newDevice(2),
+      3: newDevice(3),
       4: newDevice(4),
       5: newDevice(5),
       6: newDevice(6),
       7: newDevice(7),
+      8: newDevice(8),
+      9: newDevice(9),
+      10: newDevice(10),
+      11: newDevice(11),
     },
     chartList: [],
     formulaList: [],

src/router/index.js

@@ -75,14 +75,9 @@ export default new Router({
       component: EmptyParentComponent,
       children: [
         {
-          name: 'neulive-csv-download',
-          path: 'neulive/csv/:metaList?/:rawData?/:recover?',
-          component: () => import('../components/download/neulive/csv/NeuliveDownloadCsv.vue'),
-        },
-        {
-          name: 'elite-excel-download',
-          path: 'elite/excel/:metaList?',
-          component: () => import('../components/download/elite/excel/EliteDownloadExcel.vue'),
+          name: 'download',
+          path: ':format/:metaList/:sd?',
+          component: () => import('../components/download/Download.vue'),
         },
       ],
     },
@@ -97,11 +92,6 @@ export default new Router({
           component: () => import('../components/dashboard/Dashboard.vue'),
           default: true,
         },
-        {
-          name: 'about',
-          path: 'about',
-          component: () => import('../components/about/aboutContent.vue'),
-        },
         {
           name: 'devices',
           path: 'devices',
@@ -117,6 +107,11 @@ export default new Router({
           path: 'data-replay/elite/:metaList?',
           component: () => import('../components/analysis/replay/elite/EliteDataReplay.vue'),
         },
+        {
+          name: 'data-spike',
+          path: 'data-spike/:metaList?',
+          component: () => import('../components/analysis/spike/Spike.vue'),
+        },
         {
           name: 'task-content',
           path: 'task-content/:taskID?',
@@ -130,38 +125,10 @@ export default new Router({
           //   keepAlive: true,
           // },
         },
-        // {
-        //   name: 'download',
-        //   path: 'download',
-        //   component: () => import('../components/download/Download.vue'),
-        //   // meta: {
-        //   //   keepAlive: true,
-        //   // },
-        // },
-        // {
-        //   name: 'neulive-csv-download',
-        //   path: 'download/neulive/csv/:metaList?/:recover?',
-        //   component: () => import('../components/download/neulive/csv/NeuliveDownloadCsv.vue'),
-        // },
-        {
-          name: 'neulive-excel-download',
-          path: 'download/neulive/excel/:metaList?',
-          component: () => import('../components/download/neulive/excel/NeuliveDownloadExcel.vue'),
-        },
-        {
-          name: 'elite-csv-download',
-          path: 'download/elite/csv/:metaList?/:recover?',
-          component: () => import('../components/download/elite/csv/EliteDownloadCsv.vue'),
-        },
-        // {
-        //   name: 'elite-excel-download',
-        //   path: 'download/elite/excel/:metaList?',
-        //   component: () => import('../components/download/elite/excel/EliteDownloadExcel.vue'),
-        // },
         {
           name: 'settings',
           path: 'settings',
-          component: () => import('../components/about/aboutContent.vue'),
+          component: () => import('../components/setting/settingContent.vue'),
           // meta: {
           //   keepAlive: true,
           // },

src/store/index.js

@@ -2,18 +2,17 @@ import Vue from 'vue'
 import Vuex from 'vuex'
 import VuexI18n from 'vuex-i18n' // load vuex i18n module
 // import app from './modules/app'
-import state from './state'
+import setting from './modules/setting'
 import taskContent from './modules/task/content'
-import replay from './modules/analysis/replay'
-import neuliveCsv from './modules/file/neulive/csv'
-import neuliveExcel from './modules/file/neulive/excel'
-import eliteCsv from './modules/file/elite/csv'
-import eliteExcel from './modules/file/elite/excel'
-// import eliteFile from './modules/file/elite'
-// import file from './modules/file'
-import about from './modules/about'
+
+import state from './state'
 import mutations from './mutations'
 
+import replay from './modules/analysis/replay'
+import spike from './modules/analysis/spike'
+import file from './modules/file'
+import download from './modules/download'
+
 import * as getters from './getters'
 
 Vue.use(Vuex)
@@ -24,11 +23,10 @@ const store = new Vuex.Store({
   modules: {
     taskContent,
     replay,
-    neuliveCsv,
-    neuliveExcel,
-    eliteCsv,
-    eliteExcel,
-    about,
+    spike,
+    setting,
+    download,
+    file,
   },
   state: state,
   mutations: mutations,

src/store/modules/about/actions/deviceAct.js

@@ -1,66 +0,0 @@
-import types from '@/store/modules/about/types'
-
-const typePath = types.device
-const deviceActs = {
-
-  /**
-   * init devices list
-   *
-   * @param {object} api
-   */
-  [typePath.init]: async ({ state, getters, commit, dispatch }, payload) => {
-    const devices = await payload.api.device.getAll()
-    commit(typePath.set, { deviceList: devices.data })
-  },
-
-  /**
-   * reorder devices list
-   *
-   * @param {object} api
-   * @param {object} deviceList
-   */
-  [typePath.reorder]: async ({ state, getters, commit, dispatch }, payload) => {
-    if (payload.deviceList.length > 0) {
-      // update connect_priority according to id
-      payload.deviceList.map((v, idx) => {
-        v.connect_priority = idx
-      })
-      // update database device's info
-      for (const device of payload.deviceList) {
-        dispatch(typePath.updateDatabaseByID, { id: device.id, request: { connect_priority: device.connect_priority }, api: payload.api })
-      }
-      commit(typePath.set, { deviceList: payload.deviceList })
-    }
-  },
-
-  /**
-   * update database device table data by ID with request
-   *
-   * @param {number} id
-   * @param {object} request
-   * @param {object} api
-   */
-  [typePath.updateDatabaseByID]: async ({ state, getters, commit, dispatch }, payload) => {
-    await payload.api.device.updateByID(payload.id, payload.request)
-  },
-
-  /**
-   * delete device
-   *
-   * @param {number} id
-   * @param {number} index
-   * @param {Array} deviceList
-   * @param {object} api
-   */
-  [typePath.remove]: async ({ state, getters, commit, dispatch }, payload) => {
-    if (payload.deviceList.length > 0) {
-      payload.deviceList.splice(payload.index, 1)
-      dispatch(typePath.reorder, { deviceList: payload.deviceList, api: payload.api })
-
-      await dispatch(typePath.updateDatabaseByID, { id: payload.id, request: { deleted: true }, api: payload.api })
-      await payload.api.device.del(payload.id)
-    }
-  },
-}
-
-export default deviceActs

src/store/modules/analysis/replay/actions/chartAct.js

@@ -115,6 +115,40 @@ function getLegendName (sourceList) {
           case 3:
             legendName += '' + source.id + '-R'
             break
+          case 4:
+            legendName += '' + source.id + '-Cycle'
+            break
+          default:
+            legendName += '' + source.id + 'CH' + source.channel
+            break
+        }
+        break
+      case 'EliteEIS':
+        switch (source.channel) {
+          case 3:
+            legendName += '' + source.id + '-Frequency'
+            break
+          case 4:
+            legendName += '' + source.id + '-Cycle'
+            break
+          case 5:
+            legendName += '' + source.id + '-Z_imag'
+            break
+          case 6:
+            legendName += '' + source.id + '-Z_real'
+            break
+          case 7:
+            legendName += '' + source.id + '-Impedance'
+            break
+          case 8:
+            legendName += '' + source.id + '-Phase'
+            break
+          case 9:
+            legendName += '' + source.id + '-Current'
+            break
+          case 10:
+            legendName += '' + source.id + '-Gain Level'
+            break
           default:
             legendName += '' + source.id + 'CH' + source.channel
             break
@@ -261,62 +295,6 @@ const actions = {
     }
   },
 
-  /**
-   * set time format to xAxis by chart ID
-   *
-   * @param {object} chartAllData
-   * @param {int} chartID
-   * @param {int} xAxisIndex
-   * @param {object} series : chart series (echarts series)
-   */
-  [typePath.setTimeXAxis]: (state, payload) => {
-    payload.chartAllData[payload.chartID].xAxis[payload.xAxisIndex].axisLabel.formatter = function (val) {
-      const label = parseInt(parseInt(val / 1000000) / 60) + ' m ' + parseInt((val % 60000000) / 1000000) + ' s'
-      return label
-    }
-  },
-
-  /**
-   * set value format by chart ID
-   *
-   * @param {object} chartAllData
-   * @param {int} chartID
-   * @param {string} axis ('x' or 'y')
-   * @param {int} axisIndex
-   * @param {optional, object} format
-   */
-  [typePath.setAxisValueFormat]: (state, payload) => {
-    let name = '' // string
-    let unit = '' // string
-    let unitScale = 1 // int
-    if (payload.format !== undefined) {
-      name = payload.format.name // string
-      unit = payload.format.unit // string
-      unitScale = payload.format.unitScale // int
-    }
-    if (payload.axis === 'x') {
-      payload.chartAllData[payload.chartID].xAxis[payload.axisIndex].axisLabel.formatter = function (val) {
-        if (name !== 'time') {
-          const label = (val / unitScale).toFixed(2) + unit
-          return label
-        } else {
-          var hr = Math.floor(val / 3600000000)
-          var min = Math.floor((val - (hr * 3600000000)) / 60000000)
-          var sec = parseInt((val - (hr * 3600000000) - (min * 60000000)) / 1000000)
-          while (min.length < 2) { min = '0' + min }
-          while (sec.length < 2) { sec = '0' + min }
-          if (hr) hr += 'h'
-          return hr + min + 'm' + sec + 's'
-        }
-      }
-    } else if (payload.axis === 'y') {
-      payload.chartAllData[payload.chartID].yAxis[payload.axisIndex].axisLabel.formatter = function (val) {
-        const label = (val / unitScale).toFixed(2) + unit
-        return label
-      }
-    }
-  },
-
   /**
    * register device-channel to chartData
    *
@@ -450,11 +428,45 @@ const actions = {
             case 3:
               _axisList.push(_axis + ' AXIS = ELITE ' + source.id + ' RESISTANCE')
               break
+            case 4:
+              _axisList.push(_axis + ' AXIS = ELITE ' + source.id + ' CYCLE')
+              break
             default:
               _axisList.push(_axis + ' AXIS = ELITE ' + source.id + ' CHANNEL ' + source.channel)
               break
           }
           break
+        case 'EliteEIS':
+          switch (source.channel) {
+            case 3:
+              _axisList.push(_axis + ' AXIS = ELITEEIS ' + source.id + ' Frequency')
+              break
+            case 4:
+              _axisList.push(_axis + ' AXIS = ELITEEIS ' + source.id + ' Cycle')
+              break
+            case 5:
+              _axisList.push(_axis + ' AXIS = ELITEEIS ' + source.id + ' Z_imag')
+              break
+            case 6:
+              _axisList.push(_axis + ' AXIS = ELITEEIS ' + source.id + ' Z_real')
+              break
+            case 7:
+              _axisList.push(_axis + ' AXIS = ELITEEIS ' + source.id + ' Impedance')
+              break
+            case 8:
+              _axisList.push(_axis + ' AXIS = ELITEEIS ' + source.id + ' Phase')
+              break
+            case 9:
+              _axisList.push(_axis + ' AXIS = ELITEEIS ' + source.id + ' Current')
+              break
+            case 10:
+              _axisList.push(_axis + ' AXIS = ELITEEIS ' + source.id + ' Gain Level')
+              break
+            default:
+              _axisList.push(_axis + ' AXIS = ELITEEIS ' + source.id + ' CHANNEL ' + source.channel)
+              break
+          }
+          break
         default:
           _axisList.push(_axis + ' AXIS = DEVICE ' + source.id + ' CHANNEL ' + source.channel)
           break
@@ -472,19 +484,6 @@ const actions = {
     return chartData
   },
 
-  /**
-   * reset chart axis label
-   *
-   * @param {object} chartData
-   */
-  [typePath.resetChartDataAxisLabel]: async (state, payload) => {
-    const axisArray = payload.chartData.yAxis
-    for (let index = 0; index < axisArray.length; ++index) {
-      payload.chartData.yAxis[index].max = null
-      payload.chartData.yAxis[index].min = null
-    }
-  },
-
   // /**
   //  * remove device-channel from chart TODO
   //  *

src/store/modules/analysis/replay/mutations/chartMut.js

@@ -41,6 +41,40 @@ function getLegendName (sourceList) {
           case 3:
             legendName += '' + source.id + '-R'
             break
+          case 4:
+            legendName += '' + source.id + '-Cycle'
+            break
+          default:
+            legendName += '' + source.id + 'CH' + source.channel
+            break
+        }
+        break
+      case 'EliteEIS':
+        switch (source.channel) {
+          case 3:
+            legendName += '' + source.id + '-Frequency'
+            break
+          case 4:
+            legendName += '' + source.id + '-Cycle'
+            break
+          case 5:
+            legendName += '' + source.id + '-Z_imag'
+            break
+          case 6:
+            legendName += '' + source.id + '-Z_real'
+            break
+          case 7:
+            legendName += '' + source.id + '-Impedance'
+            break
+          case 8:
+            legendName += '' + source.id + '-Phase'
+            break
+          case 9:
+            legendName += '' + source.id + '-Current'
+            break
+          case 10:
+            legendName += '' + source.id + '-Gain Level'
+            break
           default:
             legendName += '' + source.id + 'CH' + source.channel
             break
@@ -266,11 +300,45 @@ const chartMutations = {
             case 3:
               _axisList.push(_axis + ' AXIS = ELITE ' + source.id + ' RESISTANCE')
               break
+            case 4:
+              _axisList.push(_axis + ' AXIS = ELITE ' + source.id + ' CYCLE')
+              break
             default:
               _axisList.push(_axis + ' AXIS = ELITE ' + source.id + ' CHANNEL ' + source.channel)
               break
           }
           break
+        case 'EliteEIS':
+          switch (source.channel) {
+            case 3:
+              _axisList.push(_axis + ' AXIS = ELITEEIS ' + source.id + ' Frequency')
+              break
+            case 4:
+              _axisList.push(_axis + ' AXIS = ELITEEIS ' + source.id + ' Cycle')
+              break
+            case 5:
+              _axisList.push(_axis + ' AXIS = ELITEEIS ' + source.id + ' Z_imag')
+              break
+            case 6:
+              _axisList.push(_axis + ' AXIS = ELITEEIS ' + source.id + ' Z_real')
+              break
+            case 7:
+              _axisList.push(_axis + ' AXIS = ELITEEIS ' + source.id + ' Impedance')
+              break
+            case 8:
+              _axisList.push(_axis + ' AXIS = ELITEEIS ' + source.id + ' Phase')
+              break
+            case 9:
+              _axisList.push(_axis + ' AXIS = ELITEEIS ' + source.id + ' Current')
+              break
+            case 10:
+              _axisList.push(_axis + ' AXIS = ELITEEIS ' + source.id + ' Gain Level')
+              break
+            default:
+              _axisList.push(_axis + ' AXIS = ELITEEIS ' + source.id + ' CHANNEL ' + source.channel)
+              break
+          }
+          break
         default:
           _axisList.push(_axis + ' AXIS = DEVICE ' + source.id + ' CHANNEL ' + source.channel)
           break
@@ -330,6 +398,29 @@ const chartMutations = {
     state.chartData[payload.chartID].series[payload.seriesIndex].sampling = payload.method
   },
 
+  /**
+   * lock dataZoom
+   *
+   * @param {object} chartAllData
+   * @param {int} chartID
+   * @param {bool} zoomLock
+   */
+  [typePath.lockDataZoom]: (state, payload) => {
+    if (payload.zoomLock === true || payload.zoomLock === false) {
+      payload.chartAllData[payload.chartID].dataZoom[0].zoomLock = payload.zoomLock
+    }
+  },
+
+  /**
+   * for manually set datazoom start and end
+   *
+   */
+  [typePath.setOverviewDataZoomStartAndEnd]: (state, payload) => {
+    if (state.chartOverviewData.dataZoom != null) {
+      state.chartOverviewData.dataZoom[0].start = 0
+      state.chartOverviewData.dataZoom[0].end = 100
+    }
+  },
 }
 
 export default chartMutations

src/store/modules/analysis/replay/state.js

@@ -17,6 +17,9 @@ function newState () {
     chartData: {},
     chartOverviewData: {},
     chartDetailData: {},
+    startTime: 0,
+    endTime: 0,
+    windowLength: 0,
     startTimeCurrent: 0,
     endTimeCurrent: 0,
     currentScale: '0',
@@ -28,6 +31,8 @@ function newState () {
     valueFormatX: {},
     valueFormatY: {},
     showCyclePanel: false,
+    useSdCardData: false,
+    isLockDataZoom: false,
   }
 }
 

src/store/modules/analysis/replay/types.js

@@ -20,8 +20,6 @@ const types = {
     pushSeries: 'pushSeriesChart',
     pushAxis: 'pushAxisChart',
     pushLegendName: 'pushLegendNameChart',
-    setTimeXAxis: 'setTimeXAxisChart',
-    setAxisValueFormat: 'setAxisValueFormatChart',
     pushGridSeries: 'pushGridSeriesChart',
     deleteByID: 'deleteByIDChart',
     update: 'updateChart',
@@ -34,8 +32,8 @@ const types = {
     updateRegistered: 'updateRegisteredChart',
     updateAxisSplitNumber: 'updateAxisSplitNumberChart',
     updateChartSampling: 'updateChartSamplingChart',
-
-    resetChartDataAxisLabel: 'resetChartDataAxisLabelChart',
+    lockDataZoom: 'lockDataZoomChart',
+    setOverviewDataZoomStartAndEnd: 'setOverviewDataZoomStartAndEndChart',
   },
   meta: {
     init: 'initMeta',

src/store/modules/analysis/spike/actions/chartAct.js

@@ -0,0 +1,506 @@
+import newSeries from '@/factories/chart/seriesFactory'
+import newChart from '@/factories/chart/chartFactory'
+import newTooltip from '@/factories/chart/tooltipFactory'
+import newDataZoom from '@/factories/chart/dataZoomFactory'
+import types from '@/store/modules/analysis/spike/types'
+
+const typePath = types.chart
+
+// generate x axis format
+function makeXAxis (gridIndex, type) {
+  const xAxis = {
+    type: type,
+    gridIndex: gridIndex,
+    axisLine: { show: false, onZero: false, lineStyle: { color: '#aaa' } },
+    axisTick: { show: false },
+    axisLabel: {
+      show: false,
+      showMinLabel: true,
+      showMaxLabel: true,
+      color: '#aaa',
+    },
+    splitLine: { show: true, lineStyle: { color: '#eee' } },
+    splitNumber: 5,
+    scale: true,
+    min: null,
+    max: null,
+  }
+  return xAxis
+}
+
+// generate y axis format
+function makeYAxis (gridIndex, type) {
+  return {
+    type: type,
+    gridIndex: gridIndex,
+    axisTick: { show: false },
+    axisLine: { show: false }, // color: '#ccc' } },
+    axisLabel: { show: true, color: '#aaa', showMinLabel: true, showMaxLabel: true },
+    splitLine: { show: true, lineStyle: { color: '#eee' } },
+    splitNumber: 1,
+    animation: false,
+    scale: true,
+    min: 'dataMin',
+    max: 'dataMax',
+  }
+}
+
+// generate x axis format
+function makeXAxisOverview (gridIndex, type) {
+  return {
+    type: type,
+    gridIndex: gridIndex,
+    axisLine: { show: false, onZero: false, lineStyle: { color: '#aaa' } },
+    axisTick: { show: false },
+    axisLabel: { show: true, color: '#aaa', showMinLabel: true, showMaxLabel: true },
+    splitLine: { show: false, lineStyle: { color: '#eee' } },
+    scale: true,
+    min: null,
+    max: null,
+  }
+}
+
+// generate y axis format
+function makeYAxisOverview (gridIndex, type) {
+  return {
+    type: type,
+    gridIndex: gridIndex,
+    axisTick: { show: false },
+    axisLine: { show: false }, // color: '#ccc' } },
+    axisLabel: { show: true, color: '#aaa', showMinLabel: true, showMaxLabel: true },
+    splitLine: { show: true, lineStyle: { color: '#eee' } },
+    splitNumber: 1,
+    animation: false,
+    scale: true,
+    min: 'dataMin',
+    max: 'dataMax',
+  }
+}
+
+// get legend name
+function getLegendName (sourceList) {
+  let legendName = ''
+  // source only 2 device
+  sourceList.forEach(source => {
+    switch (source.name) {
+      case 'Time':
+        legendName += 'T'
+        break
+      case 'Neulive':
+        switch (source.channel) {
+          case 256:
+            legendName += '' + source.id + '-X'
+            break
+          case 257:
+            legendName += '' + source.id + '-Y'
+            break
+          case 258:
+            legendName += '' + source.id + '-Z'
+            break
+          case 259:
+            legendName += '' + source.id + '-Mag'
+            break
+          default:
+            legendName += '' + source.id + 'CH' + String(parseInt(source.channel) + 1)
+            break
+        }
+        break
+      case 'Elite':
+        switch (source.channel) {
+          case 1:
+            legendName += '' + source.id + '-I'
+            break
+          case 2:
+            legendName += '' + source.id + '-V'
+            break
+          case 3:
+            legendName += '' + source.id + '-R'
+            break
+          default:
+            legendName += '' + source.id + 'CH' + source.channel
+            break
+        }
+        break
+      default:
+        legendName += '' + source.id + 'CH' + source.channel
+        break
+    }
+    legendName += '_'
+  })
+  legendName = legendName.substr(0, legendName.length - 1)
+  return legendName
+}
+
+// generate grid
+function makeGrid (index, length, chartID) {
+  const _height = (82 / length) - 2 + '%'
+  let _top
+  if (chartID === 0) {
+    _top = index * (82 / length) + 8 + '%'
+  } else {
+    _top = index * (82 / length) + 6 + '%'
+  }
+  const _left = '8%'
+  const _right = '4%'
+  return {
+    index: index,
+    top: _top,
+    height: _height,
+    left: _left,
+    right: _right,
+    series: [],
+  }
+}
+
+const actions = {
+
+  /**
+   * init data to chartData via chartID
+   *
+   * @param {object} chartAllData
+   * @param {int} chartID : chart id
+   * @param {int} gridLength : length of chart grid
+   * @param {string} type
+   * @param {string} device
+   * @param {string} mode
+   * @return {object} : chart data
+   */
+  [typePath.init]: ({ state, getters, commit, dispatch }, payload) => {
+    if (payload.chartAllData[payload.chartID] == null) {
+      payload.chartAllData[payload.chartID] = newChart(payload.chartID)
+      payload.chartAllData[payload.chartID].tooltip = newTooltip()
+      payload.chartAllData[payload.chartID].chartType = payload.type
+      payload.chartAllData[payload.chartID].chartDevice = payload.device
+      payload.chartAllData[payload.chartID].chartMode = payload.mode
+
+      dispatch(typePath.updateGridList, { chartAllData: payload.chartAllData, chartID: payload.chartID, gridLength: payload.gridLength })
+      return payload.chartAllData[payload.chartID]
+    } else {
+      return payload.chartAllData[payload.chartID]
+    }
+  },
+
+  /**
+   * init selectedChannel by metaIndex
+   *
+   * @param {int} metaIndex : chart id
+   */
+  [typePath.initSelectedChannel]: ({ state, getters, commit, dispatch }, payload) => {
+    const channelList = JSON.parse(state.metaList[payload.metaIndex].channels)
+    state.selectedChannel = String(channelList[0])
+    state.selectedChannelOptions = []
+    channelList.forEach(function (item) {
+      if (item < 256) {
+        state.selectedChannelOptions.push({ label: String(item + 1), value: String(item) })
+      } else if (item === 256) {
+        state.selectedChannelOptions.push({ label: 'x', value: String(item) })
+      } else if (item === 257) {
+        state.selectedChannelOptions.push({ label: 'y', value: String(item) })
+      } else if (item === 258) {
+        state.selectedChannelOptions.push({ label: 'z', value: String(item) })
+      } else if (item === 259) {
+        state.selectedChannelOptions.push({ label: 'mag', value: String(item) })
+      }
+    })
+  },
+
+  /**
+   * update grid length by chart ID
+   *
+   * @param {object} chartAllData
+   * @param {int} chartID
+   * @param {int} gridLength : chart data (echarts options)
+   */
+  [typePath.updateGridList]: async ({ state, getters, commit }, payload) => {
+    payload.chartAllData[payload.chartID].grid = []
+    for (let i = 0; i < payload.gridLength; i++) {
+      payload.chartAllData[payload.chartID].grid.push(makeGrid(i, payload.gridLength, payload.chartID))
+    }
+  },
+
+  /**
+   * reset data from chartData via chartID
+   *
+   * @param {object} chartAllData
+   * @param {int} chartID : chart id
+   * @param {int} gridLength : length of chart grid
+   * @return {object} : chart data
+   */
+  [typePath.reset]: ({ state, getters, commit, dispatch }, payload) => {
+    // delete
+    for (const _series of payload.chartAllData[payload.chartID].series) {
+      _series.data.length = 0
+      _series.length = 0
+    }
+    delete payload.chartAllData[payload.chartID]
+    dispatch(typePath.init, { chartAllData: payload.chartAllData, chartID: payload.chartID, gridLength: payload.gridLength })
+  },
+
+  /**
+   * clear all chart data
+   *
+   * @param {int} chartAllData
+   */
+  [typePath.clear]: ({ state, getters, commit }, payload) => {
+    for (const id in payload.chartAllData) {
+      for (const _series of payload.chartAllData[id].series) {
+        _series.data.length = 0
+        _series.length = 0
+      }
+      delete payload.chartAllData[id]
+    }
+  },
+
+  /**
+   * update datazoom by chart ID
+   *
+   * @param {object} chartAllData
+   * @param {int} chartID
+   */
+  [typePath.updateDataZoom]: (state, payload) => {
+    // update dataZoom AxisIndex list
+    const dataZoomXAxisIndex = Array.apply(null, { length: payload.chartAllData[payload.chartID].xAxis.length }).map(Number.call, Number)
+    const dataZoomYAxisIndex = Array.apply(null, { length: payload.chartAllData[payload.chartID].yAxis.length }).map(Number.call, Number)
+    if (payload.chartAllData[payload.chartID].dataZoom == null) {
+      payload.chartAllData[payload.chartID].dataZoom = newDataZoom()
+    }
+    if (payload.chartAllData[payload.chartID].dataZoom != null) {
+      payload.chartAllData[payload.chartID].dataZoom[0].xAxisIndex = dataZoomXAxisIndex
+      payload.chartAllData[payload.chartID].dataZoom[1].xAxisIndex = dataZoomXAxisIndex
+      payload.chartAllData[payload.chartID].dataZoom[2].yAxisIndex = dataZoomYAxisIndex
+    }
+  },
+
+  /**
+   * register device-channel to chartData
+   *
+   * @param {object} chartAllData
+   * @param {int} chartID : chart id
+   * @param {int} gridIndex : index of grid
+   * @param {int} deviceNameX
+   * @param {int} deviceIDX
+   * @param {int} channelX
+   * @param {int} deviceNameY
+   * @param {int} deviceIDY
+   * @param {int} channelY
+   * @return {object} : chart data
+   */
+  [typePath.register]: ({ state, getters, commit, dispatch }, payload) => {
+    const chartData = payload.chartAllData[payload.chartID]
+    const sourceList = [
+      {
+        name: payload.deviceNameX,
+        id: payload.deviceIDX,
+        channel: payload.channelX,
+      },
+      {
+        name: payload.deviceNameY,
+        id: payload.deviceIDY,
+        channel: payload.channelY,
+      },
+    ]
+    if (chartData == null) {
+      return false
+    }
+
+    let xAxisType
+    let yAxisType
+    let xAxisSource
+    let yAxisSource
+
+    const legendName = getLegendName(sourceList)
+
+    switch (sourceList[0].name) {
+      case 'Time':
+        xAxisType = 'time'
+        xAxisSource = [-1, -1]
+        break
+      default:
+        xAxisType = 'value'
+        xAxisSource = [sourceList[0].id, sourceList[0].channel]
+        break
+    }
+    switch (sourceList[1].name) {
+      case 'Time':
+        yAxisType = 'time'
+        yAxisSource = [-1, -1]
+        break
+      default:
+        yAxisType = 'value'
+        yAxisSource = [sourceList[1].id, sourceList[1].channel]
+        break
+    }
+
+    // if AxisIndex != -1 then add new axis into list
+    let _xAxisIndex = -1
+    let _yAxisIndex = -1
+    // the grid have exist, so just use the axis in grid
+    for (let i = 0; i < chartData.xAxis.length; i++) {
+      if (chartData.xAxis[i].gridIndex === payload.gridIndex) {
+        _xAxisIndex = i
+      }
+    }
+    for (let i = 0; i < chartData.yAxis.length; i++) {
+      if (chartData.yAxis[i].gridIndex === payload.gridIndex) {
+        _yAxisIndex = i
+      }
+    }
+
+    // create new axis
+    if (_xAxisIndex === -1) {
+      if (payload.chartID === 0) {
+        chartData.xAxis.push(makeXAxisOverview(payload.gridIndex, xAxisType))
+      } else {
+        chartData.xAxis.push(makeXAxis(payload.gridIndex, xAxisType))
+      }
+      _xAxisIndex = chartData.xAxis.length - 1
+    }
+    if (_yAxisIndex === -1) {
+      if (payload.chartID === 0) {
+        chartData.yAxis.push(makeYAxisOverview(payload.gridIndex, yAxisType))
+      } else {
+        chartData.yAxis.push(makeYAxis(payload.gridIndex, yAxisType))
+      }
+      _yAxisIndex = chartData.yAxis.length - 1
+    }
+
+    // dispatch(typePath.updateDataZoom, { chartAllData: payload.chartAllData, chartID: payload.chartID })
+
+    // register series
+    const _series = newSeries('line', legendName, _xAxisIndex, _yAxisIndex, xAxisSource, yAxisSource, null, null)
+    chartData.series.push(_series)
+
+    // register series into grid
+    const _axisList = []
+
+    sourceList.forEach((source, index) => {
+      let _axis = 'X'
+      if (index !== 0) {
+        _axis = 'Y'
+      }
+      switch (source.name) {
+        case 'Time':
+          _axisList.push(_axis + ' AXIS = TIME')
+          break
+        case 'Neulive':
+          _axisList.push(_axis + ' AXIS = NEULIVE ' + source.id + ' CHANNEL ' + source.channel)
+          break
+        case 'Elite':
+          switch (source.channel) {
+            case 1:
+              _axisList.push(_axis + ' AXIS = ELITE ' + source.id + ' CURRENT')
+              break
+            case 2:
+              _axisList.push(_axis + ' AXIS = ELITE ' + source.id + ' VOLTAGE')
+              break
+            case 3:
+              _axisList.push(_axis + ' AXIS = ELITE ' + source.id + ' RESISTANCE')
+              break
+            default:
+              _axisList.push(_axis + ' AXIS = ELITE ' + source.id + ' CHANNEL ' + source.channel)
+              break
+          }
+          break
+        default:
+          _axisList.push(_axis + ' AXIS = DEVICE ' + source.id + ' CHANNEL ' + source.channel)
+          break
+      }
+    })
+
+    const _gridSeries = {
+      name: legendName,
+      xAxis: _axisList[0],
+      yAxis: _axisList[1],
+    }
+
+    chartData.grid[payload.gridIndex].series.push(_gridSeries)
+
+    return chartData
+  },
+
+  // /**
+  //  * remove device-channel from chart TODO
+  //  *
+  //  * @param {object} chartAllData
+  //  * @param {int} chartID
+  //  * @param {int} legendName
+  //  * @return {object} : chart data
+  //  */
+  // [typePath.remove]: ({ state, getters, commit }, payload) => {
+  //   const chartData = getters.getDataByIDChart(payload.chartID)
+  //   if (chartData == null || chartData.legend.data.length === 0) {
+  //     return false
+  //   }
+
+  //   let _xAxisIndex = -1
+  //   let _yAxisIndex = -1
+
+  //   // remove legend
+  //   const _legendIndex = chartData.legend.data.indexOf(payload.legendName)
+  //   console.log(_legendIndex)
+  //   if (_legendIndex >= 0) {
+  //     chartData.legend.data.splice(chartData.legend.data.indexOf(payload.legendName), 1)
+  //   } else {
+  //     return false
+  //   }
+  //   // remove series
+  //   for (let i = 0; i < chartData.series.length; i++) {
+  //     if (chartData.series[i].name === payload.legendName) {
+  //       _xAxisIndex = chartData.series[i].xAxisIndex
+  //       _yAxisIndex = chartData.series[i].yAxisIndex
+  //       chartData.series.splice(i, 1)
+  //       break
+  //     }
+  //   }
+  //   // remove grid series name
+  //   const _gridIndex = chartData.xAxis[_xAxisIndex].gridIndex
+  //   for (let i = 0; i < chartData.grid[_gridIndex].series.length; i++) {
+  //     if (chartData.grid[_gridIndex].series[i] === payload.legendName) {
+  //       chartData.grid[_gridIndex].series.splice(i, 1)
+  //       break
+  //     }
+  //   }
+  //   for (let i = 0; i < chartData.grid.length; i++) {
+  //     if (chartData.grid[i].name === payload.legendName) {
+  //       _xAxisIndex = chartData.series[i].xAxisIndex
+  //       _yAxisIndex = chartData.series[i].yAxisIndex
+  //       chartData.series.splice(i, 1)
+  //       break
+  //     }
+  //   }
+  //   chartData.series.forEach(series => {
+  //     if (series.xAxisIndex === _xAxisIndex) {
+  //       _xAxisIndex = -1
+  //     }
+  //     if (series.yAxisIndex === _yAxisIndex) {
+  //       _yAxisIndex = -1
+  //     }
+  //   })
+  //   // remove xAxis
+  //   if (_xAxisIndex !== -1) {
+  //     chartData.xAxis.splice(_xAxisIndex, 1)
+  //     chartData.series.forEach(series => {
+  //       if (series.xAxisIndex > _xAxisIndex) {
+  //         series.xAxisIndex--
+  //       }
+  //     })
+  //     chartData.dataZoom[0].xAxisIndex.pop()
+  //   }
+  //   // remove yAxis
+  //   if (_yAxisIndex !== -1) {
+  //     chartData.yAxis.splice(_yAxisIndex, 1)
+  //     chartData.series.forEach(series => {
+  //       if (series.yAxisIndex > _yAxisIndex) {
+  //         series.yAxisIndex--
+  //       }
+  //     })
+  //     chartData.dataZoom[2].yAxisIndex.pop()
+  //   }
+
+  //   console.log(chartData)
+  //   return true
+  // },
+
+}
+
+export default actions