新加beta 页面
This commit is contained in:
parent
0fd0634c70
commit
bed1fb4830
292
src/views/spectrumAnalysis/beta-analysis.vue
Normal file
292
src/views/spectrumAnalysis/beta-analysis.vue
Normal file
|
|
@ -0,0 +1,292 @@
|
|||
<template>
|
||||
<div class="beta-gamma-analysis">
|
||||
<a-spin :spinning="isLoading">
|
||||
<!-- 二级交互栏 -->
|
||||
<div class="spectrum-analysis-sub-operators">
|
||||
<pop-over-with-icon placement="bottomLeft">
|
||||
Detailed-Information
|
||||
<beta-gamma-detailed-infomation slot="content" :data="spectrumData" />
|
||||
</pop-over-with-icon>
|
||||
<pop-over-with-icon placement="bottomLeft">
|
||||
QC Flags
|
||||
<beta-gamma-qc-flags slot="content" :data="qcFlags" @click="handleQcFlagClick" />
|
||||
</pop-over-with-icon>
|
||||
<custom-select
|
||||
v-model="spectraType"
|
||||
:options="SampleType"
|
||||
@change="changeChartByType"
|
||||
style="width: 246px"
|
||||
class="sample-select"
|
||||
></custom-select>
|
||||
<div @click="handleDetalSelfStationCache">删除</div>
|
||||
</div>
|
||||
<!-- 二级交互栏结束 -->
|
||||
|
||||
<!-- 主体部分 -->
|
||||
<div class="beta-gamma-analysis-main">
|
||||
<!-- 中间图表部分 -->
|
||||
<div class="beta-gamma-analysis-main-charts">
|
||||
<div class="beta-gamma-analysis-main-charts-left">
|
||||
<beta-gamma-chart-container>
|
||||
<template slot="title"> Beta-Gamma Spectrum: Sample </template>
|
||||
<beta-gamma-spectrum
|
||||
ref="betaChartRef"
|
||||
:betaEnergyData="betaEnergyData"
|
||||
:gammaEnergyData="gammaEnergyData"
|
||||
:histogramDataList="histogramDataList"
|
||||
:boundary="boundaryList"
|
||||
/>
|
||||
</beta-gamma-chart-container>
|
||||
</div>
|
||||
<div class="beta-gamma-analysis-main-charts-right">
|
||||
<beta-gamma-chart-container>
|
||||
<template slot="title"> ROI LIMITS </template>
|
||||
<roi-limits ref="RoiChartRef" :ROILists="ROILists" />
|
||||
</beta-gamma-chart-container>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 中间图表部分结束 -->
|
||||
<!-- 底部显示 -->
|
||||
<div class="beta-gamma-analysis-main-bottom">
|
||||
<div class="beta-gamma-analysis-main-bottom-left">
|
||||
<beta-gamma-chart-container>
|
||||
<template slot="title"> Result display </template>
|
||||
<result-display-beta :data="resultDisplay" @sendFlag="handleGetFlag"></result-display-beta>
|
||||
</beta-gamma-chart-container>
|
||||
</div>
|
||||
<div class="beta-gamma-analysis-main-bottom-right">
|
||||
<beta-gamma-chart-container>
|
||||
<template slot="title"> ROI Param </template>
|
||||
<roi-param :roiParam="roiParam" />
|
||||
</beta-gamma-chart-container>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 底部显示结束 -->
|
||||
</div>
|
||||
<!-- 主体部分结束 -->
|
||||
</a-spin>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PopOverWithIcon from './components/SubOperators/PopOverWithIcon.vue'
|
||||
import BetaGammaDetailedInfomation from './components/SubOperators/BetaGammaDetailedInfomation.vue'
|
||||
import BetaGammaQcFlags from './components/SubOperators/BetaGammaQcFlags.vue'
|
||||
import CustomSelect from '@/components/CustomSelect/index.vue'
|
||||
import BetaGammaChartContainer from './components/BetaGammaChartContainer.vue'
|
||||
import ResultDisplayBeta from './components/ResultDisplay-Beta.vue'
|
||||
import BetaGammaSpectrum from './components/BetaGammaSpectrum.vue'
|
||||
import RoiLimits from './components/RoiLimits.vue'
|
||||
import RoiParam from './components/RoiParam.vue'
|
||||
import axios from 'axios'
|
||||
import { getAction, postAction, deleteAction } from '../../api/manage'
|
||||
const SampleType = [
|
||||
{
|
||||
label: 'Sample Data',
|
||||
value: 'sample',
|
||||
},
|
||||
{
|
||||
label: 'GasBg Data',
|
||||
value: 'gasBg',
|
||||
},
|
||||
{
|
||||
label: 'DetBg Data',
|
||||
value: 'detBg',
|
||||
},
|
||||
{
|
||||
label: 'QC Data',
|
||||
value: 'qc',
|
||||
},
|
||||
]
|
||||
export default {
|
||||
components: {
|
||||
PopOverWithIcon,
|
||||
BetaGammaDetailedInfomation,
|
||||
BetaGammaQcFlags,
|
||||
CustomSelect,
|
||||
BetaGammaChartContainer,
|
||||
ResultDisplayBeta,
|
||||
BetaGammaSpectrum,
|
||||
RoiLimits,
|
||||
RoiParam,
|
||||
},
|
||||
data() {
|
||||
this.SampleType = SampleType
|
||||
return {
|
||||
isLoading: false,
|
||||
spectrumData: {}, // Detailed Infomation 信息
|
||||
spectraType: 'sample',
|
||||
histogramDataList: [],
|
||||
gammaEnergyData: [],
|
||||
betaEnergyData: [],
|
||||
ROILists: [],
|
||||
roiParam: {
|
||||
ROIOneStart: 0,
|
||||
ROIOneStop: 0,
|
||||
ROITwoStart: 0,
|
||||
ROITwoStop: 0,
|
||||
ROIThreeStart: 0,
|
||||
ROIThreeStop: 0,
|
||||
ROIFourStart: 0,
|
||||
ROIFourStop: 0,
|
||||
},
|
||||
boundaryList: [],
|
||||
sampleDetail: {},
|
||||
qcFlags: {},
|
||||
resultDisplay: [],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getSelfStationSampleDetail()
|
||||
},
|
||||
methods: {
|
||||
async handleDetalSelfStationCache() {
|
||||
let params = {
|
||||
sampleFileName: 'ABC01_001-20240108_1405_S_FULL_40186.0.PHD',
|
||||
}
|
||||
try {
|
||||
const { success, result, message } = await deleteAction('/selfStation/deleteSelfStationCache', params)
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
}
|
||||
},
|
||||
async getSelfStationSampleDetail() {
|
||||
let params = {
|
||||
sampleFileName: 'ABC01_001-20240108_1405_S_FULL_40186.0.PHD',
|
||||
detFileName: 'ABC01_001-20240108_1327_D_FULL_381505.PHD',
|
||||
}
|
||||
try {
|
||||
this.isLoading = true
|
||||
this.cancelLastRequest()
|
||||
const cancelToken = this.createCancelToken()
|
||||
const { success, result, message } = await getAction('/selfStation/loadFromFile', params, cancelToken)
|
||||
if (success) {
|
||||
this.sampleDetail = result
|
||||
const {
|
||||
spectrumData,
|
||||
betaEnergyData,
|
||||
gammaEnergyData,
|
||||
histogramDataList,
|
||||
ROIOneList,
|
||||
ROITwoList,
|
||||
ROIThreeList,
|
||||
ROIFourList,
|
||||
ROIOneStart,
|
||||
ROIOneStop,
|
||||
ROITwoStart,
|
||||
ROITwoStop,
|
||||
ROIThreeStart,
|
||||
ROIThreeStop,
|
||||
ROIFourStart,
|
||||
ROIFourStop,
|
||||
} = this.sampleDetail
|
||||
this.spectrumData = spectrumData
|
||||
this.histogramDataList = histogramDataList
|
||||
this.gammaEnergyData = gammaEnergyData
|
||||
this.betaEnergyData = betaEnergyData
|
||||
this.ROILists = [ROIOneList, ROITwoList, ROIThreeList, ROIFourList]
|
||||
this.roiParam.ROIOneStart = ROIOneStart
|
||||
this.roiParam.ROIOneStop = ROIOneStop
|
||||
this.roiParam.ROITwoStart = ROITwoStart
|
||||
this.roiParam.ROITwoStop = ROITwoStop
|
||||
this.roiParam.ROIThreeStart = ROIThreeStart
|
||||
this.roiParam.ROIThreeStop = ROIThreeStop
|
||||
this.roiParam.ROIFourStart = ROIFourStart
|
||||
this.roiParam.ROIFourStop = ROIFourStop
|
||||
let boundary1 = { minX: 500, maxX: ROIOneStop, minY: 0, maxY: 4096 }
|
||||
let boundary2 = { minX: ROITwoStart, maxX: ROITwoStop, minY: 0, maxY: 4096 }
|
||||
let boundary3 = { minX: ROIThreeStart, maxX: ROIThreeStop, minY: 0, maxY: 4096 }
|
||||
let boundary4 = { minX: ROIFourStart, maxX: ROIFourStop, minY: 0, maxY: 4096 }
|
||||
this.boundaryList.push(boundary1, boundary2, boundary3, boundary4)
|
||||
// this.$store.commit('ADD_SAMPLE_DATA', {
|
||||
// inputFileName: this.sample.sampleFileName,
|
||||
// data: result,
|
||||
// from: 'file',
|
||||
// })
|
||||
this.isLoading = false
|
||||
} else {
|
||||
this.$message.error(message)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
}
|
||||
},
|
||||
cancelLastRequest() {
|
||||
if (this._cancelToken && typeof this._cancelToken == 'function') {
|
||||
this._cancelToken()
|
||||
}
|
||||
},
|
||||
|
||||
createCancelToken() {
|
||||
const cancelToken = new axios.CancelToken((c) => {
|
||||
this._cancelToken = c
|
||||
})
|
||||
return cancelToken
|
||||
},
|
||||
changeChartByType(val) {
|
||||
console.log(val)
|
||||
},
|
||||
handleQcFlagClick(item) {
|
||||
console.log(item)
|
||||
},
|
||||
handleGetFlag(val, obj) {
|
||||
console.log(val, obj)
|
||||
},
|
||||
},
|
||||
destroyed() {
|
||||
this.cancelLastRequest()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.beta-gamma-analysis {
|
||||
height: 100%;
|
||||
.ant-spin-nested-loading {
|
||||
height: 100%;
|
||||
|
||||
::v-deep {
|
||||
.ant-spin-container {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.sample-select {
|
||||
::v-deep {
|
||||
.ant-select-selection {
|
||||
background-color: transparent !important;
|
||||
color: #ade6ee;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-main {
|
||||
height: calc(100% - 51px);
|
||||
overflow: auto hidden;
|
||||
&-charts {
|
||||
height: calc(100% - 220px);
|
||||
display: flex;
|
||||
gap: 30px;
|
||||
overflow: auto hidden;
|
||||
&-left {
|
||||
flex: 1;
|
||||
}
|
||||
&-right {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
&-bottom {
|
||||
margin-top: 20px;
|
||||
height: 234px;
|
||||
display: flex;
|
||||
gap: 30px;
|
||||
overflow: auto hidden;
|
||||
&-left {
|
||||
flex: 1;
|
||||
}
|
||||
&-right {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
758
src/views/spectrumAnalysis/components/BetaGammaSpectrum.vue
Normal file
758
src/views/spectrumAnalysis/components/BetaGammaSpectrum.vue
Normal file
|
|
@ -0,0 +1,758 @@
|
|||
<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>
|
||||
<span @click="handleUnzoom">Unzoom</span>
|
||||
<span @click="handleROI">ROI</span>
|
||||
<span @click="handleUpdate">Update</span>
|
||||
</div>
|
||||
<div class="beta-gamma-spectrum-chart-main">
|
||||
<!-- 2D 图表，为了相应Unzoom采用的v-show -->
|
||||
<div class="_2d-chart" v-show="active == 0">
|
||||
<CustomChart
|
||||
ref="chartTwoDRef"
|
||||
:option="twoDOption"
|
||||
@zr:mousedown="handleMouseDown"
|
||||
@zr:mouseup="handleMouseUp"
|
||||
/>
|
||||
<!-- @brushEnd="handleBrushEnd" -->
|
||||
<!-- @zr:mousemove="handleMouseMove" -->
|
||||
<div class="bar">
|
||||
<color-palette v-model="currCount" />
|
||||
<div>{{ currCount }}</div>
|
||||
<div class="bar-main"></div>
|
||||
<div>0</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 2D图表结束 -->
|
||||
<CustomChart v-if="active == 1" key="1" ref="roiLimitsRef" :option="gammaOption" />
|
||||
<CustomChart v-if="active == 2" key="2" ref="roiLimitsRef" :option="betaOption" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CustomChart from '@/components/CustomChart/index.vue'
|
||||
import ColorPalette from './ColorPalette.vue'
|
||||
import { getXAxisAndYAxisByPosition, rangeNumber } from '@/utils/chartHelper.js'
|
||||
const buttons = ['Beta-Gamma', 'Gamma', 'Beta']
|
||||
// Beta-Gamma 的配置
|
||||
const twoDOption = {
|
||||
grid: {
|
||||
top: 15,
|
||||
left: 60,
|
||||
right: 20,
|
||||
bottom: 45,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: (params) => {
|
||||
const [b, g, c] = params.value
|
||||
return `Beta: ${b}<br>Gamma: ${g}<br>Count: ${c}`
|
||||
},
|
||||
axisPointer: {
|
||||
animation: false,
|
||||
type: 'cross',
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
},
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
name: 'Beta Channel',
|
||||
nameTextStyle: {
|
||||
color: '#5b9cba',
|
||||
fontSize: 16,
|
||||
},
|
||||
nameLocation: 'center',
|
||||
nameGap: 30,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(119, 181, 213, .3)',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#ade6ee',
|
||||
fontSize: 12,
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: 'rgba(119, 181, 213, .3)',
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
min: 0,
|
||||
max: 1024,
|
||||
interval: 128,
|
||||
},
|
||||
yAxis: {
|
||||
name: 'Gamma Channel',
|
||||
nameTextStyle: {
|
||||
color: '#5b9cba',
|
||||
fontSize: 16,
|
||||
},
|
||||
nameLocation: 'center',
|
||||
nameGap: 40,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(119, 181, 213, .3)',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#ade6ee',
|
||||
fontSize: 12,
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: 'rgba(119, 181, 213, .3)',
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
min: 0,
|
||||
max: 4096,
|
||||
interval: 512,
|
||||
},
|
||||
series: {
|
||||
type: 'scatterGL',
|
||||
symbolSize: 4,
|
||||
data: [],
|
||||
itemStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
markLine: {
|
||||
silent: true,
|
||||
symbol: 'none',
|
||||
data: [],
|
||||
animation: false,
|
||||
lineStyle: {
|
||||
type: 'solid',
|
||||
width: 2,
|
||||
},
|
||||
},
|
||||
},
|
||||
brush: {},
|
||||
animation: false,
|
||||
}
|
||||
// Gamma 的配置
|
||||
const gammaOption = {
|
||||
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: {
|
||||
name: '今日',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
showSymbol: false,
|
||||
symbol: 'circle',
|
||||
symbolSize: 6,
|
||||
data: [],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#baaa3d',
|
||||
},
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 2,
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
// Beta 的配置
|
||||
const betaOption = {
|
||||
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: {
|
||||
name: '今日',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
showSymbol: false,
|
||||
symbol: 'circle',
|
||||
symbolSize: 6,
|
||||
data: [],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#baaa3d',
|
||||
},
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 2,
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
export default {
|
||||
components: {
|
||||
CustomChart,
|
||||
ColorPalette,
|
||||
},
|
||||
props: {
|
||||
histogramDataList: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
gammaEnergyData: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
betaEnergyData: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
boundary: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
// 2D 图表
|
||||
histogramDataList: {
|
||||
handler() {
|
||||
this.active = 0
|
||||
this.buildScatterList()
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
gammaEnergyData: {
|
||||
handler(newVal) {
|
||||
this.buildGammaLineList(newVal)
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
betaEnergyData: {
|
||||
handler(newVal) {
|
||||
this.buildBetaLineList(newVal)
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
// 2D 图表 上的 矩形
|
||||
boundary: {
|
||||
handler(newVal) {
|
||||
newVal.forEach((item, index) => {
|
||||
item.color = '#99CA53'
|
||||
})
|
||||
this.boundaryData = newVal[0]
|
||||
this.reDrawRect()
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
currCount: {
|
||||
handler() {
|
||||
this.buildScatterList()
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
this.buttons = buttons
|
||||
return {
|
||||
active: 0,
|
||||
twoDOption,
|
||||
gammaOption,
|
||||
betaOption,
|
||||
currCount: 50,
|
||||
showROI: true,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.twoDOption.brush = { toolbox: [] }
|
||||
},
|
||||
methods: {
|
||||
// Gamma 的折线图数据
|
||||
buildGammaLineList(val) {
|
||||
const gammaSeries = this.gammaOption.series
|
||||
gammaSeries.data = val.map((item, index) => [index, item])
|
||||
},
|
||||
// Beta 的折线图数据
|
||||
buildBetaLineList(val) {
|
||||
const betaSeries = this.betaOption.series
|
||||
betaSeries.data = val.map((item, index) => [index, item])
|
||||
},
|
||||
// 构造scatter列表
|
||||
buildScatterList() {
|
||||
const {
|
||||
xAxis: { min: minX, max: maxX },
|
||||
yAxis: { min: minY, max: maxY },
|
||||
} = this.twoDOption
|
||||
|
||||
this.twoDOption.series.data = this.histogramDataList
|
||||
.filter(({ b, g, c }) => c && b >= minX && b <= maxX && g >= minY && g <= maxY)
|
||||
.map(({ b, g, c }) => this.buildScatterItem(b, g, c))
|
||||
console.log('this.twoDOption.series.data', this.twoDOption.series.data)
|
||||
},
|
||||
|
||||
// 构造一个scatter 的点
|
||||
buildScatterItem(xAxis, yAxis, count) {
|
||||
const { r, g, b } = this.interpolateColor(1 - count / this.currCount)
|
||||
return {
|
||||
value: [xAxis, yAxis],
|
||||
itemStyle: {
|
||||
color: `rgb(${r}, ${g}, ${b})`,
|
||||
},
|
||||
}
|
||||
},
|
||||
// 重绘矩形框区域
|
||||
reDrawRect() {
|
||||
const rectList = []
|
||||
|
||||
if (this.showROI) {
|
||||
const { minX, maxX, minY, maxY, color } = this.boundaryData
|
||||
// rect 遵循 左下 右下 右上 左上 的顺序
|
||||
const rect = [
|
||||
[minX, minY],
|
||||
[maxX, minY],
|
||||
[maxX, maxY],
|
||||
[minX, maxY],
|
||||
]
|
||||
|
||||
rectList.push(...this.drawOneRect(rect, color))
|
||||
}
|
||||
this.twoDOption.series.markLine.data = rectList
|
||||
},
|
||||
/**
|
||||
* 绘制一个矩形框区域
|
||||
* 矩形框在这里的实现是由几条线段围起来的，但由于线段在超出图表区域显示有问题，故作了以下处理
|
||||
* @param {*} rect 左下 右下 右上 左上 的顺序
|
||||
*/
|
||||
drawOneRect(rect, color) {
|
||||
const rectList = []
|
||||
const {
|
||||
xAxis: { min: minX, max: maxX },
|
||||
yAxis: { min: minY, max: maxY },
|
||||
} = this.twoDOption
|
||||
|
||||
const inchartPoints = this.getInChartPoints(rect)
|
||||
const outchartPoints = rect.filter((pointItem) => !inchartPoints.includes(pointItem))
|
||||
// 如果框选范围内只有俩点
|
||||
if (inchartPoints.length == 2) {
|
||||
const [point1, point2] = inchartPoints
|
||||
const isVerticleLine = this.isVerticleLine(point1, point2)
|
||||
// 如果是纵向标记线，判断另两个点是在左边还是右边
|
||||
if (isVerticleLine) {
|
||||
const find = outchartPoints.find((outcharPoint) => point1[1] == outcharPoint[1]) // 找出纵坐标相同的在图表外面的点
|
||||
// 判断在图表外的这个点是在左边还是右边
|
||||
const isLeft = find[0] <= point1[0]
|
||||
/**
|
||||
* 如果在左边，推入左边俩点构成矩形
|
||||
* y
|
||||
* |________________
|
||||
* | |
|
||||
* |________________|
|
||||
* |
|
||||
* |——————————————————— x
|
||||
**/
|
||||
|
||||
if (isLeft) {
|
||||
inchartPoints.forEach((point) => {
|
||||
rectList.push(this.generateLineDataByTwoPoints([minX, point[1]], point))
|
||||
})
|
||||
|
||||
rectList.push(this.generateLineDataByTwoPoints(point1, point2))
|
||||
}
|
||||
// 如果是右边，同理，推入右边俩点构成矩形
|
||||
else {
|
||||
inchartPoints.forEach((point) => {
|
||||
rectList.push(this.generateLineDataByTwoPoints([maxX, point[1]], point))
|
||||
})
|
||||
rectList.push(this.generateLineDataByTwoPoints(point1, point2))
|
||||
}
|
||||
}
|
||||
// 如果是纵向标记线，判断另两个点是在上边还是下边
|
||||
else {
|
||||
const find = outchartPoints.find((outcharPoint) => point1[0] == outcharPoint[0]) // 找出横坐标相同的在图表外面的点
|
||||
// 判断在图表外的这个点是在上边还是右边
|
||||
const isBottom = find[1] <= point1[1]
|
||||
/**
|
||||
* 如果在下边，推入下边俩点构成矩形
|
||||
**/
|
||||
|
||||
if (isBottom) {
|
||||
inchartPoints.forEach((point) => {
|
||||
rectList.push(this.generateLineDataByTwoPoints([point[0], minY], point))
|
||||
})
|
||||
|
||||
rectList.push(this.generateLineDataByTwoPoints(point1, point2))
|
||||
}
|
||||
// 如果是上边，同理，推入上边俩点构成矩形
|
||||
else {
|
||||
inchartPoints.forEach((point) => {
|
||||
rectList.push(this.generateLineDataByTwoPoints([point[0], maxY], point))
|
||||
})
|
||||
|
||||
rectList.push(this.generateLineDataByTwoPoints(point1, point2))
|
||||
}
|
||||
}
|
||||
}
|
||||
// 只有一个点在范围内，则是选中了矩形的一个角
|
||||
else if (inchartPoints.length == 1) {
|
||||
const point = inchartPoints[0]
|
||||
const isLeft = !!outchartPoints.find((outPoint) => outPoint[0] < point[0])
|
||||
const isBottom = !!outchartPoints.find((outPoint) => outPoint[1] < point[1])
|
||||
// 截取的右上角
|
||||
if (isLeft && isBottom) {
|
||||
rectList.push(this.generateLineDataByTwoPoints(point, [minX, point[1]]))
|
||||
rectList.push(this.generateLineDataByTwoPoints(point, [point[0], minY]))
|
||||
}
|
||||
// 截取的右下角
|
||||
if (isLeft && !isBottom) {
|
||||
rectList.push(this.generateLineDataByTwoPoints(point, [minX, point[1]]))
|
||||
rectList.push(this.generateLineDataByTwoPoints(point, [point[0], maxY]))
|
||||
}
|
||||
// 截取的左下角
|
||||
if (!isLeft && !isBottom) {
|
||||
rectList.push(this.generateLineDataByTwoPoints(point, [maxX, point[1]]))
|
||||
rectList.push(this.generateLineDataByTwoPoints(point, [point[0], maxY]))
|
||||
}
|
||||
// 截取的左上角
|
||||
if (!isLeft && isBottom) {
|
||||
rectList.push(this.generateLineDataByTwoPoints(point, [maxX, point[1]]))
|
||||
rectList.push(this.generateLineDataByTwoPoints(point, [point[0], minY]))
|
||||
}
|
||||
}
|
||||
// 全在里面
|
||||
else if (inchartPoints.length == 4) {
|
||||
// 按顺序挨个连起来，并且尾部连到头部
|
||||
rect.forEach((point, index) => {
|
||||
if (index == rect.length - 1) {
|
||||
rectList.push(this.generateLineDataByTwoPoints(point, rect[0]))
|
||||
} else {
|
||||
rectList.push(this.generateLineDataByTwoPoints(point, rect[index + 1]))
|
||||
}
|
||||
})
|
||||
}
|
||||
// 全不在里面
|
||||
else {
|
||||
// 筛选出所有的在框选范围内的横坐标
|
||||
const xAxisList = rect.map((item) => item[0]).filter((xAxis) => xAxis > minX && xAxis < maxX)
|
||||
const leftBottomPoint = rect[0]
|
||||
const rightBottomPoint = rect[1]
|
||||
const rightTopPoint = rect[3]
|
||||
const minYAxis = rightBottomPoint[1]
|
||||
const maYAxis = rightTopPoint[1]
|
||||
// 需要显示左右两侧的框线
|
||||
if (xAxisList.length == 4 && minYAxis < minY && maYAxis > maxY) {
|
||||
const minAxis = Math.min(...xAxisList)
|
||||
const maxAxis = Math.max(...xAxisList)
|
||||
rectList.push(this.generateLineDataByTwoPoints([minAxis, minY], [minAxis, maxY]))
|
||||
rectList.push(this.generateLineDataByTwoPoints([maxAxis, minY], [maxAxis, maxY]))
|
||||
}
|
||||
// 需要显示左右其中一条框线
|
||||
else if (xAxisList.length == 2 && minYAxis < minY && maYAxis > maxY) {
|
||||
const xAxis = xAxisList[0]
|
||||
rectList.push(this.generateLineDataByTwoPoints([xAxis, minY], [xAxis, maxY]))
|
||||
}
|
||||
|
||||
// 筛选出所有的在框选范围内的横坐标
|
||||
const yAxisList = rect.map((item) => item[1]).filter((xAxis) => xAxis > minY && xAxis < maxY)
|
||||
const minXAxis = leftBottomPoint[0]
|
||||
const maxXAxis = rightBottomPoint[0]
|
||||
// 需要显示上下两侧的框线
|
||||
if (yAxisList.length == 4 && minXAxis < minX && maxXAxis > maxX) {
|
||||
const minAxis = Math.min(...yAxisList)
|
||||
const maxAxis = Math.max(...yAxisList)
|
||||
rectList.push(this.generateLineDataByTwoPoints([minX, minAxis], [maxX, minAxis]))
|
||||
rectList.push(this.generateLineDataByTwoPoints([minX, maxAxis], [maxX, maxAxis]))
|
||||
}
|
||||
// 需要显示左右其中一条框线
|
||||
else if (yAxisList.length == 2 && minXAxis < minX && maxXAxis > maxX) {
|
||||
const yAxis = yAxisList[0]
|
||||
rectList.push(this.generateLineDataByTwoPoints([minX, yAxis], [maxX, yAxis]))
|
||||
}
|
||||
}
|
||||
// 补齐颜色
|
||||
rectList.forEach((item) => {
|
||||
item[0].lineStyle = {
|
||||
color,
|
||||
}
|
||||
})
|
||||
return rectList
|
||||
},
|
||||
/**
|
||||
* 获取在框选范围内的点列表
|
||||
* @param { Array<Array<number>> } rectInfo
|
||||
*/
|
||||
getInChartPoints(rectInfo) {
|
||||
const {
|
||||
xAxis: { min: minX, max: maxX },
|
||||
yAxis: { min: minY, max: maxY },
|
||||
} = this.twoDOption
|
||||
|
||||
return rectInfo.filter((point) => {
|
||||
const [xAxis, yAxis] = point
|
||||
return xAxis >= minX && xAxis <= maxX && yAxis >= minY && yAxis <= maxY
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 根据两个点生成一个markLine直线
|
||||
*/
|
||||
generateLineDataByTwoPoints(point1, point2) {
|
||||
return [
|
||||
{
|
||||
xAxis: point1[0],
|
||||
yAxis: point1[1],
|
||||
},
|
||||
{
|
||||
xAxis: point2[0],
|
||||
yAxis: point2[1],
|
||||
},
|
||||
]
|
||||
},
|
||||
// 点击改变Beta-Gamma Spectrum: Sample图表类型
|
||||
handleChange(index) {
|
||||
this.active = index
|
||||
},
|
||||
// 点击unzoom
|
||||
handleUnzoom() {
|
||||
this.twoDOption.xAxis.min = 0
|
||||
this.twoDOption.xAxis.max = 256
|
||||
this.twoDOption.yAxis.min = 0
|
||||
this.twoDOption.yAxis.max = 256
|
||||
|
||||
// this.emitRangeChange([0, 256, 0, 256])
|
||||
// this.reDrawRect()
|
||||
|
||||
this.buildScatterList()
|
||||
},
|
||||
// 鼠标按下时开启可刷选状态
|
||||
handleMouseDown() {
|
||||
const chart = this.$refs.chartRef.getChartInstance()
|
||||
chart.dispatchAction({
|
||||
type: 'takeGlobalCursor',
|
||||
// 如果想变为“可刷选状态”，必须设置。不设置则会关闭“可刷选状态”。
|
||||
key: 'brush',
|
||||
brushOption: {
|
||||
// 参见 brush 组件的 brushType。如果设置为 false 则关闭“可刷选状态”。
|
||||
brushType: 'rect',
|
||||
},
|
||||
})
|
||||
},
|
||||
|
||||
handleMouseUp() {
|
||||
setTimeout(() => {
|
||||
const chart = this.$refs.chartRef.getChartInstance()
|
||||
this.clearBrush(chart)
|
||||
}, 0)
|
||||
},
|
||||
// 刷选完毕时
|
||||
handleBrushEnd(param) {
|
||||
const chart = this.$refs.chartRef.getChartInstance()
|
||||
const areas = param.areas[0]
|
||||
if (areas) {
|
||||
const range = areas.range
|
||||
const [[minX, maxX], [minY, maxY]] = range
|
||||
|
||||
const point1 = chart.convertFromPixel({ seriesIndex: 0 }, [minX, minY]).map((num) => parseInt(num.toFixed()))
|
||||
const point2 = chart.convertFromPixel({ seriesIndex: 0 }, [maxX, maxY]).map((num) => parseInt(num.toFixed()))
|
||||
|
||||
const [x1, y2, x2, y1] = [...point1, ...point2] // 根据解析出的数据确定真实的范围
|
||||
|
||||
const rangeNumberFunc = rangeNumber(0, 256)
|
||||
|
||||
this.twoDOption.xAxis.min = rangeNumberFunc(x1)
|
||||
this.twoDOption.xAxis.max = rangeNumberFunc(x2)
|
||||
this.twoDOption.yAxis.min = rangeNumberFunc(y1)
|
||||
this.twoDOption.yAxis.max = rangeNumberFunc(y2)
|
||||
|
||||
this.emitRangeChange([x1, x2, y1, y2])
|
||||
|
||||
this.reDrawRect()
|
||||
|
||||
this.buildScatterList()
|
||||
}
|
||||
|
||||
this.clearBrush(chart)
|
||||
},
|
||||
|
||||
// 点击ROI
|
||||
handleROI() {
|
||||
this.showROI = !this.showROI
|
||||
this.reDrawRect()
|
||||
},
|
||||
// 点击Update
|
||||
handleUpdate() {},
|
||||
|
||||
// 颜色插值算法
|
||||
interpolateColor(percentage) {
|
||||
const color1 = { r: 255, g: 0, b: 0 },
|
||||
color2 = { r: 255, g: 255, b: 255 }
|
||||
|
||||
const r = color1.r + (color2.r - color1.r) * percentage
|
||||
const g = color1.g + (color2.g - color1.g) * percentage
|
||||
const b = color1.b + (color2.b - color1.b) * percentage
|
||||
return { r, g, b }
|
||||
},
|
||||
},
|
||||
}
|
||||
</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;
|
||||
._2d-chart {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
|
||||
.custom-chart {
|
||||
width: calc(100% - 45px);
|
||||
}
|
||||
|
||||
.bar {
|
||||
width: 30px;
|
||||
margin-left: 15px;
|
||||
height: 100%;
|
||||
color: #ade6ee;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 38px;
|
||||
text-align: center;
|
||||
|
||||
&-main {
|
||||
display: inline-block;
|
||||
width: 14px;
|
||||
height: calc(100% - 70px);
|
||||
background: linear-gradient(to bottom, #ff0000 0, #fff 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -56,11 +56,11 @@ const twoDOption = {
|
|||
top: 15,
|
||||
left: 55,
|
||||
right: 10,
|
||||
bottom: 45
|
||||
bottom: 45,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: params => {
|
||||
formatter: (params) => {
|
||||
const [b, g, c] = params.value
|
||||
return `Beta: ${b}<br>Gamma: ${g}<br>Count: ${c}`
|
||||
},
|
||||
|
|
@ -68,76 +68,76 @@ const twoDOption = {
|
|||
animation: false,
|
||||
type: 'cross',
|
||||
lineStyle: {
|
||||
type: 'dashed'
|
||||
}
|
||||
}
|
||||
type: 'dashed',
|
||||
},
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
name: 'Beta Channel',
|
||||
nameTextStyle: {
|
||||
color: '#5b9cba',
|
||||
fontSize: 16
|
||||
fontSize: 16,
|
||||
},
|
||||
nameLocation: 'center',
|
||||
nameGap: 30,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(119, 181, 213, .3)'
|
||||
}
|
||||
color: 'rgba(119, 181, 213, .3)',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#ade6ee',
|
||||
fontSize: 12
|
||||
fontSize: 12,
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: 'rgba(119, 181, 213, .3)'
|
||||
}
|
||||
color: 'rgba(119, 181, 213, .3)',
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
show: false,
|
||||
},
|
||||
min: 0,
|
||||
max: 256,
|
||||
interval: 64
|
||||
interval: 64,
|
||||
},
|
||||
yAxis: {
|
||||
name: 'Gamma Channel',
|
||||
nameTextStyle: {
|
||||
color: '#5b9cba',
|
||||
fontSize: 16
|
||||
fontSize: 16,
|
||||
},
|
||||
nameLocation: 'center',
|
||||
nameGap: 35,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(119, 181, 213, .3)'
|
||||
}
|
||||
color: 'rgba(119, 181, 213, .3)',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#ade6ee',
|
||||
fontSize: 12
|
||||
fontSize: 12,
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: 'rgba(119, 181, 213, .3)'
|
||||
}
|
||||
color: 'rgba(119, 181, 213, .3)',
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
show: false,
|
||||
},
|
||||
min: 0,
|
||||
max: 256,
|
||||
interval: 64
|
||||
interval: 64,
|
||||
},
|
||||
series: {
|
||||
type: 'scatterGL',
|
||||
symbolSize: 4,
|
||||
data: [],
|
||||
itemStyle: {
|
||||
color: '#fff'
|
||||
color: '#fff',
|
||||
},
|
||||
markLine: {
|
||||
silent: true,
|
||||
|
|
@ -146,12 +146,12 @@ const twoDOption = {
|
|||
animation: false,
|
||||
lineStyle: {
|
||||
type: 'solid',
|
||||
width: 2
|
||||
}
|
||||
}
|
||||
width: 2,
|
||||
},
|
||||
},
|
||||
},
|
||||
brush: {},
|
||||
animation: false
|
||||
animation: false,
|
||||
}
|
||||
|
||||
//3D Surface 配置
|
||||
|
|
@ -162,66 +162,66 @@ const threeDSurfaceOption = {
|
|||
formatter: ({ value: [x, y, z] }) => {
|
||||
// 自定义 tooltip 的内容
|
||||
return `Beta Channel:${x} Count:${z} Gamma Channel: ${y}`
|
||||
}
|
||||
},
|
||||
},
|
||||
visualMap: {
|
||||
show: false,
|
||||
min: 0,
|
||||
max: 0,
|
||||
inRange: {
|
||||
color: ['#0DCF38', '#B5475E']
|
||||
}
|
||||
color: ['#0DCF38', '#B5475E'],
|
||||
},
|
||||
},
|
||||
grid3D: {
|
||||
axisLabel: {
|
||||
color: '#ade6ee'
|
||||
color: '#ade6ee',
|
||||
},
|
||||
axisPointer: {
|
||||
show: false
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(119, 181, 213, .3)'
|
||||
}
|
||||
color: 'rgba(119, 181, 213, .3)',
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(119, 181, 213, .3)'
|
||||
}
|
||||
}
|
||||
color: 'rgba(119, 181, 213, .3)',
|
||||
},
|
||||
},
|
||||
},
|
||||
xAxis3D: {
|
||||
name: 'Beta Channel',
|
||||
nameTextStyle: {
|
||||
color: '#5b9cba',
|
||||
fontSize: 14
|
||||
fontSize: 14,
|
||||
},
|
||||
min: 0,
|
||||
max: 256,
|
||||
interval: 64
|
||||
interval: 64,
|
||||
},
|
||||
yAxis3D: {
|
||||
name: 'Gamma Channel',
|
||||
nameTextStyle: {
|
||||
color: '#5b9cba',
|
||||
fontSize: 14
|
||||
fontSize: 14,
|
||||
},
|
||||
min: 0,
|
||||
max: 256,
|
||||
interval: 64
|
||||
interval: 64,
|
||||
},
|
||||
zAxis3D: {
|
||||
name: 'Count',
|
||||
nameTextStyle: {
|
||||
color: '#5b9cba',
|
||||
fontSize: 14
|
||||
fontSize: 14,
|
||||
},
|
||||
max: 0
|
||||
max: 0,
|
||||
},
|
||||
series: {
|
||||
type: 'surface',
|
||||
data: []
|
||||
}
|
||||
data: [],
|
||||
},
|
||||
}
|
||||
|
||||
// 3D Scatter 配置
|
||||
|
|
@ -231,92 +231,92 @@ const threeDScatterOption = {
|
|||
formatter: ({ value: [x, y, z] }) => {
|
||||
// 自定义 tooltip 的内容
|
||||
return `Beta Channel:${x} Count:${z} Gamma Channel: ${y}`
|
||||
}
|
||||
},
|
||||
},
|
||||
visualMap: {
|
||||
show: false,
|
||||
min: 0,
|
||||
max: 0,
|
||||
inRange: {
|
||||
color: ['#0DCF38', '#B5475E']
|
||||
}
|
||||
color: ['#0DCF38', '#B5475E'],
|
||||
},
|
||||
},
|
||||
grid3D: {
|
||||
axisLabel: {
|
||||
color: '#ade6ee'
|
||||
color: '#ade6ee',
|
||||
},
|
||||
axisPointer: {
|
||||
show: false
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(119, 181, 213, .3)'
|
||||
}
|
||||
color: 'rgba(119, 181, 213, .3)',
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(119, 181, 213, .3)'
|
||||
}
|
||||
}
|
||||
color: 'rgba(119, 181, 213, .3)',
|
||||
},
|
||||
},
|
||||
},
|
||||
xAxis3D: {
|
||||
name: 'Beta Channel',
|
||||
nameTextStyle: {
|
||||
color: '#5b9cba',
|
||||
fontSize: 14
|
||||
fontSize: 14,
|
||||
},
|
||||
min: 0,
|
||||
max: 256,
|
||||
interval: 64
|
||||
interval: 64,
|
||||
},
|
||||
yAxis3D: {
|
||||
name: 'Gamma Channel',
|
||||
nameTextStyle: {
|
||||
color: '#5b9cba',
|
||||
fontSize: 14
|
||||
fontSize: 14,
|
||||
},
|
||||
min: 0,
|
||||
max: 256,
|
||||
interval: 64
|
||||
interval: 64,
|
||||
},
|
||||
zAxis3D: {
|
||||
name: 'Count',
|
||||
nameTextStyle: {
|
||||
color: '#5b9cba',
|
||||
fontSize: 14
|
||||
fontSize: 14,
|
||||
},
|
||||
max: 0
|
||||
max: 0,
|
||||
},
|
||||
series: {
|
||||
type: 'scatter3D',
|
||||
symbolSize: 5,
|
||||
emphasis: {
|
||||
label: {
|
||||
show: false
|
||||
}
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
data: [],
|
||||
},
|
||||
data: []
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
props: {
|
||||
histogramDataList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
default: () => [],
|
||||
},
|
||||
histogramDataDList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
default: () => [],
|
||||
},
|
||||
boundary: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
components: {
|
||||
CustomChart,
|
||||
ColorPalette
|
||||
ColorPalette,
|
||||
},
|
||||
data() {
|
||||
this.buttons = buttons
|
||||
|
|
@ -328,7 +328,7 @@ export default {
|
|||
twoDOption,
|
||||
threeDSurfaceOption,
|
||||
threeDScatterOption,
|
||||
showROI: true
|
||||
showROI: true,
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -390,8 +390,8 @@ export default {
|
|||
key: 'brush',
|
||||
brushOption: {
|
||||
// 参见 brush 组件的 brushType。如果设置为 false 则关闭“可刷选状态”。
|
||||
brushType: 'rect'
|
||||
}
|
||||
brushType: 'rect',
|
||||
},
|
||||
})
|
||||
},
|
||||
|
||||
|
|
@ -406,12 +406,12 @@ export default {
|
|||
// 清理刷选的范围
|
||||
chart.dispatchAction({
|
||||
type: 'brush',
|
||||
areas: []
|
||||
areas: [],
|
||||
})
|
||||
|
||||
// 改为不可刷选状态
|
||||
chart.dispatchAction({
|
||||
type: 'takeGlobalCursor'
|
||||
type: 'takeGlobalCursor',
|
||||
})
|
||||
},
|
||||
|
||||
|
|
@ -423,8 +423,8 @@ export default {
|
|||
const range = areas.range
|
||||
const [[minX, maxX], [minY, maxY]] = range
|
||||
|
||||
const point1 = chart.convertFromPixel({ seriesIndex: 0 }, [minX, minY]).map(num => parseInt(num.toFixed()))
|
||||
const point2 = chart.convertFromPixel({ seriesIndex: 0 }, [maxX, maxY]).map(num => parseInt(num.toFixed()))
|
||||
const point1 = chart.convertFromPixel({ seriesIndex: 0 }, [minX, minY]).map((num) => parseInt(num.toFixed()))
|
||||
const point2 = chart.convertFromPixel({ seriesIndex: 0 }, [maxX, maxY]).map((num) => parseInt(num.toFixed()))
|
||||
|
||||
const [x1, y2, x2, y1] = [...point1, ...point2] // 根据解析出的数据确定真实的范围
|
||||
|
||||
|
|
@ -449,7 +449,7 @@ export default {
|
|||
buildScatterList() {
|
||||
const {
|
||||
xAxis: { min: minX, max: maxX },
|
||||
yAxis: { min: minY, max: maxY }
|
||||
yAxis: { min: minY, max: maxY },
|
||||
} = this.twoDOption
|
||||
|
||||
this.twoDOption.series.data = this.histogramDataDList
|
||||
|
|
@ -459,12 +459,12 @@ export default {
|
|||
|
||||
// 构造一个scatter 的点
|
||||
buildScatterItem(xAxis, yAxis, count) {
|
||||
const { r, g, b } = this.interpolateColor(1 - (count / this.currCount))
|
||||
const { r, g, b } = this.interpolateColor(1 - count / this.currCount)
|
||||
return {
|
||||
value: [xAxis, yAxis],
|
||||
itemStyle: {
|
||||
color: `rgb(${r}, ${g}, ${b})`
|
||||
}
|
||||
color: `rgb(${r}, ${g}, ${b})`,
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -503,7 +503,7 @@ export default {
|
|||
[minX, minY],
|
||||
[maxX, minY],
|
||||
[maxX, maxY],
|
||||
[minX, maxY]
|
||||
[minX, maxY],
|
||||
]
|
||||
|
||||
rectList.push(...this.drawOneRect(rect, color))
|
||||
|
|
@ -521,18 +521,18 @@ export default {
|
|||
const rectList = []
|
||||
const {
|
||||
xAxis: { min: minX, max: maxX },
|
||||
yAxis: { min: minY, max: maxY }
|
||||
yAxis: { min: minY, max: maxY },
|
||||
} = this.twoDOption
|
||||
|
||||
const inchartPoints = this.getInChartPoints(rect)
|
||||
const outchartPoints = rect.filter(pointItem => !inchartPoints.includes(pointItem))
|
||||
const outchartPoints = rect.filter((pointItem) => !inchartPoints.includes(pointItem))
|
||||
// 如果框选范围内只有俩点
|
||||
if (inchartPoints.length == 2) {
|
||||
const [point1, point2] = inchartPoints
|
||||
const isVerticleLine = this.isVerticleLine(point1, point2)
|
||||
// 如果是纵向标记线，判断另两个点是在左边还是右边
|
||||
if (isVerticleLine) {
|
||||
const find = outchartPoints.find(outcharPoint => point1[1] == outcharPoint[1]) // 找出纵坐标相同的在图表外面的点
|
||||
const find = outchartPoints.find((outcharPoint) => point1[1] == outcharPoint[1]) // 找出纵坐标相同的在图表外面的点
|
||||
// 判断在图表外的这个点是在左边还是右边
|
||||
const isLeft = find[0] <= point1[0]
|
||||
/**
|
||||
|
|
@ -546,7 +546,7 @@ export default {
|
|||
**/
|
||||
|
||||
if (isLeft) {
|
||||
inchartPoints.forEach(point => {
|
||||
inchartPoints.forEach((point) => {
|
||||
rectList.push(this.generateLineDataByTwoPoints([minX, point[1]], point))
|
||||
})
|
||||
|
||||
|
|
@ -554,7 +554,7 @@ export default {
|
|||
}
|
||||
// 如果是右边，同理，推入右边俩点构成矩形
|
||||
else {
|
||||
inchartPoints.forEach(point => {
|
||||
inchartPoints.forEach((point) => {
|
||||
rectList.push(this.generateLineDataByTwoPoints([maxX, point[1]], point))
|
||||
})
|
||||
rectList.push(this.generateLineDataByTwoPoints(point1, point2))
|
||||
|
|
@ -562,7 +562,7 @@ export default {
|
|||
}
|
||||
// 如果是纵向标记线，判断另两个点是在上边还是下边
|
||||
else {
|
||||
const find = outchartPoints.find(outcharPoint => point1[0] == outcharPoint[0]) // 找出横坐标相同的在图表外面的点
|
||||
const find = outchartPoints.find((outcharPoint) => point1[0] == outcharPoint[0]) // 找出横坐标相同的在图表外面的点
|
||||
// 判断在图表外的这个点是在上边还是右边
|
||||
const isBottom = find[1] <= point1[1]
|
||||
/**
|
||||
|
|
@ -570,7 +570,7 @@ export default {
|
|||
**/
|
||||
|
||||
if (isBottom) {
|
||||
inchartPoints.forEach(point => {
|
||||
inchartPoints.forEach((point) => {
|
||||
rectList.push(this.generateLineDataByTwoPoints([point[0], minY], point))
|
||||
})
|
||||
|
||||
|
|
@ -578,7 +578,7 @@ export default {
|
|||
}
|
||||
// 如果是上边，同理，推入上边俩点构成矩形
|
||||
else {
|
||||
inchartPoints.forEach(point => {
|
||||
inchartPoints.forEach((point) => {
|
||||
rectList.push(this.generateLineDataByTwoPoints([point[0], maxY], point))
|
||||
})
|
||||
|
||||
|
|
@ -589,8 +589,8 @@ export default {
|
|||
// 只有一个点在范围内，则是选中了矩形的一个角
|
||||
else if (inchartPoints.length == 1) {
|
||||
const point = inchartPoints[0]
|
||||
const isLeft = !!outchartPoints.find(outPoint => outPoint[0] < point[0])
|
||||
const isBottom = !!outchartPoints.find(outPoint => outPoint[1] < point[1])
|
||||
const isLeft = !!outchartPoints.find((outPoint) => outPoint[0] < point[0])
|
||||
const isBottom = !!outchartPoints.find((outPoint) => outPoint[1] < point[1])
|
||||
// 截取的右上角
|
||||
if (isLeft && isBottom) {
|
||||
rectList.push(this.generateLineDataByTwoPoints(point, [minX, point[1]]))
|
||||
|
|
@ -626,7 +626,7 @@ export default {
|
|||
// 全不在里面
|
||||
else {
|
||||
// 筛选出所有的在框选范围内的横坐标
|
||||
const xAxisList = rect.map(item => item[0]).filter(xAxis => xAxis > minX && xAxis < maxX)
|
||||
const xAxisList = rect.map((item) => item[0]).filter((xAxis) => xAxis > minX && xAxis < maxX)
|
||||
const leftBottomPoint = rect[0]
|
||||
const rightBottomPoint = rect[1]
|
||||
const rightTopPoint = rect[3]
|
||||
|
|
@ -646,7 +646,7 @@ export default {
|
|||
}
|
||||
|
||||
// 筛选出所有的在框选范围内的横坐标
|
||||
const yAxisList = rect.map(item => item[1]).filter(xAxis => xAxis > minY && xAxis < maxY)
|
||||
const yAxisList = rect.map((item) => item[1]).filter((xAxis) => xAxis > minY && xAxis < maxY)
|
||||
const minXAxis = leftBottomPoint[0]
|
||||
const maxXAxis = rightBottomPoint[0]
|
||||
// 需要显示上下两侧的框线
|
||||
|
|
@ -663,9 +663,9 @@ export default {
|
|||
}
|
||||
}
|
||||
// 补齐颜色
|
||||
rectList.forEach(item => {
|
||||
rectList.forEach((item) => {
|
||||
item[0].lineStyle = {
|
||||
color
|
||||
color,
|
||||
}
|
||||
})
|
||||
return rectList
|
||||
|
|
@ -678,10 +678,10 @@ export default {
|
|||
getInChartPoints(rectInfo) {
|
||||
const {
|
||||
xAxis: { min: minX, max: maxX },
|
||||
yAxis: { min: minY, max: maxY }
|
||||
yAxis: { min: minY, max: maxY },
|
||||
} = this.twoDOption
|
||||
|
||||
return rectInfo.filter(point => {
|
||||
return rectInfo.filter((point) => {
|
||||
const [xAxis, yAxis] = point
|
||||
return xAxis >= minX && xAxis <= maxX && yAxis >= minY && yAxis <= maxY
|
||||
})
|
||||
|
|
@ -702,12 +702,12 @@ export default {
|
|||
return [
|
||||
{
|
||||
xAxis: point1[0],
|
||||
yAxis: point1[1]
|
||||
yAxis: point1[1],
|
||||
},
|
||||
{
|
||||
xAxis: point2[0],
|
||||
yAxis: point2[1]
|
||||
}
|
||||
yAxis: point2[1],
|
||||
},
|
||||
]
|
||||
},
|
||||
|
||||
|
|
@ -728,7 +728,7 @@ export default {
|
|||
const g = color1.g + (color2.g - color1.g) * percentage
|
||||
const b = color1.b + (color2.b - color1.b) * percentage
|
||||
return { r, g, b }
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
// 2D 图表
|
||||
|
|
@ -737,43 +737,43 @@ export default {
|
|||
this.active = 0
|
||||
this.buildScatterList()
|
||||
},
|
||||
immediate: true
|
||||
immediate: true,
|
||||
},
|
||||
|
||||
// 3D 图表
|
||||
histogramDataDList: {
|
||||
handler(newVal) {
|
||||
const maxCount = Math.max(...newVal.map(item => item.c))
|
||||
const maxCount = Math.max(...newVal.map((item) => item.c))
|
||||
this.threeDSurfaceOption.zAxis3D.max = Math.ceil(maxCount * 1.2)
|
||||
this.threeDSurfaceOption.series.data = newVal.map(item => [item.b, item.g, item.c]) // 设置3D surface数据
|
||||
this.threeDSurfaceOption.series.data = newVal.map((item) => [item.b, item.g, item.c]) // 设置3D surface数据
|
||||
this.threeDSurfaceOption.visualMap.max = maxCount
|
||||
|
||||
this.threeDScatterOption.zAxis3D.max = Math.ceil(maxCount * 1.2)
|
||||
this.threeDScatterOption.series.data = newVal.map(item => [item.b, item.g, item.c]) // 设置3D scatter数据
|
||||
this.threeDScatterOption.series.data = newVal.map((item) => [item.b, item.g, item.c]) // 设置3D scatter数据
|
||||
this.threeDScatterOption.visualMap.max = maxCount
|
||||
},
|
||||
immediate: true
|
||||
immediate: true,
|
||||
},
|
||||
|
||||
// 2D 图表 上的 矩形
|
||||
boundary: {
|
||||
handler(newVal) {
|
||||
newVal.forEach((item, index) => {
|
||||
item.color = rectColorList[index%5]
|
||||
item.color = rectColorList[index % 5]
|
||||
})
|
||||
this.boundaryData = newVal
|
||||
this.reDrawRect()
|
||||
},
|
||||
immediate: true
|
||||
immediate: true,
|
||||
},
|
||||
|
||||
currCount: {
|
||||
handler() {
|
||||
this.buildScatterList()
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
}
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
233
src/views/spectrumAnalysis/components/ResultDisplay-Beta.vue
Normal file
233
src/views/spectrumAnalysis/components/ResultDisplay-Beta.vue
Normal file
|
|
@ -0,0 +1,233 @@
|
|||
<template>
|
||||
<div class="result-display-content">
|
||||
<a-table :data-source="source1" rowKey="id" :columns="columns" :pagination="false">
|
||||
<template slot="flag" slot-scope="text, record">
|
||||
<a-checkbox :checked="text == 1 ? true : false" @change="(e) => handleCheckboxChange(e, record)"></a-checkbox>
|
||||
</template>
|
||||
<template slot="concentration" slot-scope="text, record">
|
||||
<div class="concentration color-box" :class="record.className">
|
||||
{{ text }}
|
||||
</div>
|
||||
</template>
|
||||
<template slot="uncertainty" slot-scope="text">
|
||||
<div class="uncertainty color-box">+/-{{ text }}</div>
|
||||
</template>
|
||||
<template slot="mdc" slot-scope="text">
|
||||
<div class="mdc color-box">
|
||||
{{ text }}
|
||||
</div>
|
||||
</template>
|
||||
<template slot="operator" slot-scope="text, record">
|
||||
<div class="search" @click="handleSearch(record.nuclideName)"></div>
|
||||
</template>
|
||||
</a-table>
|
||||
<a-table :data-source="source2" rowKey="id" :columns="columns" :pagination="false">
|
||||
<template slot="flag" slot-scope="text, record">
|
||||
<a-checkbox :checked="text == 1 ? true : false" @change="(e) => handleCheckboxChange(e, record)"></a-checkbox>
|
||||
</template>
|
||||
<template slot="concentration" slot-scope="text, record">
|
||||
<div class="concentration color-box" :class="record.className">
|
||||
{{ text }}
|
||||
</div>
|
||||
</template>
|
||||
<template slot="uncertainty" slot-scope="text">
|
||||
<div class="uncertainty color-box">+/-{{ text }}</div>
|
||||
</template>
|
||||
<template slot="mdc" slot-scope="text">
|
||||
<div class="mdc color-box">
|
||||
{{ text }}
|
||||
</div>
|
||||
</template>
|
||||
<template slot="operator" slot-scope="text, record">
|
||||
<div class="search" @click="handleSearch(record.nuclideName)"></div>
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const columns = [
|
||||
{
|
||||
title: 'Flag',
|
||||
align: 'center',
|
||||
dataIndex: 'nidFlag',
|
||||
scopedSlots: {
|
||||
customRender: 'flag',
|
||||
},
|
||||
width: 37,
|
||||
},
|
||||
{
|
||||
title: 'Isotope',
|
||||
dataIndex: 'nuclideName',
|
||||
ellipsis: true,
|
||||
width: 60,
|
||||
},
|
||||
{
|
||||
title: 'Concentration',
|
||||
dataIndex: 'conc',
|
||||
scopedSlots: {
|
||||
customRender: 'concentration',
|
||||
},
|
||||
width: 108,
|
||||
},
|
||||
{
|
||||
title: 'Uncertainty',
|
||||
dataIndex: 'concErr',
|
||||
scopedSlots: {
|
||||
customRender: 'uncertainty',
|
||||
},
|
||||
width: 88,
|
||||
},
|
||||
{
|
||||
title: 'MDC[mBq/m3]',
|
||||
dataIndex: 'mdc',
|
||||
scopedSlots: {
|
||||
customRender: 'mdc',
|
||||
},
|
||||
// width: 133,
|
||||
},
|
||||
]
|
||||
export default {
|
||||
props: {
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
this.columns = columns
|
||||
return {
|
||||
source1: [],
|
||||
source2: [],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleCheckboxChange(e, obj) {
|
||||
this.$emit('sendFlag', e.target.checked, obj)
|
||||
},
|
||||
|
||||
handleSearch(nuclideName) {
|
||||
this.$emit('zoom', nuclideName)
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
data: {
|
||||
handler(val) {
|
||||
if (val && Array.isArray(val)) {
|
||||
val.forEach((item) => {
|
||||
if (item.conc < 0) {
|
||||
item.className = 'error'
|
||||
} else if (item.conc > 0 && item.conc < item.mdc) {
|
||||
item.className = 'warning'
|
||||
} else {
|
||||
item.className = 'success'
|
||||
}
|
||||
})
|
||||
this.source1 = val.slice(0, 2)
|
||||
this.source2 = val.slice(2, 4)
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.result-display-content {
|
||||
display: flex;
|
||||
|
||||
.ant-table-wrapper {
|
||||
flex: 1;
|
||||
|
||||
&:first-child {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
::v-deep {
|
||||
.ant-table {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.ant-table-thead > tr th {
|
||||
color: #00e9fe;
|
||||
font-family: MicrosoftYaHei;
|
||||
font-size: 14px;
|
||||
padding: 4px 4px;
|
||||
background-color: transparent !important;
|
||||
|
||||
&:first-child {
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
&:last-child {
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-table-tbody {
|
||||
tr {
|
||||
background-color: transparent;
|
||||
|
||||
td {
|
||||
&:first-child {
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
td {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.color-box {
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.concentration {
|
||||
background-color: #ad8815;
|
||||
|
||||
&.error {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
&.warning {
|
||||
background-color: #ffcc30;
|
||||
}
|
||||
|
||||
&.success {
|
||||
background-color: #0f0;
|
||||
}
|
||||
}
|
||||
|
||||
.uncertainty {
|
||||
background-color: rgba(57, 184, 222, 0.4);
|
||||
}
|
||||
|
||||
.mdc {
|
||||
background-color: rgba(57, 184, 222, 0.4);
|
||||
}
|
||||
.search {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-bottom: 0 !important;
|
||||
cursor: pointer;
|
||||
background: url(~@/assets/images/spectrum/search.png) center no-repeat;
|
||||
|
||||
&:hover {
|
||||
background: url(~@/assets/images/spectrum/search-hover.png) center no-repeat;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
169
src/views/spectrumAnalysis/components/RoiLimits.vue
Normal file
169
src/views/spectrumAnalysis/components/RoiLimits.vue
Normal file
|
|
@ -0,0 +1,169 @@
|
|||
<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) {
|
||||
const [ROIOneList, ...lists] = newVal
|
||||
this.buildOneLineList(ROIOneList)
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
this.buttons = buttons
|
||||
return {
|
||||
active: 0,
|
||||
roiLimitsOption,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
buildOneLineList(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])
|
||||
},
|
||||
},
|
||||
}
|
||||
</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>
|
||||
69
src/views/spectrumAnalysis/components/RoiParam.vue
Normal file
69
src/views/spectrumAnalysis/components/RoiParam.vue
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
<template>
|
||||
<div class="roi-param-container">
|
||||
<div class="roi-param-container-roi">
|
||||
<div class="roi-param-container-roi-label">ROI1</div>
|
||||
<div class="roi-param-container-roi-item">
|
||||
<div style="text-align: center">Beta</div>
|
||||
<a-input :value="roiParam.ROIOneStart" style="margin: 15px 0 20px" />
|
||||
<a-input :value="roiParam.ROIOneStop" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="roi-param-container-roi">
|
||||
<div class="roi-param-container-roi-label">ROI2</div>
|
||||
<div class="roi-param-container-roi-item">
|
||||
<div style="text-align: center">Beta</div>
|
||||
<a-input :value="roiParam.ROITwoStart" style="margin: 15px 0 20px" />
|
||||
<a-input :value="roiParam.ROITwoStop" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="roi-param-container-roi">
|
||||
<div class="roi-param-container-roi-label">ROI3</div>
|
||||
<div class="roi-param-container-roi-item">
|
||||
<div style="text-align: center">Beta</div>
|
||||
<a-input :value="roiParam.ROIThreeStart" style="margin: 15px 0 20px" />
|
||||
<a-input :value="roiParam.ROIThreeStop" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="roi-param-container-roi">
|
||||
<div class="roi-param-container-roi-label">ROI4</div>
|
||||
<div class="roi-param-container-roi-item">
|
||||
<div style="text-align: center">Beta</div>
|
||||
<a-input :value="roiParam.ROIFourStart" style="margin: 15px 0 20px" />
|
||||
<a-input :value="roiParam.ROIFourStop" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
roiParam: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.roi-param-container {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
&-roi {
|
||||
flex: 1;
|
||||
// background: #0ff;
|
||||
display: flex;
|
||||
// align-items: center;
|
||||
gap: 10px;
|
||||
&-label {
|
||||
width: 60px;
|
||||
line-height: 160px;
|
||||
}
|
||||
&--item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -50,6 +50,8 @@
|
|||
/>
|
||||
<!-- Gamma 分析 -->
|
||||
|
||||
<beta-analysis v-else-if="isBeta" />
|
||||
|
||||
<!-- Beta-Gamma 分析 -->
|
||||
<!-- <beta-gamma-analysis v-else-if="isBetaGamma" ref="betaGammaAnalysisRef" :sample="sampleData" /> -->
|
||||
<beta-gamma-analysis
|
||||
|
|
@ -237,6 +239,7 @@
|
|||
<script>
|
||||
import { postAction } from '@/api/manage'
|
||||
import GammaAnalysis from './gamma-analysis.vue'
|
||||
import BetaAnalysis from './beta-analysis.vue'
|
||||
import BetaGammaAnalysis from './beta-gamma-analysis.vue'
|
||||
import SpectraListInMenu from './components/SpectraListInMenu.vue'
|
||||
import LoadFromDbModal from './components/Modals/LoadFromDBModal.vue'
|
||||
|
|
@ -291,6 +294,7 @@ export default {
|
|||
name: 'SpectrumAnalysis',
|
||||
components: {
|
||||
BetaGammaAnalysis,
|
||||
BetaAnalysis,
|
||||
GammaAnalysis,
|
||||
SpectraListInMenu,
|
||||
LoadFromDbModal,
|
||||
|
|
@ -1647,6 +1651,10 @@ export default {
|
|||
isGamma() {
|
||||
return this.analysisType == ANALYZE_TYPE.GAMMA
|
||||
},
|
||||
// 当前类型是否是Beta
|
||||
isBeta() {
|
||||
return this.analysisType == ANALYZE_TYPE.BETA_GAMMA ? false : true
|
||||
},
|
||||
|
||||
// 当前类型是否是Beta-Gamma
|
||||
isBetaGamma() {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user