[debug] fix cycleIV.js and chartAct.js

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,22 @@ import '../registerServiceWorker'
 
 localforage.config({ name: 'bioprovue' })
 
+let MqttUrl
+// for developer
+if (process.env.NODE_ENV === 'development') {
+  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 +70,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/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/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,12 +101,14 @@
 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'
 import taskTypes from '@/store/modules/task/content/types'
 import TaskFormula from './formula/TaskFormula'
+import { v4 as uuid } from 'uuid'
 
 // TODO change chart data tag format
 
@@ -111,7 +116,8 @@ export default {
   name: 'TaskContent',
   components: {
     CanvasChart,
-    TaskDevices,
+    // TaskDevices,
+    TaskDevicesNew,
     TaskFormula,
   },
   computed: {
@@ -120,6 +126,7 @@ export default {
       'chartData',
       'taskContentChartPanelKey',
       'taskContentChartNumber',
+      'deviceListNew',
     ]),
     ...mapFields('', [
       'developer_mode',
@@ -141,8 +148,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 +163,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 +208,6 @@ 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,32 @@ 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',
+          // register default chart again
+          await this.taskContentChartDefaultChartGenerator({
+            _deviceList: this.deviceListNew,
+            _itemID: parseInt(mes[1]),
+            _chartID: null,
+            _type: 'device',
+          })
+
+          // remove mapping ID chart series data
+          for (const chart in this.chartData) {
+            this.taskContentChartResetSeriesData({
+              chartID: chart,
+              mappingID: mes[1],
             })
-            if (result) {
-              taskInfo.deviceStart(parseInt(parseInt(mes[1])), this.deviceList)
-            }
           }
+
+          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 +302,6 @@ export default {
         default:
           break
       }
-      //  console.log(String.fromCharCode.apply(null, data), topic)
     },
   },
   methods: {
@@ -330,14 +339,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',
@@ -356,11 +357,20 @@ export default {
       )
     },
     refreshData: function () {
-      // TODO don't need to refresh chart with stop status
       for (const chart in this.chartData) {
-        this.taskContentChartRefreshData({
-          chartID: parseInt(chart),
-        })
+        // find each chart mappingID with device memory_board
+        const device = this.deviceListNew.find(ele => String(ele.memory_board) === String(this.chartData[chart].mappingID))
+        // device not found continue
+        if (device === undefined) {
+          continue
+        }
+        // device is running refresh chart
+        if (device.status === 1) {
+          this.taskContentChartRefreshData({
+            chartID: chart,
+            deviceList: this.deviceListNew,
+          })
+        }
       }
     },
     refreshDevicesWindow: function () {
@@ -368,30 +378,37 @@ 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({
-        chartID: this.taskContentChartNumber,
-        maxDots: 4000,
+      // create chartID with uuid instead of length of chart list
+      const newChart = await this.taskContentChartAdd({
+        chartID: uuid(),
+        maxDots: 5000,
         gridLength: 1,
       })
+
+      // createby default
+      if (isDefault === true) {
+        newChart.createdBy = 'default'
+      }
+      // createby manaul
+      if (isDefault === false) {
+        newChart.createdBy = 'manual'
+      }
+
       if (this.$refs.chart_ref != null) {
         this.$refs.chart_ref.forEach(ref => {
           ref.refreshMappingSelect()
         })
       }
       this.taskContentChartRefreshPanel()
-      this.taskContentChartNumber++
-
+      // save chart config to web storage
       if (!isDefault) {
         await this.taskContentChartSaveToCache()
       }
       this.pageToast('The chart has been added.')
 
-      return this.taskContentChartNumber - 1
+      return newChart.chartID
     },
     refreshChartSetting: async function () {
       if (this.$refs.chart_ref != null) {
@@ -472,13 +489,22 @@ 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) {
+      // subscribe datastream when add device
+      this.mqttSub(`${taskInfo.getTaskInfo().controllerID}/data_server/device_data_stream/${deviceID}/+`)
+      // add mapping chart
+      await this.addMappingChart(deviceID)
+      // register default chart
+      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 +535,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 +552,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 +572,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 () {
@@ -592,6 +597,7 @@ export default {
       taskTypes.chart.add,
       taskTypes.chart.defaultChartGenerator,
       taskTypes.chart.reset,
+      taskTypes.chart.resetSeriesData,
       taskTypes.chart.refreshData,
       taskTypes.chart.refreshChart,
       taskTypes.chart.refreshPanel,
@@ -606,19 +612,10 @@ export default {
     }
 
     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/chart/CanvasChart.vue

@@ -26,6 +26,10 @@
       </va-tabs>
       <div v-if="tabValue == 0" >
         <div v-if="chartData[chartID].legend.data.length != 0">
+          <canvas-chart-real-time-display
+            :chartID="chartID"
+          />
+          <!-- chart -->
           <chart :key="taskContentChartKey" :ref="'chart_ref'" :style="'width: '+ cardwidth + '; height: ' + cardheight + ';'" :options="data" :auto-resize="true"></chart>
         </div>
       </div>
@@ -108,6 +112,7 @@ import CanvasChartFilterPopup from './CanvasChartFilterPopup.vue'
 import CanvasChartSource from './CanvasChartSource'
 import { taskInfo } from '../../../../data/task/TaskInfo'
 import { mapFields } from 'vuex-map-fields'
+import CanvasChartRealTimeDisplay from '@/components/task/content/chart/CanvasChartRealTimeDisplay'
 import { mapActions } from 'vuex'
 import taskTypes from '@/store/modules/task/content/types'
 
@@ -118,10 +123,11 @@ export default {
     CanvasChartSource,
     CanvasChartFilter,
     CanvasChartFilterPopup,
+    CanvasChartRealTimeDisplay,
   },
   props: {
     chartID: {
-      type: Number,
+      type: [Number, String],
       required: true,
     },
     cardclass: {
@@ -146,6 +152,7 @@ export default {
     ...mapFields('taskContent', [
       'chartData',
       'taskContentChartKey',
+      'deviceListNew',
     ]),
   },
   data () {
@@ -275,7 +282,7 @@ export default {
     },
     refreshMappingSelect: async function () {
       this.setMappingSelect(this.chartData[this.chartID].mappingID)
-      if (this.chartData[this.chartID].mappingID !== -1 && this.chartData[this.chartID].mappingID != null) {
+      if (this.chartData[this.chartID].mappingID !== '-1' && this.chartData[this.chartID].mappingID != null) {
         taskInfo.getMappingList().forEach(item => {
           if (item.id === this.chartData[this.chartID].mappingID) {
             this.setChartName(item.name)
@@ -322,7 +329,6 @@ export default {
         type: 'legendInverseSelect',
       })
     },
-
     ...mapActions('taskContent', [
       taskTypes.chart.saveToCache,
     ]),

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

@@ -65,7 +65,7 @@ export default {
   name: 'canvas-chart-filter',
   props: {
     chartID: {
-      type: Number,
+      type: [Number, String],
       required: true,
     },
     filterIndex: {

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

@@ -29,7 +29,7 @@ export default {
   },
   props: {
     chartID: {
-      type: Number,
+      type: [Number, String],
       required: true,
     },
     chartRef: {

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

@@ -66,7 +66,7 @@ export default {
   name: 'canvas-chart-filter-individual-filter',
   props: {
     chartID: {
-      type: Number,
+      type: [Number, String],
       required: true,
     },
     seriesIndex: {

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

@@ -0,0 +1,218 @@
+<template>
+  <div>
+    <div v-for="(chart, chartIndex) in realTime" :key="'c'+chartIndex">
+      <div v-for="(grid, gridIndex) in chart" :key="'s'+gridIndex" class="row ma-0 pa-0">
+        <div class="col flex xs0 sm0 lg0 md0 xl0 xxl1"/>
+        <div class="col flex xs2 sm2 lg2 md2 xl2 xxl1" pa-0 ma-0>
+          <p color="primary" style="text-align: right;">{{ grid.name }}</p>
+        </div>
+        <!-- value (y-axis) -->
+        <div class="col flex sm2 xl2 md2 xs2">
+          <va-input
+            label="y-value"
+            disable="disable"
+            v-model="grid.yValue"
+          />
+        </div>
+        <!-- unit (y-axis) -->
+        <div class="col flex sm2 xl2 md2 xs2">
+          <va-select
+            label="y-unit"
+            v-model="grid.yUnit"
+            :options="grid.yUnitOption"
+            noClear
+          />
+        </div>
+        <div class="col flex sm1 xl1 md1 xs1"></div>
+        <!-- value (x-axis) -->
+        <div class="col flex sm2 xl2 md2 xs2">
+          <va-input
+            label="x-value"
+            disable="disable"
+            v-model="grid.xValue"
+          />
+        </div>
+        <!-- unit (x-axis) -->
+        <div class="col flex sm2 xl2 md2 xs2">
+          <va-select
+            label="x-unit"
+            v-model="grid.xUnit"
+            :options="grid.xUnitOption"
+            noClear
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapFields } from 'vuex-map-fields'
+import paramTable from '@/data/param-table/index.js'
+import newTooltip from '@/factories/chart/tooltipFactory'
+
+export default {
+  name: 'CanvasChartRealTimeDisplay',
+  props: {
+    chartID: {
+      type: [Number, String],
+      required: true,
+    },
+  },
+  computed: {
+    ...mapFields('taskContent', [
+      'chartData',
+      'deviceListNew',
+    ]),
+  },
+  data () {
+    return {
+      data: null,
+      paramTable: paramTable,
+      realTime: [[]],
+    }
+  },
+  methods: {
+    // record the latest data as the real time value
+    updateValue: function () {
+      if ((this.realTime.length === 0)) {
+        return
+      }
+      for (let gridIndex = 0; gridIndex < this.realTime.length; gridIndex++) {
+        for (let channelIndex = 0; channelIndex < this.realTime[gridIndex].length; channelIndex++) {
+          // miss the source of data -> try to find the source
+          if (this.realTime[gridIndex][channelIndex].seriesSource === -1) {
+            this.realTime[gridIndex][channelIndex].seriesSource = this.data.series.findIndex((ele) => ele.name === this.realTime[gridIndex][channelIndex].name)
+          }
+
+          // the device is active now --> update the real time value
+          if (this.data.series[this.realTime[gridIndex][channelIndex].seriesSource] !== undefined && this.data.series[this.realTime[gridIndex][channelIndex].seriesSource].data !== undefined && this.data.series[this.realTime[gridIndex][channelIndex].seriesSource].data.length > 0) {
+            this.realTime[gridIndex][channelIndex].xValue = (this.data.series[this.realTime[gridIndex][channelIndex].seriesSource].data.at(-1)[0] / this.realTime[gridIndex][channelIndex].xValueScale[this.realTime[gridIndex][channelIndex].xUnit]).toFixed(3)
+            this.realTime[gridIndex][channelIndex].yValue = (this.data.series[this.realTime[gridIndex][channelIndex].seriesSource].data.at(-1)[1] / this.realTime[gridIndex][channelIndex].yValueScale[this.realTime[gridIndex][channelIndex].yUnit]).toFixed(3)
+          }
+        }
+      }
+    },
+    // change the axis unit of charts
+    updateUnit: function () {
+      for (let gridIndex = 0; gridIndex < this.realTime.length; gridIndex++) {
+        for (let channelIndex = 0; channelIndex < this.realTime[gridIndex].length; channelIndex++) {
+          if (channelIndex === 0) {
+            const _xUnit = this.realTime[gridIndex][channelIndex].xUnit
+            const _yUnit = this.realTime[gridIndex][channelIndex].yUnit
+            const _xScale = this.realTime[gridIndex][channelIndex].xValueScale[this.realTime[gridIndex][channelIndex].xUnit]
+            const _yScale = this.realTime[gridIndex][channelIndex].yValueScale[this.realTime[gridIndex][channelIndex].yUnit]
+
+            this.data.xAxis[gridIndex].axisLabel.formatter = function (val) {
+              return parseFloat(val / _xScale).toFixed(2) + _xUnit
+            }
+
+            this.data.yAxis[gridIndex].axisLabel.formatter = function (val) {
+              return parseFloat(val / _yScale).toFixed(2) + _yUnit
+            }
+            // update tooltip
+            this.data.tooltip.formatter = newTooltip(this.realTime).formatter
+          }
+        }
+      }
+    },
+    // for user to choose wanted unit
+    setUnit: function (gridIndex, channelIndex) {
+      // find coressponding device for current chart
+      const device = this.deviceListNew.find(chart => {
+        return chart.memory_board === parseInt(this.chartData[this.chartID].mappingID)
+      })
+      if (!device) {
+        return
+      }
+
+      // construct realTime object, i.e., record the coressponding value and unit
+      // the formate imitates the data.gridSource
+      const modeTable = this.paramTable[device.library_name].MODE[device.configuration.MODE]
+      const _realTime = JSON.parse(JSON.stringify(this.realTime))
+      const _newChannel = {}
+      let xAxis = null
+      let yAxis = null
+
+      // find the the data of each axis coming from which channel
+      if (this.data.series.length > 0) {
+        _newChannel.name = this.data.gridSource[gridIndex][channelIndex].name
+        _newChannel.seriesSource = this.data.series.findIndex((ele) => ele.name === _newChannel.name)
+        xAxis = this.data.series[_newChannel.seriesSource].xAxisSource[1] - 1
+        yAxis = this.data.series[_newChannel.seriesSource].yAxisSource[1] - 1
+        xAxis = (xAxis === -2) ? 'time' : xAxis
+        yAxis = (yAxis === -2) ? 'time' : yAxis
+      }
+
+      // check if xAxis unit has been defined in modeTable
+      if (Object.prototype.hasOwnProperty.call(modeTable.channels, xAxis)) {
+        _newChannel.xUnit = modeTable.channels[xAxis].defaultUnit
+        _newChannel.xValueScale = modeTable.channels[xAxis].unit
+        _newChannel.xUnitOption = Object.keys(modeTable.channels[xAxis].unit)
+      } else {
+        _newChannel.xUnit = 'unvalid'
+        _newChannel.xValueScale = { unvalid: NaN }
+        _newChannel.xUnitOption = ['']
+      }
+      // check if yAxis unit has been defined in modeTable
+      if (Object.prototype.hasOwnProperty.call(modeTable.channels, yAxis)) {
+        _newChannel.yUnit = modeTable.channels[yAxis].defaultUnit
+        _newChannel.yValueScale = modeTable.channels[yAxis].unit
+        _newChannel.yUnitOption = Object.keys(modeTable.channels[yAxis].unit)
+      } else {
+        _newChannel.yUnit = 'unvalid'
+        _newChannel.yValueScale = { unvalid: NaN }
+        _newChannel.yUnitOption = ['']
+      }
+
+      // set real time value = 0 as default
+      _newChannel.xValue = 0
+      _newChannel.yValue = 0
+
+      // padding
+      while (gridIndex >= _realTime.length) {
+        _realTime.push([])
+      }
+      while (channelIndex >= _realTime[gridIndex].length) {
+        _realTime[gridIndex].push({})
+      }
+
+      // merge the additional part into original part
+      _realTime[gridIndex][channelIndex] = _newChannel
+      this.realTime = _realTime
+    },
+    // for each lines on the charts should have its own real time display
+    matchChart: function () {
+      for (let gridIndex = 0; gridIndex < this.data.gridSource.length; gridIndex++) {
+        if (this.data.gridSource[gridIndex] !== undefined) {
+          for (let channelIndex = 0; channelIndex < this.data.gridSource[gridIndex].length; channelIndex++) {
+            if (gridIndex >= this.realTime.length) {
+              this.setUnit(gridIndex, channelIndex)
+            } else if (channelIndex >= this.realTime[gridIndex].length) {
+              this.setUnit(gridIndex, channelIndex)
+            }
+          }
+        }
+      }
+    },
+  },
+  mounted () {
+    this.data = this.chartData[this.chartID]
+  },
+  watch: {
+    data: {
+      handler: function () {
+        this.updateValue()
+        this.matchChart()
+      },
+      deep: true,
+    },
+    realTime: {
+      handler: function () {
+        this.updateUnit()
+      },
+      deep: true,
+    },
+  },
+}
+</script>

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

@@ -30,7 +30,7 @@ export default {
   name: 'canvas-chart-setting',
   props: {
     chartID: {
-      type: Number,
+      type: [Number, String],
       required: true,
     },
   },

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

@@ -95,7 +95,7 @@ export default {
   name: 'canvas-chart-source',
   props: {
     chartID: {
-      type: Number,
+      type: [Number, String],
       required: true,
     },
   },
@@ -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: {
@@ -22,11 +22,10 @@ export default {
         us: 1,
         ms: 1e3,
         s: 1e6,
-        m: 60 * 1e6,
-        h: 60 * 60 * 1e6,
-        auto: 1,
+        minute: 60 * 1e6,
+        hour: 60 * 60 * 1e6,
       },
-      defaultUnit: 'auto',
+      defaultUnit: 'ms',
       downloadUnit: 'ms',
     },
     0: {
@@ -36,7 +35,7 @@ export default {
         uA: 1e3,
         mA: 1e6,
       },
-      defaultUnit: 'uA',
+      defaultUnit: 'mA',
       downloadUnit: 'mA',
     },
     1: {

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) => {
@@ -22,11 +22,11 @@ export default {
         us: 1,
         ms: 1e3,
         s: 1e6,
-        m: 60 * 1e6,
-        h: 60 * 60 * 1e6,
-        auto: 1,
+        minute: 60 * 1e6,
+        hour: 60 * 60 * 1e6,
       },
-      defaultUnit: 'auto',
+      defaultUnit: 'ms',
+      downloadUnit: 'ms',
     },
     0: {
       name: 'I_in',
@@ -35,7 +35,7 @@ export default {
         uA: 1e3,
         mA: 1e6,
       },
-      defaultUnit: 'uA',
+      defaultUnit: 'mA',
       downloadUnit: 'mA',
     },
     1: {

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) => {
@@ -22,11 +22,10 @@ export default {
         us: 1,
         ms: 1e3,
         s: 1e6,
-        m: 60 * 1e6,
-        h: 60 * 60 * 1e6,
-        auto: 1,
+        minute: 60 * 1e6,
+        hour: 60 * 60 * 1e6,
       },
-      defaultUnit: 'auto',
+      defaultUnit: 'ms',
       downloadUnit: 'ms',
     },
     0: {
@@ -36,7 +35,7 @@ export default {
         uA: 1e3,
         mA: 1e6,
       },
-      defaultUnit: 'uA',
+      defaultUnit: 'mA',
       downloadUnit: 'mA',
     },
     1: {

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: {
@@ -22,11 +22,10 @@ export default {
         us: 1,
         ms: 1e3,
         s: 1e6,
-        m: 60 * 1e6,
-        h: 60 * 60 * 1e6,
-        auto: 1,
+        minute: 60 * 1e6,
+        hour: 60 * 60 * 1e6,
       },
-      defaultUnit: 'auto',
+      defaultUnit: 'ms',
       downloadUnit: 'ms',
     },
     0: {
@@ -36,7 +35,7 @@ export default {
         uA: 1e3,
         mA: 1e6,
       },
-      defaultUnit: 'uA',
+      defaultUnit: 'mA',
       downloadUnit: 'mA',
     },
     1: {

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: {
@@ -24,9 +24,8 @@ export default {
         s: 1e6,
         m: 60 * 1e6,
         h: 60 * 60 * 1e6,
-        auto: 1,
       },
-      defaultUnit: 'auto',
+      defaultUnit: 'ms',
       downloadUnit: 'ms',
     },
     0: {
@@ -36,7 +35,7 @@ export default {
         uA: 1e3,
         mA: 1e6,
       },
-      defaultUnit: 'uA',
+      defaultUnit: 'mA',
       downloadUnit: 'mA',
     },
     1: {

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: {
@@ -22,11 +27,10 @@ export default {
         us: 1,
         ms: 1e3,
         s: 1e6,
-        m: 60 * 1e6,
-        h: 60 * 60 * 1e6,
-        auto: 1,
+        minute: 60 * 1e6,
+        hour: 60 * 60 * 1e6,
       },
-      defaultUnit: 'auto',
+      defaultUnit: 'ms',
       downloadUnit: 'ms',
     },
     0: {
@@ -36,7 +40,7 @@ export default {
         uA: 1e3,
         mA: 1e6,
       },
-      defaultUnit: 'uA',
+      defaultUnit: 'mA',
       downloadUnit: 'mA',
     },
     1: {

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: {
@@ -22,11 +22,10 @@ export default {
         us: 1,
         ms: 1e3,
         s: 1e6,
-        m: 60 * 1e6,
-        h: 60 * 60 * 1e6,
-        auto: 1,
+        minute: 60 * 1e6,
+        hour: 60 * 60 * 1e6,
       },
-      defaultUnit: 'auto',
+      defaultUnit: 'ms',
       downloadUnit: 'ms',
     },
     0: {
@@ -36,7 +35,7 @@ export default {
         uA: 1e3,
         mA: 1e6,
       },
-      defaultUnit: 'uA',
+      defaultUnit: 'mA',
       downloadUnit: 'mA',
     },
     1: {

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: {
@@ -22,11 +22,10 @@ export default {
         us: 1,
         ms: 1e3,
         s: 1e6,
-        m: 60 * 1e6,
-        h: 60 * 60 * 1e6,
-        auto: 1,
+        minute: 60 * 1e6,
+        hour: 60 * 60 * 1e6,
       },
-      defaultUnit: 'auto',
+      defaultUnit: 'ms',
       downloadUnit: 'ms',
     },
     0: {
@@ -36,7 +35,7 @@ export default {
         uA: 1e3,
         mA: 1e6,
       },
-      defaultUnit: 'uA',
+      defaultUnit: 'mA',
       downloadUnit: 'mA',
     },
     1: {

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: {
@@ -22,11 +22,10 @@ export default {
         us: 1,
         ms: 1e3,
         s: 1e6,
-        m: 60 * 1e6,
-        h: 60 * 60 * 1e6,
-        auto: 1,
+        minute: 60 * 1e6,
+        hour: 60 * 60 * 1e6,
       },
-      defaultUnit: 'auto',
+      defaultUnit: 'ms',
       downloadUnit: 'ms',
     },
     0: {
@@ -36,7 +35,7 @@ export default {
         uA: 1e3,
         mA: 1e6,
       },
-      defaultUnit: 'uA',
+      defaultUnit: 'mA',
       downloadUnit: 'mA',
     },
     1: {

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: {
@@ -22,11 +22,10 @@ export default {
         us: 1,
         ms: 1e3,
         s: 1e6,
-        m: 60 * 1e6,
-        h: 60 * 60 * 1e6,
-        auto: 1,
+        minute: 60 * 1e6,
+        hour: 60 * 60 * 1e6,
       },
-      defaultUnit: 'auto',
+      defaultUnit: 'ms',
       downloadUnit: 'ms',
     },
     0: {
@@ -36,7 +35,7 @@ export default {
         uA: 1e3,
         mA: 1e6,
       },
-      defaultUnit: 'uA',
+      defaultUnit: 'mA',
       downloadUnit: 'mA',
     },
     1: {

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: {
@@ -22,11 +22,10 @@ export default {
         us: 1,
         ms: 1e3,
         s: 1e6,
-        m: 60 * 1e6,
-        h: 60 * 60 * 1e6,
-        auto: 1,
+        minute: 60 * 1e6,
+        hour: 60 * 60 * 1e6,
       },
-      defaultUnit: 'auto',
+      defaultUnit: 'ms',
       downloadUnit: 'ms',
     },
     0: {
@@ -36,7 +35,7 @@ export default {
         uA: 1e3,
         mA: 1e6,
       },
-      defaultUnit: 'uA',
+      defaultUnit: 'mA',
       downloadUnit: 'mA',
     },
     1: {

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
@@ -37,11 +38,10 @@ export default {
         us: 1,
         ms: 1e3,
         s: 1e6,
-        m: 60 * 1e6,
-        h: 60 * 60 * 1e6,
-        auto: 1,
+        minute: 60 * 1e6,
+        hour: 60 * 60 * 1e6,
       },
-      defaultUnit: 'auto',
+      defaultUnit: 'ms',
       downloadUnit: 'ms',
     },
     0: {
@@ -51,7 +51,7 @@ export default {
         uA: 1e3,
         mA: 1e6,
       },
-      defaultUnit: 'uA',
+      defaultUnit: 'mA',
       downloadUnit: 'mA',
     },
     1: {
@@ -61,7 +61,7 @@ export default {
         uA: 1e3,
         mA: 1e6,
       },
-      defaultUnit: 'uA',
+      defaultUnit: 'mA',
       downloadUnit: 'mA',
     },
   },

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: {
@@ -22,11 +22,10 @@ export default {
         us: 1,
         ms: 1e3,
         s: 1e6,
-        m: 60 * 1e6,
-        h: 60 * 60 * 1e6,
-        auto: 1,
+        minute: 60 * 1e6,
+        hour: 60 * 60 * 1e6,
       },
-      defaultUnit: 'auto',
+      defaultUnit: 'ms',
       downloadUnit: 'ms',
     },
     0: {
@@ -36,7 +35,7 @@ export default {
         uA: 1e3,
         mA: 1e6,
       },
-      defaultUnit: 'uA',
+      defaultUnit: 'mA',
       downloadUnit: 'mA',
     },
     1: {
@@ -50,7 +49,7 @@ export default {
       downloadUnit: 'mV',
     },
     2: {
-      name: 'Resister',
+      name: 'Resistor',
       unit: {
         mΩ: 1,
         mohm: 1,

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: {
@@ -22,11 +22,10 @@ export default {
         us: 1,
         ms: 1e3,
         s: 1e6,
-        m: 60 * 1e6,
-        h: 60 * 60 * 1e6,
-        auto: 1,
+        minute: 60 * 1e6,
+        hour: 60 * 60 * 1e6,
       },
-      defaultUnit: 'auto',
+      defaultUnit: 'ms',
       downloadUnit: 'ms',
     },
     0: {
@@ -36,7 +35,7 @@ export default {
         uA: 1e3,
         mA: 1e6,
       },
-      defaultUnit: 'uA',
+      defaultUnit: 'mA',
       downloadUnit: 'mA',
     },
     1: {

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/data/task/DataStreamBuffer.js

@@ -58,7 +58,7 @@ export const dataStreamBuffer = {
 
   into: (currentDataByChannel, currentDeviceID, currentChannel) => {
     // currentData = [ timeStart, d1, d2..... , timeEnd ]
-    // const currentData = JSON.parse(currentDataByChannel).binary.split(' ')
+    // const currentData = JSON.parse(currentDataByChannel).binary.split(' '))
     const currentData = currentDataByChannel.split(' ')
     // console.log(currentData)
     const timeStart = parseInt(currentData[0])
@@ -109,7 +109,7 @@ export const dataStreamBuffer = {
   // pop the first batch data from datastream buffer
   pop: (chartID, deviceID, channel) => {
     if (_dataStreamBuffer[chartID] != null && _dataStreamBuffer[chartID][deviceID] != null &&
-        _dataStreamBuffer[chartID][deviceID][channel] != null && _dataStreamBuffer[chartID][deviceID][channel].length > 0) {
+      _dataStreamBuffer[chartID][deviceID][channel] != null && _dataStreamBuffer[chartID][deviceID][channel].length > 0) {
       return _dataStreamBuffer[chartID][deviceID][channel].shift()
     }
     return []

src/factories/chart/chartFactory.js

@@ -1,6 +1,6 @@
-function newChart (chartID) {
+function newChart (chartID, numOfCharts) {
   return {
-    chartID: parseInt(chartID),
+    chartID: chartID,
     chartType: 'detail',
     chartDevice: 'elite', // elite or neulive
     chartMode: 0,
@@ -8,10 +8,11 @@ function newChart (chartID) {
     chartYUnit: '',
     chartXMode: 'value', // value or time
     chartYMode: 'value', // value or time
-    cardName: 'chart' + String(chartID),
+    cardName: 'chart' + String(numOfCharts),
     cardHeight: '500px',
     cardWidth: 'auto',
-    mappingID: -1,
+    mappingID: '-1',
+    createdBy: '', // manual ror default
     run: false,
     timer: 0,
     legend: {

src/factories/chart/tooltipFactory.js

@@ -23,7 +23,24 @@ function getTime (val) {
   return label
 }
 
-function newTooltip (chartID) {
+function getPhysicsQunatity (name) {
+  const label = []
+  name = name.split('_')
+  for (let i = 0; i < name.length; i++) {
+    if (name[i].includes('T')) {
+      label.push('Time')
+    } else if (name[i].includes('V')) {
+      label.push('Voltage')
+    } else if (name[i].includes('I')) {
+      label.push('Current')
+    } else if (name[i].includes('R')) {
+      label.push('Impedance')
+    }
+  }
+  return label
+}
+
+function newTooltip (realTime) {
   return {
     hideDelay: 5000,
     trigger: 'axis',
@@ -32,92 +49,48 @@ function newTooltip (chartID) {
     borderWidth: 1,
     borderRadius: 0,
     padding: 10,
-    // axisPointer: {
-    //   type: 'cross',
-    //   animation: false,
-    //   label: {
-    //     backgroundColor: '#505765',
-    //   },
-    // },
+
     formatter: function (params) {
-      if (params.length) {
-        if (params[0].seriesName.split('_')[0] === 'T' && params[0].seriesName.split('_')[1] !== 'T') {
-          params.unshift({ seriesName: 'Time', value: [null, getTime(parseFloat(params[0].value[0]))], color: '#5193f2' })
-        } else if (params[0].seriesName.split('_')[0] !== 'T' && params[0].seriesName.split('_')[1] === 'T') {
-          params.unshift({ seriesName: 'Time', value: [null, getTime(parseFloat(params[0].value[1]))], color: '#5193f2' })
-        } else {
-          params.unshift({ seriesName: 'Time', value: [null, getTime(parseFloat(params[0].value[2]))], color: '#5193f2' })
-        }
-        let tip = ''
-        for (var i = 0; i < params.length; i++) {
-          const param = params[i]
-          const style = 'color: ' + param.color
-          let value
-          // console.log(param.value)
-          if (param.seriesName === 'Time') {
-            value = param.value[1]
-          } else if (param.seriesName.split('_')[1] === 'T' && param.seriesName.split('_')[0] !== 'T') {
-            const physicalQuantity = param.seriesName.split('_')[0][param.seriesName.split('_')[0].length - 1]
-            if (physicalQuantity === 'V') {
-              value = parseFloat(param.value[0]).toFixed(3) + ' μV'
-            } else if (physicalQuantity === 'I') {
-              value = parseFloat(param.value[0]).toFixed(3) + ' nA'
-            } else if (physicalQuantity === 'R') {
-              value = parseFloat(param.value[0]).toFixed(3) + ' mΩ'
-            } else if (physicalQuantity === 'X' || physicalQuantity === 'Y' || physicalQuantity === 'Z' || physicalQuantity === 'M') {
-              value = (parseFloat(param.value[0]) / 100).toFixed(3) + ' (g)'
-            } else if (!isNaN(physicalQuantity)) {
-              value = (parseFloat(param.value[0]) / 1000).toFixed(3) + ' (mV)'
-            } else {
-              value = parseFloat(param.value[0]).toFixed(3)
-            }
-          } else if (param.seriesName.split('_')[1] !== 'T' && param.seriesName.split('_')[0] === 'T') {
-            const physicalQuantity = param.seriesName.split('_')[1][param.seriesName.split('_')[1].length - 1]
-            if (physicalQuantity === 'V') {
-              value = parseFloat(param.value[1]).toFixed(3) + ' μV'
-            } else if (physicalQuantity === 'I') {
-              value = parseFloat(param.value[1]).toFixed(3) + ' nA'
-            } else if (physicalQuantity === 'R') {
-              value = parseFloat(param.value[1]).toFixed(3) + ' mΩ'
-            } else if (physicalQuantity === 'X' || physicalQuantity === 'Y' || physicalQuantity === 'Z' || physicalQuantity === 'M') {
-              value = (parseFloat(param.value[1]) / 100).toFixed(3) + ' (g)'
-            } else if (!isNaN(physicalQuantity)) {
-              value = (parseFloat(param.value[1]) / 1000).toFixed(3) + ' (mV)'
-            } else {
-              value = parseFloat(param.value[1]).toFixed(3)
-            }
-          } else {
-            let value1
-            let value2
-            if (param.seriesName.split('_')[0][param.seriesName.split('_')[0].length - 1] === 'V') {
-              value1 = parseFloat(param.value[0]).toFixed(3) + ' μV'
-            } else if (param.seriesName.split('_')[0][param.seriesName.split('_')[0].length - 1] === 'I') {
-              value1 = parseFloat(param.value[0]).toFixed(3) + ' nA'
-            } else if (param.seriesName.split('_')[0][param.seriesName.split('_')[0].length - 1] === 'R') {
-              value1 = parseFloat(param.value[0]).toFixed(3) + ' mΩ'
-            } else {
-              value1 = parseFloat(param.value[0]).toFixed(3)
-            }
-
-            if (param.seriesName.split('_')[1][param.seriesName.split('_')[1].length - 1] === 'V') {
-              value2 = parseFloat(param.value[1]).toFixed(3) + ' μV'
-            } else if (param.seriesName.split('_')[1][param.seriesName.split('_')[1].length - 1] === 'I') {
-              value2 = parseFloat(param.value[1]).toFixed(3) + ' nA'
-            } else if (param.seriesName.split('_')[1][param.seriesName.split('_')[1].length - 1] === 'R') {
-              value2 = parseFloat(param.value[1]).toFixed(3) + ' mΩ'
-            } else {
-              value2 = parseFloat(param.value[1]).toFixed(3)
-            }
-
-            value = value1 + ', ' + value2
-          }
-          tip += '<span style="' + style + '">' +
-                            param.seriesName +
-                            '：</span><span style="' +
-                            style + '">' + value + '</span><br>'
-        }
-        return tip
+      // params is empty
+      if (!params.length && realTime.length) return params
+      // params is unempty
+      let tip = ''
+      let param // find coressonding parameter to the channel
+      let unitTable // unit is store in this object
+      let physicsQunatity // type is store here
+      let style // color
+      let value // value on cursor
+      const timeIndex = params[0].seriesName.split('_').findIndex(title => title === 'T')
+      // (Default) Time
+      if (timeIndex === -1) {
+        value = getTime(parseFloat(params[0].value[2]))
+      } else {
+        value = getTime(parseFloat(params[0].value[timeIndex]))
       }
+      tip += '<span style="color: #5193f2">' + 'Time: ' + value + '</span><br>'
+      // (Manual) Voltage, Current, Impedance
+      for (let gridIndex = 0; gridIndex < realTime.length; gridIndex++) {
+        for (let channelIndex = 0; channelIndex < realTime[gridIndex].length; channelIndex++) {
+          param = params.find(x => x.seriesName === realTime[gridIndex][channelIndex].name)
+          if (param === undefined) continue
+
+          unitTable = realTime[gridIndex][channelIndex]
+          style = 'color: ' + param.color
+          physicsQunatity = getPhysicsQunatity(param.seriesName)
+
+          tip += '<span style="' + style + '">' + param.seriesName + ':<ul  style = "list-style-type: disc; list-style-position: inside">'
+          if (physicsQunatity[0] !== 'Time') {
+            value = parseFloat(param.value[0] / unitTable.xValueScale[unitTable.xUnit]).toFixed(3) + unitTable.xUnit
+            tip += '<li>' + physicsQunatity[0] + ' = ' + value + '</li>'
+          }
+          if (physicsQunatity[1] !== 'Time') {
+            value = parseFloat(param.value[1] / unitTable.yValueScale[unitTable.yUnit]).toFixed(3) + unitTable.yUnit
+            tip += '<li>' + physicsQunatity[1] + ' = ' + value + '</li>'
+          }
+          tip += '</ul></span>'
+        }
+      }
+      return tip
     },
   }
 }

src/router/index.js

@@ -148,6 +148,16 @@ export default new Router({
           path: 'project',
           component: () => import('../components/project/Project.vue'),
         },
+        {
+          name: 'developer',
+          path: 'developer',
+          component: () => import('../components/developer/Developer.vue'),
+        },
+        {
+          name: 'debug',
+          path: 'debug',
+          component: () => import('../components/debug/Debug.vue'),
+        },
         {
           name: 'statistics',
           path: 'statistics',

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

@@ -20,27 +20,25 @@ const chartActs = {
   [typePath.initCustomizedFromCache]: async ({ state, getters, commit, dispatch }, payload) => {
     const cacheData = await localforage.getItem('chart_data')
     if (cacheData !== null) {
+      // use ID to create new chart by cache
       for (const _chart of Object.values(cacheData)) {
-        if (_chart.mappingID === -1) { // not default chart
-          const newChartID = state.taskContentChartNumber
-          dispatch(typePath.add, {
-            chartID: newChartID,
-            maxDots: _chart.maxDots,
-            gridLength: _chart.grid.length,
-          })
-          for (let gridIndex = 0; gridIndex < _chart.grid.length; gridIndex++) {
-            if (gridIndex in _chart.gridSource) {
-              dispatch(typePath.registerFromCache, {
-                chartID: newChartID,
-                gridIndex: gridIndex,
-                gridSource: _chart.gridSource[gridIndex],
-              })
-            }
+        dispatch(typePath.add, {
+          chartID: _chart.chartID,
+          maxDots: _chart.maxDots,
+          gridLength: _chart.grid.length,
+        })
+        for (let gridIndex = 0; gridIndex < _chart.grid.length; gridIndex++) {
+          if (gridIndex in _chart.gridSource) {
+            dispatch(typePath.registerFromCache, {
+              chartID: _chart.chartID,
+              gridIndex: gridIndex,
+              gridSource: _chart.gridSource[gridIndex],
+            })
           }
-          state.taskContentChartNumber++
-          dispatch(typePath.refreshPanel)
         }
+        state.chartData[_chart.chartID].createdBy = 'manual'
       }
+      dispatch(typePath.refreshPanel)
     }
   },
   /**
@@ -50,12 +48,10 @@ const chartActs = {
   [typePath.saveToCache]: async ({ state, getters, commit, dispatch }, payload) => {
     const _chartData = {}
     for (const [_id, _chart] of Object.entries(state.chartData)) {
-      if (_chart.mappingID === -1) { // not default chart
+      // manual chart clear series data
+      if (_chart.createdBy === 'manual') {
         _chartData[_id] = JSON.parse(JSON.stringify(_chart))
-        if (_chartData[_id].series.data != null) {
-          _chartData[_id].series.data.length = 0
-        }
-        _chartData[_id].series.length = 0
+        _chartData[_id].series.map((ele) => { ele.data.length = 0 })
       }
     }
     await localforage.setItem('chart_data', _chartData)
@@ -70,8 +66,8 @@ const chartActs = {
    */
   [typePath.add]: ({ state, getters, commit, dispatch }, payload) => {
     const { chartID, maxDots, gridLength } = payload
-    if (state.chartData[parseInt(chartID)] == null) {
-      state.chartData[parseInt(chartID)] = newChart(chartID)
+    if (state.chartData[chartID] == null) {
+      state.chartData[chartID] = newChart(chartID, Object.keys(state.chartData).length)
       state.chartData[chartID].maxDots = maxDots
       state.chartData[chartID].tooltip = newTooltip()
       dispatch(typePath.updateGridList, { chartID: chartID, length: gridLength })
@@ -80,6 +76,7 @@ const chartActs = {
       return state.chartData[chartID]
     }
   },
+
   /**
    * register source channel setting from cache
    *
@@ -362,7 +359,6 @@ const chartActs = {
             return parseFloat(val / 1000).toFixed(2) + 'uA'
           }
           state.chartData[chartID].chartYUnit = 'uA' // nA * 1000
-          console.log(state.chartData[chartID])
           break
         case 2:
           state.chartData[chartID].yAxis[_yAxisIndex].axisLabel.formatter = function (val) {
@@ -428,11 +424,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 +449,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 +487,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 +496,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)
       })
     }
 
@@ -515,7 +511,14 @@ const chartActs = {
     if (!state.chartData[chartID].gridSource[gridIndex].some(el => el.name === _gridSeries.name)) {
       state.chartData[chartID].gridSource[gridIndex].push(_gridSeries)
     }
-    // console.log(state.chartData[chartID])
+
+    // assign mappingID with device ID
+    if (deviceIDX >= 0) {
+      state.chartData[chartID].mappingID = deviceIDX
+    }
+    if (deviceIDY >= 0) {
+      state.chartData[chartID].mappingID = deviceIDY
+    }
     return state.chartData[chartID]
   },
   /**
@@ -547,14 +550,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 +566,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 +661,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,24 +713,12 @@ 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 (series.data.length > state.chartData[chartID].maxDots) {
-                  series.data.splice(0, series.data.length - state.chartData[chartID].maxDots)
-                }
-              } else {
-                if (series.data[series.data.length - 1][0] - series.data[0][0] > 3000000) {
-                  series.data.splice(0, popData.length)
-                }
+              if (series.data.length > state.chartData[chartID].maxDots) {
+                series.data.splice(0, series.data.length - state.chartData[chartID].maxDots)
               }
             } else if (series.yAxisSource[0] === -1) {
-              if (taskInfo.getDeviceInfo(series.xAxisSource[0]).info.library_name.indexOf('Elite') >= 0) {
-                if (series.data.length > state.chartData[chartID].maxDots) {
-                  series.data.splice(0, series.data.length - state.chartData[chartID].maxDots)
-                }
-              } else {
-                if (series.data[series.data.length - 1][1] - series.data[0][1] > 3000000) {
-                  series.data.splice(0, popData.length)
-                }
+              if (series.data.length > state.chartData[chartID].maxDots) {
+                series.data.splice(0, series.data.length - state.chartData[chartID].maxDots)
               }
             }
           }
@@ -745,8 +736,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 +881,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 +899,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 +963,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,14 +987,13 @@ const chartActs = {
     // TODO remove old buffer register
     if (_chartID != null) {
       // update only one
-      console.log(_chartID, state.chartData)
 
       dispatch(typePath.reset, {
         chartID: _chartID,
         mappingID: state.chartData[_chartID].mappingID,
         cardName: state.chartData[_chartID].cardName,
       })
-      state.chartData[_chartID].mappingID = parseInt(item.id)
+      state.chartData[_chartID].mappingID = item.id
       switch (_type) {
         case 'device':
           _chartRegisterDevice(_chartID, item)
@@ -1071,23 +1005,25 @@ 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
-          dispatch(typePath.reset, {
-            chartID: chartID,
-            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':
-              _chartRegisterDevice(chartID, item)
-              break
-            case 'formula':
-              _chartRegisterFormula(chartID, item)
-              break
+        if (state.chartData[chartID].mappingID === item.id) {
+          if (state.chartData[chartID].createdBy === 'default') {
+            isSetting = true
+            dispatch(typePath.reset, {
+              chartID: chartID,
+              mappingID: state.chartData[chartID].mappingID,
+              cardName: state.chartData[chartID].cardName,
+            })
+            state.chartData[chartID].mappingID = item.id
+            switch (_type) {
+              case 'device':
+                _chartRegisterDevice(chartID, item)
+                break
+              case 'formula':
+                _chartRegisterFormula(chartID, item)
+                break
+            }
           }
         }
       }
@@ -1110,12 +1046,13 @@ const chartActs = {
     state.chartData[chartID].legend.data.length = 0
     state.chartData[chartID].xAxis.length = 0
     state.chartData[chartID].yAxis.length = 0
+    state.chartData[chartID].gridSource.length = 0
     if (state.chartData[chartID].series.data != null) {
       state.chartData[chartID].series.data.length = 0
     }
     state.chartData[chartID].series.length = 0
     if (mappingID == null) {
-      state.chartData[chartID].mappingID = -1
+      state.chartData[chartID].mappingID = '-1'
     }
     if (cardName == null) {
       state.chartData[chartID].cardName = 'chart' + String(chartID)
@@ -1123,6 +1060,22 @@ const chartActs = {
     state.chartData[chartID].dataZoom = null
     dispatch(typePath.updateGridList, { chartID: chartID, length: 1 })
   },
+
+  /**
+   * reset chart option
+   *
+   * @param {String} chartID
+   * @param {String} mappingID
+   * @param {String} cardName
+   */
+  [typePath.resetSeriesData]: ({ state, getters, commit, dispatch }, payload) => {
+    const { chartID, mappingID } = payload
+    if (String(mappingID) === String(state.chartData[chartID].mappingID)) {
+      for (const i in state.chartData[chartID].series) {
+        state.chartData[chartID].series[i].data.length = 0
+      }
+    }
+  },
   /**
   * refresh (key++) EChart
   *
@@ -1241,6 +1194,7 @@ function makeYAxis (gridIndex, type, channel) {
     // //   // verticalAlign: 'bottom',
     // // },
     gridIndex: gridIndex,
+    boundarygap: ['0%', '50%'],
     axisTick: { show: false },
     axisLine: { show: false }, // color: '#ccc' } },
     axisLabel: {
@@ -1256,8 +1210,8 @@ function makeYAxis (gridIndex, type, channel) {
     // // },
     animation: false,
     scale: true,
-    min: 'dataMin',
-    max: 'dataMax',
+    // min: 'dataMin',
+    // max: 'dataMax',
     splitNumber: 3,
     // minInterval: 1,
     interval: null,

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.',

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

@@ -9,6 +9,7 @@ const types = {
     updateGridList: 'taskContentChartUpdateGridList',
     defaultChartGenerator: 'taskContentChartDefaultChartGenerator',
     reset: 'taskContentChartReset',
+    resetSeriesData: 'taskContentChartResetSeriesData',
     refreshData: 'taskContentChartRefreshData',
     refreshChart: 'taskContentChartRefreshChart',
     refreshPanel: 'taskContentChartRefreshPanel',

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