[update] add button of each task & add close btn

package.json

@@ -20,9 +20,9 @@
     "ammap3": "^3.21.14",
     "approximate-number": "^2.0.0",
     "asva-executors": "^0.1.22",
-    "axios": "^0.21.4",
+    "axios": "^0.21.1",
     "babel-polyfill": "^6.26.0",
-    "chart.js": "^2.9.4",
+    "chart.js": "^2.9.3",
     "core-js": "3",
     "detect-browser": "^4.8.0",
     "echarts": "^5.3.3",

src/app/main.js

@@ -71,9 +71,7 @@ localforage.config({ name: 'bioprovue' })
 let MqttUrl
 // for developer
 if (process.env.NODE_ENV === 'development') {
-  MqttUrl = 'ws://192.168.5.66:8083'
-  // MqttUrl = 'ws://192.168.5.42:8083'
-  // MqttUrl = 'ws://192.168.5.240:8080'
+  MqttUrl = 'ws://192.168.5.42:8083'
   // MqttUrl = 'ws://192.168.5.57:8083'
   // MqttUrl = 'ws://192.168.5.57:8080'
 } else {

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

@@ -1,5 +1,6 @@
 <template>
   <div>
+    <pre>{{controlPanel}}</pre>
     <div class="row row-equal">
       <div class="flex md12 xl3 xs12 sm12">
         <div class="row">
@@ -79,6 +80,7 @@ export default {
       'startTimeCurrent',
       'endTimeCurrent',
       'sampleMethod',
+      'controlPanel',
     ]),
   },
   props: {
@@ -371,7 +373,6 @@ 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'],
@@ -380,7 +381,6 @@ export default {
         // throttleType: 'debounce',
         // throttleDelay: 5,
       }
-      console.log('panelInfo: ', panelInfo) // TODO: update the formatter for tooltips
       this.showChartLoading('detail')
       const timeDur = this.endTimeCurrent - this.startTimeCurrent
       let _gridNumber = 0

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

@@ -63,7 +63,53 @@
           </div>
         </div>
       </va-collapse> -->
-      <specific-integral :ref="'specific_integral'" @setBrushBoundary="setBrushBoundary" />
+      <!-- tang -->
+      <div class="flex-container mb-2">
+        <div class="flex sm2 xl2 md2 xs2 px-0 py-0">
+          <p class="display-6"> X-test </p>
+        </div>
+        <div class="flex sm5 xl5 md5 xs5 pl-1 pr-0 py-0">
+          <change-axis-b :ref="'axis_x'" axis="x" @changeType="refresh"/>
+        </div>
+        <div class="flex sm5 xl5 md5 xs5 pl-1 pr-0 py-0">
+          <change-unit-b
+            :ref="'unit_x'"
+            axis="x"
+            @changeUnit="refreshFormatter"
+          />
+        </div>
+      </div>
+      <div class="flex-container mb-2">
+        <div class="flex sm2 xl2 md2 xs2 px-0 py-0" />
+        <div class="flex sm5 xl5 md5 xs5 pl-1 pr-0 py-0">
+          <change-funct-b :ref="'funct_x'" axis="x" @changeFunct="changeFunct"/>
+        </div>
+      </div>
+      <div class="flex-container mb-2">
+        <div class="flex sm2 xl2 md2 xs2 px-0 py-0">
+          <p class="display-6"> Y-test </p>
+        </div>
+        <div class="flex sm5 xl5 md5 xs5 pl-1 pr-0 py-0">
+          <change-axis-b
+            :ref="'axis_y'"
+            axis="y"
+            @changeType="refresh"
+          />
+        </div>
+        <div class="flex sm5 xl5 md5 xs5 pl-1 pr-0 py-0">
+          <change-unit-b
+            :ref="'unit_y'"
+            axis="y"
+            @changeUnit="refreshFormatter"/>
+        </div>
+      </div>
+      <div class="flex-container mb-2">
+        <div class="flex sm2 xl2 md2 xs2 px-0 py-0" />
+        <div class="flex sm5 xl5 md5 xs5 pl-1 pr-0 py-0">
+          <change-funct-b :ref="'funct_y'" axis="y" @changeFunct="changeFunct"/>
+        </div>
+      </div>
+      <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"/>
@@ -82,8 +128,11 @@
 <script>
 import ShowResampleRate from '@/components/analysis/replay/toolbox/ShowResampleRate.vue'
 import ChangeAxis from '@/components/analysis/replay/toolbox/ChangeAxis.vue'
+import ChangeAxisB from '@/components/analysis/replay/toolbox/ChangeAxisB.vue'
 import ChangeUnit from '@/components/analysis/replay/toolbox/ChangeUnit.vue'
+import ChangeUnitB from '@/components/analysis/replay/toolbox/ChangeUnitB.vue'
 import ChangeScale from '@/components/analysis/replay/toolbox/ChangeScale.vue'
+import ChangeFunctB from '@/components/analysis/replay/toolbox/ChangeFunctB.vue'
 import 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'
@@ -93,15 +142,21 @@ 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 types from '@/store/modules/analysis/replay/types'
 
 export default {
   name: 'top-control-panel',
   components: {
     ShowResampleRate,
     ChangeAxis,
+    ChangeAxisB,
     ChangeUnit,
+    ChangeUnitB,
     ChangeScale,
+    ChangeFunctB,
     ChangeCycle,
     AbsToggle,
     SpecificIntegral,
@@ -114,8 +169,10 @@ export default {
   },
   computed: {
     ...mapFields('replay', [
+      'chartData',
       'metaList',
       'showCyclePanel',
+      'controlPanel',
     ]),
   },
   props: {
@@ -127,13 +184,57 @@ export default {
       deviceName: '',
       showCycle: false,
       innerCollapse: false,
+      tableRouter,
     }
   },
-  mqtt: {
-  },
   methods: {
+    ...mapMutations('replay', [types.chart.updateAxisLabel]),
+    refreshFormatter (axis) {
+      this.updateAxisLabelChart({
+        chartID: 1,
+        axis: axis,
+        axisIndex: 0,
+        channel: -1,
+      })
+      this.refreshChart(this.chartData[1])
+    },
+    changeFunct (axis) {
+      this.refreshUnit()
+      this.refreshFormatter(axis)
+      this.$emit('changeFunctional', axis, this.controlPanel[axis].funct)
+      this.$emit('changeAxis', 0)
+    },
+    refreshAxis () {
+      const xType = this.controlPanel.x.type
+      const yType = this.controlPanel.y.type
+      const xFunct = this.controlPanel.x.funct
+      const yFunct = this.controlPanel.y.funct
+      this.$refs.axis_x.refreshAxis(xType, xFunct, yType, yFunct)
+      this.$refs.axis_y.refreshAxis(xType, xFunct, yType, yFunct)
+    },
+    refreshUnit (axis) {
+      const xType = this.controlPanel.x.type
+      const yType = this.controlPanel.y.type
+      const xFunct = this.controlPanel.x.funct
+      const yFunct = this.controlPanel.y.funct
+      if (axis === 'x') {
+        this.$refs.unit_x.refreshUnit(xType, xFunct, yType, yFunct)
+      } else {
+        this.$refs.unit_y.refreshUnit(xType, xFunct, yType, yFunct)
+      }
+    },
     init () {
+      //
       this.deviceName = this.metaList[0].device.library_name
+      // tang
+      this.initDefaultControlPanel()
+      this.$refs.axis_x.init()
+      this.$refs.funct_x.init()
+      this.$refs.unit_x.init(this.controlPanel.x.type)
+      this.$refs.axis_y.init()
+      this.$refs.funct_y.init()
+      this.$refs.unit_y.init(this.controlPanel.y.type)
+      //
       this.$refs.change_unit_x.init(this.deviceName)
       this.$refs.change_unit_y.init(this.deviceName)
       this.$refs.change_axis_x.init(this.deviceName)
@@ -147,6 +248,14 @@ export default {
       this.$refs.show_param.init(this.deviceName)
       this.$refs.change_window_start_and_size.init()
     },
+    refresh () {
+      this.$refs.axis_x.init()
+      this.$refs.funct_x.init()
+      this.$refs.unit_x.init(this.controlPanel.x.type)
+      this.$refs.axis_y.init()
+      this.$refs.funct_y.init()
+      this.$refs.unit_y.init(this.controlPanel.y.type)
+    },
     changeOverviewDataZoom () {
       this.$emit('changeOverviewDataZoom')
     },
@@ -175,7 +284,6 @@ export default {
         unit_x: this.$refs.change_unit_x.getUnitByAxis(),
         unit_y: this.$refs.change_unit_y.getUnitByAxis(),
       }
-      // console.log('panelInfo: ', panelInfo)
       return panelInfo
     },
     clearCycle () {
@@ -188,6 +296,102 @@ export default {
       this.innerCollapse = this.innerCollapse ? false : true
       console.log(this.innerCollapse)
     }, */
+    initDefaultControlPanel () {
+      // use state meta to decide which default unit need to be used (like check I-V mode...)
+      const setting = this.GLOBAL.getDefaultChartTypeByMode(this.metaList[0].parameter_set.MODE, this.deviceName)
+
+      // x-axis
+      let settingType = setting[0]
+      let settingValue = setting[1]
+
+      if (this.deviceName === 'EliteZM15' || this.deviceName.includes('Elite_EDC')) {
+        if (settingType === 'Elite') {
+          // 1: I, 2: V, 3: R, 4: cycle
+          if (settingValue === 1) {
+            this.controlPanel.x.type = 'Current'
+          } else if (settingValue === 2) {
+            this.controlPanel.x.type = 'Voltage'
+          } else if (settingValue === 3) {
+            this.controlPanel.x.type = 'Resistance'
+          } else if (settingValue === 4) {
+            this.controlPanel.x.type = 'Cycle'
+          }
+        } else if (settingType === 'Time') {
+          this.controlPanel.x.type = 'Time'
+        }
+      } else if (this.deviceName.includes('EIS')) {
+        if (settingType.includes('EIS')) {
+          if (settingValue === 3) {
+            this.controlPanel.x.type = 'Frequency'
+          } else if (settingValue === 5 || settingValue === 6 || settingValue === 7) {
+            this.controlPanel.x.type = 'Impedance'
+          } else if (settingValue === 8) {
+            this.controlPanel.x.type = 'Phase'
+          } else if (settingValue === 9) {
+            this.controlPanel.x.type = 'Current'
+          } else if (settingValue === 10) {
+            this.controlPanel.x.type = 'Default'
+          }
+        } else if (settingType === 'Elite') {
+          // 1: I, 2: V, 3: R
+          if (settingValue === 1) {
+            this.controlPanel.x.type = 'Current'
+          } else if (settingValue === 2) {
+            this.dataTcontrolPanel.xype = 'Voltage'
+          } else if (settingValue === 3) {
+            this.controlPanel.x.type = 'Resistance'
+          }
+        } else if (settingType === 'Time') {
+          this.controlPanel.x.type = 'Time'
+        }
+      }
+
+      // y-axis
+      settingType = setting[2]
+      settingValue = setting[3]
+
+      if (this.deviceName === 'EliteZM15' || this.deviceName.includes('Elite_EDC')) {
+        if (settingType === 'Elite') {
+          // 1: I, 2: V, 3: R, 4: cycle
+          if (settingValue === 1) {
+            this.controlPanel.y.type = 'Current'
+          } else if (settingValue === 2) {
+            this.controlPanel.y.type = 'Voltage'
+          } else if (settingValue === 3) {
+            this.controlPanel.y.type = 'Resistance'
+          } else if (settingValue === 4) {
+            this.controlPanel.y.type = 'Cycle'
+          }
+        } else if (settingType === 'Time') {
+          this.controlPanel.y.type = 'Time'
+        }
+      } else if (this.deviceName.includes('EIS')) {
+        if (settingType.includes('EIS')) {
+          if (settingValue === 3) {
+            this.controlPanel.y.type = 'Frequency'
+          } else if (settingValue === 5 || settingValue === 6 || settingValue === 7) {
+            this.controlPanel.y.type = 'Impedance'
+          } else if (settingValue === 8) {
+            this.controlPanel.y.type = 'Phase'
+          } else if (settingValue === 9) {
+            this.controlPanel.y.type = 'Current'
+          } else if (settingValue === 10) {
+            this.controlPanel.y.type = 'Default'
+          }
+        } else if (settingType === 'Elite') {
+          // 1: I, 2: V, 3: R
+          if (settingValue === 1) {
+            this.controlPanel.y.type = 'Current'
+          } else if (settingValue === 2) {
+            this.dataTcontrolPanel.xype = 'Voltage'
+          } else if (settingValue === 3) {
+            this.controlPanel.y.type = 'Resistance'
+          }
+        } else if (settingType === 'Time') {
+          this.controlPanel.y.type = 'Time'
+        }
+      }
+    },
   },
   mounted () {
   },

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

@@ -46,7 +46,7 @@ export default {
   },
   computed: {
     ...mapFields('', [
-      'developer_mode',
+      'developerMode',
     ]),
     ...mapFields('taskContent', [
       'chartData',

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

@@ -0,0 +1,65 @@
+<template>
+  <div>
+    <va-select
+      v-model="controlPanel[axis].type"
+      class="va-select-without-margin"
+      :options="typeOption"
+      :noClear='true'
+      @input="changeType()"
+    />
+  </div>
+</template>
+
+<script>
+import { mapFields } from 'vuex-map-fields'
+import { tableRouter } from '@/components/analysis/replay/toolbox/EliteReplayTable'
+
+export default {
+  name: 'change-axis-b',
+  props: {
+    axis: {
+      type: String, // x or y
+    },
+  },
+  data () {
+    return {
+      typeOption: [],
+      tableRouter,
+    }
+  },
+  computed: {
+    ...mapFields('replay', [
+      'controlPanel',
+    ]),
+  },
+  methods: {
+    init (type) {
+      this.typeOption = [
+        'Time',
+        'Current',
+        'Voltage',
+        'Resistance',
+      ]
+    },
+    refreshAxis (xType, xFunct, yType, yFunct) {
+      const [xTable, yTable] = this.tableRouter.getTable(xType, xFunct, yType, yFunct)
+      if (this.axis === 'x') {
+        this.controlPanel[this.axis].type = xTable.name
+      } else {
+        this.controlPanel[this.axis].type = yTable.name
+      }
+    },
+    changeType () {
+      this.$emit('changeType')
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+  .va-select-without-margin {
+    .va-select {
+      margin-bottom: 0;
+    }
+  }
+</style>

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

@@ -0,0 +1,55 @@
+<template>
+  <div>
+    <va-radio-button
+      v-for="(funct, index) in functOption"
+      :key="index"
+      v-model="controlPanel[axis].funct"
+      :option="funct"
+      @input="changeFunct()"
+    />
+  </div>
+</template>
+
+<script>
+import { mapFields } from 'vuex-map-fields'
+import { tableRouter } from '@/components/analysis/replay/toolbox/EliteReplayTable'
+
+export default {
+  name: 'change-funct-b',
+  props: {
+    axis: {
+      type: String, // x or y
+    },
+  },
+  data () {
+    return {
+      funct: '',
+      functOption: [],
+      tableRouter,
+    }
+  },
+  computed: {
+    ...mapFields('replay', [
+      'controlPanel',
+    ]),
+  },
+  methods: {
+    init () {
+      this.controlPanel[this.axis].funct = 'Linear'
+      this.functOption = this.tableRouter.getFunct(this.axis)
+    },
+    changeFunct () {
+      this.$emit('changeFunct', this.axis)
+    },
+  },
+}
+
+</script>
+
+<style lang="scss">
+  .va-select-without-margin {
+    .va-select {
+      margin-bottom: 0;
+    }
+  }
+</style>

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

@@ -0,0 +1,65 @@
+<template>
+  <div>
+    <va-select
+      @input="changeUnit()"
+      v-model="controlPanel[axis].unit"
+      class="va-select-without-margin"
+      :options="unitOption"
+      :noClear='true'
+    />
+  </div>
+</template>
+
+<script>
+import { mapFields } from 'vuex-map-fields'
+import { tableRouter } from '@/components/analysis/replay/toolbox/EliteReplayTable'
+
+export default {
+  name: 'change-unit-b',
+  props: {
+    axis: {
+      type: String, // x or y
+    },
+  },
+  data () {
+    return {
+      unit: '',
+      unitOption: [],
+      tableRouter,
+    }
+  },
+  computed: {
+    ...mapFields('replay', [
+      'controlPanel',
+    ]),
+  },
+  methods: {
+    init (type) {
+      this.controlPanel[this.axis].unit = this.tableRouter.getDefaultUnit(type)
+      this.unitOption = Object.keys(this.tableRouter.getOption(type))
+    },
+    refreshUnit (xType, xFunct, yType, yFunct) {
+      const [xTable, yTable] = this.tableRouter.getTable(xType, xFunct, yType, yFunct)
+      if (this.axis === 'x') {
+        this.controlPanel[this.axis].unit = xTable.defaultUnit
+        this.unitOption = Object.keys(xTable.option)
+      } else {
+        this.controlPanel[this.axis].unit = yTable.defaultUnit
+        this.unitOption = Object.keys(yTable.option)
+      }
+    },
+    changeUnit () {
+      this.$emit('changeUnit', this.axis)
+    },
+  },
+}
+
+</script>
+
+<style lang="scss">
+  .va-select-without-margin {
+    .va-select {
+      margin-bottom: 0;
+    }
+  }
+</style>

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

@@ -0,0 +1,143 @@
+const chartTable = {
+  // axis type
+  Time: {
+    name: 'Time',
+    option: {
+      auto: 1,
+    },
+    defaultUnit: 'auto',
+    downloadUnit: 'auto',
+  },
+  Current: {
+    name: 'Current',
+    option: {
+      nA: 1,
+      uA: 1e3,
+      mA: 1e6,
+      A: 1e9,
+    },
+    defaultUnit: 'A',
+    downloadUnit: 'A',
+  },
+  Voltage: {
+    name: 'Voltage',
+    option: {
+      uV: 1,
+      mV: 1e3,
+      V: 1e6,
+    },
+    defaultUnit: 'V',
+    downloadUnit: 'V',
+  },
+  Resistance: {
+    name: 'Resistance',
+    option: {
+      mΩ: 1,
+      Ω: 1e3,
+      kΩ: 1e6,
+      MΩ: 1e9,
+    },
+    defaultUnit: 'Ω',
+    downloadUnit: 'Ω',
+  },
+  Charge: {
+    name: 'Charge',
+    option: {
+      nC: 1e6,
+      uC: 1e9,
+      mC: 1e12,
+      C: 1e15,
+    },
+    defaultUnit: 'C',
+    downloadUnit: 'C',
+  },
+  Power: {
+    name: 'Power',
+    option: {
+      mW: 1e12,
+      W: 1e15,
+      kW: 1e18,
+    },
+    defaultUnit: 'W',
+    downloadUnit: 'W',
+  },
+  Transconductance: {
+    name: 'Transconductance',
+    option: {
+      'mA/V': 1,
+      'A/V': 1e3,
+      'kA/V': 1e6,
+    },
+    defaultUnit: 'A/V',
+    downloadUnit: 'A/V',
+  },
+  Idiot: {
+    name: 'Idiot',
+    option: {
+      idiot: 1,
+    },
+    defaultUnit: 'idiot',
+    downloadUnit: 'idiot',
+  },
+}
+export const tableRouter = {
+  getDefaultUnit: (axis) => {
+    return chartTable[axis].defaultUnit
+  },
+  getOption: (axis) => {
+    return chartTable[axis].option
+  },
+  getTable: (xAxis, xFunct, yAxis, yFunct) => {
+    var xTable = chartTable[xAxis]
+    var yTable = chartTable.Idiot
+    if (yFunct === 'Linear' || yFunct === 'Log') {
+      yTable = chartTable[yAxis]
+    } else if (yFunct === 'Integral') {
+      if (xAxis === 'Time' && yAxis === 'Current') {
+        yTable = chartTable.Charge
+      } else if (xAxis === 'Current' && yAxis === 'Voltage') {
+        yTable = chartTable.Power
+      } else if (xAxis === 'Voltage' && yAxis === 'Current') {
+        yTable = chartTable.Power
+      }
+    } else if (yFunct === 'Differential') {
+      if (xAxis === 'Current' && yAxis === 'Voltage') {
+        yTable = chartTable.Resistance
+      } else if (xAxis === 'Voltage' && yAxis === 'Current') {
+        yTable = chartTable.Transconductance
+      }
+    }
+    return [xTable, yTable]
+  },
+  getFunct (axis) {
+    if (axis === 'x') {
+      return ['Linear', 'Log']
+    } else {
+      return ['Linear', 'Log', 'Integral', 'Differential']
+    }
+  },
+  // 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/project/manager/ProjectManager.vue

@@ -2,8 +2,32 @@
   <div>
     <va-card style="height: 90vh; 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">
+            <va-icon name="fa fa-bluetooth-b" color="primary"/>
+            <h5 class="mb-0">PROJECTS</h5>
+          </div>
+          <div class="flex xs7 sm7 lg7 xl7" style="text-align: right;">
+            <!-- <va-button v-if="projectConfigList.length !== 0" class="ma-0 circle-button" @click="closePanel"> -->
+            <va-icon
+              name="fa fa-times"
+              color="black"
+            />
+            <!-- </va-button> -->
+          </div>
+        </div>
+        <!-- <div class="flex d-flex xl5 lg5 sm5 xs5 ma-0">
+          <va-icon name="fa fa-bluetooth-b mr-3" color="primary"/>
+          <h5 class="mb-0">PROJECTS</h5>
+        </div>
+        <div class="flex d-flex xl7 lg7 sm7 xs7 ma-0" style="text-align: right;">
+          <va-button v-if="projectConfigList.length !== 0" class="pa-0 ma-0 circle-button" small color="dark" @click="closePanel">
+            <va-icon
+              name="fa fa-times"
+              color="white"
+            />
+          </va-button>
+        </div> -->
       </template>
       <div class="flex d-flex m12 xs12 md12 xl12">
         <div>
@@ -44,6 +68,7 @@ export default {
       'projectList',
       'projectConfigList',
       'runningProjectList',
+      'projectManagerPanel',
     ]),
   },
   data () {
@@ -63,9 +88,16 @@ export default {
         types.project.create,
       ],
     ),
+    closePanel: function () {
+      this.projectManagerPanel.show = !this.projectManagerPanel.show
+    },
   },
   mounted () {
     this.projectList = this.projectConfigList
   },
 }
 </script>
+
+<style>
+
+</style>

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

@@ -3,6 +3,12 @@
     <div class="task-config__header-separator mb-1">
       <div class="task-config__header-text">
         <span>Action &#38; Condition</span>
+        <va-button class="circle-button" small color="dark" @click="closePanel">
+          <va-icon
+            name="fa fa-times"
+            color="white"
+          />
+        </va-button>
       </div>
     </div>
     <div>
@@ -76,6 +82,7 @@ export default {
 
     ...mapFields('project', [
       'taskSelectKey',
+      'taskViewPanel',
     ]),
   },
   data () {
@@ -95,6 +102,9 @@ export default {
     }
   },
   methods: {
+    closePanel: function () {
+      this.taskViewPanel.show = !(this.taskViewPanel.show)
+    },
     selectDevice: function (deviceKey) {
       this.settingStep = 1
       this.deviceSelect = deviceKey

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

@@ -2,7 +2,13 @@
   <div class="flex sm12 xl12 md12 xs12">
     <div class="task-config__header-separator mb-1">
       <div class="task-config__header-text">
-        <span >Device</span>
+        <span> Device </span>
+        <va-button class="circle-button" small color="dark" @click="closePanel">
+          <va-icon
+            name="fa fa-times"
+            color="white"
+          />
+        </va-button>
       </div>
     </div>
     <div>
@@ -57,6 +63,7 @@ export default {
 
     ...mapFields('project', [
       'taskSelectKey',
+      'taskViewPanel',
     ]),
   },
   data () {
@@ -90,6 +97,9 @@ export default {
         }
       }
     },
+    closePanel: function () {
+      this.taskViewPanel.show = !(this.taskViewPanel.show)
+    },
   },
   mounted () {
   },

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

@@ -3,13 +3,19 @@
     <div class="task-config__header-separator mb-1">
       <div class="task-config__header-text">
         <span >Parameter Set</span>
+        <va-button class="circle-button" small color="dark" @click="closePanel">
+          <va-icon
+            name="fa fa-times"
+            color="white"
+          />
+        </va-button>
       </div>
     </div>
     <div>
       <device-parameter-recording
         :ref="'device_parameter_ref'"
         :parameter="parameter"
-        :library="'EliteEDC1.5'"
+        :library="'Elite_EDC_1.5'"
         @setParameter="setParameter"
         @setParameterWithDebounce="setParameterWithDebounce"
       />
@@ -54,6 +60,9 @@ export default {
     }
   },
   methods: {
+    closePanel: function () {
+      this.taskViewPanel.show = !(this.taskViewPanel.show)
+    },
     selectDevice: function (device) {
       this.deviceSelected = device
     },

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

@@ -36,13 +36,13 @@
                 {{ task.name }}
               </td>
               <td align="center">
-                <va-button :flat="true" @click="openConfig(1, taskIndex)" small>Device</va-button>
+                <va-button :flat="true" @click="openConfig(1, taskIndex)" small>Add device</va-button>
               </td>
               <td align="center">
                 <va-button :flat="true" @click="openConfig(3, taskIndex)" small>Add event</va-button>
               </td>
               <td align="center">
-                <va-button :flat="true" @click="openConfig(4, taskIndex)" small>ParameterSet</va-button>
+                <va-button :flat="true" @click="openConfig(4, taskIndex)" small>Add parameter</va-button>
               </td>
               <td align="center">
                 <va-icon class="fa fa-close" @click.native="() => deleteTask({ index: taskIndex})"></va-icon>
@@ -71,32 +71,62 @@
                   {{ 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.length === 0">
+                  <va-button :flat="true" @click="openConfig(1, taskIndex, deviceUUID)" small>
+                    Add device
+                  </va-button>
+                </div>
+                <div v-else>
+                  <va-button :flat="true" @click="openConfig(1, taskIndex, deviceUUID)" small>
+                    <span>{{ getDeviceProject(deviceUUID) && getDeviceProject(deviceUUID).name }}</span>
+                  </va-button>
                 </div>
               </td>
-              <td align="center" @click="openConfig(3, taskIndex, deviceUUID)">
-                <div class="flex">
+              <!-- device end -->
+              <!-- action -->
+              <td align="center">
+                <div v-if="Object.keys(task.action).length === 0">
+                  <va-button :flat="true" @click="openConfig(3, taskIndex, deviceUUID)" small>
+                    Add event
+                  </va-button>
+                </div>
+                <div v-else class="flex">
                   <div 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 small>
+                          {{ action.type }} {{ task.condition[conditionKey].type }} {{ task.condition[conditionKey].value }}
+                        </div>
+                        <va-button :flat="1" @click="openConfig(3, taskIndex, deviceUUID)" small>
+                          New Action/Condition
+                        </va-button>
                       </div>
                     </div>
                   </div>
                 </div>
               </td>
-              <td align="center" @click="openConfig(4, taskIndex, deviceUUID)">
-                <div class="flex d-flex">
-                  <div class="flex">
+              <!-- action end -->
+              <td align="center">
+                <div v-if="Object.keys(task.parameter_set).length === 0">
+                  <va-button :flat="true" @click="openConfig(4, taskIndex, deviceUUID)" small>
+                    Add parameter
+                  </va-button>
+                </div>
+                <va-button :flat="true" @click="openConfig(4, taskIndex, deviceUUID)" v-else class="flex d-flex">
+                  <div class="flex" small>
                     <div v-for="(parameterSet, parameterSetKey) in getParameterSetTask(taskIndex, deviceUUID)" :key="parameterSetKey">
                       <div v-for="(parameter, parameterKey) in parameterSet" :key="parameterKey">
-                        <span v-if="parameterKey !== 'target'"> {{ parameterName(parameterKey) }} : {{ parameterValue(parameterKey, parameter) }} </span>
+                        <span v-if="parameterKey !== 'target'">
+                          <div small>
+                            {{ parameterName(parameterKey) }} : {{ parameterValue(parameterKey, parameter) }}
+                          </div>
+                        </span>
                       </div>
                     </div>
                   </div>
-                </div>
+                </va-button>
               </td>
               <td align="center" v-if="lockMode === false">
                 <va-icon class="fa fa-close" @click.native="() => deleteTask({ index: taskIndex})"></va-icon>
@@ -177,7 +207,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

src/components/setting/deviceInfo.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="device-info">
+    456465
     <div class="row flex">
       <div class="flex-wrap-setting sm12 xl12 md12 xs12">
         <!-- <draggable class="flex d-flex sm12 xl12 md12 xs12" v-model="devicesList" @start="drag=true" @end="drag=false" > -->

src/components/task/content/TaskContent.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="task-content">
-
     <va-modal
       v-model="showShutdownModal"
       size="small"
@@ -29,7 +28,7 @@
           <div class="flex sm12 xl12 md12 xs12">
             <task-devices-new :ref="'devices_ref'" @add="addDevice($event)" @remove="removeDevice($event)" @refreshSetting="refreshChartSetting($event)" class="pa-0" />
           </div>
-          <div class="flex sm12 xl12 md12 xs12" v-if="developer_mode">
+          <div class="flex sm12 xl12 md12 xs12" v-if="developerMode">
             <task-formula :ref="'formula_ref'" @add="addFormula($event)" @remove="removeFormula($event)" class="pa-0" />
           </div>
         </div>
@@ -129,7 +128,7 @@ export default {
       'deviceListNew',
     ]),
     ...mapFields('', [
-      'developer_mode',
+      'developerMode',
     ]),
   },
   data () {
@@ -365,7 +364,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,
@@ -591,6 +590,9 @@ export default {
         path: '/',
       })
     },
+    switchMode: function () {
+      this.developerMode = !this.developerMode
+    },
 
     ...mapActions('taskContent', [
       taskTypes.chart.initCustomizedFromCache,
@@ -609,7 +611,7 @@ export default {
   async mounted () {
     const devMode = this.$route.params.mode
     if (devMode === 'dev') {
-      this.developer_mode = true
+      this.developerMode = true
     }
 
     await taskInfo.updateTaskInfo(this.$route.params.taskID)
@@ -617,6 +619,18 @@ export default {
     await this.pageInit()
 
     this.dataRefreshTimer = setInterval(this.refreshData, 1000)
+
+    var switchModeHander = function (switchMode, e) {
+      if (e.shiftKey && e.metaKey && e.keyCode === 83) {
+        switchMode()
+      }
+      if (e.shiftKey && e.ctrlKey && e.keyCode === 83) {
+        switchMode()
+      }
+    }
+
+    // eslint-disable-next-line no-undef
+    window.addEventListener('keydown', switchModeHander.bind(_, this.switchMode))
   },
   destroyed () {
     taskInfo.destroyed(this.deviceList)

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

@@ -37,6 +37,13 @@
           <canvas-chart-real-time-display
             :chartID="chartID" ref="CanvasChartRealTimeDisplay"
           />
+          <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">
+                {{ device }} {{ channel }} {{ i.length }} first data: {{ (i[0] !== undefined) && i[0][0] }} last data: {{ (i[i.length-1] !== undefined) && i[i.length-1][i[i.length-1].length-1]}}
+              </div>
+            </div>
+          </div>
           <!-- chart -->
           <chart :key="taskContentChartKey" :ref="'chart_ref'" :style="'width: '+ cardwidth + '; height: ' + cardheight + ';'" :option="data" @dataZoom="updateZoom" :auto-resize="true"></chart>
         </div>
@@ -46,15 +53,15 @@
       </div>
       <div v-else :style="'width: '+ cardwidth + '; height: ' + cardheight + ';'" >
       </div>
-      <div v-if="this.$refs.chart_ref != null">
+      <!-- <div v-if="this.$refs.chart_ref != null">
         <va-button small class="mb-3" @click="selectAllSeries">
           SELECT ALL
         </va-button>
         <va-button small class="mb-3" @click="inverseSelectAllSeries">
           INVERSE SELECT
         </va-button>
-      </div>
-      <div class="row flex align--left ma-0 pa-0">
+      </div> -->
+      <div class="row flex align--left ma-0 pa-0 mt-2">
         <va-input
           v-if="chartData[chartID].chartXMode === 'time'"
           class="mx-1"
@@ -103,7 +110,7 @@
           </p>
         </va-input>
       </div>
-      <div class="row flex ma-0 pa-0" v-if="developer_mode === true">
+      <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" />
         <canvas-chart-filter :chartID="chartID" :filterIndex="2" />
@@ -123,6 +130,7 @@ import CanvasChartRealTimeDisplay from '@/components/task/content/chart/CanvasCh
 import { mapActions } from 'vuex'
 import taskTypes from '@/store/modules/task/content/types'
 import CanvasChartRealTimeCalculation from './CanvasChartRealTimeCalculation.vue'
+import { dataStreamBuffer } from '@/data/task/DataStreamBuffer'
 
 export default {
   name: 'CanvasChart',
@@ -156,7 +164,7 @@ export default {
   },
   computed: {
     ...mapFields('', [
-      'developer_mode',
+      'developerMode',
     ]),
     ...mapFields('taskContent', [
       'chartData',
@@ -183,6 +191,7 @@ export default {
       dataZoomEnd: 100,
       captured: false,
       calClicked: false,
+      dataStreamBuffer: dataStreamBuffer,
     }
   },
   methods: {
@@ -219,7 +228,7 @@ export default {
         this.timeIntervalInput = 'auto'
         this.chartData[this.chartID].xAxis.forEach(x => {
           if (x.type === 'time') {
-            x.interval = 500 * 1000
+            x.interval = null
           }
         })
       }

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

@@ -64,7 +64,7 @@ export default {
   },
   computed: {
     ...mapFields('', [
-      'developer_mode',
+      'developerMode',
     ]),
     ...mapFields('taskContent', [
       'chartData',
@@ -271,19 +271,16 @@ export default {
         // 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) {

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

@@ -171,7 +171,7 @@ export default {
               this.data.xAxis[gridIndex].axisLabel.formatter = this.timeFormatter
             } else {
               this.data.xAxis[gridIndex].axisLabel.formatter = function (val) {
-                return parseFloat(val / _xScale).toFixed(2) + _xUnit
+                return parseFloat(val / _xScale).toFixed(3) + _xUnit
               }
             }
             // update yAxis.formatter
@@ -179,7 +179,7 @@ export default {
               this.data.yAxis[gridIndex].axisLabel.formatter = this.timeFormatter
             } else {
               this.data.yAxis[gridIndex].axisLabel.formatter = function (val) {
-                return parseFloat(val / _yScale).toFixed(2) + _yUnit
+                return parseFloat(val / _yScale).toFixed(3) + _yUnit
               }
             }
             // update tooltip.formatter
@@ -252,6 +252,7 @@ export default {
     },
     realTime: {
       handler: function () {
+        this.updateValue()
         this.matchFormatter()
       },
       deep: true,

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

@@ -13,7 +13,7 @@ const chartTable = {
           min: 60 * 1e6,
           hour: 60 * 60 * 1e6,
         },
-        defaultUnit: 'ms',
+        defaultUnit: 's',
         downloadUnit: 'ms',
       },
     },
@@ -43,7 +43,7 @@ const chartTable = {
           min: 60 * 1e6,
           hour: 60 * 60 * 1e6,
         },
-        defaultUnit: 'ms',
+        defaultUnit: 's',
         downloadUnit: 'ms',
       },
     },
@@ -86,14 +86,14 @@ const chartTable = {
           min: 60 * 1e6,
           hour: 60 * 60 * 1e6,
         },
-        defaultUnit: 'ms',
+        defaultUnit: 's',
         downloadUnit: 'ms',
       },
     },
     // 1
     {
       default: {
-        name: 'Resistor',
+        name: 'Resistance',
         unit: {
           mΩ: 1,
           Ω: 1e3,

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

@@ -36,6 +36,7 @@
                 <va-button @click.stop="start(device)" v-if="device.library_name.includes('Elite') && device.status !== 1" class="px-2 py-0 mr-0" color="success" small>START</va-button>
                 <va-button @click.stop="stop(device)" v-if="device.library_name.includes('Elite') && device.status === 1" class="px-2 py-0 mr-0" color="danger" small>STOP</va-button>
                 <va-button id="detectButton" @click.stop="detect(device)" v-if="device.library_name.includes('Elite')" color="primary" class="px-2 py-0 mr-0" small>DETECT</va-button>
+                <va-button  @click.stop="show($event, device)" v-if="developerMode" color="warning" class="px-2 py-0 mr-0" small>Show</va-button>
               </va-item-label>
             </va-item-section>
           </va-item>
@@ -65,6 +66,7 @@ import types from '@/store/modules/task/content/types'
 import { taskInfo } from '../../../../data/task/TaskInfo'
 import api from '@/data/api'
 // import CanvasChart from '../chart/CanvasChart'
+import { mapFields } from 'vuex-map-fields'
 
 export default {
   name: 'TaskDeviceList',
@@ -88,6 +90,9 @@ export default {
     }
   },
   computed: {
+    ...mapFields('', [
+      'developerMode',
+    ]),
   },
   methods: {
     mqttPub: function (topic, mes) {
@@ -151,6 +156,12 @@ export default {
       this.$emit('detect', device)
       this.pageToast('The device ' + device.name + ' has been detect.')
     },
+    show: function (event, device) {
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'show_device_data/0',
+        device: device.memory_board,
+      }))
+    },
     recoverDetectButton () {
       document.getElementById('detectButton').className += ' no-dark-style-va-button'
     },

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

@@ -197,7 +197,7 @@ export default {
       }
     },
     ...mapFields('', [
-      'developer_mode',
+      'developerMode',
     ]),
     ...mapFields('taskContent', [
       'deviceListNew',
@@ -262,7 +262,7 @@ export default {
   },
   mounted () {
     // dev mode
-    // this.developer_mode === true
+    // this.developerMode === true
     //   ? this.workingModeOptions = this.workingModeDevOptions
     //   : this.workingModeOptions = this.workingModeNoDevOptions
     this.workingModeOptions = this.parameterTable.MODE_OPTIONS

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

@@ -168,7 +168,7 @@ export default {
       }
     },
     ...mapFields('', [
-      'developer_mode',
+      'developerMode',
     ]),
     ...mapFields('taskContent', [
       'deviceListNew',
@@ -233,7 +233,7 @@ export default {
   },
   mounted () {
     // dev mode
-    // this.developer_mode === true
+    // this.developerMode === true
     //   ? this.workingModeOptions = this.workingModeDevOptions
     //   : this.workingModeOptions = this.workingModeNoDevOptions
     this.workingModeOptions = this.parameterTable.MODE_OPTIONS

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

@@ -0,0 +1,97 @@
+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看的參數
+  valScales: {
+    linear: {
+      func: (val) => {
+        return val
+      },
+    },
+    log: {
+      func: (val) => {
+        return Math.log10(Math.abs(val))
+      },
+    },
+  },
+  channels: {
+    time: {
+      name: 'Time',
+      unit: {
+        us: 1,
+        ms: 1e3,
+        s: 1e6,
+        minute: 60 * 1e6,
+        hour: 60 * 60 * 1e6,
+      },
+      defaultUnit: 'ms',
+      downloadUnit: 'ms',
+    },
+    0: {
+      name: 'I_in',
+      unit: {
+        nA: 1,
+        uA: 1e3,
+        mA: 1e6,
+      },
+      defaultUnit: 'mA',
+      downloadUnit: 'mA',
+    },
+    1: {
+      name: 'Potential',
+      unit: {
+        uV: 1,
+        mV: 1e3,
+        V: 1e6,
+      },
+      defaultUnit: 'mV',
+      downloadUnit: 'mV',
+    },
+    2: {
+      name: 'V_out',
+      unit: {
+        uV: 1,
+        mV: 1e3,
+        V: 1e6,
+      },
+      defaultUnit: 'mV',
+      downloadUnit: 'mV',
+    },
+  },
+  charts: {
+    default: [
+      {
+        name: 'Chronoamperometric',
+        description: '',
+        subplot: [
+          {
+            x1: {
+              type: 'time',
+              valScale: 'linear',
+              min: 'dataMin',
+              max: 'dataMax',
+            },
+            y1: {
+              type: 'value',
+              valScale: 'linear',
+              min: 'dataMin',
+              max: 'dataMax',
+            },
+            data: [
+              {
+                legend: 'chrono',
+                x1: {
+                  channel: 'time',
+                },
+                y1: {
+                  channel: 0,
+                },
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+}

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

@@ -1,6 +1,7 @@
 import PotentiostaticEIS from './PotentiostaticEIS'
 import CyclicVoltammetry from './CyclicVoltammetry'
 import DevMode from './DevMode'
+import Chronoamperometry from './Chronoamperometry'
 
 const EliteEIS = {
   ADC_VALUE_I: {
@@ -361,13 +362,18 @@ const EliteEIS = {
     },
     {
       id: 2,
+      description: 'Chronoamperometry',
+    },
+    {
+      id: 3,
       description: 'Dev Tools',
     },
   ],
   MODE: {
     0: PotentiostaticEIS,
     1: CyclicVoltammetry,
-    2: DevMode,
+    2: Chronoamperometry,
+    3: DevMode,
   },
 }
 

src/factories/chart/chartFactory.js

@@ -18,8 +18,9 @@ function newChart (chartID, numOfCharts) {
     legend: {
       type: 'scroll',
       data: [],
-      x: 'center',
-      y: '92%',
+      // x: 'center',
+      // y: '-10%',
+      bottom: '0%',
       textStyle: {
         color: '#34495e',
       },

src/factories/chart/dataZoomFactory.js

@@ -5,7 +5,8 @@ function newDataZoom () {
     // top: '0%',
     height: '10px',
     // realtime: false,
-    bottom: '8%',
+    bottom: '6%',
+    brushSelect: false,
     zoomLock: false,
     handleStyle: {
       shadowColor: 'rgba(0, 0, 0, 0)',

src/factories/chart/seriesFactory.js

@@ -55,14 +55,11 @@ function newSeries (type, legendName, xAxisIndex, yAxisIndex, xAxisSource, yAxis
     xAxisSource: xAxisSource,
     yAxisSource: yAxisSource,
     animation: false,
-    hoverAnimation: false,
     dataXMax: null,
     dataXMin: null,
     dataYMax: null,
     dataYMin: null,
     itemStyle: {
-      normal: {
-      },
     },
     lineStyle: {
       width: 1.5,

src/factories/chart/tooltipFactory.js

@@ -60,7 +60,7 @@ function newTooltip (realTime, dataMode) {
           unitTable = realTime[gridIndex][channelIndex]
           style = 'color: ' + param.color
 
-          tip += '<span style="' + style + '">' + param.seriesName + ':<ul  style = "list-style-type: disc; list-style-position: inside">'
+          tip += '<span style="' + style + '">' + param.seriesName + ':<ul style = "list-style-type: disc; list-style-position: inside">'
           if (unitTable.xName !== 'Time') {
             value = parseFloat(param.value[0] / unitTable.xScale[unitTable.xUnit]).toFixed(3) + unitTable.xUnit
             tip += '<li>' + unitTable.xName + ' = ' + value + '</li>'

src/factories/stateFactory.js

@@ -20,7 +20,7 @@ function newState () {
     },
     isLoading: true,
     licenseCheck: true,
-    developer_mode: false,
+    developerMode: false,
     controller: null,
   }
 }

src/store/modules/analysis/replay/actions/chartAct.js

@@ -113,16 +113,16 @@ function getLegendName (sourceList) {
       case 'Elite':
         switch (source.channel) {
           case 1:
-            legendName += '' + source.id + '-I'
+            legendName += '' + source.id + 'I'
             break
           case 2:
-            legendName += '' + source.id + '-V'
+            legendName += '' + source.id + 'V'
             break
           case 3:
-            legendName += '' + source.id + '-R'
+            legendName += '' + source.id + 'R'
             break
           case 4:
-            legendName += '' + source.id + '-Cycle'
+            legendName += '' + source.id + 'Cycle'
             break
           default:
             legendName += '' + source.id + 'CH' + source.channel
@@ -132,28 +132,28 @@ function getLegendName (sourceList) {
       case 'EliteEIS':
         switch (source.channel) {
           case 3:
-            legendName += '' + source.id + '-Frequency'
+            legendName += '' + source.id + 'Frequency'
             break
           case 4:
-            legendName += '' + source.id + '-Cycle'
+            legendName += '' + source.id + 'Cycle'
             break
           case 5:
-            legendName += '' + source.id + '-Z_imag'
+            legendName += '' + source.id + 'Z-imag'
             break
           case 6:
-            legendName += '' + source.id + '-Z_real'
+            legendName += '' + source.id + 'Z-real'
             break
           case 7:
-            legendName += '' + source.id + '-Impedance'
+            legendName += '' + source.id + 'Impedance'
             break
           case 8:
-            legendName += '' + source.id + '-Phase'
+            legendName += '' + source.id + 'Phase'
             break
           case 9:
-            legendName += '' + source.id + '-Current'
+            legendName += '' + source.id + 'Current'
             break
           case 10:
-            legendName += '' + source.id + '-Gain Level'
+            legendName += '' + source.id + 'Gain Level'
             break
           default:
             legendName += '' + source.id + 'CH' + source.channel
@@ -210,7 +210,7 @@ const actions = {
     if (payload.chartAllData[payload.chartID] == null) {
       payload.chartAllData[payload.chartID] = newChart(payload.chartID)
       if (payload.type !== 'overview') {
-        payload.chartAllData[payload.chartID].tooltip = newTooltip()
+        payload.chartAllData[payload.chartID].tooltip = newTooltip(state.info)
       }
       payload.chartAllData[payload.chartID].chartType = payload.type
       payload.chartAllData[payload.chartID].chartDevice = payload.device

src/store/modules/analysis/replay/mutations/chartMut.js

@@ -1,4 +1,5 @@
 import types from '@/store/modules/analysis/replay/types'
+import { tableRouter } from '@/components/analysis/replay/toolbox/EliteReplayTable'
 
 const typePath = types.chart
 
@@ -33,16 +34,16 @@ function getLegendName (sourceList) {
       case 'Elite':
         switch (source.channel) {
           case 1:
-            legendName += '' + source.id + '-I'
+            legendName += '' + source.id + 'I'
             break
           case 2:
-            legendName += '' + source.id + '-V'
+            legendName += '' + source.id + 'V'
             break
           case 3:
-            legendName += '' + source.id + '-R'
+            legendName += '' + source.id + 'R'
             break
           case 4:
-            legendName += '' + source.id + '-Cycle'
+            legendName += '' + source.id + 'Cycle'
             break
           default:
             legendName += '' + source.id + 'CH' + source.channel
@@ -52,28 +53,28 @@ function getLegendName (sourceList) {
       case 'EliteEIS':
         switch (source.channel) {
           case 3:
-            legendName += '' + source.id + '-Frequency'
+            legendName += '' + source.id + 'Frequency'
             break
           case 4:
-            legendName += '' + source.id + '-Cycle'
+            legendName += '' + source.id + 'Cycle'
             break
           case 5:
-            legendName += '' + source.id + '-Z_imag'
+            legendName += '' + source.id + 'Z-imag'
             break
           case 6:
-            legendName += '' + source.id + '-Z_real'
+            legendName += '' + source.id + 'Z-real'
             break
           case 7:
-            legendName += '' + source.id + '-Impedance'
+            legendName += '' + source.id + 'Impedance'
             break
           case 8:
-            legendName += '' + source.id + '-Phase'
+            legendName += '' + source.id + 'Phase'
             break
           case 9:
-            legendName += '' + source.id + '-Current'
+            legendName += '' + source.id + 'Current'
             break
           case 10:
-            legendName += '' + source.id + '-Gain Level'
+            legendName += '' + source.id + 'Gain-Level'
             break
           default:
             legendName += '' + source.id + 'CH' + source.channel
@@ -99,68 +100,90 @@ const chartMutations = {
    * @param {int} axisIndex
    * @param {int} channel // use for checking whether it is 3-axis
    */
+
+  // [typePath.updateAxisLabel]: (state, payload) => {
+  //   let unit // string
+  //   let unitScale // int
+  //   let axisLabel
+  //   if (payload.axis === 'x') {
+  //     unit = state.valueFormatX.unit
+  //     unitScale = state.valueFormatX.unitScale
+  //     axisLabel = state.chartData[payload.chartID].xAxis[payload.axisIndex].axisLabel
+  //   } else if (payload.axis === 'y') {
+  //     unit = state.valueFormatY.unit
+  //     unitScale = state.valueFormatY.unitScale
+  //     axisLabel = state.chartData[payload.chartID].yAxis[payload.axisIndex].axisLabel
+  //   }
+  //   if (payload.channel < 256) {
+  //     axisLabel.formatter = function (val) {
+  //       let label = ''
+  //       if (unit === 'auto') { // time
+  //         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 '
+  //         }
+  //       } else { // not time, e.g. I, V, R
+  //         const num = String(val / unitScale)
+  //         label = num + unit
+  //       }
+  //       return label
+  //     }
+  //   } else { // 256: x, 257: y, 258: z, 259: mag
+  //     axisLabel.formatter = function (val) {
+  //       let label = ''
+  //       if (unit === 'auto') { // time
+  //         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 '
+  //         }
+  //       } else {
+  //         label = val.toFixed(3)
+  //       }
+  //       return label
+  //     }
+  //   }
+  // tang: try here
   [typePath.updateAxisLabel]: (state, payload) => {
-    let unit // string
-    let unitScale // int
     let axisLabel
+    let unitScale
+    const unit = state.controlPanel[payload.axis].unit
+    const [xTable, yTable] = tableRouter.getTable(state.controlPanel.x.type, state.controlPanel.x.funct, state.controlPanel.y.type, state.controlPanel.y.funct)
     if (payload.axis === 'x') {
-      unit = state.valueFormatX.unit
-      unitScale = state.valueFormatX.unitScale
       axisLabel = state.chartData[payload.chartID].xAxis[payload.axisIndex].axisLabel
-    } else if (payload.axis === 'y') {
-      unit = state.valueFormatY.unit
-      unitScale = state.valueFormatY.unitScale
+      unitScale = xTable.option[unit]
+    } else {
       axisLabel = state.chartData[payload.chartID].yAxis[payload.axisIndex].axisLabel
+      unitScale = yTable.option[unit]
     }
-    if (payload.channel < 256) {
+    if (unit === 'auto') {
+      axisLabel.formatter = tableRouter.autoTimeFormatter
+    } else {
       axisLabel.formatter = function (val) {
-        let label = ''
-        if (unit === 'auto') { // time
-          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 '
-          }
-        } else { // not time, e.g. I, V, R
-          const num = String(val / unitScale)
-          label = num + unit
-        }
-        return label
-      }
-    } else { // 256: x, 257: y, 258: z, 259: mag
-      axisLabel.formatter = function (val) {
-        let label = ''
-        if (unit === 'auto') { // time
-          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 '
-          }
-        } else {
-          label = val.toFixed(3)
-        }
+        const label = (val / unitScale).toFixed(3) + unit
         return label
       }
     }

src/store/modules/analysis/replay/state.js

@@ -35,6 +35,18 @@ function newState () {
     showWhichCycles: '1',
     useSdCardData: false,
     isLockDataZoom: false,
+    controlPanel: {
+      x: {
+        type: null,
+        unit: null,
+        funct: null,
+      },
+      y: {
+        type: null,
+        unit: null,
+        funct: null,
+      },
+    },
   }
 }
 

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

@@ -241,7 +241,7 @@ const chartActs = {
       state.chartData[chartID].xAxis[_xAxisIndex].axisLabel.formatter = function (val) {
         return getTimeFormatter(val)
       }
-      state.chartData[chartID].xAxis[_xAxisIndex].interval = 500 * 1000
+      // state.chartData[chartID].xAxis[_xAxisIndex].interval = 500 * 1000
     } else if (sourceList[0].name === 'Elite') {
       // state.chartData[chartID].series[state.chartData[chartID].series.length - 1].sampling = false
       switch (sourceList[0].channel) {
@@ -1061,10 +1061,24 @@ const chartActs = {
    */
   [typePath.resetSeriesData]: ({ state, getters, commit, dispatch }, payload) => {
     const { chartID, mappingID } = payload
+
+    // check chart need to reset or not
     if (String(mappingID) === String(state.chartData[chartID].mappingID)) {
+      // reset series data
       for (const i in state.chartData[chartID].series) {
         state.chartData[chartID].series[i].data.length = 0
       }
+      // reset databuffer
+      const databuffer = dataStreamBuffer.getByChartID(chartID)
+      if (databuffer) {
+        for (const device in databuffer) {
+          // console.log('device', device)
+          for (const channel in databuffer[device]) {
+            // console.log('channel', channel, databuffer[device][channel])
+            databuffer[device][channel].length = 0
+          }
+        }
+      }
     }
   },
   /**
@@ -1157,7 +1171,7 @@ function makeXAxis (gridIndex, type, channel) {
       showMaxLabel: false,
       color: '#34495e',
       // rotate: 45,
-      margin: 12,
+      // margin: 12,
     },
     splitLine: { show: true, lineStyle: { color: '#aaa' } },
     // minorSplitLine: {
@@ -1212,8 +1226,8 @@ function makeYAxis (gridIndex, type, channel) {
 
 // generate grid
 function makeGrid (index, length) {
-  const _height = (85 / length) + '%'
-  const _top = index * (85 / length) + 1 + '%'
+  const _height = (80 / length) + '%'
+  const _top = index * (80 / length) + 5 + '%'
   return {
     index: index,
     top: _top,