张雄 3 years ago
parent 5d491988ec
commit 9ddfa2f32f

@ -124,6 +124,7 @@ export default {
}, },
// //
handlerMyself() { handlerMyself() {
this.setHeaderType(4);
this.$router.push("/myself"); this.$router.push("/myself");
}, },
// //

@ -140,6 +140,7 @@ export default {
}, },
// //
handlerMyself() { handlerMyself() {
this.setHeaderType(4);
this.$router.push("/myself"); this.$router.push("/myself");
}, },
// //

@ -0,0 +1,255 @@
<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>
</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 {getCheZhuTime0528} from "@/api/home"
export default {
name: "iHeaderMyself",
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>

@ -11,6 +11,7 @@
<iHeader v-if="getHeaderType == 1" :style="headerStyle"></iHeader> <iHeader v-if="getHeaderType == 1" :style="headerStyle"></iHeader>
<iHeaderMa v-if="getHeaderType == 2"></iHeaderMa> <iHeaderMa v-if="getHeaderType == 2"></iHeaderMa>
<iHeaderBrand v-if="getHeaderType == 3"></iHeaderBrand> <iHeaderBrand v-if="getHeaderType == 3"></iHeaderBrand>
<iHeaderMyself v-if="getHeaderType == 4"></iHeaderMyself>
<div class="layout-body"> <div class="layout-body">
<vue-scroll> <vue-scroll>
<router-view v-if="isRouterAlive"></router-view> <router-view v-if="isRouterAlive"></router-view>

@ -11,6 +11,7 @@ import iSwitchBrand from "@/lycomponents/iSwitchBrand";
import iSwitchModel from "@/lycomponents/iSwitchModel"; import iSwitchModel from "@/lycomponents/iSwitchModel";
import iHeaderMa from "@/lycomponents/iHeaderMa" import iHeaderMa from "@/lycomponents/iHeaderMa"
import iHeaderBrand from "@/lycomponents/iHeaderBrand" import iHeaderBrand from "@/lycomponents/iHeaderBrand"
import iHeaderMyself from "@/lycomponents/iHeaderMyself";
export default { export default {
install(Vue) { install(Vue) {
Vue.mixin({ Vue.mixin({
@ -19,7 +20,8 @@ export default {
iSwitchBrand, iSwitchBrand,
iHeaderMa, iHeaderMa,
iSwitchModel, iSwitchModel,
iHeaderBrand iHeaderBrand,
iHeaderMyself
} }
}) })
} }

@ -127,10 +127,10 @@ export default {
} }
}, },
computed: { computed: {
...mapGetters(['getZoom', 'getLoading', 'getToken', 'getUser', 'getAccount', 'getCommTime', 'getCtime', 'getCtime2', 'getHeaderType', 'getBrand', 'getModel', 'getSComparison', 'getBComparison', 'getMComparison', 'getEComparison', 'getLevelBtn', 'getMenu', 'getChangeSTime']) ...mapGetters(['getZoom', 'getLoading', 'getToken', 'getUser', 'getAccount', 'getCommTime', 'getCtime', 'getCtime2', 'getHeaderType', 'getBrand', 'getModel', 'getSComparison', 'getBComparison', 'getMComparison', 'getEComparison', 'getLevelBtn', 'getMenu', 'getChangeSTime', 'getMcStatus'])
}, },
methods: { methods: {
...mapActions(["setZoom", 'setLoading', 'setToken', 'setUser', 'setAccount', 'setCommTime', 'setCtime', 'setCtime2', 'setHeaderType', 'setBrand', 'setModel', 'setSComparison', 'setBComparison', 'setMComparison', 'setEComparison', 'setLevelBtn', 'setMenu', 'setChangeSTime']), ...mapActions(["setZoom", 'setLoading', 'setToken', 'setUser', 'setAccount', 'setCommTime', 'setCtime', 'setCtime2', 'setHeaderType', 'setBrand', 'setModel', 'setSComparison', 'setBComparison', 'setMComparison', 'setEComparison', 'setLevelBtn', 'setMenu', 'setChangeSTime','setMcStatus']),
// 获取当前日期时间 // 获取当前日期时间
getDatetime() { getDatetime() {
let now = new Date(); let now = new Date();

@ -46,6 +46,9 @@ const actions = {
setSComparison: ({commit}, log) => { setSComparison: ({commit}, log) => {
commit('setSComparison', log) commit('setSComparison', log)
}, },
setMcStatus: ({commit}, log) => {
commit('setMcStatus', log)
},
setMComparison: ({commit}, log) => { setMComparison: ({commit}, log) => {
commit('setMComparison', log) commit('setMComparison', log)
}, },

@ -54,6 +54,9 @@ const getters = {
getMComparison(state) { getMComparison(state) {
return state.mComparison return state.mComparison
}, },
getMcStatus(state) {
return state.mcStatus
},
getEComparison(state) { getEComparison(state) {
return state.eComparison return state.eComparison
}, },

@ -75,6 +75,10 @@ const mutations = {
let str = JSON.stringify(log); let str = JSON.stringify(log);
sessionStorage.setItem('sComparison', str); sessionStorage.setItem('sComparison', str);
}, },
setMcStatus: (state, log) => {
state.mcStatus = log;
sessionStorage.setItem('mcStatus', log);
},
setChangeSTime: (state, log) => { setChangeSTime: (state, log) => {
state.changeSTime = log; state.changeSTime = log;
}, },

@ -23,6 +23,7 @@ const state = {
sComparison: JSON.parse(sessionStorage.getItem('sComparison')) || [], sComparison: JSON.parse(sessionStorage.getItem('sComparison')) || [],
changeSTime: 1, changeSTime: 1,
mComparison: JSON.parse(sessionStorage.getItem('mComparison')) || [], mComparison: JSON.parse(sessionStorage.getItem('mComparison')) || [],
mcStatus: sessionStorage.getItem('mcStatus') || false,
eComparison: JSON.parse(sessionStorage.getItem('eComparison')) || [], eComparison: JSON.parse(sessionStorage.getItem('eComparison')) || [],
levelBtn: JSON.parse(sessionStorage.getItem('levelBtn')) || [], levelBtn: JSON.parse(sessionStorage.getItem('levelBtn')) || [],
menu: giveMenu() || JSON.parse(sessionStorage.getItem('menu')) || [], menu: giveMenu() || JSON.parse(sessionStorage.getItem('menu')) || [],

@ -89,7 +89,7 @@
</vue-lazy-component> --> </vue-lazy-component> -->
<vue-lazy-component> <vue-lazy-component>
<keyMedia :brand="brand"></keyMedia> <keyMedia :brand="brand"></keyMedia>
<ketMediaStoken slot="skeleton"></ketMediaStoken> <keyMediaStoken slot="skeleton"></keyMediaStoken>
</vue-lazy-component> </vue-lazy-component>
<vue-lazy-component> <vue-lazy-component>
<popularwordCloud :brand="brand"></popularwordCloud> <popularwordCloud :brand="brand"></popularwordCloud>

@ -8,7 +8,7 @@
--> -->
<template> <template>
<div class="d-container"> <div class="d-container">
<marketingComparison v-if="hasData"></marketingComparison> <marketingComparison v-if="hasData == true"></marketingComparison>
<mcBeginCompare v-else></mcBeginCompare> <mcBeginCompare v-else></mcBeginCompare>
</div> </div>
</template> </template>
@ -28,7 +28,7 @@ export default {
} }
}, },
created() { created() {
this.hasData = this.getSComparison.length > 0 ? true : false; this.hasData = this.getMcStatus;
} }
} }
</script> </script>

@ -7,163 +7,171 @@
* @FilePath: /data-show/src/views/MarketingComparison/mcBeginCompare.vue * @FilePath: /data-show/src/views/MarketingComparison/mcBeginCompare.vue
--> -->
<template> <template>
<div class="d-container"> <div class="d-container">
<div class="mbc-outter"> <div class="mbc-outter">
<mcChooseModel ref="modelRef" @del="handlerDel"></mcChooseModel> <mcChooseModel :data="getSComparison" ref="modelRef" @del="handlerDel"></mcChooseModel>
<div class="mbc-inner"> <div class="mbc-inner">
<v-label-div title="车型推荐"> <v-label-div title="车型推荐"> </v-label-div>
</v-label-div> <div class="mbc-dd">
<div class="mbc-dd"> <ul class="mb-ul">
<ul class="mb-ul"> <li
<li class="mbc-d-item" :class="chooseArr.includes(item) ? 'liActive': ''" v-for="(item,index) in models" :key="index" @click="handlerModel(item)">{{item.seriesname}}</li> class="mbc-d-item"
</ul> :class="chooseArr.includes(item) ? 'liActive' : ''"
<div style="clear: both"></div> v-for="(item, index) in models"
</div> :key="index"
</div> @click="handlerModel(item)"
<div class="beCpm-footer" @click="handlerSubmit"> >
开始对比 {{ item.seriesname }}
</div> </li>
</ul>
<div style="clear: both"></div>
</div> </div>
</div>
<div class="beCpm-footer" @click="handlerSubmit"></div>
</div> </div>
</div>
</template> </template>
<script> <script>
import {getRecommendSeries} from "@/api/comm" import { getRecommendSeries } from "@/api/comm";
import mcChooseModel from "./mcChooseModel"; import mcChooseModel from "./mcChooseModel";
export default { export default {
name: "mcBeginCompare", name: "mcBeginCompare",
components: { components: {
mcChooseModel, mcChooseModel,
},
inject: ["reload"],
data() {
return {
form: {
token: "",
},
//
chooseArr: [null, null, null, null, null, null],
models: [],
};
},
created() {
this.form.token = this.getToken;
this.getData();
},
methods: {
//
handlerModel(row) {
for (let i = 0; i < this.chooseArr.length; i++) {
if (!this.chooseArr[i]) {
this.chooseArr[i] = row;
let arr = this.$refs.modelRef.list || [];
let obj = arr[i];
obj.brand = row.brandname;
obj.model = row.seriesname;
obj.isDel = true;
let filterArr = arr.filter((ele) => {
return ele.brand && ele.model;
});
this.setSComparison(filterArr);
return;
}
}
}, },
inject: ['reload'], //
data() { getData() {
return { let obj = Object.assign({}, this.form);
form: { getRecommendSeries(obj).then((res) => {
token: "" let data = res.data || [];
}, this.models = data;
// });
chooseArr: [null, null, null, null, null, null],
models: [
],
};
}, },
created() { //
this.form.token = this.getToken; handlerDel(n) {
this.getData() this.chooseArr[n] = null;
}, },
methods: { //
// handlerSubmit() {
handlerModel(row) { let arr = this.$refs.modelRef.list || [];
for(let i = 0; i < this.chooseArr.length; i++) { let filterArr = arr.filter((ele) => {
if(!this.chooseArr[i]) { return ele.brand && ele.model;
this.chooseArr[i] = row; });
let obj = this.$refs.modelRef.list[i] let str = JSON.stringify(filterArr);
obj.brand = row.brandname; let arr1 = JSON.parse(str);
obj.model = row.seriesname; if (arr1.length < 2) {
obj.isDel = true; this.$message.warning("至少2个车型进行对比");
return; return;
} }
} for (let i = 0; i < arr1.length; i++) {
if (!arr1[i].startTime || !arr1[i].endTime) {
}, this.$message.warning("请选择时间");
// return;
getData() {
let obj = Object.assign({}, this.form);
getRecommendSeries(obj).then(res => {
let data = res.data || [];
this.models = data;
})
},
//
handlerDel(n) {
this.chooseArr[n] = null;
},
//
handlerSubmit() {
let arr = this.$refs.modelRef.list || [];
let filterArr = arr.filter(ele => {
return ele.brand && ele.model
});
let str = JSON.stringify(filterArr);
let arr1 = JSON.parse(str);
if(arr1.length < 2) {
this.$message.warning('至少2个车型进行对比');
return;
}
for(let i = 0; i < arr1.length; i++) {
if(!arr1[i].startTime || !arr1[i].endTime) {
this.$message.warning('请选择时间');
return;
}
}
this.setSComparison(arr1);
this.reload()
} }
}
this.setSComparison(arr1);
this.setMcStatus(true);
this.reload();
}, },
},
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.mbc-outter { .mbc-outter {
width: 100%; width: 100%;
padding: 0px 16px 16px 16px; padding: 0px 16px 16px 16px;
} }
.mbc-inner { .mbc-inner {
width: 100%;
height: 488px;
border: 2px solid #0f2a4d;
margin-top: 16px;
.mbc-dd {
width: 100%; width: 100%;
height: 488px; height: calc(100% - 48px);
border: 2px solid #0f2a4d; .mb-ul {
margin-top: 16px; width: 100%;
.mbc-dd { height: 100%;
width: 100%; margin: 0;
height: calc(100% - 48px); padding: 0;
.mb-ul { list-style: none;
width: 100%; li {
height: 100%; float: left;
margin: 0; width: 295px;
padding: 0; height: 89px;
list-style: none; background-color: #0f2b47;
li { margin-left: 16px;
float: left; margin-top: 16px;
width: 295px; color: #fff;
height: 89px; text-align: center;
background-color: #0f2b47; border-radius: 2px;
margin-left: 16px; border: 1px solid transparent;
margin-top: 16px; line-height: 89px;
color: #fff; font-size: 20px;
text-align: center; font-weight: 500;
border-radius: 2px; cursor: pointer;
border: 1px solid transparent; &:hover {
line-height: 89px; border: 1px solid #0058e6;
font-size: 20px;
font-weight: 500;
cursor: pointer;
&:hover {
border: 1px solid #0058e6;
}
}
.liActive {
color: #0058e6;
border: 1px solid #0058e6;
}
} }
}
.liActive {
color: #0058e6;
border: 1px solid #0058e6;
}
} }
}
} }
.beCpm-footer { .beCpm-footer {
position: relative; position: relative;
width: 354px; width: 354px;
height: 64px; height: 64px;
background-image: url("../../assets/images/login/img_dlan_nor.png"); background-image: url("../../assets/images/login/img_dlan_nor.png");
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
bottom: 0px; bottom: 0px;
left: 50%; left: 50%;
transform: translate(-50%); transform: translate(-50%);
cursor: pointer; cursor: pointer;
color: #63aecc; color: #63aecc;
font-size: 24px; font-size: 24px;
text-align: center; text-align: center;
line-height: 64px; line-height: 64px;
margin-top: 16px; margin-top: 16px;
} }
</style> </style>

@ -161,13 +161,20 @@ export default {
}, },
created() { created() {
this.brand = this.getBrand.brandname || "奥迪"; this.brand = this.getBrand.brandname || "奥迪";
if(this.getSComparison == []) {
this.setMcStatus();
}
if (this.getChangeSTime) { if (this.getChangeSTime) {
const arr = [];
this.list.forEach((e) => { this.list.forEach((e) => {
e.startTime = this.getCtime.sStartTime; if(e.brand && e.model) {
e.endTime = this.getCtime.sEndTime; e.startTime = this.getCtime.sStartTime;
e.endTime = this.getCtime.sEndTime;
arr.push(e);
}
}); });
this.setSComparison(arr);
} }
this.modelData(); this.modelData();
}, },
methods: { methods: {
@ -208,6 +215,9 @@ export default {
let filterArr = this.list.filter((ele) => { let filterArr = this.list.filter((ele) => {
return ele.brand && ele.model && ele.startTime && ele.endTime; return ele.brand && ele.model && ele.startTime && ele.endTime;
}); });
if(filterArr.length === 0) {
this.setMcStatus(false);
}
this.$emit("del", n); this.$emit("del", n);
this.$emit("change", filterArr); this.$emit("change", filterArr);
}, },

@ -23,7 +23,7 @@
</div> </div>
<vue-lazy-component> <vue-lazy-component>
<mlTts :brand="brand" :model="model"></mlTts> <mlTts :brand="brand" :model="model"></mlTts>
<miTtsStoken slot="skeleton"></miTtsStoken> <mlttsStoken slot="skeleton"></mlttsStoken>
</vue-lazy-component> </vue-lazy-component>
</div> </div>
<div class="bdl-d2"> <div class="bdl-d2">
@ -119,7 +119,7 @@ import mlRearWingPropagationSituation from "./mlRearWingPropagationSituation";
import mlPopularwordCloud from "./mlPopularwordCloud"; import mlPopularwordCloud from "./mlPopularwordCloud";
// //
import mlBrandDataStoken from "./ml-brand-dataStoken"; import mlBrandDataStoken from "./ml-brand-dataStoken";
import mlTtsStoken from "./ml-ttsStoken"; import mlttsStoken from "./ml-ttsStoken";
import mlPopularEventsStoken from "./mlPopularEventsStoken"; import mlPopularEventsStoken from "./mlPopularEventsStoken";
import mlPopularEventsListStoken from "./mlPopularEventsListStoken"; import mlPopularEventsListStoken from "./mlPopularEventsListStoken";
import mlWeiboKolStoken from "./mlWeiboKolStoken"; import mlWeiboKolStoken from "./mlWeiboKolStoken";
@ -151,7 +151,7 @@ export default {
mlPopularwordCloud, // mlPopularwordCloud, //
// //
mlBrandDataStoken, // mlBrandDataStoken, //
mlTtsStoken, // mlttsStoken, //
mlPopularEventsStoken, // mlPopularEventsStoken, //
mlPopularEventsListStoken, // mlPopularEventsListStoken, //
mlWeiboKolStoken, // KOL mlWeiboKolStoken, // KOL

@ -8,7 +8,7 @@
--> -->
<template> <template>
<div class="km-outter" v-loading="load"> <div class="km-outter">
</div> </div>
</template> </template>

Loading…
Cancel
Save