feature：代码初始化。
This commit is contained in:
tianyongbao
420
src/views/invest/accountsBalance/index.vue
Normal file
420
src/views/invest/accountsBalance/index.vue
Normal file
@@ -0,0 +1,420 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="search-con">
|
||||
<div class="title">查询条件</div>
|
||||
<el-form :model="queryParams" ref="queryRef" :inline="true" :rules="rules" label-width="100px">
|
||||
<el-form-item label="账户类型" prop="type">
|
||||
<el-select v-model="queryParams.dataType" placeholder="请选择账户类型" clearable>
|
||||
<el-option
|
||||
v-for="dict in account_type"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="" prop="time" v-if="queryParams.type === 1">
|
||||
<el-date-picker
|
||||
v-model="queryParams.time"
|
||||
type="daterange"
|
||||
disabled="true"
|
||||
range-separator="~"
|
||||
start-placeholder="开始时间"
|
||||
end-placeholder="结束时间"
|
||||
format="YYYY-MM-DD"
|
||||
@calendar-change="calendarChange"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="search-btn-con">
|
||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
||||
<el-button type="info" icon="Refresh" @click="resetQuery">重置</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main-con" style="height: calc(100% - 1.45rem)">
|
||||
<div class="summary-con" >
|
||||
|
||||
<div class="right-con">
|
||||
<div class="img">
|
||||
<img src="@/assets/images/average.png" alt="" />
|
||||
</div>
|
||||
<div class="item-wrap">
|
||||
<div class="title">储蓄卡可用余额</div>
|
||||
<div>
|
||||
<span class="num">{{ accountsBalance.debetBalance }}</span> <span class="unit"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-con">
|
||||
<div class="img">
|
||||
<img src="@/assets/images/average.png" alt="" />
|
||||
</div>
|
||||
<div class="item-wrap">
|
||||
<div class="title">信用卡可用额度</div>
|
||||
<div>
|
||||
<span class="num">{{ accountsBalance.creditAvailableLimit }}</span> <span class="unit"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-con">
|
||||
<div class="img">
|
||||
<img src="@/assets/images/average.png" alt="" />
|
||||
</div>
|
||||
<div class="item-wrap">
|
||||
<div class="title">信用卡余额</div>
|
||||
<div>
|
||||
<span class="num">{{ accountsBalance.creditBalance}}</span> <span class="unit"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="center-con">
|
||||
<div class="img">
|
||||
<img src="@/assets/images/average.png" alt="" />
|
||||
</div>
|
||||
<div class="item-wrap">
|
||||
<div class="title">投资账户余额</div>
|
||||
<div>
|
||||
<span class="num">{{ accountsBalance.investBalance }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="center-con">
|
||||
<div class="img">
|
||||
<img src="@/assets/images/average.png" alt="" />
|
||||
</div>
|
||||
<div class="item-wrap">
|
||||
<div class="title">借贷账户余额</div>
|
||||
<div>
|
||||
<span class="num">{{ accountsBalance.debitBalance }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="title-con">
|
||||
<div class="title">记账账户查询统计</div>
|
||||
<div class="operate-btn-con">
|
||||
<el-radio-group v-model="radioVal" @change="handleRadioChange">
|
||||
<el-radio-button label="柱状图" />
|
||||
<el-radio-button label="折线图" />
|
||||
<el-radio-button label="表格" />
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-con">
|
||||
<div v-show="radioVal === '柱状图'" class="chart" id="chartBar" style="height: calc(100% - 170px);"></div>
|
||||
<div v-show="radioVal === '折线图'" class="chart" id="chartLine" style="height: calc(100% - 170px);"></div>
|
||||
<el-table v-show="radioVal === '表格'" v-loading="loading" :data="accountsBalance.accountsBalancesList" height="calc(100% - 170px)">
|
||||
<el-table-column label="序号" width="50" type="index" align="center">
|
||||
<template #default="scope">
|
||||
<span>{{ scope.$index + 1 }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="记账账户" align="center" prop="account" />
|
||||
<el-table-column label="可用余额" align="center" prop="availableLimit" />
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="CreditAnalysis">
|
||||
import dayjs from 'dayjs'
|
||||
import * as echarts from 'echarts'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { getAccountsAnalysis } from '@/api/invest/statisticAnalysis'
|
||||
const { proxy } = getCurrentInstance()
|
||||
const { account_type } = proxy.useDict('account_type')
|
||||
|
||||
const loading = ref(true)
|
||||
const total = ref(0)
|
||||
const radioVal = ref('柱状图')
|
||||
const dateValidate = (rules, value, callback) => {
|
||||
const dateType = rules.dateType || 'days'
|
||||
const num = rules.num || 31
|
||||
const dateString = rules.dateString || '天'
|
||||
const message = rules.message || `时间跨度不能超过${num}${dateString}`
|
||||
|
||||
if (value && value.length === 2) {
|
||||
const start = value[0]
|
||||
const end = value[1]
|
||||
if (dayjs(end).diff(dayjs(start), dateType) > num) {
|
||||
queryParams.value.time = [start, dayjs(start).add(59, 'months')]
|
||||
ElMessage.warning(message)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const data = reactive({
|
||||
queryParams: {
|
||||
type: 1,
|
||||
time: null,
|
||||
dataType: null,
|
||||
id: null
|
||||
},
|
||||
rules: {
|
||||
time: [{ validator: dateValidate, dateType: 'months', num: 59, dateRange: '月', message: '时间跨度不能大于60个月，默认选择开始日期的24个月' }]
|
||||
}
|
||||
})
|
||||
|
||||
const { queryParams, rules } = toRefs(data)
|
||||
const today = new Date()
|
||||
const end = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2) + '-' + ('0' + today.getDate()).slice(-2)
|
||||
const start = end
|
||||
queryParams.value.time = [start, end]
|
||||
|
||||
const firstChooseDate = ref('')
|
||||
const calendarChange = (val) => {
|
||||
firstChooseDate.value = val[0].getTime()
|
||||
if (val[1]) firstChooseDate.value = ''
|
||||
}
|
||||
|
||||
const accountsBalance = ref({
|
||||
debetBalance: '',
|
||||
creditAvailableLimit: '',
|
||||
creditBalance: '',
|
||||
investBalance: '',
|
||||
debitBalance: '',
|
||||
accountsBalancesList: []
|
||||
})
|
||||
const chartData = ref({
|
||||
name: [],
|
||||
value1: []
|
||||
})
|
||||
|
||||
function getList() {
|
||||
loading.value = true
|
||||
chartData.value = { name: [], value1: [] }
|
||||
const { type, time, id, dataType } = queryParams.value
|
||||
let formatValue = 'YYYY-MM-DD'
|
||||
if (type === 1) {
|
||||
formatValue = 'YYYY-MM-DD'
|
||||
} else if (type === 2) {
|
||||
formatValue = 'YYYY-MM'
|
||||
} else {
|
||||
formatValue = 'YYYY'
|
||||
}
|
||||
const params = {
|
||||
type,
|
||||
startTime: time && time.length > 0 ? dayjs(time[0]).format(formatValue) : '',
|
||||
endTime: time && time.length > 0 ? dayjs(time[1]).format(formatValue) : '',
|
||||
id,
|
||||
dataType
|
||||
}
|
||||
getAccountsAnalysis(params).then((response) => {
|
||||
loading.value = false
|
||||
accountsBalance.value = { ...response.data }
|
||||
accountsBalance.value.accountsBalancesList.map((item) => {
|
||||
return {
|
||||
name: item.account,
|
||||
value: item.availableLimit
|
||||
}
|
||||
})
|
||||
response.data.accountsBalancesList.map((item) => {
|
||||
chartData.value.name.push(item.account)
|
||||
chartData.value.value1.push(item.availableLimit)
|
||||
})
|
||||
handleRadioChange(currentType.value)
|
||||
})
|
||||
}
|
||||
|
||||
function handleQuery() {
|
||||
getList()
|
||||
}
|
||||
|
||||
function resetQuery() {
|
||||
proxy.resetForm('queryRef')
|
||||
queryParams.value.id = null
|
||||
queryParams.value.dataType = null
|
||||
total.value = 0
|
||||
handleQuery()
|
||||
}
|
||||
|
||||
const drawBar = (data) => {
|
||||
if (document.getElementById('chartBar') === null) {
|
||||
return
|
||||
}
|
||||
echarts.dispose(document.getElementById('chartBar'))
|
||||
const myChart = echarts.init(document.getElementById('chartBar'))
|
||||
|
||||
const option = {
|
||||
legend: {
|
||||
// 图示例样式
|
||||
show: true,
|
||||
top: 50,
|
||||
right: 50,
|
||||
itemGap: 20
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
},
|
||||
formatter: function (params) {
|
||||
return params[0].name + '<br>' + '可用余额：' + params[0].value + '元'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '5%',
|
||||
right: '5%',
|
||||
bottom: '5%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: data.name,
|
||||
axisTick: {
|
||||
alignWithLabel: true // 刻度线是否与标签对齐，默认false
|
||||
},
|
||||
// 设置 X 轴线条粗细
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 1, // 根据需求调整数值大小，单位是像素
|
||||
color: '#999'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
axisTick: {
|
||||
show: false // 默认为true，如果要隐藏，则改为 false
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: '#999'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
data: data.value1,
|
||||
type: 'bar',
|
||||
barWidth: 20, // 根据需求调整数值大小，单位是像素
|
||||
itemStyle: {
|
||||
color: '#2283cf'
|
||||
}
|
||||
}
|
||||
],
|
||||
// 添加点击事件的处理函数
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
color: '#2283cf',
|
||||
barWidth: 20 // 根据需求调整数值大小，单位是像素
|
||||
},
|
||||
barWidth: 24 // 根据需求调整数值大小，单位是像素
|
||||
}
|
||||
}
|
||||
|
||||
myChart.setOption(option)
|
||||
}
|
||||
|
||||
const drawLine = (data) => {
|
||||
if (document.getElementById('chartLine') === null) {
|
||||
return
|
||||
}
|
||||
echarts.dispose(document.getElementById('chartLine'))
|
||||
const myChart = echarts.init(document.getElementById('chartLine'))
|
||||
|
||||
const option = {
|
||||
grid: {
|
||||
left: '5%',
|
||||
right: '5%',
|
||||
bottom: '5%',
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
},
|
||||
formatter: function (params) {
|
||||
return params[0].name + '<br>' + '可用余额：' + params[0].value + '元'
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: data.name,
|
||||
axisTick: {
|
||||
alignWithLabel: true
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: '#999'
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: '#999'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: data.value1,
|
||||
type: 'line',
|
||||
lineStyle: {
|
||||
color: '#4181c9'
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#4181c9'
|
||||
},
|
||||
smooth: true,
|
||||
symbol: 'emptyCircle',
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(65,129,201, 0.70)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(65,129,201, 0.10)'
|
||||
}
|
||||
],
|
||||
false
|
||||
),
|
||||
shadowColor: 'rgba(65,129,201, 0.10)',
|
||||
shadowBlur: 10
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
myChart.setOption(option)
|
||||
}
|
||||
|
||||
const currentType = ref('柱状图')
|
||||
const handleRadioChange = (type) => {
|
||||
currentType.value = type
|
||||
switch (type) {
|
||||
case '柱状图':
|
||||
drawBar(chartData.value)
|
||||
break
|
||||
case '折线图':
|
||||
drawLine(chartData.value)
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
}
|
||||
getList()
|
||||
</script>
|
||||
Reference in New Issue
Block a user