Browse Source

基本完成

develop
zhaoguoqiang 3 years ago
parent
commit
12a7951be3
  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

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

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

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

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

@ -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>
Loading…
Cancel
Save