城市攤位可視化管理系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)

梁興建，牟定雕

（四川輕化工大學(xué)計(jì)算機(jī)科學(xué)與工程學(xué)院，四川 宜賓 644005）

引言

由于疫情對(duì)地方經(jīng)濟(jì)的影響，各級(jí)政府一方面極力推行較寬松的擺攤政策，另一方面城市攤位管理過(guò)程復(fù)雜。隨著疫情逐漸褪去，地?cái)偨?jīng)濟(jì)雖得到充分發(fā)展但也暴露出諸多問(wèn)題，如：擺攤監(jiān)管具有復(fù)雜性，增加了城市管理的復(fù)雜度，存在食品安全、質(zhì)量問(wèn)題等安全隱患［1］。由于城市治理能力不足所導(dǎo)致“臟亂差”等問(wèn)題，需要耗費(fèi)大量的人力和物力去應(yīng)對(duì)，擺攤?cè)巳盒畔⒁矝](méi)有系統(tǒng)化的管理，衛(wèi)生、安全的情況沒(méi)有建立線上的誠(chéng)信機(jī)制，擺攤開展沒(méi)有細(xì)化設(shè)計(jì)，對(duì)于經(jīng)營(yíng)范圍、時(shí)間規(guī)定等都沒(méi)有形成規(guī)范化的細(xì)節(jié)管理［1］。這都嚴(yán)重阻礙著地?cái)偨?jīng)濟(jì)的發(fā)展。

目前城市擺攤大都為流動(dòng)攤販，具有較大空間、時(shí)間的隨意性與無(wú)序性［2］，仍然存在對(duì)于城市資源的利用效率低下，缺乏有效的擺攤規(guī)劃和街區(qū)布局［3］等問(wèn)題。為了方便城市攤位管理，部分文獻(xiàn)對(duì)擺攤過(guò)程的信息化管理，包含事前審批、事中監(jiān)管都提出了一定的解決方案［4-6］，但是仍然存在一些問(wèn)題需要解決。如文獻(xiàn)［4］主要針對(duì)攤位擺攤過(guò)程中的環(huán)境檢測(cè)與衛(wèi)生清潔進(jìn)行了相關(guān)研究，但對(duì)于攤位、街區(qū)規(guī)劃和管理相對(duì)較少，并且沒(méi)有提出為城管提供一個(gè)可視化的管理平臺(tái)，以提升管理的效率。文獻(xiàn)［5］對(duì)于攤位擺攤前的申報(bào)、審批，擺攤中的監(jiān)測(cè)和管理都有所涉及，但對(duì)于擺攤后沒(méi)有進(jìn)行一個(gè)數(shù)據(jù)收集和分析的過(guò)程，不能為決策者提供一個(gè)數(shù)據(jù)分析與可視化的平臺(tái)，并且僅采用線上舉報(bào)和巡查上報(bào)來(lái)整頓攤位違規(guī)，形式過(guò)于單一，缺乏有效的懲戒手段，沒(méi)有建立起一套完善的信譽(yù)獎(jiǎng)懲機(jī)制。文獻(xiàn)［6］對(duì)于農(nóng)貿(mào)市場(chǎng)內(nèi)攤位管理相關(guān)內(nèi)容較為完善，但地?cái)倲偽还芾砼c農(nóng)貿(mào)市場(chǎng)攤位管理還是存在很大差異，如地?cái)偟臄偽还芾碇袑?duì)于當(dāng)前時(shí)間擺攤情況和街區(qū)情況需要實(shí)時(shí)地進(jìn)行了解，但在農(nóng)貿(mào)市場(chǎng)管理系統(tǒng)中并不需要。因此，本文提出并設(shè)計(jì)一套城市攤位可視化管理系統(tǒng)，將每個(gè)攤位信息記錄在案，并劃定特色街區(qū)進(jìn)行管理，通過(guò)互聯(lián)網(wǎng)技術(shù)實(shí)現(xiàn)可視化管理與分析，促進(jìn)地?cái)偨?jīng)濟(jì)更加蓬勃發(fā)展，同時(shí)以特色街區(qū)來(lái)打造城市特色旅游［1］，讓地?cái)偝蔀槌鞘形幕?、?jīng)濟(jì)的不可或缺的一部分。

本城市攤位可視化管理系統(tǒng)作為一套互聯(lián)網(wǎng)軟件，結(jié)合當(dāng)?shù)爻枪艿谋O(jiān)管制度，對(duì)規(guī)范擺攤的一系列行為進(jìn)行精細(xì)化、可視化的管理。通過(guò)事前、事中、事后三個(gè)時(shí)間節(jié)點(diǎn)來(lái)進(jìn)行劃分［3］。事前對(duì)特色街區(qū)的劃定，攤位在線注冊(cè)申報(bào)以及審核，攤戶信譽(yù)及獎(jiǎng)懲機(jī)制的建立。事中主要是針對(duì)攤戶運(yùn)營(yíng)過(guò)程中的實(shí)時(shí)在線監(jiān)控、調(diào)度和可視化管理。事后是數(shù)據(jù)可視化報(bào)表呈現(xiàn)等方面形成一整套高效的攤位管理機(jī)制［1-3］。系統(tǒng)運(yùn)行效果表明該系統(tǒng)操作便捷，功能較齊全，運(yùn)行較穩(wěn)定，數(shù)據(jù)傳輸安全、可靠，系統(tǒng)具有較強(qiáng)的可擴(kuò)展、可維護(hù)和可移植等特性。

