|
|
|
@ -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>
|
|
|
|
|
<v-table v-if="pValue == 0" ref="rtable" :columns="columnsProCity" :data="dataProCity">
|
|
|
|
|
</v-table>
|
|
|
|
|
<v-table v-if="pValue == 1" ref="rtable" :columns="columnsProBrand" :data="dataProBrand">
|
|
|
|
|
</v-table>
|
|
|
|
|
<v-table v-if="pValue == 2" ref="rtable" :columns="columnsProSeries" :data="dataProSeries">
|
|
|
|
|
</v-table>
|
|
|
|
|
<div v-if="form.sBrand == undefined">
|
|
|
|
|
<v-tab-group :value="pValue" :style="{ background: 'transparent',padding: '0px 0px 12px 0px' }" :btns="btnPro" @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" ref="rtable" :columns="columnsProBrand" :data="dataProBrand">
|
|
|
|
|
</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>
|
|
|
|
|
<v-table v-if="cValue == 0" ref="rtable" :columns="columnsCityBrand" :data="dataCityBrand">
|
|
|
|
|
</v-table>
|
|
|
|
|
<v-table v-if="cValue == 1" ref="rtable" :columns="columnsCitySeries" :data="dataCitySeries">
|
|
|
|
|
</v-table>
|
|
|
|
|
<div v-if="form.sBrand == undefined && form.sSeriesName == undefined">
|
|
|
|
|
<v-tab-group :value="cValue" :style="{ background: 'transparent',padding: '0px 0px 12px 0px' }" :btns="btnCity" @change="handlerCityMode"></v-tab-group>
|
|
|
|
|
<v-table v-if="cValue == 0" ref="rtable" :columns="columnsCityBrand" :data="dataCityBrand">
|
|
|
|
|
</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() {
|
|
|
|
|