feat: 文件转换功能
This commit is contained in:
parent
961f9752f6
commit
26c4b05abb
|
@ -1,6 +1,11 @@
|
|||
import { Modal } from 'ant-design-vue'
|
||||
import { saveAs } from 'file-saver'
|
||||
import JSZip from 'jszip'
|
||||
import Vue from 'vue'
|
||||
import signMd5Utils from '@/utils/encryption/signMd5Utils'
|
||||
import Axios from 'axios'
|
||||
import { ACCESS_TOKEN, TENANT_ID } from '@/store/mutation-types'
|
||||
import { message } from 'ant-design-vue'
|
||||
|
||||
/**
|
||||
* 弹窗填入文件名保存文件
|
||||
|
@ -85,3 +90,52 @@ export const zipFile = async (fileList, zipName) => {
|
|||
const content = await zip.generateAsync({ type: 'blob' })
|
||||
return new File([content], zipName, { type: content.type })
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据响应头获取文件名
|
||||
* @param {String} contentDisposition
|
||||
*/
|
||||
export function getFileNameByHeaderContentDisposition(contentDisposition) {
|
||||
const patt = new RegExp('file[Nn]ame=([^;]+\\.[^\\.;]+);*')
|
||||
contentDisposition = decodeURI(contentDisposition)
|
||||
const result = patt.exec(contentDisposition)
|
||||
let fileName = result[1]
|
||||
fileName = fileName.replace(/"/g, '')
|
||||
return fileName
|
||||
}
|
||||
|
||||
export const fetchAndDownload = async (url, data) => {
|
||||
const apiBaseUrl = window._CONFIG['domianURL'] || '/jeecg-boot'
|
||||
const sign = signMd5Utils.getSign(url, data)
|
||||
const response = await Axios({
|
||||
baseURL: apiBaseUrl,
|
||||
method: 'post',
|
||||
url,
|
||||
data: data,
|
||||
headers: {
|
||||
'X-Sign': sign,
|
||||
'X-TIMESTAMP': signMd5Utils.getTimestamp(),
|
||||
'X-Access-Token': Vue.ls.get(ACCESS_TOKEN),
|
||||
'tenant-id': Vue.ls.get(TENANT_ID)
|
||||
}
|
||||
})
|
||||
const { status, headers, data: responseData } = response
|
||||
if (status == 200) {
|
||||
if (typeof responseData == 'object') {
|
||||
const { message: msg } = responseData
|
||||
message.error(msg)
|
||||
throw new Error(msg)
|
||||
} else {
|
||||
const disposition = headers['content-disposition']
|
||||
const fileName = getFileNameByHeaderContentDisposition(disposition)
|
||||
if (typeof responseData == 'string') {
|
||||
const blob = new Blob([responseData], { type: headers['content-type'] })
|
||||
saveAs(blob, fileName)
|
||||
return fileName
|
||||
}
|
||||
}
|
||||
} else {
|
||||
message.error('This operation fails. Contact your system administrator')
|
||||
throw new Error('This operation fails. Contact your system administrator')
|
||||
}
|
||||
}
|
||||
|
|
|
@ -3,10 +3,10 @@
|
|||
<a-form-model class="settings" :labelCol="{ style: { width: '75px', textAlign: 'center' } }">
|
||||
<div class="top-left">
|
||||
<a-form-model-item label="MSG_ID">
|
||||
<a-input v-model="canberraIecImsParams.msgId"></a-input>
|
||||
<a-input v-model="params.msg_id"></a-input>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="Comment">
|
||||
<a-textarea v-model="canberraIecImsParams.comment"></a-textarea>
|
||||
<a-textarea v-model="params.comment"></a-textarea>
|
||||
</a-form-model-item>
|
||||
<title-over-border title="Collection Block">
|
||||
<a-form-model-item label="Start Time">
|
||||
|
@ -14,7 +14,7 @@
|
|||
show-time
|
||||
format="YYYY/MM/DD HH:mm:ss"
|
||||
valueFormat="YYYY/MM/DD HH:mm:ss"
|
||||
v-model="canberraIecImsParams.startTime"
|
||||
v-model="params.collect_start"
|
||||
/>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="Stop Time">
|
||||
|
@ -22,12 +22,12 @@
|
|||
show-time
|
||||
format="YYYY/MM/DD HH:mm:ss"
|
||||
valueFormat="YYYY/MM/DD HH:mm:ss"
|
||||
v-model="canberraIecImsParams.stopTime"
|
||||
v-model="params.collect_stop"
|
||||
/>
|
||||
</a-form-model-item>
|
||||
<div>
|
||||
<p>Total air volume sampled</p>
|
||||
<a-input v-model="canberraIecImsParams.totalAir"></a-input>
|
||||
<a-input-number v-model="params.air_volume" style="width: 100%;"></a-input-number>
|
||||
</div>
|
||||
</title-over-border>
|
||||
</div>
|
||||
|
@ -35,43 +35,43 @@
|
|||
<div class="header-block-list">
|
||||
<div class="header-block-item">
|
||||
<div>
|
||||
<a-checkbox></a-checkbox>
|
||||
<a-checkbox v-model="states.designatorEditable"></a-checkbox>
|
||||
Designator
|
||||
</div>
|
||||
<a-input v-model="canberraIecImsParams.designator"></a-input>
|
||||
<a-input :disabled="!states.designatorEditable" v-model="params.designator"></a-input>
|
||||
</div>
|
||||
<div class="header-block-item">
|
||||
<div>
|
||||
<a-checkbox></a-checkbox>
|
||||
<a-checkbox v-model="states.stationCodeEditable"></a-checkbox>
|
||||
Station code
|
||||
</div>
|
||||
<a-input v-model="canberraIecImsParams.stationCode"></a-input>
|
||||
<a-input :disabled="!states.stationCodeEditable" v-model="params.station"></a-input>
|
||||
</div>
|
||||
<div class="header-block-item">
|
||||
<div>
|
||||
<a-checkbox></a-checkbox>
|
||||
<a-checkbox v-model="states.detectorCodeEditable"></a-checkbox>
|
||||
Detector code
|
||||
</div>
|
||||
<a-input v-model="canberraIecImsParams.detectorCode"></a-input>
|
||||
<a-input :disabled="!states.detectorCodeEditable" v-model="params.detector"></a-input>
|
||||
</div>
|
||||
<div class="header-block-item">
|
||||
<div>
|
||||
<a-checkbox></a-checkbox>
|
||||
<a-checkbox v-model="states.sampleGeometryEditable"></a-checkbox>
|
||||
Sample geometry
|
||||
</div>
|
||||
<a-input v-model="canberraIecImsParams.sampleGeometry"></a-input>
|
||||
<a-input :disabled="!states.sampleGeometryEditable" v-model="params.sam_geom"></a-input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="system-type-and-spectrum-qualifier">
|
||||
<title-over-border title="System type" class="system-type">
|
||||
<a-radio-group v-model="canberraIecImsParams.systemType">
|
||||
<a-radio-group v-model="params.sys_type">
|
||||
<a-radio value="P">P</a-radio>
|
||||
<a-radio value="G">G</a-radio>
|
||||
<a-radio value="B">B</a-radio>
|
||||
</a-radio-group>
|
||||
</title-over-border>
|
||||
<title-over-border title="Spectrum qualifier" class="spectrum-qualifier">
|
||||
<a-radio-group v-model="canberraIecImsParams.spectrumQualifier">
|
||||
<a-radio-group v-model="params.quantity">
|
||||
<a-radio value="PREL">PREL</a-radio>
|
||||
<a-radio value="FULL">FULL</a-radio>
|
||||
</a-radio-group>
|
||||
|
@ -80,44 +80,27 @@
|
|||
<div class="identifications">
|
||||
<div>
|
||||
<p>Sample reference identification</p>
|
||||
<a-input v-model="canberraIecImsParams.sampleRef"></a-input>
|
||||
<a-input v-model="params.srId"></a-input>
|
||||
</div>
|
||||
<div>
|
||||
<p>Background measurement identification</p>
|
||||
<a-input v-model="canberraIecImsParams.backgroundMea"></a-input>
|
||||
<a-input v-model="params.bgMeasureId"></a-input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="transmit-time">
|
||||
<a-checkbox>Transmit time</a-checkbox>
|
||||
<a-checkbox v-model="states.transmitTimeEditable">Transmit time</a-checkbox>
|
||||
<custom-date-picker
|
||||
:disabled="!states.transmitTimeEditable"
|
||||
show-time
|
||||
format="YYYY/MM/DD HH:mm:ss"
|
||||
valueFormat="YYYY/MM/DD HH:mm:ss"
|
||||
v-model="canberraIecImsParams.transmitTime"
|
||||
v-model="params.transmit"
|
||||
/>
|
||||
</div>
|
||||
</title-over-border>
|
||||
</a-form-model>
|
||||
<title-over-border title="Spectrum Transfer" class="spectrum-transfer">
|
||||
<div class="title-container">
|
||||
<div class="title">
|
||||
<a-upload name="file" :multiple="true" :showUploadList="false" :beforeUpload="ortecBeforeUpload">
|
||||
<div>Canberra IEC1455(.IEC)</div>
|
||||
</a-upload>
|
||||
</div>
|
||||
<div class="data-type">
|
||||
Data type
|
||||
<div class="data-type-select">
|
||||
<custom-select :option="[{ label: 'SAMPLEPHD', value: 1 }]" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="title">
|
||||
<a-upload name="file" :multiple="true" :showUploadList="false" :beforeUpload="imsBeforeUpload">
|
||||
<div>IMS .ims .rms</div>
|
||||
</a-upload>
|
||||
</div>
|
||||
</div>
|
||||
<a-transfer :render="(item) => item.title" :data-source="dataSource" :target-keys="targetKeys" />
|
||||
<spectrum-transfer-com :params="params" :fileOptions="fileOptions" />
|
||||
</title-over-border>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -125,50 +108,58 @@
|
|||
<script>
|
||||
import TitleOverBorder from '../../../TitleOverBorder.vue'
|
||||
import moment from 'moment'
|
||||
import { cloneDeep } from 'lodash'
|
||||
import SpectrumTransferCom from './SpectrumTransferCom.vue'
|
||||
|
||||
const initParams = {
|
||||
msg_id: '123456789',
|
||||
comment: '',
|
||||
collect_start: moment(new Date()).format('YYYY/MM/DD HH:mm:ss'),
|
||||
collect_stop: moment(new Date()).format('YYYY/MM/DD HH:mm:ss'),
|
||||
air_volume: '0',
|
||||
designator: '3',
|
||||
station: 'CNL06',
|
||||
detector: 'CNL06_001',
|
||||
sam_geom: 'DISC70MMX5MM',
|
||||
sys_type: 'P',
|
||||
quantity: 'FULL',
|
||||
srId: '123456789',
|
||||
bgMeasureId: '0',
|
||||
transmit: moment(new Date()).format('YYYY/MM/DD HH:mm:ss'),
|
||||
}
|
||||
|
||||
const initStates = {
|
||||
designatorEditable: false,
|
||||
stationCodeEditable: false,
|
||||
detectorCodeEditable: false,
|
||||
sampleGeometryEditable: false,
|
||||
transmitTimeEditable: false,
|
||||
}
|
||||
|
||||
export default {
|
||||
components: { TitleOverBorder },
|
||||
components: { TitleOverBorder, SpectrumTransferCom },
|
||||
data() {
|
||||
return {
|
||||
canberraIecImsParams: {
|
||||
msgId: '123456789',
|
||||
comment: '',
|
||||
startTime: moment(new Date()).format('YYYY/MM/DD HH:mm:ss'),
|
||||
stopTime: moment(new Date()).format('YYYY/MM/DD HH:mm:ss'),
|
||||
totalAir: '0',
|
||||
designator: '3',
|
||||
stationCode: 'CNL06',
|
||||
detectorCode: 'CNL06_001',
|
||||
sampleGeometry: 'DISC70MMX5MM',
|
||||
systemType: 'P',
|
||||
spectrumQualifier: 'FULL',
|
||||
sampleRef: '123456789',
|
||||
backgroundMea: '0',
|
||||
transmitTime: moment(new Date()).format('YYYY/MM/DD HH:mm:ss'),
|
||||
},
|
||||
dataSource: [],
|
||||
targetKeys: [],
|
||||
params: cloneDeep(initParams),
|
||||
states: cloneDeep(initStates),
|
||||
fileOptions: [
|
||||
{
|
||||
title: 'Canberra IEC1455(.IEC)',
|
||||
accept: '.IEC',
|
||||
transformUrl: '/gamma/ftransit/IecToIms',
|
||||
},
|
||||
{
|
||||
title: 'IMS.ims.rms',
|
||||
accept: '.IMS,.RMS,.PHD',
|
||||
transformUrl: '/gamma/ftransit/ImsToIec'
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
ortecBeforeUpload(file, fileList) {
|
||||
console.log(file, fileList)
|
||||
this.dataSource = fileList.map((item) => {
|
||||
return {
|
||||
key: item.uid,
|
||||
title: item.name,
|
||||
}
|
||||
})
|
||||
},
|
||||
imsBeforeUpload(file, fileList) {
|
||||
console.log(file, fileList)
|
||||
let arr = fileList.map((item) => {
|
||||
return {
|
||||
key: item.uid,
|
||||
title: item.name,
|
||||
}
|
||||
})
|
||||
this.targetKeys = arr.map((item) => item.key)
|
||||
this.dataSource.push(...arr)
|
||||
beforeModalOpen() {
|
||||
this.params = cloneDeep(initParams)
|
||||
this.states = cloneDeep(initStates)
|
||||
},
|
||||
},
|
||||
}
|
||||
|
@ -261,67 +252,5 @@ export default {
|
|||
|
||||
.spectrum-transfer {
|
||||
margin-top: 20px;
|
||||
|
||||
.title-container {
|
||||
display: flex;
|
||||
|
||||
.title {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
background-color: #225a6a;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
/deep/.ant-upload {
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.data-type {
|
||||
width: 166px;
|
||||
padding: 0 8px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
z-index: 1;
|
||||
line-height: 32px;
|
||||
|
||||
&-select {
|
||||
top: 100%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
padding: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-transfer {
|
||||
margin-top: 8px;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
::v-deep {
|
||||
.ant-transfer {
|
||||
&-list {
|
||||
flex: 1;
|
||||
|
||||
&-header {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&-operation {
|
||||
width: 150px;
|
||||
|
||||
.ant-btn {
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -1,11 +1,7 @@
|
|||
<template>
|
||||
<div class="int-spc-canberra-iec-transfer">
|
||||
<div class="spectrum-transfer">
|
||||
<div class="title-container">
|
||||
<div class="title">Select .SPC File</div>
|
||||
<div class="title">Select .IEC File</div>
|
||||
</div>
|
||||
<a-transfer></a-transfer>
|
||||
<spectrum-transfer-com :fileOptions="fileOptions" :showDataType="false" />
|
||||
|
||||
<div class="desc">
|
||||
<p>使用说明</p>
|
||||
|
@ -17,64 +13,31 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import TitleOverBorder from '../../../TitleOverBorder.vue'
|
||||
import SpectrumTransferCom from './SpectrumTransferCom.vue'
|
||||
export default {
|
||||
components: { TitleOverBorder }
|
||||
components: { SpectrumTransferCom },
|
||||
data() {
|
||||
return {
|
||||
fileOptions: [
|
||||
{
|
||||
title: 'Select .SPC File',
|
||||
accept: '.SPC',
|
||||
transformUrl: '/gamma/ftransit/SpcToIec',
|
||||
},
|
||||
{
|
||||
title: 'Select .IEC File',
|
||||
accept: '.IEC',
|
||||
transformUrl: '/gamma/ftransit/IecToSpc',
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
|
||||
.spectrum-transfer {
|
||||
margin-top: 20px;
|
||||
|
||||
.title-container {
|
||||
display: flex;
|
||||
gap: 66px;
|
||||
|
||||
.title {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
background-color: #225a6a;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-transfer {
|
||||
margin-top: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
::v-deep {
|
||||
.ant-transfer {
|
||||
&-list {
|
||||
flex: 1;
|
||||
height: 400px;
|
||||
|
||||
&-header {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&-operation {
|
||||
width: 50px;
|
||||
|
||||
.ant-btn {
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
text-align: center;
|
||||
|
||||
&:first-child {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.desc {
|
||||
margin-top: 20px;
|
||||
|
||||
|
@ -82,5 +45,17 @@ export default {
|
|||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.spectrum-transfer-com {
|
||||
grid-template-rows: 30px 450px;
|
||||
grid-template-columns: 1fr 75px 1fr;
|
||||
|
||||
::v-deep {
|
||||
.operators {
|
||||
justify-content: center;
|
||||
gap: 80px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -3,10 +3,10 @@
|
|||
<a-form-model class="settings" :labelCol="{ style: { width: '75px', textAlign: 'center' } }">
|
||||
<div class="top-left">
|
||||
<a-form-model-item label="MSG_ID">
|
||||
<a-input v-model="intSpacImsParams.msgId"></a-input>
|
||||
<a-input v-model="params.msg_id"></a-input>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="Comment">
|
||||
<a-textarea v-model="intSpacImsParams.comment"></a-textarea>
|
||||
<a-textarea v-model="params.comment"></a-textarea>
|
||||
</a-form-model-item>
|
||||
<title-over-border title="Collection Block">
|
||||
<a-form-model-item label="Start Time">
|
||||
|
@ -14,7 +14,7 @@
|
|||
show-time
|
||||
format="YYYY/MM/DD HH:mm:ss"
|
||||
valueFormat="YYYY/MM/DD HH:mm:ss"
|
||||
v-model="intSpacImsParams.startTime"
|
||||
v-model="params.collect_start"
|
||||
/>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="Stop Time">
|
||||
|
@ -22,12 +22,12 @@
|
|||
show-time
|
||||
format="YYYY/MM/DD HH:mm:ss"
|
||||
valueFormat="YYYY/MM/DD HH:mm:ss"
|
||||
v-model="intSpacImsParams.stopTime"
|
||||
v-model="params.collect_stop"
|
||||
/>
|
||||
</a-form-model-item>
|
||||
<div>
|
||||
<p>Total air volume sampled</p>
|
||||
<a-input v-model="intSpacImsParams.totalAir"></a-input>
|
||||
<a-input-number v-model="params.air_volume" style="width: 100%;"></a-input-number>
|
||||
</div>
|
||||
</title-over-border>
|
||||
</div>
|
||||
|
@ -35,43 +35,43 @@
|
|||
<div class="header-block-list">
|
||||
<div class="header-block-item">
|
||||
<div>
|
||||
<a-checkbox></a-checkbox>
|
||||
<a-checkbox v-model="states.designatorEditable"></a-checkbox>
|
||||
Designator
|
||||
</div>
|
||||
<a-input v-model="intSpacImsParams.designator"></a-input>
|
||||
<a-input :disabled="!states.designatorEditable" v-model="params.designator"></a-input>
|
||||
</div>
|
||||
<div class="header-block-item">
|
||||
<div>
|
||||
<a-checkbox></a-checkbox>
|
||||
<a-checkbox v-model="states.stationCodeEditable"></a-checkbox>
|
||||
Station code
|
||||
</div>
|
||||
<a-input v-model="intSpacImsParams.stationCode"></a-input>
|
||||
<a-input :disabled="!states.stationCodeEditable" v-model="params.station"></a-input>
|
||||
</div>
|
||||
<div class="header-block-item">
|
||||
<div>
|
||||
<a-checkbox></a-checkbox>
|
||||
<a-checkbox v-model="states.detectorCodeEditable"></a-checkbox>
|
||||
Detector code
|
||||
</div>
|
||||
<a-input v-model="intSpacImsParams.detectorCode"></a-input>
|
||||
<a-input :disabled="!states.detectorCodeEditable" v-model="params.detector"></a-input>
|
||||
</div>
|
||||
<div class="header-block-item">
|
||||
<div>
|
||||
<a-checkbox></a-checkbox>
|
||||
<a-checkbox v-model="states.sampleGeometryEditable"></a-checkbox>
|
||||
Sample geometry
|
||||
</div>
|
||||
<a-input v-model="intSpacImsParams.sampleGeometry"></a-input>
|
||||
<a-input :disabled="!states.sampleGeometryEditable" v-model="params.sam_geom"></a-input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="system-type-and-spectrum-qualifier">
|
||||
<title-over-border title="System type" class="system-type">
|
||||
<a-radio-group v-model="intSpacImsParams.systemType">
|
||||
<a-radio-group v-model="params.sys_type">
|
||||
<a-radio value="P">P</a-radio>
|
||||
<a-radio value="G">G</a-radio>
|
||||
<a-radio value="B">B</a-radio>
|
||||
</a-radio-group>
|
||||
</title-over-border>
|
||||
<title-over-border title="Spectrum qualifier" class="spectrum-qualifier">
|
||||
<a-radio-group v-model="intSpacImsParams.spectrumQualifier">
|
||||
<a-radio-group v-model="params.quantity">
|
||||
<a-radio value="PREL">PREL</a-radio>
|
||||
<a-radio value="FULL">FULL</a-radio>
|
||||
</a-radio-group>
|
||||
|
@ -80,44 +80,27 @@
|
|||
<div class="identifications">
|
||||
<div>
|
||||
<p>Sample reference identification</p>
|
||||
<a-input v-model="intSpacImsParams.sampleRef"></a-input>
|
||||
<a-input v-model="params.srId"></a-input>
|
||||
</div>
|
||||
<div>
|
||||
<p>Background measurement identification</p>
|
||||
<a-input v-model="intSpacImsParams.backgroundMea"></a-input>
|
||||
<a-input v-model="params.bgMeasureId"></a-input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="transmit-time">
|
||||
<a-checkbox>Transmit time</a-checkbox>
|
||||
<a-checkbox v-model="states.transmitTimeEditable">Transmit time</a-checkbox>
|
||||
<custom-date-picker
|
||||
:disabled="!states.transmitTimeEditable"
|
||||
show-time
|
||||
format="YYYY/MM/DD HH:mm:ss"
|
||||
valueFormat="YYYY/MM/DD HH:mm:ss"
|
||||
v-model="intSpacImsParams.transmitTime"
|
||||
v-model="params.transmit"
|
||||
/>
|
||||
</div>
|
||||
</title-over-border>
|
||||
</a-form-model>
|
||||
<title-over-border title="Spectrum Transfer" class="spectrum-transfer">
|
||||
<div class="title-container">
|
||||
<div class="title">
|
||||
<a-upload name="file" :multiple="true" :showUploadList="false" :beforeUpload="ortecBeforeUpload">
|
||||
<div>ORTEC int.spc</div>
|
||||
</a-upload>
|
||||
</div>
|
||||
<div class="data-type">
|
||||
Data type
|
||||
<div class="data-type-select">
|
||||
<custom-select :option="[{ label: 'SAMPLEPHD', value: 1 }]" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="title">
|
||||
<a-upload name="file" :multiple="true" :showUploadList="false" :beforeUpload="imsBeforeUpload">
|
||||
<div>IMS .ims .rms</div>
|
||||
</a-upload>
|
||||
</div>
|
||||
</div>
|
||||
<a-transfer :render="(item) => item.title" :data-source="dataSource" :target-keys="targetKeys" />
|
||||
<spectrum-transfer-com :params="params" :fileOptions="fileOptions" />
|
||||
</title-over-border>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -125,50 +108,58 @@
|
|||
<script>
|
||||
import TitleOverBorder from '../../../TitleOverBorder.vue'
|
||||
import moment from 'moment'
|
||||
import { cloneDeep } from 'lodash'
|
||||
import SpectrumTransferCom from './SpectrumTransferCom.vue'
|
||||
|
||||
const initParams = {
|
||||
msg_id: '123456789',
|
||||
comment: '',
|
||||
collect_start: moment(new Date()).format('YYYY/MM/DD HH:mm:ss'),
|
||||
collect_stop: moment(new Date()).format('YYYY/MM/DD HH:mm:ss'),
|
||||
air_volume: '0',
|
||||
designator: '3',
|
||||
station: 'CNL06',
|
||||
detector: 'CNL06_001',
|
||||
sam_geom: 'DISC70MMX5MM',
|
||||
sys_type: 'P',
|
||||
quantity: 'FULL',
|
||||
srId: '123456789',
|
||||
bgMeasureId: '0',
|
||||
transmit: moment(new Date()).format('YYYY/MM/DD HH:mm:ss'),
|
||||
}
|
||||
|
||||
const initStates = {
|
||||
designatorEditable: false,
|
||||
stationCodeEditable: false,
|
||||
detectorCodeEditable: false,
|
||||
sampleGeometryEditable: false,
|
||||
transmitTimeEditable: false,
|
||||
}
|
||||
|
||||
export default {
|
||||
components: { TitleOverBorder },
|
||||
components: { TitleOverBorder, SpectrumTransferCom },
|
||||
data() {
|
||||
return {
|
||||
intSpacImsParams: {
|
||||
msgId: '123456789',
|
||||
comment: '',
|
||||
startTime: moment(new Date()).format('YYYY/MM/DD HH:mm:ss'),
|
||||
stopTime: moment(new Date()).format('YYYY/MM/DD HH:mm:ss'),
|
||||
totalAir: '0',
|
||||
designator: '3',
|
||||
stationCode: 'CNL06',
|
||||
detectorCode: 'CNL06_001',
|
||||
sampleGeometry: 'DISC70MMX5MM',
|
||||
systemType: 'P',
|
||||
spectrumQualifier: 'FULL',
|
||||
sampleRef: '123456789',
|
||||
backgroundMea: '0',
|
||||
transmitTime: moment(new Date()).format('YYYY/MM/DD HH:mm:ss'),
|
||||
},
|
||||
dataSource: [],
|
||||
targetKeys: [],
|
||||
params: cloneDeep(initParams),
|
||||
states: cloneDeep(initStates),
|
||||
fileOptions: [
|
||||
{
|
||||
title: 'ORTEC int.spc',
|
||||
accept: '.SPC',
|
||||
transformUrl: '/gamma/ftransit/SpcToIms',
|
||||
},
|
||||
{
|
||||
title: 'IMS.ims.rms',
|
||||
accept: '.IMS,.RMS,.PHD',
|
||||
transformUrl: '/gamma/ftransit/ImsToSpc'
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
ortecBeforeUpload(file, fileList) {
|
||||
console.log(file, fileList)
|
||||
this.dataSource = fileList.map((item) => {
|
||||
return {
|
||||
key: item.uid,
|
||||
title: item.name,
|
||||
}
|
||||
})
|
||||
},
|
||||
imsBeforeUpload(file, fileList) {
|
||||
console.log(file, fileList)
|
||||
let arr = fileList.map((item) => {
|
||||
return {
|
||||
key: item.uid,
|
||||
title: item.name,
|
||||
}
|
||||
})
|
||||
this.targetKeys = arr.map((item) => item.key)
|
||||
this.dataSource.push(...arr)
|
||||
beforeModalOpen() {
|
||||
this.params = cloneDeep(initParams)
|
||||
this.states = cloneDeep(initStates)
|
||||
},
|
||||
},
|
||||
}
|
||||
|
@ -261,67 +252,5 @@ export default {
|
|||
|
||||
.spectrum-transfer {
|
||||
margin-top: 20px;
|
||||
|
||||
.title-container {
|
||||
display: flex;
|
||||
|
||||
.title {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
background-color: #225a6a;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
/deep/.ant-upload {
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.data-type {
|
||||
width: 166px;
|
||||
padding: 0 8px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
z-index: 1;
|
||||
line-height: 32px;
|
||||
|
||||
&-select {
|
||||
top: 100%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
padding: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-transfer {
|
||||
margin-top: 8px;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
::v-deep {
|
||||
.ant-transfer {
|
||||
&-list {
|
||||
flex: 1;
|
||||
|
||||
&-header {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&-operation {
|
||||
width: 150px;
|
||||
|
||||
.ant-btn {
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -0,0 +1,255 @@
|
|||
<template>
|
||||
<div class="spectrum-transfer-com">
|
||||
<div class="title">
|
||||
<a-upload
|
||||
name="file"
|
||||
:multiple="true"
|
||||
:showUploadList="false"
|
||||
:beforeUpload="beforeLeftFileUpload"
|
||||
:accept="fileOptions[0].accept"
|
||||
>
|
||||
<div>{{ fileOptions[0].title }}</div>
|
||||
</a-upload>
|
||||
</div>
|
||||
<div class="data-type">
|
||||
<template v-if="showDataType"> Data type </template>
|
||||
</div>
|
||||
<div class="title">
|
||||
<a-upload
|
||||
name="file"
|
||||
:multiple="true"
|
||||
:showUploadList="false"
|
||||
:beforeUpload="beforeRightFileUpload"
|
||||
:accept="fileOptions[1].accept"
|
||||
>
|
||||
<div>{{ fileOptions[1].title }}</div>
|
||||
</a-upload>
|
||||
</div>
|
||||
<div class="file-list">
|
||||
<div
|
||||
class="file-item"
|
||||
:class="{ active: leftSelFileIndex == index }"
|
||||
v-for="(file, index) in leftFileList"
|
||||
:key="index"
|
||||
@click="handleFileClick('left', index)"
|
||||
>
|
||||
{{ file.name }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="operators">
|
||||
<div class="data-type-select" v-if="showDataType">
|
||||
<custom-select :options="dataTypeList" v-model="dataType" />
|
||||
</div>
|
||||
<div class="transit">
|
||||
<a-button :disabled="leftSelFileIndex == null" type="primary" @click="handleTransfer('right')">
|
||||
<a-icon type="double-right" />
|
||||
</a-button>
|
||||
</div>
|
||||
<div class="transit">
|
||||
<a-button :disabled="rightSelFileIndex == null" type="primary" @click="handleTransfer('left')">
|
||||
<a-icon type="double-left" />
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="file-list">
|
||||
<div
|
||||
class="file-item"
|
||||
:class="{ active: rightSelFileIndex == index }"
|
||||
v-for="(file, index) in rightFileList"
|
||||
:key="index"
|
||||
@click="handleFileClick('right', index)"
|
||||
>
|
||||
{{ file.name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { fetchAndDownload } from '@/utils/file'
|
||||
import { isNullOrUndefined } from '@/utils/util'
|
||||
const dataTypeList = ['SAMPLEPHD', 'BLANKPHD', 'DETBKPHD', 'CALIBPHD', 'QCPHD']
|
||||
|
||||
const rules = {
|
||||
msg_id: `MSG_ID can't be null`,
|
||||
designator: `Designator can't be null!`,
|
||||
station: `Station code can't be null!`,
|
||||
detector: `Detector code can't be null!`,
|
||||
sam_geom: `Sample geometry can't be null!`,
|
||||
srId: `Sample reference identification can't be null!`,
|
||||
air_volume: `The format of Total air volume sampled is error!`,
|
||||
}
|
||||
|
||||
export default {
|
||||
props: {
|
||||
params: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
fileOptions: {
|
||||
type: Array,
|
||||
},
|
||||
showDataType: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
this.dataTypeList = dataTypeList.map((item) => ({
|
||||
label: item,
|
||||
value: item,
|
||||
}))
|
||||
|
||||
return {
|
||||
dataType: dataTypeList[0],
|
||||
leftFileList: [],
|
||||
rightFileList: [],
|
||||
|
||||
leftSelFileIndex: null,
|
||||
rightSelFileIndex: null,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
beforeLeftFileUpload(file) {
|
||||
this.leftFileList = [...this.leftFileList, file]
|
||||
return false
|
||||
},
|
||||
|
||||
beforeRightFileUpload(file) {
|
||||
this.rightFileList = [...this.rightFileList, file]
|
||||
return false
|
||||
},
|
||||
|
||||
handleFileClick(side, index) {
|
||||
if (side == 'left') {
|
||||
this.leftSelFileIndex = index
|
||||
} else {
|
||||
this.rightSelFileIndex = index
|
||||
}
|
||||
},
|
||||
|
||||
validateForm() {
|
||||
const entries = Object.entries(this.params)
|
||||
if (entries.length) {
|
||||
for (const item of entries) {
|
||||
const [k, v] = item
|
||||
const rule = rules[k]
|
||||
if (rule) {
|
||||
// 如果这个字段需要验证
|
||||
if (typeof v == 'string' && (!v || !v.trim())) {
|
||||
this.$message.warn(rule)
|
||||
return false
|
||||
} else if (typeof v == 'object' && isNullOrUndefined(v)) {
|
||||
this.$message.warn(rule)
|
||||
return false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return true
|
||||
},
|
||||
|
||||
// 转换
|
||||
async handleTransfer(target) {
|
||||
const validate = this.validateForm()
|
||||
if (!validate) {
|
||||
return
|
||||
}
|
||||
|
||||
let url = this.fileOptions[1].transformUrl
|
||||
let file = this.rightFileList[this.rightSelFileIndex]
|
||||
const formData = new FormData()
|
||||
|
||||
if (target == 'right') {
|
||||
url = this.fileOptions[0].transformUrl
|
||||
file = this.leftFileList[this.leftSelFileIndex]
|
||||
Object.entries(this.params).forEach(([k, v]) => {
|
||||
if (['collect_start', 'collect_stop', 'transmit'].includes(k)) {
|
||||
v = v + '.0'
|
||||
}
|
||||
formData.append(k, v)
|
||||
})
|
||||
}
|
||||
|
||||
if (!file.size) {
|
||||
return
|
||||
}
|
||||
|
||||
formData.append('file', file)
|
||||
|
||||
if (this.showDataType) {
|
||||
formData.append('data_type', this.dataType)
|
||||
}
|
||||
|
||||
try {
|
||||
const fileName = await fetchAndDownload(url, formData)
|
||||
if (target == 'left') {
|
||||
this.leftFileList.push({
|
||||
name: fileName,
|
||||
})
|
||||
} else {
|
||||
this.rightFileList.push({
|
||||
name: fileName,
|
||||
})
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.spectrum-transfer-com {
|
||||
display: grid;
|
||||
grid-template-rows: 30px 175px;
|
||||
grid-template-columns: 1fr 166px 1fr;
|
||||
row-gap: 8px;
|
||||
column-gap: 10px;
|
||||
}
|
||||
|
||||
.title {
|
||||
text-align: center;
|
||||
background-color: #225a6a;
|
||||
line-height: 30px;
|
||||
/deep/.ant-upload {
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.data-type {
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.file-list {
|
||||
background-color: #225a6a;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.file-item {
|
||||
padding: 0 5px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
cursor: pointer;
|
||||
|
||||
&.active {
|
||||
background-color: #296d81;
|
||||
}
|
||||
}
|
||||
|
||||
.operators {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.transit {
|
||||
.ant-btn {
|
||||
height: 40px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<custom-modal v-model="visible" :width="1080" title="File-Format-Ftransit" :footer="null">
|
||||
<custom-modal v-model="visible" :width="1080" title="File-Format-Ftransit" :footer="null" destroy-on-close>
|
||||
<a-tabs :animated="false">
|
||||
<a-tab-pane tab="INT.SPC<=>.IMS" key="1">
|
||||
<int-spc-ims-transfer />
|
||||
|
|
|
@ -743,7 +743,6 @@ export default {
|
|||
{
|
||||
type: 'a-menu-item',
|
||||
title: 'Ftransit',
|
||||
show: this.isGamma || this.isBetaGamma,
|
||||
handler: () => (this.ftransltModalVisible = true),
|
||||
},
|
||||
{
|
||||
|
|
Loading…
Reference in New Issue
Block a user