新增title/banner切换需求

css/style.css

@@ -248,6 +248,7 @@
   padding: 0;
   width: 2.0625rem;
   height: 2.5rem;
+  z-index: 9999;
 }
 
 .env-3d .screen-env-list li {
@@ -561,4 +562,32 @@
   font-weight: bold;
   color: #fff;
   border: 1px solid #0E3465;
+}
+
+.banner-top-name{
+  position: absolute;
+  left: 0;
+  top: 0;
+  padding: 0 15px;
+  height: 34px;
+  line-height: 34px;
+  font-size: 18px;
+  color: #fff;
+  background-color: #113d72;
+  border: 1px solid #339cff;
+  border-radius: 4px;
+}
+
+.right-td span{
+  display: inline-block;
+  padding: 2px 4px;
+  font-size: 12px;
+  border: 1px solid #339cff;
+  background-color: #02255f;
+  border-radius: 4px;
+}
+.right-td span.out-door{
+  background-color: transparent;
+  border-color: #fd8042;
+  color: #fd8042;
 }

index.html

@@ -95,8 +95,8 @@
           <table class="table-wrapper" cellpadding="0" cellspacing="8">
             <tr class="table-header">
               <th>时间</th>
-              <th>库房</th>
-              <th>警情</th>
+              <th>位置</th>
+              <th>说明</th>
             </tr>
           </table>
           <div id="scrollTable" class="scrollTable">
@@ -109,6 +109,7 @@
       </div>
       <div class="env-main-middle">
         <div class="env-3d">
+          <div class="banner-top-name">5F 全景图</div>
           <div class="swiper-container">
             <div class="swiper-wrapper">
               <div class="swiper-slide">

js/index.js

@@ -2,6 +2,9 @@
 // var ajaxUrl = 'http://192.168.99.67:7070'
 var ajaxUrl = 'http://192.168.1.100:7070'
 
+var storeroomId = 'D6490DA3D4261E8C26D0E3'
+var currentIndex = 0
+
 //获取当前时间
 var timer = null
 timer = setInterval(() => {
@@ -17,7 +20,37 @@ var swiper = new Swiper('.swiper-container', {
     el: '.swiper-pagination', // 分页器容器
     clickable: true, // 点击分页器切换
     bulletClass : 'my-bullet',//需设置.my-bullet样式
-  },
+  }
+});
+
+swiper.on('slideChange', function () {
+  currentIndex = swiper.activeIndex;
+  if (currentIndex === 0) {
+    $('.banner-top-name').html('5F 全景图')
+    storeroomId = 'D6490DA3D4261E8C26D0E3'
+    FetchInitDisplayconfig()
+  } else if (currentIndex === 1) {
+    $('.banner-top-name').html('5F 档案库')
+    storeroomId = 'D6490DA3D4261E8C26D0E3'
+  } else if (currentIndex === 2) {
+    $('.banner-top-name').html('5F 整理室')
+    storeroomId = 'D6490DA3D4261E8C26D0E3'
+  } else if (currentIndex === 3) {
+    $('.banner-top-name').html('5F 阅览室')
+    storeroomId = 'D6490DA3D4261E8C26D0E3'
+  } else if (currentIndex === 4) {
+    $('.banner-top-name').html('7F 全景图')
+    storeroomId = '1B2DADD8499058954C0CAC'
+    FetchInitDisplayconfig()
+  } else if (currentIndex === 5) {
+    $('.banner-top-name').html('7F 现行文件室 / 信息技术室')
+    storeroomId = '1B2DADD8499058954C0CAC'
+    FetchInitDisplayconfig()
+  } else if (currentIndex === 6) {
+    $('.banner-top-name').html('7F 待销文件室')
+    storeroomId = 'D4C395BFB0A2E7C96C65A0'
+    FetchInitDisplayconfig()
+  }
 });
 
 var echartsTimer = null
@@ -27,7 +60,6 @@ echartsTimer = setInterval(() => {
   FetchArchivesNum()
   FetchFileAnjuanNum()
   FetchDevice()
-  FetchInitDisplayconfig()
 }, 1000 * 30)
 
 FetchArchivesNum()
@@ -40,7 +72,6 @@ FetchAlarmInfo()
 
 var allDisplayConfigData;
 var allDeviceIds = [];
