bigScreen/js/index.js

// var ajaxUrl = 'http://192.168.99.107:7070'
// var ajaxUrl = 'http://192.168.99.67:7070'
var ajaxUrl = 'http://192.168.1.100:7070'

//获取当前时间
var timer = null
timer = setInterval(() => {
  var nowDate = getCurrentTime()
  $('.current-date').html(nowDate)
}, 1000)

var swiper = new Swiper('.swiper-container', {
  autoplay: {
    delay: 3000, // 自动切换时间间隔
  },
  pagination: {
    el: '.swiper-pagination', // 分页器容器
    clickable: true, // 点击分页器切换
    bulletClass : 'my-bullet',//需设置.my-bullet样式
  },
});

var echartsTimer = null
// 定时请求第三方数据，更新页面数据
echartsTimer = setInterval(() => {
  FetchThisDayYearBorrowNum()
  FetchArchivesNum()
  FetchFileAnjuanNum()
  FetchDevice()
  FetchInitDisplayconfig()
}, 1000 * 30)

FetchArchivesNum()
FetchFileAnjuanNum()
FetchDevice()
FetchThisDayYearBorrowNum()
FetchInitSecurityDoorLog()
FetchAlarmInfo()


var allDisplayConfigData;
var allDeviceIds = [];
var allDeviceIds = [];
var displayConfigData;
var url;
var topDisplayData = {
  DAK_DIV_TOP_001: {
    show: false,
    curValue: '',
    unit: '',
    curstatus: 0
  },
  DAK_DIV_TOP_002: {
    show: false,
    curValue: '',
    unit: '',
    curstatus: 0
  },
  DAK_DIV_TOP_003: {
    show: false,
    curValue: '',
    unit: '',
    curstatus: 0
  },
  DAK_DIV_TOP_004: {
    show: false,
    curValue: '',
    unit: '',
    curstatus: 0
  },
  DAK_DIV_TOP_005: {
    show: false,
    curValue: '',
    unit: '',
    curstatus: 0
  },
  DAK_DIV_TOP_006: {
    show: false,
    curValue: '',
    unit: '',
    curstatus: 0
  }
}
var waterLeakage = {
  waterLeakageStatus1: false,
  waterLeakageStatus2: false,
  waterLeakageStatus3: false,
  waterLeakageStatus4: false,
  waterLeakageText4: ''
}

FetchInitDisplayconfig()
function FetchInitDisplayconfig() {
  $.ajax({
    url: ajaxUrl + '/api/displayconfig/list',
    type: 'GET',
    data: {
      storeroomId: 'D6490DA3D4261E8C26D0E3'
    },
    success: function (res) {
      if (res.code === 200) {
        allDisplayConfigData = res.data
        allDisplayConfigData.forEach(item => {
          if (item.isDisplay && item.bindState && item.deviceInfo && (item.divPosition.includes('OAO') || item.divPosition.includes('TOP') || item.divPosition.includes('LS'))) {
            allDeviceIds.push(item.deviceInfo.deviceId)
            if (!url) {
              url = 'http://' + item.deviceInfo.deviceIp + ':' + item.deviceInfo.devicePort
            }
          }
        })
        displayConfigData = allDisplayConfigData.filter((item) => { return item.isDisplay && item.bindState && item.deviceInfo && (item.divPosition.includes('OAO') || item.divPosition.includes('TOP') || item.divPosition.includes('LS')) })
        getRealTimeData()
      }
    },
    error: function (err) {
      console.log(err);
    }
  });
}

