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.
251 lines
9.0 KiB
251 lines
9.0 KiB
<template>
|
|
<div class="d-container">
|
|
<div class="sac-outter">
|
|
<div class="sac-inner">
|
|
<v-label-div title="分析设置">
|
|
<v-btn @click="goBack">返回专项分析</v-btn>
|
|
</v-label-div>
|
|
<div style="padding: 16px;display: flex">
|
|
<a-form-model layout="inline">
|
|
<a-form-model-item label="专项名称">
|
|
<a-input style="width: 472px" v-model="form.Name" placeholder="请输入名称"></a-input>
|
|
</a-form-model-item>
|
|
</a-form-model>
|
|
<div style="margin: 4px 16px 0 16px">
|
|
<span style="color: #fff;">分析方向：</span>
|
|
<v-tab-group :value="direction" :style="{ background: 'transparent' }" :btns="['品牌分析','车型分析']" @change="handlerType"></v-tab-group>
|
|
</div>
|
|
<a-form-model layout="inline">
|
|
<a-form-model-item label="选择日期">
|
|
<a-range-picker show-time v-model="selTime" :disabled-date="disabledDate" :size="$vuiSize" valueFormat="YYYY-MM-DD HH:mm:ss" @ok="handlerChangeTime">
|
|
<a-icon slot="suffixIcon" type="calendar" />
|
|
</a-range-picker>
|
|
</a-form-model-item>
|
|
</a-form-model>
|
|
</div>
|
|
</div>
|
|
<div class="sac-inner-d2">
|
|
<v-label-div :title="form.Classify == 1 ? '品牌列表':'车型列表'">
|
|
<v-btn @click="reset">重选分析</v-btn>
|
|
</v-label-div>
|
|
<div class="brandChooseContent" v-if="form.Classify == 1">
|
|
<div class="brand-item" v-for="(item, index) in chosenBrandList" :key="index">
|
|
<span style="margin-left: 40px">{{item}}</span><a-icon @click="delBrand(index)" class="close-icon" type="close" />
|
|
</div>
|
|
<div class="brand-item" style="text-align: center;">
|
|
<a-icon @click="handlerAdd" style="cursor: pointer;font-size: 36px;margin-top: 20px" type="plus" />
|
|
</div>
|
|
</div>
|
|
<div class="brandChooseContent" v-if="form.Classify == 2">
|
|
<div class="brand-item" v-for="(item, index) in chosenSeriesList" :key="index">
|
|
<span style="margin-left: 40px">{{item}}</span><a-icon @click="delBrand(index)" class="close-icon" type="close" />
|
|
</div>
|
|
<div class="brand-item" style="text-align: center;">
|
|
<a-icon @click="handlerAdd" style="cursor: pointer;font-size: 36px;margin-top: 20px" type="plus" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="beCpm-footer" @click="handlerConfirm">
|
|
保存
|
|
</div>
|
|
</div>
|
|
<iSpecialBrandChoose :list="chosenBrandList" :visible.sync="brandShow" @selectAll="selectAllBrand" @choose="brandChose" @change="handlerBrand"></iSpecialBrandChoose>
|
|
<iSpecialSeriesChoose brand="奥迪" :list="chosenSeriesList" :visible.sync="seriesShow" @selectAll="selectAll" @choose="seriesChose" @change="handlerSeries"></iSpecialSeriesChoose>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {setSchemeDataSpecial} from "@/api/SpecialAnalize";
|
|
import {getSchemeDataToBrandOrSeries} from "@/api/SpecialAnalize";
|
|
export default {
|
|
name: 'sac',
|
|
data() {
|
|
return {
|
|
token: '',
|
|
form: {
|
|
Guids: null,
|
|
Name: '',
|
|
Classify: 1, // 1品牌 2车型
|
|
StartTime: '',
|
|
EndTime: '',
|
|
Types: 'SpecialV6',
|
|
},
|
|
chosenBrandList: [],
|
|
chosenSeriesList: [],
|
|
itemList: [], //已选数据
|
|
selTime: [],
|
|
direction: 0,
|
|
//品牌车型选择框控制
|
|
brandShow: false,
|
|
seriesShow: false,
|
|
}
|
|
},
|
|
created() {
|
|
this.token = this.getToken;
|
|
if(this.$route.query.sSpecialGuid) {
|
|
this.form.Guids = this.$route.query.sSpecialGuid
|
|
getSchemeDataToBrandOrSeries({token: this.token, sGuids: this.form.Guids}).then(res =>{
|
|
this.form.Classify = res.data.classify;
|
|
if(res.data.classify == 1) {
|
|
this.direction = 0;
|
|
this.chosenBrandList = (res.data.brand).split(',');
|
|
} else {
|
|
this.direction = 1;
|
|
this.chosenSeriesList = (res.data.seriesname).split(',');
|
|
}
|
|
})
|
|
}
|
|
},
|
|
methods: {
|
|
goBack() {
|
|
this.$router.go(-1)
|
|
},
|
|
handlerType(value) {
|
|
if(value == 0) {
|
|
this.form.Classify = 1
|
|
} else {
|
|
this.form.Classify = 2
|
|
}
|
|
},
|
|
handlerChangeTime(val) {
|
|
this.form.StartTime = val[0];
|
|
this.form.EndTime = val[1];
|
|
},
|
|
reset() {
|
|
if(this.form.Classify == 1) {
|
|
this.chosenBrandList = [];
|
|
} else if(this.form.Classify == 2) {
|
|
this.chosenSeriesList = [];
|
|
}
|
|
},
|
|
handlerConfirm() {
|
|
let obj = Object.assign(this.form, {AnalyzeWord: this.form.Classify == 1 ? this.chosenBrandList.join(','):this.chosenSeriesList.join(',')})
|
|
let str = JSON.stringify(obj);
|
|
let o = {
|
|
token: this.token,
|
|
DataJson: str
|
|
}
|
|
setSchemeDataSpecial(o).then(res => {
|
|
if(res.msg) {
|
|
if(this.$route.query.sSpecialGuid) {
|
|
this.$message.success('修改成功');
|
|
} else {
|
|
this.$message.success('添加成功');
|
|
}
|
|
this.$router.push('/specialAnalize')
|
|
}
|
|
})
|
|
},
|
|
handlerAdd() {
|
|
if(this.form.Classify == 1) {
|
|
this.brandShow = true;
|
|
} else {
|
|
this.seriesShow = true;
|
|
}
|
|
},
|
|
brandChose(value) {
|
|
if(this.chosenBrandList.indexOf(value) == -1) {
|
|
this.chosenBrandList.push(value)
|
|
} else {
|
|
let index = this.chosenBrandList.indexOf(value);
|
|
this.chosenBrandList.splice(index, 1);
|
|
}
|
|
},
|
|
handlerBrand(value) {
|
|
// console.log(value); 已选择的回调数组
|
|
this.brandShow = false;
|
|
},
|
|
seriesChose(value) {
|
|
if(this.chosenSeriesList.indexOf(value) == -1) {
|
|
this.chosenSeriesList.push(value)
|
|
} else {
|
|
let index = this.chosenSeriesList.indexOf(value);
|
|
this.chosenSeriesList.splice(index, 1);
|
|
}
|
|
},
|
|
handlerSeries(value) {
|
|
this.seriesShow = false;
|
|
},
|
|
selectAllBrand(all) {
|
|
this.chosenBrandList = [...this.chosenBrandList, ...all];
|
|
},
|
|
selectAll(all) {
|
|
this.chosenSeriesList = [...this.chosenSeriesList, ...all];
|
|
},
|
|
delBrand(index) {
|
|
if(this.form.Classify == 1) {
|
|
this.chosenBrandList.splice(index,1);
|
|
} else if(this.form.Classify == 2) {
|
|
this.chosenSeriesList.splice(index,1);
|
|
}
|
|
},
|
|
disabledDate() {
|
|
return false
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less">
|
|
.sac-outter {
|
|
padding: 0px 16px 16px 16px;
|
|
}
|
|
.sac-inner {
|
|
width: 100%;
|
|
// height: 960px;
|
|
border: 2px solid #0F2A4D;
|
|
background: #010B19;
|
|
}
|
|
.sac-inner-d2 {
|
|
width: 100%;
|
|
// height: 960px;
|
|
border: 2px solid #0F2A4D;
|
|
background: #010B19;
|
|
margin-top: 16px;
|
|
.brandChooseContent {
|
|
padding: 0 0 24px 24px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
.brand-item {
|
|
width: 286px;
|
|
height: 80px;
|
|
background: #1B4163;
|
|
border-radius: 4px;
|
|
font-size: 20px;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
font-weight: 600;
|
|
color: #FFFFFF;
|
|
line-height: 80px;
|
|
margin-right: 24px;
|
|
margin-top: 24px;
|
|
text-align: center;
|
|
.close-icon {
|
|
position: relative;
|
|
margin-top: 30px;
|
|
margin-right: 24px;
|
|
float: right;
|
|
color: #3373CC;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.beCpm-footer {
|
|
position: relative;
|
|
width: 354px;
|
|
height: 64px;
|
|
background-image: url("../../assets/images/login/img_dlan_nor.png");
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
bottom: 0px;
|
|
left: 50%;
|
|
transform: translate(-50%);
|
|
cursor: pointer;
|
|
color: #63aecc;
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
line-height: 64px;
|
|
margin-top: 16px;
|
|
}
|
|
</style> |