基于Java Spring Boot+MySQL的智能校园资产管理系统设计与实现-论文

毕业设计（论文）毕业设计（论文）题目：基于JavaSpringBoot+MySQL的智能校园资产管理系统设计与实现学院/分校：年级、专业：教育层次：学生姓名：学号：指导教师：完成日期：论文独创性声明本人郑重声明：所呈交的毕业设计（论文），是本人在老师指导下，独立进行研究所取得的成果。论文中除了已经注明引用的内容外，不包含任何他人享有的著作权内容。其他个人和集体对本研究工作的启发和所做出的贡献，均已在论文中以明确的方式标明。如本文被查证有抄袭或剽窃行为，本人愿意承担由此引发的法律后果，并依据学校的规章制度接受相应处理。 签名： 日期： *************************************论文版权使用授权声明本人完全了解上海开放大学关于收集、保存、使用毕业论文的规定，同意如下各项内容：按照学校要求提交学位论文的印刷本和电子版本；学校有权保存学位论文的印刷本和电子版，并采用影印、缩印、扫描、数字化或其它手段保存论文；学校有权提供目录检索以及提供本论文全文或者部分的阅览服务，以及出版学位论文；学校有权按有关规定向国家有关部门或者机构送交论文的复印件和电子版；在不以赢利为目的的前提下，学校可以适当复制论文的部分或全部内容用于学术活动。签名： 日期：

目录TOC\t"参考文献二,1,标题1,2,标题2,3,标题3,4,标题4,5"11550摘要.I11550AbstractII第一章绪论 21.1研究背景与意义 21.2研究目标 21.3论文结构 3第二章需求分析 32.1系统总体需求 32.2功能需求分析 32.3非功能需求 42.4系统架构设计 42.5系统功能结构 5第三章系统设计 53.1系统流程设计 53.2数据库设计 64.1后端实现 94.2前端实现 20第五章系统测试 435.1测试环境 435.2功能测试 445.4安全性测试 465.5测试结论 46第六章总结与展望 476.1工作总结 476.2系统特色 476.3未来展望 47参考文献 48致谢 48PAGE摘要随着高校规模的不断扩大和"智慧校园"建设的深入推进，校园固定资产的数量激增，管理复杂度日益提高。针对当前许多高校仍采用手工或电子表格等落后管理方式导致的效率低下、信息不透明、账实不符等问题，本文设计并实现了一个基于JavaSpringBoot和MySQL的智能校园资产管理系统。系统采用B/S架构，前端使用Vue.js+ElementUI，后端采用SpringBoot+MyBatis-plus框架，实现了资产全生命周期管理、权限控制、资产盘点、数据可视化等核心功能。测试结果表明，系统运行稳定，功能完善，能够有效提升高校资产管理效率和管理水平，为智慧校园建设提供了有力的技术支持。关键词：资产管理；SpringBoot；Vue.js；MySQL；智慧校园AbstractDrivenbythecontinuousexpansionofuniversityscaleandthein-depthadvancementof"SmartCampus"initiatives,thefixedassetsofcampuseshavesurgedinquantity,accompaniedbyincreasinglyhighmanagementcomplexity.Inresponsetoprevalentissuessuchaslowefficiency,informationopacity,anddiscrepanciesbetweenrecordsandphysicalassets—problemslargelyattributabletooutdatedmanagementmethodslikemanualrecord-keepingorspreadsheetsstillusedinmanyinstitutions—thispaperdesignsandimplementsanintelligentcampusassetmanagementsystembasedonJavaSpringBootandMySQL.ThesystemadoptsaB/Sarchitecture,utilizingVue.jsandElementUIforthefrontend,andtheSpringBootframeworkwithMyBatis-plusforthebackend.Itcorefunctionalitiesincludefullassetlifecyclemanagement,permissioncontrol,assetinventory,anddatavisualization.Testresultsdemonstratethatthesystemoperatesstablywithfullyfunctionalfeatures,effectivelyenhancingtheefficiencyandmanagementlevelofuniversityassetadministration.IttherebyprovidesrobusttechnicalsupportfortheconstructionofSmartCampuses.Keywords:

AssetManagement;SpringBoot;Vue.js;MySQL;SmartCampus第一章绪论1.1研究背景与意义在当前高等教育快速发展的背景下，由于高校固定资产体量的持续增长与构成的日趋复杂，其管理工作对精细化与专业化提出了更高要求。传统的资产管理方式主要方式为手工台账或简单的电子表格，其存在诸多弊端：资产信息更新不及时、账实不符现象普遍、盘点工作耗时费力、资产闲置与重复购置并存、责任追溯困难等。在“智慧校园”建设背景下，以信息化赋能资产管理提质增效，是高校优化资源配置、提升治理能力的内在要求。构建一个智能化的资产管理系统，实现资产的全生命周期精准管理与资源优化配置，对于提升高校治理能力、降低运营成本、提高资源使用效率具有重要的现实意义。1.2研究目标本研究旨在设计并实现一个基于JavaSpringBoot后端框架和MySQL数据库的智能校园资产管理系统，具体目标包括：1.实现资产全流程数字化管理，覆盖资产申购、入库、领用、调拨、维修至报废的全过程；2.以流程自动化与条码技术为路径，着眼于解放人力、提升效率，更致力于从源头夯实资产数据的准确性。3.利用多维度数据统计与可视化技术，用数据来支撑资源规划与效益评估；4.建立权责明确的资产管理制度，预防资产流失；5.采用主流、稳定的技术栈，确保系统易于维护与扩展。1.3论文结构本文共分为六章：第一章绪论，介绍研究背景、意义和目标；第二章需求分析，详细分析系统功能和非功能需求；第三章系统设计，包括系统架构、数据库设计和核心模块设计；第四章系统实现，详细描述各功能模块的实现过程；第五章系统测试，验证系统功能和性能；第六章总结与展望，总结研究成果并展望未来工作。第二章需求分析2.1系统总体需求智能校园资产管理系统需要满足高校对资产管理的核心需求，包括资产信息的集中管理、资产使用流程的规范化、资产状态的实时跟踪、资产数据的统计分析等。系统应当提供友好的用户界面、完善的角色权限管理、灵活的业务流程配置和可靠的数据安全保障。2.2功能需求分析2.2.1用户权限管理系统需要实现基于角色的访问控制（RBAC），分为系统管理员、资产管理员、部门负责人和普通用户等不同角色，每个角色在系统中具有不同的数据访问和操作权限。2.2.2资产信息管理实现资产信息的录入、修改、删除、批量导入导出、高级查询等功能。支持资产基本信息、使用信息、价值信息等的全面管理。2.2.3资产生命周期管理覆盖资产从申购、入库、领用、调拨、维修到报废的全流程管理，实现流程的电子化审批和状态跟踪。2.2.4资产盘点管理支持盘点任务的创建、分配、执行和结果核对，自动生成盘盈/盘亏报告等便捷操作方式。2.2.5数据统计与可视化提供多维度资产统计分析和图表展示，包括资产分布统计、资产状态统计、资产价值分析等。2.3非功能需求2.3.1性能需求系统响应时间：普通操作响应时间小于2秒，复杂查询响应时间小于5秒；并发用户数：支持至少100个用户同时在线操作；数据容量：支持至少10万条资产记录的管理。2.3.2安全性需求用户身份认证和权限控制；敏感数据加密存储；操作日志记录和审计；防止SQL注入、XSS等常见网络攻击。2.3.3可扩展性需求采用模块化设计，便于功能扩展；预留接口，支持与其他系统集成；支持分布式部署，提高系统扩展性。2.4系统架构设计系统采用前后端分离的B/S架构，前端使用Vue.js+ElementUI构建用户界面，后端采用SpringBoot框架提供RESTfulAPI接口，数据库使用MySQL，系统架构如图2-1所示。2.5系统功能结构系统主要包括用户管理、资产管理、流程管理、盘点管理和统计报表五大模块，具体功能结构如图2-2所示。第三章系统设计3.1系统流程设计3.1.1资产入库流程资产管理员创建资产入库单，填写资产名称，资产类别，单价等资产信息；系统生成资产编号和标签，展示在资产列表；部门负责人在审批管理系统菜单中审批入库申请；审批通过后，更新资产状态为"在库"；系统记录入库操作日志。3.1.2资产领用流程资产领用菜单中用户提交资产领用申请，选择需要领用的资产；部门负责人在审批系统菜单中审批领用申请；审批通过后，更新资产状态为"在用"，责任人更新为当前用户；系统记录领用操作日志。3.1.3资产调拨流程资产管理员或当前责任人发起资产调拨申请；调出部门和调入部门负责人分别审批；审批通过后，资产所属部门和使用人相应更新；系统记录调拨操作日志。3.2数据库设计3.2.1实体属性分析用户实体（User）属性：用户ID、用户名、密码、真实姓名、部门ID、角色ID、邮箱、电话、状态、创建时间资产实体（Asset）属性：资产ID、资产编号、资产名称、资产类别、型号、规格、单价、购置日期、使用部门、使用人、存放地点、资产状态、供应商、保修期、创建时间资产类别实体（AssetCategory）属性：类别ID、类别名称、父类别ID、类别编码、创建时间流程记录实体（Process）属性：流程ID、资产ID、流程类型、当前状态、申请人、审批人、申请时间、审批时间、审批意见部门实体（Department）属性：部门ID、部门名称、员工ID、部门编号、创建时间、更新时间角色（Role）属性：角色ID、角色名、角色编号、创建时间、更新时间3.2.2E-R图设计系统E-R图如图3-1所示，展示了用户、资产、部门、角色、流程记录等实体之间的关系。3.2.3数据库表设计用户表（user）CREATETABLEuser(user_idBIGINTAUTO_INCREMENTPRIMARYKEY,usernameVARCHAR(50)NOTNULLUNIQUE,passwordVARCHAR(100)NOTNULL,real_nameVARCHAR(50)NOTNULL,department_idBIGINT,role_idBIGINT,emailVARCHAR(100),phoneVARCHAR(20),statusINTDEFAULT1,create_timeDATETIME,update_timeDATETIME,deletedINTDEFAULT0);资产表（asset）CREATETABLEasset(asset_idBIGINTAUTO_INCREMENTPRIMARYKEY,asset_numberVARCHAR(50)NOTNULLUNIQUE,asset_nameVARCHAR(100)NOTNULL,category_idBIGINT,modelVARCHAR(100),specificationVARCHAR(200),unit_priceDECIMAL(10,2),purchase_dateDATE,use_departmentBIGINT,user_idBIGINT,storage_locationVARCHAR(200),asset_statusVARCHAR(20),supplierVARCHAR(100),warranty_periodDATE,create_timeDATETIME,update_timeDATETIME,deletedINTDEFAULT0);资产类别表（asset_category）CREATETABLEasset_category(category_idBIGINTAUTO_INCREMENTPRIMARYKEY,category_nameVARCHAR(50)NOTNULL,parent_idBIGINT,category_codeVARCHAR(50),create_timeDATETIME,update_timeDATETIME,deletedINTDEFAULT0);流程记录表（process）CREATETABLEprocess(process_idBIGINTAUTO_INCREMENTPRIMARYKEY,asset_idBIGINTNOTNULL,process_typeVARCHAR(20)NOTNULL,current_statusVARCHAR(20)NOTNULL,applicant_idBIGINT,approver_idBIGINT,apply_timeDATETIME,approve_timeDATETIME,approval_commentTEXT,create_timeDATETIME,update_timeDATETIME,deletedINTDEFAULT0);创建部门表（department）CREATETABLEdepartment(department_idBIGINTAUTO_INCREMENTPRIMARYKEY,department_nameVARCHAR(100)NOTNULL,parent_idBIGINT,department_codeVARCHAR(50),create_timeDATETIME,update_timeDATETIME,deletedINTDEFAULT0);创建角色表（department）CREATETABLErole(role_idBIGINTAUTO_INCREMENTPRIMARYKEY,role_nameVARCHAR(50)NOTNULL,role_codeVARCHAR(50),create_timeDATETIME,update_timeDATETIME,deletedINTDEFAULT0);第四章系统实现4.1后端实现4.1.1技术栈框架：SpringBoot2.7.x安全框架：SpringSecurity+JWT持久层：MyBatis-Plus数据库：MySQL8.0其他：Maven、Lombok、Hutool等4.1.2权限管理模块实现关键代码：JWT认证过滤器JwtAutheticationFiter.java@Component@RequiredArgsConstructorpublicclassJwtAuthenticationFilterextendsOncePerRequestFilter{privatefinalJwtUtiljwtUtil;@OverrideprotectedvoiddoFilterInternal(HttpServletRequestrequest,HttpServletResponseresponse,FilterChainfilterChain)throwsServletException,IOException{finalStringauthHeader=request.getHeader("Authorization");finalStringtoken;finalStringusername;if(authHeader==null||!authHeader.startsWith("Bearer")){filterChain.doFilter(request,response);return;}token=authHeader.substring(7);username=jwtUtil.getUsernameFromToken(token);if(username!=null&&SecurityContextHolder.getContext().getAuthentication()==null){if(jwtUtil.validateToken(token)){UsernamePasswordAuthenticationTokenauthToken=newUsernamePasswordAuthenticationToken(username,null,null);authToken.setDetails(newWebAuthenticationDetailsSource().buildDetails(request));SecurityContextHolder.getContext().setAuthentication(authToken);}}filterChain.doFilter(request,response);}}关键代码：权限控制配置security.config.javapackageorg.example;importlombok.RequiredArgsConstructor;importorg.springframework.context.annotation.Bean;importorg.springframework.context.annotation.Configuration;importorg.springframework.security.config.annotation.web.builders.HttpSecurity;importorg.springframework.security.config.annotation.web.configuration.EnableWebSecurity;importorg.springframework.security.config.http.SessionCreationPolicy;importorg.springframework.security.web.SecurityFilterChain;importorg.springframework.security.web.authentication.UsernamePasswordAuthenticationFilter;@Configuration@EnableWebSecurity@RequiredArgsConstructorpublicclassSecurityConfig{privatefinalJwtAuthenticationFilterjwtAuthenticationFilter;@BeanpublicSecurityFilterChainfilterChain(HttpSecurityhttp)throwsException{http.csrf().disable().sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS).and().authorizeRequests().antMatchers("/auth/login").permitAll().anyRequest().authenticated();http.addFilterBefore(jwtAuthenticationFilter,UsernamePasswordAuthenticationFilter.class);returnhttp.build();}}4.1.3资产信息管理模块实现关键代码：资产服务实现AssetServiceImpl.javas@Service@RequiredArgsConstructorpublicclassAssetServiceImplextendsServiceImpl<AssetMapper,Asset>implementsAssetService{privatefinalProcessMapperprocessMapper;@Override@TransactionalpublicbooleanstoreAsset(AssetDTOassetDTO){//生成资产编号StringassetNumber=generateAssetNumber();Assetasset=newAsset();asset.setAssetNumber(assetNumber);asset.setAssetName(assetDTO.getAssetName());asset.setCategoryId(assetDTO.getCategoryId());asset.setModel(assetDTO.getModel());asset.setSpecification(assetDTO.getSpecification());asset.setUnitPrice(assetDTO.getUnitPrice());asset.setPurchaseDate(assetDTO.getPurchaseDate());asset.setUseDepartment(assetDTO.getUseDepartment());asset.setStorageLocation(assetDTO.getStorageLocation());asset.setSupplier(assetDTO.getSupplier());asset.setWarrantyPeriod(assetDTO.getWarrantyPeriod());asset.setAssetStatus("待审批");booleansaved=save(asset);if(saved){//创建入库流程记录Processprocess=newProcess();process.setAssetId(asset.getAssetId());process.setProcessType("入库");process.setCurrentStatus("待审批");process.setApplicantId(assetDTO.getApplicantId());process.setApplyTime(LocalDateTime.now());processMapper.insert(process);}returnsaved;}@Override@TransactionalpublicbooleanapplyForUse(LongassetId,LonguserId){Assetasset=getById(assetId);if(asset==null||!"在库".equals(asset.getAssetStatus())){returnfalse;}//创建领用流程记录Processprocess=newProcess();process.setAssetId(assetId);process.setProcessType("领用");process.setCurrentStatus("待审批");process.setApplicantId(userId);process.setApplyTime(LocalDateTime.now());returnprocessMapper.insert(process)>0;}@Override@TransactionalpublicbooleanapproveUse(LongprocessId,LongapproverId,Stringcomment){Processprocess=processMapper.selectById(processId);if(process==null||!"待审批".equals(process.getCurrentStatus())){returnfalse;}//更新流程状态process.setCurrentStatus("已审批");process.setApproverId(approverId);process.setApproveTime(LocalDateTime.now());process.setApprovalComment(comment);processMapper.updateById(process);//更新资产状态Assetasset=getById(process.getAssetId());asset.setAssetStatus("在用");asset.setUserId(process.getApplicantId());returnupdateById(asset);}@Override@TransactionalpublicbooleantransferAsset(LongassetId,LongtargetDepartmentId,LongtargetUserId){Assetasset=getById(assetId);if(asset==null){returnfalse;}//创建调拨流程记录Processprocess=newProcess();process.setAssetId(assetId);process.setProcessType("调拨");process.setCurrentStatus("待调出审批");process.setApplicantId(asset.getUserId());process.setApplyTime(LocalDateTime.now());returnprocessMapper.insert(process)>0;}@Override@TransactionalpublicbooleanapproveTransfer(LongprocessId,LongapproverId,Stringcomment){Processprocess=processMapper.selectById(processId);if(process==null){returnfalse;}if("待调出审批".equals(process.getCurrentStatus())){process.setCurrentStatus("待调入审批");}elseif("待调入审批".equals(process.getCurrentStatus())){process.setCurrentStatus("已审批");//更新资产信息//这里需要根据实际情况更新资产部门和使用人}process.setApproverId(approverId);process.setApproveTime(LocalDateTime.now());process.setApprovalComment(comment);returnprocessMapper.updateById(process)>0;}privateStringgenerateAssetNumber(){return"AST"+System.currentTimeMillis();}}4.1.4资产生命周期管理实现关键代码：流程服务实现process.java@Data@TableName("process")publicclassProcess{@TableId(type=IdType.AUTO)privateLongprocessId;privateLongassetId;privateStringprocessType;privateStringcurrentStatus;privateLongapplicantId;privateLongapproverId;privateLocalDateTimeapplyTime;privateLocalDateTimeapproveTime;privateStringapprovalComment;@TableField(fill=FieldFill.INSERT)privateLocalDateTimecreateTime;@TableField(fill=FieldFill.INSERT_UPDATE)privateLocalDateTimeupdateTime;@TableLogicprivateIntegerdeleted;}@DatapublicclassProcessApprovalDTO{@NotNull(message="流程ID不能为空")privateLongprocessId;@NotNull(message="审批人不能为空")privateLongapproverId;@NotBlank(message="审批意见不能为空")privateStringapprovalComment;}@MapperpublicinterfaceProcessMapperextendsBaseMapper<Process>{}4.2前端实现4.2.1技术栈框架：Vue3+TypeScriptUI组件库：ElementPlus状态管理：Pinia路由：VueRouter4HTTP客户端：Axios图表库：ECharts4.2.2资产列表页面实现关键代码：资产列表组件AssetList.vue<template><divclass="asset-list"><divclass="search-container"><el-form:model="searchForm"inline><el-form-itemlabel="资产名称"><el-inputv-model="searchForm.assetName"placeholder="请输入资产名称"/></el-form-item><el-form-itemlabel="资产状态"><el-selectv-model="searchForm.assetStatus"placeholder="请选择状态"><el-optionlabel="全部"value=""/><el-optionlabel="在库"value="在库"/><el-optionlabel="在用"value="在用"/><el-optionlabel="待审批"value="待审批"/></el-select></el-form-item><el-form-item><el-buttontype="primary"@click="handleSearch">查询</el-button><el-button@click="handleReset">重置</el-button></el-form-item></el-form></div><divclass="table-container"><el-table:data="assetStore.assetList"v-loading="assetStore.loading"borderstripe><el-table-columnprop="assetNumber"label="资产编号"width="120"/><el-table-columnprop="assetName"label="资产名称"width="150"/><el-table-columnprop="model"label="型号"width="120"/><el-table-columnprop="specification"label="规格"width="150"/><el-table-columnprop="unitPrice"label="单价"width="100"><template#default="{row}">¥{{row.unitPrice}}</template></el-table-column><el-table-columnprop="assetStatus"label="状态"width="100"><template#default="{row}"><el-tag:type="getStatusType(row.assetStatus)">{{row.assetStatus}}</el-tag></template></el-table-column><el-table-columnprop="storageLocation"label="存放地点"width="150"/><el-table-columnprop="purchaseDate"label="购置日期"width="120"/><el-table-columnlabel="操作"width="200"fixed="right"><template#default="{row}"><el-buttonsize="small"@click="handleView(row)">查看</el-button><el-buttonsize="small"type="primary"v-if="row.assetStatus==='在库'"@click="handleApply(row)">领用</el-button><el-buttonsize="small"type="warning"v-if="row.assetStatus==='在用'"@click="handleTransfer(row)">调拨</el-button></template></el-table-column></el-table></div><divclass="pagination-container"><el-paginationv-model:current="pagination.current"v-model:size="pagination.size":total="pagination.total"@current-change="handlePageChange"layout="total,sizes,prev,pager,next,jumper"/></div></div></template><scriptsetup>import{onMounted,reactive}from'vue'import{useRouter}from'vue-router'import{useAssetStore}from'@/stores/asset'import{ElMessage}from'element-plus'constrouter=useRouter()constassetStore=useAssetStore()constsearchForm=reactive({assetName:'',assetStatus:''})constpagination=reactive({current:1,size:10,total:0})constgetStatusType=(status)=>{consttypeMap={'在库':'success','在用':'primary','待审批':'warning'}returntypeMap[status]||'info'}consthandleSearch=()=>{pagination.current=1fetchAssets()}consthandleReset=()=>{Object.keys(searchForm).forEach(key=>{searchForm[key]=''})handleSearch()}consthandlePageChange=(page)=>{pagination.current=pagefetchAssets()}consthandleView=(row)=>{//查看资产详情console.log('查看资产:',row)}consthandleApply=(row)=>{router.push({path:'/assets/apply',query:{assetId:row.assetId}})}consthandleTransfer=(row)=>{router.push({path:'/assets/transfer',query:{assetId:row.assetId}})}constfetchAssets=async()=>{assetStore.assetList=[{assetNumber:1,assetName:'',model:'',specification:'',unitPrice:'',assetStatus:'',storageLocation:'',purchaseDate:''},]//awaitassetStore.fetchAssets({//...searchForm,//page:pagination.current,//size:pagination.size//})}onMounted(()=>{fetchAssets()})</script><stylescoped>.asset-list{background:#fff;padding:20px;border-radius:4px;}.search-container{margin-bottom:20px;padding-bottom:20px;border-bottom:1pxsolid#e6e6e6;}.table-container{margin-bottom:20px;}.pagination-container{display:flex;justify-content:flex-end;}</style>4.2.3数据可视化实现关键代码：资产统计图表组件Dashboard.vue<template><divclass="dashboard"><divclass="header"><h2>系统概览</h2><p>欢迎使用校园资产管理系统</p></div><!--统计卡片--><el-row:gutter="20"class="stats-cards"><el-col:span="6"><el-cardclass="stats-card"shadow="hover"><divclass="stats-content"><divclass="stats-icontotal-assets"><el-icon><Box/></el-icon></div><divclass="stats-info"><divclass="stats-number">{{stats.totalAssets}}</div><divclass="stats-label">资产总数</div></div></div></el-card></el-col><el-col:span="6"><el-cardclass="stats-card"shadow="hover"><divclass="stats-content"><divclass="stats-iconin-stock"><el-icon><Collection/></el-icon></div><divclass="stats-info"><divclass="stats-number">{{stats.inStockAssets}}</div><divclass="stats-label">在库资产</div></div></div></el-card></el-col><el-col:span="6"><el-cardclass="stats-card"shadow="hover"><divclass="stats-content"><divclass="stats-iconin-use"><el-icon><User/></el-icon></div><divclass="stats-info"><divclass="stats-number">{{stats.inUseAssets}}</div><divclass="stats-label">在用资产</div></div></div></el-card></el-col><el-col:span="6"><el-cardclass="stats-card"shadow="hover"><divclass="stats-content"><divclass="stats-iconpending-approval"><el-icon><Clock/></el-icon></div><divclass="stats-info"><divclass="stats-number">{{stats.pendingApprovals}}</div><divclass="stats-label">待审批</div></div></div></el-card></el-col></el-row><!--图表和快速操作--><el-row:gutter="20"class="dashboard-content"><!--资产状态分布--><el-col:span="12"><el-cardclass="chart-card"shadow="never"><template#header><divclass="card-header"><span>资产状态分布</span></div></template><divclass="chart-container"><divref="statusChart"id="statusChart"style="height:300px;">111</div></div></el-card></el-col><!--快速操作--><el-col:span="12"><el-cardclass="quick-actions-card"shadow="never"><template#header><divclass="card-header"><span>快速操作</span></div></template><divclass="quick-actions"><el-row:gutter="20"><el-col:span="12"class="action-item"><el-buttontype="primary"class="action-button"@click="$router.push('/assets/store')"><el-iconclass="action-icon"><Plus/></el-icon><span>资产入库</span></el-button></el-col><el-col:span="12"class="action-item"><el-buttontype="success"class="action-button"@click="$router.push('/assets/apply')"><el-iconclass="action-icon"><Download/></el-icon><span>资产领用</span></el-button></el-col></el-row><el-row:gutter="20"style="margin-top:20px;"><el-col:span="12"class="action-item"><el-buttontype="warning"class="action-button"@click="$router.push('/assets/transfer')"><el-iconclass="action-icon"><Refresh/></el-icon><span>资产调拨</span></el-button></el-col><el-col:span="12"class="action-item"><el-buttontype="info"class="action-button"@click="$router.push('/approval')"><el-iconclass="action-icon"><Document/></el-icon><span>审批管理</span></el-button></el-col></el-row></div></el-card><!--待办事项--><el-cardclass="todo-card"shadow="never"style="margin-top:20px;"><template#header><divclass="card-header"><span>待办事项</span></div></template><divclass="todo-list"><divv-for="itemintodoList":key="item.id"class="todo-item":class="{urgent:item.priority==='high'}"><divclass="todo-content"><divclass="todo-title">{{item.title}}</div><divclass="todo-desc">{{item.description}}</div><divclass="todo-time">{{item.time}}</div></div><el-buttonv-if="item.action"size="small"type="primary"@click="handleTodoAction(item)">处理</el-button></div><divv-if="todoList.length===0"class="empty-todo">暂无待办事项</div></div></el-card></el-col></el-row><!--最近活动--><el-cardclass="recent-activities"shadow="never"style="margin-top:20px;"><template#header><divclass="card-header"><span>最近活动</span></div></template><el-timeline><el-timeline-itemv-for="activityinrecentActivities":key="activity.id":timestamp="activity.time":type="activity.type"><divclass="activity-content"><divclass="activity-title">{{activity.title}}</div><divclass="activity-desc">{{activity.description}}</div></div></el-timeline-item></el-timeline></el-card></div></template><scriptsetup>import{ref,reactive,onMounted,onUnmounted}from'vue'import{useRouter}from'vue-router'import*asechartsfrom'echarts'constrouter=useRouter()//统计数据conststats=reactive({totalAssets:1256,inStockAssets:843,inUseAssets:413,pendingApprovals:8})//待办事项consttodoList=ref([{id:1,title:'资产入库审批',description:'5条入库申请等待审批',time:'2024-01-15',priority:'high',action:()=>router.push('/approval')},{id:2,title:'资产领用审批',description:'3条领用申请等待审批',time:'2024-01-15',priority:'high',action:()=>router.push('/approval')},{id:3,title:'资产盘点',description:'本月资产盘点任务',time:'2024-01-20',priority:'medium'}])//最近活动constrecentActivities=ref([{id:1,title:'资产入库',description:'张三提交了笔记本电脑入库申请',time:'2024-01-1514:30:00',type:'primary'},{id:2,title:'资产领用',description:'李四领用了投影仪设备',time:'2024-01-1513:20:00',type:'success'},{id:3,title:'资产调拨',description:'王五发起了资产调拨申请',time:'2024-01-1511:45:00',type:'warning'},{id:4,title:'审批通过',description:'赵六审批通过了办公桌椅入库',time:'2024-01-1510:15:00',type:'info'}])//图表相关letstatusChart=nullconststatusChartRef=ref()//处理待办事项操作consthandleTodoAction=(item)=>{if(item.action){item.action()}}