Skip to content

P
pet-business-web
Commit dbf55d83 authored by 陈明豪's avatar 陈明豪
Browse files
Options

数据统计-宠主数据统计-前端部分

parent 5f59987f
Show whitespace changes
Inline Side-by-side
Showing with 1117 additions and 328 deletions
src/views/data-statistics/echars-components/columnarChart.vue
View file @ dbf55d83
...@@ -45,13 +45,16 @@ export default { ...@@ -45,13 +45,16 @@ export default {
} }
}, },
grid: { grid: {
x: 60, x: 50,
x2: 10, x2: 10,
y2: 40 y2: 40
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
data: _this.xData data: _this.xData,
axisLabel: {
interval: 0
}
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
...@@ -63,6 +66,9 @@ export default { ...@@ -63,6 +66,9 @@ export default {
tooltip: { tooltip: {
show: true, // 鼠标移入是否触发数据 show: true, // 鼠标移入是否触发数据
trigger: 'axis', // 出发方式 trigger: 'axis', // 出发方式
axisPointer: {
type: 'shadow'
},
formatter: (axis) => { formatter: (axis) => {
return `<div> return `<div>
<div>${axis[0].name}</div> <div>${axis[0].name}</div>
......
src/views/data-statistics/echars-components/crosswiseColumnarChart.vue 0 → 100644
View file @ dbf55d83
<template>
<div ref="CrosswiseColumnar" class="CrosswiseColumnarChart">
123
</div>
</template>
<script>
export default {
name: 'CrosswiseColumnarChart',
props: ['title', 'yData1', 'yData2', 'xData', 'unit'],
data() {
return {}
},
watch: {},
created() {
},
mounted() {
this.setChart()
},
methods: {
setChart() {
const _this = this
// 基于准备好的dom，初始化echarts实例
const mapChart = this.$echarts.init(this.$refs.CrosswiseColumnar)
mapChart.setOption({
title: {
left: 'left',
text: _this.title,
textStyle: {
fontSize: 12,
fontFamily: 'Microsoft YaHei',
fontWeight: 'bold',
color: '#333333'
// margin-bottom: 20px,
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
left: 'right'
},
grid: {
left: '3%',
right: '6%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
axisLabel: {
formatter: '{value}' + _this.unit
}
// boundaryGap: [0, 0.01]
},
yAxis: {
type: 'category',
data: _this.xData
},
series: [
{
name: _this.yData1.name,
type: 'bar',
data: _this.yData1.data,
barWidth: '12px',
itemStyle: {
normal: {
barBorderRadius: [0, 20, 20, 0]
}
},
color: new this.$echarts.graphic.LinearGradient(
0, 0, 1, 0, [{ // 代表渐变色从正上方开始
offset: 0, // offset范围是0~1，用于表示位置，0是指0%处的颜色
color: _this.yData1.startColor
}, // 柱图渐变色
{
offset: 1, // 指100%处的颜色
color: _this.yData1.endColor
}
])
},
{
name: _this.yData2.name,
type: 'bar',
data: _this.yData2.data,
barWidth: '12px',
itemStyle: {
normal: {
barBorderRadius: [0, 20, 20, 0]
}
},
color: new this.$echarts.graphic.LinearGradient(
0, 0, 1, 0, [{ // 代表渐变色从正上方开始
offset: 0, // offset范围是0~1，用于表示位置，0是指0%处的颜色
color: _this.yData2.startColor
}, // 柱图渐变色
{
offset: 1, // 指100%处的颜色
color: _this.yData2.endColor
}
])
}
]
})
}
}
}
</script>
<style scoped>
.CrosswiseColumnarChart {
width: 100%;
height: 500px;
}
</style>
src/views/data-statistics/echars-components/crosswiseColumnarChartOneLine.vue 0 → 100644
View file @ dbf55d83
<template>
<div ref="CrosswiseColumnar" class="CrosswiseColumnarChart">
123
</div>
</template>
<script>
export default {
name: 'CrosswiseColumnarChartOneLine',
props: ['title', 'yData', 'xData', 'unit'],
data() {
return {}
},
watch: {},
created() {
},
mounted() {
this.setChart()
},
methods: {
setChart() {
const _this = this
// 基于准备好的dom，初始化echarts实例
const mapChart = this.$echarts.init(this.$refs.CrosswiseColumnar)
mapChart.setOption({
title: {
left: 'left',
text: _this.title,
textStyle: {
fontSize: 12,
fontFamily: 'Microsoft YaHei',
fontWeight: 'bold',
color: '#333333'
// margin-bottom: 20px,
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
left: 'right'
},
grid: {
left: '3%',
right: '6%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
axisLabel: {
formatter: '{value}' + _this.unit
}
// boundaryGap: [0, 0.01]
},
yAxis: {
type: 'category',
data: _this.xData
},
series: [
{
name: _this.yData.name,
type: 'bar',
data: _this.yData.data,
barWidth: '12px',
itemStyle: {
normal: {
barBorderRadius: [0, 20, 20, 0]
}
},
color: new this.$echarts.graphic.LinearGradient(
0, 0, 1, 0, [{ // 代表渐变色从正上方开始
offset: 0, // offset范围是0~1，用于表示位置，0是指0%处的颜色
color: _this.yData.startColor
}, // 柱图渐变色
{
offset: 1, // 指100%处的颜色
color: _this.yData.endColor
}
])
}
]
})
}
}
}
</script>
<style scoped>
.CrosswiseColumnarChart {
width: 100%;
height: 500px;
}
</style>
src/views/data-statistics/echars-components/radar-chart-for-platform-petowner.vue → src/views/data-statistics/echars-components/radar-chart-for-petowner-hospital.vue
View file @ dbf55d83
...@@ -6,8 +6,8 @@ ...@@ -6,8 +6,8 @@
<script> <script>
export default { export default {
name: 'RadarChartForPlatformPetOwner', name: 'RadarChartForPetOwnerHospital',
props: ['title', 'radarIndicatorData', 'radarLegendData'], props: ['yData1', 'yData2'],
data() { data() {
return {} return {}
}, },
...@@ -17,13 +17,13 @@ export default { ...@@ -17,13 +17,13 @@ export default {
}, },
methods: { methods: {
setCharts() { setCharts() {
// const _this = this const _this = this
// 基于准备好的dom，初始化echarts实例 // 基于准备好的dom，初始化echarts实例
const mapChart = this.$echarts.init(this.$refs.radarMap) const mapChart = this.$echarts.init(this.$refs.radarMap)
mapChart.setOption({ mapChart.setOption({
title: { title: {
left: 'left', left: 'left',
text: '宠主绑定医院数量分析', text: '宠主宠物数量分析',
textStyle: { textStyle: {
fontSize: 12, fontSize: 12,
fontFamily: 'Microsoft YaHei', fontFamily: 'Microsoft YaHei',
...@@ -33,70 +33,10 @@ export default { ...@@ -33,70 +33,10 @@ export default {
}, },
tooltip: { tooltip: {
show: true show: true
// formatter: function(item) {
// console.log('radarItem', item)
// return `<div>
// <div>${item.name}</div>
// <div style="display: flex;width: 180px">
// <div style="width: 10%">
// <div style="background: #00afff;width: 10px;height: 10px;margin-top: 7px;margin-right:5px;border-radius: 10px"></div>
// </div>
// <div style="width: 60%">
// <div>5000元以下</div>
// </div>
// <div style="width: 30%">
// <div style="text-align: right">${item.value[0]}</div>
// </div>
// </div>
// <div style="display: flex;width: 180px">
// <div style="width: 10%">
// <div style="background: #00afff;width: 10px;height: 10px;margin-top: 7px;margin-right:5px;border-radius: 10px"></div>
// </div>
// <div style="width: 60%">
// <div>5000~12000元</div>
// </div>
// <div style="width: 30%">
// <div style="text-align: right">${item.value[1]}</div>
// </div>
// </div>
// <div style="display: flex;width: 180px">
// <div style="width: 10%">
// <div style="background: #00afff;width: 10px;height: 10px;margin-top: 7px;margin-right:5px;border-radius: 10px"></div>
// </div>
// <div style="width: 60%">
// <div>12000~30000元</div>
// </div>
// <div style="width: 30%">
// <div style="text-align: right">${item.value[2]}</div>
// </div>
// </div>
// <div style="display: flex;width: 180px">
// <div style="width: 10%">
// <div style="background: #00afff;width: 10px;height: 10px;margin-top: 7px;margin-right:5px;border-radius: 10px"></div>
// </div>
// <div style="width: 60%">
// <div>530000~100000元</div>
// </div>
// <div style="width: 30%">
// <div style="text-align: right">${item.value[3]}</div>
// </div>
// </div>
// <div style="display: flex;width: 180px">
// <div style="width: 10%">
// <div style="background: #00afff;width: 10px;height: 10px;margin-top: 7px;margin-right:5px;border-radius: 10px"></div>
// </div>
// <div style="width: 60%">
// <div>100000元以上</div>
// </div>
// <div style="width: 30%">
// <div style="text-align: right">${item.value[4]}</div>
// </div>
// </div>
// </div>`
// }
}, },
legend: { legend: {
data: ['历史入驻量', '当前有效数量'], data: ['绑定宠物数量', '就诊宠物数量'],
left: 'right',
textStyle: { // 图例的公用文本样式。 textStyle: { // 图例的公用文本样式。
fontSize: 12, fontSize: 12,
fontFamily: 'Microsoft YaHei', fontFamily: 'Microsoft YaHei',
...@@ -107,13 +47,13 @@ export default { ...@@ -107,13 +47,13 @@ export default {
radar: { radar: {
// shape: 'circle', // shape: 'circle',
center: ['50%', '55%'], center: ['50%', '55%'],
radius: 130, radius: 140,
indicator: [ indicator: [
{ name: '5000元以下', max: 50 }, { name: '1只', max: 50 },
{ name: '5000~12000元', max: 50 }, { name: '2只', max: 50 },
{ name: '12000~30000元', max: 50 }, { name: '3~4只', max: 50 },
{ name: '30000~100000元', max: 50 }, { name: '4~5只', max: 50 },
{ name: '100000元以上', max: 50 } { name: '5只以上', max: 50 }
], ],
axisName: { // (圆外的标签)雷达图每个指示器名称的配置项。 axisName: { // (圆外的标签)雷达图每个指示器名称的配置项。
color: '#666666', color: '#666666',
...@@ -128,8 +68,8 @@ export default { ...@@ -128,8 +68,8 @@ export default {
type: 'radar', type: 'radar',
data: [ data: [
{ {
value: [42, 30, 20, 35, 50, 18], value: _this.yData1,
name: '历史入驻量', name: '绑定宠物数量',
symbol: 'emptyCircle', // 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none', emptyCircle symbol: 'emptyCircle', // 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none', emptyCircle
symbolSize: 6, symbolSize: 6,
itemStyle: { itemStyle: {
...@@ -153,8 +93,8 @@ export default { ...@@ -153,8 +93,8 @@ export default {
} }
}, },
{ {
value: [50, 14, 28, 26, 42, 21], value: _this.yData2,
name: '当前有效数量', name: '就诊宠物数量',
symbol: 'emptyCircle', symbol: 'emptyCircle',
symbolSize: 6, symbolSize: 6,
itemStyle: { itemStyle: {
......
src/views/data-statistics/echars-components/radar-chart-for-petowner-platfrom.vue
View file @ dbf55d83
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
<script> <script>
export default { export default {
name: 'RadarChartForPetOwnerPlatform', name: 'RadarChartForPetOwnerPlatform',
props: ['title', 'yData1', 'yData2'], props: ['yData1', 'yData2'],
data() { data() {
return {} return {}
}, },
...@@ -36,7 +36,7 @@ export default { ...@@ -36,7 +36,7 @@ export default {
}, },
legend: { legend: {
data: ['历史入驻量', '当前有效数量'], data: ['历史入驻量', '当前有效数量'],
left: 'right', left: 'center',
textStyle: { // 图例的公用文本样式。 textStyle: { // 图例的公用文本样式。
fontSize: 12, fontSize: 12,
fontFamily: 'Microsoft YaHei', fontFamily: 'Microsoft YaHei',
......
src/views/data-statistics/echars-components/twoLineChart.vue
View file @ dbf55d83
...@@ -66,7 +66,7 @@ export default { ...@@ -66,7 +66,7 @@ export default {
} }
}, },
grid: { grid: {
x: 70, x: 80,
x2: 15 x2: 15
}, },
xAxis: { xAxis: {
...@@ -79,6 +79,7 @@ export default { ...@@ -79,6 +79,7 @@ export default {
axisLabel: { axisLabel: {
formatter: '{value}' + _this.yData1.unit formatter: '{value}' + _this.yData1.unit
} }
// containLabel: true
}, },
legend: { legend: {
x: 'right', x: 'right',
...@@ -122,7 +123,6 @@ export default { ...@@ -122,7 +123,6 @@ export default {
// symbol: 'circle', // 设置拐点为实心圆 // symbol: 'circle', // 设置拐点为实心圆
type: 'line', type: 'line',
smooth: true, smooth: true,
stack: 'x', // y轴是否从零开始
// 折线下区域的颜色 // 折线下区域的颜色
areaStyle: { areaStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{ color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
...@@ -142,7 +142,6 @@ export default { ...@@ -142,7 +142,6 @@ export default {
data: _this.yData2.data, data: _this.yData2.data,
type: 'line', type: 'line',
smooth: true, smooth: true,
stack: 'x',
areaStyle: { areaStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{ color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, color: _this.yData2.area_color // 0% 处的颜色 offset: 0, color: _this.yData2.area_color // 0% 处的颜色
......
src/views/data-statistics/hospital-data-statistics/hospital-data-statistics.vue
View file @ dbf55d83
...@@ -185,12 +185,6 @@ ...@@ -185,12 +185,6 @@
</el-col> </el-col>
<el-col :span="9"> <el-col :span="9">
<div class="cardDiv" style="padding-bottom: 0px"> <div class="cardDiv" style="padding-bottom: 0px">
<!-- <div style="text-align: right;position: absolute;z-index: 10;width: 34%">-->
<!-- <el-radio-group v-model="radarSelect">-->
<!-- <el-radio-button label="lastYear" class="radioButton">去年</el-radio-button>-->
<!-- <el-radio-button label="currentYear" class="radioButton">今年</el-radio-button>-->
<!-- </el-radio-group>-->
<!-- </div>-->
<radar-chart-for-hospital <radar-chart-for-hospital
:y-data1="[42, 30, 20, 35, 50, 18]" :y-data1="[42, 30, 20, 35, 50, 18]"
:y-data2="[50, 14, 28, 26, 42, 21]" :y-data2="[50, 14, 28, 26, 42, 21]"
......
src/views/data-statistics/pet-data-statistics/pet-data-statistics.vue
View file @ dbf55d83
<template> <template>
<div class="fatherDiv"> <div>
<div v-if="isPlatformRole" class="fatherDiv">
<el-row :gutter="24"> <el-row :gutter="24">
<!--医院信息统计--> <!--医院信息统计-->
<el-col :span="12"> <el-col :span="12">
...@@ -166,7 +167,13 @@ ...@@ -166,7 +167,13 @@
<el-row :gutter="24" class="row2"> <el-row :gutter="24" class="row2">
<el-col :span="9"> <el-col :span="9">
<div class="cardDiv" style="padding-bottom: 0"> <div class="cardDiv" style="padding-bottom: 0">
123 <crosswise-columnar-chart
title="宠主绑定宠物数量分析"
:y-data1="y1_data"
:y-data2="y2_data"
:x-data="cross_x_data"
unit="人"
/>
</div> </div>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
...@@ -185,17 +192,304 @@ ...@@ -185,17 +192,304 @@
</el-col> </el-col>
<el-col :span="9"> <el-col :span="9">
<div class="cardDiv" style="padding-bottom: 0px"> <div class="cardDiv" style="padding-bottom: 0px">
<!-- <div style="text-align: right;position: absolute;z-index: 10;width: 34%">--> <div style="text-align: right;position: absolute;z-index: 10;width: 120px;margin-left: 410px">
<!-- <el-radio-group v-model="radarSelect">--> <el-radio-group v-model="radarSelect">
<!-- <el-radio-button label="lastYear" class="radioButton">去年</el-radio-button>--> <el-radio-button label="lastYear" class="radioButton">去年</el-radio-button>
<!-- <el-radio-button label="currentYear" class="radioButton">今年</el-radio-button>--> <el-radio-button label="currentYear" class="radioButton">今年</el-radio-button>
<!-- </el-radio-group>--> </el-radio-group>
<!-- </div>--> </div>
<radar-chart-for-pet-owner-platform /> <radar-chart-for-pet-owner-platform
:y-data1="[23,45,33,44,50]"
:y-data2="[13,35,43,14,20]"
/>
</div>
</el-col>
</el-row>
<el-row class="row2">
<el-col :span="24">
<div class="cardDiv">
<div class="cardTitle">
宠主注册信息
</div>
<el-divider class="dividerLine" />
<el-table :data="tableData" style="width: 100%">
<el-table-column label="序号" min-width="20px" show-overflow-tooltip type="index" />
<el-table-column sortable label="宠主姓名" show-overflow-tooltip prop="name" />
<el-table-column sortable label="用户ID" show-overflow-tooltip prop="userId" />
<el-table-column sortable label="手机号" show-overflow-tooltip prop="phone" />
<el-table-column sortable label="会员等级" show-overflow-tooltip prop="vipLevel" />
<el-table-column sortable label="会员卡余额" show-overflow-tooltip prop="vipBalance" />
<el-table-column sortable label="累计充值" show-overflow-tooltip prop="cumulativeRecharge" />
<el-table-column sortable label="创建日期" show-overflow-tooltip prop="createTime" />
<el-table-column label="状态" show-overflow-tooltip prop="status" />
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
v-hasPermi="['business:banner:query']"
icon="el-icon-document"
plain
size="mini"
style="width: 50px; border-radius: 4px 4px 4px 4px;border: 1px solid #5fb54b;"
type="success"
@click="handleDetail(scope.row)"
>详情
</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getBannerList"
/>
</div>
</el-col>
</el-row>
</div>
<div v-else class="fatherDiv">
<el-row :gutter="24">
<!--医院信息统计-->
<el-col :span="12">
<div style="width: 100%;background-color: #FFFFFF" class="cardDiv">
<div class="cardTitle">
客户信息统计
</div>
<el-row :gutter="14">
<el-col :span="6">
<div class="pet_info_statistics pet_info_statistics_register_owner">
<div style="display: flex;">
<div class="numberColor">9,393</div>
<div class="fontColor">人</div>
</div>
<div class="bottomText">
<img src="../../../assets/data_statistics/chongzhutongji_icon_chongzhu.png" height="24" width="24">
<div class="bottom_font">
客户数量
</div>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="pet_info_statistics pet_info_statistics_yifuwucz">
<div style="display: flex;">
<div class="numberColor">9,393</div>
<div class="fontColor">人</div>
</div>
<div class="bottomText">
<img src="../../../assets/data_statistics/chongzhutongji_icon_yifuwu.png" height="24" width="24">
<div class="bottom_font">
会员数量
</div>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="pet_info_statistics pet_info_statistics_register_pet">
<div style="display: flex;">
<div class="numberColor">2,123</div>
<div class="fontColor">只</div>
</div>
<div class="bottomText">
<img src="../../../assets/data_statistics/chongzhutongji_icon_zhucechongzhu.png" height="24" width="24">
<div class="bottom_font">
已服务宠物数量
</div>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="pet_info_statistics pet_info_statistics_vipBalance">
<div style="display: flex;">
<div class="numberColor">148,936</div>
<div class="fontColor">元</div>
</div>
<div class="bottomText">
<img src="../../../assets/data_statistics/chongzhutongji_icon_kayue.png" height="24" width="24">
<div class="bottom_font">
当前会员卡余额总额
</div>
</div>
</div>
</el-col>
</el-row>
</div>
</el-col>
<!--各项占比数据-->
<el-col :span="4">
<div class="percentDiv cardDiv">
<div class="cardTitle">
会员客户占比
</div>
<div class="activeUser_percent">
<el-progress type="circle" :percentage="90" width="90" stroke-width="9" />
<progressColor style="width: 0;height: 0;" />
</div>
</div>
</el-col>
<el-col :span="4">
<div class="percentDiv cardDiv">
<div class="cardTitle">
复购客户占比
</div>
<div class="vip_percent">
<el-progress type="circle" :percentage="58" width="90" stroke-width="9" />
<progressColor style="width: 0;height: 0;" />
</div>
</div>
</el-col>
<el-col :span="4">
<div class="percentDiv cardDiv">
<div class="cardTitle">
续费客户占比
</div>
<div class="repurchase_percent">
<el-progress type="circle" :percentage="37" width="90" stroke-width="9" />
<progressColor style="width: 0;height: 0;" />
</div>
</div>
</el-col>
</el-row>
<el-row :gutter="24" class="row2">
<el-col :span="12">
<div class="cardDiv" style="padding-bottom: 0">
<two-line-chart :y-data1="yData1_2" :y-data2="yData2_2" title="会员卡金额波动" />
</div>
</el-col>
<el-col :span="8">
<div class="cardDiv">
<div class="cardTitle" style="margin-bottom: 29px">
会员累计充值排行
</div>
<div v-for="(item, key) in vipTopUpRank" :key="key" class="consumeRankDiv">
<div class="rank_hospital_name_font">
<overlong-tool :text="item.vipId + '（'+item.name+'）'" :max="30" />
</div>
<el-row>
<el-col :span="19">
<el-progress
:percentage="item.percent"
:stroke-width="9"
:show-text="false"
class="consumeRankProgress"
/>
</el-col>
<el-col :span="5">
<div class="consumeRankFont">
{{ item.total }}元
</div>
</el-col>
</el-row>
</div>
</div>
</el-col>
<el-col :span="4">
<div class="cardDiv">
<div class="cardTitle" style="margin-bottom: 29px">
会员复购排行
</div>
<div v-for="(item, key) in vipRepurchaseRank" :key="key" class="timeRankDiv">
<div class="rank_hospital_name_font">
<overlong-tool :text="item.vipId + '（'+item.name+'）'" :max="17" />
</div>
<el-row>
<el-col :span="16">
<el-progress
:percentage="item.percent"
:stroke-width="9"
:show-text="false"
class="timeRankProgress"
/>
</el-col>
<el-col :span="8">
<div class="timeRankFont">
{{ item.total }}次
</div>
</el-col>
</el-row>
</div>
</div>
</el-col>
</el-row>
<el-row :gutter="24" class="row2">
<el-col :span="9">
<div class="cardDiv" style="padding-bottom: 0">
<crosswise-columnar-chart-one-line
title="会员等级分析"
:y-data="vip_analyze_y1_data"
:x-data="vip_analyze_x_data"
unit="人"
/>
</div>
</el-col>
<el-col :span="6">
<div class="cardDiv" style="padding-bottom: 0px">
<columnar-chart
title="宠主累计充值金额分析"
start-color="#3490CE"
end-color="#5FB54B"
label="累计充值金额"
unit="人"
:x-data="topUpColumnarChartData.xData"
:y-data="topUpColumnarChartData.yData"
name="累计充值金额"
/>
</div>
</el-col>
<el-col :span="9">
<div class="cardDiv" style="padding-bottom: 0px">
<radar-chart-for-pet-owner-hospital
:y-data1="[23,45,33,44,50]"
:y-data2="[13,35,43,14,20]"
/>
</div>
</el-col>
</el-row>
<el-row class="row2">
<el-col :span="24">
<div class="cardDiv">
<div class="cardTitle">
会员卡余额信息
</div>
<el-divider class="dividerLine" />
<el-table :data="tableData" style="width: 100%">
<el-table-column label="序号" min-width="20px" show-overflow-tooltip type="index" />
<el-table-column sortable label="宠主姓名" show-overflow-tooltip prop="name" />
<el-table-column sortable label="用户ID" show-overflow-tooltip prop="userId" />
<el-table-column sortable label="手机号" show-overflow-tooltip prop="phone" />
<el-table-column sortable label="会员等级" show-overflow-tooltip prop="vipLevel" />
<el-table-column sortable label="会员卡余额" show-overflow-tooltip prop="vipBalance" />
<el-table-column sortable label="累计充值" show-overflow-tooltip prop="cumulativeRecharge" />
<el-table-column sortable label="创建日期" show-overflow-tooltip prop="createTime" />
<el-table-column label="状态" show-overflow-tooltip prop="status" />
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
v-hasPermi="['business:banner:query']"
icon="el-icon-document"
plain
size="mini"
style="width: 50px; border-radius: 4px 4px 4px 4px;border: 1px solid #5fb54b;"
type="success"
@click="handleDetail(scope.row)"
>详情
</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getBannerList"
/>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
</div>
</template> </template>
<script> <script>
...@@ -205,14 +499,22 @@ import OverlongTool from '@/views/data-statistics/other-components/overlong-tool ...@@ -205,14 +499,22 @@ import OverlongTool from '@/views/data-statistics/other-components/overlong-tool
import ColumnarChart from '@/views/data-statistics/echars-components/columnarChart.vue' import ColumnarChart from '@/views/data-statistics/echars-components/columnarChart.vue'
import RadarChartForPetOwnerPlatform import RadarChartForPetOwnerPlatform
from '@/views/data-statistics/echars-components/radar-chart-for-petowner-platfrom.vue' from '@/views/data-statistics/echars-components/radar-chart-for-petowner-platfrom.vue'
import CrosswiseColumnarChart from '@/views/data-statistics/echars-components/crosswiseColumnarChart.vue'
import CrosswiseColumnarChartOneLine from '@/views/data-statistics/echars-components/crosswiseColumnarChartOneLine.vue'
import RadarChartForPetOwnerHospital
from '@/views/data-statistics/echars-components/radar-chart-for-petowner-hospital.vue'
export default { export default {
name: 'PetDataStatistics', name: 'PetDataStatistics',
components: { components: {
RadarChartForPetOwnerHospital,
CrosswiseColumnarChartOneLine,
CrosswiseColumnarChart,
RadarChartForPetOwnerPlatform, RadarChartForPetOwnerPlatform,
ColumnarChart, OverlongTool, TwoLineChart, ProgressColor }, ColumnarChart, OverlongTool, TwoLineChart, ProgressColor },
data() { data() {
return { return {
isPlatformRole: false,
mapData: [ mapData: [
{ {
name: '北京', name: '北京',
...@@ -369,6 +671,20 @@ export default { ...@@ -369,6 +671,20 @@ export default {
area_color: 'rgba(95,181,75,0.3)', area_color: 'rgba(95,181,75,0.3)',
unit: '人' unit: '人'
}, },
yData1_2: {
label: '新增会员卡余额',
data: [203, 312, 352, 266, 128, 71, 22, 35, 11, 11, 120, 221],
line_color: '#3490CE',
area_color: 'rgba(52,144,206,0.3)',
unit: '万元'
},
yData2_2: {
label: '会员卡余额总额',
data: [233, 633, 625, 416, 311, 110, 222, 244, 258, 279, 230, 310],
line_color: '#5FB54B',
area_color: 'rgba(95,181,75,0.3)',
unit: '万元'
},
petOwnerConsumeRank: [ petOwnerConsumeRank: [
{ {
name: 'TOM', name: 'TOM',
...@@ -391,6 +707,32 @@ export default { ...@@ -391,6 +707,32 @@ export default {
total: 24523 total: 24523
} }
], ],
vipTopUpRank: [
{
name: 'TOM',
vipId: 'TCUVY88921',
percent: 100,
total: 214523
},
{
name: 'JACVK',
vipId: 'TCUVY88921',
percent: 90,
total: 114523
},
{
name: 'TONSHW',
vipId: 'TCUVY88921',
percent: 50,
total: 84523
},
{
name: 'TINAI',
vipId: 'TCUVY88921',
percent: 20,
total: 24523
}
],
petOwnerTimeRank: [ petOwnerTimeRank: [
{ {
name: 'JARRY', name: 'JARRY',
...@@ -413,248 +755,276 @@ export default { ...@@ -413,248 +755,276 @@ export default {
total: 245 total: 245
} }
], ],
vipRepurchaseRank: [
{
name: 'JARRY',
vipId: 'TCUVY88921',
percent: 100,
total: 2145
},
{
name: 'NARNA',
vipId: 'TCUVY88921',
percent: 90,
total: 1145
},
{
name: 'CARRY',
vipId: 'TCUVY88921',
percent: 50,
total: 845
},
{
name: 'JAMAS',
vipId: 'TCUVY88921',
percent: 20,
total: 245
}
],
columnarChartData: { columnarChartData: {
xData: ['1家', '2~4家', '5~8家', '8家以上'], xData: ['1家', '2~4家', '5~8家', '8家以上'],
yData: [53, 26, 66, 36] yData: [53, 26, 66, 36]
}, },
topUpColumnarChartData: {
xData: ['0~2k', '2~5k', '5~20k', '20~50k', '>50k'],
yData: [53, 26, 66, 36, 20]
},
radarSelect: 'lastYear', radarSelect: 'lastYear',
tableData: [ tableData: [
{ {
name: '乖乖宠物医院（八里台店）', name: 'JACK_TOM',
deptId: 'DUGYWB212345', userId: 'DUGYWB212345',
hospitalLevel: '三星诊疗医院', phone: 13434554456,
linkPerson: 'JACK', vipLevel: '四级会员',
linkPhone: '13423453345', vipBalance: '3000',
address: '天津市滨海新区平山道57号增1', cumulativeRecharge: '3000',
inDate: '2023/10/23', createTime: '2023/10/23',
outDate: '2023/12/23',
balance: 13123,
status: '1' status: '1'
}, },
{ {
name: '乖乖宠物医院（八里台店）', name: 'JACK_TOM',
deptId: 'DUGYWB212345', userId: 'DUGYWB212345',
hospitalLevel: '三星诊疗医院', phone: 13434554456,
linkPerson: 'JACK', vipLevel: '四级会员',
linkPhone: '13423453345', vipBalance: '3000',
address: '天津市滨海新区平山道57号增1', cumulativeRecharge: '3000',
inDate: '2023/10/23', createTime: '2023/10/23',
outDate: '2023/12/23', outDate: '2023/12/23',
balance: 13123, balance: 13123,
status: '1' status: '1'
}, },
{ {
name: '乖乖宠物医院（八里台店）', name: 'JACK_TOM',
deptId: 'DUGYWB212345', userId: 'DUGYWB212345',
hospitalLevel: '三星诊疗医院', phone: 13434554456,
linkPerson: 'JACK', vipLevel: '四级会员',
linkPhone: '13423453345', vipBalance: '3000',
address: '天津市滨海新区平山道57号增1', cumulativeRecharge: '3000',
inDate: '2023/10/23', createTime: '2023/10/23',
outDate: '2023/12/23', outDate: '2023/12/23',
balance: 13123, balance: 13123,
status: '1' status: '1'
}, },
{ {
name: '乖乖宠物医院（八里台店）', name: 'JACK_TOM',
deptId: 'DUGYWB212345', userId: 'DUGYWB212345',
hospitalLevel: '三星诊疗医院', phone: 13434554456,
linkPerson: 'JACK', vipLevel: '四级会员',
linkPhone: '13423453345', vipBalance: '3000',
address: '天津市滨海新区平山道57号增1', cumulativeRecharge: '3000',
inDate: '2023/10/23', createTime: '2023/10/23',
outDate: '2023/12/23', outDate: '2023/12/23',
balance: 13123, balance: 13123,
status: '1' status: '1'
}, },
{ {
name: '乖乖宠物医院（八里台店）', name: 'JACK_TOM',
deptId: 'DUGYWB212345', userId: 'DUGYWB212345',
hospitalLevel: '三星诊疗医院', phone: 13434554456,
linkPerson: 'JACK', vipLevel: '四级会员',
linkPhone: '13423453345', vipBalance: '3000',
address: '天津市滨海新区平山道57号增1', cumulativeRecharge: '3000',
inDate: '2023/10/23', createTime: '2023/10/23',
outDate: '2023/12/23', outDate: '2023/12/23',
balance: 13123, balance: 13123,
status: '1' status: '1'
}, },
{ {
name: '乖乖宠物医院（八里台店）', name: 'JACK_TOM',
deptId: 'DUGYWB212345', userId: 'DUGYWB212345',
hospitalLevel: '三星诊疗医院', phone: 13434554456,
linkPerson: 'JACK', vipLevel: '四级会员',
linkPhone: '13423453345', vipBalance: '3000',
address: '天津市滨海新区平山道57号增1', cumulativeRecharge: '3000',
inDate: '2023/10/23', createTime: '2023/10/23',
outDate: '2023/12/23', outDate: '2023/12/23',
balance: 13123, balance: 13123,
status: '1' status: '1'
}, },
{ {
name: '乖乖宠物医院（八里台店）', name: 'JACK_TOM',
deptId: 'DUGYWB212345', userId: 'DUGYWB212345',
hospitalLevel: '三星诊疗医院', phone: 13434554456,
linkPerson: 'JACK', vipLevel: '四级会员',
linkPhone: '13423453345', vipBalance: '3000',
address: '天津市滨海新区平山道57号增1', cumulativeRecharge: '3000',
inDate: '2023/10/23', createTime: '2023/10/23',
outDate: '2023/12/23', outDate: '2023/12/23',
balance: 13123, balance: 13123,
status: '1' status: '1'
}, },
{ {
name: '乖乖宠物医院（八里台店）', name: 'JACK_TOM',
deptId: 'DUGYWB212345', userId: 'DUGYWB212345',
hospitalLevel: '三星诊疗医院', phone: 13434554456,
linkPerson: 'JACK', vipLevel: '四级会员',
linkPhone: '13423453345', vipBalance: '3000',
address: '天津市滨海新区平山道57号增1', cumulativeRecharge: '3000',
inDate: '2023/10/23', createTime: '2023/10/23',
outDate: '2023/12/23', outDate: '2023/12/23',
balance: 13123, balance: 13123,
status: '1' status: '1'
}, },
{ {
name: '乖乖宠物医院（八里台店）', name: 'JACK_TOM',
deptId: 'DUGYWB212345', userId: 'DUGYWB212345',
hospitalLevel: '三星诊疗医院', phone: 13434554456,
linkPerson: 'JACK', vipLevel: '四级会员',
linkPhone: '13423453345', vipBalance: '3000',
address: '天津市滨海新区平山道57号增1', cumulativeRecharge: '3000',
inDate: '2023/10/23', createTime: '2023/10/23',
outDate: '2023/12/23', outDate: '2023/12/23',
balance: 13123, balance: 13123,
status: '1' status: '1'
}, },
{ {
name: '乖乖宠物医院（八里台店）', name: 'JACK_TOM',
deptId: 'DUGYWB212345', userId: 'DUGYWB212345',
hospitalLevel: '三星诊疗医院', phone: 13434554456,
linkPerson: 'JACK', vipLevel: '四级会员',
linkPhone: '13423453345', vipBalance: '3000',
address: '天津市滨海新区平山道57号增1', cumulativeRecharge: '3000',
inDate: '2023/10/23', createTime: '2023/10/23',
outDate: '2023/12/23', outDate: '2023/12/23',
balance: 13123, balance: 13123,
status: '1' status: '1'
}, },
{ {
name: '乖乖宠物医院（八里台店）', name: 'JACK_TOM',
deptId: 'DUGYWB212345', userId: 'DUGYWB212345',
hospitalLevel: '三星诊疗医院', phone: 13434554456,
linkPerson: 'JACK', vipLevel: '四级会员',
linkPhone: '13423453345', vipBalance: '3000',
address: '天津市滨海新区平山道57号增1', cumulativeRecharge: '3000',
inDate: '2023/10/23', createTime: '2023/10/23',
outDate: '2023/12/23', outDate: '2023/12/23',
balance: 13123, balance: 13123,
status: '1' status: '1'
}, },
{ {
name: '乖乖宠物医院（八里台店）', name: 'JACK_TOM',
deptId: 'DUGYWB212345', userId: 'DUGYWB212345',
hospitalLevel: '三星诊疗医院', phone: 13434554456,
linkPerson: 'JACK', vipLevel: '四级会员',
linkPhone: '13423453345', vipBalance: '3000',
address: '天津市滨海新区平山道57号增1', cumulativeRecharge: '3000',
inDate: '2023/10/23', createTime: '2023/10/23',
outDate: '2023/12/23', outDate: '2023/12/23',
balance: 13123, balance: 13123,
status: '1' status: '1'
}, },
{ {
name: '乖乖宠物医院（八里台店）', name: 'JACK_TOM',
deptId: 'DUGYWB212345', userId: 'DUGYWB212345',
hospitalLevel: '三星诊疗医院', phone: 13434554456,
linkPerson: 'JACK', vipLevel: '四级会员',
linkPhone: '13423453345', vipBalance: '3000',
address: '天津市滨海新区平山道57号增1', cumulativeRecharge: '3000',
inDate: '2023/10/23', createTime: '2023/10/23',
outDate: '2023/12/23', outDate: '2023/12/23',
balance: 13123, balance: 13123,
status: '1' status: '1'
}, },
{ {
name: '乖乖宠物医院（八里台店）', name: 'JACK_TOM',
deptId: 'DUGYWB212345', userId: 'DUGYWB212345',
hospitalLevel: '三星诊疗医院', phone: 13434554456,
linkPerson: 'JACK', vipLevel: '四级会员',
linkPhone: '13423453345', vipBalance: '3000',
address: '天津市滨海新区平山道57号增1', cumulativeRecharge: '3000',
inDate: '2023/10/23', createTime: '2023/10/23',
outDate: '2023/12/23', outDate: '2023/12/23',
balance: 13123, balance: 13123,
status: '1' status: '1'
}, },
{ {
name: '乖乖宠物医院（八里台店）', name: 'JACK_TOM',
deptId: 'DUGYWB212345', userId: 'DUGYWB212345',
hospitalLevel: '三星诊疗医院', phone: 13434554456,
linkPerson: 'JACK', vipLevel: '四级会员',
linkPhone: '13423453345', vipBalance: '3000',
address: '天津市滨海新区平山道57号增1', cumulativeRecharge: '3000',
inDate: '2023/10/23', createTime: '2023/10/23',
outDate: '2023/12/23', outDate: '2023/12/23',
balance: 13123, balance: 13123,
status: '1' status: '1'
}, },
{ {
name: '乖乖宠物医院（八里台店）', name: 'JACK_TOM',
deptId: 'DUGYWB212345', userId: 'DUGYWB212345',
hospitalLevel: '三星诊疗医院', phone: 13434554456,
linkPerson: 'JACK', vipLevel: '四级会员',
linkPhone: '13423453345', vipBalance: '3000',
address: '天津市滨海新区平山道57号增1', cumulativeRecharge: '3000',
inDate: '2023/10/23', createTime: '2023/10/23',
outDate: '2023/12/23', outDate: '2023/12/23',
balance: 13123, balance: 13123,
status: '1' status: '1'
}, },
{ {
name: '乖乖宠物医院（八里台店）', name: 'JACK_TOM',
deptId: 'DUGYWB212345', userId: 'DUGYWB212345',
hospitalLevel: '三星诊疗医院', phone: 13434554456,
linkPerson: 'JACK', vipLevel: '四级会员',
linkPhone: '13423453345', vipBalance: '3000',
address: '天津市滨海新区平山道57号增1', cumulativeRecharge: '3000',
inDate: '2023/10/23', createTime: '2023/10/23',
outDate: '2023/12/23', outDate: '2023/12/23',
balance: 13123, balance: 13123,
status: '1' status: '1'
}, },
{ {
name: '乖乖宠物医院（八里台店）', name: 'JACK_TOM',
deptId: 'DUGYWB212345', userId: 'DUGYWB212345',
hospitalLevel: '三星诊疗医院', phone: 13434554456,
linkPerson: 'JACK', vipLevel: '四级会员',
linkPhone: '13423453345', vipBalance: '3000',
address: '天津市滨海新区平山道57号增1', cumulativeRecharge: '3000',
inDate: '2023/10/23', createTime: '2023/10/23',
outDate: '2023/12/23', outDate: '2023/12/23',
balance: 13123, balance: 13123,
status: '1' status: '1'
}, },
{ {
name: '乖乖宠物医院（八里台店）', name: 'JACK_TOM',
deptId: 'DUGYWB212345', userId: 'DUGYWB212345',
hospitalLevel: '三星诊疗医院', phone: 13434554456,
linkPerson: 'JACK', vipLevel: '四级会员',
linkPhone: '13423453345', vipBalance: '3000',
address: '天津市滨海新区平山道57号增1', cumulativeRecharge: '3000',
inDate: '2023/10/23', createTime: '2023/10/23',
outDate: '2023/12/23', outDate: '2023/12/23',
balance: 13123, balance: 13123,
status: '1' status: '1'
}, },
{ {
name: '乖乖宠物医院（八里台店）', name: 'JACK_TOM',
deptId: 'DUGYWB212345', userId: 'DUGYWB212345',
hospitalLevel: '三星诊疗医院', phone: 13434554456,
linkPerson: 'JACK', vipLevel: '四级会员',
linkPhone: '13423453345', vipBalance: '3000',
address: '天津市滨海新区平山道57号增1', cumulativeRecharge: '3000',
inDate: '2023/10/23', createTime: '2023/10/23',
outDate: '2023/12/23', outDate: '2023/12/23',
balance: 13123, balance: 13123,
status: '1' status: '1'
...@@ -664,7 +1034,33 @@ export default { ...@@ -664,7 +1034,33 @@ export default {
queryParams: { queryParams: {
pageNum: 1, pageNum: 1,
pageSize: 20 pageSize: 20
} },
y1_data: {
name: '绑定宠物数量',
data: [18, 23, 29, 10, 13, 63],
startColor: '#3870CD',
endColor: '#3AA2CF'
},
y2_data: {
name: '就诊宠物数量',
data: [25, 38, 31, 12, 11, 9],
startColor: '#7C39D2',
endColor: '#5266EA'
},
cross_x_data: ['1只', '2只', '3~4只', '4~5只', '5只以上'],
vip_analyze_y1_data: {
name: '会员等级',
data: [48, 23, 29, 10, 13, 3],
startColor: '#3870CD',
endColor: '#3AA2CF'
},
vip_analyze_y2_data: {
name: '',
data: [],
startColor: '#7C39D2',
endColor: '#5266EA'
},
vip_analyze_x_data: ['一级会员', '二级会员', '三级会员', '四级会员', '五级会员']
} }
}, },
watch: {}, watch: {},
...@@ -836,6 +1232,39 @@ export default { ...@@ -836,6 +1232,39 @@ export default {
} }
} }
} }
.pet_info_statistics_vipBalance {
background-image: url("../../../assets/data_statistics/chongzhutongji_img_kayue.png");
background-size: 100% 103px;
.numberColor {
font-size: 24px;
font-weight: bold;
background-image: -webkit-linear-gradient(top, #DB9147, #DB4747);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.fontColor {
padding-top: 5px;
padding-left: 2px;
font-size: 12px;
font-weight: bold;
background-image: -webkit-linear-gradient(top, #DB9147, #DB4747);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.bottomText {
padding-top: 15px;
display: flex;
.bottom_font {
//line-height: 24px;
font-size: 12px;
font-family: Microsoft YaHei;
font-weight: 400;
line-height: 30px;
color: #333333;
margin-left: 5px;
}
}
}
.activeUser_percent { .activeUser_percent {
::v-deep .el-progress-circle { ::v-deep .el-progress-circle {
svg > path:nth-child(2) { svg > path:nth-child(2) {
...@@ -946,4 +1375,17 @@ export default { ...@@ -946,4 +1375,17 @@ export default {
padding-left: 10px; padding-left: 10px;
} }
} }
::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
color: #5FB54B !important;
background-color: #fff !important;
border-color: #E5E5E5 !important;
box-shadow: 0 0 0 0 #E5E5E5;
}
::v-deep .el-radio-button__inner:hover {
color: #6db45d !important;
}
.dividerLine {
margin-top: 14px;
margin-bottom: 24px;
}
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment