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

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

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

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

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

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

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

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

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