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"
  >
    <a-spin :spinning="isLoading">
      <!-- 第一行 -->
      <div class="analysis-settings-item">
        <title-over-border 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-border>
        <title-over-border 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-border>
      </div>

      <!-- 第二行 -->
      <div class="analysis-settings-item">
        <title-over-border 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-border>
        <div>
          <a-form-model :colon="false" :labelCol="{ style: { width: '150px' } }">
            <title-over-border title="BaseImprove">
              <a-form-model-item label="BaseImprovePSS">
                <a-input></a-input>
              </a-form-model-item>
            </title-over-border>
            <title-over-border title="LC Computing" style="margin-top: 20px">
              <a-form-model-item label="RiskLevelK">
                <a-input></a-input>
              </a-form-model-item>
            </title-over-border>
          </a-form-model>
        </div>
      </div>

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

<script>
import { getAction } from '@/api/manage'
import TitleOverBorder from '../TitleOverBorder.vue'
import ModalMixin from '@/mixins/ModalMixin'

export default {
  components: { TitleOverBorder },
  mixins: [ModalMixin],
  props: {
    sampleId: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      isLoading: false,
      formModel: {
        activityReferenceTime: undefined,
        concentrationReferenceTime: undefined
      }
    }
  },
  methods: {
    async getInfo() {
      try {
        this.isLoading = true
        const res = await getAction('/gamma/configure', {
          sampleId: this.sampleId
        })
        this.isLoading = false
        console.log('%c [  ]-128', 'font-size:13px; background:pink; color:#bf2c9f;', res)
      } catch (error) {
        console.error(error)
      }
    },

    beforeModalOpen() {
      this.getInfo()
    },
    handleOk() {
      console.log('%c [ handleOk ]-121', 'font-size:13px; background:pink; color:#bf2c9f;')
    }
  }
}
</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>