forked from develop/qwl-data-report-h5
zhaoguoqiang
3 years ago
5 changed files with 562 additions and 99 deletions
-
3src/store/user.js
-
65src/views/Home/home.vue
-
3src/views/PerformanceData/index.vue
-
216src/views/cityDistribution/index.vue
-
342src/views/dataOverview/index.vue
@ -1,13 +1,68 @@ |
|||
<template> |
|||
<div class="home"> |
|||
<div class="pp"> |
|||
66666666666666666666666666666666666666666666 |
|||
<div class="tabs"> |
|||
<van-tabs v-model="active" sticky> |
|||
<van-tab title="数据总览"> |
|||
<dataOverview></dataOverview> |
|||
</van-tab> |
|||
<van-tab title="业绩数据"> |
|||
<PerformanceData></PerformanceData> |
|||
</van-tab> |
|||
<van-tab title="城市分布"> |
|||
<cityDistribution></cityDistribution> |
|||
</van-tab> |
|||
</van-tabs> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import cityDistribution from '../cityDistribution/index.vue' |
|||
import dataOverview from '../dataOverview/index.vue' |
|||
import PerformanceData from '../PerformanceData/index.vue' |
|||
import { |
|||
Tab, |
|||
Tabs |
|||
} from 'vant'; |
|||
export default { |
|||
name: 'home', |
|||
data() { |
|||
return { |
|||
active: '数据总览', |
|||
} |
|||
}, |
|||
components: { |
|||
"van-tabs": Tabs, |
|||
"van-tab": Tab, |
|||
"PerformanceData": PerformanceData, |
|||
"dataOverview": dataOverview, |
|||
"cityDistribution": cityDistribution |
|||
}, |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.pp{ |
|||
.tabs { |
|||
font-size: 36px; |
|||
} |
|||
height: 80px; |
|||
::v-deep .van-tabs__wrap{ |
|||
height: 90px; |
|||
padding-bottom: 10px; |
|||
} |
|||
::v-deep .van-tabs__nav--line{ |
|||
|
|||
background: rgba(63, 66, 85, 1); |
|||
} |
|||
::v-deep .van-tab__text--ellipsis{ |
|||
color: #ffff; |
|||
font-size: 28px; |
|||
height: 70px; |
|||
line-height: 70px; |
|||
} |
|||
::v-deep .van-tab--active{ |
|||
background: rgba(114, 158, 255, 0.1); |
|||
} |
|||
::v-deep .van-tabs__line{ |
|||
background-color:rgba(114, 158, 255, 1); |
|||
width: 33.667vw; |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,30 +1,346 @@ |
|||
<template> |
|||
<div class="dataOverview"> |
|||
<div class="top"> |
|||
<p class="title">2021年总业绩</p> |
|||
<p class="money">¥{{list.year_count | capitalize}}</p> |
|||
<p class="monthMoney">本月业绩：{{list.month_count | capitalize}}</p> |
|||
</div> |
|||
<div class="providersSum"> |
|||
<p class="title">服务商总数量</p> |
|||
<p class="num">{{list.level_count | capitalize}}</p> |
|||
<div class="list"> |
|||
<div class="item"> |
|||
<div class="left"></div> |
|||
<div class="right"> |
|||
<p class="name">vip</p> |
|||
<p class="num">{{list.level_1}}</p> |
|||
</div> |
|||
</div> |
|||
<div class="item"> |
|||
<div class="left"></div> |
|||
<div class="right"> |
|||
<p class="name">总代</p> |
|||
<p class="num">{{list.level_2}}</p> |
|||
</div> |
|||
</div> |
|||
<div class="item"> |
|||
<div class="left"></div> |
|||
<div class="right"> |
|||
<p class="name">合伙人</p> |
|||
<p class="num">{{list.level_3}}</p> |
|||
</div> |
|||
</div> |
|||
<div class="item"> |
|||
<div class="left"></div> |
|||
<div class="right"> |
|||
<p class="name">分公司</p> |
|||
<p class="num">{{list.level_4}}</p> |
|||
</div> |
|||
</div> |
|||
<div class="item"> |
|||
<div class="left"></div> |
|||
<div class="right"> |
|||
<p class="name">股东</p> |
|||
<p class="num">{{list.level_5}}</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="providersSum1 providersSum"> |
|||
<p class="title">本月新增服务商</p> |
|||
<div class="list"> |
|||
<div class="item"> |
|||
<div class="left"></div> |
|||
<div class="right"> |
|||
<p class="name">vip</p> |
|||
<p class="num">{{list.month_add_level_1}}</p> |
|||
</div> |
|||
</div> |
|||
<div class="item"> |
|||
<div class="left"></div> |
|||
<div class="right"> |
|||
<p class="name">总代</p> |
|||
<p class="num">{{list.month_add_level_2}}</p> |
|||
</div> |
|||
</div> |
|||
<div class="item"> |
|||
<div class="left"></div> |
|||
<div class="right"> |
|||
<p class="name">合伙人</p> |
|||
<p class="num">{{list.month_add_level_3}}</p> |
|||
</div> |
|||
</div> |
|||
<div class="item"> |
|||
<div class="left"></div> |
|||
<div class="right"> |
|||
<p class="name">分公司</p> |
|||
<p class="num">{{list.month_add_level_4}}</p> |
|||
</div> |
|||
</div> |
|||
<div class="item"> |
|||
<div class="left"></div> |
|||
<div class="right"> |
|||
<p class="name">股东</p> |
|||
<p class="num">{{list.month_add_level_5}}</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="moneyRanking"> |
|||
<div class="title">本月团队业绩排名TOP</div> |
|||
<div class="list"> |
|||
<div class="item" v-for="(item,index) of list.month_money_top" :key="index"> |
|||
<div class="rankNum"> |
|||
<p>{{index+1}}</p> |
|||
</div> |
|||
<div class="teamImg"> |
|||
<img :src="item.headimg" alt=""> |
|||
</div> |
|||
<div class="teamInfo"> |
|||
<div class="teamName">{{item.username}}</div> |
|||
<div class="teamMoney">7月打款业绩：{{item.team_integral | capitalize}}</div> |
|||
<div class="teamNum">团队人数：{{item.team_num}}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import data from "@/api/data.js"; |
|||
export default { |
|||
name:"dataOverview", |
|||
data(){ |
|||
return{ |
|||
|
|||
import data from "@/api/data.js"; |
|||
export default { |
|||
name: "dataOverview", |
|||
data() { |
|||
return { |
|||
list:{}, |
|||
} |
|||
}, |
|||
created(){ |
|||
filters: { |
|||
capitalize: function (val) { |
|||
return (+val || 0).toFixed(0).replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,') |
|||
} |
|||
}, |
|||
created() { |
|||
this.getData() |
|||
}, |
|||
methods:{ |
|||
async getData(){ |
|||
methods: { |
|||
async getData() { |
|||
const res = await data.overview(); |
|||
console.log(res,'---res'); |
|||
this.list = res.data |
|||
console.log(this.list,'---this.list'); |
|||
}, |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.dataOverview{ |
|||
.dataOverview { |
|||
background: #3C3F50; |
|||
.top { |
|||
width: 750px; |
|||
height: 334px; |
|||
background: linear-gradient(90deg, #729EFF, #5D48E1); |
|||
box-shadow: 0px 17px 35px 0px rgba(58, 61, 80, 0.2); |
|||
border-radius: 0px 0px 20px 20px; |
|||
padding: 0 70px; |
|||
padding-top: 46px; |
|||
margin-bottom: 50px; |
|||
|
|||
.title { |
|||
height: 40px; |
|||
font-size: 40px; |
|||
font-family: Microsoft YaHei; |
|||
font-weight: 400; |
|||
color: #FFFFFF; |
|||
height: 39px; |
|||
line-height: 40px; |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
.money { |
|||
height: 77px; |
|||
font-size: 76px; |
|||
font-family: OPPOSans; |
|||
font-weight: normal; |
|||
color: #FFFFFF; |
|||
line-height: 77px; |
|||
margin-bottom: 30px; |
|||
} |
|||
|
|||
.monthMoney { |
|||
height: 74px; |
|||
background: rgba(255, 255, 255, .14); |
|||
border-radius: 37px; |
|||
font-size: 44px; |
|||
font-family: Microsoft YaHei; |
|||
font-weight: 400; |
|||
color: #FFFFFF; |
|||
line-height: 74px; |
|||
padding: 0 37px; |
|||
display: inline-block; |
|||
} |
|||
} |
|||
|
|||
.providersSum { |
|||
padding: 50px 70px; |
|||
min-height: 580px; |
|||
background: RGBA(63, 66, 88, 1); |
|||
border-radius: 20px; |
|||
margin-bottom: 50px; |
|||
|
|||
} |
|||
.title { |
|||
font-size: 40px; |
|||
font-weight: 400; |
|||
color: #FFFFFF; |
|||
line-height: 40px; |
|||
height: 40px; |
|||
margin-bottom: 23px; |
|||
} |
|||
|
|||
.num { |
|||
font-size: 76px; |
|||
font-weight: normal; |
|||
color: #27F0F1; |
|||
line-height: 76px; |
|||
height: 76px; |
|||
margin-bottom: 36px; |
|||
} |
|||
|
|||
.list { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
flex-flow: wrap; |
|||
|
|||
.item { |
|||
width: 272px; |
|||
height: 115px; |
|||
border-radius: 20px; |
|||
display: flex; |
|||
background: rgba(58, 61, 80, 0.36); |
|||
overflow: hidden; |
|||
margin-bottom: 26px; |
|||
|
|||
.left { |
|||
width: 104px; |
|||
height: 115px; |
|||
background: #616595; |
|||
} |
|||
|
|||
.right { |
|||
width: 168px; |
|||
background: #616582; |
|||
padding-top: 19px; |
|||
padding-left: 18px; |
|||
|
|||
.name { |
|||
font-size: 32px; |
|||
height: 32px; |
|||
line-height: 32px; |
|||
margin-bottom: 14px; |
|||
font-weight: 400; |
|||
color: #FFFFFF; |
|||
} |
|||
|
|||
.num { |
|||
font-size: 40px; |
|||
height: 40px; |
|||
line-height: 40px; |
|||
font-weight: normal; |
|||
color: #FFFFFF; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.providersSum1 { |
|||
.title { |
|||
margin-bottom: 43px; |
|||
} |
|||
} |
|||
|
|||
.moneyRanking { |
|||
padding: 0 70px; |
|||
padding-top: 50px; |
|||
background: RGBA(63, 66, 88, 1); |
|||
|
|||
.title { |
|||
font-size: 40px; |
|||
height: 40px; |
|||
line-height: 40px; |
|||
font-weight: 400; |
|||
color: #FFFFFF; |
|||
margin-bottom: 33px; |
|||
} |
|||
|
|||
.list { |
|||
padding-bottom: 50px; |
|||
.item { |
|||
width: 610px; |
|||
height: 160px; |
|||
background: linear-gradient(90deg, #729EFF, #5D48E1); |
|||
border-radius: 20px; |
|||
margin: 0 auto; |
|||
display: flex; |
|||
margin-bottom: 26px; |
|||
|
|||
.rankNum { |
|||
width: 95px; |
|||
|
|||
p {height: 100%; |
|||
font-size: 40px; |
|||
font-family: Microsoft YaHei; |
|||
font-weight: 400; |
|||
color: #FFFFFF; |
|||
line-height: 160px; |
|||
text-align: center; |
|||
} |
|||
} |
|||
|
|||
.teamImg { |
|||
width: 160px; |
|||
padding: 15px 0; |
|||
|
|||
img { |
|||
background: #fff; |
|||
width: 100%; |
|||
height: 100%; |
|||
display: block; |
|||
} |
|||
} |
|||
|
|||
.teamInfo { |
|||
padding: 29px 0; |
|||
padding-left: 22px; |
|||
|
|||
.teamName { |
|||
font-size: 26px; |
|||
font-weight: 400; |
|||
color: #FFFFFF; |
|||
height: 26px; |
|||
line-height: 26px; |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
.teamMoney { |
|||
height: 26px; |
|||
line-height: 26px; |
|||
font-size: 26px; |
|||
font-weight: 400; |
|||
color: #FFFFFF; |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
.teamNum { |
|||
height: 26px; |
|||
line-height: 26px; |
|||
font-size: 26px; |
|||
font-weight: 400; |
|||
color: #FFFFFF; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue