新加beta 页面

src/views/spectrumAnalysis/beta-analysis.vue

@@ -0,0 +1,292 @@
+<template>
+  <div class="beta-gamma-analysis">
+    <a-spin :spinning="isLoading">
+      <!-- 二级交互栏 -->
+      <div class="spectrum-analysis-sub-operators">
+        <pop-over-with-icon placement="bottomLeft">
+          Detailed-Information
+          <beta-gamma-detailed-infomation slot="content" :data="spectrumData" />
+        </pop-over-with-icon>
+        <pop-over-with-icon placement="bottomLeft">
+          QC Flags
+          <beta-gamma-qc-flags slot="content" :data="qcFlags" @click="handleQcFlagClick" />
+        </pop-over-with-icon>
+        <custom-select
+          v-model="spectraType"
+          :options="SampleType"
+          @change="changeChartByType"
+          style="width: 246px"
+          class="sample-select"
+        ></custom-select>
+        <div @click="handleDetalSelfStationCache">删除</div>
+      </div>
+      <!-- 二级交互栏结束 -->
+
+      <!-- 主体部分 -->
+      <div class="beta-gamma-analysis-main">
+        <!-- 中间图表部分 -->
+        <div class="beta-gamma-analysis-main-charts">
+          <div class="beta-gamma-analysis-main-charts-left">
+            <beta-gamma-chart-container>
+              <template slot="title"> Beta-Gamma Spectrum: Sample </template>
+              <beta-gamma-spectrum
+                ref="betaChartRef"
+                :betaEnergyData="betaEnergyData"
+                :gammaEnergyData="gammaEnergyData"
+                :histogramDataList="histogramDataList"
+                :boundary="boundaryList"
+              />
+            </beta-gamma-chart-container>
+          </div>
+          <div class="beta-gamma-analysis-main-charts-right">
+            <beta-gamma-chart-container>
+              <template slot="title"> ROI LIMITS </template>
+              <roi-limits ref="RoiChartRef" :ROILists="ROILists" />
+            </beta-gamma-chart-container>
+          </div>
+        </div>
+        <!-- 中间图表部分结束 -->
+        <!-- 底部显示 -->
+        <div class="beta-gamma-analysis-main-bottom">
+          <div class="beta-gamma-analysis-main-bottom-left">
+            <beta-gamma-chart-container>
+              <template slot="title"> Result display </template>
+              <result-display-beta :data="resultDisplay" @sendFlag="handleGetFlag"></result-display-beta>
+            </beta-gamma-chart-container>
+          </div>
+          <div class="beta-gamma-analysis-main-bottom-right">
+            <beta-gamma-chart-container>
+              <template slot="title"> ROI Param </template>
+              <roi-param :roiParam="roiParam" />
+            </beta-gamma-chart-container>
+          </div>
+        </div>
+        <!-- 底部显示结束 -->
+      </div>
+      <!-- 主体部分结束 -->
+    </a-spin>
+  </div>
+</template>
+
+<script>
+import PopOverWithIcon from './components/SubOperators/PopOverWithIcon.vue'
+import BetaGammaDetailedInfomation from './components/SubOperators/BetaGammaDetailedInfomation.vue'
+import BetaGammaQcFlags from './components/SubOperators/BetaGammaQcFlags.vue'
+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 RoiParam from './components/RoiParam.vue'
+import axios from 'axios'
+import { getAction, postAction, deleteAction } from '../../api/manage'
+const SampleType = [
+  {
+    label: 'Sample Data',
+    value: 'sample',
+  },
+  {
+    label: 'GasBg Data',
+    value: 'gasBg',
+  },
+  {
+    label: 'DetBg Data',
+    value: 'detBg',
+  },
+  {
+    label: 'QC Data',
+    value: 'qc',
+  },
+]
+export default {
+  components: {
+    PopOverWithIcon,
+    BetaGammaDetailedInfomation,
+    BetaGammaQcFlags,
+    CustomSelect,
+    BetaGammaChartContainer,
+    ResultDisplayBeta,
+    BetaGammaSpectrum,
+    RoiLimits,
+    RoiParam,
+  },
+  data() {
+    this.SampleType = SampleType
+    return {
+      isLoading: false,
+      spectrumData: {}, // Detailed Infomation 信息
+      spectraType: 'sample',
+      histogramDataList: [],
+      gammaEnergyData: [],
+      betaEnergyData: [],
+      ROILists: [],
+      roiParam: {
+        ROIOneStart: 0,
+        ROIOneStop: 0,
+        ROITwoStart: 0,
+        ROITwoStop: 0,
+        ROIThreeStart: 0,
+        ROIThreeStop: 0,
+        ROIFourStart: 0,
+        ROIFourStop: 0,
+      },
+      boundaryList: [],
+      sampleDetail: {},
+      qcFlags: {},
+      resultDisplay: [],
+    }
+  },
+  mounted() {
+    this.getSelfStationSampleDetail()
+  },
+  methods: {
+    async handleDetalSelfStationCache() {
+      let params = {
+        sampleFileName: 'ABC01_001-20240108_1405_S_FULL_40186.0.PHD',
+      }
+      try {
+        const { success, result, message } = await deleteAction('/selfStation/deleteSelfStationCache', params)
+      } catch (error) {
+        console.error(error)
+      }
+    },
+    async getSelfStationSampleDetail() {
+      let params = {
+        sampleFileName: 'ABC01_001-20240108_1405_S_FULL_40186.0.PHD',
+        detFileName: 'ABC01_001-20240108_1327_D_FULL_381505.PHD',
+      }
+      try {
+        this.isLoading = true
+        this.cancelLastRequest()
+        const cancelToken = this.createCancelToken()
+        const { success, result, message } = await getAction('/selfStation/loadFromFile', params, cancelToken)
+        if (success) {
+          this.sampleDetail = result
+          const {
+            spectrumData,
+            betaEnergyData,
+            gammaEnergyData,
+            histogramDataList,
+            ROIOneList,
+            ROITwoList,
+            ROIThreeList,
+            ROIFourList,
+            ROIOneStart,
+            ROIOneStop,
+            ROITwoStart,
+            ROITwoStop,
+            ROIThreeStart,
+            ROIThreeStop,
+            ROIFourStart,
+            ROIFourStop,
+          } = this.sampleDetail
+          this.spectrumData = spectrumData
+          this.histogramDataList = histogramDataList
+          this.gammaEnergyData = gammaEnergyData
+          this.betaEnergyData = betaEnergyData
+          this.ROILists = [ROIOneList, ROITwoList, ROIThreeList, ROIFourList]
+          this.roiParam.ROIOneStart = ROIOneStart
+          this.roiParam.ROIOneStop = ROIOneStop
+          this.roiParam.ROITwoStart = ROITwoStart
+          this.roiParam.ROITwoStop = ROITwoStop
+          this.roiParam.ROIThreeStart = ROIThreeStart
+          this.roiParam.ROIThreeStop = ROIThreeStop
+          this.roiParam.ROIFourStart = ROIFourStart
+          this.roiParam.ROIFourStop = ROIFourStop
+          let boundary1 = { minX: 500, maxX: ROIOneStop, minY: 0, maxY: 4096 }
+          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.boundaryList.push(boundary1, boundary2, boundary3, boundary4)
+          // this.$store.commit('ADD_SAMPLE_DATA', {
+          //   inputFileName: this.sample.sampleFileName,
+          //   data: result,
+          //   from: 'file',
+          // })
+          this.isLoading = false
+        } else {
+          this.$message.error(message)
+        }
+      } catch (error) {
+        console.error(error)
+      }
+    },
+    cancelLastRequest() {
+      if (this._cancelToken && typeof this._cancelToken == 'function') {
+        this._cancelToken()
+      }
+    },
+
+    createCancelToken() {
+      const cancelToken = new axios.CancelToken((c) => {
+        this._cancelToken = c
+      })
+      return cancelToken
+    },
+    changeChartByType(val) {
+      console.log(val)
+    },
+    handleQcFlagClick(item) {
+      console.log(item)
+    },
+    handleGetFlag(val, obj) {
+      console.log(val, obj)
+    },
+  },
+  destroyed() {
+    this.cancelLastRequest()
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.beta-gamma-analysis {
+  height: 100%;
+  .ant-spin-nested-loading {
+    height: 100%;
+
+    ::v-deep {
+      .ant-spin-container {
+        height: 100%;
+      }
+    }
+  }
+  .sample-select {
+    ::v-deep {
+      .ant-select-selection {
+        background-color: transparent !important;
+        color: #ade6ee;
+      }
+    }
+  }
+  &-main {
+    height: calc(100% - 51px);
+    overflow: auto hidden;
+    &-charts {
+      height: calc(100% - 220px);
+      display: flex;
+      gap: 30px;
+      overflow: auto hidden;
+      &-left {
+        flex: 1;
+      }
+      &-right {
+        flex: 1;
+      }
+    }
+    &-bottom {
+      margin-top: 20px;
+      height: 234px;
+      display: flex;
+      gap: 30px;
+      overflow: auto hidden;
+      &-left {
+        flex: 1;
+      }
+      &-right {
+        flex: 1;
+      }
+    }
+  }
+}
+</style>

src/views/spectrumAnalysis/components/BetaGammaSpectrum.vue

@@ -0,0 +1,758 @@
+<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)"
+      >
+        {{ item }}
+      </span>
+      <span @click="handleUnzoom">Unzoom</span>
+      <span @click="handleROI">ROI</span>
+      <span @click="handleUpdate">Update</span>
+    </div>
+    <div class="beta-gamma-spectrum-chart-main">
+      <!-- 2D 图表，为了相应Unzoom采用的v-show -->
+      <div class="_2d-chart" v-show="active == 0">
+        <CustomChart
+          ref="chartTwoDRef"
+          :option="twoDOption"
+          @zr:mousedown="handleMouseDown"
+          @zr:mouseup="handleMouseUp"
+        />
+        <!-- @brushEnd="handleBrushEnd" -->
+        <!-- @zr:mousemove="handleMouseMove" -->
+        <div class="bar">
+          <color-palette v-model="currCount" />
+          <div>{{ currCount }}</div>
+          <div class="bar-main"></div>
+          <div>0</div>
+        </div>
+      </div>
+      <!-- 2D图表结束 -->
+      <CustomChart v-if="active == 1" key="1" ref="roiLimitsRef" :option="gammaOption" />
+      <CustomChart v-if="active == 2" key="2" ref="roiLimitsRef" :option="betaOption" />
+    </div>
+  </div>
+</template>
+
+<script>
+import CustomChart from '@/components/CustomChart/index.vue'
+import ColorPalette from './ColorPalette.vue'
+import { getXAxisAndYAxisByPosition, rangeNumber } from '@/utils/chartHelper.js'
+const buttons = ['Beta-Gamma', 'Gamma', 'Beta']
+// Beta-Gamma 的配置
+const twoDOption = {
+  grid: {
+    top: 15,
+    left: 60,
+    right: 20,
+    bottom: 45,
+  },
+  tooltip: {
+    trigger: 'item',
+    formatter: (params) => {
+      const [b, g, c] = params.value
+      return `Beta: ${b}<br>Gamma: ${g}<br>Count: ${c}`
+    },
+    axisPointer: {
+      animation: false,
+      type: 'cross',
+      lineStyle: {
+        type: 'dashed',
+      },
+    },
+  },
+  xAxis: {
+    name: 'Beta Channel',
+    nameTextStyle: {
+      color: '#5b9cba',
+      fontSize: 16,
+    },
+    nameLocation: 'center',
+    nameGap: 30,
+    axisLine: {
+      lineStyle: {
+        color: 'rgba(119, 181, 213, .3)',
+      },
+    },
+    axisLabel: {
+      color: '#ade6ee',
+      fontSize: 12,
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: 'rgba(119, 181, 213, .3)',
+      },
+    },
+    axisTick: {
+      show: false,
+    },
+    min: 0,
+    max: 1024,
+    interval: 128,
+  },
+  yAxis: {
+    name: 'Gamma Channel',
+    nameTextStyle: {
+      color: '#5b9cba',
+      fontSize: 16,
+    },
+    nameLocation: 'center',
+    nameGap: 40,
+    axisLine: {
+      lineStyle: {
+        color: 'rgba(119, 181, 213, .3)',
+      },
+    },
+    axisLabel: {
+      color: '#ade6ee',
+      fontSize: 12,
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: 'rgba(119, 181, 213, .3)',
+      },
+    },
+    axisTick: {
+      show: false,
+    },
+    min: 0,
+    max: 4096,
+    interval: 512,
+  },
+  series: {
+    type: 'scatterGL',
+    symbolSize: 4,
+    data: [],
+    itemStyle: {
+      color: '#fff',
+    },
+    markLine: {
+      silent: true,
+      symbol: 'none',
+      data: [],
+      animation: false,
+      lineStyle: {
+        type: 'solid',
+        width: 2,
+      },
+    },
+  },
+  brush: {},
+  animation: false,
+}
+// 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: {
+    name: '今日',
+    type: 'line',
+    smooth: true,
+    showSymbol: 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: {
+    name: '今日',
+    type: 'line',
+    smooth: true,
+    showSymbol: false,
+    symbol: 'circle',
+    symbolSize: 6,
+    data: [],
+    itemStyle: {
+      normal: {
+        color: '#baaa3d',
+      },
+    },
+    lineStyle: {
+      normal: {
+        width: 2,
+      },
+    },
+  },
+}
+export default {
+  components: {
+    CustomChart,
+    ColorPalette,
+  },
+  props: {
+    histogramDataList: {
+      type: Array,
+      default: () => [],
+    },
+    gammaEnergyData: {
+      type: Array,
+      default: () => [],
+    },
+    betaEnergyData: {
+      type: Array,
+      default: () => [],
+    },
+    boundary: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  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[0]
+        this.reDrawRect()
+      },
+      immediate: true,
+    },
+    currCount: {
+      handler() {
+        this.buildScatterList()
+      },
+      immediate: true,
+    },
+  },
+  data() {
+    this.buttons = buttons
+    return {
+      active: 0,
+      twoDOption,
+      gammaOption,
+      betaOption,
+      currCount: 50,
+      showROI: true,
+    }
+  },
+  mounted() {
+    this.twoDOption.brush = { toolbox: [] }
+  },
+  methods: {
+    // 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() {
+      const {
+        xAxis: { min: minX, max: maxX },
+        yAxis: { min: minY, max: maxY },
+      } = this.twoDOption
+
+      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))
+      console.log('this.twoDOption.series.data', this.twoDOption.series.data)
+    },
+
+    // 构造一个scatter 的点
+    buildScatterItem(xAxis, yAxis, count) {
+      const { r, g, b } = this.interpolateColor(1 - count / this.currCount)
+      return {
+        value: [xAxis, yAxis],
+        itemStyle: {
+          color: `rgb(${r}, ${g}, ${b})`,
+        },
+      }
+    },
+    // 重绘矩形框区域
+    reDrawRect() {
+      const rectList = []
+
+      if (this.showROI) {
+        const { minX, maxX, minY, maxY, color } = this.boundaryData
+        // rect 遵循 左下 右下 右上 左上 的顺序
+        const rect = [
+          [minX, minY],
+          [maxX, minY],
+          [maxX, maxY],
+          [minX, maxY],
+        ]
+
+        rectList.push(...this.drawOneRect(rect, color))
+      }
+      this.twoDOption.series.markLine.data = rectList
+    },
+    /**
+     * 绘制一个矩形框区域
+     * 矩形框在这里的实现是由几条线段围起来的，但由于线段在超出图表区域显示有问题，故作了以下处理
+     * @param {*} rect  左下 右下 右上 左上 的顺序
+     */
+    drawOneRect(rect, color) {
+      const rectList = []
+      const {
+        xAxis: { min: minX, max: maxX },
+        yAxis: { min: minY, max: maxY },
+      } = this.twoDOption
+
+      const inchartPoints = this.getInChartPoints(rect)
+      const outchartPoints = rect.filter((pointItem) => !inchartPoints.includes(pointItem))
+      // 如果框选范围内只有俩点
+      if (inchartPoints.length == 2) {
+        const [point1, point2] = inchartPoints
+        const isVerticleLine = this.isVerticleLine(point1, point2)
+        // 如果是纵向标记线，判断另两个点是在左边还是右边
+        if (isVerticleLine) {
+          const find = outchartPoints.find((outcharPoint) => point1[1] == outcharPoint[1]) // 找出纵坐标相同的在图表外面的点
+          // 判断在图表外的这个点是在左边还是右边
+          const isLeft = find[0] <= point1[0]
+          /**
+           * 如果在左边，推入左边俩点构成矩形
+           * y
+           * |________________
+           * |                |
+           * |________________|
+           * |
+           * |——————————————————— x
+           **/
+
+          if (isLeft) {
+            inchartPoints.forEach((point) => {
+              rectList.push(this.generateLineDataByTwoPoints([minX, point[1]], point))
+            })
+
+            rectList.push(this.generateLineDataByTwoPoints(point1, point2))
+          }
+          // 如果是右边，同理，推入右边俩点构成矩形
+          else {
+            inchartPoints.forEach((point) => {
+              rectList.push(this.generateLineDataByTwoPoints([maxX, point[1]], point))
+            })
+            rectList.push(this.generateLineDataByTwoPoints(point1, point2))
+          }
+        }
+        // 如果是纵向标记线，判断另两个点是在上边还是下边
+        else {
+          const find = outchartPoints.find((outcharPoint) => point1[0] == outcharPoint[0]) // 找出横坐标相同的在图表外面的点
+          // 判断在图表外的这个点是在上边还是右边
+          const isBottom = find[1] <= point1[1]
+          /**
+           * 如果在下边，推入下边俩点构成矩形
+           **/
+
+          if (isBottom) {
+            inchartPoints.forEach((point) => {
+              rectList.push(this.generateLineDataByTwoPoints([point[0], minY], point))
+            })
+
+            rectList.push(this.generateLineDataByTwoPoints(point1, point2))
+          }
+          // 如果是上边，同理，推入上边俩点构成矩形
+          else {
+            inchartPoints.forEach((point) => {
+              rectList.push(this.generateLineDataByTwoPoints([point[0], maxY], point))
+            })
+
+            rectList.push(this.generateLineDataByTwoPoints(point1, point2))
+          }
+        }
+      }
+      // 只有一个点在范围内，则是选中了矩形的一个角
+      else if (inchartPoints.length == 1) {
+        const point = inchartPoints[0]
+        const isLeft = !!outchartPoints.find((outPoint) => outPoint[0] < point[0])
+        const isBottom = !!outchartPoints.find((outPoint) => outPoint[1] < point[1])
+        // 截取的右上角
+        if (isLeft && isBottom) {
+          rectList.push(this.generateLineDataByTwoPoints(point, [minX, point[1]]))
+          rectList.push(this.generateLineDataByTwoPoints(point, [point[0], minY]))
+        }
+        // 截取的右下角
+        if (isLeft && !isBottom) {
+          rectList.push(this.generateLineDataByTwoPoints(point, [minX, point[1]]))
+          rectList.push(this.generateLineDataByTwoPoints(point, [point[0], maxY]))
+        }
+        // 截取的左下角
+        if (!isLeft && !isBottom) {
+          rectList.push(this.generateLineDataByTwoPoints(point, [maxX, point[1]]))
+          rectList.push(this.generateLineDataByTwoPoints(point, [point[0], maxY]))
+        }
+        // 截取的左上角
+        if (!isLeft && isBottom) {
+          rectList.push(this.generateLineDataByTwoPoints(point, [maxX, point[1]]))
+          rectList.push(this.generateLineDataByTwoPoints(point, [point[0], minY]))
+        }
+      }
+      // 全在里面
+      else if (inchartPoints.length == 4) {
+        // 按顺序挨个连起来，并且尾部连到头部
+        rect.forEach((point, index) => {
+          if (index == rect.length - 1) {
+            rectList.push(this.generateLineDataByTwoPoints(point, rect[0]))
+          } else {
+            rectList.push(this.generateLineDataByTwoPoints(point, rect[index + 1]))
+          }
+        })
+      }
+      // 全不在里面
+      else {
+        // 筛选出所有的在框选范围内的横坐标
+        const xAxisList = rect.map((item) => item[0]).filter((xAxis) => xAxis > minX && xAxis < maxX)
+        const leftBottomPoint = rect[0]
+        const rightBottomPoint = rect[1]
+        const rightTopPoint = rect[3]
+        const minYAxis = rightBottomPoint[1]
+        const maYAxis = rightTopPoint[1]
+        // 需要显示左右两侧的框线
+        if (xAxisList.length == 4 && minYAxis < minY && maYAxis > maxY) {
+          const minAxis = Math.min(...xAxisList)
+          const maxAxis = Math.max(...xAxisList)
+          rectList.push(this.generateLineDataByTwoPoints([minAxis, minY], [minAxis, maxY]))
+          rectList.push(this.generateLineDataByTwoPoints([maxAxis, minY], [maxAxis, maxY]))
+        }
+        // 需要显示左右其中一条框线
+        else if (xAxisList.length == 2 && minYAxis < minY && maYAxis > maxY) {
+          const xAxis = xAxisList[0]
+          rectList.push(this.generateLineDataByTwoPoints([xAxis, minY], [xAxis, maxY]))
+        }
+
+        // 筛选出所有的在框选范围内的横坐标
+        const yAxisList = rect.map((item) => item[1]).filter((xAxis) => xAxis > minY && xAxis < maxY)
+        const minXAxis = leftBottomPoint[0]
+        const maxXAxis = rightBottomPoint[0]
+        // 需要显示上下两侧的框线
+        if (yAxisList.length == 4 && minXAxis < minX && maxXAxis > maxX) {
+          const minAxis = Math.min(...yAxisList)
+          const maxAxis = Math.max(...yAxisList)
+          rectList.push(this.generateLineDataByTwoPoints([minX, minAxis], [maxX, minAxis]))
+          rectList.push(this.generateLineDataByTwoPoints([minX, maxAxis], [maxX, maxAxis]))
+        }
+        // 需要显示左右其中一条框线
+        else if (yAxisList.length == 2 && minXAxis < minX && maxXAxis > maxX) {
+          const yAxis = yAxisList[0]
+          rectList.push(this.generateLineDataByTwoPoints([minX, yAxis], [maxX, yAxis]))
+        }
+      }
+      // 补齐颜色
+      rectList.forEach((item) => {
+        item[0].lineStyle = {
+          color,
+        }
+      })
+      return rectList
+    },
+    /**
+     * 获取在框选范围内的点列表
+     * @param { Array<Array<number>> } rectInfo
+     */
+    getInChartPoints(rectInfo) {
+      const {
+        xAxis: { min: minX, max: maxX },
+        yAxis: { min: minY, max: maxY },
+      } = this.twoDOption
+
+      return rectInfo.filter((point) => {
+        const [xAxis, yAxis] = point
+        return xAxis >= minX && xAxis <= maxX && yAxis >= minY && yAxis <= maxY
+      })
+    },
+    /**
+     * 根据两个点生成一个markLine直线
+     */
+    generateLineDataByTwoPoints(point1, point2) {
+      return [
+        {
+          xAxis: point1[0],
+          yAxis: point1[1],
+        },
+        {
+          xAxis: point2[0],
+          yAxis: point2[1],
+        },
+      ]
+    },
+    // 点击改变Beta-Gamma Spectrum: Sample图表类型
+    handleChange(index) {
+      this.active = index
+    },
+    // 点击unzoom
+    handleUnzoom() {
+      this.twoDOption.xAxis.min = 0
+      this.twoDOption.xAxis.max = 256
+      this.twoDOption.yAxis.min = 0
+      this.twoDOption.yAxis.max = 256
+
+      // this.emitRangeChange([0, 256, 0, 256])
+      // this.reDrawRect()
+
+      this.buildScatterList()
+    },
+    // 鼠标按下时开启可刷选状态
+    handleMouseDown() {
+      const chart = this.$refs.chartRef.getChartInstance()
+      chart.dispatchAction({
+        type: 'takeGlobalCursor',
+        // 如果想变为“可刷选状态”，必须设置。不设置则会关闭“可刷选状态”。
+        key: 'brush',
+        brushOption: {
+          // 参见 brush 组件的 brushType。如果设置为 false 则关闭“可刷选状态”。
+          brushType: 'rect',
+        },
+      })
+    },
+
+    handleMouseUp() {
+      setTimeout(() => {
+        const chart = this.$refs.chartRef.getChartInstance()
+        this.clearBrush(chart)
+      }, 0)
+    },
+    // 刷选完毕时
+    handleBrushEnd(param) {
+      const chart = this.$refs.chartRef.getChartInstance()
+      const areas = param.areas[0]
+      if (areas) {
+        const range = areas.range
+        const [[minX, maxX], [minY, maxY]] = range
+
+        const point1 = chart.convertFromPixel({ seriesIndex: 0 }, [minX, minY]).map((num) => parseInt(num.toFixed()))
+        const point2 = chart.convertFromPixel({ seriesIndex: 0 }, [maxX, maxY]).map((num) => parseInt(num.toFixed()))
+
+        const [x1, y2, x2, y1] = [...point1, ...point2] // 根据解析出的数据确定真实的范围
+
+        const rangeNumberFunc = rangeNumber(0, 256)
+
+        this.twoDOption.xAxis.min = rangeNumberFunc(x1)
+        this.twoDOption.xAxis.max = rangeNumberFunc(x2)
+        this.twoDOption.yAxis.min = rangeNumberFunc(y1)
+        this.twoDOption.yAxis.max = rangeNumberFunc(y2)
+
+        this.emitRangeChange([x1, x2, y1, y2])
+
+        this.reDrawRect()
+
+        this.buildScatterList()
+      }
+
+      this.clearBrush(chart)
+    },
+
+    // 点击ROI
+    handleROI() {
+      this.showROI = !this.showROI
+      this.reDrawRect()
+    },
+    // 点击Update
+    handleUpdate() {},
+
+    // 颜色插值算法
+    interpolateColor(percentage) {
+      const color1 = { r: 255, g: 0, b: 0 },
+        color2 = { r: 255, g: 255, b: 255 }
+
+      const r = color1.r + (color2.r - color1.r) * percentage
+      const g = color1.g + (color2.g - color1.g) * percentage
+      const b = color1.b + (color2.b - color1.b) * percentage
+      return { r, g, b }
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.beta-gamma-spectrum-chart {
+  height: 100%;
+  &-operators {
+    text-align: right;
+    overflow: auto;
+    height: 26px;
+    display: flex;
+    justify-content: flex-end;
+    gap: 9px;
+
+    .ant-space-item:first-child {
+      span {
+        width: 70px;
+      }
+    }
+
+    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;
+    ._2d-chart {
+      height: 100%;
+      display: flex;
+
+      .custom-chart {
+        width: calc(100% - 45px);
+      }
+
+      .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%);
+        }
+      }
+    }
+  }
+}
+</style>

