You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
285 lines
8.5 KiB
285 lines
8.5 KiB
<template>
|
|
<div v-if="value" class="external-params-dialog">
|
|
<div class="dialog-content">
|
|
<div class="dialog-header">
|
|
<h3>外部参数设置</h3>
|
|
<div class="close-btn" @click="closeDialog">×</div>
|
|
</div>
|
|
|
|
<div class="dialog-body">
|
|
<el-form :model="formData" ref="formRef" label-width="100px" size="small">
|
|
<el-divider content-position="left">数据卡数据</el-divider>
|
|
|
|
<el-form-item label="数据卡路径">
|
|
<el-input v-model="formData.dataCardPath" placeholder="请选择数据卡路径">
|
|
<el-button slot="append" icon="el-icon-folder-opened" @click="selectDataCardPath">浏览</el-button>
|
|
</el-input>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="数据格式">
|
|
<el-select v-model="formData.dataCardFormat" placeholder="请选择数据格式" style="width: 100%;">
|
|
<el-option label="XML" value="xml"></el-option>
|
|
<el-option label="JSON" value="json"></el-option>
|
|
<el-option label="CSV" value="csv"></el-option>
|
|
<el-option label="TXT" value="txt"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
|
|
<el-divider content-position="left">GPS数据</el-divider>
|
|
|
|
<el-form-item label="GPS数据源">
|
|
<el-select v-model="formData.gpsDataSource" placeholder="请选择GPS数据源" style="width: 100%;">
|
|
<el-option label="内置GPS" value="internal"></el-option>
|
|
<el-option label="外部GPS设备" value="external"></el-option>
|
|
<el-option label="网络GPS服务" value="network"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="GPS端口">
|
|
<el-input v-model="formData.gpsPort" placeholder="请输入GPS端口"></el-input>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="波特率">
|
|
<el-select v-model="formData.gpsBaudRate" placeholder="请选择波特率" style="width: 100%;">
|
|
<el-option label="9600" value="9600"></el-option>
|
|
<el-option label="19200" value="19200"></el-option>
|
|
<el-option label="38400" value="38400"></el-option>
|
|
<el-option label="57600" value="57600"></el-option>
|
|
<el-option label="115200" value="115200"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="刷新频率">
|
|
<el-input-number
|
|
v-model="formData.gpsRefreshRate"
|
|
:min="1"
|
|
:max="60"
|
|
placeholder="请输入刷新频率"
|
|
style="width: 100%;"
|
|
suffix="秒"
|
|
></el-input-number>
|
|
</el-form-item>
|
|
|
|
<el-divider content-position="left">导入设置</el-divider>
|
|
|
|
<el-form-item label="导入机场">
|
|
<div class="import-section">
|
|
<el-input v-model="formData.airportPath" placeholder="请选择机场数据文件">
|
|
<el-button slot="append" icon="el-icon-folder-opened" @click="selectAirportPath">浏览</el-button>
|
|
</el-input>
|
|
<el-button type="primary" size="small" @click="importAirport" style="margin-top: 8px;">导入机场</el-button>
|
|
</div>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="导入航路">
|
|
<div class="import-section">
|
|
<el-input v-model="formData.routePath" placeholder="请选择航路数据文件">
|
|
<el-button slot="append" icon="el-icon-folder-opened" @click="selectRoutePath">浏览</el-button>
|
|
</el-input>
|
|
<el-button type="primary" size="small" @click="importRoute" style="margin-top: 8px;">导入航路</el-button>
|
|
</div>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="导入地标">
|
|
<div class="import-section">
|
|
<el-input v-model="formData.landmarkPath" placeholder="请选择地标数据文件">
|
|
<el-button slot="append" icon="el-icon-folder-opened" @click="selectLandmarkPath">浏览</el-button>
|
|
</el-input>
|
|
<el-button type="primary" size="small" @click="importLandmark" style="margin-top: 8px;">导入地标</el-button>
|
|
</div>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
|
|
<div class="dialog-footer">
|
|
<el-button @click="closeDialog">取消</el-button>
|
|
<el-button type="primary" @click="saveExternalParams">保存</el-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'ExternalParamsDialog',
|
|
props: {
|
|
value: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
externalParams: {
|
|
type: Object,
|
|
default: () => ({})
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
formData: {
|
|
dataCardPath: '',
|
|
dataCardFormat: 'xml',
|
|
gpsDataSource: 'internal',
|
|
gpsPort: '',
|
|
gpsBaudRate: '9600',
|
|
gpsRefreshRate: 1,
|
|
airportPath: '',
|
|
routePath: '',
|
|
landmarkPath: ''
|
|
}
|
|
};
|
|
},
|
|
watch: {
|
|
value(newVal) {
|
|
if (newVal && this.externalParams) {
|
|
this.initFormData();
|
|
}
|
|
},
|
|
externalParams(newVal) {
|
|
if (this.value && newVal) {
|
|
this.initFormData();
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
initFormData() {
|
|
this.formData = {
|
|
dataCardPath: this.externalParams.dataCardPath || '',
|
|
dataCardFormat: this.externalParams.dataCardFormat || 'xml',
|
|
gpsDataSource: this.externalParams.gpsDataSource || 'internal',
|
|
gpsPort: this.externalParams.gpsPort || '',
|
|
gpsBaudRate: this.externalParams.gpsBaudRate || '9600',
|
|
gpsRefreshRate: this.externalParams.gpsRefreshRate || 1,
|
|
airportPath: this.externalParams.airportPath || '',
|
|
routePath: this.externalParams.routePath || '',
|
|
landmarkPath: this.externalParams.landmarkPath || ''
|
|
};
|
|
},
|
|
selectDataCardPath() {
|
|
this.$message.info('选择数据卡路径');
|
|
},
|
|
selectAirportPath() {
|
|
this.$message.info('选择机场数据文件');
|
|
},
|
|
selectRoutePath() {
|
|
this.$message.info('选择航路数据文件');
|
|
},
|
|
selectLandmarkPath() {
|
|
this.$message.info('选择地标数据文件');
|
|
},
|
|
importAirport() {
|
|
if (!this.formData.airportPath) {
|
|
this.$message.warning('请先选择机场数据文件');
|
|
return;
|
|
}
|
|
this.$message.success('机场数据导入成功');
|
|
this.$emit('import-airport', this.formData.airportPath);
|
|
},
|
|
importRoute() {
|
|
// 统一由父组件打开导入航线弹窗，用户选择 JSON 文件后导入（浏览器无法读取本地路径）
|
|
this.$emit('import-route-data', this.formData.routePath || '');
|
|
},
|
|
importLandmark() {
|
|
if (!this.formData.landmarkPath) {
|
|
this.$message.warning('请先选择地标数据文件');
|
|
return;
|
|
}
|
|
this.$message.success('地标数据导入成功');
|
|
this.$emit('import-landmark', this.formData.landmarkPath);
|
|
},
|
|
closeDialog() {
|
|
this.$emit('input', false);
|
|
},
|
|
saveExternalParams() {
|
|
this.$emit('save', {
|
|
...this.externalParams,
|
|
...this.formData
|
|
});
|
|
this.closeDialog();
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.external-params-dialog {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 1000;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
padding-top: 80px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.dialog-content {
|
|
position: relative;
|
|
background: white;
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
|
|
width: 90%;
|
|
max-width: 600px;
|
|
max-height: 90vh;
|
|
overflow-y: auto;
|
|
animation: dialog-fade-in 0.3s ease;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
@keyframes dialog-fade-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.dialog-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 16px 20px;
|
|
border-bottom: 1px solid #e8e8e8;
|
|
}
|
|
|
|
.dialog-header h3 {
|
|
margin: 0;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #333;
|
|
}
|
|
|
|
.close-btn {
|
|
font-size: 20px;
|
|
color: #999;
|
|
cursor: pointer;
|
|
transition: color 0.3s;
|
|
}
|
|
|
|
.close-btn:hover {
|
|
color: #666;
|
|
}
|
|
|
|
.dialog-body {
|
|
padding: 20px;
|
|
}
|
|
|
|
.import-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.dialog-footer {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
padding: 16px 20px;
|
|
border-top: 1px solid #e8e8e8;
|
|
gap: 10px;
|
|
}
|
|
</style>
|
|
|