carInsightSystem/src/lycomponents/iHeaderMa/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" v-menu="'/brandInsight'">
                        <span>品牌洞察</span>
                    </a-menu-item>
                    <a-menu-item key="modelInsight" v-menu="'/modelInsight'">
                        <span>车型洞察</span>
                    </a-menu-item>
                    <a-menu-item key="eventInsight" v-menu="'/eventInsight'">
                        <span>事件洞察</span>
                    </a-menu-item>
                    <a-menu-item key="marketingAnalysis" v-menu="'/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="selVal" v-if="timeShow" @change="handlerSelect">
                <a-select-option :style="{ color: '#fff' }" v-for="item in selDatas" :value="item.key" :key="item.key">
                    {{ item.key }}
                </a-select-option>
            </a-select>
           
        </div>
        <div class="iH-center">
            <a @click="goHome">
            <img src="../../assets/images/Index/img_toubuyi.png" width="100%" />
            </a>
        </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" v-if="this.getToken">
                <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 {getCheZhuTime0528} from "@/api/home"
export default {
    name: "iHeaderMa",
    inject: ['reload'],
    data() {
        return {
            selVal: '',
            clock: "",
            sClock: "",
            week: "",
            intDt: null,
            timeShow: true,
            form: {
                sTimeType: 4,
                sStartTime: "",
                sEndTime: ""
            },
            selDatas: [
               
            ],
        };
    },
    //  watch: {
    //     $route: {
    //         handler(val) {
    //             if (val.path === "/mcIndex") {
    //                 this.timeShow = false;
    //             } else {
    //                 this.timeShow = true;
    //             }
    //         },
    //         immediate: true,
    //     },
    // },
    created() {
        this.getSelect()
    },
    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: {
        goHome() {
          this.setHeaderType(1);
          this.$router.push("/index");
        },
        // 获取选择时间的数据
        getSelect() {
          getCheZhuTime0528().then(res => {
            this.selDatas = res.data
            this.selVal = this.selDatas[0].key;
            this.form.sStartTime = this.selDatas[0].starttime;
            this.form.sEndTime = this.selDatas[0].endtime;
            this.setCtime(this.form);
          })
        },
        // 选择时间
        handlerSelect(key) {
          let n = this.selDatas.findIndex(ele => {
            return ele.key === key
          })
          let obj = this.selDatas[n];
          this.form.sStartTime = obj.starttime;
          this.form.sEndTime = obj.endtime;
          this.setCtime(this.form);
          this.setChangeSTime(1);
          this.reload();
        },
        // 点击个人中心
        handlerMyself() {
            this.setHeaderType(4);
            this.$router.push("/myself");
        },
        // 菜单
        handlerType(obj) {
            if (obj.key === "marketingAnalysis") {
                this.setHeaderType(2);
            } else if(obj.key === 'brandInsight' || obj.key === 'modelInsight' || obj.key === "eventInsight") {
                this.setHeaderType(3);
            } else {
                this.setHeaderType(1);
            }
          this.$router.push({path: `/${obj.key}`})
        },
        // 退出的方法
        layout() {
            this.setToken("");
            this.setUser({});
            this.setEComparison([]);
            this.setBComparison([]);
            this.setMComparison([]);
            this.setCtime({});
            this.setCtime2({});
            this.setCommTime({});
            this.setBrand({});
            this.setModel({});
            this.$router.replace("/login");
        }
    },
};
</script>

<style lang="less" scoped>
.iH-outter {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 80px;
    background-image: url("../../assets/images/Index/img_toubuer.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    .iH-left {
        display: flex;
        width: 657px;
        margin-left: 16px;
        justify-content: flex-start;
        margin-top: 16px;
        height: 32px;
        .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: 490px;
        height: auto;
    }
    .iH-right {
        display: flex;
        height: 32px;
        width: 657px;
        justify-content: flex-end;
        margin-right: 16px;
        margin-top: 16px;
        .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;
        }
        .s4 {
            display: inline-block;
            font-size: 16px;
            color: #ffffff;
            margin-right: 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>