feat: 对接ColorConfig功能，完成Interactive Tools中的Fit功能，及切换回BaseLine的部分处理

src/api/manage.js

@@ -55,7 +55,7 @@ export function putAction(url,parameter) {
 }
 
 //get
-export function getAction(url,parameter) {
+export function getAction(url,parameter, cancelToken) {
   let sign = signMd5Utils.getSign(url, parameter);
   //将签名和时间戳，添加在请求接口 Header
   // update-begin--author:taoyan---date:20220421--for: VUEN-410【签名改造】 X-TIMESTAMP牵扯
@@ -66,7 +66,8 @@ export function getAction(url,parameter) {
     url: url,
     method: 'get',
     params: parameter,
-    headers: signHeader
+    headers: signHeader,
+    cancelToken
   })
 }
 

src/components/ColorPicker/index.vue

@@ -17,7 +17,7 @@ export default {
   props: {
     value: {
       type: Object,
-      default: () => ({ rgba: { r: 255, g: 255, b: 255 } })
+      required: true
     }
   },
   components: {

src/components/Custom3DChart/index.vue

@@ -1,88 +0,0 @@
-<template>
-  <div class="custom-chart" ref="containerRef" :style="{ height: height + 'px' }"></div>
-</template>
-<script>
-import * as echarts from 'echarts'
-import 'echarts-gl'
-
-const events = ['click', 'brushEnd']
-const zrEvents = ['mousemove', 'mousedown', 'mouseup', 'click']
-export default {
-  props: {
-    option: {
-      type: Object,
-      default: () => ({})
-    },
-    opts: {
-      type: Object,
-      default: () => {}
-    },
-    height: {
-      type: Number,
-      default: 0
-    }
-  },
-  data() {
-    return {}
-  },
-  mounted() {
-    this._chart = echarts.init(this.$refs.containerRef)
-    this._chart.setOption(this.option, this.opts)
-    this.initEventListener()
-  },
-  destroyed() {
-    if(this._chart) {
-      this._chart.dispose()
-    }
-  },
-  methods: {
-    initEventListener() {
-      events.forEach(eventName => {
-        this._chart.on(eventName, params => {
-          this.$emit(eventName, params)
-        })
-      })
-
-      const zr = this.getZRender()
-      zrEvents.forEach(eventName => {
-        zr.on(eventName, params => {
-          this.$emit(`zr:${eventName}`, params)
-        })
-      })
-    },
-
-    resize() {
-      this._chart && this._chart.resize()
-    },
-
-    // 获取echart实例
-    getChartInstance() {
-      return this._chart
-    },
-
-    getZRender() {
-      return this._chart.getZr()
-    }
-  },
-  watch: {
-    option: {
-      handler() {
-        if (this._chart) {
-          this._chart.setOption(this.option, this.opts)
-        }
-      },
-      deep: true
-    },
-    height() {
-      this.$nextTick(() => {
-        this._chart && this._chart.resize()
-      })
-    }
-  }
-}
-</script>
-<style lang="less" scoped>
-.custom-chart {
-  height: 100% !important;
-}
-</style>

src/components/CustomChart/index.vue

@@ -3,10 +3,10 @@
 </template>
 <script>
 import * as echarts from 'echarts'
+import 'echarts-gl'
 
-const events = ['brushEnd']
+const events = ['click', 'brushEnd']
 const zrEvents = ['mousemove', 'mousedown', 'mouseup', 'click']
-
 export default {
   props: {
     option: {

src/views/spectrumAnalysis/components/BetaGammaSpectrumChart.vue

@@ -15,7 +15,7 @@
     <div class="beta-gamma-spectrum-chart-main">
       <!-- 2D 图表，为了相应Unzoom采用的v-show -->
       <div class="_2d-chart" v-show="active == 0">
-        <Custom3DChart
+        <CustomChart
           ref="chartRef"
           :option="twoDOption"
           @zr:mousemove="handleMouseMove"
@@ -33,17 +33,17 @@
       <!-- 2D图表结束 -->
 
       <!-- 3D Surface开始 -->
-      <Custom3DChart v-if="active == 1" key="1" ref="_3dSurfaceRef" :option="threeDSurfaceOption" />
+      <CustomChart v-if="active == 1" key="1" ref="_3dSurfaceRef" :option="threeDSurfaceOption" />
       <!-- 3D Surface结束 -->
       <!-- 3D Scatter -->
-      <Custom3DChart v-if="active == 2" key="2" ref="_3dScannerRef" :option="threeDScatterOption" />
+      <CustomChart v-if="active == 2" key="2" ref="_3dScannerRef" :option="threeDScatterOption" />
       <!-- 3D Scatter结束 -->
     </div>
   </div>
 </template>
 
 <script>
-import Custom3DChart from '@/components/Custom3DChart/index.vue'
+import CustomChart from '@/components/CustomChart/index.vue'
 import ColorPalette from './ColorPalette.vue'
 import { getXAxisAndYAxisByPosition, rangeNumber } from '@/utils/chartHelper.js'
 
@@ -314,7 +314,7 @@ export default {
     }
   },
   components: {
-    Custom3DChart,
+    CustomChart,
     ColorPalette
   },
   data() {

src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal/components/NuclideReviewChart.vue

@@ -86,7 +86,7 @@ export default {
             type: 'line',
             data: pointlist.map(({ x, y }) => [x, y]),
             itemStyle: {
-              color: `rgb(${color})`
+              color
             },
             symbol: 'none',
             animation: false

src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal/index.vue

@@ -60,7 +60,7 @@
                   <a-button type="primary" @click="handleDel">Delete</a-button>
                 </div>
                 <div class="peak-box-item">
-                  <a-button type="primary" @click="handleFit">Fit</a-button>
+                  <a-button type="primary" :class="{ 'is-fitting': isFitting }" @click="handleFit">Fit</a-button>
                 </div>
 
                 <div class="peak-box-item symbol" :key="4">
@@ -96,7 +96,7 @@
                   <a-button type="primary" :disabled="isOperationStackEmpty" @click="handleUndo">Undo</a-button>
                 </div>
                 <div class="peak-box-item">
-                  <a-button type="primary">Replot</a-button>
+                  <a-button type="primary" @click="handleReplot">Replot</a-button>
                 </div>
                 <div class="peak-box-item">
                   <a-button type="primary" @click="handleAccept">Accept</a-button>
@@ -205,6 +205,7 @@ import { buildLineSeries, findSeriesByName, getXAxisAndYAxisByPosition, rangeNum
 import SampleDataMixin from '@/views/spectrumAnalysis/SampleDataMixin'
 import GeneralCommentModal from './components/GeneralCommentModal.vue'
 import EditSlopeModal from './components/EditSlopeModal.vue'
+import Response from './Response.json'
 
 // 初始配置
 const initialOption = {
@@ -452,6 +453,8 @@ export default {
       selectedTableItem: undefined, // 当前选中的表格项
 
       isModifying: false, // 正在修改控制点
+      isFitting: false, // 正在进行Fit操作
+      firstFittingChannel: null, // Fit操作时点击的第一个channel
 
       operationStack: [] // 操作记录
     }
@@ -475,6 +478,8 @@ export default {
           fileName: this.fileName
         })
 
+        // const { success, result, message } = Response
+
         if (success) {
           this.isLoading = false
           const {
@@ -504,7 +509,7 @@ export default {
             buildLineSeries(
               'BaseLine',
               channelBaseLineChart.pointlist.map(({ x, y }) => [x, y]),
-              `rgb(${channelBaseLineChart.color})`,
+              channelBaseLineChart.color,
               {
                 markLine: {
                   silent: true,
@@ -528,7 +533,7 @@ export default {
             buildLineSeries(
               'CountChart',
               channelCountChart.pointlist.map(({ x, y }) => [x, y]),
-              `rgb(${channelCountChart.color})`
+              channelCountChart.color
             )
           )
 
@@ -539,7 +544,7 @@ export default {
               buildLineSeries(
                 'Peak_' + (index + 1),
                 item.pointlist.map(({ x, y }) => [x, y]),
-                `rgb(${item.color})`
+                item.color
               )
             )
           })
@@ -584,25 +589,30 @@ export default {
       }
     },
 
-    beforeModalOpen() {
+    reset() {
-      const { sampleId, inputFileName } = this.sampleData
-      this.sampleId = sampleId
-      this.fileName = inputFileName
-
       this.currChannel = undefined
       this.btnGroupType = 1
-
-      this.getInfo()
       this.opts.notMerge = false
 
       this.option.graphic = []
 
+      this.isFitting = false
+
       this.$nextTick(() => {
         this.option.brush = { toolbox: [] }
         this.selectedKeys = []
       })
     },
 
+    beforeModalOpen() {
+      const { sampleId, inputFileName } = this.sampleData
+      this.sampleId = sampleId
+      this.fileName = inputFileName
+
+      this.getInfo()
+      this.reset()
+    },
+
     // 点击图表，设置红线，改变表格的选中项
     handleChartClick(param) {
       const { offsetX, offsetY } = param
@@ -642,6 +652,43 @@ export default {
         this.getSelPosNuclide(selectedRow)
 
         this.selectedTableItem = selectedRow
+
+        // 如果点击了Fit按钮
+        if (this.isFitting) {
+          this.handleFittingChannel(xAxis)
+        }
+      }
+    },
+
+    // 处理Fit中的两个channel
+    handleFittingChannel(channel) {
+      // 第一个channel存在，又点了一次，则是第二次点击
+      if (this.firstFittingChannel !== null) {
+        // 查找两个channel之间的Peak峰
+
+        let left = this.firstFittingChannel
+        let right = channel
+        if (left > right) {
+          right = left
+          left = channel
+        }
+
+        const peaksBetweenChannel = this.list.filter(peak => {
+          const centroidId = peak.peakCentroid
+          return centroidId >= left && centroidId <= right
+        })
+
+        if (!peaksBetweenChannel.length) {
+          this.$message.warn(`There are 0 peak between channel ${left} and ${right}`)
+          return
+        }
+
+        this.fitPeaksAndBaselineModalVisible = true
+
+        this.isFitting = false
+        this.firstFittingChannel = null
+      } else {
+        this.firstFittingChannel = channel
       }
     },
 
@@ -730,6 +777,8 @@ export default {
 
     // Insert按钮
     handleInsert() {
+      this.isFitting = false
+
       const xAxises = this.channelBaseCPChart.map(({ point: { x } }) => x)
       const min = xAxises[0]
       const max = xAxises[xAxises.length - 1]
@@ -774,7 +823,7 @@ export default {
         buildLineSeries(
           'BaseLine',
           channelBaseLineChart.pointlist.map(({ x, y }) => [x, y]),
-          `rgb(${channelBaseLineChart.color})`,
+          channelBaseLineChart.color,
           {
             markLine: {
               silent: true,
@@ -798,7 +847,7 @@ export default {
         buildLineSeries(
           'CountChart',
           this.channelCountChart.pointlist.map(({ x, y }) => [x, y]),
-          `rgb(${this.channelCountChart.color})`
+          this.channelCountChart.color
         )
       )
 
@@ -809,7 +858,7 @@ export default {
           buildLineSeries(
             'Peak_' + (index + 1),
             item.pointlist.map(({ x, y }) => [x, y]),
-            `rgb(${item.color})`
+            item.color
           )
         )
       })
@@ -859,7 +908,7 @@ export default {
         buildLineSeries(
           'BaseLine',
           this.channelBaseLineChart.pointlist.map(({ x, y }) => [x, y]),
-          `rgb(${this.channelBaseLineChart.color})`,
+          this.channelBaseLineChart.color,
           {
             markLine: {
               silent: true,
@@ -883,7 +932,7 @@ export default {
         buildLineSeries(
           'CountChart',
           this.channelCountChart.pointlist.map(({ x, y }) => [x, y]),
-          `rgb(${this.channelCountChart.color})`
+          this.channelCountChart.color
         )
       )
 
@@ -894,7 +943,7 @@ export default {
           buildLineSeries(
             'Peak_' + (index + 1),
             item.pointlist.map(({ x, y }) => [x, y]),
-            `rgb(${item.color})`
+            item.color
           )
         )
       })
@@ -926,14 +975,21 @@ export default {
 
     // 删除
     handleDel() {
+      this.isFitting = false
+
       if (!this.selectedKeys.length) {
         this.$message.warn('No peak to delete.')
         return
       }
 
-      this.$warning({
+      this.$confirm({
         title: 'Warning',
         content: 'Are you sure to delete this peak?',
+        cancelButtonProps: {
+          props: {
+            type: 'warn'
+          }
+        },
         onOk: async () => {
           // this.list.splice(findIndex, 1)
           // this.selectedKeys = []
@@ -956,7 +1012,6 @@ export default {
               curRow: this.curRow
             })
             if (success) {
-              console.log('%c [  ]-935', 'font-size:13px; background:pink; color:#bf2c9f;', result)
               const {
                 allData,
                 channelPeakChart,
@@ -983,7 +1038,7 @@ export default {
                 buildLineSeries(
                   'BaseLine',
                   this.channelBaseLineChart.pointlist.map(({ x, y }) => [x, y]),
-                  `rgb(${this.channelBaseLineChart.color})`,
+                  this.channelBaseLineChart.color,
                   {
                     markLine: {
                       silent: true,
@@ -1007,7 +1062,7 @@ export default {
                 buildLineSeries(
                   'CountChart',
                   this.channelCountChart.pointlist.map(({ x, y }) => [x, y]),
-                  `rgb(${this.channelCountChart.color})`
+                  this.channelCountChart.color
                 )
               )
 
@@ -1018,7 +1073,7 @@ export default {
                   buildLineSeries(
                     'Peak_' + (index + 1),
                     item.pointlist.map(({ x, y }) => [x, y]),
-                    `rgb(${item.color})`
+                    item.color
                   )
                 )
               })
@@ -1046,6 +1101,8 @@ export default {
 
               this.list = table
               this.option.series = series
+
+              this.selectedKeys = []
             } else {
               this.$message.error(message)
             }
@@ -1064,10 +1121,13 @@ export default {
 
     // 匹配
     handleFit() {
-      if (!this.list.length) {
+      if (!this.channelPeakChart || !this.channelPeakChart.length) {
         this.$message.warn('No peak to fit.')
         return
       }
+
+      this.isFitting = true
+      this.firstFittingChannel = null
     },
 
     // 表格的行点击
@@ -1210,14 +1270,19 @@ export default {
       else {
         this.btnGroupType = 1
         this.opts.notMerge = true
-        this.option.series.splice(this.option.series.length - 1, 1)
+        this.option.series.splice(this.option.series.length - 1, 1) // 去掉白色的基线副本
-        this.option.graphic = []
+        this.option.graphic = [] // 去掉移动控制点时的小方框
+
+        const baseLineEditSeries = findSeriesByName(this.option.series, 'BaseLine')
+        baseLineEditSeries.data = this.channelBaseLineChart.pointlist.map(({ x, y }) => [x, y]) // 恢复基线
+
         this.$nextTick(() => {
           this.resetChartOpts()
         })
       }
 
       this.isModifying = false
+      this.isFitting = false
       this.clearOperationStack()
     },
 
@@ -1407,10 +1472,12 @@ export default {
     // 撤销
     handleUndo() {
       this.setGraphicDraggable(false)
-
       this.popOperationStack()
     },
 
+    // 将原先的基线和控制点移动到新位置
+    handleReplot() {},
+
     // 确定对Baseline Control Points 的操作
     handleAccept() {},
 
@@ -1704,7 +1771,8 @@ export default {
   }
 }
 
-.is-modify {
+.is-modify,
+.is-fitting {
   color: #f00;
 }
 </style>

src/views/spectrumAnalysis/components/Modals/ColorConfigModal.vue

@@ -1,66 +1,69 @@
 <template>
-  <custom-modal v-model="visible" :width="700" title="Color Config">
+  <custom-modal v-model="visible" :width="700" title="Color Config" :okHandler="handleApply">
-    <div class="color-config">
+    <a-spin :spinning="isLoading">
-      <div class="color-config-item" v-for="(item, index) in configList" :key="index">
+      <div class="color-config">
-        <div class="title">{{ item.title }}</div>
+        <div class="color-config-item" v-for="(item, index) in configList" :key="index">
-        <color-picker v-model="config[item.key]">
+          <div class="title">{{ item.title }}</div>
-          <div class="color-picker-picker" :style="{ background: combineRGBA(config[item.key]) }"></div>
+          <color-picker v-model="config[item.key]">
-        </color-picker>
+            <div class="color-picker-picker" :style="{ background: combineRGBA(config[item.key]) }"></div>
+          </color-picker>
 
-        <div class="desc">{{ item.desc }}</div>
+          <div class="desc">{{ item.desc }}</div>
+        </div>
       </div>
-    </div>
+    </a-spin>
   </custom-modal>
 </template>
 
 <script>
 import ModalMixin from '@/mixins/ModalMixin'
 import ColorPicker from '@/components/ColorPicker/index.vue'
+import { getAction, putAction } from '@/api/manage'
 
 const configList = [
   {
     title: 'Spectrum Line',
-    key: 'spectrumLine',
+    key: 'Color_Spec',
     desc: 'Color of the original spectrum line'
   },
   {
     title: 'Baseline',
-    key: 'baseline',
+    key: 'Color_Base',
     desc: 'Color of baseline'
   },
   {
     title: 'Lc Line',
-    key: 'lcLine',
+    key: 'Color_Lc',
     desc: 'Color of lc line'
   },
   {
     title: 'Scac Line',
-    key: 'scacLine',
+    key: 'Color_Scac',
     desc: 'Color of scac line'
   },
   {
     title: 'Peak Line',
-    key: 'peakLine',
+    key: 'Color_Peak',
     desc: "Color of all peaks' curve"
   },
   {
     title: 'Compare Line',
-    key: 'compareLine',
+    key: 'Color_Compare',
     desc: 'Color of another spectrum line which is used to compare with current spectrum'
   },
   {
-    title: 'Spect Sum Line',
+    title: 'Spec Sum Line',
-    key: 'spectSumLine',
+    key: 'Color_Strip',
     desc: 'Color of the line which is the sum of current spectrum and other spectrum Multiplied by a ratio'
   },
   {
-    title: 'Spect Cut Line',
+    title: 'Spec Cut Line',
     key: 'spectCutLine',
     desc: 'Color of the line which is the difference of current spectrum and other spectrum Multiplied by a ratio'
   },
   {
     title: 'FitBase Line',
-    key: 'fitBaseLine',
+    key: 'Color_Fitbase',
     desc: 'Color of the base line in edit state'
   }
 ]
@@ -73,21 +76,79 @@ export default {
     this.configList = configList
     return {
       config: {
-        spectrumLine: { rgba: { r: 255, g: 255, b: 0 } },
+        Color_Spec: { hex: 'yellow' }, // Spectrum 颜色
-        baseline: { rgba: { r: 0, g: 246, b: 255 } },
+        Color_Base: { hex: 'rgb(0, 246, 255)' }, // 基线颜色
-        lcLine: { rgba: { r: 255, g: 0, b: 0 } },
+        Color_Lc: { hex: 'red' }, // LC 颜色
-        scacLine: { rgba: { r: 244, g: 112, b: 247 } },
+        Color_Scac: { hex: 'rgb(244, 112, 247)' }, // Scac 颜色
-        peakLine: { rgba: { r: 255, g: 127, b: 39 } },
+        Color_Peak: { hex: 'rgb(255, 127, 39)' }, // Peak 颜色
-        compareLine: { rgba: { r: 0, g: 255, b: 0 } },
+        Color_Compare: { hex: 'green' }, // Sample -> Compare下的颜色
-        spectSumLine: { rgba: { r: 0, g: 0, b: 255 } },
+        Color_Strip: { hex: 'rgb(0, 0, 255)' }, // Sample -> Compare下的颜色
-        spectCutLine: { rgba: { r: 34, g: 90, b: 106 } },
+        spectCutLine: { hex: 'rgb(33, 90, 104)' }, // 无作用
-        fitBaseLine: { rgba: { r: 255, g: 255, b: 255 } }
+        Color_Fitbase: { hex: 'white' } // Interactive Tool 弹窗中，进入BaseLine编辑模式时的基线副本的颜色
       }
     }
   },
   methods: {
-    combineRGBA({ rgba: { r, g, b} }) {
+    combineRGBA({ hex }) {
-      return `rgb(${r}, ${g}, ${b})`
+      return hex
+    },
+
+    async getData() {
+      try {
+        this.isLoading = true
+        const { success, result, message } = await getAction('/gamma/viewColorConfig')
+        if (success) {
+          Object.entries(result).forEach(([k, v]) => {
+            this.config[k].hex = v
+          })
+        } else {
+          this.$message.error(message)
+        }
+      } catch (error) {
+        console.error(error)
+      } finally {
+        this.isLoading = false
+      }
+    },
+
+    beforeModalOpen() {
+      this.getData()
+    },
+
+    // 应用颜色
+    async handleApply() {
+      const {
+        Color_Spec,
+        Color_Peak,
+        Color_Lc,
+        Color_Base,
+        Color_Scac,
+        Color_Compare,
+        Color_Strip,
+        Color_Fitbase
+      } = this.config
+      const { success, message } = await putAction('/gamma/updateColorConfig', {
+        colorSpec: Color_Spec.hex,
+        colorPeak: Color_Peak.hex,
+        colorLc: Color_Lc.hex,
+        colorBase: Color_Base.hex,
+        colorScac: Color_Scac.hex,
+        colorCompare: Color_Compare.hex,
+        colorFitbase: Color_Fitbase.hex,
+        colorStrip: Color_Strip.hex
+      })
+      if (success) {
+        this.$bus.$emit(
+          'colorChange',
+          Object.entries(this.config).reduce((prev, [key, value]) => {
+            prev[key] = value.hex
+            return prev
+          }, {})
+        )
+      } else {
+        this.$message.error(message)
+        throw new Error(message)
+      }
     }
   }
 }
@@ -119,4 +180,9 @@ export default {
     }
   }
 }
+
+.footer {
+  display: flex;
+  justify-content: space-between;
+}
 </style>

src/views/spectrumAnalysis/components/Modals/EfficiencyCalibrationModal.vue

@@ -305,7 +305,7 @@ export default {
           buildLineSeries(
             'LineSeries',
             linePoint.pointlist.map(({ x, y }) => [x, y]),
-            `rgb(${linePoint.color})`
+            linePoint.color
           )
         )
         series.push({

src/views/spectrumAnalysis/components/Modals/EnergyCalibrationModal.vue

@@ -266,7 +266,7 @@ export default {
           buildLineSeries(
             'LineSeries',
             linePoint.pointlist.map(({ x, y }) => [x, y]),
-            `rgb(${linePoint.color})`
+            linePoint.color
           )
         )
         series.push({

src/views/spectrumAnalysis/components/Modals/ResolutionCalibrationModal.vue

@@ -266,7 +266,7 @@ export default {
           buildLineSeries(
             'LineSeries',
             linePoint.pointlist.map(({ x, y }) => [x, y]),
-            `rgb(${linePoint.color})`
+            linePoint.color
           )
         )
         series.push({

src/views/spectrumAnalysis/components/SubOperators/GraphAssistance.vue

@@ -20,6 +20,8 @@
 </template>
 
 <script>
+import { cloneDeep } from 'lodash'
+
 const items = [
   {
     label: ['Linear', 'Log10'],
@@ -56,7 +58,7 @@ const items = [
 export default {
   data() {
     return {
-      items
+      items: cloneDeep(items)
     }
   },
   methods: {

src/views/spectrumAnalysis/gamma-analysis.vue

@@ -32,9 +32,10 @@
       <!-- 主体部分 -->
       <div class="gamma-analysis-main">
         <div class="gamma-analysis-chart">
-          <custom-3d-chart
+          <CustomChart
             ref="chartRef"
             :option="option"
+            :opts="opts"
             @zr:click="handleChartClick"
             @zr:mousedown="handleMouseDown"
             @zr:mouseup="handleMouseUp"
@@ -43,7 +44,7 @@
           />
           <!-- 右上角缩略图 -->
           <div class="gamma-analysis-thumbnail">
-            <custom-3d-chart
+            <CustomChart
               ref="thumbnailChartRef"
               :option="thumbnailOption"
               @zr:click="handleThumbnailChartClick"
@@ -72,7 +73,7 @@
 </template>
 
 <script>
-import Custom3dChart from '@/components/Custom3DChart/index.vue'
+import CustomChart from '@/components/CustomChart/index.vue'
 import PopOverWithIcon from './components/SubOperators/PopOverWithIcon.vue'
 import DetailedInfomation from './components/SubOperators/DetailedInfomation.vue'
 import QcFlags from './components/SubOperators/QcFlags.vue'
@@ -81,8 +82,9 @@ import NuclearLibrary from './components/SubOperators/NuclearLibrary.vue'
 import ButtonWithSwitchIcon from './components/SubOperators/ButtonWithSwitchIcon.vue'
 import { getAction } from '@/api/manage'
 import Response from './response.json'
-import { buildLineSeries, getXAxisAndYAxisByPosition, rangeNumber } from '@/utils/chartHelper'
+import { buildLineSeries, findSeriesByName, getXAxisAndYAxisByPosition, rangeNumber } from '@/utils/chartHelper'
 import { cloneDeep } from 'lodash'
+import axios from 'axios'
 
 // 初始配置
 const initialOption = {
@@ -225,6 +227,13 @@ const thumbnailOption = {
   series: []
 }
 
+const graphAssistance = {
+  axisType: 'Channel',
+  Baseline: true,
+  SCAC: true,
+  Lc: true
+}
+
 export default {
   props: {
     sample: {
@@ -232,7 +241,7 @@ export default {
     }
   },
   components: {
-    Custom3dChart,
+    CustomChart,
     PopOverWithIcon,
     DetailedInfomation,
     QcFlags,
@@ -244,11 +253,14 @@ export default {
     return {
       isLoading: false,
       option: cloneDeep(initialOption),
+      opts: {
+        notMerge: false
+      },
       thumbnailOption: cloneDeep(thumbnailOption),
 
       detailedInfomation: [],
       qcFlags: [],
-      graphAssistance: {},
+      graphAssistance: cloneDeep(graphAssistance),
 
       channelPeakGroup: [],
       energyPeakGroup: [],
@@ -265,6 +277,16 @@ export default {
   },
   created() {
     this.option.title.text = '{a|Channel:0} {a|Energy:0} {a|Counts:0} {a|Detectability:0}'
+    this.$bus.$on('colorChange', colorConfig => {
+      // 如果还没加载完，加载新的
+      if (this.isLoading) {
+        this.getSampleDetail()
+      }
+      // 否则修改已有颜色
+      else {
+        this.changeColor(colorConfig)
+      }
+    })
   },
   mounted() {
     this.option.brush = { toolbox: [] }
@@ -274,13 +296,27 @@ export default {
       const { dbName, sampleId } = this.sample
       try {
         this.isLoading = true
-        this.option.series = []
+
-        this.thumbnailOption.series = []
+        this.reset()
+
         // const { success, result, message } = Response
-        const { success, result, message } = await getAction('/gamma/gammaByDB', {
+
-          dbName,
+        if (this._cancelToken && typeof this._cancelToken == 'function') {
-          sampleId
+          this._cancelToken()
+        }
+
+        const cancelToken = new axios.CancelToken(c => {
+          this._cancelToken = c
         })
+
+        const { success, result, message } = await getAction(
+          '/gamma/gammaByDB',
+          {
+            dbName,
+            sampleId
+          },
+          cancelToken
+        )
         console.log('%c [ result ]-243', 'font-size:13px; background:pink; color:#bf2c9f;', result)
         if (success) {
           this.isLoading = false
@@ -357,7 +393,7 @@ export default {
             buildLineSeries(
               'Spectrum',
               shadowChannelChart.pointlist.map(({ x, y }) => [x, y]),
-              `rgb(${shadowChannelChart.color})`,
+              shadowChannelChart.color,
               {
                 markLine: {
                   silent: true,
@@ -380,7 +416,7 @@ export default {
             buildLineSeries(
               'Spectrum',
               shadowChannelChart.pointlist.map(({ x, y }) => [x, y]),
-              `rgb(${shadowChannelChart.color})`,
+              shadowChannelChart.color,
               {
                 silent: true,
                 markLine: {
@@ -405,7 +441,7 @@ export default {
             buildLineSeries(
               'BaseLine',
               channelBaseLine.pointlist.map(({ x, y }) => [x, y]),
-              `rgb(${channelBaseLine.color})`,
+              channelBaseLine.color,
               {
                 zlevel: 2
               }
@@ -417,7 +453,7 @@ export default {
             buildLineSeries(
               'LcLine',
               channelLcLine.pointlist.map(({ x, y }) => [x, y]),
-              `rgb(${channelLcLine.color})`,
+              channelLcLine.color,
               {
                 zlevel: 3
               }
@@ -429,7 +465,7 @@ export default {
             buildLineSeries(
               'ScacLine',
               channelScacLine.pointlist.map(({ x, y }) => [x, y]),
-              `rgb(${channelScacLine.color})`,
+              channelScacLine.color,
               {
                 zlevel: 4
               }
@@ -464,7 +500,7 @@ export default {
               buildLineSeries(
                 `Peak_${index}`,
                 item.pointlist.map(({ x, y }) => [x, y]),
-                `rgb(${item.color})`,
+                item.color,
                 {
                   zlevel: 6
                 }
@@ -586,7 +622,7 @@ export default {
 
     // 根据seriesName重绘线
     redrawLineBySeriesName(seriesName, energyData, channelData, isShow = true) {
-      const series = this.findSeriesByName(seriesName)
+      const series = findSeriesByName(this.option.series, seriesName)
       if (isShow) {
         const data = this.isEnergy() ? energyData : channelData
         series.data = data.pointlist.map(({ x, y }) => [x, y])
@@ -597,7 +633,7 @@ export default {
 
     // 重绘控制点
     redrawCtrlPointBySeriesName() {
-      const series = this.findSeriesByName('BaseLine_Ctrl_Point')
+      const series = findSeriesByName(this.option.series, 'BaseLine_Ctrl_Point')
       const data = this.isEnergy() ? this.shapeEnergyData : this.shapeChannelData
       series.data = data.map(({ size, color, point: { x, y } }) => {
         return {
@@ -614,7 +650,7 @@ export default {
     // 重绘Peak Line
     redrawPeakLine() {
       this.option.series = this.option.series.filter(item => {
-        return -1 == item.name.indexOf('Peak_')
+        return -1 == item.name.includes('Peak_')
       })
 
       const data = this.isEnergy() ? this.energyPeakGroup : this.channelPeakGroup
@@ -624,7 +660,7 @@ export default {
           buildLineSeries(
             `Peak_${index}`,
             item.pointlist.map(({ x, y }) => [x, y]),
-            `rgb(${item.color})`,
+            item.color,
             {
               zlevel: 6
             }
@@ -705,7 +741,6 @@ export default {
         const min = Math.min(...allX)
         return channel >= min && channel <= max
       })
-      console.log('%c [ index ]-732', 'font-size:13px; background:pink; color:#bf2c9f;', index)
       if (-1 !== index) {
         this.getPeakInfo(index)
       } else {
@@ -731,7 +766,6 @@ export default {
           const chart = this.$refs.chartRef.getChartInstance()
 
           const [xPix, yPix] = chart.convertToPixel({ seriesIndex: 0 }, [x, y])
-          console.log('%c [ xPix, yPix ]-731', 'font-size:13px; background:pink; color:#bf2c9f;', xPix, yPix)
           this.peakInfomationTooltip.content = html
           this.peakInfomationTooltip.visible = true
           this.peakInfomationTooltip.left = xPix
@@ -952,7 +986,6 @@ export default {
 
     // 从分析工具刷新部分数据
     refresh(data) {
-      console.log('%c [ data ]-892', 'font-size:13px; background:pink; color:#bf2c9f;', data)
       const { allData, shadowChannelChart, shadowEnergyChart, shapeChannelData, shapeEnergyData } = data
 
       const channelPeakGroup = allData.filter(item => item.name == 'Peak' && item.group == 'channel')
@@ -994,6 +1027,7 @@ export default {
       this.shapeChannelData = shapeChannelData
       this.shapeEnergyData = shapeEnergyData
 
+      this.opts.notMerge = true
       this.redrawPeakLine()
       this.redrawCtrlPointBySeriesName()
 
@@ -1003,11 +1037,15 @@ export default {
       this.redrawLineBySeriesName('Spectrum', this.shadowEnergyChart, this.shadowChannelChart)
 
       this.redrawThumbnailChart()
+      this.$nextTick(() => {
+        this.resetChartOpts()
+      })
     },
 
-    // 根据name查找series
+    // 重置图表配置
-    findSeriesByName(seriesName) {
+    resetChartOpts() {
-      return this.option.series.find(item => item.name == seriesName)
+      this.opts.notMerge = false
+      this.option.brush = { toolbox: [] }
     },
 
     /**
@@ -1048,6 +1086,77 @@ export default {
       this.selectedChannel = -1
       this.nuclideLibraryList = []
       this.closePeakInfomationTooltip()
+      this.option.series = []
+      this.thumbnailOption.series = []
+      this.option.xAxis.name = 'Channel'
+      this.option.yAxis.type = 'value'
+
+      if (this.option.series.length) {
+        this.option.series[0].type = 'line'
+        this.option.series[0].symbol = 'none'
+        this.option.series[0].markLine.lineStyle.width = 2
+      }
+
+      if (this.thumbnailOption.series.length) {
+        this.thumbnailOption.series[0].type = 'line'
+        this.thumbnailOption.series[0].symbol = 'none'
+      }
+      this.graphAssistance = cloneDeep(graphAssistance)
+    },
+
+    // 修改颜色
+    changeColor(colorConfig) {
+      const {
+        Color_Spec,
+        Color_Peak,
+        Color_Lc,
+        Color_Base,
+        Color_Scac,
+        Color_Compare,
+        Color_Strip,
+        Color_Fitbase
+      } = colorConfig
+
+      this.shadowChannelChart.color = Color_Spec
+      this.shadowEnergyChart.color = Color_Spec
+
+      for (let i = 0; i < this.channelPeakGroup.length; i++) {
+        this.channelPeakGroup[i].color = Color_Peak
+        this.energyPeakGroup[i].color = Color_Peak
+      }
+
+      this.channelLcLine.color = Color_Lc
+      this.energyLcLine.color = Color_Lc
+
+      this.channelBaseLine.color = Color_Base
+      this.energyBaseLine.color = Color_Base
+
+      this.channelScacLine.color = Color_Scac
+      this.energyScacLine.color = Color_Scac
+
+      this.changeColorBySeriesName('Spectrum', Color_Spec)
+      this.changePeakLineColor(Color_Peak)
+      this.changeColorBySeriesName('LcLine', Color_Lc)
+      this.changeColorBySeriesName('BaseLine', Color_Base)
+      this.changeColorBySeriesName('ScacLine', Color_Scac)
+
+      const thumbnailChartSeries = findSeriesByName(this.thumbnailOption.series, 'Spectrum')
+      thumbnailChartSeries.itemStyle.color = Color_Spec
+    },
+
+    // 根据series名修改颜色
+    changeColorBySeriesName(seriesName, color) {
+      const series = findSeriesByName(this.option.series, seriesName)
+      series.itemStyle.color = color
+    },
+
+    // 改变Peak的颜色
+    changePeakLineColor(color) {
+      this.option.series
+        .filter(item => item.name.includes('Peak_'))
+        .forEach(item => {
+          item.itemStyle.color = color
+        })
     },
 
     isEnergy() {
@@ -1057,7 +1166,6 @@ export default {
   watch: {
     sample: {
       handler() {
-        this.reset()
         this.getSampleDetail()
       },
       immediate: true