|
|
|
@ -1,113 +1,123 @@
|
|
|
|
|
<!--
|
|
|
|
|
* @Author: xw
|
|
|
|
|
* @Date: 2021-10-09 11:56:50
|
|
|
|
|
* @LastEditTime: 2021-12-02 10:24:43
|
|
|
|
|
* @LastEditTime: 2021-12-13 19:03:49
|
|
|
|
|
* @LastEditors: Please set LastEditors
|
|
|
|
|
* @Description: 尾翼洞察
|
|
|
|
|
* @FilePath: /data-show/src/views/Index/tailInsight/index.vue
|
|
|
|
|
-->
|
|
|
|
|
|
|
|
|
|
<template>
|
|
|
|
|
<div class="tl-outter" v-loading="load">
|
|
|
|
|
<vLabel-div title="尾翼洞察">
|
|
|
|
|
<div class="tis">
|
|
|
|
|
<v-pagination :data="pdata" :style="{marginRight: '0.8rem', marginTop: '0.4rem'}" @change="handlerData"></v-pagination>
|
|
|
|
|
<v-tab-group :btns="['品牌', '车型']" @change="handlerChange"></v-tab-group>
|
|
|
|
|
</div>
|
|
|
|
|
</vLabel-div>
|
|
|
|
|
<div class="tl-bd">
|
|
|
|
|
<v-echarts :opt="opt" @getData="clickEchars"></v-echarts>
|
|
|
|
|
</div>
|
|
|
|
|
<a-modal title="提示" :visible="visible" @ok="handleOk" @cancel="handleCancel">
|
|
|
|
|
<div class="tl-outter" v-loading="load">
|
|
|
|
|
<vLabel-div title="尾翼洞察">
|
|
|
|
|
<div class="tis">
|
|
|
|
|
<v-pagination :data="pdata" :style="{marginRight: '0.8rem', marginTop: '0.4rem'}" @change="handlerData"></v-pagination>
|
|
|
|
|
<v-tab-group :btns="['品牌', '车型']" @change="handlerChange"></v-tab-group>
|
|
|
|
|
</div>
|
|
|
|
|
</vLabel-div>
|
|
|
|
|
<div class="tl-bd">
|
|
|
|
|
<v-echarts :opt="opt" @getData="clickEchars"></v-echarts>
|
|
|
|
|
</div>
|
|
|
|
|
<a-modal title="提示" :visible="visible" @ok="handleOk" @cancel="handleCancel">
|
|
|
|
|
<p>{{ ModalText }}</p>
|
|
|
|
|
</a-modal>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import createOpt from "./opt"
|
|
|
|
|
import {getWeiYiCountHome0528} from "@/api/home"
|
|
|
|
|
import {getBrandName,getUserSeriesName} from "@/api/comm"
|
|
|
|
|
import createOpt from "./opt";
|
|
|
|
|
import { getWeiYiCountHome0528 } from "@/api/home";
|
|
|
|
|
import {
|
|
|
|
|
getBrandName,
|
|
|
|
|
getUserSeriesName,
|
|
|
|
|
getBrandOrSeriesLevel,
|
|
|
|
|
} from "@/api/comm";
|
|
|
|
|
export default {
|
|
|
|
|
name: "tail-insight",
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
type: 0,
|
|
|
|
|
load: false,
|
|
|
|
|
form: {
|
|
|
|
|
sQueryType: 1
|
|
|
|
|
},
|
|
|
|
|
opt: {},
|
|
|
|
|
pdata: [],
|
|
|
|
|
|
|
|
|
|
name: "tail-insight",
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
type: 0,
|
|
|
|
|
load: false,
|
|
|
|
|
form: {
|
|
|
|
|
sQueryType: 1,
|
|
|
|
|
},
|
|
|
|
|
opt: {},
|
|
|
|
|
pdata: [],
|
|
|
|
|
|
|
|
|
|
visible: false,
|
|
|
|
|
ModalText: ""
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
this.getData()
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
// 切换后台数据
|
|
|
|
|
handlerChange(n) {
|
|
|
|
|
this.type = n;
|
|
|
|
|
this.form.sQueryType = n+1;
|
|
|
|
|
this.getData();
|
|
|
|
|
},
|
|
|
|
|
// 获取后台数据
|
|
|
|
|
getData() {
|
|
|
|
|
this.load = true;
|
|
|
|
|
let obj = Object.assign({}, this.getCommTime, this.form);
|
|
|
|
|
getWeiYiCountHome0528(obj).then(res => {
|
|
|
|
|
let data = res.data;
|
|
|
|
|
this.pdata = data;
|
|
|
|
|
this.load = false;
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
// 获取分页数据
|
|
|
|
|
handlerData(arr) {
|
|
|
|
|
let dy = [];
|
|
|
|
|
let ds = [];
|
|
|
|
|
arr.forEach(ele => {
|
|
|
|
|
let key = ele.key;
|
|
|
|
|
let value = ele.value;
|
|
|
|
|
dy.push(key);
|
|
|
|
|
ds.push(value)
|
|
|
|
|
});
|
|
|
|
|
this.opt = createOpt(dy,ds);
|
|
|
|
|
ModalText: "",
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
this.getData();
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
// 切换后台数据
|
|
|
|
|
handlerChange(n) {
|
|
|
|
|
this.type = n;
|
|
|
|
|
this.form.sQueryType = n + 1;
|
|
|
|
|
this.getData();
|
|
|
|
|
},
|
|
|
|
|
// 获取后台数据
|
|
|
|
|
getData() {
|
|
|
|
|
this.load = true;
|
|
|
|
|
let obj = Object.assign({}, this.getCommTime, this.form);
|
|
|
|
|
getWeiYiCountHome0528(obj).then((res) => {
|
|
|
|
|
let data = res.data;
|
|
|
|
|
this.pdata = data;
|
|
|
|
|
this.load = false;
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
handleCancel() {
|
|
|
|
|
// 获取分页数据
|
|
|
|
|
handlerData(arr) {
|
|
|
|
|
let dy = [];
|
|
|
|
|
let ds = [];
|
|
|
|
|
arr.forEach((ele) => {
|
|
|
|
|
let key = ele.key;
|
|
|
|
|
let value = ele.value;
|
|
|
|
|
dy.push(key);
|
|
|
|
|
ds.push(value);
|
|
|
|
|
});
|
|
|
|
|
this.opt = createOpt(dy, ds);
|
|
|
|
|
},
|
|
|
|
|
handleCancel() {
|
|
|
|
|
this.visible = false;
|
|
|
|
|
},
|
|
|
|
|
handleOk() {
|
|
|
|
|
this.$router.push('/login')
|
|
|
|
|
handleOk() {
|
|
|
|
|
this.$router.push("/login");
|
|
|
|
|
},
|
|
|
|
|
clickEchars(data) {
|
|
|
|
|
clickEchars(data) {
|
|
|
|
|
if (!this.getToken) {
|
|
|
|
|
this.visible = true;
|
|
|
|
|
this.ModalText = "您还未登录,是否前往登录"
|
|
|
|
|
this.ModalText = "您还未登录,是否前往登录";
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
let ele = data[0];
|
|
|
|
|
if(this.type === 1) {
|
|
|
|
|
let model = ele.axisValueLabel
|
|
|
|
|
this.setModel({name: model});
|
|
|
|
|
this.setHeaderType(3);
|
|
|
|
|
if (this.type === 1) {
|
|
|
|
|
let model = ele.axisValueLabel;
|
|
|
|
|
let obj = {
|
|
|
|
|
token: this.getToken,
|
|
|
|
|
sSeriesName: model
|
|
|
|
|
}
|
|
|
|
|
getBrandName(obj).then((res) => {
|
|
|
|
|
this.setBrand({brandname: res.data})
|
|
|
|
|
this.$router.push("/modelInsight");
|
|
|
|
|
})
|
|
|
|
|
sSeriesName: model,
|
|
|
|
|
};
|
|
|
|
|
getBrandOrSeriesLevel(obj).then(() => {
|
|
|
|
|
this.setModel({ name: model });
|
|
|
|
|
this.setHeaderType(3);
|
|
|
|
|
getBrandName(obj).then((res) => {
|
|
|
|
|
this.setBrand({ brandname: res.data });
|
|
|
|
|
this.$router.push("/modelInsight");
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
let brand = ele.axisValueLabel;
|
|
|
|
|
this.getUserSeriesName(brand);
|
|
|
|
|
this.setBrand({brandname: brand});
|
|
|
|
|
this.setHeaderType(3);
|
|
|
|
|
this.$router.push("/brandInsight");
|
|
|
|
|
getBrandOrSeriesLevel({
|
|
|
|
|
token: this.getToken,
|
|
|
|
|
sBrand: brand,
|
|
|
|
|
}).then(() => {
|
|
|
|
|
this.getUserSeriesName(brand);
|
|
|
|
|
this.setBrand({ brandname: brand });
|
|
|
|
|
this.setHeaderType(3);
|
|
|
|
|
this.$router.push("/brandInsight");
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 获取车型
|
|
|
|
@ -121,25 +131,25 @@ export default {
|
|
|
|
|
this.setModel(this.chooseModel);
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
|
|
.tl-outter {
|
|
|
|
|
position: relative;
|
|
|
|
|
width: 460px;
|
|
|
|
|
height: 312px;
|
|
|
|
|
border: 2px solid #0f2a4d;
|
|
|
|
|
margin-top: 16px;
|
|
|
|
|
margin-left: 16px;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
.tl-bd {
|
|
|
|
|
position: relative;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: calc(100% - 48px);
|
|
|
|
|
}
|
|
|
|
|
position: relative;
|
|
|
|
|
width: 460px;
|
|
|
|
|
height: 312px;
|
|
|
|
|
border: 2px solid #0f2a4d;
|
|
|
|
|
margin-top: 16px;
|
|
|
|
|
margin-left: 16px;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
.tl-bd {
|
|
|
|
|
position: relative;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: calc(100% - 48px);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.tis {
|
|
|
|
|
display: flex;
|
|
|
|
|