carInsightSystem/src/lycomponents/iHeader/index.vue

<template>
    <div class="iH-outter">
        <div class="iH-left">
            <a-dropdown placement="bottomLeft">
                <img class="iH-left-img1" src="../../assets/images/Index/ic_cd.png" />
                <a-menu slot="overlay" @click="handlerType">
                    <a-menu-item key="index">
                        <span>行业洞察</span>
                    </a-menu-item>
                    <a-menu-item key="brandInsight">
                        <span>品牌洞察</span>
                    </a-menu-item>
                    <a-menu-item key="modelInsight">
                        <span>车型洞察</span>
                    </a-menu-item>
                    <a-menu-item key="eventInsight">
                        <span>事件洞察</span>
                    </a-menu-item>
                    <a-menu-item key="marketingAnalysis">
                        <span>营销分析</span>
                    </a-menu-item>
                </a-menu>
            </a-dropdown>
            <span class="iH-left-s1">菜单</span>

            <a-select :default-value="1" :size="$vuiSize" style="width: 120px; margin-left: 40px; margin-right: 8px" v-model="sTimeType" @change="handleChange">
                <a-select-option :style="{ color: '#fff' }" v-for="item in selDatas" :value="item.key" :key="item.key">
                    {{ item.value }}
                </a-select-option>
            </a-select>
            <a-range-picker :size="$vuiSize" valueFormat="YYYY-MM-DD" v-if="sTimeType === selVal" @change="handlerChangeTime">
                <a-icon slot="suffixIcon" type="calendar" />
            </a-range-picker>
        </div>
        <div class="iH-center">
            <img src="../../assets/images/Index/img_toubuyi.png" width="100%" height="100%" />
        </div>
        <div class="iH-right">
            <span class="s1">{{ clock }}</span>
            <span class="s2">{{ sClock }}</span>
            <span class="s2">{{ week }}</span>
            <img class="m1" src="../../assets/images/Index/ic_ry.png" width="24px" height="24px" />
            <span class="s3">{{getUser.UserName}}</span>
            <a-dropdown placement="bottomRight">
                <a class="ant-dropdown-link">
                    <a-icon type="down" />
                </a>
                <a-menu slot="overlay">
                    <a-menu-item @click="handlerMyself">
                        <span>个人中心</span>
                    </a-menu-item>
                    <a-menu-item @click="layout">
                        <span>退出</span>
                    </a-menu-item>
                </a-menu>
            </a-dropdown>
        </div>
    </div>
</template>

<script>
import {getOneTime} from "@/api/comm"
export default {
    name: "iHeader",
    inject: ['reload'],
    data() {
        return {
            sTimeType: 1,
            selVal: '',
            clock: "",
            sClock: "",
            week: "",
            intDt: null,
            selDatas: [
               
            ],
        };
    },
    created() {
        this.getTime(this.getCommTime)
    },
    mounted() {
        this.intDt = self.setInterval(() => {
            this.getDatetime();
        }, 1000);
    },
    destroyed() {
        if (this.intDt) {
            self.clearInterval(this.intDt);
        }
    },
    methods: {
        handleChange(val) {
           this.setCommTime({sTimeType: val});
           if(this.sTimeType != this.selVal) {
               this.setCommTime({sStartTime: "",sEndTime: ""});
           }
           this.reload();
        },
        // 获取当前日期时间
        getDatetime() {
            let now = new Date();
            let weeks = new Array(
                "星期日",
                "星期一",
                "星期二",
                "星期三",
                "星期四",
                "星期五",
                "星期六"
            );
            let year = now.getFullYear();
            let month = now.getMonth() + 1;
            let day = now.getDate();
            let hh = now.getHours();
            let mm = now.getMinutes();
            let ss = now.getSeconds();
            let clock = year + "-";
            let sClock = "";
            let dayw = now.getDay();
            let week = weeks[dayw];
            if (month < 10) clock += "0";
            clock += month + "-";
            if (day < 10) clock += "0";
            clock += day + " ";
            if (hh < 10) sClock += "0";
            sClock += hh + ":";
            if (mm < 10) sClock += "0";
            sClock += mm + ":";
            if (ss < 10) sClock += "0";
            sClock += ss;
            this.clock = clock;
            this.sClock = sClock;
            this.week = week;
            return { clock: clock, sClock: sClock, week: week };
        },
        // 点击个人中心
        handlerMyself() {
            this.$router.push("/myself");
        },
        // 菜单
        handlerType(obj) {
            if(obj.key === 'marketingAnalysis') {
                this.setHeaderType(2)
            } else {
                 this.setHeaderType(1)
            }
          this.$router.push({path: `/${obj.key}`})
        },
        // 获取时间的选项
        getTime(commTime) {
            let obj = {sType: commTime.sType}
            getOneTime(obj).then(res => {
                this.selDatas = res.data;
                if(!this.getCommTime.sTimeType) {
                    this.sTimeType = this.selDatas[0].key;
                    this.setCommTime({sTimeType: this.sTimeType})
                } else {
                    this.sTimeType = this.getCommTime.sTimeType;
                } 
            })
        },
        // 自定时间的时候
        handlerChangeTime(val) {
            let obj = {
                sStartTime: val[0],
                sEndTime: val[1]
            }
            this.setCommTime(obj);
        },
        // 退出的方法
        layout() {
            this.setToken("");
            this.setUser({});
            this.$router.replace("/login");
        }
    },
};
</script>

<style lang="less" scoped>
.iH-outter {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    height: 90px;
    background: url("../../assets/images/Index/img_toubuer.png");
    .iH-left {
        display: flex;
        width: 572px;
        height: 60px;
        margin-left: 22px;
        justify-content: flex-start;
        align-items: center;
        flex-shrink: 0;
        .iH-left-img1 {
            width: 24px;
            height: 24px;
            cursor: pointer;
        }
        .iH-left-s1 {
            display: block;
            font-size: 14px;
            font-weight: bold;
            color: #ffffff;
            margin-left: 8px;
        }
    }
    .iH-center {
        position: absolute;
        width: 606px;
        height: 80px;
        top: 0px;
        left: 50%;
        transform: translate(-50%, 0);
    }
    .iH-right {
        position: absolute;
        display: flex;
        width: 436px;
        height: 60px;
        justify-content: flex-start;
        align-items: center;
        top: 0px;
        right: 19px;
        flex-shrink: 0;
        .s1 {
            display: inline-block;
            font-size: 16px;
            color: #ffffff;
        }
        .s2 {
            display: inline-block;
            font-size: 16px;
            color: #ffffff;
            margin-left: 24px;
        }
        .s3 {
            display: inline-block;
            font-size: 14px;
            color: #ffffff;
            margin-left: 8px;
        }
        .m1 {
            display: inline-block;
            margin-left: 80px;
            margin-right: 8px;
        }
    }
}
.ant-dropdown-link {
    color: #63aecc;
    margin-left: 11px;
    /deep/ .anticon svg {
        font-size: 20px !important;
        margin-top: 5px;
    }
}
</style>