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

<template>
  <custom-modal v-model="visible" title="Korsum" :width="1120" :footer="null">
    <div class="korsum">
      <!-- 输入开始 -->
      <title-over-border title="Input">
        <div class="korsum-input">
          <!-- 公式部分 -->
          <a-form-model
            class="korsum-input-formula"
            :labelCol="{
              style: {
                width: '110px'
              }
            }"
          >
            <a-form-model-item label="Total Effi = exp(">
              <!-- 第一行 -->
              <div>
                <a-input-number v-model="formula.totalEffi[0]"></a-input-number>
                <span class="operator">* Er + </span>
                <a-input-number v-model="formula.totalEffi[1]"></a-input-number>
                <span class="operator">+ </span>
              </div>
              <!-- 第二行 -->
              <div>
                <a-input-number v-model="formula.totalEffi[2]"></a-input-number>
                <span class="operator">/ Er + </span>
                <a-input-number v-model="formula.totalEffi[3]"></a-input-number>
                <span class="operator">/ Er <sup>2</sup> + </span>
              </div>
              <!-- 第三行 -->
              <div>
                <a-input-number v-model="formula.totalEffi[4]"></a-input-number>
                <span class="operator"> / Er <sup>3</sup> + </span>
                <a-input-number v-model="formula.totalEffi[5]"></a-input-number>
                <span class="operator">/ Er <sup>4</sup> ) </span>
              </div>
            </a-form-model-item>
            <a-form-model-item label="Efficiency = exp(">
              <!-- 第一行 -->
              <div>
                <a-input-number v-model="formula.efficiency[0]"></a-input-number>
                <span class="operator">* Er + </span>
                <a-input-number v-model="formula.efficiency[1]"></a-input-number>
                <span class="operator">+ </span>
              </div>
              <!-- 第二行 -->
              <div>
                <a-input-number v-model="formula.efficiency[2]"></a-input-number>
                <span class="operator">/ Er + </span>
                <a-input-number v-model="formula.efficiency[3]"></a-input-number>
                <span class="operator">/ Er <sup>2</sup> + </span>
              </div>
              <!-- 第三行 -->
              <div>
                <a-input-number v-model="formula.efficiency[4]"></a-input-number>
                <span class="operator"> / Er <sup>3</sup> + </span>
                <a-input-number v-model="formula.efficiency[5]"></a-input-number>
                <span class="operator">/ Er <sup>4</sup> ) </span>
              </div>
            </a-form-model-item>
          </a-form-model>
          <!-- 公式结束 -->

          <!-- 标题 -->
          <p class="korsum-input-title">
            Input
          </p>
          <!-- 标题结束 -->

          <!-- 表格开始 -->
          <a-table
            class="korsum-input-table"
            :class="list.length ? 'has-data' : ''"
            :columns="columns"
            :dataSource="list"
            :scroll="{ y: 288 }"
            :pagination="false"
          >
            <template slot="energy" slot-scope="text, record">
              <a-input-number v-model="record.energy"></a-input-number>
            </template>
            <template slot="totalEfficiency" slot-scope="text, record">
              <a-input-number v-model="record.totalEfficiency"></a-input-number>
            </template>
            <template slot="peakEfficiency" slot-scope="text, record">
              <a-input-number v-model="record.peakEfficiency"></a-input-number>
            </template>
            <template slot="uncertainty" slot-scope="text, record">
              <a-input-number v-model="record.uncertainty"></a-input-number>
            </template>
          </a-table>
          <!-- 表格结束 -->

          <!-- 按钮开始 -->
          <div class="korsum-input-buttons">
            <a-button type="primary" @click="handleAnalyze">Analyse</a-button>
            <a-button type="primary" @click="handleExit">Exit</a-button>
          </div>
          <!-- 按钮结束 -->
        </div>
      </title-over-border>
      <!-- 输入结束 -->

      <!-- 输出开始 -->
      <title-over-border title="Output">
        <div class="korsum-output">
          <div class="korsum-output-main">
            <div class="korsum-output-list">
              <div
                class="korsum-output-list-item"
                :class="selectedItem == item ? 'active' : ''"
                v-for="(item, index) in outputList"
                :key="index"
                @click="handleOutputItemClick(item)"
              >
                {{ item.title }}
              </div>
            </div>
            <a-table
              class="korsum-output-table"
              :columns="outputColumns"
              :dataSource="outputTableList"
              :class="outputTableList.length ? 'has-data' : ''"
              :scroll="{ y: 584 }"
              :pagination="false"
            ></a-table>
          </div>

          <div class="korsum-output-operation">
            <div class="left">
              <a-input v-model="filterWord"></a-input>
            </div>
            <div class="right">
              <a-button type="primary" @click="handleExport">Export to Excel</a-button>
            </div>
          </div>
        </div>
      </title-over-border>
      <!-- 输出结束 -->
    </div>
  </custom-modal>
</template>

