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

<template>
  <custom-modal v-model="visible" :width="1280" title="Energy Calibration" :footer="null" destroy-on-close>
    <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 v-model="model.channel"></a-input>
                </a-form-model-item>
                <a-form-model-item label="Energy">
                  <a-input v-model="model.energy"></a-input>
                </a-form-model-item>
                <a-form-model-item :label="' '">
                  <a-button type="primary" @click="handleInsert">Insert</a-button>
                </a-form-model-item>
                <a-form-model-item :label="' '">
                  <a-button type="primary" @click="handleModify">Modify</a-button>
                </a-form-model-item>
                <a-form-model-item :label="' '">
                  <a-button type="primary" @click="handleDelete">Delete</a-button>
                </a-form-model-item>
              </a-form-model>
              <!-- 表格 -->
              <custom-table
                :columns="columns"
                :list="list"
                :pagination="false"
                size="small"
                :class="list.length ? 'has-data' : ''"
                :scroll="{ y: 182 }"
                :selectedRowKeys.sync="selectedRowKeys"
                :canDeselect="false"
                @rowClick="handleRowClick"
              ></custom-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"
                  :class="item == currSelectedDataSource? 'active': ''"
                  v-for="(item, index) in dataSourceList"
                  :key="index"
                  @click="handleDataSourceClick(item)"
                >
                  {{ item }}
                </div>
              </div>
              <div class="footer mt-20">
                <a-button type="primary" @click="handleSetToCurrent">Set to Current</a-button>
                <div class="mt-20">{{ appliedDataSource }}</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'
import { buildLineSeries } from '@/utils/chartHelper'

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: 1,
    max: 'dataMax',
    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: []
}

export default {
  components: { TitleOverBorder, CustomChart },
  mixins: [ModalMixin],
  props: {
    sampleId: {
      type: Number
    }
  },
  data() {
    this.columns = columns
    return {
      isLoading: false,
      equation: '',
      dataSourceList: [],
      list: [],
      option: cloneDeep(initialOption),
      selectedRowKeys: [],
      model: {},
      currSelectedDataSource: '',
      appliedDataSource: ''
    }
  },
  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
          const [linePoint, scatterPoint] = AllData

          this.dataSourceList = [...list_dataSource, 'other']
          this.currSelectedDataSource = list_dataSource[0]
          this.appliedDataSource = list_dataSource[0]

          this.equation = equation

          table.forEach((item, index) => {
            item.id = index
          })
          this.list = table

          const series = []
          series.push(
            buildLineSeries(
              'LineSeries',
              linePoint.pointlist.map(({ x, y }) => [x, y]),
              `rgb(${linePoint.color})`
            )
          )
          series.push({
            type: 'scatter',
            data: scatterPoint.pointlist.map(({ x, y }) => {
              return {
                value: [x, y],
                itemStyle: {
                  color: scatterPoint.color,
                  borderWidth: 0
                }
              }
            }),
            emphasis: {
              disabled: true
            },
            animation: false,
            zlevel: 20
          })
          this.option.series = series
        } else {
          this.$message.error(message)
        }
      } catch (error) {
        console.error(error)
      }
    },

    beforeModalOpen() {
      this.getData()
    },

    // 表格单行点击
    handleRowClick(row, index) {
      this.model = cloneDeep(row)
      this.currSelectedIndex = index
    },

    // 插入
    handleInsert() {},

    // 修改
    handleModify() {},

    // 删除
    handleDelete() {},

    // 右侧DataSource中的选项点击
    handleDataSourceClick(item) {
      this.currSelectedDataSource = item
    },

    handleSetToCurrent() {
      this.appliedDataSource = this.currSelectedDataSource
    }
  }
}
</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;
          padding: 0 5px;
          cursor: pointer;

          &.active {
            background-color: #296d81;
          }
        }
      }

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

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

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