张雄 3 years ago
parent 5fde170065
commit a1cb703148

@ -24,7 +24,7 @@
</a-dropdown>
<span class="iH-left-s1">菜单</span>
<a-select :default-value="1" :size="$vuiSize" class="selHead" v-model="selVal" @change="handlerSelect">
<a-select :default-value="1" :size="$vuiSize" class="selHead" v-model="selVal" v-if="timeShow" @change="handlerSelect">
<a-select-option :style="{ color: '#fff' }" v-for="item in selDatas" :value="item.key" :key="item.key">
{{ item.key }}
</a-select-option>
@ -69,6 +69,7 @@ export default {
sClock: "",
week: "",
intDt: null,
timeShow: true,
form: {
sTimeType: 4,
sStartTime: "",
@ -79,6 +80,18 @@ export default {
],
};
},
// watch: {
// $route: {
// handler(val) {
// if (val.path === "/mcIndex") {
// this.timeShow = false;
// } else {
// this.timeShow = true;
// }
// },
// immediate: true,
// },
// },
created() {
this.getSelect()
},
@ -114,7 +127,8 @@ export default {
let obj = this.selDatas[n];
this.form.sStartTime = obj.starttime;
this.form.sEndTime = obj.endtime;
this.setCtime(this.form);
this.setCtime(this.form);
this.setChangeSTime(1);
this.reload();
},
//

@ -127,10 +127,10 @@ export default {
}
},
computed: {
...mapGetters(['getZoom', 'getLoading','getToken', 'getUser', 'getAccount', 'getCommTime', 'getCtime', 'getCtime2', 'getHeaderType', 'getBrand', 'getModel','getSComparison','getBComparison', 'getMComparison', 'getEComparison','getLevelBtn','getMenu'])
...mapGetters(['getZoom', 'getLoading','getToken', 'getUser', 'getAccount', 'getCommTime', 'getCtime', 'getCtime2', 'getHeaderType', 'getBrand', 'getModel','getSComparison','getBComparison', 'getMComparison', 'getEComparison','getLevelBtn','getMenu', 'getChangeSTime'])
},
methods: {
...mapActions(["setZoom", 'setLoading', 'setToken', 'setUser', 'setAccount', 'setCommTime', 'setCtime', 'setCtime2', 'setHeaderType', 'setBrand', 'setModel', 'setSComparison','setBComparison', 'setMComparison', 'setEComparison','setLevelBtn','setMenu']),
...mapActions(["setZoom", 'setLoading', 'setToken', 'setUser', 'setAccount', 'setCommTime', 'setCtime', 'setCtime2', 'setHeaderType', 'setBrand', 'setModel', 'setSComparison','setBComparison', 'setMComparison', 'setEComparison','setLevelBtn','setMenu', 'setChangeSTime']),
// 获取当前日期时间
getDatetime() {
let now = new Date();

@ -57,6 +57,9 @@ const actions = {
},
setMenu: ({commit}, log) => {
commit('setMenu', log)
}
},
setChangeSTime: ({commit}, log) => {
commit('setChangeSTime', log)
},
}
export default actions

