张雄 3 years ago
parent 62386ca077
commit 2f2979d940

@ -0,0 +1,64 @@
import httpService from "@/request"
// 城市-获取时间
export function getExcleTime(params) {
let obj = Object.assign({action: 'getExcleTime', sType: 'ExcleSales'}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'post',
data: obj,
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
}
// 城市-省份排行
export function getSalesType1(params) {
let obj = Object.assign({action: 'getSalesType1', sType: 'ExcleSales'}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'post',
data: obj,
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
}
// 城市-城市排行
export function getSalesType0(params) {
let obj = Object.assign({action: 'getSalesType0', sType: 'ExcleSales'}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'post',
data: obj,
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
}
// 城市-品牌销量排行
export function getSalesType6(params) {
let obj = Object.assign({action: 'getSalesType6', sType: 'ExcleSales'}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'post',
data: obj,
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
}
// 城市-车型销量排行
export function getSalesType7(params) {
let obj = Object.assign({action: 'getSalesType7', sType: 'ExcleSales'}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'post',
data: obj,
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
}

@ -104,6 +104,8 @@ export default {
}
dataI = dataI + 1;
});
console.log(dx);
console.log(ds)
this.opt = createOpt(dx, ds, markData);
this.load = false;
});

@ -1,7 +1,6 @@
<template>
<div class="binfo-outter">
<v-label-div :title="time">
<v-btn @click="onTable"></v-btn>
<v-btn @click="goBack"></v-btn>
</v-label-div>
<!-- <div class="d2">

@ -1,7 +1,6 @@
<template>
<div class="bs-outter">
<v-label-div :title="time+'('+form.sStartTime+'至'+form.sEndTime+')'">
<v-btn>查看图表</v-btn>
<v-btn @click="goBack"></v-btn>
</v-label-div>
<div class="d2">
@ -84,7 +83,18 @@ export default {
},
created() {
this.form.token = this.getToken;
this.getData()
if(this.$route.query.sStartTime) {
this.form.sStartTime = this.$route.query.sStartTime;
this.form.sEndTime = this.$route.query.sStartTime;
getCheZhuCarBrandRanking(this.form).then(res => {
let data = res.data;
this.pagination.total = res.totalNum
this.tbData = data;
this.tableLoad = false
})
} else {
this.getData()
}
},
methods: {
getData() {

@ -1,22 +1,227 @@
<template>
<div class="citys-outter">
CitySale
<v-label-div :title="time+'('+form.sStartTime+'至'+form.sEndTime+')'">
<v-btn @click="goBack"></v-btn>
</v-label-div>
<div class="d2">
<v-tab-group :value="tValue" :style="{ background: 'transparent' }" :btns="btnTimes" @change="handlerTime"></v-tab-group>
<a-range-picker style="width: 360px;margin-left: 40px" 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 v-if="activeIndex == 0" ref="rtable" :columns="columns" :loading="tableLoad" :pagination="pagination" :data="tbData">
<template slot="about" slot-scope="text, record">
<a-button @click="onSalePro(record)"></a-button>
</template>
</v-table>
<v-table v-if="activeIndex == 1" ref="rtable" :columns="columns2" :loading="tableLoad" :pagination="pagination" :data="tbData2">
<template slot="about" slot-scope="text, record">
<a-button @click="onSaleCity(record)"></a-button>
</template>
</v-table>
</div>
<a-modal title="销量明细" width="1200px" :footer="null" @cancel="onClose" :visible="visible">
<v-tab-group :value="pValue" :style="{ background: 'transparent' }" :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>
</a-modal>
<a-modal title="销量明细" width="1200px" :footer="null" @cancel="onClose2" :visible="visible2">
<v-tab-group :value="cValue" :style="{ background: 'transparent' }" :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>
</a-modal>
</div>
</template>
<script>
import {getSalesType1,getSalesType0} from "@/api/SaleRankCity";
import {getSalesType6,getSalesType7} from "@/api/SaleRankCity";
import {getExcleTime} from "@/api/SaleRankCity";
import moment from "moment";
export default {
name: 'CitySale',
data() {
return {
form: {
token: '',
sTimeType: 4,
sStartTime: '',
sEndTime: '',
sBrandType: '',
iPageIndex: 1,
},
selTime: [],
time: '地区销量排行榜',
tValue: 0,
btnTimes: ['省份销量','城市销量'],
activeIndex: 0,
//
tableLoad: false,
columns: [
{title: "排名",dataIndex: "index",key: "index",width: 120},
{title: "省份",dataIndex: "key",key: "key",width: 240},
{title: "销量",dataIndex: "value",key: "value",width: 480},
{title: "明细",dataIndex: "about",key: "about",scopedSlots: { customRender: "about" },},
],
columns2: [
{title: "排名",dataIndex: "index",key: "index",width: 120},
{title: "城市",dataIndex: "key",key: "key",width: 240},
{title: "销量",dataIndex: "value",key: "value",width: 480},
{title: "明细",dataIndex: "about",key: "about",scopedSlots: { customRender: "about" },},
],
tbData: [],
tbData2: [],
pagination: {
pageSize: 20
},
//1
visible: false,
pValue: 0, btnPro:['省份城市销量排行','省份品牌销量排行','省份车型销量排行'],
columnsProCity: [
{title: "排名",dataIndex: "index",key: "index",width: 120},
{title: "城市",dataIndex: "key",key: "key",width: 120},
{title: "销量",dataIndex: "value",key: "value",width: 120},
],
dataProCity: [],
columnsProBrand: [
{title: "排名",dataIndex: "index",key: "index",width: 120},
{title: "品牌",dataIndex: "key",key: "key",width: 120},
{title: "销量",dataIndex: "value",key: "value",width: 120},
],
dataProBrand: [],
columnsProSeries: [
{title: "排名",dataIndex: "index",key: "index",width: 120},
{title: "车型",dataIndex: "key",key: "key",width: 120},
{title: "销量",dataIndex: "value",key: "value",width: 120},
],
dataProSeries: [],
//2
visible2: false,
cValue: 0, btnCity:['城市品牌销量排行','城市车型销量排行'],
columnsCityBrand: [
{title: "排名",dataIndex: "index",key: "index",width: 120},
{title: "品牌",dataIndex: "key",key: "key",width: 120},
{title: "销量",dataIndex: "value",key: "value",width: 120},
],
dataCityBrand: [],
columnsCitySeries: [
{title: "排名",dataIndex: "index",key: "index",width: 120},
{title: "车型",dataIndex: "key",key: "key",width: 120},
{title: "销量",dataIndex: "value",key: "value",width: 120},
],
dataCitySeries: [],
}
},
created() {
this.form.token = this.getToken;
this.getData()
},
methods: {
getData() {},
getData() {
this.tableLoad = true;
let o = {token: this.getToken};
getExcleTime(o).then(res => {
let data = res.data;
this.form.sStartTime = data.startTime;
this.form.sEndTime = data.endTime;
let obj = {
token: this.getToken,
sTimeType: 4,
sStartTime: this.form.sStartTime,
sEndTime: this.form.sEndTime,
sBrandType: '',
iPageIndex: 1,
}
getSalesType1(obj).then(res => {
let data = res.data;
this.tbData = data
this.tableLoad = false;
});
getSalesType0(obj).then(res => {
let data = res.data;
this.tbData2 = data;
this.tableLoad = false;
})
});
},
//
handlerTime(activeIndex) {
this.activeIndex = activeIndex
},
//
goBack() {
this.$router.go(-1);
},
disabledDate(current) {
return current > moment();
},
//
onSearch() {
this.tableLoad = true;
this.form.sStartTime = this.selTime[0];
this.form.sEndTime = this.selTime[1];
getSalesType1(this.form).then(res => {
let data = res.data;
this.tbData = data
this.tableLoad = false;
});
getSalesType0(this.form).then(res => {
let data = res.data;
this.tbData2 = data;
this.tableLoad = false;
})
},
//
onSalePro(record) {
let obj = Object.assign(this.form, {sProv: record.key})
getSalesType0(obj).then(res => {
let data = res.data;
this.dataProCity = data
})
getSalesType6(obj).then(res => {
let data = res.data;
this.dataProBrand = data
})
getSalesType7(obj).then(res => {
let data = res.data;
this.dataProSeries = data
})
this.visible = true;
},
onSaleCity(record) {
let obj = Object.assign(this.form, {sCity: record.key})
getSalesType6(obj).then(res => {
let data = res.data;
this.dataCityBrand = data
})
getSalesType7(obj).then(res => {
let data = res.data;
this.dataCitySeries = data
})
this.visible2 = true;
},
//
handlerProMode(activeIndex) {
this.pValue = activeIndex
},
handlerCityMode(activeIndex) {
this.cValue = activeIndex
},
//
onClose() {
this.visible = false
},
onClose2() {
this.visible2 = false
}
}
}
</script>
@ -26,5 +231,13 @@ export default {
width: 1552px;
// height: 460px;
border: 2px solid #0f2a4d;
.d2 {
display: flex;
justify-content: flex-start;
padding: 16px;
}
.d3 {
padding: 16px;
}
}
</style>

@ -1,7 +1,7 @@
<template>
<div class="hs-outter">
<v-label-div :title="time">
<a-button @click="goBack"></a-button>
<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">
@ -64,7 +64,7 @@ export default {
// width: 420
},
{
title: "同比",
title: "同比(%)",
dataIndex: "compared",
key: "compared",
// width: 420
@ -133,10 +133,26 @@ export default {
//
onBrand(val) {
let pTime = val.sourcetime;
this.$router.push(
{
path: '/saleRank/brandSale',
query: {
sStartTime: pTime
}
}
);
},
//
onSeries(val) {
let pTime = val.sourcetime;
this.$router.push(
{
path: '/saleRank/seriesSale',
query: {
sStartTime: pTime
}
}
);
},
}
}

@ -5,13 +5,33 @@
<v-btn @click="goBack"></v-btn>
</v-label-div>
<div class="d3">
<v-table ref="rtable" :columns="columns" :loading="tableLoad" :data="tbData" :pagination="pagination" @change="handlerPagnation">
<v-table ref="rtable" :columns="columns" :loading="tableLoad" :data="tbData" :pagination="pagination" @change="handlerPagnation" rowKey="rowKey">
</v-table>
</div>
<a-modal :title="tableTitle" width="1200px" :footer="null" @cancel="onClose" :visible="visible">
<div class="modal-table">
<div>
<span>已添加对比车型:</span>
<a-button style="margin-left: 12px" type="primary" disabled>{{this.$route.query.sSeriesName}}</a-button>
<span v-for="(item, index) in seriesList" :key="index">
<a-button style="margin-left: 12px" @click="onDelete(index)" type="primary">{{item}}<a-icon type="close" /></a-button>
</span>
<a-button style="margin-left: 12px" type="primary" icon="plus" @click="hanlderAddSeries"></a-button>
<span style="float: right">
<v-tab-group :value="tValue" :style="{ background: 'transparent' }" :btns="btnTimes" @change="handlerTime"></v-tab-group>
</span>
</div>
<div class="tb-inner">
<v-echarts :opt="opt"></v-echarts>
</div>
</div>
<iSwitchModel :brand="brand" :model="model" :visible.sync="modelShow" @change="handlerBrand"></iSwitchModel>
</a-modal>
</div>
</template>
<script>
import createOpt from "./opt";
import {getCheZhuCarSeriesList} from "@/api/SaleRank"
export default {
name: "SeriesInfo",
@ -61,11 +81,26 @@ export default {
pageSize: 20,
total: 0
},
//
tableTitle: '销量详情(单位:辆)',
visible: false,
dx: [],
ds: [],
seriesList: [],
tValue: 0,
btnTimes:['12个月','6个月','3个月'],
activeIndex: 0,
opt: {},
//
brand: '奥迪',
model: '',
modelShow: false
}
},
created() {
this.form.token = this.getToken;
this.time = this.$route.query.sSeriesName + '销量'
this.time = this.$route.query.sSeriesName + '销量';
this.tableTitle = this.$route.query.sSeriesName + '销量详情(单位:辆)';
this.form.sBrand = this.$route.query.sBrand || "";
this.form.sSeriesName = this.$route.query.sSeriesName || "";
this.getData();
@ -77,10 +112,81 @@ export default {
let data = res.data;
this.pagination.total = res.totalNum;
this.tbData = data;
let dx = []; let ds = [];
data.forEach(ele => {
dx.push(ele.sourcetime);
let dsItem = [];
let o = {
key: ele.carseries,
value: ele.salescount * 1
}
dsItem.push(o);
ds.push(dsItem);
})
this.dx = dx.slice(0,12);
this.ds = ds.slice(0,12);
this.opt = createOpt(this.dx, this.ds)
})
},
//
onTable() {},
onTable() {
this.visible = true;
},
//
handlerTime(activeIndex) {
this.activeIndex = activeIndex;
if(activeIndex == 1) {
this.opt = createOpt(this.dx.slice(0,6), this.ds.slice(0,6))
} else if (activeIndex == 2) {
this.opt = createOpt(this.dx.slice(0,3), this.ds.slice(0,3))
} else {
this.opt = createOpt(this.dx.slice(0,12), this.ds.slice(0,12))
}
},
//
hanlderAddSeries() {
this.modelShow = true;
},
handlerBrand(val) {
let brand = val[0].brandname;
let series = val[1].name;
let obj = {
token: this.getToken,
iPageIndex: 1,
iPageSize: 20,
sBrand: brand,
sSeriesName: series,
};
getCheZhuCarSeriesList(obj).then(res => {
let data = res.data.slice(0,12);
if(data.length != 0) {
for(let i=0;i<data.length;i++) {
let o = {key: data[i].carseries,value: data[i].salescount * 1};
this.ds[i].push(o)
};
this.seriesList.push(series); //
this.handlerTime(this.activeIndex)
} else {
this.$message.warning('该品牌暂无数据');
return;
}
})
this.modelShow = false;
},
//
onDelete(index) {
this.seriesList.splice(index,1);
let newDs = this. ds;
newDs.forEach(ele => {
ele.splice(index+1, 1);
});
this.ds = newDs;
this.handlerTime(this.activeIndex)
},
//
onClose() {
this.visible = false;
},
//
goBack() {
this.$router.go(-1);
@ -98,10 +204,6 @@ export default {
this.tableLoad = false
})
},
//
onTable() {
}
}
}
</script>
@ -115,4 +217,13 @@ export default {
padding: 16px;
}
}
.modal-table {
width: 1200px;
height: 460px;
.tb-inner {
width: 100%;
height: calc(100% - 48px);
margin-top: 24px;
}
}
</style>

