parent
a75aa91e0c
commit
bd729954ef
@ -0,0 +1,23 @@
|
||||
/*
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-28 16:40:48
|
||||
* @LastEditTime: 2021-10-28 19:09:07
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/api/ModelInsight/index.js
|
||||
*/
|
||||
import httpService from "@/request"
|
||||
|
||||
|
||||
// 车型数据-数据传播总量
|
||||
export function getBrandOverviewCount0528(params) {
|
||||
let obj = Object.assign({action: 'getBrandOverviewCount0528', sType: 'BrandOverview'}, params)
|
||||
return httpService({
|
||||
url: `/api/v6.ashx`,
|
||||
method: 'post',
|
||||
data: obj,
|
||||
headers: {
|
||||
'content-type': 'application/x-www-form-urlencoded'
|
||||
}
|
||||
})
|
||||
}
|
||||
@ -0,0 +1,342 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-15 09:16:31
|
||||
* @LastEditTime: 2021-10-28 18:48:18
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/lycomponents/iSwitchBrand/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="sb-outter" v-if="show">
|
||||
<div class="sb-inner">
|
||||
<v-label-div title="车型切换">
|
||||
<span class="iconfont icon-guanbi v-m-close" @click="handlerClose"></span>
|
||||
</v-label-div>
|
||||
<div class="sb-d">
|
||||
<ul class="sb-ul">
|
||||
<span class="liSn">按品牌拼音首字母查找:</span>
|
||||
<li v-for="(item,index) in letterArr" :key="index" :class="activeLi === index ? 'lactive': ''" @click="handlerLi(index)">{{item}}</li>
|
||||
</ul>
|
||||
<div style="clear: both"></div>
|
||||
<div class="sb-body">
|
||||
<div class="sb-dd">
|
||||
<vue-scroll>
|
||||
<div class="sb-bd">
|
||||
<div class="s-item" :class="brandname === item.brandname ? 's-item-active': ''" v-for="(item,index) in showCars" :key="index" @click="handlerChoose(index,item)">
|
||||
<div class="d1">
|
||||
<img class="m1" :src="item.img">
|
||||
</div>
|
||||
<span class="s1">{{item.brandname}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</vue-scroll>
|
||||
</div>
|
||||
|
||||
<div class="sb-dd-right">
|
||||
<vue-scroll>
|
||||
<div class="sb-bd">
|
||||
<div class="sb-b-item" :class="modelName === item.name ? 'sb-b-item-active': ''" v-for="(item,index) in models" :key="index" @click="handlerModel(index, item)">{{item.name}}</div>
|
||||
</div>
|
||||
</vue-scroll>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sb-footer" align="center">
|
||||
<img class="m1" src="../../assets/images/BrandInsight/btn-01.png" @click="handlerSubmit">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getUserBrand, getUserSeriesName } from "@/api/comm";
|
||||
export default {
|
||||
name: "iSwitchModel",
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
brand: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
model: {
|
||||
type: String,
|
||||
default: ""
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
visible: {
|
||||
handler(val) {
|
||||
this.show = val ? true : false;
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.brandname = this.brand;
|
||||
this.modelName = this.model;
|
||||
this.getBrands().then(() => {
|
||||
this.handlerLi(0);
|
||||
let row = this.cars.find(ele => {
|
||||
return ele.brandname === this.brandname
|
||||
})
|
||||
this.chooseBrand = row;
|
||||
});
|
||||
this.getUserSeriesName(this.brandname);
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
activeLi: 0,
|
||||
form: {
|
||||
token: "",
|
||||
sBrandName: ""
|
||||
},
|
||||
letterArr: [
|
||||
"热门",
|
||||
"A",
|
||||
"B",
|
||||
"C",
|
||||
"D",
|
||||
"E",
|
||||
"F",
|
||||
"G",
|
||||
"H",
|
||||
"I",
|
||||
"J",
|
||||
"K",
|
||||
"L",
|
||||
"M",
|
||||
"N",
|
||||
"O",
|
||||
"P",
|
||||
"Q",
|
||||
"R",
|
||||
"S",
|
||||
"T",
|
||||
"V",
|
||||
"W",
|
||||
"X",
|
||||
"Y",
|
||||
"Z",
|
||||
],
|
||||
cars: [],
|
||||
models: [],
|
||||
showCars: [],
|
||||
showActive: "",
|
||||
chooseBrand: null,
|
||||
chooseModel: null,
|
||||
modelName: "",
|
||||
brandname: ""
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 关闭
|
||||
handlerClose() {
|
||||
this.show = false;
|
||||
this.$emit("update:visible", this.show);
|
||||
},
|
||||
// 选择li
|
||||
handlerLi(n) {
|
||||
this.activeLi = n;
|
||||
let key = this.letterArr[n];
|
||||
this.showCars = this.cars.filter((ele) => ele.firstword === key);
|
||||
},
|
||||
// 获取品牌
|
||||
getBrands() {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.form.token = this.getToken;
|
||||
getUserBrand(this.form)
|
||||
.then((res) => {
|
||||
let data = res.data;
|
||||
this.cars = data;
|
||||
resolve(true);
|
||||
})
|
||||
.catch(() => {
|
||||
reject(false);
|
||||
});
|
||||
});
|
||||
},
|
||||
// 选择品牌
|
||||
handlerChoose(n, row) {
|
||||
this.showActive = row.brandid;
|
||||
this.chooseBrand = row;
|
||||
this.brandname = this.chooseBrand.brandname;
|
||||
this.getUserSeriesName(this.brandname)
|
||||
},
|
||||
// 选择车型
|
||||
handlerModel(n, row) {
|
||||
this.modelName = row.name;
|
||||
this.chooseModel = row;
|
||||
},
|
||||
// 确定车型
|
||||
handlerSubmit() {
|
||||
if(this.chooseBrand && this.chooseModel) {
|
||||
this.$emit("change", [this.chooseBrand, this.chooseModel]);
|
||||
this.handlerClose();
|
||||
} else {
|
||||
this.$message.warning('请选择车型');
|
||||
}
|
||||
},
|
||||
// 获取车型
|
||||
getUserSeriesName(brandName) {
|
||||
this.form.token = this.getToken;
|
||||
this.form.sBrandName = brandName;
|
||||
getUserSeriesName(this.form).then(res => {
|
||||
let data = res.data || [];
|
||||
this.models = data
|
||||
})
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.sb-body {
|
||||
width: 100%;
|
||||
height: calc(100% - 30px);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.sb-outter {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1000;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
background-color: rgba(0, 0, 0, 0.45);
|
||||
overflow: auto;
|
||||
.sb-inner {
|
||||
position: absolute;
|
||||
width: 1230px;
|
||||
height: 720px;
|
||||
top: 0px;
|
||||
left: 50%;
|
||||
border-radius: 2px;
|
||||
transform: translate(-50%, 90px);
|
||||
background: #0c2342;
|
||||
min-width: 400px;
|
||||
min-height: 300px;
|
||||
.sb-d {
|
||||
width: 100%;
|
||||
height: calc(100% - 128px);
|
||||
overflow: hidden;
|
||||
}
|
||||
.sb-ul {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
list-style: none;
|
||||
margin-left: 16px;
|
||||
margin-top: 10px;
|
||||
height: 30px;
|
||||
|
||||
.liSn {
|
||||
float: left;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
margin-right: 24px;
|
||||
}
|
||||
li {
|
||||
float: left;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
margin-right: 24px;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: #3373cc;
|
||||
}
|
||||
}
|
||||
.lactive {
|
||||
color: #3373cc;
|
||||
}
|
||||
}
|
||||
.sb-dd {
|
||||
width: 46%;
|
||||
height: 100%;
|
||||
box-shadow: 0 0 20px;
|
||||
}
|
||||
.sb-bd {
|
||||
padding: 0px 16px 16px 16px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
.s-item {
|
||||
cursor: pointer;
|
||||
margin-left: 16px;
|
||||
margin-top: 16px;
|
||||
transition: all 0.3s;
|
||||
border: 1px solid transparent;
|
||||
&:hover {
|
||||
border: 1px solid #3373cc;
|
||||
}
|
||||
.d1 {
|
||||
width: 152px;
|
||||
height: 132px;
|
||||
background: #fff;
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.m1 {
|
||||
width: 90px;
|
||||
}
|
||||
.s1 {
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.s-item-active {
|
||||
border: 1px solid #3373cc;
|
||||
}
|
||||
.sb-b-item {
|
||||
width: 194px;
|
||||
height: 66px;
|
||||
background: #1B4163;
|
||||
color: #fff;
|
||||
border-radius: 2px;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
line-height: 66px;
|
||||
margin-left: 16px;
|
||||
margin-top: 16px;
|
||||
transition: all 0.3s;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background: #3373CC;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.sb-b-item-active {
|
||||
background: #3373CC;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.sb-dd-right {
|
||||
width: 54%;
|
||||
height: 100%;
|
||||
box-shadow: 0 0 20px;
|
||||
}
|
||||
|
||||
.sb-footer {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
border-top: 1px solid #1e3d64;
|
||||
.m1 {
|
||||
width: 480px;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
@ -1,24 +1,22 @@
|
||||
/*
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-12 13:37:50
|
||||
* @LastEditTime: 2021-10-27 10:32:21
|
||||
* @LastEditTime: 2021-10-28 19:34:13
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/store/state.js
|
||||
*/
|
||||
let commTime = {
|
||||
sStartTime: "",
|
||||
sEndTime: "",
|
||||
sTimeType: ''
|
||||
}
|
||||
|
||||
const state = {
|
||||
$zoom: 1,
|
||||
token: sessionStorage.getItem('token') || "",
|
||||
user: JSON.parse(sessionStorage.getItem('user')) || {},
|
||||
account: JSON.parse(localStorage.getItem('account')) || {},
|
||||
commTime: JSON.parse(sessionStorage.getItem('commTime')) || commTime,
|
||||
commTime: JSON.parse(sessionStorage.getItem('commTime')) || {},
|
||||
ctime: JSON.parse(sessionStorage.getItem('ctime')) || {},
|
||||
ctime2: JSON.parse(sessionStorage.getItem('ctime2')) || {},
|
||||
headerType: sessionStorage.getItem('headerType') || 1,
|
||||
brand: JSON.parse(sessionStorage.getItem('brand')) || {}
|
||||
brand: JSON.parse(sessionStorage.getItem('brand')) || {},
|
||||
model: JSON.parse(sessionStorage.getItem('model')) || {},
|
||||
}
|
||||
export default state;
|
||||
|
||||
Loading…
Reference in new issue