需求分析2.1需求概括社區(qū)信息管理系統(tǒng)能夠大大優(yōu)化社區(qū)管理員的工作，同時(shí)為居民信息的存儲(chǔ)、管理、查詢提供更加安全、高效、便捷的操作方式，實(shí)現(xiàn)其對(duì)人口，樓棟，設(shè)備，車位的管理，將社區(qū)內(nèi)的設(shè)施，服務(wù)，信息互聯(lián)互通。將對(duì)社區(qū)設(shè)備能夠精準(zhǔn)落實(shí)的相關(guān)維護(hù)人員，避免出現(xiàn)由于安排不即使導(dǎo)致設(shè)備一直處于損壞狀態(tài)。2.2總體需求根據(jù)社區(qū)管理的實(shí)際需求，考慮系統(tǒng)軟件的實(shí)用性和穩(wěn)定性以及簡(jiǎn)便性?？偨Y(jié)了整個(gè)系統(tǒng)的使用流程和功能需求，以便對(duì)整個(gè)系統(tǒng)的架構(gòu)有個(gè)初步的認(rèn)識(shí)與搭建。2.2.1整體操作流程需求超級(jí)管理員或者管理員通過(guò)輸入正確的賬號(hào)與密碼可以登錄進(jìn)入到社區(qū)信息理系統(tǒng)中。具體使用流程由圖2.1所示。圖2.1整體操作流程示意圖2.2.2整體功能模塊需求對(duì)于社區(qū)信息管理系統(tǒng)，要實(shí)現(xiàn)管理人員的登錄，居民人口的管理，對(duì)居民信息的增刪改查歸檔，樓棟管理，設(shè)備管理，車位管理，設(shè)置這幾大功能模塊。整體功能模塊架構(gòu)如圖2.2所示。圖2.2整體功能結(jié)構(gòu)圖①登錄模塊登錄功能是系統(tǒng)的重要功能之一。登錄可以讓系統(tǒng)知道用戶是誰(shuí)，從而精準(zhǔn)調(diào)取相應(yīng)的信息去展示給用戶。在登錄功能中管理人員使用賬號(hào)和密碼進(jìn)行登錄，登錄成功后進(jìn)入系統(tǒng)首頁(yè)。②首頁(yè)在系統(tǒng)首頁(yè)利用可視化技術(shù)展示社區(qū)相關(guān)的信息。③人口管理模塊人口管理模塊中包括了對(duì)居民信息的增刪改查。1）點(diǎn)擊新增或編輯，在新增/編輯頁(yè)面輸入居民的詳細(xì)信息后點(diǎn)擊保存會(huì)新增/修改一條居民信息。2）點(diǎn)擊詳情，跳轉(zhuǎn)進(jìn)入居民信息詳情頁(yè)面，在詳情頁(yè)面可以查看居民的詳細(xì)信息。3）點(diǎn)擊注銷，填寫(xiě)注銷理由會(huì)注銷當(dāng)前居民的信息，并存入歸檔信息中。4）在搜索框內(nèi)輸入姓名或者身份證號(hào)，點(diǎn)擊搜索按鈕，將搜索出來(lái)的數(shù)據(jù)信息展示在表格內(nèi)。6）點(diǎn)擊已歸檔，會(huì)跳轉(zhuǎn)到歸檔界面，其實(shí)現(xiàn)刪除，查看詳情功能。④樓棟管理模塊樓棟管理模塊包括為樓棟管理與樓棟管理員兩個(gè)部分。1）在樓棟管理頁(yè)面中，點(diǎn)擊新增，跳轉(zhuǎn)到新增/編輯頁(yè)面可以新增樓棟相關(guān)信息以及是否添加管理員。點(diǎn)擊編輯，跳轉(zhuǎn)到新/增編輯頁(yè)面修改當(dāng)條信息中的內(nèi)容。點(diǎn)擊刪除，會(huì)刪除當(dāng)條信息。2）在樓棟管理員頁(yè)面，點(diǎn)擊新增，會(huì)彈出信息框填寫(xiě)具體信息，點(diǎn)擊保存，會(huì)增加樓棟管理員且存入數(shù)據(jù)庫(kù)，彈窗消失，樓棟管理員信息顯示到界面上。點(diǎn)擊移除，會(huì)彈出提示框，點(diǎn)擊確定可以移除當(dāng)前樓棟管理員。點(diǎn)擊設(shè)置角色，可以修改當(dāng)前管理員角色同時(shí)頁(yè)能修改其它信息。⑤設(shè)備管理分為設(shè)備信息與報(bào)修信息。1）設(shè)備信息中展示的是公共設(shè)備信息，其中點(diǎn)擊每一條信息的詳情可以跳轉(zhuǎn)到詳情頁(yè)看見(jiàn)該設(shè)備的所有信息，還有維修記錄。點(diǎn)擊新增會(huì)跳轉(zhuǎn)到新增界面，填寫(xiě)設(shè)備相關(guān)信息后，點(diǎn)擊保存會(huì)往數(shù)據(jù)庫(kù)中增加該設(shè)備信息，點(diǎn)擊編輯可以修改當(dāng)前設(shè)備的信息。點(diǎn)擊刪除可以刪掉該設(shè)備信息，同時(shí)也會(huì)刪掉數(shù)據(jù)庫(kù)里面的信息。2）報(bào)修信息中展示的是居民的報(bào)修，表格內(nèi)會(huì)按更新時(shí)間的順序展示所有的報(bào)修記錄，點(diǎn)擊編輯可以修改狀態(tài)。同時(shí)可以通過(guò)自由組合篩選條件搜索需要的信息。⑥車位管理分為數(shù)據(jù)統(tǒng)計(jì)，車位管理和車庫(kù)管理。1）數(shù)據(jù)統(tǒng)計(jì)是通過(guò)可視化技術(shù)，對(duì)車位，車庫(kù)信息，年租與月租進(jìn)行統(tǒng)計(jì)分析。2）車位管理中從后端請(qǐng)求的數(shù)據(jù)展示了所有車位信息，擁有新增車位，編輯車位，刪除車位，搜索車位的功能。其中在新增與編輯時(shí)車庫(kù)名稱要從車庫(kù)表中已存在的車庫(kù)篩選，車位區(qū)域要在已篩選出的車庫(kù)名稱所擁有的區(qū)域內(nèi)選擇，車主要從已有的居民信息表中篩選，支持邊輸入邊篩選，同時(shí)將自動(dòng)填入該居民的手機(jī)號(hào)碼。2）車庫(kù)管理中從后端請(qǐng)求的數(shù)據(jù)展示了所有車庫(kù)信息，擁有新增車庫(kù)，編輯車庫(kù)，刪除車庫(kù)，搜索車庫(kù)的功能，對(duì)車庫(kù)的新增編輯刪除修都會(huì)對(duì)數(shù)據(jù)庫(kù)中的信息進(jìn)行操作。⑦設(shè)置超級(jí)管理員可以進(jìn)入設(shè)置界面，界面表格默認(rèn)展示了所有管理員的信息，實(shí)現(xiàn)管理員新增，刪除，手機(jī)號(hào)搜索功能。2.3產(chǎn)品原型設(shè)計(jì)根據(jù)任務(wù)要求，使用Axure軟件對(duì)每個(gè)功能模塊進(jìn)行了原型圖設(shè)計(jì)[8]，其主要目的是為了在整個(gè)系統(tǒng)完成過(guò)程中有更好的邏輯設(shè)計(jì)體系，后期編寫(xiě)代碼的過(guò)程中可以更好的每個(gè)模塊逐步完成。2.3.1登錄模塊原型圖登錄模塊原型圖如圖2.3所示。圖2.3登錄模塊原型圖2.3.2首頁(yè)原型圖首頁(yè)統(tǒng)計(jì)了住戶總數(shù)量，房屋總數(shù)量，樓棟總數(shù)量，近一周報(bào)修趨勢(shì)，常住居民與流動(dòng)居民統(tǒng)計(jì)對(duì)比，設(shè)備報(bào)修，報(bào)修率相關(guān)統(tǒng)計(jì)，流動(dòng)人口統(tǒng)計(jì)分析，遷入遷出統(tǒng)計(jì)對(duì)比分析。首頁(yè)數(shù)據(jù)可視化原型圖如圖2.4所示。圖2.4首頁(yè)原型圖2.3.3人口管理模塊原型圖人口管理原型圖包括對(duì)人口的增刪改查以及歸檔。人口管理主頁(yè)原型圖如圖2.5所示。圖2.5人口管理模塊原型圖居民新增原型圖如圖2.6-2.7所示。 圖2.6居民新增原型圖圖2.7居民新增原型圖居民編輯原型圖如圖2.8所示。圖2.8居民編輯原型圖居民詳情原型圖如圖2.9所示。圖2.9居民詳情原型圖注銷居民原型圖如圖2.10所示。圖2.10居民注銷原型圖歸檔人口原型圖如圖2.11所示。圖2.11歸檔人口原型圖刪除歸檔人口原型圖如圖2.12所示。圖2.12刪除歸檔人口原型圖歸檔人口詳情原型圖如圖2.13所示。圖2.13歸檔人口詳情原型圖2.3.4樓棟管理模塊原型圖樓棟管理原型圖如圖2.14所示。圖2.14樓棟管理原型圖新增樓棟原型圖如圖2.15所示。圖2.15新增樓棟原型圖編輯樓棟原型圖如圖2.16所示。圖2.16編輯樓棟原型圖刪除樓棟信息原型圖如圖2.17所示。圖2.17編輯樓棟信息原型圖樓棟管理員原型圖如圖2.18所示。圖2.18樓棟管理員原型圖新增樓棟管理員如圖2.19所示。圖2.19新增樓棟管理員原型圖編輯樓棟管理員如圖2.20所示。圖2.20編輯樓棟管理員原型圖移除樓棟管理員原型圖如圖2.21所示。圖2.21移除樓棟管理員原型圖2.3.5設(shè)備管理模塊原型圖設(shè)備信息原型圖如圖2.22所示。圖2.22設(shè)備信息原型圖新增設(shè)備信息原型圖如圖2.23所示。圖2.23新增設(shè)備信息原型圖編輯設(shè)備信息原型圖如圖2.24所示。圖2.24編輯設(shè)備信息原型圖設(shè)備詳情原型圖如圖2.25所示。圖2.25設(shè)備詳情原型圖報(bào)修信息原型圖如圖2.26所示。圖2.26報(bào)修信息原型圖新增報(bào)修信息原型圖如圖2.27所示。圖2.27新增報(bào)修信息原型圖編輯報(bào)修信息原型圖如圖2.28所示。圖2.28編輯報(bào)修信息原型圖2.3.6車位管理模塊原型圖車位管理原型圖如圖2.29所示。圖2.29車位管理原型圖新增車位信息原型圖如圖2.30所示。圖2.30新增車位信息原型圖編輯車位信息原型圖如圖2.31所示。圖2.31編輯車位信息原型圖車庫(kù)管理原型圖如圖2.32所示。圖2.32車庫(kù)管理原型圖新增車庫(kù)信息原型圖如圖2.33所示。圖2.33新增車庫(kù)信息原型圖數(shù)據(jù)統(tǒng)計(jì)原型圖如圖2.34所示。圖2.34數(shù)據(jù)統(tǒng)計(jì)原型圖2.3.7設(shè)置模塊原型圖設(shè)置模塊原型圖如圖2.35所示。圖2.35設(shè)置模塊原型圖新增管理員原型圖如圖2.36所示。圖2.36新增管理員原型圖2.4本章小結(jié)本章主要介紹了本次課題任務(wù)的需求概述、總體需求，并對(duì)同時(shí)對(duì)產(chǎn)品原型進(jìn)行了分塊設(shè)計(jì)，并對(duì)每個(gè)模塊做了詳細(xì)的原型圖設(shè)計(jì)方便界面的實(shí)現(xiàn)。

