救护队应急救援管理系统的前端设计与实现
发布时间：2022-01-19 22:20
矿井发生事故后,矿山救护队是奋战在一线的主力军,矿山救护队建设的好坏直接影响矿工生命和国家财产安全,然而现阶段我国矿山救护队在业务管理方面存在数据录入、查询困难等问题。为了实现救护队智能化、质量标准化建设,设计开发一套救护队应急管理系统具有一定的现实意义。救护队应急救援管理系统采用B/S架构,结合前后端分离模式进行开发,主要用于救护队日常业务管理和远程监管。本文通过互联网云技术、语音交互、数据可视化等技术,完成系统前端页面设计、语音交互以及数据可视化展示。系统部署到云服务器上,使用Vue.js、Element-UI等技术框架,结合echarts工具实现页面设计和数据展示,通过Axios进行前后端数据交互,利用Webpack对代码进行打包,并结合其他前端技术辅助项目开发。根据救护队工作流程和业务,应急救援管理系统包括个人模块、装备物资模块、应急接警模块、培训训练模块、系统管理模块、救援方案模块、基础配置模块、救援队伍模块、计划模块、资料管理模块以及办公自动化模块。系统主要包括救护队基础数据存储和管理,数据统计分析和可视化展示,装备物资维保和出入库,应急预案的自动生成,文档上传和下载,智能...
【文章来源】：西安科技大学陕西省
【文章页数】：85 页
【学位级别】：硕士
【部分图文】：
JavaScript组成部分
西安科技大学硕士学位论文6图2.1JavaScript组成部分2.2Vue.js开发框架技术Vue.js是一个灵活而强大的前端开发框架，具有优良的MVVM库[24-26]而被广泛应用。Vue的核心库关注view层，随意性较强，与其他项目、库整合起来比较容易。Vue.js晚于AngularJS和React[27]，该框架融合了其他框架的大部分优点，使其在该领域迅速流行起来。Vue.js的组件化思想是视图层的灵魂，是Vue.js最强大的功能之一，组件化使前端样式、布局和条理关系写在同一个文件中，大大地增加了程序的易读性和维护性，如图2.2所示是组件样式图。图2.2组件样式图组件化[28]最大的特点是使项目避免了低内聚高耦合，达到分开管理。它有以下好处：（1）创建组件后，组件可以重复调用，提高了开发效率。（2）页面的组件化越明显，页面的布局就越清楚，组件与组件之间的联系也就越明朗。（3）组件化之间的依赖主要通过接口，工程或者项目的方式，这样可以避免代码之间的耦合。（4）组件化产品能够减少定位和解决问题的时间，提高开发效率。除了组件化，数据双向绑定也是Vue.js最核心的功能。该功能是利用数据劫持结合
2救护队应急救援管理系统关键技术7发布者-订阅者模式进行实现。双向绑定数据原理如图2.3所示。在前端输入框中增加数据或者减少数据，对应的后台数据库也会增加数据或者减少数据。相反，在后台的数据库中增加数据或者减少数据，前端的视图也会相应的变化，从而实现双向数据绑定。图2.3双向数据绑定原理Vue-Router是Vue.js官宣的路由管理器，它与不同的url建立连接，访问不同的页面内容。通过控制父组件一个路由变量的值，来动态改变指向的组件；而被指向的组件又通过渲染方法被渲染到父组件，因此当指向组件改变时，被渲染的组件也随之改变；因此，通过控制一个变量来实现路由的效果；Vue.js包含动态路由匹配和模块化的路由配置等功能。Vuex是仅为Vue.js开发使用的一种状态管理模式，它使所有的组件状态以集中的存储的方式进行管理，并保证状态以可预测的方式发生变化。在该状态管理模式未出现时，Vue是“单项数据流”，如图2.4所示。图2.4单项数据流原理Vuex克服了多个组件不能同时享有同一状态的问题，有利于同步组件间的状态，为
【参考文献】：
期刊论文
[1]基于Vue.js的车险报价系统的设计与实现[J]. 张志鹏,黄素娟,蒋龙玉,马嘉敏. 微型电脑应用. 2020(04)
[2]基于JT808的北斗公车物联网平台的设计与实现[J]. 张其,叶伟,吕明,吴盘龙,张捷. 工业控制计算机. 2019(11)
[3]基于Vue.js的在线设计开放平台研究与实现[J]. 王璐,崔保磊,潘红霞,赵莉,田宇. 信息技术与信息化. 2019(11)
[4]语音交互技术在矿山救护队应急救援管理系统中的应用[J]. 李文峰,李大娟,张军会. 工矿自动化. 2019(11)
[5]JavaScript代码分析技术综述[J]. 史橹,吴毅坚,赵文耘. 计算机应用与软件. 2018(11)
[6]基于CSS技术的网页布局探究[J]. 冯小强. 电脑知识与技术. 2018(28)
[7]基于GIS的隧道坍塌救援管理系统的设计与开发[J]. 李春辉,李洪洲,吴勇,李荣华. 现代隧道技术. 2018(04)
[8]石化企业危险化学品管理系统设计与实现[J]. 王华,崔振伟,陈勇. 化工进展. 2018(07)
[9]基于业务连续性管理的煤矿应急管理体系研究[J]. 王世佳. 能源与环保. 2018(03)
[10]输送机中间架智能语音交互设计型专家系统研究[J]. 宁志强,陶元芳. 煤炭工程. 2018(03)
硕士论文
[1]基于MVVM模式的Vue.js框架在物流软件自动化测试系统中的应用研究[D]. 柴青山.北京邮电大学 2019
[2]容器PaaS平台系统WEB前端的设计与实现[D]. 吴德林.北京交通大学 2019
本文编号：3597663
【文章来源】：西安科技大学陕西省
【文章页数】：85 页
【学位级别】：硕士
【部分图文】：
JavaScript组成部分
西安科技大学硕士学位论文6图2.1JavaScript组成部分2.2Vue.js开发框架技术Vue.js是一个灵活而强大的前端开发框架，具有优良的MVVM库[24-26]而被广泛应用。Vue的核心库关注view层，随意性较强，与其他项目、库整合起来比较容易。Vue.js晚于AngularJS和React[27]，该框架融合了其他框架的大部分优点，使其在该领域迅速流行起来。Vue.js的组件化思想是视图层的灵魂，是Vue.js最强大的功能之一，组件化使前端样式、布局和条理关系写在同一个文件中，大大地增加了程序的易读性和维护性，如图2.2所示是组件样式图。图2.2组件样式图组件化[28]最大的特点是使项目避免了低内聚高耦合，达到分开管理。它有以下好处：（1）创建组件后，组件可以重复调用，提高了开发效率。（2）页面的组件化越明显，页面的布局就越清楚，组件与组件之间的联系也就越明朗。（3）组件化之间的依赖主要通过接口，工程或者项目的方式，这样可以避免代码之间的耦合。（4）组件化产品能够减少定位和解决问题的时间，提高开发效率。除了组件化，数据双向绑定也是Vue.js最核心的功能。该功能是利用数据劫持结合
2救护队应急救援管理系统关键技术7发布者-订阅者模式进行实现。双向绑定数据原理如图2.3所示。在前端输入框中增加数据或者减少数据，对应的后台数据库也会增加数据或者减少数据。相反，在后台的数据库中增加数据或者减少数据，前端的视图也会相应的变化，从而实现双向数据绑定。图2.3双向数据绑定原理Vue-Router是Vue.js官宣的路由管理器，它与不同的url建立连接，访问不同的页面内容。通过控制父组件一个路由变量的值，来动态改变指向的组件；而被指向的组件又通过渲染方法被渲染到父组件，因此当指向组件改变时，被渲染的组件也随之改变；因此，通过控制一个变量来实现路由的效果；Vue.js包含动态路由匹配和模块化的路由配置等功能。Vuex是仅为Vue.js开发使用的一种状态管理模式，它使所有的组件状态以集中的存储的方式进行管理，并保证状态以可预测的方式发生变化。在该状态管理模式未出现时，Vue是“单项数据流”，如图2.4所示。图2.4单项数据流原理Vuex克服了多个组件不能同时享有同一状态的问题，有利于同步组件间的状态，为
【参考文献】：
期刊论文
[1]基于Vue.js的车险报价系统的设计与实现[J]. 张志鹏,黄素娟,蒋龙玉,马嘉敏. 微型电脑应用. 2020(04)
[2]基于JT808的北斗公车物联网平台的设计与实现[J]. 张其,叶伟,吕明,吴盘龙,张捷. 工业控制计算机. 2019(11)
[3]基于Vue.js的在线设计开放平台研究与实现[J]. 王璐,崔保磊,潘红霞,赵莉,田宇. 信息技术与信息化. 2019(11)
[4]语音交互技术在矿山救护队应急救援管理系统中的应用[J]. 李文峰,李大娟,张军会. 工矿自动化. 2019(11)
[5]JavaScript代码分析技术综述[J]. 史橹,吴毅坚,赵文耘. 计算机应用与软件. 2018(11)
[6]基于CSS技术的网页布局探究[J]. 冯小强. 电脑知识与技术. 2018(28)
[7]基于GIS的隧道坍塌救援管理系统的设计与开发[J]. 李春辉,李洪洲,吴勇,李荣华. 现代隧道技术. 2018(04)
[8]石化企业危险化学品管理系统设计与实现[J]. 王华,崔振伟,陈勇. 化工进展. 2018(07)
[9]基于业务连续性管理的煤矿应急管理体系研究[J]. 王世佳. 能源与环保. 2018(03)
[10]输送机中间架智能语音交互设计型专家系统研究[J]. 宁志强,陶元芳. 煤炭工程. 2018(03)
硕士论文
[1]基于MVVM模式的Vue.js框架在物流软件自动化测试系统中的应用研究[D]. 柴青山.北京邮电大学 2019
[2]容器PaaS平台系统WEB前端的设计与实现[D]. 吴德林.北京交通大学 2019
本文编号：3597663
本文链接：https://www.wllwen.com/shoufeilunwen/xixikjs/3597663.html
