qdintc/intc-vue-h5
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-20 14:50:16 +08:00
parent 1ad3ce0a25
commit 73a5a75f30
56 changed files with 2228 additions and 1853 deletions
Download Patch File Download Diff File Expand all files Collapse all files

191
src/pages/statistic/bill/futuresAnalysis/index.vue
View File

@@ -1,15 +1,14 @@
<template>
<view class="container">
<u-sticky offsetTop="8rpx" customNavHeight="8rpx">
<u-sticky offsetTop="0rpx"
customNavHeight="0rpx">
<view class="search-view">
<u-input v-model="queryParams.accountName" border="false" type="select" @click="handleAccount" placeholder="请选择期货账户" suffixIcon="search"
suffixIconStyle="color: #909399" class="search-input">
</u-input>
</view>
</u-sticky>
<u-sticky offsetTop="8rpx" customNavHeight="8rpx">
<view class="search-view">
<u-input v-model="queryParams.time" border="false" type="select" readonly suffixIcon="calendar"
suffixIconStyle="color: #909399" class="search-input">
@@ -18,7 +17,80 @@
<uni-icons type="list" size="18" color="#667eea"></uni-icons>
<text>筛选</text>
</view>
<u-transition :show="filterPanel" mode="fade">
</view>
<div class="app-container">
<div class="header-con" ref="searchHeightRef">
<div class="item">
<view class="item-icon" style="background: linear-gradient(135deg, #5b51d8 0%, #6b21a8 100%);">
<uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">累计收益</div>
<div class="num">{{ futuresStock.accumulateIncome }}<span>元</span></div>
</div>
</div>
<div class="item">
<view class="item-icon" style="background: linear-gradient(135deg, #c026d3 0%, #dc2626 100%);">
<uni-icons type="bars" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">平均收益</div>
<div class="num">{{ futuresStock.averageIncome }}<span>元</span></div>
</div>
</div>
</div>
<div class="header-con" ref="searchHeightRef">
<div class="item">
<view class="item-icon" style="background: linear-gradient(135deg, #0284c7 0%, #0891b2 100%);">
<uni-icons type="arrow-up" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">最大收益</div>
<div class="num">{{ futuresStock.maxRevenue}}<span>元</span></div>
</div>
</div>
<div class="item">
<view class="item-icon" style="background: linear-gradient(135deg, #be123c 0%, #9f1239 100%);">
<uni-icons type="arrow-down" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">最大亏损</div>
<div class="num">{{ futuresStock.maxLoss }}<span>元</span></div>
</div>
</div>
</div>
</div>
<view class="section-title" v-show="listData.length>0">
<view class="title-decorator"></view>
<text class="title-text">期货统计分析</text>
<view class="view-switch">
<view
:class="['switch-item', { 'active': viewMode === 'list' }]"
@click="viewMode = 'list'"
>
<uni-icons type="list" size="16" :color="viewMode === 'list' ? '#667eea' : '#999'"></uni-icons>
<text>列表</text>
</view>
<view
:class="['switch-item', { 'active': viewMode === 'line' }]"
@click="viewMode = 'line'"
>
<uni-icons type="loop" size="16" :color="viewMode === 'line' ? '#667eea' : '#999'"></uni-icons>
<text>曲线图</text>
</view>
<view
:class="['switch-item', { 'active': viewMode === 'column' }]"
@click="viewMode = 'column'"
>
<uni-icons type="bars" size="16" :color="viewMode === 'column' ? '#667eea' : '#999'"></uni-icons>
<text>柱状图</text>
</view>
</view>
</view>
</u-sticky>
<u-transition :show="filterPanel" mode="fade">
<view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
<view class="filter-panel-content">
@@ -65,79 +137,6 @@
></u-datetime-picker>
</view>
</u-transition>
</view>
</u-sticky>
<div class="app-container">
<div class="header-con" ref="searchHeightRef">
<div class="item">
<view class="item-icon" style="background: linear-gradient(135deg, #5b51d8 0%, #6b21a8 100%);">
<uni-icons type="wallet" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">累计收益</div>
<div class="num">{{ futuresStock.accumulateIncome }}<span>元</span></div>
</div>
</div>
<div class="item">
<view class="item-icon" style="background: linear-gradient(135deg, #c026d3 0%, #dc2626 100%);">
<uni-icons type="bars" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">平均收益</div>
<div class="num">{{ futuresStock.averageIncome }}<span>元</span></div>
</div>
</div>
</div>
<div class="header-con" ref="searchHeightRef">
<div class="item">
<view class="item-icon" style="background: linear-gradient(135deg, #0284c7 0%, #0891b2 100%);">
<uni-icons type="arrow-up" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">最大收益</div>
<div class="num">{{ futuresStock.maxRevenue}}<span>元</span></div>
</div>
</div>
<div class="item">
<view class="item-icon" style="background: linear-gradient(135deg, #be123c 0%, #9f1239 100%);">
<uni-icons type="arrow-down" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">最大亏损</div>
<div class="num">{{ futuresStock.maxLoss }}<span>元</span></div>
</div>
</div>
</div>
<div></div>
</div>
<view class="section-title" v-show="listData.length>0">
<view class="title-decorator"></view>
<text class="title-text">期货统计分析</text>
<view class="view-switch">
<view
:class="['switch-item', { 'active': viewMode === 'list' }]"
@click="viewMode = 'list'"
>
<uni-icons type="list" size="16" :color="viewMode === 'list' ? '#667eea' : '#999'"></uni-icons>
<text>列表</text>
</view>
<view
:class="['switch-item', { 'active': viewMode === 'line' }]"
@click="viewMode = 'line'"
>
<uni-icons type="loop" size="16" :color="viewMode === 'line' ? '#667eea' : '#999'"></uni-icons>
<text>曲线图</text>
</view>
<view
:class="['switch-item', { 'active': viewMode === 'column' }]"
@click="viewMode = 'column'"
>
<uni-icons type="bars" size="16" :color="viewMode === 'column' ? '#667eea' : '#999'"></uni-icons>
<text>柱状图</text>
</view>
</view>
</view>
<!-- 曲线图展示 -->
<view class="chart-container" v-if="listData.length>0 && viewMode === 'line'">
@@ -162,7 +161,7 @@
</view>
<!-- 列表展示 -->
<u-list :spaceHeight="200" lowerThreshold="100" v-show="viewMode === 'list'">
<u-list :spaceHeight="700" lowerThreshold="100" v-show="viewMode === 'list'">
<u-list-item v-for="(item, index) in listData" :key="index">
<view class="list-item">
<view class="item-header">
@@ -248,6 +247,9 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
// 曲线图配置
const lineChartOpts = computed(() => {
const dataCount = listData.value ? listData.value.length : 0
const showXAxisLabel = dataCount <= 10
// 计算数据范围以动态设置Y轴
let minValue = 0
let maxValue = 0
@@ -263,7 +265,8 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
return {
color: ['#667eea'],
padding: [20, 15, 60, 15],
padding: [15, 15, 30, 5],
enableScroll: false,
enableMarkLine: true,
dataLabel: false,
@@ -277,10 +280,11 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
axisLine: false,
scrollShow: true,
itemCount: 5,
fontSize: 10,
fontColor: '#999999',
fontSize: showXAxisLabel ? 10 : 0,
fontColor: showXAxisLabel ? '#999999' : 'transparent',
rotateLabel: true,
rotateAngle: 30
rotateAngle: 30,
disabled: !showXAxisLabel
},
yAxis: {
gridType: 'dash',
@@ -317,6 +321,9 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
// 柱状图配置
const columnChartOpts = computed(() => {
const dataCount = listData.value ? listData.value.length : 0
const showXAxisLabel = dataCount <= 10
// 计算数据范围以动态设置Y轴
let minValue = 0
let maxValue = 0
@@ -345,7 +352,8 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
return {
color: ['#667eea'],
padding: [15, 15, 80, 15],
padding: [15, 15, 30, 5],
enableScroll: false,
dataLabel: false,
legend: {
@@ -357,10 +365,11 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
axisLine: false,
scrollShow: true,
itemCount: 5,
fontSize: 10,
fontColor: '#999999',
fontSize: showXAxisLabel ? 10 : 0,
fontColor: showXAxisLabel ? '#999999' : 'transparent',
rotateLabel: true,
rotateAngle: 30
rotateAngle: 30,
disabled: !showXAxisLabel
},
yAxis: {
gridType: 'dash',
@@ -543,7 +552,10 @@ const start = dayjs(end).add(-12, 'months')
</script>
<style lang="scss" scoped>
page {
height: 100%;
overflow: auto;
}
.app-container {
background-color: #f5f7fa;
padding: 8rpx 0;
@@ -624,6 +636,7 @@ const start = dayjs(end).add(-12, 'months')
.section-title {
display: flex;
margin-top: -10rpx;
align-items: center;
padding: 24rpx 32rpx 16rpx;
background-color: #f5f7fa;
@@ -685,13 +698,13 @@ const start = dayjs(end).add(-12, 'months')
}
.chart-container {
margin: 16rpx 24rpx 160rpx;
margin: 16rpx 24rpx 60rpx;
padding: 16rpx;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
border-radius: 16rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
width: calc(100% - 48rpx);
height: 850rpx;
height: 800rpx;
overflow: visible;
position: relative;
}