小區(qū)疫情防控管理系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)目錄摘要 [5]2.4數(shù)據(jù)庫MySQLMySQL是由瑞典MySQLAB公司開發(fā)、發(fā)布和支持的一個(gè)關(guān)系型數(shù)據(jù)庫管理系統(tǒng)，并支持大量的語言，大部分應(yīng)用程序語言均支持MySQL軟件。MySQL數(shù)據(jù)庫服務(wù)器速度快、可靠性高，擴(kuò)展性強(qiáng)，且易于使用，此外，MySQL服務(wù)器也可以作為嵌入式多線程庫，可以將其連接到應(yīng)用程序，以獲得更小、更快，更易于管理的獨(dú)立產(chǎn)品。3系統(tǒng)需求與設(shè)計(jì)3.1用戶需求分析小區(qū)疫情防控管理系統(tǒng)分為業(yè)主端和管理員端，其用戶對象是小區(qū)的業(yè)主和小區(qū)的疫情防控管理員，系統(tǒng)根據(jù)角色判斷用戶對象，從而進(jìn)入與其所對應(yīng)的系統(tǒng)頁面。用戶需求主要分為業(yè)主需求和防疫管理員需求，具體如下：業(yè)主需求：（1）業(yè)主可以通過登錄小區(qū)疫情防控系統(tǒng)進(jìn)入到系統(tǒng)首頁面；（2）業(yè)主可以通過小區(qū)防疫系統(tǒng)了解到當(dāng)前疫情的動(dòng)態(tài)，并選擇相應(yīng)的功能模塊進(jìn)行基本信息和健康信息的填報(bào)；（3）業(yè)主可以通過小區(qū)防疫系統(tǒng)的居民信息管理填寫完善自己的個(gè)人基本信息；（4）業(yè)主可以通過小區(qū)防疫系統(tǒng)的居民健康管理模塊進(jìn)行健康申報(bào)，上傳健康碼、行程卡、核酸檢測報(bào)告以及體溫等；（5）業(yè)主可以通過小區(qū)防疫系統(tǒng)的居民疫苗接種管理模塊進(jìn)行疫苗接種情況的填報(bào)；（6）業(yè)主可以通過小區(qū)防疫系統(tǒng)的訪客管理模塊進(jìn)行訪客預(yù)約，當(dāng)有客人來訪時(shí)，提前進(jìn)行預(yù)約填寫相關(guān)信息；（7）業(yè)主可以通過小區(qū)防疫系統(tǒng)的居民出入管理申請出入小區(qū)的出行證；防疫管理員需求：（1）防疫管理員可以通過登錄小區(qū)疫情防控系統(tǒng)進(jìn)入到系統(tǒng)首頁面；（2）防疫管理員可以通過小區(qū)防疫系統(tǒng)查看當(dāng)前系統(tǒng)的訪問人數(shù)，當(dāng)前的疫情動(dòng)態(tài)，業(yè)主的疫苗接種情況等可視化圖表；（3）防疫管理員可以每天更新最新的疫情動(dòng)態(tài)數(shù)字，以便用戶了解當(dāng)下的最新疫情動(dòng)態(tài)；（4）防疫管理員可以查看業(yè)主的個(gè)人信息，并有增加用戶、修改用戶信息、刪除用戶信息、查詢用戶信息的權(quán)限；（5）防疫管理員可以查看業(yè)主申報(bào)的健康碼、行程卡、核酸檢測報(bào)告、體溫等圖文數(shù)據(jù)，并有修改編輯的權(quán)限；（6）防疫管理員可以查看業(yè)主填報(bào)的疫苗接種情況，并有修改編輯信息的權(quán)限，并有提醒功能，提醒居民接種疫苗；（7）防疫管理員可以查看到業(yè)主提交的訪客預(yù)約，防疫管理員審核之后將審核信息反饋給業(yè)主；（8）防疫管理員可以創(chuàng)建居民用戶的出行證，可以進(jìn)行出行驗(yàn)證，并且可以查看到居民出行的出行信息。3.2功能需求分析本系統(tǒng)分為業(yè)主端和管理員端，以業(yè)主和防疫工作管理員的需求為出發(fā)點(diǎn)，本小區(qū)疫情防控管理系統(tǒng)主要實(shí)現(xiàn)居民信息管理、居民健康管理、居民疫苗接種管理、訪客管理、居民出入管理、疫情通告等功能，具體要求如下：業(yè)主端功能需求：（1）居民信息管理居民信息填報(bào)：業(yè)主擁有自己的賬號，登錄進(jìn)入系統(tǒng)之后可以填寫自己的個(gè)人信息，包括姓名、用戶名、密碼、手機(jī)號碼、地址、生日等，提交之后信息會(huì)傳到管理員端，業(yè)主端跳轉(zhuǎn)到個(gè)人信息頁面，業(yè)主可以查看到自己的信息，并且可以對自己的信息進(jìn)行修改。（2）居民健康管理居民健康填報(bào)：業(yè)主可以在居民健康填報(bào)里面填寫提交個(gè)人的防疫健康信息，以便工作人員收集排查小區(qū)人員的健康情況，包括姓名、身份證號碼、手機(jī)號碼、體溫、近14天是否在省內(nèi)、身體是否有異常、上傳本人的健康碼、行程卡、核酸檢測報(bào)告等，提交之后信息會(huì)傳到管理員端，業(yè)主端跳轉(zhuǎn)到居民健康列表，業(yè)主可以查看自己提交過的健康數(shù)據(jù)。居民健康列表：業(yè)主在提交健康信息填報(bào)之后可以在列表看到自己提交過的健康信息。（3）居民疫苗接種管理居民疫苗接種填報(bào)：業(yè)主可以在居民疫苗接種填報(bào)里面填寫疫苗接種的情況，以便工作人員了解該小區(qū)的疫苗接種情況，包括姓名、身份證號碼、手機(jī)號碼、第一針接種時(shí)間、第二針接種時(shí)間、第三針接種時(shí)間、疫苗類型、接種針次等，提交之后信息會(huì)傳到管理員端，疫苗沒有接種完成的，會(huì)收到管理員端發(fā)來的疫苗接種提醒信息，業(yè)主端跳轉(zhuǎn)到居民疫苗接種列表，業(yè)主可以查看自己提交過的疫苗數(shù)據(jù)。居民疫苗接種列表：業(yè)主在提交疫苗接種信息之后可以在列表看到自己提交過的疫苗接種信息。（4）訪客管理訪客填報(bào)：業(yè)主可以在訪客填報(bào)里面進(jìn)行訪客預(yù)約，當(dāng)有客人需要來訪時(shí)，提前在系統(tǒng)里進(jìn)行訪客預(yù)約，填寫相關(guān)健康信息，包括業(yè)主姓名、訪客姓名、手機(jī)號碼、體溫、訪客健康碼、訪客行程碼、訪客核酸報(bào)告等，提交之后信息會(huì)傳到管理員端，等待工作人員審核，業(yè)主端跳轉(zhuǎn)到訪客列表，業(yè)主可以查看填報(bào)的訪客預(yù)約信息。訪客列表：業(yè)主可以在提交訪客預(yù)約后可以在訪客列表看到審核狀態(tài)，只有工作人員審核通過，才算預(yù)約成功。（5）居民出入管理居民出入列表：業(yè)主可以查看自己出行證的總出行次數(shù)、剩余出行次數(shù)以及出行時(shí)間等。管理員端功能需求：（1）疫情數(shù)據(jù)疫情數(shù)據(jù)變更：系統(tǒng)首頁有可視化的疫情地圖，工作人員每天在疫情數(shù)據(jù)變更里面更新每天的疫情數(shù)據(jù)，更新之后在業(yè)主端和管理員端的地圖上都可以看到疫情數(shù)據(jù)。（2）居民信息管理居民信息列表：管理員端可以接收到業(yè)主端提交之后的個(gè)人信息，并且可以對業(yè)主的信息進(jìn)行修改、查詢和刪除操作（3）居民健康管理居民健康列表：管理員端可以接收到業(yè)主端提交過來的健康信息，以便工作人員及時(shí)查看居民的健康狀況，方便防疫工作的進(jìn)行。并且可以對居民的信息進(jìn)行修改、查找、刪除等操作。（4）居民疫苗接種管理居民疫苗接種列表：管理員端可以接收到業(yè)主端提交過來的疫苗接種情況，方便管理員掌握小區(qū)人員的疫苗接種情況，并對沒有完成疫苗接種的人員發(fā)送提醒信息，提醒其接種疫苗，同時(shí)還可以對疫苗接種信息進(jìn)行修改、查找、刪除等操作。（5）訪客管理訪客列表：管理員端可以接收到業(yè)主端提交過來的訪客預(yù)約信息，管理員可以查看提交的預(yù)約的信息，健康碼、行程卡、核酸檢測報(bào)告、體溫等是否合格，合格則予以審核通過，否則將拒絕訪客來訪，另外，還可以對訪客信息進(jìn)行修改、查找和刪除操作。（6）居民出入管理居民出行號生成：每個(gè)業(yè)主都會(huì)擁有一個(gè)唯一的出行號，出行號只有在管理端才能創(chuàng)建，管理員輸入用戶、姓名、身份證號、出行總次數(shù)會(huì)自動(dòng)生成一個(gè)隨機(jī)的唯一的出行號，小區(qū)人員出入時(shí)評出行號驗(yàn)證出行。當(dāng)出行次數(shù)用完時(shí)，此出行號則失效，需要重新到工作人員處辦理創(chuàng)建。出入驗(yàn)證：居民在出入時(shí)工作人員會(huì)在系統(tǒng)里面輸入出行號進(jìn)行驗(yàn)證，有次數(shù)則可以成功出行，如果次數(shù)用完將不可以出行。居民出行號列表：管理員端可以查看到業(yè)主的出行證狀況，包括總次數(shù)、剩余次數(shù)、使用狀態(tài)，出行次數(shù)還有剩余時(shí)，則是使用中的狀態(tài)，出行次數(shù)用完時(shí)出行號將是被回收的狀態(tài)，同時(shí)，管理員還可以對出行號列表進(jìn)行查詢和刪除操作。4系統(tǒng)設(shè)計(jì)該系統(tǒng)設(shè)計(jì)了用戶登錄、居民信息管理、居民健康管理、居民疫苗接種管理、訪客管理、居民出入管理等功能，各個(gè)功能的設(shè)計(jì)如下文所述：4.1用戶登錄用戶登錄功能是每個(gè)用戶已經(jīng)擁有了賬號，再進(jìn)行注冊，用戶通過輸入登錄界面上的用戶名和密碼進(jìn)行登錄，如果輸入的用戶名和密碼正確，則登錄成功，成功后跳轉(zhuǎn)到系統(tǒng)的主頁面——首頁；輸入的用戶名或者密碼不正確，則登錄失敗。4.2居民信息管理4.2.1業(yè)主端居民信息填報(bào)居民信息填報(bào)主要是業(yè)主用戶填寫自己的個(gè)人信息，通過數(shù)據(jù)庫的增加語句來實(shí)現(xiàn)此功能，用戶填寫信息后將信息存儲(chǔ)進(jìn)數(shù)據(jù)庫，以供工作人員查看。業(yè)主用戶填寫完提交之后跳轉(zhuǎn)到個(gè)人信息表單，可以看到自己所填的信息，如需要修改，則可以進(jìn)行信息的修改，通過數(shù)據(jù)庫的修改來實(shí)現(xiàn)此功能。4.2.2管理員端居民信息列表管理員可以看到業(yè)主端傳過來的業(yè)主填寫的個(gè)人基本信息，并且可以對業(yè)主的信息進(jìn)行查詢、修改、刪除的操作。查詢管理員在查詢框輸入查詢的信息，數(shù)據(jù)庫進(jìn)行查詢，如果存在該數(shù)據(jù)，則查詢成功，顯示該數(shù)據(jù)，否則查不到數(shù)據(jù)。修改是管理員對信息進(jìn)行修改，修改之后信息寫入數(shù)據(jù)庫進(jìn)行存儲(chǔ)。刪除是管理員對該條信息進(jìn)行刪除，隨之?dāng)?shù)據(jù)庫里也將不存在該信息。4.3居民健康管理4.3.1業(yè)主端居民健康信息填報(bào)居民健康信息填報(bào)主要是業(yè)主用戶填寫健康信息，通過數(shù)據(jù)庫的增加語句來實(shí)現(xiàn)此功能，用戶填寫信息后將信息存儲(chǔ)進(jìn)數(shù)據(jù)庫，以供工作人員查看。業(yè)主用戶填寫完提交之后跳轉(zhuǎn)到健康信息列表，可以看到自己所提交的健康信息。4.3.2管理員端居民健康信息列表管理員可以看到業(yè)主端傳過來的業(yè)主提交的健康信息，并且可以對業(yè)主的信息進(jìn)行查詢、修改、刪除的操作。查詢管理員在查詢框輸入查詢的信息，數(shù)據(jù)庫進(jìn)行查詢，如果存在該數(shù)據(jù)，則查詢成功，顯示該數(shù)據(jù)，否則查不到數(shù)據(jù)。修改是管理員對信息進(jìn)行修改，修改之后信息寫入數(shù)據(jù)庫進(jìn)行存儲(chǔ)。刪除是管理員對該條信息進(jìn)行刪除，隨之?dāng)?shù)據(jù)庫里也將不存在該信息。4.4居民疫苗接種管理4.4.1業(yè)主端居民疫苗接種填報(bào)居民疫苗接種填報(bào)主要是業(yè)主用戶填寫疫苗接種信息，通過數(shù)據(jù)庫的增加語句來實(shí)現(xiàn)此功能，用戶填寫信息后將信息存儲(chǔ)進(jìn)數(shù)據(jù)庫，以供工作人員查看。業(yè)主用戶填寫完提交之后跳轉(zhuǎn)到疫苗接種列表，可以看到自己所提交的疫苗接種信息。4.4.2管理員端居民疫苗接種列表管理員可以看到業(yè)主端傳過來的業(yè)主提交的疫苗接種信息，并且可以對業(yè)主的信息進(jìn)行查詢、修改、刪除、提醒的操作。查詢管理員在查詢框輸入查詢的信息，數(shù)據(jù)庫進(jìn)行查詢，如果存在該數(shù)據(jù)，則查詢成功，顯示該數(shù)據(jù)，否則查不到數(shù)據(jù)。修改是管理員對信息進(jìn)行修改，修改之后信息寫入數(shù)據(jù)庫進(jìn)行存儲(chǔ)。刪除是管理員對該條信息進(jìn)行刪除，隨之?dāng)?shù)據(jù)庫里也將不存在該信息。此外，管理員還要對未完成接種的人員發(fā)送疫苗接種提醒，管理員發(fā)送提醒后，業(yè)主用戶可以在自己的賬號中收到提醒信息。4.5訪客管理4.5.1業(yè)主端訪客填報(bào)訪客填報(bào)主要是有客人需要來訪時(shí)，要進(jìn)行訪客預(yù)約，通過數(shù)據(jù)庫的增加語句來實(shí)現(xiàn)此功能，用戶填寫信息后將信息存儲(chǔ)進(jìn)數(shù)據(jù)庫，以供工作人員查看并進(jìn)行審核。業(yè)主用戶填寫完提交之后跳轉(zhuǎn)到訪客列表，可以看到自己所提交的訪客預(yù)約信息，以及查看審核是否通過。4.5.2管理員端訪客列表管理員可以看到業(yè)主端傳過來的業(yè)主提交的訪客預(yù)約申請，并且可以對業(yè)主的申請進(jìn)行查詢、修改、刪除、審核的操作。查詢管理員在查詢框輸入查詢的信息，數(shù)據(jù)庫進(jìn)行查詢，如果存在該數(shù)據(jù)，則查詢成功，顯示該數(shù)據(jù)，否則查不到數(shù)據(jù)。修改是管理員對信息進(jìn)行修改，修改之后信息寫入數(shù)據(jù)庫進(jìn)行存儲(chǔ)。刪除是管理員對該條信息進(jìn)行刪除，隨之?dāng)?shù)據(jù)庫里也將不存在該信息。此外，管理員還要對用戶提交的訪客預(yù)約申請進(jìn)行審核，管理員審核之后業(yè)主用戶可以在訪客列表看到審核狀態(tài)。4.6管理員端居民出入管理4.6.1居民出行號生成該功能是管理員才可以創(chuàng)建的，管理員輸入業(yè)主的基本信息，賦予一定的出行次數(shù)之后會(huì)隨機(jī)生成一個(gè)出行號，此出行號是唯一的，創(chuàng)建之后數(shù)據(jù)寫入數(shù)據(jù)庫存儲(chǔ)，則創(chuàng)建出行號成功。4.6.2出入驗(yàn)證該功能是管理員操作的，管理員輸入業(yè)主的出行號，數(shù)據(jù)庫進(jìn)行查詢，并進(jìn)行次數(shù)驗(yàn)證，如果還有出行剩余次數(shù)則出行成功，業(yè)主每出行一次，出行次數(shù)將會(huì)減一，如果出行剩余次數(shù)為0，則出行失敗。4.6.3居民出行號列表管理員可以看到業(yè)主的出行證情況，并且可以出行進(jìn)行查詢、刪除、的操作。查詢管理員在查詢框輸入查詢的信息，數(shù)據(jù)庫進(jìn)行查詢，如果存在該數(shù)據(jù)，則查詢成功，顯示該數(shù)據(jù)，否則查不到數(shù)據(jù)。刪除是管理員對該條信息進(jìn)行刪除，隨之?dāng)?shù)據(jù)庫里也將不存在該信息。4.7疫情數(shù)據(jù)變更管理員需要對疫情數(shù)據(jù)進(jìn)行更改，更改后能在地圖上同步顯示疫情數(shù)據(jù)。5系統(tǒng)模塊實(shí)現(xiàn)5.1登錄界面實(shí)現(xiàn)登錄的界面布局：登錄界面的代碼寫在Login.vue里面，通過登錄按鈕綁定了一個(gè)@click單擊事件，觸發(fā)登錄按鈕執(zhí)行methods中定義的login()方法，判斷用戶名和密碼是否一致，一致就提示登錄成功并跳轉(zhuǎn)到index頁面，否則就提示錯(cuò)誤信息。登錄頁面如下圖所示：關(guān)鍵代碼如下：methods:{

login(){//傳用戶名和密碼給后端,驗(yàn)證用戶名和密碼是否正確

if(this.checkParam()){

returnfalse

}

letparams=newFormData()

params.append('username',this.form.username)

params.append('password',this.form.password)

this.service

.post('http://localhost:8080/communitymanagement/login',params,{headers:{'Content-Type':'multipart/form-data'}})

.then(res=>{

letdata=res.data;

if(data.code==200){

this.$message.success('登錄成功')

sessionStorage.setItem("userInfo",JSON.stringify(data.data));

}else{

this.$message.error(data.data)

returnfalse;

}

this.$router.push('/home/index')

window.location.reload();

})

.catch(error=>{

console.log(error);

})

},5.2居民信息管理界面實(shí)現(xiàn)（1）業(yè)主端居民信息填報(bào)：居民信息填報(bào)界面的代碼寫在OwnerAdd.vue里面，通過提交按鈕綁定了一個(gè)@click單擊事件，觸發(fā)提交按鈕執(zhí)行methods中定義的onSubmit()方法，判斷輸入框中的內(nèi)容是否為空，不為空則返回提交成功并跳轉(zhuǎn)到信息列表頁面，否則彈出提出信息，且提交失敗。居民信息填報(bào)頁面如下圖所示：關(guān)鍵代碼如下：Methods:{onSubmit(){

if(this.checkParam()!=null){

this.$message.error(this.checkParam())

returnfalse;

}

this.service.post('/tbowner/add'

,{data:this.addParam})

.then(result=>{

console.log(result)

letdata=result.data;

if(data.code==500){

this.$message.error("請求失?。?+data.data)

}

if(data.data>0){

this.$message.success('提交成功')

this.initAddParam();

this.$router.push('/home/OwnerList')

}else{

this.$message.error('提交失敗')

}

})

},}（2）管理員端居民信息列表：居民信息列表界面的代碼寫在OwnerList.vue里面，其中修改居民信息通過@click單擊事件綁定editSubmit()方法觸發(fā)提交按鈕，將修改后的信息保存，并返回結(jié)果，修改成功則調(diào)用initList方法跳轉(zhuǎn)到信息列表頁面。通過@click綁定的onsubmit()方法觸發(fā)查詢按鈕，查詢居民信息。刪除信息則是通過deleteParam()方法觸發(fā)刪除按鈕，并提示用戶是否刪除該數(shù)據(jù)，確定則刪除成功，調(diào)用initList方法跳轉(zhuǎn)到列表頁面，取消則提示取消刪除。居民信息列表頁面如下圖所示：關(guān)鍵代碼如下：methods:{editSubmit(){

this.service.post('/tbowner/add'

,{data:this.addParam})

.then(result=>{

letdata=result.data;

if(data.code==500){

his.$message.error("請求失敗："+data.data)

}

if(data.data>0){

this.$message.success('修改成功')

this.initList();

this.outerVisible=false;

}else{

this.$message.error('修改失敗')

}

})

},deleteParam(row){

console.log(row)

this.$confirm('此操作將永久刪除該用戶,是否繼續(xù)?','提示',{

confirmButtonText:'確定',

cancelButtonText:'取消',

type:'warning'

}).then(()=>{

this.service.post('/tbowner/del'

,{data:row.id})

.then(result=>{

letdata=result.data;

if(data.data>0){

this.$message({

type:'success',

message:'刪除成功!'

});onSubmit(){this.initList()},

reset(){for(letiteminthis.requestData.requestData){this.requestData.requestData[item]='';}},}5.3居民健康管理界面實(shí)現(xiàn)（1）業(yè)主端居民健康填報(bào)：居民健康填報(bào)界面的代碼寫在MessageAdd.vue里面，通過提交按鈕綁定了一個(gè)@click單擊事件，觸發(fā)提交按鈕執(zhí)行methods中定義的onSubmit()方法，調(diào)用checkParam()方法判斷輸入框中的內(nèi)容是否為空，為空則返回labelName中的提示信息，不為空則返回提交成功并跳轉(zhuǎn)到信息列表頁面，居民健康填報(bào)頁面如下圖所示：關(guān)鍵代碼如下：methods:{

cancel(){

this.$router.push('/home/MessageList')

},

checkParam(){

for(letiteminthis.addParam){

if(this.addParam[item].length<1){

returnthis.labelName[item];

}

}

returnnull;

},

onSubmit(){

console.log(this.checkParam())

if(this.checkParam()!=null){

this.$message.error(this.checkParam());

returnfalse;

}

this.service.post('/tbmessage/add'

,{data:this.addParam})

.then(result=>{

letdata=result.data;

if(data.code==500){

this.$message.error("請求失?。?+data.data)

}

if(data.data>0){

this.$message.success('提交成功')

this.$router.push('/home/MessageList')

this.addParam={

name:'',

card_type:1,

card_number:'',

phone:'',

is_province:0,

is_error:0,

};

for(letiteminthis.fileList){

this.fileList[item]=[];

}

}else{

this.$message.error('提交失敗')

}

})

},}（2）管理員端居民健康列表：居民健康列表界面的代碼寫在MessageList.vue里面，其中修改健康信息通過@click單擊事件綁定editSubmit()方法觸發(fā)提交按鈕，將修改后的信息保存，并返回結(jié)果，修改成功則調(diào)用initList方法跳轉(zhuǎn)到信息列表頁面。通過@click綁定的onsubmit()方法觸發(fā)查詢按鈕，查詢居民信息。刪除信息則是通過deleteParam()方法觸發(fā)刪除按鈕，并提示用戶是否刪除該數(shù)據(jù)，確定則刪除成功，調(diào)用initList方法跳轉(zhuǎn)到列表頁面，取消則提示取消刪除。居民健康信息列表頁面如下圖所示：關(guān)鍵代碼如下：methods:{editSubmit(){

this.service.post('/tbmessage/add'

,{data:this.addParam})

.then(result=>{

letdata=result.data;

if(data.code==500){

his.$message.error("請求失敗："+data.data)

}

if(data.data>0){

this.$message.success('修改成功')

this.initList();

this.outerVisible=false;

}else{

this.$message.error('修改失敗')

}

})

},

initList(){

this.service.post('/tbmessage/list'

,this.requestData)

.then(result=>{

this.list=result.data.data.data;

this.total=result.data.data.total;

})

},deleteParam(row){

console.log(row)

this.$confirm('此操作將永久刪除該條信息，是否繼續(xù)?','提示',{

confirmButtonText:'確定',

cancelButtonText:'取消',

type:'warning'

}).then(()=>{

this.service.post('/tbmessage/del'

,{data:row.id})

.then(result=>{

letdata=result.data;

if(data.data>0){

this.$message({

type:'success',

message:'刪除成功!'

});

this.initList()

}else{

this.$message({

type:'info',

message:'已取消刪除'

});

}

});}5.4居民疫苗接種界面實(shí)現(xiàn)（1）業(yè)主端居民疫苗接種填報(bào)：疫苗接種填報(bào)界面的代碼寫在VaccineAdd.vue里面，通過提交按鈕綁定了一個(gè)@click單擊事件，觸發(fā)提交按鈕執(zhí)行methods中定義的onSubmit()方法，調(diào)用checkParam()方法判斷輸入框中的內(nèi)容是否為空，為空則返回labelName中的提示信息，不為空則返回提交成功并跳轉(zhuǎn)到信息列表頁面，居民疫苗接種頁面如下圖所示：關(guān)鍵代碼如下：methods:{checkParam(){

for(letiteminthis.addParam){

if(this.addParam[item].length<1){

returnthis.labelName[item];

}

}

returnnull;

},

onSubmit(){

console.log(this.checkParam())

if(this.checkParam()!=null){

this.$message.error(this.checkParam());

returnfalse;

}

this.service.post('/tbvaccine/add'

,{data:this.addParam})

.then(result=>{

letdata=result.data;

if(data.code==500){

this.$message.error("請求失?。?+data.data)

}

if(data.data>0){

this.$message.success('提交成功')

this.addParam={

name:'',

card_type:1,

card_number:'',

phone:'',

is_province:0,

is_error:0,

};

for(letiteminthis.fileList){

this.fileList[item]=[];

}

this.$router.push("/home/VaccineList");

}else{

this.$message.error('提交失敗')

}

})

},}（2）管理員端居民疫苗接種列表：疫苗接種列表界面的代碼寫在VaccineList.vue里面，其中修改疫苗信息通過@click單擊事件綁定editSubmit()方法觸發(fā)提交按鈕，將修改后的信息保存，并返回結(jié)果，修改成功則調(diào)用initList方法跳轉(zhuǎn)到信息列表頁面。通過@click綁定的onsubmit()方法觸發(fā)查詢按鈕，查詢居民信息。刪除信息則是通過deleteParam()方法觸發(fā)刪除按鈕，并提示用戶是否刪除該數(shù)據(jù)，確定則刪除成功，調(diào)用initList方法跳轉(zhuǎn)到列表頁面，取消則提示取消刪除。提醒按鈕則是通過綁定addParamRemindMethod（）方法向用戶發(fā)送接種疫苗的提醒信息。疫苗接種信息列表頁面如下圖所示：關(guān)鍵代碼如下：methods:{editSubmit(){

this.service.post('/tbvaccine/add'

,{data:this.addParam})

.then(result=>{

letdata=result.data;

if(data.code==500){

this.$message.error("請求失?。?+data.data)

}

if(data.data>0){

this.$message.success('修改成功')

this.initList();

this.outerVisible=false;

}else{

this.$message.error('修改失敗')

}

})

},

initList(){

this.service.post('/tbvaccine/list'

,this.requestData)

.then(result=>{

this.list=result.data.data.data;

})

},

addParamRemindMethod(){

this.service.post('/remind/add'

,{data:this.addParamRemind})

.then(result=>{

letdata=result.data;

if(data.code==500){

this.$message.error("請求失?。?+data.data)

}

if(data.data>0){

this.$message.success('發(fā)送成功')

this.initList();

this.addParamRemindSync=false;

}else{

this.$message.error('發(fā)送失敗')

}

})

},deleteParam(row){

this.$confirm('此操作將永久刪除該文件,是否繼續(xù)?','提示',{

confirmButtonText:'確定',

cancelButtonText:'取消',

type:'warning'

}).then(()=>{

this.service.post('/tbvaccine/del'

,{data:row.id})

.then(result=>{

letdata=result.data;

if(data.data>0){

this.$message({

type:'success',

message:'刪除成功!'

});

this.initList()

}else{

this.$message({

type:'info',

message:'已取消刪除'

});

}

});5.5訪客管理界面實(shí)現(xiàn)（1）業(yè)主端訪客填報(bào)：訪客填報(bào)界面的代碼寫在VisitorAdd.vue里面，通過提交按鈕綁定了一個(gè)@click單擊事件，觸發(fā)提交按鈕執(zhí)行methods中定義的onSubmit()方法，調(diào)用checkParam()方法判斷輸入框中的內(nèi)容是否為空，為空則返回labelName中的提示信息，不為空則返回提交成功并跳轉(zhuǎn)到信息列表頁面，訪客填報(bào)頁面如下圖所示：關(guān)鍵代碼如下：methods:{

returnList(){

this.$router.push('/home/VisitorLis');

},

checkParam(){

for(letiteminthis.addParam){

if(this.addParam[item].length<1){

returnthis.labelName[item];

}

}

returnnull;

},

onSubmit(){

console.log(this.checkParam())

if(this.checkParam()!=null){

this.$message.error(this.checkParam());

returnfalse;

}

this.service.post('/tbvisitor/add'

,{data:this.addParam})

.then(result=>{

letdata=result.data;

if(data.code==500){

this.$message.error("請求失?。?+data.data)

}

if(data.data>0){

this.$message.success('提交成功')

for(letiteminthis.addParam){

this.addParam[item]='';

}

for(letiteminthis.fileList){

this.fileList[item]=[];

}

this.$router.push('/home/VisitorLis');

}else{

this.$message.error('提交失敗')

}

})

},}（2）管理員端訪客列表：訪客列表界面的代碼寫在VisitorList.vue里面，其中修改訪客信息通過@click單擊事件綁定editSubmit()方法觸發(fā)提交按鈕，將修改后的信息保存，并返回結(jié)果，修改成功則調(diào)用initList方法跳轉(zhuǎn)到信息列表頁面。通過@click綁定的onsubmit()方法觸發(fā)查詢按鈕，查詢居民信息。刪除信息則是通過deleteParam()方法觸發(fā)刪除按鈕，并提示用戶是否刪除該數(shù)據(jù)，確定則刪除成功，調(diào)用initList方法跳轉(zhuǎn)到列表頁面，取消則提示取消刪除。審核按鈕則是通過綁定confirmYes()方法和cancelNo()方法，判斷用戶點(diǎn)擊的是同意還是拒絕，‘1’則是拒絕，‘2’則是同意，并將審核結(jié)果返回到頁面。訪客列表頁面如下圖所示：關(guān)鍵代碼如下：methods:{confirmYes(row){

this.service.post('/tbvisitor/edit'

,{data:{id:row.id,status:1}})

.then(result=>{

this.initList()

})

},

cancelNo(row){

this.service.post('/tbvisitor/edit'

,{data:{id:row.id,status:2}})

.then(result=>{

this.initList()

})

},

editSubmit(){

this.service.post('/tbvisitor/add'

,{data:this.addParam})

.then(result=>{

letdata=result.data;

if(data.code==500){

his.$message.error("請求失?。?+data.data)

}

if(data.data>0){

this.$message.success('修改成功')

this.initList();

this.outerVisible=false;

}else{

this.$message.error('修改失敗')

}

})

},

initList(){

this.service.post('/tbvisitor/list'

,this.requestData)

.then(result=>{

this.list=result.data.data.data;

})

},deleteParam(row){

console.log(row)

this.$confirm('此操作將永久刪除該數(shù)據(jù),是否繼續(xù)?','提示',{

confirmButtonText:'確定',

cancelButtonText:'取消',

type:'warning'

}).then(()=>{

this.service.post('/tbvisitor/del'

,{data:row.id})

.then(result=>{

letdata=result.data;

if(data.data>0){

this.$message({

type:'success',

message:'刪除成功!'

});

this.initList()

}else{

this.$message({

type:'info',

message:'已取消刪除'

});

}

});}5.6居民出入管理界面實(shí)現(xiàn)（1）居民出行號生成：居民出行號生成界面的代碼寫在TurnoverAdd.vue里面，通過創(chuàng)建按鈕綁定了一個(gè)@click單擊事件，觸發(fā)提交按鈕執(zhí)行methods中定義的onSubmit()方法，調(diào)用checkParam()方法判斷輸入框中的內(nèi)容是否為空，為空則返回labelName中的提示信息，不為空則返回創(chuàng)建成功并跳轉(zhuǎn)到信息列表頁面，出行號生成頁面如下圖所示：關(guān)鍵代碼如下：methods:{checkParam(){

for(letiteminthis.addParam){

if(this.addParam[item].length<1){

returnthis.labelName[item];

}

}

returnnull;

},

onSubmit(){

console.log(this.checkParam())

if(this.checkParam()!=null){

this.$message.error(this.checkParam());

returnfalse;

}

this.service.post('/tbturnover/add'

,{data:this.addParam})

.then(result=>{

letdata=result.data;

if(data.code==500){

this.$message.error("請求失敗："+data.data)

}

if(data.data>0){

this.$message.success('創(chuàng)建成功')

this.$router.push('/home/TurnoverList')

for(letiteminthis.addParam){

this.addParam[item]='';

}

for(letiteminthis.fileList){

this.fileList[item]=[];

}

}else{

this.$message.error('創(chuàng)建失敗')

}

})

},}（2）居民出行驗(yàn)證：居民出行驗(yàn)證的代碼寫在TurnoverCheck.vue里面，通過創(chuàng)建按鈕綁定了一個(gè)@click單擊事件，觸發(fā)提交按鈕執(zhí)行methods中定義的onSubmit()方法，調(diào)用checkParam()方法判斷輸入框中的內(nèi)容是否為空，為空則返回labelName中的提示信息，不為空則返回創(chuàng)建成功并跳轉(zhuǎn)到信息列表頁面，出行驗(yàn)證頁面如下圖所示：關(guān)鍵代碼如下：methods:{checkParam(){

for(letiteminthis.addParam){

if(this.addParam[item].length<1){

returnthis.labelName[item];

}

}

returnnull;

},

onSubmit(){

this.service.post('/tbturnover/goOut'

,{data:this.addParam})

.then(result=>{

letdata=result.data;

if(data.code==500){

this.$message.error("請求失?。?+data.data)

}

if(data.data>0){

this.$message.success('出行成功')

for(letiteminthis.addParam){

this.addParam[item]='';

}

for(letiteminthis.fileList){

this.fileList[item]=[];

}

}else{

this.$message.error('出行失敗')

}

})

},（3居民出行號列表：居民出行號列表界面的代碼寫在TurnoverList.vue里面，通過@click綁定的onsubmit()方法觸發(fā)查詢按鈕，查詢居民信息。刪除信息則是通過deleteParam()方法觸發(fā)刪除按鈕，并提示用戶是否刪除該數(shù)據(jù)，確定則刪除成功，調(diào)用initList方法跳轉(zhuǎn)到列表頁面，取消則提示取消刪除。居民出行號列表頁面如下圖所示：關(guān)鍵代碼如下：methods:{initList(){

this.service.post('/tbturnover/list'

,this.requestData)

.then(result=>{

this.list=result.data.data.data;

})

},deleteParam(row){

console.log(row)

this.$confirm('此操作將永久刪除該數(shù)據(jù),是否繼續(xù)?','提示',{

confirmButtonText:'確定',

cancelButtonText:'取消',

type:'warning'

}).then(()=>{

this.service.post('/tbturnover/del'

,{data:row.id})

.then(result=>{

letdata=result.data;

if(data.data>0){

this.$message({

type:'success',

message:'刪除成功!'

});

this.initList()

}else{

this.$message({

type:'info',

message:'已取消刪除'

});

}

});onSubmit(){this.initList()},

reset(){for(letiteminthis.requestData.requestData){this.requestData.requestData[item]='';}},

}}5.7可視化圖表界面實(shí)現(xiàn)可視化圖表界面主要運(yùn)用echaers可視化技術(shù)將小區(qū)人員的疫苗接種情況，系統(tǒng)的每日訪客趨勢，小區(qū)人員每天的出入次數(shù)趨勢通過餅圖和折線圖的方式顯示出來，一目了然，調(diào)用的echaers提供的插件。地圖則是調(diào)用了echaers內(nèi)置的中國地圖，調(diào)用China.json文件將地圖放到自己的畫布中。6測試本次系統(tǒng)測試主要進(jìn)行以下幾個(gè)方面：登錄測試：（1）登入系統(tǒng)：用戶名或密碼錯(cuò)誤時(shí)，是否會(huì)出現(xiàn)錯(cuò)誤提示，用戶名和密碼正確時(shí)能否成功登錄；（2）登出系統(tǒng)：進(jìn)入系統(tǒng)后能否成功退出登錄；居民信息管理測試：（1）業(yè)主端能否成功上傳圖片、頭像并顯示，用戶信息填寫后能否成功提交并跳轉(zhuǎn)表單頁面，能否成功修改信息，能否將數(shù)據(jù)傳到管理員端；（2）管理員端能否接收到業(yè)主端傳過來的個(gè)人信息，能否成功實(shí)現(xiàn)全查和條件查詢個(gè)人信息，能否成功修改個(gè)人信息，能否成功刪除個(gè)人信息，能否正常顯示傳過來的圖片；居民健康管理測試：（1）業(yè)主端能否成功上傳健康碼、行程卡、核酸檢測的圖片，能否成功提交并跳轉(zhuǎn)列表頁面，能否將數(shù)據(jù)傳到管理員端；（2）管理員端能否接收到業(yè)主端傳過來的健康信息，圖片能否正常顯示，能否成功實(shí)現(xiàn)全查和條件查詢健康信息，能否成功修改健康信息，能否成功刪除健康信息；居民疫苗接種管理測試：（1）業(yè)主端能否成功提交疫苗接種信息并跳轉(zhuǎn)到列表頁面，疫苗接種針次能否根據(jù)疫苗接種針次時(shí)間的填寫自動(dòng)識別并填入文本框內(nèi)；能否接收到管理員端發(fā)送的疫苗接種提醒，能否將數(shù)據(jù)傳到管理員端；（2）管理員端能否接收到業(yè)主端傳過來的疫苗接種信息，能否成功實(shí)現(xiàn)全查和條件查詢疫苗接種信息，能否成功修改疫苗接種信息，能否成功刪除疫苗接種信息，能否成功發(fā)送疫苗接種提醒到業(yè)主端；訪客管理測試：（1）業(yè)主端能否成功上傳圖片，能否成功提交并跳轉(zhuǎn)到列表頁面，能否將數(shù)據(jù)傳到管理員端，能否查看到管理員端返回的審核狀態(tài)；（2）管理員端能否接收到業(yè)主端傳過來的訪客預(yù)約申請，圖片能否正常顯示，能否成功實(shí)現(xiàn)全查和條件查詢訪客預(yù)約申請，能否成功修改訪客申請，能否成功刪除訪客申請，能否對訪客提交的申請進(jìn)行審核，審核后能否將審核結(jié)果返回到業(yè)主端；居民出入管理測試：（1）業(yè)主端能否接收到管理員端返回過來的出行列表數(shù)據(jù)；（2）管理員端能否實(shí)現(xiàn)自動(dòng)生成的唯一出行號，能否實(shí)現(xiàn)出行驗(yàn)證，剩余次數(shù)小于1時(shí)能否提示出行次數(shù)已用完，請重新申請，