-update folder click

- prevent multi-user refresh cause chart clear problem
- chart series add lttb

package-lock.json

@@ -1217,6 +1217,11 @@
         "@hapi/hoek": "^8.3.0"
       }
     },
+    "@hyjiacan/vue-slideout": {
+      "version": "2.5.9",
+      "resolved": "https://registry.npmjs.org/@hyjiacan/vue-slideout/-/vue-slideout-2.5.9.tgz",
+      "integrity": "sha512-SSf0QaENGt9B2We8lL5QF+gNK7/pHqUEA8SiwUKtMTDj2rbjhGYFpCD+grV7oAAynGdiEIhQ3b3Mphh9/+keBg=="
+    },
     "@intervolga/optimize-cssnano-plugin": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/@intervolga/optimize-cssnano-plugin/-/optimize-cssnano-plugin-1.0.6.tgz",
@@ -17016,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": {
@@ -17322,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",

package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "@fontsource/source-code-pro": "^4.5.0",
     "@fontsource/source-sans-pro": "^4.5.1",
+    "@hyjiacan/vue-slideout": "^2.5.9",
     "@types/jest": "^24.0.11",
     "amcharts3": "^3.21.14",
     "ammap3": "^3.21.14",
@@ -45,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",

public/index.html

@@ -2,6 +2,9 @@
 <html>
   <head>
     <meta charset="utf-8">
+    <!-- <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+    <meta http-equiv="Pragma" content="no-cache" />
+    <meta http-equiv="Expires" content="0" /> -->
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 

src/app/App.vue

@@ -15,7 +15,7 @@ export default {
       // Temporary config for 2.1.
       contextConfig: {
         gradient: true,
-        shadow: 'lg', // 3 states: 'sm', 'lg', undefined (no shadow).
+        shadow: 'lg', // 3 states: 'sm', 'sddssslg', undefined (no shadow).
         invertedColor: false,
       },
     }

src/app/main.js

@@ -30,6 +30,11 @@ import 'vue-toastification/dist/index.css'
 import api from '@/data/api/index'
 import localforage from 'localforage'
 
+import SlideOut from '@hyjiacan/vue-slideout'
+import '@hyjiacan/vue-slideout/lib/slideout.css'
+
+import VTooltip from 'v-tooltip'
+
 import '../metrics'
 import '../registerServiceWorker'
 
@@ -71,9 +76,7 @@ localforage.config({ name: 'bioprovue' })
 let MqttUrl
 // for developer
 if (process.env.NODE_ENV === 'development') {
-  MqttUrl = 'ws://192.168.5.37:8083'
-  // MqttUrl = 'ws://192.168.5.42:8083'
-  // MqttUrl = 'ws://192.168.5.240:8080'
+  MqttUrl = 'ws://192.168.5.66:8083'
   // MqttUrl = 'ws://192.168.5.57:8083'
   // MqttUrl = 'ws://192.168.5.57:8080'
 } else {
@@ -103,6 +106,12 @@ Vue.use(Toast)
 // Vue.use(VueMqtt, 'ws://' + '192.168.151.125' + ':8083')
 Vue.use(VueMqtt, MqttUrl)
 
+Vue.use(SlideOut, {
+  // set default props here
+})
+
+Vue.use(VTooltip)
+
 Vue.prototype.API = api
 Vue.prototype.GLOBAL = global_
 

src/assets/img/project/arrow-right.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>

src/assets/img/project/copy-alt-grey.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>

src/assets/img/project/copy-alt.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>

src/assets/img/project/copy.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>

src/assets/img/project/cross.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>

src/assets/img/project/delete.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>

src/assets/img/project/delete14_14.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>

src/assets/img/project/menu_close.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>

src/assets/img/project/play.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>

src/assets/img/project/plus.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>

src/assets/img/project/save.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>

src/assets/img/project/search.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>

src/assets/img/project/stop.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>

src/assets/img/toolbox/LogX.svg

@@ -0,0 +1,4 @@
+<svg width="55" height="30" viewBox="0 0 55 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="55" height="30" rx="15" fill="#45589E"/>
+<path d="M10.8849 20V9.81818H13.0376V18.2251H17.4027V20H10.8849ZM22.2388 20.1491C21.4666 20.1491 20.7987 19.9851 20.2353 19.657C19.6751 19.3255 19.2426 18.8648 18.9377 18.2749C18.6328 17.6816 18.4803 16.9938 18.4803 16.2116C18.4803 15.4228 18.6328 14.7334 18.9377 14.1435C19.2426 13.5502 19.6751 13.0895 20.2353 12.7614C20.7987 12.4299 21.4666 12.2642 22.2388 12.2642C23.0111 12.2642 23.6773 12.4299 24.2374 12.7614C24.8008 13.0895 25.235 13.5502 25.54 14.1435C25.8449 14.7334 25.9973 15.4228 25.9973 16.2116C25.9973 16.9938 25.8449 17.6816 25.54 18.2749C25.235 18.8648 24.8008 19.3255 24.2374 19.657C23.6773 19.9851 23.0111 20.1491 22.2388 20.1491ZM22.2488 18.5085C22.6001 18.5085 22.8934 18.4091 23.1287 18.2102C23.3641 18.008 23.5414 17.733 23.6607 17.3849C23.7833 17.0369 23.8446 16.6409 23.8446 16.1967C23.8446 15.7526 23.7833 15.3565 23.6607 15.0085C23.5414 14.6605 23.3641 14.3854 23.1287 14.1832C22.8934 13.9811 22.6001 13.88 22.2488 13.88C21.8941 13.88 21.5958 13.9811 21.3539 14.1832C21.1152 14.3854 20.9346 14.6605 20.812 15.0085C20.6926 15.3565 20.633 15.7526 20.633 16.1967C20.633 16.6409 20.6926 17.0369 20.812 17.3849C20.9346 17.733 21.1152 18.008 21.3539 18.2102C21.5958 18.4091 21.8941 18.5085 22.2488 18.5085ZM30.8148 23.0227C30.1287 23.0227 29.5404 22.9283 29.0499 22.7393C28.5627 22.5537 28.1749 22.3002 27.8865 21.9787C27.5982 21.6572 27.4109 21.2959 27.3248 20.8949L29.2836 20.6314C29.3432 20.7839 29.4377 20.9264 29.5669 21.0589C29.6962 21.1915 29.8669 21.2976 30.079 21.3771C30.2944 21.46 30.5563 21.5014 30.8645 21.5014C31.3252 21.5014 31.7047 21.3887 32.003 21.1634C32.3046 20.9413 32.4554 20.5684 32.4554 20.0447V18.6477H32.3659C32.2731 18.8598 32.1339 19.0604 31.9483 19.2493C31.7627 19.4382 31.5241 19.5923 31.2324 19.7116C30.9408 19.831 30.5927 19.8906 30.1884 19.8906C29.615 19.8906 29.093 19.758 28.6223 19.4929C28.155 19.2244 27.7821 18.8151 27.5037 18.2649C27.2286 17.7114 27.0911 17.0121 27.0911 16.1669C27.0911 15.3018 27.2319 14.5793 27.5137 13.9993C27.7954 13.4193 28.1699 12.9851 28.6373 12.6967C29.1079 12.4084 29.6233 12.2642 30.1834 12.2642C30.611 12.2642 30.9689 12.3371 31.2573 12.483C31.5456 12.6255 31.7776 12.8045 31.9533 13.0199C32.1323 13.232 32.2698 13.4408 32.3659 13.6463H32.4455V12.3636H34.5485V20.0746C34.5485 20.7242 34.3894 21.2678 34.0712 21.7053C33.753 22.1428 33.3122 22.4709 32.7488 22.6896C32.1886 22.9117 31.544 23.0227 30.8148 23.0227ZM30.8596 18.2997C31.2009 18.2997 31.4893 18.2152 31.7246 18.0462C31.9632 17.8738 32.1455 17.6286 32.2715 17.3104C32.4007 16.9889 32.4654 16.6044 32.4654 16.157C32.4654 15.7095 32.4024 15.3217 32.2765 14.9936C32.1505 14.6622 31.9682 14.4053 31.7296 14.223C31.4909 14.0407 31.2009 13.9496 30.8596 13.9496C30.5115 13.9496 30.2182 14.044 29.9796 14.233C29.7409 14.4186 29.5603 14.6771 29.4377 15.0085C29.315 15.34 29.2537 15.7228 29.2537 16.157C29.2537 16.5978 29.315 16.9789 29.4377 17.3004C29.5636 17.6186 29.7443 17.8655 29.9796 18.0412C30.2182 18.2135 30.5115 18.2997 30.8596 18.2997ZM38.2921 9.81818L40.3453 13.2884H40.4249L42.4881 9.81818H44.9192L41.812 14.9091L44.9888 20H42.513L40.4249 16.5249H40.3453L38.2573 20H35.7914L38.9782 14.9091L35.851 9.81818H38.2921Z" fill="white"/>
+</svg>

src/assets/img/toolbox/LogX_clicked.svg

@@ -0,0 +1,4 @@
+<svg width="55" height="30" viewBox="0 0 55 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="55" height="30" rx="15" fill="#E34A4A"/>
+<path d="M10.8849 20V9.81818H13.0376V18.2251H17.4027V20H10.8849ZM22.2388 20.1491C21.4666 20.1491 20.7987 19.9851 20.2353 19.657C19.6751 19.3255 19.2426 18.8648 18.9377 18.2749C18.6328 17.6816 18.4803 16.9938 18.4803 16.2116C18.4803 15.4228 18.6328 14.7334 18.9377 14.1435C19.2426 13.5502 19.6751 13.0895 20.2353 12.7614C20.7987 12.4299 21.4666 12.2642 22.2388 12.2642C23.0111 12.2642 23.6773 12.4299 24.2374 12.7614C24.8008 13.0895 25.235 13.5502 25.54 14.1435C25.8449 14.7334 25.9973 15.4228 25.9973 16.2116C25.9973 16.9938 25.8449 17.6816 25.54 18.2749C25.235 18.8648 24.8008 19.3255 24.2374 19.657C23.6773 19.9851 23.0111 20.1491 22.2388 20.1491ZM22.2488 18.5085C22.6001 18.5085 22.8934 18.4091 23.1287 18.2102C23.3641 18.008 23.5414 17.733 23.6607 17.3849C23.7833 17.0369 23.8446 16.6409 23.8446 16.1967C23.8446 15.7526 23.7833 15.3565 23.6607 15.0085C23.5414 14.6605 23.3641 14.3854 23.1287 14.1832C22.8934 13.9811 22.6001 13.88 22.2488 13.88C21.8941 13.88 21.5958 13.9811 21.3539 14.1832C21.1152 14.3854 20.9346 14.6605 20.812 15.0085C20.6926 15.3565 20.633 15.7526 20.633 16.1967C20.633 16.6409 20.6926 17.0369 20.812 17.3849C20.9346 17.733 21.1152 18.008 21.3539 18.2102C21.5958 18.4091 21.8941 18.5085 22.2488 18.5085ZM30.8148 23.0227C30.1287 23.0227 29.5404 22.9283 29.0499 22.7393C28.5627 22.5537 28.1749 22.3002 27.8865 21.9787C27.5982 21.6572 27.4109 21.2959 27.3248 20.8949L29.2836 20.6314C29.3432 20.7839 29.4377 20.9264 29.5669 21.0589C29.6962 21.1915 29.8669 21.2976 30.079 21.3771C30.2944 21.46 30.5563 21.5014 30.8645 21.5014C31.3252 21.5014 31.7047 21.3887 32.003 21.1634C32.3046 20.9413 32.4554 20.5684 32.4554 20.0447V18.6477H32.3659C32.2731 18.8598 32.1339 19.0604 31.9483 19.2493C31.7627 19.4382 31.5241 19.5923 31.2324 19.7116C30.9408 19.831 30.5927 19.8906 30.1884 19.8906C29.615 19.8906 29.093 19.758 28.6223 19.4929C28.155 19.2244 27.7821 18.8151 27.5037 18.2649C27.2286 17.7114 27.0911 17.0121 27.0911 16.1669C27.0911 15.3018 27.2319 14.5793 27.5137 13.9993C27.7954 13.4193 28.1699 12.9851 28.6373 12.6967C29.1079 12.4084 29.6233 12.2642 30.1834 12.2642C30.611 12.2642 30.9689 12.3371 31.2573 12.483C31.5456 12.6255 31.7776 12.8045 31.9533 13.0199C32.1323 13.232 32.2698 13.4408 32.3659 13.6463H32.4455V12.3636H34.5485V20.0746C34.5485 20.7242 34.3894 21.2678 34.0712 21.7053C33.753 22.1428 33.3122 22.4709 32.7488 22.6896C32.1886 22.9117 31.544 23.0227 30.8148 23.0227ZM30.8596 18.2997C31.2009 18.2997 31.4893 18.2152 31.7246 18.0462C31.9632 17.8738 32.1455 17.6286 32.2715 17.3104C32.4007 16.9889 32.4654 16.6044 32.4654 16.157C32.4654 15.7095 32.4024 15.3217 32.2765 14.9936C32.1505 14.6622 31.9682 14.4053 31.7296 14.223C31.4909 14.0407 31.2009 13.9496 30.8596 13.9496C30.5115 13.9496 30.2182 14.044 29.9796 14.233C29.7409 14.4186 29.5603 14.6771 29.4377 15.0085C29.315 15.34 29.2537 15.7228 29.2537 16.157C29.2537 16.5978 29.315 16.9789 29.4377 17.3004C29.5636 17.6186 29.7443 17.8655 29.9796 18.0412C30.2182 18.2135 30.5115 18.2997 30.8596 18.2997ZM38.2921 9.81818L40.3453 13.2884H40.4249L42.4881 9.81818H44.9192L41.812 14.9091L44.9888 20H42.513L40.4249 16.5249H40.3453L38.2573 20H35.7914L38.9782 14.9091L35.851 9.81818H38.2921Z" fill="white"/>
+</svg>

src/assets/img/toolbox/LogY.svg

@@ -0,0 +1,4 @@
+<svg width="55" height="30" viewBox="0 0 55 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="55" height="30" rx="15" fill="#6CB0A4"/>
+<path d="M10.8849 20V9.81818H13.0376V18.2251H17.4027V20H10.8849ZM22.2388 20.1491C21.4666 20.1491 20.7987 19.9851 20.2353 19.657C19.6751 19.3255 19.2426 18.8648 18.9377 18.2749C18.6328 17.6816 18.4803 16.9938 18.4803 16.2116C18.4803 15.4228 18.6328 14.7334 18.9377 14.1435C19.2426 13.5502 19.6751 13.0895 20.2353 12.7614C20.7987 12.4299 21.4666 12.2642 22.2388 12.2642C23.0111 12.2642 23.6773 12.4299 24.2374 12.7614C24.8008 13.0895 25.235 13.5502 25.54 14.1435C25.8449 14.7334 25.9973 15.4228 25.9973 16.2116C25.9973 16.9938 25.8449 17.6816 25.54 18.2749C25.235 18.8648 24.8008 19.3255 24.2374 19.657C23.6773 19.9851 23.0111 20.1491 22.2388 20.1491ZM22.2488 18.5085C22.6001 18.5085 22.8934 18.4091 23.1287 18.2102C23.3641 18.008 23.5414 17.733 23.6607 17.3849C23.7833 17.0369 23.8446 16.6409 23.8446 16.1967C23.8446 15.7526 23.7833 15.3565 23.6607 15.0085C23.5414 14.6605 23.3641 14.3854 23.1287 14.1832C22.8934 13.9811 22.6001 13.88 22.2488 13.88C21.8941 13.88 21.5958 13.9811 21.3539 14.1832C21.1152 14.3854 20.9346 14.6605 20.812 15.0085C20.6926 15.3565 20.633 15.7526 20.633 16.1967C20.633 16.6409 20.6926 17.0369 20.812 17.3849C20.9346 17.733 21.1152 18.008 21.3539 18.2102C21.5958 18.4091 21.8941 18.5085 22.2488 18.5085ZM30.8148 23.0227C30.1287 23.0227 29.5404 22.9283 29.0499 22.7393C28.5627 22.5537 28.1749 22.3002 27.8865 21.9787C27.5982 21.6572 27.4109 21.2959 27.3248 20.8949L29.2836 20.6314C29.3432 20.7839 29.4377 20.9264 29.5669 21.0589C29.6962 21.1915 29.8669 21.2976 30.079 21.3771C30.2944 21.46 30.5563 21.5014 30.8645 21.5014C31.3252 21.5014 31.7047 21.3887 32.003 21.1634C32.3046 20.9413 32.4554 20.5684 32.4554 20.0447V18.6477H32.3659C32.2731 18.8598 32.1339 19.0604 31.9483 19.2493C31.7627 19.4382 31.5241 19.5923 31.2324 19.7116C30.9408 19.831 30.5927 19.8906 30.1884 19.8906C29.615 19.8906 29.093 19.758 28.6223 19.4929C28.155 19.2244 27.7821 18.8151 27.5037 18.2649C27.2286 17.7114 27.0911 17.0121 27.0911 16.1669C27.0911 15.3018 27.2319 14.5793 27.5137 13.9993C27.7954 13.4193 28.1699 12.9851 28.6373 12.6967C29.1079 12.4084 29.6233 12.2642 30.1834 12.2642C30.611 12.2642 30.9689 12.3371 31.2573 12.483C31.5456 12.6255 31.7776 12.8045 31.9533 13.0199C32.1323 13.232 32.2698 13.4408 32.3659 13.6463H32.4455V12.3636H34.5485V20.0746C34.5485 20.7242 34.3894 21.2678 34.0712 21.7053C33.753 22.1428 33.3122 22.4709 32.7488 22.6896C32.1886 22.9117 31.544 23.0227 30.8148 23.0227ZM30.8596 18.2997C31.2009 18.2997 31.4893 18.2152 31.7246 18.0462C31.9632 17.8738 32.1455 17.6286 32.2715 17.3104C32.4007 16.9889 32.4654 16.6044 32.4654 16.157C32.4654 15.7095 32.4024 15.3217 32.2765 14.9936C32.1505 14.6622 31.9682 14.4053 31.7296 14.223C31.4909 14.0407 31.2009 13.9496 30.8596 13.9496C30.5115 13.9496 30.2182 14.044 29.9796 14.233C29.7409 14.4186 29.5603 14.6771 29.4377 15.0085C29.315 15.34 29.2537 15.7228 29.2537 16.157C29.2537 16.5978 29.315 16.9789 29.4377 17.3004C29.5636 17.6186 29.7443 17.8655 29.9796 18.0412C30.2182 18.2135 30.5115 18.2997 30.8596 18.2997ZM35.677 9.81818H38.0882L40.41 14.2031H40.5094L42.8311 9.81818H45.2424L41.5286 16.4006V20H39.3908V16.4006L35.677 9.81818Z" fill="white"/>
+</svg>

src/assets/img/toolbox/LogY_clicked.svg

@@ -0,0 +1,4 @@
+<svg width="55" height="30" viewBox="0 0 55 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="55" height="30" rx="15" fill="#E34A4A"/>
+<path d="M10.8849 20V9.81818H13.0376V18.2251H17.4027V20H10.8849ZM22.2388 20.1491C21.4666 20.1491 20.7987 19.9851 20.2353 19.657C19.6751 19.3255 19.2426 18.8648 18.9377 18.2749C18.6328 17.6816 18.4803 16.9938 18.4803 16.2116C18.4803 15.4228 18.6328 14.7334 18.9377 14.1435C19.2426 13.5502 19.6751 13.0895 20.2353 12.7614C20.7987 12.4299 21.4666 12.2642 22.2388 12.2642C23.0111 12.2642 23.6773 12.4299 24.2374 12.7614C24.8008 13.0895 25.235 13.5502 25.54 14.1435C25.8449 14.7334 25.9973 15.4228 25.9973 16.2116C25.9973 16.9938 25.8449 17.6816 25.54 18.2749C25.235 18.8648 24.8008 19.3255 24.2374 19.657C23.6773 19.9851 23.0111 20.1491 22.2388 20.1491ZM22.2488 18.5085C22.6001 18.5085 22.8934 18.4091 23.1287 18.2102C23.3641 18.008 23.5414 17.733 23.6607 17.3849C23.7833 17.0369 23.8446 16.6409 23.8446 16.1967C23.8446 15.7526 23.7833 15.3565 23.6607 15.0085C23.5414 14.6605 23.3641 14.3854 23.1287 14.1832C22.8934 13.9811 22.6001 13.88 22.2488 13.88C21.8941 13.88 21.5958 13.9811 21.3539 14.1832C21.1152 14.3854 20.9346 14.6605 20.812 15.0085C20.6926 15.3565 20.633 15.7526 20.633 16.1967C20.633 16.6409 20.6926 17.0369 20.812 17.3849C20.9346 17.733 21.1152 18.008 21.3539 18.2102C21.5958 18.4091 21.8941 18.5085 22.2488 18.5085ZM30.8148 23.0227C30.1287 23.0227 29.5404 22.9283 29.0499 22.7393C28.5627 22.5537 28.1749 22.3002 27.8865 21.9787C27.5982 21.6572 27.4109 21.2959 27.3248 20.8949L29.2836 20.6314C29.3432 20.7839 29.4377 20.9264 29.5669 21.0589C29.6962 21.1915 29.8669 21.2976 30.079 21.3771C30.2944 21.46 30.5563 21.5014 30.8645 21.5014C31.3252 21.5014 31.7047 21.3887 32.003 21.1634C32.3046 20.9413 32.4554 20.5684 32.4554 20.0447V18.6477H32.3659C32.2731 18.8598 32.1339 19.0604 31.9483 19.2493C31.7627 19.4382 31.5241 19.5923 31.2324 19.7116C30.9408 19.831 30.5927 19.8906 30.1884 19.8906C29.615 19.8906 29.093 19.758 28.6223 19.4929C28.155 19.2244 27.7821 18.8151 27.5037 18.2649C27.2286 17.7114 27.0911 17.0121 27.0911 16.1669C27.0911 15.3018 27.2319 14.5793 27.5137 13.9993C27.7954 13.4193 28.1699 12.9851 28.6373 12.6967C29.1079 12.4084 29.6233 12.2642 30.1834 12.2642C30.611 12.2642 30.9689 12.3371 31.2573 12.483C31.5456 12.6255 31.7776 12.8045 31.9533 13.0199C32.1323 13.232 32.2698 13.4408 32.3659 13.6463H32.4455V12.3636H34.5485V20.0746C34.5485 20.7242 34.3894 21.2678 34.0712 21.7053C33.753 22.1428 33.3122 22.4709 32.7488 22.6896C32.1886 22.9117 31.544 23.0227 30.8148 23.0227ZM30.8596 18.2997C31.2009 18.2997 31.4893 18.2152 31.7246 18.0462C31.9632 17.8738 32.1455 17.6286 32.2715 17.3104C32.4007 16.9889 32.4654 16.6044 32.4654 16.157C32.4654 15.7095 32.4024 15.3217 32.2765 14.9936C32.1505 14.6622 31.9682 14.4053 31.7296 14.223C31.4909 14.0407 31.2009 13.9496 30.8596 13.9496C30.5115 13.9496 30.2182 14.044 29.9796 14.233C29.7409 14.4186 29.5603 14.6771 29.4377 15.0085C29.315 15.34 29.2537 15.7228 29.2537 16.157C29.2537 16.5978 29.315 16.9789 29.4377 17.3004C29.5636 17.6186 29.7443 17.8655 29.9796 18.0412C30.2182 18.2135 30.5115 18.2997 30.8596 18.2997ZM35.677 9.81818H38.0882L40.41 14.2031H40.5094L42.8311 9.81818H45.2424L41.5286 16.4006V20H39.3908V16.4006L35.677 9.81818Z" fill="white"/>
+</svg>

src/assets/img/toolbox/capture.svg

@@ -0,0 +1,9 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M30 15C30 23.2843 23.2843 30 15 30C6.71573 30 0 23.2843 0 15C0 6.71573 6.71573 0 15 0C23.2843 0 30 6.71573 30 15Z" fill="#D6860F"/>
+<mask id="mask0_4_143" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="5" y="5" width="20" height="19">
+<rect x="5" y="5" width="20" height="19" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_4_143)">
+<path d="M20.8334 11.3333V9.75001H19.1667V8.16668H20.8334V6.58334H22.5V8.16668H24.1667V9.75001H22.5V11.3333H20.8334ZM7.50004 22.4167C7.04171 22.4167 6.64949 22.2618 6.32337 21.952C5.99671 21.6416 5.83337 21.2688 5.83337 20.8333V11.3333C5.83337 10.8979 5.99671 10.5253 6.32337 10.2155C6.64949 9.90518 7.04171 9.75001 7.50004 9.75001H10.125L11.6667 8.16668H16.6667V9.75001H12.3959L10.875 11.3333H7.50004V20.8333H20.8334V13.7083H22.5V20.8333C22.5 21.2688 22.337 21.6416 22.0109 21.952C21.6842 22.2618 21.2917 22.4167 20.8334 22.4167H7.50004ZM14.1667 19.6458C15.2084 19.6458 16.0939 19.2996 16.8234 18.6072C17.5523 17.9142 17.9167 17.0729 17.9167 16.0833C17.9167 15.0938 17.5523 14.2525 16.8234 13.5595C16.0939 12.8671 15.2084 12.5208 14.1667 12.5208C13.125 12.5208 12.2395 12.8671 11.51 13.5595C10.7812 14.2525 10.4167 15.0938 10.4167 16.0833C10.4167 17.0729 10.7812 17.9142 11.51 18.6072C12.2395 19.2996 13.125 19.6458 14.1667 19.6458ZM14.1667 18.0625C13.5834 18.0625 13.0903 17.8712 12.6875 17.4886C12.2848 17.1059 12.0834 16.6375 12.0834 16.0833C12.0834 15.5292 12.2848 15.0608 12.6875 14.6781C13.0903 14.2955 13.5834 14.1042 14.1667 14.1042C14.75 14.1042 15.2431 14.2955 15.6459 14.6781C16.0487 15.0608 16.25 15.5292 16.25 16.0833C16.25 16.6375 16.0487 17.1059 15.6459 17.4886C15.2431 17.8712 14.75 18.0625 14.1667 18.0625Z" fill="white"/>
+</g>
+</svg>

src/assets/img/toolbox/dx.svg

@@ -0,0 +1,6 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="15" cy="15" r="15" fill="#8D8D8D"/>
+<path d="M6.61364 12.0888C6.19934 12.0888 5.8241 11.9822 5.48793 11.7692C5.15412 11.5537 4.88897 11.2377 4.69247 10.821C4.49834 10.402 4.40128 9.88826 4.40128 9.27983C4.40128 8.65483 4.50189 8.13518 4.70312 7.72088C4.90436 7.30421 5.17188 6.9929 5.50568 6.78693C5.84186 6.5786 6.20999 6.47443 6.61009 6.47443C6.91548 6.47443 7.16998 6.52652 7.37358 6.63068C7.57955 6.73248 7.74527 6.86032 7.87074 7.0142C7.99858 7.16572 8.09564 7.31487 8.16193 7.46165H8.2081V4.72727H9.71733V12H8.22585V11.1264H8.16193C8.09091 11.2779 7.99029 11.4283 7.86009 11.5774C7.73224 11.7242 7.56534 11.8461 7.35938 11.9432C7.15578 12.0402 6.9072 12.0888 6.61364 12.0888ZM7.09304 10.8849C7.33688 10.8849 7.54285 10.8187 7.71094 10.6861C7.88139 10.5511 8.0116 10.3629 8.10156 10.1214C8.19389 9.87997 8.24006 9.59706 8.24006 9.27273C8.24006 8.94839 8.19508 8.66667 8.10511 8.42756C8.01515 8.18845 7.88494 8.00379 7.71449 7.87358C7.54403 7.74337 7.33688 7.67827 7.09304 7.67827C6.84446 7.67827 6.63494 7.74574 6.46449 7.88068C6.29403 8.01562 6.16501 8.20265 6.07741 8.44176C5.98982 8.68087 5.94602 8.95786 5.94602 9.27273C5.94602 9.58996 5.98982 9.8705 6.07741 10.1143C6.16738 10.3558 6.2964 10.5452 6.46449 10.6825C6.63494 10.8175 6.84446 10.8849 7.09304 10.8849ZM11.8951 14.0455C11.7033 14.0455 11.5234 14.0301 11.3553 13.9993C11.1896 13.9709 11.0523 13.9342 10.9434 13.8892L11.2843 12.7599C11.4618 12.8144 11.6216 12.844 11.7637 12.8487C11.9081 12.8535 12.0324 12.8203 12.1365 12.7493C12.2431 12.6783 12.3295 12.5575 12.3958 12.3871L12.4846 12.1562L10.5279 6.54545H12.1188L13.248 10.5511H13.3049L14.4448 6.54545H16.0463L13.9263 12.5895C13.8245 12.883 13.686 13.1387 13.5108 13.3565C13.338 13.5767 13.119 13.746 12.8539 13.8643C12.5887 13.9851 12.2691 14.0455 11.8951 14.0455Z" fill="white"/>
+<path d="M15.6136 25.0888C15.1993 25.0888 14.8241 24.9822 14.4879 24.7692C14.1541 24.5537 13.889 24.2377 13.6925 23.821C13.4983 23.402 13.4013 22.8883 13.4013 22.2798C13.4013 21.6548 13.5019 21.1352 13.7031 20.7209C13.9044 20.3042 14.1719 19.9929 14.5057 19.7869C14.8419 19.5786 15.21 19.4744 15.6101 19.4744C15.9155 19.4744 16.17 19.5265 16.3736 19.6307C16.5795 19.7325 16.7453 19.8603 16.8707 20.0142C16.9986 20.1657 17.0956 20.3149 17.1619 20.4616H17.2081V17.7273H18.7173V25H17.2259V24.1264H17.1619C17.0909 24.2779 16.9903 24.4283 16.8601 24.5774C16.7322 24.7242 16.5653 24.8461 16.3594 24.9432C16.1558 25.0402 15.9072 25.0888 15.6136 25.0888ZM16.093 23.8849C16.3369 23.8849 16.5429 23.8187 16.7109 23.6861C16.8814 23.5511 17.0116 23.3629 17.1016 23.1214C17.1939 22.88 17.2401 22.5971 17.2401 22.2727C17.2401 21.9484 17.1951 21.6667 17.1051 21.4276C17.0152 21.1884 16.8849 21.0038 16.7145 20.8736C16.544 20.7434 16.3369 20.6783 16.093 20.6783C15.8445 20.6783 15.6349 20.7457 15.4645 20.8807C15.294 21.0156 15.165 21.2027 15.0774 21.4418C14.9898 21.6809 14.946 21.9579 14.946 22.2727C14.946 22.59 14.9898 22.8705 15.0774 23.1143C15.1674 23.3558 15.2964 23.5452 15.4645 23.6825C15.6349 23.8175 15.8445 23.8849 16.093 23.8849ZM21.2253 19.5455L22.2267 21.4524L23.253 19.5455H24.8049L23.2246 22.2727L24.8475 25H23.3027L22.2267 23.1143L21.1685 25H19.606L21.2253 22.2727L19.6628 19.5455H21.2253Z" fill="white"/>
+<line x1="6.81281" y1="22.7756" x2="21.9396" y2="7.02154" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+</svg>

src/assets/img/toolbox/dx_clicked.svg

@@ -0,0 +1,6 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="15" cy="15" r="15" fill="#E34A4A"/>
+<path d="M6.61364 12.0888C6.19934 12.0888 5.8241 11.9822 5.48793 11.7692C5.15412 11.5537 4.88897 11.2377 4.69247 10.821C4.49834 10.402 4.40128 9.88826 4.40128 9.27983C4.40128 8.65483 4.50189 8.13518 4.70312 7.72088C4.90436 7.30421 5.17188 6.9929 5.50568 6.78693C5.84186 6.5786 6.20999 6.47443 6.61009 6.47443C6.91548 6.47443 7.16998 6.52652 7.37358 6.63068C7.57955 6.73248 7.74527 6.86032 7.87074 7.0142C7.99858 7.16572 8.09564 7.31487 8.16193 7.46165H8.2081V4.72727H9.71733V12H8.22585V11.1264H8.16193C8.09091 11.2779 7.99029 11.4283 7.86009 11.5774C7.73224 11.7242 7.56534 11.8461 7.35938 11.9432C7.15578 12.0402 6.9072 12.0888 6.61364 12.0888ZM7.09304 10.8849C7.33688 10.8849 7.54285 10.8187 7.71094 10.6861C7.88139 10.5511 8.0116 10.3629 8.10156 10.1214C8.19389 9.87997 8.24006 9.59706 8.24006 9.27273C8.24006 8.94839 8.19508 8.66667 8.10511 8.42756C8.01515 8.18845 7.88494 8.00379 7.71449 7.87358C7.54403 7.74337 7.33688 7.67827 7.09304 7.67827C6.84446 7.67827 6.63494 7.74574 6.46449 7.88068C6.29403 8.01562 6.16501 8.20265 6.07741 8.44176C5.98982 8.68087 5.94602 8.95786 5.94602 9.27273C5.94602 9.58996 5.98982 9.8705 6.07741 10.1143C6.16738 10.3558 6.2964 10.5452 6.46449 10.6825C6.63494 10.8175 6.84446 10.8849 7.09304 10.8849ZM11.8951 14.0455C11.7033 14.0455 11.5234 14.0301 11.3553 13.9993C11.1896 13.9709 11.0523 13.9342 10.9434 13.8892L11.2843 12.7599C11.4618 12.8144 11.6216 12.844 11.7637 12.8487C11.9081 12.8535 12.0324 12.8203 12.1365 12.7493C12.2431 12.6783 12.3295 12.5575 12.3958 12.3871L12.4846 12.1562L10.5279 6.54545H12.1188L13.248 10.5511H13.3049L14.4448 6.54545H16.0463L13.9263 12.5895C13.8245 12.883 13.686 13.1387 13.5108 13.3565C13.338 13.5767 13.119 13.746 12.8539 13.8643C12.5887 13.9851 12.2691 14.0455 11.8951 14.0455Z" fill="white"/>
+<path d="M15.6136 25.0888C15.1993 25.0888 14.8241 24.9822 14.4879 24.7692C14.1541 24.5537 13.889 24.2377 13.6925 23.821C13.4983 23.402 13.4013 22.8883 13.4013 22.2798C13.4013 21.6548 13.5019 21.1352 13.7031 20.7209C13.9044 20.3042 14.1719 19.9929 14.5057 19.7869C14.8419 19.5786 15.21 19.4744 15.6101 19.4744C15.9155 19.4744 16.17 19.5265 16.3736 19.6307C16.5795 19.7325 16.7453 19.8603 16.8707 20.0142C16.9986 20.1657 17.0956 20.3149 17.1619 20.4616H17.2081V17.7273H18.7173V25H17.2259V24.1264H17.1619C17.0909 24.2779 16.9903 24.4283 16.8601 24.5774C16.7322 24.7242 16.5653 24.8461 16.3594 24.9432C16.1558 25.0402 15.9072 25.0888 15.6136 25.0888ZM16.093 23.8849C16.3369 23.8849 16.5429 23.8187 16.7109 23.6861C16.8814 23.5511 17.0116 23.3629 17.1016 23.1214C17.1939 22.88 17.2401 22.5971 17.2401 22.2727C17.2401 21.9484 17.1951 21.6667 17.1051 21.4276C17.0152 21.1884 16.8849 21.0038 16.7145 20.8736C16.544 20.7434 16.3369 20.6783 16.093 20.6783C15.8445 20.6783 15.6349 20.7457 15.4645 20.8807C15.294 21.0156 15.165 21.2027 15.0774 21.4418C14.9898 21.6809 14.946 21.9579 14.946 22.2727C14.946 22.59 14.9898 22.8705 15.0774 23.1143C15.1674 23.3558 15.2964 23.5452 15.4645 23.6825C15.6349 23.8175 15.8445 23.8849 16.093 23.8849ZM21.2253 19.5455L22.2267 21.4524L23.253 19.5455H24.8049L23.2246 22.2727L24.8475 25H23.3027L22.2267 23.1143L21.1685 25H19.606L21.2253 22.2727L19.6628 19.5455H21.2253Z" fill="white"/>
+<line x1="6.81281" y1="22.7756" x2="21.9396" y2="7.02154" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+</svg>

