当前位置: 首页 > news >正文

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

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

相关链接

  • 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地址
  • 通用评估系统(一)- 介绍
  • 通用评估系统(二)- 原型设计
  • 通用评估系统(三)- 前端部分
  • 通用评估系统(四)- 前端部分计算脚本编辑组件

相关文章:

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

通用评估系统&#xff08;五&#xff09;- 前端部分总体说明 相关链接 Gitee地址通用评估系统&#xff08;一&#xff09;- 介绍通用评估系统&#xff08;二&#xff09;- 原型设计通用评估系统&#xff08;三&#xff09;- 前端部分通用评估系统&#xff08;四&#xff09;-…...

STM32GPIO

目录 GPIO基本结构GPIO位结构输入部分输出部分 输出模式GPIO模式浮空/上拉/下拉模拟输入开漏和推挽复用开漏/复用推挽 GPIO基本结构 GPIO是挂载在APB2总线上的外设。GPIO结构中的寄存器分为输入寄存器和输出寄存器&#xff0c;APB2总线通过输出寄存器向引脚发送数据&#xff0c…...

MyBatis拦截器终极指南:从原理到企业级实战

在本篇文章中&#xff0c;我们将深入了解如何编写一个 MyBatis 拦截器&#xff0c;并通过一个示例来展示如何在执行数据库操作&#xff08;如插入或更新&#xff09;时&#xff0c;自动填充某些字段&#xff08;例如 createdBy 和 updatedBy&#xff09;信息。本文将详细讲解拦…...

SpringBoot启动失败之application.yml缩进没写好

修改前&#xff1a; spring前面空格了 报错输出&#xff1a;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 的交互是通过事件实现的&#xff0c;事件代表文档或浏览器窗口中某个有意义的时刻。可以使用仅在事件发生时执行的监听器&#xff08;也叫处理程序&#xff09;订阅事件。在传统软件工程领域&#xff0c;这个模型叫“观察者模式”&#xff…...

鸿蒙开发:V2版本装饰器之@Monitor装饰器

前言 本文代码案例基于Api13。 随着官方的迭代&#xff0c;在新的Api中&#xff0c;对于新的应用开发&#xff0c;官方已经建议直接使用V2所属的装饰器进行开发了&#xff0c;所以&#xff0c;能上手V2的尽量上手V2吧&#xff0c;毕竟&#xff0c;V2是V1的增强版本&#xff0c;…...

51单片机-外部中断

以外部中断0为例&#xff1a; 主程序中需要有以下代码&#xff1a; EA1; //打开总中断开关 EX01; //开外部中断0 IT00/1&#xff1b; 设置外部中断的触发方式 P3.2\P3.3为外部中断接口&#xff0c;通过控制P3.2口按键按下实现LED灯反转点亮 #include "reg52.h"typed…...

UE C++ UObject 功能的初步总结(结合官方文档)

一. Uboject的官方文档的个人理解 Objects in Unreal Engine | 虚幻引擎 5.5 文档 | Epic Developer Community 目录在此 1.垃圾回收:上篇文章简单介绍过&#xff0c;UObject的创建和回收。本身是很复杂的功能&#xff0c;后续会接着单项深入分析。 2.引用更新 1. 反射:之前…...

DeepSeek和ChatGPT的全面对比

一、模型基础架构对比&#xff08;2023技术版本&#xff09; 维度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 提供的一个强大的监控和管理工具&#xff0c;它可以帮助你深入了解和监控你的应用程序的运行状态。通过 Actuator&#xff0c;你可以获取应用程序的健康状况、内存使用情况、线程信息、HTTP 请求跟踪等。&#x1f680; 核心知识点 &#…...

构建高效 Python Web 应用:框架与服务器的选择及实践

构建高效 Python Web 应用&#xff1a;框架与服务器的选择及实践 flyfish 从选择合适的 Web 框架&#xff08;如 Flask 和 FastAPI&#xff09;到部署时选用适当的 Web 服务器&#xff08;如 Waitress、Gunicorn、uWSGI 和 Uvicorn&#xff09;的全过程。它不仅介绍了各个框架…...

LED灯闪烁实验:Simulink应用层开发

文章目录 1 阶段目标2 开发过程2.1 模型搭建2.2 模型仿真2.3 数据字典配置2.4 代码生成3 总结1 阶段目标 本文是《LED灯闪烁实验》的第三部分,会通过图文结合的方式,手把手带读者操作Simulink工具进行LED灯闪烁的应用层开发。 本章的开发可分解为如下若干过程: 方波输出建…...

在做题中学习(89):螺旋矩阵

解法&#xff1a;模拟 思路&#xff1a;创建ret数组&#xff0c;用变量标记原矩阵的行数和列数&#xff0c;遍历一个元素就push_back进ret数组&#xff0c;每次遍历完一行或一列&#xff0c;相应行/列数--&#xff0c;进行顺时针螺旋遍历到为0即可。 细节&#xff1a;要有边界…...

使用EasyExcel和多线程实现高效数据导出