src/views/spectrumAnalysis/components/BetaGammaSpectrumChart.vue

@@ -56,11 +56,11 @@ const twoDOption = {
     top: 15,
     left: 55,
     right: 10,
-    bottom: 45
+    bottom: 45,
   },
   tooltip: {
     trigger: 'item',
-    formatter: params => {
+    formatter: (params) => {
       const [b, g, c] = params.value
       return `Beta: ${b}<br>Gamma: ${g}<br>Count: ${c}`
     },
@@ -68,76 +68,76 @@ const twoDOption = {
       animation: false,
       type: 'cross',
       lineStyle: {
-        type: 'dashed'
+        type: 'dashed',
-      }
+      },
-    }
+    },
   },
   xAxis: {
     name: 'Beta Channel',
     nameTextStyle: {
       color: '#5b9cba',
-      fontSize: 16
+      fontSize: 16,
     },
     nameLocation: 'center',
     nameGap: 30,
     axisLine: {
       lineStyle: {
-        color: 'rgba(119, 181, 213, .3)'
+        color: 'rgba(119, 181, 213, .3)',
-      }
+      },
     },
     axisLabel: {
       color: '#ade6ee',
-      fontSize: 12
+      fontSize: 12,
     },
     splitLine: {
       show: true,
       lineStyle: {
-        color: 'rgba(119, 181, 213, .3)'
+        color: 'rgba(119, 181, 213, .3)',
-      }
+      },
     },
     axisTick: {
-      show: false
+      show: false,
     },
     min: 0,
     max: 256,