3系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)3.1系統(tǒng)的總體設(shè)計(jì)系統(tǒng)的總體設(shè)計(jì)包括系統(tǒng)的總體架構(gòu)，系統(tǒng)的首頁(yè)展示。3.1.1系統(tǒng)的總體架構(gòu)根據(jù)功能需求分析，本系統(tǒng)將采用Vue相關(guān)技術(shù)設(shè)計(jì)pc端界面，Nodejs相關(guān)技術(shù)設(shè)計(jì)后端接口，MongoDB數(shù)據(jù)庫(kù)存儲(chǔ)數(shù)據(jù)[10]，超級(jí)管理員或者管理員可以通過(guò)賬號(hào)和密碼進(jìn)入本系統(tǒng)，對(duì)居民信息，樓棟信息，設(shè)備信息，車位信息等進(jìn)行操作，同時(shí)給超級(jí)管理員和管理員設(shè)置了不同的權(quán)限，區(qū)分了可操作內(nèi)容。表現(xiàn)層，業(yè)務(wù)邏輯層，數(shù)據(jù)訪問(wèn)層，基礎(chǔ)服務(wù)是本課題的主要架構(gòu)體系，系統(tǒng)的架構(gòu)圖如圖3.1所示。圖3.1系統(tǒng)架構(gòu)圖3.1.2系統(tǒng)的首頁(yè)界面系統(tǒng)的首頁(yè)界面圖如圖3.2所示。圖3.2系統(tǒng)首頁(yè)圖3.2系統(tǒng)模塊設(shè)計(jì)①登錄模塊登錄功能是是判斷一個(gè)系統(tǒng)安全性的因素之一。本系統(tǒng)設(shè)置了兩類用戶，第一類是超級(jí)管理員，這一類用戶是早已設(shè)置好，可以直接使用賬號(hào)和密碼登錄進(jìn)入系統(tǒng)首頁(yè)；第二類是管理員，他們需要從超級(jí)管理員那里拿到賬號(hào)和密碼登錄進(jìn)入系統(tǒng)首頁(yè)。①首頁(yè)當(dāng)管理員或者超級(jí)管理員成功登錄系統(tǒng)之后，會(huì)進(jìn)入到系統(tǒng)的首頁(yè)。首頁(yè)對(duì)本社區(qū)的住戶總數(shù)量，房屋總數(shù)量，樓棟總數(shù)量，公共設(shè)備總數(shù)量的數(shù)據(jù)進(jìn)行了呈現(xiàn)，利用ECharts圖表可視化技術(shù)[11]，對(duì)近一周報(bào)修數(shù)量變化通過(guò)折線圖顯示，對(duì)社區(qū)常住人口與流動(dòng)人口通過(guò)餅狀圖進(jìn)行對(duì)比，對(duì)設(shè)備報(bào)修進(jìn)行數(shù)據(jù)統(tǒng)計(jì)分析，對(duì)流動(dòng)人統(tǒng)計(jì)分析，對(duì)遷入遷出人口統(tǒng)計(jì)。其首頁(yè)部分關(guān)鍵代碼如下所示。//報(bào)修總數(shù)，已處理，待處理，處理中，處理率

