代码拉取完成，页面将自动刷新
同步操作将从 有枫来了/铁塔监测系统 强制同步，此操作会覆盖自 Fork 仓库以来所做的任何修改，且无法恢复！！！
确定后同步将在后台操作，完成时将刷新页面，请耐心等待。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>传感器信息</title>
<meta name="description" content="AdminLTE2定制版">
<meta name="keywords" content="AdminLTE2定制版">
<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
<link rel="stylesheet" href="plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="plugins/datatables/dataTables.bootstrap.css">
<link rel="stylesheet" href="plugins/adminLTE/css/AdminLTE.css">
<link rel="stylesheet" href="plugins/adminLTE/css/skins/_all-skins.min.css">
<link rel="stylesheet" href="css/index.css">
<style>
.el-input__inner{
height: 30px;
}
</style>
</head>
<body class="hold-transition skin-purple sidebar-mini">
<script src="js/vue.global.js"></script>
<script src="js/index.full.js"></script>
<div class="wrapper">
<div class="content" style="margin-left: 0%;height: 800px;>
<!-- 内容头部 -->
<section class="content-header">
<p style="color: white;font-size: 23px;font-weight:bold;margin-left:1.5%">
传感器信息
</p>
</section>
<!-- 内容头部 /-->
<!-- 正文区域 -->
<section class="content" style="height: 500px;">
<!-- .box-body -->
<div class="box box-primary" style="background-color:#293441;">
<div class="box-body">
<!-- 数据表格 -->
<div class="table-box" id="app">
<!--工具栏-->
<div class="pull-left">
<div class="form-group form-inline">
<div class="btn-group">
<button type="button" class="btn btn-info" title="新增" onclick='location.href="sensorDataManagerAdd.html"'><i class="fa fa-file-o"></i> 新建</button>
<button type="button" class="btn btn-info" title="删除" onclick='confirm("你确认要删除吗？")' style="margin-left:3px"><i class="fa fa-trash-o"></i> 删除</button>
</div>
</div>
</div>
<div class="pull-left" style="margin-left:20%;margin-top:0%">
<!--数据列表-->
<table class="table table-bordered table-striped table-hover dataTable" style="border:solid 0px #2E72BF;">
<tbody style="border:0px solid #293441;">
<tr style="border:0px solid #293441;">
<td style="width:80px;color: white;background:#293441;border-color:#293441;" align="center">上传阈值 :</td>
<td style="width:80px;color: white;background:#293441;border-color:#293441"><input id="uploadData" type="text" value="0" style="color:white;width:50%;background-color:#293441;border-color:#293441;"></input> </td>
<td style="width:80px;color: white;background:#293441;border-color:#293441" align="center">上传频率 :</td>
<td style="width:80px;color: white;background:#293441;border-color:#293441"><input id="uploadTime" type="text" value="0" style="color:white;width:50%;background-color:#293441;border-color:#293441;"></input></td>
</tr>
</tbody>
</table>
</div>
<div class="box-tools pull-right">
<div class="has-feedback" style="height:10%">
<el-input v-model="search" type="text" class="name" placeholder="根据传感器名称搜索" @input="a(search)"></el-input>
<span class="glyphicon glyphicon-search form-control-feedback"></span>
</div>
</div>
<br>
<!--工具栏/-->
<!--数据列表-->
<div id="app">
<br>
<br>
<el-table
:cell-style="cellStyle()"
:header-cell-style="cellStyle()"
:row-style="{height: '0'}"
:data="list"
border
style="width: 100%">
<el-table-column
align="center"
label="序号"
type="selection">
</el-table-column>
<el-table-column
align="center"
label="传感器编号"
min-width="10%"
prop="id">
</el-table-column>
</el-table-column>
<el-table-column
align="center"
min-width="10%"
prop="name"
label="传感器名称">
</el-table-column>
<el-table-column
align="center"
min-width="10%"
prop="model"
label="型号">
</el-table-column>
<el-table-column
align="center"
min-width="10%"
prop="warndata"
label="警告阈值">
</el-table-column>
</el-table-column>
<el-table-column
align="center"
min-width="12%"
prop="initialx"
label="初始x轴倾斜度">
</el-table-column>
<el-table-column
align="center"
min-width="12%"
prop="initialy"
label="初始y轴倾斜度">
</el-table-column>
<el-table-column
align="center"
min-width="10%"
prop="initialy"
label="铁塔编号">
</el-table-column>
<el-table-column
min-width="10%"
align="center"
prop="situation"
label="传感器状态">
</el-table-column>
<el-table-column
align="center"
min-width="10%"
label="开关">
<template #default="scope">
<el-switch
v-model="scope.row.switchState"
:active-value="开启"
:inactive-value="关闭"
active-color="#00FF00"
inactive-color="#dadde5"
@change=switchChange(scope.row)
>
</el-switch>
</template>
</el-table-column>
<el-table-column
align="center"
min-width="10%"
label="危险处理">
<template #default="scope">
<el-button v-if="scope.row.situation=='危险'&&scope.row.switch=='开'" type="danger" size="mini" @click="handle(scope.$index, scope.row)">处理</el-button>
<el-button v-if="scope.row.situation!='危险'" type="primary" size="mini" disabled="true">处理</el-button>
</template>
</el-table-column>
<el-table-column
align="center"
min-width="15%"
label="操作">
<template #default="scope">
<el-button type="primary" size="mini">删除</el-button>
<el-button type="primary" size="mini" @click="update">修改</el-button>
</template>
</el-table-column>
</el-table>
<div style="margin-top:1%">
<el-row :gutter="10">
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="8">
<el-pagination
right
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="page"
:page-sizes="[5,7,10,15,20]"
:page-size="limit"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</el-col>
</el-row>
</div>
</div><br />
<!-- /表格 -->
<!--数据列表/-->
</div>
<!-- 数据表格 /-->
</div>
<!-- /.box-body -->
</div>
</section>
<!-- 正文区域 /-->
</div>
</div>
<script src="plugins/jQuery/jquery-2.2.3.min.js"></script>
<script>
$.get('json/data/sensor.json',function(ret){
var Main = {
data() {
return {
list: [],
data: [],
limit: 7,
total: null,
page: 1,
search:'',
searchData: "",
param:"开启"
}
},
created() {
this.pageList()
},
methods: {
switchChange(row){
console.log(row);
var s = "";
if(row.switchState){
s = "开";
}else{
s = "关";
}
var data = [
{
"id":row.id,
"switch": s
}
]
console.log(data);
$.ajax({
type: 'POST',
url: "",
data: JSON.stringify(data),
contentType: 'application/json;charset=UTF-8',
dataType: 'json',
success: function(data) {
},
error: function(xhr, type) {
}
});
},
handle(index, row){
var head = prompt("请输入处理人姓名:");
if(head.length!=0){
var year = new Date().getFullYear()
var month = new Date().getMonth()+1
var day = new Date().getDate()
var hour = new Date().getHours()
var minute = new Date().getMinutes()
if(minute<10){
minute = "0"+minute
}
var second = new Date().getSeconds()
if(second<10){
second = "0"+second
}
var time = year+"-"+month+"-"+day+" "+hour+":"+minute+":"+second
console.log(time)
var data =[
{
"sensorId":row.id,
"sensorName":row.name,
"head":head,
"time": time
}
]
$.ajax({
type: 'POST',
url: "",
data: JSON.stringify(data),
contentType: 'application/json;charset=UTF-8',
dataType: 'json',
success: function(data) {
},
error: function(xhr, type) {
}
});
}
},
search(){
console.log("8888888")
},
update(){
location.href="sensorDataManagerUpdate.html"
},
cellStyle(){
return 'background-color:#293441;color:white;border-color:#2E72BF'
},
pageList() {
// 发请求拿到数据并暂存所有数据,方便以后操做
this.data = ret
this.getList()
},
// 处理数据
getList() {
// es6过滤获得知足搜索条件的展现数据list
let list = this.data.filter((item, index) =>
item.name.includes(this.searchData)
)
this.list = list.filter((item, index) =>
index < this.page * this.limit && index >= this.limit * (this.page - 1)
)
this.total = list.length
},
// 当每页数量改变
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.limit = val
this.getList()
},
// 当当前页改变
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.page = val
this.getList()
},
// 搜索过滤数据
search() {
this.page = 1
this.getList()
}
}
};
const app = Vue.createApp(Main);
app.use(ElementPlus);
app.mount("#app")
})
$.get('json/data/systemData.json',function(ret){
$("#uploadData").val(ret[0].uploadData)
$("#uploadTime").val(ret[0].uploadTime)
})
$("#uploadData").keydown(function(){
console.log("11111111111111111111")
})
</script>
</body>
</html>
<!---->
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手