-    interval: 64
+    interval: 64,
   },
   yAxis: {
     name: 'Gamma Channel',
     nameTextStyle: {
       color: '#5b9cba',
-      fontSize: 16
+      fontSize: 16,
     },
     nameLocation: 'center',
     nameGap: 35,
     axisLine: {
       lineStyle: {
-        color: 'rgba(119, 181, 213, .3)'
+        color: 'rgba(119, 181, 213, .3)',
-      }
+      },
     },
     axisLabel: {
       color: '#ade6ee',
-      fontSize: 12
+      fontSize: 12,
     },
     splitLine: {
       show: true,
       lineStyle: {
-        color: 'rgba(119, 181, 213, .3)'
+        color: 'rgba(119, 181, 213, .3)',
-      }
+      },
     },
     axisTick: {
-      show: false
+      show: false,
     },
     min: 0,
     max: 256,
-    interval: 64
+    interval: 64,
   },
   series: {
     type: 'scatterGL',
     symbolSize: 4,
     data: [],
     itemStyle: {
-      color: '#fff'
+      color: '#fff',
     },
     markLine: {
       silent: true,
@@ -146,12 +146,12 @@ const twoDOption = {
       animation: false,
       lineStyle: {
         type: 'solid',
-        width: 2
+        width: 2,
-      }
+      },
-    }
+    },
   },
   brush: {},