@ -0,0 +1,111 @@
/*
* @Author: your name
* @Date: 2021-10-12 10:11:24
* @LastEditTime: 2021-11-19 19:47:53
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandInsight/titsopo/opt.js
*/
import { bigNumberTransform } from "@/utils/gol/dataTool"
function createData(ds = []) {
let testData = {}
ds.forEach(item => {
item.forEach(val => {
if (testData[val.key] === undefined) {
testData[val.key] = {
name: val.key,
type: 'line',
symbol: 'none',
areaStyle: {
opacity: 0.2
},
emphasis: {
focus: 'series'
},
data: [val.value],
};
} else {
testData[val.key].data.push(val.value)
}
})
})
let arr = [];
for(let key in testData) {
arr.push(testData[key])
}
return arr
}
export default function createOpt(dx = [], ds = []) {
let data = createData(ds);
return {
grid: {
left: 10,
right: '5%',
bottom: 10,
top: 52,
containLabel: true
},
tooltip: {
trigger: "axis",
backgroundColor: "#08182F",
color: "#fff",
borderColor: "#3373CC",
textStyle: {
color: "#fff", //设置文字颜色
},
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
},
legend: {
icon: 'roundRect',
textStyle: { //图例文字的样式
color: '#fff',
fontSize: 10
},
y: 12,
x: 16,
itemWidth: 12,
itemHeight: 12
},
xAxis: {
type: 'category',
boundaryGap: false,
axisTick: {
show: false,
},
axisLabel: {
formatter: (value) => {
return value;
}
},
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: data
}
}

@ -1,7 +1,6 @@
<template>
<div class="ses-outter">
<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">
@ -79,7 +78,18 @@ export default {
},
created() {
this.form.token = this.getToken;
this.getData()
if(this.$route.query.sStartTime) {
this.form.sStartTime = this.$route.query.sStartTime;
this.form.sEndTime = this.$route.query.sStartTime;
getCheZhuCarSeriesRanking(this.form).then(res => {
let data = res.data;
this.pagination.total = res.totalNum
this.tbData = data;
this.tableLoad = false
})
} else {
this.getData()
}
},
methods: {
getData() {

Loading…
Cancel
Save