<!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">
<ul class="nav" id="side-menu">
<li class="nav-header">
<div class="dropdown profile-element"> <span>
<img alt="image" class="img-circle" src="img/profile_small.jpg"/>
</span>
<a data-toggle="dropdown" class="dropdown-toggle" href="#">
<span class="clear"> <span class="block m-t-xs"> <strong
class="font-bold">SUPER-STOCK</strong>
</span> <span class="text-muted text-xs block">超级管理员</span> </span>
</a>
</div>
<div class="logo-element">
H+
</div>
</li>
<li>
<a href="index.html"><i class="fa fa-th-large"></i> <span class="nav-label">提醒规则</span> </a>
</li>
<li>
<a href="percent.html"><i class="fa fa-bar-chart-o"></i> <span class="nav-label">振幅预览</span></a>
</li>
<li>
<a href="zhuli.html"><i class="fa fa-key"></i> <span class="nav-label">主力资金</span></a>
</li>
</ul>
</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 wrapper border-bottom white-bg page-heading">
<div class="col-lg-10">
<h2>振幅预览</h2>
<ol class="breadcrumb">
<li>
<a href="index.html">主页</a>
</li>
<li>
<a>振幅预览</a>
</li>
</ol>
</div>
<div class="col-lg-2">
</div>
</div>
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row" style="margin-bottom: 10px;">
<div class="col-sm-3">
<select class="form-control" id="days" name="">
<option value="5">近一周</option>
<option value="10">近两周</option>
<option value="15">近三周</option>
<option value="20">近四周</option>
</select>
</div>
<div class="col-sm-9">
<ul class="add-list" style="padding: 0;">
</ul>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="ibox-content" style="overflow: scroll;max-height: 700px;">
<table class="table table-bordered table-striped table-sm">
<thead>
<tr>
<th>#</th>
<th>代码</th>
<th>名称</th>
<th>和值</th>
<th>关注</th>
</tr>
</thead>
<tbody id="code_list">
</tbody>
</table>
</div>
</div>
<div class="col-sm-6">
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="mainDay" style="width: 100%;height:220px;"></div>
<div id="mainValue" style="width: 100%;height:220px;"></div>
<div id="mainTime" style="width: 100%;height:220px;"></div>
<ul class="tag-list" style="padding: 0;">
</ul>
</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>
$(document).ready(function () {
getTempCodes()
getPercentList();
});
var clickTimer = null;
$('#days').change(function () {
getPercentList()
})
/**
* 获取关注列表
*/
function getTempCodes() {
$.ajax({
type: "post",
url: "/queryTempCodes",
dataType: "json",
success: function (data) {
console.log(data)
refreshTempCodes(data.data)
},
error: function (e) {
console.log(e);
},
beforeSend: function () {
layer.load()
},
complete: function () {
layer.closeAll()
}
});
}
/**
* 请求通知列表
*/
function getPercentList() {
var day = $('#days').val()
$.ajax({
type: "post",
url: "/queryDayPercentSum",
dataType: "json",
data: {'days': day},
success: function (data) {
console.log(data)
if (data.code == 1) {
refreshNotifyListHtml(data.data);
} else {
alert(data.msg);
}
},
error: function (e) {
console.log(e);
},
beforeSend: function () {
layer.load()
},
complete: function () {
layer.closeAll()
}
});
}
/**
* 刷新关注列表
*/
function refreshTempCodes(data) {
if (data) {
for (var i = 0; i < data.length; i++) {
addCodeHtml(data[i]['code'], data[i]['name'])
}
}
}
/**
* 刷新列表的html
* @param data
*/
function refreshNotifyListHtml(data) {
var tableHtml = "";
for (var i = 0; i < data.length; i++) {
tableHtml += "<tr>";
tableHtml += "<td>";
tableHtml += (i + 1);
tableHtml += "</td>";
tableHtml += "<td><a class='text-danger' onclick='openCode(\"" + data[i].code + "\"); return false' href=\"javascript:void(0)\" >";
tableHtml += data[i].code;
tableHtml += "</a></td>";
tableHtml += "<td>";
tableHtml += data[i].name;
tableHtml += "</td>";
tableHtml += "<td>";
tableHtml += data[i].percent;
tableHtml += "</td>";
tableHtml += "<td>";
tableHtml += "<a onclick='addCode(\"" + data[i].code + "\",\"" + data[i].name + "\",); return false' href=\"javascript:void(0)\" >[关注]</a>";
tableHtml += "<a target='_blank' href='http://data.eastmoney.com/stockdata/" + data[i].code + ".html' style='margin-left: 10px'>[详情]</a>";
tableHtml += "</td>";
tableHtml += "</tr>";
}
$("#code_list").html(tableHtml);
}
/**
* 获取票的走势线
* @param code
*/
function openCode(code) {
if (clickTimer) {
window.clearTimeout(clickTimer);
clickTimer = null;
}
clickTimer = window.setTimeout(function () {
// your click process code here
$.ajax({
type: "post",
url: "/queryLineFromCode",
dataType: "json",
data: {"code": code},
success: function (data) {
// layer.closeAll()
console.log(data)
if (data.code == 1) {
drawDayLine(data.data.dayLine);
drawValueLine(data.data.dayLine);
drawTimeLine(data.data.timeLine);
drawBanKuai(data.data.banKuai);
} else {
alert(data.msg);
}
},
error: function (e) {
// layer.closeAll()
console.log(e);
},
beforeSend: function () {
layer.load()
},
complete: function () {
layer.closeAll()
}
});
}, 300);
}
/**
* 刷新关注数据到页面
* @param code
*/
function addCodeHtml(code, name) {
var addHtml = ''
addHtml += '<li style="padding: 5px;" ondblclick="removeLi(this, \'' + code + '\'); return false" onclick="openCode(\'' + code + '\'); return false"><button class="btn btn-warning btn-block" >';
addHtml += (code + '<br>' + name);
addHtml += '</button>';
addHtml += '</li>';
$('.add-list').append(addHtml)
}
/**
* 添加关注
* @param code
*/
function addCode(code, name) {
$.ajax({
type: "post",
url: "/addTempCode",
dataType: "json",
data: {"code": code, "name": name},
success: function (data) {
console.log(data)
if (data.code == 1) {
addCodeHtml(code, name);
} else {
alert(data.msg);
}
},
error: function (e) {
console.log(e);
},
beforeSend: function () {
layer.load()
},
complete: function () {
layer.closeAll()
}
});
}
/**
* 删除关注
*
* @param t
* @param code
*/
function removeLi(t, code) {
if (clickTimer) {
window.clearTimeout(clickTimer);
clickTimer = null;
}
$.ajax({
type: "post",
url: "/delTempCode",
dataType: "json",
data: {"code": code},
success: function (data) {
console.log(data)
if (data.code == 1) {
$(t).remove();
} else {
alert(data.msg);
}
},
error: function (e) {
console.log(e);
},
beforeSend: function () {
layer.load()
},
complete: function () {
layer.closeAll()
}
});
}
function drawDayLine(data) {
// console.log(data.length)
var rqList = []
var perList = []
var title = ''
for (var i = data.length - 1; i >= 0; i--) {
rqList.push(data[i]['riqi'])
perList.push(data[i]['percent'])
title = data[i]['name'] + '(' + data[i]['code'] + ')'
}
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('mainDay'));
// 指定图表的配置项和数据
option = {
title: {
text: title + ' - Day Line'
},
tooltip: {
trigger: 'axis',
showContent: true,
},
xAxis: {
type: 'category',
data: rqList
},
yAxis: {
type: 'value'
},
series: [{
name: '振幅',
data: perList,
type: 'line'
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
function drawValueLine(data) {
// console.log(data.length)
var rqList = []
var perList = []
var title = ''
for (var i = data.length - 1; i >= 0; i--) {
rqList.push(data[i]['riqi'])
perList.push(data[i]['shoupan'])
title = data[i]['name'] + '(' + data[i]['code'] + ')'
}
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('mainValue'));
// 指定图表的配置项和数据
option = {
title: {
text: title + ' - Price Line'
},
tooltip: {
trigger: 'axis',
showContent: true,
},
xAxis: {
type: 'category',
data: rqList
},
yAxis: {
type: 'value'
},
series: [{
name: '收盘',
data: perList,
type: 'line'
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
function drawTimeLine(data) {
// console.log(data)
var rqList = []
var perList = []
var title = ''
for (var i = data.length - 1; i >= 0; i--) {
rqList.push(data[i]['shijian'])
perList.push(data[i]['percent'])
title = data[i]['name'] + '(' + data[i]['code'] + ')'
}
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('mainTime'));
// 指定图表的配置项和数据
option = {
title: {
text: title + ' - Time Line'
},
tooltip: {
trigger: 'axis',
showContent: true,
},
xAxis: {
type: 'category',
data: rqList
},
yAxis: {
type: 'value'
},
series: [{
name: '振幅',
data: perList,
type: 'line'
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
function drawBanKuai(data) {
var tagHtml = ''
for (var i = 0; i < data.length; i++) {
tagHtml += '<li style="padding: 5px;" ><button class="btn btn-danger btn-block" >';
tagHtml += data[i]['bkName'];
tagHtml += '</button></li>';
}
$('.tag-list').html(tagHtml)
}
</script>
</body>
</html>
