张雄 3 years ago
parent 5fde170065
commit a1cb703148

@ -24,7 +24,7 @@
</a-dropdown> </a-dropdown>
<span class="iH-left-s1">菜单</span> <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"> <a-select-option :style="{ color: '#fff' }" v-for="item in selDatas" :value="item.key" :key="item.key">
{{ item.key }} {{ item.key }}
</a-select-option> </a-select-option>
@ -69,6 +69,7 @@ export default {
sClock: "", sClock: "",
week: "", week: "",
intDt: null, intDt: null,
timeShow: true,
form: { form: {
sTimeType: 4, sTimeType: 4,
sStartTime: "", 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() { created() {
this.getSelect() this.getSelect()
}, },
@ -114,7 +127,8 @@ export default {
let obj = this.selDatas[n]; let obj = this.selDatas[n];
this.form.sStartTime = obj.starttime; this.form.sStartTime = obj.starttime;
this.form.sEndTime = obj.endtime; this.form.sEndTime = obj.endtime;
this.setCtime(this.form); this.setCtime(this.form);
this.setChangeSTime(1);
this.reload(); this.reload();
}, },
// //

@ -127,10 +127,10 @@ export default {
} }
}, },
computed: { 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: { 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() { getDatetime() {
let now = new Date(); let now = new Date();

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

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

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

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

@ -65,9 +65,41 @@ export default {
}, },
// //
goIDE() { 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", path: "/industryDataExport",
query: { query: {
startTime,
endTime,
sTimeType,
token: this.getToken, token: this.getToken,
action: "getList", action: "getList",
sType: "BrandData", sType: "BrandData",

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

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

@ -7,280 +7,317 @@
* @FilePath: /data-show/src/views/MarketingComparison/mcChooseModel/index.vue * @FilePath: /data-show/src/views/MarketingComparison/mcChooseModel/index.vue
--> -->
<template> <template>
<div class="mccm-outter"> <div class="mccm-outter">
<v-label-div title="切换车型"> <v-label-div title="切换车型">
<v-btn @click="goback"></v-btn> <v-btn @click="goback"></v-btn>
</v-label-div> </v-label-div>
<div class="mccm-inner"> <div class="mccm-inner">
<template v-for="(item,index) in list"> <template v-for="(item, index) in list">
<div :key="index" style="display: flex;justify-content: flex-start;"> <div :key="index" style="display: flex; justify-content: flex-start">
<div class="mccm-item" style="margin-left: 1rem"> <div class="mccm-item" style="margin-left: 1rem">
<div class="mc-t"> <div class="mc-t">
<div class="m-t-d1">{{item.brand|doStr(4)}}</div> <div class="m-t-d1">{{ item.brand | doStr(4) }}</div>
<span class="m-t-s1">{{item.model|doStr(10)}}</span> <span class="m-t-s1">{{ item.model | doStr(10) }}</span>
</div> </div>
<div> <div>
<a-form-model :label-col="labelCol" :wrapper-col="wrapperCol" style="width: 100%"> <a-form-model
<a-form-model-item label="开始时间"> :label-col="labelCol"
<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)" /> :wrapper-col="wrapperCol"
</a-form-model-item> style="width: 100%"
<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 label="开始时间">
</a-form-model-item> <a-date-picker
</a-form-model> v-model="item.startTime"
</div> show-time
<div class="m-t-btn" @click="handlerDel(index)" v-if="item.isDel"></div> type="date"
<div class="m-t-btn" @click="handlerChoose(index)" v-else></div> placeholder="开始时间"
</div> valueFormat="YYYY-MM-DD HH:mm:ss"
<img v-if="index < list.length -1" class="mccm-vs" src="../../../assets/images/comm/img_vs.png"> style="width: 100%"
</div> @change="handlerTime(item)"
</template> />
</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> </div>
<iSwitchModel :brand="brand" :model="model" :visible.sync="modelShow" @change="handlerBrand"></iSwitchModel> </template>
</div> </div>
<iSwitchModel
:brand="brand"
:model="model"
:visible.sync="modelShow"
@change="handlerBrand"
></iSwitchModel>
</div>
</template> </template>
<script> <script>
import moment from "moment"; import moment from "moment";
import { getUserSeriesName } from "@/api/comm"; import { getUserSeriesName } from "@/api/comm";
export default { export default {
name: "mcChooseModel", name: "mcChooseModel",
props: { props: {
data: { data: {
type: Array, type: Array,
default: () => { default: () => {
return []; 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 || "奥迪"; watch: {
this.modelData(); data: {
handler(val) {
if (val.length > 0) {
val.forEach((ele, index) => {
this.list[index] = Object.assign(this.list[index], ele);
});
}
},
immediate: true,
}, },
methods: { },
goback() { data() {
this.$router.go(-1); return {
}, labelCol: { span: 9 },
// wrapperCol: { span: 14 },
modelData() { modelShow: false,
let model = this.getModel.name || ""; brand: "",
if (!model) { model: "",
this.getUserSeriesName(this.brand); chooseIndex: -1,
} else { startVal: "",
this.model = model; endValue: "",
} offsetDays: 86400000 * 30, //7
form: {
token: "",
sBrandName: "",
},
list: [
{
brand: "",
model: "",
startTime: "",
endTime: "",
isDel: false,
}, },
// {
getUserSeriesName(brandName) { brand: "",
this.form.token = this.getToken; model: "",
this.form.sBrandName = brandName; startTime: "",
getUserSeriesName(this.form).then((res) => { endTime: "",
let data = res.data || []; isDel: false,
this.model = data[0].name;
});
}, },
// {
handlerChoose(n) { brand: "",
this.chooseIndex = n; model: "",
this.modelShow = true; startTime: "",
endTime: "",
isDel: false,
}, },
// {
handlerDel(n) { brand: "",
let row = this.list[n]; model: "",
row.brand = ""; startTime: "",
row.model = ""; endTime: "",
row.startTime = ""; isDel: false,
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) { brand: "",
let row = this.list[this.chooseIndex]; model: "",
row.brand = arr[0].brandname; startTime: "",
row.model = arr[1].name; endTime: "",
row.isDel = true; isDel: false,
}, },
// {
handlerTime(item) { brand: "",
let t1 = item.startTime ? moment(item.startTime).valueOf() : 0; model: "",
let t2 = item.endTime ? moment(item.endTime).valueOf() : 0; startTime: "",
let current = new Date().getTime(); endTime: "",
if(t1 > current) { isDel: false,
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);
}
}
}, },
],
};
},
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> </script>
<style lang="less" scoped> <style lang="less" scoped>
.mccm-outter { .mccm-outter {
width: 1888px; width: 1888px;
height: 276px; height: 276px;
border: 2px solid #0f2a4d; border: 2px solid #0f2a4d;
.mccm-inner { .mccm-inner {
width: 100%; width: 100%;
height: calc(100% - 48px); 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; display: flex;
justify-content: flex-start; justify-content: flex-start;
.mccm-item { align-items: center;
width: 230px; margin-top: 21px;
height: 200px; .m-t-d1 {
background: linear-gradient(180deg, #003a62 0%, #001c43 100%); width: 78px;
border: 2px solid #0e5193; height: 78px;
margin-top: 13px; background-image: url("../../../assets/images/BrandInsight/img_lq.png");
border-radius: 2px; background-repeat: no-repeat;
position: relative; background-size: 100% 100%;
.m-t-btn { line-height: 78px;
position: absolute; text-align: center;
top: 0px; font-size: 14px;
right: 0px; color: #0090ff;
width: 95px; margin-left: 17px;
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 { .m-t-s1 {
width: 78px; display: block;
height: 78px; font-size: 20px;
margin-top: 22px; color: #fff;
margin-left: 6px;
} }
}
}
.mccm-vs {
width: 78px;
height: 78px;
margin-top: 22px;
} }
}
} }
/deep/ .ant-form-item { /deep/ .ant-form-item {
margin-bottom: 10px; margin-bottom: 10px;
} }
/deep/ .ant-calendar-picker { /deep/ .ant-calendar-picker {
min-width: auto !important; min-width: auto !important;
} }
</style> </style>

Loading…
Cancel
Save