<!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">
<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">市净率</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">
<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">市盈率(动)</small>
<h4 id="i_syld">-</h4>
</div>
<div class="col-xs-2">
<small class="stats-label gray-txt">市盈率(静)</small>
<h4 id="i_sylj">-</h4>
</div>
<div class="col-xs-2">
<small class="stats-label gray-txt">市盈率(TTM)</small>
<h4 id="i_sylt">-</h4>
</div>
<div class="col-xs-2">
<small class="stats-label gray-txt">市净率</small>
<h4 id="i_sjl">-</h4>
</div>
<div class="col-xs-2">
<small class="stats-label gray-txt">市销率</small>
<h4 id="i_sxl">-</h4>
</div>
</div>
</div>
<div class="ibox-content">
<div class="row">
<div class="col-xs-2">
<small class="stats-label gray-txt">每股净资产</small>
<h4 id="i_jzc">-</h4>
</div>
<div class="col-xs-2">
<small class="stats-label gray-txt">净资产收益率</small>
<h4 id="i_syl">-</h4>
</div>
<div class="col-xs-2">
<small class="stats-label gray-txt">总股本</small>
<h4 id="i_zgb">-</h4>
</div>
<div class="col-xs-2">
<small class="stats-label gray-txt">总值</small>
<h4 id="i_zz">-</h4>
</div>
<div class="col-xs-2">
<small class="stats-label gray-txt">流通股</small>
<h4 id="i_ltg">-</h4>
</div>
<div class="col-xs-2">
<small class="stats-label gray-txt">流值</small>
<h4 id="i_lz">-</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;
$("#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);
$("#i_sylj").html(data.shiYingLvJ);
$("#i_sylt").html(data.shiYingLvT);
$("#i_sjl").html(data.shiJingLv);
$("#i_sxl").html(data.shiXiaoLv);
$("#i_jzc").html(data.meiGuJZC);
$("#i_syl").html(data.jingZCSYLv);
$("#i_zgb").html(data.zongGuBen);
$("#i_zz").html(data.zongZhi);
$("#i_ltg").html(data.liuTongGu);
$("#i_lz").html(data.liuZhi);
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 = 0; i < data.length; 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]['zhenfu']);
}
// 基于准备好的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: '#4ba4cc',
lineStyle: {
color: '#4ba4cc'
}
}
}
},
{
name: '价格',
type: 'line',
yAxisIndex: 3,
data: spList,
itemStyle: {
normal: {
color: '#8d9c2f',
lineStyle: {
color: '#8d9c2f'
}
}
}
},
{
name: '成交量',
type: 'bar',
data: cjeList,
itemStyle: {
normal: {
color: '#8af2cc',
lineStyle: {
color: '#8af2cc'
}
}
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
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);
$("#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]['zhenfu']);
}
// 基于准备好的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: 2,
data: zfList,
itemStyle: {
normal: {
color: '#4ba4cc',
lineStyle: {
color: '#4ba4cc'
}
}
}
},
{
name: '换手',
type: 'line',
yAxisIndex: 3,
data: hsList,
itemStyle: {
normal: {
color: '#8d9c2f',
lineStyle: {
color: '#8d9c2f'
}
}
}
},
{
name: '成交量',
type: 'bar',
data: cjeList,
itemStyle: {
normal: {
color: '#8af2cc',
lineStyle: {
color: '#8af2cc'
}
}
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
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>
