diff --git a/src/api/SaleRank/index.js b/src/api/SaleRank/index.js
index e00e9ab..82eab08 100644
--- a/src/api/SaleRank/index.js
+++ b/src/api/SaleRank/index.js
@@ -78,6 +78,32 @@ export function getCheZhuCarSpecidRankingAll(params) {
     })
 }
 
+// 按级别-汽车级别销售排行榜-图表
+export function getCheZhuCarSpecidChart(params) {
+    let obj =  Object.assign({action: 'getCheZhuCarSpecidChart', sType: 'Marketing'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+
+// 按级别-汽车级别销售排行榜-各级别/更多
+export function getCheZhuCarCategory(params) {
+    let obj =  Object.assign({action: 'getCheZhuCarCategory', 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)
@@ -91,6 +117,19 @@ export function getCheZhuCarPriceRankingAll(params) {
     })
 }
 
+// 按价格-汽车价格销售排行榜-图表
+export function getCheZhuCarPriceChart(params) {
+    let obj =  Object.assign({action: 'getCheZhuCarPriceChart', 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)
@@ -104,6 +143,19 @@ export function getCheZhuCarEnergyRankingAll(params) {
     })
 }
 
+// 按能源-各汽车能源类型销售排行榜-图表
+export function getCheZhuCarEnergyChart(params) {
+    let obj =  Object.assign({action: 'getCheZhuCarEnergyChart', 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)
@@ -115,4 +167,30 @@ export function getCheZhuCarBrandRanking(params) {
             'content-type': 'application/x-www-form-urlencoded'
         }
     })
+}
+
+// 车型销量-车型销量排行榜列表
+export function getCheZhuCarSeriesRanking(params) {
+    let obj =  Object.assign({action: 'getCheZhuCarSeriesRanking', sType: 'Marketing'}, params)
+    return httpService({
+        url: `/api/v6.ashx`,
+        method: 'post',
+        data: obj,
+        headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+        }
+    })
+}
+
+// 车型销量-车型销量排行榜列表-点击销量
+export function getCheZhuCarSeriesList(params) {
+    let obj =  Object.assign({action: 'getCheZhuCarSeriesList', 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/router/index.js b/src/router/index.js
index 4374818..b47ffe5 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -221,6 +221,15 @@ const router = [
                         path: 'aEnergy', //所有能源
                         component: resolve => require(['@/views/SaleRank/AllEnergy/index.vue'], resolve),
                     },
+                    {
+                        path: 'level1', //微型车
+                        component: resolve => require(['@/views/SaleRank/AllLevel/wxCar/index.vue'], resolve),
+                    },
+                    ////
+                    {
+                        path: 'seriesInfo', //微型车
+                        component: resolve => require(['@/views/SaleRank/SeriesInfo/index.vue'], resolve),
+                    },
                 ]
             },
            {
diff --git a/src/styles/antd.less b/src/styles/antd.less
index b485d76..d143f67 100644
--- a/src/styles/antd.less
+++ b/src/styles/antd.less
@@ -271,11 +271,11 @@ li.ant-calendar-time-picker-select-option-selected {
   top: 50px;
 }
 .ant-modal-content {
-  background-color:#010B19 !important;
+  background-color: rgb(18, 35, 65) !important;
   box-shadow: 0px 0px 10px 0px #3373CC !important;
 }
 .ant-modal-header {
-  background-color:#010B19 !important;
+  background-color:rgb(18, 35, 65) !important;
   border-bottom: 1px solid #3373CC !important;
 }
 .ant-modal-footer {
diff --git a/src/views/SaleRank/AllEnergy/index.vue b/src/views/SaleRank/AllEnergy/index.vue
index aa1667a..da1148e 100644
--- a/src/views/SaleRank/AllEnergy/index.vue
+++ b/src/views/SaleRank/AllEnergy/index.vue
@@ -1,10 +1,16 @@
 <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>
+   <div class="aprice-outter">
+       <v-label-div :title="time+'('+form.sStartTime+'至'+form.sEndTime+')'">
+           <v-btn @click="onTable" style="margin-right: 16px">查看图表</v-btn>
+           <v-btn @click="goBack">返回</v-btn>
         </v-label-div>
-        <div class="rank-container">
+        <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="rank-container"  v-loading="load">
             <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">
@@ -16,12 +22,25 @@
                 </div>
             </div>
         </div>
+        <a-modal title="汽车能源销量排行榜趋势图(单位:辆)" width="1200px" :footer="null" @cancel="onClose" :visible="visible">
+            <div class="modal-table">
+                <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" type="primary" style="margin-left: 40px">查询</a-button>
+                <div class="tb-inner">
+                    <v-echarts :opt="opt"></v-echarts>
+                </div>
+            </div>
+        </a-modal>
    </div>
 </template>
 
 <script>
+import moment from "moment";
+import createOpt from "./opt"
 import vRankingKmd from "./v-ranking-kmd"
-import {getCheZhuCarEnergyRankingAll} from "@/api/SaleRank"
+import {getCheZhuCarEnergyRankingAll, getCheZhuCarEnergyChart} from "@/api/SaleRank"
 import {getCheZhuCountTime} from "@/api/SaleRank"
 export default {
     name: "AllLevel",
@@ -38,7 +57,11 @@ export default {
                 sStartTime: '',
                 sEndTime: '',
             },
-            lvList: []
+            lvList: [],
+            opt: {},
+            //表格窗口
+            visible: false,
+            selTime: [],
         }
     },
     created() {
@@ -62,12 +85,53 @@ export default {
                     let data = res.data;
                     this.lvList = data;
                 });
+                // 图表
+                getCheZhuCarEnergyChart(obj).then(res => {
+                    let data = res.data;
+                    let dx = [];
+                    let ds = [];
+                    data.forEach(ele => {
+                        dx.push(ele.key);
+                        ds.push(ele.value);
+                    })
+                    this.opt = createOpt(dx,ds);
+                })
                 this.load = false
             })
         },
         //查看图表
         onTable() {
-
+            this.visible = true;
+        },
+        onClose() {
+            this.visible = false;
+        },
+        //查询
+        onSearch() {
+            this.load = true;
+            this.form.sStartTime = this.selTime[0];
+            this.form.sEndTime = this.selTime[1];
+            let obj = Object.assign({},this.form);
+            // 排行榜
+            getCheZhuCarEnergyRankingAll(obj).then(res => {
+                let data = res.data;
+                this.lvList = data;
+                this.load = false
+            });
+            // 图表
+            getCheZhuCarEnergyChart(obj).then(res => {
+                let data = res.data;
+                let dx = [];
+                let ds = [];
+                data.forEach(ele => {
+                    dx.push(ele.key);
+                    ds.push(ele.value);
+                })
+                this.opt = createOpt(dx,ds);
+            })
+        },
+        disabledDate(current) {
+            return current > moment();
         },
         //返回
         goBack() {
@@ -83,10 +147,15 @@ export default {
 </script>
 
 <style lang="less">
-.ae-outter {
+.aprice-outter {
     width: 1552px;
     // height: 460px;
     border: 2px solid #0f2a4d;
+    .d2 {
+        display: flex;
+        justify-content: flex-start;
+        padding: 16px;
+    }
     .rank-container {
         padding-left: 17px;
         padding-top: 17px;
@@ -109,4 +178,13 @@ export default {
         }
     }
 }
+    .modal-table {
+        width: 1200px;
+        height: 460px;
+        .tb-inner {
+            width: 100%;
+            height: calc(100% - 48px);
+            margin-top: 24px;
+        }
+    }  
 </style>
\ No newline at end of file
diff --git a/src/views/SaleRank/AllEnergy/opt.js b/src/views/SaleRank/AllEnergy/opt.js
new file mode 100644
index 0000000..245fdc6
--- /dev/null
+++ b/src/views/SaleRank/AllEnergy/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/AllLevel/index.vue b/src/views/SaleRank/AllLevel/index.vue
index e274459..b5e288e 100644
--- a/src/views/SaleRank/AllLevel/index.vue
+++ b/src/views/SaleRank/AllLevel/index.vue
@@ -1,10 +1,16 @@
 <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>
+   <div class="alvl-outter">
+       <v-label-div :title="time+'('+form.sStartTime+'至'+form.sEndTime+')'">
+           <v-btn @click="onTable" style="margin-right: 16px">查看图表</v-btn>
+           <v-btn @click="goBack">返回</v-btn>
         </v-label-div>
-        <div class="rank-container">
+        <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="rank-container" v-loading="load">
             <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">
@@ -16,12 +22,25 @@
                 </div>
             </div>
         </div>
+        <a-modal title="汽车级别销量排行榜趋势图(单位:辆)" width="1200px" :footer="null" @cancel="onClose" :visible="visible">
+            <div class="modal-table">
+                <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" type="primary" style="margin-left: 40px">查询</a-button>
+                <div class="tb-inner">
+                    <v-echarts :opt="opt"></v-echarts>
+                </div>
+            </div>
+        </a-modal>
    </div>
 </template>
 
 <script>
+import moment from "moment";
+import createOpt from "./opt"
 import vRankingKmd from "./v-ranking-kmd"
-import {getCheZhuCarSpecidRankingAll} from "@/api/SaleRank"
+import {getCheZhuCarSpecidRankingAll, getCheZhuCarSpecidChart} from "@/api/SaleRank"
 import {getCheZhuCountTime} from "@/api/SaleRank"
 export default {
     name: "AllLevel",
@@ -38,7 +57,11 @@ export default {
                 sStartTime: '',
                 sEndTime: '',
             },
-            lvList: []
+            lvList: [],
+            opt: {},
+            //表格窗口
+            visible: false,
+            selTime: [],
         }
     },
     created() {
@@ -58,16 +81,58 @@ export default {
                     sStartTime: this.form.sStartTime + '-01',
                     sEndTime: this.form.sEndTime + '-01',
                 }
+                // 排行榜
                 getCheZhuCarSpecidRankingAll(obj).then(res => {
                     let data = res.data;
                     this.lvList = data;
                 });
+                // 图表
+                getCheZhuCarSpecidChart(obj).then(res => {
+                    let data = res.data;
+                    let dx = [];
+                    let ds = [];
+                    data.forEach(ele => {
+                        dx.push(ele.key);
+                        ds.push(ele.value);
+                    })
+                    this.opt = createOpt(dx,ds);
+                })
                 this.load = false
             })
         },
         //查看图表
         onTable() {
-
+            this.visible = true;
+        },
+        onClose() {
+            this.visible = false;
+        },
+        //查询
+        onSearch() {
+            this.load = true;
+            this.form.sStartTime = this.selTime[0];
+            this.form.sEndTime = this.selTime[1];
+            let obj = Object.assign({},this.form);
+            // 排行榜
+            getCheZhuCarSpecidRankingAll(obj).then(res => {
+                let data = res.data;
+                this.lvList = data;
+                this.load = false
+            });
+            // 图表
+            getCheZhuCarSpecidChart(obj).then(res => {
+                let data = res.data;
+                let dx = [];
+                let ds = [];
+                data.forEach(ele => {
+                    dx.push(ele.key);
+                    ds.push(ele.value);
+                })
+                this.opt = createOpt(dx,ds);
+            })
+        },
+        disabledDate(current) {
+            return current > moment();
         },
         //返回
         goBack() {
@@ -87,6 +152,11 @@ export default {
     width: 1552px;
     // height: 460px;
     border: 2px solid #0f2a4d;
+    .d2 {
+        display: flex;
+        justify-content: flex-start;
+        padding: 16px;
+    }
     .rank-container {
         padding-left: 17px;
         padding-top: 17px;
@@ -109,4 +179,13 @@ export default {
         }
     }
 }
+    .modal-table {
+        width: 1200px;
+        height: 460px;
+        .tb-inner {
+            width: 100%;
+            height: calc(100% - 48px);
+            margin-top: 24px;
+        }
+    }    
 </style>
\ No newline at end of file
diff --git a/src/views/SaleRank/AllLevel/opt.js b/src/views/SaleRank/AllLevel/opt.js
new file mode 100644
index 0000000..245fdc6
--- /dev/null
+++ b/src/views/SaleRank/AllLevel/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/AllLevel/wxCar/index.vue b/src/views/SaleRank/AllLevel/wxCar/index.vue
new file mode 100644
index 0000000..14de8e3
--- /dev/null
+++ b/src/views/SaleRank/AllLevel/wxCar/index.vue
@@ -0,0 +1,185 @@
+<template>
+    <div class="wxc-outter" v-loading="load">
+        <v-label-div :title="time+'('+form.sStartTime+'至'+form.sEndTime+')'">
+            <v-btn @click="onTable">查看图表</v-btn>
+            <v-btn @click="goBack">返回</v-btn>
+        </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="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="onSale(record)">销量</a-button>
+                </template>
+            </v-table>
+        </div>
+        <a-modal title="微型车销量排行榜趋势图(单位:辆)" width="1200px" :footer="null" @cancel="onClose" :visible="visible">
+            <div class="modal-table">
+                <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" type="primary" style="margin-left: 40px">查询</a-button>
+                <div class="tb-inner">
+                    <v-echarts :opt="opt"></v-echarts>
+                </div>
+            </div>
+        </a-modal>
+    </div>
+</template>
+
+<script>
+import {getCheZhuCarCategory} from "@/api/SaleRank"
+import {getCheZhuCountTime} from "@/api/SaleRank"
+import createOpt from "./opt"
+import moment from "moment";
+export default {
+    name: 'wxCar',
+    data() {
+        return {
+            load: false,
+            time: '微型车销量排行榜',
+            selTime: [],
+            form: {
+                token: '',
+                sStartTime: '',
+                sEndTime: '',
+                sTimeType: 4,
+                sSpec: 'a00'
+            },
+            opt: {},
+            //表格
+            pagination: {
+                pageSize: 20,
+            },
+            tbData: [],
+            tableLoading: false,
+            columns: [
+                {
+                    title: "排名",
+                    dataIndex: "id",
+                    key: "id",
+                    width: 120
+                },
+                {
+                    title: "车型",
+                    dataIndex: "seriesname",
+                    key: "seriesname",
+                },
+                {
+                    title: "销量",
+                    dataIndex: "salescount",
+                    key: "salescount",
+                },
+                {
+                    title: "售价(万元)",
+                    dataIndex: "price",
+                    key: "price",
+                },
+                {
+                    title: "车型相关",
+                    dataIndex: "about",
+                    key: "about",
+                    scopedSlots: { customRender: "about" },
+                },
+            ],
+            //图表
+            visible: false,
+        }
+    },
+    created() {
+        this.form.token = this.getToken
+        this.getData();
+    },
+    methods: {
+        getData() {
+            this.load = true;
+            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',
+                    sSpec: 'a00'
+                }
+                getCheZhuCarCategory(obj).then(res => {
+                    let data = res.data;
+                    this.tbData = data;
+                    let dx = [];
+                    let ds = [];
+                    data.forEach(ele => {
+                        dx.push(ele.seriesname);
+                        ds.push(ele.salescount);
+                    })
+                    this.opt = createOpt(dx,ds);
+                });
+                this.load = false
+            });
+        },
+        //查询
+        onSearch() {
+            this.form.sStartTime = this.selTime[0];
+            this.form.sEndTime = this.selTime[1];
+            let obj = Object.assign({},this.form);
+            getCheZhuCarCategory(obj).then(res => {
+                let data = res.data;
+                this.tbData = data;
+                let dx = [];
+                let ds = [];
+                data.forEach(ele => {
+                    dx.push(ele.seriesname);
+                    ds.push(ele.salescount);
+                })
+                this.opt = createOpt(dx,ds);        
+            })
+        },
+        //查看图表
+        onTable() {
+            this.visible = true;
+        },
+        onClose() {
+            this.visible = false;
+        },
+        //返回
+        goBack() {
+            this.$router.go(-1);
+        },
+        disabledDate(current) {
+            return current > moment();
+        },
+        //点击销量
+        onSale(value) {
+            let id = value.seriesid
+            console.log(id)
+        }
+    }
+}
+</script>
+
+<style lang="less">
+    .wxc-outter {
+        width: 1552px;
+        border: 2px solid #0f2a4d;
+        .d2 {
+            display: flex;
+            justify-content: flex-start;
+            padding: 16px;
+        }
+    }
+    .modal-table {
+        width: 1200px;
+        height: 460px;
+        .tb-inner {
+            width: 100%;
+            height: calc(100% - 48px);
+            margin-top: 24px;
+        }
+    }    
+</style>
\ No newline at end of file
diff --git a/src/views/SaleRank/AllLevel/wxCar/opt.js b/src/views/SaleRank/AllLevel/wxCar/opt.js
new file mode 100644
index 0000000..245fdc6
--- /dev/null
+++ b/src/views/SaleRank/AllLevel/wxCar/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/AllPrice/index.vue b/src/views/SaleRank/AllPrice/index.vue
index 69efe4a..034702f 100644
--- a/src/views/SaleRank/AllPrice/index.vue
+++ b/src/views/SaleRank/AllPrice/index.vue
@@ -1,10 +1,16 @@
 <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>