<script>
import TitleOverBorder from '../TitleOverBorder.vue'

const columns = [
  {
    title: 'Energy',
    dataIndex: 'energy',
    scopedSlots: {
      customRender: 'energy'
    }
  },
  {
    title: 'Total Efficiency',
    dataIndex: 'totalEfficiency',
    scopedSlots: {
      customRender: 'totalEfficiency'
    }
  },
  {
    title: 'Peak Efficiency',
    dataIndex: 'peakEfficiency',
    scopedSlots: {
      customRender: 'peakEfficiency'
    }
  },
  {
    title: 'Uncertainty(%)',
    dataIndex: 'uncertainty',
    scopedSlots: {
      customRender: 'uncertainty'
    }
  }
]

const outputColumns = [
  {
    title: 'Energy',
    dataIndex: 'energy'
  },
  {
    title: 'Correct Factor',
    dataIndex: 'correctFactor'
  },
  {
    title: 'Uncertainty(%)',
    dataIndex: 'uncertainty'
  }
]
export default {
  components: { TitleOverBorder },
  props: {
    value: {
      type: Boolean
    }
  },
  data() {
    this.columns = columns
    this.outputColumns = outputColumns
    return {
      formula: {
        totalEffi: [0, 0, 0, 0, 0, 0],
        efficiency: [0, 0, 0, 0, 0, 0]
      },
      list: [
        {
          id: 1,
          energy: 10,
          totalEfficiency: 0.005,
          peakEfficiency: 0.002,
          uncertainty: 10.0
        },
        {
          id: 2,
          energy: 10,
          totalEfficiency: 0.005,
          peakEfficiency: 0.002,
          uncertainty: 10.0
        }
      ],
      selectedItem: {}, // output中左侧选中的项
      outputTableList: [], // output中表格列表数据

      filterWord: '' // 筛选
    }
  },
  methods: {
    // 分析
    handleAnalyze() {
      console.log('%c [ 分析 ]-178', 'font-size:13px; background:pink; color:#bf2c9f;')
    },

    // 退出
    handleExit() {
      this.visible = false
    },

    // output栏点击左侧列表
    handleOutputItemClick(item) {
      this.selectedItem = item
      this.outputTableList = item.list
    },

    // 导出到excel
    handleExport() {
      console.log('%c [ 导出到excel ]-246', 'font-size:13px; background:pink; color:#bf2c9f;')
    }
  },
  computed: {
    visible: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    },
    outputList() {
      const list = [
        {
          id: 1,
          title: 'SN-125',
          list: [
            {
              id: 12,
              energy: 'energy',
              correctFactor: 'correctFactor',
              uncertainty: 'uncertainty'
            }
          ]
        },
        {
          id: 2,
          title: 'EU-157',
          list: [
            {
              id: 12,
              energy: 'energy',
              correctFactor: 'correctFactor',
              uncertainty: 'uncertainty'
            }
          ]
        }
      ]

      return list.filter(item => item.title.toLowerCase().includes(this.filterWord.toLowerCase()))
    }
  }
}
</script>

<style lang="less" scoped>
::v-deep {
  .title-over-border-content {
    height: 711px;
  }
}

.korsum {
  display: flex;
  gap: 20px;

  .title-over-border {
    flex: 1;
  }

  &-input {
    &-formula {
      ::v-deep {
        .ant-form-item {
          margin-bottom: 10px;

          &-label {
            ::after {
              content: ' ';
              margin: 0 2px;
            }
            > label {
              color: #fff;
            }
          }
        }
      }

      .ant-input-number {
        width: 120px;
      }

      .operator {
        display: inline-block;
        width: 46px;
        margin: 0 5px;
      }
    }

    &-title {
      height: 32px;
      line-height: 32px;
      text-align: center;
      background-color: @primary-color;
    }

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

      ::v-deep {
        .ant-table {
          font-size: 14px;
        }

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

      .ant-input-number {
        height: 26px;

        ::v-deep {
          .ant-input-number-input {
            height: 26px;
          }
        }
      }
    }

    &-buttons {
      margin-top: 10px;
      display: flex;
      gap: 20px;

      .ant-btn {
        flex: 1;
      }
    }
  }

  &-output {
    height: 100%;
    display: flex;
    flex-direction: column;

    &-main {
      display: flex;
      gap: 20px;
      flex: 1;
    }

    &-list {
      width: 120px;
      height: 619px;
      background: #275466;
      padding: 5px;
      overflow: auto;

      &-item {
        height: 32px;
        line-height: 32px;
        padding: 0 4px;
        cursor: pointer;

        &.active {
          background-color: @primary-color;
        }
      }
    }

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

      ::v-deep {
        .ant-table {
          font-size: 14px;
        }

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

    &-operation {
      margin-top: 20px;
      display: flex;
      gap: 20px;

      .left {
        width: 120px;
      }

      .right {
        flex: 1;

        .ant-btn {
          width: 100%;
        }
      }
    }
  }
}
</style>