parent
219fe5b410
commit
bead5ba6a6
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 2.2 MiB |
|
After Width: | Height: | Size: 42 KiB |
|
After Width: | Height: | Size: 4.0 MiB |
@ -0,0 +1,176 @@
|
||||
<template>
|
||||
<div class="box" @mouseover="handleMouseEnter" @mouseleave='handleMouseLeave'>
|
||||
<slot></slot>
|
||||
<div class="popover" >
|
||||
<div class="popover-left">
|
||||
<div class="title" v-if="title">{{title}}汽车品牌排名</div>
|
||||
<div>
|
||||
<vue-scroll>
|
||||
<div class="table">
|
||||
<div>
|
||||
<div class="table-row">排名</div>
|
||||
<div class="table-row" v-for="(el,ind) in brand.sort" :key="ind"
|
||||
:style="{color:el ==1?'#CC5B41':el ==2?'#CC7733':el == 3?'#CC9D12':''}">
|
||||
{{formatNum(el)}}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="table-row">品牌</div>
|
||||
<div class="table-row" v-for="(el,ind) in brand.name" :key="ind">
|
||||
{{el}}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="table-row">传播量</div>
|
||||
<div class="table-row" style="color:#0799FF;font-weight: 600;" v-for="(el,ind) in brand.num" :key="ind">
|
||||
{{el}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</vue-scroll>
|
||||
</div>
|
||||
</div>
|
||||
<div class="popover-right">
|
||||
<div class="title" v-if="title">{{title}}汽车车型传播排名</div>
|
||||
<div>
|
||||
<vue-scroll>
|
||||
<div class="table">
|
||||
<div>
|
||||
<div class="table-row">排名</div>
|
||||
<div class="table-row" v-for="(el,ind) in carseries.sort" :key="ind"
|
||||
:style="{color:el ==1?'#CC5B41':el ==2?'#CC7733':el == 3?'#CC9D12':''}">
|
||||
{{formatNum(el)}}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="table-row">车型</div>
|
||||
<div class="table-row" v-for="(el,ind) in carseries.name" :key="ind">
|
||||
{{el}}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="table-row">传播量</div>
|
||||
<div class="table-row" style="color:#0799FF;font-weight: 600;" v-for="(el,ind) in carseries.num" :key="ind">
|
||||
{{el}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</vue-scroll>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getChesQuDao } from "@/api/home";
|
||||
export default {
|
||||
props: {
|
||||
title: String,
|
||||
sQuDao: Number
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
brand: {
|
||||
sort: [],
|
||||
name: [],
|
||||
num: [],
|
||||
},
|
||||
carseries: {
|
||||
sort: [],
|
||||
name: [],
|
||||
num: [],
|
||||
},
|
||||
isBegin: false //处理防抖
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//匹配两位数自动向前补零
|
||||
formatNum(num) {
|
||||
return num < 10 ? "0" + num : num
|
||||
},
|
||||
handleMouseEnter(e) {
|
||||
if (!this.show && !this.isBegin) {
|
||||
this.isBegin = true
|
||||
getChesQuDao({ sQuDao: this.sQuDao, ...this.getCommTime }).then(res => {
|
||||
if (res.data.length > 0) {
|
||||
let info = res.data[0]
|
||||
for (let e in info) {
|
||||
if (e != 'key') {
|
||||
info[e].forEach((el, index) => {
|
||||
this[e].sort.push(index + 1);
|
||||
this[e].name.push(el.key);
|
||||
this[e].num.push(el.value);
|
||||
});
|
||||
}
|
||||
}
|
||||
this.show = true
|
||||
this.isBegin = false
|
||||
// console.log(JSON.stringify(this.brand))
|
||||
// console.log(JSON.stringify(this.carseries), 'carseries')
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
handleMouseLeave() {
|
||||
let clearArr = ['brand', 'carseries']
|
||||
for (let e in clearArr) {
|
||||
for (let i in this[clearArr[e]]) {
|
||||
this.$set(this[clearArr[e]], i, [])
|
||||
}
|
||||
}
|
||||
this.show = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.box{
|
||||
&:hover{
|
||||
.popover{
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
.popover {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 490px;
|
||||
background: rgba(15, 42, 77, 0.7);
|
||||
box-shadow: 0px 0px 10px 1px rgba(51, 115, 204, 0.5);
|
||||
border-radius: 2px;
|
||||
backdrop-filter: blur(5px);
|
||||
z-index: 99;
|
||||
box-sizing: border-box;
|
||||
padding: 10px 0 0;
|
||||
display: flex;
|
||||
color: #fff;
|
||||
display: none;
|
||||
.title {
|
||||
font-size: 18px;
|
||||
}
|
||||
.table {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
&-row {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
&-left {
|
||||
padding: 0 10px;
|
||||
border-right: #3373cc 1px solid;
|
||||
height: 100%;
|
||||
width: 45%;
|
||||
}
|
||||
&-right {
|
||||
padding: 0 10px;
|
||||
height: 100%;
|
||||
width: 55%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,203 @@
|
||||
<template>
|
||||
<div ref="table">
|
||||
<vue-scroll>
|
||||
<div class="table-common">
|
||||
<div v-for="(el,ind) in (type==0?tbData1:tbData2)" :key="ind" style="width:100%;padding-right:10px;">
|
||||
<div class="table-common-row" style="font-size:16px;justify-content: center;border:none;aspect-ratio:0;">{{el.title}}</div>
|
||||
<div class="table-common-row" v-for="(i,n) in el.list" :key="n" @click="pageHandle(i)" :class="[i.sort ==1?'first':i.sort ==2?'second':i.sort == 3?'third':'','default']">
|
||||
<div class="flex">
|
||||
<div class="round">{{formatNum(i.sort)}}</div>
|
||||
{{i.key}}
|
||||
</div>
|
||||
<div class="right-text">{{i.value}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</vue-scroll>
|
||||
<a-modal title="提示" :getContainer="()=>$refs.table" :visible="visible" @ok="handleOk" @cancel="handleCancel">
|
||||
<p>{{ ModalText }}</p>
|
||||
</a-modal>
|
||||
<!-- <div>
|
||||
<div class="table-row">品牌</div>
|
||||
<div class="table-row" v-for="(el,ind) in brand.name" :key="ind">
|
||||
{{el}}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="table-row">传播量</div>
|
||||
<div class="table-row" style="color:#0799FF;font-weight: 600;" v-for="(el,ind) in brand.num" :key="ind">
|
||||
{{el}}
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getBrandName,
|
||||
getUserSeriesName,
|
||||
getBrandOrSeriesLevel,
|
||||
} from "@/api/comm";
|
||||
export default {
|
||||
props: {
|
||||
tbData1: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [
|
||||
]
|
||||
}
|
||||
},
|
||||
tbData2: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [
|
||||
]
|
||||
}
|
||||
},
|
||||
type: Number
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
sQueryType: 1,
|
||||
},
|
||||
visible: false,
|
||||
ModalText: "",
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleCancel() {
|
||||
this.visible = false;
|
||||
},
|
||||
handleOk() {
|
||||
this.$router.push("/login");
|
||||
},
|
||||
//匹配两位数自动向前补零
|
||||
formatNum(num) {
|
||||
return num < 10 ? "0" + num : num
|
||||
},
|
||||
pageHandle(data) {
|
||||
if (!this.getToken) {
|
||||
this.visible = true;
|
||||
this.ModalText = "您还未登录，是否前往登录";
|
||||
return;
|
||||
}
|
||||
// if (this.getUser.Brand.indexOf(data[0].axisValueLabel) == -1) {
|
||||
// this.visible = true;
|
||||
// this.ModalText = "账号权限不足";
|
||||
// return;
|
||||
// }
|
||||
let ele = data;
|
||||
if (this.type === 1) {
|
||||
let model = ele.key;
|
||||
let obj = {
|
||||
token: this.getToken,
|
||||
sSeriesName: model,
|
||||
};
|
||||
getBrandOrSeriesLevel(obj).then(() => {
|
||||
getBrandName(obj).then((res) => {
|
||||
this.setModel({ name: model });
|
||||
this.setHeaderType(3);
|
||||
this.setBrand({ brandname: res.data });
|
||||
this.$router.push("/modelInsight");
|
||||
});
|
||||
})
|
||||
} else {
|
||||
let brand = ele.key;
|
||||
getBrandOrSeriesLevel({
|
||||
token: this.getToken,
|
||||
sBrand: brand,
|
||||
}).then(() => {
|
||||
this.getUserSeriesName(brand); //同步车型
|
||||
this.setBrand({ brandname: brand });
|
||||
this.setHeaderType(3);
|
||||
this.$router.push("/brandInsight");
|
||||
})
|
||||
}
|
||||
},
|
||||
// 获取车型
|
||||
getUserSeriesName(brandName) {
|
||||
this.form.token = this.getToken;
|
||||
this.form.sBrandName = brandName;
|
||||
getUserSeriesName(this.form).then((res) => {
|
||||
let data = res.data || [];
|
||||
this.models = data;
|
||||
this.chooseModel = this.models[0];
|
||||
this.setModel(this.chooseModel);
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.table-common {
|
||||
margin-top: 5px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.default{
|
||||
background: rgba(255,255,255,0.1);
|
||||
}
|
||||
&-row {
|
||||
margin-bottom: 10px;
|
||||
aspect-ratio: 175/49;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-right: 10px;
|
||||
border-left: 4px solid #fff;
|
||||
cursor: pointer;
|
||||
.round {
|
||||
width: 20%;
|
||||
aspect-ratio: 1/1;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 10px;
|
||||
}
|
||||
&:hover {
|
||||
background: rgba(243, 182, 0, 0.5);
|
||||
}
|
||||
}
|
||||
.first {
|
||||
background: rgba(255, 113, 0, 0.2);
|
||||
border-left: 4px solid #ff4c23;
|
||||
.round {
|
||||
background-color: #ff4c23;
|
||||
}
|
||||
.right-text{
|
||||
color: #ff4c23;
|
||||
}
|
||||
}
|
||||
.second {
|
||||
background: rgba(255, 113, 0, 0.2);
|
||||
border-left: 4px solid #ff7100;
|
||||
.round {
|
||||
background-color: #ff7100;
|
||||
}
|
||||
.right-text{
|
||||
color: #ff7100;
|
||||
}
|
||||
}
|
||||
.third {
|
||||
background: rgba(255, 113, 0, 0.2);
|
||||
border-left: 4px solid #f3b600;
|
||||
.round {
|
||||
background-color: #f3b600;
|
||||
}
|
||||
.right-text{
|
||||
color: #f3b600;
|
||||
}
|
||||
}
|
||||
}
|
||||
.flex {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<div class="my-tabs">
|
||||
<a-tabs :default-active-key="defaultKey" :activeKey="value" @change="callback" :tabBarStyle="{color:'#1BB6EC'}" size="small">
|
||||
<a-tab-pane :tab="el" v-for="(el,ind) in tabTitles" :key="ind+1">
|
||||
<slot></slot>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
props: {
|
||||
tabTitles: {
|
||||
type: Array,
|
||||
default() {
|
||||
return []
|
||||
}
|
||||
},
|
||||
defaultKey: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
value: {
|
||||
type: Number,
|
||||
default: 1
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
callback(e) {
|
||||
this.$emit('input', e)
|
||||
this.$emit('callback', e)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.ant-tabs-nav-scroll {
|
||||
height: 40px !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
.ant-tabs-bar {
|
||||
border: none !important;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.ant-tabs-nav {
|
||||
.ant-tabs-tab-active {
|
||||
color: #1bb6ec;
|
||||
}
|
||||
}
|
||||
.ant-tabs-tab {
|
||||
padding: 0 0px 5px 0 !important;
|
||||
margin-right: 10px !important;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
.ant-tabs {
|
||||
padding: 10px;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
@ -1,280 +1,286 @@
|
||||
|
||||
<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-item key="saleRank" v-menu="'/saleRank'">
|
||||
<span>销量排行</span>
|
||||
</a-menu-item>
|
||||
<a-menu-item key="specialAnalize" v-menu="'/specialAnalize'">
|
||||
<span>专项分析</span>
|
||||
</a-menu-item>
|
||||
<a-menu-item key="myBrand" v-menu="'/myBrand'">
|
||||
<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 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
|
||||
v-for="item in menu"
|
||||
:key="item.link.slice(1)"
|
||||
v-menu="item.link"
|
||||
>
|
||||
<span>{{ item.text }}</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>
|
||||
</div>
|
||||
<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="handleChatCar">
|
||||
<span>ChatCar</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"
|
||||
import { getCheZhuTime0528 } from "@/api/home";
|
||||
import LS from "cz-storage";
|
||||
export default {
|
||||
name: "iHeaderMa",
|
||||
inject: ['reload'],
|
||||
data() {
|
||||
return {
|
||||
selVal: '',
|
||||
clock: "",
|
||||
sClock: "",
|
||||
week: "",
|
||||
intDt: null,
|
||||
timeShow: true,
|
||||
form: {
|
||||
sTimeType: 4,
|
||||
sStartTime: "",
|
||||
sEndTime: ""
|
||||
},
|
||||
selDatas: [
|
||||
|
||||
],
|
||||
};
|
||||
name: "iHeaderMa",
|
||||
inject: ["reload"],
|
||||
data() {
|
||||
return {
|
||||
selVal: "",
|
||||
clock: "",
|
||||
sClock: "",
|
||||
week: "",
|
||||
intDt: null,
|
||||
timeShow: true,
|
||||
form: {
|
||||
sTimeType: 4,
|
||||
sStartTime: "",
|
||||
sEndTime: "",
|
||||
},
|
||||
selDatas: [],
|
||||
menu: [],
|
||||
};
|
||||
},
|
||||
// watch: {
|
||||
// $route: {
|
||||
// handler(val) {
|
||||
// if (val.path === "/mcIndex") {
|
||||
// this.timeShow = false;
|
||||
// } else {
|
||||
// this.timeShow = true;
|
||||
// }
|
||||
// },
|
||||
// immediate: true,
|
||||
// },
|
||||
// },
|
||||
created() {
|
||||
this.menu = this.getMenu;
|
||||
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: {
|
||||
handleChatCar() {
|
||||
window.open(
|
||||
`http://www.swsai.com/aspx/LoginWeb.aspx?action=sws_login&token=${this.getToken}`
|
||||
);
|
||||
},
|
||||
goHome() {
|
||||
this.setHeaderType(1);
|
||||
this.$router.push("/index");
|
||||
},
|
||||
// watch: {
|
||||
// $route: {
|
||||
// handler(val) {
|
||||
// if (val.path === "/mcIndex") {
|
||||
// this.timeShow = false;
|
||||
// } else {
|
||||
// this.timeShow = true;
|
||||
// }
|
||||
// },
|
||||
// immediate: true,
|
||||
// },
|
||||
// },
|
||||
created() {
|
||||
this.getSelect()
|
||||
// 获取选择时间的数据
|
||||
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);
|
||||
});
|
||||
},
|
||||
mounted() {
|
||||
this.intDt = self.setInterval(() => {
|
||||
let obj = this.getDatetime();
|
||||
this.clock = obj.clock;
|
||||
this.sClock = obj.sClock;
|
||||
this.week = obj.week;
|
||||
}, 1000);
|
||||
// 选择时间
|
||||
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();
|
||||
},
|
||||
destroyed() {
|
||||
if (this.intDt) {
|
||||
self.clearInterval(this.intDt);
|
||||
}
|
||||
// 点击个人中心
|
||||
handlerMyself() {
|
||||
this.setHeaderType(4);
|
||||
this.$router.push("/myself");
|
||||
},
|
||||
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" || obj.key === "myBrand") {
|
||||
this.setHeaderType(3);
|
||||
} else if (obj.key === "saleRank" || obj.key === "specialAnalize") {
|
||||
this.setHeaderType(4);
|
||||
} else {
|
||||
this.setHeaderType(1);
|
||||
}
|
||||
this.$router.push({path: `/${obj.key}`})
|
||||
},
|
||||
// 退出的方法
|
||||
layout() {
|
||||
LS.remove("token");
|
||||
LS.remove("menu");
|
||||
LS.remove("levelBtn");
|
||||
LS.remove("user");
|
||||
LS.remove("commTime");
|
||||
LS.remove("ctime");
|
||||
LS.remove("ctime2");
|
||||
LS.remove("headerType");
|
||||
LS.remove("brand");
|
||||
LS.remove("model");
|
||||
LS.remove("bComparison");
|
||||
LS.remove("bcStatus");
|
||||
LS.remove("scStatus");
|
||||
LS.remove("sComparison");
|
||||
LS.remove("mComparison");
|
||||
LS.remove("tComparison");
|
||||
LS.remove("mcStatus");
|
||||
LS.remove("specialGuid");
|
||||
this.$router.replace("/login");
|
||||
}
|
||||
// 菜单
|
||||
handlerType(obj) {
|
||||
if (obj.key === "marketingAnalysis") {
|
||||
this.setHeaderType(2);
|
||||
} else if (
|
||||
obj.key === "brandInsight" ||
|
||||
obj.key === "modelInsight" ||
|
||||
obj.key === "eventInsight" ||
|
||||
obj.key === "myBrand"
|
||||
) {
|
||||
this.setHeaderType(3);
|
||||
} else if (obj.key === "saleRank" || obj.key === "specialAnalize") {
|
||||
this.setHeaderType(4);
|
||||
} else {
|
||||
this.setHeaderType(1);
|
||||
}
|
||||
this.$router.push({ path: `/${obj.key}` });
|
||||
},
|
||||
// 退出的方法
|
||||
layout() {
|
||||
LS.remove("token");
|
||||
LS.remove("menu");
|
||||
LS.remove("levelBtn");
|
||||
LS.remove("user");
|
||||
LS.remove("commTime");
|
||||
LS.remove("ctime");
|
||||
LS.remove("ctime2");
|
||||
LS.remove("headerType");
|
||||
LS.remove("brand");
|
||||
LS.remove("model");
|
||||
LS.remove("bComparison");
|
||||
LS.remove("bcStatus");
|
||||
LS.remove("scStatus");
|
||||
LS.remove("sComparison");
|
||||
LS.remove("mComparison");
|
||||
LS.remove("tComparison");
|
||||
LS.remove("mcStatus");
|
||||
LS.remove("specialGuid");
|
||||
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;
|
||||
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;
|
||||
}
|
||||
height: 32px;
|
||||
width: 657px;
|
||||
justify-content: flex-end;
|
||||
margin-right: 16px;
|
||||
margin-top: 16px;
|
||||
.s1 {
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
color: #ffffff;
|
||||
}
|
||||
.iH-center {
|
||||
width: 490px;
|
||||
height: auto;
|
||||
.s2 {
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
color: #ffffff;
|
||||
margin-left: 24px;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
color: #63aecc;
|
||||
margin-left: 11px;
|
||||
/deep/ .anticon svg {
|
||||
font-size: 20px !important;
|
||||
margin-top: 0px;
|
||||
}
|
||||
}
|
||||
.selHead {
|
||||
width: 120px;
|
||||
margin-left: 40px;
|
||||
margin-right: 8px;
|
||||
width: 120px;
|
||||
margin-left: 40px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,274 +1,256 @@
|
||||
|
||||
<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-item key="saleRank" v-menu="'/saleRank'">
|
||||
<span>销量排行</span>
|
||||
</a-menu-item>
|
||||
<a-menu-item key="specialAnalize" v-menu="'/specialAnalize'">
|
||||
<span>专项分析</span>
|
||||
</a-menu-item>
|
||||
<a-menu-item key="myBrand" v-menu="'/myBrand'">
|
||||
<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>
|
||||
</div>
|
||||
<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
|
||||
v-for="item in menu"
|
||||
:key="item.link.slice(1)"
|
||||
v-menu="item.link"
|
||||
>
|
||||
<span>{{ item.text }}</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="handleChatCar">
|
||||
<span>ChatCar</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"
|
||||
import { getCheZhuTime0528 } from "@/api/home";
|
||||
import LS from "cz-storage";
|
||||
export default {
|
||||
name: "iHeaderMyself",
|
||||
inject: ['reload'],
|
||||
data() {
|
||||
return {
|
||||
selVal: '',
|
||||
clock: "",
|
||||
sClock: "",
|
||||
week: "",
|
||||
intDt: null,
|
||||
timeShow: true,
|
||||
form: {
|
||||
sTimeType: 4,
|
||||
sStartTime: "",
|
||||
sEndTime: ""
|
||||
},
|
||||
selDatas: [
|
||||
|
||||
],
|
||||
};
|
||||
name: "iHeaderMyself",
|
||||
inject: ["reload"],
|
||||
data() {
|
||||
return {
|
||||
selVal: "",
|
||||
clock: "",
|
||||
sClock: "",
|
||||
week: "",
|
||||
intDt: null,
|
||||
timeShow: true,
|
||||
form: {
|
||||
sTimeType: 4,
|
||||
sStartTime: "",
|
||||
sEndTime: "",
|
||||
},
|
||||
selDatas: [],
|
||||
menu: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.menu = this.getMenu;
|
||||
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: {
|
||||
handleChatCar() {
|
||||
window.open(
|
||||
`http://www.swsai.com/aspx/LoginWeb.aspx?action=sws_login&token=${this.getToken}`
|
||||
);
|
||||
},
|
||||
goHome() {
|
||||
this.setHeaderType(1);
|
||||
this.$router.push("/index");
|
||||
},
|
||||
// watch: {
|
||||
// $route: {
|
||||
// handler(val) {
|
||||
// if (val.path === "/mcIndex") {
|
||||
// this.timeShow = false;
|
||||
// } else {
|
||||
// this.timeShow = true;
|
||||
// }
|
||||
// },
|
||||
// immediate: true,
|
||||
// },
|
||||
// },
|
||||
created() {
|
||||
this.getSelect()
|
||||
// 获取选择时间的数据
|
||||
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);
|
||||
});
|
||||
},
|
||||
mounted() {
|
||||
this.intDt = self.setInterval(() => {
|
||||
let obj = this.getDatetime();
|
||||
this.clock = obj.clock;
|
||||
this.sClock = obj.sClock;
|
||||
this.week = obj.week;
|
||||
}, 1000);
|
||||
// 选择时间
|
||||
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();
|
||||
},
|
||||
destroyed() {
|
||||
if (this.intDt) {
|
||||
self.clearInterval(this.intDt);
|
||||
}
|
||||
// 点击个人中心
|
||||
handlerMyself() {
|
||||
this.setHeaderType(4);
|
||||
this.$router.push("/myself");
|
||||
},
|
||||
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" || obj.key === "myBrand") {
|
||||
this.setHeaderType(3);
|
||||
} else if (obj.key === "saleRank" || obj.key === "specialAnalize") {
|
||||
this.setHeaderType(4);
|
||||
} else {
|
||||
this.setHeaderType(1);
|
||||
}
|
||||
this.$router.push({path: `/${obj.key}`})
|
||||
},
|
||||
// 退出的方法
|
||||
layout() {
|
||||
LS.remove("token");
|
||||
LS.remove("menu");
|
||||
LS.remove("levelBtn");
|
||||
LS.remove("user");
|
||||
LS.remove("commTime");
|
||||
LS.remove("ctime");
|
||||
LS.remove("ctime2");
|
||||
LS.remove("headerType");
|
||||
LS.remove("brand");
|
||||
LS.remove("model");
|
||||
LS.remove("bComparison");
|
||||
LS.remove("bcStatus");
|
||||
LS.remove("scStatus");
|
||||
LS.remove("sComparison");
|
||||
LS.remove("mComparison");
|
||||
LS.remove("tComparison");
|
||||
LS.remove("mcStatus");
|
||||
LS.remove("specialGuid");
|
||||
this.$router.replace("/login");
|
||||
}
|
||||
// 菜单
|
||||
handlerType(obj) {
|
||||
if (obj.key === "marketingAnalysis") {
|
||||
this.setHeaderType(2);
|
||||
} else if (
|
||||
obj.key === "brandInsight" ||
|
||||
obj.key === "modelInsight" ||
|
||||
obj.key === "eventInsight" ||
|
||||
obj.key === "myBrand"
|
||||
) {
|
||||
this.setHeaderType(3);
|
||||
} else if (obj.key === "saleRank" || obj.key === "specialAnalize") {
|
||||
this.setHeaderType(4);
|
||||
} else {
|
||||
this.setHeaderType(1);
|
||||
}
|
||||
this.$router.push({ path: `/${obj.key}` });
|
||||
},
|
||||
// 退出的方法
|
||||
layout() {
|
||||
LS.remove("token");
|
||||
LS.remove("menu");
|
||||
LS.remove("levelBtn");
|
||||
LS.remove("user");
|
||||
LS.remove("commTime");
|
||||
LS.remove("ctime");
|
||||
LS.remove("ctime2");
|
||||
LS.remove("headerType");
|
||||
LS.remove("brand");
|
||||
LS.remove("model");
|
||||
LS.remove("bComparison");
|
||||
LS.remove("bcStatus");
|
||||
LS.remove("scStatus");
|
||||
LS.remove("sComparison");
|
||||
LS.remove("mComparison");
|
||||
LS.remove("tComparison");
|
||||
LS.remove("mcStatus");
|
||||
LS.remove("specialGuid");
|
||||
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;
|
||||
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;
|
||||
}
|
||||
height: 32px;
|
||||
width: 657px;
|
||||
justify-content: flex-end;
|
||||
margin-right: 16px;
|
||||
margin-top: 16px;
|
||||
.s1 {
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
color: #ffffff;
|
||||
}
|
||||
.iH-center {
|
||||
width: 490px;
|
||||
height: auto;
|
||||
.s2 {
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
color: #ffffff;
|
||||
margin-left: 24px;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
color: #63aecc;
|
||||
margin-left: 11px;
|
||||
/deep/ .anticon svg {
|
||||
font-size: 20px !important;
|
||||
margin-top: 0px;
|
||||
}
|
||||
}
|
||||
.selHead {
|
||||
width: 120px;
|
||||
margin-left: 40px;
|
||||
margin-right: 8px;
|
||||
width: 120px;
|
||||
margin-left: 40px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<div class="level-row" @click="handle">
|
||||
<div class="left">
|
||||
<div class="num" :class="[data.num==1?'red':data.num==2?'yellow':data.num ==3?'green':'']">
|
||||
{{formatNum(data.num)}}
|
||||
</div>
|
||||
<span>{{data.key}}</span>
|
||||
</div>
|
||||
<div class="right">{{data.value}}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handle(){
|
||||
this.$emit('getData',this.data)
|
||||
},
|
||||
//匹配两位数自动向前补零
|
||||
formatNum(num) {
|
||||
return num < 10 ? "0" + num : num
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.level-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
.right{
|
||||
color: #0799FF;
|
||||
}
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
.num {
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin-right: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.red{
|
||||
background:#CC5B41;
|
||||
}
|
||||
.yellow{
|
||||
background: #CC9D12;
|
||||
}
|
||||
.green{
|
||||
background:#54BF93;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<div class="level-row-hot">
|
||||
<div>
|
||||
<div class="left">
|
||||
{{formatNum(data.num)}}
|
||||
<span>{{data.brand}}</span>
|
||||
</div>
|
||||
<div class="right">{{data.salescount}}</div>
|
||||
</div>
|
||||
<div>
|
||||
<a-progress :showInfo="false" :stroke-color="{
|
||||
'0%': '#2B9BFF',
|
||||
'100%': '#FFC600',
|
||||
}" :percent="Number(data.percentage)" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//匹配两位数自动向前补零
|
||||
formatNum(num) {
|
||||
return num < 10 ? "0" + num : num
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.level-row-hot {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 12px;
|
||||
margin-bottom: 6px;
|
||||
& > div {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
span {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.right{
|
||||
color: #63AECC;
|
||||
}
|
||||
.ant-progress{
|
||||
line-height: 0.5;
|
||||
}
|
||||
.ant-progress-inner{
|
||||
background-color: rgba(255,255,255,0.2);
|
||||
}
|
||||
.ant-progress-bg{
|
||||
height: 3px !important;
|
||||
}
|
||||
.ant-progress-show-info .ant-progress-outer{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue