Skip to content

S
SuperMan
Commit 50b7b266 authored by 黄奎's avatar 黄奎
Browse files
Options

no message

parent c5aafa1f
Hide whitespace changes
Inline Side-by-side
Showing with 673 additions and 537 deletions
src/components/rank/components/customer.vue
View file @ 50b7b266
...@@ -19,7 +19,6 @@ ...@@ -19,7 +19,6 @@
}, },
xAxisData: [], xAxisData: [],
unit: '人', unit: '人',
}; };
}, },
props: { props: {
...@@ -39,7 +38,7 @@ ...@@ -39,7 +38,7 @@
} }
}, },
mounted() { mounted() {
this.unit = this.chartData.unit; //this.unit = this.chartData.unit;
if (this.chartData) { if (this.chartData) {
this.barData.data = this.chartData.customerYData; this.barData.data = this.chartData.customerYData;
this.lineData.data = this.chartData.activationYData; this.lineData.data = this.chartData.activationYData;
...@@ -50,6 +49,10 @@ ...@@ -50,6 +49,10 @@
methods: { methods: {
initChart() { initChart() {
const chartDom = document.getElementById('chart'); const chartDom = document.getElementById('chart');
var xNumber = 0;
if (this.xAxisData && this.xAxisData.length > 0) {
xNumber = this.calculateInterval(this.xAxisData.length);
}
this.chart = echarts.init(chartDom); this.chart = echarts.init(chartDom);
const option = { const option = {
tooltip: { tooltip: {
...@@ -94,7 +97,7 @@ ...@@ -94,7 +97,7 @@
}, },
axisLabel: { axisLabel: {
color: '#121212', color: '#121212',
interval: this.calculateInterval(this.xAxisData.length) interval: xNumber
}, },
axisTick: { axisTick: {
show: false, show: false,
...@@ -150,7 +153,6 @@ ...@@ -150,7 +153,6 @@
}, },
], ],
}; };
this.chart.setOption(option); this.chart.setOption(option);
}, },
setOpacity(seriesName) { setOpacity(seriesName) {
......
src/components/rank/dataCount.vue
View file @ 50b7b266
<template> <template>
<div class="full-box"> <div class="full-box">
<div class="data-box" style="padding-bottom: 20px;"> <div class="data-box" style="padding-bottom: 20px;">
<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;"> <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-option v-for="(x,i) in branchs" :key="i" :label="x.BName" :value="x.Id"></el-option>
</el-select> </el-select>
<el-date-picker <el-date-picker v-model="parameters.dateRange" type="daterange" align="right" unlink-panels
v-model="parameters.dateRange" @change="getCustomerStatic()" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
type="daterange" value-format="yyyy/MM/dd" :clearable="false" :picker-options="pickerOptions">
align="right" </el-date-picker>
unlink-panels </div>
range-separator="至" </div>
start-placeholder="开始日期" <div class="card rounded row items-center">
end-placeholder="结束日期" <div class="menu-item" :class="{'active':i==active}" v-for="(x,i) in menus" :key="i" @click="handleClick(i)">
value-format="yyyy/MM/dd" {{ x.title }}</div>
:clearable="false" </div>
:picker-options="pickerOptions"> <div class="sub-title q-my-md">今日实时数据</div>
</el-date-picker> <div class="card rounded big">
</div> <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>
<div class="card rounded row items-center"> <div class="text-info"> &nbsp; </div>
<div class="menu-item" :class="{'active':i==active}" v-for="(x,i) in menus" :key="i" @click="handleClick(i)">{{ x.title }}</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>
<div class="sub-title q-my-md">今日实时数据</div> <div class="text-info">
<div class="card rounded big"> <span>较昨日</span>
<div style="margin: 0 12px;"> <span class="green" style="margin:0 12px 0 5px;">+23%</span>
<div class="sub-title">今日客户数据</div> <span>较昨日</span>
<div class=""> <span class="red" style="margin-left: 5px;">-125%</span>
<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">26052</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">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">&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">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>
<div class="card rounded big q-mt-md"> </div>
<div style="margin: 0 12px;"> <el-divider direction="vertical" style="margin: 0 12px;"></el-divider>
<div class="sub-title">客户数据走势</div> <div class="data-items col">
<div class=""> <div>小程序激活数</div>
<span class="dot"></span> <div class="num" style="margin: 6px 0;">
<span class="text-info">{{ parameters.dateRange.join(' - ') }}</span> <span class="datanum">
</div> <template v-if="customerObj">
</div> {{customerObj.TotalActivationCount}}
<div style="height: 320px;"> </template></span>
<Customer></Customer> <span>个</span>
</div>
</div> </div>
<div class="text-info">&nbsp;</div>
</div>
<div class="sub-title q-my-md green">交易核心数据</div> <el-divider direction="vertical" style="margin: 0 12px;"></el-divider>
<div class="card rounded big"> <div class="data-items col">
<div class="row items-center"> <div>今日激活数</div>
<div style="margin: 0 12px;" class="col"> <div class="num" style="margin: 6px 0;">
<div class="sub-title">今日客户数据</div> <span class="datanum"><template v-if="customerObj">
<div class=""> {{customerObj.TodayActivationCount}}
<span class="dot"></span> </template></span>
<span class="text-info">{{ parameters.dateRange.join(' - ') }}</span> <span>个</span>
</div> </div>
</div> <div class="text-info">
<el-select v-model="platformId" style="width: 140px;"> <span>较昨日</span>
<el-option v-for="(x,i) in platforms" :key="i" :label="x.Name" :value="x.Id"></el-option> <span class="green" style="margin:0 12px 0 5px;">+23%</span>
</el-select> <span>较昨日</span>
</div> <span class="red" style="margin-left: 5px;">-125%</span>
<div class="q-mt-md row items-center"> </div>
<div class="data-items col"> </div>
<div>交易金额</div> </div>
<div class="num" style="margin: 6px 0;"> </div>
<span class="datanum">5000000.00</span> <div class="card rounded big q-mt-md">
<span>元</span> <div style="margin: 0 12px;">
</div> <div class="sub-title">客户数据走势</div>
</div> <div class="">
<el-divider direction="vertical" style="margin: 0 12px;height: 80%;"></el-divider> <span class="dot"></span>
<div class="data-items col"> <span class="text-info">{{ parameters.dateRange.join('-') }}</span>
<div>收客人数</div> </div>
<div class="num" style="margin: 6px 0;"> </div>
<span class="datanum">89</span> <div style="height: 320px;">
<span>人</span> <Customer :chartData="customerObj"></Customer>
</div> </div>
</div> </div>
<el-divider direction="vertical" style="margin: 0 12px;"></el-divider>
<div class="data-items col"> <div class="sub-title q-my-md green">交易核心数据</div>
<div>订单数</div> <div class="card rounded big">
<div class="num" style="margin: 6px 0;"> <div class="row items-center">
<span class="datanum">455</span> <div style="margin: 0 12px;" class="col">
<span>个</span> <div class="sub-title">今日客户数据</div>
</div> <div class="">
</div> <span class="dot"></span>
<span class="text-info">{{ parameters.dateRange.join(' - ') }}</span>
<el-divider direction="vertical" style="margin: 0 12px;"></el-divider> </div>
<div class="data-items col"> </div>
<div>用卷订单数</div> <el-select v-model="platformId" style="width: 140px;">
<div class="num" style="margin: 6px 0;"> <el-option v-for="(x,i) in platforms" :key="i" :label="x.Name" :value="x.Id"></el-option>
<span class="datanum">26052</span> </el-select>
<span>个</span> </div>
</div> <div class="q-mt-md row items-center">
</div> <div class="data-items col">
</div> <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>
<div class="card rounded big q-mt-md"> </div>
<div style="margin: 0 12px;"> <el-divider direction="vertical" style="margin: 0 12px;"></el-divider>
<div class="sub-title">交易趋势图</div> <div class="data-items col">
<div class=""> <div>订单数</div>
<span class="dot"></span> <div class="num" style="margin: 6px 0;">
<span class="text-info">{{ parameters.dateRange.join(' - ') }}</span> <span class="datanum">455</span>
</div> <span>个</span>
</div>
<div style="height: 320px;">
<Tradecount></Tradecount>
</div>
</div> </div>
</div>
<div class="sub-title q-my-md green">访问核心数据</div> <el-divider direction="vertical" style="margin: 0 12px;"></el-divider>
<div class="card rounded big"> <div class="data-items col">
<div style="margin: 0 12px;"> <div>用卷订单数</div>
<div class="sub-title">用户活跃概况</div> <div class="num" style="margin: 6px 0;">
<div class=""> <span class="datanum">26052</span>
<span class="dot"></span> <span>个</span>
<span class="text-info">数据更新：{{ parameters.dateRange[1] }}</span> </div>
</div> </div>
</div> </div>
<div class="q-mt-md row items-center"> </div>
<div class="data-items col"> <div class="card rounded big q-mt-md">
<div>小程序累计用户数</div> <div style="margin: 0 12px;">
<div class="num" style="margin: 6px 0;"> <div class="sub-title">交易趋势图</div>
<span class="datanum">26052</span> <div class="">
<span>人</span> <span class="dot"></span>
</div> <span class="text-info">{{ parameters.dateRange.join(' - ') }}</span>
<div class="text-info"> </div>
<span>较昨日</span> </div>
<span class="green" style="margin:0 12px 0 5px;">+23%</span> <div style="height: 320px;">
<span>较七日前</span> <Tradecount></Tradecount>
<span class="red" style="margin-left: 5px;">-125%</span> </div>
</div> </div>
</div>
<el-divider direction="vertical" style="margin: 0 12px;height: 80%;"></el-divider> <div class="sub-title q-my-md green">访问核心数据</div>
<div class="data-items col"> <div class="card rounded big">
<div>日访问人数</div> <div style="margin: 0 12px;">
<div class="num" style="margin: 6px 0;"> <div class="sub-title">用户活跃概况</div>
<span class="datanum">89</span> <div class="">
<span>人</span> <span class="dot"></span>
</div> <span class="text-info">数据更新：{{ parameters.dateRange[1] }}</span>
<div class="text-info"> </div>
<span>较昨日</span> </div>
<span class="green" style="margin:0 12px 0 5px;">+23%</span> <div class="q-mt-md row items-center">
<span>较七日前</span> <div class="data-items col">
<span class="red" style="margin-left: 5px;">-125%</span> <div>小程序累计用户数</div>
</div> <div class="num" style="margin: 6px 0;">
</div> <span class="datanum">26052</span>
<el-divider direction="vertical" style="margin: 0 12px;"></el-divider> <span>人</span>
<div class="data-items col"> </div>
<div>日打开次数</div> <div class="text-info">
<div class="num" style="margin: 6px 0;"> <span>较昨日</span>
<span class="datanum">455</span> <span class="green" style="margin:0 12px 0 5px;">+23%</span>
<span>人</span> <span>较七日前</span>
</div> <span class="red" style="margin-left: 5px;">-125%</span>
<div class="text-info"> </div>
<span>较昨日</span> </div>
<span class="green" style="margin:0 12px 0 5px;">+23%</span> <el-divider direction="vertical" style="margin: 0 12px;height: 80%;"></el-divider>
<span>较七日前</span> <div class="data-items col">
<span class="red" style="margin-left: 5px;">-125%</span> <div>日访问人数</div>
</div> <div class="num" style="margin: 6px 0;">
</div> <span class="datanum">89</span>
<span>人</span>
<el-divider direction="vertical" style="margin: 0 12px;"></el-divider> </div>
<div class="data-items col"> <div class="text-info">
<div>日访问页面数</div> <span>较昨日</span>
<div class="num" style="margin: 6px 0;"> <span class="green" style="margin:0 12px 0 5px;">+23%</span>
<span class="datanum">26052</span> <span>较七日前</span>
<span>个</span> <span class="red" style="margin-left: 5px;">-125%</span>
</div> </div>
<div class="text-info"> </div>
<span>较昨日</span> <el-divider direction="vertical" style="margin: 0 12px;"></el-divider>
<span class="green" style="margin:0 12px 0 5px;">+23%</span> <div class="data-items col">
<span>较七日前</span> <div>日打开次数</div>
<span class="red" style="margin-left: 5px;">-125%</span> <div class="num" style="margin: 6px 0;">
</div> <span class="datanum">455</span>
</div> <span>人</span>
</div> </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 class="q-mt-md row items-center"> <el-divider direction="vertical" style="margin: 0 12px;"></el-divider>
<div class="card rounded big col q-mr-md"> <div class="data-items col">
<div style="margin: 0 12px;"> <div>日访问页面数</div>
<div class="sub-title">新增用户概况</div> <div class="num" style="margin: 6px 0;">
<div class=""> <span class="datanum">26052</span>
<span class="dot"></span> <span>个</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>
<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 q-mt-md"> <div class="q-mt-md row items-center">
<div style="margin: 0 12px; " class="row items-center"> <div class="card rounded big col q-mr-md">
<div class="col"> <div style="margin: 0 12px;">
<div class="sub-title">访问核心指标趋势</div> <div class="sub-title">新增用户概况</div>
<div class=""> <div class="">
<span class="text-info">{{ parameters.dateRange.join(' - ') }}</span> <span class="dot"></span>
</div> <span class="text-info">数据更新：{{ parameters.dateRange[1]}}</span>
</div> </div>
<el-select v-model="coreId" style="width: 120px;"> </div>
<el-option v-for="(x,i) in coreLists" :key="i" :label="x.Name" :value="x.Id"></el-option> <div class="q-mt-md row items-center">
</el-select> <div class="data-items col">
</div> <div>日新增用户</div>
<div class="text-small q-my-md" style="padding:0 12px;">平均：22.7</div> <div class="num" style="margin: 6px 0;">
<div style="height: 320px; padding:0 12px"> <span class="datanum">26052</span>
<Coreview></Coreview> <span>人</span>
</div> </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>
<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="q-mt-md row"> <div class="card rounded big q-mt-md">
<div class="card rounded big col"> <div style="margin: 0 12px; " class="row items-center">
<div style="margin: 0 12px; " class="row items-center"> <div class="col">
<div class="col"> <div class="sub-title">访问核心指标趋势</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>
<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>
<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> </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 * 7);
picker.$emit('pick', [start, end]); 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 * 30);
picker.$emit('pick', [start, end]); 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 * 90);
picker.$emit('pick', [start, end]); picker.$emit('pick', [start, end]);
} }
}], }],
disabledDate(time) { disabledDate(time) {
return time.getTime() > new Date(Date.now() - 3600 * 1000 * 24); return time.getTime() > new Date(Date.now() - 3600 * 1000 * 24);
}, },
}, },
menus:[ menus: [{
{ title: '客户数据',
title: '客户数据', path: 'coreData'
path: 'coreData' },
}, {
{ title: '交易数据',
title: '交易数据', path: 'realTimeData'
path: 'realTimeData' },
}, {
{ title: '访问分析',
title: '访问分析', path: 'accessAnalysis'
path:'accessAnalysis' },
}, {
{ title: '产品统计',
title: '产品统计', path: 'productStatistics'
path:'productStatistics' }
} ],
], branchs: [],
branchs:[], parameters: {
parameters:{ branchId: -1,
branchId:-1, dateRange: [],
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":"回流用户数"}], coreId: 1,
metrics : [ coreLists: [{
{ id: 1, name: "访问次数" }, "Id": 1,
{ id: 2, name: "访问人数" }, "Name": "累计用户数"
{ id: 3, name: "次均停留时长" }, }, {
{ id: 4, name: "进入页次数" }, "Id": 2,
{ id: 5, name: "退出页次数" }, "Name": "日访问人数"
{ id: 6, name: "转发次数" }, }, {
{ id: 7, name: "转发人数" } "Id": 3,
], "Name": "日打开次数"
metricsId: 1, }, {
areas:[{Id:1,Name:'省份'},{Id:2,Name:'城市'}], "Id": 4,
platforms:[{Id:1,Name:'全部'},{Id:2,Name:'旅小友'}], "Name": "日访问页面数"
platformId:1, }, {
areaId:1, "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]]
}, },
created(){ mounted() {
this.getCompanyList(); this.getCustomerStatic();
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]]
}, },
methods: { methods: {
handleClick(index){ getCustomerStatic() {
this.active = index; if (this.parameters.dateRange && this.parameters.dateRange.length == 2) {
}, var tempArray = this.parameters.dateRange;
getCompanyList() { this.parameters.StartDate = tempArray[0];
const userInfo = this.getLocalStorage(); this.parameters.EndDate = tempArray[1]
const RB_Group_id = userInfo.RB_Group_id; }
const msg = { var that = this;
Status: 0, that.apipost("erp_post_GetCustomerStatic", that.parameters, (res) => {
is_show: 0, console.log("res", res);
RB_Group_Id: RB_Group_id if (res.data.resultCode == 1) {
} this.customerObj = res.data.data;
this.apipost('admin_get_BranchGetList', msg, res => { } else {
if (res.data.resultCode == 1) { that.Error(res.data.message);
this.branchs = [{ }
Id: -1, });
BName: '全部' },
}] handleClick(index) {
this.branchs = this.branchs.concat(res.data.data) this.active = index;
} },
}, err => {}) 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> </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;
...@@ -503,80 +600,98 @@ export default { ...@@ -503,80 +600,98 @@ export default {
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, .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{
.full-box .q-mt-md {
margin-top: 20px; margin-top: 20px;
} }
.full-box .q-mb-md{
.full-box .q-mb-md {
margin-bottom: 20px; margin-bottom: 20px;
} }
.full-box .q-ml-md{
.full-box .q-ml-md {
margin-left: 20px; margin-left: 20px;
} }
.full-box .q-mr-md{
.full-box .q-mr-md {
margin-right: 20px; margin-right: 20px;
} }
.full-box .q-mx-md{
.full-box .q-mx-md {
margin-right: 20px; margin-right: 20px;
margin-left: 20px; margin-left: 20px;
} }
.full-box .q-my-md{
.full-box .q-my-md {
margin-top: 20px; margin-top: 20px;
margin-bottom: 20px; margin-bottom: 20px;
} }
.full-box .page-title{
.full-box .page-title {
color: rgba(0, 0, 0, .9); color: rgba(0, 0, 0, .9);
font-size: 24px; font-size: 24px;
font-weight: 500; font-weight: 500;
} }
.full-box .data-box{
.full-box .data-box {
max-width: 1366px; max-width: 1366px;
margin: 0 auto; margin: 0 auto;
} }
.full-box .card{
.full-box .card {
background: #fff; background: #fff;
padding: 16px 20px; padding: 16px 20px;
} }
.full-box .card.big{
padding:32px 20px; .full-box .card.big {
} padding: 32px 20px;
.full-box .menu-item{ }
.full-box .menu-item {
margin-right: 30px; margin-right: 30px;
font-size: 17px; font-size: 17px;
color: rgba(0, 0, 0, .55); color: rgba(0, 0, 0, .55);
font-weight: 400; font-weight: 400;
cursor: pointer; cursor: pointer;
} }
.full-box .menu-item.active,
.full-box .sub-title{ .full-box .menu-item.active,
.full-box .sub-title {
font-family: PingfangSC-Medium, Helvetica; font-family: PingfangSC-Medium, Helvetica;
font-weight: 500; font-weight: 500;
color: rgba(0, 0, 0, .9); color: rgba(0, 0, 0, .9);
font-size: 17px; font-size: 17px;
} }
.full-box .data-items{
.full-box .data-items {
background-color: #fff; background-color: #fff;
padding: 12px; padding: 12px;
border-radius: 12px; border-radius: 12px;
...@@ -584,59 +699,78 @@ export default { ...@@ -584,59 +699,78 @@ export default {
/* font-weight: 400; */ /* font-weight: 400; */
color: rgba(0, 0, 0, .9); color: rgba(0, 0, 0, .9);
font-family: PingFang SC Regular; font-family: PingFang SC Regular;
} }
.full-box .text-small{
.full-box .text-small {
font-size: 12px; font-size: 12px;
/* font-weight: 400; */ /* font-weight: 400; */
color: rgba(0, 0, 0, .9); color: rgba(0, 0, 0, .9);
font-family: PingFang SC Regular; font-family: PingFang SC Regular;
} }
.full-box .data-items:hover{
.full-box .data-items:hover {
background-color: #f7f7f7; background-color: #f7f7f7;
} }
.full-box .data-items .datanum{
.full-box .data-items .datanum {
font-size: 24px; font-size: 24px;
font-weight: 500; font-weight: 500;
} }
.full-box .rounded{
.full-box .rounded {
border-radius: 12px; border-radius: 12px;
} }
.full-box .row{
.full-box .row {
display: flex; display: flex;
} }
.full-box .items-center{
.full-box .items-center {
align-items: center; align-items: center;
} }
.full-box .col{
.full-box .col {
flex: 1; flex: 1;
} }
.full-box .justify-between{
.full-box .justify-between {
justify-content: space-between; justify-content: space-between;
} }
.full-box .juesify-center{
.full-box .juesify-center {
justify-content: center; justify-content: center;
} }
.full-box .el-input__inner{
.full-box .el-input__inner {
color: rgba(0, 0, 0, .9) !important; color: rgba(0, 0, 0, .9) !important;
border-radius: 12px !important; border-radius: 12px !important;
border: none !important; border: none !important;
} }
.full-box .el-date-editor .el-range-separator{
.full-box .el-date-editor .el-range-separator {
width: 18px !important; width: 18px !important;
} }
.full-box .el-input__icon{
color: rgba(0, 0, 0,.9)!important; .full-box .el-input__icon {
color: rgba(0, 0, 0, .9) !important;
font-weight: bolder; font-weight: bolder;
} }
@keyframes realtime {
@keyframes realtime {
0% { 0% {
opacity: 1; /* 初始状态，元素完全不透明 */ opacity: 1;
/* 初始状态，元素完全不透明 */
} }
50% { 50% {
opacity: 0.2; /* 动画进行到一半时，元素接近透明 */ opacity: 0.2;
/* 动画进行到一半时，元素接近透明 */
} }
100% { 100% {
opacity: 1; /* 动画结束时，元素恢复完全不透明 */ opacity: 1;
/* 动画结束时，元素恢复完全不透明 */
} }
} }
</style>
\ No newline at end of file </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