最近搞基金,感觉仓位管理太麻烦了,自己看现有的平台,感觉太乱了,自己关心的参数比较分散,自己打算写个方便查看,花了半天时间,写了一个管理界面,写了一个大屏分析界面,效果如下:

管理界面前端:layui+jquery

后台:无极低代码(java)

数据库:mysql5.7

服务器:tomcat9.0、redis(开启开关可用)

前端管理页面和后台接口都是通过代码生成的,生成后稍微改动了一下

关注我:下一篇分享大屏代码

基金分析大屏分享https://www.wheart.cn/jijin/jijinopen.html?v=1

管理界面:主要是维护自己购买的基金,包含增删改,模糊多条件检索,批量修改

大屏:根据自己购买的基金获取年份变化趋势,以及大盘板块资金流动去向,这部分数据是通过爬虫实时爬取,也就是最新的数据,与官网同步。

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>基金投入管理</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="../layui/css/layui.css" media="all">
		<script src="../js/moment.min.js"></script>
		<!-- 注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的 -->
		<style type="text/css">
			.layui-form-pane .layui-form-label {
			    width: 150px;
				}
				.layui-form-pane .layui-input-block {
				    margin-left: 150px;
					}
		</style>
	</head>
	<body>
		<fieldset class="layui-elem-field layui-field-title">
			<legend>基金投入管理</legend>
			<form class="layui-form layui-form-pane" style="margin-top: 50px;">
				<div class="layui-form-item">
					<div class='layui-inline'>
						<label class='layui-form-label'>基金名称</label>
						<div class='layui-input-block'>
							<input type='text' name='byname' id='byname' autocomplete='off' class='layui-input' />
						</div>
					</div>
					<div class='layui-inline'>
						<label class='layui-form-label'>基金编码</label>
						<div class='layui-input-block'>
							<input type='text' name='bycode' id='bycode' autocomplete='off' class='layui-input' />
						</div>
					</div>
					<div class='layui-inline'>
						<label class='layui-form-label'>总仓位</label>
						<div class='layui-input-block'>
							<input type='text' name='bytotal' id='bytotal' autocomplete='off' class='layui-input' />
						</div>
					</div>
					<div class='layui-inline'>
						<label class='layui-form-label'>浮盈</label>
						<div class='layui-input-block'>
							<input type='text' name='byfloatingProfitRatio' id='byfloatingProfitRatio'
								autocomplete='off' class='layui-input' />
						</div>
					</div>
					<div class='layui-inline'>
						<label class='layui-form-label'>投入</label>
						<div class='layui-input-block'>
							<input type='text' name='byinvestment' id='byinvestment' autocomplete='off'
								class='layui-input' />
						</div>
					</div>
					<div class='layui-inline'>
						<label class='layui-form-label'>近一年前期高点</label>
						<div class='layui-input-block'>
							<input type='text' name='byprehigh' id='byprehigh' autocomplete='off' class='layui-input' />
						</div>
					</div>
					<div class='layui-inline'>
						<label class='layui-form-label'>近一年前期低点</label>
						<div class='layui-input-block'>
							<input type='text' name='byprelow' id='byprelow' autocomplete='off' class='layui-input' />
						</div>
					</div>
					<div class='layui-inline'>
						<label class='layui-form-label'>当前位置</label>
						<div class='layui-input-block'>
							<input type='text' name='bycurrent' id='bycurrent' autocomplete='off' class='layui-input' />
						</div>
					</div>
					<div class="layui-inline">
						<button type="submit" class="layui-btn layui-btn-normal" lay-submit=""
							lay-filter="searchaction">
							<i class="layui-icon">&#xe615;</i>检索
						</button>
					</div>
				</div>
			</form>
		</fieldset>
		<table class="layui-table" lay-data="{height: 'full-200', cellMinWidth: 80}" id="tab" lay-filter="tabAction">
		</table>
		<div id="laypage"></div>
		<script type="text/html" id="handler">
			<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
			<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		</script>
		<script type="text/html" id="search">
			<button class="layui-btn layui-btn-normal " data-type="add"><i class="layui-icon">&#xe654;</i>新增</button>
			<button class="layui-btn layui-btn-danger " data-type="delbatch"><i class="layui-icon">&#xe640;</i>批量删除</button>
		</script>
		<script id="datefomat" type="text/html" charset="utf-8">
		{{moment(d.creattime).format('YYYY-MM-DD HH:mm:ss')}}
		</script>
		<script type="text/html" id="addhtml" charset="utf-8">
			<fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
				<legend>基金投入<span id='title'></span></legend>
				<form class="layui-form layui-form-pane" style="margin: 20px;" id="addform" lay-filter="addform">
					<div class='layui-block'>
						<label class='layui-form-label'>基金名称</label>
						<div class='layui-input-block'>
							<input type='text' name='name' id='name' maxlength='255' lay-verify='required' autocomplete='off'
								class='layui-input' />
						</div>
					</div>
					<div class='layui-block'>
						<label class='layui-form-label'>基金编码</label>
						<div class='layui-input-block'>
							<input type='text' name='code' id='code' maxlength='255' lay-verify='required' autocomplete='off'
								class='layui-input' />
						</div>
					</div>
					<div class='layui-block'>
						<label class='layui-form-label'>总仓位</label>
						<div class='layui-input-block'>
							<input type='text' name='total' id='total' maxlength='255' lay-verify='required' autocomplete='off'
								class='layui-input' />
						</div>
					</div>
					<div class='layui-block'>
						<label class='layui-form-label'>浮盈</label>
						<div class='layui-input-block'>
							<input type='text' name='floatingProfitRatio' id='floatingProfitRatio' maxlength='10'
								lay-verify='required' autocomplete='off' class='layui-input' />
						</div>
					</div>
					<div class='layui-block'>
						<label class='layui-form-label'>投入</label>
						<div class='layui-input-block'>
							<input type='text' name='investment' id='investment' maxlength='10' lay-verify='required'
								autocomplete='off' class='layui-input' />
						</div>
					</div>
					<div class='layui-block'>
						<label class='layui-form-label'>近一年前期高点</label>
						<div class='layui-input-block'>
							<input type='text' name='prehigh' id='prehigh' maxlength='6' lay-verify='required'
								autocomplete='off' class='layui-input' />
						</div>
					</div>
					<div class='layui-block'>
						<label class='layui-form-label'>近一年前期低点</label>
						<div class='layui-input-block'>
							<input type='text' name='prelow' id='prelow' maxlength='6' lay-verify='required' autocomplete='off'
								class='layui-input' />
						</div>
					</div>
					<div class='layui-block'>
						<label class='layui-form-label'>当前位置</label>
						<div class='layui-input-block'>
							<input type='text' name='current' id='current' maxlength='6' lay-verify='required'
								autocomplete='off' class='layui-input' />
						</div>
					</div>
					<div class="layui-block">
						<input class="layui-hide" type="hidden" name="bycode" id="byupcode" />
						<button type="submit" class="layui-btn layui-btn-normal layui-btn-fluid" style="margin-top: 20px;"
							id="sumudpbtn" lay-submit="" lay-filter="udpaction">修改提交</button>
					</div>
					<div class="layui-block">
						<button type="submit" class="layui-btn layui-btn-normal layui-btn-fluid" style="margin-top: 20px;"
							id="sumaddbtn" lay-submit="" lay-filter="addaction">新增提交</button>
					</div>
				</form>
			</fieldset>
		</script>
		<script src="../layui/layui.all.js" charset="utf-8"></script>
		<script type="text/html" id="floatingProfitRatioTpl">
		  {{#  if(d.floatingProfitRatio >0 ){ }}
		    <span style="color: red">{{ d.floatingProfitRatio }}</span>
		  {{#  } else { }}
		      <span style="color: limegreen;">{{ d.floatingProfitRatio }}</span>
		  {{#  } }}
		</script>
		<script type="text/html" id="countTpl">
		{{#var money=Math.floor(( d.investment*d.floatingProfitRatio *0.01 )* 100) / 100}}
		  {{#  if(money >0 ){ }}
		    <span style="color: red">{{money}}</span>
		  {{#  } else { }}
		      <span style="color: limegreen;">{{money}}</span>
		  {{#  } }}
		</script>		
		<script type="text/html" id="maxTpl">
			 {{#  if(d.current >d.prehigh ){ }}
		       <span style="color: red">当前为最高点</span>
			  {{#  } else { }}
			   <span style="color: limegreen">{{Math.floor(((d.prehigh-d.current)*0.01*d.investment)* 100) / 100}}</span>({{Math.floor(d.prehigh-d.current)* 100 / 100}}%)
			 {{#  } }}
		</script>		
		<script type="text/html" id="minTpl">
			{{#  if(d.current<d.prelow ){ }}
			  <span style="color: limegreen">当前为最低点</span>
			 {{#  } else { }}
			 <span style="color: limegreen">{{Math.floor(((d.prelow-d.current)*0.01*d.investment)* 100) / 100}}</span>({{Math.floor(d.prelow-d.current)* 100 / 100}}%)
			{{#  } }}
		   
		</script>	
			<script type="text/html" id="levelTpl">
				{{# var  level=Math.floor((d.investment/(d.total/10))* 100) / 100}}
				{{#  if(level>7 ){ }}
				   <span style="color:red">{{level}}</span>
				 {{#  } else { }}
				   <span style="color: white">{{level}}</span>
				{{#  } }}
				
			   
			</script>	
		
		<script>
			
			layui.use(['table', 'form', 'laypage', 'layer', 'form', 'layedit', 'laydate'], function() {
				var params = {
					page: 1,
					size: 20
				};
				var table = layui.table,
					laypage = layui.laypage,
					laydate = layui.laydate,
					layer = layui.layer,
					form = layui.form,
					$ = layui.$,
					active,
					serverurl = 'http://localhost:8080/wj/commapi?',
					searchurl = serverurl + 'm=q&k=fundSelect',
					delbturl = serverurl + 'm=u&k=fundDeleteBath',
					updurl = serverurl + 'm=u&k=fundUpdate',
					delurl = serverurl + 'm=u&k=fundDelete',
					addurl = serverurl + 'm=u&k=fundInsert';
				getData();
				laydate.render({
					elem: '#daterange',
					range: '至',
					calendar: true
				});
				form.on('submit(searchaction)', function(data) {
					var ps = data.field;
					for (let k in ps) {
						console.log(ps[k]);
						if (ps[k] != "") params[k] = ps[k];
						if (ps[k] == "") delete params[k];
						if (k == 'daterange') {
							var d = ps[k].split(" 至 ");
							if (d.length != 2) {
								delete params.bystartcreattime;
								delete params.byendcreattime;
								continue
							};
							params.bystartcreattime = d[0];
							params.byendcreattime = d[1]
						}
					}
					getData();
					return false;
				});

				form.on('submit(addaction)', function(data) {
					var ps = data.field;
					adu(addurl, ps);
					return false;
				});
				form.on('submit(udpaction)', function(data) {
					var ps = data.field;
					adu(updurl, ps);
					return false;
				});
				table.on('tool(tabAction)', function(obj) {
					var data = obj.data;
					if (obj.event === 'detail') {
						var html = document.getElementById("addhtml").innerHTML;
						openlayer(html, '80%', '50%');
						form.val('addform', obj.data);
						$('#title').text('查看');
						$('#sumaddbtn').hide();
						$('#sumudpbtn').hide();
					} else if (obj.event === 'del') {
						layer.confirm('真的删除行么', function(index) {
							for (let k in data) {
								data["by" + k] = data[k];
								delete data[k]
							}
							adu(delurl, data);
						});

					} else if (obj.event === 'edit') {
						var html = document.getElementById("addhtml").innerHTML;
						openlayer(html, '80%', '50%');
						$('#title').text('编辑');
						form.val('addform', obj.data);
						$('#sumaddbtn').hide();
						$('#sumudpbtn').show();
						$('#byupcode').val(obj.data.code + "");
					}
				});
				active = {
					delbatch: function() {
						var checkStatus = table.checkStatus('tab'),
							data = checkStatus.data;
						layer.confirm("确定删除这" + data.length + "条数据", function(index) {
							var ids = "";
							for (var i = 0; i < data.length; i++) {
								ids += data[i].code + ","
							};
							if (data.length == 0) {
								msg('请先选择需要删除的数据!', '提示');
								return;
							}
							ids = ids.slice(0, ids.length - 1);
							adu(delbturl, {
								byInInt_codes: ids
							});
						});
					},
					add: function() {
						var html = document.getElementById("addhtml").innerHTML;
						openlayer(html, '80%', '50%');
						$('#title').text('新增');
						$('#sumaddbtn').show();
						$('#sumudpbtn').hide();

					}
				};

				function renderData2tab(datas) {
					table.render({
						elem: '#tab',
						toolbar: '#search',
						title: '基金投入表',
						totalRow: true,
						cols: [
							[
							  {type:'numbers'}
							  ,
							  {type: 'checkbox'}
							  ,
							 {
								field: 'name',
								title: '基金名称',
								unresize: true,
								sort: true,
								 totalRowText: '合计'
							}, {
								field: 'code',
								title: '基金编码',
								unresize: true,
								sort: true,
							}, {
								field: 'total',
								title: '总仓位',
								unresize: true,
								sort: true,
								totalRow: true,
							}, {
								field: 'investment',
								title: '投入',
								unresize: true,
								sort: true,
								totalRow: true,
							}, {
								field: 'level',
								title: '仓位占比',
								unresize: true,
								templet: '#levelTpl',
								style:'background-color: #000; color: #fff;'
							},{
								field: 'floatingProfitRatio',
								title: '当前浮盈(%)',
								unresize: true,
								templet: '#floatingProfitRatioTpl'
							}, {
								field: 'count',
								title: '当前盈利(¥)',
								unresize: true,
								templet: '#countTpl'
							}, {
								field: 'max',
								title: '最大盈利',
								unresize: true,
								templet: '#maxTpl'
							}, {
								field: 'min',
								title: '最大亏损',
								unresize: true,
								templet: '#minTpl'
							},   {
								field: 'prehigh',
								title: '近一年前期高点',
								unresize: true,
								sort: true,
							}, {
								field: 'prelow',
								title: '近一年前期低点',
								unresize: true,
								sort: true,
							}, {
								field: 'current',
								title: '当前位置',
								unresize: true,
								sort: true,
							}, {
								fixed: 'right',
								fixed: 'right',
								width: 200,
								title: '操作',
								toolbar: '#handler'
							}]
						],
						page: false,
						data: datas.data.list,
						limit: params.size,
						done: function(json, curr, count) {
							layer.closeAll();
							laypage.render({
								elem: 'laypage',
								count: datas.data.toatalsize,
								curr: params.page,
								limit: params.size,
								layout: ['prev', 'page', 'next', 'skip', 'count', 'limit'],
								jump: function(obj, first) {
									if (!first) {
										params.page = obj.curr;
										params.size = obj.limit;
										getData(params);
									}
								}
							})
						}
					});
				}

				function getData() {
					$.ajax({
						url: searchurl,
						type: 'post',
						data: params,
						async: false,
						success: function(returndata) {
							var strjson = JSON.parse(returndata);
							params.page = strjson.data.page;
							params.size = strjson.data.size;
							if (strjson.code == 20000) {
								renderData2tab(strjson);
								bindListener();
							} else {
								msg(strjson.msg + '!', '提示');
							}
						},
					});
				};

				function adu(url, ps) {
					$.ajax({
						url: url,
						type: 'post',
						data: ps,
						async: false,
						success: function(returndata) {
							var strjson = JSON.parse(returndata);
							if (strjson.code == 10013) {
								getData();
							}
							msg(strjson.msg + '!', '提示');
						},
					});
				};

				function bindListener() {
					$('.layui-btn').on('click', function() {
						var type = $(this).data('type');
						active[type] ? active[type].call(this) : '';
					});
				};

				function openlayer(html, height, width) {
					layer.open({
						type: 1,
						offset: '100px',
						title: false,
						area: [width, height],
						closeBtn: 0,
						shadeClose: true,
						anim: 1,
						skin: 'yourclass',
						content: html
					});
				};

				function msg(msg, title) {
					layer.alert(msg, {
						title: title
					}, function() {
						layer.closeAll();
					});
				}
			});
		</script>
	</body>
</html>

Logo

智屏生态联盟致力于大屏生态发展,利用大屏快应用技术降低开发者开发、发布大屏应用门槛

更多推荐