-  animation: false
+  animation: false,
 }
 
 //3D Surface 配置
@@ -162,66 +162,66 @@ const threeDSurfaceOption = {
     formatter: ({ value: [x, y, z] }) => {
       // 自定义 tooltip 的内容
       return `Beta Channel:${x} Count:${z} Gamma Channel: ${y}`
-    }
+    },
   },
   visualMap: {
     show: false,
     min: 0,
     max: 0,
     inRange: {
-      color: ['#0DCF38', '#B5475E']
+      color: ['#0DCF38', '#B5475E'],
-    }
+    },
   },
   grid3D: {
     axisLabel: {
-      color: '#ade6ee'
+      color: '#ade6ee',
     },
     axisPointer: {
-      show: false
+      show: false,
     },
     axisLine: {
       lineStyle: {
-        color: 'rgba(119, 181, 213, .3)'
+        color: 'rgba(119, 181, 213, .3)',
-      }
+      },
     },
     splitLine: {
       lineStyle: {
-        color: 'rgba(119, 181, 213, .3)'
+        color: 'rgba(119, 181, 213, .3)',
-      }
+      },
-    }
+    },
   },
   xAxis3D: {
     name: 'Beta Channel',
     nameTextStyle: {
       color: '#5b9cba',
-      fontSize: 14
+      fontSize: 14,
     },
     min: 0,
     max: 256,
-    interval: 64
+    interval: 64,
   },
   yAxis3D: {
     name: 'Gamma Channel',
     nameTextStyle: {
       color: '#5b9cba',
-      fontSize: 14
+      fontSize: 14,
     },
     min: 0,
     max: 256,
-    interval: 64
+    interval: 64,
   },
   zAxis3D: {
     name: 'Count',
     nameTextStyle: {
       color: '#5b9cba',
-      fontSize: 14
+      fontSize: 14,
     },
-    max: 0
+    max: 0,
   },
   series: {
     type: 'surface',
-    data: []
+    data: [],
-  }
+  },
 }
 
 // 3D Scatter 配置