​ 使用EasyExcel和多线程实现高效数据导出 1. 概述 在企业级应用中&#xff0c;数据导出是一个常见的需求。为了提高导出效率&#xff0c;尤其是在处理大量数据时&#xff0c;我们可以结合使用EasyExcel库和多线程技术。本文将详细介绍如何通过EasyExcel和多线程技术实现高…...

rabbitmq五种模式的实现——springboot

rabbitmq五种模式的实现——springboot 基础知识和javase的实现形式可以看我之前的博客 代码地址&#xff1a;https://github.com/9lucifer/rabbitmq4j-learning 一、进行集成 &#xff08;一&#xff09;Spring Boot 集成 RabbitMQ 概述 Spring Boot 提供了对 RabbitMQ 的自…...

每日学习Java之一万个为什么

9.Class <?> class1 Myclass.class 为什么要有通配符&#xff1f;传给谁用的&#xff1f; 首先&#xff0c;这里的class特指某个对象在JVM中的元数据集合。 有普通、接口、数组、基本类型、 void 类型、局部类、匿名类、枚举、注解 1.类型安全&#xff1a;通配符允许…...

寒假学习总结

整个寒假都走在数据结构与算法的路上&#xff0c;深入学习了其中多个板块&#xff0c;刷了一些与之对应的题目&#xff0c;下面来一期总结&#xff08;c&#xff09; &#xff08;emmm&#xff0c;主播在寒假试着去学习了几大语言的语法基础&#xff08;丢丢&#xff09; 如Ja…...

Java Web开发实战与项目——用户认证与授权模块开发

Web应用中&#xff0c;用户认证与授权是至关重要的功能&#xff0c;确保只有合法用户才能访问受保护的资源。Spring Security作为一个强大的安全框架&#xff0c;支持多种认证与授权方式。在本章节中&#xff0c;我们将深入探讨三种常见的用户认证与授权方案&#xff1a;基于To…...

力扣每日一题【算法学习day.129】

前言 ###我做这类文章一个重要的目的还是记录自己的学习过程&#xff0c;我的解析也不会做的非常详细&#xff0c;只会提供思路和一些关键点&#xff0c;力扣上的大佬们的题解质量是非常非常高滴&#xff01;&#xff01;&#xff01; 习题 1.数组列表中的最大距离 题目链接…...

uni-app发起网络请求的三种方式

uni.request(OBJECT) 发起网络请求 具体参数可查看官方文档uni-app data:请求的参数; header&#xff1a;设置请求的 header&#xff0c;header 中不能设置 Referer&#xff1b; method&#xff1a;请求方法&#xff1b; timeout&#xff1a;超时时间&#xff0c;单位 ms&a…...

KubeSphere 容器平台高可用:环境搭建与可视化操作指南

Linux_k8s篇 欢迎来到Linux的世界&#xff0c;看笔记好好学多敲多打&#xff0c;每个人都是大神&#xff01; 题目&#xff1a;KubeSphere 容器平台高可用&#xff1a;环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...

Docker 离线安装指南

参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性&#xff0c;不同版本的Docker对内核版本有不同要求。例如&#xff0c;Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本&#xff0c;Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...

阿里云ACP云计算备考笔记 (5)——弹性伸缩

目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...

基于服务器使用 apt 安装、配置 Nginx

&#x1f9fe; 一、查看可安装的 Nginx 版本 首先&#xff0c;你可以运行以下命令查看可用版本&#xff1a; apt-cache madison nginx-core输出示例&#xff1a; nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...

【解密LSTM、GRU如何解决传统RNN梯度消失问题】

解密LSTM与GRU&#xff1a;如何让RNN变得更聪明&#xff1f; 在深度学习的世界里&#xff0c;循环神经网络&#xff08;RNN&#xff09;以其卓越的序列数据处理能力广泛应用于自然语言处理、时间序列预测等领域。然而&#xff0c;传统RNN存在的一个严重问题——梯度消失&#…...

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块&#xff0c;用户不点击提交按钮&#xff0c;只要输入框失去焦点&#xff0c;就会提前提示验证码是否正确。 一&#xff0c;模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

第一篇:Agent2Agent (A2A) 协议——协作式人工智能的黎明

AI 领域的快速发展正在催生一个新时代&#xff0c;智能代理&#xff08;agents&#xff09;不再是孤立的个体&#xff0c;而是能够像一个数字团队一样协作。然而&#xff0c;当前 AI 生态系统的碎片化阻碍了这一愿景的实现&#xff0c;导致了“AI 巴别塔问题”——不同代理之间…...

Springcloud:Eureka 高可用集群搭建实战(服务注册与发现的底层原理与避坑指南)

引言&#xff1a;为什么 Eureka 依然是存量系统的核心&#xff1f; 尽管 Nacos 等新注册中心崛起&#xff0c;但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制&#xff0c;是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...

浅谈不同二分算法的查找情况

二分算法原理比较简单&#xff0c;但是实际的算法模板却有很多&#xff0c;这一切都源于二分查找问题中的复杂情况和二分算法的边界处理&#xff0c;以下是博主对一些二分算法查找的情况分析。 需要说明的是&#xff0c;以下二分算法都是基于有序序列为升序有序的情况&#xf…...

在WSL2的Ubuntu镜像中安装Docker

Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包&#xff1a; for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...