Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
bluefrankey
hqchart
提交
3473f9bb
hqchart
项目概览
bluefrankey
/
hqchart
与 Fork 源项目一致
从无法访问的项目Fork
通知
5
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
hqchart
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
3473f9bb
编写于
9月 20, 2019
作者:
HQChart
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
增加缺少的文件
上级
a0bc5148
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
554 addition
and
0 deletion
+554
-0
vuehqchart/src/jscommon/umychart.vue.components/historydayline.vue
...t/src/jscommon/umychart.vue.components/historydayline.vue
+238
-0
vuehqchart/src/jscommon/umychart.vue.components/stockdeallastest.vue
...src/jscommon/umychart.vue.components/stockdeallastest.vue
+316
-0
未找到文件。
vuehqchart/src/jscommon/umychart.vue.components/historydayline.vue
0 → 100644
浏览文件 @
3473f9bb
<
template
>
<div
class=
"divHistoryDayLine"
ref=
'divHistoryDayLine'
>
<table
class=
"table"
ref=
'daylinetable'
>
<thead>
<tr>
<th
v-for=
'(item,index) in TheadTitle'
:key=
'index'
>
{{
item
}}
</th>
</tr>
</thead>
<tbody>
<tr
v-for=
'(item,index) in PageData'
:key=
"index+'d'"
>
<td>
{{
item
.
Date
}}
</td>
<td>
{{
item
.
MaxPrice
}}
</td>
<td>
{{
item
.
Open
}}
</td>
<td>
{{
item
.
MinPrice
}}
</td>
<td>
{{
item
.
Close
}}
</td>
<td>
{{
item
.
YClose
}}
</td>
<td>
{{
item
.
Vol
}}
</td>
<td>
{{
item
.
Amount
}}
</td>
</tr>
</tbody>
</table>
<div
id=
"paginationWrap"
ref=
"paginationWrap"
>
<el-pagination
@
size-change=
"handleSizeChange"
@
current-change=
"handleCurrentChange"
:current-page.sync=
"Pagination.CurrentPage"
:page-size=
"Pagination.PageSize"
layout=
"prev, pager, next, jumper"
:total=
"Pagination.Total"
></el-pagination>
</div>
</div>
</
template
>
<
script
>
import
JSCommonStock
from
"
../umychart.vue/umychart.stock.vue.js
"
import
StringFormat
from
'
../umychart.vue/stockstringformat.js
'
function
DefaultData
(){}
DefaultData
.
GetPageData
=
function
()
{
let
dataAry
=
[];
let
dataObj
=
{
Date
:
''
,
MaxPrice
:
''
,
Open
:
''
,
MinPrice
:
''
,
Close
:
''
,
YClose
:
''
,
Vol
:
''
,
Amount
:
''
}
dataAry
.
push
(
dataObj
);
return
dataAry
;
}
export
default
{
JSCommonStock
:
JSCommonStock
,
name
:
'
HistoryDayLine
'
,
data
()
{
return
{
// JSStock:null,
Symbol
:
'
600000.sh
'
,
HistoryData
:
null
,
PageData
:
DefaultData
.
GetPageData
(),
SomeDatesDay
:[],
KLineDayData
:[],
KLineWeekData
:[],
KLineMonthData
:[],
KLinePageData
:[],
StartDate
:
20190102
,
EndDate
:
20190528
,
TheadTitle
:[
'
日期
'
,
'
最高价
'
,
'
开盘价
'
,
'
最低价
'
,
'
收盘价
'
,
'
昨收价
'
,
'
成交数量
'
,
'
成交金额
'
],
Pagination
:
{
SingleTableCount
:
0
,
CurrentPage
:
1
,
PageSize
:
50
,
Total
:
10
}
}
},
props
:
[
'
DefaultSymbol
'
,
//默认股票
'
DefaultStartDate
'
,
'
DefaultEndDate
'
,
'
DefaultDateType
'
],
//创建
created
:
function
()
{
if
(
this
.
DefaultSymbol
)
this
.
Symbol
=
this
.
DefaultSymbol
;
//默认股票
if
(
this
.
DefaultStartDate
)
this
.
StartDate
=
this
.
DefaultStartDate
;
if
(
this
.
DefaultEndDate
)
this
.
EndDate
=
this
.
DefaultEndDate
;
this
.
HistoryData
=
JSCommonStock
.
JSStock
.
GetHistoryDayData
(
this
.
Symbol
);
this
.
HistoryData
.
InvokeUpdateUICallback
=
this
.
HistoryDataCallback
;
this
.
HistoryData
.
RequestData
();
},
mounted
:
function
()
{
this
.
OnSize
();
},
watch
:{
DefaultStartDate
(
val
){
this
.
StartDate
=
val
;
this
.
GetSomeDatesData
();
},
DefaultEndDate
(
val
){
this
.
EndDate
=
val
;
this
.
GetSomeDatesData
();
},
DefaultSymbol
(
val
){
this
.
Symbol
=
val
;
this
.
HistoryData
=
JSCommonStock
.
JSStock
.
GetHistoryDayData
(
this
.
Symbol
);
this
.
HistoryData
.
InvokeUpdateUICallback
=
this
.
HistoryDataCallback
;
this
.
HistoryData
.
RequestData
();
},
DefaultDateType
(
val
){
var
data
=
[];
switch
(
val
){
case
'
0
'
:
data
=
this
.
KLineDayData
;
break
;
case
'
1
'
:
data
=
this
.
KLineWeekData
;
break
;
case
'
2
'
:
data
=
this
.
KLineMonthData
;
break
;
}
this
.
KLinePageData
=
data
;
console
.
log
(
'
[historydayline::DefaultDateType]data:
'
,
data
);
this
.
GetSomeDatesData
();
}
},
methods
:
{
HistoryDataCallback
(){
if
(
this
.
HistoryData
.
Data
){
var
data
=
this
.
HistoryData
.
Data
;
this
.
KLineDayData
=
data
.
KLine
;
this
.
KLineWeekData
=
this
.
HistoryData
.
GetWeekData
();
this
.
KLineMonthData
=
this
.
HistoryData
.
GetMonthData
();
this
.
KLinePageData
=
this
.
KLineDayData
;
this
.
GetSomeDatesData
();
}
},
GetSomeDatesData
(){
var
data
=
this
.
KLinePageData
;
this
.
SomeDatesDay
.
splice
(
0
,
this
.
SomeDatesDay
.
length
);
for
(
let
i
=
0
;
i
<
data
.
length
;
i
++
){
var
item
=
data
[
i
];
if
(
item
.
Date
>=
this
.
StartDate
&&
item
.
Date
<=
this
.
EndDate
){
var
obj
=
{
Date
:
item
.
Date
,
MaxPrice
:
StringFormat
.
StockStringFormat
.
FormatValueString
(
item
.
High
,
2
),
Open
:
StringFormat
.
StockStringFormat
.
FormatValueString
(
item
.
Open
,
2
),
MinPrice
:
StringFormat
.
StockStringFormat
.
FormatValueString
(
item
.
Low
,
2
),
Close
:
StringFormat
.
StockStringFormat
.
FormatValueString
(
item
.
Close
,
2
),
YClose
:
StringFormat
.
StockStringFormat
.
FormatValueString
(
item
.
YClose
,
2
),
Vol
:
item
.
Vol
,
Amount
:
StringFormat
.
StockStringFormat
.
FormatValueString
(
item
.
Amount
,
2
)
};
this
.
SomeDatesDay
.
push
(
obj
);
}
}
this
.
Pagination
.
Total
=
this
.
SomeDatesDay
.
length
;
this
.
PaginationTotalData
(
this
.
Pagination
.
CurrentPage
);
},
handleSizeChange
(
val
)
{
console
.
log
(
`每页
${
val
}
条`
);
},
handleCurrentChange
(
val
)
{
this
.
PaginationTotalData
(
val
);
},
PaginationTotalData
(
page
){
var
count
=
this
.
Pagination
.
PageSize
;
var
startIndex
=
(
page
-
1
)
*
count
;
var
endIndex
=
page
*
count
;
this
.
PageData
=
this
.
SomeDatesDay
.
slice
(
startIndex
,
endIndex
);
},
OnSize
(){
var
divHistoryDayLine
=
this
.
$refs
.
divHistoryDayLine
;
var
paginationWrap
=
this
.
$refs
.
paginationWrap
;
var
width
=
divHistoryDayLine
.
clientWidth
;
var
height
=
divHistoryDayLine
.
clientHeight
;
var
paginationWrapHeight
=
paginationWrap
.
offsetHeight
;
var
theadHeight
=
28
;
var
borderWidth
=
1
;
var
tdHeight
=
24
;
var
dataHeight
=
height
-
theadHeight
-
borderWidth
*
1
-
paginationWrapHeight
;
var
dataCount
=
parseInt
(
dataHeight
/
(
tdHeight
+
borderWidth
));
this
.
Pagination
.
PageSize
=
dataCount
;
}
}
}
</
script
>
<
style
scoped
lang=
'scss'
>
*
{
margin
:
0
;
padding
:
0
;}
.divHistoryDayLine
{
width
:
100%
;
height
:
100%
;
font
:
14px
"Microsoft Yahei"
;
$border
:
1px
solid
#ccc
;
.table
{
border-spacing
:
0
;
border-collapse
:
collapse
;
width
:
100%
;
thead
>
tr
>
th
,
thead
>
tr
>
td
,
tbody
>
tr
>
td
{
border
:
$border
;
padding
:
0
10px
;
}
thead
>
tr
>
th
,
thead
>
tr
>
td
{
height
:
28px
;
line-height
:
28px
;
}
tbody
>
tr
>
td
{
height
:
22px
;
line-height
:
22px
;
}
}
#paginationWrap
{
display
:
flex
;
flex-direction
:
row
;
justify-content
:
center
;
}
}
</
style
>
\ No newline at end of file
vuehqchart/src/jscommon/umychart.vue.components/stockdeallastest.vue
0 → 100644
浏览文件 @
3473f9bb
<!--
最新分笔
-->
<
template
>
<div
class=
"divstockdeal"
ref=
"divstockdeal"
>
<div
class=
"table_content"
ref=
"tableContent"
v-show=
"IsTradeDay"
>
<div
class=
"tableWrap"
v-for=
"(curTable,index) in TableData.CurentTables"
:key=
"index"
>
<table
class=
"tabHori"
>
<thead
ref=
"tableHeader"
>
<tr>
<td>
时间
</td>
<td
class=
"alignCenter"
>
价格
</td>
<td
class=
"alignCenter"
>
成交量(手)
</td>
</tr>
</thead>
<tbody>
<tr
v-for=
"(rowItem,ind) in curTable"
:key=
"ind"
>
<td>
{{
rowItem
.
Time
}}
</td>
<td
class=
"alignRight"
:class=
"rowItem.PriceColor"
>
{{
rowItem
.
Price
}}
</td>
<td
class=
"alignRight"
>
{{
parseInt
(
rowItem
.
Vol
)
}}
<span
:class=
"rowItem.Flag == 'B' ? 'red' : 'green'"
>
{{
rowItem
.
Flag
}}
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div
class=
"notTradeDay"
v-show=
"!IsTradeDay"
>
不是交易日
</div>
<div
id=
"paginationWrap"
ref=
"paginationWrap"
v-show=
"IsTradeDay"
>
<el-pagination
@
size-change=
"handleSizeChange"
@
current-change=
"handleCurrentChange"
:current-page.sync=
"Pagination.CurrentPage"
:page-size=
"Pagination.PageSize"
layout=
"prev, pager, next, jumper"
:total=
"Pagination.Total"
></el-pagination>
</div>
</div>
</
template
>
<
script
>
import
JSCommonStock
from
"
../umychart.vue/umychart.stock.vue.js
"
;
import
StringFormat
from
'
../umychart.vue/stockstringformat.js
'
export
default
{
name
:
"
StockDealLastest
"
,
data
()
{
return
{
Symbol
:
"
600000.sh
"
,
ChoiceCountIndex
:
""
,
IsReverseData
:
false
,
LatestDetail
:
null
,
TableData
:
{
Meta
:
[],
Selected
:
[],
SelectedReverse
:
[],
Paginationed
:
[],
CurrentPageData
:
[],
CurentTables
:
[]
},
//Meta:接口返回的缓存数据,Selected:筛选后的数据,Paginationed:筛选后分页过的数据,CurrentPageData:当前页面所有表格的数据
Pagination
:
{
SingleTableCount
:
20
,
CurrentPage
:
1
,
PageSize
:
20
*
6
,
Total
:
10
// IsShow:false
},
loadingBody
:
false
,
IsTradeDay
:
true
};
},
props
:
[
"
DealSymbol
"
],
//创建
created
:
function
()
{
console
.
log
(
"
[stockdeal::created]
"
);
this
.
ChoiceCountIndex
=
this
.
ChoiceIndex
!=
null
?
this
.
ChoiceIndex
:
""
;
// this.IsReverseData = this.IsReverse != null ? this.IsReverse : false;
this
.
Symbol
=
this
.
DealSymbol
!=
null
?
this
.
DealSymbol
:
"
600000.sh
"
;
this
.
LatestDetail
=
JSCommonStock
.
JSStock
.
GetLatestDetailData
(
this
.
Symbol
);
this
.
LatestDetail
.
PageSize
=
this
.
Pagination
.
PageSize
;
this
.
LatestDetail
.
InvokeUpdateUICallback
=
this
.
UpdateData
;
this
.
LatestDetail
.
RequestData
();
},
mounted
:
function
()
{
console
.
log
(
"
[stockdeal::mounted]
"
);
this
.
loadingBody
=
true
;
this
.
OnSize
();
},
watch
:
{
DealSymbol
:
function
(
val
)
{
this
.
LatestDetail
=
JSCommonStock
.
JSStock
.
GetDealDay
(
val
);
this
.
LatestDetail
.
PageSize
=
this
.
Pagination
.
PageSize
;
this
.
LatestDetail
.
InvokeUpdateUICallback
=
this
.
UpdateData
;
this
.
LatestDetail
.
RequestData
();
},
},
methods
:
{
UpdateData
()
{
console
.
log
(
"
[stockdeallastest::UpdateData]data:
"
,
this
.
LatestDetail
.
Data
);
var
data
=
this
.
LatestDetail
.
Data
;
// this.$emit("LatestDetail", data);
if
(
data
!=
null
)
{
this
.
loadingBody
=
false
;
var
count
=
data
.
Count
;
var
start
=
data
.
Response
.
Start
;
var
end
=
data
.
Response
.
End
;
var
yClose
=
data
.
Day
.
YClose
;
var
symbol
=
data
.
Stock
.
Symbol
;
var
name
=
data
.
Stock
.
Name
;
document
.
title
=
name
+
'
-
'
+
symbol
;
if
(
data
.
Deal
)
{
this
.
TableData
.
Meta
=
data
.
Deal
;
this
.
IsTradeDay
=
true
;
this
.
Pagination
.
Total
=
count
;
var
currentPageData
=
[];
var
endIndex
=
end
<
count
?
end
:
count
;
for
(
let
i
=
start
;
i
<
endIndex
;
++
i
){
var
item
=
data
.
Deal
[
i
];
currentPageData
.
push
(
item
);
}
console
.
log
(
"
[stockdeallastest::UpdateData]currentPageData:
"
,
currentPageData
);
this
.
ChoiceData
(
""
,
currentPageData
,
yClose
);
//接收传入的筛选条件
}
}
else
{
this
.
IsTradeDay
=
false
;
}
},
handleSizeChange
(
val
)
{
console
.
log
(
`每页
${
val
}
条`
);
},
handleCurrentChange
(
val
)
{
this
.
LatestDetail
.
RequestPage
(
val
-
1
);
},
// 成交量筛选方法
ChoiceData
(
num
,
data
,
yClose
)
{
var
dataAry
=
[];
console
.
log
(
"
[stockdeal::ChoiceData]data:
"
,
data
);
if
(
data
.
length
>
0
)
{
for
(
let
i
=
0
;
i
<
data
.
length
;
i
++
)
{
var
item
=
data
[
i
];
var
color
=
this
.
FormatValueColor
(
item
.
Price
,
yClose
);
var
dataObj
=
{
Time
:
this
.
processingTime
(
item
.
Time
),
Price
:
StringFormat
.
StockStringFormat
.
FormatValueString
(
item
.
Price
,
2
),
PriceColor
:
color
,
Vol
:
parseInt
(
item
.
Vol
),
Flag
:
item
.
Flag
,
Amount
:
item
.
Amount
};
if
(
num
!=
""
)
{
if
(
item
.
Vol
>=
num
)
{
dataAry
.
push
(
dataObj
);
}
}
else
{
dataAry
.
push
(
dataObj
);
}
}
this
.
TableData
.
CurrentPageData
=
dataAry
;
this
.
InitPageData
(
this
.
TableData
.
CurrentPageData
);
}
},
InitPageData
(
data
)
{
var
count
=
this
.
Pagination
.
SingleTableCount
;
console
.
log
(
"
[::InitPageData]count:
"
,
count
);
this
.
TableData
.
CurentTables
=
this
.
CutDataAry
(
count
,
6
,
data
);
},
UpdateDataShow
(
count
)
{
console
.
log
(
'
[StockDealLastest::UpdateDataShow]count:
'
,
count
);
this
.
Pagination
.
SingleTableCount
=
count
;
this
.
Pagination
.
PageSize
=
count
*
6
;
this
.
LatestDetail
.
PageSize
=
this
.
Pagination
.
PageSize
;
this
.
LatestDetail
.
RequestPage
(
this
.
Pagination
.
CurrentPage
-
1
);
},
FormatValueColor
(
currentValue
,
targetValue
)
{
var
color
=
""
;
if
(
currentValue
>
targetValue
)
{
color
=
"
red
"
;
}
else
if
(
currentValue
<
targetValue
)
{
color
=
"
green
"
;
}
else
{
color
=
""
;
}
return
color
;
},
OnSize
()
{
var
divstockdeal
=
this
.
$refs
.
divstockdeal
;
var
tableContent
=
this
.
$refs
.
tableContent
;
var
paginationWrap
=
this
.
$refs
.
paginationWrap
;
var
width
=
divstockdeal
.
clientWidth
;
var
height
=
divstockdeal
.
clientHeight
;
if
(
height
<=
0
)
return
;
var
mainHight
=
height
-
paginationWrap
.
offsetHeight
;
var
mainWdith
=
width
+
"
px
"
;
var
tdHeight
=
20
;
var
borderHeight
=
1
;
var
everyTableCount
=
Math
.
floor
(
(
mainHight
-
tdHeight
-
borderHeight
)
/
tdHeight
);
if
(
everyTableCount
<
0
){
everyTableCount
=
1
;
}
this
.
UpdateDataShow
(
everyTableCount
);
tableContent
.
style
.
height
=
mainHight
+
"
px
"
;
},
//处理时间
processingTime
(
mss
)
{
var
hours
=
parseInt
(
mss
/
10000
);
var
minutes
=
parseInt
((
mss
/
100
)
%
100
);
if
(
hours
<
10
)
{
hours
=
"
0
"
+
hours
;
}
if
(
minutes
<
10
)
{
minutes
=
"
0
"
+
minutes
;
}
return
hours
+
"
:
"
+
minutes
;
},
CutDataAry
(
everyCount
,
cutIndex
,
data
)
{
var
paginationAry
=
[];
var
total
=
this
.
Pagination
.
Total
;
for
(
let
i
=
0
;
i
<
cutIndex
;
i
++
)
{
if
(
everyCount
*
(
i
+
1
)
<
total
){
paginationAry
.
push
(
data
.
slice
(
everyCount
*
i
,
everyCount
*
(
i
+
1
)));
}
else
{
paginationAry
.
push
(
data
.
slice
(
everyCount
*
i
,
total
));
}
}
return
paginationAry
;
}
}
};
</
script
>
<
style
lang=
'scss'
scoped
>
.divstockdeal
{
width
:
100%
;
height
:
100%
;
.red
{
color
:
#ff0000
;
}
.green
{
color
:
#009900
;
}
.table_content
{
overflow-y
:
auto
;
height
:
100%
;
width
:
100%
;
display
:
flex
;
flex-direction
:
row
;
overflow-x
:
hidden
;
.tableWrap
{
flex-grow
:
1
;
height
:
100%
;
.tabHori
{
font
:
12px
"Microsoft Yahei"
;
width
:
100%
;
box-sizing
:
border-box
;
border-collapse
:
collapse
;
border
:
none
;
td
,
th
{
border
:
none
;
padding
:
0
10px
;
line-height
:
20px
;
}
tr
>
td
:last-child
,
tr
>
th
:last-child
{
padding-left
:
0
;
}
.alignRight
{
text-align
:
right
;
}
.alignCenter
{
text-align
:
center
;
}
thead
{
td
,
th
{
border-bottom
:
1px
solid
#ebeef5
;
}
}
tbody
{
tr
>
td
:last-child
,
tr
>
th
:last-child
{
border-right
:
1px
solid
#ebeef5
;
}
}
tr
>
td
:nth-of-type
(
n
+
2
),
tr
>
th
:nth-of-type
(
n
+
2
)
{
font-size
:
14px
;
}
}
}
}
#paginationWrap
{
display
:
flex
;
flex-direction
:
row
;
justify-content
:
center
;
}
}
</
style
>
\ No newline at end of file
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录