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-number v-model="model.edit_ps_low"></a-input-number>
                KeV
              </div>
            </a-form-model-item>
            <a-form-model-item label="ECutAnalysis_High">
              <div class="input-with-unit">
                <a-input-number v-model="model.edit_ps_high"></a-input-number>
                KeV
              </div>
            </a-form-model-item>
            <a-form-model-item label="EnergyTolerance">
              <div class="input-with-unit">
                <a-input-number v-model="model.edit_energy"></a-input-number>
                KeV
              </div>
            </a-form-model-item>
            <a-form-model-item label="PSS_low">
              <a-input-number v-model="model.edit_pss_low"></a-input-number>
            </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-number v-model="model.edit_cal_low" disabled></a-input-number>
            </a-form-model-item>
            <a-form-model-item label="CalibrationPSS_high">
              <a-input-number v-model="model.edit_cal_high" disabled></a-input-number>
            </a-form-model-item>
            <a-form-model-item>
              <a-checkbox v-model="model.checkBox_updateCal" disabled>
                Update Calibration
              </a-checkbox>
            </a-form-model-item>
            <a-form-model-item>
              <a-checkbox v-model="model.checkBox_keepPeak" disabled>
                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-number v-model="model.edit_k_back"></a-input-number>
            </a-form-model-item>
            <a-form-model-item label="k_alpha">
              <a-input-number v-model="model.edit_k_alpha"></a-input-number>
            </a-form-model-item>
            <a-form-model-item label="k_beta">
              <a-input-number v-model="model.edit_k_beta"></a-input-number>
            </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-number v-model="model.edit_bi_pss"></a-input-number>
              </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-number v-model="model.edit_riskLevelK"></a-input-number>
              </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="model.dateTime_Act"></custom-date-picker>
        </title-over-border>
        <title-over-border title="Concentration Reference Time">
          <custom-date-picker show-time v-model="model.dateTime_Conc"></custom-date-picker>
        </title-over-border>
      </div>

      <!-- 第四行 -->
      <div class="analysis-settings-item">
        <a-checkbox v-model="model.group_calPS">Apply to All Spectrums</a-checkbox>
      </div>
    </a-spin>
  </custom-modal>
</template>

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

export default {
  components: { TitleOverBorder },
  mixins: [ModalMixin, SampleDataMixin],
  data() {
    return {
      isLoading: false,
      model: {}
    }
  },
  methods: {
    async getInfo() {
      try {
        this.isLoading = true
        const { sampleId, inputFileName: fileName } = this.sampleData
        const { success, result, message } = await getAction('/gamma/configure', {
          sampleId,
          fileName
        })
        this.isLoading = false
        if (success) {
          this.model = result

          console.log('%c [  ]-137', 'font-size:13px; background:pink; color:#bf2c9f;', result)
        } else {
          this.$message.error(message)
        }
      } 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;
    margin-top: 5px;

    &: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;
            }
          }
        }

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

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