WIP: 自建台站按设计图修改优化

src/components/CustomChart/index.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="custom-chart" ref="containerRef" :style="{ height: height + 'px' }"></div>
+  <div class="custom-chart">
+    <div class="custom-chart-container"  ref="containerRef" :style="{ height: height + 'px' }"></div>
+    <resize-observer v-if="autoresize" @notify="resize" />
+  </div>
 </template>
 <script>
 import * as echarts from 'echarts'
@@ -21,6 +24,10 @@ export default {
       type: Number,
       default: null,
     },
+    autoresize: {
+      type: Boolean,
+      default: false
+    }
   },
   data() {
     return {}
@@ -54,6 +61,7 @@ export default {
 
     resize() {
       this._chart && this._chart.resize()
+      this.$emit('resize')
     },
 
     // 获取echart实例
@@ -85,5 +93,9 @@ export default {
 <style lang="less" scoped>
 .custom-chart {
   height: 100%;
+
+  &-container {
+    height: 100%;
+  }
 }
 </style>

src/views/spectrumAnalysis/beta-analysis.vue

@@ -7,41 +7,31 @@
           Detailed-Information
           <beta-gamma-detailed-infomation slot="content" :data="spectrumData" />
         </pop-over-with-icon>
-        <pop-over-with-icon placement="bottomLeft">
+        <custom-select
-          QC Flags
+          v-model="spectraType"
-          <beta-gamma-qc-flags slot="content" :data="qcFlags" @click="handleQcFlagClick" />
+          :options="SampleType"
-        </pop-over-with-icon>
+          @change="changeChartByType"
-        <custom-select v-model="spectraType" :options="SampleType" @change="changeChartByType" style="width: 246px" class="sample-select"></custom-select>
+          style="width: 246px"
-        <div class="spectrum-analysis-sub-operators-roi">
+          class="sample-select"
-          <div class="spectrum-analysis-sub-operators-roi-name">ROI1</div>
+        ></custom-select>
-          <a-input-group>
+        <div class="spectrum-analysis-sub-operators-roi" v-for="(_, index) in 4" :key="index">
-            <a-input v-model:value="roiValues[0]" class="spectrum-analysis-sub-operators-roi-input" placeholder="Beta1" />
+          <div class="spectrum-analysis-sub-operators-roi-name" :style="{ color: ROIColors[index] }">
-            <a-input class="spectrum-analysis-sub-operators-roi-split site-input-split" placeholder="," disabled />
+            ROI{{ index + 1 }}
-            <a-input v-model:value="roiValues[1]" class="spectrum-analysis-sub-operators-roi-input site-input-right" placeholder="Beta2" />
-          </a-input-group>
           </div>
-        <div class="spectrum-analysis-sub-operators-roi">
-          <div class="spectrum-analysis-sub-operators-roi-name">ROI2</div>
           <a-input-group>
-            <a-input v-model:value="roiValues[2]" class="spectrum-analysis-sub-operators-roi-input" placeholder="Beta1" />
+            <a-input
+              type="number"
+              v-model="roiParamList[index][0]"
+              class="spectrum-analysis-sub-operators-roi-input"
+              placeholder="Beta1"
+            />
             <a-input class="spectrum-analysis-sub-operators-roi-split site-input-split" placeholder="," disabled />
-            <a-input v-model:value="roiValues[3]" class="spectrum-analysis-sub-operators-roi-input site-input-right" placeholder="Beta2" />
+            <a-input
-          </a-input-group>
+              type="number"
-        </div>
+              v-model="roiParamList[index][1]"
-        <div class="spectrum-analysis-sub-operators-roi">
+              class="spectrum-analysis-sub-operators-roi-input site-input-right"
-          <div class="spectrum-analysis-sub-operators-roi-name">ROI3</div>
+              placeholder="Beta2"
-          <a-input-group>
+            />
-            <a-input v-model:value="roiValues[4]" class="spectrum-analysis-sub-operators-roi-input" placeholder="Beta1" />
-            <a-input class="spectrum-analysis-sub-operators-roi-split site-input-split" placeholder="," disabled />
-            <a-input v-model:value="roiValues[5]" class="spectrum-analysis-sub-operators-roi-input site-input-right" placeholder="Beta2" />
-          </a-input-group>
-        </div>
-        <div class="spectrum-analysis-sub-operators-roi">
-          <div class="spectrum-analysis-sub-operators-roi-name">ROI4</div>
-          <a-input-group>
-            <a-input v-model:value="roiValues[6]" class="spectrum-analysis-sub-operators-roi-input" placeholder="Beta1" />
-            <a-input class="spectrum-analysis-sub-operators-roi-split site-input-split" placeholder="," disabled />
-            <a-input v-model:value="roiValues[7]" class="spectrum-analysis-sub-operators-roi-input site-input-right" placeholder="Beta2" />
           </a-input-group>
         </div>
         <div class="spectrum-analysis-sub-operators-button" @click="reDrawRectOri">Update</div>
@@ -50,19 +40,33 @@
 
       <!-- 主体部分 -->
       <div class="beta-gamma-analysis-main">
-        <!-- 中间图表部分 -->
+        <!-- 左侧图表部分 -->
-        <div class="beta-gamma-analysis-main-charts">
+        <div class="beta-gamma-analysis-main-left">
-          <div class="beta-gamma-analysis-main-charts-left">
           <beta-gamma-chart-container>
             <template slot="title"> Beta-Gamma Spectrum: {{ currSpectrum }} </template>
-              <beta-gamma-spectrum ref="betaChartRef" :betaEnergyData="betaEnergyData" :roiValues="roiValues" :gammaEnergyData="gammaEnergyData" :histogramDataList="histogramDataList" :boundary="boundaryList" :isLoading.sync="isLoading" :currIdx="currIdx" @refreshRoi="refreshRoi" />
+            <beta-gamma-spectrum
+              ref="betaChartRef"
+              :betaEnergyData="betaEnergyData"
+              :gammaEnergyData="gammaEnergyData"
+              :histogramDataList="histogramDataList"
+              :boundary="boundaryList"
+              :isLoading.sync="isLoading"
+              @refreshRoi="refreshRoi"
+              @boundaryChange="handleBoundaryChange"
+            />
           </beta-gamma-chart-container>
         </div>
-          <div class="beta-gamma-analysis-main-charts-right">
+        <!-- 左侧图表结束 -->
+        <!-- 右侧开始 -->
+        <div class="beta-gamma-analysis-main-right">
           <beta-gamma-chart-container>
-
             <template slot="title"> ROI LIMITS </template>
-              <roi-limits ref="RoiChartRef" :ROILists="ROILists" :ROIAnalyzeLists="ROIAnalyzeLists" :gammaEnergyData="gammaEnergyData" />
+            <roi-limits
+              ref="RoiChartRef"
+              :ROILists="ROILists"
+              :ROIAnalyzeLists="ROIAnalyzeLists"
+              :gammaEnergyData="gammaEnergyData"
+            />
           </beta-gamma-chart-container>
           <!-- 底部显示 -->
           <div class="beta-gamma-analysis-main-bottom">
@@ -75,8 +79,7 @@
           </div>
           <!-- 底部显示结束 -->
         </div>
-        </div>
+        <!-- 右侧结束 -->
-        <!-- 中间图表部分结束 -->
       </div>
       <!-- 主体部分结束 -->
     </a-spin>
@@ -91,12 +94,14 @@ import CustomSelect from '@/components/CustomSelect/index.vue'
 import BetaGammaChartContainer from './components/BetaGammaChartContainer.vue'
 import ResultDisplayBeta from './components/ResultDisplay-Beta.vue'
 import BetaGammaSpectrum from './components/BetaGammaSpectrum.vue'
-import RoiLimits from './components/RoiLimits.vue'
+import RoiLimits from './components/RoiLimits/RoiLimits.vue'
 import RoiParam from './components/RoiParam.vue'
 import axios from 'axios'
 import store from '@/store/'
 import { getAction, postAction, deleteAction } from '../../api/manage'
-import { addSampleData, getSampleData } from '@/utils/SampleStore'
+import { addSampleData, getSampleData, updateSampleData } from '@/utils/SampleStore'
+import { cloneDeep } from 'lodash'
+
 const SampleType = [
   {
     label: 'Sample Data',
@@ -107,6 +112,11 @@ const SampleType = [
     value: 'detBg',
   },
 ]
+
+const InitialRoiParamList = new Array(4).fill([0, 0])
+
+const ROIColors = ['#16d5e6', '#34a1ff', '#66e411', '#fdaa1a']
+
 export default {
   components: {
     PopOverWithIcon,
@@ -126,6 +136,8 @@ export default {
   },
   data() {
     this.SampleType = SampleType
+    this.ROIColors = ROIColors
+
     return {
       currSpectrum: 'Sample',
       isLoading: false,
@@ -136,13 +148,10 @@ export default {
       betaEnergyData: [],
       ROILists: [],
       ROIAnalyzeLists: [],
-      roiParamList: [],
+      roiParamList: cloneDeep(InitialRoiParamList),
       boundaryList: [],
       sampleDetail: {},
-      qcFlags: {},
       resultDisplay: [],
-      currIdx: 0,
-      roiValues:[],
       timerStamp: Date.now(),
     }
   },
@@ -158,6 +167,7 @@ export default {
             this.sampleDetail = data
             this.emitGetFiles(data)
           }
+          // this.ROIAnalyzeLists = data.ROIAnalyzeLists
         } else {
           if (newVal.sampleId) {
             this.getSampleDetail()
@@ -174,18 +184,26 @@ export default {
   },
   methods: {
     async getAnalyzeCurrentSpectrum() {
-      
+      try {
         const { inputFileName, detFileName } = this.sample
-      var userId = store.getters.userInfo.id
+        const userId = store.getters.userInfo.id
-      const { success, result, message } = await postAction(`/selfStation/Reprocessing?fileName=${inputFileName}&processKey=${userId}_${this.timerStamp}`)
+        this.isLoading = true
-      console.log(userId,success, result, message)
+        const { success, result, message } = await postAction(
-      if(success){
+          `/selfStation/Reprocessing?fileName=${inputFileName}&processKey=${userId}_${this.timerStamp}`
-        var _result = []
+        )
+        console.log(userId, success, result, message)
+        if (success) {
+          const _result = []
           _result.push(result.ROI1)
           _result.push(result.ROI2)
           _result.push(result.ROI3)
           _result.push(result.ROI4)
           this.ROIAnalyzeLists = _result
+          updateSampleData({
+            inputFileName,
+            key: 'ROIAnalyzeLists',
+            data: _result,
+          })
         }
         let XeData = [
           {
@@ -239,6 +257,11 @@ export default {
         ]
         this.resultDisplay = XeData
         // this.$emit('reAnalyCurr', true, XeData)
+      } catch (error) {
+        console.error(error)
+      } finally {
+        this.isLoading = false
+      }
     },
     getAnalyzeAllSpectrum() {
       let XeData = [
@@ -295,19 +318,10 @@ export default {
       // this.$emit('reAnalyCurr', true, XeData)
     },
     refreshRoi(data) {
-      const { list, start, stop } = data
+      console.log('%c [ 刷新 ]-303', 'font-size:13px; background:pink; color:#bf2c9f;', data)
-      let currRoiParam = { start, stop }
-      let currBoundary = { minX: start, maxX: stop, minY: 0, maxY: 4096 }
-      this.ROILists.splice(this.currIdx, 1, list)
-      this.roiParamList.splice(this.currIdx, 1, currRoiParam)
-      this.boundaryList.splice(this.currIdx, 1, currBoundary)
     },
-    reDrawRectOri(){
+    reDrawRectOri() {
-      this.$refs.betaChartRef.reDrawRect()
+      // 更新
-
-    },
-    getIndex(val) {
-      this.currIdx = val
     },
     // async handleDetalSelfStationCache() {
     //   const { inputFileName } = this.sample
@@ -322,7 +336,7 @@ export default {
     // },
     async getSelfStationSampleDetail() {
       this.spectraType = this.SampleType[0].value
-      const { inputFileName, detFileName,qcFileName } = this.sample
+      const { inputFileName, detFileName, qcFileName } = this.sample
       let params = {
         sampleFileName: inputFileName,
         detFileName: detFileName,
@@ -344,7 +358,6 @@ export default {
           this.sampleDetail = result
           this.changeChartByType('sample')
           this.isLoading = false
-          this.currIdx = 2
         } else {
           this.$message.error(message)
         }
@@ -355,7 +368,7 @@ export default {
     changeChartByType(val) {
       if (val == 'sample') this.currSpectrum = 'Sample'
       if (val == 'detBg') this.currSpectrum = 'Det'
-      this.roiParamList = []
+      this.roiParamList = cloneDeep(InitialRoiParamList)
       this.boundaryList = []
       this.ROILists = []
       const {
@@ -381,16 +394,15 @@ export default {
       this.gammaEnergyData = gammaEnergyData
       this.betaEnergyData = betaEnergyData
       this.ROILists = [ROIOneList, ROITwoList, ROIThreeList, ROIFourList]
-      let roiParam1 = { start: ROIOneStart, stop: ROIOneStop }
+
-      let roiParam2 = { start: ROITwoStart, stop: ROITwoStop }
+      this.boundaryList = [
-      let roiParam3 = { start: ROIThreeStart, stop: ROIThreeStop }
+        [ROIOneStart, ROIOneStop],
-      let roiParam4 = { start: ROIFourStart, stop: ROIFourStop }
+        [ROITwoStart, ROITwoStop],
-      this.roiParamList = [roiParam1, roiParam2, roiParam3, roiParam4]
+        [ROIThreeStart, ROIThreeStop],
-      let boundary1 = { minX: ROIOneStart, maxX: ROIOneStop, minY: 0, maxY: 4096 }
+        [ROIFourStart, ROIFourStop],
-      let boundary2 = { minX: ROITwoStart, maxX: ROITwoStop, minY: 0, maxY: 4096 }
+      ]
-      let boundary3 = { minX: ROIThreeStart, maxX: ROIThreeStop, minY: 0, maxY: 4096 }
+
-      let boundary4 = { minX: ROIFourStart, maxX: ROIFourStop, minY: 0, maxY: 4096 }
+      this.roiParamList = cloneDeep(this.boundaryList)
-      this.boundaryList = [boundary1, boundary2, boundary3, boundary4]
     },
     cancelLastRequest() {
       if (this._cancelToken && typeof this._cancelToken == 'function') {
@@ -404,9 +416,6 @@ export default {
       })
       return cancelToken
     },
-    handleQcFlagClick(item) {
-      console.log(item)
-    },
     handleGetFlag(val, obj) {
       this.resultDisplay.forEach((item) => {
         if (item.nuclideName === obj.nuclideName) {
@@ -414,7 +423,15 @@ export default {
         }
       })
     },
-    resize() { },
+
+    resize() {},
+
+    // 矩形框范围改变
+    handleBoundaryChange(evt) {
+      const { index, start, end } = evt
+      this.$set(this.boundaryList, index, [start, end])
+      this.$set(this.roiParamList, index, [start, end])
+    },
   },
   destroyed() {
     this.cancelLastRequest()
@@ -446,27 +463,21 @@ export default {
   }
 
   &-main {
-    height: calc(100% - 55px);
+    height: calc(100% - 65px);
-    overflow: auto hidden;
-
-    &-charts {
-      height: 100%;
     display: flex;
     gap: 30px;
     overflow: auto hidden;
 
     &-left {
-        width: 790px;
+      flex: 768;
     }
 
     &-right {
-        flex: 1;
+      flex: 1068;
-
       .betagamma-chart {
         height: calc(100% - 200px);
       }
     }
-    }
 
     &-bottom {
       height: 194px;
@@ -514,6 +525,12 @@ export default {
       padding: 5px 10px;
     }
 
+    ::v-deep {
+      .ant-input-group {
+        display: flex;
+      }
+    }
+
     &-input {
       width: 80px;
       text-align: center;
@@ -535,9 +552,8 @@ export default {
       pointer-events: none;
       background-color: #03353f;
     }
-
   }
-  &-button{
+  &-button {
     text-align: center;
     height: 32px;
     line-height: 32px;
@@ -550,4 +566,5 @@ export default {
   }
 }
 
-// 二级操作栏结束</style>
+// 二级操作栏结束
+</style>

src/views/spectrumAnalysis/components/BetaGammaSpectrum.vue

@@ -1,36 +1,68 @@
 <template>
   <div class="beta-gamma-spectrum-chart">
     <div class="beta-gamma-spectrum-chart-operators">
-      <span v-for="(item, index) in buttons" :key="item" :class="active == index ? 'active' : ''" @click="handleChange(index)">
+      <span v-for="(item, index) in buttons" :key="item" @click="handleChange(index)">
         {{ item }}
       </span>
       <span @click="handleUnzoom">Unzoom</span>
       <span @click="handleROI">ROI</span>
-      <span @click="handleLOG">Log</span>
+      <span @click="handleLog">{{ isLog ? 'Linear' : 'Log' }}</span>
     </div>
-    <div class="beta-gamma-spectrum-chart-main">
+    <div
+      class="beta-gamma-spectrum-chart-main"
+      ref="chartContainerRef"
+      @mousemove="handleBorderMouseMove"
+      @mouseleave="handleBorderMouseLeave"
+      @mouseup="handleBorderMouseLeave"
+    >
       <!-- 2D 图表，为了相应Unzoom采用的v-show -->
-      <div class="_2d-chart" ref="TwoChartRef" v-show="active == 0">
+      <div class="_2d-chart" ref="TwoChartRef">
-        <CustomChart ref="chartTwoDRef" :option="twoDOption" :opts="opts" @zr:mousedown="handleMouseDown" @zr:mouseup="handleMouseUp" @brushEnd="handleBrushEnd" />
+        <CustomChart
-        <!-- @brushEnd="handleBrushEnd" -->
+          ref="chartTwoDRef"
-        <!-- @zr:mousemove="handleMouseMove" -->
+          :option="twoDOption"
-        <!-- <div class="bar">
+          :opts="opts"
-          <color-palette v-model="currCount" />
+          autoresize
-          <div>{{ currCount }}</div>
+          @zr:mousedown="handleMouseDown"
-          <div class="bar-main"></div>
+          @zr:mouseup="handleMouseUp"
-          <div>0</div>
+          @brushEnd="handleBrushEnd"
-        </div> -->
+          @resize="handleChartResize"
+        />
       </div>
       <!-- 2D图表结束 -->
-      <CustomChart v-if="active == 0" key="1" ref="gammaLineChartRef" :option="gammaOption" />
+      <!-- 图表上面的四边形 -->
-      <CustomChart v-if="active == 1" key="2" ref="betaLineChartRef" :option="betaOption" />
+      <div
+        class="boundary-list"
+        :style="{
+          left: boundaryContainerPosition.left + 'px',
+          top: boundaryContainerPosition.top + 'px',
+          width: boundaryContainerPosition.width + 'px',
+          height: boundaryContainerPosition.height + 'px',
+        }"
+      >
+        <div
+          class="boundary-item"
+          v-for="(boundaryItem, index) in boundaryList"
+          :key="index"
+          :style="{
+            left: boundaryItem.left + 'px',
+            top: boundaryItem.top + 'px',
+            width: boundaryItem.width + 'px',
+            height: boundaryItem.height + 'px',
+            backgroundColor: boundaryItem.backgroundColor,
+            borderColor: boundaryItem.borderColor,
+          }"
+        >
+          <div class="boundary-item-left" @mousedown="handleBorderMouseDown(boundaryItem, 'left', index)"></div>
+          <div class="boundary-item-right" @mousedown="handleBorderMouseDown(boundaryItem, 'right', index)"></div>
+        </div>
+      </div>
+      <!-- 图表上面的四边形结束 -->
     </div>
   </div>
 </template>
 
 <script>
 import CustomChart from '@/components/CustomChart/index.vue'
-import ColorPalette from './ColorPalette.vue'
 import { getXAxisAndYAxisByPosition, rangeNumber } from '@/utils/chartHelper.js'
 import { putAction } from '../../../api/manage'
 import SampleDataMixin from '../SampleDataMixin'
@@ -45,10 +77,10 @@ const twoDOption = {
   },
   tooltip: {
     trigger: 'item',
-    // formatter: (params) => {
+    formatter: (params) => {
-    //   const [b, g, c] = params.value
+      const [b, g, c] = params.value
-    //   return `Beta: ${b}<br>Gamma: ${g}<br>Count: ${c}`
+      return `Beta: ${b}<br>Gamma: ${g}<br>Count: ${c}`
-    // },
+    },
     axisPointer: {
       animation: false,
       type: 'cross',
@@ -122,252 +154,62 @@ const twoDOption = {
     max: 4096,
     interval: 512,
   },
-  series: [
+  series: {
-    {
     type: 'scatterGL',
     symbolSize: 4,
-      zlevel: 4,
     data: [],
     itemStyle: {
       color: '#fff',
     },
   },
-    {
-      type: 'line',
-      data: [],
-      itemStyle: { color: '#0CB4C1' },
-      zlevel: 14,
-      showSymbol: false,
-      areaStyle: {}
-    },
-    {
-      type: 'line',
-      data: [],
-      itemStyle: { color: '#1B88E5' },
-      zlevel: 13,
-      showSymbol: false,
-      areaStyle: {}
-    },
-    {
-      type: 'line',
-      data: [],
-      itemStyle: { color: '#43960C' },
-      zlevel: 12,
-      showSymbol: false,
-      areaStyle: {}
-    },
-    {
-      type: 'line',
-      data: [],
-      itemStyle: { color: '#D09324' },
-      zlevel: 11,
-      showSymbol: false,
-      areaStyle: {}
-    },
-
-  ],
   brush: {},
   animation: false,
+  visualMap: {
+    type: 'continuous',
+    min: 4096,
+    max: 0,
+    itemWidth: 12,
+    itemHeight: 0,
+    dimension: 1,
+    seriesIndex: 0,
+    zlevel: 0,
+    orient: 'vertical',
+    right: 0,
+    bottom: 20,
+    text: [4096, 0],
+    textStyle: {
+      color: '#8EC0C8',
+    },
+    calculable: true,
+    inRange: {
+      color: ['#ffffff', '#ff0000'],
+    },
+  },
 }
 
-const dragOption = {
+const ColorList = [
-  // 绘制阈值的graphic line
-  graphic: [
   {
-      type: 'rect',
+    borderColor: '#0dcbdc',
-      // rotation: Math.PI/2,
+    bgColor: 'rgba(13, 203, 220, .3)',
-      zlevel: 12,
-      shape: {
-        width: 5,
-        height: 0,
-      },
-
-      //构造坐标扔进去
-      position: [],
-      draggable: true,
-      style: {
-        fill: 'rgba(0,0,0,0)',
-        stroke: 'rgba(0,0,0,0)',
-        // fill: 'rgba(255,0,0,0.5)', // 方便观察
-        // stroke: 'rgba(255,0,0,0.5)', // 方便观察
-        lineWidth: 10,
-      },
-      cursor: 'move',
-      ondrag: null,
   },
   {
-      type: 'rect',
+    borderColor: '#1b8bea',
-      zlevel: 12,
+    bgColor: 'rgba(27, 139, 234, .3)',
-      shape: {
-        width: 5,
-        height: 0,
   },
+  {
+    borderColor: '#4dac0d',
+    bgColor: 'rgba(77, 172, 13, .3)',
+  },
+  {
+    borderColor: '#e49d21',
+    bgColor: 'rgba(228, 157, 33, .3)',
+  },
+]
 
-      //构造坐标扔进去
-      position: [],
-      draggable: true,
-      style: {
-        fill: 'rgba(0,0,0,0)',
-        stroke: 'rgba(0,0,0,0)',
-        // fill: 'rgba(255,0,0,0.5)', // 方便观察
-        // stroke: 'rgba(255,0,0,0.5)', // 方便观察
-        lineWidth: 10,
-      },
-      cursor: 'move',
-      ondrag: null,
-    },
-  ],
-}
-
-// Gamma 的配置
-const gammaOption = {
-  grid: {
-    top: 15,
-    left: 55,
-    right: 18,
-    bottom: 45,
-  },
-  tooltip: {},
-  xAxis: {
-    type: 'category',
-    boundaryGap: false,
-    splitLine: {
-      show: true,
-      interval: 'auto',
-      lineStyle: {
-        color: 'rgba(119, 181, 213, .3)',
-      },
-    },
-    axisTick: {
-      show: false,
-    },
-    axisLine: {
-      lineStyle: {
-        color: 'rgba(119, 181, 213, .3)',
-      },
-    },
-    axisLabel: {
-      fontSize: 12,
-      color: '#ade6ee',
-    },
-  },
-  yAxis: {
-    type: 'value',
-    splitLine: {
-      lineStyle: {
-        color: 'rgba(119, 181, 213, .3)',
-      },
-    },
-    axisTick: {
-      show: false,
-    },
-    axisLine: {
-      lineStyle: {
-        color: 'rgba(119, 181, 213, .3)',
-      },
-    },
-    axisLabel: {
-      fontSize: 12,
-      color: '#ade6ee',
-    },
-  },
-  series: {
-    type: 'line',
-    smooth: true,
-    showSymbol: false,
-    animation: false,
-    symbol: 'circle',
-    symbolSize: 6,
-    data: [],
-    itemStyle: {
-      normal: {
-        color: '#baaa3d',
-      },
-    },
-    lineStyle: {
-      normal: {
-        width: 2,
-      },
-    },
-  },
-}
-// Beta 的配置
-const betaOption = {
-  grid: {
-    top: 15,
-    left: 55,
-    right: 18,
-    bottom: 45,
-  },
-  tooltip: {},
-  xAxis: {
-    type: 'category',
-    boundaryGap: false,
-    splitLine: {
-      show: true,
-      interval: 'auto',
-      lineStyle: {
-        color: 'rgba(119, 181, 213, .3)',
-      },
-    },
-    axisTick: {
-      show: false,
-    },
-    axisLine: {
-      lineStyle: {
-        color: 'rgba(119, 181, 213, .3)',
-      },
-    },
-    axisLabel: {
-      fontSize: 12,
-      color: '#ade6ee',
-    },
-  },
-  yAxis: {
-    type: 'value',
-    splitLine: {
-      lineStyle: {
-        color: 'rgba(119, 181, 213, .3)',
-      },
-    },
-    axisTick: {
-      show: false,
-    },
-    axisLine: {
-      lineStyle: {
-        color: 'rgba(119, 181, 213, .3)',
-      },
-    },
-    axisLabel: {
-      fontSize: 12,
-      color: '#ade6ee',
-    },
-  },
-  series: {
-    type: 'line',
-    smooth: true,
-    showSymbol: false,
-    animation: false,
-    symbol: 'circle',
-    symbolSize: 6,
-    data: [],
-    itemStyle: {
-      normal: {
-        color: '#baaa3d',
-      },
-    },
-    lineStyle: {
-      normal: {
-        width: 2,
-      },
-    },
-  },
-}
 export default {
   mixins: [SampleDataMixin],
   components: {
     CustomChart,
-    ColorPalette,
   },
   props: {
     isLoading: {
@@ -389,129 +231,29 @@ export default {
       type: Array,
       default: () => [],
     },
-    roiValues: {
-      type: Array,
-      default: () => [],
-    },
-    currIdx: {
-      type: Number,
-    },
   },
   watch: {
     // 2D 图表
     histogramDataList: {
       handler() {
-        this.active = 0
         this.buildScatterList()
       },
       immediate: true,
     },
-    gammaEnergyData: {
-      handler(newVal) {
-        this.buildGammaLineList(newVal)
-      },
-      immediate: true,
-    },
-    betaEnergyData: {
-      handler(newVal) {
-        this.buildBetaLineList(newVal)
-      },
-      immediate: true,
-    },
     // 2D 图表 上的 矩形
     boundary: {
-      handler(newVal) {
-        // newVal.forEach((item, index) => {
-        //   item.color = '#99CA53'
-        // })
-        // this.boundaryData = newVal[this.currIdx]
-      },
-      // immediate: true,
-    },
-    currCount: {
       handler() {
-        this.buildScatterList()
+        this.$nextTick(() => {
-      },
+          this.reDrawRect()
-      immediate: true,
+        })
-    },
-    currIdx: {
-      handler(newVal) {
-        // this.boundaryData = this.boundary[newVal]
-        this.initDrawRectOri()
       },
       // immediate: true,
     },
-    boundaryData: {
-      handler(newVal) {
-        this.opts.notMerge = false
-        const { minX, maxX, minY, maxY, color } = newVal
-        this.startChannel = minX
-        this.endChannel = maxX
-        const [graphic1, graphic2] = this.dragOption.graphic
-        const _this = this
-        this.myChart = this.$refs.chartTwoDRef.getChartInstance()
-        let graphicHeight = this.$refs.TwoChartRef.clientHeight
-
-        graphic1.shape.height = graphicHeight
-        let minleft = this.myChart.convertToPixel({ xAxisId: '2' }, 0)
-        let maxRight = this.myChart.convertToPixel({ xAxisId: '2' }, 512)
-        graphic1.position = [
-          this.myChart.convertToPixel({ xAxisId: '2' }, minX),
-          this.myChart.convertToPixel({ yAxisId: '3' }, maxY),
-        ]
-        graphic1.ondrag = function () {
-          this.position[0] = this.position[0] < minleft ? minleft : this.position[0]
-          let [a, lineSeries] = _this.twoDOption.series
-          _this.startChannel = parseInt(_this.myChart.convertFromPixel({ xAxisId: '2' }, this.position[0]))
-          const rect = [
-            [_this.startChannel, minY],
-            [_this.endChannel, minY],
-            [_this.endChannel, maxY],
-            [_this.startChannel, maxY],
-            [_this.startChannel, minY],
-          ]
-          lineSeries.
-            lineSeries.data = _this.drawOneRect(rect, color).data
-          // const lineSeries = {
-          //   type: 'line',
-          //   ..._this.drawOneRect(rect, color),
-          //   zlevel: 11,
-          // }
-          // _this.twoDOption.series.splice(1, _this.twoDOption.series.length - 1, ...lineSeries)
-        }
-        // > maxRight ? maxRight : currRight
-        graphic2.shape.height = graphicHeight
-        graphic2.position = [
-          this.myChart.convertToPixel({ xAxisId: '2' }, maxX),
-          this.myChart.convertToPixel({ yAxisId: '3' }, maxY),
-        ]
-        graphic2.ondrag = function () {
-          this.position[0] = this.position[0] > maxRight ? maxRight : this.position[0]
-          let [a, lineSeries] = _this.twoDOption.series
-          _this.endChannel = parseInt(_this.myChart.convertFromPixel({ xAxisId: '2' }, this.position[0]))
-          const rect = [
-            [_this.startChannel, minY],
-            [_this.endChannel, minY],
-            [_this.endChannel, maxY],
-            [_this.startChannel, maxY],
-            [_this.startChannel, minY],
-          ]
-          lineSeries.data = _this.drawOneRect(rect, color).data
-        }
-        this.myChart.setOption(this.dragOption)
-      },
-    },
   },
   data() {
     this.buttons = buttons
     return {
-      active: -1,
       twoDOption,
-      dragOption,
-      gammaOption,
-      betaOption,
-      currCount: 50,
-      boundaryData: [],
       showROI: true,
       myChart: null,
       startChannel: null,
@@ -519,6 +261,9 @@ export default {
       opts: {
         notMerge: false,
       },
+      boundaryList: [], // 最终生成的框
+      boundaryContainerPosition: {},
+      isLog: true, // 当前右侧的图表是否是log
     }
   },
   mounted() {
@@ -526,145 +271,109 @@ export default {
     this.$nextTick(() => {
       this.opts.notMerge = false
       this.twoDOption.brush = { toolbox: [] }
+      this.setVisualMapHeight()
     })
   },
   methods: {
-    handleTooltipFormat() {
-      console.log(111111)
-    },
-    // Gamma 的折线图数据
-    buildGammaLineList(val) {
-      const gammaSeries = this.gammaOption.series
-      gammaSeries.data = val.map((item, index) => [index, item])
-    },
-    // Beta 的折线图数据
-    buildBetaLineList(val) {
-      const betaSeries = this.betaOption.series
-      betaSeries.data = val.map((item, index) => [index, item])
-    },
     // 构造scatter列表
     buildScatterList() {
+      console.log(this.twoDOption)
       const {
         xAxis: { min: minX, max: maxX },
         yAxis: { min: minY, max: maxY },
       } = this.twoDOption
 
       //点大小
-      this.twoDOption.series[0].symbolSize = 5
+      this.twoDOption.series.symbolSize = 5
-      this.twoDOption.series[0].data = this.histogramDataList
+      this.twoDOption.series.data = this.histogramDataList
         .filter(({ b, g, c }) => c && b >= minX && b <= maxX && g >= minY && g <= maxY)
-        .map(({ b, g, c }) => this.buildScatterItem(b, g, c))
+        .map(({ b, g }) => this.buildScatterItem(b, g))
-
-
-      this.$nextTick(() => {
-        var _h = this.$refs.TwoChartRef.clientHeight - 80
-        this.twoDOption.visualMap = {
-          type: 'continuous',
-          min: maxY,
-          max: minY,
-          itemWidth: 12,
-          itemHeight: _h,
-          dimension: 1,
-          seriesIndex: 0,
-          zlevel: 0,
-          orient: 'vertical',
-          right: 0,
-          bottom: 20,
-          text: [maxY, minY],
-          textStyle: {
-            color: '#8EC0C8'
-          },
-          calculable: true,
-          inRange: {
-            color: ['#ffffff', '#ff0000']
-          }
-        }
-      })
-
     },
 
     // 构造一个scatter 的点
-    buildScatterItem(xAxis, yAxis, count) {
+    buildScatterItem(xAxis, yAxis) {
-      const { r, g, b } = this.interpolateColor(1 - count / this.currCount)
       return {
         value: [xAxis, yAxis],
-        // itemStyle: {
-        //   color: `rgb(${r}, ${g}, ${b})`,
-        // },
       }
     },
-    initDrawRectOri() {
-      for (var i = 0; i < 4; i++) {
-        const data = this.boundary[i]
-        if (data) {
-          this.$set(this.roiValues, i * 2, data.minX);
-          this.$set(this.roiValues, i * 2 + 1, data.maxX);
-        }
-      }
-      this.reDrawRect();
-    },
     // 重绘矩形框区域
     reDrawRect() {
-      console.log(this.roiValues)
+      const chart = this.$refs.chartTwoDRef.getChartInstance()
+
+      // 得到外层容器四至范围
+      const { min: xMin, max: xMax } = this.twoDOption.xAxis
+      const { min: yMin, max: yMax } = this.twoDOption.yAxis
+      const [containerLeft, containerTop] = chart.convertToPixel({ seriesIndex: 0 }, [xMin, yMax]) // 拿到外层容器左上角坐标
+      const [containerRight, containerBottom] = chart.convertToPixel({ seriesIndex: 0 }, [xMax, yMin]) // 拿到外层容器右下角坐标
+      this.boundaryContainerPosition = {
+        left: containerLeft,
+        top: containerTop,
+        width: containerRight - containerLeft,
+        height: containerBottom - containerTop,
+      }
+
       if (this.showROI) {
-        // rect 遵循 左下 右下 右上 左上 左下 的顺序
+        this.boundaryList = this.boundary.map((item, index) => {
-        const colors = ['#0CB4C1', '#1B88E5', '#43960C', '#D09324']
+          const color = ColorList[index]
-        for (var i = 0; i < 4; i++) {
+          const [start, end] = item
-          const data = this.boundary[i]
+
-          if (this.roiValues.length > 7) {
+          const [left, top] = chart.convertToPixel({ seriesIndex: 0 }, [start, 4096]) // 拿到矩形左上角坐标
-            var _minx = this.roiValues[i*2]
+          const [right, bottom] = chart.convertToPixel({ seriesIndex: 0 }, [end, 0]) // 拿到矩形右下角坐标
-            var _maxX = this.roiValues[i*2+1]
+
-            const rect = [[_minx, data.minY], [_maxX, data.minY], [_maxX, data.maxY], [_minx, data.maxY], [_minx, data.minY],]
+          // 因为外层容器已经提供了 上/左 边距的定位，把这部分减去
-            this.twoDOption.series[i + 1].data = this.drawOneRect(rect, colors[i]).data
-          }
-        }
-        // lineSeries2.data = this.drawOneRect(rect2, color2).data
-      } else {
-        for (var i = 0; i < 4; i++) {
-          this.twoDOption.series[i + 1].data = []
-        }
-      }
-    },
-    /**
-     * 绘制一个矩形框区域
-     * @param {*} rect  左下 右下 右上 左上 左下 的顺序
-     */
-    drawOneRect(rect, color) {
           return {
-        data: rect,
+            borderColor: color.borderColor,
+            backgroundColor: color.bgColor,
+            top: top - containerTop,
+            height: bottom - top,
+            left: left - containerLeft,
+            width: right - left,
+          }
+        })
+      } else {
+        this.boundaryList = []
       }
     },
-    // 点击改变 ROI LIMITS
+
+    setVisualMapHeight() {
+      const chartContainerRef = this.$refs.chartContainerRef
+      this.twoDOption.visualMap.itemHeight = chartContainerRef.offsetHeight - 75
+    },
+
+    handleChartResize() {
+      this.reDrawRect()
+      this.setVisualMapHeight()
+    },
+
+    // 弹出gamma或beta弹窗
     handleChange(index) {
-      this.active = index
+      console.log('%c [ 弹窗 ]-582', 'font-size:13px; background:pink; color:#bf2c9f;', index)
     },
     // 点击unzoom
     handleUnzoom() {
-      const [graphic1, graphic2] = this.dragOption.graphic
-      const { minX, maxX, minY, maxY, color } = this.boundaryData
       this.twoDOption.xAxis.min = 0
       this.twoDOption.xAxis.max = 512
       this.twoDOption.yAxis.min = 0
       this.twoDOption.yAxis.max = 4096
-
-      // this.emitRangeChange([0, 256, 0, 256])
       this.buildScatterList()
-      this.$nextTick(() => {
-        const myChart = this.$refs.chartTwoDRef.getChartInstance()
-        graphic1.position = [
-          myChart.convertToPixel({ xAxisId: '2' }, minX),
-          myChart.convertToPixel({ yAxisId: '3' }, maxY),
-        ]
-        graphic2.position = [
-          myChart.convertToPixel({ xAxisId: '2' }, maxX),
-          myChart.convertToPixel({ yAxisId: '3' }, maxY),
-        ]
-        myChart.setOption(this.dragOption)
-      })
 
+      this.$nextTick(() => {
+        this.reDrawRect()
+      })
     },
+
+    // 点击Log
+    handleLog() {
+      this.isLog = !this.isLog
+      this.$bus.$emit('changeROILimitsYAxisType', this.isLog)
+    },
+
     // 鼠标按下时开启可刷选状态
     handleMouseDown() {
+      if (this.boundaryItem) {
+        return
+      }
+
       const chart = this.$refs.chartTwoDRef.getChartInstance()
       chart.dispatchAction({
         type: 'takeGlobalCursor',
@@ -685,8 +394,6 @@ export default {
     },
     // 刷选完毕时
     handleBrushEnd(param) {
-      const [graphic1, graphic2] = this.dragOption.graphic
-      const { minX: lineMinX, maxX: lineMaxX, minY: lineMinY, maxY: lineMaxY } = this.boundaryData
       const chart = this.$refs.chartTwoDRef.getChartInstance()
       const areas = param.areas[0]
       if (areas) {
@@ -706,43 +413,10 @@ export default {
         this.twoDOption.yAxis.min = rangeNumberFuncY(y1)
         this.twoDOption.yAxis.max = rangeNumberFuncY(y2)
         this.buildScatterList()
-        this.$nextTick(() => {
-          const myChart = this.$refs.chartTwoDRef.getChartInstance()
-          if (lineMinX > rangeNumberFuncX(x1) && lineMinX < rangeNumberFuncX(x2) && lineMaxX > rangeNumberFuncX(x2)) {
-            graphic1.position = [
-              myChart.convertToPixel({ xAxisId: '2' }, lineMinX),
-              myChart.convertToPixel({ yAxisId: '3' }, rangeNumberFuncY(y2)),
-            ]
-            myChart.setOption(this.dragOption)
-          } else if (
-            lineMinX < rangeNumberFuncX(x1) &&
-            lineMaxX > rangeNumberFuncX(x1) &&
-            lineMaxX < rangeNumberFuncX(x2)
-          ) {
-            graphic2.position = [
-              myChart.convertToPixel({ xAxisId: '2' }, lineMaxX),
-              myChart.convertToPixel({ yAxisId: '3' }, rangeNumberFuncY(y2)),
-            ]
-            myChart.setOption(this.dragOption)
-          } else if (
-            lineMinX > rangeNumberFuncX(x1) &&
-            lineMinX < rangeNumberFuncX(x2) &&
-            lineMaxX > rangeNumberFuncX(x1) &&
-            lineMaxX < rangeNumberFuncX(x2)
-          ) {
-            graphic1.position = [
-              myChart.convertToPixel({ xAxisId: '2' }, lineMinX),
-              myChart.convertToPixel({ yAxisId: '3' }, rangeNumberFuncY(y2)),
-            ]
-            graphic2.position = [
-              myChart.convertToPixel({ xAxisId: '2' }, lineMaxX),
-              myChart.convertToPixel({ yAxisId: '3' }, rangeNumberFuncY(y2)),
-            ]
-            myChart.setOption(this.dragOption)
-          }
-        })
-
         // this.emitRangeChange([x1, x2, y1, y2])
+        this.$nextTick(() => {
+          this.reDrawRect()
+        })
       }
 
       this.clearBrush(chart)
@@ -763,8 +437,7 @@ export default {
     // 点击ROI
     handleROI() {
       this.showROI = !this.showROI
-    },
+      this.reDrawRect()
-    handleLOG() {
     },
     // 点击Update
     async handleUpdate() {
@@ -772,8 +445,7 @@ export default {
       const { inputFileName } = this.sampleData
       try {
         const { success, result, message } = await putAction(
-          `/selfStation/updateROI?sampleFileName=${inputFileName}&startChannel=${this.startChannel}&endChannel=${this.endChannel
+          `/selfStation/updateROI?sampleFileName=${inputFileName}&startChannel=${this.startChannel}&endChannel=${this.endChannel}&ROINum=1`
-          }&ROINum=${this.currIdx + 1}`
         )
         if (success) {
           this.$emit('update:isLoading', false)
@@ -791,13 +463,6 @@ export default {
             }
           }
           this.$emit('refreshRoi', obj)
-          // this.$bus.$emit('updateRoi', obj.list)
-          this.boundaryData = {
-            minX: obj.start,
-            maxX: obj.stop,
-            minY: 0,
-            maxY: 4096,
-          }
         } else {
           this.$emit('update:isLoading', false)
         }
@@ -806,17 +471,74 @@ export default {
       }
     },
 
-    // 颜色插值算法
+    // 矩形周边点击
-    interpolateColor(percentage) {
+    handleBorderMouseDown(boundaryItem, direction, index) {
-      const color1 = { r: 255, g: 0, b: 0 },
+      this.boundaryRight = boundaryItem.left + boundaryItem.width
-        color2 = { r: 255, g: 255, b: 255 }
+      this.boundaryItem = boundaryItem
-
+      this.boundaryIndex = index
-      const r = color1.r + (color2.r - color1.r) * percentage
+      this.direction = direction
-      const g = color1.g + (color2.g - color1.g) * percentage
-      const b = color1.b + (color2.b - color1.b) * percentage
-      return { r, g, b }
     },
 
+    // 矩形周边移动
+    handleBorderMouseMove({ movementX }) {
+      if (!this.boundaryItem) {
+        return
+      }
+
+      const prevLeft = this.boundaryItem.left
+      // 移动的形式是在左侧移动，则改变left定位
+      if (this.direction == 'left') {
+        const nextLeft = prevLeft + movementX
+        const nextWidth = this.boundaryItem.width - movementX
+        // 如果移动到的位置将要超过右边线
+        if (nextLeft >= this.boundaryRight) {
+          this.boundaryItem.left = this.boundaryRight
+          this.boundaryItem.width = nextLeft - this.boundaryRight
+          this.direction = 'right'
+        } else {
+          this.boundaryItem.left = nextLeft
+          this.boundaryItem.width = nextWidth
+          this.direction = 'left'
+        }
+      }
+      // 移动的形式是在右侧移动，则改变宽度
+      else {
+        const nextWidth = this.boundaryItem.width + movementX
+        // 如果移动到的位置将要超过左边线
+        if (nextWidth <= 0) {
+          this.direction = 'left'
+          this.boundaryItem.left = prevLeft + nextWidth
+          this.boundaryItem.width = -nextWidth
+        } else {
+          this.boundaryItem.width = nextWidth
+          this.direction = 'right'
+        }
+      }
+
+      this.boundaryRight = this.boundaryItem.left + this.boundaryItem.width
+    },
+
+    // 鼠标离开图表
+    handleBorderMouseLeave() {
+      // 如果是改变矩形范围的情况
+      if (this.boundaryItem) {
+        // 物理坐标转换回坐标系坐标
+        const { left, width } = this.boundaryItem
+        const realLeft = left + this.boundaryContainerPosition.left
+
+        const chart = this.$refs.chartTwoDRef.getChartInstance()
+
+        const [start] = chart.convertFromPixel({ seriesIndex: 0 }, [realLeft, 4096])
+        const [end] = chart.convertFromPixel({ seriesIndex: 0 }, [realLeft + width, 4096])
+
+        this.$emit('boundaryChange', {
+          index: this.boundaryIndex,
+          start: parseInt(start.toFixed()),
+          end: parseInt(end.toFixed()),
+        })
+        this.boundaryItem = null
+      }
+    },
   },
 }
 </script>
@@ -824,12 +546,10 @@ export default {
 <style lang="less" scoped>
 .beta-gamma-spectrum-chart {
   height: 100%;
-
   &-operators {
     text-align: right;
     overflow: auto;
     height: 26px;
-    font-size: 16px;
     display: flex;
     justify-content: flex-end;
     gap: 9px;
@@ -844,47 +564,53 @@ export default {
       text-align: center;
       height: 100%;
       line-height: 26px;
-      min-width: 94px;
+      width: 100px;
-      padding: 0 10px;
       background-color: #406979;
       cursor: pointer;
       user-select: none;
-
-      &.active {
-        background-color: #1397a3;
     }
   }
-  }
-
   &-main {
     height: calc(100% - 40px);
     margin-top: 15px;
+    position: relative;
 
     ._2d-chart {
       height: 100%;
       display: flex;
 
       .custom-chart {
-        // width: calc(100% - 45px);
         width: 100%;
       }
-
-      .bar {
-        width: 30px;
-        margin-left: 15px;
-        height: 100%;
-        color: #ade6ee;
-        padding-top: 5px;
-        padding-bottom: 38px;
-        text-align: center;
-
-        &-main {
-          display: inline-block;
-          width: 14px;
-          height: calc(100% - 70px);
-          background: linear-gradient(to bottom, #ff0000 0, #fff 100%);
     }
   }
+
+  .boundary-list {
+    position: absolute;
+    overflow: hidden;
+    pointer-events: none;
+  }
+
+  .boundary-item {
+    position: absolute;
+    border: 1px solid transparent;
+    pointer-events: all;
+
+    &-left,
+    &-right {
+      position: absolute;
+      top: 0;
+      width: 2px;
+      bottom: 0;
+      cursor: w-resize;
+    }
+
+    &-left {
+      left: 0;
+    }
+
+    &-right {
+      right: 0;
     }
   }
 }

src/views/spectrumAnalysis/components/ResultDisplay-Beta.vue

@@ -84,7 +84,7 @@ const columns = [
     scopedSlots: {
       customRender: 'mdc',
     },
-    // width: 133,
+    width: 133,
   },
 ]
 export default {

src/views/spectrumAnalysis/components/RoiLimits.vue

@@ -1,318 +0,0 @@
-<template>
-    <div class="beta-gamma-spectrum">
-        <div :class="ismax[index] ? 'beta-gamma-spectrum-chart max' : 'beta-gamma-spectrum-chart'" v-for="(item, index) in buttons" :key="item" v-show="!ismaxed || ismax[index]">
-            <div class="beta-gamma-spectrum-chart-operators" ref="operatorsRef">
-                <a-row>
-                    <a-col :span="4">
-                        <div :style="{ background: colors[index] }" class="beta-gamma-spectrum-chart-operators-button">{{ item }}</div>
-                    </a-col>
-                    <a-col :span="20">
-                        <div style="float: right;width: 40px;">
-                            <img v-show="!ismax[index]" src="@/assets/maximize.png" @click="maximize(true, index)" />
-                            <img v-show="ismax[index]" src="@/assets/normal.png" @click="maximize(false, index)" />
-                        </div>
-                        <div style="float: right;color:#AD4140;width: 120px;">{{ 'Energy:' + eValue[index] }}</div>
-                        <div style="float: right;color:#8EC0C8;width: 80px;">{{ 'Count:' + yValue[index] }}</div>
-                        <div style="float: right;color:#8EC0C8;width: 95px;">{{ 'Channel:' + xValue[index] }}</div>
-                    </a-col>
-                </a-row>
-            </div>
-            <div class="beta-gamma-spectrum-chart-main">
-                <CustomChart ref="containerRef" :option="roiLimitsOptions[index]" />
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-import CustomChart from '@/components/CustomChart/index.vue'
-const buttons = ['ROI1', 'ROI2', 'ROI3', 'ROI4']
-const colors = ['#0CB4C1', '#1B88E5', '#43960C', '#D09324']
-
-// 折线图配置
-export default {
-    components: {
-        CustomChart,
-    },
-    props: {
-        ROILists: {
-            type: Array,
-            default: () => [],
-        },
-        ROIAnalyzeLists: {
-            type: Array,
-            default: () => [],
-        },
-        gammaEnergyData: {
-            type: Array,
-            default: () => [],
-        },
-    },
-    watch: {
-        ROILists: {
-            handler(newVal) {
-                this.newVal = newVal
-                this.buildOneLineList()
-            },
-            immediate: true,
-        },
-        ROIAnalyzeLists: {
-            handler(newVal) {
-                this.newAnalyzeVal = newVal
-                this.buildAnalyzeList()
-            },
-            immediate: false,
-        },
-    },
-    beforeDestroy() {
-        // const myChart = this.$refs.roiLimitsRef.getChartInstance()
-        // myChart.dispose()
-    },
-    data() {
-        this.buttons = buttons
-        this.colors = colors
-        return {
-            active: 0,
-            xValue: ['', '', '', ''],
-            yValue: ['', '', '', ''],
-            eValue: ['', '', '', ''],
-            ismax: [false, false, false, false],
-            ismaxed: false,
-            roiLimitsOptions: [
-                this.createRoiLimitsOption(0),
-                this.createRoiLimitsOption(1),
-                this.createRoiLimitsOption(2),
-                this.createRoiLimitsOption(3),
-            ],
-            charts: [],
-            newVal: [],
-            newAnalyzeVal: [],
-            opts: {
-                notMerge: true,
-            },
-        }
-    },
-    methods: {
-        buildOneLineList() {
-            for (var i = 0; i < 4; i++) {
-                var val = this.newVal[i]
-                if (val) {
-                    this.roiLimitsOptions[i].series.data = val.map((item) => [item.x, item.y])
-                } else {
-                    this.roiLimitsOptions[i].series.data = []
-                }
-            }
-        },
-        buildAnalyzeList() {
-            for (var i = 0; i < 4; i++) {
-                var val = this.newAnalyzeVal[i].allData
-                var newseries = []
-                var _series = this.roiLimitsOptions[i].series
-                newseries.push(_series)
-                val.forEach(item => {
-                    if (item.name != 'Count') {
-                        var _ser = {
-                            type: 'line',
-                            data: item.pointlist.map((item) => [item.x, item.y]),
-                            color: item.color,
-                            symbol: 'none'
-                        }
-                        newseries.push(_ser)
-                    }
-                })
-                this.roiLimitsOptions[i].series = newseries
-            }
-        },
-        handleTooltipFormat(params, index) {
-            if (Number.isInteger(params[0].value[0])) {
-                this.$set(this.xValue, index, params[0].value[0]);
-                this.$set(this.yValue, index, params[0].value[1]);
-                this.$set(this.eValue, index, this.gammaEnergyData[params[0].value[0]].toFixed(3));
-            }
-
-        },
-        maximize(bl, index) {
-            this.$set(this.ismax, index, bl);
-            this.ismaxed = this.ismax.includes(true);
-            this.$nextTick(() => {
-                this.$refs['containerRef'][index].getChartInstance().resize();
-            })
-        },
-        showTooltip(i) {
-            const chartRef = this.$refs['containerRef'][i].getChartInstance();
-            chartRef.dispatchAction({
-                type: 'showTip',
-                seriesIndex: 0,
-                dataIndex: 110 // 指定要显示 tooltip 的数据索引
-            });
-        },
-        createRoiLimitsOption(index) {
-            const self = this
-            return {
-                grid: {
-                    top: 10,
-                    left: 60,
-                    right: 20,
-                    bottom: 50,
-                },
-                tooltip: {
-                    show: true,
-                    trigger: 'axis',
-                    formatter: (params) => {
-                        self.handleTooltipFormat(params, index)
-                        //                 let content = ''
-                        //                 params.forEach((item) => {
-                        //                     // 提示框的内容样式及数据
-                        //                     content += `
-                        //   <!-- 圆点样式 -->
-                        //   <span style="color: #424864;">Channel ${item.axisValueLabel}</span><br>
-                        //   <span style="display: inline-block; margin-right: 10px; border-radius: 50%; width: 8px; height: 8px;background-color: ${item.color};"></span>
-                        //   <span >${item.value[1]}</span>
-                        // `
-                        //                 })
-                        //                 return content
-                    },
-                },
-                xAxis: {
-                    type: 'value',
-                    min:0,
-                    max:4096,
-                    name: 'Gamma Channel',
-                    nameTextStyle: {
-                        color: '#5b9cba',
-                        fontSize: 14,
-                    },
-                    nameLocation: 'center',
-                    nameGap: 30,
-                    boundaryGap: false,
-                    splitLine: {
-                        show: true,
-                        interval: 'auto',
-                        lineStyle: {
-                            color: 'rgba(119, 181, 213, .3)',
-                        },
-                    },
-                    axisTick: {
-                        show: false,
-                    },
-                    axisLine: {
-                        lineStyle: {
-                            color: 'rgba(119, 181, 213, .3)',
-                        },
-                    },
-                    axisLabel: {
-                        fontSize: 12,
-                        color: '#ade6ee',
-                    },
-                },
-                yAxis: {
-                    type: 'value',
-                    name: 'Count',
-                    nameTextStyle: {
-                        color: '#5b9cba',
-                        fontSize: 14,
-                    },
-                    nameLocation: 'center',
-                    nameGap: 40,
-                    splitLine: {
-                        lineStyle: {
-                            color: 'rgba(119, 181, 213, .3)',
-                        },
-                    },
-                    axisTick: {
-                        show: false,
-                    },
-                    axisLine: {
-                        lineStyle: {
-                            color: 'rgba(119, 181, 213, .3)',
-                        },
-                    },
-                    axisLabel: {
-                        fontSize: 12,
-                        color: '#ade6ee',
-                    },
-                },
-                series: {
-                    type: 'line',
-                    smooth: true,
-                    showSymbol: false,
-                    // symbol: 'circle',
-                    // symbolSize: 6,
-                    data: [],
-                    itemStyle: {
-                        normal: {
-                            color: '#baaa3d',
-                        },
-                    },
-                    lineStyle: {
-                        normal: {
-                            width: 2,
-                        },
-                    },
-                },
-            }
-        },
-    },
-}
-</script>
-
-<style lang="less" scoped>
-.beta-gamma-spectrum {
-    height: 100%;
-
-    &-chart {
-        height: 50%;
-        width: 50%;
-        float: left;
-
-        &-operators {
-            overflow: auto;
-            margin-bottom: -16px;
-            font-size: 13px;
-
-            &-button {
-                width: 50px;
-                margin-left: 60px;
-                text-align: center;
-            }
-
-            .ant-space-item:first-child {
-                span {
-                    width: 70px;
-                }
-            }
-
-            img {
-                width: 20px;
-                height: 20px;
-            }
-
-            span {
-                text-align: center;
-                height: 100%;
-                line-height: 26px;
-                width: 100px;
-                background-color: #406979;
-                cursor: pointer;
-                user-select: none;
-
-                &.active {
-                    background-color: #1397a3;
-                }
-            }
-        }
-
-        &-main {
-            height: calc(100% - 40px);
-            margin-top: 15px;
-        }
-    }
-
-    &-chart.max {
-        height: 100%;
-        width: 100%;
-        transform-origin: right top;
-    }
-
-}
-</style>

src/views/spectrumAnalysis/components/RoiLimits/RoiLimits.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="beta-gamma-spectrum" :class="{ 'has-max': isMax }">
+    <roi-limit-item
+      v-for="(title, index) in RoiTitles"
+      :key="title"
+      :title="title"
+      :title-color="RoiTitleColors[index]"
+      :energys="gammaEnergyData"
+      :roi-list="ROILists[index]"
+      :analyze-result="ROIAnalyzeLists[index]"
+      @toggle="handleToggle"
+    />
+  </div>
+</template>
+
+<script>
+import CustomChart from '@/components/CustomChart/index.vue'
+import RoiLimitItem from './components/RoiLimitItem.vue'
+const RoiTitles = ['ROI1', 'ROI2', 'ROI3', 'ROI4']
+const RoiTitleColors = ['#0CB4C1', '#1B88E5', '#43960C', '#D09324']
+
+// 折线图配置
+export default {
+  components: {
+    CustomChart,
+    RoiLimitItem,
+  },
+  props: {
+    ROILists: {
+      type: Array,
+      default: () => [],
+    },
+    ROIAnalyzeLists: {
+      type: Array,
+      default: () => [],
+    },
+    gammaEnergyData: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    this.RoiTitles = RoiTitles
+    this.RoiTitleColors = RoiTitleColors
+
+    return {
+      isMax: false,
+    }
+  },
+  methods: {
+    handleToggle(isMax) {
+      this.isMax = isMax
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.beta-gamma-spectrum {
+  height: 100%;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(2, 1fr);
+  column-gap: 36px;
+  row-gap: 11px;
+  position: relative;
+  overflow: hidden;
+
+  &.has-max {
+    grid-template-columns: 100%;
+    grid-template-rows: 100%;
+
+    .roi-limit-item:not(.is-max) {
+      display: none;
+    }
+  }
+}
+</style>

src/views/spectrumAnalysis/components/RoiLimits/components/RoiLimitItem.vue

@@ -0,0 +1,398 @@
+<template>
+  <div class="roi-limit-item" :class="{ 'is-max': isMax }">
+    <div class="roi-limit-item__header">
+      <div class="roi-limit-item__header-title" :style="{ backgroundColor: titleColor }">{{ title }}</div>
+      <div class="roi-limit-item__header-count">
+        <span>Channel: {{ axisInfo.channel }}</span>
+        <span>Count: {{ axisInfo.count }}</span>
+        <span class="energy">Energy: {{ axisInfo.energy }}</span>
+      </div>
+      <div class="roi-limit-item__header-fullscreen">
+        <img :src="isMax ? normal : maximize" @click="toggleFullScreen" />
+      </div>
+    </div>
+    <div class="roi-limit-item-content">
+      <custom-chart :option="option" autoresize />
+    </div>
+  </div>
+</template>
+
+<script>
+import CustomChart from '@/components/CustomChart/index.vue'
+import { cloneDeep } from 'lodash'
+import maximize from '@/assets/maximize.png'
+import normal from '@/assets/normal.png'
+import {
+  baseLineCtrlPoint,
+  baseLineSeries,
+  lcLineSeries,
+  scacLineSeries,
+  spectrumSeries,
+} from '@/views/spectrumAnalysis/seriesBuilder'
+import { buildLineSeries, findSeriesByName } from '@/utils/chartHelper'
+
+const option = {
+  grid: {
+    top: 10,
+    left: 20,
+    right: 20,
+    bottom: 25,
+    containLabel: true,
+  },
+  tooltip: {
+    show: true,
+    trigger: 'axis',
+    formatter: () => {},
+  },
+  xAxis: {
+    type: 'value',
+    name: 'Gamma Channel',
+    nameTextStyle: {
+      color: '#5b9cba',
+      fontSize: 14,
+    },
+    nameLocation: 'center',
+    nameGap: 30,
+    boundaryGap: false,
+    splitLine: {
+      show: true,
+      interval: 'auto',
+      lineStyle: {
+        color: 'rgba(119, 181, 213, .3)',
+      },
+    },
+    axisTick: {
+      show: false,
+    },
+    axisLine: {
+      lineStyle: {
+        color: 'rgba(119, 181, 213, .3)',
+      },
+    },
+    axisLabel: {
+      fontSize: 12,
+      color: '#ade6ee',
+    },
+    min: 1,
+    max: 'dataMax',
+  },
+  yAxis: {
+    type: 'log',
+    name: 'Count',
+    nameTextStyle: {
+      color: '#5b9cba',
+      fontSize: 14,
+    },
+    nameLocation: 'center',
+    nameGap: 40,
+    splitLine: {
+      lineStyle: {
+        color: 'rgba(119, 181, 213, .3)',
+      },
+    },
+    axisTick: {
+      show: false,
+    },
+    axisLine: {
+      lineStyle: {
+        color: 'rgba(119, 181, 213, .3)',
+      },
+    },
+    axisLabel: {
+      fontSize: 12,
+      color: '#ade6ee',
+      formatter: (value) => {
+        return value.toFixed(1)
+      },
+    },
+    min: 1,
+    max: 'dataMax',
+  },
+  series: [spectrumSeries, baseLineSeries, lcLineSeries, scacLineSeries, baseLineCtrlPoint],
+}
+
+export default {
+  props: {
+    title: String,
+    titleColor: String,
+    energys: {
+      type: Array,
+      default: () => [],
+    },
+    roiList: {
+      type: Array,
+      default: () => [],
+    },
+    analyzeResult: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  components: {
+    CustomChart,
+  },
+  data() {
+    this.maximize = maximize
+    this.normal = normal
+
+    this.channelData = {
+      peakGroup: [],
+      spectrumLine: null,
+      baseLine: null,
+      lcLine: null,
+      scacLine: null,
+      all: null,
+      baseLineCP: [],
+    }
+    this.peakList = [] // Peak 列表（非点位）
+    this.baseCtrls = {} // BaseCtrls
+
+    return {
+      option: cloneDeep(option),
+      axisInfo: {
+        channel: 0,
+        count: 0,
+        energy: 0,
+      },
+      isMax: false,
+    }
+  },
+  created() {
+    this.option.tooltip.formatter = this.handleTooltipFormat
+    this.$bus.$on('changeROILimitsYAxisType', this.changeYAxisType)
+  },
+  beforeDestroy() {
+    this.$bus.$off('changeROILimitsYAxisType', this.changeYAxisType)
+  },
+  methods: {
+    handleTooltipFormat(params) {
+      const [xAxis, count] = params[0].value
+      const channel = xAxis.toFixed() - 1
+      this.axisInfo = {
+        channel: Math.round(xAxis),
+        count: this.channelData.all ? this.channelData.all.pointlist[channel].y : count,
+        energy: this.energys[channel].toFixed(3),
+      }
+    },
+
+    // 切换
+    toggleFullScreen() {
+      this.isMax = !this.isMax
+
+      this.$emit('toggle', this.isMax)
+    },
+
+    /**
+     * 在返回的allData中查找指定的数据
+     * @param {Array} allData
+     * @param {*} name
+     * @param {*} group
+     */
+    getLineData(allData, name, group, isList = false) {
+      const arrFunc = isList ? Array.prototype.filter : Array.prototype.find
+      return arrFunc.call(allData, (item) => item.name == name && item.group == group) || {}
+    },
+
+    /**
+     * 转换pointlist类型数据到series的data可用的数据
+     */
+    transformPointListData(pointlist) {
+      if (!pointlist) {
+        return []
+      }
+      return pointlist.map(({ x, y }) => [x, y])
+    },
+
+    /**
+     * 设置图表数据和颜色
+     */
+    setSeriesData(series, seriesName, data, color) {
+      const find = findSeriesByName(series, seriesName)
+      find.data = data
+      if (color) {
+        find.itemStyle.color = color
+      }
+    },
+
+    // 重绘控制点
+    redrawCtrlPointBySeriesName() {
+      const series = findSeriesByName(this.option.series, 'BaseLine_Ctrl_Point')
+      const data = this.channelData.baseLineCP
+      series.data = data.map(({ size, color, point: { x, y } }) => {
+        return {
+          value: [x, y],
+          itemStyle: {
+            color: 'transparent',
+            borderColor: color,
+            borderWidth: size / 2,
+          },
+        }
+      })
+    },
+
+    // 重绘Peak Line
+    redrawPeakLine() {
+      const data = this.channelData.peakGroup
+      const peakLines = []
+      data.forEach((item, index) => {
+        peakLines.push(
+          buildLineSeries(`Peak_${index}`, this.transformPointListData(item.pointlist), item.color, {
+            z: 6,
+          })
+        )
+      })
+
+      this.option.series.push(...peakLines)
+    },
+
+    // 处理分析后的数据
+    handleAnalyzeResult() {
+      const { BaseCtrls, allData, peak, shadowChannelChart, shapeChannelData } = this.analyzeResult
+
+      if (peak) {
+        this.peakList = peak
+      }
+
+      if (BaseCtrls) {
+        this.baseCtrls = BaseCtrls
+      }
+
+      const channelPeakGroup = this.getLineData(allData, 'Peak', 'channel', true)
+
+      const channelBaseLine = this.getLineData(allData, 'BaseLine', 'channel')
+
+      const channelLcLine = this.getLineData(allData, 'Lc', 'channel')
+
+      const channelScacLine = this.getLineData(allData, 'Scac', 'channel')
+
+      const allChannel = this.getLineData(allData, 'Count', 'channel')
+
+      this.channelData = {
+        peakGroup: channelPeakGroup,
+        spectrumLine: shadowChannelChart,
+        baseLine: channelBaseLine,
+        lcLine: channelLcLine,
+        scacLine: channelScacLine,
+        all: allChannel,
+        baseLineCP: shapeChannelData,
+      }
+
+      // 设置 Spectrum Line
+      this.setSeriesData(
+        this.option.series,
+        'Spectrum',
+        this.transformPointListData(shadowChannelChart.pointlist),
+        shadowChannelChart.color
+      )
+
+      // 设置 BaseLine
+      this.setSeriesData(
+        this.option.series,
+        'BaseLine',
+        this.transformPointListData(channelBaseLine.pointlist),
+        channelBaseLine.color
+      )
+
+      // 设置 LcLine
+      this.setSeriesData(
+        this.option.series,
+        'LcLine',
+        this.transformPointListData(channelLcLine.pointlist),
+        channelLcLine.color
+      )
+
+      // 设置 ScacLine
+      this.setSeriesData(
+        this.option.series,
+        'ScacLine',
+        this.transformPointListData(channelScacLine.pointlist),
+        channelScacLine.color
+      )
+
+      // 设置 基线控制点
+      this.redrawCtrlPointBySeriesName()
+
+      // 设置 Peak Line
+      this.redrawPeakLine()
+    },
+
+    // 修改y轴类型
+    changeYAxisType(isLog) {
+      this.option.yAxis.type = isLog ? 'log' : 'value'
+    },
+  },
+  watch: {
+    roiList: {
+      handler(val) {
+        this.option.series[0].data = val.map(({ x, y }) => [x, y])
+      },
+      immediate: true,
+    },
+    analyzeResult: {
+      handler(val) {
+        if (val && Object.keys(val).length) {
+          this.handleAnalyzeResult()
+        }
+      },
+      immediate: true,
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.roi-limit-item {
+  position: relative;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  overflow: hidden;
+
+  &__header {
+    height: 18px;
+    display: flex;
+    align-items: center;
+
+    &-title {
+      width: 46px;
+      height: 100%;
+      line-height: 18px;
+      text-align: center;
+      font-family: ArialMT;
+      font-size: 12px;
+    }
+
+    &-count {
+      flex: 1;
+      display: flex;
+      justify-content: flex-end;
+      gap: 28px;
+      font-family: ArialMT;
+      font-size: 12px;
+      color: #ade6ee;
+
+      .energy {
+        color: #ff5656;
+      }
+    }
+
+    &-fullscreen {
+      margin-left: 30px;
+      width: 18px;
+      height: 18px;
+      cursor: pointer;
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+
+  &-content {
+    flex: 1;
+    overflow: hidden;
+  }
+}
+</style>