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

82 lines
1.6 KiB
Vue

<template>
<div class="beta-gamma-spectrum" :class="{ 'has-max': isMax }">
<roi-limit-item
v-for="(_, index) in 4"
:key="index"
:title="`ROI${index + 1}`"
:title-color="RoiTitleColors[index]"
:energys="gammaEnergyData"
:roi-list="ROILists[index]"
:analyze-result="ROIAnalyzeLists[index]"
@toggle="handleToggle"
@title-click="handleToggleROIRect(index)"
/>
</div>
</template>
<script>
import CustomChart from '@/components/CustomChart/index.vue'
import RoiLimitItem from './components/RoiLimitItem.vue'
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.RoiTitleColors = RoiTitleColors
return {
isMax: false,
}
},
methods: {
handleToggle(isMax) {
this.isMax = isMax
},
// 切换ROI显隐
handleToggleROIRect(index) {
this.$bus.$emit('toggleROIRect', index)
},
},
}
</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>