You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
252 lines
6.7 KiB
252 lines
6.7 KiB
<!DOCTYPE html> |
|
<html> |
|
|
|
<head> |
|
<meta charset="utf-8"> |
|
<title>电脑故障上报</title> |
|
<style> |
|
html, |
|
body { |
|
height: 100%; |
|
min-height: 600px; |
|
} |
|
|
|
body { |
|
background: url(bg.jpg) center no-repeat; |
|
background-size: 150% 150%; |
|
} |
|
|
|
* { |
|
margin: 0; |
|
padding: 0; |
|
} |
|
|
|
.page-title { |
|
font-size: 38px; |
|
text-align: center; |
|
line-height: 60px; |
|
font-weight: bold; |
|
margin: 40px 0; |
|
text-shadow: 0 2px rgba(255, 255, 255, 0.7); |
|
} |
|
|
|
.wrapper { |
|
min-width: 800px; |
|
max-width: 1000px; |
|
margin: 0 auto; |
|
overflow: auto; |
|
} |
|
|
|
.alarm-box { |
|
overflow: hidden; |
|
} |
|
|
|
.alarm-item { |
|
width: 25%; |
|
margin: 0 auto; |
|
} |
|
|
|
.alarm-item-box { |
|
position: relative; |
|
height: 200px; |
|
margin: 15px; |
|
border: 3px solid #eee; |
|
border-radius: 10%; |
|
background: #fff; |
|
cursor: pointer; |
|
} |
|
|
|
.alarm-item-box.active { |
|
border-color: red; |
|
} |
|
|
|
.alarm-item-box.alarm1 { |
|
background: url('fault.png') no-repeat center 10px; |
|
background-size: 120px 130px; |
|
} |
|
|
|
.alarm-item-box .txt { |
|
position: absolute; |
|
left: 0; |
|
right: 0; |
|
bottom: 30px; |
|
font-weight: bold; |
|
line-height: 30px; |
|
text-align: center; |
|
} |
|
|
|
/* 按钮 */ |
|
.alarm-foot { |
|
text-align: center; |
|
margin-top: 20px; |
|
} |
|
|
|
.alarm-foot .alarm-btn { |
|
display: inline-block; |
|
width: 150px; |
|
color: #fff; |
|
text-align: center; |
|
line-height: 38px; |
|
border-radius: 5px; |
|
background-color: #f00; |
|
margin: 0 10px; |
|
cursor: pointer; |
|
} |
|
|
|
.alarm-foot .alarm-btn.stop { |
|
color: #333; |
|
border: 1px solid #ddd; |
|
background-color: #fff; |
|
} |
|
|
|
.input { |
|
outline-style: none; |
|
border: 1px solid #ddd; |
|
border-radius: 5px; |
|
padding: 3px 8px; |
|
} |
|
|
|
.input:focus { |
|
border-color: #409eff; |
|
box-shadow: 0 0 3px #008cff; |
|
/*设置获取焦点时的阴影*/ |
|
} |
|
|
|
.page-small-title { |
|
display: inline-block; |
|
width: 95px; |
|
text-align: center; |
|
text-shadow: 0 0 1px rgba(255, 255, 255, 0.3); |
|
} |
|
|
|
</style> |
|
<script src="jquery.min.js"></script> |
|
<!-- 引入样式 --> |
|
<link rel="stylesheet" href="layer/theme/default/layer.css"> |
|
<!-- 引入组件库 --> |
|
<script src="layer/layer.js"></script> |
|
</head> |
|
|
|
<body> |
|
<div class="wrapper"> |
|
<div class="page-title">电脑故障上报</div> |
|
<div class="alarm-box"> |
|
<div class="alarm-item"> |
|
<div class="alarm-item-box alarm1"> |
|
<div class="txt">电脑异常</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div style="flex: 1;display: flex;align-items: center;margin-top: 20px;"> |
|
<div class="page-small-title">本机IP</div> |
|
<input class="input" id="ip" placeholder="本机IP" style="width: 200px;"> |
|
</input> |
|
</div> |
|
<div id="speckBox" style="overflow: hidden;"> |
|
<div style="flex: 1;display: flex;align-items: top;margin: 20px 0;"> |
|
<div class="page-small-title">备注信息</div> |
|
<textarea id="volTxt" class="input" style="width:80%;height:100px;"></textarea> |
|
</div> |
|
</div> |
|
<!-- 报警按钮 --> |
|
<div class="alarm-foot" style="padding-bottom: 30px;"> |
|
<div class="alarm-btn" id="alarmBtn">上报故障</div> |
|
</div> |
|
</div> |
|
<script> |
|
// const baseUrl = "http://152.136.119.150:81";//外网测试环境 |
|
//本地测试 |
|
// const baseUrl = "http://192.168.1.102:81";//本地测试环境-上报 |
|
const baseUrl = "http://192.168.1.34:81";//本地测试环境-上报 |
|
const iotBaseUrl = "http://182.139.182.190:60032";//物联网平台测试 |
|
//现场测试 |
|
// const baseUrl = "http://171.16.8.51:81";//上报 |
|
// const iotBaseUrl = "http://171.16.8.58:8080"//物联网平台环境 |
|
//上报报警 |
|
document.getElementById('alarmBtn').onclick = function () { |
|
reportSaveIot(); |
|
} |
|
|
|
//报警信息上报 |
|
function reportSaveIot() { |
|
let ip = $('#ip').val(); |
|
if(ip == '') { |
|
layer.msg('未成功获取本机IP,请联系运维人员'); |
|
return; |
|
} |
|
let txt = $('#volTxt').val() |
|
let formdata = new FormData(); |
|
formdata.append('type', '5'); |
|
formdata.append('deviceId', ip); |
|
formdata.append('content', txt); |
|
var loadingIndex = layer.load(0, {shade: false}); |
|
$.ajax({ |
|
url: baseUrl + "/appData/putFile", type: "post", contentType: false, processData: false, |
|
timeout: 6000, dataType: 'json', data: formdata, success: function (res) { |
|
layer.close(loadingIndex); |
|
if (res.code === 200) { |
|
console.log('上报成功'); |
|
reportIot(); |
|
}else{ |
|
layer.msg('报警失败，请联系运维人员'); |
|
} |
|
},error: function() { |
|
layer.close(loadingIndex); |
|
layer.msg('报警失败，请联系运维人员'); |
|
} |
|
}); |
|
} |
|
|
|
//报警信息上报 |
|
function reportIot() { |
|
let ip = $('#ip').val(); |
|
if(ip == '') { |
|
layer.msg('未成功获取本机IP,请联系运维人员'); |
|
return; |
|
} |
|
let val = $('#volTxt').val() !== '' ? ',' + $('#volTxt').val() : '' |
|
let data = { |
|
"alarmTypeIdentity":"700007", |
|
"description": ip + val, |
|
"deviceSn":'ZJBJLXDIANXIN001', |
|
"platformCode":"DIANXIN", |
|
} |
|
var loadingIndex = layer.load(0, {shade: false}); |
|
$.ajax({ |
|
url: baseUrl + "/appData/escalation", type: "post", contentType: "application/json;charset=UTF-8", dataType: "json", data: JSON.stringify(data),timeout: 6000, success: function (res) { |
|
layer.close(loadingIndex); |
|
let _data = JSON.parse(res.data); |
|
if (_data.resultCode == 0) { |
|
layer.msg('故障上报成功'); |
|
}else{ |
|
console.log(_data.msg); |
|
layer.msg('故障上报失败，请联系运维人员'); |
|
} |
|
},error: function() { |
|
layer.close(loadingIndex); |
|
layer.msg('故障上报失败，请联系运维人员'); |
|
} |
|
}); |
|
} |
|
//获取本机IP |
|
getIp(); |
|
function getIp() { |
|
$.ajax({ |
|
url: baseUrl + "/alarmInformation/getIp", type: "get", contentType: "application/json;charset=UTF-8", dataType: "json", data: {},timeout: 6000, success: function (res) { |
|
console.log('res ===>',res) |
|
// let _data = JSON.parse(res.data); |
|
if (res.code === 200) { |
|
$('#ip').val(res.data); |
|
}else{ |
|
layer.msg('本机IP获取失败，请联系运维人员'); |
|
} |
|
},error: function() { |
|
layer.msg('本机IP获取失败，请联系运维人员'); |
|
} |
|
}); |
|
} |
|
</script> |
|
|
|
</body> |
|
|
|
</html> |