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

1

pull/3/head
zhaoguoqiang 3 years ago
parent
860801de3c
commit
f48666e6ce
3 changed files with 132 additions and 84 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. 89
      src/views/PerformanceData/index.vue
  2. 99
      src/views/cityDistribution/index.vue
  3. 28
      src/views/login.vue

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

@ -4,15 +4,17 @@
<p class="title">2021年总业绩</p>
<p class="money" v-if="year_count_order_money">¥{{year_count_order_money | capitalize}}</p>
</div>
<div class="time">
<!-- <div class="time">
<div class="active">月</div>
</div>
</div> -->
<div class="list">
<div class="title">营业额</div>
<div class="money" v-if="money_count_order_money"><span>¥</span>{{money_count_order_money | capitalize}}
</div>
<div class="name">轻未来阻燃粉：{{order_goods_num | capitalize}}/盒</div>
<div class="cartogram" ref="cartogram"></div>
<div class="bar" ref="bar"></div>
</div>
</div>
</template>
@ -25,13 +27,14 @@
opinionData: [0, 0, 0, 0, 15904960, 0, 0, 0, 0],
year_count_order_money: '',
money_count_order_money: '',
order_goods_num:'',
order_goods_num: '',
}
},
async mounted() {
await this.getData()
this.drawLine(this.opinionData)
this.barData(this.opinionData)
},
filters: {
capitalize: function (val) {
@ -93,7 +96,75 @@
data: opinionData
}]
})
}
},
barData(opinionData) {
let barBox = this.$echarts.init(this.$refs.bar);
var option = {
color: ['#2860fc'],
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'|'none'
}
},
// title: {
// text: '业绩',
// top: '15',
// left: '-3',
// textStyle: {
// fontSize: 14, //字体大小
// color: '#666666', //字体颜色
// fontWeight: '500'
// },
// },
axisLabel: {
color: '#666666',
},
grid: {
left: '3%',
right: '3%',
bottom: '3%',
containLabel: true,
},
xAxis: [{
type: 'category',
data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
axisLine: { // 改变x轴颜色
lineStyle: {
color: '#c1c1c1',
width: '1',
}
},
axisLabel: { // 改变x轴字体颜色和大小
textStyle: {
color: "#666666",
fontSize: 12,
},
},
}],
yAxis: [{
type: 'value',
axisTick: 'none', // 右边轴样式的显示
axisLine: 'none', // 右边轴样式的显示
// 修改网格的颜色
splitLine: {
show: true,
lineStyle: {
type: 'solid',
color: '#f5f5f5'
}
},
}],
series: [{
name: '',
type: 'bar',
barWidth: '50%',
data: opinionData
}]
}
barBox.setOption(option, true);
},
},
}
</script>
@ -203,6 +274,14 @@
width: 610px;
height: 490px;
margin: 0 auto;
margin-bottom: 60px;
}
.bar {
width: 610px;
height: 490px;
margin: 0 auto;
// margin-bottom: 60px;
}
}
}

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

