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,

			historyArr:[{url:'../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() {
		if(sessionStorage.lastRouter){
			this.setHistory(JSON.parse(sessionStorage.lastRouter))
		}

		this.resize()
		this.bidnEvent()

	},
	methods: {
		bidnEvent:function(){  //供子页面调用的事件 （子页面是iframe)
			var vm =this;
			GlobalEventBus.$on("setLoading", function(arg) {  //控制整个界面加载
		
				if(arg && arg.loading){
					vm.loading = true
				}			
				else{
					vm.loading = false
				}
			});
			GlobalEventBus.$on("setIframeUrl", function(arg) { //新打开窗口并且记录历史记录
			
				vm.setHistory(arg.history)
			});
			GlobalEventBus.$on("setleftTabUrl", function(arg) { //打开左边菜单中的页面 可直接传对应  
				
				vm.handleSelect(arg.key)
			});
		},
		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':
				activeObj = 	{url:'../html/home.html',text:'全文病历检索'};
				  break;
				case '2-1':
				window.open('../../bigData/html/medical.html')
				  break;
				case '2-2':
				window.open('../../bigData/html/insurance.html')
				  break;
				case '2-3':
				window.open('../../bigData/html/home.html')
				break;
				case '2-4':
				activeObj = 	{url:'../html/tableChange.html',text:'医保控费分析'};
				break;
				}
				if(!activeObj)return 
			 this.leftTabActive=key

			 activeObj.fromLeft=true
			// key=key.toString()
			// this.isActive = key.substring(0, 1)
			// var childrenIndex= key.split('-')[1]-1;
			// var activeObj = 	this.tabList[(this.isActive-1)].children[childrenIndex];

			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'){ //如果左边菜单换成数组的话  现在暂时没空
			
			// 	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 ){  
					switch (obj.url){                                   //已经存在并且在左边的菜单的话则需要高亮左边菜单
						case "../html/home.html":obj.index='2-0';break;
						case "../html/search.html":obj.index='2-0';break; 
						case "../html/tableChange.html":obj.index='2-4';break; 
					}
					exist=true;
					index = i;
					if(v.url!=obj.url && !obj.fromLeft) v.url=obj.url     //如果参数不同则重新赋值  按左边的则不需要比较
					
				}
				return v
			})
			sessionStorage.lastRouter = JSON.stringify(obj)
			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) {
            
			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;
		},
	}
})