城市攤位可視化管理系統的設計與實現

梁興建，牟定雕

（四川輕化工大學計算機科學與工程學院，四川 宜賓 644005）

引言

由于疫情對地方經濟的影響，各級政府一方面極力推行較寬松的擺攤政策，另一方面城市攤位管理過程復雜。隨著疫情逐漸褪去，地攤經濟雖得到充分發展但也暴露出諸多問題，如：擺攤監管具有復雜性，增加了城市管理的復雜度，存在食品安全、質量問題等安全隱患［1］。由于城市治理能力不足所導致“臟亂差”等問題，需要耗費大量的人力和物力去應對，擺攤人群信息也沒有系統化的管理，衛生、安全的情況沒有建立線上的誠信機制，擺攤開展沒有細化設計，對于經營范圍、時間規定等都沒有形成規范化的細節管理［1］。這都嚴重阻礙著地攤經濟的發展。

目前城市擺攤大都為流動攤販，具有較大空間、時間的隨意性與無序性［2］，仍然存在對于城市資源的利用效率低下，缺乏有效的擺攤規劃和街區布局［3］等問題。為了方便城市攤位管理，部分文獻對擺攤過程的信息化管理，包含事前審批、事中監管都提出了一定的解決方案［4-6］，但是仍然存在一些問題需要解決。如文獻［4］主要針對攤位擺攤過程中的環境檢測與衛生清潔進行了相關研究，但對于攤位、街區規劃和管理相對較少，并且沒有提出為城管提供一個可視化的管理平臺，以提升管理的效率。文獻［5］對于攤位擺攤前的申報、審批，擺攤中的監測和管理都有所涉及，但對于擺攤后沒有進行一個數據收集和分析的過程，不能為決策者提供一個數據分析與可視化的平臺，并且僅采用線上舉報和巡查上報來整頓攤位違規，形式過于單一，缺乏有效的懲戒手段，沒有建立起一套完善的信譽獎懲機制。文獻［6］對于農貿市場內攤位管理相關內容較為完善，但地攤攤位管理與農貿市場攤位管理還是存在很大差異，如地攤的攤位管理中對于當前時間擺攤情況和街區情況需要實時地進行了解，但在農貿市場管理系統中并不需要。因此，本文提出并設計一套城市攤位可視化管理系統，將每個攤位信息記錄在案，并劃定特色街區進行管理，通過互聯網技術實現可視化管理與分析，促進地攤經濟更加蓬勃發展，同時以特色街區來打造城市特色旅游［1］，讓地攤成為城市文化、經濟的不可或缺的一部分。

本城市攤位可視化管理系統作為一套互聯網軟件，結合當地城管的監管制度，對規范擺攤的一系列行為進行精細化、可視化的管理。通過事前、事中、事后三個時間節點來進行劃分［3］。事前對特色街區的劃定，攤位在線注冊申報以及審核，攤戶信譽及獎懲機制的建立。事中主要是針對攤戶運營過程中的實時在線監控、調度和可視化管理。事后是數據可視化報表呈現等方面形成一整套高效的攤位管理機制［1-3］。系統運行效果表明該系統操作便捷，功能較齊全，運行較穩定，數據傳輸安全、可靠，系統具有較強的可擴展、可維護和可移植等特性。

1 系統分析

1.1 系統總體結構分析

系統以Web應用的形式為用戶提供服務，主要由PC端的網站和手機端的微信小程序構成。攤主和巡邏城管在手機上通過微信小程序對系統進行訪問，管理人員在PC端通過網頁對信息進行操作，用戶交互產生的數據經過信息分類之后全部存入數據庫中，所有信息在管理平臺進行統一管理，數據分析通過展示平臺進行呈現。系統結構如圖1所示。

圖1 系統結構圖

1.2 系統子平臺功能分析

通過系統總體結構分析，將系統分為數據采集平臺、信息管理平臺和可視化展示平臺3個子平臺。

（1）數據采集平臺

數據采集平臺通過手機端和PC端共同構成。攤主和巡邏城管的信息采集在手機端完成，相關擺攤注冊申報、擺攤、收攤以及城管扣分的數據交互全部由微信小程序實現，遠程管理人員的信息提交由Web網站來進行，信息提交后根據信息的不同，如：攤主、城管、街區等，將信息進行分類并提交到數據庫進行持久化存儲。

（2）信息管理平臺

