This commit is contained in:
parent
6e9395855d
commit
ae5c2e157b
|
|
@ -378,6 +378,10 @@ th {
|
|||
|
||||
}
|
||||
|
||||
.layui-layer-dialog .layui-layer-content {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.environments{
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -237,19 +237,11 @@ th {
|
|||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.monitor-icon {
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
background: url("../../img/consQuality/质量检测设备-正常.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
background-size: initial;
|
||||
}
|
||||
|
||||
.environment{
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
|
||||
}
|
||||
|
||||
#map {
|
||||
|
|
@ -279,4 +271,38 @@ th {
|
|||
.left-down-down{
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
}
|
||||
|
||||
.layui-layer-dialog .layui-layer-content {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
ul li {
|
||||
list-style: none;
|
||||
}
|
||||
.drawing-panel {
|
||||
position: fixed;
|
||||
bottom: 41.5rem;
|
||||
margin-left: -49rem;
|
||||
padding: 1rem 1rem;
|
||||
border-radius: .25rem;
|
||||
/*background-color: #fff;*/
|
||||
/*box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);*/
|
||||
}
|
||||
.btn {
|
||||
width: 105px;
|
||||
height: 30px;
|
||||
float: left;
|
||||
background-color: #fff;
|
||||
color: rgba(27, 142, 236, 1);
|
||||
font-size: 14px;
|
||||
border:1px solid rgba(27, 142, 236, 1);
|
||||
border-radius: 5px;
|
||||
margin: 0 5px;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
}
|
||||
.btn:hover {
|
||||
background-color: rgba(27, 142, 236, 0.8);
|
||||
color: #fff;
|
||||
}
|
||||
|
|
@ -0,0 +1,308 @@
|
|||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: #fff;
|
||||
font-family: 'Alibaba PuHuiTi R', serif;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar
|
||||
{
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
::-webkit-scrollbar-track-piece
|
||||
{
|
||||
background-color: #0d2225;
|
||||
-webkit-border-radius: 6px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:vertical
|
||||
{
|
||||
height: 5px;
|
||||
background-color: #0d2225;
|
||||
-webkit-border-radius: 6px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:horizontal
|
||||
{
|
||||
width: 5px;
|
||||
background-color: #0d2225;
|
||||
-webkit-border-radius: 6px;
|
||||
}
|
||||
|
||||
.layui-table td, .layui-table th, .layui-table-col-set, .layui-table-fixed-r, .layui-table-grid-down, .layui-table-header, .layui-table-mend, .layui-table-page, .layui-table-tips-main, .layui-table-tool, .layui-table-total, .layui-table-view, .layui-table[lay-skin=line], .layui-table[lay-skin=row] {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.layui-table {
|
||||
width: 100%;
|
||||
margin: 10px 0;
|
||||
background-color: transparent;
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
/* 表格头部背景色 */
|
||||
th {
|
||||
background-color: #184B49; /* MediumSeaGreen */
|
||||
color: #fff;
|
||||
font-weight: bold
|
||||
}
|
||||
|
||||
/*鼠标指向表格时,奇数行背景颜色*/
|
||||
.layui-table tbody tr:hover, .layui-table-hover {
|
||||
background-color: #19b0b9;
|
||||
}
|
||||
|
||||
.layui-laypage .layui-laypage-curr .layui-laypage-em {
|
||||
background-color: #184B49;
|
||||
}
|
||||
|
||||
.layui-laypage a:hover {
|
||||
color: #184B49;
|
||||
}
|
||||
|
||||
.layui-laypage .layui-laypage-skip {
|
||||
color: #16534c;
|
||||
}
|
||||
|
||||
.layui-laypage-count{
|
||||
color:#184B49;
|
||||
}
|
||||
|
||||
.layui-laypage button, .layui-laypage input {
|
||||
background-color: transparent;
|
||||
border: #184B49 1px solid;
|
||||
color: #184B49;
|
||||
}
|
||||
|
||||
.layui-table-view select[lay-ignore] {
|
||||
background-color: transparent;
|
||||
border: #184B49 1px solid;
|
||||
color: #184B49;
|
||||
}
|
||||
|
||||
.layui-table-page .layui-laypage span {
|
||||
color: #184B49;
|
||||
}
|
||||
|
||||
.layui-table-page .layui-laypage a, .layui-table-page .layui-laypage span.layui-laypage-curr {
|
||||
color: #184B49;
|
||||
}
|
||||
|
||||
/**公共类**/
|
||||
.layout{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.layout-vertical{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.background-img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 9% 2% 2% 2%;
|
||||
box-sizing: border-box;
|
||||
background-position: center center !important;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.right-down .background-img:nth-child(1){
|
||||
padding: 4% 2% 2% 2%;
|
||||
}
|
||||
|
||||
/*.right .background-img:nth-child(2){*/
|
||||
/* padding: 3% 1% 1% 1%;*/
|
||||
/*}*/
|
||||
|
||||
.Weather-img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
background-position: center center !important;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
/**主体部分**/
|
||||
|
||||
.large-frame{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
justify-content: space-evenly;
|
||||
|
||||
}
|
||||
|
||||
.left{
|
||||
width: 40%;
|
||||
height: 99%;
|
||||
}
|
||||
|
||||
.middle{
|
||||
width: 58%;
|
||||
height: 99%;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
}
|
||||
|
||||
.right{
|
||||
width: 24%;
|
||||
height: 99%;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
}
|
||||
.left-down{
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.right-down{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.left-under{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.button-style{
|
||||
color: #298B83;
|
||||
border: #184B49 1px solid;
|
||||
padding: 4px 9px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.left-under .layout:nth-child(1){
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.state-box{
|
||||
width: 100%;
|
||||
height: 20%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.state{
|
||||
display: flex;
|
||||
width: 4.5%;
|
||||
height: 25%;
|
||||
align-items: center;
|
||||
margin-left: 3%;
|
||||
background-position: center center !important;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
}
|
||||
|
||||
.state-box .state:nth-child(1) {
|
||||
background-image: url("../../img/consQuality/QualityInspection2.png");
|
||||
}
|
||||
.state-box .state:nth-child(3) {
|
||||
background-image: url("../../img/consQuality/QualityInspection1.png");
|
||||
}
|
||||
.state-box .state:nth-child(5) {
|
||||
background-image: url("../../img/consQuality/QualityInspection3.png");
|
||||
}
|
||||
|
||||
.state-box .state:nth-child(2) {
|
||||
border: #e24e3b 1px solid;
|
||||
color: #e24e3b;
|
||||
}
|
||||
|
||||
.monitor-data {
|
||||
width: 28%;
|
||||
height: 83%;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
|
||||
.environment{
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
}
|
||||
|
||||
#map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
/* 弹出框样式 */
|
||||
#popup {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
|
||||
#popup {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.left-down-left{
|
||||
width: 100%;
|
||||
height: 15%;
|
||||
}
|
||||
|
||||
.left-down-down{
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
}
|
||||
|
||||
.layui-layer-dialog .layui-layer-content {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
ul li {
|
||||
list-style: none;
|
||||
}
|
||||
.drawing-panel {
|
||||
position: fixed;
|
||||
bottom: 41.5rem;
|
||||
margin-left: -49rem;
|
||||
padding: 1rem 1rem;
|
||||
border-radius: .25rem;
|
||||
/*background-color: #fff;*/
|
||||
/*box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);*/
|
||||
}
|
||||
.btn {
|
||||
width: 105px;
|
||||
height: 30px;
|
||||
float: left;
|
||||
background-color: #fff;
|
||||
color: rgba(27, 142, 236, 1);
|
||||
font-size: 14px;
|
||||
border:1px solid rgba(27, 142, 236, 1);
|
||||
border-radius: 5px;
|
||||
margin: 0 5px;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
}
|
||||
.btn:hover {
|
||||
background-color: rgba(27, 142, 236, 0.8);
|
||||
color: #fff;
|
||||
}
|
||||
|
|
@ -276,7 +276,7 @@ function detectionRecord(){
|
|||
}
|
||||
}, function (xhr) {
|
||||
// error(xhr)
|
||||
}, "application/json");
|
||||
}, "application/json",aqEnnable);
|
||||
}
|
||||
|
||||
//检测记录对比echarts图表
|
||||
|
|
|
|||
|
|
@ -10,44 +10,59 @@ layui.use(['layer', 'element', 'table'], function () {
|
|||
layer = layui.layer;
|
||||
table = layui.table;
|
||||
|
||||
|
||||
//边坡位移监测列表
|
||||
DaylightDisplacementList('');
|
||||
DaylightDisplacementApi();
|
||||
|
||||
//和风天气API调用
|
||||
zephyrineWeather();
|
||||
//有限空间
|
||||
LimitedSpaceApi();
|
||||
|
||||
//GPS安装检测
|
||||
GPSInstallationApi();
|
||||
|
||||
//实时监测
|
||||
realTimeMonitoring();
|
||||
});
|
||||
|
||||
//实时监测
|
||||
function realTimeMonitoring(){
|
||||
|
||||
const url = commonUrl + "screen/largeScreen/xcIndex/getProJcData";
|
||||
const params = {
|
||||
"roleCode": roleCode,
|
||||
"orgId": orgId,
|
||||
"userId": userId,
|
||||
"bidCode": bidCode
|
||||
}
|
||||
let encryptStr = encryptCBC(JSON.stringify(params));
|
||||
ajaxRequest(url, "POST", encryptStr, true, function () {
|
||||
const paramData = 'bidCode=' + bidCode + '&roleCode=' + roleCode + '&orgId=' + orgId + '&userId=' + userId;
|
||||
let montageParam = aqEnnable ? encryptCBC(paramData) : ' &' + encryptCBC(paramData);
|
||||
const url = commonUrl + 'screen/largeScreen/xcIndex/getProJcData?params=' + montageParam;
|
||||
ajaxRequestGet(url, "GET", true, function () {
|
||||
}, function (result) {
|
||||
console.log(result);
|
||||
if (result.code === 200) {
|
||||
setData(result.data);
|
||||
} else if (result.code === 500) {
|
||||
layer.msg(result.msg, { icon: 2 });
|
||||
}else if(result.code === 401){
|
||||
loginout(1)
|
||||
console.error('实时监测' + result.msg);
|
||||
setData(null);
|
||||
} else if (result.code === 401) {
|
||||
loginout(1);
|
||||
}
|
||||
}, function (xhr, status, error) {
|
||||
error(xhr, status, error)
|
||||
}, "application/json",aqEnnable);
|
||||
error(xhr, status, error)
|
||||
setData(null);
|
||||
}, aqEnnable);
|
||||
|
||||
/* 实时检测赋值 */
|
||||
function setData(data) {
|
||||
if (data && data.length > 0) {
|
||||
$.each(data, function (index, item) {
|
||||
if (item.modelName === '温度') {
|
||||
$('#wd').html(item.val ? item.val : 0);
|
||||
} else if (item.modelName === '湿度') {
|
||||
$('#sd').html(item.val ? item.val : 0);
|
||||
} else if (item.modelName === '噪声') {
|
||||
$('#zs').html(item.val ? item.val : 0);
|
||||
} else if (item.modelName === '光照') {
|
||||
$('#gz').html(item.val ? item.val : 0);
|
||||
} else if (item.modelName === 'pm2') {
|
||||
$('#pm2').html(item.val ? item.val : 0);
|
||||
} else if (item.modelName === 'pm10') {
|
||||
$('#pm10').html(item.val ? item.val : 0);
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//边坡位移监测列表
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
let element, layer, table, tree;
|
||||
const bidCode = parent.$('#bidPro').val();
|
||||
var map;
|
||||
let map;
|
||||
|
||||
layui.use(['layer', 'element', 'table', 'tree'], function () {
|
||||
element = layui.element;
|
||||
|
|
@ -8,6 +8,12 @@ layui.use(['layer', 'element', 'table', 'tree'], function () {
|
|||
table = layui.table;
|
||||
tree = layui.tree;
|
||||
|
||||
document.getElementById("myButton").addEventListener("click", function() {
|
||||
window.location.href = "../personnelControl/personnelControlList.html";
|
||||
});
|
||||
|
||||
mapInit();
|
||||
|
||||
//人员列表
|
||||
PersonnelList();
|
||||
|
||||
|
|
@ -17,6 +23,7 @@ layui.use(['layer', 'element', 'table', 'tree'], function () {
|
|||
//穿戴装备
|
||||
wearGarList();
|
||||
|
||||
|
||||
});
|
||||
|
||||
// 人员列表
|
||||
|
|
@ -44,9 +51,7 @@ function PersonnelList(){
|
|||
}
|
||||
}, function (xhr) {
|
||||
// error(xhr)
|
||||
}, function (xhr, status, error) {
|
||||
error(xhr, status, error)
|
||||
}, "application/json",aqEnnable);
|
||||
} , "application/json",aqEnnable);
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -172,65 +177,75 @@ function wearGarList(){
|
|||
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// 获取经纬度
|
||||
var lat,lon;
|
||||
if (navigator.geolocation) {
|
||||
navigator.geolocation.getCurrentPosition(function (position) {
|
||||
lat = position.coords.latitude;
|
||||
lon = position.coords.longitude;
|
||||
console.log(lon,lat)
|
||||
map= new BMap.Map("map");
|
||||
map.centerAndZoom(new BMap.Point(lon,lat), 11);
|
||||
map.enableScrollWheelZoom(true);
|
||||
function mapInit(){
|
||||
var lat,lon;
|
||||
if (navigator.geolocation) {
|
||||
navigator.geolocation.getCurrentPosition(function (position) {
|
||||
lat = position.coords.latitude;
|
||||
lon = position.coords.longitude;
|
||||
console.log(lon,lat)
|
||||
map= new BMapGL.Map("map");
|
||||
map.centerAndZoom(new BMapGL.Point(lon,lat), 11);
|
||||
map.enableScrollWheelZoom(true);
|
||||
|
||||
|
||||
var marker = new BMap.Marker(new BMap.Point(lon,lat)); // 创建标注
|
||||
map.addOverlay(marker);
|
||||
|
||||
var overlays = [];
|
||||
var overlaycomplete = function (e) {
|
||||
overlays.push(e.overlay);
|
||||
};
|
||||
|
||||
var styleOptions = {
|
||||
strokeColor: "red", //边线颜色。
|
||||
fillColor: "red", //填充颜色。当参数为空时，圆形将没有填充效果。
|
||||
strokeWeight: 3, //边线的宽度，以像素为单位。
|
||||
strokeOpacity: 0.8, //边线透明度，取值范围0 - 1。
|
||||
fillOpacity: 0.6, //填充的透明度，取值范围0 - 1。
|
||||
strokeStyle: 'solid' //边线的样式，solid或dashed。
|
||||
}
|
||||
//实例化鼠标绘制工具
|
||||
var drawingManager = new BMapLib.DrawingManager(map, {
|
||||
isOpen: false, //是否开启绘制模式
|
||||
enableDrawingTool: true, //是否显示工具栏
|
||||
drawingToolOptions: {
|
||||
anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
|
||||
offset: new BMap.Size(5, 5), //偏离值
|
||||
},
|
||||
circleOptions: styleOptions, //圆的样式
|
||||
polylineOptions: styleOptions, //线的样式
|
||||
polygonOptions: styleOptions, //多边形的样式
|
||||
rectangleOptions: styleOptions //矩形的样式
|
||||
});
|
||||
//添加鼠标绘制工具监听事件，用于获取绘制结果
|
||||
drawingManager.addEventListener('overlaycomplete', overlaycomplete);
|
||||
console.log(overlays)
|
||||
|
||||
function clearAll() {
|
||||
for (var i = 0; i < overlays.length; i++) {
|
||||
map.removeOverlay(overlays[i]);
|
||||
// 创建点标记
|
||||
let marker = new BMapGL.Marker(new BMapGL.Point(lon,lat));
|
||||
map.addOverlay(marker);
|
||||
// 创建信息窗口
|
||||
var opts = {
|
||||
width: 200,
|
||||
height: 100,
|
||||
title: '人员信息'
|
||||
};
|
||||
var content = createInfoWindowContent();
|
||||
var infoWindow = new BMapGL.InfoWindow(content, opts);
|
||||
// 点标记添加点击事件
|
||||
marker.addEventListener('click', function () {
|
||||
map.openInfoWindow(infoWindow, new BMapGL.Point(lon,lat)); // 开启信息窗口
|
||||
});
|
||||
// 创建信息窗口内容
|
||||
function createInfoWindowContent() {
|
||||
return '<div>张三 男 xx岁</div>' +
|
||||
'<div>17681010134</div>' +
|
||||
'<div id="showTrack" onclick="test()"><a style="color: #1e9fff" href="#"">查看轨迹</a></div>';
|
||||
}
|
||||
overlays.length = 0
|
||||
}
|
||||
});
|
||||
} else {
|
||||
console.log("浏览器不支持 Geolocation API");
|
||||
|
||||
|
||||
// 绘制镂空面
|
||||
var polyHole = new BMapGL.Polygon([[
|
||||
new BMapGL.Point(117.08248707972673, 32.07969374443401),
|
||||
new BMapGL.Point(116.95485583286907, 31.772739506992053),
|
||||
new BMapGL.Point(117.66200193032371, 31.782562338670918)
|
||||
]], {
|
||||
zIndex: 5,
|
||||
fillOpacity: 1,
|
||||
fillColor: 'pink',
|
||||
strokeColor: '#8055e3',
|
||||
strokeWeight: 5,
|
||||
strokeOpacity: 1
|
||||
});
|
||||
map.addOverlay(polyHole);
|
||||
|
||||
});
|
||||
} else {
|
||||
console.log("浏览器不支持 Geolocation API");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
function test(){
|
||||
// 查看轨迹函数
|
||||
layer.open({
|
||||
type: 2,
|
||||
title: '运动轨迹',
|
||||
shadeClose: true,
|
||||
shade: 0.8,
|
||||
area: ['50%', '80%'],
|
||||
content: './MovementTrack.html'
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,254 @@
|
|||
let element, layer, table, tree, from, $, colorpicker;
|
||||
const bidCode = parent.$('#bidPro').val();
|
||||
let map;
|
||||
let overlays = [];
|
||||
let coordinates = []; //电子围栏坐标存放处
|
||||
|
||||
layui.use(['layer', 'element', 'table', 'tree', 'form', 'jquery'], function () {
|
||||
element = layui.element;
|
||||
colorpicker = layui.colorpicker;
|
||||
layer = layui.layer;
|
||||
table = layui.table;
|
||||
tree = layui.tree;
|
||||
form = layui.form;
|
||||
$ = layui.jquery;
|
||||
|
||||
colorpicker.render({
|
||||
elem: '#ID-colorpicker-demo-form',
|
||||
color: '#1c97f5',
|
||||
done: function(color){
|
||||
$('#color').val(color);
|
||||
}
|
||||
});
|
||||
mapInit();
|
||||
|
||||
$('#addButton').on('click', function(){
|
||||
$('#hiddenContent').toggle(); // 切换显示与隐藏
|
||||
$('#content').toggle(); // 切换显示与隐藏
|
||||
});
|
||||
|
||||
$('#return').on('click', function(){
|
||||
$('#hiddenContent').toggle(); // 切换显示与隐藏
|
||||
$('#content').toggle(); // 切换显示与隐藏
|
||||
});
|
||||
|
||||
|
||||
form.on('submit(demo1)', function(data){
|
||||
let field = data.field; // 获取表单字段值
|
||||
field.arrayField = coordinates.toString();
|
||||
|
||||
field.roleCode = roleCode;
|
||||
field.orgId = orgId;
|
||||
field.userId = userId;
|
||||
field.bidCode = bidCode;
|
||||
console.log(field);
|
||||
const url = commonUrl + "screen/largeScreen/personnelControl/addNewFence";
|
||||
let encryptStr = encryptCBC(JSON.stringify(field));
|
||||
ajaxRequest(url, "POST", encryptStr, true, function () {
|
||||
}, function (result) {
|
||||
console.log(result);
|
||||
if (result.code === 200) {
|
||||
$('#hiddenContent').toggle(); // 切换显示与隐藏
|
||||
$('#content').toggle(); // 切换显示与隐藏
|
||||
} else if (result.code === 500) {
|
||||
layer.msg(result.msg, { icon: 2 });
|
||||
}else if(result.code === 401){
|
||||
loginout(1)
|
||||
}
|
||||
}, function (xhr) {
|
||||
error(xhr)
|
||||
} , "application/json",aqEnnable);
|
||||
|
||||
// return false; // 阻止默认 form 跳转
|
||||
});
|
||||
|
||||
//穿戴装备
|
||||
wearGarList();
|
||||
|
||||
});
|
||||
|
||||
//穿戴装备
|
||||
function wearGarList(){
|
||||
const url = commonUrl + "screen/largeScreen/personnelControl/getNewFenceList";
|
||||
|
||||
table.render({
|
||||
elem: '#dome',
|
||||
url: url,
|
||||
skin: 'line',
|
||||
page: false,
|
||||
headers:{
|
||||
decrypt:"decrypt",
|
||||
"Authorization":token
|
||||
},
|
||||
where: {
|
||||
roleCode: roleCode,
|
||||
orgId: orgId,
|
||||
userId: userId,
|
||||
bidCode: bidCode
|
||||
},
|
||||
cols: [[
|
||||
{field: 'number', width:80,title: '序号', align: 'center', type: 'numbers'},
|
||||
{field: 'fenceName', width:120, align: 'center', title: '围栏名称'},
|
||||
{field: 'fenceType', width:120, align: 'center', title: '围栏类型'},
|
||||
{field: 'alarmType', width:80, align: 'center', title: '报警类型'},
|
||||
{field: 'alertType', width:80, align: 'center', title: '警戒等级'},
|
||||
{field: 'color', width:80, align: 'center', title: '颜色', templet: d => {
|
||||
return '<div style="width: 20px;height: 20px;background-color: '+d.color+'"></div>';
|
||||
}
|
||||
},
|
||||
{field: 'status', align: 'center', title: '状态', templet: '#switchTpl'},
|
||||
{
|
||||
fixed: 'right', width:80, title: '操作', align: 'center', templet: d => {
|
||||
let text = "";
|
||||
text +='<a lay-event="del" style="color: #f80b37;cursor: pointer;font-size: 16px">删除</a>';
|
||||
return text;
|
||||
}
|
||||
}
|
||||
]],
|
||||
initComplete: function () {
|
||||
// 在表格渲染完成后，重新渲染序号列
|
||||
var that = this.elem.next();
|
||||
var tool = that.children('.layui-table-box').children('.layui-table-fixed').children('.layui-table-body').children('.layui-table');
|
||||
tool.find("tr").each(function (index, item) {
|
||||
$(this).find('td[data-field="LAY_TABLE_INDEX"]').text(index + 1);
|
||||
});
|
||||
},
|
||||
done:function(res, curr, count, origin){
|
||||
console.log(res);
|
||||
},
|
||||
page: true, //开启分页
|
||||
loading: true, //数据加载中。。。
|
||||
limits: [5, 10, 20, 100],
|
||||
limit: 7
|
||||
});
|
||||
|
||||
table.on('tool(test)', function (obj) {
|
||||
debugger
|
||||
var data = obj.data; //当前行数据
|
||||
var rowIndex = obj.index;
|
||||
var layEvent = obj.event; //当前点击的事件名
|
||||
if (layEvent === 'del') {
|
||||
layer.confirm('确定要删除吗？', {
|
||||
btn : [ '确定', '取消' ]
|
||||
}, function(index) {
|
||||
const url = commonUrl + "screen/largeScreen/personnelControl/delSubcontractorById";
|
||||
|
||||
const params = {
|
||||
"roleCode": roleCode,
|
||||
"orgId": orgId,
|
||||
"userId": userId,
|
||||
"bidCode": bidCode,
|
||||
"id": data.id
|
||||
}
|
||||
let encryptStr = encryptCBC(JSON.stringify(params));
|
||||
ajaxRequest(url, "POST", encryptStr, true, function () {
|
||||
}, function (result) {
|
||||
if (result.code === 200) {
|
||||
layer.close(index);
|
||||
table.reload('dome');
|
||||
} else if (result.code === 500) {
|
||||
layer.msg(result.msg, { icon: 2 });
|
||||
}else if(result.code === 401){
|
||||
loginout(1)
|
||||
}
|
||||
}, function (xhr) {
|
||||
// error(xhr)
|
||||
}, "application/json",aqEnnable);
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
//权限判断
|
||||
form.on('switch(statusSwitch)', function(data){
|
||||
debugger
|
||||
var isChecked = data.elem.checked; // 获取复选框的当前状态
|
||||
var value = data.value; // 获取复选框的值
|
||||
let status = isChecked ? 1 : 0;
|
||||
const url = commonUrl + "screen/largeScreen/personnelControl/subcontractorSwitchListen";
|
||||
|
||||
const params = {
|
||||
"roleCode": roleCode,
|
||||
"orgId": orgId,
|
||||
"userId": userId,
|
||||
"bidCode": bidCode,
|
||||
"id": value,
|
||||
"status": status
|
||||
}
|
||||
let encryptStr = encryptCBC(JSON.stringify(params));
|
||||
ajaxRequest(url, "POST", encryptStr, true, function () {
|
||||
}, function (result) {
|
||||
if (result.code === 200) {
|
||||
layer.msg('状态更新成功');
|
||||
} else if (result.code === 500) {
|
||||
layer.msg(result.msg, { icon: 2 });
|
||||
}else if(result.code === 401){
|
||||
loginout(1)
|
||||
}
|
||||
}, function (xhr) {
|
||||
// error(xhr)
|
||||
}, "application/json",aqEnnable);
|
||||
});
|
||||
}
|
||||
|
||||
function mapInit(){
|
||||
// 获取经纬度
|
||||
var lat,lon;
|
||||
if (navigator.geolocation) {
|
||||
navigator.geolocation.getCurrentPosition(function (position) {
|
||||
lat = position.coords.latitude;
|
||||
lon = position.coords.longitude;
|
||||
console.log(lon,lat)
|
||||
map= new BMap.Map("map");
|
||||
map.centerAndZoom(new BMap.Point(lon,lat), 11);
|
||||
map.enableScrollWheelZoom(true);
|
||||
|
||||
|
||||
var marker = new BMap.Marker(new BMap.Point(lon,lat)); // 创建标注
|
||||
map.addOverlay(marker);
|
||||
|
||||
|
||||
var overlaycomplete = function (e) {
|
||||
overlays.push(e.overlay);
|
||||
debugger
|
||||
if (overlays.length > 0) {
|
||||
const polygon = overlays[0].Po;
|
||||
for (let i = 0; i < polygon.length; i++) {
|
||||
coordinates.push(polygon[i].lng + '@' +polygon[i].lat);
|
||||
}
|
||||
console.log("多边形顶点坐标:", coordinates);
|
||||
}
|
||||
};
|
||||
|
||||
var styleOptions = {
|
||||
strokeColor: "red", //边线颜色。
|
||||
fillColor: "red", //填充颜色。当参数为空时，圆形将没有填充效果。
|
||||
strokeWeight: 3, //边线的宽度，以像素为单位。
|
||||
strokeOpacity: 0.8, //边线透明度，取值范围0 - 1。
|
||||
fillOpacity: 0.6, //填充的透明度，取值范围0 - 1。
|
||||
strokeStyle: 'solid' //边线的样式，solid或dashed。
|
||||
}
|
||||
//实例化鼠标绘制工具
|
||||
var drawingManager = new BMapLib.DrawingManager(map, {
|
||||
isOpen: false, //是否开启绘制模式
|
||||
enableDrawingTool: true, //是否显示工具栏
|
||||
drawingToolOptions: {
|
||||
anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
|
||||
offset: new BMap.Size(5, 5), //偏离值
|
||||
},
|
||||
circleOptions: styleOptions, //圆的样式
|
||||
polylineOptions: styleOptions, //线的样式
|
||||
polygonOptions: styleOptions, //多边形的样式
|
||||
rectangleOptions: styleOptions //矩形的样式
|
||||
});
|
||||
//添加鼠标绘制工具监听事件，用于获取绘制结果
|
||||
drawingManager.addEventListener('overlaycomplete', overlaycomplete);
|
||||
});
|
||||
} else {
|
||||
console.log("浏览器不支持 Geolocation API");
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
@ -77,34 +77,34 @@
|
|||
</div>
|
||||
<div class="layout" style="width: 100%;height: 40%;">
|
||||
<div class="layout monitor-data">
|
||||
<p><span>45</span><span>℃</span></p>
|
||||
<p><span id="wd">45</span><span>℃</span></p>
|
||||
<p>温度</p>
|
||||
<div class="monitor-icon"></div>
|
||||
</div>
|
||||
<div class="layout monitor-data">
|
||||
<p><span>45</span><span>%</span></p>
|
||||
<p><span id="sd">45</span><span>%</span></p>
|
||||
<p>湿度</p>
|
||||
<div class="monitor-icon"></div>
|
||||
</div>
|
||||
<div class="layout monitor-data">
|
||||
<p><span>45</span><span>分贝</span></p>
|
||||
<p><span id="zs">45</span><span>分贝</span></p>
|
||||
<p>噪声</p>
|
||||
<div class="monitor-icon"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout" style="width: 100%;height: 40%;">
|
||||
<div class="layout monitor-data">
|
||||
<p><span>45</span><span>kwh</span></p>
|
||||
<p><span id="gz">45</span><span>kwh</span></p>
|
||||
<p>光照</p>
|
||||
<div class="monitor-icon"></div>
|
||||
</div>
|
||||
<div class="layout monitor-data">
|
||||
<p><span>45</span><span>μg/m³</span></p>
|
||||
<p><span id="pm2">45</span><span>μg/m³</span></p>
|
||||
<p>PM2.5</p>
|
||||
<div class="monitor-icon"></div>
|
||||
</div>
|
||||
<div class="layout monitor-data">
|
||||
<p><span>45</span><span>μg/m³</span></p>
|
||||
<p><span id="pm10">45</span><span>μg/m³</span></p>
|
||||
<p>PM10</p>
|
||||
<div class="monitor-icon"></div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,60 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||
<style type="text/css">
|
||||
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
|
||||
</style>
|
||||
<script src="//mapopen.bj.bcebos.com/github/BMapGLLib/TrackAnimation/src/TrackAnimation.min.js"></script>
|
||||
<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=s0zhKgClIXRG8hQp3HB4KtiXPWw1dP8B"></script>
|
||||
<title>视角动画</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="allmap"></div>
|
||||
</body>
|
||||
</html>
|
||||
<script type="text/javascript">
|
||||
// GL版命名空间为BMapGL
|
||||
// 按住鼠标右键，修改倾斜角和角度
|
||||
var bmap = new BMapGL.Map("allmap"); // 创建Map实例
|
||||
bmap.centerAndZoom(new BMapGL.Point(116.297611, 40.047363), 17); // 初始化地图,设置中心点坐标和地图级别
|
||||
bmap.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
|
||||
var path = [{
|
||||
'lng': 116.297611,
|
||||
'lat': 40.047363
|
||||
}, {
|
||||
'lng': 116.302839,
|
||||
'lat': 40.048219
|
||||
}, {
|
||||
'lng': 116.308301,
|
||||
'lat': 40.050566
|
||||
}, {
|
||||
'lng': 116.305732,
|
||||
'lat': 40.054957
|
||||
}, {
|
||||
'lng': 116.304754,
|
||||
'lat': 40.057953
|
||||
}, {
|
||||
'lng': 116.306487,
|
||||
'lat': 40.058312
|
||||
}, {
|
||||
'lng': 116.307223,
|
||||
'lat': 40.056379
|
||||
}];
|
||||
var point = [];
|
||||
for (var i = 0; i < path.length; i++) {
|
||||
point.push(new BMapGL.Point(path[i].lng, path[i].lat));
|
||||
}
|
||||
var pl = new BMapGL.Polyline(point);
|
||||
setTimeout('start()', 3000);
|
||||
function start () {
|
||||
trackAni = new BMapGLLib.TrackAnimation(bmap, pl, {
|
||||
overallView: true,
|
||||
tilt: 20,
|
||||
duration: 10000,
|
||||
delay: 300
|
||||
});
|
||||
trackAni.start();
|
||||
}
|
||||
</script>
|
||||
|
|
@ -13,8 +13,9 @@
|
|||
<script src="../../plugin/layui-v2.9.7/layui/layui.js"></script>
|
||||
<script src="../../api/commonRequest.js" type="text/javascript"></script>
|
||||
<script src="../../js/publics/aescbc.js"></script>
|
||||
<!-- <script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak==s0zhKgClIXRG8hQp3HB4KtiXPWw1dP8B"></script>-->
|
||||
<script src="http://api.map.baidu.com/api?v=3.0&ak=s0zhKgClIXRG8hQp3HB4KtiXPWw1dP8B" type="text/javascript"></script>
|
||||
<script src="//bj.bcebos.com/v1/mapopen/cms/bmapgldemo/custom/customgreen.js"></script>
|
||||
<script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=s0zhKgClIXRG8hQp3HB4KtiXPWw1dP8B"></script>
|
||||
<!-- <script src="http://api.map.baidu.com/api?v=3.0&ak=s0zhKgClIXRG8hQp3HB4KtiXPWw1dP8B" type="text/javascript"></script>-->
|
||||
<script src="https://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js" type="text/javascript"></script>
|
||||
<link href="https://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" rel="stylesheet" />
|
||||
<script src="../../js/personnelControl/personnelControl.js"></script>
|
||||
|
|
@ -54,16 +55,9 @@
|
|||
<div class="right-down">
|
||||
<div class="background-img layout-vertical" style="background-image: url('../../img/personnelControl/Location.png');">
|
||||
<div id="map"></div>
|
||||
<button id="customizeBtn">自定义电子围栏</button>
|
||||
<div id="popup">
|
||||
<!-- 这里放置自定义电子围栏的表单或者控件 -->
|
||||
<label for="shape">形状：</label>
|
||||
<select id="shape">
|
||||
<option value="circle">圆形</option>
|
||||
<option value="polygon">多边形</option>
|
||||
</select>
|
||||
<!-- 更多设置参数 -->
|
||||
</div>
|
||||
<ul class="drawing-panel" style="z-index: 99;">
|
||||
<li id="myButton" class = "btn">电子围栏</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,120 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="../../css/font.css">
|
||||
<link rel="stylesheet" href="../../plugin/layui-v2.9.7/layui/css/layui.css">
|
||||
<link rel="stylesheet" href="../../css/personnelControl/personnelControlList.css">
|
||||
<script src="../../js/publics/jquery-3.6.0.min.js" type="text/javascript"></script>
|
||||
<script src="../../js/publics/public.js"></script>
|
||||
<script src="../../plugin/scroll/jquery.nicescroll.min.js"></script>
|
||||
<script src="../../js/publics/echarts.js"></script>
|
||||
<script src="../../plugin/layui-v2.9.7/layui/layui.js"></script>
|
||||
<script src="../../api/commonRequest.js" type="text/javascript"></script>
|
||||
<script src="../../js/publics/aescbc.js"></script>
|
||||
<!-- <script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak==s0zhKgClIXRG8hQp3HB4KtiXPWw1dP8B"></script>-->
|
||||
<script src="http://api.map.baidu.com/api?v=3.0&ak=s0zhKgClIXRG8hQp3HB4KtiXPWw1dP8B" type="text/javascript"></script>
|
||||
<script src="https://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js" type="text/javascript"></script>
|
||||
<link href="https://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" rel="stylesheet" />
|
||||
<title>人员管控</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="large-frame layout">
|
||||
<div class="left">
|
||||
<div class="left-under">
|
||||
<div class="background-img" style="background-image: url('../../img/personnelControl/PersonnelMovement.png');">
|
||||
<div id="content" style="height: 100%;width: 100%;overflow: auto;">
|
||||
<form class="layui-form " onsubmit="return false">
|
||||
<div class="layui-inline" style="margin-left: 87%;margin-top: 1%;">
|
||||
<div class="layui-col-xs12">
|
||||
<button id="addButton" class="layui-btn" lay-filter="demo-table-search">新增围栏</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<table id="dome" lay-filter="test"></table>
|
||||
</div>
|
||||
|
||||
<div id="hiddenContent" style="height: 100%;width: 100%;overflow: auto;display: none;margin-top: 4%;">
|
||||
<form class="layui-form" onsubmit="return false;">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">围栏名称</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" id="fencingName" name="fencingName" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">围栏类型</label>
|
||||
<div class="layui-input-inline">
|
||||
<select id="fencingType" name="fencingType" lay-filter="aihao" lay-verify="required">
|
||||
<option value=""></option>
|
||||
<option value="0">作业区域</option>
|
||||
<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-inline">
|
||||
<select id="alarmType" name="alarmType" lay-filter="aihao" lay-verify="required">
|
||||
<option value=""></option>
|
||||
<option value="0">禁止入内</option>
|
||||
<option value="1">禁止离开</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">警戒等级</label>
|
||||
<div class="layui-input-inline">
|
||||
<select id="alertType" name="alertType" lay-filter="aihao" lay-verify="required">
|
||||
<option value=""></option>
|
||||
<option value="0">一级</option>
|
||||
<option value="1">二级</option>
|
||||
<option value="2">三级</option>
|
||||
<option value="3">四级</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">围栏颜色</label>
|
||||
<div class="layui-input-inline" style="width: 120px;">
|
||||
<input type="text" name="color" value="" lay-verify="required" placeholder="请选择颜色" class="layui-input" id="color">
|
||||
</div>
|
||||
<div class="layui-inline" style="left: -11px;">
|
||||
<div id="ID-colorpicker-demo-form"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-form-mid layui-text-em">
|
||||
<i class="layui-icon layui-icon-tips">提示：在右侧地图区域绘制围栏，最少绘制三个点！</i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-block">
|
||||
<button type="submit" class="layui-btn" lay-submit lay-filter="demo1">立即提交</button>
|
||||
<button id="return" type="reset" class="layui-btn layui-btn-primary" style="background-color: #A8A8A8;color: white;">返回</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="middle">
|
||||
<div class="right-down">
|
||||
<div class="background-img layout-vertical" style="background-image: url('../../img/personnelControl/Location.png');">
|
||||
<div id="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script type="text/html" id="switchTpl">
|
||||
<input type="checkbox" id="statusSwitch" name="status" value="{{d.id}}" lay-skin="switch" lay-text="启用|锁定" lay-filter="statusSwitch" {{ d.status == 1 ? 'checked' : '' }}>
|
||||
</script>
|
||||
<script src="../../js/personnelControl/personnelControlList.js"></script>
|
||||
</html>
|
||||
Loading…
Reference in New Issue