-var allDeviceIds = [];
 var displayConfigData;
 var url;
 var topDisplayData = {
@@ -79,6 +110,80 @@ var topDisplayData = {
     curValue: '',
     unit: '',
     curstatus: 0
+  },
+  // 7F 现行文件室 / 信息技术室
+  DXW_DIV_TOP_001: {
+    show: false,
+    curValue: '',
+    unit: '',
+    curstatus: 0
+  },
+  DXW_DIV_TOP_002: {
+    show: false,
+    curValue: '',
+    unit: '',
+    curstatus: 0
+  },
+  DXW_DIV_TOP_003: {
+    show: false,
+    curValue: '',
+    unit: '',
+    curstatus: 0
+  },
+  DXW_DIV_TOP_004: {
+    show: false,
+    curValue: '',
+    unit: '',
+    curstatus: 0
+  },
+  DXW_DIV_TOP_005: {
+    show: false,
+    curValue: '',
+    unit: '',
+    curstatus: 0
+  },
+  DXW_DIV_TOP_006: {
+    show: false,
+    curValue: '',
+    unit: '',
+    curstatus: 0
+  },
+  // 7F 待销文件室
+  XXW_DIV_TOP_001: {
+    show: false,
+    curValue: '',
+    unit: '',
+    curstatus: 0
+  },
+  XXW_DIV_TOP_002: {
+    show: false,
+    curValue: '',
+    unit: '',
+    curstatus: 0
+  },
+  XXW_DIV_TOP_003: {
+    show: false,
+    curValue: '',
+    unit: '',
+    curstatus: 0
+  },
+  XXW_DIV_TOP_004: {
+    show: false,
+    curValue: '',
+    unit: '',
+    curstatus: 0
+  },
+  XXW_DIV_TOP_005: {
+    show: false,
+    curValue: '',
+    unit: '',
+    curstatus: 0
+  },
+  XXW_DIV_TOP_006: {
+    show: false,
+    curValue: '',
+    unit: '',
+    curstatus: 0
   }
 }
 var waterLeakage = {
@@ -95,20 +200,33 @@ function FetchInitDisplayconfig() {
     url: ajaxUrl + '/api/displayconfig/list',
     type: 'GET',
     data: {
-      storeroomId: 'D6490DA3D4261E8C26D0E3'
+      storeroomId: storeroomId
     },
     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
+        allDeviceIds = []
+        if (currentIndex == 4 || currentIndex == 5 || currentIndex == 6) {
+            allDisplayConfigData.forEach(item => {
+              if (item.isDisplay && item.bindState && item.deviceInfo && (item.divPosition.includes('OAO') || item.divPosition.includes('TOP'))) {
+                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')) })
+        } else {
+          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')) })
+          })
+          displayConfigData = allDisplayConfigData.filter((item) => { return item.isDisplay && item.bindState && item.deviceInfo && (item.divPosition.includes('OAO') || item.divPosition.includes('TOP') || item.divPosition.includes('LS')) })
+        }
         getRealTimeData()
       }
     },
@@ -145,49 +263,109 @@ function getRealTimeData() {
                   unit: result.unit,
                   curstatus: result.curstatus
                 };
+                if(currentIndex == 0 || currentIndex == 1 || currentIndex == 2 || currentIndex == 3){
+                  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>'
+                }else if(currentIndex == 4 || currentIndex == 5){
+                  var str = '<li class="top003">'
+                  +'<i class="env-svg-item env-svg1"></i>'
+                  +' <div class="msg-txt">'
+                  +'<span class="msg-list-num">'+topDisplayData.DXW_DIV_TOP_003.curValue+'</span>'
+                  +'<p class="msg-list-unit">CO2 '+topDisplayData.DXW_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.DXW_DIV_TOP_004.curValue+'</span>'
+                  +'<p class="msg-list-unit">VOC '+topDisplayData.DXW_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.DXW_DIV_TOP_005.curValue+'</span>'
+                  +'<p class="msg-list-unit">PM2.5 '+topDisplayData.DXW_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.DXW_DIV_TOP_006.curValue+'</span>'
+                  +'<p class="msg-list-unit">PM10 '+topDisplayData.DXW_DIV_TOP_006.unit+'</p>'
+                  +'</div>'
+                  +'</li>'
+                }else if(currentIndex == 6){
+                  var str = '<li class="top003">'
+                  +'<i class="env-svg-item env-svg1"></i>'
+                  +' <div class="msg-txt">'
+                  +'<span class="msg-list-num">'+topDisplayData.XXW_DIV_TOP_003.curValue+'</span>'
+                  +'<p class="msg-list-unit">CO2 '+topDisplayData.XXW_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.XXW_DIV_TOP_004.curValue+'</span>'
+                  +'<p class="msg-list-unit">VOC '+topDisplayData.XXW_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.XXW_DIV_TOP_005.curValue+'</span>'
+                  +'<p class="msg-list-unit">PM2.5 '+topDisplayData.XXW_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.XXW_DIV_TOP_006.curValue+'</span>'
+                  +'<p class="msg-list-unit">PM10 '+topDisplayData.XXW_DIV_TOP_006.unit+'</p>'
+                  +'</div>'
+                  +'</li>'
+                }
 
-                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){
+                if(topDisplayData.DAK_DIV_TOP_003.curstatus > 0 || topDisplayData.DXW_DIV_TOP_003.curstatus > 0 || topDisplayData.XXW_DIV_TOP_003.curstatus > 0){
                   $('.top003').addClass('li-warn');
                 }
-                if(topDisplayData.DAK_DIV_TOP_004.curstatus > 0){
+                if(topDisplayData.DAK_DIV_TOP_004.curstatus > 0 || topDisplayData.DXW_DIV_TOP_004.curstatus > 0 || topDisplayData.XXW_DIV_TOP_004.curstatus > 0){
                   $('.top004').addClass('li-warn');
                 }
-                if(topDisplayData.DAK_DIV_TOP_005.curstatus > 0){
+                if(topDisplayData.DAK_DIV_TOP_005.curstatus > 0 || topDisplayData.DXW_DIV_TOP_005.curstatus > 0 || topDisplayData.XXW_DIV_TOP_005.curstatus > 0){
                   $('.top005').addClass('li-warn');
                 }
-                if(topDisplayData.DAK_DIV_TOP_006.curstatus > 0){
+                if(topDisplayData.DAK_DIV_TOP_006.curstatus > 0 || topDisplayData.DXW_DIV_TOP_006.curstatus > 0 || topDisplayData.XXW_DIV_TOP_006.curstatus > 0){
                   $('.top006').addClass('li-warn');
                 }
-
+                if(currentIndex == 0 || currentIndex == 1 || currentIndex == 2 || currentIndex == 3  ){
                 var strMiddle = '<li class="top001">'
                   +'<i class="env-svg-item env-svg5"></i>'
                   +'<div class="msg-txt">'
@@ -202,11 +380,43 @@ function getRealTimeData() {
                   +'<p class="msg-list-unit">湿度 '+topDisplayData.DAK_DIV_TOP_002.unit+'</p>'
                   +'</div>'
                   +'</li>'
+                }else if(currentIndex == 4 || currentIndex == 5){
+                  var strMiddle = '<li class="top001">'
+                  +'<i class="env-svg-item env-svg5"></i>'
+                  +'<div class="msg-txt">'
+                  +'<span class="msg-list-num">'+topDisplayData.XXW_DIV_TOP_001.curValue+'</span>'
+                  +'<p class="msg-list-unit">温度 '+topDisplayData.XXW_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.XXW_DIV_TOP_002.curValue+'</span>'
+                  +'<p class="msg-list-unit">湿度 '+topDisplayData.XXW_DIV_TOP_002.unit+'</p>'
+                  +'</div>'
+                  +'</li>'
+                }else if(currentIndex == 6){
+                  var strMiddle = '<li class="top001">'
+                  +'<i class="env-svg-item env-svg5"></i>'
+                  +'<div class="msg-txt">'
+                  +'<span class="msg-list-num">'+topDisplayData.DXW_DIV_TOP_001.curValue+'</span>'
+                  +'<p class="msg-list-unit">温度 '+topDisplayData.DXW_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.DXW_DIV_TOP_002.curValue+'</span>'
+                  +'<p class="msg-list-unit">湿度 '+topDisplayData.DXW_DIV_TOP_002.unit+'</p>'
+                  +'</div>'
+                  +'</li>'
+                }
+
                 $('.middle-env').html(strMiddle)
-                if(topDisplayData.DAK_DIV_TOP_001.curstatus > 0){
+                if(topDisplayData.DAK_DIV_TOP_001.curstatus > 0 || topDisplayData.XXW_DIV_TOP_001.curstatus > 0 || topDisplayData.DXW_DIV_TOP_001.curstatus > 0){
                   $('.top001').addClass('li-warn');
                 }
-                if(topDisplayData.DAK_DIV_TOP_002.curstatus >  0){
+                if(topDisplayData.DAK_DIV_TOP_002.curstatus > 0 || topDisplayData.XXW_DIV_TOP_002.curstatus > 0 || topDisplayData.DXW_DIV_TOP_002.curstatus > 0){
                   $('.top002').addClass('li-warn');
                 }
               } else {
@@ -401,7 +611,7 @@ function addTableRefScroll (bodyWrapper, table, displayNum) {
 
 function FetchInitSecurityDoorLog () {
   $.ajax({
-    url: ajaxUrl + '/api/securitydoor/initSecurityDoorLog',
+    url: ajaxUrl + '/api/securitydoor/initSecurityDoorLog1',
     type: 'GET',
     data: {
       page: 0,
@@ -414,7 +624,11 @@ function FetchInitSecurityDoorLog () {
           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>";
+            if(result[i].inOrOut == 0){
+              tempHtml += "<tr><td>" + parseTime(result[i].createTime) + "</td><td>" + result[i].doorName + "</td><td class='right-td'><span>" + result[i].userName + "_进门_"+ result[i].action +"</span></td></tr>";
+            }else{
+              tempHtml += "<tr><td>" + parseTime(result[i].createTime) + "</td><td>" + result[i].doorName + "</td><td class='right-td'><span class='out-door'>" + result[i].userName + "_出门_"+ result[i].action +"</span></td></tr>";
+            }
             $("#fTbody").append(tempHtml);
           }
           tableRefScroll()