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

324
src/views/invest/dailyExpensesAnalysis/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>
@@ -54,76 +54,130 @@
<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="#F56C6C"><TrendCharts /></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-show="account.top1Name != null">
<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">{{ account.top1Name }}</div>
<div>
<span class="num">{{ account.top1 }}</span> <span class="unit"></span>
</div>
<div class="num">{{ account.top1 }}</div>
</div>
</div>
<div class="right-con" v-show="account.top2Name != null">
<div class="img">
<img src="@/assets/images/average.png" alt="" />
<div class="icon-box">
<el-icon :size="40" color="#67C23A"><Coin /></el-icon>
</div>
<div class="item-wrap">
<div class="title">{{ account.top2Name }}</div>
<div>
<span class="num">{{ account.top2 }}</span> <span class="unit"></span>
</div>
<div class="num">{{ account.top2 }}</div>
</div>
</div>
<div class="right-con" v-show="account.top3Name != null">
<div class="img">
<img src="@/assets/images/average.png" alt="" />
<div class="icon-box">
<el-icon :size="40" color="#E6A23C"><WalletFilled /></el-icon>
</div>
<div class="item-wrap">
<div class="title">{{ account.top3Name }}</div>
<div>
<span class="num">{{ account.top3 }}</span> <span class="unit"></span>
</div>
<div class="num">{{ account.top3 }}</div>
</div>
</div>
<div class="right-con" v-show="account.top4Name != null">
<div class="img">
<img src="@/assets/images/average.png" alt="" />
<div class="icon-box">
<el-icon :size="40" color="#909399"><CreditCard /></el-icon>
</div>
<div class="item-wrap">
<div class="title">{{ account.top4Name }}</div>
<div>
<span class="num">{{ account.top4 }}</span> <span class="unit"></span>
</div>
<div class="num">{{ account.top4 }}</div>
</div>
</div>
<div class="right-con" v-show="account.top5Name != null">
<div class="icon-box">
<el-icon :size="40" color="#F56C6C"><ShoppingCart /></el-icon>
</div>
<div class="item-wrap">
<div class="title">{{ account.top5Name }}</div>
<div class="num">{{ account.top5 }}</div>
</div>
</div>
<div class="right-con" v-show="account.top6Name != null">
<div class="icon-box">
<el-icon :size="40" color="#409EFF"><PieChart /></el-icon>
</div>
<div class="item-wrap">
<div class="title">{{ account.top6Name }}</div>
<div class="num">{{ account.top6 }}</div>
</div>
</div>
<div class="right-con" v-show="account.top7Name != null">
<div class="icon-box">
<el-icon :size="40" color="#67C23A"><Histogram /></el-icon>
</div>
<div class="item-wrap">
<div class="title">{{ account.top7Name }}</div>
<div class="num">{{ account.top7 }}</div>
</div>
</div>
<div class="right-con" v-show="account.top8Name != null">
<div class="icon-box">
<el-icon :size="40" color="#E6A23C"><DataLine /></el-icon>
</div>
<div class="item-wrap">
<div class="title">{{ account.top8Name }}</div>
<div class="num">{{ account.top8 }}</div>
</div>
</div>
<div class="right-con" v-show="account.top9Name != null">
<div class="icon-box">
<el-icon :size="40" color="#909399"><DocumentCopy /></el-icon>
</div>
<div class="item-wrap">
<div class="title">{{ account.top9Name }}</div>
<div class="num">{{ account.top9 }}</div>
</div>
</div>
<div class="right-con" v-show="account.top10Name != null">
<div class="icon-box">
<el-icon :size="40" color="#F56C6C"><Odometer /></el-icon>
</div>
<div class="item-wrap">
<div class="title">{{ account.top10Name }}</div>
<div class="num">{{ account.top10 }}</div>
</div>
</div>
<div class="right-con" v-show="account.top11Name != null">
<div class="icon-box">
<el-icon :size="40" color="#409EFF"><CircleCheck /></el-icon>
</div>
<div class="item-wrap">
<div class="title">{{ account.top11Name }}</div>
<div class="num">{{ account.top11 }}</div>
</div>
</div>
</div>
<div class="title-con" style="margin-top: 15px">
<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-button label="分类柱状图" />
<el-radio-button label="分类表格" />
<el-radio-button label="日期折线图" />
<el-radio-button label="日期表格" />
</el-radio-group>
</div>
</div>
<div class="content-con">
<el-table v-show="radioVal === '表格'" v-loading="loading" :data="account.accountsList" height="calc(100% - 170px)">
<el-table v-show="radioVal === '分类表格'" v-loading="loading" :data="account.accountsList">
<el-table-column label="序号" width="50" type="index" align="center">
<template #default="scope">
<span>{{ scope.$index + 1 }}</span>
@@ -132,8 +186,17 @@
<el-table-column label="交易子类别" align="center" prop="time" />
<el-table-column label="支出金额" align="center" prop="value" />
</el-table>
<div v-show="radioVal === '柱状图'" class="chart" id="chartBar" style="height: calc(100% - 170px); margin-top: -10px"></div>
<div v-show="radioVal === '折线图'" class="chart" id="chartLine" style="height: calc(100% - 170px); margin-top: -10px"></div>
<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.tableAccountsDateList">
<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="time" />
<el-table-column label="支出金额" align="center" prop="value" />
</el-table>
</div>
</div>
</div>
@@ -143,6 +206,20 @@
import dayjs from 'dayjs'
import * as echarts from 'echarts'
import { ElMessage } from 'element-plus'
import {
TrendCharts,
PieChart,
Histogram,
DataLine,
Money,
Coin,
WalletFilled,
DocumentCopy,
CreditCard,
ShoppingCart,
Odometer,
CircleCheck
} from '@element-plus/icons-vue'
import yearPicker from '@/components/YearPicker/index.vue'
import { getDailyExpensesAnalysis } from '@/api/invest/statisticAnalysis'
import { listAccounts } from '@/api/invest/accounts'
@@ -166,7 +243,7 @@ const dates = [
const accountsList = ref([])
const loading = ref(true)
const total = ref(0)
const radioVal = ref('表格')
const radioVal = ref('分类柱状图')
const dateValidate = (rules, value, callback) => {
const dateType = rules.dateType || 'days'
const num = rules.num || 31
@@ -201,6 +278,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 = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2) + '-01'
@@ -264,6 +345,10 @@ const chartData = ref({
name: [],
value1: []
})
const lineData = ref({
name: [],
value1: []
})
/** 查询管理列表 */
function getAcccountsList() {
@@ -275,6 +360,7 @@ function getAcccountsList() {
function getList() {
loading.value = true
chartData.value = { name: [], value1: [] }
lineData.value = { name: [], value1: [] }
const { type, time, id, dataType, dealType, dealCategory } = queryParams.value
let formatValue = 'YYYY-MM-DD'
if (type === 1) {
@@ -306,6 +392,10 @@ function getList() {
chartData.value.name.push(item.time)
chartData.value.value1.push(item.value)
})
response.data.acccountsDateList.map((item) => {
lineData.value.name.push(item.time)
lineData.value.value1.push(item.value)
})
handleRadioChange(currentType.value)
})
}
@@ -350,9 +440,10 @@ const drawBar = (data) => {
}
},
grid: {
left: '5%',
right: '5%',
bottom: '5%',
left: '3%',
right: '3%',
bottom: '30%',
top: '10%',
containLabel: true
},
xAxis: [
@@ -360,12 +451,19 @@ const drawBar = (data) => {
type: 'category',
data: data.name,
axisTick: {
alignWithLabel: true // 刻度线是否与标签对齐，默认false
alignWithLabel: true
},
axisLabel: {
interval: 0,
rotate: 40,
fontSize: 10,
margin: 15,
overflow: 'truncate',
width: 60
},
// 设置 X 轴线条粗细
axisLine: {
lineStyle: {
width: 1, // 根据需求调整数值大小，单位是像素
width: 1,
color: '#999'
}
}
@@ -390,7 +488,7 @@ const drawBar = (data) => {
{
data: data.value1,
type: 'bar',
barWidth: 20, // 根据需求调整数值大小，单位是像素
barMaxWidth: 50,
itemStyle: {
color: '#2283cf'
}
@@ -407,6 +505,9 @@ const drawBar = (data) => {
}
myChart.setOption(option)
setTimeout(() => {
myChart.resize()
}, 100)
}
const drawLine = (data) => {
@@ -429,7 +530,7 @@ const drawLine = (data) => {
type: 'shadow'
},
formatter: function (params) {
return params[0].name + '<br>' + '交易金额：' + params[0].value + '元'
return params[0].name + '<br>' + '支出金额：' + params[0].value + '元'
}
},
xAxis: {
@@ -496,22 +597,135 @@ const drawLine = (data) => {
}
myChart.setOption(option)
setTimeout(() => {
myChart.resize()
}, 100)
}
const currentType = ref('柱状图')
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(lineData.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.2rem;
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>