@ -15,41 +15,13 @@
<div class="ranking">
<p class="title">代理城市排名</p>
<div class="rankingCity">
<div v-for="(item,index) in rankArea" :key="index">
<div class="item" v-if="item.top == 1">
<div v-for="(item,index) in city" :key="index">
<div class="item">
<div class="city">
<p class="rankNum">1</p>
<p class="cityName">{{item.cityName}}</p>
<p class="rankNum">{{index+1}}</p>
<p class="cityName">{{item.name}}</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>
<p class="number">{{item.counts |capitalize}}</p>
</div>
<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>
<p class="number">{{item.num.counts | capitalize}}</p>
</div>
</div>
</div>
@ -73,7 +45,7 @@
rankArea: [],
selectArea: [],
regions: [],
chartBar:null,
chartBar: null,
}
},
filters: {
@ -83,6 +55,7 @@
},
async mounted() {
await this.getData()
// return
this.drawarea();
this.statistical(this.cityInfo)
},
@ -91,53 +64,50 @@
const res = await data.dataDistribution();
this.poxy_sum = res.data.poxy_sum
this.city = res.data.city
this.city[this.cityName]
console.log(this.city[this.cityName], '---this.city[this.cityName]');
console.log(this.city, '---this.city[this.cityName]');
this.cityInfo.push({
value: this.city[this.cityName].level_id_1,
value: this.city[0].num.level_id_1,
name: 'vip'
}, {
value: this.city[this.cityName].level_id_2,
value: this.city[0].num.level_id_2,
name: '总代'
}, {
value: this.city[this.cityName].level_id_3,
value: this.city[0].num.level_id_3,
name: '合伙人'
}, {
value: this.city[this.cityName].level_id_4,
value: this.city[0].num.level_id_4,
name: '分公司'
}, {
value: this.city[this.cityName].level_id_5,
value: this.city[0].num.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
this.$nextTick(() => {
_this.myChinaMap = echarts.init(this.$refs.area)
_this.myChinaMap.on('click', function (param) {
_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.cityInfo = []
_this.city.forEach((item, index) => {
if (item.name == param.name) {
_this.cityInfo.push({
value: item.num.level_id_1,
name: 'vip'
}, {
value: item.num.level_id_2,
name: '总代'
}, {
value: item.num.level_id_3,
name: '合伙人'
}, {
value: item.num.level_id_4,
name: '分公司'
}, {
value: item.num.level_id_5,
name: '股东'
})
}
})
_this.statistical(_this.cityInfo)
})
@ -205,7 +175,7 @@
if (this.chartBar != null && this.chartBar != "" && this.chartBar != undefined) {
this.chartBar.dispose();
}
this.chartBar= echarts.init((this.$refs.chartBar));
this.chartBar = echarts.init((this.$refs.chartBar));
var option = {
title: {
text: this.cityName + '数占据比',
@ -316,7 +286,6 @@
width: 690px;
min-height: 509px;
background: #373A4A;
margin-bottom: 40px;
.title {
font-size: 40px;

28
src/views/login.vue
View File

@ -6,22 +6,22 @@
let url = this.$route.query;
let token;
let url_string = JSON.stringify(url);
if (url_string == "{}") {
this.$toast('请先登录')
} else {
token = url.token_type + " " + url.access_token;
this.$store.commit("user/setToken", token);
this.$router.push({
path: "/home",
});
}
// token =
// "bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC90ZXN0LnFpbmd3ZWlsYWk4ODgueHl6XC9hZG1pblwvbG9naW4iLCJpYXQiOjE2Mjc0NjU1ODksImV4cCI6MTk4NzQ2NTU4OSwibmJmIjoxNjI3NDY1NTg5LCJqdGkiOiJ6clVHYnJCOXlPWkpRanRUIiwic3ViIjoxNjEsInBydiI6IjBiMzZjMGUwMjMyZGVlZTlkOTZhZDA0NGY3YWE2MjQ2YTUwYTU3ZmEifQ.aFc5fCUffmDN7zBRn-D13kx1LuLNG1Ej7vQOu4O2_AA"
// this.$store.commit("user/setToken", token);
// this.$router.push({
// if (url_string == "{}") {
// this.$toast('请先登录')
// } else {
// token = url.token_type + " " + url.access_token;
// this.$store.commit("user/setToken", token);
// this.$router.push({
// path: "/home",
// });
// }
token =
"bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC90ZXN0LnFpbmd3ZWlsYWk4ODgueHl6XC9hZG1pblwvbG9naW4iLCJpYXQiOjE2Mjc0NjU1ODksImV4cCI6MTk4NzQ2NTU4OSwibmJmIjoxNjI3NDY1NTg5LCJqdGkiOiJ6clVHYnJCOXlPWkpRanRUIiwic3ViIjoxNjEsInBydiI6IjBiMzZjMGUwMjMyZGVlZTlkOTZhZDA0NGY3YWE2MjQ2YTUwYTU3ZmEifQ.aFc5fCUffmDN7zBRn-D13kx1LuLNG1Ej7vQOu4O2_AA"
this.$store.commit("user/setToken", token);
this.$router.push({
path: "/home",
});
},
};
</script>

Write Preview
Loading…
Cancel
Save