- Device list order by mem

-Change device button position
- Fix date block style
2024-08-14 13:29:22 +08:00 · 2024-08-12 09:51:15 +08:00 · 2024-04-17 18:15:10 +08:00 · 2024-04-17 18:13:59 +08:00 · 2024-04-16 15:49:15 +08:00 · 2024-04-12 17:33:47 +08:00
122 changed files with 5330 additions and 1247 deletions
@@ -17021,13 +17021,29 @@
      "integrity": "sha512-VPNCOTZK6WZy73lcWc+R7IW1uaBFEO3/Csrs5CzWVOdvE30V8Y1+BE/BtTlcEmeDGx0eqdE7bSCg55Jj37PMJg=="
    },
    "v-tooltip": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/v-tooltip/-/v-tooltip-2.0.3.tgz",
-      "integrity": "sha512-KZZY3s+dcijzZmV2qoDH4rYmjMZ9YKGBVoUznZKQX0e3c2GjpJm3Sldzz8HHH2Ud87JqhZPB4+4gyKZ6m98cKQ==",
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/v-tooltip/-/v-tooltip-2.1.3.tgz",
+      "integrity": "sha512-xXngyxLQTOx/yUEy50thb8te7Qo4XU6h4LZB6cvEfVd9mnysUxLEoYwGWDdqR+l69liKsy3IPkdYff3J1gAJ5w==",
      "requires": {
-        "lodash": "^4.17.15",
-        "popper.js": "^1.16.0",
-        "vue-resize": "^0.4.5"
+        "@babel/runtime": "^7.13.10",
+        "lodash": "^4.17.21",
+        "popper.js": "^1.16.1",
+        "vue-resize": "^1.0.1"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.20.1",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.1.tgz",
+          "integrity": "sha512-mrzLkl6U9YLF8qpqI7TB82PESyEGjm/0Ly91jG575eVxMMlb8fYfOXFZIJ8XfLrJZQbm7dlKry2bJmXBUEkdFg==",
+          "requires": {
+            "regenerator-runtime": "^0.13.10"
+          }
+        },
+        "regenerator-runtime": {
+          "version": "0.13.11",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+          "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
+        }
      }
    },
    "v8-compile-cache": {
@@ -17327,9 +17343,27 @@
      }
    },
    "vue-resize": {
-      "version": "0.4.5",
-      "resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-0.4.5.tgz",
-      "integrity": "sha512-bhP7MlgJQ8TIkZJXAfDf78uJO+mEI3CaLABLjv0WNzr4CcGRGPIAItyWYnP6LsPA4Oq0WE+suidNs6dgpO4RHg=="
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-1.0.1.tgz",
+      "integrity": "sha512-z5M7lJs0QluJnaoMFTIeGx6dIkYxOwHThlZDeQnWZBizKblb99GSejPnK37ZbNE/rVwDcYcHY+Io+AxdpY952w==",
+      "requires": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.20.1",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.1.tgz",
+          "integrity": "sha512-mrzLkl6U9YLF8qpqI7TB82PESyEGjm/0Ly91jG575eVxMMlb8fYfOXFZIJ8XfLrJZQbm7dlKry2bJmXBUEkdFg==",
+          "requires": {
+            "regenerator-runtime": "^0.13.10"
+          }
+        },
+        "regenerator-runtime": {
+          "version": "0.13.11",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+          "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
+        }
+      }
    },
    "vue-router": {
      "version": "3.3.4",
@@ -46,7 +46,7 @@
    "regenerator-runtime": "^0.13.3",
    "register-service-worker": "^1.6.2",
    "streamsaver": "^2.0.5",
-    "v-tooltip": "^2.0.2",
+    "v-tooltip": "^2.1.3",
    "vee-validate": "^2.2.13",
    "vue": "^2.6.10",
    "vue-axios": "^3.2.0",
@@ -8,8 +8,34 @@
 </template>

 <script>
+import { mapFields } from 'vuex-map-fields'
+import { taskInfo } from '@/data/task/TaskInfo'
+
 export default {
  name: 'app',
+  mqtt: {
+    async '+/get_device_info_all/+' (data, topic) {
+      this.deviceListNew = JSON.parse(String.fromCharCode.apply(null, data)).data.sort((a, b) => a.memory_board - b.memory_board)
+    },
+    async '+/broadcast' (data, topic) {
+      const mes = String.fromCharCode.apply(null, data).split(':')
+      // let content
+      switch (mes[0]) {
+        case 'refresh':
+          this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+            header: 'get_device_info_all/0',
+          }))
+          break
+        default:
+          break
+      }
+    },
+  },
+  computed: {
+    ...mapFields('taskContent', [
+      'deviceListNew',
+    ]),
+  },
  data () {
    return {
      // Temporary config for 2.1.
@@ -25,6 +51,31 @@ export default {
      contextConfig: this.contextConfig,
    }
  },
+
+  methods: {
+    mqttPub: function (topic, mes) {
+      this.$mqtt.publish(topic, mes)
+    },
+    mqttSub: function (val) {
+      this.$mqtt.subscribe(val)
+    },
+    mqttUnSub: function (val) {
+      this.$mqtt.unsubscribe(val)
+    },
+    pageMqttSub: function (id) {
+      this.mqttSub(id + '/broadcast')
+      this.mqttSub(id + '/get_device_info_all/+')
+    },
+  },
+  async mounted () {
+    this.controllerID = taskInfo.getTaskInfo().controllerID
+    await taskInfo.updateTaskInfo(this.$route.params.taskID)
+    this.pageMqttSub(taskInfo.getTaskInfo().controllerID)
+
+    this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+      header: 'get_device_info_all/0',
+    }))
+  },
  watch: {
    // Temporary colors fix for 2.1.
    'contextConfig.invertedColor' (val) {
@@ -33,6 +33,8 @@ 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'

@@ -108,6 +110,8 @@ Vue.use(SlideOut, {
  // set default props here
 })

+Vue.use(VTooltip)
+
 Vue.prototype.API = api
 Vue.prototype.GLOBAL = global_

@@ -0,0 +1,4 @@
+<svg width="270" height="110" viewBox="0 0 270 110" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="270" height="110" rx="55" fill="#A4A3A3"/>
+<path d="M84.9 88.9C80.4 88.9 76.41 88 72.93 86.2C69.45 84.34 66.75 81.73 64.83 78.37C62.97 75.01 62.04 71.14 62.04 66.76V46.24C62.04 41.92 63 38.11 64.92 34.81C66.84 31.45 69.51 28.87 72.93 27.07C76.41 25.21 80.4 24.28 84.9 24.28C89.46 24.28 93.45 25.21 96.87 27.07C100.35 28.87 103.05 31.45 104.97 34.81C106.89 38.11 107.85 41.92 107.85 46.24V66.76C107.85 71.14 106.89 75.01 104.97 78.37C103.05 81.73 100.35 84.34 96.87 86.2C93.45 88 89.46 88.9 84.9 88.9ZM84.9 79.9C88.68 79.9 91.71 78.73 93.99 76.39C96.27 74.05 97.41 70.96 97.41 67.12V46.15C97.41 42.25 96.27 39.13 93.99 36.79C91.71 34.45 88.68 33.28 84.9 33.28C81.18 33.28 78.18 34.45 75.9 36.79C73.62 39.13 72.48 42.25 72.48 46.15V67.12C72.48 70.96 73.62 74.05 75.9 76.39C78.18 78.73 81.18 79.9 84.9 79.9ZM162.038 32.92C162.038 33.22 161.918 33.49 161.678 33.73C161.498 33.91 161.258 34 160.958 34H130.358C130.058 34 129.908 34.15 129.908 34.45V51.28C129.908 51.58 130.058 51.73 130.358 51.73H150.968C151.268 51.73 151.508 51.85 151.688 52.09C151.928 52.27 152.048 52.51 152.048 52.81V59.65C152.048 59.95 151.928 60.22 151.688 60.46C151.508 60.64 151.268 60.73 150.968 60.73H130.358C130.058 60.73 129.908 60.88 129.908 61.18V86.92C129.908 87.22 129.788 87.49 129.548 87.73C129.368 87.91 129.128 88 128.828 88H120.548C120.248 88 119.978 87.91 119.738 87.73C119.558 87.49 119.468 87.22 119.468 86.92V26.08C119.468 25.78 119.558 25.54 119.738 25.36C119.978 25.12 120.248 25 120.548 25H160.958C161.258 25 161.498 25.12 161.678 25.36C161.918 25.54 162.038 25.78 162.038 26.08V32.92ZM212.751 32.92C212.751 33.22 212.631 33.49 212.391 33.73C212.211 33.91 211.971 34 211.671 34H181.071C180.771 34 180.621 34.15 180.621 34.45V51.28C180.621 51.58 180.771 51.73 181.071 51.73H201.681C201.981 51.73 202.221 51.85 202.401 52.09C202.641 52.27 202.761 52.51 202.761 52.81V59.65C202.761 59.95 202.641 60.22 202.401 60.46C202.221 60.64 201.981 60.73 201.681 60.73H181.071C180.771 60.73 180.621 60.88 180.621 61.18V86.92C180.621 87.22 180.501 87.49 180.261 87.73C180.081 87.91 179.841 88 179.541 88H171.261C170.961 88 170.691 87.91 170.451 87.73C170.271 87.49 170.181 87.22 170.181 86.92V26.08C170.181 25.78 170.271 25.54 170.451 25.36C170.691 25.12 170.961 25 171.261 25H211.671C211.971 25 212.211 25.12 212.391 25.36C212.631 25.54 212.751 25.78 212.751 26.08V32.92Z" fill="white"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="65" height="65" viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="65" height="65" rx="32.5" fill="#CDCDCD"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="65" height="65" viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="65" height="65" rx="32.5" fill="#2CE9A4"/>
+</svg>
@@ -0,0 +1,4 @@
+<svg width="270" height="110" viewBox="0 0 270 110" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="270" height="110" rx="55" fill="#FF8989"/>
+<path d="M84.9 88.9C80.4 88.9 76.41 88 72.93 86.2C69.45 84.34 66.75 81.73 64.83 78.37C62.97 75.01 62.04 71.14 62.04 66.76V46.24C62.04 41.92 63 38.11 64.92 34.81C66.84 31.45 69.51 28.87 72.93 27.07C76.41 25.21 80.4 24.28 84.9 24.28C89.46 24.28 93.45 25.21 96.87 27.07C100.35 28.87 103.05 31.45 104.97 34.81C106.89 38.11 107.85 41.92 107.85 46.24V66.76C107.85 71.14 106.89 75.01 104.97 78.37C103.05 81.73 100.35 84.34 96.87 86.2C93.45 88 89.46 88.9 84.9 88.9ZM84.9 79.9C88.68 79.9 91.71 78.73 93.99 76.39C96.27 74.05 97.41 70.96 97.41 67.12V46.15C97.41 42.25 96.27 39.13 93.99 36.79C91.71 34.45 88.68 33.28 84.9 33.28C81.18 33.28 78.18 34.45 75.9 36.79C73.62 39.13 72.48 42.25 72.48 46.15V67.12C72.48 70.96 73.62 74.05 75.9 76.39C78.18 78.73 81.18 79.9 84.9 79.9ZM162.038 32.92C162.038 33.22 161.918 33.49 161.678 33.73C161.498 33.91 161.258 34 160.958 34H130.358C130.058 34 129.908 34.15 129.908 34.45V51.28C129.908 51.58 130.058 51.73 130.358 51.73H150.968C151.268 51.73 151.508 51.85 151.688 52.09C151.928 52.27 152.048 52.51 152.048 52.81V59.65C152.048 59.95 151.928 60.22 151.688 60.46C151.508 60.64 151.268 60.73 150.968 60.73H130.358C130.058 60.73 129.908 60.88 129.908 61.18V86.92C129.908 87.22 129.788 87.49 129.548 87.73C129.368 87.91 129.128 88 128.828 88H120.548C120.248 88 119.978 87.91 119.738 87.73C119.558 87.49 119.468 87.22 119.468 86.92V26.08C119.468 25.78 119.558 25.54 119.738 25.36C119.978 25.12 120.248 25 120.548 25H160.958C161.258 25 161.498 25.12 161.678 25.36C161.918 25.54 162.038 25.78 162.038 26.08V32.92ZM212.751 32.92C212.751 33.22 212.631 33.49 212.391 33.73C212.211 33.91 211.971 34 211.671 34H181.071C180.771 34 180.621 34.15 180.621 34.45V51.28C180.621 51.58 180.771 51.73 181.071 51.73H201.681C201.981 51.73 202.221 51.85 202.401 52.09C202.641 52.27 202.761 52.51 202.761 52.81V59.65C202.761 59.95 202.641 60.22 202.401 60.46C202.221 60.64 201.981 60.73 201.681 60.73H181.071C180.771 60.73 180.621 60.88 180.621 61.18V86.92C180.621 87.22 180.501 87.49 180.261 87.73C180.081 87.91 179.841 88 179.541 88H171.261C170.961 88 170.691 87.91 170.451 87.73C170.271 87.49 170.181 87.22 170.181 86.92V26.08C170.181 25.78 170.271 25.54 170.451 25.36C170.691 25.12 170.961 25 171.261 25H211.671C211.971 25 212.211 25.12 212.391 25.36C212.631 25.54 212.751 25.78 212.751 26.08V32.92Z" fill="white"/>
+</svg>
@@ -0,0 +1,4 @@
+<svg width="270" height="110" viewBox="0 0 270 110" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="270" height="110" rx="55" fill="#41DBA2"/>
+<path d="M104.9 88.9C100.4 88.9 96.41 88 92.93 86.2C89.45 84.34 86.75 81.73 84.83 78.37C82.97 75.01 82.04 71.14 82.04 66.76V46.24C82.04 41.92 83 38.11 84.92 34.81C86.84 31.45 89.51 28.87 92.93 27.07C96.41 25.21 100.4 24.28 104.9 24.28C109.46 24.28 113.45 25.21 116.87 27.07C120.35 28.87 123.05 31.45 124.97 34.81C126.89 38.11 127.85 41.92 127.85 46.24V66.76C127.85 71.14 126.89 75.01 124.97 78.37C123.05 81.73 120.35 84.34 116.87 86.2C113.45 88 109.46 88.9 104.9 88.9ZM104.9 79.9C108.68 79.9 111.71 78.73 113.99 76.39C116.27 74.05 117.41 70.96 117.41 67.12V46.15C117.41 42.25 116.27 39.13 113.99 36.79C111.71 34.45 108.68 33.28 104.9 33.28C101.18 33.28 98.18 34.45 95.9 36.79C93.62 39.13 92.48 42.25 92.48 46.15V67.12C92.48 70.96 93.62 74.05 95.9 76.39C98.18 78.73 101.18 79.9 104.9 79.9ZM176.098 26.08C176.098 25.78 176.188 25.54 176.368 25.36C176.608 25.12 176.878 25 177.178 25H185.458C185.758 25 185.998 25.12 186.178 25.36C186.418 25.54 186.538 25.78 186.538 26.08V86.92C186.538 87.22 186.418 87.49 186.178 87.73C185.998 87.91 185.758 88 185.458 88H177.448C176.848 88 176.428 87.76 176.188 87.28L150.268 44.8C150.148 44.62 150.028 44.56 149.908 44.62C149.788 44.62 149.728 44.74 149.728 44.98L149.908 86.92C149.908 87.22 149.788 87.49 149.548 87.73C149.368 87.91 149.128 88 148.828 88H140.548C140.248 88 139.978 87.91 139.738 87.73C139.558 87.49 139.468 87.22 139.468 86.92V26.08C139.468 25.78 139.558 25.54 139.738 25.36C139.978 25.12 140.248 25 140.548 25H148.558C149.158 25 149.578 25.24 149.818 25.72L175.648 68.2C175.768 68.38 175.888 68.47 176.008 68.47C176.128 68.41 176.188 68.26 176.188 68.02L176.098 26.08Z" fill="white"/>
+</svg>
@@ -0,0 +1,11 @@
+<svg width="84" height="83" viewBox="0 0 84 83" fill="none" xmlns="http://www.w3.org/2000/svg">
+<ellipse cx="42" cy="41.5" rx="42" ry="41.5" fill="url(#paint0_radial_34_138)"/>
+<path d="M62.5 38.4019C64.5 39.5566 64.5 42.4434 62.5 43.5981L34 60.0526C32 61.2073 29.5 59.7639 29.5 57.4545L29.5 24.5455C29.5 22.2361 32 20.7927 34 21.9474L62.5 38.4019Z" fill="white"/>
+<defs>
+<radialGradient id="paint0_radial_34_138" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(40 6.5) rotate(85.5328) scale(64.195 64.9684)">
+<stop stop-color="#0082FA"/>
+<stop offset="0.446695" stop-color="#0180E4"/>
+<stop offset="1" stop-color="#0161E3"/>
+</radialGradient>
+</defs>
+</svg>
@@ -0,0 +1,4 @@
+<svg width="84" height="83" viewBox="0 0 84 83" fill="none" xmlns="http://www.w3.org/2000/svg">
+<ellipse cx="42" cy="41.5" rx="42" ry="41.5" fill="#B0B0B0"/>
+<rect x="26" y="25" width="32" height="32" rx="4" fill="white"/>
+</svg>
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#757a80" height="800px" width="800px" version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+	  viewBox="-69 0 117 256" xml:space="preserve">
+	<path d="M-10.9,4.9c11.3,0,20.5,9.2,20.5,20.5S0.4,45.9-10.9,45.9s-20.5-9.2-20.5-20.5S-22.2,4.9-10.9,4.9z M14.9,51.2h-51.2
+		c-14.2,0-25.6,11.4-25.6,25.6v62.6c0,4.9,3.9,9,9,9s9-3.9,9-9V81.9c0-1.4,1.2-2.6,2.6-2.6s2.6,1.2,2.6,2.6v155.2
+		c0,7.7,5.7,14,12.8,14s12.8-6.3,12.8-14v-88.5c0-1.4,1.2-2.6,2.6-2.6c1.4,0,2.6,1.2,2.6,2.6v88.5c0,7.7,5.7,14,12.8,14
+		c7.1,0,12.8-6.3,12.8-14V81.9c0-1.4,1.2-2.6,2.6-2.6s2.6,1.2,2.6,2.6v57.6c0,4.9,3.9,9,9,9s9-3.9,9-9V76.8
+		C40.5,62.6,28.8,51.2,14.9,51.2z"/>
+	<!-- <circle id="buttonA" cx="-50" cy="125" r="10" fill="#008afa" /> -->
+	<circle id="myCircle" cx="-52" cy="130" r="10" stroke="white" stroke-width="1" fill="#0088f8" />
+  	<text id="textA" x="-52" y="130" font-family="Arial" font-size="12" fill="white" text-anchor="middle" dominant-baseline="central">A</text>
+	<!-- <circle id="buttonB" cx="50" cy="20" r="10" fill="#fe7171" />
+	<circle id="buttonC" cx="80" cy="20" r="10" fill="#d3d3d3" />
+	<circle id="buttonD" cx="20" cy="50" r="10" fill="#ffe12f" /> -->
+</svg>
@@ -0,0 +1,3 @@
+<svg width="31" height="31" viewBox="0 0 31 31" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.5 25.35H15.5001C18.3518 25.3468 21.0858 24.2125 23.1023 22.196C25.1187 20.1796 26.253 17.4456 26.2563 14.5939V14.5938C26.2563 12.4664 25.6254 10.3868 24.4435 8.6179C23.2616 6.84904 21.5817 5.47039 19.6162 4.65627C17.6508 3.84216 15.4881 3.62915 13.4016 4.04418C11.3151 4.45921 9.39848 5.48364 7.89419 6.98793C6.3899 8.49222 5.36547 10.4088 4.95043 12.4953C4.5354 14.5818 4.74841 16.7445 5.56253 18.71C6.37664 20.6754 7.7553 22.3553 9.52415 23.5372C11.293 24.7192 13.3726 25.35 15.5 25.35ZM14.6313 14.5938V14.4937H14.5313C14.3008 14.4937 14.0799 14.4022 13.917 14.2393C13.754 14.0764 13.6625 13.8554 13.6625 13.625C13.6625 13.3946 13.754 13.1736 13.917 13.0107C14.0799 12.8478 14.3008 12.7563 14.5313 12.7563C15.0186 12.7563 15.486 12.9498 15.8306 13.2944C16.1752 13.639 16.3688 14.1064 16.3688 14.5938V19.4375V19.5375H16.4688C16.6992 19.5375 16.9201 19.629 17.0831 19.792C17.246 19.9549 17.3375 20.1758 17.3375 20.4062C17.3375 20.6367 17.246 20.8576 17.0831 21.0205C16.9201 21.1835 16.6992 21.275 16.4688 21.275C15.9814 21.275 15.514 21.0814 15.1694 20.7368C14.8248 20.3922 14.6313 19.9248 14.6313 19.4375V14.5938ZM8.55885 4.20558C10.6134 2.83276 13.0289 2.10001 15.4999 2.1C18.8124 2.10351 21.9882 3.42095 24.3305 5.76323C26.6728 8.10552 27.9903 11.2814 27.9938 14.5939C27.9937 17.0648 27.261 19.4803 25.8882 21.5349C24.5153 23.5895 22.5641 25.1908 20.2812 26.1365C17.9982 27.0821 15.4861 27.3295 13.0626 26.8474C10.639 26.3654 8.41287 25.1754 6.66559 23.4282C4.91831 21.6809 3.72839 19.4547 3.24632 17.0312C2.76425 14.6076 3.01166 12.0955 3.95729 9.8126C4.90291 7.52966 6.50426 5.57841 8.55885 4.20558ZM13.6625 9.26562C13.6625 8.998 13.7419 8.73639 13.8905 8.51387C14.0392 8.29135 14.2506 8.11792 14.4978 8.0155C14.7451 7.91309 15.0171 7.88629 15.2796 7.9385C15.5421 7.99071 15.7832 8.11958 15.9724 8.30882C16.1617 8.49806 16.2905 8.73916 16.3428 9.00164C16.395 9.26412 16.3682 9.53619 16.2658 9.78344C16.1633 10.0307 15.9899 10.242 15.7674 10.3907C15.5449 10.5394 15.2833 10.6187 15.0156 10.6187C14.6568 10.6187 14.3126 10.4762 14.0588 10.2224C13.8051 9.96867 13.6625 9.6245 13.6625 9.26562Z" fill="white" stroke="#535353" stroke-width="0.2"/>
+</svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path fill="#FFFFFF" d="M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2V448c0 17.7 14.3 32 32 32s32-14.3 32-32V141.2L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z"/></svg>
@@ -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,3 @@
+<svg width="14" height="14" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 18C2.45 18 1.97933 17.8043 1.588 17.413C1.196 17.021 1 16.55 1 16V3H0V1H5V0H11V1H16V3H15V16C15 16.55 14.8043 17.021 14.413 17.413C14.021 17.8043 13.55 18 13 18H3ZM13 3H3V16H13V3ZM5 14H7V5H5V14ZM9 14H11V5H9V14Z" fill="#FF6C63"/>
+</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>
@@ -0,0 +1,4 @@
+<svg width="100" height="30" viewBox="0 0 100 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="1" width="98" height="28" rx="14" stroke="white" stroke-width="2"/>
+<path d="M14.7209 21V9.36364H19.0846C19.9785 9.36364 20.7285 9.51894 21.3346 9.82955C21.9444 10.1402 22.4046 10.5758 22.7153 11.1364C23.0296 11.6932 23.1868 12.3428 23.1868 13.0852C23.1868 13.8314 23.0278 14.4792 22.7096 15.0284C22.3952 15.5739 21.9312 15.9962 21.3175 16.2955C20.7039 16.5909 19.9501 16.7386 19.0562 16.7386H15.9482V14.9886H18.7721C19.2948 14.9886 19.7228 14.9167 20.0562 14.7727C20.3895 14.625 20.6357 14.411 20.7948 14.1307C20.9577 13.8466 21.0391 13.4981 21.0391 13.0852C21.0391 12.6723 20.9577 12.3201 20.7948 12.0284C20.6319 11.733 20.3838 11.5095 20.0505 11.358C19.7171 11.2027 19.2872 11.125 18.7607 11.125H16.8289V21H14.7209ZM20.7323 15.7273L23.613 21H21.2607L18.4312 15.7273H20.7323ZM25.1272 21V9.36364H32.6954V11.1307H27.2351V14.2898H32.3033V16.0568H27.2351V19.233H32.7408V21H25.1272ZM41.1698 12.5625C41.1168 12.0663 40.8933 11.6799 40.4993 11.4034C40.1092 11.1269 39.6016 10.9886 38.9766 10.9886C38.5372 10.9886 38.1603 11.0549 37.8459 11.1875C37.5315 11.3201 37.291 11.5 37.1243 11.7273C36.9577 11.9545 36.8724 12.214 36.8687 12.5057C36.8687 12.7481 36.9236 12.9583 37.0334 13.1364C37.1471 13.3144 37.3005 13.4659 37.4937 13.5909C37.6868 13.7121 37.9009 13.8144 38.1357 13.8977C38.3706 13.9811 38.6073 14.0511 38.8459 14.108L39.9368 14.3807C40.3762 14.483 40.7986 14.6212 41.2039 14.7955C41.613 14.9697 41.9785 15.1894 42.3005 15.4545C42.6262 15.7197 42.8838 16.0398 43.0732 16.4148C43.2626 16.7898 43.3573 17.2292 43.3573 17.733C43.3573 18.4148 43.1831 19.0152 42.8346 19.5341C42.4861 20.0492 41.9823 20.4527 41.3232 20.7443C40.6679 21.0322 39.8743 21.1761 38.9425 21.1761C38.0372 21.1761 37.2512 21.036 36.5846 20.7557C35.9217 20.4754 35.4027 20.0663 35.0277 19.5284C34.6565 18.9905 34.4558 18.3352 34.4255 17.5625H36.4993C36.5296 17.9678 36.6546 18.3049 36.8743 18.5739C37.094 18.8428 37.38 19.0436 37.7323 19.1761C38.0884 19.3087 38.4861 19.375 38.9255 19.375C39.3838 19.375 39.7853 19.3068 40.13 19.1705C40.4785 19.0303 40.7512 18.8371 40.9482 18.5909C41.1452 18.3409 41.2456 18.0492 41.2493 17.7159C41.2456 17.4129 41.1565 17.1629 40.9823 16.9659C40.8081 16.7652 40.5637 16.5985 40.2493 16.4659C39.9387 16.3295 39.5751 16.2083 39.1584 16.1023L37.8346 15.7614C36.8762 15.5152 36.1187 15.142 35.5618 14.642C35.0088 14.1383 34.7323 13.4697 34.7323 12.6364C34.7323 11.9508 34.9179 11.3504 35.2891 10.8352C35.6641 10.3201 36.1736 9.92045 36.8175 9.63636C37.4615 9.34848 38.1906 9.20455 39.005 9.20455C39.8308 9.20455 40.5543 9.34848 41.1755 9.63636C41.8005 9.92045 42.291 10.3163 42.6471 10.8239C43.0031 11.3277 43.1868 11.9072 43.1982 12.5625H41.1698ZM44.7252 11.1307V9.36364H54.0093V11.1307H50.4127V21H48.3218V11.1307H44.7252ZM55.8871 21H53.6371L57.7337 9.36364H60.336L64.4383 21H62.1883L59.0803 11.75H58.9894L55.8871 21ZM55.961 16.4375H62.0974V18.1307H55.961V16.4375ZM65.9709 21V9.36364H70.3346C71.2285 9.36364 71.9785 9.51894 72.5846 9.82955C73.1944 10.1402 73.6546 10.5758 73.9653 11.1364C74.2796 11.6932 74.4368 12.3428 74.4368 13.0852C74.4368 13.8314 74.2778 14.4792 73.9596 15.0284C73.6452 15.5739 73.1812 15.9962 72.5675 16.2955C71.9539 16.5909 71.2001 16.7386 70.3062 16.7386H67.1982V14.9886H70.0221C70.5448 14.9886 70.9728 14.9167 71.3062 14.7727C71.6395 14.625 71.8857 14.411 72.0448 14.1307C72.2077 13.8466 72.2891 13.4981 72.2891 13.0852C72.2891 12.6723 72.2077 12.3201 72.0448 12.0284C71.8819 11.733 71.6338 11.5095 71.3005 11.358C70.9671 11.2027 70.5372 11.125 70.0107 11.125H68.0789V21H65.9709ZM71.9823 15.7273L74.863 21H72.5107L69.6812 15.7273H71.9823ZM75.8658 11.1307V9.36364H85.1499V11.1307H81.5533V21H79.4624V11.1307H75.8658Z" fill="white"/>
+</svg>
@@ -25,12 +25,12 @@
        >
          <!-- *** icon -->
          <!-- <va-icon-vuestic /> -->
-          <img src='@/assets/img/bps_logo.png'>
+          <!-- <img src='@/assets/img/bps_logo.png'> -->
        </router-link>
      </div>
      <!-- <img style="height: 40px;" v-bind:src="'https://www.bioproweb.com/wp-content/uploads/2020/01/BPS-LOGO_60.png'"> -->
      <div class="app-navbar__center lg5 md4">
-        <span
+        <!-- <span
          class="app-navbar__text"
          :style="{color: this.$themes.gray}"
        >
@@ -43,7 +43,7 @@
          >
            contact@bioproweb.com
          </a>
-        </span>
+        </span> -->
      </div>
      <app-navbar-actions
        class="app-navbar__actions md5 lg4"
@@ -61,14 +61,14 @@ export const navigationRoutes = {
        iconClass: 'vuestic-iconset vuestic-iconset-settings',
      },
    },
-    // {
-    //   name: 'project',
-    //   displayName: 'Scheduler',
-    //   meta: {
-    //     iconClass: 'vuestic-iconset vuestic-iconset-tables',
-    //     // iconClass: 'vuestic-iconset vuestic-iconset-browse-gallery',
-    //   },
-    // },
+    {
+      name: 'project',
+      displayName: 'Scheduler',
+      meta: {
+        iconClass: 'vuestic-iconset vuestic-iconset-tables',
+        // iconClass: 'vuestic-iconset vuestic-iconset-browse-gallery',
+      },
+    },
    // {
    //   name: 'forms',
    //   displayName: 'menu.forms',
@@ -256,5 +256,12 @@ export const navigationRoutes = {
    //     },
    //   ],
    // },
+    {
+      name: 'newPage',
+      displayName: 'newPage',
+      meta: {
+        iconClass: 'fa fa-id-card',
+      },
+    },
  ],
 }