function getRealTimeData() {
  if (allDeviceIds.length > 0) {
    $.ajax({
      url: ajaxUrl + '/api/thirdapi/getrealtimedata',
      type: 'POST',
      traditional: true,
      data: JSON.stringify({
        "ids": allDeviceIds,
        "url": url
      }),
      dataType: 'json',
      contentType: 'application/json',
      success: function (res) {
        if (res.code === 200) {
          displayConfigData.forEach(element => {
            if (element.divPosition.includes('TOP') && element.deviceSpecParams[0]) {
              // 获取页面div显示的数据
              var  result = res.data.find((item) => {
                return item.property_id === element.deviceSpecParams[0].paramId && item.device_id === element.deviceInfo.deviceId
              })
              if (result) {
                topDisplayData[element.divPosition] = {
                  show: true,
                  curValue: result.curvalue,
                  unit: result.unit,
                  curstatus: result.curstatus
                };

                var str = '<li class="top003">'
                        +'<i class="env-svg-item env-svg1"></i>'
                        +' <div class="msg-txt">'
                        +'<span class="msg-list-num">'+topDisplayData.DAK_DIV_TOP_003.curValue+'</span>'
                        +'<p class="msg-list-unit">CO2 '+topDisplayData.DAK_DIV_TOP_003.unit +'</p>'
                        +'</div>'
                        +'</li>'
                        +'<li class="top004">'
                        +'<i class="env-svg-item env-svg2"></i>'
                        +'<div class="msg-txt">'
                        +'<span class="msg-list-num">'+topDisplayData.DAK_DIV_TOP_004.curValue+'</span>'
                        +'<p class="msg-list-unit">VOC '+topDisplayData.DAK_DIV_TOP_004.unit+'</p>'
                        +'</div>'
                        +'</li>'
                        +'<li class="msg-pm top005">'
                        +' <i class="env-svg-item env-svg3"></i>'
                        +'<div class="msg-txt">'
                        +'<span class="msg-list-num">'+topDisplayData.DAK_DIV_TOP_005.curValue+'</span>'
                        +'<p class="msg-list-unit">PM2.5 '+topDisplayData.DAK_DIV_TOP_005.unit+'</p>'
                        +'</div>'
                        +' </li>'
                        +'<li class="msg-pm top006">'
                        +'<i class="env-svg-item env-svg4"></i>'
                        +' <div class="msg-txt">'
                        +'<span class="msg-list-num">'+topDisplayData.DAK_DIV_TOP_006.curValue+'</span>'
                        +'<p class="msg-list-unit">PM10 '+topDisplayData.DAK_DIV_TOP_006.unit+'</p>'
                        +'</div>'
                        +'</li>'
                $('.left-top-env').html(str)
                if(topDisplayData.DAK_DIV_TOP_003.curstatus > 0){
                  $('.top003').addClass('li-warn');
                }
                if(topDisplayData.DAK_DIV_TOP_004.curstatus > 0){
                  $('.top004').addClass('li-warn');
                }
                if(topDisplayData.DAK_DIV_TOP_005.curstatus > 0){
                  $('.top005').addClass('li-warn');
                }
                if(topDisplayData.DAK_DIV_TOP_006.curstatus > 0){
                  $('.top006').addClass('li-warn');
                }

                var strMiddle = '<li class="top001">'
                  +'<i class="env-svg-item env-svg5"></i>'
                  +'<div class="msg-txt">'
                  +'<span class="msg-list-num">'+topDisplayData.DAK_DIV_TOP_001.curValue+'</span>'
                  +'<p class="msg-list-unit">温度 '+topDisplayData.DAK_DIV_TOP_001.unit+'</p>'
                  +'</div>'
                  +'</li>'
                  +'<li class="top002">'
                  +'<i class="env-svg-item env-svg6"></i>'
                  +'<div class="msg-txt">'
                  +'<span class="msg-list-num">'+topDisplayData.DAK_DIV_TOP_002.curValue+'</span>'
                  +'<p class="msg-list-unit">湿度 '+topDisplayData.DAK_DIV_TOP_002.unit+'</p>'
                  +'</div>'
                  +'</li>'
                $('.middle-env').html(strMiddle)
                if(topDisplayData.DAK_DIV_TOP_001.curstatus > 0){
                  $('.top001').addClass('li-warn');
                }
                if(topDisplayData.DAK_DIV_TOP_002.curstatus >  0){
                  $('.top002').addClass('li-warn');
                }
              } else {
                this.$set(this.topDisplayData, element.divPosition, {
                  show: false
                })
              }
            } else if (element.divPosition.includes('OAO')) {
              // 获取3D弹窗显示的数据
              // var  wenduParamId = element.deviceSpecParams.find((item) => { return item.paramName === '温度' })?.paramId
              // var  siduParamId = element.deviceSpecParams.find((item) => { return item.paramName === '湿度' })?.paramId
              // var  wendu = {}
              // var  sidu = {}
              // if (wenduParamId) {
              //   wendu = res.data.find((item) => {
              //     return item.property_id === wenduParamId && item.device_id === element.deviceInfo.deviceId
              //   })
              // }
              // if (siduParamId) {
              //   sidu = res.data.find((item) => {
              //     return item.property_id === siduParamId && item.device_id === element.deviceInfo.deviceId
              //   })
              // }
            } else {
              var waterLeakageParamId1 = null;
              for (var i = 0; i < element.deviceSpecParams.length; i++) {
                if (element.deviceSpecParams[i].paramName === '维护报警') {
                  waterLeakageParamId1 = element.deviceSpecParams[i].paramId;
                  break;
                }
              }

              var waterLeakageParamId2 = null;
              for (var i = 0; i < element.deviceSpecParams.length; i++) {
                if (element.deviceSpecParams[i].paramName === '漏水报警') {
                  waterLeakageParamId2 = element.deviceSpecParams[i].paramId;
                  break;
                }
              }

              var waterLeakageParamId3 = null;
              for (var i = 0; i < element.deviceSpecParams.length; i++) {
                if (element.deviceSpecParams[i].paramName === '感应线断裂') {
                  waterLeakageParamId3 = element.deviceSpecParams[i].paramId;
                  break;
                }
              }

              var waterLeakage4;
              for (var i = 0; i < element.deviceSpecParams.length; i++) {
                if (element.deviceSpecParams[i].paramName === '漏水位置') {
                  waterLeakage4 = element.deviceSpecParams[i];
                  break;
                }
              }

              if (waterLeakage4) {
                waterLeakage.waterLeakageText4 = waterLeakage4.unit
              }

              var waterLeakageParamId4;
              if(waterLeakage4 !== null && typeof waterLeakage4 !== 'undefined'){
                waterLeakageParamId4 = waterLeakage4.paramId;
              }

              if (waterLeakageParamId1) {
                var waterLeakageStatus1 = null;
                for (var i = 0; i < res.data.length; i++) {
                  if (res.data[i].property_id === waterLeakageParamId1 && res.data[i].device_id === element.deviceInfo.deviceId) {
                    waterLeakageStatus1 = res.data[i].curstatus > 0;
                    break;
                  }
                }
                waterLeakage.waterLeakageStatus1 = waterLeakageStatus1;
              }
              if (waterLeakageParamId2) {
                var foundItem = res.data.find((item) => {
                  return item.property_id === waterLeakageParamId2 && item.device_id === element.deviceInfo.deviceId;
                });

                if (foundItem) {
                  var waterLeakageStatus2 = foundItem.curstatus > 0;
                  waterLeakage.waterLeakageStatus2 = waterLeakageStatus2;
                }

              }
              if (waterLeakageParamId3) {
                var foundItem = res.data.find((item) => {
                  return item.property_id === waterLeakageParamId3 && item.device_id === element.deviceInfo.deviceId;
                });

                if (foundItem) {
                  var waterLeakageStatus3 = foundItem.curstatus > 0;
                  waterLeakage.waterLeakageStatus3 = waterLeakageStatus3;
                
                }
              }
              if (waterLeakageParamId4) {
                var  waterLeakageValue4 = res.data.find((item) => {
                  return item.property_id === waterLeakageParamId4 && item.device_id === element.deviceInfo.deviceId
                })
                waterLeakage['waterLeakageStatus4'] = waterLeakageValue4 && waterLeakageValue4.curstatus > 0;
                if (waterLeakageValue4 && waterLeakageValue4.curvalue) {
                  waterLeakage.waterLeakageText4 = waterLeakageValue4.curvalue + ' ' + waterLeakage.waterLeakageText4;
                } else {
                  waterLeakage.waterLeakageText4 = '';
                }
              }

              if(waterLeakage.waterLeakageStatus1){
                $('.leakage-item001').addClass('leakage-warn');
              }
              if(waterLeakage.waterLeakageStatus2){
                $('.leakage-item002').addClass('leakage-warn');
              }
              if(waterLeakage.waterLeakageStatus3){
                $('.leakage-item003').addClass('leakage-warn');
              }
              if(waterLeakage.waterLeakageStatus4){
                $('.leakage-item004').addClass('leakage-warn');
              }
              $('.lsLocation').html(waterLeakage.waterLeakageText4)
            }
          })
        }
      },
      error: function (err) {
        console.log(err);
      }
    });
  }
}

