bill_del
/
qwl-data-report-h5
forked from develop/qwl-data-report-h5
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

基本完成

develop
zhaoguoqiang 3 years ago
parent
16406872de
commit
12a7951be3
5 changed files with 562 additions and 99 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. 3
      src/store/user.js
  2. 63
      src/views/Home/home.vue
  3. 3
      src/views/PerformanceData/index.vue
  4. 210
      src/views/cityDistribution/index.vue
  5. 320
      src/views/dataOverview/index.vue

3
src/store/user.js
View File

@ -12,7 +12,7 @@ export default {
},
clearToken(state) {
state.token = ''
window.localStorage.setItem('token', '')
window.localStorage.removeItem('token')
},
setUserInfo(state, userInfo) {
state.userInfo = userInfo
@ -23,6 +23,7 @@ export default {
async getUserInfo({ commit, state }, user) {
try {
const res = await user.userInfo()
console.log(res,'------res');
if (res.data.code === 0) {
commit('setUserInfo', res.data.data)
if (state.userInfo.status === 1) {

63
src/views/Home/home.vue
View File

@ -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>

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

@ -11,7 +11,7 @@
<div class="title">营业额</div>
<div class="money" v-if="money_count_order_money"><span>¥</span>{{money_count_order_money | capitalize}}
</div>
<div class="name">轻未来阻燃粉：100,000/盒</div>
<div class="name">轻未来阻燃粉：{{order_goods_num | capitalize}}/盒</div>
<div class="cartogram" ref="cartogram"></div>
</div>
</div>
@ -46,6 +46,7 @@
let list = res.data.month_list_money_count
this.year_count_order_money = res.data.year_count_order_money
this.money_count_order_money = res.data.money_count_order_money
this.order_goods_num = res.data.order_goods_num
for (let key in list) {
this.opinionData.push(list[key])
}

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

@ -7,30 +7,50 @@
<div ref="area" id="area"></div>
<div class="info">
<p><span>股东：</span>1,000</p>
<p><span>分公司：</span>100,000,000</p>
<p><span>分公司：</span>100,000</p>
<p><span>总代：</span>1,000</p>
<div>
<p v-for="(item,index) of cityInfo" :key="index"><span>{{item.name}}：</span>{{item.value}}</p>
</div>
<div ref='chartBar' id="home"></div>
</div>
<div class="ranking">
<p class="title">代理城市排名</p>
<div class="rankingCity">
<div class="item">
<p class="city">广东省</p>
<p class="number">1,000</p>
<div v-for="(item,index) in rankArea" :key="index">
<div class="item" v-if="item.top == 1">
<div class="city">
<p class="rankNum">1</p>
<p class="cityName">{{item.cityName}}</p>
</div>
<p class="number">{{item.counts | capitalize}}</p>
</div>
<div class="item" v-if="item.top == 2">
<div class="city">
<p class="rankNum">2</p>
<p class="cityName">{{item.cityName}}</p>
</div>
<p class="number">{{item.counts | capitalize}}</p>
</div>
<div class="item" v-if="item.top == 3">
<div class="city">
<p class="rankNum">3</p>
<p class="cityName">{{item.cityName}}</p>
</div>
<p class="number">{{item.counts | capitalize}}</p>
</div>
<div class="item" v-if="item.top == 4">
<div class="city">
<p class="rankNum">4</p>
<p class="cityName">{{item.cityName}}</p>
</div>
<div class="item">
<p class="city">湖南省</p>
<p class="number">100,000,00</p>
<p class="number">{{item.counts |capitalize}}</p>
</div>
<div class="item">
<p class="city">上海市</p>
<p class="number">100,000</p>
<div class="item" v-if="item.top == 5">
<div class="city">
<p class="rankNum">5</p>
<p class="cityName">{{item.cityName}}</p>
</div>
<p class="number">{{item.counts | capitalize}}</p>
</div>
<div class="item">
<p class="city">四川省</p>
<p class="number">1,000</p>
</div>
</div>
</div>
@ -49,7 +69,10 @@
poxy_sum: '',
city: {},
cityName: '广东',
cityInfo:{},
cityInfo: [],
rankArea: [],
selectArea: [],
regions: [],
}
},
filters: {
@ -60,16 +83,37 @@
async mounted() {
await this.getData()
this.drawarea();
this.aa()
this.aa(this.cityInfo)
},
methods: {
async getData() {
const res = await data.dataDistribution();
console.log(res,'-----res');
this.poxy_sum = res.data.poxy_sum
this.city = res.data.city
console.log(this.city, '---res');
this.cityInfo = this.city[this.cityName]
this.city[this.cityName]
console.log(this.city[this.cityName], '---this.city[this.cityName]');
this.cityInfo.push({
value: this.city[this.cityName].level_id_1,
name: 'vip'
}, {
value: this.city[this.cityName].level_id_2,
name: '总代'
}, {
value: this.city[this.cityName].level_id_3,
name: '合伙人'
}, {
value: this.city[this.cityName].level_id_4,
name: '分公司'
}, {
value: this.city[this.cityName].level_id_5,
name: '股东'
})
let top5 = res.data.top5
for (let i in top5) {
top5[i].cityName = i
this.rankArea.push(top5[i])
}
},
drawarea() {
const _this = this
@ -77,12 +121,31 @@
_this.myChinaMap = echarts.init(this.$refs.area)
_this.myChinaMap.on('click', function (param) {
console.log(param.name)
console.log(param, '--------------data');
_this.cityInfo = []
_this.cityName = param.name
_this.cityInfo.push({
value: _this.city[_this.cityName].level_id_1,
name: 'vip'
}, {
value: _this.city[_this.cityName].level_id_2,
name: '总代'
}, {
value: _this.city[_this.cityName].level_id_3,
name: '合伙人'
}, {
value: _this.city[_this.cityName].level_id_4,
name: '分公司'
}, {
value: _this.city[_this.cityName].level_id_5,
name: '股东'
})
_this.aa(_this.cityInfo)
})
_this.myChinaMap.setOption({ // 进行相关配置
backgroundColor: '#fff',
tooltip: {}, // 鼠标移到图里面的浮动提示框
backgroundColor: '#3C3F50',
// tooltip: {}, // 鼠标移到图里面的浮动提示框
dataRange: {
show: false,
min: 0,
@ -93,6 +156,7 @@
color: ['orangered', 'yellow', 'lightskyblue']
},
geo: { // 这个是重点配置区
backgroundColor: '#000',
map: 'china', // 表示中国地图
roam: false, // 缩小放大
selectedMode: 'single',
@ -100,35 +164,55 @@
normal: {
show: false, // 是否显示对应地名
textStyle: {
color: 'rgba(0,0,0,0.4)'
color: '#fff'
}
}
},
select: {
label: {
color: '#fff'
},
itemStyle: {
normal: {
borderColor: 'rgba(0, 0, 0, 0.2)'
areaColor: '#729EFF',
},
emphasis: {
areaColor: null,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
regions: [{
name: "南海诸岛",
value: 0,
itemStyle: {
normal: {
opacity: 0,
label: {
show: false
}
}
}
}, {
name: "广东",
selected: true,
}],
itemStyle: {
normal: {
borderColor: 'rgba(255, 255, 255, 0.2)',
// areaColor: '#fff',
areaColor: 'rgba(255, 255, 255, 0.4)',
},
}
},
})
})
},
aa() {
aa(cityInfo) {
var chartBar = echarts.init((this.$refs.chartBar));
var option = {
// title: {
// text: '某站点用户访问来源',
// subtext: '纯属虚构',
// x: 'center'
// },
title: {
text: this.cityName + '数据占比',
subtext: '纯属虚构',
textStyle: {
color: "#fff",
},
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
@ -139,27 +223,11 @@
// data: ['直接访问', '邮件营销', '联盟广告']
// },
series: [{
name: '访问来源',
name: '数据',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: [{
value: 335,
name: '总代'
},
{
value: 3101,
name: '分公司'
},
{
value: 234,
name: '分公司1'
},
{
value: 2344,
name: '股东'
}
],
data: cityInfo,
itemStyle: {
emphasis: {
shadowBlur: 10,
@ -178,6 +246,7 @@
<style lang="scss" scoped>
.cityDistribution {
min-height: 100vh;
background: #3C3F50;
// background: linear-gradient(0deg, #424558, #202335);
.top {
@ -216,8 +285,10 @@
#home {
width: 690px;
height: 364px;
margin: 0 auto;
margin-top: 60px;
// margin: 0 auto;
// margin-top: 60px;
left: 50%;
transform: translateX(-50%);
}
.info {
@ -234,6 +305,7 @@
font-family: Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
margin-bottom: 10px;
}
}
@ -264,7 +336,24 @@
padding: 0 30px;
border-bottom: 1px solid #fff;
.city {
display: flex;
.rankNum {
display: inline-block;
width: 48px;
height: 48px;
background: linear-gradient(0deg, #729EFF, #5D48E1);
border-radius: 50%;
margin: auto 0;
margin-right: 20px;
text-align: center;
line-height: 48px;
color: #fff;
}
.cityName {
font-size: 34px;
font-family: Microsoft YaHei;
font-weight: 400;
@ -272,6 +361,7 @@
line-height: 94px;
height: 94px;
}
}
.number {
font-size: 34px;

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

@ -1,6 +1,110 @@
<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>
@ -9,7 +113,12 @@ export default {
name: "dataOverview",
data() {
return {
list:{},
}
},
filters: {
capitalize: function (val) {
return (+val || 0).toFixed(0).replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,')
}
},
created() {
@ -18,13 +127,220 @@ export default {
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 {
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