src/assets/img/toolbox/integral.svg

@@ -0,0 +1,4 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="15" cy="15" r="15" fill="#4597B1"/>
+<path d="M15.0199 20.2131C14.8021 21.5199 14.3073 22.5213 13.5355 23.2173C12.7637 23.9134 11.7576 24.2614 10.517 24.2614C10.2424 24.2614 9.98911 24.2495 9.7571 24.2259C9.52036 24.2022 9.28835 24.1619 9.06108 24.1051L9.60085 21.7685C9.72396 21.7969 9.86127 21.8229 10.0128 21.8466C10.1643 21.8703 10.3442 21.8821 10.5526 21.8821C10.9976 21.8821 11.3456 21.759 11.5966 21.5128C11.8523 21.2713 12.0204 20.8949 12.1009 20.3835L13.9972 8.94886C14.2197 7.6089 14.7334 6.58144 15.5384 5.86648C16.3433 5.15151 17.392 4.79403 18.6847 4.79403C18.9356 4.79403 19.1889 4.81297 19.4446 4.85085C19.7003 4.884 19.9702 4.93845 20.2543 5.0142L19.6364 7.27983C19.4991 7.25142 19.3168 7.23011 19.0895 7.21591C18.867 7.2017 18.642 7.1946 18.4148 7.1946C17.9886 7.1946 17.6548 7.30824 17.4134 7.53551C17.1766 7.76278 17.018 8.1179 16.9375 8.60085L15.0199 20.2131Z" fill="white"/>
+</svg>

src/assets/img/toolbox/integral_clicked.svg

@@ -0,0 +1,4 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="15" cy="15" r="15" fill="#E34A4A"/>
+<path d="M15.0199 20.2131C14.8021 21.5199 14.3073 22.5213 13.5355 23.2173C12.7637 23.9134 11.7576 24.2614 10.517 24.2614C10.2424 24.2614 9.98911 24.2495 9.7571 24.2259C9.52036 24.2022 9.28835 24.1619 9.06108 24.1051L9.60085 21.7685C9.72396 21.7969 9.86127 21.8229 10.0128 21.8466C10.1643 21.8703 10.3442 21.8821 10.5526 21.8821C10.9976 21.8821 11.3456 21.759 11.5966 21.5128C11.8523 21.2713 12.0204 20.8949 12.1009 20.3835L13.9972 8.94886C14.2197 7.6089 14.7334 6.58144 15.5384 5.86648C16.3433 5.15151 17.392 4.79403 18.6847 4.79403C18.9356 4.79403 19.1889 4.81297 19.4446 4.85085C19.7003 4.884 19.9702 4.93845 20.2543 5.0142L19.6364 7.27983C19.4991 7.25142 19.3168 7.23011 19.0895 7.21591C18.867 7.2017 18.642 7.1946 18.4148 7.1946C17.9886 7.1946 17.6548 7.30824 17.4134 7.53551C17.1766 7.76278 17.018 8.1179 16.9375 8.60085L15.0199 20.2131Z" fill="white"/>
+</svg>

src/components/admin/app-navbar/AppNavbar.vue

@@ -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"

src/components/admin/app-navbar/components/AppNavbarActions.vue

@@ -10,6 +10,7 @@
     <language-dropdown class="app-navbar-actions__item"/> -->
     <license-check-button :ref="'license_check_button_ref'" @updateLicense="updateLicense"/>
     <license-update-modal :title="'Update'" :ref="'license_update_modal_ref'" @refresh="refresh"/>
+    <va-button @click="reload"  icon="fa fa-refresh" flat></va-button>
     <profile-dropdown class="app-navbar-actions__item app-navbar-actions__item--profile">
       <span>{{userName}}</span>
     </profile-dropdown>
@@ -70,6 +71,9 @@ export default {
       this.$refs.license_check_button_ref.refresh()
       this.$refs.license_update_modal_ref.hide()
     },
+    reload () {
+      window.location.reload(true)
+    },
   },
 }
 </script>

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

@@ -61,6 +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: 'forms',
     //   displayName: 'menu.forms',

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

@@ -26,7 +26,7 @@
           <div class="flex sm12 xl12 md12 xs12">
             <!-- <chart :style="'width: auto; height: 88vhvh;'" :option="options"></chart> -->
             <elite-replay-overview-chart v-show="showOverviewChart" :ref="'chart_overview'" class="mb-1" :cardheight="'7vh'" :data="chartOverviewData" @dataZoomEvent="dataZoomEvent($event)"/>
-            <elite-replay-chart :ref="'chart_detail'" :cardheight="'88vh'" :chartheight="detailchartheight" :data="chartDetailData" @updateIntegralBoundary="updateIntegralBoundary" />
+            <elite-replay-chart :ref="'chart_detail'" :cardheight="'90vh'" :chartheight="detailchartheight" :data="chartDetailData" @updateIntegralBoundary="updateIntegralBoundary" />
             <change-channel-value-min-max :ref="'set_min_max'"/>
           </div>
         </div>
@@ -79,6 +79,7 @@ export default {
       'startTimeCurrent',
       'endTimeCurrent',
       'sampleMethod',
+      'controlPanel',
     ]),
   },
   props: {
@@ -223,6 +224,8 @@ export default {
             channelY: ch,
           })
         })
