框架页上传

page/bigDataOut/css/flex.css

@@ -0,0 +1,46 @@
.flex{
    display:-webkit-box;
    display:-webkit-flex;
    display:flex;
}
/*  ��ֱˮƽ���� */ 
.f_xy_c{    
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
}
.f_y_c{
    -webkit-align-items: center;
    align-items: center;
}
.f_x_c{
    -webkit-justify-content: center;
    justify-content: center;
}
/* ����ʣ��ռ�Ŵ� */
.f_g_1{
    -webkit-flex-grow:1;
    flex-grow:1;
}
/* �ռ䲻��Ҳ����С */
.f_s_0{
    -webkit-flex-shrink:0;
    flex-shrink:0;
}
.f_x_s{
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
.f_wrap{
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}
.ellipsis{
    white-space:nowrap;/*强制文本在一行内显示*/
    text-overflow:ellipsis; /*溢出省略号，支持ie、safari（webkit）*/
    -o-text-overflow:ellipsis; /*溢出省略号，支持opera*/
    overflow:hidden;/*溢出隐藏*/
}

page/bigDataOut/css/index.css

@@ -0,0 +1,267 @@
.el-main{
    padding: 0
}
.opactiy0{
    opacity: 0;
}
.el-submenu .el-menu-item{
    padding: 0 45px;
    min-width: 200px;
    padding-left: 57px!important;
}
.el-submenu [class^=el-icon-]{
    color: #2d9bd2!important;
}
.activeColor{
    color: #2d9bd2!important; 
}
.history_tabList{
    height: 47px;
    border-bottom: solid 1px #e8edec;
}
.history_tabList ul{
    height: 100%;
    overflow: auto;
}
.history_tabList li{
    cursor: pointer;
    height: 100%;
    padding: 0px 20px;
    border-right: 1px solid #dcdcdc
}
.history_tabList li i{
    cursor: pointer;
    margin-left: 10px;
    font-weight: bold
}
.history_tabList li i:hover{
    color: red
}
.history_tabList li:hover {
    color: #777;
    background-color: #f6f8f8;
    border-color: #f6f8f8;
 }
 .history_tabList li.active{
    color: #777;
    background-color: #f6f8f8;
    border-color: #f6f8f8;
 }  
 .close_all_route {
    transform: rotate(90deg);
    cursor: pointer;
    font-size: 22px;
    margin-right: 20px
  }
  #app {
    font-family: Helvetica, sans-serif;
  }
  /* .main{
    background: url('../static/img/bg.png');background-size: cover
  } */
  .tabHead {
    position: fixed;
    top: 0;
    height: 51px;
    left: 220px;
    right: 0px;
    background: #fff;
    z-index: 5;
  }
  .tabTool {
    position: absolute;
    right: 0;
    background: #fff;
    z-index: 6;
    top: 0;
    height: 51px;
    border-left: solid 1px #e8edec;
  }
  .tabTool [class*=" el-icon-"],
  [class^=el-icon-] {
    min-width: 19.5px;
    text-align: center;
  }
  #tabDiv {
    width: 100000px;
    border-bottom: 1px solid #ccc;
    background: #fff;
    height: 100%;
  }
  html,
  body {
    height: 100%;
    overflow: hidden;
  }
  aside {
    background-color: #23344a;
  }
  * {
    margin: 0;
    padding: 0
  }
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
  .el-menu {
    border-right: 0
  }
  
  .cursor {
    cursor: pointer;
  }
  .relative {
    position: relative;
  }
  li {
    list-style-type: none
  }
  .cwhite {
    color: #fff
  }
  .router_history {
    padding-left: 62px;
    padding-right: 62px;
    position: relative;
  }
  .histouryTab,
  .home-absolute {
    background-color: #fff;
    color: #323232;
    border-right: solid 1px #e8edec;
    cursor: pointer;
    padding: 15px;
    transition: all .5s ease-in-out;
    box-sizing: border-box;
    position: relative;
    padding-right: 31px;
  }
  .home-absolute {
    padding: 15px;
    position: absolute;
    left: 0;
    top: 0;
    width: 63px;
    color: #323232;
    font-size: 16px;
    z-index: 6;
  }
  .activeHistory,
  .histouryTab:hover,
  .home-absolute:hover {
    color: #777;
    background-color: #f6f8f8;
    border-color: #f6f8f8;
  }
  .router_history i {
    display: none;
    margin-top: 3px;
  }
  .histouryTab:hover i {
    display: block;
  }
  .router_history i:hover {
    color: red
  }
  .hoverRed {
    cursor: pointer;
  }
  .hoverRed:hover {
    color: #c6d9ec
  }
  a {
    color: #333;
    text-decoration: none;
  }
  .header-logo {
    /* background-color: #259ee7; */
    background: url('./assets/LOGO11.png') center no-repeat;
    width: 270px;
    height: 31px;
    margin-top: 18px;
    background-size: contain;
  }
  .ml15 {
    margin-left: 15px
  }
  .close_all_route {
    transform: rotate(90deg);
    cursor: pointer;
    font-size: 22px
  }
  .close_all_route .el-dropdown {
    font-size: 22px;
  }
  .router_history li span {
    position: absolute;
    right: 8px;
    top: 15px;
  }
  .home-icon {
    width: 31px;
    height: auto;
    display: block;
  }
  .el-menu--inline .el-menu-item {
    background: #263e56!important;
}
.el-table th, .el-table tr{
  background-color: #f0f9ff;
}
.el-table .cell{
  color: #323232;
}.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
.unit{
  color: #fff;font-size: 14px;font-weight: normal;
}
.el-menu--inline .el-menu-item {
    background: #263e56!important;
}
.el-menu-item:focus, .el-menu-item:hover{
  color: #ffffff!important
}