var tableData = []
var tableData2 = []
var displayNum;
var scrollTimer = null

// table滚动
function tableRefScroll () {
  clearInterval(scrollTimer) // 清除定时器
  const table = document.getElementById('scrollTable') // 获取DOM元素
  const table2 = document.getElementById('scrollTable2') // 获取DOM元素
  var wrapperHeight = table.offsetHeight
  var wrapperHeight2 = table2.offsetHeight
  // 组件一页能完整展示的数据条数
  displayNum = Math.floor(wrapperHeight / 40)
  displayNum2 = Math.floor(wrapperHeight2 / 40)
  if (tableData.length > displayNum) {
    const bodyWrapper = table // 获取表格中承载数据的div元素
    addTableRefScroll(bodyWrapper, table, displayNum)
    // 鼠标移入
    bodyWrapper.onmouseover = () => {
      clearInterval(scrollTimer)
    }
    // 鼠标移出
    bodyWrapper.onmouseout = () => {
      addTableRefScroll(bodyWrapper, table, displayNum)
    }
  } else if (tableData2.length > displayNum2) {
    const bodyWrapper2 = table2 // 获取表格中承载数据的div元素
    addTableRefScroll(bodyWrapper2, table2, displayNum2)
    // 鼠标移入
    bodyWrapper2.onmouseover = () => {
      clearInterval(scrollTimer)
    }
    // 鼠标移出
    bodyWrapper2.onmouseout = () => {
      addTableRefScroll(bodyWrapper2, table2, displayNum2)
    }
  } else {
    scrollTimer = setInterval(() => {
      FetchInitSecurityDoorLog()
      FetchAlarmInfo()
    }, 1000 * 3 * tableData.length)
  }
}

