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> |
<template> |
||||
<div class="home"> |
<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> |
||||
</div> |
</div> |
||||
</template> |
</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> |
<style lang="scss" scoped> |
||||
.pp{ |
|
||||
|
.tabs { |
||||
font-size: 36px; |
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> |
</style> |
||||
@ -1,30 +1,346 @@ |
|||||
<template> |
<template> |
||||
<div class="dataOverview"> |
<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> |
</div> |
||||
</template> |
</template> |
||||
<script> |
<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() |
this.getData() |
||||
}, |
}, |
||||
methods:{ |
|
||||
async getData(){ |
|
||||
|
methods: { |
||||
|
async getData() { |
||||
const res = await data.overview(); |
const res = await data.overview(); |
||||
console.log(res,'---res'); |
|
||||
|
this.list = res.data |
||||
|
console.log(this.list,'---this.list'); |
||||
}, |
}, |
||||
} |
} |
||||
} |
|
||||
|
} |
||||
</script> |
</script> |
||||
<style lang="scss" scoped> |
<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> |
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue