|
|
@ -1,7 +1,7 @@
|
|
|
<template>
|
|
|
<div class="index-OrderAnalyse mt10">
|
|
|
<div class="panel medicine">
|
|
|
<div class="plr15 kitbox pt15 box-flex-c">
|
|
|
<div class="panel plr12 medicine">
|
|
|
<div class=" kitbox pt15 box-flex-c">
|
|
|
<div class="box-flex-c c-333 fs-16 f-bold">订单分析</div>
|
|
|
<div class="box-flex-c c-333 fs-12 f-bold time">
|
|
|
<ul class="ul">
|
|
|
@ -14,22 +14,55 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class=" ">
|
|
|
<div>
|
|
|
<div class="pie-charts-wrap kitbox">
|
|
|
<div class="pie-charts" ref="pie"></div>
|
|
|
<div class="item-list">
|
|
|
<div v-for="item in pieData" :key="item.name" class="item lh20">
|
|
|
<div :class="`lable-${item.itemStyle.color.replace('#', '')}`" class="lable fs-12 c-333">{{item.name}}</div>
|
|
|
<div class="c-000 fs-15 kitbox c-bold">
|
|
|
<div class="ml16 w50">{{item.value}}</div>
|
|
|
<div class="box-flex-1">{{item.percent}}%</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="plr15">
|
|
|
<div class="pb10">
|
|
|
<div class="kitbox pt15 box-flex-c bt-e1e1e1">
|
|
|
<div class="box-flex-c c-333 fs-16 f-bold">订单排行</div>
|
|
|
<div class="box-flex-c c-333 fs-12 type-list kitbox">
|
|
|
<div class="type-item blue">订单量</div>
|
|
|
<div class="type-item orange">药柜取药</div>
|
|
|
<div class="type-item orange">订单量</div>
|
|
|
<div class="type-item blue">药柜取药</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="bar-charts pt15 " :style="height + 'px'">
|
|
|
<div v-show="!nodata" ref="barChart"></div>
|
|
|
<div class="rank-panel pt15 " :style="height + 'px'">
|
|
|
<div v-show="!nodata" class="rank-list">
|
|
|
<div class="rank-list-left">
|
|
|
<div v-for="item in rankList" :key="item.community" class="rank-item">
|
|
|
<div class="rank-title fs-12 c-6F8EA6">{{item.community}}</div>
|
|
|
<div class="progress-item orange" >
|
|
|
<div class="progress " :style="`width:${item.orderTotalPercent}`"></div>
|
|
|
</div>
|
|
|
<div class="progress-item blue">
|
|
|
<div class="progress " :style="`width:${item.sellTotalPercent}`"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="rank-list-right">
|
|
|
<div v-for="item in rankList" :key="item.community" class="rank-item">
|
|
|
<div class="rank-title fs-12 c-6F8EA6"> </div>
|
|
|
<div class="progress-item orange" >
|
|
|
<div>{{item.orderTotal}}</div>
|
|
|
</div>
|
|
|
<div class="progress-item blue">
|
|
|
<div>{{item.sellTotal}}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<NoData v-show="nodata"/>
|
|
|
</div>
|
|
|
</div>
|
|
|
@ -48,6 +81,8 @@ export default {
|
|
|
height: 200,
|
|
|
startDate: '',
|
|
|
endDate: '',
|
|
|
pieData: [],
|
|
|
rankList: []
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
@ -88,8 +123,8 @@ export default {
|
|
|
var total = Number(onlineTotal) + Number(offlineTotal)
|
|
|
this.dataIndex = offlineTotal>onlineTotal? 1 : 0
|
|
|
this.initPie([
|
|
|
{ value: onlineTotal, percent: total==0? 0 : (onlineTotal/total*100).toFixed(2), name: '线上订单' },
|
|
|
{ value: offlineTotal, percent: total==0? 0 : (offlineTotal/total*100).toFixed(2), name: '线下订单' },
|
|
|
{ itemStyle: {color: '#FD8D4E'}, value: onlineTotal, percent: total==0? 0 : Number((onlineTotal/total*100).toFixed(2)), name: '线上订单' },
|
|
|
{ itemStyle: {color: '#F63F74'}, value: offlineTotal, percent: total==0? 0 : Number((offlineTotal/total*100).toFixed(2)), name: '线下订单' },
|
|
|
])
|
|
|
}
|
|
|
})
|
|
|
@ -98,6 +133,7 @@ export default {
|
|
|
})
|
|
|
},
|
|
|
initPie(seriesData){
|
|
|
this.pieData = seriesData
|
|
|
var { dataIndex } = this
|
|
|
var option = {
|
|
|
tooltip: {
|
|
|
@ -105,6 +141,7 @@ export default {
|
|
|
trigger: 'item'
|
|
|
},
|
|
|
legend: {
|
|
|
show: false,
|
|
|
top: 'middle',
|
|
|
left: '45%',
|
|
|
selectedMode: false,
|
|
|
@ -118,27 +155,25 @@ export default {
|
|
|
series: [
|
|
|
{
|
|
|
type: 'pie',
|
|
|
center: ['23%', '50%'],
|
|
|
radius: ['50%', '60%'],
|
|
|
center: ['45%', '50%'],
|
|
|
radius: ['50%', '70%'],
|
|
|
avoidLabelOverlap: false,
|
|
|
selectedOffset: 110,
|
|
|
label: {
|
|
|
show: false,
|
|
|
position: 'center'
|
|
|
},
|
|
|
emphasis: {
|
|
|
scaleSize : 10,
|
|
|
itemStyle: {
|
|
|
shadowBlur: 10,
|
|
|
shadowColor: "#cccccc"
|
|
|
},
|
|
|
label: {
|
|
|
show: true,
|
|
|
fontSize: '12',
|
|
|
lineHeight: 20,
|
|
|
formatter: '{c}\n{d}%\n{b}',
|
|
|
// rich: {
|
|
|
// b: {
|
|
|
// lineHeight: 20
|
|
|
// },
|
|
|
// d: {
|
|
|
// fontSize: '14',
|
|
|
// },
|
|
|
// }
|
|
|
}
|
|
|
},
|
|
|
labelLine: {
|
|
|
@ -157,7 +192,6 @@ export default {
|
|
|
seriesIndex: 0,
|
|
|
dataIndex: this.dataIndex
|
|
|
})
|
|
|
// this.dataIndex = -1
|
|
|
}
|
|
|
this.dataIndex = e.dataIndex
|
|
|
this.myChart.dispatchAction({
|
|
|
@ -167,6 +201,11 @@ export default {
|
|
|
})
|
|
|
});
|
|
|
}
|
|
|
this.myChart.dispatchAction({
|
|
|
type: 'downplay',
|
|
|
seriesIndex: 0,
|
|
|
dataIndex: this.dataIndex
|
|
|
})
|
|
|
this.myChart.setOption(option)
|
|
|
this.$nextTick(()=>{
|
|
|
this.myChart.dispatchAction({
|
|
|
@ -202,19 +241,24 @@ export default {
|
|
|
this.height = res.detailModelList.length * 60
|
|
|
|
|
|
this.$nextTick(()=>{
|
|
|
var seriesData1 = [], seriesData2 = [], max = 0, yAxisData = []
|
|
|
var orderTotalMax = 0, sellTotalMax = 0
|
|
|
_.each(res.detailModelList, v=>{
|
|
|
if(v.orderTotal > max){
|
|
|
max = v.orderTotal
|
|
|
if(v.orderTotal > orderTotalMax){
|
|
|
orderTotalMax = v.orderTotal
|
|
|
}
|
|
|
if(v.sellTotal > sellTotalMax){
|
|
|
sellTotalMax = v.sellTotal
|
|
|
}
|
|
|
if(v.sellTotal > max){
|
|
|
max = v.sellTotal
|
|
|
})
|
|
|
this.rankList = _.map(res.detailModelList, v=>{
|
|
|
return {
|
|
|
community: v.community,
|
|
|
orderTotal: v.orderTotal,
|
|
|
sellTotal: v.sellTotal,
|
|
|
orderTotalPercent: (orderTotalMax==0? 0 : (v.orderTotal/orderTotalMax*100)) + "%",
|
|
|
sellTotalPercent: (sellTotalMax==0? 0 : (v.sellTotal/sellTotalMax*100)) + "%",
|
|
|
}
|
|
|
seriesData1.push(v.orderTotal)
|
|
|
seriesData2.push(v.sellTotal)
|
|
|
yAxisData.push(v.community.substring(0, 9)+ "\n" +v.community.substring(9))
|
|
|
})
|
|
|
this.initBar(yAxisData, seriesData1, seriesData2, max)
|
|
|
})
|
|
|
return
|
|
|
}
|
|
|
@ -227,115 +271,117 @@ export default {
|
|
|
this.nodata = true
|
|
|
})
|
|
|
},
|
|
|
|
|
|
initBar(yAxisData, seriesData1, seriesData2, max){
|
|
|
var option = {
|
|
|
tooltip: {
|
|
|
trigger: 'axis',
|
|
|
axisPointer: {
|
|
|
type: 'shadow'
|
|
|
}
|
|
|
},
|
|
|
grid: {
|
|
|
top: "3%",
|
|
|
left: '0%',
|
|
|
right: '0%',
|
|
|
bottom: '3%',
|
|
|
containLabel: true
|
|
|
},
|
|
|
xAxis: {
|
|
|
type: 'value',
|
|
|
show: false,
|
|
|
max: Math.ceil(max / 4) + max
|
|
|
// boundaryGap: [0, 0.01]
|
|
|
},
|
|
|
yAxis: {
|
|
|
type: 'category',
|
|
|
data: yAxisData, //['XX社区卫生\n服务中心', 'XX社区卫生\n服务中心', 'XX社区卫生\n服务中心', 'XX社区卫生\n服务中心', 'XX社区卫生\n服务中心', 'XX社区卫生\n服务中心'],
|
|
|
axisLabel: {
|
|
|
with: 100
|
|
|
}
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
name: '订单量',
|
|
|
type: 'bar',
|
|
|
itemStyle: {
|
|
|
color: '#0099ff'
|
|
|
},
|
|
|
label: {
|
|
|
show: true,
|
|
|
position: 'right'
|
|
|
},
|
|
|
// label: {
|
|
|
// show: true,
|
|
|
// formatter: '{b}',
|
|
|
// align: 'right'
|
|
|
// },
|
|
|
data: seriesData1
|
|
|
},
|
|
|
{
|
|
|
name: '药柜取药',
|
|
|
type: 'bar',
|
|
|
label: {
|
|
|
show: true,
|
|
|
position: 'right'
|
|
|
},
|
|
|
itemStyle: {
|
|
|
color: '#ff9900'
|
|
|
},
|
|
|
data: seriesData2
|
|
|
}
|
|
|
]
|
|
|
};
|
|
|
|
|
|
if(!this.barChart){
|
|
|
this.barChart = echarts.init(this.$refs.barChart);
|
|
|
}
|
|
|
|
|
|
this.barChart.setOption(option)
|
|
|
}
|
|
|
},
|
|
|
}
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
.index-OrderAnalyse{
|
|
|
.pie-charts{
|
|
|
height: 200px;
|
|
|
.pie-charts-wrap{
|
|
|
.pie-charts{
|
|
|
width: 165px;
|
|
|
height: 200px;
|
|
|
}
|
|
|
.item-list{
|
|
|
display: -webkit-box;
|
|
|
-webkit-box-pack: center;
|
|
|
-webkit-box-orient: vertical;
|
|
|
.item{
|
|
|
background: #F5F8FF;
|
|
|
border-radius: 8px;
|
|
|
padding: 8px 12px;
|
|
|
width: 156px;
|
|
|
margin-bottom: 12px;
|
|
|
.lable{
|
|
|
&::before{
|
|
|
content: "";
|
|
|
display: inline-block;
|
|
|
background: #FD8D4E;
|
|
|
width: 10px;
|
|
|
height: 10px;
|
|
|
border-radius: 2px;
|
|
|
margin-right: 6px;
|
|
|
}
|
|
|
&.lable-FD8D4E{
|
|
|
&::before{
|
|
|
background: #FD8D4E;
|
|
|
}
|
|
|
}
|
|
|
&.lable-F63F74{
|
|
|
&::before{
|
|
|
background: #F63F74;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
&:last-child{
|
|
|
margin-bottom: 0;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.bar-charts{
|
|
|
min-height: 200px;
|
|
|
>div{
|
|
|
height: 100%;
|
|
|
min-height: 200px;
|
|
|
|
|
|
.rank-list{
|
|
|
display: -webkit-box;
|
|
|
.rank-list-left{
|
|
|
-webkit-box-flex: 1;
|
|
|
}
|
|
|
.rank-list-right{
|
|
|
padding: 0 6px;
|
|
|
}
|
|
|
.rank-item{
|
|
|
margin-bottom: 20px;
|
|
|
.rank-title{
|
|
|
height: 20px;
|
|
|
color: #6F8EA6;
|
|
|
}
|
|
|
.progress-item{
|
|
|
display: -webkit-box;
|
|
|
font-size: 12px;
|
|
|
-webkit-box-align: center;
|
|
|
height: 20px;
|
|
|
-webkit-box-flex: 1;
|
|
|
.progress{
|
|
|
width: 100%;
|
|
|
height: 10px;
|
|
|
border-radius: 9px;
|
|
|
}
|
|
|
&.orange{
|
|
|
color: #ED8768;
|
|
|
.progress{
|
|
|
background: #ED8768;
|
|
|
border-radius: 9px;
|
|
|
}
|
|
|
}
|
|
|
&.blue{
|
|
|
color: #726DD1;
|
|
|
.progress{
|
|
|
background: #726DD1;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
&:last-child{
|
|
|
margin-bottom: 0;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
.type-list{
|
|
|
-webkit-box-align: center;
|
|
|
.type-item{
|
|
|
padding-right: 20px;
|
|
|
display: -webkit-box;
|
|
|
-webkit-box-align: center;
|
|
|
&::before{
|
|
|
content: "";
|
|
|
display: block;
|
|
|
width: 16px;
|
|
|
height: 16px;
|
|
|
margin-right: 5px;
|
|
|
}
|
|
|
margin-right: 12px;
|
|
|
color: #fff;
|
|
|
width: 59px;
|
|
|
padding: 2px 0;
|
|
|
border-radius: 4px;
|
|
|
text-align: center;
|
|
|
&.orange{
|
|
|
&::before{
|
|
|
background: #ff9900;
|
|
|
}
|
|
|
background: #ED8768;
|
|
|
}
|
|
|
&.blue{
|
|
|
&::before{
|
|
|
background: #0099ff;
|
|
|
}
|
|
|
background: #726DD1;
|
|
|
}
|
|
|
&:last-child{
|
|
|
padding-right: 0;
|
|
|
margin-right: 0;
|
|
|
}
|
|
|
}
|
|
|
}
|
lincl