466 lines
11 KiB
Vue
466 lines
11 KiB
Vue
|
<template>
|
||
|
|
<custom-modal v-model="visible" title="Korsum" :width="1120" :footer="null">
|
||
|
|
<div class="korsum">
|
||
|
|
<!-- 输入开始 -->
|
||
|
|
<title-over-boarder 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-boarder>
|
||
|
|
<!-- 输入结束 -->
|
||
|
|
|
||
|
|
<!-- 输出开始 -->
|
||
|
|
<title-over-boarder 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-boarder>
|
||
|
|
<!-- 输出结束 -->
|
||
|
|
</div>
|
||
|
|
</custom-modal>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import TitleOverBoarder from '../TitleOverBoarder.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: { TitleOverBoarder },
|
||
|
|
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>
|