@@ -231,92 +231,92 @@ const threeDScatterOption = {
     formatter: ({ value: [x, y, z] }) => {
       // 自定义 tooltip 的内容
       return `Beta Channel:${x} Count:${z} Gamma Channel: ${y}`
-    }
+    },
   },
   visualMap: {
     show: false,
     min: 0,
     max: 0,
     inRange: {
-      color: ['#0DCF38', '#B5475E']
+      color: ['#0DCF38', '#B5475E'],
-    }
+    },
   },
   grid3D: {
     axisLabel: {
-      color: '#ade6ee'
+      color: '#ade6ee',
     },
     axisPointer: {
-      show: false
+      show: false,
     },
     axisLine: {
       lineStyle: {
-        color: 'rgba(119, 181, 213, .3)'
+        color: 'rgba(119, 181, 213, .3)',
-      }
+      },
     },
     splitLine: {
       lineStyle: {
-        color: 'rgba(119, 181, 213, .3)'
+        color: 'rgba(119, 181, 213, .3)',
-      }
+      },
-    }
+    },
   },
   xAxis3D: {
     name: 'Beta Channel',
     nameTextStyle: {
       color: '#5b9cba',
-      fontSize: 14
+      fontSize: 14,
     },
     min: 0,
     max: 256,
-    interval: 64
+    interval: 64,
   },
   yAxis3D: {
     name: 'Gamma Channel',
     nameTextStyle: {
       color: '#5b9cba',
-      fontSize: 14
+      fontSize: 14,
     },
     min: 0,
     max: 256,
-    interval: 64
+    interval: 64,
   },
   zAxis3D: {
     name: 'Count',
     nameTextStyle: {
       color: '#5b9cba',
-      fontSize: 14
+      fontSize: 14,
     },
-    max: 0
+    max: 0,
   },
   series: {
     type: 'scatter3D',
     symbolSize: 5,
     emphasis: {
       label: {
-        show: false
+        show: false,
-      }
+      },
+    },
+    data: [],
   },
-    data: []
-  }
 }
 
 export default {
   props: {
     histogramDataList: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     histogramDataDList: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     boundary: {
       type: Array,
-      default: () => []
+      default: () => [],
-    }
+    },
   },
   components: {
     CustomChart,
-    ColorPalette
+    ColorPalette,
   },
   data() {
     this.buttons = buttons
@@ -328,7 +328,7 @@ export default {
       twoDOption,
       threeDSurfaceOption,
       threeDScatterOption,
-      showROI: true
+      showROI: true,
     }
   },
 
@@ -390,8 +390,8 @@ export default {
         key: 'brush',
         brushOption: {
           // 参见 brush 组件的 brushType。如果设置为 false 则关闭“可刷选状态”。
-          brushType: 'rect'
+          brushType: 'rect',
-        }
+        },
       })
     },
 
