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" class="selHead" 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%" />
        </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" />
            <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: 34,
            selVal: "",
            clock: "",
            sClock: "",
            week: "",
            intDt: null,
            selDatas: [],
        };
    },
    created() {
        this.getTime();
    },
    mounted() {
        this.intDt = self.setInterval(() => {
            let obj = this.getDatetime();
            this.clock = obj.clock;
            this.sClock = obj.sClock;
            this.week = obj.week;
        }, 1000);
    },
    destroyed() {
        if (this.intDt) {
            self.clearInterval(this.intDt);
        }
    },
    methods: {
        handleChange(val) {
            this.setCommTime({ sTimeType: val });
            this.reload();
        },
        // 点击个人中心
        handlerMyself() {
            this.$router.push("/myself");
        },
        // 菜单
        handlerType(obj) {
            if (obj.key === "marketingAnalysis") {
                this.setHeaderType(2);
            } else if(obj.key === 'brandInsight' || obj.key === 'modelInsight') {
                this.setHeaderType(3);
            } else {
                this.setHeaderType(1);
            }
            this.$router.push({ path: `/${obj.key}` });
        },
        // 获取时间的选项
        getTime() {
            getOneTime().then((res) => {
                this.selDatas = res.data;
                if (!this.getCommTime.sTimeType) {
                    this.sTimeType = this.selDatas[0].key;
                    this.setCommTime({ sTimeType: this.sTimeType });
                }
            });
        },
        // 退出的方法
        layout() {
            this.setToken("");
            this.setUser({});
            this.$router.replace("/login");
        },
    },
};
</script>

<style lang="less" scoped>
.iH-outter {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: auto;
    background-image: url("../../assets/images/Index/img_toubuer.png");
    background-repeat: no-repeat;
    background-size: cover;
    .iH-left {
        display: flex;
        height: 100%;
        width: 430px;
        margin-left: 16px;
        justify-content: flex-start;
        margin-top: 18px;
        width: 400px;
        .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;
            margin-top: 2px;
        }
    }
    .iH-center {
        width: 560px;
        height: auto;
    }
    .iH-right {
        display: flex;
        height: 100%;
        width: 430px;
        justify-content: flex-end;
        margin-right: 16px;
        margin-top: 18px;
        .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: 60px;
            margin-right: 8px;
            width: 24px;
            height: 24px;
        }
    }
}
.ant-dropdown-link {
    color: #63aecc;
    margin-left: 11px;
    /deep/ .anticon svg {
        font-size: 20px !important;
        margin-top: 0px;
    }
}
.selHead {
    width: 120px;
    margin-left: 40px;
    margin-right: 8px;
}
</style>