450 lines
11 KiB
Vue
450 lines
11 KiB
Vue
<template>
|
|
<custom-modal v-model="visible" :width="980" title="Nuclide Library" :footer="null">
|
|
<a-spin :spinning="isLoading">
|
|
<div class="nuclide-library">
|
|
<div class="nuclide-library-list">
|
|
<div
|
|
class="nuclide-library-list-item"
|
|
:class="{ active: selectedNuclide == item }"
|
|
v-for="(item, index) in nuclideList"
|
|
:key="index"
|
|
@click="handleNuclideItemClick(item)"
|
|
>
|
|
{{ item }}
|
|
</div>
|
|
</div>
|
|
<div class="nuclide-library-settings">
|
|
<div class="nuclide-library-settings-select">
|
|
<title-over-border class="select-library" title="Select Library">
|
|
<a-radio-group v-model="model.libraryName" @change="handleSearch">
|
|
<a-radio value="UserLibrary">User Library</a-radio>
|
|
<a-radio value="FULLLibrary">Full Library</a-radio>
|
|
<a-radio value="RelevantLibrary">Relevant Library</a-radio>
|
|
</a-radio-group>
|
|
</title-over-border>
|
|
<div class="parent-and-daughters">
|
|
<div class="parents">
|
|
<div class="title">Parents</div>
|
|
<div class="content">
|
|
<div
|
|
class="parent-item"
|
|
:class="selectedParent == parentItem ? 'active' : ''"
|
|
v-for="(parentItem, index) in parentList"
|
|
:key="index"
|
|
@dblclick="handleParentDBClick(parentItem)"
|
|
@click="handleParentClick(parentItem)"
|
|
>
|
|
{{ parentItem }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="daughters">
|
|
<div class="title">Daughters</div>
|
|
<div class="content">
|
|
<custom-table
|
|
size="small"
|
|
:class="daughterList.length ? 'has-data' : ''"
|
|
:columns="daughterColumns"
|
|
:list="daughterList"
|
|
:pagination="false"
|
|
:scroll="{ y: 123 }"
|
|
rowKey="daughters"
|
|
@rowDblClick="handleParentDBClick($event.daughters)"
|
|
></custom-table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="nuclide-library-settings-main">
|
|
<a-form-model layout="inline">
|
|
<a-form-model-item label="Name">
|
|
<a-input v-model="model.nuclideName"></a-input>
|
|
</a-form-model-item>
|
|
<a-form-model-item label="Half Life">
|
|
{{ nuclideInfo.lab_halfLife }}
|
|
</a-form-model-item>
|
|
<a-form-model-item label="Half Life Err">
|
|
{{ nuclideInfo.lab_halfLifeErr }}
|
|
</a-form-model-item>
|
|
<a-form-model-item label="Lines">
|
|
{{ nuclideInfo.lab_lines }}
|
|
</a-form-model-item>
|
|
</a-form-model>
|
|
<!-- 主体表格 -->
|
|
<a-table
|
|
size="small"
|
|
:class="nuclLinesLibs.length ? 'has-data' : ''"
|
|
:columns="mainColumns"
|
|
:dataSource="nuclLinesLibs"
|
|
:pagination="false"
|
|
:scroll="{ y: 175 }"
|
|
>
|
|
<template slot="keyLine" slot-scope="text">
|
|
<span v-if="text == 1" class="green-check-mark"> </span>
|
|
</template>
|
|
</a-table>
|
|
</div>
|
|
<div class="nuclide-library-settings-operation">
|
|
<a-space :size="10">
|
|
<span>
|
|
Energy:
|
|
</span>
|
|
<a-input v-model="model.editEnergy"></a-input>
|
|
<a-input-number
|
|
v-model="model.err"
|
|
:min="0"
|
|
:step="0.5"
|
|
:precision="2"
|
|
@blur="handleErrInputBlur"
|
|
></a-input-number>
|
|
<a-button type="primary" @click="handleSearch">Search</a-button>
|
|
</a-space>
|
|
<a-space :size="10">
|
|
<a-button type="primary" @click="handleReset">Reset</a-button>
|
|
<a-button type="primary" @click="visible = false">Close</a-button>
|
|
</a-space>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a-spin>
|
|
</custom-modal>
|
|
</template>
|
|
|
|
<script>
|
|
import ModalMixin from '@/mixins/ModalMixin'
|
|
import TitleOverBorder from '../TitleOverBorder.vue'
|
|
import { getAction } from '@/api/manage'
|
|
import SampleDataMixin from '../../SampleDataMixin'
|
|
|
|
// 右上角表格配置
|
|
const daughterColumns = [
|
|
{
|
|
title: 'Name',
|
|
dataIndex: 'daughters',
|
|
align: 'center'
|
|
},
|
|
{
|
|
title: 'Ratio',
|
|
dataIndex: 'branchingratios',
|
|
align: 'center'
|
|
},
|
|
{
|
|
title: 'Status',
|
|
dataIndex: 'daughtersstable',
|
|
align: 'center'
|
|
}
|
|
]
|
|
|
|
// 主体表格配置
|
|
const mainColumns = [
|
|
{
|
|
title: 'Id',
|
|
width: 80,
|
|
customRender: (_, __, index) => {
|
|
return index + 1
|
|
}
|
|
},
|
|
{
|
|
title: 'Full Name',
|
|
dataIndex: 'fullName'
|
|
},
|
|
{
|
|
title: 'Energy(keV)',
|
|
dataIndex: 'energy',
|
|
width: 100
|
|
},
|
|
{
|
|
title: 'Energy Uncert(%)',
|
|
dataIndex: 'energyUncert',
|
|
width: 120
|
|
},
|
|
{
|
|
title: 'Yield',
|
|
dataIndex: 'yield',
|
|
width: 80
|
|
},
|
|
{
|
|
title: 'Yield Uncert(%)',
|
|
dataIndex: 'yieldUncert',
|
|
width: 120
|
|
},
|
|
{
|
|
title: 'KeyLine',
|
|
dataIndex: 'keyFlag',
|
|
width: 100,
|
|
align: 'center',
|
|
scopedSlots: {
|
|
customRender: 'keyLine'
|
|
}
|
|
}
|
|
]
|
|
|
|
export default {
|
|
mixins: [ModalMixin, SampleDataMixin],
|
|
components: {
|
|
TitleOverBorder
|
|
},
|
|
data() {
|
|
this.daughterColumns = daughterColumns
|
|
this.mainColumns = mainColumns
|
|
return {
|
|
isLoading: false,
|
|
nuclideList: [],
|
|
nuclideInfo: {},
|
|
daughterList: [],
|
|
parentList: [],
|
|
nuclLinesLibs: [],
|
|
model: {},
|
|
|
|
selectedNuclide: {}, // 当前选中的Nuclide
|
|
selectedParent: {} // 当前选中的Parent
|
|
}
|
|
},
|
|
methods: {
|
|
// 获取详情
|
|
async getInfo(selectFirst = false) {
|
|
this.selectedParent = {}
|
|
|
|
try {
|
|
this.isLoading = true
|
|
const { sampleId, inputFileName: fileName } = this.sampleData
|
|
const { success, result, message } = await getAction('/gamma/NuclideLibrary', {
|
|
sampleId,
|
|
fileName,
|
|
...this.model
|
|
})
|
|
if (success) {
|
|
const {
|
|
daughter: { list_parent, table_daughter },
|
|
nuclLinesLibs,
|
|
nuclideInfo,
|
|
nuclides
|
|
} = result
|
|
|
|
this.nuclideList = nuclides
|
|
this.parentList = list_parent ? list_parent.filter(item => item) : []
|
|
this.daughterList = table_daughter ? table_daughter.filter(item => item.daughters) : []
|
|
this.nuclideInfo = nuclideInfo
|
|
this.nuclLinesLibs = nuclLinesLibs
|
|
|
|
if (selectFirst) {
|
|
this.selectedNuclide = nuclides[0]
|
|
this.model.nuclideName = nuclides[0]
|
|
}
|
|
} else {
|
|
this.$message.error(message)
|
|
}
|
|
} catch (error) {
|
|
console.error(error)
|
|
} finally {
|
|
this.isLoading = false
|
|
}
|
|
},
|
|
|
|
beforeModalOpen() {
|
|
this.model = {
|
|
libraryName: 'UserLibrary',
|
|
err: 0.5,
|
|
editEnergy: '',
|
|
nuclideName: ''
|
|
}
|
|
this.getInfo(true)
|
|
},
|
|
handleNuclideItemClick(item) {
|
|
this.selectedNuclide = item
|
|
this.model.nuclideName = item
|
|
this.getInfo()
|
|
},
|
|
|
|
handleErrInputBlur() {
|
|
if (!this.model.err) {
|
|
this.model.err = 0
|
|
}
|
|
},
|
|
|
|
// 搜索
|
|
handleSearch() {
|
|
this.getInfo(true)
|
|
},
|
|
|
|
// 重置
|
|
handleReset() {
|
|
this.model.editEnergy = ''
|
|
this.getInfo(true)
|
|
},
|
|
|
|
handleParentClick(item) {
|
|
this.selectedParent = item
|
|
},
|
|
|
|
// 在Parents选项上双击
|
|
handleParentDBClick(item) {
|
|
this.model.nuclideName = item
|
|
this.getInfo()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.nuclide-library {
|
|
display: flex;
|
|
gap: 20px;
|
|
margin-top: 5px;
|
|
|
|
&-list {
|
|
padding: 5px;
|
|
width: 150px;
|
|
height: 516px;
|
|
overflow: auto;
|
|
background-color: #275466;
|
|
|
|
&-item {
|
|
height: 32px;
|
|
line-height: 32px;
|
|
padding: 0 4px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
&-settings {
|
|
flex: 1;
|
|
|
|
&-select {
|
|
display: flex;
|
|
gap: 15px;
|
|
|
|
.select-library {
|
|
width: 200px;
|
|
height: 128px;
|
|
|
|
.ant-radio-group {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
|
|
.parent-and-daughters {
|
|
flex: 1;
|
|
display: flex;
|
|
gap: 10px;
|
|
|
|
.title {
|
|
height: 32px;
|
|
line-height: 32px;
|
|
background-color: #497e9d;
|
|
text-align: center;
|
|
}
|
|
|
|
.content {
|
|
height: 150px;
|
|
}
|
|
|
|
.parents {
|
|
width: 180px;
|
|
|
|
.content {
|
|
background-color: #275466;
|
|
overflow: auto;
|
|
|
|
.parent-item {
|
|
padding: 3px 5px;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.daughters {
|
|
flex: 1;
|
|
|
|
.ant-table-wrapper {
|
|
&.has-data {
|
|
::v-deep {
|
|
.ant-table-body {
|
|
height: 123px;
|
|
background-color: #06282a;
|
|
}
|
|
}
|
|
}
|
|
|
|
::v-deep {
|
|
.ant-table {
|
|
&-placeholder {
|
|
height: 124px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&-main {
|
|
margin-top: 20px;
|
|
|
|
.ant-form {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.ant-table {
|
|
&-wrapper {
|
|
margin-top: 20px;
|
|
|
|
&.has-data {
|
|
::v-deep {
|
|
.ant-table-body {
|
|
height: 175px;
|
|
background-color: #06282a;
|
|
}
|
|
}
|
|
}
|
|
|
|
::v-deep {
|
|
.ant-table {
|
|
&-placeholder {
|
|
height: 176px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&-operation {
|
|
margin-top: 20px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
}
|
|
|
|
.active {
|
|
background-color: #296d81;
|
|
}
|
|
|
|
.green-check-mark {
|
|
&::after {
|
|
@color: #3df9a7;
|
|
|
|
content: '';
|
|
border-radius: 0px;
|
|
width: 16px;
|
|
height: 9px;
|
|
display: inline-block;
|
|
border-bottom: 3px solid @color;
|
|
border-left: 3px solid @color;
|
|
transform: rotate(-45deg);
|
|
}
|
|
}
|
|
</style>
|