通用评估系统(五)- 前端部分总体说明
通用评估系统(五)- 前端部分总体说明
相关链接
- 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地址
- 通用评估系统(一)- 介绍
- 通用评估系统(二)- 原型设计
- 通用评估系统(三)- 前端部分
- 通用评估系统(四)- 前端部分计算脚本编辑组件
相关文章:
通用评估系统(五)- 前端部分总体说明
通用评估系统(五)- 前端部分总体说明 相关链接 Gitee地址通用评估系统(一)- 介绍通用评估系统(二)- 原型设计通用评估系统(三)- 前端部分通用评估系统(四)-…...
STM32GPIO
目录 GPIO基本结构GPIO位结构输入部分输出部分 输出模式GPIO模式浮空/上拉/下拉模拟输入开漏和推挽复用开漏/复用推挽 GPIO基本结构 GPIO是挂载在APB2总线上的外设。GPIO结构中的寄存器分为输入寄存器和输出寄存器,APB2总线通过输出寄存器向引脚发送数据,…...
MyBatis拦截器终极指南:从原理到企业级实战
在本篇文章中,我们将深入了解如何编写一个 MyBatis 拦截器,并通过一个示例来展示如何在执行数据库操作(如插入或更新)时,自动填充某些字段(例如 createdBy 和 updatedBy)信息。本文将详细讲解拦…...
SpringBoot启动失败之application.yml缩进没写好
修改前: spring前面空格了 报错输出:Failed to configure a DataSource: ‘url’ attribute is not specified and no embedded datasource could be configured. Reason: Failed to determine a suitable driver class Action: Consider the follow…...
【JavaScript】《JavaScript高级程序设计 (第4版) 》笔记-Chapter17-事件
十七、事件 事件 JavaScript 与 HTML 的交互是通过事件实现的,事件代表文档或浏览器窗口中某个有意义的时刻。可以使用仅在事件发生时执行的监听器(也叫处理程序)订阅事件。在传统软件工程领域,这个模型叫“观察者模式”ÿ…...
鸿蒙开发:V2版本装饰器之@Monitor装饰器
前言 本文代码案例基于Api13。 随着官方的迭代,在新的Api中,对于新的应用开发,官方已经建议直接使用V2所属的装饰器进行开发了,所以,能上手V2的尽量上手V2吧,毕竟,V2是V1的增强版本,…...
51单片机-外部中断
以外部中断0为例: 主程序中需要有以下代码: EA1; //打开总中断开关 EX01; //开外部中断0 IT00/1; 设置外部中断的触发方式 P3.2\P3.3为外部中断接口,通过控制P3.2口按键按下实现LED灯反转点亮 #include "reg52.h"typed…...
UE C++ UObject 功能的初步总结(结合官方文档)
一. Uboject的官方文档的个人理解 Objects in Unreal Engine | 虚幻引擎 5.5 文档 | Epic Developer Community 目录在此 1.垃圾回收:上篇文章简单介绍过,UObject的创建和回收。本身是很复杂的功能,后续会接着单项深入分析。 2.引用更新 1. 反射:之前…...
DeepSeek和ChatGPT的全面对比
一、模型基础架构对比(2023技术版本) 维度DeepSeekChatGPT模型家族LLAMA架构改进GPT-4优化版本参数量级开放7B/35B/120B闭源175B位置编码RoPE NTK扩展ALiBiAttention机制FlashAttention-3FlashAttention-2激活函数SwiGLU ProGeGLU训练框架DeepSpeedMeg…...
Spring Boot Actuator 监控✨
Spring Boot Actuator 是 Spring Boot 提供的一个强大的监控和管理工具,它可以帮助你深入了解和监控你的应用程序的运行状态。通过 Actuator,你可以获取应用程序的健康状况、内存使用情况、线程信息、HTTP 请求跟踪等。🚀 核心知识点 &#…...
构建高效 Python Web 应用:框架与服务器的选择及实践
构建高效 Python Web 应用:框架与服务器的选择及实践 flyfish 从选择合适的 Web 框架(如 Flask 和 FastAPI)到部署时选用适当的 Web 服务器(如 Waitress、Gunicorn、uWSGI 和 Uvicorn)的全过程。它不仅介绍了各个框架…...
LED灯闪烁实验:Simulink应用层开发
文章目录 1 阶段目标2 开发过程2.1 模型搭建2.2 模型仿真2.3 数据字典配置2.4 代码生成3 总结1 阶段目标 本文是《LED灯闪烁实验》的第三部分,会通过图文结合的方式,手把手带读者操作Simulink工具进行LED灯闪烁的应用层开发。 本章的开发可分解为如下若干过程: 方波输出建…...
在做题中学习(89):螺旋矩阵
解法:模拟 思路:创建ret数组,用变量标记原矩阵的行数和列数,遍历一个元素就push_back进ret数组,每次遍历完一行或一列,相应行/列数--,进行顺时针螺旋遍历到为0即可。 细节:要有边界…...
使用EasyExcel和多线程实现高效数据导出
使用EasyExcel和多线程实现高效数据导出 1. 概述 在企业级应用中,数据导出是一个常见的需求。为了提高导出效率,尤其是在处理大量数据时,我们可以结合使用EasyExcel库和多线程技术。本文将详细介绍如何通过EasyExcel和多线程技术实现高…...
rabbitmq五种模式的实现——springboot
rabbitmq五种模式的实现——springboot 基础知识和javase的实现形式可以看我之前的博客 代码地址:https://github.com/9lucifer/rabbitmq4j-learning 一、进行集成 (一)Spring Boot 集成 RabbitMQ 概述 Spring Boot 提供了对 RabbitMQ 的自…...
每日学习Java之一万个为什么
9.Class <?> class1 Myclass.class 为什么要有通配符?传给谁用的? 首先,这里的class特指某个对象在JVM中的元数据集合。 有普通、接口、数组、基本类型、 void 类型、局部类、匿名类、枚举、注解 1.类型安全:通配符允许…...
寒假学习总结
整个寒假都走在数据结构与算法的路上,深入学习了其中多个板块,刷了一些与之对应的题目,下面来一期总结(c) (emmm,主播在寒假试着去学习了几大语言的语法基础(丢丢) 如Ja…...
Java Web开发实战与项目——用户认证与授权模块开发
Web应用中,用户认证与授权是至关重要的功能,确保只有合法用户才能访问受保护的资源。Spring Security作为一个强大的安全框架,支持多种认证与授权方式。在本章节中,我们将深入探讨三种常见的用户认证与授权方案:基于To…...
力扣每日一题【算法学习day.129】
前言 ###我做这类文章一个重要的目的还是记录自己的学习过程,我的解析也不会做的非常详细,只会提供思路和一些关键点,力扣上的大佬们的题解质量是非常非常高滴!!! 习题 1.数组列表中的最大距离 题目链接…...
uni-app发起网络请求的三种方式
uni.request(OBJECT) 发起网络请求 具体参数可查看官方文档uni-app data:请求的参数; header:设置请求的 header,header 中不能设置 Referer; method:请求方法; timeout:超时时间,单位 ms&a…...
Robots.txt 文件
什么是robots.txt? robots.txt 是一个位于网站根目录下的文本文件(如:https://example.com/robots.txt),它用于指导网络爬虫(如搜索引擎的蜘蛛程序)如何抓取该网站的内容。这个文件遵循 Robots…...
【HTML-16】深入理解HTML中的块元素与行内元素
HTML元素根据其显示特性可以分为两大类:块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...
AspectJ 在 Android 中的完整使用指南
一、环境配置(Gradle 7.0 适配) 1. 项目级 build.gradle // 注意:沪江插件已停更,推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...
HDFS分布式存储 zookeeper
hadoop介绍 狭义上hadoop是指apache的一款开源软件 用java语言实现开源框架,允许使用简单的变成模型跨计算机对大型集群进行分布式处理(1.海量的数据存储 2.海量数据的计算)Hadoop核心组件 hdfs(分布式文件存储系统)&a…...
【无标题】路径问题的革命性重构:基于二维拓扑收缩色动力学模型的零点隧穿理论
路径问题的革命性重构:基于二维拓扑收缩色动力学模型的零点隧穿理论 一、传统路径模型的根本缺陷 在经典正方形路径问题中(图1): mermaid graph LR A((A)) --- B((B)) B --- C((C)) C --- D((D)) D --- A A -.- C[无直接路径] B -…...
GitHub 趋势日报 (2025年06月06日)
📊 由 TrendForge 系统生成 | 🌐 https://trendforge.devlive.org/ 🌐 本日报中的项目描述已自动翻译为中文 📈 今日获星趋势图 今日获星趋势图 590 cognee 551 onlook 399 project-based-learning 348 build-your-own-x 320 ne…...
Scrapy-Redis分布式爬虫架构的可扩展性与容错性增强:基于微服务与容器化的解决方案
在大数据时代,海量数据的采集与处理成为企业和研究机构获取信息的关键环节。Scrapy-Redis作为一种经典的分布式爬虫架构,在处理大规模数据抓取任务时展现出强大的能力。然而,随着业务规模的不断扩大和数据抓取需求的日益复杂,传统…...
论文阅读笔记——Muffin: Testing Deep Learning Libraries via Neural Architecture Fuzzing
Muffin 论文 现有方法 CRADLE 和 LEMON,依赖模型推理阶段输出进行差分测试,但在训练阶段是不可行的,因为训练阶段直到最后才有固定输出,中间过程是不断变化的。API 库覆盖低,因为各个 API 都是在各种具体场景下使用。…...
提升移动端网页调试效率:WebDebugX 与常见工具组合实践
在日常移动端开发中,网页调试始终是一个高频但又极具挑战的环节。尤其在面对 iOS 与 Android 的混合技术栈、各种设备差异化行为时,开发者迫切需要一套高效、可靠且跨平台的调试方案。过去,我们或多或少使用过 Chrome DevTools、Remote Debug…...
Linux部署私有文件管理系统MinIO
最近需要用到一个文件管理服务,但是又不想花钱,所以就想着自己搭建一个,刚好我们用的一个开源框架已经集成了MinIO,所以就选了这个 我这边对文件服务性能要求不是太高,单机版就可以 安装非常简单,几个命令就…...