1 系統(tǒng)分析

1.1 系統(tǒng)總體結(jié)構(gòu)分析

系統(tǒng)以Web應(yīng)用的形式為用戶提供服務(wù)，主要由PC端的網(wǎng)站和手機(jī)端的微信小程序構(gòu)成。攤主和巡邏城管在手機(jī)上通過(guò)微信小程序?qū)ο到y(tǒng)進(jìn)行訪問(wèn)，管理人員在PC端通過(guò)網(wǎng)頁(yè)對(duì)信息進(jìn)行操作，用戶交互產(chǎn)生的數(shù)據(jù)經(jīng)過(guò)信息分類之后全部存入數(shù)據(jù)庫(kù)中，所有信息在管理平臺(tái)進(jìn)行統(tǒng)一管理，數(shù)據(jù)分析通過(guò)展示平臺(tái)進(jìn)行呈現(xiàn)。系統(tǒng)結(jié)構(gòu)如圖1所示。

圖1 系統(tǒng)結(jié)構(gòu)圖

1.2 系統(tǒng)子平臺(tái)功能分析

通過(guò)系統(tǒng)總體結(jié)構(gòu)分析，將系統(tǒng)分為數(shù)據(jù)采集平臺(tái)、信息管理平臺(tái)和可視化展示平臺(tái)3個(gè)子平臺(tái)。

（1）數(shù)據(jù)采集平臺(tái)

數(shù)據(jù)采集平臺(tái)通過(guò)手機(jī)端和PC端共同構(gòu)成。攤主和巡邏城管的信息采集在手機(jī)端完成，相關(guān)擺攤注冊(cè)申報(bào)、擺攤、收攤以及城管扣分的數(shù)據(jù)交互全部由微信小程序?qū)崿F(xiàn)，遠(yuǎn)程管理人員的信息提交由Web網(wǎng)站來(lái)進(jìn)行，信息提交后根據(jù)信息的不同，如：攤主、城管、街區(qū)等，將信息進(jìn)行分類并提交到數(shù)據(jù)庫(kù)進(jìn)行持久化存儲(chǔ)。

（2）信息管理平臺(tái)

本文提出采用集中式特色街區(qū)的管理模式，將攤位根據(jù)美食、生活、娛樂(lè)等類型的不同進(jìn)行特色街區(qū)的劃定，并對(duì)攤位進(jìn)行合理安排與分配。在攤位注冊(cè)審批中進(jìn)行擺攤的線上申報(bào)、審批，信息記錄查詢與修改，對(duì)于現(xiàn)實(shí)中無(wú)法使用手機(jī)的群體，可在后臺(tái)通過(guò)管理員操作實(shí)現(xiàn)信息記錄申報(bào)，實(shí)現(xiàn)所有擺攤?cè)藛T網(wǎng)上信息建檔。系統(tǒng)結(jié)合許可證式管理方式進(jìn)行管理，為申報(bào)注冊(cè)通過(guò)的攤主生成準(zhǔn)許擺攤二維碼，并將其作為經(jīng)營(yíng)資格的證明［7］，通過(guò)在線申報(bào)將所有擺攤?cè)藛T的登記從工商管理轉(zhuǎn)換為線上管理登記形式［8］，用更加方便的二維碼代替工商執(zhí)照，保證申報(bào)信息可靠的同時(shí)，降低了攤主申報(bào)難度和復(fù)雜度，既正視了擺攤的合法性又降低了擺攤的管理成本，并且信息的網(wǎng)絡(luò)化管理不會(huì)受到時(shí)間地域限制，登入系統(tǒng)即可實(shí)現(xiàn)即時(shí)查詢與管理［9］。

系統(tǒng)對(duì)所有攤位進(jìn)行信譽(yù)積分管理，對(duì)于攤位存在違規(guī)或不文明擺攤的現(xiàn)象給予相應(yīng)扣分，并做處罰，實(shí)行淘汰制度，對(duì)長(zhǎng)期違規(guī)人員納入行業(yè)黑名單［2］。對(duì)于長(zhǎng)期表現(xiàn)優(yōu)異的攤位進(jìn)行一定的獎(jiǎng)勵(lì)措施，促進(jìn)攤位的和諧發(fā)展。

系統(tǒng)同時(shí)對(duì)政府或者管理公司具有人員管理權(quán)限的用戶開放攤管人員管理頁(yè)面，督促攤管人員的言行符合規(guī)范，保證攤主們能得到公平公正的對(duì)待。

（3）可視化展示平臺(tái)

可視化展示平臺(tái)主要分為街區(qū)數(shù)據(jù)實(shí)時(shí)展示和數(shù)據(jù)可視化展示兩個(gè)方面。

