77 lines
1.5 KiB
Vue
77 lines
1.5 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]"
|
|
: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: () => [],
|
|
},
|
|
},
|
|
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> |