78 lines
1.5 KiB
Vue
78 lines
1.5 KiB
Vue
|
<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>
|