街區(qū)數(shù)據(jù)實(shí)時(shí)展示總體拓?fù)浣Y(jié)構(gòu)采用感知層、網(wǎng)絡(luò)層與應(yīng)用層3層［10］。首先，攤主、管理人員手機(jī)等移動(dòng)終端和街區(qū)攝像頭等作為獲取信息的感知層模塊；其次，感知到的數(shù)據(jù)，如相關(guān)擺攤地址、街區(qū)情況等信息通過(guò)4G/5G、WiFi或通信網(wǎng)絡(luò)即時(shí)上傳；最后，采用在線地圖和監(jiān)控視頻的方式對(duì)當(dāng)前時(shí)間的可擺攤街區(qū)和當(dāng)前攤位分布情況進(jìn)行展示。用戶能夠通過(guò)地圖上的點(diǎn)和區(qū)域?qū)崟r(shí)了解當(dāng)前城市擺攤現(xiàn)狀，如攤位入駐率、街區(qū)攤位類型等情況，管理人員可通過(guò)地圖了解當(dāng)前擺攤分布，進(jìn)一步通過(guò)街道監(jiān)控視頻，查看擺攤的實(shí)時(shí)狀況，并且實(shí)時(shí)監(jiān)測(cè)的同時(shí)對(duì)各個(gè)街區(qū)擺攤?cè)藬?shù)、違規(guī)情況等進(jìn)行實(shí)時(shí)的數(shù)據(jù)收集和分析。

數(shù)據(jù)可視化展示是通過(guò)一段時(shí)間的信息采集工作后，系統(tǒng)根據(jù)數(shù)據(jù)分析利用圖表等形式對(duì)攤主年齡、學(xué)歷，街區(qū)入駐率、擺攤類型及數(shù)目等進(jìn)行可視化展示，可供管理人員在線參考，做出管理決策。

2 系統(tǒng)設(shè)計(jì)

2.1 系統(tǒng)架構(gòu)設(shè)計(jì)

系統(tǒng)基于模型－視圖－控制器（Model-View-Controller，MVC）模式進(jìn)行架構(gòu)設(shè)計(jì)，以PC網(wǎng)頁(yè)瀏覽器或手機(jī)微信作為客戶端，用戶通過(guò)網(wǎng)頁(yè)或者小程序即可獲取系統(tǒng)提供的服務(wù)，無(wú)需再安裝應(yīng)用軟件，網(wǎng)絡(luò)架構(gòu)更加靈活、高效［11］。在傳統(tǒng)的MVC模式下系統(tǒng)采用了前后端分離的開發(fā)技術(shù)，前端開發(fā)更關(guān)注視圖的呈現(xiàn)與用戶交互，后端更關(guān)注數(shù)據(jù)與邏輯［12］。前端使用Vue.js框架和小程序框架為主的開發(fā)技術(shù)，后端采用SSM框架相關(guān)技術(shù)，前后端分離解決了前后端耦合度高、后期系統(tǒng)維護(hù)難點(diǎn)大、系統(tǒng)可拓展性弱等問(wèn)題，使得系統(tǒng)具有較高的可擴(kuò)展性和可維護(hù)性［13］，系統(tǒng)架構(gòu)圖如圖2所示。

圖2 系統(tǒng)架構(gòu)圖

（1）表現(xiàn)層

頁(yè)面構(gòu)建采用Vue.js框架和小程序框架，它們都是采用的MVVM架構(gòu)模式，通過(guò)數(shù)據(jù)的雙向綁定機(jī)制來(lái)連接應(yīng)用的視圖層與數(shù)據(jù)模型層［14］。在前端頁(yè)面中，HTML、WXML負(fù)責(zé)頁(yè)面的元素構(gòu)成，CSS、WXSS構(gòu)建頁(yè)面樣式。采用雙向數(shù)據(jù)綁定的方式簡(jiǎn)化繁瑣的DOM操作，極大地提升了開發(fā)效率，同時(shí)可直接引入大量組件，實(shí)現(xiàn)組件化開發(fā)，完成一系列的頁(yè)面開發(fā)工作，并利用Vuex解決不同組件之間數(shù)據(jù)傳遞問(wèn)題［15］。

頁(yè)面中引入高德地圖組件實(shí)現(xiàn)攤位、街區(qū)分布的地圖展示，以異步組件的形式引入功能模塊，按需加載，減少服務(wù)器資源請(qǐng)求次數(shù)。

在Web應(yīng)用中存在大量數(shù)據(jù)的處理和渲染，傳統(tǒng)處理方式中存在處理效率不高，最后的可視化結(jié)果難以理解的現(xiàn)象［16］。系統(tǒng)采用ECharts框架來(lái)進(jìn)行可視化操作，ECharts基于Canvas API進(jìn)行圖像繪制，提供了常規(guī)圖、地理數(shù)據(jù)可視化圖等，并且支持高度個(gè)性化地定制可視化圖表［17］。最后呈現(xiàn)的效果形象直觀，能夠提供清晰明了的數(shù)圖表，為管理人員決策提供參考依據(jù)。

（2）控制層

控制層是前端頁(yè)面與后端邏輯相關(guān)聯(lián)的橋梁。利用Spring MVC框架的控制器將前端路由和后端的業(yè)務(wù)邏輯相映射，前端的所有請(qǐng)求都通過(guò)前端控制器進(jìn)行接收和反饋?lái)憫?yīng)。同時(shí)，前后端信息交互全部采用異步Https請(qǐng)求來(lái)實(shí)現(xiàn)，能夠減少不必要的頁(yè)面數(shù)據(jù)請(qǐng)求，使得響應(yīng)速度更快，給予用戶更好地使用體驗(yàn)；并且通信加密，更加安全可靠。

（3）業(yè)務(wù)層

業(yè)務(wù)層是系統(tǒng)核心功能的實(shí)現(xiàn)。Spring中提供的面向切面編程（Aspect Oriented Programming，AOP）技術(shù)能夠完成面向切面的編程開發(fā)［18］，在系統(tǒng)中設(shè)置攔截器對(duì)用戶進(jìn)行身份校驗(yàn)，對(duì)除登錄以外一切的接口請(qǐng)求全部采用token方式進(jìn)行身份和權(quán)限驗(yàn)證。另外，在業(yè)務(wù)處理中，對(duì)于具有多個(gè)數(shù)據(jù)訪問(wèn)的操作，在完成一個(gè)功能時(shí)采用Spring的事務(wù)處理機(jī)制，在進(jìn)行業(yè)務(wù)邏輯處理出現(xiàn)異常時(shí)進(jìn)行回滾，保證數(shù)據(jù)庫(kù)中數(shù)據(jù)的一致性。事務(wù)的處理機(jī)制同樣采用AOP技術(shù)，利用代理的設(shè)計(jì)模式，減少了大量的業(yè)務(wù)代碼，極大地提升了開發(fā)效率［19］。同時(shí)系統(tǒng)運(yùn)用Spring框架中Sheduled完成系統(tǒng)的定時(shí)任務(wù)功能，在每日夜間所有擺攤工作結(jié)束后，利用服務(wù)器空閑時(shí)間對(duì)數(shù)據(jù)進(jìn)行采集與分析，在不影響平時(shí)運(yùn)行的情況下，提升了系統(tǒng)的使用效率。

（4）數(shù)據(jù)持久層

采用MyBatis框架作為系統(tǒng)數(shù)據(jù)持久層。通過(guò)Spring框架聯(lián)合MyBatis框架以注解類的形式建立Java Bean和數(shù)據(jù)庫(kù)記錄的映射［18］。通過(guò)MyBatis框架的預(yù)編譯功能，將傳入數(shù)據(jù)當(dāng)做字符參數(shù)處理，防止結(jié)構(gòu)化查詢語(yǔ)言（Structured Query Language，SQL）注入，保證數(shù)據(jù)庫(kù)安全。

2.2 數(shù)據(jù)庫(kù)設(shè)計(jì)與創(chuàng)建

本系統(tǒng)首先經(jīng)過(guò)詳細(xì)的市場(chǎng)調(diào)研，確立符合市場(chǎng)需求的數(shù)據(jù)信息。之后以攤主信息為核心構(gòu)建數(shù)據(jù)庫(kù)概念和邏輯結(jié)構(gòu)，同時(shí)在數(shù)據(jù)庫(kù)中加入視圖、索引、存儲(chǔ)過(guò)程，最后檢查數(shù)據(jù)庫(kù)的完整性和安全措施，使得數(shù)據(jù)庫(kù)達(dá)到一個(gè)良好的設(shè)計(jì)狀態(tài)，提升系統(tǒng)中數(shù)據(jù)的存儲(chǔ)和查詢效率，保證數(shù)據(jù)安全性和一致性，有利于軟件系統(tǒng)的擴(kuò)展和維護(hù)［20］。數(shù)據(jù)庫(kù)設(shè)計(jì)的部分E-R圖如圖3所示。

圖3 E-R圖

3 系統(tǒng)實(shí)現(xiàn)

3.1 系統(tǒng)總體實(shí)現(xiàn)

系統(tǒng)包含攤主注冊(cè)審批、攤位信息管理、城管信息管理、攤位信譽(yù)管理、特色街區(qū)管理與展示、街區(qū)監(jiān)控、數(shù)據(jù)可視化展示與數(shù)據(jù)分析、攤位地圖展示等8個(gè)模塊，系統(tǒng)總體流程如圖4所示。

圖4 系統(tǒng)流程圖

3.2 系統(tǒng)功能模塊實(shí)現(xiàn)

（1）攤主注冊(cè)審批。在攤主擺攤之前需要在線上進(jìn)行申報(bào)并提交相關(guān)信息，管理員通過(guò)系統(tǒng)進(jìn)行審核攤主擺攤信息，管理人員對(duì)其相關(guān)資質(zhì)進(jìn)行審核，審核無(wú)誤即可通過(guò)。對(duì)擺攤?cè)藛T經(jīng)過(guò)篩選和審查，以保證每位擺攤者符合資格［1］。

（2）攤位信息管理。攤主信息審核通過(guò)后，即可擺攤。同時(shí)攤主和攤位信息存入數(shù)據(jù)庫(kù)，通過(guò)可視化的表格進(jìn)行管理，可查看當(dāng)前攤位擺攤狀況，累計(jì)擺攤時(shí)間等信息，將攤主信息都納入系統(tǒng)的管理。

（3）城管信息管理。系統(tǒng)通過(guò)Spring MVC攔截器對(duì)進(jìn)入系統(tǒng)后用戶權(quán)限進(jìn)行判斷，對(duì)于無(wú)相關(guān)權(quán)限用戶不提供該服務(wù)，并且在前端頁(yè)面展示中也不添加此頁(yè)面路由。系統(tǒng)將城管也納入系統(tǒng)的管理之中，對(duì)于城管管理的言行舉止納入系統(tǒng)管理，將系統(tǒng)中城管的管理情況納入績(jī)效考核中，敦促城管認(rèn)真執(zhí)法，同時(shí)能夠有效減少城管暴力執(zhí)法情況的發(fā)生，讓擺攤者這類弱勢(shì)群體的利益也能得到保障。

