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

<template>
  <custom-modal v-model="visible" :width="1280" title="Energy Calibration" :footer="null">
    <a-spin :spinning="isLoading">
      <div class="energy-calibration">
        <div class="left">
          <!-- Calibration Data -->
          <title-over-border 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="Channel">
                  <a-input></a-input>
                </a-form-model-item>
                <a-form-model-item label="Energy">
                  <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-button type="primary">Apply</a-button>
                </div>
              </div>
            </div>
          </title-over-border>
          <!-- Equation -->
          <title-over-border class="mt-20" title="Equation">
            <div class="equation" v-html="equation"></div>
          </title-over-border>
          <!-- curve -->
          <title-over-border class="mt-20" title="curve">
            <div class="curve">
              <custom-chart :option="option" />
            </div>
          </title-over-border>
        </div>
        <div class="right">
          <title-over-border title="Data Source" style="height: 100%">
            <div class="data-source">
              <div class="content">
                <div class="item" v-for="(item, index) in dataSourceList" :key="index">
                  {{ item }}
                </div>
              </div>
              <div class="footer mt-20">
                <a-button type="primary">Set to Current</a-button>
                <div class="mt-20">CallUpdate2</div>
              </div>
            </div>
          </title-over-border>
        </div>
      </div>
    </a-spin>
  </custom-modal>
</template>

<script>
import ModalMixin from '@/mixins/ModalMixin'
import TitleOverBorder from '../TitleOverBorder.vue'
import CustomChart from '@/components/CustomChart/index.vue'
import { getAction } from '@/api/manage'
import { cloneDeep } from 'lodash'

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

const initialOption = {
  grid: {
    top: 20,
    right: 20,
    bottom: 50,
    left: 70
  },
  title: {
    text: 'Channel',
    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: 'keV',
    nameLocation: 'center',
    nameGap: 50,
    nameTextStyle: {
      color: '#8FD4F8',
      fontSize: 14
    }
  },
  series: [
    {
      type: 'line',
      symbol: 'square',
      itemStyle: {
        color: '#FF0000' // 设置符号的颜色
      },
      lineStyle: {
        color: '#C2CC11' // 设置折线的颜色
      },
      data: [
        [42, 0],
        [100, 0.2],
        [978, 0.1]
      ]
    }
  ]
}

export default {
  components: { TitleOverBorder, CustomChart },
  mixins: [ModalMixin],
  props: {
    sampleId: {
      type: Number
    }
  },
  data() {
    this.columns = columns
    return {
      isLoading: false,
      equation: '',
      dataSourceList: [],
      list: [],
      option: cloneDeep(initialOption)
    }
  },
  methods: {
    async getData() {
      try {
        this.isLoading = true
        const { success, result, message } = await getAction('/gamma/energyCalibration', {
          sampleId: this.sampleId
        })
        this.isLoading = false
        if (success) {
          console.log('%c [  ]-220', 'font-size:13px; background:pink; color:#bf2c9f;', result)
          const { AllData, equation, list_dataSource, param, table, uncert } = result

          this.dataSourceList = list_dataSource
          this.equation = equation
          this.list = table
        } else {
          this.$message.error(message)
        }
      } catch (error) {
        console.error(error)
      }
    },

    beforeModalOpen() {
      this.getData()
    }
  }
}
</script>

<style lang="less" scoped>
.energy-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: 40px;
      line-height: 32px;
      text-align: center;
      background-color: #1b5465;
    }

    .curve {
      height: 400px;
    }
  }

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

    .data-source {
      .content {
        height: 330px;
        background-color: #275466;
        overflow: auto;

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

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

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

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