zx

src/views/SaleRank/CitySale/index.vue

@@ -7,25 +7,30 @@
             <a-form-model layout="inline">
                 <a-form-model-item label="选择日期">
                     <a-month-picker style="width: 146px" :allowClear="false" v-model="selTime[0]" :disabled-date="disabledDate" valueFormat="YYYY-MM" placeholder="请选择开始日期"></a-month-picker>
-                    <a-month-picker style="width: 146px" :allowClear="false" v-model="selTime[1]" :disabled-date="disabledDate" valueFormat="YYYY-MM" placeholder="请选择结束日期"></a-month-picker>
+                    <a-month-picker style="width: 146px;margin-left: 12px" :allowClear="false" v-model="selTime[1]" :disabled-date="disabledDate" valueFormat="YYYY-MM" placeholder="请选择结束日期"></a-month-picker>
                 </a-form-model-item>
                 <a-form-model-item label="品牌车型">
                     <a-select style="width: 160px" v-model="form.sBrand" placeholder="请选择品牌" @dropdownVisibleChange="brandDrawer" :dropdownMatchSelectWidth="false" allowClear>
                         <div slot="dropdownRender"></div>
                     </a-select>
-                    <a-select style="width: 160px" v-model="form.sSeriesName" placeholder="请选择车型" allowClear>
+                    <a-select style="width: 160px;margin-left: 12px" v-model="form.sSeriesName" placeholder="请选择车型" allowClear>
                         <a-select-option v-for="(item,index) in seriesList" :value="item.name" :key="index">
                             {{item.name}}
                         </a-select-option>
                     </a-select>
-                    <a-select style="width: 160px" v-model="form.sBrandType" placeholder="请选择类型">
+                    <a-select style="width: 160px;margin-left: 12px" v-model="form.sBrandType" placeholder="请选择类型">
                         <a-select-option v-for="(item,index) in brandTypeList" :value="item.key" :key="index">
                             {{item.value}}
                         </a-select-option>
                     </a-select>
                 </a-form-model-item>
+                <a-form-model-item label="选择城市">
+                    <a-select style="width: 80px" v-model="form.sCity" @dropdownVisibleChange="cityDrawer" :dropdownMatchSelectWidth="false" allowClear>
+                        <div slot="dropdownRender"></div>
+                    </a-select>
+                </a-form-model-item>
                 <a-form-model-item>
-                    <a-button @click="onSearch" style="margin-left: 40px" type="primary">查询</a-button>
+                    <a-button @click="onSearch" style="margin-left: 12px" type="primary">查询</a-button>
                 </a-form-model-item>
             </a-form-model> 
         </div>
@@ -42,20 +47,36 @@
             </v-table>
         </div>
         <a-modal title="销量明细" width="1200px" :footer="null" @cancel="onClose" :visible="visible">
-            <v-tab-group :value="pValue" :style="{ background: 'transparent',padding: '0px 0px 12px 0px' }" :btns="btnPro" @change="handlerProMode"></v-tab-group>
+            <div v-if="form.sBrand == undefined">
-            <v-table v-if="pValue == 0" ref="rtable" :columns="columnsProCity" :data="dataProCity">
+                <v-tab-group :value="pValue" :style="{ background: 'transparent',padding: '0px 0px 12px 0px' }" :btns="btnPro" @change="handlerProMode"></v-tab-group>
-            </v-table>
+                <v-table v-if="pValue == 0" ref="rtable" :columns="columnsProCity" :data="dataProCity">
-            <v-table v-if="pValue == 1" ref="rtable" :columns="columnsProBrand" :data="dataProBrand">
+                </v-table>
-            </v-table>
+                <v-table v-if="pValue == 1" ref="rtable" :columns="columnsProBrand" :data="dataProBrand">
-            <v-table v-if="pValue == 2" ref="rtable" :columns="columnsProSeries" :data="dataProSeries">
+                </v-table>
-            </v-table>
+                <v-table v-if="pValue == 2" ref="rtable" :columns="columnsProSeries" :data="dataProSeries">
+                </v-table>
+            </div>
+            <div v-else>
+                <v-tab-group :value="pValue" :style="{ background: 'transparent',padding: '0px 0px 12px 0px' }" :btns="btnProBrand" @change="handlerProMode"></v-tab-group>
+                <v-table v-if="pValue == 0" ref="rtable" :columns="columnsProCity" :data="dataProCity">
+                </v-table>
+                <v-table v-if="pValue == 1 || pValue == 2" ref="rtable" :columns="columnsProSeries" :data="dataProSeries">
+                </v-table>
+            </div>
         </a-modal>
         <a-modal title="销量明细" width="1200px" :footer="null" @cancel="onClose2" :visible="visible2">
-            <v-tab-group :value="cValue" :style="{ background: 'transparent',padding: '0px 0px 12px 0px' }" :btns="btnCity" @change="handlerCityMode"></v-tab-group>
+            <div v-if="form.sBrand == undefined && form.sSeriesName == undefined">
-            <v-table v-if="cValue == 0" ref="rtable" :columns="columnsCityBrand" :data="dataCityBrand">
+                <v-tab-group :value="cValue" :style="{ background: 'transparent',padding: '0px 0px 12px 0px' }" :btns="btnCity" @change="handlerCityMode"></v-tab-group>
-            </v-table>
+                <v-table v-if="cValue == 0" ref="rtable" :columns="columnsCityBrand" :data="dataCityBrand">
-            <v-table v-if="cValue == 1" ref="rtable" :columns="columnsCitySeries" :data="dataCitySeries">
+                </v-table>
-            </v-table>
+                <v-table v-if="cValue == 1" ref="rtable" :columns="columnsCitySeries" :data="dataCitySeries">
+                </v-table>
+            </div>
+            <div v-else>
+                <v-tab-group :value="cValue" :style="{ background: 'transparent',padding: '0px 0px 12px 0px' }" :btns="btnCityBrand" @change="handlerCityMode"></v-tab-group>
+                <v-table ref="rtable" :columns="columnsCitySeries" :data="dataCitySeries">
+                </v-table>
+            </div>
         </a-modal>
         <a-drawer :visible="drVisible" title="请选择品牌" placement="left" @close="drClose">
               <div class="drawer">
@@ -73,7 +94,24 @@
                     </div>
                   </vue-scroll>
               </div>
-          </a-drawer>
+        </a-drawer>
+        <a-drawer :visible="cityVisible" title="请选择城市" placement="right" @close="cityClose">
+            <div class="drawer">
+                  <a-anchor style="width: 15%" @click="anchorClick">
+                      <a-anchor-link v-for="(item, index) in letters" :key="index" :href="`#${item}`" :title="item"></a-anchor-link>
+                  </a-anchor>
+                  <vue-scroll ref="vs">
+                    <div class="drawer-right">
+                        <div v-for="(item, index) in cityList" :key="index">
+                            <span :id="'#'+letters[index]" class="drawer-letter">{{letters[index]}}</span>
+                            <div v-for="(it, id) in item" :key="id">
+                                <a class="drawer-link" @click="drawerChooseCity(it.label,it.prov)">{{it.label}}</a>
+                            </div>
+                        </div>
+                    </div>
+                  </vue-scroll>
+              </div>
+        </a-drawer>
     </div>
 </template>
 
@@ -93,6 +131,7 @@ export default {
                 iPageIndex: 1,
                 sBrand: undefined,
                 sSeriesName: undefined,
+                sCity: undefined,
             },
             seriesList:[],
             brandTypeList:[],
@@ -129,7 +168,8 @@ export default {
             },
             //窗口1
             visible: false,
-            pValue: 0, btnPro:['省份城市销量排行','省份品牌销量排行','省份车型销量排行'],
+            pValue: 0, btnPro: ['省份城市销量排行','省份品牌销量排行','省份车型销量排行'],
+            btnProBrand: ['省份城市销量排行','省份车型销量排行'],
             columnsProCity: [
                 {title: "排名",dataIndex: "index",key: "index",width: 120},
                 {title: "城市",dataIndex: "key",key: "key",width: 120},
@@ -151,6 +191,7 @@ export default {
             //窗口2
             visible2: false,
             cValue: 0, btnCity:['城市品牌销量排行','城市车型销量排行'],
+            btnCityBrand: ['城市车型销量排行'],
             columnsCityBrand: [
                 {title: "排名",dataIndex: "index",key: "index",width: 120},
                 {title: "品牌",dataIndex: "key",key: "key",width: 120},
@@ -167,6 +208,8 @@ export default {
             drVisible: false,
             brandList: [],
             letters: [],
+            cityVisible: false,
+            cityList: [],
         }
     },
     created() {

src/views/SaleRank/CitySale/tbEvent.js

@@ -2,6 +2,7 @@ import {getSalesType1,getSalesType0} from "@/api/SaleRankCity";
 import {getSalesType6,getSalesType7} from "@/api/SaleRankCity";
 import {getExcleTime} from "@/api/SaleRankCity";
 import {getBrandType, getUserBrand, getUserSeriesName} from "@/api/comm"
+import {getSalesCity} from "@/api/SaleRankCity"
 import moment from "moment";
 
 export default {
@@ -27,6 +28,23 @@ export default {
             this.brandList = brandList;
             this.letters = letters;
         })
+        getSalesCity({token: this.getToken}).then(res => {
+            let data = res.data;
+            let letters = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
+            let cityList = [[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[]];
+            for(let i = 0; i< data.length; i++) {
+                let index = letters.indexOf(data[i].City_FirstWord)
+                if(index >= 0) {
+                    let obj = {
+                        label: data[i].City,
+                        value: data[i].City,
+                        prov: data[i].Prov,
+                    };
+                    cityList[index].push(obj)
+                }
+            }
+            this.cityList = cityList;
+        })
     },
     getData() {
         this.tableLoad = true;
@@ -62,7 +80,8 @@ export default {
     },
     //切换类型
     handlerTime(activeIndex) {
-        this.activeIndex = activeIndex
+        this.activeIndex = activeIndex;
+        this.tValue = activeIndex;
         if(this.activeIndex == 0) {
             getSalesType1(this.form).then(res => {
                 let data = res.data;
@@ -88,6 +107,9 @@ export default {
         this.tableLoad = true;
         this.form.sStartTime = this.selTime[0];
         this.form.sEndTime = this.selTime[1];
+        if(this.form.sCity != undefined) {
+            this.handlerTime(1)
+        }
         if(this.activeIndex == 0) {
             getSalesType1(this.form).then(res => {
                 let data = res.data;
@@ -113,6 +135,7 @@ export default {
             sBrandType: this.form.sBrandType,
             iPageIndex: 1,
             sProv: record.key,
+            sCity: '',
             sBrand: this.form.sBrand
         }
         let o = {
@@ -200,6 +223,12 @@ export default {
     drClose() {
         this.drVisible = false
     },
+    cityDrawer() {
+        this.cityVisible = true
+    },
+    cityClose() {
+        this.cityVisible = false
+    },
     //锚点
     anchorClick(e, link) {
         // 阻止点击的默认事件修改路由
@@ -218,4 +247,8 @@ export default {
         })
         this.drVisible = false;
     },
+    drawerChooseCity(val,prov) {
+        this.form.sCity = val;
+        this.cityVisible = false;
+    }
 }

src/views/SaleRank/index.vue

@@ -174,6 +174,7 @@ export default {
         }
         .choose-series {
             width: 240px;
+            margin-left: 18px;
         }
     }
     .sr-content {