7/1~7/4 practice

package.json

@@ -5,7 +5,7 @@
   "description": "Vue.js admin template",
   "author": "smartapant <smartapant@gmail.com>",
   "scripts": {
-    "serve": "vue-cli-service serve",
+    "serve": "vue-cli-service serve --mode development",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
     "lint:style": "stylelint --fix src/**/*.{vue,htm,html,css,sss,less,scss}",

src/app/main.js

@@ -44,13 +44,24 @@ import '../registerServiceWorker'
 
 localforage.config({ name: 'bioprovue' })
 
+let MqttUrl
+// for developer
+if (process.env.NODE_ENV === 'development') {
+  // MqttUrl = 'ws://60.250.195.121:8080'  // TODO: if change device, need to change this
+  MqttUrl = 'ws://192.168.5.62:8083' // TODO: if change device, need to change this
+  // MqttUrl = 'ws://192.168.5.240:8083'
+} else {
+  // for user
+  MqttUrl = `ws://${location.href.split('/')[2]}:8083`
+}
+
 if (process.env.VUE_APP_BUILD_VERSION) {
   // eslint-disable-next-line
-  const message = `%c${'Build_information:'}\n %c${'Version'}: %c${VERSION},\n %c${'Timestamp'}: %c${TIMESTAMP},\n %c${'Commit'}: %c${COMMIT}`
+  const message = `%c${'Build_information:'}\n %c${'Version'}: %c${VERSION},\n %c${'Timestamp'}: %c${TIMESTAMP},\n %c${'Commit'}: %c${COMMIT} %c${'Mqtt'}: %c${MqttUrl}`
   // eslint-disable-next-line
   console.info(
     message,
-    'color: blue;', 'color: red;', 'color: blue;', 'color: red;', 'color: blue;', 'color: red;', 'color: blue;',
+    'color: blue;', 'color: red;', 'color: blue;', 'color: red;', 'color: blue;', 'color: red;', 'color: blue;', 'color: red;', 'color: blue;',
   )
 }
 
@@ -61,11 +72,10 @@ Vue.component('chart', ECharts)
 Vue.use(VueWorker)
 Vue.use(VueAxios, axios)
 Vue.use(Toast)
-
 // Vue.use(VueMqtt, 'ws://52.194.17.114:8083')
-Vue.use(VueMqtt, 'ws://' + location.href.split('/')[2] + ':8083')
+// Vue.use(VueMqtt, 'ws://' + location.href.split('/')[2] + ':8083')
 // Vue.use(VueMqtt, 'ws://' + '192.168.151.125' + ':8083')
-// Vue.use(VueMqtt, 'ws://' + '192.168.3.211' + ':8083')
+Vue.use(VueMqtt, MqttUrl)
 
 Vue.prototype.API = api
 Vue.prototype.GLOBAL = global_

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

@@ -61,6 +61,20 @@ export const navigationRoutes = {
         iconClass: 'vuestic-iconset vuestic-iconset-settings',
       },
     },
+    {
+      name: 'test',
+      displayName: 'Test',
+      meta: {
+        iconClass: 'vuestic-iconset vuestic-iconset-settings',
+      },
+    },
+    {
+      name: 'TaskContent_v2',
+      displayName: 'TaskContent_v2',
+      meta: {
+        iconClass: 'vuestic-iconset vuestic-iconset-statistics',
+      },
+    },
     // {
     //   name: 'forms',
     //   displayName: 'menu.forms',

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

@@ -4,7 +4,7 @@
       <va-select
         @input="changeAxis()"
         :label="''"
-        v-if="deviceName!=='EliteEIS'"
+        v-if="deviceName!=='EliteEIS' || (deviceName==='EliteEIS' && metaList[metaIndex].parameter_set.MODE === 1)"
         v-model="channelFormat"
         textBy="description"
         class="va-select-without-margin"
@@ -14,7 +14,7 @@
       <va-select
         @input="changeAxis()"
         :label="''"
-        v-if="deviceName==='EliteEIS'"
+        v-if="deviceName==='EliteEIS' && metaList[metaIndex].parameter_set.MODE !== 1"
         v-model="channelFormat"
         textBy="description"
         class="va-select-without-margin"

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

