shayu/cai-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新代码

Browse Source
This commit is contained in:
ahanhanhan
2024-02-26 11:48:04 +08:00
parent b95eae8522
commit 4aba1f1371
1 changed files with 259 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

166
src/views/dashboard/PanelGroup.vue
View File

@@ -2,22 +2,25 @@
<div class="wrapper">
<div class="header">
<el-row :gutter="16" class="panel-group">
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col" v-for="(item, index) in layoutRow" :key="index">
<el-col v-for="(item, index) in layoutRow" :key="index" :lg="6" :sm="12" :xs="12" class="card-panel-col">
<div class="content">
<div class="data-box flow-hidden">
<div class="data-info fl_l">
<div class="title">{{ item.label() }}</div>
<div class="count">
<count-to :start-val="0" :end-val="item.model.count" :duration="2600" class="card-panel-num" />
<count-to :duration="2600" :end-val="item.model.count" :start-val="0" class="card-panel-num"/>
</div>
</div>
<div class="icon fl_r">
<img :src="item.icon" alt="">
</div>
</div>
<div class="compare" v-if="item.model.trendDirection >= 0">
<div v-if="item.model.trendDirection >= 0" class="compare">
和昨日相比
<img class="trend" :src="`${item.model.trendDirection === 0 ? require('../../assets/icons/trend_up.png') : require('../../assets/icons/trend_down.png') }`" alt="">
<img :src="`${item.model.trendDirection === 0 ? require('../../assets/icons/trend_up.png') : require('../../assets/icons/trend_down.png') }`"
alt=""
class="trend"
>
<span :class="['num', item.model.trendDirection === 0 ? 'up' : 'down' ]">{{ item.model.trendNum }}%</span>
</div>
</div>
@@ -28,36 +31,49 @@
<div class="chart-content">
<line-chart/>
<div class="select-time">
<el-select v-model="chartTime" @change="handleChartTimeChange">
<el-date-picker
v-model="chartTime"
:picker-options="pickerOptions"
align="right"
value-format="yyyy-MM-dd"
end-placeholder="结束日期"
@change="handleDatePickerChange"
range-separator="至"
start-placeholder="开始日期"
type="daterange"
unlink-panels
>
</el-date-picker>
<!-- <el-select v-model="chartTime" @change="handleChartTimeChange">
<el-option v-for="item in chartSelect" :label="item.label" :key="item.key" :value="item.key"></el-option>
</el-select>
</el-select>-->
</div>
</div>
<div class="rank-info">
<el-row :gutter="16" class="panel-group">
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
<el-col :lg="6" :sm="12" :xs="12" class="card-panel-col">
<RankList title="充值排行榜">
<template :scope="scope">
<count-to prefix='￥' :start-val="0" :end-val="900" :duration="2600" class="card-panel-num" />
<count-to :duration="2600" :end-val="900" :start-val="0" class="card-panel-num" prefix="￥"/>
</template>
</RankList>
</el-col>
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
<el-col :lg="6" :sm="12" :xs="12" class="card-panel-col">
<RankList title="提现排行榜">
<template :scope="scope">
<count-to prefix='￥' :start-val="0" :end-val="900" :duration="2600" class="card-panel-num" />
<count-to :duration="2600" :end-val="900" :start-val="0" class="card-panel-num" prefix="￥"/>
</template>
</RankList>
</el-col>
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
<RankList @switch-change="" title="女神收入榜" :operation="operation" />
<el-col :lg="6" :sm="12" :xs="12" class="card-panel-col">
<RankList :operation="operation" title="女神收入榜" @switch-change=""/>
</el-col>
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
<RankList title="用户邀请榜" :operation="operation" />
<el-col :lg="6" :sm="12" :xs="12" class="card-panel-col">
<RankList :operation="operation" title="用户邀请榜"/>
</el-col>
</el-row>
</div>
@@ -70,8 +86,10 @@
<el-dropdown-menu slot="dropdown">
<el-dropdown-item
v-for="({ label, key }) in refreshTimeSelect"
:key="key"
:command="{ label, key }"
:key="key">{{ label }}</el-dropdown-item>
>{{ label }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
@@ -80,29 +98,57 @@
</template>
<script>
import CountTo from 'vue-count-to';
import RankList from '@/views/components/rankList';
import LineChart from '../dashboard/LineChart';
import CountTo from 'vue-count-to'
import RankList from '@/views/components/rankList'
import LineChart from '../dashboard/LineChart'
const chartSelect = [
{ label: '最近一周', key: '1' },
{ label: '最近一个月', key: '2' },
{ label: '最近三个月', key: '3' },
];
{ label: '最近三个月', key: '3' }
]
const refreshTimeSelect = [
{ label: '10s', key: '10' },
{ label: '30s', key: '30' },
{ label: '60s', key: '60' },
{ label: '60s', key: '60' }
]
const operation = [
{ label: '总', prop: '' },
{ label: '月', prop: '' },
{ label: '周', prop: '' },
{ label: '日', prop: '' },
{ label: '日', prop: '' }
]
const pickerOptions = {
shortcuts: [{
text: '最近一周',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
picker.$emit('pick', [start, end])
}
}, {
text: '最近一个月',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
picker.$emit('pick', [start, end])
}
}, {
text: '最近三个月',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
picker.$emit('pick', [start, end])
}
}]
}
export default {
components: {
CountTo,
@@ -139,24 +185,37 @@ export default {
chartTime: '1',
refreshTimeSelect,
refreshTimeModel: '30s',
autoRefreshSwitch: true
autoRefreshSwitch: true,
pickerOptions,
}
},
created() {
this.layoutRow = [
{ label: () => '今日登录', icon: require('../../assets/icons/img.png'), model: this.loginModel },
{ label: () => '主播数', icon: require('../../assets/icons/img_1.png'), model: this.topUpModel },
{ label: ()=> `今日充值(${this.withdrawDepositModel.money})`, icon: require('../../assets/icons/img_2.png'), model: this.withdrawDepositModel },
{ label: ()=> `今日提现(${this.anchorModel.money})`, icon: require('../../assets/icons/img_3.png'), model: this.anchorModel }
];
this.getTodayStatistics();
{
label: () => `今日充值(${this.withdrawDepositModel.money})`,
icon: require('../../assets/icons/img_2.png'),
model: this.withdrawDepositModel
},
{
label: () => `今日提现(${this.anchorModel.money})`,
icon: require('../../assets/icons/img_3.png'),
model: this.anchorModel
}
]
this.getTodayStatistics()
},
methods: {
handleDatePickerChange(value) {
console.log('----value:', value);
},
handleChartTimeChange(val) {
// todo
},
handleDropdownClick({ label, key }) {
this.refreshTimeModel = label;
this.refreshTimeModel = label
},
getTodayStatistics() {
// todo fetch
@@ -180,44 +239,49 @@ export default {
todayWithdrawAmount: 500,
todayWithdrawNum: 1,
todayWithdrawAmountDiffLast: 5.9
};
this.loginModel.count = todayLoginNum;
this.loginModel.trendDirection = 1; // 增加还是减少
this.loginModel.trendNum = todayLoginDiffLast;
}
this.loginModel.count = todayLoginNum
this.loginModel.trendDirection = 1 // 增加还是减少
this.loginModel.trendNum = todayLoginDiffLast
this.topUpModel.count = anchorNum; // 主播人数
this.topUpModel.count = anchorNum // 主播人数
this.withdrawDepositModel.count = todayRechargeAmountNum; // 充值金额
this.withdrawDepositModel.money = todayRechargeNum;
this.withdrawDepositModel.trendNum = todayRechargeAmountDiffLast; // 与昨日相比
this.withdrawDepositModel.count = todayRechargeAmountNum // 充值金额
this.withdrawDepositModel.money = todayRechargeNum
this.withdrawDepositModel.trendNum = todayRechargeAmountDiffLast // 与昨日相比
this.anchorModel.count = todayWithdrawAmount;
this.anchorModel.money = todayWithdrawNum;
this.anchorModel.trendNum = todayWithdrawAmountDiffLast;
this.anchorModel.count = todayWithdrawAmount
this.anchorModel.money = todayWithdrawNum
this.anchorModel.trendNum = todayWithdrawAmountDiffLast
}
}
}
</script>
<style scoped lang="scss">
<style lang="scss" scoped>
.fl_l {
float: left;
}
.fl_r {
float: right;
}
.flow-hidden {
overflow: hidden;
}
.wrapper {
.header {
margin-bottom: 16px;
.card-panel-num {
font-size: 28px;
font-weight: bold;
color: #202224;
}
.content {
background: #fff;
height: 127px;
@@ -225,29 +289,35 @@ export default {
border-radius: 14px;
box-sizing: border-box;
margin-bottom: 8px;
.data-info {
.title {
font-size: 16px;
color: #202224;
margin-bottom: 8px;
}
.count {
line-height: 38px;
}
}
.icon {
width: 60px;
height: 60px;
img {
width: 100%;
height: 100%;
}
}
.compare {
height: 20px;
line-height: 20px;
font-size: 14px;
color: #858585;
.trend {
height: 18px;
width: 18px;
@@ -255,10 +325,12 @@ export default {
margin-right: 2px;
vertical-align: middle;
}
.num {
&.down {
color: #F93C65;
}
&.up {
color: #00B69B;
}
@@ -273,15 +345,21 @@ export default {
background: #fff;
padding: 16px;
margin-bottom: 16px;
.select-time {
width: 250px;
position: absolute;
right: 16px;
top: 16px;
.el-date-editor {
width: 100%;
}
}
}
.rank-info {
margin-bottom: 16px;
.card-panel-col {
border-radius: 14px;
margin-bottom: 16px;
@@ -305,33 +383,41 @@ export default {
font-size: 12px;
}
}
::v-deep .el-switch {
height: 14px !important;
margin-top: 1px;
margin-left: 4px;
}
::v-deep .el-switch__core {
width: 28px !important;
height: 14px !important;
&::after {
width: 10px;
height: 10px;
}
}
::v-deep .el-switch.is-checked .el-switch__core {
border-color: #3073C1 !important;
background-color: #3073C1 !important;
&::after {
margin-left: -12px;
}
}
::v-deep .el-dropdown {
width: 37px !important;
.dropdown {
margin-left: 1px;
font-size: 12px;
color: #767D85;
cursor: pointer;
i {
font-size: 10px;
margin-left: 2px;