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

2023-09-13 19:42:28 +08:00 · 2023-09-13 19:42:28 +08:00 · 1c16157a27
commit 1c16157a27
parent 5ae9115577
14 changed files with 262843 additions and 189 deletions
--- a/src/api/manage.js
+++ b/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
  })
 }

--- a/src/components/ColorPicker/index.vue
+++ b/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: {
--- a/src/components/Custom3DChart/index.vue
+++ b/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>
--- a/src/components/CustomChart/index.vue
+++ b/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: {
--- a/src/views/spectrumAnalysis/components/BetaGammaSpectrumChart.vue
+++ b/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() {
--- a/src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal/Response.json
+++ b/src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal/Response.json
--- a/src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal/components/NuclideReviewChart.vue
+++ b/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
--- a/src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal/index.vue
+++ b/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() {
-      const { sampleId, inputFileName } = this.sampleData
-      this.sampleId = sampleId
-      this.fileName = inputFileName
-
+    reset() {
      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.graphic = []
+        this.option.series.splice(this.option.series.length - 1, 1) // 去掉白色的基线副本
+        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>
--- a/src/views/spectrumAnalysis/components/Modals/ColorConfigModal.vue
+++ b/src/views/spectrumAnalysis/components/Modals/ColorConfigModal.vue
@ -1,66 +1,69 @@
 <template>
-  <custom-modal v-model="visible" :width="700" title="Color Config">
-    <div class="color-config">
-      <div class="color-config-item" v-for="(item, index) in configList" :key="index">
-        <div class="title">{{ item.title }}</div>
-        <color-picker v-model="config[item.key]">
-          <div class="color-picker-picker" :style="{ background: combineRGBA(config[item.key]) }"></div>
-        </color-picker>
+  <custom-modal v-model="visible" :width="700" title="Color Config" :okHandler="handleApply">
+    <a-spin :spinning="isLoading">
+      <div class="color-config">
+        <div class="color-config-item" v-for="(item, index) in configList" :key="index">
+          <div class="title">{{ item.title }}</div>
+          <color-picker v-model="config[item.key]">
+            <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',
-    key: 'spectSumLine',
+    title: 'Spec Sum Line',
+    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 } },
-        baseline: { rgba: { r: 0, g: 246, b: 255 } },
-        lcLine: { rgba: { r: 255, g: 0, b: 0 } },
-        scacLine: { rgba: { r: 244, g: 112, b: 247 } },
-        peakLine: { rgba: { r: 255, g: 127, b: 39 } },
-        compareLine: { rgba: { r: 0, g: 255, b: 0 } },
-        spectSumLine: { rgba: { r: 0, g: 0, b: 255 } },
-        spectCutLine: { rgba: { r: 34, g: 90, b: 106 } },
-        fitBaseLine: { rgba: { r: 255, g: 255, b: 255 } }
+        Color_Spec: { hex: 'yellow' }, // Spectrum 颜色
+        Color_Base: { hex: 'rgb(0, 246, 255)' }, // 基线颜色
+        Color_Lc: { hex: 'red' }, // LC 颜色
+        Color_Scac: { hex: 'rgb(244, 112, 247)' }, // Scac 颜色
+        Color_Peak: { hex: 'rgb(255, 127, 39)' }, // Peak 颜色
+        Color_Compare: { hex: 'green' }, // Sample -> Compare下的颜色
+        Color_Strip: { hex: 'rgb(0, 0, 255)' }, // Sample -> Compare下的颜色
+        spectCutLine: { hex: 'rgb(33, 90, 104)' }, // 无作用
+        Color_Fitbase: { hex: 'white' } // Interactive Tool 弹窗中，进入BaseLine编辑模式时的基线副本的颜色
      }
    }
  },
  methods: {
-    combineRGBA({ rgba: { r, g, b} }) {
-      return `rgb(${r}, ${g}, ${b})`
+    combineRGBA({ hex }) {
+      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>
--- a/src/views/spectrumAnalysis/components/Modals/EfficiencyCalibrationModal.vue
+++ b/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({
--- a/src/views/spectrumAnalysis/components/Modals/EnergyCalibrationModal.vue
+++ b/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({
--- a/src/views/spectrumAnalysis/components/Modals/ResolutionCalibrationModal.vue
+++ b/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({
--- a/src/views/spectrumAnalysis/components/SubOperators/GraphAssistance.vue
+++ b/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: {
--- a/src/views/spectrumAnalysis/gamma-analysis.vue
+++ b/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,
-          sampleId
+
+        if (this._cancelToken && typeof this._cancelToken == 'function') {
+          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) {
-      return this.option.series.find(item => item.name == seriesName)
+    // 重置图表配置
+    resetChartOpts() {
+      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