gamma模块下 analyze korsum弹窗 右侧的table改成可编辑的表格
This commit is contained in:
任珮宇
parent
b936995317
commit
4ec2fec97b
49
src/views/spectrumAnalysis/components/Modals/EditCell.vue
Normal file
49
src/views/spectrumAnalysis/components/Modals/EditCell.vue
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
<template>
|
||||
<div class="editable-cell">
|
||||
<div v-if="editable" class="editable-cell-input-wrapper">
|
||||
<a-input ref="myInput" :value="value" @change="handleChange" @blur="handleBlur" />
|
||||
</div>
|
||||
<div v-else class="editable-cell-text-wrapper" @dblclick="handleCellClick">
|
||||
{{ value || ' ' }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
text: Number,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: this.text,
|
||||
editable: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleCellClick() {
|
||||
this.editable = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.myInput.focus()
|
||||
})
|
||||
},
|
||||
handleChange(e) {
|
||||
this.value = e.target.value
|
||||
},
|
||||
handleBlur() {
|
||||
this.editable = false
|
||||
this.$emit('change', this.value)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
/deep/.ant-input {
|
||||
padding: 0;
|
||||
}
|
||||
.editable-cell-text-wrapper {
|
||||
min-height: 32px;
|
||||
line-height: 32px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -10,8 +10,8 @@
|
|||
class="korsum-input-formula"
|
||||
:labelCol="{
|
||||
style: {
|
||||
width: '110px'
|
||||
}
|
||||
width: '110px',
|
||||
},
|
||||
}"
|
||||
>
|
||||
<a-form-model-item label="Total Effi = exp(">
|
||||
|
|
@ -64,9 +64,7 @@
|
|||
<!-- 公式结束 -->
|
||||
|
||||
<!-- 标题 -->
|
||||
<a-button type="primary" class="korsum-input-title" @click="handleInput">
|
||||
Input
|
||||
</a-button>
|
||||
<a-button type="primary" class="korsum-input-title" @click="handleInput"> Input </a-button>
|
||||
<!-- 标题结束 -->
|
||||
|
||||
<!-- 表格开始 -->
|
||||
|
|
@ -125,7 +123,15 @@
|
|||
:class="outputTableList.length ? 'has-data' : ''"
|
||||
:scroll="{ y: 584 }"
|
||||
:pagination="false"
|
||||
></a-table>
|
||||
>
|
||||
<template v-for="(col, i) in outputColumns" :slot="col.dataIndex" slot-scope="text, record, index">
|
||||
<edit-cell
|
||||
:text="parseFloat(Number(text).toPrecision(6))"
|
||||
:key="i"
|
||||
@change="onCellChange(index, col.dataIndex, $event)"
|
||||
/>
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
|
||||
<div class="korsum-output-operation">
|
||||
|
|
@ -148,58 +154,62 @@
|
|||
import ModalMixin from '@/mixins/ModalMixin'
|
||||
import TitleOverBorder from '../TitleOverBorder.vue'
|
||||
import { getAction, postAction } from '@/api/manage'
|
||||
import * as XLSX from 'xlsx';
|
||||
import * as XLSX from 'xlsx'
|
||||
import EditCell from './EditCell.vue'
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: 'Energy',
|
||||
dataIndex: 'energy',
|
||||
scopedSlots: {
|
||||
customRender: 'energy'
|
||||
}
|
||||
customRender: 'energy',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Total Efficiency',
|
||||
dataIndex: 'totalEffi',
|
||||
scopedSlots: {
|
||||
customRender: 'totalEffi'
|
||||
}
|
||||
customRender: 'totalEffi',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Peak Efficiency',
|
||||
dataIndex: 'peakEffi',
|
||||
scopedSlots: {
|
||||
customRender: 'peakEffi'
|
||||
}
|
||||
customRender: 'peakEffi',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Uncertainty(%)',
|
||||
dataIndex: 'uncertain',
|
||||
scopedSlots: {
|
||||
customRender: 'uncertain'
|
||||
}
|
||||
}
|
||||
customRender: 'uncertain',
|
||||
},
|
||||
},
|
||||
]
|
||||
|
||||
const outputColumns = [
|
||||
{
|
||||
title: 'Energy',
|
||||
dataIndex: 'energy',
|
||||
customRender: (text) => parseFloat(Number(text).toPrecision(6))
|
||||
scopedSlots: { customRender: 'energy' },
|
||||
// customRender: (text) => parseFloat(Number(text).toPrecision(6))
|
||||
},
|
||||
{
|
||||
title: 'Correct Factor',
|
||||
dataIndex: 'correctFactor',
|
||||
customRender: (text) => parseFloat(Number(text).toPrecision(6))
|
||||
scopedSlots: { customRender: 'correctFactor' },
|
||||
// customRender: (text) => parseFloat(Number(text).toPrecision(6)),
|
||||
},
|
||||
{
|
||||
title: 'Uncertainty(%)',
|
||||
dataIndex: 'uncertainty',
|
||||
customRender: (text) => parseFloat(Number(text).toPrecision(6))
|
||||
}
|
||||
scopedSlots: { customRender: 'uncertainty' },
|
||||
// customRender: (text) => parseFloat(Number(text).toPrecision(6)),
|
||||
},
|
||||
]
|
||||
export default {
|
||||
components: { TitleOverBorder },
|
||||
components: { TitleOverBorder, EditCell },
|
||||
mixins: [ModalMixin],
|
||||
data() {
|
||||
this.columns = columns
|
||||
|
|
@ -217,7 +227,7 @@ export default {
|
|||
filterWord: '', // 筛选
|
||||
|
||||
fileName: '', // save excel name
|
||||
analyseData: {} // 分析结果
|
||||
analyseData: {}, // 分析结果
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -245,7 +255,7 @@ export default {
|
|||
totalEf3: 0.111096,
|
||||
totalEf4: -0.003896,
|
||||
totalEf5: -0.000345,
|
||||
totalEf6: 0.000017
|
||||
totalEf6: 0.000017,
|
||||
}
|
||||
|
||||
this.efficiency = {
|
||||
|
|
@ -254,7 +264,7 @@ export default {
|
|||
effciency3: 0.583265,
|
||||
effciency4: -0.065884,
|
||||
effciency5: 0.003255,
|
||||
effciency6: -0.000059
|
||||
effciency6: -0.000059,
|
||||
}
|
||||
|
||||
this.getInfo()
|
||||
|
|
@ -269,9 +279,9 @@ export default {
|
|||
const { success, result, message } = await postAction('/gamma/KorSumInput', {
|
||||
...this.totalEffi,
|
||||
...this.efficiency,
|
||||
energys: this.list.map(item => item.energy)
|
||||
energys: this.list.map((item) => item.energy),
|
||||
})
|
||||
console.log(success);
|
||||
console.log(success)
|
||||
if (success) {
|
||||
this.list = result
|
||||
} else {
|
||||
|
|
@ -285,18 +295,18 @@ export default {
|
|||
// 分析
|
||||
async handleAnalyze() {
|
||||
console.log('%c [ 分析 ]-178', 'font-size:13px; background:pink; color:#bf2c9f;')
|
||||
try {
|
||||
try {
|
||||
this.isLoading = true
|
||||
const { success, result, message } = await postAction('/gamma/KorSumAnalyse', this.list)
|
||||
this.isLoading = false
|
||||
if (success) {
|
||||
this.analyseData = result
|
||||
console.log(result);
|
||||
this.analyseData = result
|
||||
console.log(result)
|
||||
} else {
|
||||
this.$message.error(message)
|
||||
}
|
||||
} catch (error) {
|
||||
this.isLoading = false;
|
||||
this.isLoading = false
|
||||
console.error(error)
|
||||
}
|
||||
},
|
||||
|
|
@ -308,73 +318,84 @@ export default {
|
|||
|
||||
// output栏点击左侧列表
|
||||
handleOutputItemClick(item) {
|
||||
if(!this.analyseData) {
|
||||
this.$message.error("Analyse Fail!")
|
||||
return false;
|
||||
if (!this.analyseData) {
|
||||
this.$message.error('Analyse Fail!')
|
||||
return false
|
||||
}
|
||||
this.selectedItem = item
|
||||
this.outputTableList = [];
|
||||
this.outputTableList = []
|
||||
|
||||
// 根据核素名获取结果集
|
||||
let data = this.analyseData[this.selectedItem]
|
||||
if(!data || data.energy.length < 1) {
|
||||
this.$message.error("Analyse Fail!")
|
||||
return false;
|
||||
let data = this.analyseData[this.selectedItem]
|
||||
if (!data || data.energy.length < 1) {
|
||||
this.$message.error('Analyse Fail!')
|
||||
return false
|
||||
}
|
||||
|
||||
let result = [];
|
||||
for(let i = 0; i < data.energy.length; i++ ) {
|
||||
|
||||
let result = []
|
||||
for (let i = 0; i < data.energy.length; i++) {
|
||||
// 将数据进行填充并
|
||||
let obj = {
|
||||
"energy": data.energy[i],
|
||||
"correctFactor" : data.factor[i],
|
||||
"uncertainty" : (data.factor[i] - 1) / 10 * 100
|
||||
energy: data.energy[i],
|
||||
correctFactor: data.factor[i],
|
||||
uncertainty: ((data.factor[i] - 1) / 10) * 100,
|
||||
}
|
||||
result.push(obj);
|
||||
result.push(obj)
|
||||
}
|
||||
|
||||
this.outputTableList = result;
|
||||
|
||||
this.outputTableList = result
|
||||
},
|
||||
onCellChange(idx, label, value) {
|
||||
console.log(this.outputTableList)
|
||||
console.log(value)
|
||||
const dataSource = [...this.outputTableList]
|
||||
const target = dataSource.find((item, index) => index == idx)
|
||||
if (target) {
|
||||
target[label] = value
|
||||
this.outputTableList = dataSource
|
||||
}
|
||||
console.log(this.outputTableList)
|
||||
},
|
||||
|
||||
// 导出到excel
|
||||
handleExport() {
|
||||
console.log('%c [ 导出到excel ]-246', 'font-size:13px; background:pink; color:#bf2c9f;')
|
||||
let _this = this
|
||||
this.$confirm({
|
||||
title: 'Please enter file name',
|
||||
content: (h) => <a-input v-model={_this.fileName} />,
|
||||
okText: 'Cancle',
|
||||
cancelText: 'Save',
|
||||
okButtonProps: { style: { backgroundColor: '#b98326', color: '#fff', borderColor: 'transparent' } },
|
||||
cancelButtonProps: { style: { color: '#fff', backgroundColor: '#31aab0', borderColor: 'transparent' } },
|
||||
onOk() {
|
||||
console.log('Cancel')
|
||||
},
|
||||
onCancel() {
|
||||
console.log(_this.fileName);
|
||||
if (_this.fileName) {
|
||||
// saveAs(blob, `${_this.fileName}`)
|
||||
// 创建工作簿
|
||||
const workbook = XLSX.utils.book_new();
|
||||
|
||||
// 创建工作表
|
||||
const worksheet = XLSX.utils.json_to_sheet(_this.outputTableList);
|
||||
|
||||
// 将工作表添加到工作簿
|
||||
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
|
||||
|
||||
// 导出Excel文件
|
||||
XLSX.writeFile(workbook, _this.fileName + ".xlsx");
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
this.$confirm({
|
||||
title: 'Please enter file name',
|
||||
content: (h) => <a-input v-model={_this.fileName} />,
|
||||
okText: 'Cancle',
|
||||
cancelText: 'Save',
|
||||
okButtonProps: { style: { backgroundColor: '#b98326', color: '#fff', borderColor: 'transparent' } },
|
||||
cancelButtonProps: { style: { color: '#fff', backgroundColor: '#31aab0', borderColor: 'transparent' } },
|
||||
onOk() {
|
||||
console.log('Cancel')
|
||||
},
|
||||
onCancel() {
|
||||
console.log(_this.fileName)
|
||||
if (_this.fileName) {
|
||||
// saveAs(blob, `${_this.fileName}`)
|
||||
// 创建工作簿
|
||||
const workbook = XLSX.utils.book_new()
|
||||
|
||||
// 创建工作表
|
||||
const worksheet = XLSX.utils.json_to_sheet(_this.outputTableList)
|
||||
|
||||
// 将工作表添加到工作簿
|
||||
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
|
||||
|
||||
// 导出Excel文件
|
||||
XLSX.writeFile(workbook, _this.fileName + '.xlsx')
|
||||
}
|
||||
},
|
||||
})
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
outputList() {
|
||||
return this.nuclideList.filter(item => item.toLowerCase().includes(this.filterWord.toLowerCase()))
|
||||
}
|
||||
}
|
||||
return this.nuclideList.filter((item) => item.toLowerCase().includes(this.filterWord.toLowerCase()))
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user