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

277
src/views/invest/debitDealAnalysis/index.vue
View File

@@ -4,7 +4,7 @@
<div class="title">查询条件</div>
<el-form :model="queryParams" ref="queryRef" :inline="true" :rules="rules" label-width="100px">
<el-form-item label="储蓄账户" style="width: 480px" prop="id">
<el-select v-model="queryParams.id" placeholder="请选择储蓄账户" clearable>
<el-select v-model="queryParams.id" placeholder="请选择储蓄账户" @change="handleChange" clearable>
<el-option v-for="account in accountsList" :key="account.id" :label="account.nameCodeAvailableLimit" :value="account.id" />
</el-select>
</el-form-item>
@@ -64,122 +64,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"><Money /></el-icon>
</div>
<div class="item-wrap">
<div class="title">交易金额</div>
<div>
<span class="num">{{ account.amount }}</span> <span class="unit"></span>
</div>
<div class="num">{{ account.amount }}</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"><TrendCharts /></el-icon>
</div>
<div class="item-wrap">
<div class="title">收入金额</div>
<div>
<span class="num">{{ account.income }}</span> <span class="unit"></span>
</div>
<div class="num">{{ account.income }}</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="#F56C6C"><Coin /></el-icon>
</div>
<div class="item-wrap">
<div class="title">支出金额</div>
<div>
<span class="num">{{ account.expenses }}</span> <span class="unit"></span>
</div>
<div class="num">{{ account.expenses }}</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="#E6A23C"><Histogram /></el-icon>
</div>
<div class="item-wrap">
<div class="title">收入笔数</div>
<div>
<span class="num">{{ account.incomeCount }}</span> <span class="unit">笔</span>
</div>
<div class="num">{{ account.incomeCount }}</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"><CircleCheck /></el-icon>
</div>
<div class="item-wrap">
<div class="title">支出笔数</div>
<div>
<span class="num">{{ account.expensesCount }}</span> <span class="unit">笔</span>
</div>
<div class="num">{{ account.expensesCount }}</div>
</div>
</div>
</div>
<div class="summary-con" v-hasPermi="['invest:posmachine:list']" style="height: 115px">
<div class="right-con">
<div class="img">
<img src="@/assets/images/average.png" alt="" />
<div class="right-con" v-hasPermi="['invest:posmachine:list']">
<div class="icon-box">
<el-icon :size="40" color="#409EFF"><WalletFilled /></el-icon>
</div>
<div class="item-wrap">
<div class="title">POS刷卡收入</div>
<div>
<span class="num">{{ account.posIncome }}</span> <span class="unit"></span>
</div>
<div class="num">{{ account.posIncome }}</div>
</div>
</div>
<div class="right-con">
<div class="img">
<img src="@/assets/images/average.png" alt="" />
<div class="right-con" v-hasPermi="['invest:posmachine:list']">
<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">{{ account.realExpenses }}</span> <span class="unit"></span>
</div>
<div class="num">{{ account.realExpenses }}</div>
</div>
</div>
<div class="right-con">
<div class="img">
<img src="@/assets/images/average.png" alt="" />
<div class="right-con" v-hasPermi="['invest:posmachine:list']">
<div class="icon-box">
<el-icon :size="40" color="#E6A23C"><CircleCheck /></el-icon>
</div>
<div class="item-wrap">
<div class="title">POS收入笔数</div>
<div>
<span class="num">{{ account.posIncomeCount }}</span> <span class="unit"></span>
</div>
<div class="num">{{ account.posIncomeCount }}</div>
</div>
</div>
<div class="right-con">
<div class="img">
<img src="@/assets/images/average.png" alt="" />
<div class="right-con" v-hasPermi="['invest:posmachine:list']">
<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.realExpensesCount }}</span> <span class="unit">笔</span>
</div>
<div class="num">{{ account.realExpensesCount }}</div>
</div>
</div>
<div class="right-con">
<div class="img">
<img src="@/assets/images/average.png" alt="" />
<div class="right-con" v-hasPermi="['invest:posmachine:list']">
<div class="icon-box">
<el-icon :size="40" color="#909399"><Histogram /></el-icon>
</div>
<div class="item-wrap">
<div class="title">支出笔数</div>
<div>
<span class="num">{{ account.otherExpensesCount }}</span> <span class="unit">笔</span>
</div>
<div class="num">{{ account.otherExpensesCount }}</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">
@@ -190,9 +168,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>
@@ -215,6 +193,7 @@
import dayjs from 'dayjs'
import * as echarts from 'echarts'
import { ElMessage } from 'element-plus'
import { TrendCharts, Money, Coin, CreditCard, Histogram, CircleCheck, WalletFilled, Odometer } from '@element-plus/icons-vue'
import yearPicker from '@/components/YearPicker/index.vue'
import { getAcccountsDealAnalysis } from '@/api/invest/statisticAnalysis'
import { listAccounts } from '@/api/invest/accounts'
@@ -276,6 +255,10 @@ const data = reactive({
})
const { queryParams, queryAcccountsParams, rules } = toRefs(data)
const handleChange = (id) => {
queryParams.value.id = id
getList()
}
const today = new Date()
const end = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2) + '-' + ('0' + today.getDate()).slice(-2)
const start = dayjs(end).add(-7, 'day')
@@ -467,21 +450,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) => {
@@ -541,7 +535,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',
@@ -571,22 +573,135 @@ 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
}
})
}
getAcccountsList()
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>