feat: 增加Interactive Tool弹窗中的部分二级弹窗，对接样本类型为beta-gamma的部分数据
This commit is contained in:
parent
09e77962d2
commit
8fb0089be1
|
|
@ -1,80 +1,120 @@
|
|||
<template>
|
||||
<div class="beta-gamma-analysis">
|
||||
<div class="beta-gamma-spectrum-sample">
|
||||
<beta-gamma-chart-container>
|
||||
<template slot="title">
|
||||
Beta-Gamma Spectrum: Sample
|
||||
</template>
|
||||
<beta-gamma-spectrum-chart
|
||||
ref="betaGammaChartRef"
|
||||
:data="twoDData"
|
||||
@positionChange="handlePositionChange"
|
||||
@rangeChange="handleRangeChange"
|
||||
/>
|
||||
</beta-gamma-chart-container>
|
||||
<!-- 二级交互栏 -->
|
||||
<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>
|
||||
<pop-over-with-icon placement="bottomLeft" style="width: 159px" v-model="spectraVisible">
|
||||
Spectra
|
||||
<spectra slot="content" v-model="spectraType" @input="spectraVisible = false" />
|
||||
</pop-over-with-icon>
|
||||
</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" @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" @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"
|
||||
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"
|
||||
title="Beta"
|
||||
color="#00ff1e"
|
||||
@rangeChange="handleLineChartRangeChange($event, 'x')"
|
||||
/>
|
||||
</beta-gamma-chart-container>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="result-display">
|
||||
<!-- 二级交互栏结束 -->
|
||||
<!-- 主体部分 -->
|
||||
<div class="beta-gamma-analysis-main">
|
||||
<!-- 左侧图表 -->
|
||||
<div class="beta-gamma-spectrum-sample">
|
||||
<beta-gamma-chart-container>
|
||||
<template slot="title">
|
||||
Result display
|
||||
Beta-Gamma Spectrum: Sample
|
||||
</template>
|
||||
<result-display :data="resultDisplay"></result-display>
|
||||
<beta-gamma-spectrum-chart
|
||||
ref="betaGammaChartRef"
|
||||
:data="histogramDataList"
|
||||
@positionChange="handlePositionChange"
|
||||
@rangeChange="handleRangeChange"
|
||||
/>
|
||||
</beta-gamma-chart-container>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 左侧图表结束 -->
|
||||
|
||||
<!-- Comparison Modal 开始 -->
|
||||
<comparison-modal v-model="comparisonModalVisible" />
|
||||
<!-- Comparison Modal 结束 -->
|
||||
<!-- 右侧 -->
|
||||
<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"
|
||||
@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="betaProjectedData"
|
||||
@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"
|
||||
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="gammaProjectedData"
|
||||
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>
|
||||
<!-- 主体部分结束 -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -84,8 +124,10 @@ 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 twoDData from './data.json'
|
||||
import DetailedInfomation from './components/SubOperators/DetailedInfomation.vue'
|
||||
import PopOverWithIcon from './components/SubOperators/PopOverWithIcon.vue'
|
||||
import QcFlags from './components/SubOperators/QcFlags.vue'
|
||||
import Spectra from './components/SubOperators/Spectra.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
|
@ -93,10 +135,23 @@ export default {
|
|||
SpectrumLineChart,
|
||||
ResultDisplay,
|
||||
BetaGammaSpectrumChart,
|
||||
ComparisonModal
|
||||
ComparisonModal,
|
||||
DetailedInfomation,
|
||||
|
||||
PopOverWithIcon,
|
||||
QcFlags,
|
||||
Spectra
|
||||
},
|
||||
props: {
|
||||
data: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
spectraVisible: false,
|
||||
spectraType: 'Sample Data',
|
||||
|
||||
resultDisplay: [
|
||||
{
|
||||
id: 1,
|
||||
|
|
@ -127,13 +182,16 @@ export default {
|
|||
mdc: '0.03464'
|
||||
}
|
||||
],
|
||||
twoDData: {},
|
||||
histogramDataList: [],
|
||||
|
||||
gammaOriginalData: [],
|
||||
betaOriginalData: [],
|
||||
betaProjectedData: [],
|
||||
gammaProjectedData: [],
|
||||
|
||||
comparisonModalVisible: false
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getData()
|
||||
},
|
||||
methods: {
|
||||
resize() {
|
||||
this.$refs.betaGammaChartRef && this.$refs.betaGammaChartRef.resize()
|
||||
|
|
@ -143,11 +201,6 @@ export default {
|
|||
this.$refs.lineChart4Ref && this.$refs.lineChart4Ref.resize()
|
||||
},
|
||||
|
||||
async getData() {
|
||||
await 0
|
||||
this.twoDData = twoDData
|
||||
},
|
||||
|
||||
// 鼠标在左侧2d图表上移动时
|
||||
handlePositionChange([xAxis, yAxis]) {
|
||||
// Gamma Spectrum，根据bata-gamma的gamma channel的值（y轴）进行定位
|
||||
|
|
@ -186,6 +239,32 @@ export default {
|
|||
|
||||
this.$refs.betaGammaChartRef.setRange(x1, x2, type)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
data: {
|
||||
handler(newVal) {
|
||||
const {
|
||||
betaOriginalData,
|
||||
betaProjectedData,
|
||||
gammaOriginalData,
|
||||
gammaProjectedData,
|
||||
histogramDataList, // 左侧 Beta-Gamma Spectrum: Sample 图表
|
||||
spectrumData
|
||||
} = newVal
|
||||
|
||||
|
||||
console.log('%c [ spectrumData ]-246', 'font-size:13px; background:pink; color:#bf2c9f;', spectrumData)
|
||||
|
||||
this.histogramDataList = histogramDataList
|
||||
|
||||
this.gammaOriginalData = gammaOriginalData
|
||||
this.betaOriginalData = betaOriginalData
|
||||
|
||||
this.betaProjectedData = betaProjectedData
|
||||
this.gammaProjectedData = gammaProjectedData
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -193,8 +272,12 @@ export default {
|
|||
<style lang="less" scoped>
|
||||
.beta-gamma-analysis {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
overflow: auto hidden;
|
||||
|
||||
&-main {
|
||||
height: calc(100% - 51px);
|
||||
display: flex;
|
||||
overflow: auto hidden;
|
||||
}
|
||||
|
||||
.beta-gamma-spectrum-sample {
|
||||
width: calc(100% - 1078px);
|
||||
|
|
|
|||
|
|
@ -141,7 +141,7 @@ const threeDSurfaceOption = {
|
|||
show: false,
|
||||
dimension: 2,
|
||||
min: 0,
|
||||
max: 5,
|
||||
max: 0,
|
||||
inRange: ['#47C134', '#f00']
|
||||
},
|
||||
grid3D: {
|
||||
|
|
@ -188,21 +188,11 @@ const threeDSurfaceOption = {
|
|||
color: '#C4E5A6',
|
||||
fontSize: 14
|
||||
},
|
||||
max: 5
|
||||
max: 0
|
||||
},
|
||||
series: {
|
||||
type: 'surface',
|
||||
data: [
|
||||
[64, 64, 0],
|
||||
[66, 66, 0],
|
||||
[66, 66, 0],
|
||||
[65, 65, 4],
|
||||
|
||||
[128, 128, 0],
|
||||
[130, 130, 0],
|
||||
[130, 130, 0],
|
||||
[129, 129, 4]
|
||||
]
|
||||
data: []
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -269,8 +259,8 @@ const threeDScatterOption = {
|
|||
export default {
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
components: {
|
||||
|
|
@ -420,15 +410,11 @@ export default {
|
|||
watch: {
|
||||
data: {
|
||||
handler(newVal) {
|
||||
const data = []
|
||||
Object.entries(newVal).forEach(([_, v]) => {
|
||||
v.forEach(({ b, g, c }) => {
|
||||
data.push({
|
||||
value: [b, g, c]
|
||||
})
|
||||
})
|
||||
})
|
||||
this.twoDOption.series.data = data
|
||||
this.twoDOption.series.data = newVal.filter(item => item.c).map(item => [item.b, item.g, item.c]) // 设置2D Scatter数据
|
||||
|
||||
const treeDSurfaceZMax = Math.max(...newVal.map(item => item.c))
|
||||
this.threeDSurfaceOption.zAxis3D.max = Math.ceil(treeDSurfaceZMax * 1.2)
|
||||
this.threeDSurfaceOption.series.data = newVal.map(item => [item.b, item.g, item.c]) // 设置3D surface数据
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,273 +0,0 @@
|
|||
<template>
|
||||
<custom-modal v-model="visible" :width="1200" title="Interactive Analyse Tools" :okHanlder="handleOk">
|
||||
<div class="interactive-analysis-tools">
|
||||
<div class="interactive-analysis-tools-left">
|
||||
<div class="chart">
|
||||
<custom-chart :option="option" />
|
||||
</div>
|
||||
<div class="table">
|
||||
<p class="title">
|
||||
< 6 Peaks with Anthro.Nuclides >
|
||||
</p>
|
||||
<custom-table :list="list" :columns="columns"> </custom-table>
|
||||
<div class="operators">
|
||||
<a-button type="primary">Nuclide Review Window</a-button>
|
||||
<a-button type="primary">Add Peak Comment</a-button>
|
||||
<a-button type="primary">Add General Comment</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="interactive-analysis-tools-right">
|
||||
<title-over-boarder title="Peak">
|
||||
<div class="peak-box">
|
||||
<div class="peak-box-item">
|
||||
<a-button type="primary">Insert</a-button>
|
||||
</div>
|
||||
<div class="peak-box-item">
|
||||
<a-button type="primary">Delete</a-button>
|
||||
</div>
|
||||
<div class="peak-box-item">
|
||||
<a-button type="primary">Fit</a-button>
|
||||
</div>
|
||||
|
||||
<div class="peak-box-item symbol">
|
||||
<a-button type="primary"><</a-button>
|
||||
<a-button type="primary">></a-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="base-line">
|
||||
<a-button type="primary">BaseLine</a-button>
|
||||
</div>
|
||||
</title-over-boarder>
|
||||
<div class="reset-btn-box">
|
||||
<a-button type="primary">Reset Chart</a-button>
|
||||
</div>
|
||||
<div class="identify-box">
|
||||
<title-over-boarder title="Nuclide Identify">
|
||||
<a-form-model class="tolerance">
|
||||
<a-form-model-item label="Tolerance">
|
||||
<a-input-number></a-input-number>
|
||||
</a-form-model-item>
|
||||
</a-form-model>
|
||||
<div class="identify-item">
|
||||
<div class="title">
|
||||
Possible Nuclide
|
||||
</div>
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
<div class="identify-item">
|
||||
<div class="title">
|
||||
Nuclide Identified
|
||||
</div>
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
<div class="identify-operators">
|
||||
<a-space>
|
||||
<a-input></a-input>
|
||||
<a-button type="primary">Add</a-button>
|
||||
<a-button type="primary">Del</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
</title-over-boarder>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</custom-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CustomChart from '@/components/CustomChart/index.vue'
|
||||
import TitleOverBoarder from '../TitleOverBoarder.vue'
|
||||
|
||||
const initialOption = {
|
||||
xAxis: {
|
||||
min: 1,
|
||||
max: 8192
|
||||
},
|
||||
yAxis: {
|
||||
min: 1,
|
||||
max: 994914
|
||||
}
|
||||
}
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: 'ID'
|
||||
},
|
||||
{
|
||||
title: 'Energy (keV)'
|
||||
},
|
||||
{
|
||||
title: 'Centroid (C)'
|
||||
},
|
||||
{
|
||||
title: 'FWHM (keV)'
|
||||
},
|
||||
{
|
||||
title: 'Area'
|
||||
},
|
||||
{
|
||||
title: 'Detectability'
|
||||
},
|
||||
{
|
||||
title: 'Cmnt'
|
||||
},
|
||||
{
|
||||
title: 'Nuclides'
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: Boolean
|
||||
}
|
||||
},
|
||||
components: {
|
||||
CustomChart,
|
||||
TitleOverBoarder
|
||||
},
|
||||
data() {
|
||||
this.columns = columns
|
||||
return {
|
||||
option: initialOption,
|
||||
list: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleOk() {}
|
||||
},
|
||||
computed: {
|
||||
visible: {
|
||||
get() {
|
||||
return this.value
|
||||
},
|
||||
set(val) {
|
||||
this.$emit('input', val)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.interactive-analysis-tools {
|
||||
display: flex;
|
||||
|
||||
&-left {
|
||||
flex: 1;
|
||||
margin-right: 20px;
|
||||
|
||||
.chart {
|
||||
height: 275px;
|
||||
}
|
||||
|
||||
.table {
|
||||
.title {
|
||||
color: #0cebc9;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.custom-table {
|
||||
height: 421px;
|
||||
}
|
||||
|
||||
.operators {
|
||||
display: flex;
|
||||
margin-top: 10px;
|
||||
gap: 10px;
|
||||
|
||||
.ant-btn {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-right {
|
||||
width: 25%;
|
||||
|
||||
.peak-box {
|
||||
&-item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.symbol {
|
||||
display: flex;
|
||||
|
||||
.ant-btn {
|
||||
flex: 1;
|
||||
|
||||
&:first-child {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.base-line {
|
||||
margin-top: 80px;
|
||||
}
|
||||
|
||||
.reset-btn-box {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.identify-box {
|
||||
.tolerance {
|
||||
::v-deep {
|
||||
.ant-form-item {
|
||||
margin-bottom: 10px;
|
||||
|
||||
&-control-wrapper {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&-control {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-input-number {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.identify-item {
|
||||
.title {
|
||||
background-color: #497e9d;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.content {
|
||||
height: 80px;
|
||||
background-color: #275466;
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.identify-operators {
|
||||
display: flex;
|
||||
|
||||
.ant-btn {
|
||||
width: 50px;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-btn {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<template>
|
||||
<custom-modal v-model="visible" :title="type + ' Comment'" :okHandler="handleOk">
|
||||
<a-textarea :rows="10" v-model="content"></a-textarea>
|
||||
</custom-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: Boolean
|
||||
},
|
||||
type: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
content: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async handleOk() {
|
||||
if (!this.content) {
|
||||
this.$message.warn('Please Input Comment')
|
||||
throw new Error('Content Is Empty')
|
||||
}
|
||||
|
||||
console.log('%c [ ]-29', 'font-size:13px; background:pink; color:#bf2c9f;', this.type, this.content)
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
visible: {
|
||||
get() {
|
||||
if (this.value) {
|
||||
this.content = ''
|
||||
}
|
||||
return this.value
|
||||
},
|
||||
set(val) {
|
||||
this.$emit('input', val)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
|
|
@ -0,0 +1,162 @@
|
|||
<template>
|
||||
<custom-modal centered v-model="visible" :width="1200" title="Fit Peaks and Baseline">
|
||||
<custom-table :columns="columns" :list="list">
|
||||
<template v-for="(slot, index) in slots" :slot="slot.slotName" slot-scope="{ record }">
|
||||
<a-checkbox v-if="slot.isCheckbox" :key="index" v-model="record[slot.dataIndex]">
|
||||
Fixed
|
||||
</a-checkbox>
|
||||
<a-input v-else :key="index" v-model="record[slot.dataIndex]"></a-input>
|
||||
</template>
|
||||
</custom-table>
|
||||
<div slot="custom-footer">
|
||||
<a-space>
|
||||
<a-button type="primary" @click="handlePeaks">Peaks</a-button>
|
||||
<a-button>Cancel</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
</custom-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const columns = [
|
||||
{
|
||||
title: 'Peak',
|
||||
dataIndex: 'peak',
|
||||
width: 100,
|
||||
scopedSlots: {
|
||||
customRender: 'Peak'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: 'Nuclide',
|
||||
dataIndex: 'nuclide',
|
||||
width: 100,
|
||||
scopedSlots: {
|
||||
customRender: 'Nuclide'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: 'Energy',
|
||||
dataIndex: 'energy',
|
||||
width: 100,
|
||||
scopedSlots: {
|
||||
customRender: 'Energy'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: 'NetArea',
|
||||
dataIndex: 'netAreaInput',
|
||||
width: 100,
|
||||
scopedSlots: {
|
||||
customRender: 'NetAreaInput'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: 'FWHM',
|
||||
dataIndex: 'fwhmInput',
|
||||
width: 100,
|
||||
scopedSlots: {
|
||||
customRender: 'FWHMInput'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: 'Step',
|
||||
dataIndex: 'Step',
|
||||
width: 100,
|
||||
scopedSlots: {
|
||||
customRender: 'Step'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: 'BWGamma',
|
||||
dataIndex: 'bwGamma',
|
||||
width: 100,
|
||||
scopedSlots: {
|
||||
customRender: 'BWGamma'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: 'NetArea',
|
||||
dataIndex: 'netAreaCheckbox',
|
||||
width: 100,
|
||||
scopedSlots: {
|
||||
customRender: 'NetAreaCheckbox'
|
||||
},
|
||||
isCheckbox: true
|
||||
},
|
||||
{
|
||||
title: 'Centroid',
|
||||
dataIndex: 'centroid',
|
||||
width: 100,
|
||||
scopedSlots: {
|
||||
customRender: 'Centroid'
|
||||
},
|
||||
isCheckbox: true
|
||||
},
|
||||
{
|
||||
title: 'FWHM',
|
||||
dataIndex: 'fwhmCheckbox',
|
||||
width: 100,
|
||||
scopedSlots: {
|
||||
customRender: 'FWHMCheckbox'
|
||||
},
|
||||
isCheckbox: true
|
||||
}
|
||||
]
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: Boolean
|
||||
}
|
||||
},
|
||||
data() {
|
||||
this.columns = columns
|
||||
return {
|
||||
list: [
|
||||
{
|
||||
peak: 'peak',
|
||||
nuclide: 'nuclide',
|
||||
energy: 'energy',
|
||||
netAreaInput: 'netAreaInput',
|
||||
fwhmInput: 'fwhmInput',
|
||||
Step: 'Step',
|
||||
bwGamma: 'bwGamma',
|
||||
netAreaCheckbox: false,
|
||||
centroid: false,
|
||||
fwhmCheckbox: false
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handlePeaks() {
|
||||
console.log('%c [ ]-134', 'font-size:13px; background:pink; color:#bf2c9f;', this.list)
|
||||
this.visible = false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
visible: {
|
||||
get() {
|
||||
if (this.value) {
|
||||
this.content = ''
|
||||
}
|
||||
return this.value
|
||||
},
|
||||
set(val) {
|
||||
this.$emit('input', val)
|
||||
}
|
||||
},
|
||||
slots() {
|
||||
return columns.map(column => {
|
||||
return {
|
||||
isCheckbox: column.isCheckbox,
|
||||
dataIndex: column.dataIndex,
|
||||
slotName: column.scopedSlots.customRender
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<template>
|
||||
<custom-chart :option="option" />
|
||||
</template>
|
||||
<script>
|
||||
const initialOption = {
|
||||
xAxis: {
|
||||
axisLabel: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
min: 2030.0,
|
||||
max: 2427.6,
|
||||
splitNumber: 1,
|
||||
axisLabel: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'line',
|
||||
data: [],
|
||||
itemStyle: {
|
||||
color: '#8BB93C'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
data: [],
|
||||
itemStyle: {
|
||||
color: '#03DBE6'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
option: initialOption
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,360 @@
|
|||
<template>
|
||||
<custom-modal v-model="visible" :width="1200" title="Nuclide Review" :footer="null">
|
||||
<div class="nuclide-review-search">
|
||||
<span><</span>
|
||||
<a-form-model layout="inline">
|
||||
<a-form-model-item label="Energy">
|
||||
<a-input-number></a-input-number>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="Tolerance">
|
||||
<a-input-number></a-input-number>
|
||||
</a-form-model-item>
|
||||
<a-button type="primary">Search</a-button>
|
||||
</a-form-model>
|
||||
<span>></span>
|
||||
</div>
|
||||
|
||||
<!-- 以下是表格部分 -->
|
||||
<div class="nuclide-review-table">
|
||||
<div class="nuclide-review-table-nuclide">
|
||||
<div class="nuclide-review-table-nuclide-header">Nuclide</div>
|
||||
<div class="nuclide-review-table-nuclide-content">
|
||||
<div
|
||||
class="nuclide-review-table-nuclide-item"
|
||||
:class="currNuclide == item ? 'active' : ''"
|
||||
v-for="item in nuclideList"
|
||||
:key="item.id"
|
||||
@click="handleNuclideClick(item)"
|
||||
>
|
||||
{{ item.title }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nuclide-review-table-table">
|
||||
<div class="title">
|
||||
<a-form-model>
|
||||
<a-row>
|
||||
<a-col :span="6">
|
||||
<a-form-model-item label="Name">
|
||||
1
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<a-form-model-item label="Half Life">
|
||||
2
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<a-form-model-item label="Half Life Err">
|
||||
3
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<a-form-model-item label="Lines">
|
||||
4
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form-model>
|
||||
</div>
|
||||
<a-table
|
||||
:class="list.length ? 'has-data' : ''"
|
||||
:columns="columns"
|
||||
:dataSource="list"
|
||||
:scroll="{ y: 180 }"
|
||||
:customRow="customRow"
|
||||
:pagination="false"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 表格部分结束 -->
|
||||
|
||||
<!-- 以下是图表部分 -->
|
||||
<div class="nuclide-review-chart">
|
||||
<a-row>
|
||||
<a-col :span="8"></a-col>
|
||||
<a-col :span="8"></a-col>
|
||||
<a-col :span="8"></a-col>
|
||||
</a-row>
|
||||
|
||||
<div class="nuclide-review-chart-prev"></div>
|
||||
<div class="nuclide-review-chart-next"></div>
|
||||
</div>
|
||||
<!-- 图表部分结束 -->
|
||||
</custom-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const columns = [
|
||||
{
|
||||
title: 'Id',
|
||||
dataIndex: 'id',
|
||||
width: '5%'
|
||||
},
|
||||
{
|
||||
title: 'Full Name',
|
||||
dataIndex: 'fullName',
|
||||
width: '15%'
|
||||
},
|
||||
{
|
||||
title: 'Energy',
|
||||
dataIndex: 'energy',
|
||||
width: '15%'
|
||||
},
|
||||
{
|
||||
title: 'Energy Err',
|
||||
dataIndex: 'energyErr',
|
||||
width: '15%'
|
||||
},
|
||||
{
|
||||
title: 'Abundance(%)',
|
||||
dataIndex: 'abundance',
|
||||
width: '15%'
|
||||
},
|
||||
{
|
||||
title: 'AbundanceErr(%)',
|
||||
dataIndex: 'abundanceErr',
|
||||
width: '15%'
|
||||
},
|
||||
{
|
||||
title: 'KeyLine',
|
||||
dataIndex: 'keyLine',
|
||||
width: '15%'
|
||||
}
|
||||
]
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: Boolean
|
||||
}
|
||||
},
|
||||
data() {
|
||||
this.columns = columns
|
||||
return {
|
||||
nuclideList: [
|
||||
{
|
||||
id: 1,
|
||||
title: 'Ag111'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'Eu157'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: 'Mo99'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: 'Pb204M'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: 'Pb204M'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: 'Pb204M'
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
title: 'Pb204M'
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
title: 'Pb204M'
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
title: 'Pb204M'
|
||||
}
|
||||
],
|
||||
list: [
|
||||
{
|
||||
id: '1',
|
||||
fullName: 'fullName',
|
||||
energy: 'energy',
|
||||
energyErr: 'energyErr',
|
||||
abundance: 'abundance',
|
||||
abundanceErr: 'abundanceErr',
|
||||
keyLine: 'keyLine'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
fullName: 'fullName',
|
||||
energy: 'energy',
|
||||
energyErr: 'energyErr',
|
||||
abundance: 'abundance',
|
||||
abundanceErr: 'abundanceErr',
|
||||
keyLine: 'keyLine'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
fullName: 'fullName',
|
||||
energy: 'energy',
|
||||
energyErr: 'energyErr',
|
||||
abundance: 'abundance',
|
||||
abundanceErr: 'abundanceErr',
|
||||
keyLine: 'keyLine'
|
||||
}
|
||||
],
|
||||
currNuclide: {},
|
||||
|
||||
currTableItem: {} // 选中的表格中的行
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleNuclideClick(item) {
|
||||
this.currNuclide = item
|
||||
},
|
||||
|
||||
// 实现单击选中/反选功能
|
||||
customRow(record) {
|
||||
return {
|
||||
class: 'custom-table-row' + (this.currTableItem == record ? ' ant-table-row-selected' : ''),
|
||||
on: {
|
||||
click: () => {
|
||||
this.currTableItem = record
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
visible: {
|
||||
get() {
|
||||
if (this.value) {
|
||||
this.content = ''
|
||||
}
|
||||
return this.value
|
||||
},
|
||||
set(val) {
|
||||
this.$emit('input', val)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.nuclide-review {
|
||||
&-search {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-top: 1px solid rgba(12, 235, 201, 0.3);
|
||||
border-bottom: 1px solid rgba(12, 235, 201, 0.3);
|
||||
background-color: rgba(12, 235, 201, 0.05);
|
||||
|
||||
> span {
|
||||
color: @primary-color;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border: 1px solid @primary-color;
|
||||
border-radius: 50%;
|
||||
margin: 0 10px;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.ant-form {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
&-table {
|
||||
display: flex;
|
||||
height: 250px;
|
||||
margin-top: 10px;
|
||||
|
||||
&-nuclide {
|
||||
width: 150px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&-header {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
background-color: #126b82;
|
||||
}
|
||||
|
||||
&-content {
|
||||
background-color: #275466;
|
||||
flex: 1;
|
||||
padding: 5px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
&-item {
|
||||
padding: 0 5px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
cursor: pointer;
|
||||
|
||||
&.active {
|
||||
background-color: #296d81;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-table {
|
||||
margin-left: 20px;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
|
||||
.title {
|
||||
::v-deep {
|
||||
.ant-form {
|
||||
&-item {
|
||||
margin-bottom: 0;
|
||||
|
||||
&-label,
|
||||
&-control {
|
||||
line-height: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-table-wrapper {
|
||||
&.has-data {
|
||||
::v-deep {
|
||||
.ant-table-body {
|
||||
height: 180px;
|
||||
background-color: #06282a;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep {
|
||||
.ant-table-placeholder {
|
||||
height: 181px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-chart {
|
||||
margin-top: 20px;
|
||||
height: 300px;
|
||||
background-color: #05354c;
|
||||
|
||||
&-item {
|
||||
width: 33%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.custom-table-row {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,459 @@
|
|||
<template>
|
||||
<custom-modal v-model="visible" :width="1280" title="Interactive Analyse Tools" :footer="null">
|
||||
<div class="interactive-analysis-tools">
|
||||
<div class="interactive-analysis-tools-left">
|
||||
<div class="chart">
|
||||
<custom-chart :option="option" />
|
||||
</div>
|
||||
<div class="thumbnail"></div>
|
||||
<div class="table">
|
||||
<p class="title">
|
||||
< 6 Peaks with Anthro.Nuclides >
|
||||
</p>
|
||||
<custom-table
|
||||
:class="list.length ? 'has-data' : ''"
|
||||
:list="list"
|
||||
:columns="columns"
|
||||
:scroll="{ y: 288 }"
|
||||
:selectedRowKeys.sync="selectedKeys"
|
||||
>
|
||||
</custom-table>
|
||||
<div class="operators">
|
||||
<a-button type="primary">Nuclide Review Window</a-button>
|
||||
<a-button type="primary" @click="handleAddComment('Peak')">Add Peak Comment</a-button>
|
||||
<a-button type="primary" @click="handleAddComment('General')">Add General Comment</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="interactive-analysis-tools-right">
|
||||
<title-over-boarder title="Peak">
|
||||
<div class="peak-box">
|
||||
<!-- 按钮组1 -->
|
||||
<template v-if="btnGroupType == 1">
|
||||
<div class="peak-box-item">
|
||||
<a-button type="primary">Insert</a-button>
|
||||
</div>
|
||||
<div class="peak-box-item">
|
||||
<a-button type="primary">Delete</a-button>
|
||||
</div>
|
||||
<div class="peak-box-item">
|
||||
<a-button type="primary">Fit</a-button>
|
||||
</div>
|
||||
|
||||
<div class="peak-box-item symbol" :key="4">
|
||||
<a-button type="primary"><</a-button>
|
||||
<a-button type="primary">></a-button>
|
||||
</div>
|
||||
|
||||
<div class="peak-box-item base-line">
|
||||
<a-button type="primary" @click="btnGroupType = 2">BaseLine</a-button>
|
||||
</div>
|
||||
</template>
|
||||
<!-- 按钮组2 -->
|
||||
<template v-if="btnGroupType == 2">
|
||||
<div class="peak-box-item">
|
||||
<a-button type="primary">(A)dd CP</a-button>
|
||||
</div>
|
||||
<div class="peak-box-item">
|
||||
<a-button type="primary">(R)emove CP</a-button>
|
||||
</div>
|
||||
<div class="peak-box-item">
|
||||
<a-button type="primary">(M)odify CP</a-button>
|
||||
</div>
|
||||
<div class="peak-box-item">
|
||||
<a-button type="primary">Edit (S)lope</a-button>
|
||||
</div>
|
||||
<div class="peak-box-item">
|
||||
<a-button type="primary">Undo</a-button>
|
||||
</div>
|
||||
<div class="peak-box-item">
|
||||
<a-button type="primary">Replot</a-button>
|
||||
</div>
|
||||
<div class="peak-box-item">
|
||||
<a-button type="primary" @click="btnGroupType = 1">Accept</a-button>
|
||||
</div>
|
||||
<div class="peak-box-item">
|
||||
<a-button type="primary" @click="btnGroupType = 1">Cancel</a-button>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</title-over-boarder>
|
||||
<div class="reset-btn-box">
|
||||
<a-button type="primary">Reset Chart</a-button>
|
||||
</div>
|
||||
<div class="identify-box">
|
||||
<title-over-boarder title="Nuclide Identify">
|
||||
<a-form-model class="tolerance">
|
||||
<a-form-model-item label="Tolerance">
|
||||
<a-input-number></a-input-number>
|
||||
</a-form-model-item>
|
||||
</a-form-model>
|
||||
<div class="identify-item">
|
||||
<div class="title">
|
||||
Possible Nuclide
|
||||
</div>
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
<div class="identify-item">
|
||||
<div class="title">
|
||||
Nuclide Identified
|
||||
</div>
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
<div class="identify-operators">
|
||||
<a-space>
|
||||
<a-input></a-input>
|
||||
<a-button type="primary">Add</a-button>
|
||||
<a-button type="primary" @click="handleDel">Del</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
</title-over-boarder>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Comment弹窗 开始 -->
|
||||
<comment-modal v-model="commentModalVisible" :type="commentType" />
|
||||
<!-- Comment弹窗 结束 -->
|
||||
<!-- Fit Peaks and Baseline弹窗 开始 -->
|
||||
<fit-peaks-and-base-line-modal v-model="fitPeaksAndBaselineModalVisible" />
|
||||
<!-- Fit Peaks and Baseline弹窗 结束 -->
|
||||
<!-- Nuclide Review 弹窗开始 -->
|
||||
<nuclide-review-modal v-model="nuclideReviewModalVisible" />
|
||||
<!-- Nuclide Review 弹窗结束 -->
|
||||
</custom-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CustomChart from '@/components/CustomChart/index.vue'
|
||||
import TitleOverBoarder from '../../TitleOverBoarder.vue'
|
||||
import CommentModal from './components/CommentModal.vue'
|
||||
import FitPeaksAndBaseLineModal from './components/FitPeaksAndBaselineModal.vue'
|
||||
import NuclideReviewModal from './components/NuclideReviewModal.vue'
|
||||
|
||||
const initialOption = {
|
||||
grid: {
|
||||
top: 20,
|
||||
bottom: 20,
|
||||
left: 100,
|
||||
right: 20
|
||||
},
|
||||
xAxis: {
|
||||
min: 1,
|
||||
max: 8192,
|
||||
interval: 1143,
|
||||
axisLabel: {
|
||||
color: '#fff'
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
min: 1,
|
||||
max: 994914,
|
||||
axisLabel: {
|
||||
color: '#fff'
|
||||
},
|
||||
name: 'Counts',
|
||||
nameLocation: 'center',
|
||||
nameGap: 60,
|
||||
nameTextStyle: {
|
||||
fontSize: 16,
|
||||
color: '#5b9cba'
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'line',
|
||||
data: [],
|
||||
itemStyle: {
|
||||
color: '#FCFE02'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
data: [],
|
||||
itemStyle: {
|
||||
color: '#F87E28'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
data: [],
|
||||
itemStyle: {
|
||||
color: '#01F6FE'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: 'ID',
|
||||
dataIndex: 'id',
|
||||
width: 60
|
||||
},
|
||||
{
|
||||
title: 'Energy (keV)',
|
||||
dataIndex: 'energy',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: 'Centroid (C)',
|
||||
dataIndex: 'centroid',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: 'FWHM (keV)',
|
||||
dataIndex: 'fwhm',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: 'Area',
|
||||
dataIndex: 'area',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: 'Detectability',
|
||||
dataIndex: 'detectability',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: 'Cmnt',
|
||||
dataIndex: 'cmnt',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: 'Nuclides',
|
||||
dataIndex: 'nuclides',
|
||||
width: 120
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: Boolean
|
||||
}
|
||||
},
|
||||
components: {
|
||||
CustomChart,
|
||||
TitleOverBoarder,
|
||||
CommentModal,
|
||||
FitPeaksAndBaseLineModal,
|
||||
NuclideReviewModal
|
||||
},
|
||||
data() {
|
||||
this.columns = columns
|
||||
return {
|
||||
option: initialOption,
|
||||
list: new Array(500).fill(0).map((_, index) => ({
|
||||
id: index.toString(),
|
||||
energy: 'energy',
|
||||
centroid: 'centroid',
|
||||
fwhm: 'fwhm',
|
||||
area: 'area',
|
||||
detectability: 'detectability',
|
||||
cmnt: 'cmnt',
|
||||
nuclides: 'nuclides'
|
||||
})),
|
||||
commentModalVisible: false, // Comment 弹窗是否显示
|
||||
commentType: 'Peak',
|
||||
|
||||
btnGroupType: 1, // 右侧 Peak 中的按钮组切换
|
||||
|
||||
selectedKeys: [], // 选中的列表
|
||||
|
||||
fitPeaksAndBaselineModalVisible: false, // Fit Peaks And Base Line 弹窗
|
||||
nuclideReviewModalVisible: true // Nuclide Review 弹窗
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 显示comment弹窗
|
||||
handleAddComment(type) {
|
||||
this.commentType = type
|
||||
this.commentModalVisible = true
|
||||
},
|
||||
|
||||
// 删除
|
||||
handleDel() {
|
||||
if (!this.selectedKeys.length) {
|
||||
this.$message.warn('Please Select At Least 1 Peak To Delete')
|
||||
return
|
||||
}
|
||||
|
||||
this.$warning({
|
||||
title: 'Warning',
|
||||
content: 'Are you sure to delete this peak?',
|
||||
onOk: () => {
|
||||
console.log('%c [ ]-294', 'font-size:13px; background:pink; color:#bf2c9f;', this.selectedKeys)
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
visible: {
|
||||
get() {
|
||||
return this.value
|
||||
},
|
||||
set(val) {
|
||||
this.$emit('input', val)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.interactive-analysis-tools {
|
||||
display: flex;
|
||||
|
||||
&-left {
|
||||
width: 75%;
|
||||
margin-right: 20px;
|
||||
|
||||
.chart {
|
||||
height: 331px;
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
height: 50px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 35px;
|
||||
background-color: #255369;
|
||||
}
|
||||
|
||||
.table {
|
||||
.title {
|
||||
color: #0cebc9;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.custom-table {
|
||||
&.has-data {
|
||||
::v-deep {
|
||||
.ant-table-body {
|
||||
height: 288px;
|
||||
background-color: #06282a;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep {
|
||||
.ant-table-placeholder {
|
||||
height: 289px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.operators {
|
||||
display: flex;
|
||||
margin-top: 10px;
|
||||
gap: 10px;
|
||||
|
||||
.ant-btn {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-right {
|
||||
.peak-box {
|
||||
height: 326px;
|
||||
|
||||
&-item:not(:last-child) {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.symbol {
|
||||
display: flex;
|
||||
|
||||
.ant-btn {
|
||||
flex: 1;
|
||||
|
||||
&:first-child {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.base-line {
|
||||
margin-top: 136px;
|
||||
}
|
||||
|
||||
.reset-btn-box {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.identify-box {
|
||||
.tolerance {
|
||||
::v-deep {
|
||||
.ant-form-item {
|
||||
margin-bottom: 10px;
|
||||
|
||||
&-control-wrapper {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&-control {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-input-number {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.identify-item {
|
||||
.title {
|
||||
background-color: #497e9d;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.content {
|
||||
height: 80px;
|
||||
background-color: #275466;
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.identify-operators {
|
||||
display: flex;
|
||||
|
||||
.ant-btn {
|
||||
width: 50px;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-btn {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
<a-radio value="auto">From Auto DB</a-radio>
|
||||
<a-radio value="man">From Interactive DB</a-radio>
|
||||
</a-radio-group>
|
||||
<a-button type="primary" :loading="isLoadingSample" @click="handleLoad">Load</a-button>
|
||||
<a-button type="primary" @click="handleLoad">Load</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</custom-modal>
|
||||
|
|
@ -107,7 +107,7 @@ export default {
|
|||
this.disableMixinCreated = true
|
||||
return {
|
||||
queryParam: {
|
||||
menuTypes: [],
|
||||
menuTypes: undefined,
|
||||
startDate: moment()
|
||||
.add(-7, 'd')
|
||||
.format('YYYY-MM-DD'),
|
||||
|
|
@ -121,8 +121,7 @@ export default {
|
|||
detectorList: [],
|
||||
url: {
|
||||
list: '/spectrumAnalysis/getDBSpectrumList'
|
||||
},
|
||||
isLoadingSample: false // 正在加载样例
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -185,14 +184,9 @@ export default {
|
|||
this.$message.warn('Please Select Databases To Load')
|
||||
return
|
||||
}
|
||||
|
||||
console.log('%c [ ]-190', 'font-size:13px; background:pink; color:#bf2c9f;', this.selectionRows)
|
||||
this.isLoadingSample = true
|
||||
const res = await ''
|
||||
console.log('%c [ res ]-156', 'font-size:13px; background:pink; color:#bf2c9f;', res)
|
||||
this.selectedRowKeys = []
|
||||
this.isLoadingSample = false
|
||||
this.visible = false
|
||||
this.$emit('loadSample', this.selectionRows)
|
||||
},
|
||||
|
||||
// 获取台站和探测器列表
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<template>
|
||||
<a-menu class="spectra-list-in-menu">
|
||||
<a-menu-item v-for="item in list" :key="item.id" @click="handleClick(item)">
|
||||
<a-menu-item v-for="item in list" :key="item.sampleId" @click="handleClick(item)">
|
||||
<span class="checkbox">
|
||||
<a-icon v-if="item.checked" type="check" style="color: #0de30d" />
|
||||
</span>
|
||||
<span class="name">{{ item.name }}</span>
|
||||
<span class="name">{{ getFileName(item.inputFileName) }}</span>
|
||||
<a-icon type="delete" @click.stop="handleRemove(item)" />
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
|
|
@ -40,6 +40,24 @@ export default {
|
|||
}
|
||||
}
|
||||
this.$forceUpdate()
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取文件名
|
||||
* @param {String} inputFileName
|
||||
*/
|
||||
getFileName(inputFileName) {
|
||||
if (inputFileName) {
|
||||
const arr = inputFileName.split('/')
|
||||
return arr[arr.length - 1]
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
list(newVal) {
|
||||
if (newVal.length) {
|
||||
this.handleClick(newVal[0])
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -66,8 +66,8 @@ const initialOption = {
|
|||
},
|
||||
yAxis: {
|
||||
min: 0,
|
||||
max: 21099,
|
||||
interval: 21000 / 4,
|
||||
max: 0,
|
||||
interval: 0,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
|
|
@ -92,12 +92,7 @@ const initialOption = {
|
|||
color: ''
|
||||
},
|
||||
symbol: 'none',
|
||||
data: new Array(256)
|
||||
.fill(0)
|
||||
.map((_, index) => [
|
||||
index,
|
||||
Math.random() < 0.05 ? parseInt(Math.random() * 19644) : parseInt(Math.random() * 800)
|
||||
]),
|
||||
data: [],
|
||||
markLine: {
|
||||
symbol: 'none',
|
||||
animation: false,
|
||||
|
|
@ -127,6 +122,10 @@ export default {
|
|||
title: {
|
||||
type: String,
|
||||
default: 'Gamma'
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
|
|
@ -157,7 +156,10 @@ export default {
|
|||
if (xAxis) {
|
||||
this.option.series.markLine.data = [{ xAxis }]
|
||||
this.summary.channel = xAxis
|
||||
this.summary.count = this.option.series.data[xAxis][1]
|
||||
const find = this.data.find(item => item.x == xAxis)
|
||||
if (find) {
|
||||
this.summary.count = find.y
|
||||
}
|
||||
} else {
|
||||
this.option.series.markLine.data = []
|
||||
this.summary.channel = 0
|
||||
|
|
@ -244,6 +246,18 @@ export default {
|
|||
emitRangeChange(range) {
|
||||
this.$emit('rangeChange', range)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
data: {
|
||||
handler(newVal) {
|
||||
this.option.series.data = newVal.map(({ x, y }) => [x, y])
|
||||
|
||||
const max = Math.max(...newVal.map(item => item.y))
|
||||
this.option.yAxis.interval = Math.ceil(max / 4)
|
||||
this.option.yAxis.max = this.option.yAxis.interval * 4
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,14 @@
|
|||
<template>
|
||||
<div class="btn-with-switch-icon">
|
||||
<img src="@/assets/images/spectrum/left-arrow.png" @click="handleClick('left')" />
|
||||
<i @click="handleClick('left')">
|
||||
<img src="@/assets/images/spectrum/left-arrow.png" />
|
||||
</i>
|
||||
<span>
|
||||
<slot></slot>
|
||||
</span>
|
||||
<img src="@/assets/images/spectrum/right-arrow.png" @click="handleClick('right')" />
|
||||
<i @click="handleClick('right')">
|
||||
<img src="@/assets/images/spectrum/right-arrow.png" />
|
||||
</i>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -24,20 +28,21 @@ export default {
|
|||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border: 1px solid #0a544e;
|
||||
padding: 0 12px;
|
||||
padding: 0 4px;
|
||||
height: 100%;
|
||||
letter-spacing: 1px;
|
||||
color: #ade6ee;
|
||||
|
||||
i {
|
||||
cursor: pointer;
|
||||
width: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
span {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
img {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,16 +1,51 @@
|
|||
<template>
|
||||
<div class="gamma-analysis">
|
||||
<div class="gamma-analysis-chart">
|
||||
<custom-chart ref="chartRef" :option="option" style="height: 100%" />
|
||||
<!-- 二级交互栏 -->
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
<div class="gamma-analysis-thumbnail">
|
||||
<custom-chart :option="thumbnailOption" style="height: 100%" />
|
||||
<!-- 二级交互栏结束 -->
|
||||
<!-- 主体部分 -->
|
||||
<div class="gamma-analysis-main">
|
||||
<div class="gamma-analysis-chart">
|
||||
<custom-chart ref="chartRef" :option="option" style="height: 100%" />
|
||||
</div>
|
||||
<div class="gamma-analysis-thumbnail">
|
||||
<custom-chart :option="thumbnailOption" style="height: 100%" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- 主体部分结束 -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CustomChart from '@/components/CustomChart/index.vue'
|
||||
import PopOverWithIcon from './components/SubOperators/PopOverWithIcon.vue'
|
||||
import DetailedInfomation from './components/SubOperators/DetailedInfomation.vue'
|
||||
import QcFlags from './components/SubOperators/QcFlags.vue'
|
||||
import GraphAssistance from './components/SubOperators/GraphAssistance.vue'
|
||||
import NuclearLibrary from './components/SubOperators/NuclearLibrary.vue'
|
||||
import ButtonWithSwitchIcon from './components/SubOperators/ButtonWithSwitchIcon.vue'
|
||||
|
||||
// 初始配置
|
||||
const initialOption = {
|
||||
|
|
@ -105,12 +140,14 @@ const initialOption = {
|
|||
lineStyle: {
|
||||
type: 'solid'
|
||||
},
|
||||
data: [{
|
||||
xAxis: 100,
|
||||
lineStyle: {
|
||||
color: 'red'
|
||||
data: [
|
||||
{
|
||||
xAxis: 100,
|
||||
lineStyle: {
|
||||
color: 'red'
|
||||
}
|
||||
}
|
||||
}]
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
|
|
@ -208,7 +245,13 @@ export default {
|
|||
}
|
||||
},
|
||||
components: {
|
||||
CustomChart
|
||||
CustomChart,
|
||||
PopOverWithIcon,
|
||||
DetailedInfomation,
|
||||
QcFlags,
|
||||
GraphAssistance,
|
||||
NuclearLibrary,
|
||||
ButtonWithSwitchIcon
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -226,19 +269,23 @@ export default {
|
|||
this.$refs.chartRef.resize()
|
||||
},
|
||||
|
||||
// peak info 点击左右方向
|
||||
handlePeakInfoChange(direction) {
|
||||
this.moveMarkLine(direction)
|
||||
},
|
||||
|
||||
/**
|
||||
* 向某一个方向移动标记线
|
||||
* @param { 'left'| 'right' } direction
|
||||
*/
|
||||
moveMarkLine(direction) {
|
||||
if(direction == 'left') {
|
||||
if (direction == 'left') {
|
||||
this.option.series[0].markLine.data[0].xAxis = this.option.series[0].markLine.data[0].xAxis - 10
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
this.option.series[0].markLine.data[0].xAxis = this.option.series[0].markLine.data[0].xAxis + 10
|
||||
}
|
||||
|
||||
this.$emit('markLineChange', { })
|
||||
this.$emit('markLineChange', {})
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
|
@ -253,9 +300,16 @@ export default {
|
|||
<style lang="less" scoped>
|
||||
.gamma-analysis {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
&-main {
|
||||
height: calc(100% - 51px);
|
||||
display: flex;
|
||||
overflow: auto hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&-chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
|
@ -265,7 +319,7 @@ export default {
|
|||
right: 10px;
|
||||
width: 500px;
|
||||
height: 150px;
|
||||
background-color: #153E44;
|
||||
background-color: #153e44;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -23,56 +23,20 @@
|
|||
</div>
|
||||
<!-- 顶部操作栏结束 -->
|
||||
|
||||
<!-- 二级交互栏 -->
|
||||
<div class="spectrum-analysis-SubOperators">
|
||||
<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" v-model="spectraVisible">
|
||||
Spectra
|
||||
<spectra slot="content" v-model="spectraType" @input="spectraVisible = false" />
|
||||
</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" />
|
||||
<beta-gamma-analysis
|
||||
v-if="analysisType == ANALYZE_TYPE.BETA_GAMMA"
|
||||
ref="betaGammaAnalysisRef"
|
||||
:data="analysisData"
|
||||
/>
|
||||
<resize-observer @notify="handleResize" />
|
||||
</div>
|
||||
<!-- 频谱分析部分结束 -->
|
||||
|
||||
<!-- 从数据库加载开始 -->
|
||||
<load-from-db-modal v-model="loadFromDbModalVisible" />
|
||||
<load-from-db-modal v-model="loadFromDbModalVisible" @loadSample="handleLoadSampleFromDB" />
|
||||
<!-- 从数据库加载结束 -->
|
||||
|
||||
<!-- 从文件加载开始 -->
|
||||
|
|
@ -101,15 +65,8 @@
|
|||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import ButtonWithSwitchIcon from './components/SubOperators/ButtonWithSwitchIcon.vue'
|
||||
import DetailedInfomation from './components/SubOperators/DetailedInfomation.vue'
|
||||
import GraphAssistance from './components/SubOperators/GraphAssistance.vue'
|
||||
import NuclearLibrary from './components/SubOperators/NuclearLibrary.vue'
|
||||
import PopOverWithIcon from './components/SubOperators/PopOverWithIcon.vue'
|
||||
import QcFlags from './components/SubOperators/QcFlags.vue'
|
||||
import GammaAnalysis from './gamma-analysis.vue'
|
||||
import BetaGammaAnalysis from './beta-gamma-analysis.vue'
|
||||
import Spectra from './components/SubOperators/Spectra.vue'
|
||||
import SpectraListInMenu from './components/SpectraListInMenu.vue'
|
||||
import LoadFromDbModal from './components/Modals/LoadFromDBModal.vue'
|
||||
import LoadFromFileModal from './components/Modals/LoadFromFileModal.vue'
|
||||
|
|
@ -118,7 +75,8 @@ import NuclideActivityAndMdcModal from './components/Modals/NuclideActivityAndMD
|
|||
import MultiLevelMenu from './components/MultiLevelMenu.vue'
|
||||
import SaveSettingModal from './components/Modals/SaveSettingModal.vue'
|
||||
import AnalyzeSettingModal from './components/Modals/AnalyzeSettingModal.vue'
|
||||
import AnalyzeInteractiveToolModal from './components/Modals/AnalyzeInteractiveToolModal.vue'
|
||||
import AnalyzeInteractiveToolModal from './components/Modals/AnalyzeInteractiveToolModal/index.vue'
|
||||
import { getAction } from '../../api/manage'
|
||||
|
||||
// 分析类型
|
||||
const ANALYZE_TYPE = {
|
||||
|
|
@ -127,15 +85,8 @@ const ANALYZE_TYPE = {
|
|||
}
|
||||
export default {
|
||||
components: {
|
||||
PopOverWithIcon,
|
||||
ButtonWithSwitchIcon,
|
||||
BetaGammaAnalysis,
|
||||
GammaAnalysis,
|
||||
QcFlags,
|
||||
GraphAssistance,
|
||||
DetailedInfomation,
|
||||
NuclearLibrary,
|
||||
Spectra,
|
||||
SpectraListInMenu,
|
||||
LoadFromDbModal,
|
||||
LoadFromFileModal,
|
||||
|
|
@ -150,18 +101,15 @@ export default {
|
|||
this.ANALYZE_TYPE = ANALYZE_TYPE
|
||||
|
||||
return {
|
||||
analysisType: ANALYZE_TYPE.BETA_GAMMA, // 分析类型
|
||||
spectraType: 'Sample Data',
|
||||
spectraVisible: false,
|
||||
analysisType: null, // 分析类型
|
||||
|
||||
spectraList: [
|
||||
{ id: 1, name: 'AUX01 003-20151223 1855 S FULL 40183.7.PHD' },
|
||||
{ id: 2, name: 'AUX02 003-20151223 1855 S FULL 40183.7.PHD' }
|
||||
],
|
||||
sampleList: [],
|
||||
|
||||
loadFromDbModalVisible: false, // 从数据库加载弹窗
|
||||
loadFromFileModalVisible: false, // 从文件加载弹窗
|
||||
|
||||
analysisData: {}, // 要分析的谱数据
|
||||
|
||||
peakInfomationModalVisible: false,
|
||||
|
||||
nuclideActivityAndMDCModalVisible: false,
|
||||
|
|
@ -170,15 +118,47 @@ export default {
|
|||
|
||||
analyzeConfigureModalVisible: false, // 分析设置弹窗
|
||||
|
||||
analyzeInteractiveToolModalVisible: true // 分析工具弹窗
|
||||
analyzeInteractiveToolModalVisible: false // 分析工具弹窗
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// 测试
|
||||
this.loadSelectedSample({
|
||||
dbName: 'auto',
|
||||
sampleType: 'B',
|
||||
sampleId: '1523651'
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// 从数据库加载
|
||||
handleLoadFromDb() {
|
||||
this.loadFromDbModalVisible = true
|
||||
},
|
||||
|
||||
// 从数据库加载-选择完成
|
||||
handleLoadSampleFromDB(sampleList) {
|
||||
this.sampleList = sampleList
|
||||
},
|
||||
|
||||
// 加载选中的样本
|
||||
async loadSelectedSample({ dbName, sampleType, sampleId }) {
|
||||
// B是beta-gamma P G是gamma
|
||||
if (sampleType == 'B') {
|
||||
const { success, result, message } = await getAction('/spectrumAnalysis/getDBSpectrumChart', {
|
||||
dbName,
|
||||
sampleId: sampleId
|
||||
})
|
||||
if (success) {
|
||||
this.analysisData = result.sample
|
||||
this.analysisType = ANALYZE_TYPE.BETA_GAMMA
|
||||
} else {
|
||||
this.$message.error(message)
|
||||
}
|
||||
} else {
|
||||
// gamma
|
||||
}
|
||||
},
|
||||
|
||||
// 从文件加载
|
||||
handleLoadFromFile() {
|
||||
this.loadFromFileModalVisible = true
|
||||
|
|
@ -186,7 +166,7 @@ export default {
|
|||
|
||||
// 清理全部
|
||||
handleCleanAll() {
|
||||
this.spectraList = []
|
||||
this.sampleList = []
|
||||
},
|
||||
|
||||
// 保存结果到文件， 服务端生成文件，前端下载
|
||||
|
|
@ -298,11 +278,6 @@ export default {
|
|||
console.log('%c [ handleLineColorConfig ]-225', '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()
|
||||
|
|
@ -340,19 +315,20 @@ export default {
|
|||
style: {
|
||||
marginTop: '5px',
|
||||
marginBottom: '5px',
|
||||
display: this.spectraList.length ? '' : 'none'
|
||||
display: this.sampleList.length ? '' : 'none'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'SpectraListInMenu',
|
||||
attrs: {
|
||||
list: this.spectraList
|
||||
list: this.sampleList
|
||||
},
|
||||
on: {
|
||||
change: event => {
|
||||
console.log('%c [ event ]-187', 'font-size:13px; background:pink; color:#bf2c9f;', event)
|
||||
console.log('%c [ ]-188', 'font-size:13px; background:pink; color:#bf2c9f;', this)
|
||||
change: spectra => {
|
||||
if (spectra) {
|
||||
this.loadSelectedSample(spectra)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -631,48 +607,50 @@ export default {
|
|||
}
|
||||
// 顶部操作栏结束
|
||||
|
||||
// 二级操作栏开始
|
||||
&-SubOperators {
|
||||
flex-shrink: 0;
|
||||
margin-top: 15px;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
overflow: auto;
|
||||
::v-deep {
|
||||
// 二级操作栏开始
|
||||
.spectrum-analysis-sub-operators {
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 19px;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
overflow: auto;
|
||||
|
||||
.pop-over-with-icon {
|
||||
height: 32px;
|
||||
.pop-over-with-icon {
|
||||
height: 32px;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 11px;
|
||||
&: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;
|
||||
}
|
||||
}
|
||||
|
||||
&: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;
|
||||
}
|
||||
}
|
||||
|
||||
.peak-info {
|
||||
width: 306px;
|
||||
height: 32px;
|
||||
display: inline-block;
|
||||
}
|
||||
// 二级操作栏结束
|
||||
}
|
||||
// 二级操作栏结束
|
||||
|
||||
// 主体部分开始
|
||||
&-main {
|
||||
flex: 1;
|
||||
margin-top: 19px;
|
||||
height: calc(100% - 100px);
|
||||
margin-top: 15px;
|
||||
height: calc(100% - 45px);
|
||||
overflow: hidden;
|
||||
}
|
||||
// 主体部分结束
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user