本文提出采用集中式特色街區的管理模式，將攤位根據美食、生活、娛樂等類型的不同進行特色街區的劃定，并對攤位進行合理安排與分配。在攤位注冊審批中進行擺攤的線上申報、審批，信息記錄查詢與修改，對于現實中無法使用手機的群體，可在后臺通過管理員操作實現信息記錄申報，實現所有擺攤人員網上信息建檔。系統結合許可證式管理方式進行管理，為申報注冊通過的攤主生成準許擺攤二維碼，并將其作為經營資格的證明［7］，通過在線申報將所有擺攤人員的登記從工商管理轉換為線上管理登記形式［8］，用更加方便的二維碼代替工商執照，保證申報信息可靠的同時，降低了攤主申報難度和復雜度，既正視了擺攤的合法性又降低了擺攤的管理成本，并且信息的網絡化管理不會受到時間地域限制，登入系統即可實現即時查詢與管理［9］。

系統對所有攤位進行信譽積分管理，對于攤位存在違規或不文明擺攤的現象給予相應扣分，并做處罰，實行淘汰制度，對長期違規人員納入行業黑名單［2］。對于長期表現優異的攤位進行一定的獎勵措施，促進攤位的和諧發展。

系統同時對政府或者管理公司具有人員管理權限的用戶開放攤管人員管理頁面，督促攤管人員的言行符合規范，保證攤主們能得到公平公正的對待。

（3）可視化展示平臺

可視化展示平臺主要分為街區數據實時展示和數據可視化展示兩個方面。

街區數據實時展示總體拓撲結構采用感知層、網絡層與應用層3層［10］。首先，攤主、管理人員手機等移動終端和街區攝像頭等作為獲取信息的感知層模塊；其次，感知到的數據，如相關擺攤地址、街區情況等信息通過4G/5G、WiFi或通信網絡即時上傳；最后，采用在線地圖和監控視頻的方式對當前時間的可擺攤街區和當前攤位分布情況進行展示。用戶能夠通過地圖上的點和區域實時了解當前城市擺攤現狀，如攤位入駐率、街區攤位類型等情況，管理人員可通過地圖了解當前擺攤分布，進一步通過街道監控視頻，查看擺攤的實時狀況，并且實時監測的同時對各個街區擺攤人數、違規情況等進行實時的數據收集和分析。

數據可視化展示是通過一段時間的信息采集工作后，系統根據數據分析利用圖表等形式對攤主年齡、學歷，街區入駐率、擺攤類型及數目等進行可視化展示，可供管理人員在線參考，做出管理決策。

2 系統設計

2.1 系統架構設計

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

圖2 系統架構圖

（1）表現層

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

頁面中引入高德地圖組件實現攤位、街區分布的地圖展示，以異步組件的形式引入功能模塊，按需加載，減少服務器資源請求次數。

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

（2）控制層

控制層是前端頁面與后端邏輯相關聯的橋梁。利用Spring MVC框架的控制器將前端路由和后端的業務邏輯相映射，前端的所有請求都通過前端控制器進行接收和反饋響應。同時，前后端信息交互全部采用異步Https請求來實現，能夠減少不必要的頁面數據請求，使得響應速度更快，給予用戶更好地使用體驗；并且通信加密，更加安全可靠。

（3）業務層

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

（4）數據持久層

采用MyBatis框架作為系統數據持久層。通過Spring框架聯合MyBatis框架以注解類的形式建立Java Bean和數據庫記錄的映射［18］。通過MyBatis框架的預編譯功能，將傳入數據當做字符參數處理，防止結構化查詢語言（Structured Query Language，SQL）注入，保證數據庫安全。

2.2 數據庫設計與創建

本系統首先經過詳細的市場調研，確立符合市場需求的數據信息。之后以攤主信息為核心構建數據庫概念和邏輯結構，同時在數據庫中加入視圖、索引、存儲過程，最后檢查數據庫的完整性和安全措施，使得數據庫達到一個良好的設計狀態，提升系統中數據的存儲和查詢效率，保證數據安全性和一致性，有利于軟件系統的擴展和維護［20］。數據庫設計的部分E-R圖如圖3所示。

圖3 E-R圖

3 系統實現

3.1 系統總體實現

系統包含攤主注冊審批、攤位信息管理、城管信息管理、攤位信譽管理、特色街區管理與展示、街區監控、數據可視化展示與數據分析、攤位地圖展示等8個模塊，系統總體流程如圖4所示。

圖4 系統流程圖

3.2 系統功能模塊實現

（1）攤主注冊審批。在攤主擺攤之前需要在線上進行申報并提交相關信息，管理員通過系統進行審核攤主擺攤信息，管理人員對其相關資質進行審核，審核無誤即可通過。對擺攤人員經過篩選和審查，以保證每位擺攤者符合資格［1］。

