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.
325 lines
8.3 KiB
325 lines
8.3 KiB
<!--
|
|
* @Author: your name
|
|
* @Date: 2021-11-03 11:54:08
|
|
* @LastEditTime: 2021-11-19 17:31:59
|
|
* @LastEditors: Please set LastEditors
|
|
* @Description: In User Settings Edit
|
|
* @FilePath: /data-show/src/views/MarketingComparison/mcChooseModel/index.vue
|
|
-->
|
|
<template>
|
|
<div class="mccm-outter">
|
|
<v-label-div title="切换车型">
|
|
<v-btn @click="goback">返回营销分析</v-btn>
|
|
</v-label-div>
|
|
<div class="mccm-inner">
|
|
<template v-for="(item, index) in list">
|
|
<div :key="index" style="display: flex; justify-content: flex-start">
|
|
<div class="mccm-item">
|
|
<div class="mc-t">
|
|
<div class="m-t-d1">{{ item.brand | doStr(4) }}</div>
|
|
<span class="m-t-s1">{{ item.model | doStr(10) }}</span>
|
|
</div>
|
|
<div>
|
|
<a-form-model
|
|
:label-col="labelCol"
|
|
|
|
style="width: 100%"
|
|
>
|
|
<a-form-model-item label="开始时间">
|
|
<a-date-picker
|
|
v-model="item.startTime"
|
|
show-time
|
|
type="date"
|
|
placeholder="开始时间"
|
|
valueFormat="YYYY-MM-DD HH:mm:ss"
|
|
style="width: 82%; margin-left:18px"
|
|
@change="handlerTime(item)"
|
|
></a-date-picker>
|
|
</a-form-model-item>
|
|
<a-form-model-item label="结束时间">
|
|
<a-date-picker
|
|
v-model="item.endTime"
|
|
show-time
|
|
type="date"
|
|
placeholder="结束时间"
|
|
valueFormat="YYYY-MM-DD HH:mm:ss"
|
|
style="width: 82%; margin-left:18px"
|
|
@change="handlerTime(item)"
|
|
></a-date-picker>
|
|
</a-form-model-item>
|
|
</a-form-model>
|
|
</div>
|
|
<div class="m-t-btn" @click="handlerDel(index)" v-if="item.isDel">
|
|
删除
|
|
</div>
|
|
<div class="m-t-btn" @click="handlerChoose(index)" v-else>
|
|
切换车型
|
|
</div>
|
|
</div>
|
|
<img
|
|
v-if="index < list.length - 1"
|
|
class="mccm-vs"
|
|
src="../../../assets/images/comm/img_vs.png"
|
|
/>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
<iSwitchModel
|
|
:brand="brand"
|
|
:model="model"
|
|
:visible.sync="modelShow"
|
|
@change="handlerBrand"
|
|
></iSwitchModel>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import moment from "moment";
|
|
import { getUserSeriesName } from "@/api/comm";
|
|
export default {
|
|
name: "mcChooseModel",
|
|
props: {
|
|
data: {
|
|
type: Array,
|
|
default: () => {
|
|
return [];
|
|
},
|
|
},
|
|
},
|
|
watch: {
|
|
data: {
|
|
handler(val) {
|
|
if (val.length > 0) {
|
|
val.forEach((ele, index) => {
|
|
this.list[index] = Object.assign(this.list[index], ele);
|
|
});
|
|
}
|
|
},
|
|
immediate: true,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
labelCol: { span: 9 },
|
|
wrapperCol: { span: 14 },
|
|
modelShow: false,
|
|
brand: "",
|
|
model: "",
|
|
chooseIndex: -1,
|
|
startVal: "",
|
|
endValue: "",
|
|
offsetDays: 86400000 * 30, //最多选择7天
|
|
form: {
|
|
token: "",
|
|
sBrandName: "",
|
|
},
|
|
list: [
|
|
{
|
|
brand: "",
|
|
model: "",
|
|
startTime: "",
|
|
endTime: "",
|
|
isDel: false,
|
|
},
|
|
{
|
|
brand: "",
|
|
model: "",
|
|
startTime: "",
|
|
endTime: "",
|
|
isDel: false,
|
|
},
|
|
{
|
|
brand: "",
|
|
model: "",
|
|
startTime: "",
|
|
endTime: "",
|
|
isDel: false,
|
|
},
|
|
{
|
|
brand: "",
|
|
model: "",
|
|
startTime: "",
|
|
endTime: "",
|
|
isDel: false,
|
|
},
|
|
{
|
|
brand: "",
|
|
model: "",
|
|
startTime: "",
|
|
endTime: "",
|
|
isDel: false,
|
|
},
|
|
{
|
|
brand: "",
|
|
model: "",
|
|
startTime: "",
|
|
endTime: "",
|
|
isDel: false,
|
|
},
|
|
],
|
|
};
|
|
},
|
|
created() {
|
|
this.brand = this.getBrand.brandname || "奥迪";
|
|
if (this.getChangeSTime) {
|
|
this.list.forEach((e) => {
|
|
e.startTime = this.getCtime.sStartTime;
|
|
e.endTime = this.getCtime.sEndTime;
|
|
});
|
|
}
|
|
|
|
this.modelData();
|
|
},
|
|
methods: {
|
|
goback() {
|
|
this.$router.go(-1);
|
|
},
|
|
// 获取车型
|
|
modelData() {
|
|
let model = this.getModel.name || "";
|
|
if (!model) {
|
|
this.getUserSeriesName(this.brand);
|
|
} else {
|
|
this.model = model;
|
|
}
|
|
},
|
|
// 获取车型
|
|
getUserSeriesName(brandName) {
|
|
this.form.token = this.getToken;
|
|
this.form.sBrandName = brandName;
|
|
getUserSeriesName(this.form).then((res) => {
|
|
let data = res.data || [];
|
|
this.model = data[0].name;
|
|
});
|
|
},
|
|
// 打开选择车型的弹出框
|
|
handlerChoose(n) {
|
|
this.chooseIndex = n;
|
|
this.modelShow = true;
|
|
},
|
|
// 删除车型
|
|
handlerDel(n) {
|
|
let row = this.list[n];
|
|
row.brand = "";
|
|
row.model = "";
|
|
row.startTime = "";
|
|
row.endTime = "";
|
|
row.isDel = false;
|
|
let filterArr = this.list.filter((ele) => {
|
|
return ele.brand && ele.model && ele.startTime && ele.endTime;
|
|
});
|
|
this.$emit("del", n);
|
|
this.$emit("change", filterArr);
|
|
},
|
|
// 获取切换车型的数据
|
|
handlerBrand(arr) {
|
|
let row = this.list[this.chooseIndex];
|
|
row.brand = arr[0].brandname;
|
|
row.model = arr[1].name;
|
|
row.isDel = true;
|
|
},
|
|
// 选择时间的判断
|
|
handlerTime(item) {
|
|
let t1 = item.startTime ? moment(item.startTime).valueOf() : 0;
|
|
let t2 = item.endTime ? moment(item.endTime).valueOf() : 0;
|
|
let current = new Date().getTime();
|
|
if (t1 > current) {
|
|
item.startTime = "";
|
|
this.$message.warning("开始时间不能大于当前时间");
|
|
return;
|
|
}
|
|
if (t2 > current) {
|
|
item.endTime = "";
|
|
this.$message.warning("结束时间不能大于当前时间");
|
|
return;
|
|
}
|
|
if (item.startTime && item.endTime) {
|
|
let isBefore = moment(item.startTime).isBefore(item.endTime);
|
|
if (!isBefore) {
|
|
item.endTime = "";
|
|
this.$message.warning("结束时间必须大于开始时间");
|
|
} else {
|
|
let filterArr = this.list.filter((ele) => {
|
|
return ele.brand && ele.model;
|
|
});
|
|
this.$emit("change", filterArr);
|
|
}
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.mccm-outter {
|
|
width: 1888px;
|
|
height: 376px;
|
|
border: 2px solid #0f2a4d;
|
|
.mccm-inner {
|
|
width: 100%;
|
|
height: calc(100% - 48px);
|
|
margin-left:1.7rem;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
.mccm-item {
|
|
width: 240px;
|
|
height: 290px;
|
|
background: linear-gradient(180deg, #003a62 0%, #001c43 100%);
|
|
border: 2px solid #0e5193;
|
|
margin-top: 13px;
|
|
border-radius: 2px;
|
|
position: relative;
|
|
.m-t-btn {
|
|
position: absolute;
|
|
top: 0px;
|
|
right: 0px;
|
|
width: 95px;
|
|
height: 28px;
|
|
background-image: url("../../../assets/images/BrandInsight/img_xbut.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
cursor: pointer;
|
|
text-align: center;
|
|
color: #63aecc;
|
|
line-height: 28px;
|
|
}
|
|
.mc-t {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
margin-top: 21px;
|
|
.m-t-d1 {
|
|
width: 78px;
|
|
height: 78px;
|
|
background-image: url("../../../assets/images/BrandInsight/img_lq.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
line-height: 78px;
|
|
text-align: center;
|
|
font-size: 14px;
|
|
color: #0090ff;
|
|
margin-left: 17px;
|
|
}
|
|
.m-t-s1 {
|
|
display: block;
|
|
font-size: 20px;
|
|
color: #fff;
|
|
margin-left: 6px;
|
|
}
|
|
}
|
|
}
|
|
.mccm-vs {
|
|
width: 78px;
|
|
height: 78px;
|
|
margin-top: 22px;
|
|
}
|
|
}
|
|
}
|
|
/deep/ .ant-form-item {
|
|
margin-bottom: 10px;
|
|
}
|
|
/deep/ .ant-calendar-picker {
|
|
min-width: auto !important;
|
|
}
|
|
</style>
|