184 lines
3.4 KiB
Vue
184 lines
3.4 KiB
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) {
|
|
this.active = 0
|
|
this.$emit('sendIndex', 0)
|
|
const [ROIOneList, ...lists] = newVal
|
|
this.buildOneLineList(ROIOneList)
|
|
},
|
|
// immediate: true,
|
|
},
|
|
},
|
|
data() {
|
|
this.buttons = buttons
|
|
return {
|
|
active: 0,
|
|
roiLimitsOption,
|
|
}
|
|
},
|
|
mounted() {
|
|
// this.$bus.$on('updateRoi', this.updateRoi)
|
|
},
|
|
destroyed() {
|
|
// this.$bus.$off('updateRoi', this.updateRoi)
|
|
},
|
|
methods: {
|
|
updateRoi(data) {
|
|
this.buildOneLineList(data)
|
|
this.active = 0
|
|
},
|
|
buildOneLineList(val) {
|
|
if (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])
|
|
this.$emit('sendIndex', 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> |