repairCount(){

get('/api/repair/getRepairInfoList').then((res)=>{

//報(bào)修總數(shù)

this.repairTotal=res.data.length

//待處理

constwaitHandle=res.data.filter((p)=>{

returnp.handleStatus==='待處理'

})

this.waitHandle=waitHandle.length

//處理中

constinHandle=res.data.filter((p)=>{

returnp.handleStatus==='處理中'

})

this.inHandle=inHandle.length

//已處理

consthasHandle=res.data.filter((p)=>{

returnp.handleStatus==='已處理'

})

this.hasHandle=hasHandle.length

this.handleRate=

(

(this.inHandle+this.hasHandle)/

this.repairTotal

).toFixed(4)*100

})

},

//住戶總數(shù),房屋總數(shù)，樓棟總數(shù)，設(shè)備總數(shù)

firstTotal(){

//住戶總數(shù)

get('/api/resident/getResidentList').then((res)=>{

this.populationTotal=res.data.length

})

//房屋總數(shù)

//樓棟總數(shù)

get('/api/build/getBuildList').then((res)=>{

this.buildingTotal=res.data.length

letcount=0

for(leti=0;i<res.data.length;i++){

count+=res.data[i].houseTotal

}

this.houseTotal=count

})

//設(shè)備總數(shù)

get('/api/equipment/getEquipmentInfoList').then((res)=>{

this.equipmentTotal=res.data.length

})

},//獲取近七天日期

getStandardDateBeforeWeek(){

letdates=[]

//獲取當(dāng)前日期

letnow=newDate()

//循環(huán)獲取最近7天的日期

for(leti=0;i<7;i++){

//獲取當(dāng)前日期的時(shí)間戳

lettimestamp=now.getTime()

//計(jì)算i天前的時(shí)間戳

letdayTimestamp=24*60*60*1000//一天的毫秒數(shù)

letiDayAgoTimestamp=timestamp-i*dayTimestamp

//轉(zhuǎn)換為日期對(duì)象

letdate=newDate(iDayAgoTimestamp)

//格式化日期為"yyyy-MM-dd"的字符串并存入數(shù)組

letmonth=('0'+(date.getMonth()+1)).slice(-2)

letday=('0'+date.getDate()).slice(-2)

dates.unshift(month+'-'+day)

}

this.dates=dates

},③人口管理人口管理指的是對(duì)居民信息進(jìn)行管理，提供增刪改查的一系列操作。1）新增居民信息，點(diǎn)擊新增后會(huì)進(jìn)入新增居民信息界面，填寫(xiě)居民的詳細(xì)信息后，進(jìn)行保存，會(huì)在數(shù)據(jù)庫(kù)中新增本居民信息。對(duì)于新增居民信息的基本流程如圖3.3所示。圖3.3新增居民信息流程圖2）編輯居民信息，點(diǎn)擊編輯后會(huì)進(jìn)入新增/編輯信息界面，修改居民所需修改的信息后，進(jìn)行保存，會(huì)在數(shù)據(jù)庫(kù)中修改本居民信息。對(duì)于修改居民信息的基本流程如圖3.4所示。前端實(shí)現(xiàn)新增與編輯頁(yè)復(fù)用關(guān)鍵代碼如下所示。//編輯時(shí)初始化數(shù)據(jù)residentInit(){

//判斷是否路徑上攜帶參數(shù)，攜帶則說(shuō)明是要編輯數(shù)據(jù)

console.log(this.$route.query)

if(this.$route.query?._id){

const{_id}=this.$route.query

post('/api/resident/getInfo',{_id}).then((data)=>{

if(data.error===0){

this.ruleForm=data.data

this.filterAttribute(this.ruleForm,this.ruleForm1)

this.filterAttribute(this.ruleForm,this.ruleForm2)

}else{

console.log('請(qǐng)求出錯(cuò)了')

}

})

}

},//提交新增或者修改的信息submit(){

this.ruleForm={...this.ruleForm1,...this.ruleForm2}

constdata=this.ruleForm//修改信息

if(this.$route.query._id){

constid=this.$route.query._id

patch('/api/resident/updateResident',{

id,

data

}).then((result)=>{

if(result.error===0){

this.$notify({

title:'成功',

message:'修改信息成功',

type:'success'

})//成功1s后自動(dòng)跳轉(zhuǎn)

setTimeout(()=>{

this.$router.go(-1)

},1000)

}else{

this.$notify.error({

title:'錯(cuò)誤',

message:'修改信息失敗'

})

}

})

}else{

//新增信息時(shí)

post('/api/resident/addResident',data).then((result)=>{

if(result.error===0){

this.$notify({

title:'成功',

message:'新增居民信息成功',

type:'success'

})//成功1s后自動(dòng)跳轉(zhuǎn)

setTimeout(()=>{

this.$router.go(-1)

},1000)

}else{

this.$notify.error({

title:'錯(cuò)誤',

message:'新增居民信息失敗'

})

}

})

}圖3.4修改居民信息流程圖3）注銷該居民信息，點(diǎn)擊注銷，會(huì)觸發(fā)彈窗，在彈窗內(nèi)點(diǎn)擊確定會(huì)刪除該居民信息，點(diǎn)擊取消彈窗消失，未刪除該居民信息。對(duì)于刪除居民信息的基本流程如圖3.5所示。圖3.5注銷居民信息流程圖4）點(diǎn)擊詳情，跳轉(zhuǎn)進(jìn)入詳情界面，展示該居民的基本信息與家庭成員。5）在搜索框內(nèi)輸入姓名或者身份證號(hào)，點(diǎn)擊搜索按鈕，將搜索出來(lái)的數(shù)據(jù)信息展示在表格內(nèi)。搜索空內(nèi)容則會(huì)展示所有居民信息。對(duì)于搜索的基本流程如圖3.6所示。圖3.6搜索流程圖6）點(diǎn)擊已歸檔，會(huì)跳轉(zhuǎn)到歸檔頁(yè)面，里面存放著從居民信息中被注銷的信息，可能是由于居民遷出，或者死亡而被存入歸檔。在歸檔頁(yè)面，同時(shí)也擁有查看詳情，徹底刪除信息，根據(jù)身份證號(hào)或者姓名搜索的功能。④樓棟管理樓棟管理模塊包括為樓棟管理與樓棟管理員兩個(gè)部分。1）在樓棟管理頁(yè)面中，點(diǎn)擊新增，跳轉(zhuǎn)到新增/編輯頁(yè)面可以新增樓棟相關(guān)信息以及是否添加管理員，之后點(diǎn)擊保存會(huì)往數(shù)據(jù)庫(kù)中增加該樓棟信息。對(duì)于新增樓棟信息的基本流程如圖3.7所示。圖3.7新增樓棟信息流程圖2）在樓棟管理頁(yè)面中，點(diǎn)擊編輯，會(huì)跳轉(zhuǎn)到新增/編輯頁(yè)面修改當(dāng)條信息中的內(nèi)容，之后點(diǎn)擊保存會(huì)修改數(shù)據(jù)庫(kù)中該條信息。對(duì)于編輯樓棟信息的基本流程如圖3.8所示。新增與編輯時(shí)生成房間號(hào)的關(guān)鍵代碼如下所示。//判斷是哪種類型的房棟

