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

<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>