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.
231 lines
8.6 KiB
231 lines
8.6 KiB
<template>
|
|
<div class="d-container" >
|
|
<div class="sr-outter">
|
|
<div class="sr-top">
|
|
<!-- <a-select class="choose-brand" v-model="chosenBrand" placeholder="请选择品牌" :dropdownMatchSelectWidth="dd">
|
|
<div slot="dropdownRender" class="brand-list">
|
|
<vue-scroll>
|
|
<div class="brand-items" v-for="(item, index) in letters" :key="index">
|
|
<div class="left-letter">{{item}}</div>
|
|
<div class="right-letter">
|
|
<template v-for="(it, id) in brandList[index]">
|
|
<span class="right" :key="id">
|
|
<a-button type="primary" @click="onBrand(it.brandname)" v-if="it.firstword == item">{{it.brandname}}</a-button>
|
|
</span>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</vue-scroll>
|
|
</div>
|
|
</a-select> -->
|
|
<!-- <a-cascader class="choose-brand"
|
|
expandTrigger="hover"
|
|
:options="brandOption"
|
|
v-model="chosenBrand"
|
|
placeholder="请选择品牌"
|
|
@click="brandDrawer"
|
|
@change="handlerBrand(chosenBrand)">
|
|
</a-cascader> -->
|
|
<a-select class="choose-brand" v-model="chosenBrand" placeholder="请选择品牌" @dropdownVisibleChange="brandDrawer" :dropdownMatchSelectWidth="dd">
|
|
<div slot="dropdownRender"></div>
|
|
</a-select>
|
|
<a-select class="choose-series" :disabled="isLoading" v-model="chosenSeries" placeholder="请选择车型" @change="onSeries" allowClear>
|
|
<a-select-option v-for="(item,index) in seriesList" :value="item.name" :key="index">
|
|
{{item.name}}
|
|
</a-select-option>
|
|
</a-select>
|
|
<a-button type="primary" style="margin-left: 16px" @click="onSearch">查销量</a-button>
|
|
</div>
|
|
<div class="sr-content">
|
|
<div class="left-menu">
|
|
<a-menu mode="inline" :open-keys="openKeys" @click="handlerMenu" @openChange="onOpenChange" theme="dark">
|
|
<a-menu-item key="main">
|
|
<router-link to="/saleRank/main">汽车销量排行榜</router-link>
|
|
</a-menu-item>
|
|
<a-sub-menu title="按级别" key="sub1">
|
|
<a-menu-item key="aLevel">
|
|
<router-link to="/saleRank/aLevel">所有级别</router-link>
|
|
</a-menu-item>
|
|
<a-menu-item v-for="(item, index) in specList" :key="item.key">
|
|
<router-link :to="'/saleRank/level'+(index+1)">{{item.value}}</router-link>
|
|
</a-menu-item>
|
|
</a-sub-menu>
|
|
<a-sub-menu title="按价格" key="sub2">
|
|
<a-menu-item key="aPrice">
|
|
<router-link to="/saleRank/aPrice">所有价格</router-link>
|
|
</a-menu-item>
|
|
<a-menu-item v-for="(item) in priceList" :key="item.key">
|
|
<router-link :to="'/saleRank/price'+item.key">{{item.value}}</router-link>
|
|
</a-menu-item>
|
|
</a-sub-menu>
|
|
<a-sub-menu title="按能源" key="sub3">
|
|
<a-menu-item key="aEnergy">
|
|
<router-link to="/saleRank/aEnergy">所有能源</router-link>
|
|
</a-menu-item>
|
|
<a-menu-item v-for="(item) in energyList" :key="item.key * 10">
|
|
<router-link :to="'/saleRank/energy'+item.key">{{item.value}}</router-link>
|
|
</a-menu-item>
|
|
</a-sub-menu>
|
|
<a-menu-item key="brandSale">
|
|
<router-link to="/saleRank/brandSale">汽车品牌销量</router-link>
|
|
</a-menu-item>
|
|
<a-menu-item key="seriesSale">
|
|
<router-link to="/saleRank/seriesSale">车型销量</router-link>
|
|
</a-menu-item>
|
|
<a-menu-item key="citySale">
|
|
<router-link to="/saleRank/citySale">城市销量</router-link>
|
|
</a-menu-item>
|
|
</a-menu>
|
|
</div>
|
|
<div class="sr-view">
|
|
<vue-scroll>
|
|
<router-view></router-view>
|
|
</vue-scroll>
|
|
</div>
|
|
</div>
|
|
<!-- 选择品牌抽屉 -->
|
|
<a-drawer :bodyStyle="bodyStyle" :visible="visible" title="请选择品牌" @close="onClose">
|
|
<div class="drawer">
|
|
<a-anchor style="width: 15%;height: 100%" @click="anchorClick" :getContainer="()=>this.$refs.content" >
|
|
<a-anchor-link v-for="(item, index) in letters" :key="index" :href="`#${item}`" :title="item"></a-anchor-link>
|
|
</a-anchor>
|
|
<vue-scroll ref="vs">
|
|
<div class="drawer-right" ref="content">
|
|
<div v-for="(item, index) in brandList" :key="index">
|
|
<span :id="letters[index]" class="drawer-letter">{{letters[index]}}</span>
|
|
<div v-for="(it, id) in item" :key="id">
|
|
<a class="drawer-link" @click="drawerChooseBrand(it.label)">{{it.label}}</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</vue-scroll>
|
|
</div>
|
|
</a-drawer>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {getCheZhuCountTime} from "@/api/SaleRank";
|
|
import chineseCarSale from "./ChineseCarSale"
|
|
import tableEvent from "./tableEvent"
|
|
export default {
|
|
name: "saleRank",
|
|
inject: ['reload'],
|
|
components: {
|
|
chineseCarSale
|
|
},
|
|
data() {
|
|
return {
|
|
x: 0,
|
|
isLoading: false,
|
|
dd: false, //下拉菜单
|
|
//左侧菜单
|
|
rootSubmenuKeys:['sub1', 'sub2', 'sub3'],
|
|
openKeys: ['sub1'],
|
|
form: {
|
|
token: '',
|
|
sStartTime: '',
|
|
sEndTime: ''
|
|
},
|
|
brandList: [], //品牌列表
|
|
brandOption: [],
|
|
letters: [],
|
|
seriesList: [], //车型列表
|
|
specList: [], //级别列表
|
|
priceList: [], //价格列表
|
|
energyList: [], //能源列表
|
|
chosenBrand: undefined,
|
|
chosenSeries: undefined,
|
|
//当前窗口//
|
|
window: '',
|
|
//抽屉
|
|
visible: false,
|
|
bodyStyle: {
|
|
|
|
}
|
|
};
|
|
},
|
|
created() {
|
|
this.setHeaderType(4);
|
|
getCheZhuCountTime({token: this.getToken}).then(res => {
|
|
let data = res.data;
|
|
this.form.sStartTime = data.Data[0].Time + '-01';
|
|
this.form.sEndTime = data.Data[data.Data.length-1].Time + '-01'
|
|
})
|
|
this.initData();
|
|
},
|
|
methods: {
|
|
...tableEvent
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less">
|
|
.sr-outter {
|
|
position: relative;
|
|
padding: 0px 16px 16px 16px;
|
|
.sr-top {
|
|
float: right;
|
|
margin-right: 16px;
|
|
.choose-brand {
|
|
width: 240px;
|
|
}
|
|
.choose-series {
|
|
width: 240px;
|
|
}
|
|
}
|
|
.sr-content {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
margin-top: 8px;
|
|
.left-menu {
|
|
width: 352px;
|
|
padding: 16px;
|
|
};
|
|
.sr-view {
|
|
margin-top: 16px;
|
|
height: 773px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.brand-list {
|
|
color: white;
|
|
width: 600px;
|
|
height: 320px;
|
|
background: rgb(11, 25, 47);
|
|
.brand-items {
|
|
display: flex;
|
|
width: 100%;
|
|
.left-letter {
|
|
font-size: 28px;
|
|
// margin-left: 12px;
|
|
padding: 12px;
|
|
}
|
|
.right-letter {
|
|
padding: 12px;
|
|
}
|
|
}
|
|
}
|
|
.drawer {
|
|
display: flex;
|
|
height: 800px;
|
|
justify-content: flex-start;
|
|
.drawer-right {
|
|
margin-left: 30px;
|
|
height: 100%;
|
|
.drawer-letter {
|
|
font-size: 24px;
|
|
}
|
|
}
|
|
}
|
|
.drawer-letter {
|
|
color: #45B5F4;
|
|
}
|
|
.drawer-link {
|
|
color: #DDD;
|
|
}
|
|
</style> |