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.
526 lines
13 KiB
526 lines
13 KiB
3 years ago
|
<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">{{ name }}</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 style="height: 600rpx; width: 100%; padding-top: 60rpx">
|
||
|
|
<l-echart ref="chart"></l-echart>
|
||
|
|
</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,
|
||
|
|
// 收益率or盈亏金额
|
||
|
|
isEarnings: true,
|
||
|
|
// 自定义开始日期
|
||
|
|
startDate: '',
|
||
|
|
// 选择开始时间
|
||
|
|
startDateShow: false,
|
||
|
|
// 自定义截至日期
|
||
|
|
endDate: '',
|
||
|
|
// 选择截至时间
|
||
|
|
endDateShow: false,
|
||
|
|
minDate: null,
|
||
|
|
name: '',
|
||
|
|
load: true,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onLoad(options) {
|
||
|
|
this.name = options.name
|
||
|
|
this.code = options.id
|
||
|
|
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.initEchartsZ()
|
||
|
|
} else {
|
||
|
|
item.is = false
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// 选择收益率or盈亏金额
|
||
|
|
selectMainNav(is) {
|
||
|
|
this.isEarnings = is
|
||
|
|
},
|
||
|
|
// 确定开始时间
|
||
|
|
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',
|
||
|
|
})
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 格式化时间戳
|
||
|
|
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: this.code,
|
||
|
|
})
|
||
|
|
.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)
|
||
|
|
})
|
||
|
|
},
|
||
|
|
initEchartsZ() {
|
||
|
|
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)
|
||
|
|
})
|
||
|
|
|
||
|
|
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: 24rpx;
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|