@@ -1,15 +1,5 @@
 <template>
  <div>
-    <div class="row flex sm12 xl12 md12 xs12" style="height: 100vh;">
-      <div class="flex-center spinner-box mt-4 mb-5">
-        <fulfilling-bouncing-circle-spinner
-          :animation-duration="3000"
-          :color="'#6c7fee'"
-          :size="60"
-        >
-        </fulfilling-bouncing-circle-spinner>
-      </div>
-    </div>
  </div>
 </template>

@@ -17,7 +7,6 @@
 import api from '@/data/api/index'
 import types from '@/store/modules/download/types'
 import { mapActions, mapMutations } from 'vuex'
-import { FulfillingBouncingCircleSpinner } from 'epic-spinners'
 import { mapFields } from 'vuex-map-fields'
 import newDownload from '@/factories/file/downloadFactory'
 import newChannel from '@/factories/file/channelFactory'
@@ -27,11 +16,17 @@ import configTable from '@/data/config-table/index'
 export default {
  name: 'Download',
  components: {
-    FulfillingBouncingCircleSpinner,
  },
  data: () => {
    return {
      controllerList: [],
+      downloadList: [],
+      format: 'excel',
+      channel: '',
+      metaListNew: [],
+      downloading: false,
+      fileNums: 0,
+      count: 0,
    }
  },
  computed: {
@@ -67,6 +62,172 @@ export default {
      }
      return results
    },
+    writeFiles: async function () {
+      if (this.metaListNew.length !== 0 && this.downloading === false) {
+        this.downloading = true
+        let meta
+        const metaID = this.metaListNew.pop()
+        const ret = await api.meta.getByID(metaID)
+
+        if (ret.status === 200) {
+          meta = ret.data[0]
+        }
+
+        if (meta !== undefined) {
+          this.metaInfo = meta
+          const channelParamObj = configTable.getModeConfig(meta.device.library_name, meta.parameter_set.MODE).channels
+          const channelArray = this.channel === 'all' ? JSON.parse(this.metaInfo.channels) : Object.keys(channelParamObj).filter(ele => ele !== 'time')
+          const channelList = []
+
+          // split to different subfile by channel
+          if (meta.device.library_name.indexOf('Neulive') >= 0) {
+            if (channelArray.some(el => el >= 256)) {
+              channelList.push(channelArray.filter(el => (el >= 256 && el <= 259)))
+              channelList.push(channelArray.filter(el => el < 256))
+            } else {
+              channelList.push(channelArray)
+            }
+          } else if (meta.device.library_name.indexOf('Elite') >= 0) {
+            channelList.push(channelArray)
+          }
+
+          while (channelList.length > 0) {
+            const channels = channelList.pop()
+
+            let maxSplitFiles = 1
+            let fileIndex = 0
+
+            // find max raw data need sub file
+            for (const rawDataIndex of channels) {
+              const dataLength = meta.raw_data[rawDataIndex].length
+
+              maxSplitFiles = Math.max(maxSplitFiles, Math.ceil(meta.raw_data[rawDataIndex].length / dataLength))
+              meta.raw_data[rawDataIndex] = this.chunkArray(meta.raw_data[rawDataIndex], dataLength)
+            }
+
+            while (fileIndex < maxSplitFiles) {
+              // create new download info & add channel
+              if (this.downloadInfo === null) {
+                this.downloadInfo = newDownload()
+              }
+              this.downloadInfo.channel = channels
+
+              // download format
+              this.downloadInfo.format = this.format
+
+              // download device and filename
+              if (meta.device.library_name.indexOf('Neulive') >= 0) {
+                this.downloadInfo.device = [meta.device.library_name.slice(0, 7), meta.device.library_name.slice(7)]
+                if (this.downloadInfo.channel.some(el => el >= 256 && el <= 259)) {
+                  this.downloadInfo.filename = meta.name + '-accerlate'
+                  this.downloadInfo.size = parseInt(parseInt(meta.size) / (76 * (maxSplitFiles)))
+                } else {
+                  this.downloadInfo.filename = meta.name
+                  this.downloadInfo.size = parseInt(meta.size / (maxSplitFiles))
+                }
+              } else if (meta.device.library_name.indexOf('Elite') >= 0) {
+                this.downloadInfo.device = [meta.device.library_name.slice(0, 5), meta.device.library_name.slice(5)]
+                this.downloadInfo.filename = meta.name
+                this.downloadInfo.size = parseInt(meta.size / (maxSplitFiles))
+              }
+
+              // create new channel info & get sample rate
+              for (const channel of this.downloadInfo.channel) {
+                if (this.downloadInfo.channelInfo[channel] === undefined) {
+                  this.downloadInfo.channelInfo[channel] = newChannel()
+                  this.setSampleRateDownload({ channel: channel })
+                }
+              }
+
+              // set download ID list
+              this.clearIDListDownload()
+              for (const channel of this.downloadInfo.channel) {
+                this.setIDListDownload({ channel: channel, fileIndex: fileIndex })
+              }
+
+              // if create writer
+              this.clearStreamDownload()
+              this.setStreamDownload()
+
+              // set Header
+              if (this.downloadInfo.format !== 'csv-edf') {
+                await this.setHeaderExport()
+              }
+              await this.setTitleExport()
+
+              // start download data
+              let rowIndex = 0
+              let columnNum = 0
+
+              const requestArray = []
+              console.time('download')
+              // console.log(this.downloadInfo)
+
+              while (rowIndex - 10 < this.downloadInfo.maxRows) {
+                // console.log('rowIndex < this.downloadInfo.maxRows', rowIndex, this.downloadInfo.maxRows)
+                for (const channel of this.downloadInfo.channel) {
+                  columnNum = this.downloadInfo.channelInfo[channel].downloadIDList.length
+                  for (const idx in this.downloadInfo.channelInfo[channel].downloadIDList) {
+                    const _idx = parseInt(idx)
+                    if (this.downloadInfo.channelInfo[channel].downloadDataBuffer[idx] === undefined) {
+                      this.downloadInfo.channelInfo[channel].downloadDataBuffer[idx] = []
+                    }
+                    // const rawID = this.downloadInfo.channelInfo[channel].downloadIDList[_idx][rowIndex]
+                    const rawIDList = this.downloadInfo.channelInfo[channel].downloadIDList[_idx].slice(rowIndex, rowIndex + 10)
+                    // console.log(channel, rawIDList)
+                    rawIDList.length > 0 && requestArray.push(api.raw.getAttrByIDs(channel, rawIDList, 'id-channel-size-serial_number-start_time-end_time-data'))
+                    if (rawIDList.length === 0) columnNum -= 1
+                  }
+                }
+                const responseArray = await Promise.all(requestArray)
+                for (const responseIndex in responseArray) {
+                  const response = responseArray[responseIndex]
+                  // console.log('response', response)
+                  const idx = responseIndex % columnNum
+
+                  for (const data of response.data) {
+                    const timeUnitScale = channelParamObj.time.unit[channelParamObj.time.downloadUnit]
+                    const channelUnitScale = channelParamObj[data.channel]?.unit[channelParamObj[data.channel]?.downloadUnit]
+                    // console.log('data', data)
+                    const dataArray = data.data.split('"***"').slice(0, -1)
+                    // console.log('dataArray', dataArray)
+                    for (const raw of dataArray) {
+                      const rawArray = raw.split(' ')
+                      const newArray = rawArray[0] === '' ? [] : rawArray.map((ele, index) => {
+                        // console.log((parseInt(ele) / timeUnitScale).toFixed(Math.log10(timeUnitScale)))
+                        return (index % 2 === 0) ? String((parseInt(ele) / timeUnitScale).toFixed(Math.log10(timeUnitScale))) : channelUnitScale ? String((parseInt(ele) / channelUnitScale).toFixed(Math.log10(channelUnitScale))) : ele
+                      })
+                      this.downloadInfo.channelInfo[data.channel].downloadDataBuffer[idx].push(...newArray)
+                      // console.log('rawArray', rawArray)
+                    }
+                  }
+                }
+                requestArray.length = 0
+                // console.log('this.downloadInfo.channelInfo', this.downloadInfo.channelInfo)
+                // console.log('this.downloadInfo.maxRows', this.downloadInfo.maxRows)
+                await this.setDataExport({ last: (rowIndex >= this.downloadInfo.maxRows - 1) })
+                rowIndex += 10
+              }
+              this.closeWriterDownload()
+              fileIndex += 1
+            }
+            console.timeEnd('download')
+          }
+        }
+        this.count += 1
+        this.downloading = false
+        this.$emit('download-finish')
+        if (this.fileNums === 1) {
+          this.showToast('Download Finish', {
+            position: 'bottom-right',
+          })
+        } else {
+          this.showToast(`${this.count} / ${this.fileNums} Finish`, {
+            position: 'bottom-right',
+          })
+        }
+      }
+    },
    ...mapActions('download',
      [
        types.raw.rawDataByID,
@@ -93,169 +254,13 @@ export default {
  async mounted () {
    await this.getControllerList()
    // TODO authorization
-    const format = this.$route.params.format.split('-')[0]
-    const allChannel = this.$route.params.format.split('-')[1]
-    this.metaList = this.$route.params.metaList.split('-')
-    const sd = this.$route.params.sd

-    while (this.metaList.length !== 0) {
-      let meta
-      const metaID = this.metaList.pop()
-      const ret = await api.meta.getByID(metaID)
-
-      if (ret.status === 200) {
-        meta = ret.data[0]
-      }
-      if (meta !== undefined) {
-        this.metaInfo = meta
-        const channelParamObj = configTable.getModeConfig(meta.device.library_name, meta.parameter_set.MODE).channels
-        const channelArray = allChannel === 'all' ? JSON.parse(this.metaInfo.channels) : Object.keys(channelParamObj).filter(ele => ele !== 'time')
-        const channelList = []
-
-        // split to different subfile by channel
-        if (meta.device.library_name.indexOf('Neulive') >= 0) {
-          if (channelArray.some(el => el >= 256)) {
-            channelList.push(channelArray.filter(el => (el >= 256 && el <= 259)))
-            channelList.push(channelArray.filter(el => el < 256))
-          } else {
-            channelList.push(channelArray)
-          }
-        } else if (meta.device.library_name.indexOf('Elite') >= 0) {
-          channelList.push(channelArray)
-        }
-
-        while (channelList.length > 0) {
-          const channels = channelList.pop()
-
-          let maxSplitFiles = 1
-          let fileIndex = 0
-
-          // find max raw data need sub file
-          for (const rawDataIndex of channels) {
-            const dataLength = meta.raw_data[rawDataIndex].length
-
-            maxSplitFiles = Math.max(maxSplitFiles, Math.ceil(meta.raw_data[rawDataIndex].length / dataLength))
-            meta.raw_data[rawDataIndex] = this.chunkArray(meta.raw_data[rawDataIndex], dataLength)
-          }
-
-          while (fileIndex < maxSplitFiles) {
-            // create new download info & add channel
-            if (this.downloadInfo === null) {
-              this.downloadInfo = newDownload()
-            }
-            this.downloadInfo.channel = channels
-
-            // download format
-            this.downloadInfo.format = format
-
-            // download device and filename
-            if (meta.device.library_name.indexOf('Neulive') >= 0) {
-              this.downloadInfo.device = [meta.device.library_name.slice(0, 7), meta.device.library_name.slice(7)]
-              if (this.downloadInfo.channel.some(el => el >= 256 && el <= 259)) {
-                this.downloadInfo.filename = meta.name + '-accerlate'
-                this.downloadInfo.filename += (sd !== undefined) ? '-sd' : ''
-                this.downloadInfo.size = parseInt(parseInt(meta.size) / (76 * (maxSplitFiles)))
-              } else {
-                this.downloadInfo.filename = meta.name
-                this.downloadInfo.filename += (sd !== undefined) ? '-sd' : ''
-                this.downloadInfo.size = parseInt(meta.size / (maxSplitFiles))
-              }
-            } else if (meta.device.library_name.indexOf('Elite') >= 0) {
-              this.downloadInfo.device = [meta.device.library_name.slice(0, 5), meta.device.library_name.slice(5)]
-              this.downloadInfo.filename = meta.name
-              this.downloadInfo.size = parseInt(meta.size / (maxSplitFiles))
-            }
-
-            // create new channel info & get sample rate
-            for (const channel of this.downloadInfo.channel) {
-              if (this.downloadInfo.channelInfo[channel] === undefined) {
-                this.downloadInfo.channelInfo[channel] = newChannel()
-                this.setSampleRateDownload({ channel: channel })
-              }
-            }
-
-            // set download ID list
-            this.clearIDListDownload()
-            for (const channel of this.downloadInfo.channel) {
-              this.setIDListDownload({ channel: channel, fileIndex: fileIndex })
-            }
-
-            // if create writer
-            this.clearStreamDownload()
-            this.setStreamDownload()
-
-            // set Header
-            if (this.downloadInfo.format !== 'csv-edf') {
-              await this.setHeaderExport()
-            }
-            await this.setTitleExport()
-
-            // start download data
-            let rowIndex = 0
-            let columnNum = 0
-
-            const requestArray = []
-            console.time('download')
-            // console.log(this.downloadInfo)
-
-            while (rowIndex - 10 < this.downloadInfo.maxRows) {
-              // console.log('rowIndex < this.downloadInfo.maxRows', rowIndex, this.downloadInfo.maxRows)
-              for (const channel of this.downloadInfo.channel) {
-                columnNum = this.downloadInfo.channelInfo[channel].downloadIDList.length
-                for (const idx in this.downloadInfo.channelInfo[channel].downloadIDList) {
-                  const _idx = parseInt(idx)
-                  if (this.downloadInfo.channelInfo[channel].downloadDataBuffer[idx] === undefined) {
-                    this.downloadInfo.channelInfo[channel].downloadDataBuffer[idx] = []
-                  }
-                  // const rawID = this.downloadInfo.channelInfo[channel].downloadIDList[_idx][rowIndex]
-                  const rawIDList = this.downloadInfo.channelInfo[channel].downloadIDList[_idx].slice(rowIndex, rowIndex + 10)
-                  // console.log(channel, rawIDList)
-                  rawIDList.length > 0 && requestArray.push(api.raw.getAttrByIDs(channel, rawIDList, 'id-channel-size-serial_number-start_time-end_time-data'))
-                  if (rawIDList.length === 0) columnNum -= 1
-                }
-              }
-              const responseArray = await Promise.all(requestArray)
-              // console.log('responseArray', responseArray)
-              for (const responseIndex in responseArray) {
-                const response = responseArray[responseIndex]
-                // console.log('response', response)
-                const idx = responseIndex % columnNum
-
-                for (const data of response.data) {
-                  const timeUnitScale = channelParamObj.time.unit[channelParamObj.time.downloadUnit]
-                  const channelUnitScale = channelParamObj[data.channel]?.unit[channelParamObj[data.channel]?.downloadUnit]
-                  // console.log('data', data)
-                  const dataArray = data.data.split('"***"').slice(0, -1)
-                  // console.log('dataArray', dataArray)
-                  for (const raw of dataArray) {
-                    const rawArray = raw.split(' ')
-                    const newArray = rawArray[0] === '' ? [] : rawArray.map((ele, index) => {
-                      // console.log((parseInt(ele) / timeUnitScale).toFixed(Math.log10(timeUnitScale)))
-                      return (index % 2 === 0) ? String((parseInt(ele) / timeUnitScale).toFixed(Math.log10(timeUnitScale))) : channelUnitScale ? String((parseInt(ele) / channelUnitScale).toFixed(Math.log10(channelUnitScale))) : ele
-                    })
-                    this.downloadInfo.channelInfo[data.channel].downloadDataBuffer[idx].push(...newArray)
-                    // console.log('rawArray', rawArray)
-                  }
-                }
-              }
-              requestArray.length = 0
-              // console.log('this.downloadInfo.channelInfo', this.downloadInfo.channelInfo)
-              // console.log('this.downloadInfo.maxRows', this.downloadInfo.maxRows)
-              await this.setDataExport({ last: (rowIndex >= this.downloadInfo.maxRows - 1) })
-              rowIndex += 10
-            }
-            this.closeWriterDownload()
-            fileIndex += 1
-          }
-          console.timeEnd('download')
-        }
-      }
-    }
-    await new Promise(resolve => setTimeout(resolve, 2000)) // sleep 2s prevent window close
-    window.close()
+    // await new Promise(resolve => setTimeout(resolve, 2000)) // sleep 2s prevent window close
+    // window.close()
+    setInterval(this.writeFiles, 1000)
  },
  destroyed () {
-    this.pageMqttUnSub()
+    // this.pageMqttUnSub()
  },
 }
 </script>
@@ -1,18 +1,8 @@
 <template>
  <div>
-    <div class="row flex sm12 xl12 md12 xs12" style="height: 100vh;">
-      <div class="flex-center spinner-box mt-4 mb-5">
-        <fulfilling-bouncing-circle-spinner
-          :animation-duration="3000"
-          :color="'#6c7fee'"
-          :size="60"
-        >
-        </fulfilling-bouncing-circle-spinner>
-        <progress-modal
-          :ref="'progressModalRef'"
-        />
-      </div>
-    </div>
+    <progress-modal
+      :ref="'progressModalRef'"
+    />
  </div>
 </template>

@@ -20,7 +10,6 @@
 import api from '@/data/api/index'
 import types from '@/store/modules/download/types'
 import { mapActions, mapMutations } from 'vuex'
-import { FulfillingBouncingCircleSpinner } from 'epic-spinners'
 import { mapFields } from 'vuex-map-fields'
 import newDownload from '@/factories/file/downloadFactory'
 import newChannel from '@/factories/file/channelFactory'
@@ -31,12 +20,18 @@ import configTable from '@/data/config-table/index'
 export default {
  name: 'DownloadOffline',
  components: {
-    FulfillingBouncingCircleSpinner,
    progressModal,
  },
  data: () => {
    return {
      controllerList: [],
+      downloadList: [],
+      format: 'excel',
+      channel: '',
+      metaListNew: [],
+      downloading: false,
+      fileNums: 0,
+      count: 0,
    }
  },
  computed: {
@@ -72,6 +67,153 @@ export default {
      }
      return results
    },
+    writeFiles: async function () {
+      if (this.metaListNew.length !== 0 && this.downloading === false) {
+        let meta
+        const metaID = this.metaListNew.pop()
+        const ret = await api.meta.getByID(metaID)
+
+        if (ret.status === 200) {
+          meta = ret.data[0]
+        }
+        if (meta !== undefined) {
+          this.metaInfo = meta
+          const channelParamObj = configTable.getModeConfig(meta.device.library_name, meta.parameter_set.MODE).channels
+          const channelArray = this.channel === 'all' ? JSON.parse(this.metaInfo.channels) : Object.keys(channelParamObj).filter(ele => ele !== 'time')
+          const channelList = []
+
+          if (meta.device.library_name.indexOf('Neulive') >= 0) {
+            if (channelArray.some(el => el >= 256)) {
+              channelList.push(channelArray.filter(el => (el >= 256 && el <= 259)))
+              channelList.push(channelArray.filter(el => el < 256))
+            } else {
+              channelList.push(channelArray)
+            }
+          } else if (meta.device.library_name.indexOf('Elite') >= 0) {
+            channelList.push(channelArray)
+          }
+
+          this.$refs.progressModalRef.show()
+
+          while (channelList.length > 0) {
+            const channels = channelList.pop()
+
+            let maxSplitFiles = 1
+            let fileIndex = 0
+
+            // find max raw data need sub file
+            for (const rawDataIndex of Object.keys(meta.raw_data)) {
+              let dataLength = 0
+              if (rawDataIndex >= 256) {
+                dataLength = meta.raw_data[rawDataIndex].length
+              } else {
+                dataLength = 10000
+              }
+
+              maxSplitFiles = Math.max(maxSplitFiles, Math.ceil(meta.raw_data[rawDataIndex].length / dataLength))
+              meta.raw_data[rawDataIndex] = this.chunkArray(meta.raw_data[rawDataIndex], dataLength)
+            }
+
+            while (fileIndex < maxSplitFiles) {
+              if (this.downloadInfo === null) {
+                this.downloadInfo = newDownload()
+              }
+              this.downloadInfo.channel = channels
+              // download format
+              this.downloadInfo.format = this.format
+
+              // download device and filename
+              if (meta.device.library_name.indexOf('Neulive') >= 0) {
+                this.downloadInfo.device = [meta.device.library_name.slice(0, 7), meta.device.library_name.slice(7)]
+                if (this.downloadInfo.channel.some(el => el >= 256 && el <= 259)) {
+                  this.downloadInfo.filename = meta.name + '-accerlate-' + this.format
+                  this.downloadInfo.size = parseInt(parseInt(meta.size) / 76)
+                } else {
+                  this.downloadInfo.filename = meta.name + '-' + this.format
+                  this.downloadInfo.size = parseInt(meta.size)
+                }
+              } else if (meta.device.library_name.indexOf('Elite') >= 0) {
+                this.downloadInfo.device = [meta.device.library_name.slice(0, 5), meta.device.library_name.slice(5)]
+                this.downloadInfo.filename = meta.name + '-' + (fileIndex + 1).toString()
+                this.downloadInfo.size = parseInt(meta.size)
+              }
+
+              this.$refs.progressModalRef.setTitle(this.downloadInfo.filename)
+
+              // get sampleRate && downloadList
+              for (const channel of this.downloadInfo.channel) {
+                if (this.downloadInfo.channelInfo[channel] === undefined) {
+                  this.downloadInfo.channelInfo[channel] = newChannel()
+                  this.setSampleRateDownload({ channel: channel })
+                }
+              }
+
+              this.clearIDListDownload()
+              for (const channel of this.downloadInfo.channel) {
+                this.setIDListDownload({ channel: channel, fileIndex: fileIndex })
+              }
+
+              // start download data
+              fileIndex += 1
+              let rowIndex = 0
+              let columnNum = 0
+
+              const requestArray = []
+              console.time('download')
+
+              while (rowIndex - 10 < this.downloadInfo.maxRows) {
+                this.$refs.progressModalRef.setValue(parseInt((rowIndex / this.downloadInfo.maxRows) * 100))
+                // console.log('rowIndex < this.downloadInfo.maxRows', rowIndex, this.downloadInfo.maxRows)
+                for (const channel of this.downloadInfo.channel) {
+                  columnNum = this.downloadInfo.channelInfo[channel].downloadIDList.length
+                  for (const idx in this.downloadInfo.channelInfo[channel].downloadIDList) {
+                    const _idx = parseInt(idx)
+                    if (this.downloadInfo.channelInfo[channel].downloadDataBuffer[idx] === undefined) {
+                      this.downloadInfo.channelInfo[channel].downloadDataBuffer[idx] = []
+                    }
+                    // const rawID = this.downloadInfo.channelInfo[channel].downloadIDList[_idx][rowIndex]
+                    const rawIDList = this.downloadInfo.channelInfo[channel].downloadIDList[_idx].slice(rowIndex, rowIndex + 10)
+                    // console.log(channel, rawIDList)
+                    rawIDList.length > 0 && requestArray.push(api.raw.getAttrByIDs(channel, rawIDList, 'id-channel-size-serial_number-start_time-end_time-data'))
+                    if (rawIDList.length === 0) columnNum -= 1
+                  }
+                }
+                const responseArray = await Promise.all(requestArray)
+                // console.log('responseArray', responseArray)
+                for (const responseIndex in responseArray) {
+                  const response = responseArray[responseIndex]
+                  // console.log('response', response)
+                  const idx = responseIndex % columnNum
+                  // console.log('response', response)
+                  for (const data of response.data) {
+                    const timeUnitScale = channelParamObj.time.unit[channelParamObj.time.downloadUnit]
+                    const channelUnitScale = channelParamObj[data.channel]?.unit[channelParamObj[data.channel]?.downloadUnit]
+                    // console.log('data', data)
+                    const dataArray = data.data.split('"***"').slice(0, -1)
+                    // console.log('dataArray', dataArray)
+                    for (const raw of dataArray) {
+                      const rawArray = raw.split(' ')
+                      const newArray = rawArray[0] === '' ? [] : rawArray.map((ele, index) => {
+                        return (index % 2 === 0) ? String((parseInt(ele) / timeUnitScale).toFixed(Math.log10(timeUnitScale))) : channelUnitScale ? String((parseInt(ele) / channelUnitScale).toFixed(Math.log10(channelUnitScale))) : ele
+                      })
+                      this.downloadInfo.channelInfo[data.channel].downloadDataBuffer[idx].push(...newArray)
+                      // console.log('rawArray', rawArray)
+                    }
+                  }
+                }
+                requestArray.length = 0
+                // console.log('this.downloadInfo.channelInfo', this.downloadInfo.channelInfo)
+                // console.log('this.downloadInfo.maxRows', this.downloadInfo.maxRows)
+                // await this.setDataExport({ last: (rowIndex >= this.downloadInfo.maxRows - 1) })
+                rowIndex += 10
+              }
+              await this.setAllExport({ last: (rowIndex >= this.downloadInfo.maxRows - 1) })
+              this.$refs.progressModalRef.setValue(100)
+            }
+          }
+        }
+      }
+    },
    ...mapActions('download',
      [
        types.raw.rawDataByID,
@@ -97,161 +239,7 @@ export default {
  },
  async mounted () {
    await this.getControllerList()
-    // TODO authorization
-    const format = this.$route.params.format.split('-')[0]
-    const allChannel = this.$route.params.format.split('-')[1]
-    this.metaList = this.$route.params.metaList.split('-')
-    const sd = this.$route.params.sd
-
-    while (this.metaList.length !== 0) {
-      let meta
-      const metaID = this.metaList.pop()
-      const ret = await api.meta.getByID(metaID)
-
-      if (ret.status === 200) {
-        meta = ret.data[0]
-      }
-      if (meta !== undefined) {
-        this.metaInfo = meta
-        const channelParamObj = configTable.getModeConfig(meta.device.library_name, meta.parameter_set.MODE).channels
-        const channelArray = allChannel === 'all' ? JSON.parse(this.metaInfo.channels) : Object.keys(channelParamObj).filter(ele => ele !== 'time')
-        const channelList = []
-
-        if (meta.device.library_name.indexOf('Neulive') >= 0) {
-          if (channelArray.some(el => el >= 256)) {
-            channelList.push(channelArray.filter(el => (el >= 256 && el <= 259)))
-            channelList.push(channelArray.filter(el => el < 256))
-          } else {
-            channelList.push(channelArray)
-          }
-        } else if (meta.device.library_name.indexOf('Elite') >= 0) {
-          channelList.push(channelArray)
-        }
-
-        this.$refs.progressModalRef.show()
-
-        while (channelList.length > 0) {
-          const channels = channelList.pop()
-
-          let maxSplitFiles = 1
-          let fileIndex = 0
-
-          // find max raw data need sub file
-          for (const rawDataIndex of Object.keys(meta.raw_data)) {
-            let dataLength = 0
-            if (rawDataIndex >= 256) {
-              dataLength = meta.raw_data[rawDataIndex].length
-            } else {
-              dataLength = 10000
-            }
-
-            maxSplitFiles = Math.max(maxSplitFiles, Math.ceil(meta.raw_data[rawDataIndex].length / dataLength))
-            meta.raw_data[rawDataIndex] = this.chunkArray(meta.raw_data[rawDataIndex], dataLength)
-          }
-
-          while (fileIndex < maxSplitFiles) {
-            if (this.downloadInfo === null) {
-              this.downloadInfo = newDownload()
-            }
-            this.downloadInfo.channel = channels
-            // download format
-            this.downloadInfo.format = format
-
-            // download device and filename
-            if (meta.device.library_name.indexOf('Neulive') >= 0) {
-              this.downloadInfo.device = [meta.device.library_name.slice(0, 7), meta.device.library_name.slice(7)]
-              if (this.downloadInfo.channel.some(el => el >= 256 && el <= 259)) {
-                this.downloadInfo.filename = meta.name + '-accerlate-' + format
-                this.downloadInfo.filename += (sd !== undefined) ? '-sd' : ''
-                this.downloadInfo.size = parseInt(parseInt(meta.size) / 76)
-              } else {
-                this.downloadInfo.filename = meta.name + '-' + format
-                this.downloadInfo.filename += (sd !== undefined) ? '-sd' : ''
-                this.downloadInfo.size = parseInt(meta.size)
-              }
-            } else if (meta.device.library_name.indexOf('Elite') >= 0) {
-              this.downloadInfo.device = [meta.device.library_name.slice(0, 5), meta.device.library_name.slice(5)]
-              this.downloadInfo.filename = meta.name + '-' + (fileIndex + 1).toString()
-              this.downloadInfo.size = parseInt(meta.size)
-            }
-
-            this.$refs.progressModalRef.setTitle(this.downloadInfo.filename)
-
-            // get sampleRate && downloadList
-            for (const channel of this.downloadInfo.channel) {
-              if (this.downloadInfo.channelInfo[channel] === undefined) {
-                this.downloadInfo.channelInfo[channel] = newChannel()
-                this.setSampleRateDownload({ channel: channel })
-              }
-            }
-
-            this.clearIDListDownload()
-            for (const channel of this.downloadInfo.channel) {
-              this.setIDListDownload({ channel: channel, fileIndex: fileIndex })
-            }
-
-            // start download data
-            fileIndex += 1
-            let rowIndex = 0
-            let columnNum = 0
-
-            const requestArray = []
-            console.time('download')
-
-            while (rowIndex - 10 < this.downloadInfo.maxRows) {
-              this.$refs.progressModalRef.setValue(parseInt((rowIndex / this.downloadInfo.maxRows) * 100))
-              // console.log('rowIndex < this.downloadInfo.maxRows', rowIndex, this.downloadInfo.maxRows)
-              for (const channel of this.downloadInfo.channel) {
-                columnNum = this.downloadInfo.channelInfo[channel].downloadIDList.length
-                for (const idx in this.downloadInfo.channelInfo[channel].downloadIDList) {
-                  const _idx = parseInt(idx)
-                  if (this.downloadInfo.channelInfo[channel].downloadDataBuffer[idx] === undefined) {
-                    this.downloadInfo.channelInfo[channel].downloadDataBuffer[idx] = []
-                  }
-                  // const rawID = this.downloadInfo.channelInfo[channel].downloadIDList[_idx][rowIndex]
-                  const rawIDList = this.downloadInfo.channelInfo[channel].downloadIDList[_idx].slice(rowIndex, rowIndex + 10)
-                  // console.log(channel, rawIDList)
-                  rawIDList.length > 0 && requestArray.push(api.raw.getAttrByIDs(channel, rawIDList, 'id-channel-size-serial_number-start_time-end_time-data'))
-                  if (rawIDList.length === 0) columnNum -= 1
-                }
-              }
-              const responseArray = await Promise.all(requestArray)
-              // console.log('responseArray', responseArray)
-              for (const responseIndex in responseArray) {
-                const response = responseArray[responseIndex]
-                // console.log('response', response)
-                const idx = responseIndex % columnNum
-                // console.log('response', response)
-                for (const data of response.data) {
-                  const timeUnitScale = channelParamObj.time.unit[channelParamObj.time.downloadUnit]
-                  const channelUnitScale = channelParamObj[data.channel]?.unit[channelParamObj[data.channel]?.downloadUnit]
-                  // console.log('data', data)
-                  const dataArray = data.data.split('"***"').slice(0, -1)
-                  // console.log('dataArray', dataArray)
-                  for (const raw of dataArray) {
-                    const rawArray = raw.split(' ')
-                    const newArray = rawArray[0] === '' ? [] : rawArray.map((ele, index) => {
-                      return (index % 2 === 0) ? String((parseInt(ele) / timeUnitScale).toFixed(Math.log10(timeUnitScale))) : channelUnitScale ? String((parseInt(ele) / channelUnitScale).toFixed(Math.log10(channelUnitScale))) : ele
-                    })
-                    this.downloadInfo.channelInfo[data.channel].downloadDataBuffer[idx].push(...newArray)
-                    // console.log('rawArray', rawArray)
-                  }
-                }
-              }
-              requestArray.length = 0
-              // console.log('this.downloadInfo.channelInfo', this.downloadInfo.channelInfo)
-              // console.log('this.downloadInfo.maxRows', this.downloadInfo.maxRows)
-              // await this.setDataExport({ last: (rowIndex >= this.downloadInfo.maxRows - 1) })
-              rowIndex += 10
-            }
-            await this.setAllExport({ last: (rowIndex >= this.downloadInfo.maxRows - 1) })
-            this.$refs.progressModalRef.setValue(100)
-          }
-        }
-      }
-    }
-    await new Promise(resolve => setTimeout(resolve, 2000)) // sleep
-    window.close()
+    setInterval(this.writeFiles, 1000)
  },
  destroyed () {
  },
@@ -1,5 +1,10 @@
 <template>
-  <div class="file-list">
+  <div class="file-list" @mousedown="unSelectAll">
+    <!-- Move Folder Modal -->
+    <download ref="download_ref"></download>
+    <download-offline ref="download_offline_ref"></download-offline>
+    <folder-modal ref="folder_modal_ref" @refreshPage="refreshPage"></folder-modal>
+    <!-- Create Folder Modal -->
    <va-modal
      class="flex sm12 xl12 md12 xs12"
      v-model="showModal.createFolder"
@@ -20,7 +25,7 @@
        removable
      />
    </va-modal>
-
+    <!-- Edit File Modal -->
    <va-modal
      class="flex sm12 xl12 md12 xs12"
      v-model="showModal.editFile"
@@ -48,6 +53,7 @@
        removable
      />
    </va-modal>
+    <!-- Delete File Modal-->
    <va-modal
      v-model="showModal.deleteFile"
      size="small"
@@ -64,6 +70,7 @@
      <p>Delete File {{ deleteInfo.name }} ? <input type="text" :ref="'delete_input'" style="opacity: 0; line-height: 0;"/></p>
    </va-modal>

+    <!-- Delete MultiFiles Modal -->
    <va-modal
      v-model="showModal.deleteMultiFiles"
      size="small"
@@ -81,17 +88,6 @@
    </va-modal>

    <va-card class="flex sm12 xl12 md12 xs12">
-      <template slot="header">
-        <div class="flex sm12 xl12 md12 xs12" style="text-align: end;">
-          <va-button class="" color="success" v-if="selected.length" @click="downloadSelected" target="_blank" small>
-            DOWNLOAD
-          </va-button>
-          <va-button class="" color="danger" v-if="selected.length" @click="deleteMultiFilesConfirm" target="_blank" small>
-            DELETE
-          </va-button>
-        </div>
-      </template>
-
      <!-- SearchField & perPageSelect-->
      <div class="row align--center">
        <div class="flex xs12 md6">
@@ -116,32 +112,46 @@
      </div>

      <!-- CreateFolder & FilePath -->
-      <div class="flex mb-4">
-        <va-icon
-          name="fa fa-plus"
-          size="1rem"
-          class="mr-2"
-          style="cursor: pointer;"
-          :color="'primary'"
-          @click.native="createFolderConfirm"
-        />
-        <va-icon
-          name="fa fa-folder-open"
-          size="0.9rem"
-          class="mr-2"
-          style="cursor: pointer;"
-          :color="(currentPathIndex === -1)?'primary':'dark'"
-          @click.native="openHome"
-        />
-        <span
-          class="mt-0 mb-0 mr-2"
-          v-for="(item, index) in pathLists" :key="index"
-          :style="{ color:(currentPathIndex === index)?'#6c7fee':'#34495e', cursor:'pointer'}"
-          @click="openPath(item,index)"
-        >
-          <span class="mr-1" style="color: #34495e; cursor: default;">/</span>
-          {{ item.name }}
-        </span>
+      <div class="row">
+        <div class="flex d-flex xl8 lg8 sm8 xs8" style="align-items: center;">
+          <div>
+            <va-icon
+              name="fa fa-plus"
+              size="1rem"
+              class="mr-2"
+              style="cursor: pointer;"
+              :color="'primary'"
+              @click.native="createFolderConfirm"
+            />
+            <va-icon
+              name="fa fa-folder-open"
+              size="0.9rem"
+              class="mr-2"
+              style="cursor: pointer;"
+              :color="(currentPathIndex === -1)?'primary':'dark'"
+            />
+            <span
+              class="mt-0 mb-0 mr-2"
+              v-for="(item, index) in pathLists" :key="index"
+              :style="{ color:(currentPathIndex === index)?'#6c7fee':'#34495e', cursor:'pointer'}"
+              @click="openPath(item,index)"
+            >
+              <span class="mr-1" style="color: #34495e; cursor: default;">/</span>
+              {{ item.name }}
+            </span>
+          </div>
+        </div>
+        <div class="flex xl4 lg4 sm4 xs4" style="text-align: end;">
+          <va-button class="" color="primary" @mousedown.stop="showFolderModal" target="_blank" small>
+            MOVE
+          </va-button>
+          <va-button class="" color="success"  @mousedown.stop="downloadSelected" target="_blank" small>
+            DOWNLOAD
+          </va-button>
+          <va-button class="" color="danger"  @mousedown.stop="deleteMultiFilesConfirm" target="_blank" small>
+            DELETE
+          </va-button>
+        </div>
      </div>

      <!-- FileListTable -->
@@ -160,14 +170,16 @@
        :fields="fields"
        :data="filteredData"
        :per-page="parseInt(perPage)"
-        @row-clicked="openFile"
+        @row-clicked="clickRow"
+        @mouseup.native="mouseUp"
+        @mousedown.native.stop="mouseDown"
        hoverable
        clickable
-        v-else
        :ref="'datatable_ref'"
+        v-else
      >
        <template slot="select" slot-scope="props">
-          <va-checkbox :value="props.rowData.checked" @input="select(props.rowData)"/>
+          <va-checkbox :value="props.rowData.checked"/>
        </template>
        <template slot="name" slot-scope="props">
          <va-icon
@@ -180,7 +192,7 @@
          {{ props.rowData.name }}
        </template>
        <template slot="parameter_set" slot-scope="props">
-          {{ getWorkingMode(props.rowData) }}
+          {{ getWorkingMode(props.rowData.device, props.rowData.parameter_set) }}
        </template>
        <template slot="created_at" slot-scope="props">
          {{transDate(props.rowData.created_at)}}
@@ -195,7 +207,7 @@
          {{transDeviceInfo(props.rowData.device)}}
        </template>
        <template slot="actions" slot-scope="props" >
-          <va-popover :message="`sdcard ${props.rowData.name}`" placement="top">
+          <!-- <va-popover :message="`sdcard ${props.rowData.name}`" placement="top">
            <sd-card-button
              v-if="(props.rowData.type !== 'folder') && (props.rowData.device.library_name.indexOf('Neulive') >= 0) && (props.rowData.sd_data_record === true)"
              :meta="props.rowData"
@@ -204,26 +216,26 @@
              @refreshPage="refreshPage"
              @downloadSdCard="downloadSdCard"
            />
-          </va-popover>
-          <va-popover :message="`download ${props.rowData.name} in csv format`" placement="top">
+          </va-popover> -->
+          <va-popover :message="`Download csv`" placement="top">
            <va-button flat small color="gray" icon="fa fa-download" v-if="props.rowData.type !== 'folder' && props.rowData.device.library_name.indexOf('Neulive') >= 0" @click.stop="downloadCsv(props.rowData)"/>
          </va-popover>
-          <va-popover :message="`download ${props.rowData.name} in excel format`" placement="top">
-            <va-button flat small color="gray" icon="fa fa-download" v-if="props.rowData.type !== 'folder' && props.rowData.device.library_name.indexOf('Elite') >= 0" @click.stop="downloadExcel(props.rowData)"/>
+          <va-popover :message="`Download excel`" placement="top">
+            <va-button flat small color="gray" icon="fa fa-download" v-if="props.rowData.type !== 'folder' && props.rowData.device.library_name.indexOf('Elite') >= 0" @click.stop="newDownload(props.rowData)"/>
          </va-popover>
-          <va-popover :message="`download ${props.rowData.name} in csv-edf format`" placement="top">
+          <va-popover :message="`Download edf`" placement="top">
            <va-button flat small color="gray" icon="fa fa-download" v-if="props.rowData.type !== 'folder' && props.rowData.device.library_name.indexOf('Neulive') >= 0" @click.stop="downloadExcel(props.rowData)"/>
          </va-popover>
-          <va-popover :message="`replay ${props.rowData.name}`" placement="top">
+          <va-popover :message="`Replay`" placement="top">
            <va-button flat small color="gray" icon="fa fa-eye" v-if="props.rowData.type !== 'folder'" @click.stop="replay(props.rowData)"/>
          </va-popover>
-          <va-popover :message="`spike ${props.rowData.name}`" placement="top">
+          <va-popover :message="`Spike`" placement="top">
            <va-button flat small color="gray" icon="fa fa-filter" v-if="props.rowData.type !== 'folder' && props.rowData.device.library_name.indexOf('Neulive') >= 0" @click.stop="spike(props.rowData)"/>
          </va-popover>
-          <va-popover :message="`edit ${props.rowData.name}`" placement="top">
+          <va-popover :message="`Edit`" placement="top">
            <va-button flat small color="gray" icon="fa fa-pencil" @click.stop="editFileConfirm(props.rowData)"/>
          </va-popover>
-          <va-popover :message="`delete ${props.rowData.name}`" placement="top">
+          <va-popover :message="`Delete`" placement="top">
            <va-button flat small color="gray" icon="fa fa-trash" @click.stop="deleteFileConfirm(props.rowData)"/>
          </va-popover>
        </template>
@@ -237,19 +249,25 @@ import { debounce } from 'lodash'
 import { file } from '../../../data/file/File'
 import { FulfillingBouncingCircleSpinner } from 'epic-spinners'
 import api from '../../../data/api/index'
-import SdCardButton from '../sdcard/SdCardButton.vue'
+// import SdCardButton from '../sdcard/SdCardButton.vue'
 import configTable from '@/data/config-table/index.js'
+import FolderModal from './FolderModal.vue'
+import Download from '../../download/Download.vue'
+import DownloadOffline from '../../download/DownloadOffline.vue'

 export default {
  name: 'FileTable',
  components: {
    FulfillingBouncingCircleSpinner,
-    SdCardButton,
+    // SdCardButton,
+    FolderModal,
+    Download,
+    DownloadOffline,
  },
  data () {
    return {
      term: null,
-      perPage: '80',
+      perPage: '40',
      perPageOptions: ['20', '40', '80', '160'],

      fileLists: [],
@@ -296,6 +314,18 @@ export default {
      },
      SDuuidList: [],
      controllerList: [],
+
+      // mouse click times
+      clickCounter: 0,
+      // record the selected index
+      clickRecord: [],
+      // record the target
+      clickTarget: null,
+      // mouseup or not
+      clickStatus: false,
+      // record shift+click target
+      shiftIndexRecord: null,
+      downloadIDList: [],
    }
  },
  computed: {
@@ -372,6 +402,9 @@ export default {
        }
      })
    },
+    selectedNumber () {
+      return this.fileLists.filter(file => file.checked).length
+    },
    selected () {
      return this.fileLists.filter(file => file.checked)
    },
@@ -380,20 +413,28 @@ export default {
    mqttPub: function (topic, mes) {
      this.$mqtt.publish(topic, mes)
    },
-    // stopEvent: function (e) {
-    //   console.log(e)
-    //   e.stopPropagation()
-    // },
-    select: function (file) {
-      event.stopPropagation()
-      const idx = this.fileLists.findIndex(f => f.id === file.id)
+    showFolderModal: async function () {
+      this.$refs.folder_modal_ref.selected = this.selected
+      await this.$refs.folder_modal_ref.refreshCollection()
+      this.$refs.folder_modal_ref.showModal = true
+    },
+    unSelectAll: function () {
+      this.fileLists.forEach(element => {
+        element.checked = false
+      })
+    },
+    selectConcat: function (idx) {
      this.fileLists[idx].checked = !this.fileLists[idx].checked
    },
+    select: function (idx) {
+      this.unSelectAll()
+      this.fileLists[idx].checked = true
+    },
    search: debounce(function (term) {
      this.term = term
    }, 400),
    transFileSize: function (fileSize) {
-      if (fileSize === undefined) {
+      if (fileSize === undefined || fileSize === -1) {
        return '--'
      } else {
        return this.GLOBAL.transFileSize(fileSize)
@@ -416,7 +457,98 @@ export default {
        return device.device_name + '\n' + this.GLOBAL.transMac(device.device_address)
      }
    },
+    clickRow: async function (rowData) {
+      this.clickCounter += 1
+      setTimeout(() => { this.clickCounter = 0 }, 500)
+      if (window.getSelection().toString() !== '' && this.clickEvent.shiftKey === false && this.clickCounter !== 2) return true
+      window.getSelection().removeAllRanges()
+      // click target id
+      const idx = this.fileLists.findIndex(f => f.id === rowData.id)
+      setTimeout(async () => {
+        let timeOutTimer
+        // single click
+        if (this.clickCounter === 1) {
+          // meta key or ctrl key
+          if (this.clickEvent.metaKey === true || this.clickEvent.ctrlKey === true) {
+            this.selectConcat(idx)
+            if (this.clickRecord.includes(idx) === false) {
+              this.clickRecord.push(idx)
+            }
+            this.shiftIndexRecord = null
+          } else if (this.clickEvent.shiftKey === true) {
+            // shift key
+            const start = this.clickRecord[this.clickRecord.length - 1]
+            const end = idx
+            // if has shift event has trigger before then reset the checked
+            if (this.shiftIndexRecord !== null) {
+              if (start > this.shiftIndexRecord) {
+                for (let i = start; i >= this.shiftIndexRecord; i--) {
+                  this.fileLists[i].checked = false
+                }
+              }
+              if (start < this.shiftIndexRecord) {
+                for (let i = start; i <= this.shiftIndexRecord; i++) {
+                  this.fileLists[i].checked = false
+                }
+              }
+            }

+            if (start > end) {
+              for (let i = start; i >= end; i--) {
+                this.fileLists[i].checked = true
+              }
+            }
+            if (start < end) {
+              for (let i = start; i <= end; i++) {
+                this.fileLists[i].checked = true
+              }
+            }
+            this.shiftIndexRecord = idx
+          } else {
+            // without any hotKey
+            this.shiftIndexRecord = null
+            this.clickRecord.length = 0
+            this.selectConcat(idx)
+            if (this.clickRecord.includes(idx) === false) {
+              this.clickRecord.push(idx)
+            }
+          }
+          timeOutTimer = setTimeout(() => {
+            this.clickCounter = 0
+          }, 300)
+        } else if (this.clickCounter === 2) {
+          clearTimeout(timeOutTimer)
+          this.clickCounter = 0
+          await this.openFile(rowData)
+        }
+      }, 0)
+    },
+    mouseDown: async function (e) {
+      this.clickEvent = e
+      this.clickStatus = true
+    },
+    mouseUp: function () {
+      this.clickStatus = false
+    },
+    mouseMove: async function (e, rowData) {
+      const idx = this.fileLists.findIndex(f => f.id === rowData.id)
+      if (e.metaKey === true || e.ctrlKey === true) {
+        if (this.clickStatus === true) {
+          const indexOfRecord = this.clickRecord.indexOf(idx)
+          // if (indexOfRecord === this.clickRecord.length - 1) return
+          // console.log('indexOfRecord', indexOfRecord)
+          if (indexOfRecord !== -1) {
+            console.log(idx, 'false')
+            this.clickRecord.splice(indexOfRecord, 1)
+            this.fileLists[idx].checked = false
+          } else {
+            console.log(idx, 'true')
+            this.clickRecord.push(idx)
+            this.fileLists[idx].checked = true
+          }
+        }
+      }
+    },
    openFile: async function (info) {
      if (info.type === 'folder') {
        this.currentInfo = info
@@ -529,56 +661,67 @@ export default {
      }, 100)
    },
    editFile: async function () {
-      // TODO editFile
-      if (this.editInfo.type !== 'folder') {
-        await api.meta.update(this.editInfo.info.id, { name: this.editInfo.changedName })
-      } else {
-      }
-      await this.editFileDone()
-    },
-    checkFileNameValidate: debounce(function (term) {
-      const illegalChar = term.match(/[^(\w\-)]+/gm)
-      this.editInfo.changedName = term
-      if (term.length === 0) {
-        // input text empty
-        this.editInfo.error = true
-        this.editInfo.success = false
-        this.editInfo.errorMessages.pop()
-        this.editInfo.errorMessages.push(this.editInfo.errorMessagesAll[1])
-      } else if (illegalChar !== null) {
-        // input text illegal
-        this.editInfo.error = true
-        this.editInfo.success = false
-        this.editInfo.errorMessages.pop()
-        this.editInfo.errorMessages.push(this.editInfo.errorMessagesAll[0] + ' ' + illegalChar[0])
-      } else {
-        const existedFile = this.fileLists.filter((file) => {
-          if (file.name != null) {
-            return file.name.replace('/', '') === term
-          } else {
-            return false
-          }
-        })
-        if (existedFile.length === 0) {
-          this.editInfo.error = false
-          this.editInfo.success = true
-        } else {
-          // file name exist
-          this.editInfo.error = true
-          this.editInfo.success = false
-          this.editInfo.errorMessages.pop()
-          this.editInfo.errorMessages.push(this.editInfo.errorMessagesAll[2])
-        }
-      }
-    }, 200),
-    editFileDone: async function () {
-      const tmpCurrentPage = this.$refs.datatable_ref.currentPage
-      await this.refreshPage()
-      this.$refs.datatable_ref.currentPage = tmpCurrentPage
-      this.$refs.datatable_ref.inputPage(tmpCurrentPage)
      this.showToast(`${this.editInfo.info.name} -> ${this.editInfo.changedName}`, {
        position: 'bottom-right',
      })
+      // TODO editFile
+      if (this.editInfo.info.type === 'folder') {
+        await api.collection.update(this.editInfo.info.id, { name: this.editInfo.changedName })
+        const folder = this.fileLists.find((file) => {
+          if (file.type === 'folder' && this.editInfo.info.id === file.id) return true
+        })
+        folder.name = this.editInfo.changedName
+      } else {
+        await api.meta.update(this.editInfo.info.id, { name: this.editInfo.changedName })
+        const meta = this.fileLists.find((file) => {
+          if (file.type === undefined && this.editInfo.info.id === file.id) return true
+        })
+        meta.name = this.editInfo.changedName
+      }
+      // await this.editFileDone()
+    },
+    checkFileNameValidate: debounce(function (term) {
+      // const illegalChar = term.match(/[^(\w\-)]+/gm)
+      this.editInfo.changedName = term
+      // if (term.length === 0) {
+      //   // input text empty
+      //   this.editInfo.error = true
+      //   this.editInfo.success = false
+      //   this.editInfo.errorMessages.pop()
+      //   this.editInfo.errorMessages.push(this.editInfo.errorMessagesAll[1])
+      // } else if (illegalChar !== null) {
+      //   // input text illegal
+      //   this.editInfo.error = true
+      //   this.editInfo.success = false
+      //   this.editInfo.errorMessages.pop()
+      //   this.editInfo.errorMessages.push(this.editInfo.errorMessagesAll[0] + ' ' + illegalChar[0])
+      // } else {
+      //   const existedFile = this.fileLists.filter((file) => {
+      //     if (file.name != null) {
+      //       return file.name.replace('/', '') === term
+      //     } else {
+      //       return false
+      //     }
+      //   })
+      //   if (existedFile.length === 0) {
+      //     this.editInfo.error = false
+      //     this.editInfo.success = true
+      //   } else {
+      //     // file name exist
+      //     this.editInfo.error = true
+      //     this.editInfo.success = false
+      //     this.editInfo.errorMessages.pop()
+      //     this.editInfo.errorMessages.push(this.editInfo.errorMessagesAll[2])
+      //   }
+      // }
+    }, 200),
+    editFileDone: async function () {
+      // const tmpCurrentPage = this.$refs.datatable_ref.currentPage
+      // await this.refreshPage()
+      // if (this.$refs.datatable_ref) {
+      //   this.$refs.datatable_ref.currentPage = tmpCurrentPage
+      //   this.$refs.datatable_ref.inputPage(tmpCurrentPage)
+      // }
    },
    undoEdit: function () {
      this.editInfo.success = false
@@ -591,6 +734,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 {
@@ -601,10 +745,19 @@ export default {
    },
    deleteFolder: async function (id) {
      await api.collection.update(id, { deleted: true })
+      const childrenCollection = await api.collection.getByParent('folder', id)
+      const childrenMeta = await api.meta.getByParent('folder', id)
+      for (const collection of childrenCollection.data) {
+        await this.deleteFolder(collection.id)
+      }
+      for (const meta of childrenMeta.data) {
+        await this.deleteSingleFileByDeleteInfo(meta.id)
+      }
      await api.collection.clearDel()
    },
-    deleteSingleFileByDeleteInfo: async function () {
-      await api.meta.update(this.deleteInfo.metaID, { deleted: true })
+    deleteSingleFileByDeleteInfo: async function (metaID) {
+      if (metaID === undefined) metaID = this.deleteInfo.metaID
+      await api.meta.update(metaID, { deleted: true })
      await api.meta.clearDel()
    },
    deleteFileConfirm: function (info) {
@@ -628,10 +781,23 @@ export default {
    deleteFileDone: async function () {
      const tmpCurrentPage = this.$refs.datatable_ref.currentPage
      // rebuild table
-      this.fileLists = this.fileLists.filter(file => file.name !== this.deleteInfo.name)
-      await this.refreshPage()
-      this.$refs.datatable_ref.currentPage = tmpCurrentPage
-      this.$refs.datatable_ref.inputPage(tmpCurrentPage)
+      if (this.deleteInfo.metaID) {
+        this.fileLists = this.fileLists.filter(file => {
+          return file.id !== this.deleteInfo.metaID
+        })
+      }
+      if (this.deleteInfo.folderID) {
+        this.fileLists = this.fileLists.filter(file => {
+          if (file.type === 'folder') {
+            return file.id !== this.deleteInfo.folderID
+          }
+          return true
+        })
+      }
+      // await this.refreshPage()
+      await this.$refs.datatable_ref.inputPage(1)
+      await this.$refs.datatable_ref.inputPage(tmpCurrentPage)
+      // this.$refs.datatable_ref.inputPage(tmpCurrentPage)
      // this.loadingFiles = false
      this.showToast(`deleted ${this.deleteInfo.name}`, {
        position: 'bottom-right',
@@ -647,7 +813,7 @@ export default {
      this.showToast('deleting file...', {
        position: 'bottom-right',
      })
-      this.deleteSelected()
+      await this.deleteSelected()
    },
    inputFieldReset: function (info) {
      info.name = ''
@@ -675,7 +841,7 @@ export default {

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

@@ -685,25 +851,67 @@ export default {
      // this.$refs.datatable_ref.refresh()
      // this.$refs.datatable_ref.currentPage = 1
    },
-    downloadSelected: function () {
-      for (let i = 0; i < this.selected.length; i++) {
-        const meta = this.selected[i]
-        this.downloadExcel(meta)
+    getAllChildrenByParent: async function (collection) {
+      const childrenCollection = await api.collection.getByParent('folder', collection)
+      const childrenMeta = await api.meta.getByParent('folder', collection)
+      for (const collection of childrenCollection.data) {
+        await this.getAllChildrenByParent(collection.id)
+      }
+      for (const meta of childrenMeta.data) {
+        this.downloadIDList.push(meta.id)
      }
    },
-    async deleteSelected () {
+    downloadSelected: async function () {
+      this.downloadIDList.length = 0
+      const meta = this.selected
+      if (Array.isArray(meta) === true) {
+        for (const ele of meta) {
+          if (ele.type === 'folder') {
+            await this.getAllChildrenByParent(ele.id)
+          } else {
+            this.downloadIDList.push(ele.id)
+          }
+        }
+      }
+      const connectCheck = await api.connection.check()
+      if (connectCheck.status === 200) {
+        this.$refs.download_ref.count = 0
+        this.$refs.download_ref.fileNums = this.downloadIDList.length
+        this.$refs.download_ref.metaListNew.push(...this.downloadIDList)
+      } else {
+        this.$refs.download_offline_ref.count = 0
+        this.$refs.download_offline_ref.fileNums = this.downloadIDList.length
+        this.$refs.download_offline_ref.metaListNew.push(...this.downloadIDList)
+      }
+    },
+    newDownload: async function (data) {
+      const connectCheck = await api.connection.check()
+      if (connectCheck.status === 200) {
+        this.$refs.download_ref.fileNums = 1
+        this.$refs.download_ref.metaListNew.push(data.id)
+      } else {
+        this.$refs.download_offline_ref.fileNums = 1
+        this.$refs.download_offline_ref.metaListNew.push(data.id)
+      }
+    },
+    deleteSelected: async function () {
      for (let i = 0; i < this.selected.length; i++) {
        const meta = this.selected[i]
        this.fillDeleteInfo(meta)
-        await this.deleteSingleFileByDeleteInfo()
+        if (this.deleteInfo.metaID === undefined) {
+          await this.deleteFolder(this.deleteInfo.folderID)
+        } else {
+          await this.deleteSingleFileByDeleteInfo()
+        }
        this.showToast(`deleted ${this.deleteInfo.name}`, {
          position: 'bottom-right',
        })
      }
      const tmpCurrentPage = this.$refs.datatable_ref.currentPage
-      await this.refreshPage()
-      this.$refs.datatable_ref.currentPage = tmpCurrentPage
-      this.$refs.datatable_ref.inputPage(tmpCurrentPage)
+      // filter the checked files
+      this.fileLists = this.fileLists.filter((file) => { return file.checked === false })
+      await this.$refs.datatable_ref.inputPage(1)
+      await this.$refs.datatable_ref.inputPage(tmpCurrentPage)
    },
    downloadCsv: async function (meta) {
      const href = location.href.split('/')[2]
@@ -715,20 +923,26 @@ export default {
      }
    },
    downloadExcel: async function (meta) {
+      this.downloadIDList.length = 0
      const href = location.href.split('/')[2]
      const connectCheck = await api.connection.check()
-      if (meta.device.library_name.indexOf('Elite') >= 0) {
-        if (connectCheck.status === 200) {
-          window.open('http://' + href + '/#/download/online/excel/' + meta.id)
-        } else {
-          window.open('http://' + href + '/#/download/offline/excel/' + meta.id)
-        }
-      } else if (meta.device.library_name.indexOf('Neulive') >= 0) {
-        if (connectCheck.status === 200) {
-          window.open('http://' + href + '/#/download/online/csv-edf/' + meta.id)
-        } else {
-          window.open('http://' + href + '/#/download/offline/csv-edf/' + meta.id)
+      let metaID = ''
+      if (Array.isArray(meta) === true) {
+        for (const ele of meta) {
+          if (ele.type === 'folder') {
+            await this.getAllChildrenByParent(ele.id)
+          } else {
+            this.downloadIDList.push(ele.id)
+          }
        }
+      } else {
+        this.downloadIDList.push(meta.id)
+      }
+      metaID = this.downloadIDList.join('-')
+      if (connectCheck.status === 200) {
+        window.open('http://' + href + '/#/download/online/excel/' + metaID)
+      } else {
+        window.open('http://' + href + '/#/download/offline/excel/' + metaID)
      }
    },
    downloadSdCard: async function (meta) {
@@ -773,11 +987,14 @@ export default {
        })
      }
    },
-    getWorkingMode: function (rowData) {
+    getWorkingMode: function (device, parameterSet) {
      try {
-        if (rowData.type === 'folder') return ''
-        return configTable.getModeConfig(rowData.device.library_name, rowData.parameter_set.MODE).name
-      } catch {
+        if (parameterSet) {
+          return configTable.getModeConfig(device.library_name, parameterSet.MODE).name
+        }
+        return ''
+      } catch (e) {
+        console.log('e', e)
        return ''
      }
    },
@@ -786,8 +1003,16 @@ export default {
    const controllerList = await api.controller.getAll()
    this.controllerList = controllerList.data
    this.getSDuuidList()
+    window.addEventListener('keypress', (e) => {
+      this.keyboardEvent = e
+    })
  },
  destroyed () {
  },
 }
 </script>
+<style>
+  .text-not-select {
+    user-select: none;
+  }
+</style>
@@ -0,0 +1,101 @@
+<template>
+  <va-modal
+    class="flex sm12 xl12 md12 xs12"
+    v-model="showModal"
+    size="small"
+    :title="'MOVE'"
+    :okText=" $t('modal.confirm') "
+    @ok="moveFolder()"
+    @cancel="cancel()"
+  >
+    <div class="row flex sm12 xl12 md12 xs12">
+      <va-select
+        v-model="destination"
+        :options="option"
+        class="va-select-without-margin"
+        searchable
+      />
+    </div>
+  </va-modal>
+</template>
+<script>
+import api from '@/data/api/index'
+
+export default {
+  name: 'aaa',
+  data: () => {
+    return {
+      showModal: false,
+      option: [],
+      destination: '',
+      selected: [],
+    }
+  },
+  methods: {
+    cancel: function () {
+      this.destination = ''
+      this.selected = []
+    },
+    refreshCollection: async function () {
+      await this.getAllCollection()
+    },
+    moveFolder: async function () {
+      for (const e of this.selected) {
+        if (e.type === 'folder') {
+          await api.collection.update(e.id, {
+            parent: {
+              folder: [this.destination.id],
+            },
+          })
+        }
+        if (e.type === undefined) {
+          await api.meta.update(e.id, {
+            parent: {
+              folder: [this.destination.id],
+            },
+          })
+        }
+      }
+      this.cancel()
+      this.$emit('refreshPage')
+    },
+    getAllCollection: async function () {
+      // get all collections by api
+      const collectionResponse = await api.collection.getAll()
+      // filter the root folder & select folder itself
+      const allCollection = collectionResponse.data.filter((ele) => {
+        return ele.name !== 'root' && this.selected.findIndex(v => v.id === ele.id && v.type === 'folder') === -1
+      })
+      // create a new list of collection contain text for display
+      const newCollection = allCollection.map((ele) => {
+        let parentName = ''
+        // if has parent
+        if (Object.keys(ele.parent).length > 0) {
+          // get parent name
+          for (const id of ele.parent.folder) {
+            const parent = allCollection.find((v) => {
+              return v.id === id
+            })
+            if (parent) {
+              parentName = parent.name
+            }
+          }
+        }
+
+        // if parent name is admin then the name is remain origin
+        if (ele.name === 'admin' || parentName === 'admin') {
+          ele.text = ele.name
+        } else {
+          // if not the name contain it's parent
+          ele.text = parentName + ' / ' + ele.name
+        }
+        return ele
+      })
+      this.option = newCollection
+    },
+  },
+  mounted () {
+  },
+}
+</script>
+<style></style>
@@ -0,0 +1,419 @@
+<template>
+  <div @click="checkAlert()">
+    <div class="top-bar">
+      <!-- Top Bar Content -->
+      <div style="display: flex; justify-content: flex-end; gap: 1%;">
+        <div style="cursor: pointer;">
+          <router-link
+            :to="{ name: 'task-content'}"
+          >          <img src="@/assets/img/octicon_gear.svg"></router-link>
+        </div>
+        <div style="cursor: pointer;">
+          <img src="@/assets/img/ph_info.svg">
+        </div>
+        <div style="cursor: pointer;">
+          <img src="@/assets/img/restart_button.svg">
+        </div>
+      </div>
+    </div>
+    <div class="sidebar-right">
+      <!-- Right Sidebar Content -->
+      <div class="button-container">
+        <!-- <div class="play-button"><img class="play-button" src="@/assets/img/alert-page/START.svg"></div>
+        <div class="play-button"><img class="play-button" src="@/assets/img/alert-page/STOP.svg"></div> -->
+        <va-button class="pa-0 ma-0 mt-2 play-button" color="#025dd8" @click="startAll">
+          <va-icon
+            style="font-size: 24px;"
+            name="fa fa-play"
+            color="white"
+          />
+        </va-button>
+        <va-button class="mr-3 mb-2 play-button" color="#a6a7a6" @click="stopAll">
+          <va-icon
+            style="font-size: 24px;"
+            class="play-icon"
+            name="fa fa-stop"
+            color="white"
+          />
+        </va-button>
+      </div>
+      <hr class="hr-line">
+      <div>
+        <div class="ml-2 mr-2" v-for="(device, index) in deviceListNew" :key="device.id">
+          <va-item :key="device.id" :class="'pa-0 ma-0 mb-2 ' + ((device.alert === true) ? 'yellow-box' : 'white-box')"
+          >
+            <va-item-section style="justify-content: right;" side>
+              {{ label[index] }}
+            </va-item-section>
+            <va-item-section avatar style="justify-content: right;">
+              <va-avatar style="border-radius: 0;">
+                <img :src="elitePic" :alt="device.name">
+              </va-avatar>
+            </va-item-section>
+            <va-item-section style="justify-content: right;">
+              <span :class="(device.alert === true) ? 'yellow-dot' : (device.status === 1) ? 'green-dot' :'blue-dot'"></span>
+            </va-item-section>
+            <va-item-section>
+              {{ getAlertTime(device.alert_time) }}
+            </va-item-section>
+            <va-item-section class="mr-2" side>
+              <button v-if="device.alert === true" class="reset-box" @click="reset(device.id)">RESET</button>
+              <button v-else class="reset-box disable">RESET</button>
+            </va-item-section>
+          </va-item>
+        </div>
+      </div>
+    </div>
+    <div class="main-content">
+      <div class="row">
+        <div  class="flex lg3 md3 sm3 xs3">
+          <div class="flex date-block">
+            <div
+              class="sm-text"
+              style="display: flex; justify-content: center; align-items: end;"
+            >{{ currentDate }}</div>
+            <div>{{ currentTime }}</div>
+          </div>
+        </div>
+        <div class="flex lg6 md6 sm6 xs6" >
+          <div style="height: 80vh; display: flex; align-items: end;">
+            <div style="height: 70vh; width: 70vh;">
+              <!-- <img id="aaa" :src="humanbodyPic" width="80%" height="80%"> -->
+              <svg fill="#757a80" version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+                viewBox="-69 0 117 256" xml:space="preserve">
+                <path d="M-10.9,4.9c11.3,0,20.5,9.2,20.5,20.5S0.4,45.9-10.9,45.9s-20.5-9.2-20.5-20.5S-22.2,4.9-10.9,4.9z M14.9,51.2h-51.2
+                  c-14.2,0-25.6,11.4-25.6,25.6v62.6c0,4.9,3.9,9,9,9s9-3.9,9-9V81.9c0-1.4,1.2-2.6,2.6-2.6s2.6,1.2,2.6,2.6v155.2
+                  c0,7.7,5.7,14,12.8,14s12.8-6.3,12.8-14v-88.5c0-1.4,1.2-2.6,2.6-2.6c1.4,0,2.6,1.2,2.6,2.6v88.5c0,7.7,5.7,14,12.8,14
+                  c7.1,0,12.8-6.3,12.8-14V81.9c0-1.4,1.2-2.6,2.6-2.6s2.6,1.2,2.6,2.6v57.6c0,4.9,3.9,9,9,9s9-3.9,9-9V76.8
+                  C40.5,62.6,28.8,51.2,14.9,51.2z"/>
+                <!-- <circle id="buttonA" cx="-50" cy="125" r="10" fill="#008afa" /> -->
+                <circle id="buttonA" cx="-53" cy="110" r="9" stroke="white" stroke-width="1" fill="#d4d3d4" />
+                <text id="textA" x="-53" y="110" font-family="Arial" font-size="12" fill="white" text-anchor="middle" dominant-baseline="central">A</text>
+                <circle id="buttonB"  cx="32" cy="110" r="9" stroke="white" stroke-width="1" fill="#d4d3d4" />
+                <text id="textB" x="32" y="110" font-family="Arial" font-size="12" fill="white" text-anchor="middle" dominant-baseline="central">B</text>
+                <circle id="buttonC" cx="-26" cy="200" r="12" stroke="white" stroke-width="1" fill="#d4d3d4" />
+                <text id="textC" x="-26" y="200" font-family="Arial" font-size="12" fill="white" text-anchor="middle" dominant-baseline="central">C</text>
+                <circle id="buttonD" cx="5" cy="200" r="12" stroke="white" stroke-width="1" fill="#d4d3d4" />
+                <text id="textD" x="5" y="200" font-family="Arial" font-size="12" fill="white" text-anchor="middle" dominant-baseline="central">D</text>
+              <!-- <circle id="buttonB" cx="50" cy="20" r="10" fill="#fe7171" />
+              <circle id="buttonC" cx="80" cy="20" r="10" fill="#d3d3d3" />
+              <circle id="buttonD" cx="20" cy="50" r="10" fill="#ffe12f" /> -->
+              </svg>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <audio id="new_alert">
+      <source src="@/assets/success_notification.mp3"/>
+    </audio>
+  </div>
+</template>
+
+<script>
+import { mapFields } from 'vuex-map-fields'
+import eliteImgUrl from '@/assets/img/elite_img.png'
+import humanbody from '@/assets/img/human-body.svg'
+import { taskInfo } from '@/data/task/TaskInfo'
+
+export default {
+  name: 'newPage',
+  computed: {
+    currentDate () {
+      const dayOfWeekMap = ['日', '一', '二', '三', '四', '五', '六']
+      return this.currentDateTime.getFullYear() + '/' +
+                (this.currentDateTime.getMonth() + 1).toString().padStart(2, '0') + '/' +
+                this.currentDateTime.getDate().toString().padStart(2, '0') + ' 星期' +
+                dayOfWeekMap[this.currentDateTime.getDay()]
+    },
+    currentTime () {
+      return this.currentDateTime.getHours().toString().padStart(2, '0') + ':' +
+                this.currentDateTime.getMinutes().toString().padStart(2, '0') + ':' +
+                this.currentDateTime.getSeconds().toString().padStart(2, '0')
+    },
+    ...mapFields('taskContent', [
+      'deviceListNew',
+    ]),
+  },
+  data () {
+    return {
+      currentDateTime: new Date(),
+      controllerID: null,
+      humanbodyPic: humanbody,
+      elitePic: eliteImgUrl,
+      label: ['A', 'B', 'C', 'D'],
+      buttons: [
+        { id: 'a', label: 'A' },
+        { id: 'b', label: 'B' },
+        { id: 'c', label: 'C' },
+        { id: 'd', label: 'D' },
+      ],
+    }
+  },
+  methods: {
+    getAlertTime: function (datetimeString) {
+      if (datetimeString === 'None') return
+      // Parse the datetime string into a Date object
+      const startTime = new Date(datetimeString)
+
+      // Get the current time
+      const currentTime = new Date()
+
+      // Calculate the duration in milliseconds
+      const duration = currentTime - startTime
+
+      // Convert milliseconds to minutes and seconds
+      const minutes = Math.floor(duration / 60000)
+      const seconds = Math.floor((duration % 60000) / 1000)
+
+      // Format the duration as "minutes:seconds"
+      const formattedDuration = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`
+
+      // console.log(formattedDuration)
+      return formattedDuration
+    },
+    async reset (device) {
+      this.$mqtt.publish(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'reset_trigger/0',
+        device: device,
+      }))
+      // check all device is not alert
+    },
+    startAll: function () {
+      for (const device of this.deviceListNew) {
+        this.$mqtt.publish(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+          header: 'device_instruction/0',
+          device: device.memory_board,
+          instruction: 'start',
+        }))
+        device.status = 1
+      }
+    },
+    stopAll: function () {
+      for (const device of this.deviceListNew) {
+        this.$mqtt.publish(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+          header: 'device_instruction/0',
+          device: device.memory_board,
+          instruction: 'interrupt',
+        }))
+        device.status = 0
+        device.alert = false
+        device.alert_time = 'None'
+      }
+    },
+    checkAlert: async function () {
+      let alertChecked = true
+      for (let i = 0; i < this.deviceListNew.length; i++) {
+        if (this.deviceListNew[i].alert === true) {
+          await this.playAlert()
+          alertChecked = false
+        }
+      }
+      if (alertChecked === true) {
+        await this.stopAlert()
+      }
+    },
+    playAlert: async function () {
+      const a = document.getElementById('new_alert')
+      // setTimeout(async () => {
+      //   await this.closeAlert()
+      // }, 30000)
+      a.loop = true
+      await a.play()
+    },
+    stopAlert: async function () {
+      const a = document.getElementById('new_alert')
+      await a.pause()
+    },
+  },
+  mounted () {
+    setInterval(() => {
+      this.currentDateTime = new Date()
+    }, 1000)
+    this.$mqtt.publish(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+      header: 'get_device_info_all/0',
+    }))
+  },
+  watch: {
+    deviceListNew: {
+      deep: true,
+      handler: async function () {
+        for (let i = 0; i < 4; i++) {
+          const button = document.getElementById('button' + this.label[i])
+          if (this.deviceListNew[i] === undefined) {
+            button.style.fill = '#d4d3d4'
+          } else {
+            if (this.deviceListNew[i].alert === true) {
+              button.style.fill = '#ffe13a'
+            } else if (this.deviceListNew[i].status === 1) {
+              button.style.fill = '#0eff9a'
+            } else {
+              button.style.fill = '#008cf9'
+            }
+          }
+        }
+        await this.checkAlert()
+      },
+    },
+  },
+}
+</script>
+
+<style scoped>
+  .top-bar {
+    background-color: #0040a7;
+    color: #ffffff;
+    padding: 10px 20px;
+    text-align: center;
+    position: relative; /* Needed for z-index to work */
+    z-index: 2; /* Higher than sidebar-right */
+    height: 3rem;
+  }
+
+  .sidebar-right {
+    background-color: hsl(0deg 0% 92.16%);
+    position: fixed;
+    right: 0;
+    top: 5%;
+    bottom: 0;
+    width: 25%; /* Adjust the width as needed */
+    overflow: auto;
+    z-index: 1;
+  }
+
+  /* .sidebar-right button {
+    display: block;
+    padding: 10px;
+    color: #333333;
+    text-align: left;
+    border: none;
+    background: none;
+    width: 100%;
+    border-bottom: 1px solid #dddddd;
+    cursor: pointer;
+  } */
+
+  .sidebar-right button:hover {
+    background-color: #e7e7e7;
+  }
+
+  .main-content {
+    margin-top: 50px; /* Adjust based on the height of the top bar */
+    padding: 20px;
+  }
+
+  .button-container {
+    display: flex;
+    justify-content: space-around;
+    padding: 20px;
+  }
+
+  .yellow-box {
+    height: 80px;
+    background-color: hsl(61.48deg 100% 84.12%);
+    border-radius: 10px; /* This gives the rounded corners */
+    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); /* Adjust the color and spread as needed */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 20px;
+    font-family: 'Arial', sans-serif; /* This is a common sans-serif font */
+    font-weight: bold;
+  }
+
+  .white-box {
+    height: 80px;
+    background-color: hsl(0deg 0% 100%);
+    border-radius: 10px; /* This gives the rounded corners */
+    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); /* Adjust the color and spread as needed */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding-top: 25px;
+    padding-bottom: 25px;
+    font-family: 'Arial', sans-serif; /* This is a common sans-serif font */
+    font-weight: bold;
+  }
+
+  .reset-box {
+    width: 100%;
+    height: 50px;
+    background-color: #53b7ab;
+    color: white;
+    padding: 10px;
+    font-family: 'inter';
+    text-align: left;
+    border: none;
+    border-bottom: 1px solid #dddddd;
+    border-radius: 10px;
+    cursor: pointer;
+  }
+
+  .reset-box.disable {
+    background-color: #e9e9e9;
+    cursor: default;
+  }
+
+  .yellow-dot {
+    height: 16px;
+    width: 16px;
+    background-color: #ffe13a;
+    border-radius: 50%;
+  }
+
+  .green-dot {
+    height: 16px;
+    width: 16px;
+    background-color: #0eff9a;
+    border-radius: 50%;
+  }
+
+  .blue-dot {
+    height: 16px;
+    width: 16px;
+    background-color: #008cf9;
+    border-radius: 50%;
+  }
+
+  #Layer_1 {
+    width: 100%;
+    height: 100%;
+  }
+
+  .date-block {
+    width: 100%;
+    height: 200px;
+    display: flex;
+    flex-direction: column;
+    font-size: 48px;
+    background-color: #0056b3;
+    color: white;
+    padding: 10px;
+    text-align: center;
+    border-radius: 3%;
+  }
+
+  .play-button {
+    height: 60px;
+    width: 60px;
+    border-radius: 50%;
+  }
+
+  .play-icon::before,
+  .stop-icon::before {
+    position: relative;
+    left: -1px; /* Move icon 5px to the left */
+  }
+
+  .sm-text {
+    font-size: 24px;
+  }
+
+  .hr-line {
+    border: 0;
+    height: 1px;
+    background-color: #c6c7c6;
+    margin: 20px;
+    margin-top: 0;
+  }
+</style>
@@ -15,6 +15,7 @@
      :mask-color="'rgba(0, 0, 0, 0)'"
      :visible.sync="taskViewPanel.show"
      :title="(taskViewPanel.type === 1) ? 'Device' : (taskViewPanel.type === 3) ? 'Condition' : (taskViewPanel.type === 4) ? 'Parameter' : ''"
+      @closed="onClosing"
      resizable
    >
      <project-task/>
@@ -54,8 +55,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',
      },
    }
@@ -100,6 +101,9 @@ export default {
    },
  },
  methods: {
+    onClosing: async function () {
+      await this.saveProject(this.getSelectProject)
+    },
    pageToast: function (mes) {
      this.showToast(
        mes,
@@ -163,14 +167,6 @@ export default {
    },
    saveProject: async function (project) {
      this.updateProject({ project: project, api: this.API })
-      this.showToast(
-        'project update finish',
-        {
-          icon: 'fa-bell',
-          position: 'bottom-right',
-          duration: 5000,
-        },
-      )
    },
    detect: async function (device) {
      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
@@ -213,6 +209,9 @@ export default {
      header: 'get_running_project/0',
    }))
  },
+  destroyed () {
+    this.projectManagerPanel.show = true
+  },
 }
 </script>

@@ -4,34 +4,25 @@
      <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,12 +1,13 @@
 <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="(selectProjectIndex === index) ? 'project-list-text project-list-focus': 'project-list-text project-list'" v-for="(project, index) in configList" :key="index" @click="select(index)">
        <va-item-section @dblclick.native="switchEdit('name', index)">
          <div v-if="projectTable.name == index">
            <va-input
+              :ref="'input_ref'"
              v-model="project.name"
-              style="width: 100px;"
+              style="min-width: 100px;"
              @blur="switchEdit('name', -1, project)"
              @keyup.enter="switchEdit('name', -1, project)"
            />
@@ -14,13 +15,11 @@
          <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-copy mr-2" color="bloack" @click.native.stop="copyProject({ project: project, index: index, api: API })"></va-icon>
-          <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 v-if="selectDeleteIndex !== index" class="mr-2" src="@/assets/img/project/cross.svg" @click.stop="confirmDelete($event, index)">
+          <img v-else class="mr-2" src="@/assets/img/project/delete14_14.svg" @click.stop="_deleteProject(project, index)">
        </va-item-section>
      </va-item>
    </div>
@@ -33,9 +32,28 @@ import types from '@/store/modules/project/types'

 export default {
  name: 'project-manager-list',
+  props: {
+    filterText: {
+      type: String,
+      default: '',
+    },
+  },
  computed: {
+    configList () {
+      const projectList = this.projectConfigList
+      projectList.sort((a, b) => {
+        const date1 = new Date(a.created_at).getTime()
+        const date2 = new Date(b.created_at).getTime()
+        return date2 - date1
+      })
+      if (this.filterText === '') return projectList
+      return projectList.filter(ele => ele.name.includes(this.filterText))
+    },
+
    ...mapFields('project', [
      'projectConfigList',
+      'projectSelectIndex',
+      'projectTableSelectIndex',
    ]),
  },
  data () {
@@ -43,15 +61,48 @@ export default {
      projectTable: {
        name: -1,
      },
+      selectProjectIndex: -1,
+      selectDeleteIndex: -1,
    }
  },
  methods: {
+    reset: function () {
+      this.selectProjectIndex = -1
+      this.selectDeleteIndex = -1
+    },
+    resetDelete: function (e) {
+      if (e.target.classList.contains('clicked')) {
+        e.target.classList.remove('clicked')
+        return
+      }
+      this.selectDeleteIndex = -1
+    },
+    confirmDelete: function (e, index) {
+      e.target.classList.add('clicked')
+      this.selectProjectIndex = index
+      this.selectDeleteIndex = index
+      window.addEventListener('mousedown', this.resetDelete, { once: true })
+    },
+    _deleteProject: async function (project, index) {
+      this.reset()
+      await this.deleteProject({ project: project, index: index, api: this.API })
+    },
+    select: function (index) {
+      this.selectProjectIndex = index
+      this.selectDeleteIndex = -1
+      this.projectTableSelectIndex = -1
+      this.selectProject({ index: index })
+    },
+
    switchEdit: function (tag, index, project) {
      if (this.projectTable[tag] >= 0) {
        this.projectTable[tag] = -1
        project && this.API.project.update(project.id, { name: project.name })
      } else {
        this.projectTable[tag] = index
+        this.$nextTick(() => {
+          this.$refs.input_ref[0].$refs.input.focus()
+        })
      }
    },
    ...mapActions('project',
@@ -66,3 +117,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,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,37 +1,18 @@
 <template>
  <div class="flex sm12 xl12 md12 xs12">
-    <!-- <span>Device</span>
-    <div class="row flex sm12 xl12 md12 xs12" v-if="Object.keys(registeredDevice).length > 0">
-      <div class="flex sm12 xl6 md6 xs12" v-for="(device, key) in registeredDevice" :key="key">
-        <va-button @click="selectDevice(key)" small>{{ getDeviceShowNameProject(key) }}</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 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 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 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>
@@ -46,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 () {
@@ -128,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)) {
@@ -137,18 +124,6 @@ export default {

      for (const key in this.conditionObj) {
        if (this.conditionObj[key].select) {
-          // create fake condition if duplicate type & target
-          if (Object.values(this.getSelectTask.condition).findIndex(ele => ele.type === 'previous_task_done' && ele.target === this.deviceSelect) === -1) {
-            // create fake start previous done
-            const fakeStartActionUUID = this.GLOBAL.getUUID()
-            const fakeAction = this.createAction(fakeStartActionUUID, 'start', this.deviceSelect)
-            const fakeConditionUUID = this.GLOBAL.getUUID()
-            const fakeCondition = this.createCondition(fakeConditionUUID, 'previous_task_done', 'equal', '')
-            this.setConditionTask({ condition: fakeCondition })
-            fakeAction[fakeStartActionUUID].condition.push(fakeConditionUUID)
-            this.setActionTask({ action: fakeAction })
-          }
-
          const conditionUUID = this.GLOBAL.getUUID()
          const newCondition = this.createCondition(conditionUUID, key, 'equal', this.conditionObj[key].value)

@@ -61,7 +61,10 @@ export default {
    },

    taskDevice () {
-      return this.getSelectTask.device
+      if (this.getSelectTask.device) {
+        return this.getSelectTask.device
+      }
+      return null
    },
    ...mapGetters('project', [
      types.project.getSelect,
@@ -104,10 +107,23 @@ export default {
    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)
+      // 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)
@@ -116,6 +132,8 @@ export default {
    ...mapActions('project',
      [
        types.project.createDevice,
+        types.task.deleteDevice,
+        types.task.createActionConditionPair,
      ],
    ),
  },
@@ -1,22 +1,12 @@
 <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="device.library"
+        :library="library"
        :place="'scheduler'"
+        :resetParameterModeChange="true"
        @setParameter="setParameter"
        @setParameterWithDebounce="setParameterWithDebounce"
      />
@@ -38,6 +28,11 @@ export default {
    DeviceParameterRecording,
  },
  computed: {
+    library () {
+      if (this.device === null || this.device === undefined) return null
+      return this.device.library
+    },
+
    ...mapGetters('project', [
      types.task.getSelect,
      types.task.getParameterSet,
@@ -48,6 +43,7 @@ export default {
      'taskViewPanel',
      'taskSelectKey',
      'deviceSelectKey',
+      'projectSelectIndex',
    ]),
  },
  data () {
@@ -71,7 +67,8 @@ export default {
      condition.select = !condition.select
    },
    setParameter: function (name, value) {
-      this.parameter = Object.assign({}, this.parameter)
+      // this.parameter = Object.assign({}, this.parameter)
+      this.parameter[name] = value

      if (this.parameterUUID === '') {
        this.parameterUUID = this.GLOBAL.getUUID()
@@ -90,6 +87,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)
@@ -109,10 +107,11 @@ export default {
        this.parameterUUID = Object.keys(parameterSet)[0]
        const param = Object.values(parameterSet)[0]
        const modeOption = this.$refs.device_parameter_ref.workingModeOptions.find(ele => ele.id === param.MODE)
-        this.$refs.device_parameter_ref.workingModeSelectChange(modeOption)
+        this.$refs.device_parameter_ref.workingModeSelectChange(modeOption, false)
        this.parameter = Object.assign(this.parameter, Object.values(parameterSet)[0])
      } else {
-        this.setParameter('MODE', 0)
+        const defaultMode = this.config.MODE_OPTIONS.find(ele => ele.description === 'Idle')
+        this.setParameter('MODE', defaultMode.id)
      }
    },
    ...mapActions('project',
@@ -122,13 +121,12 @@ export default {
    ),
  },
  mounted () {
-    // init parameter
-    this.resetParameter()
  },
  watch: {
    // refresh parameter when click different task's parameter
    taskSelectKey: {
      handler: function () {
+        this.device = null
        this.parameter = {}
        this.parameterUUID = ''
        this.resetParameter()
@@ -136,6 +134,15 @@ export default {
    },
    deviceSelectKey: {
      handler: function () {
+        this.device = null
+        this.parameter = {}
+        this.parameterUUID = ''
+        this.resetParameter()
+      },
+    },
+    projectSelectIndex: {
+      handler: function () {
+        this.device = null
        this.parameter = {}
        this.parameterUUID = ''
        this.resetParameter()
@@ -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">
@@ -434,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)
@@ -454,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)
      }
@@ -1,23 +1,30 @@
 <template>
  <div>
    <!-- <pre>{{ getSelectProject }} </pre> -->
-    <va-card style="height: 88vh; overflow: auto; display: block;">
+    <va-card style="height: 88vh; overflow: auto; display: block;" @mousemove.native="mousemove">
+      <div id="project-view-show-btn" v-if="!projectManagerPanel.show" @click="showProjectManagerPanel">
+        <img id="project-view-show-btn-img" src="@/assets/img/project/arrow-right.svg">
+      </div>
      <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 @detect="detect"/>
-        <project-table/>
+        <project-menu @detect="detect" @save_project="save"/>
+        <project-table @save="save"/>
        <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>
@@ -46,6 +53,7 @@ export default {
      'deviceConnectList',
      'projectSelectIndex',
      'projectLibrary',
+      'projectManagerPanel',
    ]),
  },
  data () {
@@ -53,14 +61,45 @@ export default {
    }
  },
  methods: {
+    showProjectManagerPanel: function () {
+      this.projectManagerPanel.show = true
+    },
+    mousemove: function (e) {
+      // define constant
+      const DETECT_X_MAX = 50
+      const DETECT_X_MIN = 0
+      // get element
+      const element = document.getElementById('project-view-show-btn')
+      if (!element) return
+
+      let x = e.offsetX
+      // console.log('e', e, e.srcElement.className, e.srcElement.id)
+      // if mouse on project
+      if (e.srcElement.id === 'project-view-show-btn' || e.srcElement.id === 'project-view-show-btn-img') {
+        element.style.opacity = 0.7
+        element.style.transform = 'rotate(90deg) translate(40vh, 25px)'
+        return
+      }
+      if (e.srcElement.className !== 'va-card__body' && e.srcElement.className !== 'va-card') {
+        element.style.transform = 'rotate(90deg) translate(40vh, 75px)'
+        return
+      }
+      if (x >= DETECT_X_MAX) x = DETECT_X_MAX
+      if (x < DETECT_X_MIN) x = DETECT_X_MIN
+
+      const offsetPercentage = Math.round(((DETECT_X_MAX - x) / DETECT_X_MAX) * 4) / 4
+      const newOffset = 75 - offsetPercentage * 50
+      element.style.opacity = offsetPercentage * 0.7
+      element.style.transform = 'rotate(90deg) translate(40vh, ' + String(newOffset) + 'px)'
+    },
    start: function () {
      this.$emit('start_project', this.getSelectProject)
    },
    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)
@@ -75,9 +114,57 @@ export default {
  watch: {
  },
  async mounted  () {
-    // console.log('mounted')
-    // console.log(this.deviceConnectList)
-    // console.log(this.deviceConnectList.length)
  },
 }
 </script>
+<style lang="scss">
+  #project-view-show-btn {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100px;
+    height: 50px;
+    border-radius: 100px 100px 0 0;
+    background-color: #495057;
+    transform: rotate(90deg)  translate(40vh, 75px);
+    transition: transform 0.1s linear;
+  }
+
+  #project-view-show-btn-img {
+    position: relative;
+    top: 5px;
+    left: 30px;
+    width: 40px;
+    height: 40px;
+  }
+
+  .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,40 +1,74 @@
 <template>
  <div>
-    <div class="row">
-      <div class="flex d-flex">
-        <switch-project/>
-        <add-task/>
-        <!-- <add-device @showDeviceModal="showDeviceModal"/> -->
-        <va-button @click="showCycleModal" small>+ Cycle</va-button>
+    <project-device @showDeviceModal="showDeviceModal" @save="saveProject"></project-device>
+    <div class="flex d-flex sm12 xs12 md6 xl4 px-0">
+      <add-task @save="saveProject"/>
+      <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})
+          saveProject()
+        }">
+          <img class="img-vertical-center" src="@/assets/img/project/copy.svg">
+        </button>
+      </div>
+      <div>
+        <button class="copy-project-btn" @click="saveProject(true)">
+          <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})
+          saveProject()
+        }">
+          <img class="img-vertical-center" src="@/assets/img/project/delete.svg">
+        </button>
      </div>
    </div>
-    <project-device @showDeviceModal="showDeviceModal"></project-device>
-    <new-device-modal ref="device_modal_ref" @detect="detect"></new-device-modal>
+    <new-device-modal ref="device_modal_ref" @detect="detect" @save="saveProject"></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 AddDevice from '@/components/project/view/menu/components/AddDevice'
 import ProjectDevice from '@/components/project/view/menu/components/ProjectDevice'
 import NewDeviceModal from '@/components/project/view/menu/components/NewDeviceModal'
 import CycleModal from '@/components/project/view/menu/components/CycleModal'
-
-import { mapActions } from 'vuex'
+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,
    ProjectDevice,
    NewDeviceModal,
    CycleModal,
  },
+  computed: {
+    ...mapGetters('project', [
+      types.project.getSelect,
+    ]),
+    ...mapFields('project', [
+      'taskViewPanel',
+      'taskSelectKey',
+      'deviceSelectKey',
+      'lockMode',
+      'projectTableSelectIndex',
+    ]),
+  },
  data () {
    return {
    }
@@ -54,12 +88,68 @@ export default {
      this.$refs.cycle_modal_ref.show()
      this.$refs.cycle_modal_ref.reset()
    },
+    saveProject: function (showMessage = false) {
+      if (showMessage === true) {
+        this.showToast(
+          'project update finish',
+          {
+            icon: 'fa-bell',
+            position: 'bottom-right',
+            duration: 5000,
+          },
+        )
+      }
+      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,13 @@
 <template>
  <div>
-    <va-button @click="createTask" small>+ TASK</va-button>
+    <button class="add-task-btn" @click="() => {
+      createTask()
+      save()
+    }">
+      <div class="add-task-text">
+        <p>Add Task</p>
+      </div>
+    </button>
  </div>
 </template>
 <script>
@@ -18,15 +25,39 @@ export default {
    }
  },
  methods: {
+    save: function () {
+      this.$emit('save')
+    },
    ...mapActions('project',
      [
-        types.task.init,
        types.task.create,
-        types.task.save,
-        types.task.delete,
-        types.task.select,
      ],
    ),
  },
 }
 </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>
@@ -135,7 +135,6 @@ export default {
      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)
@@ -182,7 +181,8 @@ export default {
          await this.swapTask({ project: project, originIndex: originEndIndex, newIndex: newEndIndex + 1 })
        }
      }
-
+      this.$emit('save')
+      this.showModal = false
      return true
    },
    removeCycle: async function () {
@@ -199,6 +199,7 @@ export default {
      const originEndIndex = await this.getIndexTask({ project: project, uuid: this.cycleInfo.range[1] })
      await this.deleteTask({ project: project, index: originEndIndex })

+      this.$emit('save')
      this.showModal = false
      return true
    },
@@ -101,10 +101,12 @@ export default {
      if (this.deviceList[this.deviceSelect]) {
        this.device.pair = this.deviceList[this.deviceSelect].macAddress
      }
+      this.$emit('save')
      this.hide()
    },
    removeDevice: function () {
      this.deleteDeviceProject({ deviceKey: this.key })
+      this.$emit('save')
      this.hide()
    },
    getDeviceList: async function (device) {
@@ -1,21 +1,43 @@
 <template>
-  <div class="row">
-    <div class="flex d-flex" v-if="showLibrary === true">
-      <va-button small @click="clickShowDevice('EDC')">EDC</va-button>
-      <va-button small @click="clickShowDevice('EIS')">EIS</va-button>
-      <va-button small @click="cancelSelectDevice()">X</va-button>
+  <div class="flex d-flex sm12 xs12 md12 xl12 pa-0" style="align-items: center; margin-left: 0.6rem; 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="flex row" :list="deviceListInOrder" :move="handleMove" @end="handleDragEnd">
+      <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>
-        <button class="add-button" icon="fa fa-plus" @click="clickShowLibrary"><span class="add-button-text">+</span></button>
-      </div>
    </div>
  </div>
 </template>
@@ -70,6 +92,7 @@ export default {
        pairStatus: 1,
        order: this.getDeviceMaxOrderProject,
      })
+      this.$emit('save')
      return true
    },
    clickShowDevice: async function (library) {
@@ -81,6 +104,7 @@ export default {
        pairStatus: 0,
        order: this.getDeviceMaxOrderProject,
      })
+      this.$emit('save')
      return false
    },
    cancelSelectDevice: function () {
@@ -91,6 +115,7 @@ export default {
    },
    deleteDevice: function (deviceIndex) {
      this.deleteDeviceProject({ index: deviceIndex })
+      this.$emit('save')
    },
    handleMove (e) {
      const { index, futureIndex } = e.draggedContext
@@ -109,6 +134,7 @@ export default {
        deviceList[keyOld][key] = deviceListTemp[this.futureIndex][1][key]
        deviceList[keyNew][key] = deviceListTemp[this.index][1][key]
      }
+      this.$emit('save')
    },
    ...mapActions('project',
      [
@@ -159,19 +185,32 @@ export default {
  .not-pair-button {
    width: 100%;
    height: 36px;
-    background: #858dd6;
-    border: 1px #ffffff dashed;
+    background: #e0e0e0;
+    border: 0;
    border-radius: 20px;
  }

  .pair-button-text {
-    font-family: 'Inter';
+    font-family: 'Inter-Regular';
    font-style: normal;
    font-weight: 400;
-    font-size: 18px;
+    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,35 +1,31 @@
 <template>
-  <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;">
+  <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">
+      <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; padding: 0;">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 v-if="lockMode" align="center">cycle</th>
-            <th align="center"></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" style="min-width: 50px;"></th>
          </tr>
        </thead>
        <!-- <tbody> -->
-        <vuedraggable :disabled="lockMode === true" class="draggable" :list="getSelectProject.task" @end="rearrangeTask({ project: getSelectProject })" tag="tbody" animation="500">
+        <vuedraggable :disabled="lockMode === true || inputMode === true" class="draggable" :list="getSelectProject.task" @end="()=> {
+          rearrangeTask({ project: getSelectProject })
+          saveProject()
+        }" tag="tbody" animation="500">
          <template class="item" v-for="(task, taskIndex) in getSelectProject.task">
-            <tr v-if="task.type === 'cycle'" :key="'empty' + taskIndex" height="80px" @click="showCycleModal(task.uuid)">
-              <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>
@@ -61,7 +57,6 @@
                <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
                  v-if="task.status === 1"
                  :animation-duration="3000"
@@ -71,21 +66,35 @@
                <!-- <va-icon v-if="task.status === 2" class="fa fa-check"></va-icon> -->
              </td>
            </tr>
-            <tr v-else-if="task.device && task.device.length === 0" :key="'empty' + taskIndex" height="80px" @click="() => { focus = taskIndex }">
-              <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 }}
              </td>
-              <td align="center">
-                {{ task.name }}
+              <!-- name -->
+              <td align="center" @dblclick="switchInput('name', taskIndex)">
+                <div v-if="tableColumn.name == taskIndex && lockMode === false">
+                  <va-input
+                    :ref="'input_ref'"
+                    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>+ Device</va-button>
+                <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>
@@ -93,23 +102,23 @@
              <td align="center">
                <va-button :flat="true" @click="openConfig(4, taskIndex)" :disabled="true" small>-</va-button>
              </td>
-              <td align="center">
-                <va-icon class="fa fa-close" @click.native="() => deleteTask({ project: getSelectProject, index: taskIndex})"></va-icon>
-              </td>
            </tr>
-            <tr :class="taskIndex === focus ? 'table-row-focus' : ''" v-else v-for="(deviceUUID) in task.device" :key="String(taskIndex) + ' ' + String(deviceUUID)" height="80px" @click="() => { focus = taskIndex }">
-              <td v-if="lockMode === false">
-                <va-checkbox
-                  v-model="tableColumn.checked"
-                  :array-value="String(taskIndex)"
-                />
-              </td>
+            <tr
+              v-else
+              height="50px"
+              :class="taskIndex === projectTableSelectIndex ? 'table-row-focus' : ''"
+              :key="String(taskIndex)"
+              @click="() => { projectTableSelectIndex = taskIndex }"
+            >
+              <!-- order -->
              <td align="center">
                {{  taskIndex + 1 }}
              </td>
+              <!-- name -->
              <td align="center" @dblclick="switchInput('name', taskIndex)">
                <div v-if="tableColumn.name == taskIndex && lockMode === false">
                  <va-input
+                    :ref="'input_ref'"
                    v-model="task.name"
                    style="width: 100px;"
                    @blur="switchInput('name', -1)"
@@ -128,77 +137,106 @@
                  </va-button>
                </div>
                <div v-else>
-                  <va-button :flat="true" @click="openConfig(1, taskIndex, deviceUUID)" small>
-                    <span>{{ getDeviceShowNameProject(deviceUUID)}}</span>
-                  </va-button>
+                  <div class="flex project-table-cell" v-for="(deviceUUID) in task.device" :key="deviceUUID" @click="openConfig(1, taskIndex, deviceUUID)">
+                    <p>{{ getDeviceShowNameProject(deviceUUID)}}</p>
+                  </div>
                </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>
-                    + Event
-                  </va-button>
-                </div>
-                <div v-else class="flex">
+                <div class="flex project-table-cell" v-for="(deviceUUID) in task.device" :key="deviceUUID">
+                  <div v-if="Object.values(task.action).filter(ele => ele.type === 'start' && ele.target === deviceUUID).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 !== 'start'">
-                          {{ 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="action.type == 'cycle' && 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>
+                          <div v-else> Follow {{ getSelectProject.task[taskIndex - 1].name }} </div>
                        </div>
                      </div>
                    </div>
                  </div>
-                  <va-button :flat="true" @click="openConfig(3, taskIndex, deviceUUID)" small>
-                    + Event
-                  </va-button>
                </div>
              </td>
-              <!-- action end -->
+              <!-- start end -->
+              <!-- stop -->
              <td align="center">
-                <div v-if="Object.keys(task.parameter_set).length === 0">
-                  <va-button :flat="true" @click="openConfig(4, taskIndex, deviceUUID)" small>
-                    + 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, deviceUUID) }} : {{ parameterValue(parameterKey, parameter, deviceUUID) }}
-                          </div>
-                        </span>
+                <div class="flex project-table-cell" v-for="(deviceUUID) in task.device" :key="deviceUUID" @click="openConfig(3, taskIndex, deviceUUID)">
+                  <div v-if="Object.values(task.action).filter(ele => ele.type === 'stop' && ele.target === deviceUUID).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">
+                <div class="flex project-table-cell" v-for="(deviceUUID) in task.device" :key="deviceUUID" @click="openConfig(4, taskIndex, deviceUUID)">
+                  <div v-if="Object.values(task.parameter_set).filter(ele => ele.target === deviceUUID).length === 0" >
+                    <p>
+                      +
+                    </p>
+                  </div>
+                  <div style="height: auto;" v-for="(parameterSet, parameterSetKey) in getParameterSetTask(taskIndex, deviceUUID)" :key="parameterSetKey">
+                    <v-popover
+                      placement="right"
+                      trigger="hover"
+                      popoverBaseClass="tooltip popover test"
+                      :disabled="!Object.keys(parameterSet).filter(ele=>ele !== 'MODE' && ele !== 'target').length > 0"
+                    >
+                      <div class="tooltip-target">
+                        {{ parameterName('MODE', deviceUUID) }} : {{ parameterValue('MODE', parameterSet.MODE, deviceUUID) }}
+                      </div>
+                      <template slot="popover">
+                        <div>
+                          <div v-for="(parameter) in parameterShow(parameterSet.MODE, deviceUUID)" :key="parameter + parameterSet.MODE">
+                            <p v-if="getConfig(deviceUUID).includes('TRIG') === true">
+                              {{ parameterPair(parameter, parameterSet, deviceUUID) }}
+                            </p>
+                            <p v-else>
+                              {{ parameterName(parameter, deviceUUID) }} : {{ parameterValue(parameter, parameterSet[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-copy ml-1" @click.native="() => copyTask({ project: getSelectProject, index: taskIndex})"></va-icon>
-                <va-icon class="fa fa-close ml-1" @click.native="() => deleteTask({ project: getSelectProject, 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">
+              <!-- <td align="center" v-if="lockMode === true">
                <div v-if="task.cycle > 0 && task.status === 2 && task.cycle_count === 0">
                  {{ task.cycle }}/{{ task.cycle }}
                </div>
                <div v-else-if="task.cycle > 0">
                  {{ 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">
+              </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/> -->
              <td align="center" v-if="lockMode === true">
                <!-- {{ task.status }} -->
                <fulfilling-bouncing-circle-spinner
@@ -212,11 +250,14 @@
            </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>
+      <cycle-modal ref="cycle_modal_ref" @save="saveProject"></cycle-modal>
    </div>
  </div>
 </template>
@@ -259,6 +300,7 @@ export default {
      'deviceSelectKey',
      'lockMode',
      'projectLibrary',
+      'projectTableSelectIndex',
    ]),
  },
  data () {
@@ -268,12 +310,48 @@ export default {
        checked: [],
      },
      inputSaved: '',
-      focus: -1,
      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)
    },
@@ -285,6 +363,7 @@ export default {
      if (a === undefined) return
      newTaskList.filter(ele => ele != null)
      this.rearrangeTask({ project: this.getSelectProject })
+      this.saveProject()
    },
    swapTask: function (taskIndex, upDown) {
      taskIndex = parseInt(taskIndex)
@@ -298,11 +377,13 @@ export default {
        this.getSelectProject.task.splice(taskIndex + 1, 1, a)
      }
      this.rearrangeTask({ project: this.getSelectProject })
+      this.saveProject()
    },
    delSelected: function () {
      for (const indexSelected of this.tableColumn.checked) {
        this.deleteTask({ project: this.getSelectProject, index: indexSelected })
      }
+      this.saveProject()
    },
    delAction: function (task, actionKey, conditionKey) {
      const _action = JSON.parse(JSON.stringify(task.action))
@@ -313,6 +394,12 @@ export default {

      task.action = _action
      task.condition = _condition
+
+      this.saveProject()
+    },
+    saveProject: function () {
+      console.log('saveProject')
+      this.$emit('save', this.getSelectProject)
    },
    trigger_button: function (projectID) {
      console.log('project', projectID)
@@ -323,9 +410,20 @@ export default {
      }))
    },
    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
+          this.$nextTick(() => {
+            this.$refs.input_ref[0].$refs.input.focus()
+          })
+        }
+      } else {
+        this.inputMode = false
+        this.tableColumn[tag] = -1
+      }
+
+      this.saveProject()
    },
    switchCycle: function (tag, index, projectID, task) {
      this.switchInput(tag, index)
@@ -338,6 +436,7 @@ export default {
        index: cycleInfo[0],
        content: { id: this.inputSaved },
      }))
+      this.$emit('save', this.getSelectProject)
    },
    selectAll: function (selectedArray) {
      const totalRange = [...Array(this.getSelectProject.task.length).keys()].map(idx => String(idx))
@@ -364,6 +463,47 @@ export default {
        }
      }
    },
+    parameterShow (mode, deviceKey) {
+      const config = configTable.getConfig(this.getDeviceLibraryProject(deviceKey))
+      if (config !== undefined && Object.keys(config) !== 0) {
+        if (this.getDeviceLibraryProject(deviceKey).includes('TRIG')) return config.MODE[mode].showParameter
+        return config.MODE[mode].parameter
+      }
+    },
+    parameterPair (name, valueSet, deviceKey) {
+      let _name, _value
+      const config = configTable.getConfig(this.getDeviceLibraryProject(deviceKey))
+      if (config !== undefined && Object.keys(config) !== 0) {
+        if (this.getDeviceLibraryProject(deviceKey).includes('TRIG')) {
+          if (name.includes('ACC_a_out')) {
+            const accName = name + '_current'
+            if (Boolean(valueSet[name]) === true) {
+              _name = 'Channel' + String((parseInt(name.replace('ACC_a_out', '')) + 1))
+              const scale = config[accName].unit[config[accName].defaultUnit]
+              _value = `${config[accName].outputReadabilityData(valueSet[accName], scale)} ${config[accName].defaultUnit}`
+            } else return ''
+          } else if (name.includes('TRIG')) {
+            if (Boolean(valueSet[name]) === true) {
+              const optionTrigger = [
+                'RISING',
+                'FALLING',
+                'BOTH',
+              ]
+              const trigName = name.replace('en', '') + 'edge_type'
+              _name = 'TRIG' + String((parseInt(name.replace('TRIG', '').replace('_en', '')) + 1))
+              _value = optionTrigger[valueSet[trigName]]
+            } else return ''
+          } else if (name.includes('TIME_DURATION')) {
+            if (valueSet.TIME_DURATION && parseInt(valueSet.TIME_DURATION) > 0) {
+              const scale = config[name].unit[config[name].defaultUnit]
+              _name = 'Timer'
+              _value = `${config[name].outputReadabilityData(valueSet[name], scale)} ${config[name].defaultUnit}`
+            } else return ''
+          }
+        }
+      }
+      return _name + ': ' + _value
+    },
    parameterName (name, deviceKey) {
      const config = configTable.getConfig(this.getDeviceLibraryProject(deviceKey))
      if (config !== undefined && Object.keys(config) !== 0) {
@@ -378,15 +518,16 @@ export default {
    },
    parameterValue (name, value, deviceKey) {
      const config = configTable.getConfig(this.getDeviceLibraryProject(deviceKey))
+      const _value = (value === undefined) ? config[name].defaultValue : value
      if (config !== undefined && Object.keys(config) !== 0) {
        if (name === 'MODE') {
-          return config.MODE[value].name
+          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}`
+          return `${config[name].outputReadabilityData(_value, scale)} ${config[name].defaultUnit}`
        } else if (config[name].type === 'array') {
-          return `${config[name].outputReadabilityData(value)}`
+          return `${config[name].outputReadabilityData(_value)}`
        } else if (config[name].type === 'none') {
          return ''
        }
@@ -410,6 +551,10 @@ export default {
      return cycleInfo[1]
    },

+    getConfig: function (deviceKey) {
+      return this.getDeviceLibraryProject(deviceKey)
+    },
+
    handleMove (e) {
      const { index, futureIndex } = e.draggedContext
      this.index = index
@@ -417,6 +562,7 @@ export default {
      return false // disable sort
    },
    ...mapActions('project', [
+      types.task.create,
      types.task.copy,
      types.task.delete,
      types.task.rearrange,
@@ -435,8 +581,8 @@ export default {

  .table-row-focus {
    background: #ebedff;
-    border: 1px solid #dbdcf0;
-    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
+    // border: 0.5px solid #dbdcf0;
+    // box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
  }

@@ -456,13 +602,17 @@ export default {
      max-height: 100px;
      overflow: auto;
      white-space: nowrap;
-      font-size: 1.1rem;
+    }
+
+    td:hover {
+      cursor: pointer;
    }

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

    div {
@@ -471,4 +621,164 @@ export default {
    }
  }

+  .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;
+    background: white;
+    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;
+  }
+
+  .project-table-cell:hover {
+    opacity: 0.6;
+  }
+
+  .tooltip {
+    display: block !important;
+    z-index: 10000;
+
+    .tooltip-inner {
+      // background: red !important;
+      color: white;
+      border-radius: 16px;
+      padding: 5px 10px 4px;
+      box-shadow: rgba(108, 127, 238, 0.6) 0 2px 3px 0;
+      background-color: #ebedff !important;
+    }
+
+    .tooltip-arrow {
+      width: 0;
+      height: 0;
+      border-style: solid;
+      position: absolute;
+      margin: 5px;
+      border-color: black;
+      z-index: 1;
+    }
+
+    &[x-placement^="top"] {
+      margin-bottom: 5px;
+
+      .tooltip-arrow {
+        border-width: 5px 5px 0 5px;
+        border-left-color: transparent !important;
+        border-right-color: transparent !important;
+        border-bottom-color: transparent !important;
+        bottom: -5px;
+        left: calc(50% - 5px);
+        margin-top: 0;
+        margin-bottom: 0;
+      }
+    }
+
+    &[x-placement^="bottom"] {
+      margin-top: 5px;
+
+      .tooltip-arrow {
+        border-width: 0 5px 5px 5px;
+        border-left-color: transparent !important;
+        border-right-color: transparent !important;
+        border-top-color: transparent !important;
+        top: -5px;
+        left: calc(50% - 5px);
+        margin-top: 0;
+        margin-bottom: 0;
+      }
+    }
+
+    &[x-placement^="right"] {
+      margin-left: 5px;
+
+      .tooltip-arrow {
+        border-width: 5px 5px 5px 0;
+        border-left-color: transparent !important;
+        border-top-color: transparent !important;
+        border-bottom-color: transparent !important;
+        left: -5px;
+        top: calc(50% - 5px);
+        margin-left: 0;
+        margin-right: 0;
+      }
+    }
+
+    &[x-placement^="left"] {
+      margin-right: 5px;
+
+      .tooltip-arrow {
+        border-width: 5px 0 5px 5px;
+        border-top-color: transparent !important;
+        border-right-color: transparent !important;
+        border-bottom-color: transparent !important;
+        right: -5px;
+        top: calc(50% - 5px);
+        margin-left: 0;
+        margin-right: 0;
+      }
+    }
+
+    &.popover {
+      $color: #ebedff;
+
+      .popover-inner {
+        background: $color;
+        color: black;
+        padding: 24px;
+        border-radius: 5px;
+        box-shadow: 0 5px 30px rgba(black, 0.1);
+      }
+
+      .popover-arrow {
+        border-color: $color;
+      }
+    }
+
+    &[aria-hidden='true'] {
+      visibility: hidden;
+      opacity: 0;
+      transition: opacity 0.15s, visibility 0.15s;
+    }
+
+    &[aria-hidden='false'] {
+      visibility: visible;
+      opacity: 1;
+      transition: opacity 0.15s;
+    }
+  }
+
+  .test {
+    left: -175px !important;
+  }
+
 </style>
@@ -1,5 +1,18 @@
 <template>
  <div class="task-content">
+    <!-- <button @click="playSound"></button> -->
+    <audio id="alert">
+      <source src="../../../assets/success_notification.mp3"/>
+    </audio>
+    <va-modal
+      v-model="showWanrningModal"
+      @cancel="closeAlert"
+      size="small"
+      :mobileFullscreen="false"
+      hideDefaultActions
+    >
+      The amount of data accumulation is complete.
+    </va-modal>
    <va-modal
      v-model="showShutdownModal"
      size="small"
@@ -32,7 +45,6 @@
            <task-formula :ref="'formula_ref'" @add="addFormula($event)" @remove="removeFormula($event)" class="pa-0" />
          </div>
        </div>
-
      </div>

      <div :class="chartAreaClass">
@@ -81,18 +93,18 @@
                />
              </div>
            </div>
-
            <div style="height: 150px;">
            </div>
-
          </div>
-
        </div>
-
      </div>
-
+      <StatusBar v-for="(toast, index) in toasts"
+        :key="index"
+        :message="toast.message"
+        :index="index"
+        @destroyed="removeToast(index)">
+      </StatusBar>
    </div>
-
  </div>
 </template>

@@ -108,6 +120,8 @@ import { mapActions } from 'vuex'
 import taskTypes from '@/store/modules/task/content/types'
 import TaskFormula from './formula/TaskFormula'
 import { v4 as uuid } from 'uuid'
+import StatusBar from './status/statusBar.vue'
+// import music from '@/assets/Beep_high_normal.aac'

 // TODO change chart data tag format

@@ -118,6 +132,7 @@ export default {
    // TaskDevices,
    TaskDevicesNew,
    TaskFormula,
+    StatusBar,
  },
  computed: {
    ...mapFields('taskContent', [
@@ -134,6 +149,7 @@ export default {
  data () {
    return {
      // modal
+      showWanrningModal: false,
      showShutdownModal: false,
      showRemoveChartModal: false,
      // refresh timer
@@ -144,9 +160,20 @@ export default {
      chartAreaClass: ['flex', 'xs12', 'sm12', 'md12', 'xl8', 'pa-0'],
      getParmDone: false,
      batteryInterval: {},
+      toasts: [
+      ],
    }
  },
  mqtt: {
+    async '+/play_sound/+' (data, topic) {
+      const device = JSON.parse(String.fromCharCode.apply(null, data)).data
+      if (device) {
+        if (!this.toasts.find((toast) => toast.device === device)) {
+          this.toasts.push({ device: device, message: `Alarm: device ${device}. Please close the window to stop the alarm and reset this device.` })
+          await this.playSound()
+        }
+      }
+    },
    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)
@@ -154,8 +181,7 @@ export default {
    },
    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
-
+      this.deviceListNew = JSON.parse(String.fromCharCode.apply(null, data)).data.sort((a, b) => a.memory_board - b.memory_board)
      // console.log(this.deviceListNew)

      for (let i = 0; i < this.deviceListNew.length; i++) {
@@ -312,7 +338,7 @@ export default {
            device: parseInt(mes[1]),
            instruction: 'interrupt',
          }))
-          this.pageToast('The device [' + taskInfo.getDeviceIDByRaw(parseInt(mes[1])) + '] mission is done.')
+          this.pageToast('The device [' + taskInfo.getDeviceIDByRaw(parseInt(mes[1])) + '] mission done.')
          break
        case 'project':
          // refresh real-time page when going to next task
@@ -351,6 +377,7 @@ export default {
      this.mqttSub(id + '/device_parameter_value/+')
      this.mqttSub(id + '/device_sd_card_status/+')
      this.mqttSub('+/device_battery/+')
+      this.mqttSub(id + '/play_sound/+')
    },
    pageMqttUnSub: function (id) {
      for (const device in taskInfo.getTaskInfo().deviceList) {
@@ -436,7 +463,7 @@ export default {
      if (!isDefault) {
        await this.taskContentChartSaveToCache({ controllerID: taskInfo.getTaskInfo().controllerID })
      }
-      this.pageToast('The chart has been added.')
+      // this.pageToast('The chart has been added.')

      return newChart.chartID
    },
@@ -454,7 +481,7 @@ export default {
        mappingID: null,
        cardName: null,
      })
-      this.pageToast('The chart has been Initialized.')
+      // this.pageToast('The chart has been Initialized.')
    },
    removeChartCheck: function (chartID) {
      this.selectChartID = chartID
@@ -490,7 +517,7 @@ export default {
      if (saveCache === true) {
        await this.taskContentChartSaveToCache({ controllerID: taskInfo.getTaskInfo().controllerID })
      }
-      this.pageToast('The chart has been removed.')
+      // this.pageToast('The chart has been removed.')
    },
    showDeviceSettingClick: function () {
      this.showDeviceSetting = true
@@ -531,8 +558,9 @@ export default {
        _itemID: deviceID,
        _chartID: null,
        _type: 'device',
+        _reset: false,
      })
-      this.pageToast('The device [' + deviceID + '] has been registered.')
+      // this.pageToast('The device [' + deviceID + '] has been registered.')
    },
    removeDevice: function (deviceID) {
      this.mqttUnSub(taskInfo.getTaskInfo().controllerID + '/data_server/device_data_stream/' + deviceID + '/+')
@@ -542,7 +570,7 @@ export default {
          this.removeChart(chart)
        }
      }
-      this.pageToast('The device [' + deviceID + '] has been removed.')
+      // this.pageToast('The device [' + deviceID + '] has been removed.')
    },
    addFormula: async function (formulaID) {
      const chart = await this.addChart(true)
@@ -625,6 +653,29 @@ export default {
      console.log('switch mode', this.developerMode)
      this.developerMode = !this.developerMode
    },
+    playSound: async function () {
+      const a = document.getElementById('alert')
+      // setTimeout(async () => {
+      //   await this.closeAlert()
+      // }, 30000)
+      a.loop = true
+      await a.play()
+    },
+    removeToast: function (index) {
+      this.toasts.splice(index, 1)
+      if (this.toasts.length === 0) {
+        this.closeAlert()
+      }
+    },
+    closeAlert: async function () {
+      this.showWanrningModal = false
+      const a = document.getElementById('alert')
+      await a.pause()
+      a.currentTime = 0
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'reset_trigger/0',
+      }))
+    },

    ...mapActions('taskContent', [
      taskTypes.chart.initCustomizedFromCache,
@@ -666,12 +717,12 @@ export default {
    window.addEventListener('keydown', switchModeHander.bind(_, this.switchMode))
  },
  destroyed () {
-    taskInfo.destroyed(this.deviceList)
+    // taskInfo.destroyed(this.deviceList)
    for (const chart in this.chartData) {
      this.removeChart(chart, false)
    }
    clearInterval(this.dataRefreshTimer)
-    this.pageMqttUnSub(taskInfo.getTaskInfo().controllerID)
+    // this.pageMqttUnSub(taskInfo.getTaskInfo().controllerID)

    for (var interval in this.batteryInterval) {
      clearInterval(this.batteryInterval[interval])
@@ -17,7 +17,7 @@
    />
    <va-input
      v-if="[1, 2, 3].indexOf(selectFilter.id) >= 0"
-      :label="'EIS_FREQ'"
+      :label="'FREQ'"
      class="mx-1 freq-input"
      v-model="freq2"
    >
@@ -17,7 +17,7 @@
    />
    <va-input
      v-if="[1, 2, 3].indexOf(selectFilter.id) >= 0"
-      :label="'EIS_FREQ'"
+      :label="'FREQ'"
      class="mx-1 freq-input"
      v-model="freq2"
    >
@@ -130,17 +130,66 @@ export default {
      if (device === undefined) return
      return device.configuration.MODE
    },
+    getChannelConfiguration: function () {
+      const device = this.deviceListNew.find(ele => String(ele.memory_board) === String(this.chartData[this.chartID].mappingID))
+      if (device === undefined) return
+      return configTable.getChannelConfig(device.configuration._LIBRARY_, 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
+      const channelInfo = this.getChannelConfiguration()
      if (this.data !== undefined && this.data.gridSource !== undefined) {
-        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 x = this.data.gridSource[plotIndex][curveIndex].xSource
+        const y = this.data.gridSource[plotIndex][curveIndex].ySource
+
+        let _xAxis
+        let _yAxis
+        if (channelInfo) {
+          if (x.name === 'Time') {
+            _xAxis = { default: channelInfo.time }
+          } else {
+            let xInfo = channelInfo[x.channel - 1]
+            if (xInfo === undefined) {
+              xInfo = {
+                name: '',
+                defaultUnit: '',
+                unit: {},
+              }
+            }
+            _xAxis = { default: xInfo }
+          }
+          if (y.name === 'Time') {
+            _yAxis = { default: channelInfo.time }
+          } else {
+            let yInfo = channelInfo[y.channel - 1]
+            if (yInfo === undefined) {
+              yInfo = {
+                name: '',
+                defaultUnit: '',
+                unit: {},
+              }
+            }
+            _yAxis = { default: yInfo }
+          }
+        } else {
+          _xAxis = {
+            default: {
+              name: '',
+              defaultUnit: '',
+              unit: {},
+            },
+          }
+          _yAxis = {
+            default: {
+              name: '',
+              defaultUnit: '',
+              unit: {},
+            },
+          }
+        }
+
        const _realTime = JSON.parse(JSON.stringify(this.realTime))
        const _newCurve = {}
        // set name, sourceIndex in data.series
@@ -276,6 +325,16 @@ export default {
      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.includes('ZReal') && !_xPhysicsQuantity.includes('ZImag')) {
+        _xPhysicsQuantity = _xPhysicsQuantity.substring(0, 1)
+      } else {
+        _xPhysicsQuantity = _xPhysicsQuantity.substring(0, 5)
+      }
+      if (!_yPhysicsQuantity.includes('ZReal') && !_yPhysicsQuantity.includes('ZImag')) {
+        _yPhysicsQuantity = _yPhysicsQuantity.substring(0, 1)
+      } else {
+        _yPhysicsQuantity = _yPhysicsQuantity.substring(0, 5)
+      }
      if (_xPhysicsQuantity === 'P') _xPhysicsQuantity = 'V'
      if (_yPhysicsQuantity === 'P') _yPhysicsQuantity = 'V'
      const [_xAxis, _yAxis] = this.chartRouter.getChartTable(_xPhysicsQuantity, _yPhysicsQuantity)
@@ -186,7 +186,7 @@ export default {
      } 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 = []
@@ -262,7 +262,7 @@ export default {
      } 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 = []
@@ -1,36 +1,6 @@
 const chartTable = {
  // split 'A-B' by '-',
  // then A-B[0] is about 'A' and A-B[1] is about 'B'
-  T_V: [
-    // 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: 'Voltage',
-        unit: {
-          uV: 1,
-          mV: 1e3,
-          V: 1e6,
-        },
-        defaultUnit: 'mV',
-        downloadUnit: 'mV',
-      },
-    },
-  ],
  T_I: [
    // 0
    {
@@ -74,65 +44,6 @@ const chartTable = {
      },
    },
  ],
-  T_R: [
-    // 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: 'Ω',
-      },
-    },
-  ],
-  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
    {
@@ -206,94 +117,6 @@ 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) => {
@@ -301,6 +124,6 @@ export const chartRouter = {
    const name2 = yAxis + '_' + xAxis
    if (chartTable[name1] !== undefined) return [chartTable[name1][0], chartTable[name1][1]]
    else if (chartTable[name2] !== undefined) return [chartTable[name2][1], chartTable[name2][0]]
-    else return 'idiot'
+    else return []
  },
 }
@@ -140,7 +140,7 @@ export default {
      // const status = checkParam.status
      // const message = checkParam.message
      // if (status === true) {
-      this.setArchiveSettings()
+      await this.setArchiveSettings()
      // this.$emit('start', device)
      setTimeout(() => {
        this.$emit('start', device)
@@ -160,7 +160,7 @@ export default {
      // const message = checkParam.message
      // if (status === true) {
      // device.stopping = false
-      this.setArchiveSettings()
+      await this.setArchiveSettings()
      setTimeout(() => {
        this.$emit('record', device)
      }, 500)
@@ -176,9 +176,9 @@ export default {
    generateChart: function (device) {
      this.$emit('generate', device)
    },
-    setArchiveSettings: function () {
-      this.$refs.fcwindow_ref.forEach(ref => {
-        ref.setArchiveSettings()
+    setArchiveSettings: async function () {
+      this.$refs.fcwindow_ref.forEach(async (ref) => {
+        await ref.setArchiveSettings()
      })
    },
    refresh: function () {
@@ -19,11 +19,13 @@
                <img :src="device.picture" :alt="device.name">
              </va-avatar>
            </va-item-section>
-
            <va-item-section class="ml-3" caption>
              <!-- <va-button @click="getBattery(device)"> get battery </va-button> -->
              <!-- <pre> {{ device.battery }} </pre> -->
-              <va-item-label v-if="parseInt((device.battery - 2900) / 10) >= 75">
+              <va-item-label v-if="device.library_name.includes('EIS') || device.library_name.includes('TRIG')">
+                {{ `[${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">
@@ -88,7 +88,8 @@ export default {
      this.deviceListNew = this.deviceListNew.map(ele => {
        // ele.id = ele.mac_address
        return ele
-      })
+      }).sort((a, b) => a.memory_board - b.memory_board)
+
      this.deviceListNew.map((ele) => {
        ele.picture = eliteImgUrl
      })
@@ -129,9 +130,9 @@ export default {
    generateChart: function (device) {
      this.$emit('add', device.id)
    },
-    setArchiveSettings: function () {
+    setArchiveSettings: async function () {
      if (this.$refs.pdlist_ref != null) {
-        this.$refs.pdlist_ref.setArchiveSettings()
+        await this.$refs.pdlist_ref.setArchiveSettings()
      }
    },
    refresh: function () {
@@ -2,7 +2,7 @@
  <div class="flex row mt-0 pt-0 sm12 xl12 md12 xs12">
    <div class="flex sm6 xl6 md6 xs6">
      <va-select
-        :on-change="directorySelect(directory)"
+        @input="directorySelect(directory)"
        :label="'DIRECTORY'"
        v-model="directory"
        textBy="name"
@@ -89,7 +89,7 @@ export default {
      }
    },
    directorySelect: function (directoryInfo) {
-      if (typeof directoryInfo === 'object') {
+      if (directoryInfo.parent) {
        if (this.device.parent.folder === undefined || this.device.parent.folder.indexOf(directoryInfo.id) === -1) {
          if (this.device.status === 0) {
            this.device.parent.folder = []
@@ -122,9 +122,9 @@ export default {
      // directory init
      const collection = await api.collection.getAll()
      this.directoryOptions = collection.data.filter(el => el.name !== 'root')
-
      if (Object.keys(this.device.parent).length === 0) {
-        this.directory = this.directoryOptions[0]
+        this.directory = this.directoryOptions.find(ele => ele.name === 'admin')
+        this.directorySelect(this.directory)
      } else {
        for (const directory of this.directoryOptions) {
          if (this.device.parent.folder.includes(directory.id)) {
@@ -143,8 +143,8 @@ export default {
    pageInit: async function () {
    },
  },
-  mounted () {
-    this.setArchiveSettings()
+  async mounted () {
+    await this.setArchiveSettings()
  },
  destroyed () {
  },
@@ -26,8 +26,28 @@
        </div>
      </div>
      <!-- split because of styling problem(treenode), combine together furture -->
+      <!-- Trigger -->
+      <div v-if="library && library.includes('TRIG')">
+        <Trigger v-if="parameter.MODE === 0" :parameter="parameter" :parameterTable="parameterTable" @parameterChange="parameterChange"></Trigger>
+        <div v-if="parameter.MODE === 2">
+          <component
+            v-for="name in parameterArrayInMode"
+            :key="name"
+            :is="parameterTable[name].componentType"
+            :templateType=1
+            :withHeader="true"
+            :parameterName="name"
+            :inputValue="parameter[name]"
+            v-bind="parameterTable[name]"
+            @parameterChange="parameterChange"
+            @getParameter="getParameter"
+            @sendInstruction="sendInstruction"
+          />
+        </div>
+        <TriggerNew v-if="parameter.MODE === 3" :parameter="parameter" :parameterTable="parameterTable" @parameterChange="parameterChange"></TriggerNew>
+      </div>
      <!-- EIS -->
-      <div v-if="library.includes('EIS')">
+      <div v-if="library && library.includes('EIS')">
        <component
          v-for="name in parameterArrayInMode"
          :key="name"
@@ -44,7 +64,7 @@
        />
      </div>
      <!-- ZM15-PulseSensingMode -->
-      <div v-else-if="parameter.MODE === 14">
+      <div v-else-if="library && (library.includes('EDC') || library.includes('BAT')) && parameter.MODE === 14">
        <EliteParameterRecordingElitePulseSensing
          :parameter="parameter"
          :device="device"
@@ -55,7 +75,7 @@
        />
      </div>
      <!-- ZM15-DPVMode -->
-      <div v-else-if="parameter.MODE === 15">
+      <div v-else-if="library && (library.includes('EDC') || library.includes('BAT')) && parameter.MODE === 15">
        <EliteParameterRecordingEliteDPV
          :parameter="parameter"
          :device="device"
@@ -66,7 +86,7 @@
        />
      </div>
      <!-- ZM15-OtherModes -->
-      <div v-else>
+      <div v-else-if="library && (library.includes('EDC') || library.includes('BAT'))">
        <va-tree-category
          v-for="name in parameterArrayInMode"
          :key="name"
@@ -94,7 +114,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"
@@ -124,6 +144,8 @@ import InputField from '../parameter/itemNew/InputField'
 import MultiInputField from '../parameter/itemNew/MultiInputField'
 import EliteParameterRecordingEliteDPV from '../parameter/itemNew/DPVNew/EliteParameterRecordingEliteDPV'
 import DevMode from '../parameter/itemNew/DevMode'
+import Trigger from '../parameter/itemNew/TriggerNew/Trigger'
+import TriggerNew from '../parameter/itemNew/TriggerNew/TriggerNew'
 import EliteParameterRecordingElitePulseSensing from '../parameter/itemNew/PulseSensingNew/EliteParameterRecordingElitePulseSensing'
 import { VueFinalModal } from 'vue-final-modal'
 import { mapFields } from 'vuex-map-fields'
@@ -141,6 +163,8 @@ export default {
    InputField,
    MultiInputField,
    DevMode,
+    Trigger,
+    TriggerNew,
  },
  props: {
    parameter: {
@@ -148,7 +172,8 @@ export default {
      required: true,
    },
    library: {
-      type: String,
+      type: [String, null],
+      default: null,
    },
    serialNumber: {
      type: [String, Array],
@@ -161,6 +186,10 @@ export default {
      type: String,
      default: '',
    },
+    resetParameterModeChange: {
+      type: Boolean,
+      default: false,
+    },
  },
  computed: {
    parameterTable () {
@@ -179,7 +208,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) {
@@ -188,7 +217,7 @@ export default {
      return this.workingModeSelect.id
    },
    getImageUrl () {
-      if (this.workingModeSelect === null) {
+      if (!this.workingModeSelect) {
        return 'IV-Wire'
      } else {
        return this.workingModeSelect.img_src
@@ -235,9 +264,9 @@ export default {
        return ''
      }
    },
-    parameterChange: function (name, value, debounce = false) {
+    parameterChange: function (name, value, debounce = false, force = false) {
      /** if parameter is equal to value, then don't change, JSON.stringify is for array & object compare */
-      if (JSON.stringify(value) !== JSON.stringify(this.parameter[name])) {
+      if (JSON.stringify(value) !== JSON.stringify(this.parameter[name]) || force === true) {
        this.parameter[name] = value
        debounce === false
          ? this.$emit('setParameter', name, value)
@@ -246,12 +275,20 @@ export default {
    },
    refresh () {
    },
-    workingModeSelectChange (val) {
+    workingModeSelectChange (val, reset = true) {
+      if (val === undefined || this.parameter.MODE === 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 (this.resetParameterModeChange === true) {
+          if (reset === true) {
+            for (const parameter of this.parameterTable.MODE[this.workingModeSelect.id].parameter) {
+              this.$emit('setParameter', parameter, this.parameterTable[parameter].defaultValue)
+            }
+          }
+        }

        // if device is idle, then setting highz when mode switch
        if (this.deviceStatus === true) {
@@ -278,9 +315,11 @@ 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: {
@@ -290,6 +329,13 @@ export default {
        this.workingModeSelect = (this.parameter.MODE !== undefined) ? this.workingModeOptions.find(ele => ele.id === this.parameter.MODE) : this.workingModeOptions[0]
      },
    },
+    library: {
+      handler: function () {
+        if (!this.parameterTable) return
+        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 () {
  },
@@ -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">
@@ -435,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)
@@ -455,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)
      }
@@ -0,0 +1,152 @@
+<template>
+  <div class="flex sm12 xl12 md12 xs12 mb-2 pb-1 align--center">
+    <div class="row">
+      <div class="flex sm12 xl5 md5 xs12 my-1 py-0">
+        <p class="display-6"> CHANNEL {{ Number(channel) + 1 }} <p/>
+      </div>
+      <div class="flex sm12 xl3 md3 xs12 px-0 mx-0 my-0 py-0">
+        <va-input
+          class="mb-0 small-va-input"
+          v-model="inputStringText"
+          :disabled="!channelToggle"
+          @keyup.enter="inputChange(inputString)"
+          @blur="inputChange(inputString)"
+        >
+          <p slot="append" style="margin-right: 0;" small>
+            mA
+          </p>
+        </va-input>
+      </div>
+      <div class="flex sm12 xl4 md4 xs12 px-0 mx-0 my-0 py-0">
+        <va-toggle class="mb-0" v-model="toggle" color="success" style="float: right;" flat small @click.native="switchToggle()"/>
+      </div>
+    </div>
+    <div class="sm11 xl12 md12 xs12 my-1 py-1">
+      <va-slider
+        pins
+        :min="outputReadabilityData(range.min)"
+        :max="outputReadabilityData(range.max)"
+        value-visible
+        :step="10"
+        :color="toggle === true ? 'primary' : 'gray'"
+        :disabled="!toggle"
+        v-model="inputSlider"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ChannelBlock',
+  components: {
+  },
+  computed: {
+    toggle: {
+      get () {
+        return Boolean(this.inputValue[this.toggleName])
+      },
+      set (val) {
+        this.channelToggle = val
+      },
+    },
+    inputStringText: {
+      get () {
+        return String(this.outputReadabilityData(this.inputValue[this.parameterName]))
+      },
+      set (val) {
+        this.inputString = val
+      },
+    },
+    inputSlider: {
+      get () {
+        return this.outputReadabilityData(this.inputValue[this.parameterName])
+      },
+      set (val) {
+        this.inputChange(val)
+      },
+    },
+  },
+  props: {
+    inputValue: {
+      type: Object,
+    },
+    channel: {
+      type: Number,
+      required: true,
+    },
+    parameterName: {
+      type: String,
+      required: true,
+    },
+    toggleName: {
+      type: String,
+      required: true,
+    },
+    range: {
+      type: Object,
+    },
+    defaultUnit: {
+      type: String,
+    },
+    unit: {
+      type: Object,
+    },
+    outputReadabilityData: {
+      type: Function,
+      default: (val) => val,
+    },
+    outputRawData: {
+      type: Function,
+      default: (val) => val,
+    },
+  },
+  created () {
+  },
+  data () {
+    return {
+      inputString: '',
+      channelToggle: false,
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    inputChange (val) {
+      // if change from input field
+      if (typeof (val) === 'string') {
+        if (isNaN(val) || val === '') {
+          return false
+        }
+        val = this.outputRawData(val)
+        if (parseFloat(val) < this.range.min) {
+          val = this.range.min
+        } else if (parseFloat(val) > this.range.max) {
+          val = this.range.max
+        }
+      } else if (typeof (val) === 'number') {
+        val = this.outputRawData(val)
+      }
+      this.$emit('parameterChange', this.parameterName, val, true)
+    },
+    switchToggle () {
+      this.$emit('parameterChange', this.toggleName, this.channelToggle)
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+  .small-va-input {
+    .va-input {
+      &__container {
+        min-height: 1rem;
+      }
+
+      &__container__input {
+        margin-bottom: 0.001rem;
+        padding: 0.8rem 0.5rem;
+      }
+    }
+  }
+</style>
@@ -0,0 +1,216 @@
+<template>
+  <div :class="disabled === true ? 'flex d-flex py-1 disabled-text' : 'flex d-flex py-1'" style="align-items: center;">
+    <div style="flex-basis: 25%;">
+      <span>{{ showName }}</span>
+    </div>
+    <div v-if="onlyButton === true && disabled === true"  style="flex-basis: 50%; display: flex; align-items: center; justify-content: center;">
+      <img class="button-flat" src="@/assets/icons/button-disable.svg"/>
+    </div>
+    <div v-else-if="onlyButton === true && inputValue === false"  style="flex-basis: 50%; display: flex; align-items: center; justify-content: center;" @click="inputChange(true)">
+      <img class="button-flat" src="@/assets/icons/button-off.svg"/>
+    </div>
+    <div v-else-if="onlyButton === true && inputValue === true"  style="flex-basis: 50%; display: flex; align-items: center; justify-content: center;" @click="inputChange(false)">
+      <img class="button-flat" src="@/assets/icons/button-on.svg"/>
+    </div>
+    <div v-else style="flex-basis: 50%; align-items: center; text-align: -webkit-right;">
+      <va-input class="mr-2" style="margin-bottom: 0; width: 100px; color: green;"
+        @keyup.enter="inputChange(inputString)"
+        @blur="inputChange(inputString)"
+        v-model="inputStringModel"
+        :disabled="disabled">
+        <p v-if="withToggleButton === true" slot="append" style="margin-right: 0;" small>
+          {{ unitSelect }}
+        </p>
+      </va-input>
+    </div>
+    <div v-if="withToggleButton === false" style="flex-basis: 25%; align-items: center;">
+      {{ unitSelect }}
+    </div>
+    <div v-if="withToggleButton === true && disabled === true" style="flex-basis: 25%; align-items: center; display: inline-flex;">
+      <img class="button-dot" src="@/assets/icons/button-dot-off.svg">
+    </div>
+    <div v-else-if="withToggleButton === true && toggleValue === false" style="flex-basis: 25%; align-items: center; display: inline-flex;" @click="toggleChange(true)">
+      <img class="button-dot" src="@/assets/icons/button-dot-off.svg">
+    </div>
+    <div v-else-if="withToggleButton === true && toggleValue === true" style="flex-basis: 25%; align-items: center; display: inline-flex;" @click="toggleChange(false)">
+      <img class="button-dot" src="@/assets/icons/button-dot-on.svg">
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'InputFieldWithHeader',
+  components: {
+  },
+  props: {
+    templateType: {
+      type: Number,
+      default: 0,
+    },
+    onlyButton: {
+      type: Boolean,
+      default: false,
+    },
+    withHeader: {
+      type: Boolean,
+      default: false,
+    },
+    withUnitButton: {
+      type: Boolean,
+      default: false,
+    },
+    withToggleButton: {
+      type: Boolean,
+      default: false,
+    },
+    parameterName: {
+      type: String,
+      required: true,
+    },
+    showName: {
+      type: String,
+    },
+    range: {
+      type: Object,
+    },
+    inputValue: {
+      type: [Number, String, Boolean],
+      required: true,
+    },
+    referenceValue: {
+      type: Object,
+    },
+    defaultUnit: {
+      type: String,
+    },
+    unit: {
+      type: Object,
+    },
+    outputReadabilityData: {
+      type: Function,
+      default: (val) => val,
+    },
+    outputRawData: {
+      type: Function,
+      default: (val) => val,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    index: {
+      type: Number,
+      default: -1,
+    },
+    toggleParameter: {
+      type: String,
+    },
+    toggleValue: {
+      type: [Number, Boolean],
+    },
+  },
+  created () {
+  },
+  computed: {
+    inputStringModel: {
+      get () {
+        return String(this.outputReadabilityData(this.inputValue))
+      },
+      set (val) {
+        this.inputString = val
+      },
+    },
+    unitLength () {
+      return Object.keys(this.unit).length
+    },
+  },
+  data () {
+    return {
+      unitSelect: this.defaultUnit,
+      unitButtonClicked: '',
+      inputString: '',
+      size: {
+        12: 'flex sm12 xl12 md12 xs12 px-0 mx-0',
+        6: 'flex sm6 xl6 md6 xs6 px-0 mx-0',
+        5: 'flex sm5 xl5 md5 xs5 px-0 mx-0 my-0 py-0',
+        4: 'flex sm4 xl4 md4 xs4 px-0 mx-0 my-0 py-0',
+        3: 'flex sm3 xl3 md3 xs3 px-0 mx-0 my-0 py-0',
+      },
+      style: {
+        header: '',
+        content: '',
+        unitButton: '',
+      },
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    inputChange: function (val) {
+      /** */
+      let scale = 1
+      if (this.unitSelect) {
+        scale = this.unit[this.unitSelect]
+      }
+      // if change from input field
+      if (typeof (val) === 'string') {
+        if (isNaN(val) || val === '') {
+          return false
+        }
+        val = this.outputRawData(val, scale)
+        if (parseFloat(val) < this.range.min) {
+          val = this.range.min
+        } else if (parseFloat(val) > this.range.max) {
+          val = this.range.max
+        }
+      }
+      /** if parameter is array with index needs to return */
+      if (this.index === -1) {
+        this.$emit('parameterChange', this.parameterName, val)
+      } else {
+        this.$emit('parameterChangeByIndex', this.parameterName, val, this.index)
+      }
+    },
+    unitChange: function () {
+      this.unitButtonClicked += 1
+      this.unitSelect = Object.keys(this.unit)[this.unitButtonClicked % this.unitLength]
+    },
+    toggleChange: function (val) {
+      this.$emit('parameterChangeByIndex', this.toggleParameter, val, this.index)
+    },
+  },
+  async mounted () {
+    if (this.withHeader === true && this.withUnitButton === true) {
+      this.style.header = this.size[5]
+      this.style.content = this.size[4]
+      this.style.unitButton = this.size[3]
+    } else if (this.withHeader === true) {
+      this.style.header = this.size[6]
+      this.style.content = this.size[6]
+    } else {
+      this.style.content = this.size[12]
+    }
+  },
+  destroyed () {
+  },
+  watch: {
+  },
+}
+</script>
+<style>
+.button-dot {
+  height: 16px;
+  width: 16px;
+}
+
+.button-flat {
+  height: 20px;
+  width: 64px;
+}
+
+.disabled-text {
+  color: #c2c2c2;
+}
+</style>
@@ -0,0 +1,149 @@
+<template>
+  <div class="flex sm12 xl12 md12 xs12 mb-2 pb-1 align--center">
+    <div class="row">
+      <div class="flex sm12 xl5 md5 xs12 my-1 py-0">
+        <p class="display-6 my-2"> Timer <p/>
+      </div>
+      <div class="flex sm12 xl3 md3 xs12 px-0 mx-0 my-2 py-0">
+        <va-input
+          class="mb-0 small-va-input"
+          v-model="inputStringText"
+          :disabled="!toggle"
+          @keyup.enter="inputChange(inputString)"
+          @blur="inputChange(inputString)"
+        >
+          <p slot="append" style="margin-right: 0;" small>
+            s
+          </p>
+        </va-input>
+      </div>
+      <div class="flex sm12 xl4 md4 xs12 px-0 mx-0 my-2 py-0">
+        <va-toggle class="mb-0" v-model="toggle" color="success" style="float: right;" flat small @click.native="switchToggle()"/>
+      </div>
+    </div>
+    <!-- <div class="sm11 xl12 md12 xs12 my-1 py-1">
+      <va-slider
+        pins
+        :min="outputReadabilityData(range.min)"
+        :max="outputReadabilityData(range.max)"
+        value-visible
+        :step="10"
+        :color="timerToggle === true ? 'primary' : 'gray'"
+        :disabled="!timerToggle"
+        v-model="inputSlider"
+      />
+    </div> -->
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TimerBlock',
+  components: {
+  },
+  computed: {
+    inputStringText: {
+      get () {
+        return String(this.outputReadabilityData(this.inputValue[this.parameterName]))
+      },
+      set (val) {
+        this.inputString = val
+      },
+    },
+    inputSlider: {
+      get () {
+        return this.outputReadabilityData(this.inputValue[this.parameterName])
+      },
+      set (val) {
+        this.inputChange(val)
+      },
+    },
+    toggle: {
+      get () {
+        return !(this.inputValue[this.parameterName] === 0)
+      },
+      set (val) {
+        this.timerToggle = val
+      },
+    },
+  },
+  props: {
+    inputValue: {
+      type: Object,
+    },
+    parameterName: {
+      type: String,
+      required: true,
+    },
+    range: {
+      type: Object,
+    },
+    defaultUnit: {
+      type: String,
+    },
+    unit: {
+      type: Object,
+    },
+    outputReadabilityData: {
+      type: Function,
+      default: (val) => val,
+    },
+    outputRawData: {
+      type: Function,
+      default: (val) => val,
+    },
+  },
+  created () {
+  },
+  data () {
+    return {
+      inputString: '',
+      timerToggle: false,
+    }
+  },
+  mqtt: {
+  },
+  methods: {
+    inputChange (val) {
+      // if change from input field
+      if (typeof (val) === 'string') {
+        if (isNaN(val) || val === '') {
+          return false
+        }
+        val = this.outputRawData(val)
+        if (parseFloat(val) < this.range.min) {
+          val = this.range.min
+        } else if (parseFloat(val) > this.range.max) {
+          val = this.range.max
+        }
+      } else if (typeof (val) === 'number') {
+        val = this.outputRawData(val)
+      }
+      this.$emit('parameterChange', this.parameterName, val, true)
+    },
+    switchToggle () {
+      if (this.timerToggle === true) {
+        this.$emit('parameterChange', this.parameterName, 1)
+      }
+      if (this.timerToggle === false) {
+        this.$emit('parameterChange', this.parameterName, 0)
+      }
+    },
+  },
+}
+</script>
+
+  <style lang="scss">
+    .small-va-input {
+      .va-input {
+        &__container {
+          min-height: 1rem;
+        }
+
+        &__container__input {
+          margin-bottom: 0.001rem;
+          padding: 0.8rem 0.5rem;
+        }
+      }
+    }
+  </style>
@@ -0,0 +1,108 @@
+<template>
+  <div>
+    <div v-if="parameter.MODE === 0">
+      <div v-for="channel in channelList" :key="channel">
+        <ChannelBlock
+          :channel="channel"
+          :inputValue="parameter"
+          :parameterName="channelBlockCurrent(channel)"
+          :toggleName="channelBlockToggle(channel)"
+          v-bind="parameterTable[channelBlockCurrent(channel)]"
+          @parameterChange="parameterChange"
+        ></ChannelBlock>
+      </div>
+      <div class="row px-0 mx-0">
+        <p class="my-2 mr-2 display-5"> ADVANCED SETTING </p>
+      <!-- <va-toggle class="mb-0" flat small color="success" v-model="openAdvanced"/> -->
+      </div>
+      <div>
+        <TimerBlock
+          :inputValue="parameter"
+          :parameterName="'TIME_DURATION'"
+          v-bind="parameterTable.TIME_DURATION"
+          @parameterChange="parameterChange"
+        ></TimerBlock>
+      </div>
+      <div>
+        <div v-for="triggerIndex in triggerList" :key="'trigger_' + triggerIndex">
+          <TriggerBlock
+            :triggerIndex="triggerIndex"
+            :inputValue="parameter"
+            :parameterName="triggerBlockType(triggerIndex)"
+            :toggleName="triggerBlockEnable(triggerIndex)"
+            v-bind="parameterTable[triggerBlockType()]"
+            @parameterChange="parameterChange"
+          ></TriggerBlock>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import ChannelBlock from './ChannelBlock.vue'
+import TriggerBlock from './TriggerBlock.vue'
+import TimerBlock from './TimerBlock.vue'
+export default {
+  name: 'Trigger',
+  components: {
+    ChannelBlock,
+    TriggerBlock,
+    TimerBlock,
+  },
+  computed: {
+  },
+  props: {
+    parameter: {
+      type: Object,
+      default: () => {},
+    },
+    parameterTable: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data () {
+    return {
+      channelList: [0, 1, 2, 3],
+      triggerList: [0, 1],
+      openAdvanced: Boolean(this.parameter.TRIG0_en || this.parameter.TRIG1_en),
+    }
+  },
+  methods: {
+    channelBlockToggle (channelIndex) {
+      let name = 'ACC_a_out'
+      if (channelIndex !== undefined) {
+        name += channelIndex
+      }
+      return name
+    },
+    channelBlockCurrent (channelIndex) {
+      let name = 'ACC_a_out'
+      if (channelIndex !== undefined) {
+        name += channelIndex
+      }
+      name += '_current'
+      return name
+    },
+    triggerBlockEnable (triggerIndex) {
+      let name = 'TRIG'
+      if (triggerIndex !== undefined) {
+        name += triggerIndex
+      }
+      name += '_en'
+      return name
+    },
+    triggerBlockType (triggerIndex) {
+      let name = 'TRIG'
+      if (triggerIndex !== undefined) {
+        name += triggerIndex
+      }
+      name += '_edge_type'
+      return name
+    },
+    parameterChange: function (name, value, debounce) {
+      this.$emit('parameterChange', name, value, debounce)
+    },
+  },
+}
+</script>
@@ -0,0 +1,101 @@
+<template>
+  <div class="row flex sm12 xl12 md12 xs12 ma-0 pa-0">
+    <div class="d-flex sm12 xl12 md12 xs12 my-0 py-0">
+      <div class="flex sm8 xl8 md8 xs8 my-1 py-0">
+        <p class="display-6 my-2"> TRIGGER IN {{ triggerIndex + 1 }} <p/>
+      </div>
+      <div class="flex sm4 xl4 md4 xs4 ma-0 pa-0 my-2">
+        <va-toggle class="mb-0" v-model="toggle" color="success" style="float: right;" flat small @click.native="switchToggle()"/>
+      </div>
+    </div>
+    <div class="flex sm12 xl12 md12 xs12 pa-0 ma-0">
+      <va-radio-button
+        v-for="(option, index) in optionTrigger"
+        :key="index"
+        style="float: left;"
+        v-model="selectTrigger"
+        :option="optionTrigger[index]"
+        :label="optionTrigger[index]"
+        :disabled="!toggle"
+        @click.native.stop="inputChange(index)"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TriggerBlock',
+  components: {
+  },
+  props: {
+    triggerIndex: {
+      type: Number,
+      required: true,
+    },
+    inputValue: {
+      type: Object,
+    },
+    parameterName: {
+      type: String,
+      required: true,
+    },
+    toggleName: {
+      type: String,
+      required: true,
+    },
+    range: {
+      type: Object,
+    },
+    defaultUnit: {
+      type: String,
+    },
+    unit: {
+      type: Object,
+    },
+    outputReadabilityData: {
+      type: Function,
+      default: (val) => val,
+    },
+    outputRawData: {
+      type: Function,
+      default: (val) => val,
+    },
+  },
+  computed: {
+    toggle: {
+      get () {
+        return Boolean(this.inputValue[this.toggleName])
+      },
+      set (val) {
+        this.triggerToggle = val
+      },
+    },
+  },
+  created () {
+  },
+  data () {
+    return {
+      selectTrigger: 'RISING',
+      optionTrigger: [
+        'RISING',
+        'FALLING',
+        'BOTH',
+      ],
+      triggerToggle: false,
+    }
+  },
+  methods: {
+    inputChange (val) {
+      this.$emit('parameterChange', this.parameterName, val)
+    },
+    switchToggle () {
+      this.$emit('parameterChange', this.toggleName, this.triggerToggle)
+    },
+  },
+  mounted () {
+    this.selectTrigger = this.optionTrigger[this.inputValue[this.parameterName]]
+    this.triggerToggle = Boolean(this.inputValue[this.toggleName])
+  },
+}
+</script>
@@ -0,0 +1,270 @@
+<template>
+  <div>
+    <div v-for="channel of [0,1,2,3,4,5,6,7]" :key="channel">
+      <button class="accordion">
+        <div style="display: flex; justify-content: space-between; align-items: center;">
+          <div class="d-flex align--center">
+            <i v-if="panelSpread.includes(channel) === false" class="va-icon fa fa-angle-right mr-1" style="width: 15px;"></i>
+            <i v-if="panelSpread.includes(channel) === true" class="va-icon fa fa-angle-down mr-1" style="width: 15px;"></i>
+            <span>{{ channelName[channel] }}</span>
+          </div>
+          <div class="d-flex align--center">
+            <va-toggle class="mb-0" color="#2CE9A4" :value="parameter.USED[channel]" style="float: right;" flat small @click.native.stop="parameterChangeByIndex('USED', !parameter.USED[channel], channel)"/>
+          </div>
+        </div>
+      </button>
+      <div class="panel">
+        <InputFieldWithToggle
+          v-if="[2,3].indexOf(channel) >= 0"
+          style="margin-bottom: 0.5rem;"
+          :index="channel"
+          :parameterName="'OUTPUT_5V'"
+          :inputValue="parameter.OUTPUT_5V[channel]"
+          :onlyButton="true"
+          :disabled="channel === 2 ? true: !parameter.USED[channel]"
+          v-bind="parameterTable.OUTPUT_5V"
+          @parameterChange="parameterChange"
+          @parameterChangeByIndex="parameterChangeByIndex"
+        ></InputFieldWithToggle>
+        <InputFieldWithToggle
+          v-if="[4,5,6,7].indexOf(channel) >= 0"
+          :index="channel"
+          :parameterName="'CURRENT'"
+          :inputValue="parameter.CURRENT[channel]"
+          :disabled="!parameter.USED[channel]"
+          v-bind="parameterTable.CURRENT"
+          @parameterChange="parameterChange"
+          @parameterChangeByIndex="parameterChangeByIndex"
+        ></InputFieldWithToggle>
+        <!-- pre-T -->
+        <InputFieldWithToggle
+          :index="channel"
+          :parameterName="'T_EARLY'"
+          :inputValue="parameter.T_EARLY[channel]"
+          :withToggleButton="true"
+          :toggleParameter="'V_EARLY'"
+          :toggleValue="parameter.V_EARLY[channel]"
+          :disabled="!parameter.USED[channel]"
+          v-bind="parameterTable.T_EARLY"
+          @parameterChange="parameterChange"
+          @parameterChangeByIndex="parameterChangeByIndex"
+        ></InputFieldWithToggle>
+        <InputFieldWithToggle
+          :index="channel"
+          :parameterName="'CYCLE'"
+          :inputValue="parameter.CYCLE[channel]"
+          :disabled="!parameter.USED[channel]"
+          v-bind="parameterTable.CYCLE"
+          @parameterChange="parameterChange"
+          @parameterChangeByIndex="parameterChangeByIndex"
+        ></InputFieldWithToggle>
+        <InputFieldWithToggle
+          :index="channel"
+          :parameterName="'T_MID0'"
+          :inputValue="parameter.T_MID0[channel]"
+          :withToggleButton="true"
+          :toggleParameter="'V_MID0'"
+          :toggleValue="parameter.V_MID0[channel]"
+          :disabled="!parameter.USED[channel]"
+          v-bind="parameterTable.T_MID0"
+          @parameterChange="parameterChange"
+          @parameterChangeByIndex="parameterChangeByIndex"
+        ></InputFieldWithToggle>
+        <InputFieldWithToggle
+          :index="channel"
+          :parameterName="'T_MID1'"
+          :inputValue="parameter.T_MID1[channel]"
+          :withToggleButton="true"
+          :toggleParameter="'V_MID1'"
+          :toggleValue="parameter.V_MID1[channel]"
+          :disabled="!parameter.USED[channel]"
+          v-bind="parameterTable.T_MID1"
+          @parameterChange="parameterChange"
+          @parameterChangeByIndex="parameterChangeByIndex"
+        ></InputFieldWithToggle>
+        <InputFieldWithToggle
+          :index="channel"
+          :parameterName="'T_MID2'"
+          :inputValue="parameter.T_MID2[channel]"
+          :withToggleButton="true"
+          :toggleParameter="'V_MID2'"
+          :toggleValue="parameter.V_MID2[channel]"
+          :disabled="!parameter.USED[channel]"
+          v-bind="parameterTable.T_MID2"
+          @parameterChange="parameterChange"
+          @parameterChangeByIndex="parameterChangeByIndex"
+        ></InputFieldWithToggle>
+        <InputFieldWithToggle
+          :index="channel"
+          :parameterName="'T_MID3'"
+          :inputValue="parameter.T_MID3[channel]"
+          :withToggleButton="true"
+          :toggleParameter="'V_MID3'"
+          :toggleValue="parameter.V_MID3[channel]"
+          :disabled="!parameter.USED[channel]"
+          v-bind="parameterTable.T_MID3"
+          @parameterChange="parameterChange"
+          @parameterChangeByIndex="parameterChangeByIndex"
+        ></InputFieldWithToggle>
+        <InputFieldWithToggle
+          :index="channel"
+          :parameterName="'T_LATE'"
+          :inputValue="parameter.T_LATE[channel]"
+          :withToggleButton="true"
+          :toggleParameter="'V_LATE'"
+          :toggleValue="parameter.V_LATE[channel]"
+          :disabled="!parameter.USED[channel]"
+          v-bind="parameterTable.T_LATE"
+          @parameterChange="parameterChange"
+          @parameterChangeByIndex="parameterChangeByIndex"
+        ></InputFieldWithToggle>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import InputFieldWithToggle from './InputFieldWithToggle.vue'
+export default {
+  name: 'Trigger',
+  components: {
+    InputFieldWithToggle,
+  },
+  computed: {
+  },
+  props: {
+    parameter: {
+      type: Object,
+      default: () => {},
+    },
+    parameterTable: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data () {
+    return {
+      panelSpread: [],
+      channelName: [
+        'Gas valve 1',
+        'Gas valve 2',
+        'Gas valve 3',
+        '5V TTL',
+        'LED 1',
+        'LED 2',
+        'LED 3',
+        'LED 4',
+      ],
+      channelList: [0, 1, 2, 3],
+      triggerList: [0, 1],
+      openAdvanced: Boolean(this.parameter.TRIG0_en || this.parameter.TRIG1_en),
+    }
+  },
+  methods: {
+    channelBlockToggle (channelIndex) {
+      let name = 'ACC_a_out'
+      if (channelIndex !== undefined) {
+        name += channelIndex
+      }
+      return name
+    },
+    channelBlockCurrent (channelIndex) {
+      let name = 'ACC_a_out'
+      if (channelIndex !== undefined) {
+        name += channelIndex
+      }
+      name += '_current'
+      return name
+    },
+    triggerBlockEnable (triggerIndex) {
+      let name = 'TRIG'
+      if (triggerIndex !== undefined) {
+        name += triggerIndex
+      }
+      name += '_en'
+      return name
+    },
+    triggerBlockType (triggerIndex) {
+      let name = 'TRIG'
+      if (triggerIndex !== undefined) {
+        name += triggerIndex
+      }
+      name += '_edge_type'
+      return name
+    },
+    parameterChange: function (name, value, debounce) {
+      this.$emit('parameterChange', name, value, debounce)
+    },
+    parameterChangeByIndex: function (name, value, index) {
+      if (name.indexOf('V_MID') >= 0) {
+        console.log('sadsaasdadadad')
+        if (name === 'V_MID0' || name === 'V_MID2') {
+          this.parameter.V_MID0.splice(index, 1, value)
+          this.parameter.V_MID2.splice(index, 1, value)
+          this.parameter.V_MID1.splice(index, 1, !value)
+          this.parameter.V_MID3.splice(index, 1, !value)
+        }
+        if (name === 'V_MID1' || name === 'V_MID3') {
+          this.parameter.V_MID1.splice(index, 1, value)
+          this.parameter.V_MID3.splice(index, 1, value)
+          this.parameter.V_MID0.splice(index, 1, !value)
+          this.parameter.V_MID2.splice(index, 1, !value)
+        }
+        this.$emit('parameterChange', 'V_MID0', this.parameter.V_MID0, false, true)
+        this.$emit('parameterChange', 'V_MID1', this.parameter.V_MID1, false, true)
+        this.$emit('parameterChange', 'V_MID2', this.parameter.V_MID2, false, true)
+        this.$emit('parameterChange', 'V_MID3', this.parameter.V_MID3, false, true)
+      }
+      const _value = [...this.parameter[name]]
+      _value[index] = value
+      this.$emit('parameterChange', name, _value)
+    },
+    test: function (index) {
+      console.log('index', index)
+      // this.triggerUsed.splice(index, 1, !this.triggerUsed[index])
+    },
+  },
+  mounted () {
+    const acc = document.getElementsByClassName('accordion')
+    const panelSpread = this.panelSpread
+
+    for (let i = 0; i < acc.length; i++) {
+      acc[i].addEventListener('click', function () {
+        this.classList.toggle('active')
+        var panel = this.nextElementSibling
+        if (panel.style.display === 'block') {
+          panel.style.display = 'none'
+          panelSpread.splice(panelSpread.indexOf(i), 1)
+        } else {
+          panel.style.display = 'block'
+          panelSpread.push(i)
+        }
+      })
+    }
+  },
+}
+</script>
+<style>
+.accordion {
+  background-color: white;
+  cursor: pointer;
+  padding: 18px;
+  width: 100%;
+  border: none;
+  text-align: left;
+  outline: none;
+  font-size: 15px;
+  transition: 0.4s;
+}
+
+.panel {
+  padding: 0 18px;
+  display: none;
+  background-color: white;
+  overflow: hidden;
+}
+
+.button-dot {
+  height: 16px;
+  width: 16px;
+}
+</style>
@@ -0,0 +1,68 @@
+<template>
+  <transition name="fade">
+    <div class="toast" :style="{ bottom: (25 +( 50 * (index))) + 'px' }" v-if="show">
+      {{ message }}
+      <span class="close-button" @click="remove">&#x2715;</span>
+    </div>
+  </transition>
+</template>
+
+<script>
+export default {
+  props: {
+    message: String,
+    duration: {
+      type: Number,
+      default: 3000,
+    },
+    index: Number,
+  },
+  data () {
+    return {
+      show: true,
+    }
+  },
+  methods: {
+    remove: function () {
+      this.$emit('destroyed')
+    },
+  },
+  mounted () {
+    this.show = true
+    // setTimeout(() => {
+    //   this.show = false
+    //   this.$emit('destroyed')
+    // }, this.duration)
+  },
+}
+</script>
+
+<style lang="scss">
+    .fade-enter-active,
+    .fade-leave-active {
+      transition: opacity 0.5s;
+    }
+
+    .fade-enter,
+    .fade-leave-to {
+      opacity: 0;
+    }
+
+    .toast {
+      position: fixed;
+      bottom: 20px;
+      right: 20px;
+      background-color: #fa826b;
+      opacity: 0.95;
+      font-size: 16px;
+      color: white;
+      padding: 12px;
+    }
+
+    .close-button {
+      margin-left: 10px;
+      color: white;
+      cursor: pointer;
+    }
+
+</style>
@@ -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: {
+  },
+}
@@ -18,6 +18,7 @@ export default {
  channels: {
    time: {
      name: 'Time',
+      physicalQuantity: 's',
      unit: {
        us: 1,
        ms: 1e3,
@@ -30,6 +31,7 @@ export default {
    },
    0: {
      name: 'I_in',
+      physicalQuantity: 'A',
      unit: {
        nA: 1,
      },
@@ -37,6 +39,7 @@ export default {
    },
    1: {
      name: 'V_in/V_out',
+      physicalQuantity: 'V',
      unit: {
        uV: 1,
      },
@@ -44,6 +47,7 @@ export default {
    },
    2: {
      name: 'Gain',
+      physicalQuantity: '',
      unit: {
        default: 1,
      },
@@ -17,6 +17,7 @@ export default {
  channels: {
    time: {
      name: 'Time',
+      physicalQuantity: 's',
      unit: {
        us: 1,
        ms: 1e3,
@@ -29,6 +30,7 @@ export default {
    },
    0: {
      name: 'I_in',
+      physicalQuantity: 'A',
      unit: {
        nA: 1,
      },
@@ -36,6 +38,7 @@ export default {
    },
    1: {
      name: 'V_in/V_out',
+      physicalQuantity: 'V',
      unit: {
        uV: 1,
      },
@@ -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) => {
@@ -18,6 +18,7 @@ export default {
  channels: {
    time: {
      name: 'Time',
+      physicalQuantity: 's',
      unit: {
        us: 1,
        ms: 1e3,
@@ -30,6 +31,7 @@ export default {
    },
    0: {
      name: 'I_in',
+      physicalQuantity: 'A',
      unit: {
        nA: 1,
        uA: 1e3,
@@ -40,6 +42,7 @@ export default {
    },
    1: {
      name: 'Potential',
+      physicalQuantity: 'V',
      unit: {
        uV: 1,
        mV: 1e3,
@@ -50,6 +53,7 @@ export default {
    },
    2: {
      name: 'V_out',
+      physicalQuantity: 'V',
      unit: {
        uV: 1,
        mV: 1e3,
@@ -18,6 +18,7 @@ export default {
  channels: {
    time: {
      name: 'Time',
+      physicalQuantity: 's',
      unit: {
        us: 1,
        ms: 1e3,
@@ -30,6 +31,7 @@ export default {
    },
    0: {
      name: 'I_in',
+      physicalQuantity: 'A',
      unit: {
        nA: 1,
        uA: 1e3,
@@ -40,6 +42,7 @@ export default {
    },
    1: {
      name: 'Potential',
+      physicalQuantity: 'V',
      unit: {
        uV: 1,
        mV: 1e3,
@@ -50,6 +53,7 @@ export default {
    },
    2: {
      name: 'V_out',
+      physicalQuantity: 'V',
      unit: {
        uV: 1,
        mV: 1e3,
@@ -60,6 +64,7 @@ export default {
    },
    3: {
      name: 'sum_cnt',
+      physicalQuantity: 'V',
      unit: {
        uV: 1,
        mV: 1e3,
@@ -70,6 +75,7 @@ export default {
    },
    4: {
      name: 'sum_adc_delta_Iin',
+      physicalQuantity: 'V',
      unit: {
        uV: 1,
        mV: 1e3,
@@ -80,6 +86,7 @@ export default {
    },
    5: {
      name: 'sum_adc_delta_Voutin',
+      physicalQuantity: 'V',
      unit: {
        uV: 1,
        mV: 1e3,
@@ -90,6 +97,7 @@ export default {
    },
    6: {
      name: 'resis',
+      physicalQuantity: 'V',
      unit: {
        uV: 1,
        mV: 1e3,
@@ -18,6 +18,7 @@ export default {
  channels: {
    time: {
      name: 'Time',
+      physicalQuantity: 's',
      unit: {
        us: 1,
        ms: 1e3,
@@ -30,6 +31,7 @@ export default {
    },
    0: {
      name: 'I_in',
+      physicalQuantity: 'A',
      unit: {
        nA: 1,
        uA: 1e3,
@@ -40,6 +42,7 @@ export default {
    },
    1: {
      name: 'V_in',
+      physicalQuantity: 'V',
      unit: {
        uV: 1,
        mV: 1e3,
@@ -50,6 +53,7 @@ export default {
    },
    2: {
      name: 'V_out',
+      physicalQuantity: 'V',
      unit: {
        uV: 1,
        mV: 1e3,
@@ -18,6 +18,7 @@ export default {
  channels: {
    time: {
      name: 'Time',
+      physicalQuantity: 's',
      unit: {
        us: 1,
        ms: 1e3,
@@ -30,6 +31,7 @@ export default {
    },
    0: {
      name: 'I_in',
+      physicalQuantity: 'A',
      unit: {
        nA: 1,
        uA: 1e3,
@@ -40,6 +42,7 @@ export default {
    },
    1: {
      name: 'V_out',
+      physicalQuantity: 'V',
      unit: {
        uV: 1,
        mV: 1e3,
@@ -50,6 +53,7 @@ export default {
    },
    2: {
      name: 'V_in',
+      physicalQuantity: 'V',
      unit: {
        uV: 1,
        mV: 1e3,
@@ -60,6 +64,7 @@ export default {
    },
    3: {
      name: 'Cycle number',
+      physicalQuantity: '',
      unit: {
        cycle: 1,
      },
@@ -18,6 +18,7 @@ export default {
  channels: {
    time: {
      name: 'Time',
+      physicalQuantity: 's',
      unit: {
        us: 1,
        ms: 1e3,
@@ -30,6 +31,7 @@ export default {
    },
    0: {
      name: 'I_in',
+      physicalQuantity: 'A',
      unit: {
        nA: 1,
        uA: 1e3,
@@ -40,6 +42,7 @@ export default {
    },
    1: {
      name: 'Potential',
+      physicalQuantity: 'V',
      unit: {
        uV: 1,
        mV: 1e3,
@@ -50,6 +53,7 @@ export default {
    },
    2: {
      name: 'V_out',
+      physicalQuantity: 'V',
      unit: {
        uV: 1,
        mV: 1e3,
@@ -60,6 +64,7 @@ export default {
    },
    3: {
      name: 'Cycle number',
+      physicalQuantity: '',
      unit: {
        cycle: 1,
      },
@@ -23,6 +23,7 @@ export default {
  channels: {
    time: {
      name: 'Time',
+      physicalQuantity: 's',
      unit: {
        us: 1,
        ms: 1e3,
@@ -35,6 +36,7 @@ export default {
    },
    0: {
      name: 'I_in',
+      physicalQuantity: 'A',
      unit: {
        nA: 1,
        uA: 1e3,
@@ -45,6 +47,7 @@ export default {
    },
    1: {
      name: 'Potential',
+      physicalQuantity: 'V',
      unit: {
        uV: 1,
        mV: 1e3,
@@ -55,6 +58,7 @@ export default {
    },
    2: {
      name: 'V_out',
+      physicalQuantity: 'V',
      unit: {
        uV: 1,
        mV: 1e3,
@@ -65,6 +69,7 @@ export default {
    },
    3: {
      name: 'Cycle number',
+      physicalQuantity: '',
      unit: {
        cycle: 1,
      },
@@ -16,6 +16,7 @@ export default {
  channels: {
    time: {
      name: 'Time',
+      physicalQuantity: 's',
      unit: {
        us: 1,
        ms: 1e3,
@@ -28,6 +29,7 @@ export default {
    },
    0: {
      name: '0',
+      physicalQuantity: '',
      unit: {
        default: 1,
      },
@@ -35,6 +37,7 @@ export default {
    },
    1: {
      name: '1',
+      physicalQuantity: '',
      unit: {
        default: 1,
      },
@@ -42,6 +45,7 @@ export default {
    },
    2: {
      name: '2',
+      physicalQuantity: '',
      unit: {
        default: 1,
      },
@@ -49,6 +53,7 @@ export default {
    },
    3: {
      name: '3',
+      physicalQuantity: '',
      unit: {
        default: 1,
      },
@@ -18,6 +18,7 @@ export default {
  channels: {
    time: {
      name: 'Time',
+      physicalQuantity: 's',
      unit: {
        us: 1,
        ms: 1e3,
@@ -30,6 +31,7 @@ export default {
    },
    0: {
      name: 'I_in',
+      physicalQuantity: 'A',
      unit: {
        nA: 1,
        uA: 1e3,
@@ -40,6 +42,7 @@ export default {
    },
    1: {
      name: 'V_out',
+      physicalQuantity: 'V',
      unit: {
        uV: 1,
        mV: 1e3,
@@ -50,6 +53,7 @@ export default {
    },
    2: {
      name: 'V_in',
+      physicalQuantity: 'V',
      unit: {
        uV: 1,
        mV: 1e3,
@@ -18,6 +18,7 @@ export default {
  channels: {
    time: {
      name: 'Time',
+      physicalQuantity: 's',
      unit: {
        us: 1,
        ms: 1e3,
@@ -30,6 +31,7 @@ export default {
    },
    0: {
      name: 'I_in',
+      physicalQuantity: 'A',
      unit: {
        nA: 1,
        uA: 1e3,
@@ -40,6 +42,7 @@ export default {
    },
    1: {
      name: 'V_in',
+      physicalQuantity: 'V',
      unit: {
        uV: 1,
        mV: 1e3,
@@ -50,6 +53,7 @@ export default {
    },
    2: {
      name: 'V_out',
+      physicalQuantity: 'V',
      unit: {
        uV: 1,
        mV: 1e3,
@@ -18,6 +18,7 @@ export default {
  channels: {
    time: {
      name: 'Time',
+      physicalQuantity: 's',
      unit: {
        us: 1,
        ms: 1e3,
@@ -30,6 +31,7 @@ export default {
    },
    0: {
      name: 'I_in',
+      physicalQuantity: 'A',
      unit: {
        nA: 1,
        uA: 1e3,
@@ -40,6 +42,7 @@ export default {
    },
    1: {
      name: 'V_out',
+      physicalQuantity: 'V',
      unit: {
        uV: 1,
        mV: 1e3,
@@ -50,6 +53,7 @@ export default {
    },
    2: {
      name: 'V_in',
+      physicalQuantity: 'V',
      unit: {
        uV: 1,
        mV: 1e3,
@@ -18,6 +18,7 @@ export default {
  channels: {
    time: {
      name: 'Time',
+      physicalQuantity: 's',
      unit: {
        us: 1,
        ms: 1e3,
@@ -30,6 +31,7 @@ export default {
    },
    0: {
      name: 'I_in',
+      physicalQuantity: 'A',
      unit: {
        nA: 1,
        uA: 1e3,
@@ -40,6 +42,7 @@ export default {
    },
    1: {
      name: 'Potential',
+      physicalQuantity: 'V',
      unit: {
        uV: 1,
        mV: 1e3,
@@ -50,6 +53,7 @@ export default {
    },
    2: {
      name: 'V_out',
+      physicalQuantity: 'V',
      unit: {
        uV: 1,
        mV: 1e3,
@@ -18,6 +18,7 @@ export default {
  channels: {
    time: {
      name: 'Time',
+      physicalQuantity: 's',
      unit: {
        us: 1,
        ms: 1e3,
@@ -30,6 +31,7 @@ export default {
    },
    0: {
      name: 'I_in',
+      physicalQuantity: 'A',
      unit: {
        nA: 1,
        uA: 1e3,
@@ -40,6 +42,7 @@ export default {
    },
    1: {
      name: 'Potential',
+      physicalQuantity: 'V',
      unit: {
        uV: 1,
        mV: 1e3,
@@ -50,6 +53,7 @@ export default {
    },
    2: {
      name: 'V_in',
+      physicalQuantity: 'V',
      unit: {
        uV: 1,
        mV: 1e3,
@@ -34,6 +34,7 @@ export default {
  channels: {
    time: {
      name: 'Time',
+      physicalQuantity: 's',
      unit: {
        us: 1,
        ms: 1e3,
@@ -46,6 +47,7 @@ export default {
    },
    0: {
      name: 'I_in_pul1',
+      physicalQuantity: 'A',
      unit: {
        nA: 1,
        uA: 1e3,
@@ -56,6 +58,7 @@ export default {
    },
    1: {
      name: 'I_in_pul2',
+      physicalQuantity: 'A',
      unit: {
        nA: 1,
        uA: 1e3,
@@ -1,6 +1,6 @@
 export default {
  name: 'R-T Graph',
-  parameter: ['DAC_VOLT', 'SAMPLE_RATE', 'CTRL_HIGH_Z_15', 'TIME_DURATION'], // 這個mode用到的參數
+  parameter: ['DAC_VOLT', 'SAMPLE_RATE', 'CTRL_HIGH_Z_15', 'TIME_DURATION', 'THRESHOLD', 'TRIGGER_TIME'], // 這個mode用到的參數
  showParameter: ['CTRL_HIGH_Z_15', 'DAC_VOLT', 'SAMPLE_RATE', 'TIME_DURATION'], // 有要秀給user看的參數
  headerParameter: () => ['DAC_VOLT', 'SAMPLE_RATE', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'TIME_DURATION'], // export header的參數
  valScales: {
@@ -18,6 +18,7 @@ export default {
  channels: {
    time: {
      name: 'Time',
+      physicalQuantity: 's',
      unit: {
        us: 1,
        ms: 1e3,
@@ -30,6 +31,7 @@ export default {
    },
    0: {
      name: 'I_in',
+      physicalQuantity: 'A',
      unit: {
        nA: 1,
        uA: 1e3,
@@ -40,6 +42,7 @@ export default {
    },
    1: {
      name: 'V_out',
+      physicalQuantity: 'V',
      unit: {
        uV: 1,
        mV: 1e3,
@@ -50,6 +53,7 @@ export default {
    },
    2: {
      name: 'Resistor',
+      physicalQuantity: 'R',
      unit: {
        mΩ: 1,
        mohm: 1,
@@ -18,6 +18,7 @@ export default {
  channels: {
    time: {
      name: 'Time',
+      physicalQuantity: 's',
      unit: {
        us: 1,
        ms: 1e3,
@@ -30,6 +31,7 @@ export default {
    },
    0: {
      name: 'I_in',
+      physicalQuantity: 'A',
      unit: {
        nA: 1,
        uA: 1e3,
@@ -40,6 +42,7 @@ export default {
    },
    1: {
      name: 'V_in',
+      physicalQuantity: 'V',
      unit: {
        uV: 1,
        mV: 1e3,
@@ -1,3 +1,4 @@
+import Idle from '../Common/Idle'
 import IV from './IV'
 import CycleIV from './CycleIV'
 import FunctionGenerator from './FunctionGenerator'
@@ -47,6 +48,42 @@ import DPV from './DPV'
 */

 const EliteZM15 = {
+  TRIGGER_TIME: {
+    type: 'number',
+    showName: 'Trigger Time',
+    componentType: 'input-range',
+    range: Object.freeze({ min: 0, max: 1e6 }), // UI上能輸入的最大最小值
+    defaultValue: 0,
+    defaultUnit: 's',
+    downloadUnit: 's',
+    unit: {
+      s: 1,
+    },
+    outputRawData: (val) => {
+      return parseInt(parseFloat(val))
+    },
+    outputReadabilityData: (val) => {
+      return parseInt(parseFloat(val))
+    },
+  },
+  THRESHOLD: {
+    type: 'number',
+    showName: 'Threshold',
+    componentType: 'input-range',
+    range: Object.freeze({ min: 0, max: 1e2 }), // UI上能輸入的最大最小值
+    defaultValue: 0,
+    defaultUnit: '%',
+    downloadUnit: '%',
+    unit: {
+      '%': 1,
+    },
+    outputRawData: (val, scale) => {
+      return val * scale
+    },
+    outputReadabilityData: (val, scale) => {
+      return val / scale
+    },
+  },
  ADC_VALUE_I: {
    type: 'none',
    showName: 'Instruction',
@@ -98,20 +135,20 @@ const EliteZM15 = {
    showName: 'Current range',
    componentType: 'input-button-toggle',
    options: [
-      { value: 0, label: '<4 μA' },
-      { value: 1, label: '2.5-100 μA' },
-      { value: 2, label: '85-2050 μA' },
+      { value: 0, label: '<4 uA' },
+      { value: 1, label: '2.5-100 uA' },
+      { value: 2, label: '85-2050 uA' },
      { value: 3, label: '1800 uA' },
      { value: 4, label: 'Auto' },
    ],
-    range: ['<4 μA', '2.5-100 μA', '85-2050 μA', '1800 uA', 'Auto'],
+    range: ['<4 uA', '2.5-100 uA', '85-2050 uA', '1800 uA', 'Auto'],
    defaultValue: 4,
    outputRawData: (val) => {
-      const currentRangeArr = ['<4 μA', '2.5-100 μA', '85-2050 μA', '1800 uA', 'Auto']
+      const currentRangeArr = ['<4 uA', '2.5-100 uA', '85-2050 uA', '1800 uA', 'Auto']
      return currentRangeArr.indexOf(val.toString())
    },
    outputReadabilityData: (idx) => {
-      const currentRangeArr = ['<4 μA', '2.5-100 μA', '85-2050 μA', '1800 uA', 'Auto']
+      const currentRangeArr = ['<4 uA', '2.5-100 uA', '85-2050 uA', '1800 uA', 'Auto']
      return currentRangeArr[parseInt(idx)]
    },
  },
@@ -392,10 +429,10 @@ const EliteZM15 = {
    componentType: 'input-range',
    range: Object.freeze({ min: 0, max: 1500000 }),
    defaultValue: 0,
-    defaultUnit: 'μA',
-    downloadUnit: 'mA',
+    defaultUnit: 'uA',
+    downloadUnit: 'uA',
    unit: {
-      μA: 1,
+      uA: 1,
      mA: 1e3,
    },
    outputRawData: (val) => {
@@ -519,7 +556,7 @@ const EliteZM15 = {
      return parseInt((parseFloat(val) - 25000) / 5) / scale
    },
  },
-  VOLT_VSCAN: {
+  CA_VOLT: {
    type: 'number',
    showName: 'Volt (v.s. ref)',
    componentType: 'input-range',
@@ -952,6 +989,12 @@ const EliteZM15 = {
  },

  MODE_OPTIONS: [
+    {
+      id: 17,
+      description: 'Idle',
+      img_src: 'IV-Wire',
+      highz: 1,
+    },
    {
      id: 0,
      description: 'I-V Curve',
@@ -1070,6 +1113,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) => {
@@ -18,6 +18,7 @@ export default {
  channels: {
    time: {
      name: 'Time',
+      physicalQuantity: 's',
      unit: {
        us: 1,
        ms: 1e3,
@@ -30,6 +31,7 @@ export default {
    },
    0: {
      name: 'I_in',
+      physicalQuantity: 'A',
      unit: {
        nA: 1,
        uA: 1e3,
@@ -40,6 +42,7 @@ export default {
    },
    1: {
      name: 'Potential',
+      physicalQuantity: 'V',
      unit: {
        uV: 1,
        mV: 1e3,
@@ -50,6 +53,7 @@ export default {
    },
    2: {
      name: 'V_out',
+      physicalQuantity: 'V',
      unit: {
        uV: 1,
        mV: 1e3,
@@ -0,0 +1,262 @@
+export default {
+  name: 'Constant Frequency',
+  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',
+      physicalQuantity: 's',
+      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',
+      physicalQuantity: 'R',
+      unit: {
+        ohm: 1,
+      },
+      downloadUnit: 'ohm',
+      defaultUnit: 'ohm',
+    },
+    1: {
+      name: 'Z_Real_Raw',
+      physicalQuantity: 'R',
+      unit: {
+        ohm: 1,
+      },
+      downloadUnit: 'ohm',
+      defaultUnit: 'ohm',
+    },
+    2: {
+      name: 'Frequency',
+      physicalQuantity: 'Hz',
+      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',
+      physicalQuantity: 'R',
+      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',
+      physicalQuantity: 'R',
+      unit: {
+        mohm: 1e-3,
+        mΩ: 1e-3,
+        ohm: 1,
+        Ω: 1,
+        kohm: 1e3,
+        kΩ: 1e3,
+        Mohm: 1e6,
+        MΩ: 1e6,
+      },
+      downloadUnit: 'ohm',
+      defaultUnit: 'Ω',
+    },
+    6: {
+      name: 'Impedance',
+      physicalQuantity: 'R',
+      unit: {
+        mohm: 1e-3,
+        mΩ: 1e-3,
+        ohm: 1,
+        Ω: 1,
+        kohm: 1e3,
+        kΩ: 1e3,
+        Mohm: 1e6,
+        MΩ: 1e6,
+      },
+      downloadUnit: 'ohm',
+      defaultUnit: 'Ω',
+    },
+    7: {
+      name: 'Phase',
+      physicalQuantity: 'Degree',
+      unit: {
+        millidegree: 1,
+        '°': 1e3,
+      },
+      downloadUnit: 'millidegree',
+      defaultUnit: '°',
+    },
+    8: {
+      name: 'Current',
+      physicalQuantity: 'A',
+      unit: {
+        nA: 1,
+        uA: 1e3,
+        mA: 1e6,
+      },
+      downloadUnit: 'nA',
+      defaultUnit: 'nA',
+    },
+    9: {
+      name: 'Level gain',
+      physicalQuantity: '',
+      unit: {
+        default: 1,
+      },
+      downloadUnit: null,
+      defaultUnit: 'default',
+    },
+    10: {
+      name: 'notify_one',
+      physicalQuantity: '',
+      unit: {
+        default: 1,
+      },
+      downloadUnit: null,
+      defaultUnit: 'default',
+    },
+    11: {
+      name: 'notify_two',
+      physicalQuantity: '',
+      unit: {
+        default: 1,
+      },
+      downloadUnit: null,
+      defaultUnit: 'default',
+    },
+    12: {
+      name: 'notify_three',
+      physicalQuantity: '',
+      unit: {
+        default: 1,
+      },
+      downloadUnit: null,
+      defaultUnit: 'default',
+    },
+    13: {
+      name: 'debug_amp[mV]',
+      physicalQuantity: 'V',
+      unit: {
+        uV: 1,
+        mV: 1e3,
+        V: 1e6,
+      },
+      defaultUnit: 'mV',
+      downloadUnit: 'mV',
+    },
+  },
+  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) => {
@@ -18,6 +18,7 @@ export default {
  channels: {
    time: {
      name: 'Time',
+      physicalQuantity: 's',
      unit: {
        us: 1,
        ms: 1e3,
@@ -31,6 +32,7 @@ export default {
    },
    0: {
      name: 'I_in',
+      physicalQuantity: 'A',
      unit: {
        nA: 1,
        uA: 1e3,
@@ -41,6 +43,7 @@ export default {
    },
    1: {
      name: 'V_out-V_in',
+      physicalQuantity: 'V',
      unit: {
        uV: 1,
        mV: 1e3,
@@ -51,6 +54,7 @@ export default {
    },
    2: {
      name: 'V_out',
+      physicalQuantity: 'V',
      unit: {
        uV: 1,
        mV: 1e3,
@@ -61,6 +65,7 @@ export default {
    },
    3: {
      name: 'Cycle',
+      physicalQuantity: '',
      unit: {
        cycle: 1,
      },
@@ -16,6 +16,7 @@ export default {
  channels: {
    time: {
      name: 'Time',
+      physicalQuantity: 's',
      unit: {
        us: 1,
        ms: 1e3,
@@ -28,6 +29,7 @@ export default {
    },
    0: {
      name: '0',
+      physicalQuantity: '',
      unit: {
        default: 1,
      },
@@ -35,6 +37,7 @@ export default {
    },
    1: {
      name: '1',
+      physicalQuantity: '',
      unit: {
        default: 1,
      },
@@ -42,6 +45,7 @@ export default {
    },
    2: {
      name: '2',
+      physicalQuantity: '',
      unit: {
        default: 1,
      },
@@ -49,6 +53,7 @@ export default {
    },
    3: {
      name: '3',
+      physicalQuantity: '',
      unit: {
        default: 1,
      },
@@ -1,5 +1,5 @@
 export default {
-  name: 'Potentiostatic Electrochemical Impedance Spectroscopy',
+  name: 'EIS',
  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看的參數
@@ -18,6 +18,7 @@ export default {
  channels: {
    time: {
      name: 'Time',
+      physicalQuantity: 's',
      unit: {
        us: 1,
        ms: 1e3,
@@ -31,6 +32,7 @@ export default {
    },
    0: {
      name: 'Z_Imag_Raw',
+      physicalQuantity: 'R',
      unit: {
        ohm: 1,
      },
@@ -39,14 +41,16 @@ export default {
    },
    1: {
      name: 'Z_Real_Raw',
+      physicalQuantity: 'R',
      unit: {
-        default: 1,
+        ohm: 1,
      },
      downloadUnit: 'ohm',
      defaultUnit: 'ohm',
    },
    2: {
      name: 'Frequency',
+      physicalQuantity: 'Hz',
      unit: {
        mHz: 1,
        Hz: 1e3,
@@ -65,6 +69,7 @@ export default {
    // },
    4: {
      name: 'Z_Imag',
+      physicalQuantity: 'R',
      unit: {
        mohm: 1e-3,
        mΩ: 1e-3,
@@ -80,6 +85,7 @@ export default {
    },
    5: {
      name: 'Z_Real',
+      physicalQuantity: 'R',
      unit: {
        mohm: 1e-3,
        mΩ: 1e-3,
@@ -95,6 +101,7 @@ export default {
    },
    6: {
      name: 'Impedance',
+      physicalQuantity: 'R',
      unit: {
        mohm: 1e-3,
        mΩ: 1e-3,
@@ -110,14 +117,17 @@ export default {
    },
    7: {
      name: 'Phase',
+      physicalQuantity: 'Degree',
      unit: {
-        '°': 1,
+        millidegree: 1,
+        '°': 1e3,
      },
-      downloadUnit: null,
+      downloadUnit: 'millidegree',
      defaultUnit: '°',
    },
    8: {
      name: 'Current',
+      physicalQuantity: 'A',
      unit: {
        nA: 1,
        uA: 1e3,
@@ -128,12 +138,51 @@ export default {
    },
    9: {
      name: 'Level gain',
+      physicalQuantity: '',
      unit: {
        default: 1,
      },
      downloadUnit: null,
      defaultUnit: 'default',
    },
+    10: {
+      name: 'notify_one',
+      physicalQuantity: '',
+      unit: {
+        default: 1,
+      },
+      downloadUnit: null,
+      defaultUnit: 'default',
+    },
+    11: {
+      name: 'notify_two',
+      physicalQuantity: '',
+      unit: {
+        default: 1,
+      },
+      downloadUnit: null,
+      defaultUnit: 'default',
+    },
+    12: {
+      name: 'notify_three',
+      physicalQuantity: '',
+      unit: {
+        default: 1,
+      },
+      downloadUnit: null,
+      defaultUnit: 'default',
+    },
+    13: {
+      name: 'debug_amp[mV]',
+      physicalQuantity: 'V',
+      unit: {
+        uV: 1,
+        mV: 1e3,
+        V: 1e6,
+      },
+      defaultUnit: 'mV',
+      downloadUnit: 'mV',
+    },
  },
  charts: {
    default: [
@@ -2,7 +2,7 @@ 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', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'TIME_DURATION'], // export header的參數
+  headerParameter: () => ['RT_VOLT_SET', 'SAMPLE_RATE', 'GENERAL_LP_RTIA', 'TIME_DURATION'], // export header的參數
  valScales: {
    linear: {
      func: (val) => {
@@ -18,6 +18,7 @@ export default {
  channels: {
    time: {
      name: 'Time',
+      physicalQuantity: 's',
      unit: {
        us: 1,
        ms: 1e3,
@@ -30,6 +31,7 @@ export default {
    },
    0: {
      name: 'I_in',
+      physicalQuantity: 'A',
      unit: {
        nA: 1,
        uA: 1e3,
@@ -40,6 +42,7 @@ export default {
    },
    1: {
      name: 'V_out',
+      physicalQuantity: 'V',
      unit: {
        uV: 1,
        mV: 1e3,
@@ -50,6 +53,7 @@ export default {
    },
    2: {
      name: 'Resistor',
+      physicalQuantity: 'R',
      unit: {
        mΩ: 1,
        mohm: 1,
@@ -1,8 +1,8 @@
 export default {
  name: 'V-T Graph',
-  parameter: ['SAMPLE_RATE', 'MEASURE_VIN_RANGE', 'ADC_LEVEL_I_15', 'CTRL_HIGH_Z_15', 'TIME_DURATION'], // 這個mode用到的參數
-  showParameter: ['SAMPLE_RATE', 'MEASURE_VIN_RANGE', 'ADC_LEVEL_I_15', 'CTRL_HIGH_Z_15', 'TIME_DURATION'], // 有要秀給user看的參數
-  headerParameter: () => ['SAMPLE_RATE', 'MEASURE_VIN_RANGE', 'ADC_LEVEL_I_15', 'TIME_DURATION'], // export header的參數
+  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) => {
@@ -18,6 +18,7 @@ export default {
  channels: {
    time: {
      name: 'Time',
+      physicalQuantity: 's',
      unit: {
        us: 1,
        ms: 1e3,
@@ -30,6 +31,7 @@ export default {
    },
    0: {
      name: 'I_in',
+      physicalQuantity: 'A',
      unit: {
        nA: 1,
        uA: 1e3,
@@ -40,6 +42,7 @@ export default {
    },
    1: {
      name: 'V_in',
+      physicalQuantity: 'V',
      unit: {
        uV: 1,
        mV: 1e3,
@@ -4,31 +4,133 @@ 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 = {
-  VOLT_VSCAN: {
+  TIME_DURATION: {
    type: 'number',
-    showName: 'Volt (v.s. ref)',
+    showName: 'Time duration',
    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',
+    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,
+    },
+    outputRawData: (val) => {
+      return parseInt(parseFloat(val))
+    },
+    outputReadabilityData: (val) => {
+      return parseInt(parseFloat(val))
    },
  },
-  ADC_VALUE_I: {
-    type: 'none',
-    showName: 'Instruction',
-    componentType: 'dev-mode',
+  CTRL_HIGH_Z_15: {
+    type: 'array',
+    showName: 'HighZ',
+    componentType: 'input-button-toggle',
+    options: [
+      { value: 0, label: 'On' },
+      { value: 1, label: 'Off' },
+    ],
+    range: ['On', 'Off'],
+    defaultValue: 1,
+    outputRawData: (val) => {
+      const highzArr = ['On', 'Off']
+      return highzArr.indexOf(val.toString())
+    },
+    outputReadabilityData: (idx) => {
+      const highzArr = ['On', 'Off']
+      return highzArr[parseInt(idx)]
+    },
+  },
+  CYCLE_NUMBER: {
+    type: 'number',
+    showName: 'Cycle',
+    componentType: 'input-range',
+    range: Object.freeze({ min: 1, max: 50000 }),
+    outputRawData: (val) => {
+      return parseInt(val)
+    },
+    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: '5' },
+      { value: 5, label: '6' },
+      { value: 6, label: '7' },
+      { value: 7, label: '8' },
+      { value: 8, label: 'Auto' },
+    ],
+    range: ['1', '2', '3', '4', '5', '6', '7', '8', 'Auto'],
+    defaultValue: 8,
+    outputRawData: (val) => {
+      const numArr = ['1', '2', '3', '4', '5', '6', '7', '8', 'Auto']
+      return numArr.indexOf(val.toString())
+    },
+    outputReadabilityData: (idx) => {
+      const numArr = ['1', '2', '3', '4', '5', '6', '7', '8', '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',
@@ -60,7 +162,7 @@ const EliteEIS = {
    outputReadabilityData: (val, scale = 1) => {
      return Math.round(parseInt(val) / 2047 * 800) / scale
    },
-    defaultValue: 25,
+    defaultValue: 26,
    defaultUnit: 'mV',
    downloadUnit: 'mV',
    unit: {
@@ -151,143 +253,148 @@ const EliteEIS = {
      { 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)]
-    },
-  },
-  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)]
-    },
-  },
-  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'],
-    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)]
-    },
-  },
-  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'],
-    defaultValue: 3,
-    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)]
-    },
-  },
-  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())
+      const numArr = ['2', '4', '6', '8']
+      return numArr.indexOf(val.toString())
    },
    outputReadabilityData: (idx) => {
-      const voltageInRangeArr = ['1', '2', '3', 'Auto']
-      return voltageInRangeArr[parseInt(idx)]
+      const numArr = ['2', '4', '6', '8']
+      return numArr[parseInt(idx)]
    },
  },
-  TIME_DURATION: {
+  CF_DC_BIAS: {
    type: 'number',
-    showName: 'Time duration',
-    componentType: 'input-range',
-    range: Object.freeze({ min: 0, max: 86400 }), // UI上能輸入的最大最小值
-    defaultValue: 0,
-    defaultUnit: 's',
-    downloadUnit: 's',
-    unit: {
-      ms: 1e-3,
-      s: 1,
-      m: 60,
-      h: 3600,
+    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: 26,
+    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 parseInt(parseFloat(val))
+      return parseFloat(val) < 0.1 ? Math.round(0.1 / 0.015) : Math.round(parseFloat(val) / 0.015)
    },
    outputReadabilityData: (val) => {
-      return parseInt(parseFloat(val))
+      return (parseFloat(val) * 0.015).toFixed(1)
+    },
+    defaultValue: 13333333,
+    defaultUnit: 'Hz',
+    downloadUnit: 'Hz',
+    unit: {
+      Hz: 1,
    },
  },
-  CTRL_HIGH_Z_15: {
+  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: 'HighZ',
+    showName: 'Point spacing',
    componentType: 'input-button-toggle',
    options: [
-      { value: 0, label: 'On' },
-      { value: 1, label: 'Off' },
+      { value: 0, label: 'Logarithm' },
+      { value: 1, label: 'Linear' },
    ],
-    range: ['On', 'Off'],
-    defaultValue: 1,
+    range: ['Logarithm', 'Linear'],
+    defaultValue: 0,
    outputRawData: (val) => {
-      const highzArr = ['On', 'Off']
-      return highzArr.indexOf(val.toString())
+      const scaleArr = ['Logarithm', 'Linear']
+      return scaleArr.indexOf(val.toString())
    },
    outputReadabilityData: (idx) => {
-      const highzArr = ['On', 'Off']
-      return highzArr[parseInt(idx)]
+      const scaleArr = ['Logarithm', 'Linear']
+      return scaleArr[parseInt(idx)]
    },
  },
-  VOLT_INITIAL: {
+  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',
@@ -306,7 +413,7 @@ const EliteEIS = {
      V: 1e3,
    },
  },
-  VOLT_MAX: {
+  CV_E1: {
    type: 'number',
    showName: 'E1',
    componentType: 'input-range',
@@ -325,7 +432,7 @@ const EliteEIS = {
      V: 1e3,
    },
  },
-  VOLT_MIN: {
+  CV_E2: {
    type: 'number',
    showName: 'E2',
    componentType: 'input-range',
@@ -344,7 +451,7 @@ const EliteEIS = {
      V: 1e3,
    },
  },
-  Scan_Rate: {
+  CV_SCAN_RATE: {
    type: 'number',
    showName: 'ScanRate',
    componentType: 'input-range',
@@ -362,40 +469,44 @@ const EliteEIS = {
      'mV/s': 1,
    },
  },
-  SAMPLE_RATE: {
+  CA_VOLT: {
    type: 'number',
-    showName: 'Sample rate',
+    showName: 'Volt (v.s. ref)',
    componentType: 'input-range',
-    range: Object.freeze({ min: 1, max: 1000 }),
+    range: Object.freeze({ min: 2500, max: 50000 }),
    outputRawData: (val, scale = 1) => {
-      return parseInt(parseFloat(val) * 10)
+      return parseInt(parseFloat(val) * scale * 12.5 + 25000)
    },
    outputReadabilityData: (val, scale = 1) => {
-      return parseFloat(val) / 10
+      return parseInt((parseFloat(val) - 25000) / 12.5) / scale
    },
-    defaultValue: 1000,
-    defaultUnit: 'sps',
-    downloadUnit: 'sps',
+    defaultValue: 25000,
+    defaultUnit: 'V',
+    downloadUnit: 'mV',
    unit: {
-      sps: 1,
+      mV: 1,
+      V: 1e3,
    },
  },
-  CYCLE_NUMBER: {
-    type: 'number',
-    showName: 'Cycle',
-    componentType: 'input-range',
-    range: Object.freeze({ min: 1, max: 50000 }),
+  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) => {
-      return parseInt(val)
+      const voltageInRangeArr = ['1', '2', '3', 'Auto']
+      return voltageInRangeArr.indexOf(val.toString())
    },
-    outputReadabilityData: (val) => {
-      return parseInt(val)
-    },
-    defaultValue: 1,
-    defaultUnit: 'cycle',
-    downloadUnit: null,
-    unit: {
-      cycle: 1,
+    outputReadabilityData: (idx) => {
+      const voltageInRangeArr = ['1', '2', '3', 'Auto']
+      return voltageInRangeArr[parseInt(idx)]
    },
  },
  RT_VOLT_SET: {
@@ -417,8 +528,17 @@ const EliteEIS = {
      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',
@@ -441,6 +561,10 @@ const EliteEIS = {
    },
    {
      id: 5,
+      description: 'Constant Frequency',
+    },
+    {
+      id: 6,
      description: 'Dev Tools',
    },
  ],
@@ -450,7 +574,9 @@ const EliteEIS = {
    2: Chronoamperometry,
    3: VT,
    4: RT,
-    5: DevMode,
+    5: ConstantFrequency,
+    6: DevMode,
+    7: Idle,
  },
 }

@@ -0,0 +1,24 @@
+export default {
+  name: 'ACC',
+  parameter: ['TIME_DURATION', 'ACC_a_out0', 'ACC_a_out1', 'ACC_a_out2', 'ACC_a_out3', 'ACC_a_out0_current', 'ACC_a_out1_current', 'ACC_a_out2_current', 'ACC_a_out3_current', 'TRIG0_en', 'TRIG1_en', 'TRIG0_edge_type', 'TRIG1_edge_type'], // 這個mode用到的參數
+  showParameter: ['ACC_a_out0', 'ACC_a_out1', 'ACC_a_out2', 'ACC_a_out3', 'TRIG0_en', 'TRIG1_en', 'TIME_DURATION'], // 有要秀給user看的參數
+  headerParameter: () => [], // export header的參數
+  valScales: {
+    linear: {
+      func: (val) => {
+        return val
+      },
+    },
+    log: {
+      func: (val) => {
+        return Math.log10(Math.abs(val))
+      },
+    },
+  },
+  channels: {
+  },
+  charts: {
+    default: [
+    ],
+  },
+}
@@ -0,0 +1,98 @@
+export default {
+  name: 'Dev Mode',
+  parameter: ['ADC_VALUE_I'],
+  valScales: {
+    linear: {
+      func: (val) => {
+        return val
+      },
+    },
+    log: {
+      func: (val) => {
+        return Math.log10(Math.abs(val))
+      },
+    },
+  },
+  channels: {
+    time: {
+      name: 'Time',
+      physicalQuantity: 's',
+      unit: {
+        us: 1,
+        ms: 1e3,
+        s: 1e6,
+        m: 60 * 1e6,
+        h: 60 * 60 * 1e6,
+        auto: 1,
+      },
+      defaultUnit: 'us',
+    },
+    0: {
+      name: '0',
+      physicalQuantity: '',
+      unit: {
+        default: 1,
+      },
+      defaultUnit: 'default',
+    },
+    1: {
+      name: '1',
+      physicalQuantity: '',
+      unit: {
+        default: 1,
+      },
+      defaultUnit: 'default',
+    },
+    2: {
+      name: '2',
+      physicalQuantity: '',
+      unit: {
+        default: 1,
+      },
+      defaultUnit: 'default',
+    },
+    3: {
+      name: '3',
+      physicalQuantity: '',
+      unit: {
+        default: 1,
+      },
+      defaultUnit: 'default',
+    },
+  },
+  charts: {
+    default: [
+      {
+        name: 'Dev Mode',
+        description: '',
+        subplot: [
+          {
+            x1: {
+              type: 'time',
+              valScale: 'linear',
+              min: 'dataMin',
+              max: 'dataMax',
+            },
+            y1: {
+              type: 'value',
+              valScale: 'linear',
+              min: 'dataMin',
+              max: 'dataMax',
+            },
+            data: [
+              {
+                legend: 'dev',
+                x1: {
+                  channel: 'time',
+                },
+                y1: {
+                  channel: 1,
+                },
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
peterlu14	08c2e52903	- Device list order by mem	2024-08-14 13:29:22 +08:00
peterlu14	f9e2f6efe1	-Change device button position	2024-08-12 09:51:15 +08:00
peterlu14	3c87552ffb	- Fix date block style	2024-04-17 18:15:10 +08:00
peterlu14	794e91438c	- Fix page change topic unsubscribe - Fix device status change and dot color change - Fix styles	2024-04-17 18:13:59 +08:00
peterlu14	c55441641c	- Update new icon - Change sidebar icon - Add new router-link	2024-04-16 15:49:15 +08:00
peterlu14	006ccc6637	-Create new page to manager device alert	2024-04-12 17:33:47 +08:00
peterlu14	511d69011c	-update style	2023-11-17 10:35:53 +08:00
peterlu14	01efd8af07	- deal with multiple devices	2023-11-15 13:19:57 +08:00
peterlu14	f2fd675a0d	-fix modal fullscreen problem	2023-07-19 17:08:25 +08:00
peterlu14	05a191dedb	-change sound	2023-07-18 18:37:20 +08:00
peterlu14	94f3b2c6ad	-change parameter threshold % and time s -add reset trigger time	2023-07-18 11:09:21 +08:00
peterlu14	6069457204	-update add threshold & times	2023-07-14 09:52:41 +08:00
peterlu14	57c9972855	- change download default to excel	2023-07-11 15:30:43 +08:00
peterlu14	ba7145be76	- cycle cannot 0	2023-07-05 17:42:04 +08:00
peterlu14	f0fe12bc84	- 需要下拉選單的指示 - enable/disanable 綠色調整 - 開關往下移讓他跟 s 置中對齊 - 5V output 的 on - 前端/ UI 輸入要做限制，s 輸入最小精度 0.1 s，current 電流輸入最小精度 0.1 mA - 名稱文字調整 - Fix current range	2023-06-21 16:58:56 +08:00
peterlu14	096ecb4a7e	-update folder click	2023-06-14 16:10:40 +08:00
peterlu14	5614bf69ed	-fix backend data type error	2023-06-13 13:42:49 +08:00
peterlu14	d60438e952	- update trigger	2023-06-13 09:49:16 +08:00
peterlu14	55dde2a4e4	-remake trigger	2023-06-13 09:31:07 +08:00
peterlu14	0b1afd6f29	-add trigger dev mode	2023-05-15 11:37:40 +08:00
Roy	74f755a966	[update] fix channel unit	2023-04-14 09:03:49 +08:00
peterlu14	1072b37139	- fix folder bug	2023-04-13 16:34:08 +08:00
peterlu14	030e63b8c6	- fix real time channel info	2023-04-13 16:26:48 +08:00
peterlu14	1aa6cc6d31	- config table add physicalQuantity	2023-04-13 16:24:34 +08:00
peterlu14	30db3a9232	- fix folder conflict problem	2023-04-13 11:47:38 +08:00
peterlu14	0d2b97b87e	- remove duplicate messages - prevent multi-user refresh cause chart clear problem - chart series add lttb	2023-04-13 10:56:24 +08:00
peterlu14	b4169367aa	- download display rebuild - support download - support offline-download	2023-04-12 18:44:32 +08:00
peterlu14	820d59cb2f	Merge remote-tracking branch 'origin/dev/8hstia' into dev/scheduler-datatable-8hstia	2023-04-12 14:57:15 +08:00
peterlu14	c58ec8c907	- fixed download	2023-04-12 14:55:39 +08:00
peterlu14	dcf9d1b98c	- fix edit file way - remove popover message - remove sd card button	2023-04-11 18:07:00 +08:00
peterlu14	fd4ff2d99d	- click outside table unselect all - fix the select word conflict with shift - fix delect files page wrong	2023-04-11 17:47:15 +08:00
peterlu14	8bf7a893ae	-real time chart unit more flexible -add source into gridsource	2023-04-11 17:45:35 +08:00
Roy	ce4cf4078b	[update] up to 8 hstia	2023-04-11 13:12:32 +08:00
peterlu14	cbd45415bd	- download selected files	2023-04-10 14:28:26 +08:00
peterlu14	140a564ee7	- create modal for moving folder - remove check illegal char - change UI layout - add hot key to select file ctrl & shift - fix edit folder name - fix delete folder inner all files - fix refs datatable_ref undefined problem - when selected file the text in table cannot be select	2023-04-07 16:51:46 +08:00
peterlu14	8d24a93f6d	-fix checkbox	2023-03-31 11:18:23 +08:00
peterlu14	98135d6ce2	- update file with sorted - change single click & double click - fix delete folder	2023-03-31 11:07:22 +08:00
peterlu14	a3ccb942e5	- fix create task	2023-03-25 13:18:41 +08:00
peterlu14	eacc0d9547	- project sort with created time - new project created time reassign - copy project created time reassign - save project (create task, copy task, delete task)	2023-03-25 13:07:46 +08:00
peterlu14	9cc653b761	-auto save ( cycle, device)	2023-03-24 19:22:38 +08:00
peterlu14	0cfc02c939	- reset projecttableselectIndex - prevent select task null - fixed parameter is undefined - fix scheduler change mode reset problem - auto save	2023-03-24 19:07:42 +08:00
ROY	60252b5cfe	[update] update AC_AMP defaultValue of schedule	2023-03-21 16:21:51 +08:00
peterlu14	cc5207ae07	- fix legend name duplicate problem	2023-03-16 17:56:32 +08:00
peterlu14	4ad2b51161	- Elite EDC VOLT_VSCAN to CA_VOLT	2023-03-08 09:37:12 +08:00
ROY	0f32263d12	[update] update bat0.1 and new bat1.0	2023-03-07 18:03:59 +08:00
peterlu14	52db5b818c	[update] remove navbar info	2023-02-04 10:56:28 +08:00
peterlu14	507718e3a3	[update] remove trigger battery	2023-01-12 10:04:15 +08:00
peterlu14	1c02ffb934	[update] fix scheduler trigger parameter show & layout	2023-01-10 11:30:00 +08:00
peterlu14	5d594eff06	[update] fix trigger scheduler & todo fix mode select and parameter info	2023-01-09 18:21:50 +08:00
peterlu14	29f7d23d38	[debug] fix delete file working mode error	2023-01-04 15:21:40 +08:00
peterlu14	4d032858a3	[update] trigger add timer	2023-01-03 15:30:03 +08:00
peterlu14	417c4010a9	[update] fix advanced setting	2023-01-03 14:58:48 +08:00
peterlu14	6bf7edad0b	[update] recover trigger ui	2023-01-03 14:42:54 +08:00
peterlu14	fafc6620d2	[debug] fix CC Mode csv header wrong information	2022-12-27 11:04:40 +08:00
peterlu14	78d236d9c0	[update] fix scheduler parameter default problem	2022-12-27 11:03:52 +08:00
ROY	6e42dc9333	[update] add debug channel in file	2022-12-07 14:23:19 +08:00
peterlu14	d4d6172645	Merge branch 'dev/scheduler_UI' into dev/test_ac_amp	2022-12-06 16:07:17 +08:00
peterlu14	8685768f42	[update] fix impendance scale & millidegree	2022-12-06 15:58:06 +08:00
peterlu14	8ca0e3fa28	Merge branch 'dev/scheduler_UI' into dev/test_ac_amp	2022-12-06 14:22:32 +08:00
peterlu14	7e61eb6e52	[update] fix phase degree scale error	2022-12-06 14:22:12 +08:00
peterlu14	d16d7b0cb5	Merge branch 'dev/scheduler_UI' into dev/test_ac_amp	2022-12-05 11:57:19 +08:00
peterlu14	c960a8228c	[update] fix phase degree scale error	2022-12-05 11:56:39 +08:00
ROY	d4423503d6	Merge remote-tracking branch 'origin/dev/scheduler_UI' into dev/test_ac_amp	2022-12-02 17:45:35 +08:00
peterlu14	6c8583e139	[update] fix CF mode name & name PEIS into EIS	2022-12-02 17:40:54 +08:00
peterlu14	f3817694cf	[update] scheduler count start from 0	2022-12-02 17:30:13 +08:00
peterlu14	73eced5f52	[update] EIS_AVERAGE_NUM default 3 -> 0	2022-12-02 17:29:54 +08:00
peterlu14	5453928bc1	[update] remove project table cell for cycle	2022-12-02 17:29:29 +08:00
peterlu14	814cfa8b86	[update] fix delete project step	2022-12-02 17:28:56 +08:00
ROY	c3f6349c6e	[test] print notify_one & notify_two & notify_three	2022-12-01 14:15:12 +08:00
peterlu14	0dc8cc4344	[update] support cancel delete project click anywhere	2022-11-28 10:09:41 +08:00
peterlu14	9358ad7ffa	[update] input auto focus & double check delete	2022-11-25 13:27:58 +08:00
peterlu14	95203486e2	[update] add showProjectManagerPanel button	2022-11-25 13:26:07 +08:00
peterlu14	164a658870	[update] fix project copy parameter show error	2022-11-24 18:01:01 +08:00
peterlu14	d4c71fd4f9	[update] update package v-tooltips	2022-11-24 11:21:42 +08:00
peterlu14	4b60975782	[update] show available parameters	2022-11-24 11:19:55 +08:00
peterlu14	d1b8683387	[update] add v-popover to parameter	2022-11-24 11:18:56 +08:00
peterlu14	fd4a677173	[update] fix draggable problem by combine device table row together	2022-11-24 10:13:09 +08:00
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
				`@@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path fill="#FFFFFF" d="M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2V448c0 17.7 14.3 32 32 32s32-14.3 32-32V141.2L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z"/></svg>`