Skip to content

GitLab

Q
qk_admin
Commit 46e00ef5 authored by yaya's avatar yaya
Browse files
Options

feat:修改首页展示

parent 629b75b6
Show whitespace changes
Inline Side-by-side
Showing with 379 additions and 95 deletions
src/api/business/dashboard.js
View file @ 46e00ef5
...@@ -15,3 +15,10 @@ export function chart(query) { ...@@ -15,3 +15,10 @@ export function chart(query) {
params: query params: query
}) })
} }
export function requestDataPanel(data) {
return request({
url: '/dashboard/dataPanel',
method: 'post',
data
})
}
src/views/dashboard/index.vue
View file @ 46e00ef5
<template> <template>
<div class="dashboard-editor-container"> <div class="dashboard-editor-container">
<div>
<el-button :type="type === 1 ? 'success' :''" @click="() => {handleSelectType(1)}">昨日</el-button>
<el-button :type="type === 2 ? 'success' :''" @click="() => {handleSelectType(2)}">本周</el-button>
<el-button :type="type === 3 ? 'success' :''" @click="() => {handleSelectType(3)}">本月</el-button>
<el-button :type="type === 4 ? 'success' :''" @click="() => {handleSelectType(4)}">上周</el-button>
<el-button :type="type === 5 ? 'success' :''" @click="() => {handleSelectType(5)}">上月</el-button>
</div>
<el-row :gutter="40" class="panel-group"> <el-row :gutter="40" class="panel-group">
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col"> <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
<div class="card-panel" @click="handleSetLineChartData('newVisitis')"> <div class="card-panel" >
<div class="card-panel-icon-wrapper icon-people"> <div class="card-panel-icon-wrapper icon-people">
<svg-icon icon-class="peoples" class-name="card-panel-icon" /> <svg-icon icon-class="peoples" class-name="card-panel-icon" />
</div> </div>
<div class="card-panel-description"> <div class="card-panel-description">
<div class="card-panel-text">用户数量</div> <div class="card-panel-text">访问用户数</div>
<count-to :start-val="0" :end-val="userTotal" :duration="2600" class="card-panel-num"/> <count-to :start-val="0" :end-val="Number(panelInfo.visitNum || 0)" :duration="100" class="card-panel-num"/>
</div> </div>
</div> </div>
</el-col> </el-col>
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col"> <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
<div class="card-panel" @click="handleSetLineChartData('messages')"> <div class="card-panel">
<div class="card-panel-icon-wrapper icon-message"> <div class="card-panel-icon-wrapper icon-message">
<svg-icon icon-class="message" class-name="card-panel-icon" /> <svg-icon icon-class="message" class-name="card-panel-icon" />
</div> </div>
<div class="card-panel-description"> <div class="card-panel-description">
<div class="card-panel-text">藏品数量</div> <div class="card-panel-text">打开次数</div>
<count-to :start-val="0" :end-val="goodsTotal" :duration="3000" class="card-panel-num"/> <count-to :start-val="0" :end-val="Number(panelInfo.openNum || 0)" :duration="1000" class="card-panel-num"/>
</div>
</div>
</el-col>
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
<div class="card-panel">
<div class="card-panel-icon-wrapper icon-message">
<svg-icon icon-class="message" class-name="card-panel-icon" />
</div>
<div class="card-panel-description">
<div class="card-panel-text">新增注册用户数</div>
<count-to :start-val="0" :end-val="Number(panelInfo.newUserNum || 0)" :duration="1000" class="card-panel-num"/>
</div>
</div>
</el-col>
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
<div class="card-panel">
<div class="card-panel-icon-wrapper icon-message">
<svg-icon icon-class="message" class-name="card-panel-icon" />
</div>
<div class="card-panel-description">
<div class="card-panel-text">新增藏品数</div>
<count-to :start-val="0" :end-val="Number(panelInfo.newItemNum || 0)" :duration="1000" class="card-panel-num"/>
</div> </div>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
<line-chart :chart-data="userOrderCnt" />
</el-row>
<el-row :gutter="32"> <el-row :gutter="32">
<el-col :xs="24" :sm="24" :lg="16"> <el-col :xs="24" :sm="24" :lg="12">
<div class="chart-wrapper"> <el-card class="box-card">
<bar-chart :chart-data="orderAmts"/> <h3 >藏品信息</h3>
<div class="info_item">
<el-card class="info_item_card">
<div class="info_item_card-text">访问用户数</div>
<div class="info_item_card-num">
<div class="info_item_card-num_content">{{ collectOrderData.totalAmount }}</div>
<!-- <count-to :start-val="0" :end-val="collectOrderData.totalAmount" :duration="2600" class="info_item_card-num_content"/>-->
</div>
</el-card>
<el-card class="info_item_card">
<div class="info_item_card-text">订单数</div>
<div class="info_item_card-num">
<div class="info_item_card-num_content">{{ collectOrderData.totalOrderNum }}</div>
<!-- <count-to :start-val="0" :end-val="collectOrderData.totalOrderNum" :duration="2600" class="info_item_card-num_content"/>-->
</div>
</el-card>
<el-card class="info_item_card">
<div class="info_item_card-text">平台利润</div>
<div class="info_item_card-num">
<div class="info_item_card-num_content">{{ collectOrderData.totalProfit }}</div>
<!-- <count-to :start-val="0" :end-val="collectOrderData.totalProfit" :duration="2600" class="info_item_card-num_content"/>-->
</div> </div>
</el-card>
</div>
</el-card>
</el-col> </el-col>
<el-col :xs="24" :sm="24" :lg="8"> <el-col :xs="24" :sm="24" :lg="12">
<div class="chart-wrapper"> <el-card class="box-card">
<pie-chart :chart-data="categorySell"/> <h3 >分销订单</h3>
<div class="info_item">
<el-card class="info_item_card">
<div class="info_item_card-text">成交额</div>
<div class="info_item_card-num">
<div class="info_item_card-num_content">{{ distributionOrderData.totalAmount }}</div>
<!-- <count-to :start-val="0" :end-val="distributionOrderData.totalAmount" :duration="2600" class="info_item_card-num_content"/>-->
</div>
</el-card>
<el-card class="info_item_card">
<div class="info_item_card-text">订单数</div>
<div class="info_item_card-num">
<!-- <count-to :start-val="0" :end-val="" :duration="2600" class="info_item_card-num_content"/>-->
<div class="info_item_card-num_content">{{ distributionOrderData.totalOrderNum }}</div>
</div> </div>
</el-card>
<el-card class="info_item_card">
<div class="info_item_card-text">平台利润</div>
<div class="info_item_card-num">
<div class="info_item_card-num_content">{{ distributionOrderData.totalProfit }}</div>
<!-- <count-to :start-val="0" :end-val="distributionOrderData.totalProfit" :duration="2600" class="info_item_card-num_content"/>-->
</div>
</el-card>
</div>
</el-card>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
</template> </template>
<script> <script>
import { info, chart } from '@/api/business/dashboard' import { requestDataPanel } from '@/api/business/dashboard'
import CountTo from 'vue-count-to' import CountTo from 'vue-count-to'
import LineChart from './LineChart' import LineChart from './LineChart'
import PieChart from './PieChart' import PieChart from './PieChart'
...@@ -61,33 +130,38 @@ export default { ...@@ -61,33 +130,38 @@ export default {
}, },
data() { data() {
return { return {
userTotal: 0, panelInfo: {},
goodsTotal: 0, collectOrderData: {},
productTotal: 0, distributionOrderData: {},
orderTotal: 0, type: 1
userOrderCnt: { dayData: [], userCnt: [], orderCnt: [] },
orderAmts: { dayData: [], orderAmtData: [], orderCntData: [] },
categorySell: { categoryNames: [], categorySellData: [] }
} }
}, },
mounted() { mounted() {
}, },
created() { created() {
chart().then(response => { this.handleGetDetail()
this.userOrderCnt = response.data.data.userOrderCnt
this.orderAmts = response.data.data.orderAmts
this.categorySell = response.data.data.categorySell
})
info().then(response => {
this.userTotal = response.data.data.userTotal
this.goodsTotal = response.data.data.goodsTotal
this.productTotal = response.data.data.productTotal
this.orderTotal = response.data.data.orderTotal
})
}, },
methods: { methods: {
handleSetLineChartData(type) { handleSelectType(type) {
this.$emit('handleSetLineChartData', type) if (this.type === type) {
return
}
this.type = type
this.handleGetDetail()
},
handleGetDetail() {
const params = {
type: this.type
}
requestDataPanel(params).then(response => {
console.log('===response=', response)
this.panelInfo = response.data.data || {}
this.collectOrderData = response.data.data.collectOrderData || {}
this.distributionOrderData = response.data.data.distributionOrderData || {}
}).catch((e) => {
console.log('===报错=', e)
this.$message.error(e.data && e.data.errmsg || '请求失败， 请重试')
})
} }
} }
} }
...@@ -97,6 +171,7 @@ export default { ...@@ -97,6 +171,7 @@ export default {
.dashboard-editor-container { .dashboard-editor-container {
padding: 32px; padding: 32px;
background-color: rgb(240, 242, 245); background-color: rgb(240, 242, 245);
height: 100vh;
.chart-wrapper { .chart-wrapper {
background: #fff; background: #fff;
padding: 16px 16px 0; padding: 16px 16px 0;
...@@ -110,7 +185,8 @@ export default { ...@@ -110,7 +185,8 @@ export default {
.card-panel-col{ .card-panel-col{
margin-bottom: 32px; margin-bottom: 32px;
} }
.card-panel { }
.card-panel {
height: 108px; height: 108px;
cursor: pointer; cursor: pointer;
font-size: 12px; font-size: 12px;
...@@ -165,14 +241,35 @@ export default { ...@@ -165,14 +241,35 @@ export default {
font-weight: bold; font-weight: bold;
margin: 26px; margin: 26px;
margin-left: 0px; margin-left: 0px;
.card-panel-text { }
}
.card-panel-text {
line-height: 18px; line-height: 18px;
color: rgba(0, 0, 0, 0.45); color: rgba(0, 0, 0, 0.45);
font-size: 16px; font-size: 16px;
margin-bottom: 12px; margin-bottom: 12px;
} }
.card-panel-num { .card-panel-num {
font-size: 20px; font-size: 24px;
}
.info_item {
display: flex;
flex-direction: row;
.info_item_card {
flex: 1;
margin-right: 10px;
height: 150px;
.info_item_card-num {
width: 100%;
flex: 1;
height: 120px;
align-items: center;
display: flex;
justify-content: center;
align-content: center;
.info_item_card-num_content {
font-size: 34px;
text-align: center;
} }
} }
} }
......
src/views/dashboard/old.vue 0 → 100644
View file @ 46e00ef5
<template>
<div class="dashboard-editor-container">
<el-row :gutter="40" class="panel-group">
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
<div class="card-panel" @click="handleSetLineChartData('newVisitis')">
<div class="card-panel-icon-wrapper icon-people">
<svg-icon icon-class="peoples" class-name="card-panel-icon" />
</div>
<div class="card-panel-description">
<div class="card-panel-text">用户数量</div>
<count-to :start-val="0" :end-val="userTotal" :duration="2600" class="card-panel-num"/>
</div>
</div>
</el-col>
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
<div class="card-panel" @click="handleSetLineChartData('messages')">
<div class="card-panel-icon-wrapper icon-message">
<svg-icon icon-class="message" class-name="card-panel-icon" />
</div>
<div class="card-panel-description">
<div class="card-panel-text">藏品数量</div>
<count-to :start-val="0" :end-val="goodsTotal" :duration="3000" class="card-panel-num"/>
</div>
</div>
</el-col>
</el-row>
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
<line-chart :chart-data="userOrderCnt" />
</el-row>
<el-row :gutter="32">
<el-col :xs="24" :sm="24" :lg="16">
<div class="chart-wrapper">
<bar-chart :chart-data="orderAmts"/>
</div>
</el-col>
<el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper">
<pie-chart :chart-data="categorySell"/>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
import { info, chart } from '@/api/business/dashboard'
import CountTo from 'vue-count-to'
import LineChart from './LineChart'
import PieChart from './PieChart'
import BarChart from './BarChart'
export default {
components: {
CountTo,
LineChart,
PieChart,
BarChart
},
data() {
return {
userTotal: 0,
goodsTotal: 0,
productTotal: 0,
orderTotal: 0,
userOrderCnt: { dayData: [], userCnt: [], orderCnt: [] },
orderAmts: { dayData: [], orderAmtData: [], orderCntData: [] },
categorySell: { categoryNames: [], categorySellData: [] }
}
},
mounted() {
},
created() {
chart().then(response => {
this.userOrderCnt = response.data.data.userOrderCnt
this.orderAmts = response.data.data.orderAmts
this.categorySell = response.data.data.categorySell
})
info().then(response => {
this.userTotal = response.data.data.userTotal
this.goodsTotal = response.data.data.goodsTotal
this.productTotal = response.data.data.productTotal
this.orderTotal = response.data.data.orderTotal
})
},
methods: {
handleSetLineChartData(type) {
this.$emit('handleSetLineChartData', type)
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard-editor-container {
padding: 32px;
background-color: rgb(240, 242, 245);
.chart-wrapper {
background: #fff;
padding: 16px 16px 0;
margin-bottom: 32px;
}
}
.panel-group {
margin-top: 18px;
.card-panel-col{
margin-bottom: 32px;
}
.card-panel {
height: 108px;
cursor: pointer;
font-size: 12px;
position: relative;
overflow: hidden;
color: #666;
background: #fff;
box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
border-color: rgba(0, 0, 0, .05);
&:hover {
.card-panel-icon-wrapper {
color: #fff;
}
.icon-people {
background: #40c9c6;
}
.icon-message {
background: #36a3f7;
}
.icon-money {
background: #f4516c;
}
.icon-shoppingCard {
background: #34bfa3
}
}
.icon-people {
color: #40c9c6;
}
.icon-message {
color: #36a3f7;
}
.icon-money {
color: #f4516c;
}
.icon-shoppingCard {
color: #34bfa3
}
.card-panel-icon-wrapper {
float: left;
margin: 14px 0 0 14px;
padding: 16px;
transition: all 0.38s ease-out;
border-radius: 6px;
}
.card-panel-icon {
float: left;
font-size: 48px;
}
.card-panel-description {
float: right;
font-weight: bold;
margin: 26px;
margin-left: 0px;
.card-panel-text {
line-height: 18px;
color: rgba(0, 0, 0, 0.45);
font-size: 16px;
margin-bottom: 12px;
}
.card-panel-num {
font-size: 20px;
}
}
}
}
</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