dataExchange-front/src/views/planManagement/planConfig.vue

<template>
    <div id="app">
      <el-container>
        <el-main>
          <el-button type="primary" @click="openUploadDialog">配置策略</el-button>
          <el-table :data="strategies" style="width: 100%" >
            <el-table-column prop="name" label="策略名称"></el-table-column>
            <el-table-column prop="algorithms" label="算法组合">
              <template slot-scope="scope">
                <div v-for="alg in scope.row.algorithms" :key="alg">{{ alg }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="modelAddress" label="模型地址"></el-table-column>
            <el-table-column prop="modelPort" label="模型端口"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button @click="openEditDialog(scope.row)" size="small">修改</el-button>
                <el-button @click="deleteStrategy(scope.row.id)" type="danger" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-main>
      </el-container>
  
      <!-- 上传对话框 -->
      <el-dialog title="配置策略" :visible.sync="uploadDialogVisible">
        <el-form :model="newStrategy" label-width="120px">
          <el-form-item label="策略名称">
            <el-input v-model="newStrategy.name"></el-input>
          </el-form-item>
          <el-form-item label="算法组合">
            <el-select v-model="newStrategy.algorithms" multiple placeholder="请选择算法">
              <el-option label="雷达方拦截算法" value="radar_intercept"></el-option>
              <el-option label="干扰方电子干扰算法" value="electronic_interference"></el-option>
              <el-option label="深度学习算法" value="deep_learning"></el-option>
              <el-option label="强化学习算法" value="reinforcement_learning"></el-option>
              <el-option label="雷达探测与抗干扰算法" value="radar_detection"></el-option>
              <el-option label="智能干扰机协同干扰算法" value="cooperative_interference"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="模型地址">
            <el-input v-model="newStrategy.modelAddress"></el-input>
          </el-form-item>
          <el-form-item label="模型端口">
            <el-input type="number" v-model="newStrategy.modelPort"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="uploadDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="uploadStrategy">提交</el-button>
        </span>
      </el-dialog>
  
      <!-- 修改对话框 -->
      <el-dialog title="修改策略" :visible.sync="editDialogVisible">
        <el-form :model="selectedStrategy" label-width="120px">
          <el-form-item label="策略名称">
            <el-input v-model="selectedStrategy.name"></el-input>
          </el-form-item>
          <el-form-item label="算法组合">
            <el-select v-model="selectedStrategy.algorithms" multiple placeholder="请选择算法">
              <el-option label="雷达方拦截算法" value="radar_intercept"></el-option>
              <el-option label="干扰方电子干扰算法" value="electronic_interference"></el-option>
              <el-option label="深度学习算法" value="deep_learning"></el-option>
              <el-option label="强化学习算法" value="reinforcement_learning"></el-option>
              <el-option label="雷达探测与抗干扰算法" value="radar_detection"></el-option>
              <el-option label="智能干扰机协同干扰算法" value="cooperative_interference"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="模型地址">
            <el-input v-model="selectedStrategy.modelAddress"></el-input>
          </el-form-item>
          <el-form-item label="模型端口">
            <el-input type="number" v-model="selectedStrategy.modelPort"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveChanges">保存</el-button>
        </span>
      </el-dialog>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        strategies: [
          { id: 1, name: '策略A', algorithms: ['radar_intercept', 'deep_learning'], modelAddress: 'http://localhost', modelPort: 8080 },
          { id: 2, name: '策略B', algorithms: ['electronic_interference', 'radar_detection'], modelAddress: 'http://192.168.1.1', modelPort: 9090 },
          // 更多示例数据
        ],
        uploadDialogVisible: false,
        editDialogVisible: false,
        newStrategy: {
          name: '',
          algorithms: [],
          modelAddress: '',
          modelPort: ''
        },
        selectedStrategy: {}
      };
    },
    methods: {
      openUploadDialog() {
        this.uploadDialogVisible = true;
      },
      uploadStrategy() {
        const newStrategy = { ...this.newStrategy, id: Date.now() };
        this.strategies.push(newStrategy);
        this.uploadDialogVisible = true;
        this.newStrategy = { name: '', algorithms: [], modelAddress: '', modelPort: '' };
      },
      openEditDialog(strategy) {
        this.selectedStrategy = { ...strategy };
        this.editDialogVisible = true;
      },
      saveChanges() {
        const index = this.strategies.findIndex(str => str.id === this.selectedStrategy.id);
        if (index !== -1) {
          this.strategies.splice(index, 1, this.selectedStrategy);
        }
        this.editDialogVisible = false;
      },
      deleteStrategy(id) {
        this.strategies = this.strategies.filter(str => str.id !== id);
      }
    }
  };
  </script>
  
  <style>
  #app {
    padding: 20px;
  }
  .el-table {
    margin-top: 20px;
  }
  </style>