COVID-19 RA 风险区域h5网页总结

简介

为了方便大家查询风险地区，以及供应APP、小程序、网页等内嵌HTML 兼容H5页面。

电脑端效果

手机端效果

1.首先数据来源 【中国政府网卫健委疫情风险等级查询】
2.框架 MUI + VUE

数据来源

{"data":{"end_update_time":"2022-04-28 22时","hcount":8,"mcount":108,"highlist":[{"type":"2","province":"北京市","city":"朝阳区","county":"潘家园街道","area_name":"北京市 朝阳区 潘家园街道","communitys":["松榆里社区"]},{"type":"2","province":"北京市","city":"朝阳区","county":"高碑店（地区）乡","area_name":"北京市 朝阳区 高碑店（地区）乡","communitys":["方家园社区"]},{"type":"2","province":"北京市","city":"朝阳区","county":"十八里店（地区）乡","area_name":"北京市 朝阳区 十八里店（地区）乡","communitys":["周家庄中路19号院"]},{"type":"2","province":"北京市","city":"房山区","county":"窦店镇","area_name":"北京市 房山区 窦店镇","communitys":["于庄村","燕都世界名园社区"]},{"type":"2","province":"吉林省","city":"长春市","county":"宽城区","area_name":"吉林省 长春市 宽城区","communitys":["团山街道小南街社区"]},{"type":"2","province":"黑龙江省","city":"哈尔滨市","county":"南岗区","area_name":"黑龙江省 哈尔滨市 南岗区","communitys":["王岗镇","跃进街道全域"]}],"middlelist":[{"type":"2","province":"北京市","city":"朝阳区","county":"双井街道","area_name":"北京市 朝阳区 双井街道","communitys":["广和南里二条","黄木厂社区"]},{"type":"2","province":"北京市","city":"朝阳区","county":"垡头街道","area_name":"北京市 朝阳区 垡头街道","communitys":["垡头西里社区","垡头西里三区"]},{"type":"2","province":"北京市","city":"朝阳区","county":"八里庄街道","area_name":"北京市 朝阳区 八里庄街道","communitys":["红庙北里社区"]},{"type":"2","province":"北京市","city":"朝阳区","county":"潘家园街道","area_name":"北京市 朝阳区 潘家园街道","communitys":["松榆东里社区","武圣东里","松榆西里社区"]},{"type":"2","province":"北京市","city":"朝阳区","county":"劲松街道","area_name":"北京市 朝阳区 劲松街道","communitys":["农光东里社区"]},{"type":"2","province":"北京市","city":"朝阳区","county":"南磨房（地区）乡","area_name":"北京市 朝阳区 南磨房（地区）乡","communitys":["南新园社区","双龙南里"]},{"type":"2","province":"北京市","city":"朝阳区","county":"十八里店（地区）乡","area_name":"北京市 朝阳区 十八里店（地区）乡","communitys":["弘善家园","周家庄中路20号院"]},{"type":"2","province":"北京市","city":"朝阳区","county":"三间房（地区）乡","area_name":"北京市 朝阳区 三间房（地区）乡","communitys":["艺水芳园社区"]},{"type":"2","province":"北京市","city":"朝阳区","county":"孙河（地区）乡","area_name":"北京市 朝阳区 孙河（地区）乡","communitys":["康营家园三社区"]},{"type":"2","province":"北京市","city":"房山区","county":"窦店镇","area_name":"北京市 房山区 窦店镇","communitys":["田家园村","小高舍村","瓦窑头村"]},{"type":"2","province":"北京市","city":"房山区","county":"长阳镇","area_name":"北京市 房山区 长阳镇","communitys":["加州水郡东区社区金桥国际公寓"]},{"type":"2","province":"河北省","city":"唐山市","county":"迁安市","area_name":"河北省 唐山市 迁安市","communitys":["野鸡坨镇邵家营村"]},{"type":"2","province":"河北省","city":"邯郸市","county":"魏县","area_name":"河北省 邯郸市 魏县","communitys":["双井镇野庄村"]},{"type":"2","province":"河北省","city":"邢台市","county":"南和区","area_name":"河北省 邢台市 南和区","communitys":["史召乡李牌村片区（史召乡果寨村以北、340国道以南、留垒河以西、史召桥村以东合围区域）"]},{"type":"2","province":"内蒙古自治区","city":"呼伦贝尔市","county":"满洲里市","area_name":"内蒙古自治区 呼伦贝尔市 满洲里市","communitys":["南区街道","北区街道","兴华街道","东山街道"]},{"type":"2","province":"辽宁省","city":"丹东市","county":"振兴区","area_name":"辽宁省 丹东市 振兴区","communitys":["知春园小区一期","丹建锦园93号楼","丹建锦园95号楼","福临花园小区","文安新村小区"]},{"type":"2","province":"吉林省","city":"长春市","county":"南关区","area_name":"吉林省 长春市 南关区","communitys":["鸿城街道卫星花园","明珠街道万科金域长春"]},{"type":"2","province":"吉林省","city":"长春市","county":"宽城区","area_name":"吉林省 长春市 宽城区","communitys":["凯旋街道友谊花园小区"]},{"type":"2","province":"吉林省","city":"长春市","county":"绿园区","area_name":"吉林省 长春市 绿园区","communitys":["林园街道3535小区","青年街道133厂小区","青年街道宇航社区日鑫小区B区"]},{"type":"2","province":"吉林省","city":"长春市","county":"净月区","area_name":"吉林省 长春市 净月区","communitys":["德容街道福临花园","德正街道保利香槟"]},{"type":"2","province":"吉林省","city":"长春市","county":"经开区","area_name":"吉林省 长春市 经开区","communitys":["兴隆山镇中海寰宇天下","兴隆山镇金色家园"]},{"type":"2","province":"吉林省","city":"白城市","county":"经济开发区","area_name":"吉林省 白城市 经济开发区","communitys":["白城师范学院校园整体"]},{"type":"2","province":"黑龙江省","city":"哈尔滨市","county":"道里区","area_name":"黑龙江省 哈尔滨市 道里区","communitys":["城乡路街道汇智广场B座（东方大街与规划路交叉口）","城乡路街道悦庭清湾小区（顾新路497号）","群力新苑小区C区（工农大街625号）"]},{"type":"2","province":"黑龙江省","city":"哈尔滨市","county":"南岗区","area_name":"黑龙江省 哈尔滨市 南岗区","communitys":["文汇家园小区1栋","上夹树街75号院","大众新城220栋","海城街176号院","新境街10号新华印刷厂家属楼小区10栋","建筑街84号居民楼","建筑街78号所在居民楼和海关街144号所在居民楼及其合围区域","鲁商凤凰城3栋"]},{"type":"2","province":"黑龙江省","city":"哈尔滨市","county":"松北区","area_name":"黑龙江省 哈尔滨市 松北区","communitys":["浦江国际小区"]},{"type":"2","province":"黑龙江省","city":"哈尔滨市","county":"香坊区","area_name":"黑龙江省 哈尔滨市 香坊区","communitys":["朝阳镇前进村居民区","朝阳镇永胜村居民区","新香坊街道办事处金源蓝城小区11号楼","朝阳镇平安村居民区"]},{"type":"2","province":"黑龙江省","city":"哈尔滨市","county":"双城区","area_name":"黑龙江省 哈尔滨市 双城区","communitys":["承旭街道社保局东边胡同平房片区","永治街道团结大街235号幸福e家1栋","幸福街道庆宁村","永治街道奋斗社区温馨小区1栋","乐群满族乡乐民村","永治街道车站街一委四组","永治街道天富名苑小区","永治街道洗涤剂家属楼小区","永治街道财富名苑小区","永治街道民乐小区B区","永治街道明城华都5栋","永治街道鑫马家园小区","承恩街道承恩村六组二委","承旭街道党校家属楼小区","幸福街道永支村","联兴镇安乐村","承旭街道枫桥郡小区","律政花园","金园一品小区2栋","金园一品小区4栋"]},{"type":"2","province":"上海市","city":"上海市","county":"黄浦区","area_name":"上海市 上海市 黄浦区","communitys":["打浦桥街道顺昌路612弄20号"]},{"type":"2","province":"上海市","city":"上海市","county":"闵行区","area_name":"上海市 上海市 闵行区","communitys":["梅陇镇许泾村八组","梅陇镇行南村三队","华漕镇许浦村三队"]},{"type":"2","province":"上海市","city":"上海市","county":"嘉定区","area_name":"上海市 上海市 嘉定区","communitys":["马陆镇康年路261号工地宿舍","江桥镇增建村柴中村民组"]},{"type":"2","province":"上海市","city":"上海市","county":"浦东新区","area_name":"上海市 上海市 浦东新区","communitys":["日京路88号","北蔡镇联勤村冯桥南宅","北蔡镇鹏飞路411弄6号","康桥镇苗桥路935弄19号","北蔡镇御北路235号"]},{"type":"2","province":"上海市","city":"上海市","county":"崇明区","area_name":"上海市 上海市 崇明区","communitys":["长兴镇长明村21队","长兴镇新港村15队"]},{"type":"2","province":"江苏省","city":"徐州市","county":"睢宁县","area_name":"江苏省 徐州市 睢宁县","communitys":["景湖小区一期4号楼","李岳小区18号楼"]},{"type":"2","province":"江苏省","city":"苏州市","county":"昆山市","area_name":"江苏省 苏州市 昆山市","communitys":["通湖路公园壹号13幢","中山路假日花苑3幢、4幢"]},{"type":"2","province":"福建省","city":"宁德市","county":"蕉城区","area_name":"福建省 宁德市 蕉城区","communitys":["八都镇八都村","八都镇下坂村"]},{"type":"2","province":"山东省","city":"烟台市","county":"蓬莱区","area_name":"山东省 烟台市 蓬莱区","communitys":["登州街道登州路170号家宾馆","登州街道登州路万祥花园1号欣蘭砂锅店"]},{"type":"2","province":"山东省","city":"烟台市","county":"招远市","area_name":"山东省 烟台市 招远市","communitys":["金岭镇西梧桐夼村","金岭镇大户陈家村"]},{"type":"2","province":"河南省","city":"信阳市","county":"固始县","area_name":"河南省 信阳市 固始县","communitys":["石佛店镇漂桥村","张广庙镇龙井村"]},{"type":"2","province":"湖南省","city":"邵阳市","county":"双清区","area_name":"湖南省 邵阳市 双清区","communitys":["龙须塘街道龙须塘社区","石桥街道和谐社区","小江湖街道滨湖社区"]},{"type":"2","province":"湖南省","city":"邵阳市","county":"大祥区","area_name":"湖南省 邵阳市 大祥区","communitys":["城北路街道西外街社区的西外街路以南、民族二巷路以西、红旗西路以北、恒大未来城三期围墙以东的围合区域"]},{"type":"2","province":"湖南省","city":"邵阳市","county":"北塔区","area_name":"湖南省 邵阳市 北塔区","communitys":["陈家桥镇的云山路以北、资兴路以东、龙源路以南、宝苑路以西的围合区域和杨旗岭社区"]}]},"code":0,"msg":"查询成功"}

其数据结构为json格式，可以直接利用js进行解析。

	this.hcount = gwdata["data"]["hcount"];
	this.mcount = gwdata["data"]["mcount"];
	this.end_update_time = gwdata["data"]["end_update_time"]
	this.highlist = gwdata["data"]["highlist"];
	this.middlelist = gwdata["data"]["middlelist"];

利用vue的v-for进行list遍历

<div class="mui-card">
	<ul class="mui-table-view">
		<li v-for="i in middlelist" class="mui-table-view-cell mui-collapse">
			<a class="mui-navigate-right" href="#"><h4>{{ i.area_name }}</h4></a>
			<div class="mui-collapse-content">
				<form class="mui-input-group">
					<ul>
						<li v-for="j in i.communitys">
							<label>{{ j }} </label>
						</li>
					</ul>
				</form>
			</div>
		</li>
	</ul>
</div>

上述代码实现了，利用JS获取JSON数据中的中风险地区数据。两层嵌套遍历，首先遍历中风险地区，再遍历该地区中包含的社区。
核心：

 v-for="i in middlelist"
 v-for="j in i.communitys"

部署

1.将程序上传到给GITEE/GITHUB。利用其静态页面服务进行https部署。不详述

链接

1.源码
2.页面调用链接