@@ -384,14 +384,13 @@ export default {
         const showParams = paramTable[this.deviceName].MODE[mode].showParameter
         this.showDict.MODE = modeName
         if (modeName === 'Pulse Sensing') {
-          const duplicateParam = ['V_initial', 't_pulse', 'CURR_REC_START', 'CURR_REC_END']
+          const duplicateParam = ['V_initial', 't_pulse', 'CURR_REC']
           for (let i = 0; i < 4; i++) {
-            const key = 'segment_order_' + String(i)
-            const order = paramTable[this.deviceName][key].rev_func(params[key])
-            if (parseInt(order) !== 0) { // if === 0, 代表沒有使用這個block
-              for (let key of duplicateParam) {
-                key = key + '_' + String(i)
-                this.fillShowDict(key, params[key])
+            const key = 'segment_order'
+            const order = paramTable[this.deviceName][key].outputReadabilityData(params[key], 1, i)
+            if (parseInt(order) >= 0) { // if === -1, 代表沒有使用這個block
+              for (const key of duplicateParam) {
+                this.fillShowDict(key, paramTable[this.deviceName][key].outputReadabilityData(params[key], 1, i), i)
               }
             }
           }
@@ -409,11 +408,16 @@ export default {
       }
       this.dump()
     },
-    fillShowDict (key, value) {
-      const expVal = paramTable[this.deviceName][key].rev_func(value)
-      const name = typeof (paramTable[this.deviceName][key].showName) === 'function'
+    fillShowDict (key, value, index = -1) {
+      const expVal = paramTable[this.deviceName][key].defaultUnit
+        ? paramTable[this.deviceName][key].outputReadabilityData(value, paramTable[this.deviceName][key].unit[paramTable[this.deviceName][key].defaultUnit])
+        : paramTable[this.deviceName][key].outputReadabilityData(value)
+      let name = typeof (paramTable[this.deviceName][key].showName) === 'function'
         ? paramTable[this.deviceName][key].showName(this.mode)
         : paramTable[this.deviceName][key].showName
+      if (index >= 0) {
+        name += ` ${index + 1}`
+      }
       const unit = paramTable[this.deviceName][key].defaultUnit
       this.showDict[name] = unit !== undefined ? expVal.toString() + unit : expVal.toString()
     },

src/components/debug/Debug.vue

@@ -0,0 +1,115 @@
+<template>
+  <va-card class="flex xl3 md3 sm12 xs12" title="MQTT">
+    <div class="row ma-1 text-center">
+      <va-button @click="getControllerID">Controller-ID</va-button>
+      <div class="flex-center">
+        {{ controllerID }}
+      </div>
+    </div>
+    <div class="row ma-1 text-start" v-if="controllerID !== ''">
+      <va-button @click="getHardwareInfo">HardwareInfo</va-button>
+      <div class="">
+        {{ responseMessage }}
+      </div>
+    </div>
+  </va-card>
+</template>
+
+<script>
+import api from '@/data/api'
+
+export default {
+  name: 'Developer',
+  components: {
+  },
+  data () {
+    return {
+      controllerID: '',
+      responseMessage: '',
+    }
+  },
+  mqtt: {
+    async '+/get_device_info_all/+' (data, topic) {
+      console.log('get_device_info_all', String.fromCharCode.apply(null, data))
+    },
+    async '+/hardware_device/+' (data, topic) {
+      console.log('hardware_device', String.fromCharCode.apply(null, data))
+    },
+    async '+/hardware_datetime/+' (data, topic) {
+      console.log('hardware_datetime', String.fromCharCode.apply(null, data))
+    },
+    async '+/hardware_info/+' (data, topic) {
+      console.log('hardware_info', String.fromCharCode.apply(null, data))
+      this.responseMessage = String.fromCharCode.apply(null, data)
+    },
+    async '+/broadcast/+' (data, topic) {
+      console.log('broadcast', String.fromCharCode.apply(null, data))
+    },
+  },
+  methods: {
+    mqttPub: function (topic, mes) {
+      this.$mqtt.publish(topic, mes)
+    },
+    mqttSub: function (val) {
+      this.$mqtt.subscribe(val)
+    },
+    mqttUnSub: function (val) {
+      this.$mqtt.unsubscribe(val)
+    },
+    pageMqttSub: function (id) {
+      this.mqttSub(id + '/hardware_datetime/+')
+      this.mqttSub(id + '/hardware_device/+')
+      this.mqttSub(id + '/hardware_info/+')
+      this.mqttSub(id + '/broadcast')
+      this.mqttSub(id + '/get_device_info_all/+')
+    },
+    pageMqttUnSub: function (id) {
+      this.mqttUnSub(id + '/hardware_datetime/+')
+      this.mqttUnSub(id + '/hardware_device/+')
+      this.mqttUnSub(id + '/hardware_info/+')
+      this.mqttUnSub(id + '/broadcast')
+      this.mqttUnSub(id + '/get_device_info_all/+')
+    },
+    getControllerID: async function () {
+      try {
+        const response = await api.controller.getAll()
+        if (response.status === 200) {
+          if (response.data.length > 0) {
+            this.controllerID = response.data[0].mqtt_id
+            this.pageMqttSub(this.controllerID)
+            return true
+          }
+          this.controllerID = 'No Controller Info'
+          return false
+        }
+        this.controllerID = 'Wrong status ' + response.status
+      } catch (e) {
+        console.log(e)
+        this.controllerID = e
+      }
+    },
+    getHardwareDatetime: function () {
+      this.mqttPub(this.controllerID + '_user', JSON.stringify({
+        header: 'hardware_datetime/0',
+        content: String(Date.now()),
+      }))
+    },
+    getHardwareInfo: function () {
+      this.mqttPub(this.controllerID + '_user', JSON.stringify({
+        header: 'hardware_info/0',
+      }))
+    },
+  },
+  async mounted () {
+  },
+  destroyed () {
+    if (this.controllerID !== '') {
+      this.pageMqttUnSub(this.controllerID)
+    }
+  },
+}
+</script>
+
+<style>
+
+</style>

src/components/developer/Developer.vue

@@ -0,0 +1,58 @@
+<template>
+  <va-card class="" title="LED">
+    <div class="row ma-1">
+      <va-button v-for="color in colors" :key="color"  :color="colorMapping[color]" @click="changeLedColor(color)">
+        {{color}}
+      </va-button>
+      <va-button :color="'gray'" @click="testLed()">test</va-button>
+    </div>
+  </va-card>
+</template>
+
+<script>
+import { taskInfo } from '@/data/task/TaskInfo'
+
+export default {
+  name: 'Developer',
+  components: {
+  },
+  data () {
+    return {
+      colors: ['red', 'orange', 'yellow', 'green', 'blue', 'cyan', 'magenta'],
+      colorMapping: {
+        red: 'danger',
+        orange: 'Orange',
+        blue: 'primary',
+        yellow: 'warning',
+        green: 'success',
+        cyan: 'info',
+        magenta: 'violet',
+      },
+    }
+  },
+  methods: {
+    mqttPub: function (topic, mes) {
+      this.$mqtt.publish(topic, mes)
+    },
+    testLed: function () {
+      this.changeLedColor('red')
+      setTimeout(() => { this.changeLedColor('blue') }, 2000)
+      setTimeout(() => { this.changeLedColor('green') }, 4000)
+    },
+    changeLedColor: function (color) {
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'hardware_send/0',
+        command: 'led',
+        state: color,
+      }))
+    },
+  },
+  async mounted () {
+    await taskInfo.updateTaskInfo(this.$route.params.taskID)
+  },
+}
+</script>
+
+<style>
+
+</style>

src/components/devices/DevicesOverview.vue

@@ -142,7 +142,8 @@ import { taskInfo } from '@/data/task/TaskInfo'
 import { FulfillingBouncingCircleSpinner } from 'epic-spinners'
 
 export default {
-  name: 'devices-overview',
+  name: 'devices-overview', // Q04: this is use for the template can call itself's script?(c.f. line 2: class="devices-overview")
+  // Ans: other component can use this as the name to import this vue file
   components: {
     FulfillingBouncingCircleSpinner,
   },
@@ -363,8 +364,8 @@ export default {
       await update()
     },
     mqttSub: function (val) {
-      this.$mqtt.subscribe(val)
-    },
+      this.$mqtt.subscribe(val) // Q06: meaning of $ before the variable: shortcut for jQuery? or udnerscore? then define at where?
+    }, // Q06: search: Vue-Matt
     mqttUnSub: function (val) {
       this.$mqtt.unsubscribe(val)
     },

src/components/devices/test.vue

@@ -0,0 +1,279 @@
+<template>
+  <div>
+    <va-card>
+      <div>
+        Current show Time: {{currentTime}} <br>
+        Current Value: {{currentValue}}
+      </div>
+      <chart :options="chart_practice" style="width: auto;"> </chart>
+    </va-card>
+  </div>
+</template>
+
+<script>
+import { mapFields } from 'vuex-map-fields'
+
+export default {
+  name: 'devices-overview',
+  components: {
+  },
+
+  data () {
+    return {
+      testData: [],
+      dataBuffMax: 300,
+      dataBuff: [],
+      xAxisBuff: [],
+      dataStart: 0,
+      currentValue: 0,
+      currentTime: '0',
+      // title: [
+      //   {
+      //     left: 'center',
+      //     text: 'Gradient along the y axis'
+      //   },
+      //   {
+      //     top: '55%',
+      //     left: 'center',
+      //     text: 'Gradient along the x axis'
+      //   }
+      // ],
+      chart_practice: {
+        // /*
+        xAxis: [
+          {
+            type: 'category',
+            // type: 'category',
+            data: [],
+            axisLabel: {
+              formatter: function (val) {
+                val = parseInt(val) / 1e6
+                return val.toString() + 's'
+              },
+            },
+          },
+          {
+            gridIndex: 1,
+            type: 'category',
+            data: [],
+            // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+          },
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            // boundaryGap: ['100%', '100%'], // TODO: change the value
+          },
+          {
+            gridIndex: 1,
+            type: 'value',
+            max: '100',
+            min: '0',
+          },
+        ],
+        grid: [
+          /*
+          {
+            bottom: '60%',
+            left: '10%',
+            width: 'auto',
+            height: '30%',
+          },
+          {
+            top: '20%',
+          }
+          */
+          {
+            bottom: '60%',
+            // left: '0%',
+            width: 'auto',
+          },
+          {
+            top: '60%',
+            // bottom: '60%',
+            // right: '0%',
+            width: 'auto',
+          },
+        ],
+        series: [
+          {
+            data: [],
+            type: 'line',
+            // smooth: true,
+          },
+          {
+            data: [],
+            type: 'line',
+            xAxisIndex: 1,
+            yAxisIndex: 1,
+            lineStyle: { color: '#d5ceeb' },
+            // smooth: true,
+          },
+        ],
+        tooltip: {
+          trigger: 'axis',
+        },
+        // dataZoom: [
+        //   {
+        //       type: 'slider',//資料滑塊
+        //       start: 0,
+        //       minSpan: 8,    //5min
+        //       // minSpan:16,   //10min
+        //       // minSpan:24,   //15min
+        //       // minSpan:50,   //30min
+        //       dataBackground:{
+        //           lineStyle:{
+        //               color:'#95BC2F'
+        //           },
+        //           areaStyle:{
+        //               color:'#95BC2F',
+        //               opacity:1,
+        //           }
+        //       },
+        //       // fillerColor:'rgba(255,255,255,.6)'
+        //   },
+        //   {
+        //       type:'inside'//使滑鼠在圖表中時滾輪可用
+        //   }
+        // ],
+        dataZoom: [
+          {
+            id: 'dataZoomX',
+            // type: 'slider',
+            type: 'inside',
+            xAxisIndex: [0],
+            filterMode: 'none',
+          },
+          {
+            id: 'dataZoomY',
+            type: 'inside',
+            yAxisIndex: [0],
+            filterMode: 'none',
+          },
+        ],
+        // dataZoom: [
+        //   {
+        //     type: 'slider',
+        //   },
+        //   {
+        //     type: 'slider',
+        //   },
+        // ],
+      },
+    }
+  },
+  computed: {
+    ...mapFields('', [
+      'developer_mode',
+    ]),
+    ...mapFields('taskContent', [
+      'chartData',
+      'taskContentChartKey',
+    ]),
+  },
+  methods: {
+    mqttSub: function (val) {
+      this.$mqtt.subscribe(val)
+    },
+    mqttUnSub: function (val) {
+      this.$mqtt.unsubscribe(val)
+    },
+    mqttPub: function (topic, mes) {
+      this.$mqtt.publish(topic, mes)
+    },
+    updateTestDataValue: function () {
+      setInterval(() => {
+        // this.testData = this.testData.splice(1, 6);
+        var today
+        today = new Date().toLocaleTimeString()
+        /*
+        this.chart_practice.series[0].data.shift()
+        this.chart_practice.series[0].data.push(Math.floor(Math.random() * 10)+50)
+        this.chart_practice.xAxis[0].data.shift()
+        this.chart_practice.xAxis[0].data.push(today)
+        */
+        this.chart_practice.series[1].data.shift()
+        this.chart_practice.series[1].data.push(Math.floor(Math.random() * 10) + 50)
+        this.chart_practice.xAxis[1].data.shift()
+        this.chart_practice.xAxis[1].data.push(today)
+      }, 10)
+    },
+    updateDataValue: function () { // this part is use the mqtt input as buffer, then push it into the series
+      setInterval(() => {
+        if (this.chart_practice.series[0].data.length > this.dataBuffMax) {
+          this.chart_practice.series[0].data.shift()
+          this.chart_practice.xAxis[0].data.shift()
+        }
+        if (this.dataBuff.length > 0) {
+          this.chart_practice.series[0].data.push(this.dataBuff[this.dataStart++])
+          this.chart_practice.xAxis[0].data.push(this.xAxisBuff[this.dataStart++])
+        }
+      }, 10)
+      setInterval(() => {
+        if (this.dataBuff.length > 0) {
+          this.currentValue = this.dataBuff[this.dataStart - 1]
+          this.currentTime = (parseInt(this.xAxisBuff[this.dataStart - 1]) / 1e6).toString() + 's'
+        }
+      }, 1000)
+    },
+    destroyed () {
+      this.mqttUnSub('+/data_server/device_data_stream/+/+')
+    },
+  },
+  mqtt: {
+    async '+/data_server/device_data_stream/+/+' (data, topic) {
+      // console.log(data)
+      // console.log(topic, String.fromCharCode.apply(null, data))
+      var deviceData = String.fromCharCode.apply(null, data)
+      var dataArr = deviceData.split(' ')
+      var startTime = parseInt(dataArr.shift(), 10)
+      var endTime = parseInt(dataArr.pop(), 10)
+      var timeDiff = (endTime - startTime) / dataArr.length
+      var eachTime = startTime - timeDiff
+      dataArr = dataArr.map(Number)
+      console.log(dataArr)
+      // if (this.dataBuff.length > this.dataBuffMax) {
+      //   this.dataBuff = this.dataBuff.slice(dataArr.length)
+      //   this.xAxisBuff.data = this.xAxisBuff.data.slice(dataArr.length)
+      // }
+      dataArr.forEach(element => {
+        this.dataBuff.push(element)
+        this.xAxisBuff.push(eachTime)
+        eachTime += timeDiff
+      })
+      /*
+      if (this.chart_practice.series[0].data.length > this.dataBuffMax) {
+        this.chart_practice.series[0].data = this.chart_practice.series[0].data.slice(dataArr.length)
+        this.chart_practice.xAxis[0].data = this.chart_practice.xAxis[0].data.slice(dataArr.length)
+
+      }
+      dataArr.forEach(element => {
+        this.chart_practice.series[0].data.push(element)
+        this.chart_practice.xAxis[0].data.push(eachTime)
+        eachTime += timeDiff
+      })
+      */
+    },
+  },
+  async mounted () {
+    /* --- 7/4 --- */
+
+    var index
+    var today
+    for (index = 0; index < 100; index++) {
+      today = new Date().toLocaleTimeString()
+      // this.chart_practice.series[0].data.push(Math.floor(Math.random() * 10)+50);
+      // this.chart_practice.xAxis[0].data.push(today);
+      this.chart_practice.series[1].data.push(Math.floor(Math.random() * 10) + 50)
+      this.chart_practice.xAxis[1].data.push(today)
+    }
+    this.updateTestDataValue()
+    this.updateDataValue()
+    this.mqttSub('+/data_server/device_data_stream/+/0') // /device/channel
+  },
+
+}
+</script>
+
+<style lang="scss">
+</style>

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

@@ -82,9 +82,9 @@
     <va-card class="flex sm12 xl12 md12 xs12">
       <template slot="header">
         <div class="flex sm12 xl12 md12 xs12" style="text-align: end;">
-          <!-- <va-button class="" color="success" v-if="selected.length" @click="downloadSelected" target="_blank" small>
+          <va-button class="" color="success" v-if="selected.length" @click="downloadSelected" target="_blank" small>
             DOWNLOAD
-          </va-button> -->
+          </va-button>
           <va-button class="" color="danger" v-if="selected.length" @click="deleteMultiFilesConfirm" target="_blank" small>
             DELETE
           </va-button>
@@ -673,12 +673,12 @@ export default {
       // this.$refs.datatable_ref.refresh()
       // this.$refs.datatable_ref.currentPage = 1
     },
-    // downloadSelected: function () {
-    //   for (let i = 0; i < this.selected.length; i++) {
-    //     const meta = this.selected[i]
-    //     this.downloadCsv(meta)
-    //   }
-    // },
+    downloadSelected: function () {
+      for (let i = 0; i < this.selected.length; i++) {
+        const meta = this.selected[i]
+        this.downloadExcel(meta)
+      }
+    },
     async deleteSelected () {
       for (let i = 0; i < this.selected.length; i++) {
         const meta = this.selected[i]

src/components/setting/controllerInfo.vue

@@ -29,7 +29,11 @@
                 {{ controller.mac_address.toUpperCase() }}
               </va-item-label>
               <va-item-label>
-                Build Version : #
+                Frontend Version : #
+                {{ commit }}
+              </va-item-label>
+              <va-item-label>
+                Backend Version : #
                 {{ controller.software_version }}
               </va-item-label>
               <va-item-label>
@@ -79,6 +83,8 @@ export default {
   },
   data () {
     return {
+      // eslint-disable-next-line no-undef
+      commit: COMMIT,
     }
   },
   computed: {

src/components/task/content/TaskContent.vue

@@ -23,8 +23,11 @@
     <div class="row row-equal">
       <div v-if="showDeviceSetting" class="flex md12 xl4 xs12 sm12">
         <div class="row">
-          <div class="flex sm12 xl12 md12 xs12">
+          <!-- <div class="flex sm12 xl12 md12 xs12">
             <task-devices :ref="'devices_ref'" @add="addDevice($event)" @remove="removeDevice($event)" @refreshSetting="refreshChartSetting($event)" class="pa-0" />
+          </div> -->
+          <div class="flex sm12 xl12 md12 xs12">
+            <task-devices-new :ref="'devices_ref'" @add="addDevice($event)" @remove="removeDevice($event)" @refreshSetting="refreshChartSetting($event)" class="pa-0" />
           </div>
           <div class="flex sm12 xl12 md12 xs12" v-if="developer_mode">
             <task-formula :ref="'formula_ref'" @add="addFormula($event)" @remove="removeFormula($event)" class="pa-0" />
@@ -98,7 +101,8 @@
 import { dataStreamBuffer } from '../../../data/task/DataStreamBuffer'
 import { taskInfo } from '../../../data/task/TaskInfo'
 import CanvasChart from './chart/CanvasChart'
-import TaskDevices from './controller/TaskDevices'
+// import TaskDevices from './controller/TaskDevices'
+import TaskDevicesNew from './controller/TaskDevicesNew'
 // import api from '@/data/api'
 import { mapFields } from 'vuex-map-fields'
 import { mapActions } from 'vuex'
@@ -111,7 +115,8 @@ export default {
   name: 'TaskContent',
   components: {
     CanvasChart,
-    TaskDevices,
+    // TaskDevices,
+    TaskDevicesNew,
     TaskFormula,
   },
   computed: {
@@ -120,6 +125,7 @@ export default {
       'chartData',
       'taskContentChartPanelKey',
       'taskContentChartNumber',
+      'deviceListNew',
     ]),
     ...mapFields('', [
       'developer_mode',
@@ -141,8 +147,14 @@ export default {
   },
   mqtt: {
     async '+/get_device_info_all/+' (data, topic) {
-      await taskInfo.deviceInfo(String.fromCharCode.apply(null, data), this.deviceList)
+      // console.log('get_device_info_all', String.fromCharCode.apply(null, data))
+      this.deviceListNew = JSON.parse(String.fromCharCode.apply(null, data)).data
+
+      // console.log(this.deviceListNew)
+      // await taskInfo.deviceInfo(String.fromCharCode.apply(null, data), this.deviceList)
+      // console.log('this.deviceList 0', this.deviceList)
       // this.refreshDevicesWindow()
+      // console.log('this.$refs.devices_ref', this.$refs.devices_ref)
       if (this.$refs.devices_ref != null) {
         await this.$refs.devices_ref.loadingDone()
       }
@@ -150,28 +162,38 @@ export default {
       this.getParmDone = true
     },
     async '+/get_device_info/+' (data, topic) {
-      const dataObj = JSON.parse(String.fromCharCode.apply(null, data))
-      await taskInfo.deviceInfo(dataObj, this.deviceList)
-      this.refreshDevicesWindow()
-      this.checkStiStatus()
+      // const dataObj = JSON.parse(String.fromCharCode.apply(null, data))
+      // await taskInfo.deviceInfo(dataObj, this.deviceList)
+      // this.refreshDevicesWindow()
+      // this.checkStiStatus()
 
-      const result = await this.taskContentChartDefaultChartGenerator({
-        _deviceList: this.deviceList,
-        _itemID: taskInfo.getDeviceIDByRaw(dataObj.data.device_id),
-        _chartID: null,
-        _type: 'device',
-      })
-      if (result) {
-        taskInfo.deviceStart(dataObj.data.device_id, this.deviceList)
-      }
+      // const result = await this.taskContentChartDefaultChartGenerator({
+      //   _deviceList: this.deviceList,
+      //   _itemID: taskInfo.getDeviceIDByRaw(dataObj.data.device_id),
+      //   _chartID: null,
+      //   _type: 'device',
+      // })
+      // if (result) {
+      //   taskInfo.deviceStart(dataObj.data.device_id, this.deviceList)
+      // }
     },
     async '+/device_parameter/+' (data, topic) {
-      await taskInfo.deviceParameter(String.fromCharCode.apply(null, data))
-      this.refreshDevicesWindow()
+      const res = JSON.parse(String.fromCharCode.apply(null, data))
+      const device = this.deviceListNew.find((ele) => ele.mac_address === res.device)
+
+      for (const key of Object.keys(res.data)) {
+        device.configuration[key] = res.data[key]
+      }
+      // await taskInfo.deviceParameter(String.fromCharCode.apply(null, data))
+      // this.refreshDevicesWindow()
     },
     async '+/device_parameter_value/+' (data, topic) {
-      await taskInfo.deviceParameter(String.fromCharCode.apply(null, data))
-      this.refreshDevicesWindow()
+      const res = JSON.parse(String.fromCharCode.apply(null, data))
+      const device = this.deviceListNew.find((ele) => ele.mac_address === res.device)
+
+      for (const key of Object.keys(res.data)) {
+        device.configuration[key] = res.data[key]
+      }
     },
     async '+/hardware_device/+' (data, topic) {
       await taskInfo.deviceInfo(String.fromCharCode.apply(null, data), this.deviceList)
@@ -185,17 +207,7 @@ export default {
       const topicSplit = topic.split('/')
       const deviceID = parseInt(topicSplit[3])
       const channel = parseInt(topicSplit[4])
-      if (this.getParmDone & !taskInfo.getDeviceInfoByRawID(deviceID).info.isSync) {
-        const result = await this.taskContentChartDefaultChartGenerator({
-          _deviceList: this.deviceList,
-          _itemID: taskInfo.getDeviceIDByRaw(deviceID),
-          _chartID: null,
-          _type: 'device',
-        })
-        if (result) {
-          taskInfo.deviceStart(deviceID, this.deviceList)
-        }
-      }
+
       dataStreamBuffer.into(String.fromCharCode.apply(null, data), deviceID, (channel + 1))
     },
     '+/device_save_path/+' (data, topic) {
@@ -218,6 +230,7 @@ export default {
     },
     async '+/broadcast' (data, topic) {
       const mes = String.fromCharCode.apply(null, data).split(':')
+      let device
       // let content
       switch (mes[0]) {
         case 'state':
@@ -248,35 +261,22 @@ export default {
           this.showShutdownModal = true
           break
         case 'start':
-          taskInfo.deviceStart(parseInt(mes[1]), this.deviceList)
-          this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
-            header: 'get_device_info/0',
-            device: parseInt(mes[1]),
-          }))
-          // if (!taskInfo.getDeviceInfoByRawID(parseInt(parseInt(mes[1]))).info.isSync) {
-          //   taskInfo.deviceStart(parseInt(mes[1]), this.deviceList)
-          //   if (chartData.defaultChartGenerator(this.deviceList, taskInfo.getDeviceIDByRaw(parseInt(parseInt(mes[1]))), null, 'device')) {
-          //     taskInfo.deviceStart(parseInt(parseInt(mes[1])), this.deviceList)
-          //   }
-          // }
-          if (!taskInfo.getDeviceInfoByRawID(parseInt(mes[1])).info.isSync) {
-            taskInfo.deviceStart(parseInt(mes[1]), this.deviceList)
-            const result = await this.taskContentChartDefaultChartGenerator({
-              _deviceList: this.deviceList,
-              _itemID: taskInfo.getDeviceIDByRaw(parseInt(mes[1])),
-              _chartID: null,
-              _type: 'device',
-            })
-            if (result) {
-              taskInfo.deviceStart(parseInt(parseInt(mes[1])), this.deviceList)
-            }
-          }
+          await this.taskContentChartDefaultChartGenerator({
+            _deviceList: this.deviceListNew,
+            _itemID: parseInt(mes[1]),
+            _chartID: null,
+            _type: 'device',
+          })
+          device = this.deviceListNew.find((ele) => ele.memory_board === parseInt(mes[1]))
+          device.status = 1
           break
         case 'stop':
           if (mes[1] === 'all') {
             return false
           }
-          taskInfo.deviceStop(parseInt(mes[1]), this.deviceList)
+          device = this.deviceListNew.find((ele) => ele.memory_board === parseInt(mes[1]))
+          device.status = 0
+          await dataStreamBuffer.removeByDevice(parseInt(mes[1]))
           break
         case 'device_timeout':
           this.pageToast('The device [' + taskInfo.getDeviceIDByRaw(parseInt(mes[1])) + '] is timeout, please check its status or parameters.')
@@ -292,7 +292,6 @@ export default {
         default:
           break
       }
-      //  console.log(String.fromCharCode.apply(null, data), topic)
     },
   },
   methods: {
@@ -330,14 +329,6 @@ export default {
       if (await this.$refs.devices_ref != null) {
         await this.$refs.devices_ref.loadingStart()
       }
-      // let _parameter, _content
-
-      // this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
-      //   header: 'device_parameter/0',
-      //   device: 7,
-      //   parameter: 'RECORDING_CH|AXIS_CH',
-      //   content: '7|1',
-      // }))
       console.log(taskInfo.getTaskInfo().controllerID)
       this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
         header: 'get_device_info_all/0',
@@ -360,6 +351,7 @@ export default {
       for (const chart in this.chartData) {
         this.taskContentChartRefreshData({
           chartID: parseInt(chart),
+          deviceList: this.deviceListNew,
         })
       }
     },
@@ -368,9 +360,6 @@ export default {
       if (this.$refs.devices_ref != null) {
         this.$refs.devices_ref.refresh()
       }
-      // api.task.update({
-      //   device_config: taskInfo.getTaskInfo().deviceList,
-      // })
     },
     addChart: async function (isDefault) {
       this.taskContentChartAdd({
@@ -472,13 +461,20 @@ export default {
       })
       return chart
     },
-    addDevice: async function (deviceID) {
-      this.mqttSub(taskInfo.getTaskInfo().controllerID + '/data_server/device_data_stream/' + taskInfo.getRawDeviceID(deviceID) + '/+')
-      this.addMappingChart(deviceID)
+    addDevice: async function (deviceID, memoryBoardID) {
+      this.mqttSub(`${taskInfo.getTaskInfo().controllerID}/data_server/device_data_stream/${deviceID}/+`)
+      await this.addMappingChart(deviceID)
+
+      await this.taskContentChartDefaultChartGenerator({
+        _deviceList: this.deviceListNew,
+        _itemID: deviceID,
+        _chartID: null,
+        _type: 'device',
+      })
       this.pageToast('The device [' + deviceID + '] has been registered.')
     },
     removeDevice: function (deviceID) {
-      this.mqttUnSub(taskInfo.getTaskInfo().controllerID + '/data_server/device_data_stream/' + taskInfo.getRawDeviceID(deviceID) + '/+')
+      this.mqttUnSub(taskInfo.getTaskInfo().controllerID + '/data_server/device_data_stream/' + deviceID + '/+')
       for (const chart in this.chartData) {
         if (this.chartData[chart].mappingID === deviceID) {
           dataStreamBuffer.removeByChart(chart)
@@ -509,7 +505,7 @@ export default {
       this.pageToast('The formula [' + formulaID + '] has been removed.')
     },
     startAllClick: async function () {
-      for (const device of this.deviceList) {
+      for (const device of this.deviceListNew) {
         if (this.$refs.devices_ref === undefined) {
           this.startDevice(device)
         } else {
@@ -526,30 +522,17 @@ export default {
         _chartID: null,
         _type: 'device',
       })
-      if (!taskInfo.getDeviceInfo(device.id).info.isSync) {
-        if (taskInfo.getDeviceInfo(device.id).info.library_name.startsWith('Neulive')) {
-          this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
-            header: 'device_instruction/0',
-            device: taskInfo.getRawDeviceID(device.id),
-            instruction: 'record',
-          }))
-        } else if (taskInfo.getDeviceInfo(device.id).info.library_name.startsWith('Elite')) {
-          //  console.log('elite')
-          this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
-            header: 'device_instruction/0',
-            device: taskInfo.getRawDeviceID(device.id),
-            instruction: 'start',
-          }))
-        }
-        device.stopping = false
-        device.isSync = true
-        // this.$emit('refreshSetting')
-        // ### show device info
-        //  console.log(taskInfo.getDeviceInfo(device.id))
+      if (device.status === 0) {
+        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+          header: 'device_instruction/0',
+          device: device.memory_board,
+          instruction: 'start',
+        }))
+        device.status = 1
       }
     },
     stopAllClick: function () {
-      for (const device of this.deviceList) {
+      for (const device of this.deviceListNew) {
         if (this.$refs.devices_ref === undefined) {
           this.stopDevice(device)
         } else {
@@ -559,22 +542,14 @@ export default {
       this.pageToast('The all devices have been stopped')
     },
     stopDevice: async function (device) {
-      dataStreamBuffer.removeByDevice(taskInfo.getRawDeviceID(device.id))
-      if (taskInfo.getDeviceInfo(device.id).info.isSync) {
-        if (taskInfo.getDeviceInfo(device.id).info.library_name.startsWith('Neulive')) {
-          this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
-            header: 'device_instruction/0',
-            device: taskInfo.getRawDeviceID(device.id),
-            instruction: 'stop_record',
-          }))
-        } else if (taskInfo.getDeviceInfo(device.id).info.library_name.startsWith('Elite')) {
-          this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
-            header: 'device_instruction/0',
-            device: taskInfo.getRawDeviceID(device.id),
-            instruction: 'interrupt',
-          }))
-        }
-        device.stopping = true
+      dataStreamBuffer.removeByDevice(device.id)
+      if (device.status === 1) {
+        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+          header: 'device_instruction/0',
+          device: device.memory_board,
+          instruction: 'interrupt',
+        }))
+        device.status = 0
       }
     },
     checkStiStatus: function () {
@@ -600,25 +575,17 @@ export default {
   watch: {
   },
   async mounted () {
+    console.log(this.$route.params)
     const devMode = this.$route.params.mode
     if (devMode === 'dev') {
       this.developer_mode = true
     }
 
     await taskInfo.updateTaskInfo(this.$route.params.taskID)
-    //  console.log(taskInfo.getTaskInfo())
-    // this.screenHeight = document.documentElement.clientHeight
     this.pageMqttSub(taskInfo.getTaskInfo().controllerID)
-    //  console.log(taskInfo.getTaskInfo().controllerID)
     await this.pageInit()
 
     this.dataRefreshTimer = setInterval(this.refreshData, 100)
-
-    // const _this = this
-    // window.onresize = function () { // define the event of window size changing
-    //   // _this.screenWidth = document.documentElement.clientWidth
-    //   _this.screenHeight = document.documentElement.clientHeight
-    // }
   },
   destroyed () {
     taskInfo.destroyed(this.deviceList)

src/components/task/content/TaskContent_v2.vue

@@ -0,0 +1,623 @@
+<template>
+  <div class="task-content">
+    <!-- <div>
+      {{chartData}}
+    </div> -->
+    <!-- <div>
+      {{chartData[0]}}
+    </div> -->
+    <va-modal
+      v-model="showShutdownModal"
+      size="small"
+      :title="'SHUTDOWN'"
+      :message="'The controller shutdown.'"
+      :okText=" $t('modal.confirm') "
+      @ok="exit()"
+      @cancel="exit()"
+    />
+
+    <va-modal
+      v-model="showRemoveChartModal"
+      size="small"
+      :title="'REMOVE CHART'"
+      :message="'The chart will be removed.'"
+      :okText=" $t('modal.confirm') "
+      @ok="removeChart(null)"
+    />
+
+    <div class="row row-equal">
+      <div v-if="showDeviceSetting" class="flex md12 xl4 xs12 sm12">
+        <div class="row">
+          <!-- <div class="flex sm12 xl12 md12 xs12">
+            <task-devices :ref="'devices_ref'" @add="addDevice($event)" @remove="removeDevice($event)" @refreshSetting="refreshChartSetting($event)" class="pa-0" />
+          </div> -->
+          <div class="flex sm12 xl12 md12 xs12">
+            <task-devices-new :ref="'devices_ref'" @add="addDevice($event)" @remove="removeDevice($event)" @refreshSetting="refreshChartSetting($event)" class="pa-0" />
+          </div>
+          <div class="flex sm12 xl12 md12 xs12" v-if="developer_mode">
+            <task-formula :ref="'formula_ref'" @add="addFormula($event)" @remove="removeFormula($event)" class="pa-0" />
+          </div>
+        </div>
+      </div>
+      <div :class="chartAreaClass">
+        <div class="row" >
+          <div class="flex sm12 xl12 md12 xs12">
+            <div class="flex sm12 xl12 md12 xs12" style="text-align: center;">
+              <va-card
+                class="ma-0 pa-0"
+                stripe="primary"
+              >
+                <!-- <template slot="header">
+                  <va-icon name="fa fa-gears mr-3" color="primary"/>
+                  <h5 class="mt-0 mb-0">CONTROL</h5>
+                </template> -->
+                <va-button class="no-dark-style-va-button" v-if="!showDeviceSetting" color="primary" target="_blank" @click="showDeviceSettingClick()" small>
+                  SHOW DEVICES
+                </va-button>
+                <va-button  class="no-dark-style-va-button" v-if="showDeviceSetting" color="primary" target="_blank" @click="hideDeviceSettingClick()" small>
+                  HIDE DEVICES
+                </va-button>
+                <va-button class="" color="success" target="_blank" @click="startAllClick()" small>
+                  START ALL
+                </va-button>
+                <va-button class="no-dark-style-va-button" color="danger" target="_blank" @click="stopAllClick()" small>
+                  STOP ALL
+                </va-button>
+                <va-button class="no-dark-style-va-button" color="primary" target="_blank" @click.stop="addChart(false)" small>
+                  ADD CHART
+                </va-button>
+              </va-card>
+            </div>
+            <div :key="taskContentChartPanelKey">
+              <div
+                v-for="chart in chartData"
+                :key="chart.chartID"
+              >
+                <canvas-chart
+                  :id="'chart' + chart.chartID"
+                  :ref="'chart_ref'"
+                  :cardheight="'400px'"
+                  :cardwidth="'auto'"
+                  :chartID="chart.chartID"
+                  @init="initChart(chart.chartID)"
+                  @remove="removeChartCheck(chart.chartID)"
+                />
+              </div>
+            </div>
+
+            <div style="height: 150px;">
+            </div>
+
+          </div>
+
+        </div>
+
+      </div>
+
+    </div>
+
+  </div>
+</template>
+
+<script>
+import { dataStreamBuffer } from '../../../data/task/DataStreamBuffer'
+import { taskInfo } from '../../../data/task/TaskInfo'
+import CanvasChart from './chart/CanvasChart'
+// import TaskDevices from './controller/TaskDevices'
+import TaskDevicesNew from './controller/TaskDevicesNew'
+// import api from '@/data/api'
+import { mapFields } from 'vuex-map-fields'
+import { mapActions } from 'vuex'
+import taskTypes from '@/store/modules/task/content/types'
+import TaskFormula from './formula/TaskFormula'
+
+// TODO change chart data tag format
+
+export default {
+  name: 'TaskContent',
+  components: {
+    CanvasChart,
+    // TaskDevices,
+    TaskDevicesNew,
+    TaskFormula,
+  },
+  computed: {
+    ...mapFields('taskContent', [
+      'deviceList',
+      'chartData',
+      'taskContentChartPanelKey',
+      'taskContentChartNumber',
+      'deviceListNew',
+    ]),
+    ...mapFields('', [
+      'developer_mode',
+    ]),
+  },
+  data () {
+    return {
+      // modal
+      showShutdownModal: false,
+      showRemoveChartModal: false,
+      // refresh timer
+      dataRefreshTimer: null,
+
+      selectChartID: null,
+      showDeviceSetting: true,
+      chartAreaClass: ['flex', 'xs12', 'sm12', 'md12', 'xl8', 'pa-0'],
+      getParmDone: false,
+    }
+  },
+  mqtt: {
+    async '+/get_device_info_all/+' (data, topic) {
+      // console.log('get_device_info_all', String.fromCharCode.apply(null, data))
+      this.deviceListNew = JSON.parse(String.fromCharCode.apply(null, data)).data
+
+      // console.log(this.deviceListNew)
+      // await taskInfo.deviceInfo(String.fromCharCode.apply(null, data), this.deviceList)
+      // console.log('this.deviceList 0', this.deviceList)
+      // this.refreshDevicesWindow()
+      // console.log('this.$refs.devices_ref', this.$refs.devices_ref)
+      if (this.$refs.devices_ref != null) {
+        await this.$refs.devices_ref.loadingDone()
+      }
+      await this.taskContentChartInitCustomizedFromCache()
+      this.getParmDone = true
+    },
+    async '+/get_device_info/+' (data, topic) {
+      // const dataObj = JSON.parse(String.fromCharCode.apply(null, data))
+      // await taskInfo.deviceInfo(dataObj, this.deviceList)
+      // this.refreshDevicesWindow()
+      // this.checkStiStatus()
+
+      // const result = await this.taskContentChartDefaultChartGenerator({
+      //   _deviceList: this.deviceList,
+      //   _itemID: taskInfo.getDeviceIDByRaw(dataObj.data.device_id),
+      //   _chartID: null,
+      //   _type: 'device',
+      // })
+      // if (result) {
+      //   taskInfo.deviceStart(dataObj.data.device_id, this.deviceList)
+      // }
+    },
+    async '+/device_parameter/+' (data, topic) {
+      const res = JSON.parse(String.fromCharCode.apply(null, data))
+      const device = this.deviceListNew.find((ele) => ele.mac_address === res.device)
+
+      for (const key of Object.keys(res.data)) {
+        device.configuration[key] = res.data[key]
+      }
+      // await taskInfo.deviceParameter(String.fromCharCode.apply(null, data))
+      // this.refreshDevicesWindow()
+    },
+    async '+/device_parameter_value/+' (data, topic) {
+      const res = JSON.parse(String.fromCharCode.apply(null, data))
+      const device = this.deviceListNew.find((ele) => ele.mac_address === res.device)
+
+      for (const key of Object.keys(res.data)) {
+        device.configuration[key] = res.data[key]
+      }
+    },
+    async '+/hardware_device/+' (data, topic) {
+      await taskInfo.deviceInfo(String.fromCharCode.apply(null, data), this.deviceList)
+      if (this.$refs.devices_ref != null) {
+        await this.$refs.devices_ref.loadingDone()
+        await this.taskContentChartInitCustomizedFromCache()
+      }
+    },
+    // listen datastream [ topic: controllerID/data_server/device_data_stream/deviceID/channel ]
+    async '+/data_server/device_data_stream/+/+' (data, topic) {
+      const topicSplit = topic.split('/')
+      const deviceID = parseInt(topicSplit[3])
+      const channel = parseInt(topicSplit[4])
+
+      dataStreamBuffer.into(String.fromCharCode.apply(null, data), deviceID, (channel + 1))
+    },
+    '+/device_save_path/+' (data, topic) {
+      taskInfo.deviceSavePath(String.fromCharCode.apply(null, data))
+      //  console.log(taskInfo.getTaskInfo())
+    },
+    '+/device_save_path_set/+' (data, topic) {
+      taskInfo.deviceSavePath(String.fromCharCode.apply(null, data))
+      //  console.log(taskInfo.getTaskInfo())
+    },
+    async '+/device_sd_card_status/+' (data, topic) {
+      const dataDecode = JSON.parse(String.fromCharCode.apply(null, data))
+      for (const device of this.$refs.devices_ref.deviceList) {
+        if (dataDecode.device === taskInfo.getRawDeviceID(device.id)) {
+          device.sdCardStatus = dataDecode.data
+        }
+      }
+      await taskInfo.updateSdCardStatus(String.fromCharCode.apply(null, data))
+      this.refreshDevicesWindow()
+    },
+    async '+/broadcast' (data, topic) {
+      const mes = String.fromCharCode.apply(null, data).split(':')
+      let device
+      // let content
+      switch (mes[0]) {
+        case 'state':
+          switch (mes[1]) {
+            case 'device_available':
+              this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+                header: 'hardware_device/0',
+              }))
+              break
+          }
+          break
+        case 'disconnected':
+          taskInfo.deviceDisconnected(mes[1])
+          this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+            header: 'get_device_info/0',
+            device: parseInt(mes[1]),
+          }))
+          break
+        case 'connected':
+          this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+            header: 'get_device_info/0',
+            device: parseInt(mes[1]),
+          }))
+          taskInfo.deviceConnected(mes[1])
+          break
+        case 'shutdown':
+          taskInfo.controllerShutdown(this.deviceList)
+          this.showShutdownModal = true
+          break
+        case 'start':
+          await this.taskContentChartDefaultChartGenerator({
+            _deviceList: this.deviceListNew,
+            _itemID: parseInt(mes[1]),
+            _chartID: null,
+            _type: 'device',
+          })
+          device = this.deviceListNew.find((ele) => ele.memory_board === parseInt(mes[1]))
+          device.status = 1
+          break
+        case 'stop':
+          if (mes[1] === 'all') {
+            return false
+          }
+          device = this.deviceListNew.find((ele) => ele.memory_board === parseInt(mes[1]))
+          device.status = 0
+          await dataStreamBuffer.removeByDevice(parseInt(mes[1]))
+          break
+        case 'device_timeout':
+          this.pageToast('The device [' + taskInfo.getDeviceIDByRaw(parseInt(mes[1])) + '] is timeout, please check its status or parameters.')
+          break
+        case 'device_mission_done':
+          this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+            header: 'device_instruction/0',
+            device: parseInt(mes[1]),
+            instruction: 'interrupt',
+          }))
+          this.pageToast('The device [' + taskInfo.getDeviceIDByRaw(parseInt(mes[1])) + '] mission is done.')
+          break
+        default:
+          break
+      }
+    },
+  },
+  methods: {
+    mqttSub: function (val) {
+      this.$mqtt.subscribe(val)
+    },
+    mqttUnSub: function (val) {
+      this.$mqtt.unsubscribe(val)
+    },
+    mqttPub: function (topic, mes) {
+      this.$mqtt.publish(topic, mes)
+    },
+    pageMqttSub: function (id) {
+      this.mqttSub(id + '/hardware_device/+')
+      this.mqttSub(id + '/broadcast')
+      this.mqttSub(id + '/get_device_info_all/+')
+      this.mqttSub(id + '/get_device_info/+')
+      this.mqttSub(id + '/device_parameter/+')
+      this.mqttSub(id + '/device_parameter_value/+')
+      this.mqttSub(id + '/device_sd_card_status/+')
+    },
+    pageMqttUnSub: function (id) {
+      for (const device in taskInfo.getTaskInfo().deviceList) {
+        this.mqttUnSub(id + '/data_server/device_data_stream/' + device + '/+')
+      }
+      this.mqttUnSub(id + '/hardware_device/+')
+      this.mqttUnSub(id + '/broadcast')
+      this.mqttUnSub(id + '/get_device_info_all/+')
+      this.mqttUnSub(id + '/get_device_info/+')
+      this.mqttUnSub(id + '/device_parameter/+')
+      this.mqttUnSub(id + '/device_parameter_value/+')
+      this.mqttUnSub(id + '/device_sd_card_status/+')
+    },
+    pageInit: async function () {
+      if (await this.$refs.devices_ref != null) {
+        await this.$refs.devices_ref.loadingStart()
+      }
+      console.log(taskInfo.getTaskInfo().controllerID)
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'get_device_info_all/0',
+      }))
+
+      this.taskContentChartNumber = Object.keys(this.chartData).length
+    },
+    pageToast: function (mes) {
+      this.showToast(
+        mes,
+        {
+          icon: 'fa-bell',
+          position: 'bottom-right',
+          duration: 4000,
+        },
+      )
+    },
+    refreshData: function () {
+      // TODO don't need to refresh chart with stop status
+      for (const chart in this.chartData) {
+        // console.log(this.chartData[0]["data"])
+        this.taskContentChartRefreshData({
+          chartID: parseInt(chart),
+          deviceList: this.deviceListNew,
+        })
+      }
+    },
+    refreshDevicesWindow: function () {
+      // console.log(taskInfo.getTaskInfo())
+      if (this.$refs.devices_ref != null) {
+        this.$refs.devices_ref.refresh()
+      }
+    },
+    addChart: async function (isDefault) {
+      this.taskContentChartAdd({
+        chartID: this.taskContentChartNumber,
+        maxDots: 4000,
+        gridLength: 1,
+      })
+      if (this.$refs.chart_ref != null) {
+        this.$refs.chart_ref.forEach(ref => {
+          ref.refreshMappingSelect()
+        })
+      }
+      this.taskContentChartRefreshPanel()
+      this.taskContentChartNumber++
+
+      if (!isDefault) {
+        await this.taskContentChartSaveToCache()
+      }
+      this.pageToast('The chart has been added.')
+
+      return this.taskContentChartNumber - 1
+    },
+    refreshChartSetting: async function () {
+      if (this.$refs.chart_ref != null) {
+        this.$refs.chart_ref.forEach(ref => {
+          ref.refreshMappingSelect()
+        })
+      }
+      this.taskContentChartRefreshPanel()
+    },
+    initChart: function (chartID) {
+      this.taskContentChartReset({
+        chartID: chartID,
+        mappingID: null,
+        cardName: null,
+      })
+      this.pageToast('The chart has been Initialized.')
+    },
+    removeChartCheck: function (chartID) {
+      this.selectChartID = chartID
+      this.showRemoveChartModal = true
+    },
+    removeChart: async function (chartID) {
+      if (chartID == null) {
+        chartID = this.selectChartID
+      }
+      dataStreamBuffer.removeByChart(chartID)
+      if (this.chartData[chartID] != null) {
+        const defaultID = {}
+        const update = async () => {
+          for (const chart in this.chartData) {
+            if (chart !== chartID) {
+              defaultID[chart] = this.chartData[chart].mappingID
+            }
+          }
+          delete this.chartData[chartID]
+        }
+        await update()
+
+        for (const chart in this.chartData) {
+          this.chartData[chart].mappingID = defaultID[chart]
+        }
+
+        if (this.$refs.chart_ref != null) {
+          this.$refs.chart_ref.forEach(ref => {
+            ref.refreshMappingSelect()
+          })
+        }
+      }
+
+      await this.taskContentChartSaveToCache()
+      this.pageToast('The chart has been removed.')
+    },
+    showDeviceSettingClick: function () {
+      this.showDeviceSetting = true
+      this.chartAreaClass[3] = 'md12'
+      this.chartAreaClass[4] = 'xl8'
+    },
+    hideDeviceSettingClick: function () {
+      this.showDeviceSetting = false
+      this.chartAreaClass[3] = 'md12'
+      this.chartAreaClass[4] = 'xl12'
+    },
+    addMappingChart: async function (deviceID) {
+      // if have chart with device ID
+      for (const chart in this.chartData) {
+        if (this.chartData[chart].mappingID === deviceID) {
+          return false
+        }
+      }
+      const chart = await this.addChart(true)
+      await this.$nextTick(async () => {
+        this.chartData[chart].mappingID = deviceID
+        if (this.$refs.chart_ref != null) {
+          this.$refs.chart_ref.forEach(ref => {
+            ref.refreshMappingSelect()
+          })
+        }
+      })
+      return chart
+    },
+    addDevice: async function (deviceID, memoryBoardID) {
+      this.mqttSub(`${taskInfo.getTaskInfo().controllerID}/data_server/device_data_stream/${deviceID}/+`)
+      await this.addMappingChart(deviceID)
+
+      await this.taskContentChartDefaultChartGenerator({
+        _deviceList: this.deviceListNew,
+        _itemID: deviceID,
+        _chartID: null,
+        _type: 'device',
+      })
+      this.pageToast('The device [' + deviceID + '] has been registered.')
+    },
+    removeDevice: function (deviceID) {
+      this.mqttUnSub(taskInfo.getTaskInfo().controllerID + '/data_server/device_data_stream/' + deviceID + '/+')
+      for (const chart in this.chartData) {
+        if (this.chartData[chart].mappingID === deviceID) {
+          dataStreamBuffer.removeByChart(chart)
+          this.removeChart(chart)
+        }
+      }
+      this.pageToast('The device [' + deviceID + '] has been removed.')
+    },
+    addFormula: async function (formulaID) {
+      const chart = await this.addChart(true)
+      await this.$nextTick(async () => {
+        this.chartData[chart].mappingID = formulaID
+        if (this.$refs.chart_ref != null) {
+          this.$refs.chart_ref.forEach(ref => {
+            ref.refreshMappingSelect()
+          })
+        }
+      })
+      this.pageToast('The formula [' + formulaID + '] has been registered.')
+    },
+    removeFormula: function (formulaID) {
+      for (const chart in this.chartData) {
+        if (this.chartData[chart].mappingID === formulaID) {
+          dataStreamBuffer.removeByChart(chart)
+          this.removeChart(chart)
+        }
+      }
+      this.pageToast('The formula [' + formulaID + '] has been removed.')
+    },
+    startAllClick: async function () {
+      for (const device of this.deviceListNew) {
+        if (this.$refs.devices_ref === undefined) {
+          this.startDevice(device)
+        } else {
+          await this.$refs.devices_ref.$refs.pdlist_ref.start(device)
+        }
+      }
+      this.refreshDevicesWindow()
+      this.pageToast('The all devices have been started')
+    },
+    startDevice: async function (device) {
+      await this.taskContentChartDefaultChartGenerator({
+        _deviceList: this.deviceList,
+        _itemID: device.id,
+        _chartID: null,
+        _type: 'device',
+      })
+      if (device.status === 0) {
+        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+          header: 'device_instruction/0',
+          device: device.memory_board,
+          instruction: 'start',
+        }))
+        device.status = 1
+      }
+    },
+    stopAllClick: function () {
+      for (const device of this.deviceListNew) {
+        if (this.$refs.devices_ref === undefined) {
+          this.stopDevice(device)
+        } else {
+          this.$refs.devices_ref.stopDevice(device)
+        }
+      }
+      this.pageToast('The all devices have been stopped')
+    },
+    stopDevice: async function (device) {
+      dataStreamBuffer.removeByDevice(device.id)
+      if (device.status === 1) {
+        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+          header: 'device_instruction/0',
+          device: device.memory_board,
+          instruction: 'interrupt',
+        }))
+        device.status = 0
+      }
+    },
+    checkStiStatus: function () {
+      this.$refs.devices_ref.checkStiStatus()
+    },
+    exit: function () {
+      this.$router.push({
+        path: '/',
+      })
+    },
+
+    ...mapActions('taskContent', [
+      taskTypes.chart.initCustomizedFromCache,
+      taskTypes.chart.saveToCache,
+      taskTypes.chart.add,
+      taskTypes.chart.defaultChartGenerator,
+      taskTypes.chart.reset,
+      taskTypes.chart.refreshData,
+      taskTypes.chart.refreshChart,
+      taskTypes.chart.refreshPanel,
+    ]),
+  },
+  watch: {
+  },
+  async mounted () {
+    console.log(this.$route.params)
+    const devMode = this.$route.params.mode
+    if (devMode === 'dev') {
+      this.developer_mode = true
+    }
+
+    await taskInfo.updateTaskInfo(this.$route.params.taskID)
+    this.pageMqttSub(taskInfo.getTaskInfo().controllerID)
+    await this.pageInit()
+
+    this.dataRefreshTimer = setInterval(this.refreshData, 100)
+  },
+  destroyed () {
+    taskInfo.destroyed(this.deviceList)
+    for (const chart in this.chartData) {
+      this.removeChart(chart)
+    }
+    clearInterval(this.dataRefreshTimer)
+    this.pageMqttUnSub(taskInfo.getTaskInfo().controllerID)
+  },
+
+}
+</script>
+
+<style lang="scss">
+  // .area-style {
+  //   height: 100%;
+  //   overflow-y: hidden;
+  //   overflow-x: hidden;
+
+  //   @include media-breakpoint-only(xl) {
+  //     height: 94vh;
+  //     overflow-y: scroll;
+  //     overflow-x: hidden;
+  //   }
+  // }
+
+  .no-dark-style-va-button {
+    &:focus {
+      filter: brightness(100%);
+    }
+  }
+</style>

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

