carInsightSystem/src/views/SaleRank/index.vue

<template>
  <div class="d-container" >
      <div class="sr-outter">
          <div class="sr-top">
              <a-button type="primary" style="margin-right: 16px" @click="changeLight">{{isLight}}</a-button>
              <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: '',
                sType: 'Marketing'
            },
            brandList: [], //品牌列表
            brandOption: [],
            letters: [],
            seriesList: [], //车型列表
            specList: [], //级别列表
            priceList: [], //价格列表
            energyList: [], //能源列表
            chosenBrand: undefined,
            chosenSeries: undefined,
            //当前窗口//
            window: '',
            //抽屉
            visible: false,
            bodyStyle: {
                
            },
            //深色模式
            isLight: '深色模式'
        };
    },
    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;
            margin-left: 18px;
        }
    }
    .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>