346 lines
8.5 KiB
Vue
346 lines
8.5 KiB
Vue
<template>
|
|
<div class="spectrum-analysis">
|
|
<!-- 顶部操作栏 -->
|
|
<div class="spectrum-analysis-operators">
|
|
<a-dropdown class="spectrum-analysis-operators-item" v-for="operation in operations" :key="operation.title">
|
|
<a-button type="primary">{{ operation.title }}</a-button>
|
|
<template slot="overlay">
|
|
<a-menu>
|
|
<a-menu-item v-for="child in operation.children" :key="child.title" @click="child.handler">
|
|
{{ child.title }}
|
|
</a-menu-item>
|
|
</a-menu>
|
|
</template>
|
|
</a-dropdown>
|
|
</div>
|
|
<!-- 顶部操作栏结束 -->
|
|
|
|
<!-- 二级交互栏 -->
|
|
<div class="spectrum-analysis-sub-operators">
|
|
<pop-over-with-icon placement="bottomLeft">
|
|
Detailed-Information
|
|
<detailed-infomation slot="content" />
|
|
</pop-over-with-icon>
|
|
<pop-over-with-icon placement="bottomLeft">
|
|
QC Flags
|
|
<qc-flags slot="content" :data="{ collectionTime: '123' }" />
|
|
</pop-over-with-icon>
|
|
|
|
<!-- gamma 独有的二级交互栏 -->
|
|
<template v-if="analysisType == ANALYZE_TYPE.GAMMA">
|
|
<pop-over-with-icon>
|
|
Graph Assistance
|
|
<graph-assistance slot="content" />
|
|
</pop-over-with-icon>
|
|
<pop-over-with-icon>
|
|
Nuclide Library
|
|
<nuclear-library slot="content" />
|
|
</pop-over-with-icon>
|
|
<div class="peak-info">
|
|
<button-with-switch-icon @change="handlePeakInfoChange">
|
|
Peak Information
|
|
</button-with-switch-icon>
|
|
</div>
|
|
</template>
|
|
<!-- gamma 独有的二级交互栏结束 -->
|
|
|
|
<!-- beta-gamma 独有的二级交互栏 -->
|
|
<template v-if="analysisType == ANALYZE_TYPE.BETA_GAMMA">
|
|
<pop-over-with-icon placement="bottomLeft" style="width: 159px">
|
|
Spectra
|
|
<spectra slot="content" />
|
|
</pop-over-with-icon>
|
|
</template>
|
|
<!-- beta-gamma 独有的二级交互栏结束 -->
|
|
</div>
|
|
<!-- 二级交互栏结束 -->
|
|
|
|
<!-- 频谱分析部分 -->
|
|
<div class="spectrum-analysis-main">
|
|
<gamma-analysis v-if="analysisType == ANALYZE_TYPE.GAMMA" ref="gammaAnalysisRef" />
|
|
<beta-gamma-analysis v-if="analysisType == ANALYZE_TYPE.BETA_GAMMA" ref="betaGammaAnalysisRef" />
|
|
<resize-observer @notify="handleResize" />
|
|
</div>
|
|
<!-- 频谱分析部分结束 -->
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import ButtonWithSwitchIcon from './components/sub-operators/ButtonWithSwitchIcon.vue'
|
|
import DetailedInfomation from './components/sub-operators/DetailedInfomation.vue'
|
|
import GraphAssistance from './components/sub-operators/GraphAssistance.vue'
|
|
import NuclearLibrary from './components/sub-operators/NuclearLibrary.vue'
|
|
import PopOverWithIcon from './components/sub-operators/PopOverWithIcon.vue'
|
|
import QcFlags from './components/sub-operators/QcFlags.vue'
|
|
import GammaAnalysis from './gamma-analysis.vue'
|
|
import BetaGammaAnalysis from './beta-gamma-analysis.vue'
|
|
import Spectra from './components/sub-operators/Spectra.vue'
|
|
|
|
// 分析类型
|
|
const ANALYZE_TYPE = {
|
|
GAMMA: 'gammaAnalysis',
|
|
BETA_GAMMA: 'betaGammaAnalysis'
|
|
}
|
|
export default {
|
|
components: {
|
|
PopOverWithIcon,
|
|
ButtonWithSwitchIcon,
|
|
BetaGammaAnalysis,
|
|
GammaAnalysis,
|
|
QcFlags,
|
|
GraphAssistance,
|
|
DetailedInfomation,
|
|
NuclearLibrary,
|
|
Spectra
|
|
},
|
|
data() {
|
|
this.ANALYZE_TYPE = ANALYZE_TYPE
|
|
|
|
return {
|
|
analysisType: ANALYZE_TYPE.BETA_GAMMA // 分析类型
|
|
}
|
|
},
|
|
methods: {
|
|
handleLoadFromDb() {
|
|
console.log('%c [ handleLoadFromDb ]-46', 'font-size:13px; background:pink; color:#bf2c9f;')
|
|
},
|
|
|
|
handleLoadFromFile() {
|
|
console.log('%c [ handleLoadFromFile ]-46', 'font-size:13px; background:pink; color:#bf2c9f;')
|
|
},
|
|
|
|
// peak info 点击左右方向
|
|
handlePeakInfoChange(direction) {
|
|
this.$refs.gammaAnalysisRef.moveMarkLine(direction)
|
|
},
|
|
|
|
handleResize() {
|
|
this.$refs.gammaAnalysisRef && this.$refs.gammaAnalysisRef.resize()
|
|
this.$refs.betaGammaAnalysisRef && this.$refs.betaGammaAnalysisRef.resize()
|
|
}
|
|
},
|
|
computed: {
|
|
operations() {
|
|
return [
|
|
{
|
|
title: 'SAMPLE',
|
|
children: [
|
|
{
|
|
title: 'Load From DB',
|
|
handler: this.handleLoadFromDb
|
|
},
|
|
{
|
|
title: 'Load From File',
|
|
handler: this.handleLoadFromFile
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: 'SAVE',
|
|
children: [
|
|
{
|
|
title: 'Load From DB',
|
|
handler: this.handleLoadFromDb
|
|
},
|
|
{
|
|
title: 'Load From File',
|
|
handler: this.handleLoadFromFile
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: 'ANALYZE',
|
|
children: [
|
|
{
|
|
title: 'Load From DB',
|
|
handler: this.handleLoadFromDb
|
|
},
|
|
{
|
|
title: 'Load From File',
|
|
handler: this.handleLoadFromFile
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: 'CALIBRATION',
|
|
children: [
|
|
{
|
|
title: 'Load From DB',
|
|
handler: this.handleLoadFromDb
|
|
},
|
|
{
|
|
title: 'Load From File',
|
|
handler: this.handleLoadFromFile
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: 'NUCLIDELIBRARY',
|
|
children: [
|
|
{
|
|
title: 'Load From DB',
|
|
handler: this.handleLoadFromDb
|
|
},
|
|
{
|
|
title: 'Load From File',
|
|
handler: this.handleLoadFromFile
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: 'COMMENTS',
|
|
children: [
|
|
{
|
|
title: 'Load From DB',
|
|
handler: this.handleLoadFromDb
|
|
},
|
|
{
|
|
title: 'Load From File',
|
|
handler: this.handleLoadFromFile
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: 'REPORTS',
|
|
children: [
|
|
{
|
|
title: 'Load From DB',
|
|
handler: this.handleLoadFromDb
|
|
},
|
|
{
|
|
title: 'Load From File',
|
|
handler: this.handleLoadFromFile
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: 'LOG',
|
|
children: [
|
|
{
|
|
title: 'Load From DB',
|
|
handler: this.handleLoadFromDb
|
|
},
|
|
{
|
|
title: 'Load From File',
|
|
handler: this.handleLoadFromFile
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: 'HELP',
|
|
children: [
|
|
{
|
|
title: 'Load From DB',
|
|
handler: this.handleLoadFromDb
|
|
},
|
|
{
|
|
title: 'Load From File',
|
|
handler: this.handleLoadFromFile
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.spectrum-analysis {
|
|
padding-top: 17px;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
// 顶部操作栏开始
|
|
&-operators {
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: nowrap;
|
|
overflow: auto;
|
|
|
|
&-item {
|
|
width: 158px;
|
|
border: 1px solid rgba(12, 235, 201, 0.6);
|
|
border-top-width: 3px;
|
|
height: 30px;
|
|
background-color: rgba(51, 202, 217, 0.2);
|
|
color: #ccede8;
|
|
|
|
&:not(:last-child) {
|
|
margin-right: 15px;
|
|
}
|
|
|
|
::v-deep {
|
|
span {
|
|
text-shadow: none;
|
|
line-height: 26px;
|
|
letter-spacing: 2px;
|
|
}
|
|
}
|
|
|
|
&:nth-child(4) {
|
|
width: 224px;
|
|
}
|
|
&:nth-child(5) {
|
|
width: 268px;
|
|
}
|
|
&:nth-child(6) {
|
|
width: 257px;
|
|
}
|
|
&:nth-child(7) {
|
|
width: 234px;
|
|
}
|
|
&:nth-child(8) {
|
|
width: 125px;
|
|
}
|
|
}
|
|
}
|
|
// 顶部操作栏结束
|
|
|
|
// 二级操作栏开始
|
|
&-sub-operators {
|
|
flex-shrink: 0;
|
|
margin-top: 15px;
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
overflow: auto;
|
|
|
|
.pop-over-with-icon {
|
|
height: 32px;
|
|
|
|
&:not(:last-child) {
|
|
margin-right: 11px;
|
|
}
|
|
|
|
&:nth-child(1) {
|
|
width: 256px;
|
|
}
|
|
&:nth-child(2) {
|
|
width: 186px;
|
|
}
|
|
&:nth-child(3) {
|
|
width: 246px;
|
|
}
|
|
&:nth-child(4) {
|
|
width: 246px;
|
|
}
|
|
}
|
|
|
|
.peak-info {
|
|
width: 306px;
|
|
height: 32px;
|
|
display: inline-block;
|
|
}
|
|
}
|
|
// 二级操作栏结束
|
|
|
|
// 主体部分开始
|
|
&-main {
|
|
flex: 1;
|
|
margin-top: 19px;
|
|
height: calc(100% - 100px);
|
|
}
|
|
// 主体部分结束
|
|
}
|
|
</style>
|