|
@@ -1,65 +1,105 @@
|
|
|
<template>
|
|
|
<div class="page-header-index-wide">
|
|
|
- <a-row :gutter="24">
|
|
|
- <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
|
|
|
- <chart-card :loading="loading" title="总销售额" total="¥126,560">
|
|
|
- <a-tooltip title="指标说明" slot="action">
|
|
|
- <a-icon type="info-circle-o"/>
|
|
|
- </a-tooltip>
|
|
|
- <div>
|
|
|
- <trend flag="up" style="margin-right: 16px;">
|
|
|
- <span slot="term">周同比</span>
|
|
|
- 12%
|
|
|
- </trend>
|
|
|
- <trend flag="down">
|
|
|
- <span slot="term">日同比</span>
|
|
|
- 11%
|
|
|
- </trend>
|
|
|
- </div>
|
|
|
- <template slot="footer">日均销售额<span>¥ 234.56</span></template>
|
|
|
- </chart-card>
|
|
|
- </a-col>
|
|
|
- <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
|
|
|
- <chart-card :loading="loading" title="访问量" :total="8846 | NumberFormat">
|
|
|
- <a-tooltip title="指标说明" slot="action">
|
|
|
- <a-icon type="info-circle-o"/>
|
|
|
- </a-tooltip>
|
|
|
- <div>
|
|
|
- <mini-area/>
|
|
|
- </div>
|
|
|
- <template slot="footer">日访问量<span> {{ '1234' | NumberFormat }}</span></template>
|
|
|
- </chart-card>
|
|
|
- </a-col>
|
|
|
- <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
|
|
|
- <chart-card :loading="loading" title="支付笔数" :total="6560 | NumberFormat">
|
|
|
- <a-tooltip title="指标说明" slot="action">
|
|
|
- <a-icon type="info-circle-o"/>
|
|
|
- </a-tooltip>
|
|
|
- <div>
|
|
|
- <mini-bar :height="40"/>
|
|
|
- </div>
|
|
|
- <template slot="footer">转化率 <span>60%</span></template>
|
|
|
- </chart-card>
|
|
|
+<!-- <a-row :gutter="24">-->
|
|
|
+<!-- <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">-->
|
|
|
+<!-- <chart-card :loading="loading" title="总销售额" total="¥126,560">-->
|
|
|
+<!-- <a-tooltip title="指标说明" slot="action">-->
|
|
|
+<!-- <a-icon type="info-circle-o"/>-->
|
|
|
+<!-- </a-tooltip>-->
|
|
|
+<!-- <div>-->
|
|
|
+<!-- <trend flag="up" style="margin-right: 16px;">-->
|
|
|
+<!-- <span slot="term">周同比</span>-->
|
|
|
+<!-- 12%-->
|
|
|
+<!-- </trend>-->
|
|
|
+<!-- <trend flag="down">-->
|
|
|
+<!-- <span slot="term">日同比</span>-->
|
|
|
+<!-- 11%-->
|
|
|
+<!-- </trend>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- <template slot="footer">日均销售额<span>¥ 234.56</span></template>-->
|
|
|
+<!-- </chart-card>-->
|
|
|
+<!-- </a-col>-->
|
|
|
+<!-- <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">-->
|
|
|
+<!-- <chart-card :loading="loading" title="访问量" :total="8846 | NumberFormat">-->
|
|
|
+<!-- <a-tooltip title="指标说明" slot="action">-->
|
|
|
+<!-- <a-icon type="info-circle-o"/>-->
|
|
|
+<!-- </a-tooltip>-->
|
|
|
+<!-- <div>-->
|
|
|
+<!-- <mini-area/>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- <template slot="footer">日访问量<span> {{ '1234' | NumberFormat }}</span></template>-->
|
|
|
+<!-- </chart-card>-->
|
|
|
+<!-- </a-col>-->
|
|
|
+<!-- <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">-->
|
|
|
+<!-- <chart-card :loading="loading" title="支付笔数" :total="6560 | NumberFormat">-->
|
|
|
+<!-- <a-tooltip title="指标说明" slot="action">-->
|
|
|
+<!-- <a-icon type="info-circle-o"/>-->
|
|
|
+<!-- </a-tooltip>-->
|
|
|
+<!-- <div>-->
|
|
|
+<!-- <mini-bar :height="40"/>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- <template slot="footer">转化率 <span>60%</span></template>-->
|
|
|
+<!-- </chart-card>-->
|
|
|
+<!-- </a-col>-->
|
|
|
+<!-- <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">-->
|
|
|
+<!-- <chart-card :loading="loading" title="运营活动效果" total="78%">-->
|
|
|
+<!-- <a-tooltip title="指标说明" slot="action">-->
|
|
|
+<!-- <a-icon type="info-circle-o"/>-->
|
|
|
+<!-- </a-tooltip>-->
|
|
|
+<!-- <div>-->
|
|
|
+<!-- <mini-progress color="rgb(19, 194, 194)" :target="80" :percentage="78" :height="8"/>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- <template slot="footer">-->
|
|
|
+<!-- <trend flag="down" style="margin-right: 16px;">-->
|
|
|
+<!-- <span slot="term">同周比</span>-->
|
|
|
+<!-- 12%-->
|
|
|
+<!-- </trend>-->
|
|
|
+<!-- <trend flag="up">-->
|
|
|
+<!-- <span slot="term">日环比</span>-->
|
|
|
+<!-- 80%-->
|
|
|
+<!-- </trend>-->
|
|
|
+<!-- </template>-->
|
|
|
+<!-- </chart-card>-->
|
|
|
+<!-- </a-col>-->
|
|
|
+<!-- </a-row>-->
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="24">
|
|
|
+ <a-card :loading="loading" :bordered="false" title="今日新增" :style="{ marginTop: '24px' }">
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="6">
|
|
|
+ <head-info title="广告主" :content="advertiserTodayCount"></head-info>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="6">
|
|
|
+ <head-info title="广告封面" :content="adTodayCount"></head-info>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="6">
|
|
|
+ <head-info title="广告视频" :content="videoTodayCount"></head-info>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="6">
|
|
|
+ <head-info title="推广品" :content="productTodayCount"></head-info>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-card>
|
|
|
</a-col>
|
|
|
- <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
|
|
|
- <chart-card :loading="loading" title="运营活动效果" total="78%">
|
|
|
- <a-tooltip title="指标说明" slot="action">
|
|
|
- <a-icon type="info-circle-o"/>
|
|
|
- </a-tooltip>
|
|
|
- <div>
|
|
|
- <mini-progress color="rgb(19, 194, 194)" :target="80" :percentage="78" :height="8"/>
|
|
|
- </div>
|
|
|
- <template slot="footer">
|
|
|
- <trend flag="down" style="margin-right: 16px;">
|
|
|
- <span slot="term">同周比</span>
|
|
|
- 12%
|
|
|
- </trend>
|
|
|
- <trend flag="up">
|
|
|
- <span slot="term">日环比</span>
|
|
|
- 80%
|
|
|
- </trend>
|
|
|
- </template>
|
|
|
- </chart-card>
|
|
|
+ </a-row>
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="24">
|
|
|
+ <a-card :loading="loading" :bordered="false" title="数据总量" :style="{ marginTop: '24px' }">
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="6">
|
|
|
+ <head-info title="广告主" :content="advertiserAllCount"></head-info>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="6">
|
|
|
+ <head-info title="广告封面" :content="adAllCount"></head-info>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="6">
|
|
|
+ <head-info title="广告视频" :content="videoAllCount"></head-info>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="6">
|
|
|
+ <head-info title="推广品" :content="productAllCount"></head-info>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-card>
|
|
|
</a-col>
|
|
|
</a-row>
|
|
|
|
|
@@ -75,23 +115,33 @@
|
|
|
</div>
|
|
|
<a-range-picker :style="{width: '256px'}"/>
|
|
|
</div>
|
|
|
- <a-tab-pane loading="true" tab="销售额" key="1">
|
|
|
+ <a-tab-pane loading="true" tab="行业" key="1">
|
|
|
<a-row>
|
|
|
<a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
|
|
|
- <bar title="销售额排行" :dataSource="barData"/>
|
|
|
+ <bar title="展示排行" :dataSource="barData"/>
|
|
|
</a-col>
|
|
|
<a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
|
|
|
- <rank-list title="门店销售排行榜" :list="rankList"/>
|
|
|
+ <rank-list title="热门素材排行榜" :list="rankList"/>
|
|
|
</a-col>
|
|
|
</a-row>
|
|
|
</a-tab-pane>
|
|
|
- <a-tab-pane tab="访问量" key="2">
|
|
|
+ <a-tab-pane tab="推广品" key="2">
|
|
|
<a-row>
|
|
|
<a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
|
|
|
- <bar title="销售额趋势" :dataSource="barData"/>
|
|
|
+ <bar title="展示排行" :dataSource="barData"/>
|
|
|
</a-col>
|
|
|
<a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
|
|
|
- <rank-list title="门店销售排行榜" :list="rankList"/>
|
|
|
+ <rank-list title="热门素材排行榜" :list="rankList"/>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-tab-pane>
|
|
|
+ <a-tab-pane tab="广告主" key="3">
|
|
|
+ <a-row>
|
|
|
+ <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
|
|
|
+ <bar title="展示排行" :dataSource="barData"/>
|
|
|
+ </a-col>
|
|
|
+ <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
|
|
|
+ <rank-list title="热门素材排行榜" :list="rankList"/>
|
|
|
</a-col>
|
|
|
</a-row>
|
|
|
</a-tab-pane>
|
|
@@ -99,39 +149,7 @@
|
|
|
</div>
|
|
|
</a-card>
|
|
|
|
|
|
- <a-row>
|
|
|
- <a-col :span="24">
|
|
|
- <a-card :loading="loading" :bordered="false" title="最近一周访问次数统计" :style="{ marginTop: '24px' }">
|
|
|
- <a-row>
|
|
|
- <a-col :span="6">
|
|
|
- <head-info title="今日访问IP数" :content="loginfo.todayIp"></head-info>
|
|
|
- </a-col>
|
|
|
- <a-col :span="2">
|
|
|
- <a-spin class='circle-cust'>
|
|
|
- <a-icon slot="indicator" type="environment" style="font-size: 24px"/>
|
|
|
- </a-spin>
|
|
|
- </a-col>
|
|
|
- <a-col :span="6">
|
|
|
- <head-info title="今日访问次数" :content="loginfo.todayVisitCount"></head-info>
|
|
|
- </a-col>
|
|
|
- <a-col :span="2">
|
|
|
- <a-spin class='circle-cust'>
|
|
|
- <a-icon slot="indicator" type="team" style="font-size: 24px"/>
|
|
|
- </a-spin>
|
|
|
- </a-col>
|
|
|
- <a-col :span="6">
|
|
|
- <head-info title="访问总次数" :content="loginfo.totalVisitCount"></head-info>
|
|
|
- </a-col>
|
|
|
- <a-col :span="2">
|
|
|
- <a-spin class='circle-cust'>
|
|
|
- <a-icon slot="indicator" type="rise" style="font-size: 24px"/>
|
|
|
- </a-spin>
|
|
|
- </a-col>
|
|
|
- </a-row>
|
|
|
- <line-chart-multid :fields="visitFields" :dataSource="visitInfo"></line-chart-multid>
|
|
|
- </a-card>
|
|
|
- </a-col>
|
|
|
- </a-row>
|
|
|
+
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
@@ -146,7 +164,7 @@
|
|
|
import Bar from '@/components/chart/Bar'
|
|
|
import LineChartMultid from '@/components/chart/LineChartMultid'
|
|
|
import HeadInfo from '@/components/tools/HeadInfo.vue'
|
|
|
-
|
|
|
+ import {httpAction,getAction} from '@/api/manage'
|
|
|
import Trend from '@/components/Trend'
|
|
|
import {getLoginfo, getVisitInfo} from '@/api/api'
|
|
|
|
|
@@ -183,34 +201,41 @@
|
|
|
return {
|
|
|
loading: true,
|
|
|
center: null,
|
|
|
- rankList,
|
|
|
- barData,
|
|
|
- loginfo: {},
|
|
|
- visitFields: ['ip', 'visit'],
|
|
|
- visitInfo: [],
|
|
|
- indicator: <a-icon type="loading" style = "font-size: 24px" spin />
|
|
|
+ advertiserTodayCount:0,
|
|
|
+ productTodayCount:0,
|
|
|
+ adTodayCount:0,
|
|
|
+ videoTodayCount:0,
|
|
|
+ advertiserAllCount:0,
|
|
|
+ productAllCount:0,
|
|
|
+ adAllCount:0,
|
|
|
+ videoAllCount:0,
|
|
|
+ rankList:[],
|
|
|
+ barData:[],
|
|
|
+ url:{
|
|
|
+ summaryToday:"/ctop/adcover/summary/today",
|
|
|
+ summaryAll:"/ctop/adcover/summary/all"
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
setTimeout(() => {
|
|
|
this.loading = !this.loading
|
|
|
}, 1000)
|
|
|
- this.initLogInfo();
|
|
|
+ this.initDataInfo();
|
|
|
},
|
|
|
methods: {
|
|
|
- initLogInfo() {
|
|
|
- getLoginfo(null).then((res) => {
|
|
|
+ initDataInfo() {
|
|
|
+ this.barData=barData
|
|
|
+ this.rankList=rankList
|
|
|
+
|
|
|
+ getAction(this.url.summaryToday).then((res) => {
|
|
|
if (res.success) {
|
|
|
- Object.keys(res.result).forEach(key => {
|
|
|
- res.result[key] = res.result[key] + ""
|
|
|
- })
|
|
|
- this.loginfo = res.result;
|
|
|
+ console.log(res.result)
|
|
|
}
|
|
|
})
|
|
|
- getVisitInfo().then(res => {
|
|
|
+ getAction(this.url.summaryAll).then(res => {
|
|
|
if (res.success) {
|
|
|
- console.log("aaaaaa", res.result)
|
|
|
- this.visitInfo = res.result;
|
|
|
+ console.log(res.result)
|
|
|
}
|
|
|
})
|
|
|
},
|