172 lines
3.3 KiB
Vue
172 lines
3.3 KiB
Vue
<template>
|
|
<custom-modal v-model="visible" title="Beta" width="800px" destroy-on-close>
|
|
<div class="beta-modal">
|
|
<div class="beta-modal__header">
|
|
<span class="count">Channel: {{ axisInfo.channel }}</span>
|
|
<span class="count">Count: {{ axisInfo.count }}</span>
|
|
<span class="energy">Energy: {{ axisInfo.energy }}</span>
|
|
</div>
|
|
<div class="beta-modal__content">
|
|
<custom-chart :option="option" autoresize />
|
|
</div>
|
|
</div>
|
|
</custom-modal>
|
|
</template>
|
|
|
|
<script>
|
|
import CustomChart from '@/components/CustomChart/index.vue'
|
|
import { buildLineSeries } from '@/utils/chartHelper'
|
|
import { cloneDeep } from 'lodash'
|
|
|
|
const initialOption = {
|
|
grid: {
|
|
top: 10,
|
|
left: 60,
|
|
right: 20,
|
|
bottom: 50,
|
|
},
|
|
tooltip: {
|
|
show: true,
|
|
trigger: 'axis',
|
|
formatter: () => {},
|
|
},
|
|
xAxis: {
|
|
type: 'value',
|
|
name: 'Beta Channel',
|
|
nameTextStyle: {
|
|
color: '#5b9cba',
|
|
fontSize: 14,
|
|
},
|
|
nameLocation: 'center',
|
|
nameGap: 30,
|
|
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',
|
|
},
|
|
min: 0,
|
|
max: 512,
|
|
interval: 512 / 4,
|
|
},
|
|
yAxis: {
|
|
type: 'log',
|
|
name: 'Count',
|
|
nameTextStyle: {
|
|
color: '#5b9cba',
|
|
fontSize: 14,
|
|
},
|
|
nameLocation: 'center',
|
|
nameGap: 40,
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: 'rgba(119, 181, 213, .3)',
|
|
},
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: 'rgba(119, 181, 213, .3)',
|
|
},
|
|
},
|
|
axisLabel: {
|
|
fontSize: 12,
|
|
color: '#ade6ee',
|
|
formatter: (value) => {
|
|
return value.toFixed(1)
|
|
},
|
|
},
|
|
min: 1,
|
|
max: 'dataMax',
|
|
},
|
|
series: buildLineSeries('Line', [], 'yellow'),
|
|
}
|
|
|
|
const initialAxisInfo = {
|
|
channel: 0,
|
|
count: 0,
|
|
energy: 0,
|
|
}
|
|
|
|
export default {
|
|
components: {
|
|
CustomChart,
|
|
},
|
|
data() {
|
|
return {
|
|
visible: false,
|
|
option: cloneDeep(initialOption),
|
|
axisInfo: cloneDeep(initialAxisInfo),
|
|
}
|
|
},
|
|
created() {
|
|
this.option.tooltip.formatter = this.handleTooltipFormat
|
|
},
|
|
methods: {
|
|
open(seriesData, energys) {
|
|
this.option.series.data = (seriesData || []).map(({ x, y }) => [x, y])
|
|
this.energys = energys || []
|
|
this.axisInfo = cloneDeep(initialAxisInfo)
|
|
this.visible = true
|
|
},
|
|
|
|
handleTooltipFormat(params) {
|
|
const [channel, count] = params[0].value
|
|
this.axisInfo = {
|
|
channel,
|
|
count,
|
|
energy: (this.energys[channel] || 0).toFixed(3),
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.beta-modal {
|
|
height: 400px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
overflow: hidden;
|
|
|
|
&__header {
|
|
height: 18px;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
gap: 28px;
|
|
|
|
&-count {
|
|
font-family: ArialMT;
|
|
font-size: 12px;
|
|
color: #ade6ee;
|
|
}
|
|
|
|
.energy {
|
|
color: #ff5656;
|
|
}
|
|
}
|
|
|
|
&__content {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
</style> |