handleDecide(data){

consthouses=[]

if(data.houseType==='兩梯四戶'||data.houseType==='四梯四戶'){//根據(jù)戶型自動(dòng)生成房間號(hào)

for(leti=1;i<=data.floor;i++){

for(letj=1;j<=4;j++){

lethouse=`${i}0${j}`

houses.push(house)

}

}

}elseif(data.houseType==='兩梯六戶'||data.houseType==='四梯六戶'){//根據(jù)戶型自動(dòng)生成房間號(hào)

for(leti=1;i<=data.floor;i++){

for(letj=1;j<=6;j++){

lethouse=`${i}0${j}`

houses.push(house)

}

}

}

constbuilding=data.building

constcontent={building,houses}//發(fā)送請(qǐng)求增加樓棟房間號(hào)

post('/api/build/addHouse',content).then(res=>{

if(res.error===0){

console.log('成功');

console.log(res.data);

}

})

},//得到el-options選中值

hanleChange(val){

console.log(val)

constfilManager=this.managers.filter((p)=>{

returnp._id===val

})

this.ruleForm.telephone=filManager[0].telephone

this.ruleF=filManager[0].name

}圖3.8新增樓棟信息流程圖3）在樓棟管理頁(yè)面中，點(diǎn)擊刪除，會(huì)彈出提示框，點(diǎn)擊確定會(huì)刪除當(dāng)條信息，并從界面上移除。對(duì)于刪除樓棟信息的基本流程如圖3.9所示。圖3.9刪除樓棟信息流程圖4）在樓棟管理員頁(yè)面，點(diǎn)擊新增，會(huì)彈出信息框填寫(xiě)具體信息，點(diǎn)擊保存，會(huì)增加樓棟管理員且存入數(shù)據(jù)庫(kù)，彈窗消失，樓棟管理員信息顯示到界面上。點(diǎn)擊移除，會(huì)彈出提示框，點(diǎn)擊確定可以移除當(dāng)前樓棟管理員。點(diǎn)擊設(shè)置角色，可以修改當(dāng)前管理員角色同時(shí)頁(yè)能修改其它信息。⑤設(shè)備管理分為設(shè)備信息與報(bào)修信息，設(shè)備信息中展示的是公共設(shè)備信息，報(bào)修信息中展示的是居民的報(bào)修。在設(shè)備信息界面，點(diǎn)擊新增會(huì)跳轉(zhuǎn)到新增界面，填寫(xiě)設(shè)備相關(guān)信息，其中所在區(qū)域是根據(jù)樓棟信息選擇的，點(diǎn)擊保存會(huì)往數(shù)據(jù)庫(kù)中增加該設(shè)備信息。對(duì)于新增設(shè)備信息的基本流程如圖3.10所示。圖3.10新增設(shè)備信息流程圖2）在設(shè)備信息界面，點(diǎn)擊編輯會(huì)跳轉(zhuǎn)到編輯界面，修改設(shè)備相關(guān)信息后，點(diǎn)擊保存會(huì)修改數(shù)據(jù)庫(kù)中的該設(shè)備信息。其流程如圖3.11所示。圖3.11編輯設(shè)備信息流程圖3）在設(shè)備信息界面，點(diǎn)擊刪除，會(huì)彈出提示框，點(diǎn)擊確定會(huì)刪除當(dāng)條信息，并從界面上移除，刪掉數(shù)據(jù)庫(kù)里面的信息。其流程如圖3.12所示。圖3.12刪除設(shè)備信息流程圖4）在設(shè)備信息界面，點(diǎn)擊詳情可以跳轉(zhuǎn)到詳情頁(yè)看見(jiàn)該設(shè)備的所有信息還有維修記錄，還有維修記錄。點(diǎn)擊刪除可以刪掉該設(shè)備信息，同時(shí)也會(huì)刪掉數(shù)據(jù)庫(kù)里面的信息。5）報(bào)修信息界面中展示的是居民的報(bào)修，通過(guò)居民打電話告知管理員需要報(bào)修設(shè)備的信息，管理員會(huì)對(duì)報(bào)修信息進(jìn)行新增，通知或聯(lián)系維修人員進(jìn)行維修，并跟蹤處理狀態(tài)點(diǎn)擊編輯可以修改狀態(tài)。對(duì)于新增報(bào)修信息的基本流程如圖3.13所示。 圖3.13新增報(bào)修信息流程圖6）在報(bào)修信息界面點(diǎn)擊編輯，信息會(huì)自動(dòng)被填入對(duì)應(yīng)地方，修改信息點(diǎn)擊保存，信息存入數(shù)據(jù)庫(kù)，并展示在界面上。其流程如圖3.14所示。新增與編輯實(shí)現(xiàn)邏輯關(guān)鍵代碼如下所示。//點(diǎn)擊編輯

handleEdit(index,row){//出現(xiàn)遮罩

this.showMask=true

console.log(index,row)

const_id=row._id

//得到當(dāng)條維修信息

post('/api/repair/getRepairInfo',{_id}).then((data)=>{

if(data.error===0){

this.filterAttribute(data.data,this.repairForm)

erForm=data.data

}else{

console.log('請(qǐng)求出錯(cuò)了')

}

})

},//點(diǎn)擊新增

addRepair(){//初始化值為空

this.repairF=''

this.repairForm.telephone=''

this.repairForm.repairType=''

this.repairForm.address=''

this.repairForm.equipName=''

this.repairForm.equipNumber=''

this.repairForm.description=''

this.repairForm.repairTime=''

this.repairForm.handleStatus=''

this.showMask=true

},//保存asynchanlerConfirm(showMask){

