在线体验: 筑城焕新通 — 贵阳市棚户区改造项目管理系统技术栈: 纯静态 HTML5 ECharts 5 玻璃拟态Glassmorphism适用场景: 政府棚改/城市更新项目管理大屏、数字政务可视化一、项目背景2026年是贵阳市「城市更新攻坚年」。全市棚改项目46 个涉及居民47.63 万户年度投资460 亿元涵盖棚户区改造、城中村改造、老旧小区改造、城市更新等六大类工程。面对如此庞大复杂的棚改工程管理需求我开发了「筑城焕新通」贵阳市棚户区改造项目管理系统一套面向政府棚改办、征收局、住建局等部门的全流程数字化管理平台。二、技术架构筑城焕新通纯静态单文件 HTML ├── UI 层玻璃拟态 (Glassmorphism) 暗色主题 ├── 图表层ECharts 5.4.311 个图表实例 ├── 数据层内置 46 个项目 7 个区域完整种子数据 └── 部署层Nginx 静态托管零后端依赖维度选型前端框架纯原生 HTML5 CSS3 Vanilla JS图表引擎ECharts 5.4.3CDN 引入UI 风格玻璃拟态 Glassmorphism 深色科技风数据存储硬编码种子数据46 项目/12,856 征收户部署方式Nginx 静态文件单 HTML 文件即开即用文件大小64KB含 CSS JS 所有数据三、系统功能模块12 大模块1. 仪表盘城市更新全域态势感知一屏总览6 个 KPI 指标卡项目总数 46、城中村 4.82 万户、棚改 47.63 万套、投资 460 亿、老旧小区 68.56 万户、开工率 85.3%区域项目分布柱状图云岩 12 项、南明 8 项、花溪 10 项……各区域棚改进度对比签约率 / 开工率 / 竣工率三柱对比资金使用分布环形图征收补偿 186 亿40% 安置房建设 128 亿28%……重要提醒面板沙冲路棚改重点攻坚、9 大片区 120.81 亿借款已签约等 6 条实时提醒2. ️ 项目管理按7 个区域云岩/南明/花溪/观山湖/乌当/白云/经开筛选7 个重点项目卡片拆除面积、建设规模、进度条可视化典型项目沙冲路 1,477 亩28% 攻坚中、毓秀路 23.84 万㎡72% 主体施工、百花新城 41.6 万㎡85% 配套施工支持「 新建项目」弹窗录入3. 征收管理征收进度台账7 条记录含征收编号、总户数、已签约、签约率、补偿方式、状态2026 拆迁新政面板国有土地上房屋征收货币补偿市场评估价 ×1.1或产权置换≥1:1.2集体土地房屋征收区片综合地价 房屋重置成本征收程序「七步走」立项→调查→公示→评估→签约→腾房→验收4. 安置管理安置房源台账6 个项目含套数、面积、已分配、交付时间安置方式统计饼图货币补偿 41%、产权置换 52%、混合安置 7%安置进度汇总面板5. 资金管理资金台账6 笔资金记录含专项借款、社会资本、财政拨款关键数据沙冲路 28.4 亿拨付率 22%、9 大片区 120.81 亿拨付率 71%资金分类柱状图专项借款 186 亿、财政拨款 128 亿、社会资本 82 亿、专项债 38 亿、中央补助 26 亿6. 进度追踪棚改全生命周期 10 步流程图立项→规划→资金→征收→搬迁→拆除→建设→配套→验收→回迁各项目进度甘特图计划 vs 实际双柱对比月度完成量统计征收户数柱 拆除面积折线 开工项目数折线7. 合同管理合同总数 286 份、总金额 ¥386 亿、履约率 92.5%合同台账征收补偿、EPC 总承包、借款合同等8. ⚖️ 招标采购进行中招标 52 项、报名供应商 326 家招标列表拆除工程、监理、电梯采购、三网 FTTH 接入等9. 居民管理涉及居民 47.63 万户、签约率 86.3%、满意度 92.8%沙冲路项目居民台账6 户示例含户主、房屋类型、面积、补偿方式、签约状态特殊群体标注低保户/独居老人、残疾人家庭10. ⚠️ 风险预警分级预警体系高风险 6 条、中风险 15 条、信访预警 3 条、进度滞后 8 条典型预警沙冲路签约率仅 28%严重、资金拨付率 22%严重、小关拆除进度不足 50%11. 统计分析十四五棚改趋势折线图2021-2025 年改造完成量各区域投资占比饼图南明 28.4 亿、云岩 21.6 亿……四改工程结构环形图棚改 旧改 背街小巷 管网 城中村年度开工率趋势1 月 72% → 7 月 85.3%目标 95%12. ⚙️ 系统设置飞书多维表格集成APP_TOKEN / APP_ID 配置预警阈值配置签约率红线、资金拨付率红线、进度滞后天数操作日志审计四、设计亮点 玻璃拟态 暗色科技风--bg: #060b14; /* 深邃夜空底色 */ --card-bg: rgba(18,26,52,0.55); /* 半透明玻璃面板 */ --border: rgba(80,200,255,0.15); /* 微光边框 */ backdrop-filter: blur(20px); /* 毛玻璃模糊 */搭配橙金色#ff9100作为品牌主色辅以青色、绿色、琥珀色数据高亮营造出政务大屏的专业感与科技感。 11 个 ECharts 图表图表类型位置区域项目分布柱状图仪表盘区域棚改进度对比分组柱状图仪表盘资金使用分布环形饼图仪表盘安置方式统计饼图安置管理资金分类统计柱状图资金管理项目进度甘特图条形图进度追踪月度完成量柱双折线混合进度追踪十四五趋势面积折线图统计分析区域投资占比饼图统计分析四改工程结构环形饼图统计分析年度开工率面积折线图统计分析 飞书多维表格同步系统集成了飞书开放平台支持一键将项目数据同步至飞书多维表格实现大屏展示 移动端协同双端联动。五、部署方式# 单文件静态部署无需任何后端 # 1. 将 index.html 放入 Nginx 静态目录 cp index.html /var/www/y2ksoft/pengai/ # 2. Nginx 配置可选添加安全头 location /pengai/ { alias /var/www/y2ksoft/pengai/; index index.html; add_header X-Frame-Options SAMEORIGIN always; add_header X-Content-Type-Options nosniff always; } # 3. 重载 Nginx nginx -s reload访问地址: 筑城焕新通 — 贵阳市棚户区改造项目管理系统六、总结特性说明零依赖部署纯静态 HTML无需数据库、无需后端即开即用所有种子数据内置打开即展示专业设计玻璃拟态 ECharts 暗色主题真实数据46 项目/7 区域/12,856 征收户/460 亿投资全流程覆盖立项→征收→安置→资金→进度→合同→预警这套系统适用于各级地方政府棚改办、城市更新局、住建部门作为项目管理大屏或汇报演示系统使用。数据均为演示种子数据实际部署时可对接真实数据库或 API。在线体验: 筑城焕新通 — 贵阳市棚户区改造项目管理系统 欢迎 Star / Fork / 交流探讨