<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit">
<title>详情</title>
<link href="css/bootstrap.min.css?v=3.4.0" rel="stylesheet">
<link href="font-awesome/css/font-awesome.css?v=4.3.0" rel="stylesheet">
<link href="css/plugins/iCheck/custom.css" rel="stylesheet">
<link href="css/animate.css" rel="stylesheet">
<link href="css/style.css?v=2.2.0" rel="stylesheet">
</head>
<body>
<div id="wrapper">
<nav class="navbar-default navbar-static-side" role="navigation">
<div class="sidebar-collapse">
</div>
</nav>
<div id="page-wrapper" class="gray-bg dashbard-1">
<!--
<div class="row border-bottom">
<nav class="navbar navbar-static-top" role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#"><i class="fa fa-bars"></i>
</a>
</div>
</nav>
</div>
-->
<div class="row border-bottom white-bg ">
<div class="wrapper ">
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="ibox float-e-margins" style="margin-bottom:0px;">
<div class="ibox-title">
<h1 class="no-margins font-bold" id="i_code">------</h1>
<div class="stat-percent font-bold text-success" id="i_type"> </i>
</div>
<small class="font-bold" id="i_name">---</small>
</div>
</div>
</div>
<div class="col-lg-8">
<div class="ibox float-e-margins" style="margin-bottom:0px;">
<div class="ibox-content tooltip-demo">
<div class="row">
<div class="col-xs-3">
<small class="stats-label gray-txt">最新价</small>
<h4 id="i_price">-</h4>
</div>
<div class="col-xs-3">
<small class="stats-label gray-txt">市盈率</small>
<h4 id="i_yl">-</h4>
</div>
<div class="col-xs-3">
<small class="stats-label gray-txt">今开</small>
<h4 id="i_jk">-</h4>
</div>
<div class="col-xs-3">
<small class="stats-label gray-txt">最高</small>
<h4 id="i_zg">-</h4>
</div>
</div>
<div class="row" style="margin-top: 10px;">
<div class="col-xs-3">
<small class="stats-label gray-txt">涨幅</small>
<h4 id="i_zf">-</h4>
</div>
<div class="col-xs-3">
<small class="stats-label gray-txt">市净率 <i class="fa fa-question-circle" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="市净率"></i></small>
<h4 id="i_jz">-</h4>
</div>
<div class="col-xs-3">
<small class="stats-label gray-txt">昨收</small>
<h4 id="i_zs">-</h4>
</div>
<div class="col-xs-3">
<small class="stats-label gray-txt">最低</small>
<h4 id="i_zd">-</h4>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="ibox float-e-margins">
<div class="ibox-content tooltip-demo">
<div class="row">
<div class="col-xs-2">
<small class="stats-label gray-txt">所属主要板块</small>
<h4 id="i_bk">-</h4>
</div>
<div class="col-xs-2">
<small class="stats-label gray-txt">市盈率(TTM) <i class="fa fa-question-circle" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="滚动市盈率=股价/最近四个季度的每股预期收益。最近四个季度的每股预期收益即从现在来看往前推12个月的每股预期收益总和。"></i></small>
<h4 id="i_sylt">-</h4>
</div>
<div class="col-xs-2">
<small class="stats-label gray-txt">市盈率(动) <i class="fa fa-question-circle" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="动态市盈率=股价/本年度预测的每股预期收益。动态市盈率股票现价（市值）和未来的利润之比，未来的利润根据历史利润预测"></i></small>
<h4 id="i_syld">-</h4>
</div>
<div class="col-xs-2">
<small class="stats-label gray-txt">市盈率(静) <i class="fa fa-question-circle" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="静态市盈率=股价/上一个自然年度的每股预期收益。静态市盈率是以年报数据来计算的"></i></small>
<h4 id="i_sylj">-</h4>
</div>
<div class="col-xs-2">
<small class="stats-label gray-txt">流通股 <i class="fa fa-question-circle" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="流通股是指上市公司股份中，可以在交易所流通的股份数量"></i></small>
<h4 id="i_ltg">-</h4>
</div>
<div class="col-xs-2">
<small class="stats-label gray-txt">流通市值 <i class="fa fa-question-circle" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="流通市值是指在某一特定时间内，当时可以交易的流通股股数乘以当时每股价格所得到的流通股票总价格"></i></small>
<h4 id="i_lz">-</h4>
</div>
</div>
</div>
<div class="ibox-content tooltip-demo">
<div class="row">
<div class="col-xs-2">
<small class="stats-label gray-txt">每股净资产 <i class="fa fa-question-circle" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="每股净资产= 股东权益总额 /股本总股数。这一指标反映每股股票所拥有的资产现值。每股净资产越高，股东拥有的每股资产价值越多；每股净资产越少，股东拥有的每股资产价值越少。通常每股净资产越高越好。 "></i></small>
<h4 id="i_jzc">-</h4>
</div>
<div class="col-xs-2">
<small class="stats-label gray-txt">净资产收益率 <i class="fa fa-question-circle" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="净资产收益率大约是15%—30%之间比较好。净资产收益率是衡量上市公司盈利能力的重要指标。是指利润额与平均股东权益的比值，该指标越高，说明投资带来的收益越高;净资产收益率越低，说明企业所有者权益的获利能力越弱"></i></small>
<h4 id="i_syl">-</h4>
</div>
<div class="col-xs-2">
<small class="stats-label gray-txt">市净率 <i class="fa fa-question-circle" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="市净率，它等于公司股票市值与账面净资产或股东权益之比"></i></small>
<h4 id="i_sjl">-</h4>
</div>
<div class="col-xs-2">
<small class="stats-label gray-txt">市销率 <i class="fa fa-question-circle" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="市销率是最基本的乘数，等于总市值除以企业的主营业务收入。"></i></small>
<h4 id="i_sxl">-</h4>
</div>
<div class="col-xs-2">
<small class="stats-label gray-txt">总股本 <i class="fa fa-question-circle" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="总股本包括新股发行前的股份和新发行的股份的数量的总和"></i></small>
<h4 id="i_zgb">-</h4>
</div>
<div class="col-xs-2">
<small class="stats-label gray-txt">总市值 <i class="fa fa-question-circle" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="总市值是指在某一特定时间内，总股本数量乘以当时的每股价格所得到股票价值"></i></small>
<h4 id="i_zz">-</h4>
</div>
</div>
</div>
<div class="ibox-content" id="i_hxtc">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row wrapper border-bottom white-bg page-heading">
<div class="wrapper ">
<h2>日线</h2>
<div class="col-lg-12">
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="dayLineChart" style="width: 100%;height:320px;"></div>
</div>
</div>
</div>
<div class="row wrapper border-bottom white-bg page-heading">
<div class="wrapper ">
<h2>时线</h2>
<div class="col-lg-12">
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="timeLineChart" style="width: 100%;height:320px;"></div>
</div>
</div>
</div>
<div class="row wrapper border-bottom white-bg page-heading">
<div class="wrapper ">
<h2>资金流</h2>
<div class="col-lg-12">
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="ziJinChart" style="width: 100%;height:320px;"></div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="loadingModal" backdrop="static" keyboard="false">
<div style="width: 200px;height:100px; z-index: 20000; position: absolute; text-align: center; left: 50%; top: 50%;margin-left:-100px;margin-top:-10px">
<div class="progress progress-striped active"
style="margin-bottom: 0;height:50px; text-align:center;line-height: 50px;font-size:small;">
数据加载中,请稍候......
</div>
</div>
</div>
</div>
<!-- Mainly scripts -->
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/bootstrap.min.js?v=3.4.0"></script>
<script src="js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<!-- Peity -->
<script src="js/plugins/peity/jquery.peity.min.js"></script>
<!-- Custom and plugin javascript -->
<script src="js/hplus.js?v=2.2.0"></script>
<script src="js/plugins/pace/pace.min.js"></script>
<!-- iCheck -->
<script src="js/plugins/iCheck/icheck.min.js"></script>
<!-- Peity -->
<script src="js/demo/peity-demo.js"></script>
<!-- layer javascript -->
<script src="js/plugins/layer/layer.min.js"></script>
<!-- 引入 ECharts 文件 -->
<script src="js/echarts.min.js"></script>
<script src="js/url.js"></script>
<script src="js/date.js"></script>
<script>
$(".sidebar-collapse").load("model/left_menu.html")
$(document).ready(function () {
var code = $.urlGet()['code'];
if (code) {
getCodeInfo(code);
getCodeDayLine(code);
var day = getNowFormatDate();
// console.log(day);
// day = '2020-10-12';
getCodeTimeLineForDay(code, day);
getCodeZiJinForDay(code, day);
}
});
/**
* 获取个股详情
*/
function getCodeInfo(code) {
$.ajax({
type: "post",
url: "/queryCodeInfo",
dataType: "json",
data: {"code": code},
success: function (data) {
// console.log(data)
if (data.code == 1) {
refreshCodeInfoHtml(data.data);
} else {
alert(data.msg);
}
},
error: function (e) {
console.log(e);
},
beforeSend: function () {
layer.load()
},
complete: function () {
layer.closeAll()
}
});
}
/**
* 刷新个股详情的html
* @param data
*/
function refreshCodeInfoHtml(data) {
if (!data) return;
document.title = data.name+data.code;
$("#i_code").html('<a href="http://data.eastmoney.com/stockdata/'+data.code+'.html" target="_blank">'+data.code+'</a>');
$("#i_name").html(data.name);
$("#i_bk").html('<a href="./bankuai.html?bkCode=' + data.bkCode + '&bkName=' + data.bkName + '" target="_blank">' + data.bkName + '</a>');
$("#i_syld").html(data.shiYingLvD/100);
$("#i_sylj").html(data.shiYingLvJ/100);
$("#i_sylt").html(data.shiYingLvT/100);
$("#i_sjl").html(data.shiJingLv/100);
$("#i_sxl").html(data.shiXiaoLv/100);
$("#i_jzc").html(data.meiGuJZC);
$("#i_syl").html(data.jingZCSYLv);
$("#i_zgb").html(formatWan(data.zongGuBen.toString()));
$("#i_zz").html(formatWan(data.zongZhi.toString()));
$("#i_ltg").html(formatWan(data.liuTongGu.toString()));
$("#i_lz").html(formatWan(data.liuZhi.toString()));
if (data.type == 1) {
$("#i_type").html('深证');
} else {
$("#i_type").html('上证');
}
if(data.heXinTiCai){
var arr = data.heXinTiCai.split('<br>');
if(arr.length>0){
var html1 = '';
for (var i = 0; i < arr.length; i++) {
if (i == 0){
var t1 = arr[i].split('</b>');
var bArr = t1[1].split(' ');
var bStr = '';
for (var j = 0; j < bArr.length; j++) {
bStr += '<a href=\'javascript:getBK("'+bArr[j]+'");\'">';
bStr += bArr[j];
bStr += '</a> ';
}
html1 = t1[0] + '</b><br>' + bStr + '<br>';
} else {
html1 += '<br>' + arr[i].replaceAll('</b>', '</b><br>') + '<br>';
}
}
$("#i_hxtc").html(html1);
}
}
}
/**
* 根据板块名称查板块信息
*/
function getBK(bkName) {
$.ajax({
type: "post",
url: "/queryBanKuaiFromName",
dataType: "json",
data: {"bkName": bkName},
success: function (data) {
// console.log(data)
if (data.code == 1) {
// console.log(data.data[0]);
window.open("./bankuai.html?bkCode="+data.data[0].code+"&bkName="+data.data[0].name, "_blank")
} else {
alert(data.msg);
}
},
error: function (e) {
console.log(e);
},
beforeSend: function () {
layer.load()
},
complete: function () {
layer.closeAll()
}
});
}
/**
* 获取个股日线
*/
function getCodeDayLine(code) {
$.ajax({
type: "post",
url: "/queryCodeDayLine",
dataType: "json",
data: {"code": code},
success: function (data) {
// console.log(data)
if (data.code == 1) {
refreshCodeDayLineHtml(data.data);
} else {
alert(data.msg);
}
},
error: function (e) {
console.log(e);
},
beforeSend: function () {
layer.load()
},
complete: function () {
layer.closeAll()
}
});
}
/**
* 刷新日线
*/
function refreshCodeDayLineHtml(data) {
if (!data) return;
var rqList = [];
var perList = [];
var spList = [];
var cjeList = [];
var zfList = [];
for (var i = data.length-1; i >= 0; i--) {
rqList.push(data[i]['riqi']);
perList.push(data[i]['percent']);
spList.push(data[i]['shoupan']);
cjeList.push(data[i]['chengjiaoer']);
zfList.push(data[i]['huanshoulv']);
}
// 基于准备好的dom，初始化echarts实例
var dayLineChart = echarts.init(document.getElementById('dayLineChart'));
// 指定图表的配置项和数据
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
toolbox: {
feature: {
dataView: {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
restore: {show: true},
saveAsImage: {show: true}
}
},
legend: {
data: ['涨幅', '换手率', '价格', '成交量']
},
xAxis: [
{
type: 'category',
data: rqList,
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
type: 'value',
name: '成交量',
axisLabel: {
formatter: '{value}'
}
},
{
type: 'value',
name: '涨幅',
axisLabel: {
formatter: '{value}'
}
},
{
type: 'value',
name: '换手率',
axisLabel: {
formatter: '{value}'
}
},
{
type: 'value',
name: '价格',
axisLabel: {
formatter: '{value}'
}
}
],
series: [
{
name: '涨幅',
type: 'line',
yAxisIndex: 1,
data: perList,
itemStyle: {
normal: {
color: '#cc3a3a',
lineStyle: {
color: '#cc3a3a'
}
}
}
},
{
name: '换手率',
type: 'line',
yAxisIndex: 2,
data: zfList,
itemStyle: {
normal: {
color: '#f19bff',
lineStyle: {
color: '#f19bff'
}
}
}
},
{
name: '价格',
type: 'line',
yAxisIndex: 3,
data: spList,
itemStyle: {
normal: {
color: '#8d9c2f',
lineStyle: {
color: '#8d9c2f'
}
}
}
},
{
name: '成交量',
type: 'bar',
data: cjeList,
itemStyle: {
normal: {
color: '#bccfc9',
lineStyle: {
color: '#bccfc9'
}
}
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
dayLineChart.setOption(option);
}
/**
* 查询个股每日分钟线
*/
function getCodeTimeLineForDay(code, day) {
$.ajax({
type: "post",
url: "/queryCodeTimeLineForDay",
dataType: "json",
data: {"code": code, "day": day},
success: function (data) {
// console.log(data)
if (data.code == 1) {
refreshTimeLineChart(data.data);
} else {
alert(data.msg);
}
},
error: function (e) {
console.log(e);
},
beforeSend: function () {
layer.load()
},
complete: function () {
layer.closeAll()
}
});
}
function refreshTimeLineChart(data) {
if (!data) return;
var info = data[data.length - 1];
console.log(info);
if (!info){
return;
}
$("#i_price").html(info.zuixinjia);
$("#i_zf").html(info.percent);
$("#i_yl").html(info.shiyinglv);
$("#i_jz").html(info.shijinglv);
$("#i_jk").html(info.jinkai);
$("#i_zs").html(info.zuoshou);
$("#i_zg").html(info.zuigao);
$("#i_zd").html(info.zuidi);
if (info.percent > 0) {
$("#i_code").find('a').css('color', '#ff0000');
$("#i_price").css('color', '#ff0000');
$("#i_zf").css('color', '#ff0000');
} else if (info.percent < 0) {
$("#i_code").find('a').css('color', '#2db338');
$("#i_price").css('color', '#2db338');
$("#i_zf").css('color', '#2db338');
}
var rqList = [];
var perList = [];
// var priceList = [];
var hsList = [];
var cjeList = [];
var zfList = [];
var title = '';
for (var i = 0; i < data.length; i++) {
rqList.push(data[i]['shijian'].substring(11, 16));
perList.push(data[i]['percent']);
// priceList.push(data[i]['zuixinjia']);
hsList.push(data[i]['huanshoulv']);
cjeList.push(data[i]['chengjiaoer']);
zfList.push(data[i]['zuixinjia']);
}
// 基于准备好的dom，初始化echarts实例
var timeLineChart = echarts.init(document.getElementById('timeLineChart'));
// 指定图表的配置项和数据
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
toolbox: {
feature: {
dataView: {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
restore: {show: true},
saveAsImage: {show: true}
}
},
legend: {
data: ['涨幅', '换手', '价格', '成交量']
},
xAxis: [
{
type: 'category',
data: rqList,
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
type: 'value',
name: '成交量',
axisLabel: {
formatter: '{value}'
}
},
{
type: 'value',
name: '涨幅',
axisLabel: {
formatter: '{value}'
}
},
{
type: 'value',
name: '价格',
axisLabel: {
formatter: '{value}'
}
},
{
type: 'value',
name: '换手',
axisLabel: {
formatter: '{value}'
}
}
],
series: [
{
name: '涨幅',
type: 'line',
yAxisIndex: 1,
data: perList,
itemStyle: {
normal: {
color: '#cc3a3a',
lineStyle: {
color: '#cc3a3a'
}
}
}
},
{
name: '换手',
type: 'line',
yAxisIndex: 3,
data: hsList,
itemStyle: {
normal: {
color: '#f19bff',
lineStyle: {
color: '#f19bff'
}
}
}
},
{
name: '价格',
type: 'line',
yAxisIndex: 2,
data: zfList,
itemStyle: {
normal: {
color: '#4ba4cc',
lineStyle: {
color: '#4ba4cc'
}
}
}
},
{
name: '成交量',
type: 'bar',
data: cjeList,
itemStyle: {
normal: {
color: '#bccfc9',
lineStyle: {
color: '#bccfc9'
}
}
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
timeLineChart.setOption(option);
}
/**
* 查询个股每日资金流
*/
function getCodeZiJinForDay(code, day) {
$.ajax({
type: "post",
url: "/queryCodeZiJinForDay",
dataType: "json",
data: {"code": code, "day": day},
success: function (data) {
// console.log(data)
if (data.code == 1) {
refreshZiJinChart(data.data);
} else {
alert(data.msg);
}
},
error: function (e) {
console.log(e);
},
beforeSend: function () {
layer.load()
},
complete: function () {
layer.closeAll()
}
});
}
function refreshZiJinChart(data) {
if (!data) return;
var rqList = [];
var zhuList = [];
var chaoList = [];
var daList = [];
var zhongList = [];
var xiaoList = [];
for (var i = 0; i < data.length; i++) {
rqList.push(data[i]['shijian'].substring(11, 16));
zhuList.push(data[i]['level_zhuli_per']);
chaoList.push(data[i]['level_chaoda_per']);
daList.push(data[i]['level_da_per']);
zhongList.push(data[i]['level_zhong_per']);
xiaoList.push(data[i]['level_xiao_per']);
}
// 基于准备好的dom，初始化echarts实例
var ziJinChart = echarts.init(document.getElementById('ziJinChart'));
// 指定图表的配置项和数据
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
toolbox: {
feature: {
dataView: {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
restore: {show: true},
saveAsImage: {show: true}
}
},
legend: {
data: ['主力', '超大', '大', '中', '小']
},
xAxis: [
{
type: 'category',
data: rqList,
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
type: 'value',
name: '占比',
axisLabel: {
formatter: '{value}'
}
}
],
series: [
{
name: '主力',
type: 'line',
data: zhuList,
itemStyle: {
normal: {
color: '#aa1d16',
lineStyle: {
color: '#aa1d16'
}
}
}
},
{
name: '超大',
type: 'line',
data: chaoList,
itemStyle: {
normal: {
color: '#651e58',
lineStyle: {
color: '#651e58'
}
}
}
},
{
name: '大',
type: 'line',
data: daList,
itemStyle: {
normal: {
color: '#8d9c2f',
lineStyle: {
color: '#8d9c2f'
}
}
}
},
{
name: '中',
type: 'line',
data: zhongList,
itemStyle: {
normal: {
color: '#4ba4cc',
lineStyle: {
color: '#4ba4cc'
}
}
}
},
{
name: '小',
type: 'line',
data: xiaoList,
itemStyle: {
normal: {
color: '#358b40',
lineStyle: {
color: '#358b40'
}
}
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
ziJinChart.setOption(option);
}
</script>
</body>
</html>
