You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
726 lines
18 KiB
726 lines
18 KiB
<template>
|
|
<u-loading-page v-if="load" :loading="load"></u-loading-page>
|
|
<view class="trade_stats" v-else>
|
|
<view class="head" :class="{ head1: totalEarnings < 0 }">
|
|
<view class="head_top">
|
|
<view class="all_breakeven">总盈亏</view>
|
|
<view class="all_money">{{ totalProfit }}</view>
|
|
<view>收益率 {{ totalEarnings.toFixed(2) }}%</view>
|
|
</view>
|
|
<view class="head_bottom">
|
|
<view
|
|
v-for="(item, index) in nav"
|
|
:key="index"
|
|
class="head_bottom_list"
|
|
@tap="selectNav(item.name)"
|
|
>
|
|
<view :class="{ bottom_list: item.is }">{{ item.name }}</view>
|
|
<image
|
|
v-if="item.is"
|
|
src="../../static/collection_select.png"
|
|
class="select_icon"
|
|
mode="scaleToFill"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="main">
|
|
<view class="main_date" v-if="nav[3].is == true">
|
|
<input
|
|
type="text"
|
|
class="main_date_ipt"
|
|
disabled
|
|
placeholder="请选择开始日期"
|
|
v-model="startDate"
|
|
@tap="selectStartDate"
|
|
/>
|
|
<u-icon name="minus" size="20" style="padding: 0 20rpx"></u-icon>
|
|
<input
|
|
type="text"
|
|
disabled
|
|
class="main_date_ipt"
|
|
placeholder="请选择截至日期"
|
|
v-model="endDate"
|
|
@tap="selectEndDate"
|
|
/>
|
|
<view class="main_date_serch">搜索</view>
|
|
</view>
|
|
<view class="main_nav">
|
|
<view
|
|
:class="{ main_nav_color: isEarnings }"
|
|
@tap="selectMainNav(true)"
|
|
>
|
|
收益率
|
|
</view>
|
|
<view
|
|
style="margin-left: 72rpx"
|
|
:class="{ main_nav_color: !isEarnings }"
|
|
@tap="selectMainNav(false)"
|
|
>
|
|
盈亏金额
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view style="height: 600rpx; width: 100%">
|
|
<l-echart ref="chart"></l-echart>
|
|
</view>
|
|
<view class="footer">
|
|
<view class="footer_nav" @tap="toAllBreakeven">
|
|
<view>个股盈亏统计</view>
|
|
<view class="footer_nav_right">
|
|
<view>查看所有</view>
|
|
<image
|
|
src="../../static/right_all.png"
|
|
class="right_icon"
|
|
mode="scaleToFill"
|
|
/>
|
|
</view>
|
|
</view>
|
|
<view class="private_table_head">
|
|
<view class="private_table_head_left">
|
|
<view class="private_head_name">股票代码</view>
|
|
<view class="private_head_price">买入时间</view>
|
|
<view class="private_head_gains">卖出时间</view>
|
|
</view>
|
|
<view class="private_table_head_right" @tap="privateBelong">
|
|
<view>盈亏金额</view>
|
|
</view>
|
|
</view>
|
|
<view
|
|
class="private_table_list"
|
|
v-for="(item, index) in list"
|
|
:key="index"
|
|
@tap="toBreakevenDetail(item.securityCode, item.securityName)"
|
|
>
|
|
<view class="private_table_list_left">
|
|
<view class="table_list_name">
|
|
<view>{{ item.securityName }}</view>
|
|
<view class="table_list_code">{{ item.securityCode }}</view>
|
|
</view>
|
|
<view class="table_list_price">
|
|
{{ item.buyDate }}
|
|
</view>
|
|
<view class="table_list_gains">
|
|
{{ item.sellDate }}
|
|
</view>
|
|
</view>
|
|
<view
|
|
class="table_list_totalMoney"
|
|
:class="{ table_list_gains1: item.totalMoney < 0 }"
|
|
>{{ item.totalMoney }}</view
|
|
>
|
|
</view>
|
|
<view class="see_more" v-if="list.length > 5" @tap="toAllBreakeven">
|
|
<view>查看更多</view>
|
|
<image
|
|
src="../../static/chakangengduo.png"
|
|
class="more_icon"
|
|
mode="scaleToFill"
|
|
/>
|
|
</view>
|
|
</view>
|
|
<!-- 筛选/开始时间选择 -->
|
|
<u-datetime-picker
|
|
:show="startDateShow"
|
|
v-model="date"
|
|
mode="date"
|
|
cancelColor="#EC7C00"
|
|
confirmColor="#EC7C00"
|
|
@cancel="startDateShow = false"
|
|
@confirm="confirmStartDate"
|
|
></u-datetime-picker>
|
|
<!-- 筛选/结束时间选择 -->
|
|
<u-datetime-picker
|
|
:show="endDateShow"
|
|
v-model="date"
|
|
mode="date"
|
|
:minDate="minDate"
|
|
cancelColor="#EC7C00"
|
|
confirmColor="#EC7C00"
|
|
@cancel="endDateShow = false"
|
|
@confirm="confirmEndDate"
|
|
></u-datetime-picker>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
|
|
export default {
|
|
data() {
|
|
return {
|
|
// 总盈亏
|
|
totalProfit: '',
|
|
// 总收益率
|
|
totalEarnings: '',
|
|
bgcColor: {
|
|
background: '',
|
|
},
|
|
nav: [
|
|
{
|
|
name: '本月',
|
|
is: true,
|
|
current: 0,
|
|
},
|
|
{
|
|
name: '近三月',
|
|
is: false,
|
|
current: 1,
|
|
},
|
|
{
|
|
name: '近一年',
|
|
is: false,
|
|
current: 2,
|
|
},
|
|
{
|
|
name: '自定义',
|
|
is: false,
|
|
current: 0,
|
|
},
|
|
],
|
|
navIndex: 0,
|
|
list: [
|
|
{
|
|
name: '长城汽车',
|
|
code: '601633',
|
|
price: '2023-04-10',
|
|
gains: '2023-04-10',
|
|
suoshu: '5422.12万',
|
|
color: '#D9001B',
|
|
},
|
|
{
|
|
name: '长城汽车',
|
|
code: '601633',
|
|
price: '33.21',
|
|
gains: '10%',
|
|
suoshu: '电子设备制造',
|
|
color: '#D9001B',
|
|
},
|
|
{
|
|
name: '长城汽车',
|
|
code: '601633',
|
|
price: '33.21',
|
|
gains: '10%',
|
|
suoshu: '电子设备制造',
|
|
color: '#D9001B',
|
|
},
|
|
{
|
|
name: '长城汽车',
|
|
code: '601633',
|
|
price: '33.21',
|
|
gains: '10%',
|
|
suoshu: '电子设备制造',
|
|
color: '#D9001B',
|
|
},
|
|
{
|
|
name: '长城汽车',
|
|
code: '601633',
|
|
price: '33.21',
|
|
gains: '10%',
|
|
suoshu: '电子设备制造',
|
|
color: '#D9001B',
|
|
},
|
|
{
|
|
name: '长城汽车',
|
|
code: '601633',
|
|
price: '33.21',
|
|
gains: '10%',
|
|
suoshu: '电子设备制造',
|
|
color: '#D9001B',
|
|
},
|
|
{
|
|
name: '长城汽车',
|
|
code: '601633',
|
|
price: '33.21',
|
|
gains: '10%',
|
|
suoshu: '电子设备制造',
|
|
color: '#D9001B',
|
|
},
|
|
{
|
|
name: '长城汽车',
|
|
code: '601633',
|
|
price: '33.21',
|
|
gains: '10%',
|
|
suoshu: '电子设备制造',
|
|
color: '#D9001B',
|
|
},
|
|
{
|
|
name: '长城汽车',
|
|
code: '601633',
|
|
price: '33.21',
|
|
gains: '10%',
|
|
suoshu: '电子设备制造',
|
|
color: '#D9001B',
|
|
},
|
|
{
|
|
name: '长城汽车',
|
|
code: '601633',
|
|
price: '33.21',
|
|
gains: '10%',
|
|
suoshu: '电子设备制造',
|
|
color: '#D9001B',
|
|
},
|
|
{
|
|
name: '长城汽车',
|
|
code: '601633',
|
|
price: '33.21',
|
|
gains: '10%',
|
|
suoshu: '电子设备制造',
|
|
color: '#D9001B',
|
|
},
|
|
],
|
|
// 收益率or盈亏金额
|
|
isEarnings: true,
|
|
// 自定义开始日期
|
|
startDate: '',
|
|
// 选择开始时间
|
|
startDateShow: false,
|
|
// 自定义截至日期
|
|
endDate: '',
|
|
// 选择截至时间
|
|
endDateShow: false,
|
|
minDate: null,
|
|
load: true,
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
this.rending()
|
|
},
|
|
mounted() {
|
|
this.$nextTick(() => {
|
|
// 执行echarts方法
|
|
this.initEchartsZ()
|
|
})
|
|
},
|
|
methods: {
|
|
// 选择导航
|
|
selectNav(name) {
|
|
this.nav.forEach(item => {
|
|
if (item.name == name) {
|
|
item.is = true
|
|
this.navIndex = item.current
|
|
this.$nextTick(() => {
|
|
// 执行echarts方法
|
|
this.initEchartsZ()
|
|
console.log('执行方法')
|
|
})
|
|
} else {
|
|
item.is = false
|
|
}
|
|
})
|
|
},
|
|
// 选择收益率or盈亏金额
|
|
selectMainNav(is) {
|
|
this.isEarnings = is
|
|
this.$nextTick(() => {
|
|
// 执行echarts方法
|
|
this.initEchartsZ()
|
|
})
|
|
},
|
|
// 确定开始时间
|
|
confirmStartDate(e) {
|
|
this.$nextTick(() => {
|
|
this.minDate = new Date(e.value).getTime()
|
|
console.log(this.minDate)
|
|
this.startDate = this.getTime(e.value)
|
|
})
|
|
|
|
this.startDateShow = false
|
|
},
|
|
// 确定截至时间
|
|
confirmEndDate(e) {
|
|
this.$nextTick(() => {
|
|
this.endDate = this.getTime(e.value)
|
|
})
|
|
this.endDateShow = false
|
|
},
|
|
// 选择开始时间
|
|
selectStartDate() {
|
|
if (!this.endDateShow) {
|
|
this.startDateShow = true
|
|
}
|
|
},
|
|
// 选择截至时间
|
|
selectEndDate() {
|
|
if (this.startDate) {
|
|
if (!this.startDateShow) {
|
|
this.endDateShow = true
|
|
}
|
|
} else {
|
|
uni.showToast({
|
|
title: '请先选择开始时间',
|
|
icon: 'none',
|
|
})
|
|
}
|
|
},
|
|
// 跳转到所有个股盈亏
|
|
toAllBreakeven() {
|
|
uni.navigateTo({
|
|
url: '/pages/user/allBreakeven',
|
|
})
|
|
},
|
|
// 前往个股详情
|
|
toBreakevenDetail(id, name) {
|
|
uni.navigateTo({
|
|
url: `/pages/user/breakevenDetail?id=${id}&name=${name}`,
|
|
})
|
|
},
|
|
// 格式化时间戳
|
|
getTime(date) {
|
|
let time = new Date(date)
|
|
let y = time.getFullYear()
|
|
let m = time.getMonth() + 1
|
|
let d = time.getDate()
|
|
let h = time.getHours()
|
|
let mm = time.getMinutes()
|
|
let s = time.getSeconds()
|
|
if (s < 10) {
|
|
s = '0' + s
|
|
}
|
|
if (h < 10) {
|
|
h = '0' + h
|
|
}
|
|
if (mm < 10) {
|
|
mm = '0' + mm
|
|
}
|
|
if (m < 10) {
|
|
m = '0' + m
|
|
}
|
|
if (d < 10) {
|
|
d = '0' + d
|
|
}
|
|
return `${y}-${m}-${d}`
|
|
},
|
|
rending() {
|
|
this.$api
|
|
.post('/transaction/totalEarnings', {
|
|
securityCode: '',
|
|
})
|
|
.then(r => {
|
|
if (r) {
|
|
// this.data = r
|
|
this.totalProfit = r.totalEarnings
|
|
this.totalEarnings = r.earningsRate
|
|
if (r.earningsRate > 0) {
|
|
setTimeout(() => {
|
|
uni.setNavigationBarColor({
|
|
frontColor: '#ffffff',
|
|
backgroundColor: '#F93938',
|
|
})
|
|
}, 100)
|
|
} else {
|
|
setTimeout(() => {
|
|
uni.setNavigationBarColor({
|
|
frontColor: '#ffffff',
|
|
backgroundColor: '#568EFF',
|
|
})
|
|
}, 100)
|
|
}
|
|
this.load = false
|
|
console.log(r)
|
|
}
|
|
})
|
|
.catch(fall => {
|
|
console.log(fall)
|
|
})
|
|
this.$api
|
|
.post('/transaction/profitOrLoss', {
|
|
endDate: '',
|
|
keyWord: '',
|
|
pageModel: {
|
|
pageNo: 0,
|
|
pageSize: 10,
|
|
sortField: '',
|
|
sortWay: '',
|
|
},
|
|
securityType: '',
|
|
sortAmount: 1,
|
|
startDate: '',
|
|
type: '',
|
|
})
|
|
.then(r => {
|
|
if (r) {
|
|
// this.data = r
|
|
this.list = r.list
|
|
}
|
|
})
|
|
.catch(fall => {
|
|
console.log(fall)
|
|
})
|
|
},
|
|
initEchartsZ() {
|
|
console.log('执行函数')
|
|
this.$api
|
|
.post('/transaction/earningsLine', {
|
|
endDate: this.endDate,
|
|
securityCode: '',
|
|
startDate: this.startDate,
|
|
timeType: this.navIndex,
|
|
type: this.isEarnings ? '1' : '2',
|
|
})
|
|
.then(r => {
|
|
if (r) {
|
|
console.log(r)
|
|
// this.data = r
|
|
this.$refs.chart.init(
|
|
echarts,
|
|
chart => {
|
|
let option = {
|
|
// tooltip: {
|
|
// trigger: 'axis',
|
|
// position: function (pt) {
|
|
// return [pt[0], '10%']
|
|
// },
|
|
// },
|
|
// title: {
|
|
// left: 'center',
|
|
// text: 'Large Ara Chart',
|
|
// },
|
|
toolbox: {
|
|
feature: {
|
|
dataZoom: {
|
|
yAxisIndex: 'none',
|
|
},
|
|
restore: {},
|
|
saveAsImage: {},
|
|
},
|
|
},
|
|
xAxis: {
|
|
type: 'time',
|
|
boundaryGap: false,
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
boundaryGap: [0, '100%'],
|
|
},
|
|
dataZoom: [
|
|
{
|
|
type: 'inside',
|
|
start: 0,
|
|
end: 100,
|
|
},
|
|
{
|
|
show: false,
|
|
start: 0,
|
|
end: 100,
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
name: '数据',
|
|
type: 'line',
|
|
smooth: true,
|
|
symbol: 'none',
|
|
// 背景色
|
|
// areaStyle: {},
|
|
data: r,
|
|
},
|
|
],
|
|
}
|
|
chart.setOption(option)
|
|
},
|
|
{ locale: 'ZH' }
|
|
)
|
|
|
|
console.log(r)
|
|
}
|
|
})
|
|
.catch(fall => {
|
|
console.log(fall)
|
|
})
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.head {
|
|
height: 300rpx;
|
|
color: white;
|
|
background: linear-gradient(180deg, #f93938 0%, #fa4c0d 100%);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
.head_top {
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
.all_breakeven {
|
|
color: rgba(255, 255, 255, 0.7);
|
|
}
|
|
.all_money {
|
|
margin: 20rpx 0;
|
|
font-size: 60rpx;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
.head_bottom {
|
|
padding: 0 24rpx;
|
|
font-size: 28rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
color: rgba(255, 255, 255, 0.7);
|
|
.head_bottom_list {
|
|
position: relative;
|
|
display: flex;
|
|
margin-right: 64rpx;
|
|
padding-bottom: 24rpx;
|
|
justify-content: center;
|
|
}
|
|
.bottom_list {
|
|
color: white;
|
|
}
|
|
.select_icon {
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 24rpx;
|
|
height: 14rpx;
|
|
}
|
|
}
|
|
.head1 {
|
|
background: linear-gradient(180deg, #568eff 0%, #4479eb 100%);
|
|
}
|
|
.main {
|
|
margin-top: 32rpx;
|
|
.main_date {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 24rpx;
|
|
padding: 0 24rpx;
|
|
.main_date_ipt {
|
|
width: 170rpx;
|
|
padding: 10rpx 46rpx;
|
|
border: 2rpx solid #999999;
|
|
border-radius: 8rpx;
|
|
height: 36rpx;
|
|
text-align: center;
|
|
}
|
|
.main_date_serch {
|
|
color: #ec7c00;
|
|
margin-left: 32rpx;
|
|
}
|
|
/deep/.u-icon--right {
|
|
padding: 0 16rpx !important;
|
|
}
|
|
}
|
|
.main_nav {
|
|
margin-top: 32rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 32rpx;
|
|
color: #999999;
|
|
}
|
|
.main_nav_color {
|
|
color: #ec7c00;
|
|
}
|
|
}
|
|
.line {
|
|
height: 20rpx;
|
|
background-color: #f6f6f6;
|
|
}
|
|
|
|
.footer {
|
|
.footer_nav {
|
|
padding: 32rpx 24rpx;
|
|
display: flex;
|
|
font-weight: bold;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.footer_nav_right {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
font-weight: 500;
|
|
}
|
|
.right_icon {
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
margin-left: 10rpx;
|
|
}
|
|
}
|
|
.private_table_head {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 24rpx;
|
|
font-weight: bold;
|
|
background-color: #fff9f3;
|
|
padding: 20rpx 24rpx;
|
|
justify-content: space-between;
|
|
.private_table_head_right {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.private_table_head_left {
|
|
display: flex;
|
|
align-items: center;
|
|
.private_head_name {
|
|
width: 150rpx;
|
|
}
|
|
.private_head_price {
|
|
width: 180rpx;
|
|
text-align: center;
|
|
}
|
|
.private_head_gains {
|
|
width: 180rpx;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
.private_table_list {
|
|
padding: 24rpx 24rpx;
|
|
border-bottom: 2rpx solid #f6f6f6;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
font-size: 28rpx;
|
|
.private_table_list_left {
|
|
display: flex;
|
|
align-items: center;
|
|
.table_list_name {
|
|
width: 150rpx;
|
|
}
|
|
.table_list_code {
|
|
margin-top: 10rpx;
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
}
|
|
.table_list_price {
|
|
width: 180rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.table_list_gains {
|
|
width: 180rpx;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
.private_screening_icon {
|
|
width: 18rpx;
|
|
height: 10rpx;
|
|
margin-left: 24rpx;
|
|
}
|
|
.see_more {
|
|
padding: 32rpx 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 24rpx;
|
|
color: #ec7c00;
|
|
}
|
|
.more_icon {
|
|
width: 22rpx;
|
|
height: 22rpx;
|
|
margin-left: 10rpx;
|
|
}
|
|
}
|
|
.table_list_totalMoney {
|
|
color: #d9001b;
|
|
}
|
|
.table_list_gains1 {
|
|
color: #6fbb60;
|
|
}
|
|
</style>
|