fix: 优化部分组件性能

src/store/modules/sample.js

@@ -1,7 +1,7 @@
 const sample = {
-  state: {
+  state: Object.freeze({
     sampleList: [] // [{ inputFileName: String; data: Object; }]
-  },
+  }),
   mutations: {
     SET_SAMPLE_LIST: (state, sampleList) => {
       state.sampleList = sampleList

src/views/spectrumAnalysis/beta-gamma-analysis.vue

@@ -307,8 +307,8 @@ export default {
 
       const { dbName, sampleId, inputFileName, analyst } = this.sample
       try {
-        this.isLoading = true
         this.cancelLastRequest()
+        this.isLoading = true
         const cancelToken = this.createCancelToken()
         const { success, result, message } = await getAction(
           '/spectrumAnalysis/getDBSpectrumChart',
@@ -320,6 +320,7 @@ export default {
           cancelToken
         )
         if (success) {
+          this.isLoading = false
           this.sampleDetail = result
           this.changeChartByType('sample')
           this.emitGetFiles(result)
@@ -334,8 +335,10 @@ export default {
         }
       } catch (error) {
         console.error(error)
-      } finally {
+        const isCancel = axios.isCancel(error)
-        this.isLoading = false
+        if(!isCancel) {
+          this.isLoading = false
+        }
       }
     },
 
@@ -356,8 +359,8 @@ export default {
         qcFileName: this.sample.qcFileStatus ? this.sample.qcFileName : '',
       }
       try {
-        this.isLoading = true
         this.cancelLastRequest()
+        this.isLoading = true
         const cancelToken = this.createCancelToken()
         const { success, result, message } = await getAction(
           '/spectrumAnalysis/getFileSpectrumChart',
@@ -379,12 +382,17 @@ export default {
         }
       } catch (error) {
         console.error(error)
+        const isCancel = axios.isCancel(error)
+        if(!isCancel) {
+          this.isLoading = false
+        }
       }
     },
 
     cancelLastRequest() {
       if (this._cancelToken && typeof this._cancelToken == 'function') {
         this._cancelToken()
+        this._cancelToken = undefined
       }
     },
 
@@ -653,6 +661,8 @@ export default {
         this.resultDisplay = []
         const sampleData = await this.$store.dispatch('GET_SAMPLE_DATA', newVal.inputFileName)
         if (sampleData) {
+          this.cancelLastRequest()
+          this.isLoading = false
           const { data, from } = sampleData
           this.sampleDetail = data
           this.changeChartByType('sample')

src/views/spectrumAnalysis/gamma-analysis.vue

@@ -163,6 +163,36 @@ export default {
     StripModal,
   },
   data() {
+    this.channelData = {
+      peakGroup: [],
+      spectrumLine: null,
+      baseLine: null,
+      lcLine: null,
+      scacLine: null,
+      all: null,
+      baseLineCP: [],
+
+      compareLine: null,
+      stripSumOrCutLine: null,
+      stripReferenceLine: null,
+    }
+
+    this.energyData = {
+      peakGroup: [],
+      spectrumLine: null,
+      baseLine: null,
+      lcLine: null,
+      scacLine: null,
+      all: null,
+      baseLineCP: [],
+
+      compareLine: null,
+      stripSumOrCutLine: null,
+      stripReferenceLine: null,
+    }
+    ;(this.peakList = []), // Peak 列表（非点位）
+      (this.baseCtrls = {}) // BaseCtrls
+
     return {
       abc: false,
       isLoading: false,
@@ -183,35 +213,6 @@ export default {
         qcFlagsVisible: false,
       },
 
-      channelData: {
-        peakGroup: [],
-        spectrumLine: null,
-        baseLine: null,
-        lcLine: null,
-        scacLine: null,
-        all: null,
-        baseLineCP: [],
-
-        compareLine: null,
-        stripSumOrCutLine: null,
-        stripReferenceLine: null,
-      },
-      energyData: {
-        peakGroup: [],
-        spectrumLine: null,
-        baseLine: null,
-        lcLine: null,
-        scacLine: null,
-        all: null,
-        baseLineCP: [],
-
-        compareLine: null,
-        stripSumOrCutLine: null,
-        stripReferenceLine: null,
-      },
-      peakList: [], // Peak 列表（非点位）
-      baseCtrls: {}, // BaseCtrls
-
       nuclideLibraryList: [], // 当前鼠标点击选中的channel
       peakInfomationTooltip: {
         // Peak Infomation的位置
@@ -251,6 +252,8 @@ export default {
 
     window.addEventListener('keydown', this.handleKeyboardEvent)
     window.addEventListener('click', this.closePeakInfomationTooltip)
+
+    console.log('%c [ this.channelData ]-256', 'font-size:13px; background:#e2a49d; color:#ffe8e1;', this.channelData)
   },
   destroyed() {
     this.cancelLastRequest()
@@ -502,9 +505,9 @@ export default {
     async getSampleDetail() {
       const { dbName, sampleId, analyst } = this.sample
       try {
-        this.isLoading = true
         // const { success, result, message } = Response
         this.cancelLastRequest()
+        this.isLoading = true
         const cancelToken = this.createCancelToken()
 
         const { success, result, message } = await getAction(
@@ -516,7 +519,6 @@ export default {
           },
           cancelToken
         )
-        console.log('%c [ result ]-243', 'font-size:13px; background:pink; color:#bf2c9f;', result)
         if (success) {
           this.dataProcess(result, 'db')
         } else {
@@ -526,7 +528,7 @@ export default {
       } catch (error) {
         console.error(error)
         const isCancel = axios.isCancel(error)
-        if(!isCancel) {
+        if (!isCancel) {
           this.isLoading = false
         }
       }
@@ -535,10 +537,9 @@ export default {
     async getSampleDetail_file() {
       const { inputFileName: fileName } = this.sample
       try {
-        this.isLoading = true
         // const { success, result, message } = Response
-
         this.cancelLastRequest()
+        this.isLoading = true
         const cancelToken = this.createCancelToken()
 
         const { success, result, message } = await getAction(
@@ -548,7 +549,6 @@ export default {
           },
           cancelToken
         )
-        console.log('%c [ result ]-243', 'font-size:13px; background:pink; color:#bf2c9f;', result)
         if (success) {
           this.dataProcess(result, 'file')
         } else {
@@ -557,7 +557,10 @@ export default {
         }
       } catch (error) {
         console.error(error)
-        this.isLoading = false
+        const isCancel = axios.isCancel(error)
+        if (!isCancel) {
+          this.isLoading = false
+        }
       }
     },
 
@@ -658,6 +661,8 @@ export default {
         baseLineCP: shapeEnergyData,
       }
 
+      console.log('%c [ this.channelData ]-664', 'font-size:13px; background:#9bcb26; color:#dfff6a;', this.channelData)
+
       this.resetThumbnailChartDataMax()
 
       // 设置 Spectrum Line
@@ -2190,5 +2195,6 @@ export default {
   pointer-events: none;
   background-color: #55a9fe;
   border-color: #55a9fe;
+  user-select: none;
 }
 </style>

src/views/spectrumAnalysis/index.vue

@@ -602,7 +602,6 @@ export default {
 
     // 加载选中的样本
     async loadSelectedSample(sample) {
-      console.log('%c [ sample ]-381', 'font-size:13px; background:pink; color:red;', sample)
       // B是beta-gamma  P G是gamma
       if (sample.sampleType == 'B') {
         this.analysisType = ANALYZE_TYPE.BETA_GAMMA