//編輯報(bào)修

//使用了一個(gè)中間變量

this.showMask=showMask

const_id=erForm?._id

if(_id){

constdata={...this.repairForm}

awaitpatch('/api/repair/updateRepairInfo',{_id,data}).then(

(result)=>{

if(result.error===0){

this.$notify({

title:'成功',

message:'修改信息成功',

type:'success'

})

this.reload()

}else{

this.$notify.error({

title:'錯(cuò)誤',

message:'修改信息失敗'

})

}

}

)

}else{

//新增報(bào)修信息

constdata=this.repairForm

//console.log(data);

awaitpost('/api/repair/addRepair',data).then((result)=>{

if(result.error===0){

this.$notify({

title:'成功',

message:'新增報(bào)修信息成功',

type:'success'

})

this.reload()

}else{

this.$notify.error({

title:'錯(cuò)誤',

message:'新增報(bào)修信息失敗'

})

}

})

}

},圖3.14修改報(bào)修信息流程圖7）在報(bào)修界面的搜索功能，由3塊組成，分別可以通過(guò)時(shí)間段篩選，處理狀態(tài)篩選，設(shè)備名稱篩選，同時(shí)也可以任意組合這幾個(gè)條件來(lái)進(jìn)行篩選，空白時(shí)搜索就是全部的報(bào)修信息。對(duì)于搜索報(bào)修信息的基本流程如圖3.15所示。搜索邏輯實(shí)現(xiàn)的關(guān)鍵代碼如下所示。//前端實(shí)現(xiàn)邏輯handlerSearch(){

letstartTime

letendTime

if(!this.value2){

startTime=''

endTime=''

}else{

startTime=this.value2[0]

endTime=this.value2[1]

}

constquery={

startTime,

endTime,

handleStatus:this.handleStatus,

equipName:this.input

}

console.log('參數(shù)：',query)

post('api/repair/getRepIListByKeywords',query).then((res)=>{

console.log('res:',res)

this.filtableData=res.data

})

},//后端實(shí)現(xiàn)邏輯/**

*根據(jù)篩選條件查詢報(bào)修信息

*/asyncfunctiongetRepIListByKeywords(

startTime,

endTime,

handleStatus,

equipName){letquery

//三個(gè)條件都沒(méi)有

if(!startTime&&!endTime&&!handleStatus&&!equipName){

query={}

}elseif(!startTime&&!endTime){

query={

$and:[

{

handleStatus:handleStatus

},

{

equipName:{$regex:equipName}

}

]

}}elseif(!handleStatus){

//任意兩個(gè)都有

query={

$and:[

{

repairTime:{$gte:startTime,$lte:endTime}

},

{

equipName:{$regex:equipName}

}

]

}}elseif(!equipName){//任意兩個(gè)都有

query={

$and:[

{

repairTime:{$gte:startTime,$lte:endTime}

},

{

handleStatus:handleStatus

}

]

}}else{//三個(gè)都有

query={

$and:[

{

repairTime:{$gte:startTime,$lte:endTime}

},

{

handleStatus:handleStatus

},

{

equipName:{$regex:equipName}

}

]

}

}

//查詢單條報(bào)修信息

constres=awaitRepair.find(query)

returnres}圖3.15搜索報(bào)修信息流程圖⑥車位管理車位管理模塊內(nèi)分為數(shù)據(jù)統(tǒng)計(jì)，車位管理與車庫(kù)管理。1）數(shù)據(jù)統(tǒng)計(jì)是通過(guò)可視化技術(shù)，對(duì)車庫(kù)信息，車位信息，年租與月租進(jìn)行統(tǒng)計(jì)分析。2）在車位管理頁(yè)面展示了所有車位信息，點(diǎn)擊新增會(huì)彈出一個(gè)輸入面板，在面板內(nèi)輸入信息需要根據(jù)順序輸入，因?yàn)檐囄粎^(qū)域是根據(jù)選擇了的車庫(kù)進(jìn)行選擇的，它們之間存在著先后聯(lián)動(dòng)關(guān)系，手機(jī)號(hào)碼會(huì)根據(jù)選擇的業(yè)主自動(dòng)填入。對(duì)于新增車位信息的基本流程如圖3.16所示。圖3.16新增車位信息流程圖2）在車位管理頁(yè)面點(diǎn)擊編輯會(huì)彈出輸入面板，進(jìn)入編輯的輸入面板會(huì)自動(dòng)初始化該車位的信息在里面顯示，修改編輯頁(yè)的內(nèi)容也需要按照順序修改。對(duì)于編輯車位信息的基本流程如圖3.17所示。新增與編輯車位時(shí)得到車庫(kù)名稱與車主相關(guān)聯(lián)的內(nèi)容的關(guān)鍵代碼如下所示。

//獲取所有車庫(kù)信息

asyncgetGarageList(){

try{

awaitget('/api/garage/getGarageList').then((res)=>{

console.log(res)

if(res.error===0){

this.garages=res.data

}else{

console.log('出錯(cuò)了')

}

})

}catch(error){

console.log(error)

}

},//得到車庫(kù)el-options選中值

hanleChange1(val){

console.log(val)

constfilAddress=this.garages.filter((p)=>{

returnp.carport===val

})

this.filAddress=filAddress

},

//獲取焦點(diǎn)時(shí)觸發(fā)

handleFocus(){

get('/api/resident/getResidentList').then((res)=>{

if(res.error===0){

this.owners=res.data

}else{

console.log('獲取失敗')

}

})

},

//得到業(yè)主el-options選中值

