fix: 首页日历、净资产、统计页面，统一优化样式。
This commit is contained in:
tianyongbao
@@ -2,138 +2,114 @@
|
||||
<div class="app-container">
|
||||
<div class="main-con" style="height: calc(100% - 0rem)">
|
||||
<div class="summary-con" style="height: 115px">
|
||||
<div class="right-con">
|
||||
<div class="img">
|
||||
<img src="@/assets/images/average.png" alt="" />
|
||||
<div class="center-con">
|
||||
<div class="icon-box">
|
||||
<el-icon :size="40" color="#409EFF"><Calendar /></el-icon>
|
||||
</div>
|
||||
<div class="item-wrap">
|
||||
<div class="title">今日交易</div>
|
||||
<div>
|
||||
<span class="num">{{ debitCardAnalysis.todayCount }}</span> <span class="unit">次</span>
|
||||
</div>
|
||||
<div class="num">{{ debitCardAnalysis.todayCount }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="center-con">
|
||||
<div class="img">
|
||||
<img src="@/assets/images/average.png" alt="" />
|
||||
<div class="icon-box">
|
||||
<el-icon :size="40" color="#67C23A"><Money /></el-icon>
|
||||
</div>
|
||||
<div class="item-wrap">
|
||||
<div class="title">今日刷卡</div>
|
||||
<div>
|
||||
<span class="num">{{ debitCardAnalysis.todayAmount }}</span>
|
||||
</div>
|
||||
<div class="num">{{ debitCardAnalysis.todayAmount }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-con">
|
||||
<div class="img">
|
||||
<img src="@/assets/images/average.png" alt="" />
|
||||
<div class="center-con">
|
||||
<div class="icon-box">
|
||||
<el-icon :size="40" color="#E6A23C"><Calendar /></el-icon>
|
||||
</div>
|
||||
<div class="item-wrap">
|
||||
<div class="title">近7日交易</div>
|
||||
<div>
|
||||
<span class="num">{{ debitCardAnalysis.sevenDayCount }}</span> <span class="unit">次</span>
|
||||
</div>
|
||||
<div class="num">{{ debitCardAnalysis.sevenDayCount }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="center-con">
|
||||
<div class="img">
|
||||
<img src="@/assets/images/average.png" alt="" />
|
||||
<div class="icon-box">
|
||||
<el-icon :size="40" color="#F56C6C"><CreditCard /></el-icon>
|
||||
</div>
|
||||
<div class="item-wrap">
|
||||
<div class="title">近7日刷卡</div>
|
||||
<div>
|
||||
<span class="num">{{ debitCardAnalysis.sevenDayAmount }}</span>
|
||||
</div>
|
||||
<div class="num">{{ debitCardAnalysis.sevenDayAmount }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="center-con">
|
||||
<div class="img">
|
||||
<img src="@/assets/images/average.png" alt="" />
|
||||
<div class="icon-box">
|
||||
<el-icon :size="40" color="#909399"><Calendar /></el-icon>
|
||||
</div>
|
||||
<div class="item-wrap">
|
||||
<div class="title">近1月交易次数</div>
|
||||
<div>
|
||||
<span class="num">{{ debitCardAnalysis.oneMonthCount }}</span> <span class="unit">次</span>
|
||||
</div>
|
||||
<div class="num">{{ debitCardAnalysis.oneMonthCount }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="center-con">
|
||||
<div class="img">
|
||||
<img src="@/assets/images/average.png" alt="" />
|
||||
<div class="icon-box">
|
||||
<el-icon :size="40" color="#00D0FF"><Coin /></el-icon>
|
||||
</div>
|
||||
<div class="item-wrap">
|
||||
<div class="title">近1月刷卡</div>
|
||||
<div>
|
||||
<span class="num">{{ debitCardAnalysis.oneMonthAmount }}</span>
|
||||
</div>
|
||||
<div class="num">{{ debitCardAnalysis.oneMonthAmount }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="summary-con" style="height: 110px">
|
||||
<div class="right-con">
|
||||
<div class="img">
|
||||
<img src="@/assets/images/average.png" alt="" />
|
||||
<div class="center-con">
|
||||
<div class="icon-box">
|
||||
<el-icon :size="40" color="#409EFF"><DataLine /></el-icon>
|
||||
</div>
|
||||
<div class="item-wrap">
|
||||
<div class="title">近6月交易</div>
|
||||
<div>
|
||||
<span class="num">{{ debitCardAnalysis.sixMonthCount }}</span> <span class="unit">次</span>
|
||||
</div>
|
||||
<div class="num">{{ debitCardAnalysis.sixMonthCount }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="center-con">
|
||||
<div class="img">
|
||||
<img src="@/assets/images/average.png" alt="" />
|
||||
<div class="icon-box">
|
||||
<el-icon :size="40" color="#67C23A"><WalletFilled /></el-icon>
|
||||
</div>
|
||||
<div class="item-wrap">
|
||||
<div class="title">近6月刷卡</div>
|
||||
<div>
|
||||
<span class="num">{{ debitCardAnalysis.sixMonthAmount }}</span>
|
||||
</div>
|
||||
<div class="num">{{ debitCardAnalysis.sixMonthAmount }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="center-con">
|
||||
<div class="img">
|
||||
<img src="@/assets/images/average.png" alt="" />
|
||||
<div class="icon-box">
|
||||
<el-icon :size="40" color="#E6A23C"><DataLine /></el-icon>
|
||||
</div>
|
||||
<div class="item-wrap">
|
||||
<div class="title">近1年交易</div>
|
||||
<div>
|
||||
<span class="num">{{ debitCardAnalysis.oneYearCount }}</span> <span class="unit">次</span>
|
||||
</div>
|
||||
<div class="num">{{ debitCardAnalysis.oneYearCount }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="center-con">
|
||||
<div class="img">
|
||||
<img src="@/assets/images/average.png" alt="" />
|
||||
<div class="icon-box">
|
||||
<el-icon :size="40" color="#F56C6C"><Money /></el-icon>
|
||||
</div>
|
||||
<div class="item-wrap">
|
||||
<div class="title">近1年刷卡</div>
|
||||
<div>
|
||||
<span class="num">{{ debitCardAnalysis.oneYearAmount }}</span>
|
||||
</div>
|
||||
<div class="num">{{ debitCardAnalysis.oneYearAmount }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-con">
|
||||
<div class="img">
|
||||
<img src="@/assets/images/average.png" alt="" />
|
||||
<div class="center-con">
|
||||
<div class="icon-box">
|
||||
<el-icon :size="40" color="#909399"><TrendCharts /></el-icon>
|
||||
</div>
|
||||
<div class="item-wrap">
|
||||
<div class="title">总交易次数</div>
|
||||
<div>
|
||||
<span class="num">{{ debitCardAnalysis.totalCount }}</span> <span class="unit">次</span>
|
||||
</div>
|
||||
<div class="num">{{ debitCardAnalysis.totalCount }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-con">
|
||||
<div class="img">
|
||||
<img src="@/assets/images/average.png" alt="" />
|
||||
<div class="center-con">
|
||||
<div class="icon-box">
|
||||
<el-icon :size="40" color="#00D0FF"><WalletFilled /></el-icon>
|
||||
</div>
|
||||
<div class="item-wrap">
|
||||
<div class="title">总刷卡金额</div>
|
||||
<div>
|
||||
<span class="num">{{ debitCardAnalysis.totalAmount }}</span> <span class="unit"></span>
|
||||
</div>
|
||||
<div class="num">{{ debitCardAnalysis.totalAmount }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -181,6 +157,7 @@
|
||||
import dayjs from 'dayjs'
|
||||
import * as echarts from 'echarts'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { Calendar, Money, CreditCard, TrendCharts, DataLine, WalletFilled, Coin } from '@element-plus/icons-vue'
|
||||
import { getPosStatics } from '@/api/invest/statisticAnalysis'
|
||||
const { proxy } = getCurrentInstance()
|
||||
const { account_type } = proxy.useDict('account_type')
|
||||
@@ -383,6 +360,9 @@ const drawBar = (data) => {
|
||||
}
|
||||
|
||||
myChart.setOption(option)
|
||||
setTimeout(() => {
|
||||
myChart.resize()
|
||||
}, 100)
|
||||
}
|
||||
|
||||
const drawLine = (data) => {
|
||||
@@ -480,21 +460,54 @@ const drawLine = (data) => {
|
||||
}
|
||||
|
||||
myChart.setOption(option)
|
||||
setTimeout(() => {
|
||||
myChart.resize()
|
||||
}, 100)
|
||||
}
|
||||
|
||||
const currentType = ref('近1年刷卡金额柱状图')
|
||||
const handleRadioChange = (type) => {
|
||||
currentType.value = type
|
||||
switch (type) {
|
||||
case '近6月刷卡金额柱状图':
|
||||
drawBar(chartData.value)
|
||||
break
|
||||
case '近6月刷卡金额折线图':
|
||||
drawLine(chartData.value)
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
nextTick(() => {
|
||||
switch (type) {
|
||||
case '近6月刷卡金额柱状图':
|
||||
drawBar(chartData.value)
|
||||
break
|
||||
case '近6月刷卡金额折线图':
|
||||
drawLine(chartData.value)
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
})
|
||||
}
|
||||
getList()
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.summary-con {
|
||||
.center-con {
|
||||
&::before,
|
||||
&::after {
|
||||
display: none !important;
|
||||
content: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.item-wrap {
|
||||
&::before,
|
||||
&::after {
|
||||
display: none !important;
|
||||
content: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-box {
|
||||
&::before,
|
||||
&::after {
|
||||
display: none !important;
|
||||
content: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user