|
|
|
|
@ -6,13 +6,24 @@
|
|
|
|
|
<v-label-div-light v-else title="中国汽车市场竞争格局图" class="lightSy">
|
|
|
|
|
<a-button type="primary" @click="report">导出报告</a-button>
|
|
|
|
|
</v-label-div-light>
|
|
|
|
|
<div class="d2">
|
|
|
|
|
<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: 200px" 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="width: 200px" mode="multiple" v-model="energies" placeholder="选择能源" allowClear>
|
|
|
|
|
<a-select-option v-for="(item) in energyList" :value="item.key" :key="item.value">
|
|
|
|
|
@ -28,6 +39,11 @@
|
|
|
|
|
<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="width: 200px" mode="multiple" v-model="displacements" placeholder="选择排量" allowClear>
|
|
|
|
|
<a-select-option v-for="(item) in displacementList" :value="item.key" :key="item.value">
|
|
|
|
|
@ -43,7 +59,7 @@
|
|
|
|
|
</a-form-model-item>
|
|
|
|
|
</a-form-model>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="d2">
|
|
|
|
|
<div class="d2" v-if="filterActive.length!=0">
|
|
|
|
|
<a-form-model :class="getIsLight?'lightSy':'dark'" layout="inline">
|
|
|
|
|
<a-form-model-item label="选择日期">
|
|
|
|
|
<a-month-picker style="width: 146px" :allowClear="false" v-model="selTime[0]" valueFormat="YYYY-MM" placeholder="开始日期"></a-month-picker>
|
|
|
|
|
@ -51,14 +67,14 @@
|
|
|
|
|
</a-form-model-item>
|
|
|
|
|
</a-form-model>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="d2">
|
|
|
|
|
<div class="d2" v-if="filterActive.length!=0">
|
|
|
|
|
<div :class="getIsLight?'lightSy':'dark'">
|
|
|
|
|
<span v-for="(item, index) in stableList" :key="index">
|
|
|
|
|
<a-button style="margin-left: 12px" @click="onDelete(index)" ghost type="primary" disabled>{{item}}</a-button>
|
|
|
|
|
<a-button style="margin-left: 12px" @click="onDeleteStable(index)" ghost type="primary">{{item.Name}}<a-icon type="close" /></a-button>
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="d2" :class="getIsLight?'lightSy':'dark'">
|
|
|
|
|
<div class="d2" :class="getIsLight?'lightSy':'dark'" v-if="filterActive.length!=0">
|
|
|
|
|
<a-button style="margin-left: 12px" type="primary" icon="plus" @click="hanlderAddSeries">本品车型</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>
|
|
|
|
|
@ -125,6 +141,8 @@ export default {
|
|
|
|
|
modelShow: false,
|
|
|
|
|
brand: '奥迪',
|
|
|
|
|
model: '',
|
|
|
|
|
//筛选框
|
|
|
|
|
filterActive: []
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
@ -175,16 +193,16 @@ export default {
|
|
|
|
|
let data = res.data;
|
|
|
|
|
// [ [车长，售价，销量，车名，'total'],[] ]
|
|
|
|
|
let arr = [];
|
|
|
|
|
let sList = []
|
|
|
|
|
// let sList = []
|
|
|
|
|
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);
|
|
|
|
|
};
|
|
|
|
|
sList.push(ele.Name)
|
|
|
|
|
// sList.push(ele.Name)
|
|
|
|
|
});
|
|
|
|
|
this.stableList = sList;
|
|
|
|
|
this.stableList = data;
|
|
|
|
|
this.totalData = arr;
|
|
|
|
|
this.opt = createOpt(this.totalData, this.extraData);
|
|
|
|
|
this.opt2 = createOptLight(this.totalData, this.extraData)
|
|
|
|
|
@ -195,7 +213,14 @@ export default {
|
|
|
|
|
this.modelShow = true;
|
|
|
|
|
},
|
|
|
|
|
handlerBrand(val) {
|
|
|
|
|
if(val) { this.seriesList.push(val[1].name) };
|
|
|
|
|
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(','),
|
|
|
|
|
@ -246,6 +271,21 @@ export default {
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
onDeleteStable(index) {
|
|
|
|
|
this.stableList.splice(index,1);
|
|
|
|
|
let data = this.stableList;
|
|
|
|
|
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 = createOptLight(this.totalData, this.extraData)
|
|
|
|
|
},
|
|
|
|
|
report() {
|
|
|
|
|
let obj = {
|
|
|
|
|
token: this.form.token,
|
|
|
|
|
@ -266,6 +306,9 @@ export default {
|
|
|
|
|
let data = res.data;
|
|
|
|
|
window.open(data);
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
handlerMenu(value) {
|
|
|
|
|
this.filterActive = value
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@ -280,11 +323,16 @@ export default {
|
|
|
|
|
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: 1060px;
|
|
|
|
|
height: 670px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