@ -46,6 +46,9 @@ const getters = {
getSComparison(state) {
return state.sComparison
},
getChangeSTime(state) {
return state.changeSTime
},
getMComparison(state) {
return state.mComparison
},

@ -71,6 +71,9 @@ const mutations = {
let str = JSON.stringify(log);
sessionStorage.setItem('sComparison', str);
},
setChangeSTime: (state, log) => {
state.changeSTime = log;
},
setMComparison: (state, log) => {
state.mComparison = log;
let str = JSON.stringify(log);

@ -21,6 +21,7 @@ const state = {
model: JSON.parse(sessionStorage.getItem('model')) || {},
bComparison: JSON.parse(sessionStorage.getItem('bComparison')) || [],
sComparison: JSON.parse(sessionStorage.getItem('sComparison')) || [],
changeSTime: 1,
mComparison: JSON.parse(sessionStorage.getItem('mComparison')) || [],
eComparison: JSON.parse(sessionStorage.getItem('eComparison')) || [],
levelBtn: JSON.parse(sessionStorage.getItem('levelBtn')) || [],

@ -65,9 +65,41 @@ export default {
},
//
goIDE() {
this.$router.push({
if(!this.btnPrm('btn_brand_datalist')) {
return
}
let startTime = "";
let endTime = moment(new Date()).format("YYYY-MM-DD HH:mm:ss");
let cTime2 = this.getCtime2;
let sTimeType = 34;
switch (cTime2.sTimeType) {
case 34:
sTimeType = 34
break;
case 23:
sTimeType = 23
break;
case 3:
sTimeType = 3
break;
case 20:
sTimeType = 20
break;
case 4:
sTimeType = 4;
startTime = cTime2.sStartTime;
endTime = cTime2.sEndTime;
break;
default:
sTimeType = 34
break;
}
this.$router.push({
path: "/industryDataExport",
query: {
startTime,
endTime,
sTimeType,
token: this.getToken,
action: "getList",
sType: "BrandData",

@ -47,6 +47,7 @@ export default {
methods: {
handlerChangeModel(arr) {
this.setSComparison(arr);
this.setChangeSTime(0);
this.reload()
}
}

@ -41,6 +41,7 @@ export default {
form: {
token: ""
},
//
chooseArr: [null, null, null, null, null, null],
models: [
],
@ -83,17 +84,19 @@ export default {
let filterArr = arr.filter(ele => {
return ele.brand && ele.model
});
if(filterArr.length < 2) {
let str = JSON.stringify(filterArr);
let arr1 = JSON.parse(str);
if(arr1.length < 2) {
this.$message.warning('至少2个车型进行对比');
return;
}
for(let i = 0; i < filterArr.length; i++) {
if(!filterArr[i].startTime || !filterArr[i].endTime) {
for(let i = 0; i < arr1.length; i++) {
if(!arr1[i].startTime || !arr1[i].endTime) {
this.$message.warning('请选择时间');
return;
}
}
this.setSComparison(filterArr);
this.setSComparison(arr1);
this.reload()
}

@ -7,280 +7,317 @@
* @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" style="margin-left: 1rem">
<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" :wrapper-col="wrapperCol" 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: 100%;" @change="handlerTime(item)" />
</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: 100%;" @change="handlerTime(item)" />
</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 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" style="margin-left: 1rem">
<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"
:wrapper-col="wrapperCol"
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: 100%"
@change="handlerTime(item)"
/>
</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: 100%"
@change="handlerTime(item)"
/>
</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>
<iSwitchModel :brand="brand" :model="model" :visible.sync="modelShow" @change="handlerBrand"></iSwitchModel>
</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,
},
],
};
name: "mcChooseModel",
props: {
data: {
type: Array,
default: () => {
return [];
},
},
created() {
this.brand = this.getBrand.brandname || "奥迪";
this.modelData();
},
watch: {
data: {
handler(val) {
if (val.length > 0) {
val.forEach((ele, index) => {
this.list[index] = Object.assign(this.list[index], ele);
});
}
},
immediate: true,
},
methods: {
goback() {
this.$router.go(-1);
},
//
modelData() {
let model = this.getModel.name || "";
if (!model) {
this.getUserSeriesName(this.brand);
} else {
this.model = model;
}
},
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,
},
//
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;
});
{
brand: "",
model: "",
startTime: "",
endTime: "",
isDel: false,
},
//
handlerChoose(n) {
this.chooseIndex = n;
this.modelShow = true;
{
brand: "",
model: "",
startTime: "",
endTime: "",
isDel: false,
},
//
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);
{
brand: "",
model: "",
startTime: "",
endTime: "",
isDel: false,
},
//
handlerBrand(arr) {
let row = this.list[this.chooseIndex];
row.brand = arr[0].brandname;
row.model = arr[1].name;
row.isDel = true;
{
brand: "",
model: "",
startTime: "",
endTime: "",
isDel: false,
},
//
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);
}
}
{
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: 276px;
border: 2px solid #0f2a4d;
.mccm-inner {
width: 100%;
height: calc(100% - 48px);
width: 1888px;
height: 276px;
border: 2px solid #0f2a4d;
.mccm-inner {
width: 100%;
height: calc(100% - 48px);
display: flex;
justify-content: flex-start;
.mccm-item {
width: 230px;
height: 200px;
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;
.mccm-item {
width: 230px;
height: 200px;
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;
}
}
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;
}
.mccm-vs {
width: 78px;
height: 78px;
margin-top: 22px;
.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;
margin-bottom: 10px;
}
/deep/ .ant-calendar-picker {
min-width: auto !important;
min-width: auto !important;
}
</style>

Loading…
Cancel
Save