root/alikeSCRM
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request '首页' (#16) from luxm into main

Browse Source 
Reviewed-on: http://120.46.37.243:3000/scrm/alikeSCRM/pulls/16
This commit is contained in:
root 2024-03-15 09:18:58 +00:00
commit eb6301d2d4
5 changed files with 55 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ruoyi-ui/.env.development
View File

@ -1,5 +1,5 @@
# 页面标题 # 页面标题
VUE_APP_TITLE = RuoyiCRM VUE_APP_TITLE = 众悦CRM
# 开发环境配置 # 开发环境配置
ENV = 'development' ENV = 'development'

2
ruoyi-ui/.env.production
View File

@ -1,5 +1,5 @@
# 页面标题 # 页面标题
VUE_APP_TITLE = RuoyiCRM VUE_APP_TITLE = 众悦CRM
# 生产环境配置 # 生产环境配置
ENV = 'production' ENV = 'production'

2
ruoyi-ui/.env.staging
View File

@ -1,5 +1,5 @@
# 页面标题 # 页面标题
VUE_APP_TITLE = RuoyiCRM VUE_APP_TITLE = 众悦CRM
NODE_ENV = production NODE_ENV = production

2
ruoyi-ui/src/settings.js
View File

@ -12,7 +12,7 @@ module.exports = {
/** /**
* 是否显示顶部导航 * 是否显示顶部导航
*/ */
topNav: true, topNav: false,
/** /**
* 是否显示 tagsView * 是否显示 tagsView

80
ruoyi-ui/src/views/index.vue
View File

@ -131,7 +131,7 @@
<!-- <div class='title'>交易漏斗模型</div>--> <!-- <div class='title'>交易漏斗模型</div>-->
<div class='flexstart' style="position:relative;width:1200px; height: 400px"> <div class='flexstart' style="position:relative;width:1200px; height: 400px">
<!-- <div ref="myechart" style="position:relative;width: 1200px; height: 400px;z-index:2"></div>--> <!-- <div ref="myechart" style="position:relative;width: 1200px; height: 400px;z-index:2"></div>-->
<div ref="myechart" style="position:relative;z-index:2;width: 1200px; height: 400px"></div> <div ref="myechart" style="position:relative;z-index:2;width:1200px; height: 400px;"></div>
<div class='conversionBoxAsk flexstart coversionBox'> <div class='conversionBoxAsk flexstart coversionBox'>
<div class='lineBox'> <div class='lineBox'>
<i style='color:#c0c0c0;' class='el-icon-arrow-left icons'></i> <i style='color:#c0c0c0;' class='el-icon-arrow-left icons'></i>
@ -139,8 +139,8 @@
<div class='line'></div> <div class='line'></div>
</div> </div>
<div> <div>
<div class='titles'>访问加购转化率</div> <div class='titles'>转化率</div>
<div class='nums'>53.13%</div> <div class='nums'>80.00%</div>
</div> </div>
</div> </div>
<div class='conversionBoxAdd flexstart coversionBox'> <div class='conversionBoxAdd flexstart coversionBox'>
@ -150,8 +150,8 @@
<div class='line'></div> <div class='line'></div>
</div> </div>
<div> <div>
<div class='titles'>访问加购转化率</div> <div class='titles'>转化率</div>
<div class='nums'>53.13%</div> <div class='nums'>75.00%</div>
</div> </div>
</div> </div>
<div class='conversionBoxBuy flexstart coversionBox'> <div class='conversionBoxBuy flexstart coversionBox'>
@ -161,8 +161,8 @@
<div class='line'></div> <div class='line'></div>
</div> </div>
<div> <div>
<div class='titles'>访问加购转化率</div> <div class='titles'>转化率</div>
<div class='nums'>53.13%</div> <div class='nums'>83.33%</div>
</div> </div>
</div> </div>
<div class='conversionBoxOut flexstart coversionBox'> <div class='conversionBoxOut flexstart coversionBox'>
@ -172,8 +172,8 @@
<div class='line'></div> <div class='line'></div>
</div> </div>
<div> <div>
<div class='titles'>访问加购转化率</div> <div class='titles'>转化率</div>
<div class='nums'>53.13%</div> <div class='nums'>50.00%</div>
</div> </div>
</div> </div>
</div> </div>
@ -211,7 +211,7 @@
<div slot="header" class="clearfix"> <div slot="header" class="clearfix">
<span>业绩销售额</span> <span>业绩销售额</span>
</div> </div>
<div ref="chart" style="max-width: 1600px;height:390px;"></div> <div ref="chart" style="width:auto;height:390px;"></div>
</el-card> </el-card>
</el-col> </el-col>
@ -585,12 +585,19 @@ export default {
// let that = this // let that = this
let myChart = ECharts.init(this.$refs.myechart); let myChart = ECharts.init(this.$refs.myechart);
let option = { let option = {
grid: {
// right: '10%',
containLabel:true,
left: '100', // 设置图表距离左侧的距离
// top: '10%', // 设置图表距离顶部的距离
// bottom: '10%',
},
title: { title: {
text: '客户转化漏斗' text: '客户转化漏斗'
}, },
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
position: 'right',
formatter(e){ formatter(e){
return `${e.name} : ${e.data.values}` return `${e.name} : ${e.data.values}`
} }
@ -670,23 +677,23 @@ export default {
}, },
data: [{ data: [{
value: 80, value: 80,
name: '访客数', name: '客户数',
values:100 values:100
}, },
{ {
value: 60, value: 60,
name: '加购人数', name: '产出商机客户数',
values:80 values:80
}, },
{ {
value: 40, value: 40,
name: '下单人数', name: '合同签订客户数',
values:60 values:60
}, },
{ {
value: 20, value: 20,
name: '支付人数', name: '已回款客户数',
values:80 values:50
}, },
] ]
}, },
@ -717,22 +724,22 @@ export default {
}, },
data: [{ data: [{
value: 80, value: 80,
name: '访客数', name: '客户数',
values:100 values:100
}, },
{ {
value: 60, value: 60,
name: '加购人数', name: '产出商机客户数',
values:80 values:80
}, },
{ {
value: 40, value: 40,
name: '下单人数', name: '合同签订客户数',
values:60 values:60
}, },
{ {
value: 20, value: 20,
name: '支付人数', name: '已回款客户数',
values:40 values:40
}, },
] ]
@ -779,23 +786,23 @@ export default {
}, },
data: [{ data: [{
value: 80, value: 80,
name: '访客数', name: '客户数',
values:100 values:100
}, },
{ {
value: 60, value: 60,
name: '加购人数', name: '产出商机客户数',
values:80 values:80
}, },
{ {
value: 40, value: 40,
name: '下单人数', name: '合同签订客户数',
values:60 values:60
}, },
{ {
value: 20, value: 20,
name: '支付人数', name: '已回款客户数',
values:80 values:50
}, },
], ],
z: 100 z: 100
@ -824,7 +831,7 @@ export default {
// }, // },
// tooltip: {}, // tooltip: {},
legend: { legend: {
data: ['业绩金额'] data: ['业绩金额','订单金额']
}, },
xAxis: { xAxis: {
data: ["2023年1月", "2023年2月", "2023年3月","2023年4月", "2023年5月", "2023年6月", "2023年7月","2023年8月", data: ["2023年1月", "2023年2月", "2023年3月","2023年4月", "2023年5月", "2023年6月", "2023年7月","2023年8月",
@ -833,11 +840,24 @@ export default {
yAxis: { yAxis: {
// data: [50000, 100000, 150000, 200000, 250000, 300000] // data: [50000, 100000, 150000, 200000, 250000, 300000]
}, },
series: [{ series: [
{
name: '业绩金额', name: '业绩金额',
type: 'line', type: 'line',
smooth: true,
data: [50000, 100000, 150000, 200000, 250000, 300000,50000, 100000, 150000, 200000, 250000, 300000,50000, 100000,150000] data: [50000, 100000, 150000, 200000, 250000, 300000,50000, 100000, 150000, 200000, 250000, 300000,50000, 100000,150000]
}] },
{
name: '订单金额',
type: 'line',
smooth: true,
areaStyle: {
color: '#e3e3d5',
opacity: 0.5
},
data: [250000, 300000,50000, 100000, 150000,50000, 100000, 150000, 300000,50000, 100000, 150000]
},
]
}; };
// 使用刚指定的配置项和数据显示图表。 // 使用刚指定的配置项和数据显示图表。
myChart.setOption(option); myChart.setOption(option);
@ -871,8 +891,10 @@ export default {
align-items: center; align-items: center;
} }
.headerBox { .headerBox {
min-width: 1200px; //min-width: 1200px;
//width: 1200px;
// padding: 20px 24px; // padding: 20px 24px;
max-width: 1200px;
margin-bottom: 16px; margin-bottom: 16px;
background: #fff; background: #fff;