372 lines
11 KiB
Vue
372 lines
11 KiB
Vue
<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" />
|
||
</pop-over-with-icon>
|
||
<pop-over-with-icon placement="bottomLeft" style="width: 159px" v-model="spectraVisible">
|
||
Spectra
|
||
<spectra
|
||
slot="content"
|
||
v-model="spectraType"
|
||
@input="
|
||
spectraVisible = false
|
||
changeChartByType($event)
|
||
"
|
||
/>
|
||
</pop-over-with-icon>
|
||
</div>
|
||
|
||
<!-- 二级交互栏结束 -->
|
||
<!-- 主体部分 -->
|
||
<div class="beta-gamma-analysis-main">
|
||
<!-- 左侧图表 -->
|
||
<div class="beta-gamma-spectrum-sample">
|
||
<beta-gamma-chart-container>
|
||
<template slot="title">
|
||
Beta-Gamma Spectrum: Sample
|
||
</template>
|
||
<beta-gamma-spectrum-chart
|
||
ref="betaGammaChartRef"
|
||
:histogramDataList="histogramDataList"
|
||
:histogramDataDList="histogramDataDList"
|
||
:boundary="boundaryList"
|
||
@positionChange="handlePositionChange"
|
||
@rangeChange="handleRangeChange"
|
||
/>
|
||
</beta-gamma-chart-container>
|
||
</div>
|
||
<!-- 左侧图表结束 -->
|
||
|
||
<!-- 右侧 -->
|
||
<div class="beta-and-gamma-spectrum">
|
||
<!-- 四个图表开始 -->
|
||
<div class="spectrum-charts">
|
||
<div class="gamma-spectrum">
|
||
<div class="gamma-spectrum-item">
|
||
<beta-gamma-chart-container>
|
||
<template slot="title">
|
||
Gamma Spectrum: Original
|
||
</template>
|
||
<spectrum-line-chart
|
||
ref="lineChart1Ref"
|
||
:data="gammaOriginalData"
|
||
:energy="gammaEnergyData"
|
||
@rangeChange="handleLineChartRangeChange($event, 'y')"
|
||
/>
|
||
</beta-gamma-chart-container>
|
||
</div>
|
||
<div class="gamma-spectrum-item">
|
||
<beta-gamma-chart-container>
|
||
<template slot="title">
|
||
Gamma Spectrum: Projected
|
||
</template>
|
||
<spectrum-line-chart
|
||
ref="lineChart2Ref"
|
||
:data="gammaProjectedData"
|
||
:energy="gammaEnergyData"
|
||
@rangeChange="handleLineChartRangeChange($event, 'y')"
|
||
/>
|
||
</beta-gamma-chart-container>
|
||
</div>
|
||
</div>
|
||
<div class="gamma-spectrum">
|
||
<div class="gamma-spectrum-item">
|
||
<beta-gamma-chart-container>
|
||
<template slot="title">
|
||
Beta Spectrum: Original
|
||
</template>
|
||
<spectrum-line-chart
|
||
ref="lineChart3Ref"
|
||
:data="betaOriginalData"
|
||
:energy="betaEnergyData"
|
||
title="Beta"
|
||
color="#00ff1e"
|
||
@rangeChange="handleLineChartRangeChange($event, 'x')"
|
||
/>
|
||
</beta-gamma-chart-container>
|
||
</div>
|
||
<div class="gamma-spectrum-item">
|
||
<beta-gamma-chart-container>
|
||
<template slot="title">
|
||
Beta Spectrum: Projected
|
||
</template>
|
||
<spectrum-line-chart
|
||
ref="lineChart4Ref"
|
||
:data="betaProjectedData"
|
||
:energy="betaEnergyData"
|
||
title="Beta"
|
||
color="#00ff1e"
|
||
@rangeChange="handleLineChartRangeChange($event, 'x')"
|
||
/>
|
||
</beta-gamma-chart-container>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 四个图表结束 -->
|
||
|
||
<!-- 结果显示开始 -->
|
||
<div class="result-display">
|
||
<beta-gamma-chart-container>
|
||
<template slot="title">
|
||
Result display
|
||
</template>
|
||
<result-display :data="resultDisplay"></result-display>
|
||
</beta-gamma-chart-container>
|
||
</div>
|
||
<!-- 结果显示结束 -->
|
||
</div>
|
||
<!-- 右侧结束 -->
|
||
|
||
<!-- Comparison Modal 开始 -->
|
||
<comparison-modal v-model="comparisonModalVisible" />
|
||
<!-- Comparison Modal 结束 -->
|
||
</div>
|
||
<!-- 主体部分结束 -->
|
||
</a-spin>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { getAction } from '../../api/manage'
|
||
import BetaGammaChartContainer from './components/BetaGammaChartContainer.vue'
|
||
import BetaGammaSpectrumChart from './components/BetaGammaSpectrumChart.vue'
|
||
import ComparisonModal from './components/Modals/ComparisonModal.vue'
|
||
import ResultDisplay from './components/ResultDisplay.vue'
|
||
import SpectrumLineChart from './components/SpectrumLineChart.vue'
|
||
import BetaGammaDetailedInfomation from './components/SubOperators/BetaGammaDetailedInfomation.vue'
|
||
import BetaGammaQcFlags from './components/SubOperators/BetaGammaQcFlags.vue'
|
||
import PopOverWithIcon from './components/SubOperators/PopOverWithIcon.vue'
|
||
import Spectra from './components/SubOperators/Spectra.vue'
|
||
|
||
export default {
|
||
components: {
|
||
BetaGammaChartContainer,
|
||
SpectrumLineChart,
|
||
ResultDisplay,
|
||
BetaGammaSpectrumChart,
|
||
ComparisonModal,
|
||
|
||
PopOverWithIcon,
|
||
Spectra,
|
||
BetaGammaQcFlags,
|
||
BetaGammaDetailedInfomation
|
||
},
|
||
props: {
|
||
sample: {
|
||
type: Object
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
qcFlags: {},
|
||
|
||
spectraVisible: false,
|
||
spectraType: 'sample',
|
||
|
||
isLoading: false,
|
||
|
||
spectrumData: {}, // Detailed Infomation 信息
|
||
|
||
resultDisplay: [],
|
||
|
||
histogramDataList: [],
|
||
histogramDataDList: [],
|
||
boundaryList: [],
|
||
|
||
gammaOriginalData: [],
|
||
gammaProjectedData: [],
|
||
|
||
betaOriginalData: [],
|
||
betaProjectedData: [],
|
||
|
||
gammaEnergyData: [],
|
||
betaEnergyData: [],
|
||
|
||
comparisonModalVisible: false
|
||
}
|
||
},
|
||
methods: {
|
||
async getSampleDetail() {
|
||
this.spectraType = 'sample'
|
||
|
||
const { dbName, sampleId } = this.sample
|
||
try {
|
||
this.isLoading = true
|
||
const { success, result, message } = await getAction('/spectrumAnalysis/getDBSpectrumChart', {
|
||
dbName,
|
||
sampleId
|
||
})
|
||
if (success) {
|
||
this.sampleDetail = result
|
||
this.changeChartByType('sample')
|
||
this.isLoading = false
|
||
} else {
|
||
this.$message.error(message)
|
||
}
|
||
} catch (error) {
|
||
console.error(error)
|
||
}
|
||
},
|
||
|
||
changeChartByType(type) {
|
||
const {
|
||
betaOriginalData,
|
||
betaProjectedData,
|
||
betaEnergyData,
|
||
|
||
gammaOriginalData,
|
||
gammaProjectedData,
|
||
gammaEnergyData,
|
||
|
||
histogramDataList, // 左侧 Beta-Gamma Spectrum: Sample 图表
|
||
histogramDataDList, // 左侧 Beta-Gamma Spectrum: Sample 图表的3D部分
|
||
Boundary, // 左侧2d图表的矩形
|
||
|
||
XeData, // 右下角Result Display
|
||
spectrumData,
|
||
|
||
AcqTimeBtn, // QC Flags 相关
|
||
CollectTimeBtn, // QC Flags 相关
|
||
SampleVolumeBtn, // QC Flags 相关
|
||
XeVolumeBtn, // QC Flags 相关
|
||
GasBgBtn, // QC Flags 相关
|
||
DetBgBtn // QC Flags 相关
|
||
} = this.sampleDetail[type]
|
||
|
||
this.spectrumData = spectrumData
|
||
|
||
this.histogramDataList = histogramDataList
|
||
this.histogramDataDList = histogramDataDList
|
||
this.boundaryList = Boundary
|
||
|
||
this.gammaOriginalData = gammaOriginalData
|
||
this.gammaProjectedData = gammaProjectedData
|
||
this.gammaEnergyData = gammaEnergyData
|
||
|
||
this.betaOriginalData = betaOriginalData
|
||
this.betaProjectedData = betaProjectedData
|
||
this.betaEnergyData = betaEnergyData
|
||
|
||
this.resultDisplay = XeData
|
||
|
||
this.qcFlags = {
|
||
AcqTimeBtn,
|
||
CollectTimeBtn,
|
||
SampleVolumeBtn,
|
||
XeVolumeBtn,
|
||
GasBgBtn,
|
||
DetBgBtn
|
||
}
|
||
},
|
||
|
||
resize() {
|
||
this.$refs.betaGammaChartRef && this.$refs.betaGammaChartRef.resize()
|
||
this.$refs.lineChart1Ref && this.$refs.lineChart1Ref.resize()
|
||
this.$refs.lineChart2Ref && this.$refs.lineChart2Ref.resize()
|
||
this.$refs.lineChart3Ref && this.$refs.lineChart3Ref.resize()
|
||
this.$refs.lineChart4Ref && this.$refs.lineChart4Ref.resize()
|
||
},
|
||
|
||
// 鼠标在左侧2d图表上移动时
|
||
handlePositionChange([xAxis, yAxis]) {
|
||
// Gamma Spectrum，根据bata-gamma的gamma channel的值（y轴）进行定位
|
||
this.$refs.lineChart1Ref.setLinePosition(yAxis)
|
||
this.$refs.lineChart2Ref.setLinePosition(yAxis)
|
||
|
||
// Beta Spectrum，根据bata-gamma的bata channel的值（x轴）进行定位
|
||
this.$refs.lineChart3Ref.setLinePosition(xAxis)
|
||
this.$refs.lineChart4Ref.setLinePosition(xAxis)
|
||
},
|
||
|
||
// 鼠标在左侧2d图表上刷选时
|
||
handleRangeChange([x1, x2, y1, y2]) {
|
||
this.$refs.lineChart1Ref.setRange(y1, y2)
|
||
this.$refs.lineChart2Ref.setRange(y1, y2)
|
||
|
||
this.$refs.lineChart3Ref.setRange(x1, x2)
|
||
this.$refs.lineChart4Ref.setRange(x1, x2)
|
||
},
|
||
|
||
/**
|
||
* 右侧折线图表刷选时
|
||
* @param {number[]} range 范围
|
||
* @param {'x'|'y'} type 类型
|
||
**/
|
||
|
||
handleLineChartRangeChange([x1, x2], type) {
|
||
if (type == 'y') {
|
||
// 如果是gamma channel变化
|
||
this.$refs.lineChart1Ref.setRange(x1, x2)
|
||
this.$refs.lineChart2Ref.setRange(x1, x2)
|
||
} else if (type == 'x') {
|
||
this.$refs.lineChart3Ref.setRange(x1, x2)
|
||
this.$refs.lineChart4Ref.setRange(x1, x2)
|
||
}
|
||
|
||
this.$refs.betaGammaChartRef.setRange(x1, x2, type)
|
||
}
|
||
},
|
||
watch: {
|
||
sample: {
|
||
handler() {
|
||
this.getSampleDetail()
|
||
},
|
||
immediate: true
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.beta-gamma-analysis {
|
||
height: 100%;
|
||
|
||
&-main {
|
||
height: calc(100% - 51px);
|
||
display: flex;
|
||
gap: 30px;
|
||
overflow: auto hidden;
|
||
}
|
||
|
||
.beta-gamma-spectrum-sample {
|
||
flex: 788;
|
||
}
|
||
|
||
.beta-and-gamma-spectrum {
|
||
flex: 1048;
|
||
flex-direction: column;
|
||
|
||
.spectrum-charts {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: calc(100% - 208px);
|
||
|
||
.gamma-spectrum {
|
||
display: flex;
|
||
height: 50%;
|
||
|
||
&-item {
|
||
flex: 509px;
|
||
|
||
&:first-child {
|
||
margin-right: 30px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.result-display {
|
||
flex-shrink: 0;
|
||
}
|
||
}
|
||
}
|
||
</style>
|