Skip to content

A
ant-design-pro-vue
Unverified Commit 3cbed2bd by Sendya
Options

chore: fix eslint

parent 9a71d50b
Showing with 356 additions and 356 deletions
src/views/dashboard/Analysis.vue
<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 />
</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="8px" />
</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-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
<div class="salesCard">
<a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
<div class="extra-wrapper" slot="tabBarExtraContent">
<div class="extra-item">
<a>今日</a>
<a>本周</a>
<a>本月</a>
<a>本年</a>
</div>
<a-range-picker :style="{width: '256px'}" />
</div>
<a-tab-pane loading="true" tab="销售额" key="1">
<a-row>
<a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
<bar title="销售额排行" />
</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>
<a-tab-pane tab="访问量" key="2">
<a-row>
<a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
<bar title="销售额趋势" />
</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>
</a-tabs>
</div>
</a-card>
<a-row :gutter="12">
<a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
<a-card :loading="loading" :bordered="false" title="线上热门搜索" :style="{ marginTop: '24px', height: '500px' }">
<a-dropdown :trigger="['click']" placement="bottomLeft" slot="extra">
<a class="ant-dropdown-link" href="#">
<a-icon type="ellipsis" />
</a>
<a-menu slot="overlay">
<a-menu-item>
<a href="javascript:;">操作一</a>
</a-menu-item>
<a-menu-item>
<a href="javascript:;">操作二</a>
</a-menu-item>
</a-menu>
</a-dropdown>
<a-row :gutter="68">
<a-col :xs="24" :sm="12" :style="{ marginBottom: ' 24px'}">
<number-info :total="12321" :sub-total="17.1">
<span slot="subtitle">
<span>搜索用户数</span>
<a-tooltip title="指标说明" slot="action">
<a-icon type="info-circle-o" :style="{ marginLeft: '8px' }" />
</a-tooltip>
</span>
</number-info>
<!-- miniChart -->
<div>
<mini-smooth-area :style="{ height: '45px' }" :dataSource="searchUserData" :scale="searchUserScale" />
</div>
</a-col>
<a-col :xs="24" :sm="12" :style="{ marginBottom: ' 24px'}">
<number-info :total="2.7" :sub-total="26.2" status="down">
<span slot="subtitle">
<span>人均搜索次数</span>
<a-tooltip title="指标说明" slot="action">
<a-icon type="info-circle-o" :style="{ marginLeft: '8px' }" />
</a-tooltip>
</span>
</number-info>
<!-- miniChart -->
<div>
<mini-smooth-area :style="{ height: '45px' }" :dataSource="searchUserData" :scale="searchUserScale" />
</div>
</a-col>
</a-row>
<div class="ant-table-wrapper">
<a-table
row-key="index"
size="small"
:columns="searchTableColumns"
:dataSource="searchData"
:pagination="{ pageSize: 5 }"
/>
</div>
</a-card>
</a-col>
<a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
<a-card :loading="loading" :bordered="false" title="销售额类别占比" :style="{ marginTop: '24px', height: '500px' }">
<div slot="extra" style="height: inherit;">
<div style="bottom: 12px;display: inline-block;">
<a-radio-group defaultValue="a">
<a-radio-button value="a">全部渠道</a-radio-button>
<a-radio-button value="b">线上</a-radio-button>
<a-radio-button value="c">门店</a-radio-button>
</a-radio-group>
</div>
<span class="dashboard-analysis-iconGroup">
<a-dropdown :trigger="['click']" placement="bottomLeft">
<a-icon type="ellipsis" class="ant-dropdown-link" />
<a-menu slot="overlay">
<a-menu-item>
<a href="javascript:;">操作一</a>
</a-menu-item>
<a-menu-item>
<a href="javascript:;">操作二</a>
</a-menu-item>
</a-menu>
</a-dropdown>
</span>
</div>
<h4>销售额</h4>
<div>
<v-chart :force-fit="true" :height="350" :data="pieData" :scale="pieScale">
<v-tooltip :showTitle="false" dataKey="item*percent" />
<v-axis />
<v-legend dataKey="item" position="right" :offsetX="-140"/>
<v-pie position="percent" color="item" :vStyle="pieStyle" />
<v-coord type="theta" :radius="0.75" :innerRadius="0.6" />
</v-chart>
</div>
</a-card>
</a-col>
</a-row>
</div>
</template>
<script>
import moment from 'moment'
import { ChartCard, MiniArea, MiniBar, MiniProgress, RankList, Bar, Trend, NumberInfo, MiniSmoothArea } from '@/components'
const rankList = []
for (let i = 0; i < 7; i++) {
rankList.push({
name: '白鹭岛 ' + (i + 1) + ' 号店',
total: 1234.56 - i * 100
})
}
const searchUserData = []
for (let i = 0; i < 7; i++) {
searchUserData.push({
x: moment().add(i, 'days').format('YYYY-MM-DD'),
y: Math.ceil(Math.random() * 10)
})
}
const searchUserScale = [
{
dataKey: 'x',
alias: '时间'
},
{
dataKey: 'y',
alias: '用户数',
min: 0,
max: 10
}]
const searchTableColumns = [
{
dataIndex: 'index',
title: '排名',
width: 90
},
{
dataIndex: 'keyword',
title: '搜索关键词'
},
{
dataIndex: 'count',
title: '用户数',
width: 164
},
{
dataIndex: 'range',
title: '周涨幅',
align: 'right',
sorter: (a, b) => a.range - b.range,
width: 164
}
]
const searchData = []
for (let i = 0; i < 50; i += 1) {
searchData.push({
index: i + 1,
keyword: `搜索关键词-${i}`,
count: Math.floor(Math.random() * 1000),
range: Math.floor(Math.random() * 100),
status: Math.floor((Math.random() * 10) % 2)
})
}
const DataSet = require('@antv/data-set')
const sourceData = [
{ item: '家用电器', count: 32.2 },
{ item: '食用酒水', count: 21 },
{ item: '个护健康', count: 17 },
{ item: '服饰箱包', count: 13 },
{ item: '母婴产品', count: 9 },
{ item: '其他', count: 7.8 }
]
const pieScale = [{
dataKey: 'percent',
min: 0,
formatter: '.0%'
}]
const dv = new DataSet.View().source(sourceData)
dv.transform({
type: 'percent',
field: 'count',
dimension: 'item',
as: 'percent'
})
const pieData = dv.rows
export default {
name: 'Analysis',
components: {
ChartCard,
MiniArea,
MiniBar,
MiniProgress,
RankList,
Bar,
Trend,
NumberInfo,
MiniSmoothArea
},
data () {
return {
loading: true,
rankList,
// 搜索用户数
searchUserData,
searchUserScale,
searchTableColumns,
searchData,
//
pieScale,
pieData,
sourceData,
pieStyle: {
stroke: '#fff',
lineWidth: 1
}
}
},
created () {
setTimeout(() => {
this.loading = !this.loading
}, 1000)
}
}
</script>
<style lang="less" scoped>
.extra-wrapper {
line-height: 55px;
padding-right: 24px;
.extra-item {
display: inline-block;
margin-right: 24px;
a {
margin-left: 24px;
}
}
}
.dashboard-analysis-iconGroup {
i {
margin-left: 16px;
color: rgba(0,0,0,.45);
cursor: pointer;
transition: color .32s;
color: black;
}
}
</style>
<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 />
</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="8px" />
</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-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
<div class="salesCard">
<a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
<div class="extra-wrapper" slot="tabBarExtraContent">
<div class="extra-item">
<a>今日</a>
<a>本周</a>
<a>本月</a>
<a>本年</a>
</div>
<a-range-picker :style="{width: '256px'}" />
</div>
<a-tab-pane loading="true" tab="销售额" key="1">
<a-row>
<a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
<bar title="销售额排行" />
</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>
<a-tab-pane tab="访问量" key="2">
<a-row>
<a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
<bar title="销售额趋势" />
</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>
</a-tabs>
</div>
</a-card>
<a-row :gutter="12">
<a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
<a-card :loading="loading" :bordered="false" title="线上热门搜索" :style="{ marginTop: '24px', height: '500px' }">
<a-dropdown :trigger="['click']" placement="bottomLeft" slot="extra">
<a class="ant-dropdown-link" href="#">
<a-icon type="ellipsis" />
</a>
<a-menu slot="overlay">
<a-menu-item>
<a href="javascript:;">操作一</a>
</a-menu-item>
<a-menu-item>
<a href="javascript:;">操作二</a>
</a-menu-item>
</a-menu>
</a-dropdown>
<a-row :gutter="68">
<a-col :xs="24" :sm="12" :style="{ marginBottom: ' 24px'}">
<number-info :total="12321" :sub-total="17.1">
<span slot="subtitle">
<span>搜索用户数</span>
<a-tooltip title="指标说明" slot="action">
<a-icon type="info-circle-o" :style="{ marginLeft: '8px' }" />
</a-tooltip>
</span>
</number-info>
<!-- miniChart -->
<div>
<mini-smooth-area :style="{ height: '45px' }" :dataSource="searchUserData" :scale="searchUserScale" />
</div>
</a-col>
<a-col :xs="24" :sm="12" :style="{ marginBottom: ' 24px'}">
<number-info :total="2.7" :sub-total="26.2" status="down">
<span slot="subtitle">
<span>人均搜索次数</span>
<a-tooltip title="指标说明" slot="action">
<a-icon type="info-circle-o" :style="{ marginLeft: '8px' }" />
</a-tooltip>
</span>
</number-info>
<!-- miniChart -->
<div>
<mini-smooth-area :style="{ height: '45px' }" :dataSource="searchUserData" :scale="searchUserScale" />
</div>
</a-col>
</a-row>
<div class="ant-table-wrapper">
<a-table
row-key="index"
size="small"
:columns="searchTableColumns"
:dataSource="searchData"
:pagination="{ pageSize: 5 }"
/>
</div>
</a-card>
</a-col>
<a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
<a-card :loading="loading" :bordered="false" title="销售额类别占比" :style="{ marginTop: '24px', height: '500px' }">
<div slot="extra" style="height: inherit;">
<div style="bottom: 12px;display: inline-block;">
<a-radio-group defaultValue="a">
<a-radio-button value="a">全部渠道</a-radio-button>
<a-radio-button value="b">线上</a-radio-button>
<a-radio-button value="c">门店</a-radio-button>
</a-radio-group>
</div>
<span class="dashboard-analysis-iconGroup">
<a-dropdown :trigger="['click']" placement="bottomLeft">
<a-icon type="ellipsis" class="ant-dropdown-link" />
<a-menu slot="overlay">
<a-menu-item>
<a href="javascript:;">操作一</a>
</a-menu-item>
<a-menu-item>
<a href="javascript:;">操作二</a>
</a-menu-item>
</a-menu>
</a-dropdown>
</span>
</div>
<h4>销售额</h4>
<div>
<v-chart :force-fit="true" :height="350" :data="pieData" :scale="pieScale">
<v-tooltip :showTitle="false" dataKey="item*percent" />
<v-axis />
<v-legend dataKey="item" position="right" :offsetX="-140"/>
<v-pie position="percent" color="item" :vStyle="pieStyle" />
<v-coord type="theta" :radius="0.75" :innerRadius="0.6" />
</v-chart>
</div>
</a-card>
</a-col>
</a-row>
</div>
</template>
<script>
import moment from 'moment'
import { ChartCard, MiniArea, MiniBar, MiniProgress, RankList, Bar, Trend, NumberInfo, MiniSmoothArea } from '@/components'
const rankList = []
for (let i = 0; i < 7; i++) {
rankList.push({
name: '白鹭岛 ' + (i + 1) + ' 号店',
total: 1234.56 - i * 100
})
}
const searchUserData = []
for (let i = 0; i < 7; i++) {
searchUserData.push({
x: moment().add(i, 'days').format('YYYY-MM-DD'),
y: Math.ceil(Math.random() * 10)
})
}
const searchUserScale = [
{
dataKey: 'x',
alias: '时间'
},
{
dataKey: 'y',
alias: '用户数',
min: 0,
max: 10
}]
const searchTableColumns = [
{
dataIndex: 'index',
title: '排名',
width: 90
},
{
dataIndex: 'keyword',
title: '搜索关键词'
},
{
dataIndex: 'count',
title: '用户数',
width: 164
},
{
dataIndex: 'range',
title: '周涨幅',
align: 'right',
sorter: (a, b) => a.range - b.range,
width: 164
}
]
const searchData = []
for (let i = 0; i < 50; i += 1) {
searchData.push({
index: i + 1,
keyword: `搜索关键词-${i}`,
count: Math.floor(Math.random() * 1000),
range: Math.floor(Math.random() * 100),
status: Math.floor((Math.random() * 10) % 2)
})
}
const DataSet = require('@antv/data-set')
const sourceData = [
{ item: '家用电器', count: 32.2 },
{ item: '食用酒水', count: 21 },
{ item: '个护健康', count: 17 },
{ item: '服饰箱包', count: 13 },
{ item: '母婴产品', count: 9 },
{ item: '其他', count: 7.8 }
]
const pieScale = [{
dataKey: 'percent',
min: 0,
formatter: '.0%'
}]
const dv = new DataSet.View().source(sourceData)
dv.transform({
type: 'percent',
field: 'count',
dimension: 'item',
as: 'percent'
})
const pieData = dv.rows
export default {
name: 'Analysis',
components: {
ChartCard,
MiniArea,
MiniBar,
MiniProgress,
RankList,
Bar,
Trend,
NumberInfo,
MiniSmoothArea
},
data () {
return {
loading: true,
rankList,
// 搜索用户数
searchUserData,
searchUserScale,
searchTableColumns,
searchData,
//
pieScale,
pieData,
sourceData,
pieStyle: {
stroke: '#fff',
lineWidth: 1
}
}
},
created () {
setTimeout(() => {
this.loading = !this.loading
}, 1000)
}
}
</script>
<style lang="less" scoped>
.extra-wrapper {
line-height: 55px;
padding-right: 24px;
.extra-item {
display: inline-block;
margin-right: 24px;
a {
margin-left: 24px;
}
}
}
.dashboard-analysis-iconGroup {
i {
margin-left: 16px;
color: rgba(0,0,0,.45);
cursor: pointer;
transition: color .32s;
color: black;
}
}
</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