qbIHSOM-CSDN博客

原创山东大学项目实训记录(十四)——最后收尾

这应该是最后一次记录了目前所有的功能基本完成，最后中端发来的文件也已经接上，分别是画布功能和算法点云标签可视化然后就是工作收尾，进行bug查找，工作也就结束了

2021-07-30 16:09:47 74

原创山东大学项目实训记录(十三)——功能完善

最后实现的功能是，文件列表，能够将该文件列表下的所有文件直观的展示出来，其中CBCT下jpg/png文件和nii.gz文件分为两个文件列表，文件列表以表格的形式出现，单击所在一行就可以实现跳转，跳转到改格式文件可以进行预览的界面此外，还有和中端的对接，nii.gz格式下的预览接口是文件选择器，目前没有办法绕过传值，只能在页面打开的同时跳出文件下载链接，然后用户自行拖入查看...

2021-07-30 16:05:42 75

文件删除的接口由于一些问题耗费了较多的时间，目前所有接口都能够进行正常的使用。至此，最困难的任务已经完成，剩下的就是利用这些接口进行功能的补全。首先是文件批量删除，可以将一个分类下的文件全部从服务器端删除然后是全景图和侧位片的文件展示，使用el-image-viewer可以一次性将文件列表中所有的文件进行预览，还可以使用懒加载列在页面上，这样也会节省空间还有中端对接的优化，终于可以同时加载两个stl模型...

2021-07-30 16:00:07 78

原创山东大学项目实训记录(十一)——接口全面对接

目前后端基本功能的接口都已经基本完成，前端需要进行对接，首先是目前一个案例中文件可以储存多个，所以修改了之前的文件上传方式，使其能够多个上传文件可储存多个，下载接口更改为需要带有文件名，所以下载之前要通过另一个接口拉取文件列表，然后进行下载，目前没有批量下载的功能。还有文件删除的列表正在进行对接...

2021-07-30 15:54:43 84

原创山东大学项目实训记录(十)——iframe嵌套并传值

目前已经完成了中端对接，他们发过来的是一个html文件，将文件放入static文件夹下，通过iframe嵌套html界面，通过route在vue页面之间传值，通过window方法在vue和嵌套的html之间传值，实现以下效果

2021-07-30 15:49:10 109

原创山东大学项目实训记录(九)——简单对接

目前已经可以和后端进行简单的对接，所以目前实现了案例页面中的上传文件和图片展示功能不光是el-image自带的预览，还可以通过element-image-viewer点击按钮实现预览目前中端模型展示功能已经有初步进展，正在进行对接...

2021-07-30 15:42:40 74

原创山东大学项目实训记录(八)——扩展功能

界面基本搭建完成之后，我进行主页扩展功能的实现，例如实现登录时间和地点的获取，还有网页live2d的添加methods: { getCurrentTime() { var _this = this; 　　let yy = new Date().getFullYear(); 　　let mm = new Date().getMonth()+1; 　　let dd = new Date().getDate(); 　　let hh = new Date()

2021-07-30 15:38:31 82

原创山东大学项目实训记录(七)——基础界面搭建

为了适应后端给出的接口，需要将接口功能在各种界面中进行布局，例如病人详细信息中存放有各种案例，首先需要将案例的页面搭建好，主要利用了之前所学，加入了走马灯图片展示，图片分两列，方便进行图片之间的对比，还有案例的详细信息展示部分，另外还有案例文件的存储和上传区域（目前只实现了上传，但是并没有对接服务器）区域之间还有分割线进行区分...

2021-07-30 15:20:47 87

原创山东大学项目实训记录(六)——详细信息界面搭建和走马灯图片展示

工作途中被小组成员拖去解决调取服务器信息的问题，消耗了很多时间，但是没有解决，后端同学说是跨栈问题，等待后端解决。剩下的时间简易的搭建了一下病人详细信息的页面 <el-card shadow="hover"> <template #header> <div class="clearfix"> <span>患者详细信息</span> &l

2021-07-09 11:22:54 107

原创山东大学项目实训记录(五)——表格功能完善与vue插入外部html文件

表格还有我负责的最后一项表格数据修改的功能 <el-table-column label="操作" width="180" align="center"> <template #default="scope"> <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index,

2021-07-09 10:38:47 79

原创山东大学项目实训记录(四)——表格功能添加

完成了最基本的表格创建之后，可以进行功能上的添加，能够使一些信息变得更加方便获取根据病人状态更改显示背景色当病人状态是治疗完成时，显示为绿色，当病人状态为治疗中时，显示为红色 <el-table-column label="状态" align="center"> <template #default="scope"> <el-tag :type="

2021-07-09 10:25:39 66

原创山东大学项目实训记录(三)——表格创建

由于服务器目前还没有搭建完成，所以一些功能需要先试用本地数据进行设计，首先是表格，表格主要用于用户信息的简略展示，用于跳转到详细信息。{ "patient_id": 1, "id_number": 1, "age": 18, "allergic": "无", "current_address": "广东省东莞市长安镇", "modify_time": "2019-

2021-07-09 10:11:00 142

原创山东大学项目实训记录(二)——element-plus小型组件的使用

搭建好环境之后，主要是熟悉一下element-plus各个组件的使用首先用这些组件搭建了一个个人用户页面，其中包括头像图片上传裁剪和保存(并没有连接服务器，没办法真正保存)，输入框的使用，时间选择器和地址的三级选择器其中在使用时间和地址选择器的过程中出现了一些问题，比如地址选择器选择器本质是一个普通的级联选择器，地址的数据来源才是真正重要的，element-plus是基于Vue 3.0开发的，算是比较新的方法，所以网上教程都比较少，我在网上搜寻了一段时间之后，找到了一个比较接近数据格式的文件，进行了适当

2021-07-07 17:07:58 160

原创山东大学项目实训记录(一)——分工和vue+element-plus环境搭建

本次山东大学选题为“牙科数据的分割与分类及可视化展示平台”，主要是关于网上平台的牙齿数据分析平台，该平台用于集中分析多种牙科数据，包括CBCT，口扫模型，以及口腔全景照片，头影侧位片，以及X光全景图等数据，主要功能有(1)多模态牙科数据读取;(2)多模态牙科数据可视化;(3)模态牙科数据处理;(4)面向牙科医生的交互功能设计;(5)案例管理;经过小组讨论我个人分配到的工作是前端开发，而我本人在前端的开发经历很少，也是第一次接触该方面。一开始我学习的是react框架，但是不久之后在队长的建议下选择弃用，所

2021-07-07 16:25:56 164

nHZIHZIHSIN的博客