[update] project manager filter & table header

[update] open cf mode
[update] modify project menu device and table font & fix draggable bug
2022-11-21 17:44:33 +08:00 · 2022-11-21 16:48:29 +08:00 · 2022-11-21 16:45:44 +08:00 · 2022-11-21 15:40:35 +08:00 · 2022-11-21 11:50:30 +08:00 · 2022-11-21 11:49:12 +08:00
104 changed files with 4786 additions and 1933 deletions
@@ -1217,6 +1217,11 @@
        "@hapi/hoek": "^8.3.0"
      }
    },
+    "@hyjiacan/vue-slideout": {
+      "version": "2.5.9",
+      "resolved": "https://registry.npmjs.org/@hyjiacan/vue-slideout/-/vue-slideout-2.5.9.tgz",
+      "integrity": "sha512-SSf0QaENGt9B2We8lL5QF+gNK7/pHqUEA8SiwUKtMTDj2rbjhGYFpCD+grV7oAAynGdiEIhQ3b3Mphh9/+keBg=="
+    },
    "@intervolga/optimize-cssnano-plugin": {
      "version": "1.0.6",
      "resolved": "https://registry.npmjs.org/@intervolga/optimize-cssnano-plugin/-/optimize-cssnano-plugin-1.0.6.tgz",
@@ -15,6 +15,7 @@
  "dependencies": {
    "@fontsource/source-code-pro": "^4.5.0",
    "@fontsource/source-sans-pro": "^4.5.1",
+    "@hyjiacan/vue-slideout": "^2.5.9",
    "@types/jest": "^24.0.11",
    "amcharts3": "^3.21.14",
    "ammap3": "^3.21.14",
@@ -2,6 +2,9 @@
 <html>
  <head>
    <meta charset="utf-8">
+    <!-- <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+    <meta http-equiv="Pragma" content="no-cache" />
+    <meta http-equiv="Expires" content="0" /> -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">

@@ -30,6 +30,11 @@ import 'vue-toastification/dist/index.css'
 import api from '@/data/api/index'
 import localforage from 'localforage'

+import SlideOut from '@hyjiacan/vue-slideout'
+import '@hyjiacan/vue-slideout/lib/slideout.css'
+
+import VTooltip from 'v-tooltip'
+
 import '../metrics'
 import '../registerServiceWorker'

@@ -101,6 +106,12 @@ Vue.use(Toast)
 // Vue.use(VueMqtt, 'ws://' + '192.168.151.125' + ':8083')
 Vue.use(VueMqtt, MqttUrl)

+Vue.use(SlideOut, {
+  // set default props here
+})
+
+Vue.use(VTooltip)
+
 Vue.prototype.API = api
 Vue.prototype.GLOBAL = global_

@@ -0,0 +1,4 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.3334 1.83337H9.16671C8.15562 1.83337 7.33337 2.65562 7.33337 3.66671V7.33337H3.66671C2.65562 7.33337 1.83337 8.15562 1.83337 9.16671V18.3334C1.83337 19.3445 2.65562 20.1667 3.66671 20.1667H12.8334C13.8445 20.1667 14.6667 19.3445 14.6667 18.3334V14.6667H18.3334C19.3445 14.6667 20.1667 13.8445 20.1667 12.8334V3.66671C20.1667 2.65562 19.3445 1.83337 18.3334 1.83337ZM3.66671 18.3334V9.16671H12.8334L12.8352 18.3334H3.66671ZM18.3334 12.8334H14.6667V9.16671C14.6667 8.15562 13.8445 7.33337 12.8334 7.33337H9.16671V3.66671H18.3334V12.8334Z" fill="#B8C3CC"/>
+<path d="M5.5 11H11V12.8333H5.5V11ZM5.5 14.6667H11V16.5H5.5V14.6667Z" fill="#B8C3CC"/>
+</svg>
@@ -0,0 +1,4 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.3333 2.33325H11.6666C10.3798 2.33325 9.33331 3.37975 9.33331 4.66659V9.33325H4.66665C3.37981 9.33325 2.33331 10.3798 2.33331 11.6666V23.3333C2.33331 24.6201 3.37981 25.6666 4.66665 25.6666H16.3333C17.6201 25.6666 18.6666 24.6201 18.6666 23.3333V18.6666H23.3333C24.6201 18.6666 25.6666 17.6201 25.6666 16.3333V4.66659C25.6666 3.37975 24.6201 2.33325 23.3333 2.33325ZM4.66665 23.3333V11.6666H16.3333L16.3356 23.3333H4.66665ZM23.3333 16.3333H18.6666V11.6666C18.6666 10.3798 17.6201 9.33325 16.3333 9.33325H11.6666V4.66659H23.3333V16.3333Z" fill="white"/>
+<path d="M7 14H14V16.3333H7V14ZM7 18.6667H14V21H7V18.6667Z" fill="white"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="20" height="24" viewBox="0 0 20 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11 14.3337H13V10.8337H16V8.50041H13V5.00041H11V8.50041H8V10.8337H11V14.3337ZM6 19.0004C5.45 19.0004 4.97933 18.7721 4.588 18.3156C4.196 17.8582 4 17.3087 4 16.6671V2.66707C4 2.02541 4.196 1.47591 4.588 1.01857C4.97933 0.562018 5.45 0.33374 6 0.33374H18C18.55 0.33374 19.021 0.562018 19.413 1.01857C19.8043 1.47591 20 2.02541 20 2.66707V16.6671C20 17.3087 19.8043 17.8582 19.413 18.3156C19.021 18.7721 18.55 19.0004 18 19.0004H6ZM6 16.6671H18V2.66707H6V16.6671ZM2 23.6671C1.45 23.6671 0.979333 23.4388 0.588 22.9822C0.196 22.5249 0 21.9754 0 21.3337V5.00041H2V21.3337H16V23.6671H2Z" fill="white"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.2132 12.6274L6.97054 8.38479L2.7279 12.6274L1.31369 11.2132L5.55633 6.97058L1.31369 2.72794L2.7279 1.31373L6.97054 5.55637L11.2132 1.31373L12.6274 2.72794L8.38475 6.97058L12.6274 11.2132L11.2132 12.6274Z" fill="#B8C3CC" stroke="#B8C3CC" stroke-linejoin="round"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="19" height="21" viewBox="0 0 19 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.87524 20.625C3.25649 20.625 2.72699 20.4049 2.28674 19.9646C1.84574 19.5236 1.62524 18.9938 1.62524 18.375V3.75H0.500244V1.5H6.12524V0.375H12.8752V1.5H18.5002V3.75H17.3752V18.375C17.3752 18.9938 17.1551 19.5236 16.7149 19.9646C16.2739 20.4049 15.744 20.625 15.1252 20.625H3.87524ZM15.1252 3.75H3.87524V18.375H15.1252V3.75ZM6.12524 16.125H8.37524V6H6.12524V16.125ZM10.6252 16.125H12.8752V6H10.6252V16.125Z" fill="white"/>
+</svg>
@@ -0,0 +1,8 @@
+<svg width="36" height="38" viewBox="0 0 36 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_3_20" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="36" height="38">
+<rect width="36" height="38" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_3_20)">
+<path d="M25.737 18.6561C25.5543 18.849 25.5543 19.151 25.737 19.3439L30.8113 24.7L29.4 26.1897L22.5888 19L29.4 11.8103L30.8113 13.3L25.737 18.6561ZM5 28V25.8333H23.5V28H5ZM5 20.0833V17.9167H19V20.0833H5ZM5 12.1667V10H23.5V12.1667H5Z" fill="#768B9B" stroke="#768B9B" stroke-linejoin="round"/>
+</g>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="26" height="30" viewBox="0 0 26 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24.6304 15L1.9413 27.9904V2.00962L24.6304 15Z" fill="white" stroke="white" stroke-width="2.5" stroke-linejoin="round"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.75012 18.7498V11.2498H1.25012V8.74976H8.75012V1.24976H11.2501V8.74976H18.7501V11.2498H11.2501V18.7498H8.75012Z" fill="white" stroke="white" stroke-linejoin="round"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.25 1.5C2.78587 1.5 2.34075 1.68437 2.01256 2.01256C1.68437 2.34075 1.5 2.78587 1.5 3.25V18.75C1.50001 19.1708 1.65165 19.5775 1.92714 19.8956C2.20263 20.2137 2.58351 20.4219 3 20.482V13.25C3 12.6533 3.23705 12.081 3.65901 11.659C4.08097 11.2371 4.65326 11 5.25 11H16.75C17.3467 11 17.919 11.2371 18.341 11.659C18.7629 12.081 19 12.6533 19 13.25V20.482C19.4165 20.4219 19.7974 20.2137 20.0729 19.8956C20.3483 19.5775 20.5 19.1708 20.5 18.75V5.786C20.5 5.321 20.316 4.876 19.987 4.548L17.452 2.013C17.2895 1.85035 17.0965 1.72133 16.884 1.63331C16.6716 1.54528 16.4439 1.49998 16.214 1.5H16V5.75C16 6.04547 15.9418 6.33805 15.8287 6.61104C15.7157 6.88402 15.5499 7.13206 15.341 7.34099C15.1321 7.54992 14.884 7.71566 14.611 7.82873C14.3381 7.9418 14.0455 8 13.75 8H7.25C6.65326 8 6.08097 7.76295 5.65901 7.34099C5.23705 6.91903 5 6.34674 5 5.75V1.5H3.25ZM6.5 1.5V5.75C6.5 6.164 6.836 6.5 7.25 6.5H13.75C13.9489 6.5 14.1397 6.42098 14.2803 6.28033C14.421 6.13968 14.5 5.94891 14.5 5.75V1.5H6.5ZM17.5 20.5V13.25C17.5 13.0511 17.421 12.8603 17.2803 12.7197C17.1397 12.579 16.9489 12.5 16.75 12.5H5.25C5.05109 12.5 4.86032 12.579 4.71967 12.7197C4.57902 12.8603 4.5 13.0511 4.5 13.25V20.5H17.5ZM0 3.25C0 2.38805 0.34241 1.5614 0.951903 0.951903C1.5614 0.34241 2.38805 0 3.25 0H16.215C17.0769 5.14719e-05 17.9035 0.342495 18.513 0.952L21.048 3.487C21.658 4.097 22 4.924 22 5.786V18.75C22 19.612 21.6576 20.4386 21.0481 21.0481C20.4386 21.6576 19.612 22 18.75 22H3.25C2.38805 22 1.5614 21.6576 0.951903 21.0481C0.34241 20.4386 0 19.612 0 18.75V3.25Z" fill="white"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="25" height="22" viewBox="0 0 25 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.7246 13.3226L23.2481 20.2889L22.872 20.6372L15.2354 13.5662L14.627 13.0029L13.9608 13.4964C13.3939 13.9164 12.7313 14.257 11.9636 14.5122C11.2143 14.7612 10.4084 14.8889 9.54002 14.8889C7.37746 14.8889 5.59555 14.2043 4.13159 12.8488C2.66996 11.4954 1.96002 9.88006 1.96002 7.94444C1.96002 6.00883 2.66996 4.39346 4.13159 3.04009C5.59555 1.68457 7.37746 1 9.54002 1C11.7026 1 13.485 1.68458 14.95 3.04027C16.4105 4.39351 17.12 6.00882 17.12 7.94444C17.12 8.7236 16.9867 9.44582 16.7256 10.1191C16.4567 10.8127 16.0964 11.4153 15.6473 11.9351L15.0157 12.6662L15.7246 13.3226ZM14.4273 12.5749L14.4279 12.5744C15.7797 11.3218 16.48 9.76006 16.48 7.94444C16.48 6.12883 15.7797 4.56711 14.4279 3.3145L14.4273 3.31398C13.0775 2.06509 11.4285 1.44444 9.54002 1.44444C7.65159 1.44444 6.00256 2.06509 4.65273 3.31398L4.65217 3.3145C3.30039 4.56711 2.60002 6.12883 2.60002 7.94444C2.60002 9.76006 3.30039 11.3218 4.65217 12.5744L4.65273 12.5749C6.00256 13.8238 7.65158 14.4444 9.54002 14.4444C11.4285 14.4444 13.0775 13.8238 14.4273 12.5749Z" fill="#2C4053" stroke="#B8C3CC" stroke-width="2"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect rx="5" ry="5" width="25" height="25" style="fill: white;"/>
+</svg>
@@ -10,6 +10,7 @@
    <language-dropdown class="app-navbar-actions__item"/> -->
    <license-check-button :ref="'license_check_button_ref'" @updateLicense="updateLicense"/>
    <license-update-modal :title="'Update'" :ref="'license_update_modal_ref'" @refresh="refresh"/>
+    <va-button @click="reload"  icon="fa fa-refresh" flat></va-button>
    <profile-dropdown class="app-navbar-actions__item app-navbar-actions__item--profile">
      <span>{{userName}}</span>
    </profile-dropdown>
@@ -70,6 +71,9 @@ export default {
      this.$refs.license_check_button_ref.refresh()
      this.$refs.license_update_modal_ref.hide()
    },
+    reload () {
+      window.location.reload(true)
+    },
  },
 }
 </script>
@@ -379,8 +379,8 @@ export default {
        toolbox: ['rect', 'clear'],
        // toolbox: ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear'],
        xAxisIndex: 0,
-        // throttleType: 'debounce',
-        // throttleDelay: 5,
+        throttleType: 'debounce',
+        throttleDelay: 0,
      }
      this.showChartLoading('detail')
      const timeDur = this.endTimeCurrent - this.startTimeCurrent
@@ -394,7 +394,7 @@ export default {
        })

        let scale = '1'
-        if (this.controlPanel.x.type === 'Time') {
+        if (this.controlPanel.x.axis.description === 'Time') {
          scale = await this.computeResampleScale(metaInfo, timeDur)
        }
        // elite的sample rate不像neulive這麼高，因此試試scale = 100 or 1000時不要再sampling一次了，不然有些形狀（e.g. peak）會不一樣
@@ -413,11 +413,11 @@ export default {
        this.currentScale = scale
        this.chartDetailData.series[_gridNumber].data.length = 0
        let dataListX
-        const channelX = parseInt(this.controlPanel.x.channel)
-        if (this.controlPanel.x.type !== 'Time') {
+        const channelX = parseInt(this.controlPanel.x.axis.channel)
+        if (this.controlPanel.x.axis.description !== 'Time') {
          dataListX = this.dataInfo[meta][channelX][scale]
        }
-        const channelY = parseInt(this.controlPanel.y.channel)
+        const channelY = parseInt(this.controlPanel.y.axis.channel)
        const dataListY = this.dataInfo[meta][channelY][scale]

        const isThisModeHasCycle = this.GLOBAL.hasCycleMode(metaInfo.parameter_set.MODE, metaInfo.device.library_name)
@@ -464,7 +464,7 @@ export default {
        for (let i = startIndex; i <= endIndex; i++) {
          const data = await this.getData(parseInt(scale), this.sampleMethod, dataListY[i].id, channelY, metaInfo)
          let dataX
-          if (this.controlPanel.x.type !== 'Time') {
+          if (this.controlPanel.x.axis.description !== 'Time') {
            dataX = await this.getData(parseInt(scale), this.sampleMethod, dataListX[i].id, channelX, metaInfo)
          }
          var deltaX = 0
@@ -566,7 +566,7 @@ export default {
          }
        }

-        if (this.controlPanel.x.type === 'Time') {
+        if (this.controlPanel.x.axis.description === 'Time') {
          this.chartDetailData.xAxis[_gridNumber].min = _startTime
          this.chartDetailData.xAxis[_gridNumber].max = _endTime
        } else {
@@ -576,7 +576,7 @@ export default {
        _gridNumber += 1
      }

-      if (this.controlPanel.x.type !== 'Time') {
+      if (this.controlPanel.x.axis.description !== 'Time') {
        this.showOverviewChart = false
        this.detailchartheight = '88vh'
        // this.$refs.chart_detail.updateChartHeight()
@@ -652,8 +652,8 @@ export default {
      // tang
      if (this.initDone) {
        const libName = this.metaList[gridIndex].device.library_name
-        const xType = (this.controlPanel.x.type === 'Time') ? 'Time' : ((libName === 'EliteZM15' || libName.includes('Elite_EDC') ? 'Elite' : 'EliteEIS'))
-        const xChannel = (this.controlPanel.x.channel === -1) ? undefined : this.controlPanel.x.channel + 1
+        const xType = (this.controlPanel.x.axis.description === 'Time') ? 'Time' : ((libName === 'EliteZM15' || libName.includes('Elite_EDC') ? 'Elite' : 'EliteEIS'))
+        const xChannel = (this.controlPanel.x.axis.channel === -1) ? undefined : this.controlPanel.x.axis.channel + 1
        this.updateRegisteredChart({
          chartAllData: this.chartData,
          chartID: this.chartDetailData.chartID,
@@ -663,10 +663,10 @@ export default {
          channelX: xChannel,
          deviceNameY: libName.includes('EIS') ? 'EliteEIS' : 'Elite',
          deviceIDY: '',
-          channelY: this.controlPanel.y.channel + 1,
+          channelY: this.controlPanel.y.axis.channel + 1,
        })
      }
-      if (this.controlPanel.x.type === 'Time') {
+      if (this.controlPanel.x.axis.description === 'Time') {
        this.drawOverviewData()
      }
      this.drawDetailData() // reDraw
@@ -107,12 +107,12 @@ export default {
  async mounted () {
    this.resizeTimer = setInterval(this.resize, 1000)
    // brush set at here won't work
-    /* this.data.brush = {
+    this.data.brush = {
      toolbox: ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear'],
      xAxisIndex: 0,
      throttleType: 'debounce',
-      throttleDelay: 5,
-    } */
+      throttleDelay: 0,
+    }
    this.$refs.chart_ref.chart.on('brushSelected', (params) => {
      if (params.batch[0] && params.batch[0].areas.length !== 0) {
        var boundary = {
@@ -12,77 +12,34 @@
          <delete-file />
        </div>
      </div>
-
-      <!-- <div class="flex-container mb-2" v-show='false'>
-        <div class="flex sm2 xl2 md2 xs2 px-0 py-0">
-          <p class="display-6"> X-axis </p>
-        </div>
-        <div class="flex sm5 xl5 md5 xs5 pl-1 pr-0 py-0">
-          <change-axis :ref="'change_axis_x'" axis="x" @changeAxis="changeAxis" @changeUnit="changeUnit" @clearCycle="clearCycle"/>
-        </div>
-        <div class="flex sm5 xl5 md5 xs5 pl-1 pr-0 py-0">
-          <change-unit :ref="'change_unit_x'" axis="x" @refreshChart="refreshChart"/>
-        </div>
-      </div>
-      <div class="flex-container mb-2"  v-show='false'>
-        <div class="flex sm2 xl2 md2 xs2 px-0 py-0" />
-        <div class="flex sm5 xl5 md5 xs5 pl-1 pr-0 py-0">
-          <change-scale :ref="'change_scale_x'" axis="x" @refreshChart="refreshChart" @clearCycle="clearCycle" @changeAxis="changeAxis" @changeFunctional="changeFunctional"/>
-        </div>
-        <div class="flex sm5 xl5 md5 xs5 px-0 py-0">
-          <abs-toggle :ref="'abs_x'" axis="x" @changeAxis="changeAxis"/>
-        </div>
-      </div> -->
-
-      <!-- <div class="flex-container mb-2"  v-show='false'>
-        <div class="flex sm2 xl2 md2 xs2 px-0 py-0">
-          <p class="display-6"> Y-axis </p>
-        </div>
-        <div class="flex sm5 xl5 md5 xs5 pl-1 pr-0 py-0">
-          <change-axis :ref="'change_axis_y'" axis="y" @changeAxis="changeAxis" @changeUnit="changeUnit" @clearCycle="clearCycle"/>
-        </div>
-        <div class="flex sm5 xl5 md5 xs5 pl-1 pr-0 py-0">
-          <change-unit :ref="'change_unit_y'" axis="y" @refreshChart="refreshChart"/>
-        </div>
-      </div>
-      <div class="flex-container mb-2"  v-show='false'>
-        <div class="flex sm2 xl2 md2 xs2 px-0 py-0" />
-        <div class="flex sm5 xl5 md5 xs5 pl-1 pr-0 py-0">
-          <change-scale :ref="'change_scale_y'" axis="y" @refreshChart="refreshChart" @clearCycle="clearCycle" @changeAxis="changeAxis" @changeFunctional="changeFunctional"/>
-        </div>
-        <div class="flex sm5 xl5 md5 xs5 px-0 py-0">
-          <abs-toggle :ref="'abs_y'" axis="y" @changeAxis="changeAxis"/>
-        </div>
-      </div> -->
-      <!-- <va-button @click="switchCollapse"></va-button>
-      <va-collapse class="mb-2" :isOpenDefault="false" v-model="innerCollapse">
-        <span slot="header">Specific Integral</span>
-        <div slot="body">
-          <div>
-            <specific-integral :ref="'specific_integral'" @setBrushBoundary="setBrushBoundary" />
-          </div>
-        </div>
-      </va-collapse> -->
-      <!-- tang -->
      <div class="flex-container mb-2">
        <div class="flex sm2 xl2 md2 xs2 px-0 py-0">
          <p class="display-6"> X-Axis </p>
        </div>
        <div class="flex sm5 xl5 md5 xs5 pl-1 pr-0 py-0">
-          <change-axis-b :ref="'axis_x'" axis="x" @changeAxis="changeAxis"/>
+          <control-axis
+            :ref="'axis_x'"
+            coordinate="x"
+            @changeAxis="changeAxis"
+          />
        </div>
        <div class="flex sm5 xl5 md5 xs5 pl-1 pr-0 py-0">
-          <change-unit-b
+          <control-unit
            :ref="'unit_x'"
-            axis="x"
-            @changeUnit="refreshFormatter"
+            coordinate="x"
+            @changeUnit="changeUnit"
+            style="width: 75px;"
          />
        </div>
      </div>
      <div class="flex-container mb-2">
        <div class="flex sm2 xl2 md2 xs2 px-0 py-0" />
        <div class="flex sm5 xl5 md5 xs5 pl-1 pr-0 py-0">
-          <change-funct-b :ref="'funct_x'" axis="x" @changeFunct="changeFunct"/>
+          <control-funct
+            :ref="'funct_x'"
+            coordinate="x"
+            @changeFunct="changeFunct"
+          />
        </div>
      </div>
      <div class="flex-container mb-2">
@@ -90,23 +47,28 @@
          <p class="display-6"> Y-Axis </p>
        </div>
        <div class="flex sm5 xl5 md5 xs5 pl-1 pr-0 py-0">
-          <change-axis-b
+          <control-axis
            :ref="'axis_y'"
-            axis="y"
+            coordinate="y"
            @changeAxis="changeAxis"
          />
        </div>
        <div class="flex sm5 xl5 md5 xs5 pl-1 pr-0 py-0">
-          <change-unit-b
+          <control-unit
            :ref="'unit_y'"
-            axis="y"
-            @changeUnit="refreshFormatter"/>
+            coordinate="y"
+            @changeUnit="changeUnit"
+            style="width: 75px;"
+          />
        </div>
      </div>
      <div class="flex-container mb-2">
        <div class="flex sm2 xl2 md2 xs2 px-0 py-0" />
        <div class="flex sm5 xl5 md5 xs5 pl-1 pr-0 py-0">
-          <change-funct-b :ref="'funct_y'" axis="y" @changeFunct="changeFunct"/>
+          <control-funct
+            :ref="'funct_y'"
+            coordinate="y"
+            @changeFunct="changeFunct"/>
        </div>
      </div>
      <specific-integral :ref="'specific_integral'" @setBrushBoundary="setBrushBoundary"/>
@@ -127,14 +89,10 @@

 <script>
 import ShowResampleRate from '@/components/analysis/replay/toolbox/ShowResampleRate.vue'
-// import ChangeAxis from '@/components/analysis/replay/toolbox/ChangeAxis.vue'
-import ChangeAxisB from '@/components/analysis/replay/toolbox/ChangeAxisB.vue'
-// import ChangeUnit from '@/components/analysis/replay/toolbox/ChangeUnit.vue'
-import ChangeUnitB from '@/components/analysis/replay/toolbox/ChangeUnitB.vue'
-// import ChangeScale from '@/components/analysis/replay/toolbox/ChangeScale.vue'
-import ChangeFunctB from '@/components/analysis/replay/toolbox/ChangeFunctB.vue'
+import controlAxis from '@/components/analysis/replay/toolbox/ControlAxis'
+import controlUnit from '@/components/analysis/replay/toolbox/ControlUnit'
+import controlFunct from '@/components/analysis/replay/toolbox/ControlFunct'
 import ChangeCycle from '@/components/analysis/replay/toolbox/ChangeCycle.vue'
-// import AbsToggle from '@/components/analysis/replay/toolbox/AbsToggle.vue'
 import SpecificIntegral from '@/components/analysis/replay/toolbox/SpecificIntegral.vue'
 import DownloadFile from '@/components/analysis/replay/toolbox/DownloadFile.vue'
 import DeleteFile from '@/components/analysis/replay/toolbox/DeleteFile.vue'
@@ -145,15 +103,16 @@ import ChangeWindowStartAndSize from '@/components/analysis/replay/toolbox/Chang
 import { mapMutations } from 'vuex'
 import { mapFields } from 'vuex-map-fields'
 import { tableRouter } from '@/components/analysis/replay/toolbox/EliteReplayTable'
+import configRouter from '@/components/analysis/replay/toolbox/configTable'
 import types from '@/store/modules/analysis/replay/types'

 export default {
  name: 'top-control-panel',
  components: {
    ShowResampleRate,
-    ChangeAxisB,
-    ChangeUnitB,
-    ChangeFunctB,
+    controlAxis,
+    controlUnit,
+    controlFunct,
    ChangeCycle,
    SpecificIntegral,
    DownloadFile,
@@ -171,76 +130,87 @@ export default {
      'controlPanel',
    ]),
  },
-  props: {
-  },
-  async created () {
-  },
  data () {
    return {
-      deviceName: '',
+      libraryName: '',
      showCycle: false,
      innerCollapse: false,
      tableRouter,
+      configRouter,
    }
  },
  methods: {
    ...mapMutations('replay', [types.chart.updateAxisLabel]),
-    refreshFormatter (axis) {
-      this.updateAxisLabelChart({
-        chartID: 1,
-        axis: axis,
-        axisIndex: 0,
-      })
-    },
-    changeFunct (axis) {
-      this.refreshUnit()
-      this.refreshFormatter(axis)
-      this.$emit('changeFunctional', axis, this.controlPanel[axis].funct)
-      this.$emit('changeAxis', 0)
-    },
-    refreshAxis () {
-      const xType = this.controlPanel.x.type
-      const yType = this.controlPanel.y.type
-      const xFunct = this.controlPanel.x.funct
-      const yFunct = this.controlPanel.y.funct
-      this.$refs.axis_x.refreshAxis(xType, xFunct, yType, yFunct)
-      this.$refs.axis_y.refreshAxis(xType, xFunct, yType, yFunct)
-    },
-    refreshUnit (axis) {
-      const xType = this.controlPanel.x.type
-      const yType = this.controlPanel.y.type
-      const xFunct = this.controlPanel.x.funct
-      const yFunct = this.controlPanel.y.funct
-      if (axis === 'x') {
-        this.$refs.unit_x.refreshUnit(xType, xFunct, yType, yFunct)
-      } else {
-        this.$refs.unit_y.refreshUnit(xType, xFunct, yType, yFunct)
-      }
-    },
+    // initialize control buttons
    init () {
-      //
-      this.deviceName = this.metaList[0].device.library_name
-      // tang
-      this.initDefaultControlPanel()
-      this.$refs.axis_x.init()
-      this.$refs.funct_x.init()
-      this.$refs.unit_x.init(this.controlPanel.x.type)
-      this.$refs.axis_y.init()
-      this.$refs.funct_y.init()
-      this.$refs.unit_y.init(this.controlPanel.y.type)
-      // prev
-      // this.$refs.change_unit_x.init(this.deviceName)
-      // this.$refs.change_unit_y.init(this.deviceName)
-      // this.$refs.change_axis_x.init(this.deviceName)
-      // this.$refs.change_axis_y.init(this.deviceName)
-      // this.$refs.change_scale_x.init(this.deviceName)
-      // this.$refs.change_scale_y.init(this.deviceName)
-      // this.$refs.abs_x.init(this.deviceName)
-      // this.$refs.abs_y.init(this.deviceName)
+      // get config information
+      this.libraryName = this.metaList[0].device.library_name
+      const setting = this.GLOBAL.getDefaultChartTypeByMode(this.metaList[0].parameter_set.MODE, this.libraryName)
+      this.controlPanel.x.axis = this.configRouter.getAxis(this.libraryName, setting[0], setting[1])
+      this.controlPanel.y.axis = this.configRouter.getAxis(this.libraryName, setting[2], setting[3])
+      this.controlPanel.FSM = this.configRouter.getFSM(this.controlPanel.x.axis.description, this.controlPanel.y.axis.description)
+      // initialize other blocks
+      this.$refs.axis_x.init(this.libraryName, setting[0])
+      this.$refs.axis_y.init(this.libraryName, setting[2])
+      this.$refs.unit_x.init(this.controlPanel.x.axis.description)
+      this.$refs.unit_y.init(this.controlPanel.y.axis.description)
+      this.$refs.funct_x.init(this.controlPanel.x.axis.description, this.controlPanel.y.axis.description)
+      this.$refs.funct_y.init(this.controlPanel.x.axis.description, this.controlPanel.y.axis.description)
      this.$refs.change_cycle.init()
      this.$refs.edit_file_name.init()
-      this.$refs.show_param.init(this.deviceName)
+      this.$refs.show_param.init(this.libraryName)
      this.$refs.change_window_start_and_size.init()
+      this.refreshFormatter('x')
+      this.refreshFormatter('y')
+      this.$emit('changeFunctional', 'x', 'Linear')
+      this.$emit('changeFunctional', 'y', 'Linear')
+      this.$emit('changeAxis', 0)
+      this.$refs.specific_integral.checkMeaning(this.controlPanel.x.axis.description, this.controlPanel.y.axis.description)
+      this.$refs.specific_integral.setDisplayParam(this.controlPanel.x.axis.description, this.controlPanel.x.unit, this.controlPanel.y.axis.description, this.controlPanel.y.unit)
+    },
+    /* changeXXX: activate when pressing XXX button */
+    // trigger when changing the axis type
+    changeAxis (gridIndex) {
+      this.controlPanel.FSM = this.configRouter.getFSM(this.controlPanel.x.axis.description, this.controlPanel.y.axis.description)
+      // initialize other blocks
+      this.$refs.unit_x.init(this.controlPanel.x.axis.description)
+      this.$refs.unit_y.init(this.controlPanel.y.axis.description)
+      this.$refs.funct_x.init(this.controlPanel.x.axis.description, this.controlPanel.y.axis.description)
+      this.$refs.funct_y.init(this.controlPanel.x.axis.description, this.controlPanel.y.axis.description)
+      this.$refs.change_cycle.init()
+      this.refreshFormatter('x')
+      this.refreshFormatter('y')
+      this.$emit('changeFunctional', 'x', 'Linear')
+      this.$emit('changeFunctional', 'y', 'Linear')
+      this.$emit('changeAxis', gridIndex)
+      this.$refs.specific_integral.checkMeaning(this.controlPanel.x.axis.description, this.controlPanel.y.axis.description)
+      this.$refs.specific_integral.setDisplayParam(this.controlPanel.x.axis.description, this.controlPanel.x.unit, this.controlPanel.y.axis.description, this.controlPanel.y.unit)
+    },
+    // trigger when changing the unit
+    changeUnit (coordinate) {
+      this.refreshFormatter(coordinate)
+      this.$refs.specific_integral.refreshDisplayParam(this.controlPanel.x.axis.description, this.controlPanel.x.unit, this.controlPanel.y.axis.description, this.controlPanel.y.unit)
+    },
+    // trigger when press the functional button
+    changeFunct (coordinate) {
+      if (coordinate === 'y') {
+        this.controlPanel.y.axis.description = this.controlPanel.FSM[this.controlPanel.y.funct]
+        this.$refs.unit_y.init(this.controlPanel.y.axis.description)
+        this.$refs.specific_integral.checkMeaning(this.controlPanel.x.axis.description, this.controlPanel.y.axis.description)
+        this.refreshFormatter(coordinate)
+      }
+      this.$emit('changeFunctional', coordinate, this.controlPanel[coordinate].funct)
+      this.$emit('changeAxis', 0)
+    },
+    /* refreshXXX: passively called by changeXXX function to refresh some setting */
+    // refresh all formatters of charts
+    refreshFormatter (coordinate) {
+      this.updateAxisLabelChart({
+        chartID: 1,
+        axis: coordinate,
+        type: this.controlPanel[coordinate].axis.description,
+        axisIndex: 0,
+      })
    },
    changeOverviewDataZoom () {
      this.$emit('changeOverviewDataZoom')
@@ -248,145 +218,12 @@ export default {
    refreshChart (options) {
      this.$emit('refreshChart', options)
    },
-    changeFunctional (axis, functional) {
-      this.$emit('changeFunctional', axis, functional)
-    },
-    changeAxis (gridIndex) {
-      this.$refs.funct_x.init()
-      this.$refs.funct_y.init()
-      this.$refs.unit_x.init(this.controlPanel.x.type)
-      this.$refs.unit_y.init(this.controlPanel.y.type)
-      this.refreshFormatter('x')
-      this.refreshFormatter('y')
-      this.$emit('changeFunctional', 'x', 'Linear')
-      this.$emit('changeFunctional', 'y', 'Linear')
-      this.$emit('changeAxis', gridIndex)
-    },
-    changeUnit (axis) {
-      if (axis === 'x') {
-        this.$refs.change_unit_x.changeUnitByAxis()
-      } else if (axis === 'y') {
-        this.$refs.change_unit_y.changeUnitByAxis()
-      }
-    },
    clearCycle () {
      this.$refs.change_cycle.clear()
    },
    setBrushBoundary (boundary) {
      this.$emit('setBrushBoundary', boundary)
    },
-    /* switchCollapse () {
-      this.innerCollapse = this.innerCollapse ? false : true
-      console.log(this.innerCollapse)
-    }, */
-    initDefaultControlPanel () {
-      // use state meta to decide which default unit need to be used (like check I-V mode...)
-      const setting = this.GLOBAL.getDefaultChartTypeByMode(this.metaList[0].parameter_set.MODE, this.deviceName)
-
-      // x-axis
-      let settingType = setting[0]
-      let settingValue = setting[1]
-
-      if (this.deviceName === 'EliteZM15' || this.deviceName.includes('Elite_EDC')) {
-        if (settingType === 'Elite') {
-          // 1: I, 2: V, 3: R, 4: cycle
-          if (settingValue === 1) {
-            this.controlPanel.x.type = 'Current'
-            this.controlPanel.x.channel = 0
-          } else if (settingValue === 2) {
-            this.controlPanel.x.type = 'Voltage'
-            this.controlPanel.x.channel = 1
-          } else if (settingValue === 3) {
-            this.controlPanel.x.type = 'Resistance'
-            this.controlPanel.x.channel = 2
-          } else if (settingValue === 4) {
-            this.controlPanel.x.type = 'Cycle'
-            this.controlPanel.x.channel = 3
-          }
-        } else if (settingType === 'Time') {
-          this.controlPanel.x.type = 'Time'
-          this.controlPanel.x.channel = undefined
-        }
-      } else if (this.deviceName.includes('EIS')) {
-        if (settingType.includes('EIS')) {
-          if (settingValue === 3) {
-            this.controlPanel.x.type = 'Frequency'
-          } else if (settingValue === 5 || settingValue === 6 || settingValue === 7) {
-            this.controlPanel.x.type = 'Impedance'
-          } else if (settingValue === 8) {
-            this.controlPanel.x.type = 'Phase'
-          } else if (settingValue === 9) {
-            this.controlPanel.x.type = 'Current'
-          } else if (settingValue === 10) {
-            this.controlPanel.x.type = 'Default'
-          }
-        } else if (settingType === 'Elite') {
-          // 1: I, 2: V, 3: R
-          if (settingValue === 1) {
-            this.controlPanel.x.type = 'Current'
-          } else if (settingValue === 2) {
-            this.dataTcontrolPanel.xype = 'Voltage'
-          } else if (settingValue === 3) {
-            this.controlPanel.x.type = 'Resistance'
-          }
-        } else if (settingType === 'Time') {
-          this.controlPanel.x.type = 'Time'
-        }
-      }
-
-      // y-axis
-      settingType = setting[2]
-      settingValue = setting[3]
-
-      if (this.deviceName === 'EliteZM15' || this.deviceName.includes('Elite_EDC')) {
-        if (settingType === 'Elite') {
-          // 1: I, 2: V, 3: R, 4: cycle
-          if (settingValue === 1) {
-            this.controlPanel.y.type = 'Current'
-            this.controlPanel.y.channel = 0
-          } else if (settingValue === 2) {
-            this.controlPanel.y.type = 'Voltage'
-            this.controlPanel.y.channel = 1
-          } else if (settingValue === 3) {
-            this.controlPanel.y.type = 'Resistance'
-            this.controlPanel.y.channel = 2
-          } else if (settingValue === 4) {
-            this.controlPanel.y.type = 'Cycle'
-            this.controlPanel.y.channel = 3
-          }
-        } else if (settingType === 'Time') {
-          this.controlPanel.y.type = 'Time'
-          this.controlPanel.y.channel = undefined
-        }
-      } else if (this.deviceName.includes('EIS')) {
-        if (settingType.includes('EIS')) {
-          if (settingValue === 3) {
-            this.controlPanel.y.type = 'Frequency'
-          } else if (settingValue === 5 || settingValue === 6 || settingValue === 7) {
-            this.controlPanel.y.type = 'Impedance'
-          } else if (settingValue === 8) {
-            this.controlPanel.y.type = 'Phase'
-          } else if (settingValue === 9) {
-            this.controlPanel.y.type = 'Current'
-          } else if (settingValue === 10) {
-            this.controlPanel.y.type = 'Default'
-          }
-        } else if (settingType === 'Elite') {
-          // 1: I, 2: V, 3: R
-          if (settingValue === 1) {
-            this.controlPanel.y.type = 'Current'
-          } else if (settingValue === 2) {
-            this.dataTcontrolPanel.xype = 'Voltage'
-          } else if (settingValue === 3) {
-            this.controlPanel.y.type = 'Resistance'
-          }
-        } else if (settingType === 'Time') {
-          this.controlPanel.y.type = 'Time'
-        }
-      }
-    },
-  },
-  mounted () {
  },
 }
 </script>
@@ -1,81 +0,0 @@
-<template>
-  <div>
-    <va-select
-      v-model="controlPanel[axis].type"
-      testBy="name"
-      class="va-select-without-margin"
-      :options="typeOption"
-      :noClear='true'
-      @input="changeAxis()"
-    />
-  </div>
-</template>
-
-<script>
-import { mapFields } from 'vuex-map-fields'
-import { tableRouter } from '@/components/analysis/replay/toolbox/EliteReplayTable'
-
-export default {
-  name: 'change-axis-b',
-  props: {
-    axis: {
-      type: String, // x or y
-    },
-  },
-  data () {
-    return {
-      typeOption: [],
-      tableRouter,
-    }
-  },
-  computed: {
-    ...mapFields('replay', [
-      'controlPanel',
-    ]),
-  },
-  methods: {
-    init (type) {
-      if (this.axis === 'x') {
-        this.typeOption = [
-          'Time',
-          'Current',
-          'Voltage',
-          'Resistance',
-        ]
-      } else {
-        this.typeOption = [
-          'Current',
-          'Voltage',
-          'Resistance',
-        ]
-      }
-      // init call change Axis
-      if (this.axis === 'y') {
-        this.$emit('changeAxis', 0) // temporarily use metaIndex for gridIndex
-      }
-    },
-    refreshAxis (xType, xFunct, yType, yFunct) {
-      const [xTable, yTable] = this.tableRouter.getTable(xType, xFunct, yType, yFunct)
-      if (this.axis === 'x') {
-        this.controlPanel[this.axis].type = xTable.name
-        this.controlPanel[this.axis].channel = xTable.channel
-      } else {
-        this.controlPanel[this.axis].type = yTable.name
-        this.controlPanel[this.axis].channel = yTable.channel
-      }
-    },
-    changeAxis () {
-      this.controlPanel[this.axis].channel = tableRouter.getChannel(this.controlPanel[this.axis].type)
-      this.$emit('changeAxis', 0)
-    },
-  },
-}
-</script>
-
-<style lang="scss">
-  .va-select-without-margin {
-    .va-select {
-      margin-bottom: 0;
-    }
-  }
-</style>
@@ -78,6 +78,7 @@ export default {
      return sortedCycleList
    },
    init () {
+      this.showWhichCycles = '1'
      this.cycleNum = this.metaList[this.metaIndex].parameter_set.CYCLE_NUMBER
      const meta = this.metaList[this.metaIndex]
      this.metaID = meta.id
@@ -90,9 +91,6 @@ export default {
        this.showPanel = false
      }
    },
-    clear () {
-      this.showWhichCycles = '1'
-    },
    async setCycle () {
      if (this.isThisModeHasCycle === true) {
        const dataCycleList = this.recInfo[this.metaID][this.cycleDataID][this.currentScale]
@@ -108,15 +106,14 @@ export default {
        const cycleDict = this.getCycleDictRec()(cycleDataList)
        this.cycleNum = Object.keys(cycleDict).length
        let dataXList
-        if (this.controlPanel.x.type !== 'Time') {
-          dataXList = this.recInfo[this.metaID][this.controlPanel.x.channel][this.currentScale]
+        if (this.controlPanel.x.axis.description !== 'Time') {
+          dataXList = this.recInfo[this.metaID][this.controlPanel.x.axis.channel][this.currentScale]
        }
-        const dataYList = this.recInfo[this.metaID][this.controlPanel.y.channel][this.currentScale]
+        const dataYList = this.recInfo[this.metaID][this.controlPanel.y.axis.channel][this.currentScale]
        const filteredData = []

        let counter = 0
        for (let sliceIndex = 0; sliceIndex < this.cycleNum; sliceIndex++) {
-          // console.log(this.slices)
          if (this.slices() === '' || this.slices().includes((sliceIndex + 1).toString())) {
            // slice data
            const value = cycleDict[sliceIndex + 1]
@@ -133,9 +130,9 @@ export default {
              }
            }
            for (let i = startIndex; i <= endIndex; i++) {
-              const dataY = await this.getData(parseInt(this.currentScale), this.sampleMethod, dataYList[i].id, this.controlPanel.y.channel, this.metaList[this.metaIndex])
-              if (this.controlPanel.x.type !== 'Time') {
-                const dataX = await this.getData(parseInt(this.currentScale), this.sampleMethod, dataXList[i].id, this.controlPanel.x.channel, this.metaList[this.metaIndex])
+              const dataY = await this.getData(parseInt(this.currentScale), this.sampleMethod, dataYList[i].id, this.controlPanel.y.axis.channel, this.metaList[this.metaIndex])
+              if (this.controlPanel.x.axis.description !== 'Time') {
+                const dataX = await this.getData(parseInt(this.currentScale), this.sampleMethod, dataXList[i].id, this.controlPanel.x.axis.channel, this.metaList[this.metaIndex])
                for (let j = 0, len = dataY.length; j < len; j++) {
                  if (parseInt(dataY[j][0]) >= startTime && parseInt(dataY[j][0]) <= endTime) {
                    filteredData.push([dataX[j][1], dataY[j][1]])
@@ -155,14 +152,13 @@ export default {
              seriesIndex: this.metaIndex,
              data: filteredData,
            })
-            if (this.controlPanel.x.type === 'Time') {
+            if (this.controlPanel.x.axis.description === 'Time') {
              if (counter === 0) {
                this.chartData[this.chartID].xAxis[this.metaIndex].min = startTime
              }
              this.chartData[this.chartID].xAxis[this.metaIndex].max = endTime
              counter++
            }
-            // this.$emit('refreshChart', this.chartData[this.chartID])
          }
        }
      }
@@ -181,11 +177,6 @@ export default {
    ...mapMutations('replay', [types.chart.updateSeries]),
    ...mapGetters('replay', [types.rec.getCycleDict]),
  },
-  mounted () {
-
-  },
-  destroyed () {
-  },
 }

 </script>
@@ -0,0 +1,56 @@
+<template>
+  <div>
+    <va-select
+      v-model="controlPanel[coordinate].axis"
+      class="va-select-without-margin"
+      :options="axisOption"
+      text-by="description"
+      key-by="description"
+      :noClear='true'
+      @input="changeAxis()"
+    />
+  </div>
+</template>
+
+<script>
+import { mapFields } from 'vuex-map-fields'
+import { tableRouter } from '@/components/analysis/replay/toolbox/EliteReplayTable'
+import configRouter from '@/components/analysis/replay/toolbox/configTable'
+
+export default {
+  name: 'controlAxis',
+  props: {
+    coordinate: {
+      type: String, // x or y
+    },
+  },
+  data () {
+    return {
+      axisOption: [],
+      tableRouter,
+      configRouter,
+    }
+  },
+  computed: {
+    ...mapFields('replay', [
+      'controlPanel',
+    ]),
+  },
+  methods: {
+    init (library, settingType) {
+      this.axisOption = this.configRouter.getAxisOption(library, settingType, this.coordinate)
+    },
+    changeAxis () {
+      this.$emit('changeAxis', 0)
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+  .va-select-without-margin {
+    .va-select {
+      margin-bottom: 0;
+    }
+  }
+</style>
@@ -1,11 +1,12 @@
 <template>
-  <div>
+  <div class="flex row">
    <va-radio-button
      v-for="(funct, index) in functOption"
+      v-model="controlPanel[coordinate].funct"
      :key="index"
-      v-model="controlPanel[axis].funct"
      :option="funct"
      @input="changeFunct()"
+
    />
  </div>
 </template>
@@ -13,11 +14,12 @@
 <script>
 import { mapFields } from 'vuex-map-fields'
 import { tableRouter } from '@/components/analysis/replay/toolbox/EliteReplayTable'
+import configRouter from '@/components/analysis/replay/toolbox/configTable'

 export default {
-  name: 'change-funct-b',
+  name: 'controlFunct',
  props: {
-    axis: {
+    coordinate: {
      type: String, // x or y
    },
  },
@@ -26,6 +28,7 @@ export default {
      funct: '',
      functOption: [],
      tableRouter,
+      configRouter,
    }
  },
  computed: {
@@ -34,22 +37,14 @@ export default {
    ]),
  },
  methods: {
-    init () {
-      this.controlPanel[this.axis].funct = 'Linear'
-      this.functOption = this.tableRouter.getFunct(this.axis)
+    init (xAxis, yAxis) {
+      this.controlPanel[this.coordinate].funct = 'Linear'
+      this.functOption = this.configRouter.getFunctOption(xAxis, yAxis, this.coordinate)
    },
    changeFunct () {
-      this.$emit('changeFunct', this.axis)
+      this.$emit('changeFunct', this.coordinate)
    },
  },
 }

 </script>
-
-<style lang="scss">
-  .va-select-without-margin {
-    .va-select {
-      margin-bottom: 0;
-    }
-  }
-</style>
@@ -1,11 +1,11 @@
 <template>
  <div>
    <va-select
-      @input="changeUnit()"
-      v-model="controlPanel[axis].unit"
+      v-model="controlPanel[coordinate].unit"
      class="va-select-without-margin"
      :options="unitOption"
      :noClear='true'
+      @input="changeUnit()"
    />
  </div>
 </template>
@@ -13,11 +13,12 @@
 <script>
 import { mapFields } from 'vuex-map-fields'
 import { tableRouter } from '@/components/analysis/replay/toolbox/EliteReplayTable'
+import configRouter from '@/components/analysis/replay/toolbox/configTable'

 export default {
-  name: 'change-unit-b',
+  name: 'controlUnit',
  props: {
-    axis: {
+    coordinate: {
      type: String, // x or y
    },
  },
@@ -26,6 +27,7 @@ export default {
      unit: '',
      unitOption: [],
      tableRouter,
+      configRouter,
    }
  },
  computed: {
@@ -34,22 +36,12 @@ export default {
    ]),
  },
  methods: {
-    init (type) {
-      this.controlPanel[this.axis].unit = this.tableRouter.getDefaultUnit(type)
-      this.unitOption = Object.keys(this.tableRouter.getOption(type))
-    },
-    refreshUnit (xType, xFunct, yType, yFunct) {
-      const [xTable, yTable] = this.tableRouter.getTable(xType, xFunct, yType, yFunct)
-      if (this.axis === 'x') {
-        this.controlPanel[this.axis].unit = xTable.defaultUnit
-        this.unitOption = Object.keys(xTable.option)
-      } else {
-        this.controlPanel[this.axis].unit = yTable.defaultUnit
-        this.unitOption = Object.keys(yTable.option)
-      }
+    init (axis) {
+      this.controlPanel[this.coordinate].unit = this.configRouter.getUnit(axis)
+      this.unitOption = this.configRouter.getUnitOption(axis)
    },
    changeUnit () {
-      this.$emit('changeUnit', this.axis)
+      this.$emit('changeUnit', this.coordinate)
    },
  },
 }
@@ -1,4 +1,20 @@
-const chartTable = {
+// library definition
+// const libraryInfo = {
+//   EDC: {
+//     x: ['Time',
+//       'Current',
+//       'Voltage',
+//       'Resistance',
+//     ],
+//     y: ['Current',
+//       'Voltage',
+//       'Resistance',
+//     ],
+//   },
+// }
+
+// axis information
+const axisInfo = {
  // axis type
  Time: {
    name: 'Time',
@@ -57,13 +73,13 @@ const chartTable = {
    name: 'Charge',
    channel: -1,
    option: {
-      nC: 1e6,
-      uC: 1e9,
-      mC: 1e12,
-      C: 1e15,
+      nAh: 3600 * 1e6,
+      uAh: 1600 * 1e9,
+      mAh: 3600 * 1e12,
+      Ah: 3600 * 1e15,
    },
-    defaultUnit: 'C',
-    downloadUnit: 'C',
+    defaultUnit: 'mAh',
+    downloadUnit: 'mAh',
  },
  Power: {
    name: 'Power',
@@ -87,54 +103,84 @@ const chartTable = {
    defaultUnit: 'A/V',
    downloadUnit: 'A/V',
  },
-  Idiot: {
+  Impedance: {
+    name: 'Impedance',
+    chanel: 6,
+    option: {
+      mΩ: 1e-3,
+      Ω: 1,
+      kΩ: 1e3,
+      MΩ: 1e6,
+    },
+    downloadUnit: 'Ω',
+    defaultUnit: 'Ω',
+  },
+  None: {
    name: 'not support',
    channel: -1,
    option: {
-      'not support': 1,
+      none: 1,
    },
-    defaultUnit: 'not support',
-    downloadUnit: 'not support',
+    defaultUnit: 'none',
+    downloadUnit: 'none',
  },
 }
+
 export const tableRouter = {
  getChannel: (axis) => {
-    return chartTable[axis].channel
+    return axisInfo[axis].channel
  },
  getDefaultUnit: (axis) => {
-    return chartTable[axis].defaultUnit
+    return axisInfo[axis].defaultUnit
  },
  getOption: (axis) => {
-    return chartTable[axis].option
+    return axisInfo[axis].option
  },
  getTable: (xAxis, xFunct, yAxis, yFunct) => {
-    var xTable = chartTable[xAxis]
-    var yTable = chartTable.Idiot
+    var xTable = axisInfo[xAxis]
+    var yTable = axisInfo.None
    if (yFunct === 'Linear' || yFunct === 'Log') {
-      yTable = chartTable[yAxis]
+      yTable = axisInfo[yAxis]
    } else if (yFunct === 'Integral') {
      if (xAxis === 'Time' && yAxis === 'Current') {
-        yTable = chartTable.Charge
+        yTable = axisInfo.Charge
      } else if (xAxis === 'Current' && yAxis === 'Voltage') {
-        yTable = chartTable.Power
+        yTable = axisInfo.Power
      } else if (xAxis === 'Voltage' && yAxis === 'Current') {
-        yTable = chartTable.Power
+        yTable = axisInfo.Power
      }
    } else if (yFunct === 'Differential') {
      if (xAxis === 'Current' && yAxis === 'Voltage') {
-        yTable = chartTable.Resistance
+        yTable = axisInfo.Resistance
      } else if (xAxis === 'Voltage' && yAxis === 'Current') {
-        yTable = chartTable.Transconductance
+        yTable = axisInfo.Transconductance
      }
    }
    return [xTable, yTable]
  },
-  getFunct (axis) {
-    if (axis === 'x') {
-      return ['Linear', 'Log']
+  getFunct (xAxis, yAxis, axis) {
+    let xTable = ['']
+    let yTable = ['']
+    if (xAxis === 'Time') {
+      xTable = ['Linear']
+
+      if (yAxis === 'Current') {
+        yTable = ['Linear', 'Log', 'Integral']
+      } else {
+        yTable = ['Linear', 'Log']
+      }
    } else {
-      return ['Linear', 'Log', 'Integral', 'Differential']
+      xTable = ['Linear', 'Log']
+
+      if ((xAxis === 'Voltage' && yAxis === 'Current') || (xAxis === 'Current' && yAxis === 'Voltage')) {
+        yTable = ['Linear', 'Log', 'Integral', 'Differential']
+      } else {
+        yTable = ['Linear', 'Log']
+      }
    }
+
+    if (axis === 'x') return xTable
+    else return yTable
  },
  // axisLabel formatter
  autoTimeFormatter (val) {
@@ -1,171 +1,177 @@
 <template>
  <div>
    <div class="flex-container mb-2">
-      <va-input
-        v-model="this.specificIntegral"
-        :label="$t('Specific Integral')"
-      />
-      <div class="flex sm5 xl5 md5 xs5 px-0 py-0">
-        <va-button
-          v-if="!keyBoundary"
-          v-model="this.keyBoundary"
-          @click="switchBoundary()"
-          class="round-button px-1 py-1"
-        >
-          Draw
-        </va-button>
-        <va-button
-          v-if="keyBoundary"
-          v-model="this.keyBoundary"
-          @click="switchBoundary()"
-          class="round-button px-1 py-1"
-        >
-          Input
-        </va-button>
+      <div class="flex sm2 xl2 md2 xs2 px-0 py-0">
+        <p class="display-6" v-if="ifMeaning"> Area </p>
+      </div>
+      <div
+        class="row flex sm10 xl10 md10 xs10"
+        v-show="ifMeaning"
+      >
+        <div class="xs6 sm6 lg6 xl6">
+          <va-input
+            v-model="specificIntegral"
+            label="Integral value"
+            disabled
+          >
+            <p slot="append" style="margin-right: 0;" small>
+              {{ integralResult }}
+            </p>
+          </va-input>
+        </div>
+        <div class="xs2 sm2 lg2 xl2">
+          <va-select
+            v-model="integralUnit"
+            :options="integralOption"
+            @input="refreshScale"
+            style="width: 75px;"
+            class="va-select-without-margin"
+            noClear
+          />
+        </div>
      </div>
    </div>

-    <div v-if="!keyBoundary">
+    <div>
      <div class="flex-container mb-2">
-        <div class="flex sm2 xl2 md2 xs2 px-0 py-0" />
+        <div class="flex sm2 xl2 md2 xs2 px-0 py-0">
+          <p class="display-6"> Range </p>
+        </div>
        <va-input
-          v-model="this.boundary.x_start"
-          :label="$t('X Start')"
-        />
+          v-model="x_start"
+          label="X Start"
+          @focus="userEnter()"
+          @blur="userEnter()"
+          @keyup.enter="setBrushBoundary"
+        >
+          <p slot="append" style="margin-right: 0;" small>
+            {{ xUnit }}
+          </p>
+        </va-input>
        <va-input
-          v-model="this.boundary.x_end"
-          :label="$t('X End')"
-        />
+          v-model="x_end"
+          label="X End"
+          @focus="userEnter()"
+          @blur="userEnter()"
+          @keyup.enter="setBrushBoundary"
+        >
+          <p slot="append" style="margin-right: 0;" small>
+            {{ xUnit }}
+          </p>
+        </va-input>
      </div>
      <div class="flex-container mb-2">
-        <div class="flex sm2 xl2 md2 xs2 px-0 py-0" />
+        <div class="flex sm2 xl2 md2 xs2 px-0 py-0">
+        </div>
        <va-input
-          v-model="this.boundary.y_start"
-          :label="$t('Y Start')"
-        />
+          v-model="y_start"
+          label="Y Start"
+          @focus="userEnter()"
+          @blur="userEnter()"
+          @keyup.enter="setBrushBoundary"
+        >
+          <p slot="append" style="margin-right: 0;" small>
+            {{ yUnit }}
+          </p>
+        </va-input>
        <va-input
-          v-model="this.boundary.y_end"
-          :label="$t('Y End')"
-        />
-      </div>
-      <div class="flex-container mb-2">
-        <div class="flex sm2 xl2 md2 xs2 px-0 py-0" />
-        <va-button class="mb-2" @click="setBrushBoundary" small>
-          Set Integral Boundary
-        </va-button>
-      </div>
-    </div>
-
-    <div v-if="keyBoundary">
-      <div class="flex-container mb-2">
-        <div class="flex sm2 xl2 md2 xs2 px-0 py-0" />
-        <va-input
-          @keyup.enter="setBrushBoundary()"
-          @blur="setBrushBoundary()"
-          v-model="boundaryXstart"
-          :label="$t('X Start')"
-        />
-        <va-input
-          @keyup.enter="setBrushBoundary()"
-          @blur="setBrushBoundary()"
-          v-model="boundaryXend"
-          :label="$t('X End')"
-        />
-      </div>
-      <div class="flex-container mb-2">
-        <div class="flex sm2 xl2 md2 xs2 px-0 py-0" />
-        <va-input
-          @keyup.enter="setBrushBoundary()"
-          @blur="setBrushBoundary()"
-          v-model="boundaryYstart"
-          :label="$t('Y Start')"
-        />
-        <va-input
-          @keyup.enter="setBrushBoundary()"
-          @blur="setBrushBoundary()"
-          v-model="boundaryYend"
-          :label="$t('Y End')"
-        />
-      </div>
-      <div class="flex-container mb-2">
-        <div class="flex sm2 xl2 md2 xs2 px-0 py-0" />
-        <va-button class="mb-2" @click="setBrushBoundary" small>
-          Set Integral Boundary
-        </va-button>
+          v-model="y_end"
+          label="Y End"
+          @focus="userEnter()"
+          @blur="userEnter()"
+          @keyup.enter="setBrushBoundary"
+        >
+          <p slot="append" style="margin-right: 0;" small>
+            {{ yUnit }}
+          </p>
+        </va-input>
      </div>
    </div>
  </div>
 </template>

 <script>
-
+import { tableRouter } from '@/components/analysis/replay/toolbox/EliteReplayTable'
+import configRouter from '@/components/analysis/replay/toolbox/configTable'
 export default {
  name: 'SpecificIntegral',
-  components: {
-  },
-  computed: {
-    displayType () {
-      return {
-        x: this.axisXLabelScale.description === 'Log' ? 'log' : 'value',
-        y: this.axisYLabelScale.description === 'Log' ? 'log' : 'value',
-      }
-    },
-  },
-  props: {
-  },
-  created () {
-  },
  data () {
    return {
      specificIntegral: 0,
-      boundary: {},
-      boundaryXstart: 0,
-      boundaryXend: 0,
-      boundaryYstart: 0,
-      boundaryYend: 0,
-      keyBoundary: false,
+      x_start: 0,
+      x_end: 0,
+      y_start: 0,
+      y_end: 0,
+      xUnit: '',
+      yUnit: '',
+      xScale: '',
+      yScale: '',
+      integralResult: '',
+      integralUnit: '',
+      integralOption: [],
+      integralTable: {},
+      integralScale: '',
+      ifMeaning: true,
+      ifUserKeyIn: false,
+      tableRouter,
+      configRouter,
    }
  },
-  mqtt: {
-  },
  methods: {
+    refreshScale () {
+      this.integralScale = this.configRouter.getUnitScale(this.integralResult)[this.integralUnit]
+    },
+    userEnter () {
+      this.ifUserKeyIn = !this.ifUserKeyIn
+    },
    getSpecificIntegral (specificIntegral, boundary) {
-      this.specificIntegral = specificIntegral
-      this.specificIntegral = (this.specificIntegral * 1e-12).toFixed(4) + 'mW'
-      // this.specificIntegral = (this.specificIntegral * 1e-15).toFixed(4) + 'W'
-      if (!this.keyBoundary) {
-        this.boundary = boundary
+      this.specificIntegral = specificIntegral / this.integralScale
+
+      if (!this.ifUserKeyIn) {
+        this.x_start = (boundary.x_start / this.xScale).toFixed(3)
+        this.x_end = (boundary.x_end / this.xScale).toFixed(3)
+        this.y_start = (boundary.y_start / this.yScale).toFixed(3)
+        this.y_end = (boundary.y_end / this.yScale).toFixed(3)
      }
    },
-    switchBoundary () {
-      this.keyBoundary = !this.keyBoundary
-      // if (this.boundary !== {})
-      this.boundaryXstart = this.boundary.x_start
-      this.boundaryXend = this.boundary.x_end
-      this.boundaryYstart = this.boundary.y_start
-      this.boundaryYend = this.boundary.y_end
-    },
    setBrushBoundary () {
+      if (isNaN(this.x_start)) this.x_start = 0
+      if (isNaN(this.x_end)) this.x_start = 0
+      if (isNaN(this.xy_start)) this.y_start = 0
+      if (isNaN(this.y_end)) this.y_end = 0
      var boundary = {
-        x_start: Number(this.boundaryXstart),
-        x_end: Number(this.boundaryXend),
-        y_start: Number(this.boundaryYstart),
-        y_end: Number(this.boundaryYend),
+        x_start: Number(this.x_start) * this.xScale,
+        x_end: Number(this.x_end) * this.xScale,
+        y_start: Number(this.y_start) * this.yScale,
+        y_end: Number(this.y_end) * this.yScale,
      }
      this.$emit('setBrushBoundary', boundary)
    },
-  },
-  async mounted () {
-  },
-  destroyed () {
-  },
-  watch: {
+    setDisplayParam (xAxis, xUnit, yAxis, yUnit) {
+      const xScaleOption = this.configRouter.getUnitScale(xAxis)
+      const yScaleOption = this.configRouter.getUnitScale(yAxis)
+      const integralResult = this.configRouter.getFSM(xAxis, yAxis).Integral
+      this.xUnit = xUnit
+      this.yUnit = yUnit
+      this.xScale = xScaleOption[xUnit]
+      this.yScale = yScaleOption[yUnit]
+      this.integralResult = integralResult
+      this.integralUnit = this.configRouter.getUnit(integralResult)
+      this.integralOption = this.configRouter.getUnitOption(integralResult)
+      this.integralScale = this.configRouter.getUnitScale(integralResult)[this.integralUnit]
+    },
+    refreshDisplayParam (xAxis, xUnit, yAxis, yUnit) {
+      const xScaleOption = this.configRouter.getUnitScale(xAxis)
+      const yScaleOption = this.configRouter.getUnitScale(yAxis)
+      this.xUnit = xUnit
+      this.yUnit = yUnit
+      this.xScale = xScaleOption[xUnit]
+      this.yScale = yScaleOption[yUnit]
+    },
+    checkMeaning (xAxis, yAxis) {
+      const functOption = this.configRouter.getFunctOption(xAxis, yAxis)
+      this.ifMeaning = functOption.includes('Integral')
+    },
  },
 }
 </script>
-
-<style lang="scss">
-  /* .round-button {
-    border-radius: 12px;
-  } */
-</style>
@@ -0,0 +1,405 @@
+// object saving library name mapping table
+const libraryNameMappingTable = {
+  EliteZM15: 'EliteEDC',
+  'Elite_EDC_1.4': null,
+  'Elite_EDC_1.5': 'EliteEDC',
+  'Elite_EDC_1.5re': 'EliteEDC',
+  'Elite_EDC_1.5r2': 'EliteEDC',
+  'Elite_BAT_1.0': 'EliteEDC',
+  'Elite_EIS_1.0': 'EliteEIS',
+  'Elite_EIS_1.1': 'EliteEIS',
+  'Elite_EIS_MINI_1.0': 'EliteEIS',
+  'Elite_TRIG_0.1': null,
+  'Elite_MEGAFLY_0.1': null,
+}
+
+// object saving setting type mapping table
+const settingTypeMappingTable = {
+  EliteEDC: {
+    Time: {
+      description: 'Time',
+      channel: undefined,
+    },
+    Elite: {
+      1: {
+        description: 'Current',
+        channel: 0,
+      },
+      2: {
+        description: 'Voltage',
+        channel: 1,
+      },
+      3: {
+        description: 'Resistance',
+        channel: 2,
+      },
+      // 4: {
+      //   description: 'Cycle',
+      //   channel: 3,
+      // },
+    },
+  },
+  EliteEIS: {
+    Time: {
+      description: 'Time',
+      channel: undefined,
+    },
+    Elite: {
+      1: {
+        description: 'Current',
+        channel: 0,
+      },
+      2: {
+        description: 'Voltage',
+        channel: 1,
+      },
+      3: {
+        description: 'Resistance',
+        channel: 2,
+      },
+    },
+    EliteEIS: {
+      3: {
+        description: 'Frequency',
+        channel: 2,
+      },
+      5: {
+        description: 'Z_imag',
+        channel: 4,
+      },
+      6: {
+        description: 'Z_real',
+        channel: 5,
+      },
+      7: {
+        description: 'Impedance',
+        channel: 6,
+      },
+      8: {
+        description: 'Phase',
+        channel: 7,
+      },
+      9: {
+        description: 'Current',
+        channel: 8,
+      },
+      10: {
+        description: 'Gain_Level',
+        channel: 9,
+      },
+    },
+  },
+}
+
+// object saving unit information mapping table
+const unitInfoMappingTable = {
+  // Time
+  Time: {
+    name: 'Time',
+    channel: -1,
+    option: {
+      auto: 1,
+      us: 1,
+      ms: 1e3,
+      s: 1e6,
+      min: 60 * 1e6,
+      hour: 3600 * 1e6,
+    },
+    defaultUnit: 'auto',
+    downloadUnit: 'auto',
+  },
+  // Elite
+  Current: {
+    name: 'Current',
+    channel: 0,
+    option: {
+      nA: 1,
+      uA: 1e3,
+      mA: 1e6,
+      A: 1e9,
+    },
+    defaultUnit: 'mA',
+    downloadUnit: 'A',
+  },
+  Voltage: {
+    name: 'Voltage',
+    channel: 1,
+    option: {
+      uV: 1,
+      mV: 1e3,
+      V: 1e6,
+    },
+    defaultUnit: 'mV',
+    downloadUnit: 'V',
+  },
+  Resistance: {
+    name: 'Resistance',
+    channel: 2,
+    option: {
+      mΩ: 1,
+      Ω: 1e3,
+      kΩ: 1e6,
+      MΩ: 1e9,
+    },
+    defaultUnit: 'Ω',
+    downloadUnit: 'Ω',
+  },
+  // Elite after Integral
+  Charge: {
+    name: 'Charge',
+    channel: -1,
+    option: {
+      nAh: 3600 * 1e6,
+      uAh: 1600 * 1e9,
+      mAh: 3600 * 1e12,
+      Ah: 3600 * 1e15,
+    },
+    defaultUnit: 'mAh',
+    downloadUnit: 'mAh',
+  },
+  Power: {
+    name: 'Power',
+    channel: -1,
+    option: {
+      mW: 1e12,
+      W: 1e15,
+      kW: 1e18,
+    },
+    defaultUnit: 'W',
+    downloadUnit: 'W',
+  },
+  // Elite after Differential
+  Transconductance: {
+    name: 'Transconductance',
+    channel: -1,
+    option: {
+      'mA/V': 1,
+      'A/V': 1e3,
+      'kA/V': 1e6,
+    },
+    defaultUnit: 'A/V',
+    downloadUnit: 'A/V',
+  },
+  // EliteEIS
+  Frequency: {
+    name: 'Frequency',
+    chanel: 2,
+    option: {
+      mHz: 1,
+      Hz: 1e3,
+      kHz: 1e6,
+      MHz: 1e9,
+    },
+    downloadUnit: 'Hz',
+    defaultUnit: 'Hz',
+  },
+  Z_imag: {
+    name: 'Z_imag',
+    chanel: 4,
+    option: {
+      mΩ: 1e-3,
+      Ω: 1,
+      kΩ: 1e3,
+      MΩ: 1e6,
+    },
+    downloadUnit: 'Ω',
+    defaultUnit: 'Ω',
+  },
+  Z_real: {
+    name: 'Z_real',
+    chanel: 5,
+    option: {
+      mΩ: 1e-3,
+      Ω: 1,
+      kΩ: 1e3,
+      MΩ: 1e6,
+    },
+    downloadUnit: 'Ω',
+    defaultUnit: 'Ω',
+  },
+  Impedance: {
+    name: 'Impedance',
+    chanel: 6,
+    option: {
+      mΩ: 1e-3,
+      Ω: 1,
+      kΩ: 1e3,
+      MΩ: 1e6,
+    },
+    downloadUnit: 'Ω',
+    defaultUnit: 'Ω',
+  },
+  Phase: {
+    name: 'Phase',
+    chanel: 7,
+    option: {
+      '°': 1,
+    },
+    downloadUnit: '°',
+    defaultUnit: '°',
+  },
+  Gain_Level: {
+    name: 'Gain Level',
+    chanel: 9,
+    option: {
+      '#': 1,
+    },
+    downloadUnit: '#',
+    defaultUnit: '#',
+  },
+  undefined: {
+    name: 'not support',
+    channel: -1,
+    option: {
+      none: 1,
+    },
+    defaultUnit: 'none',
+    downloadUnit: 'none',
+  },
+}
+
+// object saving specific functional information mapping table
+const functInfoMappingTable = {
+  // Time
+  Time: {
+  },
+  // Elite
+  Current: {
+    Time: {
+      Linear: 'Current',
+      Log: 'Current',
+      Integral: 'Charge',
+    },
+    Voltage: {
+      Linear: 'Current',
+      Log: 'Current',
+      Integral: 'Power',
+      Differential: 'Impedance',
+    },
+  },
+  Voltage: {
+    Current: {
+      Linear: 'Voltage',
+      Log: 'Voltage',
+      Integral: 'Power',
+      Differential: 'Transconductance',
+    },
+  },
+  Resistance: {
+  },
+  // EliteEIS
+  Frequency: {
+  },
+  Z_imag: {
+  },
+  Z_real: {
+  },
+  Impedance: {
+  },
+  Phase: {
+  },
+  Gain_Level: {
+  },
+  None: {
+  },
+}
+
+/**
+ * return axis description and channel by library, type and index
+ * @param {String} library
+ * @param {String} type
+ * @param {String} index
+ * @returns {Object} : configuration
+ */
+function getAxis (library, type, index) {
+  // some physical property || Time
+  return settingTypeMappingTable[libraryNameMappingTable[library]][type][index] || settingTypeMappingTable[libraryNameMappingTable[library]][type]
+}
+
+/**
+ * retrun default unit by physical property
+ * @param {String} axis
+ * @returns {Object} : unit
+ */
+function getUnit (axis) {
+  return unitInfoMappingTable[axis].defaultUnit
+}
+
+/**
+ * return axis option by library, type
+ * @param {String} library
+ * @param {String} type
+ * @param {String} coordinate
+ * @returns {Object} : axisOption
+ */
+function getAxisOption (library, type, coordinate) {
+  if (type === 'Time') type = 'Elite'
+
+  const axisOption = Object.values(settingTypeMappingTable[libraryNameMappingTable[library]][type]).map((setting) => {
+    return setting
+  })
+  if (coordinate === 'x') {
+    axisOption.unshift({
+      description: 'Time',
+      channel: undefined,
+    })
+  }
+  return axisOption
+}
+
+/**
+ * retrun option of unit by physical property
+ * @param {String} axis
+ * @returns {Object} : unitOption
+ */
+function getUnitOption (axis) {
+  return Object.keys(unitInfoMappingTable[axis].option)
+}
+
+/**
+ * retrun a dictionary of scale corresponding to unit by physical property
+ * @param {String} axis
+ * @returns {Object} : unitScale
+ */
+function getUnitScale (axis) {
+  return unitInfoMappingTable[axis].option
+}
+
+/**
+ * retrun option of functionl by both axis physical property
+ * @param {String} xAxis
+ * @param {String} yAxis
+ * @param {String} coordinate
+ * @returns {Object} : functOption
+ */
+function getFunctOption (xAxis, yAxis, coordinate) {
+  if (coordinate === 'x') return ['Linear', 'Log']
+  else if (functInfoMappingTable[yAxis] === undefined) return ['Linear', 'Log']
+  else if (functInfoMappingTable[yAxis][xAxis] === undefined) return ['Linear', 'Log']
+  else return Object.keys(functInfoMappingTable[yAxis][xAxis])
+}
+
+/**
+ * retrun functional correponding physics property
+ * @param {String} xAxis
+ * @param {String} yAxis
+ * @returns {Object} : functOption
+ */
+function getFSM (xAxis, yAxis) {
+  return functInfoMappingTable[yAxis][xAxis] || {
+    Linear: yAxis,
+    Log: yAxis,
+  }
+}
+
+const configRouter = {
+  getAxis,
+  getUnit,
+  getAxisOption,
+  getUnitOption,
+  getUnitScale,
+  getFunctOption,
+  getFSM,
+}
+
+export default configRouter
@@ -1,6 +1,5 @@
 <template>
  <div class="devices-overview">
-
    <div >
      <va-card
        v-for="controller in controllerList" :key="controller.id"
@@ -518,6 +517,7 @@ export default {
  async mounted () {
    await taskInfo.updateTaskInfo()
    await this.getControllerList()
+    this.GLOBAL.refreshCache()

    this.pageMqttSub()
    this.pageInitPub()
@@ -33,6 +33,7 @@
        editFile()
        showModal.editFile = false
      }"
+      :noOutsideDismiss="true"
      tabindex="0"
    >
      <va-input
@@ -179,7 +180,7 @@
          {{ props.rowData.name }}
        </template>
        <template slot="parameter_set" slot-scope="props">
-          {{ (props.rowData.type==='folder') ? '' : getWorkingMode(props.rowData, props.rowData) }}
+          {{ getWorkingMode(props.rowData) }}
        </template>
        <template slot="created_at" slot-scope="props">
          {{transDate(props.rowData.created_at)}}
@@ -427,7 +428,7 @@ export default {

        // call getfolder api and update
        const folders = await api.collection.getByParent('folder', info.id)
-        const files = await api.meta.getAttrByParent('folder', info.id, 'id-path-name-parent-description-size-time_duration-uuid-device-channels-created_at')
+        const files = await api.meta.getAttrByParent('folder', info.id, 'id-path-name-parent-description-size-time_duration-uuid-device-channels-parameter_set-created_at')
        file.updateFileList(folders)
        file.updateFileList(files)

@@ -447,7 +448,7 @@ export default {
        this.currentInfo = item
        // call getfolder api and update
        const folders = await api.collection.getByParent('folder', item.id)
-        const files = await api.meta.getAttrByParent('folder', item.id, 'id-path-name-parent-description-size-time_duration-uuid-device-channels-created_at')
+        const files = await api.meta.getAttrByParent('folder', item.id, 'id-path-name-parent-description-size-time_duration-uuid-device-channels-parameter_set-created_at')
        file.updateFileList(folders)
        file.updateFileList(files)

@@ -468,7 +469,7 @@ export default {
      if (initCollection.data.length === 1) {
        this.currentInfo = initCollection.data[0]
        const folders = await api.collection.getByParent('folder', initCollection.data[0].id)
-        const files = await api.meta.getAttrByParent('folder', initCollection.data[0].id, 'id-path-name-parent-description-size-time_duration-uuid-device-channels-created_at')
+        const files = await api.meta.getAttrByParent('folder', initCollection.data[0].id, 'id-path-name-parent-description-size-time_duration-uuid-device-channels-parameter_set-created_at')
        file.updateFileList(folders)
        file.updateFileList(files)
        this.fileLists = file.getFileList()
@@ -590,6 +591,7 @@ export default {
    },
    fillDeleteInfo: function (info) {
      if (info.type === 'folder') {
+        this.deleteInfo.metaID = undefined
        this.deleteInfo.folderID = info.id
        this.deleteInfo.name = info.name
      } else {
@@ -752,16 +754,17 @@ export default {
      }
    },
    replay: function (meta) {
+      const href = location.href.split('/')[2]
      if (meta.device.library_name.includes('Neulive') === true) {
        // window.open('http://' + location.href.split('/')[2].split(':')[0] + '/#/admin/data-replay/' + meta.id)
        this.$router.push({
          path: '/admin/data-replay/' + meta.id,
        })
      } else if (meta.device.library_name.includes('Elite') === true) {
-        // window.open('http://' + location.href.split('/')[2].split(':')[0] + '/#/admin/data-replay/elite/' + meta.id)
-        this.$router.push({
-          path: '/admin/data-replay/elite/' + meta.id,
-        })
+        window.open('http://' + href + '/#/admin/data-replay/elite/' + meta.id)
+        // this.$router.push({
+        //   path: '/admin/data-replay/elite/' + meta.id,
+        // })
      }
    },
    spike: function (meta) {
@@ -771,9 +774,10 @@ export default {
        })
      }
    },
-    getWorkingMode: function (library, mode) {
+    getWorkingMode: function (rowData) {
      try {
-        return configTable.getModeConfig(library, mode).name
+        if (rowData.type === 'folder') return ''
+        return configTable.getModeConfig(rowData.device.library_name, rowData.parameter_set.MODE).name
      } catch {
        return ''
      }
@@ -4,17 +4,21 @@
      <project-manager/>
    </div>
    <div
-      :class="(taskViewPanel.show || projectManagerPanel.show)
-        ? (taskViewPanel.show && projectManagerPanel.show)
-          ? cardStyle.small
-          : cardStyle.medium
+      :class="(projectManagerPanel.show)
+        ? cardStyle.medium
        : cardStyle.large
      ">
-      <project-view @start_project="startProject($event)" @stop_project="stopProject($event)" @save_project="saveProject($event)"/>
+      <project-view @start_project="startProject($event)" @stop_project="stopProject($event)" @save_project="saveProject($event)" @detect="detect"/>
    </div>
-    <div :class="cardStyle.small" v-show="taskViewPanel.show">
+    <slide-out
+      dock="right"
+      :mask-color="'rgba(0, 0, 0, 0)'"
+      :visible.sync="taskViewPanel.show"
+      :title="(taskViewPanel.type === 1) ? 'Device' : (taskViewPanel.type === 3) ? 'Condition' : (taskViewPanel.type === 4) ? 'Parameter' : ''"
+      resizable
+    >
      <project-task/>
-    </div>
+    </slide-out>
  </div>
 </template>

@@ -22,7 +26,7 @@
 import ProjectManager from '@/components/project/manager/ProjectManager'
 import ProjectView from '@/components/project/view/ProjectView'
 import ProjectTask from '@/components/project/task/ProjectTask'
-import { mapActions } from 'vuex'
+import { mapActions, mapGetters } from 'vuex'
 import { mapFields } from 'vuex-map-fields'
 import types from '@/store/modules/project/types'
 import { taskInfo } from '@/data/task/TaskInfo'
@@ -35,6 +39,9 @@ export default {
    ProjectTask,
  },
  computed: {
+    ...mapGetters('project', [
+      types.project.getSelect,
+    ]),
    ...mapFields('project', [
      'projectConfigList',
      'runningProjectList',
@@ -47,8 +54,8 @@ export default {
    return {
      controllerList: [],
      cardStyle: {
-        small: 'flex xl4 md4 sm12 xs12',
-        medium: 'flex xl8 md8 sm12 xs12',
+        small: 'flex xl3 md3 sm12 xs12',
+        medium: 'flex xl9 md9 sm12 xs12',
        large: 'flex xl12 md12 sm12 xs12',
      },
    }
@@ -74,7 +81,7 @@ export default {
    },
    async '+/get_running_project/+' (data, topic) {
      this.runningProjectList.length = 0
-      const runningProjects = JSON.parse(String.fromCharCode.apply(null, data)).data
+      const runningProjects = JSON.parse(new TextDecoder().decode(data)).data
      this.runningProjectList.push(...runningProjects)
    },
    async '+/broadcast' (data, topic) {
@@ -125,16 +132,28 @@ export default {
      this.mqttUnSub(id + '/get_running_project/+')
    },
    initPage: async function () {
+      await this.initProject()
      await taskInfo.updateTaskInfo()
      this.pageMqttSub(taskInfo.getTaskInfo().controllerID)
    },
    startProject: function (project) {
-      console.log('start_project', project)
-      console.log('taskInfo.getTaskInfo().controllerID', taskInfo.getTaskInfo().controllerID)
-      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
-        header: 'run_project/0',
-        project: project,
-      }))
+      let deviceReady = true
+      for (const device of Object.values(this.getSelectProject.device)) {
+        if (device.pairStatus !== 1) {
+          if (device.pair === null) {
+            window.alert('Device ' + device.name + ' is not connected yet.')
+          } else {
+            window.alert('Device ' + device.pair + ' is not connected yet.')
+          }
+          deviceReady = false
+        }
+      }
+      if (deviceReady === true) {
+        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+          header: 'run_project/0',
+          project: project,
+        }))
+      }
    },
    stopProject: function (project) {
      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
@@ -153,9 +172,24 @@ export default {
        },
      )
    },
+    detect: async function (device) {
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_instruction/0',
+        device: device,
+        instruction: 'VIS_DEVICE_DETECT',
+      }))
+      setTimeout(() => {
+        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+          header: 'device_instruction/0',
+          device: device,
+          instruction: 'VIS_DEVICE_DONE',
+        }))
+      }, 5000)
+    },

    ...mapActions('project',
      [
+        types.project.init,
        types.project.update,
        types.project.addDevice,
      ],
@@ -170,15 +204,18 @@ export default {
      header: 'get_device_info_all/0',
    }))
    const project = await this.API.project.getAll()
-    console.log('project: ', project)
+    // console.log('project: ', project)
    this.projectConfigList.length = 0
    this.projectConfigList.push(...project.data)
-    console.log('projectConfigList: ', this.projectConfigList)
+    // console.log('projectConfigList: ', this.projectConfigList)

    this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
      header: 'get_running_project/0',
    }))
  },
+  destroyed () {
+    this.projectManagerPanel.show = true
+  },
 }
 </script>

@@ -1,37 +1,28 @@
 <template>
  <div>
-    <va-card style="height: 90vh; overflow: auto; display: block;">
+    <va-card style="height: 88vh; overflow: auto; display: block;">
      <template slot="header">
        <div class="row">
          <div class="flex d-flex xs5 sm5 lg5 xl5">
-            <va-icon name="fa fa-bluetooth-b" color="primary"/>
-            <h5 class="mb-0">PROJECTS</h5>
+            <p class="project-view-header">PROJECTS</p>
          </div>
          <div class="flex xs7 sm7 lg7 xl7" style="text-align: right;">
-            <!-- <va-button v-if="projectConfigList.length !== 0" class="ma-0 circle-button" @click="closePanel"> -->
-            <va-icon v-if="projectConfigList.length !== 0" @click.native="closePanel"
-              name="fa fa-times"
-              color="black"
-            />
-            <!-- </va-button> -->
+            <img class="img-vertical-center" src="@/assets/img/project/menu_close.svg" @click="closePanel">
          </div>
        </div>
-        <!-- <div class="flex d-flex xl5 lg5 sm5 xs5 ma-0">
-          <va-icon name="fa fa-bluetooth-b mr-3" color="primary"/>
-          <h5 class="mb-0">PROJECTS</h5>
-        </div>
-        <div class="flex d-flex xl7 lg7 sm7 xs7 ma-0" style="text-align: right;">
-          <va-button v-if="projectConfigList.length !== 0" class="pa-0 ma-0 circle-button" small color="dark" @click="closePanel">
-            <va-icon
-              name="fa fa-times"
-              color="white"
-            />
-          </va-button>
-        </div> -->
      </template>
      <div class="flex d-flex m12 xs12 md12 xl12">
-        <div>
-          <va-button @click="createProject({ api: API })" icon="fa fa-plus"></va-button>
+        <div class="input-icons input-style flex sm12 xs12 md7 xl7 pa-0">
+          <img class="icon" src="@/assets/img/project/search.svg">
+          <input class="input-field" type="text" v-model="filterText">
+        </div>
+        <div class="ml-1 pa-0" style="text-align: right;">
+          <button class="project-copy-btn" @click="copyProject({ project: getSelectProject, index: index, api: API })">
+            <img class="img-vertical-center" src="@/assets/img/project/copy-alt.svg">
+          </button>
+          <button class="project-copy-btn ml-1" @click="createProject({ api: API })">
+            <img class="img-vertical-center" src="@/assets/img/project/plus.svg">
+          </button>
        </div>
      </div>
      <div>
@@ -42,15 +33,15 @@
        </va-tabs>
      </div>
      <div class="mt-1">
-        <project-manager-list v-if='tabValue == 0'/>
-        <running-project-manager-list v-if='tabValue == 1'/>
+        <project-manager-list v-if='tabValue == 0' :filterText="filterText"/>
+        <running-project-manager-list v-if='tabValue == 1' :filterText="filterText"/>
      </div>
    </va-card>
  </div>
 </template>

 <script>
-import { mapActions } from 'vuex'
+import { mapActions, mapGetters } from 'vuex'
 import { mapFields } from 'vuex-map-fields'
 import types from '@/store/modules/project/types'
 import ProjectManagerList from '@/components/project/manager/ProjectManagerList'
@@ -63,6 +54,10 @@ export default {
    RunningProjectManagerList,
  },
  computed: {
+    ...mapGetters('project', [
+      'getSelectProject',
+    ]),
+
    ...mapFields('project', [
      'lockMode',
      'projectList',
@@ -75,6 +70,7 @@ export default {
    return {
      tabValue: 0,
      tabTitles: ['CONFIG', 'RUNNING'],
+      filterText: '',
    }
  },
  methods: {
@@ -86,6 +82,9 @@ export default {
    ...mapActions('project',
      [
        types.project.create,
+        types.project.copy,
+        types.project.select,
+        types.project.delete,
      ],
    ),
    closePanel: function () {
@@ -100,4 +99,39 @@ export default {

 <style>

+    .input-icons img {
+      position: absolute;
+    }
+
+    .input-icons {
+      width: 67%;
+
+      /* margin-bottom: 10px; */
+    }
+
+    .icon {
+      color: grey;
+      min-width: 40px;
+      padding: 10px;
+    }
+
+    .input-field {
+      width: 100%;
+      padding: 9px;
+      text-align: right;
+      background: #f1f1f1;
+      border: none;
+      border-radius: 6px 6px 0 0;
+      border-bottom: 1.5px solid #758b9a;
+    }
+
+    .project-copy-btn {
+      width: 50px;
+      height: 38px;
+      background: #858dd6;
+      border: none;
+      border-radius: 5px;
+      cursor: pointer;
+    }
+
 </style>
@@ -1,7 +1,7 @@
 <template>
  <div class="row">
    <div class="flex xs12 lg12 md12">
-      <va-item class="mb-1" v-for="(project, index) in projectConfigList" :key="index" @click="selectProject({index: index})" clickable>
+      <va-item :class="(projectSelectIndex === index) ? 'project-list-text project-list-focus': 'project-list-text project-list'" v-for="(project, index) in configList" :key="index" @click="selectProject({index: index})" clickable>
        <va-item-section @dblclick.native="switchEdit('name', index)">
          <div v-if="projectTable.name == index">
            <va-input
@@ -14,12 +14,10 @@
          <div v-else>
            {{ project.name }}
          </div>
-          <!-- <va-item-label>
-            {{ project.name }}
-          </va-item-label> -->
        </va-item-section>
        <va-item-section side>
-          <va-icon class="fa fa-close" color="danger" @click.native.stop="deleteProject({ project: project, index: index, api: API })"></va-icon>
+          <img class="mr-2" src="@/assets/img/project/copy-alt-grey.svg" @click="copyProject({ project: project, index: index, api: API })">
+          <img class="mr-2" src="@/assets/img/project/cross.svg" @click="deleteProject({ project: project, index: index, api: API })">
        </va-item-section>
      </va-item>
    </div>
@@ -32,9 +30,21 @@ import types from '@/store/modules/project/types'

 export default {
  name: 'project-manager-list',
+  props: {
+    filterText: {
+      type: String,
+      default: '',
+    },
+  },
  computed: {
+    configList () {
+      if (this.filterText === '') return this.projectConfigList
+      return this.projectConfigList.filter(ele => ele.name.includes(this.filterText))
+    },
+
    ...mapFields('project', [
      'projectConfigList',
+      'projectSelectIndex',
    ]),
  },
  data () {
@@ -55,6 +65,7 @@ export default {
    },
    ...mapActions('project',
      [
+        types.project.copy,
        types.project.select,
        types.project.delete,
      ],
@@ -64,3 +75,32 @@ export default {
  },
 }
 </script>
+<style lang="scss">
+  .project-list-text {
+    // font
+    font-family: 'Inter-Regular';
+    font-style: italic;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+    color: #768b9b;
+  }
+
+  .project-list-focus {
+    /* Rectangle 5 */
+
+    background: #ebedff;
+    border: 1px solid #dbdcf0;
+    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
+    border-radius: 5px;
+  }
+
+  .project-list-focus:hover {
+    opacity: 0.8;
+    background: #ebedff;
+  }
+
+  .project-list:hover {
+    opacity: 0.8;
+  }
+</style>
@@ -1,6 +1,6 @@
 <template>
  <div>
-    <va-card style="height: 90vh; overflow: auto;">
+    <va-card style="height: 88vh; overflow: auto;">
      <project-task-config></project-task-config>
    </va-card>
  </div>
@@ -1,8 +1,9 @@
 <template>
  <div>
    <project-task-config-device v-if="taskViewPanel.type===1"></project-task-config-device>
-    <project-task-config-condition v-if="taskViewPanel.type===3"></project-task-config-condition>
-    <project-task-config-parameter v-if="taskViewPanel.type===4"></project-task-config-parameter>
+    <project-task-config-condition v-if="taskViewPanel.type===2" :actionType="'start'"></project-task-config-condition>
+    <project-task-config-condition v-if="taskViewPanel.type===3" :actionType="'stop'"></project-task-config-condition>
+    <project-task-config-parameter v-show="taskViewPanel.type===4"></project-task-config-parameter>
  </div>
 </template>
 <script>
@@ -1,68 +1,18 @@
 <template>
  <div class="flex sm12 xl12 md12 xs12">
-    <div class="task-config__header-separator mb-1">
-      <div class="task-config__header-text">
-        <span>Action &#38; Condition</span>
-        <va-button class="circle-button" small color="dark" @click="closePanel">
-          <va-icon
-            name="fa fa-times"
-            color="white"
-          />
-        </va-button>
+    <!-- <span>Condition</span> -->
+    <div v-for="(condition, key) in conditionObj" :key="key">
+      <!-- <div v-if="key === 'cycle' || key === 'cycle_next'" class="flex d-flex align--center"> -->
+      <div class="flex d-flex align--center">
+        <va-checkbox v-model="condition.select"></va-checkbox>
+        <span class="mr-1">{{ condition.prefix }}</span>
+        <input style="width: 100px;" class="mr-1" :type="condition.type" v-model="condition.value"/>
+        <span>{{ condition.suffix }}</span>
      </div>
    </div>
-    <div>
-      <!-- <div v-for="(action, actionKey) in this.getSelectTask.action" :key="actionKey">
-        {{ getDeviceProject(action.target).name }} {{ action.type }} {{ getConditionTask(action.condition[0]).value }}
-      </div> -->
-    </div>
-    <span>Device</span>
-    <div class="flex d-flex" v-if="Object.keys(registeredDevice).length > 0">
-      <div v-for="(device, deviceKey) in registeredDevice" :key="deviceKey">
-        <va-button @click="selectDevice(deviceKey)" small>{{ device.name }}</va-button>
-      </div>
-    </div>
-    <div align="center" v-else>
-      No registered device found.
-    </div>
-    <div v-if="settingStep >= 1">
-      <span>Action</span>
-      <div class="flex d-flex">
-        <div v-for="action in actionTemplate" :key="action">
-          <va-button color="info" @click="selectAction(action)" small>{{ action }}</va-button>
-        </div>
-      </div>
-    </div>
-    <div v-if="settingStep >= 2">
-      <span>Condition</span>
-      <div v-for="(condition, key) in conditionObj" :key="key">
-        <!-- <div v-if="key === 'cycle' || key === 'cycle_next'" class="flex d-flex align--center"> -->
-        <div v-if="key === 'cycle_next'" class="flex d-flex align--center">
-          <!-- <va-checkbox v-model="condition.select"></va-checkbox> -->
-          <span class="mr-1">{{ condition.prefix }}</span>
-          <!-- <input class="mr-1" :type="condition.type" v-model="condition.value"/> -->
-          <va-select
-            @click.native="updateTaskOptions()"
-            :label="''"
-            v-model="conditionObj.cycle_next.value"
-            textBy="description"
-            class="va-select-without-margin"
-            :options="taskOptionsKeys"
-            :noClear='false'
-          />
-          <span>{{ condition.suffix }}</span>
-        </div>
-        <div v-else class="flex d-flex align--center">
-          <va-checkbox v-model="condition.select"></va-checkbox>
-          <span class="mr-1">{{ condition.prefix }}</span>
-          <input class="mr-1" :type="condition.type" v-model="condition.value"/>
-          <span>{{ condition.suffix }}</span>
-        </div>
-      </div>
-      <div align="right">
-        <va-button color="warning" @click="reset" small>Reset</va-button>
-        <va-button color="success" @click="save" small>Save</va-button>
-      </div>
+    <div align="right">
+      <va-button color="warning" @click="reset" small>Reset</va-button>
+      <va-button color="success" @click="save" small>Save</va-button>
    </div>
  </div>
 </template>
@@ -77,9 +27,15 @@ export default {
  name: 'project-task-config-condition',
  components: {
  },
+  props: {
+    actionType: {
+      type: String,
+      required: true,
+    },
+  },
  computed: {
    conditionObj () {
-      return this.conditionTemplate[this.actionSelect]
+      return this.conditionTemplate[this.actionType]
    },

    deviceSelectName () {
@@ -94,16 +50,18 @@ export default {
      types.project.getSelect,
      types.project.getDevice,
      types.project.getAllDevice,
+      types.project.getDeviceShowName,
    ]),

    ...mapFields('project', [
      'taskSelectKey',
      'taskViewPanel',
+      'deviceSelectKey',
    ]),
  },
  data () {
    return {
-      settingStep: 0,
+      settingStep: 1,

      registeredDevice: {},
      deviceSelect: '',
@@ -119,7 +77,6 @@ export default {
      project: {},
      device: {},
      task: {},
-
    }
  },
  methods: {
@@ -158,7 +115,7 @@ export default {
    },
    save: function () {
      const actionUUID = this.GLOBAL.getUUID()
-      const newAction = this.createAction(actionUUID, this.actionSelect, this.deviceSelect)
+      const newAction = this.createAction(actionUUID, this.actionType, this.deviceSelect)

      // if device not add in task then add in
      if (!this.getSelectTask.device.includes(this.deviceSelect)) {
@@ -166,35 +123,15 @@ export default {
      }

      for (const key in this.conditionObj) {
-        if (key === 'cycle') {
-          // use 'cycle' and 'cycle_next' to set the default to condition: previous_task_done & after_task_run 0
-          if (this.conditionObj[key].select) {
-            const conditionUUID = this.GLOBAL.getUUID()
-            const newCondition = this.createCondition(conditionUUID, 'previous_task_done', 'equal', '')
-            this.setConditionTask({ condition: newCondition })
-            newAction[actionUUID].condition.push(conditionUUID)
-          }
-        } else if (key === 'cycle_next') {
-          if (this.conditionObj.cycle.select) {
-            const conditionUUID = this.GLOBAL.getUUID()
-            const newCondition = this.createCondition(conditionUUID, 'after_task_run', 'equal', '0')
-            this.setConditionTask({ condition: newCondition })
-            newAction[actionUUID].condition.push(conditionUUID)
-          }
-        } else {
-          if (this.conditionObj[key].select) {
-            const conditionUUID = this.GLOBAL.getUUID()
-            const newCondition = this.createCondition(conditionUUID, key, 'equal', this.conditionObj[key].value)
+        if (this.conditionObj[key].select) {
+          const conditionUUID = this.GLOBAL.getUUID()
+          const newCondition = this.createCondition(conditionUUID, key, 'equal', this.conditionObj[key].value)

-            this.setConditionTask({ condition: newCondition })
-            newAction[actionUUID].condition.push(conditionUUID)
-          }
+          this.setConditionTask({ condition: newCondition })
+          newAction[actionUUID].condition.push(conditionUUID)
        }
      }
      this.setActionTask({ action: newAction })
-      if (this.conditionObj.cycle_next !== undefined) {
-        this.setCycleTask({ cycle: Number(this.conditionObj.cycle.value), cycle_next: this.conditionObj.cycle_next.value, cycle_next_uuid: this.taskOptions[this.conditionObj.cycle_next.value] })
-      }
      this.reset()
    },
    updateTaskOptions: function () {
@@ -211,21 +148,23 @@ export default {
    ]),
  },
  mounted () {
-    // const project = this.getSelectProject
-    // const device = this.getAllDeviceProject
-    // const task = this.getSelectTask
    this.project = this.getSelectProject
    this.device = this.getAllDeviceProject
+    this.deviceSelect = this.deviceSelectKey
    this.task = this.getSelectTask
    for (var idx = 0; idx < this.project.task.length; idx++) {
      this.taskOptions[this.project.task[idx].name] = this.project.task[idx].uuid
    }
    this.taskOptionsKeys = Object.keys(this.taskOptions)
-
-    // console.log('project', this.project)
-    // console.log('task', this.task)
-
    this.registeredDevice = this.device
  },
+  watch: {
+    // refresh parameter when click different task's parameter
+    deviceSelectKey: {
+      handler: function () {
+        this.deviceSelect = this.deviceSelectKey
+      },
+    },
+  },
 }
 </script>
@@ -1,54 +1,54 @@
 <template>
  <div class="flex sm12 xl12 md12 xs12">
-    <div class="task-config__header-separator mb-1">
-      <div class="task-config__header-text">
-        <span> Device </span>
-        <va-button class="circle-button" small color="dark" @click="closePanel">
-          <va-icon
-            name="fa fa-times"
-            color="white"
-          />
-        </va-button>
-      </div>
-    </div>
    <div>
-      <va-list fit class="mb-2">
-        <va-item v-for="(device, index) in getSelectProject.device" :key="index" >
-          <va-item-section side>
-            <va-checkbox
-              :value="device.isSelect"
-              :arrayValue="(taskSelectKey != undefined)? String(taskSelectKey) : '-1'"
-              @input="selectDevice($event, device, index)"
-              ref="checkbox_ref"
-            />
-          </va-item-section>
+      <va-list fit class="mb-2 pb-0">
+        <va-list-label>
+          Register
+        </va-list-label>

-          <va-item-section avatar class="ml-0">
-            <va-avatar style="border-radius: 0;">
-              <img
-                src='@/assets/img/elite_img.png' :alt="device.name">
-            </va-avatar>
-          </va-item-section>
+        <template v-for="(device, index) in deviceListInOrder">
+          <va-item :class="taskDevice.includes(device[0]) === true ? 'device-list-focus': ''" :key="'register' + String(index)" @click="selectDevice(device, index)" clickable>
+            <va-item-section avatar>
+              <va-avatar style="border-radius: 0;">
+                <img src='@/assets/img/elite_img.png' :alt="device[1].name">
+              </va-avatar>
+            </va-item-section>

-          <va-item-section>
-            <va-item-label>
-              {{ device.name }}
-            </va-item-label>
+            <va-item-section>
+              <va-item-label>
+                {{ getDeviceShowNameProject(device[0]) }}
+              </va-item-label>
+            </va-item-section>
+          </va-item>
+        </template>
+      </va-list>
+      <va-list fit class="mb-2 pb-0">
+        <va-list-label>
+          Connect
+        </va-list-label>

-            <va-item-label caption>
-              {{ device.connectDevice.device_address }}
-            </va-item-label>
-          </va-item-section>
-        </va-item>
+        <template v-for="(device, index) in getNotRegisterDeviceProject()">
+          <va-item :key="'connect' + index" clickable @click="registerConnectDevice(device)">
+            <va-item-section avatar>
+              <va-avatar style="border-radius: 0;">
+                <img src='@/assets/img/elite_img.png' :alt="device.macAddress">
+              </va-avatar>
+            </va-item-section>
+            <va-item-section>
+              <va-item-label>
+                {{ device.macAddress }}
+              </va-item-label>
+            </va-item-section>
+          </va-item>
+        </template>
      </va-list>
    </div>
  </div>
 </template>
 <script>
 import { mapFields } from 'vuex-map-fields'
-import { mapGetters } from 'vuex'
-// import eliteImgUrl from '@/assets/img/elite_img.png'
-// import neuliveImgUrl from '@/assets/img/neulive_img.png'
+import { mapActions, mapGetters } from 'vuex'
+
 import types from '@/store/modules/project/types'

 export default {
@@ -56,9 +56,18 @@ export default {
  components: {
  },
  computed: {
+    deviceListInOrder () {
+      return Object.entries(this.getSelectProject.device).sort((a, b) => a[1].order - b[1].order)
+    },
+
+    taskDevice () {
+      return this.getSelectTask.device
+    },
    ...mapGetters('project', [
      types.project.getSelect,
      types.task.getSelect,
+      types.project.getDeviceShowName,
+      types.project.getNotRegisterDevice,
    ]),

    ...mapFields('project', [
@@ -71,38 +80,70 @@ export default {
    }
  },
  methods: {
-    selectDevice: function (event, device, key) {
-      // if select single task
-      if (this.taskSelectKey !== undefined) {
-        device.isSelect = event
-        // console.log('device.isSelect: ', device.isSelect)
-        device.isSelect.includes(String(this.taskSelectKey)) === true
-          ? this.getSelectTask.device.push(key)
-          : this.getSelectTask.device = this.getSelectTask.device.filter(item => item !== key)
+    selectDevice: function (device, index) {
+      if (this.taskDevice.includes(device[0]) === false) {
+        this.appendToTask(device[0])
      } else {
-        // if select all tasks
-        if (event.includes('-1')) {
-          // check all
-          device.isSelect = ['-1', ...Array(this.getSelectProject.task.length).fill().map((_, index) => String(index))]
-          for (const task of this.getSelectProject.task) {
-            if (!task.device.includes(key)) {
-              task.device.push(key)
-            }
-          }
-        } else {
-          // uncheck all
-          device.isSelect = []
-          for (const task of this.getSelectProject.task) {
-            task.device = task.device.filter(item => item !== key)
-          }
-        }
+        this.removeFromTask(device[0])
      }
    },
+    resetDevice: function () {
+    },
+    registerConnectDevice: async function (device) {
+      // register device
+      await this.createDeviceProject({
+        name: device.name,
+        library: device.library,
+        pair: device.macAddress,
+        pairStatus: 1,
+        order: this.getDeviceMaxOrderProject,
+      })
+      // select device
+      this.selectDevice(this.deviceListInOrder[this.deviceListInOrder.length - 1])
+    },
+    appendToTask: function (key) {
+      // if select single task
+      this.getSelectTask.device.push(key)
+      // create start action-condtion-pair when choose device
+      this.createActionConditionPairTask({
+        device: key,
+        task: this.getSelectTask,
+        action: 'start',
+        condition: {
+          type: 'previous_task_done',
+          comparsion: 'equal',
+          value: '',
+        },
+      })
+    },
+    removeFromTask: function (key) {
+      // if select single task
+      // this.getSelectTask.device = this.getSelectTask.device.filter(item => item !== key)
+      // remove device & relation action, condition, parameter
+      this.deleteDeviceTask({ deviceKey: key, onlySelectTask: true })
+    },
    closePanel: function () {
      this.taskViewPanel.show = !(this.taskViewPanel.show)
    },
+
+    ...mapActions('project',
+      [
+        types.project.createDevice,
+        types.task.deleteDevice,
+        types.task.createActionConditionPair,
+      ],
+    ),
  },
  mounted () {
  },
 }
 </script>
+<style lang="scss">
+  .device-list-focus {
+    background: #ebedff;
+    border: 1px solid #dbdcf0;
+    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
+    border-radius: 5px;
+  }
+
+</style>
@@ -1,21 +1,11 @@
 <template>
  <div class="flex sm12 xl12 md12 xs12">
-    <div class="task-config__header-separator mb-1">
-      <div class="task-config__header-text">
-        <span >Parameter Set</span>
-        <va-button class="circle-button" small color="dark" @click="closePanel">
-          <va-icon
-            name="fa fa-times"
-            color="white"
-          />
-        </va-button>
-      </div>
-    </div>
    <div>
      <device-parameter-recording
        :ref="'device_parameter_ref'"
        :parameter="parameter"
-        :library="'Elite_EDC_1.5'"
+        :library="library"
+        :place="'scheduler'"
        @setParameter="setParameter"
        @setParameterWithDebounce="setParameterWithDebounce"
      />
@@ -37,6 +27,11 @@ export default {
    DeviceParameterRecording,
  },
  computed: {
+    library () {
+      if (this.device === null) return null
+      return this.device.library
+    },
+
    ...mapGetters('project', [
      types.task.getSelect,
      types.task.getParameterSet,
@@ -89,6 +84,7 @@ export default {
    resetParameter: function (mode) {
      // get Device
      this.device = this.getDeviceProject(this.deviceSelectKey)
+      if (this.device === undefined) return
      // get Config
      if (typeof this.device.library === 'string') { // string
        this.config = configTable.getConfig(this.device.library)
@@ -110,6 +106,9 @@ export default {
        const modeOption = this.$refs.device_parameter_ref.workingModeOptions.find(ele => ele.id === param.MODE)
        this.$refs.device_parameter_ref.workingModeSelectChange(modeOption)
        this.parameter = Object.assign(this.parameter, Object.values(parameterSet)[0])
+      } else {
+        const defaultMode = this.config.MODE_OPTIONS.find(ele => ele.description === 'Idle')
+        this.setParameter('MODE', defaultMode.id)
      }
    },
    ...mapActions('project',
@@ -119,8 +118,23 @@ export default {
    ),
  },
  mounted () {
-    // init parameter
-    this.resetParameter()
+  },
+  watch: {
+    // refresh parameter when click different task's parameter
+    taskSelectKey: {
+      handler: function () {
+        this.parameter = {}
+        this.parameterUUID = ''
+        this.resetParameter()
+      },
+    },
+    deviceSelectKey: {
+      handler: function () {
+        this.parameter = {}
+        this.parameterUUID = ''
+        this.resetParameter()
+      },
+    },
  },
 }
 </script>
@@ -12,14 +12,14 @@
    </div>
    <!-- EIS -->
    <div v-if="workingModeSelect != null && workingModeSelect.id == 0">
-      <d-c-volt :ref="'DCVolt'" :deviceID="deviceID" :parameterName="'DC_BIAS'" @parameterChange="deviceParameterChange($event)" />
-      <a-c-amplitude :ref="'ACAmplitude'" :deviceID="deviceID" :parameterName="'AC_AMP'" @parameterChange="deviceParameterChange($event)" />
-      <freq-range :ref="'FreqRange'" :deviceID="deviceID" :parameterName="'FREQ'" @parameterChange="deviceParameterChange($event)" />
-      <points-per-decades :ref="'PointsPerDecades'" :deviceID="deviceID" :parameterName="'PPD'" @parameterChange="deviceParameterChange($event)" />
-      <point-spacing :ref="'PointSpacing'" :deviceID="deviceID" :parameterName="'SCALE'" @parameterChange="deviceParameterChange($event)" />
-      <delay :ref="'Delay'" :deviceID="deviceID" :parameterName="'DELAY'" @parameterChange="deviceParameterChange($event)" />
-      <average :ref="'Average'" :deviceID="deviceID" :parameterName="'AVERAGE_NUM'" @parameterChange="deviceParameterChange($event)" />
-      <current-range :ref="'CurrentRange'" :deviceID="deviceID" :parameterName="'RTIA'" @parameterChange="deviceParameterChange($event)" />
+      <d-c-volt :ref="'DCVolt'" :deviceID="deviceID" :parameterName="'EIS_DC_BIAS'" @parameterChange="deviceParameterChange($event)" />
+      <a-c-amplitude :ref="'ACAmplitude'" :deviceID="deviceID" :parameterName="'EIS_AC_AMP'" @parameterChange="deviceParameterChange($event)" />
+      <freq-range :ref="'FreqRange'" :deviceID="deviceID" :parameterName="'EIS_FREQ'" @parameterChange="deviceParameterChange($event)" />
+      <points-per-decades :ref="'PointsPerDecades'" :deviceID="deviceID" :parameterName="'EIS_PPD'" @parameterChange="deviceParameterChange($event)" />
+      <point-spacing :ref="'PointSpacing'" :deviceID="deviceID" :parameterName="'EIS_SCALE'" @parameterChange="deviceParameterChange($event)" />
+      <delay :ref="'Delay'" :deviceID="deviceID" :parameterName="'EIS_DELAY'" @parameterChange="deviceParameterChange($event)" />
+      <average :ref="'Average'" :deviceID="deviceID" :parameterName="'EIS_AVERAGE_NUM'" @parameterChange="deviceParameterChange($event)" />
+      <current-range :ref="'CurrentRange'" :deviceID="deviceID" :parameterName="'GENERAL_HS_RTIA'" @parameterChange="deviceParameterChange($event)" />
    </div>
    <!-- CV -->
    <div v-if="workingModeSelect != null && workingModeSelect.id == 1">
@@ -45,14 +45,6 @@
          <level-button :ref="'currentRangeSelect'" :deviceID="deviceID" :options="currentRangeOptions" :parameterName="'ADC_LEVEL_I_15'" @parameterChange="deviceParameterChange($event)" />
        </div>
      </div>
-      <div class="flex row mt-0 pt-0 sm12 xl12 md12 xs12 align--center">
-        <div class="flex sm12 xl12 md12 xs12 pa-0 ma-0">
-          <p class="display-6">Voltage Range<p/>
-        </div>
-        <div class="flex sm12 xl12 md12 xs12 pa-0 ma-1" >
-          <level-button :ref="'voltageInRangeSelect'" :deviceID="deviceID" :options="voltageInRangeOptions" :parameterName="'ADC_LEVEL_V_IN_15'" @parameterChange="deviceParameterChange($event)" />
-        </div>
-      </div>
      <div class="flex row mt-0 pt-0 sm12 xl12 md12 xs12 align--center">
        <div class="flex sm12 xl12 md12 xs12 pa-0 ma-0">
          <p class="display-6">High Z<p/>
@@ -66,7 +58,7 @@
          <p class="display-6">E Initial<p/>
        </div>
        <div class="flex sm12 xl12 md12 xs12 pa-0 ma-1" >
-          <volt-range :ref="'voltInitialNumber'" :deviceID="deviceID" :parameterName="'VOLT_INITIAL'" :minValue="-1.8" :maxValue="2" @parameterChange="deviceParameterChange($event)" />
+          <volt-range :ref="'voltInitialNumber'" :deviceID="deviceID" :parameterName="'CV_E_INITIAL'" :minValue="-1.8" :maxValue="2" @parameterChange="deviceParameterChange($event)" />
        </div>
      </div>
      <div class="flex row mt-0 pt-0 sm12 xl12 md12 xs12 align--center">
@@ -74,7 +66,7 @@
          <p class="display-6">E1<p/>
        </div>
        <div class="flex sm12 xl12 md12 xs12 pa-0 ma-1" >
-          <volt-range :ref="'voltMaxNumber'" :deviceID="deviceID" :parameterName="'VOLT_MAX'" :minValue="-1.8" :maxValue="2" @parameterChange="deviceParameterChange($event)" />
+          <volt-range :ref="'voltMaxNumber'" :deviceID="deviceID" :parameterName="'CV_E1'" :minValue="-1.8" :maxValue="2" @parameterChange="deviceParameterChange($event)" />
        </div>
      </div>
      <div class="flex row mt-0 pt-0 sm12 xl12 md12 xs12 align--center">
@@ -82,7 +74,7 @@
          <p class="display-6">E2<p/>
        </div>
        <div class="flex sm12 xl12 md12 xs12 pa-0 ma-1" >
-          <volt-range :ref="'voltMinNumber'" :deviceID="deviceID" :parameterName="'VOLT_MIN'" :minValue="-1.8" :maxValue="2" @parameterChange="deviceParameterChange($event)" />
+          <volt-range :ref="'voltMinNumber'" :deviceID="deviceID" :parameterName="'CV_E2'" :minValue="-1.8" :maxValue="2" @parameterChange="deviceParameterChange($event)" />
        </div>
      </div>
      <div class="flex row mt-0 pt-0 sm12 xl12 md12 xs12 align--center">
@@ -90,7 +82,7 @@
          <p class="display-6">Voltage Scan Rate<p/>
        </div>
        <div class="flex sm12 xl12 md12 xs12 pa-0 ma-1" >
-          <scan-rate-range :ref="'voltScanRateNumber'" :deviceID="deviceID" :parameterName="'Scan_Rate'" :minValue="0.01" :maxValue="1000" @parameterChange="deviceParameterChange($event)" />
+          <scan-rate-range :ref="'voltScanRateNumber'" :deviceID="deviceID" :parameterName="'CV_SCAN_RATE'" :minValue="0.01" :maxValue="1000" @parameterChange="deviceParameterChange($event)" />
        </div>
      </div>
      <div class="flex row mt-0 pt-0 sm12 xl12 md12 xs12 align--center">
@@ -283,7 +275,7 @@ export default {
        },
      ],
      DCVolt: null,
-      AC_AMP: null,
+      EIS_AC_AMP: null,
      FreqStart: null,
      FreqStop: null,
      PointsPerDecades: null,
@@ -395,44 +387,35 @@ export default {
      this.measureEocButton.status = false
    },
    refresh () {
-      // taskInfo.getDeviceInfo(this.deviceID).parameterSet.CHANNEL_LABEL = ['Z_image_Raw', 'Z_Real_Raw', 'Frequency', 'Cycle', 'Z_imag', 'Z_real', 'Impedance', 'Phase', 'Current', 'Level gain']
      this.workingModeSelect = this.workingModeOptions[taskInfo.getDeviceInfo(this.deviceID).parameterSet.MODE]
      if (this.workingModeSelect != null) {
        this.workingModeSelectChange(this.workingModeSelect)
      }
-      this.ACAmplitude = String(Math.round((taskInfo.getDeviceInfo(this.deviceID).parameterSet.AC_AMP) / 2047 * 800))
+      this.ACAmplitude = String(Math.round((taskInfo.getDeviceInfo(this.deviceID).parameterSet.EIS_AC_AMP) / 2047 * 800))
      if (this.$refs.ACAmplitude != null) {
        this.$refs.ACAmplitude.itemChange(this.ACAmplitude)
      }
-      this.Average = taskInfo.getDeviceInfo(this.deviceID).parameterSet.AVERAGE_NUM
+      this.Average = taskInfo.getDeviceInfo(this.deviceID).parameterSet.EIS_AVERAGE_NUM
      if (this.$refs.Average != null) {
        this.$refs.Average.itemChange(this.Average)
      }
-      this.CurrentRange = taskInfo.getDeviceInfo(this.deviceID).parameterSet.RTIA
+      this.CurrentRange = taskInfo.getDeviceInfo(this.deviceID).parameterSet.GENERAL_HS_RTIA
      if (this.$refs.CurrentRange != null) {
        this.$refs.CurrentRange.itemChange(this.CurrentRange)
      }
-      this.PointSpacing = taskInfo.getDeviceInfo(this.deviceID).parameterSet.SCALE
+      this.PointSpacing = taskInfo.getDeviceInfo(this.deviceID).parameterSet.EIS_SCALE
      if (this.$refs.PointSpacing != null) {
        this.$refs.PointSpacing.itemChange(this.PointSpacing)
      }
-      this.DCVolt = String(Math.round((taskInfo.getDeviceInfo(this.deviceID).parameterSet.DC_BIAS) * 2200 / 4095))
+      this.DCVolt = String(Math.round((taskInfo.getDeviceInfo(this.deviceID).parameterSet.EIS_DC_BIAS) * 2200 / 4095))
      if (this.$refs.DCVolt != null) {
        this.$refs.DCVolt.itemChange(this.DCVolt)
      }
-      this.Delay = String(parseFloat((taskInfo.getDeviceInfo(this.deviceID).parameterSet.DELAY) / 10).toFixed(1))
+      this.Delay = String(parseFloat((taskInfo.getDeviceInfo(this.deviceID).parameterSet.EIS_DELAY) / 10).toFixed(1))
      if (this.$refs.Delay != null) {
        this.$refs.Delay.itemChange(this.Delay)
      }
-      this.FreqStart = String(parseFloat(Math.round(parseFloat((taskInfo.getDeviceInfo(this.deviceID).parameterSet.FREQ_START * 0.0149) * 100)) / 100).toFixed(1)) === '0.0' ? '0.015' : String(parseFloat(Math.round(parseFloat((taskInfo.getDeviceInfo(this.deviceID).parameterSet.FREQ_START * 0.0149) * 100)) / 100).toFixed(1))
-      if (this.$refs.FreqRange != null) {
-        this.$refs.FreqRange.itemChangeMax(this.FreqStart)
-      }
-      this.FreqStop = String(parseFloat(Math.round(parseFloat((taskInfo.getDeviceInfo(this.deviceID).parameterSet.FREQ_STOP * 0.0149) * 100)) / 100).toFixed(1)) === '0.0' ? '0.015' : String(parseFloat(Math.round(parseFloat((taskInfo.getDeviceInfo(this.deviceID).parameterSet.FREQ_STOP * 0.0149) * 100)) / 100).toFixed(1))
-      if (this.$refs.FreqRange != null) {
-        this.$refs.FreqRange.itemChangeMin(this.FreqStop)
-      }
-      this.PointsPerDecades = String(Math.round((taskInfo.getDeviceInfo(this.deviceID).parameterSet.PPD)))
+      this.PointsPerDecades = String(Math.round((taskInfo.getDeviceInfo(this.deviceID).parameterSet.EIS_PPD)))
      if (this.$refs.PointsPerDecades != null) {
        this.$refs.PointsPerDecades.itemChange(this.PointsPerDecades)
      }
@@ -443,11 +426,6 @@ export default {
        this.$refs.currentRangeSelect.updateLevelButton(this.currentRangeSelect)
      }

-      this.voltageInRangeSelect = taskInfo.getDeviceInfo(this.deviceID).parameterSet.ADC_LEVEL_V_IN_15
-      if (this.$refs.voltageInRangeSelect != null) {
-        this.$refs.voltageInRangeSelect.updateLevelButton(this.voltageInRangeSelect)
-      }
-
      this.highzSelect = taskInfo.getDeviceInfo(this.deviceID).parameterSet.CTRL_HIGH_Z_15
      if (this.$refs.highzSelect != null) {
        this.$refs.highzSelect.updateLevelButton(this.highzSelect)
@@ -463,12 +441,12 @@ export default {
        this.$refs.stopVoltMinNumber.updateVoltNumber(this.stopVoltMinNumber)
      }

-      this.voltInitialNumber = (taskInfo.getDeviceInfo(this.deviceID).parameterSet.VOLT_INITIAL - 25000) / 5
+      this.voltInitialNumber = (taskInfo.getDeviceInfo(this.deviceID).parameterSet.CV_E_INITIAL - 25000) / 5
      if (this.$refs.voltInitialNumber != null) {
        this.$refs.voltInitialNumber.updateVoltNumber(this.voltInitialNumber)
      }

-      this.voltScanRateNumber = taskInfo.getDeviceInfo(this.deviceID).parameterSet.Scan_Rate
+      this.voltScanRateNumber = taskInfo.getDeviceInfo(this.deviceID).parameterSet.CV_SCAN_RATE
      if (this.$refs.voltScanRateNumber != null) {
        this.$refs.voltScanRateNumber.updateVoltScanRateNumber(this.voltScanRateNumber)
      }
@@ -505,7 +505,7 @@ export default {
        // },
        // {
        //   id: 11,
-        //   description: 'Cali ADC - test',
+        //   description: 'Cali Mode - test',
        // },
        // {
        //   id: 12,
@@ -576,6 +576,10 @@ export default {
          value: 1,
          label: 'Vin',
        },
+        {
+          value: 2,
+          label: 'Vout',
+        },
      ],
      startVoltNumber: null,
      stopVoltNumber: null,
@@ -1,6 +1,6 @@
 <template>
  <div>
-    <elite-parameter-recording-elitezm15 :ref="'rec_ref_2'" :deviceID="deviceID" @parameterChange="parameterChange"/>
+    <elite-parameter-recording-elitezm15 :ref="'rec_ref_2'" :deviceID="deviceID" @parameterChange="parameterChange" :place="'scheduler'"/>
    <!-- <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"/>
@@ -1,22 +1,27 @@
 <template>
  <div>
-    <va-card style="height: 90vh; overflow: auto; display: block;">
+    <!-- <pre>{{ getSelectProject }} </pre> -->
+    <va-card style="height: 88vh; overflow: auto; display: block;">
      <template slot="header">
-        <va-icon name="fa fa-bluetooth-b mr-3" color="primary"/>
-        <h5 class="mt-0 mb-0"> {{ getSelectProject ? getSelectProject.name : '' }}</h5>
+        <p class="project-view-header">{{ getSelectProject ? getSelectProject.name : '' }}</p>
      </template>
      <div v-if="getSelectProject === undefined">
        <span>please select project</span>
      </div>
      <div v-else>
-        <project-menu/>
+        <project-menu @detect="detect" @save_project="save"/>
        <project-table/>
        <div align="right" v-if="lockMode === false">
-          <va-button @click="save">Save</va-button>
-          <va-button @click="start">Start</va-button>
+          <button class="project-start-btn" @click="start">
+            <div>
+              <img src='@/assets/img/project/play.svg' alt="start">
+            </div>
+          </button>
        </div>
        <div align="right" v-if="lockMode === true">
-          <va-button @click="stop">Stop</va-button>
+          <button class="project-stop-btn" @click="stop">
+            <img src='@/assets/img/project/stop.svg' alt="stop">
+          </button>
        </div>
      </div>
    </va-card>
@@ -58,8 +63,11 @@ export default {
    stop: function () {
      this.$emit('stop_project', this.getSelectProject)
    },
-    save: function () {
-      this.$emit('save_project', this.getSelectProject)
+    save: function (project) {
+      this.$emit('save_project', project)
+    },
+    detect: function (device) {
+      this.$emit('detect', device)
    },
    ...mapActions('project',
      [
@@ -69,29 +77,39 @@ export default {
    ),
  },
  watch: {
-    projectSelectIndex: {
-      handler: async function () {
-        for (const device of this.deviceConnectList) {
-          var newDevice = {
-            uuid: this.GLOBAL.getUUID(),
-            name: device.mac_address,
-            product: device.device_name,
-            library: device.library_name,
-            connectDevice: device,
-            isSelect: [],
-          }
-          await this.addDeviceProject({ device: newDevice })
-          if (device.library_name !== undefined) {
-            this.projectLibrary = device.library_name
-          }
-        }
-      },
-    },
  },
  async mounted  () {
-    // console.log('mounted')
-    // console.log(this.deviceConnectList)
-    // console.log(this.deviceConnectList.length)
  },
 }
 </script>
+<style lang="scss">
+  .project-view-header {
+    margin: 0.3rem 0 2rem 0;
+    font-family: 'Inter-ExtraBold';
+    // font-style: normal;
+    // font-weight: 800;
+    font-size: 24px;
+    line-height: 29px;
+
+    /* identical to box height */
+    color: #2c4053;
+  }
+
+  .project-start-btn {
+    width: 120px;
+    height: 50px;
+    background: #87d9d4;
+    border-radius: 8px;
+    border: white;
+    cursor: pointer;
+  }
+
+  .project-stop-btn {
+    width: 120px;
+    height: 50px;
+    background: #ff6c63;
+    border-radius: 8px;
+    border: white;
+    cursor: pointer;
+  }
+</style>
@@ -1,57 +1,139 @@
 <template>
  <div>
-    <div class="row">
-      <div class="flex d-flex">
-        <switch-project/>
-        <add-task/>
-        <add-device @showDeviceModal="showDeviceModal"/>
-        <!-- <clear-task/>
-        <save-project/>
-        <import-project/>
-        <export-project/>
-        <delete-project/> -->
+    <div class="flex d-flex sm12 xs12 md6 xl4 px-0">
+      <add-task/>
+      <div>
+        <button class="add-cycle-btn" @click="showCycleModal">
+          <div class="add-cycle-text">
+            <p>Add Cycle</p>
+          </div>
+        </button>
+      </div>
+      <div>
+        <button class="copy-project-btn" @click="copyTask({ project: getSelectProject, index: projectTableSelectIndex})">
+          <img class="img-vertical-center" src="@/assets/img/project/copy.svg">
+        </button>
+      </div>
+      <div>
+        <button class="copy-project-btn" @click="saveProject">
+          <img class="img-vertical-center" src="@/assets/img/project/save.svg">
+        </button>
+      </div>
+      <div>
+        <button class="copy-project-btn" @click="deleteTask({ project: getSelectProject, index: projectTableSelectIndex})">
+          <img class="img-vertical-center" src="@/assets/img/project/delete.svg">
+        </button>
      </div>
    </div>
-    <project-device @showDeviceModal="showDeviceModal($event)"></project-device>
-    <device-modal ref="device_modal_ref"></device-modal>
+    <project-device @showDeviceModal="showDeviceModal"></project-device>
+    <new-device-modal ref="device_modal_ref" @detect="detect"></new-device-modal>
+    <cycle-modal ref="cycle_modal_ref" @createCycle="createCycle"></cycle-modal>
  </div>
 </template>

 <script>
-import SwitchProject from '@/components/project/view/menu/components/SwitchProject'
+// import SwitchProject from '@/components/project/view/menu/components/SwitchProject'
 import AddTask from '@/components/project/view/menu/components/AddTask'
-// import ClearTask from '@/components/project/view/menu/components/ClearTask'
-// import ExportProject from '@/components/project/view/menu/components/ExportProject'
-// import ImportProject from '@/components/project/view/menu/components/ImportProject'
-// import SaveProject from '@/components/project/view/menu/components/SaveProject'
-// import DeleteProject from '@/components/project/view/menu/components/DeleteProject'
-import AddDevice from '@/components/project/view/menu/components/AddDevice'
+// import AddDevice from '@/components/project/view/menu/components/AddDevice'
 import ProjectDevice from '@/components/project/view/menu/components/ProjectDevice'
-import DeviceModal from '@/components/project/view/menu/components/DeviceModal'
+import NewDeviceModal from '@/components/project/view/menu/components/NewDeviceModal'
+import CycleModal from '@/components/project/view/menu/components/CycleModal'
+import { mapFields } from 'vuex-map-fields'
+import { mapActions, mapGetters } from 'vuex'
+import types from '@/store/modules/project/types'

 export default {
  name: 'project-menu',
  components: {
-    SwitchProject,
    AddTask,
-    AddDevice,
-    // ClearTask,
-    // ExportProject,
-    // ImportProject,
-    // SaveProject,
-    // DeleteProject,
+    // AddDevice,
    ProjectDevice,
-    DeviceModal,
+    NewDeviceModal,
+    CycleModal,
+  },
+  computed: {
+    ...mapGetters('project', [
+      types.project.getSelect,
+    ]),
+    ...mapFields('project', [
+      'taskViewPanel',
+      'taskSelectKey',
+      'deviceSelectKey',
+      'lockMode',
+      'projectTableSelectIndex',
+    ]),
  },
  data () {
    return {
    }
  },
  methods: {
-    showDeviceModal: function (device) {
-      this.$refs.device_modal_ref.show()
-      this.$refs.device_modal_ref.initSetting(device)
+    detect: function (device) {
+      this.$emit('detect', device)
    },
+    showDeviceModal: function (key, device) {
+      this.$refs.device_modal_ref.show()
+      this.$refs.device_modal_ref.initSetting(key, device)
+    },
+    createCycle: function (cycleInfo) {
+      this.createCycleTask({ cycleInfo: cycleInfo })
+    },
+    showCycleModal: function () {
+      this.$refs.cycle_modal_ref.show()
+      this.$refs.cycle_modal_ref.reset()
+    },
+    saveProject: function () {
+      this.$emit('save_project', this.getSelectProject)
+    },
+
+    ...mapActions('project',
+      [
+        types.task.copy,
+        types.task.delete,
+        types.task.rearrange,
+        types.task.createCycle,
+      ],
+    ),
  },
 }
 </script>
+<style lang="scss">
+  .add-cycle-btn {
+    margin-left: 0.5rem;
+    width: 120px;
+    height: 38px;
+    left: 0;
+    top: 0;
+    background: #87d9d4;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+  }
+
+  .add-cycle-text {
+    width: 110px;
+    height: 24px;
+    font-family: 'Inter-Bold';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 24px;
+    text-align: center;
+    color: #ffffff;
+    margin: 0 auto;
+  }
+
+  .copy-project-btn {
+    margin-left: 0.5rem;
+    width: 50px;
+    height: 38px;
+    background: #87d9d4;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+  }
+
+  .img-vertical-center {
+    vertical-align: middle;
+  }
+</style>
@@ -1,6 +1,6 @@
 <template>
  <div>
-    <va-button @click="addDevice" small>ADD DEVICE</va-button>
+    <va-button @click="addDevice" small>+ DEVICE</va-button>
  </div>
 </template>
 <script>
@@ -1,6 +1,10 @@
 <template>
  <div>
-    <va-button @click="createTask" small>ADD TASK</va-button>
+    <button class="add-task-btn" @click="createTask">
+      <div class="add-task-text">
+        <p>Add Task</p>
+      </div>
+    </button>
  </div>
 </template>
 <script>
@@ -30,3 +34,28 @@ export default {
  },
 }
 </script>
+<style lang="scss">
+  .add-task-btn {
+    width: 120px;
+    height: 38px;
+    left: 0;
+    top: 0;
+    background: #87d9d4;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+  }
+
+  .add-task-text {
+    width: 100px;
+    height: 24px;
+    font-family: 'Inter-Bold';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 24px;
+    text-align: center;
+    color: #ffffff;
+    margin: 0 auto;
+  }
+</style>
@@ -0,0 +1,258 @@
+<template>
+  <div>
+    <va-modal
+      class="flex sm12 xl12 md12 xs12"
+      v-model="showModal"
+      size="small"
+      :noOutsideDismiss="true"
+      hide-default-actions
+    >
+      <template slot="header">
+        <div class="d-flex mb-3">
+          <va-icon name="fa fa-bluetooth-b mr-3" color="primary"/>
+          <h5 v-if="Object.keys(cycleInfo).length == 0" class="mt-0 mb-0">Create Cycle</h5>
+          <h5 v-else class="mt-0 mb-0">{{ cycleInfo.name }}</h5>
+        </div>
+      </template>
+      <div class="row">
+        <div class="row flex sm6 xl6 md6 xs6">
+          <div class="flex sm2 xl2 md2 xs2 pt-2">
+            <span>Start</span>
+          </div>
+          <div class="flex sm8 xl8 md8 xs8">
+            <va-select
+              :label="''"
+              v-model="task.start"
+              textBy="name"
+              class="va-select-without-margin"
+              :options="taskOptions"
+              :noClear='true'
+            />
+          </div>
+        </div>
+        <div class="row flex sm6 xl6 md6 xs6">
+          <div class="flex sm2 xl2 md2 xs2 pt-2">
+            <span>End</span>
+          </div>
+          <div class="flex sm8 xl8 md8 xs8">
+            <va-select
+              :label="''"
+              v-model="task.end"
+              textBy="name"
+              class="va-select-without-margin"
+              :options="taskOptions"
+              :noClear='true'
+            />
+          </div>
+        </div>
+        <div class="row flex sm12 xl12 md12 xs12">
+          <div class="flex sm2 xl2 md2 xs2 pt-2">
+            <span> Cycle No. </span>
+          </div>
+          <div class="flex sm2 xl2 md2 xs2">
+            <va-input v-model="task.cycle"/>
+          </div>
+        </div>
+        <div class="row flex sm12 xl12 md12 xs12" style="height: 40px;">
+          <div class="flex sm1 xl1 md1 xs1">
+            <va-checkbox
+              v-model="task.useID"
+            />
+          </div>
+          <div class="flex sm4 xl4 md4 xs4">
+            Use ID As Header
+          </div>
+          <div v-if="task.useID" class="flex sm4 xl4 md4 xs4">
+            <va-input v-model="task.id"></va-input>
+          </div>
+        </div>
+        <!-- <div class="row flex sm12 xl12 md12 xs12">
+          <div class="flex sm1 xl1 md1 xs1">
+            <va-checkbox
+              v-model="task.buttonTrigger"
+            />
+          </div>
+          <div class="flex sm6 xl6 md6 xs6">
+            Wait Until Button Press In Next Loop
+          </div>
+        </div> -->
+      </div>
+      <div class="flex-center sm12 xl12 md12 xs12">
+        <va-button v-if="Object.keys(cycleInfo).length > 0" @click="removeCycle" color="danger">Remove</va-button>
+        <va-button @click="hide">Cancel</va-button>
+        <va-button @click="createCycle" @keyup.native="keyFunction($event,item)">OK</va-button>
+      </div>
+    </va-modal>
+  </div>
+</template>
+<script>
+import { mapFields } from 'vuex-map-fields'
+import { mapActions, mapGetters } from 'vuex'
+import types from '@/store/modules/project/types'
+
+export default {
+  name: 'cycle-modal',
+  components: {
+  },
+  computed: {
+    ...mapGetters('project', [
+      types.project.getSelect,
+    ]),
+
+    ...mapFields('project', [
+      'deviceConnectList',
+      'projectLibrary',
+    ]),
+  },
+  data () {
+    return {
+      showModal: false,
+      taskOptions: [],
+      task: {
+        id: '',
+        name: '',
+        start: -1,
+        end: -1,
+        cycle: '1',
+        useID: false,
+        buttonTrigger: false,
+        uuid: '',
+      },
+      cycleInfo: {},
+    }
+  },
+  methods: {
+    show: function () {
+      this.showModal = true
+      // window.addEventListener('keydown', (e) => {
+      //   console.log('e', e)
+      //   if (e.keyCode === 13) {
+      //     this.createCycle()
+      //   }
+      // }, { once: true })
+    },
+    hide: function () {
+      this.showModal = false
+    },
+    createCycle: async function () {
+      this.showModal = false
+      const project = this.getSelectProject
+      if (Object.keys(this.cycleInfo).length === 0) {
+        this.$emit('createCycle', this.task)
+      }
+      if (Object.keys(this.cycleInfo).length !== 0) {
+        this.cycleInfo.max = this.task.cycle
+        this.cycleInfo.name = this.task.name
+        this.cycleInfo.useID = this.task.useID
+        this.cycleInfo.id = this.task.id
+
+        const originStartIndex = await this.getIndexTask({ project: project, uuid: this.cycleInfo.range[0] })
+        const newStartIndex = await this.getIndexTask({ project: project, uuid: this.task.start.value })
+
+        if (this.task.useID === true) {
+          const condition = project.task[originStartIndex].condition
+          const action = project.task[originStartIndex].action
+          delete condition[(Object.keys(condition).find(key => condition[key].type === 'after_task_run'))]
+          const conditionUUID = this.GLOBAL.getUUID()
+          const newCond = await this.createConditionTask({ uuid: conditionUUID, condition: 'until_button_trigger', compOp: 'equal', value: '' })
+          project.task[originStartIndex].condition = Object.assign({}, condition, newCond)
+          action[Object.keys(action).find(key => action[key].type === 'cycle')].condition.push(conditionUUID)
+
+          project.task[originStartIndex].name = this.task.name
+        } else {
+          const condition = project.task[originStartIndex].condition
+          const action = project.task[originStartIndex].action
+          delete condition[(Object.keys(condition).find(key => condition[key].type === 'until_button_trigger'))]
+          const conditionUUID = this.GLOBAL.getUUID()
+          const newCond = await this.createConditionTask({ uuid: conditionUUID, condition: 'after_task_run', compOp: 'equal', value: '0' })
+          project.task[originStartIndex].condition = Object.assign({}, condition, newCond)
+          action[Object.keys(action).find(key => action[key].type === 'cycle')].condition.push(conditionUUID)
+        }
+
+        if (Number(originStartIndex) + 1 !== Number(newStartIndex)) {
+          await this.swapTask({ project: project, originIndex: originStartIndex, newIndex: newStartIndex })
+        }
+
+        const originEndIndex = await this.getIndexTask({ project: project, uuid: this.cycleInfo.range[1] })
+        const newEndIndex = await this.getIndexTask({ project: project, uuid: this.task.end.value })
+
+        project.task[originEndIndex].name = this.task.name
+
+        if (Number(originEndIndex) - 1 !== Number(newEndIndex)) {
+          await this.swapTask({ project: project, originIndex: originEndIndex, newIndex: newEndIndex + 1 })
+        }
+      }
+
+      return true
+    },
+    removeCycle: async function () {
+      const project = this.getSelectProject
+
+      // remove project cycle
+      project.cycle.splice(project.cycle.findIndex(ele => ele.name === this.cycleInfo.name), 1)
+
+      // remove left cycle task
+      const originStartIndex = await this.getIndexTask({ project: project, uuid: this.cycleInfo.range[0] })
+      await this.deleteTask({ project: project, index: originStartIndex })
+
+      // remove right cycle task
+      const originEndIndex = await this.getIndexTask({ project: project, uuid: this.cycleInfo.range[1] })
+      await this.deleteTask({ project: project, index: originEndIndex })
+
+      this.showModal = false
+      return true
+    },
+    updateTaskOptions: function () {
+      const taskOptions = []
+      const project = this.getSelectProject
+      for (var idx = 0; idx < project.task.length; idx++) {
+        if (Object.keys(this.cycleInfo).length !== 0) {
+          if (this.cycleInfo.range.findIndex(ele => ele === project.task[idx].uuid) !== -1) continue
+        }
+        taskOptions.push({
+          id: idx,
+          name: project.task[idx].name,
+          value: project.task[idx].uuid,
+        })
+      }
+      this.taskOptions = taskOptions
+    },
+    reset: function () {
+      this.updateTaskOptions()
+      this.task.start = this.taskOptions[0]
+      this.task.end = this.taskOptions[this.taskOptions.length - 1]
+    },
+    setCycleInfo: async function (project, uuid) {
+      this.cycleInfo = project.cycle.find(ele => ele.range.find(ele => ele === uuid))
+      const startIndex = await this.getIndexTask({ project: project, uuid: this.cycleInfo.range[0] }) + 1
+      const endIndex = await this.getIndexTask({ project: project, uuid: this.cycleInfo.range[1] }) - 1
+
+      this.updateTaskOptions()
+      this.task.start = this.taskOptions[this.taskOptions.findIndex(ele => ele.value === project.task[startIndex].uuid)]
+      this.task.end = this.taskOptions[this.taskOptions.findIndex(ele => ele.value === project.task[endIndex].uuid)]
+      this.task.name = this.cycleInfo.name
+      this.task.cycle = this.cycleInfo.max
+      this.task.useID = this.cycleInfo.useID
+      this.task.id = this.cycleInfo.id
+    },
+    ...mapActions('project',
+      [
+        types.project.addDevice,
+        types.project.findDevice,
+        types.project.setDevice,
+        types.task.init,
+        types.task.create,
+        types.task.save,
+        types.task.delete,
+        types.task.select,
+        types.task.getIndex,
+        types.task.swap,
+        types.task.createCondition,
+      ],
+    ),
+
+  },
+  mounted () {
+  },
+}
+</script>
@@ -0,0 +1,153 @@
+<template>
+  <div>
+    <va-modal
+      class="flex sm12 xl12 md12 xs12"
+      v-model="showModal"
+      size="small"
+      :noOutsideDismiss="true"
+      hide-default-actions
+    >
+      <template slot="header">
+        <div class="d-flex mb-3">
+          <va-icon name="fa fa-bluetooth-b mr-3" color="primary"/>
+          <h5 class="mt-0 mb-0">Choose Device</h5>
+        </div>
+      </template>
+      <va-list fit class="mb-2 pb-0">
+        <va-list-label>
+          Connect
+        </va-list-label>
+        <va-item v-if="deviceList.length === 0">
+          <va-item-section>
+            There is no connected device.
+          </va-item-section>
+        </va-item>
+        <template v-else v-for="(device, index) in deviceList">
+          <va-item :class="deviceSelect === index ? 'device-list-focus': ''" :key="'connect-' + index" @click="selectDevice(device, index)" clickable>
+            <va-item-section avatar>
+              <va-avatar style="border-radius: 0;">
+                <img src='@/assets/img/elite_img.png' :alt="device.macAddress">
+              </va-avatar>
+            </va-item-section>
+
+            <va-item-section>
+              {{ device.macAddress }}
+            </va-item-section>
+
+            <va-item-section side>
+              <va-icon name="fa fa-map-marker" color="gray" @click.native="detect(device.macAddress)"/>
+            </va-item-section>
+          </va-item>
+          <!-- <va-list-separator v-if="index < deviceList.length - 1" :key="'separator-' + index" /> -->
+        </template>
+      </va-list>
+      <div class="flex-center sm12 xl12 md12 xs12">
+        <va-button color='danger' @click="removeDevice">Remove</va-button>
+        <va-button @click="hide">Cancel</va-button>
+        <va-button @click="changeDevice">OK</va-button>
+      </div>
+    </va-modal>
+  </div>
+</template>
+<script>
+// import { mapFields } from 'vuex-map-fields'
+import { mapActions, mapGetters } from 'vuex'
+import types from '@/store/modules/project/types'
+
+export default {
+  name: 'add-device-modal',
+  components: {
+  },
+  computed: {
+    optionDeviceVersion () {
+      return (this.optionDeviceVersionObj[this.device.product.value] !== undefined)
+        ? this.optionDeviceVersionObj[this.device.product.value]
+        : undefined
+    },
+
+    ...mapGetters('project', [
+      types.project.getSelect,
+      types.project.getDeviceShowName,
+    ]),
+
+    // ...mapFields('project', [
+    //   'deviceConnectList',
+    // ]),
+  },
+  data () {
+    return {
+      showModal: false,
+      showDisplayDevice: false,
+      key: '',
+      device: {},
+      deviceList: [],
+      deviceSelect: -1,
+    }
+  },
+  methods: {
+    show: function () {
+      this.showModal = true
+    },
+    hide: function () {
+      this.showModal = false
+    },
+    detect: function (device) {
+      if (device) this.$emit('detect', device)
+    },
+    selectDevice: function (device, index) {
+      this.deviceSelect = index
+    },
+    changeDevice: function () {
+      if (this.deviceList[this.deviceSelect]) {
+        this.device.pair = this.deviceList[this.deviceSelect].macAddress
+      }
+      this.hide()
+    },
+    removeDevice: function () {
+      this.deleteDeviceProject({ deviceKey: this.key })
+      this.hide()
+    },
+    getDeviceList: async function (device) {
+      const deviceList = await this.checkNotRegisterDeviceProject({ library: device.library })
+      const _device = { macAddress: device.pair, library: device.library }
+      if (device.pair !== null) {
+        this.deviceList = [_device, ...deviceList]
+      } else {
+        this.deviceList = [...deviceList]
+      }
+    },
+    initSetting: function (key, device) {
+      this.key = key
+      this.device = device
+      this.deviceList = []
+      this.deviceSelect = 0
+      this.getDeviceList(device)
+    },
+    ...mapActions('project',
+      [
+        types.project.addDevice,
+        types.project.findDevice,
+        types.project.setDevice,
+        types.project.deleteDevice,
+        types.project.checkNotRegisterDevice,
+        types.task.init,
+        types.task.create,
+        types.task.save,
+        types.task.delete,
+        types.task.select,
+      ],
+    ),
+  },
+  mounted () {
+  },
+}
+</script>
+<style lang="scss">
+  .device-list-focus {
+    background: #ebedff;
+    border: 1px solid #dbdcf0;
+    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
+    border-radius: 5px;
+  }
+
+</style>
@@ -1,13 +1,44 @@
 <template>
-  <div class="row">
-    <div class="flex d-flex">
-      <div v-for="(device, index) in getSelectProject.device" :key="index">
-        <va-button color="info" @click="showDeviceModal(device)" small>
-          <va-icon name="fa fa-close" @click.native.stop="deleteDevice(index)"></va-icon>
-          {{ device.name }} {{ device.connectDevice && device.connectDevice.device_address }}
-        </va-button>
+  <div class="flex d-flex sm12 xs12 md12 xl12 pa-0" style="align-items: center; margin-left: 1.1rem; margin-top: -12px;">
+    <!-- header -->
+    <div class="flex sm3 xs3 md3 xl1 px-0 project-device-header-text">
+      <p>Device</p>
+    </div>
+    <!-- create persudo devcie -->
+    <div class="flex d-flex" v-if="showLibrary === true">
+      <div class="flex d-flex pa-0 sm12 xs12 md6 xl3">
+        <div>
+          <button class="pair-button" @click="clickShowDevice('EDC')">
+            <span class="pair-button-text">EDC</span>
+          </button>
+        </div>
+        <div class="ml-2">
+          <button class="pair-button" @click="clickShowDevice('EIS')">
+            <span class="pair-button-text">EIS</span>
+          </button>
+        </div>
+        <div class="ml-2">
+          <button class="pair-button" @click="cancelSelectDevice()">
+            <span class="pair-button-text">X</span>
+          </button>
+        </div>
      </div>
    </div>
+    <!-- device list -->
+    <div class="flex d-flex" v-if="showDevice === false && showLibrary === false">
+      <draggable class="d-flex" :list="deviceListInOrder" :move="handleMove" @end="handleDragEnd">
+        <!-- devices -->
+        <div class="mr-2" v-for="(device, index) in deviceListInOrder" :key="index">
+          <button :class="device[1].pairStatus === 1 ? 'pair-button mr-2' : 'not-pair-button mr-2'" @click="showDeviceModal(device[0], device[1])">
+            <span class="pair-button-text">{{ getDeviceShowNameProject(device[0]) }}</span>
+          </button>
+        </div>
+        <!-- append device -->
+        <div v-if="deviceListInOrder.length < 4">
+          <button class="add-button" icon="fa fa-plus" @click="clickShowLibrary"><span class="add-button-text">+</span></button>
+        </div>
+      </draggable>
+    </div>
  </div>
 </template>

@@ -15,46 +46,167 @@
 import { mapFields } from 'vuex-map-fields'
 import { mapActions, mapGetters } from 'vuex'
 import types from '@/store/modules/project/types'
+import draggable from 'vuedraggable'

 export default {
  name: 'project-device',
  components: {
+    draggable,
  },
  computed: {
+    deviceListInOrder () {
+      return Object.entries(this.getSelectProject.device).sort((a, b) => a[1].order - b[1].order)
+    },
+
    ...mapGetters('project', [
      types.project.getSelect,
+      types.project.getDeviceShowName,
+      types.project.getDeviceMaxOrder,
    ]),

    ...mapFields('project', [
      'projectLibrary',
+      'projectSelectIndex',
    ]),
  },
  data () {
    return {
+      showDevice: false,
+      showLibrary: false,
+      notRegisterDevice: [],
+      index: -1,
+      futureIndex: -1,
    }
  },
  methods: {
-    showDeviceModal: function (device) {
-      this.$emit('showDeviceModal', device)
+    clickShowLibrary: async function () {
+      this.notRegisterDevice = await this.checkNotRegisterDeviceProject({})
+      if (this.notRegisterDevice.length === 0) {
+        this.showLibrary = true
+        return true
+      }
+      await this.createDeviceProject({
+        name: this.notRegisterDevice[0].name,
+        library: this.notRegisterDevice[0].library,
+        pair: this.notRegisterDevice[0].macAddress,
+        pairStatus: 1,
+        order: this.getDeviceMaxOrderProject,
+      })
+      return true
+    },
+    clickShowDevice: async function (library) {
+      this.showLibrary = false
+      await this.createDeviceProject({
+        name: library + '-' + String(Object.keys(this.getSelectProject.device).length + 1),
+        library: library,
+        pair: null,
+        pairStatus: 0,
+        order: this.getDeviceMaxOrderProject,
+      })
+      return false
+    },
+    cancelSelectDevice: function () {
+      this.showLibrary = false
+    },
+    showDeviceModal: function (key, device) {
+      this.$emit('showDeviceModal', key, device)
    },
    deleteDevice: function (deviceIndex) {
      this.deleteDeviceProject({ index: deviceIndex })
    },
+    handleMove (e) {
+      const { index, futureIndex } = e.draggedContext
+      this.index = index
+      this.futureIndex = futureIndex
+      return false // disable sort
+    },
+    handleDragEnd () {
+      const changeList = ['name', 'library', 'pair', 'pairStatus']
+      const deviceListTemp = JSON.parse(JSON.stringify(this.deviceListInOrder))
+      const keyOld = deviceListTemp[this.index][0]
+      const keyNew = deviceListTemp[this.futureIndex][0]
+      const deviceList = this.getSelectProject.device
+
+      for (const key of changeList) {
+        deviceList[keyOld][key] = deviceListTemp[this.futureIndex][1][key]
+        deviceList[keyNew][key] = deviceListTemp[this.index][1][key]
+      }
+    },
    ...mapActions('project',
      [
+        types.project.createDevice,
        types.project.deleteDevice,
+        types.project.checkNotRegisterDevice,
+        types.project.checkPairDeviceExist,
      ],
    ),
  },
  mounted () {
-    for (const device in this.getSelectProject.device) {
-      if (this.projectLibrary === null) {
-        this.projectLibrary = this.getSelectProject.device[device].library.value
-      }
-    }
+  },
+  watch: {
+    projectSelectIndex: {
+      immediate: true,
+      handler: async function (val) {
+        console.log('projectSelectIndex', val)
+        this.checkPairDeviceExistProject()
+      },
+    },
  },
 }
 </script>

 <style lang="scss">
+  .add-button {
+    width: 38px;
+    height: 36px;
+    background: #e0e0e0;
+    border: 2px dashed #b7b7b7;
+    border-radius: 20px;
+  }
+
+  .add-button-text {
+    color: white;
+    font-size: 20px;
+    font-weight: bold;
+  }
+
+  .pair-button {
+    width: 100%;
+    height: 36px;
+    background: #858dd6;
+    border: 0;
+    border-radius: 20px;
+  }
+
+  .not-pair-button {
+    width: 100%;
+    height: 36px;
+    background: #e0e0e0;
+    border: 0;
+    border-radius: 20px;
+  }
+
+  .pair-button-text {
+    font-family: 'Inter-Regular';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+    text-align: center;
+    color: #ffffff;
+  }
+
+  .project-device-header-text {
+    align-items: center;
+    // font-family: 'Inter-Regular';
+    // font-style: normal;
+    font-weight: 700;
+    font-size: 20px;
+    line-height: 29px;
+
+    /* identical to box height */
+    color: rgb(52, 73, 94);
+    // color: #768b9b;
+  }
+
 </style>
@@ -1,65 +1,118 @@
 <template>
-  <div class="markup-tables project-table flex d-flex sm12 xl12 md12 xs12" id="scro" style="height: 66vh; overflow: auto;">
-    <div class="table-wrapper">
-      <table class="va-table">
+  <div class="markup-tables project-table flex d-flex sm12 xl12 md12 xs12 px-0 mx-0" id="scro" style="width: 100%; height: 55vh; overflow: auto; padding-top: 0;">
+    <div class="table-wrapper" style="width: 100%;">
+      <table class="va-table project-table-text">
        <thead>
-          <tr>
-            <th v-if="lockMode === false">
-              <va-checkbox
-                v-model="tableColumn.checked"
-                :array-value="'-1'"
-                @input="selectAll($event)"
-              />
-            </th>
-            <th align="center">order</th>
-            <th align="center">name</th>
+          <tr class="project-table-header">
+            <th align="center" style="min-width: 50px;">order</th>
+            <th align="center" style="min-width: 100px;">name</th>
            <th align="center" @click="openConfig(1)">device</th>
-            <th align="center">action and condition</th>
-            <th align="center">parameter</th>
+            <th align="center" style="min-width: 100px;">start</th>
+            <th align="center" style="min-width: 100px;">stop</th>
+            <th align="center" style="min-width: 100px;">parameter</th>
            <th v-if="lockMode" align="center">cycle</th>
-            <th align="center"></th>
+            <th align="center" style="min-width: 50px;"></th>
          </tr>
        </thead>
        <!-- <tbody> -->
-        <vuedraggable class="draggable" v-model="getSelectProject.task" @start="() => {}" @end="() => {}" tag="tbody" animation="500">
+        <vuedraggable :disabled="lockMode === true || inputMode === true" class="draggable" :list="getSelectProject.task" @end="rearrangeTask({ project: getSelectProject })" tag="tbody" animation="500">
          <template class="item" v-for="(task, taskIndex) in getSelectProject.task">
-            <tr v-if="task.device && task.device.length === 0" :key="taskIndex" height="80px">
-              <td v-if="lockMode === false">
-                <va-checkbox
-                  v-model="tableColumn.checked"
-                  :array-value="String(taskIndex)"
-                />
-              </td>
+            <tr
+              v-if="task.type === 'cycle'"
+              :key="'empty' + taskIndex"
+              height="50px"
+              @click="showCycleModal(task.uuid)"
+            >
              <td align="center">
                {{ taskIndex + 1 }}
              </td>
-              <td align="center">
-                {{ task.name }}
+              <td align="center" @dblclick="switchInput('name', taskIndex)">
+                <div v-if="tableColumn.name == taskIndex && getCycleInfo(task.uuid, 'useID') === true && lockMode === true">
+                  <va-input
+                    v-model="inputSaved"
+                    style="width: 100px;"
+                    @blur="switchCycle('name', -1, getSelectProject, task)"
+                    @keyup.enter="switchCycle('name', -1, getSelectProject, task)"
+                  />
+                </div>
+                <div v-else>
+                  <div v-if="getCycleInfo(task.uuid, 'useID') === true">
+                    {{ getCycleInfo(task.uuid, 'id') }}
+                  </div>
+                  <div  v-if="getCycleInfo(task.uuid, 'useID') === false">
+                    {{ getCycleInfo(task.uuid, 'name') }}
+                  </div>
+                </div>
              </td>
-              <td align="center">
-                <va-button :flat="true" @click="openConfig(1, taskIndex)" small>Add Device</va-button>
+              <td align="center" v-if="getCycleLocation(task.uuid) === 'start'">
+                {{ getCycleInfo(task.uuid, 'max') }} Rounds
              </td>
-              <td align="center">
-                <va-button :flat="true" @click="openConfig(3, taskIndex)" small>+ New Action/Condition</va-button>
+              <td  v-if="lockMode === true && getCycleLocation(task.uuid) === 'start'">
+                {{ getCycleInfo(task.uuid, 'count') }} / {{ getCycleInfo(task.uuid, 'max') }}
              </td>
-              <td align="center">
-                <va-button :flat="true" @click="openConfig(4, taskIndex)" small>Add Parameter</va-button>
-              </td>
-              <td align="center">
-                <va-icon class="fa fa-close" @click.native="() => deleteTask({ index: taskIndex})"></va-icon>
+              <td  v-if="lockMode === true && Object.values(task.condition).findIndex(ele => ele.type == 'until_button_trigger') != -1 && task.status === 1">
+                <va-button  icon="fa fa-play" @click="trigger_button(getSelectProject)" flat></va-button>
+              <td/>
+              <td align="center" v-if="lockMode === true">
+                <fulfilling-bouncing-circle-spinner
+                  v-if="task.status === 1"
+                  :animation-duration="3000"
+                  :color="'#6c7fee'"
+                  :size="16"
+                ></fulfilling-bouncing-circle-spinner>
+                <!-- <va-icon v-if="task.status === 2" class="fa fa-check"></va-icon> -->
              </td>
            </tr>
-            <tr v-else v-for="(deviceUUID) in task.device" :key="taskIndex + deviceUUID" height="80px">
-              <td v-if="lockMode === false">
-                <va-checkbox
-                  v-model="tableColumn.checked"
-                  :array-value="String(taskIndex)"
-                />
-              </td>
+            <tr
+              v-else-if="task.device && task.device.length === 0"
+              :class="taskIndex === projectTableSelectIndex ? 'table-row-focus' : ''"
+              :key="'empty' + taskIndex" height="50px"
+              @click="() => { projectTableSelectIndex = taskIndex }"
+            >
              <td align="center">
-                {{  taskIndex + 1 }}
+                {{ taskIndex + 1 }}
              </td>
+              <!-- name -->
              <td align="center" @dblclick="switchInput('name', taskIndex)">
+                <div v-if="tableColumn.name == taskIndex && lockMode === false">
+                  <va-input
+                    v-model="task.name"
+                    style="width: 100px;"
+                    @blur="switchInput('name', -1)"
+                    @keyup.enter="switchInput('name', -1)"
+                  />
+                </div>
+                <div v-else align="center">
+                  {{ task.name }}
+                </div>
+              </td>
+              <td align="center">
+                <va-button :flat="true" @click="openConfig(1, taskIndex)" small>+</va-button>
+              </td>
+              <td align="center">
+                <va-button :flat="true" @click="openConfig(2, taskIndex)" :disabled="true" small>-</va-button>
+              </td>
+              <td align="center">
+                <va-button :flat="true" @click="openConfig(3, taskIndex)" :disabled="true" small>-</va-button>
+              </td>
+              <td align="center">
+                <va-button :flat="true" @click="openConfig(4, taskIndex)" :disabled="true" small>-</va-button>
+              </td>
+            </tr>
+            <tr
+              v-else
+              height="50px"
+              :class="taskIndex === projectTableSelectIndex ? 'table-row-focus' : ''"
+              v-for="(deviceUUID, index) in task.device"
+              :key="String(taskIndex) + ' ' + String(deviceUUID)"
+              @click="() => { projectTableSelectIndex = taskIndex }"
+            >
+              <!-- order -->
+              <td v-if="index === 0" :rowspan="task.device.length" align="center">
+                {{  taskIndex + 1 }}
+              </td>
+              <!-- name -->
+              <td v-if="index === 0" :rowspan="task.device.length" align="center" @dblclick="switchInput('name', taskIndex)">
                <div v-if="tableColumn.name == taskIndex && lockMode === false">
                  <va-input
                    v-model="task.name"
@@ -69,9 +122,6 @@
                  />
                </div>
                <div v-else>
-                  <!-- <vuedraggable class="draggable">
-                    {{ task.name }}
-                  </vuedraggable> -->
                  {{ task.name }}
                </div>
              </td>
@@ -79,68 +129,95 @@
              <td align="center">
                <div v-if="task.device && task.device.length === 0">
                  <va-button :flat="true" @click="openConfig(1, taskIndex, deviceUUID)" small>
-                    Add device
+                    + Device
                  </va-button>
                </div>
                <div v-else>
                  <va-button :flat="true" @click="openConfig(1, taskIndex, deviceUUID)" small>
-                    <span>{{ getDeviceProject(deviceUUID) && getDeviceProject(deviceUUID).name }}</span>
+                    <span>{{ getDeviceShowNameProject(deviceUUID)}}</span>
                  </va-button>
                </div>
              </td>
              <!-- device end -->
-              <!-- action -->
+              <!-- start -->
              <td align="center">
-                <div v-if="Object.keys(task.action).length === 0">
-                  <va-button :flat="true" @click="openConfig(3, taskIndex, deviceUUID)" small>
-                    Add event
-                  </va-button>
-                </div>
-                <div v-else class="flex">
+                <div class="flex">
+                  <div v-if="Object.values(task.action).filter(ele => ele.type === 'start').length === 0">
+                    +
+                  </div>
                  <div v-for="(action, actionKey) in task.action" :key="actionKey">
                    <div v-if="action.target === deviceUUID">
-                      <div v-for="conditionKey in action.condition" :key="conditionKey">
-                        <div small v-if="action.type !== 'cycle'">
-                          {{ action.type }} {{ task.condition[conditionKey].type }} {{ task.condition[conditionKey].value }}
-                          <va-icon class="fa fa-close" @click.native="delAction(task, actionKey, conditionKey)"/>
-                        </div>
-                        <div small v-else-if="task.condition[conditionKey].type === 'previous_task_done'">
-                          {{ action.type }} go to {{ task.cycle_next }} run {{ task.cycle }} times
-                          <va-icon class="fa fa-close" @click.native="delAction(task, actionKey, conditionKey)"/>
+                      <div v-if="action.condition.length === 0">
+                        +
+                      </div>
+                      <div v-else v-for="conditionKey in action.condition" :key="conditionKey">
+                        <div v-if="action.type == 'start' && task.condition[conditionKey].type === 'previous_task_done'">
+                          <div v-if=" taskIndex === 0"> - </div>
+                          <!-- {{ task.condition[conditionKey].type }} {{ task.condition[conditionKey].value }} -->
+                          <div v-else> Follow {{ getSelectProject.task[taskIndex - 1].name }} </div>
+                          <!-- <va-icon class="fa fa-close" @click.native="delAction(task, actionKey, conditionKey)"/> -->
                        </div>
                      </div>
                    </div>
                  </div>
-                  <va-button :flat="true" @click="openConfig(3, taskIndex, deviceUUID)" small>
-                    + New Action/Condition
-                  </va-button>
                </div>
              </td>
-              <!-- action end -->
-              <td align="center">
-                <div v-if="Object.keys(task.parameter_set).length === 0">
-                  <va-button :flat="true" @click="openConfig(4, taskIndex, deviceUUID)" small>
-                    Add Parameter
-                  </va-button>
-                </div>
-                <va-button :flat="true" @click="openConfig(4, taskIndex, deviceUUID)" v-else class="flex d-flex">
-                  <div class="flex" small>
-                    <div v-for="(parameterSet, parameterSetKey) in getParameterSetTask(taskIndex, deviceUUID)" :key="parameterSetKey">
-                      <div v-for="(parameter, parameterKey) in parameterSet" :key="parameterKey">
-                        <span v-if="parameterKey !== 'target'">
-                          <div small>
-                            {{ parameterName(parameterKey) }} : {{ parameterValue(parameterKey, parameter) }}
-                          </div>
-                        </span>
+              <!-- start end -->
+              <!-- stop -->
+              <td align="center" @click="openConfig(3, taskIndex, deviceUUID)">
+                <div class="flex">
+                  <div v-if="Object.values(task.action).filter(ele => ele.type === 'stop').length === 0">
+                    +
+                  </div>
+                  <div v-for="(action, actionKey) in task.action" :key="actionKey">
+                    <div v-if="action.target === deviceUUID">
+                      <div v-if="action.condition.length === 0">
+                        +
+                      </div>
+                      <div v-else v-for="conditionKey in action.condition" :key="conditionKey">
+                        <div v-if="action.type == 'stop' && task.condition[conditionKey].type === 'after_task_run'" >
+                          {{ transTime(task.condition[conditionKey].value) }}
+                          <va-icon class="fa fa-close" @click.native="delAction(task, actionKey, conditionKey)"/>
+                        </div>
                      </div>
                    </div>
                  </div>
-                </va-button>
+                </div>
+              </td>
+              <!-- stop end -->
+              <td align="center" @click="openConfig(4, taskIndex, deviceUUID)">
+                <div v-if="Object.keys(task.parameter_set).length === 0">
+                  <p>
+                    +
+                  </p>
+                </div>
+                <div v-else class="flex">
+                  <div v-for="(parameterSet, parameterSetKey) in getParameterSetTask(taskIndex, deviceUUID)" :key="parameterSetKey">
+                    <v-popover popoverBaseClass="project_popover_base" trigger="hover" >
+                      <div>
+                        {{ parameterName('MODE', deviceUUID) }} : {{ parameterValue('MODE', parameterSet.MODE, deviceUUID) }}
+                      </div>
+                      <template slot="popover">
+                        <div
+                          class="project_popover_inner pa-2"
+                          v-if="Object.keys(parameterSet).filter(ele=>ele !== 'MODE' && ele !== 'target').length > 0"
+                        >
+                          <div v-for="(parameter, parameterKey) in parameterSet" :key="parameterKey">
+                            <p v-if="parameterKey !== 'target' && parameterKey !== 'MODE'">
+                              {{ parameterName(parameterKey, deviceUUID) }} : {{ parameterValue(parameterKey, parameter, deviceUUID) }}
+                            </p>
+                          </div>
+                        </div>
+                      </template>
+                    </v-popover>
+                  </div>
+                </div>
              </td>
              <td align="center" v-if="lockMode === false">
-                <va-icon v-if="String(taskIndex) !== '0'" class="fa fa-toggle-up" @click.native="swapTask(taskIndex, 0)"/>
+                <!-- <va-icon v-if="String(taskIndex) !== '0'" class="fa fa-toggle-up" @click.native="swapTask(taskIndex, 0)"/>
                <va-icon v-if="parseInt(taskIndex) !== getSelectProject.task.length - 1" class="fa fa-toggle-down" @click.native="swapTask(taskIndex, 1)"/>
-                <va-icon class="fa fa-close" @click.native="() => deleteTask({ index: taskIndex})"></va-icon>
+                <va-icon class="fa fa-copy ml-1" @click.native="() => copyTask({ project: getSelectProject, index: taskIndex})"></va-icon> -->
+                <va-icon class="fa fa-close" color="#B8C3CC" @click.native="() => deleteTask({ project: getSelectProject, index: taskIndex})"></va-icon>
              </td>
              <td align="center" v-if="lockMode === true">
                <div v-if="task.cycle > 0 && task.status === 2 && task.cycle_count === 0">
@@ -150,6 +227,9 @@
                  {{ task.cycle_count }}/{{ task.cycle }}
                </div>
              </td>
+              <td  v-if="lockMode === true && Object.values(task.condition).findIndex(ele => ele.type == 'until_button_trigger') != -1 && task.status === 1">
+                <va-button  icon="fa fa-play" @click="trigger_button(getSelectProject)" flat></va-button>
+              <td/>
              <td align="center" v-if="lockMode === true">
                <!-- {{ task.status }} -->
                <fulfilling-bouncing-circle-spinner
@@ -163,9 +243,15 @@
            </tr>
          </template>
        </vuedraggable>
-      <!-- </tbody> -->
+        <!-- </tbody> -->
+        <tr class="table-row-add-task" v-if="lockMode === false">
+          <td align="center" colspan="7" class="table-row-add-task-text" @click="createTask">+ task</td>
+        </tr>
      </table>
    </div>
+    <div>
+      <cycle-modal ref="cycle_modal_ref"></cycle-modal>
+    </div>
  </div>
 </template>
 <script>
@@ -175,12 +261,15 @@ import types from '@/store/modules/project/types'
 import { FulfillingBouncingCircleSpinner } from 'epic-spinners'
 import configTable from '@/data/config-table/index'
 import vuedraggable from 'vuedraggable'
+import { taskInfo } from '@/data/task/TaskInfo'
+import CycleModal from '@/components/project/view/menu/components/CycleModal'

 export default {
  name: 'project-table',
  components: {
    FulfillingBouncingCircleSpinner,
    vuedraggable,
+    CycleModal,
  },
  computed: {
    config () {
@@ -190,6 +279,9 @@ export default {
    ...mapGetters('project', [
      types.project.getSelect,
      types.project.getDevice,
+      types.project.getCycle,
+      types.project.getDeviceLibrary,
+      types.project.getDeviceShowName,
      types.task.get,
      types.task.getCondition,
      types.task.getParameterSet,
@@ -201,6 +293,7 @@ export default {
      'deviceSelectKey',
      'lockMode',
      'projectLibrary',
+      'projectTableSelectIndex',
    ]),
  },
  data () {
@@ -209,29 +302,60 @@ export default {
        name: -1,
        checked: [],
      },
+      inputSaved: '',
+      index: -1,
+      futureIndex: -1,
+      inputMode: false,
    }
  },
  methods: {
+    transTime: function (sec) {
+      if (sec === undefined || sec === 'None') {
+        return '0 s'
+      }
+
+      let result = ''
+
+      if (sec < 1) {
+        result = '~ 1 s'
+      } else {
+        let seconds = parseInt(sec / 1)
+
+        if (seconds < 60) {
+          result = `${seconds} sec`
+        } else {
+          let minutes = parseInt(seconds / 60)
+          seconds %= 60
+          if (minutes < 60) {
+            if (seconds === 0) {
+              result = `${minutes} min`
+            } else {
+              result = `${minutes} m ${seconds} s`
+            }
+          } else {
+            const hours = parseInt(minutes / 60)
+            minutes %= 60
+            if (seconds === 0 && minutes === 0) {
+              result = `${hours} hour`
+            } else {
+              result = `${hours} h ${minutes} m ${seconds} s`
+            }
+          }
+        }
+      }
+      return result
+    },
+    mqttPub: function (topic, mes) {
+      this.$mqtt.publish(topic, mes)
+    },
    dragEnd: function (event) {
-      console.log('event', event)
-      console.log('from', event.oldDraggableIndex)
-      console.log('to', event.newDraggableIndex)
      const newTaskList = JSON.parse(JSON.stringify(this.getSelectProject.task))
-      console.log('this.getSelectProject.task', newTaskList, this.getSelectProject.task)
      const b = newTaskList[event.oldDraggableIndex]
      const a = newTaskList[event.newDraggableIndex]
-      console.log('a', a)
-      console.log('b', b)
-      console.log('b.device.length', b.device.length)
      if (b && b.device.length === 0) return
-      console.log('1')
-      // newTaskList.splice(event.newDraggableIndex, 1, this.getSelectProject.task[event.oldDraggableIndex])
      if (a === undefined) return
-      console.log('2')
-      // newTaskList.splice(event.oldDraggableIndex, 1, a)
      newTaskList.filter(ele => ele != null)
-      console.log('newTaskList', newTaskList)
-      // this.getSelectProject.task = newTaskList
+      this.rearrangeTask({ project: this.getSelectProject })
    },
    swapTask: function (taskIndex, upDown) {
      taskIndex = parseInt(taskIndex)
@@ -244,40 +368,53 @@ export default {
        this.getSelectProject.task.splice(taskIndex, 1, this.getSelectProject.task[taskIndex + 1])
        this.getSelectProject.task.splice(taskIndex + 1, 1, a)
      }
+      this.rearrangeTask({ project: this.getSelectProject })
    },
    delSelected: function () {
      for (const indexSelected of this.tableColumn.checked) {
-        this.deleteTask({ index: indexSelected })
+        this.deleteTask({ project: this.getSelectProject, index: indexSelected })
      }
    },
    delAction: function (task, actionKey, conditionKey) {
-      // console.log(action)
-      // console.log(conditionKey)
-      // console.log(action.condition[0])
-      // console.log(action.condition.length)
-      // for (let i = 0; i < action.condition.length; i++) {
-      //   if (String(action.condition[i]) === String(conditionKey)) {
-      //     delete action.condition[i]
-      //     break
-      //   }
-      // }
      const _action = JSON.parse(JSON.stringify(task.action))
      const _condition = JSON.parse(JSON.stringify(task.condition))
-      // console.log(Object.keys(_task.action))
+
      delete _action[actionKey]
      delete _condition[conditionKey]
-      // delete _task.action[actionKey]
-      // delete _task.condition[conditionKey]
-      // console.log(Object.keys(_task.action))
+
      task.action = _action
      task.condition = _condition
-      console.log('task', task)
-      // delete action.condition[0]
+    },
+    trigger_button: function (projectID) {
+      console.log('project', projectID)
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'set_project/0',
+        project: projectID.uuid,
+        content: 'test',
+      }))
    },
    switchInput: function (tag, index) {
-      this.tableColumn[tag] >= 0
-        ? this.tableColumn[tag] = -1
-        : this.tableColumn[tag] = index
+      if (this.tableColumn[tag] === -1) {
+        if (index !== -1) {
+          this.inputMode = true
+          this.tableColumn[tag] = index
+        }
+      } else {
+        this.inputMode = false
+        this.tableColumn[tag] = -1
+      }
+    },
+    switchCycle: function (tag, index, projectID, task) {
+      this.switchInput(tag, index)
+      const cycleInfo = this.getCycleProject(task.uuid) // 0: index, 1: location, 2: info
+      if (this.inputSaved === cycleInfo[2].id) return
+      cycleInfo[2].id = this.inputSaved
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'set_project_cycle/0',
+        project: projectID.uuid,
+        index: cycleInfo[0],
+        content: { id: this.inputSaved },
+      }))
    },
    selectAll: function (selectedArray) {
      const totalRange = [...Array(this.getSelectProject.task.length).keys()].map(idx => String(idx))
@@ -304,30 +441,63 @@ export default {
        }
      }
    },
-    parameterName (name) {
-      if (name === 'MODE') {
-        return 'Mode'
+    parameterName (name, deviceKey) {
+      const config = configTable.getConfig(this.getDeviceLibraryProject(deviceKey))
+      if (config !== undefined && Object.keys(config) !== 0) {
+        if (name === 'MODE') {
+          return 'Mode'
+        }
+        if (typeof config[name].showName === 'function') {
+          return config[name].showName()
+        }
+        return config[name].showName
      }
-      if (typeof this.config[name].showName === 'function') {
-        return this.config[name].showName()
-      }
-      return this.config[name].showName
    },
-    parameterValue (name, value) {
-      if (name === 'MODE') {
-        return this.config.MODE[value].name
+    parameterValue (name, value, deviceKey) {
+      const config = configTable.getConfig(this.getDeviceLibraryProject(deviceKey))
+      if (config !== undefined && Object.keys(config) !== 0) {
+        if (name === 'MODE') {
+          return config.MODE[value].name
+        }
+        if (config[name].type === 'number') {
+          const scale = config[name].unit[config[name].defaultUnit]
+          return `${config[name].outputReadabilityData(value, scale)} ${config[name].defaultUnit}`
+        } else if (config[name].type === 'array') {
+          return `${config[name].outputReadabilityData(value)}`
+        } else if (config[name].type === 'none') {
+          return ''
+        }
      }
-      if (this.config[name].type === 'number') {
-        const scale = this.config[name].unit[this.config[name].defaultUnit]
-        return `${this.config[name].outputReadabilityData(value, scale)} ${this.config[name].defaultUnit}`
-      } else if (this.config[name].type === 'array') {
-        return `${this.config[name].outputReadabilityData(value)}`
-      } else if (this.config[name].type === 'none') {
-        return ''
+    },
+    showCycleModal: function (uuid) {
+      if (!this.lockMode) {
+        this.$refs.cycle_modal_ref.show()
+        this.$refs.cycle_modal_ref.setCycleInfo(this.getSelectProject, uuid)
      }
    },
+
+    getCycleInfo: function (uuid, attribute) {
+      const cycleInfo = this.getCycleProject(uuid) // 0: index, 1: location, 2: info
+      if (cycleInfo.length === 0) return ''
+      return cycleInfo[2][attribute]
+    },
+
+    getCycleLocation: function (uuid) {
+      const cycleInfo = this.getCycleProject(uuid) // 0: index, 1: location, 2: info
+      return cycleInfo[1]
+    },
+
+    handleMove (e) {
+      const { index, futureIndex } = e.draggedContext
+      this.index = index
+      this.futureIndex = futureIndex
+      return false // disable sort
+    },
    ...mapActions('project', [
+      types.task.create,
+      types.task.copy,
      types.task.delete,
+      types.task.rearrange,
    ]),
  },
  mounted () {
@@ -341,15 +511,12 @@ export default {
    margin: auto;
  }

-  // .item {
-  //   height: 40px;
-  //   line-height: 40px;
-  //   margin-bottom: 20px;
-  //   background-color: skyblue;
-  //   text-align: center;
-  //   color: #ffffff;
-  //   cursor: move;
-  // }
+  .table-row-focus {
+    background: #ebedff;
+    // border: 0.5px solid #dbdcf0;
+    // box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
+    border-radius: 5px;
+  }

  .markup-tables {
    width: 100%;
@@ -367,13 +534,24 @@ export default {
      max-height: 100px;
      overflow: auto;
      white-space: nowrap;
-      font-size: 1.1rem;
+      // font-size: 1.1rem;
+      // border: 1px solid #ffffff;
+    }
+
+    td:hover {
+      // background: #ebedff;
+      opacity: 0.8;
+      // border: 1px solid #dbdcf0;
+      // box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
+      // border-radius: 5px;
+      cursor: pointer;
    }

    th {
-      padding: 0 0 0 0;
-      margin: 0;
+      // padding: 0 0 0;
+      // margin: 0;
      font-size: 1rem;
+      border: none;
    }

    div {
@@ -382,4 +560,57 @@ export default {
    }
  }

+  .project_popover_base {
+    top: 40px !important;
+    background-color: white;
+  }
+
+  .project_popover_inner {
+    width: auto;
+    height: auto;
+    font-size: 20px;
+    text-align: left;
+    box-shadow: rgba(108, 127, 238, 0.6) 0 2px 3px 0;
+    background-color: rgba(108, 127, 238, 0.2);
+  }
+
+  .table-row-add-task {
+    height: 50px;
+    background: #f4f4f4;
+    border: 1px dashed #c7c7c7;
+    border-radius: 5px;
+  }
+
+  .table-row-add-task-text {
+    font-family: 'Inter-Regular';
+    font-style: italic;
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 24px;
+    text-align: center;
+    color: #c7c7c7;
+  }
+
+  .project-table-header {
+    position: sticky;
+    top: 0;
+    font-family: 'Inter-Bold';
+    font-style: normal;
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 24px;
+    text-align: center;
+    color: #2c4053;
+  }
+
+  .project-table-text {
+    font-family: 'Inter-Regular';
+    font-style: normal;
+    // font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+    text-align: center;
+    color: #2c4053;
+  }
+
 </style>
@@ -143,13 +143,29 @@ export default {
      showDeviceSetting: true,
      chartAreaClass: ['flex', 'xs12', 'sm12', 'md12', 'xl8', 'pa-0'],
      getParmDone: false,
+      batteryInterval: {},
    }
  },
  mqtt: {
+    async '+/device_battery/+' (data, topic) {
+      const deviceBattery = JSON.parse(String.fromCharCode.apply(null, data)).data
+      const device = this.deviceListNew.find(ele => ele.memory_board === deviceBattery.device)
+      device.battery = deviceBattery.battery
+    },
    async '+/get_device_info_all/+' (data, topic) {
      // console.log('get_device_info_all', String.fromCharCode.apply(null, data))
      this.deviceListNew = JSON.parse(String.fromCharCode.apply(null, data)).data

+      // console.log(this.deviceListNew)
+
+      for (let i = 0; i < this.deviceListNew.length; i++) {
+        const curDevice = this.deviceListNew[i]
+        if ((curDevice.memory_board in this.batteryInterval) === false) {
+          this.batteryInterval[curDevice.memory_board] = setInterval(() => { this.getBattery(curDevice) }, 60000)
+        }
+      }
+      // console.log(this.batteryInterval)
+
      // console.log(this.deviceListNew)
      // await taskInfo.deviceInfo(String.fromCharCode.apply(null, data), this.deviceList)
      // console.log('this.deviceList 0', this.deviceList)
@@ -311,6 +327,12 @@ export default {
    },
  },
  methods: {
+    getBattery: function (device) {
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_battery/0',
+        device: device.memory_board,
+      }))
+    },
    mqttSub: function (val) {
      this.$mqtt.subscribe(val)
    },
@@ -328,6 +350,7 @@ export default {
      this.mqttSub(id + '/device_parameter/+')
      this.mqttSub(id + '/device_parameter_value/+')
      this.mqttSub(id + '/device_sd_card_status/+')
+      this.mqttSub('+/device_battery/+')
    },
    pageMqttUnSub: function (id) {
      for (const device in taskInfo.getTaskInfo().deviceList) {
@@ -340,6 +363,7 @@ export default {
      this.mqttUnSub(id + '/device_parameter/+')
      this.mqttUnSub(id + '/device_parameter_value/+')
      this.mqttUnSub(id + '/device_sd_card_status/+')
+      this.mqttUnSub('+/device_battery/+')
    },
    pageInit: async function () {
      if (await this.$refs.devices_ref != null) {
@@ -623,6 +647,7 @@ export default {
    }

    await taskInfo.updateTaskInfo(this.$route.params.taskID)
+    this.GLOBAL.refreshCache()
    this.pageMqttSub(taskInfo.getTaskInfo().controllerID)
    await this.pageInit()

@@ -647,6 +672,10 @@ export default {
    }
    clearInterval(this.dataRefreshTimer)
    this.pageMqttUnSub(taskInfo.getTaskInfo().controllerID)
+
+    for (var interval in this.batteryInterval) {
+      clearInterval(this.batteryInterval[interval])
+    }
  },

 }
@@ -30,14 +30,17 @@
      <div v-if="tabValue == 0" >
        <div v-if="chartData[chartID].legend.data.length != 0">
          <div class="row flex xl12 lg12 sm12 xs12 ma-0 pa-0">
-            <div class="flex xl1 lg1 sm0 xs0 ma-0 pa-0">
+            <!-- <div class="flex xl1 lg1 sm0 xs0 ma-0 pa-0"> -->
+            <div class="flex ma-0 pa-0">
            </div>
-            <div class="flex xl7 lg7 sm7 xs7 my-0 py-0">
+            <!-- <div class="flex xl7 lg7 sm7 xs7 ma-0 pa-0"> -->
+            <div class="flex ma-0 pa-0">
              <canvas-chart-real-time-display
                :chartID="chartID" ref="CanvasChartRealTimeDisplay"
              />
            </div>
-            <div class="flex xl4 lg4 sm5 xs5 my-0 py-0 mt-2">
+            <!-- <div class="flex xl4 lg4 sm4 xs4 ma-0 pa-0"> -->
+            <div class="flex ma-0 pa-0">
              <canvas-chart-real-time-calculation :chartID="chartID" @refreshData="refreshData" @switchModeButton="switchModeButton" @getClicked="getClicked" @captureChart="captureChart" ref="'cal_ref'" />
            </div>
          </div>
@@ -102,7 +105,7 @@
        </div>
      </div>
      <div v-else-if="tabValue == 1" :style="'width: '+ cardwidth + '; height: ' + cardheight + ';'" >
-        <canvas-chart-source :chartID="chartID" @addSource="addSource()" />
+        <canvas-chart-source :chartID="chartID" />
      </div>
      <div v-else :style="'width: '+ cardwidth + '; height: ' + cardheight + ';'" >
      </div>
@@ -114,55 +117,6 @@
          INVERSE SELECT
        </va-button>
      </div> -->
-      <div class="row flex align--left ma-0 pa-0 mt-2">
-        <va-input
-          v-if="chartData[chartID].chartXMode === 'time'"
-          class="mx-1"
-          @keyup.enter="timeIntervalChange(timeIntervalInput)"
-          @blur="timeIntervalChange(timeIntervalInput)"
-          v-model="timeIntervalInput"
-          :label="'time-grid'"
-        >
-          <p slot="append" style="margin-right: 0;" small>
-            ms
-          </p>
-        </va-input>
-        <va-input
-          v-if="chartData[chartID].chartXMode === 'value'"
-          class="mx-1"
-          @keyup.enter="xIntervalChange(xIntervalInput)"
-          @blur="xIntervalChange(xIntervalInput)"
-          v-model="xIntervalInput"
-          :label="'x-grid'"
-        >
-          <p slot="append" style="margin-right: 0;" small>
-            {{chartData[chartID].chartXUnit}}
-          </p>
-        </va-input>
-        <va-input
-          class="mx-1"
-          @keyup.enter="yIntervalChange(yIntervalInput)"
-          @blur="yIntervalChange(yIntervalInput)"
-          v-model="yIntervalInput"
-          :label="'y-grid'"
-        >
-          <p slot="append" style="margin-right: 0;" small>
-            {{chartData[chartID].chartYUnit}}
-          </p>
-        </va-input>
-        <va-input
-          v-if="chartData[chartID].chartDevice === 'neulive'"
-          class="mx-1"
-          @keyup.enter="threeAxisIntervalChange(threeAxisIntervalInput)"
-          @blur="threeAxisIntervalChange(threeAxisIntervalInput)"
-          v-model="threeAxisIntervalInput"
-          :label="'3axis-grid'"
-        >
-          <p slot="append" style="margin-right: 0;" small>
-            g
-          </p>
-        </va-input>
-      </div>
      <div class="row flex ma-0 pa-0" v-if="developerMode === true">
        <canvas-chart-filter :chartID="chartID" :filterIndex="0" />
        <canvas-chart-filter :chartID="chartID" :filterIndex="1" />
@@ -260,13 +214,15 @@ export default {
      this.calClicked = clicked
    },
    captureChart: function () {
+      // count same ID in chartData
+      const captureTimes = String(Object.keys(this.chartData).filter(ele => ele.includes(String(this.data.chartID))).length)
      const newData = Object.assign({}, this.data)
-      this.chartData[String(newData.chartID) + '-1'] = newData
-      this.chartData[String(newData.chartID) + '-1'].captured = true
-      this.chartData[String(newData.chartID) + '-1'].cardName = this.chartData[String(newData.chartID) + '-1'].cardName + ' - captured'
-      this.chartData[String(newData.chartID) + '-1'].chartID = String(newData.chartID) + '-1'
+      this.chartData[String(this.data.chartID) + '-' + captureTimes] = newData
+      this.chartData[String(this.data.chartID) + '-' + captureTimes].captured = true
+      this.chartData[String(this.data.chartID) + '-' + captureTimes].cardName += ' - captured -' + captureTimes
+      this.chartData[String(this.data.chartID) + '-' + captureTimes].createdBy = 'capture'
+      this.chartData[String(this.data.chartID) + '-' + captureTimes].chartID = String(this.data.chartID) + '-' + captureTimes
      this.taskContentChartPanelKey++
-      // console.log(this.chartData[String(newData.chartID) + '-1'])
    },
    updateZoom: function (e) {
      // console.log(e)
@@ -278,7 +234,7 @@ export default {
        this.dataZoomEnd = e.end
      }
    },
-    timeIntervalChange: function (val) {
+    timeIntervalChange: async function (val) {
      if (!isNaN(parseInt(val))) {
        this.chartData[this.chartID].xAxis.forEach(x => {
          if (x.type === 'time') {
@@ -293,6 +249,7 @@ export default {
          }
        })
      }
+      await this.taskContentChartSaveToCache({ controllerID: taskInfo.getTaskInfo().controllerID })
    },
    xIntervalChange: async function (val) {
      if (!isNaN(parseInt(val))) {
@@ -320,13 +277,13 @@ export default {
            } else {
              y.interval = val * 1000
            }
-            const maxList = []
-            const minList = []
            // TODO: follow this way to iterate the deviceID
-            y.seriesIndex.forEach(i => {
-              maxList.push(Math.max(...this.chartData[this.chartID].series[i].data.map(p => p[1])))
-              minList.push(Math.min(...this.chartData[this.chartID].series[i].data.map(p => p[1])))
-            })
+            // const maxList = []
+            // const minList = []
+            // y.seriesIndex.forEach(i => {
+            //   maxList.push(Math.max(...this.chartData[this.chartID].series[i].data.map(p => p[1])))
+            //   minList.push(Math.min(...this.chartData[this.chartID].series[i].data.map(p => p[1])))
+            // })
            // const max = Math.max(maxList)
            // const min = Math.min(minList)
            // const center = (max + min) / 2
@@ -337,12 +294,10 @@ export default {
          }
        })
      } else {
-        this.timeIntervalInput = 'auto'
+        this.yIntervalInput = 'auto'
        this.chartData[this.chartID].yAxis.forEach(y => {
          if (parseInt(y.channel) <= 255) {
-            // y.interval = null
-            // y.max = 'dataMax'
-            // y.min = 'dataMin'
+            y.interval = null
          }
        })
      }
@@ -445,7 +400,6 @@ export default {
      this.data.dataZoom[0].end = this.dataZoomEnd
      this.data.dataZoom[1].start = this.data.dataZoom[0].start
      this.data.dataZoom[1].end = this.data.dataZoom[0].end
-      // console.log(this.data.dataZoom)
      this.$refs.CanvasChartRealTimeDisplay.matchData(this.data)
    },
    switchModeButton: function (dataMode, gridIndex, channelIndex) {
@@ -1,6 +1,6 @@
 <template>
  <div>
-    <div class="xs12 sm12 lg12 xl12 mr-4" style="text-align: end;">
+    <div class="xs12 sm12 lg12 xl12" style="text-align: end;">
      <!-- <img v-if="!integralClicked && (mode_name==='Chronoamperometric' || mode_name==='I-T Graph' || mode_name==='I-V Curve')" src='@/assets/img/toolbox/integral.svg' @click="clickIntegral"> -->
      <va-button :flat="true" class="pa-0 ma-0 mr-2" v-if="xlogClicked && (mode_name==='Linear Sweep Voltammetry' || mode_name==='I-V Curve')" color="danger" @click="clickXLog" small>
        <!-- To Raw Mode -->
@@ -60,7 +60,7 @@
 import { mapFields } from 'vuex-map-fields'
 import { mapActions } from 'vuex'
 import taskTypes from '@/store/modules/task/content/types'
-import paramTable from '@/data/config-table/index'
+import configTable from '@/data/config-table/index'
 // import newTooltip from '@/factories/chart/tooltipFactory'
 import { getTimeFormatter } from '@/store/modules/task/content/actions/chartAct'
 import sgFilter from '@/data/SGFilter'
@@ -88,7 +88,6 @@ export default {
  data () {
    return {
      info: null,
-      paramTable: paramTable,
      rawData: null,
      mode_name: '',
      xName: '',
@@ -241,19 +240,23 @@ export default {
        const dataX = []
        const dataY = []
        const time = []
-        for (index = 0; index < dataLength; index++) {
+        const dsample = 1
+        const m = parseInt((this.sgFilterArgument.windowSize - 1) / 2)
+
+        for (index = 0; index < dataLength; index += dsample) {
          dataX.push(seriesData[index][0])
-          dataY.push(seriesData[index][1])
+          dataY.push(seriesData[index][1] * 1e-9)
          time.push(seriesData[index][2])
        }
+        // console.log(time[time.length - 1], time[0])
+        // console.log(dataX.length, time[time.length - 1] - time[0], dataX.length * 1e6 / (time[time.length - 1] - time[0]))
        // console.log('dataX', dataX)
        // console.log('dataY', dataY)
        // console.log('time', time)
-        const filteredData = sgFilter(dataY, this.sgFilterArgument.windowSize, this.sgFilterArgument.polynomial)
-        // console.log('filterdData', filteredData)
+        const filteredData = sgFilter(dataY, this.sgFilterArgument.windowSize, this.sgFilterArgument.polynomial, this.getSampleRate())

-        for (index = 0; index < dataLength; index++) {
-          _data.push([dataX[index], filteredData[index], time[index]])
+        for (index = 0; index < filteredData.length; index++) {
+          _data.push([dataX[index + m], filteredData[index], time[index + m]])
        }

        // for (index = 0; index < dataLength; index++) {
@@ -417,13 +420,27 @@ export default {
      var value = this.data.series[0].data[(this.data.series[0].data).length - 1][1]
      return this.yName + ': ' + value + ' ' + this.yUnit
    },
-
+    getSampleRate: function () {
+      try {
+        const deviceMappingID = this.chartData[this.chartID].mappingID
+        const device = this.deviceListNew.find(ele => ele.memory_board === deviceMappingID)
+        const deviceConfig = configTable.getConfig(deviceMappingID)
+        const voltStep = deviceConfig.VOLT_STEP.outputReadabilityData(device.configuration.VOLT_STEP)
+        const sampleRate = deviceConfig.SAMPLE_RATE.outputReadabilityData(device.configuration.SAMPLE_RATE)
+        return (1 / (voltStep / 1000)) * sampleRate
+      } catch (e) {
+        console.log('getSampleRateERROR', e)
+        return 1
+      }
+    },
    ...mapActions('taskContent', [
      taskTypes.chart.saveToCache,
    ]),
  },
  async mounted () {
    this.rawData = this.chartData[this.chartID]
+    // const test = [3.0, 12.9, 22.6, 32.10000000000001, 41.4, 50.5, 59.400000000000006, 68.1, 76.6, 84.9, 93.0, 100.9, 108.60000000000001, 116.1, 123.39999999999999, 130.5, 137.4, 144.10000000000002, 150.6, 156.9, 163.0, 168.9, 174.60000000000002, 180.10000000000002, 185.4, 190.5, 195.39999999999998, 200.1, 204.59999999999997, 208.90000000000003, 213.0, 216.89999999999998, 220.59999999999997, 224.09999999999997, 227.40000000000003, 230.5, 233.39999999999998, 236.1, 238.6, 240.90000000000003, 243.0, 244.9, 246.6, 248.10000000000002, 249.40000000000003, 250.5, 251.40000000000003, 252.09999999999997, 252.6, 252.9, 253.0, 252.90000000000003, 252.59999999999997, 252.10000000000002, 251.39999999999998, 250.5, 249.39999999999992, 248.09999999999997, 246.60000000000002, 244.89999999999998, 243.0, 240.89999999999992, 238.59999999999997, 236.10000000000002, 233.39999999999992, 230.5, 227.39999999999992, 224.10000000000002, 220.60000000000002, 216.89999999999992, 213.0, 208.89999999999986, 204.5999999999999, 200.10000000000002, 195.39999999999998, 190.5, 185.39999999999998, 180.0999999999999, 174.60000000000002, 168.89999999999998, 163.0, 156.89999999999998, 150.5999999999999, 144.10000000000002, 137.39999999999998, 130.5, 123.40000000000009, 116.10000000000002, 108.60000000000002, 100.89999999999986, 93.0, 84.90000000000009, 76.60000000000002, 68.10000000000002, 59.399999999999864, 50.5, 41.399999999999864, 32.09999999999991, 22.59999999999991, 12.899999999999977]
+    // console.log('sgFilter', sgFilter(test, 5, 2, 10))
    // console.log('x', this.rawData.xAxis.length)
    // if (this.mode_name === 'I-V Curve') {
    //   this.rawData.xAxis[0].boundaryGap = [0, '5%']
@@ -1,51 +1,88 @@
 <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">
+    <!-- Whole Real-time Display Tool here -->
+    <div v-for="(plot, plotIndex) in realTime" :key="plotIndex">
+      <div v-for="(curve, curveIndex) in plot" :key="plotIndex + '-' + curveIndex" class="row ma-0 pa-0">
        <!-- cycle -->
-        <div class="ma-1" style="width: 75px;"
-          v-show="data !== null && data.cycle > 0"
-        >
+        <div class="mt-1" style="width: 75px;" v-show="data !== null && data.cycle > 0">
          <va-input
            label="cycle no."
            v-model="data.cycle"
-            :options="grid.xUnitOption"
-            noClear
+            disabled
          />
        </div>
-        <!-- value (x-axis) -->
-        <div class="ma-1" style="width: 100px;">
-          <va-input
-            label="x-value"
-            disable="disable"
-            v-model="grid.xValue"
-          />
+        <!-- y-axis -->
+        <div class="d-flex flex-row mt-1 ml-1">
+          <!-- value (y-axis) -->
+          <div style="width: 75px;">
+            <va-input
+              label="y-axis"
+              v-model="curve.yValue"
+              disabled
+            />
+          </div>
+          <!-- unit (y-axis) -->
+          <div style="width: 75px;">
+            <va-select
+              v-model="curve.yUnit"
+              :options="curve.yUnitOption"
+              @input="changeUnit('y', plotIndex, curveIndex)"
+              noClear
+            />
+          </div>
        </div>
-        <!-- unit (x-axis) -->
-        <div class="ma-1" style="width: 75px;">
-          <va-select
-            label="x-unit"
-            v-model="grid.xUnit"
-            :options="grid.xUnitOption"
-            noClear
-          />
+        <!-- x-axis -->
+        <div class="d-flex flex-row mt-1 ml-1">
+          <!-- value (x-axis) -->
+          <div style="width: 75px;">
+            <va-input
+              label="x-axis"
+              v-model="curve.xValue"
+              disabled
+            />
+          </div>
+          <!-- unit (x-axis) -->
+          <div style="width: 75px;">
+            <va-select
+              v-model="curve.xUnit"
+              :options="curve.xUnitOption"
+              @input="changeUnit('x', plotIndex, curveIndex)"
+              noClear
+            />
+          </div>
        </div>
-        <!-- value (y-axis) -->
-        <div class="ma-1" style="width: 100px;">
-          <va-input
-            label="y-value"
-            disable="disable"
-            v-model="grid.yValue"
-          />
-        </div>
-        <!-- unit (y-axis) -->
-        <div class="ma-1" style="width: 75px;">
-          <va-select
-            label="y-unit"
-            v-model="grid.yUnit"
-            :options="grid.yUnitOption"
-            noClear
-          />
+        <!-- intervel -->
+        <div class="d-flex flex-row mt-1 ml-1">
+          <!-- interval (y-axis) -->
+          <div class="ml-1" style="width: 80px;">
+            <va-input
+              v-show="!curveIndex"
+              v-model="curve.yInterval"
+              label="y-grid"
+              @focus="$event.target.select()"
+              @keyup.enter="setInterval('y', plotIndex, curveIndex, curve.yInterval)"
+              @blur="setInterval('y', plotIndex, curveIndex, curve.yInterval)"
+            >
+              <p slot="append" style="margin-right: 0;" small>
+                {{ curve.yUnit }}
+              </p>
+            </va-input>
+          </div>
+          <!-- interval (x-axis) -->
+          <div class="ml-1" style="width: 80px;">
+            <va-input
+              v-show="!curveIndex"
+              v-model="curve.xInterval"
+              label="x-grid"
+              @focus="$event.target.select()"
+              @keyup.enter="setInterval('x', plotIndex, curveIndex, curve.xInterval)"
+              @blur="setInterval('x', plotIndex, curveIndex, curve.xInterval)"
+            >
+              <p slot="append" style="margin-right: 0;" small>
+                {{ curve.xUnit }}
+              </p>
+            </va-input>
+          </div>
        </div>
      </div>
    </div>
@@ -57,6 +94,9 @@ import { mapFields } from 'vuex-map-fields'
 import { chartRouter } from './CanvasChartTable'
 import configTable from '@/data/config-table/index.js'
 import newTooltip from '@/factories/chart/tooltipFactory'
+import { mapActions } from 'vuex'
+import { taskInfo } from '../../../../data/task/TaskInfo'
+import taskTypes from '@/store/modules/task/content/types'

 export default {
  name: 'CanvasChartRealTimeDisplay',
@@ -81,110 +121,121 @@ export default {
    }
  },
  methods: {
-    // for user to choose wanted unit
-    setUnit: function (gridIndex, channelIndex) {
+    // store the setting in cache
+    ...mapActions('taskContent', [
+      taskTypes.chart.saveToCache,
+    ]),
+    getDeviceMode: function () {
+      const device = this.deviceListNew.find(ele => String(ele.memory_board) === String(this.chartData[this.chartID].mappingID))
+      if (device === undefined) return
+      return device.configuration.MODE
+    },
+    // set a new display tool
+    setRealTime: function (plotIndex, curveIndex) {
      // construct realTime object, i.e., record the coressponding value and unit
      // the formate imitates the data.gridSource
      if (this.data !== undefined && this.data.gridSource !== undefined) {
-        const _xPhysicsQuantity = this.data.gridSource[gridIndex][channelIndex].name.split('_')[0].at(-1)
-        const _yPhysicsQuantity = this.data.gridSource[gridIndex][channelIndex].name.split('_')[1].at(-1)
+        let _xPhysicsQuantity = this.data.gridSource[plotIndex][curveIndex].name.split('_')[0].split('-').at(-1)
+        let _yPhysicsQuantity = this.data.gridSource[plotIndex][curveIndex].name.split('_')[1].split('-').at(-1)
+        // Potential
+        if (_xPhysicsQuantity === 'P') _xPhysicsQuantity = 'V'
+        if (_yPhysicsQuantity === 'P') _yPhysicsQuantity = 'V'
        const [_xAxis, _yAxis] = this.chartRouter.getChartTable(_xPhysicsQuantity, _yPhysicsQuantity)
        const _realTime = JSON.parse(JSON.stringify(this.realTime))
-        const _newChannel = {}
+        const _newCurve = {}
        // set name, sourceIndex in data.series
-        _newChannel.name = this.data.gridSource[gridIndex][channelIndex].name
-        _newChannel.seriesSource = this.data.series.findIndex((ele) => ele.name === _newChannel.name)
-
-        // add device mode condition
-        const device = this.deviceListNew.find(ele => String(ele.memory_board) === String(this.chartData[this.chartID].mappingID))
-        let mode = -1
-        if (device !== undefined) mode = device.configuration.MODE
-
+        _newCurve.name = this.data.gridSource[plotIndex][curveIndex].name
+        _newCurve.seriesSource = this.data.series.findIndex((ele) => ele.name === _newCurve.name)
        // set x-axis
-        _newChannel.xValue = 0
-        _newChannel.xUnit = (typeof _xAxis.default.defaultUnit === 'function') ? _xAxis.default.defaultUnit(mode) : _xAxis.default.defaultUnit
-        _newChannel.xScale = _xAxis.default.unit
-        _newChannel.xUnitOption = Object.keys(_xAxis.default.unit)
-        _newChannel.xName = _xAxis.default.name
+        _newCurve.xValue = 0
+        _newCurve.xUnit = (typeof _xAxis.default.defaultUnit === 'function') ? _xAxis.default.defaultUnit(this.getDeviceMode()) : _xAxis.default.defaultUnit
+        _newCurve.xScaleOption = _xAxis.default.unit
+        _newCurve.xUnitOption = Object.keys(_xAxis.default.unit)
+        _newCurve.xName = _xAxis.default.name
+        _newCurve.xInterval = 'auto'
+
        // set y-axis
-        _newChannel.yValue = 0
-        _newChannel.yUnit = (typeof _yAxis.default.defaultUnit === 'function') ? _yAxis.default.defaultUnit(mode) : _yAxis.default.defaultUnit
-        _newChannel.yScale = _yAxis.default.unit
-        _newChannel.yUnitOption = Object.keys(_yAxis.default.unit)
-        _newChannel.yName = _yAxis.default.name
+        _newCurve.yValue = 0
+        _newCurve.yUnit = (typeof _yAxis.default.defaultUnit === 'function') ? _yAxis.default.defaultUnit(this.getDeviceMode()) : _yAxis.default.defaultUnit
+        _newCurve.yScaleOption = _yAxis.default.unit
+        _newCurve.yUnitOption = Object.keys(_yAxis.default.unit)
+        _newCurve.yName = _yAxis.default.name
+        _newCurve.yInterval = 'auto'
+
        // set functional
-        _newChannel.functional = 'default'
+        _newCurve.functional = 'default'

        // padding
-        while (gridIndex >= _realTime.length) {
+        while (plotIndex >= _realTime.length) {
          _realTime.push([])
        }
-        while (channelIndex >= _realTime[gridIndex].length) {
-          _realTime[gridIndex].push({})
+        while (curveIndex >= _realTime[plotIndex].length) {
+          _realTime[plotIndex].push({})
        }

        // merge the additional part into original part
-        _realTime[gridIndex][channelIndex] = _newChannel
+        _realTime[plotIndex][curveIndex] = _newCurve
        this.realTime = _realTime
      }
    },
+    // set the interval size keyed by user
+    setInterval: async function (axis, plotIndex, curveIndex, val) {
+      if (!isNaN(val)) {
+        const scaleOption = this.realTime[plotIndex][curveIndex][axis + 'ScaleOption']
+        const unit = this.realTime[plotIndex][curveIndex][axis + 'Unit']
+        this.chartData[this.chartID][axis + 'Axis'][plotIndex].interval = val * scaleOption[unit]
+      } else {
+        this.chartData[this.chartID][axis + 'Axis'][plotIndex].interval = 'hi' // I know it looks weird, but this one is necessesary
+        this.chartData[this.chartID][axis + 'Axis'][plotIndex].interval = null
+        this.realTime[plotIndex][curveIndex][axis + 'Interval'] = 'auto'
+      }
+      await this.taskContentChartSaveToCache({ controllerID: taskInfo.getTaskInfo().controllerID })
+    },
    // 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++) {
+      for (let plotIndex = 0; plotIndex < this.realTime.length; plotIndex++) {
+        for (let curveIndex = 0; curveIndex < this.realTime[plotIndex].length; curveIndex++) {
          // 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)
+          if (this.realTime[plotIndex][curveIndex].seriesSource === -1) {
+            this.realTime[plotIndex][curveIndex].seriesSource = this.data.series.findIndex((ele) => ele.name === this.realTime[plotIndex][curveIndex].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].xScale[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].yScale[this.realTime[gridIndex][channelIndex].yUnit]).toFixed(3)
-          }
-        }
-      }
-    },
-    // match the number of real time display bar to data.gridSource
-    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)
-            }
+          if (this.data.series[this.realTime[plotIndex][curveIndex].seriesSource] !== undefined &&
+          this.data.series[this.realTime[plotIndex][curveIndex].seriesSource].data !== undefined &&
+          this.data.series[this.realTime[plotIndex][curveIndex].seriesSource].data.length > 0) {
+            this.realTime[plotIndex][curveIndex].xValue = (this.data.series[this.realTime[plotIndex][curveIndex].seriesSource].data.at(-1)[0] / this.realTime[plotIndex][curveIndex].xScaleOption[this.realTime[plotIndex][curveIndex].xUnit]).toFixed(3)
+            this.realTime[plotIndex][curveIndex].yValue = (this.data.series[this.realTime[plotIndex][curveIndex].seriesSource].data.at(-1)[1] / this.realTime[plotIndex][curveIndex].yScaleOption[this.realTime[plotIndex][curveIndex].yUnit]).toFixed(3)
          }
        }
      }
    },
    // match the formatter to current unit and functional
-    matchFormatter: 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].xScale[this.realTime[gridIndex][channelIndex].xUnit]
-            const _yScale = this.realTime[gridIndex][channelIndex].yScale[this.realTime[gridIndex][channelIndex].yUnit]
+    updateFormatter: function () {
+      for (let plotIndex = 0; plotIndex < this.realTime.length; plotIndex++) {
+        for (let curveIndex = 0; curveIndex < this.realTime[plotIndex].length; curveIndex++) {
+          if (curveIndex === 0) {
+            const _xUnit = this.realTime[plotIndex][curveIndex].xUnit
+            const _yUnit = this.realTime[plotIndex][curveIndex].yUnit
+            const _xScale = this.realTime[plotIndex][curveIndex].xScaleOption[this.realTime[plotIndex][curveIndex].xUnit]
+            const _yScale = this.realTime[plotIndex][curveIndex].yScaleOption[this.realTime[plotIndex][curveIndex].yUnit]

            // update xAxis.formatter
-            if (this.realTime[gridIndex][channelIndex].xName === 'Time') {
-              this.data.xAxis[gridIndex].axisLabel.formatter = this.timeFormatter
+            if (this.realTime[plotIndex][curveIndex].xName === 'Time') {
+              this.data.xAxis[plotIndex].axisLabel.formatter = this.timeFormatter
            } else {
-              this.data.xAxis[gridIndex].axisLabel.formatter = function (val) {
+              this.data.xAxis[plotIndex].axisLabel.formatter = function (val) {
                return parseFloat(val / _xScale).toFixed(3) + _xUnit
              }
            }
            // update yAxis.formatter
-            if (this.realTime[gridIndex][channelIndex].yName === 'Time') {
-              this.data.yAxis[gridIndex].axisLabel.formatter = this.timeFormatter
+            if (this.realTime[plotIndex][curveIndex].yName === 'Time') {
+              this.data.yAxis[plotIndex].axisLabel.formatter = this.timeFormatter
            } else {
-              this.data.yAxis[gridIndex].axisLabel.formatter = function (val) {
+              this.data.yAxis[plotIndex].axisLabel.formatter = function (val) {
                return parseFloat(val / _yScale).toFixed(3) + _yUnit
              }
            }
@@ -194,30 +245,52 @@ export default {
        }
      }
    },
+    changeUnit: function (axis, plotIndex, curveIndex) {
+      this.updateValue()
+      this.updateFormatter()
+      this.setInterval(axis, plotIndex, curveIndex, 'auto')
+    },
+    // match the number of real time display bar to data.gridSource
+    matchChart: function () {
+      for (let plotIndex = 0; plotIndex < this.data.gridSource.length; plotIndex++) {
+        if (this.data.gridSource[plotIndex] !== undefined) {
+          for (let curveIndex = 0; curveIndex < this.data.gridSource[plotIndex].length; curveIndex++) {
+            if (plotIndex >= this.realTime.length) {
+              this.setRealTime(plotIndex, curveIndex)
+            } else if (curveIndex >= this.realTime[plotIndex].length) {
+              this.setRealTime(plotIndex, curveIndex)
+            }
+          }
+        }
+      }
+    },
    // match the data to operated data in CanvasChart.vue
    matchData: function (canvasChartData) {
      this.data = canvasChartData
    },
    // match the functional to operated data in CanvasChart.vue
-    matchFunctional: function (newFunctional, gridIndex, channelIndex) {
-      if (this.realTime[gridIndex][channelIndex] === undefined) return
-      if (this.realTime[gridIndex][channelIndex].functional === newFunctional) return
-      const _currChannel = this.realTime[gridIndex][channelIndex]
-      const _xPhysicsQuantity = this.data.gridSource[gridIndex][channelIndex].name.split('_')[0].at(-1)
-      const _yPhysicsQuantity = this.data.gridSource[gridIndex][channelIndex].name.split('_')[1].at(-1)
+    matchFunctional: function (newFunctional, plotIndex, curveIndex) {
+      if (this.realTime[plotIndex][curveIndex] === undefined) return
+      if (this.realTime[plotIndex][curveIndex].functional === newFunctional) return
+      const _currCurve = this.realTime[plotIndex][curveIndex]
+      let _xPhysicsQuantity = this.data.gridSource[plotIndex][curveIndex].name.split('_')[0].split('-').at(-1)
+      let _yPhysicsQuantity = this.data.gridSource[plotIndex][curveIndex].name.split('_')[1].split('-').at(-1)
+      // Potential
+      if (_xPhysicsQuantity === 'P') _xPhysicsQuantity = 'V'
+      if (_yPhysicsQuantity === 'P') _yPhysicsQuantity = 'V'
      const [_xAxis, _yAxis] = this.chartRouter.getChartTable(_xPhysicsQuantity, _yPhysicsQuantity)

-      _currChannel.functional = newFunctional
+      _currCurve.functional = newFunctional
      // set x-axis
-      _currChannel.xUnit = _xAxis.default.defaultUnit
-      _currChannel.xScale = _xAxis.default.unit
-      _currChannel.xUnitOption = Object.keys(_xAxis.default.unit)
-      _currChannel.xName = _xAxis.default.name
+      _currCurve.xUnit = (typeof _xAxis.default.defaultUnit === 'function') ? _xAxis.default.defaultUnit(this.getDeviceMode()) : _xAxis.default.defaultUnit
+      _currCurve.xScaleOption = _xAxis.default.unit
+      _currCurve.xUnitOption = Object.keys(_xAxis.default.unit)
+      _currCurve.xName = _xAxis.default.name
      // set y-axis
-      _currChannel.yUnit = _yAxis[newFunctional].defaultUnit
-      _currChannel.yScale = _yAxis[newFunctional].unit
-      _currChannel.yUnitOption = Object.keys(_yAxis[newFunctional].unit)
-      _currChannel.yName = _yAxis[newFunctional].name
+      _currCurve.yUnit = (typeof _yAxis[newFunctional].defaultUnit === 'function') ? _yAxis[newFunctional].defaultUnit(this.getDeviceMode()) : _yAxis[newFunctional].defaultUnit
+      _currCurve.yScaleOption = _yAxis[newFunctional].unit
+      _currCurve.yUnitOption = Object.keys(_yAxis[newFunctional].unit)
+      _currCurve.yName = _yAxis[newFunctional].name
    },
    timeFormatter: function (val) {
      let label = ''
@@ -249,17 +322,16 @@ export default {
    this.data = this.chartData[this.chartID]
  },
  watch: {
-    data: {
+    'data.series': {
      handler: function () {
        this.updateValue()
-        this.matchChart()
      },
      deep: true,
    },
-    realTime: {
+    'data.gridSource': {
      handler: function () {
-        this.updateValue()
-        this.matchFormatter()
+        this.matchChart()
+        this.updateFormatter()
      },
      deep: true,
    },
@@ -90,6 +90,7 @@ import { taskInfo } from '../../../../data/task/TaskInfo'
 import { mapFields } from 'vuex-map-fields'
 import { mapActions } from 'vuex'
 import taskTypes from '@/store/modules/task/content/types'
+import configTable from '../../../../data/config-table'

 export default {
  name: 'canvas-chart-source',
@@ -140,7 +141,8 @@ export default {
    deviceSelectX: function () {
      const channelOptions = []
      const deviceInfo = this.deviceListNew.find(ele => ele.id === this.deviceSelectX.id)
-      // console.log(val)
+      // console.log('deviceInfo', deviceInfo.library_name, deviceInfo.configuration.MODE)
+      // console.log('sourceObj', Object.keys(sourceObj))
      if (deviceInfo == null) {
        this.channelSelectDisableX = true
      } else if (deviceInfo.library_name.includes('Neulive')) {
@@ -182,11 +184,19 @@ export default {
        })
        this.channelSelectDisableX = false
      } else if (deviceInfo.library_name.includes('Elite')) {
+        const sourceObj = configTable.getChannelConfig(String(deviceInfo.library_name), deviceInfo.configuration.MODE) // [{id:0 channel:'Current'}, {id:1, channel:'Voltage'}, ]
        let channelSet
-        if (deviceInfo.library_name.includes('EIS') && deviceInfo.configuration.MODE === 0) {
+        if (deviceInfo.library_name.includes('EIS') && (deviceInfo.configuration.MODE === 0 || deviceInfo.configuration.MODE === 5)) {
          channelSet = ['Zimag_Raw', 'Zreal_Raw', 'Frequency', 'Cycle', 'Zimag', 'Zreal', 'Impedance', 'Phase', 'Current', 'Level gain']
        } else {
-          channelSet = deviceInfo.configuration.CHANNEL_LABEL
+          channelSet = []
+          const keys = Object.keys(sourceObj)
+          for (let i = 0; i < keys.length; i++) {
+            const item = keys[i]
+            if (sourceObj[item].name !== 'Time' && sourceObj[item].name !== 'Cycle number') {
+              channelSet.push(String(sourceObj[item].name))
+            }
+          }
        }
        // console.log(channelSet)
        channelSet.forEach((element, index) => {
@@ -250,11 +260,19 @@ export default {
        })
        this.channelSelectDisableY = false
      } else if (deviceInfo.library_name.indexOf('Elite') >= 0) {
+        const sourceObj = configTable.getChannelConfig(String(deviceInfo.library_name), deviceInfo.configuration.MODE) // [{id:0 channel:'Current'}, {id:1, channel:'Voltage'}, ]
        let channelSet
-        if (deviceInfo.library_name.includes('EIS') && deviceInfo.configuration.MODE === 0) {
+        if (deviceInfo.library_name.includes('EIS') && (deviceInfo.configuration.MODE === 0 || deviceInfo.configuration.MODE === 5)) {
          channelSet = ['Zimag_Raw', 'Zreal_Raw', 'Frequency', 'Cycle', 'Zimag', 'Zreal', 'Impedance', 'Phase', 'Current', 'Level gain']
        } else {
-          channelSet = deviceInfo.configuration.CHANNEL_LABEL
+          channelSet = []
+          const keys = Object.keys(sourceObj)
+          for (let i = 0; i < keys.length; i++) {
+            const item = keys[i]
+            if (sourceObj[item].name !== 'Time' && sourceObj[item].name !== 'Cycle number') {
+              channelSet.push(String(sourceObj[item].name))
+            }
+          }
        }
        //  console.log(channelSet)
        channelSet.forEach((element, index) => {
@@ -329,7 +347,6 @@ export default {
      } else if (this.deviceSelectY.name.indexOf('Time') >= 0) {
        deviceNameY = 'Time'
      }
-
      this.taskContentChartRegister({
        chartID: this.chartID,
        gridIndex: gridIndex,
@@ -57,20 +57,20 @@ const chartTable = {
          mA: 1e6,
          A: 1e9,
        },
-        defaultUnit: (Mode) => { return (Mode === 10) ? 'nA' : 'mA' },
+        defaultUnit: (Mode) => { return (Mode === 10 || Mode === 11) ? 'nA' : 'mA' },
        downloadUnit: 'mA',
      },
      // Q = ∫ I dt
      integral: {
        name: 'Charge',
        unit: {
-          nC: 1e6,
-          uC: 1e9,
-          mC: 1e12,
-          C: 1e15,
+          nAh: 3600 * 1e6,
+          uAh: 1600 * 1e9,
+          mAh: 3600 * 1e12,
+          Ah: 3600 * 1e15,
        },
-        defaultUnit: 'mC',
-        downloadUnit: 'mC',
+        defaultUnit: 'mAh',
+        downloadUnit: 'mAh',
      },
    },
  ],
@@ -105,6 +105,137 @@ const chartTable = {
      },
    },
  ],
+  T_Impedance: [
+    // 0
+    {
+      default: {
+        name: 'Time',
+        unit: {
+          us: 1,
+          ms: 1e3,
+          s: 1e6,
+          min: 60 * 1e6,
+          hour: 60 * 60 * 1e6,
+        },
+        defaultUnit: 's',
+        downloadUnit: 'ms',
+      },
+    },
+    // 1
+    {
+      default: {
+        name: 'Resistance',
+        unit: {
+          mΩ: 1,
+          Ω: 1e3,
+          kΩ: 1e6,
+          MΩ: 1e9,
+        },
+        defaultUnit: 'Ω',
+        downloadUnit: 'Ω',
+      },
+    },
+  ],
+  T_Phase: [
+    // 0
+    {
+      default: {
+        name: 'Time',
+        unit: {
+          us: 1,
+          ms: 1e3,
+          s: 1e6,
+          min: 60 * 1e6,
+          hour: 60 * 60 * 1e6,
+        },
+        defaultUnit: 's',
+        downloadUnit: 'ms',
+      },
+    },
+    // 1
+    {
+      default: {
+        name: 'degree',
+        unit: {
+          '°': 1,
+        },
+        defaultUnit: '°',
+        downloadUnit: '°',
+      },
+    },
+  ],
+  T_Current: [
+    // 0
+    // 0
+    {
+      default: {
+        name: 'Time',
+        unit: {
+          us: 1,
+          ms: 1e3,
+          s: 1e6,
+          min: 60 * 1e6,
+          hour: 60 * 60 * 1e6,
+        },
+        defaultUnit: 's',
+        downloadUnit: 'ms',
+      },
+    },
+    // 1
+    {
+      default: {
+        name: 'Current',
+        unit: {
+          nA: 1,
+          uA: 1e3,
+          mA: 1e6,
+          A: 1e9,
+        },
+        defaultUnit: (Mode) => { return (Mode === 10 || Mode === 11) ? 'nA' : 'mA' },
+        downloadUnit: 'mA',
+      },
+      // Q = ∫ I dt
+      integral: {
+        name: 'Charge',
+        unit: {
+          nAh: 3600 * 1e6,
+          uAh: 1600 * 1e9,
+          mAh: 3600 * 1e12,
+          Ah: 3600 * 1e15,
+        },
+        defaultUnit: 'mAh',
+        downloadUnit: 'mAh',
+      },
+    },
+  ],
+  V_V: [
+    // 0
+    {
+      default: {
+        name: 'Voltage',
+        unit: {
+          uV: 1,
+          mV: 1e3,
+          V: 1e6,
+        },
+        defaultUnit: 'mV',
+        downloadUnit: 'mV',
+      },
+    },
+    // 1
+    {
+      default: {
+        name: 'Voltage',
+        unit: {
+          uV: 1,
+          mV: 1e3,
+          V: 1e6,
+        },
+        defaultUnit: 'mV',
+        downloadUnit: 'mV',
+      },
+    },
+  ],
  V_I: [
    // 0
    {
@@ -152,19 +283,18 @@ const chartTable = {
          mA: 1e6,
          A: 1e9,
        },
-        defaultUnit: (Mode) => { return (Mode === 10) ? 'nA' : 'mA' },
+        defaultUnit: (Mode) => { return (Mode === 10 || Mode === 11) ? 'nA' : 'mA' },
        downloadUnit: 'mA',
      },
      // Gm = dI/dV
      differential: {
        name: 'Transconductance',
        unit: {
-          'mA/V': 1,
-          'A/V': 1e3,
-          'kA/V': 1e6,
+          'mA/mV': 1e-3,
+          'A/mV': 1,
        },
-        defaultUnit: 'A/V',
-        downloadUnit: 'A/V',
+        defaultUnit: 'mA/mV',
+        downloadUnit: 'A',
      },
      // Power = ∫ I dv
      integral: {
@@ -179,6 +309,94 @@ const chartTable = {
      },
    },
  ],
+  V_R: [
+    // 0
+    {
+      default: {
+        name: 'Voltage',
+        unit: {
+          uV: 1,
+          mV: 1e3,
+          V: 1e6,
+        },
+        defaultUnit: 'mV',
+        downloadUnit: 'mV',
+      },
+    },
+    // 1
+    {
+      default: {
+        name: 'Resistance',
+        unit: {
+          mΩ: 1,
+          Ω: 1e3,
+          kΩ: 1e6,
+          MΩ: 1e9,
+        },
+        defaultUnit: 'Ω',
+        downloadUnit: 'Ω',
+      },
+    },
+  ],
+  I_R: [
+    // 0
+    {
+      default: {
+        name: 'Voltage',
+        unit: {
+          uV: 1,
+          mV: 1e3,
+          V: 1e6,
+        },
+        defaultUnit: 'mV',
+        downloadUnit: 'mV',
+      },
+    },
+    // 1
+    {
+      default: {
+        name: 'Current',
+        unit: {
+          nA: 1,
+          uA: 1e3,
+          mA: 1e6,
+          A: 1e9,
+        },
+        defaultUnit: (Mode) => { return (Mode === 10) ? 'nA' : 'mA' },
+        downloadUnit: 'mA',
+      },
+    },
+  ],
+  ZReal_ZImag: [
+    // 0
+    {
+      default: {
+        name: 'Z_real',
+        unit: {
+          mΩ: 1e-3,
+          Ω: 1,
+          kΩ: 1e3,
+          MΩ: 1e6,
+        },
+        downloadUnit: 'Ω',
+        defaultUnit: 'Ω',
+      },
+    },
+    // 1
+    {
+      default: {
+        name: 'Z_imag',
+        unit: {
+          mΩ: 1e-3,
+          Ω: 1,
+          kΩ: 1e3,
+          MΩ: 1e6,
+        },
+        downloadUnit: 'Ω',
+        defaultUnit: 'Ω',
+      },
+    },
+  ],
 }
 export const chartRouter = {
  getChartTable: (xAxis, yAxis) => {
@@ -19,11 +19,30 @@
                <img :src="device.picture" :alt="device.name">
              </va-avatar>
            </va-item-section>
-
            <va-item-section class="ml-3" caption>
-              <va-item-label>
+              <!-- <va-button @click="getBattery(device)"> get battery </va-button> -->
+              <!-- <pre> {{ device.battery }} </pre> -->
+              <va-item-label v-if="device.library_name.includes('EIS')">
                {{ `[${device.memory_board}]` }} {{ device.name }}
              </va-item-label>
+              <va-item-label v-else-if="parseInt((device.battery - 2900) / 10) >= 75">
+                {{ `[${device.memory_board}]` }} {{ device.name }} <va-icon class="ml-3 fa fa-battery-full" color="#5BC236"/> {{ (parseInt((device.battery - 2900) / 10) > 100 ? 100 : parseInt((device.battery - 2900) / 10)) + '%' }}
+              </va-item-label>
+              <va-item-label v-else-if="parseInt((device.battery - 2900) / 10) >= 50">
+                {{ `[${device.memory_board}]` }} {{ device.name }} <va-icon class="ml-3 fa fa-battery-three-quarters" color="#5BC236"/> {{ parseInt((device.battery - 2900) / 10) + '%' }}
+              </va-item-label>
+              <va-item-label v-else-if="parseInt((device.battery - 2900) / 10) >= 25">
+                {{ `[${device.memory_board}]` }} {{ device.name }} <va-icon class="ml-3 fa fa-battery-half" color="#F6B431"/> {{ parseInt((device.battery - 2900) / 10) + '%' }}
+              </va-item-label>
+              <va-item-label v-else-if="parseInt((device.battery - 2900) / 10) > 10">
+                {{ `[${device.memory_board}]` }} {{ device.name }} <va-icon class="ml-3 fa fa-battery-quarter" color="#DA244B"/> {{ parseInt((device.battery - 2900) / 10) + '%' }}
+              </va-item-label>
+              <va-item-label v-else>
+                {{ `[${device.memory_board}]` }} {{ device.name }} <va-icon class="ml-3 fa fa-battery-empty" color="#DA244B"/> <span style="color: red;"> low battery </span>
+              </va-item-label>
+              <!-- <va-item-label v-else>
+                {{ `[${device.memory_board}]` }} {{ device.name }} <va-icon class="ml-3 fa fa-battery-empty" color="#DA244B"/> {{ '0%' }}
+              </va-item-label> -->
              <va-item-label caption>
                {{ device.mac_address.toUpperCase() }}
              </va-item-label>
@@ -16,7 +16,7 @@
            />
          </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-button v-if="place != 'scheduler'" class="pa-0 ma-0 mt-2 circle-button" small color="dark" @click="showModal=true">
              <va-icon
                name="fa fa-info"
                color="white"
@@ -27,7 +27,7 @@
      </div>
      <!-- split because of styling problem(treenode), combine together furture -->
      <!-- EIS -->
-      <div v-if="library.includes('EIS')">
+      <div v-if="library && library.includes('EIS')">
        <component
          v-for="name in parameterArrayInMode"
          :key="name"
@@ -44,7 +44,7 @@
        />
      </div>
      <!-- ZM15-PulseSensingMode -->
-      <div v-else-if="parameter.MODE === 14">
+      <div v-else-if="library && library.includes('EDC') && parameter.MODE === 14">
        <EliteParameterRecordingElitePulseSensing
          :parameter="parameter"
          :device="device"
@@ -55,7 +55,7 @@
        />
      </div>
      <!-- ZM15-DPVMode -->
-      <div v-else-if="parameter.MODE === 15">
+      <div v-else-if="library && library.includes('EDC') && parameter.MODE === 15">
        <EliteParameterRecordingEliteDPV
          :parameter="parameter"
          :device="device"
@@ -66,7 +66,7 @@
        />
      </div>
      <!-- ZM15-OtherModes -->
-      <div v-else>
+      <div v-else-if="library && library.includes('EDC')">
        <va-tree-category
          v-for="name in parameterArrayInMode"
          :key="name"
@@ -81,6 +81,7 @@
              :parameterName="name"
              :inputValue="parameter[name]"
              :disable="name === 'CTRL_HIGH_Z_15' && device && device.status === 0"
+              :syncParameter="parameterTable[name].syncParameter"
              v-bind="parameterTable[name]"
              @parameterChange="parameterChange"
              @getParameter="getParameter"
@@ -93,7 +94,7 @@
    <!-- guide picture button -->
    <div>
      <vue-final-modal
-        v-if="library.includes('Elite_EDC')"
+        v-if="library && library.includes('EDC')"
        v-model="showModal"
        classes="modal-container"
        content-class="modal-content"
@@ -147,7 +148,8 @@ export default {
      required: true,
    },
    library: {
-      type: String,
+      type: [String, null],
+      default: null,
    },
    serialNumber: {
      type: [String, Array],
@@ -156,6 +158,10 @@ export default {
      type: Object,
      default: null,
    },
+    place: {
+      type: String,
+      default: '',
+    },
  },
  computed: {
    parameterTable () {
@@ -174,7 +180,7 @@ export default {
      return null
    },
    parameterArrayInMode () {
-      return this.workingModeSelect && this.parameterTable.MODE[this.workingModeSelect.id].parameter
+      return this.workingModeSelect && this.parameterTable && this.parameterTable.MODE[this.workingModeSelect.id].parameter
    },
    modeSelection () {
      if (this.parameter.MODE) {
@@ -183,7 +189,7 @@ export default {
      return this.workingModeSelect.id
    },
    getImageUrl () {
-      if (this.workingModeSelect === null) {
+      if (!this.workingModeSelect) {
        return 'IV-Wire'
      } else {
        return this.workingModeSelect.img_src
@@ -221,6 +227,7 @@ export default {
    parameterValue (name) {
      const value = this.parameter[name]
      if (this.parameterTable[name].type === 'number') {
+        if (this.parameterTable[name].defaultUnit === undefined) return ''
        const scale = this.parameterTable[name].unit[this.parameterTable[name].defaultUnit]
        return ` ( ${this.parameterTable[name].outputReadabilityData(value, scale)} ${this.parameterTable[name].defaultUnit} )`
      } else if (this.parameterTable[name].type === 'array') {
@@ -241,18 +248,26 @@ export default {
    refresh () {
    },
    workingModeSelectChange (val) {
+      if (val === undefined) return
      this.workingModeSelect = val
-      console.log('workingModeSelectChange', this.workingModeSelect.id, this.parameter.MODE)
+      // console.log('workingModeSelectChange', this.workingModeSelect, 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)
+        if (this.deviceStatus === true) {
+          if (this.workingModeSelect.highz !== undefined) {
+            this.parameterChange('CTRL_HIGH_Z_15', this.workingModeSelect.highz)
+          }
        }
      }
    },
+    resetWorkingMode () {
+      this.workingModeOptions = this.parameterTable.MODE_OPTIONS
+      this.workingModeSelect = (this.parameter.MODE !== undefined) ? this.workingModeOptions.find(ele => ele.id === this.parameter.MODE) : this.workingModeOptions[0]
+      console.log(this.workingModeOptions, this.workingModeSelect)
+    },
    getParameter: function (name) {
      this.$emit('getParameter', name)
    },
@@ -265,11 +280,26 @@ export default {
    // this.developerMode === true
    //   ? this.workingModeOptions = this.workingModeDevOptions
    //   : this.workingModeOptions = this.workingModeNoDevOptions
-    this.workingModeOptions = this.parameterTable.MODE_OPTIONS
-    // init mode
-    this.workingModeSelect = (this.parameter.MODE !== undefined) ? this.workingModeOptions.find(ele => ele.id === this.parameter.MODE) : this.workingModeOptions[0]
+    if (this.parameterTable !== null) {
+      this.workingModeOptions = this.parameterTable.MODE_OPTIONS
+      // init mode
+      this.workingModeSelect = (this.parameter.MODE !== undefined) ? this.workingModeOptions.find(ele => ele.id === this.parameter.MODE) : this.workingModeOptions[0]
+    }
  },
  watch: {
+    parameter: {
+      deep: true,
+      handler: function () {
+        // refresh real time parameter
+        this.workingModeSelect = (this.parameter.MODE !== undefined) ? this.workingModeOptions.find(ele => ele.id === this.parameter.MODE) : this.workingModeOptions[0]
+      },
+    },
+    library: {
+      handler: function () {
+        this.workingModeOptions = this.parameterTable.MODE_OPTIONS
+        this.workingModeSelect = (this.parameter.MODE !== undefined) ? this.workingModeOptions.find(ele => ele.id === this.parameter.MODE) : this.workingModeOptions[0]
+      },
+    },
  },
  destroyed () {
  },
@@ -12,14 +12,14 @@
    </div>
    <!-- EIS -->
    <div v-if="workingModeSelect != null && workingModeSelect.id == 0">
-      <d-c-volt :ref="'DCVolt'" :deviceID="deviceID" :parameterName="'DC_BIAS'" @parameterChange="deviceParameterChange($event)" />
-      <a-c-amplitude :ref="'ACAmplitude'" :deviceID="deviceID" :parameterName="'AC_AMP'" @parameterChange="deviceParameterChange($event)" />
-      <freq-range :ref="'FreqRange'" :deviceID="deviceID" :parameterName="'FREQ'" @parameterChange="deviceParameterChange($event)" />
-      <points-per-decades :ref="'PointsPerDecades'" :deviceID="deviceID" :parameterName="'PPD'" @parameterChange="deviceParameterChange($event)" />
-      <point-spacing :ref="'PointSpacing'" :deviceID="deviceID" :parameterName="'SCALE'" @parameterChange="deviceParameterChange($event)" />
-      <delay :ref="'Delay'" :deviceID="deviceID" :parameterName="'DELAY'" @parameterChange="deviceParameterChange($event)" />
-      <average :ref="'Average'" :deviceID="deviceID" :parameterName="'AVERAGE_NUM'" @parameterChange="deviceParameterChange($event)" />
-      <current-range :ref="'CurrentRange'" :deviceID="deviceID" :parameterName="'RTIA'" @parameterChange="deviceParameterChange($event)" />
+      <d-c-volt :ref="'DCVolt'" :deviceID="deviceID" :parameterName="'EIS_DC_BIAS'" @parameterChange="deviceParameterChange($event)" />
+      <a-c-amplitude :ref="'ACAmplitude'" :deviceID="deviceID" :parameterName="'EIS_AC_AMP'" @parameterChange="deviceParameterChange($event)" />
+      <freq-range :ref="'FreqRange'" :deviceID="deviceID" :parameterName="'EIS_FREQ'" @parameterChange="deviceParameterChange($event)" />
+      <points-per-decades :ref="'PointsPerDecades'" :deviceID="deviceID" :parameterName="'EIS_PPD'" @parameterChange="deviceParameterChange($event)" />
+      <point-spacing :ref="'PointSpacing'" :deviceID="deviceID" :parameterName="'EIS_SCALE'" @parameterChange="deviceParameterChange($event)" />
+      <delay :ref="'Delay'" :deviceID="deviceID" :parameterName="'EIS_DELAY'" @parameterChange="deviceParameterChange($event)" />
+      <average :ref="'Average'" :deviceID="deviceID" :parameterName="'EIS_AVERAGE_NUM'" @parameterChange="deviceParameterChange($event)" />
+      <current-range :ref="'CurrentRange'" :deviceID="deviceID" :parameterName="'GENERAL_HS_RTIA'" @parameterChange="deviceParameterChange($event)" />
    </div>
    <!-- CV -->
    <div v-if="workingModeSelect != null && workingModeSelect.id == 1">
@@ -45,14 +45,6 @@
          <level-button :ref="'currentRangeSelect'" :deviceID="deviceID" :options="currentRangeOptions" :parameterName="'ADC_LEVEL_I_15'" @parameterChange="deviceParameterChange($event)" />
        </div>
      </div>
-      <div class="flex row mt-0 pt-0 sm12 xl12 md12 xs12 align--center">
-        <div class="flex sm12 xl12 md12 xs12 pa-0 ma-0">
-          <p class="display-6">Voltage Range<p/>
-        </div>
-        <div class="flex sm12 xl12 md12 xs12 pa-0 ma-1" >
-          <level-button :ref="'voltageInRangeSelect'" :deviceID="deviceID" :options="voltageInRangeOptions" :parameterName="'ADC_LEVEL_V_IN_15'" @parameterChange="deviceParameterChange($event)" />
-        </div>
-      </div>
      <div class="flex row mt-0 pt-0 sm12 xl12 md12 xs12 align--center">
        <div class="flex sm12 xl12 md12 xs12 pa-0 ma-0">
          <p class="display-6">High Z<p/>
@@ -66,7 +58,7 @@
          <p class="display-6">E Initial<p/>
        </div>
        <div class="flex sm12 xl12 md12 xs12 pa-0 ma-1" >
-          <volt-range :ref="'voltInitialNumber'" :deviceID="deviceID" :parameterName="'VOLT_INITIAL'" :minValue="-1.8" :maxValue="2" @parameterChange="deviceParameterChange($event)" />
+          <volt-range :ref="'voltInitialNumber'" :deviceID="deviceID" :parameterName="'CV_E_INITIAL'" :minValue="-1.8" :maxValue="2" @parameterChange="deviceParameterChange($event)" />
        </div>
      </div>
      <div class="flex row mt-0 pt-0 sm12 xl12 md12 xs12 align--center">
@@ -74,7 +66,7 @@
          <p class="display-6">E1<p/>
        </div>
        <div class="flex sm12 xl12 md12 xs12 pa-0 ma-1" >
-          <volt-range :ref="'voltMaxNumber'" :deviceID="deviceID" :parameterName="'VOLT_MAX'" :minValue="-1.8" :maxValue="2" @parameterChange="deviceParameterChange($event)" />
+          <volt-range :ref="'voltMaxNumber'" :deviceID="deviceID" :parameterName="'CV_E1'" :minValue="-1.8" :maxValue="2" @parameterChange="deviceParameterChange($event)" />
        </div>
      </div>
      <div class="flex row mt-0 pt-0 sm12 xl12 md12 xs12 align--center">
@@ -82,7 +74,7 @@
          <p class="display-6">E2<p/>
        </div>
        <div class="flex sm12 xl12 md12 xs12 pa-0 ma-1" >
-          <volt-range :ref="'voltMinNumber'" :deviceID="deviceID" :parameterName="'VOLT_MIN'" :minValue="-1.8" :maxValue="2" @parameterChange="deviceParameterChange($event)" />
+          <volt-range :ref="'voltMinNumber'" :deviceID="deviceID" :parameterName="'CV_E2'" :minValue="-1.8" :maxValue="2" @parameterChange="deviceParameterChange($event)" />
        </div>
      </div>
      <div class="flex row mt-0 pt-0 sm12 xl12 md12 xs12 align--center">
@@ -90,7 +82,7 @@
          <p class="display-6">Voltage Scan Rate<p/>
        </div>
        <div class="flex sm12 xl12 md12 xs12 pa-0 ma-1" >
-          <scan-rate-range :ref="'voltScanRateNumber'" :deviceID="deviceID" :parameterName="'Scan_Rate'" :minValue="0.01" :maxValue="1000" @parameterChange="deviceParameterChange($event)" />
+          <scan-rate-range :ref="'voltScanRateNumber'" :deviceID="deviceID" :parameterName="'CV_SCAN_RATE'" :minValue="0.01" :maxValue="1000" @parameterChange="deviceParameterChange($event)" />
        </div>
      </div>
      <div class="flex row mt-0 pt-0 sm12 xl12 md12 xs12 align--center">
@@ -283,7 +275,7 @@ export default {
        },
      ],
      DCVolt: null,
-      AC_AMP: null,
+      EIS_AC_AMP: null,
      FreqStart: null,
      FreqStop: null,
      PointsPerDecades: null,
@@ -395,45 +387,36 @@ export default {
      this.measureEocButton.status = false
    },
    refresh () {
-      // taskInfo.getDeviceInfo(this.deviceID).parameterSet.CHANNEL_LABEL = ['Z_image_Raw', 'Z_Real_Raw', 'Frequency', 'Cycle', 'Z_imag', 'Z_real', 'Impedance', 'Phase', 'Current', 'Level gain']
      this.workingModeSelect = this.workingModeOptions[taskInfo.getDeviceInfo(this.deviceID).parameterSet.MODE]
      if (this.workingModeSelect != null) {
        this.workingModeSelectChange(this.workingModeSelect)
      }
-      this.ACAmplitude = String(Math.round((taskInfo.getDeviceInfo(this.deviceID).parameterSet.AC_AMP) / 2047 * 800))
+      this.ACAmplitude = String(Math.round((taskInfo.getDeviceInfo(this.deviceID).parameterSet.EIS_AC_AMP) / 2047 * 800))
      if (this.$refs.ACAmplitude != null) {
        this.$refs.ACAmplitude.itemChange(this.ACAmplitude)
      }
-      this.Average = taskInfo.getDeviceInfo(this.deviceID).parameterSet.AVERAGE_NUM
+      this.Average = taskInfo.getDeviceInfo(this.deviceID).parameterSet.EIS_AVERAGE_NUM
      if (this.$refs.Average != null) {
        this.$refs.Average.itemChange(this.Average)
      }
-      this.CurrentRange = taskInfo.getDeviceInfo(this.deviceID).parameterSet.RTIA
+      this.CurrentRange = taskInfo.getDeviceInfo(this.deviceID).parameterSet.GENERAL_HS_RTIA
      if (this.$refs.CurrentRange != null) {
        this.$refs.CurrentRange.itemChange(this.CurrentRange)
      }
-      this.PointSpacing = taskInfo.getDeviceInfo(this.deviceID).parameterSet.SCALE
+      this.PointSpacing = taskInfo.getDeviceInfo(this.deviceID).parameterSet.EIS_SCALE
      if (this.$refs.PointSpacing != null) {
        this.$refs.PointSpacing.itemChange(this.PointSpacing)
      }

-      this.DCVolt = (taskInfo.getDeviceInfo(this.deviceID).parameterSet.DC_BIAS - 15000) / 10
+      this.DCVolt = (taskInfo.getDeviceInfo(this.deviceID).parameterSet.EIS_DC_BIAS - 15000) / 10
      if (this.$refs.DCVolt != null) {
        this.$refs.DCVolt.itemChange(this.DCVolt)
      }
-      this.Delay = String(parseFloat((taskInfo.getDeviceInfo(this.deviceID).parameterSet.DELAY) / 10).toFixed(1))
+      this.Delay = String(parseFloat((taskInfo.getDeviceInfo(this.deviceID).parameterSet.EIS_DELAY) / 10).toFixed(1))
      if (this.$refs.Delay != null) {
        this.$refs.Delay.itemChange(this.Delay)
      }
-      this.FreqStart = String(parseFloat(Math.round(parseFloat((taskInfo.getDeviceInfo(this.deviceID).parameterSet.FREQ_START * 0.0149) * 100)) / 100).toFixed(1)) === '0.0' ? '0.015' : String(parseFloat(Math.round(parseFloat((taskInfo.getDeviceInfo(this.deviceID).parameterSet.FREQ_START * 0.0149) * 100)) / 100).toFixed(1))
-      if (this.$refs.FreqRange != null) {
-        this.$refs.FreqRange.itemChangeMax(this.FreqStart)
-      }
-      this.FreqStop = String(parseFloat(Math.round(parseFloat((taskInfo.getDeviceInfo(this.deviceID).parameterSet.FREQ_STOP * 0.0149) * 100)) / 100).toFixed(1)) === '0.0' ? '0.015' : String(parseFloat(Math.round(parseFloat((taskInfo.getDeviceInfo(this.deviceID).parameterSet.FREQ_STOP * 0.0149) * 100)) / 100).toFixed(1))
-      if (this.$refs.FreqRange != null) {
-        this.$refs.FreqRange.itemChangeMin(this.FreqStop)
-      }
-      this.PointsPerDecades = String(Math.round((taskInfo.getDeviceInfo(this.deviceID).parameterSet.PPD)))
+      this.PointsPerDecades = String(Math.round((taskInfo.getDeviceInfo(this.deviceID).parameterSet.EIS_PPD)))
      if (this.$refs.PointsPerDecades != null) {
        this.$refs.PointsPerDecades.itemChange(this.PointsPerDecades)
      }
@@ -444,11 +427,6 @@ export default {
        this.$refs.currentRangeSelect.updateLevelButton(this.currentRangeSelect)
      }

-      this.voltageInRangeSelect = taskInfo.getDeviceInfo(this.deviceID).parameterSet.ADC_LEVEL_V_IN_15
-      if (this.$refs.voltageInRangeSelect != null) {
-        this.$refs.voltageInRangeSelect.updateLevelButton(this.voltageInRangeSelect)
-      }
-
      this.highzSelect = taskInfo.getDeviceInfo(this.deviceID).parameterSet.CTRL_HIGH_Z_15
      if (this.$refs.highzSelect != null) {
        this.$refs.highzSelect.updateLevelButton(this.highzSelect)
@@ -464,12 +442,12 @@ export default {
        this.$refs.stopVoltMinNumber.updateVoltNumber(this.stopVoltMinNumber)
      }

-      this.voltInitialNumber = (taskInfo.getDeviceInfo(this.deviceID).parameterSet.VOLT_INITIAL - 25000) / 5
+      this.voltInitialNumber = (taskInfo.getDeviceInfo(this.deviceID).parameterSet.CV_E_INITIAL - 25000) / 5
      if (this.$refs.voltInitialNumber != null) {
        this.$refs.voltInitialNumber.updateVoltNumber(this.voltInitialNumber)
      }

-      this.voltScanRateNumber = taskInfo.getDeviceInfo(this.deviceID).parameterSet.Scan_Rate
+      this.voltScanRateNumber = taskInfo.getDeviceInfo(this.deviceID).parameterSet.CV_SCAN_RATE
      if (this.$refs.voltScanRateNumber != null) {
        this.$refs.voltScanRateNumber.updateVoltScanRateNumber(this.voltScanRateNumber)
      }
@@ -75,6 +75,10 @@ export default {
      type: Boolean,
      default: false,
    },
+    syncParameter: {
+      type: Object,
+      default: () => {},
+    },
  },
  created () {
  },
@@ -87,6 +91,13 @@ export default {
  methods: {
    buttonSelectChange (value) {
      this.$emit('parameterChange', this.parameterName, value)
+      this.syncParameter && Object.keys(this.syncParameter).forEach(element => {
+        if (String(element) === String(value)) {
+          this.syncParameter[value].forEach(element => {
+            this.$emit('parameterChange', element[0], element[1])
+          })
+        }
+      })
    },
  },
  async mounted () {
@@ -75,7 +75,7 @@ function sgFilter (data, windowSize, k) {
  // return list
 }

-function sgFilterGetDifferential (data, windowSize, polynomial) {
+function sgFilterGetDifferential (data, windowSize, polynomial, sampleRate = 1) {
  // self
  const arr = []
  const m = parseInt((windowSize - 1) / 2)
@@ -96,23 +96,24 @@ function sgFilterGetDifferential (data, windowSize, polynomial) {
  // use index 1 row in matrix
  const rowOneInB = row(B, 1)._data[0]

-  const start = []
-  const end = []
+  // const start = []
+  // const end = []
  const list = []

  // eslint-disable-next-line no-unused-vars
-  for (const _ of range(0, m)) {
-    start.push(data[0])
-    end.push(data[data.length - 1])
-  }
-  const _data = [...start, ...data, ...end]
+  // for (const _ of range(0, m)) {
+  //   start.push(data[0])
+  //   end.push(data[data.length - 1])
+  // }
+  // const _data = [...start, ...data, ...end]
+  // const _data = [...data]

  // m ... data_length - m - 1
-  for (const i of range(m, _data.length - m)) {
+  for (const i of range(m, data.length - m)) {
    const arra = []
    // -m ... 0 ... m
    for (const j of range(-m, m + 1)) {
-      arra.push(_data[i.value + j.value])
+      arra.push(data[i.value + j.value])
    }

    let sum = 0
@@ -120,7 +121,7 @@ function sgFilterGetDifferential (data, windowSize, polynomial) {
      sum += (arra[index] * rowOneInB[index])
    }

-    list.push(sum)
+    list.push(sum * sampleRate)
  }
  return list
 }
@@ -0,0 +1,22 @@
+export default {
+  name: 'Idle',
+  parameter: [], // 這個mode用到的參數
+  showParameter: [], // 有要秀給user看的參數
+  headerParameter: () => [], // export header的參數
+  valScales: {
+    linear: {
+      func: (val) => {
+        return val
+      },
+    },
+    log: {
+      func: (val) => {
+        return Math.log10(Math.abs(val))
+      },
+    },
+  },
+  channels: {
+  },
+  charts: {
+  },
+}
@@ -1,7 +1,8 @@
 export default {
-  name: 'Cali ADC - test',
-  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看的參數
+  name: 'Cali Mode - test',
+  parameter: ['ADC_DAC_CHANNEL_15', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'DAC_LEVEL_V_OUT_15', 'DAC_VOLT_BUTTON'], // 這個mode用到的參數
+  showParameter: ['ADC_DAC_CHANNEL_15', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'DAC_LEVEL_V_OUT_15', 'DAC_VOLT_BUTTON'], // 有要秀給user看的參數
+  headerParameter: () => ['ADC_DAC_CHANNEL_15', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'DAC_LEVEL_V_OUT_15', 'DAC_VOLT_BUTTON'], // export header的參數
  valScales: {
    linear: {
      func: (val) => {
@@ -52,7 +53,7 @@ export default {
  charts: {
    default: [
      {
-        name: 'Cali ADC - test',
+        name: 'Cali Mode - test',
        description: '',
        subplot: [
          {
@@ -1,8 +1,8 @@
 export default {
  name: 'Chronoamperometry',
-  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', 'TIME_DURATION'], // 有要秀給user看的參數
-  headerParameter: () => ['VOLT_VSCAN', 'SAMPLE_RATE', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'TIME_DURATION'], // 有要秀給user看的參數
+  parameter: ['CA_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', 'CA_VOLT', 'SAMPLE_RATE', 'TIME_DURATION'], // 有要秀給user看的參數
+  headerParameter: () => ['CA_VOLT', 'SAMPLE_RATE', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'TIME_DURATION'], // 有要秀給user看的參數
  valScales: {
    linear: {
      func: (val) => {
@@ -58,6 +58,46 @@ export default {
      defaultUnit: 'mV',
      downloadUnit: 'mV',
    },
+    3: {
+      name: 'sum_cnt',
+      unit: {
+        uV: 1,
+        mV: 1e3,
+        V: 1e6,
+      },
+      defaultUnit: 'mV',
+      downloadUnit: 'uV',
+    },
+    4: {
+      name: 'sum_adc_delta_Iin',
+      unit: {
+        uV: 1,
+        mV: 1e3,
+        V: 1e6,
+      },
+      defaultUnit: 'mV',
+      downloadUnit: 'uV',
+    },
+    5: {
+      name: 'sum_adc_delta_Voutin',
+      unit: {
+        uV: 1,
+        mV: 1e3,
+        V: 1e6,
+      },
+      defaultUnit: 'mV',
+      downloadUnit: 'uV',
+    },
+    6: {
+      name: 'resis',
+      unit: {
+        uV: 1,
+        mV: 1e3,
+        V: 1e6,
+      },
+      defaultUnit: 'mV',
+      downloadUnit: 'uV',
+    },
  },
  charts: {
    default: [
@@ -45,7 +45,7 @@ export default {
      downloadUnit: 'ms',
    },
    0: {
-      name: 'pul1_I_in',
+      name: 'I_in_pul1',
      unit: {
        nA: 1,
        uA: 1e3,
@@ -55,7 +55,7 @@ export default {
      downloadUnit: 'mA',
    },
    1: {
-      name: 'pul2_I_in',
+      name: 'I_in_pul2',
      unit: {
        nA: 1,
        uA: 1e3,
@@ -1,3 +1,4 @@
+import Idle from '../Common/Idle'
 import IV from './IV'
 import CycleIV from './CycleIV'
 import FunctionGenerator from './FunctionGenerator'
@@ -162,17 +163,24 @@ const EliteZM15 = {
    options: [
      { value: 0, label: 'Iin' },
      { value: 1, label: 'Vin' },
+      { value: 2, label: 'Vout' },
    ],
-    range: ['Iin', 'Vin'],
+    range: ['Iin', 'Vin', 'Vout'],
    defaultValue: 0,
    outputRawData: (val) => {
-      const caliChannelArr = ['Iin', 'Vin']
+      const caliChannelArr = ['Iin', 'Vin', 'Vout']
      return caliChannelArr.indexOf(val.toString())
    },
    outputReadabilityData: (idx) => {
-      const caliChannelArr = ['Iin', 'Vin']
+      const caliChannelArr = ['Iin', 'Vin', 'Vout']
      return caliChannelArr[parseInt(idx)]
    },
+
+    syncParameter: {
+      0: [['ADC_LEVEL_V_IN_15', 3], ['ADC_LEVEL_I_15', 0], ['DAC_LEVEL_V_OUT_15', 2]],
+      1: [['ADC_LEVEL_V_IN_15', 0], ['ADC_LEVEL_I_15', 0], ['DAC_LEVEL_V_OUT_15', 2]],
+      2: [['ADC_LEVEL_V_IN_15', 3], ['ADC_LEVEL_I_15', 4], ['DAC_LEVEL_V_OUT_15', 0]],
+    },
  },
  VOLT_ORIGIN: {
    type: 'number',
@@ -255,6 +263,26 @@ const EliteZM15 = {
    },
    downloadUnit: 's',
  },
+  DAC_LEVEL_V_OUT_15: {
+    type: 'array',
+    showName: 'DAC range',
+    componentType: 'input-button-toggle',
+    options: [
+      { value: 0, label: '0' },
+      { value: 1, label: '1' },
+      { value: 2, label: 'Auto' },
+    ],
+    range: ['0', '1', 'Auto'],
+    defaultValue: 2,
+    outputRawData: (val) => {
+      const caliChannelArr = ['0', '1', 'Auto']
+      return caliChannelArr.indexOf(val.toString())
+    },
+    outputReadabilityData: (idx) => {
+      const caliChannelArr = ['0', '1', 'Auto']
+      return caliChannelArr[parseInt(idx)]
+    },
+  },
  DAC_VOLT: {
    type: 'number',
    showName: 'Volt out',
@@ -274,6 +302,46 @@ const EliteZM15 = {
      return parseInt((parseFloat(val) - 25000) / 5) / scale
    },
  },
+  DAC_VOLT_SCROLL: {
+    type: 'number',
+    showName: 'DAC code',
+    componentType: 'input-range',
+    range: Object.freeze({ min: 0, max: 60000 }),
+    defaultValue: 25000,
+    defaultUnit: '',
+    downloadUnit: 'mV',
+    unit: {
+      mV: 1,
+      V: 1e3,
+    },
+    outputRawData: (val, scale = 1) => {
+      return parseInt(parseFloat(val))
+    },
+    outputReadabilityData: (val, scale = 0) => {
+      return parseInt(parseFloat(val))
+    },
+  },
+  DAC_VOLT_BUTTON: {
+    type: 'array',
+    showName: 'DAC code',
+    componentType: 'input-button-toggle',
+    options: [
+      { value: 0, label: '10000' },
+      { value: 1, label: '25000' },
+      { value: 2, label: '50000' },
+      { value: 3, label: '60000' },
+    ],
+    range: ['10000', '25000', '50000', '60000'],
+    defaultValue: 1,
+    outputRawData: (val) => {
+      const caliChannelArr = ['10000', '25000', '50000', '60000']
+      return caliChannelArr.indexOf(val.toString())
+    },
+    outputReadabilityData: (idx) => {
+      const caliChannelArr = ['10000', '25000', '50000', '60000']
+      return caliChannelArr[parseInt(idx)]
+    },
+  },
  SAMPLE_RATE: {
    type: 'number',
    componentType: 'input-range',
@@ -885,6 +953,12 @@ const EliteZM15 = {
  },

  MODE_OPTIONS: [
+    {
+      id: 17,
+      description: 'Idle',
+      img_src: 'IV-Wire',
+      highz: 1,
+    },
    {
      id: 0,
      description: 'I-V Curve',
@@ -981,7 +1055,7 @@ const EliteZM15 = {
    },
    {
      id: 11,
-      description: 'Cali ADC - test',
+      description: 'Cali Mode - test',
      img_src: 'CADC-Wire',
    },
  ],
@@ -1003,6 +1077,7 @@ const EliteZM15 = {
    14: PulseSensing,
    15: DPV,
    16: Chronopotentiometry,
+    17: Idle,
  },
 }

@@ -1,8 +1,8 @@
 export default {
  name: 'Chronoamperometry',
-  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', 'TIME_DURATION'], // 有要秀給user看的參數
-  headerParameter: () => ['VOLT_VSCAN', 'SAMPLE_RATE', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'TIME_DURATION'], // 有要秀給user看的參數
+  parameter: ['CA_VOLT', 'SAMPLE_RATE', 'GENERAL_LP_RTIA', 'CTRL_HIGH_Z_15', 'TIME_DURATION'], // 這個mode用到的參數
+  showParameter: ['GENERAL_LP_RTIA', 'CTRL_HIGH_Z_15', 'CA_VOLT', 'SAMPLE_RATE', 'TIME_DURATION'], // 有要秀給user看的參數
+  headerParameter: () => ['CA_VOLT', 'SAMPLE_RATE', 'GENERAL_LP_RTIA', 'TIME_DURATION'], // 有要秀給user看的參數
  valScales: {
    linear: {
      func: (val) => {
@@ -0,0 +1,213 @@
+export default {
+  name: 'Potentiostatic Electrochemical Impedance Spectroscopy',
+  parameter: ['CF_DC_BIAS', 'CF_AC_AMP', 'CF_FREQ', 'CF_PPD', 'CF_SCALE', 'CF_DELAY', 'CF_AVERAGE_NUM', 'GENERAL_HS_RTIA'], // 這個mode用到的參數
+  showParameter: ['CF_DC_BIAS', 'CF_AC_AMP', 'CF_FREQ', 'CF_PPD', 'CF_SCALE', 'CF_DELAY', 'CF_AVERAGE_NUM', 'GENERAL_HS_RTIA'], // 有要秀給user看的參數
+  headerParameter: () => ['CF_DC_BIAS', 'CF_AC_AMP', 'CF_FREQ', 'CF_PPD', 'CF_SCALE', 'CF_DELAY', 'CF_AVERAGE_NUM', 'GENERAL_HS_RTIA'], // 有要秀給user看的參數
+  valScales: {
+    linear: {
+      func: (val) => {
+        return val
+      },
+    },
+    log: {
+      func: (val) => {
+        return Math.log10(Math.abs(val))
+      },
+    },
+  },
+  channels: {
+    time: {
+      name: 'Time',
+      unit: {
+        us: 1,
+        ms: 1e3,
+        s: 1e6,
+        m: 60 * 1e6,
+        h: 60 * 60 * 1e6,
+        auto: 1,
+      },
+      defaultUnit: 'auto',
+      downloadUnit: 'ms',
+    },
+    0: {
+      name: 'Z_Imag_Raw',
+      unit: {
+        ohm: 1,
+      },
+      downloadUnit: 'ohm',
+      defaultUnit: 'ohm',
+    },
+    1: {
+      name: 'Z_Real_Raw',
+      unit: {
+        default: 1,
+      },
+      downloadUnit: 'ohm',
+      defaultUnit: 'ohm',
+    },
+    2: {
+      name: 'Frequency',
+      unit: {
+        mHz: 1,
+        Hz: 1e3,
+        kHz: 1e6,
+      },
+      downloadUnit: 'mHz',
+      defaultUnit: 'mHz',
+    },
+    // 3: {
+    //   name: 'Cycle',
+    //   unit: {
+    //     cycle: 1,
+    //   },
+    //   defaultUnit: 'cycle',
+    //   downloadUnit: null,
+    // },
+    4: {
+      name: 'Z_Imag',
+      unit: {
+        mohm: 1e-3,
+        mΩ: 1e-3,
+        ohm: 1,
+        Ω: 1,
+        kohm: 1e3,
+        kΩ: 1e3,
+        Mohm: 1e6,
+        MΩ: 1e6,
+      },
+      downloadUnit: 'ohm',
+      defaultUnit: 'Ω',
+    },
+    5: {
+      name: 'Z_Real',
+      unit: {
+        mohm: 1e-3,
+        mΩ: 1e-3,
+        ohm: 1,
+        Ω: 1,
+        kohm: 1e3,
+        kΩ: 1e3,
+        Mohm: 1e6,
+        MΩ: 1e6,
+      },
+      downloadUnit: 'ohm',
+      defaultUnit: 'Ω',
+    },
+    6: {
+      name: 'Impedance',
+      unit: {
+        mohm: 1e-3,
+        mΩ: 1e-3,
+        ohm: 1,
+        Ω: 1,
+        kohm: 1e3,
+        kΩ: 1e3,
+        Mohm: 1e6,
+        MΩ: 1e6,
+      },
+      downloadUnit: 'ohm',
+      defaultUnit: 'Ω',
+    },
+    7: {
+      name: 'Phase',
+      unit: {
+        '°': 1,
+      },
+      downloadUnit: null,
+      defaultUnit: '°',
+    },
+    8: {
+      name: 'Current',
+      unit: {
+        nA: 1,
+        uA: 1e3,
+        mA: 1e6,
+      },
+      downloadUnit: 'nA',
+      defaultUnit: 'nA',
+    },
+    9: {
+      name: 'Level gain',
+      unit: {
+        default: 1,
+      },
+      downloadUnit: null,
+      defaultUnit: 'default',
+    },
+  },
+  charts: {
+    default: [
+      {
+        name: 'Nyquist',
+        description: '',
+        subplot: [
+          {
+            x1: {
+              type: 'value',
+              valScale: 'linear',
+              min: 'dataMin',
+              max: 'dataMax',
+            },
+            y1: {
+              type: 'value',
+              valScale: 'linear',
+              min: 'dataMin',
+              max: 'dataMax',
+            },
+            data: [
+              {
+                legend: 'Nyquist',
+                x1: {
+                  channel: 5,
+                },
+                y1: {
+                  channel: 4,
+                },
+              },
+            ],
+          },
+        ],
+      },
+      {
+        name: 'Bode',
+        description: '',
+        subplot: [
+          {
+            x1: {
+              type: 'value',
+              valScale: 'log',
+              min: 'dataMin',
+              max: 'dataMax',
+            },
+            y1: {
+              type: 'value',
+              valScale: 'linear',
+              min: 'dataMin',
+              max: 'dataMax',
+            },
+            y2: {
+              type: 'value',
+              valScale: 'linear',
+              min: 'dataMin',
+              max: 'dataMax',
+            },
+            data: [
+              {
+                legend: 'Bode',
+                x1: {
+                  channel: 2,
+                },
+                y1: {
+                  channel: 6,
+                },
+                y2: {
+                  channel: 7,
+                },
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+}
@@ -1,8 +1,8 @@
 export default {
  name: 'Cyclic Voltammetry',
-  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看的參數
+  parameter: ['CV_E_INITIAL', 'CV_E1', 'CV_E2', 'CV_SCAN_RATE', 'SAMPLE_RATE', 'CYCLE_NUMBER', 'GENERAL_LP_RTIA'], // 這個mode用到的參數
+  showParameter: ['GENERAL_LP_RTIA', 'CTRL_HIGH_Z_15', 'CV_E_INITIAL', 'CV_E1', 'CV_E2', 'CV_SCAN_RATE', 'SAMPLE_RATE', 'CYCLE_NUMBER'], // 有要秀給user看的參數
+  headerParameter: () => ['CV_E_INITIAL', 'CV_E1', 'CV_E2', 'CV_SCAN_RATE', 'SAMPLE_RATE', 'CYCLE_NUMBER', 'GENERAL_LP_RTIA'], // 有要秀給user看的參數
  valScales: {
    linear: {
      func: (val) => {
@@ -1,9 +1,8 @@
 export default {
  name: 'Potentiostatic Electrochemical Impedance Spectroscopy',
-  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看的參數
+  parameter: ['EIS_DC_BIAS', 'EIS_AC_AMP', 'EIS_FREQ', 'EIS_PPD', 'EIS_SCALE', 'EIS_DELAY', 'EIS_AVERAGE_NUM', 'GENERAL_HS_RTIA'], // 這個mode用到的參數
+  showParameter: ['EIS_DC_BIAS', 'EIS_AC_AMP', 'EIS_FREQ', 'EIS_PPD', 'EIS_SCALE', 'EIS_DELAY', 'EIS_AVERAGE_NUM', 'GENERAL_HS_RTIA'], // 有要秀給user看的參數
+  headerParameter: () => ['EIS_DC_BIAS', 'EIS_AC_AMP', 'EIS_FREQ', 'EIS_PPD', 'EIS_SCALE', 'EIS_DELAY', 'EIS_AVERAGE_NUM', 'GENERAL_HS_RTIA'], // 有要秀給user看的參數
  valScales: {
    linear: {
      func: (val) => {
@@ -31,7 +30,7 @@ export default {
      downloadUnit: 'ms',
    },
    0: {
-      name: 'Z_imag_Raw',
+      name: 'Z_Imag_Raw',
      unit: {
        ohm: 1,
      },
@@ -65,7 +64,7 @@ export default {
    //   downloadUnit: null,
    // },
    4: {
-      name: 'Z_imag',
+      name: 'Z_Imag',
      unit: {
        mohm: 1e-3,
        mΩ: 1e-3,
@@ -80,7 +79,7 @@ export default {
      defaultUnit: 'Ω',
    },
    5: {
-      name: 'Z_real',
+      name: 'Z_Real',
      unit: {
        mohm: 1e-3,
        mΩ: 1e-3,
@@ -0,0 +1,102 @@
+export default {
+  name: 'R-T Graph',
+  parameter: ['RT_VOLT_SET', 'SAMPLE_RATE', 'CTRL_HIGH_Z_15', 'TIME_DURATION'], // 這個mode用到的參數
+  showParameter: ['RT_VOLT_SET', 'SAMPLE_RATE', 'CTRL_HIGH_Z_15', 'TIME_DURATION'], // 有要秀給user看的參數
+  headerParameter: () => ['RT_VOLT_SET', 'SAMPLE_RATE', 'GENERAL_LP_RTIA', 'TIME_DURATION'], // export header的參數
+  valScales: {
+    linear: {
+      func: (val) => {
+        return val
+      },
+    },
+    log: {
+      func: (val) => {
+        return Math.log10(Math.abs(val))
+      },
+    },
+  },
+  channels: {
+    time: {
+      name: 'Time',
+      unit: {
+        us: 1,
+        ms: 1e3,
+        s: 1e6,
+        minute: 60 * 1e6,
+        hour: 60 * 60 * 1e6,
+      },
+      defaultUnit: 'ms',
+      downloadUnit: 'ms',
+    },
+    0: {
+      name: 'I_in',
+      unit: {
+        nA: 1,
+        uA: 1e3,
+        mA: 1e6,
+      },
+      defaultUnit: 'mA',
+      downloadUnit: 'mA',
+    },
+    1: {
+      name: 'V_out',
+      unit: {
+        uV: 1,
+        mV: 1e3,
+        V: 1e6,
+      },
+      defaultUnit: 'mV',
+      downloadUnit: 'mV',
+    },
+    2: {
+      name: 'Resistor',
+      unit: {
+        mΩ: 1,
+        mohm: 1,
+        Ω: 1e3,
+        ohm: 1e3,
+        kΩ: 1e6,
+        kohm: 1e6,
+        MΩ: 1e9,
+        Mohm: 1e9,
+      },
+      defaultUnit: 'Ω',
+      downloadUnit: 'ohm',
+    },
+  },
+  charts: {
+    default: [
+      {
+        name: 'R-T Graph',
+        description: '',
+        subplot: [
+          {
+            x1: {
+              type: 'time',
+              valScale: 'linear',
+              min: 'dataMin',
+              max: 'dataMax',
+            },
+            y1: {
+              type: 'value',
+              valScale: 'linear',
+              min: 'dataMin',
+              max: 'dataMax',
+            },
+            data: [
+              {
+                legend: 'RT',
+                x1: {
+                  channel: 'time',
+                },
+                y1: {
+                  channel: 2,
+                },
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+}
@@ -0,0 +1,87 @@
+export default {
+  name: 'V-T Graph',
+  parameter: ['SAMPLE_RATE', 'VT_MEASURE_VIN_RANGE', 'GENERAL_LP_RTIA', 'CTRL_HIGH_Z_15', 'TIME_DURATION'], // 這個mode用到的參數
+  showParameter: ['SAMPLE_RATE', 'VT_MEASURE_VIN_RANGE', 'GENERAL_LP_RTIA', 'CTRL_HIGH_Z_15', 'TIME_DURATION'], // 有要秀給user看的參數
+  headerParameter: () => ['SAMPLE_RATE', 'VT_MEASURE_VIN_RANGE', 'GENERAL_LP_RTIA', 'TIME_DURATION'], // export header的參數
+  valScales: {
+    linear: {
+      func: (val) => {
+        return val
+      },
+    },
+    log: {
+      func: (val) => {
+        return Math.log10(Math.abs(val))
+      },
+    },
+  },
+  channels: {
+    time: {
+      name: 'Time',
+      unit: {
+        us: 1,
+        ms: 1e3,
+        s: 1e6,
+        minute: 60 * 1e6,
+        hour: 60 * 60 * 1e6,
+      },
+      defaultUnit: 'ms',
+      downloadUnit: 'ms',
+    },
+    0: {
+      name: 'I_in',
+      unit: {
+        nA: 1,
+        uA: 1e3,
+        mA: 1e6,
+      },
+      defaultUnit: 'mA',
+      downloadUnit: 'mA',
+    },
+    1: {
+      name: 'V_in',
+      unit: {
+        uV: 1,
+        mV: 1e3,
+        V: 1e6,
+      },
+      defaultUnit: 'mV',
+      downloadUnit: 'mV',
+    },
+  },
+  charts: {
+    default: [
+      {
+        name: 'V-T Graph',
+        description: '',
+        subplot: [
+          {
+            x1: {
+              type: 'time',
+              valScale: 'linear',
+              min: 'dataMin',
+              max: 'dataMax',
+            },
+            y1: {
+              type: 'value',
+              valScale: 'linear',
+              min: 'dataMin',
+              max: 'dataMax',
+            },
+            data: [
+              {
+                legend: 'VT',
+                x1: {
+                  channel: 'time',
+                },
+                y1: {
+                  channel: 1,
+                },
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+}
@@ -2,229 +2,31 @@ import PotentiostaticEIS from './PotentiostaticEIS'
 import CyclicVoltammetry from './CyclicVoltammetry'
 import DevMode from './DevMode'
 import Chronoamperometry from './Chronoamperometry'
+import VT from './VT'
+import RT from './RT'
+import ConstantFrequency from './ConstantFrequency'
+import Idle from '../Common/Idle'

 const EliteEIS = {
-  ADC_VALUE_I: {
-    type: 'none',
-    showName: 'Instruction',
-    componentType: 'dev-mode',
-  },
-  DC_BIAS: {
+  TIME_DURATION: {
    type: 'number',
-    showName: 'DC Volt',
-    componentType: 'input-field',
-    range: Object.freeze({ min: 2500, max: 50000 }), // UI上能輸入的最大最小值
-    outputRawData: (val, scale = 1) => {
-      return Math.round((parseInt(val) * 12.5 * scale) + 25000)
-    },
-    outputReadabilityData: (val, scale = 1) => {
-      return Math.round(parseInt(val - 25000) / 12.5) / scale
-    },
-    defaultUnit: 'mV',
-    downloadUnit: 'mV',
+    showName: 'Time duration',
+    componentType: 'input-range',
+    range: Object.freeze({ min: 0, max: 86400 }), // UI上能輸入的最大最小值
+    defaultValue: 0,
+    defaultUnit: 's',
+    downloadUnit: 's',
    unit: {
-      mV: 1,
-      V: 1e3,
+      ms: 1e-3,
+      s: 1,
+      m: 60,
+      h: 3600,
    },
-  },
-  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',
-    unit: {
-      mV: 1,
-    },
-  },
-  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)
+      return parseInt(parseFloat(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',
-    downloadUnit: 'Hz',
-    unit: {
-      Hz: 1,
-    },
-  },
-  FREQ_START: {
-    type: 'number',
-    showName: 'Freq max',
-    range: Object.freeze({ min: 0.015, max: 200000 }),
-    outputRawData: (val) => {
-      return parseFloat(val) < 0.1 ? 1 : Math.round(parseFloat(val) / 0.0149)
-    },
-    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',
-    downloadUnit: 'Hz',
-    unit: {
-      Hz: 1,
-    },
-  },
-  FREQ_STOP: {
-    type: 'number',
-    showName: 'Freq min',
-    range: Object.freeze({ min: 0.015, max: 200000 }),
-    outputRawData: (val) => {
-      return parseFloat(val) < 0.1 ? 1 : Math.round(parseFloat(val) / 0.0149)
-    },
-    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',
-    downloadUnit: 'Hz',
-    unit: {
-      Hz: 1,
-    },
-  },
-  PPD: {
-    type: 'number',
-    showName: 'Points per decades',
-    componentType: 'input-field',
-    range: Object.freeze({ min: 1, max: 10 }),
-    outputRawData: (val) => {
-      return parseInt(val)
-    },
-    outputReadabilityData: (val) => {
-      return parseInt(val)
-    },
-    defaultUnit: 'points',
-    downloadUnit: null,
-    unit: {
-      points: 1,
-    },
-  },
-  SCALE: {
-    type: 'array',
-    showName: 'Point spacing',
-    componentType: 'input-button-toggle',
-    options: [
-      { value: 0, label: 'Logarithm' },
-      { value: 1, label: 'Linear' },
-    ],
-    range: ['Logarithm', 'Linear'],
-    outputRawData: (val) => {
-      const scaleArr = ['Logarithm', 'Linear']
-      return scaleArr.indexOf(val.toString())
-    },
-    outputReadabilityData: (idx) => {
-      const scaleArr = ['Logarithm', 'Linear']
-      return scaleArr[parseInt(idx)]
-    },
-  },
-  DELAY: {
-    type: 'number',
-    showName: 'DELAY',
-    componentType: 'input-field',
-    range: Object.freeze({ min: 1, max: 100 }),
-    outputRawData: (val) => {
-      return parseInt(parseFloat(val) * 10)
-    },
-    outputReadabilityData: (val) => {
-      return parseFloat((val / 10)).toFixed(1)
-    },
-    defaultUnit: 'points',
-    downloadUnit: null,
-    unit: {
-      points: 1,
-    },
-  },
-  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'],
-    outputRawData: (val) => {
-      const numArr = ['2', '4', '6', '8']
-      return numArr.indexOf(val.toString())
-    },
-    outputReadabilityData: (idx) => {
-      const numArr = ['2', '4', '6', '8']
-      return numArr[parseInt(idx)]
-    },
-  },
-  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'],
-    outputRawData: (val) => {
-      const numArr = ['1', '2', '3', '4', 'Auto']
-      return numArr.indexOf(val.toString())
-    },
-    outputReadabilityData: (idx) => {
-      const numArr = ['1', '2', '3', '4', 'Auto']
-      return numArr[parseInt(idx)]
-    },
-  },
-  ADC_LEVEL_I_15: {
-    type: 'array',
-    showName: 'Current Range',
-    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())
-    },
-    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'],
-    outputRawData: (val) => {
-      const voltageInRangeArr = ['1', '2', '3', 'Auto']
-      return voltageInRangeArr.indexOf(val.toString())
-    },
-    outputReadabilityData: (idx) => {
-      const voltageInRangeArr = ['1', '2', '3', 'Auto']
-      return voltageInRangeArr[parseInt(idx)]
+      return parseInt(parseFloat(val))
    },
  },
  CTRL_HIGH_Z_15: {
@@ -236,6 +38,7 @@ const EliteEIS = {
      { value: 1, label: 'Off' },
    ],
    range: ['On', 'Off'],
+    defaultValue: 1,
    outputRawData: (val) => {
      const highzArr = ['On', 'Off']
      return highzArr.indexOf(val.toString())
@@ -245,94 +48,6 @@ const EliteEIS = {
      return highzArr[parseInt(idx)]
    },
  },
-  VOLT_INITIAL: {
-    type: 'number',
-    showName: 'E-Initial',
-    componentType: 'input-range',
-    range: Object.freeze({ min: 2500, max: 50000 }),
-    outputRawData: (val, scale = 1) => {
-      return parseInt(parseFloat(val) * scale * 12.5 + 25000)
-    },
-    outputReadabilityData: (val, scale = 1) => {
-      return parseInt((parseFloat(val) - 25000) / 12.5) / scale
-    },
-    defaultUnit: 'V',
-    downloadUnit: 'mV',
-    unit: {
-      mV: 1,
-      V: 1e3,
-    },
-  },
-  VOLT_MAX: {
-    type: 'number',
-    showName: 'E1',
-    componentType: 'input-range',
-    range: Object.freeze({ min: 2500, max: 50000 }),
-    outputRawData: (val, scale = 1) => {
-      return parseInt(parseFloat(val) * scale * 12.5 + 25000)
-    },
-    outputReadabilityData: (val, scale = 1) => {
-      return parseInt((parseFloat(val) - 25000) / 12.5) / scale
-    },
-    defaultUnit: 'V',
-    downloadUnit: 'mV',
-    unit: {
-      mV: 1,
-      V: 1e3,
-    },
-  },
-  VOLT_MIN: {
-    type: 'number',
-    showName: 'E2',
-    componentType: 'input-range',
-    range: Object.freeze({ min: 2500, max: 50000 }),
-    outputRawData: (val, scale = 1) => {
-      return parseInt(parseFloat(val) * scale * 12.5 + 25000)
-    },
-    outputReadabilityData: (val, scale = 1) => {
-      return parseInt((parseFloat(val) - 25000) / 12.5) / scale
-    },
-    defaultUnit: 'V',
-    downloadUnit: 'mV',
-    unit: {
-      mV: 1,
-      V: 1e3,
-    },
-  },
-  Scan_Rate: {
-    type: 'number',
-    showName: 'ScanRate',
-    componentType: 'input-range',
-    range: Object.freeze({ min: 1, max: 100000 }),
-    outputRawData: (val) => {
-      return parseInt(parseFloat(val) * 100)
-    },
-    outputReadabilityData: (val) => {
-      return parseFloat(val) / 100
-    },
-    defaultUnit: 'mV/s',
-    downloadUnit: 'mV/s',
-    unit: {
-      'mV/s': 1,
-    },
-  },
-  SAMPLE_RATE: {
-    type: 'number',
-    showName: 'Sample rate',
-    componentType: 'input-range',
-    range: Object.freeze({ min: 1, max: 1000 }),
-    outputRawData: (val, scale = 1) => {
-      return parseInt(parseFloat(val) * 10)
-    },
-    outputReadabilityData: (val, scale = 1) => {
-      return parseFloat(val) / 10
-    },
-    defaultUnit: 'sps',
-    downloadUnit: 'sps',
-    unit: {
-      sps: 1,
-    },
-  },
  CYCLE_NUMBER: {
    type: 'number',
    showName: 'Cycle',
@@ -344,14 +59,482 @@ const EliteEIS = {
    outputReadabilityData: (val) => {
      return parseInt(val)
    },
+    defaultValue: 1,
    defaultUnit: 'cycle',
    downloadUnit: null,
    unit: {
      cycle: 1,
    },
  },
+  SAMPLE_RATE: {
+    type: 'number',
+    showName: 'Sample rate',
+    componentType: 'input-range',
+    range: Object.freeze({ min: 1, max: 1000 }),
+    outputRawData: (val, scale = 1) => {
+      return parseInt(parseFloat(val) * 10)
+    },
+    outputReadabilityData: (val, scale = 1) => {
+      return parseFloat(val) / 10
+    },
+    defaultValue: 1000,
+    defaultUnit: 'sps',
+    downloadUnit: 'sps',
+    unit: {
+      sps: 1,
+    },
+  },
+  GENERAL_HS_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'],
+    defaultValue: 4,
+    outputRawData: (val) => {
+      const numArr = ['1', '2', '3', '4', 'Auto']
+      return numArr.indexOf(val.toString())
+    },
+    outputReadabilityData: (idx) => {
+      const numArr = ['1', '2', '3', '4', 'Auto']
+      return numArr[parseInt(idx)]
+    },
+  },
+  GENERAL_LP_RTIA: {
+    type: 'array',
+    showName: 'Current Range',
+    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'],
+    defaultValue: 4,
+    outputRawData: (val) => {
+      const currentRangeArr = ['<1.5 uA', '1-60 uA', '40-175 uA', '>120 uA', 'Auto']
+      return currentRangeArr.indexOf(val.toString())
+    },
+    outputReadabilityData: (idx) => {
+      const currentRangeArr = ['<1.5 uA', '1-60 uA', '40-175 uA', '>120 uA', 'Auto']
+      return currentRangeArr[parseInt(idx)]
+    },
+  },
+  EIS_DC_BIAS: {
+    type: 'number',
+    showName: 'DC Volt',
+    componentType: 'input-field',
+    range: Object.freeze({ min: 2500, max: 50000 }), // UI上能輸入的最大最小值
+    outputRawData: (val, scale = 1) => {
+      return Math.round((parseInt(val) * 12.5 * scale) + 25000)
+    },
+    outputReadabilityData: (val, scale = 1) => {
+      return Math.round(parseInt(val - 25000) / 12.5) / scale
+    },
+    defaultValue: 25000,
+    defaultUnit: 'mV',
+    downloadUnit: 'mV',
+    unit: {
+      mV: 1,
+      V: 1e3,
+    },
+  },
+  EIS_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
+    },
+    defaultValue: 25,
+    defaultUnit: 'mV',
+    downloadUnit: 'mV',
+    unit: {
+      mV: 1,
+    },
+  },
+  EIS_FREQ: {
+    type: 'array',
+    showName: 'Frequency',
+    componentType: 'multi-input-field',
+    range: Object.freeze({ min: 1, max: 13333333 }),
+    outputRawData: (val) => {
+      return parseFloat(val) < 0.1 ? Math.round(0.1 / 0.015) : Math.round(parseFloat(val) / 0.015)
+    },
+    outputReadabilityData: (val) => {
+      return (parseFloat(val) * 0.015).toFixed(1)
+    },
+    defaultValue: [13333333, 7],
+    defaultUnit: 'Hz',
+    downloadUnit: 'Hz',
+    unit: {
+      Hz: 1,
+    },
+  },
+  EIS_PPD: {
+    type: 'number',
+    showName: 'Points per decades',
+    componentType: 'input-field',
+    range: Object.freeze({ min: 1, max: 10 }),
+    outputRawData: (val) => {
+      return parseInt(val)
+    },
+    outputReadabilityData: (val) => {
+      return parseInt(val)
+    },
+    defaultValue: 10,
+    defaultUnit: 'points',
+    downloadUnit: null,
+    unit: {
+      points: 1,
+    },
+  },
+  EIS_SCALE: {
+    type: 'array',
+    showName: 'Point spacing',
+    componentType: 'input-button-toggle',
+    options: [
+      { value: 0, label: 'Logarithm' },
+      { value: 1, label: 'Linear' },
+    ],
+    range: ['Logarithm', 'Linear'],
+    defaultValue: 0,
+    outputRawData: (val) => {
+      const scaleArr = ['Logarithm', 'Linear']
+      return scaleArr.indexOf(val.toString())
+    },
+    outputReadabilityData: (idx) => {
+      const scaleArr = ['Logarithm', 'Linear']
+      return scaleArr[parseInt(idx)]
+    },
+  },
+  EIS_DELAY: {
+    type: 'number',
+    showName: 'DELAY',
+    componentType: 'input-field',
+    range: Object.freeze({ min: 0, max: 100 }),
+    outputRawData: (val) => {
+      return parseInt(parseFloat(val) * 10)
+    },
+    outputReadabilityData: (val) => {
+      return parseFloat((val / 10)).toFixed(1)
+    },
+    defaultValue: 0,
+    defaultUnit: 'points',
+    downloadUnit: null,
+    unit: {
+      points: 1,
+    },
+  },
+  EIS_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'],
+    defaultValue: 3,
+    outputRawData: (val) => {
+      const numArr = ['2', '4', '6', '8']
+      return numArr.indexOf(val.toString())
+    },
+    outputReadabilityData: (idx) => {
+      const numArr = ['2', '4', '6', '8']
+      return numArr[parseInt(idx)]
+    },
+  },
+  CF_DC_BIAS: {
+    type: 'number',
+    showName: 'DC Volt',
+    componentType: 'input-field',
+    range: Object.freeze({ min: 2500, max: 50000 }), // UI上能輸入的最大最小值
+    outputRawData: (val, scale = 1) => {
+      return Math.round((parseInt(val) * 12.5 * scale) + 25000)
+    },
+    outputReadabilityData: (val, scale = 1) => {
+      return Math.round(parseInt(val - 25000) / 12.5) / scale
+    },
+    defaultValue: 25000,
+    defaultUnit: 'mV',
+    downloadUnit: 'mV',
+    unit: {
+      mV: 1,
+      V: 1e3,
+    },
+  },
+  CF_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
+    },
+    defaultValue: 25,
+    defaultUnit: 'mV',
+    downloadUnit: 'mV',
+    unit: {
+      mV: 1,
+    },
+  },
+  CF_FREQ: {
+    type: 'number',
+    showName: 'Frequency',
+    componentType: 'input-field',
+    range: Object.freeze({ min: 1, max: 13333333 }),
+    outputRawData: (val) => {
+      return parseFloat(val) < 0.1 ? Math.round(0.1 / 0.015) : Math.round(parseFloat(val) / 0.015)
+    },
+    outputReadabilityData: (val) => {
+      return (parseFloat(val) * 0.015).toFixed(1)
+    },
+    defaultValue: 13333333,
+    defaultUnit: 'Hz',
+    downloadUnit: 'Hz',
+    unit: {
+      Hz: 1,
+    },
+  },
+  CF_PPD: {
+    type: 'number',
+    showName: 'Points per decades',
+    componentType: 'input-field',
+    range: Object.freeze({ min: 1, max: 10 }),
+    outputRawData: (val) => {
+      return parseInt(val)
+    },
+    outputReadabilityData: (val) => {
+      return parseInt(val)
+    },
+    defaultValue: 10,
+    defaultUnit: 'points',
+    downloadUnit: null,
+    unit: {
+      points: 1,
+    },
+  },
+  CF_SCALE: {
+    type: 'array',
+    showName: 'Point spacing',
+    componentType: 'input-button-toggle',
+    options: [
+      { value: 0, label: 'Logarithm' },
+      { value: 1, label: 'Linear' },
+    ],
+    range: ['Logarithm', 'Linear'],
+    defaultValue: 0,
+    outputRawData: (val) => {
+      const scaleArr = ['Logarithm', 'Linear']
+      return scaleArr.indexOf(val.toString())
+    },
+    outputReadabilityData: (idx) => {
+      const scaleArr = ['Logarithm', 'Linear']
+      return scaleArr[parseInt(idx)]
+    },
+  },
+  CF_DELAY: {
+    type: 'number',
+    showName: 'DELAY',
+    componentType: 'input-field',
+    range: Object.freeze({ min: 0, max: 100 }),
+    outputRawData: (val) => {
+      return parseInt(parseFloat(val) * 10)
+    },
+    outputReadabilityData: (val) => {
+      return parseFloat((val / 10)).toFixed(1)
+    },
+    defaultValue: 0,
+    defaultUnit: 'points',
+    downloadUnit: null,
+    unit: {
+      points: 1,
+    },
+  },
+  CF_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'],
+    defaultValue: 3,
+    outputRawData: (val) => {
+      const numArr = ['2', '4', '6', '8']
+      return numArr.indexOf(val.toString())
+    },
+    outputReadabilityData: (idx) => {
+      const numArr = ['2', '4', '6', '8']
+      return numArr[parseInt(idx)]
+    },
+  },
+  CV_E_INITIAL: {
+    type: 'number',
+    showName: 'E-Initial',
+    componentType: 'input-range',
+    range: Object.freeze({ min: 2500, max: 50000 }),
+    outputRawData: (val, scale = 1) => {
+      return parseInt(parseFloat(val) * scale * 12.5 + 25000)
+    },
+    outputReadabilityData: (val, scale = 1) => {
+      return parseInt((parseFloat(val) - 25000) / 12.5) / scale
+    },
+    defaultValue: 25000,
+    defaultUnit: 'V',
+    downloadUnit: 'mV',
+    unit: {
+      mV: 1,
+      V: 1e3,
+    },
+  },
+  CV_E1: {
+    type: 'number',
+    showName: 'E1',
+    componentType: 'input-range',
+    range: Object.freeze({ min: 2500, max: 50000 }),
+    outputRawData: (val, scale = 1) => {
+      return parseInt(parseFloat(val) * scale * 12.5 + 25000)
+    },
+    outputReadabilityData: (val, scale = 1) => {
+      return parseInt((parseFloat(val) - 25000) / 12.5) / scale
+    },
+    defaultValue: 25000,
+    defaultUnit: 'V',
+    downloadUnit: 'mV',
+    unit: {
+      mV: 1,
+      V: 1e3,
+    },
+  },
+  CV_E2: {
+    type: 'number',
+    showName: 'E2',
+    componentType: 'input-range',
+    range: Object.freeze({ min: 2500, max: 50000 }),
+    outputRawData: (val, scale = 1) => {
+      return parseInt(parseFloat(val) * scale * 12.5 + 25000)
+    },
+    outputReadabilityData: (val, scale = 1) => {
+      return parseInt((parseFloat(val) - 25000) / 12.5) / scale
+    },
+    defaultValue: 25000,
+    defaultUnit: 'V',
+    downloadUnit: 'mV',
+    unit: {
+      mV: 1,
+      V: 1e3,
+    },
+  },
+  CV_SCAN_RATE: {
+    type: 'number',
+    showName: 'ScanRate',
+    componentType: 'input-range',
+    range: Object.freeze({ min: 1, max: 100000 }),
+    outputRawData: (val) => {
+      return parseInt(parseFloat(val) * 100)
+    },
+    outputReadabilityData: (val) => {
+      return parseFloat(val) / 100
+    },
+    defaultValue: 10000,
+    defaultUnit: 'mV/s',
+    downloadUnit: 'mV/s',
+    unit: {
+      'mV/s': 1,
+    },
+  },
+  CA_VOLT: {
+    type: 'number',
+    showName: 'Volt (v.s. ref)',
+    componentType: 'input-range',
+    range: Object.freeze({ min: 2500, max: 50000 }),
+    outputRawData: (val, scale = 1) => {
+      return parseInt(parseFloat(val) * scale * 12.5 + 25000)
+    },
+    outputReadabilityData: (val, scale = 1) => {
+      return parseInt((parseFloat(val) - 25000) / 12.5) / scale
+    },
+    defaultValue: 25000,
+    defaultUnit: 'V',
+    downloadUnit: 'mV',
+    unit: {
+      mV: 1,
+      V: 1e3,
+    },
+  },
+  VT_MEASURE_VIN_RANGE: {
+    type: 'array',
+    showName: 'Vin Range',
+    componentType: 'input-button-toggle',
+    options: [
+      { value: 0, label: '0~2V' },
+      { value: 1, label: '-1~1V' },
+      { value: 2, label: '-2~0V' },
+      { value: 3, label: 'Auto' },
+    ],
+    range: ['1', '2', '3', 'Auto'],
+    defaultValue: 0,
+    outputRawData: (val) => {
+      const voltageInRangeArr = ['1', '2', '3', 'Auto']
+      return voltageInRangeArr.indexOf(val.toString())
+    },
+    outputReadabilityData: (idx) => {
+      const voltageInRangeArr = ['1', '2', '3', 'Auto']
+      return voltageInRangeArr[parseInt(idx)]
+    },
+  },
+  RT_VOLT_SET: {
+    type: 'number',
+    showName: 'Volt out',
+    componentType: 'input-range',
+    range: Object.freeze({ min: 2500, max: 50000 }),
+    defaultValue: 37500,
+    defaultUnit: 'V',
+    downloadUnit: 'mV',
+    unit: {
+      mV: 1,
+      V: 1e3,
+    },
+    outputRawData: (val, scale = 1) => {
+      return parseInt(parseFloat(val) * scale * 12.5 + 25000)
+    },
+    outputReadabilityData: (val, scale = 1) => {
+      return parseInt((parseFloat(val) - 25000) / 12.5) / scale
+    },
+  },
+  ADC_VALUE_I: {
+    type: 'none',
+    showName: 'Instruction',
+    componentType: 'dev-mode',
+  },

  MODE_OPTIONS: [
+    {
+      id: 7,
+      description: 'Idle',
+    },
    {
      id: 0,
      description: 'Potentiostatic Electrochemical Impedance Spectroscopy',
@@ -366,6 +549,18 @@ const EliteEIS = {
    },
    {
      id: 3,
+      description: 'VT',
+    },
+    {
+      id: 4,
+      description: 'RT',
+    },
+    {
+      id: 5,
+      description: 'Constant Frequency',
+    },
+    {
+      id: 6,
      description: 'Dev Tools',
    },
  ],
@@ -373,7 +568,11 @@ const EliteEIS = {
    0: PotentiostaticEIS,
    1: CyclicVoltammetry,
    2: Chronoamperometry,
-    3: DevMode,
+    3: VT,
+    4: RT,
+    5: ConstantFrequency,
+    6: DevMode,
+    7: Idle,
  },
 }

@@ -1,14 +1,17 @@
 import EliteEDC from './EliteEDC/index'
 import EliteEIS from './EliteEIS/index'
+import store from '@/store/index'

 // object saving library name mapping table
 const libraryNameMappingTable = {
+  EDC: EliteEDC,
  EliteZM15: EliteEDC,
  'Elite_EDC_1.4': null,
  'Elite_EDC_1.5': EliteEDC,
  'Elite_EDC_1.5re': EliteEDC,
  'Elite_EDC_1.5r2': EliteEDC,
  'Elite_BAT_1.0': EliteEDC,
+  EIS: EliteEIS,
  'Elite_EIS_1.0': EliteEIS,
  'Elite_EIS_1.1': EliteEIS,
  'Elite_EIS_MINI_1.0': EliteEIS,
@@ -53,11 +56,20 @@ const serialNumberMappingTable = {
 }

 /**
-   * return config table by libray or serial number (type)
+   * return config table by library or serial number (type)
   * @param {String | Object} type
   * @returns {Object} : config
   */
 function getConfig (type) {
+  if (type === undefined || type === null) return
+  if (typeof type === 'number') {
+    const deviceList = store.getters.getField('taskContent').deviceListNew
+    if (deviceList === undefined) return
+    const device = deviceList.find(ele => ele.memory_board === type)
+    if (device === undefined) return
+    return libraryNameMappingTable[device.library_name]
+  }
+
  // library name
  if (typeof type === 'string') {
    return libraryNameMappingTable[type]
@@ -143,7 +143,6 @@ export const getFileInfoFormat = () => {
          ADC_LEVEL: 0,
          ADC_VALUE_I: 0,
          ADC_VALUE_V: 0,
-          CHANNEL_LABEL: [],
          CURRNET_LIMIT_VALUE: 1500000,
          CYCLE_NUMBER: 0,
          Charge: 1,
@@ -1,4 +1,7 @@
+/* eslint-disable no-undef */
 import { v4 as uuidv4 } from 'uuid'
+import localforage from 'localforage'
+import { taskInfo } from '@/data/task/TaskInfo'

 const TaskTotalSettingView = false

@@ -47,7 +50,10 @@ const getDefaultChartTypeByMode = (mode, lib) => {
    const settings = {}
    settings[0] = ['EliteEIS', 6, 'EliteEIS', 5]
    settings[1] = ['Elite', 2, 'Elite', 1]
-    settings[2] = ['Time', 2, 'Elite', 2]
+    settings[2] = ['Time', 2, 'Elite', 1]
+    settings[3] = ['Time', 2, 'Elite', 2]
+    settings[4] = ['Time', 2, 'Elite', 3]
+    settings[5] = ['EliteEIS', 6, 'EliteEIS', 5]
    return settings[mode]
  } else if (lib === 'Elite_TRI') {
    // const settings = {}
@@ -141,6 +147,28 @@ const objectFilter = function (mainObject, filterFunction) {
    .reduce((cur, key) => { return Object.assign(cur, { [key]: mainObject[key] }) }, {})
 }

+const refreshCache = async () => {
+  const checkRet = await checkControllerID()
+  const checkRet1 = await checkVersion()
+  if (checkRet && checkRet1) return
+  window.location.reload(true)
+}
+
+async function checkControllerID () {
+  const controllerID = await localforage.getItem('controllerID')
+  if (taskInfo.getTaskInfo().controllerID === undefined) return true
+  if (controllerID === taskInfo.getTaskInfo().controllerID) return true
+  localforage.setItem('controllerID', taskInfo.getTaskInfo().controllerID)
+  return false
+}
+
+async function checkVersion () {
+  const version = await localforage.getItem('version')
+  if (version === COMMIT) return true
+  localforage.setItem('version', COMMIT)
+  return false
+}
+
 export default
 {
  hasCycleMode,
@@ -155,4 +183,5 @@ export default
  ChannelMaxNumber,
  getUUID,
  objectFilter,
+  refreshCache,
 }
@@ -1,4 +1,4 @@
-import { tableRouter } from '@/components/analysis/replay/toolbox/EliteReplayTable'
+import configRouter from '@/components/analysis/replay/toolbox/configTable'

 function getTime (val) {
  let label = ''
@@ -44,9 +44,10 @@ function newTooltip (controlPanel) {
      let value // value on cursor
      const param = params[0]// find coressonding parameter to the channel
      const style = 'color: ' + param.color
-      const [xTable, yTable] = tableRouter.getTable(controlPanel.x.type, controlPanel.x.funct, controlPanel.y.type, controlPanel.y.funct) // unit is store in this object
+      const xScale = configRouter.getUnitScale(controlPanel.x.axis.description)
+      const yScale = configRouter.getUnitScale(controlPanel.y.axis.description)
      // (Default) Time
-      if (controlPanel.x.type === 'Time') {
+      if (controlPanel.x.axis.description === 'Time') {
        value = getTime(parseFloat(param.value[0]))
      } else {
        value = getTime(parseFloat(param.value[2]))
@@ -54,13 +55,13 @@ function newTooltip (controlPanel) {
      tip += '<span style="color: #000000">' + 'Time: ' + value + '</span><br>'
      // (Manual) Voltage, Current, Resistance
      tip += '<span style="' + style + '">' + param.seriesName + ':<ul style = "list-style-type: disc; list-style-position: inside">'
-      if (controlPanel.x.type !== 'Time') {
-        value = parseFloat(param.value[0] / xTable.option[controlPanel.x.unit]).toFixed(3) + ' ' + controlPanel.x.unit
-        tip += '<li>' + xTable.name + ' = ' + value + '</li>'
+      if (controlPanel.x.axis.description !== 'Time') {
+        value = parseFloat(param.value[0] / xScale[controlPanel.x.unit]).toFixed(3) + ' ' + controlPanel.x.unit
+        tip += '<li>' + controlPanel.x.axis.description + ' = ' + value + '</li>'
      }
-      if (controlPanel.y.type !== 'Time') {
-        value = parseFloat(param.value[1] / yTable.option[controlPanel.y.unit]).toFixed(3) + ' ' + controlPanel.y.unit
-        tip += '<li>' + yTable.name + ' = ' + value + '</li>'
+      if (controlPanel.y.axis.description !== 'Time') {
+        value = parseFloat(param.value[1] / yScale[controlPanel.y.unit]).toFixed(3) + ' ' + controlPanel.y.unit
+        tip += '<li>' + controlPanel.y.axis.description + ' = ' + value + '</li>'
      }
      tip += '</ul></span>'

@@ -62,11 +62,11 @@ function newTooltip (realTime, dataMode) {

          tip += '<span style="' + style + '">' + param.seriesName + ':<ul style = "list-style-type: disc; list-style-position: inside">'
          if (unitTable.xName !== 'Time') {
-            value = parseFloat(param.value[0] / unitTable.xScale[unitTable.xUnit]).toFixed(3) + unitTable.xUnit
+            value = parseFloat(param.value[0] / unitTable.xScaleOption[unitTable.xUnit]).toFixed(3) + ' ' + unitTable.xUnit
            tip += '<li>' + unitTable.xName + ' = ' + value + '</li>'
          }
          if (unitTable.yName !== 'Time') {
-            value = parseFloat(param.value[1] / unitTable.yScale[unitTable.yUnit]).toFixed(3) + unitTable.yUnit
+            value = parseFloat(param.value[1] / unitTable.yScaleOption[unitTable.yUnit]).toFixed(3) + ' ' + unitTable.yUnit
            tip += '<li>' + unitTable.yName + ' = ' + value + '</li>'
          }
          tip += '</ul></span>'
@@ -1,8 +1,9 @@
 function newActionTemplate () {
  return [
-    'start',
+    // 'start',
    'stop',
-    'cycle',
+    // 'cycle',
+    'idle',
  ]
 }

@@ -45,25 +45,25 @@ function newConditionTemplate (action) {
      // },
    },
    stop: {
-      absolute_time: {
-        select: false,
-        type: 'datetime-local',
-        prefix: 'At',
-        suffix: '',
-        value: '',
-      },
-      after_project_run: {
-        select: false,
-        type: 'text',
-        prefix: 'After project run',
-        suffix: 'secs',
-        value: '',
-      },
+      // absolute_time: {
+      //   select: false,
+      //   type: 'datetime-local',
+      //   prefix: 'At',
+      //   suffix: '',
+      //   value: '',
+      // },
+      // after_project_run: {
+      //   select: false,
+      //   type: 'text',
+      //   prefix: 'After project run',
+      //   suffix: 'secs',
+      //   value: '',
+      // },
      after_task_run: {
-        select: false,
+        select: true,
        type: 'text',
-        prefix: 'After task run',
-        suffix: 'secs',
+        prefix: 'when task run for',
+        suffix: 'seconds',
        value: '',
      },
      // task: {
@@ -88,20 +88,36 @@ function newConditionTemplate (action) {
      //   value: '',
      // },
    },
-    cycle: {
-      cycle_next: {
+    // cycle: {
+    //   cycle_next: {
+    //     select: false,
+    //     type: 'text',
+    //     prefix: 'Cycle next go to:',
+    //     suffix: '',
+    //     value: '',
+    //   },
+    //   cycle: {
+    //     select: false,
+    //     type: 'text',
+    //     prefix: 'Run',
+    //     suffix: 'times',
+    //     value: '0',
+    //   },
+    // },
+    idle: {
+      after_task_run: {
        select: false,
        type: 'text',
-        prefix: 'Cycle next go to:',
-        suffix: '',
+        prefix: 'for',
+        suffix: 'secs',
        value: '',
      },
-      cycle: {
+      until_button_trigger: {
        select: false,
-        type: 'text',
-        prefix: 'Run',
-        suffix: 'times',
-        value: '0',
+        type: 'hidden',
+        prefix: 'until button press',
+        suffix: '',
+        value: '',
      },
    },
  }
@@ -1,10 +1,11 @@
-function newDevice (uuid = '', name = '', product = 0, library = 0, connectDevice = {}) {
+function newDevice (order = -1, name = '', library = '', device = null) {
  return {
+    order: order,
    name: name,
-    product: product,
    library: library,
-    uuid: uuid,
-    connectDevice: connectDevice,
+    pair: device,
+    pairStatus: -1,
+    locked: false,
    isSelect: [],
  }
 }
@@ -61,7 +61,7 @@ function newAction () {
        },
        {
          id: 11,
-          description: 'Cali ADC - test',
+          description: 'Cali Mode - test',
          select: false,
        },
        {
@@ -54,7 +54,7 @@ function newEliteZm15Parameter () {
        // },
        // {
        //   id: 11,
-        //   description: 'Cali ADC - test',
+        //   description: 'Cali Mode - test',
        // },
        // {
        //   id: 12,
@@ -3,10 +3,11 @@ function newProject (name, uuid) {
    name: name,
    desc: '',
    task: [],
-    device: [],
+    device: {},
    uuid: uuid,
    select: false,
    status: -1,
+    cycle: [],
  }
 }

@@ -1,9 +1,9 @@
-function newTask (name, uuid) {
+function newTask (name, uuid, type = '') {
  return {
    id: -1,
    name: name,
    next: [],
-    type: '',
+    type: type,
    desc: '',
    device: [],
    action: {},
@@ -162,7 +162,6 @@ function newParameterSet () {
    ADC_LEVEL: 0,
    ADC_VALUE_I: 0,
    ADC_VALUE_V: 0,
-    CHANNEL_LABEL: [],
    CURRNET_LIMIT_VALUE: 1500000,
    CYCLE_NUMBER: 0,
    Charge: 1,
@@ -231,15 +230,13 @@ function newParameterSet () {
    DPV_mode: 0, // Auto / Advanced / Engineering
    DPV_engineering_enable: 0,
    // Elite EIS
-    FREQ_START: 0,
-    FREQ_STOP: 0,
-    DELAY: 1,
-    AVERAGE_NUM: 2,
-    DC_BIAS: 0,
-    AC_AMP: 0,
-    SCALE: 0,
-    PPD: 0,
-    RTIA: 0,
+    EIS_DC_BIAS: 0,
+    EIS_AC_AMP: 0,
+    EIS_PPD: 0,
+    EIS_SCALE: 0,
+    EIS_DELAY: 1,
+    EIS_AVERAGE_NUM: 2,
+    GENERAL_HS_RTIA: 0,
    // Elite Trigger
    ACC_a_out0: 0,
    ACC_a_out0_current: 0,
@@ -48,3 +48,23 @@ $icon-font-path: './../fonts/';
  font-family: 'Roboto';
  src: url('~@/fonts/roboto/Roboto-Bold.ttf') format('truetype');
 }
+
+@font-face {
+  font-family: 'Inter-ExtraBold';
+  src: url('~@/fonts/inter/Inter-ExtraBold.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Inter-Bold';
+  src: url('~@/fonts/inter/Inter-Bold.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Inter-Regular';
+  src: url('~@/fonts/inter/Inter-Regular.ttf') format('truetype');
+}
+
+// @font-face {
+//   font-family: 'Inter';
+//   src: url('~@/fonts/inter/Inter-Regular.ttf') format('truetype');
+// }
@@ -1,5 +1,5 @@
 import types from '@/store/modules/analysis/replay/types'
-import { tableRouter } from '@/components/analysis/replay/toolbox/EliteReplayTable'
+import configRouter from '@/components/analysis/replay/toolbox/configTable'

 const typePath = types.chart

@@ -91,6 +91,30 @@ function getLegendName (sourceList) {
  return legendName
 }

+function autoTimeFormatter (val) {
+  let label = ''
+  const hour = parseInt(val / 3.6e9)
+  const minute = parseInt((val % 3.6e9) / 1000000 / 60)
+  const second = parseInt((val % 6e7) / 1000000)
+  const millisecond = parseInt((val % 1e6) / 1000)
+  if (hour > 0) {
+    label += hour + ' h '
+  }
+  if (minute > 0) {
+    label += minute + ' m '
+  }
+  if (second > 0) {
+    label += second + ' s '
+  }
+  if (millisecond > 0) {
+    label += millisecond + ' ms '
+  }
+  if (hour === 0 && minute === 0 && second === 0 && millisecond === 0) {
+    label += ' 0 ms '
+  }
+  return label
+}
+
 const chartMutations = {
  /**
   * update label formatter
@@ -166,33 +190,20 @@ const chartMutations = {
  //       return label
  //     }
  //   }
-  // tang: try here
  [typePath.updateAxisLabel]: (state, payload) => {
-    let axisLabel
-    let unitScale
    const unit = state.controlPanel[payload.axis].unit
-    const [xTable, yTable] = tableRouter.getTable(state.controlPanel.x.type, state.controlPanel.x.funct, state.controlPanel.y.type, state.controlPanel.y.funct)
-    if (payload.axis === 'x') {
-      axisLabel = state.chartData[payload.chartID].xAxis[payload.axisIndex].axisLabel
-      unitScale = xTable.option[unit]
-    } else {
-      axisLabel = state.chartData[payload.chartID].yAxis[payload.axisIndex].axisLabel
-      unitScale = yTable.option[unit]
-    }
+    const unitScale = configRouter.getUnitScale(payload.type)
+    const axisLabel = state.chartData[payload.chartID][payload.axis + 'Axis'][payload.axisIndex].axisLabel
    const _axisLabel = JSON.parse(JSON.stringify(axisLabel))
    if (unit === 'auto') {
-      _axisLabel.formatter = tableRouter.autoTimeFormatter
+      _axisLabel.formatter = autoTimeFormatter
    } else {
      _axisLabel.formatter = function (val) {
-        const label = (val / unitScale).toFixed(3) + unit
+        const label = (val / unitScale[unit]).toFixed(3) + unit
        return label
      }
    }
-    if (payload.axis === 'x') {
-      state.chartData[payload.chartID].xAxis[payload.axisIndex].axisLabel = _axisLabel
-    } else {
-      state.chartData[payload.chartID].yAxis[payload.axisIndex].axisLabel = _axisLabel
-    }
+    state.chartData[payload.chartID][payload.axis + 'Axis'][payload.axisIndex].axisLabel = _axisLabel
  },

  /**
@@ -37,17 +37,16 @@ function newState () {
    isLockDataZoom: false,
    controlPanel: {
      x: {
-        type: null,
-        channel: null,
+        axis: null,
        unit: null,
        funct: null,
      },
      y: {
-        type: null,
-        channel: null,
+        axis: null,
        unit: null,
        funct: null,
      },
+      FSM: {},
    },
  }
 }
@@ -60,7 +60,7 @@ const exportActs = {
      const parameterValue = [modeObj.name]
      const outputValue = []
      Object.keys(meta.parameter_set).sort().forEach(key => {
-        if (!['BLE_WRITE', 'CHANNEL', 'CHANNEL_LABEL'].includes(key)) {
+        if (!['BLE_WRITE', 'CHANNEL'].includes(key)) {
          parameterName.push(key)
          parameterValue.push(meta.parameter_set[key])
        }
@@ -1,6 +1,8 @@
 import types from '@/store/modules/project/types'
 import newProject from '@/factories/project/projectFactory'
+import newDevice from '@/factories/project/deviceFactory'
 import { v4 as uuidv4 } from 'uuid'
+import Vue from 'vue'

 const typePath = types.project

@@ -26,6 +28,14 @@ const projectActs = {
   * @param {}
   */
  [typePath.init]: async ({ state, getters, commit }, payload) => {
+    state.projectSelectIndex = -1
+    state.taskSelectKey = ''
+    state.deviceSelectKey = ''
+    state.lockMode = false
+    state.taskViewPanel = {
+      show: false,
+      type: '',
+    }
  },
  /**
   * create project
@@ -72,7 +82,6 @@ const projectActs = {
    } else {
      state.projectLibrary = state.projectList[payload.index].device[0]?.library
    }
-    // state.projectLibrary = state.projectList[payload.index].device[0]?.library.value
  },

  /**
@@ -82,6 +91,7 @@ const projectActs = {
 */
  [typePath.delete]: async ({ state, getters, commit }, payload) => {
    const { project, index, api } = payload
+    if (project === undefined) return
    await api.project.update(project.id, { deleted: true })
    await api.project.del()
    state.projectList.splice(index, 1)
@@ -89,22 +99,53 @@ const projectActs = {
    return true
  },

+  /**
+ * delete device
+ *
+ * @param {number} deviceIndex
+ */
+  [typePath.copy]: async ({ state, getters, commit }, payload) => {
+    const { project, api } = payload
+    if (project === undefined) return
+    const copyProject = JSON.parse(JSON.stringify(project))
+
+    copyProject.name += ' copy'
+    copyProject.uuid = uuidv4()
+    // create project need to remove
+    delete copyProject.id
+
+    const response = await api.project.create(copyProject)
+    copyProject.id = response.data.id
+    state.projectList.push(copyProject)
+  },
+
  /**
 * register device
 *
 * @param {object} device
 */
-  [typePath.addDevice]: async ({ state, getters, commit }, payload) => {
-    const { device } = payload
-    // console.log(getters.getSelectProject.device)
-    let flag = false
-    for (const eachDevice of getters.getSelectProject.device) {
-      if (device.connectDevice.mac_address === eachDevice.connectDevice.mac_address) {
-        flag = true
-        break
-      }
-    }
-    if (!flag) getters.getSelectProject.device.push(device)
+  [typePath.appendDevice]: async ({ state, getters, commit }, payload) => {
+    const { key, device } = payload
+    Vue.set(getters.getSelectProject.device, key, device)
+    return true
+  },
+
+  /**
+ * create device
+ *
+ * @param {object} device
+ */
+  [typePath.createDevice]: async ({ state, getters, commit, dispatch }, payload) => {
+    const { name, library, pair, pairStatus, order } = payload
+    const uuid = uuidv4()
+    const device = newDevice()
+    device.name = name
+    device.library = library
+    device.pair = pair
+    device.order = order
+    if (pairStatus) device.pairStatus = pairStatus
+    await dispatch(typePath.appendDevice, { key: uuid, device: device })
+    return true
  },

  /**
@@ -127,20 +168,95 @@ const projectActs = {
  [typePath.setDevice]: async ({ state, getters, commit }, payload) => {
    const { device, index } = payload
    const deviceList = getters.getSelectProject.device
-    deviceList[index] = device
+    if (index) {
+      deviceList[index] = device
+      return true
+    }
+    deviceList.push(device)
    return true
  },

  /**
 * delete device
 *
- * @param {number} deviceIndex
+ * @param {string} deviceKey
+ * @param {string} macAddress
 */
-  [typePath.deleteDevice]: async ({ state, getters, commit }, payload) => {
-    const { deviceIndex } = payload
-    getters.getSelectProject.device.splice(deviceIndex, 1)
+  [typePath.deleteDevice]: async ({ state, getters, commit, dispatch }, payload) => {
+    const { deviceKey } = payload
+    // delete project register device
+    if (deviceKey) {
+      Vue.delete(getters.getSelectProject.device, deviceKey)
+    }
+    // delete task device
+    await dispatch('deleteDeviceTask', { deviceKey: deviceKey })
    return true
  },
+
+  /**
+ *  find devices that is connected but not register in project
+ *
+ * @param {string} library
+ */
+  [typePath.checkNotRegisterDevice]: async ({ state, getters, commit }, payload) => {
+    const library = payload.library
+    const deviceList = []
+    const connectedDevices = state.deviceConnectList
+    const registeredDevices = getters.getSelectProject?.device
+
+    // if there is not connect device then return
+    if (connectedDevices.length === 0) return deviceList
+    // if there is registered device, need to remove cause duplicate device
+    if (registeredDevices) {
+      for (const device of connectedDevices) {
+        if (Object.values(registeredDevices).findIndex(ele => {
+          return ele.pair === device.mac_address
+        }) === -1) {
+          // if no metion which library
+          if (library === undefined) {
+            deviceList.push({ macAddress: device.mac_address, library: device.library_name })
+          }
+          // if library is assign then need to be same library
+          if (library && device.library_name.includes(library)) {
+            deviceList.push({ macAddress: device.mac_address, library: device.library_name })
+          }
+        }
+      }
+    }
+    return deviceList
+  },
+
+  /**
+   *  find devices that is register in project but not connected
+   *
+   * @param {number} deviceIndex
+   */
+  [typePath.checkPairDeviceExist]: async ({ state, getters, commit, dispatch }, payload) => {
+    const deviceList = getters.getSelectProject.device
+    // check project each device is connected(exist) or not
+    for (const device in deviceList) {
+      const _device = deviceList[device]
+      _device.pairStatus = 0
+      let deviceExist = false
+      for (const connectDevice of state.deviceConnectList) {
+        if (deviceList[device].pair === connectDevice.mac_address) {
+          _device.pairStatus = 1
+          deviceExist = true
+        }
+      }
+      // if not exist then check if there is connected device is idle and not register in project
+      if (deviceExist === false) {
+        const passDevice = await dispatch(typePath.checkNotRegisterDevice, { library: deviceList[device].library })
+        if (passDevice.length > 0) {
+          _device.pairStatus = 1
+          deviceList[device].pair = passDevice[0].macAddress
+        }
+        if (passDevice.length === 0) {
+          _device.pairStatus = 0
+        }
+      }
+    }
+  },
 }

 export default projectActs
@@ -1,6 +1,8 @@
 import types from '@/store/modules/project/types'
 import newTask from '@/factories/project/taskFactory'
 import { v4 as uuidv4 } from 'uuid'
+import global from '@/data/global/global.js'
+import Vue from 'vue'

 const typePath = types.task

@@ -17,33 +19,158 @@ const taskActs = {
   *
   * @param {}
   */
-  [typePath.create]: async ({ state, getters, commit }, payload) => {
+  [typePath.create]: async ({ state, getters, commit, dispatch }, payload) => {
    const selectProject = getters.getSelectProject
    const name = `task${(selectProject.task.length + 1)}`
    const uuid = uuidv4()
    const task = newTask(name, uuid)

-    const prevTask = getters.getTask(selectProject.task.length - 1)
-    prevTask && prevTask.next.push(uuid)
+    // check device needs to add auto
+    const deviceArray = Object.keys(getters.getSelectProject.device)
+    if (deviceArray.length === 1) {
+      task.device.push(deviceArray[0])
+      await dispatch(typePath.createActionConditionPair, {
+        device: deviceArray[0],
+        action: 'start',
+        condition: {
+          type: 'previous_task_done',
+          comparsion: 'equal',
+          value: '',
+        },
+        task: task,
+      })
+    }

-    selectProject.task.push(task)
+    await dispatch(typePath.insert, { project: selectProject, task: task, index: selectProject.task.length })
  },

-  /**
-   * select task
-   *
-   * @param {}
-   */
-  [typePath.select]: async ({ state, getters, commit }, payload) => {
+  [typePath.createCycle]: async ({ state, getters, commit, dispatch }, payload) => {
+    const { cycleInfo } = payload
+    const selectProject = getters.getSelectProject
+    const start = cycleInfo.start.id
+    const end = cycleInfo.end.id + 1
+    const max = cycleInfo.cycle
+    const useID = cycleInfo.useID
+    const id = cycleInfo.id
+    const count = 1
+    const cycleLength = selectProject.cycle.length + 1
+    const name = 'Loop' + cycleLength
+
+    // create start & end task
+    const taskStartUUID = global.getUUID()
+    const taskEndUUID = global.getUUID()
+    const taskStart = newTask(name, taskStartUUID, 'cycle')
+    const taskEnd = newTask(name, taskEndUUID, 'cycle')
+
+    // create action
+    const fakeStartActionUUID = global.getUUID()
+    const fakeAction = await dispatch(typePath.createAction, { uuid: fakeStartActionUUID, action: 'cycle', target: null })
+
+    // create start condition
+    const conditionUUID = global.getUUID()
+    const newCondition = await dispatch(typePath.createCondition, { uuid: conditionUUID, condition: 'previous_task_done', compOp: 'equal', value: '' })
+    taskStart.condition = Object.assign({}, taskStart.condition, newCondition)
+    taskEnd.condition = Object.assign({}, taskEnd.condition, newCondition)
+
+    // create stop condition
+    const conditionUUID1 = global.getUUID()
+    let newCondition1
+    if (!useID) {
+      newCondition1 = await dispatch(typePath.createCondition, { uuid: conditionUUID1, condition: 'after_task_run', compOp: 'equal', value: '0' })
+    } else {
+      newCondition1 = await dispatch(typePath.createCondition, { uuid: conditionUUID1, condition: 'until_button_trigger', compOp: 'equal', value: '' })
+    }
+
+    taskStart.condition = Object.assign({}, taskStart.condition, newCondition1)
+
+    const conditionUUID2 = global.getUUID()
+    const newCondition2 = await dispatch(typePath.createCondition, { uuid: conditionUUID2, condition: 'after_task_run', compOp: 'equal', value: '0' })
+    taskEnd.condition = Object.assign({}, taskEnd.condition, newCondition2)
+
+    // assign action & condition
+    fakeAction[fakeStartActionUUID].condition.push(conditionUUID)
+    fakeAction[fakeStartActionUUID].condition.push(conditionUUID1)
+    fakeAction[fakeStartActionUUID].condition.push(conditionUUID2)
+    taskStart.action = Object.assign({}, taskStart.action, fakeAction)
+    taskEnd.action = Object.assign({}, taskEnd.action, fakeAction)
+
+    taskStart.next.push(await dispatch(typePath.get, { project: selectProject, index: start, attribute: 'uuid' }))
+
+    await dispatch(typePath.insert, { project: selectProject, task: taskEnd, index: end })
+    await dispatch(typePath.insert, { project: selectProject, task: taskStart, index: start })
+    await dispatch(typePath.rearrange, { project: selectProject })
+
+    selectProject.cycle.push({
+      id: id,
+      name: name,
+      range: [taskStartUUID, taskEndUUID],
+      max: max,
+      count: count,
+      useID: useID,
+    })
  },

-  /**
-   * save task
-   *
-   * @param {}
-   */
-  [typePath.save]: async ({ state, getters, commit }, payload) => {
+  [typePath.insert]: async ({ state, getters, commit }, payload) => {
+    const { project, task, index } = payload
+    project.task.splice(index, 0, task)
+    if (index !== 0) {
+      project.task[index - 1].next.length = 0
+      project.task[index - 1].next.push(task.uuid)
+    }
+    if (index !== project.task.length - 1) {
+      task.next.length = 0
+      task.next.push(project.task[index + 1].uuid)
+    }
+  },

+  [typePath.copy]: async ({ state, getters, commit, dispatch }, payload) => {
+    const { project, index } = payload
+    const copyTask = JSON.parse(JSON.stringify(project.task[index]))
+    copyTask.name += '-copy'
+    copyTask.uuid = uuidv4()
+    project.task.push(copyTask)
+    await dispatch(typePath.rearrange, { project: project })
+  },
+
+  [typePath.get]: async ({ state, getters, commit }, payload) => {
+    const { project, index, attribute } = payload
+    if (attribute) return project.task[index][attribute]
+    return project.task[index]
+  },
+
+  [typePath.getIndex]: ({ state, getters, commit }, payload) => {
+    const { project, uuid } = payload
+    return project.task.findIndex(ele => ele.uuid === uuid)
+  },
+
+  [typePath.swap]: async ({ state, getters, commit, dispatch }, payload) => {
+    const { project, originIndex, newIndex } = payload
+
+    // if swap to higher index insert first then delete
+    if (originIndex < newIndex) {
+      const task = project.task[originIndex]
+      project.task.splice(newIndex, 0, task)
+      await dispatch(typePath.delete, { project: project, index: originIndex })
+    }
+    // if swap to lower index delete first then insert
+    if (originIndex > newIndex) {
+      const task = project.task[originIndex]
+      await dispatch(typePath.delete, { project: project, index: originIndex })
+      project.task.splice(newIndex, 0, task)
+    }
+
+    await dispatch(typePath.rearrange, { project: project })
+    return true
+  },
+
+  [typePath.rearrange]: async ({ state, getters, commit, dispatch }, payload) => {
+    const { project } = payload
+    project.task = project.task.filter(ele => ele !== undefined)
+    for (const idx in project.task) {
+      project.task[idx].next.length = 0
+      if (Number(idx) === Number(project.task.length - 1)) return
+      project.task[idx].next.push(project.task[Number(idx) + 1].uuid)
+    }
  },

  /**
@@ -51,9 +178,58 @@ const taskActs = {
   *
   * @param {}
   */
-  [typePath.delete]: async ({ state, getters, commit }, payload) => {
-    const selectProject = getters.getSelectProject
-    selectProject.task.splice(payload.index, 1)
+  [typePath.delete]: async ({ state, getters, commit, dispatch }, payload) => {
+    const { project, index } = payload
+    project.task.splice(index, 1)
+    await dispatch(typePath.rearrange, { project: project })
+  },
+
+  /**
+   * delete task
+   *
+   * @param {}
+   */
+  [typePath.deleteDevice]: async ({ state, getters, commit, dispatch }, payload) => {
+    const { deviceKey, onlySelectTask } = payload
+    if (onlySelectTask !== undefined) {
+      const task = getters.getSelectTask
+      task.device = task.device.filter(ele => ele !== deviceKey)
+      // delete task action & condition
+      for (const [key, value] of Object.entries(task.action)) {
+        if (value.target === deviceKey) {
+          for (const condition of value.condition) {
+            Vue.delete(task.action, condition)
+          }
+          Vue.delete(task.action, key)
+        }
+      }
+      // delete task parameter
+      for (const [key, value] of Object.entries(task.parameter_set)) {
+        if (value.target === deviceKey) {
+          Vue.delete(task.parameter_set, key)
+        }
+      }
+      return true
+    }
+    for (const task of getters.getSelectProject.task) {
+      // delete task device
+      task.device = task.device.filter(ele => ele !== deviceKey)
+      // delete task action & condition
+      for (const [key, value] of Object.entries(task.action)) {
+        if (value.target === deviceKey) {
+          for (const condition of value.condition) {
+            Vue.delete(task.action, condition)
+          }
+          Vue.delete(task.action, key)
+        }
+      }
+      // delete task parameter
+      for (const [key, value] of Object.entries(task.parameter_set)) {
+        if (value.target === deviceKey) {
+          Vue.delete(task.parameter_set, key)
+        }
+      }
+    }
  },

  /**
@@ -62,7 +238,7 @@ const taskActs = {
   * @param {}
   */
  [typePath.setCondition]: async ({ state, getters, commit }, payload) => {
-    const task = getters.getSelectTask
+    const task = payload.task ? payload.task : getters.getSelectTask
    task.condition = Object.assign({}, task.condition, payload.condition)
  },

@@ -72,7 +248,7 @@ const taskActs = {
   * @param {}
   */
  [typePath.setAction]: async ({ state, getters, commit }, payload) => {
-    const task = getters.getSelectTask
+    const task = payload.task ? payload.task : getters.getSelectTask
    task.action = Object.assign({}, task.action, payload.action)
  },

@@ -83,12 +259,9 @@ const taskActs = {
   */
  [typePath.setCycle]: async ({ state, getters, commit }, payload) => {
    const task = getters.getSelectTask
-    // task.cycle = Object.assign({}, task.cycle, payload.cycle)
-    // task.cycle_next = Object.assign({}, task.cycle_next, payload.cycle_next)
    task.cycle = payload.cycle
    task.cycle_next = payload.cycle_next
    task.cycle_next_uuid = payload.cycle_next_uuid
-    // console.log(task, task.cycle, task.cycle_next, task.cycle_next_uuid)
  },

  /**
@@ -113,6 +286,41 @@ const taskActs = {
    }
    task.parameter_set = Object.assign({}, task.parameter_set)
  },
+  [typePath.createActionConditionPair]: async ({ state, getters, commit, dispatch }, payload) => {
+    const { device, action, condition, task } = payload
+    const conditionUUID = global.getUUID()
+    const _condition = await dispatch(typePath.createCondition, { uuid: conditionUUID, condition: condition.type, compOp: condition.comparsion, value: condition.value })
+    await dispatch(typePath.setCondition, { task: task, condition: _condition })
+    const actionUUID = global.getUUID()
+    const _action = await dispatch(typePath.createAction, { uuid: actionUUID, action: action, target: device, condition: conditionUUID })
+    await dispatch(typePath.setAction, { task: task, action: _action })
+  },
+
+  [typePath.createCondition]: async ({ state, getters, commit }, payload) => {
+    const { uuid, condition, compOp, value } = payload
+    return {
+      [uuid]: {
+        type: condition,
+        comparsion: compOp,
+        value: value,
+      },
+    }
+  },
+  [typePath.createAction]: async ({ state, getters, commit }, payload) => {
+    const { uuid, action, target, condition } = payload
+    const conditionArray = []
+    if (condition !== undefined) {
+      if (typeof condition === 'string') conditionArray.push(condition)
+      if (typeof condition === 'object') conditionArray.push(...condition)
+    }
+    return {
+      [uuid]: {
+        type: action,
+        target: target,
+        condition: conditionArray,
+      },
+    }
+  },
 }

 export default taskActs
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
peterlu14	6f4d96fb17	[update] project manager filter & table header	2022-11-21 17:44:33 +08:00
peterlu14	3ad822bde1	[update] open cf mode	2022-11-21 16:48:29 +08:00
peterlu14	2b2dd50f41	[update] modify project menu device and table font & fix draggable bug	2022-11-21 16:45:44 +08:00
peterlu14	ca57978763	[update] device not pair coor change & draggable cannot drag while input & table header & cell font-size change	2022-11-21 15:40:35 +08:00
peterlu14	6c41341392	[update] fix getConfigTable & getDevice null error	2022-11-21 11:50:30 +08:00
peterlu14	4a5f07da18	[update] fix project parameter refs init problem	2022-11-21 11:49:12 +08:00
peterlu14	17492ccc98	[update] Vue use v-tooltip	2022-11-18 16:57:11 +08:00
peterlu14	e5603cd80e	[update] minor modify to project typography	2022-11-18 15:49:07 +08:00
peterlu14	99898dc862	[update] thead sticky top	2022-11-18 15:44:45 +08:00
peterlu14	66bdf13955	[update] display menu in flexbox layout	2022-11-18 14:22:05 +08:00
peterlu14	89ffad6fbe	[update] fix img src, project manager ui change	2022-11-18 13:25:59 +08:00
peterlu14	079ba2023d	[update] img resource	2022-11-18 13:21:57 +08:00
peterlu14	9158697bdc	[update] device text change place	2022-11-17 16:05:35 +08:00
peterlu14	0b20104133	[update] hover show parameter & add task bottom & table font alter	2022-11-17 16:05:16 +08:00
peterlu14	90f6090edb	Merge branch 'release/v1.3.9/scheduler_device' into dev/scheduler_cf	2022-11-16 17:34:41 +08:00
peterlu14	c51c723e5f	[update] chart table add new pair T_Impedance, T_Phase, T_Current	2022-11-16 15:41:32 +08:00
peterlu14	e38df250e2	[update] fix cf_mode channel set index error	2022-11-16 15:40:36 +08:00
peterlu14	06d52cabea	Merge remote-tracking branch 'origin/dev/cf_mode' into dev/scheduler_cf	2022-11-16 13:47:21 +08:00
ROY	11305159a9	[update] new cf mode, but hide	2022-11-16 11:54:17 +08:00
peterlu14	aef2a48b78	[update] menu font & device font fix	2022-11-16 10:54:00 +08:00
peterlu14	036f4b664e	[update] project cycle height 50 px & fix task add show	2022-11-15 17:27:12 +08:00
peterlu14	45653ba7cb	[update] fix draggable	2022-11-15 16:59:01 +08:00
ROY	504f4dc32c	[update] clean up eis parameter	2022-11-15 16:08:31 +08:00
ROY	28f17e7280	[update] remove ADC_LEVEL_V_IN_15 parameter	2022-11-15 16:08:26 +08:00
ROY	18ba482f3d	[update] update VT_MEASURE_VIN_RANGE parameter	2022-11-15 16:03:32 +08:00
ROY	e82660bcbe	[update] update CA_VOLT parameter	2022-11-15 16:01:07 +08:00
ROY	2441996848	[update] update CV_SCAN_RATE parameter	2022-11-15 15:51:28 +08:00
ROY	cabb38be6f	[update] update CV_E2 parameter	2022-11-15 15:47:59 +08:00
ROY	8b8094ce3e	[update] update CV_E1 parameter	2022-11-15 15:44:33 +08:00
ROY	88ca4b4c62	[update] update CV_E_INITIAL parameter	2022-11-15 15:42:40 +08:00
peterlu14	b45f731f1d	[update] project only one device & auto add start	2022-11-15 14:32:23 +08:00
peterlu14	7946ada265	[update] default parameter bug fix	2022-11-15 13:14:34 +08:00
peterlu14	90c722a7c3	[update] project ui & cursor pointer	2022-11-15 13:14:02 +08:00
peterlu14	d6712139f3	[update] add working mode Idle	2022-11-15 11:53:48 +08:00
peterlu14	1d20f9c207	[update] action&condition into start stop & create start in select device & project table ui optimize & add taskAct method	2022-11-15 11:50:23 +08:00
peterlu14	3e3fe59bd2	[update] add start & stop icon and recover menu function	2022-11-15 11:42:57 +08:00
ROY	d9ef45a5a2	[update] new lprtia function	2022-11-10 14:11:37 +08:00
peterlu14	9495a17d2d	[update] remove folder	2022-11-10 11:43:07 +08:00
peterlu14	120a7d45b1	[update] remove EIS device battery	2022-11-10 11:42:44 +08:00
peterlu14	d8bc49a100	[update] project menu UI update	2022-11-09 13:49:39 +08:00
ROY	c4417a6458	[update] update GENERAL_HS_RTIA parameter	2022-11-08 16:13:46 +08:00
ROY	91c02007bc	[update] update EIS_AVERAGE_NUM parameter	2022-11-08 15:58:32 +08:00
ROY	023de635fa	[update] update EIS_DELAY parameter	2022-11-08 15:45:13 +08:00
ROY	4b410bfb3a	[update] update EIS_SCALE parameter	2022-11-08 15:36:40 +08:00
ROY	2c205af6dd	[update] update EIS_PPD parameter	2022-11-08 14:49:40 +08:00
ROY	e517e9f796	[update] update EIS_AC_AMP parameter	2022-11-08 14:24:41 +08:00
ROY	a5a590c007	[update] update EIS_DC_BIAS parameter	2022-11-08 14:18:05 +08:00
ROY	3dae7e644a	[update] update EIS_FREQ parameter	2022-11-08 12:07:35 +08:00
ROY	768168c614	[update] delete FREQ_START & FREQ_STOP parameter	2022-11-08 11:05:56 +08:00
ROY	0a4635d648	[update] delete CHANNEL_LABEL parameter	2022-11-08 10:39:16 +08:00
ROY	3eb0e66b01	[update] update RT mode	2022-10-27 17:42:47 +08:00
peterlu14	a44f865d2d	[update] disable RT Mode	2022-10-26 13:45:55 +08:00
peterlu14	46cf78cd55	[update] hide scheduler	2022-10-26 10:08:36 +08:00
ROY	200a8d25fa	[update] EIS RT Mode	2022-10-25 13:32:37 +08:00
peterlu14	b5908f8815	[update] EIS RT Mode	2022-10-25 10:16:37 +08:00
peterlu14	abf5b0e54b	[update] projectTable UI	2022-10-18 11:51:10 +08:00
peterlu14	9637a5365e	[update] remove some condition & add device SelectKey in condition & project table UI	2022-10-18 11:42:20 +08:00
peterlu14	2c1e247178	[update&debug] fix rearrange problem & add copy function & auto pair device in task	2022-10-18 11:38:19 +08:00
peterlu14	dbbf30623d	[update] task device setting big update & auto register connect device	2022-10-14 17:43:11 +08:00
peterlu14	eeb43694b1	[update] add order property in device	2022-10-14 16:03:42 +08:00
peterlu14	4054a113d0	[update] remove device hide modal	2022-10-14 16:01:15 +08:00
peterlu14	6bcf4b100f	[update] remove add device button	2022-10-14 11:10:26 +08:00
peterlu14	a2237aeb0a	[update] add detect function	2022-10-14 10:27:55 +08:00
peterlu14	2972fa365c	[update] remove old auto get device	2022-10-14 10:14:12 +08:00
peterlu14	75d71099ed	[update] device need to pair to run scheduler	2022-10-14 10:13:28 +08:00
peterlu14	2ab96c3bf6	[update] scheduler device big update from array to object & auto pairing	2022-10-14 10:11:17 +08:00
peterlu14	a088b940e6	[update] fix EIS DELAY range & add library EDC EIS	2022-10-14 10:06:13 +08:00
peterlu14	59ce90d348	[update] temp fix many project message error	2022-10-11 10:48:40 +08:00
peterlu14	01f1cf28d5	[update] temp fix project table element key duplicate error	2022-10-11 10:48:08 +08:00
peterlu14	b826442672	[update] fix project copy	2022-10-11 10:47:27 +08:00
ROY	0c385ee212	[update] remove LEVEL_V button and update V_RANGE label name	2022-10-06 16:54:42 +08:00
peterlu14	15eeb513a6	[debug] fix eis replay parameter & eis realtime chart fix	2022-10-05 18:09:11 +08:00
peterlu14	f5f30cbe61	[debug] eis realtime chart source and cache problem	2022-10-05 17:01:58 +08:00
peterlu14	f7dbf43e77	[update] project enable Elite_EDC & Elite_EIS	2022-10-05 12:02:28 +08:00
peterlu14	dba675254d	[update] FREQ 13333333	2022-10-05 12:00:28 +08:00
peterlu14	7635f991c1	[update] vt add parameter MEASURE_VIN_RANGE	2022-10-05 11:21:49 +08:00
peterlu14	476a1699a5	[update] add VT_MODE	2022-10-05 10:59:50 +08:00
peterlu14	8131a19e97	[debug] fix copy id	2022-10-04 13:56:47 +08:00
peterlu14	c310cd4253	[update] check action target when create fake action	2022-10-04 13:56:27 +08:00
peterlu14	6c80390917	[debug] dismiss type error	2022-10-04 13:55:00 +08:00
peterlu14	ff0da52db8	[update] remove cycle & text ui & add -> +	2022-09-30 11:37:46 +08:00
peterlu14	4074af8b4f	Merge remote-tracking branch 'origin/dev/debug_cp' into release/v1.3.8/cycle	2022-09-30 10:59:53 +08:00
peterlu14	562632e417	[update] replay new page & modal outside-dismiss	2022-09-30 10:42:07 +08:00
peterlu14	782efbf366	[update] project add cycle	2022-09-30 10:40:31 +08:00
ROY	6a1a31d6e3	[update] debug cp	2022-09-20 18:49:49 +08:00
ROY	86c7f2b30d	[update] update eis AC_AMP fomula	2022-09-16 10:43:39 +08:00
ROY	97de1cf4e3	[update] update eis AC_AMP & FREQ fomula	2022-09-14 18:22:03 +08:00
peterlu14	91e100319f	[update] project parameter duplicate remove	2022-09-14 18:19:29 +08:00
peterlu14	ca3a525332	[update] add slide-out	2022-09-07 09:46:53 +08:00
peterlu14	9d77ba9c01	[update] add fake start action at start & add new action idle & add click css	2022-09-06 19:43:19 +08:00
peterlu14	53ba6ee486	[update] battery 1s -> 1min & Potential force direct to V	2022-09-05 14:48:29 +08:00
peterlu14	cb42635f6a	Merge remote-tracking branch 'origin/dev/battery_display' into release/v1.3.6/battery	2022-08-31 10:20:30 +08:00
peterlu14	d43de5927f	Merge remote-tracking branch 'origin/dev/sync-parameter' into release/v1.3.5/cached	2022-08-31 10:08:45 +08:00
sss28072637	05ecd69ecd	[update] update battery icon & add low battery warning	2022-08-30 18:16:31 +08:00
peterlu14	062938dd0b	[update] refresh cache	2022-08-30 15:31:06 +08:00
peterlu14	5e3eb47614	[update] area display fix	2022-08-29 16:48:05 +08:00
peterlu14	1b682421fd	[debug] get legend name fail & capture multitimes	2022-08-29 16:36:29 +08:00
peterlu14	aac74382ad	Merge remote-tracking branch 'origin/dev/EISReplayFix' into release/v1.3.4/battery&replayEIS	2022-08-29 16:04:11 +08:00
nthu1080112244	0b005638f6	[debug] fix chartAct device undefined	2022-08-29 16:03:43 +08:00
nthu1080112244	f5604b4ad4	[debug] fix typing error	2022-08-29 15:51:03 +08:00
peterlu14	5d772b9d5b	Merge remote-tracking branch 'origin/dev/EISReplayFix' into release/v1.3.4/battery&replayEIS	2022-08-29 15:50:26 +08:00
nthu1080112244	857184392c	[update] brush delay = 0	2022-08-29 15:46:51 +08:00
nthu1080112244	6c1304bcea	[debug] fix specific integral key in bug	2022-08-29 11:40:49 +08:00
nthu1080112244	bcdaecca77	[debug] resolve replay cycle select bug	2022-08-29 11:13:19 +08:00
nthu1080112244	a5330c71dc	[debug] fix some typing error	2022-08-29 10:12:41 +08:00
nthu1080112244	a8b6937b72	[update] new setting table, new replay layout	2022-08-26 16:53:23 +08:00
sss28072637	e69e42ac63	[update] adjust the formula of calculating battery, add battery icon & percentage	2022-08-24 17:55:38 +08:00
peterlu14	01f0f45bdd	[update] sg_filter scale with sample rate & volt step	2022-08-24 13:27:25 +08:00
ROY	0719284f24	[update] fix VOLT_VSCAN scale	2022-08-23 11:37:02 +08:00
sss28072637	0cecf9abec	[update] add battery display	2022-08-22 18:07:06 +08:00
nthu1080112244	93a0ea9b24	Merge branch 'release/v1.3.2/replay_new_function' into dev/EISReplayFix	2022-08-22 17:25:47 +08:00
nthu1080112244	0a7ecfb060	[debug] add comment	2022-08-22 16:40:34 +08:00
nthu1080112244	7642e41d58	[debug] remove annoying console log	2022-08-22 16:16:21 +08:00
nthu1080112244	a0050047d0	[debug] captured chart fix	2022-08-22 16:12:02 +08:00
peterlu14	d3fcf78b45	[refresh] realtime parameter refresh	2022-08-22 11:40:05 +08:00
peterlu14	0d279cb0bf	[debug] fix capture data clear problem	2022-08-22 11:38:40 +08:00
peterlu14	44989dd7f7	[debug] fix scheduler parameter not refresh & default MODE = 0	2022-08-22 11:37:56 +08:00
nthu1080112244	07c38de627	[fix] fix real time display	2022-08-22 10:15:12 +08:00
peterlu14	e4c2018e12	Merge remote-tracking branch 'origin/dev/scheduler-function' into release/v1.3.3/merge_scheduler	2022-08-19 18:56:45 +08:00
peterlu14	a0fea97ca7	[update] differential	2022-08-19 18:56:12 +08:00
nthu1080112244	347e1b647f	[update] fix add chart option & display bar	2022-08-19 18:16:29 +08:00
peterlu14	82f46030a3	[update] fix realtime unit function type	2022-08-19 16:17:57 +08:00
peterlu14	8052dfcbf4	[update] file table fix	2022-08-19 15:55:14 +08:00
nthu1080112244	3030b46a64	Merge remote-tracking branch 'origin/dev/source_channel' into dev/repalyControlPanelNew	2022-08-19 14:28:21 +08:00
unknown	eca51be1f8	[update] get source from different mode (some bugs need to be fixed)	2022-08-18 18:21:44 +08:00
unknown	b560670ada	Merge remote-tracking branch 'origin/release/v1.3.2/replay_new_function-hide_project' into dev/drag_task	2022-08-18 14:59:16 +08:00
nthu1080112244	bdd9113b80	[update] real time grid setting	2022-08-17 17:58:58 +08:00
peterlu14	56559738c4	Revert "[update] realtime chart default unit determine by mode now" This reverts commit `fc269f972a`.	2022-08-17 15:37:06 +08:00
peterlu14	7639d495b9	Merge branch 'release/v1.3.2/replay_new_function' into release/v1.3.2/replay_new_function-hide_project	2022-08-17 15:23:26 +08:00
ROY	99f51f4307	Merge remote-tracking branch 'origin/release/v1.3.2/replay_new_function' into dev/sync-parameter	2022-08-17 10:54:29 +08:00
peterlu14	001f7139eb	[update] fix file table	2022-08-16 20:27:35 +08:00
peterlu14	27bb612bd8	[update] add eis global mode	2022-08-16 19:51:35 +08:00
peterlu14	f5ce74f308	[update] EIS add VOLT_VSCAN and time_duration	2022-08-16 19:51:31 +08:00
ROY	dec4ad1093	[update] realtime nA support mode [10, 11]	2022-08-16 11:32:14 +08:00
ROY	e2735f7782	Merge remote-tracking branch 'origin/release/v1.3.2/replay_new_function' into dev/sync-parameter	2022-08-16 11:30:50 +08:00
nthu1080112244	e3267fdb3a	[update] new version control panel	2022-08-16 10:10:46 +08:00
JayC319	39bb196db7	message	2022-08-15 17:51:58 +08:00
JayC319	df34998b51	Merge remote-tracking branch 'origin/release/v1.3.2/replay_new_function' into dev/sync-parameter	2022-08-15 17:44:33 +08:00
peterlu14	e2e0b5609a	[update] add -sync-parameter	2022-08-09 14:18:38 +08:00