From 5649e954e68955c8565e4fbbd90e01ff7ebc3ae3 Mon Sep 17 00:00:00 2001
From: zx <604444282@qq.com>
Date: Thu, 17 Feb 2022 17:02:39 +0800
Subject: [PATCH] zx

---
 src/api/SaleRank/index.js                     | 118 +++++++++
 src/api/comm/index.js                         |  51 ++++
 src/lycomponents/iHeader/index.vue            |   8 +-
 src/lycomponents/iHeaderBrand/index.vue       |   6 +-
 src/lycomponents/iHeaderMa/index.vue          |   5 +
 src/lycomponents/iHeaderMyself/index.vue      |   5 +
 src/permission.js                             |   2 +-
 src/router/index.js                           |  44 ++++
 src/views/Login/loginForm/index.vue           |   7 +
 src/views/SaleRank/AllEnergy/index.vue        | 112 +++++++++
 .../AllEnergy/v-ranking-kmd/index.vue         | 231 ++++++++++++++++++
 src/views/SaleRank/AllLevel/index.vue         | 112 +++++++++
 .../SaleRank/AllLevel/v-ranking-kmd/index.vue | 231 ++++++++++++++++++
 src/views/SaleRank/AllPrice/index.vue         | 112 +++++++++
 .../SaleRank/AllPrice/v-ranking-kmd/index.vue | 231 ++++++++++++++++++
 src/views/SaleRank/BrandSale/index.vue        |  52 ++++
 .../ChineseCarSale/carBrandSale/index.vue     |  66 +++++
 .../ChineseCarSale/carBrandSale/opt.js        | 111 +++++++++
 .../ChineseCarSale/carLevelSale/index.vue     |  66 +++++
 .../ChineseCarSale/carLevelSale/opt.js        | 111 +++++++++
 .../ChineseCarSale/carSeriesSale/index.vue    |  66 +++++
 .../ChineseCarSale/carSeriesSale/opt.js       | 111 +++++++++
 src/views/SaleRank/ChineseCarSale/index.vue   |  39 +++
 .../ChineseCarSale/zgCarSale/index.vue        |  65 +++++
 .../SaleRank/ChineseCarSale/zgCarSale/opt.js  | 111 +++++++++
 src/views/SaleRank/CitySale/index.vue         |  30 +++
 src/views/SaleRank/HistorySale/index.vue      | 169 +++++++++++++
 src/views/SaleRank/SeriesSale/index.vue       |  30 +++
 src/views/SaleRank/index.vue                  | 174 +++++++++++++
 src/views/SaleRank/tableEvent.js              |  47 ++++
 30 files changed, 2520 insertions(+), 3 deletions(-)
 create mode 100644 src/api/SaleRank/index.js
 create mode 100644 src/views/SaleRank/AllEnergy/index.vue
 create mode 100644 src/views/SaleRank/AllEnergy/v-ranking-kmd/index.vue
 create mode 100644 src/views/SaleRank/AllLevel/index.vue
 create mode 100644 src/views/SaleRank/AllLevel/v-ranking-kmd/index.vue
 create mode 100644 src/views/SaleRank/AllPrice/index.vue
 create mode 100644 src/views/SaleRank/AllPrice/v-ranking-kmd/index.vue
 create mode 100644 src/views/SaleRank/BrandSale/index.vue
 create mode 100644 src/views/SaleRank/ChineseCarSale/carBrandSale/index.vue
 create mode 100644 src/views/SaleRank/ChineseCarSale/carBrandSale/opt.js
 create mode 100644 src/views/SaleRank/ChineseCarSale/carLevelSale/index.vue
 create mode 100644 src/views/SaleRank/ChineseCarSale/carLevelSale/opt.js
 create mode 100644 src/views/SaleRank/ChineseCarSale/carSeriesSale/index.vue
 create mode 100644 src/views/SaleRank/ChineseCarSale/carSeriesSale/opt.js
 create mode 100644 src/views/SaleRank/ChineseCarSale/index.vue
 create mode 100644 src/views/SaleRank/ChineseCarSale/zgCarSale/index.vue
 create mode 100644 src/views/SaleRank/ChineseCarSale/zgCarSale/opt.js
 create mode 100644 src/views/SaleRank/CitySale/index.vue
 create mode 100644 src/views/SaleRank/HistorySale/index.vue
 create mode 100644 src/views/SaleRank/SeriesSale/index.vue
 create mode 100644 src/views/SaleRank/index.vue
 create mode 100644 src/views/SaleRank/tableEvent.js