hanleChange2(val){

console.log(val)

constfilOwners=this.owners.filter((p)=>{

returnp._id===val

})

this.ruleForm.owner=filOwners[0]?.name

this.ruleForm.telephone=filOwners[0]?.telephone

}}圖3.17編輯車位信息流程圖3）在車位管理頁(yè)面點(diǎn)擊刪除，會(huì)彈出提示框，點(diǎn)擊確定可以成功刪除該車位信息并從界面與數(shù)據(jù)庫(kù)移除掉。⑦設(shè)置1）設(shè)置界面設(shè)置了使用權(quán)限，只有超級(jí)管理員可以進(jìn)入設(shè)置界面，初始界面中表格展示了所有管理員的信息，點(diǎn)擊新增可以跳轉(zhuǎn)到新增界面新增管理員。對(duì)于新增管理員的基本流程如圖3.18所示。圖3.18新增管理員信息流程圖2）點(diǎn)擊刪除可以刪除本管理員，可以通過(guò)手機(jī)號(hào)篩選出你要查找的管理員。3.3數(shù)據(jù)庫(kù)設(shè)計(jì)本系統(tǒng)采用MongoDB數(shù)據(jù)庫(kù)，其MongoDB數(shù)據(jù)庫(kù)主要優(yōu)勢(shì)有：①文檔存儲(chǔ)數(shù)據(jù)存儲(chǔ)以BSON/JSON文檔[11]，整個(gè)項(xiàng)目的數(shù)據(jù)表示可采用統(tǒng)一的模型。所有這一切都無(wú)需任何前期架構(gòu)設(shè)計(jì)。②可擴(kuò)展性MongoDB被用在一些規(guī)模龐大的環(huán)境中，通過(guò)分片數(shù)據(jù)縮放處理理論上可實(shí)現(xiàn)更高的吞吐量。③支持動(dòng)態(tài)查詢MongoDB支持豐富的查詢表達(dá)式，可以實(shí)現(xiàn)復(fù)雜的數(shù)據(jù)查詢需求。④靈活性MongoDB使用靈活的文檔模型，不需要預(yù)先定義嚴(yán)格的數(shù)據(jù)結(jié)構(gòu)，這使得MongoDB非常適合處理半結(jié)構(gòu)化數(shù)據(jù)和非結(jié)構(gòu)化數(shù)據(jù)總的來(lái)說(shuō)，MongoDB數(shù)據(jù)庫(kù)具有靈活、易用、高性能等優(yōu)點(diǎn)，適用于各種需要處理大量數(shù)據(jù)的應(yīng)用程序。3.3.1關(guān)系圖通過(guò)前期的需求分析，確定表結(jié)構(gòu)、各個(gè)表的字段、設(shè)計(jì)表與表之間的關(guān)系，通過(guò)powerdesigner設(shè)計(jì)出對(duì)應(yīng)的數(shù)據(jù)庫(kù)模型[12]。社區(qū)信息管理系統(tǒng)關(guān)系圖如圖3.19所示。圖3.19社區(qū)信息管理系統(tǒng)關(guān)系圖3.3.2數(shù)據(jù)字典本系統(tǒng)共有11張表，user表是登錄用戶表，resident表是居民信息表，building表樓棟信息表，manager表是樓棟管理員信息表，equipment表是公共設(shè)備信息表，repair表是報(bào)修信息表，worker表是維修人員信息表，filerecord表歸檔人員信息表，parking表是車位信息表，garage表是車庫(kù)信息表，house表是房間信息表，表結(jié)構(gòu)如表3.1-3.11所示。表3.1user表列名數(shù)據(jù)類型字段類型長(zhǎng)度是否為空備注_idvarcharvarchar255否管理員idusernamevarcharvarchar11否用戶名passwordvarcharvarchar10否密碼namevarcharvarchar4否姓名imgUrlvarcharvarchar255否頭像timeoutintegerinteger2否過(guò)期時(shí)間表3.2resident表列名數(shù)據(jù)類型字段類型長(zhǎng)度是否為空備注_idvarcharvarchar255否居民信息idnamevarcharvarchar4否姓名sexvarcharvarchar1否性別agevarcharvarchar3否年齡nationvarcharvarchar6否民族birthdaydatedate否出生日期idCardvarcharvarchar18否身份證號(hào)marriagevarcharvarchar2否婚姻狀況personTypevarcharvarchar2否常住/流動(dòng)educationvarcharvarchar4否文化程度educationvarcharvarchar4否文化程度telephonevarcharvarchar11否手機(jī)號(hào)碼villagevarcharvarchar4否小區(qū)buildingvarcharvarchar10否所屬樓棟housevarcharvarchar5否房間號(hào)relationshipvarcharvarchar4否與戶主關(guān)系politicalvarcharvarchar2否政治面貌joinTimevarcharvarchar10是加入時(shí)間partyBranchvarcharvarchar255否所屬黨支部表3.3building表列名數(shù)據(jù)類型字段類型長(zhǎng)度是否為空備注_idvarcharvarchar255否樓棟信息idvillagevarcharvarchar4否小區(qū)floorintegerinteger2否樓層數(shù)buildingvarcharvarchar3否樓棟號(hào)houseTotalintegerinteger4否住房總數(shù)areavarcharvarchar255否建筑面積completiondatedate否建成日期namevarcharvarchar4否管理員姓名telephonevarcharvarchar11否手機(jī)號(hào)碼表3.4manager表列名數(shù)據(jù)類型字段類型長(zhǎng)度是否為空備注_idvarcharvarchar255否管理員idnamevarcharvarchar4否管理員姓名telephonevarcharvarchar11否手機(jī)號(hào)碼rolevarcharvarchar6否角色foundervarcharvarchar4否創(chuàng)建人imgUrlvarcharvarchar255否頭像表3.5equipment表列名數(shù)據(jù)類型字段類型長(zhǎng)度是否為空備注_idvarcharvarchar255否公共設(shè)備idequipNumbervarcharvarchar255否設(shè)備編號(hào)equipNamevarcharvarchar255否設(shè)備名稱brandvarcharvarchar255否設(shè)備品牌workervarcharvarchar4否維修人員addressvarcharvarchar255否地址statusvarcharvarchar2否正常/異常表3.6repair表列名數(shù)據(jù)類型字段類型長(zhǎng)度是否為空備注續(xù)表3.6_idvarcharvarchar255否報(bào)修信息idequipNumbervarcharvarchar255否設(shè)備編號(hào)equipNamevarcharvarchar255否設(shè)備名稱namevarcharvarchar4否報(bào)修人repairTypevarcharvarchar2否公共/私人addressvarcharvarchar255否地址descriptionvarcharvarchar255否故障描述handleStatusvarcharvarchar4否處理狀態(tài)telephonevarcharvarchar11否手機(jī)號(hào)碼repairTimedate否報(bào)修時(shí)間表3.7worker表列名數(shù)據(jù)類型字段類型長(zhǎng)度是否為空備注_idvarcharvarchar255否公共設(shè)備idworkervarcharvarchar4否維修人telephonevarcharvarchar11否手機(jī)號(hào)碼idCardvarcharvarchar18否身份證號(hào)表3.8filerecord表列名數(shù)據(jù)類型字段類型長(zhǎng)度是否為空備注_idvarcharvarchar255否注銷信息idnamevarcharvarchar4否姓名sexvarcharvarchar1否性別agevarcharvarchar3否年齡nationvarcharvarchar6否民族birthdaydatedate否出生日期idCardvarcharvarchar18否身份證號(hào)marriagevarcharvarchar2否婚姻狀況personTypevarcharvarchar2否常住/流動(dòng)educationvarcharvarchar4否文化程度telephonevarcharvarchar11否手機(jī)號(hào)碼villagevarcharvarchar4否小區(qū)buildingvarcharvarchar10否所屬樓棟續(xù)表3.8housevarcharvarchar5否房間號(hào)relationshipvarcharvarchar4否與戶主關(guān)系politicalvarcharvarchar2否政治面貌joinTimevarcharvarchar10是加入時(shí)間partyBranchvarcharvarchar255否所屬黨支部reasonvarcharvarchar255否注銷原因currentTimevarcharvarchar255否注銷時(shí)間表3.9parking表列名數(shù)據(jù)類型字段類型長(zhǎng)度是否為空備注_idvarcharvarchar255否車位信息idcarportvarcharvarchar10否車庫(kù)名稱addressvarcharvarchar10否車位地址parkNumbervarcharvarchar10否車位號(hào)areavarcharvarchar3否面積ownervarcharvarchar4否車主telephonevarcharvarchar11否手機(jī)號(hào)碼表3.10garage表列名數(shù)據(jù)類型字段類型長(zhǎng)度是否為空備注_idvarcharvarchar255否車庫(kù)信息idcarportvarcharvarchar10否車庫(kù)名稱addressvarcharvarchar10否車位地址notesvarcharvarchar255否備注表3.11house表列名數(shù)據(jù)類型字段類型長(zhǎng)度是否為空備注_idvarcharvarchar255否房間信息idbuildingvarcharvarchar10否樓棟名稱housesvarcharvarchar10否房間號(hào)3.4本章小結(jié)本章是系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)，主要由系統(tǒng)的總體設(shè)計(jì)，系統(tǒng)模塊設(shè)計(jì)，數(shù)據(jù)庫(kù)設(shè)計(jì)這幾部分組成。在系統(tǒng)的總體設(shè)計(jì)中闡述了技術(shù)的選型，總體架構(gòu)圖以及系統(tǒng)的首頁(yè)界面。在系統(tǒng)模塊設(shè)計(jì)中，主要由登錄，首頁(yè)，樓棟管理，設(shè)備管理，設(shè)置幾大模塊組成，并對(duì)其中功能進(jìn)行了詳細(xì)地介紹，繪制出操作流程圖。在數(shù)據(jù)庫(kù)設(shè)計(jì)中介紹了本系統(tǒng)采用MongoDB數(shù)據(jù)庫(kù)的優(yōu)勢(shì)[13]，關(guān)系圖以及數(shù)據(jù)字典。

