szh_zidingyibiaoti
张同海 2 years ago
parent f1000b922d
commit 5bdb8818f7

@ -36,10 +36,7 @@
</a-col> </a-col>
<a-col :span="12"> <a-col :span="12">
<a-form-item label="航线" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback> <a-form-item label="航线" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input <a-input placeholder="请输入航线" v-decorator="['shippingRoute']" />
placeholder="请输入航线"
v-decorator="['shippingRoute', { rules: [{ required: true, message: '请输入航线!' }] }]"
/>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="12"> <a-col :span="12">

@ -35,14 +35,11 @@
/> />
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="12"> <!-- <a-col :span="12">
<a-form-item label="航线" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback> <a-form-item label="航线" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input <a-input placeholder="请输入航线" v-decorator="['shippingRoute']" />
placeholder="请输入航线"
v-decorator="['shippingRoute', { rules: [{ required: true, message: '请输入航线!' }] }]"
/>
</a-form-item> </a-form-item>
</a-col> </a-col> -->
<a-col :span="12"> <a-col :span="12">
<a-form-item label="国家" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback> <a-form-item label="国家" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input <a-input

@ -119,12 +119,12 @@ export default {
width: '80', width: '80',
dataIndex: 'cnName' dataIndex: 'cnName'
}, },
{ // {
title: '航线', // title: '线',
align: 'center', // align: 'center',
width: '80', // width: '80',
dataIndex: 'shippingRoute' // dataIndex: 'shippingRoute'
}, // },
{ {
title: '国家', title: '国家',
align: 'center', align: 'center',

@ -27,7 +27,9 @@
<div> <div>
<mini-area /> <mini-area />
</div> </div>
<template slot="footer">日访问量<span> {{ '1234' | NumberFormat }}</span></template> <template slot="footer"
>日访问量<span> {{ '1234' | NumberFormat }}</span></template
>
</chart-card> </chart-card>
</a-col> </a-col>
<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }"> <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
@ -62,9 +64,9 @@
</chart-card> </chart-card>
</a-col> </a-col>
</a-row> </a-row>
<a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}"> <a-card :loading="loading" :bordered="false" :body-style="{ padding: '0' }">
<div class="salesCard"> <div class="salesCard">
<a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}"> <a-tabs default-active-key="1" size="large" :tab-bar-style="{ marginBottom: '24px', paddingLeft: '16px' }">
<div class="extra-wrapper" slot="tabBarExtraContent"> <div class="extra-wrapper" slot="tabBarExtraContent">
<div class="extra-item"> <div class="extra-item">
<a>今日</a> <a>今日</a>
@ -72,7 +74,7 @@
<a>本月</a> <a>本月</a>
<a>本年</a> <a>本年</a>
</div> </div>
<a-range-picker :style="{width: '230px'}" /> <a-range-picker :style="{ width: '230px' }" />
</div> </div>
<a-tab-pane loading="true" tab="销售额" key="1"> <a-tab-pane loading="true" tab="销售额" key="1">
<a-row> <a-row>
@ -80,7 +82,7 @@
<bar :data="barData" title="销售额排行" /> <bar :data="barData" title="销售额排行" />
</a-col> </a-col>
<a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24"> <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-col>
</a-row> </a-row>
</a-tab-pane> </a-tab-pane>
@ -90,7 +92,7 @@
<bar :data="barData2" title="销售额趋势" /> <bar :data="barData2" title="销售额趋势" />
</a-col> </a-col>
<a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24"> <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-col>
</a-row> </a-row>
</a-tab-pane> </a-tab-pane>
@ -115,7 +117,7 @@
</a-menu> </a-menu>
</a-dropdown> </a-dropdown>
<a-row :gutter="68"> <a-row :gutter="68">
<a-col :xs="24" :sm="12" :style="{ marginBottom: ' 24px'}"> <a-col :xs="24" :sm="12" :style="{ marginBottom: ' 24px' }">
<number-info :total="12321" :sub-total="17.1"> <number-info :total="12321" :sub-total="17.1">
<span slot="subtitle"> <span slot="subtitle">
<span>搜索用户数</span> <span>搜索用户数</span>
@ -129,7 +131,7 @@
<mini-smooth-area :style="{ height: '45px' }" :dataSource="searchUserData" :scale="searchUserScale" /> <mini-smooth-area :style="{ height: '45px' }" :dataSource="searchUserData" :scale="searchUserScale" />
</div> </div>
</a-col> </a-col>
<a-col :xs="24" :sm="12" :style="{ marginBottom: ' 24px'}"> <a-col :xs="24" :sm="12" :style="{ marginBottom: ' 24px' }">
<number-info :total="2.7" :sub-total="26.2" status="down"> <number-info :total="2.7" :sub-total="26.2" status="down">
<span slot="subtitle"> <span slot="subtitle">
<span>人均搜索次数</span> <span>人均搜索次数</span>
@ -153,16 +155,20 @@
:pagination="{ pageSize: 5 }" :pagination="{ pageSize: 5 }"
> >
<span slot="range" slot-scope="text, record"> <span slot="range" slot-scope="text, record">
<trend :flag="record.status === 0 ? 'up' : 'down'"> <trend :flag="record.status === 0 ? 'up' : 'down'"> {{ text }}% </trend>
{{ text }}%
</trend>
</span> </span>
</a-table> </a-table>
</div> </div>
</a-card> </a-card>
</a-col> </a-col>
<a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24"> <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
<a-card class="antd-pro-pages-dashboard-analysis-salesCard" :loading="loading" :bordered="false" title="销售额类别占比" :style="{ height: '100%' }"> <a-card
class="antd-pro-pages-dashboard-analysis-salesCard"
:loading="loading"
:bordered="false"
title="销售额类别占比"
:style="{ height: '100%' }"
>
<div slot="extra" style="height: inherit;"> <div slot="extra" style="height: inherit;">
<!-- style="bottom: 12px;display: inline-block;" --> <!-- style="bottom: 12px;display: inline-block;" -->
<span class="dashboard-analysis-iconGroup"> <span class="dashboard-analysis-iconGroup">
@ -194,7 +200,7 @@
<v-tooltip :showTitle="false" dataKey="item*percent" /> <v-tooltip :showTitle="false" dataKey="item*percent" />
<v-axis /> <v-axis />
<!-- position="right" :offsetX="-140" --> <!-- position="right" :offsetX="-140" -->
<v-legend dataKey="item"/> <v-legend dataKey="item" />
<v-pie position="percent" color="item" :vStyle="pieStyle" /> <v-pie position="percent" color="item" :vStyle="pieStyle" />
<v-coord type="theta" :radius="0.75" :innerRadius="0.6" /> <v-coord type="theta" :radius="0.75" :innerRadius="0.6" />
</v-chart> </v-chart>
@ -208,7 +214,17 @@
</template> </template>
<script> <script>
import moment from 'moment' import moment from 'moment'
import { ChartCard, MiniArea, MiniBar, MiniProgress, RankList, Bar, Trend, NumberInfo, MiniSmoothArea } from '@/components' import {
ChartCard,
MiniArea,
MiniBar,
MiniProgress,
RankList,
Bar,
Trend,
NumberInfo,
MiniSmoothArea
} from '@/components'
import { mixinDevice } from '@/utils/mixin' import { mixinDevice } from '@/utils/mixin'
const barData = [] const barData = []
const barData2 = [] const barData2 = []
@ -232,7 +248,9 @@ for (let i = 0; i < 7; i++) {
const searchUserData = [] const searchUserData = []
for (let i = 0; i < 7; i++) { for (let i = 0; i < 7; i++) {
searchUserData.push({ searchUserData.push({
x: moment().add(i, 'days').format('YYYY-MM-DD'), x: moment()
.add(i, 'days')
.format('YYYY-MM-DD'),
y: Math.ceil(Math.random() * 10) y: Math.ceil(Math.random() * 10)
}) })
} }
@ -246,7 +264,8 @@ const searchUserScale = [
alias: '用户数', alias: '用户数',
min: 0, min: 0,
max: 10 max: 10
}] }
]
const searchTableColumns = [ const searchTableColumns = [
{ {
dataIndex: 'MenuIndex.vue', dataIndex: 'MenuIndex.vue',
@ -288,11 +307,13 @@ const sourceData = [
{ item: '母婴产品', count: 9 }, { item: '母婴产品', count: 9 },
{ item: '其他', count: 7.8 } { item: '其他', count: 7.8 }
] ]
const pieScale = [{ const pieScale = [
dataKey: 'percent', {
min: 0, dataKey: 'percent',
formatter: '.0%' min: 0,
}] formatter: '.0%'
}
]
const dv = new DataSet.View().source(sourceData) const dv = new DataSet.View().source(sourceData)
dv.transform({ dv.transform({
type: 'percent', type: 'percent',
@ -315,7 +336,7 @@ export default {
NumberInfo, NumberInfo,
MiniSmoothArea MiniSmoothArea
}, },
data () { data() {
return { return {
loading: true, loading: true,
rankList, rankList,
@ -336,7 +357,7 @@ export default {
} }
} }
}, },
created () { created() {
setTimeout(() => { setTimeout(() => {
this.loading = !this.loading this.loading = !this.loading
}, 1000) }, 1000)
@ -344,42 +365,42 @@ export default {
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.extra-wrapper { .extra-wrapper {
line-height: 55px; line-height: 55px;
padding-right: 24px; padding-right: 24px;
.extra-item { .extra-item {
display: inline-block; display: inline-block;
margin-right: 24px; margin-right: 24px;
a { a {
margin-left: 24px; margin-left: 24px;
}
} }
} }
.antd-pro-pages-dashboard-analysis-twoColLayout { }
.antd-pro-pages-dashboard-analysis-twoColLayout {
position: relative;
display: flex;
display: block;
flex-flow: row wrap;
}
.antd-pro-pages-dashboard-analysis-salesCard {
height: calc(100% - 24px);
/deep/ .ant-card-head {
position: relative; position: relative;
display: flex;
display: block;
flex-flow: row wrap;
}
.antd-pro-pages-dashboard-analysis-salesCard {
height: calc(100% - 24px);
/deep/ .ant-card-head {
position: relative;
}
}
.dashboard-analysis-iconGroup {
i {
margin-left: 16px;
color: rgba(0,0,0,.45);
cursor: pointer;
transition: color .32s;
color: black;
}
} }
.analysis-salesTypeRadio { }
position: absolute; .dashboard-analysis-iconGroup {
right: 54px; i {
bottom: 12px; margin-left: 16px;
color: rgba(0, 0, 0, 0.45);
cursor: pointer;
transition: color 0.32s;
color: black;
} }
}
.analysis-salesTypeRadio {
position: absolute;
right: 54px;
bottom: 12px;
}
</style> </style>

Loading…
Cancel
Save