（4）攤位信譽(yù)管理。對(duì)每位擺攤者進(jìn)行數(shù)字化誠(chéng)信建檔，將其衛(wèi)生、安全等納入誠(chéng)信考核。對(duì)于長(zhǎng)期違規(guī)的攤位，將其納入黑名單進(jìn)行處理和懲罰，保障攤位管理有序，攤主規(guī)范意識(shí)得到提升，并進(jìn)行獎(jiǎng)懲。通過(guò)系統(tǒng)攤位信譽(yù)管理，可了解各個(gè)街區(qū)擺攤管理情況、違規(guī)數(shù)目等，以幫助管理者更好地管理街區(qū)擺攤情況。

（5）特色街區(qū)管理與展示。管理人員通過(guò)攤位類型與擺攤特色對(duì)街區(qū)進(jìn)行創(chuàng)建與規(guī)劃，將具有相關(guān)特色的攤位集中在一起，從而建立具有地方特色的擺攤街區(qū)。在系統(tǒng)中可通過(guò)地圖的形式對(duì)特色街區(qū)進(jìn)行查看、規(guī)劃城市擺攤街區(qū)的分布，并對(duì)特色街區(qū)進(jìn)行可視化的管理與展示。

（6）街區(qū)監(jiān)控。系統(tǒng)通過(guò)OpenCV與Socket搭建監(jiān)控視頻系統(tǒng)。OpenCV是一個(gè)跨平臺(tái)計(jì)算機(jī)視覺(jué)和機(jī)器學(xué)習(xí)軟件庫(kù)，通過(guò)其提供的接口能極大節(jié)約圖像視頻等開發(fā)時(shí)間［21］。借助OpenCV獲取攝像頭中實(shí)時(shí)的監(jiān)控視頻，通過(guò)Socket通信機(jī)制將實(shí)時(shí)視頻傳入遠(yuǎn)程服務(wù)器，并使用OSS進(jìn)行對(duì)象存儲(chǔ)，保證媒體資源的海量云存儲(chǔ)的安全、可靠以及低成本，實(shí)現(xiàn)街區(qū)監(jiān)控的實(shí)時(shí)查看與備份。幫助管理者能夠及時(shí)了解當(dāng)前一些街區(qū)的擺攤真實(shí)情況，并且能夠通過(guò)攝像頭語(yǔ)音功能及時(shí)對(duì)擺攤?cè)藛T進(jìn)行一定的遠(yuǎn)程指揮、調(diào)整，對(duì)于一些小的違規(guī)行為進(jìn)行通知整改，無(wú)需親自到場(chǎng)，從而提升治理效率，降低管理成本。

（7）數(shù)據(jù)分析與可視化展示。在系統(tǒng)中通過(guò)Sheduled設(shè)置定時(shí)任務(wù)自動(dòng)在夜間對(duì)于當(dāng)日數(shù)據(jù)進(jìn)行匯總和分析。利用ECharts組件庫(kù)中豐富的可視化圖表對(duì)數(shù)據(jù)進(jìn)行渲染并在瀏覽器中進(jìn)行展示，管理者可通過(guò)實(shí)時(shí)而直觀的數(shù)據(jù)展示了解擺攤現(xiàn)狀，不用再進(jìn)行繁瑣的數(shù)據(jù)采集和整理工作，能為決策者提供高效、可靠的數(shù)據(jù)支撐，有效提升城市攤位治理的效率。

（8）攤位地圖展示。通過(guò)在系統(tǒng)中引入高德地圖組件來(lái)向用戶展示附近擺攤街區(qū)的擺攤情況、攤位分布、攤位類型等信息，對(duì)于地圖中點(diǎn)、矢量圖形的生成、繪制、去除等一系列功能都采用異步組件的形式進(jìn)行加載，降低了系統(tǒng)負(fù)載，使得系統(tǒng)運(yùn)行更加流暢。管理者能通過(guò)地圖上攤位分布情況進(jìn)行合理的人員安排，對(duì)于密度過(guò)大的攤位進(jìn)行及時(shí)地疏通。普通用戶也能通過(guò)地圖了解附近攤位情況進(jìn)行購(gòu)物或娛樂(lè)。地圖展示功能流程如圖5所示。

圖5 地圖展示流程圖

3.3 系統(tǒng)關(guān)鍵問(wèn)題分析及實(shí)現(xiàn)

3.3.1 數(shù)據(jù)可視化呈現(xiàn)

（1）數(shù)據(jù)呈現(xiàn)對(duì)象分析