（2）攤位信息管理。攤主信息審核通過后，即可擺攤。同時攤主和攤位信息存入數據庫，通過可視化的表格進行管理，可查看當前攤位擺攤狀況，累計擺攤時間等信息，將攤主信息都納入系統的管理。

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

（4）攤位信譽管理。對每位擺攤者進行數字化誠信建檔，將其衛生、安全等納入誠信考核。對于長期違規的攤位，將其納入黑名單進行處理和懲罰，保障攤位管理有序，攤主規范意識得到提升，并進行獎懲。通過系統攤位信譽管理，可了解各個街區擺攤管理情況、違規數目等，以幫助管理者更好地管理街區擺攤情況。

（5）特色街區管理與展示。管理人員通過攤位類型與擺攤特色對街區進行創建與規劃，將具有相關特色的攤位集中在一起，從而建立具有地方特色的擺攤街區。在系統中可通過地圖的形式對特色街區進行查看、規劃城市擺攤街區的分布，并對特色街區進行可視化的管理與展示。

（6）街區監控。系統通過OpenCV與Socket搭建監控視頻系統。OpenCV是一個跨平臺計算機視覺和機器學習軟件庫，通過其提供的接口能極大節約圖像視頻等開發時間［21］。借助OpenCV獲取攝像頭中實時的監控視頻，通過Socket通信機制將實時視頻傳入遠程服務器，并使用OSS進行對象存儲，保證媒體資源的海量云存儲的安全、可靠以及低成本，實現街區監控的實時查看與備份。幫助管理者能夠及時了解當前一些街區的擺攤真實情況，并且能夠通過攝像頭語音功能及時對擺攤人員進行一定的遠程指揮、調整，對于一些小的違規行為進行通知整改，無需親自到場，從而提升治理效率，降低管理成本。

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

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

圖5 地圖展示流程圖

3.3 系統關鍵問題分析及實現

3.3.1 數據可視化呈現

（1）數據呈現對象分析

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

表1 數據分析內容表

（2）組件化呈現的實現思路

基于組件化的思想，首先將每個不同數據分析的圖表進行組件化處理，讓每個component（單個組件）對應一個或一組相同類型的數據分析圖表，并在其中單獨處理一個圖表的數據請求、處理、渲染等，然后導入已經創建好的組件，最后在頁面中注冊使用所有已導入的component從而構建整個頁面，這樣每個component互不影響單獨為一個獨立個體，在構建整個頁面時只需要關注組件的使用與布局而不用在意其內部實現細節。以年齡分析為例，基于Vue.js框架的組件化呈現的實現思路如下：

step 1:定義年齡分析組件AgeChart。首先在組件中導入ECharts相關依賴，根據Vue.js的生命周期性質，在mounted鉤子函數中通過調用Axios中的數據請求函數獲取相關年齡分析數據；然后編寫數據處理函數對年齡分析數據進行格式處理；之后將處理好的數據保存到預定義好的對象中；最后通過插值綁定的形式將對象中的內容傳遞到HTML中。

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

import AgeChart from'./components/Age';

step 3:頁面中注冊需要使用的組件，通過Vue.js框架在組件目錄components對象中對年齡分析組件AgeChart進行注冊。

step 4：在HTML中使用step 3中注冊組件進行數據呈現，使用格式為：

其中age-chart為組件名，由注冊的年齡分析組件AgeChart自動轉換生成。

3.3.2 攤位信譽管理方式

經過實地考察和調研，本系統將信譽扣分相關的類型劃分為衛生、安全、規范3類，每種類型又根據違規程度的不同劃分為不同等級，相關部分扣分標準如表2所示。評價標準以分數段的形式呈現，城管根據違規情況的嚴重程度進行扣分處理。

城管在巡邏時若發現攤位存在表2中所描述的一些違規行為，可在小程序中根據相應的扣分標準進行扣分。首先通過掃描攤主二維碼或者搜索攤主信息確認攤主身份，再給予扣分，同時進行警告并勒令其及時整改。對于多次累犯的攤主，當信譽積分低于相應擺攤要求時予以暫時停業整頓等處罰。

表2 扣分標準表

在攤位信譽管理平臺中，對于95分~100分攤主評為優秀，85分~94分評為良好，對于低于85分的攤主，將暫時取消其擺攤資格，需通過城管相關約談，整改合格后方能再次進行擺攤行為。

對于相關已扣分攤主若是在過去一個月內未在發生相關違規行為，系統即可自動為其增加3分信譽分。系統提供此類基礎信譽分標準，同時支持相關不同地區添加更適于自身的管理標準，保證系統更適合當地管理。

3.3.3 特色街區管理及呈現

（1）特色街區模型建立

