每周总结
本周完成了老年人能力评估系统的原型设计
系统功能概述：
1、老年人注册或者信息导入；
2、老年人能力定期评估；
3、能力评估数据多条件查询；
4、能力数据统计；
5、能力数据导出。
页面设计主要以html来展示，加上layui的相关css和js
主要模块有信息导入（分为单个导入和批量导入），导入的信息内容有评估基本信息表、被评估者基本信息表、信息提供者基本信息表。对导入的信息数据进行评估，评估分为4种形式，有日常生活状态、精神状态、感知与沟通、社会实践，4种评估方式组成。所有表的内容设计都将参照《老年人能力评估MZT039-2013民政部标准》来完成相关设计。进行评估时可以设置不同的筛选条件，来进行不同批次的评估。评估的状态有未评估、一轮评估、二轮评估等等，这将是分不同批次评估的条件。
评估完成后，数据将会在后台数据库中进行更新，便于下个模块的信息查询。查询的方式设置了两种，一种是树形结构查询；另一种是简单的多条件查询。查询的数据将以数据表格的形式返回到前端。表格中有查看评估的一列。点击按钮即可查看完整的评估信息。
能力数据统计，将根据评估的不同能力分数和等级进行统计分析，生成不同的数据图表。
项目结构如下：
页面代码（部分）如下：
信息导入：
评估基本信息表导入
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>评估基本信息</title> <link rel="stylesheet" href="../../plugins/element-ui/index.css"> <link rel="stylesheet" href="../../plugins/layui-v2.7.6/layui/css/layui.css"> <script src="../plugins/element-ui/index.js"></script> </head> <body> <div class="layui-layout layui-layout-admin"> <div class="layui-header"> <div class="layui-logo layui-hide-xs layui-bg-black">老年人能力评估系统</div> <!-- 头部区域（可配合layui 已有的水平导航） --> <ul class="layui-nav layui-layout-right"> <li class="layui-nav-item layui-hide layui-show-md-inline-block"> <a href="javascript:;"> <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img"> tester </a> <dl class="layui-nav-child"> <dd><a href="">Your Profile</a></dd> <dd><a href="">Settings</a></dd> <dd><a href="">Sign out</a></dd> </dl> </li> <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect> <a href="javascript:;"> <i class="layui-icon layui-icon-more-vertical"></i> </a> </li> </ul> </div> <div class="layui-side layui-bg-black"> <div class="layui-side-scroll"> <!-- 左侧导航区域（可配合layui已有的垂直导航） --> <ul class="layui-nav layui-nav-tree"> <li class="layui-nav-item layui-nav-itemed"> <a href="javascript:;">信息导入</a> <dl class="layui-nav-child"> <dd> <a href="javascript:;">单个导入</a> <dl class="layui-nav-child"> <dd><a href="evaluate.html">评估基本信息表</a></dd> <dd><a href="oldpeople.html">被评估者基本信息表</a></dd> <dd><a href="linkman.html">信息提供者及联系人表</a></dd> </dl> </dd> <dd><a href="">批量导入</a></dd> </dl> </li> <li class="layui-nav-item"> <a href="javascript:;">能力评估</a> <dl class="layui-nav-child"> <dd><a href="../evaluate/dayevaluate.html">日常生活活动评估</a></dd> <dd><a href="../evaluate/mindevaluate.html">精神状态评估</a></dd> <dd><a href="../evaluate/senseevaluate.html">感知觉与沟通评估</a></dd> <dd><a href="../evaluate/societyevaluate.html">社会参与评估</a></dd> </dl> </li> <li class="layui-nav-item"> <a href="../query/query.html">评估数据查询</a> </li> <li class="layui-nav-item"> <a href="../count/count.html">能力数据统计</a> </li> <li class="layui-nav-item"> <a href="">评估结果导出</a> </li> </ul> </div> </div> <div class="layui-body"> <!-- 内容主体区域 --> <div style="padding: 15px;"> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;"> <legend>评估基本信息表</legend> </fieldset> <div class="layui-panel" style="padding: 15px"> <form class="layui-form" action=""> <div class="layui-form-item"> <label class="layui-form-label">评估编号</label> <div class="layui-input-inline"> <input type="text" name="evaNo" lay-verify="title" autocomplete="off" placeholder="请填写评估编号" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">评估日期</label> <div class="layui-input-inline"> <input type="text" name="evaDate" id="date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" placeholder="请填写评估日期" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">评估原因</label> <div class="layui-input-block"> <input type="radio" name="evaReason" value="1 接受服务前初评 " title= "1 接受服务前初评"> <input type="radio" name="evaReason" value="2 接受服务后的常规评估" title="2 接受服务后的常规评估"> <input type="radio" name="evaReason" value="3 状况发生变化后的即时评估" title="3 状况发生变化后的即时评估"> <input type="radio" name="evaReason" value="4 因评估结果有疑问进行的复评 " title="4 因评估结果有疑问进行的复评"> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button> </div> </div> </form> </div> </div> </div> <div class="layui-footer"> <!-- 底部固定区域 --> 底部固定区域 </div> </div> <script src="../../plugins/vue/vue.js"></script> <script src="../../plugins/layui-v2.7.6/layui/layui.js"></script> <script src="../../plugins/element-ui/index.js"></script> <script> layui.use(['element', 'form','layedit', 'laydate', 'layer', 'util'], function () { var element = layui.element, form = layui.form, layer = layui.layer ,layedit = layui.layedit ,laydate = layui.laydate ,util = layui.util ,$ = layui.$; //头部事件 util.event('lay-header-event', { //左侧菜单事件 menuLeft: function(othis){ layer.msg('展开左侧菜单的操作', {icon: 0}); } ,menuRight: function(){ layer.open({ type: 1 ,content: '<div style="padding: 15px;">处理右侧面板的操作</div>' ,area: ['260px', '100%'] ,offset: 'rt' //右上角 ,anim: 5 ,shadeClose: true }); } }); //一些事件触发 element.on('tab(demo)', function (data) { console.log(data); }); //日期 laydate.render({ elem: '#date' }); laydate.render({ elem: '#date1' }); //创建一个编辑器 var editIndex = layedit.build('LAY_demo_editor'); //自定义验证规则 form.verify({ title: function(value){ if(value.length < 5){ return '标题至少得5个字符啊'; } } ,pass: [ /^[\S]{6,12}$/ ,'密码必须6到12位，且不能出现空格' ] ,content: function(value){ layedit.sync(editIndex); } }); //监听指定开关 form.on('switch(switchTest)', function(data){ layer.msg('开关checked：'+ (this.checked ? 'true' : 'false'), { offset: '6px' }); layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis) }); //监听提交 form.on('submit(demo1)', function(data){ layer.alert(JSON.stringify(data.field), { title: '最终的提交信息' }) axios({url:'/eva',method:'post',data}).then((res)=>{ layer.alert(res.data) }) return false; }); //表单赋值 layui.$('#LAY-component-form-setval').on('click', function(){ form.val('example', { "username": "贤心" // "name": "value" ,"password": "123456" ,"interest": 1 ,"like[write]": true //复选框选中状态 ,"close": true //开关状态 ,"sex": "女" ,"desc": "我爱 layui" }); }); //表单取值 layui.$('#LAY-component-form-getval').on('click', function(){ var data = form.val('example'); alert(JSON.stringify(data)); }); } ); new Vue({ }) </script> </body> </html>
批量导入（文件上传）：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>批量上传信息</title> <link rel="stylesheet" href="../../plugins/element-ui/index.css"> <link rel="stylesheet" href="../../plugins/layui-v2.7.6/layui/css/layui.css"> <script src="../plugins/element-ui/index.js"></script> </head> <body> <div class="layui-layout layui-layout-admin"> <div class="layui-header"> <div class="layui-logo layui-hide-xs layui-bg-black">老年人能力评估系统</div> <!-- 头部区域（可配合layui 已有的水平导航） --> <ul class="layui-nav layui-layout-right"> <li class="layui-nav-item layui-hide layui-show-md-inline-block"> <a href="javascript:;"> <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img"> tester </a> <dl class="layui-nav-child"> <dd><a href="">Your Profile</a></dd> <dd><a href="">Settings</a></dd> <dd><a href="">Sign out</a></dd> </dl> </li> <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect> <a href="javascript:;"> <i class="layui-icon layui-icon-more-vertical"></i> </a> </li> </ul> </div> <div class="layui-side layui-bg-black"> <div class="layui-side-scroll"> <!-- 左侧导航区域（可配合layui已有的垂直导航） --> <ul class="layui-nav layui-nav-tree"> <li class="layui-nav-item layui-nav-itemed"> <a href="javascript:;">信息导入</a> <dl class="layui-nav-child"> <dd> <a href="javascript:;">单个导入</a> <dl class="layui-nav-child"> <dd><a href="evaluate.html">评估基本信息表</a></dd> <dd><a href="oldpeople.html">被评估者基本信息表</a></dd> <dd><a href="linkman.html">信息提供者及联系人表</a></dd> </dl> </dd> <dd><a href="">批量导入</a></dd> </dl> </li> <li class="layui-nav-item"> <a href="javascript:;">能力评估</a> <dl class="layui-nav-child"> <dd><a href="../evaluate/dayevaluate.html">日常生活活动评估</a></dd> <dd><a href="../evaluate/mindevaluate.html">精神状态评估</a></dd> <dd><a href="../evaluate/senseevaluate.html">感知觉与沟通评估</a></dd> <dd><a href="../evaluate/societyevaluate.html">社会参与评估</a></dd> </dl> </li> <li class="layui-nav-item"> <a href="../query/query.html">评估数据查询</a> </li> <li class="layui-nav-item"> <a href="../count/count.html">能力数据统计</a> </li> <li class="layui-nav-item"> <a href="">评估结果导出</a> </li> </ul> </div> </div> <div class="layui-body"> <!-- 内容主体区域 --> <div style="padding: 15px;"> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;"> <legend>上传三张信息表</legend> </fieldset> <div class="layui-upload"> <button type="button" class="layui-btn layui-btn-normal" id="testList">选择多文件</button> <div class="layui-upload-list" style="max-width: 1000px;"> <table class="layui-table"> <colgroup> <col> <col width="150"> <col width="260"> <col width="150"> </colgroup> <thead> <tr><th>文件名</th> <th>大小</th> <th>上传进度</th> <th>操作</th> </tr></thead> <tbody id="demoList"></tbody> </table> </div> <button type="button" class="layui-btn" id="testListAction">开始上传</button> </div> </div> </div> <div class="layui-footer"> <!-- 底部固定区域 --> 底部固定区域 </div> </div> <script src="../../plugins/vue/vue.js"></script> <script src="../../plugins/layui-v2.7.6/layui/layui.js"></script> <script src="../../plugins/element-ui/index.js"></script> <script> layui.use(['upload', 'element', 'layer'], function(){ var $ = layui.jquery ,upload = layui.upload ,element = layui.element ,layer = layui.layer; //演示多文件列表 var uploadListIns = upload.render({ elem: '#testList' ,elemList: $('#demoList') //列表元素对象 ,url: 'https://httpbin.org/post' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。 ,accept: 'file' ,multiple: true ,number: 3 ,auto: false ,bindAction: '#testListAction' ,choose: function(obj){ var that = this; var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列 //读取本地文件 obj.preview(function(index, file, result){ var tr = $(['<tr id="upload-'+ index +'">' ,'<td>'+ file.name +'</td>' ,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>' ,'<td><div class="layui-progress" lay-filter="progress-demo-'+ index +'"><div class="layui-progress-bar" lay-percent=""></div></div></td>' ,'<td>' ,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>' ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>' ,'</td>' ,'</tr>'].join('')); //单个重传 tr.find('.demo-reload').on('click', function(){ obj.upload(index, file); }); //删除 tr.find('.demo-delete').on('click', function(){ delete files[index]; //删除对应的文件 tr.remove(); uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选 }); that.elemList.append(tr); element.render('progress'); //渲染新加的进度条组件 }); } ,done: function(res, index, upload){ //成功的回调 var that = this; //if(res.code == 0){ //上传成功 var tr = that.elemList.find('tr#upload-'+ index) ,tds = tr.children(); tds.eq(3).html(''); //清空操作 delete this.files[index]; //删除文件队列已经上传成功的文件 return; //} this.error(index, upload); } ,allDone: function(obj){ //多文件上传完毕后的状态回调 console.log(obj) } ,error: function(index, upload){ //错误回调 var that = this; var tr = that.elemList.find('tr#upload-'+ index) ,tds = tr.children(); tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传 } ,progress: function(n, elem, e, index){ //注意：index 参数为 layui 2.6.6 新增 element.progress('progress-demo-'+ index, n + '%'); //执行进度条。n 即为返回的进度百分比 } }); }); </script> <div id="divlayer" style="display:none"> <div class="layui-panel" style="padding: 15px"> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;"> <legend>日常生活活动评估表</legend> </fieldset> <form class="layui-form" action=""> <div class="layui-form-item"> <label class="layui-form-label">进食</label> <div class="layui-input-block"> <input type="radio" name="sex" value="10" title= "10 分，可独立进食"> <input type="radio" name="sex" value="5" title="5 分， 需部分帮助"> <input type="radio" name="sex" value="0" title="0 分，完全依赖他人"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">洗澡</label> <div class="layui-input-block"> <input type="radio" name="sex" value="5" title= "5 分，独立完成洗澡过程"> <input type="radio" name="sex" value="0" title="0 分， 需他人帮助"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">修饰</label> <div class="layui-input-block"> <input type="radio" name="sex" value="5" title= "5 分，独立完成"> <input type="radio" name="sex" value="0" title="0 分， 需他人帮助"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">穿衣</label> <div class="layui-input-block"> <input type="radio" name="sex" value="10" title= "10 分，可独立完成"> <input type="radio" name="sex" value="5" title="5 分， 需部分帮助"> <input type="radio" name="sex" value="0" title="0 分，完全依赖他人"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">大便失控</label> <div class="layui-input-block"> <input type="radio" name="sex" value="10" title= "10 分，可控制大便"> <input type="radio" name="sex" value="5" title="5 分， 偶尔失控（每周<1 次），或需要他人提示"> <input type="radio" name="sex" value="0" title="0 分，完全失控"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">小便失控</label> <div class="layui-input-block"> <input type="radio" name="sex" value="10" title= "10 分，可控制小便"> <input type="radio" name="sex" value="5" title="5 分， 偶尔失控（每周<1 次），或需要他人提示"> <input type="radio" name="sex" value="0" title="0 分，完全失控，或留置导尿管"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">如厕</label> <div class="layui-input-block"> <input type="radio" name="sex" value="10" title= "10 分，可独立完成"> <input type="radio" name="sex" value="5" title="5 分， 需部分帮助（需他人搀扶去厕所、需他人帮忙冲水或整理衣裤等）"> <input type="radio" name="sex" value="0" title="0 分， 需极大帮助或完全依赖他人"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">床椅转移</label> <div class="layui-input-block"> <input type="radio" name="sex" value="10" title= "15 分，可独立完成"> <input type="radio" name="sex" value="5" title="10 分，需部分帮助（需他人搀扶或使用拐杖）"> <input type="radio" name="sex" value="0" title="5 分， 需极大帮助（较大程度上依赖他人搀扶和帮助）"> <input type="radio" name="sex" value="0" title="0 分， 完全依赖他人"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">平地行走</label> <div class="layui-input-block"> <input type="radio" name="sex" value="10" title= "15 分，可独立在平地上行走 45m"> <input type="radio" name="sex" value="5" title="10 分，需部分帮助（因肢体残疾、平衡能力差、过度衰弱、视力等问题，在一定程度上需他人地搀扶或使用拐杖、助行器等辅助用具）"> <input type="radio" name="sex" value="0" title="5 分， 需极大帮助（因肢体残疾、平衡能力差、过度衰弱、视力等问题，在较大程度上依赖他人搀扶，或坐在轮椅上自行移动）"> <input type="radio" name="sex" value="0" title="0 分， 完全依赖他人"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">总分</label> <div class="layui-input-inline"> <input class="layui-input" name="sex" value=""> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">评级</label> <div class="layui-input-block"> <input type="radio" name="sex" value="10" title= "0 能力完好：总分 100 分"> <input type="radio" name="sex" value="5" title="1 轻度受损：总分 65-95 分）"> <input type="radio" name="sex" value="0" title="2 中度受损：总分 45-60 分"> <input type="radio" name="sex" value="0" title="3 重度受损：总分≤40 分"> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button> </div> </div> </form> </div> </div> </body> </html>
社会参与评估：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>社会参与评估</title> <link rel="stylesheet" href="../../plugins/layui-v2.7.6/layui/css/layui.css"> </head> <body> <div class="layui-layout layui-layout-admin"> <div class="layui-header"> <div class="layui-logo layui-hide-xs layui-bg-black">老年人能力评估系统</div> <!-- 头部区域（可配合layui 已有的水平导航） --> <ul class="layui-nav layui-layout-right"> <li class="layui-nav-item layui-hide layui-show-md-inline-block"> <a href="javascript:;"> <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img"> tester </a> <dl class="layui-nav-child"> <dd><a href="">Your Profile</a></dd> <dd><a href="">Settings</a></dd> <dd><a href="">Sign out</a></dd> </dl> </li> <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect> <a href="javascript:;"> <i class="layui-icon layui-icon-more-vertical"></i> </a> </li> </ul> </div> <div class="layui-side layui-bg-black"> <div class="layui-side-scroll"> <!-- 左侧导航区域（可配合layui已有的垂直导航） --> <ul class="layui-nav layui-nav-tree"> <li class="layui-nav-item layui-nav-itemed"> <a href="javascript:;">信息导入</a> <dl class="layui-nav-child"> <dd> <a href="javascript:;">单个导入</a> <dl class="layui-nav-child"> <dd><a href="../importInfo/evaluate.html">评估基本信息表</a></dd> <dd><a href="../importInfo/oldpeople.html">被评估者基本信息表</a></dd> <dd><a href="../importInfo/linkman.html">信息提供者及联系人表</a></dd> </dl> </dd> <dd><a href="../importInfo/tableImport.html">批量导入</a></dd> </dl> </li> <li class="layui-nav-item"> <a href="javascript:;">能力评估</a> <dl class="layui-nav-child"> <dd><a href="dayevaluate.html">日常生活活动评估</a></dd> <dd><a href="mindevaluate.html">精神状态评估</a></dd> <dd><a href="senseevaluate.html">感知觉与沟通评估</a></dd> <dd><a href="societyevaluate.html">社会参与评估</a></dd> </dl> </li> <li class="layui-nav-item"> <a href="../query/query.html">评估数据查询</a> </li> <li class="layui-nav-item"> <a href="../count/count.html">能力数据统计</a> </li> <li class="layui-nav-item"> <a href="">评估结果导出</a> </li> </ul> </div> </div> <div class="layui-body"> <div style="padding: 15px;"> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;"> <legend>老年人社会参与评估</legend> </fieldset> <div class="layui-panel" style="padding: 15px"> <table class="layui-hide" id="test" lay-filter="test"></table> </div> <script type="text/html" id="toolbarDemo"> <div class="layui-btn-container"> <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button> <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button> <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button> </div> </script> <script type="text/html" id="barDemo"> <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> </div> </div> <div class="layui-footer"> <!-- 底部固定区域 --> 底部固定区域 </div> </div> <script src="../../plugins/layui-v2.7.6/layui/layui.js"></script> <script> layui.use(['element', 'form','layedit', 'laydate', 'layer', 'util','table'], function () { var element = layui.element, form = layui.form, layer = layui.layer ,layedit = layui.layedit ,laydate = layui.laydate ,util = layui.util ,table = layui.table ,$ = layui.$; //头部事件 util.event('lay-header-event', { //左侧菜单事件 menuLeft: function(othis){ layer.msg('展开左侧菜单的操作', {icon: 0}); } ,menuRight: function(){ layer.open({ type: 1 ,content: '<div style="padding: 15px;">处理右侧面板的操作</div>' ,area: ['260px', '100%'] ,offset: 'rt' //右上角 ,anim: 5 ,shadeClose: true }); } }); //一些事件触发 element.on('tab(demo)', function (data) { console.log(data); }); //日期 laydate.render({ elem: '#date' }); laydate.render({ elem: '#date1' }); //创建一个编辑器 var editIndex = layedit.build('LAY_demo_editor'); //自定义验证规则 form.verify({ title: function(value){ if(value.length < 5){ return '标题至少得5个字符啊'; } } ,pass: [ /^[\S]{6,12}$/ ,'密码必须6到12位，且不能出现空格' ] ,content: function(value){ layedit.sync(editIndex); } }); //监听指定开关 form.on('switch(switchTest)', function(data){ layer.msg('开关checked：'+ (this.checked ? 'true' : 'false'), { offset: '6px' }); layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis) }); //监听提交 form.on('submit(demo1)', function(data){ layer.alert(JSON.stringify(data.field), { title: '最终的提交信息' }) return false; }); //表单赋值 layui.$('#LAY-component-form-setval').on('click', function(){ form.val('example', { "username": "贤心" // "name": "value" ,"password": "123456" ,"interest": 1 ,"like[write]": true //复选框选中状态 ,"close": true //开关状态 ,"sex": "女" ,"desc": "我爱 layui" }); }); //表单取值 layui.$('#LAY-component-form-getval').on('click', function(){ var data = form.val('example'); alert(JSON.stringify(data)); }); table.render({ elem: '#test' ,url:'../json/table.json' ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板 ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可 title: '提示' ,layEvent: 'LAYTABLE_TIPS' ,icon: 'layui-icon-tips' }] ,title: '用户数据表' ,cols: [[ {type: 'checkbox', fixed: 'left'} ,{field:'id', title:'被评估对象ID', width:150, fixed: 'left', unresize: true, sort: true} ,{field:'username', title:'被评估对象姓名', width:150, edit: 'text'} ,{field:'sex', title:'评估员ID', width:150, edit: 'text', sort: true} ,{field:'city', title:'评估员姓名', width:150} ,{field:'sign', title:'评估状态',width:150,sort: true} ,{field:'experience', title:'更改时间', width:150, sort: true} ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150} ]] ,page: true }); //头工具栏事件 table.on('toolbar(test)', function(obj){ var checkStatus = table.checkStatus(obj.config.id); switch(obj.event){ case 'getCheckData': var data = checkStatus.data; layer.alert(JSON.stringify(data)); break; case 'getCheckLength': var data = checkStatus.data; layer.msg('选中了：'+ data.length + ' 个'); break; case 'isAll': layer.msg(checkStatus.isAll ? '全选': '未全选'); break; //自定义头工具栏右侧图标 - 提示 case 'LAYTABLE_TIPS': layer.alert('这是工具栏右侧自定义的一个图标按钮'); break; }; }); //监听行工具事件 table.on('tool(test)', function(obj){ var data = obj.data; //console.log(obj) if(obj.event === 'edit'){ layer.open({ title:'老年人社会参与评估', type: 1, content:$('#divlayer') }) } }); } ); new Vue({ }) </script> <div id="divlayer" style="display:none"> <div class="layui-panel" style="padding: 15px"> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;"> <legend>社会参与评估表</legend> </fieldset> <form class="layui-form" action=""> <div class="layui-form-item"> <label class="layui-form-label">生活能力</label> <div class="layui-input-block"> <input type="radio" name="sex" value="10" title= "0 分，除个人生活自理外，能料理家务或当家管理事务"> <input type="radio" name="sex" value="5" title="1 分，除个人生活自理外，能做家务，但欠好，家庭事务安排欠条理"> <input type="radio" name="sex" value="0" title="2 分，个人生活能自理；只有在他人帮助下才能做些家务，但质量不"> <input type="radio" name="sex" value="0" title="3 分，个人基本生活事务能自理（如饮食、二便），在督促下可洗漱"> <input type="radio" name="sex" value="0" title="4 分，个人基本生活事务（如饮食、二便）需要部分帮助或完全依赖他人帮助"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">工作能力</label> <div class="layui-input-block"> <input type="radio" name="sex" value="1 配偶 " title= "0 分，原来熟练的脑力工作或体力技巧性工作可照常进行"> <input type="radio" name="sex" value="2 子女 " title="1 分，原来熟练的脑力工作或体力技巧性工作能力有所下降"> <input type="radio" name="sex" value="3 其他亲属" title="2 分，原来熟练的脑力工作或体力技巧性工作明显不如以往，部分遗忘"> <input type="radio" name="sex" value="4 雇佣照顾者" title="3 分，对熟练工作只有一些片段保留，技能全部遗忘"> <input type="radio" name="sex" value="5 其他" title="4 分，对以往的知识或技能全部磨灭"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label"></label> <div class="layui-input-block"> <input type="radio" name="sex" value="1 配偶 " title= "0 分，时间观念（年、月、日、时）清楚；可单独出远门，能很快掌握新环境的方位"> <input type="radio" name="sex" value="2 子女 " title="1 分，时间观念有些下降，年、月、日清楚，但有时相差几天；可单独来往于近街，知道现住地的名称和方位，但不知回家路线"> <input type="radio" name="sex" value="3 其他亲属" title="2 分，时间观念较差，年、月、日不清楚，可知上半年或下半年；只能单独在家附近行动，对现住地只知名称，不知道方位"> <input type="radio" name="sex" value="4 雇佣照顾者" title="3 分，时间观念很差，年、月、日不清楚，可知上午或下午；只能在左邻右舍间串门，对现住地不知名称和方位"> <input type="radio" name="sex" value="5 其他" title="4 分，无时间观念；不能单独外出"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">社会交往能力</label> <div class="layui-input-block"> <input type="radio" name="sex" value="1 配偶 " title= "0 分，参与社会，在社会环境有一定的适应能力，待人接物恰当"> <input type="radio" name="sex" value="2 子女 " title="1 分，能适应单纯环境，主动接触人，初见面时难让人发现智力问题，不能理解隐喻语"> <input type="radio" name="sex" value="3 其他亲属" title="2 分，脱离社会，可被动接触，不会主动待人，谈话中很多不适词句，容易上当受骗"> <input type="radio" name="sex" value="4 雇佣照顾者" title="3 分，勉强可与人交往，谈吐内容不清楚，表情不恰当"> <input type="radio" name="sex" value="5 其他" title="4 分，难以与人接触"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">总分</label> <div class="layui-input-inline"> <input class="layui-input" name="sex" value=""> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">评级</label> <div class="layui-input-block"> <input type="radio" name="sex" value="10" title= "0 能力完好：总分 0-2 分"> <input type="radio" name="sex" value="5" title="1 轻度受损：总分 3-7 分"> <input type="radio" name="sex" value="0" title="2 中度受损：总分 8-13 分"> <input type="radio" name="sex" value="0" title="3 重度受损：总分 14-20 分"> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button> </div> </div> </form> </div> </div> </body> </html>
评估数据查询：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>能力评估数据查询</title> <link rel="stylesheet" href="../../plugins/layui-v2.7.6/layui/css/layui.css"> </head> <body> <div class="layui-layout layui-layout-admin"> <div class="layui-header"> <div class="layui-logo layui-hide-xs layui-bg-black">老年人能力评估系统</div> <!-- 头部区域（可配合layui 已有的水平导航） --> <ul class="layui-nav layui-layout-right"> <li class="layui-nav-item layui-hide layui-show-md-inline-block"> <a href="javascript:;"> <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img"> tester </a> <dl class="layui-nav-child"> <dd><a href="">Your Profile</a></dd> <dd><a href="">Settings</a></dd> <dd><a href="">Sign out</a></dd> </dl> </li> <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect> <a href="javascript:;"> <i class="layui-icon layui-icon-more-vertical"></i> </a> </li> </ul> </div> <div class="layui-side layui-bg-black"> <div class="layui-side-scroll"> <!-- 左侧导航区域（可配合layui已有的垂直导航） --> <ul class="layui-nav layui-nav-tree"> <li class="layui-nav-item layui-nav-itemed"> <a href="javascript:;">信息导入</a> <dl class="layui-nav-child"> <dd> <a href="javascript:;">单个导入</a> <dl class="layui-nav-child"> <dd><a href="../importInfo/evaluate.html">评估基本信息表</a></dd> <dd><a href="../importInfo/oldpeople.html">被评估者基本信息表</a></dd> <dd><a href="../importInfo/linkman.html">信息提供者及联系人表</a></dd> </dl> </dd> <dd><a href="../importInfo/tableImport.html">批量导入</a></dd> </dl> </li> <li class="layui-nav-item"> <a href="javascript:;">能力评估</a> <dl class="layui-nav-child"> <dd><a href="../evaluate/dayevaluate.html">日常生活活动评估</a></dd> <dd><a href="../evaluate/mindevaluate.html">精神状态评估</a></dd> <dd><a href="../evaluate/senseevaluate.html">感知觉与沟通评估</a></dd> <dd><a href="../evaluate/societyevaluate.html">社会参与评估</a></dd> </dl> </li> <li class="layui-nav-item"> <a href="query.html">评估数据查询</a> </li> <li class="layui-nav-item"> <a href="../count/count.html">能力数据统计</a> </li> <li class="layui-nav-item"> <a href="">评估结果导出</a> </li> </ul> </div> </div> <div class="layui-body"> <div style="padding: 15px;"> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;"> <legend>老年人能力评估查询</legend> </fieldset> <div class="layui-row"> <div class="layui-panel layui-col-md2" style="padding: 15px"> <div id="test1" class="demo-tree demo-tree-box"></div> </div> <div class="layui-panel layui-col-md9" style="padding: 15px;margin-left: 10px"> <div class="layui-form" action=""> <div style="margin-bottom: 4px"> 被评估者姓名 <div class="layui-input-inline"> <input type="text" name="title" lay-verify="title" autocomplete="off" class="layui-input"> </div> 被评估者ID <div class="layui-input-inline"> <input type="text" name="title" lay-verify="title" autocomplete="off" class="layui-input"> </div> 更改日期 <div class="layui-input-inline"> <input type="text" name="title" lay-verify="title" autocomplete="off" class="layui-input"> </div> <br> </div> <div> 评估者姓名 <div class="layui-input-inline"> <input type="text" name="title" lay-verify="title" autocomplete="off" class="layui-input"> </div> 评估者ID <div class="layui-input-inline"> <input type="text" name="title" lay-verify="title" autocomplete="off" class="layui-input"> </div> 评估状态 <div class="layui-input-inline"> <input type="text" name="title" lay-verify="title" autocomplete="off" class="layui-input"> </div> <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">查询</button> </div> <div class="layui-panel" style="margin-top: 10px"> <table class="layui-hide" id="test" lay-filter="test"></table> </div> <script type="text/html" id="toolbarDemo"> <div class="layui-btn-container"> <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button> <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button> <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button> </div> </script> <script type="text/html" id="barDemo"> <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> </div> </div> </div> </div> </div> <div class="layui-footer"> <!-- 底部固定区域 --> 底部固定区域 </div> </div> <script src="../../plugins/layui-v2.7.6/layui/layui.js"></script> <script> layui.use(['element', 'form','layedit', 'laydate', 'layer', 'util','table','tree'], function () { var element = layui.element, form = layui.form, layer = layui.layer ,layedit = layui.layedit ,laydate = layui.laydate ,util = layui.util ,table = layui.table ,$ = layui.$ ,tree = layui.tree //模拟数据1 ,data1 = [{ title: '日常生活活动（21）' ,id: 1 ,children: [ { title: '能力完好（6）' ,id: 1001 },{ title: '轻度受损（7）' ,id: 1002 }, { title: '中度受损（5）' , id: 1003 },{ title: '严重受损（3）' ,id: 1004 }] },{ title: '精神状态(21)' ,id: 2 ,children: [{ title: '能力完好（6）' ,id: 1001 },{ title: '轻度受损（7）' ,id: 1002 }, { title: '中度受损（5）' , id: 1003 },{ title: '严重受损（3）' ,id: 1004 }] },{ title: '感知觉与沟通' ,id: 3 ,children: [{ title: '能力完好（6）' ,id: 1001 },{ title: '轻度受损（7）' ,id: 1002 }, { title: '中度受损（5）' , id: 1003 },{ title: '严重受损（3）' ,id: 1004 }] },{ title: '社会参与评估（21）' ,id: 3 ,children: [{ title: '能力完好（6）' ,id: 1001 },{ title: '轻度受损（7）' ,id: 1002 }, { title: '中度受损（5）' , id: 1003 },{ title: '严重受损（3）' ,id: 1004 }] } ] //头部事件 util.event('lay-header-event', { //左侧菜单事件 menuLeft: function(othis){ layer.msg('展开左侧菜单的操作', {icon: 0}); } ,menuRight: function(){ layer.open({ type: 1 ,content: '<div style="padding: 15px;">处理右侧面板的操作</div>' ,area: ['260px', '100%'] ,offset: 'rt' //右上角 ,anim: 5 ,shadeClose: true }); } }); //一些事件触发 element.on('tab(demo)', function (data) { console.log(data); }); //日期 laydate.render({ elem: '#date' }); laydate.render({ elem: '#date1' }); //创建一个编辑器 var editIndex = layedit.build('LAY_demo_editor'); //自定义验证规则 form.verify({ title: function(value){ if(value.length < 5){ return '标题至少得5个字符啊'; } } ,pass: [ /^[\S]{6,12}$/ ,'密码必须6到12位，且不能出现空格' ] ,content: function(value){ layedit.sync(editIndex); } }); //监听指定开关 form.on('switch(switchTest)', function(data){ layer.msg('开关checked：'+ (this.checked ? 'true' : 'false'), { offset: '6px' }); layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis) }); //监听提交 form.on('submit(demo1)', function(data){ layer.alert(JSON.stringify(data.field), { title: '最终的提交信息' }) return false; }); //表单赋值 layui.$('#LAY-component-form-setval').on('click', function(){ form.val('example', { "username": "贤心" // "name": "value" ,"password": "123456" ,"interest": 1 ,"like[write]": true //复选框选中状态 ,"close": true //开关状态 ,"sex": "女" ,"desc": "我爱 layui" }); }); //表单取值 layui.$('#LAY-component-form-getval').on('click', function(){ var data = form.val('example'); alert(JSON.stringify(data)); }); table.render({ elem: '#test' ,url:'../json/table.json' ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板 ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可 title: '提示' ,layEvent: 'LAYTABLE_TIPS' ,icon: 'layui-icon-tips' }] ,title: '用户数据表' ,cols: [[ {type: 'checkbox', fixed: 'left'} ,{field:'id', title:'被评估对象ID', width:150, fixed: 'left', unresize: true, sort: true} ,{field:'username', title:'被评估对象姓名', width:150, edit: 'text'} ,{field:'sex', title:'评估员ID', width:120, edit: 'text', sort: true} ,{field:'sign', title:'评估状态',width:120,sort: true} ,{field:'experience', title:'更改时间', width:120, sort: true} ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:100} ]] ,page: true }); //基本演示 tree.render({ elem: '#test1' ,data: data1 ,click: function(obj){ var data = obj.data; //获取当前点击的节点数据 layer.msg('状态：'+ obj.state + '<br>节点数据：' + JSON.stringify(data)); } }); //监听行工具事件 table.on('tool(test)', function(obj){ var data = obj.data; //console.log(obj) if(obj.event === 'edit'){ layer.open({ title:'老年人日常生活评估', type: 1, content:$('#divlayer') }) } }); } ); new Vue({ }) </script> <div id="divlayer" style="display:none"> </div> </body> </html>
评估数据统计：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>老年人能力评估数据统计</title> <link rel="stylesheet" href="../../plugins/layui-v2.7.6/layui/css/layui.css"> <script src="../../plugins/echarts/echarts.js"></script> <style> #graph1{ height: 500px; width: available; } #graph2{ height: 250px; width: available; } #graph3{ height: 250px; width: available; } </style> </head> <body> <div class="layui-layout layui-layout-admin"> <div class="layui-header"> <div class="layui-logo layui-hide-xs layui-bg-black">老年人能力评估系统</div> <!-- 头部区域（可配合layui 已有的水平导航） --> <ul class="layui-nav layui-layout-right"> <li class="layui-nav-item layui-hide layui-show-md-inline-block"> <a href="javascript:;"> <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img"> tester </a> <dl class="layui-nav-child"> <dd><a href="">Your Profile</a></dd> <dd><a href="">Settings</a></dd> <dd><a href="">Sign out</a></dd> </dl> </li> <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect> <a href="javascript:;"> <i class="layui-icon layui-icon-more-vertical"></i> </a> </li> </ul> </div> <div class="layui-side layui-bg-black"> <div class="layui-side-scroll"> <!-- 左侧导航区域（可配合layui已有的垂直导航） --> <ul class="layui-nav layui-nav-tree"> <li class="layui-nav-item layui-nav-itemed"> <a href="javascript:;">信息导入</a> <dl class="layui-nav-child"> <dd> <a href="javascript:;">单个导入</a> <dl class="layui-nav-child"> <dd><a href="../importInfo/evaluate.html">评估基本信息表</a></dd> <dd><a href="../importInfo/oldpeople.html">被评估者基本信息表</a></dd> <dd><a href="../importInfo/linkman.html">信息提供者及联系人表</a></dd> </dl> </dd> <dd><a href="../importInfo/tableImport.html">批量导入</a></dd> </dl> </li> <li class="layui-nav-item"> <a href="javascript:;">能力评估</a> <dl class="layui-nav-child"> <dd><a href="../evaluate/dayevaluate.html">日常生活活动评估</a></dd> <dd><a href="../evaluate/mindevaluate.html">精神状态评估</a></dd> <dd><a href="../evaluate/senseevaluate.html">感知觉与沟通评估</a></dd> <dd><a href="../evaluate/societyevaluate.html">社会参与评估</a></dd> </dl> </li> <li class="layui-nav-item"> <a href="../query/query.html">评估数据查询</a> </li> <li class="layui-nav-item"> <a href="">能力数据统计</a> </li> <li class="layui-nav-item"> <a href="">评估结果导出</a> </li> </ul> </div> </div> <div class="layui-body"> <div style="padding: 15px;"> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;"> <legend>数据统计</legend> </fieldset> <div class="layui-panel layui-col-md6" style="padding: 15px"> <div id="graph1"></div> </div> <div class=" layui-panel layui-col-md4" style="margin-left: 50px"> <div id="graph2"> </div> </div> <div class=" layui-panel layui-col-md4" style="margin-left: 50px;margin-top: 10px"> <div id="graph3"> </div> </div> </div> </div> <div class="layui-footer"> <!-- 底部固定区域 --> 底部固定区域 </div> </div> <script src="../../plugins/echarts/echarts.js"></script> <script src="../../plugins/echarts/echartsTheme.js"></script> <script> let graph1 = document.getElementById("graph1"); let g1 = echarts.init(graph1); let graph2 = document.getElementById("graph2"); let g2 = echarts.init(graph2); let graph3 = document.getElementById("graph3"); let g3 = echarts.init(graph3); var option1 = { title:{ text:"日常生活活动统计", x:"评估状态", y:"人数", }, tooltip:{ trigger: 'axis' }, legend:{ data:['能力完好','轻度受损','中度受损','重度受损'] }, grid:{ left: '3%', right: '4%', bottom: '3%', containLabel: true }, toolbox: { feature: { saveAsImage: {} } }, xAxis:{ type:'category', boundaryGap: false, data: ['未评估','一轮评估','二轮评估','三轮评估'] }, yAxis:{ type: "value" }, series:[ { name:"功能完好", type:"line", stack: 'Total', data: [7,9,6,4] }, { name:"轻度受损", type:"line", stack: 'Total', data: [9,13,8,7] }, { name:"中度受损", type:"line", stack: 'Total', data: [5,7,6,4] },{ name:"重度受损", type:"line", stack: 'Total', data: [3,2,4,3] }, ] } var option2 = { tooltip:{ trigger: 'axis' }, legend:{ }, grid:{ left: '3%', right: '4%', bottom: '3%', containLabel: true }, toolbox: { feature: { saveAsImage: {} } }, xAxis:{ type:'category', data: ['未评估','一轮评估','二轮评估','三轮评估'] }, yAxis:{ type: "value" }, series:[ { name:"功能完好", type:"bar", stack:'activity', emphasis: { focus: 'series' }, data: [7,9,6,4] }, { name:"轻度受损", type:"bar", stack:'activity', emphasis: { focus: 'series' }, data: [9,13,8,7] }, { name:"中度受损", type:"bar", barWidth:'25%', stack:'activity', emphasis: { focus: 'series' }, data: [5,7,6,4] },{ name:"重度受损", type:"bar", stack:'activity', emphasis: { focus: 'series' }, data: [3,2,4,3] }, ] } var option3 = { tooltip: { trigger: 'item' }, legend: { orient: 'vertical', left: 'left' }, series: [ { name: '第一轮评估', type: 'pie', radius: '50%', data: [ { value: 9, name: '功能完好' }, { value: 13, name: '轻度受损' }, { value: 2, name: '重度受损' }, { value: 7, name: '中度受损' }, ], emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] } option1 && g1.setOption(option1); option2 && g2.setOption(option2); option2 && g3.setOption(option3); </script> </body> </html>
浙公网安备 33010602011771号