page/bigDataOut/html/index.html

@@ -0,0 +1,63 @@
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>质控管理</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <link rel="stylesheet" href="../../../css/element.css" />
    <link rel="stylesheet" href="../css/index.css"/>
    <link rel="stylesheet" href="../css/flex.css"/>
    <script src="../../../js/head.js"></script>
</head>
<body>
    <div id="app" style="height: 100%;" v-cloak>
        <el-container style="height: 100%;">
            <el-aside :width="navWidth" style="z-index: 7;">
                <el-menu background-color="#23344a" text-color="rgb(164, 177, 196)" active-text-color="#ffffff" :collapse="isCollapse" @select="handleSelect"
                  :default-openeds="['2']" :default-active="leftTabActive">
                  <el-menu-item index="1" :title="titleTip" style="padding-left: 20px">
                    <i class="el-icon-caret-left" v-show="!isCollapse"></i>
                    <i class="el-icon-caret-right" v-show="isCollapse"></i>
                    <span slot="title" style="color:#ffd04b">{{titleTip}}</span>
                  </el-menu-item>
                  <el-menu-item class="ellipsis" title="全文病历检索" index="2-0" style="padding-left: 52px"> 
                    全文病历检索</el-menu-item>
                  <el-menu-item class="ellipsis" title="医疗服务大数据分析"  index="2-1" style="padding-left: 52px"> 
                    医疗服务大数据分析</el-menu-item>
                  <el-menu-item class="ellipsis" title="医保费用支出分析"   index="2-2" style="padding-left: 52px">
                      医保费用支出分析</el-menu-item>
                  <el-menu-item class="ellipsis" title="居民健康管理大数据分析" index="2-3" style="padding-left: 52px">
                      居民健康管理大数据分析</el-menu-item>
                  <el-menu-item index="2-4" style="padding-left: 52px" title="医保控费分析" >
                      医保控费分析</el-menu-item>
                    </el-menu>
              </el-aside>
            <el-main style="height: 100%;overflow: hidden;"  v-loading="loading">
                <div class="history_tabList flex f_x_sb" >
                    <ul class="flex f_g_1">
                       <li class="flex f_y_c f_s_0" v-for="(item,index) in historyArr" :class="{active:activeIndex == index}" @click='setHistory(item)'>{{item.text}}<i v-if="index>0" class="el-icon-close" @click.stop="deleteHistory(index)"></i></li> 
                    </ul>
                    <el-dropdown class="close_all_route f_s_0"   @command="controlRouter">
                            <span class="el-dropdown-link">
                              <i class="el-icon-more hoverRed"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                              <!-- <el-dropdown-item command="1">关闭全部选项卡</el-dropdown-item> -->
                              <el-dropdown-item command="2">关闭其他选项卡</el-dropdown-item>
                            </el-dropdown-menu>
                          </el-dropdown>
                </div>
                <iframe v-for="(item,index) in historyArr"  v-show="activeIndex == index" :src="item.url" style="height:calc(100% - 87px);width: 100%; border: none;"></iframe>
            </el-main>
        </el-container>
    </div>
    <script src="../../../js/vue.js"></script>
    <script src="../../../js/element.js"></script>
    <script src="../../../component/common/event-bus.js"></script>
    <script src="../js/index.js"></script>
</body>
</html>

page/bigDataOut/js/index.js

@@ -0,0 +1,158 @@
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;
		},
	}
})