xiaoguangbin/AnalysisSystemForRadionuclide_vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP: Gamma下的图表及部分弹窗开发

Browse Source
This commit is contained in:
Xu Zhimeng 2023-08-15 18:23:22 +08:00
parent 9801acb2fe
commit f1d02d2dc0
13 changed files with 1039 additions and 760 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal/index.vue
View File

@ -132,6 +132,8 @@ import TitleOverBorder from '../../TitleOverBorder.vue'
import CommentModal from './components/CommentModal.vue' import CommentModal from './components/CommentModal.vue'
import FitPeaksAndBaseLineModal from './components/FitPeaksAndBaselineModal.vue' import FitPeaksAndBaseLineModal from './components/FitPeaksAndBaselineModal.vue'
import NuclideReviewModal from './components/NuclideReviewModal.vue' import NuclideReviewModal from './components/NuclideReviewModal.vue'
import ModalMixin from '@/mixins/ModalMixin'
import { getAction } from '@/api/manage'
const initialOption = { const initialOption = {
grid: { grid: {
@ -257,11 +259,7 @@ const columns = [
] ]
export default { export default {
props: { mixins: [ModalMixin],
value: {
type: Boolean
}
},
components: { components: {
CustomChart, CustomChart,
TitleOverBorder, TitleOverBorder,
@ -269,6 +267,12 @@ export default {
FitPeaksAndBaseLineModal, FitPeaksAndBaseLineModal,
NuclideReviewModal NuclideReviewModal
}, },
props: {
sampleId: {
type: Number,
required: true
}
},
data() { data() {
this.columns = columns this.columns = columns
return { return {
@ -286,6 +290,25 @@ export default {
} }
}, },
methods: { methods: {
async getInfo() {
try {
const { success, result, message } = await getAction('/gamma/InteractiveTool', {
sampleId: this.sampleId
})
if (success) {
console.log('%c [ ]-300', 'font-size:13px; background:pink; color:#bf2c9f;', result)
} else {
this.$message.error(message)
}
} catch (error) {
console.error(error)
}
},
beforeModalOpen() {
this.getInfo()
},
// 切换图表上的红色竖线 // 切换图表上的红色竖线
handleChangeMarkLine(direction) { handleChangeMarkLine(direction) {
if (direction == 'prev') { if (direction == 'prev') {
@ -325,16 +348,6 @@ export default {
} }
}) })
} }
},
computed: {
visible: {
get() {
return this.value
},
set(val) {
this.$emit('input', val)
}
}
} }
} }
</script> </script>

204
src/views/spectrumAnalysis/components/Modals/AnalyzeSettingModal.vue
View File

@ -6,109 +6,117 @@
class="analysis-settings" class="analysis-settings"
:okHandler="handleOk" :okHandler="handleOk"
> >
<!-- 第一行 --> <a-spin :spinning="isLoading">
<div class="analysis-settings-item"> <!-- 第一行 -->
<title-over-border title="Peak Searching"> <div class="analysis-settings-item">
<a-form-model :colon="false" :labelCol="{ style: { width: '160px' } }"> <title-over-border title="Peak Searching">
<a-form-model-item label="ECutAnalysis_Low"> <a-form-model :colon="false" :labelCol="{ style: { width: '160px' } }">
<div class="input-with-unit"> <a-form-model-item label="ECutAnalysis_Low">
<a-input></a-input> <div class="input-with-unit">
KeV <a-input></a-input>
</div> KeV
</a-form-model-item> </div>
<a-form-model-item label="ECutAnalysis_High"> </a-form-model-item>
<div class="input-with-unit"> <a-form-model-item label="ECutAnalysis_High">
<a-input></a-input> <div class="input-with-unit">
KeV <a-input></a-input>
</div> KeV
</a-form-model-item> </div>
<a-form-model-item label="EnergyTolerance"> </a-form-model-item>
<div class="input-with-unit"> <a-form-model-item label="EnergyTolerance">
<a-input></a-input> <div class="input-with-unit">
KeV <a-input></a-input>
</div> KeV
</a-form-model-item> </div>
<a-form-model-item label="PSS_low"> </a-form-model-item>
<a-input></a-input> <a-form-model-item label="PSS_low">
</a-form-model-item>
</a-form-model>
</title-over-border>
<title-over-border title="Calibration Peak Searching">
<a-form-model :colon="false" :labelCol="{ style: { width: '170px' } }">
<a-form-model-item label="CalibrationPSS_low">
<a-input></a-input>
</a-form-model-item>
<a-form-model-item label="CalibrationPSS_high">
<a-input></a-input>
</a-form-model-item>
<a-form-model-item>
<a-checkbox>
Update Calibration
</a-checkbox>
</a-form-model-item>
<a-form-model-item>
<a-checkbox>
Keep Calibration Peak Search Peaks
</a-checkbox>
</a-form-model-item>
</a-form-model>
</title-over-border>
</div>
<!-- 第二行 -->
<div class="analysis-settings-item">
<title-over-border title="Baseline Param">
<a-form-model :colon="false" :labelCol="{ style: { width: '90px' } }">
<a-form-model-item label="k_back">
<a-input></a-input>
</a-form-model-item>
<a-form-model-item label="k_alpha">
<a-input></a-input>
</a-form-model-item>
<a-form-model-item label="k_beta">
<a-input></a-input>
</a-form-model-item>
</a-form-model>
</title-over-border>
<div>
<a-form-model :colon="false" :labelCol="{ style: { width: '150px' } }">
<title-over-border title="BaseImprove">
<a-form-model-item label="BaseImprovePSS">
<a-input></a-input> <a-input></a-input>
</a-form-model-item> </a-form-model-item>
</title-over-border> </a-form-model>
<title-over-border title="LC Computing" style="margin-top: 20px"> </title-over-border>
<a-form-model-item label="RiskLevelK"> <title-over-border title="Calibration Peak Searching">
<a-form-model :colon="false" :labelCol="{ style: { width: '170px' } }">
<a-form-model-item label="CalibrationPSS_low">
<a-input></a-input> <a-input></a-input>
</a-form-model-item> </a-form-model-item>
</title-over-border> <a-form-model-item label="CalibrationPSS_high">
</a-form-model> <a-input></a-input>
</a-form-model-item>
<a-form-model-item>
<a-checkbox>
Update Calibration
</a-checkbox>
</a-form-model-item>
<a-form-model-item>
<a-checkbox>
Keep Calibration Peak Search Peaks
</a-checkbox>
</a-form-model-item>
</a-form-model>
</title-over-border>
</div> </div>
</div>
<!-- 第三行 --> <!-- 第二行 -->
<div class="analysis-settings-item"> <div class="analysis-settings-item">
<title-over-border title="Activity Reference Time"> <title-over-border title="Baseline Param">
<custom-date-picker show-time v-model="formModel.activityReferenceTime"></custom-date-picker> <a-form-model :colon="false" :labelCol="{ style: { width: '90px' } }">
</title-over-border> <a-form-model-item label="k_back">
<title-over-border title="Concentration Reference Time"> <a-input></a-input>
<custom-date-picker show-time v-model="formModel.concentrationReferenceTime"></custom-date-picker> </a-form-model-item>
</title-over-border> <a-form-model-item label="k_alpha">
</div> <a-input></a-input>
</a-form-model-item>
<a-form-model-item label="k_beta">
<a-input></a-input>
</a-form-model-item>
</a-form-model>
</title-over-border>
<div>
<a-form-model :colon="false" :labelCol="{ style: { width: '150px' } }">
<title-over-border title="BaseImprove">
<a-form-model-item label="BaseImprovePSS">
<a-input></a-input>
</a-form-model-item>
</title-over-border>
<title-over-border title="LC Computing" style="margin-top: 20px">
<a-form-model-item label="RiskLevelK">
<a-input></a-input>
</a-form-model-item>
</title-over-border>
</a-form-model>
</div>
</div>
<!-- 第三行 -->
<div class="analysis-settings-item">
<title-over-border title="Activity Reference Time">
<custom-date-picker show-time v-model="formModel.activityReferenceTime"></custom-date-picker>
</title-over-border>
<title-over-border title="Concentration Reference Time">
<custom-date-picker show-time v-model="formModel.concentrationReferenceTime"></custom-date-picker>
</title-over-border>
</div>
</a-spin>
</custom-modal> </custom-modal>
</template> </template>
<script> <script>
import { getAction } from '@/api/manage'
import TitleOverBorder from '../TitleOverBorder.vue' import TitleOverBorder from '../TitleOverBorder.vue'
import ModalMixin from '@/mixins/ModalMixin'
export default { export default {
components: { TitleOverBorder }, components: { TitleOverBorder },
mixins: [ModalMixin],
props: { props: {
value: { sampleId: {
type: Boolean type: Number,
required: true
} }
}, },
data() { data() {
return { return {
isLoading: false,
formModel: { formModel: {
activityReferenceTime: undefined, activityReferenceTime: undefined,
concentrationReferenceTime: undefined concentrationReferenceTime: undefined
@ -116,19 +124,25 @@ export default {
} }
}, },
methods: { methods: {
async getInfo() {
try {
this.isLoading = true
const res = await getAction('/gamma/configure', {
sampleId: this.sampleId
})
this.isLoading = false
console.log('%c [ ]-128', 'font-size:13px; background:pink; color:#bf2c9f;', res)
} catch (error) {
console.error(error)
}
},
beforeModalOpen() {
this.getInfo()
},
handleOk() { handleOk() {
console.log('%c [ handleOk ]-121', 'font-size:13px; background:pink; color:#bf2c9f;') console.log('%c [ handleOk ]-121', 'font-size:13px; background:pink; color:#bf2c9f;')
} }
},
computed: {
visible: {
get() {
return this.value
},
set(val) {
this.$emit('input', val)
}
}
} }
} }
</script> </script>

16
src/views/spectrumAnalysis/components/Modals/BetaGammaModals/BetaGammaEnergyCalibrationModal/components/BetaDetectorCalibration.vue
View File

@ -1168,18 +1168,4 @@ p {
color: #fff; color: #fff;
} }
} }
</style> </style>
<style lang="less">
.figure-chart-option-tooltip {
background-color: #00aa7f !important;
border-color: #00aa7f !important;
.channel {
color: #fff;
}
.energy {
color: #00d1f0;
}
}
</style>

18
src/views/spectrumAnalysis/components/Modals/BetaGammaModals/BetaGammaEnergyCalibrationModal/components/GammaDetectorCalibration.vue
View File

@ -915,21 +915,3 @@ p {
} }
} }
</style> </style>
<style lang="less">
.figure-chart-option-tooltip {
background-color: #00aa7f !important;
border-color: #00aa7f !important;
.channel {
color: #fff;
}
.energy {
color: #00d1f0;
}
.warning {
color: yellow;
}
}
</style>

