[程序员买基金被套后]我如何利用“无极”低代码平台花半天时间写一个增、删、改、查、批量处理的基金仓位管理功能和大屏分析系统（管理端前端代码）
最近搞基金，感觉仓位管理太麻烦了，自己看现有的平台，感觉太乱了，自己关心的参数比较分散，自己打算写个方便查看，花了半天时间，写了一个管理界面，写了一个大屏分析界面，效果如下：管理界面前端：layui+jquery后台：无极低代码（java）数据库：mysql5.7服务器：tomcat9.0、redis(开启开关可用)前端管理页面和后台接口都是通过代码生成的，生成后稍微改动了一下关注我：下一篇分享大
·
最近搞基金，感觉仓位管理太麻烦了，自己看现有的平台，感觉太乱了，自己关心的参数比较分散，自己打算写个方便查看，花了半天时间，写了一个管理界面，写了一个大屏分析界面，效果如下：
管理界面前端：layui+jquery
后台：无极低代码（java）
数据库：mysql5.7
服务器：tomcat9.0、redis(开启开关可用)
前端管理页面和后台接口都是通过代码生成的，生成后稍微改动了一下
关注我：下一篇分享大屏代码
管理界面：主要是维护自己购买的基金，包含增删改，模糊多条件检索，批量修改
大屏：根据自己购买的基金获取年份变化趋势，以及大盘板块资金流动去向，这部分数据是通过爬虫实时爬取，也就是最新的数据，与官网同步。
<!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"></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"></i>新增</button>
<button class="layui-btn layui-btn-danger " data-type="delbatch"><i class="layui-icon"></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>
智屏生态联盟致力于大屏生态发展，利用大屏快应用技术降低开发者开发、发布大屏应用门槛
更多推荐
791
3
0- 0
- 分享
所有评论(0)
您需要登录才能发言
加载更多
已为社区贡献1条内容
