数据地图--前台JS代码

前端

js.png

datamap_search.js 数据地图的控制js

• 变量：
  1. treeParam 原先用来存储树相关信息的，后来用其他变量first,second,third
  2. items 原先用来存储树节点信息。
  3. myChart 用来存储echart对象。
  4. option 用来存储echart对象的option对象。
  5. first，second，thired分别用来存储第一次，第二次，第三次下钻的信息
  6. businessCash 用来区分分域还是分系统
  7. treeInfluence 用来区分是树节点的查询还是echart的查询。
• 方法：
  1. 初始化方法$(function(){});
  • 查询C区域所示信息。无论是分域还是分系统，影响的是B区域的统计结果，与C区域无关。用tab页的形式分域，分系统。
    1. 做一次C区域的查询
    2. 初始化树节点
    3. 初始化echart图表
    4. 设置enter键搜索事件

2. queryAjax（）查询按钮事件

• 点击查询有两种场景，一种是点击树节点后的查询，另外一种是直接点击查询。如果查询之前没有点击树节点，用户想要看到的是单纯的查询输入框的条件的查询结果。需要清空先前所有的域查询输入框无关的查询条件。也就是说清空first,second,third这三个条件。
• 如果选中了树节点后点击查询按钮，查询结果带有这个查询条件，而不要其他查询 条件。要做到这一点第一需要记录查询的上一部操作是不是点击树节点。第二清空second，thired这两个参数。

3. editData()

* 这是一个双击显示详情的功能。

4. initTree()

* 用来初始化树，并绑定click事件

5. clickFunction()

* 点击树节点事件要清空first,second,third的值
* 用来触发点击事件。这里要区分好父子节点，以及系统与域节点
* 树点击事件是默认第二层下钻查询

6. searchFunction()

* 用来给树节点下钻的时候对C区的更新

7. loadBusiness()

* 用来加载echart图表
  1. first,second,third分别对应第一，二，三下钻的参数
  2. level指是第几层下钻
  3. businessType是指业务域还是系统域
  4. treeInfluence是指本次操作是不是因为点击树发起的查询。

initEcharts_search （） 第一层展示；
initEcharts_one（）第二层下钻展示
initEcharts_two（）第三曾下钻展示 业务域
initEcharts_two_2（） 第三次瞎转展示 系统域
initEcharts_tree（）第四层下钻展示 业务域

后端