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

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.37: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/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,6 +3,12 @@
     <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>
@@ -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

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

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

@@ -208,8 +208,14 @@ export default {
       // 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) {
       if (!isNaN(parseInt(val))) {
@@ -376,6 +382,9 @@ 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
+      // console.log(this.data.dataZoom)
       this.$refs.CanvasChartRealTimeDisplay.matchData(this.data)
     },
     switchModeButton: function (dataMode, gridIndex, channelIndex) {

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

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

@@ -93,7 +93,7 @@ const chartTable = {
     // 1
     {
       default: {
-        name: 'Resistor',
+        name: 'Resistance',
         unit: {
           mΩ: 1,
           Ω: 1e3,

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

@@ -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
+          }
+        }
+      }
     }
   },
   /**