@TOC
springboot578校车调度管理系统_r4le2--论文
研究背景
随着科学技术的发展，计算机已经成为人们办公工作中必不可少的工具，在这种背景下，网络技术已经被应用到各个方面，为了提高办公生活的效率，网络信息技术得到了迅速的发展。在这样的背景下，人类社会进入了一个新的信息时代。信息管理一直是一大难题的存在。用户具有很大的流动性和大量的服务。此时，迫切需要为校车调度管理找到一种有效便捷的信息管理方法。而日益成熟的计算机信息管理技术已成为解决这一问题的唯一选择。如今，计算机信息管理技术处理校车调度管理信息已经绰绰有余，事实上，信息管理技术已经渗透到各个行业的信息控制管理中，并具有举足轻重的地位。随着现代社会主义的不断进步，许多方面都在网络上实现，使网络成为最直接、方便、快捷的接入方式。
1.2 研究意义
在当今这个时代，计算机技术和网络的发展，在许许多多方面便捷了人们的生活，在校车调度信息的管理上也不例外。本论文旨在，通过利用计算机和互联网技术，设计并实现一套校车调度管理系统，帮助用户最大程度上的简化日常管理工作。
一个好的校车调度管理，将帮助用户从琐碎冗杂的日常管理事务中解放出来，更专心投入在校车调度管理的职责上，因而能更好的履行它自身的责任，这个校车调度管理系统也就间接地为美好社会的创建出了一份力。所以校车调度管理系统的设计和实现是必要的也是很有意义的。
1.3国内外研究现状
如今，因为无线网相关技术的快速，尤其是在网上进行资源的上传下载、搜索查询等技术，以及信息处理和语言开发技术的进步，同时编程语言、建模技术的不断发展，促使诸多的平台系统架构由C/S（客户端/服务器）更多的转变为采用B/C（浏览器/服务器）的架构，从而让程序平台网络端的系统架构迎来了一个新的阶段。
并且，在对国外办公自动化系统发展现状的了解中，发现国外办公自动化系统大多是一种门户的建设，除日常的办公业务外，与物流和资金流关系紧密的许多业务也都被设计为功能模块加入系统中。在这一点上，我国完全没有落后，通过采用集成了这些功能的系统，帮助学校各项业务的工作效率都得到了极大提高，从而持续地为学校带来更多经济收益。
而校车调度管理也是用户日常管理工作中的一部分，我国现有的管理系统中，大多都已包含了校车调度管理的内容，但是往往管理实施的具体程序不够全面规范，这说明在程序开发过程中对这部分功能的重视程度不够，校车调度信息也并未达到共享，这可能让用户信息流失使服务无法到位。
1.4本文组织结构
本论文将详细阐述校车调度管理系统的开发背景、应用可行性以及系统实现所具有的现实意义，在对校车调度管理系统进行详细的需求分析后，会根据需求分析的结果再结合实际情况为系统的实现选取合适的技术和架构，之后在上述分析论述的基础上进行系统设计，最后完成系统实现和测试。
本文共分为七章，分别是：
第一章绪论，在这一章中对校车调度管理系统的研究背景和意义进行介绍，同时浅述了信息管理系统的发展，明确了校车调度管理系统的实现的目的和方向。
第二章技术介绍，在本章中列举介绍了系统实现采用到的所有技术，包括一些主流的框架技术。
第三章需求分析，这一章对校车调度管理系统的需求进行了全面详细的分析，从系统实现的应用可行性、技术可行性，再到系统的功能、性能、安全性需求都做了说明分析，最后描述了系统的业务流程对需求分析进行补充。
第四章系统设计，这一章中包含了系统实现选取的架构模式，以及组成系统的各个功能模块。
第五章系统实现，本章是在经过前面几章的分析后，将校车调度管理系统开发实现，章节内容包括系统开发环境、运行环境和具体的功能模块实现。
第六章系统测试，模拟系统的实际应用环境，对编写完成的程序进行测试。在本章中列举了测试用例和测试结果。
第七章总结，对校车调度管理系统的整个设计和实现过程进行总结。
2 技术介绍
在这一章中，主要是罗列出实现系统将采用的技术框架并对其做简单介绍。本论文中的校车调度管理系统使用当下主流的java开发。系统前端的业务逻辑以及数据展示使用Springboot框架技术来实现，系统的底层数据库选用了关系型数据库MySQL。
2.1 java介绍
Java是使用最广泛的语言之一。它的代码是开源的，任何软件开发人员都可以使用。
Java语言有很多功能，它的代码非常简单，并且有很多编写方法。它具有良好的对象定向性，对平台的使用要求不高。所有平台都可以以高安全性能运行，因此非常适合系统开发。
Java平台可以声明无限制，并且可以在任何平台上运行。不需要用其他语言编辑的代码将运行。
2.2 Spring Boot框架介绍
Spring Boot是近几年最为流行的后台开发框架，它的诞生一改过去Spring框架开发中繁琐的配置，极大地简化了Spring应用的搭建和开发。Spring Boot框架不仅保有了Spring框架中的所有优秀特性，还通过使用特定的配置方式，在底层帮助开发人员在工程创建是就预先做了很多配置，这样在开发时就不再需要开发人员过多进行繁琐的配置了。另外在Spring Boot中集成了大量框架，这就使得开发人员不再需要到处寻找在导入开发中需要依赖的jar包，同时也解决了依赖包版本冲突问题，从而提高了依赖包引用的稳定性，从而实现了对Spring应用搭建和开发过程的简化。
在此基础上，通过使用Maven插件，让开发人员用Spring Boot就可以完成可执行WARs和JARs的创建，Spring Boot还直接嵌入了Tomcat、Jetty等web服务器，通过使用自动生成的starter项目对象模型简化了Maven的配置，并且具有诸如指标、健康检查等特性，而且Spring Boot会尽可能实现对Spring容器的自动配置，而没有代码生成，也就不再需要XML配置了。
Spring Boot框架采用了两个非常重要的策略，他们分别是：
（1）开箱即用（Out Of Box），意思是开发过程中，将所有需要导入的依赖通过使用Maven插件导入到项目中，同时使用注解而不再是XML配置文件统一配置管理对象的生命周期。这一策略减少了开发过程中复杂的配置也简化了对程序中所有依赖的管理，使开发人员能够将更多经历投入到业务逻辑层的开发。
（2）约定优于配置（Convention over configuration），这一策略就是将目标结构交给Spring Boot来配置，而开发者只需要定义软件开发中信息的规范。使用这个策略虽然使程序开发丧失了一部分灵活性，同时还让BUG定位的难度变大了，但却减少了开发人员在原有开发模式下必须进行的大量XML配置，从而让代码编译、测试和打包等工作能够自动完成。
2.3 MySQL数据库
MySQL是一个小型，廉价，快速的开源数据库。本系统对大量的数据进行了全面的支持，可以同时处理数百万的数据，在调试、管理、优化等方面都有较大的优势。它支持 SQL语句的通用规格，使用非常灵活和安全的授权和口令。虽然 Sql服务器易于使用，并且可以存储大量的数据，但是它比 MS Sql服务器要好得多。但是在网络连接的速度上，无法实现实时、高效的目的。因此，尽管 MySql有很大的缺陷，但是它的可移植性，支持多线程，优化查询算法，这使得 MySql在个人和中小型企业中非常流行[8]。
2.4本章小结
在本章中，详细介绍了本论文中实现的校车调度管理系统所采用的技术，描述了对mysql数据库，java技术和springboot框架的介绍。对上述技术的研究和应用，可以为程序后续的顺利开发提供帮助，在简化程序开发的同时提高开发效率和质量。
3需求分析
在这一章中将对本论文要实现的校车调度管理系统进行详尽的需求分析，本章内容主要涵盖了对系统预期应用环境的分析，对系统功能和性能需求的分析，最后还有对系统的非功能性需求以及业务流程的分析。这一章的内容将为之后的系统设计和实现提供可靠依据，是系统完整可靠实现的重要保障。
3.1可行性分析
3.1.1经济可行性分析
本系统所需要用到的所以的工具都是开源，不收费的，并且本系统因为不具有太过于复杂的结构，用户维护系统的费用也不高。所以，本系统的经济可行性是可行的。
3.1.2技术可行性分析
该论文中校车调度管理系统将被实现为采用 B/S架构，主要使用java语言进行系统后端开发，同时选用MySQL作为持久层交互的数据库，系统同时使用springboot框架，使开发过程能够变得高效简便。这里采用的MVC 三层架构，将业务逻辑、数据存取、界面显示分离开的程序开发模式，使用这种模式进行开发、组织代码，可以将所有的业务逻辑整合到一个实体类中，这样的话在有新需求提出或者某个需求需要进行变更的时候，不需要大量的修改程序，只需要找到对应的功能模块进行修改，这极大地方便了程序的维护，提高了程序的可扩展性。
3.2系统需求分析
3.2.1功能需求
本论文中实现的校车调度管理系统将以用户核心的日常信息维护工作为主，主要涵盖了首页，个人中心，驾驶员管理，车辆信息管理，借调车辆管理，车辆调度管理，车辆运营管理等功能，采用该校车调度管理系统将满足驾驶员日常管理工作的基本需求。本系统与用户操作的全过程相契合，从驾驶员登录开始录入系统，然后记录校车调度管理信息，从而让驾驶员对系统的管理都能够清晰规范，相应信息的检索和维护简单高效，进而提高驾驶员整体工作的效率。
3.2.2 性能需求
（1）故障率低
低故障率对校车调度管理系统十分重要，如果故障率较高，将会给用户的日常工作和服务带来很大不变。所以系统的实现要尽可能的保证更低的故障率，以保障系统的平稳运行。
因此，除了保证使用系统的硬件较为可靠外，在程序的设计上，我们需要增加一些预防性功能，比如当系统中的某些功能运行出现故障时，提供预防措施，例如给出错误信息告知用户然后结束该功能，否则的话可能因为一个功能的故障导致整个系统瘫痪。
（2）界面友好
校车调度管理系统设计的目的在于帮助用户能够更加高效轻松地进行日常的管理工作，所以作为一个工具，该系统应该被设计得易于上手使用，整个系统界面需要简洁明了、清晰易懂，而且一定要为用户提供必要的提示信息，比如在登录时用户密码或者用户名输入错误时要给予提示。总之一定要从使用者的角度出发，去设计用户操作界面。
3.2.3 安全性需求
首先要保证服务器不受攻击，数据库不能曝露在互联中。对使用系统的不同用户赋予相应的权限，用户只能进行自己权限允许范围内的操作。数据库中进行多用户管理，对用户的敏感信息如身份证信息，只有最高权限的数据库管理员用户可查询，其他用户无权限查看。
3.3 系统用例分析
系统综合网络空间开发设计要求。目的是将校车调度管理系统将传统管理方式转换为在网上管理，完成校车调度管理的方便快捷、安全性高、交易规范做了保障，目标明确。校车调度管理系统可以将功能划分为管理员功能和驾驶员功能。
（1）、管理员关键功能包含首页，个人中心，驾驶员管理，车辆信息管理，借调车辆管理，车辆调度管理，车辆运营管理等进行管理。管理员用例如下：
图3-1 管理员用例图
（2）、驾驶员关键功能包含首页，个人中心，车辆信息管理，借调车辆管理，车辆调度管理，车辆运营管理等进行管理。驾驶员用例如下：
图3-2 驾驶员用例图
3.4系统流程的分析
3.4.1 登录流程
登录流程如图3-3所示：
图3-3 登录流程
3.4.2个人中心管理流程
个人中心管理流程如图3-4所示：
图3-4 个人中心管理流程
3.4.3 系统操作流程
系统操作流程如图3-5所示：
图3-5 系统操作流程图
3.5本章小结
在本章中对本论文要实现的校车调度管理系统要实现的需求进行了详尽的说明，包括系统实现的可行性分析，整个系统在功能、性能和安全方面需求的分析，最后对整个系统不同身份用户的业务流程进行了有序的阐述。通过对以上内容的分析和说明，使得系统要实现的具体功能更加清晰，这给后面系统的设计和实现奠定了良好的基础，有助于整个程序开发的顺利进行。
10 
4系统设计
通过前三章的分析说明，本论文中校车调度管理系统已经具有了良好的实现基础，目前的第四章将对系统的具体实现进行说明介绍。
4.1系统结构设计
随着互联网的兴起以及国内外许多B/S架构的优秀系统被广泛使用而变得流行，B/S架构成为了系统开发的主流。本论文中的校车调度管理系统也同样采用了B/S架构标准的三层架构，即将整个系统划分为表现层、业务层和持久层这三层，并且在表现层采用MVC设计模型。
采用B/S架构，整个系统的核心业务逻辑都被放在服务器端，使得开发过程变得方便。虽然这会使得服务器端的压力较大，但在Ajax等技术兴起后，在前端也就是浏览器端也可以实现部分业务逻辑，一定程度上分担了服务器的压力。
同时，该系统采用的B/S架构，将整个系统进行分层。在表现层，主要负责处理从客户端接收到的请求，根据请求内容进行处理后向客户端响应结果。在业务层中，囊括了整个系统的核心业务逻辑，它位于数据访问层之上表现层之下，表现层的请求发送至业务层，业务层将根据编写好的业务逻辑与数据层进行交互。但是每个层之间是不具有必然联系的，表现层的请求发送至业务层，业务层在接受到后可以不进行处理，这并不会导致整个系统出现错误。所以只要层与层之间交互的接口不发生变化，某一层的变更并不会对其它层产生影响。所以这种架构的系统实际上很易于扩充，只要表现层有新的请求发送给业务层，业务层只要有相应的处理逻辑就好了，所以业务逻辑层的设计是十分重要的。而在持久层，主要进行的就是数据的存取，也就是和数据库打交道。
以上这种对程序进行分层的方式，可以使开发者专注于结构中的某一层，每一层要进行的工作十分明确，降低了耦合性，这种标准化的开发方式，有利于程序的复用，也极大地降低了之后对系统功能扩充和维护的成本。
4.2系统功能结构设计图
以上所涉及到的有关的功能，都是用功能结构图来简洁和清晰的表示出来，功能结构图就是能够把比较复杂的功能结构用图的形式清晰的描绘下来，并且为后续的设计以及测试等模块提供了明确的方向，在构思功能结构图的时候，便可以给设计的过程带来一定的思维导向，不至于在设计过程中有所遗漏，可以尽可能的明确系统所涉及到的功能。
以上所涉及到相关的功能以简洁清晰的方式来表示的，将复杂的结构以图形的形式画清楚，并且为后续的设计和测试模块提供了明确的方向，在构思功能结构图的时候，可以给设计过程带来一定的思维导向，在设计过程中不至于遗漏。可以尽可能明确系统所涉及的功能。
系统的总体功能结构图如图4-1所示。
图 4-1系统总体结构图
4.3数据库设计
数据库对所有信息管理系统来说都十分重要，因为系统中的核心功能大多都依赖于数据库，所以数据库的设计将对系统的性能和功能实现起到重要作用。该系统内总共有两类对象，分别是管理员和驾驶员，数据库设计将根据这些用户的属性来实现，同时，建立表的结构以及表与表之间的关系。
4.3.1 概念模型设计
数据库在程序的设计中扮演了重要的角色，它将系统涉及的数据全部容纳其中，在数据库设计时，为了能够明确思路，清晰明了一般都是先构建E-R图，ER图是由实体及其关系构成的图，通过E/R图可以清楚地描述系统涉及到的实体之间的相互关系。在系统中对一些主要的几个关键实体如下图：
（1) 车辆运营实体属性图如4-2所示
图4-2车辆运营实体属性图图
（2) 车辆信息实体属性图如4-3所示
图4-3车辆信息实体属性图
（3）报销申请实体E-R图如图4-4所示。
图4-4报销申请实体图
（4）借调车辆实体属性图如4-5所示。
图4-5借调车辆实体属性图
（5）驾驶员实体属性图如4-6所示。
图4-6驾驶员实体属性图
4.3.2 数据库表结构
本论文中的校车调度管理系统采用MySQL数据库，系统中的所有对象以及对象的所有属性都将在下列表格中展现。
表4-1：工作
| 字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
|---|---|---|---|---|---|
| id | bigint | 主键 | 主键 | ||
| addtime | timestamp | 创建时间 | CURRENT_TIMESTAMP | ||
| paichebianhao | varchar | 200 | 派车编号 | ||
| chufashijian | datetime | 出发时间 | |||
| daodashijian | datetime | 到达时间 | |||
| chufadidian | varchar | 200 | 出发地点 | ||
| mudedidian | varchar | 200 | 目的地点 | ||
| huichengshijian | datetime | 回程时间 | |||
| chengcherenshu | varchar | 200 | 乘车人数 | ||
| banji | varchar | 200 | 班级 | ||
| daibanlaoshi | varchar | 200 | 带班老师 | ||
| jiaoshilianxidianhua | varchar | 200 | 教师联系电话 | ||
| shifouxuyaolinshihuanban | varchar | 200 | 是否需要临时换班 | ||
| jiashiyuangonghao | varchar | 200 | 驾驶驾驶员号 | ||
| jiashiyuanxingming | varchar | 200 | 驾驶员姓名 | ||
| lianxifangshi | varchar | 200 | 司机联系方式 | ||
| cheliangshenqingliyou | longtext | 4294967295 | 车辆申请理由 | ||
| zhuangtai | varchar | 200 | 状态 | ||
表4-2：配置文件
| 字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
|---|---|---|---|---|---|
| id | bigint | 主键 | 主键 | ||
| name | varchar | 100 | 配置参数名称 | ||
| value | varchar | 100 | 配置参数值 | ||
表4-3：车辆运营
| 字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
|---|---|---|---|---|---|
| id | bigint | 主键 | 主键 | ||
| addtime | timestamp | 创建时间 | CURRENT_TIMESTAMP | ||
| cheliangchexing | varchar | 200 | 车辆车型 | ||
| chepaihaoma | varchar | 200 | 车牌号码 | ||
| cheliangyanse | varchar | 200 | 车辆颜色 | ||
| jiashiyuangonghao | varchar | 200 | 驾驶驾驶员号 | ||
| jiashiyuanxingming | varchar | 200 | 驾驶员姓名 | ||
| youfei | float | 油费 | |||
| weixiufei | float | 维修费 | |||
| jiashiyuangongzi | float | 驾驶驾驶员资 | |||
| guolufei | float | 过路费 | |||
| butie | float | 补贴 | |||
| zongjine | float | 总金额 | |||
| dengjishijian | date | 登记时间 | |||
表4-4：车辆信息
| 字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
|---|---|---|---|---|---|
| id | bigint | 主键 | 主键 | ||
| addtime | timestamp | 创建时间 | CURRENT_TIMESTAMP | ||
| cheliangchexing | varchar | 200 | 车辆车型 | ||
| chepaihaoma | varchar | 200 | 车牌号码 | ||
| cheliangyanse | varchar | 200 | 车辆颜色 | ||
| jianxiuzhuangtai | varchar | 200 | 检修状态 | ||
| shiyongnianxian | varchar | 200 | 使用年限 | ||
| zaikeliang | varchar | 200 | 载客量 | ||
| shiyongzhuangtai | varchar | 200 | 使用状态 | ||
| shigulishi | longtext | 4294967295 | 事故历史 | ||
表4-5：报销申请
| 字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
|---|---|---|---|---|---|
| id | bigint | 主键 | 主键 | ||
| addtime | timestamp | 创建时间 | CURRENT_TIMESTAMP | ||
| xiangmubianhao | varchar | 200 | 项目编号 | ||
| jiashiyuangonghao | varchar | 200 | 驾驶驾驶员号 | ||
| jiashiyuanxingming | varchar | 200 | 驾驶员姓名 | ||
| baoxiaoxiangmu | varchar | 200 | 报销项目 | ||
| baoxiaojine | varchar | 200 | 报销金额 | ||
| pingzheng | longtext | 4294967295 | 凭证 | ||
| shenqingshijian | datetime | 申请时间 | |||
| beizhu | longtext | 4294967295 | 备注 | ||
| sfsh | varchar | 200 | 是否审核 | 待审核 | |
| shhf | longtext | 4294967295 | 审核回复 | ||
表4-6：用户表
| 字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
|---|---|---|---|---|---|
| id | bigint | 主键 | 主键 | ||
| username | varchar | 100 | 用户名 | ||
| password | varchar | 100 | 密码 | ||
| role | varchar | 100 | 角色 | 管理员 | |
| addtime | timestamp | 新增时间 | CURRENT_TIMESTAMP | ||
表4-7：token表
| 字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
|---|---|---|---|---|---|
| id | bigint | 主键 | 主键 | ||
| userid | bigint | 用户id | |||
| username | varchar | 100 | 用户名 | ||
| tablename | varchar | 100 | 表名 | ||
| role | varchar | 100 | 角色 | ||
| token | varchar | 200 | 密码 | ||
| addtime | timestamp | 新增时间 | CURRENT_TIMESTAMP | ||
| expiratedtime | timestamp | 过期时间 | CURRENT_TIMESTAMP | ||
表4-8：借调车辆
| 字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
|---|---|---|---|---|---|
| id | bigint | 主键 | 主键 | ||
| addtime | timestamp | 创建时间 | CURRENT_TIMESTAMP | ||
| jiediaogongsi | varchar | 200 | 借调公司 | ||
| jiediaocheliang | varchar | 200 | 借调车辆 | ||
| jiediaoshijian | date | 借调时间 | |||
| jiashiyuangonghao | varchar | 200 | 驾驶驾驶员号 | ||
| jiashiyuanxingming | varchar | 200 | 驾驶员姓名 | ||
| jiediaowanglaididian | varchar | 200 | 借调往来地点 | ||
| beizhu | longtext | 4294967295 | 备注 | ||
表4-9：驾驶员
| 字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
|---|---|---|---|---|---|
| id | bigint | 主键 | 主键 | ||
| addtime | timestamp | 创建时间 | CURRENT_TIMESTAMP | ||
| jiashiyuangonghao | varchar | 200 | 驾驶驾驶员号 | ||
| mima | varchar | 200 | 密码 | ||
| jiashiyuanxingming | varchar | 200 | 驾驶员姓名 | ||
| jiashizhenghao | varchar | 200 | 驾驶证号 | ||
| xingbie | varchar | 200 | 性别 | ||
| jialing | int | 驾龄 | |||
| lianxifangshi | varchar | 200 | 联系方式 | ||
| jiashichexing | varchar | 200 | 驾驶车型 | ||
| zhicheng | varchar | 200 | 职称 | ||
4.4本章小结
本章主要是对校车调度管理信息进行系统设计，详细的说明了该系统实现所采用的架构、系统中所有的功能模块，并以表格的形式展现了系统持久层中的所有实体和实体的所有属性。明确的功能说明和详尽的数据陈列，方便将系统业务和数据联系起来，为后面的程序开发提供方便。
5 系统实现
在上一章中，已经本论文中的校车调度管理系统进行了全面的系统设计。接下来第五章对本校车调度管理系统的实现过程进行说明，包括对该校车调度管理系统所需的开发环境、运行环境的说明以及对上一章中提到的各种内容的实现。
5.1系统开发环境以及运行环境
5.1.1 系统开发环境
表5-1 开发环境
| 开发使用的操作系统 | Windows10 |
|---|---|
| 开发使用的编程语言 | java |
| 开发框架选择 | springboot |
| 选取的数据库 | MySQL |
5.1.2 系统运行环境
本校车调度管理系统的运行环境如表5-2所示。
表5-2 客户端运行环境
| 运行使用操作系统 | Windows10 |
|---|---|
| 客户端软件 | Chrome浏览器 |
5.2管理员模块实现
管理员登录，在登录页面正确输入用户名和密码后，进入操作系统进行操作；如图5-1所示。
图5-1 管理员登录界面
管理员进入主界面，主要功能包括对首页，个人中心，驾驶员管理，车辆信息管理，借调车辆管理，车辆调度管理，车辆运营管理等进行操作。管理员主界面如图5-2所示：
图5-2管理员主界面
管理员点击驾驶员管理。在驾驶员页面输入驾驶员工号和驾驶员姓名进行查询、新增或删除驾驶员列表，并根据需要对驾驶员详情信息进行详情、修改或删除操作；如图5-3所示：
图5-3驾驶员管理界面
管理员点击车辆信息管理。在车辆信息页面输入车辆类型和车辆号码进行查询、新增或删除车辆信息列表，并根据需要对车辆详情信息进行详情、修改或删除操作；如图5-4所示：
图5-4车辆信息管理界面
管理员点击借调车辆管理。在借调车辆页面输入借调公司，选择驾驶员工号和选择借调车辆进行查询、新增或删除借调车辆列表，并根据需要对借调车辆详情信息进行详情，修改或删除操作；如图5-5所示：
图5-5借调车辆管理界面
管理员点击车辆调度管理。在车辆调度页面输入车辆编号，出发地点，目的地点，是否需要临时换班和驾驶员姓名进行查询，新增或删除车辆调度列表，并根据需要对车辆调度详情信息进行详情，修改或删除操作；如图5-6所示：
图5-6车辆调度管理界面
管理员点击车辆运营管理。在车辆运营页面输入选择车辆车型，车辆号码，选择驾驶员工号和登记时间进行查询，新增或删除车辆运营列表，日报表，月报表和年报表，并根据需要对车辆运营详情信息进行详情，修改或删除操作；如图5-7所示：
图5-7车辆运营主界面
5.3驾驶员模块实现
驾驶员进入主界面，主要包括对首页，个人中心，车辆信息管理，借调车辆管理，车辆调度管理，车辆运营管理等进行操作。驾驶员主界面如图5-8所示：
图5-8驾驶员主界面
驾驶员点击车辆运营管理。在车辆运营页面输入选择车辆车型，车辆号码，选择驾驶员工号和登记时间进行查询车辆运营列表，并根据需要对车辆运营详情信息进行详情操作；如图5-9所示：
图5-9车辆运营主界面
5.4本章小结
在本章中对系统的开发和应用环境进行说明，这些内容为下一章测试时的环境搭建提供依据。本章还通过文字说明和截图的方式对系统应用的界面做了简要介绍。
系统
ConfigController.java
package com.controller;
import java.util.Arrays;
import java.util.Map;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import com.annotation.IgnoreAuth;
import com.baomidou.mybatisplus.mapper.EntityWrapper;
import com.entity.ConfigEntity;
import com.service.ConfigService;
import com.utils.MPUtil;
import com.utils.PageUtils;
import com.utils.R;
import com.utils.ValidatorUtils;
/**
* 登录相关
*/
@RequestMapping("config")
@RestController
public class ConfigController{
@Autowired
private ConfigService configService;
/**
* 列表
*/
@RequestMapping("/page")
public R page(@RequestParam Map<String, Object> params,ConfigEntity config){
EntityWrapper<ConfigEntity> ew = new EntityWrapper<ConfigEntity>();
PageUtils page = configService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, config), params), params));
return R.ok().put("data", page);
}
/**
* 列表
*/
@IgnoreAuth
@RequestMapping("/list")
public R list(@RequestParam Map<String, Object> params,ConfigEntity config){
EntityWrapper<ConfigEntity> ew = new EntityWrapper<ConfigEntity>();
PageUtils page = configService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, config), params), params));
return R.ok().put("data", page);
}
/**
* 信息
*/
@RequestMapping("/info/{id}")
public R info(@PathVariable("id") String id){
ConfigEntity config = configService.selectById(id);
return R.ok().put("data", config);
}
/**
* 详情
*/
@IgnoreAuth
@RequestMapping("/detail/{id}")
public R detail(@PathVariable("id") String id){
ConfigEntity config = configService.selectById(id);
return R.ok().put("data", config);
}
/**
* 根据name获取信息
*/
@RequestMapping("/info")
public R infoByName(@RequestParam String name){
ConfigEntity config = configService.selectOne(new EntityWrapper<ConfigEntity>().eq("name", "faceFile"));
return R.ok().put("data", config);
}
/**
* 保存
*/
@PostMapping("/save")
public R save(@RequestBody ConfigEntity config){
// ValidatorUtils.validateEntity(config);
configService.insert(config);
return R.ok();
}
/**
* 修改
*/
@RequestMapping("/update")
public R update(@RequestBody ConfigEntity config){
// ValidatorUtils.validateEntity(config);
configService.updateById(config);//全部更新
return R.ok();
}
/**
* 删除
*/
@RequestMapping("/delete")
public R delete(@RequestBody Long[] ids){
configService.deleteBatchIds(Arrays.asList(ids));
return R.ok();
}
}
BaoxiaoshenqingServiceImpl.java
package com.service.impl;
import org.springframework.stereotype.Service;
import java.util.Map;
import java.util.List;
import com.baomidou.mybatisplus.mapper.Wrapper;
import com.baomidou.mybatisplus.mapper.EntityWrapper;
import com.baomidou.mybatisplus.plugins.Page;
import com.baomidou.mybatisplus.service.impl.ServiceImpl;
import com.utils.PageUtils;
import com.utils.Query;
import com.dao.BaoxiaoshenqingDao;
import com.entity.BaoxiaoshenqingEntity;
import com.service.BaoxiaoshenqingService;
import com.entity.vo.BaoxiaoshenqingVO;
import com.entity.view.BaoxiaoshenqingView;
@Service("baoxiaoshenqingService")
public class BaoxiaoshenqingServiceImpl extends ServiceImpl<BaoxiaoshenqingDao, BaoxiaoshenqingEntity> implements BaoxiaoshenqingService {
@Override
public PageUtils queryPage(Map<String, Object> params) {
Page<BaoxiaoshenqingEntity> page = this.selectPage(
new Query<BaoxiaoshenqingEntity>(params).getPage(),
new EntityWrapper<BaoxiaoshenqingEntity>()
);
return new PageUtils(page);
}
@Override
public PageUtils queryPage(Map<String, Object> params, Wrapper<BaoxiaoshenqingEntity> wrapper) {
Page<BaoxiaoshenqingView> page =new Query<BaoxiaoshenqingView>(params).getPage();
page.setRecords(baseMapper.selectListView(page,wrapper));
PageUtils pageUtil = new PageUtils(page);
return pageUtil;
}
@Override
public List<BaoxiaoshenqingVO> selectListVO(Wrapper<BaoxiaoshenqingEntity> wrapper) {
return baseMapper.selectListVO(wrapper);
}
@Override
public BaoxiaoshenqingVO selectVO(Wrapper<BaoxiaoshenqingEntity> wrapper) {
return baseMapper.selectVO(wrapper);
}
@Override
public List<BaoxiaoshenqingView> selectListView(Wrapper<BaoxiaoshenqingEntity> wrapper) {
return baseMapper.selectListView(wrapper);
}
@Override
public BaoxiaoshenqingView selectView(Wrapper<BaoxiaoshenqingEntity> wrapper) {
return baseMapper.selectView(wrapper);
}
}
CommonServiceImpl.java
package com.service.impl;
import java.util.List;
import java.util.Map;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.dao.CommonDao;
import com.service.CommonService;
/**
* 系统用户
*/
@Service("commonService")
public class CommonServiceImpl implements CommonService {
@Autowired
private CommonDao commonDao;
@Override
public List<String> getOption(Map<String, Object> params) {
return commonDao.getOption(params);
}
@Override
public Map<String, Object> getFollowByOption(Map<String, Object> params) {
return commonDao.getFollowByOption(params);
}
@Override
public void sh(Map<String, Object> params) {
commonDao.sh(params);
}
@Override
public int remindCount(Map<String, Object> params) {
return commonDao.remindCount(params);
}
@Override
public Map<String, Object> selectCal(Map<String, Object> params) {
return commonDao.selectCal(params);
}
@Override
public List<Map<String, Object>> selectGroup(Map<String, Object> params) {
return commonDao.selectGroup(params);
}
@Override
public List<Map<String, Object>> selectValue(Map<String, Object> params) {
return commonDao.selectValue(params);
}
@Override
public List<Map<String, Object>> selectTimeStatValue(Map<String, Object> params) {
return commonDao.selectTimeStatValue(params);
}
}
add-or-update.vue
<template>
<div class="addEdit-block" :style='{"padding":"10px 30px 30px","background":"url(http://codegen.caihongy.cn/20230228/47752d6be3a94e8892a83ec2a70c8443.png)"}' style="width: 100%;">
<el-form
:style='{"border":"1px solid #ddd","padding":"30px","boxShadow":"0 0px 0px #ddd","borderRadius":"5px","background":"#ffffff"}'
class="add-update-preview"
ref="ruleForm"
:model="ruleForm"
:rules="rules"
label-width="180px"
>
<template >
<el-form-item :style='{"margin":"0 0 20px 0"}' class="input" v-if="type!='info'" label="借调公司" prop="jiediaogongsi">
<el-input v-model="ruleForm.jiediaogongsi" placeholder="借调公司" clearable :readonly="ro.jiediaogongsi"></el-input>
</el-form-item>
<el-form-item :style='{"margin":"0 0 20px 0"}' v-else class="input" label="借调公司" prop="jiediaogongsi">
<el-input v-model="ruleForm.jiediaogongsi" placeholder="借调公司" readonly></el-input>
</el-form-item>
<el-form-item :style='{"margin":"0 0 20px 0"}' class="select" v-if="type!='info'" label="借调车辆" prop="jiediaocheliang">
<el-select :disabled="ro.jiediaocheliang" v-model="ruleForm.jiediaocheliang" placeholder="请选择借调车辆" >
<el-option
v-for="(item,index) in jiediaocheliangOptions"
v-bind:key="index"
:label="item"
:value="item">
</el-option>
</el-select>
</el-form-item>
<el-form-item :style='{"margin":"0 0 20px 0"}' v-else class="input" label="借调车辆" prop="jiediaocheliang">
<el-input v-model="ruleForm.jiediaocheliang"
placeholder="借调车辆" readonly></el-input>
</el-form-item>
<el-form-item :style='{"margin":"0 0 20px 0"}' class="date" v-if="type!='info'" label="借调时间" prop="jiediaoshijian">
<el-date-picker
format="yyyy 年 MM 月 dd 日"
value-format="yyyy-MM-dd"
v-model="ruleForm.jiediaoshijian"
type="date"
:readonly="ro.jiediaoshijian"
placeholder="借调时间"
></el-date-picker>
</el-form-item>
<el-form-item :style='{"margin":"0 0 20px 0"}' class="input" v-else-if="ruleForm.jiediaoshijian" label="借调时间" prop="jiediaoshijian">
<el-input v-model="ruleForm.jiediaoshijian" placeholder="借调时间" readonly></el-input>
</el-form-item>
<el-form-item :style='{"margin":"0 0 20px 0"}' class="select" v-if="type!='info'" label="驾驶员工号" prop="jiashiyuangonghao">
<el-select :disabled="ro.jiashiyuangonghao" @change="jiashiyuangonghaoChange" v-model="ruleForm.jiashiyuangonghao" placeholder="请选择驾驶员工号">
<el-option
v-for="(item,index) in jiashiyuangonghaoOptions"
v-bind:key="index"
:label="item"
:value="item">
</el-option>
</el-select>
</el-form-item>
<el-form-item :style='{"margin":"0 0 20px 0"}' class="input" v-else-if="ruleForm.jiashiyuangonghao" label="驾驶员工号" prop="jiashiyuangonghao">
<el-input v-model="ruleForm.jiashiyuangonghao" placeholder="驾驶员工号" readonly></el-input>
</el-form-item>
<el-form-item :style='{"margin":"0 0 20px 0"}' class="input" v-if="type!='info'" label="驾驶员姓名" prop="jiashiyuanxingming">
<el-input v-model="ruleForm.jiashiyuanxingming" placeholder="驾驶员姓名" clearable :readonly="ro.jiashiyuanxingming"></el-input>
</el-form-item>
<el-form-item :style='{"margin":"0 0 20px 0"}' v-else class="input" label="驾驶员姓名" prop="jiashiyuanxingming">
<el-input v-model="ruleForm.jiashiyuanxingming" placeholder="驾驶员姓名" readonly></el-input>
</el-form-item>
<el-form-item :style='{"margin":"0 0 20px 0"}' class="input" v-if="type!='info'" label="借调往来地点" prop="jiediaowanglaididian">
<el-input v-model="ruleForm.jiediaowanglaididian" placeholder="借调往来地点" clearable :readonly="ro.jiediaowanglaididian"></el-input>
</el-form-item>
<el-form-item :style='{"margin":"0 0 20px 0"}' v-else class="input" label="借调往来地点" prop="jiediaowanglaididian">
<el-input v-model="ruleForm.jiediaowanglaididian" placeholder="借调往来地点" readonly></el-input>
</el-form-item>
</template>
<el-form-item :style='{"margin":"0 0 20px 0"}' class="textarea" v-if="type!='info'" label="备注" prop="beizhu">
<el-input
style="min-width: 200px; max-width: 600px;"
type="textarea"
:rows="8"
placeholder="备注"
v-model="ruleForm.beizhu" >
</el-input>
</el-form-item>
<el-form-item :style='{"margin":"0 0 20px 0"}' v-else-if="ruleForm.beizhu" label="备注" prop="beizhu">
<span :style='{"fontSize":"14px","lineHeight":"40px","color":"#333","fontWeight":"500","display":"inline-block"}'>{{ruleForm.beizhu}}</span>
</el-form-item>
<el-form-item :style='{"padding":"0","margin":"0"}' class="btn">
<el-button :style='{"border":"0","cursor":"pointer","padding":"0","margin":"0 20px 0 0","outline":"none","color":"rgba(255, 255, 255, 1)","borderRadius":"4px","background":"#337ab7","width":"128px","lineHeight":"40px","fontSize":"14px","height":"40px"}' v-if="type!='info'" type="primary" class="btn-success" @click="onSubmit">提交</el-button>
<el-button :style='{"border":"1px solid #1b5a90","cursor":"pointer","padding":"0","margin":"0","outline":"none","color":"#1b5a90","borderRadius":"4px","background":"rgba(255, 255, 255, 1)","width":"128px","lineHeight":"40px","fontSize":"14px","height":"40px"}' v-if="type!='info'" class="btn-close" @click="back()">取消</el-button>
<el-button :style='{"border":"1px solid #1b5a90","cursor":"pointer","padding":"0","margin":"0","outline":"none","color":"#1b5a90","borderRadius":"4px","background":"rgba(255, 255, 255, 1)","width":"128px","lineHeight":"40px","fontSize":"14px","height":"40px"}' v-if="type=='info'" class="btn-close" @click="back()">返回</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
// 数字，邮件，手机，url，身份证校验
import { isNumber,isIntNumer,isEmail,isPhone, isMobile,isURL,checkIdCard } from "@/utils/validate";
export default {
data() {
let self = this
var validateIdCard = (rule, value, callback) => {
if(!value){
callback();
} else if (!checkIdCard(value)) {
callback(new Error("请输入正确的身份证号码"));
} else {
callback();
}
};
var validateUrl = (rule, value, callback) => {
if(!value){
callback();
} else if (!isURL(value)) {
callback(new Error("请输入正确的URL地址"));
} else {
callback();
}
};
var validateMobile = (rule, value, callback) => {
if(!value){
callback();
} else if (!isMobile(value)) {
callback(new Error("请输入正确的手机号码"));
} else {
callback();
}
};
var validatePhone = (rule, value, callback) => {
if(!value){
callback();
} else if (!isPhone(value)) {
callback(new Error("请输入正确的电话号码"));
} else {
callback();
}
};
var validateEmail = (rule, value, callback) => {
if(!value){
callback();
} else if (!isEmail(value)) {
callback(new Error("请输入正确的邮箱地址"));
} else {
callback();
}
};
var validateNumber = (rule, value, callback) => {
if(!value){
callback();
} else if (!isNumber(value)) {
callback(new Error("请输入数字"));
} else {
callback();
}
};
var validateIntNumber = (rule, value, callback) => {
if(!value){
callback();
} else if (!isIntNumer(value)) {
callback(new Error("请输入整数"));
} else {
callback();
}
};
return {
id: '',
type: '',
ro:{
jiediaogongsi : false,
jiediaocheliang : false,
jiediaoshijian : false,
jiashiyuangonghao : false,
jiashiyuanxingming : false,
jiediaowanglaididian : false,
beizhu : false,
},
ruleForm: {
jiediaogongsi: '',
jiediaocheliang: '',
jiediaoshijian: '',
jiashiyuangonghao: '',
jiashiyuanxingming: '',
jiediaowanglaididian: '',
beizhu: '',
},
jiediaocheliangOptions: [],
jiashiyuangonghaoOptions: [],
rules: {
jiediaogongsi: [
],
jiediaocheliang: [
],
jiediaoshijian: [
],
jiashiyuangonghao: [
],
jiashiyuanxingming: [
],
jiediaowanglaididian: [
],
beizhu: [
],
}
};
},
props: ["parent"],
computed: {
},
components: {
},
created() {
this.ruleForm.jiediaoshijian = this.getCurDate()
},
methods: {
// 下载
download(file){
window.open(`${file}`)
},
// 初始化
init(id,type) {
if (id) {
this.id = id;
this.type = type;
}
if(this.type=='info'||this.type=='else'){
this.info(id);
}else if(this.type=='logistics'){
this.logistics=false;
this.info(id);
}else if(this.type=='cross'){
var obj = this.$storage.getObj('crossObj');
for (var o in obj){
if(o=='jiediaogongsi'){
this.ruleForm.jiediaogongsi = obj[o];
this.ro.jiediaogongsi = true;
continue;
}
if(o=='jiediaocheliang'){
this.ruleForm.jiediaocheliang = obj[o];
this.ro.jiediaocheliang = true;
continue;
}
if(o=='jiediaoshijian'){
this.ruleForm.jiediaoshijian = obj[o];
this.ro.jiediaoshijian = true;
continue;
}
if(o=='jiashiyuangonghao'){
this.ruleForm.jiashiyuangonghao = obj[o];
this.ro.jiashiyuangonghao = true;
continue;
}
if(o=='jiashiyuanxingming'){
this.ruleForm.jiashiyuanxingming = obj[o];
this.ro.jiashiyuanxingming = true;
continue;
}
if(o=='jiediaowanglaididian'){
this.ruleForm.jiediaowanglaididian = obj[o];
this.ro.jiediaowanglaididian = true;
continue;
}
if(o=='beizhu'){
this.ruleForm.beizhu = obj[o];
this.ro.beizhu = true;
continue;
}
}
}
// 获取用户信息
this.$http({
url: `${this.$storage.get('sessionTable')}/session`,
method: "get"
}).then(({ data }) => {
if (data && data.code === 0) {
var json = data.data;
} else {
this.$message.error(data.msg);
}
});
this.$http({
url: `option/cheliangxinxi/chepaihaoma`,
method: "get"
}).then(({ data }) => {
if (data && data.code === 0) {
this.jiediaocheliangOptions = data.data;
} else {
this.$message.error(data.msg);
}
});
this.$http({
url: `option/jiashiyuan/jiashiyuangonghao`,
method: "get"
}).then(({ data }) => {
if (data && data.code === 0) {
this.jiashiyuangonghaoOptions = data.data;
} else {
this.$message.error(data.msg);
}
});
},
// 下二随
jiashiyuangonghaoChange () {
this.$http({
url: `follow/jiashiyuan/jiashiyuangonghao?columnValue=`+ this.ruleForm.jiashiyuangonghao,
method: "get"
}).then(({ data }) => {
if (data && data.code === 0) {
if(data.data.jiashiyuanxingming){
this.ruleForm.jiashiyuanxingming = data.data.jiashiyuanxingming
}
} else {
this.$message.error(data.msg);
}
});
},
// 多级联动参数
info(id) {
this.$http({
url: `jiediaocheliang/info/${id}`,
method: "get"
}).then(({ data }) => {
if (data && data.code === 0) {
this.ruleForm = data.data;
//解决前台上传图片后台不显示的问题
let reg=new RegExp('../../../upload','g')//g代表全部
} else {
this.$message.error(data.msg);
}
});
},
// 提交
onSubmit() {
var objcross = this.$storage.getObj('crossObj');
//更新跨表属性
var crossuserid;
var crossrefid;
var crossoptnum;
if(this.type=='cross'){
var statusColumnName = this.$storage.get('statusColumnName');
var statusColumnValue = this.$storage.get('statusColumnValue');
if(statusColumnName!='') {
var obj = this.$storage.getObj('crossObj');
if(statusColumnName && !statusColumnName.startsWith("[")) {
for (var o in obj){
if(o==statusColumnName){
obj[o] = statusColumnValue;
}
}
var table = this.$storage.get('crossTable');
this.$http({
url: `${table}/update`,
method: "post",
data: obj
}).then(({ data }) => {});
} else {
crossuserid=this.$storage.get('userid');
crossrefid=obj['id'];
crossoptnum=this.$storage.get('statusColumnName');
crossoptnum=crossoptnum.replace(/\[/,"").replace(/\]/,"");
}
}
}
this.$refs["ruleForm"].validate(valid => {
if (valid) {
if(crossrefid && crossuserid) {
this.ruleForm.crossuserid = crossuserid;
this.ruleForm.crossrefid = crossrefid;
let params = {
page: 1,
limit: 10,
crossuserid:this.ruleForm.crossuserid,
crossrefid:this.ruleForm.crossrefid,
}
this.$http({
url: "jiediaocheliang/page",
method: "get",
params: params
}).then(({
data
}) => {
if (data && data.code === 0) {
if(data.data.total>=crossoptnum) {
this.$message.error(this.$storage.get('tips'));
return false;
} else {
this.$http({
url: `jiediaocheliang/${!this.ruleForm.id ? "save" : "update"}`,
method: "post",
data: this.ruleForm
}).then(({ data }) => {
if (data && data.code === 0) {
this.$message({
message: "操作成功",
type: "success",
duration: 1500,
onClose: () => {
this.parent.showFlag = true;
this.parent.addOrUpdateFlag = false;
this.parent.jiediaocheliangCrossAddOrUpdateFlag = false;
this.parent.search();
this.parent.contentStyleChange();
}
});
} else {
this.$message.error(data.msg);
}
});
}
} else {
}
});
} else {
this.$http({
url: `jiediaocheliang/${!this.ruleForm.id ? "save" : "update"}`,
method: "post",
data: this.ruleForm
}).then(({ data }) => {
if (data && data.code === 0) {
this.$message({
message: "操作成功",
type: "success",
duration: 1500,
onClose: () => {
this.parent.showFlag = true;
this.parent.addOrUpdateFlag = false;
this.parent.jiediaocheliangCrossAddOrUpdateFlag = false;
this.parent.search();
this.parent.contentStyleChange();
}
});
} else {
this.$message.error(data.msg);
}
});
}
}
});
},
// 获取uuid
getUUID () {
return new Date().getTime();
},
// 返回
back() {
this.parent.showFlag = true;
this.parent.addOrUpdateFlag = false;
this.parent.jiediaocheliangCrossAddOrUpdateFlag = false;
this.parent.contentStyleChange();
},
}
};
</script>
<style lang="scss" scoped>
.amap-wrapper {
width: 100%;
height: 500px;
}
.search-box {
position: absolute;
}
.el-date-editor.el-input {
width: auto;
}
.add-update-preview .el-form-item /deep/ .el-form-item__label {
padding: 0 10px 0 0;
color: #666;
font-weight: 500;
width: 180px;
font-size: 16px;
line-height: 40px;
text-align: right;
}
.add-update-preview .el-form-item /deep/ .el-form-item__content {
margin-left: 180px;
}
.add-update-preview .el-input /deep/ .el-input__inner {
border: 1px solid #5479bb;
border-radius: 4px;
padding: 0 12px;
box-shadow: 1px 2px 3px #eee;
outline: none;
color: #aaa;
width: 400px;
font-size: 14px;
height: 40px;
}
.add-update-preview .el-select /deep/ .el-input__inner {
border: 1px solid #5479bb;
border-radius: 4px;
padding: 0 10px;
box-shadow: 1px 2px 3px #eee;
outline: none;
color: #aaa;
width: 200px;
font-size: 14px;
height: 40px;
}
.add-update-preview .el-date-editor /deep/ .el-input__inner {
border: 1px solid #5479bb;
border-radius: 4px;
padding: 0 10px 0 30px;
box-shadow: 1px 2px 3px #eee;
outline: none;
color: #aaa;
width: 200px;
font-size: 14px;
height: 40px;
}
.add-update-preview /deep/ .el-upload--picture-card {
background: transparent;
border: 0;
border-radius: 0;
width: auto;
height: auto;
line-height: initial;
vertical-align: middle;
}
.add-update-preview /deep/ .upload .upload-img {
border: 1px dashed #5479bb;
cursor: pointer;
border-radius: 6px;
color: #5479bb;
width: 200px;
font-size: 32px;
line-height: 120px;
text-align: center;
height: 120px;
}
.add-update-preview /deep/ .el-upload-list .el-upload-list__item {
border: 1px dashed #5479bb;
cursor: pointer;
border-radius: 6px;
color: #5479bb;
width: 200px;
font-size: 32px;
line-height: 120px;
text-align: center;
height: 120px;
}
.add-update-preview /deep/ .el-upload .el-icon-plus {
border: 1px dashed #5479bb;
cursor: pointer;
border-radius: 6px;
color: #5479bb;
width: 200px;
font-size: 32px;
line-height: 120px;
text-align: center;
height: 120px;
}
.add-update-preview .el-textarea /deep/ .el-textarea__inner {
border: 1px solid #5479bb;
border-radius: 4px;
padding: 12px;
box-shadow: 1px 2px 3px #eee;
outline: none;
color: #aaa;
width: 400px;
font-size: 14px;
height: auto;
}
</style>
758
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
