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

<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&gt;Thermal_spectrum</a-radio>
              <a-radio>F&gt;Fission_spectrum</a-radio>
              <a-radio>H-&gt;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>