qdintc/intc-vue3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 健康档案管理，同步记账管理系统页面功能。

Browse Source
This commit is contained in:
tianyongbao
2025-11-06 22:57:00 +08:00
parent 10d6e13150
commit bfc9714830
51 changed files with 7779 additions and 1617 deletions
Download Patch File Download Diff File Expand all files Collapse all files

261
src/views/invest/accountDealAnalysis/index.vue
View File

@@ -49,122 +49,100 @@
<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" style="height: 115px">
<div class="main-con">
<div class="summary-con">
<div class="right-con">
<div class="img">
<img src="@/assets/images/average.png" alt="" />
<div class="icon-box">
<el-icon :size="40" color="#409EFF"><TrendCharts /></el-icon>
</div>
<div class="item-wrap">
<div class="title">收支差额</div>
<div>
<span class="num">{{ account.balance }}</span> <span class="unit"></span>
</div>
<div class="num">{{ account.balance }}</div>
</div>
</div>
<div class="right-con">
<div class="img">
<img src="@/assets/images/average.png" alt="" />
<div class="icon-box">
<el-icon :size="40" color="#67C23A"><DataLine /></el-icon>
</div>
<div class="item-wrap">
<div class="title">工资收益</div>
<div>
<span class="num">{{ account.salaryIncome }}</span> <span class="unit"></span>
</div>
<div class="num">{{ account.salaryIncome }}</div>
</div>
</div>
<div class="right-con" v-hasPermi="['invest:futureStocks:list']">
<div class="img">
<img src="@/assets/images/average.png" alt="" />
<div class="icon-box">
<el-icon :size="40" color="#E6A23C"><Histogram /></el-icon>
</div>
<div class="item-wrap">
<div class="title">投资盈利</div>
<div>
<span class="num">{{ account.investIncome }}</span> <span class="unit"></span>
</div>
<div class="num">{{ account.investIncome }}</div>
</div>
</div>
<div class="right-con" v-hasPermi="['invest:futureStocks:list']">
<div class="img">
<img src="@/assets/images/average.png" alt="" />
<div class="icon-box">
<el-icon :size="40" color="#F56C6C"><Odometer /></el-icon>
</div>
<div class="item-wrap">
<div class="title">投资亏损</div>
<div>
<span class="num">{{ account.investOutcome }}</span> <span class="unit"></span>
</div>
<div class="num">{{ account.investOutcome }}</div>
</div>
</div>
<div class="right-con">
<div class="img">
<img src="@/assets/images/average.png" alt="" />
<div class="icon-box">
<el-icon :size="40" color="#909399"><Coin /></el-icon>
</div>
<div class="item-wrap">
<div class="title">支出总额</div>
<div>
<span class="num">{{ account.totalOutcome }}</span> <span class="unit"></span>
</div>
<div class="num">{{ account.totalOutcome }}</div>
</div>
</div>
</div>
<div class="summary-con" style="height: 115px">
<div class="right-con">
<div class="img">
<img src="@/assets/images/average.png" alt="" />
<div class="icon-box">
<el-icon :size="40" color="#409EFF"><WalletFilled /></el-icon>
</div>
<div class="item-wrap">
<div class="title">日常支出</div>
<div>
<span class="num">{{ account.dailyExpenses }}</span> <span class="unit"></span>
</div>
<div class="num">{{ account.dailyExpenses }}</div>
</div>
</div>
<div class="right-con" v-hasPermi="['invest:onlineLend', 'invest:posmachine:list', 'invest:creditCard']">
<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">手续费利息支出</div>
<div>
<span class="num">{{ account.notDailyExpenses }}</span> <span class="unit"></span>
</div>
<div class="num">{{ account.notDailyExpenses }}</div>
</div>
</div>
<div class="right-con" v-hasPermi="['invest:posmachine:list']">
<div class="img">
<img src="@/assets/images/average.png" alt="" />
<div class="icon-box">
<el-icon :size="40" color="#E6A23C"><CreditCard /></el-icon>
</div>
<div class="item-wrap">
<div class="title">POS机刷卡手续费</div>
<div>
<span class="num">{{ account.posExpenses }}</span> <span class="unit"></span>
</div>
<div class="num">{{ account.posExpenses }}</div>
</div>
</div>
<div class="right-con" v-hasPermi="['invest:creditCard']">
<div class="img">
<img src="@/assets/images/average.png" alt="" />
<div class="icon-box">
<el-icon :size="40" color="#F56C6C"><Coin /></el-icon>
</div>
<div class="item-wrap">
<div class="title">信用卡分期利息</div>
<div>
<span class="num">{{ account.creditInterest }}</span> <span class="unit"></span>
</div>
<div class="num">{{ account.creditInterest }}</div>
</div>
</div>
<div class="right-con" v-hasPermi="['invest:onlineLend']">
<div class="img">
<img src="@/assets/images/average.png" alt="" />
<div class="icon-box">
<el-icon :size="40" color="#909399"><Odometer /></el-icon>
</div>
<div class="item-wrap">
<div class="title">贷款利息</div>
<div>
<span class="num">{{ account.onLineInterest }}</span> <span class="unit"></span>
</div>
<div class="num">{{ account.onLineInterest }}</div>
</div>
</div>
</div>
<div class="title-con" style="margin-top: 18px">
<div class="title-con">
<div class="title">账户收支统计</div>
<div class="operate-btn-con">
<el-radio-group v-model="radioVal" @change="handleRadioChange">
@@ -175,9 +153,9 @@
</div>
</div>
<div class="content-con">
<div v-show="radioVal === '柱状图'" class="chart" id="chartBar" style="height: calc(100% - 225px); margin-top: -10px"></div>
<div v-show="radioVal === '折线图'" class="chart" id="chartLine" style="height: calc(100% - 225px); margin-top: -10px"></div>
<el-table v-show="radioVal === '表格'" v-loading="loading" :data="account.tableAccountsList" height="calc(100% - 245px)">
<div v-show="radioVal === '柱状图'" class="chart" id="chartBar"></div>
<div v-show="radioVal === '折线图'" class="chart" id="chartLine"></div>
<el-table v-show="radioVal === '表格'" v-loading="loading" :data="account.tableAccountsList">
<el-table-column label="序号" width="50" type="index" align="center">
<template #default="scope">
<span>{{ scope.$index + 1 }}</span>
@@ -200,6 +178,7 @@
import dayjs from 'dayjs'
import * as echarts from 'echarts'
import { ElMessage } from 'element-plus'
import { TrendCharts, Money, Coin, WalletFilled, CreditCard, DataLine, Odometer, Histogram } from '@element-plus/icons-vue'
import yearPicker from '@/components/YearPicker/index.vue'
import { getAcccountsOutInAnalysis } from '@/api/invest/statisticAnalysis'
import { listAccounts } from '@/api/invest/accounts'
@@ -423,21 +402,32 @@ const drawBar = (data) => {
type: 'bar',
barWidth: 20, // 根据需求调整数值大小，单位是像素
itemStyle: {
color: '#2283cf'
// 此处可以是一个固定颜色值，也可以是一个回调函数根据数据动态计算颜色
color: function (params) {
// 这里可以根据需要设置不同的颜色，比如根据数据值
if (params.data <= 0) {
return 'green'
} else if (params.data > 0) {
return 'red'
}
}
}
}
],
// 添加点击事件的处理函数
emphasis: {
itemStyle: {
color: '#2283cf',
barWidth: 20 // 根据需求调整数值大小，单位是像素
},
barWidth: 24 // 根据需求调整数值大小，单位是像素
// itemStyle: {
// color: '#2283cf',
// barWidth: 20 // 根据需求调整数值大小，单位是像素
// },
// barWidth: 24 // 根据需求调整数值大小，单位是像素
}
}
myChart.setOption(option)
setTimeout(() => {
myChart.resize()
}, 100)
}
const drawLine = (data) => {
@@ -497,7 +487,15 @@ const drawLine = (data) => {
color: '#4181c9'
},
itemStyle: {
color: '#4181c9'
// 此处可以是一个固定颜色值，也可以是一个回调函数根据数据动态计算颜色
color: function (params) {
// 这里可以根据需要设置不同的颜色，比如根据数据值
if (params.data <= 0) {
return 'green'
} else if (params.data > 0) {
return 'red'
}
}
},
smooth: true,
symbol: 'emptyCircle',
@@ -527,21 +525,134 @@ const drawLine = (data) => {
}
myChart.setOption(option)
setTimeout(() => {
myChart.resize()
}, 100)
}
const currentType = ref('柱状图')
const handleRadioChange = (type) => {
currentType.value = type
switch (type) {
case '柱状图':
drawBar(chartData.value)
break
case '折线图':
drawLine(chartData.value)
break
default:
break
}
nextTick(() => {
switch (type) {
case '柱状图':
drawBar(chartData.value)
break
case '折线图':
drawLine(chartData.value)
break
default:
break
}
})
}
getList()
</script>
<style lang="scss" scoped>
.main-con {
height: calc(100vh - 200px);
display: flex;
flex-direction: column;
overflow: hidden;
}
.summary-con {
gap: 0.14rem !important;
justify-content: flex-start !important;
flex-wrap: wrap;
margin-bottom: 0.08rem !important;
flex-shrink: 0;
.right-con {
flex: 1 1 calc(20% - 0.112rem);
min-width: 2.4rem;
max-width: calc(20% - 0.112rem);
list-style: none !important;
&::before,
&::after {
display: none !important;
content: none !important;
}
}
.item-wrap {
list-style: none !important;
&::before,
&::after {
display: none !important;
content: none !important;
}
.num,
.title {
&::before,
&::after {
display: none !important;
content: none !important;
}
}
}
.icon-box {
&::before,
&::after {
display: none !important;
content: none !important;
}
}
}
.title-con {
margin-top: 0 !important;
padding-top: 0.08rem !important;
flex-shrink: 0;
}
.content-con {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
min-height: 0;
.chart {
flex: 1;
min-height: 0;
width: 100%;
}
.el-table {
flex: 1;
}
}
@media (max-width: 1600px) {
.summary-con {
.right-con {
flex: 1 1 calc(25% - 0.105rem);
max-width: calc(25% - 0.105rem);
}
}
}
@media (max-width: 1200px) {
.summary-con {
.right-con {
flex: 1 1 calc(33.333% - 0.093rem);
max-width: calc(33.333% - 0.093rem);
}
}
}
@media (max-width: 768px) {
.summary-con {
.right-con {
flex: 1 1 100%;
max-width: 100%;
}
}
}
</style>