[fix] configuration refresh bug

[modify] separate chartKey and panelKey
[add] can save chart source setting
2022-02-12 17:17:34 +08:00 · 2022-01-14 17:26:13 +08:00 · 2022-01-14 15:54:06 +08:00 · 2022-01-12 18:06:11 +08:00 · 2022-01-12 18:01:06 +08:00 · 2022-01-12 15:52:23 +08:00
31 changed files with 1801 additions and 1772 deletions
@@ -8595,6 +8595,11 @@
      "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==",
      "dev": true
    },
+    "immediate": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha1-nbHb0Pr43m++D13V5Wu2BigN5ps="
+    },
    "import-cwd": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz",
@@ -10375,6 +10380,14 @@
        "type-check": "~0.3.2"
      }
    },
+    "lie": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/lie/-/lie-3.1.1.tgz",
+      "integrity": "sha1-mkNrLMd0bKWd56QfpGmz77dr2H4=",
+      "requires": {
+        "immediate": "~3.0.5"
+      }
+    },
    "lines-and-columns": {
      "version": "1.1.6",
      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.1.6.tgz",
@@ -10939,6 +10952,14 @@
        }
      }
    },
+    "localforage": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/localforage/-/localforage-1.10.0.tgz",
+      "integrity": "sha512-14/H1aX7hzBBmmh7sGPd+AOMkkIrHM3Z1PAyGgZigA1H1p5O5ANnMyWzvpAETtG68/dC4pC0ncy3+PPGzXZHPg==",
+      "requires": {
+        "lie": "3.1.1"
+      }
+    },
    "locate-path": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
@@ -35,6 +35,7 @@
    "google-maps": "^3.3.0",
    "ionicons": "^4.6.3",
    "leaflet-map": "^0.2.1",
+    "localforage": "^1.10.0",
    "lodash": "^4.17.21",
    "medium-editor": "^5.23.3",
    "normalize.css": "^8.0.1",
@@ -36,9 +36,13 @@ import 'nprogress/nprogress.css'
 import Toast from 'vue-toastification'
 import 'vue-toastification/dist/index.css'

+import localforage from 'localforage'
+
 import '../metrics'
 import '../registerServiceWorker'

