feat: 完成Korsum、ReProcessing、 Zero Time、EfficiencyCalibration弹窗，和NuclideReview中图表的逻辑
This commit is contained in:
parent
8fb0089be1
commit
766b4f6c04
17
src/mixins/ModalMixin.js
Normal file
17
src/mixins/ModalMixin.js
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: Boolean
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
visible: {
|
||||
get() {
|
||||
return this.value
|
||||
},
|
||||
set(val) {
|
||||
this.$emit('input', val)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -308,6 +308,41 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
// 时间选择器
|
||||
@time-picker-selected-bg: @primary-color;
|
||||
@item-hover-bg: @primary-color;
|
||||
.ant-time-picker {
|
||||
&-input {
|
||||
background: @modalBg;
|
||||
border-radius: 0;
|
||||
&::placeholder {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
&-clear,
|
||||
&-clock-icon {
|
||||
background-color: @modalBg !important;
|
||||
color: #01B6E3 !important;
|
||||
}
|
||||
|
||||
&-panel {
|
||||
&-input {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&-inner {
|
||||
background-color: @modalBg;
|
||||
border: 1px solid @formInputBorderColor;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&-select li:focus {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 输入框样式
|
||||
.ant-input {
|
||||
background-color: @formInputBgColor !important;
|
||||
|
|
|
|||
|
|
@ -2,38 +2,123 @@
|
|||
<custom-chart :option="option" />
|
||||
</template>
|
||||
<script>
|
||||
import CustomChart from '@/components/CustomChart/index.vue'
|
||||
const initialOption = {
|
||||
grid: {
|
||||
top: 40,
|
||||
bottom: 50,
|
||||
right: 30
|
||||
},
|
||||
title: {
|
||||
text: 'Energy',
|
||||
textStyle: {
|
||||
color: '#8FD4F8',
|
||||
fontSize: 14,
|
||||
fontWeight: 'normal'
|
||||
},
|
||||
right: 10,
|
||||
bottom: 5
|
||||
},
|
||||
xAxis: {
|
||||
min: 620.68,
|
||||
max: 629.16,
|
||||
splitNumber: 3,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
min: 2030.0,
|
||||
max: 2427.6,
|
||||
splitNumber: 1,
|
||||
min: 417,
|
||||
max: 327,
|
||||
interval: 90,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff'
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
name: 'Counts',
|
||||
nameTextStyle: {
|
||||
color: '#8FD4F8',
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'line',
|
||||
data: [],
|
||||
data: [
|
||||
[620.68, 410],
|
||||
[621.98, 390],
|
||||
[622.12, 337],
|
||||
[623.53, 400],
|
||||
[624.37, 410],
|
||||
[625.37, 410],
|
||||
[626.37, 410],
|
||||
[627.37, 410],
|
||||
[628.37, 410]
|
||||
],
|
||||
itemStyle: {
|
||||
color: '#8BB93C'
|
||||
},
|
||||
symbol: 'none',
|
||||
markLine: {
|
||||
data: [
|
||||
{
|
||||
xAxis: 625.14,
|
||||
label: {
|
||||
formatter: '{c} keV',
|
||||
color: '#f00',
|
||||
fontWeight: 'bold',
|
||||
fontSize: 14
|
||||
}
|
||||
}
|
||||
],
|
||||
symbol: 'none',
|
||||
lineStyle: {
|
||||
color: '#f00'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
data: [],
|
||||
data: [
|
||||
[620.68, 367],
|
||||
[622, 367],
|
||||
[623, 367],
|
||||
[624, 367],
|
||||
[625, 367],
|
||||
[626, 367],
|
||||
[627, 367],
|
||||
[628, 367],
|
||||
[629, 367]
|
||||
],
|
||||
itemStyle: {
|
||||
color: '#03DBE6'
|
||||
}
|
||||
color: '#8FD4F8'
|
||||
},
|
||||
symbol: 'none'
|
||||
}
|
||||
]
|
||||
}
|
||||
export default {
|
||||
components: {
|
||||
CustomChart
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
option: initialOption
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<custom-modal v-model="visible" :width="1200" title="Nuclide Review" :footer="null">
|
||||
<div class="nuclide-review-search">
|
||||
<span><</span>
|
||||
<span @click="handleNuclideChange('prev')"><</span>
|
||||
<a-form-model layout="inline">
|
||||
<a-form-model-item label="Energy">
|
||||
<a-input-number></a-input-number>
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
</a-form-model-item>
|
||||
<a-button type="primary">Search</a-button>
|
||||
</a-form-model>
|
||||
<span>></span>
|
||||
<span @click="handleNuclideChange('next')">></span>
|
||||
</div>
|
||||
|
||||
<!-- 以下是表格部分 -->
|
||||
|
|
@ -22,9 +22,9 @@
|
|||
<div
|
||||
class="nuclide-review-table-nuclide-item"
|
||||
:class="currNuclide == item ? 'active' : ''"
|
||||
v-for="item in nuclideList"
|
||||
v-for="(item, index) in nuclideList"
|
||||
:key="item.id"
|
||||
@click="handleNuclideClick(item)"
|
||||
@click="handleNuclideClick(index)"
|
||||
>
|
||||
{{ item.title }}
|
||||
</div>
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
<a-row>
|
||||
<a-col :span="6">
|
||||
<a-form-model-item label="Name">
|
||||
1
|
||||
{{ currNuclide.title }}
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
|
|
@ -71,20 +71,32 @@
|
|||
|
||||
<!-- 以下是图表部分 -->
|
||||
<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>
|
||||
<div class="nuclide-review-chart-prev">
|
||||
<span @click="handleChangeChart('prev')">
|
||||
<
|
||||
</span>
|
||||
</div>
|
||||
<a-row class="nuclide-review-chart-list">
|
||||
<a-col class="nuclide-review-chart-item" :span="8" v-for="(chartItem, index) in currChartList" :key="index">
|
||||
<p>Line{{ chartItem.id }}</p>
|
||||
<div class="nuclide-review-chart-item-chart" :class="currTableItem.id == chartItem.id ? 'active' : ''">
|
||||
<nuclide-review-chart />
|
||||
</div>
|
||||
<p>Abundance: {{ chartItem.abundance }}</p>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<div class="nuclide-review-chart-prev"></div>
|
||||
<div class="nuclide-review-chart-next"></div>
|
||||
<div class="nuclide-review-chart-next">
|
||||
<span @click="handleChangeChart('next')">
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 图表部分结束 -->
|
||||
</custom-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import NuclideReviewChart from './NuclideReviewChart.vue'
|
||||
const columns = [
|
||||
{
|
||||
title: 'Id',
|
||||
|
|
@ -112,7 +124,7 @@ const columns = [
|
|||
width: '15%'
|
||||
},
|
||||
{
|
||||
title: 'AbundanceErr(%)',
|
||||
title: 'Abundance Err(%)',
|
||||
dataIndex: 'abundanceErr',
|
||||
width: '15%'
|
||||
},
|
||||
|
|
@ -123,6 +135,7 @@ const columns = [
|
|||
}
|
||||
]
|
||||
export default {
|
||||
components: { NuclideReviewChart },
|
||||
props: {
|
||||
value: {
|
||||
type: Boolean
|
||||
|
|
@ -134,87 +147,234 @@ export default {
|
|||
nuclideList: [
|
||||
{
|
||||
id: 1,
|
||||
title: 'Ag111'
|
||||
title: 'Ag111',
|
||||
data: [
|
||||
{
|
||||
id: '1',
|
||||
fullName: 'fullName',
|
||||
energy: 'energy',
|
||||
energyErr: 'energyErr',
|
||||
abundance: 'abundance',
|
||||
abundanceErr: 'abundanceErr',
|
||||
keyLine: 'keyLine'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'Eu157'
|
||||
title: 'Eu157',
|
||||
data: [
|
||||
{
|
||||
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,
|
||||
title: 'Mo99'
|
||||
title: 'Mo99',
|
||||
data: [
|
||||
{
|
||||
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'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
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'
|
||||
title: 'Pb204M',
|
||||
data: [
|
||||
{
|
||||
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'
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
fullName: 'fullName',
|
||||
energy: 'energy',
|
||||
energyErr: 'energyErr',
|
||||
abundance: 'abundance',
|
||||
abundanceErr: 'abundanceErr',
|
||||
keyLine: 'keyLine'
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
fullName: 'fullName',
|
||||
energy: 'energy',
|
||||
energyErr: 'energyErr',
|
||||
abundance: 'abundance',
|
||||
abundanceErr: 'abundanceErr',
|
||||
keyLine: 'keyLine'
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
fullName: 'fullName',
|
||||
energy: 'energy',
|
||||
energyErr: 'energyErr',
|
||||
abundance: 'abundance',
|
||||
abundanceErr: 'abundanceErr',
|
||||
keyLine: 'keyLine'
|
||||
},
|
||||
{
|
||||
id: '7',
|
||||
fullName: 'fullName',
|
||||
energy: 'energy',
|
||||
energyErr: 'energyErr',
|
||||
abundance: 'abundance',
|
||||
abundanceErr: 'abundanceErr',
|
||||
keyLine: 'keyLine'
|
||||
},
|
||||
{
|
||||
id: '8',
|
||||
fullName: 'fullName',
|
||||
energy: 'energy',
|
||||
energyErr: 'energyErr',
|
||||
abundance: 'abundance',
|
||||
abundanceErr: 'abundanceErr',
|
||||
keyLine: 'keyLine'
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
list: [], // 表格里的数据
|
||||
currNuclide: {},
|
||||
|
||||
currTableItem: {} // 选中的表格中的行
|
||||
currTableItem: {}, // 选中的表格中的行
|
||||
|
||||
currChartList: [] // 当前展示的图表的列表,一般是3个
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleNuclideClick(item) {
|
||||
this.currNuclide = item
|
||||
// 搜索栏的向前/向后按钮
|
||||
handleNuclideChange(direction) {
|
||||
const currIndex = this.nuclideList.findIndex(item => item == this.currNuclide)
|
||||
if (direction == 'prev' && currIndex > 0) {
|
||||
this.handleNuclideClick(currIndex - 1)
|
||||
} else if (direction == 'next' && currIndex !== this.nuclideList.length - 1) {
|
||||
this.handleNuclideClick(currIndex + 1)
|
||||
}
|
||||
},
|
||||
|
||||
handleNuclideClick(index) {
|
||||
this.currNuclide = this.nuclideList[index]
|
||||
this.list = this.currNuclide.data
|
||||
|
||||
this.selectTableRow(0)
|
||||
},
|
||||
|
||||
selectTableRow(index) {
|
||||
const record = this.list[index]
|
||||
this.currTableItem = record
|
||||
|
||||
let startIndex = 0
|
||||
let endIndex = 0
|
||||
if (index == 0) {
|
||||
// 选中了第一个，则往后数三个
|
||||
endIndex = startIndex + 3
|
||||
} else if (index == this.list.length - 1) {
|
||||
// 选中了最后一个，则往前数三个
|
||||
endIndex = index + 1
|
||||
startIndex = endIndex - 3
|
||||
} else {
|
||||
startIndex = index - 1
|
||||
endIndex = index + 2
|
||||
}
|
||||
if (startIndex < 0) {
|
||||
startIndex = 0
|
||||
}
|
||||
this.currChartList = this.list.slice(startIndex, endIndex)
|
||||
},
|
||||
|
||||
// 向前/向后切换图表
|
||||
handleChangeChart(direction) {
|
||||
const currIndex = this.list.findIndex(item => item == this.currTableItem)
|
||||
if (direction == 'prev') {
|
||||
const willJumpIndex = currIndex - 3
|
||||
if (willJumpIndex >= 0) {
|
||||
this.selectTableRow(willJumpIndex)
|
||||
}
|
||||
else {
|
||||
this.selectTableRow(0)
|
||||
}
|
||||
}
|
||||
else if (direction == 'next') {
|
||||
const willJumpIndex = currIndex + 3
|
||||
if (willJumpIndex <= this.list.length - 2) {
|
||||
this.selectTableRow(willJumpIndex)
|
||||
}
|
||||
else {
|
||||
this.selectTableRow(this.list.length - 1)
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 实现单击选中/反选功能
|
||||
customRow(record) {
|
||||
customRow(record, index) {
|
||||
return {
|
||||
class: 'custom-table-row' + (this.currTableItem == record ? ' ant-table-row-selected' : ''),
|
||||
on: {
|
||||
click: () => {
|
||||
this.currTableItem = record
|
||||
this.selectTableRow(index)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -294,6 +454,7 @@ export default {
|
|||
height: 30px;
|
||||
line-height: 30px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
|
||||
&.active {
|
||||
background-color: #296d81;
|
||||
|
|
@ -347,9 +508,52 @@ export default {
|
|||
margin-top: 20px;
|
||||
height: 300px;
|
||||
background-color: #05354c;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&-list {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&-item {
|
||||
width: 33%;
|
||||
height: 100%;
|
||||
p {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&-chart {
|
||||
height: calc(100% - 60px);
|
||||
border: 4px solid transparent;
|
||||
|
||||
&.active {
|
||||
background-color: #0a6f82;
|
||||
border-color: #0d8696;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-prev,
|
||||
&-next {
|
||||
width: 40px;
|
||||
text-align: center;
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
color: @primary-color;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border: 1px solid @primary-color;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,9 @@
|
|||
<div class="thumbnail"></div>
|
||||
<div class="table">
|
||||
<p class="title">
|
||||
< 6 Peaks with Anthro.Nuclides >
|
||||
<span @click="handleChangeMarkLine('prev')">< </span>
|
||||
6 Peaks with Anthro.Nuclides
|
||||
<span @click="handleChangeMarkLine('next')">></span>
|
||||
</p>
|
||||
<custom-table
|
||||
:class="list.length ? 'has-data' : ''"
|
||||
|
|
@ -19,7 +21,7 @@
|
|||
>
|
||||
</custom-table>
|
||||
<div class="operators">
|
||||
<a-button type="primary">Nuclide Review Window</a-button>
|
||||
<a-button type="primary" @click="nuclideReviewModalVisible = true">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>
|
||||
|
|
@ -41,8 +43,8 @@
|
|||
</div>
|
||||
|
||||
<div class="peak-box-item symbol" :key="4">
|
||||
<a-button type="primary"><</a-button>
|
||||
<a-button type="primary">></a-button>
|
||||
<a-button type="primary" @click="handleChangeMarkLine('prev')"><</a-button>
|
||||
<a-button type="primary" @click="handleChangeMarkLine('next')">></a-button>
|
||||
</div>
|
||||
|
||||
<div class="peak-box-item base-line">
|
||||
|
|
@ -178,6 +180,20 @@ const initialOption = {
|
|||
data: [],
|
||||
itemStyle: {
|
||||
color: '#FCFE02'
|
||||
},
|
||||
markLine: {
|
||||
data: [
|
||||
{
|
||||
xAxis: 1000
|
||||
}
|
||||
],
|
||||
symbol: 'none',
|
||||
lineStyle: {
|
||||
color: '#f00'
|
||||
},
|
||||
label: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
|
|
@ -257,16 +273,7 @@ export default {
|
|||
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'
|
||||
})),
|
||||
list: [],
|
||||
commentModalVisible: false, // Comment 弹窗是否显示
|
||||
commentType: 'Peak',
|
||||
|
||||
|
|
@ -275,10 +282,28 @@ export default {
|
|||
selectedKeys: [], // 选中的列表
|
||||
|
||||
fitPeaksAndBaselineModalVisible: false, // Fit Peaks And Base Line 弹窗
|
||||
nuclideReviewModalVisible: true // Nuclide Review 弹窗
|
||||
nuclideReviewModalVisible: false // Nuclide Review 弹窗
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 切换图表上的红色竖线
|
||||
handleChangeMarkLine(direction) {
|
||||
if (direction == 'prev') {
|
||||
this.option.series[0].markLine.data[0].xAxis = 900
|
||||
} else if (direction == 'next') {
|
||||
this.option.series[0].markLine.data[0].xAxis = 1100
|
||||
}
|
||||
this.list = new Array(20).fill(0).map((_, index) => ({
|
||||
id: index.toString(),
|
||||
energy: 'energy',
|
||||
centroid: 'centroid',
|
||||
fwhm: 'fwhm',
|
||||
area: 'area',
|
||||
detectability: 'detectability',
|
||||
cmnt: 'cmnt',
|
||||
nuclides: 'nuclides'
|
||||
}))
|
||||
},
|
||||
// 显示comment弹窗
|
||||
handleAddComment(type) {
|
||||
this.commentType = type
|
||||
|
|
@ -339,6 +364,11 @@ export default {
|
|||
font-size: 20px;
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
|
||||
span {
|
||||
cursor: pointer;
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-table {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,333 @@
|
|||
<template>
|
||||
<custom-modal v-model="visible" :width="1280" title="Efficiency Calibration" :footer="null">
|
||||
<div class="efficiency-calibration">
|
||||
<div class="left">
|
||||
<!-- Calibration Data -->
|
||||
<title-over-boarder title="Calibration Data">
|
||||
<div class="calibration-data">
|
||||
<a-form-model
|
||||
:colon="false"
|
||||
:labelCol="{
|
||||
style: {
|
||||
width: '70px',
|
||||
textAlign: 'left',
|
||||
flexShrink: 0
|
||||
}
|
||||
}"
|
||||
:wrapperCol="{
|
||||
style: {
|
||||
flex: 1
|
||||
}
|
||||
}"
|
||||
>
|
||||
<a-form-model-item label="Energy">
|
||||
<a-input></a-input>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="Efficiency">
|
||||
<a-input></a-input>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item :label="' '">
|
||||
<a-button type="primary">Insert</a-button>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item :label="' '">
|
||||
<a-button type="primary">Modify</a-button>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item :label="' '">
|
||||
<a-button type="primary">Delete</a-button>
|
||||
</a-form-model-item>
|
||||
</a-form-model>
|
||||
<!-- 表格 -->
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:dataSource="list"
|
||||
:pagination="false"
|
||||
:class="list.length ? 'has-data' : ''"
|
||||
:scroll="{ y: 182 }"
|
||||
></a-table>
|
||||
<!-- 表格结束 -->
|
||||
<div class="operators">
|
||||
<div>
|
||||
<a-button type="primary">Call</a-button>
|
||||
<a-button type="primary">Save</a-button>
|
||||
</div>
|
||||
<div>
|
||||
<a-select :value="''">
|
||||
<a-select-option value="">
|
||||
Interpolation
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
<a-button type="primary">Apply</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</title-over-boarder>
|
||||
<!-- Equation -->
|
||||
<title-over-boarder class="mt-20" title="Equation">
|
||||
<div class="equation">
|
||||
Efficiency = 59.541 + (88.034 - 59.541) * (E - 1)/ (0.058243 - 1)
|
||||
</div>
|
||||
</title-over-boarder>
|
||||
<!-- curve -->
|
||||
<title-over-boarder class="mt-20" title="curve">
|
||||
<div class="curve">
|
||||
<custom-chart :option="option" />
|
||||
</div>
|
||||
</title-over-boarder>
|
||||
</div>
|
||||
<div class="right">
|
||||
<title-over-boarder title="Data Source" style="height: 100%">
|
||||
<div class="data-source">
|
||||
<div class="data-source-main">
|
||||
<div class="title">PHD</div>
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
<div class="footer mt-20">
|
||||
<a-button type="primary">Set to Current</a-button>
|
||||
<div class="mt-20">PHD</div>
|
||||
</div>
|
||||
</div>
|
||||
</title-over-boarder>
|
||||
</div>
|
||||
</div>
|
||||
</custom-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ModalMixin from '@/mixins/ModalMixin'
|
||||
import TitleOverBoarder from '../TitleOverBoarder.vue'
|
||||
import CustomChart from '@/components/CustomChart/index.vue'
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: 'Energy(keV)',
|
||||
dataIndex: 'energy'
|
||||
},
|
||||
{
|
||||
title: 'Efficiency',
|
||||
dataIndex: 'efficiency'
|
||||
},
|
||||
{
|
||||
title: 'Fit',
|
||||
dataIndex: 'fit'
|
||||
},
|
||||
{
|
||||
title: 'Delta(%)',
|
||||
dataIndex: 'delta'
|
||||
}
|
||||
]
|
||||
|
||||
const initialOption = {
|
||||
grid: {
|
||||
top: 20,
|
||||
right: 20,
|
||||
bottom: 50,
|
||||
left: 70
|
||||
},
|
||||
title: {
|
||||
text: 'Energy(keV)',
|
||||
textStyle: {
|
||||
color: '#8FD4F8',
|
||||
fontSize: 14,
|
||||
fontWeight: 'normal'
|
||||
},
|
||||
right: 10,
|
||||
bottom: 0
|
||||
},
|
||||
xAxis: {
|
||||
min: 42,
|
||||
max: 2740,
|
||||
axisLabel: {
|
||||
color: '#fff'
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
axisLabel: {
|
||||
color: '#fff'
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
name: 'Efficiency',
|
||||
nameLocation: 'center',
|
||||
nameGap: 50,
|
||||
nameTextStyle: {
|
||||
color: '#8FD4F8',
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'line',
|
||||
itemStyle: {
|
||||
color: '#EDF005'
|
||||
},
|
||||
data: [
|
||||
[42, 0],
|
||||
[100, 0.2],
|
||||
[978, 0.1]
|
||||
],
|
||||
color: 'red'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
export default {
|
||||
components: { TitleOverBoarder, CustomChart },
|
||||
mixins: [ModalMixin],
|
||||
data() {
|
||||
this.columns = columns
|
||||
return {
|
||||
list: [
|
||||
{
|
||||
energy: 'energy',
|
||||
efficiency: 'efficiency',
|
||||
fit: 'fit',
|
||||
delta: 'delta'
|
||||
}
|
||||
],
|
||||
option: initialOption
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.efficiency-calibration {
|
||||
display: flex;
|
||||
|
||||
.left {
|
||||
flex: 1;
|
||||
|
||||
.calibration-data {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
|
||||
.ant-form {
|
||||
width: 25%;
|
||||
|
||||
::v-deep {
|
||||
.ant-form-item {
|
||||
margin-bottom: 15px;
|
||||
|
||||
&-label,
|
||||
&-control {
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-btn {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-table-wrapper {
|
||||
width: 50%;
|
||||
|
||||
&.has-data {
|
||||
::v-deep {
|
||||
.ant-table-body {
|
||||
height: 182px;
|
||||
background-color: #06282a;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep {
|
||||
.ant-table-placeholder {
|
||||
height: 183px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.operators {
|
||||
width: 25%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.ant-select {
|
||||
width: 100%;
|
||||
}
|
||||
.ant-btn {
|
||||
width: 100%;
|
||||
|
||||
&:last-child {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.equation {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
background-color: #1b5465;
|
||||
}
|
||||
|
||||
.curve {
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 20%;
|
||||
margin-left: 20px;
|
||||
|
||||
.data-source {
|
||||
.title {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
background-color: #296d81;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.content {
|
||||
height: 300px;
|
||||
background-color: #275466;
|
||||
}
|
||||
|
||||
.footer {
|
||||
.ant-btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
> div {
|
||||
text-align: center;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
background-color: #285367;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mt-20 {
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
465
src/views/spectrumAnalysis/components/Modals/KorsumModal.vue
Normal file
465
src/views/spectrumAnalysis/components/Modals/KorsumModal.vue
Normal file
|
|
@ -0,0 +1,465 @@
|
|||
<template>
|
||||
<custom-modal v-model="visible" title="Korsum" :width="1120" :footer="null">
|
||||
<div class="korsum">
|
||||
<!-- 输入开始 -->
|
||||
<title-over-boarder title="Input">
|
||||
<div class="korsum-input">
|
||||
<!-- 公式部分 -->
|
||||
<a-form-model
|
||||
class="korsum-input-formula"
|
||||
:labelCol="{
|
||||
style: {
|
||||
width: '110px'
|
||||
}
|
||||
}"
|
||||
>
|
||||
<a-form-model-item label="Total Effi = exp(">
|
||||
<!-- 第一行 -->
|
||||
<div>
|
||||
<a-input-number v-model="formula.totalEffi[0]"></a-input-number>
|
||||
<span class="operator">* Er + </span>
|
||||
<a-input-number v-model="formula.totalEffi[1]"></a-input-number>
|
||||
<span class="operator">+ </span>
|
||||
</div>
|
||||
<!-- 第二行 -->
|
||||
<div>
|
||||
<a-input-number v-model="formula.totalEffi[2]"></a-input-number>
|
||||
<span class="operator">/ Er + </span>
|
||||
<a-input-number v-model="formula.totalEffi[3]"></a-input-number>
|
||||
<span class="operator">/ Er <sup>2</sup> + </span>
|
||||
</div>
|
||||
<!-- 第三行 -->
|
||||
<div>
|
||||
<a-input-number v-model="formula.totalEffi[4]"></a-input-number>
|
||||
<span class="operator"> / Er <sup>3</sup> + </span>
|
||||
<a-input-number v-model="formula.totalEffi[5]"></a-input-number>
|
||||
<span class="operator">/ Er <sup>4</sup> ) </span>
|
||||
</div>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="Efficiency = exp(">
|
||||
<!-- 第一行 -->
|
||||
<div>
|
||||
<a-input-number v-model="formula.efficiency[0]"></a-input-number>
|
||||
<span class="operator">* Er + </span>
|
||||
<a-input-number v-model="formula.efficiency[1]"></a-input-number>
|
||||
<span class="operator">+ </span>
|
||||
</div>
|
||||
<!-- 第二行 -->
|
||||
<div>
|
||||
<a-input-number v-model="formula.efficiency[2]"></a-input-number>
|
||||
<span class="operator">/ Er + </span>
|
||||
<a-input-number v-model="formula.efficiency[3]"></a-input-number>
|
||||
<span class="operator">/ Er <sup>2</sup> + </span>
|
||||
</div>
|
||||
<!-- 第三行 -->
|
||||
<div>
|
||||
<a-input-number v-model="formula.efficiency[4]"></a-input-number>
|
||||
<span class="operator"> / Er <sup>3</sup> + </span>
|
||||
<a-input-number v-model="formula.efficiency[5]"></a-input-number>
|
||||
<span class="operator">/ Er <sup>4</sup> ) </span>
|
||||
</div>
|
||||
</a-form-model-item>
|
||||
</a-form-model>
|
||||
<!-- 公式结束 -->
|
||||
|
||||
<!-- 标题 -->
|
||||
<p class="korsum-input-title">
|
||||
Input
|
||||
</p>
|
||||
<!-- 标题结束 -->
|
||||
|
||||
<!-- 表格开始 -->
|
||||
<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-boarder>
|
||||
<!-- 输入结束 -->
|
||||
|
||||
<!-- 输出开始 -->
|
||||
<title-over-boarder 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
|
||||
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>
|
||||
</title-over-boarder>
|
||||
<!-- 输出结束 -->
|
||||
</div>
|
||||
</custom-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TitleOverBoarder from '../TitleOverBoarder.vue'
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: 'Energy',
|
||||
dataIndex: 'energy',
|
||||
scopedSlots: {
|
||||
customRender: 'energy'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: 'Total Efficiency',
|
||||
dataIndex: 'totalEfficiency',
|
||||
scopedSlots: {
|
||||
customRender: 'totalEfficiency'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: 'Peak Efficiency',
|
||||
dataIndex: 'peakEfficiency',
|
||||
scopedSlots: {
|
||||
customRender: 'peakEfficiency'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: 'Uncertainty(%)',
|
||||
dataIndex: 'uncertainty',
|
||||
scopedSlots: {
|
||||
customRender: 'uncertainty'
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
const outputColumns = [
|
||||
{
|
||||
title: 'Energy',
|
||||
dataIndex: 'energy'
|
||||
},
|
||||
{
|
||||
title: 'Correct Factor',
|
||||
dataIndex: 'correctFactor'
|
||||
},
|
||||
{
|
||||
title: 'Uncertainty(%)',
|
||||
dataIndex: 'uncertainty'
|
||||
}
|
||||
]
|
||||
export default {
|
||||
components: { TitleOverBoarder },
|
||||
props: {
|
||||
value: {
|
||||
type: Boolean
|
||||
}
|
||||
},
|
||||
data() {
|
||||
this.columns = columns
|
||||
this.outputColumns = outputColumns
|
||||
return {
|
||||
formula: {
|
||||
totalEffi: [0, 0, 0, 0, 0, 0],
|
||||
efficiency: [0, 0, 0, 0, 0, 0]
|
||||
},
|
||||
list: [
|
||||
{
|
||||
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中左侧选中的项
|
||||
outputTableList: [], // output中表格列表数据
|
||||
|
||||
filterWord: '' // 筛选
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 分析
|
||||
handleAnalyze() {
|
||||
console.log('%c [ 分析 ]-178', 'font-size:13px; background:pink; color:#bf2c9f;')
|
||||
},
|
||||
|
||||
// 退出
|
||||
handleExit() {
|
||||
this.visible = false
|
||||
},
|
||||
|
||||
// output栏点击左侧列表
|
||||
handleOutputItemClick(item) {
|
||||
this.selectedItem = item
|
||||
this.outputTableList = item.list
|
||||
},
|
||||
|
||||
// 导出到excel
|
||||
handleExport() {
|
||||
console.log('%c [ 导出到excel ]-246', 'font-size:13px; background:pink; color:#bf2c9f;')
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
visible: {
|
||||
get() {
|
||||
return this.value
|
||||
},
|
||||
set(val) {
|
||||
this.$emit('input', val)
|
||||
}
|
||||
},
|
||||
outputList() {
|
||||
const list = [
|
||||
{
|
||||
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()))
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
::v-deep {
|
||||
.title-over-border-content {
|
||||
height: 711px;
|
||||
}
|
||||
}
|
||||
|
||||
.korsum {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
|
||||
.title-over-border {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&-input {
|
||||
&-formula {
|
||||
::v-deep {
|
||||
.ant-form-item {
|
||||
margin-bottom: 10px;
|
||||
|
||||
&-label {
|
||||
::after {
|
||||
content: ' ';
|
||||
margin: 0 2px;
|
||||
}
|
||||
> label {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-input-number {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.operator {
|
||||
display: inline-block;
|
||||
width: 46px;
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
|
||||
&-title {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
background-color: @primary-color;
|
||||
}
|
||||
|
||||
&-table {
|
||||
&.has-data {
|
||||
::v-deep {
|
||||
.ant-table-body {
|
||||
height: 288px;
|
||||
background-color: #06282a;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep {
|
||||
.ant-table {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.ant-table-placeholder {
|
||||
height: 289px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-input-number {
|
||||
height: 26px;
|
||||
|
||||
::v-deep {
|
||||
.ant-input-number-input {
|
||||
height: 26px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-buttons {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
|
||||
.ant-btn {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-output {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&-main {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&-list {
|
||||
width: 120px;
|
||||
height: 619px;
|
||||
background: #275466;
|
||||
padding: 5px;
|
||||
overflow: auto;
|
||||
|
||||
&-item {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
padding: 0 4px;
|
||||
cursor: pointer;
|
||||
|
||||
&.active {
|
||||
background-color: @primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-table {
|
||||
flex: 1;
|
||||
&.has-data {
|
||||
::v-deep {
|
||||
.ant-table-body {
|
||||
height: 584px;
|
||||
background-color: #06282a;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep {
|
||||
.ant-table {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.ant-table-placeholder {
|
||||
height: 585px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-operation {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
|
||||
.left {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.right {
|
||||
flex: 1;
|
||||
|
||||
.ant-btn {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<template>
|
||||
<span class="status" :style="{ background: currStatus.color }">{{ currStatus.title }}</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const statusList = {
|
||||
0: {
|
||||
title: 'Done',
|
||||
color: '#008000'
|
||||
},
|
||||
1: {
|
||||
title: '==>',
|
||||
color: '#FFAA00'
|
||||
},
|
||||
2: {
|
||||
title: 'Pending',
|
||||
color: '#FF0000'
|
||||
}
|
||||
}
|
||||
export default {
|
||||
props: {
|
||||
status: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currStatus() {
|
||||
return statusList[this.status]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.status {
|
||||
width: 80px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,108 @@
|
|||
<template>
|
||||
<custom-modal v-model="visible" :width="400" title="Processing Monitor" :footer="null">
|
||||
<div class="processing">
|
||||
<div>
|
||||
<!-- 标题 -->
|
||||
<div class="processing-title">Calibration Updates</div>
|
||||
<!-- 列表 -->
|
||||
<div class="processing-list">
|
||||
<div class="processing-list-item">
|
||||
<status :status="0" />
|
||||
<div class="description">Energy - Mariscotti Centroids</div>
|
||||
</div>
|
||||
<div class="processing-list-item">
|
||||
<status :status="0" />
|
||||
<div class="description">Resolution</div>
|
||||
</div>
|
||||
<div class="processing-list-item">
|
||||
<status :status="0" />
|
||||
<div class="description">Energy - Fitted Centroids</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 20px;">
|
||||
<!-- 标题 -->
|
||||
<div class="processing-title">Spectrum Analysis</div>
|
||||
<!-- 列表 -->
|
||||
<div class="processing-list">
|
||||
<div class="processing-list-item">
|
||||
<status :status="0" />
|
||||
<div class="description">Peak Search</div>
|
||||
</div>
|
||||
<div class="processing-list-item">
|
||||
<status :status="0" />
|
||||
<div class="description">Baseline Fitting</div>
|
||||
</div>
|
||||
<div class="processing-list-item">
|
||||
<status :status="1" />
|
||||
<div class="description">Net Area Fitting</div>
|
||||
</div>
|
||||
<div class="processing-list-item">
|
||||
<status :status="2" />
|
||||
<div class="description">Nuclide Identification</div>
|
||||
</div>
|
||||
<div class="processing-list-item">
|
||||
<status :status="2" />
|
||||
<div class="description">Activity and MDA</div>
|
||||
</div>
|
||||
<div class="processing-list-item">
|
||||
<status :status="2" />
|
||||
<div class="description">QC Test</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</custom-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Status from './components/status.vue'
|
||||
export default {
|
||||
components: {
|
||||
Status
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
type: Boolean
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
visible: {
|
||||
get() {
|
||||
return this.value
|
||||
},
|
||||
set(val) {
|
||||
this.$emit('input', val)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@color: #325050;
|
||||
.processing {
|
||||
&-title {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
background-color: @color;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&-list {
|
||||
&-item {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
|
||||
.description {
|
||||
flex: 1;
|
||||
background-color: @color;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
250
src/views/spectrumAnalysis/components/Modals/ZeroTimeModal.vue
Normal file
250
src/views/spectrumAnalysis/components/Modals/ZeroTimeModal.vue
Normal file
|
|
@ -0,0 +1,250 @@
|
|||
<template>
|
||||
<custom-modal v-model="visible" title="Zero Time" :width="940" :footer="null">
|
||||
<div class="zero-time">
|
||||
<!-- 左侧 -->
|
||||
<div class="zero-time-left">
|
||||
<title-over-boarder title="Fission Product Infomation">
|
||||
<div class="fission-product">
|
||||
<div class="fission-product-container">
|
||||
<div class="fission-product-title">
|
||||
Fission Product 1
|
||||
</div>
|
||||
<div class="fission-product-list">
|
||||
<div class="fission-product-list-item" v-for="(item, index) in fissionProductList1" :key="index">
|
||||
{{ item.title }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fission-product-container">
|
||||
<div class="fission-product-title">
|
||||
Fission Product 2
|
||||
</div>
|
||||
<div class="fission-product-list">
|
||||
<div class="fission-product-list-item" v-for="(item, index) in fissionProductList2" :key="index">
|
||||
{{ item.title }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</title-over-boarder>
|
||||
<!-- Result of Zero Time -->
|
||||
<title-over-boarder class="mt-20" title="Result of Zero Time">
|
||||
<div class="result-of-zero-time">2015-05-30 17:30:60</div>
|
||||
</title-over-boarder>
|
||||
</div>
|
||||
<!-- 左侧结束 -->
|
||||
|
||||
<!-- 右侧 -->
|
||||
<div class="zero-time-right">
|
||||
<!-- Active of Fission Product -->
|
||||
<title-over-boarder 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-boarder>
|
||||
<div class="zero-time-right-center mt-20">
|
||||
<!-- Fission Target -->
|
||||
<title-over-boarder 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-boarder>
|
||||
<title-over-boarder class="fission-energy" title="Energy of Fission Neutron">
|
||||
<a-radio-group>
|
||||
<a-radio>T>Thermal_spectrum</a-radio>
|
||||
<a-radio>F>Fission_spectrum</a-radio>
|
||||
<a-radio>H->Fast_Neutron</a-radio>
|
||||
</a-radio-group>
|
||||
</title-over-boarder>
|
||||
</div>
|
||||
<title-over-boarder 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-boarder>
|
||||
|
||||
<div class="zero-time-right-buttons mt-20">
|
||||
<a-button type="primary">Analysis</a-button>
|
||||
<a-button type="primary">Save</a-button>
|
||||
<a-button type="primary">Exit</a-button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 右侧结束 -->
|
||||
</div>
|
||||
</custom-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TitleOverBoarder from '../TitleOverBoarder.vue'
|
||||
|
||||
export default {
|
||||
components: { TitleOverBoarder },
|
||||
props: {
|
||||
value: {
|
||||
type: Boolean
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
fissionProductList1: [
|
||||
{
|
||||
id: 1,
|
||||
title: 'Ba140'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'Ce141'
|
||||
}
|
||||
],
|
||||
fissionProductList2: [
|
||||
{
|
||||
id: 1,
|
||||
title: 'Ba140'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
visible: {
|
||||
set(val) {
|
||||
this.$emit('input', val)
|
||||
},
|
||||
get() {
|
||||
return this.value
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.zero-time {
|
||||
display: flex;
|
||||
gap: 30px;
|
||||
|
||||
&-left {
|
||||
width: 40%;
|
||||
|
||||
.fission-product {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
|
||||
&-container {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&-title {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
font-size: 16px;
|
||||
background-color: #497e9d;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&-list {
|
||||
margin-top: 5px;
|
||||
height: 255px;
|
||||
overflow: auto;
|
||||
padding: 0 10px;
|
||||
background-color: #275466;
|
||||
|
||||
&-item {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.result-of-zero-time {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
background-color: #00ff7f;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
// 右侧开始
|
||||
&-right {
|
||||
flex: 1;
|
||||
|
||||
.active-of-fission-product {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
padding: 0 60px;
|
||||
|
||||
.item {
|
||||
flex: 1;
|
||||
|
||||
.title {
|
||||
font-size: 16px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.operator {
|
||||
margin: 5px 15px;
|
||||
}
|
||||
}
|
||||
|
||||
&-center {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
|
||||
.fission-target {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.fission-energy {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.ant-radio-wrapper {
|
||||
display: block;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-buttons {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.ant-btn {
|
||||
padding: 0 45px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mt-20 {
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -62,6 +62,22 @@
|
|||
<!-- 分析工具弹窗开始 -->
|
||||
<analyze-interactive-tool-modal v-model="analyzeInteractiveToolModalVisible" />
|
||||
<!-- 分析工具弹窗结束 -->
|
||||
|
||||
<!-- Korsum 弹窗开始 -->
|
||||
<korsum-modal v-model="korsumModalShow" />
|
||||
<!-- Korsum 弹窗结束 -->
|
||||
|
||||
<!-- ReProcessing 弹窗开始 -->
|
||||
<re-processing-modal v-model="reprocessingModalVisible" />
|
||||
<!-- ReProcessing 弹窗结束 -->
|
||||
|
||||
<!-- Zero Time 弹窗开始 -->
|
||||
<zero-time-modal v-model="zeroTimeModalVisible" />
|
||||
<!-- Zero Time 弹窗结束 -->
|
||||
|
||||
<!-- Efficiency Calibration 弹窗开始 -->
|
||||
<efficiency-calibration-modal v-model="efficiencyCalibrationModalShow" />
|
||||
<!-- Efficiency Calibration 弹窗结束 -->
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
|
@ -77,6 +93,10 @@ import SaveSettingModal from './components/Modals/SaveSettingModal.vue'
|
|||
import AnalyzeSettingModal from './components/Modals/AnalyzeSettingModal.vue'
|
||||
import AnalyzeInteractiveToolModal from './components/Modals/AnalyzeInteractiveToolModal/index.vue'
|
||||
import { getAction } from '../../api/manage'
|
||||
import KorsumModal from './components/Modals/KorsumModal.vue'
|
||||
import ReProcessingModal from './components/Modals/ReProcessingModal/index.vue'
|
||||
import ZeroTimeModal from './components/Modals/ZeroTimeModal.vue'
|
||||
import EfficiencyCalibrationModal from './components/Modals/EfficiencyCalibrationModal.vue'
|
||||
|
||||
// 分析类型
|
||||
const ANALYZE_TYPE = {
|
||||
|
|
@ -95,7 +115,11 @@ export default {
|
|||
MultiLevelMenu,
|
||||
SaveSettingModal,
|
||||
AnalyzeSettingModal,
|
||||
AnalyzeInteractiveToolModal
|
||||
AnalyzeInteractiveToolModal,
|
||||
KorsumModal,
|
||||
ReProcessingModal,
|
||||
ZeroTimeModal,
|
||||
EfficiencyCalibrationModal
|
||||
},
|
||||
data() {
|
||||
this.ANALYZE_TYPE = ANALYZE_TYPE
|
||||
|
|
@ -118,7 +142,15 @@ export default {
|
|||
|
||||
analyzeConfigureModalVisible: false, // 分析设置弹窗
|
||||
|
||||
analyzeInteractiveToolModalVisible: false // 分析工具弹窗
|
||||
reprocessingModalVisible: false, // 重新分析弹窗
|
||||
|
||||
analyzeInteractiveToolModalVisible: false, // 分析工具弹窗
|
||||
|
||||
zeroTimeModalVisible: false, // Zero Time 弹窗
|
||||
|
||||
korsumModalShow: false, // Korsum 弹窗
|
||||
|
||||
efficiencyCalibrationModalShow: false // Calibration -> efficiency弹窗
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
|
@ -196,19 +228,10 @@ export default {
|
|||
this.analyzeConfigureModalVisible = true
|
||||
},
|
||||
|
||||
handleProcessing() {
|
||||
console.log('%c [ handleProcessing ]-156', 'font-size:13px; background:pink; color:#bf2c9f;')
|
||||
},
|
||||
|
||||
handleReprocessAll() {
|
||||
console.log('%c [ handleReprocessAll ]-216', 'font-size:13px; background:pink; color:#bf2c9f;')
|
||||
},
|
||||
|
||||
// 显示分析工具弹窗
|
||||
handleShowInteractiveTool() {
|
||||
this.analyzeInteractiveToolModalVisible = true
|
||||
},
|
||||
|
||||
// 弹出能量刻度界面
|
||||
handleEnergy() {
|
||||
console.log('%c [ handleEnergy ]-163', 'font-size:13px; background:pink; color:#bf2c9f;')
|
||||
|
|
@ -219,11 +242,6 @@ export default {
|
|||
console.log('%c [ handleResolution ]-167', 'font-size:13px; background:pink; color:#bf2c9f;')
|
||||
},
|
||||
|
||||
// 弹出分辨率刻度界面
|
||||
handleEfficiency() {
|
||||
console.log('%c [ handleEfficiency ]-167', 'font-size:13px; background:pink; color:#bf2c9f;')
|
||||
},
|
||||
|
||||
// 弹出 Nuclide Library 弹窗
|
||||
handleNuclideLib() {
|
||||
console.log('%c [ handleNuclideLib ]-178', 'font-size:13px; background:pink; color:#bf2c9f;')
|
||||
|
|
@ -401,8 +419,10 @@ export default {
|
|||
},
|
||||
{
|
||||
type: 'a-menu-item',
|
||||
title: 'Processing',
|
||||
handler: this.handleProcessing
|
||||
title: 'ReProcessing',
|
||||
handler: () => {
|
||||
this.reprocessingModalVisible = true
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'a-menu-item',
|
||||
|
|
@ -412,7 +432,23 @@ export default {
|
|||
{
|
||||
type: 'a-menu-item',
|
||||
title: 'Interactive Tool',
|
||||
handler: this.handleShowInteractiveTool
|
||||
handler: () => {
|
||||
this.analyzeInteractiveToolModalVisible = true
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'a-menu-item',
|
||||
title: 'Zero Time',
|
||||
handler: () => {
|
||||
this.zeroTimeModalVisible = true
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'a-menu-item',
|
||||
title: 'Korsum',
|
||||
handler: () => {
|
||||
this.korsumModalShow = true
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -437,7 +473,9 @@ export default {
|
|||
{
|
||||
type: 'a-menu-item',
|
||||
title: 'Efficiency',
|
||||
handler: this.handleEfficiency
|
||||
handler: () => {
|
||||
this.efficiencyCalibrationModalShow = true
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user