soilgd12/src/views/Admin/modelManagement/AcidReductionModel/ModelSelection.vue

<template>
  <div class="model-container">
    <!-- 模型选择下拉菜单 -->
    <el-dropdown @command="handleModelTypeChange" trigger="click" :hide-on-click="true" style="margin-bottom: 5px">
      <span class="el-dropdown-link">
        {{ selectedModelTypeLabel }}<el-icon class="el-icon--right"><ArrowDown /></el-icon>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item
            v-for="type in modelTypes"
            :key="type.value"
            :command="type.value"
            :disabled="selectedModelType === type.value"
          >
            {{ type.label }}
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>

    <!-- 加载失败提示 -->
    <el-alert
      v-if="errorOccurred"
      :title="`加载数据失败: ${errorMessage}`"
      type="error"
      show-icon
      style="margin-bottom: 5px"
    />

    <!-- 动态加载的模型信息按表格显示 -->
    <el-table
      v-if="selectedModelType && filteredModels.length > 0 && !loading"
      :data="pagedFilteredModels"
      style="width: 100%"
      border
      height="calc(100vh - 300px)" 
    >
      <el-table-column prop="ModelID" label="序号" min-width="80" />
      <el-table-column prop="Model_name" label="模型名称" min-width="180" />
      <el-table-column prop="Data_type" label="数据类型" min-width="120" />
      <el-table-column prop="Performance_score" label="性能评分" min-width="120" />
      <el-table-column prop="Created_at" label="创建时间" min-width="180" />
      <el-table-column label="操作" min-width="100">
        <template #default="scope">
          <el-button size="small" @click="selectModel(scope.row)">选择</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页控制 -->
    <div
      class="demo-pagination-block"
      v-if="selectedModelType && filteredModels.length > 0"
      style="text-align: center; margin-top: 20px;"
    >
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 40]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="filteredModels.length"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 切换模型按钮 -->
    <div
      v-if="selectedModel && !loading"
      style="text-align: center; margin-top: 5px"
    >
      <el-button type="success" size="small" @click="switchModel">切换模型</el-button>
    </div>

    <!-- 当没有选择任何模型类型时显示提示信息 -->
    <div
      v-if="!selectedModelType && !loading && !errorOccurred"
      style="text-align: center; padding-top: 5px"
    >
      请选择一个模型类型以查看详细信息。
    </div>

    <!-- 当筛选结果为空时显示提示信息 -->
    <div
      v-if="selectedModelType && filteredModels.length === 0 && !loading && !errorOccurred"
      style="text-align: center; padding-top: 5px"
    >
      没有找到与所选模型类型匹配的数据。
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue';
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { ArrowDown } from '@element-plus/icons-vue';
import { table } from '@/API/menus';

interface ModelData {
  ModelID: number;
  Model_name: string;
  Model_type: string;
  Created_at: string;
  Description: string;
  DatasetID: string;
  ModelFilePath: string;
  Data_type: string;
  Performance_score: number;
  MAE: number;
  RMSE: number;
  CV_score: string;
}

interface Dataset {
  id: any;
  name: string;
  description: string;
  type: string;
  count: number;
  status: string;
  uploadTime: string;
  selected: boolean;
}

const loading = ref(true);
const allModels = ref<ModelData[]>([]);
const rows = ref<Dataset[]>([]);
const selectedModelType = ref<string>("");
const selectedModelTypeLabel = ref<string>("请选择模型类型");
const selectedModel = ref<ModelData | null>(null);
const modelTypes = [
  { value: "reduce", label: "降酸模型(Reduce Model)" },
  { value: "reflux", label: "反酸模型(Reflux Model)" },
];

// 分页相关的变量
const currentPage = ref(1);
const pageSize = ref(10);

// 获取所有模型数据
const fetchAllModels = async () => {
  try {
    const requestBody = { table: "Models" };
    const response = await table(requestBody);
    allModels.value = response.data.rows.map((row: any) => ({
      ...row,
      selected: false,
    }));
  } catch (error) {
    let errorMessageVal = "未知错误";
    if (error && typeof error === 'object' && 'message' in error) {
      errorMessageVal = (error as { message?: string }).message || errorMessageVal;
    }
    console.error("Error fetching data:", errorMessageVal);
    ElMessage.error("数据加载失败：" + errorMessageVal);
    errorOccurred.value = true;
    errorMessage.value = errorMessageVal;
  } finally {
    loading.value = false;
  }
};

