哪吒探针自定义代码：网络监控快速切换

应用场景非常有限：用于已经设置好了网络监控的，快速进行监控的切换，或者多节点同监控下的切换用的
适合拿来对比判断：当前节点适合什么网络；同等网络下哪些节点更优
代码如下，按需可以自己加，按照要求修改myNetTypes即可
完整代码丢在：后台》设置》自定义代码（包括 style 和 script）

<script>// 网络监控
~(function(){
  const myNetTypes = ['ALL', '电信', '联通', '移动', '教育']
  const myObj = {
    activeType: '',
    echartMain: null,
    lastData: '',
    changeNetwork: null
  }
  window.changeNetworkMode = myObj.changeNetwork = (nType = '联通') => {
    const navBar = document.querySelector('.nav.navbar-nav')
    if(navBar) {
      navBar.querySelectorAll('.myNetwork').forEach(n => {
        if(n.innerText === nType) {
          n.classList.add('myactive')
        } else {
          n.classList.remove('myactive')
        }
      })
    }
    myObj.activeType = nType
    nType = truncateFromChar(nType, '网')
    const echartMain = document.querySelector('#app').__vue__.chart

    if(nType !== 'ALL') {
      const legends = echartMain.getOption().legend[0].data
      for(const legend of legends) {
        if(legend.includes(nType)) {
          echartMain.dispatchAction({
            type: 'legendSelect',
            name: legend
          })
        } else {
          echartMain.dispatchAction({
            type: 'legendUnSelect',
            name: legend
          })
        }
      }
    } else {
      echartMain.dispatchAction({
        type: 'legendAllSelect',
      });
    }
    return true;

    function truncateFromChar(text, char) {
      const index = text.indexOf(char);
      if (index !== -1) {
        return text.slice(0, index);
      }
      return text;
    }
  }
  if(location.href.includes('network')) {
    const navBar = document.querySelector('.nav.navbar-nav')
    if(navBar && !navBar.querySelector('.myNetwork')) {

      for(let nType of myNetTypes) {
        const myNetwork = document.createElement('li')
        myNetwork.className = 'myNetwork'
        
        const alink = document.createElement('a')
        alink.href = `#${nType}`
        alink.innerText = `${nType}`
        alink.setAttribute('onclick', `changeNetworkMode('${nType}')`)
        // alink.addEventListener('click', function() {
        //   return myObj.changeNetwork(nType, myNetwork)
        // })
        myNetwork.appendChild(alink)
        navBar.appendChild(myNetwork)
      }

      const cssNode = document.createElement('style')
      cssNode.innerHTML = `.myactive a{ color: red; font-weight: bold; }`
      document.body.appendChild(cssNode)

      myObj.activeType = decodeURIComponent(location.hash.slice(1))

      try{reAsign()}catch (e){}
      setInterval(() => {
        reAsign()
      }, 200)
    }

    function reAsign() {
      const node = document.querySelector('#app').__vue__.chart
      if(myObj.echartMain !== node) {
        myObj.echartMain && myObj.echartMain.off('finished', echartFinishFunc);
        myObj.echartMain = node
        myObj.echartMain.on('finished', echartFinishFunc);

        echartFinishFunc()
      }
    }

    function echartFinishFunc() {
      // 从url的hash中获取节点类型
      const newData = myObj.echartMain.getOption().legend[0].data.join('')
      if(newData !== myObj.lastData) {
        console.log('变更了')
        myObj.lastData = newData
        myObj.changeNetwork(myObj.activeType)
        myObj.echartMain = document.querySelector('#app').__vue__.chart
        myObj.echartMain.on('finished', echartFinishFunc);
      }
    }
  }
})()

</script>