parent
1bf40556c4
commit
7eceb69991
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 4.2 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
@ -1,85 +1,89 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: xw
|
* @Author: xw
|
||||||
* @Date: 2021-10-09 10:53:21
|
* @Date: 2021-10-09 10:53:21
|
||||||
* @LastEditTime: 2021-10-22 11:59:54
|
* @LastEditTime: 2021-10-29 14:35:40
|
||||||
* @LastEditors: Please set LastEditors
|
* @LastEditors: Please set LastEditors
|
||||||
* @Description: 传播声量TOP10
|
* @Description: 传播声量TOP10
|
||||||
* @FilePath: /data-show/src/views/Index/spreadTheSound/index.vue
|
* @FilePath: /data-show/src/views/Index/spreadTheSound/index.vue
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
<div class="st-outter" v-loading="load">
|
<div class="st-outter" v-loading="load">
|
||||||
<v-label-div title="传播声量TOP10">
|
<v-label-div title="传播声量TOP10">
|
||||||
<div>
|
<div class="tis">
|
||||||
<v-tab-group :btns="['品牌', '车型']" @change="handlerChange"></v-tab-group>
|
<v-pagination :data="pdata" :style="{marginRight: '0.8rem', marginTop: '0.4rem'}" @change="handlerData"></v-pagination>
|
||||||
</div>
|
<v-tab-group :btns="['品牌', '车型']" @change="handlerChange"></v-tab-group>
|
||||||
</v-label-div>
|
</div>
|
||||||
<div class="st-bd">
|
</v-label-div>
|
||||||
<v-echarts :opt="opt"></v-echarts>
|
<div class="st-bd">
|
||||||
<v-pagination :data="pdata" :style="{position: 'absolute', right: '2px', bottom: '2px'}" @change="handlerData"></v-pagination>
|
<v-echarts :opt="opt"></v-echarts>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import createOpt from "./opt"
|
import createOpt from "./opt";
|
||||||
import {getHomeBrandSourceType0528} from "@/api/home"
|
import { getHomeBrandSourceType0528 } from "@/api/home";
|
||||||
export default {
|
export default {
|
||||||
name: "spread-the-sound",
|
name: "spread-the-sound",
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
load: false,
|
load: false,
|
||||||
form: {
|
form: {
|
||||||
sQueryType: 1
|
sQueryType: 1,
|
||||||
},
|
},
|
||||||
opt: {},
|
opt: {},
|
||||||
pdata: []
|
pdata: [],
|
||||||
}
|
};
|
||||||
},
|
|
||||||
created() {
|
|
||||||
this.getData()
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
// 切换选择后台数据
|
|
||||||
handlerChange(n) {
|
|
||||||
this.form.sQueryType = n + 1;
|
|
||||||
this.getData()
|
|
||||||
},
|
},
|
||||||
// 获取数据
|
created() {
|
||||||
getData() {
|
this.getData();
|
||||||
this.load = true;
|
},
|
||||||
let obj = Object.assign({}, this.getCommTime, this.form);
|
methods: {
|
||||||
getHomeBrandSourceType0528(obj).then(res => {
|
// 切换选择后台数据
|
||||||
let data = res.data;
|
handlerChange(n) {
|
||||||
this.pdata = data;
|
this.form.sQueryType = n + 1;
|
||||||
this.load = false;
|
this.getData();
|
||||||
})
|
},
|
||||||
|
// 获取数据
|
||||||
|
getData() {
|
||||||
|
this.load = true;
|
||||||
|
let obj = Object.assign({}, this.getCommTime, this.form);
|
||||||
|
getHomeBrandSourceType0528(obj).then((res) => {
|
||||||
|
let data = res.data;
|
||||||
|
this.pdata = data;
|
||||||
|
this.load = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 分页显示数据
|
||||||
|
handlerData(arr) {
|
||||||
|
let dx = [];
|
||||||
|
let ds = [];
|
||||||
|
arr.forEach((ele) => {
|
||||||
|
let key = ele.key;
|
||||||
|
let value = ele.value;
|
||||||
|
dx.push(key);
|
||||||
|
ds.push(value);
|
||||||
|
});
|
||||||
|
this.opt = createOpt(dx, ds);
|
||||||
|
},
|
||||||
},
|
},
|
||||||
// 分页显示数据
|
|
||||||
handlerData(arr) {
|
|
||||||
let dx = [];
|
|
||||||
let ds = [];
|
|
||||||
arr.forEach(ele => {
|
|
||||||
let key = ele.key;
|
|
||||||
let value = ele.value;
|
|
||||||
dx.push(key);
|
|
||||||
ds.push(value);
|
|
||||||
})
|
|
||||||
this.opt = createOpt(dx,ds);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.st-outter {
|
.st-outter {
|
||||||
width: 460px;
|
width: 460px;
|
||||||
height: 312px;
|
height: 312px;
|
||||||
border: 2px solid #0f2a4d;
|
border: 2px solid #0f2a4d;
|
||||||
margin-top: 16px;
|
margin-top: 16px;
|
||||||
.st-bd {
|
.st-bd {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: calc(100% - 48px);
|
height: calc(100% - 48px);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
.tis {
|
||||||
|
display: flex;
|
||||||
|
justify-items: flex-end;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
Loading…
Reference in new issue