当前位置: 首页 > 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…...

ComfyUI-Easy-Use提示词选择器性能优化终极指南

ComfyUI-Easy-Use提示词选择器性能优化终极指南 【免费下载链接】ComfyUI-Easy-Use In order to make it easier to use the ComfyUI, I have made some optimizations and integrations to some commonly used nodes. 项目地址: https://gitcode.com/gh_mirrors/co/ComfyUI-…...

分钟搞懂深度学习AI:实操篇:池化层

1. 流图&#xff1a;数据的河流 如果把传统的堆叠面积图想象成一块块整齐堆叠的积木&#xff0c;那么流图就像一条蜿蜒流淌的河流&#xff0c;河道的宽窄变化自然流畅&#xff0c;波峰波谷过渡平滑。 它特别适合展示多个类别数据随时间的变化趋势&#xff0c;尤其是当你想强调整…...

ClawLock:为AI智能体构建身份管理与安全凭证的MCP解决方案

1. 项目概述&#xff1a;为AI智能体构建身份与安全的基石 在AI智能体&#xff08;AI Agent&#xff09;的开发与部署浪潮中&#xff0c;一个长期被忽视的“房间里的大象”正变得越来越显眼&#xff1a;安全与身份管理。想象一下&#xff0c;你部署了成百上千个能够自动执行任务…...

别再死记硬背公式了!用MATLAB/Simulink一步步推导SVPWM羊角波生成(附完整仿真模型)

从零构建SVPWM羊角波&#xff1a;MATLAB/Simulink可视化推导实战 电力电子工程师常把SVPWM比作"空间矢量魔术"——六个基本矢量如何组合出完美圆形磁场&#xff1f;羊角波又为何能实现更高电压利用率&#xff1f;本文将用MATLAB/Simulink搭建可视化推导实验室&#x…...

C/C++ 多线程的学习心得总结

个人觉得在学习多线程编程之前最好先了解进程和线程的关系, 然后在学习线程工作方式的过程中动手写个(我是从抄开始的)多线程的小程序, 会对学习多线程有很大的帮助, 否则只有理论是很抽象的.在学习多线程编程之前, 必须先知道什么是 线程函数, 线程函数就是另一个线程的入口函…...

视频孪生:数智融合新引擎,北科软以技术创新赋能数字中国建设

在数字经济与实体经济深度融合的时代浪潮中&#xff0c;数字孪生技术正从概念走向广泛实践&#xff0c;成为驱动各行业智能化转型的核心力量。作为数字孪生领域的创新突破&#xff0c;视频孪生凭借实时视觉感知、虚实精准映射、全域智能决策的独特优势&#xff0c;为智慧城市、…...

Docker运行AI代码到底安不安全?:3类高危逃逸场景复现+4层加固策略(附可落地的yaml模板)

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;Docker Sandbox 运行 AI 代码隔离技术对比评测报告 在 AI 模型快速迭代与第三方代码频繁集成的背景下&#xff0c;安全可靠的沙箱执行环境成为关键基础设施。Docker 提供的轻量级容器化沙箱机制&#x…...

SD-PPP架构方案:解决Photoshop与AI绘图平台无缝集成的技术挑战

SD-PPP架构方案&#xff1a;解决Photoshop与AI绘图平台无缝集成的技术挑战 【免费下载链接】sd-ppp A Photoshop AI plugin 项目地址: https://gitcode.com/gh_mirrors/sd/sd-ppp 传统AI绘图工作流中&#xff0c;设计师需要在Photoshop与ComfyUI/Stable Diffusion等AI平…...

你的USB声卡不止能听歌:手把手教你用Python+libusb玩转UAC设备控制(获取/设置采样率、音量)

用Python操控USB声卡&#xff1a;从采样率调节到音频流捕获的完整指南 当我在工作室调试多麦克风阵列时&#xff0c;发现手动调节每个USB麦克风的采样率不仅耗时&#xff0c;还容易出错。那一刻我意识到&#xff0c;如果能用Python脚本批量控制这些设备&#xff0c;工作效率将大…...

2026年华为云怎么搭建Hermes Agent/OpenClaw?经验之谈

2026年华为云怎么搭建Hermes Agent/OpenClaw&#xff1f;经验之谈。OpenClaw和Hermes Agent是什么&#xff1f;OpenClaw和Hermes Agent怎么部署&#xff1f;如何部署OpenClaw/Hermes Agent&#xff1f;2026年还在为部署OpenClaw和Hermes Agent到处找教程踩坑吗&#xff1f;别再…...