數(shù)據(jù)分析及可視化的關(guān)鍵在于可視化的內(nèi)容。對(duì)于攤位管理系統(tǒng)而言，其重點(diǎn)管理對(duì)象為攤主和街區(qū)，在此范圍內(nèi)對(duì)于其所包含的內(nèi)容進(jìn)行選取，選取其中具有較高參考意義，能夠反映當(dāng)前城市攤位情況以及未來(lái)發(fā)展趨勢(shì)的部分?jǐn)?shù)據(jù)，例如：攤位入駐率，通過(guò)對(duì)數(shù)據(jù)每15分鐘進(jìn)行一次處理，將目前街區(qū)攤位入駐率情況用ECharts折線圖的形式呈現(xiàn)出來(lái)，直觀的表示出街區(qū)擺攤擁擠程度、人數(shù)等信息的變化。攤主、街區(qū)相關(guān)數(shù)據(jù)分析部分內(nèi)容如表1所示。

表1 數(shù)據(jù)分析內(nèi)容表

（2）組件化呈現(xiàn)的實(shí)現(xiàn)思路

基于組件化的思想，首先將每個(gè)不同數(shù)據(jù)分析的圖表進(jìn)行組件化處理，讓每個(gè)component（單個(gè)組件）對(duì)應(yīng)一個(gè)或一組相同類型的數(shù)據(jù)分析圖表，并在其中單獨(dú)處理一個(gè)圖表的數(shù)據(jù)請(qǐng)求、處理、渲染等，然后導(dǎo)入已經(jīng)創(chuàng)建好的組件，最后在頁(yè)面中注冊(cè)使用所有已導(dǎo)入的component從而構(gòu)建整個(gè)頁(yè)面，這樣每個(gè)component互不影響單獨(dú)為一個(gè)獨(dú)立個(gè)體，在構(gòu)建整個(gè)頁(yè)面時(shí)只需要關(guān)注組件的使用與布局而不用在意其內(nèi)部實(shí)現(xiàn)細(xì)節(jié)。以年齡分析為例，基于Vue.js框架的組件化呈現(xiàn)的實(shí)現(xiàn)思路如下：

step 1:定義年齡分析組件AgeChart。首先在組件中導(dǎo)入ECharts相關(guān)依賴，根據(jù)Vue.js的生命周期性質(zhì)，在mounted鉤子函數(shù)中通過(guò)調(diào)用Axios中的數(shù)據(jù)請(qǐng)求函數(shù)獲取相關(guān)年齡分析數(shù)據(jù)；然后編寫數(shù)據(jù)處理函數(shù)對(duì)年齡分析數(shù)據(jù)進(jìn)行格式處理；之后將處理好的數(shù)據(jù)保存到預(yù)定義好的對(duì)象中；最后通過(guò)插值綁定的形式將對(duì)象中的內(nèi)容傳遞到HTML中。

step 2:在需要組件的頁(yè)面中導(dǎo)入組件，即從組件路徑（'./components/'）中導(dǎo)入step 1中定義的年齡分析組件AgeChart。導(dǎo)入格式為：

import AgeChart from'./components/Age';

step 3:頁(yè)面中注冊(cè)需要使用的組件，通過(guò)Vue.js框架在組件目錄components對(duì)象中對(duì)年齡分析組件AgeChart進(jìn)行注冊(cè)。

step 4：在HTML中使用step 3中注冊(cè)組件進(jìn)行數(shù)據(jù)呈現(xiàn)，使用格式為：

其中age-chart為組件名，由注冊(cè)的年齡分析組件AgeChart自動(dòng)轉(zhuǎn)換生成。

3.3.2 攤位信譽(yù)管理方式

經(jīng)過(guò)實(shí)地考察和調(diào)研，本系統(tǒng)將信譽(yù)扣分相關(guān)的類型劃分為衛(wèi)生、安全、規(guī)范3類，每種類型又根據(jù)違規(guī)程度的不同劃分為不同等級(jí)，相關(guān)部分扣分標(biāo)準(zhǔn)如表2所示。評(píng)價(jià)標(biāo)準(zhǔn)以分?jǐn)?shù)段的形式呈現(xiàn)，城管根據(jù)違規(guī)情況的嚴(yán)重程度進(jìn)行扣分處理。

城管在巡邏時(shí)若發(fā)現(xiàn)攤位存在表2中所描述的一些違規(guī)行為，可在小程序中根據(jù)相應(yīng)的扣分標(biāo)準(zhǔn)進(jìn)行扣分。首先通過(guò)掃描攤主二維碼或者搜索攤主信息確認(rèn)攤主身份，再給予扣分，同時(shí)進(jìn)行警告并勒令其及時(shí)整改。對(duì)于多次累犯的攤主，當(dāng)信譽(yù)積分低于相應(yīng)擺攤要求時(shí)予以暫時(shí)停業(yè)整頓等處罰。

表2 扣分標(biāo)準(zhǔn)表

在攤位信譽(yù)管理平臺(tái)中，對(duì)于95分~100分?jǐn)傊髟u(píng)為優(yōu)秀，85分~94分評(píng)為良好，對(duì)于低于85分的攤主，將暫時(shí)取消其擺攤資格，需通過(guò)城管相關(guān)約談，整改合格后方能再次進(jìn)行擺攤行為。

對(duì)于相關(guān)已扣分?jǐn)傊魅羰窃谶^(guò)去一個(gè)月內(nèi)未在發(fā)生相關(guān)違規(guī)行為，系統(tǒng)即可自動(dòng)為其增加3分信譽(yù)分。系統(tǒng)提供此類基礎(chǔ)信譽(yù)分標(biāo)準(zhǔn)，同時(shí)支持相關(guān)不同地區(qū)添加更適于自身的管理標(biāo)準(zhǔn)，保證系統(tǒng)更適合當(dāng)?shù)毓芾怼?/p>

