如何使用ssm实现公交车信息管理系统+vue

槐_序

于 2024-09-10 21:44:55 发布

阅读量578

点赞数 12

分类专栏： ssm 管理系统计算机毕设文章标签： ssm 后端 java

本文链接：https://blog.csdn.net/weixin_43213064/article/details/142110041

版权

管理系统同时被 3 个专栏收录

199 篇文章 0 订阅

订阅专栏

计算机毕设

199 篇文章 0 订阅

订阅专栏

ssm

96 篇文章 1 订阅

订阅专栏

@TOC

ssm572公交车信息管理系统+vue

第1章绪论

1.1 研究背景

近年来，第三产业发展非常迅速，诸如计算机服务、旅游、娱乐、体育等服务行业，对整个社会的经济建设起到了极大地促进作用，这一点是毋庸置疑的。现下，国家也出台了一些列的政策来支持和鼓励第三服务产业的发展与完善，用以带动社会经济的发展[1]。所以，整体来说，国家是比较提倡发展第三方服务行业的。纵观计算机领域的整个发展历程，从计算机的诞生到现在，已经有几百年的历史了，计算机应用技术也逐步趋于成熟，并且相关的设计人员也在不断地对其进行改进和完善。再到如今，计算机已经发展成为一个比较热门的行业了。在高校中，计算机、人工智能等专业热度非常高，许多学生在选择专业的时候，大都优先考虑计算机专业。在社会上，计算机类行业也成为了比较受欢迎的行业，从在浏览器中访问的网址，到手机上的各种应用程序，到大型的软件服务设备，基本上都离不开计算机技术支持，以及硬件的支撑。

如今，互联网几乎遍布于世界的各个角落，人工智能、大数据占据的越来越重要的社会地位，比如疫情期间，通过大数据技术进行筛查，确定哪些人员无接触史，哪些人员需要重点观察，由此可以在极短的时间内，以最快的速度对疫情进行防控。在这个大背景环境的推动下，本人通过学习Java语言、MySQL数据库、SSM框架等相关的计算机技术，打好坚实的技术基础，方便后期对系统进行研发。而后再通过对系统进行分析,确定系统的总体功能需求，以及实现的可能性，方便接下来详细地设计相关的功能模块，最后成功的研发了一款基于SSM的公交车信息管理系统。本系统改善了传统的管理模式，将原先的手工记录和管理信息，改进为使用计算机存储和管理信息记录，极大地方便了工作人员对相关数据进行处理，为相关行业节约了不少的员工费用和管理开销，并且能够在较短的时间内响应用户的需求，这种便捷的操作，对于用户来说可以节省了不少时间和精力，也省去了不少的麻烦，极大了方便了用户。

1.2 研究意义

传统的公交车信息管理模式，主要是以人力为主进行管理和控制，由工作人员负责登记用户信息，再通过对照之前的信息记录，确定是否给用户提供相关的使用需求，以及如何提供能让用户满意的使用需求。这种管理模式已经适应不了时代的变化了，正在不断地走下坡路，并且逐步被信息化管理模式所取代。所谓的信息化管理模式，是现在主流的一种管理模式，其通过与计算机技术相结合的方式，对行业的整个工作模式和服务流程进行改进和完善。其主要通过使用计算机等设备，将工作服务流程电子化，并且进行存储记录，用以提高行业整体的服务水平。结合使用计算机技术，本人研发出一款基于SSM的公交车信息管理系统，采用电子化的方式对数据信息进行存储，便于工作人员对相关信息进行记录和管理，有利于提高相关行业的工作运营效率以及工作人员的管理速度，以此更好的满足用户的相关需求，最终达到提升用户的使用感受的目的，由此可见设计和实现本系统具有重要的意义和价值。

1.3 国内外研究现状

1.3.1国外研究现状

美国是最先发展计算机技术的众多国家之一，早在上个世纪，美国就快速的将计算机技术发展起来，并且将其运用在军事、医院、学校、社会服务等场所。日本、德国等国家紧随其后，不断地发展和完善计算机技术，侧重将医疗、社会服务等领域与计算机技术相结合[2]。而后随着社会的发展与进步，计算机技术逐渐趋于成熟。许多发达国家在探索将计算机技术应用于各行各业中时，从另一个角度来看，也在不断地推进相关行业的信息化管理进程，使得公交车管理也变得更加网络化、信息化了。有许多专家表示，可以结合使用图像处理软件、人工智能技术等相关工具，深度地分析公交车管理系统，主要从简化运行操作，加设功能模块，美化系统界面，保障数据安全等方面，更深层次地提升和优化系统，并且尽可能地在理想状态下做到实时的信息共享。

1.3.2国内研究现状

国内的计算机技术的发展虽然晚于国外，尤其是美国、英国、德国等发达国家。但是我国的计算机技术发展势头非常迅猛，近些年，也逐渐走向成熟和完善的阶段。现在，选择网上购物已经成为人们日常生活的一种常态趋势，当然这也离不开对于天猫、支付宝、微信等应用软件的使用[3]。许多企业结合使用了云计算、人工智能等先进的计算机技术，自主研发了行业相关的信息管理系统，计算机技术逐渐趋于成熟，使用设计的功能逐渐趋于完备。结合计算机技术，采用主流的B/S开发结构模式开发一款基于SSM的公交车信息管理系统。由此，本系统能够支持工作人员随时随地的通过使用浏览器进行访问操作，支持随时随地对相关的公交车信息进行管理，便于及时为用户提供一定的功能服务。并且所设计的系统基本上能够符合用户的客观使用需求，有利于充分协调相关行业的人力、财力、物力等资源，不断提高相关行业的管理质量和水平[4]。

1.4 研究思路

1.4.1研究内容

本文首先介绍了公交车信息管理系统的研究背景与意义，其次介绍了系统的总体功能设计，接着将对系统规划好的总体功能拆分成了各个功能子模块，然后详细地对每一个小的功能子模块进行设计，最后介绍了展示设计好的功能模块以及测试结果。系统主要分为管理员角色和用户角色，具体的功能设计包括注册登录管理、用户信息管理、车辆信息管理、公交线路管理等模块。注册登录管理功能是新用户在使用系统前，需要通过注册步骤，登记详细的信息资料，而后再通过输入正确的账号和密码，成功登录系统后，即可通过一系列的操作来满足自己的相关需求。用户信息管理功能是管理相关的用户信息资料，管理人员根据现实情况的需要，选择性的对用户信息记录进行更新处理。车辆信息管理是管理相关的车辆信息记录，保存详情的车辆情况信息，方便及时响应用户的服务请求。公交线路管理是管理相关的公交线路信息记录，方便相关人员及时查看公交线路信息，如果遇到异常的公交线路信息，可以及时对其进行处理，在较短的时间内解决问题，提高用户的使用体验。

1.4.2论文组织

基于SSM的公交车信息管理系统的设计与实现的论文组织安排，大致可以被分为七个章节，具体的内容如下：

第一章为绪论，本章主要介绍了系统的背景、现状、方法等内容。根据研究背景与意义，介绍所要设计的系统的研究背景和理论依据，再通过国内外研究现状，了解当前相关的系统软件产品的实际研究情况，最后通过研究内容与方法，总体概括系统的整个开发流程和实现步骤，为系统提供可靠的理论依据和技术支持。

