Jeesite模块实现：患者管理Demo
Version 1.0
创建并使用数据库
create database `chronic_disease_management_archives`;
use `chronic_disease_management_archives`;
建数据表
数据表建单表/主表模板
create table table_name(
id varchar(64) primary key,
#推荐添加: table_id int(64) not null,
## 添加自己的属性
status char(1),
create_by varchar(64),
create_date datetime,
update_by varchar(64),
update_date datetime,
remarks nvarchar(500)
);
数据表建子表模板
create table table_name(
id varchar(64) primary key,
MainTable_id varchar(64),
#推荐添加: table_id int(64) not null,
## 添加自己的属性
status char(1),
create_by varchar(64),
create_date datetime,
update_by varchar(64),
update_date datetime,
remarks nvarchar(500)
);
患者档案信息表
create table patient(
id varchar(64) primary key, # 档案编号
pati_name varchar(64) ,# 患者姓名
pati_ID varchar(64) , # 身份证号
pati_birth varchar(64) , # 生日
pati_perman varchar(64) , # 常驻类型
pati_height varchar(64) , # 身高
pati_BMI varchar(64) , # BMI
pati_energy varchar(64) , # 每日能量
pati_occupa varchar(64) , # 职业
pati_contact varchar(64) , # 联系人
pati_reside varchar(64) , # 居住的地区
pati_illness varchar(64) , # 慢病
pati_sex varchar(64) , # 性别
pati_telephone varchar(64) , # 联系电话
pati_age varchar(64) , # 年龄
pati_blood varchar(64) , # 血型
pati_weight varchar(64) , # 体重
pati_shape varchar(64) , # 体型
pati_nation varchar(64) , # 民族
pati_work varchar(64) , # 工作单位
pati_address varchar(64) , # 详细地址
pati_diabe_type varchar(64) , # 糖尿病类型
pati_mag_mechan varchar(64) , # 管理机构
pati_state varchar(64) , # 状态
pati_marriage varchar(64) , # 婚姻状况
pati_RH varchar(64) , # RH阴性
pati_waist varchar(64) , # 腰围
pati_work_intsy varchar(64) , # 工作强度
pati_education varchar(64) , # 文化程度
pati_pay varchar(64) , # 医疗支付
pati_last varchar(64) ,
# 上次随访：作为外键——随访管理的随访结果
pati_next varchar(64) ,
# 下次随访：作为外键——下次随访日期
status char(1),
create_by varchar(64),
create_date datetime,
update_by varchar(64),
update_date datetime,
remarks nvarchar(500)
);
糖尿病信息表
create table diabetes(
id varchar(64) primary key,
patient_id varchar(64),
diagno_date varchar(64) , # 确诊日期
ill_age varchar(64) , # 病龄
target varchar(64) , # 控制目标
plan varchar(64) , # 管理计划
symptom varchar(64) , # 目前症状
strategy varchar(64) , # 干预策略
complication varchar(64) , # 并发症
fam_dise varchar(64) , # 家族病史
pati_label varchar(64) , # 患者标签
diab_eat_habit varchar(64) , # 饮食习惯
sleep_habit varchar(64) , # 睡眠习惯
drug_abuse varchar(64) , # 药物滥用史
smoke varchar(64) , # 吸烟情况
drink varchar(64) , # 喝酒频率
exercise varchar(64) , # 锻炼频率
status char(1),
create_by varchar(64),
create_date datetime,
update_by varchar(64),
update_date datetime,
remarks nvarchar(500)
);
病史信息表
create table medical_history(
id varchar(64) primary key,
patient_id varchar(64),
allergy varchar(64) , # 药物过敏史
expose varchar(64) , # 暴露史
genet varchar(64) , # 遗传病史
operation varchar(64) , # 既往史-手术
trauma varchar(64) , # 既往史-外伤
blood_trans varchar(64) , # 输血
his_disease varchar(64) , # 疾病
disabty varchar(64) , # 残疾情况
status char(1),
create_by varchar(64),
create_date datetime,
update_by varchar(64),
update_date datetime,
remarks nvarchar(500)
);
生活信息表
create table live(
id varchar(64) primary key,
patient_id varchar(64),
kitchen varchar(64) , # 厨房排风设施
fuel varchar(64) , # 燃料类型
water varchar(64) , # 饮水
WC varchar(64) , # 厕所
livestock varchar(64) , # 禽畜栏
live_eat_habit varchar(64) , # 饮食习惯
status char(1),
create_by varchar(64),
create_date datetime,
update_by varchar(64),
update_date datetime,
remarks nvarchar(500)
);
功能实现
自定义按钮查询
step 01 设置按钮
<input type="button" class="btn btn-primary btn-sm" value="全部" id="quanbu" />
<input type="button" class="btn btn-danger btn-sm" value="重点" id="zhongdian" onclick="zhongdianchaxun()" />
<input type="button" class="btn btn-warning btn-sm" value="一般" id="yiban" onclick="yibanchaxun()" /><input type="button" class="btn btn-info btn-sm" value="简单" id="jiandan" onclick="jiandanchaxun()" />
<input type="button" class="btn btn-default btn-sm" value="转移" id="zhuanyi" onclick="zhuanyichaxun()" />
-
“全部” 按钮
- 按钮关联触发重置
- 按钮关联触发查询
-
“重点” 按钮（其余同理）
-
按钮触发自定义函数
- 自定义函数：向查询框赋对应值
-
按钮关联触发查询
-
-
隐藏查询框对应 label 和 div
step 02 给查询按钮和重置按钮设置id
<button type="submit" class="btn btn-primary btn-sm" id="chaxun" >${text(‘查询‘)}</button>
<button type="reset" class="btn btn-default btn-sm" id="chongzhi">${text(‘重置‘)}</button>
step 03 设置按钮关联触发
window.onload=function(){
$("#quanbu").click(function(){
$("#chongzhi").trigger(‘click‘);
$("#chaxun").trigger(‘click‘);
});
$("#zhongdian").click(function(){
$("#chaxun").trigger(‘click‘);
});
$("#yiban").click(function(){
$("#chaxun").trigger(‘click‘);
});
$("#jiandan").click(function(){
$("#chaxun").trigger(‘click‘);
});
$("#zhuanyi").click(function(){
$("#chaxun").trigger(‘click‘);
});
}
step 04 自定义函数
注意val()内的值，可以通过生成的网页元素检查获取
function zhongdianchaxun() {
$("#patiState").val("0");
}
function yibanchaxun() {
$("#patiState").val("1");
}
function jiandanchaxun() {
$("#patiState").val("2");
}
function zhuanyichaxun() {
$("#patiState").val("3");
}
附录：一些用到的 jquery 函数
// 该方法用于在网页加载完毕后立刻执行的操作，即当html加载完毕后，立刻执行某个方法
window.onload=function(){ }
// 点击按钮1触发点击按钮2
$("#id01").click(function(){
$("#id02").trigger(‘click‘);
});
/*
也可用于选择下拉框
val()中的值对应的是option的value而非text值
*/
$("#id01").val("0");
数据字典使用
基于弹窗的地图API调用
step 01 前端搭建页面
<div class="col-xs-4">
<div class="form-group">
<label class="control-label col-sm-4" title="">
<span class="required hide">*</span> ${text(‘详细地址‘)}：
<i class="fa icon-question hide"></i>
</label>
<!-- 按钮触发模态框 -->
<input type="button" class="btn btn-default btn-sm" data-toggle="modal"
data-target="#myModal" value="请选择您的详细地址 " style="width:250px;" id="dizhi01"/>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">请选择您的详细地址</h4>
</div>
<div class="modal-body">
<iframe id="map_frame" src="manbingmap"></iframe>
<div class="col-sm-8"><br>
<#form:input path="patiAddress" maxlength="64" class="form-control"/>
</div>
<div class="modal-footer">
<input type="button" class="btn btn-default"
data-dismiss="modal" value="关闭" id="guanbi"/>
<input type="button" class="btn btn-primary"
value="提交更改" id="tijiaogenggai"/>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
</div>
</div>
</div>
step 02 准备内联网页
- 内联网页代码
<!doctype html>
<html>
<head>
<title>输入提示后查询</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=50509607507600a25b22befcd53a1747&plugin=AMap.Autocomplete,AMap.PlaceSearch,AMap.Geocoder"></script>
<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="container"></div>
<div id="myPageTop">
<table>
<tr>
<td>
<label>请输入关键字：</label>
</td>
</tr>
<tr>
<td>
<input id="tipinput"/>
</td>
</tr>
<tr>
<td>
<div class="input-item-prepend">
<span class="input-item-text">经纬度</span>
</div>
<input id=‘lnglat‘ class="disadd" type="text" disabled>
</td>
</tr>
<tr>
<td>
<div class="input-item-prepend">
<span class="input-item-text" >地址</span>
</div>
<input id=‘address‘ class="disadd" type="text" disabled>
</td>
</tr>
</table>
</div>
<script type="text/javascript">
//地图加载
var map = new AMap.Map("container", {
resizeEnable: true
});
//输入提示
var autoOptions = {
input: "tipinput"
};
var auto = new AMap.Autocomplete(autoOptions);
var placeSearch = new AMap.PlaceSearch({
map: map
}); //构造地点查询类
AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发
function select(e) {
placeSearch.setCity(e.poi.adcode);
placeSearch.search(e.poi.name); //关键字查询查询
}
var geocoder = new AMap.Geocoder({
city: "010", //城市设为北京，默认：“全国”
radius: 1000 //范围，默认：500
});
var marker = new AMap.Marker();;
function regeoCode() {
var lnglat = document.getElementById(‘lnglat‘).value.split(‘,‘);
map.add(marker);
marker.setPosition(lnglat);
geocoder.getAddress(lnglat, function(status, result) {
if (status === ‘complete‘&&result.regeocode) {
var address = result.regeocode.formattedAddress;
document.getElementById(‘address‘).value = address;
}else{ }
});
}
map.on(‘click‘,function(e){
document.getElementById(‘lnglat‘).value = e.lnglat;
regeoCode();
})
document.getElementById("regeo").onclick = regeoCode;
document.getElementById(‘lnglat‘).onkeydown = function(e) {
if (e.keyCode === 13) {
regeoCode();
return false;
}
return true;
};
</script>
</div>
</body>
</html>
-
API调用分析
-
主要解决两个API怎么复合使用的问题
-
开发文档：
-
-
-
输入提示后查询
-
<!doctype html> <html> <head> <title>输入提示后查询</title> <link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/> <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=您申请的key值"></script> </head> <body> <div id="container"></div> <div id="myPageTop"> <table> <tr> <td> <label>请输入关键字：</label> </td> </tr> <tr> <td> <input id="tipinput"/> </td> </tr> </table> </div> <script type="text/javascript"> //地图加载 var map = new AMap.Map("container", { resizeEnable: true }); //输入提示 var autoOptions = { input: "tipinput" }; AMap.plugin([‘AMap.PlaceSearch‘,‘AMap.AutoComplete‘], function(){ var auto = new AMap.AutoComplete(autoOptions); var placeSearch = new AMap.PlaceSearch({ map: map }); //构造地点查询类 auto.on("select", select);//注册监听，当选中某条记录时会触发 function select(e) { placeSearch.setCity(e.poi.adcode); placeSearch.search(e.poi.name); //关键字查询查询 } }); </script> </body> </html>
-
-
地理/逆地理编码
-
-
<!doctype html> <html> <head> <title>逆地理编码(经纬度->地址)</title> <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/> <style> html,body,#container{ height:100%; width:100%; } .btn{ width:10rem; margin-left:6.8rem; } </style> </head> <body> <div id="container"></div> <div class=‘info‘>输入或点击地图获取经纬度。</div> <div class="input-card" style=‘width:28rem;‘> <label style=‘color:grey‘>逆地理编码，根据经纬度获取地址信息</label> <div class="input-item"> <div class="input-item-prepend"><span class="input-item-text">经纬度</span></div> <input id=‘lnglat‘ type="text" value=‘116.39,39.9‘> </div> <div class="input-item"> <div class="input-item-prepend"><span class="input-item-text" >地址</span></div> <input id=‘address‘ type="text" disabled> </div> <input id="regeo" type="button" class="btn" value="经纬度 -> 地址" > </div> <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script> <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=您申请的key值&plugin=AMap.Geocoder"></script> <script type="text/javascript"> var map = new AMap.Map("container", { resizeEnable: true }); var geocoder = new AMap.Geocoder({ city: "010", //城市设为北京，默认：“全国” radius: 1000 //范围，默认：500 }); var marker = new AMap.Marker();; function regeoCode() { var lnglat = document.getElementById(‘lnglat‘).value.split(‘,‘); map.add(marker); marker.setPosition(lnglat); geocoder.getAddress(lnglat, function(status, result) { if (status === ‘complete‘&&result.regeocode) { var address = result.regeocode.formattedAddress; document.getElementById(‘address‘).value = address; }else{ log.error(‘根据经纬度查询地址失败‘) } }); } map.on(‘click‘,function(e){ document.getElementById(‘lnglat‘).value = e.lnglat; regeoCode(); }) document.getElementById("regeo").onclick = regeoCode; document.getElementById(‘lnglat‘).onkeydown = function(e) { if (e.keyCode === 13) { regeoCode(); return false; } return true; }; </script> </body> </html>
-
-
合并注意：
- 地图初始化只需要一次，需要在另一个页面中进行删除
-
加入网页：需要使用内联标签
-
部署到服务器时，src不能是静态路径，需写controller中@RequestMapping映射的路径
-
step 03 编写controller层
@RequestMapping(value = {"manbingmap", ""})
public String manbingmap(Mbpatient mbpatient, Model model) {
model.addAttribute("mbpatient", mbpatient);
return "modules/patient/manbing_map";
}