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.
616 lines
16 KiB
616 lines
16 KiB
<template>
|
|
<view class="all_market">
|
|
<view class="head">
|
|
<view class="head_date">
|
|
<image
|
|
src="../../../static/home_left.png"
|
|
class="date_icon"
|
|
mode="scaleToFill"
|
|
@tap="beforeDay(date)"
|
|
/>
|
|
<input
|
|
type="text"
|
|
v-model="date"
|
|
disabled
|
|
class="ipt_date"
|
|
@tap="selectDate"
|
|
/>
|
|
<image
|
|
src="../../../static/home_right.png"
|
|
class="date_icon"
|
|
mode="scaleToFill"
|
|
@tap="afterDay(date)"
|
|
/>
|
|
</view>
|
|
</view>
|
|
<view class="main_chart">
|
|
<l-echart ref="columnar"></l-echart>
|
|
</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" @tap="showGains = true">
|
|
<view>{{ RiseOrDecline }}</view>
|
|
<image
|
|
src="../../../static/jiangxu_false.png"
|
|
class="private_screening_icon"
|
|
mode="scaleToFill"
|
|
/>
|
|
</view>
|
|
</view>
|
|
<view class="private_table_head_right" @tap="privateBelong">
|
|
<view>{{ currentBelong }}</view>
|
|
<!-- <image
|
|
src="../../../static/jiangxu_false.png"
|
|
class="private_screening_icon"
|
|
mode="scaleToFill"
|
|
/> -->
|
|
</view>
|
|
</view>
|
|
<view v-if="list.length > 0">
|
|
<view
|
|
class="private_table_list"
|
|
v-for="(item, index) in list"
|
|
:key="index"
|
|
@tap="toPrivateDetail(item.securityName, item.securityCode)"
|
|
>
|
|
<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"
|
|
:class="{ table_list_price1: item.riseLossesCurrentDay < 0 }"
|
|
>
|
|
{{ item.closingPrice }}
|
|
</view>
|
|
<view
|
|
class="table_list_gains"
|
|
:class="{ table_list_price1: item.riseLossesCurrentDay < 0 }"
|
|
>
|
|
{{ item.riseLossesCurrentDay.toFixed(2) }}
|
|
</view>
|
|
</view>
|
|
<view>{{ item.dongCaiIndustryIndexLevel2 }}</view>
|
|
</view>
|
|
</view>
|
|
<view v-else>
|
|
<u-empty
|
|
mode="data"
|
|
icon="http://cdn.uviewui.com/uview/empty/data.png"
|
|
marginTop="50"
|
|
>
|
|
</u-empty>
|
|
</view>
|
|
<!-- 选择时间 -->
|
|
<u-datetime-picker
|
|
:show="dateShow"
|
|
v-model="date"
|
|
mode="date"
|
|
cancelColor="#EC7C00"
|
|
confirmColor="#EC7C00"
|
|
@cancel="cancelDate"
|
|
@confirm="confirmDate"
|
|
></u-datetime-picker>
|
|
<!-- 个股所属板块 -->
|
|
<u-picker
|
|
:show="showPrivateBelong"
|
|
:columns="columnsBelong"
|
|
cancelColor="#EC7C00"
|
|
confirmColor="#EC7C00"
|
|
@cancel="cancelPrivateBelong"
|
|
@confirm="confirmPrivateBelong"
|
|
></u-picker>
|
|
<!-- 数据上涨还是下降筛选 -->
|
|
<u-picker
|
|
:show="showGains"
|
|
:columns="columnsGains"
|
|
cancelColor="#EC7C00"
|
|
confirmColor="#EC7C00"
|
|
@cancel="showGains = false"
|
|
@confirm="confirmGains"
|
|
></u-picker>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
|
|
export default {
|
|
data() {
|
|
return {
|
|
// 筛选上涨or下降
|
|
RiseOrDecline: '涨停',
|
|
showGains: false,
|
|
columnsGains: [['涨停', '跌停']],
|
|
date: '2023-04-10',
|
|
// 时间选择
|
|
dateShow: false,
|
|
list: [
|
|
{
|
|
name: '长城汽车',
|
|
code: '601633',
|
|
price: '33.21',
|
|
gains: '10.06%',
|
|
suoshu: '电子设备制造',
|
|
color: '#D9001B',
|
|
},
|
|
{
|
|
name: '长城汽车',
|
|
code: '601633',
|
|
price: '33.21',
|
|
gains: '10.05%',
|
|
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',
|
|
},
|
|
],
|
|
// 个股所属板块
|
|
showPrivateBelong: false,
|
|
currentBelong: '所属板块',
|
|
columnsBelong: [['所属板块', '成交量']],
|
|
pagename: 1,
|
|
last_page: null,
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
this.date = this.getTime(Date.parse(new Date()))
|
|
this.rending()
|
|
},
|
|
onReachBottom() {
|
|
if (this.pagenum < this.last_page) {
|
|
this.getnewGoods()
|
|
}
|
|
},
|
|
mounted() {
|
|
this.$nextTick(() => {
|
|
// 执行echarts方法
|
|
// this.initEcharts()
|
|
this.columnarInitCharts()
|
|
})
|
|
},
|
|
methods: {
|
|
rending() {
|
|
// /stock/riseLossesDetail
|
|
this.$api
|
|
.post('/stock/originalIssueStockDetail', {
|
|
businessDate: this.date,
|
|
pageModel: {
|
|
pageNo: this.pagename,
|
|
pageSize: 20,
|
|
sortField: '',
|
|
sortWay: '',
|
|
},
|
|
riseOrLosses: 1,
|
|
securityCode: '',
|
|
securityType: '',
|
|
})
|
|
.then(r => {
|
|
if (r) {
|
|
// this.data = r
|
|
this.list = r.list
|
|
// this.last_page = r.totalPage
|
|
// this.privateList = r.list
|
|
this.last_page = r.totalPage
|
|
}
|
|
})
|
|
.catch(fall => {
|
|
console.log(fall)
|
|
})
|
|
},
|
|
rending1() {
|
|
// /stock/riseLossesDetail
|
|
this.$api
|
|
.post('/stock/originalIssueStockDetail', {
|
|
businessDate: this.date,
|
|
pageModel: {
|
|
pageNo: this.pagename,
|
|
pageSize: 20,
|
|
sortField: '',
|
|
sortWay: '',
|
|
},
|
|
riseOrLosses: 1,
|
|
securityCode: '',
|
|
securityType: '',
|
|
})
|
|
.then(r => {
|
|
if (r) {
|
|
// this.data = r
|
|
this.list = [...this.list, ...r.list]
|
|
// this.privateList = r.list
|
|
this.last_page = r.totalPage
|
|
}
|
|
})
|
|
.catch(fall => {
|
|
console.log(fall)
|
|
})
|
|
},
|
|
// 前一日
|
|
beforeDay(date) {
|
|
this.pagenum = 1
|
|
this.date = this.getTime(new Date(date).getTime() - 24 * 60 * 60 * 1000)
|
|
this.columnarInitCharts()
|
|
this.rending()
|
|
},
|
|
// 后一日
|
|
afterDay(date) {
|
|
this.pagenum = 1
|
|
this.date = this.getTime(new Date(date).getTime() + 24 * 60 * 60 * 1000)
|
|
this.columnarInitCharts()
|
|
this.rending()
|
|
},
|
|
// 打开时间选择器
|
|
selectDate() {
|
|
this.dateShow = true
|
|
},
|
|
// 关闭时间选择器
|
|
cancelDate() {
|
|
this.dateShow = false
|
|
},
|
|
// 确认当前选中时间
|
|
confirmDate(e) {
|
|
this.pagenum = 1
|
|
this.$nextTick(() => {
|
|
this.date = this.getTime(e.value)
|
|
this.columnarInitCharts()
|
|
this.rending()
|
|
})
|
|
this.dateShow = false
|
|
},
|
|
// 打开个股所属模块弹出层
|
|
privateBelong() {
|
|
this.showPrivateBelong = true
|
|
},
|
|
// 取消个股所属模块弹出层
|
|
cancelPrivateBelong() {
|
|
this.showPrivateBelong = false
|
|
},
|
|
// 确认个股所属模块
|
|
confirmPrivateBelong(e) {
|
|
this.currentBelong = e.value[0]
|
|
this.showPrivateBelong = false
|
|
},
|
|
// 确认当前选中涨幅
|
|
confirmGains(e) {
|
|
this.RiseOrDecline = e.value[0]
|
|
this.$api
|
|
.post('/stock/originalIssueStockDetail', {
|
|
businessDate: this.date,
|
|
pageModel: {
|
|
pageNo: 1,
|
|
pageSize: 20,
|
|
sortField: '',
|
|
sortWay: '',
|
|
},
|
|
riseOrLosses: this.RiseOrDecline == '涨停' ? 1 : 0,
|
|
securityCode: '',
|
|
securityType: '',
|
|
})
|
|
.then(r => {
|
|
if (r) {
|
|
// this.data = r
|
|
this.list = r.list
|
|
// this.privateList = r.list
|
|
this.last_page = r.totalPage
|
|
}
|
|
})
|
|
.catch(fall => {
|
|
console.log(fall)
|
|
})
|
|
this.showGains = false
|
|
},
|
|
// 格式化时间戳
|
|
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}`
|
|
},
|
|
// 柱状图初始化
|
|
columnarInitCharts() {
|
|
this.$api
|
|
.post('/stock/riseLossesStatistics', {
|
|
businessDate: this.date,
|
|
securityCode: '',
|
|
securityType: '',
|
|
})
|
|
.then(r => {
|
|
if (r) {
|
|
// this.data = r
|
|
this.$refs.columnar.init(echarts, chart => {
|
|
let option = {
|
|
xAxis: {},
|
|
yAxis: {
|
|
// type: 'value',
|
|
type: 'category',
|
|
data: [
|
|
'≥10%',
|
|
'≥7%',
|
|
'7-5%',
|
|
'5-3%',
|
|
'3-0%',
|
|
'平',
|
|
'-3至-5%',
|
|
'-5至-7%',
|
|
'≤-7%',
|
|
'≤-10%',
|
|
],
|
|
},
|
|
series: [
|
|
{
|
|
data: r.data,
|
|
type: 'bar',
|
|
itemStyle: {
|
|
normal: {
|
|
//这里是重点
|
|
color: function (params) {
|
|
//注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
|
|
var colorList = [
|
|
'#D9001B',
|
|
'#D9001B',
|
|
'#D9001B',
|
|
'#D9001B',
|
|
'#D9001B',
|
|
'#999999',
|
|
'#6FBB60',
|
|
'#6FBB60',
|
|
'#6FBB60',
|
|
'#6FBB60',
|
|
]
|
|
return colorList[params.dataIndex]
|
|
},
|
|
label: {
|
|
show: true, //开启显示
|
|
position: 'right', //在上方显示
|
|
textStyle: {
|
|
//数值样式
|
|
// color: "black",
|
|
fontSize: 14,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
],
|
|
grid: {
|
|
top: '5%',
|
|
},
|
|
}
|
|
chart.setOption(option)
|
|
})
|
|
}
|
|
})
|
|
.catch(fall => {
|
|
console.log(fall)
|
|
})
|
|
},
|
|
getnewGoods() {
|
|
this.pagenum = this.pagenum + 1
|
|
// 1.展示loading效果
|
|
uni.showLoading({
|
|
title: '数据加载中...',
|
|
})
|
|
// 2.开启节流阀
|
|
this.isLoading = true
|
|
// 3.发起网络请求
|
|
this.rending1()
|
|
// 无论成功与否都会调用该方法
|
|
// 4.隐藏loading效果
|
|
uni.hideLoading()
|
|
// 5.关闭节流阀
|
|
this.isLoading = false
|
|
},
|
|
// 前往个股详情
|
|
toPrivateDetail(name, id) {
|
|
uni.navigateTo({
|
|
url: `/pages/home/private/privateDetail?name=${name}&id=${id}`,
|
|
})
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.head {
|
|
display: flex;
|
|
padding: 32rpx 24rpx;
|
|
}
|
|
.head_date {
|
|
padding: 16rpx 32rpx;
|
|
border-radius: 8rpx;
|
|
border: 2rpx solid #ec7c00;
|
|
display: flex;
|
|
align-items: center;
|
|
.ipt_date {
|
|
color: #ec7c00;
|
|
width: 180rpx;
|
|
font-size: 24rpx;
|
|
text-align: center;
|
|
}
|
|
.date_icon {
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
}
|
|
}
|
|
.select_days {
|
|
margin-left: 40rpx;
|
|
padding: 16rpx 32rpx;
|
|
border-radius: 8rpx;
|
|
border: 2rpx solid #999999;
|
|
font-size: 24rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.select_days_icon {
|
|
margin-left: 40rpx;
|
|
width: 18rpx;
|
|
height: 10rpx;
|
|
}
|
|
}
|
|
.main_chart {
|
|
// height: 550rpx;
|
|
// background-color: pink;
|
|
}
|
|
.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: 200rpx;
|
|
}
|
|
.private_head_price {
|
|
width: 150rpx;
|
|
text-align: center;
|
|
}
|
|
.private_head_gains {
|
|
width: 150rpx;
|
|
text-align: center;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: 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: 200rpx;
|
|
}
|
|
.table_list_code {
|
|
margin-top: 10rpx;
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
}
|
|
.table_list_price {
|
|
width: 150rpx;
|
|
text-align: center;
|
|
color: #d9001b;
|
|
}
|
|
|
|
.table_list_gains {
|
|
width: 150rpx;
|
|
text-align: center;
|
|
color: #d9001b;
|
|
}
|
|
.table_list_price1 {
|
|
color: #6fbb60;
|
|
}
|
|
}
|
|
}
|
|
.private_screening_icon {
|
|
width: 18rpx;
|
|
height: 10rpx;
|
|
margin-left: 24rpx;
|
|
}
|
|
</style>
|