function addTableRefScroll (bodyWrapper, table, displayNum) {
  if (displayNum && displayNum > 0) {
    scrollTimer = setInterval(() => {
      if (bodyWrapper.scrollTop + table.offsetHeight >= tableData.length * 40) {
        bodyWrapper.scrollTop = 0
        FetchInitSecurityDoorLog()
        FetchAlarmInfo()
      } else {
        bodyWrapper.scrollTop += displayNum * 40
      }
    }, 1000 * 3 * displayNum)
  }
}

function FetchInitSecurityDoorLog () {
  $.ajax({
    url: ajaxUrl + '/api/securitydoor/initSecurityDoorLog',
    type: 'GET',
    data: {
      page: 0,
      size: 30
    },
    success: function (res) {
      if (res.code === 200) {
        var result = res.data.content
        if (result && result.length > 0) {
          tableData.splice(0, result.length, ...result)
          for (var i = 0; i < result.length; i++) {
            var tempHtml;
            tempHtml += "<tr><td>" + parseTime(result[i].createTime) + "</td><td>" + result[i].roomName + "</td><td>" + result[i].alarmMsg + "</td></tr>";
            $("#fTbody").append(tempHtml);
          }
          tableRefScroll()
        }
      }
    },
    error: function (err) {
      console.log(err);
    }
  });
}