+   <div class="aprice-outter">
+       <v-label-div :title="time+'('+form.sStartTime+'至'+form.sEndTime+')'">
+           <v-btn @click="onTable" style="margin-right: 16px">查看图表</v-btn>
+           <v-btn @click="goBack">返回</v-btn>
         </v-label-div>
-        <div class="rank-container">
+        <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="rank-container"  v-loading="load">
             <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">
@@ -16,12 +22,25 @@
                 </div>
             </div>
         </div>
+        <a-modal title="汽车价格销量排行榜趋势图(单位:辆)" width="1200px" :footer="null" @cancel="onClose" :visible="visible">
+            <div class="modal-table">
+                <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" type="primary" style="margin-left: 40px">查询</a-button>
+                <div class="tb-inner">
+                    <v-echarts :opt="opt"></v-echarts>
+                </div>
+            </div>
+        </a-modal>
    </div>
 </template>
 
 <script>
+import moment from "moment";
+import createOpt from "./opt"
 import vRankingKmd from "./v-ranking-kmd"
-import {getCheZhuCarPriceRankingAll} from "@/api/SaleRank"
+import {getCheZhuCarPriceRankingAll, getCheZhuCarPriceChart} from "@/api/SaleRank"
 import {getCheZhuCountTime} from "@/api/SaleRank"
 export default {
     name: "AllLevel",
@@ -38,7 +57,11 @@ export default {
                 sStartTime: '',
                 sEndTime: '',
             },
-            lvList: []
+            lvList: [],
+            opt: {},
+            //表格窗口
+            visible: false,
+            selTime: [],
         }
     },
     created() {
@@ -62,12 +85,53 @@ export default {
                     let data = res.data;
                     this.lvList = data;
                 });
