chenxin007/zqyy-yl
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

营销页调整

Browse Source
This commit is contained in:
陈诗浩 2023-09-05 15:42:17 +08:00
parent 0feb8a4c88
commit 4561d30eae
2 changed files with 609 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/img/bigScreen/vip-people.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 83 KiB

622
src/pages/marketing/home.vue
View File

@ -116,7 +116,7 @@
</div>
</div>
</div>
<div class="home_center" v-if="0">
<div class="home_center">
<!--数据概况-->
<div class="inner_box">
<div class="inner_header">
@ -254,29 +254,178 @@
<div class="yx_title2_bg">
<div class="font_style1">会员性别占比统计<span style="font-size: 14px">(%)</span></div>
</div>
<div>内容 </div>
<div style="width: 100%;height: 80%;display: flex;justify-content: center;align-items: center">
<Echarts
class="echarts"
style="width: 40%"
:echartObj="echartObj5"
></Echarts>
<div class="vip-bg"></div>
</div>
</div>
<div style="width: 50%;height: 50%; display: flex;align-items: center; flex-direction: column">
<div class="yx_title2_bg">
<div class="font_style1">会员性别占比统计<span style="font-size: 14px">(%)</span></div>
<div class="font_style1">会员学历统计<span style="font-size: 14px">(%)</span></div>
</div>
<div>内容 </div>
<Echarts
class="echarts"
:echartObj="echartObj7"
></Echarts>
</div>
<div style="width: 50%;height: 50%; display: flex;align-content: center; flex-direction: column">
<div style="text-align: center">标题</div>
<div>内容 </div>
<div style="width: 50%;height: 50%; display: flex;align-items: center; flex-direction: column">
<div class="yx_title2_bg">
<div class="font_style1">会员身份统计<span style="font-size: 14px">(人)</span></div>
</div>
<div style="width: 50%;height: 50%; display: flex;align-content: center; flex-direction: column">
<div style="text-align: center">标题</div>
<div>内容 </div>
<Echarts
class="echarts"
:echartObj="echartObj6"
></Echarts>
</div>
<div style="width: 50%;height: 50%; display: flex;align-items: center; flex-direction: column">
<div class="yx_title2_bg">
<div class="font_style1">会员来源统计<span style="font-size: 14px">(人)</span></div>
</div>
<Echarts
class="echarts"
:echartObj="echartObj8"
></Echarts>
</div>
</div>
</div>
</div>
<div class="home_right" >
<div class="inner_box">
<!-- 标题 -->
<div class="inner_header">
<div class="header_left"></div>
<div class="header_icon">
<div style="width: 12px; height: 10px; margin-bottom: -6px"><img src="../../assets/img/bigScreen/polygon1.png"></div>
<div style="width: 12px; height: 10px; margin-bottom: 10px"><img src="../../assets/img/bigScreen/polygon2.png"></div>
</div>
<div class="header_title">
<div>
<span>退会率统计</span>
<span class="little_font">(%)</span>
</div>
</div>
</div>
<!-- 内容-->
<div class="box_content" style="flex-direction: row;">
<div class="chart_box" style="width: 50%; justify-content: center; align-items: center;display: flex;flex-direction: column">
<div style="margin-bottom: 25px;display: flex; justify-content: center;align-items: center">
<span style="font-size: 16px">当前会员：</span>
<div style="display: flex">
<img src="../../assets/img/bigScreen/number-bg.png">
<img style="margin-left: 3px" v-if="echartObj9.totalNum > 9" src="../../assets/img/bigScreen/number-bg.png">
<img style="margin-left: 3px" v-if="echartObj9.totalNum > 99" src="../../assets/img/bigScreen/number-bg.png">
<img style="margin-left: 3px" v-if="echartObj9.totalNum > 999" src="../../assets/img/bigScreen/number-bg.png">
<img style="margin-left: 3px" v-if="echartObj9.totalNum > 9999" src="../../assets/img/bigScreen/number-bg.png">
<img style="margin-left: 3px" v-if="echartObj9.totalNum > 99999" src="../../assets/img/bigScreen/number-bg.png">
<div class="font_style">{{ echartObj9.totalNum }}</div><div style="font-size: 16px;line-height: 35px">人</div>
</div>
</div>
<div style="border: solid 12px #004657; border-radius: 100%">
<a-progress :width="150" style="color: #FFFFFF;background-color: #08173E;border-radius: 100%;" :strokeWidth="13" type="circle" :stroke-color="{'9%': '#1A7BEA','90%': '#009CFF'}"
:percent="echartObj9.turnNum"
/>
</div>
<div style="margin-top: 10px;font-size: 14px">会员</div>
</div>
<div class="chart_box" style="width: 50%;justify-content: center; align-items: center;display: flex;flex-direction: column">
<div style="margin-bottom: 25px;display: flex; justify-content: center;align-items: center">
<span style="font-size: 16px">退会成员：</span>
<div style="display: flex">
<img src="../../assets/img/bigScreen/number-bg.png">
<img style="margin-left: 3px" v-if="echartObj9.memberNum > 9" src="../../assets/img/bigScreen/number-bg.png">
<img style="margin-left: 3px" v-if="echartObj9.memberNum > 99" src="../../assets/img/bigScreen/number-bg.png">
<img style="margin-left: 3px" v-if="echartObj9.memberNum > 999" src="../../assets/img/bigScreen/number-bg.png">
<img style="margin-left: 3px" v-if="echartObj9.memberNum > 9999" src="../../assets/img/bigScreen/number-bg.png">
<img style="margin-left: 3px" v-if="echartObj9.memberNum > 99999" src="../../assets/img/bigScreen/number-bg.png">
<div class="font_style">{{ echartObj9.memberNum }}</div><div style="font-size: 16px;line-height: 35px">人</div>
</div>
</div>
<div style="border: solid 12px #004657; border-radius: 100%">
<a-progress :width="150" style="color: #FFFFFF; background-color: #08173E;border-radius: 100%" :strokeWidth="13" type="circle" :stroke-color="{'8%': '#FF7B00','93%': '#FFBB00'}"
:percent="echartObj9.notTurnNum">
</a-progress>
</div>
<div style="margin-top: 10px;font-size: 14px">退会成员</div>
</div>
</div>
</div>
<div class="inner_box">
<!-- 标题 -->
<div class="inner_header">
<div class="header_left"></div>
<div class="header_icon">
<div style="width: 12px; height: 10px; margin-bottom: -6px"><img src="../../assets/img/bigScreen/polygon1.png"></div>
<div style="width: 12px; height: 10px; margin-bottom: 10px"><img src="../../assets/img/bigScreen/polygon2.png"></div>
</div>
<div class="header_title">
<div>
<span>退会原因统计</span>
<span class="little_font">(人)</span>
</div>
</div>
</div>
<!-- 内容-->
<div class="box_content">
<Echarts
class="echarts"
:echartObj="echartObj10"
></Echarts>
</div>
</div>
<div class="inner_box">
<!-- 标题 -->
<div class="inner_header">
<div class="header_left"></div>
<div class="header_icon">
<div style="width: 12px; height: 10px; margin-bottom: -6px"><img src="../../assets/img/bigScreen/polygon1.png"></div>
<div style="width: 12px; height: 10px; margin-bottom: 10px"><img src="../../assets/img/bigScreen/polygon2.png"></div>
</div>
<div class="header_title">
<div>
<span>预订人数统计</span>
<span class="little_font">(人)</span>
</div>
</div>
</div>
<!-- 内容-->
<div>
<div style="margin-bottom: 25px;margin-top:25px;display: flex; justify-content: center;align-items: center">
<span style="font-size: 16px">预定总人数：</span>
<div style="display: flex">
<img src="../../assets/img/bigScreen/number-bg.png">
<img style="margin-left: 3px" v-if="echartObj11.totalNum > 9" src="../../assets/img/bigScreen/number-bg.png">
<img style="margin-left: 3px" v-if="echartObj11.totalNum > 99" src="../../assets/img/bigScreen/number-bg.png">
<img style="margin-left: 3px" v-if="echartObj11.totalNum > 999" src="../../assets/img/bigScreen/number-bg.png">
<img style="margin-left: 3px" v-if="echartObj11.totalNum > 9999" src="../../assets/img/bigScreen/number-bg.png">
<img style="margin-left: 3px" v-if="echartObj11.totalNum > 99999" src="../../assets/img/bigScreen/number-bg.png">
<div class="font_style">{{ echartObj11.totalNum }}</div><div style="font-size: 16px;line-height: 35px">人</div>
</div>
</div>
<div class="box_content" style="flex-direction: row;">
<div class="chart_box" style="width: 50%; justify-content: center; align-items: center;display: flex;flex-direction: column">
<div style="border: solid 12px #004657; border-radius: 100%">
<a-progress :width="150" style="color: #FFFFFF;background-color: #08173E;border-radius: 100%;" :strokeWidth="13" type="circle" :stroke-color="{'9%': '#1A7BEA','90%': '#009CFF'}"
:percent="echartObj11.turnNum"
/>
</div>
<div style="margin-top: 10px;font-size: 14px">预定会员</div>
</div>
<div class="chart_box" style="width: 50%;justify-content: center; align-items: center;display: flex;flex-direction: column">
<div style="border: solid 12px #004657; border-radius: 100%">
<a-progress :width="150" style="color: #FFFFFF; background-color: #08173E;border-radius: 100%" :strokeWidth="13" type="circle" :stroke-color="{'8%': '#48E5E5','93%': '#2DCCFF'}"
:percent="echartObj11.notTurnNum">
</a-progress>
</div>
<div style="margin-top: 10px;font-size: 14px">预定床位</div>
</div>
</div>
</div>
</div>
<div class="home_right" v-if="0">
</div>
<img src="@/assets/img/page2/02营销.png" alt="" style="width: 74%;height: calc(100vh - 5vw);margin-left: 1%;">
</div>
</template>
@ -288,6 +437,74 @@ import { Progress,Divider } from 'ant-design-vue';
import SvgIcon from '@/components/svgIcon.vue';
Vue.use(Progress);
Vue.use(Divider);
// 定义柱状图左侧图形元素
const leftRect = echarts.graphic.extendShape({
shape: {
x: 0,
y: 0,
width: 16, //柱状图宽
zWidth: 8, //阴影折角宽
zHeight: 4 //阴影折角高
},
buildPath: function (ctx, shape) {
const api = shape.api;
const xAxisPoint = api.coord([shape.xValue, 0]);
const p0 = [shape.x - shape.width / 2, shape.y - shape.zHeight];
const p1 = [shape.x - shape.width / 2, shape.y - shape.zHeight];
const p2 = [xAxisPoint[0] - shape.width / 2, xAxisPoint[1]];
const p3 = [xAxisPoint[0] + shape.width / 2, xAxisPoint[1]];
const p4 = [shape.x + shape.width / 2, shape.y];
ctx.moveTo(p0[0], p0[1]);
ctx.lineTo(p1[0], p1[1]);
ctx.lineTo(p2[0], p2[1]);
ctx.lineTo(p3[0], p3[1]);
ctx.lineTo(p4[0], p4[1]);
ctx.lineTo(p0[0], p0[1]);
ctx.closePath();
}
});
// 定义柱状图右侧以及顶部图形元素
const rightRect = echarts.graphic.extendShape({
shape: {
x: 0,
y: 0,
width: 15,
zWidth: 12,
zHeight: 8
},
buildPath: function (ctx, shape) {
const api = shape.api;
const xAxisPoint = api.coord([shape.xValue, 0]);
const p1 = [shape.x - shape.width / 2, shape.y - shape.zHeight / 2];
const p3 = [xAxisPoint[0] + shape.width / 2, xAxisPoint[1]];
const p4 = [shape.x + shape.width / 2, shape.y];
const p5 = [xAxisPoint[0] + shape.width / 2 + shape.zWidth, xAxisPoint[1]];
const p6 = [
shape.x + shape.width / 2 + shape.zWidth,
shape.y - shape.zHeight / 2
];
const p7 = [
shape.x - shape.width / 2 + shape.zWidth,
shape.y - shape.zHeight
];
ctx.moveTo(p4[0], p4[1]);
ctx.lineTo(p3[0], p3[1]);
ctx.lineTo(p5[0], p5[1]);
ctx.lineTo(p6[0], p6[1]);
ctx.lineTo(p4[0], p4[1]);
ctx.moveTo(p4[0], p4[1]);
ctx.lineTo(p6[0], p6[1]);
ctx.lineTo(p7[0], p7[1]);
ctx.lineTo(p1[0], p1[1]);
ctx.lineTo(p4[0], p4[1]);
ctx.closePath();
}
});
// 注册图形元素
echarts.graphic.registerShape('leftRect', leftRect);
echarts.graphic.registerShape('rightRect', rightRect);
export default {
data() {
let self = this
@ -544,6 +761,346 @@ export default {
money: 6.3,
}
],
echartObj5: {
legend: {
show: false,
top: 'middle',
right: 0,
orient: 'vertical',
data: ['男性','女性',],
textStyle: {
color: '#FFFFFF',
lineHeight: 18
},
formatter: (name) => {
let data = this.echartObj5.series[0].data
let total = 0
let tarValue
for (let i = 0; i < data.length; i++) {
total += data[i].value
if (data[i].name == name) {
tarValue = data[i].value
}
}
//计算出百分比
let p = Math.round((tarValue / total) * 100) + '%'
return `${name}${p}`
}
},
color: ['#507AFC','#F5B12D'],
series: [
{
name: 'Access From',
type: 'pie',
radius: [60, 90],
top: 'middle',
left: -50,
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: false,
fontSize: 20,
}
},
labelLine: {
show: false
},
data: [
{ value: 68.5, name: '男性' },
{ value: 31.5, name: '女性' },
]
}
]
},
echartObj6: {
grid: {
show: false,
left: '20',
top: 20,
bottom: '20',
containLabel: true
},
xAxis: {
type: 'value',
axisLabel: {//x轴文字的配置
show: true,
textStyle: {
color: "#fff",
fontSize: 10,
},
},
splitLine:{
show:false
}
},
yAxis: {
type: 'category',
splitLine:{
show:false
},
axisLabel: {//y轴文字的配置
textStyle: {
color: "#fff",
},
},
data: ['其他','私营企业','自由职业','军人','工人','高职','高管', '高干(处)','高干(科)']
},
series: [
{
data: [130,60,40,130,100,160,180,190,260],
type: 'bar',
itemStyle:{
normal: {
color: (param)=>{
if(param.dataIndex % 2 ==0){
return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color:'rgba(255,187,0,0.30)' },
{ offset: 1, color: '#FFBB00' },
]);
}else {
return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color:'rgba(25,118,226,0.30)' },
{ offset: 1, color: '#1B7EF2' },
]);
}
},
}
},
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
},
barWidth: 5,
}
]
},
echartObj7:{
xAxis: {
type: 'category',
axisLabel: {//x轴文字的配置
show: true,
textStyle: {
color: "#fff",
fontSize: 10,
}
},
data: ['博士','硕士','本科','大专','中专','高中','初中','小学','其他'],
},
yAxis: {
type: 'value',
axisLabel: {//y轴文字的配置
textStyle: {
color: "#fff",
},
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: ['#1F7DAF']
}
},
},
series: [
{
data: [120,190,170,130,180,120,50,20,5],
type: 'custom',
renderItem: function (params, api) {
const index = params.seriesIndex;
let location = api.coord([api.value(0) + index, api.value(1)]);
var extent = api.size([0, api.value(1)]);
return {
type: 'group',
children: [
{
type: 'leftRect',
shape: {
api,
xValue: api.value(0) + index,
yValue: api.value(1),
x: location[0],
y: location[1]
},
style: api.style()
},
{
type: 'rightRect',
shape: {
api,
xValue: api.value(0) + index,
yValue: api.value(1),
x: location[0],
y: location[1]
},
style: api.style()
}
]
};
},
barWidth: 18,
itemStyle: {
normal: {
// color: '#1B7EF2'
color: () => {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(26, 132, 191, 1)' },
{ offset: 1, color: 'rgba(27,126,242,0.00)' },
]);
},
}
}
},
]
},
echartObj8:{
xAxis: {
type: 'category',
axisLabel: {//x轴文字的配置
show: true,
textStyle: {
color: "#fff",
fontSize: 10,
}
},
data: ['网络','广告','口碑','他人推荐','其他'],
},
yAxis: {
type: 'value',
axisLabel: {//y轴文字的配置
textStyle: {
color: "#fff",
},
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: ['#1F7DAF']
}
},
},
series: [
{
data: [180,290,240,180,50],
type: 'custom',
renderItem: function (params, api) {
const index = params.seriesIndex;
let location = api.coord([api.value(0) + index, api.value(1)]);
var extent = api.size([0, api.value(1)]);
return {
type: 'group',
children: [
{
type: 'leftRect',
shape: {
api,
xValue: api.value(0) + index,
yValue: api.value(1),
x: location[0],
y: location[1]
},
style: api.style()
},
{
type: 'rightRect',
shape: {
api,
xValue: api.value(0) + index,
yValue: api.value(1),
x: location[0],
y: location[1]
},
style: api.style()
}
]
};
},
barWidth: 18,
itemStyle: {
normal: {
// color: '#1B7EF2'
color: () => {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(26, 132, 191, 1)' },
{ offset: 1, color: 'rgba(27,126,242,0.00)' },
]);
},
}
}
},
]
},
/*预约转化率*/
echartObj9: {
totalNum: 812,
memberNum: 105,
turnNum: 88.55,
notTurnNum: 11.45,
},
echartObj10: {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
xAxis: {
type: 'category',
axisLabel: {//x轴文字的配置
show: true,
textStyle: {
color: "#fff",
fontSize: 10,
}
},
data: ['健康状况','家庭支持','经济因素','服务质量','社交因素','情感因素','其他'],
},
yAxis: {
type: 'value',
axisLabel: {//y轴文字的配置
textStyle: {
color: "rgba(255, 255, 255, 0.64)",
},
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: ['#1F7DAF']
}
},
},
series: [
{
data: [
{name: '健康状况', value: 25 },
{name: '家庭支持', value: 14 },
{name: '经济因素', value: 38 },
{name: '服务质量', value: 27 },
{name: '社交因素', value: 13 },
{name: '情感因素', value: 8 },
{name: '其他', value: 4 },
],
type: 'bar',
barWidth: 30,
barGap:'100%',
itemStyle: this.setSeriesItemStyle('lan'),
},
]
},
echartObj11: {
totalNum: 342,
memberNum: 105,
turnNum: 88.55,
notTurnNum: 11.45,
},
}
},
created() {
@ -557,6 +1114,36 @@ export default {
init() {
this.getData();
},
setSeriesItemStyle(color, obj={}){
let colors = {
qing: ['#48E5E5', 'rgba(72,228,229,0.30)'],
lan: ['#2B8EF3', 'rgba(25,118,226,0.30)'],
// huang: ['#F5B12D', 'rgba(255,123,0,0.30)'],
huang: ['#FF7B00', 'rgba(255,123,0,0.30)'],
lv: ['#07F090', 'rgba(60,212,149,0.28)'],
zi: ['#9B64D3', 'rgba(155,100,211,0.24)'],
}
return {
normal: {
label: {
show: true,
position: 'top',
textStyle: {
color: '#FFFFFF',
fontSize: 12
},
},
color: () => {
return new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: colors[color][0] },
{ offset: 1, color: colors[color][1] },
]);
},
...obj,
}
}
},
search() {
this.init();
},
@ -690,6 +1277,13 @@ export default {
background-size: 100% 100%;
width: 80%;
display: flex;
justify-content: center
justify-content: center;
}
.vip-bg{
width: 35%;
height: 70%;
background-image: url(../../assets/img/bigScreen/vip-people.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
</style>