3.3.3 特色街區(qū)管理及呈現(xiàn)

（1）特色街區(qū)模型建立

通過(guò)前期調(diào)查發(fā)現(xiàn)，城市街區(qū)分布復(fù)雜交錯(cuò)，并且大多攤位大小不一，難以通過(guò)地圖劃定街區(qū)即可自動(dòng)生成合理的攤位數(shù)目等信息。于是系統(tǒng)采用建立街區(qū)模型的方式來(lái)創(chuàng)建街區(qū)，在系統(tǒng)設(shè)計(jì)時(shí)確立特色街區(qū)模型的相關(guān)數(shù)據(jù)信息，創(chuàng)建街區(qū)時(shí)管理人員只需將信息填入便可創(chuàng)建街區(qū)，生成最為適合的擺攤街區(qū)，特色街區(qū)模型如圖6所示。

圖6 特色街區(qū)模型圖

（2）街區(qū)位置及攤位信息可視化呈現(xiàn)

在地圖上以點(diǎn)和圖的形式將攤位和街區(qū)位置展現(xiàn)出來(lái)。攤主在小程序點(diǎn)擊擺攤便發(fā)送相關(guān)地理位置信息，若擺攤成功便在地圖上進(jìn)行展示，針對(duì)不同軟件默認(rèn)坐標(biāo)系不同，本系統(tǒng)內(nèi)所有坐標(biāo)系統(tǒng)一采用GCJ02標(biāo)準(zhǔn)。

微信小程序中獲取擺攤的高精度位置信息是通過(guò)微信提供的應(yīng)用程序編程（API）接口實(shí)現(xiàn)的。用戶在打開定位和授權(quán)的情況下獲取相關(guān)位置信息，微信小程序獲取高精位置的實(shí)現(xiàn)思路如下：

step 1:調(diào)用接口獲取攤位置信息。通過(guò)調(diào)用微信小程序API的wx.getLocation（）函數(shù)進(jìn)行高精度位置獲取，設(shè)定坐標(biāo)系標(biāo)準(zhǔn)為'gcj02'，修改isHighAccuracy參數(shù)開啟高精度。為了降低誤差，通過(guò)設(shè)定highAccuracy ExpireTime參數(shù)，將獲取定位的超時(shí)時(shí)間設(shè)定為5000 ms。

step 2:位置信息本地保存。通過(guò)step 1獲取到擺攤高精度位置的經(jīng)緯度屬性，存放到預(yù)定義的latitude、longitude變量中，在用戶端進(jìn)行保存。

step 3:位置信息傳遞。通過(guò)調(diào)用wx.request（）函數(shù)將用戶端的經(jīng)緯度數(shù)據(jù)，以參數(shù)的形式傳遞到數(shù)據(jù)庫(kù)服務(wù)器持久化存儲(chǔ)。

街區(qū)、攤位地圖呈現(xiàn)時(shí)首先通過(guò)數(shù)據(jù)請(qǐng)求獲取地圖可視范圍內(nèi)的所有攤位和街區(qū)數(shù)據(jù)，然后將數(shù)據(jù)預(yù)處理為滿足地圖所需的數(shù)據(jù)格式，最后以添加圖層的方式在地圖上展示所有數(shù)據(jù)信息。街區(qū)及攤位信息地圖呈現(xiàn)的實(shí)現(xiàn)思路如下：

step 1:根據(jù)顯示范圍和縮放程度獲取攤位數(shù)據(jù)，通過(guò)調(diào)用Axios中的請(qǐng)求函數(shù)，將顯示范圍bounds和縮放程度zoom以參數(shù)的形式傳遞到服務(wù)器，服務(wù)器處理后以數(shù)組的形式返回?cái)偽粩?shù)據(jù)。

step 2:根據(jù)顯示范圍獲取街區(qū)數(shù)據(jù)，通過(guò)調(diào)用Axios中的請(qǐng)求函數(shù)，將顯示范圍bounds以參數(shù)的形式傳遞到服務(wù)器，服務(wù)器處理后以數(shù)組的形式返回街區(qū)數(shù)據(jù)。

step 3:將獲取到的街區(qū)數(shù)據(jù)和攤位數(shù)據(jù)數(shù)組，以循環(huán)的形式進(jìn)行遍歷。對(duì)于攤位而言，根據(jù)攤位對(duì)象的信息，調(diào)用高德地圖的marker（）函數(shù)產(chǎn)生點(diǎn)標(biāo)記對(duì)象，街區(qū)對(duì)象需先進(jìn)行圖形繪制類型判斷，然后根據(jù)類型的確定調(diào)用高德地圖的polygon（）、circle（）或rectangle（）函數(shù)，從而生成矢量圖形對(duì)象。

step 4:調(diào)用高德地圖提供的add（）函數(shù)，在地圖中批量添加step 3中處理好的點(diǎn)標(biāo)記對(duì)象數(shù)組和矢量圖形數(shù)組，產(chǎn)生呈現(xiàn)效果。

3.4 系統(tǒng)測(cè)試及運(yùn)行效果

3.4.1 系統(tǒng)測(cè)試

