这里我需要重点说明一下两个html文件，一个是用于登录的login.html，一个是导入主界面的dataImport.html。
一、login.html
这里我们可以看到login界面，使用者(user--权限User表中的用户)必须输入的是username和password，在login.html中将这些值post到 权限系统Hub的cus_auth的op_login()，对用户进行验证。这是导入系统与权限系统的第一次交互。
head关键代码如下：(post到权限系统的一个Url)
function loginsubmit() {
$("#loginError").empty();
var username = $('#username').val();
var password = $('#psw').val();
var department = $('#department').val();
if (username=="") {
$('#loginError').html("<a style='color:red;'>请输入用户名！</a>");
return false;
}
if (!password) {
$('#loginError').html("<a style='color:red;'>请输入密码！</a>");
return false;
}
$.ajax({
type: "POST",
url: 'http://10.5.0.222:80/cus_auth/login/',
contentType:"application/json",
data: JSON.stringify({"username": username, "password": password, "department": department,'userId': '111','departmentName':'局算所','isManager':'0','isModelManager': '1','modelName':['局算所1','局算所2'],'modelCoding': [],'modelEncoding': [],'oneModelEncoding': []}),
dataType: 'json',
xhrFields: {
withCredentials: true //可以传递cookeies
},
crossDomain: true,
cache: false,
success: function (data) {
console.log(data);
console.log(data.getAllResponseHeaders());
if (data.responseJSON.code == "2") {
$("#loginError").html("<a style='color:green;'>用户登录成功！</a>");
document.cookie = "name=" + encodeURIComponent(username);
window.location.href = 'http://127.0.0.1:8000';
}
else if (data.responseJSON.code == "-4") {
$("#loginError").html("<a style='color:red;'>用户名或密码错误！</a>");
}
else {
$("#loginError").html(data.responseJSON.info);
}
},
error: function () {
$('.loginError').html('请求失败，请刷新页面后重试').show();
}
});
return false;
}body关键代码如下：(触发loginsubmit的function )
<body>
<div class="login">
<h1 class="message">数据导入系统</h1>
</br>
<strong style="color:#1b6d85;">{{ nowtime }}</strong>
<div id="loginError"></div>
<form id="loginform" action="" method="POST" enctype="multipart/form-data">
<table style="border-collapse:separate;border-spacing:10px 10px;">
<tr>
<td><label>用户名：</label></td>
<td style="width: 250px"><input type="text" id="username" name="username"/></td>
</tr>
<tr>
<td><label>密码：</label></td>
<td><input type="password" id="psw" name="password"/></td>
</tr>
<tr>
<td><label>部门：</label></td>
<td><input type="text" id="department" name="department"/></td>
</tr>
</table>
<input type="submit" value="login" id="loging" onclick="loginsubmit()">
<hr class="hr20">
</form>
</div>
{% if username_is_empty %}
<script>
$('#loginError').html("<a style='color:red;'>请输入用户名！</a>");
</script>
{% endif %}
{% if password_is_empty %}
<script>
$('#loginError').html("<a style='color:red;'>请输入密码！</a>");
</script>
{% endif %}
{% if password_is_wrong %}
<script>
$('#loginError').html("<a style='color:red;'>用户名或密码错误！</a>");
</script>
{% endif %}
</body>二、dataImport.html
如果权限验证通过的话，即登录的user是合法的，那么跳转到dataImport.html，这个界面所包含的内容就比较多了。一共有两个界面： ①填写任务标签、②导入试验数据。
(一)、填写任务标签(Task_tags)
在一开始，定义字体等就不赘述了，这边定义了几个全局变量如下：
任务标签页部分代码（省略了中间的其他代码），如下：
<div id="wizard" class="swMain myContent" style="margin-top: 20px;border: 1px;">
<div id="step-1">
<label class="StepTitle" style="font-size:1.7em">填写任务标签</label>
<br><br>
<form class="form-horizontal" id="tagsform" action="/api/task/add" method="POST">
{% csrf_token %}
<ul class="from_ul" id="task">
<li>
<label>系统级产品名称：</label>
{{ tf.sys_prod_name }}
</li>
<li>
<label >系统级产品图代号：</label>
{{ tf.sys_prod_graph_code}}
</li>
<li>
<label>系统级产品编号：</label>
{{ tf.sys_prod_code }}
</li>
......
<li>
<label >*试验密级</label>
<select id="id_test_secret_level" name="test_secret_level" style="width: 243px;">
<option value="公开" selected="selected">公开</option>
<option value="内部" >内部</option>
<option value="秘密" >秘密</option>
<option value="机密" >机密</option>
</select>
</li>
<li>
<label>测量日期：</label>
<input type="date" value="2015-12-4" name="date"/>
{{ tf.measure_date }}
</li>
<li>
<label>任务来源：</label>
{{ tf.task_source }}
</li>
<li>
<label >备注：</label>
<span style="visibility: hidden"> tabn </span>
{{ tf.note}}
</li>
</ul>
</form>
</div>
任务标签页的效果图：
(二)、导入试验数据
导入试验数据，这里我们将其分为两类，第一种是结构化数据（即试验数据文件），第二种是非结构化数据（原始数据文件、曲线、图片、视频、实验条件）
首先，数据导入界面的关键前端代码如下：
<div id="loaddata">
<label class="StepTitle" style="font-size:1.7em">导入试验数据</label>
<div id="step-2">
<div id="dataUploader" style="margin-top: 20px">
<h4 style="float: left;margin-top: 20px">试验数据文件</h4>
<span style="float: left;visibility: hidden"> tab </span>
<button style="float: left;margin-bottom: 15px;font-size:14px" id="databrowse" class="btn btn-primary btn-sm ">选择文件</button>
<div class="layui-form-item">
<div class="layui-input-block">
<input type="text" id="layui_loader_select" class="layui-input" readonly="readonly">
</div>
</div>
<input type="hidden" name="leiXing_uploaderP">
<input type="hidden" name="leiXing_uploaderC">
<input name="dataType" type="hidden"/>
<table class="table table-bordered" id="uploadTable">
<thead style="background-color: #CDCDCD">
<tr>
<td>文件名称</td>
<td>文件大小</td>
<td>上传进度</td>
<td>删除</td>
<td>数据类型</td>
<td>选择输入文件</td>
<td>设置密级</td>
</tr>
</thead>
</table>
</div>
<div id="rawdataUploader" style="margin-top: 20px" >
<h4 style="float: left;margin-top: 20px">试验原始数据文件</h4>
</br>
<span style="float: left;visibility: hidden"> tab </span>
<button style="float: left;margin-bottom: 15px;font-size:14px" id="rawdatabrowse" class="btn btn-primary btn-sm ">选择文件</button>
<select style="margin-bottom: 15px;font-size:14px" class="secret" id="rawdata-secret">
</select>
<div class="layui-form-item">
<div class="layui-input-block">
<input type="text" id="layui_select" class="layui-input" readonly="readonly">
</div>
</div>
<input type="hidden" name="leiXingP">
<input type="hidden" name="leiXingC">
<table class="table table-bordered" id="rawdata-uploadTable">
<thead id="test_raw_data" style="background-color: #CDCDCD">
<tr>
<td>文件名称</td>
<td>文件大小</td>
<td>上传进度</td>
<td>删除</td>
</tr>
</thead>
</table>
</div>
<div id="curveUploader" style="margin-top: 20px">
<h4 style="float: left;margin-top: 20px">曲线</h4>
</br>
<span style="float: left;visibility: hidden"> tab </span>
<button id="curvebrowse" style="float: left;margin-bottom: 15px;font-size:14px" class="btn btn-primary btn-sm ">选择文件</button>
<select style="margin-bottom: 15px;font-size:14px" class="secret" id="curve-secret">
</select>
{# xjy-create#}
<div class="layui-form-item">
<div class="layui-input-block">
<input type="text" id="layui_curve_select" class="layui-input" readonly="readonly">
</div>
</div>
<input type="hidden" name="leiXing_curve1">
<input type="hidden" name="leiXing_curve2">
{# xjy-create_end#}
<table class="table table-bordered" id="curve-uploadTable">
<thead style="background-color: #CDCDCD">
<tr>
<td>文件名称</td>
<td>文件大小</td>
<td>上传进度</td>
<td>删除</td>
<td>选择数据文件</td>
<td>选择原始数据</td>
</tr>
</thead>
</table>
</div>
</div>
<div id="step-3">
<div id="imageUploader" style="margin-top: 20px">
<h4 style="float: left;margin-top: 20px">图像</h4>
</br>
<span style="float: left;visibility: hidden"> tab </span>
<button style="float: left;margin-bottom: 15px;font-size:14px" id="imagebrowse" class="btn btn-primary btn-sm ">选择文件</button>
<select style="margin-bottom: 15px;font-size:14px" class="secret" id="image-secret">
</select>
{# xjy-create#}
<div class="layui-form-item">
<div class="layui-input-block">
<input type="text" id="layui_Image_select" class="layui-input" readonly="readonly">
</div>
</div>
<input type="hidden" name="leiXing_Image1">
<input type="hidden" name="leiXing_Image2">
{# xjy-create_end#}
<table class="table table-bordered" id="image-uploadTable">
<thead style="background-color: #CDCDCD">
<tr>
<td>文件名称</td>
<td>文件大小</td>
<td>上传进度</td>
<td>删除</td>
</tr>
</thead>
</table>
</div>
<div id="videoUploader" style="margin-top: 20px">
<h4 style="float: left;margin-top: 20px">视频</h4>
</br>
<span style="float: left;visibility: hidden"> tab </span>
<button style="float: left;margin-bottom: 15px;font-size:14px" id="videobrowse" class="btn btn-primary btn-sm ">选择文件</button>
<select style="margin-bottom: 15px;font-size:14px" class="secret" id="video-secret">
</select>
{# xjy-create#}
<div class="layui-form-item">
<div class="layui-input-block">
<input type="text" id="layui_Video_select" class="layui-input" readonly="readonly">
</div>
</div>
<input type="hidden" name="leiXing_Video1">
<input type="hidden" name="leiXing_Video2">
{# xjy-create_end#}
<table class="table table-bordered" id="video-uploadTable">
<thead style="background-color: #CDCDCD">
<tr>
<td>文件名称</td>
<td>文件大小</td>
<td>上传进度</td>
<td>删除</td>
</tr>
</thead>
</table>
</div>
<div id="conditionUploader">
<h4 style="float: left;margin-top: 20px">试验条件</h4>
</br>
<span style="float: left;visibility: hidden"> tab </span>
<button style="float: left;margin-bottom: 15px;font-size:14px" id="conditionbrowse" class="btn btn-primary btn-sm ">选择文件
</button>
<select style="margin-bottom: 15px;font-size:14px" class="secret" id="condition-secret">
</select>
{# xjy-create#}
<div class="layui-form-item">
<div class="layui-input-block">
<input type="text" id="layui_Condition_select" class="layui-input" readonly="readonly">
</div>
</div>
<input type="hidden" name="leiXing_Condition1">
<input type="hidden" name="leiXing_Condition2">
{# xjy-create_end#}
{# <button id="start_upload5">上传</button>#}
<table class="table table-bordered" id="condition-uploadTable">
<thead style="background-color: #CDCDCD">
<tr>
<td>文件名称</td>
<td>文件大小</td>
<td>上传进度</td>
<td>删除</td>
</tr>
</thead>
</table>
</div>
</div>
<div id="step-4">
{# <h2 class="StepTitle">导入试验数据</h2>#}
<div id="tfUploader" style="margin-top: 20px">
<h4 style="float: left;margin-top: 20px ">TF数据文件</h4>
</br>
<span style="float: left;visibility: hidden"> tab </span>
<button style="float: left;margin-bottom: 15px;font-size:14px" id="tfdatabrowse" class="btn btn-primary btn-sm ">选择文件</button>
<select style="margin-bottom: 15px;font-size:14px" class="secret" id="tfdata-secret">
</select>
<table class="table table-bordered" id="tfuploadTable">
<thead style="background-color: #CDCDCD">
<tr>
<td>文件名称</td>
<td>文件大小</td>
<td>上传进度</td>
<td>删除</td>
</tr>
</thead>
</table>
</div>
</div>
</div>界面效果图如下：
在这里我们需要讲一下我们上传的这个逻辑，首先第一层界面：填写任务标签(task_tags)，第二个界面你可以选择你想要上传的文件，比如你想上传一个图片、一个视频和一个xml文件，那么上传的顺序： 首先是任务标签，然后是结构化数据-->实验原始数据--->曲线--->图像-->视频-->试验条件，这也就是全局变量data1、data2等分别对应着导入数据类型。
拿上传结构化数据为例：
{## uploader--上传结构化数据//#}
var uploader = new plupload.Uploader({
runtimes: 'html5,flash,silverlight,html4',
url: 'uploaddata',
container: document.getElementById('dataUploader'),
browse_button: 'databrowse', //触发文件选择对话框的按钮，为那个元素id
chunk_size: '0',
rename: false,
dragdrop: true,
multi_selection: true,
filters: {
max_file_size: '2gb',
mime_types: [
{title: "doc", extensions: "doc,docx,txt,xls,csv,dat,xlsx"} //上传文件类型
],
prevent_duplicates: true //不允许队列中存在重复文件
},
flash_swf_url: '../static/js/Moxie.swf',
silverlight_xap_url: '../static/js/Moxie.xap'
});
uploader.init();
uploader.bind('FilesAdded', function (uploader, files) {
plupload.each(files, function (file) {
$("#uploadTable").append("<tr id='" + file.id + "tr'><td>" + file.name + "</td><td id='" + file.id + "_size'>" + file.size / 1000 + "kb</td><td id='" + file.id + "_progress'></td><td><button type='button' class='plupload_delete a' id='" + file.id + "btn' onclick=datadel('" + file.id + "')>删除</button> </td><td>" + "<select style='text-overflow:ellipsis;white-space: nowrap;width: 210px' id='" + file.id + "dataType'></select></td><td><select style='text-overflow:ellipsis;white-space: nowrap;width: 110px' id='" + file.id + "choose_input'><option></option></select></td><td><select id='" + file.id + "secret'></select></td></tr>");
$.post("api/task/getDataType", function (data) {
result = data.result;
for (var i = 0; i < result.length; i++) {
type = result[i]["DATA_TYPE"];
if (type != "试验条件" && type != "试验原始数据" && type != "数据文件" && type != "图片" && type != "曲线" && type != "视频" && type != "任务标签" && type != "卫星" && type != "拦截D" && type != "红外TC器") {
options = "<option>" + type + "</option>";
$("#" + file.id + "dataType").append(options);
}
}
$("#" + file.id + "dataType").append('<option>新建数据类型</option>');
$("#" + file.id + "dataType").change(function(){
let val = $(this).val();
if(val=="新建数据类型"){
$(".alert_box").show();
}
})
});
switch ({{ secret_level }}) {
case 1:
$("#" + file.id + "secret").append("<option value='public'>公开</option>");
break;
case 2:
$("#" + file.id + "secret").append("<option value='public'>公开</option> <option value='inside'>内部</option> ");
break;
case 3:
$("#" + file.id + "secret").append("<option value='public'>公开</option> <option value='inside'>内部</option> <option value='secret'>秘密</option>");
break;
case 4:
$("#" + file.id + "secret").append("<option value='public'>公开</option> <option value='inside'>内部</option> <option value='secret'>秘密</option><option value='confidential'>机密</option>");
break;
case 5:
$("#" + file.id + "secret").append("<option value='public'>公开</option> <option value='inside'>内部</option> <option value='secret'>秘密</option><option value='confidential'>机密</option><option value='topSecret'>绝密</option>");
break;
}
for (m = 0; m < uploader.files.length; m++) {
for (i = 0; i < uploader.files.length; i++) {
var flag = false;//记录是否该option已被添加过
if (i != m) {
// window.alert(uploader.files[m].name+"的待添加名字为"+uploader.files[i].name)
for (k = 0; k < document.getElementById(uploader.files[m].id + "choose_input").options.length; k++) {
//window.alert(uploader.files[m].name+"的当前option名字为"+document.getElementById(uploader.files[m].id + "choose_input").options[k].text)9c
if (document.getElementById(uploader.files[m].id + "choose_input").options[k].text == uploader.files[i].name) {
//window.alert("有相同的option，不添加")
flag = true;
break;
}
}
if (!flag) {
$("#" + uploader.files[m].id + "choose_input").append("<option value='" + uploader.files[i].id + "option'>" + uploader.files[i].name + "</option>")
}
}
}
}
for (m = 0; m < curve_uploader.files.length; m++) {
$("#" + curve_uploader.files[m].id + "datafile").append("<option>" + file.name + "</option>")
}
});
});
uploader.bind('FileUploaded', function (up, file, result) {
if (result.response == "success") {
$("#loading-tip").html("").append("<span style='color:#1abc9c'>正在导入试验数据文件，已导入30%...</span>");
window.data1 = "success";
} else {
window.data1 = "fail";
}
console.log(window.data1);
});
uploader.bind('UploadComplete', function (uploader, files) {
if (window.data1 == "success") {
$("#pro").css("width", "30%");
rawdata_uploader.start();
} else {
document.getElementById('loading').style.display = 'none';
$("#wizard").removeClass("mask");
plupload.each(uploader.files, function (file) {
$("#" + file.id + "_progress").html("<img src='../static/img/error.gif'/>导入失败");
});
plupload.each(rawdata_uploader.files, function (file) {
$("#" + file.id + "_progress").html("<img src='../static/img/error.gif'/>导入失败");
});
plupload.each(image_uploader.files, function (file) {
$("#" + file.id + "_progress").html("<img src='../static/img/error.gif'/>导入失败");
});
plupload.each(curve_uploader.files, function (file) {
$("#" + file.id + "_progress").html("<img src='../static/img/error.gif'/>导入失败");
});
plupload.each(video_uploader.files, function (file) {
$("#" + file.id + "_progress").html("<img src='../static/img/error.gif'/>导入失败");
});
plupload.each(condition_uploader.files, function (file) {
$("#" + file.id + "_progress").html("<img src='../static/img/error.gif'/>导入失败");
});
setTimeout(function () {
alert("导入失败，请查看日志");
}, 1000);
}
});
uploader.bind('UploadProgress', function (uploader, file) {
var percent = file.percent;
if (percent == 100) {
$("#" + file.id + "_progress").html("<img src='../static/img/done.gif'/>加载成功");
} else {
$("#" + file.id + "_progress").html("上传中 " + percent + "%");
}
});
uploader.bind('Error', function (uploader, file) {
$("#" + file.id + "_progress").html("<img src='../static/img/error.gif'/>上传失败");
window.data1 = "fail";
document.getElementById('loading').style.display = 'none';
$("#wizard").removeClass("mask");
setTimeout(function () {
alert("导入失败，请查看日志");
}, 1000);
});如果存在结构化数据文件上传的话，post到导入系统后端的view.py中的def assign(request)中，进行入库操作以及 关联Hub进行权限分配工作； 同理，如果同时上传了原始数据文件的话，也是进行post到后台.......代码如下：
{## //赋值定义的全局变量id和task_json//#}
id = window.task_id;
task_json = window.task_json;
{## // 如果上传了结构化数据的话 //#}
if (uploader.files.length > 0) {
for (o = 0; o < uploader.files.length; o++) {
{## //获取cookie中的department、departmentName//#}
console.log(getCookie('department'))
{## //将前端获取的参数 上传到后台view.py中的assign函数//#}
$.post("assign",
{
id: id,
task_json:task_json,
dataType: $("#" + uploader.files[o].id + "dataType").find("option:selected").text(),
dataSecret: $("#" + uploader.files[o].id + "secret").find("option:selected").val(),
{##xjy create#}
class1: $('input[name="leiXing_uploaderP"]').val(),
class2: $('input[name="leiXing_uploaderC"]').val(),
file_name:uploader.files[o].name,
file_size:uploader.files[o].size,
new_datatype: $("input[name='dataType']").val(),
department_id : getCookie('department'),
department_name: getCookie('departmentName')
{#xjy end#}
}
)
}
}
{## // 如果上传了原始数据文件的话 //#}
if (rawdata_uploader.files.length > 0) {
for (o = 0; o < rawdata_uploader.files.length; o++){
$.post("assign",
{
id: id,
{##xjy create#}
task_json:task_json,
rawdata: $("#rawdata-secret").find("option:selected").val(),
class1: $('input[name="leiXingP"]').val(),
class2: $('input[name="leiXingC"]').val(),
file_name : rawdata_uploader.files[o].name,
file_size : rawdata_uploader.files[o].size,
department_id : getCookie('department'),
department_name: getCookie('departmentName')
{#xjy end#}
})
}
console.log("class1 is:")
console.log($('input[name="leiXingC"]').val())
console.log('rawdata_uploader.files[0].name')
console.log(rawdata_uploader.files[0].name)
}
569
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
