develop #4

Merged
bill_del merged 7 commits from develop into master 3 years ago
  1. 93
      src/views/PerformanceData/index.vue
  2. 105
      src/views/cityDistribution/index.vue

93
src/views/PerformanceData/index.vue

@ -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>
@ -22,16 +24,17 @@
export default {
data() {
return {
opinionData: [0, 0, 0, 0, 15904960, 0, 0, 0, 0],
opinionData: [],
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) {
@ -41,7 +44,6 @@
methods: {
async getData() {
this.opinionData = []
// let data = new Date()
let month = new Date().getMonth() + 1;
const res = await data.earningReport();
let list = res.data.month_list_money_count
@ -80,7 +82,7 @@
xAxis: {
type: 'category',
boundaryGap: false,
data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"]
data:["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"]
},
yAxis: {
type: 'value'
@ -93,7 +95,74 @@
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: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
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 +272,14 @@
width: 610px;
height: 490px;
margin: 0 auto;
margin-bottom: 60px;
}
.bar {
width: 610px;
height: 490px;
margin: 0 auto;
// margin-bottom: 60px;
}
}
}

105
src/views/cityDistribution/index.vue

@ -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>
@ -64,16 +36,11 @@
name: 'cityDistribution',
data() {
return {
chinachart: null,
chartOption: null,
poxy_sum: '',
city: {},
cityName: '广东',
cityInfo: [],
rankArea: [],
selectArea: [],
regions: [],
chartBar:null,
chartBar: null,
}
},
filters: {
@ -91,53 +58,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]');
this.cityName = this.city[0].name
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)
})
@ -187,7 +151,7 @@
}
}
}, {
name: "广东",
name: this.city[0].name,
selected: true,
}],
itemStyle: {
@ -205,7 +169,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 +280,6 @@
width: 690px;
min-height: 509px;
background: #373A4A;
margin-bottom: 40px;
.title {
font-size: 40px;

Loading…
Cancel
Save