通用评估系统（五）-前端部分总体说明

通用评估系统（五）- 前端部分总体说明 相关链接 Gitee地址通用评估系统（一）- 介绍通用评估系统（二）- 原型设计通用评估系统（三）- 前端部分通用评估系统（四）- 前端部分计算脚本编辑组件 文档说明

本节中说明前端总体显示相关信息。具体数据交互待后端开发时同步进行。

目录结构

实际显示效果 全局搜索

评估模型管理

数据模型管理

指标体系管理

评估任务管理

部分代码说明 评估模型管理组件 <!-- * @Description: 模型管理 * @Author: wang keju * @Email: git config user.email * @Date: 2025-02-14 05:48:16 * @LastEditTime: 2025-02-17 07:02:36 * @LastEditors: wang keju --> <script lang="ts" setup> import { ref, h, computed, watch } from "vue"; import { useRoute } from "vue-router"; import ContentLayout from '@/layout/ContentLayout.vue'; import Icon from "@/components/Icon/Icon.vue"; import Empty from "@/components/Empty/Empty.vue"; import TreeDiagram from "@/components/TreeDiagram"; const route = useRoute(); const id = computed(() => route.params['id']); const breadcrumbs = ref<{[key: string]: any;}[]>([ { href: "/model", breadcrumbName: "模型管理" }, { href: "/model/details", breadcrumbName: "模型详情" }, ]); const title = ref<string>("XXXXX评估模型"); watch(id, () => { console.log(id.value) }); const indicatorSys = ref<string>(""); </script> <template> <ContentLayout :title="title" name="评估模型" :breadcrumb="breadcrumbs"> <template #sidebar> <span class="add-btn"> <Icon name="add" :size="18" />新建模型 </span> <div class="search-container"> <AInput :prefix="h(Icon, { name: 'sousuo', size: 18 })" placeholder="请输入模型名称" /> </div> <div style="padding: 0 12px;"> <ATabs style="text-align: center;"> <ATabPane key="已发布" tab="已发布"></ATabPane> <ATabPane key="未发布" tab="未发布"></ATabPane> </ATabs> <AList> </AList> </div> </template> <div class="main"> <template v-if="!title"> <Empty /> </template> <template v-else> <TreeDiagram /> </template> </div> </ContentLayout> </template> <style lang="less" scoped> .add-btn { display: inline-block; height: 32px; margin-bottom: 12px; color: #666; line-height: 32px; font-weight: bold; cursor: pointer; &:hover { color: #004CFE; } } .search-container { box-sizing: border-box; } .main { height: 100%; // margin: -24px; // padding: 24px 24px 0; } </style> 全局搜索组件 <!-- * @Description: 全局搜索 * @Author: wang keju * @Email: git config user.email * @Date: 2025-02-15 11:58:46 * @LastEditTime: 2025-02-17 06:47:52 * @LastEditors: wang keju --> <script lang="ts" setup> import { ref } from "vue"; import Icon from "@/components/Icon/Icon.vue"; import { SearchOutlined } from "@ant-design/icons-vue"; export type GlobalSearchExpose = { open: () => void; close: () => void; } const visible = ref<boolean>(false); const open = () => visible.value = true; const close = () => visible.value = false; const activeKey = ref<string>("全部"); defineExpose<GlobalSearchExpose>({ open, close }); </script> <template> <AModal v-model:open="visible" title="快速搜索" :width="960" :footer="null"> <AInput placeholder="请输入关键词"> <template #prefix> <SearchOutlined /> </template> </AInput> <ATabs v-model:activeKey="activeKey"> <ATabPane key="全部" tab="全部">123</ATabPane> <ATabPane key="模型"> <template #tab> <Icon name="pinggumoxing" style="margin-right: 4px;" />评估模型 </template> </ATabPane> <ATabPane key="数据"> <template #tab> <Icon name="shujuguanli" style="margin-right: 4px;" />数据管理 </template> </ATabPane> <ATabPane key="指标体系"> <template #tab> <Icon name="zhibiaotixi" style="margin-right: 4px;" />指标体系 </template> </ATabPane> <ATabPane key="评估任务"> <template #tab> <Icon name="pinggurenwu" style="margin-right: 4px;" />评估任务 </template> </ATabPane> <ATabPane key="评估任务"> <template #tab> <Icon name="lishixiao" style="margin-right: 4px;" />操作历史 </template> </ATabPane> </ATabs> <div class="search-content"> </div> </AModal> </template> <style lang="less" scoped> .search-content { height: 400px; } </style> 总结

后续具体的页面详细及数据交互，在进行后端开发时同步进行。

相关链接 Gitee地址通用评估系统（一）- 介绍通用评估系统（二）- 原型设计通用评估系统（三）- 前端部分通用评估系统（四）- 前端部分计算脚本编辑组件