You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
290 lines
8.8 KiB
290 lines
8.8 KiB
|
|
<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="form.sTimeType" @change="handleChange" v-if="timeShow">
|
|
<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 show-time :disabled-date="disabledDate" style="margin-left: 0.5rem" :size="$vuiSize" valueFormat="YYYY-MM-DD HH:mm:ss" v-if="form.sTimeType == selVal && timeShow" @ok="handlerChangeTime">
|
|
<a-icon slot="suffixIcon" type="calendar" />
|
|
</a-range-picker>
|
|
|
|
</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>
|
|
<a @click="goLogin" class="s4" v-if="!this.getToken">登录</a>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { getTwoTime } from "@/api/comm";
|
|
import moment from "moment";
|
|
export default {
|
|
name: "iHeaderMa",
|
|
inject: ["reload"],
|
|
data() {
|
|
return {
|
|
selVal: 4,
|
|
clock: "",
|
|
sClock: "",
|
|
week: "",
|
|
intDt: null,
|
|
selTime: null,
|
|
selectPriceDate: "",
|
|
form: {
|
|
sTimeType: "",
|
|
sStartTime: "",
|
|
sEndTime: "",
|
|
},
|
|
selDatas: [],
|
|
//offsetDays: 86400000 * 30, //最多选择7天
|
|
timeShow: true
|
|
};
|
|
},
|
|
watch: {
|
|
$route: {
|
|
handler(val) {
|
|
if (val.path === "/eventDEC" || val.path === "/eventComparison" || val.path === "/industryDataExport") {
|
|
this.timeShow = false;
|
|
} else {
|
|
this.timeShow = true;
|
|
}
|
|
},
|
|
immediate: true,
|
|
},
|
|
},
|
|
created() {
|
|
this.form = Object.assign(this.form, this.getCtime2);
|
|
if(this.form.sStartTime && this.form.sEndTime) {
|
|
this.selTime = [this.form.sStartTime, this.form.sEndTime]
|
|
}
|
|
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() {
|
|
getTwoTime().then((res) => {
|
|
this.selDatas = res.data;
|
|
if (!this.form.sTimeType) {
|
|
this.form.sTimeType = this.selDatas[0].key;
|
|
this.setCtime2(this.form);
|
|
}
|
|
});
|
|
},
|
|
// 选择时间
|
|
handleChange() {
|
|
this.setCtime2(this.form);
|
|
if (this.form.sTimeType != 4) {
|
|
this.form.sStartTime = "";
|
|
this.form.sEndTime = "";
|
|
this.setCommTime({sTimeType: this.form.sTimeType}); //首页同步时间
|
|
this.selTime = null;
|
|
this.reload();
|
|
}
|
|
},
|
|
//选择开始时间/结束时间
|
|
calendarPriceRangeChange(date) {
|
|
this.selectPriceDate = date[0];
|
|
},
|
|
// 自定时间的时候
|
|
handlerChangeTime(val) {
|
|
this.form.sStartTime = val[0];
|
|
this.form.sEndTime = val[1];
|
|
this.selectPriceDate = "";
|
|
this.setCtime2(this.form);
|
|
this.reload();
|
|
},
|
|
// 点击个人中心
|
|
handlerMyself() {
|
|
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");
|
|
},
|
|
//根据选择的开始时间/结束时间，动态渲染要禁用的日期
|
|
disabledDate(current) {
|
|
return current > moment();
|
|
},
|
|
},
|
|
};
|
|
</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>
|