AnalysisSystemForRadionuclide_vue/src/views/spectrumAnalysis/components/Modals/NuclideLibraryModal.vue

<template>
  <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],
  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 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>