jhbigscreen/src/components/header.js

/**
 * 顶部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=>{                
                this.data=(d?.data||[]).map(it=>{
                     it.text=it.projectName;
                     return it;  
                }).filter(it=>+it.progressVisible==0);
                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:{

    }

})