數(shù)據(jù)地圖--前臺(tái)JS代碼

前端

js.png
datamap_search.js 數(shù)據(jù)地圖的控制js
  • 變量:
    1. treeParam 原先用來存儲(chǔ)樹相關(guān)信息的,后來用其他變量first,second,third
    2. items 原先用來存儲(chǔ)樹節(jié)點(diǎn)信息。
    3. myChart 用來存儲(chǔ)echart對象。
    4. option 用來存儲(chǔ)echart對象的option對象。
    5. first,second,thired分別用來存儲(chǔ)第一次,第二次,第三次下鉆的信息
    6. businessCash 用來區(qū)分分域還是分系統(tǒng)
    7. treeInfluence 用來區(qū)分是樹節(jié)點(diǎn)的查詢還是echart的查詢。
  • 方法:
    1. 初始化方法$(function(){});
    • 查詢C區(qū)域所示信息。無論是分域還是分系統(tǒng),影響的是B區(qū)域的統(tǒng)計(jì)結(jié)果,與C區(qū)域無關(guān)。用tab頁的形式分域,分系統(tǒng)。
      1. 做一次C區(qū)域的查詢
      2. 初始化樹節(jié)點(diǎn)
      3. 初始化echart圖表
      4. 設(shè)置enter鍵搜索事件
  1. queryAjax()查詢按鈕事件
  • 點(diǎn)擊查詢有兩種場景,一種是點(diǎn)擊樹節(jié)點(diǎn)后的查詢,另外一種是直接點(diǎn)擊查詢。如果查詢之前沒有點(diǎn)擊樹節(jié)點(diǎn),用戶想要看到的是單純的查詢輸入框的條件的查詢結(jié)果。需要清空先前所有的域查詢輸入框無關(guān)的查詢條件。也就是說清空first,second,third這三個(gè)條件。
  • 如果選中了樹節(jié)點(diǎn)后點(diǎn)擊查詢按鈕,查詢結(jié)果帶有這個(gè)查詢條件,而不要其他查詢 條件。要做到這一點(diǎn)第一需要記錄查詢的上一部操作是不是點(diǎn)擊樹節(jié)點(diǎn)。第二清空second,thired這兩個(gè)參數(shù)。
  1. editData()
* 這是一個(gè)雙擊顯示詳情的功能。
  1. initTree()
* 用來初始化樹,并綁定click事件
  1. clickFunction()
* 點(diǎn)擊樹節(jié)點(diǎn)事件要清空first,second,third的值
* 用來觸發(fā)點(diǎn)擊事件。這里要區(qū)分好父子節(jié)點(diǎn),以及系統(tǒng)與域節(jié)點(diǎn)
* 樹點(diǎn)擊事件是默認(rèn)第二層下鉆查詢
  1. searchFunction()
* 用來給樹節(jié)點(diǎn)下鉆的時(shí)候?qū)區(qū)的更新
  1. loadBusiness()
* 用來加載echart圖表
  1. first,second,third分別對應(yīng)第一,二,三下鉆的參數(shù)
  2. level指是第幾層下鉆
  3. businessType是指業(yè)務(wù)域還是系統(tǒng)域
  4. treeInfluence是指本次操作是不是因?yàn)辄c(diǎn)擊樹發(fā)起的查詢。

initEcharts_search () 第一層展示;
initEcharts_one()第二層下鉆展示
initEcharts_two()第三曾下鉆展示 業(yè)務(wù)域
initEcharts_two_2() 第三次瞎轉(zhuǎn)展示 系統(tǒng)域
initEcharts_tree()第四層下鉆展示 業(yè)務(wù)域

后端

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容