414
src/views/spectrumAnalysis/components/Modals/KorsumModal.vue
View File

@ -1,149 +1,153 @@
<template> <template>
<custom-modal v-model="visible" title="Korsum" :width="1120" :footer="null"> <custom-modal v-model="visible" title="Korsum" :width="1120" :footer="null">
<div class="korsum"> <a-spin :spinning="isLoading">
<!-- 输入开始 --> <div class="korsum">
<title-over-border title="Input"> <!-- 输入开始 -->
<div class="korsum-input"> <title-over-border title="Input">
<!-- 公式部分 --> <div class="korsum-input">
<a-form-model <!-- 公式部分 -->
class="korsum-input-formula" <a-form-model
:labelCol="{ class="korsum-input-formula"
style: { :labelCol="{
width: '110px' style: {
} width: '110px'
}" }
> }"
<a-form-model-item label="Total Effi = exp("> >
<!-- 第一行 --> <a-form-model-item label="Total Effi = exp(">
<div> <!-- 第一行 -->
<a-input-number v-model="formula.totalEffi[0]"></a-input-number> <div>
<span class="operator">* Er + </span> <a-input-number v-model="totalEffi.totalEf1"></a-input-number>
<a-input-number v-model="formula.totalEffi[1]"></a-input-number> <span class="operator">* Er + </span>
<span class="operator">+ </span> <a-input-number v-model="totalEffi.totalEf2"></a-input-number>
</div> <span class="operator">+ </span>
<!-- 第二行 --> </div>
<div> <!-- 第二行 -->
<a-input-number v-model="formula.totalEffi[2]"></a-input-number> <div>
<span class="operator">/ Er + </span> <a-input-number v-model="totalEffi.totalEf3"></a-input-number>
<a-input-number v-model="formula.totalEffi[3]"></a-input-number> <span class="operator">/ Er + </span>
<span class="operator">/ Er <sup>2</sup> + </span> <a-input-number v-model="totalEffi.totalEf4"></a-input-number>
</div> <span class="operator">/ Er <sup>2</sup> + </span>
<!-- 第三行 --> </div>
<div> <!-- 第三行 -->
<a-input-number v-model="formula.totalEffi[4]"></a-input-number> <div>
<span class="operator"> / Er <sup>3</sup> + </span> <a-input-number v-model="totalEffi.totalEf5"></a-input-number>
<a-input-number v-model="formula.totalEffi[5]"></a-input-number> <span class="operator"> / Er <sup>3</sup> + </span>
<span class="operator">/ Er <sup>4</sup> ) </span> <a-input-number v-model="totalEffi.totalEf6"></a-input-number>
</div> <span class="operator">/ Er <sup>4</sup> ) </span>
</a-form-model-item> </div>
<a-form-model-item label="Efficiency = exp("> </a-form-model-item>
<!-- 第一行 --> <a-form-model-item label="Efficiency = exp(">
<div> <!-- 第一行 -->
<a-input-number v-model="formula.efficiency[0]"></a-input-number> <div>
<span class="operator">* Er + </span> <a-input-number v-model="efficiency.effciency1"></a-input-number>
<a-input-number v-model="formula.efficiency[1]"></a-input-number> <span class="operator">* Er + </span>
<span class="operator">+ </span> <a-input-number v-model="efficiency.effciency2"></a-input-number>
</div> <span class="operator">+ </span>
<!-- 第二行 --> </div>
<div> <!-- 第二行 -->
<a-input-number v-model="formula.efficiency[2]"></a-input-number> <div>
<span class="operator">/ Er + </span> <a-input-number v-model="efficiency.effciency3"></a-input-number>
<a-input-number v-model="formula.efficiency[3]"></a-input-number> <span class="operator">/ Er + </span>
<span class="operator">/ Er <sup>2</sup> + </span> <a-input-number v-model="efficiency.effciency4"></a-input-number>
</div> <span class="operator">/ Er <sup>2</sup> + </span>
<!-- 第三行 --> </div>
<div> <!-- 第三行 -->
<a-input-number v-model="formula.efficiency[4]"></a-input-number> <div>
<span class="operator"> / Er <sup>3</sup> + </span> <a-input-number v-model="efficiency.effciency5"></a-input-number>
<a-input-number v-model="formula.efficiency[5]"></a-input-number> <span class="operator"> / Er <sup>3</sup> + </span>
<span class="operator">/ Er <sup>4</sup> ) </span> <a-input-number v-model="efficiency.effciency6"></a-input-number>
</div> <span class="operator">/ Er <sup>4</sup> ) </span>
</a-form-model-item> </div>
</a-form-model> </a-form-model-item>
<!-- 公式结束 --> </a-form-model>
<!-- 公式结束 -->
<!-- 标题 --> <!-- 标题 -->
<p class="korsum-input-title"> <a-button type="primary" class="korsum-input-title" @click="handleInput">
Input Input
</p> </a-button>
<!-- 标题结束 --> <!-- 标题结束 -->
<!-- 表格开始 --> <!-- 表格开始 -->
<a-table
class="korsum-input-table"
:class="list.length ? 'has-data' : ''"
:columns="columns"
:dataSource="list"
:scroll="{ y: 288 }"
:pagination="false"
>
<template slot="energy" slot-scope="text, record">
<a-input-number v-model="record.energy"></a-input-number>
</template>
<template slot="totalEfficiency" slot-scope="text, record">
<a-input-number v-model="record.totalEfficiency"></a-input-number>
</template>
<template slot="peakEfficiency" slot-scope="text, record">
<a-input-number v-model="record.peakEfficiency"></a-input-number>
</template>
<template slot="uncertainty" slot-scope="text, record">
<a-input-number v-model="record.uncertainty"></a-input-number>
</template>
</a-table>
<!-- 表格结束 -->
<!-- 按钮开始 -->
<div class="korsum-input-buttons">
<a-button type="primary" @click="handleAnalyze">Analyse</a-button>
<a-button type="primary" @click="handleExit">Exit</a-button>
</div>
<!-- 按钮结束 -->
</div>
</title-over-border>
<!-- 输入结束 -->
<!-- 输出开始 -->
<title-over-border title="Output">
<div class="korsum-output">
<div class="korsum-output-main">
<div class="korsum-output-list">
<div
class="korsum-output-list-item"
:class="selectedItem == item ? 'active' : ''"
v-for="(item, index) in outputList"
:key="index"
@click="handleOutputItemClick(item)"
>
{{ item.title }}
</div>
</div>
<a-table <a-table
class="korsum-output-table" class="korsum-input-table"
:columns="outputColumns" :class="list.length ? 'has-data' : ''"
:dataSource="outputTableList" :columns="columns"
:class="outputTableList.length ? 'has-data' : ''" :dataSource="list"
:scroll="{ y: 584 }" :scroll="{ y: 288 }"
:pagination="false" :pagination="false"
></a-table> >
</div> <template slot="energy" slot-scope="text, record">
<a-input-number v-model="record.energy"></a-input-number>
</template>
<template slot="totalEffi" slot-scope="text, record">
<a-input-number v-model="record.totalEffi"></a-input-number>
</template>
<template slot="peakEffi" slot-scope="text, record">
<a-input-number v-model="record.peakEffi"></a-input-number>
</template>
<template slot="uncertain" slot-scope="text, record">
<a-input-number v-model="record.uncertain"></a-input-number>
</template>
</a-table>
<!-- 表格结束 -->
<div class="korsum-output-operation"> <!-- 按钮开始 -->
<div class="left"> <div class="korsum-input-buttons">
<a-input v-model="filterWord"></a-input> <a-button type="primary" @click="handleAnalyze">Analyse</a-button>
<a-button type="primary" @click="handleExit">Exit</a-button>
</div> </div>
<div class="right"> <!-- 按钮结束 -->
<a-button type="primary" @click="handleExport">Export to Excel</a-button> </div>
</title-over-border>
<!-- 输入结束 -->
<!-- 输出开始 -->
<title-over-border title="Output">
<div class="korsum-output">
<div class="korsum-output-main">
<div class="korsum-output-list">
<div
class="korsum-output-list-item"
:class="selectedItem == item ? 'active' : ''"
v-for="(item, index) in outputList"
:key="index"
@click="handleOutputItemClick(item)"
>
{{ item }}
</div>
</div>
<a-table
class="korsum-output-table"
:columns="outputColumns"
:dataSource="outputTableList"
:class="outputTableList.length ? 'has-data' : ''"
:scroll="{ y: 584 }"
:pagination="false"
></a-table>
</div>
<div class="korsum-output-operation">
<div class="left">
<a-input v-model="filterWord"></a-input>
</div>
<div class="right">
<a-button type="primary" @click="handleExport">Export to Excel</a-button>
</div>
</div> </div>
</div> </div>
</div> </title-over-border>
</title-over-border> <!-- 输出结束 -->
<!-- 输出结束 --> </div>
</div> </a-spin>
</custom-modal> </custom-modal>
</template> </template>
<script> <script>
import ModalMixin from '@/mixins/ModalMixin'
import TitleOverBorder from '../TitleOverBorder.vue' import TitleOverBorder from '../TitleOverBorder.vue'
import { getAction, postAction } from '@/api/manage'
const columns = [ const columns = [
{ {
@ -155,23 +159,23 @@ const columns = [
}, },
{ {
title: 'Total Efficiency', title: 'Total Efficiency',
dataIndex: 'totalEfficiency', dataIndex: 'totalEffi',
scopedSlots: { scopedSlots: {
customRender: 'totalEfficiency' customRender: 'totalEffi'
} }
}, },
{ {
title: 'Peak Efficiency', title: 'Peak Efficiency',
dataIndex: 'peakEfficiency', dataIndex: 'peakEffi',
scopedSlots: { scopedSlots: {
customRender: 'peakEfficiency' customRender: 'peakEffi'
} }
}, },
{ {
title: 'Uncertainty(%)', title: 'Uncertainty(%)',
dataIndex: 'uncertainty', dataIndex: 'uncertain',
scopedSlots: { scopedSlots: {
customRender: 'uncertainty' customRender: 'uncertain'
} }
} }
] ]
@ -192,35 +196,17 @@ const outputColumns = [
] ]
export default { export default {
components: { TitleOverBorder }, components: { TitleOverBorder },
props: { mixins: [ModalMixin],
value: {
type: Boolean
}
},
data() { data() {
this.columns = columns this.columns = columns
this.outputColumns = outputColumns this.outputColumns = outputColumns
return { return {
formula: { isLoading: false,
totalEffi: [0, 0, 0, 0, 0, 0], totalEffi: {},
efficiency: [0, 0, 0, 0, 0, 0] efficiency: {},
}, list: [],
list: [
{ nuclideList: [],
id: 1,
energy: 10,
totalEfficiency: 0.005,
peakEfficiency: 0.002,
uncertainty: 10.0
},
{
id: 2,
energy: 10,
totalEfficiency: 0.005,
peakEfficiency: 0.002,
uncertainty: 10.0
}
],
selectedItem: {}, // output中左侧选中的项 selectedItem: {}, // output中左侧选中的项
outputTableList: [], // output中表格列表数据 outputTableList: [], // output中表格列表数据
@ -228,6 +214,66 @@ export default {
} }
}, },
methods: { methods: {
async getInfo() {
try {
this.isLoading = true
const { success, result, message } = await getAction('/gamma/Korsum')
this.isLoading = false
if (success) {
const { Energy, Nuclide } = result
this.list = Energy
this.nuclideList = Nuclide
} else {
this.$message.error(message)
}
} catch (error) {
console.error(error)
}
},
beforeModalOpen() {
this.totalEffi = {
totalEf1: -0.024326,
totalEf2: -1.857587,
totalEf3: 0.111096,
totalEf4: -0.003896,
totalEf5: -0.000345,
totalEf6: 0.000017
}
this.efficiency = {
effciency1: -0.329812,
effciency2: -3.493192,
effciency3: 0.583265,
effciency4: -0.065884,
effciency5: 0.003255,
effciency6: -0.000059
}
this.getInfo()
},
async handleInput() {
if (Object.entries(this.totalEffi).some(([_, v]) => !v) || Object.entries(this.efficiency).some(([_, v]) => !v)) {
this.$message.warn('Please input valid digits in all 12 edit boxes')
return
}
try {
const { success, result, message } = await postAction('/gamma/KorSumInput', {
...this.totalEffi,
...this.efficiency,
energys: this.list.map(item => item.energy)
})
if (success) {
this.list = result
} else {
this.$message.error(message)
}
} catch (error) {
console.error(error)
}
},
// 分析 // 分析
handleAnalyze() { handleAnalyze() {
console.log('%c [ 分析 ]-178', 'font-size:13px; background:pink; color:#bf2c9f;') console.log('%c [ 分析 ]-178', 'font-size:13px; background:pink; color:#bf2c9f;')
@ -241,7 +287,6 @@ export default {
// output栏点击左侧列表 // output栏点击左侧列表
handleOutputItemClick(item) { handleOutputItemClick(item) {
this.selectedItem = item this.selectedItem = item
this.outputTableList = item.list
}, },
// 导出到excel // 导出到excel
@ -250,43 +295,8 @@ export default {
} }
}, },
computed: { computed: {
visible: {
get() {
return this.value
},
set(val) {
this.$emit('input', val)
}
},
outputList() { outputList() {
const list = [ return this.nuclideList.filter(item => item.toLowerCase().includes(this.filterWord.toLowerCase()))
{
id: 1,
title: 'SN-125',
list: [
{
id: 12,
energy: 'energy',
correctFactor: 'correctFactor',
uncertainty: 'uncertainty'
}
]
},
{
id: 2,
title: 'EU-157',
list: [
{
id: 12,
energy: 'energy',
correctFactor: 'correctFactor',
uncertainty: 'uncertainty'
}
]
}
]
return list.filter(item => item.title.toLowerCase().includes(this.filterWord.toLowerCase()))
} }
} }
} }
@ -337,10 +347,8 @@ export default {
} }
&-title { &-title {
height: 32px; width: 100%;
line-height: 32px; margin-bottom: 10px;
text-align: center;
background-color: @primary-color;
} }
&-table { &-table {

284
src/views/spectrumAnalysis/components/Modals/ZeroTimeModal.vue
View File

@ -1,142 +1,203 @@
<template> <template>
<custom-modal v-model="visible" title="Zero Time" :width="940" :footer="null"> <custom-modal v-model="visible" title="Zero Time" :width="1020" :footer="null">
<div class="zero-time"> <a-spin :spinning="isLoading">
<!-- 左侧 --> <div class="zero-time">
<div class="zero-time-left"> <!-- 左侧 -->
<title-over-border title="Fission Product Infomation"> <div class="zero-time-left">
<div class="fission-product"> <title-over-border title="Fission Product Infomation">
<div class="fission-product-container"> <div class="fission-product">
<div class="fission-product-title"> <div class="fission-product-container">
Fission Product 1 <div class="fission-product-title">
Fission Product 1
</div>
<div class="fission-product-list">
<div
class="fission-product-list-item"
:class="fissionSelectedItem1 == item ? 'active' : ''"
v-for="(item, index) in fissionProductList1"
:key="index"
@click="handleFissonSelect(item, 1)"
>
{{ item }}
</div>
</div>
</div> </div>
<div class="fission-product-list"> <div class="fission-product-container">
<div class="fission-product-list-item" v-for="(item, index) in fissionProductList1" :key="index"> <div class="fission-product-title">
{{ item.title }} Fission Product 2
</div>
<div class="fission-product-list">
<div
class="fission-product-list-item"
:class="fissionSelectedItem2 == item ? 'active' : ''"
v-for="(item, index) in fissionProductList2"
:key="index"
@click="handleFissonSelect(item, 2)"
>
{{ item }}
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="fission-product-container"> </title-over-border>
<div class="fission-product-title"> <!-- Result of Zero Time -->
Fission Product 2 <title-over-border class="mt-20" title="Result of Zero Time">
<div class="result-of-zero-time">{{ dateTime }}</div>
</title-over-border>
</div>
<!-- 左侧结束 -->
<!-- 右侧 -->
<div class="zero-time-right">
<!-- Active of Fission Product -->
<title-over-border title="Active of Fission Product">
<div class="active-of-fission-product">
<div class="item">
<div class="title">
Fission Product 1
</div>
<div>
<a-input v-model="model.value1"></a-input>
</div>
</div> </div>
<div class="fission-product-list"> <div class="operator">
<div class="fission-product-list-item" v-for="(item, index) in fissionProductList2" :key="index"> -----Bq-----
{{ item.title }} </div>
<div class="item">
<div class="title">
Fission Product 2
</div>
<div>
<a-input v-model="model.value2"></a-input>
</div> </div>
</div> </div>
</div> </div>
</div>
</title-over-border>
<!-- Result of Zero Time -->
<title-over-border class="mt-20" title="Result of Zero Time">
<div class="result-of-zero-time">2015-05-30 17:30:60</div>
</title-over-border>
</div>
<!-- 左侧结束 -->
<!-- 右侧 -->
<div class="zero-time-right">
<!-- Active of Fission Product -->
<title-over-border title="Active of Fission Product">
<div class="active-of-fission-product">
<div class="item">
<div class="title">
Fission Product 1
</div>
<div>
<a-input></a-input>
</div>
</div>
<div class="operator">
-----Bq-----
</div>
<div class="item">
<div class="title">
Fission Product 2
</div>
<div>
<a-input></a-input>
</div>
</div>
</div>
</title-over-border>
<div class="zero-time-right-center mt-20">
<!-- Fission Target -->
<title-over-border class="fission-target" title="Fission Target">
<a-radio-group>
<a-radio>U-235</a-radio>
<a-radio>U-238</a-radio>
<a-radio>PU-239</a-radio>
</a-radio-group>
</title-over-border> </title-over-border>
<title-over-border class="fission-energy" title="Energy of Fission Neutron"> <div class="zero-time-right-center mt-20">
<a-radio-group> <!-- Fission Target -->
<a-radio>T&gt;Thermal_spectrum</a-radio> <title-over-border class="fission-target" title="Fission Target">
<a-radio>F&gt;Fission_spectrum</a-radio> <a-radio-group v-model="model.fissionTarget">
<a-radio>H-&gt;Fast_Neutron</a-radio> <a-radio value="U-235">U-235</a-radio>
</a-radio-group> <a-radio value="U-238">U-238</a-radio>
<a-radio value="PU-239">PU-239</a-radio>
</a-radio-group>
</title-over-border>
<title-over-border class="fission-energy" title="Energy of Fission Neutron">
<a-radio-group v-model="model.fissionEnergy">
<a-radio value="T">T&gt;Thermal_spectrum</a-radio>
<a-radio value="F">F&gt;Fission_spectrum</a-radio>
<a-radio value="H">H-&gt;Fast_Neutron</a-radio>
</a-radio-group>
</title-over-border>
</div>
<title-over-border class="mt-20" title="Reference Time">
<a-form-model layout="inline">
<a-form-model-item label="Date">
<custom-date-picker valueFormat="YYYY-MM-DD" v-model="model.date" />
</a-form-model-item>
<a-form-model-item label="Time">
<a-time-picker valueFormat="HH:mm:ss" v-model="model.time" />
</a-form-model-item>
</a-form-model>
</title-over-border> </title-over-border>
</div>
<title-over-border class="mt-20" title="Reference Time">
<a-form-model layout="inline">
<a-form-model-item label="Date">
<custom-date-picker />
</a-form-model-item>
<a-form-model-item label="Time">
<a-time-picker></a-time-picker>
</a-form-model-item>
</a-form-model>
</title-over-border>
<div class="zero-time-right-buttons mt-20"> <div class="zero-time-right-buttons mt-20">
<a-button type="primary">Analysis</a-button> <a-button type="primary" :disabled="disabled" @click="handleAnalysis">Analysis</a-button>
<a-button type="primary">Save</a-button> <a-button type="primary">Save</a-button>
<a-button type="primary">Exit</a-button> <a-button type="primary">Exit</a-button>
</div>
</div> </div>
<!-- 右侧结束 -->
</div> </div>
<!-- 右侧结束 --> </a-spin>
</div>
</custom-modal> </custom-modal>
</template> </template>
<script> <script>
import ModalMixin from '@/mixins/ModalMixin'
import TitleOverBorder from '../TitleOverBorder.vue' import TitleOverBorder from '../TitleOverBorder.vue'
import { getAction } from '@/api/manage'
export default { export default {
components: { TitleOverBorder }, components: { TitleOverBorder },
mixins: [ModalMixin],
props: { props: {
value: { sampleId: {
type: Boolean type: Number,
required: true
} }
}, },
data() { data() {
return { return {
fissionProductList1: [ isLoading: false,
{ fissionProductList1: [],
id: 1, fissionProductList2: [],
title: 'Ba140'
}, fissionSelectedItem1: null,
{ fissionSelectedItem2: null,
id: 2,
title: 'Ce141' dateTime: '',
model: {
date: undefined,
time: undefined,
fissionTarget: '',
fissionEnergy: ''
}
}
},
methods: {
async getInfo() {
try {
this.isLoading = true
const { success, result, message } = await getAction('/gamma/ZeroTime', {
sampleId: this.sampleId
})
if (success) {
this.isLoading = false
const { Date, Time, list_fission1, list_fission2 } = result
this.fissionProductList1 = list_fission1
this.fissionProductList2 = list_fission2
this.model.date = Date
this.model.time = Time
} else {
this.$message.error(message)
} }
], } catch (error) {
fissionProductList2: [ console.error(error)
{ }
id: 1, },
title: 'Ba140'
} // 选中Fission
] handleFissonSelect(item, which) {
if (which == 1) {
this.fissionSelectedItem1 = item
} else {
this.fissionSelectedItem2 = item
}
},
beforeModalOpen() {
this.model.fissionTarget = 'U-235'
this.model.fissionEnergy = 'T'
this.fissionSelectedItem1 = null
this.fissionSelectedItem2 = null
this.dateTime = '2015-05-30 17:30:60'
this.getInfo()
},
// 分析
handleAnalysis() {
console.log('%c [ ]-188', 'font-size:13px; background:pink; color:#bf2c9f;')
} }
}, },
computed: { computed: {
visible: { disabled() {
set(val) { return (
this.$emit('input', val) !this.fissionSelectedItem1 ||
}, !this.fissionSelectedItem2 ||
get() { this.fissionSelectedItem1 == this.fissionSelectedItem2
return this.value )
}
} }
} }
} }
@ -170,12 +231,17 @@ export default {
margin-top: 5px; margin-top: 5px;
height: 255px; height: 255px;
overflow: auto; overflow: auto;
padding: 0 10px;
background-color: #275466; background-color: #275466;
&-item { &-item {
height: 32px; height: 32px;
line-height: 32px; line-height: 32px;
padding: 0 10px;
cursor: pointer;
&.active {
background-color: #296d81;
}
} }
} }
} }

1
src/views/spectrumAnalysis/components/SubOperators/ButtonWithSwitchIcon.vue
View File

@ -32,6 +32,7 @@ export default {
height: 100%; height: 100%;
letter-spacing: 1px; letter-spacing: 1px;
color: #ade6ee; color: #ade6ee;
user-select: none;
i { i {
cursor: pointer; cursor: pointer;

136
src/views/spectrumAnalysis/components/SubOperators/DetailedInfomation.vue
View File

@ -1,11 +1,13 @@
<template> <template>
<div class="detailed-infomation"> <div class="detailed-infomation">
<a-form :labelCol="{ style: { width: 120 } }"> <a-form>
<a-row v-for="(row, index) in items" :key="index"> <a-row>
<a-col v-for="(item, i) in row" :key="i" :span="item.span || 4"> <a-col v-for="(col, index) in items" :key="index" :span="col.span">
<a-form-item :label="item.label"> <div v-for="(item, i) in col.labels" :key="i">
{{ data[item.name] }} <a-form-item :label="item" :labelCol="col.labelCol">
</a-form-item> {{ data[4 * index + i] }}
</a-form-item>
</div>
</a-col> </a-col>
</a-row> </a-row>
</a-form> </a-form>
@ -14,103 +16,37 @@
<script> <script>
const items = [ const items = [
[ {
{ span: 4,
label: 'Sample Id', labelCol: { style: { width: '120px' } },
name: 'sampleId' labels: ['Sample Id', 'Station Code', 'Detector Code', 'System Type']
}, },
{ {
label: 'Data Type', span: 5,
name: 'dataType' labelCol: { style: { width: '120px' } },
}, labels: ['Date Type', 'Spectral Qualifier', 'SRID', 'Sample Status']
{ },
label: 'Collection Start', {
name: 'collectionStart', span: 5,
span: 6 labelCol: { style: { width: '120px' } },
}, labels: ['Collection Start', 'Sampling Time', 'Air Volumn[m3]', 'Flow Rate[m3/h]']
{ },
label: 'Acquisition Start', {
name: 'acquisitionStart', span: 5,
span: 6 labelCol: { style: { width: '120px' } },
}, labels: ['Acquisition Start', 'Real Time[s]', 'Live Time[s]', 'Decay Time[h]']
{ },
label: 'Auto.Cat', {
name: 'autoCat' span: 4,
} labelCol: { style: { width: '120px' } },
], labels: ['Auto.Cat', 'Category']
[ }
{
label: 'Station Code',
name: 'stationCode'
},
{
label: 'Spectral Qualifier',
name: 'spectralQualifier'
},
{
label: 'Sampling Time',
name: 'samplingTime',
span: 6
},
{
label: 'Acq.Real',
name: 'acqReal',
span: 6
},
{
label: 'Category',
name: 'category'
}
],
[
{
label: 'Detector Code',
name: 'detectorCode'
},
{
label: 'SRID',
name: 'srid'
},
{
label: 'Quantity',
name: 'quantity',
span: 6
},
{
label: 'Acq.Live',
name: 'acqLive',
span: 6
}
],
[
{
label: 'System Type',
name: 'systemType'
},
{
label: 'Sample Status',
name: 'sampleStatus'
},
{
label: 'Flow Rate',
name: 'flowRate',
span: 6
},
{
label: 'Decay Time',
name: 'decayTime',
span: 6
}
]
] ]
export default { export default {
props: { props: {
data: { data: {
type: Object, type: Array,
default: () => ({ default: () => []
sampleId: 1,
dataType: 'SAMPLEPHD'
})
} }
}, },
created() { created() {
@ -121,7 +57,7 @@ export default {
<style lang="less" scoped> <style lang="less" scoped>
.detailed-infomation { .detailed-infomation {
width: 1200px; width: 1350px;
.ant-form-item { .ant-form-item {
margin-bottom: 0; margin-bottom: 0;

111
src/views/spectrumAnalysis/components/SubOperators/GraphAssistance.vue
View File

@ -1,53 +1,87 @@
<template> <template>
<div class="graph-assistance"> <div class="graph-assistance">
<div class="graph-assistance-item" v-for="conf in config" :key="conf.title"> <div class="graph-assistance-list">
<span>{{ conf.label }}</span> <div class="graph-assistance-item" v-for="(item, index) in items" :key="index">
<a-switch v-model="conf.checked" @change="handleChange(conf)"></a-switch> <!-- 两个Label来回切换的 -->
<template v-if="item.label.length > 1">
<span>{{ item.activeLabel }}</span>
<a-switch class="no-change" v-model="item.checked" @change="handleChangeLabel(item)"></a-switch>
</template>
<!-- 只有一个Label，点击改变状态的 -->
<template v-else>
<span>{{ item.label[0] }}</span>
<a-switch v-model="item.checked" @change="handleChange(item)"></a-switch>
</template>
</div>
</div> </div>
<a-button type="primary" size="small" @click="handleReset">Reset</a-button>
</div> </div>
</template> </template>
<script> <script>
const config = [ const items = [
{ {
label: 'Log10', label: ['Linear', 'Log10'],
checked: false,
activeLabel: 'Linear'
},
{
label: ['Cursor'],
checked: true checked: true
}, },
{ {
label: 'Cursor', label: ['Lc'],
checked: false checked: true
}, },
{ {
label: 'Lc', label: ['Baseline'],
checked: false checked: true
}, },
{ {
label: 'Baseline', label: ['Channel', 'Energy'],
checked: false checked: false,
activeLabel: 'Channel'
}, },
{ {
label: 'Channel', label: ['Lines', 'Scatter'],
checked: false checked: false,
activeLabel: 'Lines'
}, },
{ {
label: 'Lines', label: ['SCAC'],
checked: false
},
{
label: 'S CAC',
checked: false checked: false
} }
] ]
export default { export default {
data() { data() {
return { return {
config items
} }
}, },
methods: { methods: {
handleChange(conf) { handleChangeLabel(item) {
console.log('%c [ conf ]-47', 'font-size:13px; background:pink; color:#bf2c9f;', conf) if (item.activeLabel == item.label[0]) {
} item.activeLabel = item.label[1]
} else {
item.activeLabel = item.label[0]
}
this.$emit('change', {
type: 'labelChange',
label: item.activeLabel
})
},
handleChange(item) {
this.$emit('change', {
type: 'valueChange',
label: item.label[0],
value: item.checked
})
},
handleReset() {}
} }
} }
</script> </script>
@ -55,13 +89,42 @@ export default {
<style lang="less" scoped> <style lang="less" scoped>
.graph-assistance { .graph-assistance {
display: flex; display: flex;
width: 790px; align-items: center;
justify-content: space-between;
&-list {
width: 790px;
display: flex;
justify-content: space-between;
}
&-item { &-item {
span { span {
margin-right: 10px; margin-right: 10px;
width: 50px;
display: inline-block;
text-align: right;
} }
&:nth-child(3) {
span {
width: 20px;
}
}
}
.ant-btn {
margin-left: 100px;
margin-right: 50px;
}
}
.no-change {
background-color: @primary-color;
}
.ant-switch {
&::after {
background-color: #fff;
} }
} }
</style> </style>

62
src/views/spectrumAnalysis/components/SubOperators/QcFlags.vue
View File

@ -1,54 +1,25 @@
<template> <template>
<div class="qc-flags"> <div class="qc-flags">
<div class="qc-flags-item" v-for="conf in config" :key="conf.label"> <div class="qc-flags-item" v-for="(item, index) in items" :key="item">
<span :class="'dot' + (data[conf.name] ? ' green' : '')"></span> <span :class="data[index]"></span>
{{ conf.label }} {{ item }}
</div> </div>
</div> </div>
</template> </template>
<script> <script>
// 配置 // 配置
const config = [ const items = ['Collection Time', 'Acq Time', 'Decay Time', 'SampVol', 'Be7-FWHM', 'Ba140-MDC', 'Xe133-MDC']
{
label: 'Collection Time',
name: 'collectionTime'
},
{
label: 'Acq Time',
name: 'acqTime'
},
{
label: 'Decay Time',
name: 'decayTime'
},
{
label: 'SampVol',
name: 'sampVol'
},
{
label: 'Be7-FWHM',
name: 'be7Fwhm'
},
{
label: 'Ba140-MDC',
name: 'ba140Mdc'
},
{
label: 'Xe133-MDC',
name: 'xe133Mdc'
}
]
export default { export default {
props: { props: {
data: { data: {
type: Object, type: Array,
default: () => ({}) default: () => []
} }
}, },
created() { created() {
this.config = config this.items = items
} }
} }
</script> </script>
@ -73,11 +44,26 @@ export default {
width: 14px; width: 14px;
height: 14px; height: 14px;
border-radius: 50%; border-radius: 50%;
background: radial-gradient(circle, #979797 0, #777a7c 100%);
&.green { &.GRAY {
background: radial-gradient(circle, #979797 0, #777a7c 100%);
}
&.GREEN {
background: radial-gradient(circle, #00fe7f 0, #00d56a 100%); background: radial-gradient(circle, #00fe7f 0, #00d56a 100%);
} }
&.RED {
background: radial-gradient(circle, #fe0015 0, #d50000 100%);
}
&.BLUE {
background: radial-gradient(circle, rgb(50, 50, 255) 0, blue 100%);
}
&.YELLOW {
background: radial-gradient(circle, #feed00 0, #d5d100 100%);
}
} }
} }
} }

475
src/views/spectrumAnalysis/gamma-analysis.vue
View File

@ -1,40 +1,43 @@
<template> <template>
<div class="gamma-analysis"> <div class="gamma-analysis">
<!-- 二级交互栏 --> <a-spin :spinning="isLoading">
<div class="spectrum-analysis-sub-operators"> <!-- 二级交互栏 -->
<pop-over-with-icon placement="bottomLeft"> <div class="spectrum-analysis-sub-operators">
Detailed-Information <pop-over-with-icon placement="bottomLeft">
<detailed-infomation slot="content" /> Detailed-Information
</pop-over-with-icon> <detailed-infomation slot="content" :data="detailedInfomation" />
<pop-over-with-icon placement="bottomLeft"> </pop-over-with-icon>
QC Flags <pop-over-with-icon placement="bottomLeft">
<qc-flags slot="content" :data="{ collectionTime: '123' }" /> QC Flags
</pop-over-with-icon> <qc-flags slot="content" :data="qcFlags" />
<pop-over-with-icon> </pop-over-with-icon>
Graph Assistance <pop-over-with-icon>
<graph-assistance slot="content" /> Graph Assistance
</pop-over-with-icon> <graph-assistance slot="content" @change="handleGraphAssistanceChange" />
<pop-over-with-icon> </pop-over-with-icon>
Nuclide Library <pop-over-with-icon>
<nuclear-library slot="content" /> Nuclide Library
</pop-over-with-icon> <nuclear-library slot="content" />
<div class="peak-info"> </pop-over-with-icon>
<button-with-switch-icon @change="handlePeakInfoChange"> <div class="peak-info">
Peak Information <button-with-switch-icon @change="handlePeakInfoChange">
</button-with-switch-icon> Peak Information
</button-with-switch-icon>
</div>
</div> </div>
</div> <!-- 二级交互栏结束 -->
<!-- 二级交互栏结束 --> <!-- 主体部分 -->
<!-- 主体部分 --> <div class="gamma-analysis-main">
<div class="gamma-analysis-main"> <div class="gamma-analysis-chart">
<div class="gamma-analysis-chart"> <custom-chart ref="chartRef" :option="option" @zr:click="handleChartClick" style="height: 100%" />
<custom-chart ref="chartRef" :option="option" style="height: 100%" />
<div class="gamma-analysis-thumbnail">
<custom-chart ref="thumbnailChartRef" :option="thumbnailOption" style="height: 100%" />
</div>
</div>
</div> </div>
<div class="gamma-analysis-thumbnail"> <!-- 主体部分结束 -->
<custom-chart :option="thumbnailOption" style="height: 100%" /> </a-spin>
</div>
</div>
<!-- 主体部分结束 -->
</div> </div>
</template> </template>
@ -46,13 +49,17 @@ import QcFlags from './components/SubOperators/QcFlags.vue'
import GraphAssistance from './components/SubOperators/GraphAssistance.vue' import GraphAssistance from './components/SubOperators/GraphAssistance.vue'
import NuclearLibrary from './components/SubOperators/NuclearLibrary.vue' import NuclearLibrary from './components/SubOperators/NuclearLibrary.vue'
import ButtonWithSwitchIcon from './components/SubOperators/ButtonWithSwitchIcon.vue' import ButtonWithSwitchIcon from './components/SubOperators/ButtonWithSwitchIcon.vue'
import { getAction } from '@/api/manage'
import Response from './response.json'
import { getXAxisAndYAxisByPosition } from '@/utils/chartHelper'
// 初始配置 // 初始配置
const initialOption = { const initialOption = {
grid: { grid: {
top: 40, top: 40,
left: 60, left: 60,
right: 0 right: 50,
containLabel: true
}, },
title: { title: {
text: '', text: '',
@ -71,15 +78,27 @@ const initialOption = {
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
animation: false,
type: 'cross',
lineStyle: { lineStyle: {
type: 'dashed' color: '#099D24',
width: 2
} }
} },
formatter: params => {
const [channel] = params[0].value
return `<div class="channel">Channel: ${channel}</div>
<div class="energy">Energy: ${(0).toFixed(2)}</div>`
},
className: 'figure-chart-option-tooltip'
}, },
xAxis: { xAxis: {
type: 'category', name: 'Channel',
nameTextStyle: {
color: '#8FD4F8',
fontSize: 16,
align: 'right',
verticalAlign: 'top',
padding: [30, 0, 0, 0]
},
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: '#ade6ee' color: '#ade6ee'
@ -93,7 +112,7 @@ const initialOption = {
color: '#ade6ee' color: '#ade6ee'
} }
}, },
data: new Array(3928).fill(0).map((_, index) => index) boundaryGap: false
}, },
yAxis: { yAxis: {
name: 'Counts', name: 'Counts',
@ -119,57 +138,7 @@ const initialOption = {
} }
} }
}, },
series: [ series: []
{
type: 'line',
data: new Array(3928)
.fill(0)
.map((_, index) => (Math.random() < 0.05 ? parseInt(Math.random() * 16000) : parseInt(Math.random() * 800))),
itemStyle: {
color: '#24FF0B'
},
lineStyle: {
width: 1
},
symbol: 'none',
markLine: {
symbol: 'none',
label: {
show: false
},
lineStyle: {
type: 'solid'
},
data: [
{
xAxis: 100,
lineStyle: {
color: 'red'
}
}
]
}
},
{
type: 'line',
data: new Array(3928)
.fill(0)
.map((_, index) => (Math.random() < 0.05 ? parseInt(Math.random() * 14000) : parseInt(Math.random() * 600))),
itemStyle: {
color: '#D8DE07'
},
lineStyle: {
width: 1
},
symbol: 'none'
}
],
dataZoom: {
type: 'inside',
start: 0,
end: 20,
zoomLock: true
}
} }
// 缩略图配置 // 缩略图配置
@ -190,8 +159,7 @@ const thumbnailOption = {
}, },
axisLabel: { axisLabel: {
show: false show: false
}, }
data: new Array(3928).fill(0).map((_, index) => index)
}, },
yAxis: { yAxis: {
axisLine: { axisLine: {
@ -204,44 +172,13 @@ const thumbnailOption = {
show: false show: false
} }
}, },
series: [ series: []
{
type: 'line',
data: new Array(3928)
.fill(0)
.map((_, index) => (Math.random() < 0.05 ? parseInt(Math.random() * 16000) : parseInt(Math.random() * 800))),
itemStyle: {
color: '#24FF0B'
},
lineStyle: {
width: 1
},
symbol: 'none'
},
{
type: 'line',
data: new Array(3928)
.fill(0)
.map((_, index) => (Math.random() < 0.05 ? parseInt(Math.random() * 14000) : parseInt(Math.random() * 600))),
itemStyle: {
color: '#D8DE07'
},
lineStyle: {
width: 1
},
symbol: 'none'
}
]
} }
export default { export default {
props: { props: {
data: { sample: {
type: Object type: Object
},
chartType: {
type: String,
default: ''
} }
}, },
components: { components: {
@ -255,18 +192,251 @@ export default {
}, },
data() { data() {
return { return {
isLoading: false,
option: initialOption, option: initialOption,
thumbnailOption thumbnailOption,
detailedInfomation: [],
qcFlags: [],
graphAssistance: {},
channelPeakGroup: [],
energyPeakGroup: []
} }
}, },
created() { created() {
this.option.title.text = '{a|Channel:0} {a|Energy:0} {a|Counts:0} {a|Detectability:0}' this.option.title.text = '{a|Channel:0} {a|Energy:0} {a|Counts:0} {a|Detectability:0}'
console.log('%c [ ]-108', 'font-size:13px; background:pink; color:#bf2c9f;', this.option)
}, },
methods: { methods: {
async getSampleDetail() {
const { dbName, sampleId } = this.sample
try {
this.isLoading = true
this.option.series = []
// const { success, result, message } = await getAction('/gamma/gammaByDB', {
// dbName,
// sampleId
// })
const { success, result, message } = Response
if (success) {
this.isLoading = false
const {
dead_time,
live_time,
real_time,
start_time,
DetailedInformation,
QCFlag,
allData,
shadowChannelChart,
shadowEnergyChart,
shapeChannelData,
shapeEnergyData
} = result
console.log('%c [ ]-258', 'font-size:13px; background:pink; color:#bf2c9f;', result)
this.detailedInfomation = DetailedInformation
this.qcFlags = QCFlag
const channelPeakGroup = allData.filter(item => item.name == 'Peak' && item.group == 'channel')
const energyPeakGroup = allData.filter(item => item.name == 'Peak' && item.group == 'energy')
// 保存Peak Line
this.channelPeakGroup = channelPeakGroup
this.energyPeakGroup = energyPeakGroup
// 保存 Spectrum Line
this.shadowChannelChart = shadowChannelChart
this.shadowEnergyChart = shadowEnergyChart
// 保存 基线控制点
this.shapeChannelData = shapeChannelData
this.shapeEnergyData = shapeEnergyData
// 推入Spectrum Line
this.option.series.push({
name: 'Spectrum',
type: 'line',
data: shadowChannelChart.pointlist.map(({ x, y }) => [x, y]),
itemStyle: {
color: `rgb(${shadowChannelChart.color})`
},
lineStyle: {
width: 1
},
symbol: 'none',
symbolSize: 1,
emphasis: {
disabled: true
},
markLine: {
silent: true,
symbol: 'none',
label: {
show: false
},
lineStyle: {
color: 'red',
width: 2
},
data: [{ xAxis: -1 }]
},
zlevel: 0
})
this.thumbnailOption.series.push({
name: 'Spectrum',
type: 'line',
data: shadowChannelChart.pointlist.map(({ x, y }) => [x, y]),
itemStyle: {
color: `rgb(${shadowChannelChart.color})`
},
lineStyle: {
width: 1
},
symbol: 'none',
symbolSize: 1,
emphasis: {
disabled: true
},
markLine: {
silent: true,
symbol: 'none',
label: {
show: false
},
lineStyle: {
color: 'red',
width: 2
},
data: [{ xAxis: -1 }]
},
zlevel: 0
})
// 推入Scac
this.option.series.push({
name: 'Scac',
type: 'line',
data: [].map(({ x, y }) => [x, y]),
itemStyle: {
color: `rgb(${shadowChannelChart.color})`
},
lineStyle: {
width: 1
},
symbol: 'none',
emphasis: {
disabled: true
}
})
// 推入基线控制点
this.option.series.push({
name: 'BaseLine_Ctrl_Point',
type: 'scatter',
data: shapeChannelData.map(({ size, color, point: { x, y } }) => {
return {
value: [x, y],
itemStyle: {
color: 'transparent',
borderColor: color,
borderWidth: size / 2
}
}
}),
emphasis: {
disabled: true
},
z: 3
})
// 推入Peak Line
channelPeakGroup.forEach((item, index) => {
this.option.series.push({
name: `Peak_${index}`,
type: 'line',
data: item.pointlist.map(({ x, y }) => [x, y]),
itemStyle: {
color: `rgb(${item.color})`
},
lineStyle: {
width: 1
},
symbol: 'none'
})
})
} else {
this.$message.error(message)
}
} catch (error) {
console.error(error)
}
},
// Graph Assistance 操作
handleGraphAssistanceChange({ type, label, value }) {
// 类型变化
if (type == 'labelChange') {
switch (label) {
case 'Linear':
break
case 'Log10':
break
case 'Channel':
this.option.xAxis.name = label
break
case 'Energy':
this.option.xAxis.name = label
break
case 'Lines':
this.option.series[0].type = 'line'
this.option.series[0].symbol = 'none'
break
case 'Scatter':
this.option.series[0].type = 'scatter'
this.option.series[0].symbol = 'circle'
break
}
}
// 值变化
else if (type == 'valueChange') {
console.log('%c [ ]-315', 'font-size:13px; background:pink; color:#bf2c9f;', label, value)
this.graphAssistance[label] = value
switch (label) {
case 'Cursor':
// 显示红色竖线
if (value) {
this.option.series[0].markLine.lineStyle.width = 2
} else {
this.option.series[0].markLine.lineStyle.width = 0
}
break
}
}
},
// 点击图表，设置红线
handleChartClick(param) {
const { offsetX, offsetY } = param
const point = getXAxisAndYAxisByPosition(this.$refs.chartRef.getChartInstance(), offsetX, offsetY)
if (point) {
const xAxis = parseInt(point[0].toFixed())
this.option.series[0].markLine.data[0].xAxis = xAxis
}
},
resize() { resize() {
this.$refs.chartRef.resize() this.$refs.chartRef.resize()
this.$refs.thumbnailChartRef.resize()
}, },
// peak info 点击左右方向 // peak info 点击左右方向
@ -279,19 +449,35 @@ export default {
* @param { 'left'| 'right' } direction * @param { 'left'| 'right' } direction
*/ */
moveMarkLine(direction) { moveMarkLine(direction) {
if (direction == 'left') { const prevAxis = this.option.series[0].markLine.data[0].xAxis
this.option.series[0].markLine.data[0].xAxis = this.option.series[0].markLine.data[0].xAxis - 10
} else {
this.option.series[0].markLine.data[0].xAxis = this.option.series[0].markLine.data[0].xAxis + 10
}
this.$emit('markLineChange', {}) // 获取每一段 Channel 中的最大值
const maxXAxises = this.channelPeakGroup.map(item => {
const allY = item.pointlist.map(item => item.y)
const max = item.pointlist.find(point => point.y == Math.max(...allY))
return max.x
})
if (direction == 'right') {
// 找到第一个比prevAxis大的xAxis
const find = maxXAxises.find(xAxis => xAxis > prevAxis)
if (find) {
this.option.series[0].markLine.data[0].xAxis = find
}
} else if (direction == 'left') {
// 找到第一个比prevAxis小的xAxis
const find = maxXAxises.reverse().find(xAxis => xAxis < prevAxis)
if (find) {
this.option.series[0].markLine.data[0].xAxis = find
}
}
} }
}, },
watch: { watch: {
data: { sample: {
handler() {}, handler() {
deep: true this.getSampleDetail()
},
immediate: true
} }
} }
} }
@ -301,6 +487,16 @@ export default {
.gamma-analysis { .gamma-analysis {
height: 100%; height: 100%;
.ant-spin-nested-loading {
height: 100%;
::v-deep {
.ant-spin-container {
height: 100%;
}
}
}
&-main { &-main {
height: calc(100% - 51px); height: calc(100% - 51px);
display: flex; display: flex;
@ -311,6 +507,7 @@ export default {
&-chart { &-chart {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: relative;
} }
&-thumbnail { &-thumbnail {
@ -318,7 +515,7 @@ export default {
top: 50px; top: 50px;
right: 10px; right: 10px;
width: 500px; width: 500px;
height: 150px; height: 20%;
background-color: #153e44; background-color: #153e44;
} }
} }

34
src/views/spectrumAnalysis/index.vue
View File

@ -30,7 +30,7 @@
<!-- 频谱分析部分 --> <!-- 频谱分析部分 -->
<div class="spectrum-analysis-main"> <div class="spectrum-analysis-main">
<!-- Gamma 分析 --> <!-- Gamma 分析 -->
<gamma-analysis v-if="isGamma" ref="gammaAnalysisRef" /> <gamma-analysis v-if="isGamma" ref="gammaAnalysisRef" :sample="sampleData" />
<!-- Gamma 分析 --> <!-- Gamma 分析 -->
<!-- Beta-Gamma 分析 --> <!-- Beta-Gamma 分析 -->
@ -72,11 +72,11 @@
<!-- Save Setting 弹窗结束 --> <!-- Save Setting 弹窗结束 -->
<!-- 分析-设置弹窗开始 --> <!-- 分析-设置弹窗开始 -->
<analyze-setting-modal v-model="analyzeConfigureModalVisible" /> <analyze-setting-modal v-model="analyzeConfigureModalVisible" :sampleId="sampleData.sampleId" />
<!-- 分析-设置弹窗结束 --> <!-- 分析-设置弹窗结束 -->
<!-- 分析工具弹窗开始 --> <!-- 分析工具弹窗开始 -->
<analyze-interactive-tool-modal v-model="analyzeInteractiveToolModalVisible" /> <analyze-interactive-tool-modal v-model="analyzeInteractiveToolModalVisible" :sampleId="sampleData.sampleId" />
<!-- 分析工具弹窗结束 --> <!-- 分析工具弹窗结束 -->
<!-- Korsum 弹窗开始 --> <!-- Korsum 弹窗开始 -->
@ -88,7 +88,7 @@
<!-- ReProcessing 弹窗结束 --> <!-- ReProcessing 弹窗结束 -->
<!-- Zero Time 弹窗开始 --> <!-- Zero Time 弹窗开始 -->
<zero-time-modal v-model="zeroTimeModalVisible" /> <zero-time-modal v-model="zeroTimeModalVisible" :sampleId="sampleData.sampleId" />
<!-- Zero Time 弹窗结束 --> <!-- Zero Time 弹窗结束 -->
<!-- Efficiency Calibration 弹窗开始 --> <!-- Efficiency Calibration 弹窗开始 -->
@ -345,6 +345,15 @@ export default {
}, },
created() { created() {
this.$bus.$on('reanalyse', this.handleReanalyse) this.$bus.$on('reanalyse', this.handleReanalyse)
this.loadSelectedSample({
sampleId: 426530,
sampleType: 'G',
dbName: 'auto'
})
},
destroyed() {
this.$bus.$off('reanalyse', this.handleReanalyse)
}, },
methods: { methods: {
@ -1075,4 +1084,21 @@ export default {
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
} }
.figure-chart-option-tooltip {
background-color: #00aa7f !important;
border-color: #00aa7f !important;
.channel {
color: #fff;
}
.energy {
color: #00d1f0;
}
.warning {
color: yellow;
}
}
</style> </style>

1
src/views/spectrumAnalysis/response.json Normal file
View File

File diff suppressed because one or more lines are too long