第二章为相关技术介绍，本章主要介绍了开发所使用的相关技术。本系统主要使用的开发技术包括Java语言、SSM框架、MySQL数据库等，并且所使用的开发模式为B/S结构。其中，Java语言具有跨平台性，可移植性高，可以支持在不同的浏览器上运行本系统，MySQL数据库占用内存少，执行速度快，对于中小型系统的数据管理是非常好的选择。

第三章为系统分析，系统分析阶段主要是对系统进行需求和可行性分析，规划系统的功能设计，判断系统实现的可能性。根据需求分析，确认使用者对系统的基本功能需求，再通过在经济、操作、法律上进行可行性分析，分析系统研发的实际意义和使用价值，系统性能的稳定性和功能操作的便捷性，以及成功投入市场的可能性。

第四章为系统设计，系统设计阶段主要是对系统进行总体功能和数据库设计。通过介绍系统的总体功能设计，总体规划系统的功能模块，为系统的基本功能实现提供参考依据和设计思路。再通过介绍数据库设计，设计相关的数据二维表格存放和管理与系统有关的数据信息，便于相关人员管理与系统有关的数据信息，维护和更新数据信息的安全。

第五章为系统实现，系统实现阶段主要是对车辆信息管理、公交线路管理等功能模块进行阐述。通过前面介绍的系统分析，功能及数据库设计等相关内容，详细地实现系统功能模块。系统的具体实现步骤，就是对各子模块详细设计的过程，在整个系统设计过程中，这一阶段是极为重要，直接关系到用户对系统的使用感受。

第六章为系统测试，本章主要是对测试相关的内容进行叙述。本系统主要使用功能测试的方法，检查测验系统主要功能，测试所设计的系统功能模块能否正常打开，并且用户能够正常操作和使用，在系统运行过程中是否发生异常，如运行异常、数据异常、结果异常等，并且根据测试结果，给出相应的测试总结，由此得出相关结论，说明系统是否达到预期要求、设计目的。

1.5本人所作工作

公交车信息管理系统以B/S结构进行实现，本人通过使用idea工具编写相关的java代码，设计系统功能模块，再通过MySQL数据库管控数据资源，由此有利于对系统相关数据进行必要的管理和控制。系统设计的最关键的环节，则是需要通过SSM框架设计系统功能架构，再通过Tomcat服务器将系统发布到浏览器上，以便相关用户的操作和使用。本系统的设计和实现促进了相关行业的信息化建设，有利于简化相关人员工作流程，提高工作效率，提升工作幸福感。

5 第2章系统分析

第2章系统分析

2.1概述

在对系统进行设计之前，需要对选题进行需求分析、可行性分析、流程分析、数据字典等内容。根据需求分析阶段，大致确定用户使用系统所需要具有的功能模块需求，由此规划出系统需要设计的相关功能模块。根据可行性分析阶段，确定系统被相关研发人员设计和实现的具体可能。在通过对系统进行流程分析和数据字典设计内容，详细的分析设计系统的业务流程和数据流。

2.2需求分析

需求分析阶段是设计系统功能模块的总方向，可以这样来说，系统的整个的开发流程以及设计进度，基本上都是以需求分析为基本依据的[10]。需求分析阶段可以确定系统的基本功能设计，以及在最后的系统验收阶段，再通过对需求分析报告进行对比，验证系统的功能设计是否合理，能否满足用户的基本需要，最终判断总结系统是否成功现实。本文主要通过问卷调查的方式，来分析公交车信息管理系统所需要的相关功能[11]。根据调查结果显示，系统用户主要有两种类型，一种是以使用为主要目的的用户角色类型，另一种是以管理为主要目的的管理员角色类型。本系统主要功能需求包括车辆信息管理、公交线路管理等模块。其中，密码信息、用户信息、车辆信息、公交线路信息等都是非常重要的数据记录，在系统设计的过程中，需要进行一定的加密处理，确保数据安全性，切实的保护好用户的重要信息。管理员用例图如图2-1所示，用户用例图如图2-2所示。

图2-1管理员用例图

图2-2用户用例图

2.3可行性分析

2.3.1经济可行性

对系统进行经济可行性分析，也可以被称为对系统进行经济可行性研究，它是从社会的经济发展出发，通过研究整个的系统可行性，对成本收益情况进行全面地、具体地分析，并且根据所分析的可行性报告，为相关的投资者提供最科学的决策理论和最优的投资方案。本系统的开发促进了相关行业的信息化管理，管理人员可以直接通过在浏览器上发布公交车信息管理系统的网站地址，即可用户根据一定的需要，有选择的对系统相关功能进行操作。这种方式打破了时间和空间的限制，可以使得相关行业在较短的时间内最大化地管理公交车的相关信息。并且本系统所使用的开发技术和相关工具，大部分是开源的、免费的，所以可以节约很大一笔开发成本。综合上述内容分析可知，本系统的实现在经济层面上是具备可行性的。

2.3.2技术可行性

本系统是基于Java语言而进行开发的，因为Java语言容易学习、使用简单、稳定性强等特点，所以许多的开发技术人员均喜欢使用Java语言进行系统设计。现今很多程序系统的研究和开发，是通过使用Java语言进行编码设计的。此外，Java语言还具有跨平台的优点，这意味着所设计的系统是与平台无关的，也就说明由Java语言开发的系统可以支持在不同的浏览器上运行和使用。在条件大致相同的情况下，对比其他数据库，本系统使用的是MySQL数据库的相关语法简单易懂，数据库设计人员可以尽可能快的对其掌握和使用。MySQL数据库还具有占用系统内存少、功能齐全、响应速度快、使用不收费等特点，能够在极短时间内处理上千条信息记录，所以能够保证系统可以高效地运行和工作。综合上述内容分析可知，系统的实现在技术层面上是具备可行性的。

2.3.3操作可行性

如今，人们的日常生活已经离不开互联网的使用，在一定程度上，行业的信息化建设促进着社会的发展。人们通过使用手机上的应用程序，比如，通过使用电子商务系统，可以实现网上购物、在线支付等功能；通过使用国家官方网站，可以查看最新消息，申报个人业务；通过使用医院管理系统，可以进行网上预约挂号，在线查看体检报告等操作。在这些应用的背景下，本系统使用的是B/S开发结构模式，网站界面以人性化的设计为主，具有美观友好、交互性好等优点，用户不需要掌握一定的编程技术，直接通过对系统进行简单的功能操作，即可满足自己的使用需求。本系统还设计了一些提示信息，便于用户更好的理解系统相关功能，较快的以正确的操作方式来使用系统。综合上述内容分析可知，系统的实现在操作层面上是具备可行性的。

2.4系统流程分析

2.4.1开发流程

物流管理系统开发的主要流程，首先是先对系统进行需求分析，确定系统所需要设计的主要功能模块，再通过功能模块编码和数据库设计等过程，对系统进行设计和实现，系统的开发流程如图2-3所示。

