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

<template>
  <custom-modal
    v-model="visible"
    :width="900"
    title="Analysis Settings"
    class="analysis-settings"
    :okHandler="handleOk"
  >
    <!-- 第一行 -->
    <div class="analysis-settings-item">
      <title-over-boarder title="Peak Searching">
        <a-form-model :colon="false" :labelCol="{ style: { width: '160px' } }">
          <a-form-model-item label="ECutAnalysis_Low">
            <div class="input-with-unit">
              <a-input></a-input>
              KeV
            </div>
          </a-form-model-item>
          <a-form-model-item label="ECutAnalysis_High">
            <div class="input-with-unit">
              <a-input></a-input>
              KeV
            </div>
          </a-form-model-item>
          <a-form-model-item label="EnergyTolerance">
            <div class="input-with-unit">
              <a-input></a-input>
              KeV
            </div>
          </a-form-model-item>
          <a-form-model-item label="PSS_low">
            <a-input></a-input>
          </a-form-model-item>
        </a-form-model>
      </title-over-boarder>
      <title-over-boarder title="Calibration Peak Searching">
        <a-form-model :colon="false" :labelCol="{ style: { width: '170px' } }">
          <a-form-model-item label="CalibrationPSS_low">
            <a-input></a-input>
          </a-form-model-item>
          <a-form-model-item label="CalibrationPSS_high">
            <a-input></a-input>
          </a-form-model-item>
          <a-form-model-item>
            <a-checkbox>
              Update Calibration
            </a-checkbox>
          </a-form-model-item>
          <a-form-model-item>
            <a-checkbox>
              Keep Calibration Peak Search Peaks
            </a-checkbox>
          </a-form-model-item>
        </a-form-model>
      </title-over-boarder>
    </div>

    <!-- 第二行 -->
    <div class="analysis-settings-item">
      <title-over-boarder title="Baseline Param">
        <a-form-model :colon="false" :labelCol="{ style: { width: '90px' } }">
          <a-form-model-item label="k_back">
            <a-input></a-input>
          </a-form-model-item>
          <a-form-model-item label="k_alpha">
            <a-input></a-input>
          </a-form-model-item>
          <a-form-model-item label="k_beta">
            <a-input></a-input>
          </a-form-model-item>
        </a-form-model>
      </title-over-boarder>
      <div>
        <a-form-model :colon="false" :labelCol="{ style: { width: '150px' } }">
          <title-over-boarder title="BaseImprove">
            <a-form-model-item label="BaseImprovePSS">
              <a-input></a-input>
            </a-form-model-item>
          </title-over-boarder>
          <title-over-boarder title="LC Computing" style="margin-top: 20px">
            <a-form-model-item label="RiskLevelK">
              <a-input></a-input>
            </a-form-model-item>
          </title-over-boarder>
        </a-form-model>
      </div>
    </div>

    <!-- 第三行 -->
    <div class="analysis-settings-item">
      <title-over-boarder title="Activity Reference Time">
        <custom-date-picker show-time v-model="formModel.activityReferenceTime"></custom-date-picker>
      </title-over-boarder>
      <title-over-boarder title="Concentration Reference Time">
        <custom-date-picker show-time v-model="formModel.concentrationReferenceTime"></custom-date-picker>
      </title-over-boarder>
    </div>
  </custom-modal>
</template>

<script>
import TitleOverBoarder from '../TitleOverBoarder.vue'
export default {
  components: { TitleOverBoarder },
  props: {
    value: {
      type: Boolean
    }
  },
  data() {
    return {
      formModel: {
        activityReferenceTime: undefined,
        concentrationReferenceTime: undefined
      }
    }
  },
  methods: {
    handleOk() {
      console.log('%c [ handleOk ]-121', 'font-size:13px; background:pink; color:#bf2c9f;')
    }
  },
  computed: {
    visible: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.analysis-settings {
  &-item {
    display: flex;

    &:not(:first-child) {
      margin-top: 20px;
    }

    > div {
      flex: 1;

      &:first-child {
        margin-right: 20px;
      }
    }

    .ant-form {
      &-item {
        margin-bottom: 0;

        &:not(:last-child) {
          margin-bottom: 10px;
        }

        ::v-deep {
          .ant-form-item {
            &-label {
              text-align: left;

              label {
                font-size: 16px;
              }
            }

            &-control-wrapper {
              flex: 1;
            }
          }
        }

        .ant-input {
          height: 26px;
        }

        .input-with-unit {
          display: flex;
          align-items: center;

          .ant-input {
            margin-right: 10px;
          }
        }
      }
    }
  }
}
</style>