refactor: update to new project structure
This commit is contained in:
chenghx
172
src/pages/dashboard/Analysis.vue
Normal file
172
src/pages/dashboard/Analysis.vue
Normal file
@@ -0,0 +1,172 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-row style="margin: 0 -12px">
|
||||
<a-col :sm="24" :md="12" :xl="6" style="padding: 12px 12px 24px;">
|
||||
<chart-card title="总销售额" total="￥ 189,345">
|
||||
<a-tooltip title="指标说明" slot="action">
|
||||
<a-icon type="info-circle-o" />
|
||||
</a-tooltip>
|
||||
<div>
|
||||
<trend style="margin-right: 16px" term="同周比" :percent="12" :is-increase="true" :scale="0" />
|
||||
<trend term="日环比" :target="100" :value="89" :scale="0" />
|
||||
</div>
|
||||
<div slot="footer">日均销售额<span> ￥234.56</span></div>
|
||||
</chart-card>
|
||||
</a-col>
|
||||
<a-col :sm="24" :md="12" :xl="6" style="padding: 12px 12px 24px;">
|
||||
<chart-card title="总销售额" total="￥ 189,345">
|
||||
<a-tooltip title="指标说明" slot="action">
|
||||
<a-icon type="info-circle-o" />
|
||||
</a-tooltip>
|
||||
<div>
|
||||
<mini-area />
|
||||
</div>
|
||||
<div slot="footer">日访问量<span> 123,4</span></div>
|
||||
</chart-card>
|
||||
</a-col>
|
||||
<a-col :sm="24" :md="12" :xl="6" style="padding: 12px 12px 24px;">
|
||||
<chart-card title="总销售额" total="￥ 189,345">
|
||||
<a-tooltip title="指标说明" slot="action">
|
||||
<a-icon type="info-circle-o" />
|
||||
</a-tooltip>
|
||||
<div>
|
||||
<mini-bar />
|
||||
</div>
|
||||
<div slot="footer">转化率 <span>60%</span></div>
|
||||
</chart-card>
|
||||
</a-col>
|
||||
<a-col :sm="24" :md="12" :xl="6" style="padding: 12px 12px 24px;">
|
||||
<chart-card title="运营活动效果" total="73%">
|
||||
<a-tooltip title="指标说明" slot="action">
|
||||
<a-icon type="info-circle-o" />
|
||||
</a-tooltip>
|
||||
<div>
|
||||
<mini-progress target="90" percent="78" color="#13C2C2" height="8px"/>
|
||||
</div>
|
||||
<div slot="footer">
|
||||
<trend style="margin-right: 16px" term="同周比" :percent="12" :is-increase="true" :scale="0" />
|
||||
<trend term="日环比" :target="100" :value="89" :scale="0" />
|
||||
</div>
|
||||
</chart-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-card :bordered="false" :body-style="{padding: '24px'}">
|
||||
<div class="salesCard">
|
||||
<a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
|
||||
<div class="extra-wrap" slot="tabBarExtraContent">
|
||||
<div class="extra-item">
|
||||
<a>今日</a>
|
||||
<a>本周</a>
|
||||
<a>本月</a>
|
||||
<a>本年</a>
|
||||
</div>
|
||||
<a-range-picker :style="{width: '256px'}"></a-range-picker>
|
||||
</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">
|
||||
<ranking-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">
|
||||
<ranking-list title="门店销售排行榜" :list="rankList"/>
|
||||
</a-col>
|
||||
</a-row></a-tab-pane>
|
||||
</a-tabs>
|
||||
</div>
|
||||
</a-card>
|
||||
<a-row style="margin: 0 -12px">
|
||||
<a-col style="padding: 0 12px" :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
|
||||
<a-card :bordered="false" style="margin-top: 24px" title="热门搜索">
|
||||
<hot-search />
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col style="padding: 0 12px" :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
|
||||
<a-card :bordered="false" style="margin-top: 24px;" title="销售额占比">
|
||||
<sales-data />
|
||||
<div slot="extra">
|
||||
<div>...</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ACol from 'ant-design-vue/es/grid/Col'
|
||||
import ARow from 'ant-design-vue/es/grid/Row'
|
||||
import ACard from 'ant-design-vue/es/card/Card'
|
||||
import ChartCard from '../../components/card/ChartCard'
|
||||
import ATooltip from 'ant-design-vue/es/tooltip/Tooltip'
|
||||
import AIcon from 'ant-design-vue/es/icon/icon'
|
||||
import MiniArea from '../../components/chart/MiniArea'
|
||||
import MiniBar from '../../components/chart/MiniBar'
|
||||
import MiniProgress from '../../components/chart/MiniProgress'
|
||||
import ATabs from 'ant-design-vue/es/tabs'
|
||||
import ADatePicker from 'ant-design-vue/es/date-picker'
|
||||
import Bar from '../../components/chart/Bar'
|
||||
import RankingList from '../../components/chart/RankingList'
|
||||
import HotSearch from '../../components/analysis/HotSearch'
|
||||
import SalesData from '../../components/analysis/SalesData'
|
||||
import Trend from '../../components/chart/Trend'
|
||||
|
||||
const rankList = []
|
||||
|
||||
for (let i = 0; i < 8; i++) {
|
||||
rankList.push({
|
||||
name: '桃源村' + i + '号店',
|
||||
total: 1234.56 - i * 100
|
||||
})
|
||||
}
|
||||
|
||||
const ATabPane = ATabs.TabPane
|
||||
const ARangePicker = ADatePicker.RangePicker
|
||||
export default {
|
||||
name: 'analysis',
|
||||
data () {
|
||||
return {
|
||||
rankList
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Trend,
|
||||
SalesData,
|
||||
HotSearch,
|
||||
RankingList,
|
||||
Bar,
|
||||
ARangePicker,
|
||||
ATabPane,
|
||||
ATabs,
|
||||
MiniProgress,
|
||||
MiniBar,
|
||||
MiniArea,
|
||||
AIcon,
|
||||
ATooltip,
|
||||
ChartCard,
|
||||
ACard,
|
||||
ARow,
|
||||
ACol}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.extra-wrap{
|
||||
|
||||
}
|
||||
.extra-item{
|
||||
display: inline-block;
|
||||
margin-right: 24px;
|
||||
a{
|
||||
margin-left: 24px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
252
src/pages/dashboard/WorkPlace.vue
Normal file
252
src/pages/dashboard/WorkPlace.vue
Normal file
@@ -0,0 +1,252 @@
|
||||
<template>
|
||||
<page-layout :avatar="currUser.avatar">
|
||||
<div slot="headerContent">
|
||||
<div class="title">{{currUser.timefix}}，{{currUser.name}}，{{currUser.welcome}}</div>
|
||||
<div>{{currUser.position}}</div>
|
||||
</div>
|
||||
<div slot="extra">
|
||||
<a-row>
|
||||
<a-col :sm="8" :xs="24">
|
||||
<head-info title="项目数" content="56" :bordered="true"/>
|
||||
</a-col>
|
||||
<a-col :sm="8" :xs="24">
|
||||
<head-info title="团队内排名" content="8/24" :bordered="true"/>
|
||||
</a-col>
|
||||
<a-col :sm="8" :xs="24">
|
||||
<head-info title="项目访问" content="2,223"/>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
<div>
|
||||
<a-row style="margin: 0 -12px">
|
||||
<a-col style="padding: 0 12px" :xl="16" :lg="24" :md="24" :sm="24" :xs="24">
|
||||
<a-card class="project-list" :loading="loading" style="margin-bottom: 24px;" :bordered="false" title="进行中的项目" :body-style="{padding: 0}">
|
||||
<a slot="extra">全部项目</a>
|
||||
<div>
|
||||
<a-card-grid :key="i" v-for="(item, i) in projects">
|
||||
<a-card :bordered="false" :body-style="{padding: 0}">
|
||||
<a-card-meta :description="item.desc">
|
||||
<div slot="title" class="card-title">
|
||||
<a-avatar size="small" :src="item.logo" />
|
||||
<a>Alipay</a>
|
||||
</div>
|
||||
</a-card-meta>
|
||||
<div class="project-item">
|
||||
<a href="/#/">科学搬砖组</a>
|
||||
<span class="datetime">9小时前</span>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-card-grid>
|
||||
</div>
|
||||
</a-card>
|
||||
<a-card :loading="loading" title="动态" :bordered="false">
|
||||
<a-list>
|
||||
<a-list-item :key="index" v-for="(item, index) in activities">
|
||||
<a-list-item-meta>
|
||||
<a-avatar slot="avatar" :src="item.user.avatar" />
|
||||
<div slot="title" v-html="item.template" />
|
||||
<div slot="description">9小时前</div>
|
||||
</a-list-item-meta>
|
||||
</a-list-item>
|
||||
</a-list>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col style="padding: 0 12px" :xl="8" :lg="24" :md="24" :sm="24" :xs="24">
|
||||
<a-card title="快速开始 / 便捷导航" style="margin-bottom: 24px" :bordered="false" :body-style="{padding: 0}">
|
||||
<div class="item-group">
|
||||
<a>操作一</a>
|
||||
<a>操作二</a>
|
||||
<a>操作三</a>
|
||||
<a>操作四</a>
|
||||
<a>操作五</a>
|
||||
<a>操作六</a>
|
||||
<a-button size="small" type="primary" ghost icon="plus">添加</a-button>
|
||||
</div>
|
||||
</a-card>
|
||||
<a-card title="XX指数" style="margin-bottom: 24px" :bordered="false" :body-style="{padding: 0}">
|
||||
<div style="min-height: 400px;">
|
||||
<radar />
|
||||
</div>
|
||||
</a-card>
|
||||
<a-card :loading="loading" title="团队" :bordered="false">
|
||||
<div class="members">
|
||||
<a-row>
|
||||
<a-col :span="12" v-for="(item, index) in teams" :key="index">
|
||||
<a>
|
||||
<a-avatar size="small" :src="item.avatar" />
|
||||
<span class="member">{{item.name}}</span>
|
||||
</a>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</page-layout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PageHeader from '../../components/page/PageHeader'
|
||||
import PageLayout from '../../layouts/PageLayout'
|
||||
import AAvatar from 'ant-design-vue/es/avatar/Avatar'
|
||||
import HeadInfo from '../../components/tool/HeadInfo'
|
||||
import ARow from 'ant-design-vue/es/grid/Row'
|
||||
import ACol from 'ant-design-vue/es/grid/Col'
|
||||
import ACard from 'ant-design-vue/es/card/Card'
|
||||
import ACardGrid from 'ant-design-vue/es/card/Grid'
|
||||
import ACardMeta from 'ant-design-vue/es/card/Meta'
|
||||
import AList from 'ant-design-vue/es/list/index'
|
||||
import AListItem from 'ant-design-vue/es/list/Item'
|
||||
import AButton from 'ant-design-vue/es/button/button'
|
||||
import AIcon from 'ant-design-vue/es/icon/icon'
|
||||
import Radar from '../../components/chart/Radar'
|
||||
|
||||
const AListItemMeta = AListItem.Meta
|
||||
|
||||
export default {
|
||||
name: 'WorkPlace',
|
||||
components: {
|
||||
Radar,
|
||||
AIcon,
|
||||
AButton,
|
||||
AListItemMeta,
|
||||
AListItem,
|
||||
AList,
|
||||
ACardMeta,
|
||||
ACardGrid,
|
||||
ACard,
|
||||
ACol,
|
||||
ARow,
|
||||
HeadInfo,
|
||||
AAvatar,
|
||||
PageLayout,
|
||||
PageHeader},
|
||||
data () {
|
||||
return {
|
||||
projects: [],
|
||||
loading: true,
|
||||
activities: [],
|
||||
teams: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currUser () {
|
||||
return this.$store.state.account.user
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.getProjectList()
|
||||
this.getActivites()
|
||||
this.getTeams()
|
||||
},
|
||||
methods: {
|
||||
getProjectList () {
|
||||
this.$axios({
|
||||
method: 'get',
|
||||
url: '/project'
|
||||
}).then(res => {
|
||||
this.projects = res.data
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
getActivites () {
|
||||
this.$axios({
|
||||
method: 'get',
|
||||
url: '/work/activity'
|
||||
}).then(res => {
|
||||
this.activities = res.data
|
||||
})
|
||||
},
|
||||
getTeams () {
|
||||
this.$axios({
|
||||
method: 'get',
|
||||
url: '/work/team'
|
||||
}).then(res => {
|
||||
this.teams = res.data
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.project-list {
|
||||
.card-title {
|
||||
font-size: 0;
|
||||
a {
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
margin-left: 12px;
|
||||
line-height: 24px;
|
||||
height: 24px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
font-size: 14px;
|
||||
&:hover {
|
||||
color: #1890ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.project-item {
|
||||
display: flex;
|
||||
margin-top: 8px;
|
||||
overflow: hidden;
|
||||
font-size: 12px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
a {
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
display: inline-block;
|
||||
flex: 1 1 0;
|
||||
&:hover {
|
||||
color: #1890ff;
|
||||
}
|
||||
}
|
||||
.datetime {
|
||||
color: rgba(0, 0, 0, 0.25);
|
||||
flex: 0 0 auto;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
.ant-card-meta-description {
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
height: 44px;
|
||||
line-height: 22px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
.item-group{
|
||||
padding: 20px 0 8px 24px;
|
||||
font-size: 0;
|
||||
a{
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
margin-bottom: 13px;
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
.members {
|
||||
a {
|
||||
display: block;
|
||||
margin: 12px 0;
|
||||
line-height: 24px;
|
||||
height: 24px;
|
||||
.member {
|
||||
font-size: 14px;
|
||||
color: rgba(0,0,0,.65);
|
||||
line-height: 24px;
|
||||
max-width: 100px;
|
||||
vertical-align: top;
|
||||
margin-left: 12px;
|
||||
transition: all 0.3s;
|
||||
display: inline-block;
|
||||
}
|
||||
&:hover {
|
||||
span {
|
||||
color: #1890ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user