You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
333 lines
14 KiB
333 lines
14 KiB
<template>
|
|
<div :class="getIsLight?'mcomp-light':'mcomp-outter'">
|
|
<v-label-div v-if="!getIsLight" title="全车型竞争关系图谱">
|
|
<a-button type="primary" @click="report">导出报告</a-button>
|
|
</v-label-div>
|
|
<v-label-div-light v-else title="全车型竞争关系图谱" class="lightSy">
|
|
<a-button type="primary" @click="report">导出报告</a-button>
|
|
</v-label-div-light>
|
|
<div :class="getIsLight?'lightSy':'dark'">
|
|
<a-menu mode="inline" style="width: 15%" @openChange="handlerMenu" theme="dark">
|
|
<a-sub-menu title="筛选项" key="sub1">
|
|
</a-sub-menu>
|
|
</a-menu>
|
|
</div>
|
|
<div class="d2" v-if="filterActive.length!=0">
|
|
<a-form-model layout="inline">
|
|
<a-form-model-item :class="getIsLight?'lightSy':'dark'" label="数据筛选">
|
|
<a-select style="width: 184px" mode="multiple" v-model="countries" placeholder="选择国别" allowClear>
|
|
<a-select-option v-for="(item) in countryList" :value="item.key" :key="item.value">
|
|
{{item.value}}
|
|
</a-select-option>
|
|
<a-select-opt-group v-for="(it,id) in countryList" :key="id*10" :label="it.value">
|
|
<a-select-option v-for="(item) in it.data" :value="item.key" :key="item.value">
|
|
{{item.value}}
|
|
</a-select-option>
|
|
</a-select-opt-group>
|
|
</a-select>
|
|
<a-select style="margin-left: 16px;width: 184px" mode="multiple" v-model="energies" placeholder="选择能源" allowClear>
|
|
<a-select-option v-for="(item) in energyList" :value="item.key" :key="item.value">
|
|
{{item.value}}
|
|
</a-select-option>
|
|
</a-select>
|
|
<a-select style="margin-left: 16px;width: 184px" mode="multiple" v-model="prices" placeholder="选择价格" allowClear>
|
|
<a-select-option v-for="(item) in priceList" :value="item.key" :key="item.value">
|
|
{{item.value}}
|
|
</a-select-option>
|
|
</a-select>
|
|
<a-select style="margin-left: 16px;width: 184px" mode="multiple" v-model="specs" placeholder="选择级别" allowClear>
|
|
<a-select-option v-for="(item) in specList" :value="item.key" :key="item.value">
|
|
{{item.value}}
|
|
</a-select-option>
|
|
<a-select-opt-group v-for="(it,id) in specList" :key="id*10" :label="it.value">
|
|
<a-select-option v-for="(item) in it.data" :value="item.key" :key="item.value">
|
|
{{item.value}}
|
|
</a-select-option>
|
|
</a-select-opt-group>
|
|
</a-select>
|
|
<a-select style="margin-left: 16px;width: 184px" mode="multiple" v-model="displacements" placeholder="选择排量" allowClear>
|
|
<a-select-option v-for="(item) in displacementList" :value="item.key" :key="item.value">
|
|
{{item.value}}
|
|
</a-select-option>
|
|
</a-select>
|
|
<a-select style="margin-left: 16px;width: 184px" mode="multiple" v-model="seats" placeholder="选择座位数" allowClear>
|
|
<a-select-option v-for="(item) in seatList" :value="item.key" :key="item.value">
|
|
{{item.value}}
|
|
</a-select-option>
|
|
</a-select>
|
|
<a-button :class="getIsLight?'lightSy':'dark'" type="primary" style="margin-left: 16px" @click="getData">查询</a-button>
|
|
</a-form-model-item>
|
|
</a-form-model>
|
|
</div>
|
|
<div class="d2" v-if="filterActive.length!=0">
|
|
<a-form-model layout="inline">
|
|
<a-form-model-item label="选择日期" :class="getIsLight?'lightSy':'dark'">
|
|
<a-month-picker style="width: 146px" :allowClear="false" v-model="selTime[0]" valueFormat="YYYY-MM" placeholder="开始日期"></a-month-picker>
|
|
<a-month-picker style="width: 146px" :allowClear="false" v-model="selTime[1]" valueFormat="YYYY-MM" placeholder="结束日期"></a-month-picker>
|
|
<a-button style="margin-left: 12px" type="primary" icon="plus" @click="hanlderAddSeries">本品车型</a-button>
|
|
</a-form-model-item>
|
|
</a-form-model>
|
|
</div>
|
|
<div class="d2" v-if="filterActive.length!=0">
|
|
<div :class="getIsLight?'lightSy':'dark'">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
<iSaleModelChoose :brand="brand" :model="model" :visible.sync="modelShow" @change="handlerBrand"></iSaleModelChoose>
|
|
<div class="d3" v-if="getIsLight">
|
|
<v-echarts :opt="opt2"></v-echarts>
|
|
</div>
|
|
<div class="d3" v-else>
|
|
<v-echarts :opt="opt"></v-echarts>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {getCountryS,getPriceRangeS,getSpecName1,getSeatS,getDisplacementS,getEnergyS} from "@/api/SaleRankMarketCommon";
|
|
import {getSalesCompetitionALLList,getSalesCompetitionList,getSalesCompetitionAnalysis} from "@/api/SaleRankMarket";
|
|
import createOpt from "./opt"
|
|
import createOpt2 from "./optLight"
|
|
import {getCheZhuLatestTime} from "@/api/SaleRank"
|
|
export default {
|
|
name: 'CitySale',
|
|
data() {
|
|
return {
|
|
form: {
|
|
token: '',
|
|
sCountryS: '',
|
|
sEnergyS: '',
|
|
sPriceRangeS: '',
|
|
sDisplacementS: '',
|
|
sSeatS: '',
|
|
sSpecName1: '',
|
|
sTimeType: 4,
|
|
sStartTime: '',
|
|
sEndTime:'',
|
|
},
|
|
//中间数组
|
|
countries: [],
|
|
energies: [],
|
|
prices: [],
|
|
specs: [],
|
|
specs2: [],
|
|
displacements: [],
|
|
seats: [],
|
|
selTime: ['',''],
|
|
seriesList: [],
|
|
//选项数据
|
|
countryList: [],
|
|
energyList: [],
|
|
priceList: [],
|
|
specList: [],
|
|
displacementList: [],
|
|
seatList: [],
|
|
//chart数据
|
|
opt: {},
|
|
opt2: {},
|
|
totalData: [],
|
|
extraData: [],
|
|
//车型选择框
|
|
modelShow: false,
|
|
brand: '奥迪',
|
|
model: '',
|
|
//筛选框
|
|
filterActive: []
|
|
}
|
|
},
|
|
created() {
|
|
this.form.token = this.getToken;
|
|
this.getApi();
|
|
},
|
|
methods: {
|
|
getApi() {
|
|
getCountryS({token: this.getToken}).then(res => {
|
|
this.countryList = res.data
|
|
});
|
|
getEnergyS({token: this.getToken}).then(res => {
|
|
this.energyList = res.data
|
|
});
|
|
getPriceRangeS({token: this.getToken}).then(res => {
|
|
this.priceList = res.data
|
|
});
|
|
getSpecName1({token: this.getToken}).then(res => {
|
|
this.specList = res.data
|
|
});
|
|
getDisplacementS({token: this.getToken}).then(res => {
|
|
this.displacementList = res.data
|
|
});
|
|
getSeatS({token: this.getToken}).then(res => {
|
|
this.seatList = res.data
|
|
});
|
|
getCheZhuLatestTime({token: this.form.token}).then(res => {
|
|
this.selTime = [res.data, res.data];
|
|
this.getData()
|
|
})
|
|
},
|
|
getData() {
|
|
let obj = {
|
|
token: this.form.token,
|
|
sCountryS: this.countries.join(','),
|
|
sEnergyS: this.energies.join(','),
|
|
sPriceRangeS: this.prices.join(','),
|
|
sDisplacementS: this.displacements.join(','),
|
|
sSeatS: this.seats.join(','),
|
|
sSpecName1: this.specs.join(','),
|
|
sSpecName2: this.specs2.join(','),
|
|
sTimeType: 4,
|
|
sStartTime: this.selTime[0],
|
|
sEndTime: this.selTime[1],
|
|
}
|
|
getSalesCompetitionALLList(obj).then(res => {
|
|
let data = res.data;
|
|
// [ [车长，售价，销量，车名，'total'],[] ]
|
|
let arr = [];
|
|
data.forEach(ele => {
|
|
if(ele.CheChang * 1 != 0) {
|
|
let item = [ele.CheChang * 1, ele.MainPrice, ele.Count, ele.Name, 'total'];
|
|
// let item = [ele.Count, ele.MainPrice, ele.CheChang * 1, ele.Name, 'total'];
|
|
arr.push(item);
|
|
}
|
|
});
|
|
this.totalData = arr;
|
|
this.opt = createOpt(this.totalData, this.extraData);
|
|
this.opt2 = createOpt2(this.totalData, this.extraData)
|
|
})
|
|
},
|
|
//添加车型
|
|
hanlderAddSeries() {
|
|
this.modelShow = true;
|
|
},
|
|
handlerBrand(val) {
|
|
if(val) {
|
|
if(this.seriesList.indexOf(val[1].name) != -1) {
|
|
this.$message.error('该车型已存在')
|
|
return false
|
|
} else {
|
|
this.seriesList.push(val[1].name)
|
|
}
|
|
};
|
|
let obj = {
|
|
token: this.form.token,
|
|
sSeriesName: this.seriesList.join(','),
|
|
sTimeType: 4,
|
|
sStartTime: this.selTime[0],
|
|
sEndTime: this.selTime[1],
|
|
};
|
|
getSalesCompetitionAnalysis(obj).then(res => {
|
|
let data = res.data;
|
|
let extraArr = [];
|
|
// [ [车长，售价，销量，车名，'extra'],[] ]
|
|
data.forEach(ele => {
|
|
let item = [ele.CheChang * 1, ele.MainPrice, ele.Count, ele.Name, 'extra'];
|
|
extraArr.push(item);
|
|
});
|
|
this.extraData = extraArr;
|
|
this.opt = createOpt(this.totalData, this.extraData);
|
|
this.opt2 = createOpt2(this.totalData, this.extraData)
|
|
})
|
|
this.modelShow = false;
|
|
},
|
|
//删除车型
|
|
onDelete(index) {
|
|
this.seriesList.splice(index,1);
|
|
if(this.seriesList.length == 0) {
|
|
this.extraData = [];
|
|
this.opt = createOpt(this.totalData, this.extraData);
|
|
this.opt2 = createOpt2(this.totalData, this.extraData)
|
|
} else {
|
|
let obj = {
|
|
token: this.form.token,
|
|
sSeriesName: this.seriesList.join(','),
|
|
sTimeType: 4,
|
|
sStartTime: this.selTime[0],
|
|
sEndTime: this.selTime[1],
|
|
};
|
|
getSalesCompetitionAnalysis(obj).then(res => {
|
|
let data = res.data;
|
|
let extraArr = [];
|
|
// [ [车长，售价，销量，车名，'extra'],[] ]
|
|
data.forEach(ele => {
|
|
let item = [ele.CheChang * 1, ele.MainPrice, ele.Count, ele.Name, 'extra'];
|
|
extraArr.push(item);
|
|
});
|
|
this.extraData = extraArr;
|
|
this.opt = createOpt(this.totalData, this.extraData);
|
|
this.opt2 = createOpt2(this.totalData, this.extraData)
|
|
})
|
|
}
|
|
},
|
|
report() {
|
|
let obj = {
|
|
token: this.form.token,
|
|
sCountryS: this.countries.join(','),
|
|
sEnergyS: this.energies.join(','),
|
|
sPriceRangeS: this.prices.join(','),
|
|
sDisplacementS: this.displacements.join(','),
|
|
sSeatS: this.seats.join(','),
|
|
sSpecName1: this.specs.join(','),
|
|
sSpecName2: this.specs2.join(','),
|
|
sTimeType: 4,
|
|
sStartTime: this.selTime[0],
|
|
sEndTime: this.selTime[1],
|
|
isExcel: 1,
|
|
}
|
|
let authBtns = this.getLevelBtn;
|
|
for(let i=0;i<authBtns.length;i++) {
|
|
if(authBtns[i].Id == '815') {
|
|
getSalesCompetitionALLList(obj).then(res => {
|
|
let data = res.data;
|
|
window.open(data);
|
|
})
|
|
return true;
|
|
};
|
|
};
|
|
this.$message.error('权限不足')
|
|
},
|
|
handlerMenu(value) {
|
|
this.filterActive = value
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less">
|
|
.mcomp-outter {
|
|
width: 1552px;
|
|
// height: 460px;
|
|
border: 2px solid #0f2a4d;
|
|
.d2 {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
padding: 8px 16px 0px 16px;
|
|
animation:fadenum 0.5s;
|
|
@keyframes fadenum{ /*设置内容由显示变为隐藏*/
|
|
0%{opacity: 0;}
|
|
100%{opacity: 1;}
|
|
}
|
|
}
|
|
.d3 {
|
|
// padding: 0px 16px 16px 16px;
|
|
width: 100%;
|
|
height: 670px;
|
|
}
|
|
}
|
|
.mcomp-light {
|
|
width: 1552px;
|
|
background: #fff;
|
|
// height: 460px;
|
|
border: 2px solid #0f2a4d;
|
|
.d2 {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
padding: 8px 16px 0px 16px;
|
|
}
|
|
.d3 {
|
|
// padding: 0px 16px 16px 16px;
|
|
width: 100%;
|
|
height: 1060px;
|
|
}
|
|
}
|
|
</style> |