528 lines
22 KiB
JavaScript
528 lines
22 KiB
JavaScript
|
||
var vm;
|
||
var reportdata;
|
||
$(function () {
|
||
$("#host_header").find(".button").remove();
|
||
$("#spanUserName").remove();
|
||
|
||
checkBrowser();
|
||
|
||
if (teamintelligence) {
|
||
$('.assettr').remove();
|
||
$(".assettrmobile").remove();
|
||
}
|
||
vm = new Vue({
|
||
el: '#divreport',
|
||
data: {
|
||
report: {
|
||
Asset: {},
|
||
Template: {},
|
||
ReportLayout: {}
|
||
}
|
||
},
|
||
methods: {
|
||
reload: function (data) {
|
||
this.report = data;
|
||
}
|
||
}
|
||
});
|
||
GetInspectionReport();
|
||
});
|
||
|
||
function checkBrowser() {
|
||
if (isMobile()) {
|
||
$(".logo").remove();
|
||
$(".logoright").remove();
|
||
$(".headernote").remove();
|
||
$("#host_header").css("text-align", "left").css("min-width", "unset");
|
||
|
||
$("#divreport").css("width", "unset");
|
||
//$("#button-edit").remove();
|
||
$("#button-print").remove();
|
||
$("#button-dl").css("margin-right", 10);
|
||
$(".assettr").remove();
|
||
|
||
$("#tdiissues").attr("colspan", "2");
|
||
$("#tdpages").attr("colspan", "2");
|
||
//$(".assettrmobile").children().eq(0).css("width", 130);
|
||
//$(".assettrmobile").children().eq(1).css("width", "auto");
|
||
$(".assettrmobile").show();
|
||
}
|
||
else {
|
||
$(".assettrmobile").remove();
|
||
}
|
||
}
|
||
|
||
function GetInspectionReport() {
|
||
showmaskbg(true);
|
||
var p = JSON.stringify([teamintelligence, htmlencode(reportid)]);
|
||
inspectionrequest("GetInspectionReport", p, function (data) {
|
||
if (typeof (data) === "string") {
|
||
showAlert(data, GetTextByKey("P_IPT_ERROR", 'Error'));
|
||
}
|
||
else {
|
||
reportdata = data;
|
||
vm.reload(data);
|
||
showReportLayout(data.ReportLayout);
|
||
showIdentifiedQuestions(data.IdentifiedQuestions);
|
||
showPages(data);
|
||
showSignature(data);
|
||
}
|
||
|
||
showmaskbg(false);
|
||
}, function (err) {
|
||
showmaskbg(false);
|
||
});
|
||
}
|
||
|
||
function showReportLayout(layout) {
|
||
$('#reportlayoutlogo').hide();
|
||
$('.td_pageheaderleft').html('');
|
||
$('.td_pageheadercenter').html('');
|
||
$('.td_pageheaderright').html('');
|
||
$('.td_pagefooterleft').html('');
|
||
$('.td_pagefootercenter').html('');
|
||
$('.td_pagefooterright').html('');
|
||
if (layout) {
|
||
$('.td_pageheaderleft').html(layout.PageHeaderLeft);
|
||
$('.td_pageheadercenter').html(layout.PageHeaderCenter);
|
||
$('.td_pageheaderright').html(layout.PageHeaderRight);
|
||
$('.td_pagefooterleft').html(layout.PageFooterLeft);
|
||
$('.td_pagefootercenter').html(layout.PageFooterCenter);
|
||
$('.td_pagefooterright').html(layout.PageFooterRight);
|
||
|
||
$('#reportlayoutlogo').show();
|
||
if (layout.IncludeLOGO && layout.LOGO && layout.LOGO.length > 0) {
|
||
var jpeg = layout.LOGO;
|
||
if (typeof (layout.LOGO) !== "string") {
|
||
jpeg = arrayBufferToBase64(layout.LOGO);
|
||
}
|
||
$('#reportlayoutlogo').attr('src', 'data:image/png;base64,' + jpeg);
|
||
}
|
||
}
|
||
}
|
||
|
||
function arrayBufferToBase64(buffer) {
|
||
var binary = '';
|
||
var bytes = new Uint8Array(buffer);
|
||
var len = bytes.byteLength;
|
||
for (var i = 0; i < len; i++) {
|
||
binary += String.fromCharCode(bytes[i]);
|
||
}
|
||
return window.btoa(binary);
|
||
}
|
||
|
||
function showIdentifiedQuestions(questions) {
|
||
if (!questions || questions.length == 0)
|
||
return;
|
||
var content = $('<div></div>');
|
||
content.append($('<div class="catelog">IDENTIFIED ISSUES</div>'));
|
||
if (questions && questions.length > 0) {
|
||
for (var i = 0; i < questions.length; i++) {
|
||
var q = questions[i];
|
||
var div_question = $('<div class="question"></div>');
|
||
content.append(div_question);
|
||
div_question.append($('<div style="width:320px;flex-grow:1;"></div>').text(q.DisplayText))
|
||
if (q.StaticPictures && q.StaticPictures.length > 0) {
|
||
var div_pic = $('<div style=""></div>');
|
||
div_pic = createPictures(q.StaticPictures, div_pic);
|
||
div_question.append(div_pic)
|
||
}
|
||
|
||
createAnswerContent(content, q);
|
||
}
|
||
}
|
||
else
|
||
content.append($('<div class="question"></div>').text(GetTextByKey("P_IPT_NOQUESTIONS", 'No Questions')));
|
||
|
||
$('#divquestions').append(content);
|
||
}
|
||
|
||
function showSeverityLevel(level) {
|
||
var levertext = GetTextByKey("P_IPT_SEVERITYLEVEL_COLON", "Severity Level: ");
|
||
if (level === 0)
|
||
levertext = "";
|
||
if (level === 1)
|
||
levertext += GetTextByKey("P_IPT_SL_LOW", "Low");
|
||
else if (level === 2)
|
||
levertext += GetTextByKey("P_IPT_SL_MEDIUM", "Medium");
|
||
else if (level === 3)
|
||
levertext += GetTextByKey("P_IPT_SL_HIGH", "High");
|
||
return levertext;
|
||
}
|
||
|
||
function showPages(report) {
|
||
var pages = report.Template.Pages;
|
||
var pagescontent = $('<div></div>');
|
||
pagescontent.append($('<div class="catelog" style="margin-top:20px;">' + GetTextByKey("P_IPT_INSPECTIONDETAIL", "INSPECTION DETAIL") + '</div>'));
|
||
|
||
for (var i = 0; i < pages.length; i++) {
|
||
var p = pages[i];
|
||
var pagecontent = createPage(p);
|
||
pagescontent.append(pagecontent);
|
||
}
|
||
$('#divpages').append(pagescontent);
|
||
}
|
||
|
||
function showSignature(report) {
|
||
if (report && report.SignatureUrl && report.SignatureUrl != "") {
|
||
$('#divsign').append($('<div style="border-bottom:1px solid #dbdbdb;"></div>'));
|
||
$('#divsign').append($('<div class="catelog" style="margin-top:20px;">' + GetTextByKey("P_IPT_SIGNATURE", "Signature") + '</div>'));
|
||
var pic = $('<img style="height:320px; margin-left:70px;margin-right:10px;margin-bottom:10px;"></img>').attr('src', report.SignatureUrl);
|
||
$('#divsign').append(pic);
|
||
}
|
||
}
|
||
|
||
function createPage(page) {
|
||
var content = $('<div style="padding:0px;"></div>');
|
||
var divpage = $('<div class="page"></div>');
|
||
content.append(divpage);
|
||
|
||
var btnpage = $('<em class="spanbtn iconangledown" style="font-size:22px;width:24px;"></em>');
|
||
btnpage.click(function () {
|
||
var icon = $(this);
|
||
if (icon.hasClass('iconangleright')) {
|
||
icon.removeClass('iconangleright').addClass('iconangledown');
|
||
icon.parent().next().show();
|
||
}
|
||
else {
|
||
icon.removeClass('iconangledown').addClass('iconangleright');
|
||
icon.parent().next().hide();
|
||
}
|
||
});
|
||
divpage.append(btnpage);
|
||
divpage.append($('<span></span>').text(page.DisplayText));
|
||
|
||
var sectioncontent = createSectionContent(page);
|
||
content.append(sectioncontent);
|
||
|
||
return content;
|
||
}
|
||
|
||
function createSectionContent(page) {
|
||
var content = $('<div style="margin-bottom:30px;"></div>');
|
||
if (page.Sections && page.Sections.length > 0) {
|
||
for (var i = 0; i < page.Sections.length; i++) {
|
||
var s = page.Sections[i];
|
||
var divsection = $('<div class="section"></div>');
|
||
content.append(divsection);
|
||
|
||
var btnsection = $('<em class="spanbtn iconangledown" style="font-size:18px;display:inline-block;"></em>');
|
||
btnsection.click(function () {
|
||
var icon = $(this);
|
||
if (icon.hasClass('iconangleright')) {
|
||
icon.removeClass('iconangleright').addClass('iconangledown');
|
||
icon.parent().next().show();
|
||
}
|
||
else {
|
||
icon.removeClass('iconangledown').addClass('iconangleright');
|
||
icon.parent().next().hide();
|
||
}
|
||
});
|
||
divsection.append(btnsection);
|
||
var ispic = false;
|
||
if (s.StaticPictures && s.StaticPictures.length > 0) {
|
||
ispic = true;
|
||
var div_pic = $('<span></span>');
|
||
createPictures(s.StaticPictures, div_pic);
|
||
divsection.append(div_pic);
|
||
divsection.append('<br/>');
|
||
}
|
||
var span_title = $('<span></span>').text(s.DisplayText);
|
||
if (ispic)
|
||
span_title.css('margin-left', 24);
|
||
divsection.append(span_title);
|
||
|
||
var qc = createQuestionContent(s, i);
|
||
content.append(qc);
|
||
}
|
||
}
|
||
else
|
||
content.append($('<div class="question"></div>').text('No Sections'));
|
||
return content;
|
||
}
|
||
|
||
function createQuestionContent(section) {
|
||
var content = $('<div style="margin-bottom:30px;"></div>');
|
||
if (section.Questions && section.Questions.length > 0) {
|
||
for (var i = 0; i < section.Questions.length; i++) {
|
||
var q = section.Questions[i];
|
||
var div_question = $('<div class="question"></div>');
|
||
content.append(div_question);
|
||
|
||
var div_title = $('<div style="width:320px;flex-grow:1;"></div>').text(q.DisplayText);
|
||
div_question.append(div_title);
|
||
if (q.StaticPictures && q.StaticPictures.length > 0) {
|
||
var div_pic = $('<div style=""></div>');
|
||
div_pic = createPictures(q.StaticPictures, div_pic);
|
||
div_question.append(div_pic)
|
||
}
|
||
|
||
createAnswerContent(content, q);
|
||
|
||
if (i != section.Questions.length - 1)
|
||
content.append($('<div style="border-bottom:1px solid #dbdbdb;"></div>'));
|
||
}
|
||
}
|
||
else
|
||
content.append($('<div class="question"></div>').text(GetTextByKey("P_IPT_NOQUESTIONS", 'No Questions')));
|
||
return content;
|
||
}
|
||
|
||
function createPictures(pictures, p) {
|
||
for (var i = 0; i < pictures.length; i++) {
|
||
var pic = pictures[i];
|
||
var img = $('<img style="width:40px;height:40px;margin-left:5px;"/>').attr('src', pic.Url).attr('title', pic.Name);
|
||
img.click(pic.Url, function (e) {
|
||
window.open(e.data, "_blank")
|
||
});
|
||
$(p).append(img);
|
||
}
|
||
return p;
|
||
}
|
||
|
||
function createAnswerContent(p, q) {
|
||
var leveltext = showSeverityLevel(q.SeverityLevel);
|
||
var label_level = $('<label class="label_level"></label>').text(leveltext);
|
||
if (reportdata && reportdata.Answers) {
|
||
for (var i = 0; i < reportdata.Answers.length; i++) {
|
||
var a = reportdata.Answers[i];
|
||
if (a.QuestionId.toLowerCase() == q.Id.toLowerCase()) {
|
||
if ([5, 8, 9, 10, 14, 15, 19].indexOf(q.QuestionType) < 0
|
||
|| (q.QuestionType == 15 && q.SubType != 15)) {//except YesOrNo/DropDown/MultipleChoice/Picture/FuelRecords
|
||
var result = a.Result;
|
||
if (result == null) {
|
||
result = '';
|
||
}
|
||
if (q.QuestionType == 6 && result.indexOf(' ') >= 0)//Date do not show time
|
||
result = result.split(' ')[0];
|
||
if (q.QuestionType == 11//Odometer
|
||
|| q.QuestionType == 18 //FuelUsed
|
||
|| (q.QuestionType == 15 && q.SubType == 8)//FuelRecords Odometer
|
||
|| (q.QuestionType == 15 && q.SubType == 10))//FuelRecords Quantity
|
||
result += " " + convertUnits(a.Units);
|
||
|
||
var div_answer = $('<div class="answer"></div>');
|
||
if (q.QuestionType == 1
|
||
|| (q.QuestionType == 15 && q.SubType == 14))
|
||
p.append(div_answer.html(replaceHtmlText(result))).append("<div style='clear:both;'></div>");
|
||
else if (q.QuestionType == 17 && q.TextToCompare != null && result.toLowerCase() != q.TextToCompare.toLowerCase()) // BarCodeValidate
|
||
p.append(div_answer
|
||
.append($('<span style="color:red"></span>').text(result))
|
||
.append($('<span style="margin-left:6px"></span>').text('(' + q.TextToCompare + ')'))
|
||
).append("<div style='clear:both;'></div>");
|
||
else
|
||
p.append(div_answer.text(result)).append("<div style='clear:both;'></div>");
|
||
|
||
div_answer.append(label_level);
|
||
}
|
||
else if (q.QuestionType == 5) {//YesOrNo
|
||
if (a.SelectedItems && a.SelectedItems.length > 0) {
|
||
var item = $('<div class="answer" ></div>');
|
||
var div_bg = $('<div class="circle"></div>');
|
||
var label = $('<label style="margin-left:5px;"></lable>').text(a.SelectedItems[0].Text);
|
||
item.append(div_bg);
|
||
item.append(label);
|
||
leveltext = showSeverityLevel(a.SelectedItems[0].SeverityLevel);
|
||
label_level = $('<label class="label_level"></label>').text(leveltext);
|
||
item.append(label_level);
|
||
if (a.SelectedItems[0].BackgroundColor && a.SelectedItems[0].BackgroundColor != "") {
|
||
div_bg.css('background-color', a.SelectedItems[0].BackgroundColor);
|
||
}
|
||
p.append(item).append("<div style='clear:both;'></div>");
|
||
}
|
||
}
|
||
else if (q.QuestionType == 8 || q.QuestionType == 9//DropDown、List
|
||
|| (q.QuestionType == 15 && q.SubType == 6)
|
||
|| (q.QuestionType == 15 && q.SubType == 9)) {
|
||
if (q.MultipleSelect) {
|
||
if (a.SelectedItems && a.SelectedItems.length > 0) {
|
||
for (var j = 0; j < a.SelectedItems.length; j++) {
|
||
var item = $('<div class="answer"></div>');
|
||
var div_bg = $('<div class="circle"></div>');
|
||
var label = $('<label style="margin-left:5px;"></lable>').text("" + (j + 1) + ". " + a.SelectedItems[j].Text);
|
||
item.append(div_bg);
|
||
item.append(label);
|
||
leveltext = showSeverityLevel(a.SelectedItems[j].SeverityLevel);
|
||
label_level = $('<label class="label_level"></label>').text(leveltext);
|
||
item.append(label_level);
|
||
if (a.SelectedItems[j].BackgroundColor && a.SelectedItems[j].BackgroundColor != "") {
|
||
div_bg.css('background-color', a.SelectedItems[j].BackgroundColor);
|
||
}
|
||
p.append(item).append("<div style='clear:both;'></div>");
|
||
}
|
||
}
|
||
}
|
||
else {
|
||
if (a.SelectedItems && a.SelectedItems.length > 0) {
|
||
var item = $('<div class="answer" ></div>');
|
||
var div_bg = $('<div class="circle"></div>');
|
||
var label = $('<label style="margin-left:5px;"></lable>').text(a.SelectedItems[0].Text);
|
||
item.append(div_bg);
|
||
item.append(label);
|
||
leveltext = showSeverityLevel(a.SelectedItems[0].SeverityLevel);
|
||
label_level = $('<label class="label_level"></label>').text(leveltext);
|
||
item.append(label_level);
|
||
if (a.SelectedItems[0].BackgroundColor && a.SelectedItems[0].BackgroundColor != "") {
|
||
div_bg.css('background-color', a.SelectedItems[0].BackgroundColor);
|
||
}
|
||
p.append(item).append("<div style='clear:both;'></div>");
|
||
}
|
||
}
|
||
}
|
||
else if (q.QuestionType == 14) {//Email (Drop Down)
|
||
if (a.SelectedItems && a.SelectedItems.length > 0) {
|
||
for (var j = 0; j < a.SelectedItems.length; j++) {
|
||
var item = $('<div class="answer"></div>');
|
||
var label = $('<label style="margin-left:5px;"></lable>').text("" + (j + 1) + ". " + a.SelectedItems[j].Text + "<" + a.SelectedItems[j].Value + ">");
|
||
item.append(label);
|
||
item.append(label_level);
|
||
p.append(item).append("<div style='clear:both;'></div>");
|
||
}
|
||
}
|
||
}
|
||
else if (q.QuestionType == 10
|
||
|| (q.QuestionType == 15 && q.SubType == 15)) {//Picture
|
||
var pics = $('<div style="min-height:80px;overflow:auto;padding-left:90px;"></div>');
|
||
p.append(pics);
|
||
//pics.append(label_level);
|
||
if (reportdata.Medias && reportdata.Medias.length > 0) {
|
||
for (var j = 0; j < reportdata.Medias.length; j++) {
|
||
var m = reportdata.Medias[j];
|
||
if (m.AnswerId.toLowerCase() == a.Id.toLowerCase()) {
|
||
if (['.mp4', '.mov'].indexOf(m.FileType.toLowerCase()) >= 0) {
|
||
var v = $('<div class="media"><span class="video"></span></div>');
|
||
v.click(m.Url, function (e) {
|
||
window.open(e.data, "_blank")
|
||
});
|
||
pics.append(v);
|
||
}
|
||
else {
|
||
var pic = $('<img class="media"></img>').attr('src', m.ThumbnailUrl);
|
||
pic.click(m.Url, function (e) {
|
||
window.open(e.data, "_blank")
|
||
});
|
||
pics.append(pic);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
else if (q.QuestionType == 19) {//Asset Status
|
||
var divanswer = $('<div class="answer" ></div>');
|
||
if (a.SelectedItems && a.SelectedItems.length > 0) {
|
||
var div_bg = $('<div class="circle"></div>');
|
||
var label = $('<label style="margin-left:5px;"></lable>').text(a.SelectedItems[0].Text);
|
||
divanswer.append(div_bg);
|
||
divanswer.append(label);
|
||
if (a.SelectedItems[0].BackgroundColor && a.SelectedItems[0].BackgroundColor != "") {
|
||
div_bg.css('background-color', a.SelectedItems[0].BackgroundColor);
|
||
}
|
||
p.append(divanswer).append("<div style='clear:both;'></div>");
|
||
|
||
}
|
||
divanswer.append(label_level);
|
||
|
||
var pics = $('<div style="min-height:80px;overflow:auto;padding-left:90px;"></div>');
|
||
p.append(pics);
|
||
if (reportdata.Medias && reportdata.Medias.length > 0) {
|
||
for (var j = 0; j < reportdata.Medias.length; j++) {
|
||
var m = reportdata.Medias[j];
|
||
if (m.AnswerId.toLowerCase() == a.Id.toLowerCase()) {
|
||
if (['.mp4', '.mov'].indexOf(m.FileType.toLowerCase()) >= 0) {
|
||
var v = $('<div class="media"><span class="video"></span></div>');
|
||
v.click(m.Url, function (e) {
|
||
window.open(e.data, "_blank")
|
||
});
|
||
pics.append(v);
|
||
}
|
||
else {
|
||
var pic = $('<img class="media"></img>').attr('src', m.ThumbnailUrl);
|
||
pic.click(m.Url, function (e) {
|
||
window.open(e.data, "_blank")
|
||
});
|
||
pics.append(pic);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
if (a.Result && a.Result != "") {
|
||
p.append($('<div class="answer" style="color:#808080"></div>').html(replaceHtmlText(a.Result)));
|
||
}
|
||
}
|
||
if (a.Comment && a.Comment != "") {
|
||
p.append($('<div class="answer" style="color:#808080"></div>').html(replaceHtmlText(a.Comment)));
|
||
}
|
||
return;
|
||
}
|
||
}
|
||
}
|
||
p.append($('<div class="answer"></div>').text(""));
|
||
|
||
|
||
//public string Id { get; set; }
|
||
//public string QuestionId { get; set; }
|
||
//public string Result { get; set; }
|
||
//public string Comment { get; set; }
|
||
//public string Units { get; set; }
|
||
//public SeverityLeveles SeverityLevel { get; set; }
|
||
//public List<SelectItem> SelectedItems { get; }
|
||
|
||
//SingleLineText = 0,
|
||
//MultipleLineText = 1,
|
||
//Email = 2,
|
||
//Number = 3,
|
||
//Integer = 4,
|
||
//YesOrNo = 5,
|
||
//Date = 6,
|
||
//DateAndTime = 7,
|
||
//DropDown = 8,
|
||
//MultipleChoice = 9,
|
||
//Picture = 10,
|
||
//Odometer = 11,
|
||
//EngingHours = 12
|
||
|
||
//如果是非select类型，则是界面上直接录的值
|
||
//如果question type为odometer时，units表示所用的单位，其它类型忽略units
|
||
//如果question是select类型的(多选，单选，yes / no) ，则忽略result, 此时question的答案要从selecteditems当中去取
|
||
//如果是picture类型，result存的是media的id,
|
||
//@Tsanie picture类型是这样的吧
|
||
//picture类型的没在ReportInfo结构上存，是MediaInfo里的AnswerId为ReportInfo里的Id
|
||
//如果AssetStatus类型，result存的是notes
|
||
|
||
|
||
return result;
|
||
}
|
||
|
||
function convertUnits(u) {
|
||
switch (u.toLowerCase()) {
|
||
case "mile":
|
||
return "Mile(s)";
|
||
case "kilometre":
|
||
case "kilometer":
|
||
return "Kilometer";
|
||
case "percent":
|
||
return "Percent";
|
||
case "gallon":
|
||
case "gal":
|
||
return "Gallon";
|
||
case "litre":
|
||
return "Litre";
|
||
default:
|
||
break;
|
||
}
|
||
return u;
|
||
}
|
||
|
||
function isLight(color) {
|
||
color = color.replace('#', '');
|
||
var r, g, b;
|
||
if (color.length == 6) {
|
||
r = '0x' + color.substr(0, 2);
|
||
g = '0x' + color.substr(2, 2);
|
||
b = '0x' + color.substr(4, 2);
|
||
|
||
return 0.213 * parseInt(r) + 0.715 * parseInt(g) + 0.072 * parseInt(b) > 255 / 2;
|
||
}
|
||
return true;
|
||
} |