FloorClick.js 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
  1. //创建楼层选择器
  2. function creatFloorChoose() {
  3. var floorsign =
  4. `<div id="floorChooseDiv" class="showFloorBtn">
  5. <div value='close' onclick="handleSide()" class ="closeIocn" id='rightSideSwitch'></div>
  6. </div>`;
  7. $('#div2d').append($(floorsign));
  8. var car = app.query(".Floor")
  9. var html = ``
  10. for(let i = 0 ; i < car.length; i++){
  11. html +=
  12. `
  13. <div onclick="floorclick('${car[i].id}')" class = "showFloorBtns" id='${car[i].id}'>${car[i].id}</div>
  14. `
  15. }
  16. $('#floorChooseDiv').append($(html));
  17. $('head').append($(`
  18. <style>
  19. .showFloorBtns{
  20. margin-bottom:6px;
  21. border:1px solid rgb(24,118,208);
  22. border-radius:4px;
  23. text-align:center;
  24. height:28px;
  25. line-height:28px;
  26. width:40px;
  27. color:rgba(255,255,255,0.5);
  28. background-color:rgba(24,144,255,0.3);
  29. // display:inline-block;
  30. }
  31. .showFloorBtn{
  32. position: absolute;
  33. // top:10px;
  34. top:calc(2%);
  35. right:-52px;
  36. // height:800px;
  37. width:50px;
  38. border-radius:0px;
  39. margin-top:0px;
  40. }
  41. .closeIocn{
  42. // margin-bottom:6px;
  43. // border:1px solid rgb(24,118,208);
  44. border-radius:4px;
  45. text-align:center;
  46. height:30px;
  47. line-height:28px;
  48. width:40px;
  49. color:rgba(255,255,255,0.5);
  50. background-image: url(https://s3.ax1x.com/2021/01/29/yCR8dP.png);
  51. background-repeat:no-repeat;
  52. background-position:center center;
  53. position: absolute;
  54. top: calc(50%);
  55. left: -35px;
  56. }
  57. .active{
  58. background-color:red;
  59. }
  60. </style>
  61. `));
  62. }
  63. //楼层切换
  64. function floorclick(id) {
  65. // test();
  66. // delMydiv();
  67. // floormen = id.id;
  68. // building = app.buildings[0];
  69. // var num = floormen.substring(1, 3);
  70. // var s = parseInt(num);
  71. // var floor = building.floors[s - 1];
  72. var floor = app.query("#" + id)[0];
  73. app.level.change(floor);
  74. // creatbutType(s);
  75. creatbutElement(id)
  76. }
  77. // 点击右侧侧边栏开关
  78. function handleSide() {
  79. if ($('#rightSideSwitch').attr('value') == 'close') {
  80. $('.showFloorBtn').animate({ right: 0 }, 300);
  81. // $('#rightSideSwitch').attr('value', 'open');
  82. $('#rightSideSwitch').attr('value', 'open').css('background-image', 'url(https://s3.ax1x.com/2021/01/29/yCRGIf.png)');
  83. } else if ($('#rightSideSwitch').attr('value') == 'open') {
  84. $('.showFloorBtn').animate({ right: -52 }, 300);
  85. $('#rightSideSwitch').attr('value', 'close').css('background-image', 'url(https://s3.ax1x.com/2021/01/29/yCR8dP.png)');
  86. // $('#rightSideSwitch').attr('value', 'close');
  87. }
  88. }
  89. //设备类型div删除
  90. function delMydiv() {
  91. var mydiv = document.getElementById("bottomBtnsRight")
  92. if (mydiv) {
  93. if (mydiv != null)
  94. mydiv.parentNode.removeChild(mydiv);
  95. }
  96. }
  97. //设备类型选择器
  98. function creatbutElement(floorNum) {
  99. if(floorNum == "B1"){
  100. floorNum = "F-1"
  101. }
  102. delMydiv();
  103. var devType = [];
  104. var data = cleanObj(buildingStore);
  105. for (var i = 0; i < data.length; i++) {
  106. var floorData = data[i]
  107. var floorId = floorData.min_level;
  108. var num = floorNum.substring(1, 3);
  109. var s = parseInt(num)
  110. if (floorId == s) {
  111. var dataArray = floorData.item;
  112. if (dataArray) {
  113. for (var q = 0; q < dataArray.length; q++) {
  114. var eee = dataArray[q].dwtype;
  115. devType.push(eee);
  116. }
  117. }
  118. break;
  119. }
  120. }
  121. var darray = uniq(devType);
  122. var textAndPictureMarkerHtml =
  123. `<div class="bottomBtnsRight" id="bottomBtnsRight">
  124. </div>`;
  125. $('#div2d').append($(textAndPictureMarkerHtml));
  126. darray.forEach(function (name) {
  127. if (name == "YTVA") {
  128. var yTVAHtml =
  129. `<div onclick="icon_click('YTVA',` + s + `)" class="bottomBtn" value='视频告警监测'>
  130. <span class="bottomBtnText">视频告警监测<span>
  131. </div>