+        // disable overviewData legend
+        this.chartOverviewData.legend.show = false
         this.chartDetailData.xAxis[_gridNumber].axisLabel.show = true
         if (this.maxTime < parseInt(meta.time_duration)) {
           this.maxTime = parseInt(meta.time_duration)
@@ -371,16 +374,14 @@ export default {
       this.hideChartLoading()
     },
     drawDetailData: async function () {
-      var panelInfo = this.$refs.top_control_panel.getPanelInfo()
       // brush setting write at here, due to mounted won't show the brush
       this.chartDetailData.brush = {
         toolbox: ['rect', 'clear'],
         // toolbox: ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear'],
         xAxisIndex: 0,
-        // throttleType: 'debounce',
-        // throttleDelay: 5,
+        throttleType: 'debounce',
+        throttleDelay: 0,
       }
-      console.log('panelInfo: ', panelInfo) // TODO: update the formatter for tooltips
       this.showChartLoading('detail')
       const timeDur = this.endTimeCurrent - this.startTimeCurrent
       let _gridNumber = 0
@@ -393,7 +394,7 @@ export default {
         })
 
         let scale = '1'
-        if (this.axisXDataType.description === 'Time') {
+        if (this.controlPanel.x.axis.description === 'Time') {
           scale = await this.computeResampleScale(metaInfo, timeDur)
         }
         // elite的sample rate不像neulive這麼高，因此試試scale = 100 or 1000時不要再sampling一次了，不然有些形狀（e.g. peak）會不一樣
@@ -412,11 +413,11 @@ export default {
         this.currentScale = scale
         this.chartDetailData.series[_gridNumber].data.length = 0
         let dataListX
-        const channelX = parseInt(this.axisXDataType.id)
-        if (this.axisXDataType.description !== 'Time') {
+        const channelX = parseInt(this.controlPanel.x.axis.channel)
+        if (this.controlPanel.x.axis.description !== 'Time') {
           dataListX = this.dataInfo[meta][channelX][scale]
         }
-        const channelY = parseInt(this.axisYDataType.id)
+        const channelY = parseInt(this.controlPanel.y.axis.channel)
         const dataListY = this.dataInfo[meta][channelY][scale]
 
         const isThisModeHasCycle = this.GLOBAL.hasCycleMode(metaInfo.parameter_set.MODE, metaInfo.device.library_name)
@@ -463,7 +464,7 @@ export default {
         for (let i = startIndex; i <= endIndex; i++) {
           const data = await this.getData(parseInt(scale), this.sampleMethod, dataListY[i].id, channelY, metaInfo)
           let dataX
-          if (this.axisXDataType.description !== 'Time') {
+          if (this.controlPanel.x.axis.description !== 'Time') {
             dataX = await this.getData(parseInt(scale), this.sampleMethod, dataListX[i].id, channelX, metaInfo)
           }
           var deltaX = 0
@@ -565,7 +566,7 @@ export default {
           }
         }
 
-        if (this.axisXDataType.description === 'Time') {
+        if (this.controlPanel.x.axis.description === 'Time') {
           this.chartDetailData.xAxis[_gridNumber].min = _startTime
           this.chartDetailData.xAxis[_gridNumber].max = _endTime
         } else {
@@ -575,7 +576,7 @@ export default {
         _gridNumber += 1
       }
 
-      if (this.axisXDataType.description !== 'Time') {
+      if (this.controlPanel.x.axis.description !== 'Time') {
         this.showOverviewChart = false
         this.detailchartheight = '88vh'
         // this.$refs.chart_detail.updateChartHeight()
@@ -607,33 +608,65 @@ export default {
       }
     },
     changeAxis (gridIndex) {
+      // if (this.initDone) {
+      //   const libName = this.metaList[gridIndex].device.library_name
+      //   let xType
+      //   let xValue
+      //   if (this.axisXDataType.description === 'Time') {
+      //     xType = 'Time'
+      //   } else {
+      //     if (libName === 'EliteZM15' || libName.includes('Elite_EDC')) {
+      //       xType = 'Elite'
+      //     } else if (libName.includes('EIS')) {
+      //       xType = 'EliteEIS'
+      //     }
+      //     xValue = this.axisXDataType.id + 1
+      //   }
+      //   this.updateRegisteredChart({
+      //     chartAllData: this.chartData,
+      //     chartID: this.chartDetailData.chartID,
+      //     gridIndex: gridIndex,
+      //     deviceNameX: xType,
+      //     deviceIDX: this.metaList[gridIndex].name,
+      //     channelX: xValue,
+      //     deviceNameY: libName.includes('EIS') ? 'EliteEIS' : 'Elite',
+      //     deviceIDY: '',
+      //     channelY: this.axisYDataType.id + 1,
+      //   })
+      //   console.log({
+      //     chartAllData: this.chartData,
+      //     chartID: this.chartDetailData.chartID,
+      //     gridIndex: gridIndex,
+      //     deviceNameX: xType,
+      //     deviceIDX: this.metaList[gridIndex].name,
+      //     channelX: xValue,
+      //     deviceNameY: libName.includes('EIS') ? 'EliteEIS' : 'Elite',
+      //     deviceIDY: '',
+      //     channelY: this.axisYDataType.id + 1,
+      //   })
+      // }
+      // if (this.axisXDataType.description === 'Time') {
+      //   this.drawOverviewData()
+      // }
+      // this.drawDetailData() // reDraw
+      // tang
       if (this.initDone) {
         const libName = this.metaList[gridIndex].device.library_name
-        let xType
-        let xValue
-        if (this.axisXDataType.description === 'Time') {
-          xType = 'Time'
-        } else {
-          if (libName === 'EliteZM15' || libName.includes('Elite_EDC')) {
-            xType = 'Elite'
-          } else if (libName.includes('EIS')) {
-            xType = 'EliteEIS'
-          }
-          xValue = this.axisXDataType.id + 1
-        }
+        const xType = (this.controlPanel.x.axis.description === 'Time') ? 'Time' : ((libName === 'EliteZM15' || libName.includes('Elite_EDC') ? 'Elite' : 'EliteEIS'))
+        const xChannel = (this.controlPanel.x.axis.channel === -1) ? undefined : this.controlPanel.x.axis.channel + 1
         this.updateRegisteredChart({
           chartAllData: this.chartData,
           chartID: this.chartDetailData.chartID,
           gridIndex: gridIndex,
           deviceNameX: xType,
           deviceIDX: this.metaList[gridIndex].name,
-          channelX: xValue,
+          channelX: xChannel,
           deviceNameY: libName.includes('EIS') ? 'EliteEIS' : 'Elite',
           deviceIDY: '',
-          channelY: this.axisYDataType.id + 1,
+          channelY: this.controlPanel.y.axis.channel + 1,
         })
       }
-      if (this.axisXDataType.description === 'Time') {
+      if (this.controlPanel.x.axis.description === 'Time') {
         this.drawOverviewData()
       }
       this.drawDetailData() // reDraw
@@ -656,7 +689,7 @@ export default {
         }
         if (rawData[prevIndex][0] >= boundary.x_start && rawData[prevIndex][0] <= boundary.x_end &&
             rawData[index][0] >= boundary.x_start && rawData[index][0] <= boundary.x_end) {
-          deltaX = Number(rawData[index][0]) - Number(rawData[prevIndex][0])
+          deltaX = Math.abs(Number(rawData[index][0]) - Number(rawData[prevIndex][0]))
           if (rawData[index][1] > boundary.y_end) rawData[index][1] = boundary.y_end
           else if (rawData[index][1] < boundary.y_start) {
             continue

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

@@ -107,14 +107,14 @@ export default {
   async mounted () {
     this.resizeTimer = setInterval(this.resize, 1000)
     // brush set at here won't work
-    /* this.data.brush = {
+    this.data.brush = {
       toolbox: ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear'],
       xAxisIndex: 0,
       throttleType: 'debounce',
-      throttleDelay: 5,
-    } */
+      throttleDelay: 0,
+    }
     this.$refs.chart_ref.chart.on('brushSelected', (params) => {
-      if (params.batch[0].areas.length !== 0) {
+      if (params.batch[0] && params.batch[0].areas.length !== 0) {
         var boundary = {
           x_start: Number(params.batch[0].areas[0].coordRange[0][0].toFixed(4)),
           x_end: Number(params.batch[0].areas[0].coordRange[0][1].toFixed(4)),

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

@@ -12,58 +12,66 @@
           <delete-file />
         </div>
       </div>
-
       <div class="flex-container mb-2">
         <div class="flex sm2 xl2 md2 xs2 px-0 py-0">
-          <p class="display-6"> X-axis </p>
+          <p class="display-6"> X-Axis </p>
         </div>
         <div class="flex sm5 xl5 md5 xs5 pl-1 pr-0 py-0">
-          <change-axis :ref="'change_axis_x'" axis="x" @changeAxis="changeAxis" @changeUnit="changeUnit" @clearCycle="clearCycle"/>
+          <control-axis
+            :ref="'axis_x'"
+            coordinate="x"
+            @changeAxis="changeAxis"
+          />
         </div>
         <div class="flex sm5 xl5 md5 xs5 pl-1 pr-0 py-0">
-          <change-unit :ref="'change_unit_x'" axis="x" @refreshChart="refreshChart"/>
+          <control-unit
+            :ref="'unit_x'"
+            coordinate="x"
+            @changeUnit="changeUnit"
+            style="width: 75px;"
+          />
         </div>
       </div>
       <div class="flex-container mb-2">
         <div class="flex sm2 xl2 md2 xs2 px-0 py-0" />
         <div class="flex sm5 xl5 md5 xs5 pl-1 pr-0 py-0">
-          <change-scale :ref="'change_scale_x'" axis="x" @refreshChart="refreshChart" @clearCycle="clearCycle" @changeAxis="changeAxis" @changeFunctional="changeFunctional"/>
-        </div>
-        <div class="flex sm5 xl5 md5 xs5 px-0 py-0">
-          <abs-toggle :ref="'abs_x'" axis="x" @changeAxis="changeAxis"/>
+          <control-funct
+            :ref="'funct_x'"
+            coordinate="x"
+            @changeFunct="changeFunct"
+          />
         </div>
       </div>
-
       <div class="flex-container mb-2">
         <div class="flex sm2 xl2 md2 xs2 px-0 py-0">
-          <p class="display-6"> Y-axis </p>
+          <p class="display-6"> Y-Axis </p>
         </div>
         <div class="flex sm5 xl5 md5 xs5 pl-1 pr-0 py-0">
-          <change-axis :ref="'change_axis_y'" axis="y" @changeAxis="changeAxis" @changeUnit="changeUnit" @clearCycle="clearCycle"/>
+          <control-axis
+            :ref="'axis_y'"
+            coordinate="y"
+            @changeAxis="changeAxis"
+          />
         </div>
         <div class="flex sm5 xl5 md5 xs5 pl-1 pr-0 py-0">
-          <change-unit :ref="'change_unit_y'" axis="y" @refreshChart="refreshChart"/>
+          <control-unit
+            :ref="'unit_y'"
+            coordinate="y"
+            @changeUnit="changeUnit"
+            style="width: 75px;"
+          />
         </div>
       </div>
       <div class="flex-container mb-2">
         <div class="flex sm2 xl2 md2 xs2 px-0 py-0" />
         <div class="flex sm5 xl5 md5 xs5 pl-1 pr-0 py-0">
-          <change-scale :ref="'change_scale_y'" axis="y" @refreshChart="refreshChart" @clearCycle="clearCycle" @changeAxis="changeAxis" @changeFunctional="changeFunctional"/>
-        </div>
-        <div class="flex sm5 xl5 md5 xs5 px-0 py-0">
-          <abs-toggle :ref="'abs_y'" axis="y" @changeAxis="changeAxis"/>
+          <control-funct
+            :ref="'funct_y'"
+            coordinate="y"
+            @changeFunct="changeFunct"/>
         </div>
       </div>
-      <!-- <va-button @click="switchCollapse"></va-button>
-      <va-collapse class="mb-2" :isOpenDefault="false" v-model="innerCollapse">
-        <span slot="header">Specific Integral</span>
-        <div slot="body">
-          <div>
-            <specific-integral :ref="'specific_integral'" @setBrushBoundary="setBrushBoundary" />
-          </div>
-        </div>
-      </va-collapse> -->
-      <specific-integral :ref="'specific_integral'" @setBrushBoundary="setBrushBoundary" />
+      <specific-integral :ref="'specific_integral'" @setBrushBoundary="setBrushBoundary"/>
       <div class="flex-container mb-2">
         <div class="flex sm10 xl10 md10 xs10 px-0 py-0">
           <change-window-start-and-size :ref="'change_window_start_and_size'" @changeOverviewDataZoom="changeOverviewDataZoom"/>
@@ -81,11 +89,10 @@
 
 <script>
 import ShowResampleRate from '@/components/analysis/replay/toolbox/ShowResampleRate.vue'
-import ChangeAxis from '@/components/analysis/replay/toolbox/ChangeAxis.vue'
-import ChangeUnit from '@/components/analysis/replay/toolbox/ChangeUnit.vue'
-import ChangeScale from '@/components/analysis/replay/toolbox/ChangeScale.vue'
+import controlAxis from '@/components/analysis/replay/toolbox/ControlAxis'
+import controlUnit from '@/components/analysis/replay/toolbox/ControlUnit'
+import controlFunct from '@/components/analysis/replay/toolbox/ControlFunct'
 import ChangeCycle from '@/components/analysis/replay/toolbox/ChangeCycle.vue'
-import AbsToggle from '@/components/analysis/replay/toolbox/AbsToggle.vue'
 import SpecificIntegral from '@/components/analysis/replay/toolbox/SpecificIntegral.vue'
 import DownloadFile from '@/components/analysis/replay/toolbox/DownloadFile.vue'
 import DeleteFile from '@/components/analysis/replay/toolbox/DeleteFile.vue'
@@ -93,17 +100,20 @@ import EditFileName from '@/components/analysis/replay/toolbox/EditFileName.vue'
 import ShowParameter from '@/components/analysis/replay/toolbox/ShowParameter.vue'
 import LockDataZoom from '@/components/analysis/replay/toolbox/LockDataZoom.vue'
 import ChangeWindowStartAndSize from '@/components/analysis/replay/toolbox/ChangeWindowStartAndSize.vue'
+import { mapMutations } from 'vuex'
 import { mapFields } from 'vuex-map-fields'
+import { tableRouter } from '@/components/analysis/replay/toolbox/EliteReplayTable'
+import configRouter from '@/components/analysis/replay/toolbox/configTable'
+import types from '@/store/modules/analysis/replay/types'
 
 export default {
   name: 'top-control-panel',
   components: {
     ShowResampleRate,
-    ChangeAxis,
-    ChangeUnit,
-    ChangeScale,
+    controlAxis,
+    controlUnit,
+    controlFunct,
     ChangeCycle,
-    AbsToggle,
     SpecificIntegral,
     DownloadFile,
     DeleteFile,
@@ -114,38 +124,93 @@ export default {
   },
   computed: {
     ...mapFields('replay', [
+      'chartData',
       'metaList',
       'showCyclePanel',
+      'controlPanel',
     ]),
   },
-  props: {
-  },
-  async created () {
-  },
   data () {
     return {
-      deviceName: '',
+      libraryName: '',
       showCycle: false,
       innerCollapse: false,
+      tableRouter,
+      configRouter,
     }
   },
-  mqtt: {
-  },
   methods: {
+    ...mapMutations('replay', [types.chart.updateAxisLabel]),
+    // initialize control buttons
     init () {
-      this.deviceName = this.metaList[0].device.library_name
-      this.$refs.change_unit_x.init(this.deviceName)
-      this.$refs.change_unit_y.init(this.deviceName)
-      this.$refs.change_axis_x.init(this.deviceName)
-      this.$refs.change_axis_y.init(this.deviceName)
-      this.$refs.change_scale_x.init(this.deviceName)
-      this.$refs.change_scale_y.init(this.deviceName)
-      this.$refs.abs_x.init(this.deviceName)
-      this.$refs.abs_y.init(this.deviceName)
+      // get config information
+      this.libraryName = this.metaList[0].device.library_name
+      const setting = this.GLOBAL.getDefaultChartTypeByMode(this.metaList[0].parameter_set.MODE, this.libraryName)
+      this.controlPanel.x.axis = this.configRouter.getAxis(this.libraryName, setting[0], setting[1])
+      this.controlPanel.y.axis = this.configRouter.getAxis(this.libraryName, setting[2], setting[3])
+      this.controlPanel.FSM = this.configRouter.getFSM(this.controlPanel.x.axis.description, this.controlPanel.y.axis.description)
+      // initialize other blocks
+      this.$refs.axis_x.init(this.libraryName, setting[0])
+      this.$refs.axis_y.init(this.libraryName, setting[2])
+      this.$refs.unit_x.init(this.controlPanel.x.axis.description)
+      this.$refs.unit_y.init(this.controlPanel.y.axis.description)
+      this.$refs.funct_x.init(this.controlPanel.x.axis.description, this.controlPanel.y.axis.description)
+      this.$refs.funct_y.init(this.controlPanel.x.axis.description, this.controlPanel.y.axis.description)
       this.$refs.change_cycle.init()
       this.$refs.edit_file_name.init()
-      this.$refs.show_param.init(this.deviceName)
+      this.$refs.show_param.init(this.libraryName)
       this.$refs.change_window_start_and_size.init()
+      this.refreshFormatter('x')
+      this.refreshFormatter('y')
+      this.$emit('changeFunctional', 'x', 'Linear')
+      this.$emit('changeFunctional', 'y', 'Linear')
+      this.$emit('changeAxis', 0)
+      this.$refs.specific_integral.checkMeaning(this.controlPanel.x.axis.description, this.controlPanel.y.axis.description)
+      this.$refs.specific_integral.setDisplayParam(this.controlPanel.x.axis.description, this.controlPanel.x.unit, this.controlPanel.y.axis.description, this.controlPanel.y.unit)
+    },
+    /* changeXXX: activate when pressing XXX button */
+    // trigger when changing the axis type
+    changeAxis (gridIndex) {
+      this.controlPanel.FSM = this.configRouter.getFSM(this.controlPanel.x.axis.description, this.controlPanel.y.axis.description)
+      // initialize other blocks
+      this.$refs.unit_x.init(this.controlPanel.x.axis.description)
+      this.$refs.unit_y.init(this.controlPanel.y.axis.description)
+      this.$refs.funct_x.init(this.controlPanel.x.axis.description, this.controlPanel.y.axis.description)
+      this.$refs.funct_y.init(this.controlPanel.x.axis.description, this.controlPanel.y.axis.description)
+      this.$refs.change_cycle.init()
+      this.refreshFormatter('x')
+      this.refreshFormatter('y')
+      this.$emit('changeFunctional', 'x', 'Linear')
+      this.$emit('changeFunctional', 'y', 'Linear')
+      this.$emit('changeAxis', gridIndex)
+      this.$refs.specific_integral.checkMeaning(this.controlPanel.x.axis.description, this.controlPanel.y.axis.description)
+      this.$refs.specific_integral.setDisplayParam(this.controlPanel.x.axis.description, this.controlPanel.x.unit, this.controlPanel.y.axis.description, this.controlPanel.y.unit)
+    },
+    // trigger when changing the unit
+    changeUnit (coordinate) {
+      this.refreshFormatter(coordinate)
+      this.$refs.specific_integral.refreshDisplayParam(this.controlPanel.x.axis.description, this.controlPanel.x.unit, this.controlPanel.y.axis.description, this.controlPanel.y.unit)
+    },
+    // trigger when press the functional button
+    changeFunct (coordinate) {
+      if (coordinate === 'y') {
+        this.controlPanel.y.axis.description = this.controlPanel.FSM[this.controlPanel.y.funct]
+        this.$refs.unit_y.init(this.controlPanel.y.axis.description)
+        this.$refs.specific_integral.checkMeaning(this.controlPanel.x.axis.description, this.controlPanel.y.axis.description)
+        this.refreshFormatter(coordinate)
+      }
+      this.$emit('changeFunctional', coordinate, this.controlPanel[coordinate].funct)
+      this.$emit('changeAxis', 0)
+    },
+    /* refreshXXX: passively called by changeXXX function to refresh some setting */
+    // refresh all formatters of charts
+    refreshFormatter (coordinate) {
+      this.updateAxisLabelChart({
+        chartID: 1,
+        axis: coordinate,
+        type: this.controlPanel[coordinate].axis.description,
+        axisIndex: 0,
+      })
     },
     changeOverviewDataZoom () {
       this.$emit('changeOverviewDataZoom')
@@ -153,43 +218,12 @@ export default {
     refreshChart (options) {
       this.$emit('refreshChart', options)
     },
-    changeFunctional (axis, functional) {
-      this.$emit('changeFunctional', axis, functional)
-    },
-    changeAxis (gridIndex) {
-      this.$emit('changeAxis', gridIndex)
-    },
-    changeUnit (axis) {
-      if (axis === 'x') {
-        this.$refs.change_unit_x.changeUnitByAxis()
-      } else if (axis === 'y') {
-        this.$refs.change_unit_y.changeUnitByAxis()
-      }
-    },
-    getPanelInfo () {
-      var panelInfo = {
-        axis_x: this.$refs.change_axis_x.getChannelByAxis(),
-        axis_y: this.$refs.change_axis_y.getChannelByAxis(),
-        scale_x: this.$refs.change_scale_x.getScaleByAxis(),
-        scale_y: this.$refs.change_scale_y.getScaleByAxis(),
-        unit_x: this.$refs.change_unit_x.getUnitByAxis(),
-        unit_y: this.$refs.change_unit_y.getUnitByAxis(),
-      }
-      // console.log('panelInfo: ', panelInfo)
-      return panelInfo
-    },
     clearCycle () {
       this.$refs.change_cycle.clear()
     },
     setBrushBoundary (boundary) {
       this.$emit('setBrushBoundary', boundary)
     },
-    /* switchCollapse () {
-      this.innerCollapse = this.innerCollapse ? false : true
-      console.log(this.innerCollapse)
-    }, */
-  },
-  mounted () {
   },
 }
 </script>

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

@@ -49,7 +49,9 @@ export default {
       'axisYDataType',
       'axisXLabelScale',
       'axisYLabelScale',
+      'showCyclePanel',
       'showWhichCycles',
+      'controlPanel',
     ]),
   },
   watch: {
@@ -76,21 +78,20 @@ export default {
       return sortedCycleList
     },
     init () {
+      this.showWhichCycles = '1'
       this.cycleNum = this.metaList[this.metaIndex].parameter_set.CYCLE_NUMBER
       const meta = this.metaList[this.metaIndex]
       this.metaID = meta.id
       this.isThisModeHasCycle = this.GLOBAL.hasCycleMode(this.metaList[this.metaIndex].parameter_set.MODE, meta.device.library_name)
       if (this.isThisModeHasCycle === true) {
+        this.showCyclePanel = true
         this.showPanel = true
       } else {
+        this.showCyclePanel = false
         this.showPanel = false
       }
     },
-    clear () {
-      this.showWhichCycles = '1'
-    },
     async setCycle () {
-      console.log('setCycle')
       if (this.isThisModeHasCycle === true) {
         const dataCycleList = this.recInfo[this.metaID][this.cycleDataID][this.currentScale]
         const cycleDataList = []
@@ -105,15 +106,14 @@ export default {
         const cycleDict = this.getCycleDictRec()(cycleDataList)
         this.cycleNum = Object.keys(cycleDict).length
         let dataXList
-        if (this.axisXDataType.description !== 'Time') {
-          dataXList = this.recInfo[this.metaID][this.axisXDataType.id][this.currentScale]
+        if (this.controlPanel.x.axis.description !== 'Time') {
+          dataXList = this.recInfo[this.metaID][this.controlPanel.x.axis.channel][this.currentScale]
         }
-        const dataYList = this.recInfo[this.metaID][this.axisYDataType.id][this.currentScale]
+        const dataYList = this.recInfo[this.metaID][this.controlPanel.y.axis.channel][this.currentScale]
         const filteredData = []
 
         let counter = 0
         for (let sliceIndex = 0; sliceIndex < this.cycleNum; sliceIndex++) {
-          // console.log(this.slices)
           if (this.slices() === '' || this.slices().includes((sliceIndex + 1).toString())) {
             // slice data
             const value = cycleDict[sliceIndex + 1]
@@ -129,36 +129,18 @@ export default {
                 endIndex = i
               }
             }
-
             for (let i = startIndex; i <= endIndex; i++) {
-              const dataY = await this.getData(parseInt(this.currentScale), this.sampleMethod, dataYList[i].id, this.axisYDataType.id, this.metaList[this.metaIndex])
-              if (this.axisXDataType.description !== 'Time') {
-                const dataX = await this.getData(parseInt(this.currentScale), this.sampleMethod, dataXList[i].id, this.axisXDataType.id, this.metaList[this.metaIndex])
+              const dataY = await this.getData(parseInt(this.currentScale), this.sampleMethod, dataYList[i].id, this.controlPanel.y.axis.channel, this.metaList[this.metaIndex])
+              if (this.controlPanel.x.axis.description !== 'Time') {
+                const dataX = await this.getData(parseInt(this.currentScale), this.sampleMethod, dataXList[i].id, this.controlPanel.x.axis.channel, this.metaList[this.metaIndex])
                 for (let j = 0, len = dataY.length; j < len; j++) {
                   if (parseInt(dataY[j][0]) >= startTime && parseInt(dataY[j][0]) <= endTime) {
-                    let x
-                    let y
-                    if (this.axisXLabelScale.description === 'Log') {
-                      x = Math.abs(dataX[j][1])
-                    } else if (this.axisXLabelScale.description === 'Linear') {
-                      x = dataX[j][1]
-                    }
-                    if (this.axisYLabelScale.description === 'Log') {
-                      y = Math.abs(dataY[j][1])
-                    } else if (this.axisYLabelScale.description === 'Linear') {
-                      y = dataY[j][1]
-                    }
-                    filteredData.push([x, y])
+                    filteredData.push([dataX[j][1], dataY[j][1]])
                   }
                 }
               } else {
                 for (let j = 0, len = dataY.length; j < len; j++) {
                   if (parseInt(dataY[j][0]) >= startTime && parseInt(dataY[j][0]) <= endTime) {
-                    if (this.axisYLabelScale.description === 'Log') {
-                      dataY[j][1] = Math.abs(dataY[j][1])
-                    } else if (this.axisYLabelScale.description === 'Linear') {
-                      // do nothing
-                    }
                     filteredData.push(dataY[j])
                   }
                 }
@@ -170,14 +152,13 @@ export default {
               seriesIndex: this.metaIndex,
               data: filteredData,
             })
-            if (this.axisXDataType.description === 'Time') {
+            if (this.controlPanel.x.axis.description === 'Time') {
               if (counter === 0) {
                 this.chartData[this.chartID].xAxis[this.metaIndex].min = startTime
               }
               this.chartData[this.chartID].xAxis[this.metaIndex].max = endTime
               counter++
             }
-            // this.$emit('refreshChart', this.chartData[this.chartID])
           }
         }
       }
@@ -196,11 +177,6 @@ export default {
     ...mapMutations('replay', [types.chart.updateSeries]),
     ...mapGetters('replay', [types.rec.getCycleDict]),
   },
-  mounted () {
-
-  },
-  destroyed () {
-  },
 }
 
 </script>

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

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

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

@@ -0,0 +1,50 @@
+<template>
+  <div class="flex row">
+    <va-radio-button
+      v-for="(funct, index) in functOption"
+      v-model="controlPanel[coordinate].funct"
+      :key="index"
+      :option="funct"
+      @input="changeFunct()"
+
+    />
+  </div>
+</template>
+
+<script>
+import { mapFields } from 'vuex-map-fields'
+import { tableRouter } from '@/components/analysis/replay/toolbox/EliteReplayTable'
+import configRouter from '@/components/analysis/replay/toolbox/configTable'
+
+export default {
+  name: 'controlFunct',
+  props: {
+    coordinate: {
+      type: String, // x or y
+    },
+  },
+  data () {
+    return {
+      funct: '',
+      functOption: [],
+      tableRouter,
+      configRouter,
+    }
+  },
+  computed: {
+    ...mapFields('replay', [
+      'controlPanel',
+    ]),
+  },
+  methods: {
+    init (xAxis, yAxis) {
+      this.controlPanel[this.coordinate].funct = 'Linear'
+      this.functOption = this.configRouter.getFunctOption(xAxis, yAxis, this.coordinate)
+    },
+    changeFunct () {
+      this.$emit('changeFunct', this.coordinate)
+    },
+  },
+}
+
+</script>

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

@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <va-select
+      v-model="controlPanel[coordinate].unit"
+      class="va-select-without-margin"
+      :options="unitOption"
+      :noClear='true'
+      @input="changeUnit()"
+    />
+  </div>
+</template>
+
+<script>
+import { mapFields } from 'vuex-map-fields'
+import { tableRouter } from '@/components/analysis/replay/toolbox/EliteReplayTable'
+import configRouter from '@/components/analysis/replay/toolbox/configTable'
+
+export default {
+  name: 'controlUnit',
+  props: {
+    coordinate: {
+      type: String, // x or y
+    },
+  },
+  data () {
+    return {
+      unit: '',
+      unitOption: [],
+      tableRouter,
+      configRouter,
+    }
+  },
+  computed: {
+    ...mapFields('replay', [
+      'controlPanel',
+    ]),
+  },
+  methods: {
+    init (axis) {
+      this.controlPanel[this.coordinate].unit = this.configRouter.getUnit(axis)
+      this.unitOption = this.configRouter.getUnitOption(axis)
+    },
+    changeUnit () {
+      this.$emit('changeUnit', this.coordinate)
+    },
+  },
+}
+
+</script>
+
+<style lang="scss">
+  .va-select-without-margin {
+    .va-select {
+      margin-bottom: 0;
+    }
+  }
+</style>

src/components/analysis/replay/toolbox/EliteReplayTable.js

@@ -0,0 +1,209 @@
+// library definition
+// const libraryInfo = {
+//   EDC: {
+//     x: ['Time',
+//       'Current',
+//       'Voltage',
+//       'Resistance',
+//     ],
+//     y: ['Current',
+//       'Voltage',
+//       'Resistance',
+//     ],
+//   },
+// }
+
+// axis information
+const axisInfo = {
+  // axis type
+  Time: {
+    name: 'Time',
+    channel: -1,
+    option: {
+      auto: 1,
+    },
+    defaultUnit: 'auto',
+    downloadUnit: 'auto',
+  },
+  Current: {
+    name: 'Current',
+    channel: 0,
+    option: {
+      nA: 1,
+      uA: 1e3,
+      mA: 1e6,
+      A: 1e9,
+    },
+    defaultUnit: 'mA',
+    downloadUnit: 'A',
+  },
+  Voltage: {
+    name: 'Voltage',
+    channel: 1,
+    option: {
+      uV: 1,
+      mV: 1e3,
+      V: 1e6,
+    },
+    defaultUnit: 'mV',
+    downloadUnit: 'V',
+  },
+  Resistance: {
+    name: 'Resistance',
+    channel: 2,
+    option: {
+      mΩ: 1,
+      Ω: 1e3,
+      kΩ: 1e6,
+      MΩ: 1e9,
+    },
+    defaultUnit: 'Ω',
+    downloadUnit: 'Ω',
+  },
+  Cycle: {
+    name: 'Cycle',
+    channel: 3,
+    option: {
+      cycle: 1,
+    },
+    defaultUnit: 'cycle',
+    downloadUnit: 'cycle',
+  },
+  Charge: {
+    name: 'Charge',
+    channel: -1,
+    option: {
+      nAh: 3600 * 1e6,
+      uAh: 1600 * 1e9,
+      mAh: 3600 * 1e12,
+      Ah: 3600 * 1e15,
+    },
+    defaultUnit: 'mAh',
+    downloadUnit: 'mAh',
+  },
+  Power: {
+    name: 'Power',
+    channel: -1,
+    option: {
+      mW: 1e12,
+      W: 1e15,
+      kW: 1e18,
+    },
+    defaultUnit: 'W',
+    downloadUnit: 'W',
+  },
+  Transconductance: {
+    name: 'Transconductance',
+    channel: -1,
+    option: {
+      'mA/V': 1,
+      'A/V': 1e3,
+      'kA/V': 1e6,
+    },
+    defaultUnit: 'A/V',
+    downloadUnit: 'A/V',
+  },
+  Impedance: {
+    name: 'Impedance',
+    chanel: 6,
+    option: {
+      mΩ: 1e-3,
+      Ω: 1,
+      kΩ: 1e3,
+      MΩ: 1e6,
+    },
+    downloadUnit: 'Ω',
+    defaultUnit: 'Ω',
+  },
+  None: {
+    name: 'not support',
+    channel: -1,
+    option: {
+      none: 1,
+    },
+    defaultUnit: 'none',
+    downloadUnit: 'none',
+  },
+}
+
+export const tableRouter = {
+  getChannel: (axis) => {
+    return axisInfo[axis].channel
+  },
+  getDefaultUnit: (axis) => {
+    return axisInfo[axis].defaultUnit
+  },
+  getOption: (axis) => {
+    return axisInfo[axis].option
+  },
+  getTable: (xAxis, xFunct, yAxis, yFunct) => {
+    var xTable = axisInfo[xAxis]
+    var yTable = axisInfo.None
+    if (yFunct === 'Linear' || yFunct === 'Log') {
+      yTable = axisInfo[yAxis]
+    } else if (yFunct === 'Integral') {
+      if (xAxis === 'Time' && yAxis === 'Current') {
+        yTable = axisInfo.Charge
+      } else if (xAxis === 'Current' && yAxis === 'Voltage') {
+        yTable = axisInfo.Power
+      } else if (xAxis === 'Voltage' && yAxis === 'Current') {
+        yTable = axisInfo.Power
+      }
+    } else if (yFunct === 'Differential') {
+      if (xAxis === 'Current' && yAxis === 'Voltage') {
+        yTable = axisInfo.Resistance
+      } else if (xAxis === 'Voltage' && yAxis === 'Current') {
+        yTable = axisInfo.Transconductance
+      }
+    }
+    return [xTable, yTable]
+  },
+  getFunct (xAxis, yAxis, axis) {
+    let xTable = ['']
+    let yTable = ['']
+    if (xAxis === 'Time') {
+      xTable = ['Linear']
+
+      if (yAxis === 'Current') {
+        yTable = ['Linear', 'Log', 'Integral']
+      } else {
+        yTable = ['Linear', 'Log']
+      }
+    } else {
+      xTable = ['Linear', 'Log']
+
+      if ((xAxis === 'Voltage' && yAxis === 'Current') || (xAxis === 'Current' && yAxis === 'Voltage')) {
+        yTable = ['Linear', 'Log', 'Integral', 'Differential']
+      } else {
+        yTable = ['Linear', 'Log']
+      }
+    }
+
+    if (axis === 'x') return xTable
+    else return yTable
+  },
+  // axisLabel formatter
+  autoTimeFormatter (val) {
+    let label = ''
+    const hour = parseInt(val / 3.6e9)
+    const minute = parseInt((val % 3.6e9) / 1000000 / 60)
+    const second = parseInt((val % 6e7) / 1000000)
+    const millisecond = parseInt((val % 1e6) / 1000)
+    if (hour > 0) {
+      label += hour + ' h '
+    }
+    if (minute > 0) {
+      label += minute + ' m '
+    }
+    if (second > 0) {
+      label += second + ' s '
+    }
+    if (millisecond > 0) {
+      label += millisecond + ' ms '
+    }
+    if (hour === 0 && minute === 0 && second === 0 && millisecond === 0) {
+      label += ' 0 ms '
+    }
+    return label
+  },
+}

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

@@ -1,171 +1,177 @@
 <template>
   <div>
     <div class="flex-container mb-2">
-      <va-input
-        v-model="this.specificIntegral"
-        :label="$t('Specific Integral')"
-      />
-      <div class="flex sm5 xl5 md5 xs5 px-0 py-0">
-        <va-button
-          v-if="!keyBoundary"
-          v-model="this.keyBoundary"
-          @click="switchBoundary()"
-          class="round-button px-1 py-1"
-        >
-          Draw
-        </va-button>
-        <va-button
-          v-if="keyBoundary"
-          v-model="this.keyBoundary"
-          @click="switchBoundary()"
-          class="round-button px-1 py-1"
-        >
-          Input
-        </va-button>
+      <div class="flex sm2 xl2 md2 xs2 px-0 py-0">
+        <p class="display-6" v-if="ifMeaning"> Area </p>
+      </div>
+      <div
+        class="row flex sm10 xl10 md10 xs10"
+        v-show="ifMeaning"
+      >
+        <div class="xs6 sm6 lg6 xl6">
+          <va-input
+            v-model="specificIntegral"
+            label="Integral value"
+            disabled
+          >
+            <p slot="append" style="margin-right: 0;" small>
+              {{ integralResult }}
+            </p>
+          </va-input>
+        </div>
+        <div class="xs2 sm2 lg2 xl2">
+          <va-select
+            v-model="integralUnit"
+            :options="integralOption"
+            @input="refreshScale"
+            style="width: 75px;"
+            class="va-select-without-margin"
+            noClear
+          />
+        </div>
       </div>
     </div>
 
-    <div v-if="!keyBoundary">
+    <div>
       <div class="flex-container mb-2">
-        <div class="flex sm2 xl2 md2 xs2 px-0 py-0" />
+        <div class="flex sm2 xl2 md2 xs2 px-0 py-0">
+          <p class="display-6"> Range </p>
+        </div>
         <va-input
-          v-model="this.boundary.x_start"
-          :label="$t('X Start')"
-        />
+          v-model="x_start"
+          label="X Start"
+          @focus="userEnter()"
+          @blur="userEnter()"
+          @keyup.enter="setBrushBoundary"
+        >
+          <p slot="append" style="margin-right: 0;" small>
+            {{ xUnit }}
+          </p>
+        </va-input>
         <va-input
-          v-model="this.boundary.x_end"
-          :label="$t('X End')"
-        />
+          v-model="x_end"
+          label="X End"
+          @focus="userEnter()"
+          @blur="userEnter()"
+          @keyup.enter="setBrushBoundary"
+        >
+          <p slot="append" style="margin-right: 0;" small>
+            {{ xUnit }}
+          </p>
+        </va-input>
       </div>
       <div class="flex-container mb-2">
-        <div class="flex sm2 xl2 md2 xs2 px-0 py-0" />
+        <div class="flex sm2 xl2 md2 xs2 px-0 py-0">
+        </div>
         <va-input
-          v-model="this.boundary.y_start"
-          :label="$t('Y Start')"
-        />
+          v-model="y_start"
+          label="Y Start"
+          @focus="userEnter()"
+          @blur="userEnter()"
+          @keyup.enter="setBrushBoundary"
+        >
+          <p slot="append" style="margin-right: 0;" small>
+            {{ yUnit }}
+          </p>
+        </va-input>
         <va-input
-          v-model="this.boundary.y_end"
-          :label="$t('Y End')"
-        />
-      </div>
-      <div class="flex-container mb-2">
-        <div class="flex sm2 xl2 md2 xs2 px-0 py-0" />
-        <va-button class="mb-2" @click="setBrushBoundary" small>
-          Set Integral Boundary
-        </va-button>
-      </div>
-    </div>
-
-    <div v-if="keyBoundary">
-      <div class="flex-container mb-2">
-        <div class="flex sm2 xl2 md2 xs2 px-0 py-0" />
-        <va-input
-          @keyup.enter="setBrushBoundary()"
-          @blur="setBrushBoundary()"
-          v-model="boundaryXstart"
-          :label="$t('X Start')"
-        />
-        <va-input
-          @keyup.enter="setBrushBoundary()"
-          @blur="setBrushBoundary()"
-          v-model="boundaryXend"
-          :label="$t('X End')"
-        />
-      </div>
-      <div class="flex-container mb-2">
-        <div class="flex sm2 xl2 md2 xs2 px-0 py-0" />
-        <va-input
-          @keyup.enter="setBrushBoundary()"
-          @blur="setBrushBoundary()"
-          v-model="boundaryYstart"
-          :label="$t('Y Start')"
-        />
-        <va-input
-          @keyup.enter="setBrushBoundary()"
-          @blur="setBrushBoundary()"
-          v-model="boundaryYend"
-          :label="$t('Y End')"
-        />
-      </div>
-      <div class="flex-container mb-2">
-        <div class="flex sm2 xl2 md2 xs2 px-0 py-0" />
-        <va-button class="mb-2" @click="setBrushBoundary" small>
-          Set Integral Boundary
-        </va-button>
+          v-model="y_end"
+          label="Y End"
+          @focus="userEnter()"
+          @blur="userEnter()"
+          @keyup.enter="setBrushBoundary"
+        >
+          <p slot="append" style="margin-right: 0;" small>
+            {{ yUnit }}
+          </p>
+        </va-input>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-
+import { tableRouter } from '@/components/analysis/replay/toolbox/EliteReplayTable'
+import configRouter from '@/components/analysis/replay/toolbox/configTable'
 export default {
   name: 'SpecificIntegral',
-  components: {
-  },
-  computed: {
-    displayType () {
-      return {
-        x: this.axisXLabelScale.description === 'Log' ? 'log' : 'value',
-        y: this.axisYLabelScale.description === 'Log' ? 'log' : 'value',
-      }
-    },
-  },
-  props: {
-  },
-  created () {
-  },
   data () {
     return {
       specificIntegral: 0,
-      boundary: {},
-      boundaryXstart: 0,
-      boundaryXend: 0,
-      boundaryYstart: 0,
-      boundaryYend: 0,
-      keyBoundary: false,
+      x_start: 0,
+      x_end: 0,
+      y_start: 0,
+      y_end: 0,
+      xUnit: '',
+      yUnit: '',
+      xScale: '',
+      yScale: '',
+      integralResult: '',
+      integralUnit: '',
+      integralOption: [],
+      integralTable: {},
+      integralScale: '',
+      ifMeaning: true,
+      ifUserKeyIn: false,
+      tableRouter,
+      configRouter,
     }
   },
-  mqtt: {
-  },
   methods: {
+    refreshScale () {
+      this.integralScale = this.configRouter.getUnitScale(this.integralResult)[this.integralUnit]
+    },
+    userEnter () {
+      this.ifUserKeyIn = !this.ifUserKeyIn
+    },
     getSpecificIntegral (specificIntegral, boundary) {
-      this.specificIntegral = specificIntegral
-      this.specificIntegral = (this.specificIntegral * 1e-12).toFixed(4) + 'mW'
-      // this.specificIntegral = (this.specificIntegral * 1e-15).toFixed(4) + 'W'
-      if (!this.keyBoundary) {
-        this.boundary = boundary
+      this.specificIntegral = specificIntegral / this.integralScale
+
+      if (!this.ifUserKeyIn) {
+        this.x_start = (boundary.x_start / this.xScale).toFixed(3)
+        this.x_end = (boundary.x_end / this.xScale).toFixed(3)
+        this.y_start = (boundary.y_start / this.yScale).toFixed(3)
+        this.y_end = (boundary.y_end / this.yScale).toFixed(3)
       }
     },
-    switchBoundary () {
-      this.keyBoundary = !this.keyBoundary
-      // if (this.boundary !== {})
-      this.boundaryXstart = this.boundary.x_start
-      this.boundaryXend = this.boundary.x_end
-      this.boundaryYstart = this.boundary.y_start
-      this.boundaryYend = this.boundary.y_end
-    },
     setBrushBoundary () {
+      if (isNaN(this.x_start)) this.x_start = 0
+      if (isNaN(this.x_end)) this.x_start = 0
+      if (isNaN(this.xy_start)) this.y_start = 0
+      if (isNaN(this.y_end)) this.y_end = 0
       var boundary = {
-        x_start: Number(this.boundaryXstart),
-        x_end: Number(this.boundaryXend),
-        y_start: Number(this.boundaryYstart),
-        y_end: Number(this.boundaryYend),
+        x_start: Number(this.x_start) * this.xScale,
+        x_end: Number(this.x_end) * this.xScale,
+        y_start: Number(this.y_start) * this.yScale,
+        y_end: Number(this.y_end) * this.yScale,
       }
       this.$emit('setBrushBoundary', boundary)
     },
-  },
-  async mounted () {
-  },
-  destroyed () {
-  },
-  watch: {
+    setDisplayParam (xAxis, xUnit, yAxis, yUnit) {
+      const xScaleOption = this.configRouter.getUnitScale(xAxis)
+      const yScaleOption = this.configRouter.getUnitScale(yAxis)
+      const integralResult = this.configRouter.getFSM(xAxis, yAxis).Integral
+      this.xUnit = xUnit
+      this.yUnit = yUnit
+      this.xScale = xScaleOption[xUnit]
+      this.yScale = yScaleOption[yUnit]
+      this.integralResult = integralResult
+      this.integralUnit = this.configRouter.getUnit(integralResult)
+      this.integralOption = this.configRouter.getUnitOption(integralResult)
+      this.integralScale = this.configRouter.getUnitScale(integralResult)[this.integralUnit]
+    },
+    refreshDisplayParam (xAxis, xUnit, yAxis, yUnit) {
+      const xScaleOption = this.configRouter.getUnitScale(xAxis)
+      const yScaleOption = this.configRouter.getUnitScale(yAxis)
+      this.xUnit = xUnit
+      this.yUnit = yUnit
+      this.xScale = xScaleOption[xUnit]
+      this.yScale = yScaleOption[yUnit]
+    },
+    checkMeaning (xAxis, yAxis) {
+      const functOption = this.configRouter.getFunctOption(xAxis, yAxis)
+      this.ifMeaning = functOption.includes('Integral')
+    },
   },
 }
 </script>
-
-<style lang="scss">
-  /* .round-button {
-    border-radius: 12px;
-  } */
-</style>

src/components/analysis/replay/toolbox/configTable.js

@@ -0,0 +1,405 @@
+// object saving library name mapping table
+const libraryNameMappingTable = {
+  EliteZM15: 'EliteEDC',
+  'Elite_EDC_1.4': null,
+  'Elite_EDC_1.5': 'EliteEDC',
+  'Elite_EDC_1.5re': 'EliteEDC',
+  'Elite_EDC_1.5r2': 'EliteEDC',
+  'Elite_BAT_1.0': 'EliteEDC',
+  'Elite_EIS_1.0': 'EliteEIS',
+  'Elite_EIS_1.1': 'EliteEIS',
+  'Elite_EIS_MINI_1.0': 'EliteEIS',
+  'Elite_TRIG_0.1': null,
+  'Elite_MEGAFLY_0.1': null,
+}
+
+// object saving setting type mapping table
+const settingTypeMappingTable = {
+  EliteEDC: {
+    Time: {
+      description: 'Time',
+      channel: undefined,
+    },
+    Elite: {
+      1: {
+        description: 'Current',
+        channel: 0,
+      },
+      2: {
+        description: 'Voltage',
+        channel: 1,
+      },
+      3: {
+        description: 'Resistance',
+        channel: 2,
+      },
+      // 4: {
+      //   description: 'Cycle',
+      //   channel: 3,
+      // },
+    },
+  },
+  EliteEIS: {
+    Time: {
+      description: 'Time',
+      channel: undefined,
+    },
+    Elite: {
+      1: {
+        description: 'Current',
+        channel: 0,
+      },
+      2: {
+        description: 'Voltage',
+        channel: 1,
+      },
+      3: {
+        description: 'Resistance',
+        channel: 2,
+      },
+    },
+    EliteEIS: {
+      3: {
+        description: 'Frequency',
+        channel: 2,
+      },
+      5: {
+        description: 'Z_imag',
+        channel: 4,
+      },
+      6: {
+        description: 'Z_real',
+        channel: 5,
+      },
+      7: {
+        description: 'Impedance',
+        channel: 6,
+      },
+      8: {
+        description: 'Phase',
+        channel: 7,
+      },
+      9: {
+        description: 'Current',
+        channel: 8,
+      },
+      10: {
+        description: 'Gain_Level',
+        channel: 9,
+      },
+    },
+  },
+}
+
+// object saving unit information mapping table
+const unitInfoMappingTable = {
+  // Time
+  Time: {
+    name: 'Time',
+    channel: -1,
+    option: {
+      auto: 1,
+      us: 1,
+      ms: 1e3,
+      s: 1e6,
+      min: 60 * 1e6,
+      hour: 3600 * 1e6,
+    },
+    defaultUnit: 'auto',
+    downloadUnit: 'auto',
+  },
+  // Elite
+  Current: {
+    name: 'Current',
+    channel: 0,
+    option: {
+      nA: 1,
+      uA: 1e3,
+      mA: 1e6,
+      A: 1e9,
+    },
+    defaultUnit: 'mA',
+    downloadUnit: 'A',
+  },
+  Voltage: {
+    name: 'Voltage',
+    channel: 1,
+    option: {
+      uV: 1,
+      mV: 1e3,
+      V: 1e6,
+    },
+    defaultUnit: 'mV',
+    downloadUnit: 'V',
+  },
+  Resistance: {
+    name: 'Resistance',
+    channel: 2,
+    option: {
+      mΩ: 1,
+      Ω: 1e3,
+      kΩ: 1e6,
+      MΩ: 1e9,
+    },
+    defaultUnit: 'Ω',
+    downloadUnit: 'Ω',
+  },
+  // Elite after Integral
+  Charge: {
+    name: 'Charge',
+    channel: -1,
+    option: {
+      nAh: 3600 * 1e6,
+      uAh: 1600 * 1e9,
+      mAh: 3600 * 1e12,
+      Ah: 3600 * 1e15,
+    },
+    defaultUnit: 'mAh',
+    downloadUnit: 'mAh',
+  },
+  Power: {
+    name: 'Power',
+    channel: -1,
+    option: {
+      mW: 1e12,
+      W: 1e15,
+      kW: 1e18,
+    },
+    defaultUnit: 'W',
+    downloadUnit: 'W',
+  },
+  // Elite after Differential
+  Transconductance: {
+    name: 'Transconductance',
+    channel: -1,
+    option: {
+      'mA/V': 1,
+      'A/V': 1e3,
+      'kA/V': 1e6,
+    },
+    defaultUnit: 'A/V',
+    downloadUnit: 'A/V',
+  },
+  // EliteEIS
+  Frequency: {
+    name: 'Frequency',
+    chanel: 2,
+    option: {
+      mHz: 1,
+      Hz: 1e3,
+      kHz: 1e6,
+      MHz: 1e9,
+    },
+    downloadUnit: 'Hz',
+    defaultUnit: 'Hz',
+  },
+  Z_imag: {
+    name: 'Z_imag',
+    chanel: 4,
+    option: {
+      mΩ: 1e-3,
+      Ω: 1,
+      kΩ: 1e3,
+      MΩ: 1e6,
+    },
+    downloadUnit: 'Ω',
+    defaultUnit: 'Ω',
+  },
+  Z_real: {
+    name: 'Z_real',
+    chanel: 5,
+    option: {
+      mΩ: 1e-3,
+      Ω: 1,
+      kΩ: 1e3,
+      MΩ: 1e6,
+    },
+    downloadUnit: 'Ω',
+    defaultUnit: 'Ω',
+  },
+  Impedance: {
+    name: 'Impedance',
+    chanel: 6,
+    option: {
+      mΩ: 1e-3,
+      Ω: 1,
+      kΩ: 1e3,
+      MΩ: 1e6,
+    },
+    downloadUnit: 'Ω',
+    defaultUnit: 'Ω',
+  },
+  Phase: {
+    name: 'Phase',
+    chanel: 7,
+    option: {
+      '°': 1,
+    },
+    downloadUnit: '°',
+    defaultUnit: '°',
+  },
+  Gain_Level: {
+    name: 'Gain Level',
+    chanel: 9,
+    option: {
+      '#': 1,
+    },
+    downloadUnit: '#',
+    defaultUnit: '#',
+  },
+  undefined: {
+    name: 'not support',
+    channel: -1,
+    option: {
+      none: 1,
+    },
+    defaultUnit: 'none',
+    downloadUnit: 'none',
+  },
+}
+
+// object saving specific functional information mapping table
+const functInfoMappingTable = {
+  // Time
+  Time: {
+  },
+  // Elite
+  Current: {
+    Time: {
+      Linear: 'Current',
+      Log: 'Current',
+      Integral: 'Charge',
+    },
+    Voltage: {
+      Linear: 'Current',
+      Log: 'Current',
+      Integral: 'Power',
+      Differential: 'Impedance',
+    },
+  },
+  Voltage: {
+    Current: {
+      Linear: 'Voltage',
+      Log: 'Voltage',
+      Integral: 'Power',
+      Differential: 'Transconductance',
+    },
+  },
+  Resistance: {
+  },
+  // EliteEIS
+  Frequency: {
+  },
+  Z_imag: {
+  },
+  Z_real: {
+  },
+  Impedance: {
+  },
+  Phase: {
+  },
+  Gain_Level: {
+  },
+  None: {
+  },
+}
+
+/**
+ * return axis description and channel by library, type and index
+ * @param {String} library
+ * @param {String} type
+ * @param {String} index
+ * @returns {Object} : configuration
+ */
+function getAxis (library, type, index) {
+  // some physical property || Time
+  return settingTypeMappingTable[libraryNameMappingTable[library]][type][index] || settingTypeMappingTable[libraryNameMappingTable[library]][type]
+}
+
+/**
+ * retrun default unit by physical property
+ * @param {String} axis
+ * @returns {Object} : unit
+ */
+function getUnit (axis) {
+  return unitInfoMappingTable[axis].defaultUnit
+}
+
+/**
+ * return axis option by library, type
+ * @param {String} library
+ * @param {String} type
+ * @param {String} coordinate
+ * @returns {Object} : axisOption
+ */
+function getAxisOption (library, type, coordinate) {
+  if (type === 'Time') type = 'Elite'
+
+  const axisOption = Object.values(settingTypeMappingTable[libraryNameMappingTable[library]][type]).map((setting) => {
+    return setting
+  })
+  if (coordinate === 'x') {
+    axisOption.unshift({
+      description: 'Time',
+      channel: undefined,
+    })
+  }
+  return axisOption
+}
+
+/**
+ * retrun option of unit by physical property
+ * @param {String} axis
+ * @returns {Object} : unitOption
+ */
+function getUnitOption (axis) {
+  return Object.keys(unitInfoMappingTable[axis].option)
+}
+
+/**
+ * retrun a dictionary of scale corresponding to unit by physical property
+ * @param {String} axis
+ * @returns {Object} : unitScale
+ */
+function getUnitScale (axis) {
+  return unitInfoMappingTable[axis].option
+}
+
+/**
+ * retrun option of functionl by both axis physical property
+ * @param {String} xAxis
+ * @param {String} yAxis
+ * @param {String} coordinate
+ * @returns {Object} : functOption
+ */
+function getFunctOption (xAxis, yAxis, coordinate) {
+  if (coordinate === 'x') return ['Linear', 'Log']
+  else if (functInfoMappingTable[yAxis] === undefined) return ['Linear', 'Log']
+  else if (functInfoMappingTable[yAxis][xAxis] === undefined) return ['Linear', 'Log']
+  else return Object.keys(functInfoMappingTable[yAxis][xAxis])
+}
+
+/**
+ * retrun functional correponding physics property
+ * @param {String} xAxis
+ * @param {String} yAxis
+ * @returns {Object} : functOption
+ */
+function getFSM (xAxis, yAxis) {
+  return functInfoMappingTable[yAxis][xAxis] || {
+    Linear: yAxis,
+    Log: yAxis,
+  }
+}
+
+const configRouter = {
+  getAxis,
+  getUnit,
+  getAxisOption,
+  getUnitOption,
+  getUnitScale,
+  getFunctOption,
+  getFSM,
+}
+
+export default configRouter

src/components/devices/DevicesOverview.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="devices-overview">
-
     <div >
       <va-card
         v-for="controller in controllerList" :key="controller.id"
@@ -518,6 +517,7 @@ export default {
   async mounted () {
     await taskInfo.updateTaskInfo()
     await this.getControllerList()
+    this.GLOBAL.refreshCache()
 
     this.pageMqttSub()
     this.pageInitPub()

src/components/download/Download.vue

@@ -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: 'csv',
+      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>

src/components/download/DownloadOffline.vue

@@ -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: 'csv',
+      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 () {
   },

src/components/file/File.vue

@@ -68,7 +68,7 @@ export default {
           this.$refs.file_ref.currentInfo = initCollection.data[0]
 
           const folders = await api.collection.getByParent('folder', initCollection.data[0].id)
-          const files = await api.meta.getAttrByParent('folder', initCollection.data[0].id, 'id-path-name-parent-description-size-time_duration-uuid-device-channels-created_at')
+          const files = await api.meta.getAttrByParent('folder', initCollection.data[0].id, 'id-path-name-parent-description-size-time_duration-uuid-device-channels-parameter_set-created_at-project')
           file.updateFileList(folders)
           file.updateFileList(files)
 

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

@@ -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"
@@ -33,6 +38,7 @@
         editFile()
         showModal.editFile = false
       }"
+      :noOutsideDismiss="true"
       tabindex="0"
     >
       <va-input
@@ -47,6 +53,7 @@
         removable
       />
     </va-modal>
+    <!-- Delete File Modal-->
     <va-modal
       v-model="showModal.deleteFile"
       size="small"
@@ -63,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"
@@ -80,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">
@@ -115,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 -->
@@ -159,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
@@ -178,6 +191,9 @@
           />
           {{ props.rowData.name }}
         </template>
+        <template slot="parameter_set" slot-scope="props">
+          {{ getWorkingMode(props.rowData.device, props.rowData.parameter_set) }}
+        </template>
         <template slot="created_at" slot-scope="props">
           {{transDate(props.rowData.created_at)}}
         </template>
@@ -191,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"
@@ -200,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>
@@ -233,18 +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: [],
@@ -281,6 +304,7 @@ export default {
         path: '',
         name: '',
         metaID: '',
+        project: null,
       },
 
       styleList: {
@@ -291,6 +315,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: {
@@ -315,6 +351,13 @@ export default {
         //   titleClass: 'text-center',
         //   dataClass: 'text-center',
         // },
+        {
+          name: '__slot:parameter_set',
+          title: 'Working Mode',
+          width: '10%',
+          titleClass: 'text-center',
+          dataClass: 'text-center',
+        },
         {
           name: '__slot:created_at',
           title: 'create time',
@@ -360,6 +403,9 @@ export default {
         }
       })
     },
+    selectedNumber () {
+      return this.fileLists.filter(file => file.checked).length
+    },
     selected () {
       return this.fileLists.filter(file => file.checked)
     },
@@ -368,20 +414,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)
@@ -404,7 +458,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
@@ -416,7 +561,7 @@ export default {
 
         // call getfolder api and update
         const folders = await api.collection.getByParent('folder', info.id)
-        const files = await api.meta.getAttrByParent('folder', info.id, 'id-path-name-parent-description-size-time_duration-uuid-device-channels-created_at')
+        const files = await api.meta.getAttrByParent('folder', info.id, 'id-path-name-parent-description-size-time_duration-uuid-device-channels-parameter_set-created_at-project')
         file.updateFileList(folders)
         file.updateFileList(files)
 
@@ -436,7 +581,7 @@ export default {
         this.currentInfo = item
         // call getfolder api and update
         const folders = await api.collection.getByParent('folder', item.id)
-        const files = await api.meta.getAttrByParent('folder', item.id, 'id-path-name-parent-description-size-time_duration-uuid-device-channels-created_at')
+        const files = await api.meta.getAttrByParent('folder', item.id, 'id-path-name-parent-description-size-time_duration-uuid-device-channels-parameter_set-created_at-project')
         file.updateFileList(folders)
         file.updateFileList(files)
 
@@ -457,7 +602,7 @@ export default {
       if (initCollection.data.length === 1) {
         this.currentInfo = initCollection.data[0]
         const folders = await api.collection.getByParent('folder', initCollection.data[0].id)
-        const files = await api.meta.getAttrByParent('folder', initCollection.data[0].id, 'id-path-name-parent-description-size-time_duration-uuid-device-channels-created_at')
+        const files = await api.meta.getAttrByParent('folder', initCollection.data[0].id, 'id-path-name-parent-description-size-time_duration-uuid-device-channels-parameter_set-created_at-project')
         file.updateFileList(folders)
         file.updateFileList(files)
         this.fileLists = file.getFileList()
@@ -517,56 +662,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
@@ -578,21 +734,43 @@ export default {
     removeFileFromList: function () {
     },
     fillDeleteInfo: function (info) {
+      console.log('info', info)
       if (info.type === 'folder') {
+        this.deleteInfo.metaID = undefined
         this.deleteInfo.folderID = info.id
         this.deleteInfo.name = info.name
+        this.deleteInfo.project = undefined
       } else {
         this.deleteInfo.path = info.path
         this.deleteInfo.name = info.name
         this.deleteInfo.metaID = info.id
+        this.deleteInfo.project = info.project
       }
     },
     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) {
+        this.deleteInfo.project = meta.project
+        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
+      const subjectResponse = await api.subjectData.get({ meta: this.deleteInfo.project })
+      console.log('subject id', this.deleteInfo.project, subjectResponse.data)
+      if (subjectResponse.status === 200) {
+        for (const subject of subjectResponse.data) {
+          await api.subjectData.update(subject.id, { deleted: true })
+          await api.subjectData.clearDel()
+        }
+      }
+      await api.meta.update(metaID, { deleted: true })
       await api.meta.clearDel()
     },
     deleteFileConfirm: function (info) {
@@ -616,10 +794,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',
@@ -635,7 +826,7 @@ export default {
       this.showToast('deleting file...', {
         position: 'bottom-right',
       })
-      this.deleteSelected()
+      await this.deleteSelected()
     },
     inputFieldReset: function (info) {
       info.name = ''
@@ -663,7 +854,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-project')
         file.updateFileList(folders)
         file.updateFileList(files)
 
@@ -673,25 +864,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]
@@ -703,20 +936,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) {
@@ -741,16 +980,17 @@ export default {
       }
     },
     replay: function (meta) {
+      const href = location.href.split('/')[2]
       if (meta.device.library_name.includes('Neulive') === true) {
         // window.open('http://' + location.href.split('/')[2].split(':')[0] + '/#/admin/data-replay/' + meta.id)
         this.$router.push({
           path: '/admin/data-replay/' + meta.id,
         })
       } else if (meta.device.library_name.includes('Elite') === true) {
-        // window.open('http://' + location.href.split('/')[2].split(':')[0] + '/#/admin/data-replay/elite/' + meta.id)
-        this.$router.push({
-          path: '/admin/data-replay/elite/' + meta.id,
-        })
+        window.open('http://' + href + '/#/admin/data-replay/elite/' + meta.id)
+        // this.$router.push({
+        //   path: '/admin/data-replay/elite/' + meta.id,
+        // })
       }
     },
     spike: function (meta) {
@@ -760,13 +1000,32 @@ export default {
         })
       }
     },
+    getWorkingMode: function (device, parameterSet) {
+      try {
+        if (parameterSet) {
+          return configTable.getModeConfig(device.library_name, parameterSet.MODE).name
+        }
+        return ''
+      } catch (e) {
+        console.log('e', e)
+        return ''
+      }
+    },
   },
   async mounted () {
     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>

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

@@ -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>

src/components/project/Project.vue

@@ -4,17 +4,22 @@
       <project-manager/>
     </div>
     <div
-      :class="(taskViewPanel.show || projectManagerPanel.show)
-        ? (taskViewPanel.show && projectManagerPanel.show)
-          ? cardStyle.small
-          : cardStyle.medium
+      :class="(projectManagerPanel.show)
+        ? cardStyle.medium
         : cardStyle.large
       ">
-      <project-view @start_project="startProject($event)" @stop_project="stopProject($event)" @save_project="saveProject($event)"/>
+      <project-view @start_project="startProject($event)" @stop_project="stopProject($event)" @save_project="saveProject($event)" @detect="detect"/>
     </div>
-    <div :class="cardStyle.small" v-show="taskViewPanel.show">
+    <slide-out
+      dock="right"
+      :mask-color="'rgba(0, 0, 0, 0)'"
+      :visible.sync="taskViewPanel.show"
+      :title="(taskViewPanel.type === 1) ? 'Device' : (taskViewPanel.type === 3) ? 'Condition' : (taskViewPanel.type === 4) ? 'Parameter' : ''"
+      @closed="onClosing"
+      resizable
+    >
       <project-task/>
-    </div>
+    </slide-out>
   </div>
 </template>
 
@@ -22,7 +27,7 @@
 import ProjectManager from '@/components/project/manager/ProjectManager'
 import ProjectView from '@/components/project/view/ProjectView'
 import ProjectTask from '@/components/project/task/ProjectTask'
-import { mapActions } from 'vuex'
+import { mapActions, mapGetters } from 'vuex'
 import { mapFields } from 'vuex-map-fields'
 import types from '@/store/modules/project/types'
 import { taskInfo } from '@/data/task/TaskInfo'
@@ -35,6 +40,9 @@ export default {
     ProjectTask,
   },
   computed: {
+    ...mapGetters('project', [
+      types.project.getSelect,
+    ]),
     ...mapFields('project', [
       'projectConfigList',
       'runningProjectList',
@@ -47,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',
       },
     }
@@ -74,7 +82,7 @@ export default {
     },
     async '+/get_running_project/+' (data, topic) {
       this.runningProjectList.length = 0
-      const runningProjects = JSON.parse(String.fromCharCode.apply(null, data)).data
+      const runningProjects = JSON.parse(new TextDecoder().decode(data)).data
       this.runningProjectList.push(...runningProjects)
     },
     async '+/broadcast' (data, topic) {
@@ -93,6 +101,9 @@ export default {
     },
   },
   methods: {
+    onClosing: async function () {
+      await this.saveProject(this.getSelectProject)
+    },
     pageToast: function (mes) {
       this.showToast(
         mes,
@@ -125,16 +136,28 @@ export default {
       this.mqttUnSub(id + '/get_running_project/+')
     },
     initPage: async function () {
+      await this.initProject()
       await taskInfo.updateTaskInfo()
       this.pageMqttSub(taskInfo.getTaskInfo().controllerID)
     },
     startProject: function (project) {
-      console.log('start_project', project)
-      console.log('taskInfo.getTaskInfo().controllerID', taskInfo.getTaskInfo().controllerID)
-      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
-        header: 'run_project/0',
-        project: project,
-      }))
+      let deviceReady = true
+      for (const device of Object.values(this.getSelectProject.device)) {
+        if (device.pairStatus !== 1) {
+          if (device.pair === null) {
+            window.alert('Device ' + device.name + ' is not connected yet.')
+          } else {
+            window.alert('Device ' + device.pair + ' is not connected yet.')
+          }
+          deviceReady = false
+        }
+      }
+      if (deviceReady === true) {
+        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+          header: 'run_project/0',
+          project: project,
+        }))
+      }
     },
     stopProject: function (project) {
       this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
@@ -144,38 +167,51 @@ 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({
+        header: 'device_instruction/0',
+        device: device,
+        instruction: 'VIS_DEVICE_DETECT',
+      }))
+      setTimeout(() => {
+        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+          header: 'device_instruction/0',
+          device: device,
+          instruction: 'VIS_DEVICE_DONE',
+        }))
+      }, 5000)
     },
 
     ...mapActions('project',
       [
+        types.project.init,
         types.project.update,
+        types.project.addDevice,
       ],
     ),
   },
   async mounted () {
     await this.initPage()
-    console.log('controllerID', taskInfo.getTaskInfo().controllerID)
+    // console.log('controllerID', taskInfo.getTaskInfo().controllerID)
 
     /** get connect device list */
     this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
       header: 'get_device_info_all/0',
     }))
     const project = await this.API.project.getAll()
+    // console.log('project: ', project)
     this.projectConfigList.length = 0
     this.projectConfigList.push(...project.data)
+    // console.log('projectConfigList: ', this.projectConfigList)
 
     this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
       header: 'get_running_project/0',
     }))
   },
+  destroyed () {
+    this.projectManagerPanel.show = true
+  },
 }
 </script>
 

src/components/project/manager/ProjectManager.vue

@@ -1,13 +1,28 @@
 <template>
   <div>
-    <va-card style="height: 90vh; overflow: auto; display: block;">
+    <va-card style="height: 88vh; overflow: auto; display: block;">
       <template slot="header">
-        <va-icon name="fa fa-bluetooth-b mr-3" color="primary"/>
-        <h5 class="mt-0 mb-0">PROJECTS</h5>
+        <div class="row">
+          <div class="flex d-flex xs5 sm5 lg5 xl5">
+            <p class="project-view-header">PROJECTS</p>
+          </div>
+          <div class="flex xs7 sm7 lg7 xl7" style="text-align: right;">
+            <img class="img-vertical-center" src="@/assets/img/project/menu_close.svg" @click="closePanel">
+          </div>
+        </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>
@@ -18,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'
@@ -39,17 +54,23 @@ export default {
     RunningProjectManagerList,
   },
   computed: {
+    ...mapGetters('project', [
+      'getSelectProject',
+    ]),
+
     ...mapFields('project', [
       'lockMode',
       'projectList',
       'projectConfigList',
       'runningProjectList',
+      'projectManagerPanel',
     ]),
   },
   data () {
     return {
       tabValue: 0,
       tabTitles: ['CONFIG', 'RUNNING'],
+      filterText: '',
     }
   },
   methods: {
@@ -61,11 +82,56 @@ export default {
     ...mapActions('project',
       [
         types.project.create,
+        types.project.copy,
+        types.project.select,
+        types.project.delete,
       ],
     ),
+    closePanel: function () {
+      this.projectManagerPanel.show = !this.projectManagerPanel.show
+    },
   },
   mounted () {
     this.projectList = this.projectConfigList
   },
 }
 </script>
+
+<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>

src/components/project/manager/ProjectManagerList.vue

@@ -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,12 +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-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>
@@ -32,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 () {
@@ -42,19 +61,53 @@ 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',
       [
+        types.project.copy,
         types.project.select,
         types.project.delete,
       ],
@@ -64,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>

src/components/project/task/ProjectTask.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <va-card style="height: 90vh; overflow: auto;">
+    <va-card style="height: 88vh; overflow: auto;">
       <project-task-config></project-task-config>
     </va-card>
   </div>

src/components/project/task/config/ProjectTaskConfig.vue

@@ -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>

src/components/project/task/config/ProjectTaskConfigCondition.vue

@@ -1,46 +1,18 @@
 <template>
   <div class="flex sm12 xl12 md12 xs12">
-    <div class="task-config__header-separator mb-1">
-      <div class="task-config__header-text">
-        <span>Action &#38; Condition</span>
+    <!-- <span>Condition</span> -->
+    <div v-for="(condition, key) in conditionObj" :key="key">
+      <!-- <div v-if="key === 'cycle' || key === 'cycle_next'" class="flex d-flex align--center"> -->
+      <div class="flex d-flex align--center">
+        <va-checkbox v-model="condition.select"></va-checkbox>
+        <span class="mr-1">{{ condition.prefix }}</span>
+        <input style="width: 100px;" class="mr-1" :type="condition.type" v-model="condition.value"/>
+        <span>{{ condition.suffix }}</span>
       </div>
     </div>
-    <div>
-      <!-- <div v-for="(action, actionKey) in this.getSelectTask.action" :key="actionKey">
-        {{ getDeviceProject(action.target).name }} {{ action.type }} {{ getConditionTask(action.condition[0]).value }}
-      </div> -->
-    </div>
-    <span>Device</span>
-    <div class="flex d-flex" v-if="Object.keys(registeredDevice).length > 0">
-      <div v-for="(device, deviceKey) in registeredDevice" :key="deviceKey">
-        <va-button @click="selectDevice(deviceKey)" small>{{ device.name }}</va-button>
-      </div>
-    </div>
-    <div align="center" v-else>
-      No registered device found.
-    </div>
-    <div v-if="settingStep >= 1">
-      <span>Action</span>
-      <div class="flex d-flex">
-        <div v-for="action in actionTemplate" :key="action">
-          <va-button color="info" @click="selectAction(action)" small>{{ action }}</va-button>
-        </div>
-      </div>
-    </div>
-    <div v-if="settingStep >= 2">
-      <span>Condition</span>
-      <div v-for="(condition, key) in conditionObj" :key="key">
-        <div class="flex d-flex align--center">
-          <va-checkbox v-model="condition.select"></va-checkbox>
-          <span class="mr-1">{{ condition.prefix }}</span>
-          <input class="mr-1" :type="condition.type" v-model="condition.value"/>
-          <span>{{ condition.suffix }}</span>
-        </div>
-      </div>
-      <div align="right">
-        <va-button color="warning" @click="reset" small>Reset</va-button>
-        <va-button color="success" @click="save" small>Save</va-button>
-      </div>
+    <div align="right">
+      <va-button color="warning" @click="reset" small>Reset</va-button>
+      <va-button color="success" @click="save" small>Save</va-button>
     </div>
   </div>
 </template>
@@ -55,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 () {
@@ -72,15 +50,18 @@ export default {
       types.project.getSelect,
       types.project.getDevice,
       types.project.getAllDevice,
+      types.project.getDeviceShowName,
     ]),
 
     ...mapFields('project', [
       'taskSelectKey',
+      'taskViewPanel',
+      'deviceSelectKey',
     ]),
   },
   data () {
     return {
-      settingStep: 0,
+      settingStep: 1,
 
       registeredDevice: {},
       deviceSelect: '',
@@ -91,10 +72,17 @@ export default {
 
       conditionTemplate: newConditionTemplate(),
       conditionList: [],
-
+      taskOptions: {},
+      taskOptionsKeys: [],
+      project: {},
+      device: {},
+      task: {},
     }
   },
   methods: {
+    closePanel: function () {
+      this.taskViewPanel.show = !(this.taskViewPanel.show)
+    },
     selectDevice: function (deviceKey) {
       this.settingStep = 1
       this.deviceSelect = deviceKey
@@ -127,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)) {
@@ -146,21 +134,37 @@ export default {
       this.setActionTask({ action: newAction })
       this.reset()
     },
+    updateTaskOptions: function () {
+      for (var idx = 0; idx < this.project.task.length; idx++) {
+        this.taskOptions[this.project.task[idx].name] = this.project.task[idx].uuid
+      }
+      this.taskOptionsKeys = Object.keys(this.taskOptions)
+    },
 
     ...mapActions('project', [
       types.task.setCondition,
       types.task.setAction,
+      types.task.setCycle,
     ]),
   },
   mounted () {
-    const project = this.getSelectProject
-    const device = this.getAllDeviceProject
-    const task = this.getSelectTask
-
-    console.log('project', project)
-    console.log('task', task)
-
-    this.registeredDevice = device
+    this.project = this.getSelectProject
+    this.device = this.getAllDeviceProject
+    this.deviceSelect = this.deviceSelectKey
+    this.task = this.getSelectTask
+    for (var idx = 0; idx < this.project.task.length; idx++) {
+      this.taskOptions[this.project.task[idx].name] = this.project.task[idx].uuid
+    }
+    this.taskOptionsKeys = Object.keys(this.taskOptions)
+    this.registeredDevice = this.device
+  },
+  watch: {
+    // refresh parameter when click different task's parameter
+    deviceSelectKey: {
+      handler: function () {
+        this.deviceSelect = this.deviceSelectKey
+      },
+    },
   },
 }
 </script>

src/components/project/task/config/ProjectTaskConfigDevice.vue

@@ -1,48 +1,54 @@
 <template>
   <div class="flex sm12 xl12 md12 xs12">
-    <div class="task-config__header-separator mb-1">
-      <div class="task-config__header-text">
-        <span >Device</span>
-      </div>
-    </div>
     <div>
-      <va-list fit class="mb-2">
-        <va-item v-for="(device, index) in getSelectProject.device" :key="index" >
-          <va-item-section side>
-            <va-checkbox
-              :value="device.isSelect"
-              :arrayValue="(taskSelectKey != undefined)? String(taskSelectKey) : '-1'"
-              @input="selectDevice($event, device, index)"
-              ref="checkbox_ref"
-            />
-          </va-item-section>
+      <va-list fit class="mb-2 pb-0">
+        <va-list-label>
+          Register
+        </va-list-label>
 
-          <va-item-section avatar class="ml-0">
-            <va-avatar style="border-radius: 0;">
-              <img
-                src='@/assets/img/elite_img.png' :alt="device.name">
-            </va-avatar>
-          </va-item-section>
+        <template v-for="(device, index) in deviceListInOrder">
+          <va-item :class="taskDevice.includes(device[0]) === true ? 'device-list-focus': ''" :key="'register' + String(index)" @click="selectDevice(device, index)" clickable>
+            <va-item-section avatar>
+              <va-avatar style="border-radius: 0;">
+                <img src='@/assets/img/elite_img.png' :alt="device[1].name">
+              </va-avatar>
+            </va-item-section>
 
-          <va-item-section>
-            <va-item-label>
-              {{ device.name }}
-            </va-item-label>
+            <va-item-section>
+              <va-item-label>
+                {{ getDeviceShowNameProject(device[0]) }}
+              </va-item-label>
+            </va-item-section>
+          </va-item>
+        </template>
+      </va-list>
+      <va-list fit class="mb-2 pb-0">
+        <va-list-label>
+          Connect
+        </va-list-label>
 
-            <va-item-label caption>
-              {{ device.connectDevice.device_address }}
-            </va-item-label>
-          </va-item-section>
-        </va-item>
+        <template v-for="(device, index) in getNotRegisterDeviceProject()">
+          <va-item :key="'connect' + index" clickable @click="registerConnectDevice(device)">
+            <va-item-section avatar>
+              <va-avatar style="border-radius: 0;">
+                <img src='@/assets/img/elite_img.png' :alt="device.macAddress">
+              </va-avatar>
+            </va-item-section>
+            <va-item-section>
+              <va-item-label>
+                {{ device.macAddress }}
+              </va-item-label>
+            </va-item-section>
+          </va-item>
+        </template>
       </va-list>
     </div>
   </div>
 </template>
 <script>
 import { mapFields } from 'vuex-map-fields'
-import { mapGetters } from 'vuex'
-// import eliteImgUrl from '@/assets/img/elite_img.png'
-// import neuliveImgUrl from '@/assets/img/neulive_img.png'
+import { mapActions, mapGetters } from 'vuex'
+
 import types from '@/store/modules/project/types'
 
 export default {
@@ -50,13 +56,26 @@ export default {
   components: {
   },
   computed: {
+    deviceListInOrder () {
+      return Object.entries(this.getSelectProject.device).sort((a, b) => a[1].order - b[1].order)
+    },
+
+    taskDevice () {
+      if (this.getSelectTask.device) {
+        return this.getSelectTask.device
+      }
+      return null
+    },
     ...mapGetters('project', [
       types.project.getSelect,
       types.task.getSelect,
+      types.project.getDeviceShowName,
+      types.project.getNotRegisterDevice,
     ]),
 
     ...mapFields('project', [
       'taskSelectKey',
+      'taskViewPanel',
     ]),
   },
   data () {
@@ -64,34 +83,70 @@ export default {
     }
   },
   methods: {
-    selectDevice: function (event, device, key) {
-      // if select single task
-      if (this.taskSelectKey !== undefined) {
-        device.isSelect = event
-        device.isSelect.includes(String(this.taskSelectKey)) === true
-          ? this.getSelectTask.device.push(key)
-          : this.getSelectTask.device = this.getSelectTask.device.filter(item => item !== key)
+    selectDevice: function (device, index) {
+      if (this.taskDevice.includes(device[0]) === false) {
+        this.appendToTask(device[0])
       } else {
-        // if select all tasks
-        if (event.includes('-1')) {
-          // check all
-          device.isSelect = ['-1', ...Array(this.getSelectProject.task.length).fill().map((_, index) => String(index))]
-          for (const task of this.getSelectProject.task) {
-            if (!task.device.includes(key)) {
-              task.device.push(key)
-            }
-          }
-        } else {
-          // uncheck all
-          device.isSelect = []
-          for (const task of this.getSelectProject.task) {
-            task.device = task.device.filter(item => item !== key)
-          }
-        }
+        this.removeFromTask(device[0])
       }
     },
+    resetDevice: function () {
+    },
+    registerConnectDevice: async function (device) {
+      // register device
+      await this.createDeviceProject({
+        name: device.name,
+        library: device.library,
+        pair: device.macAddress,
+        pairStatus: 1,
+        order: this.getDeviceMaxOrderProject,
+      })
+      // select device
+      this.selectDevice(this.deviceListInOrder[this.deviceListInOrder.length - 1])
+    },
+    appendToTask: function (key) {
+      // if select single task
+      this.getSelectTask.device.push(key)
+      // create start action-condtion-pair when choose device
+      this.createActionConditionPairTask({
+        device: key,
+        task: this.getSelectTask,
+        action: 'start',
+        condition: {
+          type: 'previous_task_done',
+          comparsion: 'equal',
+          value: '',
+        },
+      })
+    },
+    removeFromTask: function (key) {
+      // if select single task
+      // this.getSelectTask.device = this.getSelectTask.device.filter(item => item !== key)
+      // remove device & relation action, condition, parameter
+      this.deleteDeviceTask({ deviceKey: key, onlySelectTask: true })
+    },
+    closePanel: function () {
+      this.taskViewPanel.show = !(this.taskViewPanel.show)
+    },
+
+    ...mapActions('project',
+      [
+        types.project.createDevice,
+        types.task.deleteDevice,
+        types.task.createActionConditionPair,
+      ],
+    ),
   },
   mounted () {
   },
 }
 </script>
+<style lang="scss">
+  .device-list-focus {
+    background: #ebedff;
+    border: 1px solid #dbdcf0;
+    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
+    border-radius: 5px;
+  }
+
+</style>

src/components/project/task/config/ProjectTaskConfigParameter.vue

@@ -1,15 +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>
-      </div>
-    </div>
     <div>
       <device-parameter-recording
         :ref="'device_parameter_ref'"
         :parameter="parameter"
-        :library="'Elite_EDC_1.5'"
+        :library="library"
+        :place="'scheduler'"
+        :resetParameterModeChange="true"
         @setParameter="setParameter"
         @setParameterWithDebounce="setParameterWithDebounce"
       />
@@ -31,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,
@@ -41,6 +43,7 @@ export default {
       'taskViewPanel',
       'taskSelectKey',
       'deviceSelectKey',
+      'projectSelectIndex',
     ]),
   },
   data () {
@@ -54,6 +57,9 @@ export default {
     }
   },
   methods: {
+    closePanel: function () {
+      this.taskViewPanel.show = !(this.taskViewPanel.show)
+    },
     selectDevice: function (device) {
       this.deviceSelected = device
     },
@@ -61,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()
@@ -80,8 +87,13 @@ export default {
     resetParameter: function (mode) {
       // get Device
       this.device = this.getDeviceProject(this.deviceSelectKey)
+      if (this.device === undefined) return
       // get Config
-      this.config = configTable.getConfig(this.device.library.value)
+      if (typeof this.device.library === 'string') { // string
+        this.config = configTable.getConfig(this.device.library)
+      } else { // object
+        this.config = configTable.getConfig(this.device.library.value)
+      }
       // create default parameter
       const defaultValue = {}
       for (const key in this.config) {
@@ -95,8 +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 {
+        const defaultMode = this.config.MODE_OPTIONS.find(ele => ele.description === 'Idle')
+        this.setParameter('MODE', defaultMode.id)
       }
     },
     ...mapActions('project',
@@ -106,8 +121,33 @@ 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()
+      },
+    },
+    deviceSelectKey: {
+      handler: function () {
+        this.device = null
+        this.parameter = {}
+        this.parameterUUID = ''
+        this.resetParameter()
+      },
+    },
+    projectSelectIndex: {
+      handler: function () {
+        this.device = null
+        this.parameter = {}
+        this.parameterUUID = ''
+        this.resetParameter()
+      },
+    },
   },
 }
 </script>

src/components/project/task/config/parameter/EliteParameterRecordingEliteEIS.vue

@@ -12,14 +12,14 @@
     </div>
     <!-- EIS -->
     <div v-if="workingModeSelect != null && workingModeSelect.id == 0">
-      <d-c-volt :ref="'DCVolt'" :deviceID="deviceID" :parameterName="'DC_BIAS'" @parameterChange="deviceParameterChange($event)" />
-      <a-c-amplitude :ref="'ACAmplitude'" :deviceID="deviceID" :parameterName="'AC_AMP'" @parameterChange="deviceParameterChange($event)" />
-      <freq-range :ref="'FreqRange'" :deviceID="deviceID" :parameterName="'FREQ'" @parameterChange="deviceParameterChange($event)" />
-      <points-per-decades :ref="'PointsPerDecades'" :deviceID="deviceID" :parameterName="'PPD'" @parameterChange="deviceParameterChange($event)" />
-      <point-spacing :ref="'PointSpacing'" :deviceID="deviceID" :parameterName="'SCALE'" @parameterChange="deviceParameterChange($event)" />
-      <delay :ref="'Delay'" :deviceID="deviceID" :parameterName="'DELAY'" @parameterChange="deviceParameterChange($event)" />
-      <average :ref="'Average'" :deviceID="deviceID" :parameterName="'AVERAGE_NUM'" @parameterChange="deviceParameterChange($event)" />
-      <current-range :ref="'CurrentRange'" :deviceID="deviceID" :parameterName="'RTIA'" @parameterChange="deviceParameterChange($event)" />
+      <d-c-volt :ref="'DCVolt'" :deviceID="deviceID" :parameterName="'EIS_DC_BIAS'" @parameterChange="deviceParameterChange($event)" />
+      <a-c-amplitude :ref="'ACAmplitude'" :deviceID="deviceID" :parameterName="'EIS_AC_AMP'" @parameterChange="deviceParameterChange($event)" />
+      <freq-range :ref="'FreqRange'" :deviceID="deviceID" :parameterName="'EIS_FREQ'" @parameterChange="deviceParameterChange($event)" />
+      <points-per-decades :ref="'PointsPerDecades'" :deviceID="deviceID" :parameterName="'EIS_PPD'" @parameterChange="deviceParameterChange($event)" />
+      <point-spacing :ref="'PointSpacing'" :deviceID="deviceID" :parameterName="'EIS_SCALE'" @parameterChange="deviceParameterChange($event)" />
+      <delay :ref="'Delay'" :deviceID="deviceID" :parameterName="'EIS_DELAY'" @parameterChange="deviceParameterChange($event)" />
+      <average :ref="'Average'" :deviceID="deviceID" :parameterName="'EIS_AVERAGE_NUM'" @parameterChange="deviceParameterChange($event)" />
+      <current-range :ref="'CurrentRange'" :deviceID="deviceID" :parameterName="'GENERAL_HS_RTIA'" @parameterChange="deviceParameterChange($event)" />
     </div>
     <!-- CV -->
     <div v-if="workingModeSelect != null && workingModeSelect.id == 1">
@@ -45,14 +45,6 @@
           <level-button :ref="'currentRangeSelect'" :deviceID="deviceID" :options="currentRangeOptions" :parameterName="'ADC_LEVEL_I_15'" @parameterChange="deviceParameterChange($event)" />
         </div>
       </div>
-      <div class="flex row mt-0 pt-0 sm12 xl12 md12 xs12 align--center">
-        <div class="flex sm12 xl12 md12 xs12 pa-0 ma-0">
-          <p class="display-6">Voltage Range<p/>
-        </div>
-        <div class="flex sm12 xl12 md12 xs12 pa-0 ma-1" >
-          <level-button :ref="'voltageInRangeSelect'" :deviceID="deviceID" :options="voltageInRangeOptions" :parameterName="'ADC_LEVEL_V_IN_15'" @parameterChange="deviceParameterChange($event)" />
-        </div>
-      </div>
       <div class="flex row mt-0 pt-0 sm12 xl12 md12 xs12 align--center">
         <div class="flex sm12 xl12 md12 xs12 pa-0 ma-0">
           <p class="display-6">High Z<p/>
@@ -66,7 +58,7 @@
           <p class="display-6">E Initial<p/>
         </div>
         <div class="flex sm12 xl12 md12 xs12 pa-0 ma-1" >
-          <volt-range :ref="'voltInitialNumber'" :deviceID="deviceID" :parameterName="'VOLT_INITIAL'" :minValue="-1.8" :maxValue="2" @parameterChange="deviceParameterChange($event)" />
+          <volt-range :ref="'voltInitialNumber'" :deviceID="deviceID" :parameterName="'CV_E_INITIAL'" :minValue="-1.8" :maxValue="2" @parameterChange="deviceParameterChange($event)" />
         </div>
       </div>
       <div class="flex row mt-0 pt-0 sm12 xl12 md12 xs12 align--center">
@@ -74,7 +66,7 @@
           <p class="display-6">E1<p/>
         </div>
         <div class="flex sm12 xl12 md12 xs12 pa-0 ma-1" >
-          <volt-range :ref="'voltMaxNumber'" :deviceID="deviceID" :parameterName="'VOLT_MAX'" :minValue="-1.8" :maxValue="2" @parameterChange="deviceParameterChange($event)" />
+          <volt-range :ref="'voltMaxNumber'" :deviceID="deviceID" :parameterName="'CV_E1'" :minValue="-1.8" :maxValue="2" @parameterChange="deviceParameterChange($event)" />
         </div>
       </div>
       <div class="flex row mt-0 pt-0 sm12 xl12 md12 xs12 align--center">
@@ -82,7 +74,7 @@
           <p class="display-6">E2<p/>
         </div>
         <div class="flex sm12 xl12 md12 xs12 pa-0 ma-1" >
-          <volt-range :ref="'voltMinNumber'" :deviceID="deviceID" :parameterName="'VOLT_MIN'" :minValue="-1.8" :maxValue="2" @parameterChange="deviceParameterChange($event)" />
+          <volt-range :ref="'voltMinNumber'" :deviceID="deviceID" :parameterName="'CV_E2'" :minValue="-1.8" :maxValue="2" @parameterChange="deviceParameterChange($event)" />
         </div>
       </div>
       <div class="flex row mt-0 pt-0 sm12 xl12 md12 xs12 align--center">
@@ -90,7 +82,7 @@
           <p class="display-6">Voltage Scan Rate<p/>
         </div>
         <div class="flex sm12 xl12 md12 xs12 pa-0 ma-1" >
-          <scan-rate-range :ref="'voltScanRateNumber'" :deviceID="deviceID" :parameterName="'Scan_Rate'" :minValue="0.01" :maxValue="1000" @parameterChange="deviceParameterChange($event)" />
+          <scan-rate-range :ref="'voltScanRateNumber'" :deviceID="deviceID" :parameterName="'CV_SCAN_RATE'" :minValue="0.01" :maxValue="1000" @parameterChange="deviceParameterChange($event)" />
         </div>
       </div>
       <div class="flex row mt-0 pt-0 sm12 xl12 md12 xs12 align--center">
@@ -283,7 +275,7 @@ export default {
         },
       ],
       DCVolt: null,
-      AC_AMP: null,
+      EIS_AC_AMP: null,
       FreqStart: null,
       FreqStop: null,
       PointsPerDecades: null,
@@ -395,44 +387,35 @@ export default {
       this.measureEocButton.status = false
     },
     refresh () {
-      // taskInfo.getDeviceInfo(this.deviceID).parameterSet.CHANNEL_LABEL = ['Z_image_Raw', 'Z_Real_Raw', 'Frequency', 'Cycle', 'Z_imag', 'Z_real', 'Impedance', 'Phase', 'Current', 'Level gain']
       this.workingModeSelect = this.workingModeOptions[taskInfo.getDeviceInfo(this.deviceID).parameterSet.MODE]
       if (this.workingModeSelect != null) {
         this.workingModeSelectChange(this.workingModeSelect)
       }
-      this.ACAmplitude = String(Math.round((taskInfo.getDeviceInfo(this.deviceID).parameterSet.AC_AMP) / 2047 * 800))
+      this.ACAmplitude = String(Math.round((taskInfo.getDeviceInfo(this.deviceID).parameterSet.EIS_AC_AMP) / 2047 * 800))
       if (this.$refs.ACAmplitude != null) {
         this.$refs.ACAmplitude.itemChange(this.ACAmplitude)
       }
-      this.Average = taskInfo.getDeviceInfo(this.deviceID).parameterSet.AVERAGE_NUM
+      this.Average = taskInfo.getDeviceInfo(this.deviceID).parameterSet.EIS_AVERAGE_NUM
       if (this.$refs.Average != null) {
         this.$refs.Average.itemChange(this.Average)
       }
-      this.CurrentRange = taskInfo.getDeviceInfo(this.deviceID).parameterSet.RTIA
+      this.CurrentRange = taskInfo.getDeviceInfo(this.deviceID).parameterSet.GENERAL_HS_RTIA
       if (this.$refs.CurrentRange != null) {
         this.$refs.CurrentRange.itemChange(this.CurrentRange)
       }
-      this.PointSpacing = taskInfo.getDeviceInfo(this.deviceID).parameterSet.SCALE
+      this.PointSpacing = taskInfo.getDeviceInfo(this.deviceID).parameterSet.EIS_SCALE
       if (this.$refs.PointSpacing != null) {
         this.$refs.PointSpacing.itemChange(this.PointSpacing)
       }
-      this.DCVolt = String(Math.round((taskInfo.getDeviceInfo(this.deviceID).parameterSet.DC_BIAS) * 2200 / 4095))
+      this.DCVolt = String(Math.round((taskInfo.getDeviceInfo(this.deviceID).parameterSet.EIS_DC_BIAS) * 2200 / 4095))
       if (this.$refs.DCVolt != null) {
         this.$refs.DCVolt.itemChange(this.DCVolt)
       }
-      this.Delay = String(parseFloat((taskInfo.getDeviceInfo(this.deviceID).parameterSet.DELAY) / 10).toFixed(1))
+      this.Delay = String(parseFloat((taskInfo.getDeviceInfo(this.deviceID).parameterSet.EIS_DELAY) / 10).toFixed(1))
       if (this.$refs.Delay != null) {
         this.$refs.Delay.itemChange(this.Delay)
       }
-      this.FreqStart = String(parseFloat(Math.round(parseFloat((taskInfo.getDeviceInfo(this.deviceID).parameterSet.FREQ_START * 0.0149) * 100)) / 100).toFixed(1)) === '0.0' ? '0.015' : String(parseFloat(Math.round(parseFloat((taskInfo.getDeviceInfo(this.deviceID).parameterSet.FREQ_START * 0.0149) * 100)) / 100).toFixed(1))
-      if (this.$refs.FreqRange != null) {
-        this.$refs.FreqRange.itemChangeMax(this.FreqStart)
-      }
-      this.FreqStop = String(parseFloat(Math.round(parseFloat((taskInfo.getDeviceInfo(this.deviceID).parameterSet.FREQ_STOP * 0.0149) * 100)) / 100).toFixed(1)) === '0.0' ? '0.015' : String(parseFloat(Math.round(parseFloat((taskInfo.getDeviceInfo(this.deviceID).parameterSet.FREQ_STOP * 0.0149) * 100)) / 100).toFixed(1))
-      if (this.$refs.FreqRange != null) {
-        this.$refs.FreqRange.itemChangeMin(this.FreqStop)
-      }
-      this.PointsPerDecades = String(Math.round((taskInfo.getDeviceInfo(this.deviceID).parameterSet.PPD)))
+      this.PointsPerDecades = String(Math.round((taskInfo.getDeviceInfo(this.deviceID).parameterSet.EIS_PPD)))
       if (this.$refs.PointsPerDecades != null) {
         this.$refs.PointsPerDecades.itemChange(this.PointsPerDecades)
       }
@@ -443,11 +426,6 @@ export default {
         this.$refs.currentRangeSelect.updateLevelButton(this.currentRangeSelect)
       }
 
-      this.voltageInRangeSelect = taskInfo.getDeviceInfo(this.deviceID).parameterSet.ADC_LEVEL_V_IN_15
-      if (this.$refs.voltageInRangeSelect != null) {
-        this.$refs.voltageInRangeSelect.updateLevelButton(this.voltageInRangeSelect)
-      }
-
       this.highzSelect = taskInfo.getDeviceInfo(this.deviceID).parameterSet.CTRL_HIGH_Z_15
       if (this.$refs.highzSelect != null) {
         this.$refs.highzSelect.updateLevelButton(this.highzSelect)
@@ -463,12 +441,12 @@ export default {
         this.$refs.stopVoltMinNumber.updateVoltNumber(this.stopVoltMinNumber)
       }
 
-      this.voltInitialNumber = (taskInfo.getDeviceInfo(this.deviceID).parameterSet.VOLT_INITIAL - 25000) / 5
+      this.voltInitialNumber = (taskInfo.getDeviceInfo(this.deviceID).parameterSet.CV_E_INITIAL - 25000) / 5
       if (this.$refs.voltInitialNumber != null) {
         this.$refs.voltInitialNumber.updateVoltNumber(this.voltInitialNumber)
       }
 
-      this.voltScanRateNumber = taskInfo.getDeviceInfo(this.deviceID).parameterSet.Scan_Rate
+      this.voltScanRateNumber = taskInfo.getDeviceInfo(this.deviceID).parameterSet.CV_SCAN_RATE
       if (this.$refs.voltScanRateNumber != null) {
         this.$refs.voltScanRateNumber.updateVoltScanRateNumber(this.voltScanRateNumber)
       }

src/components/project/task/config/parameter/EliteParameterRecordingElitezm15.vue

@@ -505,7 +505,7 @@ export default {
         // },
         // {
         //   id: 11,
-        //   description: 'Cali ADC - test',
+        //   description: 'Cali Mode - test',
         // },
         // {
         //   id: 12,
@@ -576,6 +576,10 @@ export default {
           value: 1,
           label: 'Vin',
         },
+        {
+          value: 2,
+          label: 'Vout',
+        },
       ],
       startVoltNumber: null,
       stopVoltNumber: null,

src/components/project/task/config/parameter/EliteParameterWindow.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <elite-parameter-recording-elitezm15 :ref="'rec_ref_2'" :deviceID="deviceID" @parameterChange="parameterChange"/>
+    <elite-parameter-recording-elitezm15 :ref="'rec_ref_2'" :deviceID="deviceID" @parameterChange="parameterChange" :place="'scheduler'"/>
     <!-- <elite-parameter-recording v-if="eliteVer=='1'" :ref="'rec_ref_1'" :deviceID="deviceID"/>
     <elite-parameter-recording-elitezm15 v-else-if="eliteVer=='2'" :ref="'rec_ref_2'" :deviceID="deviceID"/>
     <elite-parameter-recording-elite-e-i-s v-else-if="eliteVer=='4'" :ref="'rec_ref_4'" :deviceID="deviceID"/>

src/components/project/view/ProjectView.vue

@@ -1,22 +1,30 @@
 <template>
   <div>
-    <va-card style="height: 90vh; overflow: auto; display: block;">
+    <!-- <pre>{{ getSelectProject }} </pre> -->
+    <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/>
-        <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>
@@ -26,7 +34,7 @@
 import ProjectMenu from '@/components/project/view/menu/ProjectMenu'
 import ProjectTable from '@/components/project/view/table/ProjectTable'
 import { mapFields } from 'vuex-map-fields'
-import { mapGetters } from 'vuex'
+import { mapGetters, mapActions } from 'vuex'
 import types from '@/store/modules/project/types'
 
 export default {
@@ -42,7 +50,10 @@ export default {
     ...mapFields('project', [
       'lockMode',
       'projectList',
+      'deviceConnectList',
       'projectSelectIndex',
+      'projectLibrary',
+      'projectManagerPanel',
     ]),
   },
   data () {
@@ -50,15 +61,110 @@ 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)
+    },
+    ...mapActions('project',
+      [
+        types.project.update,
+        types.project.addDevice,
+      ],
+    ),
+  },
+  watch: {
+  },
+  async mounted  () {
   },
 }
 </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>

src/components/project/view/menu/ProjectMenu.vue

@@ -1,57 +1,180 @@
 <template>
   <div>
-    <div class="row">
-      <div class="flex d-flex">
-        <switch-project/>
-        <add-task/>
-        <add-device @showDeviceModal="showDeviceModal"/>
-        <!-- <clear-task/>
-        <save-project/>
-        <import-project/>
-        <export-project/>
-        <delete-project/> -->
+    <project-device @showDeviceModal="showDeviceModal" @save="saveProject"></project-device>
+    <project-subject @showSubjectModal="showSubjectModal"></project-subject>
+    <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($event)"></project-device>
-    <device-modal ref="device_modal_ref"></device-modal>
+    <subject-modal ref="subject_modal_ref" @save="saveSubject"  @remove="removeSubject"></subject-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 ClearTask from '@/components/project/view/menu/components/ClearTask'
-// import ExportProject from '@/components/project/view/menu/components/ExportProject'
-// import ImportProject from '@/components/project/view/menu/components/ImportProject'
-// import SaveProject from '@/components/project/view/menu/components/SaveProject'
-// import DeleteProject from '@/components/project/view/menu/components/DeleteProject'
-import AddDevice from '@/components/project/view/menu/components/AddDevice'
+// import AddDevice from '@/components/project/view/menu/components/AddDevice'
 import ProjectDevice from '@/components/project/view/menu/components/ProjectDevice'
-import DeviceModal from '@/components/project/view/menu/components/DeviceModal'
+import ProjectSubject from '@/components/project/view/menu/components/ProjectSubject'
+import NewDeviceModal from '@/components/project/view/menu/components/NewDeviceModal'
+import SubjectModal from '@/components/project/view/menu/components/SubjectModal'
+import CycleModal from '@/components/project/view/menu/components/CycleModal'
+import { mapFields } from 'vuex-map-fields'
+import { mapActions, mapGetters } from 'vuex'
+import types from '@/store/modules/project/types'
 
 export default {
   name: 'project-menu',
   components: {
-    SwitchProject,
     AddTask,
-    AddDevice,
-    // ClearTask,
-    // ExportProject,
-    // ImportProject,
-    // SaveProject,
-    // DeleteProject,
+    // AddDevice,
     ProjectDevice,
-    DeviceModal,
+    NewDeviceModal,
+    CycleModal,
+    ProjectSubject,
+    SubjectModal,
+  },
+  computed: {
+    ...mapGetters('project', [
+      types.project.getSelect,
+    ]),
+    ...mapFields('project', [
+      'taskViewPanel',
+      'taskSelectKey',
+      'deviceSelectKey',
+      'lockMode',
+      'projectTableSelectIndex',
+    ]),
   },
   data () {
     return {
     }
   },
   methods: {
-    showDeviceModal: function (device) {
-      this.$refs.device_modal_ref.show()
-      this.$refs.device_modal_ref.initSetting(device)
+    detect: function (device) {
+      this.$emit('detect', device)
     },
+    showDeviceModal: function (key, device) {
+      this.$refs.device_modal_ref.show()
+      this.$refs.device_modal_ref.initSetting(key, device)
+    },
+    showSubjectModal: function (subject) {
+      this.$refs.subject_modal_ref.show()
+      this.$refs.subject_modal_ref.initSetting(subject)
+    },
+    createCycle: function (cycleInfo) {
+      this.createCycleTask({ cycleInfo: cycleInfo })
+    },
+    showCycleModal: function () {
+      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)
+    },
+    saveSubject: function (subject) {
+      if (this.getSelectProject.subject === undefined) this.getSelectProject.subject = []
+      if (this.getSelectProject.subject.findIndex((ele) => ele.id === subject.id) >= 0) return
+      this.getSelectProject.subject.push(subject)
+      this.saveProject()
+    },
+
+    removeSubject: function (subject) {
+      if (this.getSelectProject.subject === undefined) this.getSelectProject.subject = []
+      const subjexIndex = this.getSelectProject.subject.findIndex((ele) => ele.id === subject.id)
+      if (subjexIndex >= 0) {
+        this.getSelectProject.subject.splice(subjexIndex, 1)
+      }
+      this.saveProject()
+    },
+
+    ...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>

src/components/project/view/menu/components/AddDevice.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <va-button @click="addDevice" small>ADD DEVICE</va-button>
+    <va-button @click="addDevice" small>+ DEVICE</va-button>
   </div>
 </template>
 <script>

src/components/project/view/menu/components/AddTask.vue

@@ -1,6 +1,13 @@
 <template>
   <div>
-    <va-button @click="createTask" small>ADD 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>

src/components/project/view/menu/components/CycleModal.vue

@@ -0,0 +1,259 @@
+<template>
+  <div>
+    <va-modal
+      class="flex sm12 xl12 md12 xs12"
+      v-model="showModal"
+      size="small"
+      :noOutsideDismiss="true"
+      hide-default-actions
+    >
+      <template slot="header">
+        <div class="d-flex mb-3">
+          <va-icon name="fa fa-bluetooth-b mr-3" color="primary"/>
+          <h5 v-if="Object.keys(cycleInfo).length == 0" class="mt-0 mb-0">Create Cycle</h5>
+          <h5 v-else class="mt-0 mb-0">{{ cycleInfo.name }}</h5>
+        </div>
+      </template>
+      <div class="row">
+        <div class="row flex sm6 xl6 md6 xs6">
+          <div class="flex sm2 xl2 md2 xs2 pt-2">
+            <span>Start</span>
+          </div>
+          <div class="flex sm8 xl8 md8 xs8">
+            <va-select
+              :label="''"
+              v-model="task.start"
+              textBy="name"
+              class="va-select-without-margin"
+              :options="taskOptions"
+              :noClear='true'
+            />
+          </div>
+        </div>
+        <div class="row flex sm6 xl6 md6 xs6">
+          <div class="flex sm2 xl2 md2 xs2 pt-2">
+            <span>End</span>
+          </div>
+          <div class="flex sm8 xl8 md8 xs8">
+            <va-select
+              :label="''"
+              v-model="task.end"
+              textBy="name"
+              class="va-select-without-margin"
+              :options="taskOptions"
+              :noClear='true'
+            />
+          </div>
+        </div>
+        <div class="row flex sm12 xl12 md12 xs12">
+          <div class="flex sm2 xl2 md2 xs2 pt-2">
+            <span> Cycle No. </span>
+          </div>
+          <div class="flex sm2 xl2 md2 xs2">
+            <va-input v-model="task.cycle"/>
+          </div>
+        </div>
+        <div class="row flex sm12 xl12 md12 xs12" style="height: 40px;">
+          <div class="flex sm1 xl1 md1 xs1">
+            <va-checkbox
+              v-model="task.useID"
+            />
+          </div>
+          <div class="flex sm4 xl4 md4 xs4">
+            Use ID As Header
+          </div>
+          <div v-if="task.useID" class="flex sm4 xl4 md4 xs4">
+            <va-input v-model="task.id"></va-input>
+          </div>
+        </div>
+        <!-- <div class="row flex sm12 xl12 md12 xs12">
+          <div class="flex sm1 xl1 md1 xs1">
+            <va-checkbox
+              v-model="task.buttonTrigger"
+            />
+          </div>
+          <div class="flex sm6 xl6 md6 xs6">
+            Wait Until Button Press In Next Loop
+          </div>
+        </div> -->
+      </div>
+      <div class="flex-center sm12 xl12 md12 xs12">
+        <va-button v-if="Object.keys(cycleInfo).length > 0" @click="removeCycle" color="danger">Remove</va-button>
+        <va-button @click="hide">Cancel</va-button>
+        <va-button @click="createCycle" @keyup.native="keyFunction($event,item)">OK</va-button>
+      </div>
+    </va-modal>
+  </div>
+</template>
+<script>
+import { mapFields } from 'vuex-map-fields'
+import { mapActions, mapGetters } from 'vuex'
+import types from '@/store/modules/project/types'
+
+export default {
+  name: 'cycle-modal',
+  components: {
+  },
+  computed: {
+    ...mapGetters('project', [
+      types.project.getSelect,
+    ]),
+
+    ...mapFields('project', [
+      'deviceConnectList',
+      'projectLibrary',
+    ]),
+  },
+  data () {
+    return {
+      showModal: false,
+      taskOptions: [],
+      task: {
+        id: '',
+        name: '',
+        start: -1,
+        end: -1,
+        cycle: '1',
+        useID: false,
+        buttonTrigger: false,
+        uuid: '',
+      },
+      cycleInfo: {},
+    }
+  },
+  methods: {
+    show: function () {
+      this.showModal = true
+      // window.addEventListener('keydown', (e) => {
+      //   console.log('e', e)
+      //   if (e.keyCode === 13) {
+      //     this.createCycle()
+      //   }
+      // }, { once: true })
+    },
+    hide: function () {
+      this.showModal = false
+    },
+    createCycle: async function () {
+      const project = this.getSelectProject
+      if (Object.keys(this.cycleInfo).length === 0) {
+        this.$emit('createCycle', this.task)
+      }
+      if (Object.keys(this.cycleInfo).length !== 0) {
+        this.cycleInfo.max = this.task.cycle
+        this.cycleInfo.name = this.task.name
+        this.cycleInfo.useID = this.task.useID
+        this.cycleInfo.id = this.task.id
+
+        const originStartIndex = await this.getIndexTask({ project: project, uuid: this.cycleInfo.range[0] })
+        const newStartIndex = await this.getIndexTask({ project: project, uuid: this.task.start.value })
+
+        if (this.task.useID === true) {
+          const condition = project.task[originStartIndex].condition
+          const action = project.task[originStartIndex].action
+          delete condition[(Object.keys(condition).find(key => condition[key].type === 'after_task_run'))]
+          const conditionUUID = this.GLOBAL.getUUID()
+          const newCond = await this.createConditionTask({ uuid: conditionUUID, condition: 'until_button_trigger', compOp: 'equal', value: '' })
+          project.task[originStartIndex].condition = Object.assign({}, condition, newCond)
+          action[Object.keys(action).find(key => action[key].type === 'cycle')].condition.push(conditionUUID)
+
+          project.task[originStartIndex].name = this.task.name
+        } else {
+          const condition = project.task[originStartIndex].condition
+          const action = project.task[originStartIndex].action
+          delete condition[(Object.keys(condition).find(key => condition[key].type === 'until_button_trigger'))]
+          const conditionUUID = this.GLOBAL.getUUID()
+          const newCond = await this.createConditionTask({ uuid: conditionUUID, condition: 'after_task_run', compOp: 'equal', value: '0' })
+          project.task[originStartIndex].condition = Object.assign({}, condition, newCond)
+          action[Object.keys(action).find(key => action[key].type === 'cycle')].condition.push(conditionUUID)
+        }
+
+        if (Number(originStartIndex) + 1 !== Number(newStartIndex)) {
+          await this.swapTask({ project: project, originIndex: originStartIndex, newIndex: newStartIndex })
+        }
+
+        const originEndIndex = await this.getIndexTask({ project: project, uuid: this.cycleInfo.range[1] })
+        const newEndIndex = await this.getIndexTask({ project: project, uuid: this.task.end.value })
+
+        project.task[originEndIndex].name = this.task.name
+
+        if (Number(originEndIndex) - 1 !== Number(newEndIndex)) {
+          await this.swapTask({ project: project, originIndex: originEndIndex, newIndex: newEndIndex + 1 })
+        }
+      }
+      this.$emit('save')
+      this.showModal = false
+      return true
+    },
+    removeCycle: async function () {
+      const project = this.getSelectProject
+
+      // remove project cycle
+      project.cycle.splice(project.cycle.findIndex(ele => ele.name === this.cycleInfo.name), 1)
+
+      // remove left cycle task
+      const originStartIndex = await this.getIndexTask({ project: project, uuid: this.cycleInfo.range[0] })
+      await this.deleteTask({ project: project, index: originStartIndex })
+
+      // remove right cycle task
+      const originEndIndex = await this.getIndexTask({ project: project, uuid: this.cycleInfo.range[1] })
+      await this.deleteTask({ project: project, index: originEndIndex })
+
+      this.$emit('save')
+      this.showModal = false
+      return true
+    },
+    updateTaskOptions: function () {
+      const taskOptions = []
+      const project = this.getSelectProject
+      for (var idx = 0; idx < project.task.length; idx++) {
+        if (Object.keys(this.cycleInfo).length !== 0) {
+          if (this.cycleInfo.range.findIndex(ele => ele === project.task[idx].uuid) !== -1) continue
+        }
+        taskOptions.push({
+          id: idx,
+          name: project.task[idx].name,
+          value: project.task[idx].uuid,
+        })
+      }
+      this.taskOptions = taskOptions
+    },
+    reset: function () {
+      this.updateTaskOptions()
+      this.task.start = this.taskOptions[0]
+      this.task.end = this.taskOptions[this.taskOptions.length - 1]
+    },
+    setCycleInfo: async function (project, uuid) {
+      this.cycleInfo = project.cycle.find(ele => ele.range.find(ele => ele === uuid))
+      const startIndex = await this.getIndexTask({ project: project, uuid: this.cycleInfo.range[0] }) + 1
+      const endIndex = await this.getIndexTask({ project: project, uuid: this.cycleInfo.range[1] }) - 1
+
+      this.updateTaskOptions()
+      this.task.start = this.taskOptions[this.taskOptions.findIndex(ele => ele.value === project.task[startIndex].uuid)]
+      this.task.end = this.taskOptions[this.taskOptions.findIndex(ele => ele.value === project.task[endIndex].uuid)]
+      this.task.name = this.cycleInfo.name
+      this.task.cycle = this.cycleInfo.max
+      this.task.useID = this.cycleInfo.useID
+      this.task.id = this.cycleInfo.id
+    },
+    ...mapActions('project',
+      [
+        types.project.addDevice,
+        types.project.findDevice,
+        types.project.setDevice,
+        types.task.init,
+        types.task.create,
+        types.task.save,
+        types.task.delete,
+        types.task.select,
+        types.task.getIndex,
+        types.task.swap,
+        types.task.createCondition,
+      ],
+    ),
+
+  },
+  mounted () {
+  },
+}
+</script>

src/components/project/view/menu/components/NewDeviceModal.vue

@@ -0,0 +1,155 @@
+<template>
+  <div>
+    <va-modal
+      class="flex sm12 xl12 md12 xs12"
+      v-model="showModal"
+      size="small"
+      :noOutsideDismiss="true"
+      hide-default-actions
+    >
+      <template slot="header">
+        <div class="d-flex mb-3">
+          <va-icon name="fa fa-bluetooth-b mr-3" color="primary"/>
+          <h5 class="mt-0 mb-0">Choose Device</h5>
+        </div>
+      </template>
+      <va-list fit class="mb-2 pb-0">
+        <va-list-label>
+          Connect
+        </va-list-label>
+        <va-item v-if="deviceList.length === 0">
+          <va-item-section>
+            There is no connected device.
+          </va-item-section>
+        </va-item>
+        <template v-else v-for="(device, index) in deviceList">
+          <va-item :class="deviceSelect === index ? 'device-list-focus': ''" :key="'connect-' + index" @click="selectDevice(device, index)" clickable>
+            <va-item-section avatar>
+              <va-avatar style="border-radius: 0;">
+                <img src='@/assets/img/elite_img.png' :alt="device.macAddress">
+              </va-avatar>
+            </va-item-section>
+
+            <va-item-section>
+              {{ device.macAddress }}
+            </va-item-section>
+
+            <va-item-section side>
+              <va-icon name="fa fa-map-marker" color="gray" @click.native="detect(device.macAddress)"/>
+            </va-item-section>
+          </va-item>
+          <!-- <va-list-separator v-if="index < deviceList.length - 1" :key="'separator-' + index" /> -->
+        </template>
+      </va-list>
+      <div class="flex-center sm12 xl12 md12 xs12">
+        <va-button color='danger' @click="removeDevice">Remove</va-button>
+        <va-button @click="hide">Cancel</va-button>
+        <va-button @click="changeDevice">OK</va-button>
+      </div>
+    </va-modal>
+  </div>
+</template>
+<script>
+// import { mapFields } from 'vuex-map-fields'
+import { mapActions, mapGetters } from 'vuex'
+import types from '@/store/modules/project/types'
+
+export default {
+  name: 'add-device-modal',
+  components: {
+  },
+  computed: {
+    optionDeviceVersion () {
+      return (this.optionDeviceVersionObj[this.device.product.value] !== undefined)
+        ? this.optionDeviceVersionObj[this.device.product.value]
+        : undefined
+    },
+
+    ...mapGetters('project', [
+      types.project.getSelect,
+      types.project.getDeviceShowName,
+    ]),
+
+    // ...mapFields('project', [
+    //   'deviceConnectList',
+    // ]),
+  },
+  data () {
+    return {
+      showModal: false,
+      showDisplayDevice: false,
+      key: '',
+      device: {},
+      deviceList: [],
+      deviceSelect: -1,
+    }
+  },
+  methods: {
+    show: function () {
+      this.showModal = true
+    },
+    hide: function () {
+      this.showModal = false
+    },
+    detect: function (device) {
+      if (device) this.$emit('detect', device)
+    },
+    selectDevice: function (device, index) {
+      this.deviceSelect = index
+    },
+    changeDevice: function () {
+      if (this.deviceList[this.deviceSelect]) {
+        this.device.pair = this.deviceList[this.deviceSelect].macAddress
+      }
+      this.$emit('save')
+      this.hide()
+    },
+    removeDevice: function () {
+      this.deleteDeviceProject({ deviceKey: this.key })
+      this.$emit('save')
+      this.hide()
+    },
+    getDeviceList: async function (device) {
+      const deviceList = await this.checkNotRegisterDeviceProject({ library: device.library })
+      const _device = { macAddress: device.pair, library: device.library }
+      if (device.pair !== null) {
+        this.deviceList = [_device, ...deviceList]
+      } else {
+        this.deviceList = [...deviceList]
+      }
+    },
+    initSetting: function (key, device) {
+      this.key = key
+      this.device = device
+      this.deviceList = []
+      this.deviceSelect = 0
+      this.getDeviceList(device)
+    },
+    ...mapActions('project',
+      [
+        types.project.addDevice,
+        types.project.findDevice,
+        types.project.setDevice,
+        types.project.deleteDevice,
+        types.project.checkNotRegisterDevice,
+        types.task.init,
+        types.task.create,
+        types.task.save,
+        types.task.delete,
+        types.task.select,
+      ],
+    ),
+  },
+  mounted () {
+  },
+}
+</script>
+<style lang="scss">
+  .device-list-focus {
+    background: #ebedff;
+    border: 1px solid #dbdcf0;
+    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
+    border-radius: 5px;
+  }
+
+</style>

src/components/project/view/menu/components/ProjectDevice.vue

@@ -1,13 +1,44 @@
 <template>
-  <div class="row">
-    <div class="flex d-flex">
-      <div v-for="(device, index) in getSelectProject.device" :key="index">
-        <va-button color="info" @click="showDeviceModal(device)" small>
-          <va-icon name="fa fa-close" @click.native.stop="deleteDevice(index)"></va-icon>
-          {{ device.name }} {{ device.connectDevice && device.connectDevice.device_address }}
-        </va-button>
+  <div class="flex d-flex sm12 xs12 md12 xl12 pa-0" style="align-items: center; margin-left: 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="d-flex" :list="deviceListInOrder" :move="handleMove" @end="handleDragEnd">
+        <!-- devices -->
+        <div class="mr-2" v-for="(device, index) in deviceListInOrder" :key="index">
+          <button :class="device[1].pairStatus === 1 ? 'pair-button mr-2' : 'not-pair-button mr-2'" @click="showDeviceModal(device[0], device[1])">
+            <span class="pair-button-text">{{ getDeviceShowNameProject(device[0]) }}</span>
+          </button>
+        </div>
+        <!-- append device -->
+        <div v-if="deviceListInOrder.length < 4">
+          <button class="add-button" icon="fa fa-plus" @click="clickShowLibrary"><span class="add-button-text">+</span></button>
+        </div>
+      </draggable>
+    </div>
   </div>
 </template>
 
@@ -15,46 +46,171 @@
 import { mapFields } from 'vuex-map-fields'
 import { mapActions, mapGetters } from 'vuex'
 import types from '@/store/modules/project/types'
+import draggable from 'vuedraggable'
 
 export default {
   name: 'project-device',
   components: {
+    draggable,
   },
   computed: {
+    deviceListInOrder () {
+      return Object.entries(this.getSelectProject.device).sort((a, b) => a[1].order - b[1].order)
+    },
+
     ...mapGetters('project', [
       types.project.getSelect,
+      types.project.getDeviceShowName,
+      types.project.getDeviceMaxOrder,
     ]),
 
     ...mapFields('project', [
       'projectLibrary',
+      'projectSelectIndex',
     ]),
   },
   data () {
     return {
+      showDevice: false,
+      showLibrary: false,
+      notRegisterDevice: [],
+      index: -1,
+      futureIndex: -1,
     }
   },
   methods: {
-    showDeviceModal: function (device) {
-      this.$emit('showDeviceModal', device)
+    clickShowLibrary: async function () {
+      this.notRegisterDevice = await this.checkNotRegisterDeviceProject({})
+      if (this.notRegisterDevice.length === 0) {
+        this.showLibrary = true
+        return true
+      }
+      await this.createDeviceProject({
+        name: this.notRegisterDevice[0].name,
+        library: this.notRegisterDevice[0].library,
+        pair: this.notRegisterDevice[0].macAddress,
+        pairStatus: 1,
+        order: this.getDeviceMaxOrderProject,
+      })
+      this.$emit('save')
+      return true
+    },
+    clickShowDevice: async function (library) {
+      this.showLibrary = false
+      await this.createDeviceProject({
+        name: library + '-' + String(Object.keys(this.getSelectProject.device).length + 1),
+        library: library,
+        pair: null,
+        pairStatus: 0,
+        order: this.getDeviceMaxOrderProject,
+      })
+      this.$emit('save')
+      return false
+    },
+    cancelSelectDevice: function () {
+      this.showLibrary = false
+    },
+    showDeviceModal: function (key, device) {
+      this.$emit('showDeviceModal', key, device)
     },
     deleteDevice: function (deviceIndex) {
       this.deleteDeviceProject({ index: deviceIndex })
+      this.$emit('save')
+    },
+    handleMove (e) {
+      const { index, futureIndex } = e.draggedContext
+      this.index = index
+      this.futureIndex = futureIndex
+      return false // disable sort
+    },
+    handleDragEnd () {
+      const changeList = ['name', 'library', 'pair', 'pairStatus']
+      const deviceListTemp = JSON.parse(JSON.stringify(this.deviceListInOrder))
+      const keyOld = deviceListTemp[this.index][0]
+      const keyNew = deviceListTemp[this.futureIndex][0]
+      const deviceList = this.getSelectProject.device
+
+      for (const key of changeList) {
+        deviceList[keyOld][key] = deviceListTemp[this.futureIndex][1][key]
+        deviceList[keyNew][key] = deviceListTemp[this.index][1][key]
+      }
+      this.$emit('save')
     },
     ...mapActions('project',
       [
+        types.project.createDevice,
         types.project.deleteDevice,
+        types.project.checkNotRegisterDevice,
+        types.project.checkPairDeviceExist,
       ],
     ),
   },
   mounted () {
-    for (const device in this.getSelectProject.device) {
-      if (this.projectLibrary === null) {
-        this.projectLibrary = this.getSelectProject.device[device].library.value
-      }
-    }
+  },
+  watch: {
+    projectSelectIndex: {
+      immediate: true,
+      handler: async function (val) {
+        console.log('projectSelectIndex', val)
+        this.checkPairDeviceExistProject()
+      },
+    },
   },
 }
 </script>
 
 <style lang="scss">
+  .add-button {
+    width: 38px;
+    height: 36px;
+    background: #e0e0e0;
+    border: 2px dashed #b7b7b7;
+    border-radius: 20px;
+  }
+
+  .add-button-text {
+    color: white;
+    font-size: 20px;
+    font-weight: bold;
+  }
+
+  .pair-button {
+    width: 100%;
+    height: 36px;
+    background: #858dd6;
+    border: 0;
+    border-radius: 20px;
+  }
+
+  .not-pair-button {
+    width: 100%;
+    height: 36px;
+    background: #e0e0e0;
+    border: 0;
+    border-radius: 20px;
+  }
+
+  .pair-button-text {
+    font-family: 'Inter-Regular';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+    text-align: center;
+    color: #ffffff;
+  }
+
+  .project-device-header-text {
+    align-items: center;
+    // font-family: 'Inter-Regular';
+    // font-style: normal;
+    font-weight: 700;
+    font-size: 20px;
+    line-height: 29px;
+
+    /* identical to box height */
+    color: rgb(52, 73, 94);
+    // color: #768b9b;
+  }
+
 </style>

src/components/project/view/menu/components/ProjectSubject.vue

@@ -0,0 +1,196 @@
+<template>
+  <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>Subject</p>
+    </div>
+    <!-- device list -->
+    <div class="flex d-flex">
+      <draggable class="d-flex" :list="subjectList">
+        <!-- devices -->
+        <div class="mr-2" v-for="(subject, index) in subjectList" :key="index">
+          <!-- <button :class="device[1].pairStatus === 1 ? 'pair-button mr-2' : 'not-pair-button mr-2'" @click="showDeviceModal(device[0], device[1])"> -->
+          <button class="pair-button mr-2" @click="showSubjectModal(subject)">
+            <span class="pair-button-text">{{ subject.name }}</span>
+          </button>
+        </div>
+        <!-- append device -->
+        <div>
+          <button class="add-button" icon="fa fa-plus" @click="showSubjectModal"><span class="add-button-text">+</span></button>
+        </div>
+      </draggable>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapFields } from 'vuex-map-fields'
+import { mapActions, mapGetters } from 'vuex'
+import types from '@/store/modules/project/types'
+import draggable from 'vuedraggable'
+
+export default {
+  name: 'project-subject',
+  components: {
+    draggable,
+  },
+  computed: {
+    subjectList () {
+      return this.getSelectProject.subject
+    },
+
+    ...mapGetters('project', [
+      types.project.getSelect,
+      types.project.getDeviceShowName,
+      types.project.getDeviceMaxOrder,
+    ]),
+
+    ...mapFields('project', [
+      'projectLibrary',
+      'projectSelectIndex',
+    ]),
+  },
+  data () {
+    return {
+      showDevice: false,
+      showLibrary: false,
+      notRegisterDevice: [],
+      index: -1,
+      futureIndex: -1,
+    }
+  },
+  methods: {
+    // clickShowLibrary: async function () {
+    //   this.notRegisterDevice = await this.checkNotRegisterDeviceProject({})
+    //   if (this.notRegisterDevice.length === 0) {
+    //     this.showLibrary = true
+    //     return true
+    //   }
+    //   await this.createDeviceProject({
+    //     name: this.notRegisterDevice[0].name,
+    //     library: this.notRegisterDevice[0].library,
+    //     pair: this.notRegisterDevice[0].macAddress,
+    //     pairStatus: 1,
+    //     order: this.getDeviceMaxOrderProject,
+    //   })
+    //   this.$emit('save')
+    //   return true
+    // },
+    // clickShowDevice: async function (library) {
+    //   this.showLibrary = false
+    //   await this.createDeviceProject({
+    //     name: library + '-' + String(Object.keys(this.getSelectProject.device).length + 1),
+    //     library: library,
+    //     pair: null,
+    //     pairStatus: 0,
+    //     order: this.getDeviceMaxOrderProject,
+    //   })
+    //   this.$emit('save')
+    //   return false
+    // },
+    cancelSelectDevice: function () {
+      this.showLibrary = false
+    },
+    showSubjectModal: function (subject) {
+      this.$emit('showSubjectModal', subject)
+    },
+    deleteDevice: function (deviceIndex) {
+      this.deleteDeviceProject({ index: deviceIndex })
+      this.$emit('save')
+    },
+    handleMove (e) {
+      const { index, futureIndex } = e.draggedContext
+      this.index = index
+      this.futureIndex = futureIndex
+      return false // disable sort
+    },
+    handleDragEnd () {
+      const changeList = ['name', 'library', 'pair', 'pairStatus']
+      const deviceListTemp = JSON.parse(JSON.stringify(this.deviceListInOrder))
+      const keyOld = deviceListTemp[this.index][0]
+      const keyNew = deviceListTemp[this.futureIndex][0]
+      const deviceList = this.getSelectProject.device
+
+      for (const key of changeList) {
+        deviceList[keyOld][key] = deviceListTemp[this.futureIndex][1][key]
+        deviceList[keyNew][key] = deviceListTemp[this.index][1][key]
+      }
+      this.$emit('save')
+    },
+    ...mapActions('project',
+      [
+        types.project.createDevice,
+        types.project.deleteDevice,
+        types.project.checkNotRegisterDevice,
+        types.project.checkPairDeviceExist,
+      ],
+    ),
+  },
+  mounted () {
+  },
+  watch: {
+    projectSelectIndex: {
+      immediate: true,
+      handler: async function (val) {
+        this.checkPairDeviceExistProject()
+      },
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+  .add-button {
+    width: 38px;
+    height: 36px;
+    background: #e0e0e0;
+    border: 2px dashed #b7b7b7;
+    border-radius: 20px;
+  }
+
+  .add-button-text {
+    color: white;
+    font-size: 20px;
+    font-weight: bold;
+  }
+
+  .pair-button {
+    width: 100%;
+    height: 36px;
+    background: #858dd6;
+    border: 0;
+    border-radius: 20px;
+  }
+
+  .not-pair-button {
+    width: 100%;
+    height: 36px;
+    background: #e0e0e0;
+    border: 0;
+    border-radius: 20px;
+  }
+
+  .pair-button-text {
+    font-family: 'Inter-Regular';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+    text-align: center;
+    color: #ffffff;
+  }
+
+  .project-device-header-text {
+    align-items: center;
+    // font-family: 'Inter-Regular';
+    // font-style: normal;
+    font-weight: 700;
+    font-size: 20px;
+    line-height: 29px;
+
+    /* identical to box height */
+    color: rgb(52, 73, 94);
+    // color: #768b9b;
+  }
+
+</style>

src/components/project/view/menu/components/SubjectModal.vue

@@ -0,0 +1,202 @@
+<template>
+  <div>
+    <va-modal
+      class="flex sm12 xl12 md12 xs12"
+      v-model="showModal"
+      size="small"
+      :noOutsideDismiss="true"
+      hide-default-actions
+    >
+      <template slot="header">
+        <div class="d-flex mb-3">
+          <va-icon name="fa fa-bluetooth-b mr-3" color="primary"/>
+          <h5 class="mt-0 mb-0">Choose Subject</h5>
+        </div>
+      </template>
+      <div v-if="modalStep === 1">
+        <va-list fit class="mb-2 pb-0" >
+          <div>
+            <va-icon name="fa fa-plus" @click.native="showCreate"></va-icon>
+            <va-icon class="ml-2" name="fa fa-minus" @click.native="()=> { modalStep = 2 }"></va-icon>
+          </div>
+          <div class="row" v-if="showCreateInput === true">
+            <va-input class="mr-2" label="NAME" v-model="name"></va-input>
+            <va-input  label="DESCRIPTION" v-model="description"></va-input>
+            <va-button @click="createSubject">SAVE</va-button>
+          </div>
+          <va-list-label>
+          </va-list-label>
+          <template v-for="(subject, index) in subjectList">
+            <va-item :class="subjectSelect === index ? 'list-focus': ''" :key="'connect-' + index" @click="selectSubject(index)" clickable>
+              <!-- <va-item-section avatar>
+                <va-avatar style="border-radius: 0;">
+                  <img src='@/assets/img/elite_img.png' :alt="device.macAddress">
+                </va-avatar>
+              </va-item-section> -->
+
+              <va-item-section>
+                {{ subject.name }}
+              </va-item-section>
+
+              <va-item-section>
+                {{ subject.description }}
+              </va-item-section>
+            </va-item>
+            <!-- <va-list-separator v-if="index < deviceList.length - 1" :key="'separator-' + index" /> -->
+          </template>
+        </va-list>
+        <div class="flex-center sm12 xl12 md12 xs12">
+          <va-button color='danger' @click="removeSubject">Remove</va-button>
+          <va-button @click="hide">Cancel</va-button>
+          <va-button @click="changeSubject">OK</va-button>
+        </div>
+      </div>
+      <div v-if="modalStep === 2">
+        <div class="flex text-center">
+          ConFirm Delete {{ this.subjectList[this.subjectSelect].name }} ?
+          <div class="flex d-flex">
+            <va-button @click="() => { modalStep = 1 }">Cancel</va-button>
+            <va-button @click="deleteSubject">OK</va-button>
+          </div>
+        </div>
+      </div>
+    </va-modal>
+  </div>
+</template>
+<script>
+// import { mapFields } from 'vuex-map-fields'
+import api from '@/data/api/index'
+import { mapActions, mapGetters } from 'vuex'
+import types from '@/store/modules/project/types'
+
+export default {
+  name: 'subject-modal',
+  components: {
+  },
+  computed: {
+    ...mapGetters('project', [
+      types.project.getSelect,
+      types.project.getDeviceShowName,
+    ]),
+
+    // ...mapFields('project', [
+    //   'deviceConnectList',
+    // ]),
+  },
+  data () {
+    return {
+      showModal: false,
+      showDisplayDevice: false,
+      key: '',
+      device: {},
+      subjectList: [],
+      subjectSelect: -1,
+
+      name: '',
+      description: '',
+
+      showCreateInput: false,
+
+      modalStep: 1,
+    }
+  },
+  methods: {
+    showCreate: function () {
+      this.showCreateInput = true
+    },
+    deleteSubject: async function () {
+      const selectSubject = this.subjectList[this.subjectSelect]
+      if (selectSubject) {
+        await api.subject.update(selectSubject.id, { deleted: true })
+        await api.subject.clearDel()
+        this.subjectList.splice(this.subjectSelect, 1)
+      }
+      this.modalStep = 1
+    },
+    show: function () {
+      this.showModal = true
+    },
+    hide: function () {
+      this.showModal = false
+    },
+    createSubject: async function () {
+      const newSubject = await api.subject.create({ name: this.name, description: this.description })
+      if (newSubject.status === 200) {
+        this.subjectList.push(newSubject.data)
+      }
+      this.showCreateInput = false
+    },
+    // detect: function (device) {
+    //   if (device) this.$emit('detect', device)
+    // },
+    selectSubject: function (index) {
+      this.subjectSelect = index
+    },
+    changeSubject: function () {
+      let subject = null
+      if (this.subjectList[this.subjectSelect]) {
+        subject = this.subjectList[this.subjectSelect]
+      }
+      this.$emit('save', subject)
+      this.hide()
+    },
+    removeSubject: function () {
+      let subject = null
+      if (this.subjectList[this.subjectSelect]) {
+        subject = this.subjectList[this.subjectSelect]
+      }
+      this.$emit('remove', subject)
+      this.hide()
+    },
+    removeDevice: function () {
+      this.deleteDeviceProject({ deviceKey: this.key })
+      this.$emit('save')
+      this.hide()
+    },
+    getSubjectList: async function (subject) {
+    },
+    initSetting: async function (subject) {
+      this.subjectList.length = 0
+      const subjectResponse = await api.subject.get()
+      if (subjectResponse.status === 200) {
+        this.subjectList.push(...subjectResponse.data)
+      }
+      this.name = ''
+      this.description = ''
+      this.subjectSelect = -1
+      if (subject) {
+        this.subjectSelect = this.subjectList.findIndex((ele) => ele.id === subject.id)
+      }
+      // this.key = key
+      // this.device = device
+      // this.deviceList = []
+      // this.deviceSelect = 0
+      // this.getDeviceList(device)
+    },
+    ...mapActions('project',
+      [
+        types.project.addDevice,
+        types.project.findDevice,
+        types.project.setDevice,
+        types.project.deleteDevice,
+        types.project.checkNotRegisterDevice,
+        types.task.init,
+        types.task.create,
+        types.task.save,
+        types.task.delete,
+        types.task.select,
+      ],
+    ),
+  },
+  mounted () {
+  },
+}
+</script>
+<style lang="scss">
+  .list-focus {
+    background: #ebedff;
+    border: 1px solid #dbdcf0;
+    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
+    border-radius: 5px;
+  }
+</style>

src/components/project/view/table/ProjectTable.vue

@@ -1,66 +1,124 @@
 <template>
-  <div class="markup-tables project-table flex d-flex sm12 xl12 md12 xs12" id="scro" style="height: 66vh; overflow: auto;">
-    <div class="table-wrapper">
-      <table class="va-table">
+  <div class="markup-tables project-table flex d-flex sm12 xl12 md12 xs12 px-0 mx-0" id="scro" style="width: 100%; height: 55vh; overflow: auto; padding-top: 0;">
+    <div class="table-wrapper" style="width: 100%;">
+      <table class="va-table project-table-text">
         <thead>
-          <tr>
-            <th v-if="lockMode === false">
-              <va-checkbox
-                v-model="tableColumn.checked"
-                :array-value="'-1'"
-                @input="selectAll($event)"
-              />
-            </th>
-            <th align="center">order</th>
-            <th align="center">name</th>
+          <tr class="project-table-header">
+            <th align="center" style="min-width: 50px; 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 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>
-          <template v-for="(task, taskIndex) in getSelectProject.task">
-            <tr v-if="task.device.length === 0" :key="taskIndex" height="80px">
-              <td v-if="lockMode === false">
-                <va-checkbox
-                  v-model="tableColumn.checked"
-                  :array-value="String(taskIndex)"
-                />
-              </td>
+        <!-- <tbody> -->
+        <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="50px"
+              @click="showCycleModal(task.uuid)"
+            >
               <td align="center">
                 {{ taskIndex + 1 }}
               </td>
-              <td align="center">
-                {{ task.name }}
+              <td align="center" @dblclick="switchInput('name', taskIndex)">
+                <div v-if="tableColumn.name == taskIndex && getCycleInfo(task.uuid, 'useID') === true && lockMode === true">
+                  <va-input
+                    v-model="inputSaved"
+                    style="width: 100px;"
+                    @blur="switchCycle('name', -1, getSelectProject, task)"
+                    @keyup.enter="switchCycle('name', -1, getSelectProject, task)"
+                  />
+                </div>
+                <div v-else>
+                  <div v-if="getCycleInfo(task.uuid, 'useID') === true">
+                    {{ getCycleInfo(task.uuid, 'id') }}
+                  </div>
+                  <div  v-if="getCycleInfo(task.uuid, 'useID') === false">
+                    {{ getCycleInfo(task.uuid, 'name') }}
+                  </div>
+                </div>
               </td>
-              <td align="center">
-                <va-button :flat="true" @click="openConfig(1, taskIndex)" small>Device</va-button>
+              <td align="center" v-if="getCycleLocation(task.uuid) === 'start'">
+                {{ getCycleInfo(task.uuid, 'max') }} Rounds
               </td>
-              <td align="center">
-                <va-button :flat="true" @click="openConfig(3, taskIndex)" small>Add event</va-button>
+              <td  v-if="lockMode === true && getCycleLocation(task.uuid) === 'start'">
+                {{ getCycleInfo(task.uuid, 'count') }} / {{ getCycleInfo(task.uuid, 'max') }}
               </td>
-              <td align="center">
-                <va-button :flat="true" @click="openConfig(4, taskIndex)" small>ParameterSet</va-button>
-              </td>
-              <td align="center">
-                <va-icon class="fa fa-close" @click.native="() => deleteTask({ index: taskIndex})"></va-icon>
+              <td  v-if="lockMode === true && Object.values(task.condition).findIndex(ele => ele.type == 'until_button_trigger') != -1 && task.status === 1">
+                <va-button  icon="fa fa-play" @click="trigger_button(getSelectProject)" flat></va-button>
+              <td/>
+              <td align="center" v-if="lockMode === true">
+                <fulfilling-bouncing-circle-spinner
+                  v-if="task.status === 1"
+                  :animation-duration="3000"
+                  :color="'#6c7fee'"
+                  :size="16"
+                ></fulfilling-bouncing-circle-spinner>
+                <!-- <va-icon v-if="task.status === 2" class="fa fa-check"></va-icon> -->
               </td>
             </tr>
-            <tr v-for="(deviceUUID) in task.device" :key="taskIndex + deviceUUID" height="80px">
-              <td v-if="lockMode === false">
-                <va-checkbox
-                  v-model="tableColumn.checked"
-                  :array-value="String(taskIndex)"
-                />
-              </td>
+            <tr
+              v-else-if="task.device && task.device.length === 0"
+              :class="taskIndex === projectTableSelectIndex ? 'table-row-focus' : ''"
+              :key="'empty' + taskIndex" height="50px"
+              @click="() => { projectTableSelectIndex = taskIndex }"
+            >
               <td align="center">
-                {{  taskIndex + 1 }}
+                {{ taskIndex + 1 }}
               </td>
+              <!-- name -->
               <td align="center" @dblclick="switchInput('name', taskIndex)">
                 <div v-if="tableColumn.name == taskIndex && lockMode === false">
                   <va-input
+                    :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>+</va-button>
+              </td>
+              <td align="center">
+                <va-button :flat="true" @click="openConfig(2, taskIndex)" :disabled="true" small>-</va-button>
+              </td>
+              <td align="center">
+                <va-button :flat="true" @click="openConfig(3, taskIndex)" :disabled="true" small>-</va-button>
+              </td>
+              <td align="center">
+                <va-button :flat="true" @click="openConfig(4, taskIndex)" :disabled="true" small>-</va-button>
+              </td>
+            </tr>
+            <tr
+              v-else
+              height="50px"
+              :class="taskIndex === projectTableSelectIndex ? 'table-row-focus' : ''"
+              :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)"
@@ -71,36 +129,114 @@
                   {{ task.name }}
                 </div>
               </td>
-              <td align="center" @click="openConfig(1, taskIndex, deviceUUID)">
-                <div >
-                  <span>{{ getDeviceProject(deviceUUID) && getDeviceProject(deviceUUID).name }}</span>
+              <!-- device -->
+              <td align="center">
+                <div v-if="task.device && task.device.length === 0">
+                  <va-button :flat="true" @click="openConfig(1, taskIndex, deviceUUID)" small>
+                    + Device
+                  </va-button>
+                </div>
+                <div v-else>
+                  <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>
-              <td align="center" @click="openConfig(3, taskIndex, deviceUUID)">
-                <div class="flex">
+              <!-- device end -->
+              <!-- start -->
+              <td align="center">
+                <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">
-                        {{ action.type }} {{ task.condition[conditionKey].type }} {{ task.condition[conditionKey].value }}
+                      <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>
                 </div>
               </td>
-              <td align="center" @click="openConfig(4, taskIndex, deviceUUID)">
-                <div class="flex d-flex">
-                  <div class="flex">
-                    <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'"> {{ parameterName(parameterKey) }} : {{ parameterValue(parameterKey, parameter) }} </span>
+              <!-- start end -->
+              <!-- stop -->
+              <td align="center">
+                <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>
                 </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 class="fa fa-close" @click.native="() => deleteTask({ index: taskIndex})"></va-icon>
+                <!-- <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" color="#B8C3CC" @click.native="() => deleteTask({ project: getSelectProject, index: taskIndex})"></va-icon>
               </td>
+              <!-- <td align="center" v-if="lockMode === true">
+                <div v-if="task.cycle > 0 && task.status === 2 && task.cycle_count === 0">
+                  {{ 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">
+                <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
@@ -113,9 +249,16 @@
               </td>
             </tr>
           </template>
-        </tbody>
+        </vuedraggable>
+        <!-- </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" @save="saveProject"></cycle-modal>
+    </div>
   </div>
 </template>
 <script>
@@ -124,11 +267,16 @@ import { mapActions, mapGetters } from 'vuex'
 import types from '@/store/modules/project/types'
 import { FulfillingBouncingCircleSpinner } from 'epic-spinners'
 import configTable from '@/data/config-table/index'
+import vuedraggable from 'vuedraggable'
+import { taskInfo } from '@/data/task/TaskInfo'
+import CycleModal from '@/components/project/view/menu/components/CycleModal'
 
 export default {
   name: 'project-table',
   components: {
     FulfillingBouncingCircleSpinner,
+    vuedraggable,
+    CycleModal,
   },
   computed: {
     config () {
@@ -138,6 +286,9 @@ export default {
     ...mapGetters('project', [
       types.project.getSelect,
       types.project.getDevice,
+      types.project.getCycle,
+      types.project.getDeviceLibrary,
+      types.project.getDeviceShowName,
       types.task.get,
       types.task.getCondition,
       types.task.getParameterSet,
@@ -149,6 +300,7 @@ export default {
       'deviceSelectKey',
       'lockMode',
       'projectLibrary',
+      'projectTableSelectIndex',
     ]),
   },
   data () {
@@ -157,13 +309,134 @@ export default {
         name: -1,
         checked: [],
       },
+      inputSaved: '',
+      index: -1,
+      futureIndex: -1,
+      inputMode: false,
     }
   },
   methods: {
+    transTime: function (sec) {
+      if (sec === undefined || sec === 'None') {
+        return '0 s'
+      }
+
+      let result = ''
+
+      if (sec < 1) {
+        result = '~ 1 s'
+      } else {
+        let seconds = parseInt(sec / 1)
+
+        if (seconds < 60) {
+          result = `${seconds} sec`
+        } else {
+          let minutes = parseInt(seconds / 60)
+          seconds %= 60
+          if (minutes < 60) {
+            if (seconds === 0) {
+              result = `${minutes} min`
+            } else {
+              result = `${minutes} m ${seconds} s`
+            }
+          } else {
+            const hours = parseInt(minutes / 60)
+            minutes %= 60
+            if (seconds === 0 && minutes === 0) {
+              result = `${hours} hour`
+            } else {
+              result = `${hours} h ${minutes} m ${seconds} s`
+            }
+          }
+        }
+      }
+      return result
+    },
+    mqttPub: function (topic, mes) {
+      this.$mqtt.publish(topic, mes)
+    },
+    dragEnd: function (event) {
+      const newTaskList = JSON.parse(JSON.stringify(this.getSelectProject.task))
+      const b = newTaskList[event.oldDraggableIndex]
+      const a = newTaskList[event.newDraggableIndex]
+      if (b && b.device.length === 0) return
+      if (a === undefined) return
+      newTaskList.filter(ele => ele != null)
+      this.rearrangeTask({ project: this.getSelectProject })
+      this.saveProject()
+    },
+    swapTask: function (taskIndex, upDown) {
+      taskIndex = parseInt(taskIndex)
+      if (upDown === 0) {
+        const a = this.getSelectProject.task[taskIndex]
+        this.getSelectProject.task.splice(taskIndex, 1, this.getSelectProject.task[taskIndex - 1])
+        this.getSelectProject.task.splice(taskIndex - 1, 1, a)
+      } else {
+        const a = this.getSelectProject.task[taskIndex]
+        this.getSelectProject.task.splice(taskIndex, 1, this.getSelectProject.task[taskIndex + 1])
+        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))
+      const _condition = JSON.parse(JSON.stringify(task.condition))
+
+      delete _action[actionKey]
+      delete _condition[conditionKey]
+
+      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)
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'set_project/0',
+        project: projectID.uuid,
+        content: 'test',
+      }))
+    },
     switchInput: function (tag, index) {
-      this.tableColumn[tag] >= 0
-        ? this.tableColumn[tag] = -1
-        : this.tableColumn[tag] = index
+      if (this.tableColumn[tag] === -1) {
+        if (index !== -1) {
+          this.inputMode = true
+          this.tableColumn[tag] = index
+          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)
+      const cycleInfo = this.getCycleProject(task.uuid) // 0: index, 1: location, 2: info
+      if (this.inputSaved === cycleInfo[2].id) return
+      cycleInfo[2].id = this.inputSaved
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'set_project_cycle/0',
+        project: projectID.uuid,
+        index: cycleInfo[0],
+        content: { id: this.inputSaved },
+      }))
+      this.$emit('save', this.getSelectProject)
     },
     selectAll: function (selectedArray) {
       const totalRange = [...Array(this.getSelectProject.task.length).keys()].map(idx => String(idx))
@@ -177,7 +450,7 @@ export default {
     openConfig (type, taskIndex, deviceKey) {
       console.log(type, taskIndex, deviceKey, this.taskViewPanel.type, this.taskSelectKey, this.deviceSelectKey)
       if (!this.lockMode) {
-        if (this.taskViewPanel.type === type && this.taskSelectKey === taskIndex && this.deviceSelectKey === deviceKey) {
+        if (this.taskViewPanel.type === type && this.taskSelectKey === taskIndex && this.deviceSelectKey === deviceKey && this.taskViewPanel.show === true) {
           this.taskSelectKey = ''
           this.taskViewPanel.type = -1
           this.taskViewPanel.show = false
@@ -190,30 +463,109 @@ export default {
         }
       }
     },
-    parameterName (name) {
-      if (name === 'MODE') {
-        return 'Mode'
+    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
       }
-      if (typeof this.config[name].showName === 'function') {
-        return this.config[name].showName()
-      }
-      return this.config[name].showName
     },
-    parameterValue (name, value) {
-      if (name === 'MODE') {
-        return this.config.MODE[value].name
+    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 ''
+          }
+        }
       }
-      if (this.config[name].type === 'number') {
-        const scale = this.config[name].unit[this.config[name].defaultUnit]
-        return `${this.config[name].outputReadabilityData(value, scale)} ${this.config[name].defaultUnit}`
-      } else if (this.config[name].type === 'array') {
-        return `${this.config[name].outputReadabilityData(value)}`
-      } else if (this.config[name].type === 'none') {
-        return ''
+      return _name + ': ' + _value
+    },
+    parameterName (name, deviceKey) {
+      const config = configTable.getConfig(this.getDeviceLibraryProject(deviceKey))
+      if (config !== undefined && Object.keys(config) !== 0) {
+        if (name === 'MODE') {
+          return 'Mode'
+        }
+        if (typeof config[name].showName === 'function') {
+          return config[name].showName()
+        }
+        return config[name].showName
       }
     },
+    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
+        }
+        if (config[name].type === 'number') {
+          const scale = config[name].unit[config[name].defaultUnit]
+          return `${config[name].outputReadabilityData(_value, scale)} ${config[name].defaultUnit}`
+        } else if (config[name].type === 'array') {
+          return `${config[name].outputReadabilityData(_value)}`
+        } else if (config[name].type === 'none') {
+          return ''
+        }
+      }
+    },
+    showCycleModal: function (uuid) {
+      if (!this.lockMode) {
+        this.$refs.cycle_modal_ref.show()
+        this.$refs.cycle_modal_ref.setCycleInfo(this.getSelectProject, uuid)
+      }
+    },
+
+    getCycleInfo: function (uuid, attribute) {
+      const cycleInfo = this.getCycleProject(uuid) // 0: index, 1: location, 2: info
+      if (cycleInfo.length === 0) return ''
+      return cycleInfo[2][attribute]
+    },
+
+    getCycleLocation: function (uuid) {
+      const cycleInfo = this.getCycleProject(uuid) // 0: index, 1: location, 2: info
+      return cycleInfo[1]
+    },
+
+    getConfig: function (deviceKey) {
+      return this.getDeviceLibraryProject(deviceKey)
+    },
+
+    handleMove (e) {
+      const { index, futureIndex } = e.draggedContext
+      this.index = index
+      this.futureIndex = futureIndex
+      return false // disable sort
+    },
     ...mapActions('project', [
+      types.task.create,
+      types.task.copy,
       types.task.delete,
+      types.task.rearrange,
     ]),
   },
   mounted () {
@@ -222,6 +574,18 @@ export default {
 </script>
 
 <style lang="scss">
+  .draggable {
+    width: 500px;
+    margin: auto;
+  }
+
+  .table-row-focus {
+    background: #ebedff;
+    // border: 0.5px solid #dbdcf0;
+    // box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
+    border-radius: 5px;
+  }
+
   .markup-tables {
     width: 100%;
 
@@ -238,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 {
@@ -253,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>

src/components/task/content/TaskContent.vue

@@ -143,13 +143,29 @@ export default {
       showDeviceSetting: true,
       chartAreaClass: ['flex', 'xs12', 'sm12', 'md12', 'xl8', 'pa-0'],
       getParmDone: false,
+      batteryInterval: {},
     }
   },
   mqtt: {
+    async '+/device_battery/+' (data, topic) {
+      const deviceBattery = JSON.parse(String.fromCharCode.apply(null, data)).data
+      const device = this.deviceListNew.find(ele => ele.memory_board === deviceBattery.device)
+      device.battery = deviceBattery.battery
+    },
     async '+/get_device_info_all/+' (data, topic) {
       // console.log('get_device_info_all', String.fromCharCode.apply(null, data))
       this.deviceListNew = JSON.parse(String.fromCharCode.apply(null, data)).data
 
+      // console.log(this.deviceListNew)
+
+      for (let i = 0; i < this.deviceListNew.length; i++) {
+        const curDevice = this.deviceListNew[i]
+        if ((curDevice.memory_board in this.batteryInterval) === false) {
+          this.batteryInterval[curDevice.memory_board] = setInterval(() => { this.getBattery(curDevice) }, 60000)
+        }
+      }
+      // console.log(this.batteryInterval)
+
       // console.log(this.deviceListNew)
       // await taskInfo.deviceInfo(String.fromCharCode.apply(null, data), this.deviceList)
       // console.log('this.deviceList 0', this.deviceList)
@@ -296,7 +312,14 @@ 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
+          this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+            header: 'get_device_info_all/0',
+          }))
+          this.pageToast(mes[1])
           break
         default:
           break
@@ -304,6 +327,12 @@ export default {
     },
   },
   methods: {
+    getBattery: function (device) {
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_battery/0',
+        device: device.memory_board,
+      }))
+    },
     mqttSub: function (val) {
       this.$mqtt.subscribe(val)
     },
@@ -321,6 +350,7 @@ export default {
       this.mqttSub(id + '/device_parameter/+')
       this.mqttSub(id + '/device_parameter_value/+')
       this.mqttSub(id + '/device_sd_card_status/+')
+      this.mqttSub('+/device_battery/+')
     },
     pageMqttUnSub: function (id) {
       for (const device in taskInfo.getTaskInfo().deviceList) {
@@ -333,6 +363,7 @@ export default {
       this.mqttUnSub(id + '/device_parameter/+')
       this.mqttUnSub(id + '/device_parameter_value/+')
       this.mqttUnSub(id + '/device_sd_card_status/+')
+      this.mqttUnSub('+/device_battery/+')
     },
     pageInit: async function () {
       if (await this.$refs.devices_ref != null) {
@@ -364,7 +395,7 @@ export default {
           continue
         }
         // device is running refresh chart
-        if (device.status === 1 && this.chartData[chart].captured !== true) {
+        if (this.chartData[chart].captured !== true) {
           this.taskContentChartRefreshData({
             chartID: chart,
             deviceList: this.deviceListNew,
@@ -405,7 +436,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
     },
@@ -423,7 +454,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
@@ -459,7 +490,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
@@ -500,8 +531,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 + '/+')
@@ -511,7 +543,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)
@@ -591,6 +623,7 @@ export default {
       })
     },
     switchMode: function () {
+      console.log('switch mode', this.developerMode)
       this.developerMode = !this.developerMode
     },
 
@@ -615,10 +648,11 @@ export default {
     }
 
     await taskInfo.updateTaskInfo(this.$route.params.taskID)
+    this.GLOBAL.refreshCache()
     this.pageMqttSub(taskInfo.getTaskInfo().controllerID)
     await this.pageInit()
 
-    this.dataRefreshTimer = setInterval(this.refreshData, 1000)
+    this.dataRefreshTimer = setInterval(this.refreshData, 100)
 
     var switchModeHander = function (switchMode, e) {
       if (e.shiftKey && e.metaKey && e.keyCode === 83) {
@@ -639,6 +673,10 @@ export default {
     }
     clearInterval(this.dataRefreshTimer)
     this.pageMqttUnSub(taskInfo.getTaskInfo().controllerID)
+
+    for (var interval in this.batteryInterval) {
+      clearInterval(this.batteryInterval[interval])
+    }
   },
 
 }

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

@@ -3,10 +3,13 @@
     <va-card>
       <template slot="header">
         <div class="row flex sm12 xl12 md12 xs12 align--center my-0 py-0">
-          <div class="flex sm5 xl5 md5 xs5 px-0 mx-0">
-            <h5 class="mt-0 mb-0"><va-icon name="fa fa-area-chart mr-3" color="primary"/>{{ nameCard }}</h5>
+          <div class="flex sm1 xl1 md1 xs1 px-0 mx-0">
+            <h5 class="mt-0 mb-0" style="">{{ nameCard }}</h5>
           </div>
-          <div class="flex sm7 xl7 md7 xs7 pa-0 ma-0" style="text-align: right;">
+          <div class="flex sm9 xl9 md9 xs9 px-0 " style="margin-left: -5px; color: #9aa4af;">
+            <p class="mt-0 mb-0">{{ chartInfo }}</p>
+          </div>
+          <div class="flex sm2 xl2 md2 xs2 pa-0 ma-0" style="text-align: right;">
             <va-button class="pa-0 ma-0 circle-button" small color="dark" @click="remove()">
               <va-icon
                 name="fa fa-times"
@@ -14,14 +17,6 @@
               />
             </va-button>
           </div>
-          <div class="flex xl10">
-            <canvas-chart-real-time-calculation :chartID="chartID" @refreshData="refreshData" @switchModeButton="switchModeButton" @getClicked="getClicked" ref="'cal_ref'" />
-          </div>
-          <div class="flex xl2">
-            <va-button :disabled="calClicked" color="#f5aa3b" @click="captureChart" small>
-              CAPTURE
-            </va-button>
-          </div>
         </div>
       </template>
       <va-tabs v-model="tabValue" class="mb-3" style="width: 100%; min-width: 100px;">
@@ -34,9 +29,21 @@
       </va-tabs>
       <div v-if="tabValue == 0" >
         <div v-if="chartData[chartID].legend.data.length != 0">
-          <canvas-chart-real-time-display
-            :chartID="chartID" ref="CanvasChartRealTimeDisplay"
-          />
+          <div class="row flex xl12 lg12 sm12 xs12 ma-0 pa-0">
+            <!-- <div class="flex xl1 lg1 sm0 xs0 ma-0 pa-0"> -->
+            <div class="flex ma-0 pa-0">
+            </div>
+            <!-- <div class="flex xl7 lg7 sm7 xs7 ma-0 pa-0"> -->
+            <div class="flex ma-0 pa-0">
+              <canvas-chart-real-time-display
+                :chartID="chartID" ref="CanvasChartRealTimeDisplay"
+              />
+            </div>
+            <!-- <div class="flex xl4 lg4 sm4 xs4 ma-0 pa-0"> -->
+            <div class="flex ma-0 pa-0">
+              <canvas-chart-real-time-calculation :chartID="chartID" @refreshData="refreshData" @switchModeButton="switchModeButton" @getClicked="getClicked" @captureChart="captureChart" ref="'cal_ref'" />
+            </div>
+          </div>
           <div class="flex" v-if="developerMode">
             <div v-for="(data, device) in dataStreamBuffer.getByChartID(chartID)" :key="device">
               <div v-for="(i, channel) in data" :key="channel">
@@ -44,12 +51,61 @@
               </div>
             </div>
           </div>
+          <!-- <div class="row flex align--left ma-0 pa-0">
+            <va-input
+              v-if="chartData[chartID].chartXMode === 'time'"
+              class="mx-1"
+              @keyup.enter="timeIntervalChange(timeIntervalInput)"
+              @blur="timeIntervalChange(timeIntervalInput)"
+              v-model="timeIntervalInput"
+              :label="'time-grid'"
+            >
+              <p slot="append" style="margin-right: 0;" small>
+                ms
+              </p>
+            </va-input>
+            <va-input
+              v-if="chartData[chartID].chartXMode === 'value'"
+              class="mx-1"
+              @keyup.enter="xIntervalChange(xIntervalInput)"
+              @blur="xIntervalChange(xIntervalInput)"
+              v-model="xIntervalInput"
+              :label="'x-grid'"
+            >
+              <p slot="append" style="margin-right: 0;" small>
+                {{chartData[chartID].chartXUnit}}
+              </p>
+            </va-input>
+            <va-input
+              class="mx-1"
+              @keyup.enter="yIntervalChange(yIntervalInput)"
+              @blur="yIntervalChange(yIntervalInput)"
+              v-model="yIntervalInput"
+              :label="'y-grid'"
+            >
+              <p slot="append" style="margin-right: 0;" small>
+                {{chartData[chartID].chartYUnit}}
+              </p>
+            </va-input>
+            <va-input
+              v-if="chartData[chartID].chartDevice === 'neulive'"
+              class="mx-1"
+              @keyup.enter="threeAxisIntervalChange(threeAxisIntervalInput)"
+              @blur="threeAxisIntervalChange(threeAxisIntervalInput)"
+              v-model="threeAxisIntervalInput"
+              :label="'3axis-grid'"
+            >
+              <p slot="append" style="margin-right: 0;" small>
+                g
+              </p>
+            </va-input>
+          </div> -->
           <!-- chart -->
           <chart :key="taskContentChartKey" :ref="'chart_ref'" :style="'width: '+ cardwidth + '; height: ' + cardheight + ';'" :option="data" @dataZoom="updateZoom" :auto-resize="true"></chart>
         </div>
       </div>
       <div v-else-if="tabValue == 1" :style="'width: '+ cardwidth + '; height: ' + cardheight + ';'" >
-        <canvas-chart-source :chartID="chartID" @addSource="addSource()" />
+        <canvas-chart-source :chartID="chartID" />
       </div>
       <div v-else :style="'width: '+ cardwidth + '; height: ' + cardheight + ';'" >
       </div>
@@ -61,55 +117,6 @@
           INVERSE SELECT
         </va-button>
       </div> -->
-      <div class="row flex align--left ma-0 pa-0 mt-2">
-        <va-input
-          v-if="chartData[chartID].chartXMode === 'time'"
-          class="mx-1"
-          @keyup.enter="timeIntervalChange(timeIntervalInput)"
-          @blur="timeIntervalChange(timeIntervalInput)"
-          v-model="timeIntervalInput"
-          :label="'time-grid'"
-        >
-          <p slot="append" style="margin-right: 0;" small>
-            ms
-          </p>
-        </va-input>
-        <va-input
-          v-if="chartData[chartID].chartXMode === 'value'"
-          class="mx-1"
-          @keyup.enter="xIntervalChange(xIntervalInput)"
-          @blur="xIntervalChange(xIntervalInput)"
-          v-model="xIntervalInput"
-          :label="'x-grid'"
-        >
-          <p slot="append" style="margin-right: 0;" small>
-            {{chartData[chartID].chartXUnit}}
-          </p>
-        </va-input>
-        <va-input
-          class="mx-1"
-          @keyup.enter="yIntervalChange(yIntervalInput)"
-          @blur="yIntervalChange(yIntervalInput)"
-          v-model="yIntervalInput"
-          :label="'y-grid'"
-        >
-          <p slot="append" style="margin-right: 0;" small>
-            {{chartData[chartID].chartYUnit}}
-          </p>
-        </va-input>
-        <va-input
-          v-if="chartData[chartID].chartDevice === 'neulive'"
-          class="mx-1"
-          @keyup.enter="threeAxisIntervalChange(threeAxisIntervalInput)"
-          @blur="threeAxisIntervalChange(threeAxisIntervalInput)"
-          v-model="threeAxisIntervalInput"
-          :label="'3axis-grid'"
-        >
-          <p slot="append" style="margin-right: 0;" small>
-            g
-          </p>
-        </va-input>
-      </div>
       <div class="row flex ma-0 pa-0" v-if="developerMode === true">
         <canvas-chart-filter :chartID="chartID" :filterIndex="0" />
         <canvas-chart-filter :chartID="chartID" :filterIndex="1" />
@@ -131,6 +138,7 @@ import { mapActions } from 'vuex'
 import taskTypes from '@/store/modules/task/content/types'
 import CanvasChartRealTimeCalculation from './CanvasChartRealTimeCalculation.vue'
 import { dataStreamBuffer } from '@/data/task/DataStreamBuffer'
+import configTable from '@/data/config-table/index.js'
 
 export default {
   name: 'CanvasChart',
@@ -163,6 +171,13 @@ export default {
     },
   },
   computed: {
+    chartInfo () {
+      if (this.data === undefined || this.data === null) return ''
+      if (this.data.mappingID === undefined || this.data.mappingID === '-1') return ''
+      const device = this.deviceListNew.find(ele => String(ele.memory_board) === String(this.data.mappingID))
+      const deviceMode = configTable.getModeConfig(device.library_name, device.configuration.MODE).name
+      return `${device.name}_[${device.memory_board}] | MAC_${device.mac_address.toUpperCase()} | ${this.data.createdBy} chart: ${deviceMode}`
+    },
     ...mapFields('', [
       'developerMode',
     ]),
@@ -199,19 +214,27 @@ export default {
       this.calClicked = clicked
     },
     captureChart: function () {
+      // count same ID in chartData
+      const captureTimes = String(Object.keys(this.chartData).filter(ele => ele.includes(String(this.data.chartID))).length)
       const newData = Object.assign({}, this.data)
-      this.chartData[String(newData.chartID) + '-1'] = newData
-      this.chartData[String(newData.chartID) + '-1'].captured = true
-      this.chartData[String(newData.chartID) + '-1'].cardName = this.chartData[String(newData.chartID) + '-1'].cardName + ' - captured'
-      this.chartData[String(newData.chartID) + '-1'].chartID = String(newData.chartID) + '-1'
+      this.chartData[String(this.data.chartID) + '-' + captureTimes] = newData
+      this.chartData[String(this.data.chartID) + '-' + captureTimes].captured = true
+      this.chartData[String(this.data.chartID) + '-' + captureTimes].cardName += ' - captured -' + captureTimes
+      this.chartData[String(this.data.chartID) + '-' + captureTimes].createdBy = 'capture'
+      this.chartData[String(this.data.chartID) + '-' + captureTimes].chartID = String(this.data.chartID) + '-' + captureTimes
       this.taskContentChartPanelKey++
-      // console.log(this.chartData[String(newData.chartID) + '-1'])
     },
     updateZoom: function (e) {
-      this.dataZoomStart = e.batch[0].start
-      this.dataZoomEnd = e.batch[0].end
+      // console.log(e)
+      if (e.batch !== undefined && e.dataZoomId !== '\u0000series\u00002\u00000') {
+        this.dataZoomStart = e.batch[0].start
+        this.dataZoomEnd = e.batch[0].end
+      } else if (e.dataZoomId !== '\u0000series\u00002\u00000') {
+        this.dataZoomStart = e.start
+        this.dataZoomEnd = e.end
+      }
     },
-    timeIntervalChange: function (val) {
+    timeIntervalChange: async function (val) {
       if (!isNaN(parseInt(val))) {
         this.chartData[this.chartID].xAxis.forEach(x => {
           if (x.type === 'time') {
@@ -226,6 +249,7 @@ export default {
           }
         })
       }
+      await this.taskContentChartSaveToCache({ controllerID: taskInfo.getTaskInfo().controllerID })
     },
     xIntervalChange: async function (val) {
       if (!isNaN(parseInt(val))) {
@@ -253,13 +277,13 @@ export default {
             } else {
               y.interval = val * 1000
             }
-            const maxList = []
-            const minList = []
             // TODO: follow this way to iterate the deviceID
-            y.seriesIndex.forEach(i => {
-              maxList.push(Math.max(...this.chartData[this.chartID].series[i].data.map(p => p[1])))
-              minList.push(Math.min(...this.chartData[this.chartID].series[i].data.map(p => p[1])))
-            })
+            // const maxList = []
+            // const minList = []
+            // y.seriesIndex.forEach(i => {
+            //   maxList.push(Math.max(...this.chartData[this.chartID].series[i].data.map(p => p[1])))
+            //   minList.push(Math.min(...this.chartData[this.chartID].series[i].data.map(p => p[1])))
+            // })
             // const max = Math.max(maxList)
             // const min = Math.min(minList)
             // const center = (max + min) / 2
@@ -270,12 +294,10 @@ export default {
           }
         })
       } else {
-        this.timeIntervalInput = 'auto'
+        this.yIntervalInput = 'auto'
         this.chartData[this.chartID].yAxis.forEach(y => {
           if (parseInt(y.channel) <= 255) {
-            // y.interval = null
-            // y.max = 'dataMax'
-            // y.min = 'dataMin'
+            y.interval = null
           }
         })
       }
@@ -376,6 +398,8 @@ export default {
       // save the start & end of previous dataZoom setting to avoid reset dataZoom
       this.data.dataZoom[0].start = this.dataZoomStart
       this.data.dataZoom[0].end = this.dataZoomEnd
+      this.data.dataZoom[1].start = this.data.dataZoom[0].start
+      this.data.dataZoom[1].end = this.data.dataZoom[0].end
       this.$refs.CanvasChartRealTimeDisplay.matchData(this.data)
     },
     switchModeButton: function (dataMode, gridIndex, channelIndex) {

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

@@ -1,29 +1,42 @@
 <template>
   <div>
-    <div class="row xs12 sm12 lg10 xl10 pa-2">
-      <va-button v-if="integralClicked && (mode_name==='Chronoamperometric' || mode_name==='I-T Graph' || mode_name==='I-V Curve')" color="danger" class="mb-2" @click="clickIntegral" small>
-        To Raw Mode
+    <div class="xs12 sm12 lg12 xl12" style="text-align: end;">
+      <!-- <img v-if="!integralClicked && (mode_name==='Chronoamperometric' || mode_name==='I-T Graph' || mode_name==='I-V Curve')" src='@/assets/img/toolbox/integral.svg' @click="clickIntegral"> -->
+      <va-button :flat="true" class="pa-0 ma-0 mr-2" v-if="xlogClicked && (mode_name==='Linear Sweep Voltammetry' || mode_name==='I-V Curve')" color="danger" @click="clickXLog" small>
+        <!-- To Raw Mode -->
+        <img src='@/assets/img/toolbox/LogX_clicked.svg'>
       </va-button>
-      <va-button :disabled="disableInt" v-if="!integralClicked && (mode_name==='Chronoamperometric' || mode_name==='I-T Graph' || mode_name==='I-V Curve')" color="primary" class="mb-2" @click="clickIntegral" small>
-        To Integral Mode
+      <va-button :flat="true" class="pa-0 ma-0 mr-2" :disabled="disableLog" v-if="!xlogClicked && (mode_name==='Linear Sweep Voltammetry' || mode_name==='I-V Curve')" color="#ffffff" @click="clickXLog" small>
+        <!-- To log Mode (x-axis) -->
+        <img src='@/assets/img/toolbox/LogX.svg'>
       </va-button>
-      <va-button v-if="xlogClicked && (mode_name==='Linear Sweep Voltammetry' || mode_name==='I-V Curve')" color="danger" class="mb-2" @click="clickXLog" small>
-        To Raw Mode
+      <va-button :flat="true" class="pa-0 ma-0 mr-2" v-if="ylogClicked && (mode_name==='Linear Sweep Voltammetry' || mode_name==='I-V Curve')" color="danger" @click="clickYLog" small>
+        <!-- To Raw Mode -->
+        <img src='@/assets/img/toolbox/LogY_clicked.svg'>
       </va-button>
-      <va-button :disabled="disableLog" v-if="!xlogClicked && (mode_name==='Linear Sweep Voltammetry' || mode_name==='I-V Curve')" color="primary" class="mb-2" @click="clickXLog" small>
-        To log Mode (x-axis)
+      <va-button :flat="true" :disabled="disableLog" class="pa-0 ma-0 mr-2" v-if="!ylogClicked && (mode_name==='Linear Sweep Voltammetry' || mode_name==='I-V Curve')" color="#ffffff" @click="clickYLog" small>
+        <!-- To log Mode (y-axis) -->
+        <img src='@/assets/img/toolbox/LogY.svg'>
       </va-button>
-      <va-button v-if="ylogClicked && (mode_name==='Linear Sweep Voltammetry' || mode_name==='I-V Curve')" color="danger" class="mb-2" @click="clickYLog" small>
-        To Raw Mode
+      <va-button :flat="true" class="pa-0 ma-0 mr-2" v-if="integralClicked && (mode_name==='Chronoamperometric' || mode_name==='I-T Graph' || mode_name==='I-V Curve')" color="danger" @click="clickIntegral" small>
+        <!-- To Raw Mode -->
+        <img src='@/assets/img/toolbox/integral_clicked.svg'>
       </va-button>
-      <va-button :disabled="disableLog" v-if="!ylogClicked && (mode_name==='Linear Sweep Voltammetry' || mode_name==='I-V Curve')" color="primary" class="mb-2" @click="clickYLog" small>
-        To log Mode (y-axis)
+      <va-button class="pa-0 ma-0 mr-2" :flat="true" :disabled="disableInt" v-if="!integralClicked && (mode_name==='Chronoamperometric' || mode_name==='I-T Graph' || mode_name==='I-V Curve')" color="#ffffff" @click="clickIntegral" small>
+        <!-- To Integral Mode -->
+        <img src='@/assets/img/toolbox/integral.svg'>
       </va-button>
-      <va-button v-if="diffClicked && (mode_name==='Linear Sweep Voltammetry' || mode_name==='I-V Curve')" color="danger" class="mb-2" @click="clickDiff" small>
-        To Raw Mode
+      <va-button :flat="true" class="pa-0 ma-0 mr-2" v-if="diffClicked && (mode_name==='Linear Sweep Voltammetry' || mode_name==='I-V Curve')" color="danger" @click="clickDiff" small>
+        <!-- To Raw Mode -->
+        <img src='@/assets/img/toolbox/dx_clicked.svg'>
       </va-button>
-      <va-button :disabled="disableDiff" v-if="!diffClicked && (mode_name==='Linear Sweep Voltammetry' || mode_name==='I-V Curve')" color="primary" class="mb-2" @click="clickDiff" small>
-        To Differential Mode
+      <va-button :flat="true" :disabled="disableDiff" class="pa-0 ma-0 mr-2" v-if="!diffClicked && (mode_name==='Linear Sweep Voltammetry' || mode_name==='I-V Curve')" color="#ffffff" @click="clickDiff" small>
+        <!-- To Differential Mode -->
+        <img src='@/assets/img/toolbox/dx.svg'>
+      </va-button>
+      <va-button :flat="true" :disabled="calClicked" class="pa-0 ma-0" color="#ffffff" @click="captureChart" small>
+        <!-- CAPTURE -->
+        <img src='@/assets/img/toolbox/capture.svg'>
       </va-button>
     </div>
     <div class="row xs12 sm12 lg6 xl6 pa-2" v-if="diffClicked">
@@ -47,7 +60,7 @@
 import { mapFields } from 'vuex-map-fields'
 import { mapActions } from 'vuex'
 import taskTypes from '@/store/modules/task/content/types'
-import paramTable from '@/data/config-table/index'
+import configTable from '@/data/config-table/index'
 // import newTooltip from '@/factories/chart/tooltipFactory'
 import { getTimeFormatter } from '@/store/modules/task/content/actions/chartAct'
 import sgFilter from '@/data/SGFilter'
@@ -68,14 +81,13 @@ export default {
     ]),
     ...mapFields('taskContent', [
       'chartData',
-      'taskContentChartKey',
+      'taskContentChartPanelKey',
       'deviceListNew',
     ]),
   },
   data () {
     return {
       info: null,
-      paramTable: paramTable,
       rawData: null,
       mode_name: '',
       xName: '',
@@ -88,6 +100,7 @@ export default {
       disableDiff: false,
       disableLog: false,
       disableInt: false,
+      calClicked: false,
       sgFilterArgument: {
         windowSize: 5,
         polynomial: 3,
@@ -107,6 +120,12 @@ export default {
     },
   },
   methods: {
+    captureChart: function () {
+      this.$emit('captureChart')
+    },
+    getClicked: function (clicked) {
+      this.calClicked = clicked
+    },
     // Do arithmetic operations triggered by button(raw, integral, log)
     watchHandler: function () {
       // this.data need to be deep copy from rawData, since we don't want to modify the source(chartData[])
@@ -221,19 +240,23 @@ export default {
         const dataX = []
         const dataY = []
         const time = []
-        for (index = 0; index < dataLength; index++) {
+        const dsample = 1
+        const m = parseInt((this.sgFilterArgument.windowSize - 1) / 2)
+
+        for (index = 0; index < dataLength; index += dsample) {
           dataX.push(seriesData[index][0])
-          dataY.push(seriesData[index][1])
+          dataY.push(seriesData[index][1] * 1e-9)
           time.push(seriesData[index][2])
         }
+        // console.log(time[time.length - 1], time[0])
+        // console.log(dataX.length, time[time.length - 1] - time[0], dataX.length * 1e6 / (time[time.length - 1] - time[0]))
         // console.log('dataX', dataX)
         // console.log('dataY', dataY)
         // console.log('time', time)
-        const filteredData = sgFilter(dataY, this.sgFilterArgument.windowSize, this.sgFilterArgument.polynomial)
-        // console.log('filterdData', filteredData)
+        const filteredData = sgFilter(dataY, this.sgFilterArgument.windowSize, this.sgFilterArgument.polynomial, this.getSampleRate())
 
-        for (index = 0; index < dataLength; index++) {
-          _data.push([dataX[index], filteredData[index], time[index]])
+        for (index = 0; index < filteredData.length; index++) {
+          _data.push([dataX[index + m], filteredData[index], time[index + m]])
         }
 
         // for (index = 0; index < dataLength; index++) {
@@ -261,29 +284,26 @@ export default {
       const dataRaw = this.data.series[0].data
       if (this.integralClicked || this.xlogClicked || this.ylogClicked || this.diffClicked) {
         this.data.series[0].data = _data
-        this.$emit('getClicked', true)
+        this.getClicked(true)
         // console.log(this.data.series[0].data[this.data.series[0].data.length - 1])
       } else {
-        this.$emit('getClicked', false)
+        this.getClicked(false)
       }
       this.data.xAxis[0].type = 'value'
       if (this.xName !== 'TIME') {
         // console.log('not time')
         this.data.xAxis[0].max = (value) => {
           if (value.max < 0) {
-            return value.max - 0.1 * value.max
+            return value.max - 0.05 * value.max
           }
-          if (value.max + 0.1 * value.max > 5e6) {
-            return 5e6
-          }
-          return value.max + 0.1 * value.max
+          return value.max + 0.05 * value.max
         }
 
         this.data.yAxis[0].max = (value) => {
           if (value.max < 0) {
-            return value.max - 0.1 * value.max
+            return value.max - 0.05 * value.max
           }
-          return value.max + 0.1 * value.max
+          return value.max + 0.05 * value.max
         }
       }
       if (this.integralClicked) {
@@ -400,13 +420,27 @@ export default {
       var value = this.data.series[0].data[(this.data.series[0].data).length - 1][1]
       return this.yName + ': ' + value + ' ' + this.yUnit
     },
-
+    getSampleRate: function () {
+      try {
+        const deviceMappingID = this.chartData[this.chartID].mappingID
+        const device = this.deviceListNew.find(ele => ele.memory_board === deviceMappingID)
+        const deviceConfig = configTable.getConfig(deviceMappingID)
+        const voltStep = deviceConfig.VOLT_STEP.outputReadabilityData(device.configuration.VOLT_STEP)
+        const sampleRate = deviceConfig.SAMPLE_RATE.outputReadabilityData(device.configuration.SAMPLE_RATE)
+        return (1 / (voltStep / 1000)) * sampleRate
+      } catch (e) {
+        console.log('getSampleRateERROR', e)
+        return 1
+      }
+    },
     ...mapActions('taskContent', [
       taskTypes.chart.saveToCache,
     ]),
   },
   async mounted () {
     this.rawData = this.chartData[this.chartID]
+    // const test = [3.0, 12.9, 22.6, 32.10000000000001, 41.4, 50.5, 59.400000000000006, 68.1, 76.6, 84.9, 93.0, 100.9, 108.60000000000001, 116.1, 123.39999999999999, 130.5, 137.4, 144.10000000000002, 150.6, 156.9, 163.0, 168.9, 174.60000000000002, 180.10000000000002, 185.4, 190.5, 195.39999999999998, 200.1, 204.59999999999997, 208.90000000000003, 213.0, 216.89999999999998, 220.59999999999997, 224.09999999999997, 227.40000000000003, 230.5, 233.39999999999998, 236.1, 238.6, 240.90000000000003, 243.0, 244.9, 246.6, 248.10000000000002, 249.40000000000003, 250.5, 251.40000000000003, 252.09999999999997, 252.6, 252.9, 253.0, 252.90000000000003, 252.59999999999997, 252.10000000000002, 251.39999999999998, 250.5, 249.39999999999992, 248.09999999999997, 246.60000000000002, 244.89999999999998, 243.0, 240.89999999999992, 238.59999999999997, 236.10000000000002, 233.39999999999992, 230.5, 227.39999999999992, 224.10000000000002, 220.60000000000002, 216.89999999999992, 213.0, 208.89999999999986, 204.5999999999999, 200.10000000000002, 195.39999999999998, 190.5, 185.39999999999998, 180.0999999999999, 174.60000000000002, 168.89999999999998, 163.0, 156.89999999999998, 150.5999999999999, 144.10000000000002, 137.39999999999998, 130.5, 123.40000000000009, 116.10000000000002, 108.60000000000002, 100.89999999999986, 93.0, 84.90000000000009, 76.60000000000002, 68.10000000000002, 59.399999999999864, 50.5, 41.399999999999864, 32.09999999999991, 22.59999999999991, 12.899999999999977]
+    // console.log('sgFilter', sgFilter(test, 5, 2, 10))
     // console.log('x', this.rawData.xAxis.length)
     // if (this.mode_name === 'I-V Curve') {
     //   this.rawData.xAxis[0].boundaryGap = [0, '5%']

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

@@ -1,51 +1,88 @@
 <template>
   <div>
-    <!-- cycle display -->
-    <div v-if="data !== null && data.cycle > 0" class="row flex sm12 xl12 md12 xs12 align--center my-0 py-0">
-      <div  style="text-align: right;">
-        <h1 style="color: #707ee7;"> cycle <span style="color: white; background-color: #707ee7; border-radius: 40%;" class="pa-2">{{ data.cycle }}</span></h1>
-      </div>
-    </div>
-    <div v-for="(chart, chartIndex) in realTime" :key="'c'+chartIndex">
-      <div v-for="(grid, gridIndex) in chart" :key="'s'+gridIndex" class="row ma-0 pa-0">
-        <div class="col flex xs0 sm0 lg0 md0 xl0 xxl1"/>
-        <div class="col flex xs2 sm2 lg2 md2 xl2 xxl1" pa-0 ma-0>
-          <p color="primary" style="text-align: right;">{{ grid.name }}</p>
-        </div>
-        <!-- value (y-axis) -->
-        <div class="col flex sm2 xl2 md2 xs2">
+    <!-- Whole Real-time Display Tool here -->
+    <div v-for="(plot, plotIndex) in realTime" :key="plotIndex">
+      <div v-for="(curve, curveIndex) in plot" :key="plotIndex + '-' + curveIndex" class="row ma-0 pa-0">
+        <!-- cycle -->
+        <div class="mt-1" style="width: 75px;" v-show="data !== null && data.cycle > 0">
           <va-input
-            label="y-value"
-            disable="disable"
-            v-model="grid.yValue"
+            label="cycle no."
+            v-model="data.cycle"
+            disabled
           />
         </div>
-        <!-- unit (y-axis) -->
-        <div class="col flex sm2 xl2 md2 xs2">
-          <va-select
-            label="y-unit"
-            v-model="grid.yUnit"
-            :options="grid.yUnitOption"
-            noClear
-          />
+        <!-- y-axis -->
+        <div class="d-flex flex-row mt-1 ml-1">
+          <!-- value (y-axis) -->
+          <div style="width: 75px;">
+            <va-input
+              label="y-axis"
+              v-model="curve.yValue"
+              disabled
+            />
+          </div>
+          <!-- unit (y-axis) -->
+          <div style="width: 75px;">
+            <va-select
+              v-model="curve.yUnit"
+              :options="curve.yUnitOption"
+              @input="changeUnit('y', plotIndex, curveIndex)"
+              noClear
+            />
+          </div>
         </div>
-        <div class="col flex sm1 xl1 md1 xs1"></div>
-        <!-- value (x-axis) -->
-        <div class="col flex sm2 xl2 md2 xs2">
-          <va-input
-            label="x-value"
-            disable="disable"
-            v-model="grid.xValue"
-          />
+        <!-- x-axis -->
+        <div class="d-flex flex-row mt-1 ml-1">
+          <!-- value (x-axis) -->
+          <div style="width: 75px;">
+            <va-input
+              label="x-axis"
+              v-model="curve.xValue"
+              disabled
+            />
+          </div>
+          <!-- unit (x-axis) -->
+          <div style="width: 75px;">
+            <va-select
+              v-model="curve.xUnit"
+              :options="curve.xUnitOption"
+              @input="changeUnit('x', plotIndex, curveIndex)"
+              noClear
+            />
+          </div>
         </div>
-        <!-- unit (x-axis) -->
-        <div class="col flex sm2 xl2 md2 xs2">
-          <va-select
-            label="x-unit"
-            v-model="grid.xUnit"
-            :options="grid.xUnitOption"
-            noClear
-          />
+        <!-- intervel -->
+        <div class="d-flex flex-row mt-1 ml-1">
+          <!-- interval (y-axis) -->
+          <div class="ml-1" style="width: 80px;">
+            <va-input
+              v-show="!curveIndex"
+              v-model="curve.yInterval"
+              label="y-grid"
+              @focus="$event.target.select()"
+              @keyup.enter="setInterval('y', plotIndex, curveIndex, curve.yInterval)"
+              @blur="setInterval('y', plotIndex, curveIndex, curve.yInterval)"
+            >
+              <p slot="append" style="margin-right: 0;" small>
+                {{ curve.yUnit }}
+              </p>
+            </va-input>
+          </div>
+          <!-- interval (x-axis) -->
+          <div class="ml-1" style="width: 80px;">
+            <va-input
+              v-show="!curveIndex"
+              v-model="curve.xInterval"
+              label="x-grid"
+              @focus="$event.target.select()"
+              @keyup.enter="setInterval('x', plotIndex, curveIndex, curve.xInterval)"
+              @blur="setInterval('x', plotIndex, curveIndex, curve.xInterval)"
+            >
+              <p slot="append" style="margin-right: 0;" small>
+                {{ curve.xUnit }}
+              </p>
+            </va-input>
+          </div>
         </div>
       </div>
     </div>
@@ -57,6 +94,9 @@ import { mapFields } from 'vuex-map-fields'
 import { chartRouter } from './CanvasChartTable'
 import configTable from '@/data/config-table/index.js'
 import newTooltip from '@/factories/chart/tooltipFactory'
+import { mapActions } from 'vuex'
+import { taskInfo } from '../../../../data/task/TaskInfo'
+import taskTypes from '@/store/modules/task/content/types'
 
 export default {
   name: 'CanvasChartRealTimeDisplay',
@@ -81,105 +121,171 @@ export default {
     }
   },
   methods: {
-    // for user to choose wanted unit
-    setUnit: function (gridIndex, channelIndex) {
+    // store the setting in cache
+    ...mapActions('taskContent', [
+      taskTypes.chart.saveToCache,
+    ]),
+    getDeviceMode: function () {
+      const device = this.deviceListNew.find(ele => String(ele.memory_board) === String(this.chartData[this.chartID].mappingID))
+      if (device === undefined) return
+      return device.configuration.MODE
+    },
+    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) {
-        const _xPhysicsQuantity = this.data.gridSource[gridIndex][channelIndex].name.split('_')[0].at(-1)
-        const _yPhysicsQuantity = this.data.gridSource[gridIndex][channelIndex].name.split('_')[1].at(-1)
-        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 _newChannel = {}
+        const _newCurve = {}
         // set name, sourceIndex in data.series
-        _newChannel.name = this.data.gridSource[gridIndex][channelIndex].name
-        _newChannel.seriesSource = this.data.series.findIndex((ele) => ele.name === _newChannel.name)
+        _newCurve.name = this.data.gridSource[plotIndex][curveIndex].name
+        _newCurve.seriesSource = this.data.series.findIndex((ele) => ele.name === _newCurve.name)
         // set x-axis
-        _newChannel.xValue = 0
-        _newChannel.xUnit = _xAxis.default.defaultUnit
-        _newChannel.xScale = _xAxis.default.unit
-        _newChannel.xUnitOption = Object.keys(_xAxis.default.unit)
-        _newChannel.xName = _xAxis.default.name
+        _newCurve.xValue = 0
+        _newCurve.xUnit = (typeof _xAxis.default.defaultUnit === 'function') ? _xAxis.default.defaultUnit(this.getDeviceMode()) : _xAxis.default.defaultUnit
+        _newCurve.xScaleOption = _xAxis.default.unit
+        _newCurve.xUnitOption = Object.keys(_xAxis.default.unit)
+        _newCurve.xName = _xAxis.default.name
+        _newCurve.xInterval = 'auto'
+
         // set y-axis
-        _newChannel.yValue = 0
-        _newChannel.yUnit = _yAxis.default.defaultUnit
-        _newChannel.yScale = _yAxis.default.unit
-        _newChannel.yUnitOption = Object.keys(_yAxis.default.unit)
-        _newChannel.yName = _yAxis.default.name
+        _newCurve.yValue = 0
+        _newCurve.yUnit = (typeof _yAxis.default.defaultUnit === 'function') ? _yAxis.default.defaultUnit(this.getDeviceMode()) : _yAxis.default.defaultUnit
+        _newCurve.yScaleOption = _yAxis.default.unit
+        _newCurve.yUnitOption = Object.keys(_yAxis.default.unit)
+        _newCurve.yName = _yAxis.default.name
+        _newCurve.yInterval = 'auto'
+
         // set functional
-        _newChannel.functional = 'default'
+        _newCurve.functional = 'default'
 
         // padding
-        while (gridIndex >= _realTime.length) {
+        while (plotIndex >= _realTime.length) {
           _realTime.push([])
         }
-        while (channelIndex >= _realTime[gridIndex].length) {
-          _realTime[gridIndex].push({})
+        while (curveIndex >= _realTime[plotIndex].length) {
+          _realTime[plotIndex].push({})
         }
 
         // merge the additional part into original part
-        _realTime[gridIndex][channelIndex] = _newChannel
+        _realTime[plotIndex][curveIndex] = _newCurve
         this.realTime = _realTime
       }
     },
+    // set the interval size keyed by user
+    setInterval: async function (axis, plotIndex, curveIndex, val) {
+      if (!isNaN(val)) {
+        const scaleOption = this.realTime[plotIndex][curveIndex][axis + 'ScaleOption']
+        const unit = this.realTime[plotIndex][curveIndex][axis + 'Unit']
+        this.chartData[this.chartID][axis + 'Axis'][plotIndex].interval = val * scaleOption[unit]
+      } else {
+        this.chartData[this.chartID][axis + 'Axis'][plotIndex].interval = 'hi' // I know it looks weird, but this one is necessesary
+        this.chartData[this.chartID][axis + 'Axis'][plotIndex].interval = null
+        this.realTime[plotIndex][curveIndex][axis + 'Interval'] = 'auto'
+      }
+      await this.taskContentChartSaveToCache({ controllerID: taskInfo.getTaskInfo().controllerID })
+    },
     // record the latest data as the real time value
     updateValue: function () {
       if ((this.realTime.length === 0)) {
         return
       }
-      for (let gridIndex = 0; gridIndex < this.realTime.length; gridIndex++) {
-        for (let channelIndex = 0; channelIndex < this.realTime[gridIndex].length; channelIndex++) {
+      for (let plotIndex = 0; plotIndex < this.realTime.length; plotIndex++) {
+        for (let curveIndex = 0; curveIndex < this.realTime[plotIndex].length; curveIndex++) {
           // miss the source of data -> try to find the source
-          if (this.realTime[gridIndex][channelIndex].seriesSource === -1) {
-            this.realTime[gridIndex][channelIndex].seriesSource = this.data.series.findIndex((ele) => ele.name === this.realTime[gridIndex][channelIndex].name)
+          if (this.realTime[plotIndex][curveIndex].seriesSource === -1) {
+            this.realTime[plotIndex][curveIndex].seriesSource = this.data.series.findIndex((ele) => ele.name === this.realTime[plotIndex][curveIndex].name)
           }
 
           // the device is active now --> update the real time value
-          if (this.data.series[this.realTime[gridIndex][channelIndex].seriesSource] !== undefined && this.data.series[this.realTime[gridIndex][channelIndex].seriesSource].data !== undefined && this.data.series[this.realTime[gridIndex][channelIndex].seriesSource].data.length > 0) {
-            this.realTime[gridIndex][channelIndex].xValue = (this.data.series[this.realTime[gridIndex][channelIndex].seriesSource].data.at(-1)[0] / this.realTime[gridIndex][channelIndex].xScale[this.realTime[gridIndex][channelIndex].xUnit]).toFixed(3)
-            this.realTime[gridIndex][channelIndex].yValue = (this.data.series[this.realTime[gridIndex][channelIndex].seriesSource].data.at(-1)[1] / this.realTime[gridIndex][channelIndex].yScale[this.realTime[gridIndex][channelIndex].yUnit]).toFixed(3)
-          }
-        }
-      }
-    },
-    // match the number of real time display bar to data.gridSource
-    matchChart: function () {
-      for (let gridIndex = 0; gridIndex < this.data.gridSource.length; gridIndex++) {
-        if (this.data.gridSource[gridIndex] !== undefined) {
-          for (let channelIndex = 0; channelIndex < this.data.gridSource[gridIndex].length; channelIndex++) {
-            if (gridIndex >= this.realTime.length) {
-              this.setUnit(gridIndex, channelIndex)
-            } else if (channelIndex >= this.realTime[gridIndex].length) {
-              this.setUnit(gridIndex, channelIndex)
-            }
+          if (this.data.series[this.realTime[plotIndex][curveIndex].seriesSource] !== undefined &&
+          this.data.series[this.realTime[plotIndex][curveIndex].seriesSource].data !== undefined &&
+          this.data.series[this.realTime[plotIndex][curveIndex].seriesSource].data.length > 0) {
+            this.realTime[plotIndex][curveIndex].xValue = (this.data.series[this.realTime[plotIndex][curveIndex].seriesSource].data.at(-1)[0] / this.realTime[plotIndex][curveIndex].xScaleOption[this.realTime[plotIndex][curveIndex].xUnit]).toFixed(3)
+            this.realTime[plotIndex][curveIndex].yValue = (this.data.series[this.realTime[plotIndex][curveIndex].seriesSource].data.at(-1)[1] / this.realTime[plotIndex][curveIndex].yScaleOption[this.realTime[plotIndex][curveIndex].yUnit]).toFixed(3)
           }
         }
       }
     },
     // match the formatter to current unit and functional
-    matchFormatter: function () {
-      for (let gridIndex = 0; gridIndex < this.realTime.length; gridIndex++) {
-        for (let channelIndex = 0; channelIndex < this.realTime[gridIndex].length; channelIndex++) {
-          if (channelIndex === 0) {
-            const _xUnit = this.realTime[gridIndex][channelIndex].xUnit
-            const _yUnit = this.realTime[gridIndex][channelIndex].yUnit
-            const _xScale = this.realTime[gridIndex][channelIndex].xScale[this.realTime[gridIndex][channelIndex].xUnit]
-            const _yScale = this.realTime[gridIndex][channelIndex].yScale[this.realTime[gridIndex][channelIndex].yUnit]
+    updateFormatter: function () {
+      for (let plotIndex = 0; plotIndex < this.realTime.length; plotIndex++) {
+        for (let curveIndex = 0; curveIndex < this.realTime[plotIndex].length; curveIndex++) {
+          if (curveIndex === 0) {
+            const _xUnit = this.realTime[plotIndex][curveIndex].xUnit
+            const _yUnit = this.realTime[plotIndex][curveIndex].yUnit
+            const _xScale = this.realTime[plotIndex][curveIndex].xScaleOption[this.realTime[plotIndex][curveIndex].xUnit]
+            const _yScale = this.realTime[plotIndex][curveIndex].yScaleOption[this.realTime[plotIndex][curveIndex].yUnit]
 
             // update xAxis.formatter
-            if (this.realTime[gridIndex][channelIndex].xName === 'Time') {
-              this.data.xAxis[gridIndex].axisLabel.formatter = this.timeFormatter
+            if (this.realTime[plotIndex][curveIndex].xName === 'Time') {
+              this.data.xAxis[plotIndex].axisLabel.formatter = this.timeFormatter
             } else {
-              this.data.xAxis[gridIndex].axisLabel.formatter = function (val) {
-                return parseFloat(val / _xScale).toFixed(2) + _xUnit
+              this.data.xAxis[plotIndex].axisLabel.formatter = function (val) {
+                return parseFloat(val / _xScale).toFixed(3) + _xUnit
               }
             }
             // update yAxis.formatter
-            if (this.realTime[gridIndex][channelIndex].yName === 'Time') {
-              this.data.yAxis[gridIndex].axisLabel.formatter = this.timeFormatter
+            if (this.realTime[plotIndex][curveIndex].yName === 'Time') {
+              this.data.yAxis[plotIndex].axisLabel.formatter = this.timeFormatter
             } else {
-              this.data.yAxis[gridIndex].axisLabel.formatter = function (val) {
-                return parseFloat(val / _yScale).toFixed(2) + _yUnit
+              this.data.yAxis[plotIndex].axisLabel.formatter = function (val) {
+                return parseFloat(val / _yScale).toFixed(3) + _yUnit
               }
             }
             // update tooltip.formatter
@@ -188,30 +294,62 @@ export default {
         }
       }
     },
+    changeUnit: function (axis, plotIndex, curveIndex) {
+      this.updateValue()
+      this.updateFormatter()
+      this.setInterval(axis, plotIndex, curveIndex, 'auto')
+    },
+    // match the number of real time display bar to data.gridSource
+    matchChart: function () {
+      for (let plotIndex = 0; plotIndex < this.data.gridSource.length; plotIndex++) {
+        if (this.data.gridSource[plotIndex] !== undefined) {
+          for (let curveIndex = 0; curveIndex < this.data.gridSource[plotIndex].length; curveIndex++) {
+            if (plotIndex >= this.realTime.length) {
+              this.setRealTime(plotIndex, curveIndex)
+            } else if (curveIndex >= this.realTime[plotIndex].length) {
+              this.setRealTime(plotIndex, curveIndex)
+            }
+          }
+        }
+      }
+    },
     // match the data to operated data in CanvasChart.vue
     matchData: function (canvasChartData) {
       this.data = canvasChartData
     },
     // match the functional to operated data in CanvasChart.vue
-    matchFunctional: function (newFunctional, gridIndex, channelIndex) {
-      if (this.realTime[gridIndex][channelIndex] === undefined) return
-      if (this.realTime[gridIndex][channelIndex].functional === newFunctional) return
-      const _currChannel = this.realTime[gridIndex][channelIndex]
-      const _xPhysicsQuantity = this.data.gridSource[gridIndex][channelIndex].name.split('_')[0].at(-1)
-      const _yPhysicsQuantity = this.data.gridSource[gridIndex][channelIndex].name.split('_')[1].at(-1)
+    matchFunctional: function (newFunctional, plotIndex, curveIndex) {
+      if (this.realTime[plotIndex][curveIndex] === undefined) return
+      if (this.realTime[plotIndex][curveIndex].functional === newFunctional) return
+      const _currCurve = this.realTime[plotIndex][curveIndex]
+      let _xPhysicsQuantity = this.data.gridSource[plotIndex][curveIndex].name.split('_')[0].split('-').at(-1)
+      let _yPhysicsQuantity = this.data.gridSource[plotIndex][curveIndex].name.split('_')[1].split('-').at(-1)
+      // Potential
+      if (!_xPhysicsQuantity.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)
 
-      _currChannel.functional = newFunctional
+      _currCurve.functional = newFunctional
       // set x-axis
-      _currChannel.xUnit = _xAxis.default.defaultUnit
-      _currChannel.xScale = _xAxis.default.unit
-      _currChannel.xUnitOption = Object.keys(_xAxis.default.unit)
-      _currChannel.xName = _xAxis.default.name
+      _currCurve.xUnit = (typeof _xAxis.default.defaultUnit === 'function') ? _xAxis.default.defaultUnit(this.getDeviceMode()) : _xAxis.default.defaultUnit
+      _currCurve.xScaleOption = _xAxis.default.unit
+      _currCurve.xUnitOption = Object.keys(_xAxis.default.unit)
+      _currCurve.xName = _xAxis.default.name
       // set y-axis
-      _currChannel.yUnit = _yAxis[newFunctional].defaultUnit
-      _currChannel.yScale = _yAxis[newFunctional].unit
-      _currChannel.yUnitOption = Object.keys(_yAxis[newFunctional].unit)
-      _currChannel.yName = _yAxis[newFunctional].name
+      _currCurve.yUnit = (typeof _yAxis[newFunctional].defaultUnit === 'function') ? _yAxis[newFunctional].defaultUnit(this.getDeviceMode()) : _yAxis[newFunctional].defaultUnit
+      _currCurve.yScaleOption = _yAxis[newFunctional].unit
+      _currCurve.yUnitOption = Object.keys(_yAxis[newFunctional].unit)
+      _currCurve.yName = _yAxis[newFunctional].name
     },
     timeFormatter: function (val) {
       let label = ''
@@ -243,16 +381,16 @@ export default {
     this.data = this.chartData[this.chartID]
   },
   watch: {
-    data: {
+    'data.series': {
       handler: function () {
         this.updateValue()
-        this.matchChart()
       },
       deep: true,
     },
-    realTime: {
+    'data.gridSource': {
       handler: function () {
-        this.matchFormatter()
+        this.matchChart()
+        this.updateFormatter()
       },
       deep: true,
     },

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

@@ -90,6 +90,7 @@ import { taskInfo } from '../../../../data/task/TaskInfo'
 import { mapFields } from 'vuex-map-fields'
 import { mapActions } from 'vuex'
 import taskTypes from '@/store/modules/task/content/types'
+import configTable from '../../../../data/config-table'
 
 export default {
   name: 'canvas-chart-source',
@@ -140,7 +141,8 @@ export default {
     deviceSelectX: function () {
       const channelOptions = []
       const deviceInfo = this.deviceListNew.find(ele => ele.id === this.deviceSelectX.id)
-      // console.log(val)
+      // console.log('deviceInfo', deviceInfo.library_name, deviceInfo.configuration.MODE)
+      // console.log('sourceObj', Object.keys(sourceObj))
       if (deviceInfo == null) {
         this.channelSelectDisableX = true
       } else if (deviceInfo.library_name.includes('Neulive')) {
@@ -182,11 +184,19 @@ export default {
         })
         this.channelSelectDisableX = false
       } else if (deviceInfo.library_name.includes('Elite')) {
+        const sourceObj = configTable.getChannelConfig(String(deviceInfo.library_name), deviceInfo.configuration.MODE) // [{id:0 channel:'Current'}, {id:1, channel:'Voltage'}, ]
         let channelSet
-        if (deviceInfo.library_name.includes('EIS') && deviceInfo.configuration.MODE === 0) {
+        if (deviceInfo.library_name.includes('EIS') && (deviceInfo.configuration.MODE === 0 || deviceInfo.configuration.MODE === 5)) {
           channelSet = ['Zimag_Raw', 'Zreal_Raw', 'Frequency', 'Cycle', 'Zimag', 'Zreal', 'Impedance', 'Phase', 'Current', 'Level gain']
         } else {
-          channelSet = deviceInfo.configuration.CHANNEL_LABEL
+          channelSet = []
+          const keys = Object.keys(sourceObj)
+          for (let i = 0; i < keys.length; i++) {
+            const item = keys[i]
+            if (sourceObj[item].name !== 'Time' && sourceObj[item].name !== 'Cycle number') {
+              channelSet.push(String(sourceObj[item].name))
+            }
+          }
         }
         // console.log(channelSet)
         channelSet.forEach((element, index) => {
@@ -250,11 +260,19 @@ export default {
         })
         this.channelSelectDisableY = false
       } else if (deviceInfo.library_name.indexOf('Elite') >= 0) {
+        const sourceObj = configTable.getChannelConfig(String(deviceInfo.library_name), deviceInfo.configuration.MODE) // [{id:0 channel:'Current'}, {id:1, channel:'Voltage'}, ]
         let channelSet
-        if (deviceInfo.library_name.includes('EIS') && deviceInfo.configuration.MODE === 0) {
+        if (deviceInfo.library_name.includes('EIS') && (deviceInfo.configuration.MODE === 0 || deviceInfo.configuration.MODE === 5)) {
           channelSet = ['Zimag_Raw', 'Zreal_Raw', 'Frequency', 'Cycle', 'Zimag', 'Zreal', 'Impedance', 'Phase', 'Current', 'Level gain']
         } else {
-          channelSet = deviceInfo.configuration.CHANNEL_LABEL
+          channelSet = []
+          const keys = Object.keys(sourceObj)
+          for (let i = 0; i < keys.length; i++) {
+            const item = keys[i]
+            if (sourceObj[item].name !== 'Time' && sourceObj[item].name !== 'Cycle number') {
+              channelSet.push(String(sourceObj[item].name))
+            }
+          }
         }
         //  console.log(channelSet)
         channelSet.forEach((element, index) => {
@@ -329,7 +347,6 @@ export default {
       } else if (this.deviceSelectY.name.indexOf('Time') >= 0) {
         deviceNameY = 'Time'
       }
-
       this.taskContentChartRegister({
         chartID: this.chartID,
         gridIndex: gridIndex,

src/components/task/content/chart/CanvasChartTable.js

@@ -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
     {
@@ -57,51 +27,20 @@ const chartTable = {
           mA: 1e6,
           A: 1e9,
         },
-        defaultUnit: 'mA',
+        defaultUnit: (Mode) => { return (Mode === 10 || Mode === 11) ? 'nA' : 'mA' },
         downloadUnit: 'mA',
       },
       // Q = ∫ I dt
       integral: {
         name: 'Charge',
         unit: {
-          nC: 1e6,
-          uC: 1e9,
-          mC: 1e12,
-          C: 1e15,
+          nAh: 3600 * 1e6,
+          uAh: 1600 * 1e9,
+          mAh: 3600 * 1e12,
+          Ah: 3600 * 1e15,
         },
-        defaultUnit: 'mC',
-        downloadUnit: 'mC',
-      },
-    },
-  ],
-  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: 'Resistor',
-        unit: {
-          mΩ: 1,
-          Ω: 1e3,
-          kΩ: 1e6,
-          MΩ: 1e9,
-        },
-        defaultUnit: 'Ω',
-        downloadUnit: 'Ω',
+        defaultUnit: 'mAh',
+        downloadUnit: 'mAh',
       },
     },
   ],
@@ -152,19 +91,18 @@ const chartTable = {
           mA: 1e6,
           A: 1e9,
         },
-        defaultUnit: 'mA',
+        defaultUnit: (Mode) => { return (Mode === 10 || Mode === 11) ? 'nA' : 'mA' },
         downloadUnit: 'mA',
       },
       // Gm = dI/dV
       differential: {
         name: 'Transconductance',
         unit: {
-          'mA/V': 1,
-          'A/V': 1e3,
-          'kA/V': 1e6,
+          'mA/mV': 1e-3,
+          'A/mV': 1,
         },
-        defaultUnit: 'A/V',
-        downloadUnit: 'A/V',
+        defaultUnit: 'mA/mV',
+        downloadUnit: 'A',
       },
       // Power = ∫ I dv
       integral: {
@@ -186,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 []
   },
 }

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

@@ -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 () {

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

@@ -19,13 +19,32 @@
                 <img :src="device.picture" :alt="device.name">
               </va-avatar>
             </va-item-section>
-
             <va-item-section class="ml-3" caption>
-              <va-item-label>
+              <!-- <va-button @click="getBattery(device)"> get battery </va-button> -->
+              <!-- <pre> {{ device.battery }} </pre> -->
+              <va-item-label v-if="device.library_name.includes('EIS') || device.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">
+                {{ `[${device.memory_board}]` }} {{ device.name }} <va-icon class="ml-3 fa fa-battery-three-quarters" color="#5BC236"/> {{ parseInt((device.battery - 2900) / 10) + '%' }}
+              </va-item-label>
+              <va-item-label v-else-if="parseInt((device.battery - 2900) / 10) >= 25">
+                {{ `[${device.memory_board}]` }} {{ device.name }} <va-icon class="ml-3 fa fa-battery-half" color="#F6B431"/> {{ parseInt((device.battery - 2900) / 10) + '%' }}
+              </va-item-label>
+              <va-item-label v-else-if="parseInt((device.battery - 2900) / 10) > 10">
+                {{ `[${device.memory_board}]` }} {{ device.name }} <va-icon class="ml-3 fa fa-battery-quarter" color="#DA244B"/> {{ parseInt((device.battery - 2900) / 10) + '%' }}
+              </va-item-label>
+              <va-item-label v-else>
+                {{ `[${device.memory_board}]` }} {{ device.name }} <va-icon class="ml-3 fa fa-battery-empty" color="#DA244B"/> <span style="color: red;"> low battery </span>
+              </va-item-label>
+              <!-- <va-item-label v-else>
+                {{ `[${device.memory_board}]` }} {{ device.name }} <va-icon class="ml-3 fa fa-battery-empty" color="#DA244B"/> {{ '0%' }}
+              </va-item-label> -->
               <va-item-label caption>
-                {{ device.mac_address }}
+                {{ device.mac_address.toUpperCase() }}
               </va-item-label>
             </va-item-section>
           </va-item>

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

@@ -129,9 +129,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 () {

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

@@ -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 = []
@@ -121,10 +121,10 @@ export default {
 
       // directory init
       const collection = await api.collection.getAll()
-      this.directoryOptions = collection.data.filter(el => el.name !== 'root')
-
+      this.directoryOptions = collection.data.filter(el => el.name !== 'root').sort((a, b) => { return a.id - b.id })
       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 () {
   },

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

@@ -16,7 +16,7 @@
             />
           </div>
           <div class="flex sm2 xl2 md2 xs2 px-0 mx-0 my-0 py-0 pl-2">
-            <va-button class="pa-0 ma-0 mt-2 circle-button" small color="dark" @click="showModal=true">
+            <va-button v-if="place != 'scheduler'" class="pa-0 ma-0 mt-2 circle-button" small color="dark" @click="showModal=true">
               <va-icon
                 name="fa fa-info"
                 color="white"
@@ -26,8 +26,27 @@
         </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>
+      </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 +63,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 +74,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 +85,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"
@@ -81,6 +100,7 @@
               :parameterName="name"
               :inputValue="parameter[name]"
               :disable="name === 'CTRL_HIGH_Z_15' && device && device.status === 0"
+              :syncParameter="parameterTable[name].syncParameter"
               v-bind="parameterTable[name]"
               @parameterChange="parameterChange"
               @getParameter="getParameter"
@@ -93,7 +113,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"
@@ -123,6 +143,7 @@ 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 EliteParameterRecordingElitePulseSensing from '../parameter/itemNew/PulseSensingNew/EliteParameterRecordingElitePulseSensing'
 import { VueFinalModal } from 'vue-final-modal'
 import { mapFields } from 'vuex-map-fields'
@@ -140,6 +161,7 @@ export default {
     InputField,
     MultiInputField,
     DevMode,
+    Trigger,
   },
   props: {
     parameter: {
@@ -147,7 +169,8 @@ export default {
       required: true,
     },
     library: {
-      type: String,
+      type: [String, null],
+      default: null,
     },
     serialNumber: {
       type: [String, Array],
@@ -156,6 +179,14 @@ export default {
       type: Object,
       default: null,
     },
+    place: {
+      type: String,
+      default: '',
+    },
+    resetParameterModeChange: {
+      type: Boolean,
+      default: false,
+    },
   },
   computed: {
     parameterTable () {
@@ -174,7 +205,7 @@ export default {
       return null
     },
     parameterArrayInMode () {
-      return this.workingModeSelect && this.parameterTable.MODE[this.workingModeSelect.id].parameter
+      return this.workingModeSelect && this.parameterTable && this.parameterTable.MODE[this.workingModeSelect.id].parameter
     },
     modeSelection () {
       if (this.parameter.MODE) {
@@ -183,7 +214,7 @@ export default {
       return this.workingModeSelect.id
     },
     getImageUrl () {
-      if (this.workingModeSelect === null) {
+      if (!this.workingModeSelect) {
         return 'IV-Wire'
       } else {
         return this.workingModeSelect.img_src
@@ -221,6 +252,7 @@ export default {
     parameterValue (name) {
       const value = this.parameter[name]
       if (this.parameterTable[name].type === 'number') {
+        if (this.parameterTable[name].defaultUnit === undefined) return ''
         const scale = this.parameterTable[name].unit[this.parameterTable[name].defaultUnit]
         return ` ( ${this.parameterTable[name].outputReadabilityData(value, scale)} ${this.parameterTable[name].defaultUnit} )`
       } else if (this.parameterTable[name].type === 'array') {
@@ -240,19 +272,34 @@ 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 && this.workingModeSelect.highz !== undefined) {
-          this.parameterChange('CTRL_HIGH_Z_15', this.workingModeSelect.highz)
+        if (this.deviceStatus === true) {
+          if (this.workingModeSelect.highz !== undefined) {
+            this.parameterChange('CTRL_HIGH_Z_15', this.workingModeSelect.highz)
+          }
         }
       }
     },
+    resetWorkingMode () {
+      this.workingModeOptions = this.parameterTable.MODE_OPTIONS
+      this.workingModeSelect = (this.parameter.MODE !== undefined) ? this.workingModeOptions.find(ele => ele.id === this.parameter.MODE) : this.workingModeOptions[0]
+      console.log(this.workingModeOptions, this.workingModeSelect)
+    },
     getParameter: function (name) {
       this.$emit('getParameter', name)
     },
@@ -265,11 +312,27 @@ export default {
     // this.developerMode === true
     //   ? this.workingModeOptions = this.workingModeDevOptions
     //   : this.workingModeOptions = this.workingModeNoDevOptions
-    this.workingModeOptions = this.parameterTable.MODE_OPTIONS
-    // init mode
-    this.workingModeSelect = (this.parameter.MODE !== undefined) ? this.workingModeOptions.find(ele => ele.id === this.parameter.MODE) : this.workingModeOptions[0]
+    if (this.parameterTable !== null) {
+      this.workingModeOptions = this.parameterTable.MODE_OPTIONS
+      // init mode
+      this.workingModeSelect = (this.parameter.MODE !== undefined) ? this.workingModeOptions.find(ele => ele.id === this.parameter.MODE) : this.workingModeOptions[0]
+    }
   },
   watch: {
+    parameter: {
+      deep: true,
+      handler: function () {
+        // refresh real time parameter
+        this.workingModeSelect = (this.parameter.MODE !== undefined) ? this.workingModeOptions.find(ele => ele.id === this.parameter.MODE) : this.workingModeOptions[0]
+      },
+    },
+    library: {
+      handler: function () {
+        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 () {
   },

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

@@ -12,14 +12,14 @@
     </div>
     <!-- EIS -->
     <div v-if="workingModeSelect != null && workingModeSelect.id == 0">
-      <d-c-volt :ref="'DCVolt'" :deviceID="deviceID" :parameterName="'DC_BIAS'" @parameterChange="deviceParameterChange($event)" />
-      <a-c-amplitude :ref="'ACAmplitude'" :deviceID="deviceID" :parameterName="'AC_AMP'" @parameterChange="deviceParameterChange($event)" />
-      <freq-range :ref="'FreqRange'" :deviceID="deviceID" :parameterName="'FREQ'" @parameterChange="deviceParameterChange($event)" />
-      <points-per-decades :ref="'PointsPerDecades'" :deviceID="deviceID" :parameterName="'PPD'" @parameterChange="deviceParameterChange($event)" />
-      <point-spacing :ref="'PointSpacing'" :deviceID="deviceID" :parameterName="'SCALE'" @parameterChange="deviceParameterChange($event)" />
-      <delay :ref="'Delay'" :deviceID="deviceID" :parameterName="'DELAY'" @parameterChange="deviceParameterChange($event)" />
-      <average :ref="'Average'" :deviceID="deviceID" :parameterName="'AVERAGE_NUM'" @parameterChange="deviceParameterChange($event)" />
-      <current-range :ref="'CurrentRange'" :deviceID="deviceID" :parameterName="'RTIA'" @parameterChange="deviceParameterChange($event)" />
+      <d-c-volt :ref="'DCVolt'" :deviceID="deviceID" :parameterName="'EIS_DC_BIAS'" @parameterChange="deviceParameterChange($event)" />
+      <a-c-amplitude :ref="'ACAmplitude'" :deviceID="deviceID" :parameterName="'EIS_AC_AMP'" @parameterChange="deviceParameterChange($event)" />
+      <freq-range :ref="'FreqRange'" :deviceID="deviceID" :parameterName="'EIS_FREQ'" @parameterChange="deviceParameterChange($event)" />
+      <points-per-decades :ref="'PointsPerDecades'" :deviceID="deviceID" :parameterName="'EIS_PPD'" @parameterChange="deviceParameterChange($event)" />
+      <point-spacing :ref="'PointSpacing'" :deviceID="deviceID" :parameterName="'EIS_SCALE'" @parameterChange="deviceParameterChange($event)" />
+      <delay :ref="'Delay'" :deviceID="deviceID" :parameterName="'EIS_DELAY'" @parameterChange="deviceParameterChange($event)" />
+      <average :ref="'Average'" :deviceID="deviceID" :parameterName="'EIS_AVERAGE_NUM'" @parameterChange="deviceParameterChange($event)" />
+      <current-range :ref="'CurrentRange'" :deviceID="deviceID" :parameterName="'GENERAL_HS_RTIA'" @parameterChange="deviceParameterChange($event)" />
     </div>
     <!-- CV -->
     <div v-if="workingModeSelect != null && workingModeSelect.id == 1">
@@ -45,14 +45,6 @@
           <level-button :ref="'currentRangeSelect'" :deviceID="deviceID" :options="currentRangeOptions" :parameterName="'ADC_LEVEL_I_15'" @parameterChange="deviceParameterChange($event)" />
         </div>
       </div>
-      <div class="flex row mt-0 pt-0 sm12 xl12 md12 xs12 align--center">
-        <div class="flex sm12 xl12 md12 xs12 pa-0 ma-0">
-          <p class="display-6">Voltage Range<p/>
-        </div>
-        <div class="flex sm12 xl12 md12 xs12 pa-0 ma-1" >
-          <level-button :ref="'voltageInRangeSelect'" :deviceID="deviceID" :options="voltageInRangeOptions" :parameterName="'ADC_LEVEL_V_IN_15'" @parameterChange="deviceParameterChange($event)" />
-        </div>
-      </div>
       <div class="flex row mt-0 pt-0 sm12 xl12 md12 xs12 align--center">
         <div class="flex sm12 xl12 md12 xs12 pa-0 ma-0">
           <p class="display-6">High Z<p/>
@@ -66,7 +58,7 @@
           <p class="display-6">E Initial<p/>
         </div>
         <div class="flex sm12 xl12 md12 xs12 pa-0 ma-1" >
-          <volt-range :ref="'voltInitialNumber'" :deviceID="deviceID" :parameterName="'VOLT_INITIAL'" :minValue="-1.8" :maxValue="2" @parameterChange="deviceParameterChange($event)" />
+          <volt-range :ref="'voltInitialNumber'" :deviceID="deviceID" :parameterName="'CV_E_INITIAL'" :minValue="-1.8" :maxValue="2" @parameterChange="deviceParameterChange($event)" />
         </div>
       </div>
       <div class="flex row mt-0 pt-0 sm12 xl12 md12 xs12 align--center">
@@ -74,7 +66,7 @@
           <p class="display-6">E1<p/>
         </div>
         <div class="flex sm12 xl12 md12 xs12 pa-0 ma-1" >
-          <volt-range :ref="'voltMaxNumber'" :deviceID="deviceID" :parameterName="'VOLT_MAX'" :minValue="-1.8" :maxValue="2" @parameterChange="deviceParameterChange($event)" />
+          <volt-range :ref="'voltMaxNumber'" :deviceID="deviceID" :parameterName="'CV_E1'" :minValue="-1.8" :maxValue="2" @parameterChange="deviceParameterChange($event)" />
         </div>
       </div>
       <div class="flex row mt-0 pt-0 sm12 xl12 md12 xs12 align--center">
@@ -82,7 +74,7 @@
           <p class="display-6">E2<p/>
         </div>
         <div class="flex sm12 xl12 md12 xs12 pa-0 ma-1" >
-          <volt-range :ref="'voltMinNumber'" :deviceID="deviceID" :parameterName="'VOLT_MIN'" :minValue="-1.8" :maxValue="2" @parameterChange="deviceParameterChange($event)" />
+          <volt-range :ref="'voltMinNumber'" :deviceID="deviceID" :parameterName="'CV_E2'" :minValue="-1.8" :maxValue="2" @parameterChange="deviceParameterChange($event)" />
         </div>
       </div>
       <div class="flex row mt-0 pt-0 sm12 xl12 md12 xs12 align--center">
@@ -90,7 +82,7 @@
           <p class="display-6">Voltage Scan Rate<p/>
         </div>
         <div class="flex sm12 xl12 md12 xs12 pa-0 ma-1" >
-          <scan-rate-range :ref="'voltScanRateNumber'" :deviceID="deviceID" :parameterName="'Scan_Rate'" :minValue="0.01" :maxValue="1000" @parameterChange="deviceParameterChange($event)" />
+          <scan-rate-range :ref="'voltScanRateNumber'" :deviceID="deviceID" :parameterName="'CV_SCAN_RATE'" :minValue="0.01" :maxValue="1000" @parameterChange="deviceParameterChange($event)" />
         </div>
       </div>
       <div class="flex row mt-0 pt-0 sm12 xl12 md12 xs12 align--center">
@@ -283,7 +275,7 @@ export default {
         },
       ],
       DCVolt: null,
-      AC_AMP: null,
+      EIS_AC_AMP: null,
       FreqStart: null,
       FreqStop: null,
       PointsPerDecades: null,
@@ -395,45 +387,36 @@ export default {
       this.measureEocButton.status = false
     },
     refresh () {
-      // taskInfo.getDeviceInfo(this.deviceID).parameterSet.CHANNEL_LABEL = ['Z_image_Raw', 'Z_Real_Raw', 'Frequency', 'Cycle', 'Z_imag', 'Z_real', 'Impedance', 'Phase', 'Current', 'Level gain']
       this.workingModeSelect = this.workingModeOptions[taskInfo.getDeviceInfo(this.deviceID).parameterSet.MODE]
       if (this.workingModeSelect != null) {
         this.workingModeSelectChange(this.workingModeSelect)
       }
-      this.ACAmplitude = String(Math.round((taskInfo.getDeviceInfo(this.deviceID).parameterSet.AC_AMP) / 2047 * 800))
+      this.ACAmplitude = String(Math.round((taskInfo.getDeviceInfo(this.deviceID).parameterSet.EIS_AC_AMP) / 2047 * 800))
       if (this.$refs.ACAmplitude != null) {
         this.$refs.ACAmplitude.itemChange(this.ACAmplitude)
       }
-      this.Average = taskInfo.getDeviceInfo(this.deviceID).parameterSet.AVERAGE_NUM
+      this.Average = taskInfo.getDeviceInfo(this.deviceID).parameterSet.EIS_AVERAGE_NUM
       if (this.$refs.Average != null) {
         this.$refs.Average.itemChange(this.Average)
       }
-      this.CurrentRange = taskInfo.getDeviceInfo(this.deviceID).parameterSet.RTIA
+      this.CurrentRange = taskInfo.getDeviceInfo(this.deviceID).parameterSet.GENERAL_HS_RTIA
       if (this.$refs.CurrentRange != null) {
         this.$refs.CurrentRange.itemChange(this.CurrentRange)
       }
-      this.PointSpacing = taskInfo.getDeviceInfo(this.deviceID).parameterSet.SCALE
+      this.PointSpacing = taskInfo.getDeviceInfo(this.deviceID).parameterSet.EIS_SCALE
       if (this.$refs.PointSpacing != null) {
         this.$refs.PointSpacing.itemChange(this.PointSpacing)
       }
 
-      this.DCVolt = (taskInfo.getDeviceInfo(this.deviceID).parameterSet.DC_BIAS - 15000) / 10
+      this.DCVolt = (taskInfo.getDeviceInfo(this.deviceID).parameterSet.EIS_DC_BIAS - 15000) / 10
       if (this.$refs.DCVolt != null) {
         this.$refs.DCVolt.itemChange(this.DCVolt)
       }
-      this.Delay = String(parseFloat((taskInfo.getDeviceInfo(this.deviceID).parameterSet.DELAY) / 10).toFixed(1))
+      this.Delay = String(parseFloat((taskInfo.getDeviceInfo(this.deviceID).parameterSet.EIS_DELAY) / 10).toFixed(1))
       if (this.$refs.Delay != null) {
         this.$refs.Delay.itemChange(this.Delay)
       }
-      this.FreqStart = String(parseFloat(Math.round(parseFloat((taskInfo.getDeviceInfo(this.deviceID).parameterSet.FREQ_START * 0.0149) * 100)) / 100).toFixed(1)) === '0.0' ? '0.015' : String(parseFloat(Math.round(parseFloat((taskInfo.getDeviceInfo(this.deviceID).parameterSet.FREQ_START * 0.0149) * 100)) / 100).toFixed(1))
-      if (this.$refs.FreqRange != null) {
-        this.$refs.FreqRange.itemChangeMax(this.FreqStart)
-      }
-      this.FreqStop = String(parseFloat(Math.round(parseFloat((taskInfo.getDeviceInfo(this.deviceID).parameterSet.FREQ_STOP * 0.0149) * 100)) / 100).toFixed(1)) === '0.0' ? '0.015' : String(parseFloat(Math.round(parseFloat((taskInfo.getDeviceInfo(this.deviceID).parameterSet.FREQ_STOP * 0.0149) * 100)) / 100).toFixed(1))
-      if (this.$refs.FreqRange != null) {
-        this.$refs.FreqRange.itemChangeMin(this.FreqStop)
-      }
-      this.PointsPerDecades = String(Math.round((taskInfo.getDeviceInfo(this.deviceID).parameterSet.PPD)))
+      this.PointsPerDecades = String(Math.round((taskInfo.getDeviceInfo(this.deviceID).parameterSet.EIS_PPD)))
       if (this.$refs.PointsPerDecades != null) {
         this.$refs.PointsPerDecades.itemChange(this.PointsPerDecades)
       }
@@ -444,11 +427,6 @@ export default {
         this.$refs.currentRangeSelect.updateLevelButton(this.currentRangeSelect)
       }
 
-      this.voltageInRangeSelect = taskInfo.getDeviceInfo(this.deviceID).parameterSet.ADC_LEVEL_V_IN_15
-      if (this.$refs.voltageInRangeSelect != null) {
-        this.$refs.voltageInRangeSelect.updateLevelButton(this.voltageInRangeSelect)
-      }
-
       this.highzSelect = taskInfo.getDeviceInfo(this.deviceID).parameterSet.CTRL_HIGH_Z_15
       if (this.$refs.highzSelect != null) {
         this.$refs.highzSelect.updateLevelButton(this.highzSelect)
@@ -464,12 +442,12 @@ export default {
         this.$refs.stopVoltMinNumber.updateVoltNumber(this.stopVoltMinNumber)
       }
 
-      this.voltInitialNumber = (taskInfo.getDeviceInfo(this.deviceID).parameterSet.VOLT_INITIAL - 25000) / 5
+      this.voltInitialNumber = (taskInfo.getDeviceInfo(this.deviceID).parameterSet.CV_E_INITIAL - 25000) / 5
       if (this.$refs.voltInitialNumber != null) {
         this.$refs.voltInitialNumber.updateVoltNumber(this.voltInitialNumber)
       }
 
-      this.voltScanRateNumber = taskInfo.getDeviceInfo(this.deviceID).parameterSet.Scan_Rate
+      this.voltScanRateNumber = taskInfo.getDeviceInfo(this.deviceID).parameterSet.CV_SCAN_RATE
       if (this.$refs.voltScanRateNumber != null) {
         this.$refs.voltScanRateNumber.updateVoltScanRateNumber(this.voltScanRateNumber)
       }

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

@@ -75,6 +75,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    syncParameter: {
+      type: Object,
+      default: () => {},
+    },
   },
   created () {
   },
@@ -87,6 +91,13 @@ export default {
   methods: {
     buttonSelectChange (value) {
       this.$emit('parameterChange', this.parameterName, value)
+      this.syncParameter && Object.keys(this.syncParameter).forEach(element => {
+        if (String(element) === String(value)) {
+          this.syncParameter[value].forEach(element => {
+            this.$emit('parameterChange', element[0], element[1])
+          })
+        }
+      })
     },
   },
   async mounted () {

src/components/task/content/parameter/itemNew/TriggerNew/ChannelBlock.vue

@@ -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>

src/components/task/content/parameter/itemNew/TriggerNew/TimerBlock.vue

@@ -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>

src/components/task/content/parameter/itemNew/TriggerNew/Trigger.vue

@@ -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>

src/components/task/content/parameter/itemNew/TriggerNew/TriggerBlock.vue

@@ -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>

src/data/SGFilter.js

@@ -75,7 +75,7 @@ function sgFilter (data, windowSize, k) {
   // return list
 }
 
-function sgFilterGetDifferential (data, windowSize, polynomial) {
+function sgFilterGetDifferential (data, windowSize, polynomial, sampleRate = 1) {
   // self
   const arr = []
   const m = parseInt((windowSize - 1) / 2)
@@ -96,23 +96,24 @@ function sgFilterGetDifferential (data, windowSize, polynomial) {
   // use index 1 row in matrix
   const rowOneInB = row(B, 1)._data[0]
 
-  const start = []
-  const end = []
+  // const start = []
+  // const end = []
   const list = []
 
   // eslint-disable-next-line no-unused-vars
-  for (const _ of range(0, m)) {
-    start.push(data[0])
-    end.push(data[data.length - 1])
-  }
-  const _data = [...start, ...data, ...end]
+  // for (const _ of range(0, m)) {
+  //   start.push(data[0])
+  //   end.push(data[data.length - 1])
+  // }
+  // const _data = [...start, ...data, ...end]
+  // const _data = [...data]
 
   // m ... data_length - m - 1
-  for (const i of range(m, _data.length - m)) {
+  for (const i of range(m, data.length - m)) {
     const arra = []
     // -m ... 0 ... m
     for (const j of range(-m, m + 1)) {
-      arra.push(_data[i.value + j.value])
+      arra.push(data[i.value + j.value])
     }
 
     let sum = 0
@@ -120,7 +121,7 @@ function sgFilterGetDifferential (data, windowSize, polynomial) {
       sum += (arra[index] * rowOneInB[index])
     }
 
-    list.push(sum)
+    list.push(sum * sampleRate)
   }
   return list
 }

src/data/api/index.js

@@ -11,6 +11,8 @@ import analysis from './analysis'
 import sdcard from './sdcard'
 import connection from './connection'
 import project from './project'
+import subject from './subject'
+import subjectData from './subject_data'
 
 // axios.defaults.baseURL = 'http://192.168.3.211:3000'
 axios.defaults.baseURL = 'http://' + location.href.split('/')[2].split(':')[0] + ':3000'
@@ -29,6 +31,8 @@ const api = {
   sdcard,
   connection,
   project,
+  subject,
+  subjectData,
 }
 
 export default api

src/data/api/subject.js

@@ -0,0 +1,52 @@
+import api from './index'
+import auth from './auth'
+
+async function create (attrs) {
+  const _header = auth.getHeader()
+
+  try {
+    return await api.axios.post('/api/subject/create', attrs, { headers: _header })
+  } catch (e) {
+    console.error(e)
+    return false
+  }
+}
+
+async function update (id, attrs) {
+  const _header = auth.getHeader()
+  try {
+    return await api.axios.post(`/api/subject/update/${id}`, attrs, { headers: _header })
+  } catch (e) {
+    console.error(e)
+    return false
+  }
+}
+
+async function clearDel () {
+  const _header = auth.getHeader()
+  try {
+    return await api.axios.get('/api/subject/clear_deleted', { headers: _header })
+  } catch (e) {
+    console.error(e)
+    return false
+  }
+}
+
+async function get (id) {
+  const _header = auth.getHeader()
+  try {
+    return await api.axios.get('/api/subject/get', { headers: _header })
+  } catch (e) {
+    console.error(e)
+    return false
+  }
+}
+
+const subject = {
+  create,
+  update,
+  clearDel,
+  get,
+}
+
+export default subject

src/data/api/subject_data.js

@@ -0,0 +1,56 @@
+import api from './index'
+import auth from './auth'
+
+async function create (attrs) {
+  const _header = auth.getHeader()
+
+  try {
+    return await api.axios.post('/api/subject_data/create', attrs, { headers: _header })
+  } catch (e) {
+    console.error(e)
+    return false
+  }
+}
+
+async function update (id, attrs) {
+  const _header = auth.getHeader()
+  try {
+    return await api.axios.post(`/api/subject_data/update/${id}`, attrs, { headers: _header })
+  } catch (e) {
+    console.error(e)
+    return false
+  }
+}
+
+async function clearDel () {
+  const _header = auth.getHeader()
+  try {
+    return await api.axios.get('/api/subject_data/clear_deleted', { headers: _header })
+  } catch (e) {
+    console.error(e)
+    return false
+  }
+}
+
+async function get (attrs) {
+  let query = ''
+  const _header = auth.getHeader()
+  for (const attr in attrs) {
+    query += `${attr}=${attrs[attr]}`
+  }
+  try {
+    return await api.axios.get(`/api/subject_data/get?${query}`, { headers: _header })
+  } catch (e) {
+    console.error(e)
+    return false
+  }
+}
+
+const subjectData = {
+  create,
+  update,
+  clearDel,
+  get,
+}
+
+export default subjectData

src/data/config-table/Common/Idle.js

@@ -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: {
+  },
+}

src/data/config-table/EliteEDC/CaliADC.js

@@ -1,7 +1,8 @@
 export default {
-  name: 'Cali ADC - test',
-  parameter: ['DAC_VOLT', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'ADC_DAC_CHANNEL_15'], // 這個mode用到的參數
-  showParameter: ['DAC_VOLT', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'ADC_DAC_CHANNEL_15'], // 有要秀給user看的參數
+  name: 'Cali Mode - test',
+  parameter: ['ADC_DAC_CHANNEL_15', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'DAC_LEVEL_V_OUT_15', 'DAC_VOLT_BUTTON'], // 這個mode用到的參數
+  showParameter: ['ADC_DAC_CHANNEL_15', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'DAC_LEVEL_V_OUT_15', 'DAC_VOLT_BUTTON'], // 有要秀給user看的參數
+  headerParameter: () => ['ADC_DAC_CHANNEL_15', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'DAC_LEVEL_V_OUT_15', 'DAC_VOLT_BUTTON'], // export header的參數
   valScales: {
     linear: {
       func: (val) => {
@@ -17,6 +18,7 @@ export default {
   channels: {
     time: {
       name: 'Time',
+      physicalQuantity: 's',
       unit: {
         us: 1,
         ms: 1e3,
@@ -29,6 +31,7 @@ export default {
     },
     0: {
       name: 'I_in',
+      physicalQuantity: 'A',
       unit: {
         nA: 1,
       },
@@ -36,6 +39,7 @@ export default {
     },
     1: {
       name: 'V_in/V_out',
+      physicalQuantity: 'V',
       unit: {
         uV: 1,
       },
@@ -43,6 +47,7 @@ export default {
     },
     2: {
       name: 'Gain',
+      physicalQuantity: '',
       unit: {
         default: 1,
       },
@@ -52,7 +57,7 @@ export default {
   charts: {
     default: [
       {
-        name: 'Cali ADC - test',
+        name: 'Cali Mode - test',
         description: '',
         subplot: [
           {

src/data/config-table/EliteEDC/CaliDAC.js

@@ -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,
       },

src/data/config-table/EliteEDC/Chronoamperometry.js

@@ -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,

src/data/config-table/EliteEDC/Chronopotentiometry.js

@@ -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,
@@ -58,6 +62,50 @@ export default {
       defaultUnit: 'mV',
       downloadUnit: 'mV',
     },
+    3: {
+      name: 'sum_cnt',
+      physicalQuantity: 'V',
+      unit: {
+        uV: 1,
+        mV: 1e3,
+        V: 1e6,
+      },
+      defaultUnit: 'mV',
+      downloadUnit: 'uV',
+    },
+    4: {
+      name: 'sum_adc_delta_Iin',
+      physicalQuantity: 'V',
+      unit: {
+        uV: 1,
+        mV: 1e3,
+        V: 1e6,
+      },
+      defaultUnit: 'mV',
+      downloadUnit: 'uV',
+    },
+    5: {
+      name: 'sum_adc_delta_Voutin',
+      physicalQuantity: 'V',
+      unit: {
+        uV: 1,
+        mV: 1e3,
+        V: 1e6,
+      },
+      defaultUnit: 'mV',
+      downloadUnit: 'uV',
+    },
+    6: {
+      name: 'resis',
+      physicalQuantity: 'V',
+      unit: {
+        uV: 1,
+        mV: 1e3,
+        V: 1e6,
+      },
+      defaultUnit: 'mV',
+      downloadUnit: 'uV',
+    },
   },
   charts: {
     default: [

src/data/config-table/EliteEDC/ConstantCurrent.js

@@ -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,

src/data/config-table/EliteEDC/CycleIV.js

@@ -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,
       },

src/data/config-table/EliteEDC/CyclicVoltammetry.js

@@ -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,
       },

src/data/config-table/EliteEDC/DPV.js

@@ -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,
       },

src/data/config-table/EliteEDC/DevMode.js

@@ -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,
       },

src/data/config-table/EliteEDC/FunctionGenerator.js

@@ -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,

src/data/config-table/EliteEDC/IT.js

@@ -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,