feat: 增加Nuclide Library弹窗，优化部分样式
This commit is contained in:
parent
ffed2cf2fa
commit
704986f910
|
|
@ -18,7 +18,7 @@
|
|||
|
||||
@modal-footer-border-color-split: @formInputBorderColor;
|
||||
|
||||
@disabled-color: rgba(255, 255, 255, .25);
|
||||
@disabled-color: rgba(255, 255, 255, 0.25);
|
||||
@background-color-base: darken(@primary-color, 20);
|
||||
@border-color-base: darken(@primary-color, 20);
|
||||
|
||||
|
|
@ -65,19 +65,21 @@ body {
|
|||
}
|
||||
|
||||
// 表格样式
|
||||
@table-border-radius-base: 0;
|
||||
@table-padding-vertical-sm: 2px;
|
||||
@table-padding-vertical: 6px;
|
||||
@table-padding-horizontal: 8px;
|
||||
.ant-table {
|
||||
color: #ade6ee;
|
||||
font-size: 16px;
|
||||
border: 1px solid rgba(65,111,127, .5);
|
||||
border: 1px solid rgba(65, 111, 127, 0.5);
|
||||
|
||||
&-thead {
|
||||
> tr {
|
||||
th {
|
||||
background-color: #126b82 !important;
|
||||
color: #fff;
|
||||
padding: 6px 8px !important;
|
||||
border-bottom: none;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -117,6 +119,29 @@ body {
|
|||
border-color: @formInputBorderColor;
|
||||
color: @formInputBorderColor;
|
||||
}
|
||||
|
||||
&-small {
|
||||
font-size: 14px;
|
||||
|
||||
.ant-table {
|
||||
&-tbody {
|
||||
tr td {
|
||||
padding-top: 6px !important;
|
||||
padding-bottom: 6px !important;
|
||||
}
|
||||
}
|
||||
|
||||
&-placeholder {
|
||||
.ant-empty-image {
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.ant-empty-description {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 表格下的分页器
|
||||
|
|
@ -323,7 +348,7 @@ body {
|
|||
&-clear,
|
||||
&-clock-icon {
|
||||
background-color: @modalBg !important;
|
||||
color: #01B6E3 !important;
|
||||
color: #01b6e3 !important;
|
||||
}
|
||||
|
||||
&-panel {
|
||||
|
|
@ -515,7 +540,7 @@ input[type='number']::-webkit-outer-spin-button {
|
|||
&.ant-select-dropdown-placement-topLeft {
|
||||
padding-top: 0;
|
||||
padding-bottom: 7px;
|
||||
|
||||
|
||||
.ant-select-dropdown-content {
|
||||
&::before {
|
||||
top: auto;
|
||||
|
|
|
|||
|
|
@ -1,14 +1,354 @@
|
|||
<template>
|
||||
<custom-modal v-model="visible" :width="700" title="Nuclide Library">
|
||||
Nuclide Library
|
||||
<custom-modal v-model="visible" :width="1100" title="Nuclide Library" :footer="null">
|
||||
<div class="nuclide-library">
|
||||
<div class="nuclide-library-list">
|
||||
<div
|
||||
class="nuclide-library-list-item"
|
||||
:class="{ active: currNuclide == item }"
|
||||
v-for="(item, index) in nuclideList"
|
||||
:key="index"
|
||||
@click="handleNuclideItemClick(item)"
|
||||
>
|
||||
{{ item.title }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="nuclide-library-settings">
|
||||
<div class="nuclide-library-settings-select">
|
||||
<title-over-boarder class="select-library" title="Select Library">
|
||||
<a-radio-group>
|
||||
<a-radio>User Library</a-radio>
|
||||
<a-radio>Full Library</a-radio>
|
||||
<a-radio>Relevant Library</a-radio>
|
||||
</a-radio-group>
|
||||
</title-over-boarder>
|
||||
<div class="parent-and-daughters">
|
||||
<div class="parents">
|
||||
<div class="title">Parents</div>
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
<div class="daughters">
|
||||
<div class="title">Daughters</div>
|
||||
<div class="content">
|
||||
<a-table
|
||||
size="small"
|
||||
:class="daughterList.length ? 'has-data' : ''"
|
||||
:columns="daughterColumns"
|
||||
:dataSource="daughterList"
|
||||
:pagination="false"
|
||||
:scroll="{ y: 123 }"
|
||||
></a-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nuclide-library-settings-main">
|
||||
<a-form-model layout="inline">
|
||||
<a-form-model-item label="Name">
|
||||
<div class="nuclide-name">Co57</div>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="Half Life">
|
||||
271.740D
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="Half Life Err">
|
||||
0.022%
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="Lines">
|
||||
14
|
||||
</a-form-model-item>
|
||||
</a-form-model>
|
||||
<!-- 主体表格 -->
|
||||
<a-table
|
||||
size="small"
|
||||
:class="mainList.length ? 'has-data' : ''"
|
||||
:columns="mainColumns"
|
||||
:dataSource="mainList"
|
||||
:pagination="false"
|
||||
:scroll="{ y: 175 }"
|
||||
>
|
||||
</a-table>
|
||||
</div>
|
||||
<div class="nuclide-library-settings-operation">
|
||||
<a-space :size="10">
|
||||
<span>
|
||||
Energy:
|
||||
</span>
|
||||
<a-input></a-input>
|
||||
<a-input-number></a-input-number>
|
||||
<a-button type="primary">Search</a-button>
|
||||
</a-space>
|
||||
<a-space :size="10">
|
||||
<a-button type="primary">Reset</a-button>
|
||||
<a-button type="primary" @click="visible = false">Close</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</custom-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ModalMixin from '@/mixins/ModalMixin'
|
||||
import TitleOverBoarder from '../TitleOverBoarder.vue'
|
||||
|
||||
// 右上角表格配置
|
||||
const daughterColumns = [
|
||||
{
|
||||
title: 'Name',
|
||||
dataIndex: 'name',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: 'Ratio',
|
||||
dataIndex: 'ratio',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: 'Status',
|
||||
dataIndex: 'status',
|
||||
align: 'center'
|
||||
}
|
||||
]
|
||||
|
||||
// 主体表格配置
|
||||
const mainColumns = [
|
||||
{
|
||||
title: 'Id',
|
||||
dataIndex: 'id'
|
||||
},
|
||||
{
|
||||
title: 'Full Name',
|
||||
dataIndex: 'fullName'
|
||||
},
|
||||
{
|
||||
title: 'Energy(keV)',
|
||||
dataIndex: 'energy'
|
||||
},
|
||||
{
|
||||
title: 'Energy Uncert(%)',
|
||||
dataIndex: 'energyUncert'
|
||||
},
|
||||
{
|
||||
title: 'Yield',
|
||||
dataIndex: 'yield'
|
||||
},
|
||||
{
|
||||
title: 'Yield Uncert(%)',
|
||||
dataIndex: 'yieldUncert'
|
||||
},
|
||||
{
|
||||
title: 'KeyLine',
|
||||
dataIndex: 'keyLine'
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
mixins: [ModalMixin]
|
||||
mixins: [ModalMixin],
|
||||
components: {
|
||||
TitleOverBoarder
|
||||
},
|
||||
data() {
|
||||
this.daughterColumns = daughterColumns
|
||||
this.mainColumns = mainColumns
|
||||
return {
|
||||
nuclideList: [
|
||||
{
|
||||
id: 1,
|
||||
title: 'Ac228'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'Ag106M'
|
||||
}
|
||||
],
|
||||
currNuclide: {}, // 当前选中的Nuclide
|
||||
daughterList: [
|
||||
{
|
||||
name: 'name',
|
||||
ratio: 'ratio',
|
||||
status: 'status'
|
||||
}
|
||||
],
|
||||
mainList: [
|
||||
{
|
||||
id: 'id',
|
||||
fullName: 'fullName',
|
||||
energy: 'energy',
|
||||
energyUncert: 'energyUncert',
|
||||
yield: 'yield',
|
||||
yieldUncert: 'yieldUncert',
|
||||
keyLine: 'keyLine'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleNuclideItemClick(item) {
|
||||
this.currNuclide = item
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
<style lang="less" scoped>
|
||||
.nuclide-library {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
|
||||
&-list {
|
||||
padding: 5px;
|
||||
width: 150px;
|
||||
height: 502px;
|
||||
overflow: auto;
|
||||
background-color: #275466;
|
||||
|
||||
&-item {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
padding: 0 4px;
|
||||
cursor: pointer;
|
||||
|
||||
&.active {
|
||||
background-color: #296d81;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-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;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
.nuclide-name {
|
||||
background-color: #285367;
|
||||
padding: 0 3px;
|
||||
}
|
||||
|
||||
&-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
|
||||
::v-deep {
|
||||
.ant-form-item {
|
||||
&-label {
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
&-control {
|
||||
line-height: 26px;
|
||||
|
||||
&-wrapper {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -33,6 +33,7 @@ export default {
|
|||
}
|
||||
|
||||
&-content {
|
||||
height: 100%;
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -199,7 +199,7 @@ export default {
|
|||
dataProcessingLogModalVisible: false, // Log -> Data Processing Log 弹窗
|
||||
|
||||
configUserLibModalVisible: false, // NuclideLibrary -> Config User Library 弹窗
|
||||
nuclideLibraryModalVisible: true // NuclideLibrary -> Nuclide Library 弹窗
|
||||
nuclideLibraryModalVisible: false // NuclideLibrary -> Nuclide Library 弹窗
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user