+                // 图表
+                getCheZhuCarPriceChart(obj).then(res => {
+                    let data = res.data;
+                    let dx = [];
+                    let ds = [];
+                    data.forEach(ele => {
+                        dx.push(ele.key);
+                        ds.push(ele.value);
+                    })
+                    this.opt = createOpt(dx,ds);
+                })
                 this.load = false
             })
         },
         //查看图表
         onTable() {
-
+            this.visible = true;
+        },
+        onClose() {
+            this.visible = false;
+        },
+        //查询
+        onSearch() {
+            this.load = true;
+            this.form.sStartTime = this.selTime[0];
+            this.form.sEndTime = this.selTime[1];
+            let obj = Object.assign({},this.form);
+            // 排行榜
+            getCheZhuCarPriceRankingAll(obj).then(res => {
+                let data = res.data;
+                this.lvList = data;
+                this.load = false
+            });
+            // 图表
+            getCheZhuCarPriceChart(obj).then(res => {
+                let data = res.data;
+                let dx = [];
+                let ds = [];
+                data.forEach(ele => {
+                    dx.push(ele.key);
+                    ds.push(ele.value);
+                })
+                this.opt = createOpt(dx,ds);
+            })
+        },
+        disabledDate(current) {
+            return current > moment();
         },
         //返回
         goBack() {
@@ -87,6 +151,11 @@ export default {
     width: 1552px;
     // height: 460px;
     border: 2px solid #0f2a4d;
+    .d2 {
+        display: flex;
+        justify-content: flex-start;
+        padding: 16px;
+    }
     .rank-container {
         padding-left: 17px;
         padding-top: 17px;
@@ -109,4 +178,13 @@ export default {
         }
     }
 }
+    .modal-table {
+        width: 1200px;
+        height: 460px;
+        .tb-inner {
+            width: 100%;
+            height: calc(100% - 48px);
+            margin-top: 24px;
+        }
+    }  
 </style>
\ No newline at end of file
diff --git a/src/views/SaleRank/AllPrice/opt.js b/src/views/SaleRank/AllPrice/opt.js
new file mode 100644
index 0000000..245fdc6
--- /dev/null
+++ b/src/views/SaleRank/AllPrice/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/BrandSale/index.vue b/src/views/SaleRank/BrandSale/index.vue
index 5379f7a..4a2b915 100644
--- a/src/views/SaleRank/BrandSale/index.vue
+++ b/src/views/SaleRank/BrandSale/index.vue
@@ -1,13 +1,29 @@
 <template>
     <div class="bs-outter">
         <v-label-div :title="time">
-            <a-button @click="goBack">返回</a-button>
+            <v-btn>查看图表</v-btn>
+            <v-btn @click="goBack">返回</v-btn>
         </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="d3">
+            <v-table ref="rtable" :columns="columns" :data="tbData" :pagination="pagination">
+                <template slot="about">
+                    <a-button>销量</a-button>
+                </template>
+            </v-table>
+        </div>
     </div>
 </template>
 
 <script>
 import {getCheZhuCarBrandRanking} from "@/api/SaleRank"
+import {getCheZhuCountTime} from "@/api/SaleRank"
+import moment from "moment";
 export default {
     name: 'BrandSale',
     data() {
@@ -15,12 +31,47 @@ export default {
             form: {
                 token: '',
                 sTimeType: 4,
-                sStartTime: '2021-01',
-                sEndTime: '2021-12',
+                sStartTime: '',
+                sEndTime: '',
                 iPageIndex: 1,
                 iPageSize: 20,
             },
-            time: '汽车品牌销量排行榜'
+            selTime: [],
+            time: '汽车品牌销量排行榜',
+            //表格
+            columns: [
+                {
+                    title: "排名",
+                    dataIndex: "id",
+                    key: "id",
+                    width: 120
+                },
+                {
+                    title: "品牌",
+                    dataIndex: "brand",
+                    key: "brand",
+                },
+                {
+                    title: "销量",
+                    dataIndex: "salescount",
+                    key: "salescount",
+                },
+                {
+                    title: "占品牌份额",
+                    dataIndex: "percentage",
+                    key: "percentage"
+                },
+                {
+                    title: "品牌相关",
+                    dataIndex: "about",
+                    key: "about",
+                    scopedSlots: { customRender: "about" },
+                },
+            ],
+            tbData: [],
+            pagination: {
+                pageSize: 20,
+            },
         }
     },
     created() {
@@ -29,16 +80,38 @@ export default {
     },
     methods: {
         getData() {
-            let obj = Object.assign({},this.form)
-            getCheZhuCarBrandRanking(obj).then(res => {
+            let o = {token: this.getToken};
+            getCheZhuCountTime(o).then(res => {
                 let data = res.data;
-                console.log(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',
+                    iPageIndex: 1,
+                    iPageSize: 20,
+                }
+                getCheZhuCarBrandRanking(obj).then(res => {
+                    let data = res.data;
+                    console.log(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();
+        },
     }
 }
 </script>
@@ -48,5 +121,13 @@ export default {
     width: 1552px;
     // height: 460px;
     border: 2px solid #0f2a4d;
+    .d2 {
+        display: flex;
+        justify-content: flex-start;
+        padding: 16px;
+    }
+    .d3 {
+        padding: 16px;
+    }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/SaleRank/SeriesInfo/index.vue b/src/views/SaleRank/SeriesInfo/index.vue
new file mode 100644
index 0000000..5bd0ef2
--- /dev/null
+++ b/src/views/SaleRank/SeriesInfo/index.vue
@@ -0,0 +1,55 @@
+<template>
+    <div class="sinfo-outter">
+        <v-label-div :title="time">
+            <v-btn @click="onTable">查看图表</v-btn>
+            <v-btn @click="goBack">返回</v-btn>
+        </v-label-div>
+    </div>
+</template>
+
+<script>
+import {getCheZhuCarSeriesList} from "@/api/SaleRank"
+export default {
+    name: "SeriesInfo",
+    data() {
+        return {
+            form: {
+                token: '',
+                iPageIndex: 1,
+                iPageSize: 20,
+                sBrand: '',
+                sSeriesName: '',
+            },
+            time: '销量'
+        }
+    },
+    created() {
+        this.form.token = this.getToken;
+        // this.form.sBrand = this.$route.query.sBrand || "";
+        // this.form.sSeriesName = this.$route.query.sSeriesName || "";
+        this.getData();
+    },
+    methods: {
+        getData() {
+            let obj = Object.assign(this.form, {});
+            getCheZhuCarSeriesList(obj).then(res => {
+                console.log(res)
+            })
+        },
+        //查看图表
+        onTable() {},
+        //返回
+        goBack() {
+            this.$router.go(-1);
+        },
+    }
+}
+</script>
+
+<style lang="less">
+.sinfo-outter {
+    width: 1552px;
+    // height: 460px;
+    border: 2px solid #0f2a4d;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/SaleRank/SeriesSale/index.vue b/src/views/SaleRank/SeriesSale/index.vue
index c4314fe..b136d32 100644
--- a/src/views/SaleRank/SeriesSale/index.vue
+++ b/src/views/SaleRank/SeriesSale/index.vue
@@ -1,22 +1,159 @@
 <template>
     <div class="ses-outter">
-        SeriesSale
+        <v-label-div :title="time">
+            <v-btn @click="onTable">查看图表</v-btn>
+            <v-btn @click="goBack">返回</v-btn>
+        </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="d3">
+            <v-table ref="rtable" :columns="columns" :data="tbData" :loading="tableLoading" :pagination="pagination" @change="handlerPagnation">
+                <template slot="about" slot-scope="text, record">
+                    <a-button @click="onSale(record)">销量</a-button>
+                </template>
+            </v-table>
+        </div>
     </div>
 </template>
 
 <script>
+import {getCheZhuCarSeriesRanking} from "@/api/SaleRank"
+import {getCheZhuCountTime} from "@/api/SaleRank"
+import moment from "moment";
 export default {
     name: 'SeriesSale',
     data() {
         return {
-
+            form: {
+                token: '',
+                sTimeType: 4,
+                sStartTime: '',
+                sEndTime: '',
+                iPageIndex: 1,
+                iPageSize: 20,
+            },
+            selTime: [],
+            time: '车型销量排行榜',
+            //表格
+            tableLoading: false,
+            columns: [
+                {
+                    title: "排名",
+                    dataIndex: "id",
+                    key: "id",
+                    width: 120
+                },
+                {
+                    title: "车型",
+                    dataIndex: "seriesname",
+                    key: "seriesname",
+                },
+                {
+                    title: "销量",
+                    dataIndex: "salescount",
+                    key: "salescount",
+                },
+                {
+                    title: "售价",
+                    dataIndex: "price",
+                    key: "price"
+                },
+                {
+                    title: "车型相关",
+                    dataIndex: "about",
+                    key: "about",
+                    scopedSlots: { customRender: "about" },
+                },
+            ],
+            tbData: [],
+            pagination: {
+                total: 0,
+                current: 1,
+                pageSize: 20,
+            },
         }
     },
     created() {
+        this.form.token = this.getToken;
         this.getData()
     },
     methods: {
-        getData() {},
+        getData() {
+            let o = {token: this.getToken};
+            this.tableLoading = true;
+            getCheZhuCountTime(o).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';
+                let obj = {
+                    token: this.getToken,
+                    sTimeType: 4,
+                    sStartTime: this.form.sStartTime,
+                    sEndTime: this.form.sEndTime,
+                    iPageIndex: 1,
+                    iPageSize: 20,
+                }
+                getCheZhuCarSeriesRanking(obj).then(res => {
+                    let data = res.data;
+                    this.pagination.total = res.totalNum
+                    this.tbData = data;
+                    this.tableLoading = false
+                })
+            });
+        },
+        //查看图表
+        onTable() {},
+        //返回
+        goBack() {
+            this.$router.go(-1);
+        },
+        disabledDate(current) {
+            return current > moment();
+        },
+        //查询
+        onSearch() {
+            this.tableLoading = true;
+            this.form.sStartTime = this.selTime[0];
+            this.form.sEndTime = this.selTime[1];
+            getCheZhuCarSeriesRanking(this.form).then(res => {
+                let data = res.data;
+                this.pagination.total = res.totalNum
+                this.tbData = data;
+                this.tableLoading = false
+            })
+        },
+        //改变页面数据
+        handlerPagnation(page) {
+            this.tableLoading = true;
+            let cur = page.current;
+            this.pagination.current = cur;
+            this.form.iPageIndex = cur;
+            getCheZhuCarSeriesRanking(this.form).then(res => {
+                let data = res.data;
+                this.pagination.total = res.totalNum
+                this.tbData = data;
+                this.tableLoading = false
+            })
+        },
+        //点击销量
+        onSale(record) {
+            console.log(record)
+            let sBrand = record.brand;
+            let sSeriesName = record.seriesname;
+            this.$router.push(
+                {
+                    path: '/saleRank/seriesInfo',
+                    query: {
+                        sBrand: sBrand,
+                        sSeriesName: sSeriesName
+                    }
+                }
+            );
+        }
     }
 }
 </script>
@@ -26,5 +163,13 @@ export default {
     width: 1552px;
     // height: 460px;
     border: 2px solid #0f2a4d;
+    .d2 {
+        display: flex;
+        justify-content: flex-start;
+        padding: 16px;
+    }
+    .d3 {
+        padding: 16px;
+    }
 }
 </style>
\ No newline at end of file