<template>
|
<div style="z-index: -1;" class="tubiao-box">
|
<div class="chartDataWrap clearfix">
|
<!-- 左侧图形 -->
|
<div class="leftChart el-col-24">
|
<div id="minuteChartID" ref="minuteChartID" :style="'height:'+windowHeight+'px;'" style="width:inherit;position: relative;"
|
v-show="IsChartShow.MinuteChartShow"></div>
|
<div id="kLine" ref='kLine' :style="'height:'+windowHeight+'px;'" style="width:inherit;position: relative;" v-show="IsChartShow.KlineChartShow">
|
</div>
|
</div>
|
<div class="indexList">
|
<span v-for='(item,index) in IndexBottomData.children' :key='index' :class='{active:BottomIndexForMinute == index}'
|
@click='ChangeBottomIndex(item,index)'>{{item}}</span>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import HQChart from 'hqchart'
|
var jsChart = HQChart.Chart
|
var jsStock = HQChart.Stock
|
jsStock.JSStock.SetDomain('https://7213afce8ef9.zealink.com.cn', 'https://72fd1d77cce6cache.zealink.com')
|
jsChart.JSChart.SetDomain('https://7213afce8ef9.zealink.com.cn', 'https://72fd1d77cce6cache.zealink.com')
|
var blackStyle = jsChart.HQChartStyle.GetStyleConfig(jsChart.STYLE_TYPE_ID.BLACK_ID);
|
blackStyle.FrameTitleBGColor = 'rgb(0,0,0,0)'
|
jsChart.JSChart.SetStyle(blackStyle);
|
// setInterval(()=>{
|
// var color = localStorage.getItem('styleName')
|
// blackStyle.FrameTitleBGColor = color == 'black-bg' ?'rgb(0,0,0,0)':'rgb(255,255,255,255)'
|
// jsChart.JSChart.SetStyle(blackStyle);
|
// console.log(blackStyle,color)
|
// },500)
|
|
|
import $ from 'jquery'
|
|
export default {
|
props: {
|
ucode: {
|
type: String
|
},
|
idx: {
|
type: Number
|
},
|
event: {
|
type: MouseEvent
|
}
|
},
|
data() {
|
return {
|
windowHeight: document.documentElement.clientHeight - 480, //实时屏幕高度
|
GlobalSymbol: '',
|
pageData: null,
|
pageDataColor: null,
|
bookData: null,
|
buyData: [],
|
sellData: [],
|
detailData: [],
|
IndexBottomData: {},
|
IndexBottomForHistory: {
|
type: 'history',
|
// MACD KDJ RSI BOLL WR DMI BBIBOLL ROC PSY OBV WVAD CCI TRIX
|
children: ['MACD', 'KDJ', 'RSI', 'WR', 'DMI', 'BBIBOLL', 'ROC', 'PSY', 'OBV', 'WVAD', 'CCI', 'TRIX'],
|
},
|
IndexBottomForMinute: {
|
type: 'minute',
|
children: ["MACD", "DMI", "DMA", "BRAR", "KDJ", "RSI", "WR", "CCI", "TRIX"],
|
},
|
IndexInMinute: 999, //副图指标下标
|
IndexActive: 'active',
|
MenuOneSelected: false,
|
MenuMinuteData: [{
|
Text: '副图指标',
|
ActiveIndex: null,
|
Children: ["MACD", "DMI", "DMA", "BRAR", "KDJ", "RSI", "WR", "CCI", "TRIX"]
|
}],
|
ExtendChart: null, //绘制画图工具
|
MenuOneIndex: 999, //一级菜单下标
|
MenuOneSelectedIndex: 0, //一级菜单下标
|
NarBarArry: ['分时', '五日', '日K', '周K', '月K', '年K', '1分钟', '5分钟', '15分钟', '30分钟', '60分钟'],
|
IsChartShow: {
|
MinuteChartShow: true,
|
FiveMinuteChartShow: false,
|
KlineChartShow: false,
|
},
|
SpellStockShow: { //股票联想是否显示
|
Input: false,
|
List: false
|
},
|
MenuTwoIndex: null, //二次菜单下标
|
currentDirection: 'icon-xia', //下拉列表的三角
|
SearchSymbols: null, //联想股票数据
|
inputSymbolStr: '', //输入的股票代码
|
navIndex: 0, //导航下标
|
BottomIndexForMinute: 0, //底部指标下标
|
BottomIndexForHistory: 0, //底部指标下标
|
BottomIndexShow: true,
|
TrueWidth: 1104, //画布实际宽度
|
JSEnvironment: {
|
// Symbol: '600000.sh', //股票代码
|
Name: '',
|
KLineIndex: [ //K线指标
|
{
|
Name: 'KDJ',
|
Index: 'KDJ'
|
},
|
{
|
Name: 'MACD',
|
Index: 'MACD'
|
},
|
{
|
Name: 'RSI',
|
Index: 'RSI'
|
},
|
{
|
Name: 'BOLL',
|
Index: 'BOLL'
|
},
|
{
|
Name: 'VOL',
|
Index: 'VOL'
|
},
|
{
|
Name: '均线',
|
Index: '均线'
|
}
|
],
|
|
MinuteChart: null, //走势图
|
MinuteOption: null,
|
|
HistoryChart: null, //K线图
|
HistoryOption: null,
|
|
WidthPercent: 0.653,
|
|
FiveDMinuteChart: null,
|
FiveDMinuteOption: null, //5日分时图选项
|
|
StockCache: null, //股票数据
|
CurrentNews: 0,
|
CurrentInteract: 1,
|
CurrentVisited: 2,
|
CurrentNotice: 3,
|
CurrentFlag: 1,
|
JqTableInfo: $('<table class="tableInfo"></table>'),
|
JqUlOne: $(
|
'<ul class="ulOne"><li class="noRight">不复权</li><li class="noRight active">前复权</li><li class="noRight">后复权</li><ul>'
|
),
|
JqUlTwo: $('<ul class="ulTwo"></ul>'),
|
GetIndexByName: function(name) {
|
for (var i in this.KLineIndex) {
|
var item = this.KLineIndex[i];
|
if (item.Name == name) return item.Index;
|
}
|
|
return null;
|
},
|
|
GetIndexName: function(index) {
|
for (var i in this.KLineIndex) {
|
var item = this.KLineIndex[i];
|
if (item.Index == index) return item.Name;
|
}
|
|
return null;
|
}
|
}
|
}
|
},
|
directives: {
|
focus: {
|
// 指令的定义
|
inserted: function(el) {
|
el.focus()
|
}
|
}
|
},
|
watch: {
|
inputSymbolStr: function(newValue, oldValue) {
|
this.SpellStock();
|
},
|
GlobalSymbol: function(newValue, oldValue) {
|
var symbolAry = new Array();
|
symbolAry.push(newValue);
|
// console.log('[watch GlobalSymbol] newValue', newValue);
|
this.UpdateMain(null, symbolAry, null, this.JSEnvironment.StockCache);
|
this.JSEnvironment.StockCache.ReqeustData();
|
},
|
ucode() {
|
this.GlobalSymbol = this.ucode
|
// this.re()
|
this.ChangeStock(this.ucode)
|
},
|
idx() {
|
this.ChangeChartByNav(this.idx, this.event)
|
}
|
},
|
methods: {
|
getURLParams(name) {
|
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
|
var r = window.location.search.substr(1).match(reg);
|
if (r != null) return decodeURI(r[2]);
|
return null;
|
},
|
ShowSpell() {
|
this.SpellStockShow.Input = true;
|
this.inputSymbolStr = '';
|
},
|
HideSpell() {
|
this.SpellStockShow.Input = false;
|
this.SpellStockShow.List = false;
|
},
|
ChangeCurrentRight(index) {
|
if (this.JSEnvironment.HistoryChart != null) {
|
this.JSEnvironment.HistoryChart.ChangeRight(index);
|
}
|
},
|
ChangeCurrentIndex(indexName) { //切换二级菜单指标
|
//通过classname判断点击了哪个位置的元素
|
if (this.JSEnvironment.HistoryChart != null) {
|
this.JSEnvironment.HistoryChart.ChangeIndex(1, indexName);
|
}
|
},
|
ChangeBottomIndex(indexName, ind) { //切换图形底部指标
|
if (this.IndexBottomData.type == 'history' && this.JSEnvironment.HistoryChart != null) {
|
this.JSEnvironment.HistoryChart.ChangeIndex(1, 'VOL');
|
this.JSEnvironment.HistoryChart.ChangeIndex(2, indexName);
|
this.BottomIndexForMinute = ind;
|
console.log('ind', ind)
|
} else if (this.IndexBottomData.type == 'minute' && this.JSEnvironment.MinuteChart != null) {
|
this.JSEnvironment.MinuteChart.ChangeIndex(1, indexName);
|
this.BottomIndexForMinute = ind;
|
console.log('ind', ind)
|
}
|
},
|
ChangeMainLineType(index) {
|
if (this.JSEnvironment.HistoryChart != null) {
|
switch (index) {
|
case 0:
|
this.JSEnvironment.HistoryChart.ChangeKLineDrawType(3);
|
break;
|
case 1:
|
this.JSEnvironment.HistoryChart.ChangeKLineDrawType(0);
|
break;
|
case 2:
|
this.JSEnvironment.HistoryChart.ChangeKLineDrawType(2);
|
break;
|
case 3:
|
this.JSEnvironment.HistoryChart.ChangeKLineDrawType(1);
|
break;
|
}
|
}
|
|
},
|
ChangeCurrentCoordinateType(index) {
|
if (this.JSEnvironment.HistoryChart != null) {
|
this.JSEnvironment.HistoryChart.JSChartContainer.ChangeCoordinateType(index);
|
}
|
},
|
ChangeStock(code) {
|
this.GlobalSymbol = code;
|
this.SpellStockShow.Input = false;
|
this.SpellStockShow.List = false;
|
if (this.JSEnvironment.MinuteChart != null) {
|
this.JSEnvironment.MinuteChart.ChangeSymbol(code);
|
}
|
if (this.JSEnvironment.HistoryChart != null) {
|
this.JSEnvironment.HistoryChart.ChangeSymbol(code);
|
}
|
},
|
ChangeWindowCount(index) {
|
if (this.JSEnvironment.HistoryChart != null) {
|
this.JSEnvironment.HistoryChart.ChangeIndexWindowCount(index + 1);
|
}
|
},
|
ChangeDragType(index) {
|
if (this.JSEnvironment.HistoryChart != null) {
|
this.JSEnvironment.HistoryChart.JSChartContainer.DragMode = index;
|
}
|
},
|
SpellStock() { //股票联想
|
var inputText = this.inputSymbolStr;
|
var spellData = {
|
Input: inputText,
|
Start: 0,
|
End: 10,
|
Callback: this.RequestSpell
|
};
|
var Url = "https://opensource.zealink.com/API/StockSpell";
|
$.ajax({
|
url: Url,
|
method: 'POST',
|
data: {
|
"input": spellData.Input,
|
"start": spellData.Start,
|
"end": spellData.End
|
},
|
dataType: 'json',
|
success(res) {
|
if (res.code == 0) {
|
spellData.Callback(res.stock);
|
}
|
},
|
fail(res) {
|
console.log('SpellStock fail', res);
|
}
|
});
|
},
|
RequestSpell(data) {
|
if (data.length > 0) {
|
this.SpellStockShow.List = true;
|
this.SearchSymbols = data;
|
} else {
|
this.SpellStockShow.List = false;
|
}
|
},
|
LoadEnvironment() {
|
var symbol = this.getURLParams('symbol');
|
if (symbol != null) this.GlobalSymbol = symbol;
|
|
var strIndex = this.getURLParams('index');
|
if (strIndex) {
|
var aryIndex = strIndex.split(',');
|
if (aryIndex.length > 0) this.JSEnvironment.KLineIndex = aryIndex;
|
}
|
//分钟走势图配置
|
this.JSEnvironment.MinuteOption = {
|
Type: '分钟走势图', //历史分钟走势图
|
Symbol: this.GlobalSymbol,
|
IsAutoUpate: true, //是自动更新数据
|
Windows: [{
|
Index: "MACD",
|
Modify: false,
|
Change: false
|
}],
|
DayCount: 1,
|
|
IsShowRightMenu: false, //右键菜单
|
IsShowCorssCursorInfo: true, //是否显示十字光标的刻度信息
|
|
Border: //边框
|
{
|
Left: 60, //左边间距
|
Right: 60, //右边间距
|
Top: 20,
|
Bottom: 20
|
},
|
|
KLineTitle: //标题设置
|
{
|
IsShowName: false, //不显示股票名称
|
IsShowSettingInfo: false, //不显示周期/复权
|
},
|
|
Frame: //子框架设置,刻度小数位数设置
|
[{
|
SplitCount: 5,
|
StringFormat: 0
|
},
|
{
|
SplitCount: 3,
|
StringFormat: 0
|
},
|
{
|
SplitCount: 3,
|
StringFormat: 0
|
}
|
]
|
};
|
|
//K线图配置
|
this.JSEnvironment.HistoryOption = {
|
Type: '历史K线图',
|
Windows: [{
|
Index: "均线",
|
Modify: false,
|
Change: false,
|
Overlay: false,
|
Close: false
|
},
|
{
|
Index: "VOL",
|
Modify: false,
|
Change: false,
|
Overlay: false,
|
Close: false
|
},
|
{
|
Index: "MACD",
|
Modify: false,
|
Change: false,
|
Overlay: false,
|
Close: false
|
}
|
//{Index:"放心股-涨停多空线"},
|
//{Index:"放心股-量能黄金点"},
|
], //窗口指标
|
Symbol: this.GlobalSymbol,
|
IsAutoUpdate: true, //是自动更新数据
|
|
IsShowRightMenu: false, //右键菜单
|
|
KLine: {
|
DragMode: 1, //拖拽模式 0 禁止拖拽 1 数据拖拽 2 区间选择
|
Right: 1, //复权 0 不复权 1 前复权 2 后复权
|
Period: 0, //周期 0 日线 1 周线 2 月线 3 年线
|
MaxReqeustDataCount: 1000, //日线数据最近1000天
|
MaxRequestMinuteDayCount: 15, //分钟数据最近15天
|
PageSize: 50, //一屏显示多少数据
|
IsShowTooltip: true //是否显示K线提示信息
|
},
|
|
KLineTitle: //标题设置
|
{
|
IsShowName: true, //不显示股票名称
|
IsShowSettingInfo: true //不显示周期/复权
|
},
|
|
Border: //边框
|
{
|
Left: 60, //左边间距
|
Right: 60, //右边间距
|
Top: 20
|
},
|
|
Frame: //子框架设置
|
[{
|
SplitCount: 3,
|
StringFormat: 0,
|
IsShowLeftText: false
|
},
|
{
|
SplitCount: 3,
|
StringFormat: 0,
|
IsShowLeftText: false
|
},
|
{
|
SplitCount: 3,
|
StringFormat: 0,
|
IsShowLeftText: false
|
},
|
{
|
SplitCount: 3,
|
StringFormat: 0,
|
IsShowLeftText: false
|
}
|
]
|
};
|
},
|
ChangeChartByNav(idx, event) {
|
var text = event.currentTarget.text;
|
this.navIndex = idx;
|
if (text === '分时') {
|
this.IsChartShow = {
|
MinuteChartShow: true,
|
KlineChartShow: false
|
};
|
this.updateMinuteChart(1);
|
this.IndexBottomData = this.IndexBottomForMinute;
|
this.BottomIndexShow = true;
|
} else if (text === '五日') {
|
this.IsChartShow = {
|
MinuteChartShow: true,
|
KlineChartShow: false
|
};
|
this.updateMinuteChart(5);
|
this.IndexBottomData = this.IndexBottomForMinute;
|
this.BottomIndexShow = true;
|
} else {
|
console.log('text', text)
|
this.IsChartShow = {
|
MinuteChartShow: false,
|
KlineChartShow: true,
|
};
|
// this.MenuTwoIndex = idx - 2; //选中对应的二级菜单
|
switch (text) {
|
case '日K':
|
this.updateHistoryChart(0);
|
break;
|
case '周K':
|
this.updateHistoryChart(1);
|
break;
|
case '月K':
|
this.updateHistoryChart(2);
|
break;
|
case '年K':
|
this.updateHistoryChart(3);
|
break;
|
case '1分钟':
|
this.updateHistoryChart(4);
|
break;
|
case '5分钟':
|
this.updateHistoryChart(5);
|
break;
|
case '15分钟':
|
this.updateHistoryChart(6);
|
break;
|
case '30分钟':
|
this.updateHistoryChart(7);
|
break;
|
case '60分钟':
|
this.updateHistoryChart(8);
|
break;
|
}
|
this.IndexBottomData = this.IndexBottomForHistory;
|
this.BottomIndexShow = false;
|
}
|
|
// console.log('[ChangeChartByNav event]',event.currentTarget.text);
|
},
|
addClassForData(arrData, arrSource, yClose, type) {
|
arrData.splice(0, arrData.length);
|
var ary1 = ["卖一", "卖二", "卖三", "卖四", "卖五"];
|
var ary2 = ["买一", "买二", "买三", "买四", "买五"];
|
var textAry = [];
|
if (type === "Buy") {
|
textAry = ary2;
|
} else if (type === "Sell") {
|
textAry = ary1;
|
}
|
if (arrSource !== undefined && arrSource.length > 0) {
|
arrSource.forEach(function(item, index) {
|
if (item.Price > yClose) {
|
item.ClassName = 'upColor';
|
} else if (item.Price < yClose) {
|
item.ClassName = 'lowColor';
|
} else {
|
item.ClassName = '';
|
}
|
item.PriceFormat = Number(item.Price).toFixed(2);
|
var timeStr = '';
|
|
if (type !== 'Deal') {
|
item.Text = textAry[index];
|
} else {
|
if (String(item.Time).length === 5) {
|
timeStr = '0' + item.Time;
|
} else {
|
timeStr = String(item.Time);
|
}
|
item.TimeFormat = timeStr.substring(0, 2) + ':' + timeStr.substring(2, 4);
|
}
|
|
arrData.push(item);
|
});
|
}
|
|
},
|
updateMinuteChart(count) { //更新分时图
|
//根据百分比获取分时图div的宽度
|
var trueWidth = $('.leftChart').width();
|
// this.TrueWidth = trueWidth;
|
$("#minuteChartID").width(Number(trueWidth));
|
|
if (this.JSEnvironment.MinuteChart == null) {
|
this.JSEnvironment.MinuteChart = jsChart.jsChartInit(this.$refs.minuteChartID); // 初始化走势图
|
jsChart.jsChartStyle(this.JSEnvironment.MinuteOption);
|
this.JSEnvironment.MinuteChart.SetOption(this.JSEnvironment.MinuteOption);
|
} else {
|
this.JSEnvironment.MinuteChart.ChangeDayCount(count);
|
}
|
},
|
UpdateMain(id, arySymbol, dataType, jsStockIntans) { //获得股票基础数据
|
var read = jsStockIntans.GetStockRead('main', this.UpdateMain); //获取一个读取数据类,并绑定id和更新数据方法
|
var symbol = arySymbol[0];
|
var name = read.Get(symbol, jsStock.STOCK_FIELD_NAME.NAME);
|
this.JSEnvironment.Name = name;
|
var date = read.Get(symbol, jsStock.STOCK_FIELD_NAME.DATE);
|
var time = read.Get(symbol, jsStock.STOCK_FIELD_NAME.TIME);
|
var price = read.Get(symbol, jsStock.STOCK_FIELD_NAME.PRICE);
|
var riseFallPrice = read.Get(symbol, jsStock.STOCK_FIELD_NAME.RISE_FALL_PRICE);
|
var increase = read.Get(symbol, jsStock.STOCK_FIELD_NAME.INCREASE);
|
var high = read.Get(symbol, jsStock.STOCK_FIELD_NAME.HIGH);
|
var low = read.Get(symbol, jsStock.STOCK_FIELD_NAME.LOW);
|
var open = read.Get(symbol, jsStock.STOCK_FIELD_NAME.OPEN);
|
var excahngerate = read.Get(symbol, jsStock.STOCK_FIELD_NAME.EXCHANGE_RATE);
|
var amount = read.Get(symbol, jsStock.STOCK_FIELD_NAME.AMOUNT);
|
var vol = read.Get(symbol, 7);
|
var pe = read.Get(symbol, jsStock.STOCK_FIELD_NAME.PE);
|
var marketV = read.Get(symbol, jsStock.STOCK_FIELD_NAME.MARKET_VALUE);
|
var flowMarketV = read.Get(symbol, jsStock.STOCK_FIELD_NAME.FLOW_MARKET_VALUE);
|
var eps = read.Get(symbol, jsStock.STOCK_FIELD_NAME.FINANCE_PERSEARNING);
|
var scrollEPS = read.Get(symbol, jsStock.STOCK_FIELD_NAME.FINANCE_EPS);
|
var roe = read.Get(symbol, jsStock.STOCK_FIELD_NAME.ROE);
|
var pb = read.Get(symbol, jsStock.STOCK_FIELD_NAME.PB);
|
var amplitude = read.Get(symbol, jsStock.STOCK_FIELD_NAME.AMPLITUDE);
|
var yClose = read.Get(symbol, jsStock.STOCK_FIELD_NAME.YCLOSE);
|
var bookRate = read.Get(symbol, jsStock.STOCK_FIELD_NAME.BOOK_RATE); //委比
|
var bookDiffer = read.Get(symbol, jsStock.STOCK_FIELD_NAME.BOOK_DIFFER); //委差
|
var buyData = read.Get(symbol, jsStock.STOCK_FIELD_NAME.BUY5);
|
var sellData = read.Get(symbol, jsStock.STOCK_FIELD_NAME.SELL5);
|
var dealData = read.Get(symbol, jsStock.STOCK_FIELD_NAME.DEAL);
|
this.bookData = {
|
BookRate: {
|
Text: Number(bookRate).toFixed(2) + '%',
|
ClassName: this.setColor(bookRate, 0)
|
},
|
BookDiffer: {
|
Text: bookDiffer,
|
ClassName: this.setColor(bookRate, 0)
|
}
|
};
|
this.addClassForData(this.buyData, buyData, yClose, "Buy");
|
this.addClassForData(this.sellData, sellData, yClose, "Sell");
|
this.sellData.reverse();
|
this.addClassForData(this.detailData, dealData, yClose, "Deal");
|
|
this.pageData = new Map();
|
this.pageData.set('symbol', this.GlobalSymbol);
|
// this.pageData.set('name',name);
|
this.pageData.set('price', price);
|
this.pageData.set('rise', riseFallPrice);
|
this.pageData.set('riseRate', increase);
|
this.pageData.set('high', high);
|
this.pageData.set('low', low);
|
this.pageData.set('open', open);
|
this.pageData.set('exchange', excahngerate);
|
this.pageData.set('amount', amount);
|
this.pageData.set('vol', vol);
|
this.pageData.set('pe', pe);
|
this.pageData.set('marketV', marketV);
|
this.pageData.set('flowMarketV', flowMarketV);
|
this.pageData.set('eps', eps);
|
this.pageData.set('scrollEPS', scrollEPS);
|
this.pageData.set('roe', roe);
|
this.pageData.set('pb', pb);
|
this.pageData.set('amplitude', amplitude);
|
this.baseDataFormat(this.pageData);
|
this.baseDataColor(this.pageData, yClose);
|
document.title = name;
|
read.EndRead();
|
},
|
updateHistoryChart(period) { //更新k线图
|
//根据百分比获取k线图div的宽度
|
var trueWidth = $('.leftChart').width();
|
// this.TrueWidth = trueWidth;
|
$("#kLine").width(Number(trueWidth));
|
// $("#kLine").height(360);
|
if (this.JSEnvironment.HistoryChart == null) {
|
this.JSEnvironment.HistoryChart = jsChart.jsChartInit(this.$refs.kLine); //初始化K线图
|
this.JSEnvironment.HistoryOption.KLine.Period = period;
|
this.JSEnvironment.HistoryChart.SetOption(this.JSEnvironment.HistoryOption);
|
|
} else {
|
this.JSEnvironment.HistoryChart.ChangePeriod(period);
|
}
|
},
|
hideMenuTwo(index) {
|
this.MenuOneIndex = 999; //下标不相等，隐藏二级菜单
|
this.currentDirection = 'icon-xia';
|
},
|
baseDataFormat(data) {
|
var self = this;
|
data.forEach(function(item, key, mapObj) {
|
if (item == undefined) {
|
if (key == 'riseRate' || key == 'exchange' || key == 'roe' || key == 'amplitude') {
|
item = '--%';
|
} else {
|
item = '--';
|
}
|
} else {
|
if (key == 'amount' || key == 'marketV' || key == 'flowMarketV' || key == 'vol') {
|
item = self.numToCUnit(item);
|
} else if (key == 'riseRate' || key == 'exchange' || key == 'roe' || key == 'amplitude') {
|
item = Number(item).toFixed(2) + '%';
|
} else {
|
item = Number(item).toFixed(2);
|
}
|
}
|
data.set(key, item);
|
});
|
|
},
|
numToCUnit(num) {
|
if (num < 100000000) {
|
return Number(num / 10000).toFixed(2) + '万';
|
} else {
|
return Number(num / 100000000).toFixed(2) + '亿';
|
}
|
},
|
CaluChartWidthHeight() { //计算图形高度
|
$(".container").height($(document).height());
|
var chartHeight = $(document).height() - $(".topWrap").outerHeight(true) - $(".navBarWrap").outerHeight(true) - $(
|
".kLineSetWrap").outerHeight(true) - $(".indexList").outerHeight(true) - 5;
|
var chartWidth = $(document).width() - $(".rightData").outerWidth(true) - 2;
|
console.log('[CaluChartWidthHeight document outerWidth]', $(document).width());
|
$("#minuteChartID").width(chartWidth).height(chartHeight);
|
$("#kLine").width(chartWidth).height(chartHeight);
|
if (this.JSEnvironment.MinuteChart != null) {
|
this.JSEnvironment.MinuteChart.OnSize();
|
}
|
if (this.JSEnvironment.HistoryChart != null) {
|
this.JSEnvironment.HistoryChart.OnSize();
|
}
|
},
|
baseDataColor(data, yClose) { //与昨日收盘价相比，与0比
|
this.pageDataColor = {};
|
var self = this;
|
data.forEach(function(item, key, mayobj) {
|
if (item != undefined) {
|
switch (key) {
|
case 'exchange':
|
item = item.split('%')[0];
|
var className = self.setColor(item, 0);
|
self.pageDataColor.exchangeClass = className;
|
break;
|
case 'roe':
|
item = item.split('%')[0];
|
var className = self.setColor(item, 0);
|
self.pageDataColor.roeClass = className;
|
break;
|
case 'rise':
|
case 'riseRate':
|
item = item.split('%')[0];
|
var className = self.setColor(item, 0);
|
self.pageDataColor.riseClass = className;
|
break;
|
case 'price':
|
var className = self.setColor(item, yClose);
|
self.pageDataColor.priceClass = className;
|
break;
|
case 'high':
|
var className = self.setColor(item, yClose);
|
self.pageDataColor.highClass = className;
|
break;
|
case 'low':
|
var className = self.setColor(item, yClose);
|
self.pageDataColor.lowClass = className;
|
break;
|
case 'open':
|
var className = self.setColor(item, yClose);
|
self.pageDataColor.openClass = className;
|
break;
|
|
}
|
}
|
|
});
|
},
|
setColor(item, yClose) {
|
if (item > yClose) {
|
return 'upColor';
|
} else if (item < yClose) {
|
return 'lowColor';
|
} else {
|
return '';
|
}
|
}
|
},
|
mounted() {
|
|
|
setInterval(() => {
|
this.windowHeight = document.documentElement.clientHeight - 480; //实时屏幕高度
|
}, 500);
|
|
|
this.LoadEnvironment();
|
this.updateMinuteChart(1);
|
this.IndexBottomData = this.IndexBottomForMinute;
|
this.updateHistoryChart(0);
|
var self = this;
|
document.addEventListener('click', (e) => {
|
if (!$('#kLineSetWrap').is(e.target) && $('#kLineSetWrap').has(e.target).length === 0) this.MenuOneIndex = 999;
|
});
|
this.CaluChartWidthHeight();
|
$(window).resize(function() { //重新计算尺寸
|
self.CaluChartWidthHeight();
|
});
|
},
|
|
created() {
|
// console.log('[created jsStock]', jsStock);
|
this.JSEnvironment.StockCache = jsStock.JSStockInit();
|
var arySymbol = new Array();
|
arySymbol.push(this.GlobalSymbol);
|
this.UpdateMain(null, arySymbol, null, this.JSEnvironment.StockCache);
|
this.JSEnvironment.StockCache.ReqeustData();
|
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
$border: 1px solid #e1ecf2;
|
|
.black-bg {
|
.tubiao-box {
|
background-color: #000;
|
}
|
}
|
|
.red-bg {
|
.tubiao-box {
|
background-color: #fff;
|
}
|
|
.indexList {
|
background: #fff;
|
color: #000;
|
}
|
}
|
|
|
* {
|
font: 14px/normal "Microsoft Yahei";
|
color: #5a657e;
|
padding: 0;
|
margin: 0;
|
}
|
|
html,
|
body {
|
height: 100%;
|
}
|
|
a {
|
text-decoration: none;
|
}
|
|
ul,
|
ol {
|
list-style: none;
|
}
|
|
.clearfix::after {
|
content: ' ';
|
display: block;
|
width: 0;
|
height: 0;
|
overflow: hidden;
|
clear: both;
|
}
|
|
.upColor {
|
color: #ee1515;
|
}
|
|
.lowColor {
|
color: #199e00;
|
}
|
|
.topWrap {
|
background-color: #eee;
|
padding: 15px 2.2% 5px 1.5%;
|
height: 47px;
|
}
|
|
.topWrap .stockInfo,
|
.topWrap .priceInfo,
|
.topWrap .otherInfo {
|
float: left;
|
}
|
|
.topWrap .otherInfo div {
|
line-height: 1;
|
}
|
|
.topWrap .otherInfo div:nth-of-type(2) {
|
margin-bottom: 9px;
|
}
|
|
.topWrap .otherInfo span {
|
margin-left: 20px;
|
}
|
|
.topWrap .stockInfo {
|
width: 11%;
|
/*w:146*/
|
box-sizing: border-box;
|
padding-left: 0.3%;
|
padding-bottom: 12px;
|
height: 18px;
|
|
.codeInfo {
|
position: relative;
|
height: 24px;
|
z-index: 333;
|
|
.code {
|
font-size: 18px;
|
line-height: 1;
|
color: #333;
|
margin-right: 15px;
|
}
|
|
.icon-bianji {
|
color: #217cd9;
|
font-size: 18px;
|
cursor: pointer;
|
}
|
|
.editSymbol {
|
height: 24px;
|
width: 94px;
|
box-sizing: border-box;
|
padding-left: 5px;
|
padding-top: 2px;
|
border: 1px solid #999;
|
/*background-color: #fff;*/
|
position: absolute;
|
top: 0;
|
left: 0;
|
|
input {
|
border: none;
|
width: 67px;
|
}
|
|
.icon-close {
|
font-size: 14px;
|
}
|
}
|
|
.symbolList {
|
position: absolute;
|
top: 24px;
|
left: 0;
|
width: 169px;
|
border: 1px solid #999;
|
/*background-color: #fff;*/
|
|
>li {
|
padding: 0 8px;
|
line-height: 24px;
|
cursor: pointer;
|
|
.symbol {
|
margin-right: 10px;
|
}
|
}
|
|
>li:hover {
|
background-color: #217cd9;
|
|
>span {
|
color: #fff;
|
}
|
}
|
}
|
}
|
}
|
|
.stockInfo .stockName {
|
font-size: 20px;
|
line-height: 1;
|
color: #333;
|
margin-bottom: 4px;
|
}
|
|
.topWrap .priceInfo {
|
width: 9.8%;
|
/*w:134*/
|
}
|
|
.priceInfo .priceCurrentNum {
|
font-size: 18px;
|
}
|
|
.priceInfo .priceCurrent {
|
display: flex;
|
flex-direction: row;
|
flex-wrap: wrap;
|
}
|
|
.priceInfo .priceCurrent .riseNum {
|
flex-grow: 1;
|
}
|
|
.priceInfo .priceCurrent .risePrecent {
|
flex-grow: 2;
|
}
|
|
.topWrap .otherInfo {
|
width: 75.2%;
|
}
|
|
.topWrap .otherInfo ul {
|
width: 100%;
|
display: flex;
|
flex-direction: row;
|
flex-wrap: wrap;
|
}
|
|
.topWrap .otherInfo li {
|
flex-grow: 1;
|
}
|
|
.kLineSetWrap {
|
height: 32px;
|
line-height: 32px;
|
padding-left: 20px;
|
border-bottom: 1px solid #d9d9d9;
|
position: relative;
|
z-index: 999;
|
|
>.item {
|
display: inline-block;
|
cursor: pointer;
|
height: 32px;
|
line-height: 32px;
|
padding-top: 6px;
|
position: relative;
|
margin-right: 15px;
|
box-sizing: border-box;
|
|
.menuOne {
|
border: 1px solid;
|
border-color: transparent;
|
border-bottom: none;
|
display: inline-block;
|
width: 100%;
|
height: 26px;
|
vertical-align: top;
|
padding: 0 14px 6px 14px;
|
box-sizing: border-box;
|
}
|
|
.menuOne:hover,
|
.menuOne.light {
|
border-color: #d9d9d9;
|
|
>span {
|
color: #217cd9;
|
}
|
}
|
|
.menuTwo {
|
position: absolute;
|
background-color: #fff;
|
top: 32px;
|
left: 0;
|
border: 1px solid #d9d9d9;
|
border-top: none;
|
box-sizing: border-box;
|
width: 100%;
|
|
>li {
|
padding: 0 12px;
|
line-height: 32px;
|
}
|
|
>li:hover,
|
>li.active {
|
color: #217cd9;
|
}
|
}
|
}
|
|
>.item:nth-child(1) {
|
.menuOne {
|
padding: 0 10px;
|
}
|
}
|
|
>.item:nth-child(7) {
|
.menuOne {
|
padding: 0 30px;
|
}
|
}
|
|
.iconfont {
|
font-size: 13px;
|
}
|
}
|
|
.indexList {
|
font-size: 12px !important;
|
width: 100%;
|
height: 32px;
|
display: flex;
|
flex-direction: row;
|
background-color: #000;
|
}
|
|
.indexList span {
|
font-size: 12px !important;
|
height: 32px;
|
line-height: 32px;
|
text-align: center;
|
cursor: pointer;
|
flex-grow: 1;
|
color: #5a657e;
|
}
|
|
.indexList span.active {
|
color: #efbb53;
|
}
|
|
.leftChart {
|
/* width: 80.75%; */
|
float: left;
|
padding-top: 5px;
|
}
|
|
.rightData {
|
float: left;
|
width: 208px;
|
margin-top: 25px;
|
margin-left: 10px;
|
margin-right: 10px;
|
border: $border;
|
|
.firstLine {
|
line-height: 39px;
|
border-bottom: $border;
|
padding-left: 10px;
|
display: flex;
|
flex-direction: row;
|
flex-wrap: wrap;
|
|
>span {
|
margin-right: 15px;
|
line-height: 39px;
|
}
|
|
>span:nth-of-type(2) {
|
margin-right: 0;
|
}
|
}
|
|
.buyFive,
|
.sellFive {
|
border-bottom: $border;
|
padding: 3px 0;
|
|
>li {
|
line-height: 24px;
|
|
>span {
|
display: inline-block;
|
}
|
|
>span:nth-of-type(1) {
|
width: 20%;
|
box-sizing: border-box;
|
padding-left: 10px;
|
}
|
|
>span:nth-of-type(2) {
|
width: 35%;
|
}
|
|
>span:nth-of-type(3) {
|
width: 35%;
|
}
|
}
|
}
|
|
.detailList {
|
padding-left: 10px;
|
padding: 7px 0;
|
|
>li {
|
line-height: 26px;
|
|
>span {
|
display: inline-block;
|
}
|
|
>span:nth-of-type(1) {
|
width: 32%;
|
box-sizing: border-box;
|
padding-left: 10px;
|
}
|
|
>span:nth-of-type(2) {
|
width: 28%;
|
}
|
|
>span:nth-of-type(3) {
|
width: 32%;
|
}
|
}
|
}
|
}
|
</style>
|
