Skip to content

S
SuperMan
Commit 6c3d22e8 authored by 罗超's avatar 罗超
Browse files
Options

绑定

parent 3c4bfc2f
Hide whitespace changes
Inline Side-by-side
Showing with 776 additions and 421 deletions
src/components/rank/components/coreview.vue
View file @ 6c3d22e8
...@@ -10,18 +10,8 @@ export default { ...@@ -10,18 +10,8 @@ export default {
data() { data() {
return { return {
chart: null, chart: null,
lineData: { lineData: {},
name: '新增激活数', xAxisData: [],
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: '人' unit: '人'
}; };
}, },
...@@ -31,6 +21,16 @@ export default { ...@@ -31,6 +21,16 @@ export default {
default: null default: null
} }
}, },
watch: {
chartData: function (old, val) {
if (this.chartData) {
this.lineData = this.chartData.lineData;
this.unit = this.chartData.unit;
this.xAxisData = this.chartData.xAxisData;
}
this.initChart();
}
},
mounted() { mounted() {
if (this.chartData) { if (this.chartData) {
this.lineData = this.chartData.lineData; this.lineData = this.chartData.lineData;
......
src/components/rank/dataCount.vue
View file @ 6c3d22e8
...@@ -4,18 +4,44 @@ ...@@ -4,18 +4,44 @@
<div class="row items-center" style="margin-bottom: 20px;"> <div class="row items-center" style="margin-bottom: 20px;">
<div class="page-title col">平台数据</div> <div class="page-title col">平台数据</div>
<div class="row items-center"> <div class="row items-center">
<el-select v-model="parameters.branchId" style="margin-right: 20px;" @change="getCustomerStatic()"> <el-select
<el-option v-for="(x,i) in branchs" :key="i" :label="x.BName" :value="x.Id"></el-option> v-model="parameters.branchId"
style="margin-right: 20px;"
@change="handleDateChange()"
>
<el-option
v-for="(x, i) in branchs"
:key="i"
:label="x.BName"
:value="x.Id"
></el-option>
</el-select> </el-select>
<el-date-picker v-model="parameters.dateRange" type="daterange" align="right" unlink-panels <el-date-picker
@change="getCustomerStatic()" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" v-model="parameters.dateRange"
value-format="yyyy/MM/dd" :clearable="false" :picker-options="pickerOptions"> type="daterange"
align="right"
unlink-panels
@change="handleDateChange()"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy/MM/dd"
:clearable="false"
:picker-options="pickerOptions"
>
</el-date-picker> </el-date-picker>
</div> </div>
</div> </div>
<div class="card rounded row items-center"> <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)"> <div
{{ x.title }}</div> class="menu-item"
:class="{ active: i == active }"
v-for="(x, i) in menus"
:key="i"
@click="handleClick(i)"
>
{{ x.title }}
</div>
</div> </div>
<div class="sub-title q-my-md">今日实时数据</div> <div class="sub-title q-my-md">今日实时数据</div>
<div class="card rounded big"> <div class="card rounded big">
...@@ -32,20 +58,23 @@ ...@@ -32,20 +58,23 @@
<div class="num" style="margin: 6px 0;"> <div class="num" style="margin: 6px 0;">
<span class="datanum"> <span class="datanum">
<template v-if="customerObj"> <template v-if="customerObj">
{{customerObj.TotalCustomerCount}} {{ customerObj.TotalCustomerCount }}
</template> </template>
</span> </span>
<span>个</span> <span>个</span>
</div> </div>
<div class="text-info"> &nbsp; </div> <div class="text-info">&nbsp;</div>
</div> </div>
<el-divider direction="vertical" style="margin: 0 12px;height: 80%;"></el-divider> <el-divider
direction="vertical"
style="margin: 0 12px;height: 80%;"
></el-divider>
<div class="data-items col"> <div class="data-items col">
<div>今日新增客户</div> <div>今日新增客户</div>
<div class="num" style="margin: 6px 0;"> <div class="num" style="margin: 6px 0;">
<span class="datanum"> <span class="datanum">
<template v-if="customerObj"> <template v-if="customerObj">
{{customerObj.TodayCustomerCount}} {{ customerObj.TodayCustomerCount }}
</template> </template>
</span> </span>
<span>个</span> <span>个</span>
...@@ -53,11 +82,15 @@ ...@@ -53,11 +82,15 @@
<div class="text-info"> <div class="text-info">
<span>较昨日</span> <span>较昨日</span>
<template v-if="customerObj"> <template v-if="customerObj">
<template v-if="customerObj.CustomerPercent>0"> <template v-if="customerObj.CustomerPercent > 0">
<span class="green" style="margin:0 12px 0 5px;"> {{customerObj.CustomerPercent}}%</span> <span class="green" style="margin:0 12px 0 5px;">
{{ customerObj.CustomerPercent }}%</span
>
</template> </template>
<template v-else> <template v-else>
<span class="red" style="margin-left: 5px;">{{customerObj.CustomerPercent}}%</span> <span class="red" style="margin-left: 5px;"
>{{ customerObj.CustomerPercent }}%</span
>
</template> </template>
</template> </template>
</div> </div>
...@@ -68,8 +101,9 @@ ...@@ -68,8 +101,9 @@
<div class="num" style="margin: 6px 0;"> <div class="num" style="margin: 6px 0;">
<span class="datanum"> <span class="datanum">
<template v-if="customerObj"> <template v-if="customerObj">
{{customerObj.TotalActivationCount}} {{ customerObj.TotalActivationCount }}
</template></span> </template></span
>
<span>个</span> <span>个</span>
</div> </div>
<div class="text-info">&nbsp;</div> <div class="text-info">&nbsp;</div>
...@@ -79,19 +113,25 @@ ...@@ -79,19 +113,25 @@
<div class="data-items col"> <div class="data-items col">
<div>今日激活数</div> <div>今日激活数</div>
<div class="num" style="margin: 6px 0;"> <div class="num" style="margin: 6px 0;">
<span class="datanum"><template v-if="customerObj"> <span class="datanum"
{{customerObj.TodayActivationCount}} ><template v-if="customerObj">
</template></span> {{ customerObj.TodayActivationCount }}
</template></span
>
<span>个</span> <span>个</span>
</div> </div>
<div class="text-info"> <div class="text-info">
<span>较昨日</span> <span>较昨日</span>
<template v-if="customerObj"> <template v-if="customerObj">
<template v-if="customerObj.ActivationPrecent>0"> <template v-if="customerObj.ActivationPrecent > 0">
<span class="green" style="margin:0 12px 0 5px;"> {{customerObj.ActivationPrecent}}%</span> <span class="green" style="margin:0 12px 0 5px;">
{{ customerObj.ActivationPrecent }}%</span
>
</template> </template>
<template v-else> <template v-else>
<span class="red" style="margin-left: 5px;"> {{customerObj.ActivationPrecent}}%</span> <span class="red" style="margin-left: 5px;">
{{ customerObj.ActivationPrecent }}%</span
>
</template> </template>
</template> </template>
</div> </div>
...@@ -103,7 +143,7 @@ ...@@ -103,7 +143,7 @@
<div class="sub-title">客户数据走势</div> <div class="sub-title">客户数据走势</div>
<div class=""> <div class="">
<span class="dot"></span> <span class="dot"></span>
<span class="text-info">{{ parameters.dateRange.join('-') }}</span> <span class="text-info">{{ parameters.dateRange.join("-") }}</span>
</div> </div>
</div> </div>
<div style="height: 320px;"> <div style="height: 320px;">
...@@ -118,11 +158,18 @@ ...@@ -118,11 +158,18 @@
<div class="sub-title">今日客户数据</div> <div class="sub-title">今日客户数据</div>
<div class=""> <div class="">
<span class="dot"></span> <span class="dot"></span>
<span class="text-info">{{ parameters.dateRange.join(' - ') }}</span> <span class="text-info">{{
parameters.dateRange.join(" - ")
}}</span>
</div> </div>
</div> </div>
<el-select v-model="platformId" style="width: 140px;"> <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-option
v-for="(x, i) in platforms"
:key="i"
:label="x.Name"
:value="x.Id"
></el-option>
</el-select> </el-select>
</div> </div>
<div class="q-mt-md row items-center"> <div class="q-mt-md row items-center">
...@@ -133,7 +180,10 @@ ...@@ -133,7 +180,10 @@
<span>元</span> <span>元</span>
</div> </div>
</div> </div>
<el-divider direction="vertical" style="margin: 0 12px;height: 80%;"></el-divider> <el-divider
direction="vertical"
style="margin: 0 12px;height: 80%;"
></el-divider>
<div class="data-items col"> <div class="data-items col">
<div>收客人数</div> <div>收客人数</div>
<div class="num" style="margin: 6px 0;"> <div class="num" style="margin: 6px 0;">
...@@ -165,7 +215,9 @@ ...@@ -165,7 +215,9 @@
<div class="sub-title">交易趋势图</div> <div class="sub-title">交易趋势图</div>
<div class=""> <div class="">
<span class="dot"></span> <span class="dot"></span>
<span class="text-info">{{ parameters.dateRange.join(' - ') }}</span> <span class="text-info">{{
parameters.dateRange.join(" - ")
}}</span>
</div> </div>
</div> </div>
<div style="height: 320px;"> <div style="height: 320px;">
...@@ -179,64 +231,133 @@ ...@@ -179,64 +231,133 @@
<div class="sub-title">用户活跃概况</div> <div class="sub-title">用户活跃概况</div>
<div class=""> <div class="">
<span class="dot"></span> <span class="dot"></span>
<span class="text-info">数据更新：{{ parameters.dateRange[1] }}</span> <span class="text-info"
>数据更新：{{ parameters.dateRange[1] }}</span
>
</div> </div>
</div> </div>
<div class="q-mt-md row items-center"> <div class="q-mt-md row items-center">
<div class="data-items col"> <div class="data-items col">
<div>小程序累计用户数</div> <div>小程序累计用户数</div>
<div class="num" style="margin: 6px 0;"> <div class="num" style="margin: 6px 0;">
<span class="datanum">26052</span> <span class="datanum">{{ baseWechatData.Visit_Total }}</span>
<span>人</span> <span>人</span>
</div> </div>
<div class="text-info"> <div class="text-info">
<span>较昨日</span> <span>较昨日</span>
<span class="green" style="margin:0 12px 0 5px;">+23%</span> <span
:class="{
red: baseWechatData.Visit_TotalYRate < 0,
green: baseWechatData.Visit_TotalYRate >= 0
}"
style="margin:0 12px 0 5px;"
>{{ baseWechatData.Visit_TotalYRate > 0 ? "+" : "" }}
{{ baseWechatData.Visit_TotalYRate }}%</span
>
<span>较七日前</span> <span>较七日前</span>
<span class="red" style="margin-left: 5px;">-125%</span> <span
:class="{
red: baseWechatData.Visit_TotalSRate < 0,
green: baseWechatData.Visit_TotalSRate >= 0
}"
style="margin:0 12px 0 5px;"
>{{ baseWechatData.Visit_TotalSRate > 0 ? "+" : "" }}
{{ baseWechatData.Visit_TotalSRate }}%</span
>
</div> </div>
</div> </div>
<el-divider direction="vertical" style="margin: 0 12px;height: 80%;"></el-divider> <el-divider
direction="vertical"
style="margin: 0 12px;height: 80%;"
></el-divider>
<div class="data-items col"> <div class="data-items col">
<div>日访问人数</div> <div>日访问人数</div>
<div class="num" style="margin: 6px 0;"> <div class="num" style="margin: 6px 0;">
<span class="datanum">89</span> <span class="datanum">{{ baseWechatData.Visit_UV }}</span>
<span>人</span> <span>人</span>
</div> </div>
<div class="text-info"> <div class="text-info">
<span>较昨日</span> <span>较昨日</span>
<span class="green" style="margin:0 12px 0 5px;">+23%</span> <span
:class="{
red: baseWechatData.Visit_UVYRate < 0,
green: baseWechatData.Visit_UVYRate >= 0
}"
style="margin:0 12px 0 5px;"
>{{ baseWechatData.Visit_UVYRate > 0 ? "+" : "" }}
{{ baseWechatData.Visit_UVYRate }}%</span
>
<span>较七日前</span> <span>较七日前</span>
<span class="red" style="margin-left: 5px;">-125%</span> <span
:class="{
red: baseWechatData.Visit_UVSRate < 0,
green: baseWechatData.Visit_UVSRate >= 0
}"
style="margin:0 12px 0 5px;"
>{{ baseWechatData.Visit_UVSRate > 0 ? "+" : "" }}
{{ baseWechatData.Visit_UVSRate }}%</span
>
</div> </div>
</div> </div>
<el-divider direction="vertical" style="margin: 0 12px;"></el-divider> <el-divider direction="vertical" style="margin: 0 12px;"></el-divider>
<div class="data-items col"> <div class="data-items col">
<div>日打开次数</div> <div>日打开次数</div>
<div class="num" style="margin: 6px 0;"> <div class="num" style="margin: 6px 0;">
<span class="datanum">455</span> <span class="datanum">{{ baseWechatData.Session_CNT }}</span>
<span>人</span> <span>人</span>
</div> </div>
<div class="text-info"> <div class="text-info">
<span>较昨日</span> <span>较昨日</span>
<span class="green" style="margin:0 12px 0 5px;">+23%</span> <span
:class="{
red: baseWechatData.Session_CNTYRate < 0,
green: baseWechatData.Session_CNTYRate >= 0
}"
style="margin:0 12px 0 5px;"
>{{ baseWechatData.Session_CNTYRate > 0 ? "+" : "" }}
{{ baseWechatData.Session_CNTYRate }}%</span
>
<span>较七日前</span> <span>较七日前</span>
<span class="red" style="margin-left: 5px;">-125%</span> <span
:class="{
red: baseWechatData.Session_CNTSRate < 0,
green: baseWechatData.Session_CNTSRate >= 0
}"
style="margin:0 12px 0 5px;"
>{{ baseWechatData.Session_CNTSRate > 0 ? "+" : "" }}
{{ baseWechatData.Session_CNTSRate }}%</span
>
</div> </div>
</div> </div>
<el-divider direction="vertical" style="margin: 0 12px;"></el-divider> <el-divider direction="vertical" style="margin: 0 12px;"></el-divider>
<div class="data-items col"> <div class="data-items col">
<div>日访问页面数</div> <div>日转发人数</div>
<div class="num" style="margin: 6px 0;"> <div class="num" style="margin: 6px 0;">
<span class="datanum">26052</span> <span class="datanum">{{ baseWechatData.Share_UV }}</span>
<span>个</span> <span>人</span>
</div> </div>
<div class="text-info"> <div class="text-info">
<span>较昨日</span> <span>较昨日</span>
<span class="green" style="margin:0 12px 0 5px;">+23%</span> <span
:class="{
red: baseWechatData.Share_UVYRate < 0,
green: baseWechatData.Share_UVYRate >= 0
}"
style="margin:0 12px 0 5px;"
>{{ baseWechatData.Share_UVYRate > 0 ? "+" : "" }}
{{ baseWechatData.Share_UVYRate }}%</span
>
<span>较七日前</span> <span>较七日前</span>
<span class="red" style="margin-left: 5px;">-125%</span> <span
:class="{
red: baseWechatData.Share_UVSRate < 0,
green: baseWechatData.Share_UVSRate >= 0
}"
style="margin:0 12px 0 5px;"
>{{ baseWechatData.Share_UVSRate > 0 ? "+" : "" }}
{{ baseWechatData.Share_UVSRate }}%</span
>
</div> </div>
</div> </div>
</div> </div>
...@@ -248,35 +369,72 @@ ...@@ -248,35 +369,72 @@
<div class="sub-title">新增用户概况</div> <div class="sub-title">新增用户概况</div>
<div class=""> <div class="">
<span class="dot"></span> <span class="dot"></span>
<span class="text-info">数据更新：{{ parameters.dateRange[1]}}</span> <span class="text-info"
>数据更新：{{ parameters.dateRange[1] }}</span
>
</div> </div>
</div> </div>
<div class="q-mt-md row items-center"> <div class="q-mt-md row items-center">
<div class="data-items col"> <div class="data-items col">
<div>日新增用户</div> <div>日新增用户</div>
<div class="num" style="margin: 6px 0;"> <div class="num" style="margin: 6px 0;">
<span class="datanum">26052</span> <span class="datanum">{{ baseWechatData.Visit_UV_New }}</span>
<span>人</span> <span>人</span>
</div> </div>
<div class="text-info"> <div class="text-info">
<span>较昨日</span> <span>较昨日</span>
<span class="green" style="margin:0 12px 0 5px;">+23%</span> <span
:class="{
red: baseWechatData.Visit_UV_NewYRate < 0,
green: baseWechatData.Visit_UV_NewYRate >= 0
}"
style="margin:0 12px 0 5px;"
>{{ baseWechatData.Visit_UV_NewYRate > 0 ? "+" : "" }}
{{ baseWechatData.Visit_UV_NewYRate }}%</span
>
<span>较七日前</span> <span>较七日前</span>
<span class="red" style="margin-left: 5px;">-125%</span> <span
:class="{
red: baseWechatData.Visit_UV_NewSRate < 0,
green: baseWechatData.Visit_UV_NewSRate >= 0
}"
style="margin:0 12px 0 5px;"
>{{ baseWechatData.Visit_UV_NewSRate > 0 ? "+" : "" }}
{{ baseWechatData.Visit_UV_NewSRate }}%</span
>
</div> </div>
</div> </div>
<el-divider direction="vertical" style="margin: 0 12px;height: 80%;"></el-divider> <el-divider
direction="vertical"
style="margin: 0 12px;height: 80%;"
></el-divider>
<div class="data-items col"> <div class="data-items col">
<div>日转发次数</div> <div>人均停留时长</div>
<div class="num" style="margin: 6px 0;"> <div class="num" style="margin: 6px 0;">
<span class="datanum">89</span> <span class="datanum">{{ baseWechatData.Stay_Time_UV }}</span>
<span>人</span> <span>秒</span>
</div> </div>
<div class="text-info"> <div class="text-info">
<span>较昨日</span> <span>较昨日</span>
<span class="green" style="margin:0 12px 0 5px;">+23%</span> <span
:class="{
red: baseWechatData.Stay_Time_UVYRate < 0,
green: baseWechatData.Stay_Time_UVYRate >= 0
}"
style="margin:0 12px 0 5px;"
>{{ baseWechatData.Stay_Time_UVYRate > 0 ? "+" : "" }}
{{ baseWechatData.Stay_Time_UVYRate }}%</span
>
<span>较七日前</span> <span>较七日前</span>
<span class="red" style="margin-left: 5px;">-125%</span> <span
:class="{
red: baseWechatData.Stay_Time_UVSRate < 0,
green: baseWechatData.Stay_Time_UVSRate >= 0
}"
style="margin:0 12px 0 5px;"
>{{ baseWechatData.Stay_Time_UVSRate > 0 ? "+" : "" }}
{{ baseWechatData.Stay_Time_UVSRate }}%</span
>
</div> </div>
</div> </div>
</div> </div>
...@@ -286,35 +444,72 @@ ...@@ -286,35 +444,72 @@
<div class="sub-title">小程序留存概况</div> <div class="sub-title">小程序留存概况</div>
<div class=""> <div class="">
<span class="dot"></span> <span class="dot"></span>
<span class="text-info">数据更新： {{ parameters.dateRange[1] }}</span> <span class="text-info"
>数据更新： {{ parameters.dateRange[1] }}</span
>
</div> </div>
</div> </div>
<div class="q-mt-md row items-center"> <div class="q-mt-md row items-center">
<div class="data-items col"> <div class="data-items col">
<div>新增用户留存</div> <div>新增用户留存</div>
<div class="num" style="margin: 6px 0;"> <div class="num" style="margin: 6px 0;">
<span class="datanum">26052</span> <span class="datanum">{{ baseWechatData.NewVisitUV }}</span>
<span>人</span> <span>人</span>
</div> </div>
<div class="text-info"> <div class="text-info">
<span>较昨日</span> <span>较昨日</span>
<span class="green" style="margin:0 12px 0 5px;">+23%</span> <span
:class="{
red: baseWechatData.NewVisitUVYRate < 0,
green: baseWechatData.NewVisitUVYRate >= 0
}"
style="margin:0 12px 0 5px;"
>{{ baseWechatData.NewVisitUVYRate > 0 ? "+" : "" }}
{{ baseWechatData.NewVisitUVYRate }}%</span
>
<span>较七日前</span> <span>较七日前</span>
<span class="red" style="margin-left: 5px;">-125%</span> <span
:class="{
red: baseWechatData.NewVisitUVSRate < 0,
green: baseWechatData.NewVisitUVSRate >= 0
}"
style="margin:0 12px 0 5px;"
>{{ baseWechatData.NewVisitUVSRate > 0 ? "+" : "" }}
{{ baseWechatData.NewVisitUVSRate }}%</span
>
</div> </div>
</div> </div>
<el-divider direction="vertical" style="margin: 0 12px;height: 80%;"></el-divider> <el-divider
direction="vertical"
style="margin: 0 12px;height: 80%;"
></el-divider>
<div class="data-items col"> <div class="data-items col">
<div>活跃用户留存数</div> <div>活跃用户留存数</div>
<div class="num" style="margin: 6px 0;"> <div class="num" style="margin: 6px 0;">
<span class="datanum">89</span> <span class="datanum">{{ baseWechatData.VisitUV }}</span>
<span>人</span> <span>人</span>
</div> </div>
<div class="text-info"> <div class="text-info">
<span>较昨日</span> <span>较昨日</span>
<span class="green" style="margin:0 12px 0 5px;">+23%</span> <span
:class="{
red: baseWechatData.VisitUVYRate < 0,
green: baseWechatData.VisitUVYRate >= 0
}"
style="margin:0 12px 0 5px;"
>{{ baseWechatData.VisitUVYRate > 0 ? "+" : "" }}
{{ baseWechatData.VisitUVYRate }}%</span
>
<span>较七日前</span> <span>较七日前</span>
<span class="red" style="margin-left: 5px;">-125%</span> <span
:class="{
red: baseWechatData.VisitUVSRate < 0,
green: baseWechatData.VisitUVSRate >= 0
}"
style="margin:0 12px 0 5px;"
>{{ baseWechatData.VisitUVSRate > 0 ? "+" : "" }}
{{ baseWechatData.VisitUVSRate }}%</span
>
</div> </div>
</div> </div>
</div> </div>
...@@ -326,16 +521,24 @@ ...@@ -326,16 +521,24 @@
<div class="col"> <div class="col">
<div class="sub-title">访问核心指标趋势</div> <div class="sub-title">访问核心指标趋势</div>
<div class=""> <div class="">
<span class="text-info">{{ parameters.dateRange.join(' - ') }}</span> <span class="text-info">{{
parameters.dateRange.join(" - ")
}}</span>
</div> </div>
</div> </div>
<el-select v-model="coreId" style="width: 120px;"> <el-select v-model="coreId" style="width: 140px; text-align: right;" @change="formatCoreTrend()">
<el-option v-for="(x,i) in coreLists" :key="i" :label="x.Name" :value="x.Id"></el-option> <el-option
v-for="(x, i) in coreLists"
:key="i"
:label="x.Name"
:value="x.Id"
></el-option>
</el-select> </el-select>
</div> </div>
<div class="text-small q-my-md" style="padding:0 12px;">平均：22.7</div> <div class="text-small q-my-md" style="padding:0 12px;">平均：{{ currentCoreObj.avg }}{{ currentCoreObj.unit }}</div>
<div style="height: 320px; padding:0 12px"> <div style="height: 320px; padding:0 12px">
<Coreview></Coreview> <Coreview :chart-data="currentCoreObj" v-if="currentCoreObj"></Coreview>
</div> </div>
</div> </div>
...@@ -345,11 +548,18 @@ ...@@ -345,11 +548,18 @@
<div class="col"> <div class="col">
<div class="sub-title">页面访问Top10</div> <div class="sub-title">页面访问Top10</div>
<div class=""> <div class="">
<span class="text-info">{{ parameters.dateRange.join(' - ') }}</span> <span class="text-info">{{
parameters.dateRange.join(" - ")
}}</span>
</div> </div>
</div> </div>
<el-select v-model="metricsId" style="width: 140px;"> <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-option
v-for="(x, i) in metrics"
:key="i"
:label="x.name"
:value="x.id"
></el-option>
</el-select> </el-select>
</div> </div>
<div style="height: 320px; padding:0 12px;" class="q-mt-md"> <div style="height: 320px; padding:0 12px;" class="q-mt-md">
...@@ -361,11 +571,18 @@ ...@@ -361,11 +571,18 @@
<div class="col"> <div class="col">
<div class="sub-title">客户分布占比</div> <div class="sub-title">客户分布占比</div>
<div class=""> <div class="">
<span class="text-info">{{ parameters.dateRange.join(' - ') }}</span> <span class="text-info">{{
parameters.dateRange.join(" - ")
}}</span>
</div> </div>
</div> </div>
<el-select v-model="areaId" style="width: 140px;"> <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-option
v-for="(x, i) in areas"
:key="i"
:label="x.Name"
:value="x.Id"
></el-option>
</el-select> </el-select>
</div> </div>
<div style="height: 320px; padding:0 12px;" class="q-mt-md"> <div style="height: 320px; padding:0 12px;" class="q-mt-md">
...@@ -373,414 +590,552 @@ ...@@ -373,414 +590,552 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import Customer from './components/customer.vue' import Customer from "./components/customer.vue";
import Coreview from './components/coreview.vue'; import Coreview from "./components/coreview.vue";
import Pagecount from './components/pagecount.vue'; import Pagecount from "./components/pagecount.vue";
import Citiescount from './components/citiescount.vue' import Citiescount from "./components/citiescount.vue";
import Tradecount from './components/tradecount.vue' import Tradecount from "./components/tradecount.vue";
export default { export default {
components: { components: {
Customer, Customer,
Coreview, Coreview,
Pagecount, Pagecount,
Citiescount, Citiescount,
Tradecount Tradecount
}, },
data() { data() {
return { return {
active: 0, active: 0,
pickerOptions: { pickerOptions: {
shortcuts: [{ shortcuts: [
text: '最近一周', {
text: "最近一周",
onClick(picker) { onClick(picker) {
const end = new Date(); const end = new Date();
const start = new Date(); const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); start.setTime(start.getTime() - 3600 * 1000 * 24 * 8);
picker.$emit('pick', [start, end]); end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
picker.$emit("pick", [start, end]);
} }
}, { },
text: '最近一个月', {
text: "最近一个月",
onClick(picker) { onClick(picker) {
const end = new Date(); const end = new Date();
const start = new Date(); const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); start.setTime(start.getTime() - 3600 * 1000 * 24 * 31);
picker.$emit('pick', [start, end]); end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
picker.$emit("pick", [start, end]);
} }
}, { },
text: '最近三个月', {
text: "最近三个月",
onClick(picker) { onClick(picker) {
const end = new Date(); const end = new Date();
const start = new Date(); const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90); start.setTime(start.getTime() - 3600 * 1000 * 24 * 91);
picker.$emit('pick', [start, end]); end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
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: [], disabledDate(time) {
parameters: { return time.getTime() > new Date(Date.now() - 3600 * 1000 * 24);
branchId: -1, }
dateRange: [], },
StartDate: "", menus: [
EndDate: "", {
title: "客户数据",
path: "coreData"
}, },
coreId: 1, {
coreLists: [{ title: "交易数据",
"Id": 1, path: "realTimeData"
"Name": "累计用户数" },
}, { {
"Id": 2, title: "访问分析",
"Name": "日访问人数" path: "accessAnalysis"
}, { },
"Id": 3, {
"Name": "日打开次数" title: "产品统计",
}, { path: "productStatistics"
"Id": 4, }
"Name": "日访问页面数" ],
}, { branchs: [],
"Id": 5, parameters: {
"Name": "日新增用户" branchId: -1,
}, { dateRange: [],
"Id": 6, StartDate: "",
"Name": "日打开次数(新用户)" EndDate: ""
}, { },
"Id": 7, coreId: 1,
"Name": "总添加人数" coreLists: [
}, { {
"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, Id: 1,
Name: '省份' value: "Visit_Total",
}, { Name: "累计用户数",
Unit:'人'
},
{
Id: 2, Id: 2,
Name: '城市' value:"Visit_UV",
}], Name: "日访问人数",
platforms: [{ Unit:'人'
},
{
Id: 3,
value: "Session_CNT",
Name: "日打开次数",
Unit:'次'
},
{
Id: 4,
value: "Share_UV",
Name: "转发人数",
Unit:'人'
},
{
Id: 5,
value: "Visit_UV_New",
Name: "日新增用户",
Unit:'人'
},
{
Id: 9,
value: "VisitUV",
Name: "活跃日留存",
Unit:'人'
},
{
Id: 10,
value: "NewVisitUV",
Name: "新增日留存",
Unit:'人'
},
{
Id: 11,
value: "Stay_Time_UV",
Name: "人均停留时长",
Unit:'秒'
},
{
Id: 12,
value: "Share_UV",
Name: "转发次数",
Unit:'次'
},
{
Id: 13,
value: "Visit_Depth",
Name: "平均访问深度",
Unit:'层'
},
{
Id: 14,
value: "Stay_Time_Session",
Name: "次均停留时长",
Unit:'秒'
},
],
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, Id: 1,
Name: '全部' Name: "省份"
}, { },
{
Id: 2, Id: 2,
Name: '旅小友' Name: "城市"
}], }
platformId: 1, ],
areaId: 1, platforms: [
customerObj: {}, {
} Id: 1,
}, Name: "全部"
created() { },
this.getCompanyList(); {
const end = new Date(); Id: 2,
const start = new Date(); Name: "旅小友"
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]] platformId: 1,
areaId: 1,
customerObj: {},
baseWechatData: {},
trendData:{},
currentCoreObj:null,
pageData:{}
};
},
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]
];
this.getHomeChat();
this.getCustomerStatic();
this.getPageData()
},
mounted() {},
methods: {
handleDateChange() {
this.getCustomerStatic();
this.getHomeChat();
this.getPageData()
}, },
mounted() { handleCompanyChange() {
this.getCustomerStatic(); this.getCustomerStatic();
}, },
methods: { getCustomerStatic() {
getCustomerStatic() { if (this.parameters.dateRange && this.parameters.dateRange.length == 2) {
if (this.parameters.dateRange && this.parameters.dateRange.length == 2) { var tempArray = this.parameters.dateRange;
var tempArray = this.parameters.dateRange; this.parameters.StartDate = tempArray[0];
this.parameters.StartDate = tempArray[0]; this.parameters.EndDate = tempArray[1];
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);
} }
var that = this; });
that.apipost("erp_post_GetCustomerStatic", that.parameters, (res) => { },
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 => {}
);
},
getHomeChat() {
const msg = {
StartDate: this.parameters.dateRange[0],
EndDate: this.parameters.dateRange[1]
};
this.apipost(
"wechatstatistics_post_HomeWechatStatisticsList",
msg,
res => {
console.log("res", res); console.log("res", res);
if (res.data.resultCode == 1) { if (res.data.resultCode == 1) {
this.customerObj = res.data.data; this.baseWechatData = res.data.data;
} else { this.getTrendWechatData()
that.Error(res.data.message);
} }
}); },
}, err => {}
handleClick(index) { );
this.active = index; },
}, getTrendWechatData(){
getCompanyList() { //wechatstatistics_post_WechatStatisticsList
const userInfo = this.getLocalStorage();
const RB_Group_id = userInfo.RB_Group_id;
const msg = { const msg = {
Status: 0, StartDate: this.parameters.dateRange[0],
is_show: 0, EndDate: this.parameters.dateRange[1]
RB_Group_Id: RB_Group_id };
this.apipost(
"wechatstatistics_post_WechatStatisticsList",
msg,
res => {
console.log("res", res);
if (res.data.resultCode == 1) {
this.trendData = res.data.data;
this.formatCoreTrend()
}
},
err => {}
);
},
getPageData(){
//wechatstatistics_post_WechatStatisticsList
const msg = {
StartDate: this.parameters.dateRange[0],
EndDate: this.parameters.dateRange[1]
};
this.apipost(
"wechatstatistics_post_PageVisitStatisticsList",
msg,
res => {
if (res.data.resultCode == 1) {
this.trendData = res.data.data;
this.formatCoreTrend()
}
},
err => {}
);
},
formatCoreTrend(){
const filed = this.coreLists.find(x=>x.Id == this.coreId)
const avg = this.trendData[filed.value]
const unit = filed.Unit
console.log(this.trendData.List)
const xAxisData = this.trendData.List.map(x=>x.CreateDayStr)
const seriesData = this.trendData.List.map(x=>x[filed.value])
this.currentCoreObj = {
avg:avg,
unit:unit,
xAxisData:xAxisData,
lineData:{
name:filed.Name,
data:seriesData
}
} }
this.apipost('admin_get_BranchGetList', msg, res => { console.log(this.currentCoreObj)
if (res.data.resultCode == 1) {
this.branchs = [{
Id: -1,
BName: '全部'
}]
this.branchs = this.branchs.concat(res.data.data)
}
}, err => {})
},
} }
} }
};
</script> </script>
<style> <style>
.full-box { .full-box {
width: 100%; width: 100%;
height: 100%; height: 100%;
background: #f7f7f7; background: #f7f7f7;
padding: 20px; padding: 20px;
box-sizing: border-box; box-sizing: border-box;
} }
.full-box .dot { .full-box .dot {
color: #00ce8b; color: #00ce8b;
amination: realtime 2s infinite; amination: realtime 2s infinite;
-webkit-animation: realtime 2s infinite; -webkit-animation: realtime 2s infinite;
font-size: 27px; font-size: 27px;
vertical-align: 3px; vertical-align: 3px;
width: 4px; width: 4px;
height: 4px; height: 4px;
background-color: #00ce8b; background-color: #00ce8b;
display: inline-block; display: inline-block;
border-radius: 50%; border-radius: 50%;
margin-right: 3px; margin-right: 3px;
} }
.full-box .text-info { .full-box .text-info {
display: inline-block; display: inline-block;
vertical-align: baseline; vertical-align: baseline;
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
color: rgba(0, 0, 0, .3); color: rgba(0, 0, 0, 0.3);
font-family: Avenir, 'PingFang SC Regular'; font-family: Avenir, "PingFang SC Regular";
} }
.full-box .red { .full-box .red {
color: #fa5151; color: #fa5151;
} }
.full-box .green { .full-box .green {
color: #00ce8b !important; color: #00ce8b !important;
} }
.full-box .el-divider { .full-box .el-divider {
height: 60px !important; height: 60px !important;
margin: 0 12px; margin: 0 12px;
background: #f7f7f7; background: #f7f7f7;
} }
.full-box .num { .full-box .num {
font-family: Avenir; font-family: Avenir;
} }
.full-box .q-mt-md {
margin-top: 20px;
}
.full-box .q-mb-md { .full-box .q-mt-md {
margin-bottom: 20px; margin-top: 20px;
} }
.full-box .q-ml-md { .full-box .q-mb-md {
margin-left: 20px; margin-bottom: 20px;
} }
.full-box .q-mr-md { .full-box .q-ml-md {
margin-right: 20px; margin-left: 20px;
} }
.full-box .q-mx-md { .full-box .q-mr-md {
margin-right: 20px; margin-right: 20px;
margin-left: 20px; }
}
.full-box .q-my-md { .full-box .q-mx-md {
margin-top: 20px; margin-right: 20px;
margin-bottom: 20px; margin-left: 20px;
} }
.full-box .page-title { .full-box .q-my-md {
color: rgba(0, 0, 0, .9); margin-top: 20px;
font-size: 24px; margin-bottom: 20px;
font-weight: 500; }
}
.full-box .data-box { .full-box .page-title {
max-width: 1366px; color: rgba(0, 0, 0, 0.9);
margin: 0 auto; font-size: 24px;
} font-weight: 500;
}
.full-box .card { .full-box .data-box {
background: #fff; max-width: 1366px;
padding: 16px 20px; margin: 0 auto;
} }
.full-box .card.big { .full-box .card {
padding: 32px 20px; background: #fff;
} padding: 16px 20px;
}
.full-box .menu-item { .full-box .card.big {
margin-right: 30px; padding: 32px 20px;
font-size: 17px; }
color: rgba(0, 0, 0, .55);
font-weight: 400;
cursor: pointer;
}
.full-box .menu-item.active, .full-box .menu-item {
.full-box .sub-title { margin-right: 30px;
font-family: PingfangSC-Medium, Helvetica; font-size: 17px;
font-weight: 500; color: rgba(0, 0, 0, 0.55);
color: rgba(0, 0, 0, .9); font-weight: 400;
font-size: 17px; cursor: pointer;
} }
.full-box .data-items { .full-box .menu-item.active,
background-color: #fff; .full-box .sub-title {
padding: 12px; font-family: PingfangSC-Medium, Helvetica;
border-radius: 12px; font-weight: 500;
font-size: 14px; color: rgba(0, 0, 0, 0.9);
/* font-weight: 400; */ font-size: 17px;
color: rgba(0, 0, 0, .9); }
font-family: PingFang SC Regular;
}
.full-box .text-small { .full-box .data-items {
font-size: 12px; background-color: #fff;
/* font-weight: 400; */ padding: 12px;
color: rgba(0, 0, 0, .9); border-radius: 12px;
font-family: PingFang SC Regular; font-size: 14px;
} /* font-weight: 400; */
color: rgba(0, 0, 0, 0.9);
font-family: PingFang SC Regular;
}
.full-box .data-items:hover { .full-box .text-small {
background-color: #f7f7f7; font-size: 12px;
} /* font-weight: 400; */
color: rgba(0, 0, 0, 0.9);
font-family: PingFang SC Regular;
}
.full-box .data-items .datanum { .full-box .data-items:hover {
font-size: 24px; background-color: #f7f7f7;
font-weight: 500; }
}
.full-box .rounded { .full-box .data-items .datanum {
border-radius: 12px; font-size: 24px;
} font-weight: 500;
}
.full-box .row { .full-box .rounded {
display: flex; border-radius: 12px;
} }
.full-box .items-center { .full-box .row {
align-items: center; display: flex;
} }
.full-box .col { .full-box .items-center {
flex: 1; align-items: center;
} }
.full-box .justify-between { .full-box .col {
justify-content: space-between; flex: 1;
} }
.full-box .juesify-center { .full-box .justify-between {
justify-content: center; justify-content: space-between;
} }
.full-box .el-input__inner { .full-box .juesify-center {
color: rgba(0, 0, 0, .9) !important; justify-content: center;
border-radius: 12px !important; }
border: none !important;
}
.full-box .el-date-editor .el-range-separator { .full-box .el-input__inner {
width: 18px !important; color: rgba(0, 0, 0, 0.9) !important;
} border-radius: 12px !important;
border: none !important;
}
.full-box .el-input__icon { .full-box .el-date-editor .el-range-separator {
color: rgba(0, 0, 0, .9) !important; width: 18px !important;
font-weight: bolder; }
}
@keyframes realtime { .full-box .el-input__icon {
0% { color: rgba(0, 0, 0, 0.9) !important;
opacity: 1; font-weight: bolder;
/* 初始状态，元素完全不透明 */ }
}
50% { @keyframes realtime {
opacity: 0.2; 0% {
/* 动画进行到一半时，元素接近透明 */ opacity: 1;
} /* 初始状态，元素完全不透明 */
}
100% { 50% {
opacity: 1; opacity: 0.2;
/* 动画结束时，元素恢复完全不透明 */ /* 动画进行到一半时，元素接近透明 */
}
} }
100% {
opacity: 1;
/* 动画结束时，元素恢复完全不透明 */
}
}
</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