diff --git a/src/api/SaleRank/index.js b/src/api/SaleRank/index.js
new file mode 100644
index 0000000..e00e9ab
--- /dev/null
+++ b/src/api/SaleRank/index.js
@@ -0,0 +1,118 @@
+import httpService from "@/request"
+
+// 首页-中国汽车销量趋势图
+export function getCheZhuCountTime(params) {
+    let obj =  Object.assign({action: 'getCheZhuCountTime', sType: 'Marketing'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+
+// 首页-汽车品牌销量排行榜
+export function getCheZhuBrandCount(params) {
+    let obj =  Object.assign({action: 'getCheZhuBrandCount', sType: 'Marketing'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+
+// 首页-各级别车型销量
+export function getCheZhuSpecCount(params) {
+    let obj =  Object.assign({action: 'getCheZhuSpecCount', sType: 'Marketing'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+
+// 首页-车型销量排行榜
+export function getCheZhuCarSeriesCount(params) {
+    let obj =  Object.assign({action: 'getCheZhuCarSeriesCount', sType: 'Marketing'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+
+// 历史-历史销量
+export function getCheZhuCarSalesCompared(params) {
+    let obj =  Object.assign({action: 'getCheZhuCarSalesCompared', sType: 'Marketing'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+
+// 按级别-汽车级别销售排行榜
+export function getCheZhuCarSpecidRankingAll(params) {
+    let obj =  Object.assign({action: 'getCheZhuCarSpecidRankingAll', sType: 'Marketing'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+
+// 按价格-汽车价格销售排行榜
+export function getCheZhuCarPriceRankingAll(params) {
+    let obj =  Object.assign({action: 'getCheZhuCarPriceRankingAll', sType: 'Marketing'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+
+// 按能源-各汽车能源类型销售排行榜
+export function getCheZhuCarEnergyRankingAll(params) {
+    let obj =  Object.assign({action: 'getCheZhuCarEnergyRankingAll', sType: 'Marketing'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+
+// 汽车品牌销量-汽车品牌销量排行榜列表
+export function getCheZhuCarBrandRanking(params) {
+    let obj =  Object.assign({action: 'getCheZhuCarBrandRanking', sType: 'Marketing'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
\ No newline at end of file
diff --git a/src/api/comm/index.js b/src/api/comm/index.js
index 5121146..384060e 100644
--- a/src/api/comm/index.js
+++ b/src/api/comm/index.js
@@ -181,3 +181,54 @@ export function getQueryType(params) {
         }
     })
 }
+
+//-销量-//
+// 获取汽车级别
+export function getSpec(params) {
+    let obj =  Object.assign({action: 'getSpec'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+// 获取汽车价格
+export function getPrice(params) {
+    let obj =  Object.assign({action: 'getPrice'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+// 获取汽车能源
+export function getEnergy(params) {
+    let obj =  Object.assign({action: 'getEnergy'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+// 获取品牌性质
+export function getBrandType(params) {
+    let obj =  Object.assign({action: 'getBrandType'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+/////////
diff --git a/src/lycomponents/iHeader/index.vue b/src/lycomponents/iHeader/index.vue
index 9bef3b8..4f163b2 100644
--- a/src/lycomponents/iHeader/index.vue
+++ b/src/lycomponents/iHeader/index.vue
@@ -20,6 +20,9 @@
                     <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>
             </a-dropdown>
             <span class="iH-left-s1">菜单</span>
@@ -141,7 +144,10 @@ export default {
                 obj.key === "eventInsight"
             ) {
                 this.setHeaderType(3);
-            } else {
+            } else if (obj.key === "saleRank") {
+                this.setHeaderType(4);
+            }
+              else {
                 this.setHeaderType(1);
             }
             this.$router.push({ path: `/${obj.key}` });
diff --git a/src/lycomponents/iHeaderBrand/index.vue b/src/lycomponents/iHeaderBrand/index.vue
index 8b021c2..e66ae4e 100644
--- a/src/lycomponents/iHeaderBrand/index.vue
+++ b/src/lycomponents/iHeaderBrand/index.vue
@@ -20,6 +20,9 @@
                     <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>
             </a-dropdown>
             <span class="iH-left-s1">菜单</span>
@@ -182,7 +185,8 @@ export default {
                 obj.key === "eventInsight"
             ) {
                 this.setHeaderType(3);
-
+            } else if (obj.key === "saleRank") {
+                this.setHeaderType(4);
             } else {
                 this.setHeaderType(1);
             }
diff --git a/src/lycomponents/iHeaderMa/index.vue b/src/lycomponents/iHeaderMa/index.vue
index 0ac78fe..04461a0 100644
--- a/src/lycomponents/iHeaderMa/index.vue
+++ b/src/lycomponents/iHeaderMa/index.vue
@@ -20,6 +20,9 @@
                     <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>
             </a-dropdown>
             <span class="iH-left-s1">菜单</span>
@@ -149,6 +152,8 @@ export default {
                 this.setHeaderType(2);
             } else if(obj.key === 'brandInsight' || obj.key === 'modelInsight' || obj.key === "eventInsight") {
                 this.setHeaderType(3);
+            } else if (obj.key === "saleRank") {
+                this.setHeaderType(4);
             } else {
                 this.setHeaderType(1);
             }
diff --git a/src/lycomponents/iHeaderMyself/index.vue b/src/lycomponents/iHeaderMyself/index.vue
index 315006d..41ff23a 100644
--- a/src/lycomponents/iHeaderMyself/index.vue
+++ b/src/lycomponents/iHeaderMyself/index.vue
@@ -20,6 +20,9 @@
                     <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>
             </a-dropdown>
             <span class="iH-left-s1">菜单</span>
@@ -143,6 +146,8 @@ export default {
                 this.setHeaderType(2);
             } else if(obj.key === 'brandInsight' || obj.key === 'modelInsight' || obj.key === "eventInsight") {
                 this.setHeaderType(3);
+            } else if (obj.key === "saleRank") {
+                this.setHeaderType(4);
             } else {
                 this.setHeaderType(1);
             }
diff --git a/src/permission.js b/src/permission.js
index a1673ed..04c4f05 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -29,7 +29,7 @@ router.afterEach(() => {
 // 检查菜单权限
 function checkMenu(path, next) {
     let menuStr = store.getters.getMenu || [];
-    let arr = ['/modelInsight', '/eventInsight', '/marketingAnalysis'];
+    let arr = ['/modelInsight', '/eventInsight', '/marketingAnalysis', '/saleRank'];
     let n = menuStr.findIndex(ele => ele.link === path);
     if(arr.includes(path) && n === -1) next('/index')
     else next()
diff --git a/src/router/index.js b/src/router/index.js
index 35a206e..4374818 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -37,6 +37,8 @@ import ModelEventDetails from "@/views/ModelEventDetails"
 import ModelWeiboDetails from "@/views/ModelWeiboDetails"
 import ModelForumDetails from "@/views/ModelForumDetails"
 import ModelComparison from "@/views/ModelComparison"
+import SaleRank from "@/views/SaleRank"
+// 销量排行
 import ThemeAnalize from "@/views/ThemeAnalize"
 import ThemeData from "@/views/ThemeData"
 import ThemeBoard from "@/views/ThemeBoard"
@@ -179,6 +181,48 @@ const router = [
                 desc: "营销对比",
                 component: mcIndex
             },
+            {
+                path: '/saleRank',
+                name: "saleRank",
+                desc: "销量排行",
+                redirect: 'saleRank/main',
+                component: SaleRank,
+                children: [
+                    {
+                        path: 'main', //汽车销量排行榜
+                        component: resolve => require(['@/views/SaleRank/ChineseCarSale'], resolve),
+                    },
+                    {
+                        path: 'history', //历史销量
+                        component: resolve => require(['@/views/SaleRank/HistorySale'], resolve),
+                    },
+                    {
+                        path: 'brandSale', //汽车品牌销量
+                        component: resolve => require(['@/views/SaleRank/BrandSale'], resolve),
+                    },
+                    {
+                        path: 'seriesSale', //车型销量
+                        component: resolve => require(['@/views/SaleRank/SeriesSale'], resolve),
+                    },
+                    {
+                        path: 'citySale', //城市销量
+                        component: resolve => require(['@/views/SaleRank/CitySale'], resolve),
+                    },
+                    ////
+                    {
+                        path: 'aLevel', //所有级别
+                        component: resolve => require(['@/views/SaleRank/AllLevel/index.vue'], resolve),
+                    },
+                    {
+                        path: 'aPrice', //所有价格
+                        component: resolve => require(['@/views/SaleRank/AllPrice/index.vue'], resolve),
+                    },
+                    {
+                        path: 'aEnergy', //所有能源
+                        component: resolve => require(['@/views/SaleRank/AllEnergy/index.vue'], resolve),
+                    },
+                ]
+            },
            {
                 path: '/ThemeAnalize',
                 name: "ThemeAnalize",
diff --git a/src/views/Login/loginForm/index.vue b/src/views/Login/loginForm/index.vue
index 14863af..0f38eaf 100644
--- a/src/views/Login/loginForm/index.vue
+++ b/src/views/Login/loginForm/index.vue
@@ -123,6 +123,13 @@ export default {
                        this.setToken(data.toKen);
                        this.setUser(data);
                        this.setLevelBtn(data.levelBtn);
+                       //手动添加
+                       let obj = {
+                           link:'/saleRank',
+                           text:'销量排行'
+                       }
+                       data.meun.push(obj)
+                       ////
                        this.setMenu(data.meun);
                        if(this.remCheck) {
                            this.setAccount({sUserName:this.form.sUserName, sPwd: this.form.sPwd, remCheck: this.remCheck})
diff --git a/src/views/SaleRank/AllEnergy/index.vue b/src/views/SaleRank/AllEnergy/index.vue
new file mode 100644
index 0000000..aa1667a
--- /dev/null
+++ b/src/views/SaleRank/AllEnergy/index.vue
@@ -0,0 +1,112 @@
+<template>
+   <div class="ae-outter" v-loading="load">
+       <v-label-div :title="time">
+           <a-button @click="onTable" style="margin-right: 16px">查看图表</a-button>
+           <a-button @click="goBack">返回</a-button>
+        </v-label-div>
+        <div class="rank-container">
+            <div class="rank-item" v-for="(item, index) in lvList" :key="item.key">
+                <v-label-div :title="item.key + '销量排行TOP10'" :showLine="false" :eStyle="{'border-style': 'none'}"></v-label-div>
+                <div class="d1">
+                    <vRankingKmd  v-for="(it,index) in item.value" :key="index" :lineShow="index === 0 ? false : true" :num="index + 1" :label="it.seriesname" :val="it.salescount"></vRankingKmd>
+                </div>
+                <div class="d1-link">
+                    <div style="padding: 14px 14px 14px 80px">
+                        <a @click="goInfo(index)">更多{{item.key}}详细排行榜>>></a></div>
+                </div>
+            </div>
+        </div>
+   </div>
+</template>
+
+<script>
+import vRankingKmd from "./v-ranking-kmd"
+import {getCheZhuCarEnergyRankingAll} from "@/api/SaleRank"
+import {getCheZhuCountTime} from "@/api/SaleRank"
+export default {
+    name: "AllLevel",
+    components: {
+        vRankingKmd
+    },
+    data() {
+        return {
+            load: false,
+            time: '各汽车能源类型销售排行榜',
+            form: {
+                token: '',
+                sTimeType: 4,
+                sStartTime: '',
+                sEndTime: '',
+            },
+            lvList: []
+        }
+    },
+    created() {
+        this.form.token = this.getToken;
+        this.getData();
+    },
+    methods: {
+        getData() {
+            this.load = true;
+            getCheZhuCountTime({token: this.getToken}).then(res => {
+                let data = res.data;
+                this.form.sStartTime = data.Data[0].Time;
+                this.form.sEndTime = data.Data[data.Data.length-1].Time;
+                let obj = {
+                    token: this.getToken,
+                    sTimeType: 4,
+                    sStartTime: this.form.sStartTime + '-01',
+                    sEndTime: this.form.sEndTime + '-01',
+                }
+                getCheZhuCarEnergyRankingAll(obj).then(res => {
+                    let data = res.data;
+                    this.lvList = data;
+                });
+                this.load = false
+            })
+        },
+        //查看图表
+        onTable() {
+
+        },
+        //返回
+        goBack() {
+            this.$router.go(-1);
+        },
+        //前往详细
+        goInfo(index) {
+            let url = '/saleRank/energy'+(index+1);
+            this.$router.push(url)
+        }
+    }
+}
+</script>
+
+<style lang="less">
+.ae-outter {
+    width: 1552px;
+    // height: 460px;
+    border: 2px solid #0f2a4d;
+    .rank-container {
+        padding-left: 17px;
+        padding-top: 17px;
+        display: flex;
+        flex-wrap:wrap;
+        justify-content: flex-start;
+        .rank-item {
+            width: 340px;
+            margin-right: 32px;
+            .d1-link {
+                position: relative;
+                width: 344px;
+                height: 48px;
+                margin-top: 26px;
+                margin-left: 16px;
+                color: #fff;
+                background: #0a1d3b;
+                border-radius: 2px;
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/SaleRank/AllEnergy/v-ranking-kmd/index.vue b/src/views/SaleRank/AllEnergy/v-ranking-kmd/index.vue
new file mode 100644
index 0000000..d30fcf0
--- /dev/null
+++ b/src/views/SaleRank/AllEnergy/v-ranking-kmd/index.vue
@@ -0,0 +1,231 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-08 16:44:08
+ * @LastEditTime: 2021-11-18 11:57:14
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/components/v-ranking/index.vue
+-->
+<template>
+  <div class="v-r-container">
+    <div class="v-r-line" v-if="lineShow"></div>
+    <div class="v-r-inner">
+      <div :class="ls">
+        <span class="s1">{{ num|numStr }}</span>
+      </div>
+      <div :class="rs">
+          <span class="v-r-label">{{label}}</span>
+          <div class="v-r-res">
+              <span class="s1">销量</span>
+              <span class="s2">{{val}}</span>
+          </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "v-ranking-kmd",
+  props: {
+    num: {
+      type: [String, Number],
+      default: 1,
+    },
+    val: {
+        type: [String, Number],
+        default: 0
+    },
+    label: {
+        type: String,
+        default: ""
+    },
+    lineShow: {
+        type: Boolean,
+        default: true
+    },
+    
+  },
+  watch: {
+      num: {
+          handler(val) {
+              if(val == 1) {
+                  this.ls = "v-r-left-1"
+                  this.rs = "v-r-right-1"
+              } else if(val == 2) {
+                  this.ls = "v-r-left-2"
+                  this.rs = "v-r-right-2"
+              } else if(val == 3) {
+                  this.ls = "v-r-left-3"
+                  this.rs = "v-r-right-3"
+              } else {
+                  this.ls = "v-r-left"
+                  this.rs = "v-r-right"
+              }
+          },
+          immediate: true
+      }
+  },
+  data() {
+      return  {
+          ls: "v-r-left",
+          rs: "v-r-right"
+      }
+  },
+  filters: {
+        numStr(val) {
+            let str = ""
+            if(0<val && val<10) {
+                str = '0' + val
+            } else {
+                str = val + ''
+            }
+            return str
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.v-r-container {
+  width: 344px;
+  height: auto;
+  .v-r-line {
+    width: 100%;
+    height: 1px;
+    background:#0a1d3b;
+    margin-top: 13px;
+    margin-bottom: 13px;
+  }
+  .v-r-inner {
+    position: relative;
+    width: 100%;
+    height: 48px;
+    margin-top: 6px;
+    margin-left: 16px;
+    color: #fff;
+    background: #0a1d3b;
+    border-radius: 2px;
+  }
+  .v-r-label {
+      display: block;
+      font-size: 14px;
+      color: #FFFFFF;
+      margin-left: 40px;
+      font-weight: bold;
+  }
+  .v-r-res {
+      margin-right: 16px;
+      span {
+          display: block;
+          text-align: right;
+          font-size: 12px;
+      }
+      .s1 {
+          color: #9ba4af;
+      }
+      .s2 {
+          color: #fff;
+          font-family: Bebas;
+      }
+  }
+  .v-r-left {
+    width: 48px;
+    height: 48px;
+    text-align: center;
+    line-height: 48px;
+    .s1 {
+      color: #9099a6;
+      font-size: 16px;
+      line-height: 48px;
+      font-family: Bebas;
+    }
+  }
+  .v-r-right {
+      position: absolute;
+      width: 320px;
+      height: 48px;
+      border-top: 2px solid transparent;
+      top: 0px;
+      left: 24px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+  }
+  .v-r-left-1 {
+    width: 48px;
+    height: 48px;
+    text-align: center;
+    border: 2px solid #cc9d12;
+    border-radius: 48px;
+    .s1 {
+      color: #ffffff;
+      font-size: 16px;
+      line-height: 42px;
+      text-shadow: 0px 0px 8px #cc9d12;
+      font-family: Bebas;
+    }
+  }
+  .v-r-right-1 {
+      position: absolute;
+      width: 320px;
+      height: 48px;
+      border-top: 2px solid #CC9D12;
+      top: 0px;
+      left: 24px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+  }
+  .v-r-left-2 {
+    width: 48px;
+    height: 48px;
+    text-align: center;
+    border: 2px solid #3373CC;
+    border-radius: 48px;
+    .s1 {
+      color: #ffffff;
+      font-size: 16px;
+      line-height: 42px;
+      text-shadow: 0px 0px 8px #3373CC;
+      font-family: Bebas;
+    }
+  }
+  .v-r-right-2 {
+      position: absolute;
+      width: 320px;
+      height: 48px;
+      border-top: 2px solid #3373CC;
+      top: 0px;
+      left: 24px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+  }
+  .v-r-left-3 {
+    width: 48px;
+    height: 48px;
+    text-align: center;
+    border: 2px solid #54BF93;
+    border-radius: 48px;
+    .s1 {
+      color: #ffffff;
+      font-size: 16px;
+      line-height: 42px;
+      text-shadow: 0px 0px 8px #54BF93;
+      font-family: Bebas;
+    }
+  }
+  .v-r-right-3 {
+      position: absolute;
+      width: 320px;
+      height: 48px;
+      border-top: 2px solid #54BF93;
+      top: 0px;
+      left: 24px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+  }
+}
+</style>
diff --git a/src/views/SaleRank/AllLevel/index.vue b/src/views/SaleRank/AllLevel/index.vue
new file mode 100644
index 0000000..e274459
--- /dev/null
+++ b/src/views/SaleRank/AllLevel/index.vue
@@ -0,0 +1,112 @@
+<template>
+   <div class="alvl-outter" v-loading="load">
+       <v-label-div :title="time">
+           <a-button @click="onTable" style="margin-right: 16px">查看图表</a-button>
+           <a-button @click="goBack">返回</a-button>
+        </v-label-div>
+        <div class="rank-container">
+            <div class="rank-item" v-for="(item, index) in lvList" :key="item.key">
+                <v-label-div :title="item.key + '销量排行TOP10'" :showLine="false" :eStyle="{'border-style': 'none'}"></v-label-div>
+                <div class="d1">
+                    <vRankingKmd  v-for="(it,index) in item.value" :key="index" :lineShow="index === 0 ? false : true" :num="index + 1" :label="it.seriesname" :val="it.salescount"></vRankingKmd>
+                </div>
+                <div class="d1-link">
+                    <div style="padding: 14px 14px 14px 80px">
+                        <a @click="goInfo(index)">更多{{item.key}}详细排行榜>>></a></div>
+                </div>
+            </div>
+        </div>
+   </div>
+</template>
+
+<script>
+import vRankingKmd from "./v-ranking-kmd"
+import {getCheZhuCarSpecidRankingAll} from "@/api/SaleRank"
+import {getCheZhuCountTime} from "@/api/SaleRank"
+export default {
+    name: "AllLevel",
+    components: {
+        vRankingKmd
+    },
+    data() {
+        return {
+            load: false,
+            time: '汽车级别销售排行榜',
+            form: {
+                token: '',
+                sTimeType: 4,
+                sStartTime: '',
+                sEndTime: '',
+            },
+            lvList: []
+        }
+    },
+    created() {
+        this.form.token = this.getToken;
+        this.getData();
+    },
+    methods: {
+        getData() {
+            this.load = true;
+            getCheZhuCountTime({token: this.getToken}).then(res => {
+                let data = res.data;
+                this.form.sStartTime = data.Data[0].Time;
+                this.form.sEndTime = data.Data[data.Data.length-1].Time;
+                let obj = {
+                    token: this.getToken,
+                    sTimeType: 4,
+                    sStartTime: this.form.sStartTime + '-01',
+                    sEndTime: this.form.sEndTime + '-01',
+                }
+                getCheZhuCarSpecidRankingAll(obj).then(res => {
+                    let data = res.data;
+                    this.lvList = data;
+                });
+                this.load = false
+            })
+        },
+        //查看图表
+        onTable() {
+
+        },
+        //返回
+        goBack() {
+            this.$router.go(-1);
+        },
+        //前往详细
+        goInfo(index) {
+            let url = '/saleRank/level'+(index+1);
+            this.$router.push(url)
+        }
+    }
+}
+</script>
+
+<style lang="less">
+.alvl-outter {
+    width: 1552px;
+    // height: 460px;
+    border: 2px solid #0f2a4d;
+    .rank-container {
+        padding-left: 17px;
+        padding-top: 17px;
+        display: flex;
+        flex-wrap:wrap;
+        justify-content: flex-start;
+        .rank-item {
+            width: 340px;
+            margin-right: 32px;
+            .d1-link {
+                position: relative;
+                width: 344px;
+                height: 48px;
+                margin-top: 26px;
+                margin-left: 16px;
+                color: #fff;
+                background: #0a1d3b;
+                border-radius: 2px;
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/SaleRank/AllLevel/v-ranking-kmd/index.vue b/src/views/SaleRank/AllLevel/v-ranking-kmd/index.vue
new file mode 100644
index 0000000..d30fcf0
--- /dev/null
+++ b/src/views/SaleRank/AllLevel/v-ranking-kmd/index.vue
@@ -0,0 +1,231 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-08 16:44:08
+ * @LastEditTime: 2021-11-18 11:57:14
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/components/v-ranking/index.vue
+-->
+<template>
+  <div class="v-r-container">
+    <div class="v-r-line" v-if="lineShow"></div>
+    <div class="v-r-inner">
+      <div :class="ls">
+        <span class="s1">{{ num|numStr }}</span>
+      </div>
+      <div :class="rs">
+          <span class="v-r-label">{{label}}</span>
+          <div class="v-r-res">
+              <span class="s1">销量</span>
+              <span class="s2">{{val}}</span>
+          </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "v-ranking-kmd",
+  props: {
+    num: {
+      type: [String, Number],
+      default: 1,
+    },
+    val: {
+        type: [String, Number],
+        default: 0
+    },
+    label: {
+        type: String,
+        default: ""
+    },
+    lineShow: {
+        type: Boolean,
+        default: true
+    },
+    
+  },
+  watch: {
+      num: {
+          handler(val) {
+              if(val == 1) {
+                  this.ls = "v-r-left-1"
+                  this.rs = "v-r-right-1"
+              } else if(val == 2) {
+                  this.ls = "v-r-left-2"
+                  this.rs = "v-r-right-2"
+              } else if(val == 3) {
+                  this.ls = "v-r-left-3"
+                  this.rs = "v-r-right-3"
+              } else {
+                  this.ls = "v-r-left"
+                  this.rs = "v-r-right"
+              }
+          },
+          immediate: true
+      }
+  },
+  data() {
+      return  {
+          ls: "v-r-left",
+          rs: "v-r-right"
+      }
+  },
+  filters: {
+        numStr(val) {
+            let str = ""
+            if(0<val && val<10) {
+                str = '0' + val
+            } else {
+                str = val + ''
+            }
+            return str
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.v-r-container {
+  width: 344px;
+  height: auto;
+  .v-r-line {
+    width: 100%;
+    height: 1px;
+    background:#0a1d3b;
+    margin-top: 13px;
+    margin-bottom: 13px;
+  }
+  .v-r-inner {
+    position: relative;
+    width: 100%;
+    height: 48px;
+    margin-top: 6px;
+    margin-left: 16px;
+    color: #fff;
+    background: #0a1d3b;
+    border-radius: 2px;
+  }
+  .v-r-label {
+      display: block;
+      font-size: 14px;
+      color: #FFFFFF;
+      margin-left: 40px;
+      font-weight: bold;
+  }
+  .v-r-res {
+      margin-right: 16px;
+      span {
+          display: block;
+          text-align: right;
+          font-size: 12px;
+      }
+      .s1 {
+          color: #9ba4af;
+      }
+      .s2 {
+          color: #fff;
+          font-family: Bebas;
+      }
+  }
+  .v-r-left {
+    width: 48px;
+    height: 48px;
+    text-align: center;
+    line-height: 48px;
+    .s1 {
+      color: #9099a6;
+      font-size: 16px;
+      line-height: 48px;
+      font-family: Bebas;
+    }
+  }
+  .v-r-right {
+      position: absolute;
+      width: 320px;
+      height: 48px;
+      border-top: 2px solid transparent;
+      top: 0px;
+      left: 24px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+  }
+  .v-r-left-1 {
+    width: 48px;
+    height: 48px;
+    text-align: center;
+    border: 2px solid #cc9d12;
+    border-radius: 48px;
+    .s1 {
+      color: #ffffff;
+      font-size: 16px;
+      line-height: 42px;
+      text-shadow: 0px 0px 8px #cc9d12;
+      font-family: Bebas;
+    }
+  }
+  .v-r-right-1 {
+      position: absolute;
+      width: 320px;
+      height: 48px;
+      border-top: 2px solid #CC9D12;
+      top: 0px;
+      left: 24px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+  }
+  .v-r-left-2 {
+    width: 48px;
+    height: 48px;
+    text-align: center;
+    border: 2px solid #3373CC;
+    border-radius: 48px;
+    .s1 {
+      color: #ffffff;
+      font-size: 16px;
+      line-height: 42px;
+      text-shadow: 0px 0px 8px #3373CC;
+      font-family: Bebas;
+    }
+  }
+  .v-r-right-2 {
+      position: absolute;
+      width: 320px;
+      height: 48px;
+      border-top: 2px solid #3373CC;
+      top: 0px;
+      left: 24px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+  }
+  .v-r-left-3 {
+    width: 48px;
+    height: 48px;
+    text-align: center;
+    border: 2px solid #54BF93;
+    border-radius: 48px;
+    .s1 {
+      color: #ffffff;
+      font-size: 16px;
+      line-height: 42px;
+      text-shadow: 0px 0px 8px #54BF93;
+      font-family: Bebas;
+    }
+  }
+  .v-r-right-3 {
+      position: absolute;
+      width: 320px;
+      height: 48px;
+      border-top: 2px solid #54BF93;
+      top: 0px;
+      left: 24px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+  }
+}
+</style>
diff --git a/src/views/SaleRank/AllPrice/index.vue b/src/views/SaleRank/AllPrice/index.vue
new file mode 100644
index 0000000..69efe4a
--- /dev/null
+++ b/src/views/SaleRank/AllPrice/index.vue
@@ -0,0 +1,112 @@
+<template>
+   <div class="aprice-outter" v-loading="load">
+       <v-label-div :title="time">
+           <a-button @click="onTable" style="margin-right: 16px">查看图表</a-button>
+           <a-button @click="goBack">返回</a-button>
+        </v-label-div>
+        <div class="rank-container">
+            <div class="rank-item" v-for="(item, index) in lvList" :key="item.key">
+                <v-label-div :title="item.key + '销量排行TOP10'" :showLine="false" :eStyle="{'border-style': 'none'}"></v-label-div>
+                <div class="d1">
+                    <vRankingKmd  v-for="(it,index) in item.value" :key="index" :lineShow="index === 0 ? false : true" :num="index + 1" :label="it.seriesname" :val="it.salescount"></vRankingKmd>
+                </div>
+                <div class="d1-link">
+                    <div style="padding: 14px 14px 14px 80px">
+                        <a @click="goInfo(index)">更多{{item.key}}详细排行榜>>></a></div>
+                </div>
+            </div>
+        </div>
+   </div>
+</template>
+
+<script>
+import vRankingKmd from "./v-ranking-kmd"
+import {getCheZhuCarPriceRankingAll} from "@/api/SaleRank"
+import {getCheZhuCountTime} from "@/api/SaleRank"
+export default {
+    name: "AllLevel",
+    components: {
+        vRankingKmd
+    },
+    data() {
+        return {
+            load: false,
+            time: '各汽车价格区间销售排行榜',
+            form: {
+                token: '',
+                sTimeType: 4,
+                sStartTime: '',
+                sEndTime: '',
+            },
+            lvList: []
+        }
+    },
+    created() {
+        this.form.token = this.getToken;
+        this.getData();
+    },
+    methods: {
+        getData() {
+            this.load = true;
+            getCheZhuCountTime({token: this.getToken}).then(res => {
+                let data = res.data;
+                this.form.sStartTime = data.Data[0].Time;
+                this.form.sEndTime = data.Data[data.Data.length-1].Time;
+                let obj = {
+                    token: this.getToken,
+                    sTimeType: 4,
+                    sStartTime: this.form.sStartTime + '-01',
+                    sEndTime: this.form.sEndTime + '-01',
+                }
+                getCheZhuCarPriceRankingAll(obj).then(res => {
+                    let data = res.data;
+                    this.lvList = data;
+                });
+                this.load = false
+            })
+        },
+        //查看图表
+        onTable() {
+
+        },
+        //返回
+        goBack() {
+            this.$router.go(-1);
+        },
+        //前往详细
+        goInfo(index) {
+            let url = '/saleRank/price'+(index+1);
+            this.$router.push(url)
+        }
+    }
+}
+</script>
+
+<style lang="less">
+.aprice-outter {
+    width: 1552px;
+    // height: 460px;
+    border: 2px solid #0f2a4d;
+    .rank-container {
+        padding-left: 17px;
+        padding-top: 17px;
+        display: flex;
+        flex-wrap:wrap;
+        justify-content: flex-start;
+        .rank-item {
+            width: 340px;
+            margin-right: 32px;
+            .d1-link {
+                position: relative;
+                width: 344px;
+                height: 48px;
+                margin-top: 26px;
+                margin-left: 16px;
+                color: #fff;
+                background: #0a1d3b;
+                border-radius: 2px;
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/SaleRank/AllPrice/v-ranking-kmd/index.vue b/src/views/SaleRank/AllPrice/v-ranking-kmd/index.vue
new file mode 100644
index 0000000..d30fcf0
--- /dev/null
+++ b/src/views/SaleRank/AllPrice/v-ranking-kmd/index.vue
@@ -0,0 +1,231 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-08 16:44:08
+ * @LastEditTime: 2021-11-18 11:57:14
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/components/v-ranking/index.vue
+-->
+<template>
+  <div class="v-r-container">
+    <div class="v-r-line" v-if="lineShow"></div>
+    <div class="v-r-inner">
+      <div :class="ls">
+        <span class="s1">{{ num|numStr }}</span>
+      </div>
+      <div :class="rs">
+          <span class="v-r-label">{{label}}</span>
+          <div class="v-r-res">
+              <span class="s1">销量</span>
+              <span class="s2">{{val}}</span>
+          </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "v-ranking-kmd",
+  props: {
+    num: {
+      type: [String, Number],
+      default: 1,
+    },
+    val: {
+        type: [String, Number],
+        default: 0
+    },
+    label: {
+        type: String,
+        default: ""
+    },
+    lineShow: {
+        type: Boolean,
+        default: true
+    },
+    
+  },
+  watch: {
+      num: {
+          handler(val) {
+              if(val == 1) {
+                  this.ls = "v-r-left-1"
+                  this.rs = "v-r-right-1"
+              } else if(val == 2) {
+                  this.ls = "v-r-left-2"
+                  this.rs = "v-r-right-2"
+              } else if(val == 3) {
+                  this.ls = "v-r-left-3"
+                  this.rs = "v-r-right-3"
+              } else {
+                  this.ls = "v-r-left"
+                  this.rs = "v-r-right"
+              }
+          },
+          immediate: true
+      }
+  },
+  data() {
+      return  {
+          ls: "v-r-left",
+          rs: "v-r-right"
+      }
+  },
+  filters: {
+        numStr(val) {
+            let str = ""
+            if(0<val && val<10) {
+                str = '0' + val
+            } else {
+                str = val + ''
+            }
+            return str
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.v-r-container {
+  width: 344px;
+  height: auto;
+  .v-r-line {
+    width: 100%;
+    height: 1px;
+    background:#0a1d3b;
+    margin-top: 13px;
+    margin-bottom: 13px;
+  }
+  .v-r-inner {
+    position: relative;
+    width: 100%;
+    height: 48px;
+    margin-top: 6px;
+    margin-left: 16px;
+    color: #fff;
+    background: #0a1d3b;
+    border-radius: 2px;
+  }
+  .v-r-label {
+      display: block;
+      font-size: 14px;
+      color: #FFFFFF;
+      margin-left: 40px;
+      font-weight: bold;
+  }
+  .v-r-res {
+      margin-right: 16px;
+      span {
+          display: block;
+          text-align: right;
+          font-size: 12px;
+      }
+      .s1 {
+          color: #9ba4af;
+      }
+      .s2 {
+          color: #fff;
+          font-family: Bebas;
+      }
+  }
+  .v-r-left {
+    width: 48px;
+    height: 48px;
+    text-align: center;
+    line-height: 48px;
+    .s1 {
+      color: #9099a6;
+      font-size: 16px;
+      line-height: 48px;
+      font-family: Bebas;
+    }
+  }
+  .v-r-right {
+      position: absolute;
+      width: 320px;
+      height: 48px;
+      border-top: 2px solid transparent;
+      top: 0px;
+      left: 24px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+  }
+  .v-r-left-1 {
+    width: 48px;
+    height: 48px;
+    text-align: center;
+    border: 2px solid #cc9d12;
+    border-radius: 48px;
+    .s1 {
+      color: #ffffff;
+      font-size: 16px;
+      line-height: 42px;
+      text-shadow: 0px 0px 8px #cc9d12;
+      font-family: Bebas;
+    }
+  }
+  .v-r-right-1 {
+      position: absolute;
+      width: 320px;
+      height: 48px;
+      border-top: 2px solid #CC9D12;
+      top: 0px;
+      left: 24px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+  }
+  .v-r-left-2 {
+    width: 48px;
+    height: 48px;
+    text-align: center;
+    border: 2px solid #3373CC;
+    border-radius: 48px;
+    .s1 {
+      color: #ffffff;
+      font-size: 16px;
+      line-height: 42px;
+      text-shadow: 0px 0px 8px #3373CC;
+      font-family: Bebas;
+    }
+  }
+  .v-r-right-2 {
+      position: absolute;
+      width: 320px;
+      height: 48px;
+      border-top: 2px solid #3373CC;
+      top: 0px;
+      left: 24px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+  }
+  .v-r-left-3 {
+    width: 48px;
+    height: 48px;
+    text-align: center;
+    border: 2px solid #54BF93;
+    border-radius: 48px;
+    .s1 {
+      color: #ffffff;
+      font-size: 16px;
+      line-height: 42px;
+      text-shadow: 0px 0px 8px #54BF93;
+      font-family: Bebas;
+    }
+  }
+  .v-r-right-3 {
+      position: absolute;
+      width: 320px;
+      height: 48px;
+      border-top: 2px solid #54BF93;
+      top: 0px;
+      left: 24px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+  }
+}
+</style>
diff --git a/src/views/SaleRank/BrandSale/index.vue b/src/views/SaleRank/BrandSale/index.vue
new file mode 100644
index 0000000..5379f7a
--- /dev/null
+++ b/src/views/SaleRank/BrandSale/index.vue
@@ -0,0 +1,52 @@
+<template>
+    <div class="bs-outter">
+        <v-label-div :title="time">
+            <a-button @click="goBack">返回</a-button>
+        </v-label-div>
+    </div>
+</template>
+
+<script>
+import {getCheZhuCarBrandRanking} from "@/api/SaleRank"
+export default {
+    name: 'BrandSale',
+    data() {
+        return {
+            form: {
+                token: '',
+                sTimeType: 4,
+                sStartTime: '2021-01',
+                sEndTime: '2021-12',
+                iPageIndex: 1,
+                iPageSize: 20,
+            },
+            time: '汽车品牌销量排行榜'
+        }
+    },
+    created() {
+        this.form.token = this.getToken;
+        this.getData()
+    },
+    methods: {
+        getData() {
+            let obj = Object.assign({},this.form)
+            getCheZhuCarBrandRanking(obj).then(res => {
+                let data = res.data;
+                console.log(data)
+            })
+        },
+        //返回
+        goBack() {
+            this.$router.go(-1);
+        },
+    }
+}
+</script>
+
+<style lang="less">
+.bs-outter {
+    width: 1552px;
+    // height: 460px;
+    border: 2px solid #0f2a4d;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/SaleRank/ChineseCarSale/carBrandSale/index.vue b/src/views/SaleRank/ChineseCarSale/carBrandSale/index.vue
new file mode 100644
index 0000000..3851a81
--- /dev/null
+++ b/src/views/SaleRank/ChineseCarSale/carBrandSale/index.vue
@@ -0,0 +1,66 @@
+<template>
+    <div class="cbs-outter" v-loading="load">
+        <v-label-div :title="time">
+            <v-btn @click="moreBrand">更多品牌</v-btn>
+        </v-label-div>
+        <div class="cbs-inner">
+            <v-echarts :opt="opt"></v-echarts>
+        </div>
+    </div>
+</template>
+
+<script>
+import {getCheZhuBrandCount} from "@/api/SaleRank"
+import createOpt from "./opt"
+export default {
+    name: 'carBrandSale',
+    data() {
+        return {
+            form: {
+                token: ''
+            },
+            time: '汽车品牌销量排行榜',
+            load: false,
+            opt: {}
+        }
+    },
+    created() {
+        this.form.token = this.getToken;
+        this.getData()
+    },
+    methods: {
+        getData() {
+            this.load = true;
+            let obj = Object.assign({},this.form);
+            getCheZhuBrandCount(obj).then(res => {
+                let data = res.data;
+                this.time = "汽车品牌销量排行榜(" + data.Time + ')';
+                let dx = [];
+                let ds = [];
+                data.Data.forEach(ele => {
+                    dx.push(ele.key);
+                    ds.push(ele.value)
+                })
+               this.opt = createOpt(dx,ds);
+               this.load = false
+            })
+        },
+        moreBrand() {
+            this.$router.push("/saleRank/brandSale");
+        }
+    }
+}
+</script>
+
+<style lang="less">
+.cbs-outter {
+    width: 1552px;
+    height: 460px;
+    border: 2px solid #0f2a4d;
+    margin-top: 16px;
+    .cbs-inner {
+        width: 100%;
+        height: calc(100% - 48px);
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/SaleRank/ChineseCarSale/carBrandSale/opt.js b/src/views/SaleRank/ChineseCarSale/carBrandSale/opt.js
new file mode 100644
index 0000000..fd1d10a
--- /dev/null
+++ b/src/views/SaleRank/ChineseCarSale/carBrandSale/opt.js
@@ -0,0 +1,111 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-12 09:12:13
+ * @LastEditTime: 2021-11-02 18:03:08
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandInsight/brandTop/opt.js
+ */
+import * as echarts from "echarts";
+import { bigNumberTransform } from "@/utils/gol/dataTool"
+export default function createOpt(dx,ds) {
+    return {
+        grid: {
+            top: "16px",
+            left: "16px",
+            right: "28px",
+            bottom: "16px",
+            containLabel: true,
+        },
+        tooltip: {
+            trigger: "axis",
+            backgroundColor: "#08182F",
+            color: "#fff",
+            borderColor: "#3373CC",
+            textStyle: {
+                color: "#fff", //设置文字颜色
+            },
+            extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
+            formatter: function (params) {
+                var result = "";
+                var dotHtml =
+                    '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#1197b8"></span>';
+                params.forEach(function (item) {
+                    result += item.axisValue + "</br>" + dotHtml + item.data;
+                });
+                return result;
+            },
+        },
+        xAxis: {
+            type: "category",
+            axisTick: {
+                show: false,
+            },
+            axisLine: {
+                show: false,
+                lineStyle: {
+                    color: "#fff",
+                },
+            },
+            data: dx,
+        },
+        yAxis: {
+            type: "value",
+            axisLine: {
+                show: false,
+                lineStyle: {
+                    color: "#FFF",
+                },
+            },
+            axisLabel: {
+                formatter: (value) => {
+                    let str = bigNumberTransform(value);
+                    return str;
+                }
+            },
+            splitLine: {
+                lineStyle: {
+                    type: "dashed", // y轴分割线类型
+                    color: "#012b4b",
+                },
+            },
+        },
+        series: [
+            {
+                name: "2001",
+                data: ds,
+                type: "bar",
+                barWidth: 24,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true, //开启显示
+                            position: 'top', //在上方显示
+                            textStyle: { //数值样式
+                                color: '#fff',
+                                fontSize: 14
+                            }
+                        },
+                        color: new echarts.graphic.LinearGradient(
+                            0,
+                            1,
+                            0,
+                            0,
+                            [
+                                {
+                                    offset: 0,
+                                    color: "#111", // 0% 处的颜色
+                                },
+                                {
+                                    offset: 1,
+                                    color: "#78D3F8", // 100% 处的颜色#3373CC
+                                },
+                            ],
+                            false
+                        ),
+                    },
+                },
+            },
+        ],
+    }
+}
diff --git a/src/views/SaleRank/ChineseCarSale/carLevelSale/index.vue b/src/views/SaleRank/ChineseCarSale/carLevelSale/index.vue
new file mode 100644
index 0000000..d714dbb
--- /dev/null
+++ b/src/views/SaleRank/ChineseCarSale/carLevelSale/index.vue
@@ -0,0 +1,66 @@
+<template>
+    <div class="cls-outter" v-loading="load">
+        <v-label-div :title="time">
+            <v-btn @click="moreInfo">更多信息</v-btn>
+        </v-label-div>
+        <div class="cls-inner">
+            <v-echarts :opt="opt"></v-echarts>
+        </div>
+    </div>
+</template>
+
+<script>
+import {getCheZhuSpecCount} from "@/api/SaleRank"
+import createOpt from "./opt"
+export default {
+    name: 'carLevelSale',
+    data() {
+        return {
+            form: {
+                token: ''
+            },
+            load: false,
+            opt: {},
+            time: '各级别车型销量'
+        }
+    },
+    created() {
+        this.form.token = this.getToken;
+        this.getData()
+    },
+    methods: {
+        getData() {
+            this.load = true;
+            let obj = Object.assign({},this.form);
+            getCheZhuSpecCount(obj).then(res => {
+                let data = res.data;
+                this.time = "各级别车型销量(" + data.Time + ')';
+                let dx = [];
+                let ds = [];
+                data.Data.forEach(ele => {
+                    dx.push(ele.key);
+                    ds.push(ele.value)
+                })
+               this.opt = createOpt(dx,ds);
+               this.load = false
+            })
+        },
+        moreInfo() {
+            this.$router.push("/saleRank/aLevel");
+        }
+    }
+}
+</script>
+
+<style lang="less">
+.cls-outter {
+    width: 1552px;
+    height: 460px;
+    border: 2px solid #0f2a4d;
+    margin-top: 16px;
+    .cls-inner {
+        width: 100%;
+        height: calc(100% - 48px);
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/SaleRank/ChineseCarSale/carLevelSale/opt.js b/src/views/SaleRank/ChineseCarSale/carLevelSale/opt.js
new file mode 100644
index 0000000..b354b32
--- /dev/null
+++ b/src/views/SaleRank/ChineseCarSale/carLevelSale/opt.js
@@ -0,0 +1,111 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-12 09:12:13
+ * @LastEditTime: 2021-11-02 18:03:08
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandInsight/brandTop/opt.js
+ */
+import * as echarts from "echarts";
+import { bigNumberTransform } from "@/utils/gol/dataTool"
+export default function createOpt(dx,ds) {
+    return {
+        grid: {
+            top: "16px",
+            left: "16px",
+            right: "28px",
+            bottom: "16px",
+            containLabel: true,
+        },
+        tooltip: {
+            trigger: "axis",
+            backgroundColor: "#08182F",
+            color: "#fff",
+            borderColor: "#3373CC",
+            textStyle: {
+                color: "#fff", //设置文字颜色
+            },
+            extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
+            formatter: function (params) {
+                var result = "";
+                var dotHtml =
+                    '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#1197b8"></span>';
+                params.forEach(function (item) {
+                    result += item.axisValue + "</br>" + dotHtml + item.data;
+                });
+                return result;
+            },
+        },
+        xAxis: {
+            type: "category",
+            axisTick: {
+                show: false,
+            },
+            axisLine: {
+                show: false,
+                lineStyle: {
+                    color: "#fff",
+                },
+            },
+            data: dx,
+        },
+        yAxis: {
+            type: "value",
+            axisLine: {
+                show: false,
+                lineStyle: {
+                    color: "#FFF",
+                },
+            },
+            axisLabel: {
+                formatter: (value) => {
+                    let str = bigNumberTransform(value);
+                    return str;
+                }
+            },
+            splitLine: {
+                lineStyle: {
+                    type: "dashed", // y轴分割线类型
+                    color: "#012b4b",
+                },
+            },
+        },
+        series: [
+            {
+                name: "2001",
+                data: ds,
+                type: "bar",
+                barWidth: 24,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true, //开启显示
+                            position: 'top', //在上方显示
+                            textStyle: { //数值样式
+                                color: '#fff',
+                                fontSize: 14
+                            }
+                        },
+                        color: new echarts.graphic.LinearGradient(
+                            0,
+                            1,
+                            0,
+                            0,
+                            [
+                                {
+                                    offset: 0,
+                                    color: "#111", // 0% 处的颜色
+                                },
+                                {
+                                    offset: 1,
+                                    color: "#54BF93", // 100% 处的颜色#3373CC
+                                },
+                            ],
+                            false
+                        ),
+                    },
+                },
+            },
+        ],
+    }
+}
diff --git a/src/views/SaleRank/ChineseCarSale/carSeriesSale/index.vue b/src/views/SaleRank/ChineseCarSale/carSeriesSale/index.vue
new file mode 100644
index 0000000..c5895fe
--- /dev/null
+++ b/src/views/SaleRank/ChineseCarSale/carSeriesSale/index.vue
@@ -0,0 +1,66 @@
+<template>
+    <div class="css-outter">
+        <v-label-div title="车型销量排行榜">
+            <v-btn @click="moreSeries">更多车型</v-btn>
+        </v-label-div>
+        <div class="css-inner">
+            <v-echarts :opt="opt"></v-echarts>
+        </div>
+    </div>
+</template>
+
+<script>
+import {getCheZhuCarSeriesCount} from "@/api/SaleRank"
+import createOpt from "./opt"
+export default {
+    name: 'carSeriesSale',
+    data() {
+        return {
+            form: {
+                token: ''
+            },
+            load: false,
+            opt: {},
+            time: '车型销量排行榜'
+        }
+    },
+    created() {
+        this.form.token = this.getToken;
+        this.getData()
+    },
+    methods: {
+        getData() {
+            this.load = true;
+            let obj = Object.assign({},this.form);
+            getCheZhuCarSeriesCount(obj).then(res => {
+                let data = res.data;
+                this.time = "车型销量排行榜(" + data.Time + ')';
+                let dx = [];
+                let ds = [];
+                data.Data.forEach(ele => {
+                    dx.push(ele.key);
+                    ds.push(ele.value)
+                })
+               this.opt = createOpt(dx,ds);
+               this.load = false
+            })
+        },
+        moreSeries() {
+            this.$router.push("/saleRank/seriesSale");
+        }
+    }
+}
+</script>
+
+<style lang="less">
+.css-outter {
+    width: 1552px;
+    height: 460px;
+    border: 2px solid #0f2a4d;
+    margin-top: 16px;
+    .css-inner {
+        width: 100%;
+        height: calc(100% - 48px);
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/SaleRank/ChineseCarSale/carSeriesSale/opt.js b/src/views/SaleRank/ChineseCarSale/carSeriesSale/opt.js
new file mode 100644
index 0000000..56e3744
--- /dev/null
+++ b/src/views/SaleRank/ChineseCarSale/carSeriesSale/opt.js
@@ -0,0 +1,111 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-12 09:12:13
+ * @LastEditTime: 2021-11-02 18:03:08
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandInsight/brandTop/opt.js
+ */
+import * as echarts from "echarts";
+import { bigNumberTransform } from "@/utils/gol/dataTool"
+export default function createOpt(dx,ds) {
+    return {
+        grid: {
+            top: "16px",
+            left: "16px",
+            right: "28px",
+            bottom: "16px",
+            containLabel: true,
+        },
+        tooltip: {
+            trigger: "axis",
+            backgroundColor: "#08182F",
+            color: "#fff",
+            borderColor: "#3373CC",
+            textStyle: {
+                color: "#fff", //设置文字颜色
+            },
+            extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
+            formatter: function (params) {
+                var result = "";
+                var dotHtml =
+                    '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#1197b8"></span>';
+                params.forEach(function (item) {
+                    result += item.axisValue + "</br>" + dotHtml + item.data;
+                });
+                return result;
+            },
+        },
+        xAxis: {
+            type: "category",
+            axisTick: {
+                show: false,
+            },
+            axisLine: {
+                show: false,
+                lineStyle: {
+                    color: "#fff",
+                },
+            },
+            data: dx,
+        },
+        yAxis: {
+            type: "value",
+            axisLine: {
+                show: false,
+                lineStyle: {
+                    color: "#FFF",
+                },
+            },
+            axisLabel: {
+                formatter: (value) => {
+                    let str = bigNumberTransform(value);
+                    return str;
+                }
+            },
+            splitLine: {
+                lineStyle: {
+                    type: "dashed", // y轴分割线类型
+                    color: "#012b4b",
+                },
+            },
+        },
+        series: [
+            {
+                name: "2001",
+                data: ds,
+                type: "bar",
+                barWidth: 24,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true, //开启显示
+                            position: 'top', //在上方显示
+                            textStyle: { //数值样式
+                                color: '#fff',
+                                fontSize: 14
+                            }
+                        },
+                        color: new echarts.graphic.LinearGradient(
+                            0,
+                            1,
+                            0,
+                            0,
+                            [
+                                {
+                                    offset: 0,
+                                    color: "#111", // 0% 处的颜色
+                                },
+                                {
+                                    offset: 1,
+                                    color: "#CC9D12", // 100% 处的颜色#3373CC
+                                },
+                            ],
+                            false
+                        ),
+                    },
+                },
+            },
+        ],
+    }
+}
diff --git a/src/views/SaleRank/ChineseCarSale/index.vue b/src/views/SaleRank/ChineseCarSale/index.vue
new file mode 100644
index 0000000..e04de99
--- /dev/null
+++ b/src/views/SaleRank/ChineseCarSale/index.vue
@@ -0,0 +1,39 @@
+<template>
+    <div>
+        <zgCarSale></zgCarSale>
+        <carBrandSale></carBrandSale>
+        <carLevelSale></carLevelSale>
+        <carSeriesSale></carSeriesSale>
+    </div>
+</template>
+
+<script>
+import zgCarSale from "./zgCarSale"
+import carBrandSale from "./carBrandSale"
+import carLevelSale from "./carLevelSale"
+import carSeriesSale from "./carSeriesSale"
+export default {
+    name: 'ChineseCarSale',
+    components: {
+        zgCarSale,
+        carBrandSale,
+        carLevelSale,
+        carSeriesSale
+    },
+    data() {
+        return {
+
+        }
+    },
+    created() {
+        this.getData()
+    },
+    methods: {
+        getData() {},
+    }
+}
+</script>
+
+<style lang="less">
+
+</style>
\ No newline at end of file
diff --git a/src/views/SaleRank/ChineseCarSale/zgCarSale/index.vue b/src/views/SaleRank/ChineseCarSale/zgCarSale/index.vue
new file mode 100644
index 0000000..851052b
--- /dev/null
+++ b/src/views/SaleRank/ChineseCarSale/zgCarSale/index.vue
@@ -0,0 +1,65 @@
+<template>
+    <div class="zg-outter" v-loading="load">
+        <v-label-div :title="time">
+            <v-btn @click="historySale">查看历史销量</v-btn>
+        </v-label-div>
+        <div class="zg-inner">
+            <v-echarts :opt="opt"></v-echarts>
+        </div>
+    </div>
+</template>
+
+<script>
+import {getCheZhuCountTime} from "@/api/SaleRank"
+import createOpt from "./opt"
+export default {
+    name: 'zgCarSale',
+    data() {
+        return {
+            form: {
+                token: ''
+            },
+            time: '',
+            opt: {},
+            load: false
+        }
+    },
+    created() {
+        this.form.token = this.getToken;
+        this.getData()
+    },
+    methods: {
+        getData() {
+            this.load = true
+            let obj = Object.assign({},this.form)
+            getCheZhuCountTime(obj).then(res => {
+                let data = res.data;
+                this.time = "中国汽车销量趋势图 "+data.Time;
+                let dx = [];
+                let ds = [];
+                data.Data.forEach(ele => {
+                    dx.push(ele.Time);
+                    ds.push(ele.value)
+                })
+               this.opt = createOpt(dx,ds);
+               this.load = false
+            })
+        },
+        historySale() {
+            this.$router.push("/saleRank/history");
+        }
+    }
+}
+</script>
+
+<style lang="less">
+.zg-outter {
+    width: 1552px;
+    height: 460px;
+    border: 2px solid #0f2a4d;
+    .zg-inner {
+        width: 100%;
+        height: calc(100% - 48px);
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/SaleRank/ChineseCarSale/zgCarSale/opt.js b/src/views/SaleRank/ChineseCarSale/zgCarSale/opt.js
new file mode 100644
index 0000000..245fdc6
--- /dev/null
+++ b/src/views/SaleRank/ChineseCarSale/zgCarSale/opt.js
@@ -0,0 +1,111 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-12 09:12:13
+ * @LastEditTime: 2021-11-02 18:03:08
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/views/BrandInsight/brandTop/opt.js
+ */
+import * as echarts from "echarts";
+import { bigNumberTransform } from "@/utils/gol/dataTool"
+export default function createOpt(dx,ds) {
+    return {
+        grid: {
+            top: "16px",
+            left: "16px",
+            right: "28px",
+            bottom: "16px",
+            containLabel: true,
+        },
+        tooltip: {
+            trigger: "axis",
+            backgroundColor: "#08182F",
+            color: "#fff",
+            borderColor: "#3373CC",
+            textStyle: {
+                color: "#fff", //设置文字颜色
+            },
+            extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
+            formatter: function (params) {
+                var result = "";
+                var dotHtml =
+                    '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#1197b8"></span>';
+                params.forEach(function (item) {
+                    result += item.axisValue + "</br>" + dotHtml + item.data;
+                });
+                return result;
+            },
+        },
+        xAxis: {
+            type: "category",
+            axisTick: {
+                show: false,
+            },
+            axisLine: {
+                show: false,
+                lineStyle: {
+                    color: "#fff",
+                },
+            },
+            data: dx,
+        },
+        yAxis: {
+            type: "value",
+            axisLine: {
+                show: false,
+                lineStyle: {
+                    color: "#FFF",
+                },
+            },
+            axisLabel: {
+                formatter: (value) => {
+                    let str = bigNumberTransform(value);
+                    return str;
+                }
+            },
+            splitLine: {
+                lineStyle: {
+                    type: "dashed", // y轴分割线类型
+                    color: "#012b4b",
+                },
+            },
+        },
+        series: [
+            {
+                name: "2001",
+                data: ds,
+                type: "bar",
+                barWidth: 24,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true, //开启显示
+                            position: 'top', //在上方显示
+                            textStyle: { //数值样式
+                                color: '#fff',
+                                fontSize: 14
+                            }
+                        },
+                        color: new echarts.graphic.LinearGradient(
+                            0,
+                            1,
+                            0,
+                            0,
+                            [
+                                {
+                                    offset: 0,
+                                    color: "rgba(91, 157, 249, 0)", // 0% 处的颜色
+                                },
+                                {
+                                    offset: 1,
+                                    color: "#3373CC", // 100% 处的颜色#3373CC
+                                },
+                            ],
+                            false
+                        ),
+                    },
+                },
+            },
+        ],
+    }
+}
diff --git a/src/views/SaleRank/CitySale/index.vue b/src/views/SaleRank/CitySale/index.vue
new file mode 100644
index 0000000..204d169
--- /dev/null
+++ b/src/views/SaleRank/CitySale/index.vue
@@ -0,0 +1,30 @@
+<template>
+    <div class="citys-outter">
+        CitySale
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'CitySale',
+    data() {
+        return {
+
+        }
+    },
+    created() {
+        this.getData()
+    },
+    methods: {
+        getData() {},
+    }
+}
+</script>
+
+<style lang="less">
+.citys-outter {
+    width: 1552px;
+    // height: 460px;
+    border: 2px solid #0f2a4d;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/SaleRank/HistorySale/index.vue b/src/views/SaleRank/HistorySale/index.vue
new file mode 100644
index 0000000..bbd7ba0
--- /dev/null
+++ b/src/views/SaleRank/HistorySale/index.vue
@@ -0,0 +1,169 @@
+<template>
+    <div class="hs-outter">
+        <v-label-div :title="time">
+            <a-button @click="goBack">返回</a-button>
+        </v-label-div>
+        <div class="d2">
+            <a-range-picker style="width: 360px" v-model="selTime" :disabled-date="disabledDate" valueFormat="YYYY-MM-DD">
+                <a-icon slot="suffixIcon" type="calendar" />
+            </a-range-picker>
+            <a-button @click="onSearch" style="margin-left: 40px" type="primary">查询</a-button>
+        </div>
+        <div class="d-total">
+            <span>合计汽车销量(辆)：<span class="s1">{{totalVal}}</span></span>
+            <span style="margin-left: 16px">月均销量(辆)：<span class="s1">{{avgVal}}</span></span>
+        </div>
+        <div class="d3">
+            <v-table ref="rtable" :columns="columns" :data="tbData" :pagination="pagination" :loading="tableLoading">
+                <template slot="about" slot-scope="text, record">
+                    <a-button type="primary" @click="onBrand(record)">品牌</a-button>
+                    <a-button type="primary" style="margin-left: 16px" @click="onSeries(record)">车型</a-button>
+                </template>
+            </v-table>
+        </div>
+    </div>
+</template>
+
+<script>
+import {getCheZhuCarSalesCompared} from "@/api/SaleRank"
+import {getCheZhuCountTime} from "@/api/SaleRank"
+import moment from "moment";
+export default {
+    name: 'HistorySale',
+    data() {
+        return {
+            time: '中国汽车销量',
+            form: {
+                token: '',
+                sTimeType: 4,
+                sStartTime: '',
+                sEndTime: ''
+            },
+            //时间
+            selTime: [],
+            //表格
+            totalVal: 0,
+            avgVal: 0,
+            tbData: [],
+            tableLoading: false,
+            pagination: {
+                total: 0,
+                pageSize: 20,
+            },
+            columns: [
+                {
+                    title: "时间",
+                    dataIndex: "sourcetime",
+                    key: "sourcetime",
+                    // width: 420
+                },
+                {
+                    title: "销量",
+                    dataIndex: "salescount",
+                    key: "salescount",
+                    // width: 420
+                },
+                {
+                    title: "同比",
+                    dataIndex: "compared",
+                    key: "compared",
+                    // width: 420
+                },
+                {
+                    title: "车型相关",
+                    dataIndex: "about",
+                    key: "about",
+                    // width: 200,
+                    scopedSlots: { customRender: "about" },
+                },
+            ],
+        }
+    },
+    created() {
+        this.form.token = this.getToken;
+        this.getTime();
+    },
+    methods: {
+        getData() {
+            let obj = Object.assign({},this.form);
+            getCheZhuCarSalesCompared(obj).then(res => {
+                let data = res.data;
+                this.tbData = data;
+            })
+        },
+        //获取历史时间
+        getTime() {
+            let o = {token: this.getToken}
+            getCheZhuCountTime(o).then(res => {
+                let data = res.data;
+                this.form.sStartTime = data.Data[0].Time;
+                this.form.sEndTime = data.Data[data.Data.length-1].Time;
+                let obj = {
+                    token: this.getToken,
+                    sTimeType: 4,
+                    sStartTime: this.form.sStartTime + '-01',
+                    sEndTime: this.form.sEndTime + '-01',
+                }
+                getCheZhuCarSalesCompared(obj).then(res => {
+                    let data = res.data;
+                    let totalVal = 0;
+                    data.forEach(ele => {
+                        totalVal = totalVal + ele.salescount * 1;
+                    })
+                    this.totalVal = totalVal;
+                    this.avgVal = parseInt(totalVal / data.length);
+                    this.total = data.length;
+                    this.tbData = data;
+                })
+            });
+        },
+        //返回
+        goBack() {
+            this.$router.go(-1);
+        },
+        disabledDate(current) {
+            return current > moment();
+        },
+        //查询
+        onSearch() {
+            this.form.sStartTime = this.selTime[0];
+            this.form.sEndTime = this.selTime[1];
+            this.getData();
+        },
+        //点击品牌
+        onBrand(val) {
+            let pTime = val.sourcetime;
+        },
+        //点击车型
+        onSeries(val) {
+            let pTime = val.sourcetime;
+        },
+    }
+}
+</script>
+
+<style lang="less">
+.hs-outter {
+    width: 1552px;
+    // height: 460px;
+    border: 2px solid #0f2a4d;
+    .d2 {
+        display: flex;
+        justify-content: flex-start;
+        padding: 16px;
+    }
+    .d-total {
+        color: white;
+        font-size: 18px;
+        margin-left: 16px;
+        .s1 {
+            font-family: Bebas;
+            font-size: 18px;
+            color: rgb(97, 179, 226)
+        }
+    }
+    .d3 {
+        padding: 16px;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/SaleRank/SeriesSale/index.vue b/src/views/SaleRank/SeriesSale/index.vue
new file mode 100644
index 0000000..c4314fe
--- /dev/null
+++ b/src/views/SaleRank/SeriesSale/index.vue
@@ -0,0 +1,30 @@
+<template>
+    <div class="ses-outter">
+        SeriesSale
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'SeriesSale',
+    data() {
+        return {
+
+        }
+    },
+    created() {
+        this.getData()
+    },
+    methods: {
+        getData() {},
+    }
+}
+</script>
+
+<style lang="less">
+.ses-outter {
+    width: 1552px;
+    // height: 460px;
+    border: 2px solid #0f2a4d;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/SaleRank/index.vue b/src/views/SaleRank/index.vue
new file mode 100644
index 0000000..6044de4
--- /dev/null
+++ b/src/views/SaleRank/index.vue
@@ -0,0 +1,174 @@
+<template>
+  <div class="d-container">
+      <div class="sr-outter">
+          <div class="sr-top">
+              <a-select class="choose-brand" v-model="chosenBrand" placeholder="请选择品牌">
+                  <div slot="dropdownRender" class="brand-list">
+                      <vue-scroll>
+                        <div class="brand-items">
+                            <div class="left-letter">A</div>
+                            <div class="right-letter">
+                                <template v-for="(item, index) in brandList">
+                                    <span class="right" :key="index">
+                                        <a-button type="primary" @click="onBrand(item.brandname)" v-if="item.firstword=='A'">{{item.brandname}}</a-button>
+                                    </span>
+                                </template>
+                            </div>  
+                        </div>
+                        <div class="brand-items">
+                            <div class="left-letter">B</div>
+                            <div class="right-letter">
+                                <template v-for="(item, index) in brandList">
+                                    <span class="right" :key="index">
+                                        <a-button type="primary" @click="onBrand(item.brandname)" v-if="item.firstword=='B'">{{item.brandname}}</a-button>
+                                    </span>
+                                </template>
+                            </div>  
+                        </div>
+                      </vue-scroll>
+                  </div>
+              </a-select>
+              <a-select class="choose-series" v-model="chosenSeries" placeholder="请选择车型" @change="onSeries">
+                  <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" @click="onSearch">查销量</a-button>
+          </div>
+          <div class="sr-content">
+              <div class="left-menu">
+                  <a-menu mode="inline" @click="handlerMenu" theme="dark">
+                      <a-menu-item key="main">
+                          <router-link to="/saleRank/main">汽车销量排行榜</router-link>
+                      </a-menu-item>
+                      <a-sub-menu title="按级别">
+                          <a-menu-item key="aLevel">
+                              <router-link to="/saleRank/aLevel">所有级别</router-link>
+                          </a-menu-item>
+                          <!-- <a-menu-item v-for="(item) in specList" :key="item.key">
+                              <router-link :to="'/saleRank/'+item.key">{{item.value}}</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="按价格">
+                          <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="按能源">
+                          <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">
+                  <router-view></router-view>
+              </div>
+          </div>
+      </div>
+  </div>
+</template>
+
+<script>
+import chineseCarSale from "./ChineseCarSale"
+import tableEvent from "./tableEvent"
+export default {
+    name: "saleRank",
+    inject: ['reload'],
+    components: {
+        chineseCarSale
+    },
+    data() {
+        return {
+            form: {
+                token: ''
+            },
+            brandList: [], //品牌列表
+            seriesList: [], //车型列表
+            specList: [], //级别列表
+            priceList: [], //价格列表
+            energyList: [], //能源列表
+            chosenBrand: undefined,
+            chosenSeries: undefined,
+            //当前窗口//
+            window: ''
+            ////
+        };
+    },
+    created() {
+        this.setHeaderType(4);
+        this.initData();
+    },
+    methods: {
+        ...tableEvent
+    }
+}
+</script>
+
+<style lang="less">
+.sr-outter {
+    position: relative;
+    padding: 0px 16px 16px 16px;
+    .sr-top {
+        float: right;
+        margin-right: 16px;
+    }
+    .sr-content {
+        width: 100%;
+        height: auto;
+        display: flex;
+        justify-content: flex-start;
+        margin-top: 8px;
+        .left-menu {
+            width: 320px;
+            padding: 16px;
+        };
+        .sr-view {
+            margin-top: 16px;
+        }
+    }
+}
+
+.choose-brand {
+    width: 400px;
+}
+.choose-series {
+    width: 200px;
+    margin-right: 16px;
+}
+
+.brand-list {
+    color: white;
+    width: 400px;
+    height: 320px;
+    background: rgb(11, 25, 47);
+    .brand-items {
+        display: flex;
+        .left-letter {
+            font-size: 32px;
+            margin-left: 12px;
+        }
+        .right-letter{
+            padding: 8px;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/SaleRank/tableEvent.js b/src/views/SaleRank/tableEvent.js
new file mode 100644
index 0000000..e26d0aa
--- /dev/null
+++ b/src/views/SaleRank/tableEvent.js
@@ -0,0 +1,47 @@
+import { getUserBrand} from "@/api/comm";
+import {getUserSeriesName} from "@/api/comm";
+import {getSpec,getPrice,getEnergy} from "@/api/comm";
+export default {
+    initData() {
+        this.form.token = this.getToken;
+        let obj = Object.assign({},this.form)
+        getUserBrand(obj).then(res => {
+            let data = res.data;
+            this.brandList = data;
+        })
+        getSpec(obj).then(res => {
+            let data = res.data;
+            this.specList = data
+        })
+        getPrice(obj).then(res => {
+            let data = res.data;
+            this.priceList = data
+        })
+        getEnergy(obj).then(res => {
+            let data = res.data;
+            this.energyList = data
+        })
+    },
+    //选择品牌
+    onBrand(val) {
+        this.chosenBrand = val;
+        let o = {token: this.getToken, sBrandName: this.chosenBrand};
+        getUserSeriesName(o).then(res => {
+            let data = res.data;
+            this.seriesList = data;
+            this.chosenSeries = undefined
+        })
+    },
+    //选择车型
+    onSeries(val) {
+        this.chosenSeries = val
+    },
+    //查询销量
+    onSearch() {
+
+    },
+    //左侧菜单栏
+    handlerMenu(val) {
+        this.window = val.key
+    }
+}
\ No newline at end of file