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

<template>
  <custom-modal v-model="visible" :width="1280" title="Efficiency Calibration" :footer="null">
    <div class="efficiency-calibration">
      <div class="left">
        <!-- Calibration Data -->
        <title-over-boarder title="Calibration Data">
          <div class="calibration-data">
            <a-form-model
              :colon="false"
              :labelCol="{
                style: {
                  width: '70px',
                  textAlign: 'left',
                  flexShrink: 0
                }
              }"
              :wrapperCol="{
                style: {
                  flex: 1
                }
              }"
            >
              <a-form-model-item label="Energy">
                <a-input></a-input>
              </a-form-model-item>
              <a-form-model-item label="Efficiency">
                <a-input></a-input>
              </a-form-model-item>
              <a-form-model-item :label="' '">
                <a-button type="primary">Insert</a-button>
              </a-form-model-item>
              <a-form-model-item :label="' '">
                <a-button type="primary">Modify</a-button>
              </a-form-model-item>
              <a-form-model-item :label="' '">
                <a-button type="primary">Delete</a-button>
              </a-form-model-item>
            </a-form-model>
            <!-- 表格 -->
            <a-table
              :columns="columns"
              :dataSource="list"
              :pagination="false"
              :class="list.length ? 'has-data' : ''"
              :scroll="{ y: 182 }"
            ></a-table>
            <!-- 表格结束 -->
            <div class="operators">
              <div>
                <a-button type="primary">Call</a-button>
                <a-button type="primary">Save</a-button>
              </div>
              <div>
                <a-select :value="''">
                  <a-select-option value="">
                    Interpolation
                  </a-select-option>
                </a-select>
                <a-button type="primary">Apply</a-button>
              </div>
            </div>
          </div>
        </title-over-boarder>
        <!-- Equation -->
        <title-over-boarder class="mt-20" title="Equation">
          <div class="equation">
            Efficiency = 59.541 + (88.034 - 59.541) * (E - 1)/ (0.058243 - 1)
          </div>
        </title-over-boarder>
        <!-- curve -->
        <title-over-boarder class="mt-20" title="curve">
          <div class="curve">
            <custom-chart :option="option" />
          </div>
        </title-over-boarder>
      </div>
      <div class="right">
        <title-over-boarder title="Data Source" style="height: 100%">
          <div class="data-source">
            <div class="data-source-main">
              <div class="title">PHD</div>
              <div class="content"></div>
            </div>
            <div class="footer mt-20">
              <a-button type="primary">Set to Current</a-button>
              <div class="mt-20">PHD</div>
            </div>
          </div>
        </title-over-boarder>
      </div>
    </div>
  </custom-modal>
</template>

<script>
import ModalMixin from '@/mixins/ModalMixin'
import TitleOverBoarder from '../TitleOverBoarder.vue'
import CustomChart from '@/components/CustomChart/index.vue'

const columns = [
  {
    title: 'Energy(keV)',
    dataIndex: 'energy'
  },
  {
    title: 'Efficiency',
    dataIndex: 'efficiency'
  },
  {
    title: 'Fit',
    dataIndex: 'fit'
  },
  {
    title: 'Delta(%)',
    dataIndex: 'delta'
  }
]

const initialOption = {
  grid: {
    top: 20,
    right: 20,
    bottom: 50,
    left: 70
  },
  title: {
    text: 'Energy(keV)',
    textStyle: {
      color: '#8FD4F8',
      fontSize: 14,
      fontWeight: 'normal'
    },
    right: 10,
    bottom: 0
  },
  xAxis: {
    min: 42,
    max: 2740,
    axisLabel: {
      color: '#fff'
    },
    axisLine: {
      lineStyle: {
        color: '#fff'
      }
    },
    splitLine: {
      show: false
    }
  },
  yAxis: {
    axisLabel: {
      color: '#fff'
    },
    axisTick: {
      show: false
    },
    axisLine: {
      lineStyle: {
        color: '#fff'
      }
    },
    splitLine: {
      show: false
    },
    name: 'Efficiency',
    nameLocation: 'center',
    nameGap: 50,
    nameTextStyle: {
      color: '#8FD4F8',
      fontSize: 14
    }
  },
  series: [
    {
      type: 'line',
      itemStyle: {
        color: '#EDF005'
      },
      data: [
        [42, 0],
        [100, 0.2],
        [978, 0.1]
      ],
      color: 'red'
    }
  ]
}

export default {
  components: { TitleOverBoarder, CustomChart },
  mixins: [ModalMixin],
  data() {
    this.columns = columns
    return {
      list: [
        {
          energy: 'energy',
          efficiency: 'efficiency',
          fit: 'fit',
          delta: 'delta'
        }
      ],
      option: initialOption
    }
  }
}
</script>

<style lang="less" scoped>
.efficiency-calibration {
  display: flex;

  .left {
    flex: 1;

    .calibration-data {
      display: flex;
      gap: 20px;

      .ant-form {
        width: 25%;

        ::v-deep {
          .ant-form-item {
            margin-bottom: 15px;

            &-label,
            &-control {
                line-height: 32px;
            }

            &:last-child {
              margin-bottom: 0;
            }
          }
        }

        .ant-btn {
          width: 100%;
        }
      }

      .ant-table-wrapper {
        width: 50%;

        &.has-data {
          ::v-deep {
            .ant-table-body {
              height: 182px;
              background-color: #06282a;
            }
          }
        }

        ::v-deep {
          .ant-table-placeholder {
            height: 183px;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
      }

      .operators {
        width: 25%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .ant-select {
          width: 100%;
        }
        .ant-btn {
          width: 100%;

          &:last-child {
            margin-top: 10px;
          }
        }
      }
    }

    .equation {
      height: 32px;
      line-height: 32px;
      text-align: center;
      background-color: #1b5465;
    }

    .curve {
      height: 300px;
    }
  }

  .right {
    width: 20%;
    margin-left: 20px;

    .data-source {
      .title {
        height: 32px;
        line-height: 32px;
        background-color: #296d81;
        padding: 0 5px;
      }

      .content {
        height: 300px;
        background-color: #275466;
      }

      .footer {
        .ant-btn {
          width: 100%;
        }

        > div {
          text-align: center;
          height: 32px;
          line-height: 32px;
          background-color: #285367;
        }
      }
    }
  }
}

.mt-20 {
  margin-top: 20px;
}
</style>