通過前期調查發現，城市街區分布復雜交錯，并且大多攤位大小不一，難以通過地圖劃定街區即可自動生成合理的攤位數目等信息。于是系統采用建立街區模型的方式來創建街區，在系統設計時確立特色街區模型的相關數據信息，創建街區時管理人員只需將信息填入便可創建街區，生成最為適合的擺攤街區，特色街區模型如圖6所示。

圖6 特色街區模型圖

（2）街區位置及攤位信息可視化呈現

在地圖上以點和圖的形式將攤位和街區位置展現出來。攤主在小程序點擊擺攤便發送相關地理位置信息，若擺攤成功便在地圖上進行展示，針對不同軟件默認坐標系不同，本系統內所有坐標系統一采用GCJ02標準。

微信小程序中獲取擺攤的高精度位置信息是通過微信提供的應用程序編程（API）接口實現的。用戶在打開定位和授權的情況下獲取相關位置信息，微信小程序獲取高精位置的實現思路如下：

step 1:調用接口獲取攤位置信息。通過調用微信小程序API的wx.getLocation（）函數進行高精度位置獲取，設定坐標系標準為'gcj02'，修改isHighAccuracy參數開啟高精度。為了降低誤差，通過設定highAccuracy ExpireTime參數，將獲取定位的超時時間設定為5000 ms。

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

step 3:位置信息傳遞。通過調用wx.request（）函數將用戶端的經緯度數據，以參數的形式傳遞到數據庫服務器持久化存儲。

街區、攤位地圖呈現時首先通過數據請求獲取地圖可視范圍內的所有攤位和街區數據，然后將數據預處理為滿足地圖所需的數據格式，最后以添加圖層的方式在地圖上展示所有數據信息。街區及攤位信息地圖呈現的實現思路如下：

step 1:根據顯示范圍和縮放程度獲取攤位數據，通過調用Axios中的請求函數，將顯示范圍bounds和縮放程度zoom以參數的形式傳遞到服務器，服務器處理后以數組的形式返回攤位數據。

step 2:根據顯示范圍獲取街區數據，通過調用Axios中的請求函數，將顯示范圍bounds以參數的形式傳遞到服務器，服務器處理后以數組的形式返回街區數據。

step 3:將獲取到的街區數據和攤位數據數組，以循環的形式進行遍歷。對于攤位而言，根據攤位對象的信息，調用高德地圖的marker（）函數產生點標記對象，街區對象需先進行圖形繪制類型判斷，然后根據類型的確定調用高德地圖的polygon（）、circle（）或rectangle（）函數，從而生成矢量圖形對象。

step 4:調用高德地圖提供的add（）函數，在地圖中批量添加step 3中處理好的點標記對象數組和矢量圖形數組，產生呈現效果。

3.4 系統測試及運行效果

3.4.1 系統測試

（1）測試環境

測試環境主要針對軟件應用服務器、數據庫服務器、客戶端PC 3個方面，主要硬軟件環境包含CPU、內存、硬盤、操作系統、中間件、數據庫系統等方面，對應的參數見表3。

表3 測試環境表

（2）性能測試

在系統運行中響應時間和吞吐量是衡量系統性能和用戶體驗的重要指標。限于網絡對于測試具有較大影響，測試過程中采用校園網來進行測試工作，測試所用工具為Apache-JMeter-5.2.1，Apache JMeter通過多線程手段來模擬多用戶情況下的操作，并且基于JMeter支持Java腳本的特點，針對異步接口進行一整套測試方案設計［22］，最終測試數據經過整理得到結果如圖7所示。

從圖7看出，系統吞吐量快速增加并逐漸趨于平緩，訪問量為600次/s時達到峰值，響應時間也開始增加。測試結果表明，系統并發服務量為600次/s時，能夠滿足用戶的使用需求。

圖7 性能測試結果圖

3.4.2 系統運行效果

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

圖8 攤主與城管界面

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

圖9 系統運行效果

4 結束語

通過城市攤位的市場調研與數據分析，結合當前城市攤位管理方法，設計與實現了一套城市攤位可視化管理系統，該系統能夠有效解決城市攤位管理分散、難度大、效率低、管理不精細、不全面等問題。系統利用手機、街區攝像頭等獲取實時信息，通過地圖、數據分析等手段為管理人員提供一種可視化的、便捷的管理方式。城市攤位管理人員通過本系統便可直觀地了解到當前街區情況，在減少管理時間和人力成本的同時將管理變得更加精細、便捷，提升城市攤位管理水平。通過“互聯網+”攤位管理的方式促進城市攤位管理制度的進一步完善，幫助“后疫情時代”地攤經濟的長久發展，并且系統成本相對低廉，具有簡單易維護的特點，適合政府或者公司大規模使用。