Authored by TaoHuang

add market

<template>
<div class="appDetail">
<header-title
:title="'APP趋势'"
:subTitle="{hasSub: true, title: '(appDAU、app转化率、app单均)'}"
:helpText="`DAU:日激活<br>
DAU同比: (今天DAU-昨天DAU)/昨天DAU<br>
新激活:不在过往90天访问池子内的用户数<br>
新激活同比: (今天新激活-昨天新激活)/昨天新激活<br>
老激活:在过往90天访问池子内的用户数<br>
老激活同比: (今天老激活-昨天老激活)/昨天老激活<br>
新激活订单:新激活用户下的订单数<br>
新激活订单同比: (今天新激活订单-昨天新激活订单)/昨天新激活订单<br>
老激活订单:老激活用户下的订单数<br>
老激活订单同比: (今天老激活订单-昨天老激活订单)/昨天老激活订单<br>
新顾客:过往没有成交的订单,首次下单的下单人数<br>
新顾客同比:(今天新顾客-昨天新顾客)/昨天新顾客<br>
老顾客:过往有成功成交的订单,第二次下单就算老顾客,老顾客人数<br>
老顾客同比:(今天老顾客-昨天老顾客)/昨天老顾客<br>
APP-转化率:订单数/DAU<br>
APP-转化率同比:(今天转化率-昨天转化率)/昨天转化率<br>
APP-单均:收订金额/订单数<br>
APP-单均同比:(今天单均-昨天单均)/昨天单均`"
></header-title>
<div class="expression">
<div class="left">
<div class="wrap">
... ... @@ -119,9 +97,6 @@
<div class="user-register-day-chart charts"></div>
<div class="subTitle">{{subTitle_sp}}</div>
<div class="sp-chart charts"></div>
<div class="buttons"><Button type="ghost" shape="circle"><router-link to="/rs/roi.html">动态创意费用和ROI
</router-link></Button></div>
</div>
</template>
... ...
... ... @@ -3,21 +3,76 @@
<h2 class="title"><em>Yoho!Buy</em> 实时监控</h2>
<p class="now-time">更新时间:{{nowTime}}</p>
<header-title
:title="'交易趋势'"
:title="'今日收订金额与订单数'"
:subTitle="{hasSub: false, title: ''}"
:noReturn = "noReturn"
:helpText="``"
:helpText="`<h2>今日收订金额与订单数</h2><br>
收订金额:erp总收订金额+全球购总收订金额<br>
收订金额同比:(今天收订金额-昨天收订金额)/昨天收订金额<br>
订单数:erp总收订订单数+全球购总收订订单数<br>
订单数同比: (今天订单数-昨天订单数)/昨天订单数<br>
取消率(金额):取消订单金额/总收订金额<br>
取消率同比: (今天取消率-昨天取消率)/昨天取消率<br>
支付率(金额):支付订单金额/总收订金额<br>
支付率同比: (今天支付率-昨天支付率)/昨天支付率<br>
毛利额:成交价-进货价<br>
毛利率:毛利额/总收订金额<br>
毛利率同比: (今天毛利率-昨天毛利率)/昨天毛利率<br>
毛利额:调用erp提供的接口计算商品的毛利额<br>
毛利额同比: (今天毛利额-昨天毛利额)/昨天毛利额<br>
毛利额(除券):毛利额-优惠券使用金额<br>
毛利额(除券)同比: (今天毛利额(除券)-昨天毛利额(除券))/昨天毛利额(除券)<br>`"
></header-title>
<todayData></todayData>
<today-data></today-data>
<chart-today></chart-today>
<all-pie></all-pie>
<header-title
:title="'官网趋势'"
:subTitle="{hasSub: true, title: '(收订金额、新客数、毛利率、优惠券、毛利额(除券))'}"
:noReturn = "noReturn"
:helpText="`<h2>官网趋势</h2><br>
收订金额:erp官网收订金额<br>
收订金额同比:(今天收订金额-昨天收订金额)/昨天收订金额<br>
新客数:过往没有成交的订单,首次下单的下单人数<br>
新客数同比:(今天新客数-昨天新客数)/昨天新客数<br>
老客数:过往有成功成交的订单,第二次下单就算老顾客,老顾客人数<br>
老客数同比:(今天老客数-昨天老客数)/昨天老客数<br>
单均:收订金额/订单数<br>
单均同比:(今天单均-昨天单均)/昨天单均<br>
毛利率:毛利额/总收订金额<br>
毛利率同比: (今天毛利率-昨天毛利率)/昨天毛利率<br>
优惠券:使用优惠券的金额<br>
优惠券同比: (今天优惠券-昨天优惠券)/昨天优惠券<br>
毛利额:成交价-进货价<br>
毛利额(除券):毛利额-优惠券使用金额<br>
毛利额(除券)同比: (今天毛利额(除券)-昨天毛利额(除券))/昨天毛利额(除券)<br>`"
></header-title>
<official-item></official-item>
<!--<chart-average></chart-average>-->
<Row :gutter="16" class="jump-btn-area">
<Col span="8" class-name="jump-btn"><router-link to="/rs/app_detail.html">app趋势</router-link></Col>
<Col span="8" class-name="jump-btn"><router-link to="/rs/detail_port.html">各端口趋势></router-link></Col>
<Col span="8" class-name="jump-btn"><router-link to="/cvr/dashboard.html">4级转化></router-link></Col>
</Row>
<Row :gutter="16" class="jump-btn-area">
<Col span="8" class-name="jump-btn"><router-link to="/rs/ufo.html">UFO商品></router-link></Col>
<Col span="8" class-name="jump-btn"><router-link to="/rs/top_detail.html">TOP实时排行榜></router-link></Col>
<Col span="8" class-name="jump-btn"><router-link to="/rs/mini_program_detail.html">小程序></router-link></Col>
</Row>
<Row :gutter="16" class="jump-btn-area">
<Col span="8" class-name="jump-btn"><router-link to="/rs/offline_detail.html">线下店趋势></router-link></Col>
</Row>
</div>
</template>
<script>
import * as service from 'service.wap';
import headerTitle from 'wap/header-title';
import todayData from './components/today-data';
import chartToday from './components/chart-today';
import todayData from 'wap/home/today-data';
import chartToday from 'wap/home/chart-today';
import allPie from 'wap/home/all-pie';
import officialItem from 'wap/home/official-item';
import chartAverage from 'wap/home/chart-average';
import * as _ from 'lodash';
import moment from 'moment';
export default {
... ... @@ -52,7 +107,7 @@ export default {
});
}
},
components: {headerTitle, todayData, chartToday}
components: {headerTitle, todayData, chartToday, allPie, officialItem, chartAverage}
};
</script>
... ...
const home = r => require.ensure([], () => r(require('./home')), 'home');
export default {
path: '/rs/index.html',
name: 'home',
component: home
};
... ...
... ... @@ -11,7 +11,8 @@ export default {
columns: [
{
key: 'name',
align: 'center'
align: 'center',
width: '150'
},
{
align: 'center',
... ... @@ -166,7 +167,7 @@ export default {
unit: '元'
},
{
name: '市集支付金额',
name: '市集发出金额',
value: this.fmoney(ret.c2cSendGrowthRate.today),
compare: ret.c2cSendGrowthRate.incrPercentBeforeDay,
compareL:ret.c2cSendGrowthRate.incrPercentBeforeYear,
... ...
... ... @@ -3,54 +3,16 @@
<h2 class="title"><em>Yoho!Buy</em> 实时监控</h2>
<p class="now-time">更新时间:{{nowTime}}</p>
<header-title
:title="'今日收订金额与订单数'"
:title="'交易趋势'"
:subTitle="{hasSub: false, title: ''}"
:noReturn = "noReturn"
:helpText="`<h2>今日收订金额与订单数</h2><br>
收订金额:erp总收订金额+全球购总收订金额<br>
收订金额同比:(今天收订金额-昨天收订金额)/昨天收订金额<br>
订单数:erp总收订订单数+全球购总收订订单数<br>
订单数同比: (今天订单数-昨天订单数)/昨天订单数<br>
取消率(金额):取消订单金额/总收订金额<br>
取消率同比: (今天取消率-昨天取消率)/昨天取消率<br>
支付率(金额):支付订单金额/总收订金额<br>
支付率同比: (今天支付率-昨天支付率)/昨天支付率<br>
毛利额:成交价-进货价<br>
毛利率:毛利额/总收订金额<br>
毛利率同比: (今天毛利率-昨天毛利率)/昨天毛利率<br>
毛利额:调用erp提供的接口计算商品的毛利额<br>
毛利额同比: (今天毛利额-昨天毛利额)/昨天毛利额<br>
毛利额(除券):毛利额-优惠券使用金额<br>
毛利额(除券)同比: (今天毛利额(除券)-昨天毛利额(除券))/昨天毛利额(除券)<br>`"
:helpText="``"
></header-title>
<today-data></today-data>
<todayData></todayData>
<chart-today></chart-today>
<all-pie></all-pie>
<header-title
:title="'官网趋势'"
:subTitle="{hasSub: true, title: '(收订金额、新客数、毛利率、优惠券、毛利额(除券))'}"
:noReturn = "noReturn"
:helpText="`<h2>官网趋势</h2><br>
收订金额:erp官网收订金额<br>
收订金额同比:(今天收订金额-昨天收订金额)/昨天收订金额<br>
新客数:过往没有成交的订单,首次下单的下单人数<br>
新客数同比:(今天新客数-昨天新客数)/昨天新客数<br>
老客数:过往有成功成交的订单,第二次下单就算老顾客,老顾客人数<br>
老客数同比:(今天老客数-昨天老客数)/昨天老客数<br>
单均:收订金额/订单数<br>
单均同比:(今天单均-昨天单均)/昨天单均<br>
毛利率:毛利额/总收订金额<br>
毛利率同比: (今天毛利率-昨天毛利率)/昨天毛利率<br>
优惠券:使用优惠券的金额<br>
优惠券同比: (今天优惠券-昨天优惠券)/昨天优惠券<br>
毛利额:成交价-进货价<br>
毛利额(除券):毛利额-优惠券使用金额<br>
毛利额(除券)同比: (今天毛利额(除券)-昨天毛利额(除券))/昨天毛利额(除券)<br>`"
></header-title>
<official-item></official-item>
<!--<chart-average></chart-average>-->
<Row :gutter="16" class="jump-btn-area">
<Col span="8" class-name="jump-btn"><router-link to="/rs/app_detail.html">app趋势</router-link></Col>
<Col span="8" class-name="jump-btn"><router-link to="/rs/market.html">市场</router-link></Col>
<Col span="8" class-name="jump-btn"><router-link to="/rs/detail_port.html">各端口趋势></router-link></Col>
<Col span="8" class-name="jump-btn"><router-link to="/cvr/dashboard.html">4级转化></router-link></Col>
</Row>
... ... @@ -68,11 +30,8 @@
<script>
import * as service from 'service.wap';
import headerTitle from 'wap/header-title';
import todayData from 'wap/home/today-data';
import chartToday from 'wap/home/chart-today';
import allPie from 'wap/home/all-pie';
import officialItem from 'wap/home/official-item';
import chartAverage from 'wap/home/chart-average';
import todayData from './components/today-data';
import chartToday from './components/chart-today';
import * as _ from 'lodash';
import moment from 'moment';
export default {
... ... @@ -90,7 +49,7 @@ export default {
self.getTimeData();
this.interval = setInterval(function() {
self.serverTime += 1000;
self.nowTime = moment(self.serverTime).format('YYYY-MM-DD hh:mm:ss');
self.nowTime = moment(self.serverTime).format('YYYY-MM-DD HH:mm:ss');
}, 1000);
},
... ... @@ -107,7 +66,7 @@ export default {
});
}
},
components: {headerTitle, todayData, chartToday, allPie, officialItem, chartAverage}
components: {headerTitle, todayData, chartToday}
};
</script>
... ...
... ... @@ -12,13 +12,13 @@ import roi from './roi';
import miniProgram from './miniProgram';
import topSkn from './topskn';
import bind from './bind';
import trend from './trend';
import market from './market';
let defaultRouter = {
path: '/',
redirect: '/rs/index.html'
};
export default [login, home, appDetail, fourLevel, portDetail, offlineDetail, topDetail, trendCharts, defaultRouter, flowSource, userCost, roi, miniProgram, topSkn, bind, trend];
export default [login, home, appDetail, fourLevel, portDetail, offlineDetail, topDetail, trendCharts, defaultRouter, flowSource, userCost, roi, miniProgram, topSkn, bind, market];
... ...
const market = r => require.ensure([], () => r(require('./market')), 'market');
export default {
path: '/rs/market.html',
name: 'market',
component: market
};
... ...
<template>
<div class="port-detail">
<header-title
:title="'市场趋势'"
:subTitle="{hasSub: false, title: ''}"
:noReturn = "noReturn"
:helpText="``"
></header-title>
<Radio-group type="button" v-model="channel" size="large" class="channel" @on-change="getChannel">
<Radio label="app趋势"></Radio>
<Radio label="各端口趋势"></Radio>
</Radio-group>
<app-detail v-if="channel === 'app趋势'"></app-detail>
<port-detail v-else></port-detail>
</div>
</template>
<script>
import * as service from 'service.wap';
import headerTitle from 'wap/header-title';
import portDetail from '../portDetail/port-detail';
import appDetail from '../appDetail/appDetail';
import * as _ from 'lodash';
let channelId = {
'app趋势': 1,
'各端口趋势': 2
};
export default {
name: 'trend-detail',
data() {
return {
channel: 'app趋势',
cId: this.$store.get('app-channel') || 1
};
},
created() {
_.each(channelId, (item, key) => {
if (item == this.$store.get('app-channel')) {
this.channel = key;
}
});
this.$store.set('app-channel', channelId[this.channel]);
},
methods: {
getChannel(e) {
this.cId = channelId[e];
this.$store.set('app-channel', this.cId);
}
},
components: {headerTitle, appDetail, portDetail}
}
</script>
<style lang="scss" scoped>
body {
margin: 0;
padding: 0;
background: url(../img/back.png);
}
.port-detail {
display: flex;
flex-direction: column;
.channel {
margin: 0 auto 20px;
text-align: center;
display: block;
}
.ivu-radio-group-button .ivu-radio-wrapper{
background: transparent;
color: #fff;
height: 45px;
line-height: 43px;
width: 100px;
padding: 0;
text-align: center;
}
.ivu-radio-wrapper-checked{
background: #fff!important;
color: #000!important;
}
.expression{
border:1px solid #fff;
border-radius: 5px;
width: 98%;
height: 300px;
box-sizing: border-box;
color: #fff;
margin: 0 1% 60px;
.marTop{
margin-top: 10px;
}
.red{
color: red;
}
.green{
color: green;
}
.cheng{
color: #ff641c;
}
.bigger{
font-size: 16px;
}
.left{
width: 17%;
line-height: 300px;
height: 100%;
float: left;
}
.right{
width: 83%;
height: 100%;
line-height: 300px;
float: left;
position: relative;
.kuohao{
width: 20px;
height: 80%;
vertical-align: middle;
}
.container{
position:absolute;
width: 100%;
height: 100%;
padding-left: 20px;
box-sizing: border-box;
top:0;
.wrap{
width: 22.5%;
}
.top,.bottom{
height: 50%;
line-height: 150px;
}
}
.last{
width: 28%;
height: 100%;
vertical-align: middle;
display: inline-block;
position: relative;
.top2,.bottom2{
height: 50%;
line-height: 75px;
.wrap{
width: 100%;
}
}
}
}
.wrap{
display:inline-block;
vertical-align: middle;
line-height: 1;
width: 100%;
text-align: center;
padding:0 5px;
.border{
border-bottom:1px solid #fff;
padding-bottom:5px;
}
.noborder{
p:after{
content:'';
display:block;
background:url(../img/point.png);
height: 6px;
background-size: 100% 100%;
margin-bottom: -2px;
margin-top: 4px;
}
}
.noimg{
border: none!important;
p:after{
background:none;
}
}
span{
margin-top: 5px;
display: inline-block;
}
p{
font-size: 12px;
}
}
}
}
</style>
\ No newline at end of file
... ...
<template>
<div class="port-detail">
<header-title
:title="'各端口趋势'"
:subTitle="{hasSub: true, title: '(收订金额、UV、转化率、单均、订单数)'}"
:helpText="`<h2>各端口趋势</h2><br>
收订金额:erp收订金额+全球购收订金额<br>
收订金额同比:(今天收订金额-昨天收订金额)/昨天收订金额<br>
DAU:日激活<br>
DAU同比: (今天DAU-昨天DAU)/昨天DAU<br>
转化率:订单数/DAU<br>
转化率同比:(今天转化率-昨天转化率)/昨天转化率<br>
单均:收订金额/订单数<br>
单均同比:(今天单均-昨天单均)/昨天单均<br>
新客数:过往没有成交的订单,首次下单的下单人数<br>
新客数同比:(今天新客数-昨天新客数)/昨天新客数<br>
毛利额:成交价-进货价<br>
毛利率:毛利额/总收订金额<br>
毛利率同比: (今天毛利率-昨天毛利率)/昨天毛利率<br>
优惠券:使用优惠券的金额<br>
优惠券同比: (今天优惠券-昨天优惠券)/昨天优惠券<br>
新激活:不在过往90天访问池子内的用户数<br>
新激活同比: (今天新激活-昨天新激活)/昨天新激活<br>
老激活:在过往90天访问池子内的用户数<br>
老激活同比: (今天老激活-昨天老激活)/昨天老激活<br>`"
></header-title>
<Radio-group type="button" v-model="channel" size="large" class="channel" @on-change="getChannel">
<Radio label="IOS"></Radio>
<Radio label="Android"></Radio>
... ...
const trend = r => require.ensure([], () => r(require('./trend')), 'trend');
export default {
path: '/rs/trend.html',
name: 'trend',
component: trend
};