【维普】软件工程-基于JAVA的智慧小区疫情监控管理系统

目录系统实现5.1数据可视化方法实现本系统采用的数据可视化算法，主要通过Echarts实现，ECharts是一种基于JavaScript的数据可视化库，可以用于创建各种交互式的图表和地图。具体实现步骤如下：引入ECharts库：在HTML文件中引入ECharts库CDN或下载本地文件,并在需要使用的页面中进行引用。（1）安装和引入Echarts库：Echarts是一个强大的数据可视化库，它支持多种图表类型和交互效果。也可以使用npm进行安装，并将其引入Vue.js项目中。关键代码如下：```bash

npminstallecharts--save```

```javascript

importechartsfromecharts'``（2）创建Vue.js组件：根据需求创建一个Vue.js组件。设置图表选项，这里我们设置为饼状图图表。关键代码如下：exportdefault{name:'EchartsChart',props:['options'],data(){return{//创建一个Echarts实例

this.chart=echarts.init(container)

//设置图表选项

this.chart.setOption(options)

},

handleResize(){

//窗口大小改变时重新渲染图表

this.chart&&this.chart.resize()（3）在Vue.js应用程序中使用组件：将组件添加到Vue.js应用程序中，并将图表数据传递给组件，关键代码如下：//加载图表数据

this.loadChartData()

},

methods:{

loadChartData(){

//从API获取图表数据

//

//将图表数据传递给组件

this.chartOptions={

//Echarts图表选项（4）管理员和用户登入系统后，打开首页的每日健康统计界面，此时Vue框架请求api/real_time_signage_of_epidemic_situation这一接口，随后跳转到

RTSController类处理，经过RTSService和RTSServiceimpl处理后，通过UploadMapper类与数据库通讯，取得目标值后，以json形式返回给前端后，通过Vue框架下的component组件中的bar_chart.vue生成饼状图，最终在网页中展示。具体效果图如下：图5.1每日健康统计饼状图关键代码如下：query_str=query_str.substr(0,query_str.length-1);letdata={};awaitthis.$get("~/api/real_time_signage_of_epidemic_situation/bar_group?field="+query_str+"&groupby="+group_by_value,data,5.2功能实现在前面章节对系统功能模块进行划分和设计的基础上，本节内容将以模块为对象详细描述其代码实现过程和功能步骤。详细描述了系统功能实现的细节。（1）用户注册模块第一步：用户在前端网站点击注册按钮跳到注册页面。第二步：用户输入姓名，密码，性别，年龄和职业，选择人物并上传用户头像，然后点击提交按钮进行注册，如果未完全输入，则通过javascript技术返回对应错误提示信息，如果正确,javascript将通过/login路径提交至后端控制层。第三步：后端控制器UserController在获取提交的信息后，服务层调用UserService类，服务层调用UserMapper映射器进行数据库操作。第四步：通过UserMapper与Mybatis框架访问数据库，如果用户名已经注册则返回错误的消息，如果用户名没有则把数据保存到数据库，向控制层返回成功的消息。第五步：控制层把返回信息封装到JsonReturn类，返回前端。注册界面如图5.2所示：图5.2注册界面注册功能实现的关键代码见附录。（2）用户登录模块：第一步：用户点击登录按钮，跳转至登录页面，也可以通过后端登录地址进行登录。第二步：用户输入用户名、密码，并输入由后端LoginController类调用verifyCode工具类生成的验证码，最后点击登录按钮提交信息，若没有输入完全则通过javascript技术返回相应的错误提示信息，若正确则由javascript通过/signin路径将其提交给后端控制层。第三步：后端控制器获得提交的信息后，会调用服务层中的UserService类，服务层会调用UserMapper映射器来进行数据库操作。第四步：通过UserMapper和Mybatis框架对数据库进行访问，若用户名不存在或用户名与密码不匹配，则返回错误信息，若用户名与密码以及验证码都输入正确则返回成功信息，且将用户信息存入session中第五步：控制层将返回的信息包装在JsonReturn类中并返回给前端。登录模块效果图如图5.3所示：图5.3登录界面登录功能实现的关键代码见附录。（3）用户管理模块前面两个功能针对用户来说，此页面针对管理员来说。从这个页面开始，管理员的页面都是用Vue来搭建的。管理员登入系统后可以对小区居民进行管理。管理员可通过用户身份证和小区查询用户，还可实现居民个人信息增删改查，具体界面设计如图5.4所示：图5.4用户管理界面（a）删除用户的操作：管理员在需要对目标用户进行删除时，可以通过在用户管理页面后面看到删除按钮来完成对目标用户字段的删除操作。系统运行后，按照设定的需求更新接口，在加入新的会员前完成系统初始化的过程，使得每个功能模块都能正常工作，又保证了每个模块的相互独立、互不矛盾。管理员从清单上选定目标用户所在的地方，单击删除按钮后，系统会弹出一条消息来暗示是否有必要将用户删除。管理员一旦确认后，系统就会通过vue的table.vue部分的函数Getlist_user_group（）请求api接口/user_group/get_list转交给后端的UserController,经过分页判别角色匹配，跳转到UserService和UserServiceImpl经过UserMapper和数据库通讯，最终将值写入数据库中数据库，最终返回删除成功信息。删除用户的关键代码见附录。用户删除效果如下图5.5所示：图5.5删除用户效果图（b）修改用户信息：当需要修改用户信息时，管理员可在系统用户管理界面中单击目标用户这一行，再单击修改按钮并通过界面通过vue的table.vue部分的函数Get_list_user_group()调用api接口/user_group/get_list转交给后端的UserController，经过分页判别角色匹配，跳转到UserService和UserServiceImpl经过UserMapper和数据库通讯最终将值写入数据库中，并返回修改成功信息。修改用户信息主要代码见附录。修改效果如下图5.6所示：图5.6修改用户信息效果图（c）新增用户信息：当需要新增用户信息时，管理员可在系统用户管理界面中单击目标用户这一行，再单击修改按钮并通过界面通过vue的table.vue部分的函数Get_list_user_group()调用api接口/user/add转交给后端的UserController，经过分页判别角色匹配，跳转到UserService和UserServiceImpl经过UserMapper和数据库通讯最终将值写入数据库中，并返回新增成功信息。新增用户信息主要代码见附录。新增效果图如5.7所示：图5.7新增用户信息效果图（4）疫情公告模块管理员和用户登录系统后，点击公告模块，进入公告界面，及可对公告文章进行浏览，同时点击详情可进行具体公告的浏览。公告标题连接使用view.vue中的函数data()调用api接口/epidemic_announcement/get_list?like=0来访问对应文章。后台EpidemicAnnouncementController类获取所查询文章id，跳转到EpidemicAnnouncementService和EpidemicAnnouncementServiceImpl经过EpidemicAnnouncementMapper和数据库通讯。如此用户和管理员就可以完成整个文章浏览的功能了。文章浏览界面如图5.8所示：图5.8文章浏览界面（a）发布公告管理员登录系统，在模块管理上单击公告管理，进入公告管理界面，可以通过公告标题以及发布日期进行公告的查询以及发布，同时点击详情可进行具体公告的编辑，界面可插入图片、视频、文字、超链接等。公告标题连接使用view.vue中的函数data()调用api接口epidemic_announcement/add。后台EpidemicAnnouncementController类获取所查询文章id，跳转到EpidemicAnnouncementService和EpidemicAnnouncementServiceImpl经过EpidemicAnnouncementMapper和数据库通讯，最终将值写入数据库中，并返回发布成功的提示。如此管理员就可以完成公告的发布。公告发布界面界面如图5.9所示：图5.9发布公告界面发布公告的关键代码见附录（b）删除公告管理员登录系统，在模块管理上单击公告管理，进入公告管理界面，可以通过公告标题以及发布日期进行公告的查询以及删除，同时点击详情可进行具体公告的编辑，界面可插入图片、视频、文字、超链接等。公告标题连接使用view.vue中的函数data()接口api/epidemic_announcement/delete。后台EpidemicAnnouncementController类获取所查询文章id，跳转到EpidemicAnnouncementService和EpidemicAnnouncementServiceImpl经过EpidemicAnnouncementMapper和数据库通讯，最终将值写入数据库中，并返回删除成功的提示。如此管理员就可以完成公告的删除。公告删除界面界面如图5.10所示：图5.10删除公告效果图关键代码见附录。（5）每日健康模块用户登入系统后，可进行日常健康信息的填报，点击健康管理模块，填入健康信息，点击提交按钮，即可上传健康信息。此时，系统通过vue的view.vue部分的函数data()调用api接口daily_health/add转交给后端的DailyHealthController，经过分页判别角色匹配，跳转到DailyHealthService和DailyHealthServiceImpl经过DailyHealthtMapper和数据库通讯，将数据写入数据库中，同时返回提交成功的提示。如此，用户就可以完成健康信息的上报。具体实现效果如下图5.11所示：图5.11用户上传健康信息效果图关键代码见附录。接着，当管理员和用户进入首页后，点击疫情实时看板按钮，系统通过Vue框架请求~/api/daily_health/list_group?groupby=personnel_remarks",data,,这一接口，随后跳转到DailyHealthController类处理，经过DailyHealthService和DailyHealthServiceImpl处理后，通过DailyHealthMapper类与数据库通讯，取得刚才的数据后，以json形式返回给前段后，通过Vue框架下的component组件中的lbar_chart.vue生成饼状图，最终在网页中展示。效果图如5.12所示：图5.12每日健康统计饼状图关键代码见附录。（6）行程登记模块（a）用户外出申请用户登入系统后，点击模块中的行程管理模块，可进行外出的申请，填写完外出时间，外出地点，申请理由等信息后，点击提交按钮，此时系统通过通过journey_registration的table.vue部分的函数data()调用api接口/Journey_registration转交给后端的JourneyRegistrationController，经过分页判别角色匹配，跳转到JourneyRegistrationService和JourneyRegistrationServiceImpl经过JourneyRegistrationMapper和数据库通讯，最终将值写入数据库中，此时返回提交成功的提示，然后用户就可以等待管理员的审核。效果图如下图5.12所示：图5.12用户外出申请界面关键代码见附录（b）管理员管理行程管理员登入系统后，点击行程管理模块，可以看到用户的外出申请，点击详情，可对具体的申请进行审核处理，对于无法批准的申请，管理员可以写下理由并退回给用户。此时系统通过通过journey_registration的table.vue部分的函数data()调用api接口/journey_registration/del转交给后端的JourneyRegistrationController，经过分页判别角色匹配，跳转到JourneyRegistrationService和JourneyRegistrationServiceImpl经过JourneyRegistrationMapper和数据库通讯，最终将值写入数据库中。具体效果如下图5.13所示：图5.13管理员行程管理效果图关键代码见附录。（7）数据可视化模块该模块中有两个小模块，小区防疫状况模块和疫情实时看板模块。（a）小区防疫状况模块管理员登入系统后，点击小区防疫状况模块，可对小区的观察人数，隔离人数，确诊人数进行操作，此时系统通过EpidemicPreventionInTheCommunity的table.vue部分的函数data()调用api接口/prevention转交给后端的PreventionController，经过分页判别角色匹配，跳转到PreventionService和PreventionServiceImpl经过PreventionIMapper和数据库通讯，最终将值写入数据库中。效果实现如5.14所示：图5.14小区防疫状况界面关键代码如下见附录接着，当管理员和用户进入首页后，点击小区防疫状况按钮，系统通过Vue框架请求api接口/prevention_in_the_community，随后跳转到RealTimeController类处理，经过RealTimeService和RealTimeSServiceimpl处理后，通过UploadMapper类与数据库通讯，取得目标值后，以json形式返回给前段后，通过Vue框架下的component组件中的bar_chart.vue生成饼状图，最终在网页中展示。具体效果图如下5.15所示：图5.15小区防疫状况效果图在该界面中，用户和管理员可点击上面的按钮来更加清晰地了解当前疫情状况。关键代码见附录。（b）疫情实时看板界面管理员登入系统后，进入疫情实时看板模块，可对小区的治愈人数，死亡人数，确诊人数进行操作，通过RealTimeSituation的view.vue部分的函数data()调用api接口/real_time_signage_of_epidemic_situation转交给后端的RealTimeController，经过分页判别角色匹配，跳转到RealTimeService和SituationServiceImpl经过SignageMapper和数据库通讯，最终将值写入数据库中。效果实现如下图5.16所示：图5.16疫情实时看板界面关键代码见附录。接着，当管理员和用户进入首页后，点击疫情实时看板按钮，系统通过Vue框架请求api接口/real_time_signage_of_epidemic_situation/bar_group?field="+query_str+"&groupby="+group_by_value,随后跳转到RealTimeController类处理，经过RealTimeService和RealTimeServiceImpl处理后，通过UploadMapper类与数据库通讯，取得刚才的数据后，以json形式返回给前段后，通过Vue框架下的component组件中的line_chart.vue生成柱状图，最终在网页中展示。具体效果图如下5.17所示：图5.17疫情实时看板效果图关键代码见附录。（8）个人管理个人管理中可以修改、完善自己的信息。对于修改、添加的信息，都会更新到数据库表里。用户可在系统的个人管理界面中单击个人信息行再单击修改按钮，通过接口~/api/user/get_obj来进行操作UserController接收到{list.id}指令与用户ID，调用UserServiceImpl,最终将返回的结果传输至前端页面。在完成了上述过程之后，就可实现个人相关信息管理工作了。具体界面设计如图5.18所示：图5.18个人信息管理界面关键代码见附录。5.3本章小结该章是该体系建立过程中最关键的部分，该体系在该部分得到了基本的实现且功能也基本齐全。后是系统整体性功能测试。第6章系统测试6系统测试当系统设计得到初步改进之后，这一章将对整个系统进行功能测试。首先会对系统测试计划做出解释，其次是实际测试情况，并且记录测试结果同时对系统进行解释和分析。6.1测试计划该系统的测试方案如下:在测试中会对系统前面章节划分出的功能模块做了测试，对系统功能的实现做了记录和分析，其中主要采用了黑盒测试法。测试首先是功能模块的测试，然后是系统的安全性测试。6.2功能模块测试功能模块测试承担着对前面章节中所分割设计系统功能模块的运行测试任务，重点是对功能模块所设计功能的实现情况、用户端功能界面能否正常展示、功能实现之后有无bug等问题进行测试。（1）用户注册于登录模块功能测试表6.1登录与注册模块测试流程表测试名称测试用例预想结果实际测试结果测试描述测试登录1用户名、密码与验证码皆为空无法登录无法登录测试系统对错误输入的反应测试登录2用户名与验证码正确，密码输入错误无法登录无法登录测试系统对错误输入的反应测试登录3用户名与密码正确，验证码输入错误无法登录无法登录测试系统对错误输入的反应测试登录4用户名、密码与验证码皆正确登录成功登录成功测试系统对正确输入的反应测试注册1用户名、昵称、密码与确认密码皆为空无法注册无法注册测试系统对错误输入的反应测试注册2昵称为空，用户名、密码与确认密码皆为正确无法注册无法注册测试系统对错误输入的反应测试注册3密码为空，用户名、昵称与确认密码皆为正确无法注册无法注册测试系统对错误输入的反应（2）用户个人信息管理模块测试表6.2用户个人信息管理模块测试名称测试用例预想结果实际测试结果测试描述测试个人信息管理1点击用户个人中心信息显示成功信息显示成功测试系统对正确输入的反应测试个人信息管理2修改个人信息显示保存成功显示保存成功测试系统对正确输入的反应根据用户个人信息模块测试所显示的结果，所有的测试结果都是符合期望的。（3）公告管理模块测试表6.3公告管理模块测试名称测试用例预想结果实际测试结果测试描述测试公告搜索1输入没有相关公告的关键字没有公告显示没有公告显示测试系统对错误输入的反应测试名称测试用例预想结果实际测试结果测试描述测试公告搜索2不输入关键字没有公告显示没有公告显示测试系统对错误输入的反应测试公告搜索3输入有相关公告的关键字相关公告显示相关公告显示测试系统对正确输入的反应根据公告模块测试所显示的结果，所有的测试结果都是符合期望的。（4）行程管理模块测试外出申请功能模块测试流程如表6.4所示表6.4外出申请功能模块测试流程测试名称测试用例预想结果实际测试结果测试描述测试用户添加外出信息用户外出信息添加成功添加成功测试系统对正确输入的反应管理员回复管理员回复回复成功回复成功测试系统对正确输入的反应用户/管理员删除信息用户/管理员删除信息操作成功操作成功测试系统对正确输入的反应根据行程功能模块测试所显示的结果，所有的测试结果都是符合期望的。（5）管理员登录模块测试管理员登录模块测试流程如下表6.5所示：表6.5管理员登录模块测试流程测试名称测试用例预想结果实际结果测试描述测试登录1管理员名、密码与验证码皆为空无法登录无法登录测试系统对错误输入的反应测试登录2管理员名与验证码正确，密码输入错误无法登录无法登录测试系统对错误输入的反应测试登录3管理员名与密码正确，验证码输入错误无法登录无法登录测试系统对错误输入的反应测试名称4测试用例预想结果实际结果测试描述测试登录5管理员名、密码与验证码皆正确登录成功登录成功测试系统对正确输入的反应（6）管理员用户管理模块测试管理员用户管理模块测试流程如下表6.6：表6.6管理员用户管理模块测试流程测试名称测试用例预想结果实际测试结果测试描述测试用户管理点击用户管理界面信息显示成功信息显示成功测试系统对正确输入的反应测试新增用户点击新增用户按钮新增用户成功新增用户成功测试系统对正确输入的反应测试修改用户信息修改用户信息显示修改成功显示修改成功测试系统对正确输入的反应测试删除用户点击用户删除按钮删除用户成功删除用户成功测试系统对正确输入的反应（7）管理员公告管理模块测试管理员公告管理模块测试流程如下表6.7所示：表6.7管理员公告管理模块测试流程测试名称测试用例预想结果实际结果测试描述测试公告管理界面点击公告管理界面信息显示成功信息显示成功测试系统对正确输入的反应测试新增公告点击新增公告按钮新增公告成功新增公告成功测试系统对正确输入的反应测试修改公告信息修改公告信息显示修改成功显示修改成功测试系统对正确输入的反应测试删除公告点击公告删除按钮删除公告成功删除公告成功测试系统对正确输入的反应（8）公告管理功能测试公告管理功能测试流程如表6.8所示：表6.8公告管理功能测试流程测试名称测试用例预想结果实际测试结果测试描述测试公告管理界面点击公告管理界面信息显示成功信息显示成功测试系统对正确输入的反应测试新增公告种类点击新增公告按钮新增公告成功新增公告成功测试系统对正确输入的反应测试修改公告信息修改公告种类信息显示修改成功显示修改成功测试系统对正确输入的反应测试删除公告点击公告删除按钮删除成功删除成功测试系统对正确输入的反应6.3系统安全性测试在功能模块测试完成之后对系统进行了安全性测试，这一部分是为了检测当用户或者管理员在没有登录的情况下在对登录完成之后才能使用的功能调用时，系统截获的正确性。后台管理员登陆拦截器进行检测用于检测管理员不登录时对管理端功能界面的访问效果，经检测，管理员只需不登录即可，浏览器中后台管理功能界面被访问后均自动跳至管理员登录界面。6.4系统性能测试对于系统并发用户数压力测试中，多用户同时登陆，因为文章数据太大，而且服务器性能中等，所以所能忍受的并发用户数较小，数据库查询速率需要提高。（1）浏览器兼容性测试：用多个浏览器对该系统进行了同步测试，工作正常。（2）用户操作流畅度检查：界面跳转，数据刷新是否正常。（3）系统响应测试：响应时间比较正常。6.5小结功能模块设计完成后，进行功能模块及系统性能与安全性测试是非常关键的。由该章测试可见，本论文系统之因此功能模块已被测试并可正确操作。且操作过程相对流畅，但是也凸显出文章数据返回前端时速率依然有待提高的问题。但从整体上看，本论文网站系统已基本完成了调研。第7章结束语7结束语本文以智慧小区疫情监控管理系统为研究对象，通过对疫情监控管理系统的需求分析和功能设计，以及系统的实现和测试，深入探讨了智慧小区疫情监控管理系统的运作原理和实现流程，并在此基础上提出了进一步完善和发展的建议。在当前全球范围内疫情严重的情况下，智慧小区疫情监控管理系统的推广和应用尤为重要。通过此系统的建立和使用，可以充分利用智能化技术，提高小区管理的效率和安全性，并能够快速响应和处理突发疫情事件。本文所提出的系统不仅能够对小区内人员和物品进行实时监控和管理，还能够对小区内的疫情信息进行收集、统计和分析，为疫情防控工作提供有力的数据支持。然而，本文所提出的智慧小区疫情监控管理系统仍然存在一些不足之处。例如，在系统建立和使用过程中,需要考虑到用户的隐私保护和信息安全问题，避免数据泄露和滥用。另外，系统的运作需要完善的网络和硬件基础设施支持，以及人员的培训和管理。因此，我们需要在实际应用过程中不断进行优化和改进，提高系统的稳定性和实用性。总之，智慧小区疫情监控管理系统是一项具有重要意义的研究工作。通过本文的研究和实践，我们相信此系统将在未来的应用中发挥更加重要的作用，为小区管理和社区疫情防控工作提供有力的技术支持。参考文献参考文献[1]陈立兵.IntelliJIDEA开发人员利器[J].程序员,2009,No.195(01):118-120.[2]孙永亮,邓文伟.医院疫情监控系统的设计与实现[J].中国医疗设备,2021,36(01):103-106.[3]李乐.Java语言应用研究[J].智慧中国,2022,No.78(09):80-81.[4]王毛毛.基于java的图书管理系统研究[J].信息记录材料,2020,21(01):134-135.[5]樊肖繁.(2015).基于md5的验证码生成及反破解策略的研究.今日湖北旬刊(4).[6]黄文娟.基于Java和MySQL的图书馆信息化管理系统设计[J].电子设计工程,2019,27(02):20-24.[7]FuTianjun,AbbasiAhmed,ChenHsinchun.AfocusedcrawlerforDarkWebforums[Z].JournaloftheAmericanSocietyforInformationScienceandTechnology.[8]李苹,李勇,范全润.高校教学状态数据可视化分析平台的设计与实现[J].实验技术与管理,2020,37(05):46-51.[9]李志钦,桑园.Java编程语言在大数据开发中的应用[J].黑龙江科学,2020,11(22):96-97.[10]DKTaft.EclipseToolAidsJavaAppCreation;TheeclipsefoundationreleasedVersion1.0ofitsWebToolsPlatformprojectthismonthtohelpdevelopersbuildenterpriseJavaandWebapplicationsbasedontheopen-sourceEclipsedevelopmentplatform.[11]方生.基于“Vue.js”前端框架技术的研究[J].电脑知识与技术,2021,17(19):59-60+64.[12]王以伍,舒晖.基于SpringBoot+Vue前后端分离的高校实验室预约管理系统的设计与实现[J].现代计算机,2023,29(01):114-117.[13]SquassabiaA.IntelliJIDEAinaction[J].ComputingReviews,2007,48(11):652.[14]罗兵.支持AJAX的互联网搜索引擎爬虫设计与实现[D].浙江大学,2007(02).[15]仓业金.基于JAVA编程语言的计算机软件开发应用[J].黑龙江教育(理论与实践),2018,No.1266(12):87-88.致谢附录1用户注册模块关键代码：<!--数字验证开始--><divclass="geetest_box"><divclass="geetest_box_title">验证</div><divclass="geetest_box_content"><Verificationref="child"></Verification></div></div><!--数字验证结束-->2.登录功能模块关键代码：PublicMap<String,Object>login(@RequestBodyMap<String,String>data,HttpServletRequesthttpServletRequest){("[执行登录接口]");Stringusername=data.get("username");Stringemail=data.get("email");Stringphone=data.get("phone");Stringpassword=data.get("password");ListresultList=null;Map<String,String>map=newHashMap<>();3.用户管理模块//删除用户代码get_list_after(param){ let_this=this;for(leti=0;i<this.list.length;i++){Letuser_id=_this.list[i].user_id_this.$get("~/api/user/get_obj?",{user_id},(json)=>{if(json.result.obj){_this.$delete(_this.list[i],'username');_this.$set(_this.list[i],'username',json.result.obj.username);_this.$delete(_this.list[i],'nickname');_this.$set(_this.list[i],'nickname',json.result.obj.nickname);}//修改用户信息asyncget_obj_after(json,func){letuser_group=this.$store.state.user.user_group;varjson=awaitthis.$get("~/api/user_group/get_obj?name="+user_group);if(json.result&&json.result.obj){if(json.result.obj.source_table){this.source_table=json.result.obj.source_tablethis.source_table_name=user_groupthis.source_table_check_url="/"+this.source_table+"/view";this.source_table_url=this.source_table_check_url+"?user_id="+this.form.user_id//新增用户关键代码<router-linkv-if="user_group=='管理员'"to="./view?"><el-buttonclass="el-buttonel-button--defaultel-button--primarysearch_btn_add">添加</el-button></router-link>疫情公告模块//发布公告关键代码<el-table-columnprop="announcement_title"@sort-change="$sortChange"label="公告标题"v-if="user_group=='管理员'||$check_field('get','announcement_title')"min-width="200"></el-table-column>//删除公告关键代码deleteRow(index,rows){rows.splice(index,1);}},created(){setTimeout(()=>{5.每日健康模块//用户上报健康信息关键代码url_get_list:"~/api/daily_health/get_list?like=0",url_del:"~/api/daily_health/del?",//字段IDfield:"daily_health_id",//查询query:{"size":7,"page":1,"cell_name":"","login_time":"","create_time":"","orderby":`create_timedesc`},//数据list:[],//用户列表list_user_user_account:[],//是否咳嗽列表list_cough_or_not:['有','无'],//是否发烧列表list_fever_or_not:['有','无'],//人员备注列表list_personnel_remarks:['关注','异常','隔离'],}},methods:{//关闭弹框//生成饼状图关键代码ist_daily_health(){letdata={};letflag=false;letuser_group=this.$store.state.user.user_group;letuser_id=this.$store.state.user.user_id;if(user_group!='管理员'){letsqlwhere="(";if(user_group=="普通用户"){sqlwhere+="`user_account`="+user_id+"or";}if(sqlwhere.length>1){sqlwhere=sqlwhere.substr(0,sqlwhere.length-4);sqlwhere+=")";data.sqlwhere=sqlwhere;}}6.行程登记模块</el-col><el-col:xs="24":sm="12":lg="8"class="el_form_item_warp"><el-form-itemlabel="审核状态"prop="examine_state"><el-selectid="examine_state"v-model="form['examine_state']"v-if="user_group==='管理员'||(form['examine_state']&&$check_examine())||(!form['examine_state']&&$check_examine())"><el-optionkey="未审核"label="未审核"value="未审核"></el-option><el-optionkey="已通过"label="已通过"value="已通过"></el-option><el-optionkey="未通过"label="未通过"value="未通过"></el-option></el-select><divv-else>{{form["examine_state"]}}</div></el-form-item><el-optionkey="未通过"label="未通过"value="未通过"></el-option>7.数据可视化模块//小区防疫状况柱状图关键代码$check_field('add','observer')||$check_field('set','observer')":xs="24":sm="12":lg="8"class="el_form_item_warp"><el-form-itemlabel="观察人员"prop="observer"><el-colv-if="user_group==='管理员'||$check_field('get','diagnosis_personnel')||$check_field('add','diagnosis_personnel')||$check_field('set','diagnosis_personnel')":xs="24":sm="12":lg="8"class="el_form_item_warp"><el-form-itemlabel="确诊人员"prop="diagnosis_personnel">el-colv-if="user_group==='管理员'||$check_field('get','isolate_personnel')||$check_field('add','isolate_personnel')||$check_field('set','isolate_personnel')"<el-form-itemlabel="隔离人员"prop="isolate_personnel">//柱状图