@@ -406,12 +406,12 @@ export default {
       // 清理刷选的范围
       chart.dispatchAction({
         type: 'brush',
-        areas: []
+        areas: [],
       })
 
       // 改为不可刷选状态
       chart.dispatchAction({
-        type: 'takeGlobalCursor'
+        type: 'takeGlobalCursor',
       })
     },
 
@@ -423,8 +423,8 @@ export default {
         const range = areas.range
         const [[minX, maxX], [minY, maxY]] = range
 
-        const point1 = chart.convertFromPixel({ seriesIndex: 0 }, [minX, minY]).map(num => parseInt(num.toFixed()))
+        const point1 = chart.convertFromPixel({ seriesIndex: 0 }, [minX, minY]).map((num) => parseInt(num.toFixed()))
-        const point2 = chart.convertFromPixel({ seriesIndex: 0 }, [maxX, maxY]).map(num => parseInt(num.toFixed()))
+        const point2 = chart.convertFromPixel({ seriesIndex: 0 }, [maxX, maxY]).map((num) => parseInt(num.toFixed()))
 
         const [x1, y2, x2, y1] = [...point1, ...point2] // 根据解析出的数据确定真实的范围
 
@@ -449,7 +449,7 @@ export default {
     buildScatterList() {
       const {
         xAxis: { min: minX, max: maxX },
-        yAxis: { min: minY, max: maxY }
+        yAxis: { min: minY, max: maxY },
       } = this.twoDOption
 
       this.twoDOption.series.data = this.histogramDataDList
@@ -459,12 +459,12 @@ export default {
 
     // 构造一个scatter 的点
     buildScatterItem(xAxis, yAxis, count) {
-      const { r, g, b } = this.interpolateColor(1 - (count / this.currCount))
+      const { r, g, b } = this.interpolateColor(1 - count / this.currCount)
       return {
         value: [xAxis, yAxis],
         itemStyle: {
-          color: `rgb(${r}, ${g}, ${b})`
+          color: `rgb(${r}, ${g}, ${b})`,
-        }
+        },
       }
     },
 
@@ -503,7 +503,7 @@ export default {
             [minX, minY],
             [maxX, minY],
             [maxX, maxY],
-            [minX, maxY]
+            [minX, maxY],
           ]
 
           rectList.push(...this.drawOneRect(rect, color))
@@ -521,18 +521,18 @@ export default {
       const rectList = []
       const {
         xAxis: { min: minX, max: maxX },
-        yAxis: { min: minY, max: maxY }
+        yAxis: { min: minY, max: maxY },
       } = this.twoDOption
 
       const inchartPoints = this.getInChartPoints(rect)
-      const outchartPoints = rect.filter(pointItem => !inchartPoints.includes(pointItem))
+      const outchartPoints = rect.filter((pointItem) => !inchartPoints.includes(pointItem))
       // 如果框选范围内只有俩点
       if (inchartPoints.length == 2) {
         const [point1, point2] = inchartPoints
         const isVerticleLine = this.isVerticleLine(point1, point2)
         // 如果是纵向标记线，判断另两个点是在左边还是右边
         if (isVerticleLine) {
-          const find = outchartPoints.find(outcharPoint => point1[1] == outcharPoint[1]) // 找出纵坐标相同的在图表外面的点
+          const find = outchartPoints.find((outcharPoint) => point1[1] == outcharPoint[1]) // 找出纵坐标相同的在图表外面的点
           // 判断在图表外的这个点是在左边还是右边
           const isLeft = find[0] <= point1[0]
           /**
@@ -546,7 +546,7 @@ export default {
            **/
 
           if (isLeft) {
-            inchartPoints.forEach(point => {
+            inchartPoints.forEach((point) => {
               rectList.push(this.generateLineDataByTwoPoints([minX, point[1]], point))
             })
 
@@ -554,7 +554,7 @@ export default {
           }
           // 如果是右边，同理，推入右边俩点构成矩形
           else {
-            inchartPoints.forEach(point => {
+            inchartPoints.forEach((point) => {
               rectList.push(this.generateLineDataByTwoPoints([maxX, point[1]], point))
             })
             rectList.push(this.generateLineDataByTwoPoints(point1, point2))
@@ -562,7 +562,7 @@ export default {
         }
         // 如果是纵向标记线，判断另两个点是在上边还是下边
         else {
-          const find = outchartPoints.find(outcharPoint => point1[0] == outcharPoint[0]) // 找出横坐标相同的在图表外面的点
+          const find = outchartPoints.find((outcharPoint) => point1[0] == outcharPoint[0]) // 找出横坐标相同的在图表外面的点
           // 判断在图表外的这个点是在上边还是右边
           const isBottom = find[1] <= point1[1]
           /**
@@ -570,7 +570,7 @@ export default {
            **/
 
           if (isBottom) {
-            inchartPoints.forEach(point => {
+            inchartPoints.forEach((point) => {
               rectList.push(this.generateLineDataByTwoPoints([point[0], minY], point))
             })
 
@@ -578,7 +578,7 @@ export default {
           }
           // 如果是上边，同理，推入上边俩点构成矩形
           else {
-            inchartPoints.forEach(point => {
+            inchartPoints.forEach((point) => {
               rectList.push(this.generateLineDataByTwoPoints([point[0], maxY], point))
             })
 
@@ -589,8 +589,8 @@ export default {
       // 只有一个点在范围内，则是选中了矩形的一个角
       else if (inchartPoints.length == 1) {
         const point = inchartPoints[0]
-        const isLeft = !!outchartPoints.find(outPoint => outPoint[0] < point[0])
+        const isLeft = !!outchartPoints.find((outPoint) => outPoint[0] < point[0])
-        const isBottom = !!outchartPoints.find(outPoint => outPoint[1] < point[1])
+        const isBottom = !!outchartPoints.find((outPoint) => outPoint[1] < point[1])
         // 截取的右上角
         if (isLeft && isBottom) {
           rectList.push(this.generateLineDataByTwoPoints(point, [minX, point[1]]))
@@ -626,7 +626,7 @@ export default {
       // 全不在里面
       else {
         // 筛选出所有的在框选范围内的横坐标
-        const xAxisList = rect.map(item => item[0]).filter(xAxis => xAxis > minX && xAxis < maxX)
+        const xAxisList = rect.map((item) => item[0]).filter((xAxis) => xAxis > minX && xAxis < maxX)
         const leftBottomPoint = rect[0]
         const rightBottomPoint = rect[1]
         const rightTopPoint = rect[3]
@@ -646,7 +646,7 @@ export default {
         }
 
         // 筛选出所有的在框选范围内的横坐标
-        const yAxisList = rect.map(item => item[1]).filter(xAxis => xAxis > minY && xAxis < maxY)
+        const yAxisList = rect.map((item) => item[1]).filter((xAxis) => xAxis > minY && xAxis < maxY)
         const minXAxis = leftBottomPoint[0]
         const maxXAxis = rightBottomPoint[0]
         // 需要显示上下两侧的框线
@@ -663,9 +663,9 @@ export default {
         }
       }
       // 补齐颜色
-      rectList.forEach(item => {
+      rectList.forEach((item) => {
         item[0].lineStyle = {
-          color
+          color,
         }
       })
       return rectList
@@ -678,10 +678,10 @@ export default {
     getInChartPoints(rectInfo) {
       const {
         xAxis: { min: minX, max: maxX },
-        yAxis: { min: minY, max: maxY }
+        yAxis: { min: minY, max: maxY },
       } = this.twoDOption
 
-      return rectInfo.filter(point => {
+      return rectInfo.filter((point) => {
         const [xAxis, yAxis] = point
         return xAxis >= minX && xAxis <= maxX && yAxis >= minY && yAxis <= maxY
       })
@@ -702,12 +702,12 @@ export default {
       return [
         {
           xAxis: point1[0],
-          yAxis: point1[1]
+          yAxis: point1[1],
         },
         {
           xAxis: point2[0],
-          yAxis: point2[1]
+          yAxis: point2[1],
-        }
+        },
       ]
     },
 
@@ -728,7 +728,7 @@ export default {
       const g = color1.g + (color2.g - color1.g) * percentage
       const b = color1.b + (color2.b - color1.b) * percentage
       return { r, g, b }
-    }
+    },
   },
   watch: {
     // 2D 图表
@@ -737,43 +737,43 @@ export default {
         this.active = 0
         this.buildScatterList()
       },
-      immediate: true
+      immediate: true,
     },
 
     // 3D 图表
     histogramDataDList: {
       handler(newVal) {
-        const maxCount = Math.max(...newVal.map(item => item.c))
+        const maxCount = Math.max(...newVal.map((item) => item.c))
         this.threeDSurfaceOption.zAxis3D.max = Math.ceil(maxCount * 1.2)
-        this.threeDSurfaceOption.series.data = newVal.map(item => [item.b, item.g, item.c]) // 设置3D surface数据
+        this.threeDSurfaceOption.series.data = newVal.map((item) => [item.b, item.g, item.c]) // 设置3D surface数据
         this.threeDSurfaceOption.visualMap.max = maxCount
 
         this.threeDScatterOption.zAxis3D.max = Math.ceil(maxCount * 1.2)
-        this.threeDScatterOption.series.data = newVal.map(item => [item.b, item.g, item.c]) // 设置3D scatter数据
+        this.threeDScatterOption.series.data = newVal.map((item) => [item.b, item.g, item.c]) // 设置3D scatter数据
         this.threeDScatterOption.visualMap.max = maxCount
       },
-      immediate: true
+      immediate: true,
     },
 
     // 2D 图表 上的 矩形
     boundary: {
       handler(newVal) {
         newVal.forEach((item, index) => {
-          item.color = rectColorList[index%5]
+          item.color = rectColorList[index % 5]
         })
         this.boundaryData = newVal
         this.reDrawRect()
       },
-      immediate: true
+      immediate: true,
     },
 
     currCount: {
       handler() {
         this.buildScatterList()
       },
-      immediate: true
+      immediate: true,
-    }
+    },
-  }
+  },
 }
 </script>
 

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

@@ -0,0 +1,233 @@
+<template>
+  <div class="result-display-content">
+    <a-table :data-source="source1" rowKey="id" :columns="columns" :pagination="false">
+      <template slot="flag" slot-scope="text, record">
+        <a-checkbox :checked="text == 1 ? true : false" @change="(e) => handleCheckboxChange(e, record)"></a-checkbox>
+      </template>
+      <template slot="concentration" slot-scope="text, record">
+        <div class="concentration color-box" :class="record.className">
+          {{ text }}
+        </div>
+      </template>
+      <template slot="uncertainty" slot-scope="text">
+        <div class="uncertainty color-box">+/-{{ text }}</div>
+      </template>
+      <template slot="mdc" slot-scope="text">
+        <div class="mdc color-box">
+          {{ text }}
+        </div>
+      </template>
+      <template slot="operator" slot-scope="text, record">
+        <div class="search" @click="handleSearch(record.nuclideName)"></div>
+      </template>
+    </a-table>
+    <a-table :data-source="source2" rowKey="id" :columns="columns" :pagination="false">
+      <template slot="flag" slot-scope="text, record">
+        <a-checkbox :checked="text == 1 ? true : false" @change="(e) => handleCheckboxChange(e, record)"></a-checkbox>
+      </template>
+      <template slot="concentration" slot-scope="text, record">
+        <div class="concentration color-box" :class="record.className">
+          {{ text }}
+        </div>
+      </template>
+      <template slot="uncertainty" slot-scope="text">
+        <div class="uncertainty color-box">+/-{{ text }}</div>
+      </template>
+      <template slot="mdc" slot-scope="text">
+        <div class="mdc color-box">
+          {{ text }}
+        </div>
+      </template>
+      <template slot="operator" slot-scope="text, record">
+        <div class="search" @click="handleSearch(record.nuclideName)"></div>
+      </template>
+    </a-table>
+  </div>
+</template>
+
+<script>
+const columns = [
+  {
+    title: 'Flag',
+    align: 'center',
+    dataIndex: 'nidFlag',
+    scopedSlots: {
+      customRender: 'flag',
+    },
+    width: 37,
+  },
+  {
+    title: 'Isotope',
+    dataIndex: 'nuclideName',
+    ellipsis: true,
+    width: 60,
+  },
+  {
+    title: 'Concentration',
+    dataIndex: 'conc',
+    scopedSlots: {
+      customRender: 'concentration',
+    },
+    width: 108,
+  },
+  {
+    title: 'Uncertainty',
+    dataIndex: 'concErr',
+    scopedSlots: {
+      customRender: 'uncertainty',
+    },
+    width: 88,
+  },
+  {
+    title: 'MDC[mBq/m3]',
+    dataIndex: 'mdc',
+    scopedSlots: {
+      customRender: 'mdc',
+    },
+    // width: 133,
+  },
+]
+export default {
+  props: {
+    data: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    this.columns = columns
+    return {
+      source1: [],
+      source2: [],
+    }
+  },
+  methods: {
+    handleCheckboxChange(e, obj) {
+      this.$emit('sendFlag', e.target.checked, obj)
+    },
+
+    handleSearch(nuclideName) {
+      this.$emit('zoom', nuclideName)
+    },
+  },
+  watch: {
+    data: {
+      handler(val) {
+        if (val && Array.isArray(val)) {
+          val.forEach((item) => {
+            if (item.conc < 0) {
+              item.className = 'error'
+            } else if (item.conc > 0 && item.conc < item.mdc) {
+              item.className = 'warning'
+            } else {
+              item.className = 'success'
+            }
+          })
+          this.source1 = val.slice(0, 2)
+          this.source2 = val.slice(2, 4)
+        }
+      },
+      immediate: true,
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.result-display-content {
+  display: flex;
+
+  .ant-table-wrapper {
+    flex: 1;
+
+    &:first-child {
+      margin-right: 12px;
+    }
+
+    ::v-deep {
+      .ant-table {
+        border: none;
+      }
+
+      .ant-table-thead > tr th {
+        color: #00e9fe;
+        font-family: MicrosoftYaHei;
+        font-size: 14px;
+        padding: 4px 4px;
+        background-color: transparent !important;
+
+        &:first-child {
+          padding-left: 0 !important;
+        }
+        &:last-child {
+          padding-right: 0 !important;
+        }
+      }
+
+      .ant-table-tbody {
+        tr {
+          background-color: transparent;
+
+          td {
+            &:first-child {
+              padding-left: 0 !important;
+            }
+
+            &:last-child {
+              padding-right: 0 !important;
+            }
+          }
+
+          &:hover {
+            td {
+              background-color: transparent !important;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .color-box {
+    height: 36px;
+    line-height: 36px;
+    text-align: center;
+    color: #fff;
+  }
+
+  .concentration {
+    background-color: #ad8815;
+
+    &.error {
+      background-color: red;
+    }
+
+    &.warning {
+      background-color: #ffcc30;
+    }
+
+    &.success {
+      background-color: #0f0;
+    }
+  }
+
+  .uncertainty {
+    background-color: rgba(57, 184, 222, 0.4);
+  }
+
+  .mdc {
+    background-color: rgba(57, 184, 222, 0.4);
+  }
+  .search {
+    width: 24px;
+    height: 24px;
+    margin-bottom: 0 !important;
+    cursor: pointer;
+    background: url(~@/assets/images/spectrum/search.png) center no-repeat;
+
+    &:hover {
+      background: url(~@/assets/images/spectrum/search-hover.png) center no-repeat;
+    }
+  }
+}
+</style>

src/views/spectrumAnalysis/components/RoiLimits.vue

@@ -0,0 +1,169 @@
+<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)"
+      >
+        {{ item }}
+      </span>
+    </div>
+    <div class="beta-gamma-spectrum-chart-main">
+      <CustomChart key="1" ref="roiLimitsRef" :option="roiLimitsOption" />
+    </div>
+  </div>
+</template>
+
+<script>
+import CustomChart from '@/components/CustomChart/index.vue'
+const buttons = ['ROI1', 'ROI2', 'ROI3', 'ROI4']
+// 折线图配置
+const roiLimitsOption = {
+  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,
+    symbol: 'circle',
+    symbolSize: 6,
+    data: [],
+    itemStyle: {
+      normal: {
+        color: '#baaa3d',
+      },
+    },
+    lineStyle: {
+      normal: {
+        width: 2,
+      },
+    },
+  },
+}
+export default {
+  components: {
+    CustomChart,
+  },
+  props: {
+    ROILists: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  watch: {
+    ROILists: {
+      handler(newVal) {
+        const [ROIOneList, ...lists] = newVal
+        this.buildOneLineList(ROIOneList)
+      },
+      immediate: true,
+    },
+  },
+  data() {
+    this.buttons = buttons
+    return {
+      active: 0,
+      roiLimitsOption,
+    }
+  },
+  methods: {
+    buildOneLineList(val) {
+      const currSeries = this.roiLimitsOption.series
+      currSeries.data = val.map((item) => [item.x, item.y])
+    },
+    // 点击改变Beta-Gamma Spectrum: Sample图表类型
+    handleChange(index) {
+      this.active = index
+      this.buildOneLineList(this.ROILists[index])
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.beta-gamma-spectrum-chart {
+  height: 100%;
+  &-operators {
+    text-align: right;
+    overflow: auto;
+    height: 26px;
+    display: flex;
+    justify-content: flex-end;
+    gap: 9px;
+
+    .ant-space-item:first-child {
+      span {
+        width: 70px;
+      }
+    }
+
+    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;
+  }
+}
+</style>

src/views/spectrumAnalysis/components/RoiParam.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="roi-param-container">
+    <div class="roi-param-container-roi">
+      <div class="roi-param-container-roi-label">ROI1</div>
+      <div class="roi-param-container-roi-item">
+        <div style="text-align: center">Beta</div>
+        <a-input :value="roiParam.ROIOneStart" style="margin: 15px 0 20px" />
+        <a-input :value="roiParam.ROIOneStop" />
+      </div>
+    </div>
+    <div class="roi-param-container-roi">
+      <div class="roi-param-container-roi-label">ROI2</div>
+      <div class="roi-param-container-roi-item">
+        <div style="text-align: center">Beta</div>
+        <a-input :value="roiParam.ROITwoStart" style="margin: 15px 0 20px" />
+        <a-input :value="roiParam.ROITwoStop" />
+      </div>
+    </div>
+    <div class="roi-param-container-roi">
+      <div class="roi-param-container-roi-label">ROI3</div>
+      <div class="roi-param-container-roi-item">
+        <div style="text-align: center">Beta</div>
+        <a-input :value="roiParam.ROIThreeStart" style="margin: 15px 0 20px" />
+        <a-input :value="roiParam.ROIThreeStop" />
+      </div>
+    </div>
+    <div class="roi-param-container-roi">
+      <div class="roi-param-container-roi-label">ROI4</div>
+      <div class="roi-param-container-roi-item">
+        <div style="text-align: center">Beta</div>
+        <a-input :value="roiParam.ROIFourStart" style="margin: 15px 0 20px" />
+        <a-input :value="roiParam.ROIFourStop" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    roiParam: {
+      type: Object,
+      default: () => {},
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.roi-param-container {
+  height: 100%;
+  display: flex;
+  gap: 12px;
+  &-roi {
+    flex: 1;
+    // background: #0ff;
+    display: flex;
+    // align-items: center;
+    gap: 10px;
+    &-label {
+      width: 60px;
+      line-height: 160px;
+    }
+    &--item {
+      flex: 1;
+    }
+  }
+}
+</style>

src/views/spectrumAnalysis/index.vue

@@ -50,6 +50,8 @@
       />
       <!-- Gamma 分析 -->
 
+      <beta-analysis v-else-if="isBeta" />
+
       <!-- Beta-Gamma 分析 -->
       <!-- <beta-gamma-analysis v-else-if="isBetaGamma" ref="betaGammaAnalysisRef" :sample="sampleData" /> -->
       <beta-gamma-analysis
@@ -237,6 +239,7 @@
 <script>
 import { postAction } from '@/api/manage'
 import GammaAnalysis from './gamma-analysis.vue'
+import BetaAnalysis from './beta-analysis.vue'
 import BetaGammaAnalysis from './beta-gamma-analysis.vue'
 import SpectraListInMenu from './components/SpectraListInMenu.vue'
 import LoadFromDbModal from './components/Modals/LoadFromDBModal.vue'
@@ -291,6 +294,7 @@ export default {
   name: 'SpectrumAnalysis',
   components: {
     BetaGammaAnalysis,
+    BetaAnalysis,
     GammaAnalysis,
     SpectraListInMenu,
     LoadFromDbModal,
@@ -1647,6 +1651,10 @@ export default {
     isGamma() {
       return this.analysisType == ANALYZE_TYPE.GAMMA
     },
+    // 当前类型是否是Beta
+    isBeta() {
+      return this.analysisType == ANALYZE_TYPE.BETA_GAMMA ? false : true
+    },
 
     // 当前类型是否是Beta-Gamma
     isBetaGamma() {