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

194
src/views/invest/stocksAnalysis/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="股票账户" prop="futureStocksId">
<el-select v-model="queryParams.id" placeholder="请选择股票账户" clearable>
<el-select v-model="queryParams.id" placeholder="请选择股票账户" @change="handleChange" clearable>
<el-option v-for="futureStocks in futureStocksList" :key="futureStocks.id" :label="futureStocks.nameCode" :value="futureStocks.id" />
</el-select>
</el-form-item>
@@ -55,55 +55,56 @@
<el-button type="info" icon="Refresh" @click="resetQuery">重置</el-button>
</div>
</div>
<div class="main-con" style="height: calc(100% - 2.05rem)">
<div class="main-con">
<div class="summary-con">
<div class="right-con">
<div class="img">
<img src="@/assets/images/accumulate.png" alt="" />
<div class="center-con">
<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">{{ futuresStock.accumulateIncome }}</span> <span class="unit"></span>
</div>
<div class="num">{{ futuresStock.accumulateIncome }}</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"><List /></el-icon>
</div>
<div class="item-wrap">
<div class="title">交易次数</div>
<div class="num">{{ futuresStock.count }}</div>
</div>
</div>
<div class="center-con">
<div class="icon-box">
<el-icon :size="40" color="#E6A23C"><DataLine /></el-icon>
</div>
<div class="item-wrap">
<div class="title">平均收益</div>
<div>
<span class="num">{{ futuresStock.averageIncome }}</span> <span class="unit"></span>
</div>
<div class="num">{{ futuresStock.averageIncome }}</div>
</div>
</div>
<div class="center-con">
<div class="img">
<img src="@/assets/images/chart-pie.png" alt="" />
<div class="icon-box">
<el-icon :size="40" color="#F56C6C"><PieChart /></el-icon>
</div>
<div class="item-wrap">
<div class="title">最大收益</div>
<div>
<span class="num">{{ futuresStock.maxRevenue }}</span> <span class="unit"></span>
</div>
<div class="num">{{ futuresStock.maxRevenue }}</div>
</div>
</div>
<div class="center-con">
<div class="img">
<img src="@/assets/images/accumulate.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">{{ futuresStock.maxLoss }}</span> <span class="unit"></span>
</div>
<div class="num">{{ futuresStock.maxLoss }}</div>
</div>
</div>
</div>
<div class="title-con">
<div class="title">收益统计</div>
<div class="title">股票收益分析</div>
<div class="operate-btn-con">
<el-radio-group v-model="radioVal" @change="handleRadioChange">
<el-radio-button label="柱状图" />
@@ -113,9 +114,9 @@
</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="futuresStock.tableFuturesStocksList" height="calc(100% - 170px)">
<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="futuresStock.tableFuturesStocksList">
<el-table-column label="序号" width="50" type="index" align="center">
<template #default="scope">
<span>{{ scope.$index + 1 }}</span>
@@ -138,6 +139,7 @@
import dayjs from 'dayjs'
import * as echarts from 'echarts'
import { ElMessage } from 'element-plus'
import { TrendCharts, List, DataLine, PieChart, Odometer } from '@element-plus/icons-vue'
import yearPicker from '@/components/YearPicker/index.vue'
import { getFuturesStocksAnalysis } from '@/api/invest/statisticAnalysis'
import { listFutureStocks } from '@/api/invest/futureStocks'
@@ -198,6 +200,10 @@ const data = reactive({
})
const { queryParams, queryFutureStocksListParams, 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)
const start = dayjs(end).add(-59, 'months')
@@ -287,6 +293,7 @@ function getList() {
getFuturesStocksAnalysis(params).then((response) => {
loading.value = false
futuresStock.value = { ...response.data }
futuresStock.value.count = response.data.futuresStocksList.length
futuresStock.value.futuresStocksList.map((item) => {
return {
name: item.time,
@@ -380,17 +387,25 @@ 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 // 根据需求调整数值大小，单位是像素
}
}
@@ -454,7 +469,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',
@@ -503,3 +526,106 @@ const handleRadioChange = (type) => {
getFutureStocksList()
getList()
</script>
<style lang="scss" scoped>
.main-con {
height: calc(100vh - 240px);
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;
.center-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 {
flex-shrink: 0;
margin-top: 0 !important;
padding-top: 0.08rem !important;
}
.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;
min-height: 0;
}
}
@media (max-width: 1600px) {
.summary-con .center-con {
flex: 1 1 calc(25% - 0.105rem);
max-width: calc(25% - 0.105rem);
}
}
@media (max-width: 1200px) {
.summary-con .center-con {
flex: 1 1 calc(33.333% - 0.093rem);
max-width: calc(33.333% - 0.093rem);
}
}
@media (max-width: 768px) {
.summary-con .center-con {
flex: 1 1 calc(50% - 0.07rem);
max-width: calc(50% - 0.07rem);
}
}
</style>