4系統(tǒng)測(cè)試4.1測(cè)試目的本系統(tǒng)使用的是VSCode開(kāi)發(fā)工具，前端是基于Vue框架編寫(xiě)，后端采用的Nodejs+Koa2+MongoDB編寫(xiě)[14]，編譯環(huán)境是Windows系統(tǒng)。軟件測(cè)試的目的是確定當(dāng)前軟件可以在系統(tǒng)中正確運(yùn)行，符合功能需求[15]。本系統(tǒng)采用黑盒測(cè)試方法，對(duì)系統(tǒng)的功能模塊進(jìn)行測(cè)試。4.2測(cè)試用例設(shè)計(jì)下面將從登錄，首頁(yè)，人口管理，樓棟管理，設(shè)備管理，設(shè)置這幾個(gè)模塊出發(fā)，分別測(cè)試每個(gè)功能模塊正確實(shí)現(xiàn)其功能。4.2.1登錄本系統(tǒng)設(shè)置了兩類登錄用戶，第一類是超級(jí)管理員，第二類是管理員，他們只需要使用自己的賬號(hào)與密碼就能登錄進(jìn)入首頁(yè)，并提示登錄成功，否者會(huì)有失敗提示。如表4.1和圖4.1-4.2所示是登錄界面的用例測(cè)試及結(jié)果。表4.1登錄測(cè)試編號(hào)測(cè)試模塊測(cè)試用例預(yù)期結(jié)果實(shí)際結(jié)果1登錄功能賬號(hào)碼：admin提示登錄成功，跳轉(zhuǎn)到首頁(yè)登錄成功，跳轉(zhuǎn)到首頁(yè)2賬號(hào)碼：123登錄失敗，提示錯(cuò)誤登錄失敗，提示錯(cuò)誤圖4.1登錄測(cè)試1圖4.2登錄測(cè)試24.2.2首頁(yè)首頁(yè)實(shí)時(shí)展示了住戶總數(shù)，房屋總數(shù)，樓棟總數(shù)，設(shè)備總數(shù)，常住與流動(dòng)居民對(duì)比，設(shè)備報(bào)修總數(shù)，已處理報(bào)修數(shù)，待處理報(bào)修數(shù)，處理中報(bào)修數(shù)，以及報(bào)修處理率。如圖4.3所示是首頁(yè)界面的測(cè)試結(jié)果。圖4.3首頁(yè)測(cè)試4.2.3人口管理人口管理中需要實(shí)現(xiàn)對(duì)居民信息的新增，注銷，查看詳情，編輯，搜索，已歸檔的功能，其中編輯時(shí)會(huì)初始化數(shù)據(jù)，在已歸檔中要實(shí)現(xiàn)搜索，查看詳情，刪除的功能。如表4.2和如圖4.4-4.15所示是人口管理模塊的測(cè)試用例與測(cè)試結(jié)果。表4.2人口管理模塊測(cè)試編號(hào)測(cè)試模塊測(cè)試用例預(yù)期效果實(shí)際效果續(xù)表4.2編號(hào)測(cè)試模塊測(cè)試用例預(yù)期效果實(shí)際效果1新增信息點(diǎn)擊新增，填寫(xiě)居民信息，點(diǎn)擊保存提示成功，并展示在人口管理界面提示成功，并展示在人口管理界面2查看詳情點(diǎn)擊李四的查看詳情跳轉(zhuǎn)到詳情頁(yè)，并展示相關(guān)信息跳轉(zhuǎn)到詳情頁(yè)，并展示相關(guān)信息3編輯信息點(diǎn)擊編輯，修改相關(guān)信息后，點(diǎn)擊保存提示成功，并展示在人口管理界面提示成功，并展示在人口管理界面4人口管理界面搜索輸入身份證或者姓名，點(diǎn)擊搜索存在則會(huì)成功展示該居民成功展示該居民5注銷信息點(diǎn)擊注銷，填寫(xiě)理由成功注銷，并從人口管理界面移除成功注銷，并從界面移除6查看歸檔信息點(diǎn)擊已歸檔跳轉(zhuǎn)到歸檔界面，界面展示歸檔人員的信息跳轉(zhuǎn)到歸檔界面，展示歸檔人員的信息7歸檔界面詳情查看點(diǎn)擊查看詳情跳轉(zhuǎn)到詳情頁(yè)，成功展示信息跳轉(zhuǎn)到詳情頁(yè)，成功展示信息9歸檔界面刪除信息點(diǎn)擊刪除，根據(jù)提示點(diǎn)擊確定成功刪除，從歸檔界面移除成功刪除，從歸檔界面移除圖4.4新增居民信息測(cè)試圖4.5編輯居民信息測(cè)試圖4.6查看居民詳細(xì)信息測(cè)試圖4.7搜索居民信息測(cè)試1圖4.8搜索居民信息測(cè)試2圖4.9注銷居民信息測(cè)試1圖4.10注銷居民信息測(cè)試2圖4.11查看歸檔信息測(cè)試圖4.12查看歸檔詳情測(cè)試圖4.13歸檔界面搜索測(cè)試圖4.14歸檔界面刪除信息測(cè)試1圖4.15歸檔界面刪除信息測(cè)試24.2.4樓棟管理①樓棟管理樓棟管理實(shí)現(xiàn)新增，編輯和刪除功能，其中編輯時(shí)會(huì)初始化數(shù)據(jù)。如表4.3和圖4.16-4.18所示是樓棟管理的測(cè)試用例與測(cè)試結(jié)果。表4.4樓棟管理測(cè)試用例編號(hào)測(cè)試模塊測(cè)試用例預(yù)期效果實(shí)際效果1新增樓棟點(diǎn)擊新增，填寫(xiě)相關(guān)信息，點(diǎn)擊保存提示成功，并展示在樓棟管理界面提示成功，展示在樓棟管理界面2編輯信息點(diǎn)擊編輯，修改信息，點(diǎn)擊保存提示成功，并展示在樓棟管理界面提示成功，展示在樓棟管理界面圖4.16新增樓棟信息測(cè)試圖4.17編輯樓棟信息測(cè)試圖4.18刪除樓棟信息測(cè)試②樓棟管理員樓棟管理員實(shí)現(xiàn)新增，移除，設(shè)置角色，搜索功能，其中設(shè)置角色時(shí)會(huì)初始化數(shù)據(jù)。如表4.5和圖4.19-4.24所示是樓棟管理員的測(cè)試用例與測(cè)試結(jié)果。表4.5樓棟管理員測(cè)試用例編號(hào)測(cè)試模塊測(cè)試用例預(yù)期效果實(shí)際效果1新增樓棟管理員信息點(diǎn)擊新增，填寫(xiě)相關(guān)信息，點(diǎn)擊保存提示成功，并展示在樓棟管理界面提示成功，展示在樓棟管理界面2編輯樓棟管理員信息點(diǎn)擊編輯，修改信息，點(diǎn)擊保存提示成功，并展示在樓棟管理界面提示成功，展示在樓棟管理界面3搜索輸入手機(jī)號(hào)或者姓名存在則會(huì)成功展示該管理員信息成功展示3刪除信息點(diǎn)擊刪除，點(diǎn)擊彈窗確定提示成功，并從界面成功刪除提示成功，并從界面成功刪除圖4.19新增樓棟管理員信息測(cè)試1圖4.20新增樓棟管理員信息測(cè)試2圖4.21設(shè)置角色測(cè)試1圖4.22設(shè)置角色測(cè)試2圖4.23搜索樓棟管理員測(cè)試圖4.24刪除樓棟管理員測(cè)試4.2.5設(shè)備管理設(shè)備管理模塊分為設(shè)備信息與報(bào)修信息。①設(shè)備信息設(shè)備信息中展示了所有設(shè)備實(shí)現(xiàn)新增，編輯，刪除，查看詳情，搜索的功能，其中在編輯時(shí)會(huì)初始化數(shù)據(jù)，查看詳情里面可以看見(jiàn)公共設(shè)備的維修記錄。如表4.6和圖4.25-4.31所示是設(shè)備信息的測(cè)試用例與測(cè)試結(jié)果。表4.6設(shè)備信息測(cè)試用例編號(hào)測(cè)試模塊測(cè)試用例預(yù)期效果實(shí)際效果1新增設(shè)備點(diǎn)擊新增，填寫(xiě)相關(guān)信息，點(diǎn)擊保存提示成功，并展示在設(shè)備信息界面提示成功，展示在設(shè)備信息界面2編輯信息點(diǎn)擊編輯，修改相關(guān)信息后，點(diǎn)擊保存提示成功，并展示在設(shè)備信息界面提示成功，并展示在設(shè)備信息界面3查看詳情點(diǎn)擊查看詳情跳轉(zhuǎn)到詳情界面，并成功展示信息跳轉(zhuǎn)到詳情界面，并成功展示信息4搜索輸入設(shè)備名稱或者編號(hào)存在則會(huì)成功展示該管理員信息成功展示5刪除信息點(diǎn)擊刪除，點(diǎn)擊彈窗確定提示成功，并從界面成功刪除提示成功，并從界面成功刪除圖4.25新增設(shè)備信息測(cè)試1圖4.26新增設(shè)備信息測(cè)試2圖4.27編輯設(shè)備信息測(cè)試1圖4.28編輯設(shè)備信息測(cè)試2圖4.29搜索設(shè)備信息測(cè)試圖4.30查看設(shè)備詳情信息測(cè)試圖4.31刪除設(shè)備信息測(cè)試②報(bào)修信息報(bào)修信息中展示了所有報(bào)修，實(shí)現(xiàn)新增，編輯，搜索的功能，其中在編輯時(shí)會(huì)初始化數(shù)據(jù)，搜索可以自由組合條件。如表4.7和圖4.32-4.38所示是報(bào)修信息的測(cè)試用例與測(cè)試結(jié)果。表4.7報(bào)修信息測(cè)試用例編號(hào)測(cè)試模塊測(cè)試用例預(yù)期效果實(shí)際效果1新增報(bào)修點(diǎn)擊新增，填寫(xiě)相關(guān)信息，點(diǎn)擊保存提示成功，并展示在報(bào)修信息界面提示成功，展示在報(bào)修信息界面2編輯信息點(diǎn)擊編輯，修改信息，點(diǎn)擊保存提示成功，并展示在報(bào)修信息界面提示成功，展示在報(bào)修信息界面4搜索組合不同的搜索條件存在則會(huì)成功展示該管理員信息成功展示圖4.32報(bào)修信息界面測(cè)試圖4.33新增報(bào)修信息測(cè)試1圖4.34新增報(bào)修信息測(cè)試2圖4.35編輯報(bào)修信息測(cè)試1圖4.36編輯報(bào)修信息測(cè)試2圖4.37搜索功能測(cè)試1圖4.38搜索功能測(cè)試24.2.6車位管理車位管理模塊分為車位管理和車庫(kù)管理。①車位管理車位管理展示了所有車位信息，實(shí)現(xiàn)了新增，編輯，刪除，搜索的功能，新增車位時(shí)車庫(kù)名稱，車庫(kù)區(qū)域要按順序填寫(xiě)，因?yàn)樗鼈冎g有的聯(lián)系有先后順序，手機(jī)號(hào)碼會(huì)在選擇車主時(shí)自動(dòng)填入，編輯車位時(shí)會(huì)初始化數(shù)據(jù)。如表4.8和圖4.39-4.42所示是車位管理的測(cè)試用例與測(cè)試結(jié)果。表4.8車位管理測(cè)試用例編號(hào)測(cè)試模塊測(cè)試用例預(yù)期效果實(shí)際效果1新增車位信息點(diǎn)擊新增，順序填寫(xiě)相關(guān)信息，點(diǎn)擊保存提示成功，并展示在車位管理界面提示成功，并展示在車位管理界面2編輯車位信息點(diǎn)擊編輯，修改相關(guān)信息，點(diǎn)擊保存提示成功，并展示車位管理界面提示成功，并展示在車位管理界面3搜索輸入車位號(hào)或者車主姓名存在則會(huì)成功展示