/** * 顶部header */ import Vue from 'vue' Vue.component("screen-header", { template: ` <div :class="red?'head-title red-head':'head-title'"> <div class="head-title-label"> 北跨泾河-产发工程数字管理平台 </div> <div class="head-title-tab"> <div :class="nav==1?'head-nav active':'head-nav'" @click="pageJump(1,'index.html','index.html')">项目概况</div> <div :class="nav==2?'head-nav active':'head-nav'" @click="pageJump(2,'projectDetail.html','projectDetail.html')">项目详情</div> <div :class="nav==3?'head-nav active':'head-nav'" @click="pageJump(3,'projectSafety.html','projectSafety.html')">安全管理</div> <div :class="nav==4?'head-nav active':'head-nav'" @click="pageJump(4,'projectQuality.html','projectQuality.html')">质量管理</div> <div :class="nav==5?'head-nav active':'head-nav'" @click="pageJump(5,'projectProgress.html','projectProgress.html')">进度管理</div> <div :class="nav==6?'head-nav active':'head-nav'" @click="pageJump(6,'projectVideo.html','projectVideo.html')">视频管理</div> <div :class="nav==7?'head-nav active':'head-nav'" @click="pageJump(7)">工程管理</div> </div> <div class="head-title-select" @mouseleave="hideScreenUlSel1" v-if="localStorage1"> <div class="head-select"> <input type="text" :value="dept1" @click="showScreenUlSel1" placeholder="请选择公司" readonly> </div> <el-collapse-transition> <ul class="header-screen-ul" v-show="showSel1" ref="selectUl"> <li v-for="item in depts" @click="setScreenLiSel1(item)" :title="item.text" >{{item.text}}</li> </ul> </el-collapse-transition> </div> <div class="head-title-select" @mouseleave="hideScreenUlSel2" v-if="localStorage2"> <div class="head-select"> <input type="text" :value="dept2" @click="showScreenUlSel2" placeholder="请选择项目" readonly> </div> <el-collapse-transition> <ul class="header-screen-ul" v-show="showSel2" ref="selectUl"> <li v-for="item in data" @click="setScreenLiSel2(item)" :title="item.text">{{item.text}}</li> </ul> </el-collapse-transition> </div> <div class="head-title-date"> <div class="head-title-time"> <div class="head-title-date-con">{{date}}</div> <div class="head-title-time-con">{{time}}</div> </div> <div class="head-title-weather"> <img src="images/weather.png"> <span>晴</span> <span>11~25℃</span> </div> </div> </div> `, props: { nav:{ type:Number }, red:{ type:String }, item:{ type:Number }, }, data() { return { dept1:'', dept2:'', showSel1:false, showSel2:false, data:[], depts:[], timerID:undefined, time: '', date: '', week:'', selDept:'', localStorage1: JSON.parse(localStorage.getItem("data1")), localStorage2: JSON.parse(localStorage.getItem("data2")), } }, mounted(){ this.timerID = setInterval(this.updateTime, 1000); this.updateTime(); this.init() this.$api.dept.list().then(d=>{ this.depts=[{text:'产发集团',id:0},...(d?.data||[]).map(it=>{ it.text=it.deptName; it.id=it.deptId; return it; })] this.deptChange(); }); }, methods: { init(){ try{ this.localStorage1=JSON.parse(localStorage.getItem("data1")) this.localStorage2=JSON.parse(localStorage.getItem("data2")) }catch(e){ } if(!this.localStorage1){ this.localStorage1={ } } if(!this.localStorage2){ this.localStorage2={} } this.dept1=this.localStorage1?.text||''; this.dept2=this.localStorage2?.text||''; if(this.dept1){ this.loadProject(true); } }, deptChange(){ let tmps=this.depts.filter(d=>d.text==this.dept1); if(tmps.length>0){ this.$bus.$emit("deptChange",tmps[0]) } }, //页面条状 pageJump(n,url,itemurl){ if(n != this.nav){ if(this.localStorage1.type == 1){ if(url){ location.href = url }else{ this.$notify({ title: '提示', message: '页面开发中,敬请期待!', type: 'warning' }); } }else{ if(n==5){ location.href = url }else{ if(itemurl){ location.href = itemurl }else{ this.$notify({ title: '提示', message: '页面开发中,敬请期待!', type: 'warning' }); } } } } }, showScreenUlSel1(){ this.showSel1 = true }, showScreenUlSel2(){ this.showSel2 = true }, hideScreenUlSel1(){ this.showSel1 = false }, hideScreenUlSel2(){ this.showSel2 = false }, setScreenLiSel1(item){ localStorage.setItem("data1",JSON.stringify(item)) this.localStorage1=JSON.parse(localStorage.getItem("data1")) this.$emit('itemdata',item); this.showSel1 = false this.dept1=item.text; this.deptChange(); this.loadProject(); }, loadProject(init){ this.$api.project.findProjectByDept( this.localStorage1.id).then(d=>{ let objs=(d?.data||[]).map(it=>{ it.text=it.projectName; return it; }).filter(it=>+it.progressVisible==0); this.data=[{id:0,text:'所有项目'},...objs]; this.$bus.$emit("loadProjects",this.data); if(this.data.length>0){ this.setScreenLiSel2(this.data[0],init); }else{ this.setScreenLiSel2(null); } }); }, setScreenLiSel2(item,init){ if(item){ this.showSel2 = false; if(!init){ localStorage.setItem("data2",JSON.stringify(item)) this.localStorage2=JSON.parse(localStorage.getItem("data2")) this.$emit('itemdata',item); this.dept2=item.text; } this.$bus.$emit("projectChange",this.localStorage2); }else{ localStorage.removeItem("data2"); this.localStorage2={}; this.showSel2 = false; this.dept2=''; } }, //时间方法 updateTime(){ var cd = new Date(); this.time = this.zeroPadding(cd.getHours(), 2) + ':' + this.zeroPadding(cd.getMinutes(), 2) + ':' + this.zeroPadding(cd.getSeconds(), 2); this.date = this.zeroPadding(cd.getFullYear(), 4) + '年' + this.zeroPadding(cd.getMonth()+1, 2) + '月' + this.zeroPadding(cd.getDate(), 2)+'日'; }, zeroPadding(num, digit) { var zero = ''; for(var i = 0; i < digit; i++) { zero += '0'; } return (zero + num).slice(-digit); } }, watch:{ } })