develop
/
qwl-data-report-h5
10
0
Fork 1
Code Issues Pull Requests Projects Releases Wiki Activity
Labels Milestones
New Pull Request

develop #15

Merged
bill_del merged 12 commits from develop into master 3 years ago
Conversation 0 Commits 12 Files Changed 8
8 changed files with 245 additions and 166 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 20
      src/App.vue
  2. 6
      src/router/index.js
  3. 9
      src/views/Home/index.vue
  4. 21
      src/views/PerformanceData/index.vue
  5. 69
      src/views/cityDistribution/index.vue
  6. 27
      src/views/dataOverview/index.vue
  7. 2
      src/views/teamList/index.vue
  8. 257
      src/views/teamPerformance/index.vue

20
src/App.vue
View File

@ -1,8 +1,9 @@
<template>
<div id="app">
<keep-alive include="beiHuo,tiHuo">
<router-view v-if="isRouterAlive"></router-view>
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive >
<router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
</template>
@ -10,24 +11,11 @@
export default {
name:'APP',
provide(){ //父组件中通过provide来提供变量，在子组件中通过inject来注入变量。
return{
reload:this.reload
}
},
data(){
return{
isRouterAlive:true
}
},
methods: {
reload () {
this.isRouterAlive = false; //先关闭，
this.$nextTick(function () {
this.isRouterAlive = true; //再打开
})
}
}
};
</script>

6
src/router/index.js
View File