![D:\用户目录\Documents\Tencent Files\736505925\FileRecv\DSH}__@$MA6E_EYBHK0`JA.png

图2-3开发流程图

2.4.2登录流程

用户需要通过登录物流管理系统，输入正确的账号、密码，才能成功使用本系统，实现自己所需的功能操作，登录流程图如图2-4所示。

图2-4登录流程图

2.4.3注册流程

首次使用本系统的新用户，需要通过注册操作，再通过登录操作，才能成功使用系统功能模块，注册流程图如图2-5所示。

图2-5注册流程图

2.4.4添加信息流程

当添加系统所需要的数据信息时，需要输入正确、合法的字符格式，才能成功添加数据信息，添加信息流程图如图2-6所示。

图2-6添加信息流程图

2.5建立数据字典

数据字典类似于数据库的目录，通过定义和解释数据中的数据项、数据结构、数据流程、数据处理等元素，使得用户理解和使用相关的数据，以便于根据实际的使用需求，对相关的数据信息进行访问和修改。

数据文件：管理员

文件组成：编号，用户名，密码，角色，新增时间

数据项：编号

数据类型：Int型

数据长度：20

数据项：用户名

数据类型：String型

数据长度：100

数据项：密码

数据类型：String型

数据长度：100

数据项：角色

数据类型：String型

数据长度：100

数据项：新增时间

数据类型：Date型

数据长度：-

数据文件：用户

文件组成：编号，账户，密码，用户姓名，手机号，身份证号，电子邮箱，性别，假删，创建时间

数据项：编号

数据类型：Int型

数据长度：11

数据项：账户

数据类型：String型

数据长度：200

数据项：密码

数据类型：String型

数据长度：200

数据项：用户姓名

数据类型：String型

数据长度：200

数据项：用户姓名

数据类型：String型

数据长度：200

数据项：手机号

数据类型：String型

数据长度：200

数据项：身份证号

数据类型：String型

数据长度：200

数据项：电子邮箱

数据类型：String型

数据长度：200

数据项：性别

数据类型：Integer型

数据长度：20

数据项：假删

数据类型：Integer型

数据长度：20

数据项：创建时间

数据类型：Date型

数据长度：-

数据文件：车辆

文件组成：编号，车辆编号，车辆类型，车辆详情，创建时间

数据项：编号

数据类型：Int

数据长度：11

数据项：车辆编号

数据类型：String型

数据长度：200

数据项：车辆类型

数据类型：Integer型

数据长度：20

数据项：车辆详情

数据类型：String型

数据长度：200

数据项：创建时间

数据类型：Date型

数据长度：-

数据文件：公交线路

文件组成：编号，线路名称，线路类型，发车时间，全程，票价，线路详情，创建时间

数据项：编号

数据类型：Int

数据长度：11

数据项：线路名称

数据类型：String型

数据长度：200

数据项：线路类型

数据类型：Integer型

数据长度：20

数据项：发车时间

数据类型：Date型

数据长度：-

数据项：全程

数据类型：String型

数据长度：200

数据项：票价

数据类型：Integer型

数据长度：20

数据项：线路详情

数据类型：String型

数据长度：200

数据项：创建时间

数据类型：Date型

数据长度：-

数据文件：排班

文件组成：编号，司机，开始时间，结束时间，排班详情，创建时间

数据项：编号

数据类型：Int

数据长度：11

数据项：司机

数据类型：String型

数据长度：200

数据项：开始时间

数据类型：Date型

数据长度：-

数据项：结束时间

数据类型：Date型

数据长度：-

数据项：排班详情

数据类型：String型

数据长度：200

数据项：创建时间

数据类型：Date型

数据长度：-

45 第3章系统设计

第3章系统设计

3.1 概述

通过对系统进行总体设计，确定系统总体的功能模块设计，规定系统实现的总方向，为后续系统的详细功能设计做准备。通过对系统进行数据库设计，管理和控制系统的相关的数据信息记录，方便后台数据库管理能够及时响应前台的用户使用服务需求。并且对系统主要的功能模块界面进行了展示了，也添加了一些必要的用户使用提示界面，便于相关的使用者加深对本系统的理解，在较短的时间内，掌握如何操作和使用本系统。

3.2 系统的总体设计

系统的总体功能设计，是需求分析的下个阶段，是系统实现的上个阶段，它是系统详细功能设计的一个大方向，也就是说系统的各类子功能模块的设计，都是以总体功能设计为目标而进行的。通过对系统进行需求分析可知，可以大致了解系统具体所需要的相关的主要功能模块。本系统主要的功能需求包括车辆信息管理、公交线路管理等模块。系统总体功能设计图如图3-1所示。

公交车信息管理系统

用户信息管理

排班信息管理

公交线路管理

位置信息管理

车辆信息管理

用户信息修改

用户信息新增

车辆信息添加

车辆信息删除

车辆信息修改

位置信息添加

位置信息修改

位置信息删除

排班信息添加

排班信息删改

排班信息删除

公交线路添加

公交线路修改

公交线路删除

公告信息管理

公告信息修改

公告信息删除

公告信息添加

图3-1 系统总体功能设计图

3.3 数据库设计

3.3.1 概念设计

本系统使用轻量级的MySQL数据库，对系统相关的数据信息进行管理和维护[12]。数据库设计阶段一般可以被分为概念设计和逻辑设计这两个阶段。在进行数据库相关设计的全过程中，两个阶段所起到作用是完全不同的，概念设计是实现数据库设计的主要基础，逻辑设计阶段是完成数据库设计的最终目标。概念设计阶段以设计实体-联系图（E-R图）的方式，将现实世界中用户的相关需求抽象化为虚拟世界中的概念模型。本人通过设计E-R图，详细地对系统各实体以及其存在的联系进行了表达。各实体信息的实体属性图如图3-2、图3-3、图3-4、图3-5、图3-6、图3-7、图3-8、图3-9、图3-10所示，系统总体E-R图如图图3-11所示。

图3-2 管理员信息实体属性图

图3-3 用户信息实体属性图

图3-4 司机信息实体属性图

图3-5 字典信息实体属性图

图3-6 车辆信息实体属性图

图3-7 公交线路信息实体属性图

图3-8 位置信息实体属性图

图3-9 排班信息实体属性图

图3-10 公告信息实体属性图

图3-11 系统总体E-R图

3.3.2 逻辑设计

逻辑设计阶段主要的工作是将概念设计中的E-R图，转换成方便系统进行存储和管理的二维表格形式。这一阶段也可以被称为数据库的详细设计，其直接关系到系统功能模块的正常运行、数据信息的正常更新等[13]。在设计过程中，需要充分考虑数据库的规范性和合理性，使得能够满足系统的功能和性能需求。本系统相关的数据表格设计内容如下所示。

表3-1 管理员信息表

序号	列名	数据类型	说明	允许空
1	id	Int	编号	否
2	username	String	用户名	是
3	password	String	密码	是
4	role	String	角色	是
5	addtime	Date	新增时间	是

表3-2 用户信息表

序号	列名	数据类型	说明	允许空
1	id	Int	编号	否
2	username	String	账户	是
3	password	String	密码	是
4	yonghu_name	String	用户姓名	是
5	yonghu_phone	String	手机号	是
6	yonghu_id_number	String	身份证号	是
7	yonghu_email	String	电子邮箱	是
8	sex_types	Integer	性别	是
9	yonghu_delete	Integer	假删	是
10	create_time	Date	创建时间	是

表3-3 司机信息表

序号	列名	数据类型	说明	允许空
1	id	Int	编号	否
2	siji_name	String	司机姓名	是
3	siji_phone	String	手机号	是
4	siji_number	String	司机工龄	是
5	siji_email	String	电子邮箱	是
6	sex_types	Integer	性别	是
7	siji_delete	Integer	假删	是
8	create_time	Date	创建时间	是

表3-4 字典信息表

序号	列名	数据类型	说明	允许空
1	id	Int	编号	否
2	dic_code	String	字段	是
3	dic_name	String	字段名	是
4	code_index	Integer	编码	是
5	index_name	String	编码名字	是
6	super_id	Integer	父字段编号	是
7	beizhu	String	备注	是
8	create_time	Date	创建时间	是

表3-5 车辆信息表

序号	列名	数据类型	说明	允许空
1	id	Int	编号	否
2	gongjiaoche_name	String	车辆编号	是
3	gongjiaoche_types	Integer	车辆类型	是
4	gongjiaoche_content	String	车辆详情	是
5	create_time	Date	创建时间	是

表3-6 公交线路信息表

序号	列名	数据类型	说明	允许空
1	id	Int	编号	否
2	gongjiaoxianlu_name	String	线路名称	是
3	gongjiaoxianlu_types	Integer	线路类型	是
4	gongjiaoxianlu_ shijian	Date	发车时间	是
5	quancheng	String	全程	是
6	gongjiaoxianlu_ numbe	Integer	票价	是
7	gongjiaoxianlu_ content	String	线路详情	是
8	create_time	Date	创建时间	是

表3-7 位置信息表

序号	列名	数据类型	说明	允许空
1	id	Int	编号	否
2	gongjiaoche_id	Integer	车辆	是
3	cheliangweizhi_dati	String	大体位置	是
4	cheliangweizhi_ fangxiang	String	行驶方向	是
5	cheliangweizhi_ mingcheng	String	下一站名称	是
6	cheliangweizhi_content	String	路线详情	是
7	create_time	Date	创建时间	是

表3-8 排班信息表

序号	列名	数据类型	说明	允许空
1	id	Int	编号	否
2	paiban_name	String	司机	是
3	paiban_a_time	Date	开始时间	是
4	paiban_b_time	Date	结束时间	是
5	paiban_content	String	排班详情	是
6	create_time	Date	创建时间	是

表3-9 公告信息表

序号	列名	数据类型	说明	允许空
1	id	Int	编号	否
2	news_name	String	公告标题	是
3	news_types	Integer	公告类型	是
4	news_photo	String	公告图片	是
5	insert_time	Date	添加时间	是
6	news_content	String	公告详情	是
7	create_time	Date	创建时间	是

3.5界面设计

3.5.1 个人中心

通过设计的个人中心功能模块，用户可以选择修改账号密码，查看个人资料信息，通过不定期的对个人账户密码进行更新，保障个人信息安全，修改密码界面设计如图3-12所示，个人信息界面设计如图3-13所示。

图3-12 修改密码界面

图3-13 个人信息界面

3.5.2 管理员管理

通过设计的管理员管理功能模块，管理用户可以管理相关的管理员用户信息资料，比如进行查看管理员的用户名信息，更新管理员的密码信息，删除已经注销的管理员用户信息记录等操作，管理员管理界面设计如图3-14所示。

图3-14 管理员管理界面

3.5.3 司机管理

通过设计的司机管理功能模块，管理用户可以管理相关的司机用户信息资料，比如进行查看司机用户的详细资料，修改司机的手机号码，删除已经注销的司机用户信息记录等操作，司机管理界面设计如图3-15所示。

图3-15 司机管理界面

3.5.4 用户管理

通过设计的用户管理功能模块，管理用户可以管理相关的用户信息资料，比如进行查看用户的详细资料，修改用户的电子邮箱，删除已经注销的用户信息记录等操作，用户管理界面设计如图3-16所示。

图3-16 用户管理界面

3.5.5 位置信息管理

通过设计的位置信息管理功能模块，管理用户可以管理相关的公交车位置信息记录，比如进行查看位置信息的详细内容，修改车辆的大致位置，删除已经失效的位置信息记录等操作，位置信息管理界面设计如图3-17所示。

图3-17 位置信息管理界面

3.5.6 基础数据管理

通过设计的基础数据管理功能模块，管理用户可以管理相关的车辆类型、线路类型、公告类型信息记录，比如进行查看车辆类型、线路类型、公告类型信息的详细内容，修改车辆类型、线路类型、公告类型的名称信息，删除失效的车辆类型、线路类型、公告类型信息记录等操作，车辆类型管理界面设计如图3-18所示，线路类型管理界面设计如图3-19所示，公告类型管理界面设计如图3-20所示。

图3-18 车辆类型管理界面

图3-19 线路类型管理界面

图3-20 公告类型管理界面

3.5.7 车辆信息管理

通过设计的车辆信息管理功能模块，管理用户可以管理相关的车辆信息记录，比如进行查看车辆信息的详细内容，修改车辆类型信息，删除失效的车辆信息记录等操作，车辆信息管理界面设计如图3-21所示。

图3-21 车辆信息管理界面

3.5.8 公交线路管理

通过设计的公交线路管理功能模块，管理用户可以管理相关的公交线路信息资料，比如进行查看公交线路信息的详细内容，修改公交线路名称信息，删除已经失效的公交线路信息记录等操作，公交线路管理界面设计如图3-22所示。

图3-22 公交线路管理界面

3.5.9 公告信息管理

通过设计的公告信息管理功能模块，用户可以管理相关的公告信息记录，比如进行查看公告信息的详细内容，修改公告图片信息，删除失效的公告信息记录等操作，公告信息管理界面设计如图3-23所示。

图3-23 公告信息管理界面

3.5.10 排班信息管理

通过设计的排班信息管理功能模块，用户可以管理相关的排班信息记录，比如进行查看排班信息的详细内容，修改排班开始时间和结束时间信息，删除失效的排班信息记录等操作，排班信息管理界面设计如图3-24所示。

图3-24 排班信息管理界面

第四章系统实施

4.1程序设计

本系统主要使用Java语言编码设计功能，MySQL数据库管控数据信息，SSM框架创建系统架构，通过这些关键技术对系统进行详细设计，设计和实现系统相关的功能模块。最后对系统进行测试，这一环节的结果，基本确定了系统是否成功实现，能否满足用户的实际功能需求。本系统主要使用功能测试的方法，对系统进行测试。

4.2开发工具介绍

4.2.1 B/S结构

就软件开发的现状而言，目前主要使用的系统开发结构模式大致可以分为C/S模式和B/S模式[5]。用户在使用基于C/S模式开发的系统时，必须下载相应的客户端，即应用程序，才能操作和使用软件系统的相关功能模块。从使用者的角度来看，由于下载和安装客户端的步骤比较繁琐，期间还需要确保下载网速的稳定性，以及安装步骤的正确性，进而增加了用户放弃使用该系统的可能性，由此可见C/S模式具有很大的局限性。

由于C/S模式适用于小范围的局域网，并且具有一定的通信效率，所以在以前系统规模很小的时代，主要使用C/S模式对系统开发。随着时代地发展以及社会地进步，C/S模式也越来越满足不了开发者的设计需要，以及使用者的使用需求[6]。当下，C/S模式已经满足不了实际的系统程序设计要求，由此，B/S模式以C/S模式为基础而被提出，并且在近些年逐渐发展成为主流的开发结构模式。在B/S模式下开发的系统，不再需要用户下载和安装相应的应用程序，直接通过使用浏览器，输入正确的网站地址，以访问网站的形式实现系统的相关功能操作，这一特点对C/S模式下的开发设计做出了极大地改进，当然，使用本系统的前提是确保账号和密码是合法的。

4.2.2 Java语言

Java语言是一种将数据和操作方法封装成对象整体的程序设计语言，它拥有着优秀的技术体系结构。目前在市场上，很大一部分的应用系统主要使用Java语言进行开发[7]。Java语言具有简单易懂，操作方便，健壮性强等优点，开发人员能够的在短时间内理解和掌握Java语言，并将其运用到具体的系统开发过程中学。针对于系统内存管理问题，Java语言为解决这类问题，内部提供了垃圾回收机制。为了极大地简化了开发编程的难易程度，Java语言还将C语言中的指针，改进成了引用，所以受到了很多开发人员的喜爱。Java语言还具有跨平台性的特点，意味着它的可移植性非常高，这一特点有利于开发人员更新和维护相关代码，由它所开发的系统可以支持在不同的浏览器中打开。因为使用Java开发的系统兼容性较强，代码通用性较高，为了后期方便对系统进行完善和维护，所以本人最终选择使用Java语言开发本系统。

4.2.3 SSM框架

SSM框架主要由Spring、SpringMVC、MyBatis这三个框架所集成的，是现在比较流行的一种Java开发框架，能够适用于大中型的应用程序的设计和搭建。Spring是前几十年前兴起的一种轻量级的、开源的Java开发框架，使用它可以解决相关的系统对象创建和对象依赖问题，并且也可以将高耦合的系统分解为低耦合的多个功能模块，方便对系统模块进行明确的分工，对功能代码进行理解和修改，这就极大地减轻了设计人员的开发压力[8]。SpringMVC框架是基于Spring框架而被提出的，它以MVC三层架构为核心，对Spring的相关技术进行了整合，主要针对于Web端进行技术架构，通过对相关的请求处理进行细化处理，对相关的用户请求做出一定的响应处理。MyBatis框架是一种开源的Java持久层框架，它主要是通过改进手动设置参数和获取结果记录的方式，通过支持对数据库进行存储过程、高级映射等处理，使得数据库的操作更加定制化、透明化，因此降低了数据库访问的复杂性，提高了开发的工作效率。

4.2.4 MySQL数据库

MySQL数据库是一种使用频繁的关系型数据库。因为其具有开源免费、占用内存少、安装简单、操作便捷、使用灵活等优点，所以经常被运用于中小型的系统开发中[9]。MySQL数据库可以支持多线程，在同一个时间内，能够同时响应多个用户的使用需求。MySQL数据库还自带了优化器，方便设计人员在使用过程中，快速的查询相关的数据信息。除此之外，SQLServer数据库在当下也是使用比较频繁的，它在数据安全、系统稳定等方面还是比有所保障，但是由于其收费使用、占用内存大、操作复杂、维护成本高，一般适用于中型及以上的系统开发中。MySQL数据库也有着许多的应用程序接口，以供相关的编程语言使用，编写的代码具有极高的通用性和维护性，并且MySQL数据库能够迅速的处理上千条数据记录，在系统故发生障时，能通过日志文件快速恢复。MySQL数据库与SQLServer数据库相比较，综合考虑成本开销、占存大小、代码通用、数据维护、操作难易程度等方面，MySQL数据库占有很大的优势，在数据库设计人员的眼中，MySQL数据库的实际运用价值极高。

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.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);
        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);
        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();
    }
}

PoiUtil.java

package com.utils;

import org.apache.commons.io.FileUtils;
import org.apache.poi.hssf.usermodel.HSSFCell;
import org.apache.poi.hssf.usermodel.HSSFRow;
import org.apache.poi.hssf.usermodel.HSSFSheet;
import org.apache.poi.hssf.usermodel.HSSFWorkbook;
import org.apache.poi.ss.usermodel.Cell;

import java.io.File;
import java.io.FileOutputStream;
import java.util.ArrayList;
import java.util.List;

/**
 * 文件导入到处
 */
public class PoiUtil {
    /**
     * 导入
     *
     * @param url
     * @return
     * @throws Exception
     */
    public static List<List<String>> poiImport(String url) throws Exception {
        List<List<String>> list = new ArrayList<>();
        // 创建Excel 读取文件内容
        HSSFWorkbook workbook = new HSSFWorkbook(FileUtils.openInputStream(new File(url)));
        /**
         * 第一种方式读取Sheet页
         */
//      HSSFSheet sheet = workbook.getSheet("Sheet0");
        /**
         * 第二种方式读取Sheet页
         */
        HSSFSheet sheet = workbook.getSheetAt(0);//获取工作表
        for (int i = 0; i < sheet.getLastRowNum()+1; i++) {
            HSSFRow row = sheet.getRow(i);//获取行
            List<String> rowlist = new ArrayList<>();//行数据
            for (int j = 0; j < row.getLastCellNum(); j++) {
                HSSFCell cell = row.getCell(j);
                cell.setCellType(Cell.CELL_TYPE_STRING);
                String value = cell.getStringCellValue();
                rowlist.add(value);//行中数据添加到行中
            }
            list.add(rowlist);//将行数据添加到list中
        }
        return list;
    }






    // 导出
    public static void poiExport(List<List<String>> list, String url) throws Exception {
        //创建Excel工作薄
        HSSFWorkbook workbook = new HSSFWorkbook();
        //创建一个工作表shheet
        HSSFSheet sheet = workbook.createSheet();
        for (int i = 0; i < list.size(); i++) {
            HSSFRow row = sheet.createRow(i);
            List<String> dataList = list.get(i);
            for (int j = 0; j < dataList.size(); j++) {
                HSSFCell cell = row.createCell(j);
                cell.setCellValue(dataList.get(j));
            }

        }
        FileOutputStream stream = FileUtils.openOutputStream(new File(url));
        workbook.write(stream);
        stream.close();
    }


    public static void main(String[] args) {
        try {
            //导入
            List<List<String>> lists = PoiUtil.poiImport("C:/Users/Administrator/Desktop/工作1.xls");
            System.out.println();


            //导出

            PoiUtil.poiExport(lists, "C:/Users/Administrator/Desktop/工作1.xls");

//
//            List<List<String>> list = new ArrayList<>();
//            ArrayList<String> dataList = new ArrayList<>();
//            dataList.add("标题1");
//            dataList.add("标题2");
//            dataList.add("标题3");
//            list.add(dataList);
//            // 追加数据
//            for (int i = 1; i < 10; i++) {// 这里的int 起始是1 也就是第二行开始
//                ArrayList<String> dataList111 = new ArrayList<>();
//                dataList111.add("内容" + i);
//                dataList111.add("内容1111111121222222222333333333377777777411111111477777777" + i);
//                dataList111.add("内容" + i);
//                list.add(dataList111);
//            }
//            PoiUtil.poiExport(list, "C:/Users/Administrator/Desktop/工作1.xls");
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

CheliangweizhiController.java


package com.controller;

import java.io.File;
import java.math.BigDecimal;
import java.net.URL;
import java.text.SimpleDateFormat;
import com.alibaba.fastjson.JSONObject;
import java.util.*;
import org.springframework.beans.BeanUtils;
import javax.servlet.http.HttpServletRequest;
import org.springframework.web.context.ContextLoader;
import javax.servlet.ServletContext;
import com.service.TokenService;
import com.utils.*;
import java.lang.reflect.InvocationTargetException;

import com.service.DictionaryService;
import org.apache.commons.lang3.StringUtils;
import com.annotation.IgnoreAuth;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import com.baomidou.mybatisplus.mapper.EntityWrapper;
import com.baomidou.mybatisplus.mapper.Wrapper;
import com.entity.*;
import com.entity.view.*;
import com.service.*;
import com.utils.PageUtils;
import com.utils.R;
import com.alibaba.fastjson.*;

/**
 * 位置信息
 * 后端接口
 * @author
 * @email
*/
@RestController
@Controller
@RequestMapping("/cheliangweizhi")
public class CheliangweizhiController {
    private static final Logger logger = LoggerFactory.getLogger(CheliangweizhiController.class);

    @Autowired
    private CheliangweizhiService cheliangweizhiService;


    @Autowired
    private TokenService tokenService;
    @Autowired
    private DictionaryService dictionaryService;

    //级联表service
    @Autowired
    private GongjiaocheService gongjiaocheService;

    @Autowired
    private YonghuService yonghuService;


    /**
    * 后端列表
    */
    @RequestMapping("/page")
    public R page(@RequestParam Map<String, Object> params, HttpServletRequest request){
        logger.debug("page方法:,,Controller:{},,params:{}",this.getClass().getName(),JSONObject.toJSONString(params));
        String role = String.valueOf(request.getSession().getAttribute("role"));
        if(false)
            return R.error(511,"永不会进入");
        else if("用户".equals(role))
            params.put("yonghuId",request.getSession().getAttribute("userId"));
        if(params.get("orderBy")==null || params.get("orderBy")==""){
            params.put("orderBy","id");
        }
        PageUtils page = cheliangweizhiService.queryPage(params);

        //字典表数据转换
        List<CheliangweizhiView> list =(List<CheliangweizhiView>)page.getList();
        for(CheliangweizhiView c:list){
            //修改对应字典表字段
            dictionaryService.dictionaryConvert(c, request);
        }
        return R.ok().put("data", page);
    }

    /**
    * 后端详情
    */
    @RequestMapping("/info/{id}")
    public R info(@PathVariable("id") Long id, HttpServletRequest request){
        logger.debug("info方法:,,Controller:{},,id:{}",this.getClass().getName(),id);
        CheliangweizhiEntity cheliangweizhi = cheliangweizhiService.selectById(id);
        if(cheliangweizhi !=null){
            //entity转view
            CheliangweizhiView view = new CheliangweizhiView();
            BeanUtils.copyProperties( cheliangweizhi , view );//把实体数据重构到view中

                //级联表
                GongjiaocheEntity gongjiaoche = gongjiaocheService.selectById(cheliangweizhi.getGongjiaocheId());
                if(gongjiaoche != null){
                    BeanUtils.copyProperties( gongjiaoche , view ,new String[]{ "id", "createTime", "insertTime", "updateTime"});//把级联的数据添加到view中,并排除id和创建时间字段
                    view.setGongjiaocheId(gongjiaoche.getId());
                }
            //修改对应字典表字段
            dictionaryService.dictionaryConvert(view, request);
            return R.ok().put("data", view);
        }else {
            return R.error(511,"查不到数据");
        }

    }

    /**
    * 后端保存
    */
    @RequestMapping("/save")
    public R save(@RequestBody CheliangweizhiEntity cheliangweizhi, HttpServletRequest request){
        logger.debug("save方法:,,Controller:{},,cheliangweizhi:{}",this.getClass().getName(),cheliangweizhi.toString());

        String role = String.valueOf(request.getSession().getAttribute("role"));
        if(false)
            return R.error(511,"永远不会进入");

        Wrapper<CheliangweizhiEntity> queryWrapper = new EntityWrapper<CheliangweizhiEntity>()
            .eq("gongjiaoche_id", cheliangweizhi.getGongjiaocheId())
            .eq("cheliangweizhi_dati", cheliangweizhi.getCheliangweizhiDati())
            .eq("cheliangweizhi_fangxiang", cheliangweizhi.getCheliangweizhiFangxiang())
            .eq("cheliangweizhi_mingcheng", cheliangweizhi.getCheliangweizhiMingcheng())
            ;

        logger.info("sql语句:"+queryWrapper.getSqlSegment());
        CheliangweizhiEntity cheliangweizhiEntity = cheliangweizhiService.selectOne(queryWrapper);
        if(cheliangweizhiEntity==null){
            cheliangweizhi.setCreateTime(new Date());
            cheliangweizhiService.insert(cheliangweizhi);
            return R.ok();
        }else {
            return R.error(511,"表中有相同数据");
        }
    }

    /**
    * 后端修改
    */
    @RequestMapping("/update")
    public R update(@RequestBody CheliangweizhiEntity cheliangweizhi, HttpServletRequest request){
        logger.debug("update方法:,,Controller:{},,cheliangweizhi:{}",this.getClass().getName(),cheliangweizhi.toString());

        String role = String.valueOf(request.getSession().getAttribute("role"));
//        if(false)
//            return R.error(511,"永远不会进入");
        //根据字段查询是否有相同数据
        Wrapper<CheliangweizhiEntity> queryWrapper = new EntityWrapper<CheliangweizhiEntity>()
            .notIn("id",cheliangweizhi.getId())
            .andNew()
            .eq("gongjiaoche_id", cheliangweizhi.getGongjiaocheId())
            .eq("cheliangweizhi_dati", cheliangweizhi.getCheliangweizhiDati())
            .eq("cheliangweizhi_fangxiang", cheliangweizhi.getCheliangweizhiFangxiang())
            .eq("cheliangweizhi_mingcheng", cheliangweizhi.getCheliangweizhiMingcheng())
            ;

        logger.info("sql语句:"+queryWrapper.getSqlSegment());
        CheliangweizhiEntity cheliangweizhiEntity = cheliangweizhiService.selectOne(queryWrapper);
        if(cheliangweizhiEntity==null){
            cheliangweizhiService.updateById(cheliangweizhi);//根据id更新
            return R.ok();
        }else {
            return R.error(511,"表中有相同数据");
        }
    }

    /**
    * 删除
    */
    @RequestMapping("/delete")
    public R delete(@RequestBody Integer[] ids){
        logger.debug("delete:,,Controller:{},,ids:{}",this.getClass().getName(),ids.toString());
        cheliangweizhiService.deleteBatchIds(Arrays.asList(ids));
        return R.ok();
    }


    /**
     * 批量上传
     */
    @RequestMapping("/batchInsert")
    public R save( String fileName, HttpServletRequest request){
        logger.debug("batchInsert方法:,,Controller:{},,fileName:{}",this.getClass().getName(),fileName);
        Integer yonghuId = Integer.valueOf(String.valueOf(request.getSession().getAttribute("userId")));
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        try {
            List<CheliangweizhiEntity> cheliangweizhiList = new ArrayList<>();//上传的东西
            Map<String, List<String>> seachFields= new HashMap<>();//要查询的字段
            Date date = new Date();
            int lastIndexOf = fileName.lastIndexOf(".");
            if(lastIndexOf == -1){
                return R.error(511,"该文件没有后缀");
            }else{
                String suffix = fileName.substring(lastIndexOf);
                if(!".xls".equals(suffix)){
                    return R.error(511,"只支持后缀为xls的excel文件");
                }else{
                    URL resource = this.getClass().getClassLoader().getResource("../../upload/" + fileName);//获取文件路径
                    File file = new File(resource.getFile());
                    if(!file.exists()){
                        return R.error(511,"找不到上传文件，请联系管理员");
                    }else{
                        List<List<String>> dataList = PoiUtil.poiImport(file.getPath());//读取xls文件
                        dataList.remove(0);//删除第一行，因为第一行是提示
                        for(List<String> data:dataList){
                            //循环
                            CheliangweizhiEntity cheliangweizhiEntity = new CheliangweizhiEntity();
//                            cheliangweizhiEntity.setGongjiaocheId(Integer.valueOf(data.get(0)));   //车辆 要改的
//                            cheliangweizhiEntity.setCheliangweizhiDati(data.get(0));                    //大体位置 要改的
//                            cheliangweizhiEntity.setCheliangweizhiFangxiang(data.get(0));                    //行驶方向 要改的
//                            cheliangweizhiEntity.setCheliangweizhiMingcheng(data.get(0));                    //下一站名称 要改的
//                            cheliangweizhiEntity.setCheliangweizhiContent("");//详情和图片
//                            cheliangweizhiEntity.setCreateTime(date);//时间
                            cheliangweizhiList.add(cheliangweizhiEntity);


                            //把要查询是否重复的字段放入map中
                        }

                        //查询是否重复
                        cheliangweizhiService.insertBatch(cheliangweizhiList);
                        return R.ok();
                    }
                }
            }
        }catch (Exception e){
            e.printStackTrace();
            return R.error(511,"批量插入数据异常，请联系管理员");
        }
    }






}

add-or-update.vue

<template>
    <div class="addEdit-block">
        <el-form
                class="detail-form-content"
                ref="ruleForm"
                :model="ruleForm"
                :rules="rules"
                label-width="80px"
                :style="{backgroundColor:addEditForm.addEditBoxColor}"
        >
            <el-row>
                <el-col :span="12">
                    <el-form-item class="input" v-if="type!='info'"  label="公告类型编码" prop="codeIndex">
                        <el-input v-model="ruleForm.codeIndex"
                                  placeholder="公告类型编码" clearable  :readonly="ro.codeIndex"></el-input>
                    </el-form-item>
                    <div v-else>
                        <el-form-item class="input" label="公告类型编码" prop="codeIndex">
                            <el-input v-model="ruleForm.codeIndex"
                                      placeholder="公告类型编码" readonly></el-input>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="12">
                    <el-form-item class="input" v-if="type!='info'"  label="公告类型" prop="indexName">
                        <el-input v-model="ruleForm.indexName"
                                  placeholder="公告类型" clearable  :readonly="ro.indexName"></el-input>
                    </el-form-item>
                    <div v-else>
                        <el-form-item class="input" label="公告类型" prop="indexName">
                            <el-input v-model="ruleForm.indexName"
                                      placeholder="公告类型" readonly></el-input>
                        </el-form-item>
                    </div>
                </el-col>
                <!--<el-col :span="12">
                    <el-form-item class="input" v-if="type!='info'"  label="备注" prop="beizhu">
                        <el-input v-model="ruleForm.beizhu"
                                  placeholder="备注" clearable  :readonly="ro.beizhu"></el-input>
                    </el-form-item>
                    <div v-else>
                        <el-form-item class="input" label="备注" prop="beizhu">
                            <el-input v-model="ruleForm.beizhu"
                                      placeholder="备注" readonly></el-input>
                        </el-form-item>
                    </div>
                </el-col>-->
            </el-row>
            <el-form-item class="btn">
                <el-button v-if="type!='info'" type="primary" class="btn-success" @click="onSubmit">提交</el-button>
                <el-button v-if="type!='info'" class="btn-close" @click="back()">取消</el-button>
                <el-button v-if="type=='info'" class="btn-close" @click="back()">返回</el-button>
            </el-form-item>
        </el-form>


    </div>
</template>
<script>
    import styleJs from "../../../utils/style.js";
    // 数字，邮件，手机，url，身份证校验
    import { isNumber,isIntNumer,isEmail,isPhone, isMobile,isURL,checkIdCard } from "@/utils/validate";
    export default {
        data() {
            let self = this
            return {
                addEditForm:null,
                id: '',
                type: '',
                ro:{
                    codeIndex : true,
                    indexName : false,
                    superId : false,
                    beizhu : false,
                },
                ruleForm: {
                    codeIndex: '',
                    indexName: '',
                    superId : '',
                    beizhu : '',
                },
                rules: {
                    /*beizhu: [
                        { required: true, message: '备注不能为空', trigger: 'blur' },
                        {  pattern: /^[1-9]\d*$/,
                            message: '备注只能为正整数',
                            trigger: 'blur'
                        }
                    ],*/
                }
            };
        },
        props: ["parent"],
        computed: {
        },
        created() {
            this.addEditForm = styleJs.addStyle();
            this.addEditStyleChange()
            this.addEditUploadStyleChange()
        },
        methods: {
            // 初始化
            init(id,type) {
                if (id) {
                    this.id = id;
                    this.type = type;
                }
                if(this.type=='info'||this.type=='else'){
                    this.info(id);
                }else{
                    //查询最大值 start
                    this.$http({
                        url: `dictionary/maxCodeIndex`,
                        method: "post",
                        data: {"dicCode":"news_types"}
                    }).then(({ data }) => {
                        if (data && data.code === 0) {
                            this.ruleForm.codeIndex = data.maxCodeIndex;
                        } else {
                            this.$message.error(data.msg);
                        }
                    });
                    //查询最大值 end
                }
            },
            // 多级联动参数
            info(id) {
                this.$http({
                    url: `dictionary/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() {
                if((!this.ruleForm.indexName)){
                    this.$message.error('公告类型不能为空');
                    return
                }
                this.$refs["ruleForm"].validate(valid => {
                    if (valid) {
                        let ruleForm = this.ruleForm;
                        ruleForm["dicCode"]="news_types";
                        ruleForm["dicName"]="公告类型";
                        this.$http({
                            url: `dictionary/${!this.ruleForm.id ? "save" : "update"}`,
                            method: "post",
                            data: 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.dictionaryCrossAddOrUpdateFlag = false;
                                        this.parent.search();
                                        this.parent.contentStyleChange();

                                    }
                                });
                            } else {
                                this.$message.error(data.msg);
                            }
                        });
                    }
                });
            },
            // 返回
            back() {
                this.parent.showFlag = true;
                this.parent.addOrUpdateFlag = false;
                this.parent.dictionaryCrossAddOrUpdateFlag = false;
                this.parent.contentStyleChange();
            },
            addEditStyleChange() {
                this.$nextTick(()=>{
                    // input
                    document.querySelectorAll('.addEdit-block .input .el-input__inner').forEach(el=>{
                    el.style.height = this.addEditForm.inputHeight
                el.style.color = this.addEditForm.inputFontColor
                el.style.fontSize = this.addEditForm.inputFontSize
                el.style.borderWidth = this.addEditForm.inputBorderWidth
                el.style.borderStyle = this.addEditForm.inputBorderStyle
                el.style.borderColor = this.addEditForm.inputBorderColor
                el.style.borderRadius = this.addEditForm.inputBorderRadius
                el.style.backgroundColor = this.addEditForm.inputBgColor
            })
                document.querySelectorAll('.addEdit-block .input .el-form-item__label').forEach(el=>{
                    el.style.lineHeight = this.addEditForm.inputHeight
                el.style.color = this.addEditForm.inputLableColor
                el.style.fontSize = this.addEditForm.inputLableFontSize
            })
                // select
                document.querySelectorAll('.addEdit-block .select .el-input__inner').forEach(el=>{
                    el.style.height = this.addEditForm.selectHeight
                el.style.color = this.addEditForm.selectFontColor
                el.style.fontSize = this.addEditForm.selectFontSize
                el.style.borderWidth = this.addEditForm.selectBorderWidth
                el.style.borderStyle = this.addEditForm.selectBorderStyle
                el.style.borderColor = this.addEditForm.selectBorderColor
                el.style.borderRadius = this.addEditForm.selectBorderRadius
                el.style.backgroundColor = this.addEditForm.selectBgColor
            })
                document.querySelectorAll('.addEdit-block .select .el-form-item__label').forEach(el=>{
                    el.style.lineHeight = this.addEditForm.selectHeight
                el.style.color = this.addEditForm.selectLableColor
                el.style.fontSize = this.addEditForm.selectLableFontSize
            })
                document.querySelectorAll('.addEdit-block .select .el-select__caret').forEach(el=>{
                    el.style.color = this.addEditForm.selectIconFontColor
                el.style.fontSize = this.addEditForm.selectIconFontSize
            })
                // date
                document.querySelectorAll('.addEdit-block .date .el-input__inner').forEach(el=>{
                    el.style.height = this.addEditForm.dateHeight
                el.style.color = this.addEditForm.dateFontColor
                el.style.fontSize = this.addEditForm.dateFontSize
                el.style.borderWidth = this.addEditForm.dateBorderWidth
                el.style.borderStyle = this.addEditForm.dateBorderStyle
                el.style.borderColor = this.addEditForm.dateBorderColor
                el.style.borderRadius = this.addEditForm.dateBorderRadius
                el.style.backgroundColor = this.addEditForm.dateBgColor
            })
                document.querySelectorAll('.addEdit-block .date .el-form-item__label').forEach(el=>{
                    el.style.lineHeight = this.addEditForm.dateHeight
                el.style.color = this.addEditForm.dateLableColor
                el.style.fontSize = this.addEditForm.dateLableFontSize
            })
                document.querySelectorAll('.addEdit-block .date .el-input__icon').forEach(el=>{
                    el.style.color = this.addEditForm.dateIconFontColor
                el.style.fontSize = this.addEditForm.dateIconFontSize
                el.style.lineHeight = this.addEditForm.dateHeight
            })
                // upload
                let iconLineHeight = parseInt(this.addEditForm.uploadHeight) - parseInt(this.addEditForm.uploadBorderWidth) * 2 + 'px'
                document.querySelectorAll('.addEdit-block .upload .el-upload--picture-card').forEach(el=>{
                    el.style.width = this.addEditForm.uploadHeight
                el.style.height = this.addEditForm.uploadHeight
                el.style.borderWidth = this.addEditForm.uploadBorderWidth
                el.style.borderStyle = this.addEditForm.uploadBorderStyle
                el.style.borderColor = this.addEditForm.uploadBorderColor
                el.style.borderRadius = this.addEditForm.uploadBorderRadius
                el.style.backgroundColor = this.addEditForm.uploadBgColor
            })
                document.querySelectorAll('.addEdit-block .upload .el-form-item__label').forEach(el=>{
                    el.style.lineHeight = this.addEditForm.uploadHeight
                el.style.color = this.addEditForm.uploadLableColor
                el.style.fontSize = this.addEditForm.uploadLableFontSize
            })
                document.querySelectorAll('.addEdit-block .upload .el-icon-plus').forEach(el=>{
                    el.style.color = this.addEditForm.uploadIconFontColor
                el.style.fontSize = this.addEditForm.uploadIconFontSize
                el.style.lineHeight = iconLineHeight
                el.style.display = 'block'
            })
                // 多文本输入框
                document.querySelectorAll('.addEdit-block .textarea .el-textarea__inner').forEach(el=>{
                    el.style.height = this.addEditForm.textareaHeight
                el.style.color = this.addEditForm.textareaFontColor
                el.style.fontSize = this.addEditForm.textareaFontSize
                el.style.borderWidth = this.addEditForm.textareaBorderWidth
                el.style.borderStyle = this.addEditForm.textareaBorderStyle
                el.style.borderColor = this.addEditForm.textareaBorderColor
                el.style.borderRadius = this.addEditForm.textareaBorderRadius
                el.style.backgroundColor = this.addEditForm.textareaBgColor
            })
                document.querySelectorAll('.addEdit-block .textarea .el-form-item__label').forEach(el=>{
                    // el.style.lineHeight = this.addEditForm.textareaHeight
                    el.style.color = this.addEditForm.textareaLableColor
                el.style.fontSize = this.addEditForm.textareaLableFontSize
            })
                // 保存
                document.querySelectorAll('.addEdit-block .btn .btn-success').forEach(el=>{
                    el.style.width = this.addEditForm.btnSaveWidth
                el.style.height = this.addEditForm.btnSaveHeight
                el.style.color = this.addEditForm.btnSaveFontColor
                el.style.fontSize = this.addEditForm.btnSaveFontSize
                el.style.borderWidth = this.addEditForm.btnSaveBorderWidth
                el.style.borderStyle = this.addEditForm.btnSaveBorderStyle
                el.style.borderColor = this.addEditForm.btnSaveBorderColor
                el.style.borderRadius = this.addEditForm.btnSaveBorderRadius
                el.style.backgroundColor = this.addEditForm.btnSaveBgColor
            })
                // 返回
                document.querySelectorAll('.addEdit-block .btn .btn-close').forEach(el=>{
                    el.style.width = this.addEditForm.btnCancelWidth
                el.style.height = this.addEditForm.btnCancelHeight
                el.style.color = this.addEditForm.btnCancelFontColor
                el.style.fontSize = this.addEditForm.btnCancelFontSize
                el.style.borderWidth = this.addEditForm.btnCancelBorderWidth
                el.style.borderStyle = this.addEditForm.btnCancelBorderStyle
                el.style.borderColor = this.addEditForm.btnCancelBorderColor
                el.style.borderRadius = this.addEditForm.btnCancelBorderRadius
                el.style.backgroundColor = this.addEditForm.btnCancelBgColor
            })
            })
            },
            addEditUploadStyleChange() {
                this.$nextTick(()=>{
                    document.querySelectorAll('.addEdit-block .upload .el-upload-list--picture-card .el-upload-list__item').forEach(el=>{
                    el.style.width = this.addEditForm.uploadHeight
                el.style.height = this.addEditForm.uploadHeight
                el.style.borderWidth = this.addEditForm.uploadBorderWidth
                el.style.borderStyle = this.addEditForm.uploadBorderStyle
                el.style.borderColor = this.addEditForm.uploadBorderColor
                el.style.borderRadius = this.addEditForm.uploadBorderRadius
                el.style.backgroundColor = this.addEditForm.uploadBgColor
            })
            })
            },
        }
    };
</script>
<style lang="scss">
.editor{
        height: 500px;

    & /deep/ .ql-container {
          height: 310px;
      }
    }
    .amap-wrapper {
        width: 100%;
        height: 500px;
    }
    .search-box {
        position: absolute;
    }
    .addEdit-block {
        margin: -10px;
    }
    .detail-form-content {
        padding: 12px;
    }
    .btn .el-button {
        padding: 0;
    }</style>