app-big-data/page/bigDataOut/js/index.js

new Vue({
	el: '#app',
	data: function () {
		return {
			// iframeSrc: "../../new-quailty-manager/html/new-quailty-manager.html", 
			loading: false,
			tabList: [],
			historyArr:[{url:'../../bigData/html/home.html',text:'测试'},],  //历史记录
			activeIndex:'0' , //当前历史记录选中的下标
			leftTabActive:'2-0',//左边菜单中当前高亮下标
			isCollapse: false, //导航栏是否隐藏
			screenWidth: document.body.clientWidth,//屏幕宽度
		}
	},
	computed: {
	   	navWidth:function() {  //左边菜单的的宽度 
			return this.isCollapse ? '51px' : '200px'
		  },
		  titleTip:function() {
			return this.isCollapse ? '显示导航栏' : '隐藏导航栏'
		  },

	},
	mounted:function() {
		this.resize()
		GlobalEventBus.$on("setLoading", function(arg) {
		
			if(arg.loading){
				vm.loading = true
			}			
			else{
				vm.loading = false
			}
		});
		GlobalEventBus.$on("setIframeUrl", function(arg) {
		
			vm.setHistory(arg.history)
		});
	},
	methods: {
		resize:function() { //监听页面改变大小
			const that = this
			this.isCollapse = this.screenWidth >= 786 ? false : true;
			window.onresize = function()  {
			  return (function(){
				window.screenWidth = document.body.clientWidth;
				that.screenWidth = window.screenWidth;
			  })()
			}
		  },
		handleSelect: function (key) {
			console.log(key)
			var vm = this;
			var activeObj =null;
			switch (key) {
				case '1':
				this.isCollapse = !this.isCollapse;
				  break;
				case '2-0':
				
				  break;
				case '2-1':
				activeObj = 	{url:'../../bigData/html/medical.html',text:'各个'};
				  break;
				case '2-2':
				  
				  break;
				case '2-3':
				 
			  }
			 this.leftTabActive=key


			// key=key.toString()
			// this.isActive = key.substring(0, 1)
			// var childrenIndex= key.split('-')[1]-1;
			// var activeObj = 	this.tabList[(this.isActive-1)].children[childrenIndex];
			if(activeObj)
			vm.setHistory(activeObj)
		},
		deleteHistory:function(index){
			this.historyArr.splice(index,1);
			if(!this.historyArr[this.activeIndex] &&  this.activeIndex-1>=0){
				this.activeIndex-=1
			}
		},
		setHistory:function(obj){  
			
			var vm = this;
			var exist = false;
			var index = null;
	

			if(typeof(obj)=='string'){ //有些页面直接传url过来  先检测是是左边菜单中的哪个
			
				vm.tabList.forEach(function(v){
					v.children.forEach(function(value){
						if(typeof(obj)=='string' && obj.indexOf(value.url) != -1){  
							var	obj1 =newObj(value);
							obj1.url=obj;
							obj=obj1;
						}
					})
				})
			}	

			vm.historyArr=	vm.historyArr.map(function(v,i){   //检测要跳转的url是否在历史记录中
				if(obj.url.indexOf(v.url.split('?')[0]) != -1 ){  
					exist=true;
					index = i;
					if(v.url!=obj.url) v.url=obj.url     //如果参数不同则重新赋值
					
				}
				return v
			})
			if(!exist){  					  //不存在则添加进历史记录  
				vm.historyArr.push(obj);
				this.activeIndex =vm.historyArr.length-1
			} 		
			else{						//存在则直接跳转
				this.activeIndex =index
			}
	     	if(obj.index)	this.leftTabActive=obj.index    //控制左边菜单选中
		},
		controlRouter:function(key) {
            debugger
			switch (key) {
			  case '1':
				this.closeAllHistory();
				break;
			  case '2':
				this.closeAllHistory(true);
				break;
			}
		  },
		  closeAllHistory:function(is) { //不传参则全部关闭   传参则关闭除了自己之外的
			var that =this;
			if (is && this.activeIndex !=0) {
			  this.historyArr = this.historyArr.filter(function(v,i) {
				return i == that.activeIndex  || i==0
			  })
			  this.activeIndex=1
			} 
			else{
				this.historyArr = this.historyArr.filter(function(v,i) {
					return  i ==0
				  })
				  this.activeIndex=0
			}
		  },
	},
	watch: {
		screenWidth:function(value) {
			
			this.isCollapse = value >= 786 ? false : true;
		},
	}
})