fix: 完成AnalyzeInteractiveTool弹窗中的部分操作，修改刷选操作以解决Log10下选框表现不正确的问题，对接Comments下的View中的接口，对接Energy Calibration接口

src/components/Custom3DChart/index.vue

@@ -13,6 +13,10 @@ export default {
       type: Object,
       default: () => ({})
     },
+    opts: {
+      type: Object,
+      default: () => {}
+    },
     height: {
       type: Number,
       default: 0
@@ -23,7 +27,7 @@ export default {
   },
   mounted() {
     this._chart = echarts.init(this.$refs.containerRef)
-    this._chart.setOption(this.option)
+    this._chart.setOption(this.option, this.opts)
     this.initEventListener()
   },
   destroyed() {
@@ -64,7 +68,7 @@ export default {
     option: {
       handler() {
         if (this._chart) {
-          this._chart.setOption(this.option)
+          this._chart.setOption(this.option, this.opts)
         }
       },
       deep: true

src/components/CustomChart/index.vue

@@ -13,9 +13,9 @@ export default {
       type: Object,
       default: () => ({})
     },
-    notMerge: {
+    opts: {
-      type: Boolean,
+      type: Object,
-      default: false
+      default: () => {}
     },
     height: {
       type: Number,
@@ -27,7 +27,7 @@ export default {
   },
   mounted() {
     this._chart = echarts.init(this.$refs.containerRef)
-    this._chart.setOption(this.option)
+    this._chart.setOption(this.option, this.opts)
     this.initEventListener()
   },
   destroyed() {
@@ -68,9 +68,7 @@ export default {
     option: {
       handler() {
         if (this._chart) {
-          this._chart.setOption(this.option, {
+          this._chart.setOption(this.option, this.opts)
-            notMerge: this.notMerge
-          })
         }
       },
       deep: true

src/components/CustomTable/index.vue

@@ -53,6 +53,10 @@ export default {
       type: Boolean,
       default: true
     },
+    canDeselect: {
+      type: Boolean,
+      default: true
+    },
     multiple: {
       type: Boolean,
       default: false
@@ -66,7 +70,7 @@ export default {
   },
   methods: {
     // 实现单击选中/反选功能
-    customRow(record) {
+    customRow(record, index) {
       const key = record[this.rowKey]
       return {
         class: this.innerSelectedRowKeys.includes(key) ? 'ant-table-row-selected' : '',
@@ -75,10 +79,15 @@ export default {
             if(!this.canSelect) {
               return
             }
+            // 反选
             if (this.innerSelectedRowKeys.includes(key)) {
+               if(this.multiple || this.canDeselect) {
                 const findIndex = this.innerSelectedRowKeys.findIndex(k => k == key)
                 this.innerSelectedRowKeys.splice(findIndex, 1)
-            } else {
+               }
+            } 
+            // 选中
+            else {
               if(this.multiple) {
                 this.innerSelectedRowKeys.push(key)
               }
@@ -86,6 +95,8 @@ export default {
                 this.innerSelectedRowKeys = [key]
               }
             }
+
+            this.$emit('rowClick', record, index)
           }
         }
       }

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

@@ -1,11 +1,18 @@
 <template>
-  <custom-modal v-model="visible" :width="1280" title="Interactive Analyse Tools" :footer="null">
+  <custom-modal v-model="visible" :width="1280" title="Interactive Analyse Tools" :footer="null" destroy-on-close>
+    <a-spin :spinning="isLoading">
       <div class="interactive-analysis-tools">
         <div class="interactive-analysis-tools-left">
           <div class="chart">
-          <custom-chart :option="option" />
+            <CustomChart ref="chartRef" :option="option" :opts="opts" @zr:click="handleChartClick" />
           </div>
-        <div class="thumbnail"></div>
+          <!-- 缩略图 -->
+          <div class="thumbnail">
+            <CustomChart :option="thumbnailOption" />
+          </div>
+          <!-- 缩略图结束 -->
+
+          <!-- 表格 -->
           <div class="table">
             <p class="title">
               <span @click="handleChangeMarkLine('prev')">&lt; </span>
@@ -18,6 +25,9 @@
               :columns="columns"
               :scroll="{ y: 288 }"
               :selectedRowKeys.sync="selectedKeys"
+              rowKey="index"
+              :canDeselect="false"
+              @rowClick="handleTableRowClick"
             >
             </custom-table>
             <div class="operators">
@@ -26,7 +36,10 @@
               <a-button type="primary" @click="handleAddComment('General')">Add General Comment</a-button>
             </div>
           </div>
+          <!-- 表格结束 -->
         </div>
+
+        <!-- 右侧 -->
         <div class="interactive-analysis-tools-right">
           <title-over-border title="Peak">
             <div class="peak-box">
@@ -36,7 +49,7 @@
                   <a-button type="primary">Insert</a-button>
                 </div>
                 <div class="peak-box-item">
-                <a-button type="primary">Delete</a-button>
+                  <a-button type="primary" @click="handleDel">Delete</a-button>
                 </div>
                 <div class="peak-box-item">
                   <a-button type="primary">Fit</a-button>
@@ -106,14 +119,15 @@
                 <a-space>
                   <a-input></a-input>
                   <a-button type="primary">Add</a-button>
-                <a-button type="primary" @click="handleDel">Del</a-button>
+                  <a-button type="primary">Del</a-button>
                 </a-space>
               </div>
             </title-over-border>
           </div>
         </div>
+        <!-- 右侧结束 -->
       </div>
-
+    </a-spin>
     <!-- Comment弹窗 开始 -->
     <comment-modal v-model="commentModalVisible" :type="commentType" />
     <!-- Comment弹窗 结束 -->
@@ -134,91 +148,110 @@ import FitPeaksAndBaseLineModal from './components/FitPeaksAndBaselineModal.vue'
 import NuclideReviewModal from './components/NuclideReviewModal.vue'
 import ModalMixin from '@/mixins/ModalMixin'
 import { getAction } from '@/api/manage'
+import { cloneDeep } from 'lodash'
+import Response from './Response.json'
+import { getXAxisAndYAxisByPosition } from '@/utils/chartHelper'
 
+// 初始配置
 const initialOption = {
   grid: {
-    top: 20,
+    top: 40,
-    bottom: 20,
+    left: 60,
-    left: 100,
+    right: 50,
-    right: 20
+    containLabel: true
+  },
+  title: {
+    text: '',
+    left: 'center',
+    bottom: 10,
+    textStyle: {
+      color: '#8FD4F8',
+      rich: {
+        a: {
+          padding: [0, 20, 0, 0],
+          fontSize: 16
+        }
+      }
+    }
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      lineStyle: {
+        color: '#3CAEBB',
+        width: 1
+      }
+    },
+    formatter: params => {
+      const [channel] = params[0].value
+      return `<div class="channel">Channel: ${channel}</div>
+              <div class="energy">Energy: ${(0).toFixed(2)}</div>`
+    },
+    className: 'figure-chart-option-tooltip'
   },
   xAxis: {
-    min: 1,
+    name: 'Channel',
-    max: 8192,
+    nameTextStyle: {
-    interval: 1143,
+      color: '#8FD4F8',
-    axisLabel: {
+      fontSize: 16,
-      color: '#fff'
+      align: 'right',
+      verticalAlign: 'top',
+      padding: [30, 0, 0, 0]
+    },
+    axisLine: {
+      lineStyle: {
+        color: '#ade6ee'
+      }
     },
     splitLine: {
       show: false
     },
-    axisTick: {
+    axisLabel: {
-      show: false
+      textStyle: {
+        color: '#ade6ee'
       }
     },
+    min: 1,
+    max: 'dataMax',
+    animation: false
+  },
   yAxis: {
-    min: 1,
-    max: 994914,
-    axisLabel: {
-      color: '#fff'
-    },
     name: 'Counts',
-    nameLocation: 'center',
-    nameGap: 60,
     nameTextStyle: {
-      fontSize: 16,
+      color: '#8FD4F8',
-      color: '#5b9cba'
+      fontSize: 16
+    },
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: '#ade6ee'
+      }
     },
     splitLine: {
-      show: false
+      show: true,
-    },
-    axisTick: {
-      show: false
-    }
-  },
-  series: [
-    {
-      type: 'line',
-      data: [],
-      itemStyle: {
-        color: '#FCFE02'
-      },
-      markLine: {
-        data: [
-          {
-            xAxis: 1000
-          }
-        ],
-        symbol: 'none',
       lineStyle: {
-          color: '#f00'
+        color: 'rgba(173, 230, 238, .2)'
-        },
-        label: {
-          show: false
-        }
       }
     },
-    {
+    axisLabel: {
-      type: 'line',
+      textStyle: {
-      data: [],
+        color: '#ade6ee'
-      itemStyle: {
-        color: '#F87E28'
       }
     },
-    {
+    min: 1,
-      type: 'line',
+    max: 'dataMax',
-      data: [],
+    animation: false
-      itemStyle: {
+  },
-        color: '#01F6FE'
+  series: [],
-      }
+  brush: {}
-    }
-  ]
 }
 
 const columns = [
   {
     title: 'ID',
-    dataIndex: 'id',
+    customRender: (_, __, index) => {
+      return index + 1
+    },
     width: 60
   },
   {
@@ -258,6 +291,43 @@ const columns = [
   }
 ]
 
+// 缩略图配置
+const thumbnailOption = {
+  grid: {
+    top: 0,
+    left: 5,
+    right: 5,
+    bottom: 0
+  },
+  xAxis: {
+    type: 'category',
+    axisLine: {
+      show: false
+    },
+    splitLine: {
+      show: false
+    },
+    axisLabel: {
+      show: false
+    },
+    min: 1,
+    max: 'dataMax'
+  },
+  yAxis: {
+    type: 'value',
+    axisLine: {
+      show: false
+    },
+    splitLine: {
+      show: false
+    },
+    axisLabel: {
+      show: false
+    },
+    min: 1
+  },
+  series: []
+}
 export default {
   mixins: [ModalMixin],
   components: {
@@ -269,15 +339,19 @@ export default {
   },
   props: {
     sampleId: {
-      type: Number,
+      type: Number
-      required: true
     }
   },
   data() {
     this.columns = columns
     return {
-      option: initialOption,
+      option: cloneDeep(initialOption),
+      opts: { notMerge: false },
+      thumbnailOption: cloneDeep(thumbnailOption),
+
+      isLoading: false,
       list: [],
+
       commentModalVisible: false, // Comment 弹窗是否显示
       commentType: 'Peak',
 
@@ -292,11 +366,104 @@ export default {
   methods: {
     async getInfo() {
       try {
+        this.isLoading = true
+        this.option.series = []
+
         const { success, result, message } = await getAction('/gamma/InteractiveTool', {
           sampleId: this.sampleId
         })
         if (success) {
-          console.log('%c [  ]-300', 'font-size:13px; background:pink; color:#bf2c9f;', result)
+          const {
+            barChart,
+            channelBaseCPChart,
+            channelBaseLineChart,
+            channelCountChart,
+            channelPeakChart,
+            table
+          } = result
+          this.isLoading = false
+
+          console.log('%c [  ]-374', 'font-size:13px; background:pink; color:#bf2c9f;', result)
+
+          this.channelPeakChart = channelPeakChart
+
+          const series = []
+
+          // 推入BaseLine
+          series.push({
+            ...this.buildSeriesOption(
+              'BaseLine',
+              channelBaseLineChart.pointlist.map(({ x, y }) => [x, y]),
+              `rgb(${channelBaseLineChart.color})`
+            ),
+            markLine: {
+              silent: true,
+              symbol: 'none',
+              label: {
+                show: false
+              },
+              lineStyle: {
+                color: 'red',
+                width: 1
+              },
+              data: [{ xAxis: -1 }]
+            },
+            zlevel: 10
+          })
+
+          // 推入Count
+          series.push(
+            this.buildSeriesOption(
+              'CountChart',
+              channelCountChart.pointlist.map(({ x, y }) => [x, y]),
+              `rgb(${channelCountChart.color})`
+            )
+          )
+
+          // 推入Peak
+          const peakSeries = []
+          channelPeakChart.forEach((item, index) => {
+            peakSeries.push(
+              this.buildSeriesOption(
+                'Peak_' + (index + 1),
+                item.pointlist.map(({ x, y }) => [x, y]),
+                `rgb(${item.color})`
+              )
+            )
+          })
+
+          series.push(...peakSeries)
+
+          // 推入基线控制点
+          series.push({
+            name: 'BaseLine_Ctrl_Point',
+            type: 'scatter',
+            data: channelBaseCPChart.map(({ size, color, point: { x, y } }) => {
+              return {
+                value: [x, y],
+                itemStyle: {
+                  color: 'transparent',
+                  borderColor: color,
+                  borderWidth: size / 2
+                }
+              }
+            }),
+            emphasis: {
+              disabled: true
+            },
+            animation: false,
+            zlevel: 20
+          })
+
+          this.thumbnailOption.series.push(
+            this.buildSeriesOption(
+              'BarChart',
+              barChart.map(({ x, y }) => [x, y])
+            )
+          )
+
+          this.list = table
+          this.option.series = series
         } else {
           this.$message.error(message)
         }
@@ -305,28 +472,118 @@ export default {
       }
     },
 
-    beforeModalOpen() {
+    // 构建series
-      this.getInfo()
+    buildSeriesOption(name, data, color, extra = {}) {
+      return {
+        name,
+        type: 'line',
+        data,
+        itemStyle: {
+          color
+        },
+        lineStyle: {
+          width: 1
+        },
+        symbol: 'none',
+        symbolSize: 1,
+        emphasis: {
+          disabled: true
+        },
+        animation: false,
+        ...extra
+      }
     },
 
-    // 切换图表上的红色竖线
+    beforeModalOpen() {
-    handleChangeMarkLine(direction) {
+      this.getInfo()
-      if (direction == 'prev') {
+      this.opts.notMerge = false
-        this.option.series[0].markLine.data[0].xAxis = 900
+
-      } else if (direction == 'next') {
+      this.$nextTick(() => {
-        this.option.series[0].markLine.data[0].xAxis = 1100
+        this.option.brush = { toolbox: [] }
-      }
+        this.selectedKeys = []
-      this.list = new Array(20).fill(0).map((_, index) => ({
+      })
-        id: index.toString(),
-        energy: 'energy',
-        centroid: 'centroid',
-        fwhm: 'fwhm',
-        area: 'area',
-        detectability: 'detectability',
-        cmnt: 'cmnt',
-        nuclides: 'nuclides'
-      }))
     },
+
+    // 点击图表，设置红线，改变表格的选中项
+    handleChartClick(param) {
+      console.log('%c [ param ]-510', 'font-size:13px; background:pink; color:#bf2c9f;', param)
+      const { offsetX, offsetY } = param
+      const point = getXAxisAndYAxisByPosition(this.$refs.chartRef.getChartInstance(), offsetX, offsetY)
+      if (point) {
+        const xAxis = parseInt(point[0].toFixed())
+        console.log('%c [ xAxis ]-515', 'font-size:13px; background:pink; color:#bf2c9f;', xAxis)
+        this.option.series[0].markLine.data[0].xAxis = xAxis
+
+        // 获取每一段 Channel 中的最大值
+        const maxXAxises = this.getPeakMaxValues()
+        console.log('%c [ maxXAxises ]-519', 'font-size:13px; background:pink; color:#bf2c9f;', maxXAxises)
+
+        let index = 0
+        // 计算当前选中的xAxis跟哪条 peak的最大值 最近
+        if (xAxis >= maxXAxises[maxXAxises.length - 1]) {
+          index = maxXAxises.length - 1
+        } else if (xAxis <= maxXAxises[0]) {
+          index = 0
+        } else {
+          for (let i = 1; i < maxXAxises.length; i++) {
+            const prev = maxXAxises[i - 1]
+            const curr = maxXAxises[i]
+
+            console.log('%c [  ]-533', 'font-size:13px; background:pink; color:#bf2c9f;', prev, curr)
+            if (xAxis >= prev && xAxis <= curr) {
+              index = xAxis - prev < curr - xAxis ? i - 1 : i
+              break
+            }
+            continue
+          }
+        }
+        console.log('%c [ index ]-541', 'font-size:13px; background:pink; color:#bf2c9f;', index)
+        this.selectedKeys = [this.list[index].index]
+      }
+    },
+
+    // 切换图表上的红色竖线及表格选中
+    handleChangeMarkLine(direction) {
+      const markLineOption = this.option.series[0].markLine.data[0]
+      const prevAxis = markLineOption.xAxis
+
+      // 获取每一段 Channel 中的最大值
+      const maxXAxises = this.getPeakMaxValues()
+      if (direction == 'next') {
+        // 找到第一个比prevAxis大的xAxis
+        const find = maxXAxises.find(xAxis => xAxis > prevAxis)
+        if (find) {
+          markLineOption.xAxis = find
+        }
+      } else if (direction == 'prev') {
+        // 找到第一个比prevAxis小的xAxis
+        const find = cloneDeep(maxXAxises)
+          .reverse()
+          .find(xAxis => xAxis < prevAxis)
+        if (find) {
+          markLineOption.xAxis = find
+        }
+      }
+
+      const xAxis = markLineOption.xAxis
+      if (xAxis >= 0) {
+        const index = maxXAxises.findIndex(item => item == xAxis)
+        if (index !== -1) {
+          this.selectedKeys = [this.list[index].index]
+        }
+      }
+    },
+
+    // 获取每一段 Channel 中的最大值
+    getPeakMaxValues() {
+      const maxXAxises = this.channelPeakChart.map(item => {
+        const allY = item.pointlist.map(point => point.y)
+        const max = item.pointlist.find(point => point.y == Math.max(...allY))
+        return max.x
+      })
+      return maxXAxises
+    },
+
     // 显示comment弹窗
     handleAddComment(type) {
       this.commentType = type
@@ -336,7 +593,7 @@ export default {
     // 删除
     handleDel() {
       if (!this.selectedKeys.length) {
-        this.$message.warn('Please Select At Least 1 Peak To Delete')
+        this.$message.warn('No peak to delete.')
         return
       }
 
@@ -344,7 +601,46 @@ export default {
         title: 'Warning',
         content: 'Are you sure to delete this peak?',
         onOk: () => {
-          console.log('%c [  ]-294', 'font-size:13px; background:pink; color:#bf2c9f;', this.selectedKeys)
+          const [willDelKey] = this.selectedKeys
+          const findIndex = this.list.findIndex(item => item.index == willDelKey)
+          this.list.splice(findIndex, 1)
+          this.selectedKeys = []
+
+          const seriesIndex = this.option.series.findIndex(item => {
+            return item.name == 'Peak_' + willDelKey
+          })
+
+          this.opts.notMerge = true
+          this.option.series.splice(seriesIndex, 1)
+          this.channelPeakChart.splice(findIndex, 1)
+
+          this.$nextTick(() => {
+            this.opts.notMerge = false
+            this.option.brush = { toolbox: [] }
+          })
+        }
+      })
+    },
+
+    // 表格的行点击
+    handleTableRowClick(_, index) {
+      const pointlist = this.channelPeakChart[index].pointlist
+
+      const allY = pointlist.map(point => point.y)
+      const findMax = pointlist.find(point => point.y == Math.max(...allY))
+      this.option.series[0].markLine.data[0].xAxis = findMax.x
+    },
+
+    // 鼠标按下时开启可刷选状态
+    handleMouseDown() {
+      const chart = this.$refs.chartRef.getChartInstance()
+      chart.dispatchAction({
+        type: 'takeGlobalCursor',
+        // 如果想变为“可刷选状态”，必须设置。不设置则会关闭“可刷选状态”。
+        key: 'brush',
+        brushOption: {
+          // 参见 brush 组件的 brushType。如果设置为 false 则关闭“可刷选状态”。
+          brushType: 'rect'
         }
       })
     }
@@ -377,6 +673,7 @@ export default {
         font-size: 20px;
         text-align: center;
         margin-bottom: 10px;
+        user-select: none;
 
         span {
           cursor: pointer;

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

@@ -115,8 +115,7 @@ export default {
   mixins: [ModalMixin],
   props: {
     sampleId: {
-      type: Number,
+      type: Number
-      required: true
     }
   },
   data() {

src/views/spectrumAnalysis/components/Modals/BetaGammaModals/StatisticsParamerHistoryModal.vue

@@ -135,7 +135,7 @@
       </title-over-border>
       <!-- 右侧图表 -->
       <div class="statistics-paramer-history-chart">
-        <custom-chart ref="chartRef" :option="option" :notMerge="true"></custom-chart>
+        <custom-chart ref="chartRef" :option="option" :opts="{ notMerge: true }"></custom-chart>
       </div>
     </div>
   </custom-modal>

src/views/spectrumAnalysis/components/Modals/BetaGammaModals/StatisticsParamerHistoryModalForQCFlags.vue

@@ -51,7 +51,7 @@
       </title-over-border>
       <!-- 右侧图表 -->
       <div class="statistics-paramer-history-chart">
-        <custom-chart ref="chartRef" :option="option" :notMerge="true"></custom-chart>
+        <custom-chart ref="chartRef" :option="option" :opts="{ notMerge: true }"></custom-chart>
       </div>
     </div>
   </custom-modal>

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

@@ -1,5 +1,6 @@
 <template>
   <custom-modal v-model="visible" :width="1280" title="Energy Calibration" :footer="null">
+    <a-spin :spinning="isLoading">
       <div class="energy-calibration">
         <div class="left">
           <!-- Calibration Data -->
@@ -58,9 +59,7 @@
           </title-over-border>
           <!-- Equation -->
           <title-over-border class="mt-20" title="Equation">
-          <div class="equation">
+            <div class="equation" v-html="equation"></div>
-            Energy = -0.056137 + C * 0.334493 + C<sup>2</sup> * 3.10365e - 08 + C<sup>3</sup> * -4.05186e - 12
-          </div>
           </title-over-border>
           <!-- curve -->
           <title-over-border class="mt-20" title="curve">
@@ -72,9 +71,10 @@
         <div class="right">
           <title-over-border title="Data Source" style="height: 100%">
             <div class="data-source">
-            <div class="data-source-main">
+              <div class="content">
-              <div class="title">PHD</div>
+                <div class="item" v-for="(item, index) in dataSourceList" :key="index">
-              <div class="content"></div>
+                  {{ item }}
+                </div>
               </div>
               <div class="footer mt-20">
                 <a-button type="primary">Set to Current</a-button>
@@ -84,6 +84,7 @@
           </title-over-border>
         </div>
       </div>
+    </a-spin>
   </custom-modal>
 </template>
 
@@ -91,6 +92,8 @@
 import ModalMixin from '@/mixins/ModalMixin'
 import TitleOverBorder from '../TitleOverBorder.vue'
 import CustomChart from '@/components/CustomChart/index.vue'
+import { getAction } from '@/api/manage'
+import { cloneDeep } from 'lodash'
 
 const columns = [
   {
@@ -188,18 +191,46 @@ const initialOption = {
 export default {
   components: { TitleOverBorder, CustomChart },
   mixins: [ModalMixin],
+  props: {
+    sampleId: {
+      type: Number
+    }
+  },
   data() {
     this.columns = columns
     return {
-      list: [
+      isLoading: false,
-        {
+      equation: '',
-          energy: 'energy',
+      dataSourceList: [],
-          channel: 'channel',
+      list: [],
-          fit: 'fit',
+      option: cloneDeep(initialOption)
-          delta: 'delta'
     }
-      ],
+  },
-      option: initialOption
+  methods: {
+    async getData() {
+      try {
+        this.isLoading = true
+        const { success, result, message } = await getAction('/gamma/energyCalibration', {
+          sampleId: this.sampleId
+        })
+        this.isLoading = false
+        if (success) {
+          console.log('%c [  ]-220', 'font-size:13px; background:pink; color:#bf2c9f;', result)
+          const { AllData, equation, list_dataSource, param, table, uncert } = result
+
+          this.dataSourceList = list_dataSource
+          this.equation = equation
+          this.list = table
+        } else {
+          this.$message.error(message)
+        }
+      } catch (error) {
+        console.error(error)
+      }
+    },
+
+    beforeModalOpen() {
+      this.getData()
     }
   }
 }
@@ -281,7 +312,7 @@ export default {
     }
 
     .equation {
-      height: 32px;
+      height: 40px;
       line-height: 32px;
       text-align: center;
       background-color: #1b5465;
@@ -297,16 +328,17 @@ export default {
     margin-left: 20px;
 
     .data-source {
-      .title {
+      .content {
+        height: 330px;
+        background-color: #275466;
+        overflow: auto;
+
+        .item {
           height: 32px;
           line-height: 32px;
           background-color: #296d81;
           padding: 0 5px;
         }
-
-      .content {
-        height: 300px;
-        background-color: #275466;
       }
 
       .footer {

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

@@ -1,10 +1,13 @@
 <template>
   <custom-modal v-model="visible" title="Spectrum Comments" :okHandler="handleOk" :footer="isAdd ? undefined : null">
+    <a-spin :spinning="isLoading">
       <a-textarea v-model="comments" :rows="8" :disabled="!isAdd"></a-textarea>
+    </a-spin>
   </custom-modal>
 </template>
 
 <script>
+import { getAction } from '@/api/manage'
 import ModalMixin from '@/mixins/ModalMixin'
 export default {
   mixins: [ModalMixin],
@@ -12,17 +15,42 @@ export default {
     isAdd: {
       type: Boolean,
       default: true
+    },
+    sampleId: {
+      type: Number
     }
   },
   data() {
     return {
+      isLoading: false,
       comments: ''
     }
   },
   methods: {
     // ModalMixin 中的生命周期方法
     beforeModalOpen() {
+      if (this.isAdd) {
         this.comments = ''
+      } else {
+        this.getInfo()
+      }
+    },
+
+    async getInfo() {
+      try {
+        this.isLoading = true
+        const { success, result, message } = await getAction('/gamma/viewComment', {
+          sampleId: this.sampleId
+        })
+        this.isLoading = false
+        if (success) {
+          this.comments = result
+        } else {
+          this.$message.error(message)
+        }
+      } catch (error) {
+        console.error(error)
+      }
     },
     handleOk() {
       console.log('%c [  ]-26', 'font-size:13px; background:pink; color:#bf2c9f;', this.comments)

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

@@ -123,8 +123,7 @@ export default {
   mixins: [ModalMixin],
   props: {
     sampleId: {
-      type: Number,
+      type: Number
-      required: true
     }
   },
   data() {

src/views/spectrumAnalysis/gamma-analysis.vue

@@ -43,7 +43,7 @@
             @brushEnd="handleBrushEnd"
             style="height: 100%"
           />
-
+          <!-- 右上角缩略图 -->
           <div class="gamma-analysis-thumbnail">
             <custom-3d-chart
               ref="thumbnailChartRef"
@@ -52,6 +52,7 @@
               style="height: 100%"
             />
           </div>
+          <!-- 缩略图结束 -->
         </div>
       </div>
       <!-- 主体部分结束 -->
@@ -70,6 +71,7 @@ import ButtonWithSwitchIcon from './components/SubOperators/ButtonWithSwitchIcon
 import { getAction } from '@/api/manage'
 import Response from './response.json'
 import { getXAxisAndYAxisByPosition } from '@/utils/chartHelper'
+import { cloneDeep } from 'lodash'
 
 // 初始配置
 const initialOption = {
@@ -97,8 +99,9 @@ const initialOption = {
     trigger: 'axis',
     axisPointer: {
       lineStyle: {
-        color: '#099D24',
+        color: '#3CAEBB',
-        width: 2
+        width: 1,
+        type: 'solid'
       }
     },
     formatter: undefined,
@@ -126,12 +129,18 @@ const initialOption = {
         color: '#ade6ee'
       }
     },
-    min: 0,
+    min: 1,
     max: 'dataMax',
-    animation: false
+    animation: false,
+    axisLabel: {
+      formatter: value => {
+        return parseInt(value)
+      }
+    }
   },
   yAxis: {
     name: 'Counts',
+    type: 'value',
     nameTextStyle: {
       color: '#8FD4F8',
       fontSize: 16
@@ -153,9 +162,14 @@ const initialOption = {
         color: '#ade6ee'
       }
     },
-    min: 0,
+    min: 1,
     max: 'dataMax',
-    animation: false
+    animation: false,
+    axisLabel: {
+      formatter: (value) => {
+        return value.toFixed(1)
+      }
+    }
   },
   series: [],
   brush: {}
@@ -180,10 +194,11 @@ const thumbnailOption = {
     axisLabel: {
       show: false
     },
-    min: 0,
+    min: 1,
     max: 'dataMax'
   },
   yAxis: {
+    type: 'value',
     axisLine: {
       show: false
     },
@@ -192,7 +207,9 @@ const thumbnailOption = {
     },
     axisLabel: {
       show: false
-    }
+    },
+    min: 1,
+    max: 'dataMax',
   },
   series: []
 }
@@ -215,8 +232,8 @@ export default {
   data() {
     return {
       isLoading: false,
-      option: initialOption,
+      option: cloneDeep(initialOption),
-      thumbnailOption,
+      thumbnailOption: cloneDeep(thumbnailOption),
 
       detailedInfomation: [],
       qcFlags: [],
@@ -244,7 +261,6 @@ export default {
           dbName,
           sampleId
         })
-        // const { success, result, message } = Response
         console.log('%c [ result ]-243', 'font-size:13px; background:pink; color:#bf2c9f;', result)
         if (success) {
           this.isLoading = false
@@ -310,6 +326,7 @@ export default {
           this.shapeEnergyData = shapeEnergyData
 
           this.option.yAxis.max = Math.ceil(Math.max(...shadowChannelChart.pointlist.map(item => item.y)) * 1.1)
+          this.thumbnailOption.yAxis.max = Math.ceil(Math.max(...shadowChannelChart.pointlist.map(item => item.y)) * 1.1)
 
           // 推入Spectrum Line
           this.option.series.push({
@@ -335,7 +352,7 @@ export default {
               },
               lineStyle: {
                 color: 'red',
-                width: 2
+                width: 1
               },
               data: [{ xAxis: -1 }]
             },
@@ -368,7 +385,7 @@ export default {
               lineStyle: {
                 type: 'solid',
                 color: '#1397a3',
-                width: 2
+                width: 1
               },
               data: []
             }
@@ -431,7 +448,7 @@ export default {
           // 推入基线控制点
           this.option.series.push({
             name: 'BaseLine_Ctrl_Point',
-            type: 'scatterGL',
+            type: 'scatter',
             data: shapeChannelData.map(({ size, color, point: { x, y } }) => {
               return {
                 value: [x, y],
@@ -445,7 +462,8 @@ export default {
             emphasis: {
               disabled: true
             },
-            animation: false
+            animation: false,
+            zlevel: 20
           })
 
           // 推入Peak Line
@@ -477,15 +495,15 @@ export default {
     },
 
     tooltipFormatter(params) {
-      if (this.graphAssistance.axisType == 'Energy') {
+      if (this.isEnergy()) {
         const energy = params[0].value[0]
         const channel = this.getChannelByEnergy(energy)
 
         return `<div class="channel">Channel: ${channel}</div>
               <div class="energy">Energy: ${energy.toFixed(2)}</div>`
       } else {
-        const channel = parseInt(params[0].value[0])
+        const channel = parseInt(params[0].value[0].toFixed())
-        const energy = this.allEnergy.pointlist[channel]
+        const energy = this.allEnergy.pointlist[channel - 1]
         return energy
           ? `<div class="channel">Channel: ${channel}</div>
               <div class="energy">Energy: ${energy.x.toFixed(2)}</div>`
@@ -499,8 +517,14 @@ export default {
       if (type == 'labelChange') {
         switch (label) {
           case 'Linear':
+            this.option.yAxis.type = 'value'
+            this.thumbnailOption.yAxis.type = 'value'
+            this.handleReset()
             break
           case 'Log10':
+            this.option.yAxis.type = 'log'
+            this.thumbnailOption.yAxis.type = 'log'
+            this.handleReset()
             break
           case 'Channel':
           case 'Energy':
@@ -574,7 +598,7 @@ export default {
     redrawLineBySeriesName(seriesName, energyData, channelData, isShow = true) {
       const series = this.findSeriesByName(seriesName)
       if (isShow) {
-        const data = this.graphAssistance.axisType == 'Energy' ? energyData : channelData
+        const data = this.isEnergy() ? energyData : channelData
         series.data = data.pointlist.map(({ x, y }) => [x, y])
       } else {
         series.data = []
@@ -584,7 +608,7 @@ export default {
     // 重绘控制点
     redrawCtrlPointBySeriesName() {
       const series = this.findSeriesByName('BaseLine_Ctrl_Point')
-      const data = this.graphAssistance.axisType == 'Energy' ? this.shapeEnergyData : this.shapeChannelData
+      const data = this.isEnergy() ? this.shapeEnergyData : this.shapeChannelData
       series.data = data.map(({ size, color, point: { x, y } }) => {
         return {
           value: [x, y],
@@ -603,7 +627,7 @@ export default {
         return -1 == item.name.indexOf('Peak_')
       })
 
-      const data = this.graphAssistance.axisType == 'Energy' ? this.energyPeakGroup : this.channelPeakGroup
+      const data = this.isEnergy() ? this.energyPeakGroup : this.channelPeakGroup
       const peakLines = []
       data.forEach((item, index) => {
         peakLines.push({
@@ -627,7 +651,7 @@ export default {
     // 重绘右上角的缩略图
     redrawThumbnailChart() {
       const series = this.thumbnailOption.series[0]
-      const data = this.graphAssistance.axisType == 'Energy' ? this.shadowEnergyChart : this.shadowChannelChart
+      const data = this.isEnergy() ? this.shadowEnergyChart : this.shadowChannelChart
       series.data = data.pointlist.map(({ x, y }) => [x, y])
     },
 
@@ -636,8 +660,13 @@ export default {
       const { offsetX, offsetY } = param
       const point = getXAxisAndYAxisByPosition(this.$refs.chartRef.getChartInstance(), offsetX, offsetY)
       if (point) {
-        const xAxis = parseInt(point[0].toFixed())
+        const xAxis = point[0]
         this.option.series[0].markLine.data[0].xAxis = xAxis
+
+        const channel = this.isEnergy() ? this.getChannelByEnergy(xAxis) : parseInt(xAxis.toFixed())
+        const energy = this.isEnergy() ? xAxis.toFixed(2) : this.allEnergy.pointlist[channel - 1].x.toFixed(2)
+        const counts = this.isEnergy() ? this.allEnergy.pointlist[channel - 1] : this.allChannel.pointlist[channel - 1]
+        this.option.title.text = `{a|Channel:${channel}} {a|Energy:${energy}} {a|Counts:${counts.y}} {a|Detectability:0}`
       }
     },
 
@@ -725,12 +754,12 @@ export default {
         const point2 = chart.convertFromPixel({ seriesIndex: 0 }, [maxX, maxY]).map(num => parseInt(num.toFixed()))
 
         const xAxisMax = chart.getModel().getComponent('xAxis').axis.scale._extent[1]
-        const yAxisMax = chart.getModel().getComponent('yAxis').axis.scale._extent[1]
+        const yAxisMax = this.option.yAxis.max
 
         let [x1, y2, x2, y1] = [...point1, ...point2] // 根据解析出的数据确定真实的范围
 
-        const xAxisLimit = this.rangeNumber(0, xAxisMax)
+        const xAxisLimit = this.rangeNumber(1, xAxisMax)
-        const yAxisLimit = this.rangeNumber(0, yAxisMax)
+        const yAxisLimit = this.rangeNumber(1, yAxisMax)
 
         x1 = xAxisLimit(x1)
         x2 = xAxisLimit(x2)
@@ -743,13 +772,19 @@ export default {
         this.option.yAxis.min = y1
         this.option.yAxis.max = y2
 
-        if (this.graphAssistance.axisType == 'Energy') {
+        if (this.isEnergy()) {
           const channel1 = this.getChannelByEnergy(x1)
           const channel2 = this.getChannelByEnergy(x2)
           this.setThumbnailChartRect(channel1, y2, channel2, y1)
         } else {
           this.setThumbnailChartRect(x1, y2, x2, y1)
         }
+
+        const thumbnailChart = this.$refs.thumbnailChartRef.getChartInstance()
+        const [, maxYPixel] = thumbnailChart.convertToPixel({ seriesIndex: 0 }, [0, y1]) // 方框的上下两条边的yAxis转为pix
+        const [, minYPixel] = thumbnailChart.convertToPixel({ seriesIndex: 0 }, [0, y2])
+        const rectHeightPixel = maxYPixel - minYPixel // 计算方框的左右边长(pix)
+        this.halfHeightPixel = rectHeightPixel / 2
       }
 
       this.clearBrush(chart)
@@ -793,25 +828,31 @@ export default {
       if (point && this.thumbnailChartRect && this.thumbnailChartRect.length) {
         const [x1, y2, x2, y1] = this.thumbnailChartRect
         const halfWidth = Math.ceil((x2 - x1) / 2)
-        const halfHeight = Math.ceil((y2 - y1) / 2)
+
+        const [, maxYAxisPixel] = thumbnailChart.convertToPixel({ seriesIndex: 0 }, [0, this.thumbnailOption.yAxis.max]) // 缩略图最大值转为pix
+        const [, minYAxisPixel] = thumbnailChart.convertToPixel({ seriesIndex: 0 }, [0, 1])
 
         let [xAxis, yAxis] = point
 
-        xAxis = parseInt(xAxis)
-        yAxis = parseInt(yAxis)
-
         const xAxisMax = thumbnailChart.getModel().getComponent('xAxis').axis.scale._extent[1]
-        const yAxisMax = thumbnailChart.getModel().getComponent('yAxis').axis.scale._extent[1]
 
-        const xAxisLimit = this.rangeNumber(halfWidth, xAxisMax - halfWidth)
+        const xAxisLimit = this.rangeNumber(1 + halfWidth, xAxisMax - halfWidth)
-        const yAxisLimit = this.rangeNumber(halfHeight, yAxisMax - halfHeight)
+
+        const halfHeightPixel = this.halfHeightPixel
+        const yAxisLimit = this.rangeNumber(maxYAxisPixel + halfHeightPixel, minYAxisPixel - halfHeightPixel)
 
         xAxis = xAxisLimit(xAxis)
-        yAxis = yAxisLimit(yAxis)
 
-        this.setThumbnailChartRect(xAxis - halfWidth, yAxis + halfHeight, xAxis + halfWidth, yAxis - halfHeight)
+        let [,yAxisPixel] = thumbnailChart.convertToPixel({ seriesIndex: 0 }, [0, yAxis])
+        yAxisPixel = yAxisLimit(yAxisPixel)
         
-        if (this.graphAssistance.axisType == 'Energy') {
+
+        const minYAxis = thumbnailChart.convertFromPixel({ seriesIndex: 0 }, [0, yAxisPixel + halfHeightPixel])[1] // 再把y轴最小值从pix转为yAxis
+        const maxYAxis = thumbnailChart.convertFromPixel({ seriesIndex: 0 }, [0, yAxisPixel - halfHeightPixel])[1]
+
+        this.setThumbnailChartRect(xAxis - halfWidth, maxYAxis, xAxis + halfWidth, minYAxis)
+
+        if (this.isEnergy()) {
           const x1 = parseInt(this.shadowEnergyChart.pointlist[xAxis - halfWidth].x)
           const x2 = parseInt(this.shadowEnergyChart.pointlist[xAxis + halfWidth].x)
 
@@ -822,16 +863,16 @@ export default {
           this.option.xAxis.max = xAxis + halfWidth
         }
 
-        this.option.yAxis.min = yAxis - halfHeight
+        this.option.yAxis.min = minYAxis
-        this.option.yAxis.max = yAxis + halfHeight
+        this.option.yAxis.max = maxYAxis
       }
     },
 
     // 重置
     handleReset() {
-      this.option.xAxis.min = 0
+      this.option.xAxis.min = 1
       this.option.xAxis.max = 'dataMax'
-      this.option.yAxis.min = 0
+      this.option.yAxis.min = 1
       this.option.yAxis.max = Math.ceil(Math.max(...this.shadowChannelChart.pointlist.map(item => item.y)) * 1.1)
 
       this.thumbnailOption.series[0].markLine.data = []
@@ -885,6 +926,10 @@ export default {
         }
       }
       return channel
+    },
+
+    isEnergy() {
+      return this.graphAssistance.axisType == 'Energy'
     }
   },
   watch: {

src/views/spectrumAnalysis/index.vue

@@ -96,7 +96,7 @@
     <!-- Efficiency Calibration 弹窗结束 -->
 
     <!-- Energy Calibration 弹窗开始 -->
-    <energy-calibration-modal v-model="energyCalibrationModalShow" />
+    <energy-calibration-modal v-model="energyCalibrationModalShow" :sampleId="sampleData.sampleId" />
     <!-- Energy Calibration 弹窗结束 -->
 
     <!-- Resolution Calibration 弹窗开始 -->
@@ -104,7 +104,11 @@
     <!-- Resolution Calibration 弹窗结束 -->
 
     <!-- SpectrumComments 弹窗开始 -->
-    <spectrum-comments-modal v-model="gammaCommentsModalVisible" :isAdd="isGammaCommentsAdd" />
+    <spectrum-comments-modal
+      v-model="gammaCommentsModalVisible"
+      :isAdd="isGammaCommentsAdd"
+      :sampleId="sampleData.sampleId"
+    />
     <!-- SpectrumComments 弹窗结束 -->
 
     <!-- Color Config 弹窗开始 -->
@@ -124,7 +128,12 @@
     <!-- Config User Library 弹窗结束 -->
 
     <!-- Arr 和 RRR 弹窗开始 -->
-    <arr-rrr-modal v-model="arrOrRRRModalVisible" :type="arrOrRRRModalType" :sampleId="this.sampleData.sampleId" :extraData="this.arrOrRRRModalExtraData" />
+    <arr-rrr-modal
+      v-model="arrOrRRRModalVisible"
+      :type="arrOrRRRModalType"
+      :sampleId="this.sampleData.sampleId"
+      :extraData="this.arrOrRRRModalExtraData"
+    />
     <!-- Arr 弹窗结束 -->
 
     <!-- Spectrum 弹窗开始 -->
@@ -719,13 +728,25 @@ export default {
                 {
                   type: 'a-menu-item',
                   title: 'View Comments',
-                  show: this.isBetaGamma || this.isGamma,
+                  show: this.isBetaGamma,
                   handler: this.handleViewComments
                 },
                 {
                   type: 'a-menu-item',
                   title: 'Add Comments',
-                  show: this.isBetaGamma || this.isGamma,
+                  show: this.isBetaGamma,
+                  handler: this.handleAddComments
+                },
+                {
+                  type: 'a-menu-item',
+                  title: 'View',
+                  show: this.isGamma,
+                  handler: this.handleViewComments
+                },
+                {
+                  type: 'a-menu-item',
+                  title: 'Add',
+                  show: this.isGamma,
                   handler: this.handleAddComments
                 }
               ]