Authored by zhangtianqi

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

…eb into master-500-dev

 Conflicts:
	hg-monitor-web-base/src/main/resources/static/src/index.js
	hg-monitor-web-base/src/main/resources/static/vue3/src/components/common/table-page/index.html
	hg-monitor-web-base/src/main/resources/static/vue3/src/views/ajConfig/index.html
	hg-monitor-web-zj/src/main/resources/static/vue3/src/assets/images/digitalDp/title-monitoring.png
	hg-monitor-web-zj/src/main/resources/static/vue3/src/components/page/faultDiagnosis/result/item/index.js
	hg-monitor-web-zj/src/main/resources/static/vue3/src/views/zjdaping/components/monitoringMonth/index.js
... ... @@ -43,7 +43,8 @@ layui.define(['laytpl', 'layer', 'element', 'util'], function(exports){
//独立页面路由,可随意添加(无需写参数)
,indPage: [
'/user/login', //登入页
'/page/forward' // 听云访问系统页面
'/page/forward', // 听云访问系统页面
'/page/log' //辽宁日志系统访问监控页面
]
//扩展的第三方模块
... ...
... ... @@ -54,19 +54,19 @@ layui.define(['table', 'form', 'admin', 'layer', 'common','sessions','xmSelect',
form.render(null, 'alarmpolicy-form');
//新增
$("#alarmpolicy_create").unbind("click").on("click",function () {
if ($.inArray('back:alarmpolicy:save', checkList) == -1) {
layer.msg('暂无权限!', {icon: 7, time: 3000});
return;
}
// if ($.inArray('back:alarmpolicy:save', checkList) == -1) {
// layer.msg('暂无权限!', {icon: 7, time: 3000});
// return;
// }
openPolicyForm();
});
//同步
$("#alarmpolicy_sync").on("click",function (){
if ($.inArray('back:alarmpolicy:synchronization', checkList) == -1) {
layer.msg('暂无权限!', {icon: 7, time: 3000});
return;
}
// if ($.inArray('back:alarmpolicy:synchronization', checkList) == -1) {
// layer.msg('暂无权限!', {icon: 7, time: 3000});
// return;
// }
syncAlarmPolicy();
});
//删除
... ... @@ -180,10 +180,10 @@ layui.define(['table', 'form', 'admin', 'layer', 'common','sessions','xmSelect',
//点击名称编辑
$(".view-alarmPolicy-name").off("click").on("click",function () {
if ($.inArray('back:alarmpolicy:update', checkList) == -1) {
layer.msg('暂无权限!', {icon: 7, time: 3000});
return;
}
// if ($.inArray('back:alarmpolicy:update', checkList) == -1) {
// layer.msg('暂无权限!', {icon: 7, time: 3000});
// return;
// }
openPolicyForm($(this).data("id"));
});
... ... @@ -279,10 +279,10 @@ layui.define(['table', 'form', 'admin', 'layer', 'common','sessions','xmSelect',
//删除数据
function deleteAlarmPolicy(id) {
if ($.inArray('back:alarmpolicy:delete', checkList) == -1) {
layer.msg('暂无权限!', {icon: 7, time: 3000});
return;
}
// if ($.inArray('back:alarmpolicy:delete', checkList) == -1) {
// layer.msg('暂无权限!', {icon: 7, time: 3000});
// return;
// }
if (typeof (id) != "string") {
var ids = [];
var data = table.checkStatus('alarmpolicyTable').data;
... ...
... ... @@ -51,19 +51,19 @@ layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions'], function
form.render(null, 'alarmpolicy-form');
//新增
$("#alarmpolicy_list_create").unbind("click").on("click", function () {
if ($.inArray('back:alarmpolicy:save', checkList) == -1) {
layer.msg('暂无权限!', {icon: 7, time: 3000});
return;
}
// if ($.inArray('back:alarmpolicy:save', checkList) == -1) {
// layer.msg('暂无权限!', {icon: 7, time: 3000});
// return;
// }
openPolicyForm();
});
//同步
$("#alarmpolicy_list_sync").on("click", function () {
if ($.inArray('back:alarmpolicy:synchronization', checkList) == -1) {
layer.msg('暂无权限!', {icon: 7, time: 3000});
return;
}
// if ($.inArray('back:alarmpolicy:synchronization', checkList) == -1) {
// layer.msg('暂无权限!', {icon: 7, time: 3000});
// return;
// }
syncAlarmPolicy();
});
//删除
... ... @@ -177,10 +177,10 @@ layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions'], function
//点击名称编辑
$(".view-alarmPolicy-name").off("click").on("click", function () {
if ($.inArray('back:alarmpolicy:update', checkList) == -1) {
layer.msg('暂无权限!', {icon: 7, time: 3000});
return;
}
// if ($.inArray('back:alarmpolicy:update', checkList) == -1) {
// layer.msg('暂无权限!', {icon: 7, time: 3000});
// return;
// }
openPolicyForm($(this).data("id"));
});
... ... @@ -264,10 +264,10 @@ layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions'], function
//删除数据
function deleteAlarmPolicy(id) {
if ($.inArray('back:alarmpolicy:delete', checkList) == -1) {
layer.msg('暂无权限!', {icon: 7, time: 3000});
return;
}
// if ($.inArray('back:alarmpolicy:delete', checkList) == -1) {
// layer.msg('暂无权限!', {icon: 7, time: 3000});
// return;
// }
if (typeof (id) != "string") {
var ids = [];
var data = table.checkStatus('alarmpolicyListTable').data;
... ...
... ... @@ -46,10 +46,10 @@ layui.define(['table', 'form', 'admin', 'layer', 'common','sessions'], function
form.render(null, 'alarmsubscribe-form');
//新增
$("#alarmsubscribe_create").off("click").on("click",function () {
if ($.inArray('back:alarmsubscribe:save', checkList) == -1) {
layer.msg('暂无权限!', {icon: 7, time: 3000});
return;
}
// if ($.inArray('back:alarmsubscribe:save', checkList) == -1) {
// layer.msg('暂无权限!', {icon: 7, time: 3000});
// return;
// }
openAlarmsubscribeForm();
});
//删除
... ... @@ -58,10 +58,10 @@ layui.define(['table', 'form', 'admin', 'layer', 'common','sessions'], function
});
//同步
$("#alarmsubscribe_sync").on("click",function () {
if ($.inArray('back:alarmsubscribe:synchronization', checkList) == -1) {
layer.msg('暂无权限!', {icon: 7, time: 3000});
return;
}
// if ($.inArray('back:alarmsubscribe:synchronization', checkList) == -1) {
// layer.msg('暂无权限!', {icon: 7, time: 3000});
// return;
// }
var ids = [];
var data = table.checkStatus('alarmsubscribeTable').data;
if(data && data.length > 0){
... ... @@ -320,10 +320,10 @@ layui.define(['table', 'form', 'admin', 'layer', 'common','sessions'], function
done:function () {
//点击名称编辑
$(".view-alarmsubscribe-name").on("click",function () {
if ($.inArray('back:alarmsubscribe:update', checkList) == -1) {
layer.msg('暂无权限!', {icon: 7, time: 3000});
return;
}
// if ($.inArray('back:alarmsubscribe:update', checkList) == -1) {
// layer.msg('暂无权限!', {icon: 7, time: 3000});
// return;
// }
openAlarmsubscribeForm($(this).data("id"));
});
... ... @@ -810,10 +810,10 @@ layui.define(['table', 'form', 'admin', 'layer', 'common','sessions'], function
//资源订阅
$(".alarmsubscribe-resource-btn").on("click", function () {
if ($.inArray('back:alarmsubscribe:resource', checkList) == -1) {
layer.msg('暂无权限!', {icon: 7, time: 3000});
return;
}
// if ($.inArray('back:alarmsubscribe:resource', checkList) == -1) {
// layer.msg('暂无权限!', {icon: 7, time: 3000});
// return;
// }
var subId = $(this).data("id");
var oldData = getResOrKpiBySubId(subId, 'res');
oldData = $.map(oldData, function (item) {
... ... @@ -857,10 +857,10 @@ layui.define(['table', 'form', 'admin', 'layer', 'common','sessions'], function
//指标订阅
$(".alarmsubscribe-kpi-btn").on("click",function (){
if ($.inArray('back:alarmsubscribe:target', checkList) == -1) {
layer.msg('暂无权限!', {icon: 7, time: 3000});
return;
}
// if ($.inArray('back:alarmsubscribe:target', checkList) == -1) {
// layer.msg('暂无权限!', {icon: 7, time: 3000});
// return;
// }
var subId = $(this).data("id");
var oldData = getResOrKpiBySubId(subId,'kpi');
var oldKpiData = Array.from(new Set($.map(oldData,function (item) {
... ... @@ -1064,10 +1064,10 @@ layui.define(['table', 'form', 'admin', 'layer', 'common','sessions'], function
//删除拓扑数据
function deletealarmsubscribe(id) {
if ($.inArray('back:alarmsubscribe:delete', checkList) == -1) {
layer.msg('暂无权限!', {icon: 7, time: 3000});
return;
}
// if ($.inArray('back:alarmsubscribe:delete', checkList) == -1) {
// layer.msg('暂无权限!', {icon: 7, time: 3000});
// return;
// }
if (typeof (id) != "string") {
var ids = [];
var data = table.checkStatus('alarmsubscribeTable').data;
... ...
... ... @@ -222,7 +222,7 @@ layui.define(['table', 'form', 'laydate','view', 'common','sessions','xmSelect',
var data1 = form.val("dirctiveAddForm");
var txt = codeEditor.editor.getValue();
if (data1.dirctiveName != '' && data1.collScope != '' && txt != '') {
test();
//test();
} else {
layer.msg("请将所有必填项补充完整后验证!", { offset: '15px' , icon: 7 , time: 2000 });
}
... ...
layui.define(['sessions', 'form', 'common'], function (exports) {
//登录相关模块,对外暴露的接口
exports('pageLog', function () {
var $ = layui.$
, setter = layui.setter
, form = layui.form
, router = layui.router()
, search = router.search
, common = layui.common
, sessions = layui.sessions;
function getUrlParam(key) {
var href = window.location.href;
var url = href.split("?");
if (url.length <= 1) {
return "";
}
var params = url[1].split("&");
for (var i = 0; i < params.length; i++) {
var param = params[i].split("=");
if (key == param[0]) {
var temp = "" + params[1];
if (temp.search("#") > -1) {
return temp.substring(0, temp.indexOf("#"));
}
return param[1];
}
}
return "";
}
try {
logPage();
} catch (e) {
err()
}
function err() {
layer.msg('没有权限!', {icon: 5, time: 500});
$('#text').text("没有权限!")
layer.closeAll();
}
/**
* 听云系统嵌套咋们系统
* 听云token是通过连接传参,key=Authorization
* url 是请求的页面
* http://xxxxxx:8088/?show=0&Authorization=token&url=alarm/activewarning#/page/forward
* @constructor
*/
function logPage() {
var index = layer.load(2); //加载层
// 日志token
var tokenStr = getUrlParam("Authorization").replace('Bearer%20', '').replace('Bearer ', '');
// 跳转地址
var url = getUrlParam("url").split('#/')[0];
if (url.indexOf('(') != -1 && url.indexOf(')') != -1) {
url = url.replace('(', '?').replace(':', '=').replace(',', '&').replace(')', '');
}
// 日志地址
var logApi = 'http://192.168.0.44:8080';
$.ajax({
url: '/config/getConfig',
data: {
configName: 'url'
},
async: false,
success(response) {
//debugger
if (response.gateway) {
logApi = response.gateway;
}
}
});
var api = logApi + "/api-user/users/getUserByToken";
$.ajax(api, {
data: {
"access_token": tokenStr
},
headers: {
'authorization': 'Bearer ' + tokenStr,
},
//dataType:'json',//服务器返回json格式数据
type: 'get',//HTTP请求类型
timeout: 30000,//超时时间设置为30秒;
//contentType: 'application/x-www-form-urlencoded',
success: function (rsp) {
if (rsp.code == 0) {
var name = rsp.object.username;
// try {
// var SubtleCrypto = new SubtleCrypto();
// var pwd = SubtleCrypto.decrypt(rsp.object.password);
// } catch (e) {
//
// }
//
// var field = {};
// field.username = name;
// field.password = '123456';
// field.grant_type = 'password';
// field.scope = 'app';
// field.client_id = 'webApp';
// field.client_secret = 'webApp';
// field.deviceId = "";
// field.validCode = '';
//
//
// $.ajax({
// url: common.domainName + '/api-auth/oauth/token',
// data: field,
// type: 'POST',
// dataType: 'JSON',
// success: function (data) {
if (tokenStr) {
console.log('登录成功')
layui.data(setter.tableName, {
key: setter.request.tokenName
, value: tokenStr
});
sessions.putToken({"access_token":tokenStr});
sessions.putUser(name);
layer.closeAll();
//将access_token和refresh_token写入本地
localStorage.setItem("access_token", tokenStr);
//localStorage.setItem("refresh_token", data.refresh_token);
//将登陆url写入本地
localStorage.setItem("loginUrl", location.href);
//登入成功的提示与跳转
if (url.indexOf("ajConfig") != -1 && url.indexOf("ajConfig/view") != -1) {
window.location = window.location.origin + '/vue3/index.html#/' + url;
} else {
window.location = window.location.origin + '/start/index.html?show=0&access_token=' + tokenStr+ '#/' + url;
}
}
//
// } else {
// layer.msg('登录失败,请重试', {icon: 5, time: 500});
// }
// },
// error: function (xhr) {
// err();
// }
//});
}
}
,
error: function (xhr, type, errorThrown) {
err();
}
});
}
});
});
... ...
... ... @@ -8,317 +8,309 @@
*/
layui.extend({
setter: 'config' //配置文件
,admin: 'lib/admin' //核心模块
/*,sessions: 'controller/sessions'*/
,view: 'lib/view' //核心模块
}).define(['setter', 'admin','pageTips'], function(exports){
var setter = layui.setter
,element = layui.element
,admin = layui.admin
,tabsPage = admin.tabsPage
,view = layui.view
,defaultIndex = ''
// 根据 路由渲染页面
,renderPage = function(){
var show = location.search.substr(1).split("&")[0].split("=")[1];
var router = layui.router()
,path = router.path
,pathURL = admin.correctRouter(router.path.join('/'));
//默认读取主页
if(!path.length) path = [''];
if(!tabsPage.index && !renderPage.haveInit && show != '0') path=['']
// 如果访问首页
if(pathURL === '/'){
// path[path.length - 1] = setter.entry;
// 根据不同角色 用户 展示不同首页 开始
if (!defaultIndex) {
$.ajax({
url: sessionStorage.getItem('domainName') + '/api-web/defaultIndex/getDefaultIndexByUser?access_token=' + localStorage.getItem("access_token"),
async: false,
success(response) {
// 获取成功
if(response && response.success && response.object){
if (response.object.path && response.object.path != '/') {
defaultIndex = '/' + response.object.path;
} else {
defaultIndex = setter.entry;
}
setter.entry = '';
}
}
});
}
// path = defaultIndex.substring(1).split('/');
//lsq 普通岗用户角色登录后首页默认给index-biz-card 2022-06-20
if(defaultIndex=='/classify'){
defaultIndex='/index-biz-card'
}
path = defaultIndex.split('/');
// 根据不同角色 用户 展示不同首页 结束
}
if (pathURL === defaultIndex) {
$('li[lay-id="/"]').click();
return;
}
setter: 'config' //配置文件
, admin: 'lib/admin' //核心模块
/*,sessions: 'controller/sessions'*/
, view: 'lib/view' //核心模块
}).define(['setter', 'admin'], function (exports) {
var setter = layui.setter
, element = layui.element
, admin = layui.admin
, tabsPage = admin.tabsPage
, view = layui.view
, defaultIndex = ''
// 根据 路由渲染页面
, renderPage = function () {
var show = location.search.substr(1).split("&")[0].split("=")[1];
var router = layui.router()
, path = router.path
, pathURL = admin.correctRouter(router.path.join('/'));
//默认读取主页
if (!path.length) path = [''];
if (!tabsPage.index && !renderPage.haveInit && show != '0') path = ['']
// 如果访问首页
if (pathURL === '/') {
// path[path.length - 1] = setter.entry;
// 根据不同角色 用户 展示不同首页 开始
if (!defaultIndex) {
$.ajax({
url: sessionStorage.getItem('domainName') + '/api-web/defaultIndex/getDefaultIndexByUser?access_token=' + localStorage.getItem("access_token"),
async: false,
success(response) {
// 获取成功
if (response && response.success && response.object) {
if (response.object.path && response.object.path != '/') {
defaultIndex = '/' + response.object.path;
} else {
defaultIndex = setter.entry;
}
setter.entry = '';
}
}
});
}
// path = defaultIndex.substring(1).split('/');
path = defaultIndex.split('/');
// 根据不同角色 用户 展示不同首页 结束
}
if (pathURL === defaultIndex) {
$('li[lay-id="/"]').click();
return;
}
/*
layui.config({
base: setter.base + 'controller/'
});
*/
//重置状态
var reset = function(type){
//renderPage.haveInit && layer.closeAll();
if(renderPage.haveInit){
$('.layui-layer').each(function(){
var othis = $(this),
index = othis.attr('times');
if(!othis.hasClass('layui-layim')){
layer.close(index);
}
});
}
renderPage.haveInit = true;
/*
layui.config({
base: setter.base + 'controller/'
});
*/
//重置状态
var reset = function (type) {
//renderPage.haveInit && layer.closeAll();
if (renderPage.haveInit) {
$('.layui-layer').each(function () {
var othis = $(this),
index = othis.attr('times');
if (!othis.hasClass('layui-layim')) {
layer.close(index);
}
});
}
renderPage.haveInit = true;
$(APP_BODY).scrollTop(0);
delete tabsPage.type; //重置页面标签的来源类型
};
//如果路由来自于 tab 切换,则不重新请求视图
if (tabsPage.type === 'tab') {
//切换到非主页、或者切换到主页且主页必须有内容。方可阻止请求
if (pathURL !== '/' || (pathURL === '/' && admin.tabsBody().html())) {
admin.tabsBodyChange(tabsPage.index);
return reset(tabsPage.type);
}
}
$(APP_BODY).scrollTop(0);
delete tabsPage.type; //重置页面标签的来源类型
};
//请求视图渲染
view().render(path.join('/')).then(function (res) {
//遍历页签选项卡
var matchTo
, tabs = $('#LAY_app_tabsheader>li');
tabs.each(function (index) {
var li = $(this)
, layid = li.attr('lay-id');
if (layid === pathURL) {
matchTo = true;
tabsPage.index = index;
}
});
var tabName;
//start lsq 页面刷新后名称改变,把aj得存储到localStorage中 2022-03-30
let routerPath = router.path;
if (routerPath.indexOf('ajConfig') != -1 && routerPath.indexOf('view') != -1 && !localStorage.getItem(router.search.ajConfig)) {
localStorage.setItem(router.search.ajConfig, admin.tabsPage.elem.text());
}
//end lsq 2022-03-30
try {
let el = admin.tabsPage.elem;
if (el && el.attr('lay-href-type')) {
if (el.attr('lay-href-type') == 'menu' && !matchTo) {
tabName = admin.tabsPage.elem.text();
}
}
} catch (e) {
}
if (!tabName) {
//lsq 页面刷新后名称改变 2022-03-30
if (routerPath.indexOf('ajConfig') != -1 && routerPath.indexOf('view') != -1) {
tabName = localStorage.getItem(router.search.ajConfig);
} else {
tabName = res.title
//如果路由来自于 tab 切换,则不重新请求视图
if(tabsPage.type === 'tab'){
//切换到非主页、或者切换到主页且主页必须有内容。方可阻止请求
if(pathURL !== '/' || (pathURL === '/' && admin.tabsBody().html())){
admin.tabsBodyChange(tabsPage.index);
return reset(tabsPage.type);
}
}
//请求视图渲染
view().render(path.join('/')).then(function(res){
//遍历页签选项卡
var matchTo
,tabs = $('#LAY_app_tabsheader>li');
tabs.each(function(index){
var li = $(this)
,layid = li.attr('lay-id');
if(layid === pathURL){
matchTo = true;
tabsPage.index = index;
}
});
var tabName;
//start lsq 页面刷新后名称改变,把aj得存储到localStorage中 2022-03-30
let routerPath=router.path;
if(routerPath.indexOf('ajConfig')!=-1 && routerPath.indexOf('view')!=-1 && !localStorage.getItem(router.search.ajConfig)){
localStorage.setItem(router.search.ajConfig,admin.tabsPage.elem.text());
}
//end lsq 2022-03-30
try {
let el = admin.tabsPage.elem;
if(el && el.attr('lay-href-type')){
if(el.attr('lay-href-type') == 'menu' && !matchTo){
tabName= admin.tabsPage.elem.text();
}
}
}
} catch (e){
}
if(!tabName){
//lsq 页面刷新后名称改变 2022-03-30
if(routerPath.indexOf('ajConfig')!=-1 && routerPath.indexOf('view')!=-1){
tabName=localStorage.getItem(router.search.ajConfig);
}else{
tabName= res.title
}
}
//如果未在选项卡中匹配到,则追加选项卡
if (setter.pageTabs && pathURL !== '/') {
if (!matchTo) {
$(APP_BODY).append('<div class="layadmin-tabsbody-item layui-show"></div>');
tabsPage.index = tabs.length;
element.tabAdd(FILTER_TAB_TBAS, {
title: '<span>' + (tabName || '新标签页') + '</span>'
, id: pathURL
, attr: router.href
});
}
}
//如果未在选项卡中匹配到,则追加选项卡
if(setter.pageTabs && pathURL !== '/'){
if(!matchTo){
$(APP_BODY).append('<div class="layadmin-tabsbody-item layui-show"></div>');
tabsPage.index = tabs.length;
element.tabAdd(FILTER_TAB_TBAS, {
title: '<span>'+ (tabName || '新标签页') +'</span>'
,id: pathURL
,attr: router.href
});
}
}
this.container = admin.tabsBody(tabsPage.index);
setter.pageTabs || this.container.scrollTop(0); //如果不开启标签页,则跳转时重置滚动条
//定位当前tabs
element.tabChange(FILTER_TAB_TBAS, pathURL);
// 修改为当前菜单名称
$('* [lay-id="' + pathURL + '"] span').text(tabName)
admin.tabsBodyChange(tabsPage.index);
}).done(function(){
layui.use('common', layui.cache.callback.common);
$win.on('resize', layui.data.resize);
element.render('breadcrumb', 'breadcrumb');
//容器 scroll 事件,剔除吸附层
admin.tabsBody(tabsPage.index).on('scroll', function(){
var othis = $(this)
,elemDate = $('.layui-laydate')
,layerOpen = $('.layui-layer')[0];
//关闭 layDate
if(elemDate[0]){
elemDate.each(function(){
var thisElemDate = $(this);
thisElemDate.hasClass('layui-laydate-static') || thisElemDate.remove();
});
othis.find('input').blur();
this.container = admin.tabsBody(tabsPage.index);
setter.pageTabs || this.container.scrollTop(0); //如果不开启标签页,则跳转时重置滚动条
//定位当前tabs
element.tabChange(FILTER_TAB_TBAS, pathURL);
// 修改为当前菜单名称
$('* [lay-id="' + pathURL + '"] span').text(tabName)
admin.tabsBodyChange(tabsPage.index);
}).done(function () {
layui.use('common', layui.cache.callback.common);
$win.on('resize', layui.data.resize);
element.render('breadcrumb', 'breadcrumb');
//容器 scroll 事件,剔除吸附层
admin.tabsBody(tabsPage.index).on('scroll', function () {
var othis = $(this)
, elemDate = $('.layui-laydate')
, layerOpen = $('.layui-layer')[0];
//关闭 layDate
if (elemDate[0]) {
elemDate.each(function () {
var thisElemDate = $(this);
thisElemDate.hasClass('layui-laydate-static') || thisElemDate.remove();
});
othis.find('input').blur();
}
//关闭 Tips 层
layerOpen && layer.closeAll('tips');
});
});
reset();
}
//关闭 Tips 层
layerOpen && layer.closeAll('tips');
});
});
//入口页面
, entryPage = function (fn) {
var router = layui.router()
, container = view(setter.container)
, pathURL = admin.correctRouter(router.path.join('/'))
, isIndPage;
//检查是否属于独立页面
layui.each(setter.indPage, function (index, item) {
if (pathURL === item) {
return isIndPage = true;
}
});
reset();
}
//入口页面
,entryPage = function(fn){
var router = layui.router()
,container = view(setter.container)
,pathURL = admin.correctRouter(router.path.join('/'))
,isIndPage;
//检查是否属于独立页面
layui.each(setter.indPage, function(index, item){
if(pathURL === item){
return isIndPage = true;
}
});
//将模块根路径设置为 controller 目录
layui.config({
base: setter.base + 'controller/'
});
//将模块根路径设置为 controller 目录
layui.config({
base: setter.base + 'controller/'
});
// 跳转到过度页面的时候,判断参数与跳转的过渡页面的参数是否一直,则强制设置hash
// http://localhost:8088/?Authorization=xxx&show=0&url=alarm/activewarning#/page/forward
var href = window.location.href;
// 跳转到过度页面的时候,判断参数与跳转的过渡页面的参数是否一直,则强制设置hash
// http://localhost:8088/?Authorization=xxx&show=0&url=alarm/activewarning#/page/forward
var href = window.location.href;
if(href.indexOf('?Authorization') != -1 && href.indexOf('&show=0&url=') != -1 && pathURL !== '/page/forward'){
return location.hash = "/page/forward";
}
//跳转到告警页面
let params=new URLSearchParams(location.search);
let [bizId]=[params.get('bizId')];
//活动告警页面
if( href.indexOf('&show=3') != -1 && pathURL !== '/alarm/activewarning'){
return location.hash = "/alarm/activewarning/bizId="+bizId;
}
//历史告警页面
if( href.indexOf('&show=4') != -1 && pathURL !== '/alarm/historywarning'){
return location.hash = "/alarm/historywarning/bizId="+bizId;
}
//独立页面
if(isIndPage || pathURL === '/user/login'|| pathURL === '/page/forward'){ //此处单独判断登入页,是为了兼容旧版(即未在 sessions.js 配置 indPage 的情况)
let path = router.path.join('/')
if(pathURL.indexOf('/user/login') != -1){
var loginIndex = 'default';
// let loginSkin = sessionStorage.getItem("loginSkin");
//lsq 从cookie中获取登录皮肤 2022-03-31
//start lsq 从配置文件中获取登录皮肤 2022-06-07
// let loginSkin = admin.getCookie("loginSkin");
// http.get(window.location.origin + '/config/getConfig',{configName:'url'},function(res){
$.ajax({
url: '/config/getConfig',
data: {
configName: 'login'
},
async: false,
success(response) {
let loginSkin = response.skin;
if(loginSkin && ["default",'skin1','skin2'].indexOf(loginSkin) != -1){
if (href.indexOf('?Authorization') != -1 && href.indexOf('&show=0&url=') != -1 && pathURL !== '/page/forward'&& pathURL !== '/page/log') {
if(href.indexOf('&flag=log') != -1){
return location.hash = "/page/log";
}else {
return location.hash = "/page/forward";
}
}
//跳转到告警页面
let params = new URLSearchParams(location.search);
let [bizId] = [params.get('bizId')];
//活动告警页面
if (href.indexOf('&show=3') != -1 && pathURL !== '/alarm/activewarning') {
return location.hash = "/alarm/activewarning/bizId=" + bizId;
}
//历史告警页面
if (href.indexOf('&show=4') != -1 && pathURL !== '/alarm/historywarning') {
return location.hash = "/alarm/historywarning/bizId=" + bizId;
}
//独立页面
if (isIndPage || pathURL === '/user/login' || pathURL === '/page/forward' || pathURL == "/page/log") { //此处单独判断登入页,是为了兼容旧版(即未在 sessions.js 配置 indPage 的情况)
let path = router.path.join('/')
if (pathURL.indexOf('/user/login') != -1) {
var loginIndex = 'default';
// let loginSkin = sessionStorage.getItem("loginSkin");
//lsq 从cookie中获取登录皮肤 2022-03-31
let loginSkin = admin.getCookie("loginSkin");
if (loginSkin && ["default", 'skin1', 'skin2'].indexOf(loginSkin) != -1) {
loginIndex = loginSkin;
}
path = path + '-' + loginIndex;
}
});
//end lsq 2022-06-07
container.render(path).done(function () {
admin.pageType = 'alone';
});
} else { //后台框架页面
//强制拦截未登入
if (setter.interceptor) {
var local = layui.data(setter.tableName);
if (!local[setter.request.tokenName]) {
return location.hash = '/user/login/redirect=' + encodeURIComponent(pathURL); //跳转到登入页
}
}
//渲染后台结构
if (admin.pageType === 'console') { //后台主体页
renderPage();
} else { //初始控制台结构
var renderUrl = 'layout';
// if(localStorage.getItem("lgn") != 'admin'){
// renderUrl = 'layout-nx';
// }
let userLayout = sessionStorage.getItem("userLayout");
if (userLayout && ['layout', 'layout-nx'].indexOf(userLayout) != -1) {
renderUrl = userLayout;
}
container.render(renderUrl).done(function () {
renderPage();
layui.element.render();
if (admin.screen() < 2) {
admin.sideFlexible();
}
admin.pageType = 'console';
});
}
}
}
container.render(path).done(function(){
admin.pageType = 'alone';
});
} else { //后台框架页面
//强制拦截未登入
if(setter.interceptor){
var local = layui.data(setter.tableName);
if(!local[setter.request.tokenName]){
return location.hash = '/user/login/redirect='+ encodeURIComponent(pathURL); //跳转到登入页
, APP_BODY = '#LAY_app_body', FILTER_TAB_TBAS = 'layadmin-layout-tabs'
, $ = layui.$, $win = $(window);
//初始主体结构
layui.link(setter.base + 'style/admin.css?v=' + (admin.v + '-1'));
layui.link(setter.base + 'style/css/main.css?v=' + (admin.v + '-1'), entryPage, 'layuiAdmin');
//监听Hash改变
window.onhashchange = function () {
entryPage();
//执行 {setter.MOD_NAME}.hash 下的事件
layui.event.call(this, setter.MOD_NAME, 'hash({*})', layui.router());
};
//扩展 lib 目录下的其它模块
layui.each(setter.extend, function (index, item) {
var mods = {};
if (item === 'mxClient') {
mods[item] = '{/}' + setter.base + 'lib/mxgraph/' + item;
}
}
//渲染后台结构
if(admin.pageType === 'console') { //后台主体页
renderPage();
} else { //初始控制台结构
var renderUrl = 'layout';
// if(localStorage.getItem("lgn") != 'admin'){
// renderUrl = 'layout-nx';
// }
let userLayout = sessionStorage.getItem("userLayout");
if(userLayout && ['layout','layout-nx'].indexOf(userLayout) != -1){
renderUrl = userLayout;
}
container.render(renderUrl).done(function(){
renderPage();
layui.element.render();
if(admin.screen() < 2){
admin.sideFlexible();
}
admin.pageType = 'console';
});
}
}
}
,APP_BODY = '#LAY_app_body', FILTER_TAB_TBAS = 'layadmin-layout-tabs'
,$ = layui.$, $win = $(window);
//初始主体结构
layui.link(setter.base + 'style/admin.css?v='+ (admin.v + '-1'));
layui.link(setter.base + 'style/css/main.css?v='+ (admin.v + '-1'), entryPage, 'layuiAdmin');
//监听Hash改变
window.onhashchange = function(){
entryPage();
//执行 {setter.MOD_NAME}.hash 下的事件
layui.event.call(this, setter.MOD_NAME, 'hash({*})', layui.router());
};
//扩展 lib 目录下的其它模块
layui.each(setter.extend, function(index, item){
var mods = {};
if(item === 'mxClient'){
mods[item] = '{/}' + setter.base + 'lib/mxgraph/' + item;
}
else if(item === 'soulTable' || item === 'tableFilter' || item === 'tableChild'
|| item === 'tableMerge' || item === 'excel'){
mods[item] = '{/}' + setter.base + 'lib/soultable/' + item;
}else if(item === 'tableEdit' || item === 'tableTree'){
mods[item] = '{/}' + setter.base + 'lib/tabletree/' + item;
} else{
mods[item] = '{/}' + setter.base + 'lib/extend/' + item;
}
layui.extend(mods);
});
else if (item === 'soulTable' || item === 'tableFilter' || item === 'tableChild'
|| item === 'tableMerge' || item === 'excel') {
mods[item] = '{/}' + setter.base + 'lib/soultable/' + item;
} else if (item === 'tableEdit' || item === 'tableTree') {
mods[item] = '{/}' + setter.base + 'lib/tabletree/' + item;
} else {
mods[item] = '{/}' + setter.base + 'lib/extend/' + item;
}
layui.extend(mods);
});
// 创建canvas
window.createCanvas = function (target) {
... ... @@ -338,34 +330,34 @@ layui.extend({
// 设置canvas尺寸
window.resizeEventFn = function () {
$(onresizeEvents).map(function (index, event) {
var item = event.val;
if (typeof item === 'function') {
item();
} else if (item[0].nodeName.toUpperCase() === 'CANVAS') {
var canvas = item;
var target = canvas.parent();
canvas[0].width= target.width() + 30;
canvas[0].height = target.height() + 20;
}
});
$(onresizeEvents).map(function (index, event) {
var item = event.val;
if (typeof item === 'function') {
item();
} else if (item[0].nodeName.toUpperCase() === 'CANVAS') {
var canvas = item;
var target = canvas.parent();
canvas[0].width = target.width() + 30;
canvas[0].height = target.height() + 20;
}
});
};
// 页面尺寸变化的事件栈
window.onresizeEvents = [];
window.setResizeEvents = function(key, val) {
var index = -1;
window.setResizeEvents = function (key, val) {
var index = -1;
$(onresizeEvents).map(function (i, event) {
if (event.key === key) {
index = i;
}
});
$(onresizeEvents).map(function (i, event) {
if (event.key === key) {
index = i;
}
});
if (index !== -1) {
onresizeEvents.splice(index, 1);
}
onresizeEvents.push({ key: key, val: val });
if (index !== -1) {
onresizeEvents.splice(index, 1);
}
onresizeEvents.push({key: key, val: val});
};
window.addEventListener('resize', resizeEventFn);
... ... @@ -375,7 +367,7 @@ layui.extend({
*/
window.generateUUID = function () {
var d = new Date().getTime()
return'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
var r = (d + Math.random() * 16) % 16 | 0;
d = Math.floor(d / 16);
return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
... ... @@ -384,285 +376,285 @@ layui.extend({
//系统登录后建立长连接监控实时告警信息
layui.use(['jquery','msgTips','sockjs','stomp', 'laytpl'], function () {
var msgTips = layui.msgTips
,webSockState = false
,sock = undefined
,stompClient = null
,laytpl = layui.laytpl
,access_token = localStorage.getItem("access_token")
,domainName = sessionStorage.getItem('domainName');
var connectFlg = false;
var tryIndex = 1;
var voiceList = [{
voice_:'咳咳',
type_:'ERROR',
},{
voice_:'微信提醒',
type_:'WARNING',
},{
voice_:'滑稽',
type_:'SUCCESS',
}];
//setTimeout(alarmWebSocket,10000);
function alarmWebSocket() {
if (!webSockState) {
webSockState = true;
console.log("websock正在连接。。。。。。")
sock = new SockJS(domainName+'/api-web/sock-js?access_token=' + access_token);
stompClient = Stomp.over(sock);
stompClient.connect({},function (frame) {
console.log("websock连接成功。。。。。。")
connectFlg = true;
tryIndex = 1;
//通过stompClient.subscribe订阅/topic/getResponse 目标(destination)发送的消息
// stompClient.send("/home/alarmPolling", {}, JSON.stringify({ 'accessToken': access_token }),function (e) {
// console.log(e)
// });
//通过stompClient.subscribe订阅/topic/getResponse 目标(destination)发送的消息
stompClient.subscribe('/alarmQuery/', function(respnose){
var alarmArr = JSON.parse(respnose.body);
var mp3Name = sessionStorage.getItem('mp3');
var audio = audioPlayer(`../src/style/mp3/${mp3Name}.mp3`)
$.each(alarmArr,function (i,v) {
if (v.alarmContent) {
(function(i) {
var alarmLevel = 'error';
var alarmType = 'alarm';
if (v.clearType && v.alarmLevel === '1') {
alarmLevel = 'info';
} else if (v.clearType && v.alarmLevel === '2') {
alarmLevel = 'warning';
} else if (v.clearType && v.alarmLevel === '3') {
alarmLevel = 'error';
} else if (v.clearType === 0) {
alarmLevel = 'success';
alarmType = 'alarmHis'
}
let isNotify = alarmByUser(v.alarmId,alarmType === 'alarm' ? 'b_alarm' : 'b_alarm_his');
if (isNotify) {
setTimeout(function() {
audio.playclip();
new msgTips({
dom:".right-bottom-tips",
title: "告警消息",
message:`<p style="line-height: 40px">${v.alarmContent}</p>`,
duration:10000,
space:10,
firstSpace:8,
limit:8,
margin:15,
direction:'right bottom',
timingFun:'ease',
width:'300px',
toastType:alarmLevel,
type:'click',
action: function () {
if (alarmType === 'alarm') {
location.hash = "/alarm/activewarning/alarmNo=" + v.alarmNo;
} else {
location.hash = "/alarm/historywarning/alarmNo=" + v.alarmNo;
}
}
})
}, (i + 1) * 1250);
}
})(i)
}
})
});
// 弹框展示错误消息
let showTips = function (content,title="提示", toastType = 'error', hash, delay = 1000, queryResult) {
if (queryResult) {
content = laytpl(content).render(queryResult);
}
//判断是否为故障诊断的三种类型
if(toastType=='faultinfo'||toastType=='faultover'||toastType=='faultprogress'){
var imgUrl="";
if(toastType=='faultinfo'){
imgUrl="/src/style/img/fault.png";
}
layui.use(['jquery', 'msgTips', 'sockjs', 'stomp', 'laytpl'], function () {
var msgTips = layui.msgTips
, webSockState = false
, sock = undefined
, stompClient = null
, laytpl = layui.laytpl
, access_token = localStorage.getItem("access_token")
, domainName = sessionStorage.getItem('domainName');
var connectFlg = false;
var tryIndex = 1;
var voiceList = [{
voice_: '咳咳',
type_: 'ERROR',
}, {
voice_: '微信提醒',
type_: 'WARNING',
}, {
voice_: '滑稽',
type_: 'SUCCESS',
}];
//setTimeout(alarmWebSocket,10000);
function alarmWebSocket() {
if (!webSockState) {
webSockState = true;
console.log("websock正在连接。。。。。。")
sock = new SockJS(domainName + '/api-web/sock-js?access_token=' + access_token);
stompClient = Stomp.over(sock);
stompClient.connect({}, function (frame) {
console.log("websock连接成功。。。。。。")
connectFlg = true;
tryIndex = 1;
//通过stompClient.subscribe订阅/topic/getResponse 目标(destination)发送的消息
// stompClient.send("/home/alarmPolling", {}, JSON.stringify({ 'accessToken': access_token }),function (e) {
// console.log(e)
// });
//通过stompClient.subscribe订阅/topic/getResponse 目标(destination)发送的消息
stompClient.subscribe('/alarmQuery/', function (respnose) {
var alarmArr = JSON.parse(respnose.body);
var mp3Name = sessionStorage.getItem('mp3');
var audio = audioPlayer(`../src/style/mp3/${mp3Name}.mp3`)
$.each(alarmArr, function (i, v) {
if (v.alarmContent) {
(function (i) {
var alarmLevel = 'error';
var alarmType = 'alarm';
if (v.clearType && v.alarmLevel === '1') {
alarmLevel = 'info';
} else if (v.clearType && v.alarmLevel === '2') {
alarmLevel = 'warning';
} else if (v.clearType && v.alarmLevel === '3') {
alarmLevel = 'error';
} else if (v.clearType === 0) {
alarmLevel = 'success';
alarmType = 'alarmHis'
}
let isNotify = alarmByUser(v.alarmId, alarmType === 'alarm' ? 'b_alarm' : 'b_alarm_his');
if (isNotify) {
setTimeout(function () {
audio.playclip();
new msgTips({
dom: ".right-bottom-tips",
title: "告警消息",
message: `<p style="line-height: 40px">${v.alarmContent}</p>`,
duration: 10000,
space: 10,
firstSpace: 8,
limit: 8,
margin: 15,
direction: 'right bottom',
timingFun: 'ease',
width: '300px',
toastType: alarmLevel,
type: 'click',
action: function () {
if (alarmType === 'alarm') {
location.hash = "/alarm/activewarning/alarmNo=" + v.alarmNo;
} else {
location.hash = "/alarm/historywarning/alarmNo=" + v.alarmNo;
}
}
})
}, (i + 1) * 1250);
}
})(i)
}
})
});
// 弹框展示错误消息
let showTips = function (content, title = "提示", toastType = 'error', hash, delay = 1000, queryResult) {
if (queryResult) {
content = laytpl(content).render(queryResult);
}
if(toastType=='faultover'){
imgUrl="/src/style/img/faultprogress.png";
}
//判断是否为故障诊断的三种类型
if (toastType == 'faultinfo' || toastType == 'faultover' || toastType == 'faultprogress') {
var imgUrl = "";
if (toastType == 'faultinfo') {
imgUrl = "/src/style/img/fault.png";
}
if(toastType=='faultprogress'){
imgUrl="/src/style/img/faultover.png";
}
setTimeout(function () {
new msgTips({
dom: ".right-bottom-tips",
title: title,
message: `<p style="line-height: 18px;background: url(${imgUrl}) no-repeat;background-size: 100%;height: 160px;background-position-x: right;padding: 145px 22px 0; "><span style=" overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;" title="${content}">${content}</span><span class="title closeFault" style="position: absolute;top: 66px;left: 214px;">X</span><span style="position: absolute;left: 87px;top: 124px; font-weight: bold;float: right;">${title}</span></p>`,
duration: 10000,
space: 10,
firstSpace: 8,
limit: 8,
margin: 15,
direction: 'right top',
timingFun: 'ease',
width: '300px',
toastType: toastType,
type: 'click',
action: function () {
//if (hash) {
// location.hash = hash;
location.hash = "/faultDiagnosis/list/faultNo="+content.split(",")[0].split(":")[1];
//}
if (toastType == 'faultover') {
imgUrl = "/src/style/img/faultprogress.png";
}
})
}, delay);
}else{
setTimeout(function () {
new msgTips({
dom: ".right-bottom-tips",
title: title,
message: `<p style="line-height: 40px">${content}</p>`,
duration: 10000,
space: 10,
firstSpace: 8,
limit: 8,
margin: 15,
direction: 'right bottom',
timingFun: 'ease',
width: '300px',
toastType: toastType,
type: 'click',
action: function () {
if (hash) {
if(hash.toLowerCase().indexOf("http://")!=-1 && hash.toLowerCase().indexOf("https://")!=-1){
location.hash = hash;
}else{
window.location.href=hash;
if (toastType == 'faultprogress') {
imgUrl = "/src/style/img/faultover.png";
}
setTimeout(function () {
new msgTips({
dom: ".right-bottom-tips",
title: title,
message: `<p style="line-height: 18px;background: url(${imgUrl}) no-repeat;background-size: 100%;height: 160px;background-position-x: right;padding: 145px 22px 0; "><span style=" overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;" title="${content}">${content}</span><span class="title closeFault" style="position: absolute;top: 66px;left: 214px;">X</span><span style="position: absolute;left: 87px;top: 124px; font-weight: bold;float: right;">${title}</span></p>`,
duration: 10000,
space: 10,
firstSpace: 8,
limit: 8,
margin: 15,
direction: 'right top',
timingFun: 'ease',
width: '300px',
toastType: toastType,
type: 'click',
action: function () {
//if (hash) {
// location.hash = hash;
location.hash = "/faultDiagnosis/list/faultNo=" + content.split(",")[0].split(":")[1];
//}
}
})
}, delay);
} else {
setTimeout(function () {
new msgTips({
dom: ".right-bottom-tips",
title: title,
message: `<p style="line-height: 40px">${content}</p>`,
duration: 10000,
space: 10,
firstSpace: 8,
limit: 8,
margin: 15,
direction: 'right bottom',
timingFun: 'ease',
width: '300px',
toastType: toastType,
type: 'click',
action: function () {
if (hash) {
if (hash.toLowerCase().indexOf("http://") != -1 && hash.toLowerCase().indexOf("https://") != -1) {
location.hash = hash;
} else {
window.location.href = hash;
}
}
}
})
}, delay);
}
}
// 订阅实时消息
stompClient.subscribe('/realTime/', function (respnose) {
console.log('实时信息: ' + respnose);
var data = respnose.body;
if (data) {
var obj = JSON.parse(data);
showTips(obj.content, obj.title, obj.msgType.toLowerCase(), obj.href, 1000, obj.queryResult);
}
});
// 订阅用户消息
stompClient.subscribe("/user/realTime/notifications/", function (respnose) {
console.log('专属信息: ' + respnose);
var data = respnose.body;
if (data) {
var obj = JSON.parse(data);
if (obj.msgType == 'LOGOUT') {
layer.msg("登录凭证失效,请重新登录验证!", {
icon: 7, time: 3000
}, function () {
view.exit();
});
} else {
showTips(obj.content, obj.title, obj.msgType.toLowerCase(), obj.href, 1000, obj.queryResult);
if (typeof(obj.msgType) != "undefined") {
var str = '滑稽';
voiceList.forEach(item => {
if (item.type_ == obj.msgType) {
str = item.voice_;
}
})
var url = '../src/style/mp3/' + str + '.mp3';
var audio = audioPlayer(url);
audio.playclip();
}
}
})
}, delay);
}
}
});
}, function (e) {
console.log(`(${tryIndex})链接失败,重试中....`)
connectFlg = false;
if (location.hash.indexOf('#/user/login') == -1) {
// 调用测试接口,出现过期则会跳转到登录页面
admin.req({
url: domainName + "/api-web/common/test"
, type: "get"
, async: false
, done: function (data) {
tryFunc();
}
});
} else {
tryFunc();
}
})
}
}
// 订阅实时消息
stompClient.subscribe('/realTime/', function (respnose) {
console.log('实时信息: '+ respnose);
var data = respnose.body;
if (data) {
var obj = JSON.parse(data);
showTips(obj.content, obj.title, obj.msgType.toLowerCase(), obj.href, 1000, obj.queryResult);
//告警是否属于当前用户
function alarmByUser(alarmId, tableName) {
let isNotify = false;
$.ajax({
url: sessionStorage.getItem('domainName') + '/api-web/bAlarm/hasAlarmByUserName?access_token=' + localStorage.getItem("access_token") + '&alarmId=' + alarmId + '&tableName=' + tableName,
async: false,
success(res) {
if (res && res.success) {
isNotify = true;
}
}
});
return isNotify;
}
// 订阅用户消息
stompClient.subscribe("/user/realTime/notifications/", function (respnose) {
console.log('专属信息: '+ respnose);
var data = respnose.body;
if (data) {
var obj = JSON.parse(data);
if (obj.msgType == 'LOGOUT') {
layer.msg("登录凭证失效,请重新登录验证!", {
icon: 7, time: 3000
}, function () {
view.exit();
});
} else {
showTips(obj.content,obj.title, obj.msgType.toLowerCase(), obj.href, 1000, obj.queryResult);
if(typeof(obj.msgType)!="undefined"){
var str = '滑稽';
voiceList.forEach(item =>{
if(item.type_== obj.msgType){
str = item.voice_;
}
})
var url = '../src/style/mp3/' + str + '.mp3';
var audio = audioPlayer(url);
audio.playclip();
}
}
//音频播放
function audioPlayer(url) {
var audio = document.createElement('audio')
if (audio.canPlayType) {
var element = document.createElement('source')
element.setAttribute('src', url)
element.setAttribute('type', 'audio/mpeg')
audio.appendChild(element)
audio.load()
audio.playclip = function () {
audio.pause()
audio.currentTime = 0
audio.play()
}
});
},function(e){
console.log(`(${tryIndex})链接失败,重试中....`)
connectFlg = false;
if(location.hash.indexOf('#/user/login') == -1){
// 调用测试接口,出现过期则会跳转到登录页面
admin.req({
url: domainName + "/api-web/common/test"
, type: "get"
, async: false
, done: function (data) {
tryFunc();
}
});
} else {
tryFunc();
return audio
}
})
}
}
//告警是否属于当前用户
function alarmByUser(alarmId,tableName) {
let isNotify = false;
$.ajax({
url: sessionStorage.getItem('domainName') + '/api-web/bAlarm/hasAlarmByUserName?access_token=' + localStorage.getItem("access_token") + '&alarmId=' + alarmId + '&tableName=' + tableName,
async: false,
success(res) {
if (res && res.success) {
isNotify = true;
}
var tryFunc = function () {
setTimeout(function () {
if (!connectFlg) {
tryIndex++;
access_token = localStorage.getItem("access_token")
//webSockState = false;
//alarmWebSocket();
//setTimeout(tryFunc(),3000);
}
}
});
return isNotify;
}
//音频播放
function audioPlayer(url){
var audio = document.createElement('audio')
if (audio.canPlayType){
var element = document.createElement('source')
element.setAttribute('src', url)
element.setAttribute('type', 'audio/mpeg')
audio.appendChild(element)
audio.load()
audio.playclip=function(){
audio.pause()
audio.currentTime=0
audio.play()
}
return audio
}
}
var tryFunc = function () {
setTimeout(function () {
if(!connectFlg){
tryIndex++;
access_token = localStorage.getItem("access_token")
webSockState = false;
alarmWebSocket();
//setTimeout(tryFunc(),3000);
}
},tryIndex*3000);
}
tryFunc();
})
//对外输出
exports('index', {
render: renderPage
});
}, tryIndex * 3000);
}
tryFunc();
})
//对外输出
exports('index', {
render: renderPage
});
//解决刷新后中间出现404页面问题
var show = location.search.substr(1).split("&")[0].split("=")[1];
if(show == '1') window.history.pushState({} ,'' ,'#');
if(show != '0') location.hash = "/";
if (show == '1') window.history.pushState({}, '', '#');
if (show != '0') location.hash = "/";
});
... ...
... ... @@ -132,7 +132,7 @@ layui.define(['laytpl', 'layer'], function(exports){
typeof success === 'function' && success(res);
}
,error: function(e, code){
if(window.location.hash.indexOf('page/forward') != -1){
if(window.location.hash.indexOf('page/forward') != -1 || window.location.hash.indexOf('page/log') != -1){
return;
}
if(e.status == '401'){
... ...
<!-- -->
<article class="page-container template">
<div class="page-panel">
<div class="main" id="text">
加载中.....
</div>
</div>
<textarea id="line_param" style="display: none;">{{d}}</textarea>
</article>
<script>
layui.use('pageLog', function (fn) {
var $ = layui.$;
var parm = $("#line_param").val();
if(parm.indexOf('{{d') != -1){
fn();
}else{
fn(JSON.parse(parm));
}
});
</script>
... ...
... ... @@ -71,9 +71,13 @@
}
.container .cm-card .search-table {
padding: 0px 6px;
}
padding: 0px 3px;
}
.el-table__body, .el-table__footer, .el-table__header{
width: auto;
max-width: calc(100% - 10px);
}
/*
共通弹框配置样式
custom-class="config-dialog"
... ... @@ -132,7 +136,6 @@ custom-class="config-dialog"
background: #ffffff;
padding: 20px 5px 0;
}
.breadcrumb .el-breadcrumb .el-breadcrumb__item {
cursor: pointer;
}
... ...
<div >
<div style="width:auto;height: 100%">
<!-- 表格-->
<el-table :border="showBorder" v-loading="loading" :size="size" ref="multipleTable" @selection-change="handleSelectionChange" :data="dataList" stripe header-row-class-name="tbl-header-class" :height="height"
style="width: 100%;margin: 0px 0px; font-size:13.5px;" :row-key="getRowKeys" :expand-row-keys="expands" :default-expand-all="defaultExpand"
@select="handleSelect" @select-all="handleSelectAll"
>
<el-table class="table-style-custom" :border="showBorder" v-loading="loading" :size="size" ref="multipleTable"
@selection-change="handleSelectionChange" :data="dataList"
:height="height"
:row-key="getRowKeys" :expand-row-keys="expands">
<el-table-column type="expand" v-if="showExpand">
<template #default="scope">
<slot name="expand" :scope="scope" >
<slot name="expand" :scope="scope">
</slot>
</template>
</el-table-column>
<el-table-column v-if="showSelection && columns.length > 0" align="center" type="selection" width="55" />
<el-table-column v-if="showIndex && columns.length > 0" type="index" :label="indexLabel" align="center" width="50"/>
<el-table-column v-if="showSelection && columns.length > 0" align="center" type="selection" width="55"/>
<el-table-column v-if="showIndex && columns.length > 0" type="index" :label="indexLabel" align="center"
width="50"/>
<el-table-column v-for="item in columns" :prop="item.prop" :label="item.label" :sortable="item.sortable == undefined ? false : item.sortable" :align="item.align == undefined ? 'center' : item.align "
<el-table-column v-for="item in columns" :prop="item.prop" :label="item.label"
:sortable="item.sortable == undefined ? false : item.sortable"
:align="item.align == undefined ? 'center' : item.align "
:width="getWidth(item.width)">
<template #default="scope">
<slot :row="scope.row" :prop="item.prop" :column="item">
<div v-if="typeof(item.click) == 'function' && typeof(item.render) == 'function'">
<span style="cursor: pointer" @click="item.click(scope.row)" v-html="item.render(scope.row)"></span>
<div v-if="typeof(item.click) == 'function' && typeof(item.render) == 'function'">
<span style="cursor: pointer" @click="item.click(scope.row)"
v-html="item.render(scope.row)"></span>
</div>
<div v-else-if="typeof(item.click) == 'function'" >
<div v-else-if="typeof(item.click) == 'function'">
<span style="cursor: pointer" @click="item.click(scope.row)"> {{scope.row[item.prop]}}</span>
</div>
<div v-else-if="typeof(item.render) == 'function'" >
<div v-else-if="typeof(item.render) == 'function'">
<span v-html="item.render(scope.row)">{{scope.row[item.prop]}}</span>
</div>
... ... @@ -44,9 +48,9 @@
</template>
</el-table-column>
<el-table-column v-if="showTools && columns.length > 0" label="操作" width="80" align="center">
<el-table-column v-if="showTools && columns.length > 0" label="操作" width="80" align="center">
<template #default="scope">
<slot name="tools" :scope="scope" ></slot>
<slot name="tools" :scope="scope"></slot>
</template>
</el-table-column>
</el-table>
... ... @@ -65,4 +69,39 @@
</el-pagination>
</div>
</div>
<style lang="scss" scoped>
.table-style-custom {
width: calc(100% - 10px);
max-width: calc(100% - 10px);
margin: 5px auto;
border: 1px solid #4d5457; /* 表格整体的边框样式 */
border-top: 1px solid #4d5457;
border-left: 1px solid #4d5457;
//background-color: #131720;
}
.table-style-custom .el-table__body-wrapper .el-table__body,.table-style-custom .el-table__header-wrapper .el-table__header{
width: auto;
max-width: calc(100% - 10px);
}
.table-style-custom .el-table__header tr, .el-table__header th {
height: 40px;
padding: 0;
color: #ccd3cc;
background-color: #131720;
}
.table-style-custom .el-table__body tr, .el-table__body td {
padding: 0;
height: 40px;
color: #ccd3cc;
background-color: #2e313d;
}
.table-style-custom .el-table__body tr.current-row > td,
.table-style-custom .el-table__body tr:hover > td {
color: #07f;
cursor: pointer;
background-color: #363c53 !important;
}
</style>
\ No newline at end of file
... ...
... ... @@ -6,10 +6,13 @@
var global = {};
global.layui = window.parent.layui;
global.layer = window.parent.layer;
if (window.parent!= window.top) {
global.layui = window.parent.layui;
global.layer = window.parent.layer;
}else {
global.layui = undefined;
global.layer = undefined;
}
global.common = {
getUserName : function (){
return localStorage.getItem('lgn');
... ...
<div class="container" :style="{'height':height+'px','max-height':height+'px'}">
<div class="cm-card" :style="{'min-height':height+'px','max-height':height+'px','height':'100%'}">
<div class="search">
<div class="condition">
<div class="keyword" style="padding-left: 10px">
<el-input v-model="search.keyword" :size="$global.elementConfig.size.input"
placeholder="请输入关键字(回车搜索)" @keydown.enter.native="getDataList"></el-input>
</div>
<div class="selectType" style="padding-left: 10px;width: 120px;">
<el-select v-model="couponSelected" class="m-2" placeholder="请选择"
:size="$global.elementConfig.size.input" @change="onChangeStripe">
<el-option
v-for="item in typeOptions"
:key="item.value"
:label="item.label"
:value="item.value"/>
</el-select>
</div>
<el-button @click="addAj()" :size="$global.elementConfig.size.button">新增</el-button>
<div class="keyword" style="padding-left: 10px">
<el-form-item >
<el-input v-model="search.keyword" placeholder="请输入关键字,回车搜索" @keydown.enter.native="getDataList"></el-input>
</el-form-item>
</div>
<div class="btns">
<div class="selectType" style="padding-left: 10px;width: 120px;">
<el-select v-model="couponSelected" class="m-2" placeholder="请选择" size="large" @change="onChangeStripe">
<el-option
v-for="item in typeOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</div>
<div class="adds" style="">
<el-form-item>
<el-button @click="addAj()" style="margin-left: 10px">新增</el-button>
</el-form-item>
</div>
<div class="design" style="float:right;">
<el-form-item>
<el-button type="primary" @click="handleView()" :size="$global.elementConfig.size.button"
style="margin-left: 10px">设计
</el-button>
<el-button type="primary" @click="handleView()" style="margin-left: 10px">设计</el-button>
</el-form-item>
</div>
</div>
... ... @@ -36,7 +32,7 @@
<cm-table-page :columns="columns" :dataList="tableDataList" @loaddata="loadTableDataList"
:showIndex="true" :total="count" :showSelection="true"
:showBorder="true" :loading="false" :pageSize="pageSize"
:showPage="true" :showTools="true" :height="(height - 130)">
:showPage="true" :showTools="true" :height="(height - 130)" style="width:calc(100% - 10px);">
<template #default="{row,prop,column}">
<div v-if="prop == 'type'">
<div v-if="row.type == 0">
... ... @@ -54,15 +50,15 @@
</template>
<template #tools="{scope}">
<div class="list-handle">
<span class="icon-bg">
<i class="el-icon-delete" title="删除" @click="handleDelete(scope.row)"></i>
</span>
<span class="icon-bg">
<i class="el-icon-delete" title="删除" @click="handleDelete(scope.row)"></i>
</span>
<i class="el-icon-edit-outline" title="修改" @click="handleUpdate(scope.row)"></i>
</span>
<span class="icon-bg">
<i class="el-icon-edit-outline" title="修改" @click="handleUpdate(scope.row)"></i>
</span>
<span class="icon-bg">
<i class="el-icon-view" title="预览" @click="preview(scope.row)"></i>
</span>
<i class="el-icon-view" title="预览" @click="preview(scope.row)"></i>
</span>
</div>
</template>
</cm-table-page>
... ... @@ -71,11 +67,10 @@
</div>
<!--新增编辑弹框-->
<cm-dialog :title="titleName" width="700px" :showDialogVisible="cacheVisible" @hidedialog="cancelBtn"
:showFooter="false">
<cm-dialog :title="titleName" width="40%" :showDialogVisible="cacheVisible" @hidedialog="cancelBtn" :showFooter="false">
<template v-slot>
<el-form
label-width="100px"
label-width="120px"
ref="ruleForm"
:model="ajConfigFrom"
:rules="docRulesForm"
... ... @@ -83,18 +78,15 @@
label-width="120px">
<el-form-item label="编号" prop="id">
<el-input :size="$global.elementConfig.size.input" v-model="ajConfigFrom.id" :disabled="disabled" clearable ></el-input>
<el-input :size="$global.elementSize" v-model="ajConfigFrom.id" clearable></el-input>
</el-form-item>
<el-form-item label="类型" prop="type">
<div style="width: 240px">
<el-radio v-model="ajConfigFrom.type" label="0" :size="$global.elementConfig.size.input">菜单
</el-radio>
<el-radio v-model="ajConfigFrom.type" label="1" :size="$global.elementConfig.size.input">按钮
</el-radio>
<el-radio v-model="ajConfigFrom.type" label="2" :size="$global.elementConfig.size.input">详情页
</el-radio>
<el-radio v-model="ajConfigFrom.type" label="0" size="large">菜单</el-radio>
<el-radio v-model="ajConfigFrom.type" label="1" size="large">按钮</el-radio>
<el-radio v-model="ajConfigFrom.type" label="2" size="large">详情页</el-radio>
</div>
</el-form-item>
... ... @@ -104,9 +96,8 @@
filterable
allow-create
default-first-option
:size="$global.elementConfig.size.input"
:reserve-keyword="false"
placeholder="请选择" style="width: 100%;">
placeholder="请选择" style="width: calc(100% - 10px);">
<el-option
v-for="item in menuOptions"
:key="item.value"
... ... @@ -118,48 +109,43 @@
</el-form-item>
<el-form-item label="菜单名称" prop="menuName" v-if="ajConfigFrom.type==0">
<el-input v-model="ajConfigFrom.menuName" clearable
:size="$global.elementConfig.size.input"></el-input>
<el-input :size="$global.elementSize" v-model="ajConfigFrom.menuName" clearable></el-input>
</el-form-item>
<el-form-item label="弹框标题" prop="title" v-if="ajConfigFrom.type==1">
<el-input v-model="ajConfigFrom.title" clearable
:size="$global.elementConfig.size.input"></el-input>
<el-input :size="$global.title" v-model="ajConfigFrom.title" clearable></el-input>
</el-form-item>
<el-form-item label="设计页面" prop="designPage">
<div style="width: 100%;display: flex;">
<el-select v-model="ajConfigFrom.designPage"
filterable
allow-create
default-first-option
:reserve-keyword="false"
:size="$global.elementConfig.size.input"
placeholder="请选择" style="width: 91.73%;">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
:disabled="item.disabled">
</el-option>
</el-select>
<el-button :size="$global.elementConfig.size.input" style="margin-left: 10px" @click="preview(ajConfigFrom.designPage)">预览</el-button>
</div>
<el-select v-model="ajConfigFrom.designPage"
filterable
allow-create
default-first-option
:reserve-keyword="false"
placeholder="请选择" style="width: calc(100% - 10px);">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
:disabled="item.disabled">
</el-option>
</el-select>
<el-tag @click="preview(ajConfigFrom.designPage)" style="padding-top:4px;height: 38px; cursor:pointer">预览</el-tag>
</el-form-item>
<el-form-item label="传递参数" prop="param">
<el-input :size="$global.elementConfig.size.input" v-model="ajConfigFrom.param" clearable></el-input>
<el-input :size="$global.elementSize" v-model="ajConfigFrom.param" clearable></el-input>
<div style="color: darkgrey">
<div>
<el-collapse>
<el-collapse-item name="1">
<el-collapse-item name="1">
<template #title>
示例:&resId=#resId&access_token=#access_token
</el-icon>
</template>
<div style="font-size: 12px;text-align: left">可配置字段:</div>
<el-descriptions :column="2" size="mini" border>
<el-descriptions :column="2" size="mini" border >
<el-descriptions-item v-for="item in configs">
<template #label>
<div class="cell-item">
... ... @@ -176,15 +162,15 @@
</el-form-item>
<el-form-item label="资源类型" prop="resType" v-if="ajConfigFrom.type==2" style="text-align: left">
<!--<el-input :size="$global.elementSize" v-model="ajConfigFrom.resType" clearable></el-input>-->
<el-dropdown>
<cm-res-type-tree-input multiple clearable collapseTags @callback="getResType"/>
</el-dropdown>
</el-form-item>
<el-form-item label="厂商" prop="provider" v-if="ajConfigFrom.type==2" style="text-align: left">
<el-select v-model="ajConfigFrom.provider" filterable clearable collapse-tags placeholder="请选择厂商"
:size="$global.elementConfig.size.input"
style="width: 100%">
<!--<el-input :size="$global.elementSize" v-model="ajConfigFrom.firm" clearable></el-input>-->
<el-select v-model="ajConfigFrom.provider" filterable clearable collapse-tags placeholder="请选择厂商" style="width: 550px">
<el-option
v-for="item in ddicProvider"
:label="item.ddicName" :value="item.ddicCode"></el-option>
... ... @@ -193,8 +179,8 @@
<el-form-item label="操作系统" prop="os" v-if="ajConfigFrom.type==2" style="text-align: left">
<el-select v-model="ajConfigFrom.os" filterable clearable collapse-tags placeholder="请选择操作类型"
style="width: 100%">
<!--<el-input :size="$global.elementSize" v-model="ajConfigFrom.firm" clearable></el-input>-->
<el-select v-model="ajConfigFrom.os" filterable clearable collapse-tags placeholder="请选择操作类型" style="width: 550px">
<el-option
v-for="item in ddicOS"
:label="item.ddicName" :value="item.ddicCode"></el-option>
... ... @@ -206,12 +192,12 @@
</el-form-item>-->
<el-form-item label="备注" prop="remark">
<el-input :size="$global.elementConfig.size.input" v-model="ajConfigFrom.remark" clearable></el-input>
<el-input :size="$global.elementSize" v-model="ajConfigFrom.remark" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button :size="$global.elementConfig.size.input" type="primary" @click="addAjConfig('ruleForm')">保存</el-button>
<el-button :size="$global.elementConfig.size.input" @click="cancelBtn">取消</el-button>
<el-button :size="$global.elementSize" type="primary" @click="addAjConfig('ruleForm')">保存</el-button>
<el-button :size="$global.elementSize" @click="cancelBtn">取消</el-button>
</el-form-item>
</el-form>
</template>
... ...
/**
* 折线图
* <p>
* 作者: Wang
* 时间:2021/12/15 19:59
*/
const lineDetail = (props) => {
const {proxy} = Vue.getCurrentInstance();
let showLineDialog = Vue.ref(false);
let dataSet = Vue.ref([]);
let closeLineDialog = (flg) => {
showLineDialog.value = flg;
}
let openLine = (row) => {
closeLineDialog(true);
getLineData(row);
}
let getLineData = (row) =>{
let params = {
faultNo: props.faultNo,
targetType: props.targetType,
resId: row.resId,
kpiId: row.kpiId,
flag: row.flag
}
proxy.$http.get('/api-web/fault/result/findLineData', params, function (res) {
if (res && res.success) {
if (res.data) {
let arr = [];
arr.push(['product',res.data[0].resName ]);
res.data.forEach(function (v){
let time = v.collTime;
let val = v.kpiValue;
arr.push([time,val ]);
})
dataSet.value = arr;
}
} else {
proxy.$global.showMsg(res.msg, "warning");
}
});
}
return {
showLineDialog,
closeLineDialog,
openLine,
dataSet
}
}
/**
* 告警列表
* <p>
* 作者: Wang
* 时间:2021/12/15 19:59
*/
const alarmDialog = (props) => {
const {proxy} = Vue.getCurrentInstance();
let alarmFlg = Vue.ref(false);
let alarmList = Vue.ref({
columns: [{
prop: "resId",
label: "资源ID",
width:120
}, {
prop: "kpiId",
label: "指标ID",
width:120
}, {
prop: "flag",
label: "指标标识",
width:120
}, {
prop: "alarmId",
label: "告警ID",
width:120
},{
prop: "alarmContent",
label: "告警内容",
width:250
}, {
prop: "firstAlarmTime",
label: "首次告警时间",
width:120
}, {
prop: "recentAlarmTime",
label: "最近告警时间",
width:120
}, {
prop: "alarmRepeatCnt",
label: "告警次数",
width:80
}, {
prop: "noticeContent",
label: "通知内容",
width:300
}, {
prop: "alarmLevel",
label: "告警级别",
width:80,
render: function (row) {
let obj = proxy.$global.getAlarmLevel(row.alarmLevel);
if (obj) {
return `<span style="color: ${obj.color}">${obj.name}</span>`
}
return '';
}
}/*, {
prop: "firstAlarmTime",
label: "时间戳",
}*/],
dataList: [],
total: 0
});
let showAlarmDialog = (flg) => {
alarmFlg.value = flg;
}
let openAlarmDialog = (row) => {
showAlarmDialog(true);
// 获取告警列表
let params ={
faultNo: props.faultNo,
targetType: props.targetType,
resId: row.resId,
kpiId: row.kpiId,
flag: row.flg
}
proxy.$http.get(`/api-web/fault/result/findAlarmList`, params, function (res) {
if (res && res.success) {
if (res.data) {
alarmList.value.dataList = res.data;
}
} else {
proxy.$global.showMsg(res.msg ? res.msg : '暂无告警数据!', "warning");
}
});
}
return {
showAlarmDialog,
openAlarmDialog,
alarmList,
alarmFlg
}
}
/**
* 数据转换
* <p>
* 作者: Wang
* 时间:2021/12/15 18:08
*/
const colTypes = (props, list,openLine,openAlarmDialog) => {
let widths ={
errcode:150
}
// 展示折线图指标
let lineKpiIds = ['point_succ', 'count', 'response_rate', 'success_rate'];
/**
* 拨测
* @param row
* @returns {`<span style="${string}">${string}</span>`}
*/
let point_succ = (val) =>{
let css = "text-decoration: underline;";
if(val != undefined && val === 0){
css += "color: red;";
} else {
css += "color: blue;";
}
return `<span style="${css}">${val}</span>`;
}
/**
* NPM 成功率
* @param row
* @returns {`<span style="${string}">${string}</span>`}
*/
let success_rate = (val) =>{
let css = "text-decoration: underline;";
if(val != undefined && val === 100){
css += "color: blue;";
} else {
css += "color: red;";
}
return `<span style="${css}">${val}</span>`;
}
/**
* NPM 响应率
* @param row
* @returns {`<span style="${string}">${string}</span>`}
*/
let response_rate = (val) =>{
let css = "text-decoration: underline;";
if(val != undefined && val === 100){
css += "color: blue;";
} else {
css += "color: red;";
}
return `<span style="${css}">${val}</span>`;
}
let getItem = (v) => {
let item = {};
item.resId = v.resId;
item.resName = v.resName;
item.kpiName = v.kpiName;
item.bizId = v.bizId;
item.bizName = v.bizName;
item.kpiId = v.kpiId;
item.flag = v.flag;
return item;
}
/**
* KPI数据处理方式
* <p>
* 作者: Wang
* 时间:2021/12/15 16:12
*/
let dataTypeByKpi = (data) => {
let dataList = [];
let col = [{
prop: 'resName',
label: props.itemName,
width: 150
}];
let index = 0;
for (let resId in data) {
let list = data[resId];
let item = getItem(list[0]);
list.forEach(function (v) {
item[v.kpiId] = v.kpiValue;
item.kpiName = v.kpiName;
if (index == 0) {
let prop = v.kpiId;
let colInfo = {
prop: prop,
label: v.kpiName,
width: widths[prop] == undefined ? 50 : 100
};
if (lineKpiIds.indexOf(prop) != -1) {
colInfo['click'] = function (row) {
row.kpiId = prop;
row.flag = v.flag;
openLine(row);
}
colInfo['render'] = function (row) {
try {
if(row && Object.keys(row).length > 0 && prop){
let html = eval(prop + '(' + row[prop] + ')');
if(html){
return html;
}
}
}catch (e){
}
return `<span style="text-decoration: underline;color: blue;">${row[v.kpiId]}</span>`;;
}
}
col.push(colInfo)
}
});
dataList.push(item);
index++;
}
// 设置数据
list.value.dataList = dataList;
list.value.columns = col;
}
/**
* KPI数据处理方式
* <p>
* 作者: Wang
* 时间:2021/12/15 16:12
*/
let dataTypeByFlag = (data) => {
let flags = [{
prop: "count",
width:80,
label: "检测项目数",
}, {
prop: "normal",
width:80,
label: "正常数",
render: function (row) {
return `<span >${row.normal == undefined ? 0 : row.normal }</span>`
}
}, {
prop: "abnormal",
width:80,
label: "异常数",
render: function (row) {
return `<span >${row.abnormal == undefined ? 0 : row.abnormal }</span>`
}
}, {
prop: "alarm",
width:80,
label: "告警",
click: function (row) {
openAlarmDialog(row);
},
render: function (row) {
return `<span style="text-decoration: underline;color: blue;">${row.alarm == undefined ? 0 : row.alarm }</span>`
}
}];
let dataList = [];
let col = [{
prop: 'kpiName',
label: props.itemName,
width: 150
}];
flags.forEach(function (item) {
col.push(item)
})
let index = 0;
for (let resId in data) {
let list = data[resId];
let item = getItem(list[0]);
list.forEach(function (v) {
item[v.flag] = v.kpiValue;
});
dataList.push(item);
index++;
}
// 设置数据
list.value.dataList = dataList;
list.value.columns = col;
}
return {dataTypeByKpi, dataTypeByFlag}
}
const resDetail = (props,openLine) => {
const {proxy} = Vue.getCurrentInstance();
let resListDialog = Vue.ref(false);
let resList = Vue.ref({
columns: [{
prop: "resType",
label: "资源类型",
}, {
prop: "resName",
label: "资源名称",
}, {
prop: "kpiName",
label: "指标名称",
}, {
prop: "kpiValue",
label: "指标值",
click:function (row){
openLine(row);
},
render:function (row){
return `<span style="text-decoration: underline;color: blue;">${row.kpiValue}</span>`
}
}, {
prop: "collTime",
label: "采集时间",
}],
dataList: [],
total: 0
});
let showResListDialog = (flg) => {
resListDialog.value = flg;
}
let handleClick = (row, index) => {
showResListDialog(true);
getResListPage(row);
}
let getResListPage = (row) => {
let params = {
faultNo: props.faultNo,
targetType: props.targetType,
resId: row.resId,
kpiId: row.kpiId,
flag: row.flag
}
proxy.$http.get('/api-web/fault/result/findResList', params, function (res) {
if (res && res.success) {
if (res.data) {
resList.value.dataList = res.data;
}
} else {
proxy.$global.showMsg(res.msg, "warning");
}
});
}
let loadPage = () => {
}
return {
resList,
resListDialog,
showResListDialog,
getResListPage,
loadPage,
handleClick
}
}
export default {
name: 'resultItemIndex',
template: '',
components: {
'echarts-line': Vue.defineAsyncComponent(
() => myImport('components/common/echarts/line/index')
)
},
data() {
return {}
},
props: {
targetType: {
type: String,
default: ''
},
faultNo: {
type: String,
default: ''
},
itemName: {
type: String,
default: ''
},
// 展示详情页
showDetail: {
type: String,
default: ''
},
// 数据转行方式
colType: {
type: String,
default: 'kpi'
},
},
setup(props, {attrs, slots, emit}) {
let width = Vue.ref(window.innerWidth * 0.8 - 220);
const {proxy} = Vue.getCurrentInstance();
let list = Vue.ref({
columns: [],
dataList: [],
total: 0
});
let detailInfo = Vue.ref({
rate: 0,
info: ''
});
const {
showLineDialog,
closeLineDialog,
openLine,
dataSet
} = lineDetail(props);
const {
resList,
resListDialog,
showResListDialog,
getResListPage,
loadPage,
handleClick
} = resDetail(props,openLine);
const {
showAlarmDialog,
openAlarmDialog,
alarmList,
alarmFlg
} = alarmDialog(props);
// 数据统计方式
const {dataTypeByKpi, dataTypeByFlag} = colTypes(props, list,openLine,openAlarmDialog);
/**
* 获取表格数据
* <p>
* 作者: Wang
* 时间:2021/12/15 17:26
*/
let getPage = () => {
let params = {
faultNo: props.faultNo,
targetType: props.targetType
}
proxy.$http.get('/api-web/fault/result/findResult', params, function (res) {
if (res && res.success) {
if (res.map) {
callback(res.map);
}
} else {
proxy.$global.showMsg(res.msg, "warning");
}
});
// 设置数据
let callback = (data) => {
switch (props.colType) {
case 'kpi':
dataTypeByKpi(data);
break;
case 'flag':
dataTypeByFlag(data);
break;
}
}
}
/**
* 获取统计信息
*/
let findCountInfo = () => {
let params = {
faultNo: props.faultNo,
targetType: props.targetType
}
proxy.$http.get('/api-web/fault/result/findCountInfo', params, function (res) {
if (res && res.success) {
if (res.map) {
detailInfo.value = res.map;
}
} else {
proxy.$global.showMsg(res.msg, "warning");
}
});
}
// 监听编辑状态
Vue.watch(() => props.faultNo, (newValue, oldVlaue) => {
getPage();
});
// 挂载完
Vue.onMounted(() => {
getPage();
findCountInfo();
})
return {
width,
list,
detailInfo,
// 折线图
showLineDialog,
closeLineDialog,
openLine,
dataSet,
// 资源详情
resList,
resListDialog,
showResListDialog,
getResListPage,
loadPage,
handleClick,
// 告警弹框
showAlarmDialog,
openAlarmDialog,
alarmList,
alarmFlg
}
}
}
... ...
export default {
name: 'monitoringMonth',
template: '',
components: {
'BarChart': Vue.defineAsyncComponent(
() => myImport('views/zjdaping/components/barChart/index')
)
},
data(){
return {
domainName:sessionStorage.getItem('domainName'),
apiUrl:'/api-web/bigScreen/thirtyDayMonitor?kipId=KPI63C5B2E5',
declareLineData:'',
yAxisCommon:[],
ySeriesCommon:[],
legendData:[],
ySeriesCommonData:[],
optionData:''
}
},
watch:{
},
setup(props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
// 挂载完
Vue.onMounted(() => {
$.get(proxy.domainName +proxy.apiUrl,function (res) {
const data = res;
if (data && data.data) {
let monitoringBarData=data.data;
let legendData=[];
$.each(monitoringBarData,function (i,v){
proxy.ySeriesCommonData.unshift(
{value:v.value,date:v.date}
)
legendData.push(
{value:i+1,date:v.date}
)
})
proxy.legendData=legendData
}
// proxy.ySeriesCommon=
proxy.optionInti()
})
})
const optionInti=()=>{
proxy.optionData = {
title: {
text: '近30天登录量',
x:'center',
y:'9px',
textStyle:{
color:"#ffffff",
fontSize:14
}
},
tooltip: {
trigger: 'axis',
backgroundColor:'rgba(50,50,50,0.7)',
borderColor:"#333",
textStyle:{
color:"#fff",
align:'left'
},
formatter: function(params) {
var res = '<div>'+params[0].data.date+'</div>'+params[0].data.value+' 次';
return res;
}
},
grid: {
left: '10%',
right: '4%',
bottom: '10%',
},
xAxis: {
type: 'category',
data: proxy.legendData,
axisLine:{
show:true,//是否显示坐标线
lineStyle: {
color:'#0a1b31'//坐标线颜色
}
},
axisTick: {
show: false //是否显示坐标刻度
},
axisLabel:{
color:'#ffffff',
fontSize: 12
},
},
yAxis: {
type: 'value',
splitLine:{
show:false,
},
axisLine:{
show:true,//是否显示坐标线
lineStyle: {
color:'#0a1b31'//坐标线颜色
}
},
axisLabel:{
color:'#ffffff',
fontSize:12,
formatter:function (value,index){
if(value>=10000 &&value<10000000){
value=value/10000 +"万";
}else if(value>=10000000){
value=value/10000000+"千万";
}
return value;
}
}
},
series: [
{
data: proxy.ySeriesCommonData,
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.1)'
},
barWidth:8,
itemStyle:{
normal:{
barBorderRadius: [3,3,0,0],
color:new echarts.graphic.LinearGradient(
0,0,0,1,
[
{offset:0,color:'#3ac9fb'},
{offset:1,color:'#2a81f3'}
]
)
// color:"#ff0000"
}
}
}
]
};
}
return{
optionInti
}
}
}
\ No newline at end of file
... ...