// 获取所有数据集数据
const fetchData = async () => {
  try {
    const response = await table({ table: 'Datasets' });
    return response.data.rows;
  } catch (error) {
    let errorMessageVal = '未知错误';
    if (error && typeof error === 'object' && 'message' in error) {
      errorMessageVal = (error as { message?: string }).message || errorMessageVal;
    }
    console.error('Error fetching data:', errorMessageVal);
    throw new Error(errorMessageVal); // 重新抛出带有详细信息的新错误
  }
};

// 加载数据集数据
const LoadData = async () => {
  try {
    rows.value = (await fetchData()).map(
      (row: {
        Dataset_ID: any;
        Dataset_name: any;
        Dataset_description: any;
        Dataset_type: any;
        Row_count: any;
        Status: any;
        Uploaded_at: any;
      }) => ({
        id: row.Dataset_ID,
        name: row.Dataset_name,
        description: row.Dataset_description,
        type: row.Dataset_type,
        count: row.Row_count,
        status: row.Status,
        uploadTime: row.Uploaded_at,
        selected: false,
      })
    );
  } catch (error) {
    let errorMessageVal = '未知错误';
    if (error && typeof error === 'object' && 'message' in error) {
      errorMessageVal = (error as { message?: string }).message || errorMessageVal;
    }
    console.error('Error fetching data:', errorMessageVal);
    ElMessage.error('数据加载失败：' + errorMessageVal);
    errorOccurred.value = true;
    errorMessage.value = errorMessageVal;
  } finally {
    loading.value = false;
  }
};

// 根据选择的模型类型计算要展示的数据
const filteredModels = computed(() => {
  if (!selectedModelType.value) return [];

  // 根据选定的模型类型（降酸或反酸）进行筛选
  return allModels.value.filter(m => m.Data_type === selectedModelType.value);
});

// 分页后的过滤数据
const pagedFilteredModels = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return filteredModels.value.slice(start, end);
});

// 过滤后的数据集数据
const filteredRows = computed(() =>
  selectedModelType.value ? rows.value.filter((row) => row.type === selectedModelType.value) : []
);

// 分页后的过滤数据集数据
const pagedFilteredRows = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return filteredRows.value.slice(start, end);
});

const handleModelTypeChange = (value: string) => {
  selectedModelType.value = value;
  const selectedType = modelTypes.find(type => type.value === value);
  if (selectedType) {
    selectedModelTypeLabel.value = selectedType.label;
    ElMessage.success(`已切换到 ${selectedType.label}`);
  }
  selectedModel.value = null; // 清空已选中的模型
  currentPage.value = 1; // 当模型类型改变时重置当前页码
};

const selectModel = (model: ModelData) => {
  selectedModel.value = model;
};

// 分页事件处理
const handleSizeChange = (val: number) => {
  pageSize.value = val;
};
const handleCurrentChange = (val: number) => {
  currentPage.value = val;
};

// 切换模型状态
const switchModel = async () => {
  if (!selectedModel.value) {
    ElMessage.warning("请先选择一个模型");
    return;
  }

  try {
    await axios.post("https://127.0.0.1:5000/switch-model", {
      model_id: selectedModel.value.ModelID,
      model_name: selectedModel.value.Model_name,
    });
    ElMessage.success(`模型 ${selectedModel.value.Model_name} 切换成功`);
    selectedModel.value = null; // 清空已选中的模型
  } catch (error) {
    let message = "未知错误";
    if (error && typeof error === "object" && "message" in error) {
      message = (error as { message?: string }).message || message;
    }
    console.error("Failed to switch model:", message);
    ElMessage.error("模型切换失败：" + message);
  }
};

const errorOccurred = ref(false);
const errorMessage = ref('');
const selectedRows = ref<Dataset[]>([]);

onMounted(() => {
  fetchAllModels();
  LoadData();
});
</script>

<style scoped>
.model-container {
  display: grid;
  gap: 10px;
  padding: 10px;
  background-color: #f9fafb;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  height: 100%; /* 让容器高度占满父元素 */
}

.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}

/* 移除下拉菜单的边框 */
.el-popper.is-light {
  border: none !important;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.el-table {
  width: 100%;
  margin-top: 10px;
  border-radius: 8px; /* 添加圆角 */
}

:deep( .el-table th) {
  background-color: #61e054 !important;
  color: #fff;
}

:deep( .el-table td),
:deep( .el-table th) {
  padding: 8px 0;
}

:deep( .el-table__row:nth-child(odd)) {
  background-color: #e4fbe5 !important;
}

/* 禁用项样式 */
:deep( .el-dropdown-menu__item.is-disabled) {
  color: #c0c4cc !important;
  cursor: not-allowed !important;
}
</style>