cesium-map-object/ruoyi-ui/src/views/dialogs/ExternalParamsDialog.vue

<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() {
      if (!this.formData.routePath) {
        this.$message.warning('请先选择航路数据文件');
        return;
      }
      this.$message.success('航路数据导入成功');
      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>