+localforage.config({ name: 'bioprovue' })
+
 if (process.env.VUE_APP_BUILD_VERSION) {
  // eslint-disable-next-line
  const message = `%c${'Build_information:'}\n %c${'Version'}: %c${VERSION},\n %c${'Timestamp'}: %c${TIMESTAMP},\n %c${'Commit'}: %c${COMMIT}`
@@ -9,7 +9,6 @@
 <script>
 import { mapMutations } from 'vuex'
 import types from '@/store/modules/analysis/replay/types'
-// import { chartData } from '../../../../data/task/ChartsManagement'

 export default {
  name: 'elite-replay-chart',
@@ -7,7 +7,6 @@
 </template>

 <script>
-// import { chartData } from '../../../../data/task/ChartsManagement'

 export default {
  name: 'elite-replay-overview-chart',
@@ -9,7 +9,6 @@
 <script>
 import { mapMutations } from 'vuex'
 import types from '@/store/modules/analysis/replay/types'
-// import { chartData } from '../../../../data/task/ChartsManagement'

 export default {
  name: 'neulive-replay-chart',
@@ -7,7 +7,6 @@
 </template>

 <script>
-// import { chartData } from '../../../../data/task/ChartsManagement'

 export default {
  name: 'neulive-replay-overview-chart',
@@ -9,7 +9,6 @@
 <script>
 import { mapMutations } from 'vuex'
 import types from '@/store/modules/analysis/spike/types'
-// import { chartData } from '../../../../data/task/ChartsManagement'

 export default {
  name: 'spike-replay-chart',
@@ -7,7 +7,6 @@
 </template>

 <script>
-// import { chartData } from '../../../../data/task/ChartsManagement'

 export default {
  name: 'spike-overview-chart',
@@ -57,15 +57,15 @@
                <va-button class="no-dark-style-va-button" color="danger" target="_blank" @click="stopAllClick()" small>
                  STOP ALL
                </va-button>
-                <va-button class="no-dark-style-va-button" color="primary" target="_blank" @click.stop="addChart()" small>
+                <va-button class="no-dark-style-va-button" color="primary" target="_blank" @click.stop="addChart(false)" small>
                  ADD CHART
                </va-button>
              </va-card>
            </div>

-            <div :key="chartKey">
+            <div :key="taskContentChartPanelKey">
              <div
-                v-for="chart in chartDataAll"
+                v-for="chart in chartData"
                :key="chart.chartID"
              >
                <canvas-chart
@@ -96,12 +96,13 @@

 <script>
 import { dataStreamBuffer } from '../../../data/task/DataStreamBuffer'
-import { chartData } from '../../../data/task/ChartsManagement'
 import { taskInfo } from '../../../data/task/TaskInfo'
 import CanvasChart from './chart/CanvasChart'
 import TaskDevices from './controller/TaskDevices'
 // import api from '@/data/api'
 import { mapFields } from 'vuex-map-fields'
+import { mapActions } from 'vuex'
+import taskTypes from '@/store/modules/task/content/types'
 // import TaskFormula from './formula/TaskFormula'

 // TODO change chart data tag format
@@ -111,11 +112,13 @@ export default {
  components: {
    CanvasChart,
    TaskDevices,
-    // TaskFormula,
  },
  computed: {
    ...mapFields('taskContent', [
      'deviceList',
+      'chartData',
+      'taskContentChartPanelKey',
+      'taskContentChartNumber',
    ]),
  },
  data () {
@@ -125,11 +128,7 @@ export default {
      showRemoveChartModal: false,
      // refresh timer
      dataRefreshTimer: null,
-      // charts data
-      chartDataAll: chartData.getAllChartsData(),
-      // chart refresh key
-      chartKey: 0,
-      chartNumber: taskInfo.getTaskInfo().chartList.length,
+
      selectChartID: null,
      showDeviceSetting: true,
      chartAreaClass: ['flex', 'xs12', 'sm12', 'md12', 'xl8', 'pa-0'],
@@ -157,60 +156,28 @@ export default {
    },
    async '+/hardware_device/+' (data, topic) {
      await taskInfo.deviceInfo(String.fromCharCode.apply(null, data), this.deviceList)
-      // console.log(this.deviceList)
-      // for (const d1 in taskInfo.getTaskInfo().deviceList) {
-      //   if (taskInfo.getTaskInfo().deviceList[d1].info.device_address.length > 0) {
-      //     const addr1 = taskInfo.getTaskInfo().deviceList[d1].info.device_address.join()
-      //     let parameter, content
-      //     for (const d2 in this.deviceList) {
-      //       const addr2 = this.deviceList[d2].info.device_address.join()
-      //       if (addr1 === addr2) {
-      //     //  console.log(this.deviceList[d2].parameterSet)
-      //         for (const p in this.deviceList[d2].parameterSet) {
-      //           if (p !== 'STIMULATING') {
-      //             if (parameter == null) {
-      //               parameter = p
-      //             } else {
-      //               parameter = parameter + '|' + p
-      //             }
-      //             let c
-      //             if (Array.isArray(this.deviceList[d2].parameterSet[p])) {
-      //               c = '0:' + this.deviceList[d2].parameterSet[p].length + '=' + this.deviceList[d2].parameterSet[p]
-      //             } else {
-      //               c = this.deviceList[d2].parameterSet[p]
-      //             }
-
-      //             if (content == null) {
-      //               content = c
-      //             } else {
-      //               content = content + '|' + c
-      //             }
-      //           }
-      //         }
-      //     //  console.log('****', parameter, content)
-      //         // this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
-      //         //   header: 'device_parameter/0',
-      //         //   device: parseInt(d1),
-      //         //   parameter: parameter,
-      //         //   content: content,
-      //         // }))
-      //       }
-      //     }
-      // }
-      // }
      if (this.$refs.devices_ref != null) {
        await this.$refs.devices_ref.loadingDone()
+        await this.taskContentChartInitCustomizedFromCache()
      }
    },
    // listen datastream [ topic: controllerID/data_server/device_data_stream/deviceID/channel ]
    async '+/data_server/device_data_stream/+/+' (data, topic) {
      const topicSplit = topic.split('/')
-      if (this.getParmDone & !taskInfo.getDeviceInfoByRawID(parseInt(topicSplit[3])).info.isSync) {
-        if (chartData.defaultChartGenerator(this.deviceList, taskInfo.getDeviceIDByRaw(parseInt(topicSplit[3])), null, 'device')) {
-          taskInfo.deviceStart(parseInt(topicSplit[3]), this.deviceList)
+      const deviceID = parseInt(topicSplit[3])
+      const channel = parseInt(topicSplit[4])
+      if (this.getParmDone & !taskInfo.getDeviceInfoByRawID(deviceID).info.isSync) {
+        const result = await this.taskContentChartDefaultChartGenerator({
+          _deviceList: this.deviceList,
+          _itemID: taskInfo.getDeviceIDByRaw(deviceID),
+          _chartID: null,
+          _type: 'device',
+        })
+        if (result) {
+          taskInfo.deviceStart(deviceID, this.deviceList)
        }
      }
-      dataStreamBuffer.into(String.fromCharCode.apply(null, data), parseInt(topicSplit[3]), (parseInt(topicSplit[4]) + 1))
+      dataStreamBuffer.into(String.fromCharCode.apply(null, data), deviceID, (channel + 1))
    },
    '+/device_save_path/+' (data, topic) {
      taskInfo.deviceSavePath(String.fromCharCode.apply(null, data))
@@ -262,9 +229,15 @@ export default {
          this.showShutdownModal = true
          break
        case 'start':
-          if (!taskInfo.getDeviceInfoByRawID(parseInt(parseInt(mes[1]))).info.isSync) {
+          if (!taskInfo.getDeviceInfoByRawID(parseInt(mes[1])).info.isSync) {
            taskInfo.deviceStart(parseInt(mes[1]), this.deviceList)
-            if (chartData.defaultChartGenerator(this.deviceList, taskInfo.getDeviceIDByRaw(parseInt(parseInt(mes[1]))), null, 'device')) {
+            const result = await this.taskContentChartDefaultChartGenerator({
+              _deviceList: this.deviceList,
+              _itemID: taskInfo.getDeviceIDByRaw(parseInt(mes[1])),
+              _chartID: null,
+              _type: 'device',
+            })
+            if (result) {
              taskInfo.deviceStart(parseInt(parseInt(mes[1])), this.deviceList)
            }
          }
@@ -339,8 +312,8 @@ export default {
      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
        header: 'hardware_device/0',
      }))
-      await taskInfo.updateChartInfo()
-      this.chartNumber = taskInfo.getTaskInfo().chartNumber
+
+      this.taskContentChartNumber = Object.keys(this.chartData).length
    },
    pageToast: function (mes) {
      this.showToast(
@@ -354,8 +327,10 @@ export default {
    },
    refreshData: function () {
      // TODO don't need to refresh chart with stop status
-      for (const chart in this.chartDataAll) {
-        chartData.refresh(parseInt(chart))
+      for (const chart in this.chartData) {
+        this.taskContentChartRefreshData({
+          chartID: parseInt(chart),
+        })
      }
    },
    refreshDevicesWindow: function () {
@@ -367,54 +342,41 @@ export default {
      //   device_config: taskInfo.getTaskInfo().deviceList,
      // })
    },
-    addChart: async function () {
-      const defaultID = {}
-      const update = async () => {
-        for (const chart in chartData.getAllChartsData()) {
-          defaultID[chart] = chartData.getAllChartsData()[chart].mappingID
-        }
-        chartData.init(this.chartNumber, 4000, 1, 1)
-        this.chartNumber++
-        this.chartKey++
-      }
-      await update()
-
-      for (const chart in chartData.getAllChartsData()) {
-        chartData.getAllChartsData()[chart].mappingID = defaultID[chart]
-      }
-
+    addChart: async function (isDefault) {
+      this.taskContentChartAdd({
+        chartID: this.taskContentChartNumber,
+        maxDots: 4000,
+        gridLength: 1,
+      })
      if (this.$refs.chart_ref != null) {
        this.$refs.chart_ref.forEach(ref => {
          ref.refreshMappingSelect()
        })
      }
+      this.taskContentChartRefreshPanel()
+      this.taskContentChartNumber++
+
+      if (!isDefault) {
+        await this.taskContentChartSaveToCache()
+      }
      this.pageToast('The chart has been added.')

-      return this.chartNumber - 1
-      // chartData.updateGridList(0, 4)
+      return this.taskContentChartNumber - 1
    },
    refreshChartSetting: async function () {
-      const defaultID = {}
-      const update = async () => {
-        for (const chart in chartData.getAllChartsData()) {
-          defaultID[chart] = chartData.getAllChartsData()[chart].mappingID
-        }
-        this.chartKey++
-      }
-      await update()
-
-      for (const chart in chartData.getAllChartsData()) {
-        chartData.getAllChartsData()[chart].mappingID = defaultID[chart]
-      }
-
      if (this.$refs.chart_ref != null) {
        this.$refs.chart_ref.forEach(ref => {
          ref.refreshMappingSelect()
        })
      }
+      this.taskContentChartRefreshPanel()
    },
    initChart: function (chartID) {
-      chartData.reset(chartID)
+      this.taskContentChartReset({
+        chartID: chartID,
+        mappingID: null,
+        cardName: null,
+      })
      this.pageToast('The chart has been Initialized.')
    },
    removeChartCheck: function (chartID) {
@@ -426,21 +388,20 @@ export default {
        chartID = this.selectChartID
      }
      dataStreamBuffer.removeByChart(chartID)
-      if (chartData.getAllChartsData()[chartID] != null) {
+      if (this.chartData[chartID] != null) {
        const defaultID = {}
        const update = async () => {
-          for (const chart in chartData.getAllChartsData()) {
+          for (const chart in this.chartData) {
            if (chart !== chartID) {
-              defaultID[chart] = chartData.getAllChartsData()[chart].mappingID
+              defaultID[chart] = this.chartData[chart].mappingID
            }
          }
-          delete chartData.getAllChartsData()[chartID]
-          this.chartKey++
+          delete this.chartData[chartID]
        }
        await update()

-        for (const chart in chartData.getAllChartsData()) {
-          chartData.getAllChartsData()[chart].mappingID = defaultID[chart]
+        for (const chart in this.chartData) {
+          this.chartData[chart].mappingID = defaultID[chart]
        }

        if (this.$refs.chart_ref != null) {
@@ -449,6 +410,8 @@ export default {
          })
        }
      }
+
+      await this.taskContentChartSaveToCache()
      this.pageToast('The chart has been removed.')
    },
    showDeviceSettingClick: function () {
@@ -463,14 +426,14 @@ export default {
    },
    addMappingChart: async function (deviceID) {
      // if have chart with device ID
-      for (const chart in chartData.getAllChartsData()) {
-        if (chartData.getAllChartsData()[chart].mappingID === deviceID) {
+      for (const chart in this.chartData) {
+        if (this.chartData[chart].mappingID === deviceID) {
          return false
        }
      }
-      const chart = await this.addChart()
+      const chart = await this.addChart(true)
      await this.$nextTick(async () => {
-        chartData.getAllChartsData()[chart].mappingID = deviceID
+        this.chartData[chart].mappingID = deviceID
        if (this.$refs.chart_ref != null) {
          this.$refs.chart_ref.forEach(ref => {
            ref.refreshMappingSelect()
@@ -482,20 +445,12 @@ export default {
    addDevice: async function (deviceID) {
      this.mqttSub(taskInfo.getTaskInfo().controllerID + '/data_server/device_data_stream/' + taskInfo.getRawDeviceID(deviceID) + '/+')
      this.addMappingChart(deviceID)
-      // if (taskInfo.getDeviceInfo(deviceID).info.isSync) {
-      //   chartData.defaultChartGenerator(deviceID, chart, 'device')
-      // }
-      // console.log(chartData.getAllChartsData())
-      // console.log(taskInfo.getTaskInfo())
-      // await api.task.update({
-      //   device_config: taskInfo.getTaskInfo().deviceList,
-      // })
      this.pageToast('The device [' + deviceID + '] has been registered.')
    },
    removeDevice: function (deviceID) {
      this.mqttUnSub(taskInfo.getTaskInfo().controllerID + '/data_server/device_data_stream/' + taskInfo.getRawDeviceID(deviceID) + '/+')
-      for (const chart in chartData.getAllChartsData()) {
-        if (chartData.getAllChartsData()[chart].mappingID === deviceID) {
+      for (const chart in this.chartData) {
+        if (this.chartData[chart].mappingID === deviceID) {
          dataStreamBuffer.removeByChart(chart)
          this.removeChart(chart)
        }
@@ -503,9 +458,9 @@ export default {
      this.pageToast('The device [' + deviceID + '] has been removed.')
    },
    addFormula: async function (formulaID) {
-      const chart = await this.addChart()
+      const chart = await this.addChart(true)
      await this.$nextTick(async () => {
-        chartData.getAllChartsData()[chart].mappingID = formulaID
+        this.chartData[chart].mappingID = formulaID
        if (this.$refs.chart_ref != null) {
          this.$refs.chart_ref.forEach(ref => {
            ref.refreshMappingSelect()
@@ -515,8 +470,8 @@ export default {
      this.pageToast('The formula [' + formulaID + '] has been registered.')
    },
    removeFormula: function (formulaID) {
-      for (const chart in chartData.getAllChartsData()) {
-        if (chartData.getAllChartsData()[chart].mappingID === formulaID) {
+      for (const chart in this.chartData) {
+        if (this.chartData[chart].mappingID === formulaID) {
          dataStreamBuffer.removeByChart(chart)
          this.removeChart(chart)
        }
@@ -535,7 +490,12 @@ export default {
      this.pageToast('The all devices have been started')
    },
    startDevice: async function (device) {
-      chartData.defaultChartGenerator(this.deviceList, device.id, null, 'device')
+      await this.taskContentChartDefaultChartGenerator({
+        _deviceList: this.deviceList,
+        _itemID: device.id,
+        _chartID: null,
+        _type: 'device',
+      })
      if (!taskInfo.getDeviceInfo(device.id).info.isSync) {
        if (taskInfo.getDeviceInfo(device.id).info.library_name.startsWith('Neulive')) {
          this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
@@ -595,6 +555,17 @@ export default {
        path: '/',
      })
    },
+
+    ...mapActions('taskContent', [
+      taskTypes.chart.initCustomizedFromCache,
+      taskTypes.chart.saveToCache,
+      taskTypes.chart.add,
+      taskTypes.chart.defaultChartGenerator,
+      taskTypes.chart.reset,
+      taskTypes.chart.refreshData,
+      taskTypes.chart.refreshChart,
+      taskTypes.chart.refreshPanel,
+    ]),
  },
  watch: {
  },
@@ -605,7 +576,6 @@ export default {
    this.pageMqttSub(taskInfo.getTaskInfo().controllerID)
    //  console.log(taskInfo.getTaskInfo().controllerID)
    await this.pageInit()
-    // this.chartNumber = taskInfo.getTaskInfo().chartNumber

    this.dataRefreshTimer = setInterval(this.refreshData, 100)

@@ -617,7 +587,7 @@ export default {
  },
  destroyed () {
    taskInfo.destroyed(this.deviceList)
-    for (const chart in chartData.getAllChartsData()) {
+    for (const chart in this.chartData) {
      this.removeChart(chart)
    }
    clearInterval(this.dataRefreshTimer)
@@ -60,7 +60,7 @@

            <div :key="chartKey">
              <div
-                v-for="chart in chartDataAll"
+                v-for="chart in chartData"
                :key="chart.chartID"
              >
                <canvas-chart
@@ -93,33 +93,29 @@

 <script>
 import { dataStreamBuffer } from '../../../data/task/DataStreamBuffer'
-import { chartData } from '../../../data/task/ChartsManagement'
 import { taskInfo } from '../../../data/task/TaskInfo'
 import CanvasChart from './chart/CanvasChart'
 import TaskContentModal from './TaskContentModal.vue'
 import { mapFields } from 'vuex-map-fields'
 import TaskDevicesGM from './controller/neulive-gimer/TaskDevicesGM.vue'
-// import api from '../../../data/api'
-// import TaskFormula from './formula/TaskFormula'
+import { mapActions } from 'vuex'
+import taskTypes from '@/store/modules/task/content/types'

 // TODO change chart data tag format

 export default {
-  name: 'TaskContent',
+  name: 'TaskContentGM',
  components: {
    CanvasChart,
    TaskDevicesGM,
    TaskContentModal,
-    // TaskFormula,
  },
-  // async created () {
-  //   await taskInfo.updateTaskInfo(this.$route.params.taskID)
-  // },
  computed: {
    ...mapFields('taskContent', [
      'deviceList',
      'showTaskModal',
      'taskModalText',
+      'chartData',
    ]),
  },
  data () {
@@ -129,11 +125,9 @@ export default {
      showRemoveChartModal: false,
      // refresh timer
      dataRefreshTimer: null,
-      // charts data
-      chartDataAll: chartData.getAllChartsData(),
      // chart refresh key
      chartKey: 0,
-      chartNumber: taskInfo.getTaskInfo().chartList.length,
+      chartNumber: 0,
      selectChartID: null,
      showDeviceSetting: true,
      chartAreaClass: ['flex', 'xs12', 'sm12', 'md12', 'xl8', 'pa-0'],
@@ -169,7 +163,13 @@ export default {
    async '+/data_server/device_data_stream/+/+' (data, topic) {
      const topicSplit = topic.split('/')
      if (this.getParmDone & !taskInfo.getDeviceInfoByRawID(parseInt(topicSplit[3])).info.isSync) {
-        if (chartData.defaultChartGenerator(this.deviceList, taskInfo.getDeviceIDByRaw(parseInt(topicSplit[3])), null, 'device')) {
+        const result = await this.taskContentChartDefaultChartGenerator({
+          _deviceList: this.deviceList,
+          _itemID: taskInfo.getDeviceIDByRaw(parseInt(topicSplit[3])),
+          _chartID: null,
+          _type: 'device',
+        })
+        if (result) {
          taskInfo.deviceStart(parseInt(topicSplit[3]), this.deviceList)
        }
      }
@@ -215,10 +215,16 @@ export default {
          this.showShutdownModal = true
          break
        case 'start':
-          if (!taskInfo.getDeviceInfoByRawID(parseInt(parseInt(mes[1]))).info.isSync) {
+          if (!taskInfo.getDeviceInfoByRawID(parseInt(mes[1])).info.isSync) {
            taskInfo.deviceStart(parseInt(mes[1]), this.deviceList)
-            if (chartData.defaultChartGenerator(this.deviceList, taskInfo.getDeviceIDByRaw(parseInt(parseInt(mes[1]))), null, 'device')) {
-              taskInfo.deviceStart(parseInt(parseInt(mes[1])), this.deviceList)
+            const result = await this.taskContentChartDefaultChartGenerator({
+              _deviceList: this.deviceList,
+              _itemID: taskInfo.getDeviceIDByRaw(parseInt(mes[1])),
+              _chartID: null,
+              _type: 'device',
+            })
+            if (result) {
+              taskInfo.deviceStart(parseInt(mes[1]), this.deviceList)
            }
          }
          break
@@ -289,8 +295,8 @@ export default {
      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
        header: 'hardware_device/0',
      }))
-      await taskInfo.updateChartInfo()
-      this.chartNumber = taskInfo.getTaskInfo().chartNumber
+
+      this.chartNumber = Object.keys(this.chartData).length
    },
    pageToast: function (mes) {
      this.showToast(
@@ -304,8 +310,10 @@ export default {
    },
    refreshData: function () {
      // TODO don't need to refresh chart with stop status
-      for (const chart in this.chartDataAll) {
-        chartData.refresh(parseInt(chart))
+      for (const chart in this.chartData) {
+        this.taskContentChartRefreshData({
+          chartID: parseInt(chart),
+        })
      }
    },
    refreshDevicesWindow: function () {
@@ -320,17 +328,21 @@ export default {
    addChart: async function () {
      const defaultID = {}
      const update = async () => {
-        for (const chart in chartData.getAllChartsData()) {
-          defaultID[chart] = chartData.getAllChartsData()[chart].mappingID
+        for (const chart in this.chartData) {
+          defaultID[chart] = this.chartData[chart].mappingID
        }
-        chartData.init(this.chartNumber, 4000, 1, 1)
+        this.taskContentChartAdd({
+          chartID: this.chartNumber,
+          maxDots: 4000,
+          gridLength: 1,
+        })
        this.chartNumber++
        this.chartKey++
      }
      await update()

-      for (const chart in chartData.getAllChartsData()) {
-        chartData.getAllChartsData()[chart].mappingID = defaultID[chart]
+      for (const chart in this.chartData) {
+        this.chartData[chart].mappingID = defaultID[chart]
      }

      if (this.$refs.chart_ref != null) {
@@ -341,20 +353,19 @@ export default {
      // this.pageToast('The chart has been added.')

      return this.chartNumber - 1
-      // chartData.updateGridList(0, 4)
    },
    refreshChartSetting: async function () {
      const defaultID = {}
      const update = async () => {
-        for (const chart in chartData.getAllChartsData()) {
-          defaultID[chart] = chartData.getAllChartsData()[chart].mappingID
+        for (const chart in this.chartData) {
+          defaultID[chart] = this.chartData[chart].mappingID
        }
        this.chartKey++
      }
      await update()

-      for (const chart in chartData.getAllChartsData()) {
-        chartData.getAllChartsData()[chart].mappingID = defaultID[chart]
+      for (const chart in this.chartData) {
+        this.chartData[chart].mappingID = defaultID[chart]
      }

      if (this.$refs.chart_ref != null) {
@@ -364,7 +375,11 @@ export default {
      }
    },
    initChart: function (chartID) {
-      chartData.reset(chartID)
+      this.taskContentChartReset({
+        chartID: chartID,
+        mappingID: null,
+        cardName: null,
+      })
      // this.pageToast('The chart has been Initialized.')
    },
    removeChartCheck: function (chartID) {
@@ -376,21 +391,21 @@ export default {
        chartID = this.selectChartID
      }
      dataStreamBuffer.removeByChart(chartID)
-      if (chartData.getAllChartsData()[chartID] != null) {
+      if (this.chartData[chartID] != null) {
        const defaultID = {}
        const update = async () => {
-          for (const chart in chartData.getAllChartsData()) {
+          for (const chart in this.chartData) {
            if (chart !== chartID) {
-              defaultID[chart] = chartData.getAllChartsData()[chart].mappingID
+              defaultID[chart] = this.chartData[chart].mappingID
            }
          }
-          delete chartData.getAllChartsData()[chartID]
+          delete this.chartData[chartID]
          this.chartKey++
        }
        await update()

-        for (const chart in chartData.getAllChartsData()) {
-          chartData.getAllChartsData()[chart].mappingID = defaultID[chart]
+        for (const chart in this.chartData) {
+          this.chartData[chart].mappingID = defaultID[chart]
        }

        if (this.$refs.chart_ref != null) {
@@ -413,14 +428,14 @@ export default {
    },
    addMappingChart: async function (deviceID) {
      // if have chart with device ID
-      for (const chart in chartData.getAllChartsData()) {
-        if (chartData.getAllChartsData()[chart].mappingID === deviceID) {
+      for (const chart in this.chartData) {
+        if (this.chartData[chart].mappingID === deviceID) {
          return false
        }
      }
      const chart = await this.addChart()
      await this.$nextTick(async () => {
-        chartData.getAllChartsData()[chart].mappingID = deviceID
+        this.chartData[chart].mappingID = deviceID
        if (this.$refs.chart_ref != null) {
          this.$refs.chart_ref.forEach(ref => {
            ref.refreshMappingSelect()
@@ -432,20 +447,12 @@ export default {
    addDevice: async function (deviceID) {
      this.mqttSub(taskInfo.getTaskInfo().controllerID + '/data_server/device_data_stream/' + taskInfo.getRawDeviceID(deviceID) + '/+')
      this.addMappingChart(deviceID)
-      // if (taskInfo.getDeviceInfo(deviceID).info.isSync) {
-      //   chartData.defaultChartGenerator(deviceID, chart, 'device')
-      // }
-      // console.log(chartData.getAllChartsData())
-      // console.log(taskInfo.getTaskInfo())
-      // await api.task.update({
-      //   device_config: taskInfo.getTaskInfo().deviceList,
-      // })
      this.pageToast('The device [' + deviceID + '] has been registered.')
    },
    removeDevice: function (deviceID) {
      this.mqttUnSub(taskInfo.getTaskInfo().controllerID + '/data_server/device_data_stream/' + taskInfo.getRawDeviceID(deviceID) + '/+')
-      for (const chart in chartData.getAllChartsData()) {
-        if (chartData.getAllChartsData()[chart].mappingID === deviceID) {
+      for (const chart in this.chartData) {
+        if (this.chartData[chart].mappingID === deviceID) {
          dataStreamBuffer.removeByChart(chart)
          this.removeChart(chart)
        }
@@ -455,7 +462,7 @@ export default {
    addFormula: async function (formulaID) {
      const chart = await this.addChart()
      await this.$nextTick(async () => {
-        chartData.getAllChartsData()[chart].mappingID = formulaID
+        this.chartData[chart].mappingID = formulaID
        if (this.$refs.chart_ref != null) {
          this.$refs.chart_ref.forEach(ref => {
            ref.refreshMappingSelect()
@@ -465,8 +472,8 @@ export default {
      this.pageToast('The formula [' + formulaID + '] has been registered.')
    },
    removeFormula: function (formulaID) {
-      for (const chart in chartData.getAllChartsData()) {
-        if (chartData.getAllChartsData()[chart].mappingID === formulaID) {
+      for (const chart in this.chartData) {
+        if (this.chartData[chart].mappingID === formulaID) {
          dataStreamBuffer.removeByChart(chart)
          this.removeChart(chart)
        }
@@ -485,7 +492,12 @@ export default {
      this.pageToast('The all devices have been started')
    },
    startDevice: async function (device) {
-      chartData.defaultChartGenerator(this.deviceList, device.id, null, 'device')
+      await this.taskContentChartDefaultChartGenerator({
+        _deviceList: this.deviceList,
+        _itemID: device.id,
+        _chartID: null,
+        _type: 'device',
+      })
      if (!taskInfo.getDeviceInfo(device.id).info.isSync) {
        if (taskInfo.getDeviceInfo(device.id).info.library_name.startsWith('Neulive')) {
          this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
@@ -542,6 +554,13 @@ export default {
        path: '/',
      })
    },
+
+    ...mapActions('taskContent', [
+      taskTypes.chart.add,
+      taskTypes.chart.refreshData,
+      taskTypes.chart.defaultChartGenerator,
+      taskTypes.chart.reset,
+    ]),
  },
  watch: {
  },
@@ -564,7 +583,7 @@ export default {
  },
  destroyed () {
    taskInfo.destroyed(this.deviceList)
-    for (const chart in chartData.getAllChartsData()) {
+    for (const chart in this.chartData) {
      this.removeChart(chart)
    }
    clearInterval(this.dataRefreshTimer)
@@ -25,12 +25,12 @@
        </va-tab>
      </va-tabs>
      <div v-if="tabValue == 0" >
-        <div v-if="data.legend.data.length != 0">
-          <chart :ref="'chart_ref'" :style="'width: '+ cardwidth + '; height: ' + cardheight + ';'" :options="data" :auto-resize="true"></chart>
+        <div v-if="chartData[chartID].legend.data.length != 0">
+          <chart :key="taskContentChartKey" :ref="'chart_ref'" :style="'width: '+ cardwidth + '; height: ' + cardheight + ';'" :options="data" :auto-resize="true"></chart>
        </div>
      </div>
      <div v-else-if="tabValue == 1" :style="'width: '+ cardwidth + '; height: ' + cardheight + ';'" >
-        <canvas-chart-source :chartID="chartID" :gridInfo="data.grid"></canvas-chart-source>
+        <canvas-chart-source :chartID="chartID" />
      </div>
      <div v-else :style="'width: '+ cardwidth + '; height: ' + cardheight + ';'" >
        <!-- <canvas-chart-setting :chartID="chartID"></canvas-chart-setting> -->
@@ -45,7 +45,7 @@
      </div>
      <div class="row flex align--left ma-0 pa-0">
        <va-input
-          v-if="data.chartXMode === 'time'"
+          v-if="chartData[chartID].chartXMode === 'time'"
          class="mx-1"
          @keyup.enter="timeIntervalChange(timeIntervalInput)"
          @blur="timeIntervalChange(timeIntervalInput)"
@@ -57,7 +57,7 @@
          </p>
        </va-input>
        <va-input
-          v-if="data.chartXMode === 'value'"
+          v-if="chartData[chartID].chartXMode === 'value'"
          class="mx-1"
          @keyup.enter="xIntervalChange(xIntervalInput)"
          @blur="xIntervalChange(xIntervalInput)"
@@ -65,7 +65,7 @@
          :label="'x-grid'"
        >
          <p slot="append" style="margin-right: 0;" small>
-            {{data.chartXUnit}}
+            {{chartData[chartID].chartXUnit}}
          </p>
        </va-input>
        <va-input
@@ -76,11 +76,11 @@
          :label="'y-grid'"
        >
          <p slot="append" style="margin-right: 0;" small>
-            {{data.chartYUnit}}
+            {{chartData[chartID].chartYUnit}}
          </p>
        </va-input>
        <va-input
-          v-if="data.chartDevice === 'neulive'"
+          v-if="chartData[chartID].chartDevice === 'neulive'"
          class="mx-1"
          @keyup.enter="threeAxisIntervalChange(threeAxisIntervalInput)"
          @blur="threeAxisIntervalChange(threeAxisIntervalInput)"
@@ -103,13 +103,13 @@
 </template>

 <script>
-// import { InitChartsData, getChartsData } from '../../../../../data/task/ChartsManagement'
 import CanvasChartFilter from './CanvasChartFilter.vue'
 import CanvasChartFilterPopup from './CanvasChartFilterPopup.vue'
-// import CanvasChartSetting from './CanvasChartSetting'
 import CanvasChartSource from './CanvasChartSource'
 import { taskInfo } from '../../../../data/task/TaskInfo'
-import { chartData } from '../../../../data/task/ChartsManagement'
+import { mapFields } from 'vuex-map-fields'
+import { mapActions } from 'vuex'
+import taskTypes from '@/store/modules/task/content/types'

 export default {
  name: 'CanvasChart',
@@ -139,18 +139,20 @@ export default {
      default: 'auto',
    },
  },
-  created () {
+  computed: {
+    ...mapFields('taskContent', [
+      'chartData',
+      'taskContentChartKey',
+    ]),
  },
  data () {
    return {
-      // chartData: InitChartsData(this.chartID, 2000, 1, 1),
+      data: null,
      tabValue: 0,
-      chartKey: 0,
-      data: chartData.getChartsData(this.chartID),
      resizeTimer: null,
      mappingSelect: '',
      mappingOptions: taskInfo.getMappingList(),
-      nameCard: chartData.getAllChartsData()[this.chartID].cardName,
+      nameCard: '',
      initDone: false,
      timeIntervalInput: 'auto',
      threeAxisIntervalInput: 'auto',
@@ -158,48 +160,45 @@ export default {
      yIntervalInput: 'auto',
    }
  },
-  computed: {
-  },
-  watch: {
-  },
  methods: {
    timeIntervalChange: function (val) {
      if (!isNaN(parseInt(val))) {
-        chartData.getAllChartsData()[this.chartID].xAxis.forEach(x => {
+        this.chartData[this.chartID].xAxis.forEach(x => {
          if (x.type === 'time') {
            x.interval = val * 1000
          }
        })
      } else {
        this.timeIntervalInput = 'auto'
-        chartData.getAllChartsData()[this.chartID].xAxis.forEach(x => {
+        this.chartData[this.chartID].xAxis.forEach(x => {
          if (x.type === 'time') {
            x.interval = 500 * 1000
          }
        })
      }
    },
-    xIntervalChange: function (val) {
+    xIntervalChange: async function (val) {
      if (!isNaN(parseInt(val))) {
-        chartData.getAllChartsData()[this.chartID].xAxis.forEach(x => {
+        this.chartData[this.chartID].xAxis.forEach(x => {
          if (x.type === 'value') {
            x.interval = val * 1000
          }
        })
      } else {
        this.timeIntervalInput = 'auto'
-        chartData.getAllChartsData()[this.chartID].xAxis.forEach(x => {
+        this.chartData[this.chartID].xAxis.forEach(x => {
          if (x.type === 'value') {
            x.interval = null
          }
        })
      }
+      await this.taskContentChartSaveToCache()
    },
-    yIntervalChange: function (val) {
+    yIntervalChange: async function (val) {
      if (!isNaN(parseInt(val))) {
-        chartData.getAllChartsData()[this.chartID].yAxis.forEach(y => {
+        this.chartData[this.chartID].yAxis.forEach(y => {
          if (parseInt(y.channel) <= 255) {
-            if (chartData.getAllChartsData()[this.chartID].chartYUnit === 'uV') {
+            if (this.chartData[this.chartID].chartYUnit === 'uV') {
              y.interval = parseInt(val)
              //  console.log(y.interval)
            } else {
@@ -208,8 +207,8 @@ export default {
            const maxList = []
            const minList = []
            y.seriesIndex.forEach(i => {
-              maxList.push(Math.max(...chartData.getAllChartsData()[this.chartID].series[i].data.map(p => p[1])))
-              minList.push(Math.min(...chartData.getAllChartsData()[this.chartID].series[i].data.map(p => p[1])))
+              maxList.push(Math.max(...this.chartData[this.chartID].series[i].data.map(p => p[1])))
+              minList.push(Math.min(...this.chartData[this.chartID].series[i].data.map(p => p[1])))
            })
            const max = Math.max(maxList)
            const min = Math.min(minList)
@@ -222,7 +221,7 @@ export default {
        })
      } else {
        this.timeIntervalInput = 'auto'
-        chartData.getAllChartsData()[this.chartID].yAxis.forEach(y => {
+        this.chartData[this.chartID].yAxis.forEach(y => {
          if (parseInt(y.channel) <= 255) {
            y.interval = null
            y.max = 'dataMax'
@@ -230,17 +229,18 @@ export default {
          }
        })
      }
+      await this.taskContentChartSaveToCache()
    },
    threeAxisIntervalChange: function (val) {
      if (!isNaN(parseInt(val))) {
-        chartData.getAllChartsData()[this.chartID].yAxis.forEach(y => {
+        this.chartData[this.chartID].yAxis.forEach(y => {
          if (parseInt(y.channel) >= 255) {
            y.interval = val * 1
          }
        })
      } else {
        this.timeIntervalInput = 'auto'
-        chartData.getAllChartsData()[this.chartID].yAxis.forEach(y => {
+        this.chartData[this.chartID].yAxis.forEach(y => {
          if (parseInt(y.channel) >= 255) {
            y.interval = null
          }
@@ -266,33 +266,24 @@ export default {
      this.mappingOptions.forEach(item => {
        if (item.id === itemID) {
          this.mappingSelect = item
-          chartData.getAllChartsData()[this.chartID].mappingID = item.id
+          this.chartData[this.chartID].mappingID = item.id
        }
      })
    },
    refreshMappingSelect: async function () {
-      this.setMappingSelect(chartData.getAllChartsData()[this.chartID].mappingID)
-      if (chartData.getAllChartsData()[this.chartID].mappingID !== -1 && chartData.getAllChartsData()[this.chartID].mappingID != null) {
+      this.setMappingSelect(this.chartData[this.chartID].mappingID)
+      if (this.chartData[this.chartID].mappingID !== -1 && this.chartData[this.chartID].mappingID != null) {
        taskInfo.getMappingList().forEach(item => {
-          if (item.id === chartData.getAllChartsData()[this.chartID].mappingID) {
+          if (item.id === this.chartData[this.chartID].mappingID) {
            this.setChartName(item.name)
          }
        })
      }
    },
    setChartName: function (name) {
-      chartData.getAllChartsData()[this.chartID].cardName = name
+      this.chartData[this.chartID].cardName = name
      this.nameCard = name
    },
-    mappingSelectChange: function () {
-      if (this.initDone) {
-        if (this.mappingSelect.id != null) {
-          chartData.getAllChartsData()[this.chartID].mappingID = this.mappingSelect.id
-        } else {
-          chartData.getAllChartsData()[this.chartID].mappingID = -1
-        }
-      }
-    },
    resize: function () {
      if (this.$refs.chart_ref != null) {
        this.$refs.chart_ref.resize()
@@ -309,12 +300,12 @@ export default {
      let index = 0
      for (const [gridIndex, value] of Object.values(params.selected).entries()) { // [TODO] 技術債，目前real time chart一個grid只對應一條series
        if (value === true) {
-          this.data.grid[gridIndex].height = (85 / activeLegendLen) + '%'
-          this.data.grid[gridIndex].top = index * (85 / activeLegendLen) + 1 + '%'
+          this.chartData[this.chartID].grid[gridIndex].height = (85 / activeLegendLen) + '%'
+          this.chartData[this.chartID].grid[gridIndex].top = index * (85 / activeLegendLen) + 1 + '%'
          index++
        } else {
-          this.data.grid[gridIndex].height = '0%'
-          this.data.grid[gridIndex].top = '0%'
+          this.chartData[this.chartID].grid[gridIndex].height = '0%'
+          this.chartData[this.chartID].grid[gridIndex].top = '0%'
        }
      }
    },
@@ -328,10 +319,15 @@ export default {
        type: 'legendInverseSelect',
      })
    },
+
+    ...mapActions('taskContent', [
+      taskTypes.chart.saveToCache,
+    ]),
  },
  async mounted () {
+    this.data = this.chartData[this.chartID]
    this.resizeTimer = setInterval(this.resize, 1000)
-    this.nameCard = chartData.getAllChartsData()[this.chartID].cardName
+    this.nameCard = this.chartData[this.chartID].cardName
    await this.refreshMappingSelect()
    this.initDone = true
    if (this.$refs.chart_ref != null) {
@@ -56,7 +56,6 @@
 </template>

 <script>
-import { chartData } from '@/data/task/ChartsManagement'
 import { taskInfo } from '@/data/task/TaskInfo'
 import api from '@/data/api'
 import { mapFields } from 'vuex-map-fields'
@@ -77,23 +76,23 @@ export default {
  computed: {
    ...mapFields('taskContent', [
      'filter',
+      'chartData',
    ]),
    buttonIcon () {
-      if (this.data.series.length > 0 && this.data.series.every(item => item != null)) {
-        return this.data.series.every(item => item.filter[this.filterIndex].filter != null) ? 'fa fa-stop' : 'fa fa-play'
+      if (this.chartData[this.chartID].series.length > 0 && this.chartData[this.chartID].series.every(item => item != null)) {
+        return this.chartData[this.chartID].series.every(item => item.filter[this.filterIndex].filter != null) ? 'fa fa-stop' : 'fa fa-play'
      }
      return 'fa fa-play'
    },
    buttonColor () {
-      if (this.data.series.length > 0 && this.data.series.every(item => item != null)) {
-        return this.data.series.every(item => item.filter[this.filterIndex].filter != null) ? 'danger' : 'primary'
+      if (this.chartData[this.chartID].series.length > 0 && this.chartData[this.chartID].series.every(item => item != null)) {
+        return this.chartData[this.chartID].series.every(item => item.filter[this.filterIndex].filter != null) ? 'danger' : 'primary'
      }
-      return 'fa fa-play'
+      return 'primary'
    },
  },
  data () {
    return {
-      data: chartData.getAllChartsData()[this.chartID],
      selectFilter: {
        id: 1,
        name: 'notch',
@@ -129,9 +128,9 @@ export default {
  methods: {
    async updateFilterInfo (index) {
      let closeFilter = false
-      for (let i = 0; i < this.data.series.length; i++) {
-        if (this.data.series[i].filter[this.filterIndex].filter != null) {
-          this.data.series[i].filter[this.filterIndex].filter = null
+      for (let i = 0; i < this.chartData[this.chartID].series.length; i++) {
+        if (this.chartData[this.chartID].series[i].filter[this.filterIndex].filter != null) {
+          this.chartData[this.chartID].series[i].filter[this.filterIndex].filter = null
          closeFilter = true
        }
      }
@@ -140,8 +139,8 @@ export default {
      }
      let fs = 0
      let sos = []
-      for (let i = 0; i < this.data.series.length; i++) {
-        const deviceID = this.data.series[i].yAxisSource[0]
+      for (let i = 0; i < this.chartData[this.chartID].series.length; i++) {
+        const deviceID = this.chartData[this.chartID].series[i].yAxisSource[0]
        // const _fs = taskInfo.getDeviceInfo(deviceID).parameterSet.SAMPLE_RATE
        const _fs = 1000
        const _chNum = taskInfo.getDeviceInfo(deviceID).parameterSet.CH_NUMBER
@@ -173,17 +172,17 @@ export default {
          })
          sos = _sos
        }
-        this.data.series[i].filter[index].type = this.selectFilter.name
-        this.data.series[i].filter[index].order = this.order
+        this.chartData[this.chartID].series[i].filter[index].type = this.selectFilter.name
+        this.chartData[this.chartID].series[i].filter[index].order = this.order
        // sampling rate changed by channel number
-        this.data.series[i].filter[index].fs = parseFloat(_fs / _chNum)
-        this.data.series[i].filter[index].f0 = parseFloat(this.freq0)
-        this.data.series[i].filter[index].f1 = parseFloat(this.freq1)
-        this.data.series[i].filter[index].f2 = parseFloat(this.freq2)
-        this.data.series[i].filter[index].sos = sos
-        this.data.series[i].filter[index].filter = IIRFilter.init(sos)
+        this.chartData[this.chartID].series[i].filter[index].fs = parseFloat(_fs / _chNum)
+        this.chartData[this.chartID].series[i].filter[index].f0 = parseFloat(this.freq0)
+        this.chartData[this.chartID].series[i].filter[index].f1 = parseFloat(this.freq1)
+        this.chartData[this.chartID].series[i].filter[index].f2 = parseFloat(this.freq2)
+        this.chartData[this.chartID].series[i].filter[index].sos = sos
+        this.chartData[this.chartID].series[i].filter[index].filter = IIRFilter.init(sos)
      }
-      //  console.log(this.data)
+      //  console.log(this.chartData[this.chartID])
    },
  },
 }
@@ -19,8 +19,8 @@
 </template>

 <script>
-import { chartData } from '@/data/task/ChartsManagement'
 import CanvasChartIndividualFilter from './CanvasChartIndividualFilter.vue'
+import { mapFields } from 'vuex-map-fields'

 export default {
  name: 'canvas-chart-filter-popup',
@@ -37,21 +37,22 @@ export default {
    },
  },
  computed: {
+    ...mapFields('taskContent', [
+      'chartData',
+    ]),
  },
  data () {
    return {
      showModal: false,
      position: 'center',
-      data: chartData.getAllChartsData()[this.chartID],
      gridIndex: 0,
    }
  },
  methods: {
    showPanel (params) {
-      // console.log(this.data)
      if (this.chartRef != null) {
        let _gridIndex = 0
-        for (_gridIndex = 0; _gridIndex < this.data.grid.length; _gridIndex++) {
+        for (_gridIndex = 0; _gridIndex < this.chartData[this.chartID].grid.length; _gridIndex++) {
          if (this.chartRef.containPixel({ gridIndex: _gridIndex }, [params.offsetX, params.offsetY])) {
            this.position = 'left'
            this.showModal = true
@@ -57,7 +57,6 @@
 </template>

 <script>
-import { chartData } from '@/data/task/ChartsManagement'
 import { taskInfo } from '@/data/task/TaskInfo'
 import api from '@/data/api'
 import { mapFields } from 'vuex-map-fields'
@@ -82,23 +81,23 @@ export default {
  computed: {
    ...mapFields('taskContent', [
      'filter',
+      'chartData',
    ]),
    buttonIcon () {
-      if (this.data.series[this.seriesIndex] != null) {
-        return this.data.series[this.seriesIndex].filter[this.filterIndex].filter != null ? 'fa fa-stop' : 'fa fa-play'
+      if (this.chartData[this.chartID].series[this.seriesIndex] != null) {
+        return this.chartData[this.chartID].series[this.seriesIndex].filter[this.filterIndex].filter != null ? 'fa fa-stop' : 'fa fa-play'
      }
      return 'fa fa-play'
    },
    buttonColor () {
-      if (this.data.series[this.seriesIndex] != null) {
-        return this.data.series[this.seriesIndex].filter[this.filterIndex].filter != null ? 'danger' : 'primary'
+      if (this.chartData[this.chartID].series[this.seriesIndex] != null) {
+        return this.chartData[this.chartID].series[this.seriesIndex].filter[this.filterIndex].filter != null ? 'danger' : 'primary'
      }
      return 'fa fa-play'
    },
  },
  data () {
    return {
-      data: chartData.getAllChartsData()[this.chartID],
      selectFilter: {
        id: 1,
        name: 'notch',
@@ -134,8 +133,8 @@ export default {
  methods: {
    async updateFilterInfo (_filterIndex, _seriesIndex) {
      let closeFilter = false
-      if (this.data.series[_seriesIndex].filter[_filterIndex].filter != null) {
-        this.data.series[_seriesIndex].filter[_filterIndex].filter = null
+      if (this.chartData[this.chartID].series[_seriesIndex].filter[_filterIndex].filter != null) {
+        this.chartData[this.chartID].series[_seriesIndex].filter[_filterIndex].filter = null
        closeFilter = true
      }
      if (closeFilter) {
@@ -143,7 +142,7 @@ export default {
      }
      let fs = 0
      let sos = []
-      const deviceID = this.data.series[_seriesIndex].yAxisSource[0]
+      const deviceID = this.chartData[this.chartID].series[_seriesIndex].yAxisSource[0]
      // const _fs = taskInfo.getDeviceInfo(deviceID).parameterSet.SAMPLE_RATE
      const _fs = 1000
      const _chNum = taskInfo.getDeviceInfo(deviceID).parameterSet.CH_NUMBER
@@ -175,22 +174,22 @@ export default {
        })
        sos = _sos
      }
-      this.data.series[_seriesIndex].filter[_filterIndex].type = this.selectFilter.name
-      this.data.series[_seriesIndex].filter[_filterIndex].order = this.order
+      this.chartData[this.chartID].series[_seriesIndex].filter[_filterIndex].type = this.selectFilter.name
+      this.chartData[this.chartID].series[_seriesIndex].filter[_filterIndex].order = this.order
      // sampling rate changed by channel number
-      this.data.series[_seriesIndex].filter[_filterIndex].fs = parseInt(_fs / _chNum)
-      this.data.series[_seriesIndex].filter[_filterIndex].f0 = parseInt(this.freq0)
-      this.data.series[_seriesIndex].filter[_filterIndex].f1 = parseInt(this.freq1)
-      this.data.series[_seriesIndex].filter[_filterIndex].f2 = parseInt(this.freq2)
-      this.data.series[_seriesIndex].filter[_filterIndex].sos = sos
-      this.data.series[_seriesIndex].filter[_filterIndex].filter = IIRFilter.init(sos)
+      this.chartData[this.chartID].series[_seriesIndex].filter[_filterIndex].fs = parseInt(_fs / _chNum)
+      this.chartData[this.chartID].series[_seriesIndex].filter[_filterIndex].f0 = parseInt(this.freq0)
+      this.chartData[this.chartID].series[_seriesIndex].filter[_filterIndex].f1 = parseInt(this.freq1)
+      this.chartData[this.chartID].series[_seriesIndex].filter[_filterIndex].f2 = parseInt(this.freq2)
+      this.chartData[this.chartID].series[_seriesIndex].filter[_filterIndex].sos = sos
+      this.chartData[this.chartID].series[_seriesIndex].filter[_filterIndex].filter = IIRFilter.init(sos)
    },
  },
  mounted () {
-    this.selectFilter = this.optionFilter.find(item => item.name === this.data.series[this.seriesIndex].filter[this.filterIndex].type)
-    this.freq0 = this.data.series[this.seriesIndex].filter[this.filterIndex].f0
-    this.freq1 = this.data.series[this.seriesIndex].filter[this.filterIndex].f1
-    this.freq2 = this.data.series[this.seriesIndex].filter[this.filterIndex].f2
+    this.selectFilter = this.optionFilter.find(item => item.name === this.chartData[this.chartID].series[this.seriesIndex].filter[this.filterIndex].type)
+    this.freq0 = this.chartData[this.chartID].series[this.seriesIndex].filter[this.filterIndex].f0
+    this.freq1 = this.chartData[this.chartID].series[this.seriesIndex].filter[this.filterIndex].f1
+    this.freq2 = this.chartData[this.chartID].series[this.seriesIndex].filter[this.filterIndex].f2
  },
 }
 </script>
@@ -5,7 +5,7 @@
        <p class="display-6">filter<p/>
      </div>
      <div class="flex sm3 xl3 md3 xs3 pa-0 ma-0">
-        <va-toggle v-model="data.filter.open" small @click.native="() => {}"/>
+        <va-toggle v-model="chartData[chartID].filter.open" small @click.native="() => {}"/>
      </div>
      <!-- <div class="flex sm12 xl12 md12 xs12 px-0 mx-0">
        <p class="display-6">Protect recording channels<p/>
@@ -24,7 +24,7 @@
 </template>

 <script>
-import { chartData } from '../../../../data/task/ChartsManagement'
+import { mapFields } from 'vuex-map-fields'

 export default {
  name: 'canvas-chart-setting',
@@ -34,9 +34,13 @@ export default {
      required: true,
    },
  },
+  computed: {
+    ...mapFields('taskContent', [
+      'chartData',
+    ]),
+  },
  data () {
    return {
-      data: chartData.getAllChartsData()[this.chartID],
    }
  },
  methods: {
@@ -45,7 +45,6 @@
            v-model="gridSelection"
            textBy="value"
            :options="gridOptions"
-            @click.enter="updateGridOptions()"
          />
        </div>
        <va-button :disabled="sourceAddStatus" class="flex md3 xl3 xs3 sm3 pa-1" @click="addRegisterDeviceChannel(gridSelection.id)" >
@@ -56,11 +55,12 @@
    <va-tree-root>
      <va-tree-category
        style="font-size: 20px;"
-        v-for="grid in grids"
+        v-for="grid in chartData[chartID].grid"
        :key="grid.index"
-        :label="'Subplot ' + grid.index">
+        :label="'Subplot ' + grid.index"
+      >
        <va-tree-node
-          v-for="series in gridSource[grid.index]"
+          v-for="series in chartData[chartID].gridSource[grid.index]"
          :key="series.name"
        >
          <div class="flex row align--center">
@@ -86,18 +86,14 @@
 </template>

 <script>
-// import { getChartsData } from '../../../../../data/task/ChartsManagement'
-
 import { taskInfo } from '../../../../data/task/TaskInfo'
-import { chartData } from '../../../../data/task/ChartsManagement'
+import { mapFields } from 'vuex-map-fields'
+import { mapActions } from 'vuex'
+import taskTypes from '@/store/modules/task/content/types'

 export default {
  name: 'canvas-chart-source',
  props: {
-    gridInfo: {
-      type: Array,
-      required: true,
-    },
    chartID: {
      type: Number,
      required: true,
@@ -107,14 +103,7 @@ export default {
    return {
      error: '',
      gridSelection: '',
-      gridOptions: [
-        {
-          id: 0,
-          value: 0,
-        },
-      ],
-      grids: this.gridInfo,
-      gridSource: chartData.getAllChartsData()[this.chartID].gridSource,
+      gridOptions: [],
      channelSelectX: '',
      channelOptionsX: [],
      channelSelectY: '',
@@ -128,6 +117,11 @@ export default {
      sourceList: [],
    }
  },
+  computed: {
+    ...mapFields('taskContent', [
+      'chartData',
+    ]),
+  },
  watch: {
    deviceOptions: function (val) {
      this.clearSelectOptions()
@@ -269,7 +263,7 @@ export default {
  methods: {
    updateGridOptions () {
      this.gridOptions = []
-      for (let i = 0; i < this.grids.length; i++) {
+      for (let i = 0; i < this.chartData[this.chartID].grid.length; i++) {
        this.gridOptions.push({
          id: i,
          value: String(i),
@@ -291,7 +285,7 @@ export default {
      this.deviceSelectY = ''
      this.gridSelection = ''
    },
-    addRegisterDeviceChannel: function (gridIndex) {
+    async addRegisterDeviceChannel (gridIndex) {
      let deviceNameX
      let deviceNameY
      const deviceIDX = this.deviceSelectX.id
@@ -320,9 +314,18 @@ export default {
      } else if (this.deviceSelectY.name.indexOf('Time') >= 0) {
        deviceNameY = 'Time'
      }
-      chartData.register(this.chartID, gridIndex, deviceNameX, deviceIDX, channelX, deviceNameY, deviceIDY, channelY, null)
-      //  console.log(this.chartID, gridIndex, deviceNameX, deviceIDX, channelX, deviceNameY, deviceIDY, channelY, null)
-      //  console.log(this.deviceSelectX, this.channelSelectX, this.deviceSelectY, this.channelSelectY)
+
+      this.taskContentChartRegister({
+        chartID: this.chartID,
+        gridIndex: gridIndex,
+        deviceNameX: deviceNameX,
+        deviceIDX: deviceIDX,
+        channelX: channelX,
+        deviceNameY: deviceNameY,
+        deviceIDY: deviceIDY,
+        channelY: channelY,
+        formula: null,
+      })
      if (deviceNameX !== 'Time') {
        this.sourceList.push([this.deviceSelectX.name, deviceIDX, channelX].toString())
      }
@@ -331,19 +334,15 @@ export default {
      }
      this.sourceAddStatus = true
      this.clearSelectOptions()
+      await this.taskContentChartSaveToCache()
    },
-    addGrid () {
-      chartData.updateGridList(this.chartID, chartData.getAllChartsData()[this.chartID].grid.length + 1)
-      this.grids = chartData.getAllChartsData()[this.chartID].grid
-      this.treeKey++
-      this.gridOptions = []
-      for (let i = 0; i < this.grids.length; i++) {
-        this.gridOptions.push({
-          id: i,
-          value: String(i),
-        })
-      }
-      //  console.log(chartData.getAllChartsData()[this.chartID])
+    async addGrid () {
+      this.taskContentChartUpdateGridList({
+        chartID: this.chartID,
+        length: this.chartData[this.chartID].grid.length + 1,
+      })
+      this.updateGridOptions()
+      await this.taskContentChartSaveToCache()
    },
    checkSourceAddStatus () {
      if (this.sourceList.indexOf([this.deviceSelectX.name, this.deviceSelectX.id, this.channelSelectX.id].toString()) >= 0) {
@@ -371,17 +370,18 @@ export default {
        this.sourceAddStatus = true
      }
    },
-    addProduct () {
-      this.products.push({
-        id: Math.floor(Math.random() * 100000),
-        name: 'New product',
-      })
-    },
    removeProduct (product) {
      this.products = this.products.filter(productToFilter => productToFilter !== product)
    },
-    mounted () {
-    },
+
+    ...mapActions('taskContent', [
+      taskTypes.chart.register,
+      taskTypes.chart.updateGridList,
+      taskTypes.chart.saveToCache,
+    ]),
+  },
+  mounted () {
+    this.updateGridOptions()
  },
 }
 </script>
@@ -29,22 +29,6 @@
          @detect="detectDevice($event)"
          @sd_card_status="sdCardStatus($event)"
        />
-
-        <!-- <div class="row flex xs12 md12 xl12 sm12 mt-2" style="text-align: center;">
-          <div class="xs10 md10 xl10 sm10">
-            <va-select
-              small
-              v-model="deviceSelect"
-              textBy="name"
-              :options="deviceOptions"
-            />
-          </div>
-          <div>
-            <va-button class="ma-0" color="primary" target="_blank" @click="addDevice(deviceSelect.id)" :disabled="deviceSelect.id == null">
-              REGISTER
-            </va-button>
-          </div>
-        </div> -->
      </div>

    </va-card>
@@ -56,10 +40,11 @@ import { FulfillingBouncingCircleSpinner } from 'epic-spinners'
 import TaskDeviceList from './TaskDeviceList'
 // import TaskDeviceListGM from './neulive-gimer/TaskDeviceListGM'
 import { taskInfo } from '../../../../data/task/TaskInfo'
-import { chartData } from '../../../../data/task/ChartsManagement'
 import { dataStreamBuffer } from '../../../../data/task/DataStreamBuffer'
 import api from '@/data/api'
 import { mapFields } from 'vuex-map-fields'
+import { mapActions } from 'vuex'
+import taskTypes from '@/store/modules/task/content/types'

 export default {
  name: 'TaskDevices',
@@ -108,16 +93,8 @@ export default {
    },
    loadingDone: async function () {
      this.state.LOADING = false
-      // const ret = await api.task.getAll()
-      // if (ret.data.length > 0) {
-      //   for (const device in ret.data[0].device_config) {
-      //     if (ret.data[0].device_config[device].device_address) {

-      //     }
-      //   }
-      // }
-      //  // console.log(this.deviceOptions)
-      for (let i = 0; i <= 11; i++) {
+      for (let i = 0; i <= 11; i++) { // 0~7: memboard, 8~11: usb
        if (taskInfo.getDeviceInfoByRawID(i).info.status === 'connected') {
          const index = this.deviceList.findIndex(d => taskInfo.getRawDeviceID(d.id) === i)
          if (index < 0) {
@@ -137,19 +114,16 @@ export default {
        name: 'Time',
      })
      taskInfo.getDeviceList().push(...this.deviceList)
-      //  // console.log(taskInfo.getDeviceList())
-      // for (let i = this.deviceOptions.length - 1; i >= 0; i--) {
-      //   this.deviceSelect = this.deviceOptions[i]
-      //   await this.addDevice(this.deviceOptions[i].id)
-      //   // this.sleep(500).then(() => {
-      //   //   this.addDevice(this.deviceOptions[i].id)
-      //   // })
-      // }
    },
    startDevice: async function (device) {
      if (!taskInfo.getDeviceInfo(device.id).info.isSync) {
        if (taskInfo.getDeviceInfo(device.id).info.library_name.startsWith('Neulive')) {
-          await chartData.defaultChartGenerator(this.deviceList, device.id, null, 'device')
+          await this.taskContentChartDefaultChartGenerator({
+            _deviceList: this.deviceList,
+            _itemID: device.id,
+            _chartID: null,
+            _type: 'device',
+          })
          this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
            header: 'device_instruction/0',
            device: taskInfo.getRawDeviceID(device.id),
@@ -184,7 +158,12 @@ export default {
            }
          }

-          await chartData.defaultChartGenerator(this.deviceList, device.id, null, 'device')
+          await this.taskContentChartDefaultChartGenerator({
+            _deviceList: this.deviceList,
+            _itemID: device.id,
+            _chartID: null,
+            _type: 'device',
+          })
          this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
            header: 'device_instruction/0',
            device: taskInfo.getRawDeviceID(device.id),
@@ -252,7 +231,12 @@ export default {
        this.pageToast('[Recording] Please select recording channels.')
        return false
      }
-      await chartData.defaultChartGenerator(this.deviceList, device.id, null, 'device')
+      await this.taskContentChartDefaultChartGenerator({
+        _deviceList: this.deviceList,
+        _itemID: device.id,
+        _chartID: null,
+        _type: 'device',
+      })
      if (!taskInfo.getDeviceInfo(device.id).info.isSync) {
        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
          header: 'device_instruction/0',
@@ -444,17 +428,10 @@ export default {
        },
      )
    },
-  },
-  async mounted () {
-    // this.pageMqttSub()
-    // for (const device in this.deviceOptions) {
-    //   this.deviceSelect = this.deviceOptions[device]
-    //   await this.addDevice()
-    // }
-  },
-  destroyed () {
-    // this.loadingDone()
-    // this.pageMqttUnSub()
+
+    ...mapActions('taskContent', [
+      taskTypes.chart.defaultChartGenerator,
+    ]),
  },
  watch: {
  },
@@ -36,12 +36,11 @@ import { FulfillingBouncingCircleSpinner } from 'epic-spinners'
 // import TaskDeviceList from './TaskDeviceList'
 import TaskDeviceListGM from './TaskDeviceListGM'
 import { taskInfo } from '@/data/task/TaskInfo'
-import { chartData } from '@/data/task/ChartsManagement'
 import { dataStreamBuffer } from '@/data/task/DataStreamBuffer'
 import api from '@/data/api'
 import { mapActions } from 'vuex'
 import { mapFields } from 'vuex-map-fields'
-import types from '@/store/modules/task/content/types'
+import taskTypes from '@/store/modules/task/content/types'

 export default {
  name: 'TaskDevices',
@@ -111,14 +110,6 @@ export default {
        name: 'Time',
      })
      taskInfo.getDeviceList().push(...this.deviceList)
-      // console.log('ppp', taskInfo.getDeviceList(), this.deviceList)
-      // for (let i = this.deviceOptions.length - 1; i >= 0; i--) {
-      //   this.deviceSelect = this.deviceOptions[i]
-      //   await this.addDevice(this.deviceOptions[i].id)
-      //   // this.sleep(500).then(() => {
-      //   //   this.addDevice(this.deviceOptions[i].id)
-      //   // })
-      // }
    },
    detectDevice: function (device) {
      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
@@ -154,7 +145,12 @@ export default {
        this.pageToast('[Recording] Please select recording channels.')
        return false
      }
-      await chartData.defaultChartGenerator(this.deviceList, device.id, null, 'device')
+      await this.taskContentChartDefaultChartGenerator({
+        _deviceList: this.deviceList,
+        _itemID: device.id,
+        _chartID: null,
+        _type: 'device',
+      })
      this.deviceList.forEach(_device => {
        if (_device.library_name === 'Neulive3.5-STI') {
          this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
@@ -375,19 +371,15 @@ export default {
        },
      )
    },
-    ...mapActions('taskContent', [types.gimer.checkDeviceStatus]),
+
+    ...mapActions('taskContent', [
+      taskTypes.gimer.checkDeviceStatus,
+      taskTypes.chart.defaultChartGenerator,
+    ]),
  },
  async mounted () {
-    //  console.log('sss', taskInfo.getDeviceList(), this.deviceList)
-    // this.pageMqttSub()
-    // for (const device in this.deviceOptions) {
-    //   this.deviceSelect = this.deviceOptions[device]
-    //   await this.addDevice()
-    // }
  },
  destroyed () {
-    // this.loadingDone()
-    // this.pageMqttUnSub()
  },
  watch: {
  },
@@ -104,7 +104,8 @@

 <script>
 import { taskInfo } from '../../../../data/task/TaskInfo'
-import { chartData } from '../../../../data/task/ChartsManagement'
+import { mapActions } from 'vuex'
+import taskTypes from '@/store/modules/task/content/types'

 export default {
  name: 'TaskFormula',
@@ -173,11 +174,16 @@ export default {
      this.formulaNumber--
      this.$emit('remove', this.formulaRemoveSelect.id)
    },
-    generate: function (formula) {
+    generate: async function (formula) {
      switch (formula.type) {
        case 'Sheet Resistance':
          formula.dataNow = 0
-          chartData.defaultChartGenerator(this.deviceList, formula.id, null, 'formula')
+          await this.taskContentChartDefaultChartGenerator({
+            _deviceList: this.deviceList,
+            _itemID: formula.id,
+            _chartID: null,
+            _type: 'formula',
+          })
          break
      }
      this.pageToast('The ' + formula.name + 'has been applied.')
@@ -192,6 +198,10 @@ export default {
        },
      )
    },
+
+    ...mapActions('taskContent', [
+      taskTypes.chart.defaultChartGenerator,
+    ]),
  },
  mounted () {
    // this.pageMqttSub()
@@ -130,7 +130,7 @@

 <script>
 import { taskInfo } from '../../../../data/task/TaskInfo'
-import { chartData } from '../../../../data/task/ChartsManagement'
+import { mapFields } from 'vuex-map-fields'

 export default {
  name: 'NeuliveParameterRecording',
@@ -146,6 +146,11 @@ export default {
      default: 'Neulive',
    },
  },
+  computed: {
+    ...mapFields('taskContent', [
+      'chartData',
+    ]),
+  },
  data () {
    return {
      channelList: [],
@@ -384,7 +389,7 @@ export default {
          device: taskInfo.getRawDeviceID(this.deviceID),
          content: this.acceleratorSensitivitySelect.value,
        }))
-        const charts = chartData.getAllChartsData()
+        const charts = this.chartData
        for (const chartID in charts) {
          for (const seriesIndex in charts[chartID].series) {
            if (charts[chartID].series[seriesIndex].yAxisSource[1] >= 256 && charts[chartID].series[seriesIndex].yAxisSource[1] <= 260) {
@@ -130,7 +130,7 @@

 <script>
 import { taskInfo } from '../../../../data/task/TaskInfo'
-import { chartData } from '../../../../data/task/ChartsManagement'
+import { mapFields } from 'vuex-map-fields'

 export default {
  name: 'NeuliveParameterRecording',
@@ -146,6 +146,11 @@ export default {
      default: 'Neulive',
    },
  },
+  computed: {
+    ...mapFields('taskContent', [
+      'chartData',
+    ]),
+  },
  data () {
    return {
      channelList: [],
@@ -491,7 +496,7 @@ export default {
          device: taskInfo.getRawDeviceID(this.deviceID),
          content: this.acceleratorSensitivitySelect.value,
        }))
-        const charts = chartData.getAllChartsData()
+        const charts = this.chartData
        for (const chartID in charts) {
          for (const seriesIndex in charts[chartID].series) {
            if (charts[chartID].series[seriesIndex].yAxisSource[1] >= 256 && charts[chartID].series[seriesIndex].yAxisSource[1] <= 260) {
@@ -130,7 +130,7 @@

 <script>
 import { taskInfo } from '../../../../data/task/TaskInfo'
-import { chartData } from '../../../../data/task/ChartsManagement'
+import { mapFields } from 'vuex-map-fields'

 export default {
  name: 'NeuliveParameterRecording',
@@ -146,6 +146,11 @@ export default {
      default: 'Neulive',
    },
  },
+  computed: {
+    ...mapFields('taskContent', [
+      'chartData',
+    ]),
+  },
  data () {
    return {
      channelArray: Array.from({ length: 64 }, (_, i) => i + 1),
@@ -468,7 +473,7 @@ export default {
          device: taskInfo.getRawDeviceID(this.deviceID),
          content: this.acceleratorSensitivitySelect.value,
        }))
-        const charts = chartData.getAllChartsData()
+        const charts = this.chartData
        for (const chartID in charts) {
          for (const seriesIndex in charts[chartID].series) {
            if (charts[chartID].series[seriesIndex].yAxisSource[1] >= 256 && charts[chartID].series[seriesIndex].yAxisSource[1] <= 260) {
@@ -98,7 +98,6 @@

 <script>
 import { taskInfo } from '@/data/task/TaskInfo'
-import { chartData } from '@/data/task/ChartsManagement'
 import { mapActions } from 'vuex'
 import { mapFields } from 'vuex-map-fields'
 import types from '@/store/modules/task/content/types'
@@ -110,6 +109,7 @@ export default {
  computed: {
    ...mapFields('taskContent', [
      'deviceList',
+      'chartData',
    ]),
  },
  props: {
@@ -412,7 +412,7 @@ export default {
          device: taskInfo.getRawDeviceID(this.deviceID),
          content: this.acceleratorSensitivitySelect.value,
        }))
-        const charts = chartData.getAllChartsData()
+        const charts = this.chartData
        for (const chartID in charts) {
          for (const seriesIndex in charts[chartID].series) {
            if (charts[chartID].series[seriesIndex].yAxisSource[1] >= 256 && charts[chartID].series[seriesIndex].yAxisSource[1] <= 260) {
@@ -1,9 +1,3 @@
-// import _global from '../global/global'
-// import { chartData } from './ChartsManagement'
-// import { taskInfo } from './TaskInfo'
-
-// const IIRFilter2 = IIRFilter.init(sos2)
-
 const _dataStreamBuffer = {}
 const _dataStreamBufferSize = 1000

@@ -4,7 +4,6 @@ import api from '@/data/api'

 const eliteImgUrl = require('@/assets/img/elite_img.png')
 const neuliveImgUrl = require('@/assets/img/neulive_img.png')
-// import { chartData } from './ChartsManagement'

 let _taskInfo = newTask()
 // show the devices which mac is included in task
@@ -98,7 +97,6 @@ export const taskInfo = {
      }
    }
    // _taskInfo.deviceAddrList = [[128, 111, 176, 237, 124, 140], [164, 218, 50, 212, 231, 58], [24, 4, 237, 55, 198, 53]]
-    // _taskInfo.chartNumber = _taskInfo.deviceAddrList.length
    await update()
    // return deviceList
  },
@@ -126,17 +124,6 @@ export const taskInfo = {
    _deviceListAll.length = 0
    _mappingList.length = 0
    deviceListState.length = 0
-    // _taskInfo.controllerID = ''
-    // _taskInfo.deviceAddrList.length = 0
-    // _taskInfo.taskDeviceID.length = 0
-    // _taskInfo.chartNumber = 0
-    // deviceListRegister.length = 0
-    // for (const device in _taskInfo.deviceList) {
-    //   _taskInfo.deviceList[device].info.status = ''
-    //   _taskInfo.deviceList[device].info.isSync = false
-    //   _taskInfo.deviceList[device].info.isStimulate = false
-    // }
-    // _taskInfo.formulaList.length = 0
  },

  deviceInfo: async (mes, deviceListState) => {
@@ -289,31 +276,6 @@ export const taskInfo = {
    await update()
  },

-  updateChartInfo: async () => {
-    // for (const chartID in _taskInfo.chartList) {
-    //   if (chartData.getChartsData(chartID) == null) {
-    //     chartData.init(chartID, 2000, 1, 1)
-    //   }
-    //   chartData.getChartsData(chartID).cardName = _taskInfo.chartList[chartID].cardName
-    //   chartData.getChartsData(chartID).run = _taskInfo.chartList[chartID].run
-    //   chartData.getChartsData(chartID).cardHeight = _taskInfo.chartList[chartID].cardHeight
-    //   chartData.getChartsData(chartID).cardWidth = _taskInfo.chartList[chartID].cardWidth
-    //   chartData.getChartsData(chartID).maxDots = _taskInfo.chartList[chartID].maxDots
-    //   chartData.getChartsData(chartID).samplingRate = _taskInfo.chartList[chartID].samplingRate
-    //   chartData.updateGridList(chartID, _taskInfo.chartList[chartID].grids.length)
-    //   for (let i = 0; i < _taskInfo.chartList[chartID].grids.length; i++) {
-    //     _taskInfo.chartList[chartID].grids[i].forEach(line => {
-    //       if (line.x[0] === -1) {
-    //         chartData.register('NeuLive', i, chartID, line.y[0], line.y[1])
-    //       } else {
-    //         chartData.register('Elite', i, chartID, line.x[0], line.x[1], line.y[0], line.y[1])
-    //       }
-    //     })
-    //   }
-    // }
-    // return _taskInfo
-  },
-
  getDevicePic: (libraryName) => {
    if (libraryName == null) {
      return false
@@ -1,7 +1,9 @@
 import paramAct from './paramAct'
 import gimerAct from './gimerAct'
+import chartAct from './chartAct'

 export default {
  ...paramAct,
  ...gimerAct,
+  ...chartAct,
 }
@@ -4,6 +4,11 @@ function newState () {
    filter: {},
    showTaskModal: false,
    taskModalText: '[Recording] At least one channel is opened.',
+
+    chartData: {},
+    taskContentChartKey: 0,
+    taskContentChartPanelKey: 0,
+    taskContentChartNumber: 0,
  }
 }

@@ -1,5 +1,18 @@

 const types = {
+  chart: {
+    initCustomizedFromCache: 'taskContentChartInitCustomizedFromCache',
+    saveToCache: 'taskContentChartSaveToCache',
+    add: 'taskContentChartAdd',
+    registerFromCache: 'taskContentChartRegisterFromCache',
+    register: 'taskContentChartRegister',
+    updateGridList: 'taskContentChartUpdateGridList',
+    defaultChartGenerator: 'taskContentChartDefaultChartGenerator',
+    reset: 'taskContentChartReset',
+    refreshData: 'taskContentChartRefreshData',
+    refreshChart: 'taskContentChartRefreshChart',
+    refreshPanel: 'taskContentChartRefreshPanel',
+  },
  param: {
    checkIfRecordingSetDone: 'checkIfRecordingSetDoneParam',
    checkIfStimulationSetDone: 'checkIfStimulationSetDoneParam',
Author	SHA1	Message	Date
Jordan Hsu	0ecd2b50dd	[fix] configuration refresh bug	2022-02-12 17:17:34 +08:00
Jordan Hsu	c984bebf6f	[modify] separate chartKey and panelKey	2022-01-14 17:26:13 +08:00
Jordan Hsu	06766f1ac4	[add] can save chart source setting	2022-01-14 15:54:06 +08:00
Jordan Hsu	9981958160	typo	2022-01-12 18:06:11 +08:00
Jordan Hsu	e1d6dbd38e	fix chart data display bug	2022-01-12 18:01:06 +08:00
Jordan Hsu	96b38e5570	fix cache chart bug	2022-01-12 15:52:23 +08:00
Jordan Hsu	ffd246124f	tmp	2022-01-10 17:12:27 +08:00
Jordan Hsu	834bcbc4df	add missing code	2022-01-10 15:56:25 +08:00
Jordan Hsu	8f6f437f14	[add] missing localforage package dependency	2022-01-10 15:49:17 +08:00
Jordan Hsu	e5bc63e5d5	[add] real-time chart add / remove update with cache	2022-01-10 15:38:55 +08:00
Jordan Hsu	5d3dbbac4f	[modify] real-time chart data object to vuex	2022-01-10 12:56:35 +08:00