（1）測(cè)試環(huán)境

測(cè)試環(huán)境主要針對(duì)軟件應(yīng)用服務(wù)器、數(shù)據(jù)庫(kù)服務(wù)器、客戶端PC 3個(gè)方面，主要硬軟件環(huán)境包含CPU、內(nèi)存、硬盤、操作系統(tǒng)、中間件、數(shù)據(jù)庫(kù)系統(tǒng)等方面，對(duì)應(yīng)的參數(shù)見(jiàn)表3。

表3 測(cè)試環(huán)境表

（2）性能測(cè)試

在系統(tǒng)運(yùn)行中響應(yīng)時(shí)間和吞吐量是衡量系統(tǒng)性能和用戶體驗(yàn)的重要指標(biāo)。限于網(wǎng)絡(luò)對(duì)于測(cè)試具有較大影響，測(cè)試過(guò)程中采用校園網(wǎng)來(lái)進(jìn)行測(cè)試工作，測(cè)試所用工具為Apache-JMeter-5.2.1，Apache JMeter通過(guò)多線程手段來(lái)模擬多用戶情況下的操作，并且基于JMeter支持Java腳本的特點(diǎn)，針對(duì)異步接口進(jìn)行一整套測(cè)試方案設(shè)計(jì)［22］，最終測(cè)試數(shù)據(jù)經(jīng)過(guò)整理得到結(jié)果如圖7所示。

從圖7看出，系統(tǒng)吞吐量快速增加并逐漸趨于平緩，訪問(wèn)量為600次/s時(shí)達(dá)到峰值，響應(yīng)時(shí)間也開始增加。測(cè)試結(jié)果表明，系統(tǒng)并發(fā)服務(wù)量為600次/s時(shí)，能夠滿足用戶的使用需求。

圖7 性能測(cè)試結(jié)果圖

3.4.2 系統(tǒng)運(yùn)行效果

通過(guò)本文提出的系統(tǒng)實(shí)現(xiàn)方案可以大大降低管理成本和管理難度，并且有效提升管理質(zhì)量。主要表現(xiàn)在：攤主登入微信小程序能夠在線申報(bào)、擺攤，巡邏城管可通過(guò)小程序進(jìn)行扣分懲戒等，攤主微信小程序一鍵擺攤和產(chǎn)生的許可二維碼如圖8（a）與圖8（b）所示，城管微信小程序扣分界面圖8（c）所示。攤主申報(bào)攤位后由管理員審核通過(guò)，管理員在PC端登錄后可以隨時(shí)查看并管理攤主信息，運(yùn)行界面如圖8（d）與圖8（e）所示。

圖8 攤主與城管界面

管理人員登入系統(tǒng)后可進(jìn)入可視化展示平臺(tái)。在街區(qū)數(shù)據(jù)實(shí)時(shí)展示方面，系統(tǒng)實(shí)時(shí)獲取街區(qū)及攤位分布情況、攤主擺攤收攤情況，用顏色區(qū)分不同的攤位類型，運(yùn)行界面如圖9（a）與圖9（b）所示。在數(shù)據(jù)可視化分析方面，系統(tǒng)通過(guò)數(shù)據(jù)收集提供一定數(shù)據(jù)分析服務(wù)，比如街區(qū)攤位入駐率、人流量、攤主信息等，分析一鍵生成可視化報(bào)表，降低了對(duì)于數(shù)據(jù)管理的難度，并且更加清晰直觀地為管理人員對(duì)城市攤位規(guī)劃提供詳細(xì)、準(zhǔn)確的數(shù)據(jù)分析結(jié)果，為管理人員對(duì)攤位管理的未來(lái)規(guī)劃提供強(qiáng)大的數(shù)據(jù)支撐。數(shù)據(jù)可視化分析中對(duì)攤主和街區(qū)的分析界面如圖9（c）與圖9（d）所示。

圖9 系統(tǒng)運(yùn)行效果

4 結(jié)束語(yǔ)

通過(guò)城市攤位的市場(chǎng)調(diào)研與數(shù)據(jù)分析，結(jié)合當(dāng)前城市攤位管理方法，設(shè)計(jì)與實(shí)現(xiàn)了一套城市攤位可視化管理系統(tǒng)，該系統(tǒng)能夠有效解決城市攤位管理分散、難度大、效率低、管理不精細(xì)、不全面等問(wèn)題。系統(tǒng)利用手機(jī)、街區(qū)攝像頭等獲取實(shí)時(shí)信息，通過(guò)地圖、數(shù)據(jù)分析等手段為管理人員提供一種可視化的、便捷的管理方式。城市攤位管理人員通過(guò)本系統(tǒng)便可直觀地了解到當(dāng)前街區(qū)情況，在減少管理時(shí)間和人力成本的同時(shí)將管理變得更加精細(xì)、便捷，提升城市攤位管理水平。通過(guò)“互聯(lián)網(wǎng)+”攤位管理的方式促進(jìn)城市攤位管理制度的進(jìn)一步完善，幫助“后疫情時(shí)代”地?cái)偨?jīng)濟(jì)的長(zhǎng)久發(fā)展，并且系統(tǒng)成本相對(duì)低廉，具有簡(jiǎn)單易維護(hù)的特點(diǎn)，適合政府或者公司大規(guī)模使用。