monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by XuHaoJie
Commit 64203c40a4415fc957c4fa7fdda39e944292055e 2 parents 96dc7af4 ec50a6b4 wangfeng-mj ... master-500-dev master-500-dev-0327 master-500-dev-LH master-500-dev-XuHaoJie master-500-dev-joke master-500-dev-lushangqing master-500-dev-lzc master-500-dev-xwx master-500-dev-yuanjinpeng master-500-dev-ztq master-500-dev-ztq1 master-500-log master-500-log-ztq master-500-prod master-500-prod-joke-new master-500-prod-lushangqing master-mj master-mj-610 master-mj-joke master-mj-yuanjinpeng master-mj-ztq master-prod master-prod-500-lushangqing master-prod-lushangqing master-prod-xwx master-prod-xwx2 wangfeng-500-dev

Merge branch 'master-500-dev' of http://113.200.75.45:82/monitor_v3/hg-monitor-w… 

…eb into master-500-dev-XuHaoJie
Inline Side-by-side
Showing 33 changed files with 4011 additions and 40 deletions

Too many changes to show.
Reload with full diff Plain diff Email patch

To preserve performance only 33 of 33+ files are displayed.

... ... @@ -1801,7 +1801,26 @@ layui.define(['xmSelect', 'md5'], function (exports) {
*/
admin.events.openOtherSystem = function (){
let code = $(this).attr("data-code");
admin.events[code].call();
if(code){
var isHttp = function (str) {
var RegUrl = new RegExp();
RegUrl.compile("^http|https+://[A-Za-z0-9-_]+\\.[A-Za-z0-9-_%&\?\/.=]+$");
if (!RegUrl.test(str)) {
return false;
}
return true;
}
if(isHttp(code)){
var accessToken = '';
layui.use(['sessions', 'common'], function () {
var sessions = layui.sessions;
accessToken = sessions.getToken()['access_token'];
});
window.open(`${code}?access_token=${accessToken}`);
}
admin.events[code].call();
}
}
//监听浏览器窗口变化
... ...
... ... @@ -143,7 +143,7 @@ layui.define(['table', 'form', 'admin', 'layer', 'common', 'commonDetail','sessi
// 初始化下拉框
function loadSelect() {
admin.req({
url: domainName + '/api-web/machineRoom/getMachineRoomInfo'
url: domainName + '/api-room/machineRoom/getMachineRoomInfo'
}).done(function (response) {
var options = "<option value=''>=归属机房=</option>";
$.each(response.data, function (i, v) {
... ...
//工作汇报表单
layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', 'xmSelect', 'laydate', 'upload'], function (exports) {
var $ = layui.$;
var form = layui.form;
var layer = layui.layer;
var admin = layui.admin;
var table = layui.table;
var common = layui.common;
var session = layui.sessions;
var laydate = layui.laydate;
var upload = layui.upload;
var domainName = common.domainName;
var xmSelect = layui.xmSelect;
//对外暴露的接口
exports('workReportAdd', function (data) {
var accessToken = session.getToken()['access_token']
var userSelect = {}
var currentDate = {}
var uploadInst = {}
var defaultUser = []
var attachmentIds = []
var id = data.id
var cols = []
var where = {}
var url = ''
var historywarningTable = {}
var viewType = data && data.viewType ? data.viewType : '';
init()
$('#workReport_type').val(data.repType)
//渲染表单
form.render(null, 'add-workReport-form')
form.on('select(workReport_type)', function (dom) {
initFromType(dom.value)
})
//保存
form.on('submit(workReport-form-save-id)', function (res) {
var value = $('#attachmentInput').val()
if (value != '') {
$('#upload_btn').click()
} else {
saveForm()
}
})
//表单验证
form.verify({
checkReportIsExist: function(value, item){ //value：表单的值、item：表单的DOM对象
var repType = $('#add-workReport-form').find("select[name='repType']").val()
var count = 0
var createTime = $('#add-workReport-form').find("input[name='createTime']").val()
var date = new Date()
var month = date.getMonth() > 9 ? (date.getMonth() + 1) : '0' + (date.getMonth() + 1)
var currentDate = date.getFullYear() + '-' + month + '-' + date.getDate()
var createDate = createTime.split(' ')[0]
if (repType == 'day' && createDate == currentDate) {
if (new Date(createTime) < new Date(currentDate + ' ' + '16:30:00')) {
return "请于北京时间下午16:30分后添加当天日报！"
}
}
admin.req({
url: domainName + '/api-web/workreport/checkIsExist?repType=' + repType + '&createTime=' + createDate,
async: false,
success: function (res) {
if (res.success) {
count = res.count
}
}
})
if (count !=0 && id == undefined && repType == 'day') {
return "日报不能重复添加！"
}
}
});
//保存
function saveForm() {
layer.load(2)
var data = form.val('add-workReport-form')
var params = {}
params.user = data.select
params.attachmentIds = attachmentIds.toString()
delete data['file']
delete data['select']
params.workReport = JSON.stringify(data)
admin.req({
url: domainName + '/api-web/workreport/save?access_token=' + accessToken,
data: JSON.stringify(params),
type: 'post',
contentType: "application/json; charset=utf-8",
done: function (res) {
if (res.success) {
layer.msg(res.msg, {
offset: '15px',
icon: 1,
time: 1000,
}, function () {
layer.closeAll()
table.reload('workReportTable', {
where: {
access_token: accessToken,
repTitle: '',
isRead: '',
repType: '',
createTime: ''
},
});
})
} else {
layer.msg(res.msg, {
offset: '15px',
icon: 7,
time: 1000,
})
}
}
})
return false
}
//页面初始化
function init() {
initFromType(data.repType)
initUserSelect()
initDatePlus()
initUploadPlus()
if (viewType == 'view') {
initViewMode();
}
}
cols = [
{type: 'numbers',title:'序号'}
, {
field: 'alarmLevel', title: '级别', align: 'center', width: 120,
templet: function (d) {
if (d.alarmLevel == 3) {
return '<span class="layui-table-warn" style="width: 100%;">严重</span>';
} else if (d.alarmLevel == 2) {
return '<span class="layui-table-close" style="width: 100%;">重要</span>';
} else if (d.alarmLevel == 1) {
return '<span class="layui-table-normal" style="width: 100%;">一般告警</span>';
}
}
}
, {
field: 'resName', title: '资源名称', align: 'center', width: 230,
templet: '<div><span data-warn-zymc="{{d.id}}" data-resid="{{d.resId}}" data-restype="{{d.resType}}" data-ip="{{d.ip}}" data-resname="{{d.resName}}">{{d.resName}}</span></div>'
}
, {
field: 'kpiName', title: '指标名称', align: 'center', width: 150,
templet: function (d) {
var kpiName = d.kpiName == 'TYPE' ? 'ERRPT' : d.kpiName;
if (d.kpiIdent != 1 && d.isWarning != 1) {
return '<div>' + kpiName + '</div>';
}
return '<div><span data-ident="' + d.kpiIdent + '" data-trend="' + d.isTrend + '" data-warning="' + d.isWarning + '" data-warn-zbmc="' + d.id + '" class="layui-table-link" data-resid="' + d.resId + '" data-flag="' + d.flag + '" data-kpi="' + d.kpiId + '" data-name="' + kpiName + '" >' + kpiName + '</span></div>';
}
}
, {field: 'alarmContent', title: '告警内容', align: 'center', width: 500}
, {
field: 'alarmResource', title: '告警来源', align: 'center', minWidth: 100, templet: function (d) {
if (d.alarmResource == 1) {
return '<div>华为告警</div>';
} else {
return '<div>监控系统</div>';
}
}
}
, {field: 'updateTime', title: '告警时间', align: 'center', minWidth: 180}
, {field: 'alarmTime', title: '首次告警时间', align: 'center', minWidth: 180}
]
where = {
access_token: accessToken,
dateTime: $('#add-workReport-form').find("input[name='createTime']").val()
}
url = domainName + '/api-web/home/alarm/getAlarm'
getAlarmInfo(where,cols,url)
//表单赋值
function fromAssignment() {
if (data && data.id) {
$('#add-workReport-form-atta').show()
//编辑表单时禁用日志类型修改和时间选择
$('#add-workReport-form').find("select[name='repType']").attr("disabled", "disabled")
$('#add-workReport-form').find("input[name='createTime']").attr("disabled", "disabled")
//编辑表单时取消显示默认值
currentDate.config.isInitValue = false
initDatePlus()
//切换相应的类型表单
initFromType(data.repType)
var time = ''
admin.req({
url: domainName + `/api-web/workreport/getById/${data.id}`,
async: false,
done: function (res) {
form.val('add-workReport-form', res.object)
time = res.object.createTime
var userArr = []
$.each(res.object.reportUserList, function (i, v) {
userArr.push(v.userName)
})
userSelect.setValue(userArr)
if (res.object.attachmentList.length != 0) {
$.each(res.object.attachmentList,function (i,v) {
writeTagsInfo(v.id,v.originalName)
})
}
}
})
cols.push({field: 'alarmStatus', title: '告警状态', align: 'center', minWidth: 100,
templet: function (d) {
var str = ''
if (d.alarmStatus == '0') {
str = '告警'
} else if (d.alarmStatus == '1') {
str = '关闭'
}
return `<div><span>${str}</span></div>`
}
}
, {field: 'clearType', title: '消除类型', align: 'center', minWidth: 100,
templet:function (d) {
var str = ''
if (d.clearType == '0'){
str = '自动消除'
} else if(d.clearType == '1') {
str = '手动消除'
}
return `<div><span>${str}</span></div>`
}}
, {field: 'clearUserId', title: '消除人', align: 'center', minWidth: 100,}
, {field: 'clearTime', title: '消除时间', align: 'center', minWidth: 180,}
, {field: 'clearReason', title: '消除原因', align: 'center', minWidth: 250})
where = {access_token: accessToken,reportId:data.id,time:time}
url = domainName + '/api-web/workreport/getAlarmListByReportId'
getAlarmInfo(where,cols,url)
}
}
//获取当前用户的告警信息
function getAlarmInfo(where,cols,url) {
if (data && data.repType != 'day') {
return false
}
historywarningTable = table.render({
elem: '#table-report-alarm'
, url: url
, where: where
, parseData: function (res) {
if (data && !data.id) {
var str = `共有${res.map.totalCount}条告警，手动处理${res.map.manualCount}条，自动处理${res.map.autoCount}条，` +
`未处理${res.map.alarmCount}条`;
$('#add-workReport-form').find("input[name='alarmStatic']").val(str);
}
}
, height: 'auto'
, cellMinWidth: 80
, text: {
none: '无告警'
}
, page: {
layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
, theme: '#1E9FFF'
}
,limit: common.limit
,limits: common.limits
, even: true
, cols: [cols]
,done: function (res, curr, count) {
}
})
}
//初始化日期插件
function initDatePlus() {
currentDate = laydate.render({
elem: '#createTime', //指定元素
value: new Date(),
type: 'datetime',
isInitValue: true,
max:0,
change: function(value) {
if (data && data.repType != 'day') {
return false
}
historywarningTable.reload({
where: {
access_token: accessToken,
dateTime: value
},
})
}
});
}
//初始化上传插件
function initUploadPlus() {
var param = {"access_token": accessToken}
var fileName = []
uploadInst = upload.render({
elem: '#attachment', //绑定元素
url: common.domainName + '/api-web/workreport/upload',
data: param,
multiple: true,
auto: false, //选择文件后不自动上传
bindAction: '#upload_btn',//指定按钮触发上传
accept: 'file',
exts: 'xls|doc|pdf|docx|xlsx|jpg|png',
choose: function (obj) {
//选择文件后回调
var files = this.files = obj.pushFile();
obj.preview(function (index, file, result) {
fileName.push(file.name)
$('#attachmentInput').val(fileName.toString())
})
},
done: function (res) {
//单次上传成功
attachmentIds.push(res.str)
},
allDone: function (obj) {
//全部上传成功后
saveForm()
},
error: function (index, upload) {
// 上传失败
layer.msg('文件上传时发生故障，请稍后再试！', {
icon: 7, time: 3000
});
}
});
}
//初始化用户下拉列表框
function initUserSelect() {
$.ajax({
url: domainName + '/api-user/users/getAll?access_token=' + accessToken,
success: function (res) {
userSelect = xmSelect.render({
el: '.reportUser',
disabled: viewType == 'view' ? true : false,
template({ item, sels, name, value }){
return item.nickname + '(' + value + ')'
},
prop: {
name: 'nickname',
value: 'username'
},
filterable: true,
layVerify: 'required',
layVerType: 'msg',
data: res,
})
initGroupUserDefault()
//赋值
fromAssignment()
}
})
}
//初始化组负责人对应的组员
function initGroupUserDefault() {
$.ajax({
url: domainName + '/api-web/workreport/getUserByAdmin?theirType=1&access_token=' + accessToken,
success: function (res) {
if (!res.str) {
return;
}
defaultUser = res.str.split(",");
//默认接收人
if (!data.id && defaultUser.length != 0) {
userSelect.setValue(defaultUser)
}
}
})
}
//根据传入类型动态渲染表单
function initFromType(repType) {
switch (repType) {
case 'day':
$('.work_finish').text('今日完成工作')
$('.work_conclusion').text('未完成工作')
$('.work_help').text('需要协调工作')
$('.plan').hide()
$('.reportAlarm').show()
$('.report_alarmStatic').show()
getAlarmInfo(where,cols,url)
break
case 'week':
$('.work_finish').text('本周完成工作')
$('.work_conclusion').text('本周工作总结')
$('.plan').show()
$('.work_plan').text('下周工作计划')
$('.work_help').text('需要协调与帮助')
$('.reportAlarm').hide()
$('.report_alarmStatic').hide()
break
case 'month':
$('.work_finish').text('本月完成工作')
$('.work_conclusion').text('本月工作总结')
$('.plan').show()
$('.work_plan').text('下月工作计划')
$('.work_help').text('需要协调与帮助')
$('.reportAlarm').hide()
$('.report_alarmStatic').hide()
break
}
}
// 初始化查看模式
function initViewMode() {
$('form[lay-filter="add-workReport-form"]').find('input, textarea').attr('readonly', true);
$('form[lay-filter="add-workReport-form"]').find('select').attr('disabled', true);
$.each(xmSelect.get(), function (i, v) {
v.update({disabled: true});
});
$('#attachmentInput').parent().parent().parent().addClass('hide');
$('#table-report-add-attachment').removeClass('hide');
$('#form-item-repTitle').removeClass('hide');
//渲染附件表格
var attachmentTable = table.render({
elem: '#table-report-add-attachment',
url: domainName + '/api-web/workreport/getAttaById',
where: {
access_token: accessToken,
id: data.id
},
height: 'full',
page: {
layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
, theme: '#1E9FFF'//自定义分页主题颜色
},
end: function (e) {
form.render()
},
limit: common.limit,
limits: common.limits,
even: true,
cols: [[
{type: 'numbers', title: '序号'},
{
field: 'name', title: '文件名称', align: 'center', minWith: 200,
},
{
field: 'suffix', title: '文件后缀', align: 'center', minWith: 150,
},
{
field: 'size', title: '文件大小', align: 'center', minWith: 150,
templet: function (d) {
var str = (d.size / 1000).toFixed(2)
return `<div><span>${str}KB</span></div>`
}
},
{
title: '操作', align: "center", width: 120,
templet: '<div><span data-id="{{d.id}}" data-suffix="{{d.suffix}}" class="layui-table-link preview-attachment-btn">预览</span></div>'
}
]],
done: function () {
$('.preview-attachment-btn').on('click', function () {
var id = $(this).data('id')
var suffix = $(this).data('suffix')
if (suffix == 'jpg' || suffix == 'png' || suffix == 'JPG' || suffix == 'PNG') { //图片类型
var srcUrl = domainName + `/api-web/openoffice/readImage/${id}?access_token=` + accessToken
layer.open({
type: 1,
content: `<div><img src="${srcUrl}" width="100%" height="100%" /></div>`,
title: '图片预览',
area: ['60%', '90%']
})
} else {
//附件为文档类型
common.openReport(id)
}
})
}
})
form.render();
}
//写入标签内容
function writeTagsInfo(id,name) {
var tags = '<span id="tags_span_'+id+'" data-id="'+id+'"><em>'+name+'</em>' +
'<button type="button" value="'+id+'" class="tagsclose close">×</button></span>';
if($("#tags_span_"+id).length == 0){
//拼接标签
$("#selecte_content_id").append(tags);
//绑定标签的删除事件
bindTagesDelEvent();
}
}
//删除标签事件
function bindTagesDelEvent() {
//删除已选主体的页签
$("button.tagsclose").on("click",function () {
var attachId = $(this).attr("value");
//确认提示框
layer.confirm('附件删除后将无法恢复，您确定要删除吗？', {
btn: ['确定', '取消'] //按钮
}, function () {
$.ajax({
url: domainName + `/api-web/workreport/deleteAttachment/${id}/${attachId}?access_token=` + accessToken,
type: "get",
}).done(function (res) {
layer.msg('删除成功', {
offset: '15px'
, icon: 1
, time: 1000
}, function () {
$("#tags_span_"+attachId).remove();
});
}).error(function (error) {
console.log(error);
});
});
});
}
})
})
\ No newline at end of file
... ...
//工作汇报
layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions'], function (exports) {
var $ = layui.$;
var form = layui.form;
var layer = layui.layer;
var admin = layui.admin;
var table = layui.table;
var common = layui.common;
var session = layui.sessions
var domainName = common.domainName;
//对外暴露的接口
exports("workReportIndex", function () {
var accessToken = session.getToken()['access_token']
var createTime = ''
var isRead = ''
var repType = ''
//回车搜索
$('#workReport_title').keydown(function (e) {
if (e.keyCode === 13) {
reloadWorkReportTable()
}
})
//绑定是否阅读
form.on('radio(workReport_isRead)', function () {
isRead = $('input[name="isRead"]:checked').val()
reloadWorkReportTable()
})
//绑定类型
form.on('radio(workReport_type)', function () {
repType = $('input[name="repType"]:checked').val()
reloadWorkReportTable()
})
//时间周期切换事件
$("#createTimeBtn button").on("click", function () {
$("#createTimeBtn button").removeClass("active");
$(this).addClass("active");
createTime = ($(this).data("period"))
reloadWorkReportTable()
});
//渲染表单元素
form.render(null, 'workReport-form')
//新增日报
$('#workReport_create_day').on('click', function () {
openWorkReportForm('day')
})
//新增周报
$('#workReport_create_week').on('click', function () {
openWorkReportForm('week')
})
//新增月报
$('#workReport_create_month').on('click', function () {
openWorkReportForm('month')
})
//渲染表格
var workReportTable = table.render({
elem: '#workReportTable',
url: domainName + '/api-web/workreport/page',
where: {
access_token: accessToken,
repTitle: $('#workReport_title').val(),
isRead: isRead,
repType: repType,
createTime: createTime,
dateLimit: '',
viewMode:false
},
height: 'full-300',
page: {
layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
, theme: '#1E9FFF'//自定义分页主题颜色
},
end: function (e) {
form.render()
},
limit: common.limit,
limits: common.limits,
even: true,
cols: [[
{type: 'checkbox'},
{
field: 'repType', title: '汇报类型', align: 'center', width: 150,
templet: function (d) {
var typeName = ''
switch (d.repType) {
case 'day':
typeName = '日报'
break;
case 'week':
typeName = '周报'
break;
case 'month':
typeName = '月报'
break;
}
return `<div><span>${typeName}</span></div>`
}
},
{
field: 'repTitle', title: '标题', align: 'center', minWith: 300,
templet: '<div><span data-id="{{d.id}}" data-rep="{{d.repType}}" class="layui-table-link view-workReport-title">{{d.repTitle}}</span></div>'
},
{
field: 'attachmentList', title: '附件数量', align: 'center', width: 120,
templet: '<div><span data-id="{{d.id}}" class="layui-table-link view-workReport-attachment">{{d.attachmentList.length}}</span></div>'
},
{
field: 'reportUserList', title: '已读/接收人数', align: 'center', minWith: 150,
templet: function (d) {
var str = ''
var count = 0
$.each(d.reportUserList, function (i, v) {
if (v.isRead == 1) {
count++
}
})
str = count + '/' + d.reportUserList.length
return `<div><span data-id="${d.id}" class="layui-table-link view-workReport-reportUser">${str}</span></div>`
}
},
{
field: 'reportUserList', title: '已读人员', align: 'center', minWith: 400,
templet: function (d) {
var userName = []
var str = ''
$.each(d.reportUserList, function (i, v) {
if (v.isRead == 1) {
userName.push(v.nickName)
}
})
if(userName.length === 0){
userName = ['无']
}
str = userName.toString()
if (str.length == 0) str = '无'
return `<div><span>${str}</span></div>`
}
},
{
field: 'createUserNickName', title: '创建人', align: 'center', minWith: 150,
},
{
field: 'createTime', title: '上报时间', align: 'center', minWith: 150,
},
{
title: '操作', align: "center", width: 120,
templet: '<div><span data-id="{{d.id}}" class="layui-table-link delete-workReport-btn">删除</span></div>'
}
]],
done: function () {
//点击标题编辑表单
$('.view-workReport-title').on('click', function () {
openWorkReportForm($(this).data('rep'), $(this).data('id'))
})
//点击已读/未读获取接收人列表
$('.view-workReport-reportUser').on('click', function () {
openWorkReportList('reportUser', $(this).data('id'))
})
//获取附件列表
$('.view-workReport-attachment').on('click', function () {
openWorkReportList('attachment', $(this).data('id'))
})
//删除事件
$('.delete-workReport-btn').on('click', function () {
deleteWorkRepord($(this).data("id"))
})
}
})
//刷新表格
function reloadWorkReportTable() {
workReportTable.reload({
where: {
access_token: accessToken,
repTitle: $('#workReport_title').val(),
isRead: isRead,
repType: repType,
dateLimit: '',
createTime: createTime
},
})
}
//删除数据
function deleteWorkRepord(id) {
//确认提示框
layer.confirm('数据删除后将无法恢复，您确定要删除吗？', {
btn: ['确定', '取消'] //按钮
}, function () {
admin.req({
url: domainName + '/api-web/workreport/delete',
type: 'delete',
data: {id: id}
}).done(function (res) {
layer.msg('删除成功', {
offset: '15px',
icon: 1,
time: 1000
}, function () {
reloadWorkReportTable()
})
}).error(function (error) {
console.log(error)
})
})
}
//新增/编辑表单
function openWorkReportForm(repType, id) {
var title = id ? '编辑' : '新增'
common.openWin('workreport/add', title, {id: id, repType: repType}, ['保存', '取消'], function f() {
$("#workReport-form-save-id").trigger("click");
})
}
//查看附件/接收人列表
function openWorkReportList(type, id) {
var title = ''
if (type == 'attachment') {
title = '附件'
} else {
title = '接收人'
}
common.openWin('workreport/list', title, {id: id, type: type}, ['确定', '取消'])
}
//获取页面选中数据
function getCheckStatusData() {
return table.checkStatus('workReportTable').data
}
return {reloadWorkReportTable, getCheckStatusData}
})
})
\ No newline at end of file
... ...
//工作汇报
layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions'], function (exports) {
var $ = layui.$;
var form = layui.form;
var layer = layui.layer;
var admin = layui.admin;
var table = layui.table;
var common = layui.common;
var session = layui.sessions
var domainName = common.domainName;
//对外暴露的接口
exports("workReportList", function (d) {
var accessToken = session.getToken()['access_token']
if (d.type == 'attachment') {
$('#attachmentTable').show()
$('#reportUserTable').hide()
createAttachmentTable()
} else {
$('#attachmentTable').hide()
$('#reportUserTable').show()
createReportUserTable()
}
//渲染收件人表格
function createReportUserTable() {
var reportUserTable = table.render({
elem: '#reportUserTable',
url: domainName + '/api-web/workreport/getUserById',
where: {
access_token: accessToken,
id: d.id
},
height: 'full',
page: {
layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
, theme: '#1E9FFF'//自定义分页主题颜色
},
end: function (e) {
form.render()
},
limit: common.limit,
limits: common.limits,
even: true,
cols: [[
{type: 'numbers', title: '序号'},
{
field: 'nickName', title: '姓名', align: 'center', minWith: 200,
},
{
field: 'department', title: '所属部门', align: 'center', minWith: 150,
},
{
field: 'isRead', title: '阅读状态', align: 'center', minWith: 150,
templet: function (d) {
var str = ''
if (d.isRead == 0) {
str = '未读'
return `<div><span style="color: red">${str}</span></div>`
} else {
str = '已读'
return `<div><span>${str}</span></div>`
}
}
},
{
field: 'readingTime', title: '阅读时间', align: 'center', minWith: 150,
}
]],
done: function () {
}
})
}
//渲染附件表格
function createAttachmentTable() {
var attachmentTable = table.render({
elem: '#attachmentTable',
url: domainName + '/api-web/workreport/getAttaById',
where: {
access_token: accessToken,
id: d.id
},
height: 'full',
page: {
layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
, theme: '#1E9FFF'//自定义分页主题颜色
},
end: function (e) {
form.render()
},
limit: common.limit,
limits: common.limits,
even: true,
cols: [[
{type: 'numbers', title: '序号'},
{
field: 'name', title: '文件名称', align: 'center', minWith: 200,
}, {
field: 'originalName', title: '原始名称', align: 'center', minWith: 200,
}, {
field: 'suffix', title: '文件后缀', align: 'center', minWith: 150,
},
{
field: 'size', title: '文件大小', align: 'center', minWith: 150,
templet: function (d) {
var str = (d.size / 1000).toFixed(2)
return `<div><span>${str}KB</span></div>`
}
},
{
title: '操作', align: "center", width: 120,
templet: '<div><span data-id="{{d.id}}" data-suffix="{{d.suffix}}" class="layui-table-link preview-attachment-btn">预览</span>' +
'<span data-id="{{d.id}}" data-suffix="{{d.suffix}}" class="layui-table-link attachment-download-btn" style="margin-left: 10px">下载</span></div>'
}
]],
done: function () {
$('.preview-attachment-btn').on('click', function () {
var id = $(this).data('id')
var suffix = $(this).data('suffix')
if (suffix == 'jpg' || suffix == 'png' || suffix == 'JPG' || suffix == 'PNG') { //图片类型
var srcUrl = domainName + `/api-web/openoffice/readImage/${id}?access_token=` + accessToken
layer.open({
type: 1,
content: `<div><img src="${srcUrl}" width="100%" height="100%" /></div>`,
title: '图片预览',
area: ['60%', '90%']
})
} else {
//附件为文档类型
common.openReport(id)
}
})
$('.attachment-download-btn').on('click',function () {
var id = $(this).data('id')
var suffix = $(this).data('suffix')
var url = domainName + `/api-web/openoffice/download/${id}?access_token=` + accessToken
window.open(url)
})
}
})
}
})
})
\ No newline at end of file
... ...
/** 工作汇报查看 */
layui.define(['table', 'form', 'sessions', 'admin', 'common', 'echarts','laydate','element'], function (exports) {
var $ = layui.$;
var form = layui.form;
var table = layui.table;
var admin = layui.admin;
var common = layui.common;
var laydate = layui.laydate;
var element = layui.element;
exports('workReportView', function () {
var sessions = layui.sessions;
var accessToken = sessions.getToken().access_token;
var domainName = common.domainName;
var companyChart = echarts.init(document.getElementById('chart-company-report'));
var noReadChart = echarts.init(document.getElementById('chart-noRead-report'));
var dateLimit = ""
var createTime = ""
var type = ''
var urlRepType = ''
var manufacturerId = ''
var reportDetailTable;
getUrlType()
if (type != '1') {
createTime = 'thisWeek';
} else {
$.each($("button.date"),function (i,e) {
var $dom = $(e);
if($dom.hasClass("active")){
$dom.removeClass("active")
}
})
$.each($("button.isRead"),function (i,e) {
var $dom = $(e);
if($dom.data("type") == '0'){
$dom.addClass("active")
}
})
$.each($('input[name="repType"]'),function (i,e) {
var $dom = $(e);
if($dom.val() == urlRepType){
$dom.attr('checked','checked');
}
})
}
//日期范围选择
laydate.render({
elem: '#dateLimit'
,range: '~',
done: function (value) {
dateLimit = value
if (dateLimit == '') {
$('[data-period="thisWeek"]').click()
} else {
$.each($("button.date"),function (i,e) {
var $dom = $(e);
if($dom.hasClass("active")){
$dom.removeClass("active")
}
})
reloadAllChange()
}
}
});
form.render();
// loadDailyChart();
// loadReportableChart();
loadCompanyReport();
loadReadReport();
loadWorkReportTable();
loadConditionSelect();
var url = domainName + '/api-web/workreport/chart/noRead';
loadNoReadChart(noReadChart,url,'未读');
// tab页切换事件
element.on('tab(report-tab)', function (data) {
var name = '';
if (data.index == 0) {
url = domainName + '/api-web/workreport/chart/noRead'
name = '未读';
loadNoReadChart(noReadChart,url,name);
} else if (data.index == 1) {
url = domainName + '/api-web/workreport/chart/noReport?createTime=' + createTime + '&dateLimit=' + dateLimit;
name = '未报';
var noReportChat = echarts.init(document.getElementById('chart-noReport-report'));
loadNoReadChart(noReportChat,url,name);
} else if (data.index == 2) {
url = domainName + '/api-web/workreport/chart/noHandlingAlarmsChart'
name = '未处理';
var noAlarmChart = echarts.init(document.getElementById('chart-noAlarm-report'));
loadNoReadChart(noAlarmChart,url,name);
}
});
//监听Esc事件
$(document).keyup(function(event){
if(event.keyCode === 27 || event.keyCode === 96){
layer.closeAll();
}
});
$("button.isRead").unbind().on("click",function () {
var $dom = $(this);
$("button.isRead").removeClass("active")
$dom.addClass("active")
loadWorkReportTable();
});
// 日期方式选择
$('#btns-workreport-time button').click(function () {
$.each($("button.date"),function (i,e) {
var $dom = $(e);
if($dom.hasClass("active")){
$dom.removeClass("active")
}
})
$("#dateLimit").val('')
dateLimit = ''
$("#btns-workreport-time button").removeClass("active");
$(this).addClass("active");
createTime = ($(this).data("period"))
reloadAllChange();
});
// 回车搜索
$('[lay-filter="form-workreport-condition"] input').keydown(function (e) {
if (e.keyCode === 13) {
reloadAllChange();
}
});
// 单选框改变搜索
form.on('radio(workReport-currIsRead)', reloadAllChange);
form.on('radio(workReport-repType)', reloadAllChange);
// 下拉框改变搜索
form.on('select(slt-workreport-group)', reloadAllChange);
form.on('select(slt-workreport-user)', reloadAllChange);
// 勾选标记为已读事件
$('#btn-workreport-set-read').click(function () {
var checks = table.checkStatus('table-workreport-view').data;
checks = $.grep(checks, item => item.currIsRead == '0');
checks = $.map(checks, item => item.id);
setRead(checks);
});
// 标记全部为已读事件
$('#btn-workreport-set-all-read').click(function () {
admin.req({
url: domainName + '/api-web/workreport/setRead/all'
}).done(function (response) {
if (response.success) {
layer.msg('执行操作成功!', {icon: 1, time: 3000});
loadReadReport();
loadWorkReportTable();
} else {
layer.msg('执行操作失败!', {icon: 2, time: 3000});
}
});
});
// 加载工作汇报表格
function loadWorkReportTable() {
var conditions = form.val('form-workreport-condition');
$.each($("button.isRead"),function (i,e) {
var $dom = $(e);
if($dom.hasClass("active")){
conditions["currIsRead"] = $dom.data("type")
}
})
if(manufacturerId!=''){
conditions.manufacturerName = manufacturerId;
}
Object.assign(conditions, {access_token: accessToken, createTime: createTime, viewMode: 'true',dateLimit:dateLimit});
table.render({
elem: '#table-workreport-view',
url: domainName + '/api-web/workreport/page',
where: conditions,
height: 'full-360',
page: {
layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
theme: '#1E9FFF'
},
end: function (e) {
form.render()
},
limit: common.limit,
limits: common.limits,
even: true,
cols: [[{
type: 'checkbox'
}, {
type: 'numbers', title: '序号'
}, {
field: 'repType', title: '汇报类型', align: 'center',
templet: function (d) {
var typeName = ''
switch (d.repType) {
case 'day':
typeName = '日报'
break;
case 'week':
typeName = '周报'
break;
case 'month':
typeName = '月报'
break;
}
return typeName
}
}, {
field: 'repTitle', title: '标题', align: 'center', minWidth: 200,event: 'serRead',
templet: '<div><span data-id="{{d.id}}" data-rep="{{d.repType}}" class="layui-table-link view-workReport-title" >{{d.repTitle}}</span></div>'
}, {
field: 'attachmentList', title: '附件数量', align: 'center',
templet: '<div><span data-id="{{d.id}}" class="layui-table-link view-workReport-attachment">{{d.attachmentList.length}}</span></div>'
}, {
field: 'currIsRead', title: '状态', align: 'center',
templet: function (d) {
if (d.currIsRead == '1') {
return '<span class="green">已读</span>';
} else {
return '<span class="red">未读</span>';
}
}
}, {
field: 'reportUserList', title: '未读人员', align: 'center',minWidth:'200',
templet: function (d) {
var userName = [];
$.each(d.reportUserList, function (i, v) {
if (v.isRead == 0) {
userName.push(v.nickName)
}
});
if(userName.length === 0){
userName = ['无']
}
return userName.toString();
}
}, {
field: 'reportUserList', title: '已读人员', align: 'center',minWidth:'200',
templet: function (d) {
var userName = [];
$.each(d.reportUserList, function (i, v) {
if (v.isRead == 1) {
userName.push(v.nickName)
}
});
if(userName.length === 0){
userName = ['无']
}
return userName.toString();
}
}, {
field: 'createUserNickName', title: '上报人', align: 'center',
}, {
field: 'manufacturerName', title: '厂商', align: 'center',
}, {
field: 'createTime', title: '上报时间', align: 'center',
}]],
done: function () {
//获取附件列表
$('.view-workReport-attachment').on('click', function () {
common.openWin('workreport/list', '附件', {id: $(this).data('id'), type: 'attachment'}, ['确定', '取消']);
});
}
});
}
//监听单元格事件
table.on('tool(table-workreport-view)', function(obj){
var data = obj.data;
if(obj.event === 'serRead'){
var id = data['id'];
var repType = data['repType'];
admin.req({
url: domainName + '/api-web/workreport/setRead',
data: {workReportIds: [id]}
}).done(function (response) {
if (response.success) {
obj.update({
currIsRead: "1"
});
loadReadReport();
}
});
common.openWin('workreport/add', '查看', {id: id, repType: repType, viewType: 'view'}, ['关闭'], function f() {
return true;
}, null, null, {
success: function () {
form.render();
}
})
}
});
// 加载查询条件下拉框
function loadConditionSelect() {
admin.req({
url: domainName + '/api-web/bWorkreportGroup/findManufacturerList'
}).done(function (response) {
var options = "<option value=''>=选择厂商=</option>";
$.each(response.data, function (i, v) {
options += "<option value='" + v.id + "'>" + v.manufacturerName + "</option>"
});
$('#slt-workreport-group').html(options);
if(manufacturerId!=''){
$('#slt-workreport-group').val(manufacturerId)
}
form.render();
});
$.ajax({
url: domainName + '/api-user/users/getAll',
data: {
access_token: accessToken
},
success: function (response) {
var options = "<option value=''>=选择汇报人=</option>";
$.each(response, function (i, v) {
options += "<option value='" + v.username + "'>" + v.nickname + "</option>"
});
$('#slt-workreport-user').html(options);
form.render();
}
});
}
// 加载最近日报汇报统计图表
function loadDailyChart() {
var conditions = form.val('form-workreport-condition');
Object.assign(conditions, {access_token: accessToken, createTime: createTime, viewMode: 'true',dateLimit:dateLimit});
admin.req({
url: domainName + '/api-web/workreport/chart/daily',
data: conditions
}).done(function (response) {
var chartData = response.map;
var needReportList = chartData.needReportList;
var reportedList = chartData.reportedList;
var xAxisData = chartData.xAxisData;
var option = {
backgroundColor: 'rgba(255, 255, 255, 1)',
tooltip: {
trigger: 'axis',
extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
axisPointer: {
type: 'shadow',
shadowStyle: {
color: '#ffffff',
shadowColor: 'rgba(225,225,225,1)',
shadowBlur: 5
}
}
},
grid: {
top: 10,
right: 5
},
xAxis: {
type: 'category',
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
margin: 20,
},
data: xAxisData
},
yAxis: {
axisLine: {
show: false
},
axisTick: {
show: false
}
},
series: [{
name: '应报',
data: needReportList,
type: 'bar',
barWidth: 20,
zlevel: 9,
itemStyle: {
borderWidth: 1,
zlevel: 99,
borderColor: '#a8d4ff', //同背景色一样
color: '#e3f2ff'
},
emphasis: {
itemStyle: {
borderWidth: 1,
zlevel: 99,
borderColor: '#a8d4ff', //同背景色一样
color: '#e3f2ff'
}
}
}, {
name: '已报',
data: reportedList,
type: 'bar',
barWidth: 20,
barGap: '-100%',
zlevel: 9,
color: '#2094ff'
}]
};
var lastWeekChart = echarts.init(document.getElementById('chart-daily-report'));
lastWeekChart.setOption(option);
});
}
// 日报/周报/月报 应报已报统计
function loadReportableChart() {
var conditions = form.val('form-workreport-condition');
Object.assign(conditions, {access_token: accessToken, createTime: createTime, viewMode: 'true',dateLimit:dateLimit});
admin.req({
url: domainName + '/api-web/workreport/chart/reptype',
data: conditions
}).done(function (response) {
var chartData = response.map;
var needReportList = chartData.needReportList;
var reportedList = chartData.reportedList;
var xAxisData = ['日报', '周报', '月报'];
var option = {
backgroundColor: 'rgba(255, 255, 255, 1)',
tooltip: {
trigger: 'axis',
extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
axisPointer: {
type: 'shadow',
shadowStyle: {
color: '#ffffff',
shadowColor: 'rgba(225,225,225,1)',
shadowBlur: 5
}
}
},
grid: {
top: 10,
right: 5
},
xAxis: {
type: 'category',
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
margin: 20,
},
data: xAxisData
},
yAxis: {
axisLine: {
show: false
},
axisTick: {
show: false
}
},
series: [{
name: '应报',
data: needReportList,
type: 'bar',
barWidth: 20,
zlevel: 9,
itemStyle: {
borderWidth: 1,
zlevel: 99,
borderColor: '#a8d4ff', //同背景色一样
color: '#e3f2ff'
},
emphasis: {
itemStyle: {
borderWidth: 1,
zlevel: 99,
borderColor: '#a8d4ff', //同背景色一样
color: '#e3f2ff'
}
}
}, {
name: '已报',
data: reportedList,
type: 'bar',
barWidth: 20,
barGap: '-100%',
zlevel: 9,
color: '#2094ff'
}]
};
var lastFiveTimesChart = echarts.init(document.getElementById('chart-reportable-report'));
lastFiveTimesChart.setOption(option);
});
}
// 各厂商应报已报情况
function loadCompanyReport() {
var conditions = form.val('form-workreport-condition');
Object.assign(conditions, {access_token: accessToken, createTime: createTime, viewMode: '',dateLimit:dateLimit});
admin.req({
url: domainName + '/api-web/workreport/chart/group',
data: conditions
}).done(function (response) {
var chartData = response.map;
var groupList = chartData.groupList;
var needReportList = chartData.needReportList;
var reportedList = chartData.reportedList;
var xData = [];
var groupData = [];
$.each(groupList, function (i, v) {
xData.push(v);
groupData.push({
name: v,
value: 1
});
});
var series = [{
name: '应报',
data: needReportList,
barWidth: 20,
type: 'bar',
label: {
show: true,
position: 'top',
textStyle: {
color: '#555'
},
formatter:function (data) {
return reportedList[data.dataIndex] +'/'+ data.value
}
},
itemStyle: {
normal: {
color: (params) => {
var colors = ['#b6c2ff', '#96edc1', '#fcb75b'];
return colors[params.dataIndex % 3]
}/*,
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: 'black',
fontSize: 16
}
}*/
}
},
xAxisIndex: 0,
yAxisIndex: 0
}, {
name: '已报',
data: reportedList,
barWidth: 20,
type: 'bar',
barGap: '-100%',
label: {
show: false,
position: 'top',
textStyle: {
color: '#555'
}
},
itemStyle: {
normal: {
color: (params) => {
var colors = ['#4150d8', '#28bf7e', '#ed7c2f'];
return colors[params.dataIndex % 3]
},
/*label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: 'black',
fontSize: 16
}
}*/
}
},
xAxisIndex: 0,
yAxisIndex: 0
}/*, {
data: groupData,
label: {
show: true,
position: 'inside',
formatter: '{b}',
textStyle: {
color: '#777'
}
},
type: 'bar',
barGap: 0,
barWidth: 100. / groupList.length + '%',
itemStyle: {
normal: {
color: '#fff'
}
},
xAxisIndex: 1,
yAxisIndex: 1
}*/];
/**
双X轴标签对应，伪实现思路：
底部的标签也是柱状图，对应包含的区域为上方X轴条数占总数的比例，设为宽度即可
*/
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: [{
top: 20,
bottom: 70,
right: 5
}, {
height: 30,
bottom: 30,
right: 5
}],
xAxis: [{
type: 'category',
data: xData,
gridIndex: 0,
axisLabel: {
color: '#333',
show: true,
interval:0,
rotate:25
},
axisLine: {
lineStyle: {
color: '#e7e7e7'
}
},
axisTick: {
lineStyle: {
color: '#e7e7e7'
}
},
zlevel: 2
}, {
type: 'category',
gridIndex: 1,
axisLine: {
show: false
},
zlevel: 1
}],
yAxis: [{
type: 'value',
gridIndex: 0,
axisLabel: {
color: '#333'
},
splitLine: {
lineStyle: {
type: 'dashed'
}
},
axisLine: {
lineStyle: {
color: '#ccc'
}
},
axisTick: {
lineStyle: {
color: '#ccc'
}
}
}, {
type: 'value',
gridIndex: 1,
axisLabel: {
show: false
},
axisLine: {
show: false
},
splitLine: {
show: false
},
axisTick: {
show: false
}
}],
series: series
};
companyChart.setOption(option)
});
}
//点击弹出详情
companyChart.on('click',function (params) {
reportDetails(params.name)
})
//未读人员
function loadNoReadChart(echartObject,url,name) {
var xData = ""
var yData = ""
echartObject.showLoading({
text: 'loading',
color: '#cbc6c6',
textColor: '#cbc6c6',
maskColor: 'rgba(255, 255, 255, 0.2)',
zlevel: 0,
});
admin.req({
url: url
}).done(function (response) {
if (response && response.map) {
xData = response.map.userList;
yData = response.map.valueList;
var series = [{
name: name,
data: yData,
barWidth: 20,
type: 'bar',
label: {
show: true,
position: 'top',
textStyle: {
color: '#555'
},
},
itemStyle: {
normal: {
color: (params) => {
var colors = ['#b6c2ff', '#96edc1', '#fcb75b'];
return colors[params.dataIndex % 3]
}
}
},
}]
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: [{
top: 20,
bottom: 35,
left: 30,
right: 5
}],
xAxis: [{
type: 'category',
data: xData,
axisLabel: {
color: '#333',
show: true,
interval:0,
rotate:19,
fontSize : 10 //更改坐标轴文字大小
},
axisLine: {
lineStyle: {
color: '#e7e7e7'
}
},
axisTick: {
lineStyle: {
color: '#e7e7e7'
}
},
zlevel: 1
}],
yAxis: [{
type: 'value',
gridIndex: 0,
axisLabel: {
color: '#333'
},
splitLine: {
lineStyle: {
type: 'dashed'
}
},
axisLine: {
lineStyle: {
color: '#ccc'
}
},
axisTick: {
lineStyle: {
color: '#ccc'
}
}
}],
series: series
}
echartObject.hideLoading();
echartObject.setOption(option)
}
})
}
//弹窗显示汇报详情
function reportDetails(name) {
layer.open({
title: ['汇报详细', 'font-size:18px;'],
type: 1,
area: ['70%', '60%'],
content: '<div class="layui-card" style="margin-top: 30px;box-shadow:none"><div class="layui-card-body"><table id="reportDetails" lay-filter="reportDetails"></table></div></div>',
btn: ['关闭'],
success: function(index, layero) {
reportDetailsTable(name)
},
yes: function (index, layero) {
layer.close(index)
}
});
}
$("#notReportCountBtn").unbind().on("click",function () {
layer.open({
title: ['汇报详细', 'font-size:18px;'],
type: 1,
area: ['70%', '60%'],
content: '<div class="layui-card" style="margin-top: 30px;box-shadow:none"><div class="layui-card-body"><table id="reportDetails" lay-filter="reportDetails"></table></div></div>',
btn: ['关闭'],
success: function(index, layero) {
reportDetailsTable();
},
yes: function (index, layero) {
layer.close(index)
}
});
})
function reportDetailsTable(name) {
var conditions = form.val('form-workreport-condition');
if (name) conditions["name"] = name
conditions["access_token"] = accessToken
conditions["createTime"] = createTime
conditions["viewMode"] = 'true'
conditions["dateLimit"] = dateLimit
reportDetailTable = table.render({
elem: '#reportDetails',
url: domainName + '/api-web/workreport/group/reportDetails',
where: conditions,
end: function (e) {
form.render()
},
even: true,
cols: [[{
type: 'checkbox'
}, {
type: 'numbers', title: '序号'
}, {
field: 'createBy', title: '组负责人', align: 'center'
}, {
field: 'needReport', title: '应报数量', align: 'center'
}, {
field: 'readCount', title: '已报数量', align: 'center'
}, {
field: 'needReport', title: '未报数量', align: 'center',style:'color:red',templet:function (d) {
return d.needReport-d.readCount
}
}]],
})
}
//未读统计报表导出
$('#notReportExportBtn').unbind().on('click',function () {
var conditions = form.val('form-workreport-condition');
var url = common.domainName + '/api-web/workreport/group/exportReportDetails?access_token=' + accessToken + '&createTime=' + createTime + '&viewMode=' + 'true' + '&dateLimit=' + dateLimit + '&repType=' + conditions.repType + '&createBy=' + conditions.createBy;
window.open(url)
})
// 已读未读报表
function loadReadReport() {
var conditions = form.val('form-workreport-condition');
Object.assign(conditions, {access_token: accessToken, createTime: createTime, viewMode: 'true',dateLimit:dateLimit});
admin.req({
url: domainName + '/api-web/workreport/chart/read',
data: conditions
}).done(function (response) {
var chartData = response.map;
var readCount = chartData.readCount;
var unReadCount = chartData.unReadCount;
var readPercent = (readCount / (readCount + unReadCount) * 100).toFixed(0);
readPercent = isNaN(readPercent) ? '0%' : readPercent + '%';
let echartData = [{
name: "已读",
value: readCount
}, {
name: "未读",
value: unReadCount
}];
var formatNumber = function (num) {
let reg = /(?=(\B)(\d{3})+$)/g;
return num.toString().replace(reg, ',');
};
var option = {
color: ['#367bec', '#00cefc'],
title: [{
text: '{val|' + readPercent + '}',
top: 'center',
left: 'center',
textStyle: {
rich: {
name: {
fontSize: 14,
fontWeight: 'normal',
color: '#666666',
padding: [10, 0]
},
val: {
fontSize: 32,
fontWeight: 'bold',
color: '#333333',
}
}
}
}],
series: [{
type: 'pie',
radius: ['45%', '60%'],
center: ['50%', '50%'],
data: echartData,
hoverAnimation: false,
itemStyle: {
normal: {
borderWidth: 2
}
},
labelLine: {
normal: {
length: 20,
length2: 120,
lineStyle: {
color: '#e6e6e6'
}
}
},
label: {
normal: {
formatter: params => {
return (
'{icon|●}{name|' + params.name + '}{value|' +
formatNumber(params.value) + '}'
);
},
padding: [0, -100, 25, -100],
rich: {
icon: {
fontSize: 16
},
name: {
fontSize: 14,
padding: [0, 10, 0, 4],
color: '#666666'
},
value: {
fontSize: 18,
fontWeight: 'bold',
color: '#333333'
}
}
}
},
}]
};
var readChart = echarts.init(document.getElementById('chart-read-report'));
readChart.setOption(option);
});
}
function setRead(workReportIds) {
if (workReportIds.length == 0) {
layer.msg('请至少选择一项未读的数据。', {icon: 0, time: 3000});
return false;
}
admin.req({
url: domainName + '/api-web/workreport/setRead',
data: {workReportIds: workReportIds}
}).done(function (response) {
if (response.success) {
// layer.msg('执行操作成功!', {icon: 1, time: 3000});
loadReadReport();
} else {
// layer.msg('执行操作失败!', {icon: 2, time: 3000});
}
});
}
//获取url中的type值
function getUrlType() {
var href = window.location.href;
href = href.substr(href.indexOf("#"),href.length);
var url = href.split("/");
if (url.length <= 1) {
return "";
}
for (var i = 0; i < url.length; i++) {
if (url[i].indexOf("type") > -1) {
type = url[i].split("=")[1]
}
if (url[i].indexOf("repType") > -1) {
urlRepType = url[i].split("=")[1]
}
if (url[i].indexOf("manufacturerId") > -1) {
manufacturerId = url[i].split("=")[1]
}
}
}
// 图表，表格重新加载
function reloadAllChange() {
loadWorkReportTable();
// loadDailyChart();
loadCompanyReport();
loadReadReport();
var url = domainName + '/api-web/workreport/chart/noReport?createTime=' + createTime + '&dateLimit=' + dateLimit;
var name = '未报';
var noReportChat = echarts.init(document.getElementById('chart-noReport-report'));
loadNoReadChart(noReportChat,url,name);
// loadNoReadChart()
// loadReportableChart();
}
});
});
\ No newline at end of file
... ...
... ... @@ -5550,6 +5550,17 @@ form.form-edit .layui-form-item .layui-input-inline {
margin-right: 0;
float: left;
}
.layui-form-item .inline-onethird {
display: flex;
width: 33%;
margin-right: 0;
float: left;
}
.layui-form-item .inline-onethird .layui-input-inline {
margin-right: 2px;
flex: 1;
}
.layui-form-item .inline-half .layui-input-inline {
margin-right: 2px;
... ...
/* 首页图标 */
.monitor-home-home{
background: url('../img/menu/首页.png')!important;
width: 14px;
height: 14px;
margin-top: -7px !important;
}
.monitor-home-home:before{
content: '';
}
/*我的工作台*/
.monitor-home-template-1{
background: url('../img/menu/我的面板.png')!important;
width: 14px;
height: 14px;
margin-top: -7px !important;
}
.monitor-home-template-1:before{
content: '';
}
/*告警中心*/
.monitor-home-notice{
background: url('../img/menu/告警中心.png')!important;
width: 14px;
height: 14px;
margin-top: -7px !important;
}
.monitor-home-notice:before{
content: '';
}
/*视图中心*/
.monitor-home-console{
background: url('../img/menu/视图中心.png')!important;
width: 14px;
height: 14px;
margin-top: -7px !important;
}
.monitor-home-console:before{
content: '';
}
/*运维管理*/
.monitor-home-release{
background: url('../img/menu/运维管理.png')!important;
width: 14px;
height: 14px;
margin-top: -7px !important;
}
.monitor-home-release:before{
content: '';
}
/*智能巡检*/
.monitor-home-engine{
background: url('../img/menu/巡检.png')!important;
width: 14px;
height: 14px;
margin-top: -7px !important;
}
.monitor-home-engine:before{
content: '';
}
/*综合监控*/
.monitor-home-chart{
background: url('../img/menu/综合监控.png')!important;
width: 14px;
height: 14px;
margin-top: -7px !important;
}
.monitor-home-chart:before{
content: '';
}
/*统计报表*/
.monitor-home-tabs{
background: url('../img/menu/统计报表.png')!important;
width: 14px;
height: 14px;
margin-top: -7px !important;
}
.monitor-home-tabs:before{
content: '';
}
/*系统管理*/
.monitor-home-set-fill{
background: url('../img/menu/系统管理.png')!important;
width: 14px;
height: 14px;
margin-top: -7px !important;
}
.monitor-home-set-fill:before{
content: '';
}
/*信息协同管理*/
.monitor-home-cols{
background: url('../img/menu/信息协同管理.png')!important;
width: 14px;
height: 14px;
margin-top: -7px !important;
}
.monitor-home-cols:before{
content: '';
}
... ...
<!--工作汇报表单-->
<article>
<div class="layui-card-body">
<fieldset class="layui-elem-field layui-field-title">
<legend>日志信息</legend>
</fieldset>
<form class="layui-form layui-form-pane" lay-filter="add-workReport-form"
id="add-workReport-form" onsubmit="return false;">
<input hidden name="id" id="id" lay-verify="checkReportIsExist">
<div class="layui-form-item">
<div class="layui-inline inline-half">
<label class="layui-form-label">汇报类型</label>
<div class="layui-input-inline">
<select name="repType" id="workReport_type" lay-filter="workReport_type">
<option value="day">日报</option>
<option value="week">周报</option>
<option value="month">月报</option>
</select>
</div>
</div>
<div class="layui-inline inline-half">
<label class="layui-form-label">日期</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" name="createTime" id="createTime">
</div>
</div>
</div>
<div class="layui-form-item hide" id="form-item-repTitle">
<div class="layui-inline inline-half">
<label class="layui-form-label">标题</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" name="repTitle">
</div>
</div>
<div class="layui-inline inline-half">
<label class="layui-form-label">汇报人</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" name="createUserNickName" readonly="readonly">
</div>
</div>
</div>
<div class="layui-form-item report_alarmStatic">
<label class="layui-form-label">告警信息</label>
<div class="layui-input-block">
<input type="text" class="layui-input" name="alarmStatic" id="alarmStatic" readonly>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label textarea-label work_finish" style="height: 400px"></label>
<div class="layui-input-block">
<textarea style="height: 400px" class="layui-textarea" name="workAccomplish"
lay-verify="required" cols="30" rows="20"></textarea>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label textarea-label work_conclusion"></label>
<div class="layui-input-block">
<textarea class="layui-textarea" name="workSummary" lay-verify="required"></textarea>
</div>
</div>
<div class="layui-form-item plan">
<label class="layui-form-label textarea-label work_plan"></label>
<div class="layui-input-block">
<textarea class="layui-textarea" name="workPlan"></textarea>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label textarea-label work_help"></label>
<div class="layui-input-block">
<textarea class="layui-textarea" name="workHelp" lay-verify="required"></textarea>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline" style="width: 90%">
<label class="layui-form-label">选择附件</label>
<div class="layui-input-block attachment">
<input type="text" class="layui-input" readonly id="attachmentInput">
</div>
</div>
<div class="layui-inline">
<button class="layui-btn layui-btn-normal" id="attachment">附件</button>
<button id="upload_btn" hidden>附件</button>
</div>
</div>
<div class="layui-form-item" style="display: none" id="add-workReport-form-atta">
<label class="layui-form-label">已存附件</label>
<div class="layui-input-inline"
style="width: 90% !important;max-height: 130px;overflow-y: auto;margin-left: 10px;">
<div class="tags" id="selecte_content_id"></div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">接收人</label>
<div class="layui-input-block reportUser">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label textarea-label">备注</label>
<div class="layui-input-block">
<textarea class="layui-textarea" name="remark"></textarea>
</div>
</div>
<button type="submit" lay-submit lay-filter="workReport-form-save-id" class="layui-btn hide"
id="workReport-form-save-id">保存
</button>
<table id="table-report-add-attachment" class="hide"></table>
</form>
</div>
<div class="layui-card-body reportAlarm">
<fieldset class="layui-elem-field layui-field-title">
<legend>告警信息</legend>
</fieldset>
<table id="table-report-alarm"></table>
</div>
</article>
<script>
layui.use('workReportAdd', function (fn) {
fn({{d}})
})
</script>
<style>
#add-workReport-form .layui-form-label {
width: 120px;
/* padding: 8px 12px; */
text-align: left !important;
}
#add-workReport-form .layui-input-block{
margin-left: 120px !important;
}
.tags{
margin-top:5px;
}
.tags span {
height: 20px;
margin-right: 10px;
margin-bottom: 3px;
padding: 5px 10px 5px 10px;
float: left;
white-space: nowrap;
color:#fff;
background-color:#009688;
text-shadow: 1px 1px 1px rgba(0, 0, 0, .15);
}
.tags .close {
font-weight: bold;
line-height: 20px;
margin-left:10px;
cursor: pointer;
text-align: center;
color: #fff;
border: 0 none;
background: transparent none repeat scroll 0 0;
}
</style>
... ...
<title>工作汇报配置</title>
<article class="page-container">
<div class="page-panel">
<div class="main">
<div class="layui-card">
<div class="layui-card-header">
<div class="layui-status search_panel">
<form class="layui-form layui-card-header layuiadmin-card-header-auto"
lay-filter="workReportConfig-form" onsubmit="return false;">
<div class="layui-form-item">
<div class="layui-inline">
<div class="layui-input-inline">
<input type="text" id="adminName" class="layui-input" autocomplete="off"
placeholder="汇报人">
</div>
</div>
<div class="layui-inline">
<div class="layui-input-inline">
<input type="text" id="userName" class="layui-input" autocomplete="off"
placeholder="接收人">
</div>
</div>
<div class="layui-inline">
<div class="layui-input-inline">
<select name="groupName" id="groupName" lay-filter="groupName">
<option value="">=配置名称=</option>
</select>
</div>
</div>
<div class="layui-inline">
<div class="layui-input-inline">
<select name="theirType" id="theirType" lay-filter="theirType">
<option value="">全部</option>
<option value="1">日志类型</option>
<option value="2">文档类型</option>
</select>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="layui-card-body">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm layui-btn-normal" id="workReport_config_add">
新增
</button>
<button class="layui-btn layui-btn-sm layui-btn-normal" id="workReport_config_delete">
删除
</button>
</div>
<table id="workReportConfigTable" lay-filter="workReportConfigTable"></table>
</div>
</div>
</div>
</div>
</article>
<script>
layui.use('reportConfigIndex', function (fn) {
fn();
});
</script>
\ No newline at end of file
... ...
<form class="layui-form layui-form-pane" lay-filter="add-config-form"
name="add-config-form" onsubmit="return false;">
<input hidden name="id" id="id">
<div class="layui-form-item">
<label class="layui-form-label">名称</label>
<div class="layui-input-block">
<input type="text" id="name" name="name" lay-verify="required|groupName" lay-reqtext="请输入名称"
class="layui-input" autocomplete="off" placeholder="请输入名称">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">所属厂商</label>
<div class="layui-input-block">
<select name="manufacturerId" class="layui-select"></select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">所属类型</label>
<div class="layui-input-block">
<select name="theirType" id="config_theirType" lay-filter="config_theirType" lay-verify="required">
<option value="1">日志类型</option>
<option value="2">文档类型</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">汇报人</label>
<div class="layui-input-block admin">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label" id="config_receive_user">接收人</label>
<div class="layui-input-block user">
</div>
</div>
<!-- <div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">汇报类型</label>
<div class="layui-input-inline">
<input type="radio" name="reportType" value="day" title="日报" lay-filter="config_repType">
<input type="radio" name="reportType" value="week" title="周报" lay-filter="config_repType">
<input type="radio" name="reportType" value="month" title="月报" lay-filter="config_repType">
</div>
</div>
</div>-->
<div class="layui-form-item">
<label class="layui-form-label textarea-label">描述</label>
<div class="layui-input-block">
<textarea class="layui-textarea" name="remark"></textarea>
</div>
</div>
<button type="submit" lay-submit class="layui-btn hide" lay-filter="config-form-save-id" id="config-form-save-id">保存</button>
</form>
<script>
layui.use('reportConfigAdd',function (fn) {
fn({{d}})
})
</script>
... ...
<article class="page-container">
<div class="page-panel">
<div class="main">
<div class="layui-card">
<div class="layui-card-header">
</div>
<div class="layui-card-body">
<table id="reportUserTable" lay-filter="reportUserTable"></table>
</div>
</div>
</div>
</div>
</article>
<script>
layui.use('reportConfigList', function (fn) {
fn({{d}})
});
</script>
\ No newline at end of file
... ...
<title>工作汇报</title>
<article class="page-container">
<div class="page-panel">
<div class="main">
<div class="layui-card">
<div class="layui-card-header">
<div class="layui-status search_panel">
<form class="layui-form layui-card-header layuiadmin-card-header-auto"
lay-filter="workReport-form" onsubmit="return false;">
<div class="layui-form-item">
<div class="layui-inline">
<div class="layui-input-inline" style="width: 300px">
<input type="text" name="repTitle" id="workReport_title"
placeholder="标题搜索，支持内容模糊匹配" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<div class="layui-input-inline auto-width">
<input type="radio" name="isRead" value="" title="全部" checked
lay-filter="workReport_isRead">
<input type="radio" name="isRead" value="0" title="无人阅读"
lay-filter="workReport_isRead">
<input type="radio" name="isRead" value="1" title="有人阅读"
lay-filter="workReport_isRead">
</div>
</div>
<div class="layui-inline">
<div class="layui-input-inline auto-width">
<input type="radio" name="repType" value="" title="全部" checked
lay-filter="workReport_type">
<input type="radio" name="repType" value="day" title="日报"
lay-filter="workReport_type">
<input type="radio" name="repType" value="week" title="周报"
lay-filter="workReport_type">
<input type="radio" name="repType" value="month" title="月报"
lay-filter="workReport_type">
</div>
</div>
<div class="layui-inline layui-btn-group time-group" id="createTimeBtn">
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm active"
data-period="today">今天
</button>
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm"
data-period="lastWeek">上周
</button>
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm"
data-period="thisWeek">本周
</button>
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm"
data-period="lastMonth">上月
</button>
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm"
data-period="thisMonth">本月
</button>
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm"
data-period="thisQuarter">本季度
</button>
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm"
data-period="all">全部
</button>
</div>
</div>
</form>
</div>
</div>
<div class="layui-card-body">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm layui-btn-normal" id="workReport_create_day">
新增日报
</button>
<button class="layui-btn layui-btn-sm layui-btn-normal" id="workReport_create_week">
新增周报
</button>
<button class="layui-btn layui-btn-sm layui-btn-normal" id="workReport_create_month">
新增月报
</button>
</div>
<table id="workReportTable" lay-filter="workReportTable"></table>
</div>
</div>
</div>
</div>
</article>
<script>
layui.use('workReportIndex', function (fn) {
fn();
});
</script>
<style>
.layui-btn-timeTag {
background-color: #999999;
border-radius: 5px;
}
</style>
\ No newline at end of file
... ...
<article class="page-container">
<div class="page-panel">
<div class="main">
<div class="layui-card">
<div class="layui-card-header">
</div>
<div class="layui-card-body">
<table id="attachmentTable" lay-filter="attachmentTable"></table>
<table id="reportUserTable" lay-filter="reportUserTable"></table>
</div>
</div>
</div>
</div>
</article>
<script>
layui.use('workReportList', function (fn) {
fn({{d}})
});
</script>
\ No newline at end of file
... ...
<title>工作日志查看</title>
<article>
<div class="page-panel workview">
<div class="main">
<div class="layui-card">
<div class="layui-card-header">
<div class="layui-status">
<form class="layui-form layui-card-header" onsubmit="return false" lay-filter="form-workreport-condition">
<div class="layui-form-item">
<div class="layui-inline">
<div class="layui-input-inline layui-input-inline--long">
<input type="text" id="monitor_keyword" name="repTitle" placeholder="标题搜索，支持内容模糊匹配" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<div class="layui-input-inline">
<select name="manufacturerName" id="slt-workreport-group" lay-filter="slt-workreport-group" lay-search>
<option value="">=选择厂商=</option>
</select>
</div>
</div>
<div class="layui-inline">
<div class="layui-input-inline">
<select name="createBy" id="slt-workreport-user" lay-filter="slt-workreport-user" lay-search>
<option value="">=选择汇报人=</option>
</select>
</div>
</div>
<!-- <div class="layui-inline">
<div class="layui-input-inline">
<input type="radio" name="currIsRead" value="0" title="未读" lay-filter="workReport-currIsRead">
<input type="radio" name="currIsRead" value="1" title="已读" lay-filter="workReport-currIsRead">
</div>
</div>-->
<div class="layui-inline">
<div class="layui-input-inline" style="width: auto">
<input type="radio" name="repType" value="day" title="日报" checked="checked" lay-filter="workReport-repType">
<input type="radio" name="repType" value="week" title="周报" lay-filter="workReport-repType">
<input type="radio" name="repType" value="month" title="月报" lay-filter="workReport-repType">
</div>
</div>
<div class="layui-btn-group time-group" id="btns-workreport-time" style="padding: 0">
<button type="button" class="layui-btn layui-btn-primary layui-btn-xs active date" data-period="today">今天</button>
<button type="button" class="layui-btn layui-btn-primary layui-btn-xs date" data-period="lastWeek">上周</button>
<button type="button" class="layui-btn layui-btn-primary layui-btn-xs date" data-period="thisWeek">本周</button>
<button type="button" class="layui-btn layui-btn-primary layui-btn-xs date" data-period="lastMonth">上月</button>
<button type="button" class="layui-btn layui-btn-primary layui-btn-xs date" data-period="thisMonth">本月</button>
<button type="button" class="layui-btn layui-btn-primary layui-btn-xs date" data-period="thisQuarter">本季度</button>
<button type="button" class="layui-btn layui-btn-primary layui-btn-xs date" data-period="">全部</button>
</div>
<div class="layui-inline" style="margin-left: 10px">
<div class="layui-input-inline" style="width: auto">
<input type="text" name="dateLimit" id="dateLimit" autocomplete="off" class="layui-input" readonly placeholder="其他日期范围">
</div>
</div>
</div>
</form>
</div>
</div>
<div style="display: flex" class="layui-card-echart">
<!--<div style="flex-grow: 1">
<h5 class="lay-row-title">日报统计</h5>
<div class="pie-chart" id="chart-daily-report"></div>
</div>
<div style="flex-grow: 1">
<h5 class="lay-row-title">应报已报统计</h5>
<div class="pie-chart" id="chart-reportable-report"></div>
</div>-->
<div style="flex-grow: 3;width: 60%!important;">
<h5 class="lay-row-title">厂商统计
<button class="layui-btn layui-btn-primary layui-btn-sm" style="float:right;" id="notReportCountBtn">未报统计</button>
<button class="layui-btn layui-btn-primary layui-btn-sm" style="float:right; margin-right: 10px" id="notReportExportBtn">统计报表</button>
</h5>
<div class="pie-chart" id="chart-company-report" style="min-height: 240px"></div>
</div>
<div style="flex-grow: 1">
<h5 class="lay-row-title">已读未读占比</h5>
<div class="pie-chart" id="chart-read-report" style="min-height: 240px"></div>
</div>
<div style="flex-grow: 1">
<div class="layui-tab layui-tab-card" lay-filter="report-tab" style="height: 250px;">
<ul class="layui-tab-title">
<li class="layui-this">未读</li>
<li>未报</li>
<li>未处理告警</li>
</ul>
<div class="layui-tab-content tab-content">
<div class="layui-tab-item layui-show">
<div class="pie-chart-clone" id="chart-noRead-report" style="height: 200px"></div>
</div>
<div class="layui-tab-item">
<div class="pie-chart-clone" id="chart-noReport-report" style="height: 200px"></div>
</div>
<div class="layui-tab-item">
<div class="pie-chart-clone" id="chart-noAlarm-report" style="height: 200px"></div>
</div>
</div>
</div>
<!-- <h5 class="lay-row-title">未读信息</h5>-->
<!-- <div class="pie-chart" id="chart-noRead-report"></div>-->
</div>
</div>
<div class="layui-card-body" style="margin-top: 10px;">
<div class="warn-btns">
<!--<button class="layui-btn layui-btn-sm layui-btn-normal" id="btn-workreport-set-read">
<i class="layui-icon">&#xe605;</i>勾选标记为已读
</button>
<button class="layui-btn layui-btn-sm layui-btn-normal" id="btn-workreport-set-all-read">
<i class="layui-icon">&#xe605;</i>全部标记为已读
</button>-->
<button class="layui-btn layui-btn-sm layui-btn-normal isRead active" data-type="">
全部
</button>
<button class="layui-btn layui-btn-sm layui-btn-normal isRead" data-type="1">
已读
</button>
<button class="layui-btn layui-btn-sm layui-btn-normal isRead" data-type="0">
未读
</button>
</div>
<table id="table-workreport-view" lay-filter="table-workreport-view"></table>
</div>
</div>
</div>
</div>
</article>
<script>
layui.use('workReportView', function (fn) {
fn();
});
</script>
\ No newline at end of file
... ...
... ... @@ -8,6 +8,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="/start/layui/css/layui.css" media="all">
<link rel="stylesheet" href="/src/style/css/menuIcon.css" media="all">
<script>
/^http(s*):\/\//.test(location.href) || alert('请先部署到 localhost 下再访问');
</script>
... ...
... ... @@ -1826,7 +1826,26 @@ layui.define(['xmSelect', 'md5'], function (exports) {
*/
admin.events.openOtherSystem = function (){
let code = $(this).attr("data-code");
admin.events[code].call();
if(code){
var isHttp = function (str) {
var RegUrl = new RegExp();
RegUrl.compile("^http|https+://[A-Za-z0-9-_]+\\.[A-Za-z0-9-_%&\?\/.=]+$");
if (!RegUrl.test(str)) {
return false;
}
return true;
}
if(isHttp(code)){
var accessToken = '';
layui.use(['sessions', 'common'], function () {
var sessions = layui.sessions;
accessToken = sessions.getToken()['access_token'];
});
window.open(`${code}?access_token=${accessToken}`);
}
admin.events[code].call();
}
}
//监听浏览器窗口变化
... ...
... ... @@ -82,42 +82,7 @@
<li class="layui-nav-item layui-hide-xs" lay-tips="全局搜索">
<a href="javascript:;" layadmin-event="globalSearch"><i class="layui-icon layui-icon-search"></i></a>
</li>
<!-- xwx add 首页增加业务健康度入口 2021-10-25 start-->
<li class="layui-nav-item" lay-unselect>
<script type="text/html" template lay-url="{{sessionStorage.getItem('domainName')}}/api-user/users/getUserByToken">
<a href="javascript:;"><img src="/src/style/img/icon-1.png" style="width: 16px;height: 16px;"></a>
{{#
var roles = '';
layui.each(d.object.sysRoles, function(idx, role){
roles += role.code+",";
});
}}
<li><input type="hidden" id="hq_entrance" value="{{roles}}"></li>
<dl class="layui-nav-child">
<!--调整到刷新旁边，此处去掉 lu 屏蔽 20211130-->
<!-- <dd layadmin-event="toBigScreen" style="text-align: left;"><a><img src="/src/style/img/icon-daping.png" style="width: 16px;height: 16px">&nbsp;&nbsp;大屏</a></dd>-->
<dd layadmin-event="toDZSWJScreen" style="text-align: left;"><a><img src="/src/style/img/icon-dianzishuiwuju.png" style="width: 16px;height: 16px">&nbsp;&nbsp;电子税务局大屏</a></dd>
<!--调整到首页旁边，此处去掉 joke 屏蔽 20211129-->
<!-- <dd layadmin-event="toYTHViewScreen" style="text-align: left;"><a><img src="/src/style/img/icon-yitihuadaping.png" style="width: 16px;height: 16px">&nbsp;&nbsp;一体化视图</a></dd>-->
<dd layadmin-event="toBiZhEalZhSYS" style="text-align: left;"><a><img src="/src/style/img/icon-YWJKD.png" style="width: 16px;height: 16px">&nbsp;&nbsp;业务健康度</a></dd>
<dd layadmin-event="toCMDB" style="text-align: left;"><a><img src="/src/style/img/icon-CMDB.png" style="width: 16px;height: 16px">&nbsp;&nbsp;CMDB</a></dd>
</dl>
</script>
</li>
<!-- xwx add 首页增加业务健康度入口 2021-10-25 end-->
<!-- <li class="layui-nav-item" lay-tips="一体化视图">-->
<!-- &lt;!&ndash; <a href="javascript:;" layadmin-event="toYTHViewScreen"><i class="layui-icon layui-icon-chart-screen"></i></a>&ndash;&gt;-->
<!-- <a href="javascript:;" layadmin-event="toYTHViewScreen" ><img src="/src/style/img/icon-yitihuadaping.png" style="width: 16px;height: 16px"></a>-->
<!-- </li>-->
<!-- <li class="layui-nav-item" lay-tips="大屏">-->
<!-- &lt;!&ndash; <a href="javascript:;" layadmin-event="toBigScreen"><i class="layui-icon layui-icon-chart-screen"></i></a>&ndash;&gt;-->
<!-- <a href="javascript:;" layadmin-event="toBigScreen" ><img src="/src/style/img/icon-daping.png" style="width: 16px;height: 16px"></a>-->
<!-- </li>-->
<!-- <li class="layui-nav-item" lay-tips="电子税务局">-->
<!-- &lt;!&ndash; <a href="javascript:;" layadmin-event="toBigScreen"><i class="layui-icon layui-icon-chart-screen"></i></a>&ndash;&gt;-->
<!-- <a href="javascript:;" layadmin-event="toDZSWJScreen" ><img src="/src/style/img/icon-dianzishuiwuju.png" style="width: 16px;height: 16px"></a>-->
<!-- </li>-->
<li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-unselect>
<li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-unselect>
<a href="javascript:;" layadmin-event="more"><i class="layui-icon layui-icon-more-vertical"></i></a>
</li>
<!-- <li class="layui-nav-item layui-hide-xs" lay-unselect>
... ... @@ -125,6 +90,24 @@
<i class="layui-icon layui-icon-theme"></i>
</a>
</li>-->
<li class="layui-nav-item" lay-unselect>
<script type="text/html" template lay-url="{{sessionStorage.getItem('domainName')}}/api-web/manage/ddic/list?ddicCategory=systems"
lay-done="layui.element.render('nav', 'layadmin-systems');">
<a href="javascript:;" title="第三方系统">
<span class="layui-icon layui-icon-slider"></span>
</a>
<dl class="layui-nav-child">
{{# layui.each(d.data, function(index, item){ }}
<dd style="text-align: left;" lay-filter="layadmin-systems">
<a href="javascript:;" layadmin-event="openOtherSystem" data-code="{{item.ddicCode}}" title="{{item.ddicName}}">
<i class="iconfont icon-tree {{ item.ddicDesc }}" />&nbsp;&nbsp;{{ item.ddicName }}
</a>
</dd>
{{# }); }}
</dl>
</script>
</li>
<li class="layui-nav-item layui-hide-xs" lay-unselect>
<a href="javascript:;" layadmin-event="fullscreen">
<i class="layui-icon layui-icon-screen-full"></i>
... ...
... ... @@ -18,7 +18,7 @@
<dependencies>
<dependency>
<groupId>com.honggroup</groupId>
<artifactId>hg-monitor-web-zj</artifactId>
<artifactId>hg-monitor-web-base</artifactId>
<version>0.0.1-SNAPSHOT</version>
</dependency>
</dependencies>
... ...
//活动告警
layui.define(['table', 'form', 'laydate', 'admin', 'layer', 'laytpl', 'common', 'sessions','commonDetail','soulTable', 'treeTable'], function (exports) {
var $ = layui.$;
var form = layui.form;
var layer = layui.layer;
var admin = layui.admin;
var table = layui.table;
var laydate = layui.laydate;
var laytpl = layui.laytpl;
var treeTable = layui.treeTable;
var common = layui.common;
var commonDetail=layui.commonDetail;
var domainName = common.domainName;
var todayStr = '';
//对外暴露的接口
exports('activewarning', function () {
var sessions = layui.sessions;
var accessToken = sessions.getToken()['access_token'];
var router = layui.router();
var alarmLevel = router.search.level; //告警级别
var checkList = common.checkPermission(accessToken);
var resId = router.search.resId;//资源Id
var kpiId = router.search.kpiId;//指标Id
var bizId = router.search.bizId;//业务Id
var alarmNo = router.search.alarmNo;//告警编号
var busIdSelect;
var busTypeList = [];
if(!bizId){
bizId='';
}
if (resId) {
resId = decodeURIComponent(resId);
}
if (alarmNo) {
$("#activewarningkw").val(alarmNo);
}
var netFlag = router.search.netFlag;//网络标识
var resType = router.search.restype ? router.search.restype : '';//资源类型
var soulTable = layui.soulTable;
var sortKey = '';
if ($("#alarmLevelSearchBox").val()) {
alarmLevel = $("#alarmLevelSearchBox").val()
}
//回显告警级别
$("#alarmLevelSearchBox").val(alarmLevel);
form.render("select");
function initDate() {
let startMin = {};
let endMax = {};
//开始时间
var start = laydate.render({
elem: '#activewarningStartdate'
, trigger: 'click'
,ready: function(date){
startMin=start.config.min;
}
, done: function (value, date) {
date.month--;
end.config.min = date;
if(value === ''){//点击清空
end.config.min = startMin;
}
form.render();
reloadTable()
}
});
//结束时间
var end = laydate.render({
elem: '#activewarningEnddate'
, trigger: 'click'
,ready: function(date){
endMax=end.config.max;
}
, done: function (value, date) {
date.month--;
start.config.max = date;
if(value === ''){//点击清空
start.config.max = endMax;
}
form.render();
reloadTable();
}
});
//绑定业务下拉选择数据
admin.req({
url: domainName + '/api-web/home/business/findUserBusTypeAll?table=',
success: function (response) {
if (response && response.success) {
busTypeList = response.data;
var bizList = response.data.map(item => {
return {
name: item.busTypeName,
value: item.busId,
parentId: item.parentId
}
});
var bizTree=common.pidToChildren(bizList, 'value', 'parentId');
// 影响业务下拉框
busIdSelect = xmSelect.render({
el: '#bisTypeSearchBox',
name: 'bizId',
tips: '=所属业务=',
//开启搜索
filterable: true,
clickClose: true,
initValue: [bizId.split(',')[0]],
toolbar: {
show: true,
list: ['ALL', 'REVERSE', 'CLEAR']
},
height: '170px',
tree: {
show: true,
showFolderIcon: true,
showLine: true,
strict: true,
//间距
indent: 20,
},
model: {
label: {
type: 'text'
}
},
data: bizTree,
on: function (data) {
if (data.arr.length != 0) {
var str='';
$.each(data.arr,function (i,v) {
str+=v.value+',';
})
bizId = str.substring(0,str.length-1);
} else {
bizId = '';
}
form.render();
reloadTable();
}
});
if(busIdSelect){
//追加样式
$('#bisTypeSearchBox').find('.xm-body').eq(0).css("width","230px");
}
} else {
layer.msg('获取业务失败', {icon: 2});
}
},
error: function () {
layer.msg('获取业务失败', {icon: 2});
}
});
$.ajax({
url: common.domainName + '/api-web/manage/kpi/findKpiInAlarm?access_token='+accessToken+'&tableName=b_alarm',
type: "get",
success:function (res) {
var kpis = res.data;
var html = '<option value="">=指标名称=</option>'
$.each(kpis,function (i,e) {
html+='<option value="'+e.kpiId+'">'+e.kpiName+'</option>'
})
$("#alarmKpiSearchBox").html('');
$("#alarmKpiSearchBox").append(html);
form.render();
}
})
$.ajax({
url: `${common.domainName}/api-web/manage/restype/list?access_token=${accessToken}`,
method: 'GET',
success: function (res) {
// 资源类型下拉框
var resTypeList = res.data.map(item => {
return {
name: item.resTypeName,
value: item.resTypeCode,
parentId: item.parentId
}
});
var resTypeTree = treeTable.pidToChildren(resTypeList, "value", "parentId");
xmSelect.render({
el: '#resTypeSearchBox',
name: "resType",
tips: '=资源类型=',
filterable: true,
radio: true,
clickClose: true,
initValue: [resType],
toolbar: {
show: true,
list: ['CLEAR']
},
tree: {
show: true,
showFolderIcon: true,
showLine: true,
strict: false,
indent: 20
},
model: {
label: {
type: 'text'
}
},
height: '200px',
data: resTypeTree,
on: function (data) {
if(data.isAdd){
if (data.arr.length != 0) {
resType = data.arr[0].value;
} else {
resType = '';
}
reloadTable();
}
}
});
}
});
}
//回车搜索
$('#activewarningkw, input[name="durationVal"]').keydown(function (e) {
if (e.keyCode === 13) {
reloadTable();
}
});
//选择框搜索事件
bindSelectEvent();
initDate();
function initToolBarClickEvent() {
//告警消除
$("#clearBtn").unbind('click').on('click', function () {
if ($.inArray('app:alarm:clear', checkList) == -1) {
layer.msg('暂无权限!', {icon: 7, time: 3000});
return;
}
var ids = [];
var data = table.checkStatus('activewarningTable').data;
if (data.length == 0) {
layer.msg('请最少选择一项数据', {icon: 7, time: 2000});
return;
}
//选中的告警ID放到集合中
$.each(data, function (i, obj) {
ids.push(obj.id)
});
//获取以往告警消除意见
admin.req({
url: common.domainName + '/api-web/home/alarm/clear/reason',
type: "get",
data:{
alarmId: ids.toString()
},
done:function (data) {
var clearReson = "暂无参考处理方案，请输入处理方案";
var hisReason = "";
var reasonlist = data.reason;
if(reasonlist && reasonlist.length > 0){
hisReason = "参考方案：\n";
$.each(reasonlist,function (i,v) {
var idx = i + 1;
hisReason += idx +"："+v +"\n";
});
}
layer.prompt({id: "alarms_clear_id", title: '告警消除', area: ['400px'], formType: 2,value: hisReason}, function (text, index) {
admin.req({
url: common.domainName + '/api-web/home/alarm/clear'
, type: "post"
, data: {
ids: ids.toString(),
reason: text,
access_token: accessToken,
noticeFlag: $('input[name="noticeFlag"]:checked').val()
}
, done: function (res) {
//如果消除成功，关闭弹出框然后重新加载页面
if (res.success) {
layer.close(index);
layer.msg('告警已消除！', {icon: 1, time: 2000});
reloadTable();
} else {
layer.msg('告警消除失败，请与管理员联系！', {icon: 7, time: 3000});
}
}
});
});
$("#alarms_clear_id").find('textarea.layui-layer-input').attr("placeholder", clearReson);
$("#alarms_clear_id").append('<div style="padding-top: 15px;"><span>是否通知：</span> ' +
'<input type="radio" name="noticeFlag" value="true" title="是" >&nbsp;是' +
'<input type="radio" name="noticeFlag" value="false" title="否" checked="" style="margin-left: 20px;">&nbsp;否</div> ');
}
});
});
//告警关闭
$("#closeBtn").unbind('click').on("click", function () {
if ($.inArray('app:alarm:close', checkList) == -1) {
layer.msg('暂无权限!', {icon: 7, time: 3000});
return;
}
var ids = [];
var data = table.checkStatus('activewarningTable').data;
var alarmStatus = true;
if (data.length == 0) {
layer.msg('请最少选择一项数据', {icon: 7, time: 2000});
return;
}
//选中的告警ID放到集合中
$.each(data, function (i, obj) {
var status = JSON.stringify(obj.alarmStatus);
if (status && status == '1') {
alarmStatus = false;
}
ids.push(obj.id)
});
if (!alarmStatus) {
layer.msg('已关闭的告警不可重复关闭！', {icon: 7, time: 3000});
return;
}
layer.prompt({
id: "alarms_cloes_id",
formType: 2,
title: '告警关闭',
area: ['400px']
},
function (value, index) {
if (value === "") {
layer.msg('请填写关闭意见', {icon: 7, time: 3000});
}
if ($('#closeDuration').val() === "") {
layer.msg('请填写关闭时长', {icon: 7, time: 3000});
return;
}
admin.req({
url: common.domainName + '/api-web/home/alarm/close'
, type: "post"
, data: {
ids: ids.toString(),
reason: value,
duration: $('#closeDuration').val() * 60,
closeType: $('input[name="closeType"]:checked').val(),
noticeFlag: $('input[name="noticeFlag"]:checked').val(),
kpiAllFlag: $('input[name="kpiAllFlag"]:checked').val(),
access_token: accessToken
}
, done: function (res) {
if (res.success) {
layer.close(index);
layer.msg('关闭成功', {icon: 1, time: 2000}, function () {
reloadTable();
});
} else {
layer.msg('告警关闭失败，请与管理员联系！', {icon: 7, time: 3000});
}
}
});
});
$("#alarms_cloes_id").find('textarea.layui-layer-input').attr("placeholder", "请输入关闭意见（必填）");// /[^(\d||/.)]/g,''
$("#alarms_cloes_id").append('<br/>' +
'<input type="number" id="closeDuration" class="layui-input" min="0" oninput="if(value.length>5)value=value.slice(0,5)" onkeyup="value=value.replace(/(\\d*\\.\\d).*/,\'$1\')" placeholder="输入关闭时长，单位小时（必填）"/>');
$("#alarms_cloes_id").append('<br/><div style="line-height: 38px;"><span>关闭类型：</span> ' +
'<input type="radio" name="closeType" value="0" title="关闭告警" checked="">&nbsp;关闭告警' +
'<input type="radio" name="closeType" value="1" title="关闭通知" style="margin-left: 20px;">&nbsp;关闭通知</div> ');
$("#alarms_cloes_id").append('<div style="line-height: 38px;"><span>是否关闭该指标所有告警/通知：</span> ' +
'<input type="radio" name="kpiAllFlag" value="true" title="是">&nbsp;是' +
'<input type="radio" name="kpiAllFlag" value="false" title="否" checked="" style="margin-left: 20px;">&nbsp;否</div> ');
$("#alarms_cloes_id").append('<div style="line-height: 38px;"><span>是否通知：</span> ' +
'<input type="radio" name="noticeFlag" value="true" title="是">&nbsp;是' +
'<input type="radio" name="noticeFlag" value="false" title="否" checked="" style="margin-left: 20px;">&nbsp;否</div> ');
});
//告警确认
$("#confirmBtn").unbind('click').on("click", function () {
if ($.inArray('app:alarm:confirm', checkList) == -1) {
layer.msg('暂无权限!', {icon: 7, time: 3000});
return;
}
var ids = [];
var data = table.checkStatus('activewarningTable').data;
if (data.length == 0) {
layer.msg('请最少选择一项数据', {icon: 7, time: 2000});
return;
}
$.each(data, function (i, obj) {
ids.push(obj.id)
});
layer.prompt({
id: "alarms_confirm_id",
formType: 2,
title: '告警确认',
area: ['400px']
},
function (value, index) {
if (value === "") {
layer.msg('请填确认意见', {icon: 7, time: 3000});
}
admin.req({
url: common.domainName + '/api-web/home/alarm/confirm'
, type: "post"
, data: {
ids: ids.toString(),
reason: value,
level: $('input[name="confrimlevel"]:checked').val(),
access_token: accessToken
}
, done: function (res) {
if (res.success) {
layer.close(index);
layer.msg('告警确认成功', {icon: 1, time: 2000}, function () {
reloadTable();
});
} else {
layer.msg('告警确认失败，请与管理员联系！', {icon: 7, time: 3000});
}
}
});
});
$("#alarms_confirm_id").find('textarea.layui-layer-input').attr("placeholder", "请输入意见（必填）");
$("#alarms_confirm_id").append('<br/> ' +
'<input type="radio" name="confrimlevel" value="0" title="紧急" checked="">&nbsp;紧急' +
'<input type="radio" name="confrimlevel" value="1" title="非常紧急" style="margin-left: 20px;">&nbsp;非常紧急' +
'<input type="radio" name="confrimlevel" value="2" title="不紧急" style="margin-left: 20px;">&nbsp;不紧急');
});
//告警恢复
$("#resumeBtn").unbind('click').on("click", function () {
if ($.inArray('app:alarm:resume', checkList) == -1) {
layer.msg('暂无权限!', {icon: 7, time: 3000});
return;
}
var ids = [];
var closeIds = [];
var data = table.checkStatus('activewarningTable').data;
var resumeStatus = true;
if (data.length == 0) {
layer.msg('请最少选择一项数据', {icon: 7, time: 2000});
return;
}
var msg = "";
//选中的告警ID放到集合中
$.each(data, function (i, obj) {
var alarmStatus = JSON.stringify(obj.alarmStatus);
//已关闭的告警才可以恢复,告警状态，0告警，1关闭
if (alarmStatus && alarmStatus == '0') {
resumeStatus = false;
msg = '只能恢复已关闭状态的告警，请重新选择！';
}
ids.push(obj.id);
closeIds.push(obj.closeId);
});
if (!resumeStatus) {
layer.msg(msg, {icon: 7, time: 3000});
return;
}
layer.prompt({title: '恢复说明(必填)', formType: 2}, function (text, index) {
admin.req({
url: common.domainName + '/api-web/home/alarm/resume'
, type: "post"
, data: {
ids: ids.toString(),
reason: text,
closeId: closeIds.toString(),
resumeType: '0',//0告警关闭，1历史告警
access_token: accessToken
}
, done: function (res) {
//如果消除成功，关闭弹出框然后重新加载页面
if (res.success) {
layer.close(index);
layer.msg('告警已恢复！', {icon: 1, time: 3000}, function () {
reloadTable();
});
} else {
layer.msg('告警恢复失败，请与管理员联系！', {icon: 7, time: 3000});
}
}
});
})
});
//导出
$("#exportAarmBtn").unbind('click').on("click", function () {
if ($.inArray('app:alarm:export', checkList) == -1) {
layer.msg('暂无权限!', {icon: 7, time: 3000});
return;
}
var data = table.checkStatus('activewarningTable').data;
if (data.length == 0) {
//确认提示框
layer.confirm('当前没选择告警,将全量导出数据,请确认', {
btn: ['确定', '取消'] //按钮
}, function () {
var url = common.domainName + '/api-web/home/alarm/exportExcel/condition?access_token=' + accessToken;
url += '&kpiName=' + $("#activewarningkw").val();
url += '&busId=' + (bizId && bizId!='undefined' ? bizId : '');
url += '&resId=' + (resId && resId!='undefined' ? bizId : '');
url += '&kpiId=' + (kpiId && kpiId!='undefined' ? bizId : '');
url += '&alarmStatus=' + $("#alarmStatusSearchBox").val();
url += '&alarmLevel=' + $("#alarmLevelSearchBox").val();
url += '&confirmStatus=' + $("#alarmConfirmSearchBox").val();
url += '&beginTime=' + $("#activewarningStartdate").val();
url += '&endTime=' + $("#activewarningEnddate").val();
url += '&sortKey=' + sortKey;
url += '&alarmKpi=' + ($("#alarmKpiSearchBox").val() != 'KPI97B835A4' ? $("#alarmKpiSearchBox").val() : '');
url += '&isBus=' + ($("#alarmKpiSearchBox").val() == 'KPI97B835A4' ? 'Y' : '');
url += '&durationVal=' + ($('#inline-condition-duration input[name="durationVal"]').val());
url += '&durationUnit=' + ($('#inline-condition-duration select[name="durationUnit"]').val());
url += '&alarmTimeDay=' + todayStr;
url += '&resType=' + resType;
url += '&page=1&limit=999999';
window.open(url);
layer.closeAll();
});
} else {
var ids = [];
//讲选中的告警ID放到集合中
$.each(data, function (i, obj) {
ids.push(obj.id);
});
ids = ids.toString();
var url = common.domainName + '/api-web/home/alarm/exportExcel?alarmIds=' + ids + "&access_token=" + accessToken;
window.open(url)
}
});
//发送通知
$("#sendNoticeBtn").unbind('click').on("click", function () {
if ($.inArray('app:alarm:sendnotice', checkList) == -1) {
layer.msg('暂无权限!', {icon: 7, time: 3000});
return;
}
var ids = [];
var resIds = [];
var data = table.checkStatus('activewarningTable').data;
if (data.length == 0) {
layer.msg('请最少选择一项数据', {icon: 7, time: 2000});
return;
}
if (data.length > 1) {
layer.msg('请最多选择一项数据', {icon: 7, time: 2000});
return;
}
//将选中的告警ID放到集合中
$.each(data, function (i, obj) {
ids.push(obj.id);
resIds.push(obj.resId);
});
admin.req({
url: common.domainName + '/api-web/home/alarm/subscribe/user/' + resIds.toString()
, done: function (res) {
if (res.data && res.data.length > 0) {
var username = '';
var begin = '<div style="padding: 0 5px 0 5px;"><table class="layui-table"><thead>' +
'<tr><th></th><th>名称</th><th>电话</th><th>邮箱</th></tr></thead><tbody>';
var end = '</tbody></table></div>';
$.each(res.data, function (i, v) {
username += '<tr><td><input class="userName" type="checkbox" data-name="' + v.username + '" checked></td><td>' + v.nickname + '</td><td>' + v.phone + '</td><td>' + v.email + '</td></tr>';
});
//获取告警通知接收人
var reciveUsers = begin + username + end;
layer.open({
type: 1
, title: "通知接收人"
, shade: 0.8
, area: ['600px', '390px']
, id: 'lay_users' //设定一个id，防止重复弹出
, content: reciveUsers
, btn: ['发送', '关闭']
, yes: function () {
var names = [];
$("input[class='userName']:checked").each(function(i){
names.push($(this).attr("data-name"));
});
if(names.length<1){
layer.msg('请最少选择一个用户', {icon: 7, time: 2000});
return;
}
admin.req({
url: common.domainName + '/api-web/home/alarm/sendnotice'
, type: "post"
, data: {
ids: ids.toString(),
names:names.toString(),
access_token: accessToken
}
, done: function (res) {
layer.closeAll();
if (res.success) {
layer.msg('发送成功', {icon: 1, time: 2000});
} else {
layer.msg('发送失败，稍后再试', {icon: 7, time: 2000});
}
}
});
}
});
} else {
layer.msg('未获取到接收所选通知的用户!', {icon: 7, time: 2000});
}
}
});
});
}
//告警处理及时率
getAlarmCount();
var activeAlarmTable;
//获取配置的列
common.getTableCols({
domId: 'activewarningTable',
moduleId: 'activewarning',
resType: ''
},function (retCols) {
var cols = [
{type: 'checkbox', fixed: 'left'}
, {
field: 'alarmLevel', title: '级别', align: 'center', width: 120, sort: true,
templet: `
<div>
{{# if (d.alarmLevel == 3) {
}} <span class="layui-table-warn" style="width: 100%;">严重</span> {{#
} else if (d.alarmLevel == 2) {
}} <span class="layui-table-close" style="width: 100%;">重要</span> {{#
} else if (d.alarmLevel == 1) {
}} <span class="layui-table-normal" style="width: 100%;">一般</span> {{#
} }}
</div>
`
}
, {
field: 'alarmNo', title: '告警编号', align: 'center', width: 140, sort: true,
}
, {
field: 'resName', title: '资源名称', width: 230, sort: true,
templet:`
<div>
<div style="display: flex;align-items: center;">
{{# if (d.confirmStatus == 0 || d.confirmStatus == null) { }}
<i lay-tips="新的告警未确认，告警确认后消失！" class="shake iconfont" style="color: red;font-size: 28px;">&#xe68b;</i>
{{# } }}
{{# if(d.isBus == 'N'){ }}
<span lay-tips="{{ d.resName }}" style="margin:0 5px;max-width: 160px;overflow: hidden; text-overflow: ellipsis; white-space: nowrap;display: inline-block;" data-isBus="{{d.isBus}}" data-resid="{{d.resId}}" data-restype="{{d.resType}}" data-warn-zymc="{{d.id}}" data-ip="{{d.ip}}"
data-resname="{{d.resName}}" data-pingenable="{{d.pingEnable}}" class="layui-table-link">{{d.resName}}</span>
{{# }else{ }}
<span lay-tips="{{ d.resName }}" style="margin:0 5px;max-width: 160px;overflow: hidden; text-overflow: ellipsis; white-space: nowrap;display: inline-block;" data-isBus="{{d.isBus}}" data-resid="{{d.resId}}" data-restype="{{d.resType}}" data-warn-zymc="{{d.id}}" data-ip="{{d.ip}}"
data-resname="{{d.resName}}" data-pingenable="{{d.pingEnable}}" >{{d.resName}}</span>
{{# } }}
<a class="layui-icon reslist-view-topo hide" data-resid="{{d.resId}}" lay-tips="查看资源拓扑"><i class="iconfont" style="font-size: 20px;
color: #FEB61E;"></i></a>
</div>
</div>
`
}
, {
field: 'kpiName', title: '指标名称', align: 'center', width: 120, sort: true,
templet: `
<div>
{{#
var kpiName = d.kpiName == 'TYPE'?'ERRPT':d.kpiName;
if (d.kpiIdent != 1) {
if(d.isWarning != 1) {
}} <div>{{kpiName}}</div> {{#
} else { }}
<div><span data-ident="{{d.kpiIdent}}" data-trend="{{d.isTrend}}" data-warning="{{d.isWarning}}" data-resid="{{d.resId}}" data-flag="{{d.flag}}" data-kpi="{{d.kpiId}}" data-warn-zbmc="{{d.id}}" data-name="{{kpiName}}" class="layui-table-link">{{kpiName}}</span></div>
{{# }
} else { }}
<div><span data-ident="{{d.kpiIdent}}" data-trend="{{d.isTrend}}" data-warning="{{d.isWarning}}" data-resid="{{d.resId}}" data-flag="{{d.flag}}" data-kpi="{{d.kpiId}}" data-warn-zbmc="{{d.id}}" data-name="{{kpiName}}" class="layui-table-link">{{kpiName}}</span></div>
{{# }
}}
</div>`
}
, {field: 'alarmContent', title: '告警内容', align: 'center', width: 500}
, {
field: 'alarmResource', title: '告警来源', align: 'center', minWidth: 120, templet: `<div>
{{# if (d.alarmResource == 1) { }}
<div>华为告警</div>
{{# } else { }}
<div>监控系统</div>
{{# } }}
</div>`
}
, {field: 'updateTime', title: '告警时间', align: 'center', minWidth: 180, sort: true}
, {field: 'alarmTime', title: '首次告警时间', align: 'center', minWidth: 180, sort: true}
, {field: 'durationStr', title: '持续时间', align: 'center', width: 190}
, {field: 'alarmRepeatCnt', title: '告警次数', align: 'center', width: 180}
, {field: 'nickName', title: '通知人', align: 'center', width: 180}
, {field: 'adminName', title: '负责人', align: 'center', width: 180}
, {field: 'noticeTime', title: '通知时间', align: 'center', width: 180, hide: true}
, {
title: '操作', align: 'center', minWidth: 100,
templet: '<div><span data-warn-view="{{d.id}}" class="layui-table-link">查看</span> <span data-warn-path="{{d.id}}" class="layui-table-link">轨迹</span></div>'
}
];
if (retCols) {
cols = retCols;
}
//渲染表格
activeAlarmTable = table.render({
elem: '#activewarningTable'
, url: domainName + '/api-web/home/alarm/alarmListPage'
, id: 'activewarningTable'
, toolbar: '#activeAlarmtoolbar' //开启头部工具栏，并为其绑定左侧模板
, defaultToolbar: ['filter']
, where: {
access_token: accessToken,
kpiName: $("#activewarningkw").val(),
busId: bizId,
resId: resId,
kpiId: kpiId,
alarmStatus: $("#alarmStatusSearchBox").val(),
alarmLevel: alarmLevel,
confirmStatus: $("#alarmConfirmSearchBox").val(),
beginTime: $("#activewarningStartdate").val(),
endTime: $("#activewarningEnddate").val(),
sortKey: sortKey,
alarmKpi: $("#alarmKpiSearchBox").val()!='KPI97B835A4'?$("#alarmKpiSearchBox").val():'',
isBus:$("#alarmKpiSearchBox").val()=='KPI97B835A4'?'Y':'',
durationVal: $('#inline-condition-duration input[name="durationVal"]').val(),
durationUnit: $('#inline-condition-duration select[name="durationUnit"]').val(),
netFlag: netFlag,
resType:resType
}
, height: 'full-245'
, cellMinWidth: 80
, page: {
layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
, theme: '#1E9FFF'
}
, even: true
, drag: {toolbar: false}
, cols: [cols],
done: function (res, curr, count) {
soulTable.render(this)
var groupurl = domainName + '/api-web/home/alarm/countAlarmNumByAlarmLevel?alarmTimeDay=' + todayStr + '&access_token=' + accessToken;
$.ajax({
url: groupurl,
type: 'get',
data: {
access_token: accessToken,
kpiName: $("#activewarningkw").val(),
busId: bizId,
resId: resId,
kpiId: kpiId,
alarmStatus: $("#alarmStatusSearchBox").val(),
alarmLevel: alarmLevel,
confirmStatus: $("#alarmConfirmSearchBox").val(),
beginTime: $("#activewarningStartdate").val(),
endTime: $("#activewarningEnddate").val(),
sortKey: sortKey,
//alarmKpi: $("#alarmKpiSearchBox").val(),
alarmKpi: $("#alarmKpiSearchBox").val()!='KPI97B835A4'?$("#alarmKpiSearchBox").val():'',
isBus:$("#alarmKpiSearchBox").val()=='KPI97B835A4'?'Y':'',
durationVal: $('#inline-condition-duration input[name="durationVal"]').val(),
durationUnit: $('#inline-condition-duration select[name="durationUnit"]').val(),
netFlag: netFlag,
resType:resType
},
success: function (res) {
var map = res.map;
if (map) {
layui.use('laytpl', function () {
var laytpl = layui.laytpl;
var getTpl = document.getElementById("alarm-count-id-tpl").innerHTML;
laytpl(getTpl).render(map, function (html) {
$('#alarm-count-id').html(html);
});
//告警升级量 悬浮提示
var alarmUpRate, alarmDealRate;
$("#alarm_level_up_area_id").hover(function () {
alarmUpRate = layer.tips("活动告警中升级的告警总量及占比",
'#alarm_level_up_area_id', {tips: [1]});
}, function () {
layer.close(alarmUpRate);
});
//告警处理及时率
$("#alarm_deal_rate_area_id").hover(function () {
alarmDealRate = layer.tips("活动告警中及时处理的告警量占比",
'#alarm_deal_rate_area_id', {tips: [1]});
}, function () {
layer.close(alarmDealRate);
});
$('[data-warn-zymc]').unbind('click').on('click', function () {
//先去查找资源有没有权限
var resId = $(this).data("resid");
var resType = $(this).data("restype");
var ip = $(this).data("ip") ? $(this).data("ip") : "";
var resName = $(this).data("resname");
var pingEnable = $(this).data("pingenable"); //获取pingEnable的值 joke add 20200619
var resTypeName = '';
var adminName = '';
var manageIp = '';
var collProtocol = '';
var sign='false';
$.ajax({
url: common.domainName + "/api-web/home/resource/findById?resId="+resId + '&access_token='+ accessToken,
async: false,
type:'get',
success: function (res) {
sign=res.str;
var data = res.object;
resType = data.resType;
adminName = data.adminName;
manageIp = data.manageIp;
collProtocol = data.collProtocol;
resTypeName = data.resTypeName;
}
})
if(sign=='false'){
layer.msg('当前用户暂无此资源权限!', {icon: 7, time: 3000});
return false;
}
let title = resName;
if (title && title !== '') {
title += '|';
}
if (resTypeName && resType !== 'HOST_X86SERVER') {
title += resTypeName + '|';
}
if (ip) {
if (resType === 'HOST_X86SERVER') {
if (collProtocol && (collProtocol.split(",").length > 1 || collProtocol === 'SSH')) {
title += '应用IP-' + ip + '|';
}
} else {
title += ip + '|';
}
}
if (resType === 'HOST_X86SERVER' && collProtocol && collProtocol.indexOf('SNMP') !== -1 ) {
if (manageIp) {
title += '管理IP-' + manageIp + '|';
}
}
if (adminName) {
title += adminName + '|';
}
if (title.length > 0) {
title = title.substr(0, title.length - 1);
}
if (pingEnable == '2') { //如果pingEnable为2，则进入ping状态详情页面
commonDetail.openNewWin('template/detail/pingIndex', title, {'resId': resId}, false);
} else { //否则进入监控详情页面
commonDetail.openDetail(resId, resType, title);
}
});
//指标名称点击事件
$('[data-warn-zbmc]').unbind("click").on('click', function () {
var name = $(this).data("name");
var params = {
resId: $(this).data("resid"),
kpiId: $(this).data("kpi"),
flag: $(this).data("flag"),
name: name,
warning: $(this).data("warning"),
ident: $(this).data("ident"),
trend: $(this).data("trend")
};
common.openLineChart(name, params);
});
//告警操作日志
$('[data-warn-view]').unbind('click').on('click', function () {
admin.req({
url: common.domainName + '/api-web/home/alarm/info'
, data: {
alarmId: $(this).data('warn-view'),
access_token: accessToken
}
}).done(function (res) {
laytpl($('#warnViewWinTpl').html()).render(res.obj, function (html) {
layer.open({
area: '750px',
title: ['告警操作信息', 'font-size:18px;'],
type: 1,
content: html
});
});
});
});
//告警轨迹
$('[data-warn-path]').unbind('click').on('click', function () {
var id = $(this).attr('data-warn-path');
var view = layui.view;
var params = {
"warnId": id
};
view('commonViewModel').render("template/detail/warn_gj").then(function (res) {
layer.open({
title: ['告警轨迹', 'font-size:18px;'],
type: 1,
area: ['900px', '650px'],
content: laytpl(res.body).render(JSON.stringify(params))
});
});
});
});
//点击严重重要一般统计告警
$("#alarm-count-id").find(".warn-count-item").unbind('click').on("click", function () {
var alarmLevel = $(this).attr("alarm-level");
if (alarmLevel != '' && alarmLevel != null && alarmLevel != undefined) {
$("#alarmLevelSearchBox").val(alarmLevel)
layui.form.render('select');
reloadTable();
} else {
$("#alarmLevelSearchBox").val("");
layui.form.render('select');
if (alarmLevel === '') {
reloadTable();
}
}
});
initToolBarClickEvent();
//表格排序监听 joke add 20200408
table.on('sort(activewarningTable)', function (obj) {
//有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序，如：
if (obj.type != null) {
sortKey = obj.field + ' ' + obj.type;
} else {
sortKey = '';
}
reloadTable('sort');
})
//更改告警级别颜色
setColourLevel();
}
}
})
//触发拖动列事件，参数为保存按钮的id
common.dragCols("activewarning_cols_save");
//保存列顺序
$("#activewarning_cols_save").unbind("click").on("click", function () {
var params = {
domId: 'activewarningTable',
moduleId: 'activewarning',
resType: '',
cols: JSON.stringify(activeAlarmTable.config.cols)
}
common.saveTableCols(params,0);
});
resTopo();
}
});
});
//更改告警级别颜色
function setColourLevel() {
//获取告警等级
let alarmLevel = $("#alarmLevelSearchBox").val();
$('#alarm_serious').css("color","#666");
$('#alarm_important').css("color","#666");
$('#alarm_commonly').css("color","#666");
switch (alarmLevel) {
case "3"://严重告警
$('#alarm_serious').css("color","#D81E06");
break;
case "2"://重要告警
$('#alarm_important').css("color","#FF7E00");
break;
case "1"://一般告警
$('#alarm_commonly').css("color","#1e9fff");
break;
default://其他 空或无
break;
}
}
//绑定下拉搜索事件
function bindSelectEvent() {
//选择业务搜索
form.on('select(bisTypeSearch)', function (data) {
bizId = data.value;
reloadTable();
});
//选择业务搜索
form.on('select(alarmKpiSearch)', function (data) {
reloadTable();
});
// 告警状态
form.on('select(alarmStatusSearch)', function (data) {
reloadTable();
});
//告警级别
form.on('select(alarmLevelSearch)', function (data) {
reloadTable();
});
// 告警确认
form.on('select(alarmConfirmSearch)', function (data) {
reloadTable();
});
}
$("#todayOrAllBtn").unbind().on("click",function () {
var $that = $(this);
var str = $(this).text();
if(str.indexOf("今日") > -1){
$that.text("全部告警")
todayStr = common.getToday('day');
}else{
todayStr = ''
$that.text("今日告警")
}
reloadTable();
})
//刷新表格
function reloadTable(type) {
if (type != 'sort'){
sortKey = '';
}
activeAlarmTable.reload({
page: {
curr: 1
}
,where: {
access_token: accessToken,
kpiName: $("#activewarningkw").val(),
busId: bizId,
resId: resId,
kpiId: kpiId,
alarmStatus: $("#alarmStatusSearchBox").val(),
alarmLevel: $("#alarmLevelSearchBox").val(),
confirmStatus: $("#alarmConfirmSearchBox").val(),
beginTime: $("#activewarningStartdate").val(),
endTime: $("#activewarningEnddate").val(),
sortKey: sortKey,
//alarmKpi: $("#alarmKpiSearchBox").val(),
alarmKpi: $("#alarmKpiSearchBox").val()!='KPI97B835A4'?$("#alarmKpiSearchBox").val():'',
isBus:$("#alarmKpiSearchBox").val()=='KPI97B835A4'?'Y':'',
durationVal: $('#inline-condition-duration input[name="durationVal"]').val(),
durationUnit: $('#inline-condition-duration select[name="durationUnit"]').val(),
alarmTimeDay:todayStr,
resType:resType
}
});
}
//获取告警统计信息
function getAlarmCount() {
admin.req({
url: common.domainName + "/api-web/home/alarm/countByAlarmLevel"
, type: "get"
, done: function (data) {
var alarms = data.data;
if (data.code == 0) {
$.each(alarms, function (i, v) {
if (v.alarmLevel == 5) {//及时率
$("#alarm_dealRate").html(v.alarmNum + "%");
}
});
} else {
console.error("接口请求失败")
console.log(data.msg);
}
}
})
}
form.render(null, 'activewarning-form');
//60秒倒计时
(function () {
var autoBtn = $('#activewarningAutoFlush');
var timer = null;
function autoFlush(target) {
var el = target.find('span');
var checked = target.find('input').prop('checked');
localStorage.setItem('alarm_auto__flush', checked);
function fn() {
var second = el.data('second');
var checked = target.find('input').prop('checked');
if (!checked) {
return;
}
--second;
el.data('second', second);
el.html(second + '秒');
timer = setTimeout(fn, 1000);
if (second <= 0) {
clearTimeout(timer);
reloadTable()
$(el).data('second', 60);
$(el).text("60秒");
fn();
}
}
if (checked) {
timer = setTimeout(fn, 1000);
} else {
clearTimeout(timer);
}
}
form.on("checkbox(warnActiveAutoFlush)",function (data) {
autoFlush(autoBtn);
})
/*autoBtn.change(function () {
autoFlush(autoBtn);
});*/
var auto = localStorage.getItem('alarm_auto__flush')
auto = auto ? auto : false;
autoBtn.find('input').prop('checked', auto);
autoFlush(autoBtn);
admin.on('hash(*)', function (router) {
if (router.href === '/activewarning') {
autoFlush(autoBtn);
} else {
clearTimeout(timer);
}
});
})();
function resTopo() {
//绑定鼠标移入移出事件
$('table tr').hover(function (obj) {
$(obj.currentTarget).find('.reslist-view-topo').removeClass('hide');
}, function (obj) {
$(obj.currentTarget).find('.reslist-view-topo').addClass('hide');
})
// 加入/移出收藏夹
$('a.reslist-view-topo').unbind('click').on('click', function () {
common.viewResTopo($(this).data('resid'));
});
}
});
});
\ No newline at end of file
... ...
layui.define(['commonDetail','common', 'admin'], function (exports) {
var $ = layui.$;
var commonDetail = layui.commonDetail;
var common = layui.common;
var admin = layui.admin;
//对外暴露的接口
exports('arms', function (data) {
var resId = '';
var resType = '';
var os = '';
var domainName = common.domainName;
var showFlag = common.getUrlParam("show");
if(showFlag && showFlag == '0'){
resId = common.getUrlParam("resId");
resType = common.getUrlParam("resType");
os = common.getUrlParam("os");
}else{
resId = data.resId;
resType = data.resType;
os = data.os;
}
//基本信息
var jbxxKpi = "KPIE13DD9A3,KPIF74D9D2B";
commonDetail.bindTips();
renderPageInfo()
//渲染页面
function renderPageInfo() {
//资源状态
commonDetail.renderResHealth("arms_health_state", resId);
//基本信息
commonDetail.renderText("arms_baseinfo", resId, jbxxKpi, null, null, null, "true");
//GC瞬时次数/每分钟
dataRenderingBase("arms_frequency_lineChart", resId, "KPIB30309CF,KPI6AFFCBDB", "GC瞬时次数/每分钟", null);
// //GC瞬时耗时/每分钟
dataRenderingBase("arms_elapsed_lineChart", resId, "KPI5769F327,KPI8B2CCCCF", "GC瞬时耗时/每分钟", null);
// //堆内存详情/每分钟
dataRenderingBase("arms_JVM_memory_lineChart", resId, "KPI5C214A8F,KPI14BD24A7,KPI206706E5", "堆内存详情/每分钟", null);
// //非堆内存/每分钟
dataRenderingBase("arms_NOJVN_memory_lineChart", resId, "KPIA751DDD7,KPIB0C32458,KPIBEA62DAA,KPID346BB6F", "非堆内存/每分钟", null);
// //直接缓冲区/每分钟
dataRenderingBase("arms_cacheRegion_lineChart", resId, "KPIBAD64951,KPIA80D93D8", "直接缓冲区/每分钟", null);
// //JVM线程数/每分钟
dataRenderingBase("arms_JVM_threadCount_lineChart", resId, "KPI7C4BEB26,KPI97B71BAA,KPI15EC2627,KPIA9E2E4DE,KPI068D9FA5,KPI6ECA9036,KPI328E5AFE,KPI8F8FAD7F", "JVM线程数/每分钟", null, 1);
//响应时间/每分钟
dataRenderingBase("arms_time_lineChart", resId, "KPI678F9FC3", "响应时间/每分钟", null);
// Start Wang 2022/2/24 9:29 解决：arms采集结果展示(详情页面开发)
// 节点详情
commonDetail.renderTable("arms_node_detail",false,resId,"KPI452C0F78,KPI5769F327,KPI8B2CCCCF,KPI678F9FC3,KPI649E288B,KPI8DC835B1,KPI4D6871EA,KPICC063E40,KPIFC03301B",'节点详情',`detail`,'KPIFC03301B','desc');
// End Wang 2022/2/24 9:30
//活动告警
commonDetail.renderActiveAlarms("arms_active_alram", resId);
}
//折线图数据渲染及页面设置
function dataRenderingBase(id, resId, kpiId, title, flag) {
var dataList = {};
var item = {};
var other = {};
item.legend = {};
item.x = {};
item.y = {};
//获取数据
admin.req({
url: domainName + '/api-web/details/getBase',
data: {
resId: resId,
kpiIds: kpiId,
}
}).done(function (response) {
if (response.success && !response.msg) {//有数据
dataList.legend = response.map.legend;
dataList.x = response.map.x;
if (response.map.y != null) {
var series = [];
$.each(response.map.y, function (i, v) {
var item = {
name: dataList.legend[i],
stack: 'Total',
type: 'line',
emphasis: {
focus: 'series'
},
itemStyle: {
normal: {
color: common.colorsArr[i%6].start
}
},
data: v,
};
series.push(item);
});
other["series"]=series;
}
initLinChart(id, resId, kpiId, title, flag, dataList, other);
} else {//无数据
//初始化数据
}
});
//页面渲染
return {item, other}
}
//初始化折线图
function initLinChart(id, resId, kpiId, title, flag, data, other) {
//初始化echarts
var myChart = echarts.init(document.getElementById(id));
//初始化配置option
var option;
option = {
legend: {//设置图表图例
data: data.legend,
},
tooltip: {
trigger: 'axis',
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {//X轴数据
type: 'category',
boundaryGap: false,
data: data.x,
},
yAxis: {//设置提示
type: 'value'
},
grid: { //直角坐标系内绘图网格
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
series: [//y轴数据
{
data: data.y?data.y:{},
type: 'line',
smooth: true
}
]
};
//获取传入option对象
var keys = Object.keys(other);
//替换option属性
keys.forEach(item => {
option[item]=other[item];
});
option && myChart.setOption(option);
}
//定时任务
var timer = setInterval(function () {
renderPageInfo()
},commonDetail.timerTime);
commonDetail.detailTimer.push(timer);
});
});
... ...