@@ -26,6 +26,7 @@
       </va-tabs>
       <div v-if="tabValue == 0" >
         <div v-if="chartData[chartID].legend.data.length != 0">
+          <div>{{data.series[0].data}}<br><br><br></div>
           <chart :key="taskContentChartKey" :ref="'chart_ref'" :style="'width: '+ cardwidth + '; height: ' + cardheight + ';'" :options="data" :auto-resize="true"></chart>
         </div>
       </div>

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

@@ -112,14 +112,25 @@ export default {
       channelSelectDisableY: true,
       deviceSelectX: '',
       deviceSelectY: '',
-      deviceOptions: taskInfo.getDeviceList(),
+      // deviceOptions:,
       sourceAddStatus: true,
       sourceList: [],
     }
   },
   computed: {
+    deviceOptions () {
+      const defaultArray = [{ id: -1, name: 'Time' }]
+      defaultArray.push(...this.deviceListNew.map(ele => {
+        return {
+          name: `[${ele.memory_board}] ${ele.name}`,
+          id: ele.memory_board,
+        }
+      }))
+      return defaultArray
+    },
     ...mapFields('taskContent', [
       'chartData',
+      'deviceListNew',
     ]),
   },
   watch: {
@@ -128,10 +139,11 @@ export default {
     },
     deviceSelectX: function () {
       const channelOptions = []
+      const deviceInfo = this.deviceListNew.find(ele => ele.id === this.deviceSelectX.id)
       // console.log(val)
-      if (taskInfo.getDeviceInfo(this.deviceSelectX.id) == null) {
+      if (deviceInfo == null) {
         this.channelSelectDisableX = true
-      } else if (taskInfo.getDeviceInfo(this.deviceSelectX.id).info.library_name.indexOf('Neulive') >= 0) {
+      } else if (deviceInfo.library_name.includes('Neulive')) {
         const channelSet = taskInfo.getDeviceInfo(this.deviceSelectX.id).parameterSet.RECORDING_CH.toString(2).split('').reverse()
         channelSet.forEach((element, index) => {
           if (parseInt(element) > 0) {
@@ -169,12 +181,12 @@ export default {
           }
         })
         this.channelSelectDisableX = false
-      } else if (taskInfo.getDeviceInfo(this.deviceSelectX.id).info.library_name.indexOf('Elite') >= 0) {
+      } else if (deviceInfo.library_name.includes('Elite')) {
         let channelSet
-        if (taskInfo.getDeviceInfo(this.deviceSelectX.id).info.library_name === 'EliteEIS' && taskInfo.getDeviceInfo(this.deviceSelectX.id).parameterSet.MODE === 0) {
+        if (deviceInfo.library_name === 'EliteEIS' && deviceInfo.configuration.MODE === 0) {
           channelSet = ['Zimag_Raw', 'Zreal_Raw', 'Frequency', 'Cycle', 'Zimag', 'Zreal', 'Impedance', 'Phase', 'Current', 'Level gain']
         } else {
-          channelSet = taskInfo.getDeviceInfo(this.deviceSelectX.id).parameterSet.CHANNEL_LABEL
+          channelSet = deviceInfo.configuration.CHANNEL_LABEL
         }
         // console.log(channelSet)
         channelSet.forEach((element, index) => {
@@ -194,10 +206,11 @@ export default {
     },
     deviceSelectY: function () {
       const channelOptions = []
+      const deviceInfo = this.deviceListNew.find(ele => ele.id === this.deviceSelectY.id)
       // console.log(val)
-      if (taskInfo.getDeviceInfo(this.deviceSelectY.id) == null) {
+      if (deviceInfo == null) {
         this.channelSelectDisableY = true
-      } else if (taskInfo.getDeviceInfo(this.deviceSelectY.id).info.library_name.indexOf('Neulive') >= 0) {
+      } else if (deviceInfo.library_name.indexOf('Neulive') >= 0) {
         const channelSet = taskInfo.getDeviceInfo(this.deviceSelectY.id).parameterSet.RECORDING_CH.toString(2).split('').reverse()
         //  console.log(channelSet)
         channelSet.forEach((element, index) => {
@@ -236,12 +249,12 @@ export default {
           }
         })
         this.channelSelectDisableY = false
-      } else if (taskInfo.getDeviceInfo(this.deviceSelectY.id).info.library_name.indexOf('Elite') >= 0) {
+      } else if (deviceInfo.library_name.indexOf('Elite') >= 0) {
         let channelSet
-        if (taskInfo.getDeviceInfo(this.deviceSelectY.id).info.library_name === 'EliteEIS' && taskInfo.getDeviceInfo(this.deviceSelectY.id).parameterSet.MODE === 0) {
+        if (deviceInfo.library_name === 'EliteEIS' && deviceInfo.configuration.MODE === 0) {
           channelSet = ['Zimag_Raw', 'Zreal_Raw', 'Frequency', 'Cycle', 'Zimag', 'Zreal', 'Impedance', 'Phase', 'Current', 'Level gain']
         } else {
-          channelSet = taskInfo.getDeviceInfo(this.deviceSelectY.id).parameterSet.CHANNEL_LABEL
+          channelSet = deviceInfo.configuration.CHANNEL_LABEL
         }
         //  console.log(channelSet)
         channelSet.forEach((element, index) => {
@@ -286,6 +299,8 @@ export default {
       this.gridSelection = ''
     },
     async addRegisterDeviceChannel (gridIndex) {
+      const deviceXInfo = this.deviceListNew.find(ele => ele.id === this.deviceSelectX.id)
+      const deviceYInfo = this.deviceListNew.find(ele => ele.id === this.deviceSelectY.id)
       let deviceNameX
       let deviceNameY
       const deviceIDX = this.deviceSelectX.id
@@ -295,7 +310,7 @@ export default {
       if (this.deviceSelectX.name.indexOf('Neulive') >= 0) {
         deviceNameX = 'Neulive'
       } else if (this.deviceSelectX.name.indexOf('Elite') >= 0) {
-        if (taskInfo.getDeviceInfo(this.deviceSelectX.id).info.library_name === 'EliteEIS') {
+        if (deviceXInfo.library_name === 'EliteEIS') {
           deviceNameX = 'EliteEIS'
         } else {
           deviceNameX = 'Elite'
@@ -306,7 +321,7 @@ export default {
       if (this.deviceSelectY.name.indexOf('Neulive') >= 0) {
         deviceNameY = 'Neulive'
       } else if (this.deviceSelectY.name.indexOf('Elite') >= 0) {
-        if (taskInfo.getDeviceInfo(this.deviceSelectY.id).info.library_name === 'EliteEIS') {
+        if (deviceYInfo.library_name === 'EliteEIS') {
           deviceNameY = 'EliteEIS'
         } else {
           deviceNameY = 'Elite'
@@ -326,6 +341,7 @@ export default {
         channelY: channelY,
         formula: null,
       })
+      console.log('deviceSelectX', this.deviceSelectX)
       if (deviceNameX !== 'Time') {
         this.sourceList.push([this.deviceSelectX.name, deviceIDX, channelX].toString())
       }

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

@@ -0,0 +1,164 @@
+<template>
+  <div class="flex sm12 xl12 md12 xs12">
+    <va-modal
+      v-model="showDeleteModal"
+      size="small"
+      :title="'DELETE'"
+      :message="'The device will be deleted.'"
+      :okText=" $t('modal.confirm') "
+      :cancelText=" $t('modal.cancel') "
+      @ok="remove()"
+    />
+    <va-accordion v-for="device in deviceList" :key="device.id">
+      <va-collapse class="mb-2" :isOpenDefault='true'>
+        <span slot="header" >
+          <va-item :key="device.id" class="pa-0 ma-0"
+          >
+            <va-item-section avatar class="ml-0">
+              <va-avatar style="border-radius: 0;">
+                <img :src="device.picture" :alt="device.name">
+              </va-avatar>
+            </va-item-section>
+
+            <va-item-section class="ml-3" caption>
+              <va-item-label>
+                {{ `[${device.memory_board}]` }} {{ device.name }}
+              </va-item-label>
+              <va-item-label caption>
+                {{ device.mac_address }}
+              </va-item-label>
+            </va-item-section>
+          </va-item>
+
+          <va-item class="pa-0 ma-0 mt-2">
+            <va-item-section class="ml-3">
+              <va-item-label>
+                <va-button @click.stop="start(device)" v-if="device.library_name.includes('Elite') && device.status !== 1" class="px-2 py-0 mr-0" color="success" small>START</va-button>
+                <va-button @click.stop="stop(device)" v-if="device.library_name.includes('Elite') && device.status === 1" class="px-2 py-0 mr-0" color="danger" small>STOP</va-button>
+                <va-button id="detectButton" @click.stop="detect(device)" v-if="device.library_name.includes('Elite')" color="primary" class="px-2 py-0 mr-0" small>DETECT</va-button>
+              </va-item-label>
+            </va-item-section>
+          </va-item>
+        </span>
+        <div slot="body">
+          <div>
+            <file-control-window :ref="'fcwindow_ref'" :device="device" class="pl-0 pr-0" />
+          </div>
+          <div v-if="device.library_name.includes('Elite')">
+            <elite-parameter-window :ref="'epwindow_ref'" :device="device" class="pl-0 pr-0" />
+          </div>
+        </div>
+      </va-collapse>
+    </va-accordion>
+  </div>
+</template>
+
+<script>
+import EliteParameterWindow from '../parameter/EliteParameterWindow'
+// import NeuliveParameterWindow from '../parameter/NeuliveParameterWindow'
+import FileControlWindow from '../meta/FileControlWindow'
+import { mapActions } from 'vuex'
+import types from '@/store/modules/task/content/types'
+import { taskInfo } from '../../../../data/task/TaskInfo'
+import api from '@/data/api'
+
+export default {
+  name: 'TaskDeviceList',
+  components: {
+    EliteParameterWindow,
+    // NeuliveParameterWindow,
+    FileControlWindow,
+  },
+  props: {
+    deviceList: {
+      type: Array,
+      required: true,
+    },
+  },
+  data () {
+    return {
+      showDeleteModal: false,
+      selectDevice: null,
+      deviceStopping: false,
+    }
+  },
+  computed: {
+  },
+  methods: {
+    mqttPub: function (topic, mes) {
+      this.$mqtt.publish(topic, mes)
+    },
+    start: async function (device) {
+      if (device.status === 0) {
+        await this.setArchiveSettings()
+
+        const isDPVMode = device.configuration.MODE === 15
+        if (isDPVMode) {
+          const e1 = parseInt((device.configuration.DPV_e_1 - 25000) / 5)
+          const e2 = parseInt((device.configuration.DPV_e_2 - 25000) / 5)
+          const eFinal = parseInt((device.configuration.DPV_e_final - 25000) / 5)
+
+          if (e1 >= e2 && !(e1 >= eFinal && eFinal >= e2)) {
+            this.pageToast('[Error] Please set E Final correctly.')
+            return false
+          } else if (e2 > e1 && !(e2 >= eFinal && eFinal >= e1)) {
+            this.pageToast('[Error] Please set E Final correctly.')
+            return false
+          }
+        }
+
+        device.status = 1
+        this.$emit('start', device)
+        this.pageToast('The device ' + device.name + ' has been started.')
+
+        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+          header: 'device_instruction/0',
+          device: device.mac_address,
+          instruction: 'start',
+        }))
+
+        api.task.update({
+          device_config: taskInfo.getTaskInfo().deviceListNew,
+        })
+      }
+    },
+    stop: function (device) {
+      this.$emit('stop', device)
+      this.pageToast('The device ' + device.name + ' has been stopped.')
+    },
+    setArchiveSettings: async function () {
+      await this.$refs.fcwindow_ref[0].setArchiveSettings()
+    },
+    refresh: function () {
+    },
+    pageToast: function (mes) {
+      this.showToast(
+        mes,
+        {
+          icon: 'fa-bell',
+          position: 'bottom-right',
+          duration: 4000,
+        },
+      )
+    },
+    detect: function (device) {
+      this.$emit('detect', device)
+      this.pageToast('The device ' + device.name + ' has been detect.')
+    },
+    recoverDetectButton () {
+      document.getElementById('detectButton').className += ' no-dark-style-va-button'
+    },
+    ...mapActions('taskContent', [types.param.checkIfRecordingSetDone, types.param.checkIfStimulationSetDone, types.param.checkIfDeviceSetDone]),
+  },
+  destroyed () {
+  },
+}
+</script>
+
+<style lang="scss">
+  .no-dark-style-va-button {
+    &:focus {
+      filter: brightness(100%);
+    }
+  }
+</style>

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

@@ -0,0 +1,157 @@
+<template>
+  <div class="flex" :class="cardclass">
+    <va-card>
+      <template slot="header">
+        <va-icon name="fa fa-bluetooth-b mr-3" color="primary"/>
+        <h5 class="mt-0 mb-0">DEVICES</h5>
+      </template>
+      <div v-if="state.LOADING" class="flex-center spinner-box mt-4 mb-5">
+        <fulfilling-bouncing-circle-spinner
+          :animation-duration="3000"
+          :color="this.$themes.primary"
+          :size="60"
+        >
+        </fulfilling-bouncing-circle-spinner>
+      </div>
+      <div v-else class="flex row align--center">
+        <task-device-list-new
+          :ref="'pdlist_ref'"
+          :deviceList="deviceListNew"
+          @start="startDevice($event)"
+          @stop="stopDevice($event)"
+          @detect="detectDevice($event)"
+        />
+      </div>
+    </va-card>
+  </div>
+</template>
+
+<script>
+import { FulfillingBouncingCircleSpinner } from 'epic-spinners'
+import TaskDeviceListNew from './TaskDeviceListNew'
+import { taskInfo } from '../../../../data/task/TaskInfo'
+import { dataStreamBuffer } from '../../../../data/task/DataStreamBuffer'
+import { mapFields } from 'vuex-map-fields'
+import { mapActions } from 'vuex'
+import taskTypes from '@/store/modules/task/content/types'
+import eliteImgUrl from '@/assets/img/elite_img.png'
+
+export default {
+  name: 'TaskDevices',
+  components: {
+    FulfillingBouncingCircleSpinner,
+    TaskDeviceListNew,
+  },
+  props: {
+    cardclass: {
+      type: Array,
+      default: function () {
+        return ['xs12', 'md12', 'xl12', 'sm12']
+      },
+    },
+  },
+  computed: {
+    ...mapFields('taskContent', [
+      'deviceList',
+      'deviceListNew',
+    ]),
+  },
+  created () {
+  },
+  data () {
+    return {
+      deviceSelect: '',
+      deviceOptions: taskInfo.getDeviceListNotRegister(),
+      state: {
+        LOADING: false,
+      },
+      stiTimeOut: null,
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    sleep: async function (time) {
+      return new Promise((resolve) => setTimeout(resolve, time))
+    },
+    mqttPub: function (topic, mes) {
+      this.$mqtt.publish(topic, mes)
+    },
+    loadingStart: async function () {
+      this.state.LOADING = true
+    },
+    loadingDone: async function () {
+      this.state.LOADING = false
+      this.createDeviceList()
+    },
+    createDeviceList: async function () {
+      this.deviceListNew = this.deviceListNew.map(ele => {
+        // ele.id = ele.mac_address
+        return ele
+      })
+      this.deviceListNew.map((ele) => {
+        ele.picture = eliteImgUrl
+      })
+
+      for (const device of this.deviceListNew) {
+        this.$emit('add', device.memory_board)
+      }
+    },
+    startDevice: async function (device) {
+      this.$emit('refreshSetting', device)
+    },
+    stopDevice: async function (device) {
+      await dataStreamBuffer.removeByDevice(device.memory_board)
+      if (device.library_name.includes('Elite')) {
+        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+          header: 'device_instruction/0',
+          device: device.mac_address,
+          instruction: 'interrupt',
+        }))
+      }
+      device.status = 0
+    },
+    detectDevice: function (device) {
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_instruction/0',
+        device: device.mac_address,
+        instruction: 'VIS_DEVICE_DETECT',
+      }))
+      setTimeout(() => {
+        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+          header: 'device_instruction/0',
+          device: device.mac_address,
+          instruction: 'VIS_DEVICE_DONE',
+        }))
+        this.$refs.pdlist_ref.recoverDetectButton()
+      }, 5000)
+    },
+    generateChart: function (device) {
+      this.$emit('add', device.id)
+    },
+    setArchiveSettings: function () {
+      if (this.$refs.pdlist_ref != null) {
+        this.$refs.pdlist_ref.setArchiveSettings()
+      }
+    },
+    refresh: function () {
+    },
+    pageToast: function (mes) {
+      this.showToast(
+        mes,
+        {
+          icon: 'fa-bell',
+          position: 'bottom-right',
+          duration: 4000,
+        },
+      )
+    },
+
+    ...mapActions('taskContent', [
+      taskTypes.chart.defaultChartGenerator,
+    ]),
+  },
+  watch: {
+  },
+}
+</script>

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

@@ -34,8 +34,8 @@ export default {
   components: {
   },
   props: {
-    deviceID: {
-      type: Number,
+    device: {
+      type: Object,
       required: true,
     },
     deviceName: {
@@ -61,24 +61,27 @@ export default {
   },
   methods: {
     fileNameChange: async function (name) {
-      if (this.deviceInfo.info.isSync === false) {
+      if (this.device.status === 0) {
+        if (name === '') {
+          name = this.getCurrentTime()
+        }
+
         let fileNameCount = await api.meta.getByName(name)
-        if (fileNameCount.data != null) {
+        if (fileNameCount.status === 200) {
           let duplicateCount = 1
           let fileName = name
-          while (fileNameCount.data.length !== 0) {
+          while (fileNameCount.data.length > 0) {
             const res = name.split('(')[0]
             fileName = `${res}(${duplicateCount})`
             fileNameCount = await api.meta.getByName(fileName)
             duplicateCount += 1
           }
           this.fileNameInput = fileName
-
-          if (fileName !== this.deviceInfo.info.recording_file_name) {
-            this.deviceInfo.info.recording_file_name = fileName
+          if (fileName !== this.device.recording_file_name) {
+            this.device.recording_file_name = fileName
             this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
               header: 'device_recording_file_name/0',
-              device: taskInfo.getRawDeviceID(this.deviceID),
+              device: this.device.mac_address,
               content: fileName,
             }))
           }
@@ -87,13 +90,13 @@ export default {
     },
     directorySelect: function (directoryInfo) {
       if (typeof directoryInfo === 'object') {
-        if (this.deviceInfo.info.parent.folder === undefined || this.deviceInfo.info.parent.folder.indexOf(directoryInfo.id) === -1) {
-          if (this.deviceInfo.info.isSync === false) {
-            this.deviceInfo.info.parent.folder = []
-            this.deviceInfo.info.parent.folder.push(directoryInfo.id)
+        if (this.device.parent.folder === undefined || this.device.parent.folder.indexOf(directoryInfo.id) === -1) {
+          if (this.device.status === 0) {
+            this.device.parent.folder = []
+            this.device.parent.folder.push(directoryInfo.id)
             this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
               header: 'device_parent/0',
-              device: taskInfo.getRawDeviceID(this.deviceID),
+              device: this.device.mac_address,
               content: {
                 folder: [directoryInfo.id],
               },
@@ -103,32 +106,28 @@ export default {
       }
     },
     setArchiveSettings: async function () {
-      if (this.deviceInfo === null) {
-        this.deviceInfo = taskInfo.getDeviceInfo(this.deviceID)
-      }
       const now = this.getCurrentTime()
       // filename init
-      if (this.deviceInfo.info.isSync) {
-        this.fileNameInput = this.deviceInfo.info.recording_file_name
+      if (this.device.status === 1) {
+        this.fileNameInput = this.device.recording_file_name
       } else {
-        if (this.deviceInfo.info.recording_file_name === 'recording_data' || this.deviceInfo.info.recording_file_name.split('-').length === 7) {
+        if (this.device.recording_file_name === 'recording_data' || this.device.recording_file_name.split('-').length === 7) {
           this.fileNameInput = now
         } else {
-          this.fileNameInput = this.deviceInfo.info.recording_file_name
+          this.fileNameInput = this.device.recording_file_name
         }
       }
-
-      this.fileNameChange(this.fileNameInput)
+      await this.fileNameChange(this.fileNameInput)
 
       // directory init
       const collection = await api.collection.getAll()
       this.directoryOptions = collection.data.filter(el => el.name !== 'root')
 
-      if (Object.keys(this.deviceInfo.info.parent).length === 0) {
+      if (Object.keys(this.device.parent).length === 0) {
         this.directory = this.directoryOptions[0]
       } else {
         for (const directory of this.directoryOptions) {
-          if (this.deviceInfo.info.parent.folder.includes(directory.id)) {
+          if (this.device.parent.folder.includes(directory.id)) {
             this.directory = directory
           }
         }
@@ -136,32 +135,18 @@ export default {
     },
     getCurrentTime: function () {
       const now = new Date()
-      return [now.getFullYear(), now.getMonth() + 1, now.getDate(), now.getHours(), now.getMinutes(), now.getSeconds(), this.deviceID].join('-')
+      return [now.getFullYear(), now.getMonth() + 1, now.getDate(), now.getHours(), now.getMinutes(), now.getSeconds(), this.device.memory_board].join('-')
     },
     mqttPub: function (topic, mes) {
       this.$mqtt.publish(topic, mes)
     },
     pageInit: async function () {
     },
-    refresh: function () {
-      this.$nextTick(() => {
-        this.setArchiveSettings()
-      })
-    },
   },
   mounted () {
-    this.pageInit()
     this.setArchiveSettings()
   },
   destroyed () {
   },
-  watch: {
-    deviceID: function (val) {
-      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
-        header: 'get_device_info/0',
-        device: taskInfo.getRawDeviceID(val),
-      }))
-    },
-  },
 }
 </script>

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

@@ -0,0 +1,293 @@
+<template>
+  <div class="flex px-0 mx-0 my-0 py-0">
+    <va-tree-root class="flex sm12 xl12 md12 xs12 px-0 mx-0 my-0 py-0">
+      <div class="flex sm12 xl12 md12 xs12 px-0 mx-0 my-0 py-0">
+        <div class="flex row">
+          <!-- Select Working Mode -->
+          <div class="flex sm10 xl10 md10 xs10 px-0 mx-0 my-0 py-0">
+            <va-select
+              @input="workingModeSelectChange(workingModeSelect)"
+              :label="'WORKING MODE'"
+              v-model="workingModeSelect"
+              textBy="description"
+              :options="workingModeOptions"
+              noClear
+              style="min-width: 50px;"
+            />
+          </div>
+          <div class="flex sm2 xl2 md2 xs2 px-0 mx-0 my-0 py-0 pl-2">
+            <va-button class="pa-0 ma-0 mt-2 circle-button" small color="dark" @click="showModal=true">
+              <va-icon
+                name="fa fa-info"
+                color="white"
+              />
+            </va-button>
+          </div>
+        </div>
+      </div>
+      <!-- split because of styling problem(treenode), combine together furture -->
+      <!-- EIS -->
+      <div v-if="library.includes('EIS')">
+        <component
+          v-for="name in parameterArrayInMode"
+          :key="name"
+          :is="parameterTable[name].componentType"
+          :templateType=1
+          :withHeader="true"
+          :parameterName="name"
+          :inputValue="parameter[name]"
+          :disable="name === 'CTRL_HIGH_Z_15' && device.status === 0"
+          v-bind="parameterTable[name]"
+          @parameterChange="parameterChange"
+          @getParameter="getParameter"
+          @sendInstruction="sendInstruction"
+        />
+      </div>
+      <!-- ZM15-PulseSensingMode -->
+      <div v-else-if="parameter.MODE === 14">
+        <EliteParameterRecordingElitePulseSensing
+          :parameter="parameter"
+          :device="device"
+          :parameterTable="parameterTable"
+          @parameterChange="parameterChange"
+          @getParameter="getParameter"
+          @sendInstruction="sendInstruction"
+        />
+      </div>
+      <!-- ZM15-DPVMode -->
+      <div v-else-if="parameter.MODE === 15">
+        <EliteParameterRecordingEliteDPV
+          :parameter="parameter"
+          :device="device"
+          :parameterTable="parameterTable"
+          @parameterChange="parameterChange"
+          @getParameter="getParameter"
+          @sendInstruction="sendInstruction"
+        />
+      </div>
+      <!-- ZM15-OtherModes -->
+      <div v-else>
+        <va-tree-category
+          v-for="name in parameterArrayInMode"
+          :key="name"
+          :label="`${typeof parameterTable[name].showName === 'function'
+            ? parameterTable[name].showName(parameter.MODE)
+            : parameterTable[name].showName} ${parameterValue(name)}`"
+          style="font-size: 20px;"
+        >
+          <va-tree-node>
+            <component
+              :is="parameterTable[name].componentType"
+              :parameterName="name"
+              :inputValue="parameter[name]"
+              :disable="name === 'CTRL_HIGH_Z_15' && device.status === 0"
+              v-bind="parameterTable[name]"
+              @parameterChange="parameterChange"
+              @getParameter="getParameter"
+              @sendInstruction="sendInstruction"
+            />
+          </va-tree-node>
+        </va-tree-category>
+      </div>
+    </va-tree-root>
+    <!-- guide picture button -->
+    <div>
+      <vue-final-modal
+        v-if="library.includes('ZM15')"
+        v-model="showModal"
+        classes="modal-container"
+        content-class="modal-content"
+        :hide-overlay="true"
+        :click-to-close="true"
+        :esc-to-close="true"
+        :drag="true"
+        :resize="true"
+        :resize-directions="['tr', 'br', 'bl', 'tl']"
+      >
+        <!-- <va-icon class='fa fa-close modal__close' @click="showModal=false"></va-icon>
+        <span class="modal__title"></span> -->
+        <div class="modal__content">
+          <img :src="require('@/assets/img/elite-wire/' + getImageUrl + '.svg')" class="modal_img" alt="No Pic" draggable="false" >
+          <!-- <img :src="`${pat}`" class="imgaa" alt="No Pic" draggable="false"> -->
+        </div>
+      </vue-final-modal>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import InputRange from '../parameter/itemNew/InputRange'
+import InputButtonToggle from '../parameter/itemNew/InputButtonToggle'
+import InputField from '../parameter/itemNew/InputField'
+import MultiInputField from '../parameter/itemNew/MultiInputField'
+import EliteParameterRecordingEliteDPV from '../parameter/itemNew/DPVNew/EliteParameterRecordingEliteDPV'
+import DevMode from '../parameter/itemNew/DevMode'
+import EliteParameterRecordingElitePulseSensing from '../parameter/itemNew/PulseSensingNew/EliteParameterRecordingElitePulseSensing'
+import { VueFinalModal } from 'vue-final-modal'
+import { mapFields } from 'vuex-map-fields'
+import parameterTable from '@/data/param-table/index.js'
+
+export default {
+  name: 'EliteParameterRecordingElitezm15',
+  components: {
+    /* eslint-disable vue/no-unused-components */
+    EliteParameterRecordingElitePulseSensing,
+    EliteParameterRecordingEliteDPV,
+    VueFinalModal,
+    InputRange,
+    InputButtonToggle,
+    InputField,
+    MultiInputField,
+    DevMode,
+  },
+  props: {
+    parameter: {
+      type: Object,
+      required: true,
+    },
+    library: {
+      type: String,
+      required: true,
+    },
+    device: {
+      type: Object,
+      default: null,
+    },
+  },
+  computed: {
+    parameterArrayInMode () {
+      return this.workingModeSelect && this.parameterTable.MODE[this.workingModeSelect.id].parameter
+    },
+    getImageUrl () {
+      if (this.workingModeSelect === null) {
+        return 'IV-Wire'
+      } else {
+        return this.workingModeSelect.img_src
+      }
+    },
+    deviceStatus () {
+      if (this.device === null) {
+        return false
+      } else {
+        return this.device.status === 0
+      }
+    },
+    ...mapFields('', [
+      'developer_mode',
+    ]),
+    ...mapFields('taskContent', [
+      'deviceListNew',
+    ]),
+  },
+  created () {
+  },
+  data () {
+    return {
+      parameterTable: parameterTable[this.library],
+      showModal: false,
+      workingModeSelect: null,
+      workingModeOptions: [],
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    mqttPub: function (topic, mes) {
+      this.$mqtt.publish(topic, mes)
+    },
+    parameterValue (name) {
+      if (this.parameterTable[name].type === 'number') {
+        const scale = this.parameterTable[name].unit[this.parameterTable[name].defaultUnit]
+        return ` ( ${this.parameterTable[name].outputReadabilityData(this.parameter[name], scale)} ${this.parameterTable[name].defaultUnit} )`
+      } else if (this.parameterTable[name].type === 'array') {
+        return ` ( ${this.parameterTable[name].outputReadabilityData(this.parameter[name])} )`
+      } else if (this.parameterTable[name].type === 'none') {
+        return ''
+      }
+    },
+    parameterChange: function (name, value, debounce = false) {
+      /** if parameter is equal to value, then don't change, JSON.stringify is for array & object compare */
+      if (JSON.stringify(value) !== JSON.stringify(this.parameter[name])) {
+        this.parameter[name] = value
+        debounce === false
+          ? this.$emit('setParameter', name, value)
+          : this.$emit('setParameterWithDebounce', name, value)
+      }
+    },
+    refresh () {
+    },
+    workingModeSelectChange (val) {
+      this.workingModeSelect = val
+      console.log('workingModeSelectChange', this.workingModeSelect.id, this.parameter.MODE)
+
+      if (this.workingModeSelect.id !== this.parameter.MODE) {
+        this.parameterChange('MODE', this.workingModeSelect.id)
+
+        // if device is idle, then setting highz when mode switch
+        if (this.deviceStatus === true && this.workingModeSelect.highz !== undefined) {
+          this.parameterChange('CTRL_HIGH_Z_15', this.workingModeSelect.highz)
+        }
+      }
+    },
+    getParameter: function (name) {
+      this.$emit('getParameter', name)
+    },
+    sendInstruction: function (instr) {
+      this.$emit('sendInstruction', instr)
+    },
+  },
+  mounted () {
+    // dev mode
+    // this.developer_mode === true
+    //   ? this.workingModeOptions = this.workingModeDevOptions
+    //   : this.workingModeOptions = this.workingModeNoDevOptions
+    this.workingModeOptions = this.parameterTable.MODE_OPTIONS
+
+    // init mode
+    this.workingModeSelect = this.workingModeOptions.find(ele => ele.id === this.parameter.MODE)
+  },
+  watch: {
+  },
+  destroyed () {
+  },
+}
+</script>
+<style lang="scss">
+.modal-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.modal-content {
+  display: flex;
+  flex-direction: column;
+  margin: 0 1rem;
+  padding: 1rem;
+  border: 1px solid #e2e8f0;
+  border-radius: 0.5rem;
+  background: #ffffff;
+}
+
+.modal__title {
+  font-size: 1.5rem;
+  font-weight: 700;
+}
+
+.modal__content {
+  flex-grow: 1;
+  overflow-y: auto;
+}
+
+.modal_img {
+  max-width: 100%;
+  max-height: 640px;
+}
+
+.modal__close {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+}
+</style>

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

@@ -1,32 +1,53 @@
 <template>
   <div>
-    <elite-parameter-recording v-if="eliteVer=='1'" :ref="'rec_ref_1'" :deviceID="deviceID"/>
-    <elite-parameter-recording-elitezm15 v-else-if="eliteVer=='2'" :ref="'rec_ref_2'" :deviceID="deviceID"/>
-    <elite-parameter-recording-elite-e-i-s v-else-if="eliteVer=='4'" :ref="'rec_ref_4'" :deviceID="deviceID"/>
+    <!-- <elite-parameter-recording v-if="eliteVer=='1'" :ref="'rec_ref_1'" :deviceID="deviceID"/> -->
+    <device-parameter-recording
+      :parameter="device.configuration"
+      :library="device.library_name"
+      :device="device"
+      @sendInstruction="sendInstruction"
+      @getParameter="getParameter"
+      @setParameter="setParameter"
+      @setParameterWithDebounce="setParameterWithDebounce"
+    />
+    <!-- <elite-parameter-recording-elitezm15
+      :ref="'rec_ref_2'"
+      :parameter="device.configuration"
+      :library="device.library_name"
+      :device="device"
+      @sendInstruction="sendInstruction"
+      @getParameter="getParameter"
+      @setParameter="setParameter"
+      @setParameterWithDebounce="setParameterWithDebounce"
+    /> -->
+    <!-- <elite-parameter-recording-elite-e-i-s v-else-if="eliteVer=='4'" :ref="'rec_ref_4'" :deviceID="deviceID"/>
     <elite-parameter-recording-elite-trigger v-else-if="eliteVer=='5'" :ref="'rec_ref_5'" :deviceID="deviceID"/>
-    <elite-parameter-recording-elite-e-i-s v-else :ref="'rec_ref_4'" :deviceID="deviceID"/>
+    <elite-parameter-recording-elite-e-i-s v-else :ref="'rec_ref_4'" :deviceID="deviceID"/> -->
   </div>
 </template>
 
 <script>
 
-import EliteParameterRecording from './EliteParameterRecording'
-import EliteParameterRecordingElitezm15 from './EliteParameterRecordingElitezm15'
-import EliteParameterRecordingEliteEIS from './EliteParameterRecordingEliteEIS'
-import EliteParameterRecordingEliteTrigger from './EliteParameterRecordingEliteTrigger'
+import DeviceParameterRecording from './DeviceParameterRecording'
+// import EliteParameterRecordingElitezm15 from './EliteParameterRecordingElitezm15'
+// import EliteParameterRecording from './EliteParameterRecording'
+// import EliteParameterRecordingEliteEIS from './EliteParameterRecordingEliteEIS'
+// import EliteParameterRecordingEliteTrigger from './EliteParameterRecordingEliteTrigger'
 import { taskInfo } from '../../../../data/task/TaskInfo'
+import _ from 'lodash'
 
 export default {
   name: 'EliteParameterWindow',
   components: {
-    EliteParameterRecording,
-    EliteParameterRecordingElitezm15,
-    EliteParameterRecordingEliteEIS,
-    EliteParameterRecordingEliteTrigger,
+    DeviceParameterRecording,
+    // EliteParameterRecordingElitezm15,
+    // EliteParameterRecording,
+    // EliteParameterRecordingEliteEIS,
+    // EliteParameterRecordingEliteTrigger,
   },
   props: {
-    deviceID: {
-      type: Number,
+    device: {
+      type: Object,
       required: true,
     },
     deviceName: {
@@ -42,6 +63,36 @@ export default {
   mqtt: {
   },
   methods: {
+    sendInstruction: function (instruction) {
+      this.mqttPublish(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_instruction/0',
+        device: this.device.mac_address,
+        instruction: instruction,
+      }))
+    },
+    getParameter: function (parameterName) {
+      this.mqttPublish(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_parameter_value/0',
+        device: this.device.mac_address,
+        parameter: parameterName,
+      }))
+    },
+    setParameter: function (parameterName, parameterValue) {
+      this.mqttPublish(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_parameter/0',
+        device: this.device.mac_address,
+        parameter: parameterName,
+        content: parameterValue,
+      }))
+    },
+    setParameterWithDebounce: _.debounce(function (parameterName, parameterValue) {
+      this.mqttPublish(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_parameter/0',
+        device: this.device.mac_address,
+        parameter: parameterName,
+        content: parameterValue,
+      }))
+    }, 100),
     compareEliteVer: function (ver) {
       if (JSON.stringify(ver.slice(0, 4)) === JSON.stringify([0, 2, 1, 5])) {
         this.eliteVer = '1' // 1.4
@@ -60,52 +111,43 @@ export default {
         this.eliteVer = '4'
       }
     },
-    mqttPub: function (topic, mes) {
+    mqttPublish: function (topic, mes) {
       this.$mqtt.publish(topic, mes)
-      // console.log('window:1,mqttPub(topic:', topic, ',mes:', mes, ')')
     },
     pageInit: function () {
-      // this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
-      //   header: 'get_device_info/0',
-      //   device: taskInfo.getRawDeviceID(this.deviceID),
-      // }))
-
-      // console.log('window:2,pageInit(taskInfo.getDeviceInfo:', taskInfo.getDeviceInfo(this.deviceID).info.serial_number, ')')
-
-      this.compareEliteVer(taskInfo.getDeviceInfo(this.deviceID).info.serial_number)
     },
     refresh: function () {
-      // console.log(this.eliteVer)
-      switch (this.eliteVer) {
-        case '1':
-          this.$nextTick(() => {
-            if (this.$refs.rec_ref_1 != null) {
-              this.$refs.rec_ref_1.refresh()
-            }
-          })
-          break
-        case '2':
-          this.$nextTick(() => {
-            if (this.$refs.rec_ref_2 != null) {
-              this.$refs.rec_ref_2.refresh()
-            }
-          })
-          break
-        case '4':
-          this.$nextTick(() => {
-            if (this.$refs.rec_ref_4 != null) {
-              this.$refs.rec_ref_4.refresh()
-            }
-          })
-          break
-        case '5':
-          this.$nextTick(() => {
-            if (this.$refs.rec_ref_5 != null) {
-              this.$refs.rec_ref_5.refresh()
-            }
-          })
-          break
-      }
+      // // console.log(this.eliteVer)
+      // switch (this.eliteVer) {
+      //   case '1':
+      //     this.$nextTick(() => {
+      //       if (this.$refs.rec_ref_1 != null) {
+      //         this.$refs.rec_ref_1.refresh()
+      //       }
+      //     })
+      //     break
+      //   case '2':
+      //     this.$nextTick(() => {
+      //       if (this.$refs.rec_ref_2 != null) {
+      //         this.$refs.rec_ref_2.refresh()
+      //       }
+      //     })
+      //     break
+      //   case '4':
+      //     this.$nextTick(() => {
+      //       if (this.$refs.rec_ref_4 != null) {
+      //         this.$refs.rec_ref_4.refresh()
+      //       }
+      //     })
+      //     break
+      //   case '5':
+      //     this.$nextTick(() => {
+      //       if (this.$refs.rec_ref_5 != null) {
+      //         this.$refs.rec_ref_5.refresh()
+      //       }
+      //     })
+      //     break
+      // }
       // this.$nextTick(() => {
       //   if (this.$refs.rec_ref != null) {
       //     this.$refs.rec_ref.refresh()
@@ -117,16 +159,8 @@ export default {
   },
   mounted () {
     this.pageInit()
-    // console.log('window:4,mounted(pageInit)')
   },
   watch: {
-    deviceID: function (val) {
-      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
-        header: 'get_device_info/0',
-        device: taskInfo.getRawDeviceID(val),
-      }))
-      // console.log('window:5,deviceID(taskInfo:', taskInfo, ')')
-    },
   },
 }
 </script>

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

@@ -1,83 +0,0 @@
-<template>
-  <div class="row">
-    <div class="flex sm12 xl12 md12 xs12">
-      <div class="flex row align--center" :key="inputKey">
-        <va-button slot="append" class="mr-2 pa-1 shrink" small @click="inputChange(minValue)">
-          {{ minValue }}
-        </va-button>
-        <va-input
-          @mouseleave.native="inputChange(inputString)"
-          @keyup.enter="inputChange(inputString)"
-
-          v-model="inputString"
-          class="mb-0"
-          style="width: 100px;"
-        >
-        </va-input>
-        <va-button slot="append" class="ml-2 pa-1 shrink" small @click="inputChange(maxValue)">
-          {{ maxValue }}
-        </va-button>
-      </div>
-      <va-slider
-        @touchend.native="inputChange(inputNumber)"
-        @click.native="inputChange(inputNumber)"
-        class="flex sm12 xl12 md12 xs12"
-        v-model="inputNumber"
-        :min="minValue"
-        :max="maxValue"
-      />
-    </div>
-  </div>
-</template>
-
-<script>
-
-export default {
-  name: 'RangeInput',
-  components: {
-  },
-  props: {
-    parameterName: {
-      type: String,
-      required: true,
-    },
-    minValue: {
-      type: Number,
-      default: 1,
-    },
-    maxValue: {
-      type: Number,
-      default: 250,
-    },
-    inputChange: {
-      type: Function,
-      required: true,
-    },
-    updateChange: {
-      type: Function,
-      required: true,
-    },
-  },
-  created () {
-  },
-  data () {
-    return {
-      inputKey: 0,
-      inputNumber: 0,
-      inputString: '0',
-    }
-  },
-  mqtt: {
-  },
-  methods: {
-  },
-  async mounted () {
-    this.$emit('refresh')
-  },
-  destroyed () {
-  },
-  watch: {
-  },
-}
-
-</script>

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

@@ -0,0 +1,122 @@
+<template>
+  <div>
+    <fieldset>
+      <va-radio-button
+        option="0"
+        v-model="optionValue"
+        label="AUTO"
+        @click.native.stop="switchMode(optionValue)"
+      />
+      <va-radio-button
+        option="1"
+        v-model="optionValue"
+        label="ADVANCED"
+        @click.native.stop="switchMode(optionValue)"
+      />
+      <va-radio-button
+        option="2"
+        v-model="optionValue"
+        label="ENGINEERING"
+        @click.native.stop="switchMode(optionValue)"
+      />
+      <!-- <div v-for="name in parameterTable.MODE[15].parameter" :key="name">
+        {{ name }}
+        {{ parameterTable[name].componentType }}
+        {{ parameter[name] }}
+      </div> -->
+      <component
+        v-for="name in displayParameterList"
+        :key="name"
+        :is="parameterTable[name].componentType"
+        :withHeader="true"
+        :withUnitButton="true"
+        :parameterName="name"
+        :inputValue="parameter[name]"
+        :disabled="optionValue === '2' && Boolean(parameter.DPV_engineering_enable) === false && engineerModeDisableList.includes(name)"
+        v-bind="parameterTable[name]"
+        @parameterChange="parameterChange"
+        @getParameter="getParameter"
+        @sendInstruction="sendInstruction"
+      />
+    </fieldset>
+  </div>
+</template>
+
+<script>
+import InputRange from '../InputRange'
+import InputOption from '../InputOption'
+import InputToggle from '../InputToggle'
+import InputDoubleRange from '../InputDoubleRange'
+import InputButtonToggle from '../InputButtonToggle'
+import InputField from '../InputField'
+
+export default {
+  name: 'EliteParameterRecordingEliteDPV',
+  components: {
+    InputRange,
+    InputButtonToggle,
+    InputField,
+    InputDoubleRange,
+    InputOption,
+    InputToggle,
+  },
+  props: {
+    parameter: {
+      type: Object,
+      required: true,
+    },
+    device: {
+      type: Object,
+      default: () => {},
+    },
+    parameterTable: {
+      type: Object,
+    },
+    deviceID: {
+      type: Number,
+    },
+    deviceName: {
+      type: String,
+      default: 'Elite',
+    },
+  },
+  created () {
+  },
+  computed: {
+    displayParameterList () {
+      return this.parameterTable.MODE[this.parameter.MODE].parameterInMode[this.optionValue]
+    },
+  },
+  data () {
+    return {
+      engineerModeDisableList: ['DPV_e_1', 'DPV_e_2', 'DPV_pulse_option'],
+      optionValue: String(this.parameter.DPV_mode),
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    mqttPub: function (topic, mes) {
+      this.$mqtt.publish(topic, mes)
+    },
+    parameterChange: function (name, value, debounce = false) {
+      this.$emit('parameterChange', name, value, debounce)
+    },
+    getParameter: function (name) {
+      this.$emit('getParameter', name)
+    },
+    sendInstruction: function (instr) {
+      this.$emit('sendInstruction', instr)
+    },
+    switchMode (val) {
+      this.$emit('parameterChange', 'DPV_mode', parseInt(val))
+    },
+  },
+  mounted () {
+  },
+  watch: {
+  },
+  destroyed () {
+  },
+}
+</script>

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

@@ -0,0 +1,138 @@
+<template>
+  <div>
+    <va-card>
+      <div class="row">
+        <va-button class="mr-2 pa-1" style="width: 4em; height: 2em; font-size: 15px;" small @click="sendDetectInstr">
+          Detect
+        </va-button>
+        <va-button class="mr-2 pa-1" style="width: 4em; height: 2em; font-size: 15px;" small @click="sendInstr('dev_version')">
+          Version
+        </va-button>
+        <va-button class="mr-2 pa-1" style="width: 4em; height: 2em; font-size: 15px;" small @click="sendInstr('dev_battery')">
+          Battery
+        </va-button>
+      </div>
+      <div class="row">
+        <div class="flex sm12 xl12 md12 xs12">
+          <div class="flex row align--center">
+            <va-input
+              @keyup.enter="instruParameterChange(inputWrite)"
+              @blur="instruParameterChange(inputWrite)"
+              class="mb-0"
+              v-model="inputWrite"
+              label="Write value (0x3000FF ... )"
+              style="width: 100px;"
+              maxlength="34"
+            />
+            <va-button slot="append" class="mr-2 pa-1 shrink" style="width: 2em; height: 2em; border-radius: 50%; font-size: 20px;" small @click="sendInstr('ble_instru_send')">
+              W
+            </va-button>
+          </div>
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="flex sm12 xl12 md12 xs12">
+          <div class="flex row align--center">
+            <va-input
+              :disabled="true"
+              class="mb-0"
+              v-model="inputRead"
+              label="Read value"
+              style="width: 100px; font-size: 30px;"
+            />
+            <va-button slot="append" class="mr-2 pa-1 shrink" style="width: 2em; height: 2em; border-radius: 50%; font-size: 20px;" small @click="readCisData()">
+              R
+            </va-button>
+          </div>
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="flex sm12 xl12 md12 xs12">
+          <div class="flex row align--center">
+            <va-input
+              disabled="disabled"
+              class="mb-0"
+              v-model="inputNotify"
+              label="Notify value"
+              style="width: 100px;"
+            />
+            <va-button slot="append" class="mr-2 pa-1 shrink" style="width: 2em; height: 2em; border-radius: 50%; font-size: 20px;" small @click="detect()">
+              N
+            </va-button>
+          </div>
+        </div>
+      </div>
+    </va-card>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'DevMode',
+  components: {
+  },
+  computed: {
+    inputRead () {
+      return this.inputValue.toString(16).toUpperCase()
+    },
+  },
+  props: {
+    inputValue: {
+      type: Number,
+      required: true,
+    },
+    parameterName: {
+      type: String,
+      required: true,
+    },
+  },
+  created () {
+  },
+  data () {
+    return {
+      inputWrite: '',
+      inputNotify: '',
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    sendInstr (instr) {
+      this.$emit('sendInstruction', instr)
+    },
+    sendDetectInstr () {
+      this.$emit('sendInstruction', 'VIS_DEVICE_DETECT')
+      setTimeout(() => {
+        this.$emit('sendInstruction', 'VIS_DEVICE_DONE')
+      }, 5000)
+    },
+    readCisData () {
+      this.$emit('getParameter', 'ADC_VALUE_I')
+    },
+    instruParameterChange (instruction) {
+      while (instruction.length <= 33) {
+        instruction += '0'
+      }
+
+      const sendIns = new Array(17).fill(0)
+      for (let i = 0; i <= 16; i++) {
+        const startIndex = i * 2
+        sendIns[i] = instruction.substring(startIndex, startIndex + 2)
+        sendIns[i] = parseInt(sendIns[i], 16)
+      }
+
+      this.$emit('parameterChange', 'BLE_WRITE', '0:16=' + String(sendIns))
+    },
+  },
+  async mounted () {
+  },
+  destroyed () {
+  },
+  watch: {
+  },
+}
+
+</script>

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

@@ -0,0 +1,101 @@
+<template>
+  <div>
+    <div v-if="templateType === 0" class="row flex sm12 xl12 md12 xs12 align--center my-0 py-0">
+      <div v-if="withHeader" class="flex sm6 xl6 md6 xs6">
+        <p class="display-6">{{ showName }}<p/>
+      </div>
+      <div class="flex sm12 xl12 md12 xs12">
+        <va-button-toggle
+          small
+          outline
+          v-model="buttonSelect"
+          :options="options"
+          :disabled="disable"
+        />
+      </div>
+    </div>
+    <div  v-if="templateType === 1" class="row flex sm12 xl12 md12 xs12 align--center my-0 py-0">
+      <div v-if="withHeader" class="flex sm6 xl6 md6 xs6 px-0 mx-0">
+        <p class="display-6">{{ showName }}<p/>
+      </div>
+      <div class="flex sm6 xl6 md6 xs6 px-0 mx-0">
+        <va-button-toggle
+          small
+          outline
+          v-model="buttonSelect"
+          :options="options"
+          :disabled="disable"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'InputButtonToggle',
+  components: {
+  },
+  computed: {
+    buttonSelect: {
+      get () {
+        return this.inputValue
+      },
+      set (val) {
+        this.buttonSelectChange(val)
+      },
+    },
+  },
+  props: {
+    templateType: {
+      type: Number,
+      default: 0,
+    },
+    withHeader: {
+      type: Boolean,
+      default: false,
+    },
+    parameterName: {
+      type: String,
+      required: true,
+    },
+    showName: {
+      type: String,
+    },
+    inputValue: {
+      type: Number,
+      required: true,
+    },
+    options: {
+      type: Array,
+      required: true,
+    },
+    disable: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  created () {
+  },
+  data () {
+    return {
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    buttonSelectChange (value) {
+      this.$emit('parameterChange', this.parameterName, value)
+    },
+  },
+  async mounted () {
+    // console.log('mount button group', this.parameterName, this.inputValue, this.buttonSelect, this.options, this.disable)
+  },
+  destroyed () {
+  },
+  watch: {
+  },
+}
+
+</script>

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

@@ -0,0 +1,124 @@
+<template>
+  <!-- this is range slider which [0,25,50,75] ~ 100(fixed) -->
+  <div class="row flex">
+    <div class="flex sm12 xl12 md12 xs12 px-0 mx-0 my-0 py-1">
+      <p class="display-6">Current Recording -<p/>
+    </div>
+    <div class="flex sm6 xl6 md6 xs6 px-0 mx-0 mt-2 py-3">
+      <p class="display-6">Pre- / Post-Pulse Width<p/>
+    </div>
+    <div class="flex sm2 xl2 md2 xs2 px-0 mx-0 mt-2 py-3">
+      <va-input
+        @keyup.enter="inputStringChange(inputString)"
+        @blur="inputStringChange(inputString)"
+        v-model="inputStringModal"
+        class="mb-0"
+      >
+        <p slot="append" style="margin-right: 0;" small>
+          %
+        </p>
+      </va-input>
+    </div>
+    <div class="flex sm12 xl12 md12 xs12 py-0 my-0" >
+      <va-slider
+        range
+        pins
+        :min="range.min"
+        :max="range.max"
+        value-visible
+        :step="25"
+        v-model="inputArray"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'InputDoubleRange',
+  components: {
+  },
+  props: {
+    templateType: {
+      type: Number,
+      default: 0,
+    },
+    withHeader: {
+      type: Boolean,
+      default: false,
+    },
+    parameterName: {
+      type: String,
+      required: true,
+    },
+    showName: {
+      type: [String, Function],
+    },
+    range: {
+      type: Object,
+    },
+    inputValue: {
+      type: Array,
+      default: () => [0, 100],
+    },
+  },
+  created () {
+  },
+  computed: {
+    inputArray: {
+      get () {
+        return this.inputValue
+      },
+      set (val) {
+        this.inputChange(val)
+      },
+    },
+    inputStringModal: {
+      get () {
+        return String(this.inputValue[1] - this.inputValue[0])
+      },
+      set (val) {
+        this.inputString = val
+      },
+    },
+  },
+  data () {
+    return {
+      inputString: '',
+    }
+  },
+  methods: {
+    inputStringChange (val) {
+      val = parseInt(val)
+      const remainder = val % 25
+      if (remainder > 13) {
+        val += (25 - remainder)
+      } else {
+        val -= remainder
+      }
+      if (val < 0 || isNaN(val)) {
+        val = 0
+      } else if (val > 75) {
+        val = 75
+      }
+
+      this.$emit('parameterChange', this.parameterName, [100 - val, 100])
+    },
+    inputChange (val) {
+      val[1] = 100 // [2021/10/28] max val is fixed to 100 now
+      if (val[0] === this.range.max) { // [2021/10/28] min can't equal 100 now
+        val[0] = this.inputValue[0]
+      }
+
+      this.$emit('parameterChange', this.parameterName, val, true)
+    },
+  },
+  async mounted () {
+  },
+  destroyed () {
+  },
+  watch: {
+  },
+}
+
+</script>

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

@@ -0,0 +1,170 @@
+<template>
+  <div class="row flex sm12 xl12 md12 xs12 align--center my-0 py-0">
+    <div v-if="withHeader" :class="style.header">
+      <p :style="disabled !== true ? '' : {color: this.$themes.gray}" class="display-6">{{ showName }}<p/>
+    </div>
+    <div :class="style.content">
+      <va-input
+        @keyup.enter="inputChange(inputString)"
+        @blur="inputChange(inputString)"
+        v-model="inputStringModel"
+        class="mb-0"
+        :disabled="disabled"
+      >
+        <p slot="append" style="margin-right: 0;" small>
+          {{ unitSelect }}
+        </p>
+      </va-input>
+    </div>
+    <div v-if="withUnitButton" :class="style.unitButton">
+      <va-button
+        @click="unitChange()"
+        v-model="unitSelect"
+        class="px-3 py-1"
+        style="border-radius: 12px;"
+        :disabled="disabled"
+      >
+        {{ unitSelect }}
+      </va-button>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'InputFieldWithHeader',
+  components: {
+  },
+  props: {
+    templateType: {
+      type: Number,
+      default: 0,
+    },
+    withHeader: {
+      type: Boolean,
+      default: false,
+    },
+    withUnitButton: {
+      type: Boolean,
+      default: false,
+    },
+    parameterName: {
+      type: String,
+      required: true,
+    },
+    showName: {
+      type: String,
+    },
+    range: {
+      type: Object,
+    },
+    inputValue: {
+      type: Number,
+      required: true,
+    },
+    defaultUnit: {
+      type: String,
+    },
+    unit: {
+      type: Object,
+    },
+    outputReadabilityData: {
+      type: Function,
+      default: (val) => val,
+    },
+    outputRawData: {
+      type: Function,
+      default: (val) => val,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    index: {
+      type: Number,
+      default: -1,
+    },
+  },
+  created () {
+  },
+  computed: {
+    inputStringModel: {
+      get () {
+        return String(this.outputReadabilityData(this.inputValue, this.unit[this.unitSelect]))
+      },
+      set (val) {
+        this.inputString = val
+      },
+    },
+    unitLength () {
+      return Object.keys(this.unit).length
+    },
+  },
+  data () {
+    return {
+      unitSelect: this.defaultUnit,
+      unitButtonClicked: Object.keys(this.unit).indexOf(this.defaultUnit),
+      inputString: '',
+      size: {
+        12: 'flex sm12 xl12 md12 xs12 px-0 mx-0',
+        6: 'flex sm6 xl6 md6 xs6 px-0 mx-0',
+        5: 'flex sm5 xl5 md5 xs5 px-0 mx-0 my-0 py-0',
+        4: 'flex sm4 xl4 md4 xs4 px-0 mx-0 my-0 py-0',
+        3: 'flex sm3 xl3 md3 xs3 px-0 mx-0 my-0 py-0',
+      },
+      style: {
+        header: '',
+        content: '',
+        unitButton: '',
+      },
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    inputChange: function (val) {
+      /** */
+      const scale = this.unit[this.unitSelect]
+      // if change from input field
+      if (typeof (val) === 'string') {
+        if (isNaN(val) || val === '') {
+          return false
+        }
+        val = this.outputRawData(val, scale)
+        if (parseFloat(val) < this.range.min) {
+          val = this.range.min
+        } else if (parseFloat(val) > this.range.max) {
+          val = this.range.max
+        }
+      }
+      /** if parameter is array with index needs to return */
+      if (this.index === -1) {
+        this.$emit('parameterChange', this.parameterName, val)
+      } else {
+        this.$emit('parameterChangeByIndex', this.parameterName, val, this.index)
+      }
+    },
+    unitChange: function () {
+      this.unitButtonClicked += 1
+      this.unitSelect = Object.keys(this.unit)[this.unitButtonClicked % this.unitLength]
+    },
+  },
+  async mounted () {
+    if (this.withHeader === true && this.withUnitButton === true) {
+      this.style.header = this.size[5]
+      this.style.content = this.size[4]
+      this.style.unitButton = this.size[3]
+    } else if (this.withHeader === true) {
+      this.style.header = this.size[6]
+      this.style.content = this.size[6]
+    } else {
+      this.style.content = this.size[12]
+    }
+  },
+  destroyed () {
+  },
+  watch: {
+  },
+}
+</script>

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

@@ -0,0 +1,72 @@
+<template>
+  <div class="row flex px-0 mx-0 my-0 py-0">
+    <div class="flex sm4 xl4 md4 xs4 px-0 mx-0 my-0 py-2">
+      <p :style="disabled !== true ? '' : {color: this.$themes.gray}" class="display-6">{{ showName }}<p/>
+    </div>
+    <div class="flex sm1 xl1 md1 xs1 px-0 mx-0 my-0 py-0">
+      <va-checkbox v-model="inputOptionModel" :disabled="disabled"/>
+    </div>
+    <div class="flex sm7 xl7 md7 xs7 px-0 mx-0 my-0 py-1">
+      <p :style="{color: this.$themes.gray}" style="font-weight: bold;"> {{ description }} </p>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'InputOption',
+  components: {
+  },
+  props: {
+    parameterName: {
+      type: String,
+      required: true,
+    },
+    description: {
+      type: String,
+      default: '',
+    },
+    showName: {
+      type: String,
+    },
+    inputValue: {
+      type: [Boolean, Number],
+      required: true,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  created () {
+  },
+  computed: {
+    inputOptionModel: {
+      get () {
+        return Boolean(this.inputValue)
+      },
+      set (val) {
+        this.inputChange(val)
+      },
+    },
+  },
+  data () {
+    return {
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    inputChange (val) {
+      this.$emit('parameterChange', this.parameterName, val)
+    },
+  },
+  async mounted () {
+  },
+  destroyed () {
+  },
+  watch: {
+  },
+}
+</script>

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

@@ -0,0 +1,141 @@
+<template>
+  <div class="flex row sm12 xl12 md12 xs12 align--center ma-0 pa-0">
+    <div v-if="withHeader" class="flex sm12 xl12 md12 xs12 pa-0 ma-1">
+      <p class="display-6">{{ showName }}<p/>
+    </div>
+    <div class="flex sm12 xl12 md12 xs12">
+      <div class="flex row align--center">
+        <va-button slot="append" class="mr-2 pa-1 shrink" small @click="() => {
+          inputNumber = range.min
+          inputChange(range.min)
+        }">
+          {{ outputReadabilityData(range.min, unit[selectUnit]) }}
+        </va-button>
+        <va-input
+          @keyup.enter="inputChange(inputString)"
+          @blur="inputChange(inputString)"
+          v-model="inputStringModel"
+          class="mb-0"
+          style="width: 100px;"
+        >
+          <p slot="append" style="margin-right: 0;" small>
+            {{ defaultUnit }}
+          </p>
+        </va-input>
+        <va-button slot="append" class="ml-2 pa-1 shrink" small @click="() => {
+          inputNumber = range.max
+          inputChange(range.max)
+        }">
+          {{ outputReadabilityData(range.max, unit[selectUnit]) }}
+        </va-button>
+      </div>
+      <va-slider
+        class="flex sm12 xl12 md12 xs12 pa-0 ma-0"
+        v-model="inputNumber"
+        :min="range.min"
+        :max="range.max"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'RangeInput',
+  components: {
+  },
+  props: {
+    templateType: {
+      type: Number,
+      default: 0,
+    },
+    withHeader: {
+      type: Boolean,
+      default: false,
+    },
+    parameterName: {
+      type: String,
+      required: true,
+    },
+    showName: {
+      type: [String, Function],
+    },
+    range: {
+      type: Object,
+    },
+    inputValue: {
+      type: Number,
+      required: true,
+    },
+    defaultUnit: {
+      type: String,
+    },
+    unit: {
+      type: Object,
+    },
+    outputReadabilityData: {
+      type: Function,
+      default: (val) => val,
+    },
+    outputRawData: {
+      type: Function,
+      default: (val) => val,
+    },
+  },
+  created () {
+  },
+  computed: {
+    inputNumber: {
+      get () {
+        return this.inputValue
+      },
+      set (val) {
+        this.inputChange(val)
+      },
+    },
+    inputStringModel: {
+      get () {
+        return String(this.outputReadabilityData(this.inputValue, this.unit[this.defaultUnit]))
+      },
+      set (val) {
+        this.inputString = val
+      },
+    },
+  },
+  data () {
+    return {
+      inputString: String(this.outputReadabilityData(this.inputValue, this.unit[this.defaultUnit])),
+      selectUnit: this.defaultUnit, // find key where is 1
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    inputChange: function (val) {
+      const scale = this.unit[this.selectUnit]
+      // if change from input field
+      if (typeof (val) === 'string') {
+        if (isNaN(val) || val === '') {
+          return false
+        }
+        val = this.outputRawData(val, scale)
+        if (parseFloat(val) < this.range.min) {
+          val = this.range.min
+        } else if (parseFloat(val) > this.range.max) {
+          val = this.range.max
+        }
+      }
+      this.$emit('parameterChange', this.parameterName, val, true)
+      // console.log(this.parameterName, val, typeof (val), this.inputNumber, this.inputString, scale)
+    },
+  },
+  async mounted () {
+    // console.log(this.templateType, this.parameterName, this.inputValue, this.defaultUnit, this.unit, this.inputChange, this.selectUnit, this.inputNumber, this.inputString)
+  },
+  destroyed () {
+  },
+  watch: {
+  },
+}
+
+</script>

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

@@ -0,0 +1,101 @@
+<template>
+  <!-- this is range slider which [0,25,50,75] ~ 100(fixed) -->
+  <div>
+    <div class="row flex">
+      <div class="flex sm8 xl8 md8 xs8 px-0 mx-0">
+        <p class="display-6">{{ showName }}<p/>
+      </div>
+      <div class="flex sm4 xl4 md4 xs4 px-0 mx-0">
+        {{ `${inputValue[0]} - ${inputValue[1]} %` }}
+      </div>
+    </div>
+    <div class="flex sm12 xl12 md12 xs12 py-0 my-0" >
+      <va-slider
+        range
+        pins
+        :min="range.min"
+        :max="range.max"
+        value-visible
+        :step="sliderStep"
+        v-model="inputArray"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'inputRangeSlider',
+  components: {
+  },
+  props: {
+    templateType: {
+      type: Number,
+      default: 0,
+    },
+    withHeader: {
+      type: Boolean,
+      default: false,
+    },
+    parameterName: {
+      type: String,
+      required: true,
+    },
+    showName: {
+      type: [String, Function],
+    },
+    range: {
+      type: Object,
+    },
+    inputValue: {
+      type: Array,
+      default: () => [0, 100],
+    },
+    sliderStep: {
+      type: Number,
+      default: 1,
+    },
+    index: {
+      type: Number,
+      default: -1,
+    },
+  },
+  created () {
+  },
+  computed: {
+    inputArray: {
+      get () {
+        return this.inputValue
+      },
+      set (val) {
+        this.inputChange(val)
+      },
+    },
+    inputStringModal: {
+      get () {
+        return String(this.inputValue[1] - this.inputValue[0])
+      },
+      set (val) {
+        this.inputString = val
+      },
+    },
+  },
+  data () {
+    return {
+      inputString: '',
+    }
+  },
+  methods: {
+    inputChange (val) {
+      this.$emit('parameterChangeByIndex', this.parameterName, val, this.index, true)
+    },
+  },
+  async mounted () {
+  },
+  destroyed () {
+  },
+  watch: {
+  },
+}
+
+</script>

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

@@ -0,0 +1,58 @@
+<template>
+  <div class="row flex px-0 mx-0 my-0 py-0">
+    <div class="flex sm4 xl4 md4 xs4 px-0 mx-0 my-0 py-2">
+      <va-toggle class="mt-1" v-model="inputToggleModel" small color="success"/>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'InputOption',
+  components: {
+  },
+  props: {
+    parameterName: {
+      type: String,
+      required: true,
+    },
+    showName: {
+      type: String,
+    },
+    inputValue: {
+      type: [Boolean, Number],
+      required: true,
+    },
+  },
+  created () {
+  },
+  computed: {
+    inputToggleModel: {
+      get () {
+        return Boolean(this.inputValue)
+      },
+      set (val) {
+        this.inputToggleChange(val)
+      },
+    },
+  },
+  data () {
+    return {
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    inputToggleChange (val) {
+      this.$emit('parameterChange', this.parameterName, val)
+    },
+  },
+  async mounted () {
+  },
+  destroyed () {
+  },
+  watch: {
+  },
+}
+</script>

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

@@ -0,0 +1,183 @@
+<template>
+  <div class="row flex sm12 xl12 md12 xs12 align--center my-0 py-0">
+    <div v-if="withHeader" :class="style.header">
+      <p :style="disabled !== true ? '' : {color: this.$themes.gray}" class="display-6">{{ showName }}<p/>
+    </div>
+    <div :class="style.content">
+      <va-input
+        @keyup.enter="inputChange(inputString, 0)"
+        @blur="inputChange(inputString, 0)"
+        v-model="inputStringModel1"
+        class="mb-0"
+        :disabled="disabled"
+      >
+        <p slot="append" style="margin-right: 0;" small>
+          {{ unitSelect }}
+        </p>
+      </va-input>
+      <va-input
+        @keyup.enter="inputChange(inputString, 1)"
+        @blur="inputChange(inputString, 1)"
+        v-model="inputStringModel2"
+        class="mb-0"
+        :disabled="disabled"
+      >
+        <p slot="append" style="margin-right: 0;" small>
+          {{ unitSelect }}
+        </p>
+      </va-input>
+    </div>
+    <div v-if="withUnitButton" :class="style.unitButton">
+      <va-button
+        @click="unitChange()"
+        v-model="unitSelect"
+        class="px-3 py-1"
+        style="border-radius: 12px;"
+        :disabled="disabled"
+      >
+        {{ unitSelect }}
+      </va-button>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'InputFieldWithHeader',
+  components: {
+  },
+  props: {
+    templateType: {
+      type: Number,
+      default: 0,
+    },
+    withHeader: {
+      type: Boolean,
+      default: false,
+    },
+    withUnitButton: {
+      type: Boolean,
+      default: false,
+    },
+    parameterName: {
+      type: String,
+      required: true,
+    },
+    showName: {
+      type: String,
+    },
+    range: {
+      type: Object,
+    },
+    inputValue: {
+      type: Array,
+      required: true,
+    },
+    defaultUnit: {
+      type: String,
+    },
+    unit: {
+      type: Object,
+    },
+    outputReadabilityData: {
+      type: Function,
+      default: (val) => val,
+    },
+    outputRawData: {
+      type: Function,
+      default: (val) => val,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  created () {
+  },
+  computed: {
+    inputStringModel1: {
+      get () {
+        return String(this.outputReadabilityData(this.inputValue[0], this.unit[this.unitSelect]))
+      },
+      set (val) {
+        this.inputString = val
+      },
+    },
+    inputStringModel2: {
+      get () {
+        return String(this.outputReadabilityData(this.inputValue[1], this.unit[this.unitSelect]))
+      },
+      set (val) {
+        this.inputString = val
+      },
+    },
+    unitLength () {
+      return Object.keys(this.unit).length
+    },
+  },
+  data () {
+    return {
+      unitSelect: this.defaultUnit,
+      unitButtonClicked: 0,
+      inputString: '',
+      size: {
+        12: 'flex sm12 xl12 md12 xs12 px-0 mx-0',
+        6: 'flex sm6 xl6 md6 xs6 px-0 mx-0',
+        5: 'flex sm5 xl5 md5 xs5 px-0 mx-0 my-0 py-0',
+        4: 'flex sm4 xl4 md4 xs4 px-0 mx-0 my-0 py-0',
+        3: 'flex sm3 xl3 md3 xs3 px-0 mx-0 my-0 py-0',
+      },
+      style: {
+        header: '',
+        content: '',
+        unitButton: '',
+      },
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    inputChange: function (val, index) {
+      const inputData = [...this.inputValue]
+      const scale = this.unit[this.unitSelect]
+
+      // if change from input field
+      if (typeof (val) === 'string') {
+        if (isNaN(val) || val === '') {
+          return false
+        }
+        val = this.outputRawData(val, scale)
+        if (parseFloat(val) < this.range.min) {
+          val = this.range.min
+        } else if (parseFloat(val) > this.range.max) {
+          val = this.range.max
+        }
+      }
+      inputData[index] = val
+      this.$emit('parameterChange', this.parameterName, inputData)
+      // console.log(this.parameterName, val, typeof (val), this.inputNumber, this.inputString, scale)
+    },
+    unitChange: function () {
+      this.unitButtonClicked += 1
+      this.unitSelect = Object.keys(this.unit)[this.unitButtonClicked % this.unitLength]
+    },
+  },
+  async mounted () {
+    if (this.withHeader === true && this.withUnitButton === true) {
+      this.style.header = this.size[3]
+      this.style.content = this.size[5]
+      this.style.unitButton = this.size[4]
+    } else if (this.withHeader === true) {
+      this.style.header = this.size[6]
+      this.style.content = this.size[6]
+    } else {
+      this.style.content = this.size[12]
+    }
+  },
+  destroyed () {
+  },
+  watch: {
+  },
+}
+</script>

src/components/task/content/parameter/itemNew/PulseSensingNew/EliteParameterRecordingElitePulseSensing.vue

@@ -0,0 +1,162 @@
+<template>
+  <div>
+    <SlickList lockAxis="y" class="long-list" :pressDelay='300' v-model="parameter.segment_order" @sort-end="dragEnd">
+      <SlickItem v-for="(block, i) in parameter.segment_order" :key="i" :index="i">
+        <div v-if="block >= 0">
+          <div class="row flex sm12 xl12 md12 xs12 align--center">
+            <div class="flex sm11 xl11 md11 xs11 px-0 mx-0">
+              <p class="display-6">- Segment {{ i + 1 }} - <p/>
+            </div>
+            <div class="flex sm1 xl1 md1 xs1 px-0 mx-0">
+              <va-button @click="_deleteSegmentBlock(i)" color="danger" style="margin-right: 0;" small> - </va-button>
+            </div>
+          </div>
+          <component
+            v-for="name in parameterTable.MODE[parameter.MODE].parameter"
+            :key="name"
+            :is="parameterTable[name].componentType"
+            :withHeader="true"
+            :withUnitButton="true"
+            :parameterName="name"
+            :inputValue="parameter[name][block]"
+            :index="block"
+            v-bind="parameterTable[name]"
+            @parameterChange="parameterChange"
+            @parameterChangeByIndex="parameterChangeByIndex"
+            @getParameter="getParameter"
+            @sendInstruction="sendInstruction"
+          />
+        </div>
+      </SlickItem>
+    </SlickList>
+    <div style="text-align: center;">
+      <va-button :disabled="parameter.segment_order.indexOf(-1) === -1" @click="_addSegmentBlock">
+        +
+      </va-button>
+    </div>
+
+    <!-- <va-tree-root>
+      <va-tree-category
+        style="font-size: 20px;"
+        :label="'Advanced Setting'">
+        <va-tree-node>
+          <data-output :ref="'DataOutput'" :deviceID="deviceID" :parameterName="'DATA_OUTPUT'" @parameterChange="deviceParameterChange($event)" />
+          <cycle-number :ref="'CycleNumber'" :deviceID="deviceID" :parameterName="'CYCLE_NUMBER'" @parameterChange="deviceParameterChange($event)" />
+        </va-tree-node>
+      </va-tree-category>
+    </va-tree-root> -->
+  </div>
+</template>
+
+<script>
+import { SlickList, SlickItem } from 'vue-slicksort'
+// import _ from 'lodash'
+// import InputRange from '../InputRange'
+// import InputButtonToggle from '../InputButtonToggle'
+import InputRangeSlider from '../InputRangeSlider'
+import InputField from '../InputField'
+import InputDoubleRange from '../InputDoubleRange'
+
+export default {
+  name: 'EliteParameterRecordingElitePulseSensing',
+  components: {
+    SlickList,
+    SlickItem,
+    InputField,
+    InputDoubleRange,
+    InputRangeSlider,
+  },
+  props: {
+    parameter: {
+      type: Object,
+      required: true,
+    },
+    device: {
+      type: Object,
+      default: () => {},
+    },
+    parameterTable: {
+      type: Object,
+    },
+    deviceID: {
+      type: Number,
+    },
+    deviceName: {
+      type: String,
+      default: 'Elite',
+    },
+  },
+  created () {
+  },
+  data () {
+    return {
+      maxSegment: 4,
+      numberList: [...Array(this.maxSegment).keys()],
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    mqttPub: function (topic, mes) {
+      this.$mqtt.publish(topic, mes)
+    },
+    parameterChange: function (name, value, debounce) {
+      this.$emit('parameterChange', name, value, debounce)
+    },
+    parameterChangeByIndex: function (name, value, index, debounce) {
+      const _value = [...this.parameter[name]]
+      _value[index] = value
+      this.$emit('parameterChange', name, _value)
+    },
+    getParameter: function (name) {
+      this.$emit('getParameter', name)
+    },
+    sendInstruction: function (instr) {
+      this.$emit('sendInstruction', instr)
+    },
+    _addSegmentBlock () {
+      for (let i = 0; i < this.maxSegment; i++) {
+        if (this.parameter.segment_order.indexOf(i) === -1) {
+          const _segmentOrder = [...this.parameter.segment_order]
+          const insertIndex = _segmentOrder.indexOf(-1)
+          _segmentOrder[insertIndex] = i
+          this.$emit('parameterChange', 'segment_order', _segmentOrder)
+          return true
+        }
+      }
+    },
+    _deleteSegmentBlock (index) {
+      const _segmentOrder = [...this.parameter.segment_order]
+      _segmentOrder.splice(index, 1)
+      this.$emit('parameterChange', 'segment_order', [..._segmentOrder, -1])
+      return true
+    },
+    dragEnd (event) {
+      // console.log('dragEnd', event)
+      // console.log(this.blockList) // 尚未變換順序前的list
+      // console.log(event)
+      // console.log(event.newIndex)
+      // console.log(event.oldIndex)
+
+      // one-line swap two element of array, ref: https://stackoverflow.com/questions/872310/javascript-swap-array-elements
+      // [this.blockList[event.oldIndex], this.blockList[event.newIndex]] = [this.blockList[event.newIndex], this.blockList[event.oldIndex]]
+      // this.updateSegmentOrderParam()
+    },
+    refresh () {
+    },
+  },
+  mounted () {
+  },
+  watch: {
+  },
+  destroyed () {
+  },
+}
+</script>
+
+<style scoped>
+  .long-list {
+    max-height: 100%;
+    overflow: auto;
+  }
+</style>

src/data/api/collection.js

@@ -79,7 +79,6 @@ async function getAll () {
 }
 
 async function getByParentName (collectionType, parent, name) {
-  console.log(collectionType, parent, name)
   const _header = auth.getHeader()
   try {
     return await api.axios.get(`/api/file/collection/get_by_parent_name/${collectionType}/${parent}/${name}`, { headers: _header })

src/data/api/controller.js

@@ -13,7 +13,6 @@ async function create (_data) {
 
 async function getAll () {
   const _header = auth.getHeader()
-  console.log(_header)
   try {
     return await api.axios.get('/api/controller/get/all', { headers: _header })
   } catch (e) {

src/data/api/task.js

@@ -13,7 +13,6 @@ async function create (_data) {
 
 async function getAll () {
   const _header = auth.getHeader()
-  console.log(_header)
   try {
     return await api.axios.get('/api/task/get/all', { headers: _header })
   } catch (e) {

src/data/param-table/EliteEIS/CyclicVoltammetry.js

@@ -1,6 +1,6 @@
 export default {
   name: 'Cyclic Voltammetry',
-  parameter: ['ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15', 'VOLT_INITIAL', 'VOLT_MAX', 'VOLT_MIN', 'Scan_Rate', 'SAMPLE_RATE', 'CYCLE_NUMBER'], // 這個mode用到的參數
+  parameter: ['VOLT_INITIAL', 'VOLT_MAX', 'VOLT_MIN', 'Scan_Rate', 'SAMPLE_RATE', 'CYCLE_NUMBER', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15'], // 這個mode用到的參數
   showParameter: ['ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15', 'VOLT_INITIAL', 'VOLT_MAX', 'VOLT_MIN', 'Scan_Rate', 'SAMPLE_RATE', 'CYCLE_NUMBER'], // 有要秀給user看的參數
   headerParameter: () => ['VOLT_INITIAL', 'VOLT_MAX', 'VOLT_MIN', 'Scan_Rate', 'SAMPLE_RATE', 'CYCLE_NUMBER', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15'], // 有要秀給user看的參數
   valScales: {

src/data/param-table/EliteEIS/DevMode.js

@@ -1,6 +1,6 @@
 export default {
   name: 'Dev Mode',
-  parameter: [],
+  parameter: ['ADC_VALUE_I'],
   valScales: {
     linear: {
       func: (val) => {

src/data/param-table/EliteEIS/PotentiostaticEIS.js

@@ -1,6 +1,7 @@
 export default {
   name: 'Potentiostatic Electrochemical Impedance Spectroscopy',
-  parameter: ['DC_BIAS', 'AC_AMP', 'FREQ_START', 'FREQ_STOP', 'PPD', 'SCALE', 'DELAY', 'AVERAGE_NUM', 'RTIA'], // 這個mode用到的參數
+  parameter: ['DC_BIAS', 'AC_AMP', 'FREQ', 'PPD', 'SCALE', 'DELAY', 'AVERAGE_NUM', 'RTIA'],
+  // parameter: ['DC_BIAS', 'AC_AMP', 'FREQ_START', 'FREQ_STOP', 'PPD', 'SCALE', 'DELAY', 'AVERAGE_NUM', 'RTIA'], // 這個mode用到的參數
   showParameter: ['DC_BIAS', 'AC_AMP', 'FREQ_START', 'FREQ_STOP', 'PPD', 'SCALE', 'DELAY', 'AVERAGE_NUM', 'RTIA'], // 有要秀給user看的參數
   headerParameter: () => ['DC_BIAS', 'AC_AMP', 'FREQ_START', 'FREQ_STOP', 'PPD', 'SCALE', 'DELAY', 'AVERAGE_NUM', 'RTIA'], // 有要秀給user看的參數
   valScales: {

src/data/param-table/EliteEIS/index.js

@@ -3,15 +3,39 @@ import CyclicVoltammetry from './CyclicVoltammetry'
 import DevMode from './DevMode'
 
 const EliteEIS = {
+  ADC_VALUE_I: {
+    type: 'none',
+    showName: 'Instruction',
+    componentType: 'dev-mode',
+  },
   DC_BIAS: {
     type: 'number',
     showName: 'DC Volt',
-    range: Object.freeze({ min: 0, max: 2200 }), // UI上能輸入的最大最小值
-    func: (val) => {
-      return Math.round((parseInt(val) * 4095) / 2200)
+    componentType: 'input-field',
+    range: Object.freeze({ min: 2500, max: 50000 }), // UI上能輸入的最大最小值
+    outputRawData: (val, scale = 1) => {
+      return Math.round((parseInt(val) * 12.5 * scale) + 25000)
     },
-    rev_func: (val) => {
-      return Math.round((parseInt(val) * 2200) / 4095)
+    outputReadabilityData: (val, scale = 1) => {
+      return Math.round(parseInt(val - 25000) / 12.5) / scale
+    },
+    defaultUnit: 'mV',
+    downloadUnit: 'mV',
+    unit: {
+      mV: 1,
+      V: 1e3,
+    },
+  },
+  AC_AMP: {
+    type: 'number',
+    showName: 'AC Amp',
+    componentType: 'input-field',
+    range: Object.freeze({ min: 0, max: 2047 }),
+    outputRawData: (val, scale = 1) => {
+      return Math.round(parseInt(val * scale) / 800 * 2047)
+    },
+    outputReadabilityData: (val, scale = 1) => {
+      return Math.round(parseInt(val) / 2047 * 800) / scale
     },
     defaultUnit: 'mV',
     downloadUnit: 'mV',
@@ -19,30 +43,31 @@ const EliteEIS = {
       mV: 1,
     },
   },
-  AC_AMP: {
-    type: 'number',
-    showName: 'AC Amp',
-    range: Object.freeze({ min: 0, max: 800 }),
-    func: (val) => {
-      return Math.round(parseInt(val) / 800 * 2047)
+  FREQ: {
+    type: 'array',
+    showName: 'Frequency',
+    componentType: 'multi-input-field',
+    range: Object.freeze({ min: 1, max: 4294967296 }),
+    outputRawData: (val) => {
+      return parseFloat(val) < 0.1 ? 1 : Math.round(parseFloat(val) / 0.0149)
     },
-    rev_func: (val) => {
-      return Math.round(parseInt(val) / 2047 * 800)
+    outputReadabilityData: (val) => {
+      return String(parseFloat(Math.round(parseFloat((val * 0.0149) * 100)) / 100).toFixed(1)) === '0.0' ? 0.015 : parseFloat(Math.round(parseFloat((val * 0.0149) * 100)) / 100).toFixed(1)
     },
-    defaultUnit: 'mV',
-    downloadUnit: 'mV',
+    defaultUnit: 'Hz',
+    downloadUnit: 'Hz',
     unit: {
-      mV: 1,
+      Hz: 1,
     },
   },
   FREQ_START: {
     type: 'number',
     showName: 'Freq max',
     range: Object.freeze({ min: 0.015, max: 200000 }),
-    func: (val) => {
+    outputRawData: (val) => {
       return parseFloat(val) < 0.1 ? 1 : Math.round(parseFloat(val) / 0.0149)
     },
-    rev_func: (val) => {
+    outputReadabilityData: (val) => {
       return String(parseFloat(Math.round(parseFloat((val * 0.0149) * 100)) / 100).toFixed(1)) === '0.0' ? 0.015 : parseFloat(Math.round(parseFloat((val * 0.0149) * 100)) / 100).toFixed(1)
     },
     defaultUnit: 'Hz',
@@ -55,10 +80,10 @@ const EliteEIS = {
     type: 'number',
     showName: 'Freq min',
     range: Object.freeze({ min: 0.015, max: 200000 }),
-    func: (val) => {
+    outputRawData: (val) => {
       return parseFloat(val) < 0.1 ? 1 : Math.round(parseFloat(val) / 0.0149)
     },
-    rev_func: (val) => {
+    outputReadabilityData: (val) => {
       return String(parseFloat(Math.round(parseFloat((val * 0.0149) * 100)) / 100).toFixed(1)) === '0.0' ? 0.015 : parseFloat(Math.round(parseFloat((val * 0.0149) * 100)) / 100).toFixed(1)
     },
     defaultUnit: 'Hz',
@@ -70,14 +95,14 @@ const EliteEIS = {
   PPD: {
     type: 'number',
     showName: 'Points per decades',
+    componentType: 'input-field',
     range: Object.freeze({ min: 1, max: 10 }),
-    func: (val) => {
+    outputRawData: (val) => {
       return parseInt(val)
     },
-    rev_func: (val) => {
+    outputReadabilityData: (val) => {
       return parseInt(val)
     },
-
     defaultUnit: 'points',
     downloadUnit: null,
     unit: {
@@ -87,12 +112,17 @@ const EliteEIS = {
   SCALE: {
     type: 'array',
     showName: 'Point spacing',
+    componentType: 'input-button-toggle',
+    options: [
+      { value: 0, label: 'Logarithm' },
+      { value: 1, label: 'Linear' },
+    ],
     range: ['Logarithm', 'Linear'],
-    func: (val) => {
+    outputRawData: (val) => {
       const scaleArr = ['Logarithm', 'Linear']
       return scaleArr.indexOf(val.toString())
     },
-    rev_func: (idx) => {
+    outputReadabilityData: (idx) => {
       const scaleArr = ['Logarithm', 'Linear']
       return scaleArr[parseInt(idx)]
     },
@@ -100,11 +130,12 @@ const EliteEIS = {
   DELAY: {
     type: 'number',
     showName: 'DELAY',
-    range: Object.freeze({ min: 0.1, max: 10 }),
-    func: (val) => {
+    componentType: 'input-field',
+    range: Object.freeze({ min: 1, max: 100 }),
+    outputRawData: (val) => {
       return parseInt(parseFloat(val) * 10)
     },
-    rev_func: (val) => {
+    outputReadabilityData: (val) => {
       return parseFloat((val / 10)).toFixed(1)
     },
     defaultUnit: 'points',
@@ -116,12 +147,19 @@ const EliteEIS = {
   AVERAGE_NUM: {
     type: 'array',
     showName: 'Average',
+    componentType: 'input-button-toggle',
+    options: [
+      { value: 0, label: '2' },
+      { value: 1, label: '4' },
+      { value: 2, label: '6' },
+      { value: 3, label: '8' },
+    ],
     range: ['2', '4', '6', '8'],
-    func: (val) => {
+    outputRawData: (val) => {
       const numArr = ['2', '4', '6', '8']
       return numArr.indexOf(val.toString())
     },
-    rev_func: (idx) => {
+    outputReadabilityData: (idx) => {
       const numArr = ['2', '4', '6', '8']
       return numArr[parseInt(idx)]
     },
@@ -129,12 +167,20 @@ const EliteEIS = {
   RTIA: {
     type: 'array',
     showName: 'Current range',
+    componentType: 'input-button-toggle',
+    options: [
+      { value: 0, label: '1' },
+      { value: 1, label: '2' },
+      { value: 2, label: '3' },
+      { value: 3, label: '4' },
+      { value: 4, label: 'Auto' },
+    ],
     range: ['1', '2', '3', '4', 'Auto'],
-    func: (val) => {
+    outputRawData: (val) => {
       const numArr = ['1', '2', '3', '4', 'Auto']
       return numArr.indexOf(val.toString())
     },
-    rev_func: (idx) => {
+    outputReadabilityData: (idx) => {
       const numArr = ['1', '2', '3', '4', 'Auto']
       return numArr[parseInt(idx)]
     },
@@ -142,25 +188,40 @@ const EliteEIS = {
   ADC_LEVEL_I_15: {
     type: 'array',
     showName: 'Current Range',
-    range: ['<1.5 μA', '1-60 μA', '40-175 μA', '>120 uA', 'Auto'],
-    func: (val) => {
-      const currentRangeArr = ['<1.5 μA', '1-60 μA', '40-175 μA', '>120 uA', 'Auto']
+    componentType: 'input-button-toggle',
+    options: [
+      { value: 0, label: '<1.5 uA' },
+      { value: 1, label: '1-60 uA' },
+      { value: 2, label: '40-175 uA' },
+      { value: 3, label: '>120 uA' },
+      { value: 4, label: 'Auto' },
+    ],
+    range: ['<1.5 uA', '1-60 uA', '40-175 uA', '>120 uA', 'Auto'],
+    outputRawData: (val) => {
+      const currentRangeArr = ['<1.5 uA', '1-60 uA', '40-175 uA', '>120 uA', 'Auto']
       return currentRangeArr.indexOf(val.toString())
     },
-    rev_func: (idx) => {
-      const currentRangeArr = ['<1.5 μA', '1-60 μA', '40-175 μA', '>120 uA', 'Auto']
+    outputReadabilityData: (idx) => {
+      const currentRangeArr = ['<1.5 uA', '1-60 uA', '40-175 uA', '>120 uA', 'Auto']
       return currentRangeArr[parseInt(idx)]
     },
   },
   ADC_LEVEL_V_IN_15: {
     type: 'array',
     showName: 'Voltage Range',
+    componentType: 'input-button-toggle',
+    options: [
+      { value: 0, label: '1' },
+      { value: 1, label: '2' },
+      { value: 2, label: '3' },
+      { value: 3, label: 'Auto' },
+    ],
     range: ['1', '2', '3', 'Auto'],
-    func: (val) => {
+    outputRawData: (val) => {
       const voltageInRangeArr = ['1', '2', '3', 'Auto']
       return voltageInRangeArr.indexOf(val.toString())
     },
-    rev_func: (idx) => {
+    outputReadabilityData: (idx) => {
       const voltageInRangeArr = ['1', '2', '3', 'Auto']
       return voltageInRangeArr[parseInt(idx)]
     },
@@ -168,12 +229,17 @@ const EliteEIS = {
   CTRL_HIGH_Z_15: {
     type: 'array',
     showName: 'HighZ',
+    componentType: 'input-button-toggle',
+    options: [
+      { value: 0, label: 'On' },
+      { value: 1, label: 'Off' },
+    ],
     range: ['On', 'Off'],
-    func: (val) => {
+    outputRawData: (val) => {
       const highzArr = ['On', 'Off']
       return highzArr.indexOf(val.toString())
     },
-    rev_func: (idx) => {
+    outputReadabilityData: (idx) => {
       const highzArr = ['On', 'Off']
       return highzArr[parseInt(idx)]
     },
@@ -181,59 +247,66 @@ const EliteEIS = {
   VOLT_INITIAL: {
     type: 'number',
     showName: 'E-Initial',
-    range: Object.freeze({ min: -1.8, max: 2 }),
-    func: (val) => {
-      return parseInt(parseFloat(val) * 1000 * 5 + 25000)
+    componentType: 'input-range',
+    range: Object.freeze({ min: 2500, max: 50000 }),
+    outputRawData: (val, scale = 1) => {
+      return parseInt(parseFloat(val) * scale * 12.5 + 25000)
     },
-    rev_func: (val) => {
-      return parseInt((parseFloat(val) - 25000) / 5) / 1000
+    outputReadabilityData: (val, scale = 1) => {
+      return parseInt((parseFloat(val) - 25000) / 12.5) / scale
     },
     defaultUnit: 'V',
     downloadUnit: 'mV',
     unit: {
-      V: 1,
+      mV: 1,
+      V: 1e3,
     },
   },
   VOLT_MAX: {
     type: 'number',
     showName: 'E1',
-    range: Object.freeze({ min: -1.8, max: 2 }),
-    func: (val) => {
-      return parseInt(parseFloat(val) * 1000 * 5 + 25000)
+    componentType: 'input-range',
+    range: Object.freeze({ min: 2500, max: 50000 }),
+    outputRawData: (val, scale = 1) => {
+      return parseInt(parseFloat(val) * scale * 12.5 + 25000)
     },
-    rev_func: (val) => {
-      return parseInt((parseFloat(val) - 25000) / 5) / 1000
+    outputReadabilityData: (val, scale = 1) => {
+      return parseInt((parseFloat(val) - 25000) / 12.5) / scale
     },
     defaultUnit: 'V',
     downloadUnit: 'mV',
     unit: {
-      V: 1,
+      mV: 1,
+      V: 1e3,
     },
   },
   VOLT_MIN: {
     type: 'number',
     showName: 'E2',
-    range: Object.freeze({ min: -1.8, max: 2 }),
-    func: (val) => {
-      return parseInt(parseFloat(val) * 1000 * 5 + 25000)
+    componentType: 'input-range',
+    range: Object.freeze({ min: 2500, max: 50000 }),
+    outputRawData: (val, scale = 1) => {
+      return parseInt(parseFloat(val) * scale * 12.5 + 25000)
     },
-    rev_func: (val) => {
-      return parseInt((parseFloat(val) - 25000) / 5) / 1000
+    outputReadabilityData: (val, scale = 1) => {
+      return parseInt((parseFloat(val) - 25000) / 12.5) / scale
     },
     defaultUnit: 'V',
     downloadUnit: 'mV',
     unit: {
-      V: 1,
+      mV: 1,
+      V: 1e3,
     },
   },
   Scan_Rate: {
     type: 'number',
     showName: 'ScanRate',
-    range: Object.freeze({ min: 0.01, max: 1000 }),
-    func: (val) => {
+    componentType: 'input-range',
+    range: Object.freeze({ min: 1, max: 100000 }),
+    outputRawData: (val) => {
       return parseInt(parseFloat(val) * 100)
     },
-    rev_func: (val) => {
+    outputReadabilityData: (val) => {
       return parseFloat(val) / 100
     },
     defaultUnit: 'mV/s',
@@ -245,11 +318,12 @@ const EliteEIS = {
   SAMPLE_RATE: {
     type: 'number',
     showName: 'Sample rate',
-    range: Object.freeze({ min: 0.1, max: 100 }),
-    func: (val) => {
+    componentType: 'input-range',
+    range: Object.freeze({ min: 1, max: 1000 }),
+    outputRawData: (val, scale = 1) => {
       return parseInt(parseFloat(val) * 10)
     },
-    rev_func: (val) => {
+    outputReadabilityData: (val, scale = 1) => {
       return parseFloat(val) / 10
     },
     defaultUnit: 'sps',
@@ -261,11 +335,12 @@ const EliteEIS = {
   CYCLE_NUMBER: {
     type: 'number',
     showName: 'Cycle',
+    componentType: 'input-range',
     range: Object.freeze({ min: 1, max: 50000 }),
-    func: (val) => {
+    outputRawData: (val) => {
       return parseInt(val)
     },
-    rev_func: (val) => {
+    outputReadabilityData: (val) => {
       return parseInt(val)
     },
     defaultUnit: 'cycle',
@@ -275,6 +350,20 @@ const EliteEIS = {
     },
   },
 
+  MODE_OPTIONS: [
+    {
+      id: 0,
+      description: 'Potentiostatic Electrochemical Impedance Spectroscopy',
+    },
+    {
+      id: 1,
+      description: 'CV',
+    },
+    {
+      id: 2,
+      description: 'Dev Tools',
+    },
+  ],
   MODE: {
     0: PotentiostaticEIS,
     1: CyclicVoltammetry,

src/data/param-table/EliteZM15/CaliADC.js

@@ -1,7 +1,7 @@
 export default {
   name: 'Cali ADC - test',
-  parameter: ['ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'ADC_DAC_CHANNEL_15'], // 這個mode用到的參數
-  showParameter: ['ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'ADC_DAC_CHANNEL_15'], // 有要秀給user看的參數
+  parameter: ['DAC_VOLT', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'ADC_DAC_CHANNEL_15'], // 這個mode用到的參數
+  showParameter: ['DAC_VOLT', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'ADC_DAC_CHANNEL_15'], // 有要秀給user看的參數
   valScales: {
     linear: {
       func: (val) => {

src/data/param-table/EliteZM15/Chronoamperometry.js

@@ -1,6 +1,6 @@
 export default {
   name: 'Chronoamperometric',
-  parameter: ['ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15', 'VOLT_VSCAN', 'SAMPLE_RATE'], // 這個mode用到的參數
+  parameter: ['VOLT_VSCAN', 'SAMPLE_RATE', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15', 'TIME_DURATION'], // 這個mode用到的參數
   showParameter: ['ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15', 'VOLT_VSCAN', 'SAMPLE_RATE'], // 有要秀給user看的參數
   headerParameter: () => ['VOLT_VSCAN', 'SAMPLE_RATE', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15'], // 有要秀給user看的參數
   valScales: {

src/data/param-table/EliteZM15/Chronopotentiometry.js

@@ -1,8 +1,8 @@
 export default {
   name: 'Chronopotentiometry',
-  parameter: ['ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15', 'SAMPLE_RATE', 'Charge', 'Const_Current_value', 'VOLTSTOP_MAX', 'VOLTSTOP_MIN'], // 這個mode用到的參數
+  parameter: ['Charge', 'Const_Current_value', 'SAMPLE_RATE', 'VOLTSTOP_MAX', 'VOLTSTOP_MIN', 'CC_CP_SPEED', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'TIME_DURATION'], // 這個mode用到的參數
   showParameter: ['ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15', 'SAMPLE_RATE', 'Charge', 'Const_Current_value', 'VOLTSTOP_MAX', 'VOLTSTOP_MIN'], // 有要秀給user看的參數
-  headerParameter: () => ['Charge', 'Const_Current_value', 'SAMPLE_RATE', 'VOLTSTOP_MAX', 'VOLTSTOP_MIN', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15'], // 有要秀給user看的參數
+  headerParameter: () => ['Charge', 'Const_Current_value', 'SAMPLE_RATE', 'VOLTSTOP_MAX', 'VOLTSTOP_MIN', 'CC_CP_SPEED', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15'], // 有要秀給user看的參數
   valScales: {
     linear: {
       func: (val) => {
@@ -27,6 +27,7 @@ export default {
         auto: 1,
       },
       defaultUnit: 'auto',
+      downloadUnit: 'ms',
     },
     0: {
       name: 'I_in',

src/data/param-table/EliteZM15/ConstantCurrent.js

@@ -1,8 +1,8 @@
 export default {
   name: 'Constant Current',
-  parameter: ['ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15', 'SAMPLE_RATE', 'Charge', 'Const_Current_value', 'VOLTSTOP_MAX', 'VOLTSTOP_MIN'], // 這個mode用到的參數
+  parameter: ['Charge', 'Const_Current_value', 'SAMPLE_RATE', 'VOLTSTOP_MAX', 'VOLTSTOP_MIN', 'CC_CP_SPEED', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'TIME_DURATION'], // 這個mode用到的參數
   showParameter: ['ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15', 'SAMPLE_RATE', 'Charge', 'Const_Current_value', 'VOLTSTOP_MAX', 'VOLTSTOP_MIN'], // 有要秀給user看的參數
-  headerParameter: () => ['Charge', 'Const_Current_value', 'SAMPLE_RATE', 'VOLTSTOP_MAX', 'VOLTSTOP_MIN', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15'], // 有要秀給user看的參數
+  headerParameter: () => ['Charge', 'Const_Current_value', 'SAMPLE_RATE', 'VOLTSTOP_MAX', 'VOLTSTOP_MIN', 'CC_CP_SPEED', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15'], // 有要秀給user看的參數
   valScales: {
     linear: {
       func: (val) => {

src/data/param-table/EliteZM15/CycleIV.js

@@ -1,6 +1,6 @@
 export default {
   name: 'Cycle I-V',
-  parameter: ['ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15', 'VOLT_ORIGIN', 'VOLT_FINAL', 'VOLT_STEP', 'STEP_TIME', 'SAMPLE_RATE', 'CYCLE_NUMBER'], // 這個mode用到的參數
+  parameter: ['VOLT_ORIGIN', 'VOLT_FINAL', 'VOLT_STEP', 'STEP_TIME', 'SAMPLE_RATE', 'CYCLE_NUMBER', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15'], // 這個mode用到的參數
   showParameter: ['ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15', 'VOLT_ORIGIN', 'VOLT_FINAL', 'VOLT_STEP', 'STEP_TIME', 'SAMPLE_RATE', 'CYCLE_NUMBER'], // 有要秀給user看的參數
   headerParameter: () => ['VOLT_ORIGIN', 'VOLT_FINAL', 'VOLT_STEP', 'STEP_TIME', 'SAMPLE_RATE', 'CYCLE_NUMBER', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15'], // export header的參數
   valScales: {

src/data/param-table/EliteZM15/CyclicVoltammetry.js

@@ -1,6 +1,6 @@
 export default {
   name: 'Cyclic Voltammetry',
-  parameter: ['ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15', 'VOLT_INITIAL', 'VOLT_MAX', 'VOLT_MIN', 'Scan_Rate', 'SAMPLE_RATE', 'CYCLE_NUMBER'], // 這個mode用到的參數
+  parameter: ['VOLT_INITIAL', 'VOLT_MAX', 'VOLT_MIN', 'Scan_Rate', 'SAMPLE_RATE', 'CYCLE_NUMBER', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15'], // 這個mode用到的參數
   showParameter: ['ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15', 'VOLT_INITIAL', 'VOLT_MAX', 'VOLT_MIN', 'Scan_Rate', 'SAMPLE_RATE', 'CYCLE_NUMBER'], // 有要秀給user看的參數
   headerParameter: () => ['VOLT_INITIAL', 'VOLT_MAX', 'VOLT_MIN', 'Scan_Rate', 'SAMPLE_RATE', 'CYCLE_NUMBER', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15'], // 有要秀給user看的參數
   valScales: {

src/data/param-table/EliteZM15/DPV.js

@@ -1,6 +1,11 @@
 export default {
   name: 'Differential Pulse Voltammetry',
-  parameter: [], // 這個mode用到的參數
+  parameter: ['DPV_e_init', 'DPV_e_final', 'DPV_increment', 'DPV_amp', 'DPV_pul_width', 'DPV_step_time'], // 這個mode用到的參數
+  parameterInMode: {
+    0: ['DPV_e_init', 'DPV_e_final', 'DPV_increment', 'DPV_amp', 'DPV_pul_width', 'DPV_step_time'],
+    1: ['DPV_e_init', 'DPV_e_1', 'DPV_e_2', 'DPV_e_final', 'DPV_increment', 'DPV_amp', 'DPV_pul_width', 'DPV_step_time', 'CYCLE_NUMBER', 'DPV_pulse_option', 'DPV_curr_rec'],
+    2: ['DPV_e_init', 'DPV_e_final', 'DPV_increment', 'DPV_amp', 'DPV_pul_width', 'DPV_step_time', 'CYCLE_NUMBER', 'DPV_notify_rate', 'DPV_engineering_enable', 'DPV_e_1', 'DPV_e_2', 'DPV_pulse_option'],
+  }, // 這個mode用到的參數
   showParameter: [], // 有要秀給user看的參數
   headerParameter: () => [], // export header的參數
   valScales: {

src/data/param-table/EliteZM15/DevMode.js

@@ -1,6 +1,6 @@
 export default {
   name: 'Dev Mode',
-  parameter: [],
+  parameter: ['ADC_VALUE_I'],
   valScales: {
     linear: {
       func: (val) => {

src/data/param-table/EliteZM15/FunctionGenerator.js

@@ -1,6 +1,6 @@
 export default {
   name: 'Function Generator',
-  parameter: ['ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15', 'DAC_VOLT', 'SAMPLE_RATE'], // 這個mode用到的參數
+  parameter: ['DAC_VOLT', 'SAMPLE_RATE', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15', 'TIME_DURATION'], // 這個mode用到的參數
   showParameter: ['ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15', 'DAC_VOLT', 'SAMPLE_RATE'], // 有要秀給user看的參數
   headerParameter: () => ['DAC_VOLT', 'SAMPLE_RATE', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15'], // export header的參數
   valScales: {

src/data/param-table/EliteZM15/IT.js

@@ -1,6 +1,6 @@
 export default {
   name: 'I-T Graph',
-  parameter: ['ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15', 'DAC_VOLT', 'SAMPLE_RATE'], // 這個mode用到的參數
+  parameter: ['DAC_VOLT', 'SAMPLE_RATE', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15', 'TIME_DURATION'], // 這個mode用到的參數
   showParameter: ['ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15', 'DAC_VOLT', 'SAMPLE_RATE'], // 有要秀給user看的參數
   headerParameter: () => ['DAC_VOLT', 'SAMPLE_RATE', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15'], // export header的參數
   valScales: {

src/data/param-table/EliteZM15/IV.js

@@ -1,6 +1,6 @@
 export default {
   name: 'I-V Curve',
-  parameter: ['ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15', 'VOLT_ORIGIN', 'VOLT_FINAL', 'VOLT_STEP', 'STEP_TIME', 'SAMPLE_RATE'], // 這個mode用到的參數
+  parameter: ['VOLT_ORIGIN', 'VOLT_FINAL', 'VOLT_STEP', 'STEP_TIME', 'SAMPLE_RATE', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15'], // 這個mode用到的參數
   showParameter: ['ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15', 'VOLT_ORIGIN', 'VOLT_FINAL', 'VOLT_STEP', 'STEP_TIME', 'SAMPLE_RATE'], // 有要秀給user看的參數
   headerParameter: () => ['VOLT_ORIGIN', 'VOLT_FINAL', 'VOLT_STEP', 'STEP_TIME', 'SAMPLE_RATE', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15'], // export header的參數
   valScales: {

src/data/param-table/EliteZM15/LinearSweep.js

@@ -1,6 +1,6 @@
 export default {
   name: 'Linear Sweep Voltammetry',
-  parameter: ['ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15', 'VOLT_INITIAL', 'VOLT_EFINAL', 'Scan_Rate', 'SAMPLE_RATE'], // 這個mode用到的參數
+  parameter: ['VOLT_INITIAL', 'VOLT_EFINAL', 'Scan_Rate', 'SAMPLE_RATE', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15'], // 這個mode用到的參數
   showParameter: ['ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15', 'VOLT_INITIAL', 'VOLT_EFINAL', 'Scan_Rate', 'SAMPLE_RATE'], // 有要秀給user看的參數
   headerParameter: () => ['VOLT_INITIAL', 'VOLT_EFINAL', 'Scan_Rate', 'SAMPLE_RATE', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15'], // 有要秀給user看的參數
   valScales: {

src/data/param-table/EliteZM15/OCP.js

@@ -1,6 +1,6 @@
 export default {
   name: 'Open Circuit Potential',
-  parameter: ['ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'SAMPLE_RATE'], // 這個mode用到的參數
+  parameter: ['SAMPLE_RATE', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'TIME_DURATION'], // 這個mode用到的參數
   showParameter: ['ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'SAMPLE_RATE'], // 有要秀給user看的參數
   headerParameter: () => ['SAMPLE_RATE', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15'], // export header的參數
   valScales: {

src/data/param-table/EliteZM15/PulseSensing.js

@@ -1,7 +1,8 @@
 export default {
   name: 'Pulse Sensing',
-  parameter: ['V_initial', 't_pulse', 'CURR_REC_START', 'CURR_REC_END', 'segment_ui_order', 'segment_order', 'DATA_OUTPUT', 'CYCLE_NUMBER'], // 這個mode用到的參數
-  showParameter: ['V_initial', 't_pulse', 'CURR_REC_START', 'CURR_REC_END', 'DATA_OUTPUT', 'CYCLE_NUMBER'], // 有要秀給user看的參數
+  parameter: ['V_initial', 't_pulse', 'CURR_REC'],
+  // parameter: ['V_initial', 't_pulse', 'CURR_REC_START', 'CURR_REC_END', 'segment_ui_order', 'segment_order', 'DATA_OUTPUT', 'CYCLE_NUMBER'], // 這個mode用到的參數
+  showParameter: ['V_initial', 't_pulse', 'CURR_REC'], // 有要秀給user看的參數
   headerParameter: (parameterSet) => {
     // [
     //   'V_initial_0', 't_pulse_0', 'CURR_REC_START_0', 'CURR_REC_END_0',
@@ -9,11 +10,11 @@ export default {
     //   'V_initial_2', 't_pulse_2', 'CURR_REC_START_2', 'CURR_REC_END_2',
     //   'V_initial_3', 't_pulse_3', 'CURR_REC_START_3', 'CURR_REC_END_3',
     // ]
-    const defaultParameter = ['V_initial', 't_pulse', 'CURR_REC_START', 'CURR_REC_END']
+    const defaultParameter = ['V_initial', 't_pulse', 'CURR_REC']
     const ret = []
     for (let index = 0; index < 4; index++) {
-      if (parameterSet[`${defaultParameter[0]}_${index}`] !== 25000) {
-        ret.push(...defaultParameter.map(ele => ele + '_' + index))
+      if (parameterSet.segment_order[index] !== -1) {
+        ret.push(...defaultParameter.map(ele => [ele, index]))
       }
     }
     return ret

src/data/param-table/EliteZM15/RT.js

@@ -1,6 +1,6 @@
 export default {
   name: 'R-T Graph',
-  parameter: ['CTRL_HIGH_Z_15', 'DAC_VOLT', 'SAMPLE_RATE'], // 這個mode用到的參數
+  parameter: ['DAC_VOLT', 'SAMPLE_RATE', 'CTRL_HIGH_Z_15', 'TIME_DURATION'], // 這個mode用到的參數
   showParameter: ['CTRL_HIGH_Z_15', 'DAC_VOLT', 'SAMPLE_RATE'], // 有要秀給user看的參數
   headerParameter: () => ['DAC_VOLT', 'SAMPLE_RATE', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15'], // export header的參數
   valScales: {

src/data/param-table/EliteZM15/VT.js

@@ -1,6 +1,6 @@
 export default {
   name: 'V-T Graph',
-  parameter: ['ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15', 'SAMPLE_RATE'], // 這個mode用到的參數
+  parameter: ['SAMPLE_RATE', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15', 'TIME_DURATION'], // 這個mode用到的參數
   showParameter: ['ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15', 'SAMPLE_RATE'], // 有要秀給user看的參數
   headerParameter: () => ['SAMPLE_RATE', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15'], // export header的參數
   valScales: {

src/data/param-table/EliteZM15/index.js

@@ -7,7 +7,7 @@ import IT from './IT'
 import ConstantCurrent from './ConstantCurrent'
 import CyclicVoltammetry from './CyclicVoltammetry'
 import LinearSweep from './LinearSweep'
-import Chronoamperometric from './Chronoamperometric'
+import Chronoamperometry from './Chronoamperometry'
 import Chronopotentiometry from './Chronopotentiometry'
 import CaliDAC from './CaliDAC'
 import CaliADC from './CaliADC'
@@ -17,14 +17,20 @@ import PulseSensing from './PulseSensing'
 import DPV from './DPV'
 
 const EliteZM15 = {
+  ADC_VALUE_I: {
+    type: 'none',
+    showName: 'Instruction',
+    componentType: 'dev-mode',
+  },
   TIME_DURATION: {
     type: 'number',
-    showName: 'How long',
+    showName: 'Time duration',
+    componentType: 'input-range',
     range: Object.freeze({ min: 0, max: 86400 }), // UI上能輸入的最大最小值
-    func: (val) => {
+    outputRawData: (val) => {
       return parseInt(parseFloat(val))
     },
-    rev_func: (val) => {
+    outputReadabilityData: (val) => {
       return parseInt(parseFloat(val))
     },
     defaultUnit: 's',
@@ -35,43 +41,43 @@ const EliteZM15 = {
       m: 60,
       h: 3600,
     },
-    component: {
-      parameterName: 'TIME_DURATION',
-      minValue: 0,
-      maxValue: 86400,
-      ref: 'time_duration_ref',
-      inputChange: function (val) {
-        console.log('inputChange')
-        this.inputKey++
-        if (this.inputNumber == null) {
-          return false
-        }
-        if (isNaN(val) || parseInt(val) > this.maxValue || parseInt(val) < this.minValue) {
-          this.inputNumber = this.minValue
-          this.inputString = String(this.minValue)
-          return false
-        }
-        if (this.inputString !== this.inputNumber || this.inputNumber !== val) {
-          this.inputString = String(val)
-          this.inputNumber = parseInt(val)
-        }
-        this.$emit('parameterChange', [this.parameterName, this.inputNumber])
-      },
-      updateChange: function (val) {
-        console.log('update Change')
-        this.inputChange(val)
-      },
+  },
+  CC_CP_SPEED: {
+    type: 'array',
+    showName: 'Response speed',
+    componentType: 'input-button-toggle',
+    options: [
+      { value: 0, label: 'Slow' },
+      { value: 1, label: 'Normal' },
+      { value: 2, label: 'Fast' },
+    ],
+    range: ['Slow', 'Normal', 'Fast'],
+    outputRawData: (val) => {
+      const speedArr = ['Slow', 'Normal', 'Fast']
+      return speedArr.indexOf(val.toString())
+    },
+    outputReadabilityData: (idx) => {
+      const speedArr = ['Slow', 'Normal', 'Fast']
+      return speedArr[parseInt(idx)]
     },
   },
   ADC_LEVEL_I_15: {
     type: 'array',
     showName: 'Current range',
+    componentType: 'input-button-toggle',
+    options: [
+      { value: 0, label: '<4 μA' },
+      { value: 1, label: '2.5-100 μA' },
+      { value: 2, label: '85-2050 μA' },
+      { value: 3, label: '1800 uA' },
+      { value: 4, label: 'Auto' },
+    ],
     range: ['<4 μA', '2.5-100 μA', '85-2050 μA', '1800 uA', 'Auto'],
-    func: (val) => {
+    outputRawData: (val) => {
       const currentRangeArr = ['<4 μA', '2.5-100 μA', '85-2050 μA', '1800 uA', 'Auto']
       return currentRangeArr.indexOf(val.toString())
     },
-    rev_func: (idx) => {
+    outputReadabilityData: (idx) => {
       const currentRangeArr = ['<4 μA', '2.5-100 μA', '85-2050 μA', '1800 uA', 'Auto']
       return currentRangeArr[parseInt(idx)]
     },
@@ -79,12 +85,19 @@ const EliteZM15 = {
   ADC_LEVEL_V_IN_15: {
     type: 'array',
     showName: 'Voltage range',
+    componentType: 'input-button-toggle',
+    options: [
+      { value: 0, label: '<7 mV' },
+      { value: 1, label: '5-300 mV' },
+      { value: 2, label: '>250 mV' },
+      { value: 3, label: 'Auto' },
+    ],
     range: ['<7 mV', '5-300 mV', '>250 mV', 'Auto'],
-    func: (val) => {
+    outputRawData: (val) => {
       const voltageInRangeArr = ['<7 mV', '5-300 mV', '>250 mV', 'Auto']
       return voltageInRangeArr.indexOf(val.toString())
     },
-    rev_func: (idx) => {
+    outputReadabilityData: (idx) => {
       const voltageInRangeArr = ['<7 mV', '5-300 mV', '>250 mV', 'Auto']
       return voltageInRangeArr[parseInt(idx)]
     },
@@ -92,12 +105,17 @@ const EliteZM15 = {
   CTRL_HIGH_Z_15: {
     type: 'array',
     showName: 'HighZ',
+    componentType: 'input-button-toggle',
+    options: [
+      { value: 0, label: 'On' },
+      { value: 1, label: 'Off' },
+    ],
     range: ['On', 'Off'],
-    func: (val) => {
+    outputRawData: (val) => {
       const highzArr = ['On', 'Off']
       return highzArr.indexOf(val.toString())
     },
-    rev_func: (idx) => {
+    outputReadabilityData: (idx) => {
       const highzArr = ['On', 'Off']
       return highzArr[parseInt(idx)]
     },
@@ -105,12 +123,17 @@ const EliteZM15 = {
   ADC_DAC_CHANNEL_15: {
     type: 'array',
     showName: 'Cali Channel',
+    componentType: 'input-button-toggle',
+    options: [
+      { value: 0, label: 'Iin' },
+      { value: 1, label: 'Vin' },
+    ],
     range: ['Iin', 'Vin'],
-    func: (val) => {
+    outputRawData: (val) => {
       const caliChannelArr = ['Iin', 'Vin']
       return caliChannelArr.indexOf(val.toString())
     },
-    rev_func: (idx) => {
+    outputReadabilityData: (idx) => {
       const caliChannelArr = ['Iin', 'Vin']
       return caliChannelArr[parseInt(idx)]
     },
@@ -118,47 +141,52 @@ const EliteZM15 = {
   VOLT_ORIGIN: {
     type: 'number',
     showName: 'Volt start',
-    range: Object.freeze({ min: -5, max: 5 }), // UI上能輸入的最大最小值
-    func: (val) => {
-      return parseInt(parseFloat(val) * 1000 * 5 + 25000)
+    componentType: 'input-range',
+    range: Object.freeze({ min: 0, max: 50000 }), // UI上能輸入的最大最小值
+    outputRawData: (val, scale = 1) => {
+      return parseInt(parseFloat(val) * scale * 5 + 25000)
     },
-    rev_func: (val) => {
-      return parseInt((parseFloat(val) - 25000) / 5) / 1000
+    outputReadabilityData: (val, scale = 1) => {
+      return parseInt((parseFloat(val) - 25000) / 5) / scale
     },
     downloadUnit: 'mV',
     defaultUnit: 'V',
     unit: {
-      V: 1,
+      mV: 1,
+      V: 1e3,
     },
   },
   VOLT_FINAL: {
     type: 'number',
     showName: 'Volt stop',
-    range: Object.freeze({ min: -5, max: 5 }),
-    func: (val) => {
-      return parseInt(parseFloat(val) * 1000 * 5 + 25000)
+    componentType: 'input-range',
+    range: Object.freeze({ min: 0, max: 50000 }),
+    outputRawData: (val, scale = 1) => {
+      return parseInt(parseFloat(val) * scale * 5 + 25000)
     },
-    rev_func: (val) => {
-      return parseInt((parseFloat(val) - 25000) / 5) / 1000
+    outputReadabilityData: (val, scale = 1) => {
+      return parseInt((parseFloat(val) - 25000) / 5) / scale
     },
     downloadUnit: 'mV',
     defaultUnit: 'V',
     unit: {
-      V: 1,
+      mV: 1,
+      V: 1e3,
     },
   },
   VOLT_STEP: {
     type: 'number',
     showName: 'Volt step',
-    range: Object.freeze({ min: 0.2, max: 100 }),
-    func: (val) => {
+    componentType: 'input-range',
+    range: Object.freeze({ min: 1, max: 1000 }),
+    outputRawData: (val) => {
       if ((parseFloat(val) * 10) % 2 !== 0) { // odd number
         return parseFloat(val) * 10 + 1
       } else {
         return parseFloat(val) * 10
       }
     },
-    rev_func: (val) => {
+    outputReadabilityData: (val) => {
       return parseFloat(val) / 10
     },
     downloadUnit: 'mV',
@@ -170,12 +198,18 @@ const EliteZM15 = {
   STEP_TIME: {
     type: 'array',
     showName: 'Step time',
+    componentType: 'input-button-toggle',
+    options: [
+      { value: 0, label: '0.5s' },
+      { value: 1, label: '1.0s' },
+      { value: 2, label: '2.0s' },
+    ],
     range: ['0.5s', '1.0s', '2.0s'],
-    func: (val) => {
+    outputRawData: (val) => {
       const stepTimeArr = ['0.5s', '1.0s', '2.0s']
       return stepTimeArr.indexOf(val.toString())
     },
-    rev_func: (idx) => {
+    outputReadabilityData: (idx) => {
       const stepTimeArr = ['0.5s', '1.0s', '2.0s']
       return stepTimeArr[parseInt(idx)]
     },
@@ -184,21 +218,24 @@ const EliteZM15 = {
   DAC_VOLT: {
     type: 'number',
     showName: 'Volt out',
-    range: Object.freeze({ min: -5, max: 5 }),
-    func: (val) => {
-      return parseInt(parseFloat(val) * 1000 * 5 + 25000)
+    componentType: 'input-range',
+    range: Object.freeze({ min: 0, max: 50000 }),
+    outputRawData: (val, scale = 1) => {
+      return parseInt(parseFloat(val) * scale * 5 + 25000)
     },
-    rev_func: (val) => {
-      return parseInt((parseFloat(val) - 25000) / 5) / 1000
+    outputReadabilityData: (val, scale = 1) => {
+      return parseInt((parseFloat(val) - 25000) / 5) / scale
     },
     downloadUnit: 'mV',
     defaultUnit: 'V',
     unit: {
-      V: 1,
+      mV: 1,
+      V: 1e3,
     },
   },
   SAMPLE_RATE: {
     type: 'number',
+    componentType: 'input-range',
     showName: (mode) => {
       const nameObj = { 'Sample rate': [0, 1, 2, 3, 4, 5, 6, 9, 13, 16], Resolution: [7, 8] }
       for (const key of Object.keys(nameObj)) {
@@ -207,11 +244,11 @@ const EliteZM15 = {
         }
       }
     },
-    range: Object.freeze({ min: 0.1, max: 100 }),
-    func: (val) => {
+    range: Object.freeze({ min: 1, max: 1000 }),
+    outputRawData: (val, scale = 1) => {
       return parseInt(parseFloat(val) * 10)
     },
-    rev_func: (val) => {
+    outputReadabilityData: (val, scale = 1) => {
       return parseFloat(val) / 10
     },
     downloadUnit: 'sps',
@@ -223,12 +260,17 @@ const EliteZM15 = {
   Charge: {
     type: 'array',
     showName: 'Charge',
+    componentType: 'input-button-toggle',
+    options: [
+      { value: 0, label: 'Charge' },
+      { value: 1, label: 'Discharge' },
+    ],
     range: ['Charge', 'Discharge'],
-    func: (val) => {
+    outputRawData: (val) => {
       const chargeArr = ['Charge', 'Discharge']
       return chargeArr.indexOf(val.toString())
     },
-    rev_func: (val) => {
+    outputReadabilityData: (val) => {
       const chargeArr = ['Charge', 'Discharge']
       return chargeArr[(parseInt(val) + 1) % 2]
     },
@@ -236,139 +278,156 @@ const EliteZM15 = {
   Const_Current_value: {
     type: 'number',
     showName: 'Current',
-    range: Object.freeze({ min: 0, max: 15000 }),
-    func: (val) => {
+    componentType: 'input-range',
+    range: Object.freeze({ min: 0, max: 1500000 }),
+    outputRawData: (val) => {
       return parseInt(parseFloat(val) * 100)
     },
-    rev_func: (val) => {
+    outputReadabilityData: (val) => {
       return parseFloat(val) / 100
     },
     downloadUnit: 'mA',
     defaultUnit: 'μA',
     unit: {
       μA: 1,
+      mA: 1e3,
     },
   },
   VOLTSTOP_MAX: {
     type: 'number',
     showName: 'Volt max',
-    range: Object.freeze({ min: -5, max: 5 }),
-    func: (val) => {
-      return parseInt(parseFloat(val) * 1000 * 5 + 25000)
+    componentType: 'input-range',
+    range: Object.freeze({ min: 0, max: 50000 }),
+    outputRawData: (val, scale = 1) => {
+      return parseInt(parseFloat(val) * scale * 5 + 25000)
     },
-    rev_func: (val) => {
-      return parseInt((parseFloat(val) - 25000) / 5) / 1000
+    outputReadabilityData: (val, scale = 1) => {
+      return parseInt((parseFloat(val) - 25000) / 5) / scale
     },
     downloadUnit: 'mV',
     defaultUnit: 'V',
     unit: {
-      V: 1,
+      mV: 1,
+      V: 1e3,
     },
   },
   VOLTSTOP_MIN: {
     type: 'number',
     showName: 'Volt min stop',
-    range: Object.freeze({ min: -5, max: 5 }),
-    func: (val) => {
-      return parseInt(parseFloat(val) * 1000 * 5 + 25000)
+    componentType: 'input-range',
+    range: Object.freeze({ min: 0, max: 50000 }),
+    outputRawData: (val, scale = 1) => {
+      return parseInt(parseFloat(val) * scale * 5 + 25000)
     },
-    rev_func: (val) => {
-      return parseInt((parseFloat(val) - 25000) / 5) / 1000
+    outputReadabilityData: (val, scale = 1) => {
+      return parseInt((parseFloat(val) - 25000) / 5) / scale
     },
     downloadUnit: 'mV',
     defaultUnit: 'V',
     unit: {
-      V: 1,
+      mV: 1,
+      V: 1e3,
     },
   },
   VOLT_INITIAL: {
     type: 'number',
     showName: 'E-Initial',
-    range: Object.freeze({ min: -5, max: 5 }),
-    func: (val) => {
-      return parseInt(parseFloat(val) * 1000 * 5 + 25000)
+    componentType: 'input-range',
+    range: Object.freeze({ min: 0, max: 50000 }),
+    outputRawData: (val, scale = 1) => {
+      return parseInt(parseFloat(val) * scale * 5 + 25000)
     },
-    rev_func: (val) => {
-      return parseInt((parseFloat(val) - 25000) / 5) / 1000
+    outputReadabilityData: (val, scale = 1) => {
+      return parseInt((parseFloat(val) - 25000) / 5) / scale
     },
     downloadUnit: 'mV',
     defaultUnit: 'V',
     unit: {
-      V: 1,
+      mV: 1,
+      V: 1e3,
     },
   },
   VOLT_MAX: {
     type: 'number',
     showName: 'E1',
-    range: Object.freeze({ min: -5, max: 5 }),
-    func: (val) => {
-      return parseInt(parseFloat(val) * 1000 * 5 + 25000)
+    componentType: 'input-range',
+    range: Object.freeze({ min: 0, max: 50000 }),
+    outputRawData: (val, scale = 1) => {
+      return parseInt(parseFloat(val) * scale * 5 + 25000)
     },
-    rev_func: (val) => {
-      return parseInt((parseFloat(val) - 25000) / 5) / 1000
+    outputReadabilityData: (val, scale = 1) => {
+      return parseInt((parseFloat(val) - 25000) / 5) / scale
     },
     downloadUnit: 'mV',
     defaultUnit: 'V',
     unit: {
-      V: 1,
+      mV: 1,
+      V: 1e3,
     },
   },
   VOLT_MIN: {
     type: 'number',
     showName: 'E2',
-    range: Object.freeze({ min: -5, max: 5 }),
-    func: (val) => {
-      return parseInt(parseFloat(val) * 1000 * 5 + 25000)
+    componentType: 'input-range',
+    range: Object.freeze({ min: 0, max: 50000 }),
+    outputRawData: (val, scale = 1) => {
+      return parseInt(parseFloat(val) * scale * 5 + 25000)
     },
-    rev_func: (val) => {
-      return parseInt((parseFloat(val) - 25000) / 5) / 1000
+    outputReadabilityData: (val, scale = 1) => {
+      return parseInt((parseFloat(val) - 25000) / 5) / scale
     },
     downloadUnit: 'mV',
     defaultUnit: 'V',
     unit: {
-      V: 1,
+      mV: 1,
+      V: 1e3,
     },
   },
   VOLT_EFINAL: {
     type: 'number',
     showName: 'E-Final',
-    range: Object.freeze({ min: -5, max: 5 }),
-    func: (val) => {
-      return parseInt(parseFloat(val) * 1000 * 5 + 25000)
+    componentType: 'input-range',
+    range: Object.freeze({ min: 0, max: 50000 }),
+    outputRawData: (val, scale = 1) => {
+      return parseInt(parseFloat(val) * scale * 5 + 25000)
     },
-    rev_func: (val) => {
-      return parseInt((parseFloat(val) - 25000) / 5) / 1000
+    outputReadabilityData: (val, scale = 1) => {
+      return parseInt((parseFloat(val) - 25000) / 5) / scale
     },
     downloadUnit: 'mV',
     defaultUnit: 'V',
     unit: {
-      V: 1,
+      mV: 1,
+      V: 1e3,
     },
   },
   VOLT_VSCAN: {
     type: 'number',
     showName: 'Volt (v.s. ref)',
-    range: Object.freeze({ min: -5, max: 5 }),
-    func: (val) => {
-      return parseInt(parseFloat(val) * 1000 * 5 + 25000)
+    componentType: 'input-range',
+    range: Object.freeze({ min: 0, max: 50000 }),
+    outputRawData: (val, scale = 1) => {
+      return parseInt(parseFloat(val) * scale * 5 + 25000)
     },
-    rev_func: (val) => {
-      return parseInt((parseFloat(val) - 25000) / 5) / 1000
+    outputReadabilityData: (val, scale = 1) => {
+      return parseInt((parseFloat(val) - 25000) / 5) / scale
     },
     downloadUnit: 'mV',
     defaultUnit: 'V',
     unit: {
-      V: 1,
+      mV: 1,
+      V: 1e3,
     },
   },
   Scan_Rate: {
     type: 'number',
     showName: 'ScanRate',
-    range: Object.freeze({ min: 0.01, max: 1000 }),
-    func: (val) => {
+    componentType: 'input-range',
+    range: Object.freeze({ min: 1, max: 100000 }),
+    outputRawData: (val) => {
       return parseInt(parseFloat(val) * 100)
     },
-    rev_func: (val) => {
+    outputReadabilityData: (val) => {
       return parseFloat(val) / 100
     },
     downloadUnit: 'mV/s',
@@ -380,11 +439,12 @@ const EliteZM15 = {
   CYCLE_NUMBER: {
     type: 'number',
     showName: 'Cycle number',
+    componentType: 'input-range',
     range: Object.freeze({ min: 1, max: 50000 }),
-    func: (val) => {
+    outputRawData: (val) => {
       return parseInt(val)
     },
-    rev_func: (val) => {
+    outputReadabilityData: (val) => {
       return parseInt(val)
     },
     defaultUnit: 'cycle',
@@ -392,19 +452,32 @@ const EliteZM15 = {
       cycle: 1,
     },
   },
-  // TIME_UNIT: { // [TODO] wait for schedule
-  //   type: 'array',
-  //   showName: 'Duration',
-  //   range: ['h', 'm', 's', 'ms'],
-  //   func: (val) => {
-  //     const chargeArr = ['h', 'm', 's', 'ms']
-  //     return chargeArr.indexOf(val.toString())
-  //   },
-  //   rev_func: (idx) => {
-  //     const chargeArr = ['h', 'm', 's', 'ms']
-  //     return chargeArr[parseInt(idx)]
-  //   },
-  // },
+  V_initial: {
+    type: 'number-array',
+    showName: 'Segment Voltage',
+    componentType: 'input-field',
+    range: Object.freeze({ min: 0, max: 50000 }),
+    outputRawData: (val, scale = 1, index = -1) => {
+      if (index === -1) {
+        return parseInt(parseFloat(val) * scale * 5 + 25000)
+      } else {
+        return parseInt(parseFloat(val[index]) * scale * 5 + 25000)
+      }
+    },
+    outputReadabilityData: (val, scale = 1, index = -1) => {
+      if (index === -1) {
+        return parseInt((parseFloat(val) - 25000) / 5) / scale
+      } else {
+        return parseInt((parseFloat(val[index]) - 25000) / 5) / scale
+      }
+    },
+    downloadUnit: 'mV',
+    defaultUnit: 'V',
+    unit: {
+      mV: 1,
+      V: 1e3,
+    },
+  },
   V_initial_0: {
     type: 'number',
     showName: 'Segment voltage 1',
@@ -469,6 +542,36 @@ const EliteZM15 = {
       V: 1,
     },
   },
+  t_pulse: {
+    type: 'number-array',
+    showName: 'Segment Duration',
+    componentType: 'input-field',
+    range: Object.freeze({ min: 0, max: 1e6 }),
+    outputRawData: (val, scale = 1, index = -1) => {
+      if (index >= 0) {
+        val = val[index]
+      }
+      let _val = parseInt(val) * scale
+      // 5 ms a step
+      const remainder = parseInt(_val) % 5
+      if (remainder !== 0) {
+        _val = parseInt(_val) + (5 - remainder)
+      }
+      return _val * 10
+    },
+    outputReadabilityData: (val, scale = 1, index = -1) => {
+      if (index >= 0) {
+        val = val[index]
+      }
+      return parseFloat(val) / 10 / scale
+    },
+    downloadUnit: 'ms',
+    defaultUnit: 'ms',
+    unit: {
+      ms: 1,
+      s: 1e3,
+    },
+  },
   t_pulse_0: {
     type: 'number',
     showName: 'Segment duration 1',
@@ -557,6 +660,29 @@ const EliteZM15 = {
       ms: 1,
     },
   },
+  CURR_REC: {
+    type: 'number-array',
+    showName: 'Current Recording Period',
+    componentType: 'input-range-slider',
+    range: Object.freeze({ min: 0, max: 100 }),
+    outputRawData: (val, scale = 1, index = -1) => {
+      if (index >= 0) {
+        val = val[index]
+      }
+      return val
+    },
+    outputReadabilityData: (val, scale = 1, index = -1) => {
+      if (index >= 0) {
+        val = val[index]
+      }
+      return val
+    },
+    sliderStep: 5,
+    defaultUnit: '%',
+    unit: {
+      '%': 1,
+    },
+  },
   CURR_REC_START_0: {
     type: 'number',
     showName: 'Segment current rec start 1 ',
@@ -725,6 +851,24 @@ const EliteZM15 = {
       '%': 1,
     },
   },
+  segment_order: {
+    type: 'number-array',
+    range: Object.freeze({ min: -1, max: 3 }),
+    outputRawData: (val, scale = 1, index = -1) => {
+      if (index === -1) {
+        return val
+      } else {
+        return val[index]
+      }
+    },
+    outputReadabilityData: (val, scale = 1, index = -1) => {
+      if (index === -1) {
+        return val
+      } else {
+        return val[index]
+      }
+    },
+  },
   segment_ui_order_0: {
     type: 'number',
     range: Object.freeze({ min: 0, max: 4 }),
@@ -819,6 +963,303 @@ const EliteZM15 = {
     },
   },
 
+  DPV_e_init: {
+    type: 'number',
+    showName: 'E-Initial',
+    componentType: 'input-field',
+    range: Object.freeze({ min: 0, max: 50000 }),
+    outputRawData: (val, scale = 1) => {
+      return parseInt(parseFloat(val) * scale * 5 + 25000)
+    },
+    outputReadabilityData: (val, scale = 1) => {
+      return parseInt((parseFloat(val) - 25000) / 5) / scale
+    },
+    downloadUnit: 'mV',
+    defaultUnit: 'mV',
+    unit: {
+      mV: 1,
+      V: 1e3,
+    },
+  },
+
+  DPV_e_1: {
+    type: 'number',
+    showName: 'E1',
+    componentType: 'input-field',
+    range: Object.freeze({ min: 0, max: 50000 }),
+    outputRawData: (val, scale = 1) => {
+      return parseInt(parseFloat(val) * scale * 5 + 25000)
+    },
+    outputReadabilityData: (val, scale = 1) => {
+      return parseInt((parseFloat(val) - 25000) / 5) / scale
+    },
+    downloadUnit: 'mV',
+    defaultUnit: 'mV',
+    unit: {
+      mV: 1,
+      V: 1e3,
+    },
+  },
+
+  DPV_e_2: {
+    type: 'number',
+    showName: 'E2',
+    componentType: 'input-field',
+    range: Object.freeze({ min: 0, max: 50000 }),
+    outputRawData: (val, scale = 1) => {
+      return parseInt(parseFloat(val) * scale * 5 + 25000)
+    },
+    outputReadabilityData: (val, scale = 1) => {
+      return parseInt((parseFloat(val) - 25000) / 5) / scale
+    },
+    downloadUnit: 'mV',
+    defaultUnit: 'mV',
+    unit: {
+      mV: 1,
+      V: 1e3,
+    },
+  },
+
+  DPV_e_final: {
+    type: 'number',
+    showName: 'E-Final',
+    componentType: 'input-field',
+    range: Object.freeze({ min: 0, max: 50000 }),
+    outputRawData: (val, scale = 1) => {
+      return parseInt(parseFloat(val) * scale * 5 + 25000)
+    },
+    outputReadabilityData: (val, scale = 1) => {
+      return parseInt((parseFloat(val) - 25000) / 5) / scale
+    },
+    downloadUnit: 'mV',
+    defaultUnit: 'mV',
+    unit: {
+      mV: 1,
+      V: 1e3,
+    },
+  },
+
+  DPV_increment: {
+    type: 'number',
+    showName: 'Increment',
+    componentType: 'input-field',
+    range: Object.freeze({ min: 0, max: 50000 }),
+    outputRawData: (val, scale = 1) => {
+      return parseInt(parseFloat(val) * scale * 5 + 25000)
+    },
+    outputReadabilityData: (val, scale = 1) => {
+      return parseInt((parseFloat(val) - 25000) / 5) / scale
+    },
+    downloadUnit: 'mV',
+    defaultUnit: 'mV',
+    unit: {
+      mV: 1,
+      V: 1e3,
+    },
+  },
+
+  DPV_amp: {
+    type: 'number',
+    showName: 'Pulse Amplitude',
+    componentType: 'input-field',
+    range: Object.freeze({ min: 0, max: 50000 }),
+    outputRawData: (val, scale = 1) => {
+      return parseInt(parseFloat(val) * scale * 5 + 25000)
+    },
+    outputReadabilityData: (val, scale = 1) => {
+      return parseInt((parseFloat(val) - 25000) / 5) / scale
+    },
+    downloadUnit: 'mV',
+    defaultUnit: 'mV',
+    unit: {
+      mV: 1,
+      V: 1e3,
+    },
+  },
+
+  DPV_pul_width: {
+    type: 'number',
+    showName: 'Pulse Width',
+    componentType: 'input-field',
+    range: Object.freeze({ min: 0, max: 1e6 }),
+    outputRawData: (val, scale = 1) => {
+      return parseInt(parseFloat(val) * scale)
+    },
+    outputReadabilityData: (val, scale = 1) => {
+      return parseInt(parseFloat(val)) / scale
+    },
+    downloadUnit: 'ms',
+    defaultUnit: 'ms',
+    unit: {
+      ms: 1,
+      s: 1e3,
+    },
+  },
+
+  DPV_step_time: {
+    type: 'number',
+    showName: 'Period',
+    componentType: 'input-field',
+    range: Object.freeze({ min: 0, max: 1e6 }),
+    outputRawData: (val, scale = 1) => {
+      return parseInt(parseFloat(val) * scale)
+    },
+    outputReadabilityData: (val, scale = 1) => {
+      return parseInt(parseFloat(val)) / scale
+    },
+    downloadUnit: 'ms',
+    defaultUnit: 'ms',
+    unit: {
+      ms: 1,
+      s: 1e3,
+    },
+  },
+
+  DPV_pulse_option: {
+    type: 'boolean',
+    showName: 'Pulse Option',
+    componentType: 'input-option',
+    description: 'Invert pulses during E1 to E2',
+  },
+
+  DPV_curr_rec: {
+    type: 'array',
+    showName: 'Pre- / Post-Pulse Width',
+    componentType: 'input-double-range',
+    range: Object.freeze({ min: 0, max: 100 }),
+    outputRawData: (val, scale = 1) => {
+      return parseInt(parseFloat(val) * scale)
+    },
+    outputReadabilityData: (val, scale = 1) => {
+      return parseInt(parseFloat(val)) / scale
+    },
+  },
+
+  DPV_notify_rate: {
+    type: 'number',
+    showName: 'Sample Rate',
+    componentType: 'input-field',
+    range: Object.freeze({ min: 0, max: 1000 }),
+    outputRawData: (val, scale = 1) => {
+      return parseFloat(val) * 10
+    },
+    outputReadabilityData: (val, scale = 1) => {
+      return parseFloat(val) / 10
+    },
+    downloadUnit: 'sps',
+    defaultUnit: 'sps',
+    unit: {
+      sps: 1,
+    },
+  },
+
+  DPV_engineering_enable: {
+    type: 'boolean',
+    showName: '',
+    componentType: 'input-toggle',
+  },
+
+  MODE_OPTIONS: [
+    {
+      id: 0,
+      description: 'I-V Curve',
+      img_src: 'IV-Wire',
+      highz: 1,
+    },
+    {
+      id: 1,
+      description: 'Cycle I-V',
+      img_src: 'CIV-Wire',
+      highz: 1,
+    },
+    {
+      id: 2,
+      description: 'Function Generator',
+      img_src: 'FG-Wire',
+      highz: 1,
+    },
+    {
+      id: 3,
+      description: 'R-T Graph',
+      img_src: 'RT-Wire',
+      highz: 1,
+    },
+    {
+      id: 4,
+      description: 'V-T Graph',
+      img_src: 'VT-Wire',
+      highz: 0,
+    },
+    {
+      id: 5,
+      description: 'I-T Graph',
+      img_src: 'IT-Wire',
+      highz: 1,
+    },
+    {
+      id: 6,
+      description: 'Constant Current',
+      img_src: 'CC-Wire',
+      highz: 1,
+    },
+    {
+      id: 13,
+      description: 'Open Circuit Potential',
+      img_src: 'OCP-Wire',
+      highz: 0,
+    },
+    {
+      id: 7,
+      description: 'Cyclic Voltammetry',
+      img_src: 'CV-Wire',
+      highz: 1,
+    },
+    {
+      id: 8,
+      description: 'Linear Sweep Voltammetry',
+      img_src: 'LSV-Wire',
+      highz: 1,
+    },
+    {
+      id: 9,
+      description: 'Chronoamperometric',
+      img_src: 'CG-Wire',
+      highz: 1,
+    },
+    {
+      id: 16,
+      description: 'Chronopotentiometry',
+      img_src: 'CC-Wire',
+      highz: 1,
+    },
+    {
+      id: 14,
+      description: 'Pulse Sensing',
+      img_src: 'PS-Wire',
+      highz: 1,
+    },
+    {
+      id: 15,
+      description: 'Differential Pulse Voltammetry (DPV)',
+      img_src: 'DPV-Wire',
+      highz: 1,
+    },
+    {
+      id: 12,
+      description: 'Dev Mode',
+      img_src: 'DevM-Wire',
+    },
+    {
+      id: 10,
+      description: 'Cali DAC - test',
+      img_src: 'CDAC-Wire',
+    },
+    {
+      id: 11,
+      description: 'Cali ADC - test',
+      img_src: 'CADC-Wire',
+    },
+  ],
   MODE: {
     0: IV,
     1: CycleIV,
@@ -829,7 +1270,7 @@ const EliteZM15 = {
     6: ConstantCurrent,
     7: CyclicVoltammetry,
     8: LinearSweep,
-    9: Chronoamperometric,
+    9: Chronoamperometry,
     10: CaliDAC,
     11: CaliADC,
     12: DevMode,

src/router/index.js

@@ -19,7 +19,7 @@ export default new Router({
       path: '*',
       redirect: { name: 'devices' },
     },
-    {
+    { // Q01: how to build a boundary of one {} scope
       path: '/auth',
       component: AuthLayout,
       children: [
@@ -88,8 +88,8 @@ export default new Router({
     },
     {
       name: 'Admin',
-      path: '/admin/:mode?',
-      component: AppLayout,
+      path: '/admin/:mode?', // Q03: ":mode?" meaning? is for the path can cat something or not?(e.g. /#/Admin/dev/task-content) => dev will be the variable, see TaskContent => can pick the mode as ID to mounted inside the URL
+      component: AppLayout, // Q05: trace the AppLayout
       children: [
         {
           name: 'dashboard',
@@ -119,9 +119,19 @@ export default new Router({
         },
         {
           name: 'task-content',
-          path: 'task-content/:taskID?',
+          path: 'task-content/:taskID?', /// Trace: '/:taskID?' is for getting the value directly from the URL
           component: () => import('../components/task/content/TaskContent.vue'),
         },
+        {
+          name: 'test',
+          path: 'test', // this is the url for the user call
+          component: () => import('../components/devices/test.vue'), // this is the router for the redirect page
+        },
+        {
+          name: 'TaskContent_v2',
+          path: 'TaskContent_v2', // this is the url for the user call
+          component: () => import('../components/task/content/TaskContent_v2.vue'), // this is the router for the redirect page
+        },
         // {
         //   name: 'task-content-g-m',
         //   path: 'task-content-g-m/',

src/store/modules/download/actions/exportAct.js

@@ -77,23 +77,38 @@ const exportActs = {
 
     // make two array for parameter header
     const paramKey = param.map((ele) => {
-      const name = typeof (paramObj[ele].showName) === 'function'
-        ? paramObj[ele].showName(meta.parameter_set.MODE)
-        : paramObj[ele].showName
-      const unit = paramObj[ele].downloadUnit && ' [' + paramObj[ele].downloadUnit + ']'
-      return [name, unit].join('')
+      if (typeof ele === 'object') {
+        const name = paramObj[ele[0]].showName + ' ' + ele[1]
+        const unit = paramObj[ele[0]].downloadUnit && ' [' + paramObj[ele[0]].downloadUnit + ']'
+        return [name, unit].join('')
+      } else {
+        const name = typeof (paramObj[ele].showName) === 'function'
+          ? paramObj[ele].showName(meta.parameter_set.MODE)
+          : paramObj[ele].showName
+        const unit = paramObj[ele].downloadUnit && ' [' + paramObj[ele].downloadUnit + ']'
+        return [name, unit].join('')
+      }
     })
-    const paramValue = []
+    const paramValueArray = []
     for (const p of param) {
-      paramValue.push(paramObj[p].rev_func(meta.parameter_set[p]))
+      if (typeof p === 'object') {
+        const parameterName = p[0]
+        const parameterIndex = p[1]
+        paramValueArray.push(paramObj[parameterName].outputReadabilityData(meta.parameter_set[parameterName], 1, parameterIndex))
+      } else {
+        const paramValue = paramObj[p].downloadUnit && paramObj[p].downloadUnit !== null && typeof paramObj[p].outputReadabilityData(meta.parameter_set[p]) !== 'string'
+          ? paramObj[p].outputReadabilityData(meta.parameter_set[p], paramObj[p].unit[paramObj[p].downloadUnit])
+          : paramObj[p].outputReadabilityData(meta.parameter_set[p])
+        paramValueArray.push(paramValue)
+      }
     }
 
     if (libraryName.includes('Elite')) {
       paramKey.unshift('Working mode')
-      paramValue.unshift(modeObj.name)
+      paramValueArray.unshift(modeObj.name)
     }
 
-    const headersArray = [InfoHeader, infoDataHeader, paramKey, paramValue]
+    const headersArray = [InfoHeader, infoDataHeader, paramKey, paramValueArray]
     let headersString = ''
     headersArray.forEach(header => {
       headersString += header.join(',') + '\r\n'

src/store/modules/task/content/actions/chartAct.js

@@ -428,11 +428,11 @@ const chartActs = {
             _axisList.push(_axis + ' AXIS = TIME')
             break
           case 'Neulive':
-            dataStreamBuffer.register(chartID, taskInfo.getRawDeviceID(source.id), source.channel)
+            dataStreamBuffer.register(source.id, source.channel)
             _axisList.push(_axis + ' AXIS = NEULIVE ' + source.id + ' CHANNEL ' + source.channel)
             break
           case 'Elite':
-            dataStreamBuffer.register(chartID, taskInfo.getRawDeviceID(source.id), source.channel)
+            dataStreamBuffer.register(chartID, source.id, source.channel)
             switch (source.channel) {
               case 1:
                 _axisList.push(_axis + ' AXIS = ELITE ' + source.id + ' CURRENT')
@@ -453,7 +453,7 @@ const chartActs = {
               state.chartData[chartID].series[state.chartData[chartID].series.length - 1].showSymbol = true
               state.chartData[chartID].series[state.chartData[chartID].series.length - 1].showAllSymbol = true
             }
-            dataStreamBuffer.register(chartID, taskInfo.getRawDeviceID(source.id), source.channel)
+            dataStreamBuffer.register(chartID, source.id, source.channel)
             switch (source.channel) {
               case 1:
                 _axisList.push(_axis + ' AXIS = ELITE ' + source.id + ' ZIMAG_RAW')
@@ -491,7 +491,7 @@ const chartActs = {
             }
             break
           default:
-            dataStreamBuffer.register(chartID, taskInfo.getRawDeviceID(source.id), source.channel)
+            dataStreamBuffer.register(chartID, source.id, source.channel)
             _axisList.push(_axis + ' AXIS = DEVICE ' + source.id + ' CHANNEL ' + source.channel)
             break
         }
@@ -500,7 +500,7 @@ const chartActs = {
       _axisList.push('X AXIS = TIME')
       _axisList.push('Y AXIS = FORMULA' + formula.id)
       sourceList.forEach(source => {
-        dataStreamBuffer.register(chartID, taskInfo.getRawDeviceID(source.id), source.channel)
+        dataStreamBuffer.register(chartID, source.id, source.channel)
       })
     }
 
@@ -537,7 +537,7 @@ const chartActs = {
    * @param {String} chartID
    */
   [typePath.refreshData]: ({ state, getters, commit, dispatch }, payload) => {
-    const { chartID } = payload
+    const { chartID, deviceList } = payload
     if (state.chartData[chartID] == null) {
       return false
     }
@@ -547,14 +547,14 @@ const chartActs = {
       if (series.formula != null) {
         let zeroBatch = false
         series.formulaSource.forEach(source => {
-          if (dataStreamBuffer.getByChartID(chartID)[taskInfo.getRawDeviceID(source[0])][source[1]].length === 0) {
+          if (dataStreamBuffer.getByChartID(chartID)[source[0]][source[1]].length === 0) {
             zeroBatch = true
           }
         })
         if (zeroBatch) {
           series.formulaSource.forEach(source => {
-            if (dataStreamBuffer.getByChartID(chartID)[taskInfo.getRawDeviceID(source[0])][source[1]].length > 0) {
-              dataStreamBuffer.merge(chartID, taskInfo.getRawDeviceID(source[0]), source[1])
+            if (dataStreamBuffer.getByChartID(chartID)[source[0]][source[1]].length > 0) {
+              dataStreamBuffer.merge(chartID, source[0], source[1])
             }
           })
           return false
@@ -563,7 +563,7 @@ const chartActs = {
           const indexNow = []
           const indexArray = []
           series.formulaSource.forEach((source, index) => {
-            const _popData = dataStreamBuffer.pop(chartID, taskInfo.getRawDeviceID(source[0]), source[1])
+            const _popData = dataStreamBuffer.pop(chartID, source[0], source[1])
             popData.push({
               data: _popData,
               indexRaw: index,
@@ -658,8 +658,8 @@ const chartActs = {
           let popData = []
 
           // get raw deviceID
-          const rawDeviceIDX = taskInfo.getRawDeviceID(series.xAxisSource[0])
-          const rawDeviceIDY = taskInfo.getRawDeviceID(series.yAxisSource[0])
+          const rawDeviceIDX = series.xAxisSource[0]
+          const rawDeviceIDY = series.yAxisSource[0]
 
           // pop data
           if (series.xAxisSource[0] === -1) {
@@ -710,7 +710,7 @@ const chartActs = {
           // series data list shift by time
           if (series.data.length > 0) {
             if (series.xAxisSource[0] === -1) {
-              if (taskInfo.getDeviceInfo(series.yAxisSource[0]).info.library_name.indexOf('Elite') >= 0) {
+              if (deviceList.find(ele => ele.memory_board === series.yAxisSource[0]).library_name.includes('Elite')) {
                 if (series.data.length > state.chartData[chartID].maxDots) {
                   series.data.splice(0, series.data.length - state.chartData[chartID].maxDots)
                 }
@@ -720,7 +720,7 @@ const chartActs = {
                 }
               }
             } else if (series.yAxisSource[0] === -1) {
-              if (taskInfo.getDeviceInfo(series.xAxisSource[0]).info.library_name.indexOf('Elite') >= 0) {
+              if (deviceList.find(ele => ele.memory_board === series.xAxisSource[0]).library_name.includes('Elite')) {
                 if (series.data.length > state.chartData[chartID].maxDots) {
                   series.data.splice(0, series.data.length - state.chartData[chartID].maxDots)
                 }
@@ -745,8 +745,8 @@ const chartActs = {
         } else {
           // x axis and y axis is value, so need two device-channel data stream and align
           // get real deviceID from controller
-          const rawDeviceIDX = taskInfo.getRawDeviceID(series.xAxisSource[0])
-          const rawDeviceIDY = taskInfo.getRawDeviceID(series.yAxisSource[0])
+          const rawDeviceIDX = series.xAxisSource[0]
+          const rawDeviceIDY = series.yAxisSource[0]
 
           // get real deviceID fault
           if (rawDeviceIDX == null || rawDeviceIDY == null) {
@@ -890,9 +890,8 @@ const chartActs = {
     }
 
     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, taskInfo.getDeviceInfo(device.id).info.library_name)
-        console.log(setting)
+      if (device.library_name.includes('Elite')) {
+        const setting = global_.getDefaultChartTypeByMode(device.configuration.MODE, device.library_name)
         const xType = setting[0]
         const xValue = setting[1]
         const yType = setting[2]
@@ -909,8 +908,8 @@ const chartActs = {
           formula: null,
         })
         state.chartData[chartID].chartDevice = 'elite'
-        state.chartData[chartID].chartMode = taskInfo.getDeviceInfo(device.id).parameterSet.MODE
-        if (taskInfo.getDeviceInfo(device.id).info.library_name === 'EliteEIS') {
+        state.chartData[chartID].chartMode = device.configuration.MODE
+        if (device.library_name.includes('EIS')) {
           switch (xValue) {
             case 3:
               state.chartData[chartID].chartXUnit = 'mHz'
@@ -973,61 +972,6 @@ const chartActs = {
               break
           }
         }
-      } else if (taskInfo.getDeviceInfo(device.id).info.library_name.indexOf('Neulive') >= 0) {
-        const chList = taskInfo.getDeviceInfo(device.id).parameterSet.CH_LIST
-        const axisChannelSet = taskInfo.getDeviceInfo(device.id).parameterSet.AXIS_CH.toString(2).split('').reverse()
-        let gridNumber = 0
-        chList.forEach((element, index) => {
-          if (parseInt(element) > 0) {
-            gridNumber++
-          }
-        })
-        axisChannelSet.forEach((element, index) => {
-          if (parseInt(element) === 1) {
-            gridNumber++
-          }
-        })
-        dispatch(typePath.updateGridList, { chartID: chartID, length: gridNumber })
-        gridNumber = 0
-        chList.forEach((element, index) => {
-          if (parseInt(element) > 0) {
-            dispatch(typePath.register, {
-              chartID: chartID,
-              gridIndex: gridNumber,
-              deviceNameX: 'Time',
-              deviceIDX: device.id,
-              channelX: 1,
-              deviceNameY: 'Neulive',
-              deviceIDY: device.id,
-              channelY: index + 1,
-              formula: null,
-            })
-            gridNumber++
-          }
-        })
-        axisChannelSet.forEach((element, index) => {
-          if (parseInt(element) === 1) {
-            if (index >= 0 && index <= 3) {
-              dispatch(typePath.register, {
-                chartID: chartID,
-                gridIndex: gridNumber,
-                deviceNameX: 'Time',
-                deviceIDX: device.id,
-                channelX: 1,
-                deviceNameY: 'Neulive',
-                deviceIDY: device.id,
-                channelY: index + 257,
-                formula: null,
-              })
-              gridNumber++
-            }
-          }
-        })
-        for (let i = 0; i < state.chartData[chartID].series.length - 1; i++) {
-          state.chartData[chartID].xAxis[state.chartData[chartID].series[i].xAxisIndex].axisLabel.show = false
-        }
-        state.chartData[chartID].chartDevice = 'neulive'
-        state.chartData[chartID].chartYUnit = 'uV'
       }
     }
 
@@ -1052,7 +996,6 @@ const chartActs = {
     // TODO remove old buffer register
     if (_chartID != null) {
       // update only one
-      console.log(_chartID, state.chartData)
 
       dispatch(typePath.reset, {
         chartID: _chartID,
@@ -1071,6 +1014,7 @@ const chartActs = {
     } else {
       // update all
       let isSetting = false
+
       for (const chartID in state.chartData) {
         if (parseInt(state.chartData[chartID].mappingID) === parseInt(item.id)) {
           isSetting = true
@@ -1079,7 +1023,6 @@ const chartActs = {
             mappingID: state.chartData[chartID].mappingID,
             cardName: state.chartData[chartID].cardName,
           })
-          console.log(state.chartData[chartID])
           state.chartData[chartID].mappingID = parseInt(item.id)
           switch (_type) {
             case 'device':

src/store/modules/task/content/state.js

@@ -1,6 +1,8 @@
 function newState () {
   return {
     deviceList: [],
+    deviceListNew: [],
+
     filter: {},
     showTaskModal: false,
     taskModalText: '[Recording] At least one channel is opened.',

vue.config.js

@@ -9,7 +9,7 @@ const getLastCommitHash = () => {
   const hash = require('child_process').execSync('git rev-parse HEAD')
     .toString()
 
-  return hash.slice(0, 6)
+  return hash
 }
 
 const lintOnSave = true
@@ -54,6 +54,9 @@ module.exports = {
         TIMESTAMP: JSON.stringify(timeStamp),
         COMMIT: JSON.stringify(getLastCommitHash()),
       }),
+      new webpack.EnvironmentPlugin({
+        VUE_APP_BUILD_VERSION: '1.0.0',
+      }),
     ],
   },
   css: {