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

<template>
    <div>
      <el-card>
  
        <!-- 筛选条件 -->
        <el-form :model="filters" label-width="120px" class="filter-form">
          <el-form-item label="算法类型">
            <el-select v-model="filters.algorithmType" placeholder="请选择算法类型">
              <el-option v-for="type in algorithmTypes" :key="type" :label="type" :value="type"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="电磁干扰目标">
            <el-select v-model="filters.target" placeholder="请选择目标">
              <el-option v-for="target in targets" :key="target" :label="target" :value="target"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="applyFilters">应用筛选</el-button>
            <el-button @click="resetFilters">重置筛选</el-button>
          </el-form-item>
        </el-form>
  
        <!-- 表格显示 -->
        <el-table :data="filteredRecords" border>
          <el-table-column prop="algorithmType" label="算法类型"></el-table-column>
          <el-table-column prop="target" label="电磁干扰目标"></el-table-column>
          <el-table-column prop="computeTime" label="计算时间"></el-table-column>
          <el-table-column prop="error" label="误差"></el-table-column>
          <el-table-column prop="snrChangeRate" label="雷达信噪比变化率"></el-table-column>
          <el-table-column
            label="操作"
            width="180">
            <template slot-scope="scope">
              <el-button @click="viewDetail(scope.row)" type="text" size="small">查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        records: [
          { algorithmType: '算法A', target: '目标1', computeTime: '123ms', error: '0.01', snrChangeRate: '3dB' },
          { algorithmType: '算法B', target: '目标2', computeTime: '98ms', error: '0.02', snrChangeRate: '2dB' },
          { algorithmType: '算法C', target: '目标3', computeTime: '76ms', error: '0.03', snrChangeRate: '1dB' },
          { algorithmType: '算法D', target: '目标4', computeTime: '54ms', error: '0.04', snrChangeRate: '0dB' },
          { algorithmType: '算法E', target: '目标5', computeTime: '32ms', error: '0.05', snrChangeRate: '-1dB' },
          { algorithmType: '算法F', target: '目标6', computeTime: '10ms', error: '0.06', snrChangeRate: '-2dB' },
          // 其他记录
        ],
        filters: {
          algorithmType: '',
          target: ''
        },
        algorithmTypes: ['算法A', '算法B'],
        targets: ['目标1', '目标2']
      };
    },
    computed: {
      filteredRecords() {
        return this.records.filter(record => {
          return (!this.filters.algorithmType || record.algorithmType === this.filters.algorithmType) &&
                 (!this.filters.target || record.target === this.filters.target);
        });
      }
    },
    methods: {
      applyFilters() {
        // 过滤逻辑已经在computed属性中实现
      },
      resetFilters() {
        this.filters.algorithmType = '';
        this.filters.target = '';
      },
      viewDetail(record) {
        this.$message({
          message: `查看详情: ${JSON.stringify(record)}`,
          type: 'info'
        });
      }
    }
  };
  </script>
  
  <style scoped>
  .filter-form {
    margin-bottom: 20px;
  }
  </style>