@ -31,6 +31,9 @@ const routes = [{
path: "/home",
name: 'home',
component: () => import('../views/Home/index.vue'),
meta: {
keepAlive: true
}
},
{
path: "/cityDistribution",
@ -51,9 +54,6 @@ const routes = [{
path: "/teamList",
name: 'teamList',
component: () => import('../views/teamList/index.vue'),
meta: {
// title: '列表'
}
},
{
path: "/teamPerformance",

9
src/views/Home/index.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="home">
<div class="tabs">
<van-tabs v-model="active" sticky>
<van-tabs v-model="active" >
<van-tab title="数据总览">
<dataOverview></dataOverview>
</van-tab>
@ -43,11 +43,18 @@
.tabs {
font-size: 36px;
height: 80px;
padding-top: 90px;
// position: fixed;
// top: 0;
::v-deep {
.van-tabs__wrap {
height: 90px;
padding-bottom: 10px;
position: fixed;
top: 0;
z-index: 999;
width: 100%;
}
.van-tabs__nav--line {

21
src/views/PerformanceData/index.vue
View File

@ -1,7 +1,8 @@
<template>
<div class="PerformanceData">
<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
<div class="dataInfo">
<p class="title">2021年总业绩</p>
<p class="title">轻未来2021年总业绩</p>
<p class="money" v-if="year_count_order_money">¥{{year_count_order_money | capitalize}}</p>
</div>
<!-- <div class="time">
@ -16,18 +17,26 @@
<div class="bar" ref="bar"></div>
</div>
</van-pull-refresh>
</div>
</template>
<script>
import * as echarts from 'echarts';
import data from "@/api/data.js";
import {
PullRefresh
} from 'vant';
export default {
components: {
'van-pull-refresh': PullRefresh
},
data() {
return {
opinionData: [],
year_count_order_money: '',
money_count_order_money: '',
order_goods_num: '',
isLoading: false,
}
},
@ -42,6 +51,12 @@
}
},
methods: {
async onRefresh() {
await this.getData()
this.drawLine(this.opinionData)
this.barData(this.opinionData)
this.isLoading = false;
},
async getData() {
this.opinionData = []
let month = new Date().getMonth() + 1;
@ -179,6 +194,9 @@
box-shadow: 0px 17px 35px 0px rgba(58, 61, 80, 0.2);
border-radius: 0px 0px 20px 20px;
margin-bottom: 52px;
position: fixed;
// top: 85px;
z-index: 999;
.title {
font-size: 40px;
@ -229,6 +247,7 @@
background: linear-gradient(0deg, #4D5169, #272A3B);
border-radius: 20px;
padding: 50px 70px;
padding-top: 41.67vw;
.title {
font-size: 40px;

69
src/views/cityDistribution/index.vue
View File

@ -1,39 +1,47 @@
<template>
<div class="cityDistribution">
<div class="top">
<p class="title">服务商总数量</p>
<p class="num">{{poxy_sum | capitalize}}</p>
</div>
<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
<div class="top">
<p class="title">服务商总数量</p>
<p class="num">{{poxy_sum | capitalize}}</p>
</div>
<div ref="area" id="area"></div>
<div class="info">
<div>
<p v-for="(item,index) of cityInfo" :key="index"><span>{{item.name}}：</span>{{item.value}}</p>
<div ref="area" id="area"></div>
<div class="info">
<div>
<p v-for="(item,index) of cityInfo" :key="index"><span>{{item.name}}：</span>{{item.value}}</p>
</div>
<div ref='chartBar' id="home" v-show="!isLoading"></div>
</div>
<div ref='chartBar' id="home"></div>
</div>
<div class="ranking">
<p class="title">代理城市排名</p>
<div class="rankingCity">
<div v-for="(item,index) in city" :key="index">
<div class="item">
<div class="city">
<p class="rankNum">{{index+1}}</p>
<p class="cityName">{{item.name}}</p>
<div class="ranking">
<p class="title">代理城市排名</p>
<div class="rankingCity">
<div v-for="(item,index) in city" :key="index">
<div class="item">
<div class="city">
<p class="rankNum">{{index+1}}</p>
<p class="cityName">{{item.name}}</p>
</div>
<p class="number">{{item.num.counts | capitalize}}</p>
</div>
<p class="number">{{item.num.counts | capitalize}}</p>
</div>
</div>
</div>
</div>
</van-pull-refresh>
</div>
</template>
<script>
import * as echarts from 'echarts';
import {
PullRefresh
} from 'vant';
import '../../utils/china'
import data from "@/api/data.js";
export default {
name: 'cityDistribution',
components: {
'van-pull-refresh': PullRefresh
},
data() {
return {
poxy_sum: '',
@ -41,6 +49,7 @@
cityName: '广东',
cityInfo: [],
chartBar: null,
isLoading: false,
}
},
filters: {
@ -54,6 +63,14 @@
this.statistical(this.cityInfo)
},
methods: {
async onRefresh() {
this.cityInfo = [];
this.chartBar = null;
await this.getData()
await this.drawarea();
await this.statistical(this.cityInfo)
this.isLoading = false;
},
async getData() {
const res = await data.dataDistribution();
this.poxy_sum = res.data.poxy_sum
@ -214,6 +231,7 @@
min-height: 100vh;
background: #3C3F50;
.top {
height: 258px;
background: linear-gradient(90deg, #729EFF, #5D48E1);
@ -221,6 +239,10 @@
border-radius: 0px 0px 20px 20px;
padding: 0 68px;
padding-top: 50px;
position: fixed;
// top: 85px;
z-index: 999;
width: 100%;
.title {
font-size: 40px;
@ -243,7 +265,8 @@
}
#area {
height: 400px;
padding-top: 34.2vw;
height: 89.33vw;
width: 750px;
}
@ -251,7 +274,7 @@
width: 690px;
height: 364px;
// margin: 0 auto;
// margin-top: 60px;
margin-top: 60px;
left: 50%;
transform: translateX(-50%);
}
@ -259,7 +282,7 @@
.info {
margin: 0 auto;
width: 690px;
height: 724px;
height: 105.53vw;
background: linear-gradient(0deg, #729EFF, #5D48E1);
border-radius: 20px;
padding: 46px 24px;

27
src/views/dataOverview/index.vue
View File

@ -1,11 +1,12 @@
<template>
<div class="dataOverview">
<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
<div class="top">
<p class="title">2021年总业绩</p>
<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">
<div class="providersSum aa">
<p class="title">服务商总数量</p>
<p class="num">{{list.level_count | capitalize}}</p>
<div class="list">
@ -125,15 +126,23 @@
</div>
</div>
</div>
</van-pull-refresh>
</div>
</template>
<script>
import data from "@/api/data.js";
import {
PullRefresh
} from 'vant';
export default {
name: "dataOverview",
components: {
'van-pull-refresh': PullRefresh
},
data() {
return {
list: {},
isLoading: false,
}
},
filters: {
@ -145,6 +154,10 @@
this.getData()
},
methods: {
onRefresh() {
this.getData()
this.isLoading = false;
},
async getData() {
const res = await data.overview();
this.list = res.data
@ -173,8 +186,10 @@
<style lang="scss" scoped>
.dataOverview {
background: #3C3F50;
// padding-top: 334px;
.top {
z-index: 999;
width: 750px;
height: 334px;
background: linear-gradient(90deg, #729EFF, #5D48E1);
@ -183,6 +198,8 @@
padding: 0 70px;
padding-top: 46px;
margin-bottom: 50px;
position: fixed;
// top: 85px;
.title {
height: 40px;
@ -218,8 +235,12 @@
display: inline-block;
}
}
.aa {
padding-top: 53.53vw !important;
}
.providersSum {
padding-top: 334px;
padding: 50px 70px;
min-height: 580px;
background: RGBA(63, 66, 88, 1);

2
src/views/teamList/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="teamList">
<van-nav-bar title="列表" left-text="返回" left-arrow @click-left="onClickLeft" />
<van-nav-bar title="列表" left-text="返回" left-arrow @click-left="onClickLeft" :fixed="true" />
<div v-if="list.data.length>0" class="moneyRanking">
<p class="title">{{this.$route.query.level_id | capitalize2}}</p>
<div class="list">

257
src/views/teamPerformance/index.vue
View File

@ -1,147 +1,152 @@
<template>
<div class="dataOverview">
<van-nav-bar title="团队信息" left-text="返回" left-arrow @click-left="onClickLeft" />
<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" @click="toTeamList('1','5')">
<div class="left">
<img src="../../assets/shareholder.svg" alt="">
</div>
<div class="right">
<p class="name">股东</p>
<p class="num">{{list.level_5}}</p>
</div>
</div>
<div class="item" @click="toTeamList('1','4')">
<div class="left">
<img src="../../assets/filiale.svg" alt="">
</div>
<div class="right">
<p class="name">分公司</p>
<p class="num">{{list.level_4}}</p>
</div>
</div>
<div class="item" @click="toTeamList('1','3')">
<div class="left">
<img src="../../assets/partner.svg" alt="">
</div>
<div class="right">
<p class="name">合伙人</p>
<p class="num">{{list.level_3}}</p>
<van-nav-bar title="团队信息" left-text="返回" left-arrow @click-left="onClickLeft" :fixed="true" />
<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
<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 aa">
<p class="title">服务商总数量</p>
<p class="num">{{list.level_count | capitalize}}</p>
<div class="list">
<div class="item" @click="toTeamList('1','5')">
<div class="left">
<img src="../../assets/shareholder.svg" alt="">
</div>
<div class="right">
<p class="name">股东</p>
<p class="num">{{list.level_5}}</p>
</div>
</div>
</div>
<div class="item" @click="toTeamList('1','2')">
<div class="left">
<img src="../../assets/general.svg" alt="">
<div class="item" @click="toTeamList('1','4')">
<div class="left">
<img src="../../assets/filiale.svg" alt="">
</div>
<div class="right">
<p class="name">分公司</p>
<p class="num">{{list.level_4}}</p>
</div>
</div>
<div class="right">
<p class="name">总代</p>
<p class="num">{{list.level_2}}</p>
<div class="item" @click="toTeamList('1','3')">
<div class="left">
<img src="../../assets/partner.svg" alt="">
</div>
<div class="right">
<p class="name">合伙人</p>
<p class="num">{{list.level_3}}</p>
</div>
</div>
</div>
<div class="item" style="margin-bottom:0px" @click="toTeamList('1','1')">
<div class="left">
<img src="../../assets/vip.svg" alt="">
<div class="item" @click="toTeamList('1','2')">
<div class="left">
<img src="../../assets/general.svg" alt="">
</div>
<div class="right">
<p class="name">总代</p>
<p class="num">{{list.level_2}}</p>
</div>
</div>
<div class="right">
<p class="name">vip</p>
<p class="num">{{list.level_1}}</p>
<div class="item" style="margin-bottom:0px" @click="toTeamList('1','1')">
<div class="left">
<img src="../../assets/vip.svg" alt="">
</div>
<div class="right">
<p class="name">vip</p>
<p class="num">{{list.level_1}}</p>
</div>
</div>
</div>
</div>
</div>
<div class="providersSum1 providersSum">
<p class="title">本月新增服务商</p>
<div class="list">
<div class="item" @click="toTeamList('2','5')">
<div class="left">
<img src="../../assets/shareholder.svg" alt="">
</div>
<div class="right">
<p class="name">股东</p>
<p class="num">{{list.month_add_level_5}}</p>
</div>
</div>
<div class="item" @click="toTeamList('2','4')">
<div class="left">
<img src="../../assets/filiale.svg" alt="">
</div>
<div class="right">
<p class="name">分公司</p>
<p class="num">{{list.month_add_level_4}}</p>
</div>
</div>
<div class="item" @click="toTeamList('2','3')">
<div class="left">
<img src="../../assets/partner.svg" alt="">
<div class="providersSum1 providersSum">
<p class="title">本月新增服务商</p>
<div class="list">
<div class="item" @click="toTeamList('2','5')">
<div class="left">
<img src="../../assets/shareholder.svg" alt="">
</div>
<div class="right">
<p class="name">股东</p>
<p class="num">{{list.month_add_level_5}}</p>
</div>
</div>
<div class="right">
<p class="name">合伙人</p>
<p class="num">{{list.month_add_level_3}}</p>
<div class="item" @click="toTeamList('2','4')">
<div class="left">
<img src="../../assets/filiale.svg" alt="">
</div>
<div class="right">
<p class="name">分公司</p>
<p class="num">{{list.month_add_level_4}}</p>
</div>
</div>
</div>
<div class="item" @click="toTeamList('2','2')">
<div class="left">
<img src="../../assets/general.svg" alt="">
</div>
<div class="right">
<p class="name">总代</p>
<p class="num">{{list.month_add_level_2}}</p>
<div class="item" @click="toTeamList('2','3')">
<div class="left">
<img src="../../assets/partner.svg" alt="">
</div>
<div class="right">
<p class="name">合伙人</p>
<p class="num">{{list.month_add_level_3}}</p>
</div>
</div>
</div>
<div class="item" style="margin-bottom:0px" @click="toTeamList('2','1')">
<div class="left">
<img src="../../assets/vip.svg" alt="">
<div class="item" @click="toTeamList('2','2')">
<div class="left">
<img src="../../assets/general.svg" alt="">
</div>
<div class="right">
<p class="name">总代</p>
<p class="num">{{list.month_add_level_2}}</p>
</div>
</div>
<div class="right">
<p class="name">vip</p>
<p class="num">{{list.month_add_level_1}}</p>
<div class="item" style="margin-bottom:0px" @click="toTeamList('2','1')">
<div class="left">
<img src="../../assets/vip.svg" alt="">
</div>
<div class="right">
<p class="name">vip</p>
<p class="num">{{list.month_add_level_1}}</p>
</div>
</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">{{list.today_month}}月打款业绩：{{item.team_integral | capitalize}}</div>
<div class="teamNum">注册时间：{{item.created_at | time}}</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">{{list.today_month}}月打款业绩：{{item.team_integral | capitalize}}</div>
<div class="teamNum">注册时间：{{item.created_at | time}}</div>
</div>
</div>
</div>
</div>
</div>
</van-pull-refresh>
</div>
</template>
<script>
import data from "@/api/data.js";
import {
NavBar
NavBar,
PullRefresh
} from 'vant';
export default {
name: "dataOverview",
components: {
"van-nav-bar": NavBar
"van-nav-bar": NavBar,
'van-pull-refresh': PullRefresh
},
data() {
return {
list: {},
id: '',
isLoading: false,
}
},
filters: {
@ -158,6 +163,10 @@
this.getData()
},
methods: {
onRefresh() {
this.getData()
this.isLoading = false;
},
onClickLeft() {
this.$router.go(-1)
},
@ -184,22 +193,27 @@
<style lang="scss" scoped>
.dataOverview {
background: #3C3F50;
::v-deep .van-nav-bar__content{
background: RGBA(63, 66, 88, 1);
::v-deep .van-nav-bar__content {
background: RGBA(63, 66, 88, 1);
}
::v-deep .van-nav-bar__title{
::v-deep .van-nav-bar__title {
color: #fff;
}
::v-deep .van-nav-bar__text{
::v-deep .van-nav-bar__text {
color: #fff;
}
::v-deep .van-icon-arrow-left::before{
::v-deep .van-icon-arrow-left::before {
color: #fff;
}
::v-deep .van-hairline--bottom::after{
::v-deep .van-hairline--bottom::after {
border: none;
}
.top {
width: 750px;
height: 334px;
@ -209,6 +223,9 @@
padding: 0 70px;
padding-top: 46px;
margin-bottom: 50px;
position: fixed;
top: 85px;
z-index: 999;
.title {
height: 40px;
@ -245,6 +262,10 @@
}
}
.aa {
padding-top: 58.53vw !important;
}
.providersSum {
padding: 50px 70px;
min-height: 580px;

Write Preview
Loading…
Cancel
Save