数据可视化大屏小结

一、项目背景

        自己上学校论坛接的一个前端兼职，后面发现是后端师兄自己接的项目，然后不想做前端，再在学校论坛上发布帖子招募前端师弟（that‘s me），硬件是一个装载电线杆上的设备，可以重启光猫、重启摄像头，在UI界面上可以看到全国各个省市该设备的分布及维修情况，并对设备状况做简单的展示，且能对其做重启等操作。

        以下就是后端提供的原型图：

二、最终实现

•  登录界面

• 主界面

• 各个省市界面 （以重庆市为例）

• 对设备进行操作

 三、项目实现以及难点总结

        技术栈采用vue + datav + echarts + vrouter +vuex +vueAmap（高德插件）+ Element-UI 等实现

• 自定义组件

        这块在页面上出现多次，可以抽象封装为小组件提高代码复用度，实现上如下：

        在外部引入该组件并使用，先定义请求后端的方法，mounted时候请求，将实际的站址数、工单数放入data里定义的相应变量，再传入子组件的props

...

...

• 地图下钻以及数据联动

        这里请求的高德地图的AMapUI.loadUI来获取地图json数据，再调用后端的数据接口获得对应区域的设备数量，在echarts里进行填充

  遇到显示上一些问题，例如海南三沙群岛太琐碎，就暂时将其屏蔽了。且只有几个省市有数据，则只有那几个省市能触发点击事件

        数据联动解决： 这里将当前所在区域代码存入了vuex，当点击地图上省份时，或点击回到全国，都先更改vuex里的区域代码，然后在所有组件监听区域代码，发生了变化则重新请求后端数据更新到页面上

• 设备数据实时更新到页面

        采用的是轮询解决，更优雅的做法应该是通过websocket

• 表格滚动 以及 表格点击事件

        表格滚动组件采用的是DataV的轮播表，由于全国和省市的表格项有不一样的地方，且点击事件不同，为此在最外层需引入这两个轮播表组件，通过v-if判断当前区域来进行显示

    



    



methods: {
  showProvince(ri) {
      this.$store.commit("changeCity", ri.row[1]);
  },
  showDetail(ri) {
      if (ri.ceil === "设备详情") {
        this.deviceDlg = true;
        this.districtAdCode = ri.row[0];
        console.log(ri.row[1] + "设备详情");
      }
      if (ri.ceil === "告警详情") {
        this.alarmDlg = true;
        this.districtAdCode = ri.row[0];
        console.log(ri.row[1] + "告警详情");
      }
    }

}

• 多分辨率适配

        老板的笔记本分辨率是720p的，为此采用css媒体查询进行了一套720p分辨率下的适配