大屏：

地图：

背景：调用的亿力的地图，中心点通过geoJson文件来定位坐标点，之后通过坐标点与省市匹配，后端接口返点给到省市编号来匹配。

前端制定了GisData的一套，通过pubsub的方式来传递到地图（后期优化vuex），同时结合定时轮播来改变数据。

注意轮播时发布订阅后取消订阅：

1
2
3
4
5
6
7
8

//在生命周期取消订阅
beforeDestroy(){
    this.$pubsub.unsubscribe(this.token)
}
//也可以用this.$once语法糖
this.$once('hook:beforeDestroy',()=>{
    this.$pubsub.unsubscribe(token)
})

相关：热力图，点少不直观

#项目层级的渲染，地图与缩放倍数的处理判断（zoom）

四周卡片：

基本都是查询接口，查询展示功能，用到比较多的echarts。

相关：echarts的api，3d饼图，折线图。

echarts的api非常多，3d饼图是由2d饼图改造而来，viewControl可以控制饼图是否能缩放，缩放视角等。

轮播时要注意echarts的销毁，未及时销毁会造成内存泄漏，表现为任务管理器的内存不断升高，并且会页面崩溃。

1
2
3
4
5
6
7

//echats图表的销毁
beforeDestroy(){
if(this.charts){
	this.charts.dispose();
	this.charts = null;
	}
}

流光

在卡片轮播时，ui要求四周卡片轮播时有高亮流光背景（一开始是高亮背景），采用的方法是对svg进行操作。

监听

watch监听一个下拉选择框，这个选择框是一个树状结构选择框，结构为 全国-省-建管单位（市）-项目工程-单项工程，watch里需要加上deep:true,如果监听到立即执行则需要加上immediate:true。