Skip to content

S
SuperMan
Commit db074cd4 authored by liudong1993's avatar liudong1993
Browse files
Options

Merge branch 'master' of http://gitlab.oytour.com/luochao/superman

parents 088cca40 3c4bfc2f
Hide whitespace changes
Inline Side-by-side
Showing with 1605 additions and 6 deletions
src/assets/css/Semibold.css
View file @ db074cd4
...@@ -49,10 +49,10 @@ ...@@ -49,10 +49,10 @@
font-family:'方正宋三简体'; font-family:'方正宋三简体';
src:url('../webfont/FZSSJ.ttf') format('truetype') src:url('../webfont/FZSSJ.ttf') format('truetype')
} }
@font-face{ /* @font-face{
font-family:'PingFang SC'; font-family:'PingFang SC';
src:url('../webfont/Semibold.woff') format('woff') src:url('../webfont/Semibold.woff') format('woff')
} } */
@font-face{ @font-face{
font-family:'PingFang SC Regular'; font-family:'PingFang SC Regular';
src:url('../webfont/pingfang.ttf') format('truetype') src:url('../webfont/pingfang.ttf') format('truetype')
......
src/components/activity/CouponList.vue
View file @ db074cd4
...@@ -192,12 +192,13 @@ ...@@ -192,12 +192,13 @@
</td> </td>
<td>{{item.expirationDate}}</td> <td>{{item.expirationDate}}</td>
<td> <td>
<span v-if="item.couponsUseScope == 1">{{$t('MarketingActi.alltongyong')}}</span> {{item.couponsUseScope.couponsUseScope}}
<!-- <span v-if="item.couponsUseScope == 1">{{$t('MarketingActi.alltongyong')}}</span>
<span v-if="item.couponsUseScope == 2">{{$t('active.cl_team')}}</span> <span v-if="item.couponsUseScope == 2">{{$t('active.cl_team')}}</span>
<span v-if="item.couponsUseScope == 3">{{$t('active.cl_qianzheng')}}</span> <span v-if="item.couponsUseScope == 3">{{$t('active.cl_qianzheng')}}</span>
<span v-if="item.couponsUseScope == 4">{{$t('active.cl_jipiao')}}</span> <span v-if="item.couponsUseScope == 4">{{$t('active.cl_jipiao')}}</span>
<span v-if="item.couponsUseScope == 5">{{$t('scen.sc_piao')}}</span> <span v-if="item.couponsUseScope == 5">{{$t('scen.sc_piao')}}</span>
<span v-if="item.couponsUseScope == 6">{{$t('MarketingActi.car')}}</span> <span v-if="item.couponsUseScope == 6">{{$t('MarketingActi.car')}}</span> -->
</td> </td>
<td> <td>
<span v-if="item.couponStatus == 1" style="color: green">{{$t('pub.normalSel')}}</span> <span v-if="item.couponStatus == 1" style="color: green">{{$t('pub.normalSel')}}</span>
......
src/components/rank/components/citiescount.vue 0 → 100644
View file @ db074cd4
<template>
<div id="citiesCount" style="width: 100%; height: 100%;"></div>
</template>
<script>
import echarts from 'echarts';
export default {
name: 'CustomChart',
data() {
return {
chart: null,
};
},
props: {
chartData: {
type: Object,
default: null
}
},
mounted() {
this.initChart();
},
methods: {
initChart() {
const chartDom = document.getElementById('citiesCount');
this.chart = echarts.init(chartDom);
const option = {
tooltip: {
trigger: 'item'
},
color: [
'#04cf89', '#6184fa', '#faa42e', '#ffd1ce',
'#8dd1e1', '#f95d6a', '#2ca02c', '#ff7f0e',
'#9467bd', '#bcbd22'
],
grid: {
left: 0,
right: 0,
top: 3,
bottom: 3,
containLabel: true,
},
series: [
{
name: 'Access From',
type: 'pie',
radius: ['70%', '90%'], // 饼图内外半径
avoidLabelOverlap: false, // 避免标签重叠
itemStyle: {
barBorderRadius: [10, 10, 0, 0],
borderWidth: 5, // 设置扇形之间的间隙宽度
borderColor: '#fff', // 扇形间隙颜色（通常设置为白色以突出间隙）
},
label: {
show: false, // 默认不显示标签
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: 15,
FontFace: 'PingFang SC Regular'
}
},
labelLine: {
show: false // 不显示标签指示线
},
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
]
}
]
};
this.chart.setOption(option);
},
resizeChart() {
if (this.chart) {
this.chart.resize();
}
},
calculateInterval(length) {
if (length <= 10) {
return 0; // 数据较少时全部显示
} else if (length <= 20) {
return 1; // 每两个显示一个
} else if (length <= 30) {
return 2; // 每三个显示一个
} else {
return Math.floor(length / 10); // 根据数据数量动态计算间隔
}
},
},
destroyed() {
if (this.chart) {
this.chart.dispose();
}
},
};
</script>
<style scoped>
#chart {
width: 100%;
height: 100%;
}
</style>
\ No newline at end of file
src/components/rank/components/coreview.vue 0 → 100644
View file @ db074cd4
<template>
<div id="coreview" style="width: 100%; height: 100%;"></div>
</template>
<script>
import echarts from 'echarts';
export default {
name: 'CustomChart',
data() {
return {
chart: null,
lineData: {
name: '新增激活数',
data: [105, 219, 142, 297, 176, 84, 233, 120, 265, 199, 207, 91, 251, 153, 281, 113, 224, 168, 246, 131, 273, 185, 99, 237, 147, 292, 109, 214, 171, 260],
},
xAxisData: [
'11/01', '11/02', '11/03', '11/04', '11/05',
'11/06', '11/07', '11/08', '11/09', '11/10',
'11/11', '11/12', '11/13', '11/14', '11/15',
'11/16', '11/17', '11/18', '11/19', '11/20',
'11/21', '11/22', '11/23', '11/24', '11/25',
'11/26', '11/27', '11/28', '11/29', '11/30'
],
unit: '人'
};
},
props: {
chartData: {
type: Object,
default: null
}
},
mounted() {
if (this.chartData) {
this.lineData = this.chartData.lineData;
this.unit = this.chartData.unit;
this.xAxisData = this.chartData.xAxisData;
}
this.initChart();
},
methods: {
initChart() {
const chartDom = document.getElementById('coreview');
this.chart = echarts.init(chartDom);
const option = {
tooltip: {
trigger: 'axis', // 设置为 'axis' 以确保鼠标悬浮在曲线任意位置时都能触发事件
axisPointer: {
type: 'line', // 使用竖线跟随鼠标
lineStyle: {
color: '#00000022',
width: 1,
type: 'dashed',
}
},
},
grid: {
left: 0,
right: 0,
top: 10,
bottom: 0,
containLabel: true,
},
xAxis: {
type: 'category',
data: this.xAxisData,
axisLine: {
lineStyle: {
color: '#eee',
},
},
xAxisLabel: {
show: true,
color: '#999',
},
axisLabel: {
color: '#121212',
interval: this.calculateInterval(this.xAxisData.length)
},
axisTick: {
show: false,
},
axisPointer: {
type: 'line'
}
},
yAxis: {
type: 'value',
name: '',
axisLine: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: '#eee',
},
},
axisTick: {
show: false,
},
axisLabel: {
formatter: '{value} ' + this.unit,
},
},
series: [
{
name: this.lineData.name,
type: 'line',
smooth: true,
areaStyle: {
// Add gradient color for the area
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#e4f9f0' },
{ offset: 1, color: '#ffffff' }
]),
},
lineStyle: {
color: '#04cf89',
width: 2,
},
itemStyle: {
color: '#04cf89',
},
symbol: 'circle',
symbolSize: 2,
data: this.lineData.data,
},
],
};
this.chart.setOption(option);
},
resizeChart() {
if (this.chart) {
this.chart.resize();
}
},
calculateInterval(length) {
if (length <= 10) {
return 0; // 数据较少时全部显示
} else if (length <= 20) {
return 1; // 每两个显示一个
} else if (length <= 30) {
return 2; // 每三个显示一个
} else {
return Math.floor(length / 10); // 根据数据数量动态计算间隔
}
},
},
destroyed() {
if (this.chart) {
this.chart.dispose();
}
},
};
</script>
<style scoped>
#chart {
width: 100%;
height: 100%;
}
</style>
\ No newline at end of file
src/components/rank/components/customer.vue 0 → 100644
View file @ db074cd4
<template>
<div id="chart" style="width: 100%; height: 100%;"></div>
</template>
<script>
import echarts from 'echarts';
export default {
name: 'CustomChart',
data() {
return {
chart: null,
barData: {
name: '新增同业数',
data: [],
},
lineData: {
name: '新增激活数',
data: [],
},
xAxisData: [],
unit: '人',
};
},
props: {
chartData: {
type: Object,
default: null
}
},
watch: {
chartData: function (old, val) {
if (this.chartData) {
this.barData.data = this.chartData.customerYData;
this.lineData.data = this.chartData.activationYData;
this.xAxisData = this.chartData.xData;
}
this.initChart();
}
},
mounted() {
// this.unit = this.chartData.unit;
if (this.chartData) {
this.barData.data = this.chartData.customerYData;
this.lineData.data = this.chartData.activationYData;
this.xAxisData = this.chartData.xData;
}
this.initChart();
},
methods: {
initChart() {
const chartDom = document.getElementById('chart');
this.chart = echarts.init(chartDom);
const option = {
tooltip: {
trigger: 'axis', // 设置为 'axis' 以确保鼠标悬浮在曲线任意位置时都能触发事件
axisPointer: {
type: 'line', // 使用竖线跟随鼠标
lineStyle: {
color: '#00000022',
width: 1,
type: 'dashed',
}
},
},
legend: {
bottom: 10,
icon: 'circle',
itemWidth: 8,
itemHeight: 8,
textStyle: {
fontSize: 12,
},
data: [this.barData.name, this.lineData.name],
},
grid: {
left: 0,
right: 0,
top: 30,
bottom: 40,
containLabel: true,
},
xAxis: {
type: 'category',
data: this.xAxisData,
axisLine: {
lineStyle: {
color: '#eee',
},
},
xAxisLabel: {
show: true,
color: '#999',
},
axisLabel: {
color: '#121212',
interval: this.calculateInterval(this.xAxisData.length)
},
axisTick: {
show: false,
},
axisPointer: {
type: 'line'
}
},
yAxis: {
type: 'value',
name: '',
axisLine: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: '#eee',
},
},
axisTick: {
show: false,
},
axisLabel: {
formatter: '{value} ' + this.unit,
},
},
series: [{
name: this.barData.name,
type: 'bar',
barWidth: 20,
itemStyle: {
color: '#6184fa',
barBorderRadius: [4, 4, 0, 0]
},
data: this.barData.data,
},
{
name: this.lineData.name,
type: 'line',
smooth: true,
lineStyle: {
color: '#04cf89',
width: 2,
},
itemStyle: {
color: '#04cf89',
},
symbol: 'circle',
symbolSize: 2,
data: this.lineData.data,
},
],
};
this.chart.setOption(option);
},
setOpacity(seriesName) {
const option = this.chart.getOption();
option.series.forEach((series) => {
console.log(series.name, seriesName + '----')
if (seriesName == '') {
if (series.itemStyle) series.itemStyle.opacity = 1;
if (series.lineStyle) series.lineStyle.opacity = 1;
} else if (series.name != seriesName) {
if (series.itemStyle) series.itemStyle.opacity = 0.1;
if (series.lineStyle) series.lineStyle.opacity = 0.1;
}
});
this.chart.setOption(option);
},
resizeChart() {
if (this.chart) {
this.chart.resize();
}
},
calculateInterval(length) {
if (length <= 10) {
return 0; // 数据较少时全部显示
} else if (length <= 20) {
return 1; // 每两个显示一个
} else if (length <= 30) {
return 2; // 每三个显示一个
} else {
return Math.floor(length / 10); // 根据数据数量动态计算间隔
}
},
},
destroyed() {
if (this.chart) {
this.chart.dispose();
}
},
};
</script>
<style scoped>
#chart {
width: 100%;
height: 100%;
}
</style>
src/components/rank/components/pagecount.vue 0 → 100644
View file @ db074cd4
<template>
<div id="pageChart" style="width: 100%; height: 100%;"></div>
</template>
<script>
import echarts from 'echarts';
export default {
name: 'CustomChart',
data() {
return {
chart: null,
barData: {
name: '新增同业数',
data: [123, 211, 178, 289, 90, 156, 222, 101, 267, 199],
},
xAxisData: [
'11/01', '11/02', '11/03', '11/04', '11/05','11/06', '11/07', '11/08', '11/09', '11/10','11/11', '11/12'
],
unit: '人',
};
},
props: {
chartData: {
type: Object,
default: null
}
},
mounted() {
if (this.chartData) {
this.barData = this.chartData.barData;
this.lineData = this.chartData.lineData;
this.unit = this.chartData.unit;
this.xAxisData = this.chartData.xAxisData;
}
this.initChart();
},
methods: {
initChart() {
const chartDom = document.getElementById('pageChart');
this.chart = echarts.init(chartDom);
const option = {
tooltip: {
trigger: 'axis', // 设置为 'axis' 以确保鼠标悬浮在曲线任意位置时都能触发事件
axisPointer: {
type: 'line', // 使用竖线跟随鼠标
lineStyle: {
color: '#00000022',
width: 1,
type: 'dashed',
}
},
},
grid: {
right: 0,
top: 0,
bottom: 0,
},
yAxis: {
type: 'category',
data: this.xAxisData,
axisLine: {
lineStyle: {
color: '#eee',
},
},
xAxisLabel: {
show: true,
color: '#999',
},
axisLabel: {
color: '#121212',
interval: this.calculateInterval(this.xAxisData.length)
},
axisTick: {
show: false,
},
axisPointer: {
type: 'line'
}
},
xAxis: {
type: 'value',
name: '',
axisLine: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: '#eee',
},
},
axisTick: {
show: false,
},
axisLabel: {
formatter: '{value} ' + this.unit,
},
},
series: [
{
name: this.barData.name,
type: 'bar',
barWidth: 10,
itemStyle: {
color: '#04cf89',
barBorderRadius: [0, 4, 4, 0]
},
data: this.barData.data,
}
],
};
this.chart.setOption(option);
},
resizeChart() {
if (this.chart) {
this.chart.resize();
}
},
calculateInterval(length) {
if (length <= 10) {
return 0; // 数据较少时全部显示
} else if (length <= 20) {
return 1; // 每两个显示一个
} else if (length <= 30) {
return 2; // 每三个显示一个
} else {
return Math.floor(length / 10); // 根据数据数量动态计算间隔
}
},
},
destroyed() {
if (this.chart) {
this.chart.dispose();
}
},
};
</script>
<style scoped>
#chart {
width: 100%;
height: 100%;
}
</style>
\ No newline at end of file
src/components/rank/components/tradecount.vue 0 → 100644
View file @ db074cd4
<template>
<div id="tradecount" style="width: 100%; height: 100%;"></div>
</template>
<script>
import echarts from 'echarts';
export default {
name: 'CustomChart',
data() {
return {
chart: null,
barData: {
name: '新增同业数',
data: [123, 211, 178, 289, 90, 156, 222, 101, 267, 199, 125, 291, 187, 92, 243, 148, 212, 117, 279, 103, 137, 256, 221, 193, 88, 283, 165, 111, 239, 107],
},
lineData: {
name: '新增激活数',
data: [105, 219, 142, 297, 176, 84, 233, 120, 265, 199, 207, 91, 251, 153, 281, 113, 224, 168, 246, 131, 273, 185, 99, 237, 147, 292, 109, 214, 171, 260],
},
xAxisData: [
'11/01', '11/02', '11/03', '11/04', '11/05',
'11/06', '11/07', '11/08', '11/09', '11/10',
'11/11', '11/12', '11/13', '11/14', '11/15',
'11/16', '11/17', '11/18', '11/19', '11/20',
'11/21', '11/22', '11/23', '11/24', '11/25',
'11/26', '11/27', '11/28', '11/29', '11/30'
],
unit: '人',
};
},
props: {
chartData: {
type: Object,
default: null
}
},
mounted() {
if (this.chartData) {
this.barData = this.chartData.barData;
this.lineData = this.chartData.lineData;
this.unit = this.chartData.unit;
this.xAxisData = this.chartData.xAxisData;
}
this.initChart();
},
methods: {
initChart() {
const chartDom = document.getElementById('tradecount');
this.chart = echarts.init(chartDom);
const option = {
tooltip: {
trigger: 'axis', // 鼠标悬浮时触发
axisPointer: {
type: 'shadow', // 使用阴影指示
},
},
legend: {
bottom: 10,
icon: 'circle',
itemWidth: 8,
itemHeight: 8,
textStyle: {
fontSize: 12,
},
data: [this.barData.name, this.lineData.name],
},
grid: {
left: 0,
right: 0,
top: 30,
bottom: 40,
containLabel: true,
},
xAxis: {
type: 'category',
data: this.xAxisData,
axisLine: {
lineStyle: {
color: '#eee',
},
},
axisLabel: {
color: '#121212',
interval: this.calculateInterval(this.xAxisData.length),
},
axisTick: {
show: false,
},
},
yAxis: {
type: 'value',
name: '',
axisLine: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: '#eee',
},
},
axisTick: {
show: false,
},
axisLabel: {
formatter: '{value} ' + this.unit,
},
},
series: [
{
name: this.barData.name,
type: 'bar',
stack: 'total', // 设置堆叠
barWidth: 10,
itemStyle: {
color: '#6184fa',
arBorderRadius: [2, 2, 0, 0]
},
data: this.barData.data,
},
{
name: this.lineData.name,
type: 'bar',
stack: 'total', // 设置堆叠
barWidth: 10,
itemStyle: {
color: '#04cf89',
barBorderRadius: [2, 2, 0, 0]
},
data: this.lineData.data,
},
],
};
this.chart.setOption(option);
},
resizeChart() {
if (this.chart) {
this.chart.resize();
}
},
calculateInterval(length) {
if (length <= 10) {
return 0; // 数据较少时全部显示
} else if (length <= 20) {
return 1; // 每两个显示一个
} else if (length <= 30) {
return 2; // 每三个显示一个
} else {
return Math.floor(length / 10); // 根据数据数量动态计算间隔
}
},
},
destroyed() {
if (this.chart) {
this.chart.dispose();
}
},
};
</script>
<style scoped>
#tradecount {
width: 100%;
height: 100%;
}
</style>
src/components/rank/dataCount.vue 0 → 100644
View file @ db074cd4
<template>
<div class="full-box">
<div class="data-box" style="padding-bottom: 20px;">
<div class="row items-center" style="margin-bottom: 20px;">
<div class="page-title col">平台数据</div>
<div class="row items-center">
<el-select v-model="parameters.branchId" style="margin-right: 20px;" @change="getCustomerStatic()">
<el-option v-for="(x,i) in branchs" :key="i" :label="x.BName" :value="x.Id"></el-option>
</el-select>
<el-date-picker v-model="parameters.dateRange" type="daterange" align="right" unlink-panels
@change="getCustomerStatic()" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
value-format="yyyy/MM/dd" :clearable="false" :picker-options="pickerOptions">
</el-date-picker>
</div>
</div>
<div class="card rounded row items-center">
<div class="menu-item" :class="{'active':i==active}" v-for="(x,i) in menus" :key="i" @click="handleClick(i)">
{{ x.title }}</div>
</div>
<div class="sub-title q-my-md">今日实时数据</div>
<div class="card rounded big">
<div style="margin: 0 12px;">
<div class="sub-title">今日客户数据</div>
<div class="">
<span class="dot"></span>
<span class="text-info">数据更新：实时</span>
</div>
</div>
<div class="q-mt-md row items-center">
<div class="data-items col">
<div>客户总数</div>
<div class="num" style="margin: 6px 0;">
<span class="datanum">
<template v-if="customerObj">
{{customerObj.TotalCustomerCount}}
</template>
</span>
<span>个</span>
</div>
<div class="text-info"> &nbsp; </div>
</div>
<el-divider direction="vertical" style="margin: 0 12px;height: 80%;"></el-divider>
<div class="data-items col">
<div>今日新增客户</div>
<div class="num" style="margin: 6px 0;">
<span class="datanum">
<template v-if="customerObj">
{{customerObj.TodayCustomerCount}}
</template>
</span>
<span>个</span>
</div>
<div class="text-info">
<span>较昨日</span>
<template v-if="customerObj">
<template v-if="customerObj.CustomerPercent>0">
<span class="green" style="margin:0 12px 0 5px;"> {{customerObj.CustomerPercent}}%</span>
</template>
<template v-else>
<span class="red" style="margin-left: 5px;">{{customerObj.CustomerPercent}}%</span>
</template>
</template>
</div>
</div>
<el-divider direction="vertical" style="margin: 0 12px;"></el-divider>
<div class="data-items col">
<div>小程序激活数</div>
<div class="num" style="margin: 6px 0;">
<span class="datanum">
<template v-if="customerObj">
{{customerObj.TotalActivationCount}}
</template></span>
<span>个</span>
</div>
<div class="text-info">&nbsp;</div>
</div>
<el-divider direction="vertical" style="margin: 0 12px;"></el-divider>
<div class="data-items col">
<div>今日激活数</div>
<div class="num" style="margin: 6px 0;">
<span class="datanum"><template v-if="customerObj">
{{customerObj.TodayActivationCount}}
</template></span>
<span>个</span>
</div>
<div class="text-info">
<span>较昨日</span>
<template v-if="customerObj">
<template v-if="customerObj.ActivationPrecent>0">
<span class="green" style="margin:0 12px 0 5px;"> {{customerObj.ActivationPrecent}}%</span>
</template>
<template v-else>
<span class="red" style="margin-left: 5px;"> {{customerObj.ActivationPrecent}}%</span>
</template>
</template>
</div>
</div>
</div>
</div>
<div class="card rounded big q-mt-md">
<div style="margin: 0 12px;">
<div class="sub-title">客户数据走势</div>
<div class="">
<span class="dot"></span>
<span class="text-info">{{ parameters.dateRange.join('-') }}</span>
</div>
</div>
<div style="height: 320px;">
<Customer :chartData="customerObj"></Customer>
</div>
</div>
<div class="sub-title q-my-md green">交易核心数据</div>
<div class="card rounded big">
<div class="row items-center">
<div style="margin: 0 12px;" class="col">
<div class="sub-title">今日客户数据</div>
<div class="">
<span class="dot"></span>
<span class="text-info">{{ parameters.dateRange.join(' - ') }}</span>
</div>
</div>
<el-select v-model="platformId" style="width: 140px;">
<el-option v-for="(x,i) in platforms" :key="i" :label="x.Name" :value="x.Id"></el-option>
</el-select>
</div>
<div class="q-mt-md row items-center">
<div class="data-items col">
<div>交易金额</div>
<div class="num" style="margin: 6px 0;">
<span class="datanum">5000000.00</span>
<span>元</span>
</div>
</div>
<el-divider direction="vertical" style="margin: 0 12px;height: 80%;"></el-divider>
<div class="data-items col">
<div>收客人数</div>
<div class="num" style="margin: 6px 0;">
<span class="datanum">89</span>
<span>人</span>
</div>
</div>
<el-divider direction="vertical" style="margin: 0 12px;"></el-divider>
<div class="data-items col">
<div>订单数</div>
<div class="num" style="margin: 6px 0;">
<span class="datanum">455</span>
<span>个</span>
</div>
</div>
<el-divider direction="vertical" style="margin: 0 12px;"></el-divider>
<div class="data-items col">
<div>用卷订单数</div>
<div class="num" style="margin: 6px 0;">
<span class="datanum">26052</span>
<span>个</span>
</div>
</div>
</div>
</div>
<div class="card rounded big q-mt-md">
<div style="margin: 0 12px;">
<div class="sub-title">交易趋势图</div>
<div class="">
<span class="dot"></span>
<span class="text-info">{{ parameters.dateRange.join(' - ') }}</span>
</div>
</div>
<div style="height: 320px;">
<Tradecount></Tradecount>
</div>
</div>
<div class="sub-title q-my-md green">访问核心数据</div>
<div class="card rounded big">
<div style="margin: 0 12px;">
<div class="sub-title">用户活跃概况</div>
<div class="">
<span class="dot"></span>
<span class="text-info">数据更新：{{ parameters.dateRange[1] }}</span>
</div>
</div>
<div class="q-mt-md row items-center">
<div class="data-items col">
<div>小程序累计用户数</div>
<div class="num" style="margin: 6px 0;">
<span class="datanum">26052</span>
<span>人</span>
</div>
<div class="text-info">
<span>较昨日</span>
<span class="green" style="margin:0 12px 0 5px;">+23%</span>
<span>较七日前</span>
<span class="red" style="margin-left: 5px;">-125%</span>
</div>
</div>
<el-divider direction="vertical" style="margin: 0 12px;height: 80%;"></el-divider>
<div class="data-items col">
<div>日访问人数</div>
<div class="num" style="margin: 6px 0;">
<span class="datanum">89</span>
<span>人</span>
</div>
<div class="text-info">
<span>较昨日</span>
<span class="green" style="margin:0 12px 0 5px;">+23%</span>
<span>较七日前</span>
<span class="red" style="margin-left: 5px;">-125%</span>
</div>
</div>
<el-divider direction="vertical" style="margin: 0 12px;"></el-divider>
<div class="data-items col">
<div>日打开次数</div>
<div class="num" style="margin: 6px 0;">
<span class="datanum">455</span>
<span>人</span>
</div>
<div class="text-info">
<span>较昨日</span>
<span class="green" style="margin:0 12px 0 5px;">+23%</span>
<span>较七日前</span>
<span class="red" style="margin-left: 5px;">-125%</span>
</div>
</div>
<el-divider direction="vertical" style="margin: 0 12px;"></el-divider>
<div class="data-items col">
<div>日访问页面数</div>
<div class="num" style="margin: 6px 0;">
<span class="datanum">26052</span>
<span>个</span>
</div>
<div class="text-info">
<span>较昨日</span>
<span class="green" style="margin:0 12px 0 5px;">+23%</span>
<span>较七日前</span>
<span class="red" style="margin-left: 5px;">-125%</span>
</div>
</div>
</div>
</div>
<div class="q-mt-md row items-center">
<div class="card rounded big col q-mr-md">
<div style="margin: 0 12px;">
<div class="sub-title">新增用户概况</div>
<div class="">
<span class="dot"></span>
<span class="text-info">数据更新：{{ parameters.dateRange[1]}}</span>
</div>
</div>
<div class="q-mt-md row items-center">
<div class="data-items col">
<div>日新增用户</div>
<div class="num" style="margin: 6px 0;">
<span class="datanum">26052</span>
<span>人</span>
</div>
<div class="text-info">
<span>较昨日</span>
<span class="green" style="margin:0 12px 0 5px;">+23%</span>
<span>较七日前</span>
<span class="red" style="margin-left: 5px;">-125%</span>
</div>
</div>
<el-divider direction="vertical" style="margin: 0 12px;height: 80%;"></el-divider>
<div class="data-items col">
<div>日转发次数</div>
<div class="num" style="margin: 6px 0;">
<span class="datanum">89</span>
<span>人</span>
</div>
<div class="text-info">
<span>较昨日</span>
<span class="green" style="margin:0 12px 0 5px;">+23%</span>
<span>较七日前</span>
<span class="red" style="margin-left: 5px;">-125%</span>
</div>
</div>
</div>
</div>
<div class="card rounded big col">
<div style="margin: 0 12px;">
<div class="sub-title">小程序留存概况</div>
<div class="">
<span class="dot"></span>
<span class="text-info">数据更新： {{ parameters.dateRange[1] }}</span>
</div>
</div>
<div class="q-mt-md row items-center">
<div class="data-items col">
<div>新增用户留存</div>
<div class="num" style="margin: 6px 0;">
<span class="datanum">26052</span>
<span>人</span>
</div>
<div class="text-info">
<span>较昨日</span>
<span class="green" style="margin:0 12px 0 5px;">+23%</span>
<span>较七日前</span>
<span class="red" style="margin-left: 5px;">-125%</span>
</div>
</div>
<el-divider direction="vertical" style="margin: 0 12px;height: 80%;"></el-divider>
<div class="data-items col">
<div>活跃用户留存数</div>
<div class="num" style="margin: 6px 0;">
<span class="datanum">89</span>
<span>人</span>
</div>
<div class="text-info">
<span>较昨日</span>
<span class="green" style="margin:0 12px 0 5px;">+23%</span>
<span>较七日前</span>
<span class="red" style="margin-left: 5px;">-125%</span>
</div>
</div>
</div>
</div>
</div>
<div class="card rounded big q-mt-md">
<div style="margin: 0 12px; " class="row items-center">
<div class="col">
<div class="sub-title">访问核心指标趋势</div>
<div class="">
<span class="text-info">{{ parameters.dateRange.join(' - ') }}</span>
</div>
</div>
<el-select v-model="coreId" style="width: 120px;">
<el-option v-for="(x,i) in coreLists" :key="i" :label="x.Name" :value="x.Id"></el-option>
</el-select>
</div>
<div class="text-small q-my-md" style="padding:0 12px;">平均：22.7</div>
<div style="height: 320px; padding:0 12px">
<Coreview></Coreview>
</div>
</div>
<div class="q-mt-md row">
<div class="card rounded big col">
<div style="margin: 0 12px; " class="row items-center">
<div class="col">
<div class="sub-title">页面访问Top10</div>
<div class="">
<span class="text-info">{{ parameters.dateRange.join(' - ') }}</span>
</div>
</div>
<el-select v-model="metricsId" style="width: 140px;">
<el-option v-for="(x,i) in metrics" :key="i" :label="x.name" :value="x.id"></el-option>
</el-select>
</div>
<div style="height: 320px; padding:0 12px;" class="q-mt-md">
<Pagecount></Pagecount>
</div>
</div>
<div class="card rounded big col q-ml-md">
<div style="margin: 0 12px; " class="row items-center">
<div class="col">
<div class="sub-title">客户分布占比</div>
<div class="">
<span class="text-info">{{ parameters.dateRange.join(' - ') }}</span>
</div>
</div>
<el-select v-model="areaId" style="width: 140px;">
<el-option v-for="(x,i) in areas" :key="i" :label="x.Name" :value="x.Id"></el-option>
</el-select>
</div>
<div style="height: 320px; padding:0 12px;" class="q-mt-md">
<Citiescount></Citiescount>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Customer from './components/customer.vue'
import Coreview from './components/coreview.vue';
import Pagecount from './components/pagecount.vue';
import Citiescount from './components/citiescount.vue'
import Tradecount from './components/tradecount.vue'
export default {
components: {
Customer,
Coreview,
Pagecount,
Citiescount,
Tradecount
},
data() {
return {
active: 0,
pickerOptions: {
shortcuts: [{
text: '最近一周',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近一个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近三个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit('pick', [start, end]);
}
}],
disabledDate(time) {
return time.getTime() > new Date(Date.now() - 3600 * 1000 * 24);
},
},
menus: [{
title: '客户数据',
path: 'coreData'
},
{
title: '交易数据',
path: 'realTimeData'
},
{
title: '访问分析',
path: 'accessAnalysis'
},
{
title: '产品统计',
path: 'productStatistics'
}
],
branchs: [],
parameters: {
branchId: -1,
dateRange: [],
StartDate: "",
EndDate: "",
},
coreId: 1,
coreLists: [{
"Id": 1,
"Name": "累计用户数"
}, {
"Id": 2,
"Name": "日访问人数"
}, {
"Id": 3,
"Name": "日打开次数"
}, {
"Id": 4,
"Name": "日访问页面数"
}, {
"Id": 5,
"Name": "日新增用户"
}, {
"Id": 6,
"Name": "日打开次数(新用户)"
}, {
"Id": 7,
"Name": "总添加人数"
}, {
"Id": 8,
"Name": "新添加人数"
}, {
"Id": 9,
"Name": "活跃日留存"
}, {
"Id": 10,
"Name": "新增日留存"
}, {
"Id": 11,
"Name": "流失用户数"
}, {
"Id": 12,
"Name": "回流用户数"
}],
metrics: [{
id: 1,
name: "访问次数"
},
{
id: 2,
name: "访问人数"
},
{
id: 3,
name: "次均停留时长"
},
{
id: 4,
name: "进入页次数"
},
{
id: 5,
name: "退出页次数"
},
{
id: 6,
name: "转发次数"
},
{
id: 7,
name: "转发人数"
}
],
metricsId: 1,
areas: [{
Id: 1,
Name: '省份'
}, {
Id: 2,
Name: '城市'
}],
platforms: [{
Id: 1,
Name: '全部'
}, {
Id: 2,
Name: '旅小友'
}],
platformId: 1,
areaId: 1,
customerObj: {},
}
},
created() {
this.getCompanyList();
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
end.setTime(end.getTime() - 3600 * 1000 * 24);
this.parameters.dateRange = [start.toLocaleString().split(' ')[0], end.toLocaleString().split(' ')[0]]
},
mounted() {
this.getCustomerStatic();
},
methods: {
getCustomerStatic() {
if (this.parameters.dateRange && this.parameters.dateRange.length == 2) {
var tempArray = this.parameters.dateRange;
this.parameters.StartDate = tempArray[0];
this.parameters.EndDate = tempArray[1]
}
var that = this;
that.apipost("erp_post_GetCustomerStatic", that.parameters, (res) => {
console.log("res", res);
if (res.data.resultCode == 1) {
this.customerObj = res.data.data;
} else {
that.Error(res.data.message);
}
});
},
handleClick(index) {
this.active = index;
},
getCompanyList() {
const userInfo = this.getLocalStorage();
const RB_Group_id = userInfo.RB_Group_id;
const msg = {
Status: 0,
is_show: 0,
RB_Group_Id: RB_Group_id
}
this.apipost('admin_get_BranchGetList', msg, res => {
if (res.data.resultCode == 1) {
this.branchs = [{
Id: -1,
BName: '全部'
}]
this.branchs = this.branchs.concat(res.data.data)
}
}, err => {})
},
}
}
</script>
<style>
.full-box {
width: 100%;
height: 100%;
background: #f7f7f7;
padding: 20px;
box-sizing: border-box;
}
.full-box .dot {
color: #00ce8b;
amination: realtime 2s infinite;
-webkit-animation: realtime 2s infinite;
font-size: 27px;
vertical-align: 3px;
width: 4px;
height: 4px;
background-color: #00ce8b;
display: inline-block;
border-radius: 50%;
margin-right: 3px;
}
.full-box .text-info {
display: inline-block;
vertical-align: baseline;
font-size: 14px;
font-weight: 400;
color: rgba(0, 0, 0, .3);
font-family: Avenir, 'PingFang SC Regular';
}
.full-box .red {
color: #fa5151;
}
.full-box .green {
color: #00ce8b !important;
}
.full-box .el-divider {
height: 60px !important;
margin: 0 12px;
background: #f7f7f7;
}
.full-box .num {
font-family: Avenir;
}
.full-box .q-mt-md {
margin-top: 20px;
}
.full-box .q-mb-md {
margin-bottom: 20px;
}
.full-box .q-ml-md {
margin-left: 20px;
}
.full-box .q-mr-md {
margin-right: 20px;
}
.full-box .q-mx-md {
margin-right: 20px;
margin-left: 20px;
}
.full-box .q-my-md {
margin-top: 20px;
margin-bottom: 20px;
}
.full-box .page-title {
color: rgba(0, 0, 0, .9);
font-size: 24px;
font-weight: 500;
}
.full-box .data-box {
max-width: 1366px;
margin: 0 auto;
}
.full-box .card {
background: #fff;
padding: 16px 20px;
}
.full-box .card.big {
padding: 32px 20px;
}
.full-box .menu-item {
margin-right: 30px;
font-size: 17px;
color: rgba(0, 0, 0, .55);
font-weight: 400;
cursor: pointer;
}
.full-box .menu-item.active,
.full-box .sub-title {
font-family: PingfangSC-Medium, Helvetica;
font-weight: 500;
color: rgba(0, 0, 0, .9);
font-size: 17px;
}
.full-box .data-items {
background-color: #fff;
padding: 12px;
border-radius: 12px;
font-size: 14px;
/* font-weight: 400; */
color: rgba(0, 0, 0, .9);
font-family: PingFang SC Regular;
}
.full-box .text-small {
font-size: 12px;
/* font-weight: 400; */
color: rgba(0, 0, 0, .9);
font-family: PingFang SC Regular;
}
.full-box .data-items:hover {
background-color: #f7f7f7;
}
.full-box .data-items .datanum {
font-size: 24px;
font-weight: 500;
}
.full-box .rounded {
border-radius: 12px;
}
.full-box .row {
display: flex;
}
.full-box .items-center {
align-items: center;
}
.full-box .col {
flex: 1;
}
.full-box .justify-between {
justify-content: space-between;
}
.full-box .juesify-center {
justify-content: center;
}
.full-box .el-input__inner {
color: rgba(0, 0, 0, .9) !important;
border-radius: 12px !important;
border: none !important;
}
.full-box .el-date-editor .el-range-separator {
width: 18px !important;
}
.full-box .el-input__icon {
color: rgba(0, 0, 0, .9) !important;
font-weight: bolder;
}
@keyframes realtime {
0% {
opacity: 1;
/* 初始状态，元素完全不透明 */
}
50% {
opacity: 0.2;
/* 动画进行到一半时，元素接近透明 */
}
100% {
opacity: 1;
/* 动画结束时，元素恢复完全不透明 */
}
}
</style>
src/plug/index.js
View file @ db074cd4
...@@ -123,7 +123,7 @@ export default { ...@@ -123,7 +123,7 @@ export default {
let isOnline = 0; //0-本地测试，1-线上 let isOnline = 0; //0-本地测试，1-线上
let ocrUrl = "http://192.168.5.46:8888"; let ocrUrl = "http://192.168.5.46:8888";
domainUrl = "http://192.168.5.39:8083"; domainUrl = "http://192.168.5.39:8083";
domainUrl = "http://192.168.5.56"; domainUrl = "http://192.168.5.46:8501";
// domainUrl = "http://reborn.oytour.com"; // domainUrl = "http://reborn.oytour.com";
let crmLocalFileStreamDownLoadUrl = ""; let crmLocalFileStreamDownLoadUrl = "";
crmLocalFileStreamDownLoadUrl = locationName.indexOf('oytour') !== -1 ? "http://crm.oytour.com" : "http://testcrm.oytour.com"; crmLocalFileStreamDownLoadUrl = locationName.indexOf('oytour') !== -1 ? "http://crm.oytour.com" : "http://testcrm.oytour.com";
......
src/router/config.js
View file @ db074cd4
...@@ -6285,7 +6285,15 @@ export default { ...@@ -6285,7 +6285,15 @@ export default {
meta: { meta: {
title: '维护教育视频' title: '维护教育视频'
}, },
} },
{
path: '/data_count', //维护教育视频
name: 'data_count',
component: resolve => require(['@/components/rank/dataCount'], resolve),
meta: {
title: '客户运营数据统计'
},
},
] ]
}, },
{ {
......
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