hb_zhgd_screen/js/operEnvironment/operEnvironment.js

705 lines
25 KiB
JavaScript

let element, layer, table;
const bidCode = parent.$('#bidPro').val();
var alarmTableIns;
let weatherArray = [];
let weatherIconArray = [];
let temperatureArray = [];
let timeArray = [];
layui.use(['layer', 'element', 'table'], function () {
element = layui.element;
layer = layui.layer;
table = layui.table;
// 响应成功后的拦截器
$.ajaxSetup({
beforeSend: function(xhr, options) {
var originalSuccess = options.success
options.success = function(data, textStatus, jqXhr) {
data = modifyResponseData(data);
// success(data,textStatus, jqXhr);
originalSuccess.apply(this, arguments)
}
}
})
//边坡位移监测列表
DaylightDisplacementList('');
DaylightDisplacementApi();
//和风天气API调用
// zephyrineWeather();
//有限空间
LimitedSpaceApi();
//GPS安装检测
GPSInstallationApi();
//实时监测
realTimeMonitoring();
// 智慧手环-table
loadZhshTable();
});
//实时监测
function realTimeMonitoring(){
const url = commonUrl + "screen/largeScreen/operatingEnvironment/RealTimeMonitoring";
const params = {
"bidCode": bidCode,
"roleCode": roleCode,
"orgId": orgId,
"userId": userId
}
let encryptStr = encryptCBC(JSON.stringify(params));
ajaxRequest(url, "POST", encryptStr, true, function () {
}, function (result) {
if (result.code === 200) {
setData(result.data);
} else if (result.code === 500) {
console.error('实时监测' + result.msg);
setData(null);
} else if (result.code === 401) {
loginout(1);
}
}, function (xhr, status, error) {
error(xhr, status, error)
setData(null);
}, "application/json", aqEnnable);
/* 实时检测赋值 */
function setData(data) {
if (data && data.length > 0) {
$.each(data, function (index, item) {
var itemHtml = ''
if(item.isWarn=='0'){
itemHtml = `<div class="monitor-item">
<p><span id="wd">${item.val}</span><span>${item.unit}</span></p>
<p>${item.dataType}</p>
<div class="item-icon"></div>
</div>`
}else if(item.isWarn=='1'){
itemHtml = `<div class="monitor-item">
<p><span id="wd" class="redColor">${item.val}</span><span class="redColor">${item.unit}</span></p>
<p class="redColor">${item.dataType}</p>
<div class="item-icon"></div>
</div>`
}
$("#flex-Box").append(itemHtml)
})
}
}
}
//边坡位移监测列表
function DaylightDisplacementList(deviceId){
const url = commonUrl + "screen/largeScreen/operatingEnvironment/getSlopeDisplacementList";
alarmTableIns = table.render({
elem: '#demo',
url: url,
skin: 'line',
height:"#right-down-right-10",
headers:{
decrypt:"decrypt",
"Authorization":token
},
where: {
roleCode: roleCode,
orgId: orgId,
userId: userId,
bidCode: bidCode,
deviceId: deviceId
},
cols: [[
{field: 'number', width:80,title: '序号', align: 'center', type: 'numbers', fixed: 'left'},
// {field: 'areaName', title: '区域'},
{field: 'deviceName', title: '设备名称'},
{field: 'moduleName', title: '检测类型'},
{field: 'val', title: '检测值'},
// {field: 'sourceData', title: '原数据'},
{field: 'changeVal', title: '变化值'},
{field: 'createTime', title: '检测时间'},
{field: 'isWarn', title: '状态', templet: function (d) {
if (d.isWarn == 1) {
return '<span style="color: #FF5722;">告警</span>';
} else if (d.isWarn == 0) {
return '<span style="color: #5FB878;">正常</span>';
}else{
return '<span style="color: #5FB878;">正常</span>';
}
}
}
]],
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: 5
})
}
function DaylightDisplacementApi(){
const url = commonUrl + "screen/largeScreen/operatingEnvironment/SlopeDisplacement";
const params = {
"roleCode": roleCode,
"orgId": orgId,
"userId": userId,
"bidCode": bidCode,
"deviceType":1908
}
let encryptStr = encryptCBC(JSON.stringify(params));
ajaxRequest(url, "POST", encryptStr, true, function () {
}, function (result) {
console.log(result);
if (result.code === 200) {
DaylightDisplacement(result.data);
} else if (result.code === 500) {
layer.msg(result.msg, { icon: 2 });
}else if(result.code === 401){
loginout(1)
}
}, function (xhr, status, error) {
error(xhr, status, error)
}, "application/json",aqEnnable);
}
function DaylightDisplacement(environmentData) {
let html = '';
$.each(environmentData, function (index, item) {
html += '<div class="item layout" dev-id = "'+item.deviceId+'" onclick="loadData(this)">' +
'<img src="../../img/operEnvironment/daylightDisplacement-abnormal.png">' +
'<p>'+item.deviceName+'</p>' +
'</div>';
})
$('.right-down-left').empty().append(html);
}
function loadData(that){
const devId = $(that).attr('dev-id');
$('.right-down-left .item').each(function(){
$(this).find('img').attr('src',"../../img/operEnvironment/daylightDisplacement-abnormal.png")
})
$(that).find('img').attr('src',"../../img/operEnvironment/daylightDisplacement-normal.png")
DaylightDisplacementList(devId);
}
function backData(type){
if(type === 1){
$('.right-down-left .item').each(function(){
$(this).find('img').attr('src',"../../img/operEnvironment/daylightDisplacement-abnormal.png")
})
DaylightDisplacementList('');
}else if(type === 2){
$('.environment .item').each(function(index, item){
$(this).find('img').attr('src',"../../img/operEnvironment/LimitedMonitoring-abnormal.png")
if(index === 0){
const devId = $(this).attr('dev-id');
LimitedSpaceEnvironmentApi(devId);
}
})
}else if(type === 3){
$('.environments .item').each(function(index,item){
$(this).find('img').attr('src',"../../img/operEnvironment/LimitedMonitoring-abnormal.png")
if(index === 0){
const devId = $(this).attr('dev-id');
LimitedSpaGPSInstallationEnvironmentApiceEnvironmentApi(devId);
}
})
}
}
//和风天气API调用
function zephyrineWeather() {
// if (navigator.geolocation) {
// navigator.geolocation.getCurrentPosition(function (position) {
// let latitude = position.coords.latitude;
// let longitude = position.coords.longitude;
let latitude = '34.007143';
let longitude = '116.884782';
console.log("经度:" + longitude + ", 纬度:" + latitude);
let latLon = '116.747321,33.934215';
// 百度地图API
// 创建一个点坐标
var point = new BMap.Point(longitude, latitude);
// 根据坐标点获取位置信息
var geoc = new BMap.Geocoder();
geoc.getLocation(point, function(rs){
var addComp = rs.addressComponents;
var city = addComp.city;
var urban = addComp.city + ", " + addComp.district;
$("#city").text(city);
$("#urban").text(urban);
});
const apiUrl = `https://devapi.qweather.com/v7/weather/now?location=${latLon}&key=b353808cee6649dba8ea4c6838319ea4`;
fetch(apiUrl)
.then(response => response.json())
.then(data => {
const dailyWeather = data.now;
$("#temp").text(dailyWeather.temp + "°");
$("#environment").text(dailyWeather.text);
if (dailyWeather.text === "晴") {
$("#weather_icon").css("background-image", "url('../../img/operEnvironment/clearWeather2.png')");
} else if (dailyWeather.text === "多云") {
$("#weather_icon").css("background-image", "url('../../img/operEnvironment/cloudy.png')");
} else if (dailyWeather.text === "阴") {
$("#weather_icon").css("background-image", "url('../../img/operEnvironment/cloudy_sm.png')");
} else if (dailyWeather.text === "中雨" || dailyWeather.text === "大雨" || dailyWeather.text === "雨" || dailyWeather.text === "小雨") {
$("#weather_icon").css("background-image", "url('../../img/operEnvironment/cloudy_sm.png')");
}
})
.catch(error => {
console.error('Error fetching weather data:', error);
});
const apiUrls = `https://devapi.qweather.com/v7/weather/3d?location=${latLon}&key=b353808cee6649dba8ea4c6838319ea4`;
fetch(apiUrls)
.then(response => response.json())
.then(data => {
// 获取每日天气数据
const dailyWeather = data.daily;
if (dailyWeather && Array.isArray(dailyWeather)) {
dailyWeather.forEach((day, index) => {
const dayIndex = index + 1;
const dateId = `#date${dayIndex}`;
const tempsId = `#temps${dayIndex}`;
const airId = `#air${dayIndex}`;
const iconId = `#weather_small_icon${dayIndex}`;
// 更新HTML元素内容
$(dateId).text(day.fxDate);
$(tempsId).text(day.tempMin + '°~' + day.tempMax + '°');
$(airId).text(day.textDay);
// 根据天气情况更新背景图片
const weatherIcon = getWeatherIcon(day.textDay);
$(iconId).css('backgroundImage', `url('../../img/operEnvironment/${weatherIcon}')`);
});
} else {
console.log('未能获取有效的天气数据');
}
})
.catch(error => {
console.error('Error fetching weather data:', error);
});
const apiUrlss = `https://devapi.qweather.com/v7/weather/24h?location=${latLon}&key=b353808cee6649dba8ea4c6838319ea4`;
fetch(apiUrlss)
.then(response => response.json())
.then(data => {
// 获取每小时天气数据
const dailyWeather = data.hourly;
if (dailyWeather && Array.isArray(dailyWeather) && dailyWeather.length >= 7) {
dailyWeather.slice(0, 7).map(hourlyData => {
const weather = hourlyData.text; // 天气
const temperature = hourlyData.temp; // 温度
const time = new Date(hourlyData.fxTime); // 获取时间日期对象
let weatherIcon = getWeatherIcon(weather);
weatherArray.push(weather);
weatherIconArray.push(`../../img/operEnvironment/${weatherIcon}`);
temperatureArray.push(temperature);
timeArray.push(`${time.getHours()}:${time.getMinutes()}`); // 将小时和分钟以字符串形式存入数组
});
console.log('天气数组:', weatherArray);
console.log('天气图标数组:', weatherIconArray);
console.log('温度数组:', temperatureArray);
console.log('时间数组:', timeArray);
//天气echarts图表
connect2();
} else {
console.log('未能获取有效的天气数据或数据不足7组');
}
})
.catch(error => {
console.error('获取天气数据时发生错误:', error);
});
// });
// } else {
// console.log("浏览器不支持 Geolocation API");
// }
}
function getWeatherIcon(weatherText) {
switch (weatherText) {
case '晴':
return 'clearWeather2.png';
case '多云':
return 'cloudy.png';
case '阴':
return 'cloudy_sm.png';
case '雨':
case '小雨':
case '中雨':
case '大雨':
return 'cloudy_sm.png';
default:
return 'default.png';
}
}
//天气echarts图表
function connect2() {
var myChart = echarts.init(document.getElementById('weather_time'));
var rich = {
b: {
color: 'white',
fontSize: 12,
lineHeight: 30,
height: 20
}
};
for (var i = 0; i < weatherIconArray.length; i++) {
rich[i] = {
backgroundColor: {
image: weatherIconArray[i]
},
height: 30,
width: 30
};
}
var option = {
grid: {
show: true,
backgroundColor: 'transparent',
opacity: 0.3,
borderWidth: '0',
top: '150',
bottom: '0'
},
tooltip: {
trigger: 'axis'
},
legend: {
show: false
},
xAxis: [
// 日期
{
type: 'category',
boundaryGap: false,
position: 'top',
offset: 100,
zlevel: 100,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
interval: 0,
formatter: [
'{a|{value}}'
].join('\n'),
rich: {
a: {
color: 'white',
fontSize: 11
}
}
},
nameTextStyle: {},
data: timeArray
},
// 天气图标
{
type: 'category',
boundaryGap: false,
position: 'top',
offset: 20,
zlevel: 100,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
interval: 0,
formatter: function (value, index) {
return '{' + index + '| }\n{b|' + value + '}'
},
rich: rich
},
nameTextStyle: {
fontWeight: 'bold',
fontSize: 19
},
data: weatherArray
}
],
yAxis: {
type: 'value',
show: false,
axisLabel: {
formatter: '{value} °C',
color: 'white'
}
},
series: [
{
name: '最高气温',
type: 'line',
data: temperatureArray,
symbol: 'emptyCircle',
symbolSize: 10,
showSymbol: true,
smooth: true,
itemStyle: {
normal: {
color: '#C95843'
}
},
label: {
show: true,
position: 'top',
color: 'white',
formatter: '{c} °C'
},
lineStyle: {
width: 1,
// shadowOffsetY: -10,
// color: 'white'
},
areaStyle: {
opacity: 1,
// shadowOffsetY: -10,
color: 'transparent'
}
}
]
}
myChart.setOption(option);
}
//有限空间
function LimitedSpaceApi(){
const url = commonUrl + "screen/largeScreen/operatingEnvironment/FiniteSpace";
const params = {
"roleCode": roleCode,
"orgId": orgId,
"userId": userId,
"bidCode": bidCode
}
let encryptStr = encryptCBC(JSON.stringify(params));
ajaxRequest(url, "POST", encryptStr, true, function () {
}, function (result) {
console.log(result);
if (result.code === 200) {
LimitedSpace(result.data);
} else if (result.code === 500) {
layer.msg(result.msg, { icon: 2 });
}else if(result.code === 401){
loginout(1)
}
}, function (xhr, status, error) {
error(xhr, status, error)
}, "application/json",aqEnnable);
}
function LimitedSpace(environmentData) {
let html = '';
$.each(environmentData, function (index, item) {
if(index === 0){
LimitedSpaceEnvironmentApi(item.deviceId);
}
html += '<div class="item layout" dev-id = "'+item.deviceId+'" onclick="loadData2(this)">' +
'<img src="../../img/operEnvironment/LimitedMonitoring-abnormal.png">' +
'<p>'+item.deviceName+'</p>' +
'</div>';
})
$('.environment').empty().append(html);
}
function loadData2(that){
const devId = $(that).attr('dev-id');
$('.environment .item').each(function(){
$(this).find('img').attr('src',"../../img/operEnvironment/LimitedMonitoring-abnormal.png")
})
$(that).find('img').attr('src',"../../img/operEnvironment/LimitedMonitoring-normal.png")
LimitedSpaceEnvironmentApi(devId);
}
function LimitedSpaceEnvironmentApi(deviceId){
const url = commonUrl + "screen/largeScreen/operatingEnvironment/getFiniteSpaceEnvironment";
const params = {
"roleCode": roleCode,
"orgId": orgId,
"userId": userId,
"bidCode": bidCode,
"deviceId":deviceId
}
let encryptStr = encryptCBC(JSON.stringify(params));
ajaxRequest(url, "POST", encryptStr, true, function () {
}, function (result) {
console.log(result);
if (result.code === 200) {
const data = result.data;
if (data && data.length > 0) {
console.log(data);
$("#yxkjId").empty();
$.each(data, function (index, item) {
let div="<div class=\" layout monitor-data \" ><p><span>" +
item.val+"</span><span>"+item.unit+"</span></p><p>" +
item.modeName+"</p><div id='logo' class=\"monitor-icon\"></div>";
$("#yxkjId").append(div);
})
}
} else if (result.code === 500) {
layer.msg(result.msg, { icon: 2 });
}else if(result.code === 401){
loginout(1)
}
}, function (xhr, status, error) {
error(xhr, status, error)
}, "application/json",aqEnnable);
}
//GPS安装检测
function GPSInstallationApi(){
const url = commonUrl + "screen/largeScreen/operatingEnvironment/getGPSInstallation";
const params = {
"roleCode": roleCode,
"orgId": orgId,
"userId": userId,
"bidCode": bidCode,
"deviceType":"1910"
}
let encryptStr = encryptCBC(JSON.stringify(params));
ajaxRequest(url, "POST", encryptStr, true, function () {
}, function (result) {
console.log(result);
if (result.code === 200) {
GPSInstallation(result.data);
} else if (result.code === 500) {
layer.msg(result.msg, { icon: 2 });
}else if(result.code === 401){
loginout(1)
}
}, function (xhr, status, error) {
error(xhr, status, error)
}, "application/json",aqEnnable);
}
function GPSInstallation(environmentData) {
let html = '';
$.each(environmentData, function (index, item) {
if(index === 0){
GPSInstallationEnvironmentApi(item.deviceId);
}
html += '<div class="item layout" dev-id = "'+item.deviceId+'" onclick="loadData3(this)">' +
'<img src="../../img/operEnvironment/LimitedMonitoring-abnormal.png">' +
'<p>'+item.deviceName+'</p>' +
'</div>';
})
$('.environments').empty().append(html);
}
function loadData3(that){
const devId = $(that).attr('dev-id');
$('.environments .item').each(function(){
$(this).find('img').attr('src',"../../img/operEnvironment/LimitedMonitoring-abnormal.png")
})
$(that).find('img').attr('src',"../../img/operEnvironment/LimitedMonitoring-normal.png")
GPSInstallationEnvironmentApi(devId);
}
function GPSInstallationEnvironmentApi(deviceId){
const url = commonUrl + "screen/largeScreen/operatingEnvironment/GPSInstallationEnvironment";
const params = {
"roleCode": roleCode,
"orgId": orgId,
"userId": userId,
"bidCode": bidCode,
"deviceId":deviceId
}
let encryptStr = encryptCBC(JSON.stringify(params));
ajaxRequest(url, "POST", encryptStr, true, function () {
}, function (result) {
console.log(result);
if (result.code === 200) {
const data = result.data;
$("#gisId").empty();
if (data && data.length > 0) {
$.each(data, function (index, item) {
let gisDiv=" <div class=\"layout monitor-data wd\"><p><span id=\"gis_wd\">"+item.val+
"</span><span>"+item.unit+"</span></p>"+" <p>"+item.modeName+"</p>"+
" <div id='logo' class=\"monitor-icon\"></div>";
$("#gisId").append(gisDiv);
})
}
} else if (result.code === 500) {
layer.msg(result.msg, { icon: 2 });
}else if(result.code === 401){
loginout(1)
}
}, function (xhr, status, error) {
error(xhr, status, error)
}, "application/json",aqEnnable);
}
/* 智慧手环-table */
function loadZhshTable(){
const url = commonUrl + "screen/largeScreen/operatingEnvironment/getUserShList";
alarmTableIns = table.render({
elem: '#zhsh-table',
url: url,
height:"#zhsh-table-box-20",
// skin: 'line',
// height: 'full',
headers:{
decrypt:"decrypt",
"Authorization":token
},
where: {
roleCode: roleCode,
orgId: orgId,
userId: userId,
bidCode: bidCode
},
cols: [[
{field: 'number', width:'5%',title: '序号', align: 'center', type: 'numbers', fixed: 'left'},
{field: 'deviceName', title: '设备名称',width:'25%'},
{field: 'userName', title: '姓名',width:'20%'},
{field: 'xl', title: '心率',width:'15%'},
{field: 'xy', title: '血压',width:'20%'},
{field: 'wd', title: '温度',width:'15%'}
]],
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: 5
})
}