|
|
|
|
<!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>
|