function FetchAlarmInfo () {
  $.ajax({
    url: ajaxUrl + '/api/alarm/info',
    type: 'GET',
    data: {
      storeroomId: null
    },
    success: function (res) {
      if (res.code === 200) {
        var result = res.data.content
        if (result && result.length > 0) {
          tableData2.splice(0, result.length, ...result)
          for (var i = 0; i < result.length; i++) {
            var tempHtml;
            tempHtml += "<tr><td>" + parseTime(result[i].createTime) + "</td><td>" + result[i].roomName + "</td><td>" + result[i].alarmMsg + "</td></tr>";
            $("#fTbody2").append(tempHtml);
          }
          tableRefScroll()
        }
      }
    },
    error: function (err) {
      console.log(err);
    }
  });
}

function FetchArchivesNum () {
  // 获取档案总数
  $.ajax({
    url: ajaxUrl + '/api/archives/getArchivesNum',
    type: 'GET',
    data: {},
    success: function (res) {
      if (res.code === 200) {
        $('#archivesNum .timer').countTo({ from: 0, to: res.data });
      }
    },
    error: function (err) {
      console.log(err);
    }
  });
}

function FetchFileAnjuanNum () {
  // 档案类别数量统计  文件总数,案卷总数
  $.ajax({
    url: ajaxUrl + '/api/archives/initArchivesTypeNum',
    type: 'GET',
    data: {},
    success: function (res) {
      if (res.code === 200) {
        $('#filesNum .timer').countTo({ from: 0, to: res.data.filesNum });
        $('#anjuanNum .timer').countTo({ from: 0, to: res.data.archivesNum });
      }
    },
    error: function (err) {
      console.log(err);
    }
  });
}

function FetchDevice () {
  var devNumAll;
  var lineNum;
  // 设备总数,在线设备数,离线设备数
  $.ajax({
    url: ajaxUrl + '/api/device/list',
    type: 'GET',
    data: {
      page: 0,
      size: 10
    },
    success: function (res) {
      if (res.code === 200) {
        $('#deviceTotal .timer').countTo({ from: 0, to: res.data.totalElements });
        devNumAll = res.data.totalElements
      }
    },
    error: function (err) {
      console.log(err);
    }
  });

  // 在线设备数
  $.ajax({
    url: ajaxUrl + '/api/device/num',
    type: 'GET',
    data: {},
    success: function (res) {
      if (res.code === 200) {
        $('#lineDevNum .timer').countTo({ from: 0, to: res.data });
        lineNum = res.data
        offlineDeviceNum = devNumAll - lineNum
        $('#offlineDevice .timer').countTo({ from: 0, to: offlineDeviceNum });
      }
    },
    error: function (err) {
      console.log(err);
    }
  });
}

function FetchThisDayYearBorrowNum () {
  $.ajax({
    url: ajaxUrl + '/api/borrow/thisDayYearBorrowNum',
    type: 'GET',
    data: {},
    success: function (res) {
      if (res.code === 200) {
        var mynroll1 = res.data.dayBorrow;
        var r1 = new DigitRoll({
            container: '#tnum1',
            width: 7
        });
        r1.roll(mynroll1);

        var mynroll2 = res.data.dayReturn;
        var r2 = new DigitRoll({
            container: '#tnum2',
            width: 7
        });
        r2.roll(mynroll2);

        var mynroll3 = res.data.monthBorrow;
        var r3 = new DigitRoll({
            container: '#tnum3',
            width: 7
        });
        r3.roll(mynroll3);

        var mynroll4 = res.data.monthReturn;
        var r4 = new DigitRoll({
            container: '#tnum4',
            width: 7
        });
        r4.roll(mynroll4);
      }
    },
    error: function (err) {
      console.log(err);
    }
  });
}